- 推荐字段配置: 1个指标, 1个维度
- 支持数据重塑: 至少1个指标, 0个维度
透视表支持以下视觉通道:
row : 行维度, 支持多个维度, 按维度值在行上进行分组
column : 列维度, 支持多个维度, 按维度值在列上进行分组
detail : 细分通道, 支持多个指标, 在单元格中展示指标值
透视表格，适用于多维度数据交叉分析场景，可灵活配置行、列维度和指标计算方式
适用场景:
- 复杂多维数据统计分析
- 数据钻取与聚合展示
- 业务报表生成与数据探索
数据要求:
- 至少1个行维度 或 1个列维度 或 1个指标
- 数据必须已聚合
- 数据可被分组
默认开启的功能:
- 默认开启行列排序、数据筛选、聚合计算、小计/总计
Type: "pivotTable"
透视表，适用于多维度数据交叉分析场景
示例 'pivotTable'
Type: Record<string | number, any>[]
符合TidyData规范的且已经聚合的数据集，用于定义图表的数据来源和结构, 用户输入的数据集并不需要进行任何处理, VSeed带有强大的数据重塑功能, 会自行进行数据重塑, 透视表的数据最终会被转换对应的树形结构, 用户无需手动进行数据处理.
示例 [{region:'华东', product:'A', sales:1000}, {region:'华东', product:'B', sales:1500}]
Type: TableDimension[] | undefined
透视表的行维度和列维度，会自动对数据进行处理为树形结构, 并映射到行和列轴,
示例 [{id: 'region', alias: '地区', isRow: true}, {id: 'product', alias: '产品', isColumn: true}]
Type: string
维度对应的字段id
Type: string | undefined
维度别名
Type: "row" | "column" | undefined
维度映射的通道
- row: 支持将多个维度映射到行通道
- column: 支持将多个维度映射到列通道
Type: TableMeasure[] | undefined
透视表支持多个维度指标
示例 [{id: 'sales', alias: '销售额', aggregation: 'sum'}]
Type: string
指标id, 不能重复
Type: string | undefined
指标别名, 允许重复, 未填写时, alias 为 id
Type: boolean | undefined
自动数值格式化 当配置了 format 时, 该配置项失效
开启后, 图表的数据标签、提示信息, 会根据指标的数值, 自动根据语言环境, 选择合适的格式化方式
格式化规则为设置为十进制数值, 开启compact notation, 最小0位小数, 最大2位小数, 自动四舍五入, 使用浏览器提供的 Intl.NumberFormatOptions 实现该逻辑.
例如:
当locale为zh-CN: 749740.264会被自动格式化为74.45万
当locale为en-US: 749740.264会被自动格式化为744.5K
Type: NumFormat | undefined
指标的数值格式化, 会自动应用于label、tooltip
Type: "number" | "percent" | "permille" | "scientific" | undefined
数字格式化类型, 支持数值(十进制)、百分比(%)、千分比(‰)、科学计数法
Type: number | undefined
数值格式化比例, 不能为0
示例 - 100000 转换为 10万, ratio:10000, symbol:"万" - 100000 转换为 10K, ratio:1000, symbol:"K"
Type: string | undefined
数值格式化符号, 例如%、‰
示例 - 100000 转换为 10万, ratio:10000, symbol:"万" - 100000 转换为 10K, ratio:1000, symbol:"K"
Type: boolean | undefined
数值格式化千分位分隔符
Type: string | undefined
数值格式化后缀
Type: string | undefined
数值格式化前缀
Type: number | undefined
数值格式化小数位, 使用浏览器提供的 Intl.NumberFormat 中的 minimumFractionDigits 和 maximumFractionDigits 进行格式化, 优先级低于 significantDigits
示例 - 1234.5678 转换为 1235, fractionDigits:0 (roundingMode:halfCeil) - 1234.5678 转换为 1234.6, fractionDigits:1 (roundingMode:halfCeil) - 1234.5678 转换为 1234.57, fractionDigits:2 (roundingMode:halfCeil) - 1234.5678 转换为 1230.568, fractionDigits:3 (roundingMode:halfCeil) - 1234.5678 转换为 1234.5678, fractionDigits:4 (roundingMode:halfCeil) - 1234.5678 转换为 1234.56780, fractionDigits:5 (roundingMode:halfCeil)
Type: number | undefined
数值格式化有效位, 使用浏览器提供的 Intl.NumberFormat 中的 minimumSignificantDigits 和 maximumSignificantDigits 进行格式化, 优先级高于 fractionDigits
示例 - 1234.5678 转换为 1000, significantDigits:1 - 1234.5678 转换为 1200, significantDigits:2 - 1234.5678 转换为 1230, significantDigits:3 - 1234.5678 转换为 1234, significantDigits:4 - 1234.5678 转换为 1234.6, significantDigits:5 (roundingMode:halfCeil) - 1234.5678 转换为 1234.57, significantDigits:6 (roundingMode:halfCeil) - 1234.5678 转换为 1234.568, significantDigits:7 (roundingMode:halfCeil) - 1234.5678 转换为 1234.5678, significantDigits:8 (roundingMode:halfCeil)
Type: "morePrecision" | "lessPrecision" | undefined
数值格式化舍入优先级, 处理同时设置了 significantDigits 和 fractionDigits 时的舍入优先级, 使用浏览器提供的 Intl.NumberFormat 进行格式化, 规则同 Intl.NumberFormat 中的 roundingPriority
示例 - 1234.5678 转换为 1230, significantDigits:3 (roundingPriority:lessPrecision) - 1234.5678 转换为 1234.5678, significantDigits:3 (roundingPriority:morePrecision)
Type: "floor" | "ceil" | "expand" | "trunc" | "halfCeil" | "halfFloor" | "halfExpand" | "halfTrunc" | "halfEven" | undefined
数值格式化舍入模式, 使用浏览器提供的 Intl.NumberFormat 进行格式化, 规则同 Intl.NumberFormat 中的 roundingMode
Type: NumFormat | undefined
same as numFormat, 指标的数值格式化, 会自动应用于label、tooltip
Type: "number" | "percent" | "permille" | "scientific" | undefined
数字格式化类型, 支持数值(十进制)、百分比(%)、千分比(‰)、科学计数法
Type: number | undefined
数值格式化比例, 不能为0
示例 - 100000 转换为 10万, ratio:10000, symbol:"万" - 100000 转换为 10K, ratio:1000, symbol:"K"
Type: string | undefined
数值格式化符号, 例如%、‰
示例 - 100000 转换为 10万, ratio:10000, symbol:"万" - 100000 转换为 10K, ratio:1000, symbol:"K"
Type: boolean | undefined
数值格式化千分位分隔符
Type: string | undefined
数值格式化后缀
Type: string | undefined
数值格式化前缀
Type: number | undefined
数值格式化小数位, 使用浏览器提供的 Intl.NumberFormat 中的 minimumFractionDigits 和 maximumFractionDigits 进行格式化, 优先级低于 significantDigits
示例 - 1234.5678 转换为 1235, fractionDigits:0 (roundingMode:halfCeil) - 1234.5678 转换为 1234.6, fractionDigits:1 (roundingMode:halfCeil) - 1234.5678 转换为 1234.57, fractionDigits:2 (roundingMode:halfCeil) - 1234.5678 转换为 1230.568, fractionDigits:3 (roundingMode:halfCeil) - 1234.5678 转换为 1234.5678, fractionDigits:4 (roundingMode:halfCeil) - 1234.5678 转换为 1234.56780, fractionDigits:5 (roundingMode:halfCeil)
Type: number | undefined
数值格式化有效位, 使用浏览器提供的 Intl.NumberFormat 中的 minimumSignificantDigits 和 maximumSignificantDigits 进行格式化, 优先级高于 fractionDigits
示例 - 1234.5678 转换为 1000, significantDigits:1 - 1234.5678 转换为 1200, significantDigits:2 - 1234.5678 转换为 1230, significantDigits:3 - 1234.5678 转换为 1234, significantDigits:4 - 1234.5678 转换为 1234.6, significantDigits:5 (roundingMode:halfCeil) - 1234.5678 转换为 1234.57, significantDigits:6 (roundingMode:halfCeil) - 1234.5678 转换为 1234.568, significantDigits:7 (roundingMode:halfCeil) - 1234.5678 转换为 1234.5678, significantDigits:8 (roundingMode:halfCeil)
Type: "morePrecision" | "lessPrecision" | undefined
数值格式化舍入优先级, 处理同时设置了 significantDigits 和 fractionDigits 时的舍入优先级, 使用浏览器提供的 Intl.NumberFormat 进行格式化, 规则同 Intl.NumberFormat 中的 roundingPriority
示例 - 1234.5678 转换为 1230, significantDigits:3 (roundingPriority:lessPrecision) - 1234.5678 转换为 1234.5678, significantDigits:3 (roundingPriority:morePrecision)
Type: "floor" | "ceil" | "expand" | "trunc" | "halfCeil" | "halfFloor" | "halfExpand" | "halfTrunc" | "halfEven" | undefined
数值格式化舍入模式, 使用浏览器提供的 Intl.NumberFormat 进行格式化, 规则同 Intl.NumberFormat 中的 roundingMode
Type: "column" | undefined
指标映射的通道
- column: 指标列
Type: string | undefined
以扁平的指标配置形式, 构建树形指标组, parentId指向父级指标组的id, 用于构建指标树
指标树的配置存在两种形式, 方式一是直接配置带children的指标树, 方式二是配置parentId的扁平指标列表, 两种方式不能同时配置
Type: BackgroundColor
背景颜色可以是颜色字符串, 例如'red', 'blue', 也可以是hex, rgb或rgba'#ff0000', 'rgba(255,0,0,0.5)'
Type: string | undefined
表格的边框颜色
Type: number | undefined
表格体的字体大小
Type: string | undefined
表格体的字体颜色
Type: string | undefined
表格体的背景颜色
Type: number | undefined
行表头、列表头的字体大小
Type: string | undefined
行表头、列表头的字体颜色
Type: string | undefined
行表头、列表头的背景颜色
Type: string | undefined
鼠标悬浮在行、列表头的单元格时的背景颜色, 用于突出显示鼠标所在的行列交叉的单元格
Type: string | undefined
鼠标悬浮在行、列表头的单元格时, 用于突出显示鼠标所在的行与列的所有单元格
Type: string | undefined
选中的单元格的边框颜色, 用于突出显示选中的单元格
Type: string | undefined
选中的单元格的背景颜色, 用于突出显示选中的单元格
Type: BodyCellStyle | BodyCellStyle[] | undefined
设置表格正文部分单元格的特殊样式
Type: Selector | Selectors | undefined
数据选择器
若配置selector, 提供数值 selector, 局部数据 selector, 条件维度 selector, 条件指标 selector 共四类数据匹配能力
若未配置selector, 则样式全局生效.
示例 数值选择器 selector = "tool" selector = ["tool", "book"] selector = 100 selector = [100, 200]
局部数据选择器 selector = { profit: 100 } selector = [{ profit: 100 }, { profit: 200 }]
条件维度选择器 selector = { field: 'category', operator: 'in', value: 'tool' } selector = { field: 'category', operator: 'not in', value: 'book' }
条件指标选择器 selector = { field: 'profit', operator: '>=', value: 100 } selector = { field: 'profit', operator: 'between' value: [100, 300] }
Type: string
维度字段, dimensions 某一项的 id
Type: "in" | "not in" | undefined
操作符
- in: 选择数据项中维度字段的值在 value 中的数据项
- not in: 选择数据项中维度字段的值不在 value 中的数据项
Type: "in" | "not in" | undefined
操作符
- in: 选择数据项中维度字段的值在 value 中的数据项
- not in: 选择数据项中维度字段的值不在 value 中的数据项
same as operator
Type: string | number | (string | number)[]
选择数据项中维度字段的值, 支持数组
Type: string | undefined
单元格背景色
Type: string | undefined
单元格文字颜色
Type: number | undefined
单元格文字大小
Type: string | undefined
单元格边框颜色
Type: number | undefined
单元格边框线宽
Type: Theme | undefined
图表的主题, 主题是优先级较低的功能配置, 包含所有图表类型共用的通用配置, 与单类图表类型共用的图表配置
内置light与dark两种主题, 用户可以通过Builder自定义主题
示例 'dark'
'light'
'customThemeName'
Type: number
Type: unique symbol
Type: Locale | undefined
语言
图表语言配置, 支持'zh-CN'与'en-US'两种语言, 另外可以调用 intl.setLocale('zh-CN') 方法设置语言