1，安装chart.js和vue-chart.js
npm install chart.js --save
npm install vue-chart.js --save
2，独立文件，方便修改
封装js,这是折线图的，其他也差不多是这样，改一下Line加以区别就好
import { Line, mixins } from ‘vue-chartjs‘
const { reactiveProp } = mixins
export default Line.extend({
mixins: [reactiveProp],
props: [‘options‘],
mounted () {
// this.chartData is created in the mixin
this.renderChart(this.chartData, this.options)
}
})
3，vue中使用；数据格式可以去chart.js查看，有细说，差不多把chart.js里的data()复制到datacollection里就可以
<template>
<div class="small">
<line-chart :chart-data="datacollection"></line-chart>
<button @click="fillData()">Randomize</button>
</div>
</template> <script>
import LineChart from ‘./LineChart.js‘ export default {
components: {
LineChart
},
data() {
return {
datacollection: { labels: [], datasets: [] }
}
},
mounted() {
this.fillData()
},
methods: {
fillData() { let result = {
labels: [this.getRandomInt(), this.getRandomInt(), this.getRandomInt(),this.getRandomInt()],
datasets: [
{
label: ‘Data One‘,
backgroundColor: ‘#f87979‘,
data: [this.getRandomInt(), this.getRandomInt(), this.getRandomInt(),this.getRandomInt()]
}, {
label: ‘Data One‘,
backgroundColor: ‘#0f0‘,
data: [this.getRandomInt(), this.getRandomInt(), this.getRandomInt(),this.getRandomInt()]
}
]
}; console.log(result);
this.datacollection = result;
},
getRandomInt() {
return Math.floor(Math.random() * (50 - 5 + 1)) + 5
}
}
}
</script>
2018年的代码，如果不能正常显示，请自行查阅官方文档修改参数