echarts报错: Can‘t get DOM width or height. Please check dom.clientWidth and dom.c

17 篇文章 4 订阅
本文介绍了在使用Echarts绘制柱状图时遇到的问题,即由于DOM节点未加载完成导致无法获取宽度和高度,从而无法正确绘制图表。通过在切换tab时使用setTimeout延迟执行图表绘制函数,成功解决了这个问题。分析了问题出现的原因,并提供了具体的解决方案,强调了确保DOM加载完毕后再进行图表渲染的重要性。
摘要由CSDN通过智能技术生成

具体报错:echarts.js?a670:2220 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.
在这里插入图片描述
出现问题的场景:我是在tab分页中需要插入echarts柱形图,默认开始是设备oee报表这个分页。
在这里插入图片描述
报错的大致意思就是:不能找到dom节点的宽高。
宽高获取不了导致绘制不出图形或者说绘制出来的尺寸不是自己想要的。
根据这个分析出原因:在dom节点还没加载出来的时候就进行了图形的绘制。
问题找到就好办了,竟然是因为图形提前绘制,那让图形在dom节点加载完再绘制不就好了。
具体操作
加个延时器就好了。

//设备oee报表、设备oee明细的tab切换
changeTab(tab, event) {
      if (tab.index == "0") {
        this.getData();
      } else if (tab.index == "1") {
        setTimeout(()=>{
          this.deviceBar()//这个是绘制图形的函数
        },500)
      }
},

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

评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值