S2DataConfig
下一篇
S2Options
Loading...
表格数据配置
const s2DataConfig = {data: [],meta: [],sortParams: [],fields: {rows: [],columns: [],values: []}}
| 参数 | 说明 | 类型 | 默认值 | 必选 |
|---|---|---|---|---|
| data | 原始数据 | RawData[] | ✓ | |
| fields | 维度指标 | Fields | ✓ | |
| meta | 字段元数据，可配置字段别名和数值格式化 | Meta[] | ||
| sortParams | 排序参数配置 | SortParam[] | ||
| filterParams | 筛选参数配置 | FilterParam[] |
功能描述： 配置表格的维度域，即对应行列维度。
| 配置项名称 | 说明 | 类型 | 默认值 | 必选 |
|---|---|---|---|---|
| rows | 行维度 （可自定义行头，查看示例) | string[] | CustomTreeNode[] | [] | |
| columns | 列维度 （可自定义列头，查看示例) | string[] | CustomTreeNode[] | [] | |
| values | 指标维度 | string[] | [] | |
| valueInCols | 指标维度是否在列头 | boolean | ||
| customValueOrder | 自定义指标维度在行列头中的层级顺序 （即 values 的 顺序，从 0 开始） 查看示例 | number | - |
功能描述：字段元数据，可配置字段别名和数值格式化。查看示例
| 参数 | 说明 | 类型 | 默认值 | 必选 |
|---|---|---|---|---|
| field | 字段 id （即 Fields 中配置的字段） | string | string[] | RegExp | ||
| name | 字段名称 | string | ||
| description | 字段描述，会显示在行头、列头、单元格对应的 tooltip 中 | string | ||
| formatter | 格式化 单元格、行头和列头支持格式化，角头不支持格式化。只有单元格存在第二个参数。 数值字段：一般用于格式化数字单位 文本字段：一般用于做字段枚举值的别名 第二个参数在以下情况会传入：data cell 格式化，复制/导出，tooltip 展示（且仅在选择多个单元格时，data 类型为数组） | (value: unknown, data?: Data | Data[], meta?: Node | ViewMeta) => string | ||
| renderer | 单元格渲染类型（图片、视频等） | Renderer |
| 参数 | 说明 | 类型 | 默认值 | 必选 |
|---|---|---|---|---|
| type | 渲染类型 | IMAGE | VIDEO | ✓ | |
| clickToPreview | 是否开启点击预览。type为图片、视频时生效 | boolean | true | |
| fallback | 图片、视频加载失败的兜底展示 | string | ||
| timeout | 图片、视频加载超时时间 | number | 10000 | |
| config | 图片、视频的配置项 | Partial<ImageStyleProps> | Partial<HTMLVideoElement>| HTMLStyleProps |
功能描述：自定义树状结构的配置，适用于透视表和明细表的自定义行列头。查看 文档 和 示例
| 参数 | 说明 | 类型 | 默认值 | 必选 |
|---|---|---|---|---|
| field | 当前节点唯一标识 | string | ✓ | |
| title | 当前节点展示名 | string | ✓ | |
| collapsed | 节点是否收起（树状模式下，行头非叶子节点有效） | boolean | false | |
| description | 节点的额外描述信息，在对应行头的 tooltip 中展示 | string | ||
| children | 子节点 | CustomTreeNode[] |
type CustomHeaderField = CustomTreeNode | string;
功能描述：数值单元格数据和位置等信息
| 参数 | 类型 | 必选 | 默认值 | 功能描述 |
|---|---|---|---|---|
| spreadsheet | SpreadSheet | 表格实例 | ||
| id | string | 单元格唯一标识 | ||
| x | number | 单元格 x 坐标 | ||
| y | number | 单元格 y 坐标 | ||
| width | number | 单元格宽度 | ||
| height | number | 单元格高度 | ||
| data | ViewMetaData | 单元格数据 | ||
| rowIndex | number | 单元格在行叶子节点中的索引 | ||
| colIndex | number | 单元格在列叶子节点中的索引 | ||
| valueField | string | 度量 id | ||
| fieldValue | DataItem | 度量展示的真实值 | ||
| isTotals | boolean | 是否为总计：true 为总计 false 为小计 | ||
| query | Record<string, any> | 行列查询条件 | ||
| rowQuery | Record<string, any> | 行查询条件 | ||
| colQuery | Record<string, any> | 列查询条件 | ||
| rowId | string | 单元格的行 id | ||
| colId | string | 单元格的列 id |
type RawData = Record<string, DataItem>;
type SimpleData = string | number | null | undefined;
功能描述：用于支持多指标类型的自定义数据单元格渲染。例如：趋势分析表
| 配置项名称 | 说明 | 类型 | 默认值 | 必选 |
|---|---|---|---|---|
values | 格式化后的数据，直接展示在 dataCfg 中 | SimpleData[][] | ✓ | |
originalValues | 原始数据，用于原始数据导出 | SimpleData[][] | ||
label | 用作单元格小标题，单独占一行展示 | string | ||
[key: string] | 其他透传字段，用于自定义单元格的定制化展示 | unknown | `` |
{"number": {"originalValues": [1, 2, 3],"values": ["1", "2", "3"]}}
SimpleData | MultiData | MiniChartData
type DataItem = SimpleData | MultiData | MiniChartData | Record<string, unknown>;
{"number": 7789,"province": "浙江省","city": "杭州市","type": "家具","sub_type": "桌子"}
import type { EXTRA_FIELD, VALUE_FIELD } from '@antv/s2';type ExtraData = {[EXTRA_FIELD]: string;[VALUE_FIELD]: string | DataItem;};
{"$$extra$$": "number","$$value$$": 7789,}
type Data = RawData & ExtraData;
CellData 定义type ViewMetaData = Data | CellData;
{"city": "杭州市"}
{"extraField": "number","raw": {"number": 7789,"province": "浙江省","city": "杭州市","type": "家具","sub_type": "桌子"},"$$extra$$": "number","$$value$$": 7789,"$$origin$$": {"number": 7789,"province": "浙江省","city": "杭州市","type": "家具","sub_type": "桌子"}}
功能描述：在单元格内绘制 mini 图（支持 折线图、子弹图、柱状图）. 查看 文档 和 示例
功能描述：内置折线图、柱状图数据配置项，数据格式参考 G2
| 参数 | 说明 | 类型 | 必选 | 默认值 |
|---|---|---|---|---|
| type | mini 图类型 | line | bar | ✓ | |
| encode | 编码方式，声明 x 位置通道或 y 位置通道绑定的对应的列数据 | {x: string; y: string} | ✓ | |
| data | 原始数据 | Data[] | ✓ | |
| [key: string] | 其他透传字段，用于自定义单元格的定制化展示 | unknown |
功能描述：内置子弹图数据配置项
| 参数 | 说明 | 类型 | 必选 | 默认值 |
|---|---|---|---|---|
| type | mini 图类型 | bullet | ✓ | bullet |
| measure | 当前指标 | number | string | ✓ | |
| target | 目标值 | number | string | ✓ | |
| [key: string] | 其他透传字段，用于自定义单元格的定制化展示 | unknown |
功能描述：用于明细表做数据筛选。
| 配置项名称 | 说明 | 类型 | 默认值 | 必选 |
|---|---|---|---|---|
filterKey | 需要筛选的字段 id | string | ✓ | |
filteredValues | 不包含的维度值 | unknown[] | ||
customFilter | 自定义筛选函数，最终筛选的结果是同时满足 customFilter 且不在 filteredValues 中 | (raw: Record<string, string>) => boolean |
功能描述：自定义树状结构的配置，适用于透视表和明细表的自定义行列头。查看 文档 和 示例
| 参数 | 说明 | 类型 | 默认值 | 必选 |
|---|---|---|---|---|
| field | 当前节点唯一标识 | string | ✓ | |
| title | 当前节点展示名 | string | ✓ | |
| collapsed | 节点是否收起（树状模式下，行头非叶子节点有效） | boolean | false | |
| description | 节点的额外描述信息，在对应行头的 tooltip 中展示 | string | ||
| children | 子节点 | CustomTreeNode[] |
type CustomHeaderField = CustomTreeNode | string;
功能描述：数值单元格数据和位置等信息
| 参数 | 类型 | 必选 | 默认值 | 功能描述 |
|---|---|---|---|---|
| spreadsheet | SpreadSheet | 表格实例 | ||
| id | string | 单元格唯一标识 | ||
| x | number | 单元格 x 坐标 | ||
| y | number | 单元格 y 坐标 | ||
| width | number | 单元格宽度 | ||
| height | number | 单元格高度 | ||
| data | ViewMetaData | 单元格数据 | ||
| rowIndex | number | 单元格在行叶子节点中的索引 | ||
| colIndex | number | 单元格在列叶子节点中的索引 | ||
| valueField | string | 度量 id | ||
| fieldValue | DataItem | 度量展示的真实值 | ||
| isTotals | boolean | 是否为总计：true 为总计 false 为小计 | ||
| query | Record<string, any> | 行列查询条件 | ||
| rowQuery | Record<string, any> | 行查询条件 | ||
| colQuery | Record<string, any> | 列查询条件 | ||
| rowId | string | 单元格的行 id | ||
| colId | string | 单元格的列 id |
type RawData = Record<string, DataItem>;
type SimpleData = string | number | null | undefined;
功能描述：用于支持多指标类型的自定义数据单元格渲染。例如：趋势分析表
| 配置项名称 | 说明 | 类型 | 默认值 | 必选 |
|---|---|---|---|---|
values | 格式化后的数据，直接展示在 dataCfg 中 | SimpleData[][] | ✓ | |
originalValues | 原始数据，用于原始数据导出 | SimpleData[][] | ||
label | 用作单元格小标题，单独占一行展示 | string | ||
[key: string] | 其他透传字段，用于自定义单元格的定制化展示 | unknown | `` |
{"number": {"originalValues": [1, 2, 3],"values": ["1", "2", "3"]}}
SimpleData | MultiData | MiniChartData
type DataItem = SimpleData | MultiData | MiniChartData | Record<string, unknown>;
{"number": 7789,"province": "浙江省","city": "杭州市","type": "家具","sub_type": "桌子"}
import type { EXTRA_FIELD, VALUE_FIELD } from '@antv/s2';type ExtraData = {[EXTRA_FIELD]: string;[VALUE_FIELD]: string | DataItem;};
{"$$extra$$": "number","$$value$$": 7789,}
type Data = RawData & ExtraData;
CellData 定义type ViewMetaData = Data | CellData;
{"city": "杭州市"}
{"extraField": "number","raw": {"number": 7789,"province": "浙江省","city": "杭州市","type": "家具","sub_type": "桌子"},"$$extra$$": "number","$$value$$": 7789,"$$origin$$": {"number": 7789,"province": "浙江省","city": "杭州市","type": "家具","sub_type": "桌子"}}
功能描述：在单元格内绘制 mini 图（支持 折线图、子弹图、柱状图）. 查看 文档 和 示例
功能描述：内置折线图、柱状图数据配置项，数据格式参考 G2
| 参数 | 说明 | 类型 | 必选 | 默认值 |
|---|---|---|---|---|
| type | mini 图类型 | line | bar | ✓ | |
| encode | 编码方式，声明 x 位置通道或 y 位置通道绑定的对应的列数据 | {x: string; y: string} | ✓ | |
| data | 原始数据 | Data[] | ✓ | |
| [key: string] | 其他透传字段，用于自定义单元格的定制化展示 | unknown |
功能描述：内置子弹图数据配置项
| 参数 | 说明 | 类型 | 必选 | 默认值 |
|---|---|---|---|---|
| type | mini 图类型 | bullet | ✓ | bullet |
| measure | 当前指标 | number | string | ✓ | |
| target | 目标值 | number | string | ✓ | |
| [key: string] | 其他透传字段，用于自定义单元格的定制化展示 | unknown |