如何使用 vue.js 将动态数据添加到 apexcharts？答案

【问题标题】：How do I add dynamic data to apexcharts using vue.js?如何使用 vue.js 将动态数据添加到 apexcharts？
【发布时间】：2021-02-19 12:46:55
【问题描述】：

我正在尝试在我的甜甜圈顶点图中使用动态数据，但我不知道正确的方法。

我尝试在数据下设置“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>

我的目标是进入 firebase 并使用那里的数据，但一开始我只是想测试如何添加任何数据，但在这里已经失败了。

【问题讨论】：

你试过Props

标签： vue.js apexcharts

【解决方案1】：

您不应该直接在数据中使用另一个变量。系列：[this.test, 5, 4], 这将在 this.test 中返回 null。您可以先将系列设置为空，然后再设置值。系列：[] 然后在某些功能中填充系列。否则使用 computed() 如下：

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

【讨论】：

这行不通。似乎导致系列：[]“apexcharts.min.js?3d1e:6 Uncaught (in promise) TypeError: Cannot read property 'data' of undefined”

【解决方案2】：

您可以像这样动态更新图表数据。

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

【讨论】：