vue中使用chart.js

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年的代碼，若是不能正常顯示，請自行查閱官方文檔修改參數