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();
    }
});

 

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