vue中使用echarts实现中国地图

第一种效果：不同省份颜色不同

代码：
注意：
①要实现这种效果，地图数据的name一定要是省份的名字，要不然颜色出不来；
②一定要有visualMap配置，并且它的seriesIndex属性 对应的是series的数组下标；

<template><divclass="echartsMapAllDemo"><!-- style的宽高一定要写，不写也不会展示echarts图 --><divid="myEcharts"ref="myEcharts"style="width:100vw;height:100vh;border:3px solid gold"></div></div></template><script>import chinaJson from"../../assets/china.json";exportdefault{data(){return{};},mounted(){this.chinaEcharts();},methods:{chinaEcharts(){//1.注册一个地图this.$echarts.registerMap("china", chinaJson);//2.初始化echartslet myChart =this.$echarts.init(this.$refs.myEcharts);// 3.准备数据var data =[{name:"北京",value:177},{name:"天津",value:42},{name:"河北",value:102},{name:"山西",value:81},{name:"内蒙古",value:47},{name:"辽宁",value:67},{name:"吉林",value:82},{name:"黑龙江",value:66},{name:"上海",value:24},{name:"江苏",value:92},{name:"浙江",value:114},{name:"安徽",value:109},{name:"福建",value:116},{name:"江西",value:91},{name:"山东",value:119},{name:"河南",value:137},{name:"湖北",value:116},{name:"湖南",value:114},{name:"重庆",value:91},{name:"四川",value:125},{name:"贵州",value:62},{name:"云南",value:83},{name:"西藏",value:9},{name:"陕西",value:80},{name:"甘肃",value:56},{name:"青海",value:10},{name:"宁夏",value:18},{name:"新疆",value:67},{name:"广东",value:123},{name:"广西",value:59},{name:"海南",value:14}];var geoCoordMap ={上海:[121.472644,31.231706],云南:[102.712251,25.040609],内蒙古:[111.670801,40.818311],北京:[116.405285,39.904989],台湾:[121.509062,25.044332],吉林:[125.3245,43.886841],四川:[104.065735,30.659462],天津:[117.190182,39.125596],宁夏:[106.278179,38.46637],安徽:[117.283042,31.86119],山东:[117.000923,36.675807],山西:[112.549248,37.857014],广东:[113.280637,23.125178],广西:[108.320004,22.82402],新疆:[87.617733,43.792818],江苏:[118.767413,32.041544],江西:[115.892151,28.676493],河北:[114.502461,38.045474],河南:[113.665412,34.757975],浙江:[120.153576,30.287459],海南:[110.33119,20.031971],湖北:[114.298572,30.584355],湖南:[112.982279,28.19409],澳门:[113.54909,22.198951],甘肃:[103.823557,36.058039],福建:[119.306239,26.075302],西藏:[91.132212,29.660361],贵州:[106.713478,26.578343],辽宁:[123.429096,41.796767],重庆:[106.504962,29.533155],陕西:[108.948024,34.263161],青海:[101.778916,36.623178],香港:[114.173355,22.320048],黑龙江:[126.642464,45.756967],};//4.把数据变成[{{ name: "北京", value: [121.472644, 31.231706,177] },...}]格式varconvertData=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)});}}
        console.log(res)return res;};//5.echarts配置let option ={backgroundColor:"transparent",title:{text:"全国主要城市空气质量",subtext:"data from PM25.in",sublink:"http://www.pm25.in",left:"center",textStyle:{color:"#fff"}},tooltip:{trigger:"item",formatter:"{b}<br/>{c} "},1)加上这个就可以实现多种颜色的功能
        visualMap:{min:0,max:100,text:['High','Low'],calculable:true,seriesIndex:[0],//这个对应的是series的数组下标inRange:{color:["#00467F","#A5CC82"]}},//series就是地图上的数据（去掉就没有数据了）series:[{type:"map",map:'china',geoIndex:0,aspectScale:0.75,//长宽比showLegendSymbol:false,// 存在legend时显示label:{normal:{show:true},emphasis:{show:false,textStyle:{color:"#fff"}}},roam:true,animation:false,data: data
          },]};
      myChart.setOption(option);
      window.addEventListener("resize",function(){
        myChart.resize();});}}};</script><stylelang="less">.echartsMapAllDemo{}</style>

