echarts警告:Can‘t get DOM width or height. Please check dom.clientWidth and dom.clientHeight. ........

具体警告:Can't get DOM width or height. Please check dom.clientWidth and dom.clientHeight. They should not be 0.For example, you may need to call this in the callback of window.onload

 出现问题:切换tabs初始化不同的echarts,显示不出来

报错的大致意思就是:不能找到dom节点的宽高,宽高获取不了导致绘制不出图

问题原因:在dom节点还没加载出来的时候就进行了图形的绘制

问题找到就好办了,竟然是因为图形提前绘制,那让图形在dom节点加载完再绘制不就好了

具体操作:切换tabs页面触发事件时加个延时器加载echarts就好了

 handleClick(tab,event){
        if(tab.name=='Exception'){
          setTimeout(()=>{
            this.ExceptionGroupBy(); //初始化品质异常单饼图
          },100)
        }
        if(tab.name=='Guest'){
          setTimeout(()=>{
            this.GuestGroupBy(); //初始化客户投诉单饼图
          },100)

        }
}

可能也有其他原因导致这个问题的出现,我这只是我遇到的情况 

  • 2
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
/****************************** 周旭 DIV弹出层 ******************************/ var cTime; function OpenDivLayer(tag) { var divBackground = document.getElementById('divBackground'); var divShow = document.getElementById('divShow'); var Position = getPosition(); divBackground.style.display='block'; divShow.style.display='block'; //背景层 /* 在火狐这样写不行。 divBackground.style.width = document.documentElement.clientWidth; //层的宽度 divBackground.style.height = document.documentElement.clientHeight; //层的高度 divBackground.style.position = "absolute"; divBackground.style.zIndex = "9998"; divBackground.style.left = "0"; divBackground.style.top = "0"; divBackground.style.right = "0"; divBackground.style.filter = "alpha(opacity=60)"; //设置背景透明 divBackground.style.opacity = "0.80"; divBackground.style.color= "#213140"; divBackground.style.backgroundColor = "#7a7a7a"; divBackground.style.textAlign = "center"; */ //显示层 divShow.style.zIndex = "9999"; divShow.style.position = "absolute"; divShow.style.top=(Position.top+85) +"px"; divShow.style.left="34%";//(Position.left+510) +"px"; divShow.style.padding = "0px"; divShow.style.backgroundColor="#FFFFFF"; divShow.style.border="1px solid #ff6600"; divShow.style.textAlign = "right"; window.onscroll = function () { var Position = getPosition(); divBackground.style.top = Position.top +"px"; divBackground.style.left = Position.left +"px"; divShow.style.top = (Position.top+85) +"px"; divShow.style.left = "34%";//(Position.left+510) +"px"; }; if(tag == '1') { cTime=3; TimeClose(); } if(tag == '2') { document.getElementById('Send').style.display='block'; document.getElementById('Move').style.display='none'; } if(tag == '3') { document.getElementById('Send').style.display='none'; document.getElementById('Move').style.display='block'; } //return false; } function CloseDivLayer() { document.getElementById('divBackground').style.display='none'; document.getElementById('divShow').style.display='none'; //return false; } function getPosition() { var top = document.documentElement.scrollTop; var left = document.documentElement.scrollLeft; var height = document.documentElement.clientHeight; var width = document.documentElement.clientWidth; return {top:top,left:left,height:height,width:width}; } //让背景渐渐变暗 function showBackground(obj,endInt) { var al=parseFloat(obj.style.opacity); al+=0.01; obj.style.opacity=al; if(al<(endInt/100)) {setTimeout(function(){showBackground(obj,endInt)},5);} } function TimeClose() { if(cTime>=0)//判断秒数如果为0 { document.getElementById("ShowMag").innerHTML="<br/><br/><img src='../image/p100720/loading.gif'><br/><br/><br/><FONT size=30>"+cTime+"</FONT>";//显示倒计时时间 //document.getElementById("ShowMag").innerHTML="<br/><br/><object id=\"obj1\" classid=\"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000\" width=\"240px\" height=\"200px\" codebase=\"http://active.macromedia.com/flash4/cabs/wflash.cab#version=4,0,0,0\"><param name=\"src\" value=\"../image/p100720/loading.gif\" /><param name=\"PLAY\" value=\"true\" /><param name=\"LOOP\" value=\"true\" /><param name=\"QUALITY\" value=\"high\" /></object><br/><br/><br/><FONT size=30>"+cTime+"</FONT>";//显示倒计时时间 cTime--;//减少秒数 window.setTimeout('TimeClose()',1000);//让程序每秒重复执行当前函数。 } else { document.getElementById("ShowMag").style.display='none'; document.getElementById("divWinInfo").style.display='block'; } }

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值