我正在尝试在甜甜圈顶点中使用动态数据,但是我不知道正确的方法。
我尝试在数据下设置“ 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并从那里使用数据,但首先,我只是想测试一下如何添加任何数据,但在这里失败了。
答案 0 :(得分:0)
您不应在数据中的另一个变量中直接使用一个变量。 系列:[this.test,5,4], 这将在this.test中返回null。 您可以将系列初始设置为空,然后再设置值。 系列:[] 然后在一系列函数中填充序列。 否则按以下方式使用compute():
non-brown-reservation
答案 1 :(得分:0)
您可以像这样动态更新图表数据。
this.chartOptions = {labels:['dynamic data here']}
this.series = ['dynamic data here']