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

最新推荐文章于 2024-08-07 23:54:34 发布

听听那晚风

最新推荐文章于 2024-08-07 23:54:34 发布

阅读量1.1w

点赞数 4

分类专栏： echarts vue

本文链接：https://blog.csdn.net/GongWei_/article/details/118709273

版权

vue 同时被 2 个专栏收录

58 篇文章 9 订阅

订阅专栏

echarts

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)
      }
},