无法将vuex存储数据传递到图形

Question

当前，我正在尝试将数据从vuex存储传递到apexcharts图中。但是，它似乎不起作用吗？谁能告诉我我做错了什么？我主要是尝试在渲染顶点图之前更新this.series和this.chartOptions.labels。

cityPieChart.vue

<template>
  <apexchart type='pie' width='380' :options='generateChartOptions' :series='generateSeries'/>
</template>

<script>
export default {
  created () {

  },
  computed: {
    generateChartOptions () {
      this.chartOptions.labels = this.$store.getters.cities.cities
      return this.chartOptions
    },
    generateSeries () {
      this.chartOptions.series = this.$store.getters.cities.cities_count
      return this.series
    }
  },
  data: () => ({
    series: [],
    // series: [],
    chartOptions: {
      chart: {
        toolbar: {
          show: false
        }
      },
      labels: [],
      // labels: [],
      title: {
        text: 'Cities Analysis',
        align: 'left',
        floating: false
      },
      responsive: [
        {
          breakpoint: 480,
          options: {
            chart: {
              width: 200
            },
            legend: {
              position: 'bottom'
            }
          }
        }
      ]
    }
  })
}
</script>

<style>
</style>

Answer 1

在计算属性generateSeries()中，您将getter分配给this.chartOptions.series，但返回this.series，即undefined。

generateChartOptions()可能还可以，因为我对图形库不熟悉，但是您将其分配给this.chartOptions.labels abd，仅返回this.chartOptions。