echarts实现两个柱状图的联动
时间: 2023-11-24 16:51:08 浏览: 33
以下是使用echarts实现两个柱状图联动的方法:
1. 首先,需要在HTML文件中创建两个div,分别用于显示两个柱状图,例如:
```html
<div id="chart1" style="width: 600px;height:400px;"></div>
<div id="chart2" style="width: 600px;height:400px;"></div>
```
2. 在JavaScript文件中,需要使用echarts.init()方法初始化两个柱状图实例,并设置各自的option选项,例如:
```javascript
let chart1 = echarts.init(document.getElementById('chart1'));
let chart2 = echarts.init(document.getElementById('chart2'));
let option1 = {
// 第一个柱状图的option选项
// ...
};
let option2 = {
// 第二个柱状图的option选项
// ...
};
chart1.setOption(option1);
chart2.setOption(option2);
```
3. 接下来,需要使用echarts.connect()方法将两个柱状图实例连接起来,例如:
```javascript
echarts.connect([chart1, chart2]);
```
4. 最后,需要在柱状图的点击事件中,获取到当前点击的数据,并使用echarts.dispatchAction()方法触发另一个柱状图的对应数据的高亮显示,例如:
```javascript
chart1.on('click', function(params) {
// 获取当前点击的数据
let dataIndex = params.dataIndex;
// 触发chart2对应数据的高亮显示
chart2.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: dataIndex
});
});
chart2.on('click', function(params) {
// 获取当前点击的数据
let dataIndex = params.dataIndex;
// 触发chart1对应数据的高亮显示
chart1.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: dataIndex
});
});
```