正文

学会echarts图例联动：轻松解决图表显示不一致问题

/0 浏览量
0707

在数据可视化领域，echarts是一款非常强大的图表库，它可以帮助我们轻松创建各种类型的图表。然而，在使用echarts时，有时候会遇到图例联动的问题，即多个图表的图例无法同步显示。本文将详细讲解如何学会echarts图例联动，帮助你轻松解决图表显示不一致的问题。

什么是echarts图例联动？

echarts图例联动指的是，在多个图表中，当某个图例被选中或取消选中时，其他图表中对应的图例也会同步变化。这样，用户可以更直观地查看和对比不同图表中的数据。

为什么需要echarts图例联动？

在实际应用中，我们经常会遇到以下情况：

  1. 多个图表展示同一数据集的不同维度，如图表A展示数据集的销售额，图表B展示数据集的利润率。
  2. 需要同时查看多个图表，以便更好地分析数据。

在这些情况下，echarts图例联动可以帮助用户快速筛选和对比数据，提高数据分析效率。

如何实现echarts图例联动？

以下是实现echarts图例联动的步骤：

1. 准备数据

首先，准备需要展示的数据。以下是一个示例数据集：

var data = [
  {
    name: '商品A',
    value: [120, 200, 150, 80, 70, 110, 130]
  },
  {
    name: '商品B',
    value: [60, 90, 100, 120, 80, 70, 60]
  }
];

2. 创建图表

创建两个折线图，分别展示数据集的销售额和利润率。

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

var option1 = {
  title: {
    text: '销售额'
  },
  tooltip: {},
  legend: {
    data:['商品A', '商品B']
  },
  xAxis: {
    data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"]
  },
  yAxis: {},
  series: [{
    name: '商品A',
    type: 'line',
    data: data[0].value
  }, {
    name: '商品B',
    type: 'line',
    data: data[1].value
  }]
};

var option2 = {
  title: {
    text: '利润率'
  },
  tooltip: {},
  legend: {
    data:['商品A', '商品B']
  },
  xAxis: {
    data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"]
  },
  yAxis: {},
  series: [{
    name: '商品A',
    type: 'line',
    data: [data[0].value[0] * 0.2, data[0].value[1] * 0.2, data[0].value[2] * 0.2, data[0].value[3] * 0.2, data[0].value[4] * 0.2, data[0].value[5] * 0.2, data[0].value[6] * 0.2]
  }, {
    name: '商品B',
    type: 'line',
    data: [data[1].value[0] * 0.2, data[1].value[1] * 0.2, data[1].value[2] * 0.2, data[1].value[3] * 0.2, data[1].value[4] * 0.2, data[1].value[5] * 0.2, data[1].value[6] * 0.2]
  }]
};

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

3. 实现图例联动

为了实现图例联动，我们需要在两个图表的option中添加legendSelectChanged事件监听器。

chart1.on('legendSelectChanged', function (params) {
  chart2.dispatchAction({
    type: 'legendSelect',
    legendName: params.name
  });
});

chart2.on('legendSelectChanged', function (params) {
  chart1.dispatchAction({
    type: 'legendSelect',
    legendName: params.name
  });
});

4. 测试效果

完成以上步骤后，当你在任意一个图表中选中或取消选中某个图例时，另一个图表中对应的图例也会同步变化。

总结

通过本文的讲解，相信你已经学会了如何实现echarts图例联动。在实际应用中，你可以根据需要调整图表类型和数据，轻松解决图表显示不一致的问题。希望这篇文章能对你有所帮助！

-- 展开阅读全文 --