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

相关推荐
zzzzzz31024 分钟前
别急着把页面做成舞台:从 react-bits 看动画组件该怎么选
javascript·react.js·开源
ly76898 小时前
HTML5 从入门到工程实践:语义化、表单、多媒体、性能与项目规范详解
前端·html·html5
人民广场吃泡面12 小时前
前端该重视的编程思想
前端
冬夜戏雪12 小时前
agent的trace 和eval
开发语言·前端·javascript
IT_陈寒12 小时前
Redis的DEL命令居然没删干净数据?这个坑我爬了半天
前端·人工智能·后端
kyriewen12 小时前
面试官让我现场用 AI 改一个真实 bug——他打断我的 3 个理由
前端·面试·ai编程
计算机魔术师13 小时前
斯坦福研究:AI 对入门级岗位冲击最大
前端
感谢一路走过的人13 小时前
AGGrid刷新数据后执行筛选
javascript·ag-grid