Echarts实战案例代码(31)：模态框弹出层无法正常显示echarts图表的解决方案

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

HTML代码

性别占比分析


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

隐藏层

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

划分重点

这个弹出的Echats容器必须设置width和height。

相关链接

1. Echarts实战案例代码(31)：模态框弹出层无法正常显示echarts图表的解决方案
2. tab选项卡切换时echarts无法正常加载显示问题的解决方案
3. Echarts实战案例代码(32)：layer弹出框展现echarts不显示的问题

Done！