AntV 是企业级数据可视化解决方案，今年 11.22 是 AntV 第五个品牌日，主题为「 格物·革悟 」。

「格物」意为在业务实践中不断深耕可视化技术，完善产品矩阵。今年将新增的三位成员：

「F6」源于图可视化在移动端的实践，更小的体积，更快的响应速度。「XFlow」 源于图编辑业务，工程易用性的实践产物，基于 X6 引擎，拥抱 React 技术栈。「S2」则是在统计图表领域，根据业务的交叉表分析需求所产生的实践产物。

导读

表，是日常生活工作中被广泛使用的图表之一，说到它的起源大概要从结绳记事，易货交易说起。那时为了交易计算方便，人们就开始拿根小木棍在地上画画写写，渐渐地开始有了最雏形的统计表格。

图1：结绳记事

从记录一维数据的统计表格到两维（两个变量）、直至多维（多个变量)的表格，逐渐承载着用户多维世界的思考，它们提供了多个变量之间相互关系的基本画面，帮助人们发现大数据之间的相互作用，进而进行深入的交叉探索分析，于是有了目前商业 BI 分析领域中使用频率最高的图表之一「多维交叉分析表格」。

图2：表格维度空间映射

市面上开源的表格非常多，大都是基于一维数据的展示型表格，然而好用且能开箱即用的多维分析表格却少之又少。想要实现一个下图这样复杂的透视表格，不仅需要大量的代码逻辑去定制开发，还很难解决在大数据量下的性能瓶颈问题。

图3：KPI趋势表-Powered by S2

S2 是什么

S2是AntV团队推出的数据表可视化引擎，旨在提供高性能、易扩展、美观、易用的多维表格。不仅有丰富的分析表格形态，还内置丰富的交互能力, 帮助用户更好地看数和做决策。

S取自于SpreadSheet的两个S，2也代表了透视表中的行列两个维度。

图4：表体结构

S2 能做什么

多维表用户一般为数据分析师或运营，数据类型为海量点数据，使用多维数据分析场景：通过数据明细，一是有目标性的探查异动发生原因；二是无目标性的探索新洞见新机会。

举个🌰，互联网运营在做人群运营的时候，前期需要找到优先运营人群，即需对人群进行细分和查看基本画像。我们将行列分别放置人群年龄、城市、岗位等维度，数据单元格中通过颜色对人群规模进行染色，便于不同维度交叉下的规模对比。

图5: 单人群占比表

而这样一张表，往往会解决多个场景诉求。

• 场景1:  通过深色热力快速找到大规模占比的人群，通过行列维度查看大规模人群的用户画像
  
• 场景2：通过行列人群属性不同维度交叉分析找到目标人群，查看画像（长什么样，喜欢什么），进行针对性的运营投放策略。

图6：分析思路

基于目标用户和场景下确定了 S2 多维表格高屏效的设计原则，围绕用户行为(Behavior)、场景(Scene) 构建多维表格设计体系。

• 有效性：组件非穷举的，而是基于用户「数据查阅>数据分析>策略建议」最佳实践下的组件设计
• 高密度：表的使用常常多为解决多个场景诉求，展示海量数据明细，因此往往以高密度形态出现；
• 低跳转：追求「零」交互设计，分析思路不断层，保障丝滑的看数分析沉浸式体验
• 
  

表形态

从表形态来说，S2目前提供了明细表格、透视表格两种基础表格形态，同时满足明细数据查看和多维交叉分析两种看数诉求。

不仅如此，S2可以支持通过更改简单的配置项，实现透视表平铺模式、树状模式、指标置于行头、指标置于列头、明细表之间的自由切换。

图10：表形态切换

表交互

为了能提升更好的看数体验，S2内置了丰富的交互能力

图11：Hover 交互

图12：点选交互

图13：圈选交互

此外还有诸如 「单元格合并」、「链接跳转」、「列头隐藏」等业务定制交互和 「自定义交互」能力，详情可参考表格交互。

