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

相关推荐
风月说与山鬼6 分钟前
三、Tailwind CSS——排版与文字样式
前端·css·tailwind css
eokred19 分钟前
图片预览组件的另一种设计:Headless、可组合、开箱即用
前端·react
南雨北斗25 分钟前
解决web开发中前后端跨域通信(session失效问题)
前端
Y38153266234 分钟前
body-upload-js
前端·javascript·浏览器·深拷贝·数据克隆
Apifox38 分钟前
Apifox 8 月更新|调试、权限与协作体验持续优化
前端·后端·测试
杉氧40 分钟前
React 灵魂:深入剖析 Hooks 与副作用(Side Effects)陷阱
android·前端·react native
Json____43 分钟前
java-宿舍安全卫生检查系统项目源码
java·前端·javascript·课程设计·it学习·wwwoop.com
lichenyang4531 小时前
鸿蒙ArkUI 键盘避让终极踩坑指南:RESIZE 无效、Column 布局遮挡、折叠屏适配全解
前端
AbelTomato1 小时前
博客评论系统搭建回顾
javascript·typescript·cloudflare·supabase·hyperdrive