AntV 年度发布：利业·立业 - AntV 与业务的故事

作者 | 步茗

AntV 是一个数据可视化项目，也是一个团队，蚂蚁集团数据可视化团队，一群有爱有梦的人，怀揣「让人们在数据世界里获得视觉化思考能力」的梦想前行， 希望成就智能时代全球领先的数据可视化解决方案，满足与日俱增的数据洞察需求。

AntV 目前覆盖了统计图表、移动端图表、图可视化、地理可视化、2D 绘图引擎和智能可视化多个领域，主要包含 G2栈、F2栈、G6栈、X6栈、L7栈、AVA 以及一套完整的图表使用和设计规范。得益于丰富的业务场景和用户需求挑战，AntV 经历多年积累与不断打磨，已支撑起阿里集团内外 20000+ 业务系统，通过了日均千万级 UV 产品的严苛考验，是阿里经济体数据可视化最重要的基础设施。

跟往年的品牌日一样，今天依旧会有几个底层基础类库的大量更新发布，除此之外，非常高兴的向大家介绍 AntV 产品矩阵上新添两个新成员：

• F2Native，开箱即用的跨平台高性能可视化解决方案，国民级应用支付宝上的图表组件；
• X6，底层基于 SVG，脱胎于蚂蚁实际的业务场景，专注图编辑领域的组件库；

从 2017.11.22「 开源·开放 」、2018.11.22「 知新·知心 」到2019.11.22「 知源·致远 」，这是 AntV 的第4个品牌日，今年的主题是「 利业·立业 」我们想和大家分享 AntV 将数据可视化能力赋能蚂蚁集团、阿里集团内部业务的故事。

生于业务

2015 年初，刚刚具备雏形的 G2 被投入到了一些蚂蚁内部业务中去试用，但是用户反馈性能很差。于是我们开始自研底层渲染引擎 G。一年后，G2 2.0 已经支持了很多零散的内部需求。2016 年，口碑网的一个客户平台带着对图可视化的强需求找到了 AntV，于是有了 G6。自此，源源不断的业务诉求开始推动着 AntV 产品矩阵蓬勃发展。

图形语法、商业智能

G2 所负责的基础统计图表是前端可视化业务最高频的场景、最核心的战场。大量管理界面、数据产品都需要使用统计图表，但是其中最重度的业务必然是 BI 商业智能产品。2016 年底，蚂蚁集团大数据部启动 BI 产品 DeepInsight 的第三个大版本，使用社区开源的可视化方案，接入大量可视化组件，大大增强产品的数据可视化能力。然而在逐步的产品迭代和演进过程中，大量的可视化问题暴露出来，主要集中在图表的丰富度问题、图表体验问题和多维探索分析能力。为了解决这些问题，AntV 与 DeepInsight 深度合作，DeepInsight 的同学深入到 G2 栈参与技术研发。

G2 基于图形语法的可视化实现形式在内部是有争议的。固然，图形语法保证了它的灵活性，但当业务上的开发同学想要使用 G2 时却遇到了学习成本和门槛过高的问题。一直以来，AntV 都在探索灵活性与低门槛的平衡。2019 年，我们推出了基于图表分类的配置式可视化库 G2Plot，其底层依赖于 G2。自此，G2 栈拥有了两种产品形态：G2 面向追求灵活度和专业度的可视化工程师，而 G2Plot 提供更快捷、更友好的业务可视化开发能力。

G2Plot 被很多业务方寄予厚望，但它的进展并不顺利。去年我们摸索着完成了它的 1.0 版本发布，然而由于零散的细节需求从大量不同的业务涌入，AntV 的研发同学很难在各种时限的要求中做到完美的架构设计。伴随着各种各样的吐槽，反而让我们坚信这是一个对的产品方向。2020，在之前的经验和教训之上，G2Plot 不仅做了全新的设计，而且还充分发动了社区的力量来参与研发。研发团队做了大量的竞品调研、业务需求分析、细节设计打磨，力求做到我们承诺的“默认好看、默认好用”。G2Plot 2.0，今天，它来了。

近年来蚂蚁业务持续高速增长，人员紧缺。为了高效支撑各业务线前端业务开发的战场，自从去年 AntV 与 Ant Design 联姻以来，我们推出了 Ant Design Charts，可以理解为这将是整合 AntV 整个技术栈为一体的 React 版图表类库。它迎合业务而生，对内支撑着云凤碟和 TechUI, 对外和 Ant Design 形成闭环，已经是很多公司的不二之选。从对内的 0.x 版本到目前的 1.x 版本，经历了无数次打磨，基础统计图表功能上完全透出 G2Plot 的能力, 同时结合 G6 库，希望她能延续 Ant Design “低门槛，高效率”的美好特性。

