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

最新推荐文章于 2026-04-17 04:24:56 发布

原创最新推荐文章于 2026-04-17 04:24:56 发布 · 1.5w 阅读

本内容遵循CC 4.0 BY-SA版权协议

本文记录了在使用Echarts进行屏幕适配时遇到的三个问题及其解决方法。问题包括：页面缩放时曲线不自适应、页面切换后的缩放适配异常、侧边栏影响下的适配失效。解决方案涉及在Vue的方法和生命周期钩子中调用resize函数，以及添加延迟处理来确保正确的适配效果。

开发板推荐：天空星STM32F407VET6开发板

超高性价比 STM32主控 | 超高主频 | 一板兼容百芯 | 比赛神器 | 沉金彩色丝印

点击查看

前言

因为要做屏幕适配，用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)
},