前端--echarts--使用tab时 echarts图表无法正常加载（无法正常显示）

已于 2024-08-01 13:44:19 修改
阅读量1.6k 收藏 3
点赞数 1
分类专栏： C#&SQL&前端后台等等 文章标签： 前端 echarts javascript
于 2020-02-14 17:19:49 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/VIP_CR/article/details/104313689
版权
本文介绍了在前端项目中遇到的一个问题，即使用Echarts时，当图表位于隐藏的Tab页中，由于初始宽度未设置或设置不当，导致图表无法正常显示。分析了问题的原因在于隐藏图表的div没有正确宽度。解决方案是在所有图表加载前，根据已显示图表的宽度设置隐藏图表的宽度，确保其能够正常渲染。文章提供了相关的HTML和JS代码片段作为示例。
摘要由CSDN通过智能技术生成
项目里图表高度设置了固定的360px。
从网上查的好多结果，都说是因为 第二个tab的宽度 没有设置 或者设置为0或者 设置的值很小，导致的第二个tab里的图表无法显示出来。

项目中使用到了Echarts来在展示图表，两个tab切换页面中都存在图表，页面加载完成后

对所有图表进行了初始化和绘制，然后切换查看时，发现图表的宽度不正确.，第一个tab显示是很正常的，但是第二个tab中内容显示不出来。

第一个tab ：图表1 （当前负荷）
第二个tab ：图表2 （当前电量）

原因：因为页面加载时， 第二个tab ：图表2 （当前电量）因为是隐藏图表所以没有给 设置具体的宽度，所以不能显示，而第一个tab ：图表1 （当前负荷）有具体的宽度，所以可以正常显示，，，，，，，，，，，，，，，，，，，&

