Vue解决echart在element的tab切换时显示不正确

最新推荐文章于 2024-06-01 09:13:18 发布
最新推荐文章于 2024-06-01 09:13:18 发布
阅读量1.8w 收藏 25
点赞数 10
分类专栏： HTML+CSS Web开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SanJiK/article/details/79764429
版权
在Vue项目中遇到ECharts图表在Element UI的Tab切换时显示不正确的问题，原因是隐藏图表时未找到对应div大小。一种解决方案是利用Vue的特性，在切换到对应Tab时初始化图表。另一种知乎上的简单方法是在`el-tab-pane`上添加`lazy='true'`，但实际验证后发现这可能导致ECharts尺寸异常。建议使用`v-if`指令来避免此问题，并提供了GitHub代码示例。
摘要由CSDN通过智能技术生成

最近在项目中遇到了这种情况，需要在tab控件上渲染多个echart图标，然后切换查看时，发现图表的宽度不正确

原因：在页面进行加载时，隐藏的图表找不到对应的div大小，所以默认给了一个大小。所以要做的就是在页面加载时，就对图表进行初始化。

网上的解决方案大多都是监听tab的切换事件，然后再根据切换的页面重新渲染echart组件，比较麻烦。如下是个人的解决方法：

原理：利用v-if属性,当切换至对应的tab时，设置其v-if的值为true即可，同时设置默认显示的tab

举例如下：

<el-tabs type="card" v-model="tabItem">
  <el-tab-pane name="heart">
    <span slot="label"><icon name="heart" scale="2"></icon>心率</span>
    <baseline ref="heart" :chartData="{}" v-if="'heart' === tabItem"></baseline>
  </el-tab-pane>
  <el-tab-pane name="breath">
    <span slot=&
最低0.47元/天 解锁文章
小识oO
关注
  • 10
    点赞
  • 踩
  • 25
    收藏
    觉得还不错? 一键收藏
  • 30
    评论
