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

bqf10yzr  于 2022-12-23  发布在  Vue.js
关注(0)|答案(2)|浏览(152)

我需要一个事件被触发,每当有人点击我的图表或对一个酒吧,但由于某种原因,事件不为我触发。
这是我的代码:

<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事件,但没有效果。
除了事件,我的图表显示和工作刚刚好。

xnifntxz

xnifntxz1#

我也为此挣扎了很久,直到我发现一些东西可以工作。你可以像这样使用@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)
    },
i7uaboj4

i7uaboj42#

对于使用Vue API组合物的人员:

<apexchart type="rangeBar" @click="clickFunction"></apexchart>

在“<script setup>“中定义函数

function clickFunction(event, chartContext, config) {
   console.log('click', event, chartContext, config)
}

相关问题