ECharts如何实现多图表联动

发布时间：2025-02-12 04:46:05 作者：小樊
来源：亿速云阅读：87

ECharts 是一款基于 JavaScript 的开源可视化库，用于创建各种图表。要实现多图表联动，可以使用 ECharts 提供的 setOption 方法设置图表的配置项，并使用 on 方法监听某个图表的事件，然后将事件传递给其他图表以实现联动。以下是一个简单的示例：

首先，在 HTML 文件中创建一个用于存放图表的容器：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts 多图表联动示例</title>
    <!-- 引入 ECharts 文件 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.2.2/echarts.min.js"></script>
</head>
<body>
    <!-- 创建图表容器 -->
    <div id="chart1" style="width: 600px;height:400px;"></div>
    <div id="chart2" style="width: 600px;height:400px;"></div>
    <script src="main.js"></script>
</body>
</html>

接下来，在 main.js 文件中初始化两个图表，并设置它们的配置项：

// 基于准备好的容器（这里的容器是上面创建的 div），初始化 echarts 实例
const chart1 = echarts.init(document.getElementById('chart1'));
const chart2 = echarts.init(document.getElementById('chart2'));

// 设置图表1的配置项
const option1 = {
    xAxis: {
        type: 'category',
        data: ['A', 'B', 'C', 'D', 'E', 'F']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [120, 200, 150, 80, 70, 110],
        type: 'bar'
    }]
};

// 设置图表2的配置项
const option2 = {
    xAxis: {
        type: 'category',
        data: ['A', 'B', 'C', 'D', 'E', 'F'],
        link: chart1.getXAxis().data // 与图表1的 X 轴数据关联
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [50, 100, 150, 80, 70, 110],
        type: 'bar',
        link: chart1.getSelectedData()[0].index // 与图表1的数据点关联
    }]
};

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

在这个示例中，我们创建了两个柱状图，并将它们设置为联动。当我们在图表1上选择一个数据点时，图表2会自动定位到相应数据点的位置。这是通过设置 link 属性来实现的，它可以将一个图表的 X 轴数据或数据点与另一个图表的 X 轴数据或数据点关联起来。

ECharts如何实现多图表联动

相关阅读