自适应布局下echarts引起页面跳帧

最新推荐文章于 2023-07-23 14:34:50 发布
最新推荐文章于 2023-07-23 14:34:50 发布
阅读量532 收藏 1
点赞数 1
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/haboll/p/7146429.html
版权

项目上突然遇到一个问题，鼠标快速滑动有echarts画的饼图时，页面出现了跳帧。布局的高度突然发生变化然后恢复正常。高度怎么会变化呢？都是按百分比来的啊？

经过一番仔细观察，在跳帧的时候页面底部闪过了滑动条，这意味着横向有溢出。加一个overflow：hidden即可解决问题。

那么是什么引起的溢出呢？仔细观察之后便发现，

echarts图使用了legend,tooltip,在鼠标从legend快速滑向图时tooltip内容迅速改变，然而此时tooltip此时内容改变，而位置因为短暂的延迟并没有变，又因为tooltip中内容过长，导致溢出，出现滑动条。然后tooltip位置迅速调整，恢复正常，滑动条消失，从而出现跳帧。

 

 

转载于:https://www.cnblogs.com/haboll/p/7146429.html

                

        

        




    

  


    

      

        

            

              
                
                  detang3660
                
              
            

            

                关注
              
            

        

        

          
      

      









                



	

		

			

				
					
记一次echarts饼图-鼠标移到图形上出现闪动的问题解决方法

				
			

			

				

					tangqiuyan521的专栏
				

				

					02-25
					
					3477
					
				

			

		

		

			
				
很久没有用echarts做图表了，很多东西都忘记了，这次主要是做一次记录

echarts做成的饼图，鼠标移到相应的饼图上会出现闪动的问题，主要还是我自己把颜色配置的位置放错了，会出现闪动的option如下：

