解决Echarts+antV组件Tabs的警告：Can‘t get DOM width or height.

最新推荐文章于 2024-06-03 17:09:30 发布
最新推荐文章于 2024-06-03 17:09:30 发布
阅读量697 收藏
点赞数
分类专栏： 前端 文章标签： echarts javascript ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43521227/article/details/122576018
版权

问题描述

不同标签页下进行切换时，会导致echart图的切换，当切换时标签页中的echart图会缩在一起,如下图所示：
在这里插入图片描述

原因

antV中该组件不能刷新视图重新执行render，也即不会触发echarts图的初始化销毁等阶段，这几个tab中的echarts是同时加载的。

解决

useState声明一个变量a并把它绑定antv的组件Tabs属性activeKey，并且添加onchange方法，方法里setState改变该变量a，触发render触发echarts图的初始化销毁等阶段

LeeTikPaak19
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue3+vite+ts+antv/x6搭建的流程图编辑页面
03-26
同时，还提供了一个拖拽组件栏，用户只需简单拖拽，即可将所需的组件添加到流程图中。 除了节点的编辑，我们还为用户提供了一个属性配置栏。在这个栏目中，用户可以详细配置每个节点的属性，如名称等，使得流程图...
Vue+Antv X6绘制流程图demo
07-05
在Vue项目中使用AntV X6组件库绘制流程图，需要实现以下需求： 需求1：左侧菜单中的模块可以拖拽进入画布中生成对应的流程图模块 需求2：流程图中的节点之间可以进行连线交互 需求3：点击对应的节点后可以进行操作...
解决‘Can‘t get DOM width or height. Please check dom.clientWidth and dom.clientHeight. They should not
奇妙的Bug之旅
11-11 4746
在JavaScript中，当我们试图获取一个元素的宽度或高度时，可能会遇到"Can’t get DOM width or height. Please check dom.clientWidth and dom.clientHeight. They should not be 0."的错误。然后，我们使用document.getElementById方法获取了id为"myElement"的元素，并将其存储在变量element中。在这个示例中，我们在获取元素的宽度后，检查了宽度是否大于0。
Can‘t get DOM width or height. Please check dom.clientWidth and dom.clientHeight. They should not be
一个努力不被优化的程序员
10-27 3037
Can't get DOM width or height. Please check dom.clientWidth and dom.clientHeight. They should not be翻译过来是：无法获得DOM宽度或高度。请检查dom。clientWidth和dom. clienttheight。它们不应该是0。例如，你可能需要在window.onload的回调中调用这个。
vue3实际开发中的bug：MyCharts.vue:41 [ECharts] Can‘t get DOM width or height. Please check dom.clientWidth
最新发布
weixin_48420104的博客
06-03 1070
如果问题依然存在，可能需要进一步检查你的代码和页面结构，或者查看 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. ........
luemeon的博客
06-07 3607
不能找到dom节点的宽高，宽高获取不了导致绘制不出图。
tabs标签页中使用Echarts图表常见警告以及处理方式
qq_39107452的博客
03-03 3416
tabs标签页中使用Echarts图表常见警告以及处理思路问题一：There is a chart instance already initialized on the dom.问题二：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 w
Vue3.x+AntV G6+Element Plus
12-04
一个开箱即用的基于Vue3使用AntV G6绘制图谱的项目，项目中包含两个demo，其一：图谱可以实现自适应窗口大小；其二：图谱自适应DOM元素大小。帮助你更好的理解并在Vue3.x中使用AntV G6库，有助于初学者快速上手
基于Vue2+element-ui+AntV X6实现的流程图编辑器
11-02
基于Vue2+element-ui+AntV X6实现的流程图编辑器，框架核心功能已经搭好，组态化呈现，自定义节点、属性绑定、样式调整等，采用Vuex统一管理各个属性，根据自己需求在此基础上自定义调整修改添加等，最终可导出json...
echarts解决Can't get dom width or height 问题
mocangli的博客
01-07 7124
看网上的大佬说法 是获取不到dom的高宽，跟着写还是没显示成功 贴上大佬的代码： var mainContainer = document.getElementById('main'); //用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽 var resizeMainContainer = function () { mainC...
vue-echarts-tab 控制echarts显隐时 echarts无法获取宽高 Can‘t get dom height or width
wushang1102的博客
12-30 1018
echarts图表显隐时渲染获取不到宽高
echarts警告 Can‘t get DOM width or height. Please check dom.clientWidth and dom.clientHeight. They sho
weixin_41886421的博客
04-28 940
上网查了之后才知道，初始化的时候无法获取 `dom` 的 `clientWidth` 和 `clientHeight`， 新版本支持初始化的时候指定高宽，[http://echarts.baidu.com/api.html#echarts.init](http://echarts.baidu.com/api.html#echarts.init)
Echarts图表不显示（Can‘t get DOM width or height. Please check dom.clientWidth and dom clientHeight）.
无面人的博客
07-05 696
代码没有报错，但echarts图表没有显示出来，并给出警告：Can‘t get DOM width or height. Please check dom.clientWidth and dom clientHeight.
使用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%;” ...
解决vue3+echarts关于无法获取dom宽度和高度的问题
黄钢的博客
08-04 7141
不过还有个问题得说一下，很明显，我用了elementplus作为UI框架，我特别喜欢el-card这个组件，所以很多时候我都用它来做布局，但是我在用的时候，发现我很难掌握它的布局规律，尤其是在结合echarts画图的时候，各种dom相关的问题层出不穷，所以我不得不放弃使用el-card，二是自己用div来做布局。第二个报错是说不能获取到echarts对应dom的宽或高，这个问题一般出现在设置dom节点的宽和高时，用了百分比形式，ECharts的宽高默认是以像素为单位的，并不能直接使用百分比来设置。
高度塌陷的产生原因及解决方法
Mencre的博客
02-23 8989
什么是高度塌陷？ 当父元素未设置高度时，所有子元素浮动后，造成子元素脱离文档流进而无法把父元素撑开，父元素高度为0产生高度塌陷，称为高度塌陷问题。 父元素高度塌陷后，父元素以下的元素都会向上移动，导致布局混乱，所以我们要解决高度塌陷的问题。 如下代码： <div class="box"> <div class="div1">div1</div>...
【记录38】[ECharts] Can‘t get DOM width or height. Please check dom.clientWidth and dom.clientHeight.
~牧马~
03-19 681
就是获取不到dom 的宽高导致无法动态渲染dom实例，实际就一定写过了，但是还是没有获取到，为什么呢？这里说明下，有些伙伴理解“不是需要根据id去css中设定DOM 的宽高”，结果排查了半天是因为一个符号写错，服了，写代码的时候还是得注意点。实际dom已经初始化并加载出来了，点击对应的事件，无法渲染图型。
vue3+vite+ts+antv/x6自定义节点元素案例代码
05-30
:width="node.getSize().width" :height="node.getSize().height" :fill="node.getStyle().fillColor" :stroke="node.getStyle().strokeColor" /> v-else-if="node.data.type === 'circle'" :node="node" ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值