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

相关推荐
夜白宋7 分钟前
【Redis深入】二、高性能
java·前端·redis
被考核重击7 分钟前
前端高频面试题总结_性能_工程化_网络
前端·网络·性能优化·工程化
夜雪闻竹15 分钟前
sql.js WASM 深度解析
javascript·sql·wasm
nnsix18 分钟前
Unity 自定义包的 package.json 简单写法
java·服务器·前端
书中枫叶25 分钟前
生活缴费充值系统
前端·javascript·经验分享·mongodb·node.js
weixin_4617694027 分钟前
npm 修改镜像源依赖下载缓慢运行报错日志解决
前端·npm·node.js
Soari28 分钟前
Hermes-webui:面向 Hermes Agent 的自托管 Web 控制台
前端·webui·agent ai·自托管ai
一个博客1 小时前
pdf-viewer 实现预览pdf文件
开发语言·javascript·pdf
wuxia21189 小时前
微信小程序单击元素切换元素的显示和隐藏
javascript·微信小程序·setdata