字节数据可视化 VTable——不止是高性能表格组件

导读 VTable 是字节跳动推出的 VisActor 可视化解决方案中的一个高性能表格组件，但其提供的功能和价值还不止于此。本文将为您展示 VTable 的优势，并介绍其背后的原理。主要内容包括以下几大部分：

1. VTable 功能介绍

2. VTable 功能展示

3. VTable 架构原理

4. VTable 后续规划

5. 关注 VTable

6. 问答环节

分享嘉宾｜刘方方 字节跳动 研发工程师 

编辑整理｜琛琛

内容校对｜李瑶

出品社区｜DataFun

---

01

VTable 功能介绍

VTable 是字节跳动推出的 VisActor 可视化解决方案中的一个表格组件，其标语为“不只是高性能的多维数据分析表格，更是行列间创作的方格艺术家”。标语中包含三个关键点，一是高性能，二是多维数据分析，三是方格艺术家。本节后续也会就这三个关键点进行说明。

1. 表格的构成

首先来介绍一下表格的构成。

大家在日常工作中会接触到各式各样的表格，这里以 VTable 当中的透视表为例，来看一下表格的基本结构。

第一部分是表头，分为列表头、行表头以及角表头。最主要的部分是 body，即数据单元格。主题和结构的划分紧密相连，如果设置一些样式的话，在 Theme 里面都有专属的设置入口。还可以分别设置单元格的样式、边框以及整体的 frame 的样式。

2. VTable 支持的表格形态

VTable 支持的表格形态中，最常用的就是基本表格。在基础数据展示以及数据表信息查询等业务场景中经常用到。基本表格进一步形变，做一个转置，可以把表头放在行上。再进一步形变，可以支持树形结构，以层级关系的形式展示数据。

第二种表格形态是透视表，一些专业的数据分析师，从多个角度进行探索分析时经常会使用这种表格。透视表也可以以树形结构来展示。还支持多列树形展示，可以观察多个维度的聚合值。

第三种表格形态是透视图，将原来每个单元格式展示的数据值，替换成 VChart 图表。它能够直观地展示不同的维度值下的对比。这种表格同样适用于数据分析，与透视表的区别在于，这里多了轴以及图例等组件。同时还可以解决多图表的性能问题以及布局问题。

3. 交互

再来看一下 VTable 的一些交互效果。上图中罗列的是部分常用的交互效果，包括单选、多选、十字或整行整列的高亮效果、右键菜单、拖拽调整列宽、双击自动适应内容列宽、移动表头的位置还有滚动的交互效果。

编辑能力，目前内置日历日期型、文本和下拉列表型，如果不能满足业务场景，还可以自定义扩展编辑器。提供了复选框、迷你图的高亮效果。并且在集成了 VChart 之后，单元格上的交互在图表中仍可使用。

4. VTable 亮点

在文章开头提到的 VTable 标语中的三个关键点，正是 VTable 的三大亮点：性能极致，多维分析，表现力强。接下来分别介绍这三大亮点。

（1）性能极致

支持百万数据快速运算与渲染。

极致性能可以从以下两点体现出来：

• 一是首屏渲染时间短，千条数据能够在 20 毫秒内完成渲染，一百万数据在 70 毫秒内就能够首屏显示出来。
• 二是滚动拖拽等交互流畅，能够达到 30 帧率，这是一般视频的流畅度。

（2）多维分析

多维分析方面，第一个亮点功能是自动组织维度树。

多维分析透视表，行表头和列表头维度的层级结构，是通过遍历数据源得到的。单元格的值，是用源数据的 value 做聚合得到的。

再具体看一下自动组织维度树的过程，数据源拿到的是一个明细数据，以刚才的透视表为例，行的第一层是地区，第二层是省份，列表头的第一层是年份，第二层是季度，需要去聚合销售额和销售数量，这样就组织形成两棵树。

聚合指标数据指标有两个，一个是销售额，一个是销售数量。表中的每条数据可能是由多条数据聚合而成的，在聚合过程中会创建另外一棵树结构，是维护和单元格对应关系的一个树结构，最终的结点 node 是一个聚合逻辑的对象。除了求和的聚合，还支持求平均、最大、最小。并且支持过滤和排序。

（3）表现力强

