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年的代码，如果不能正常显示，请自行查阅官方文档修改参数