Echarts图表不显示（Can‘t get DOM width or height. Please check dom.clientWidth and dom clientHeight）.

最新推荐文章于 2025-01-23 16:20:52 发布
原创 最新推荐文章于 2025-01-23 16:20:52 发布 · 1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#echarts #javascript #前端

当Echarts图表在无错误情况下仍无法显示时，可能是因为其容器没有设置宽度和高度。警告提示强调了需要检查并设定图表容器的clientWidth和clientHeight。为图表的div元素添加CSS样式，如`height:100%;width:100%;`，可以确保图表正常显示。

前言

在代码没有报错的情况下，echarts图表没有显示出来，并给出警告：

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

在这里插入图片描述

解决

  • 该警告的意思是：echarts图表显示区域没有获取到父级盒子的宽度或高度，故图形无法显示出来。
  • 因此，我们在显示echarts图表的盒子处设置宽高即可正常显示图表。
<div class="charts" id="charts" style="height:100%;width:100%;"></div>

在这里插入图片描述

Can‘t get DOM width or height. Please check dom.clientWidth and dom.clientHe
JavaBigData的博客
11-16 747
增加宽高
【记录38】[ECharts] Can‘t get DOM width or height. Please check dom.clientWidth and dom.clientHeight.
~牧马~
03-19 1326
就是获取不到dom 的宽高导致无法动态渲染dom实例，实际就一定写过了，但是还是没有获取到，为什么呢？这里说明下，有些伙伴理解“不是需要根据id去css中设定DOM 的宽高”，结果排查了半天是因为一个符号写错，服了，写代码的时候还是得注意点。实际dom已经初始化并加载出来了，点击对应的事件，无法渲染图型。
vue3实际开发中的bug：MyCharts.vue:41 [ECharts] Can‘t get DOM width or height. Please check dom.clientWidth
weixin_48420104的博客
06-03 1886
如果问题依然存在，可能需要进一步检查你的代码和页面结构，或者查看 ECharts 的文档和社区寻求帮助。：如果你的页面布局可能会变化，导致 DOM 元素尺寸变化，可以在 ECharts 初始化后，监听窗口的。：确保你的 CSS 没有错误，并且已经为包含 ECharts 的 DOM 元素设置了正确的宽度和高度。：如果你的页面或者 ECharts 库是异步加载的，确保在加载完成后再初始化 ECharts。：ECharts 需要在初始化图表之前，DOM 元素就已经存在于页面上，并且具有确定的尺寸。
控制台报错：[ECharts] Can‘t get DOM width or height. Please check dom.clientWidth and dom.clientHeight.
qq_58441775的博客
06-06 6076
表示获取图表容器的宽度和高度时出现了问题。ECharts 无法正确获取到容器的尺寸，可能是因为容器元素的 clientWidth 和 clientHeight 值为 0。
echarts图表显示 Can‘t get DOM width or height. Please check dom.clientWidth and dom.clientHeight.
热门推荐
weixin_48912846的博客
04-24 2万+
首先出了问题 我进行了百度 但是百度上大部分的方法并不适用于我。 例如： $(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
最新发布
11-15
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” 错误，...
e-charts报错： Can‘t get DOM width or height. Please check dom.clientWidth and dom.c
11-10
Please check dom.clientWidth and dom.clientHeight. They should not be 0.”通常是由于容器的高度或宽度设置不正确导致的。解决方法如下： 1. 确保容器的高度和宽度都是以像素为单位的，而不是百分比。 2. 确保...
echarts报错： Can‘t get DOM width or height. Please check dom.clientWidth and dom.c
GongWei_的博客
07-13 1万+
具体报错：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报表这个分页。 报错
vue使用echarts报错：Can‘t get DOM width or height. Please check dom.clientWidth and dom.clientHeight
见证自己学习,成长的记录
01-23 1万+
[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
m0_67393295的博客
03-08 784
首先出了问题 我进行了百度 但是百度上大部分的方法并不适用于我。 例如： $(window).on('resize',function(){ //屏幕大小自适应，重置容器高宽 resizeMainContainer(); mainChart.resize(); }); 且出错的原因也可能为：如果容器的height/width属性设置为百分比的形式，那么echarts就会warning，且不能正常的生成图表。所以div容器的高度宽度必须指定为px。 然后我开始回归问题，去官网找解决
echarts警告：Can‘t get DOM width or height. Please check dom.clientWidth and dom.clientHeight. ........
luemeon的博客
06-07 4864
不能找到dom节点的宽高，宽高获取不了导致绘制不出图。
【echarts】Can‘t get DOM width or height. Please check dom.clientWidth and dom.clientHeight.
i18039072267的博客
02-21 3297
无法获取DOM的宽度或高度。请检查dom clientWidth 和 dom clientHeight。2.用setTimeout()延时，等待渲染后再画图.一般来说用第一种方法就可以解决了。1.为chart设置宽高。
echarts警告 Can‘t get DOM width or height. Please check dom.clientWidth and dom.clientHeight. They sho
weixin_41886421的博客
04-28 1342
上网查了之后才知道，初始化的时候无法获取 `dom` 的 `clientWidth` 和 `clientHeight`， 新版本支持初始化的时候指定高宽，[http://echarts.baidu.com/api.html#echarts.init](http://echarts.baidu.com/api.html#echarts.init)
el-tabs中使用Echarts警告。Can‘t get DOM width or height. Please check dom.clientWidth and dom.clientHeight
weixin_46186176的博客
10-31 4034
使用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. They
wangheng0221的博客
05-01 1万+
使用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.，提示获取不到宽高 。解决办法是加 style=“height:100%;width:100%;” ...
实习小收获：Can‘t get DOM width or height. Please check dom.clientWidth and dom.clientHeight.
weixin_48451943的博客
11-11 1406
报错内容：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的图表，所有格式均进行了检查，运行之后效果却无法显示。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值