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>