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…