Question

我有一个与this question和this answer有关的问题，但它们不能完全解决我的问题。我正在使用vue和apexcharts，我想返回一个值或从事件中更新变量。是否可以返回某些内容而不是在控制台中进行打印？

类似这样的东西：

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

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

这是当我单击点数据时给我的代码“ TypeError：this.series未定义”。我从父组件获得的系列数据看起来像这样：

[{"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/

Apexcharts中dataPointSelection事件的返回值

2 个答案: