导读

F 系列是专注于移动端的可视化系列产品，包括 F2、F2Native、F6 的可视化引擎，我们为移动端提供快速、灵活、且具多端兼容性的可视化方案。

去年 1122 我们基于移动端的特点和共性正式提出了 F 系列可视化产品，立足于移动端，统筹设计移动端可视化解决方案。经过我们在蚂蚁一年的落地和实践，今年我们正式统一了 F 系列的底层架构 （FEngine） ，实现了 F 系列底层架构的的互通，而且我们在底层渲染引擎对接至最新的 G 5.0 上，实现了和 AntV 系列产品的统一与互通，同时 F2 也正式进入 5.0 时代。

F 系列新架构

下面，我们再来重点介绍几个 FEngine 重要更新与特性

多渲染引擎

在 5.0 中我们在原有的渲染引擎 Canvas2D 之上增加了 SVG 与 WebGL 。开发者可以根据使用场景，数据源大小等因素自由选择/切换渲染引擎。我们向下适配不同的渲染环境，向上对开发者保持使用方式的一致性，只需简单配置即可实现渲染引擎的切换

UI & 布局

在 UI & 布局这块，FEngine 延续了 F2 在移动端的实践，并做了进一步的升级，可以让我们非常方便的构建 UI，以及使用 Flex 来进行 UI 的布局，就跟我们使用 dom 和 css 一样。

事件

在 FEngine 里，你可以在任意元素上添加想要的事件，在事件的支持上，我们不仅支持了常见的 Touch、Mouse、Point，还直接内置 Press（按压）、Pan（平移）、Pinch（缩放）、Swipe（快扫）等移动端常见的合成事件，能非常方便地绑定并使用。

Lottie

Lottie 是 Airbnb 开源的一套跨平台的完整的动画效果解决方案，设计师设计动画，开发者无缝还原。在底层里，我们也实现了 Lottie 的动画协议，在 FEngine 里我们也可以非常方便的使用 Lottie 动画，而且只需要设置长、宽、位置、动画配置等一些列简单参数就可以实现 Lottie 播放。

F2 5.0 新版本新体验

talk is cheap，show me the picture

得益于 FEngine 的统一，F2 也将轻装上阵，更专注做统计数据的可视处理，下面我们就一起来看下架构升级带来的「开发者可以感知的变化和体验」

多系列图表间的切换

相比于 4.x 中同类型图表间的形变，新版本可以支持任意不同图表间的形变。无论是折线图、柱状图、扇形图还是气泡图、饼图、玫瑰图，都可以做图形形变动画。使用 Timeline 组件，可以轻松自动播放组件内的图表。

视觉表达

视觉表达的有效性和美观性都很大程度的影响了图表的吸引力和数据传达效率。在视觉表达方面，我们结合业务场景及经验新增了以下 feature。

扇区圆角

支持饼图、环形图、玫瑰图、旭日图的扇形圆角配置，并且四个角可以配置不同的圆角大小，带来更柔美的视觉感受。可别小看圆角配置，适当增加圆角，可使图表更圆滑无明显切角，增加一丝活泼元素。

Lottie 标注

在业务侧我们经常会用 Lottie 来增强一些效果表达，所以在 F2 中，我们也内置了 Lottie 标注，可以非常方便地在图表中使用 Lottie。体感会更加顺滑，设计就可以有更多的选择空间了。

事件与交互

交互方面，今年新增了一种双轴方向上的交互形式。类似于地图的操作交互，可灵活平滑地平移缩放及快扫，帮助用户进行探索式交互选择。使用方式也非常简单，基于 4.x 单轴的缩放平移交互组件 < Scollbar />，在其中 mode 参数上增加可传值 [‘x’,’y’]。

手绘风格

得益于 G 的灵活插件设计，我们可以在 F2 5.0 中引入许多有趣的插件，使用方式也非常方便。如引入 @antv/g-plugin-rough-canvas-renderer ，注册在 render 上面，图表即可一键切换为手绘风格，让你的图表可以萌萌哒🙊，具有视觉吸引性。

开发者体验

官网加速

旧版官网访问速度常常被诟病太慢，极大地影响了查阅文档的速度和开发者体验。所以今年新的 F2 官网迁移到了 dumi 2.0 之上，速度超快！欢迎体验：https://f2.antv.antgroup.com/

组件 Component 和图形 Shape 可以任意嵌套使用

在 C 端场景中，对面千变万化的需求和设计，F2 内置的常规图表样式往往不满足，所以常常需要开发者自定义图形。4.x 中组件为图形的上层概念，因此图形标签不可包在组件外层。但对于很多高度自定义场景中，往往需要goup 标签包裹多个组件。在新架构下，图形和组件的概念没有变但支持了该写法，组件与图形可随意嵌套。

结语

未来会有什么，who knows？但无限♾️可能啦

虽然今年我们花费了大部分时间来做架构调整，但这也为未来奠定了基础。基于 F 系列的底层共通，那么用 F2 的图表作为 F6 的节点，或者是 F2 与 F6 的图表间动画形变转换都将可以实现。基于 webgl 渲染器以及场景对呈现质感的要求，三维图表是否可以被合适定义和表达。lottie 的支持是否可以与现有图表形式迸发出更多的火花。

总之，我们将保持初心，继续围绕移动端可视化特点，在呈现、轻巧、灵活拓展方面探索⛽。最后欢迎感兴趣同学参与讨论和共建。