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

相关推荐
用户59440410356几秒前
【完整fx】Vue3 + TS + Leafletjs 打造企业级原神大地图
前端
xcLeigh2 分钟前
Go入门:rune与byte的区别和使用场景
android·javascript·golang
计算机魔术师17 分钟前
AI开源社区迎来最大并购案:Hugging Face以129亿美元估值入局英伟达
前端
mayaairi20 分钟前
JS DOM与事件处理完全指南
服务器·前端·javascript
恋猫de小郭33 分钟前
Firebase 如何让全球 Android 和 Flutter 开发者集体 Build Fail
android·前端·flutter
墨白曦煜34 分钟前
智能体架构范式总结(React、Plan-And-Solve、Reflection)
前端·react.js·前端框架
qq_4260039637 分钟前
多语言新增语种全量测试策略的测试范围
前端·javascript·python·自动化
frjc1 小时前
Node.js 与 npm 极简安装教程
前端·npm·node.js
IMPYLH1 小时前
HTML 的 <main> 元素
前端·html
深念Y1 小时前
微服务抽取路线图:从胖单体到 ARM 集群
前端·arm开发·数据库·后端·微服务·云原生·架构