开发预览更新于 2026-05-10

Pivot 透视表

行 × 列二维聚合表格 —— sum / avg / count / min / max 五种聚合、自带行列合计、可选热力着色、单元格 drill-down。

基础用法

把扁平的对象数组按 rowField（行）/ colField（列）分组，对 valueField 字段做聚合。组件会自动计算行合计、列合计、总计。

region/channel	官网	门店	App	合计
华北	¥12,400	¥8,200	¥4,900	¥25,500
华东	¥22,800	¥14,200	¥9,800	¥46,800
华南	¥18,200	¥6,800	¥5,400	¥30,400
西部	¥7,400	¥3,200	¥2,100	¥12,700
合计	¥60,800	¥32,400	¥22,200	¥115,400

热力图模式

heatmap 打开后，每个单元格按数值大小渲染为一层透明 accent 颜色（数值越大颜色越深）。配合不同 aggregator 切换可以快速观察分布形态。

aggregator

周 × 小时出行热力（模拟数据）

weekday/hour	00	04	08	12	16	20
周一	96	59	285	317	277	78
周二	97	63	313	298	306	109
周三	53	81	307	300	290	56
周四	108	58	273	319	281	86
周五	51	86	284	300	285	93
周六	161	125	121	302	162	300
周日	126	168	157	283	170	290

Drill-down

onCellClick 回调会拿到 { row, col, value, rows } —— rows 是聚合时归并到这个单元格的所有原始数据，可用于触发抽屉、弹窗等下钻交互。

product/store	上海	北京	深圳	合计
A	6,000	1,900		7,900
B	5,400	6,100	4,200	15,700
C	1,200	2,400	3,300	6,900
合计	12,600	10,400	7,500	30,500

API

Prop	类型	默认	说明
`data`	`T[]`	—	扁平数据数组
`rowField`	`keyof T`	—	用于分行的字段
`colField`	`keyof T`	—	用于分列的字段
`valueField`	`keyof T`	—	数值字段（`aggregator='count'` 时可省略）
`aggregator`	`'sum' \| 'avg' \| 'count' \| 'min' \| 'max'`	`'sum'`	聚合方式
`format`	`(value, { row, col }) => string`	—	单元格自定义格式化
`showTotals`	`boolean`	`true`	是否显示行 / 列合计
`heatmap`	`boolean`	`false`	按数值大小渲染热力背景
`heatmapColor`	`string`	`var(--accent-1)`	热力主色
`caption`	`string`	—	顶部说明文字
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	字号档位
`onCellClick`	`(cell) => void`	—	单元格点击回调，参数包含原始 `rows`

工具函数

import { pivotCompute, pivotAggregate } from '@chufix-design/vue';

const result = pivotCompute(data, 'region', 'channel', 'amount', 'sum');
// → { rowKeys, colKeys, cells, raw, rowTotals, colTotals, grandTotal, min, max }

pivotCompute 是组件内部用的纯函数，外部也可以直接复用：导出 CSV、画图、做下钻等场景都用得上。