切換tab頁時，tab頁中的echart變形問題

本文爲博主原創，未經容許，不得轉載：

在兩個tab頁中，分別展示了兩個echart圖表，一樣的格式與寫法，但只有在默認選中的tab頁中的圖表顯示的是正常的，

但進入另外一個tab頁中時，圖表則產生了變形的問題，以下圖所示：

在網上查了不少，有各類方法，嘗試以後也並無改變變形的問題，

        終極緣由是在頁面進行加載時，隱藏的圖表找不到對應的div大小，因此默認給了一個大小。因此要作的就是在頁面加載時，

就對圖表進行初始化。

      用到的方法以下：

<ul id="myTab" class="nav nav-tabs">
    <li class="active">
        <a href="#chart1" data-toggle="tab">tab1</a>
    </li>
    <li>
        <a href="#chart2" data-toggle="tab" onclick="javascript:chartresize()">tab2</a>
    </li>
    <div class="tab-content">
        <div class="tab-pane fade in active" id="chart1" style="width=100%;height=100%"></div>
        <div class="tab-pane fade" id="chart2"></div>
    </div>
</ul>




function chartresize(){
    console.log("chartresize");
    var temp = new initchart();
    temp.resize();
}


var initchart = function(){
    var chart2 = echarts.init(document.getElementById('chart2'));
    var chart2_option={
        series: [
            {
                type: 'pie',
                radius: '55%',
                center: ['50%', '50%'],
                data:[
                    {value:10, name: 'pie1'},
                    {value:20, name: 'pie2'},
                    {value:10, name: 'pie3'},
                ]
            }
        ]
    }
    chart2.setOption(chart2_option);
    $(function(){
        window.onresize = function(){
            chart2.resize();
        }
    })
    this.resize = function size(){
        var chart2div=document.getElementById('chart2');
        var tabcontent = document.getElementById('tab-content');
        width=tabcontent.offsetWidth;
        height=tabcontent.offsetHeight;
        chart2div.style.width=width+'px';
        chart2div.style.height=height+'px';
        chart2.resize(width,height);
    }
}

 修改以後的效果圖爲：