Vue中使用chart图表

安装

yarn add vue-chartjs chart.js
或
npm install vue-chartjs chart.js --save

安装完
新建js文件
在文件中引入需要使用的图表

import { Line, mixins } from 'vue-chartjs'
const { reactiveProp } = mixins

export default {
  extends: Line,
  mixins: [reactiveProp],
  props: ['options'],
  mounted () {
 options object  //这里data是父组件传过来
    this.renderChart(this.chartData, this.options)
  }
}

在需要使用图标的vue文件中引入刚才创建的js文件并且挂着到组件中

<template>
  <div class="container">
      <div class="lineChart">
        <line-chart :chart-data="datacollection"></line-chart>
      </div>

  </div>
</template>

<script>

  import LineChart from '../assets/LineChart'
export default {
  name: 'Log',
  data() {
    return {
      datacollection: { //此处的数据是传给子组件
        labels: ["日访客量", "周访客量", "月访客量", "总访客量", "评论数", "文章热度"],
        datasets: [
          {
            label: "总量",

            strokeColor: "rgba(255, 240, 80,1)",
            pointColor: "rgba(58, 150, 221,1)",
            pointStrokeColor: "#1ba160",
            pointHighlightFill: "#fcd05d",
            pointHighlightStroke: "rgba(0, 210, 220,1)",
            data: [65, 59, 80, 81, 56, 55]
          }
        ]
      }
    }
  },
  methods: {
  },
  components: {
    LineChart
  }
}

这样我们就图表就使用到页面上了