如何禁用React ECharts图例点击默认行为，避免图表数据消失

方案1：正确配置legend.selectedMode为'none' #

先确认ECharts配置项（option）里的legend配置层级是否正确，很多时候失效是因为配置嵌套错误。示例代码：

import ReactECharts from 'echarts-for-react';

const MyChart = () => {
  const option = {
    legend: {
      selectedMode: 'none', // 核心配置，禁用图例选中/切换逻辑
      data: ['数据1', '数据2', '数据3']
    },
    xAxis: {
      type: 'category',
      data: ['周一', '周二', '周三']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      { name: '数据1', type: 'bar', data: [10, 20, 30] },
      { name: '数据2', type: 'bar', data: [15, 25, 35] },
      { name: '数据3', type: 'bar', data: [5, 15, 25] }
    ]
  };

  return <ReactECharts option={option} />;
};

export default MyChart;

方案2：监听图例事件并强制维持原有状态 #

如果方案1无效，可能是自定义逻辑或版本兼容问题，直接通过事件监听抵消点击效果：

import React, { useRef } from 'react';
import ReactECharts from 'echarts-for-react';

const MyChart = () => {
  const chartRef = useRef(null);

  const handleChartReady = (chartInstance) => {
    // 监听图例选中事件，强制保持原有选中状态
    chartInstance.on('legendselectchanged', (params) => {
      chartInstance.setOption({
        legend: {
          selected: {
            [params.name]: params.selected[params.name] // 还原点击前的选中状态
          }
        }
      });
      return false; // 阻止事件冒泡
    });
  };

  const option = {
    legend: {
      data: ['数据1', '数据2', '数据3']
    },
    xAxis: { type: 'category', data: ['周一', '周二', '周三'] },
    yAxis: { type: 'value' },
    series: [
      { name: '数据1', type: 'bar', data: [10,20,30] },
      { name: '数据2', type: 'bar', data: [15,25,35] },
      { name: '数据3', type: 'bar', data: [5,15,25] }
    ]
  };

  return (
    <ReactECharts
      ref={chartRef}
      option={option}
      onReady={handleChartReady}
    />
  );
};

export default MyChart;

排查注意事项 #

• 检查是否有其他自定义代码篡改了图例选中状态，比如全局ECharts配置或第三方插件
• 确认option未被其他逻辑覆盖，完整传递给ReactECharts组件
• 尝试清除项目缓存（重新安装依赖、清理构建缓存），排除版本依赖缓存问题

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