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

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

<template><div class="echartsMapAllDemo"><!-- style的宽高一定要写，不写也不会展示echarts图 --><div id="myEcharts" ref="myEcharts" style="width:100vw;height:100vh;border:3px solid gold"></div></div>
</template>
<script>
import chinaJson from "../../assets/china.json";
export default {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] },...}]格式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)});}}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>
<style lang="less">
.echartsMapAllDemo {}
</style>

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

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

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

<template><div class="echartsMapAllDemo"><!-- style的宽高一定要写，不写也不会展示echarts图 --><div id="myEcharts" ref="myEcharts" style="width:100vw;height:100vh;border:3px solid gold"></div></div>
</template>
<script>
import chinaJson from "../../assets/china.json";
export default {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]};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)});}}// 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>
<style lang="less">
.echartsMapAllDemo {}
</style>

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

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

 <template><div><div id="map" style="width:100vw;height:100vh;" ref="map"></div></div></template><script>
import chinaJson from "../../assets/china.json";
export default {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;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)});}}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'
import AQ from '../../assets/province/AQ.json'
export default {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);var convertData = (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)}else if (parms.name == "蚌埠市") {chinaEcharts(BB, BBData);} else if (parms.name == "宿州市") {chinaEcharts(SZ, SZData);} else if (parms.name == "淮北市") {chinaEcharts(HB, HBData);} else if (parms.name == "亳州市") {chinaEcharts(HZ, HZData);} else if (parms.name == "淮南市") {chinaEcharts(HN, HNData);} else if (parms.name == "阜阳市") {chinaEcharts(FY, FYData);} else if (parms.name == "六安市") {chinaEcharts(LA, LAData);} else if (parms.name == "合肥市") {chinaEcharts(HF, HFData);} else if (parms.name == "滁州市") {chinaEcharts(CZS, CZSData);} else if (parms.name == "安庆市") {chinaEcharts(AQ, AQData);} else if (parms.name == "池州市") {chinaEcharts(CZ, CZData);} else if (parms.name == "铜陵市") {chinaEcharts(TL, TLData);} else if (parms.name == "芜湖市") {chinaEcharts(WF, WFData);} else if (parms.name == "马鞍山市") {chinaEcharts(MAS, MASData);} else if (parms.name == "黄山市") {chinaEcharts(HS, HSData);} else if (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 -S
const { province, city } = require('province-city-china/data');export default {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>

vue中使用echarts实现中国地图相关推荐

vue中使用ECharts实现中国地图配置详解（配官方配置地址）
前言: 1.实现自定义左下角的视觉映射组件(包括自定义颜色.文字.图元大小) 2.实现自定义悬浮提示框如下图所示: 实现步骤: 一.在vue中安装echarts 1.npm install echa ...
vue中使用echarts绘制中国地图
首先需要一个绘制中国地图的json文件(资源还在审核,审核过后会重新贴上来) 1.首先引入echarts和json文件,在需要的地方引即可 import echarts from 'echarts'; ...
vue中使用ECharts引入中国地图
坑我来踩代码你们看 china.js 提取码:iwn9 百度网盘请输入提取码 <template><div class="echarsMap">< ...
vue项目使用ECharts的中国地图，设置地图不同板块的颜色以及动态显示效果
本篇讲述在vue中使用echarts的中国地图,以及对不同板块进行渐变色的设置. 效果图如下: 实现上图效果步骤如下: 确保项目中下载了echarts,然后在main.js中引用echarts imp ...
Vue中使用echart实现中国地图统计图
Vue中使用echart实现中国地图统计图前言 Echart版本的确定全局导入或按需导入在对应的页面调用echart 前后端数据交互注意事项前言在Vue2.x开发中,为了更好地展示某一个时间 ...
vue中使用echarts和百度地图实现飞机迁徙图
在vue-cli生成的项目中使用echarts和百度地图api实现飞机迁徙图,当然也可以实现其他效果. 1. 准备项目安装echarts 在已经生成的vue项目根目录npm install echa ...
基于VUE+TS中引用ECharts的中国地图和世界地图密度表
(第一次写掘金,嗯也不知道写啥好.想了想,先来一份简单可口的老菜谱.虽然以前在其他平台也上过,换个地方说不准口味刚好呢哈哈哈哈-) 首先先附上官网 http://echarts.baidu.com/o ...
vue中使用echarts结合百度地图制作地图（引入百度地图、获取百度地图实例、设置百度地图）
1.初始化echarts以及例子可以看管网的地址:https://echarts.apache.org/examples/zh/editor.html?c=map-polygon 2说下我遇到的问题 ...
vue中使用Echarts渲染四川地图
第一步:先创建vue项目(此处省略,详细步骤自行查找资料) 第二步:新建终端,下载echarts相关包: 在终端执行: npm install echarts --save 第三步:下载需要的地图js ...
在html中使用Echarts制作中国地图
这里写目录标题制作一共三步一.下载echarts.min.js和china.js文件 1.1在官网下载echarts.min.js 1.2下载china.js(建议直接复制目前2022-2-15 ...

vue中使用echarts实现中国地图