谷歌浏览器切换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 分钟前
uniapp map地图导航/地图路线
前端·vue.js·uni-app
mONESY17 分钟前
基于MCP协议搭建全链路智能Agent:地图检索+浏览器自动化+本地文件操控实战
javascript
星栈29 分钟前
LiveView 页面越写越卡,我最后抓到的凶手不是数据库,是我自己乱塞 `assigns`
前端·前端框架·elixir
研☆香1 小时前
闭包实战避坑指南
javascript
没落英雄1 小时前
6. 从零搭建一个 AI Agent —— 构建 Web 前端,让用户能和 agent 实时交互
前端·人工智能·架构
爱勇宝1 小时前
《道德经》第4章,老子写得很像在描述一个“底层系统”。
前端·后端·程序员
你怎么知道我是队长1 小时前
JavaScript 的控制语句介绍
开发语言·javascript·ecmascript
snow@li2 小时前
Java:Java 服务器(Web 容器 / Servlet 容器)完整工作清单
java·服务器·前端
用户44014549314192 小时前
Spring Boot 3.x 异步编程实战:从 @Async 到虚拟线程
javascript