第二种效果：地图+光圈散点

注意：
①一定要有geo这个配置，要不然光圈出不来。
并且series中的 type: “effectScatter”,的属性中一定要加上 coordinateSystem: “geo”,
② 然后对应的series中 这几个样式一定要加，加上才有那种光圈的效果

showEffectOn:"render",rippleEffect:{brushType:"stroke"},hoverAnimation:true,

<template><divclass="echartsMapAllDemo"><!-- style的宽高一定要写，不写也不会展示echarts图 --><divid="myEcharts"ref="myEcharts"style="width:100vw;height:100vh;border:3px solid gold"></div></div></template><script>import chinaJson from"../../assets/china.json";exportdefault{data(){return{};},mounted(){this.chinaEcharts();},methods:{chinaEcharts(){this.$echarts.registerMap("china", chinaJson);let myChart =this.$echarts.init(this.$refs.myEcharts);var data =[{name:"北京",value:177},{name:"天津",value:42},{name:"河北",value:102},{name:"山西",value:81},{name:"内蒙古",value:47},{name:"辽宁",value:67},{name:"吉林",value:82},{name:"黑龙江",value:66},{name:"上海",value:24},{name:"江苏",value:92},{name:"浙江",value:114},{name:"安徽",value:109},{name:"福建",value:116},{name:"江西",value:91},{name:"山东",value:119},{name:"河南",value:137},{name:"湖北",value:116},{name:"湖南",value:114},{name:"重庆",value:91},{name:"四川",value:125},{name:"贵州",value:62},{name:"云南",value:83},{name:"西藏",value:9},{name:"陕西",value:80},{name:"甘肃",value:56},{name:"青海",value:10},{name:"宁夏",value:18},{name:"新疆",value:67},{name:"广东",value:123},{name:"广西",value:59},{name:"海南",value:14}];var geoCoordMap ={上海:[121.472644,31.231706],云南:[102.712251,25.040609],内蒙古:[111.670801,40.818311],北京:[116.405285,39.904989],台湾:[121.509062,25.044332],吉林:[125.3245,43.886841],四川:[104.065735,30.659462],天津:[117.190182,39.125596],宁夏:[106.278179,38.46637],安徽:[117.283042,31.86119],山东:[117.000923,36.675807],山西:[112.549248,37.857014],广东:[113.280637,23.125178],广西:[108.320004,22.82402],新疆:[87.617733,43.792818],江苏:[118.767413,32.041544],江西:[115.892151,28.676493],河北:[114.502461,38.045474],河南:[113.665412,34.757975],浙江:[120.153576,30.287459],海南:[110.33119,20.031971],湖北:[114.298572,30.584355],湖南:[112.982279,28.19409],澳门:[113.54909,22.198951],甘肃:[103.823557,36.058039],福建:[119.306239,26.075302],西藏:[91.132212,29.660361],贵州:[106.713478,26.578343],辽宁:[123.429096,41.796767],重庆:[106.504962,29.533155],陕西:[108.948024,34.263161],青海:[101.778916,36.623178],香港:[114.173355,22.320048],黑龙江:[126.642464,45.756967]};varconvertData=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)});}}// console.log(res)return res;};let option ={backgroundColor:"transparent",title:{text:"全国主要城市空气质量",subtext:"data from PM25.in",sublink:"http://www.pm25.in",left:"center",textStyle:{color:"#fff"}},tooltip:{trigger:"item"},//这个属性配置一定要有，要不然无法实现光圈效果geo:{show:true,map:"china",label:{normal:{show:true},emphasis:{show:false}},roam:true,itemStyle:{normal:{areaColor:"#031525",borderColor:"#3B5077"},emphasis:{areaColor:"#2B91B7"}}},//series就是地图上的数据（去掉就没有数据了）series:[//所有的市{name:"pm2.5",type:"effectScatter",coordinateSystem:"geo",data:convertData(data),symbolSize:function(val){return val[2]/10;},//这几个样式一定要加，加上才有那种光圈的效果showEffectOn:"render",rippleEffect:{brushType:"stroke"},hoverAnimation:true,label:{formatter:"{b}",position:"right",show:true},//圆点的样式itemStyle:{color:"#ddb926"},emphasis:{label:{show:true}}}]};
      myChart.setOption(option);
      window.addEventListener("resize",function(){
        myChart.resize();});}}};</script><stylelang="less">.echartsMapAllDemo{}</style>

