F6：小屏玩转图可视化

介绍

F6 是一款可以快速、流畅运行于移动设备中的图可视化引擎，通过丰富的布局、组件及分析能力，帮助用户落地跨平台的图可视化应用解决方案。在H5、小程序等移动端平台上，对包体积、性能有更高的要求，也需要定义一套合适的交互模式。针对以上问题，我们在G6的基础上重新设计并构建了F6。F6 不仅具有基础的关联图绘制、事件、动画，同时内置了常用的移动端交互模式、丰富的布局和分析组件，通过简单的配置即可使用。

核心能力

布局能力

图布局是图可视化的关键，它帮助我们高效地组织起杂乱无章的“点”与“线”。F6 与G6 具备相同的布局能力，同时我们也在针对小屏设备进行优化，用户可以方便的将现有G6应用迁移到移动设备中，F6 同时提供自定义布局能力，在特殊场景下用户可以实现自己的布局算法。

UI能力

作为一款便捷易用的图可视化引擎，我们期望开发者以最低的学习成本，快速上手开发应用。在「股权穿透」等应用的落地实现过程中，我们还原复杂节点的时候，花费了大量时间，但这样的开发成本无疑对不了解图形语法的开发者是一个巨大的挑战。为了解决这个问题，我们开发了@antv/f6-ui，大家使用已有的web知识即可在应用中快速还原节点。以下我们以「股权穿透」为例，在使用@antv/f6-ui后，整体开发效能有了较大的提升。直接看代码实现（以下代码均可以在F6的storybook中查看调试）


@antv/f6-ui 实现（83行）github.com/antvis/F6/b…	图形语法实现（170行）
github.com/antvis/F6/b…

从以上两部分代码实现来看，整体复杂程度会大大减低，方便用户快速迭代实现业务。

多端支持

F6 在设计阶段，我们就充分考虑了不同端的兼容适配，目前已经支持了支付宝小程序、微信小程序以及标准HTML5，更多端的适配也在进行中，以微信和支付宝小程序为例，我们抹平了不同平台的渲染差异，只需一套代码，即可快速运行在不同平台。

支付宝微信

很多开发者可能使用了各种各样的中间层框架，来实现代码的跨端，为了降低开发难度，我们也提供了uniapp的Demo及使用文档，方便开发者在非原生环境下使用F6绘图，其他框架的示例也会陆续推出。

动画

为了更好的演示图的关系以及流程链路，边和节点的动画必不可少，我们支持了最基础的动画，更强大的动画能力也在规划设计中，也期望更多的用户能够参与进来，提出更多建设性的意见。

分析能力

可视化应用最重要的一个方向就是图的分析能力，将原本错综复杂的基础数据，通过找寻其中的关联关系，组合起来，然后提供给相应的分析人员进行快速决策、快速判断，以降低业务中的各种风险。如何做好分析能力至关重要，分析人员可以通过快速的筛选配置，在最短的时间获取有效信息，通过这些有效信息，即可进行更加专业化的分析。 F6的分析能力在设计之初也进行了大量调研，与设计师、风控、业务、产品等不同岗位的同学进行了沟通，然后针对收集到的信息进行整理归纳。在移动端上分析能力相比pc端更难，更小的屏幕会使得整体展示方式需要额外定制，操作体验同样需要定制。

想要更多？

欢迎大家访问 f6.antv.vision/zh/docs/exa… 查看更多示例哦

业务应用

F6已经发布，并已经开源(github.com/antvis/f6)，我们在内部业务中也做了很多探索和完善，基于已有的《企业风控白皮书》和我们在移动端设计、开发中的经验，我们沉淀了「风控可视化组件库」，可以方便的支撑业务，未来也会逐步开源，提供给开发者使用，快速搭建自己的风控应用。图可视化解决方案.pdf 业务发展影响着引擎的升级，引擎升级同样也同样推进业务落地。这一年，我们在移动端完成了「股权穿透」、「查关联1、2期」、「关联方认定」等需求，同时我们也在不断的探索业务落地的模式，如何更好的满足业务需求，以及更好的服务社区，正是我们努力的方向。


查关联1期	查关联2期	股权穿透	关联方认定

未来的探索

图可视化经历了最初几年的发展，各行各业不论从演示到分析都出现了爆发增长，更多的开发者投入到了可视化的开发中，我们也会不断迭代完善F6，帮助开发者在移动端落地更好的可视化应用，让更多业务在图可视化上获得收益。同时在移动端图可视化的道路上，我们也会不断的探索，未来不仅仅是小程序及H5，各种便携设备中我们也期望能有更多落地，在更多设备上，做更好的图可视化，见微·知著。