echars 在vue v-if 切换会 显示不出来或者显示出来但是不是百分百显示

最新推荐文章于 2024-05-01 01:10:18 发布
最新推荐文章于 2024-05-01 01:10:18 发布
阅读量2.6k 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/zhenga/p/11003227.html
版权

我也是百度看别人写的原因，然后自己总结，以后用到的时候来复制就可以将  v-if换成 v-show

第二不是百分百显示  可以用

this.$nextTick(function() {
  this.initPxChart1()
})

 

 

 

转载于:https://www.cnblogs.com/zhenga/p/11003227.html

                

        

        




    




    

      

        

            

              
                
                  Claire_ljy
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
解决echarts图表使用v-show控制图表显示不全的问题

				
			

			

				

					01-19
				

			

		

		

			
				
最近做echarts图表时，因为涉及到使用开关变量控制不同图表的显示隐藏，用 v-if 时会出现没有获取到dom结构而报错，所以改用 v-show，但是 v-show 本身是结构已经存在，当数据发生变化时，结构并未重新渲染，所以会出现 echarts 图表未获取到最外层大盒子的宽度而显示一半的情况，就像下图：

还折腾了半天，其实就是当数据请求出来后，调用绘制ehcarts时图表的时候，用 Vue.nextTick(function () { // DOM 更新了 }) 主动触发一下图表，使之强制渲染就可以正常显示了

正常显示图表：

补充知识：vue中v-if和v-show对echarts

			
		

	



                

              
                



	

		

			

				
					
echarts 使用v-if或v-show不显示

				
			

			

				

					小白
				

				

					09-26
					
					3721
					
				

			

		

		

			
				
echarts 使用v-if或v-show不显示

			
		

	



                


  
              

                


	

		

			

				
					
【Vue】Vue的v-if、v-if-else、v-else-if、v-show的使用_vue 表格中用if else if

					
最新发布

				
			

			

				

					2401_84412357的博客
				

				

					05-01
					
					596
					
				

			

		

		

			
				
秋招即将开始，校招的朋友普遍是缺少项目经历的，所以底层逻辑，基础知识要掌握好！而一般的社招，更是神仙打架。特别强调，项目经历不可忽视；几乎简历上提到的项目都会被刨根问底，所以项目应用的技术要熟练，底层原理必须清楚。这里给大家提供一份汇集各大厂面试高频核心考点前端学习资料。涵盖HTML，CSS，JavaScript，HTTP，TCP协议，浏览器，Vue框架，算法等高频考点238道（含答案）！开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】高级前端工程师必备资料包。

			
		

	





	

		

			

				
					
Vue中v-show/v-if切换后echarts宽高问题和不显示问题

				
			

			

				

					Igiveufireworks的博客
				

				

					09-01
					
					3615
					
				

			

		

		

			
				
在项目中发现，tab切换页面使用v-show时，echarts图表的宽高变成100px，因此改为用v-if切换。但是v-if切换后echarts图表为空白，不显示。

			
		

	



		

			
		



	

		

			

				
					
Vue项目, echarts因为v-if切换导致无法正常显示

				
			

			

				

					Bat_Reality的博客
				

				

					03-31
					
					2106
					
				

			

		

		

			
				
1. [Vue+echarts]
Vue项目中, 当用v-if来切换显示内容时, 发现用echarts渲染的图表无法显示, 在F12中有如下报错, 即 “dom is null”

2. 解决办法
用 v-show 替换 v-if
3. 原理
v-if是重新渲染（完全根据表达式的值在DOM中生成或移除一个元素）
v-show只是简单的css切换

...

			
		

	





	

		

			

				
					
vue使用v-if切换tab时echarts不渲染、内存泄露

				
			

			

				

					m0_53470879的博客
				

				

					11-11
					
					2707
					
				

			

		

		

			
				
之前自己写tab，出现了很多bug，这里记录一下。

一、v-show

子组件和插件如果放在tab2加载会失效，除非首次加载的时候加载tab2。

转换思路，用v-if。

二、v-if

（1）页面切换回去时echarts不会渲染

这时候在切换tab的点击事件中使用$nextTick()回调echarts函数就可以解决问题。


// 切换tab1和tab2
changeTab(active) {
  this.activeName = active;
  if (this.activeName ==

			
		

	





	

		

			

				
					
vue.js使用v-if实现显示与隐藏功能示例

				
			

			

				

					10-18
				

			

		

		

			
				
在实际开发中，还可以配合`v-else`和`v-else-if`来实现更复杂的逻辑判断，或者与`v-show`指令一起使用，`v-show`虽然也能实现类似的隐藏和显示功能，但它并不像`v-if`那样销毁和重建DOM元素，而是通过CSS的`display`...

			
		

	





	

		

			

				
					
基于Echarts图表在div动态切换时不显示的解决方式

				
			

			

				

					10-15
				

			

		

		

			
				
然而，在实际操作中，可能会遇到一个问题，即当Echarts图表所在的div元素在动态切换时，图表可能无法正常显示。本文将详细解析这个问题，并提供解决方案。  首先，问题出现在使用Vue等前端框架时，通过事件（如`...

			
		

	





	

		

			

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

				
			

			

				

					01-19
				

			

		

		

			
				
最近在项目中遇到了这种情况，需要在tab控件上渲染多...原理：利用v-if属性,当切换至对应的tab时，设置其v-if的值为true即可，同时设置默认显示的tab 举例如下：  <el type=card v-model=tabItem>  <el-tab-pane na

			
		

	





	

		

			

				
					
使用Vue中 v-for循环列表控制按钮隐藏显示功能

				
			

			

				

					10-17
				

			

		

		

			
				
在Vue.js中，`v-for`指令用于遍历数组或对象，生成一组DOM元素。它是一种非常强大的功能，常用于动态渲染列表。本篇文章将详细讲解如何利用`v-for`循环列表来控制按钮的隐藏与显示，以及如何处理列表内的事件绑定，...

			
		

	





	

		

			

				
					
【完美解决v-if导致echart不显示问题】

				
			

			

				

					良匠的博客
				

				

					07-25
					
					4246
					
				

			

		

		

			
				
偶然之下发现一个骚操作，直接用this.$nextTick(()=>{})把你的加载exhart代码全部包住就行了。最后在触发v-if为true的地方再调用一次加载echart的方法loadCharts()即可。用v-if切换之后，会导致echart不显示了。试过了网上很多方法都不行。...

			
		

	





	

		

			

				
					
echarts 表格和 v-if 导致第二次渲染出现无数据

				
			

			

				

					weixin_69437152的博客
				

				

					12-17
					
					256
					
				

			

		

		

			
				
echarts 表格 和 v-if 一起使用。第二次进入表格页面，无数据渲染、移除第一次的表格属性。

			
		

	





	

		

			

				
					
vue2.0中使用v-if/v-show切换后echarts不显示和宽高问题

				
			

			

				

					ll_883963的博客
				

				

					11-21
					
					1370
					
				

			

		

		

			
				
但新的问题，tab切换页面使用v-show时，echarts图表的宽高变成100px，因为v-show 本身是结构已经存在，当数据发生变化时，结构并未重新渲染，会出现 echarts 图表未获取到最外层大盒子的宽度而显示错误的情况。因为在切换后并没有触发生命周期函数，没有获取到dom结构，而无论是v-if或v-else-if或v-else，都不能和ref一起使用，而且不论是直接使用，还是在子元素上使用ref，都会获取不到真实dom元素的。所以使用v-show在什么情况都能获取真实dom。

			
		

	





	

		

			

				
					
vue中处理echarts因v-if切换后图形显示异常+实现echarts监听窗口变化而改变大小

				
			

			

				

					winne雪
				

				

					11-12
					
					3703
					
				

			

		

		

			
				
一、处理echarts因v-if切换后图形显示异常
有时候我们需要在一个页面中使用v-if来显示不同的两个图表。
视觉效果上好像是从一个页面点击链接跳转到另一个页面，但其实原理是通过销毁和重建两个不同dom容器来实现这个效果。
可能会出现的问题:
在切换到另一个图表显示的时候，改变了窗口宽度高度，那么点击返回按钮时看到原先的echarts图形就会有一部分消失显示不完整了。
解决办法：
我们需要在返...

			
		

	





	

		

			

				
					
vue tab切换echarts的时候（v-if和v-show）不显示的问题

				
			

			

				

					believet93的博客
				

				

					08-26
					
					2560
					
				

			

		

		

			
				
直接上代码


<div class="survey-distribution" ref="dtuDistribution"></div>
	

mounted() {
    this.distributionChart = this.$echarts.init(this.$refs.dtuDistribution)
    this.distributionChart....

			
		

	





	

		

			

				
					
在vue中使用echarts 使用v-if的问题 （不能显示 以及报错"TypeError: Cannot read property 'getAttribute' of null"）

				
			

			

				

					axIsMyName的博客
				

				

					09-11
					
					5533
					
				

			

		

		

			
				
使用echarts 添加v-if 会出现 渲染不出来 以及报错的 问题 使用v-show的时候图标会渲染出来但是 也会出现长框不一的 现象
v-if是让盒子消失 并不是改变盒子的display 属性 所以 当时你显示 v-if的时候 他会重新插入盒子 但是echarts表格并不会刷新 因为在vue中mounted hook 已经调用一遍echarts表格的方法了
解决方案 使用vue中的this...

			
		

	





	

		

			

				
					
echars tabs切换组件使用v-if 不能显示的问题

				
			

			

				

					weixin_45212940的博客
				

				

					09-29
					
					551
					
				

			

		

		

			
				
echars tabs切换组件使用v-if 不能显示的问题
问题描述
写了一个tabs切换组件，子组件开始时使用watch监听父组件传入的props参数，然后进行echarts渲染，但是发现父组件加上v-if切换以后子组件的图表并没有重新渲染，参考v-if触发子组件的生命周期和computed，watch的渲染顺序以后，把子组件的watch改成computed之后可以实现。
父组件
<template>
  <div class="tab-chart-panel">
    <

			
		

	





	

		

			

				
					
v-show，v-if切换组件echarts显示不全的问题

				
			

			

				

					茉莉蜜茶~~~
				

				

					07-19
					
					1683
					
				

			

		

		

			
				
echarts 

			
		

	





	

		

			

				
					
vue3 使用v-if 切换到echarts世界地图时卡顿怎么解决

				
			

			

				

					07-15
				

			

		

		

			
				
对于在Vue 3中使用v-if切换到Echarts世界地图时出现卡顿的问题，有一些解决方法可以尝试：  1. 异步加载：将Echarts地图组件异步加载，这样可以避免在初始渲染时加载过多的资源，可以减少卡顿。您可以使用Vue的`...

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值