vue中引入echarts渲染问题

1.通过以下命令安装echarts

npm install echarts --save

2.在main.js文件里全局引入echarts

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

3.单页面引用echarts

import echarts from 'echarts'

// html代码
123

  

4.总结

---

1.在methods钩子函数里自定义一个statistics()去渲染echarts
2.在mounted钩子函数里执行this.statistics()
3.请求后台接口时候如果echarts图表所在的dom存在（this.noData = false）放在this.$nextTick(()=> {this.statistics()})里执行，否则（this.noData = true）直接this.statistics()

---

Vue.nextTick()作用：在下次dom更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获得更新后的dom
如果不使用this.$nextTick() 在切换tab的时候dom从无到有，该节点还没加载，不能获取，会报错