[JavaScript知识库]echarts地图区域高亮时，所在区域的symbol切换图片，类似跟着区域高亮

首先看scatter散点图的数据：

data: [
  {
    name: '广东',
    value: [113.280637, 23.125178, 2, 0]
  },
  {
    name: '北京',
    value: [116.405285, 39.904989, 2, 0]
  }
]

上面data中的value可以存放多个值，只要保证前面两个是经纬度的值，就可以显示在相应的位置，这里还多了2和0，2主要是自定义label时要显示的数值，而最后一个0则是用来判断symbol显示的图片（0显示未高亮图片，1显示高亮图片）
下面看看自定义symbol时作的判断（使用回调函数形式就可以做判断了）：

symbol: (params) => {
  if (params[3] == 0) {
    return 'image://' + require('@/assets/border1.png')
  } else if (params[3] == 1) {
    return 'image://' + require('@/assets/border.png')
  }
},

当把鼠标放到地图的区域时，地图会高亮，同时可以在鼠标移入事件中拿到高亮区域的名称，从而可以从scatter的data数据中，找到跟高亮区域相同的名称，就可以拿到对应的value，改变value的最后一个值（由0变成1）,然后再执行setoption则可以重新渲染地图

// 鼠标划入
map.on('mouseover', (params) => {
  let option = map.getOption()
  option.series[0].data.forEach(item => {
    if (item.name == params.name) {
      item.value[3] = 1
    }
  })
  map.setOption(option, true)
});

鼠标移出后再把值设置为0：

// 鼠标移出
map.on('mouseout', (params) => {
  let option = map.getOption()
  option.series[0].data.forEach(item => {
    if (item.name == params.name) {
      item.value[3] = 0
    }
  })
  map.setOption(option, true;
});

以上基本可以实现地图区域高亮，symbol也高亮的效果了；但是这时候会有个bug，就是把鼠标放入地图后，地图不高亮了，那我们可以手动设置高亮，鼠标移出后再清除高亮：

// 鼠标划入
map.on('mouseover', (params) => {
  // 添加地图高亮
  map.dispatchAction({
    type: 'highlight',
    seriesIndex: 1,  // 指定series中的map的索引
    dataIndex: params.dataIndex	// 高亮的区域的索引，可从回调参数params中获取
  });
  map.dispatchAction({
    type: 'showTip',
    seriesIndex: 1,
    dataIndex: params.dataIndex
  });
});

// 鼠标移出
map.on('mouseout', (params) => {
  // 清除地图高亮
  map.dispatchAction({
    type: 'downplay',
    seriesIndex: 1,
    dataIndex: params.dataIndex
  });

});

完整代码如下：

<template>
  <div class="container">
    <div style="width: 100%; height: 900px" id="map"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import axios from 'axios'
export default {
  data() {
    return {
      charts: null,
      mTime: null,
      index: -1,
      mapData: {}
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    initMap(name, data) {
      this.mapData = data
      echarts.registerMap(name, data);
      // 获取图片的dom元素
      let map = echarts.init(document.getElementById('map'));
      this.charts = map
      let option = {
        geo: [
          {
            map: name,
            roam: false,
            show: false,
            label: {
              show: false,
              color: '#ffffff'
            },
            itemStyle: {
              areaColor: '#082332',
              borderColor: '#ffffff',
            },
            zoom: 1
          }
        ],
        series: [
          {
            type: 'scatter',
            geoIndex: 0,
            coordinateSystem: 'geo',
            hoverAnimation: false,
            symbolSize: 70,
            symbol: (params) => {
              if (params[3] == 0) {
                return 'image://' + require('@/assets/border1.png')
              } else if (params[3] == 1) {
                return 'image://' + require('@/assets/border.png')
              }
            },
            symbolOffset: ['-12%', '-50%'],
            // symbol: 'pin',
            silent: true,  // 不触发鼠标悬浮
            label: {
              show: true,
              formatter: (params) => {
                return '{a|项目数}\n{b|' + params.value[2] + '}'
              },
              rich: {
                a: {
                  color: '#ffffff',
                  fontSize: 18
                },
                b: {
                  color: '#07c2d7',
                  fontSize: 18
                }
              },
              color: '#00e5ff',
              offset: [0, -7],
              fontSize: 26
            },
            data: [
              {
                name: '广东',
                value: [113.280637, 23.125178, 2, 0]
              },
              {
                name: '北京',
                value: [116.405285, 39.904989, 2, 0]
              }
            ],
            zlevel: 3
          },
          {
            map: name,
            type: 'map',
            roam: false,
            label: {
              show: false,
              color: '#ffffff'
            },
            itemStyle: {
              areaColor: '#272822',
              borderColor: '#ffffff',
            },
            zoom: 1
          }
        ],
        animation: false
      }
      map.setOption(option)
      map.off('mouseover')  // 防止多次点击
      // 鼠标划入
      map.on('mouseover', (params) => {
        let option = map.getOption()
        option.series[0].data.forEach(item => {
          if (item.name == params.name) {
            item.value[3] = 1
          }
        })
        map.setOption(option, true)
        // 添加地图高亮
        map.dispatchAction({
          type: 'highlight',
          seriesIndex: 1,
          dataIndex: params.dataIndex
        });
        map.dispatchAction({
          type: 'showTip',
          seriesIndex: 1,
          dataIndex: params.dataIndex
        });
      });
      // 鼠标移出
      map.on('mouseout', (params) => {
        let option = map.getOption()
        option.series[0].data.forEach(item => {
          if (item.name == params.name) {
            item.value[3] = 0
          }
        })
        map.setOption(option, true)
  // 清除地图高亮
  map.dispatchAction({
    type: 'downplay',
    seriesIndex: 1,
    dataIndex: params.dataIndex
  });
      });
    },
    mouseEvents() {

    },
    // 获取地图json数据
    getData() {
      axios.get('/json/china.json').then((res) => {
        this.$nextTick(() => {
          this.initMap('china', res.data)
        })
      })
    },
  }
}
</script>

效果图如下：