ApexChart如何设置初始仅选中单个图例及点击图例仅展示对应系列

需求1：初始化仅默认选中单个图例项 #

ApexChart 内置了legend.itemSelection.default配置项，值为与数据系列顺序一一对应的布尔数组，数组元素为true时对应图例默认选中、系列展示，为false时对应图例默认未选中、系列隐藏。
如果默认选中第一个系列，配置示例如下：

const options = {
  legend: {
    show: true, // 你已开启的图例配置
    itemSelection: {
      // 数组长度和你的series数组长度完全匹配，仅需要默认展示的系列位置设为true
      default: [true, false, false] 
    }
  },
  // 其他原有配置...
}

如果数据系列数量不固定，可以动态生成配置数组，比如默认选中第一个系列的通用写法：

default: new Array(series.length).fill(false).fill(true, 0, 1)

需求2：点击图例时仅展示当前点击的系列 #

首先关闭图例点击的默认切换逻辑，再通过chart.events.legendClick回调自定义点击逻辑即可，核心逻辑为点击某图例时，将所有系列设为隐藏，仅当前点击的系列设为展示。
完整配置示例：

const options = {
  legend: {
    show: true,
    onItemClick: {
      toggleDataSeries: false // 关闭默认切换逻辑
    },
    itemSelection: {
      default: new Array(series.length).fill(false).fill(true, 0, 1) // 初始化默认选中第一个
    }
  },
  chart: {
    type: 'line', // 替换为你实际使用的图表类型
    events: {
      legendClick: function (chartContext, seriesIndex) {
        // 生成仅当前点击系列为选中状态的配置数组
        const newSelection = new Array(chartContext.w.config.series.length).fill(false)
        newSelection[seriesIndex] = true
        // 更新图例选中状态和系列显隐
        chartContext.updateOptions({
          legend: {
            itemSelection: {
              default: newSelection
            }
          }
        })
      }
    }
  },
  // 其他原有配置：series、xaxis、yaxis等...
}

如果你使用的是Vue/React等框架封装的ApexChart组件，上述配置逻辑完全通用，直接传入组件的options属性即可。

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