echarts地图点击某区域高亮的问题

最新推荐文章于 2024-08-23 18:00:43 发布

谭鱼鱼儿

最新推荐文章于 2024-08-23 18:00:43 发布

阅读量1.2w

点赞数 3

本文链接：https://blog.csdn.net/sinat_34626741/article/details/107087489

版权

背景：地图点击某个区域高亮。

解析：通过查找api，我找到一种既可以实现点击高亮，又可以不更改其他区域的值的方法。

获取到数据后，手动给数据添加itemstyle属性设置正常颜色和强调颜色，点击时，通过点击的地市名匹配数据，将其itemstyle设置成高亮颜色，其他地市设置为浅色。这样既不更改原数据，也能实现高亮的功能。

代码如下：

mapData.forEach(item=>{
   item.itemStyle= { normal: { areaColor:'#AADDFF'}, emphasis: { areaColor: '#c5e6fd'}};
})
option = {
  series: [
    {
       zoom: 1.25,
       aspectScale: 1,
       name: '贵州地图',
       type: 'map',
       mapType: '贵州', // 自定义扩展图表类型
       itemStyle: {
           normal: {
              label: {
                 show: true,
                 color: '#000',
              },
              borderColor: '#fff',
            },
            emphasis: {
             label: {
                show: true,
                color: '#333',
              }
            }
       },
       data: mapData||[],
      }
   ]
 };
this.chartMap.setOption(option);
//地图点击事件---高亮
this.chartMap.on('click',param=>{
   if(param.data){
      mapData.forEach(item=>{
         item.itemStyle= { normal: {areaColor:item.name==param.data.name?'#AADDFF':'#d2e9f9'}, 
            emphasis: { areaColor: '#c5e6fd'}};
            //重新setoption
       })
    }
})