谷歌浏览器切换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 分钟前
如何修复 ECharts 鼠标交互(如 hover、点击)位置错位的问题
计算机外设·echarts·交互
OEC小胖胖11 分钟前
04|从 Lane 位图到 `getNextLanes`:React 更新优先级与纠缠(Entangle)模型
前端·react.js·前端框架
愤怒的可乐11 分钟前
从零构建大模型智能体:ReAct 智能体实战
前端·react.js·前端框架
BlackWolfSky12 分钟前
React中文网课程笔记4—常用工具配置
前端·笔记·react.js
IT_陈寒12 分钟前
Python 3.12 新特性实战:5个让你的代码效率提升30%的技巧
前端·人工智能·后端
Ycocol13 分钟前
Flutter项目运行在浏览器无法访问
前端·flutter
weixin_5841214316 分钟前
vue3+elementui+js自定义穿梭框布局
javascript·vue.js·elementui
巾帼前端17 分钟前
前端框架 React 的虚拟 DOM是如何在这一层层抽象中定位自己位置的?
前端·react.js·前端框架
JeffDingAI17 分钟前
【CANN训练营】体验基于Caffe ResNet-50网络实现图片分类实践操作
前端·分类·caffe
郑州光合科技余经理22 分钟前
从国内到海外:同城o2o本地生活服务平台国际化实战
java·开发语言·javascript·mysql·uni-app·php·生活