ECharts图例交互需求：点击单图例仅显示对应数据是否可行？

这个需求完全可以实现，核心是修改图例点击事件的默认逻辑——将默认的「点击隐藏当前系列」改为「点击时仅保留当前系列显示，其余全部隐藏」。以下是主流前端图表库的具体实现方案：

ECharts #

通过监听legendselectchanged事件，在回调中控制所有系列的显示状态：

// 假设myChart是你的ECharts实例
myChart.on('legendselectchanged', function(params) {
  const targetSeriesName = params.name;
  const currentOption = myChart.getOption();
  
  // 遍历所有系列，仅保留目标系列显示
  currentOption.series.forEach(series => {
    series.show = series.name === targetSeriesName;
  });
  
  myChart.setOption(currentOption);
  
  // 可选：添加再次点击恢复全部显示的逻辑
  const isOnlyTargetShown = currentOption.series.every(series => 
    series.show === (series.name === targetSeriesName)
  );
  if (isOnlyTargetShown) {
    // 记录状态，下次点击时重置所有系列为显示
  }
});

Highcharts #

利用legendItemClick事件覆盖默认行为，手动控制系列可见性：

Highcharts.chart('your-container-id', {
  // 图表基础配置（数据、标题等）
  plotOptions: {
    series: {
      events: {
        legendItemClick: function() {
          const targetSeries = this;
          const allSeries = targetSeries.chart.series;
          
          // 仅保留当前点击的系列显示
          allSeries.forEach(series => {
            series.setVisible(series.name === targetSeries.name);
          });
          
          return false; // 阻止默认的隐藏当前系列行为
        }
      }
    }
  }
});

Chart.js #

通过自定义legend.onClick配置实现需求：

const chart = new Chart(document.getElementById('your-canvas-id'), {
  // 数据与基础配置
  options: {
    legend: {
      onClick: function(e, legendItem) {
        const targetLabel = legendItem.text;
        const datasets = this.chart.data.datasets;
        
        // 设置所有数据集的隐藏状态，仅目标数据集显示
        datasets.forEach(dataset => {
          dataset.hidden = dataset.label !== targetLabel;
        });
        
        this.chart.update();
      }
    }
  }
});

内容的提问来源于stack exchange，提问作者Bariant