金融场景下移动数据可视化的挑战和解法

1. 支付宝体验科技沙龙 · 数金荟移动端数据可视化方案的挑战与设计演讲人：索丘蚂蚁-数字金融体验技术部-可视化工程师

2. 关于我多年移动端和可视化经验，开源爱好者，目前主要负责移动端可视化引擎户外爱好者，露营新手村

3. 什么是数据可视化

4. 什么是数据可视化数据可视化就是将抽象数据进行数据可视化表达

5. 什么是数据可视化数据可视化就是将抽象数据进行数据可视化表达

6. 什么是移动端数据可视化方案

7. 移动端数据可视化方案

8. 从需求出发这样的提示能实现吗？环图能实现这种选中样式吗？这样的多层嵌套能实现吗？

9. 需求永远在预期之外

10. UI 定制样式⻛格 UI 扩展个性化支持小程序吗？类型丰富速度快配置简单扩展方便功能全选择多执行效率使用方便容易理解上手容易场景覆盖广体积小按需支持服务端渲染吗概念少

11. 目录 01 02 03 04 渲染引擎可视化能力扩展与定制能力跨端能力

12. 1. 渲染引擎

13. 解决图形渲染的核心诉求 1. 图形绘制能力 1. 2. 3. 4. 5. 多边形（三角形，矩形，多边形等）圆行点线文本 6. 图片 2. 事件交互 3. 图形动画

14. 统一的渲染能力 Canvas2D WebGL SVG

15. 标准的事件系统

16. 标准的事件系统

17. 兼容 WAA 的动画系统 WAA ( Web Animation API )

18. 兼容 WAA 的动画系统 WAA ( Web Animation API )

19. 方便灵活的统一渲染（FEngine） 1. 多底层渲染 ( Canvas, SVG, WebGL ) 的图形能力 2. 标准的事件机制 3. 完善的动画系统 4. 布局系统（Flex 等） 5. 高级事件（onPress, onPan, onPinch 等） 6. JSX 声明式的标签定义 https://github.com/antvis/FEngine

20. 2.可视化能力

21. 可视化流程数据映射图形

22. 可视化流程数据映射图形

23. 可视化流程数据映射图形映射原始数据整理数据数据整理几何数据图像数据数据补全绘制

24. 可视化流程映射绘制折线图柱状图其他

25. 数据映射能力几何数据绘制 F2 点边数据绘制 F6 地理空间数据绘制 F7 图形语法统计数据关系数据地理数据图 & 布局算法地理映射

26. 数据映射和绘制分离折线图形语法统计数据几何数据矩形扇形

27. 数据映射和绘制分离 +

28. 数据映射和绘制分离

29. 再来看需求实现个性的渲染逻辑实现选中态的渲染实现新的数据映射

30. 3.扩展与定制

31. 数据映射和图形绘制灵活扩展折线图形语法统计数据几何数据矩形扇形

32. 可视化的框架与分层框架 & 类库抽象程度 High Level 高阶封装可视化类库可视化语法原子模块渲染引擎 Low Level 绘图技术 Google Charts AntD Charts G2Plot F2 F6 Scale AntV G ECharts FCharts Vega G2 Layout D3 FEngine Canvas2D SVG pixi.js Visx three.js WebGL

33. 可视化的框架与分层框架 & 类库抽象程度 High Level 高阶封装可视化类库可视化语法原子模块渲染引擎 Low Level 绘图技术 Google Charts AntD Charts G2Plot F2 F6 Scale AntV G ECharts FCharts Vega G2 Layout D3 FEngine Canvas2D SVG pixi.js Visx three.js WebGL 解决个性化问题

34. 可视化的框架与分层框架 & 类库抽象程度 High Level 高阶封装可视化类库可视化语法原子模块渲染引擎 Low Level 绘图技术 Google Charts AntD Charts G2Plot F2 F6 Scale AntV G ECharts FCharts Vega G2 Layout D3 FEngine Canvas2D SVG pixi.js 解决能力扩展问题 Visx three.js WebGL 解决个性化问题

35. 可视化的框架与分层框架 & 类库抽象程度 High Level 高阶封装可视化类库可视化语法原子模块渲染引擎 Low Level 绘图技术 Google Charts AntD Charts G2Plot F2 F6 Scale AntV G ECharts FCharts Vega G2 Layout D3 FEngine Canvas2D SVG pixi.js 解决易用性问题解决能力扩展问题 Visx three.js WebGL 解决个性化问题

36. 可视化的框架与分层框架 & 类库抽象程度 High Level 高阶封装可视化类库可视化语法原子模块渲染引擎 Low Level 绘图技术 Google Charts AntD Charts G2Plot F2 F6 Scale AntV G ECharts FCharts Vega G2 Layout D3 FEngine Canvas2D SVG pixi.js 场景定制解决易用性问题解决能力扩展问题 Visx three.js WebGL 解决个性化问题

