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

相关推荐
Mintopia几秒前
别再乱加缓存:一套判断"该不该缓存"的方法
前端
AnalogElectronic1 分钟前
html+js+css实现七龙珠神龙召唤特效
javascript·css·html
Leisureconfused2 分钟前
【记录】Node版本兼容性问题及解决
前端·vue.js·npm·node.js
Highcharts.js3 分钟前
React 应用中的图表选择:Highcharts vs Apache ECharts 深度对比
前端·javascript·react.js·echarts·highcharts·可视化图表·企业级图表
腹黑天蝎座3 分钟前
如何实现自定义的虚拟列表
前端·react.js
用户350144817927 分钟前
继承和原型链:js如何实现继承
前端
Bernard02159 分钟前
给普通人的 AI 黑话翻译手册:一文看懂 LLM、RAG、Agent 到底是什么
前端·后端
恋猫de小郭9 分钟前
JetBrains Amper 0.10 ,期待它未来替代 Gradle
android·前端·flutter
胖纳特11 分钟前
Seafile 文件预览增强方案:集成 BaseMetas Fileview 突破格式限制
前端·后端