有两个echarts图表,通过点击上面echarts图表的legend.selected属性来控制下面有相同名字的legend,俩个图表的数据都是动态渲染的,怎么实现互相连通
时间: 2024-02-06 17:10:14 浏览: 96
可以通过ECharts提供的事件机制来实现互相连通。具体实现步骤如下:
1. 在上下两个ECharts实例中都注册legendselectchanged事件。
```
chart1.on('legendselectchanged', function (params) {
// 处理图表1的点击事件
});
chart2.on('legendselectchanged', function (params) {
// 处理图表2的点击事件
});
```
2. 在处理图表1的点击事件中,获取当前被选中的legend,并将其对应的series的状态传递给图表2。
```
chart1.on('legendselectchanged', function (params) {
var selected = params.selected;
chart2.dispatchAction({
type: 'legendSelect',
// 传递被选中的legend状态
selected: selected
});
});
```
3. 在处理图表2的点击事件中,获取传递过来的legend状态,并更新对应的series的显示状态。
```
chart2.on('legendselectchanged', function (params) {
var selected = params.selected;
chart2.setOption({
series: [
{
name: 'xxx', // 对应的series名称
selected: selected
}
]
});
});
```
这样,当图表1中的legend被选中时,会触发legendselectchanged事件,在事件处理函数中将选中状态传递给图表2,并触发图表2的legendselectchanged事件,最终更新图表2中对应series的显示状态,实现了两个图表的互相连通。
阅读全文