第三种效果:多彩省份+光圈散点+气泡

这个差不多就是上面两个的结合
但这种方法比较有趣的一点就是不需要写中国全省和各市的地理坐标，也就是说不需要我们手动提取出来他们的坐标，而是通过方法自动获取到，这一点就很有意思。

<template><div><divid="map"style="width:100vw;height:100vh;"ref="map"></div></div></template><script>import chinaJson from"../../assets/china.json";exportdefault{data(){return{};},mounted(){this.$echarts.registerMap("china", chinaJson);let myChart =this.$echarts.init(this.$refs.map);this.$nextTick(()=>{var mapName ="china";var data =[{name:"北京",value:177},{name:"天津",value:42},{name:"河北",value:102},{name:"山西",value:81},{name:"内蒙古",value:47},{name:"辽宁",value:67},{name:"吉林",value:82},{name:"黑龙江",value:66},{name:"上海",value:24},{name:"江苏",value:92},{name:"浙江",value:114},{name:"安徽",value:109},{name:"福建",value:116},{name:"江西",value:91},{name:"山东",value:119},{name:"河南",value:137},{name:"湖北",value:116},{name:"湖南",value:114},{name:"重庆",value:91},{name:"四川",value:125},{name:"贵州",value:62},{name:"云南",value:83},{name:"西藏",value:9},{name:"陕西",value:80},{name:"甘肃",value:56},{name:"青海",value:10},{name:"宁夏",value:18},{name:"新疆",value:67},{name:"广东",value:123},{name:"广西",value:59},{name:"海南",value:14}];var geoCoordMap ={};var toolTipData =[{name:"北京",value:[{name:"文科",value:95},{name:"理科",value:82}]},{name:"天津",value:[{name:"文科",value:22},{name:"理科",value:20}]},{name:"河北",value:[{name:"文科",value:60},{name:"理科",value:42}]},{name:"山西",value:[{name:"文科",value:40},{name:"理科",value:41}]},{name:"内蒙古",value:[{name:"文科",value:23},{name:"理科",value:24}]},{name:"辽宁",value:[{name:"文科",value:39},{name:"理科",value:28}]},{name:"吉林",value:[{name:"文科",value:41},{name:"理科",value:41}]},{name:"黑龙江",value:[{name:"文科",value:35},{name:"理科",value:31}]},{name:"上海",value:[{name:"文科",value:12},{name:"理科",value:12}]},{name:"江苏",value:[{name:"文科",value:47},{name:"理科",value:45}]},{name:"浙江",value:[{name:"文科",value:57},{name:"理科",value:57}]},{name:"安徽",value:[{name:"文科",value:57},{name:"理科",value:52}]},{name:"福建",value:[{name:"文科",value:59},{name:"理科",value:57}]},{name:"江西",value:[{name:"文科",value:49},{name:"理科",value:42}]},{name:"山东",value:[{name:"文科",value:67},{name:"理科",value:52}]},{name:"河南",value:[{name:"文科",value:69},{name:"理科",value:68}]},{name:"湖北",value:[{name:"文科",value:60},{name:"理科",value:56}]},{name:"湖南",value:[{name:"文科",value:62},{name:"理科",value:52}]},{name:"重庆",value:[{name:"文科",value:47},{name:"理科",value:44}]},{name:"四川",value:[{name:"文科",value:65},{name:"理科",value:60}]},{name:"贵州",value:[{name:"文科",value:32},{name:"理科",value:30}]},{name:"云南",value:[{name:"文科",value:42},{name:"理科",value:41}]},{name:"西藏",value:[{name:"文科",value:5},{name:"理科",value:4}]},{name:"陕西",value:[{name:"文科",value:38},{name:"理科",value:42}]},{name:"甘肃",value:[{name:"文科",value:28},{name:"理科",value:28}]},{name:"青海",value:[{name:"文科",value:5},{name:"理科",value:5}]},{name:"宁夏",value:[{name:"文科",value:10},{name:"理科",value:8}]},{name:"新疆",value:[{name:"文科",value:36},{name:"理科",value:31}]},{name:"广东",value:[{name:"文科",value:63},{name:"理科",value:60}]},{name:"广西",value:[{name:"文科",value:29},{name:"理科",value:30}]},{name:"海南",value:[{name:"文科",value:8},{name:"理科",value:6}]}];/*获取地图数据*/let myChart =this.$echarts.init(document.getElementById("map"));// myChart.showLoading();var mapFeatures =this.$echarts.getMap(mapName).geoJson.features;// myChart.hideLoading();
      mapFeatures.forEach(function(v){// 地区名称var name = v.properties.name;// 地区经纬度
        geoCoordMap[name]= v.properties.cp;});// console.log(data);// console.log(toolTipData);var max =480,min =9;// todovar maxSize4Pin =100,minSize4Pin =20;varconvertData=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)});}}return res;};var option ={tooltip:{trigger:"item",formatter:function(params){if(typeof params.value[2]=="undefined"){var toolTiphtml ="";for(var i =0; i < toolTipData.length; i++){if(params.name == toolTipData[i].name){
                  toolTiphtml += toolTipData[i].name +":<br>";for(var j =0; j < toolTipData[i].value.length; j++){
                    toolTiphtml +=
                      toolTipData[i].value[j].name +":"+
                      toolTipData[i].value[j].value +"<br>";}}}// console.log(toolTiphtml);
              console.log(convertData(data))return toolTiphtml;}else{var toolTiphtml ="";for(var i =0; i < toolTipData.length; i++){if(params.name == toolTipData[i].name){
                  toolTiphtml += toolTipData[i].name +":<br>";for(var j =0; j < toolTipData[i].value.length; j++){
                    toolTiphtml +=
                      toolTipData[i].value[j].name +":"+
                      toolTipData[i].value[j].value +"<br>";}}}
              console.log(toolTiphtml);// console.log(convertData(data))return toolTiphtml;}}},//这个属性控制地图的多彩板块visualMap:{show:true,min:0,max:200,left:400,bottom:200,text:["高","低"],// 文本，默认为数值文本calculable:true,seriesIndex:[1],inRange:{// color: ['#3B5077', '#031525'] // 蓝黑// color: ['#ffc0cb', '#800080'] // 红紫// color: ['#3C3B3F', '#605C3C'] // 黑绿// color: ['#0f0c29', '#302b63', '#24243e'] // 黑紫黑// color: ['#23074d', '#cc5333'] // 紫红color:["#00467F","#A5CC82"]// 蓝绿// color: ['#1488CC', '#2B32B2'] // 浅蓝// color: ['#00467F', '#A5CC82'] // 蓝绿// color: ['#00467F', '#A5CC82'] // 蓝绿// color: ['#00467F', '#A5CC82'] // 蓝绿// color: ['#00467F', '#A5CC82'] // 蓝绿}},geo:{show:true,map: mapName,label:{normal:{show:false},emphasis:{show:false}},roam:true,itemStyle:{normal:{areaColor:"#031525",borderColor:"#3B5077"},emphasis:{areaColor:"#2B91B7"}}},series:[//1）全省的散点{name:"散点",type:"scatter",coordinateSystem:"geo",data:convertData(data),symbolSize:function(val){return val[2]/10;},label:{normal:{formatter:"{b}",position:"right",show:true},emphasis:{show:true}},itemStyle:{normal:{color:"#05C3F9"}}},// 2）为了与visualMap配对，必须要加上{type:"map",map: mapName,geoIndex:0,aspectScale:0.75,//长宽比showLegendSymbol:false,// 存在legend时显示label:{normal:{show:true},emphasis:{show:false,textStyle:{color:"#fff"}}},roam:true,itemStyle:{normal:{areaColor:"#031525",borderColor:"#3B5077"},emphasis:{areaColor:"#2B91B7"}},animation:false,data: data
          },//3）气泡{name:"点",type:"scatter",coordinateSystem:"geo",symbol:"pin",//气泡symbolSize:function(val){var a =(maxSize4Pin - minSize4Pin)/(max - min);var b = minSize4Pin - a * min;
              b = maxSize4Pin - a * max;return a * val[2]+ b;},label:{normal:{show:true,textStyle:{color:"#fff",fontSize:9}}},itemStyle:{normal:{color:"#F62157"//标志颜色}},zlevel:6,data:convertData(data)},//4.前五个有效果的光圈{name:"Top 5",type:"effectScatter",coordinateSystem:"geo",data:convertData(
              data
                .sort(function(a, b){return b.value - a.value;}).slice(0,5)),symbolSize:function(val){return val[2]/10;},showEffectOn:"render",rippleEffect:{brushType:"stroke"},hoverAnimation:true,label:{normal:{formatter:"{b}",position:"right",show:true}},itemStyle:{normal:{color:"yellow",shadowBlur:10,shadowColor:"yellow"}},zlevel:1}]};
      myChart.setOption(option);});}};</script>

