1.首先安装Echarts
进入到项目路径执行命令:
npm install echarts –-save
//或者
cnpm install echarts –-save
2.全局引用Echarts
在项目中的main.js中添加
import * as echarts from 'echarts'
//注:这里不能用这种方式import echarts from 'echarts'
//会报错,Error in mounted hook: "TypeError: Cannot read property 'init' of undefined"
Vue.prototype.$echarts = echarts;
3.使用Echarts
mounted(){
this.drawLine();
console.log(this.$echarts)
},
methods:{
drawLine(){
// 基于准备好的dom,初始化echarts实例
let myChart = this.$echarts.init(document.getElementById('myChart'))
// 绘制图表
myChart.setOption(this.option);
}
}
4.知识补充:
为什么Echarts的加载方法要写在mounted中,而不是写在created?
因为在整个Vue的生命周期中的created阶段,vue的实例虽然已经被初始化,但是还没有挂载至el上,所以我们无法获取到对应的节点。这个阶段我们进行document.getElementById(‘myChart’)操作是获取不到Dom元素的。
而在mounted阶段,Vue的template已经成功挂载到el上了,页面渲染已经完成,所以这个阶段就可以操作Dom节点了。