echarts图表隐藏之后再展示出现变形

问题描述：在使用echarts的过程中需要不同Tab页下展示不同的图标，如有Tab1，Tab2，在点击Tab2的时候，Tab1下的图表隐藏（我使用的是jQuery的hide和show方法），Tab1再点击展示的时候发现原来的图标变形了（准确的说是缩小了很多导致变形），上网搜索了很多方法，综合起来找到一个比较适合我需求的 ，最终解决了这个问题

做法：在完成echarts配置后，添加 $(window).resize(myChart.resize);这一句，这一句的意思是在dom发生变化的时候调用echarts的resize方法，重新设置大小，如：

var option4 = {//里面是echarts的配置}
myChart4.setOption(option4);
$(window).resize(myChart4.resize);

然后在调用show的地方触发添加的这个方法的触发语句$(window).trigger(‘resize’)，(或者改为： $(window).resize()总之只要是resize的触发都可以)如下：

//prov就是tab页的id名，不重要
$("#prov").click(function () {
        $("#groupShow").hide();
        $("#provshow").show();
        //添加的就是下面这条resize的触发语句
        $(window).trigger('resize');
    })

经过测试，确实解决了我的问题

原理分析：echarts图表在隐藏的时候大小可能缩小到0，然后再展开的时候没有自适应大小，如果在echarts配置的时候就传进去固定的宽高值也能解决这个问题，但是图表就不能根据页面大小自适应大小了，因此我们需要一个重新设置大小且自适应大小的方案，网上还有一种方法是更改窗口变换的时间来解决这个问题，使用的是$(window).onresize()这个函数，思路是在tab页触发的时候调用$(window).onresize()然后写一个延时触发函数，在dom大小变化完成之后再触发后续操作，还有一种思路是将echars的初始化操作放到展示点击函数的触发函数中，但是我在实现这两个方法的时候出现了问题，最终选择使用现在的这种方法。

转自于：https://blog.csdn.net/M_amazing/article/details/98614762