第四种效果：下钻

下钻后：

遇到的比较难解决的问题：
从全国地图下钻到安徽省的地图，安徽省的地图会小很多，修改了数据和json包发现都不行，但别人的echarts安徽省的图可以，就是很奇怪，找不到原因。解决的办法就是不同的地图设置不用的中心点和缩放比例。

<template><div class="echartsMapAllDemo"><!-- style的宽高一定要写，不写也不会展示echarts图 --><div id="myEcharts" ref="myEcharts" style="width:1000px;height:800px;border:3px solid gold"></div></div></template><script>import chinaJson from"../../assets/china.json";import anhui from'../../assets/province/anhui.json'importAQfrom'../../assets/province/AQ.json'exportdefault{data(){return{//全国的数据和地理坐标chinaData:[{name:"北京",value:177},{name:"天津",value:42},{name:"河北",value:102},{name:"山西",value:81},{name:"内蒙古",value:47},{name:"辽宁",value:67},{name:"吉林",value:82},{name:"黑龙江",value:66},{name:"上海",value:24},{name:"江苏",value:92},{name:"浙江",value:114},{name:"安徽",value:109},{name:"福建",value:116},{name:"江西",value:91},{name:"山东",value:119},{name:"河南",value:137},{name:"湖北",value:116},{name:"湖南",value:114},{name:"重庆",value:91},{name:"四川",value:125},{name:"贵州",value:62},{name:"云南",value:83},{name:"西藏",value:9},{name:"陕西",value:80},{name:"甘肃",value:56},{name:"青海",value:10},{name:"宁夏",value:18},{name:"新疆",value:67},{name:"广东",value:123},{name:"广西",value:59},{name:"海南",value:14}],chinaGeoCoordMap:{上海:[121.472644,31.231706],云南:[102.712251,25.040609],内蒙古:[111.670801,40.818311],北京:[116.405285,39.904989],台湾:[121.509062,25.044332],吉林:[125.3245,43.886841],四川:[104.065735,30.659462],天津:[117.190182,39.125596],宁夏:[106.278179,38.46637],安徽:[117.283042,31.86119],山东:[117.000923,36.675807],山西:[112.549248,37.857014],广东:[113.280637,23.125178],广西:[108.320004,22.82402],新疆:[87.617733,43.792818],江苏:[118.767413,32.041544],江西:[115.892151,28.676493],河北:[114.502461,38.045474],河南:[113.665412,34.757975],浙江:[120.153576,30.287459],海南:[110.33119,20.031971],湖北:[114.298572,30.584355],湖南:[112.982279,28.19409],澳门:[113.54909,22.198951],甘肃:[103.823557,36.058039],福建:[119.306239,26.075302],西藏:[91.132212,29.660361],贵州:[106.713478,26.578343],辽宁:[123.429096,41.796767],重庆:[106.504962,29.533155],陕西:[108.948024,34.263161],青海:[101.778916,36.623178],香港:[114.173355,22.320048],黑龙江:[126.642464,45.756967]},//安徽的数据和地理坐标anhuiData:[{name:'合肥市',value:19},{name:'淮南市',value:14},{name:'芜湖市',value:19},{name:'蚌埠市',value:12},{name:'马鞍山市',value:19},{name:'淮北市',value:15},{name:'铜陵市',value:19},{name:'安庆市',value:14},{name:'黄山市',value:19},{name:'滁州市',value:12},{name:'阜阳市',value:19},{name:'宿州市',value:15},{name:'六安市',value:19},{name:'亳州市',value:14},{name:'宣城市',value:19},],anhuiGeoCoordMap:{合肥市:[117.283042,31.86119],淮南市:[117.018329,32.647574],芜湖市:[118.376451,31.326319],蚌埠市:[117.363228,32.939667],马鞍山市:[118.507906,31.689362],淮北市:[116.794664,33.971707],铜陵市:[117.816576,30.929935],安庆市:[117.043551,30.50883],黄山市:[118.317325,29.709239],滁州市:[118.316264,32.303627],阜阳市:[115.819729,32.896969],宿州市:[116.984084,33.633891],六安市:[116.507676,31.752889],亳州市:[115.782939,33.869338],宣城市:[118.757995,30.945667],}}},mounted(){let center =''let zoom =1.2this.chinaEcharts(chinaJson,this.chinaData,this.chinaGeoCoordMap,center,zoom);},methods:{chinaEcharts(json,data,geoCoordMap,center,zoom){this.$echarts.registerMap("china", json);let myChart =this.$echarts.init(this.$refs.myEcharts);varconvertData=(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)});}}// console.log(res)return res;};let option ={backgroundColor:"transparent",title:{text:"全国主要城市空气质量",subtext:"data from PM25.in",sublink:"http://www.pm25.in",left:"center",textStyle:{color:"#fff"}},tooltip:{trigger:"item"},geo:{show:true,map:"china",center: center,label:{normal:{show:true},emphasis:{show:false}},itemStyle:{normal:{areaColor:"#031525",borderColor:"#3B5077"},emphasis:{areaColor:"#2B91B7"}},roam:true,//平移和鼠标缩放zoom: zoom,//倍数放大// 去掉南海诸岛regions:[{name:"南海诸岛",itemStyle:{// 隐藏地图normal:{opacity:0,// 为 0 时不绘制该图形}},label:{show:false// 隐藏文字}}]},//series就是地图上的数据（去掉就没有数据了）series:[//所有的市{name:"pm2.5",type:"effectScatter",coordinateSystem:"geo",data:convertData(data),symbolSize:function(val){return val[2]/10;},//这几个样式一定要加，加上才有那种光圈的效果showEffectOn:"render",rippleEffect:{brushType:"stroke"},hoverAnimation:true,label:{formatter:"{b}",position:"right",show:true},//圆点的样式itemStyle:{color:"#ddb926"},emphasis:{label:{show:true}}}]};
      myChart.setOption(option,true);
      myChart.on("click",(parms)=>{if(parms.name =="安徽"){let center =[117.283042,31.86119]let zoom =3this.chinaEcharts(anhui,this.anhuiData,this.anhuiGeoCoordMap,center,zoom)}elseif(parms.name =="蚌埠市"){chinaEcharts(BB, BBData);}elseif(parms.name =="宿州市"){chinaEcharts(SZ, SZData);}elseif(parms.name =="淮北市"){chinaEcharts(HB, HBData);}elseif(parms.name =="亳州市"){chinaEcharts(HZ, HZData);}elseif(parms.name =="淮南市"){chinaEcharts(HN, HNData);}elseif(parms.name =="阜阳市"){chinaEcharts(FY, FYData);}elseif(parms.name =="六安市"){chinaEcharts(LA, LAData);}elseif(parms.name =="合肥市"){chinaEcharts(HF, HFData);}elseif(parms.name =="滁州市"){chinaEcharts(CZS, CZSData);}elseif(parms.name =="安庆市"){chinaEcharts(AQ, AQData);}elseif(parms.name =="池州市"){chinaEcharts(CZ, CZData);}elseif(parms.name =="铜陵市"){chinaEcharts(TL, TLData);}elseif(parms.name =="芜湖市"){chinaEcharts(WF, WFData);}elseif(parms.name =="马鞍山市"){chinaEcharts(MAS, MASData);}elseif(parms.name =="黄山市"){chinaEcharts(HS, HSData);}elseif(parms.name =="宣城市"){chinaEcharts(XC, XCData);}else{chinaEcharts(AHS, AHSData);}});
      window.addEventListener("resize",function(){
        myChart.resize();});}}};</script><style lang="less">.echartsMapAllDemo {}</style>

