鉴于本节其实跟代码没什么关系,并且 和 官方文档 已经写的很清楚了,这里写一些自己的理解
PivotTable 基础概念
多维分析表又名数据透视表、交叉表、Pivot Table,指的是可以在**行维度**和**列维度**放入一个或**多个维度**,显示**维度之间相互关系**的一种表格。用户可以一目了然地分析出各种场景指标以及对比,旨在帮助业务分析推动决策
这么说有点抽象,有些读者可能会疑惑:有多个行维度 + 多个列维度的表格,长什么样子?举个🌰:
一个营销同学每天要统计某款扫地机器人在各个线上店铺的价格。我们分析下他面临的场景:
- “各个线上店铺”,我们可以总结为
渠道这个维度(Dimension)。根据他的日常工作,有以下这棵渠道树:

- 根据
渠道这个维度的不同层级,划分为:渠道 | 平台 | 店铺三个维度层级 (Dimension Level)。以“平台”这个维度层级为例,有三个值:淘宝、京东、抖音,我们称其为维度成员(Dimension Value)

用 TypeScript 我们可以很容易地写出渠道的类型定义,以及渠道树:
enum IChannel { Channel = 'channel', // 渠道 Platform = 'platfrom', // 平台 Shop = 'shop' // 店铺 } const channelTree = [ { nodeType: IChannel.Channel, value: '线上', children: [ { nodeType: IChannel.Platform, value: '淘宝', children: [ { nodeType: IChannel.Shop, value: '淘宝旗舰店' }, { nodeType: IChannel.Shop, value: '淘宝三方店' } ] }, { nodeType: IChannel.Platform, value: '京东', children: [ { nodeType: IChannel.Shop, value: '京东旗舰店' }, { nodeType: IChannel.Shop, value: '京东三方店' } ] }, { nodeType: IChannel.Platform, value: '抖音', children: [ { nodeType: IChannel.Shop, value: '抖音旗舰店' }, { nodeType: IChannel.Shop, value: '抖音三方店' } ] } ] } ];
- 由于“每天”都统计这些数据,久而久之,也有
时间这个维度和时间树:

enum ITime { Month = 'month', Week = 'week', Day = 'day' } const timeTree = [ { nodeType: ITime.Month, value: '3', children: [ { nodeType: ITime.Week, value: '1', children: [ { nodeType: ITime.Day, value: '2025-03-03' }, { nodeType: ITime.Day, value: '2025-03-04' }, { nodeType: ITime.Day, value: '2025-03-05' }, ... ] }, { nodeType: ITime.Week, value: '2', children: [ { nodeType: ITime.Day, value: '2025-03-10' }, { nodeType: ITime.Day, value: '2025-03-11' }, { nodeType: ITime.Day, value: '2025-03-12' }, ... ] }, { nodeType: ITime.Week, value: '3', children: [ { nodeType: ITime.Day, value: '2025-03-17' }, { nodeType: ITime.Day, value: '2025-03-18' }, { nodeType: ITime.Day, value: '2025-03-19' }, ... ] } ] } ];
- 这个营销同学具体在统计什么数据 —— 价格。可能分为原价、券后价 等,这些具体的数据我们称为 指标(Indicator)。结合上述的渠道树和价格树,我们可以得到这样一个多维表格

数据概念
看到这里,恭喜你已经掌握多维表格的概念了!
我们把上面的多维表格进一步抽象,可以得知,展示一个多维表格,需要以下数据:
-
行表头树 (rowTree):以树状结构表示行维度层级关系的表头。即上述例子的
timeTree -
列表头树 (columnTree):以树状结构表示列维度层级关系的表头。即上述例子的
channelTree -
一般来说,为了方便展示,指标 (indicator) 会是 columnTree 的叶子节点
-
角头 (cornHeader):位于行表头和列表头交叉区域的单元格,用于显示指标标题和其他辅助信息
-
具体的数据 (records): 即在 各个维度下、各个指标 的具体数据,会展示在数据单元格中(我们称这个区域为body)

目标
实现一个高性能,具备数据转换、统计、排序、钻取、可视化等能力的多维分析表格
能力
具体能力梳理如下:基础能力(对齐 ListTable 的功能),以及 PivotTable 特有的功能点
