echarts点击图例对展示对应数据其他影藏
时间: 2024-09-21 17:04:57 浏览: 27
ECharts是一个强大的JavaScript可视化库,它支持通过点击图例来切换图表系列的显示状态。你可以利用`echarts.on('legendSelect', callback)`事件监听图例的选择操作,然后在回调函数中控制系列的`hidden`属性,以此达到隐藏或显示对应数据的目的。
例如,在初始化ECharts实例时,可以设置这样的事件处理:
```javascript
var myChart = echarts.init(document.getElementById('main'));
myChart.on('legendSelect', function (params) {
var selectedSeriesIndex = params.selected;
if (selectedSeriesIndex !== -1) { // 如果选择了某个系列
myChart.setOption({
series: [
...// 列表中将未选中的系列hidden设为true,
...myChart.getOption().series.map((serie, idx) => ({
...serie,
hidden: idx === selectedSeriesIndex ? false : true // 只有选中的系列hidden设为false
})),
]
});
}
});
```
在这个例子中,当用户点击图例时,会遍历所有系列并调整它们的`hidden`属性,只保留选中的系列可见。