第五中效果：通过安装 province-city-china/data 动态获取全国全省，各市，各区的编号

页面效果其实很普通，不是说多惊艳，炫酷，只是这个引入全国，全省，全市json的方法很好，值得收藏。

安装 province-city-china 依赖。
npm i province-city-china -S
const { province, city } = require(‘province-city-china/data’);

同时在assets中引入文件，这样就可以动态的引入，自动区别哪个json的内容

<template><div><div id="tool"><span @click="goBackChina">{{firstTitle}}</span><span @click="goBackProvince">{{currentProvince.name}}</span><span @click="goBackCity">{{currentCity.name}}</span></div><div id="chinaMap"></div></div></template><script>import*as echarts from'echarts';//  安装 province-city-china 依赖。 //  npm i province-city-china -Sconst{ province, city }=require('province-city-china/data');exportdefault{name:'ChinaMain',data(){return{firstTitle:'中国',myChart:'',currentClick:'',currentProvince:{},currentCity:{},cityState:false,provinceState:false}},mounted(){this.initEcharts("china","中国");},methods:{goBackChina(){this.initEcharts("china","中国");this.currentProvince.name ='';this.currentCity.name ='';},goBackProvince(){this.initEcharts(this.currentProvince.province,this.currentProvince.name,"1");this.currentCity.name ='';},goBackCity(){this.initEcharts(this.currentCity.code,this.currentCity.name);},initEcharts(pName, Chinese_, state ="0"){this.myChart = echarts.init(document.getElementById('chinaMap'));let tmpSeriesData =[];if(pName ==="china"){let geoJson =require('../../assets/mapdata/china.json');
        echarts.registerMap(pName, geoJson);}else{if(this.currentClick ==='province'|| state ==="1"){let geoJson =require(`../../assets/mapdata/geometryProvince/${pName}.json`);
          echarts.registerMap(pName, geoJson);}else{let geoJson =require(`../../assets/mapdata/geometryCouties/${pName}.json`);
          echarts.registerMap(pName, geoJson);}}let option ={series:[{name: Chinese_ || pName,type:'map',mapType: pName,roam:false,//是否开启鼠标缩放和平移漫游itemStyle:{//地图区域的多边形 图形样式normal:{//是图形在默认状态下的样式label:{show:true,//是否显示标签textStyle:{color:"#303133",fontSize:'10px'}}},emphasis:{//是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时label:{show:true,textStyle:{fontSize:'14px'}}}},data: tmpSeriesData,//后端数据top:"10%"//组件距离容器的距离}]};this.myChart.setOption(option,true);this.myChart.off("click");if(pName ==="china"){// 全国时，添加click 进入省级this.currentClick ='province'this.myChart.on('click',this.mapClick);}else{this.currentClick ='city'this.myChart.on('click',this.mapClick);}},//地图点击事件mapClick(param){this.provinceState =false;this.cityState =false;if(this.currentClick ==='province'){//遍历取到provincesText 中的下标  去拿到对应的省jsfor(var i =0; i < province.length; i++){if(param.name === province[i].name){this.provinceState =true;this.currentProvince ={...province[i]};this.currentProvince.name =` -->${this.currentProvince.name}`;//显示对应省份的方法this.showProvince(province[i].province, province[i].name);break;}}!this.provinceState ?alert('暂不支持该区域地图展示!'):'';}else{for(var l =0; l < city.length; l++){if(param.name === city[l].name){this.cityState =true;this.currentCity ={...city[l]};this.currentCity.name =` -->${this.currentCity.name}`;//显示对应城市的方法this.showProvince(city[l].code, city[l].name);break;}}!this.cityState ?alert('暂不支持该区域地图展示!'):'';}},showProvince(pName, Chinese_){this.initEcharts(pName, Chinese_);}}}</script><style lang="less">
#tool {height: 30px;
  line-height: 30px;color: deepskyblue;cursor: pointer;// position: absolute;top: 10px;left: 10px;
  z-index:10000;
  font-size: 18px;
  text-align: left;}
#chinaMap {width: 1000px;height: 750px;}</style>