在组件linechart里这么写
<script>
import { Line } from 'vue-chartjs';
export default {
extends: Line,
data() {
return {
datacollection: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'success',
backgroundColor: '#FC2525',
fill: 'transparent',
data: [40, 39, 10, 40, 39, 80, 40]
},
{
label: 'fail',
backgroundColor: '#05CBE1',
fill: 'transparent',
data: [60, 55, 32, 10, 2, 12, 53]
}
]
}
}
},
mounted() {
console.log("slkslkf");
this.renderChart(this.datacollection, {
responsive: false,
maintainAspectRatio: false
})
}
}
</script>
然后在要用的地方 (dashboard)里面引入注册之后 要手动设置 长和高 要不然inspect每次都是height=0 这个组件每次都出不来 我也觉得非常迷
<line-chart :width="1675" :height="250"></line-chart>