项目有一个需求,定时显示隐藏echarts图标,刚开始dom是display:block;图表显示正常。等到dom隐藏再显示的时候图表还是正常,很好没有bug。
可是当我在dom处于display:none隐藏状态时去调整浏览器的可视区域,dom再显示的时候问题就来了,echarts显示不出来了!$-$
报警告Can't get dom width or height
。
- 原因可能是echarts读取不到隐藏dom的高宽。
一般做echarts自适应都会用到 echarts.resize() 。 在可视区域变化时重新调整echarts,这时候如果dom处于隐藏状态,那么echarts在resize时就读取不到节点的宽高,图表就无法显示。
解决办法
在dom变为display:block;
后,再重新赋予节点宽高和加载图表,
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);
- 注意:如果你echarts有用到setInterval来令图表动态化,这时候还需要清除echarts数据的定时器再引入方法,否则setInterval会叠加,数据越来越快。。。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。