vue echarts在中国地图鼠标经过同一指标下的多个省份高亮或凸起

 

一 效果图

二 代码

样式自己调试

itemStyle: { //区域边形样式
            emphasis: {
              color: dataList.forEach(item => {
                return `rgba(158, 51, 98, ${item.value.toFixed(0)})`
              }),
              //borderColor: '#000',
              // shadowOffsetY: 2,
              //shadowOffsetX: 10,
              // shadowColor: 'rgba(0, 0, 0, 1)',
              shadowBlur: 20,
              areaColor: 'rgba(255,255,0, 0.5)',
            },
          },

三个参数我 尝试了一下满足使用就是geoSelect

echarts.on('mousemove', (params) => {
        if (params.data) {
          dataList.forEach(item => {
            if (item.area === params.data.area) {
              echarts.dispatchAction({
                type: 'geoSelect',
                name: item.name,
              })
            }
          })
        }
      })
      echarts.on('mouseout', () => {
        dataList.forEach(item => {
          echarts.dispatchAction({
            type: 'geoUnSelect',
            name: item.name,
          })
        })
      })

总的来说来说如果平面地图上做多个省份的效果凸起还是很难看的，建议用平面

为什么不用数组形式，因为我试了一下传入数组进去没得反应，所以用循环的方式加入，但是这种方法会有卡顿延迟，我个人倾向图4样式。

 

加油  爱分享