正文

学会echarts联动图表：轻松实现双图数据同步展示

/0 浏览量
0608

在数据可视化领域，echarts 是一个功能强大且易于使用的 JavaScript 库。它可以帮助我们快速创建丰富的图表，并且通过联动图表，我们可以将多个图表的数据同步展示，从而更加直观地分析数据之间的关系。本文将带你一步步学会如何使用 echarts 创建联动图表，实现双图数据同步展示。

联动图表的基本概念

联动图表是指多个图表之间通过某种方式相互关联，当其中一个图表的数据发生变化时，其他图表的数据也会相应地发生变化。在 echarts 中，我们可以通过配置 tooltip、legend、series 等组件来实现联动。

准备工作

在开始之前，请确保你已经安装了 echarts 库。可以通过以下代码在 HTML 文件中引入 echarts：

<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>

创建基础图表

首先，我们需要创建两个基础图表。这里以柱状图和折线图为例。

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

// 指定图表的配置项和数据
var option1 = {
    title: {
        text: '柱状图'
    },
    tooltip: {},
    legend: {
        data:['销量']
    },
    xAxis: {
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
};

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

// 创建第二个图表
var myChart2 = echarts.init(document.getElementById('main2'));

var option2 = {
    title: {
        text: '折线图'
    },
    tooltip: {},
    legend: {
        data:['销量']
    },
    xAxis: {
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'line',
        data: [5, 20, 36, 10, 10, 20]
    }]
};

myChart2.setOption(option2);

实现联动

为了实现联动，我们需要在两个图表中添加 tooltip 和 legend 组件，并设置它们的 trigger 属性为 'axis'。这样，当用户在图表上悬停时，会显示所有图表的对应数据。

// 更新第一个图表的配置项
myChart1.setOption({
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        trigger: 'axis'
    }
});

// 更新第二个图表的配置项
myChart2.setOption({
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        trigger: 'axis'
    }
});

总结

通过以上步骤，我们已经成功地创建了一个联动图表，实现了双图数据同步展示。在实际应用中，你可以根据需要修改图表类型、数据等，以适应不同的场景。希望这篇文章能帮助你更好地理解 echarts 联动图表的使用方法。

-- 展开阅读全文 --