Echarts图例点击事件更改，实现点击显示对应数据的功能

2023-12-11 12:18:59

Echarts是一款功能强大的数据可视化库，广泛应用于各个领域。Echarts自带的图例点击事件是点击什么隐藏什么，而在某些场景下，我们可能需要修改这个行为，实现点击什么显示什么。本文将介绍如何修改Echarts自带的图例点击事件，实现点击什么显示什么的功能。

更改图例点击事件

Echarts在检测到图例点击时，将触发echarts实例的'legendselectchanged'事件。我们可以通过监听这个事件，然后在事件处理函数中修改图例的点击行为。

修改图例点击事件的代码如下：

myChart.on('legendselectchanged', function (param) {
  // 获取点击的图例名称
  const legendName = param.name;

  // 获取所有系列
  const series = myChart.getSeries();

  // 遍历所有系列
  for (let i = 0; i < series.length; i++) {
    // 如果系列的名称与点击的图例名称相同
    if (series[i].name === legendName) {
      // 显示该系列
      series[i].show();
    } else {
      // 隐藏该系列
      series[i].hide();
    }
  }
});

代码示例

下面是一个完整的代码示例，展示了如何修改Echarts自带的图例点击事件，实现点击什么显示什么的功能：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  
  <script src="echarts.min.js"></script>
</head>
<body>
  <div id="main" style="width: 600px; height: 400px;"></div>

  <script>
    // 初始化echarts实例
    const myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    const option = {
      legend: {
        data: ['A', 'B', 'C']
      },
      series: [
        {
          name: 'A',
          type: 'line',
          data: [1, 2, 3]
        },
        {
          name: 'B',
          type: 'line',
          data: [4, 5, 6]
        },
        {
          name: 'C',
          type: 'line',
          data: [7, 8, 9]
        }
      ]
    };

    // 修改图例点击事件
    myChart.on('legendselectchanged', function (param) {
      const legendName = param.name;

      const series = myChart.getSeries();

      for (let i = 0; i < series.length; i++) {
        if (series[i].name === legendName) {
          series[i].show();
        } else {
          series[i].hide();
        }
      }
    });

    // 绘制图表
    myChart.setOption(option);
  </script>
</body>
</html>