Как добавить динамические данные в apexcharts, используя vue.js?

Question

Я пытаюсь использовать динамические данные в моей верхней диаграмме пончика, но я не знаю, как правильно это сделать.

Я попытался установить "test: 5" под данными, а затем изменить статическое число последовательно: [this.test, 4, 1]. Ничего не выводил, я новичок в программировании.

<script>
import VueApexCharts from 'vue-apexcharts'
export default {
name: 'Dashboard',
components: {
apexcharts: VueApexCharts
},
data () {
return {
  test: 6,
  series: [this.test, 5, 4],
  chartOptions: {
    plotOptions: {
      pie: {
        donut: {
          labels: {
            show: true,
            name: {
              fontSize: '24px'
            },
            value: {
              fontSize: '34px',
              color: '#fff'
            }
          }
        }
      }
    },
    tooltip: {
      enabled: false
    },
    legend: {
      show: false
    },
    fill: {
      colors: ['#4b367c', '#2aa5ed', '#db2828']
    },
    dataLabels: {
      enabled: false
    },
    labels: ['Utkast', 'Öppen', 'Förfallen'],
    colors: ['#4b367c', '#2aa5ed', '#db2828']
  }
}
},
mounted () {
this.$store.commit('setPageTitle', { title: 'Översikt' })
}
}
</script>

Моя цель - получить доступ к базе данных и использовать данные оттуда, но для начала я просто хотел проверить, как добавить какие-либо данные, и уже потерпел неудачу.

Answer 1

Вы не должны использовать одну переменную в другой непосредственно в данных. серия: [this.test, 5, 4], в this.test будет возвращено значение NULL. Вы можете установить серию пусто изначально и установить значения позже. series:[] А затем заполняем ряды какой-то функцией. Или используйте computed() следующим образом:

computed: {
    series() {
        return this.test;
    }
}

Answer 2

Таким образом вы можете динамически обновлять данные диаграммы.

      this.chartOptions = {labels:['dynamic data here']}
this.series = ['dynamic data here']