谷歌浏览器切换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 分钟前
Vue CLI笔记
前端·vue.js·笔记
Csvn22 分钟前
Proxy / Reflect 与响应式原理:完整手写一个 mini Vue3 响应式系统
前端
Easy_API24 分钟前
OpenAI三周内第二次降价,GPT-5.6 Sol砍了20%到33
大数据·前端·人工智能·gpt·深度学习
深念Y25 分钟前
07-SSR水合问题实战排查与修复记录
前端·vue·vite·nuxt·ssr·csr·水合
前端炒粉27 分钟前
容器预热预跳转方案
前端·vue.js·性能优化
小二李30 分钟前
第12章 nestjs服务端开发:RBAC权限系统设计
java·linux·前端
张人玉32 分钟前
基于 Python + PyQt5 的水果目标检测与分割可视化系统——水果深度学习识别可视化大屏
python·深度学习·qt·目标检测·sqlite·echarts
tt一点通37 分钟前
前端常用设计模式大全
前端·vue.js
张文君42 分钟前
ubuntu26.04坏块分区隔离急速版
java·前端·python
ttwuai43 分钟前
Go 后台管理系统组件库文档怎么写,才不会坑后续维护?
开发语言·javascript·golang