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

相关推荐
不可能片场12 分钟前
工程实践 一个缓存把选片从十分钟压到一分钟
前端·electron
前端小万14 分钟前
探索副业五个月,最终以放弃告终
前端·后端·面试
FRing0320 分钟前
JavaScript入门到精通二十四(正则表达式、元字符、修饰符)
开发语言·前端·javascript·正则表达式
葡萄城技术团队1 小时前
在 SpreadJS 里新增右键菜单,把业务动作放到用户手边
前端
大明二代1 小时前
从 RAG 到有记忆的 Agent:Mastra Memory 与 PostgreSQL 实战
前端·javascript·人工智能
deli0071 小时前
代码截图一键出 PNG 实测:3 种窗口风格,长行超 95 字符会被裁
前端
大哥43091 小时前
慢 ≠ 挂:AI 搜索降级判定的设计,与一次 reasoning 模型排查复盘
前端
UaoN1 小时前
作为全栈开发者,为什么看到 Shopify 回归原生,我依然选择 React Native
前端·后端
PBitW2 小时前
行内编辑,前端如何兜底?😭😭😭
前端·面试
小羊没烦恼!2 小时前
C#综合揭秘——Entity Framework 并发处理详解
java·开发语言·前端·javascript·数据库·mysql·c#