vue项目奖tab切换echarts图表大小不正常

最新推荐文章于 2024-02-21 17:16:07 发布
最新推荐文章于 2024-02-21 17:16:07 发布
阅读量1.3k 收藏
点赞数
分类专栏： 百度地图+echarts 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_40589472/article/details/108845933
版权
本文介绍了一个关于Vue项目中使用ECharts在Tab切换时图表显示不完整的问题及其解决方案。原因是隐藏的图表在加载时未能正确获取div大小，默认采用小尺寸导致显示不全。解决方案为将v-show替换为v-if。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

这是tab切换的两张图片，第一个tab是正常的，第二个就出问题了，代码是一毛一样

在这里插入图片描述
在这里插入图片描述
原因：在页面进行加载时，隐藏的图表找不到对应的div大小，所以默认给了一个大小。而这个默认宽度很小，所以导致echarts图表显示不完全。

解决方法：我用的是vue，一开始切换用的是v-show，可以换成v-if，大家都应该知道区别了，这里不再过多赘述
此法若不合适请自行百度其他方法

问题记录--vue-tab切换时Echarts不能正常展示
King Saj
06-17 1708
vue-tab切换时Echarts不能正常展示
vue项目tab切换echart图表切换宽度缩小和图表内容不正确解决
Miss_hhl的博客
01-19 1700
代码： 布局： <TabButton :btnValue1="'总数'" :btnValue2="'明细'" @watchFlag="handler"></TabButton> <div class="it_content"> <div class="picture" id="work" ref="work" v-show="flag===false...
Echarts图标无法显示问题解决
qq_34422681的博客
09-23 3306
本人前端菜鸟，想要使用Echarts进行饼状图绘制，但是按照教程上的方法进行操作之后一直无法显示出饼状图（前端页面上一片空白，没有任何显示）。
tab选项卡切换时echarts无法正常加载显示问题的解决方案
、蹄码笑春风的博客
09-06 1469
主 要问题重现： 带表格式儿可拖动的图表还是第一次整：下面的代码应该能帮到你们吧 var myChart; // 员工效益 var _myChartemployfits = function () { if (myChart != null && myChart != "" && myChart != undefined) { myChart.dispose(); } myChart = echarts.init(doc.
Vue 3 ，ECharts 1 ，在Vue项目中，点击切换tab栏时Echarts图表缩小在一起，宽高只有100px（echarts图表缩小在一起，echarts图表大小随窗口变动而自适应）
weixin_65793170的博客
10-31 5374
⭐ECharts（Enterprise Charts）是百度开发的一款基于 JavaScript 的开源可视化图表库，用于在 Web 页面中，创建各种丰富多彩的交互式图表和数据可视化界面。这里来分享记录，在使用 ECharts 时，拖拽页面后，ECharts缩小的问题。
vue中切换tab时echart不显示或显示不正常
最新发布
weixin_45654230的博客
02-21 2696
项目中在不同的tab中都使用了echart，但是在切换tab的时候发现第二个tab没有正常显示，通过排查代码和网上查阅才发现是因为element是通过display来控制tab的显示的，没有点击tab2的时候第二个echart图表的容器是。，解决思路：在渲染图表1的时候获取宽度，然后给图表2的宽度赋值，切换tab的时候设置$nextTick在下一次DOM更新的时候使用resize()函数重新渲染图表2。关键代码如下：（完整代码在最后）
Vue中echarts加载不出问题
热门推荐
weixin_44080648的博客
10-10 1万+
Vue中echarts加载不出问题 最近刚接触echarts，做了些基础的图表，也踩了好几个坑。总结一下echarts图加载出不来可能有以下两方面的问题（目前遇到的）： 1.没有给charts图设置宽高！ 2.项目中echarts的id重复 如果init图表时，使用document.getElementById的方式获取元素的id，此时charts图的id一定不能重复！跨页面不重复！否则可能会出现charts图不显示的问题！！ 较好的init方法是，采用ref的方式，而不要用原生的document.getE
vue使用echarts出现tab切换echarts宽度变窄问题
sunlizhen的专栏
11-27 2994
在tabs切换中有echarts的话，我们会发现初始化的那个echarts是有宽度的，当点击tabs切换之后，切换过来的echarts只剩下100px的宽度。 这是因为渲染的时机不对，我们需要在点击到当前切换的时候在echarts父级加载完毕之后在执行echarts，而不是在页面初始化的时候就把所有tabs里面的echarts都执行。 因为echarts会根据父级给宽度，而在初始化页面的时候其他tabs切换是display：none；没有宽度，所以会发生以上问题 解决方法 第一种方法是我在网上找到的自己
vue tab切换,解决echartst图表宽度只有100px的问题
12-28
解决思路：直接将图表的宽高写死，根据实际代码进行改写，提供一个思路 1.将图表放进一个div里面 <div class=echarts> <div id=myChart xss=removed></div> 2.定义一个方法，并在mounted视图更新的时候执行 ...
Vue解决echart在element的tab切换时显示不正确问题
01-19
最近在项目中遇到了这种情况，需要在tab控件上渲染多个echart图标，然后切换查看时，发现图表的宽度不正确 原因：在页面进行加载时，隐藏的图表找不到对应的div大小，所以默认给了一个大小。所以要做的就是在页面...
vue工程中element-ui的tab组件使用ecahrts渲染界面大小异常问题解决（亲测有效）。
happy81997的博客
11-29 1109
vue工程中element-ui的tab组件使用ecahrts渲染界面大小异常，一般就是高度或者宽度不正常。主要原因还是echarts渲染时候，DOM还没渲染好。 解决思路： 1、获取包装所有tab页面的DIV的宽度和高度，因为这个再tab切换渲染前肯定已经固定存在了。 2、给echarts的DOM强制赋值第1步的宽度和高度即可 document.getElementById('pidichartDiv').style.height= document.getElementById("tjDi
vue中使用Tab切换echart图表宽度大小变小，关于echart图表的resize复原问题
yy_onway的博客
04-09 3266
问题描述： 项目需求使用elementUI中的Tab切换，两个el-tab-pane分别涉及echart组件，第一个tab-pane里面的echart显示正常，当点击第二个tab-pane以后，第二个tab-pane里面的echart图表大小发生变化，显示不正常，宽高出现问题。 这是第一个tab-pane,显示正常。 此处为第二个tab-pane显示的echart图表，明显不正常 解决办法（比较...
echarts在各种奇怪的镶套中不加载可能能成功的解决方式
zxx744的博客
04-03 296
(“这里放单个页面用来定位的class或id”).hasClass(“.active”)){这个是我自己，bootstrap5 放跑马灯（carousel）（轮播）里的时候用到的。先这样，有bug但是bug不大，因为在跑马的时候class是动了两次，所以会运行两次。如果正常可以加载只是在奇怪的div中加载不出来，可以试一下。这个是我问chatgpt老久了，结合他的答案自己试出来的。可以放进各种判断里，
Echarts使用本地JSON文件加载不出图表的解决方法以及Jquery访问本地JSON文件跨域的解决方法
爱吃雪糕的小布丁的博客
05-11 4431
最近需要做一个大屏展示，需要用原生html5+css+js来写，所以去学了一下echarts的使用。在使用的过程中难免碰到许多BUG，百度那是必不可少的，可是这些人写的牛头不对马嘴，简直是标题党一大堆，令我作呕，现将我认为比较重要的两个问题记录如下。
解决Echarts+el-tab-pane，获取不到DOM宽高，导致echarts无法加载的问题
LeeNN的博客
08-17 934
项目场景：在el-tabs的el-tab-pane中加载echarts图图表，会出现警告并且无法正常加载图表。
vue中在tabs选项卡切换时echarts图表宽度由100%变为100px
风如也的博客
11-10 1439
使用场景：在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使用echarts切换tab出现图表被压缩，宽度变窄问题
Hoodps的专栏
09-17 8334
在做项目的时候，遇到图表在切换试图的时候，发现图表会被压缩起来了， 在tabs切换中有echarts的话，我们会发现初始化的那个echarts是有宽度的，当点击tabs切换之后，切换过来的echarts只剩下100px的宽度。 这是因为渲染的时机不对，我们需要在点击到当前切换的时候在echarts父级加载完毕之后在执行echarts，而不是在页面初始化的时候就把所有tabs里面的echart...
vue中有table切换时echart图不显示或者显示不合适的情况
deciduous_leaves的博客
03-16 791
问题说明：问题是这样，echart图在第一页，初次进入显示正常，但是切换到第二页，再点回第一页，图就不显示，或者是第一页的图出现在了其他页 解决：v-if换成v-show 详细说明：其实问题很简单，就是学习基础的时候经常见到的v-if和v-show的区别 v-if:元素不存在，用于不频繁的切换 v-show:元素存在，只是通过display属性将其隐藏，用于频繁的切换 可能也会有人说v-...
echart vue 图表大小_vue使用echarts切换tab出现图表被压缩，宽度变窄问题
weixin_39744230的博客
01-12 1250
在作项目的时候，遇到图表在切换试图的时候，发现图表会被压缩起来了，javascript 在tabs切换中有echarts的话，咱们会发现初始化的那个echarts是有宽度的，当点击tabs切换以后，切换过来的echarts只剩下100px的宽度。这是由于渲染的时机不对，咱们须要在点击到当前切换的时候在echarts父级加载完毕以后在执行echarts，而不是在页面初始化的时候就把全部tabs里面的...
Vue项目中的echarts图表数据化与tabbar交互设计
资源摘要信息:"该压缩包文件名为tabbar.rar，包含了实现echarts图表数据化展示与电商页面中tabbar切换功能的项目。从描述中可以得知，该项目采用了Vue框架，并结合了echarts库来实现数据的可视化。echarts是一个使用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值