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

相关推荐
陈_杨几秒前
鸿蒙APP开发-带你走近分构App的分子数据
前端·javascript
Goodbye2 分钟前
深入理解 JavaScript 变量提升(Hoisting)—— 从现象到原理
javascript
橘子星3 分钟前
从零上手!Node.js 快速搭建生成式 AI 后端项目|密钥安全 + 完整可运行代码
前端·后端
陈_杨3 分钟前
鸿蒙APP开发-带你开发锻艺册APP的材料清单功能
前端·javascript
xixixin_5 分钟前
Promise.all 和 Promise.allSettled 详解
前端·javascript·vue.js
暗冰ཏོ6 分钟前
前端数据大屏开发完整指南:Vue3 + ECharts 自适应可视化实战
前端·javascript·echarts·数据大屏·大屏端
陈_杨8 分钟前
鸿蒙APP开发-带你了解单块酷APP参数管理的功能
前端·javascript
moMo9 分钟前
# 从重置样式到 BEM 命名:写一个微信的按钮
前端·css
2301_8156453811 分钟前
saas 一面
前端·面经
无风听海15 分钟前
OAuth 2.0 Scope 的使用与设计规划
前端