前言

由于5.X版本的echarts没有了map包，因此我先安装了5.1.1版本，再安装了4.9版本，并将4.9版本中的map包复制到了5.1.1版本里。

绘制效果如下：
1、省份根据数据值，展示不同颜色。
2、具体城市展示大小不同的点
3、前五名城市展示涟漪效果
4、支持省份可点击

1、按需引入依赖

// 第一步
import * as echarts from 'echarts/core';
import china from 'echarts/map/json/china.json' //重点，从4.9版本中拿到
import {TitleComponent,ToolboxComponent,TooltipComponent,VisualMapComponent,GeoComponent
} from 'echarts/components';
import {MapChart
} from 'echarts/charts';
import {CanvasRenderer
} from 'echarts/renderers';
import 'echarts/extension/bmap/bmap'

2、初始化

// 第二步
methods: {useEchart() {// 数据来源echarts官网示例var data = [{name: '海门', value: 9},{name: '鄂尔多斯', value: 12},{name: '招远', value: 12},{name: '舟山', value: 12},{name: '齐齐哈尔', value: 14},]var geoCoordMap = {'海门':[121.15,31.89],'鄂尔多斯':[109.781327,39.608266],'招远':[120.38,37.35],'舟山':[122.207216,29.985295],'齐齐哈尔':[123.97,47.33],]var convertData = function (data) {var res = [];for (var i = 0; i < data.length; i++) {var geoCoord = geoCoordMap[data[i].name];if (geoCoord) {res.push({name: data[i].name,value: geoCoord.concat(data[i].value),visualMap: false  // 具体的点，不用根据省份变颜色});}}return res;};echarts.use([TitleComponent, ToolboxComponent, TooltipComponent, VisualMapComponent, GeoComponent, MapChart, CanvasRenderer]);var chartDom = document.getElementById('main');var myChart = echarts.init(chartDom);var option;// ......第三步}
}

3、绘制geo地图

// 接上图第三步，在useEchart方法内echarts.registerMap('china', china);   // 定义这个地图数据为 ‘china’，后续会用myChart.setOption(option = {title: {text: '绘制地图',},tooltip: {trigger: 'item',},visualMap: {  // 根据数据展示不同颜色min: 0,max: 1200,text: ['High', 'Low'],realtime: false,calculable: true,inRange: {color: ['yellow','orange', 'red']}},geo: [{   // 绘制geo地图map: "china", // 定义的数据名称roam: true, aspectScale: 0.8, layoutCenter: ["50%", "38%"],layoutSize: 370, label: { // 基本的一些样式normal: {show: true,textStyle: {color: "rgba(0, 0, 0, 0.9)",fontSize: '8'}},formatter:'{b} 数据量：<br/>{c}',emphasis: {color: "#333"}},regions: [ //隐藏南海诸岛，可以不去掉，根据业务需求{name: "南海诸岛",itemStyle: {// 隐藏地图normal: {opacity: 0, // 为 0 时不绘制该图形}},label: {show: false // 隐藏省份文案，false不隐藏}},],}],// ....第四步})option && myChart.setOption(option);

此时，已经可以绘制出一个白底的中国地图，但这只是一个底图达不到业务需求，我们进行下一步。

4、配置series

// 接上图第四步myChart.setOption(option = {series: [{name: '全国节点',type: 'map',roam: true,mapType: 'china', // 自定义扩展图表类型label: {show: true},// geoIndex:'0', 先不加这个属性data: [// 各省数据{name: '湖北',value: 1510,title:'hubei'},{name: '湖南',value: 222,title:'hunan'},{name: '江西',value: 333,title:'jiangxi'},{name: '安徽',value: 444,title:'anhui'},{name: '云南',value: 555,title:'yunnan'},{name: '广东',value: 666,title:'guangdong'},{name: '福建',value: 421,title:'fujian'},{name: '广西',value: 241,title:'guangxi'},{name: '浙江',value: 234,title:'zhejiang'},{name: '江苏',value: 341,title:'jiangsu'},{name: '上海',value: 1134,title:'shanghai'},{name: '海南',value: 351,title:'hainan'},{name: '香港',value: 351,title:'xianggang'},{name: '澳门',value: 61,title:'aomen'},{name: '台湾',value: 136,title:'taiwan'},{name: '贵州',value: 462,title:'guizhou'},{name: '重庆',value: 462,title:'chongqing'},{name: '宁夏',value: 32,title:'ningxia'},{name: '四川',value: 342,title:'sichuan'},{name: '新疆',value: 144,title:'xinjiang'},{name: '西藏',value: 35,title:'xizang'},{name: '青海',value: 33,title:'qinghai'},{name: '甘肃',value: 312,title:'gansu'},{name: '内蒙古',value: 1233,title:'neimenggu'},{name: '陕西',value: 213,title:'shanxi1'},{name: '北京',value: 3111,title:'beijing'},{name: '辽宁',value: 232,title:'liaoning'},{name: '黑龙江',value: 332,title:'heilongjiang'},{name: '山西',value: 313,title:'shanxi'},{name: '山东',value: 1833,title:'shandong'},{name: '河北',value: 1283,title:'hebei'},{name: '河南',value: 1233,title:'henan'},{name: '吉林',value: 233,title:'jilin'},{name: '天津',value: 323,title:'tianjin'},{name: '南海诸岛',value: 0},],},{ // 下面内容可以在echarts官网示例中查看// 所有城市点name: 'pm2.5',type: 'scatter', //非涟漪效果coordinateSystem: 'geo', // 官网是bmap 这里要改成geodata: convertData(data),encode: {value: 2},symbolSize: function (val) {return val[2] / 10;},label: {formatter: '{b}',position: 'right'},itemStyle: {color: 'blue'},emphasis: {label: {show: true}}},{// 前五名城市点name: 'Top 5',type: 'effectScatter', //涟漪效果coordinateSystem: 'geo', // 官网是bmap 这里要改成geodata: convertData(data.sort(function (a, b) {return b.value - a.value;}).slice(0, 6)),encode: {value: 2},symbolSize: function (val) {return val[2] / 10;},showEffectOn: 'render',rippleEffect: {brushType: 'stroke'},hoverAnimation: true,label: {formatter: '{b}',position: 'right',show: true},itemStyle: {color: 'blue',shadowBlur: 10,shadowColor: '#333'},zlevel: 1},]})

此时，已经可以绘制出2张中国地图，一张原来的白色geo的底图，但上面已经有了所有的点，还有一张根据省份值变色的图。

我们滚动鼠标发现，所有的点位跟在geo图上，而省份颜色却在series画的图上，我们需要让二者合并。
因此，需要在series上添加 geoIndex:‘0’ 属性，

再运行一下，是不是很神奇。

最后添加点击事件

option && myChart.setOption(option);// 在这里myChart.on('click', function (params) {console.log(params);if(params.componentSubType === 'map'){ //判断点击的是点还是 省份console.log('点击了省份:' + params.data.name)}});

echarts改版变化很频繁，还是需要根据业务需求，一点点的尝试吧。

vue中用echarts 绘制geo 中国地图相关推荐

echarts 绘制世界地图中国地图
1.下载世界地图和中国地图加载包网上找了很长时间,分享 world.js china.js 下载地址: 链接:https://pan.baidu.com/s/1itbfiTMNMkcbLfUs0N ...
vue使用echarts绘制中国地图
vue使用echarts绘制中国地图 //myMap.vue <div id="geo"></div>//china.js下载地址 https://down ...
使用Echarts完成对中国地图的绘制
目录前言 1.什么是Echarts插件 2.如何在vue中使用Echarts 3.中国地图的具体样式 4.如何使用Echarts来完成中国地图的绘制 5.总结前言我们在使用代码绘画地图的时候通常 ...
使用Echarts绘制geo地图（案例）
使用Echarts绘制geo地图(案例) 项目使用@vue/cli 4.5.13以及echarts版本为5.1.2. 需求:在省份地图上,将数据进行分段映射.如图: 首先下载geojson数据链接: ...
Vue中使用echart实现中国地图统计图
Vue中使用echart实现中国地图统计图前言 Echart版本的确定全局导入或按需导入在对应的页面调用echart 前后端数据交互注意事项前言在Vue2.x开发中,为了更好地展示某一个时间 ...
echarts绘制上海市乡镇级地图
echarts绘制上海市乡镇级地图 echarts 最新版本不支持GeometryCollection,虽然有人在4年前就提了issue <!DOCTYPE html> <html ...
python采用Basemap绘制完美中国地图（包括绘制边界框，随机点等）
python采用Basemap绘制完美中国地图(包括绘制边界框,随机点等) 1. 效果图 2. 原理 2.1 依赖模块及安装 2.2 工程目录 2.3 依赖文件latlng.txt 经纬度 3 源码 ...
python采用Basemap绘制完美中国地图
python采用Basemap绘制完美中国地图摘要 Basemap的安装下载Basemap安装文件安装 Pyproj& Basemap Basemap的Helloword 使用Shape ...
用Vue和ECharts绘制问卷统计结果
用Vue和ECharts绘制问卷统计结果问卷设置了单选题.多选题以及文本题三中类型,分别使用了饼图.条形图.文本框来显示结果. 首先在html文件中,给div绑定一个"question-i ...

vue中用echarts 绘制geo 中国地图

前言