展开查看详情
1 . 大数据可视分析论坛
ECharts 的大数据可视化实践
羡辙
ECharts Apache 孵化项目管理委员会成员
2 .关于我
羡辙
• 活跃的开源社区贡献者（GitHub：Ovilia）
• 个人主页：zhangwenli.com
• ECharts 核心开发者
• ECharts Apache 孵化项目管理委员会成员
4 .日程
• 关于 ECharts
• 大数据可视化的价值
• ECharts 的大数据渲染能力
• 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 双引擎
• 丰富的图表类型
• 数据与样式分离
• 无障碍访问支持
• 微信小程序支持
15 .大数据可视化的价值
实时交互的
发现更多信息
大数据可视化
快速理解、传递信息
16 .大数据可视化的价值
现实情况……
• 现实的大数据需求 vs. 浏览器性能限制
• 预计算 / 服务器端数据降级的不足
• 额外开发负担
• 额外的计算资源需求
• 不易实现交互
• 不易实现良好的视觉效果
17 .大数据可视化的价值
大数据渲染的难点
• 程序执行时长
• 浏览器无响应、渲染结果等待过久、交互卡顿
• 内存占用
• 浏览器崩溃、GC 开销过大
• 大数据网络加载
• 数十MB，传输时间过长
19 .ECharts 的大数据渲染能力
千万级数据渲染 ~200万像素
屏幕分辨率
1920x1080
22 .大数据渲染的解决方法
• 基于场景特点的优化
• 程序层面的优化
• 用户感观的优化
• 数据加载的优化
23 .基于场景特点的优化
• 例子：50万数据量的折线图，降低采样率
25 .基于场景特点的优化
基于场景特点的优化
• 优点
• 性能提升明显
• 开发成本低
• 负面视觉影响低
• 缺点
• 受业务场景局限
26 .大数据渲染的解决方法
• 基于场景特点的优化
• 程序层面的优化
• 用户感观的优化
• 数据加载的优化
27 .程序层面的优化
• 通过改善程序结构、代码表达
• 从而优化程序执行效率
29 .程序层面的优化
5毫秒的成本
• 60 FPS： 1000ms / 60 = 16ms
• 20 FPS： 1000ms / 20 = 50ms
热门城市
