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

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

echarts地图点击某区域高亮的问题_第1张图片echarts地图点击某区域高亮的问题_第2张图片

解析:通过查找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
       })
    }
})

 

你可能感兴趣的:(echarts地图点击某区域高亮的问题)