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

相关推荐
佛系打工仔8 小时前
K线绘制前言
前端
遇见~未来8 小时前
JavaScript数组全解析:从本质到高级技巧
开发语言·前端·javascript
哈__8 小时前
基础入门 React Native 鸿蒙跨平台开发:TabBar 底部导航栏
javascript·react native·react.js
lili-felicity8 小时前
React Native 鸿蒙跨平台开发:Animated 实现鸿蒙端组件的左右滑动动画
javascript·react native·react.js
石像鬼₧魂石8 小时前
80 端口(Web 服务)渗透测试完整总结(含踩坑 + 绕过 + 实战流程)
linux·运维·服务器·前端·网络·阿里云
哈__9 小时前
React Native 鸿蒙跨平台开发:StatusBar 状态栏组件
javascript·react native·react.js
C_心欲无痕9 小时前
nginx - 核心概念
运维·前端·nginx
开开心心_Every9 小时前
安卓做菜APP:家常菜谱详细步骤无广简洁
服务器·前端·python·学习·edge·django·powerpoint
前端_Danny9 小时前
用 ECharts markLine 实现节假日标注
前端·信息可视化·echarts
古城小栈9 小时前
Rust 丰富&好用的 格式化语法
前端·算法·rust