echarts图表与tab页连用时图表不显示问题

有时候图表会放在多个标签页里，那些初始隐藏的标签在初始化图表的时候因为获取不到容器的实际高宽，可能会绘制失败，因此在切换到该标签页时需要手动调用 resize 方法获取正确的高宽并且刷新画布，或者在 opts 中显示指定图表高宽。

 <div class="layui-tab-item layui-show">
   <div class="layui-tab" lay-filter="twoTabs">
        <span>来源：</span>
        <ul class="layui-inline layui-tab-title" style="border-bottom:none !important;">
            <li lay-id="11" class=" selectstate layui-this">1</li>
            <li lay-id="22" class="selectstate ">2</li>
            <li lay-id="33" class="selectstate">3</li>
            <li lay-id="44" class="selectstate">4</li>
        </ul>
        <div class="layui-tab-content content">
            <!-------1的内容-------->
            <div class="layui-tab-item layui-show">
                <div id="all" style="height:400px;"></div>
            </div>
            <!-------2的内容--------------->
            <div class="layui-tab-item ">
                <div id="ipReputation" style="height:400px;"></div>
            </div>
            <!-------3的内容--------------->
            <div class="layui-tab-item">
                <div id="fileReputation" style="height:400px;"></div>
            </div>
            <!-------4的内容--------------->
            <div class="layui-tab-item">
                <div id="test" style="height:400px;"></div>
            </div>
        </div>
    </div>
</div>

图标的配置略

<script>
 var myChart= echarts.init(document.getElementById('all'));
var option = {

    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    legend: {
        top:'bottom',
        data: ['上周', '当前周']

    },
    grid: {
        left: '5%',
        top:'1%',
        // right: '40%',
        bottom: '10%',
        containLabel: true
    },
    xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01]
    },
    yAxis: {
        type: 'category',
        data: ['172.10.10.110','172.10.10.111','172.10.10.112','172.10.10.113','172.10.10.114','172.10.10.115','172.10.10.116','172.10.10.117','172.10.10.118','172.10.10.119']
    },
    series: [
        {
            name: '上周',
            type: 'bar',
            data: [50, 80, 60, 70, 95, 105,120,156,210,56]
        },

        {
            name: '当前周',
            type: 'bar',
            data: [50, 80, 60, 70, 95, 105,120,156,210,56]
        }
    ]
};
myChart.setOption(option);
//其余echarts具体配置就不详写了
//现象就是默认首页显示的图表会正常显示，但一切换到其它页面，除了首页，其他图标都不显示，原因就是获取不到当前父级容器的宽高
//关键一步resize()
 element.on('tab(twoTabs)', function(elem){
            //切换tab页，获取正确的宽高并刷新画布
            myChart.resize();
          
        });
</script>

以上纯属个人见解，如有错误，欢迎指出！