我正在尝试另一种方法来为一些报告制作图表,为此我使用了ChartJs,vue,axios和我的数据库中的信息。我已经查看了代码,并按照错误指出的要点,但我一直无法解决它,以下是代码:
<template>
<div>
<br>
<br>
<chart></chart>
<br>
<br>
</div>
</template>
<script>
import VueChartJs from 'vue-chartjs'
import Chart from 'chart.js'
import Vue from 'vue'
Vue.component('chart',{
extends:VueChartJs.Pie,
data(){
return{
etiquetas: [],
stock: [],
bgColors: ['#5DB3E2', '#5DE2C1 ', '#C0E25D '],
}
},
mounted(){
this.mostrar()
this.renderChart({
labels: this.etiquetas,
datasets: [
{
label:'Graficos',
backgroundColor: this.bgColors,
data: this.stock
}
]
}, {responsive:true, maintainAspectRadio:false})
},
methods:{
mostrar(){
axios.get('http://localhost:4000/users')
.then(response => {
response.data.forEach(element => {
this.etiquetas.push(element.position)
this.stock.push(element.id)
});
})
}
}
})
</script>
这是整个错误:
Uncaught TypeError: Cannot set properties of undefined (setting 'render')
at normalizeComponent (componentNormalizer.js?2877:24)
at eval (Reports.vue?ab61:8)
at Module../src/views/Reports.vue (app.js:1836)
at __webpack_require__ (app.js:849)
at fn (app.js:151)
at eval (index.js?a18c:1)
at Module../src/router/index.js (app.js:1716)
at __webpack_require__ (app.js:849)
at fn (app.js:151)
at eval (main.js:13)
我非常感谢你帮助解决这个问题。
2条答案
按热度按时间8gsdolmq1#
看起来您没有正确导出Vue组件定义。请尝试添加
export default {
2g32fytz2#
您应该使用
export default
来注册组件,就像通常使用单文件组件一样。