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

相关推荐
天天扭码3 分钟前
一杯咖啡的时间吃透一道算法题——2.两数相加(使用链表)
前端·javascript·算法
Hello.Reader7 分钟前
在 Web 中调试 Rust-Generated WebAssembly
前端·rust·wasm
NetX行者11 分钟前
详解正则表达式中的?:、?= 、 ?! 、?<=、?<!
开发语言·前端·javascript·正则表达式
流云一号12 分钟前
Python实现贪吃蛇三
开发语言·前端·python
liangshanbo121527 分钟前
深入讲解 CSS 选择器权重及实战
前端·css
cg501731 分钟前
Spring Boot 中的自动配置原理
java·前端·数据库
尘寰ya32 分钟前
前端面试-React篇
前端·react.js·面试
vvilkim32 分钟前
React 高级特性与最佳实践
前端·javascript·react.js
拉不动的猪32 分钟前
vue与react中监听的简单对比
前端·javascript·面试
涵信34 分钟前
第七节:React HooksReact 18+新特性-并发模式(Concurrent Mode)解决了什么问题?
前端·javascript·react.js