大屏Echarts界面却换后改变浏览器视口宽度后再次返回Echarts界面，Echarts消失问题

Echarts消失原因：

 

1.在Vue3中使用onMounted() 这个生命周期中获取数据，并且渲染 Echarts 图表。

我们为每个echarts都加上了resize()属性开启自适应窗口大小的功能。

 

2.项目中使用 keep-alive 缓存路由避免出现多次重复渲染。

当一个组件实例从 DOM 上移除但因为被 <KeepAlive> 缓存而仍作为组件树的一部分时，它将变为不活跃状态而不是被卸载。当一个组件实例作为缓存树的一部分插入到 DOM 中时，它将重新被激活。

keep-alive 自带 两个生命周期函数 onActivated() 进入界面 onDeactivated() 离开界面

3.在这个时候，当界面切换后再次回来，界面的Echarts图表就会消失，而且控制台会一直报错。

 

之前为了实现echarts的自适应，添加了一个监听器resize()监测window窗口 ，如果窗口变化了就会改变一下ECharts的大小，并且将这个方法习惯性地写在了生成echarts的方法中，但是，我们加入keep-alive缓存后情况就有点不一样了，我们绘制Echarts的方法是写在onMounted生命周期中的，而切换页面并会不会进入onUnmounted生命周期，而是进入onDeactivated生命周期中，这使得onMounted中的函数还是激活状态，这时候Echarts中的监听器resize()还在工作当中，但是之前缓存的dom界面已经没了，虽然没了但是也监听到dom变化了，所以就想去重画一下自家的echarts，但是这时候没有dom，所以控制台就疯狂报错。

然后，当你切换回已缓存的页面时，bug就来了。echarts消失了。

然后你再改变一下宽口大小，echarts又回来了。。。

这是因为你之前你改变dom的时候，Echarts重画失败了，可是你切回来的时候，dom虽然相对于你切出去之前可能变了，但是对于监听器来说，他只关注于当前dom大小是否改变了。所以刚切回来的时候echarts的resize()方法不会被激活。

而只要稍稍改变一下dom的大小，就可以激活resize方法。

解决方案：

1. 

    

把Echarts定义为全局变量

2.

 

特别注意，监听dom的监听器如果要拿出来单独写一个函数，必须要添加在onMounted中才能使用，放在onActivated中就失效了。

接着，就可以在onActivated()生命周期中单独给一个resize方法，不管他窗口大小是否变化了，都resize一次。

还有一个场景，当页面左侧菜单支持展开收缩的时候，右侧页面的上的 Echarts 图表并不会进行自适应缩放。原因也很简单，当时组件内做的监听是浏览器窗口大小发生变化时，可以触发 Echarts 自带的 resize 方法，但是当菜单收缩展开时，浏览器大小没有变化，自然也就触发不了 resize 方法。

解决方案：

1. 引入 element-resize-detector插件

：一个用于检测HTML 元素 尺寸 变化 的JavaScript库。 它可以帮助你在 元素 的尺寸发生 变化 时执行某些操作。 它使用了一些技巧来检测尺寸 变化 ，包括使用滚动条和 监听resize 事件。