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

效果图：如下

 

 

注意事项：

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.name
        if (
          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 完整的代码