项目有一个需求,定时显示隐藏echarts图标,刚开始dom是display:block;图表显示正常。等到dom隐藏再显示的时候图表仍是正常,很好没有bug。
但是当我在dom处于display:none隐藏状态时去调整浏览器的可视区域,dom再显示的时候问题就来了,echarts显示不出来了!$-$
报警告Can't get dom width or height
。浏览器
通常作echarts自适应都会用到 echarts.resize() 。 在可视区域变化时从新调整echarts,这时候若是dom处于隐藏状态,那么echarts在resize时就读取不到节点的宽高,图表就没法显示。echarts
在dom变为display:block;
后,再从新赋予节点宽高和加载图表,dom
function setpageSize(){ //取节点宽高 //加载图表 } var _swiper_3d; _swiper_3d = window.setInterval(function () { var map_swiper = document.querySelector(".map_swiper"); var map_3d_content = document.querySelector(".map_3d_content"); if (map_swiper.style.display == 'none') { map_3d_content.style.display = 'none'; map_swiper.style.display = 'block'; setpageSize();// }else if(map_swiper.style.display == 'block') { map_swiper.style.display = 'none'; map_3d_content.style.display = 'block'; } },7000);