效果图：如下

注意事项：

1.使用echarts最好看官方文档，官方文档（链接如下）

https://echarts.apache.org/examples/zh/index.html#chart-type-maphttps://echarts.apache.org/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.35851932200904, 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.51004520082531, 35.88519318281914],山西: [111.72104861939818, 36.35586904611952],湖北: [111.37402265791923, 31.417539985382007],湖南: [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 (event.componentSubType === "scatter") {option.series[0].data = _this.convertData(_this.changeitems(event.name));myChart.setOption(_this.option);}});//图表悬停事件myChart.on("mouseover", function (event) {// _this.value = event.nameif (event.componentSubType === "map" ||event.componentType === "series") {option.series[0].data = _this.convertData(_this.changemoveitems(event.name));myChart.setOption(_this.option);}});//图表离开事件myChart.on("mouseout", function (event) {if (event.componentType === "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;},},

以上就是vue 中使用echarts修改图标的方法，我使用的是通过改变chinaData中的value来改变图标，大家一开始如果比较懵，可以根据步骤，看着官方文档一步一步来，echarts官方文档写的超级详细，属性在配置项，事件在api 中。

在官方那个例子里面，我们点击完整代码可以看到js 完整的代码

Vue 使用echarts 地图自定义图标和修改图标样式，点击切换图标相关推荐

vue使用Echarts地图展示并标注坐标点、点击进入省市子区域地图
1.安装echarts依赖 npm install echarts --save 2.main.js中引入echarts import echarts from 'echarts';//引入echar ...
Echarts地图自定义图标Symbol同时动态更改图标进行切换显示
Echarts地图自定义图标Symbol同时动态更改图标进行切换显示文章目录 0.前言 1.引用模块 2.界面设计 3.数据准备 4.实例地图 5.动态修改气泡图标 6.结束语 0.前言实现的效果 ...
更换百度地图图标html,百度地图接口，自定义图标，点击切换图标
这里实现了一个指定地区的地图,自定义图标,点击切换图标 1.[代码][JavaScript]代码 body, html,#allmap {width: 100%;height: 100%;overfl ...
Vue使用echarts地图进阶2（实现多级下钻功能）
echarts地图实现多级下钻功能点击下钻效果图: 先来小看一下,多级下钻和单次下钻跳转json文件的区别: 1.如果要实现多级下钻并且展示子区域的话,下钻点击事件请求的JSON必须是该点击区域的全 ...
vue收藏/取消收藏，点赞、取消点赞一个道理，切换图标
vue收藏/取消收藏,点赞.取消点赞一个道理,切换图标 <div class="zixun" @click="getFoodFindFoodDetails()&qu ...
echarts 地图自定义图标_DMKB08：Echarts 分段设色
为了丰富DataMap的可视化效果,集成了百度的Echarts 本文讲解Echarts分段设色. 关于Echarts可以浏览官网: Apache ECharts (incubating)echart ...
vue 使用echarts地图实现全国地图
代码参考来自 <https://www.cnblogs.com/lude1994/p/12482355.html> json数据自己收集保存,包含世界坐标.全国坐标及各省份内的坐标附代码 ...
【echarts】vue引用 echarts 地图
1.在vue项目中安装echarts npm i echarts -S 或 cnpm i echarts -S 2.在用到echarts地图的vue单页面中引入: import echarts fro ...
vue 使用高德地图给海量点标记，并点击标记弹出信息窗口，信息窗口绑定点击事件
目录一.需求二.引入高德地图 2.1.将高德地图引入到项目中 2.2.查看官网快速上手,熟悉高德地图的主要API 2.3.海量点标注要用到的API文档 2.4.全部代码其他: 一.需求因为不知 ...

Vue 使用echarts 地图自定义图标和修改图标样式，点击切换图标