Vue中Apex Charts的dataPointSelection事件使用及数据展示咨询

你的思路是对的，events:{ dataPointSelection:(event, chartContext, config)=>{} }就是实现需求的正确配置方式。

为什么不用@click？ #

@click是监听整个图表容器的全局点击事件，无法精准判断点击的是数据点，也拿不到对应数据点的系列信息，而dataPointSelection是Apex Charts专为数据点点击提供的原生事件，只会在点击数据点时触发，同时直接返回所需的上下文数据。

具体实现步骤 #

1. 在图表配置的chart.events中添加dataPointSelection事件处理函数
2. 通过函数的config参数获取选中数据点的系列索引（seriesIndex）和数据点索引（dataPointIndex）
3. 利用索引从chartContext中提取对应系列的名称和数据值，再将数据传入弹窗展示

代码示例 #

var options = {
  chart: {
    type: 'line',
    events: {
      dataPointSelection: function(event, chartContext, config) {
        // 获取选中的系列和数据点
        const targetSeries = chartContext.w.config.series[config.seriesIndex];
        const targetData = targetSeries.data[config.dataPointIndex];
        
        // 这里替换成你的弹窗逻辑，比如赋值给弹窗数据并打开弹窗
        // 示例：
        // document.getElementById('popup-series-name').innerText = targetSeries.name;
        // document.getElementById('popup-data-value').innerText = targetData;
        // document.getElementById('data-popup').style.display = 'block';
        
        console.log('选中系列：', targetSeries.name, '数据值：', targetData);
      }
    }
  },
  xaxis: {
    categories: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月']
  },
  series: [{
    name: '销售额',
    data: [30, 40, 35, 50, 49, 60, 70, 91, 125]
  }, {
    name: '访问量',
    data: [230, 120, 540, 610, 320, 560, 890, 1000, 1100]
  }]
}

var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();

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