Element组件库中的Tabs组件在切换时会导致ECHARTS被压缩在角落

最新推荐文章于 2023-05-09 10:23:26 发布
最新推荐文章于 2023-05-09 10:23:26 发布
阅读量562 收藏 2
点赞数 1
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Fabbom/article/details/105345201
版权

Element组件库中的Tabs组件在切换时会导致ECHARTS被压缩在角落

问题：
在这里插入图片描述
原因是因为，tabs组件在你进入这个标签卡时已经渲染好了，但是canvas是默认大小，所以就导致了这个问题。

解决方法：只要让tabs组件在你进入这个标签卡再渲染就可以了
刚好tabs组件也为我们提供了这个方法
在这里插入图片描述
我们可以使用懒加载的方式达到我们的目的
代码：
在这里插入图片描述
页面：
在这里插入图片描述

小笨蛋和小戏精
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Vue解决echart在element的tab切换时显示不正确（现在已经不能用lazy了）
前端李小白的博客
08-27 4730
在tab控件上渲染多个echart图表，然后切换查看时，发现图表的宽度不正确 原因：在页面进行加载时，隐藏的图表找不到对应的div大小，所以默认给了一个大小。所以要做的就是在页面加载时，就对图表进行初始化。 网上真的是太多太多太多坑了，服了，各种能不能用的都不先自己测试一下再贴上去，真心服了这些人。本来element tabs里面有个很好解决的办法就是在tab-pane添加上lazy='true’...
Vue第3篇，在Vue项目中，点击切换tab栏时Echarts图表缩小在一起，宽高只有100px，解决方法（echarts图表缩小在一起，echarts图表大小随窗口变动而自适应，无需刷新）
weixin_65793170的博客
10-31 4276
vue项目中echarts图表缩小在一起，解决方法？点击切换tab栏时echarts图标缩小在一起（宽高只有100px），解决方法？外加echarts 图表大小随窗口变动而自适应（无需刷新）
elementUI tabs切换 echarts宽度挤压到一起 由100%变成100px
懒虫的博客
05-09 1222
elementUI tabs切换 echarts宽度挤压到一起 由100%变成100px
亲测有效～搞懂并解决el-tab里的echart图表会变形的问题
Cyrios_ykx的博客
03-02 3562
在保持图表自适应的情况下，用较为简便的方法，快速搞懂并解决el-tab里的echart图表会变小的问题
vue element 切换tab标签echarts出现图表被压缩变形问题
abcdefg182的博客
02-09 1370
我们只需要点击到当前切换的时候在echarts父级加载完毕之后在执行echarts，而不是在页面初始化的时候就把所有tabs里面的echarts都执行。所以根据element官方文档关于tabs， 加上 :lazy = "true"就解决了（lazy：标签是否延迟渲染 ）是因为初始化页面的时候其他tabs切换是display：none，是没有宽度的。
关于echarts和tab结合，echarts比例缩小的问题
飞翔的小白
09-24 724
当一个页面中既有echarts又有Tab标签，且echarts图不止一个时，会出现echarts图被压缩的问题，解决如下，亲测有效： 在引入echarts组件时，添加一个v-if条件，在每次切换到该tab页时，才会加载echarts: <el-tabs v-model="activeName" @tab-click="handleClick" > <el-tab-pane label="故障率" name="gzl"> <Echart
vue element使用echarts切换tab标签出现图表被压缩变形，宽度变窄问题
qq_41649342的博客
03-29 4966
vue element使用echarts切换tab标签出现图表被压缩变形，宽度变窄问题 在tabs切换中有echarts的话，我们会发现初始化的那个echarts是有宽度的，当点击tabs切换之后，切换过来的echarts只剩下100px的宽度。 这是因为渲染的时机不对，我们需要在点击到当前切换的时候在echarts父级加载完毕之后在执行echarts，而不是在页面初始化的时候就把所有tabs里面的echarts都执行。 因为echarts会根据父级给宽度，而在初始化页面的时候其他tabs切换是displa
vue2.* element tabs tab-pane 动态加载组件操作
10-15
主要介绍了vue2.* element tabs tab-pane 动态加载组件操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue解决echart在element的tab切换时显示不正确问题
01-19
最近在项目中遇到了这种情况，需要在tab控件上渲染多个echart图标，然后切换查看时，发现图表的宽度不正确 原因：在页面进行加载时，隐藏的图表找不到对应的div大小，所以默认给了一个大小。所以要做的就是在页面...
el-tab和echarts结合使用的坑
Yaince的博客
03-21 301
当使用element-ui的el-tab-pane组件时，底下的echars图表宽度会显示为100px，导致原本的图表变形。在每个图表初始化的时候，调用一下resize()的方法就可以了。网上查了下资料 发现是图表的渲染时机不对。
el-tab切换时Echarts图表被压缩在一起或显示异常
m0_48940868的博客
04-14 1648
项目场景： el-tab切换时Echarts图表被压缩在一起或显示异常 如图： 原因分析： 解释1 （但是博主试了下 lazy属性不起作用 果断放弃） 解释2 （用vue自带的$nextTick钩子 + el-tab的自带的change事件） 解决方案： 推荐 第二种方案，这本来也是这个bug的问题所在， 在还没有 切换到 第二个标签页的 时候 ， 我已经在mounted 里面把 Echarts画出来了，所以一切换，图表还来不及渲染，就显示异常了吧， 所以这是 当然 要用 $nextTick 哦，
切换tab页时，tab页中的echart变形问题
weixin_33708432的博客
12-07 1755
本文为博主原创，未经允许，不得转载： 在两个tab页中，分别展现了两个echart图表，同样的格式与写法，但只有在默认选中的tab页中的图表显示的是正常的， 但进入另一个tab页中时，图表则产生了变形的问题，如下图所示： 在网上查了很多，有各种方法，尝试之后也并没有改变变形的问题，         终极原因是在页面进行加载时，隐藏的图表找不到对应的div大小，所以默认给了一个大小。所以要做的就是在...
vue使用echarts切换tab出现图表被压缩，宽度变窄问题
Hoodps的专栏
09-17 7607
在做项目的时候，遇到图表在切换试图的时候，发现图表会被压缩起来了， 在tabs切换中有echarts的话，我们会发现初始化的那个echarts是有宽度的，当点击tabs切换之后，切换过来的echarts只剩下100px的宽度。 这是因为渲染的时机不对，我们需要在点击到当前切换的时候在echarts父级加载完毕之后在执行echarts，而不是在页面初始化的时候就把所有tabs里面的echart...
echart图表动态获取数据，异步渲染数据，并在el-tabs标签页展示，解决标签页切换之后echart收缩问题
qq_45489665的博客
08-13 633
1628824416750 思路： 两个图 标签页分别为饼图和柱状图，默认显示第二个标签页。两个标签页的数据尽量不要同时获取，否则加载太慢。 第二个标签页在进入页面时，在created里调用接口获取数据，然后在mounted中获取，显示数据 第一个标签页在el-tabs点击时，执行的 @tab-click=“handleClick” 方法中获取数据。 解决标签页切换之后echart收缩问...
tab栏切换时 echarts渲染问题（详细分析）
盛典
04-20 6557
最近写项目中用到tab栏切换，第二个tab需要渲染echarts，然后发现echarts无法显示 我通过分析发现是因为tab切换后，填充数据那个div高度为0，并且这时候setOption已经执行了 解决办法1：给echarts容器固定住宽高，缺点:没办法自适应 解决办法2：在tab切换的后重新加载echatrs <Chart ref='refChart'></Chart> handleClick({ name }) {//点击tab切换 if (n
解决echart在tab中切换时显示不正确
u011599033的博客
05-26 2327
在VUE使用Element UI时，在el-tab-pane添加上lazy=’true’属性即可 <el-tab-pane label="远程测试控制" name="远程测试控制" lazy="true"> <remoteTestControl /> </el-tab-pane> 其他解决方法详见以下，作者写得很好，在不同的UI框架中遇到这种情况的解决方法 https://www.cnblogs.com/hao-1
vue+echarts,进行tabs切换时，图表宽度设成百分比不生效的问题
weixin_44490109的博客
05-06 1564
1、问题描述 最近在做电商后台管理项目，在首页用echarts做可视化显示的时候，遇到了进行tabs切换时图表不会自适应的问题。具体问题截图如下。 如上图所示，当进行tabs切换的时候，折线图图表的宽不会自适应。下面我们看代码和产生该问题的原因。 <div style="width:100%;display:flex;justify-content: space-between;"&g...
element-ui的tabs组件中使用echarts,在切换过程中，echarts宽度失效，只有100px
笑到世界都狼狈的博客
08-30 1526
项目中遇到echarts表格在页面加载进去的时候，只显示100px,只有改变浏览器窗口大小的时候，宽度才会恢复正常。 后面找到解决方法，在echarts中添加 v-if="activeBiosTab === 'processInfo'" 具体效果如下图所示: 代码如下： <div class="table-container"> <el-tabs ref="biosTabs" v-model="activeBios...
layui框架实战案例(14)：tabs选项卡切换时echarts拉伸变形无法正常显示的解决方案
漏刻有时数据可视化大屏（PHP&ECHARTS智能化开源软件系统）
09-12 1190
layui切换tabs选项卡时，echarts由于无法获取对应容器高度宽度，导致echarts在渲染的过程中，出现拉伸变形无法正常显示的情况。
ant design vue中的a-tabs在切换的时候怎么初始化子组件
最新发布
06-09
在 Ant Design Vue 的 Tabs 组件中，可以使用 `v-if` 指令控制子组件的初始化时机，以及使用 `lazy` 属性实现 Tab 内容的懒加载。 具体来说，你可以在 Tabs 组件中使用 `v-if` 指令，绑定一个变量，控制子组件的...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值