vue tab切换echarts的时候（v-if和v-show）所踩得坑

最新推荐文章于 2024-09-12 11:28:00 发布
最新推荐文章于 2024-09-12 11:28:00 发布
阅读量1.1w 收藏 3
点赞数
分类专栏： web前端 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_31965515/article/details/80941748
版权

由于v-show只是设置了元素的display属性为none，在切换的时候没有获取到元素的宽高所有会有问题，换成v-if就ok了

echarts如果用v-if来切换显示隐藏两个不同配置的图标，比如说柱状图和饼状图的时候，如果柱状图不配置x轴和Y轴的现实和隐藏如下图


这样在切换的时候饼状图也会保留这个坐标轴，解决方案是在各自不同的配置选项中配置坐标轴的show参数。

饼状图的设置为false，这样就不会显示了，


柱状图设置图表位置


饼状图设置图表的位置


哎呦喂1111
关注
专栏目录
vue3 - 解决路由切换时 echarts 图表消失了，每次切换页面时图表不见了（完美解决路由切换到其他页面后，再切换回来时 echarts 图表不显示的问题）详细示例教程
高级前端工程师
02-21 6519
解决 Vue3 中路由切换到其他页面再切换回来时 Echarts 图表不显示的问题，vue3 echarts图表突然消失了，vue3切换页面时echarts图表不见了，vue3切换页面echarts图表不显示的问题，路由切换再回来Echart图表消失问题，vue3切换页面后,echarts不显示，vue3切换tab页面,Echarts图表不显示的问题，echarts切换路由后不显示的问题，vue3中如何解决echarts 二次渲染时不显示的问题，vue3使用echarts切换页面出现数据丢失情况，vue3中
问题记录--vue-tab切换时Echarts不能正常展示
King Saj
06-17 1560
vue-tab切换时Echarts不能正常展示
vue-echarts踩坑记录20210913
qq_41191401的博客
09-13 313
项目使用vue-echarts插件用于可视化，这个插件相比于原生的echarts好处就在于能自使用，写起来比较方便引入后可直接使用标签，详情去看git说明。 于是项目上踩坑了。 场景： 一个页面上多个图表，准确来说是多个直方图。当我给一个直方图设置柱体颜色和图例的时候，这一个直方图开始影响他之前的一个直方图。怎么弄都不好使。我于是改用了原生的echart。问题解决。 问题所在： 事后，我重新找原因的时候，发现是v-if和v-show导致的问题，我把页面置为v-show没有出现影响，v-if的时候就会
vue3前端tab切换
最新发布
susu1083018911的博客
09-12 690
vue3前端tab切换
vue2.0中使用v-if/v-show切换后echarts不显示和宽高问题
ll_883963的博客
11-21 1807
但新的问题，tab切换页面使用v-show时，echarts图表的宽高变成100px，因为v-show 本身是结构已经存在，当数据发生变化时，结构并未重新渲染，会出现 echarts 图表未获取到最外层大盒子的宽度而显示错误的情况。因为在切换后并没有触发生命周期函数，没有获取到dom结构，而无论是v-if或v-else-if或v-else，都不能和ref一起使用，而且不论是直接使用，还是在子元素上使用ref，都会获取不到真实dom元素的。所以使用v-show在什么情况都能获取真实dom。
v-if和v-show的真实的区别，来解决echarts图表tab切换
柠檬不萌只是酸i
07-15 1614
之前使用vue的时候，忽略了这个细节，知道今天在vue中使用图表的时候，才发现出问题了。 问题描述：写的图表在页面上全部展示的时候可以显示，但是变成tab切换的时候，页面上的图表渲染不出来。 先来说下v-if和v-show的区别： v-if : 当隐藏结构时，该结构会直接从整个DOM树中移除。 v-show : 当隐藏结构时，是在该结构的style中加上display : none ...
echarts使用v-if或v-show图表宽度100px
灵壹Eli的博客
04-18 463
实现柱状图使用了v-if或v-show做判断时，柱图要么显示一半要么不显示，使用v-if的时候，当条件为false时，会出错，因为此时div是不存在的，所以无法对图表进行初始化。v-show结构已经存在，当数据发生变化时，结构并未重新渲染，会出现 echarts 图表未获取到最外层大盒子的宽度而显示一半的情况。
Vue解决echart在element的tab切换时显示不正确问题
01-19
最近在项目中遇到了这种情况，需要在tab控件上渲染多...原理：利用v-if属性,当切换至对应的tab时，设置其v-if的值为true即可，同时设置默认显示的tab 举例如下： <el type=card v-model=tabItem> <el-tab-pane na
echars tabs切换组件使用v-if 不能显示的问题
weixin_45212940的博客
09-29 606
echars tabs切换组件使用v-if 不能显示的问题 问题描述 写了一个tabs切换组件，子组件开始时使用watch监听父组件传入的props参数，然后进行echarts渲染，但是发现父组件加上v-if切换以后子组件的图表并没有重新渲染，参考v-if触发子组件的生命周期和computed，watch的渲染顺序以后，把子组件的watch改成computed之后可以实现。 父组件 <template> <div class="tab-chart-panel"> <
echarts vue element-ui 实现根据选择项年月日时间切换数据显示折线图，vue页面监听自适应（一）
总结前端开发中遇到的问题，分享前端知识
04-12 4654
element-ui 实现根据选择项年月日时间切换数据显示折线图，vue页面监听自适应
v-show，v-if切换组件echarts显示不全的问题
茉莉蜜茶~~~
07-19 1794
echarts
Echarts常见问题（v-if、v-show布局问题）
weixin_53687108的博客
10-07 886
在Vue中使用Echarts时，可以通过v-if来控制Echarts的显示和隐藏。在模板中添加一个容器div，并绑定一个v-if属性。当v-if的值为true时，显示Echarts；当v-if的值为false时，隐藏Echarts。当使用v-if(v-show)控制显隐时，会出现布局问题（例如：100%识别成100px）
vue使用echartst v-show宽度变100px解决办法
qq_41009420的博客
08-16 631
在 myChart.setOption(option); 后面加上myeChart.resize(); 即可完美解决
vue项目中使用echarts，页面切换后再切换回来echarts图表不显示
qq_52937529的博客
04-16 845
vue项目中使用echarts，页面切换后再切换回来echarts图表不显示
vue使用echarts示例
lingxun123456的博客
05-25 404
<template> <div> <div class="app-container" style="position: absolute;top: 0px;"> <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px"> <el-form-i...
路由切换再回来Echart图表消失问题
右见小栈
12-07 5475
问题描述 使用echarts图表时，首次可以加载出来， 但是 切换到 其他的路由 之后再 切换回来 echarts图表就不显示了， 刷新之后又可以显示出来。 原因分析 首先我们要知道 echarts的渲染逻辑， 如果未实例化 的盒子则进行 实例化,在此期间会在div容器生成一个 _echarts_instance_ 属性， 该属性值就是当前echarts的ID,然后进入后边的渲染操作流程 当 经过 切换路由 在回来时， echarts的ID就回到初始状态， 所以 和 原先的 指定id 的 div 的_
echarts图表使用v-show控制图表显示不全的问题
lianwenxiu的博客
07-02 9340
最近做echarts图表时，因为涉及到使用开关变量控制不同图表的显示隐藏，用 v-if 时会出现没有获取到dom结构而报错，所以改用 v-show，但是 v-show 本身是结构已经存在，当数据发生变化时，结构并未重新渲染，所以会出现 echarts 图表未获取到最外层大盒子的宽度而显示一半的情况，就像下图： 还折腾了半天，其实就是当数据请求出来后，调用绘制ehcart...
Vue Echarts通过v-if来控制图表切换的问题
Mr-k的博客
03-20 6555
Vue调用Echarts做数据统计是常态，为了更好地看出效果，通常会会出现柱状图，折线图之间的切换 v-if 切换后图表无数据的问题 v-if 之有条件满足才会渲染！！！ 这里图表作为模板引入的，先展示的折线图，故此柱状图为false，当切换时，柱状图无数据，是因为DOM结构生成是有时间差的，可以通过 this.$nextTick（）方法解决 ...
vue+Echarts进行切换时候容易出现的问题
zuo_zuo_blog的博客
10-12 1197
使用v-if进行线图之间的切换（换后图表无数据的问题） 用v-show就可以了！v-if是重新渲染（完全根据表达式的值在DOM中生成或移除一个元素），v-show只是简单的css切换 原因：v-if对echarts会报错，v-if 之有条件满足才会渲染！！！因为使用this.drawLine()方法找不到需要渲染的DOM对象(v-if)，v-show会影响图表的宽高，建议给图表加一个父级用...
Vue条件渲染：v-if/v-else-if/v-show与v-for实例解析
在本文档中，我们将深入探讨Vue.js中的条件控制和循环渲染功能，结合计算属性和绑定样式v-bind。首先，我们来了解如何使用Vue的条件语句进行元素的动态展示： 1. **v-if** 和 **v-else-if** 用于基于数据条件的元素...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值