echarts 地图的图例点击时关闭该点
时间: 2023-07-11 15:22:20 浏览: 186
Echarts 地图的图例点击时关闭该点,可以通过以下的步骤实现:
1. 在地图的 `series` 中,设置 `selectedMode: 'single'`,表示只能选择一个区域。
2. 在地图的 `series` 中,设置 `selected` 属性,用来记录每个区域是否被选中。
3. 在地图的 `legend` 中,设置 `selectedMode: 'single'`,表示只能选择一个图例。
4. 在地图的 `legend` 中,监听 `selectchanged` 事件,获取到用户选中的图例名称,再通过 `setSelected` 方法,将对应的区域的 `selected` 属性设置为 `false`。
以下是示例代码:
```javascript
// 设置地图的 series
option.series = [{
type: 'map',
map: 'world',
selectedMode: 'single', // 只能选择一个区域
selected: { // 记录每个区域是否被选中
'China': true,
'USA': true,
'Russia': true
},
// 省略其他配置
}];
// 设置地图的 legend
option.legend = {
data: ['China', 'USA', 'Russia'],
selectedMode: 'single', // 只能选择一个图例
// 监听 selectchanged 事件
selectchanged: function(params) {
var name = params.name;
var seriesIndex = params.seriesIndex;
var selected = params.selected;
// 将对应的区域的 selected 属性设置为 false
option.series[seriesIndex].selected[name] = false;
myChart.setOption(option);
}
};
```
在这个示例中,我们设置了地图的 `series` 中的 `selectedMode` 属性为 `'single'`,并在 `selected` 属性中记录每个区域是否被选中。然后,在地图的 `legend` 中设置了 `selectedMode` 属性为 `'single'`,并监听了 `selectchanged` 事件,在事件处理函数中获取到用户选中的图例名称,再将对应的区域的 `selected` 属性设置为 `false`,最后通过 `setOption` 方法更新地图的配置。
阅读全文