Layui 切換tab頁，echarts顯示問題

1、

layui在tab切換時是利用tab下的div顯示和隱藏來實現的，而echarts在你頁面刷新的時候就渲染出來了，

而第二個tab已經隱藏了，導致echarts自動獲取dom的寬高無效，所以使用的是echarts默認的高寬，通過監聽tab切換事件然后執行resize進行echarts的重新 

html 代碼：

<div class="layui-tab" lay-filter="test">


</div>

js 代碼

//引入 element

layui.use(['element'], function () {

　　element = layui.element;

　　//監聽Tab切換，以改變地址hash值
　　element.on('tab(test)', function(data){
    　　if (data.index == 0) {
　　　　　　　//圖表重新渲染 　　 myChart_edu.resize(); 　　} 　　if (data.index == 1) { 　　myChart_dep.resize(); 　　} 　　});

}

 

//Echarts圖表不顯示,  沒有設置好 寬高

<div id="chart-sex" style="width:700px; height:500px" ></div>