背景:地图点击某个区域高亮。
解析:通过查找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 }) } })