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

相关推荐
秦歌6664 分钟前
Agent Skills详解
服务器·前端·数据库
ljt27249606614 分钟前
Vue笔记(四)--组件基础
前端·vue.js·笔记
哈撒Ki5 分钟前
快速入门WebSocket
前端·websocket
张元清6 分钟前
React 里不用 setTimeout 的计时器写法:useTimeout、useInterval、useCountDown 和 useRafFn
前端·javascript·面试
李白的天不白7 分钟前
HMR模块热替换
前端
2601_958492557 分钟前
A Technical Log: Hosting Gravity Dunk - HTML5 Casual game
前端·html·html5
. . . . .8 分钟前
css module
前端·css
天渺工作室8 分钟前
把一篇老文章内容 Vibecoding 成了 npm 包
前端·vue.js·npm
南城雨落10 分钟前
uni-app开发经验分享-跨端开发经验总结
javascript·vue.js·node.js
Despupilles12 分钟前
一、vue前端项目搭建
前端