（17）VUE+ElementUI+ECharts（ECharts使用）

下载echarts： $ npm install echarts --save

导入所有：main.js中

import echarts from 'echarts';
Vue.prototype.$echarts = echarts；

按需导入：main.js中

//引入基本模板
let echarts = require('echarts/lib/echarts')

// 引入折线图等组件
require('echarts/lib/chart/line') // 折线
require('echarts/lib/chart/bar') // 柱形

// 引入提示框和title组件，图例
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
require('echarts/lib/component/legend')
require('echarts/lib/component/legendScroll')//图例翻译滚动

Vue.prototype.$echarts = echarts

在需要显示echars图表的vue文件中：

<div id="mStudyTime" style="width: 100%; height: 300px;"></div>

// methods 中写入：
mStudyTimeChart() {
    // 基于准备好的dom，初始化echarts实例
    this.mStudyTime = this.$echarts.init(document.getElementById('mStudyTime'));
    // 绘制图表
    this.mStudyTime.setOption({
        title: { text: '月度视频学习时长' },
        tooltip: {},
        xAxis: {
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月']
        },
        yAxis: {},
        series: [
            {
                name: '月份',
                type: 'bar',
                data: [234, 278, 270, 190, 230, 177, 200, 239, 433, 321]
            }
        ]
    });
},

// mounted中调用
this.mStudyTimeChart();

补充： echart自适应 -- resize()

// mounted中使用addEventListener监听(可监听多个echarts图表)
window.addEventListener('resize', () => {
    this.mStudyTime.resize();
});