ECharts如何初始隐藏系列并通过自定义按钮控制显隐及判断状态

问题原因 #

通过chart.getOption().series无法看到系列显隐状态变化，是因为getOption()返回的是初始配置或手动setOption传入的静态配置，而通过legendToggleSelect这类交互操作改变的是ECharts的运行时状态，不会同步到静态配置中。

两种判断方法 #

方法1：通过系列运行时模型判断

利用getModel().getSeriesByName()获取目标系列的运行时模型，调用isVisible()方法判断显示状态：

button.addEventListener('click', (e) => {   
    myChart.dispatchAction({
      type: "legendToggleSelect",
      name: "NAME_OF_THE_SERIE"
    });
    // 获取目标系列的运行时模型
    const targetSerieModel = myChart.getModel().getSeriesByName('NAME_OF_THE_SERIE');
    // isVisible()返回true表示显示，取反即为隐藏状态
    const isHidden = !targetSerieModel.isVisible();
    console.log(`系列 ${targetSerieModel.name} 是否隐藏：${isHidden}`);
});

方法2：通过图例选中状态判断

legendToggleSelect本质是切换图例的选中状态，可通过图例组件的运行时模型获取选中状态：

button.addEventListener('click', (e) => {   
    myChart.dispatchAction({
      type: "legendToggleSelect",
      name: "NAME_OF_THE_SERIE"
    });
    // 获取图例组件的运行时模型
    const legendModel = myChart.getModel().getComponent('legend');
    // 获取所有系列的图例选中状态，key为系列name，value为是否选中（true=显示，false=隐藏）
    const legendSelectedStatus = legendModel.get('selected');
    const isHidden = !legendSelectedStatus['NAME_OF_THE_SERIE'];
    console.log(`系列 NAME_OF_THE_SERIE 是否隐藏：${isHidden}`);
});

补充：设置系列初始隐藏的两种方式 #

如果需要让指定系列默认处于隐藏状态，无需依赖按钮，直接在配置中设置：

方式1：在series中配置show: false

const option = {
  // 其他配置项
  series: [
    {
      name: "NAME_OF_THE_SERIE",
      type: 'line', // 根据实际图表类型调整
      data: [10, 20, 30],
      show: false // 初始隐藏该系列
    }
    // 其他系列配置
  ]
};

方式2：在legend中配置选中状态

const option = {
  legend: {
    // 其他图例配置
    selected: {
      "NAME_OF_THE_SERIE": false // 初始不选中，对应系列隐藏
    }
  },
  series: [
    {
      name: "NAME_OF_THE_SERIE",
      type: 'line',
      data: [10, 20, 30]
    }
    // 其他系列配置
  ]
};

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