Return 来自 Apexcharts 中 dataPointSelection 事件的值

Question

我有一个与 and 相关的问题，但他们没有完全解决我的问题。我正在使用 vue 和 apexcharts，我想 return 一个值或从一个事件更新一个变量。是否可以 return 一些东西而不是在控制台中打印它？

像这样：

    events: {
        dataPointSelection: function (event, chartContext, config) {
            this.active = this.series[config.seriesIndex];
        }
    }

我面临的问题是 "this" 引用了整个 vue 组件，因此找不到 "series" 和 "active"。

这是当我点击一个点数据时给我"TypeError: this.series is undefined"的代码。我从父组件获取的系列数据如下所示：

[{"name":"S-1","data":[[2.65,100], [6.67,100]]}, {"name":"S-2","data":[[0,50],[2.65,50]]}]

<script>
  import VueApexCharts from 'vue-apexcharts';

  export default {
    name: "myGraph",
    components: {
      apexchart: VueApexCharts,
    },
    props: {
      series: {}
    },
    data: () => ({
        active: undefined,
        chartOptions: {
          chart: {
            width: '100%',
            animations: {
              enabled: false
            },
            events: {
              dataPointSelection: function (event, chartContext, config) {
                this.active = this.series[config.seriesIndex];
              }
            }
          },
          tooltip: {
            intersect: true,
            shared: false
          },
          markers: {size: 1},
      }
    }),
   }
 }
</script>

想法是，在 dataPointSelection 上，它应该激活该系列，以便稍后访问将存储在该对象中的其他信息。

Answer 1

最简单的方法是直接在组件中绑定事件

<apexchart type="bar" @dataPointSelection="dataPointSelectionHandler"></apexchart>

methods: {
  dataPointSelectionHandler(e, chartContext, config) {
    console.log(chartContext, config)
  }
}

另一种方法是在图表配置中使用 ES6 箭头函数

computed: {
  chartOptions: function() {
    return {
      chart: {
        events: {
          dataPointSelection: (e, chart, opts) => {
            // you can call Vue methods now as "this" will point to the Vue instance when you use ES6 arrow function
            this.VueDemoMethod();
          }
        }
      },
    }
  }
}

Answer 2

我想这就是您要找的东西

chart: {
    type: 'area',
    events: {
        dataPointSelection(event, chartContext, config) {
            console.log(config.config.series[config.seriesIndex])
            console.log(config.config.series[config.seriesIndex].name)
            console.log(config.config.series[config.seriesIndex].data[config.dataPointIndex])
        }
    }
}

如果需要点击,这个更好

chart: {
    type: 'area',
    events: {
        click(event, chartContext, config) {
            console.log(config.config.series[config.seriesIndex])
            console.log(config.config.series[config.seriesIndex].name)
            console.log(config.config.series[config.seriesIndex].data[config.dataPointIndex])
        }
    }
}

来源How to access value on dataPointSelection function of Apexchart

文档事件https://apexcharts.com/docs/options/chart/events/

Return 来自 Apexcharts 中 dataPointSelection 事件的值

Return value from dataPointSelection event in Apexcharts

vue.js

apexcharts