echarts 图例checkBox 点击图例,不显示或隐藏一个系列
时间: 2024-05-10 20:18:06 浏览: 66
可以通过监听 `legendselectchanged` 事件来实现点击图例隐藏或显示一个系列。代码示例如下:
```javascript
myChart.on('legendselectchanged', function (params) {
var selected = params.selected;
var seriesIndex = params.seriesIndex; // 被点击图例所属系列的 index
// 如果该系列被选中,则隐藏该系列
if (selected[seriesIndex]) {
myChart.setOption({
series: {
id: seriesIndex,
show: false
}
});
}
// 如果该系列未被选中,则显示该系列
else {
myChart.setOption({
series: {
id: seriesIndex,
show: true
}
});
}
});
```
在上述代码中,`legendselectchanged` 事件被触发时,获取当前所有图例的选中状态(即哪些系列被选中),然后根据被点击图例所属系列的 index 来判断该系列是否被选中。如果该系列被选中,则将该系列的 `show` 属性设置为 `false`,即隐藏该系列;如果该系列未被选中,则将该系列的 `show` 属性设置为 `true`,即显示该系列。最后调用 `setOption` 方法更新图表即可。
阅读全文