自定义ECharts图例后，如何用dispatchAction实现系列显隐？

你遇到的问题核心是：自定义图例后调用legendToggleSelect仅触发动画但未改变系列显隐，这是因为该Action默认和ECharts内置的legend组件联动，若未配置内置legend，就无法触发系列显隐的关联逻辑。以下是两种可行的解决方式：

方式一：保留内置legend（隐藏），复用联动逻辑 #

1. 在图表配置中添加内置legend组件，设置show: false隐藏它，让ECharts自动维护系列和图例的关联：

const option = {
  legend: {
    show: false, // 隐藏内置图例，不影响自定义图例
    // 若series的name未自动被识别，可手动配置data: ['系列1', '系列2', ...]
  },
  series: [
    { name: '系列1', data: [...] },
    { name: '系列2', data: [...] },
    // 其他系列...
  ]
};
myChart.setOption(option);

2. 调用legendToggleSelect时，确保name参数和series的name完全匹配（大小写、空格都要一致）：

myChart.dispatchAction({
  type: "legendToggleSelect",
  name: id // id必须和对应series的name严格一致
});

此时ECharts会自动根据图例选中状态切换系列的显隐，无需手动增删series数据。

方式二：直接修改series的visible属性（不依赖内置legend） #

如果不想配置内置legend，可直接获取当前配置，修改对应系列的visible状态后更新图表：

// 获取当前图表配置
const currentOption = myChart.getOption();
// 找到目标系列的索引
const targetSeriesIndex = currentOption.series.findIndex(item => item.name === id);
if (targetSeriesIndex !== -1) {
  // 切换显隐状态
  currentOption.series[targetSeriesIndex].visible = !currentOption.series[targetSeriesIndex].visible;
  // 更新图表
  myChart.setOption(currentOption);
}

这种方式更直接，完全脱离内置legend的限制，适合完全自定义图例的场景。

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