下载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();
});
