一、前言
由于项目需求，需要一个中国地图，上面根据从服务器获取到的数据，显示各省份的数据。在eEcharts官网，发现没有地图相关的案列(搜索了一下，都下架了)，只有社区有。
二、查找资料
eChartes官网：官网
社区网址：社区
在社区搜索地图，找到一个跟项目接近的案列，我找到的如下：
三、导入到项目
参考项目地址
导入项目的时候，遇到一些疑问，这些引用的json数据貌似都是外部的数据，这个社区中又没有这些文件，通过搜索发现，这些数据都是地图相关的数据信息，只能自己先准备
var provinces = {'上海': '/asset/get/s/data-1594958113307-cxRUVth12.json','河北': '/asset/get/s/data-1594957443106-mUbmYqE_T.json','山西': '/asset/get/s/data-1594957766868-uxxAlaOQg.json','内蒙古': '/asset/get/s/data-1594957676205-3QrKkEs35.json',....
参考这个项目：github地图项目
(1)找到china的json数据，将这个数据放到自己的public/data/json目录下(我的是vue项目，放到自己打包后能找到的路径下,名字不一样可以忽略)
(2)初始化加载地图
这里需要注意的是，解析json数据，用的jquery的get方法，这个很简单，不会的自行百度一下
//数据data() {return {allData: [{name: '北京'，value: 310},{name: '上海'，value: 210},],}},.....//地图初始化initMapData(let that = this//json文件路径const chinaMapDataPath = '/data/json/data-1527045631990-r1dZ0IM1X.json'// 基于准备好的dom，初始化echarts实例const echarts = this.$echartslet myChart = echarts.init(document.getElementById('main'))//解析json数据this.$.getJSON(chinaMapDataPath, function (geoJson) {if (geoJson) {//将数据注册到地图上(注意这样的名字，china)echarts.registerMap('china', geoJson)var option = {title: {text: '中国地图',left: 'left',textStyle: {color:'#ffffff'}},toolbox: {//工具栏show: false,feature: {dataView: { show: true, readOnly: false },magicType: { show: true, type: ['line', 'map'] },restore: { show: true },saveAsImage: { show: true }}},tooltip: {show: true,// 鼠标放地图上显示数据formatter: function (params) {if (params.data) {return params.name + '：' + params.data['value']} else {return params.name}},},visualMap: { //左侧的柱子图show: false,type: 'continuous',text: ['高', '低'],showLabel: true,left: '50',min: 0,max: 100,inRange: {color: ['#edfbfb', '#b7d6f3', '#40a9ed', '#3598c1', '#215096',]},splitNumber: 0},series: [{zoom: 1.1, //设置地图大小name: 'MAP',type: 'map',// mapType: 'china',map:'china',selectedMode: 'false',//是否允许选中多个区域label: {show: true,// normal: {//show: true// },emphasis: {show: true},fontSize: 10,// 地图上文字样式// textStyle: {//label选中textStyle属性可以直接放外面//fontSize: 10,//// fontWeight: 'bold',//// color: 'red'// }},// emphasis:{//show: true,//label:{// show: true,//}// },data: that.allData}]}myChart.setOption(option);// curMap = {//mapCode: mapCode,//mapName: name// };} else {alert('无法加载该地图');}})
