案例总结：目前遇见echarts不正常显示的特殊情况两种：TAB按钮切换不显示和弹出层不显示。究其原因，都是在echarts无法获取容器的高度和宽度导致的，且此时的高度和宽度不能是百分比，绝对值时会显示正常。
HTML代码
<div class="ctitle">性别占比分析 <span class="laybg new1"><i class="icon2"></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。
相关链接
Echarts实战案例代码(31)：模态框弹出层无法正常显示echarts图表的解决方案
tab选项卡切换时echarts无法正常加载显示问题的解决方案
Echarts实战案例代码(32)：layer弹出框展现echarts不显示的问题
Done！