在帮助业务研发提效方面，AntV 的投入可谓“不惜成本”。业务爆发增长过程中的一些创业型战场可能出现产品、设计甚至专业前端人员缺失的场景。这些业务也有数据可视化的需求，而他们更加需要 AntV 的支持。为此，AntV 开始探索智能可视化、自动可视化的场景。去年 SEE Conf 大会我们公开了 AVA 智能可视化框架，期望帮助开发人员自动推荐图表，甚至“一行代码完成图表开发”。经过一些内部场景的试水，今天我们也开源了 AVA 的 1.0 版本。AVA 也将支持 DeepInsight 的增强分析场景，期望能在前沿业务中快速成长。虽然这一条路还很长很长，但我们会持续努力，终有一天从“稚嫩”走到“智能”。

图分析、图编辑

大约在 2017 到 2018 年，随着关系网络和图分析的普及，涌现出许多有图可视化需求的业务场景。图（graph），是一种实体之间的关系网络数据，在可视化中主要以节点和连线组合成的图形形式出现。业务中往往包含大量的、错综复杂的关系数据，对它们进行可视化是一个很大的挑战，但也是一个重要的需求。

2018 年初，许多业务在做技术选型的时候开始对比国外的工具和 AntV 的新成员 G6。网商银行的新业务需要基于图的风控分析系统和基于关系的故障定位系统，于是开始尝试接触图可视化和 G6。当时 G6 3.0 还在规划，需求是通过 G6 2.0 版本来进行开发的。整个过程比较顺利，但是由于 G6 能力的限制，在需求上砍掉了两个功能：一个是布局不理想，一个是动画效果。业务方的开发同学在布局上花了很大的力气也没有找到一个合理的布局算法，最后就去看开源的布局算法代码，自己定制。当时的 G6，对于业务方开发来说仅仅是提供了图的基础渲染机制，要实现复杂的能力还需要投入非常多的精力和时间。同样对 G6 能力的局限性感到遗憾的还有一些图分析产品，许多业务使用的是 React 技术栈，但是当时 G6 还没有针对 React 提供一些开箱即用的组件。

虽然年轻的 G6 还有很多不足，但是 AntV 的同学一直在努力建设。有时业务方提出的需求，第二周就得到了特性 Demo，这给了许多业务方信心。2019 年，图可视化相关的业务爆发了。知识图谱、流程绘制、图数据库、关系分析等等相关业务和需求都开始使用 G6。蚂蚁有一个金融知识图谱相关的业务，在外部组件和 G6 之间反复横跳，但是最终因为看到了其他产品上 G6 日益精进的表现而选择了 G6，并且连业务方的设计师也投身了 AntV 参与图可视化设计规则的制定。除了蚂蚁的设计师，阿里集团的设计师也贡献了力量。阿里云的智能研发平台 DataWorks 和机器学习平台 PAI 都有大量场景，比如业务流程编辑、图数据搜索、数据血缘展示等等。这些业务设计师的领域专业经验沉淀到了 G6 3.0 版本中，AntV 和业务一起打磨和革新，G6 一直在成长。

如今，在迈向第四个版本的路上，G6 已经在功能特性、易用性及性能等方面都有了很大的提升。刚出道时被诟病布局问题，如今已经支持了各种布局算法；早期不支持 React 生态，现在也有了开箱即用的 Graphin；至于交互、动画方面，现在也有了丰富而有用的交互能力。

图编辑也是图领域一个重要方向，许多流程图、关系图绘制场景都需要它。基于蚂蚁内部的机器学习算法建模平台多年的可视编排能力打磨，我们决定把其中的图编辑内核抽取出来，成为 AntV 继 G6 图分析的另一个图可视化领域分支，图编辑 X6。经过近一年的内部业务打磨，X6 在功能、性能、生态等方面也都已经比较完整。今天我们很高兴能为可视化开源社区带来 X6 1.0 正式版本，请多关照！

除此以外，AntV 在集团内外已经发展出了蓬勃的图可视化生态，业务类型覆盖云安全、企业风控、图数据库、金融风控、知识图谱、性能优化等大量场景。汇集大量产品设计和技术研发经验，近30位产品经理、设计师和工程师的通力合作，我们积累出《AntV 图可视化解决方案白皮书 1.0》。这可能是国内出品最完整的一套图可视化解决方案白皮书，今天我们也将开放出来，希望能帮助更多业务拥有更科学高效的图可视化能力。

设计与责任

针对一些特定的场景案例，我们还做了很多细节的设计打磨。比如在监控场景中，由于真实数据的不可控性与实时性，往往存在着数据信息过于密集难辨认，或者在某一时间点突然出现极值（数值徒增），而导致整个图表难以阅读的情况。我们通过 Y 轴缩略轴和列表式图例等交互形态，从设计上解决了这类问题。再比如，在数据分析场景中，用户往往需要对某一指标进行多维监控。环绕关键指标查看衍生指标、拆分维度、观察时序趋势、作进度跟进，这些都可以通过指标卡来完成。AntV 基于业务场景提炼出一套灵活多变的指标卡，它可以演示成各种不同的指标卡类型，从而解决这一大类问题。

