案例总结：目前遇见echarts不正常显示的特殊情况两种：TAB按钮切换不显示和弹出层不显示。究其原因，都是在echarts无法获取容器的高度和宽度导致的，且此时的高度和宽度不能是百分比，绝对值时会显示正常。

HTML代码

<div class="ctitle">性别占比分析
<span class="laybg new1"><i class="icon2">&#xe6b4;</i></span>
<div id="gender"></div>
</div>

网页内在id="gender"的容器内显示正常的图表，同时在class="laybg new1"的单击事件后，弹出放大效果的echarts.

隐藏层

<div class="filterbg"></div>
<div class="popup" id="popup1">
    <a href="javascript:;" class="popupClose"></a>
    <div id="gender2" style="width:750px;height:500px;"></div>
</div>

CSS代码

/*弹窗信息*/
.filterbg {
    width: 100%;
    height: 100%;
    background: rgba(6, 2, 53, .4);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 998;
    display: none;
}

.popup {
    width: 0;
    height: 0;
    background: rgba(6, 2, 53, .9);
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 999999;
    border-radius: 15px;
    display: none;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.popup .popupClose {
    display: block;
    width: 30px;
    height: 30px;
    background: url('../images/s_ico3.png') 100% 100%;
    position: absolute;
    top: -22px;
    right: -22px;
    display: none;
    transition: 0.3s;
}
.popup .popupClose:hover {
    transform: rotate(180deg);
}

jquery代码

//弹出层模态框;
$('.new1').on('click', function () {
    $('.filterbg').show();
    $('#popup1').show();
    $('#popup1').animate({height: '550'}, 200, function () {
        $('#popup1').animate({width: '45%'}, 200);
    });
    $('.popupClose').css('display', 'block');
});

划分重点​​<div id="gender2" style="width:750px;height:500px;"></div>​​​这个弹出的Echats容器必须设置​​width​​​和​​height​​。

Done！