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大数据量分片加载数据增量渲染和常规思路异步加载数据的对比,对折线图是无效的

updating…

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 精致技术 设计师:blogdevteam 返回首页