表分析

字段标记

图形语法在专业数据产品中一般叫「字段标记」，通过不同通道去标记需要用户重点关注的数据，而表格里的数据类型一般就是单点数据，一个格子放置着一个数值。

图15：表和图表的映射关系图

S2提供的「字段标记」能力，可以为你的数据表格添加文本、图标、条形图、背景色条四种字段标记，让你的数据洞察变得简单直接。

图16：字段标记

分析组件

S2在内部业务的打磨下，沉淀出一套专业、通用的分析方法论，并将这些分析思路打包为开箱即用的react分析组件。如：表头组件、导出组件、维度下钻、行列维度切换、高级排序等，让表分析玩出更多花样。

表主题

在实际的业务场景中少不了很多主题定制的需求。S2 内置了默认、多彩蓝、简约灰色三套默认主题包供选择。

用户也可以通过自定义色板或自定义主题 schema 的方式快速注册自定义主题包。更多请参考表格主题。

S2 的性能表现

S2选择了Canvas作为渲染载体，在保证了交互丰富度、跨平台兼容性的同时，很好地提供了大数据看数场景下的性能基础。同时通过按需渲染、虚拟滚动等方式，保证了在百万级数据量下秒级渲染和滚动不卡顿的流畅体验。极限测试下100w的数据也能正常渲染。

S2 业务应用

在蚂蚁集团、阿里集团，多维表格是目前商业 BI 分析领域中使用频率最高的图表之一。它们提供单个、两个或者多个变量之间的相互关系的基本画面，可以帮助业务进行交叉探索分析。

根据分析目的不同大致有以下几种常见场景的表格：

• 趋势表：用于查看核心指标随时间变化的进度数据监控和分析，如对团队KPI的进展监控。
• 占比表：用于对比不同对象在相同维度下的比较，如分析人群在不同年龄和岗位属性下的规模占比分布，寻找人群规模大或小的影响因子和具体原因。
• 对比表：用于对比不同用户群或活动等对象在相同维度下的对比分析的场景，如不同年龄同岗位下的人群对比；不同平台同品类下的商品比价。

图25: 场景表分类

到真实的业务中，如何不受限制地满足业务多样的看数诉求呢？S2内置的自定义 Hook，为开发者提供了足够的发挥空间，可以随性所欲定制各种业务场景表。更多请参考场景案例。

图26: 蚂蚁内部业务表格场景

发布内容

• 官网：https://s2.antv.vision/
• 核心层:@antv/s2 V1.0.0  https://www.npmjs.com/package/@antv/s2
• 组件层:@antv/s2-react V1.0.0  https://www.npmjs.com/package/@antv/s2-react

后记

非常感谢你的耐心阅读，如 AntV 的其他项目一样，S2 不是突发奇想三天两夜赶出来的 KPI 项目，是在蚂蚁集团内最重要的 BI 产品 DeepInsight 近3年的持续迭代、反复打磨沉淀而来，但深知依然还有很多遗漏和不足，欢迎大家在 GitHub 给我们反馈问题，更加欢迎有兴趣的同学一起来添砖加瓦，把表分析做得更加专业化、体系化。

鸣谢

S2 历史巨人：逍为、轻声、广知、绝云、祁涛、哦豁、茂松、御术、奕甜、禾光、幕阑、完白、 顾倾、妙药S2 内测小白鼠：羽熙、顾己、龙朱、步茗

S2 Team

产品：彼楼、伯凌、源圆、芳雪、颉曦设计：白弦、清芒

研发：缨缨、清沫、卿珂、蒺藜、苏泊、子裳、光生、亚德、鸿岳

*以上排名不分先后

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

写于富阳深山水溪畔，外面风雨如内心澎湃，特别希望跟大家分享 AntV 的第五个品牌日蛋糕，感谢大家的支持与帮助，期待未来一路有你～