谷歌浏览器切换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

相关推荐
恋猫de小郭18 分钟前
Amper 正式转正 Kotlin Toolchain ,Gradle 未来何去何从
android·前端·flutter
敲代码的彭于晏25 分钟前
Bean 生命周期完全图解:前端同学也能看懂的 Spring 核心机制
java·前端·后端
IT_陈寒31 分钟前
Redis内存飙升的锅,原来是我没搞懂这个过期策略
前端·人工智能·后端
云浪38 分钟前
前端二进制数组完全指南:ArrayBuffer、TypedArray、DataView 一次讲透
前端·javascript
张风捷特烈40 分钟前
Flutter 类库大揭秘#02 | path_provider 各平台实现
前端·flutter
铁皮饭盒1 小时前
26年bunjs, elysia+pg一把梭, redis都省了
前端·javascript·后端
lichenyang45314 小时前
Docker 学习笔记(一):为什么需要镜像、容器和仓库?
前端
kyriewen14 小时前
别再对着 TypeScript 报错发呆了:我把 10 个最常见的红色波浪线翻译成了人话
前端·javascript·typescript
IT_陈寒15 小时前
SpringBoot自动配置的坑,我的API突然就404了
前端·人工智能·后端