另外，我们今年的官网改版，把重点放在了文档和示例体验上。这是 AntV 被诟病最多的地方，我们内部认真梳理了各技术栈的文档，希望改善研发者的开发体验，让图找到使用场景，让开发者找到 API。今年官网文档全面升级为交互式文档，通过图文合一的方式，希望能给开发者带来更流畅的体验。

支付宝作为拥有亿级用户的国民应用，一直非常重视社会责任，AntV 也不例外。移动端图表库 F2 今年收到过一个用户反馈，在支付宝某页面板块中的图表不支持盲人阅读。相关的同学马上动手完成了 F2 的无障碍处理。站在业务的角度，让视障用户也能享受技术带来的便利是我们的责任。

结语

技术研发要从业务中来、到业务中去，我们只有贴近业务，才能看清动向。技术研发还要走在业务需求的前面，当用户的诉求来临时我们早已为你做好准备。既要为业务创造价值，也要把自己做成一个好工具，AntV 一直在服务业务的道路上前行。

AntV，蚂蚁集团、阿里集团数据可视化基础设施。

AntV，一群有爱有梦的人，怀揣「让人们在数据世界里获得视觉化思考能力」的梦想前行。

AntV，利业 · 立业！

附

AntV 2020 品牌日的发布详情

• 利业·立业 - AntV 与业务的故事：
  https://www.yuque.com/antv/blog/2020story

• 技术专文

  • G2Plot 2.0 全新来袭
    https://www.yuque.com/antv/blog/2020g2
  • F2Native 1.0 新的起点
    https://www.yuque.com/antv/blog/2020f2
  • G6 栈：图可视分析如此简单
    https://www.yuque.com/antv/blog/2020g6
  • X6 1.0 抱歉来晚
    https://www.yuque.com/antv/blog/2020x6
  • L7 2.3 业务为本完善生态
    https://www.yuque.com/antv/blog/2020l7
  • AVA 1.0 你的图表参谋
    https://www.yuque.com/antv/blog/2020ava

• 设计专文

  • 2020，贴地飞行的 AntV 设计：
    https://www.yuque.com/antv/blog/2020design

• 解决方案专文

  • AntV 图可视分析解决方案，来啦：
    https://www.yuque.com/antv/g6/solution

AntV 项目链接

欢迎关注我们的 GitHub 项目，点亮 star 了解我们的实时动态，期待 PR：

AntV 官网：https://antv.vision/

G2：https://github.com/antvis/g2
G2 是一套基于可视化编码的图形语法，以数据驱动，具有高度的易用性和扩展性，用户无需关注各种繁琐的实现细节，一条语句即可构建出各种各样的可交互的统计图表。

G2Plot：https://github.com/antvis/g2plot
G2Plot 的定位是开箱即用、易于配置、具有良好视觉和交互体验的通用图表库。

F2：https://github.com/antvis/f2
F2 是一个专注于移动，开箱即用的可视化解决方案，完美支持 H5 环境同时兼容多种环境（node, 小程序，weex）。完备的图形语法理论，满足各种可视化需求。专业的移动设计指引为你带来最佳的移动端图表体验。

F2Native：https://github.com/antvis/F2Native
F2Native 是一个专注于客户端，开箱即用、高性能的可视化解决方案，完备的图形语法理论，满足你的各种需求，专业的移动设计指引为你带来最佳的移动端图表体验。

G6：https://github.com/antvis/g6
G6 是 AntV 旗下的图可视化与图分析引擎，G 来自于 Graphic、Graph ，意味着我们要基于图分析技术做图可视化；6 来自于《六度分隔理论》，表达了我们对关系数据、关系网络的敬畏和着迷。

Graphin：https://github.com/antvis/graphin
Graphin 是一个基于 G6 封装的关系可视分析工具 ，简单，高效，开箱即用，取自 Graph Insight，图的分析洞察。

X6：https://github.com/antvis/X6
X6 是 AntV 旗下的图编辑引擎，提供了一系列开箱即用的交互组件和简单易用的节点定制能力，方便我们快速搭建 DAG 图、ER 图、流程图等应用。

L7：https://github.com/antvis/l7
L7 是一个基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。

AVA：https://github.com/antvis/AVA
AVA 是为了更简便的可视分析而生的智能可视化框架。

G：https://github.com/antvis/g
G 是 AntV 几个产品共同的底层 2D 渲染引擎，高效易用，专注于图形的渲染、拾取、事件以及动画机制，给上层 G2、F2、G6 提供统一的渲染机制。

ChartCube：https://chartcube.alipay.com
ChartCube 是一个可以快速完成图表制作的在线工具，只需要三步就可以创建出高品质的图表。

关注「Alibaba F2E」
把握阿里巴巴前端新动向