eleUI Tab切换echarts显示问题

案例

其中图表内容

问题

问题：tab切换选项卡，其中一个tab中内容是echarts图表，当切换到echarts页时，可能会出现以下问题

• 内容出现了短暂的空白期，然后图片恢复正常（如果你是通过echarts监控容器ResizeObserver的方式来触发echarts的resize的话，其中短暂的空白是因为这里为了节流使用了300ms延时去注册echarts的resize事件的缘故）
• 宽度显示为100px，手动修改浏览器屏幕宽高图片恢复正常（如果你是通过监听window的resize来触发echarts的resize的话）

原因

这里针对echarts监控容器ResizeObserver触发的echarts重绘操作，针对案例的样式代码（另外一种方式其实原理一样）进行原因说明：

• 默认进入页面时，echarts渲染时，父元素的tab属性display: none，所以此时width: 100%没有继承，宽度被echarts默认设置成了100px
• 如果你的高度也是百分比的话，就会出现空白，因为此时高度被echarts默认设置成了0，此时进入这个页面就会出现一个短暂的空白期，300ms（监听时候就注册了300ms后再重新绘制图片）后恢复图片
• 如果你的高度是固定高度就会出现一个宽度100px，高度固定高度的图片，300ms后恢复图片

解决方案

解决：不显示echarts时销毁选项卡，选中选项卡时重新渲染绘制图表，也就是保证在echarts进行绘制时，父元素不会是none的状态，而是始终都是存在的始终都是我们理想的高度和宽度，这样就可以实现画布容器属性百分比的继承。