处理点击tab标签时Echarts图片显示不全的问题

Posted 2023-03-27

参考技术A

项目中经常会用到使用图表来展示数据的方式，作为国内的开发者，我们会优先选择使用Echarts图表，一般情况下我们都是在页面上展示一个图表；但是最近在项目中遇到一个需要 点击切换tab标签来显示Echarts图表 ，当然了这样也是能做的，那我们可以采用异步加载的方式来进行显示，但是呢，在我目前的项目中采用这种异步加载的方式特别麻烦，所以只能选择采用在加载页面的时候，就将2个tab标签页的数据都显示出来，tab标签页的第一个Echarts图表显示正常，点击切换tab页面时第二个页面显示不正常，各种搜索之后得到解决办法： 需要将第二个图表resize操作，因为第二个图表中style=“display：none的”，默认是没有宽度和高度的 ，下面先展示处理前的图表和处理后的图表。

既然找到了处理的办法，那接下来就是如何实现它。

当然需要在开始的地方引入Echarts插件。