Echarts如何实现数据联动

ECharts 是一个使用 JavaScript 实现的开源可视化库，它可以帮助你轻松地在网页上创建各种图表。数据联动是指在一个图表中选择或操作数据时，其他相关联的图表也会相应地更新。在 ECharts 中，你可以使用 dispatchAction 方法和 setOption 方法来实现数据联动。

以下是一个简单的示例，展示了如何在两个柱状图之间实现数据联动：

1. 首先，确保你已经在 HTML 页面中引入了 ECharts 库：

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

2. 创建两个用于显示图表的 div 元素：

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

3. 编写 JavaScript 代码来初始化图表并设置数据和配置项：

// 基于准备好的dom，初始化echarts实例
var chart1 = echarts.init(document.getElementById('chart1'));
var chart2 = echarts.init(document.getElementById('chart2'));

// 指定图表的配置项和数据
var option1 = {
    xAxis: {
        type: 'category',
        data: ['A', 'B', 'C', 'D', 'E']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [10, 20, 30, 40, 50],
        type: 'bar'
    }]
};

var option2 = {
    xAxis: {
        type: 'category',
        data: ['A', 'B', 'C', 'D', 'E']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [50, 40, 30, 20, 10],
        type: 'bar'
    }]
};

// 使用刚指定的配置项和数据显示图表。
chart1.setOption(option1);
chart2.setOption(option2);

4. 为第一个图表添加点击事件监听器，当点击某个柱子时，更新第二个图表的数据：

chart1.on('click', function (params) {
    // 获取被点击的柱子的索引
    var dataIndex = params.dataIndex;

    // 更新第二个图表的数据
    var newData = option2.series[0].data.map(function (item, index) {
        return index === dataIndex ? item + 10 : item;
    });

    // 设置第二个图表的新数据
    chart2.setOption({
        series: [{
            data: newData
        }]
    });
});

现在，当你点击第一个图表中的某个柱子时，第二个图表中对应的柱子将会增加 10。这就是一个简单的数据联动示例。你可以根据需要修改数据和配置项，以实现更复杂的数据联动效果。