谷歌浏览器切换tab栏时页面释放内存导致echarts不显示问题

  • 在初始化echarts时添加下述监听
vue 复制代码
// 添加事件监听器
      document.addEventListener("visibilitychange", this.handleVisibilityChange);

handleVisibilityChange() {
      if (document.visibilityState === 'visible') {
        // 页面处于活动状态,手动触发图表的更新或重新绘制的代码

        this.chart.resize(); // 如果是 echarts 图表,可以使用 resize() 方法重新绘制
      }
    },
  • 在销毁echarts时移除监听

    // 在需要移除事件监听器的时候调用下面这行代码
    document.removeEventListener("visibilitychange", this.handleVisibilityChange);

具体查看vue 封装echarts

相关推荐
国科安芯20 小时前
航天电子模拟前端三大支柱:精密运放、高速运放与电压监控的协同设计方法——ASL8522S/ASL622S/ASL706S技术解析
前端·单片机·嵌入式硬件·fpga开发·架构·安全性测试
牧濑红莉21 小时前
网络安全竞赛pwn全解及第一道ai的wp
javascript·.net
神明不懂浪漫21 小时前
【第四章】CSS(二)——文本外观属性与复合选择器
前端·css·经验分享·笔记
kyriewen21 小时前
别再用AI debug了——这5种bug越修越烂
前端·javascript·ai编程
星释1 天前
鸿蒙智能体开发实战:39.鸿蒙壁纸大师 - 前端卡片显示与交互优化
前端·华为·交互·harmonyos·鸿蒙·火山引擎
顾昂_1 天前
内存泄漏排查和 Chrome DevTools 使用教程
前端·javascript·面试
IT_陈寒1 天前
Java线程池这个坑我算是踩明白了
前端·人工智能·后端
An_s1 天前
rust开发wasm与浏览器(js)交互
javascript·rust·wasm
山河木马1 天前
GPU自动处理专题4-填充覆盖区域(光栅化)
javascript·webgl·计算机图形学
悦儿遥遥雨11 天前
PXE + Kickstart 无人值守批量部署系统
linux·javascript·nginx