[JavaScript知识库]vue_整合Echarts

一：npm安装

npm install echarts --save 
// 或者淘宝镜像安装
cnpm install echarts --save 

二：在main.js中引入

import * as echarts from 'echarts'//5.0版本之后要有as echarts这个
Vue.use(echarts);
//或者Vue.prototype.$echarts = echarts

三：vue文件中使用

<!-- .vue文件中的html部分-->
<div id="myChart" style="width: 100%;height: 600px"></div>

//  .vue文件中的js部分
export default {
  data () {
    return {}
  },
  mounted(){
    this.drawLine();//渲染echarts表格
  },
  methods: {
    drawLine(){
   		let xDataArr = [];// x轴数据（类目轴）
        let yDataArr = [];// y轴数据（数据轴）
        let echarts = require('echarts');
        //初始化echarts实例
        let mCharts = echarts.init(document.getElementById('myChart'));
        // 绘制图表
        myChart.setOption({
            title: { 
            text: '统计数据'
            },
            xAxis: {
                type: 'category',
                data: xDataArr ,
            },
            yAxis: {
            	type: 'value',
			},
            series: [{
                name: '销量',
                type: 'bar',
                data: yDataArr
            }]
        });
       mCharts.setOption(option)
    }
  }
}