Echarts中图表渲染大数据量导致卡顿加载时间慢等问题的解决方案是什么

发布时间:2021-12-07 09:36:28 作者:柒染
来源:亿速云 阅读:3842

这期内容当中小编将会给大家带来有关Echarts中图表渲染大数据量导致卡顿加载时间慢等问题的解决方案是什么,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。

数据可视化从流程上来说,从数据采集→数据清洗→数据储存→数据读取→数据展示→数据筛选(分析)→数据报表,7个过程是一个比较完整的过程。每个过程都可能使用不同的技术和不同的工具,但是对于受众来说,这些都是计算机在处理的事情,只需要关心结果即可。
而对于数据可视化的开发人员来说,要出一个完美的结果,要有一个满意的展示速度,要有一个赏心悦目的UI界面…本次讨论,如何优化大数据量下的数据可视化展示技术和手段(基于echarts和php)。

项目需求

定义何为大量数据

在近期的Echarts数据可视化大屏的开发中,遇见了大量数据加载的情况。首先,定义何为大量数据?本文的大量数据是指10000+条数据或者10M+文件容积大小的数据。对于日常的Echarts渲染图表,无非是对接api接口→ajax获取数据→Echarts渲染图表,这样的流程。但是这么简单地过程中,遇见大量数据加载时,问题就变得复杂起来了。

产生的现象

  1. 首次加载时间过慢,友好性和体验性极差;

  2. 筛选条件,如默认1个小时,筛选24小时以上的数据时,加载数据过慢;

  3. 折线图拖动时,dataZoom组件使用时的卡顿;

  4. 浏览器大小变化时,windows监听myChart.resize()导致的重新加载,卡顿;

总之,在大数据量的数据可视化,原本一切都很美好的事情,都变得“拖拖拉拉”了。如何解决呢?

问题分析

加载时间慢,卡顿等现象表明的原因都是由于数据量大导致的,因此大数据量加载时,需要进行层次分析,只有逐层分析,才能对症下药。

解决思路

  1. 硬件环境:客观条件是解决问题的最佳方案,但不在本解决方案的讨论范围。毕竟,改变客观条件,不是每个人都能做到的。

  2. 软件环境:web服务器的配置,如gzip;

  3. 开发语言:流加载/分页懒加载方式;post/get请求方式;

  4. Echarts自身加载大量属性的使用和掌握;

  5. API接口的读取速度:mySql读取/Redis缓存读取;

  6. ajax获取数据和处理数据的方法;

测试环境

开发语言环境部署说明
后端phpphpstudy集成开发环境,php5.6+,MySql 5.6+,主要用于api数据接口的调用和调试
前端html/jquery/echartsajax异步获取数据,在echarts中进行加载渲染
硬件环境win7操作系统8G DDR,Chrome浏览器

Echarts高级进阶教程(测试教程非结论,仅供参考)

Echarts高级进阶教程(1):异步加载大量数据导致dataZoom组件拖动缩放时间轴卡顿的sampling降采样策略解决方案
Echarts高级进阶教程(2):appendData异步加载大数据量分片加载数据和增量渲染的解决方案
Echarts高级进阶教程(3):appendData大数据量分片加载数据增量渲染和常规思路异步加载数据的对比,对折线图是无效的

上述就是小编为大家分享的Echarts中图表渲染大数据量导致卡顿加载时间慢等问题的解决方案是什么了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注亿速云行业资讯频道。

推荐阅读:
  1. FFmpeg 画面卡顿问题描述
  2. vue大数据表格卡顿问题的完美解决方案

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

大数据 echarts

上一篇:css如何实现图片的渐渐隐藏效果

下一篇:Hyperledger fabric Chaincode开发的示例分析

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》