echarts二次封装总结

echarts相关学习链接

1. 官网：echarts.apache.org/examples/zh…
2. 实例：www.makeapie.com/explore.htm…

渲染echarts步骤

1. 引入

import * as echarts from 'echarts'  //echarts更新5.0.1版本后的引入方式
复制代码

2. 二次封装组件内写法

<div :id="id" :style="style" :key="keyValue"></div>

//在computed中计算宽高
computed: {
     style(){
         return{
             height:this.height,
             width:this.width
         }
     }
 },
复制代码

3. 初始化

 let myEcharts = echarts.init(document.getElementById(this.id))
 var option = {...}  //在上述链接中有充分教程，此处省略
 myEcharts.clear()
 myEcharts.setOption(option);
复制代码

场景：A页面，B页面是从A页面跳转的详情页 A有图表，B无图表

4. 监听宽高（重点）

 mounted () {  //或者activated中监听
     this.initData()
     window.addEventListener('resize',this.resize,true)
 },
复制代码

存在的问题：当切换到其他无echarts图表的页面改变宽度时，监听仍然存在，此时监听不到对应dom元素，从而使得再返回去时，echarts图表的宽高变成了默认的最小宽高100px，如图所示：

所以，在离开页面之前需要对绑定的监听事件进行解绑

5. 取消监听（重点）

原因：否则容易产生内存泄漏问题,

由于页面中使用了keep-alive,所以如果在destoryed()中取消监听是没有效果的

deactivated(){
    let that = this
    window.removeEventListener('resize',that.resize,true)
}
复制代码

此处调用的是外部函数this.resize()，区别于：
window.removeEventListener(‘resize’, function () {
myChart.resize()；
})
此处移除的事件需要与绑定的事件相同，否则会移除失败。

常见bug或warning

1. 定时器并没有取消

定时器中初始化init echarts，其中引用了dom，即使dom删除了，但是定时器还在，所以内存中还是会有这个dom
解决办法：手动删除定时器和dom

this.timer = setTimeout(function(){
 that.initCharts();
},500)

clearTimeout(this.timer);

复制代码

2. There is a chart instance already initialized on the dom.

场景：在同一个页面中有许多select框等，每点击一次需要重新渲染echarts图
解决方法：

if(document.getElementById(this.id) == null){
 	return
 }
 echarts.dispose(document.getElementById(this.id))
复制代码

注意事项

1.避免使用全局变量
2.对绑定的事件进行解绑