第三个关键点是表现力强。由于底层基于 canvas，所以集成图表是比较有优势的，性能方面也比较好。单元格里支持文本、超链接、图片和视频，还支持一些小的迷你图表，以及层级关系数据和一些操作按钮图标。除此以外，还支持用自定义渲染的方式去实现单元格内容的排版布局。同时，还支持在样式图样式上设置字体形状或者是尺寸色彩。

02

VTable 功能展示

登录 VisActor 官网，在首页可以看到全部产品，包括 VChart 图表库、VTable 表格库、VGrammar 语法库、VRender 可视化渲染引擎、VGraph 关系图以及 VGis 地理场景库。

进入 VTable，首先是表格示例，收录了用户常用的表格场景示例和常用配置的示例。配置文档是按表格形态划分的，ListTable 是基本表格，用于展示明细数据。PivotTable 可以配置组织行列树。PivotChart 和 PivotTable 类似，只是需要指定以图表展示。其中，教程文档、Demo 等都是随着能力的增加在不断补充的。

点击下面的文字可以来看一些具体示例。

https://mp.weixin.qq.com/s/Vpze6EPm5mrQgvUaACCBFA

https://mp.weixin.qq.com/s/vI9FTcxEJAmE941rDUXZIw

03

VTable 架构原理

接下来介绍 VTable 的架构和基本原理。

整体框架基于 VRender 渲染引擎实现。在此基础上，封装了一个场景树，也就是表格每一个节点会对应一个 text 值或者是 react 的矩形框等。如这样一个场景树：上层是一些布局模块、状态管理模块和事件管理模块。再往上是针对于用户层的 option 配置、数据分析部分和主题样式部分。

下面简单介绍几个技术实现的原理。

1. 虚拟滚动

表格的滚动的背后有一个虚拟滚动的过程，因为场景树并不是完整的，也就是 100 万行数据背后，并不会有 100 万行的所有节点，可能维护了几百个，然后在滚动的过程中进行场景树的替换更新。例如向下滚动，那么滚动上去的一整行单元格即作废，位置移动到下面，内容更新成新的一行的文本信息。这就是虚拟滚动、节点移动的过程。

2. 布局缓存

布局缓存主要是针对行列表头。有一些表格需要合并，合并的依据主要来自于布局缓存，在做表头分析的过程中产生了一个树，树的父节点一般都是需要做一个合并的逻辑，这个用 ID 去做区分，同时这个 ID 也是索引一些属性配置的 Key 值。

3. 图表集成

第三个介绍的点是 VChart 图表集成，这里直接利用了表格的布局。在业务方自己实现这种布局的框架中，拖拽列宽自动更改布局，拉大整个图表，这种能力是比较难实现的。利用了 VTable 表格布局之后，这种能力就天然支持了。

在性能方面用到了 VChart 实例共享这一技术点，另外图片缓存也是一个性能优化点。此外，我们还做了 VChart 实例的事件代理。所以，虽然集成在 VTable 里面，但 VChart 的能力都得到了保留。

04

VTable 后续规划

VTable 整体的规划如上图所示。在基础能力方面，将继续以用户需求为导向，不断完善基础功能，如布局、交互、分析、编辑，以及一些扩展组件等。期望能够覆盖绝大部分的功能需求。性能方面，在首屏和一些特定交互场景中继续优化。

特色能力方面，主要是可视化能力。因为 canvas 本身具有可视化的优势，后续会有单元格可视化编码、甘特图、趋势表等特色表格提供给大家。数据分析能力上，会实现一些 Excel 的常用功能。另外，后期还会增加一些动画效果来提升用户体验，在交互中增加更多的生动感。比如排序、拖拽和收起展开等交互点都可以做一些动画效果。

05

关注 VTable

如果希望进一步了解 VTable，可以浏览项目官网、github 或关注微信公众号，获得更多信息。

06

问答环节

Q1：页面渲染是否会实现 for Calendar 的功能？

A1：我们后续会推出日历型表格，作为特设图表之一。

Q2：是否支持自动换行？

A2：自动换行是支持的，能够根据当前的列宽将文本自动换行，并且可以根据行高自动撑开。

Q3：二次计算的结果可以正常地参与排序和过滤吗？

A3：这是我们后续会增强的一项能力，目前在开发中。

以上就是本次分享的内容，谢谢大家。

分享嘉宾

INTRODUCTION

刘方方

字节跳动

研发工程师

10 年工作经历，主要从事 canvas 渲染工具的开发，目前在字节跳动可视化团队研发 VTable 表格组件。

往期推荐

点个在看你最好看