tab切换echarts无法正常显示

tab切换时候，第一个图正常显示，第二个及之后的图无法正常显示。
问题是这样的，用了两个tab切换，每个tab里面加载一个echarts图表，div的大小是百分比设置的，结果第一个echarts可以正常显示出来，第二个echarts被严重压缩了。
查看了一下网页布局，发现div是有大小的，但是里面加载的echarts宽高都是0，这可能就是echarts显示过小的原因。
有以下三个解决办法：

将div的宽高设置成固定值，比如style=”width:500px;height:500px”，这时候echarts有了明确的大小时候就可以正常显示出来了。（不过这个方法还是不好，固定值的高宽无法自适应网页大小啊）
在点击第二个tab的时候获取父div的宽和高，将具体的宽和高赋值给echarts，如何在这个方法里面初始化echarts，而不要再加载网页的时候就初始化。

具体的代码如下：

<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>

chartresize()方法如下：

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

初始化echarts的方法如下：

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

这样每次在点击第二个tab的时候就会重新加载下chart2了，就不会出现chart过小的问题。
3、设置tab切换时候加载时间
代码如下：

$("a[data-toogle='tab']").on("shown.bs.tab",function(e){
    var activeTab=$(e.target)[0].hash;
    if(activeTab == "#tab1"){
        window.onresize();
    }
    if(activeTab == "#tab2"){
        window.onresize();
    }
}

echarts的初始化跟正常的方式一样，不过记得将tab-content中的echarts高宽设为100%。

tab切换echarts无法正常显示

猜你喜欢