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

原创

漏刻有时 2021-07-30 16:24:53 博主文章分类：echarts ©著作权

文章标签 弹出层 ico 解决方案模态框 css 文章分类 JavaScript 前端开发

©著作权归作者所有：来自51CTO博客作者漏刻有时的原创作品，请联系作者获取转载授权，否则将追究法律责任

案例总结：目前遇见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');
});