一 效果图

二 代码

样式自己调试

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样式。

 

加油  爱分享

Logo

前往低代码交流专区

更多推荐