🙋🏻♀️ 编者按：本文是蚂蚁集团前端工程师索丘在『支付宝体验科技沙龙暨数金荟』的分享内容，欢迎享用～
前言
什么是数据可视化
在进入正题之前，我们简单看一下什么是数据可视化，数据可视化通俗地讲就是将抽象数据进行数据可视化表达，比如下面的例子，我们把抽象的统计数据进行可视化表达后形成 折线图、柱状图、饼图等，这些都是数据可视化。
当然而除了统计数据外，还有关系数据，比如我们的关系图，他是将关系数据可视化后的结果，这些都是我们所说的数据可视化。
什么是移动端数据可视化方案
在看完什么是数据可视化后，我们再来看看什么是移动端数据可视化，移动端数据可视化说白了就是我们在移动端实现的数据可视化，比如下面的一些场景。
需求永远在预期之外
那么我们今天的主题是《移动端数据可视化方案的挑战与设计》，在进入正题前，我们先看我们在做移动端可视化展现时经常会碰到一些问题。
- 这样的圆角提示能实现吗？官网上也没看到有类似的样式
- 这样的环图能实现这种选中样式吗？它和你们默认提供的差异也很大
- 这样的多层嵌套能实现吗？
这些都是我们在日常工作中经常碰到的场景和案例，当然，实际的问题还远比这些要多，我们碰到的需求永远在预期之外，那么在面临移动端这些复杂且个性的可视化需求时，我们是如何应对和设计的呢，下面我将从以下 4 个方面深入和展开
1. 渲染引擎
渲染引擎是解决核心的图形渲染渲染能力，可视化需要将数据可视化展示出来，所以这个就是离不开核心的渲染能力，而我们在底层实现了一套统一的渲染引擎 G（https://g-next.antv.vision/zh/docs/guide/introduce）
渲染能力
在渲染引擎层，我们实现了统一的渲染能力，我们可以通过简单且一致的方式，快速实现 UI 的绘制
事件系统
除了 UI 绘制能力外，我们还实现了标准的事件系统
动画系统
动画也是可视化里面一项很核心的功能，我们 G 里也实现了一套完整的动画系统
统一的渲染引擎 FEngine
为了使用方便，我们实现了一套类似浏览器的渲染能力，可以让我们非常方便地构造UI，通过声明式的标签，就可构造任意我们先要表达的样式，而且使用方式和 DOM 基本一直，可以非常方便地上手并使用。
2. 可视化能力
可视化能力是数据可视化中一块核心的功能， 可视化能力就是将数据进行可视化输出的能力，那么在讲可视化能力之前，我们先简单看下可视化流程
可视化的流程用一句话概括就是「将数据映射到图形」的过程。当然在映射过程中，我们还经历了「数据整理」、「数据映射」、「数据补全」、「图像处理」等一些列过程。
而如果我们通过一份 json 数据，来看数据的变化的话，那么我们就能看到如下的数据变化过程
没错，数据映射的核心就是将抽象的数据映射成图形的几何数据(位置、大小，颜色等)，而如果我们再来看前面的需求，我们就会发现，大部分的差异都是在 UI 的差异上，所以如果我们将映射的逻辑和 UI 绘制的逻辑分开，是不是就能解决大部分问题呢，基于这个思路，我们底层把数据映射和 UI 界面逻辑分离，通过 逻辑 + UI 的方式形成完整的功能组件
通过这种方式，我们在复用数据映射逻辑的基础上，实现了 UI 的灵活自定义，而我们可视化的核心也变成了丰富的数据映射能力，和简单易用的 UI 构造能力，如下图所示，我们通过统一的数据映射逻辑，就能构造丰富的 UI 样式。
3. 扩展与定制
前面提到，我们通过逻辑和 UI 的分离，实现了 UI 的灵活定义能力，但是当我们面向某个特定场景时，往往会发现某个场景下的 UI 样式有很大的共性，在实际场景中，我们一定希望会有一定的沉淀和复用，而基于逻辑 和 UI 分离的模式，我们可以将一个图表进行原子化的拆解，形成细粒度的原子组件，再通过原子组件的组合模式，实现共性的复用
比如如下的2个场景，他们每个场景的样式风格都很接近，我们就可以通过原子化的拆解，形成单一的原子组件，再通过原子组件组合的方式，去形成完整的可视化图表，我们把这种模式叫做领域方案的定制，当随着我们原子组件的丰富，组合图表的丰富度也将得到大量的提升，而且有了统一的沉淀，我们可以实现统一的升级和迭代。将极大方便我们整体的可视化开发。
4. 跨端能力
最后，再来讲一下跨端，因为今天我们在移动端面临的已经不仅仅只有 H5了，还有小程序、甚至是 Native ，而在实际的业务场景中，我们永远希望一套代码能随处运行，所以，如果建立统一的移动端跨端方式，也是需要我们面对并解决的。
然而，针对移动端的跨端方案，我们可以分成 2 部分去看，「面向 Web 的跨端能力」和「面向 Native 的跨端能力」，因为 web 技术栈 和 非 web 技术栈面临的差异和挑战是巨大的。
面向 Web 的跨端能力
面先 Web 技术栈的跨端方案相对会比较简单，我们只要基于底层的绘图技术，在上面封装统一的实现，让后针对不同的端环境和技术栈进行响应的封装和适配，通过统一的标准就能达到统一的目的
面向 Native 的跨端能力
然而，面向非 Web 技术栈的跨端方案就会变得复杂很多，因为我们底层根本没有浏览器存在，也没有浏览器给我们提供的 canvas、svg、webgl 等这些绘图能力，所以针对 native 的跨端场景上，我们在底层实现类似浏览器 Canvas 的 Native Canvas 来实现 Native 侧的渲染能力。并基于 Native Canvas 我们在上层实现了 同 G 类似的渲染引擎，来实现统一的渲染接口 API，基于统一的底层，我们就可以在上层实现完全的一套代码多端运行。
最后
欢迎关注我们的 github，也非常欢迎找我们进行更深入的交流，谢谢大家
