echarts地图区域高亮时，所在区域的symbol切换图片，类似跟着区域高亮

首先看scatter散点图的数据：

data: [
  {
    name: '广东',
    value: [113.280637, 23.125178, 2, 0]
  },
  {
    name: '北京',
    value: [116.405285, 39.904989, 2, 0]
  }
]
1
2
3
4
5
6
7
8
9
10

上面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')
  }
},
1
2
3
4
5
6
7

当把鼠标放到地图的区域时，地图会高亮，同时可以在鼠标移入事件中拿到高亮区域的名称，从而可以从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)
});
1
2
3
4
5
6
7
8
9
10

鼠标移出后再把值设置为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;
});
1
2
3
4
5
6
7
8
9
10

以上基本可以实现地图区域高亮，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
  });

});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

完整代码如下：

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164

效果图如下：