案例
其中图表内容
问题
问题：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的状态，而是始终都是存在的始终都是我们理想的高度和宽度，这样就可以实现画布容器属性百分比的继承。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/232974.html原文链接：https://javaforall.net
