最近项目需求，需要一个对于全国各个省份的数据分析，图形最好是地图的样子，这样子更为直观。

最先想到的图表插件是Echarts,他的文档相对于阿里的G2,G6更加清晰一些。在Echarts 里找到的个

实例，效果如gif图，这里是实例的链接： https://gallery.echartsjs.com/editor.html?c=xa5_zRRpes，

看到上面的评论里，有挺多人评论说图形显示不了，因为实例上只有图表的属性Option,是无法显示

的。根据文档是需要创建一个 ECharts 实例，然后通过setOptions属性去设置图表实例的配置项以及

数据，实例化代码如下：

<div id="dom"></div>

//实例容器，一般是一个具有高宽的div元素。

//注：如果div是隐藏的，ECharts 可能会获取不到div的高宽导致初始化失败，这时候可以明确指定div的style.width和style.height，或者在div显示后手动调用 echartsInstance.resize 调整尺寸。

let  dom = echarts.init(document.querySelector('#dom')) //实例化dom
dom.setOption(option)//设置

重要的一点：我们需要自己引入地图数据，中国地图就需要引入china.js

ECharts 3 中因为地图精度的提高，不再内置地图数据增大代码体积，你可以在地图下载界面下载到需要的地图文件引入并注册到 ECharts 中。

ECharts 中提供了两种格式的地图数据，一种是可以直接 script 标签引入的 js 文件，引入后会自动注册地图名字和数据。还有一种是 JSON 文件，需要通过 AJAX 异步加载后手动注册。

下面是两种类型的使用示例：

JavaScript 引入示例

<script src="echarts.js"></script>

<script src="map/js/china.js"></script>

<script>

var chart = echarts.init(document.getElementById('main'));

chart.setOption({

    series: [{

        type: 'map',

        map: 'china'

    }]

});

</script>

JSON 引入示例

$.get('map/json/china.json', function (chinaJson) {

    echarts.registerMap('china', chinaJson);

    var chart = echarts.init(document.getElementById('main'));

    chart.setOption({

        series: [{

            type: 'map',

            map: 'china'

        }]

    });

});

完整的代码

我是使用vue框架开发，需要install一下echarts，执行npm i -S echarts

map.vue(地图组件代码)

<template>
  <div :style="styles" ref="dom"></div>
</template>
<script>
import echarts from "echarts";
import { on, off,getChartsMapData } from '@/libs/tools'
import "../../../../node_modules/echarts/map/js/china.js"; // 引入中国地图数据
export default {
  name: "ChartsMap",
  props: {
    /**
     * @description 图表宽
     */
    width: {
      type: String,
      default: '50%'
    },
    /**
     * @description 图表高
     */
    height: {
      type: String,
      default: '500px'
    },
    /**
     * @description 图表数据
     */
    data: {
      type: Array,
      default: () => {
        /**
         * @description getChartsMapData() 获取地图的默认数据
         */
        return getChartsMapData()
      }
    },
    /**
     * @description 设置图表的标题
     */
    title: {
      type: Object,
      default: () => {
        return {
          show: true,
          text: "排名情况",
          textAlign: 'center',
          textStyle: {
            color: "#2D3E53",
            fontSize: 30
          },
          left: 'center',
        }
      }
    },
    /**
     * @description 指定 visualMapContinuous 组件的允许的最小值
     */
    min: {
      type: [Number,String],
      default: 0
    },
    /**
     * @description 指定 visualMapContinuous 组件的允许的最大值
     */
    max: {
      type: [Number,String],
      default: 34
    },
     /**
     * @description 指定 visualMapContinuous 组件的两端的文本 如['高','低']
     */
    text: {
      type: Array,
      default: () => ['高','低']
    },
    /**
     * @description 定义 在选中范围中 的视觉元素
     */
    inRange: {
      type: Object,
      default: () => {
        return {
          color: ["#6FCF6A", "#FFFD64", "#FF5000"]
        }
      }
    }
  },
  data () {
    return {
      dom: null
    }
  },
  computed: {
    styles() {
      return {
        width: this.width,
        height: this.height
      }
    }
  },
  methods: {
    resize () {
      this.dom.resize()
    }
  },
  mounted () {
    var option = {
      title: this.title,
      tooltip: {
        show: true,
        formatter: function(params) {
          return params.name + "：" + params.data["value"] + "%";
        }
      },
      visualMap: {
        type: "continuous",
        orient: "horizontal",
        itemWidth: 10,
        itemHeight: 80,
        text: this.text,
        showLabel: true,
        seriesIndex: [0],
        min: this.min,
        max: this.max,
        inRange: this.inRange,
        textStyle: {
          color: "#7B93A7"
        },
        bottom: 30,
        left: "left",
      },
      grid: {
        right: 10,
        top: 135,
        bottom: 100,
        width: "20%"
      },
      geo: {
        // roam: true,
        map: "china",
        left: "left",
        right: "300",
        // layoutSize: '80%',
        label: {
          emphasis: {
            show: false
          }
        },
        itemStyle: {
          emphasis: {
            areaColor: "#fff464"
          }
        }
      },
      series: [
        {
          name: "mapSer",
          type: "map",
          roam: false,
          geoIndex: 0,
          label: {
            show: false
          },
          data: this.data
        }
      ]
    }
    this.$nextTick(() => {
      this.dom = echarts.init(this.$refs.dom)
      this.dom.setOption(option)
      on(window, 'resize', this.resize)
    })
  },
  beforeDestroy () {
    off(window, 'resize', this.resize)
  }
};
</script>

