vue3:Tabs 标签页中使用echarts报错Can‘t get dom width or height

最新推荐文章于 2023-08-04 14:34:45 发布
最新推荐文章于 2023-08-04 14:34:45 发布
阅读量348 收藏 1
点赞数
文章标签： echarts 前端 javascript vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sdasdadadad/article/details/131895765
版权

事情是这样的，用饿了吗的tab切换图表，发现第一个tab的图表正常显示，第二个压缩了

 

上网查询了很多方法，什么lazy延迟，v-if判断索引都不行.....无语了快

最后解决办法：

 

在父组件里把点击索引传入子组件，然后监听索引变化，进行判断，然后重点利用nextTick,渲染图表，提前找到宽高

 

 

 

hhhhhnnnnnnn
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
消除vue Can‘t get DOM width or height.警告
前端小白到专家的博客
04-06 2572
问题描述 提示：这里描述具体问题：在vue3 开发时出现如下警告 原因分析： 提示：这里填写问题的分析：由于初始化的时候，echart.init函数获取不到隐藏的div宽度和高度。 解决方案： 提示：这里填写该问题的具体解决方案：在echarts初始化之前，显示div标签，也就是在初始化之前显示要展示的echarts的容器。这样就能获取到宽度和高度了。 注： 文档说：如果div是隐藏的，ECharts 可能会获取不到div的高宽导致初始化失败，这时候可以明确指定div的style.width和s
在Vue中使用echarts的方法
08-28
在Vue中使用ECharts的方法 Vue框架是当前最流行的前端框架之一，ECharts是中国最流行的数据可视化工具之一。在实际项目中，我们经常需要将ECharts集成到Vue项目中，以实现数据的可视化展示。因此，本文将详细介绍...
echarts 图不显示（警告：Dom has no width or height）
Bana_的博客
06-12 7023
场景还原： 一个态势页面，有五个部分组成，这五个部分分别是单独的HTML文件，通过母页中的JS动态加载这五个部分的HTML文件到母页中。通用的CSS和JS都在母页中，echars 的展示都在子页中，设置延迟100ms加载echart图形。问题：打开母页页面，echarts 不显示，但偶尔又能显示出来，不显示的时候会有警告Dom has no width or height。 解决方案： ...
echarts解决Can't get dom width or height 问题
mocangli的博客
01-07 7138
看网上的大佬说法 是获取不到dom的高宽，跟着写还是没显示成功 贴上大佬的代码： var mainContainer = document.getElementById('main'); //用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽 var resizeMainContainer = function () { mainC...
echarts 显示不出来，报错为Echart Can't get dom width or height
jack_user_admin的博客
11-20 1276
找了很多的帖子，但是都没有什么用，也是自己不懂。找了好久找到了一个解决方案，下面是完整的代码。 <script type="text/javascript"> $(document).ready(function () { $('#containerTop5').width($('#containerTop5').width()); $('#...
vue echarts cant not get DOM width or height，echart inistance已经存在 的解决方法
q1025387665a的博客
03-23 1878
前言： 这个bug产生在 el-tabs 组件下 切换的 图表展示中。主要是由于多个tab存在图标组件产生了重叠，导致echart在第一时间挂载之后没有监听到dom的宽高。 最为简单的方法。在生成图表的之前加上this.nextTick()，在nextTick回调函数里去执行这个生成图表的方法。 如图所示。 而echart 实例已经存在的解决方法 如下 在生成图表之前先把这个实例注销，同时置为空方便我们的判断。而初始值也是为空。 ...
在Vue中使用echarts的实例代码（3种图）
08-30
"在Vue中使用Echarts的实例代码（3种图）" 本篇文章主要介绍了在Vue中使用Echarts的实例代码，总共展示了三种不同的图表。首先，我们需要了解为什么选择Echarts，而不是D3.js。Echarts是一种基于JavaScript的数据...
解决vue net :ERR_CONNECTION_REFUSED报错问题
10-14
本文将重点讲解如何解决Vue项目中出现的这个报错问题。 首先，我们分析错误产生的原因。在提供的描述中，作者提到是因为频繁更换网络环境，导致需要在`package.json`的`dev`脚本中更改`--host`参数。在开发过程中，...
vue-echarts：Vue.js的Apache ECharts（孵化）组件
02-06
Vue-ECharts Vue.js的Apache ECharts（孵化）组件。基于 v4.1.0 +上并依赖于 v2.2.6 +。安装npm（推荐） $ npm install echarts vue-echartsCDN 在您HTML文件中包括echarts和vue-echarts ，如下所示： < script ...
vue中使用echarts制作圆环图的实例代码
10-18
主要介绍了vue中使用echarts制作圆环图的实例代码，代码简单易懂，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
在vue中使用echarts图表实例代码详解
10-17
在 Vue 中集成 ECharts 图表库是...总结来说，Vue 中使用 ECharts 包括安装、全局或按需引入、初始化图表、设置配置项、更新图表以及销毁图表等步骤。通过这些方法，你可以灵活地在 Vue 应用中实现各种数据可视化需求。
在vue中添加Echarts图表的基本使用教程
08-28
3. **在Vue组件中使用ECharts** 创建一个新的Vue组件，例如`ChartComponent.vue`，并在其中创建一个用于显示图表的`div`元素： ```html <div ref="chart" :style="{width: '100%', height: '300px'}"> ``` ...
在Vue中使用Echarts实例图的方法实例
10-14
主要给大家介绍了关于如何在Vue中使用Echarts实例图的相关资料，文中介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
详解Vue中使用Echarts的两种方式
08-27
Vue中使用Echarts的两种方式详解 Vue.js是当前非常流行的前端框架之一，而Echarts则是非常流行的数据可视化库。合理地使用Echarts可以让我们的数据更加直观、美观。但是，如何在Vue项目中使用Echarts呢？本文将为...
echarts：基本使用
snowball的博客
11-01 4989
调试，好几次调试成功了，但是代码拿到网易BI就不太好使，我相信是我个人的原因；我把相关代码删减到极简状态，然后再次调试，寻找合适的mapjson，最终在网易BI可以展示全国地图了。，普通的开发正常按照步骤调试即可，网易bi有一点错误就会报错，也不能定位到具体的问题；这个小小示例，集成了echarts使用的基本步骤。3、获取 DOM 元素（容器），初始化 Echarts 实例。个人觉得，网易BI开发和在普通浏览器环境开发还是。5、使用配置项和数据渲染图表（渲染到容器中）4、指定图表的配置项和数据。
解决vue3+echarts关于无法获取dom宽度和高度的问题
最新发布
黄钢的博客
08-04 7260
不过还有个问题得说一下，很明显，我用了elementplus作为UI框架，我特别喜欢el-card这个组件，所以很多时候我都用它来做布局，但是我在用的时候，发现我很难掌握它的布局规律，尤其是在结合echarts画图的时候，各种dom相关的问题层出不穷，所以我不得不放弃使用el-card，二是自己用div来做布局。第二个报错是说不能获取到echarts对应dom的宽或高，这个问题一般出现在设置dom节点的宽和高时，用了百分比形式，ECharts的宽高默认是以像素为单位的，并不能直接使用百分比来设置。
前后端分离——element ui问题记录
Beam
10-30 3618
一、菜单路由跳转 要实现路由跳转，先要在el-menu标签上添加router属性。 然后只要在每个el-menu-item标签内的index属性设置一下url即可实现点击el-menu-item实现路由跳转。 当然也可以在每个el-menu-item标签内的router属性设置一下url即可实现点击跳转切优先级较index高。 二、是否只保持一个子菜单的展开配置时报错 配置：<el-...
el-tabs中使用Echarts警告。Can‘t get DOM width or height. Please check dom.clientWidth and dom.clientHeight
weixin_46186176的博客
10-31 3329
使用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.
vue2引入echarts报错Initialize failed: invalid dom.
04-26
这个错误通常是由于echarts实例化时使用了错误的dom节点引起的。你需要确认你引入的echarts版本是否与vue2兼容，并且在实例化echarts时，确保传递的dom节点选择器正确，且对应的dom节点已经被正确渲染。可以尝试在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值