解决vue中使用v-if隐藏echarts图之后无法再次触发显示的问题

最新推荐文章于 2023-08-16 09:47:36 发布
最新推荐文章于 2023-08-16 09:47:36 发布
阅读量3.8k 收藏 5
点赞数 2
分类专栏： ❤️❤️--vue2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41579104/article/details/105031446
版权

解决vue中使用v-if隐藏echarts图标之后无法触发显示的问题


使用v-show即可： 

<div v-show="isShowStru==1" id="structure" style="width:100%;height:350px;margin-top:50px"></div>

使用v-show即可实现已经隐藏的echarts图表，当按钮对此进行触发显示时，即可正常加载出图表，若用v-if点击按钮触发显示时，会不起作用，显示空白

suoh's Blog
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Vue(6)：echarts图形隐藏之后不能加载的问题
偉ing的博客
06-03 1265
Vue(6)：echarts图形隐藏之后不能加载的问题 因为是用vue+echarts开发的，所以把这篇博客也归纳到vue系列中，但所讲的知识和vue没有关系。 我们在开发过程中难免会遇到在同一个位置通过按钮显示两个不同的图形，最简单的做法就是把另外一个图形隐藏，默认显示当前的图形。可以通过css代码来完成。 style="display:none;" style="display:null;" /* none为隐藏当前图形，null则显示当前图形，好像用block和null的效果一样 */ 然后我们再配
vue 移动端的echarts点击图表外部隐藏tooltip
qq_34815188的博客
03-21 1936
给图表绑定一个点击事件，在事件处理函数中判断点击的位置是否在图表上。通过以上步骤，就可以实现点击图表外部隐藏tooltip的功能了。
vue中Echarts在页面中通过点击隐藏和显示
黄-小智的博客
07-02 2678
vue中时常有些需求需要Echarts在页面中通过点击隐藏和显示，或者点击切换不同的图表，按平时的方式是显示不出效果的 原因在于Echarts需要绑定在标签上，在切换时需要操作DOM节点，但是在vue中DOM已经渲染完成，无法重新刷新DOM节点使图表显示出来 这时候只需要局部刷新DOM节点即可，需要用vue中的指令v-if和this.$nextTick 上代码： template部分 // An highlighted block <div class="leftcharts"> &l
vue弹窗里面使用echarts不显示的问题
呱呱的博客
03-25 9734
出现问题： 弹出层中插入echarts图表，没有报错，但是图表加载不出来 原因分析： 弹出层 的内容是懒渲染的，即在第一次被打开之前，传入的默认 slot 不会被渲染到 DOM 上。 弹出层组件会监听 visible 的状态，当状态为 true 时，立刻触发 open 事件，但这个时候 弹出层 的内容还没有渲染。因为 Vue 组件通过 $emit 触发的事件并不是异步执行的，而是同步执行。 两种解...
echarts & vue——echarts图显示隐藏后不显示
L3gacy
03-05 2194
踩坑记录echarts图显示隐藏后不显示 echarts图显示隐藏后不显示 因为大部分项目的需求都存在图的缺省内容，当后端返回空数据时，需要给用户反馈一个缺省提醒，所以一般把echarts图作了显示隐藏的功能 那么问题来了，当返回空数据时，先把图隐藏起来，当再次请求到数据并把图进行实例化时，图怎么都显示不出来，控制台上也不报错 Markdown将文本转换为 HTML。 ...
echarts通过v-if切换隐藏后图表还是会显示在页面上
tiantang__的博客
01-11 295
在项目的一个页面中 通过v-if切换echarts图表隐藏后，还是会在页面上显示。通过给div加上key解决。
echarts —— 显隐切换图表显示有误
Juliet_xmj的博客
12-02 949
解决echarts切换显隐显示问题
echatrs可视化图在隐藏后显示不出来或是宽度出现问题
aijinxia1968的博客
05-25 488
最近在做一个可视化的项目，用了百度的ECharts.js作为可视化的视图框架，echarts的实例很多，基本能满足项目的需求，而且文档也相对完整、清晰，是个很不错的前端可视化框架。 我们的项目是使用bootstrap+echatrs完成的，前阵子在做可视化页面时这样一个问题。就是echarts图在第一次加载时没有问题，之后标签页切换隐藏，再显示就看不见了。 这是图形初始化...
解决echarts图表使用v-show控制图表显示不全的问题
10-15
在Vue.js开发中，ECharts图表的显示和隐藏经常需要通过指令来控制。本篇文章主要探讨的是如何解决使用`v-show`指令控制Echarts图表显示不全的问题。在实际开发中，我们可能会遇到这样一个场景：当利用`v-if`或`v-...
解决Echarts 显示隐藏后宽度高度变小的问题
10-15
然而，在实际应用中，我们可能会遇到一些问题，比如ECharts图表在显示隐藏后，其宽度和高度会变小，导致图表无法正常显示。这个问题通常是由于ECharts在隐藏时无法正确获取容器元素的尺寸，而在重新显示时采用了默认...
VUE+elementui组件在table-cell单元格中绘制微型echarts图
10-15
在Vue.js应用中，结合Element UI组件库，我们经常需要在复杂的表格中展示各种图表，以提供更加直观的数据分析。本篇文章将详细讲解如何在`table-cell`单元格内绘制微型ECharts图，以满足此类需求。 首先，ECharts是...
vue.js中使用echarts实现数据动态刷新功能
10-17
以下是如何在Vue.js中使用ECharts实现这一功能的详细步骤和相关知识点： 首先，确保已经安装了ECharts库。如果还没有安装，可以通过npm或yarn进行安装： ```bash npm install echarts # 或 yarn add echarts ``` 接...
echartjs 图标隐藏显示后不显示问题（VUE版+js版）
weixin_39921970的博客
05-30 607
v-show 指令会动态为元素添加或移除style="dispaly:none;"样式，说人话就是dom会【一直存在】打死也继续用v-if，那就满足条件，加载下延迟函数渲染dom结束后，执行图表画图。v-if 整个dom移除渲染，说人话就是dom【存在】或者【不存在】。病因核心就是DOM存在！那解决问题的方式就有很多种了。所以echartjs基于dom生成图表就是该病因所致。那基于上方的病因，就可以有好几个方式控制显示隐藏了。v-if 修改为v-show。v-if隐藏图表后，再显示。
echarts在vue3中的使用——其他页面跳转回echarts图表页面时，不显示图表的问题
最新发布
杜永康的博客
08-16 3170
简而言之，这相当于每个图表的一个唯一标识。每次图表创建时，就会生成这个东西。 也就是说，在首页加载成功时，这个东西就已经生成了，当我从其他页面跳转到首页时，这个东西还在。 所以就有了上面的警告：There is a chart instance already initialized on the dom. 那么也就是说，只要删除掉这个属性，那么每次dom都会重新挂载，在切换页面时首页就可以正常显示了。
解决vue中echarts图用v-if控制显示隐藏时显示空白
蜗牛~~
03-10 1659
使用v-show就解决了
vue中用v-if/v-show切换echarts不显示
web8_zhy的博客
11-15 6453
vue中用v-if切换echarts不显示 当用v-if切换页面的时候 从第二页返回到第一页的时候,第一页的echarts图不显示 是因为切换回来的时候并没有触发生命周期函数, 所以第一页的图并不能显示 话不多说 直接上图 父组件里有echarts 子组件person里也有echarts // 父组件 当子组件点击返回的时候 触发@goBack事件 // 子组件 // 父组件 如图,用vu...
vue开发的时候echarts图表不显示的解决方法
zdh1996910的博客
07-23 1万+
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Ma...
vue 使用echarts 显示隐藏问题
SL7664的博客
08-07 3316
在vue项目中引入echarts图表时，由于会有没数据的情况，所以想在没数据的时候隐藏echarts，但是遇到一个问题， 1.使用v-if时，显示没问题，隐藏后在显示，会显示空页面，可能因为被dom被删除的因素，所以改用v-show，就可以了 2.使用v-show隐藏显示后，echarts的宽度会变成100px，因为隐藏后在显示，会找不到之前设置的宽高，所以选择使用window.onresize自适应高度 let myChart = echarts.init(document.getElementById(
vue中组件的props属性（详）
热门推荐
蜗牛~~
10-28 17万+
今天这篇文章，让你彻底学会props属性…… props主要用于组件的传值，他的工作就是为了接收外面传过来的数据，与data、el、ref是一个级别的配置项。
elementUI表格实现可编辑和增加行功能--直接复制即可
蜗牛~~
07-16 1万+
结构： <div class="twoTable fuceng"> <div class="h_top"> <span>新建任务</span> <img src="../../../../static/img/close.png" alt="" @click="close_twoTableDelete"> </div> <div cla
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

suoh's Blog

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

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

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

打赏作者

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

抵扣说明：

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

余额充值