使用代码

<template>
  <div id="app">
    <charts-map>
    </charts-map>
  </div>
</template>
<script>
import ChartsMap from "_c/charts/map"
import { getChartsMapData } from '@/libs/tools.js'
export default {
  name: 'app',
  components: {
    ChartsMap
  },
  data () {
    return {
      width: '70%',
      height: '800px',
      data: getChartsMapData(),
      min: 10,
      max: 30,
      text: ['High', 'low'],
      inRange: {
        color: ['#f00', '#fff', '#00f']
      },
      title: {
        show: true,
        text: '全国数据',
        textAlign: 'center',
        textStyle: {
          color: '#2D3E53',
          fontSize: 30,
          lineHeight: 100
        },
        left: 'center',
      }
    }
  }
}
</script>

tools.js 这个工具函数，监听浏览器的resize事件和创造假数据

　　

/**
 * @description 绑定事件 on(element, event, handler)
 */
export const on = (function () {
  if (document.addEventListener) {
    return function (element, event, handler) {
      if (element && event && handler) {
        element.addEventListener(event, handler, false)
      }
    }
  } else {
    return function (element, event, handler) {
      if (element && event && handler) {
        element.attachEvent('on' + event, handler)
      }
    }
  }
})()
/**
 * @description 解绑事件 off(element, event, handler)
 */
export const off = (function () {
  if (document.removeEventListener) {
    return function (element, event, handler) {
      if (element && event) {
        element.removeEventListener(event, handler, false)
      }
    }
  } else {
    return function (element, event, handler) {
      if (element && event) {
        element.detachEvent('on' + event, handler)
      }
    }
  }
})()
/**
 * @description 获取地图数据 getChartsMapData()
 */
 export const getChartsMapData = () => {
    const data = ["内蒙古","黑龙江","吉林","辽宁","北京","天津","河北","河南","山西","山东","江苏","安徽",
    "上海","湖北","湖南","江西","浙江","福建","台湾","广东","香港","澳门","海南","广西","贵州","云南","重庆",
    "四川","甘肃","陕西","宁夏","青海","西藏","新疆",]
    return data.map((item,index) => {
      return {
        name: item,
        value: index + 1
      }
    })
 }

我已经将他封装成一个vue组件，做成一个npm包了，直接npm install brock-charts -S 就可以使用，具体使用方法可以看这个地址：

https://www.npmjs.com/package/brock-charts

