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

最新推荐文章于 2024-09-13 11:24:52 发布
原创 最新推荐文章于 2024-09-13 11:24:52 发布 · 664 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端

本文介绍了一个常见问题的解决方案，即Element组件库的Tabs组件在切换时导致ECharts图表显示不正常的情况。原因是canvas默认大小与tabs组件渲染时机不符，通过使用懒加载方式在进入标签卡时再渲染，可以有效解决此问题。

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

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

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

精选资源
Vue解决echart在element的tab切换时显示不正确问题
01-19
最近在项目中遇到了这种情况，需要在tab控件上渲染多个echart图标，然后切换查看时，发现图表的宽度不正确 原因：在页面进行加载时，隐藏的图表找不到对应的div大小，所以默认给了一个大小。所以要做的就是在页面...
Vue中Tabs组件实现页面切换
07-07
在之前开发项目时，我们采用了类似EasyUI的Tabs组件来实现页面切换。功能最初，我们使用了iframe来嵌入不同的页面内容，但随着项目转向Vue框架，我们发现iframe在Internet Explorer浏览器中的兼容性表现不够理想。...
VUE,element-ui，优化tabs组件每次点击，所有子页面都重新渲染问题
szzlh123456789的博客
09-13 1062
【代码】VUE,element-ui，优化tabs组件每次点击，所有子页面都重新渲染问题。
elementUI tabs切换 echarts宽度挤压到一起 由100%变成100px
懒虫的博客
05-09 1514
elementUI tabs切换 echarts宽度挤压到一起 由100%变成100px
vue element使用echarts切换tab标签出现图表被压缩变形，宽度变窄问题
qq_41649342的博客
03-29 5451
vue element使用echarts切换tab标签出现图表被压缩变形，宽度变窄问题 在tabs切换中有echarts的话，我们会发现初始化的那个echarts是有宽度的，当点击tabs切换之后，切换过来的echarts只剩下100px的宽度。 这是因为渲染的时机不对，我们需要在点击到当前切换的时候在echarts父级加载完毕之后在执行echarts，而不是在页面初始化的时候就把所有tabs里面的echarts都执行。 因为echarts会根据父级给宽度，而在初始化页面的时候其他tabs切换是displa
Vue 3 ，ECharts 1 ，在Vue项目中，点击切换tab栏时Echarts图表缩小在一起，宽高只有100px（echarts图表缩小在一起，echarts图表大小随窗口变动而自适应）
NorthCity Smile的博客（NcSmile，博主域名：https://ncmile.blog.youkuaiyun.com）
10-31 5674
⭐ECharts（Enterprise Charts）是百度开发的一款基于 JavaScript 的开源可视化图表库，用于在 Web 页面中，创建各种丰富多彩的交互式图表和数据可视化界面。这里来分享记录，在使用 ECharts 时，拖拽页面后，ECharts缩小的问题。
亲测有效～搞懂并解决el-tab里的echart图表会变形的问题
Cyrios_ykx的博客
03-02 4192
在保持图表自适应的情况下，用较为简便的方法，快速搞懂并解决el-tab里的echart图表会变小的问题
vue2.* element tabs tab-pane 动态加载组件操作
10-15
在进行Web开发时，Vue.js是一个非常流行的JavaScript框架，而Element UI是一个基于Vue.js的桌面端组件库，它提供了一整套界面组件，可以用来快速构建高质量的Web界面。本文档主要介绍如何在Vue2.*环境下使用Element ...
Vue切换Tab动态渲染组件的操作
10-14
在前端开发框架Vue.js中，动态渲染组件是一种常见且重要的技术手段，特别是在实现标签页（Tab）切换功能时。本文将详细讲解如何使用Vue实现Tab切换和动态渲染组件的操作。 首先，动态组件是Vue框架中一个十分实用的...
vue element 切换tab标签echarts出现图表被压缩变形问题
abcdefg182的博客
02-09 1653
我们只需要点击到当前切换的时候在echarts父级加载完毕之后在执行echarts，而不是在页面初始化的时候就把所有tabs里面的echarts都执行。所以根据element官方文档关于tabs， 加上 :lazy = "true"就解决了（lazy：标签是否延迟渲染 ）是因为初始化页面的时候其他tabs切换是display：none，是没有宽度的。
el-tab和echarts结合使用的坑
Yaince的博客
03-21 439
当使用element-ui的el-tab-pane组件时，底下的echars图表宽度会显示为100px，导致原本的图表变形。在每个图表初始化的时候，调用一下resize()的方法就可以了。网上查了下资料 发现是图表的渲染时机不对。
ECharts 在Element tabs 里面图形缩小
我是我家小女孩
04-09 630
ECharts 在Element tabs里面图形缩小了，设置了宽度100% 还是不可以。 加上:lazy=true就可以了
关于echarts和tab结合，echarts比例缩小的问题
飞翔的小白
09-24 821
当一个页面中既有echarts又有Tab标签，且echarts图不止一个时，会出现echarts图被压缩的问题，解决如下，亲测有效： 在引入echarts组件时，添加一个v-if条件，在每次切换到该tab页时，才会加载echarts: <el-tabs v-model="activeName" @tab-click="handleClick" > <el-tab-pane label="故障率" name="gzl"> <Echart
切换tab页时，tab页中的echart变形问题
weixin_33708432的博客
12-07 1819
本文为博主原创，未经允许，不得转载： 在两个tab页中，分别展现了两个echart图表，同样的格式与写法，但只有在默认选中的tab页中的图表显示的是正常的， 但进入另一个tab页中时，图表则产生了变形的问题，如下图所示： 在网上查了很多，有各种方法，尝试之后也并没有改变变形的问题，         终极原因是在页面进行加载时，隐藏的图表找不到对应的div大小，所以默认给了一个大小。所以要做的就是在...
elementUI el-tabs切换时，tab里的echart图表宽高只有100px，图像变形
m0_59006402的博客
02-20 463
导致这种问题的原因是 echarts 图表加载出来了，但是它的父级标签还没有加载出来 导致样式 就还没有。获取echarts 的时候 加上定时器延时一下。页面渲染部分加 v-if。
echart图表动态获取数据，异步渲染数据，并在el-tabs标签页展示，解决标签页切换之后echart收缩问题
qq_45489665的博客
08-13 768
1628824416750 思路： 两个图 标签页分别为饼图和柱状图，默认显示第二个标签页。两个标签页的数据尽量不要同时获取，否则加载太慢。 第二个标签页在进入页面时，在created里调用接口获取数据，然后在mounted中获取，显示数据 第一个标签页在el-tabs点击时，执行的 @tab-click=“handleClick” 方法中获取数据。 解决标签页切换之后echart收缩问...
vue使用echarts出现tab切换宽度变窄问题
qq_41877107的博客
01-22 3805
在tabs切换中有echarts的话，我们会发现初始化的那个echarts是有宽度的，当点击tabs切换之后，切换过来的echarts只剩下100px的宽度。 这是因为渲染的时机不对，我们需要在点击到当前切换的时候在执行次echarts，而不是在页面初始化的时候就把所有tabs里面的echarts都执行。 因为echarts会根据父级给宽度，而在初始化页面的时候其他tabs切换是display：n...
Vue解决echart在element的tab切换时显示不正确（现在已经不能用lazy了）
前端李小白的博客
08-27 5004
在tab控件上渲染多个echart图表，然后切换查看时，发现图表的宽度不正确 原因：在页面进行加载时，隐藏的图表找不到对应的div大小，所以默认给了一个大小。所以要做的就是在页面加载时，就对图表进行初始化。 网上真的是太多太多太多坑了，服了，各种能不能用的都不先自己测试一下再贴上去，真心服了这些人。本来element tabs里面有个很好解决的办法就是在tab-pane添加上lazy='true’...
vue+echarts,进行tabs切换时，图表宽度设成百分比不生效的问题
weixin_44490109的博客
05-06 1736
1、问题描述 最近在做电商后台管理项目，在首页用echarts做可视化显示的时候，遇到了进行tabs切换时图表不会自适应的问题。具体问题截图如下。 如上图所示，当进行tabs切换的时候，折线图图表的宽不会自适应。下面我们看代码和产生该问题的原因。 <div style="width:100%;display:flex;justify-content: space-between;"&g...
在vue3项目中el-dialog使用组件，在组件中有echarts插件，tabs切换时，echarts不会自适应大小
最新发布
08-09
在 Vue3 项目中使用 `el-dialog` 组件嵌入 ECharts 图表时，如果结合 `el-tabs` 实现图表切换功能，可能会遇到 ECharts 图表无法正确自适应容器大小的问题。这种问题通常由以下原因引起： 1. **DOM 渲染时机问题**...
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值