echarts二次封装总结

4,208

echarts相关学习链接

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

渲染echarts步骤

  1. 引入
import * as echarts from 'echarts'  //echarts更新5.0.1版本后的引入方式
  1. 二次封装组件内写法
<div :id="id" :style="style" :key="keyValue"></div>

//在computed中计算宽高
computed: {
     style(){
         return{
             height:this.height,
             width:this.width
         }
     }
 },
  1. 初始化
 let myEcharts = echarts.init(document.getElementById(this.id))
 var option = {...}  //在上述链接中有充分教程,此处省略
 myEcharts.clear()
 myEcharts.setOption(option);

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

  1. 监听宽高(重点)
 mounted () {  //或者activated中监听
     this.initData()
     window.addEventListener('resize',this.resize,true)
 },

存在的问题:当切换到其他无echarts图表的页面改变宽度时,监听仍然存在,此时监听不到对应dom元素,从而使得再返回去时,echarts图表的宽高变成了默认的最小宽高100px,如图所示: image.png 所以,在离开页面之前需要对绑定的监听事件进行解绑

  1. 取消监听(重点) 原因:否则容易产生内存泄漏问题,

由于页面中使用了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);

  1. 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.对绑定的事件进行解绑