ECharts如何实现图表联动

ECharts 是一个使用 JavaScript 实现的开源可视化库，可以轻松地在网页中创建各种图表。要实现图表联动，可以使用 ECharts 提供的事件监听和配置项设置。以下是实现图表联动的基本步骤：

1. 引入 ECharts 库

在 HTML 文件中引入 ECharts 库，可以通过 CDN 或者下载到本地的方式。

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.2.2/echarts.min.js"></script>

2. 创建图表容器

在 HTML 文件中创建两个或多个用于显示图表的容器。

<div id="chart1" style="width: 600px; height: 400px;"></div>
<div id="chart2" style="width: 600px; height: 400px;"></div>

3. 初始化图表实例

在 JavaScript 中初始化两个图表实例，并分别设置图表的配置项。

var chart1 = echarts.init(document.getElementById('chart1'));
var chart2 = echarts.init(document.getElementById('chart2'));

var option1 = {
    // 图表1的配置项
};

var option2 = {
    // 图表2的配置项
};

chart1.setOption(option1);
chart2.setOption(option2);

4. 设置图表联动

在需要联动的图表配置项中，设置 series 的 selectedMode 为 'single' 或 'multiple'，并使用 tooltip、legendselectchanged 等事件监听器来实现图表间的联动。

例如，当图表1中的某个系列被选中时，图表2中对应的系列也会被选中：

// 图表1的配置项
var option1 = {
    // ...
    series: [
        {
            type: 'pie',
            name: '系列1',
            selectedMode: 'single',
            data: [
                { value: 100, name: 'A' },
                { value: 200, name: 'B' },
                { value: 300, name: 'C' }
            ]
        }
    ]
};

// 图表2的配置项
var option2 = {
    // ...
    series: [
        {
            type: 'pie',
            name: '系列1',
            selectedMode: 'single',
            data: [
                { value: 100, name: 'A' },
                { value: 200, name: 'B' },
                { value: 300, name: 'C' }
            ]
        }
    ]
};

// 监听图表1的 legendselectchanged 事件
chart1.on('legendselectchanged', function (params) {
    var selected = params.selected;
    chart2.dispatchAction({
        type: 'legendToggleSelect',
        name: params.name,
        selected: selected
    });
});

chart1.setOption(option1);
chart2.setOption(option2);

这样，当在图表1中选中或取消选中某个系列时，图表2中对应的系列也会相应地被选中或取消选中，从而实现图表联动。根据需要，也可以为其他事件（如 tooltip）设置类似的监听器来实现更多类型的联动。