Vue使用Apexcharts饼图点击时seriesIndex和dataPointIndex为-1如何获取扇区数据

饼图属于单系列分类图表，Apexcharts 对 chart.events.click 事件的默认传参逻辑不适用于这类图表，所以会出现seriesIndex和dataPointIndex固定为-1的情况，属于框架设计特性，不是代码错误。

优先推荐使用官方专门适配数据点点击的dataPointSelection事件，可直接获取所有需要的参数：

options: {
  chart: {
    events: {
      // 替换原有click事件为dataPointSelection
      dataPointSelection: (event: any, chartContext: any, config: any) => {
        // 扇区对应索引
        const dataIndex = config.dataPointIndex
        // 饼图仅1个系列，seriesIndex固定为0
        const seriesIndex = config.seriesIndex
        // 扇区对应标签
        const sectorLabel = chartContext.w.config.labels[dataIndex]
        // 扇区对应数值
        const sectorValue = chartContext.w.config.series[seriesIndex][dataIndex]

        // 可根据业务需求使用上述参数
        console.log('索引：', dataIndex, '标签：', sectorLabel, '数值：', sectorValue)
      }
    },
  },
  // 其余原有配置（labels、series等）保持不变即可
}

如果业务场景必须保留click事件，也可以从图表全局上下文手动提取参数：

options: {
  chart: {
    events: {
      click: (event: any, chartContext: any, config: any) => {
        const dataIndex = chartContext.w.globals.clickedDataPointIndex
        // 过滤点击到图表空白区域的情况
        if (dataIndex === undefined) return
        const seriesIndex = 0
        const sectorLabel = chartContext.w.config.labels[dataIndex]
        const sectorValue = chartContext.w.config.series[seriesIndex][dataIndex]
        console.log('索引：', dataIndex, '标签：', sectorLabel, '数值：', sectorValue)
      }
    },
  },
}

• 两种方案都无需修改原有图表的series、labels等业务配置，仅调整事件监听逻辑即可
• 如果是多层环形图这类多系列饼图场景，可直接通过config.seriesIndex获取对应的层级系列索引，再对应取值即可

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