echarts地图中以高亮的区域二次选中不能取消高亮,只能点击其他区域取消当前高亮区域
时间: 2023-08-11 20:11:19 浏览: 217
是的,这是因为在 ECharts 中,区域高亮是通过设置一个样式来实现的,而取消高亮则需要将该样式移除。如果当前区域已经被选中,那么该样式已经被添加到该区域上,需要手动将该样式移除才能取消高亮。
可以通过监听地图的点击事件,在点击高亮区域时将该区域的样式移除,从而取消高亮状态。具体实现可以参考以下代码:
```javascript
myChart.on('click', function (params) {
// 判断是否点击了高亮区域
if (params.componentType === 'geo' && params.name === highlightedRegion) {
// 移除高亮样式
myChart.dispatchAction({
type: 'downplay',
geoIndex: 0,
name: highlightedRegion
});
highlightedRegion = null;
} else {
// 高亮当前区域
myChart.dispatchAction({
type: 'highlight',
geoIndex: 0,
name: params.name
});
highlightedRegion = params.name;
}
});
```
在上面的示例代码中,`highlightedRegion` 变量用于记录当前高亮的区域名称。当点击已经高亮的区域时,首先移除该区域的高亮样式,然后将 `highlightedRegion` 变量设为 null,表示当前没有高亮的区域。当点击未高亮的区域时,先将该区域高亮,然后将 `highlightedRegion` 变量设为当前区域名称。这样就可以实现在地图中点击高亮区域取消高亮的效果了。
阅读全文