vue使用echarts报错：Can‘t get DOM width or height. Please check dom.clientWidth and dom.clientHeight

最新推荐文章于 2025-04-10 11:32:19 发布

水星国王

最新推荐文章于 2025-04-10 11:32:19 发布

阅读量1w

点赞数 1

分类专栏： Vue 文章标签： vue.js echarts javascript

本文链接：https://blog.youkuaiyun.com/weixin_46713508/article/details/145325431

版权

Vue 专栏收录该内容

85 篇文章

订阅专栏

问题描述

使用vue整合echarts的时候报错：

log.js:59  [ECharts] 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.

在这里插入图片描述

分析问题

从控制台警告可以发现，是说没有给容器制定宽高，从而导致无法获取DOM的宽度或高度

解决办法1 (推荐)

给容器写css样式，制定宽高

在这里插入图片描述

解决办法2

使用定时器，用setTimeout()延时，等待渲染后再画图.

结尾

推荐使用方式1，简单方便，再次查看界面解决问题

在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

水星国王

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

消除vue Can‘t get DOM width or height.警告

前端小白到专家的博客

04-06

3130

问题描述提示：这里描述具体问题：在vue3 开发时出现如下警告原因分析：提示：这里填写问题的分析：由于初始化的时候，echart.init函数获取不到隐藏的div宽度和高度。解决方案：提示：这里填写该问题的具体解决方案：在echarts初始化之前，显示div标签，也就是在初始化之前显示要展示的echarts的容器。这样就能获取到宽度和高度了。注：文档说：如果div是隐藏的，ECharts 可能会获取不到div的高宽导致初始化失败，这时候可以明确指定div的style.width和s

解决Echarts+＜el-tab-pane＞的警告：Can‘t get DOM width or height

氷泠

01-05

1417

1 问题描述环境： Chrome 87 Element-Plus Vue3.0.5 <el-tab>+<el-tab-pane>中使用Echarts 警告如下： 2 代码 <el-tabs type="border-card"> <el-tab-pane label="xxx"> <div id="main" style="width: 500px;height: 500px;"> </div> </el-ta

参与评论您还未登录，请先登录后发表或查看评论

【记录38】[ECharts] Can‘t get DOM width or height. Please check dom.clientWidth and dom.clientHeight.

~牧马~

03-19

1199

就是获取不到dom 的宽高导致无法动态渲染dom实例，实际就一定写过了，但是还是没有获取到，为什么呢？这里说明下，有些伙伴理解“不是需要根据id去css中设定DOM 的宽高”，结果排查了半天是因为一个符号写错，服了，写代码的时候还是得注意点。实际dom已经初始化并加载出来了，点击对应的事件，无法渲染图型。

Vue2 el-tab-pane [ECharts]:Can‘t get DOM width or height.报警

weixin_41274504的博客

04-10

189

使用Tabs 标签页多个el-tab-pane时，Echarts报错：[ECharts] 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.

【echarts】Can‘t get DOM width or height. Please check dom.clientWidth and dom.clientHeight.

i18039072267的博客

02-21

3180

无法获取DOM的宽度或高度。请检查dom clientWidth 和 dom clientHeight。2.用setTimeout()延时，等待渲染后再画图.一般来说用第一种方法就可以解决了。1.为chart设置宽高。

控制台报错：[ECharts] Can‘t get DOM width or height. Please check dom.clientWidth and dom.clientHeight.

qq_58441775的博客

06-06

5281

表示获取图表容器的宽度和高度时出现了问题。ECharts 无法正确获取到容器的尺寸，可能是因为容器元素的 clientWidth 和 clientHeight 值为 0。

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

luemeon的博客

06-07

4596

不能找到dom节点的宽高，宽高获取不了导致绘制不出图。

echarts图表显示 Can‘t get DOM width or height. Please check dom.clientWidth and dom.clientHeight

m0_67401228的博客

03-03

1万+

首先出了问题我进行了百度但是百度上大部分的方法并不适用于我。例如： $(window).on('resize',function(){ //屏幕大小自适应，重置容器高宽 resizeMainContainer(); mainChart.resize(); }); 且出错的原因也可能为：如果容器的height/width属性设置为百分比的形式，那么echarts就会warning，且不能正常的生成图表。所以div容器的高度宽度必须指定为px。然后我开始回归问题，去官网找解决

log.js:59 [ECharts] 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. outputLog @ log.js:59 log.js:59 [ECharts] 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. outputLog @ log.js:59 log.js:59 [ECharts] 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. outputLog @ log.js:59 log.js:59 [ECharts] 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. outputLog @ log.js:59

05-03

当使用 ECharts 初始化图表时，可能会遇到 `dom.clientWidth` 和 `dom.clientHeight` 均为 0 的情况。这通常是由于初始化时机不当引起的，即在 DOM 尚未完全加载完毕之前就尝试初始化图表[^1]。 #### 问题分析 ...

echarts.js:9192 [ECharts] 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.