ECharts 的大数据可视化实践

1 . 大数据可视分析论坛 ECharts 的大数据可视化实践 羡辙 ECharts Apache 孵化项目管理委员会成员 

2 .关于我 羡辙 • 活跃的开源社区贡献者（GitHub：Ovilia） • 个人主页：zhangwenli.com • ECharts 核心开发者 • ECharts Apache 孵化项目管理委员会成员 

3 .关于 ECharts 

4 .日程 • 关于 ECharts • 大数据可视化的价值 • ECharts 的大数据渲染能力 • ECharts 在大数据可视化方面的经验 

5 .关于 ECharts 

6 .关于 ECharts ECharts 的用户量 官网访问量 npm 下载总量 3万UV/天 180万+ 开发者数量 添加标题 70万+ 

7 .关于 ECharts 活跃的生态社区 51万+ Gallery 社区用户 贡献图表数量 3千+ GitHub上 ECharts 相关项目 

8 .关于 ECharts 数据可视化领域顶尖的开源产品 Github star 数 31,431 截止至 2018.12.04 ECharts 

9 .关于 ECharts 获奖记录 • 2015 HTML5 峰会 最佳开发工具奖 • 2016 开源中国 最受欢迎中国开源软件 TOP20 • 2016-2017 团队主要工程师先后获得公司技术委员会颁 发的领域专家称号 • 2017 开源中国 最受欢迎中国开源软件 TOP20 • 2017 百度公司 开源先锋奖 • 2017 年成为中国图像图形学会可视化与可视化分析专业 委员会委员 ECharts 

10 .关于 ECharts 我们的用户 国家统计局 社科院 中国石化 国家电网 上海电气 华为 百度 阿里 腾讯 小米 新浪 用友 PICC …… 

11 .关于 ECharts 学术界评价 在中国可视化生态系统中，ECharts 通过提供方 便丰富的可视化图表，极大缩短了用户与数据的 距离。 北京大学百人计划研究员，可视化专家 袁晓如 ECharts 是中国的，也是世界的。 浙江大学CAD&CG国家重点实验室教授，可视化专家 陈为 ECharts，发现数据可视化之美！ 中国传媒大学教授 沈浩 

12 .关于 ECharts 论文 ECharts: A declarative framework for rapid construction of web-based visualization Deqing Li, Honghui Mei, Yi Shen, Shuang Su, Wenli Zhang, Junting Wang, Ming Zu, Wei Chen, Visual Informatics, Volume 2, Issue 2, 2018, Pages 136-146, ISSN 2468-502X, https://doi.org/10.1016/j.visinf.2018.04.011. 

13 .关于 ECharts ECharts 特性 • 千万级数据可视化渲染能力 • SVG + Canvas 双引擎 • 丰富的图表类型 • 数据与样式分离 • 无障碍访问支持 • 微信小程序支持 

14 .大数据可视化的价值 

15 .大数据可视化的价值 实时交互的 发现更多信息 大数据可视化 快速理解、传递信息 

16 .大数据可视化的价值 现实情况…… • 现实的大数据需求 vs. 浏览器性能限制 • 预计算 / 服务器端数据降级的不足 • 额外开发负担 • 额外的计算资源需求 • 不易实现交互 • 不易实现良好的视觉效果 

17 .大数据可视化的价值 大数据渲染的难点 • 程序执行时长 • 浏览器无响应、渲染结果等待过久、交互卡顿 • 内存占用 • 浏览器崩溃、GC 开销过大 • 大数据网络加载 • 数十MB，传输时间过长 

18 .ECharts 的大数据渲染能力 

19 .ECharts 的大数据渲染能力 千万级数据渲染 ~200万像素 屏幕分辨率 1920x1080 

20 .

21 .大数据渲染优化方案 

22 .大数据渲染的解决方法 • 基于场景特点的优化 • 程序层面的优化 • 用户感观的优化 • 数据加载的优化 

23 .基于场景特点的优化 • 例子：50万数据量的折线图，降低采样率 

24 .基于场景特点的优化 • 例子：图形的简化 

25 .基于场景特点的优化 基于场景特点的优化 • 优点 • 性能提升明显 • 开发成本低 • 负面视觉影响低 • 缺点 • 受业务场景局限 

26 .大数据渲染的解决方法 • 基于场景特点的优化 • 程序层面的优化 • 用户感观的优化 • 数据加载的优化 

27 .程序层面的优化 • 通过改善程序结构、代码表达 • 从而优化程序执行效率 

28 .程序层面的优化 • 垃圾回收 

29 .程序层面的优化 5毫秒的成本 • 60 FPS： 1000ms / 60 = 16ms • 20 FPS： 1000ms / 20 = 50ms