专栏目录
el-tab切换时Echarts图表被压缩在一起或显示异常
m0_48940868的博客
04-14 1661
项目场景： el-tab切换时Echarts图表被压缩在一起或显示异常 如图： 原因分析： 解释1 （但是博主试了下 lazy属性不起作用 果断放弃） 解释2 （用vue自带的$nextTick钩子 + el-tab的自带的change事件） 解决方案： 推荐 第二种方案，这本来也是这个bug的问题所在， 在还没有 切换到 第二个标签页的 时候 ， 我已经在mounted 里面把 Echarts画出来了，所以一切换，图表还来不及渲染，就显示异常了吧， 所以这是 当然 要用 $nextTick 哦，
Vue解决echart在element的tab切换时显示不正确（现在已经不能用lazy了）
前端李小白的博客
08-27 4743
在tab控件上渲染多个echart图表，然后切换查看时，发现图表的宽度不正确 原因：在页面进行加载时，隐藏的图表找不到对应的div大小，所以默认给了一个大小。所以要做的就是在页面加载时，就对图表进行初始化。 网上真的是太多太多太多坑了，服了，各种能不能用的都不先自己测试一下再贴上去，真心服了这些人。本来element tabs里面有个很好解决的办法就是在tab-pane添加上lazy='true’...
在vue3项目中使用el-tabs切换标签页时echarts图表显示不正确
最新发布
xllllll___的博客
06-01 870
el-tabs标签页是用来分隔内容上有关联但是属于不同类别的数据集合。Tabs组件提供了选项卡功能，默认选中第一个标签页，也可以通过value属性来指定当前选中的标签页.此外，el-tabs还提供了tab-click方法，来实现切换标签也触发的事件。
ECharts 在Element tabs 里面图形缩小
我是我家小女孩
04-09 554
ECharts 在Element tabs里面图形缩小了，设置了宽度100% 还是不可以。 加上:lazy=true就可以了
element-ui el-tabs 使用echarts切换时无法正常显示图表
qq_38606923的博客
07-30 2071
element-ui el-tabs 使用echarts切换时无法正常显示图表 echarts图表来回切换时会出现宽度失效的问题，导致图表变形。 子组件页面 <template> <div style="height:600px;width:100%"></div> </template> <script> export defa...
elementUI-dialog中使用echarts报错
仙女的博客
06-17 1725
打开el_dialog时，dom元素还没有渲染完成，可使用Vue.nextTick解决问题 openDialog() { this.dialogVisible = true; this.$nextTick(() => { this.drawCategorySales(); this.drawBar(); }); }, 参考文章：https://blog.csdn.net/qq_26811445/article/details/86596914 ...
Vue解决echart在element的tab切换时显示不正确问题
01-19
最近在项目中遇到了这种情况，需要在tab控件上渲染多个echart图标，然后切换查看时，发现图表的宽度不正确 原因：在页面进行加载时，隐藏的图表找不到对应的div大小，所以默认给了一个大小。所以要做的就是在页面...
解决vue-router 切换tab标签关闭时缓存问题
10-15
在Vue.js应用中，使用Vue Router进行页面导航时，可能会遇到一些关于页面缓存的问题，尤其是在涉及切换Tab标签时。本文将深入探讨如何解决Vue Router切换Tab标签时关闭页面仍保持缓存的状态。 首先，Vue Router中的...
vue vantUI tab切换时 list组件不触发load事件的问题及解决方法
10-15
主要介绍了vue vantUI tab切换时 list组件不触发load事件的解决办法,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
解决vue 中 echart 在子组件中只显示一次的问题
10-18
vue推荐组件化开发，所以就把每个图表封装成子组件，然后在需要用到该图表的父组件中直接使用。接下来给大家介绍vue 中 echart 在子组件中只显示一次的问题，需要的朋友参考下吧
Vue+ElementUI 中级联选择器Bug问题的解决
11-19
最近在项目中需要用到级联这么个控件，所以便去element上找了个，发现了个问题，在这里跟大家分享下，介于公司项目的隐私性，所以一些文字便给大家打上马赛克了，敬请谅解~ 不多说废话，直接上问题： ElemenUI的级联是通过子级字段递归进行显示的，但是假如后端老铁也用了递归写的数据，而递归到最后一个数据集便出现了问题，会出现光有字段，但是却没有数据这么个情况在这里插入图片描述 这时候就出现了问题： 最后一级会多出来一个级联，这种体验便造成了很不好的感觉。 解决办法： 将获取这些级联的数据作为参数传到这个递归函数当中，进行从组，假如递归到[ ] 转换为undefined(‘不识别’)，这
解决：在el-tab-pane里放echarts图表，爆出警告：There is a chart instance already initialized on the dom。
Faithfulzp的博客
08-28 588
在el-tab-pane里放echarts的容器，并点击其他的标签页时，图表不出现，并且爆出警告：There is a chart instance already initialized on the dom。点击两次相同标签页标签才出现。
Vue多组件使用Echarts图显示错乱问题
进阶的linzhangmeidi
01-16 1337
这篇文章给自己提个醒 vue在使用Echarts时，一般都是一个图表一个组件。 组件一： <template> <div id='myChart'></div> </template> 组件二： <template> <div id='myChart'></div> </template> 组件三： <template> <div id='myChart'></div>
Vue中el-tabs不显示其中的echarts图像的问题
又是重名了
09-30 1185
今天我们需要完成一个效果记录一下遇到的问题 这是我们需要完成的效果，很明显就是一个el-tabs加echarts来解决的，然后我们将一般页面的echarts站到echarts发现只有第一个显示其他不显示，而且显示比例出现了问题。 <el-tabs > <el-tab-pane label="当月" name="first"> <div style="width: 900px" > <c
el-tab在切换时echarts图表显示不正常
风如也的博客
07-09 787
我们经常遇到使用 elementui 中的 el-tab 组件来切换图表的时候，如果遇到在切换时图表的大小会从100px的宽高变为正常的过程的话，有下面的解决方式 <el-tabs type="card" v-model="tabActive"> <el-tab-pane label="次数" name="one"> <alarm-count v-if="'one' === tabActive" /> </el-tab-pane> <
element-ui tab切换时echarts不显示
zhangxy的博客
12-25 9989
vue工程中element-ui的tab组件使用ecahrts渲染界面大小异常问题解决（亲测有效）。
happy81997的博客
11-29 1025
vue工程中element-ui的tab组件使用ecahrts渲染界面大小异常，一般就是高度或者宽度不正常。主要原因还是echarts渲染时候，DOM还没渲染好。 解决思路： 1、获取包装所有tab页面的DIV的宽度和高度，因为这个再tab切换渲染前肯定已经固定存在了。 2、给echarts的DOM强制赋值第1步的宽度和高度即可 document.getElementById('pidichartDiv').style.height= document.getElementById("tjDi
关于Vue项目中使用轮播图遇到的几个坑
RockThatBody的博客
07-10 1527
vue项目中对轮播图进行封装调用，出现的一些Bug，记录这些踩过的坑，希望可以帮助到大家
vue项目element ui tab切换
07-27
在Vue项目中使用Element UI实现Tab切换非常简单。首先，确保你已经安装了Vue和Element UI。 1. 在你的Vue组件中引入Element UI的Tab组件和样式： ```javascript import { TabPane, Tabs } from 'element-ui'; import 'element-ui/lib/theme-chalk/tab-pane.css'; import 'element-ui/lib/theme-chalk/tabs.css'; ``` 2. 在你的Vue组件中使用Tabs组件和TabPane组件： ```html <template> <div> <el-tabs v-model="activeTab"> <el-tab-pane label="Tab 1" name="tab1"> Content of Tab 1 </el-tab-pane> <el-tab-pane label="Tab 2" name="tab2"> Content of Tab 2 </el-tab-pane> <el-tab-pane label="Tab 3" name="tab3"> Content of Tab 3 </el-tab-pane> </el-tabs> </div> </template> <script> export default { data() { return { activeTab: 'tab1' // 默认选中的Tab }; } }; </script> ``` 在上面的例子中，我们使用了`el-tabs`组件来创建一个Tab容器，然后使用`el-tab-pane`组件来创建每个具体的Tab面板。通过`v-model`指令可以绑定当前选中的Tab。 这样就完成了基本的Tab切换效果。你可以根据需要自定义每个Tab的内容和样式。
评论 30
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值