效果图：如下
注意事项：
1.使用echarts最好看官方文档，官方文档（链接如下）
/examples/zh/index.html#chart-type-map/examples/zh/index.html#chart-type-map
很多例子可以参考，我参考的是美国人口统计
2.文档中很多属性和api 如果不清楚的话可以先百度找到你要的属性在去看官方文档
3.使用echarts记得注意版本，我使用的是v5.1.1版本，我之前使用v5.1.2 就运行不了，说type undefined，哪位大佬知道为啥不
代码如下：
1.<template>:
<template><div class="recruit"><div class="map"><div id="main" style="width: 900px; height: 880px" /></div></div></template>
2.<script>: 我把公用的提取到vue的data（）中，方便维护
2.1 引用json和js （地图json 百度一下有很多）
<script>import * as echarts from "echarts";import china from "@/json/js/china.json";export default {
2.2 data（），chinaData是你想要省份，geoCoordMap是省份的经纬坐标，option 是echarts地图的属性和设置，可以根据自己的需要看着官方文档来设置
自定义图标和切换图标在symbol 这个属性中，可以写成函数，如果是其他格式的图片可以查看官方文档，图片推荐放在public 文件夹中，上传服务器不会产生找不到图片问题。
我是根据ChinaData中的value 来判断图标是1.svg还是3.svg，切换只需要通过echarts的鼠标事件就可以切换value中的值，如果想测试的话，找两张svg的图应该是可以实现，记得修改图片路径为你们自己的
data() {return {chinaData: [{ name: "台湾", value: ["0"] },{ name: "河北", value: ["0"] },{ name: "山西", value: ["0"] },{ name: "内蒙古", value: ["0"] },{ name: "辽宁", value: ["0"] },{ name: "吉林", value: ["0"] },{ name: "黑龙江", value: ["0"] },{ name: "江苏", value: ["0"] },{ name: "浙江", value: ["0"] },{ name: "安徽", value: ["0"] },{ name: "福建", value: ["0"] },{ name: "江西", value: ["0"] },{ name: "山东", value: ["0"] },{ name: "河南", value: ["0"] },{ name: "湖北", value: ["0"] },{ name: "湖南", value: ["0"] },{ name: "广东", value: ["1"] },{ name: "海南", value: ["0"] },{ name: "四川", value: ["0"] },{ name: "贵州", value: ["0"] },{ name: "云南", value: ["0"] },{ name: "西藏", value: ["0"] },{ name: "陕西", value: ["0"] },{ name: "甘肃", value: ["0"] },{ name: "青海", value: ["0"] },{ name: "宁夏", value: ["0"] },{ name: "新疆", value: ["0"] },{ name: "北京", value: ["0"] },{ name: "天津", value: ["0"] },{ name: "上海", value: ["0"] },{ name: "重庆", value: ["0"] },{ name: "广西", value: ["0"] },{ name: "香港", value: ["0"] },{ name: "澳门", value: ["0"] },],geoCoordMap: {甘肃: [104.3585193204, 34.40123159456249],青海: [98.77753991113792, 36.53004669909589],广西: [108.99655439706783, 24.235673935703687],贵州: [107.25837527859625, 28.005908922458815],重庆: [108.09396202962392, 30.737597968171656],北京: [115.95679568867022, 40.75702627244448],福建: [117.7802840500002, 26.617417710000097],安徽: [117.02978356256133, 33.13288035704295],广东: [113.08982181100027, 24.09589264500019],西藏: [88.67781334810746, 30.081958115774455],新疆: [85.36633990098284, 42.722922619141826],海南: [109.68506920700003, 19.75330638200004],宁夏: [106.15764611237813, 37.05293528913229],陕西: [108.5100452531, 35.88519318281914],山西: [111.72104861939818, 36.35586904611952],湖北: [111.37402265791923, 31.41753998538],湖南: [110.902381220417, 28.066339830418826],四川: [102.4985530948494, 31.67739736629541],云南: [100.29696333219198, 25.721744899807277],河北: [114.54873628100008, 38.34465116700004],河南: [114.06032230023388, 33.15787079530108],辽宁: [121.85254967500032, 41.98240794500012],山东: [119.28029535679576, 36.576608741968954],天津: [118.75956331411487, 39.81855181203543],江西: [115.17473025869447, 27.007869370774904],江苏: [120.34094130672383, 34.49093327643905],上海: [121.14094130672383, 31.42093327643905],浙江: [119.58535242000021, 29.90194563100012],吉林: [123.25284846284336, 45.56916859112878],内蒙古: [108.41327478505161, 40.317334824121446],黑龙江: [127.05284846284336, 47.56916859112878],台湾: [120.63599694100014, 23.222805080000114],香港: [114.0517684250002, 22.32851797100014],澳门: [111.95860436300031, 21.8],},option: {// 地理坐标组件geo: {map: "china",roam: false, // 是否支持滚轮缩放left: "0%",top: "0%",label: {show: true,position: "left",},itemStyle: {normal: {// 未选中状态color: "#d8e5f0",shadowColor: "#d4dfe9",borderColor: "#ffffff",borderWidth: 1,shadowBlur: 1,// shadowOffsetX: -5,// shadowOffsetY: 10,},emphasis: {// 选中样式color: "rgba(0,0,0,0.7)", // 地图颜色borderColor: "rgba(0, 0, 0, 0.7)", // 边框颜色},},},animation: false,series: [{type: "scatter",roam: false,zoom: 1,coordinateSystem: "geo",data: null,symbol: function (params) {if (params[2] === "0") {return "image://" + process.env.BASE_URL + "map/1.svg";} else if (params[2] === "1") {return "image://" + process.env.BASE_URL + "map/3.svg";}}, // svg图标z: 2,symbolSize: [48.63, 40], // symbols图标大小},// 地图类型{type: "map",map: "china",left: "0%",top: "0%",zoom: 1,geoIndex: 1,aspectScale: 0.75, // 长宽比roam: false,z: 0,itemStyle: {normal: {color: "#000000",areaColor: "#d9e6f0",borderColor: "#ffffff",borderWidth: 0.7,},emphasis: {// 选中样式areaColor: "#d9e6f0", // 地图背景颜色},},// 选中状态select: {itemStyle: {color: "#d9e6f0",borderColor: "#ffffff",},},label: {show: true,position: "right",},},// 浮点图类型{type: "scatter",roam: false,zoom: 1,coordinateSystem: "geo",data: null,symbol: "image://" + process.env.BASE_URL + "map/2.svg",emphasis: {scale: false,},z: 1,symbolSize: [100, 50], // symbols图标大小},],},};},
2.3 created() 我们要给option.series[0].data 赋值，如果你把值写在series[0].data中可以忽略
created() {this.option.series[0].data = this.convertData(this.chinaData);console.log(this.option.series[0].data)},mounted() {this.echart();},
2.4 methods: 函数
记得注意this指针会变化，因为我们使用的是function来构建函数，你们也可以换成箭头函数就不会有这方面问题，大家记得注意，convertData（）函数是把this.chinaData 和this.geoCoordMap 合并数组
var _this = this;给this 赋值
事件api 可以参考官方文档的api ，超级详细，如果不知道自己要的属性是什么可以，console.log打印出来就可以看到了，对这自己的需求自行调整
methods: {// 地图echart() {var chartDom = document.getElementById("main");var myChart = echarts.init(chartDom);this.myChart = myChart;// myChart.setOption(mapOption)var _this = this;var option = this.option;myChart.showLoading();myChart.hideLoading();// 图表点击事件myChart.on("click", function (event) {_this.chinavalue = _this.value = event.name;console.log(event)if (ponentSubType === "scatter") {option.series[0].data = _this.convertData(_this.changeitems(event.name));myChart.setOption(_this.option);}});//图表悬停事件myChart.on("mouseover", function (event) {// _this.value = event.nameif (ponentSubType === "map" ||ponentType === "series") {option.series[0].data = _this.convertData(_this.changemoveitems(event.name));myChart.setOption(_this.option);}});//图表离开事件myChart.on("mouseout", function (event) {if (ponentType === "series") {option.series[0].data = _this.convertData(_this.changeoutitems(event.name));myChart.setOption(_this.option);}});usa(china);function usa(usaJson) {myChart.hideLoading();echarts.registerMap("china", usaJson, {南海诸岛: {left: 115,top: 15,width: 6,},});option && myChart.setOption(option);}},// 点击修改图标changeitems(index) {this.chinavalue = index;this.chinaData.forEach((item) => {const name = item.name;if (name === index) {item.value[0] = "1";} else {item.value[0] = "0";}});return this.chinaData;},// 鼠标移动上修改图标changemoveitems(index) {this.chinaData.forEach((item) => {const name = item.name;if (name === index || name === this.chinavalue) {item.value[0] = "1";} else {item.value[0] = "0";}});return this.chinaData;},// 鼠标移走恢复图标changeoutitems() {this.chinaData.forEach((item) => {const name = item.name;if (name === this.chinavalue) {item.value[0] = "1";} else {item.value[0] = "0";}});return this.chinaData;},convertData(data) {var res = [];for (var i = 0; i < data.length; i++) {var geoCoord = this.geoCoordMap[data[i].name];if (geoCoord) {res.push({name: data[i].name,value: geoCoord.concat(data[i].value),});}}return res;},},
