解决element-ui中Tab切换vchart/echarts不显示问题

最新推荐文章于 2024-06-18 19:45:00 发布
最新推荐文章于 2024-06-18 19:45:00 发布
阅读量994 收藏 4
点赞数 4
分类专栏： vue的那些事 文章标签： echarts javascript ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jieyucx/article/details/130562081
版权
在element-ui的Tab组件中遇到点击加载数据后echarts样式丢失的问题，通过设置Tab的lazy属性为true，实现延时加载，成功解决了图表不显示的问题。其他类似情况可能也需要检查该属性设置。
摘要由CSDN通过智能技术生成

问题描述：
第一栏Tab中的echarts显示，第二栏使用了click点击加载，请求了数据但是dom没有更新.
如图所示：
在这里插入图片描述
在这里插入图片描述
第一个tab中的echarts正常显示，第二个样式丢失了

解决办法：
使用element-ui中tab自带属性 lazy延时加载，默认是false,这里添加为true即可

<el-tab-pane label=“累计客户” name=“second” lazy>测试</el-tab-pane>

还有一些其他的情况，我这里是使用这个lazy属性就解决，具体可参考这位大佬的解决el-tab中echarts样式丢失问题

jieyucx
关注
专栏目录
在element-ui的dialog弹框中使用echarts报错，不能出现图表TypeError: Cannot read property ‘getAttribute‘ of undefined
丑小鸭变黑天鹅的博客
09-01 2242
TypeError: Cannot read property 'getAttribute' of undefined问题描述分析原因解决办法 问题描述 最近在写一个vue项目，用的是element-ui框架，其中一个业务需求需要点击之后弹出一个dialog框，然后在这个框里进行渲染绑定的echarts。操作步骤没问题，和以往的操作一样，先是安装echarts使用 npm install echarts@4.8.0 --save 然后再main.js文件中引入并挂载到全局中 // 引入echarts im
v-charts 使用教程/笔记（一）v-charts 使用方式讲解，以及如何使用e-charts特性
TUTsmile的博客
01-19 5749
1.开始 打开官方文档 https://v-charts.js.org/#/ 指南->开始使用 根据官方文档完成安装操作。 若是在vue工程中按需引入，可参照以下方式 <templage> <div> <ve-line ref='inGoodLine' :data="chartData" ...
解决vue切换页面echarts不显示
weixin_56541403的博客
05-24 1997
原因：echarts挂载的dom元素有一个属性：_echarts_instance_，它应该类似id，需要每次刷新重新生成，所以我们每次挂载前都去除这个属性。vue3项目中用el-tabs组件切换页面，echarts图表只在初始化的时候显示了一次，切换页面后就不显示了。还有一种方法我查的是用动态ID，那个我没有试，我只用到了上面的方法就解决了。
vue中切换tab时echart不显示或显示不正常
weixin_45654230的博客
02-21 2268
项目中在不同的tab中都使用了echart，但是在切换tab的时候发现第二个tab没有正常显示，通过排查代码和网上查阅才发现是因为element是通过display来控制tab的显示的，没有点击tab2的时候第二个echart图表的容器是。，解决思路：在渲染图表1的时候获取宽度，然后给图表2的宽度赋值，切换tab的时候设置$nextTick在下一次DOM更新的时候使用resize()函数重新渲染图表2。关键代码如下：（完整代码在最后）
在vue3项目中使用el-tabs切换标签页时echarts图表显示不正确
xllllll___的博客
06-01 1344
el-tabs标签页是用来分隔内容上有关联但是属于不同类别的数据集合。Tabs组件提供了选项卡功能，默认选中第一个标签页，也可以通过value属性来指定当前选中的标签页.此外，el-tabs还提供了tab-click方法，来实现切换标签也触发的事件。
el-tabs下不显示echarts
SSD1397713787的博客
05-24 443
通过使用v-if以及 watch函数监听activename实现，必须使用this.$nextTick(() => {使用element ui的el-tabs切换页面一直不显示echarts，查询发现是切换的时候会不生成dom。我通过watch监听并渲染dom实现渲染页面。
关于使用Element UI中Tabs组件切换时，切换项中Echarts图表无法正常显示出来的问题
log22_rain的博客
11-03 1407
无法正常显示/失效原因： tabs组件来回切换会有宽度失效的问题，导致echarts图表变形 解决方法： 在父组件使用tabs组件的地方，给切换项内的子组件加上v-if或者lazy就解决了 如图： 参考与：https://blog.csdn.net/qq_38606923/article/details/97815094 ...
关于使用elementUI、v-chart开发后台中遇到的问题集合
weixin_42833042的博客
04-18 1961
最近入职新公司，接手的是phper用vue的element-admin和v-chart快速开发的一个物联网管理后台，代码暴力直接，很多模块都没有用到组件化，直接照搬了demo的实例修改，这就无意间增加了我接手的难度，所以趁还有记忆，记录一下自己遇到的坑。 一、数据过滤优化 前端最常做的就是对后台返回的数据做过滤和整合，那么对于那种对象与数组间关联的数据处理，我们经常会套用一层又一层的循环来达到...
vue中echarts调用接口_在vue2中使用echarts (Vue-ECharts插件）
weixin_33252271的博客
12-29 2181
Vue-EChartsECharts 的 Vue.js 组件。基于 EChartsv4.1.0+ 开发，依赖 Vue.jsv2.2.6+。安装npm(推荐方式)$ npm install echarts vue-echartsCDN在 HTML 文件按如下方式依次引入 echarts和 vue-echarts：使用方法用 npm 与 Vue Loader 基于 ES M...
vue项目tab切换echart图表切换宽度缩小和图表内容不正确解决
Miss_hhl的博客
01-19 1627
代码： 布局： <TabButton :btnValue1="'总数'" :btnValue2="'明细'" @watchFlag="handler"></TabButton> <div class="it_content"> <div class="picture" id="work" ref="work" v-show="flag===false...
v-chart在模态框不显示的问题
winnieFighting
07-11 2444
前言 在vue的项目中,我做了一个按钮点击显示模态框,模态框显示数据分析的功能.数据分析用的是v-chart图表,但是模态框出来之后里边的图表不显示出来,等到一改变页面宽度的时候,模态框才会显示出来. 这个问题弄的我很头疼啊,这样的话,用户只能移动页面才显示,那用户体验一定是不好的呀,于是,我想一定是哪里出了问题. 尝试了很多的方法: 先进行赋值数据表的方法,再让模态框显示–失败x 点击事件触发...
tab切换重新渲染Echarts后不显示
热门推荐
dongsir
07-12 1万+
echarts高度为0,宽度为0的解决方法,echarts绘制失败,echarts加载不出来,高度或者宽度为0
vue tab切换时echarts不显示问题解决方案
thankna的博客
05-19 3979
使用vuetifyUI，其他UI也是同理。 一、echarts不显示问题原因： 1.tab的绑定事件onChange还是onClick 2.找不到对应id的Dom 二、解决方案 1.看下面的代码，两个事件应该分别在两个标签里加载。这个是我加debugger硬试出来的。 <v-tabs v-model="tab" align-with-title ..
谷歌浏览器切换tab栏时页面释放内存导致echarts不显示问题
最新发布
weixin_46328739的博客
06-18 275
【代码】谷歌浏览器切换tab栏时页面释放内存导致echarts不显示问题。
一键解决tab切换（VUE中el-tabs切换）echarts无法显示的问题
qq_38816210的博客
08-24 1万+
前言 最近刚好项目里需要用到tab切换显示echarts,也同样出现了图表总是刷不出来的问题。这个问题我
解决Bootstrap 标签页（Tab）插件切换echarts不显示问题
qq_24313955的博客
10-27 7520
问题：          在echarts跟bootstrap选项卡整合的时候，默认第一个选中选项卡可以正常加载echarts图表，但是切换其他选项的时候不能渲染出其他选项卡echarts图表。 解决办法： //解决tab切换不显示问题 在加载窗口后重新渲染。 $('a[data-toggle="pill"]').on('shown.bs.tab', function(e) { f
v-charts环图不显示问题
xx_ll_的博客
12-16 1791
解决v-charts环图不显示问题 在vue项目中使用vant组件和v-charts组件来实现滑动展示两个不同的环图，开始的时候环图一直显示不出来，解决办法： created() { this.$nextTick(() => { // 解决v-charts不显示问题 // 调用以下的方法实现环图重新渲染 this.$refs.chart_one.echarts.resize() this.$refs.chart_two.echarts.re
一行代码解决VUE中el-tabs切换echarts图表不显示
Bruce小鬼
01-05 4840
这篇文章介绍下在el-tabs标签切换时echarts图表不显示的问题。
element中tab切换时echarts不展示或者样式错乱
weixin_44246487的博客
06-30 1599
elememtUI tab切换时echarts不展示或样式错乱 当页面中点击tab切换，第一次加载echarts时正常，切换到别的tab页，在点回来的时候就不展示，或者都挤到一起去了。 出现问题的原因是因为加载echarts时，存放图表的容器还没有加载出来。 解决方法： 先加载完dom元素，再去加载echarts图 1、使用this.$nextTick this.$nextTick(function() { // 加载echarts图 this.LoadTreeCharts(); }) 2、可以在
Echarts中像vue中v-if的功能一样的标签
05-19
Echarts本身不提供像Vue中v-if的功能，因为Echarts是一个数据可视化库，它的主要目标是展示数据，而不是控制DOM元素的显示与隐藏。但是，你可以使用一些第三方库，如vue-echarts、ng-echarts等，来将Echarts与Vue、...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

jieyucx

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值