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

相关推荐
开维游戏引擎6 分钟前
开维游戏引擎实例:五子棋
javascript·游戏·html·游戏引擎·ai编程
wefly20178 分钟前
告别繁琐配置!m3u8live.cn让 M3U8 链接验证变得如此简单
开发语言·前端·python·django·flask·开发工具
FL162386312911 分钟前
使用html实现超炫登录界面和diango实现同样登录界面
前端·html
Irissgwe13 分钟前
基础I/O
java·linux·前端
简单不容易19 分钟前
【vue hooks】useScreenOrientation-获取屏幕方向并支持低版本系统
javascript·vue.js
巫山老妖20 分钟前
多 Agent 协作实战:我用 3 只龙虾组了个「AI小分队」,效率直接翻倍
java·前端
DyLatte24 分钟前
理性到最后,其实是一场下注
前端·后端·程序员
橘哥哥25 分钟前
vue中读取静态配置文件中内容
前端·javascript·vue.js
废嘉在线抓狂.28 分钟前
简易拆开即用的高性能计时器(C#)
前端·unity·c#
yuguo.im32 分钟前
91 行代码实现一个打飞机游戏(HTML5 Canvas 版)
前端·游戏·html5·打飞机