点击事件不适用于 ApexCharts (Vue3)

Question

每当有人点击我的图表或其中一个栏时，我需要触发一个事件，但由于某种原因，事件不会为我触发。

这是我的代码：

<apexchart type="rangeBar" :options="chartOptions" class="ganttChart" :series="series"></apexchart>

我的设置：

setup() {
 const series = [
            {
              name: 'Sunny',
              data: [
                {
                  x: 'Weather',
                  y: [
                    new Date('2019-03-05').getTime(),
                    new Date('2019-03-08').getTime()
                  ]
                },
              ]
            },
            {
              name: 'Rainy',
              data: [
                {
                  x: 'Weather',
                  y: [
                    new Date('2019-03-02').getTime(),
                    new Date('2019-03-05').getTime()
                  ]
                },
              ]
            }
          ];

  const chartOptions = {
            chart: {
                events: {
                    click: function(event, chartContext, config) {
                        alert(event, chartContext, config);
                    }
                },
              height: 400,
              width: 400,
              type: 'rangeBar',
              
            },
            plotOptions: {
              bar: {
                horizontal: true
              }
            },
            
            fill: {
              type: 'gradient',
              gradient: {
                shade: 'light',
                type: 'vertical',
                shadeIntensity: 0.25,
                gradientToColors: undefined,
                inverseColors: true,
                opacityFrom: 1,
                opacityTo: 1,
                stops: [50, 0, 100, 100]
              }
            },
            xaxis: {
              type: 'datetime'
            },
            legend: {
              position: 'top'
            }
          };

         return { 
              series, chartOptions 
              }
    }

我也尝试过使用 dataPointSelection 事件，但没有效果。

除了事件之外，我的图表显示和工作得很好。

Answer 1

我也为此付出了很多努力，直到我找到了有用的东西。@click你可以这样使用：

<apexchart type="rangeBar" :options="chartOptions" class="ganttChart" :series="series" @click="clickHandler"></apexchart>

然后clickHandler在你的方法中定义：

methods: {
    clickHandler(event, chartContext, config){
        console.log("click")
        console.log(event)
        console.log(chartContext)
        console.log(config)
    },