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