利用Echarts实现全国各个省份数据占比，图形为中国地图的更多相关文章

  1. echarts实现中国地图数据展示

    在项目中运用到图形展示数据太常见了,echarts是一款使用率非常高的插件工具,很多大平台都是使用echarts: 一般运用到条形.折线.扇形图,今天说一说在中国地图上展示各地数据: 首先要准备中国地 ...

  2. Echarts 展示两条动态数据曲线

    利用Echarts 展示两条动态数据曲线,每1秒刷新一下数据,在echart官网例子基础上修改,修改了仿真数据的生成方式.生成数量,曲线数量,最总效果图如下: 详细代码如下: 遇到的主要问题点, 1, ...

  3. 用echarts绘制中国地图

    在项目中运用到图形展示数据太常见了,echarts是一款使用率非常高的插件工具,很多大平台都是使用echarts: 一般运用到条形.折线.扇形图,今天说一说在中国地图上展示各地数据: 首先要准备中国地 ...

  4. C#+JQuery+.Ashx+百度Echarts实现全国省市地图和饼状图动态数据图形报表的统计

    在目前的一个项目中,需要用到报表表现数据,这些数据有多个维度,需要同时表现出来,同时可能会有大量数据呈现的需求,经过几轮挑选,最终选择了百度的echarts作为报表基础类库.echarts功能强大,界 ...

  5. vue 下实现 echarts 全国到省份的地图下钻

    vue 下实现 echarts 全国到省份的地图下钻 项目地址:https://github.com/cag2050/vue_echarts_v3_demo

  6. echarts 中国地图 数据自动提示

    mounted() { // 首先每种图是根据series -->type决定的 eg:bar--柱状图 line 折线图 pie饼图 map地图等等三部曲 跟着走 // @第一步都是初始化 v ...

  7. echarts.制作中国地图,点击对应的省市链接到该省份的详细介绍

    今天花了一天的时间,用echart弄了一个效果,是从中国地图点进去身份并把改省份的数据渲染出来的效果,刚开始完全没有头绪,只能硬着头皮去看百度echart的api,和博客,看了半天,好家伙,终于给我找 ...

  8. 基于Echarts的中国地图数据展示

    发布时间:2018-10-31   技术:javascript+html5+canvas   概述 基于echarts的大数据中国地图展示,结合API定制,开发样式,监听鼠标事件,实现带参数路由跳转等 ...

  9. Echarts动画效果：实现数据左右移动

    1.业务背景 图形实时从后台获取数据,让图形从最右边出现,每隔一秒向左移一位,当最左边的数据移到Y轴时,最左边的数据移出屏幕,最右边增加一个数.实现一个从右往左动画的效果 2.先看下项目中的demo解 ...

随机推荐

  1. netcore mvc 的简单实现

    实现的功能 简单的路由系统 支持中间件 简单Filter支持 只支持HttpPost.HttpGet 使用Dotliquid做为视图渲染引擎 核心实现 HttpChannel 复制监听Tcp请求,并按 ...

  2. 原创 | 手摸手带您学会 Elasticsearch 单机、集群、插件安装(图文教程)

    欢迎关注笔者的公众号: 小哈学Java, 每日推送 Java 领域干货文章,关注即免费无套路附送 100G 海量学习.面试资源哟!! 个人网站: https://www.exception.site/ ...

  3. .Net基础篇_学习笔记_第四天_if结构

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  4. 搜索入门练习题9 LETTERS 题解

    题目出处:<信息学奥赛一本通>第五章上机练习1 或者 POJ1154 题目描述 给出一个 \(R\times S\) 的大写字母矩阵,一开始你所处的位置在左上角,你可以向上下左右四个方向移 ...

  5. Java 中的 syncronized 你真的用对了吗

    生活中随处可见并行的例子,并行 顾名思义就是一起进行的意思,同样的程序在某些时候也需要并行来提高效率,在上一篇文章中我们了解了 Java 语言对缓存导致的可见性问题.编译优化导致的顺序性问题的解决方法 ...

  6. 宝锋UV-5R说明书下载

    宝锋UV-5R说明书 百度网盘下载地址: 链接: https://pan.baidu.com/s/1QJXEJ2YyO7ovMAQG7Uur4A 提取码: j8d2 BI8EJM     73    ...

  7. ExpandableListView之BaseExpandableListAdapter

    之前使用的SimpleExpandableListAdapter有较大局限性,样式单一,修改难度大,这里不建议使用,而是利用BaseExpandableListAdapter,其实SimpleExpa ...

  8. 13 (OC)* SDWebImage

    IOS SDWebImage实现原理详解   在之前我写过SDWebImage的使用方法,主要是用与获取网络图片,没有看过的朋友可以看看. 这篇文章将主要介绍SDWebImage的实现原理,主要针对于 ...

  9. Hadoop 之 Hadoop2.0

    1.Hadoop2.0与1.0 答:Hadoop2.0之后的版本移除了原有的JobTracker和TaskTracker,改由Yarn平台的ResourceManager负责集群中所有资源的管理和分配 ...

  10. WebStorm2017.3.4版本 注册码

    http://idea.singee77.com http://im.js.cn:8888