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

相关推荐
我的div丢了肿么办2 分钟前
vue使用h函数封装dialog组件,以命令的形式使用dialog组件
前端·javascript·vue.js
UIUV3 分钟前
Git 提交规范与全栈AI驱动开发实战:从基础到高级应用
前端·javascript·后端
NEXT064 分钟前
那个写 width: 33.33% 的前端,终于被 flex: 1 拯救了
前端·css
NEXT065 分钟前
前端即导演:用纯 CSS3 原力复刻《星球大战》经典开场
前端·css
lili-felicity32 分钟前
React Native for Harmony:登录页“记住密码+深色模式适配”完整实现
javascript·react native·react.js
摘星编程37 分钟前
Flutter for OpenHarmony 实战:CustomScrollView 自定义滚动视图详解
android·javascript·flutter
xiaomin-Michael37 分钟前
websocket学习
javascript
xiaomin-Michael38 分钟前
JS setTimeout
javascript
confiself41 分钟前
前端代码渲染截图方案
前端