vue.js - How do I add dynamic data to apexcharts using vue.js?
问题描述
I am trying to use dynamic data in my donut apexchart, but I don't know the correct way to do it.
I tried setting "test: 5" under data and then change the static number in series: [this.test, 4, 1]. Did not output anything, I am new to programming.
<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>
My goal is to reach in to firebase and use the data from there, but to start with I just wanted to test out how to add any data and failed here already.
解决方案
您不应该直接在数据中使用另一个变量。系列:[this.test, 5, 4],这将在 this.test 中返回 null。您可以先将系列设置为空,然后再设置值。series:[] 然后在某个函数中填充系列。或者使用 computed() 如下:
computed: {
series() {
return this.test;
}
}
推荐阅读
- python - 更改可变参数的 Python 函数
- php - 使用 file_put_contents (Laravel) 在 PHP 中编辑文件的问题
- .net - 在不挂起 UI 线程的情况下绑定 GridView
- python - 序列化程序在 Django 3.1 中删除数据
- firebase - 在 Flutter 的小部件中显示 Firebase 实时数据库数据
- python - 如何在 csv 文件中找到项目的位置?
- spring-boot - 我的资源类没有找到 Spring Boot Application 中定义的服务 bean
- rest - 如何在 OpenAPI YAML 文件中添加 JAX-RS 响应
- raspberry-pi3 - 检测 Raspberry Pi3 上的 GPU 中断需要哪些步骤?
- python - 是否有可能从硒变成beautifulsoup?