37. 可视化的框架与分层框架 & 类库抽象程度 High Level 高阶封装可视化类库可视化语法原子模块渲染引擎 Low Level 移动端数据可视化绘图技术 Google Charts AntD Charts G2Plot F2 F6 Scale AntV G ECharts FCharts Vega G2 Layout D3 FEngine Canvas2D SVG pixi.js 场景定制解决易用性问题解决能力扩展问题 Visx three.js WebGL 解决个性化问题

38. 蚂蚁数据可视化可视化的框架与分层框架 & 类库抽象程度 High Level 高阶封装可视化类库可视化语法原子模块渲染引擎 Low Level 移动端数据可视化绘图技术 Google Charts AntD Charts G2Plot F2 F6 Scale AntV G ECharts FCharts Vega G2 Layout D3 FEngine Canvas2D SVG pixi.js 场景定制解决易用性问题解决能力扩展问题 Visx three.js WebGL 解决个性化问题

39. 社区数据可视化蚂蚁数据可视化可视化的框架与分层框架 & 类库抽象程度 High Level 高阶封装可视化类库可视化语法原子模块渲染引擎 Low Level 移动端数据可视化绘图技术 Google Charts AntD Charts G2Plot F2 F6 Scale AntV G ECharts FCharts Vega G2 Layout D3 FEngine Canvas2D SVG pixi.js 场景定制解决易用性问题解决能力扩展问题 Visx three.js WebGL 解决个性化问题

40. 移动端数据可视化方案 ( FCharts ) 开箱即用的可视化图表库

41. 可视化领域解决方案

42. 可视化的框架与分层 High Level 高阶封装可视化类库可视化语法 Low Level FCharts G2Plot F2 F6 原子模块 Scale 渲染引擎 AntV G 绘图技术 Google Charts AntD Charts ECharts Vega G2 D3 Layout FEngine Canvan2D pixi.js SVG Visx three.js WebGL

43. 可视化的框架与分层可视化领域解决方案 High Level 高阶封装可视化类库可视化语法 Low Level FCharts G2Plot F2 F6 原子模块 Scale 渲染引擎 AntV G 绘图技术 Google Charts AntD Charts ECharts Vega G2 D3 Layout FEngine Canvan2D pixi.js SVG Visx three.js WebGL

44. 可视化的框架与分层可视化领域解决方案 High Level 高阶封装可视化类库可视化语法 Low Level FCharts G2Plot F2 F6 原子模块 Scale 渲染引擎 AntV G 绘图技术 Google Charts AntD Charts ECharts Vega G2 D3 Layout FEngine Canvan2D pixi.js SVG Visx three.js WebGL 移动端数据可视化

45. 可视化的框架与分层可视化领域解决方案 High Level 高阶封装可视化类库可视化语法 Low Level FCharts G2Plot F2 F6 原子模块 Scale 渲染引擎 AntV G 绘图技术 Google Charts AntD Charts ECharts Vega G2 D3 Layout FEngine Canvan2D pixi.js SVG Visx three.js WebGL 蚂蚁数据可视化移动端数据可视化

46. 社区数据可视化可视化的框架与分层可视化领域解决方案 High Level 高阶封装可视化类库可视化语法 Low Level FCharts G2Plot F2 F6 原子模块 Scale 渲染引擎 AntV G 绘图技术 Google Charts AntD Charts ECharts Vega G2 D3 Layout FEngine Canvan2D pixi.js SVG Visx three.js WebGL 蚂蚁数据可视化移动端数据可视化

47. 面向特定领域的通用方案原子化拆解原子组件

48. 面向特定领域的通用方案原子化拆解

49. 4.跨端能力

50. 编写一次，随处运行 H5、小程序、Node.js、Native 我全都要

51. 面向 Web 的跨端能力小程序技术栈多端适配 F-my 可视化方案可视化引擎 Vue F-react F-vue FCharts F2 渲染引擎绘图技术 F-wx React F6 F7 FEngine Canvas SVG WebGL

52. 面向 Native 的跨端能力 Web 技术栈 Native IOT F2 F6 F7 FEngine JS Runtime G Render API 调用绘图技术 JSON Render JSON G Mobile G Native WebCanvas Native Canvas

53. 面向 Native 的跨端能力

54. 面向 Native 的跨端能力 Web 技术栈 Native IOT F2 F6 F7 FEngine JS Runtime G Render API 调用绘图技术 JSON Render JSON G Mobile G Native WebCanvas Native Canvas

55. 更多 1. https://github.com/antvis/FEngine 2. https://github.com/antvis/F2 3. https://github.com/antvis/F6 4. https://github.com/antvis/F2Native

56. THANKS