{

     color: ["rgb(224 22 22 / 60%)", "rgba(195, 46, 255, .6)", "rgb(45 57 191 / 60%)", "rgb(134 213 239 / 60%)", "rgb(61 191 45 / 60%)","rgb(...

			
		

	



                

              
                



	

		

			

				
					
ECharts 5 新特性

				
			

			

				

					月满闲庭的博客
				

				

					06-24
					
					1269
					
				

			

		

		

			
				
数据可视化在过去的几年中得到了长足的发展。开发者对于可视化产品的期待不再是简单的图表创建工具，而在交互、性能、数据处理等方面有了更高级的需求。
Apache ECharts 始终致力于让开发者以更方便的方式创造灵活丰富的可视化作品。在最新推出的 Apache ECharts 5，我们着力加强了图表的叙事能力，让开发者可以以更简单的方式，讲述数据背后的故事。

“表·达”是 Apache ECharts 5 的核心，通过五大模块、十五项特性的全面升级，围绕可视化作品的叙事表达能力，让图“表”更能传“达”数据背

			
		

	



                


  
              

                


	

		

			

				
					
解决Echarts图表影响页面抖动

				
			

			

				

					jin_ba_dao的博客
				

				

					11-02
					
					3092
					
				

			

		

		

			
				
Echarts图表影响页面抖动
鼠标滑过图表时,页面抖动
*解决方法如下:

在tooltip属性中添加transitionDuration: 0,即可
一名前端小学生,如有不足,请指教.
谢谢!!



			
		

	





	

		

			

				
					
echarts图表跟随尺寸大小发生变化时跟随改变

				
			

			

				

					qq_52702899的博客
				

				

					01-04
					
					410
					
				

			

		

		

			
				
【代码】echarts图表跟随尺寸大小发生变化时跟随改变。

			
		

	



		

			
		



	

		

			

				
					
跳帧是什么

				
			

			

				

					jerry的博客
				

				

					06-11
					
					2245
					
				

			

		

		

			
				
跳帧是什么


			
		

	





	

		

			

				
					
关于Echarts重新计算大小(resize)后，图标位置乱跑的问题

				
			

			

				

					syd的博客
				

				

					08-21
					
					1986
					
				

			

		

		

			
				
Echarts图标resize后，位置仍存在问题
最近做项目的时候用到的Echarts图标，当浏览器窗口发生变化后，图表resize后会出现位置乱跑的情况（个人猜测可能是因为浏览器没有反应过来）。为了解决这个问题，可以在windows监听事件中设置一个定时器，延迟调用resize方法。
代码如下：
window.addEventListener('resize', function() {
        setTimeout(() => {
          this.chart.resize()

			
		

	





	

		

			

				
					
前端面试题（高级）

				
			

			

				

					weixin_43799793的博客
				

				

					06-06
					
					1059
					
				

			

		

		

			
				
前端面试题（高级）

https://www.jianshu.com/p/356f10ee476d
2.如何判断token过期，
3.在ajajx请求时
4.beforeforeach()中的钩子函数
5.居中定位
6.对模块化的理解

http://www.javashuo.com/article/p-hheoxdee-k.html
规范：CommonJs  ，AMD
7 keepAlive 级钩子函数
activated ，deactivated


route 路由

			
		

	





	

		

			

				
					
前端200道面试题及答案（更新中）

					
热门推荐

				
			

			

				

					m0_65450343的博客
				

				

					06-11
					
					11万+
					
				

			

		

		

			
				
目录html相关说一下对cookie和Storage(localStorage和sessionStorage) 的认识和区别？link和@import的区别浏览器如何实现不同标签页的通信？iframe的优缺点canvas做项目用到哪些h5新特性和css3新特性？用localstorage和sessionStorage写过什么？如何解决页面内容加载缓慢的问题？cookie的特点*页面渲染过程css相关javascript以及es6相关http相关浏览器bootstrapvue相关node相关微信小程序reac

			
		

	





	

		

			

				
					
全网最全前端必问面试题（持续更新中）

					
最新发布

				
			

			

				

					m0_63760882的博客
				

				

					07-23
					
					1053
					
				

			

		

		

			
				
在这种模式下，路由的改变会修改浏览器的历史记录，并触发浏览器的页面刷新。总之，vue-loader是一个用于将Vue单文件组件转换为JavaScript模块的Webpack加载器，提供了许多功能和扩展，使得开发Vue应用程序更加方便和高效。5. 页面性能：每个 iframe 都需要加载独立的 HTML、CSS 和 JavaScript，这会增加页面的请求和加载时间，降低页面的性能。6. 交互限制：由于浏览器的安全策略，跨域的 iframe 之间的通信受到限制，无法直接访问和操作对方的内容。

			
		

	





	

		

			

				
					
前端面试题整理

				
			

			

				

					newbalsh的博客
				

				

					06-07
					
					961
					
				

			

		

		

			
				
工厂模式是一种设计模式，目的是为了创建对象，它通常在类或类的静态方法中实现，有以下目的：当创建相似对象是执行重复操作当编译时，不知道具体类型的情况下，为工厂客户提供一个创建对象的接口//使用工厂方式创建一个对象//1.原料//2.加工 -- 对属性进行赋值//3.方法console.log("人物名称："+this.name);console.log("人物的性别："+this.sex);//4.加工结束,--输出返回return obj;//工厂模式的使用。

			
		

	





	

		

			

				
					
关于移动端使用canvas功能的插件（如echarts）遇到的图表黑屏、闪烁、动画停滞、跳帧和擦除不全的问题...

				
			

			

				

					
				

				

					11-17
					
					588
					
				

			

		

		

			
				
使用echarts在移动端做页面嵌入APP的图表，在一个安卓5.1.1的系统上遇到了饼图黑屏、闪烁的问题，针对echarts在网上查了很久，没有结果，后对canvas查找，找到了一篇针对此问题的解决方法，主要说是安卓某些版本的webview不支持canvas硬件加速，所以在很多情况下看到动画偶现黑屏，闪烁，在客户端加一行禁止硬件加速的代码即可：

[java]view plain...

			
		

	





	

		

			

				
					
自适应布局下echarts引起页面跳帧出现横向滚动条

				
			

			

				

					H1455483319的博客
				

				

					02-09
					
					877
					
				

			

		

		

			
				
问题：自适应界面滑动，鼠标快速滑动有echarts画的饼图时，页面出现了跳帧，出现横向滚动条后又快速消失，随后界面布局恢复正常
原因：echarts图使用了legend,tooltip,在鼠标从legend快速滑向图时tooltip内容迅速改变，然而此时tooltip此时内容改变，而位置因为短暂的延迟并没有变，又因为tooltip中内容过长，导致溢出，出现滑动条。然后tooltip位置迅速调整，恢复正常，滑动条消失，从而出现跳帧
解决：在echarts图表的外层添加一个overflow：hidden即可解决

			
		

	





	

		

			

				
					
ECharts 鼠标悬浮tooltip卡顿问题解决

				
			

			

				

					Nick_wing的博客
				

				

					06-13
					
					2141
					
				

			

		

		

			
				
ECharts 鼠标悬浮tooltip卡顿问题

			
		

	





	

		

			

				
					
Echarts自适应：当窗口大小发生变化时，重新渲染图表

				
			

			

				

					vvv3171071的博客
				

				

					12-23
					
					1万+
					
				

			

		

		

			
				
①. 首先介绍一下window.onresize，这个方法可以监听窗口变化。

将window.onresize写在mounted中，在窗口变化时就会执行它的内容。如：
  mounted() {
     window.onresize = () => {
       console.log("窗口发生变化时会打印该条");
     };
  },



②. 接下来，只要在window.onresize中写入重新绘制echarts的逻辑就OK了

echarts自带resize这个API，即.

			
		

	





	

		

			

				
					
ECharts3中的图表大小自适应

				
			

			

				

					Lix7's Home
				

				

					07-14
					
					10万+
					
				

			

		

		

			
				
最近在写一个地图类的应用，用的是echarts的图表，然而一上来就一脸懵逼，如果父级容器的height/width属性设置为百分比的形式，那么echarts就会warning，且不能正常的生成图表。所以div容器的高度宽度必须指定为px，这设计不知道是为啥。

			
		

	





	

		

			

				
					
解决echarts自适应问题

				
			

			

				

					qq_37572795的博客
				

				

					02-19
					
					1万+
					
				

			

		

		

			
				
解决echarts自适应问题
在vue项目中是用echarts生成图表，基本配置之后也出现了，可现在的网页基本都是自适应的，而echarts图表只生成了一次，无法自适应，需要刷新才能重新渲染图表。
单图表自适应：
第一次进入很正常

屏幕缩小之后，发现没有显示完整

解决办法 ：

echart图表本身是提供了一个resize的函数的

// 使用刚指定的配置项和数据显示图表。
var myChart = echarts.init(document.getElementById("main"));
myCh

			
		

	





	

		

			

				
					
vue使用echarts如何进行动画的性能优化

				
			

			

				

					weixin_42605397的博客
				

				

					01-09
					
					611
					
				

			

		

		

			
				
在使用 echarts 在 vue 中进行动画时，可以采用以下方法进行性能优化：

尽量使用更高效的动画效果，如 transition 和 transform 而不是 animation。
尽量使用较少的动画元素，以减少浏览器的渲染压力。
尽量减少动画过程中图表的重绘次数，可以使用 notMerge 和 lazyUpdate 等选项来优化。
在移动端上，使用 canvas 渲染图表可能会更好，因为...

			
		

	





	

		

			

				
					
vue页面echarts卡顿问题

				
			

			

				

					atu1111的博客
				

				

					12-16
					
					1万+
					
				

			

		

		

			
				
vue页面echarts卡顿问题
1.在vue中使用echarts使用setOption更新加载图形很慢
  在vue中使用echarts和绘制柱状图，图例很多，但是只有100多条，但是绘制很慢。
this.myChart.setOption(this.option)

  因为是在data中定义了myChart属性，在script中定义一个变量用来接收myChart，就可以解决这个问题,原因变量定义在data里，canvas触发了vue监听而更新，而每一次的更新，导致加载变慢
var myChart
my

			
		

	





	

		

			

				
					
定时器+echarts运行时间太长导致内存溢出页面崩溃

				
			

			

				

					langziangTom的博客
				

				

					02-27
					
					2860
					
				

			

		

		

			
				
echarts运行时间太长导致内存溢出页面崩溃

			
		

	





	

		

			

				
					
vue+echarts页面三等分自适应布局

				
			

			

				

					04-04
				

			

		

		

			
				
Vue Echarts页面三等分自适应布局可以通过使用Flex布局来实现。以下是一种实现方法：

1. 在父组件中使用Flex布局，并设置flex-wrap属性为wrap，这样所有子组件会自动换行。

```html
<template>
  <div class="container">
    <div class="chart-wrapper"></div>
    <div class="chart-wrapper"></div>
    <div class="chart-wrapper"></div>
  </div>
</template>

<style>
.container {
  display: flex;
  flex-wrap: wrap;
}

.chart-wrapper {
  flex-basis: 33.33%;
  min-width: 300px;
  height: 300px; /* 设置echarts图表容器的高度 */
}
</style>
```

2. 在子组件的mounted钩子函数中使用Echarts库来渲染图表，并设置图表容器的宽度和高度。

```html
<template>
  <div class="chart-wrapper" ref="chart"></div>
</template>

<script>
import echarts from 'echarts';

export default {
  mounted() {
    const chart = echarts.init(this.$refs.chart);
    chart.setOption({/* Echarts图表配置 */});
    chart.resize(); // 自适应宽度
  }
}
</script>

<style>
.chart-wrapper {
  width: 100%;
  height: 100%;
}
</style>
```

通过以上方法，我们可以实现一个自适应的Echarts图表页面，其中每个图表容器都平均分配了父容器的宽度，并自动换行。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值