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

相关推荐
xuankuxiaoyao2 分钟前
VUE.JS实践--事件对象和计算属性
javascript·vue.js·ecmascript
前端老石人2 分钟前
表单与交互式元素
前端·css·html
果粒蹬i5 分钟前
自用超半年的免费 OCR 工具分享:告别付费,本地搭建更安心
前端·网络·ocr
朝阳58110 分钟前
M3U8 下载助手油猴脚本 - 完全使用指南
前端·javascript·windows
早點睡39010 分钟前
ReactNative项目OpenHarmony三方库集成实战:react-native-sensors(设备传感器)
javascript·react native·react.js
kadog11 分钟前
GraphX:基于 WebGL 区间算术的 GPU 加速隐函数绘图器
前端·javascript·数学建模·webgl
utmhikari11 分钟前
【DIY小记】解决MacOS上Edge浏览器bilibili全屏卡顿的问题
前端·macos·性能优化·edge·bilibili
上单带刀不带妹12 分钟前
UniApp 页面跳转完全指南:5 种路由方式详解与实战对比
前端·javascript·vue.js·uni-app·跨端开发
大阿明15 分钟前
Node.js npm 安装过程中 EBUSY 错误的分析与解决方案
前端·npm·node.js
Cxiaomu15 分钟前
Web 项目的开发/生产环境请求接口配置治理实战
前端·react.js·typescript