echatrs可視化圖在隱藏后顯示不出來或是寬度出現問題

    最近在做一個可視化的項目，用了百度的ECharts.js作為可視化的視圖框架，echarts的實例很多，基本能滿足項目的需求，而且文檔也相對完整、清晰，是個很不錯的前端可視化框架。

我們的項目是使用bootstrap+echatrs完成的，前陣子在做可視化頁面時這樣一個問題。就是echarts圖在第一次加載時沒有問題，之后標簽頁切換隱藏，再顯示就看不見了。

這是圖形初始化完畢，沒有任何問題。

之后我點了第二個標簽，第一頁圖形隱藏，第二頁顯示，依舊沒有任何問題。

然后我們再點回第一個便簽頁。

 

 咦？我的圖形呢？

開始我判斷可能是選項卡可能有問題，后來也沒找到選項卡的問題，然后就放着了。

昨天我又遇到一個問題。我想通過一個下拉框控制框內顯示的圖形。於是我正常的寫兩個圖形在同一個框內，然后隱藏一個，等下來選擇后再切換到另外一個，很簡單的需求。

 於是開始是這樣的。

很好，很完美。然后我點擊下拉框，切換到目的IP，然后。。。。

咦？哪里出錯了？又是一臉懵逼。。。。。。。

 

我依舊是找了很久切換的問題，依舊沒找到。

結果今天又遇到一個問題。過程是從一個圖形點擊跳轉到另外一個圖形，第二個圖形是隱藏的echarts圖。結果是這樣的。。

 怎么這么小，寬度為什么沒有自適應？看看源碼。。。

 

 

 怎么是100px?沒有設置過啊？

其實這時候我才突然意識到這三個問題實際都是一個問題造成的。就是echarts圖形在隱藏變為顯示后，無法獲取clientWidth造成的。而最后一個是 parseInt(stl.width, 10)) 將width: 100%;轉為100，所以計算出的圖表寬度為100px。

也就是圖形在顯示時不知道寬度是多少，然后就變成了寬度為0，不顯示。或是寬度出現問題。知道了問題的根源那我就想辦法給他一個寬度就行了。然后就這樣

var container = document.getElementById('concurrenceChart');
var resizeContainer = function () {
    container.style.width = window.innerWidth+'px';
    container.style.height = window.innerHeight+'px';
};
resizeContainer();
            
var myChart = echarts.init(container);

 

之后問題就解決了。

還有一種方法可以解決這個問題，就是在切換之后再調用一下char.resize()方法，重新設置一下再生成圖形。

/*切換*/
$("#sourceOrgoal").change(function(){
    console.log($(this).val());
    var val = $(this).val();
    if(val ==="goal"){
    $("#statistics_gIP").show();
    $("#statistics_DIP").hide();
    GTrafficChart.resize();//關鍵步驟
    GTrafficChart.setOption(GTrafficOption,true);
    }else{
        $("#statistics_gIP").hide();
    $("#statistics_DIP").show();
    }
});

 

當然，這可能還有更好的解決的方法，歡迎留言交流。如果對問題還有更深層次的理解，歡迎留言探討！！