Vue2中使用图表

一.使用echarts

使用 cnpm 安装 Echarts
javascript 代码

cnpm install echarts -S

和之前介绍的 axios 类似，echarts 也不能通过 Vue.use() 进行全局调用
通常是在需要使用图表的 .vue 文件中直接引入
javascript 代码

import echarts from 'echarts'

也可以在 main.js 中引入，然后修改原型链
javascript 代码

Vue.prototype.$echarts = echarts 

然后就可以全局使用了
javascript 代码

let myChart = this.$echarts.init(document.getElementById('myChart'))

放入配置项options渲染图表，可多次执行setOption
javascript 代码

myChart.setOption(options);

二.使用vue-chartjs, chartjs

1.安装vue-chartjs, chartjs
javascript 代码

yarn add vue-chartjs chart.js //npm,cnpm 都可以

2.封装一个可复用的图表组件，这里以饼图为例，就是一个JS文件
javascript 代码

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

export default Pie.extend({
    mixins: [reactiveProp],
    props: ['options'],
    mounted() {
        console.log(this.chartData);
        console.log(this.options);
        this.renderChart(this.chartData, this.options);
    }

3.如何使用这个组件
1) 导入该图表组件
javascript 代码

import PieChart from './PieChart.js';

2) 注册该组件，才能在模板中使用
    **javascript 代码**

 import PieChart from './PieChart.js'

  export default {
    components: {
      PieChart
    },
    data () {
      return {
        datacollection: null
      }
    }
    }
  }

3) 使用组件
     **javascript 代码**

<pie-chart :chart-data="datacollection" ：options="options"></pie-chart>

     :chart-data="datacollection" 为固定格式，组件处理的时候默认读取chartData

具体的配置可以去看chartjs文档,但是chartjs的可配置度不高，使用起来相对麻烦，还是推荐使用echarts,这样可以配置成我们想要的效果