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

背景介绍

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

处理前

处理后

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

HTML代码

    

        

            

        
        

            

        
    
    

        

            净值增长率
        
        

            净值走势
        
    

js代码

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

总结：

1. 加载页面时将tab标签中2个图表的数据都加载过来。
2. 点击切换时，将第二个要展示的图表ID获得，然后初始化第二个图表，最后调用它的resize()方法。