echarts自动适应页面变化（resize）

前言因为要做屏幕适配，用echarts踩了好多坑，记录一下debug历程。踩坑实录问题1：页面进行缩放时，曲线不会跟页面进行适配方法：方法里编写曲线的适配函数，调用echarts中内置的resize函数进行自适应缩放，然后添加监控，页面销毁时删掉，避免不必要内存占用methods:{resizeEcharts(){for(let k=0;k < this.echartsObjList.le

wch0001

14515人浏览 · 2021-11-25 16:12:46

wch0001 · 2021-11-25 16:12:46 发布

前言

因为要做屏幕适配，用echarts踩了好多坑，记录一下debug历程。

踩坑实录

问题1： 页面进行缩放时，曲线不会跟页面进行适配
在这里插入图片描述

方法：方法里编写曲线的适配函数，调用echarts中内置的resize函数进行自适应缩放，然后添加监控，页面销毁时删掉，避免不必要内存占用

methods:{
resizeEcharts(){
    for(let k=0;k < this.echartsObjList.length;k++){
      this.echartsObjList[k].resize()
    }
  },
}

mounted() {
  window.addEventListener("resize", this. resizeEcharts);
},

beforeDestroy() {
  window.removeEventListener("resize", this. resizeEcharts);
}

问题2： 切换页面进行缩小时，所有页面生效，但再放大页面发现，置于后台的页面适配出现问题（好像只进行了缩小适配）

方法：在vue激活函数activated中再运行一遍resize函数（vue生命周期里也没提啊，giao）

activated() {
  this.resizeEcharts ()
},

问题3： 因存在侧边栏，resize函数适配结果失常
在这里插入图片描述

方法：渲染echarts早于右边栏变化，对resize函数添加时延，等到侧边栏加载完毕后再让echarts进行自适配（vue的渲染就很迷，各种操作异步进行，貌似加载数据跟渲染页面也是同时进行的，踩过多次）

resizeEcharts (){
  const self = this
  setTimeout(() => {
    for(let k=0;k < self.echartsObjList.length;k++){
      self.echartsObjList[k].resize()
    }
  }, 100)
},