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

最新推荐文章于 2024-06-18 19:45:00 发布
原创 最新推荐文章于 2024-06-18 19:45:00 发布 · 1.1k 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#echarts #javascript #ecmascript

在element-ui的Tab组件中遇到点击加载数据后echarts样式丢失的问题，通过设置Tab的lazy属性为true，实现延时加载，成功解决了图表不显示的问题。其他类似情况可能也需要检查该属性设置。

问题描述：
第一栏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样式丢失问题

一键解决tab切换（VUE中el-tabs切换）echarts无法显示的问题
qq_38816210的博客
08-24 1万+
前言 最近刚好项目里需要用到tab切换显示echarts,也同样出现了图表总是刷不出来的问题。这个问题我
在element-ui的dialog弹框中使用echarts报错，不能出现图表TypeError: Cannot read property ‘getAttribute‘ of undefined
丑小鸭变黑天鹅的博客
09-01 2413
TypeError: Cannot read property 'getAttribute' of undefined问题描述分析原因解决办法 问题描述 最近在写一个vue项目，用的是element-ui框架，其中一个业务需求需要点击之后弹出一个dialog框，然后在这个框里进行渲染绑定的echarts。操作步骤没问题，和以往的操作一样，先是安装echarts使用 npm install echarts@4.8.0 --save 然后再main.js文件中引入并挂载到全局中 // 引入echarts im
【 Vue-element 的 element-tabs 不同标签页下使用Echarts 图表时自适应的问题 】
学习分享
09-01 643
Vue-element 的 element-tabs 不同标签页下使用Echarts 图表时自适应的问题
vue中切换tab时echart不显示或显示不正常
weixin_45654230的博客
02-21 2826
项目中在不同的tab中都使用了echart，但是在切换tab的时候发现第二个tab没有正常显示，通过排查代码和网上查阅才发现是因为element是通过display来控制tab的显示的，没有点击tab2的时候第二个echart图表的容器是。，解决思路：在渲染图表1的时候获取宽度，然后给图表2的宽度赋值，切换tab的时候设置$nextTick在下一次DOM更新的时候使用resize()函数重新渲染图表2。关键代码如下：（完整代码在最后）
在vue3项目中使用el-tabs切换标签页时echarts图表显示不正确
xllllll___的博客
06-01 2558
el-tabs标签页是用来分隔内容上有关联但是属于不同类别的数据集合。Tabs组件提供了选项卡功能，默认选中第一个标签页，也可以通过value属性来指定当前选中的标签页.此外，el-tabs还提供了tab-click方法，来实现切换标签也触发的事件。
import Vue from 'vue' import App from './App.vue' import router from './router' import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; import VueECharts from 'vue-echarts' import 'echarts/lib/chart/pie' // 引入饼图 import 'echarts/lib/chart/bar' // 引入柱状图/条形图 import 'echarts/lib/component/title' // 标题组件 import 'echarts/lib/component/tooltip' // 提示框 import 'echarts/lib/component/legend' // 图例 import 'echarts/lib/component/grid' // 网格布局（用于柱状图） import 'echarts/lib/component/toolbox' // 工具栏（可选） // 注册为全局组件 Vue.component('v-chart', VueECharts) Vue.use(ElementUI); Vue.config.productionTip = false new Vue({ router, el: '#app', render: h => h(App), }).$mount('#app') 怎么弄
最新发布
10-31
这是因为你在 **Vue 组件中使用了 `type: 'line'`**，但你只引入了 `'echarts/lib/chart/pie'` 和 `'bar'`，**唯独没有引入折线图（line）模块！** --- ## ✅ 修复方案：补上 `line` 模块导入 ### 修改 `main.js`...
This dependency was not found: * vue-echarts in ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader /lib??vue-loader-options!./src/pages/Visualization.vue?vue&type=script&lang=js
04-01
嗯，用户遇到了Vue-ECharts依赖找不到的问题，报错涉及node_modules缓存加载器和Visualization.vue文件解析。首先，我需要考虑常见的解决方法。常见的问题可能包括依赖未正确安装、缓存问题或者配置错误。 首先，...
v-charts使用，报错找不到 echarts/lib/visual/dataColor
he3236220的博客
04-02 3767
原因是v-charts里面的echarts-liquidfill的版本是2.0.2； echarts里面的echarts-liquidfill版本是2.0.6； 解决办法： npm i v-charts echarts@4.9.0 -S 下面是v-charts的具体使用 安装 npm i v-charts echarts@4.9.0 -S 引用 这里可以按需引入，也可以完整引入（目前是引用的折线图） import VeLine from "v-charts/lib/line.common";
关于使用elementUI、v-chart开发后台中遇到的问题集合
weixin_42833042的博客
04-18 2033
最近入职新公司，接手的是phper用vue的element-admin和v-chart快速开发的一个物联网管理后台，代码暴力直接，很多模块都没有用到组件化，直接照搬了demo的实例修改，这就无意间增加了我接手的难度，所以趁还有记忆，记录一下自己遇到的坑。 一、数据过滤优化 前端最常做的就是对后台返回的数据做过滤和整合，那么对于那种对象与数组间关联的数据处理，我们经常会套用一层又一层的循环来达到...
一行代码解决VUE中el-tabs切换echarts图表不显示
Bruce小鬼
01-05 5334
这篇文章介绍下在el-tabs标签切换时echarts图表不显示的问题。
v-charts环图不显示问题
xx_ll_的博客
12-16 1922
解决v-charts环图不显示问题 在vue项目中使用vant组件和v-charts组件来实现滑动展示两个不同的环图，开始的时候环图一直显示不出来，解决办法： created() { this.$nextTick(() => { // 解决v-charts不显示问题 // 调用以下的方法实现环图重新渲染 this.$refs.chart_one.echarts.resize() this.$refs.chart_two.echarts.re
el-tabs下不显示echarts
SSD1397713787的博客
05-24 616
通过使用v-if以及 watch函数监听activename实现，必须使用this.$nextTick(() => {使用element ui的el-tabs切换页面一直不显示echarts，查询发现是切换的时候会不生成dom。我通过watch监听并渲染dom实现渲染页面。
关于使用Element UI中Tabs组件切换时，切换项中Echarts图表无法正常显示出来的问题
log22_rain的博客
11-03 1522
无法正常显示/失效原因： tabs组件来回切换会有宽度失效的问题，导致echarts图表变形 解决方法： 在父组件使用tabs组件的地方，给切换项内的子组件加上v-if或者lazy就解决了 如图： 参考与：https://blog.csdn.net/qq_38606923/article/details/97815094 ...
v-chart在模态框不显示的问题
winnieFighting
07-11 2570
前言 在vue的项目中,我做了一个按钮点击显示模态框,模态框显示数据分析的功能.数据分析用的是v-chart图表,但是模态框出来之后里边的图表不显示出来,等到一改变页面宽度的时候,模态框才会显示出来. 这个问题弄的我很头疼啊,这样的话,用户只能移动页面才显示,那用户体验一定是不好的呀,于是,我想一定是哪里出了问题. 尝试了很多的方法: 先进行赋值数据表的方法,再让模态框显示–失败x 点击事件触发...
tab切换重新渲染Echarts后不显示
热门推荐
dongsir
07-12 1万+
echarts高度为0,宽度为0的解决方法,echarts绘制失败,echarts加载不出来,高度或者宽度为0
vue tab切换时echarts不显示问题解决方案
thankna的博客
05-19 4252
使用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 351
【代码】谷歌浏览器切换tab栏时页面释放内存导致echarts不显示问题。
解决Bootstrap 标签页（Tab）插件切换echarts不显示问题
qq_24313955的博客
10-27 7740
问题：          在echarts跟bootstrap选项卡整合的时候，默认第一个选中选项卡可以正常加载echarts图表，但是切换其他选项的时候不能渲染出其他选项卡echarts图表。 解决办法： //解决tab切换不显示问题 在加载窗口后重新渲染。 $('a[data-toggle="pill"]').on('shown.bs.tab', function(e) { f
element中tab切换时echarts不展示或者样式错乱
weixin_44246487的博客
06-30 1734
elememtUI tab切换时echarts不展示或样式错乱 当页面中点击tab切换，第一次加载echarts时正常，切换到别的tab页，在点回来的时候就不展示，或者都挤到一起去了。 出现问题的原因是因为加载echarts时，存放图表的容器还没有加载出来。 解决方法： 先加载完dom元素，再去加载echarts图 1、使用this.$nextTick this.$nextTick(function() { // 加载echarts图 this.LoadTreeCharts(); }) 2、可以在
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

jieyucx

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

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

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

打赏作者

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

抵扣说明：

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

余额充值