了解本专栏 订阅专栏 解锁全文 超级会员免费看
百小容是程序员
关注
专栏目录
订阅专栏
vue项目tab切换echart图表切换宽度缩小和图表内容不正确解决
Miss_hhl的博客
01-19 1622
代码： 布局： <TabButton :btnValue1="'总数'" :btnValue2="'明细'" @watchFlag="handler"></TabButton> <div class="it_content"> <div class="picture" id="work" ref="work" v-show="flag===false...
Vue第3篇，在Vue项目中，点击切换tab栏时Echarts图表缩小在一起，宽高只有100px，解决方法（echarts图表缩小在一起，echarts图表大小随窗口变动而自适应，无需刷新）
weixin_65793170的博客
10-31 4636
ECharts（Enterprise Charts）是百度开发的一款基于 JavaScript 的开源可视化图表库，用于在 Web 页面中创建各种丰富多彩的交互式图表和数据可视化界面。这里来记录一下，在使用ECharts时，拖拽页面后，ECharts缩小的问题
vue项目奖tab切换echarts图表大小不正常
前端攻城狮的博客
09-28 1258
这是tab切换的两张图片，第一个tab是正常的，第二个就出问题了，代码是一毛一样 原因：在页面进行加载时，隐藏的图表找不到对应的div大小，所以默认给了一个大小。而这个默认宽度很小，所以导致echarts图表显示不完全。 解决方法：我用的是vue，一开始切换用的是v-show，可以换成v-if，大家都应该知道区别了，这里不再过多赘述 此法若不合适请自行百度其他方法 ...
tab选项卡切换时echarts无法正常加载显示问题的解决方案
、蹄码笑春风的博客
09-06 1378
主 要问题重现： 带表格式儿可拖动的图表还是第一次整：下面的代码应该能帮到你们吧 var myChart; // 员工效益 var _myChartemployfits = function () { if (myChart != null && myChart != "" && myChart != undefined) { myChart.dispose(); } myChart = echarts.init(doc.
Echarts避坑指南
最新发布
weixin_66549669的博客
08-09 265
查看控制台报错如下：Cannot read properties of null (reading 'getAttribute')按照echarts官网最简单的示例一模一样地设置好了echarts图，但是整个页面都加载不出来，一片空白。钩子被调用之前还没有完成渲染过程，此时 DOM 中可能还没有包含该元素。这个错误信息表明在执行 JavaScript 代码时遇到了一个。获取该元素以及图表初始化代码放入onMounted()钩子中！打印该DOM元素，结果为null。对象读取属性或方法。1、给该元素设置宽高。
vue中使用Tab切换echart图表宽度大小变小，关于echart图表的resize复原问题
yy_onway的博客
04-09 3180
问题描述： 项目需求使用elementUI中的Tab切换，两个el-tab-pane分别涉及echart组件，第一个tab-pane里面的echart显示正常，当点击第二个tab-pane以后，第二个tab-pane里面的echart图表大小发生变化，显示不正常，宽高出现问题。 这是第一个tab-pane,显示正常。 此处为第二个tab-pane显示的echart图表，明显不正常 解决办法（比较...
vue工程中element-ui的tab组件使用ecahrts渲染界面大小异常问题解决（亲测有效）。
happy81997的博客
11-29 1039
vue工程中element-ui的tab组件使用ecahrts渲染界面大小异常，一般就是高度或者宽度不正常。主要原因还是echarts渲染时候，DOM还没渲染好。 解决思路： 1、获取包装所有tab页面的DIV的宽度和高度，因为这个再tab切换渲染前肯定已经固定存在了。 2、给echarts的DOM强制赋值第1步的宽度和高度即可 document.getElementById('pidichartDiv').style.height= document.getElementById("tjDi
vue使用echarts切换tab出现图表被压缩，宽度变窄问题
Hoodps的专栏
09-17 7813
在做项目的时候，遇到图表在切换试图的时候，发现图表会被压缩起来了， 在tabs切换中有echarts的话，我们会发现初始化的那个echarts是有宽度的，当点击tabs切换之后，切换过来的echarts只剩下100px的宽度。 这是因为渲染的时机不对，我们需要在点击到当前切换的时候在echarts父级加载完毕之后在执行echarts，而不是在页面初始化的时候就把所有tabs里面的echart...
echarts-for-react——react项目中使用echarts
qq_40678503的博客
11-07 3358
最近有在做的项目需要在react中使用echarts。 安装 npm install --save echarts-for-react npm install --save echarts 然后导入echarts.js模块 引入全部的 import ReactEcharts from "echarts-for-react"; 减少包的大小也可以按需引入 import echarts from ...
【微信小程序】解决Echarts在微信小程序tab切换时的显示问题
欢迎来到C-Homes
11-30 1575
在小程序开发时遇到了一个小问题，首先在两个tab页面中都有用到Echarts图表，在页面加载完成时，但是第一个tab页面完成了绘制，另外一个tab页面为空白 解决方法:第二个tab页的图表中加上一个条件，只有当currentTab为2时也就是只有在切换到当前页面时该页面的图表才会加载 <view wx.if="{{currentTab==2}}"> <ec-canvas canvas-id="mychart-bar" ec="{{ecSales}}"></ec-canvas&
vue2+echarts渲染实时数据图像 通过el-tab切换
qq_43016941的博客
06-17 1591
vue2+echarts渲染实时数据图像 通过el-tab切换。解决el-tab切换图表变窄，echarts自适应宽高，页面渲染时机问题。
一.tab切换的时候，echarts显示不完整的问题
aiiit的博客
12-04 2666
一.tab切换的时候，echarts显示不完整的问题 通过切换头部tab，控制主体内容的显示与隐藏。如下图所示，图标除了第一个tab分页，其他分页的图表没有占满一行，蜷缩在页面左边。 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-frgKM3Ui-1638624897975)(D:\home\笔记\工作相关\图片\tab切换echarts显示不全.png)] Echarts展示一张图表时，承载其的html容器一定要设置好宽度，所以想着是不是页面结构问题，Echarts图表容器
用v-show切换两张echarts图 第二张图大小显示不正确
DorisTK的博客
03-15 971
问题： 解决办法： 由于我的每个echarts是单个组件，所以在引用它的父组件中，向子组件传一个切换按钮的字段 // 父组件中--chartType是切换按钮的字段: chartType:total(总数)/tendency(趋势图) <div> <first-echarts :chart-type='chartType'/> <second-echarts :echart-type='chartType' /> </div> // 子组件中--
解决Echarts+el-tab-pane，获取不到DOM宽高，导致echarts无法加载的问题
LeeNN的博客
08-17 753
项目场景：在el-tabs的el-tab-pane中加载echarts图图表，会出现警告并且无法正常加载图表。
Vue解决echart在element的tab切换图表宽度
qq_32615575的博客
05-08 722
原因：在页面进行加载时，隐藏的图表找不到对应的div大小，所以默认给了一个大小。所以要做的就是在页面加载时，就对图表进行初始化 原理：利用v-if属性,当切换至对应的tab时，设置其v-if的值为true即可，同时设置默认显示的tab <el-tabs type="border-card" v-model="echarts_tabItem"> <el-tab-pane label="SH" name="SH"> ...
vue中在tabs选项卡切换时echarts图表宽度由100%变为100px
风如也的博客
11-10 1381
使用场景：在tab 选项卡中使用了 echart 图表，然后在页面切换时，echarts 图表的宽度由原来的 100% 变为 100px 问题原因：echarts 渲染时 tab 选项卡 的 display 属性为 none，所以 width 属性为 100% 就没有可继承项，被 echarts 自带的方法切割成 100px 解决办法：使用 this.$nextTick <ul class="tabbar"> <li><a href="javascript:void(0)
vue中有table切换时echart图不显示或者显示不合适的情况
deciduous_leaves的博客
03-16 743
问题说明：问题是这样，echart图在第一页，初次进入显示正常，但是切换到第二页，再点回第一页，图就不显示，或者是第一页的图出现在了其他页 解决：v-if换成v-show 详细说明：其实问题很简单，就是学习基础的时候经常见到的v-if和v-show的区别 v-if:元素不存在，用于不频繁的切换 v-show:元素存在，只是通过display属性将其隐藏，用于频繁的切换 可能也会有人说v-...
vue中切换tab时echart不显示或显示不正常
weixin_45654230的博客
02-21 2236
项目中在不同的tab中都使用了echart，但是在切换tab的时候发现第二个tab没有正常显示，通过排查代码和网上查阅才发现是因为element是通过display来控制tab的显示的，没有点击tab2的时候第二个echart图表的容器是。，解决思路：在渲染图表1的时候获取宽度，然后给图表2的宽度赋值，切换tab的时候设置$nextTick在下一次DOM更新的时候使用resize()函数重新渲染图表2。关键代码如下：（完整代码在最后）
node-red 动态显示echarts
01-26
在Node-RED中，可以使用自定义节点和Echarts库来实现动态显示Echarts图表。下面是一个示例： 1. 首先，确保已经安装了Node-RED和Echarts库。 2. 在Node-RED中创建一个新的流程。 3. 添加一个Inject节点，用于定时发送数据到Echarts节点。 4. 添加一个Function节点，用于生成随机数据。 5. 添加一个Echarts节点，用于显示动态图表。 6. 连接这些节点，并配置它们的属性。 7. 在Inject节点中设置定时发送数据的间隔。 8. 在Function节点中编写代码生成随机数据，例如： ```javascript msg.payload = Math.random() * 100; // 生成0到100之间的随机数 return msg; ``` 9. 在Echarts节点中配置图表的类型和数据源。 10. 运行流程，即可看到动态显示的Echarts图表。 下面是一个示例流程的代码： ```json [{"id":"d8e8e3a7.3e3f48","type":"inject","z":"f3e8e3a7.3e3f48","name":"","topic":"","payload":"","payloadType":"date","repeat":"1","crontab":"","once":false,"onceDelay":0.1,"x":150,"y":160,"wires":[["b8e8e3a7.3e3f48"]]},{"id":"b8e8e3a7.3e3f48","type":"function","z":"f3e8e3a7.3e3f48","name":"","func":"msg.payload = Math.random() * 100;\nreturn msg;","outputs":1,"noerr":0,"x":330,"y":160,"wires":[["c8e8e3a7.3e3f48"]]},{"id":"c8e8e3a7.3e3f48","type":"ui_chart","z":"f3e8e3a7.3e3f48","name":"","group":"d8e8e3a7.3e3f48","order":0,"width":0,"height":0,"label":"chart","chartType":"line","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","dot":false,"ymin":"","ymax":"","removeOlder":1,"removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"useOldStyle":false,"x":510,"y":160,"wires":[[]]},{"id":"d8e8e3a7.3e3f48","type":"ui_group","z":"","name":"Default","tab":"d8e8e3a7.3e3f48","order":1,"disp":true,"width":"6","collapse":false},{"id":"d8e8e3a7.3e3f48","type":"ui_tab","z":"","name":"Home","icon":"dashboard","order":1}] ```
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值