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

相关推荐
冴羽yayujs8 分钟前
JavaScript 9 个先有库再有 API 的故事
开发语言·javascript·ecmascript
油丶酸萝卜别吃26 分钟前
JavaScript 深度合并函数 deepMerge 实现指南(附完整测试用例)
开发语言·javascript·测试用例
问心无愧051327 分钟前
ctf show web 入门152
前端·笔记
kyriewen28 分钟前
Copilot下个月按Token收钱,我算了一笔账:重度用户一年要多花3000块
前端·javascript·openai
还有多久拿退休金1 小时前
dnd-kit 碰撞检测算法:你的订单为什么自己"跑"到了 1 号?
前端
qq_316837751 小时前
npm run tauri build Downloading下载超时
前端·npm·node.js
w_t_y_y1 小时前
VUE3(二)VUE2和VUE3区别
前端·javascript·vue.js
T-shmily1 小时前
使用svg图标
前端·css
阿明在折腾1 小时前
在浏览器里实现 PDF 合并与拆分:pdf-lib 实战指南
前端·javascript
米高梅狮子1 小时前
03.OpenStack使用
linux·前端·云原生·容器·架构·kubernetes·openstack