Echarts热力图关闭初始化时动画效果(由左至右渐进加载动画)

Echarts热力图关闭初始化时动画效果(由左至右渐进加载动画)

在Echarts配置中,热力图 初始时加载数据会有由左向右的渐进的加载动画。无论是在option或在series添加均不生效,但是在折线图会生效

复制代码
animation
animationDuration
animationEasing
animationDurationUpdate
animationEasingUpdate

这些配置均没有达到我想要的关闭动画的效果,由于我的数据量超过了1000,所以出现了这种现象。修改一下配置:

复制代码
option = {
     ...
     series:[
     		{
				...
				progressive:0
			}
		]
	}

progressive: 0 确保禁用渐进式渲染,从而避免了初始加载动画。这样,热力图数据会立即显示,而不会有从左向右的加载效果。

Echarts官网对progressive的解释:

渐进式渲染时每一帧绘制图形数量,设为 0 时不启用渐进式渲染,支持每个系列单独配置。

在图中有数千到几千万图形元素的时候,一下子把图形绘制出来,或者交互重绘的时候可能会造成界面的卡顿甚至假死。ECharts 4 开始全流程支持渐进渲染(progressive rendering),渲染的时候会把创建好的图形分到数帧中渲染,每一帧渲染只渲染指定数量的图形。

该配置项就是用于配置该系列每一帧渲染的图形数,可以根据图表图形复杂度的需要适当调整这个数字使得在不影响交互流畅性的前提下达到绘制速度的最大化。比如在 lines 图或者平行坐标中线宽大于 1 的 polyline 绘制会很慢,这个数字就可以设置小一点,而线宽小于等于 1 的 polyline 绘制非常快,该配置项就可以相对调得比较大。这里是引用

相关推荐
糕冷小美n几秒前
elementuivue2表格不覆盖整个表格添加固定属性
前端·javascript·elementui
小哥不太逍遥15 分钟前
Technical Report 2024
java·服务器·前端
沐墨染19 分钟前
黑词分析与可疑对话挖掘组件的设计与实现
前端·elementui·数据挖掘·数据分析·vue·visual studio code
anOnion25 分钟前
构建无障碍组件之Disclosure Pattern
前端·html·交互设计
threerocks28 分钟前
前端将死,Agent 永生
前端·人工智能·ai编程
问道飞鱼1 小时前
【前端知识】Vite用法从入门到实战
前端·vite·项目构建
爱上妖精的尾巴1 小时前
8-10 WPS JSA 正则表达式:贪婪匹配
服务器·前端·javascript·正则表达式·wps·jsa
shadow fish2 小时前
react学习记录(三)
javascript·学习·react.js
小疙瘩3 小时前
element-ui 中 el-upload 多文件一次性上传的实现
javascript·vue.js·ui
Aliex_git3 小时前
浏览器 API 兼容性解决方案
前端·笔记·学习