Loading...
表格参数配置
const s2Options = {width: 600,height: 400,hierarchyType: 'grid'}
参数 | 类型 | 必选 | 默认值 | 功能描述 | 版本 |
---|---|---|---|---|---|
width | number | 600 | 表格宽度 | ||
height | number | 480 | 表格高度 | ||
debug | boolean | false | 是否开启调试模式 | ||
hierarchyType | "grid" | "tree" | grid | 行头的展示方式,grid:平铺网格结构, tree: 树状结构。 支持 自定义结构 | ||
conditions | Conditions | 字段标记,条件格式配置 | |||
totals | Totals | 小计总计配置 | |||
tooltip | Tooltip | tooltip 配置 | |||
interaction | Interaction | 表格交互配置 | |||
pagination | Pagination | 分页配置 | |||
frozen | Frozen | 行列头冻结配置 | |||
seriesNumber | SeriesNumber | 序号列展示及自定义文字配置 | |||
showDefaultHeaderActionIcon | boolean | true | 是否展示默认行列头操作图标 | ||
headerActionIcons | HeaderActionIcon[] | false | 自定义行列头操作图标(需要将 showDefaultHeaderActionIcon 置为 false ) | ||
customSVGIcons | CustomSVGIcon[] | false | 自定义 svg 图标 | ||
style | Style | 单元格样式设置,比如布局类型,宽高,边距,是否隐藏数值列头等 | |||
hd | boolean | true | 是否开启高清屏适配,解决多屏切换,高清视网膜屏字体渲染模糊的问题。查看更多 | ||
mergedCellsInfo | MergedCellInfo[][] | 合并单元格信息 | |||
placeholder | string | (meta: Record<string, any>) => string | 自定义单元格空数据占位符 | |||
cornerText | string | 自定义角头文本 (仅在树状模式有效) | |||
cornerExtraFieldText | string | 数值 | 自定义角头虚拟数值字段文本("数值挂行头"时有效) | ||
dataCell | DataCellCallback | 自定义单元格 cell | |||
cornerCell | CellCallback | 自定义 cornerCell | |||
rowCell | CellCallback | 自定义行头 cell | |||
colCell | CellCallback | 自定义列头 cell | |||
mergedCell | MergedCellCallback | 自定义合并单元格 | |||
frame | FrameCallback | 自定义表格框架/边框 | |||
cornerHeader | CornerHeaderCallback | 自定义角头 | |||
layoutHierarchy | LayoutHierarchy | 自定义层级结构 | |||
layoutArrange | LayoutArrange | 自定义排列顺序 (树状模式有效) | |||
layoutCoordinate | layoutCoordinate | 自定义单元格节点坐标 | |||
layoutCellMeta | layoutCellMeta | 自定义单元格元数据 | |||
layoutSeriesNumberNodes | LayoutSeriesNumberNodes | 自定义序号节点 | |||
dataSet | DataSet | 自定义数据集 | |||
facet | (spreadsheet: SpreadSheet) => BaseFacet | 自定义分面 | |||
transformCanvasConfig | (renderer: Renderer, spreadsheet: SpreadSheet) => Partial<CanvasConfig> | void | - | 自定义 AntV/G 渲染引擎 配置参数 & 插件注册 |
功能描述: 配置字段标记。分为文本 (text),背景 (background),柱状图 (interval),图标 (icon)。
参数 | 说明 | 类型 | 默认值 | 必选 |
---|---|---|---|---|
text | 文本字段标记 (查看示例) | TextCondition[] | - | |
background | 背景字段标记 (查看示例) | BackgroundCondition[] | - | |
interval | 柱状图字段标记 (查看示例) | IntervalCondition[] | - | |
icon | 图标字段标记 (查看示例) | IconCondition[] | - |
功能描述: 配置条件格式。TextCondition,BackgroundCondition,IntervalCondition,IconCondition 均继承于 Condition。
参数 | 说明 | 类型 | 默认值 | 必选 |
---|---|---|---|---|
field | 1. 字段 ID 2. 使用正则表达式匹配字段 ID | string | RegExp | ✓ | |
mapping | 作用映射函数 | ConditionMapping | ✓ |
// TextCondition,BackgroundCondition,IntervalCondition,IconCondition 各自对应的 mapping 函数返回 的 T 有所不同export type ConditionMapping<T = unknown> = (fieldValue: number | string,data: RawData,cell: S2CellType,) => ConditionMappingResult<T>;
condition 用法示例:
const options = {conditions: {text: [{field: "province",mapping: (fieldValue, data, cell) => {return {fill: "green",fontSize: 16,opacity: 0.2,textAlign: 'right'};},},],interval: [{field: "sub_type",mapping: (fieldValue, data, cell) => {return {fill: "green",isCompare: true,maxValue: 8000,minValue: 300,};},},],background: [{field: "count",mapping: (fieldValue, data, cell) => {return {fill: "green",intelligentReverseTextColor: true,};},},],icon: [{field: "number",position: 'left',mapping: (fieldValue, data, cell) => {return {icon: "InfoCircle",fill: "green",};},},],},};
同 Condition 一致,ConditionMappingResult
配置和 文本主题配置一致(部分生效), 也就意味着可以控制不同文本的颜色,透明度,对齐方式,字体等配置。
export type TextConditionMappingResult = TextTheme;
同 Condition 一致,ConditionMappingResult
配置为:
export type BackgroundConditionMappingResult = {fill: string;intelligentReverseTextColor?: boolean;};
同 Condition 一致,ConditionMappingResult
配置为:
export type IntervalConditionMappingResult = {fill?: string;isCompare?: boolean;minValue?: number;maxValue?: number;}
功能描述: 配置图标 (icon) 条件格式,和其他 Condition 的唯一区别在于多了 position 参数用于自定义 icon 相对于文本的位置。查看 文档 和 示例
参数 | 说明 | 类型 | 默认值 | 必选 |
---|---|---|---|---|
position | icon 相较于文字的位置 | left | right | right |
icon condition 用法示例:
const options = {conditions: {icon: [{field: "profit",position: "left",mapping: (fieldValue, data, cell) => {return {icon: "InfoCircle",fill: "red",};},},],},};
ConditionMappingResult
配置为:
export type IconConditionMappingResult = {fill: string;icon: string;};
S2
目前内置 icon 列表:
图标颜色默认和文本颜色一致,遵循 主题配置
icon 名称 | icon 图标 | 功能描述 | icon 名称 | icon 图标 | 功能描述 |
---|---|---|---|---|---|
CellDown | ![]() | 同环比下降 | ExpandColIcon | ![]() | 展开列头 |
CellUp | ![]() | 同环比上升 | Plus | ![]() | 树状表格展开 |
GlobalAsc | ![]() | 全局升序 | Minus | ![]() | 树状表格收起 |
GlobalDesc | ![]() | 全局降序 | SortDown | ![]() | 降序 |
GroupAsc | ![]() | 组内升序 | SortDownSelected | ![]() | 降序选中状态 |
GroupDesc | ![]() | 组内降序 | SortUp | ![]() | 升序 |
Trend | ![]() | 趋势图 | SortUpSelected | ![]() | 升序选中状态 |
ArrowUp | ![]() | 指标上升 | ArrowDown | ![]() | 指标下降 |
DrillDownIcon | ![]() | 下钻 |
功能描述:序号列配置。
参数 | 说明 | 类型 | 默认值 | 必选 |
---|---|---|---|---|
enable | 是否显示行序号 | boolean | false | |
text | 自定义行头序号列标题 | string | - |
参数 | 类型 | 必选 | 默认值 | 功能描述 |
---|---|---|---|---|
rowHeader | boolean | number | true | 冻结行头 当值为 number 时,标识行头冻结的最大区域,取值范围: (0, 1),0 表示不固定行头。 当值为 boolean 时,true 对应冻结最大区域为 0.5, false 对应 0。 (透视表有效) | |
rowCount | number | 0 | 冻结行的数量,从顶部开始计数,以叶子节点作为计数依据(透视表在开启行序号,且自定义序号单元格时无效) | |
colCount | number | 0 | 冻结列的数量,从左侧开始计数,以叶子节点作为计数依据 | |
trailingRowCount | number | 0 | 冻结行数量,从底部开始计数,以叶子节点作为计数依据(透视表在开启行序号,且自定义序号单元格时无效) | |
trailingColCount | number | 0 | 冻结列的数量,从右侧开始计数,以叶子节点作为计数依据 |
参数 | 说明 | 类型 | 默认值 | 必选 |
---|---|---|---|---|
linkFields | 标记字段为链接样式,用于外链跳转 | string[] | (meta: Node | ViewMeta) => boolean | ||
selectedCellsSpotlight | 是否开启选中高亮聚光灯效果 | boolean | false | |
hoverHighlight | 鼠标悬停时高亮当前单元格,以及所对应的行头,列头 | boolean | true | |
hoverFocus | 鼠标悬停在当前单元格超过默认 800ms 后,保持当前高亮,显示 tooltip,悬停时间通过设置 duration 来控制 | boolean | {duration: number} | true | |
hiddenColumnFields | 用于配置默认隐藏的列,透视表 和多列头明细表 需要配置列头唯一 id, 单列头明细表 配置列头 field 字段即可 (即:s2DataConfig.fields.columns ). 了解更多 | string[] | ||
copy | 单元格复制配置 | Copy | ||
customInteractions | 自定义交互 详情 | CustomInteraction[] | ||
scrollSpeedRatio | 用于控制滚动速率,分水平和垂直两个方向,默认为 1 | ScrollSpeedRatio | ||
autoResetSheetStyle | 用于控制点击表格外区域和按下 ESC 键时是否重置交互状态和关闭 Tooltip, 支持根据 event 动态判断 | boolean | (event: Event | FederatedPointerEvent, spreadsheet: SpreadSheet) => boolean | true | |
resize | 用于控制 resize 热区是否显示 | boolean | ResizeInteractionOptions | true | |
brushSelection | 是否允许单元格(包含行头,列头,数值单元格)刷选。行头,列头刷选只支持透视表 | boolean | BrushSelection | true | |
multiSelection | 是否允许多选 (包含行头,列头,数值单元格) | boolean | true | |
rangeSelection | 是否允许区间快捷多选 | boolean | true | |
scrollbarPosition | 用于控制滚动条展示在内容区边缘还是画布边缘 | content | canvas | content | |
eventListenerOptions | 事件监听函数 addEventListener 的 可选项配置, 可控制事件从冒泡阶段还是捕获阶段触发 | false | ||
selectedCellHighlight | 选中数值单元格后的行列高亮联动 rowHeader:选中数值单元格后高亮对应行头 colHeader:选中数值单元格后高亮对应列头 currentRow:选中数值单元格后高亮整行 currentCol:选中数值单元格后高亮整列 true:同 { rowHeader: true, colHeader: true, currentRow: true, currentCol: true } | boolean | { rowHeader?: boolean, colHeader?: boolean, currentRow?: boolean, currentCol?: boolean } | false | |
overscrollBehavior | 控制滚动至边界的行为,可禁用浏览器的默认滚动行为。详情 | auto | contain | none | null | auto |
参数 | 说明 | 类型 | 默认值 | 必选 |
---|---|---|---|---|
enable | 是否允许复制 | boolean | true | |
withFormat | 是否使用 s2DataConfig 的 formatter 格式复制数据 | boolean | true | |
withHeader | 复制数据是否带表头信息 | boolean | false | |
customTransformer | 复制时支持自定义 (transformer) 数据格式化方法 | (transformer: Transformer) => Partial<Transformer> | transformer |
功能描述:自定义交互,继承 BaseEvent: 查看示例
参数 | 说明 | 类型 | 默认值 | 必选 |
---|---|---|---|---|
key | 交互的唯一标识 | string | ✓ | |
interaction | 交互实例 | InteractionConstructor | ✓ |
功能描述:滚动速率配置。查看示例
interface ScrollSpeedRatio {horizontal?: number; // 水平滚动速率,默认为 1vertical?: number; // 垂直滚动速率,默认为 1}
功能描述:宽高调整配置。查看示例
参数 | 说明 | 类型 | 默认值 | 必选 |
---|---|---|---|---|
rowCellVertical | 是否开启行头垂直方向 resize 热区 | boolean | true | |
cornerCellHorizontal | 是否开启角头水平方向 resize 热区 | boolean | true | |
colCellHorizontal | 是否开启列头水平方向 resize 热区 | boolean | true | |
colCellVertical | 是否开启列头垂直方向 resize 热区 (列头隐藏时该配置无效) | boolean | true | |
rowResizeType | 用于控制行高 resize 时的生效范围 1. all : 对所有单元格生效(会覆盖默认的行高配置),2. current : 对当前单元格生效,3. selected : 对当前单元格生效,如果单元格是多选状态,调整任意选中单元格,对所有选中的生效。 | all | current | selected | current | |
colResizeType | 用于控制列宽 resize 时的生效范围 1. all : 对所有单元格生效(会覆盖默认的列宽配置),2. current : 对当前单元格生效,3. selected : 对当前单元格生效,如果单元格是多选状态,调整任意选中单元格,对所有选中的生效。 | all | current | selected | current | |
disable | 用于控制行高 resize 是否生效。查看示例 | (resizeInfo: S2CellType) => boolean | ||
visible | 自定义当前单元格是否显示 resize 热区 | (cell: S2CellType) => boolean | ||
minCellWidth | 单元格可拖拽最小宽度 | number | 40 | |
minCellHeight | 单元格可拖拽最小高度 | number | 20 |
功能描述:单元格刷选配置。查看示例
参数 | 说明 | 类型 | 默认值 | 必选 |
---|---|---|---|---|
dataCell | 是否允许数值单元格刷选 | boolean | true | |
rowCell | 是否允许行头单元格刷选(仅支持透视表) | boolean | false | |
colCell | 是否允许列头单元格刷选 | boolean | false |
功能描述:单元格选中信息明细。
参数 | 说明 | 类型 | 默认值 | 必选 |
---|---|---|---|---|
interactionName | 触发选中的交互名 | InteractionName | ||
targetCell | 触发选中的单元格 | S2CellType | ||
event | 触发选中的事件对象 | FederatedPointerEvent | Event | KeyboardEvent |
功能描述:交互拦截类型。
enum InterceptType {HOVER = 'hover',CLICK = 'click',DATA_CELL_BRUSH_SELECTION = 'dataCellBrushSelection',ROW_CELL_BRUSH_SELECTION = 'rowCellBrushSelection',COL_CELL_BRUSH_SELECTION = 'colCellBrushSelection',MULTI_SELECTION = 'multiSelection',RESIZE = 'resize',}
功能描述:交互名称。
enum InteractionName {CORNER_CELL_CLICK = 'cornerCellClick',DATA_CELL_CLICK = 'dataCellClick',ROW_CELL_CLICK = 'rowCellClick',COL_CELL_CLICK = 'colCellClick',MERGED_CELLS_CLICK = 'mergedCellsClick',ROW_COLUMN_CLICK = 'rowColumnClick',HEADER_CELL_LINK_CLICK = 'headerCellLinkClick',HOVER = 'hover',DATA_CELL_BRUSH_SELECTION = 'dataCellBrushSelection',ROW_CELL_BRUSH_SELECTION = 'rowCellBrushSelection',COL_CELL_BRUSH_SELECTION = 'colCellBrushSelection',COL_ROW_RESIZE = 'rowColResize',DATA_CELL_MULTI_SELECTION = 'dataCellMultiSelection',ROW_CELL_MULTI_SELECTION = 'rowCellMultiSelection',COL_CELL_MULTI_SELECTION = 'colCellMultiSelection',RANGE_SELECTION = 'rangeSelection',SELECTED_CELL_MOVE = 'selectedCellMove',GLOBAL_RESET = 'globalReset',}
功能描述:交互状态名称。
enum InteractionStateName {ALL_SELECTED = 'allSelected',SELECTED = 'selected',ROW_CELL_BRUSH_SELECTED = 'rowCellBrushSelected',COL_CELL_BRUSH_SELECTED = 'colCellBrushSelected',DATA_CELL_BRUSH_SELECTED = 'dataCellBrushSelected',UNSELECTED = 'unselected',HOVER = 'hover',HOVER_FOCUS = 'hoverFocus',HIGHLIGHT = 'highlight',SEARCH_RESULT = 'searchResult',PREPARE_SELECT = 'prepareSelect',}
功能描述:单元格类型。
enum CellType {DATA_CELL = 'dataCell',ROW_CELL = 'rowCell',COL_CELL = 'colCell',SERIES_NUMBER_CELL = 'seriesNumberCell',CORNER_CELL = 'cornerCell',MERGED_CELL = 'mergedCell',}
功能描述:行/列小计总计配置。
参数 | 说明 | 类型 | 默认值 | 必选 |
---|---|---|---|---|
showGrandTotals | 是否显示总计 | boolean | false | |
showSubTotals | 是否显示小计。配置为对象时,always 用于控制当子维度小于 2 个时是否始终展示小计,默认展示 | boolean | { always: boolean } | false | |
subTotalsDimensions | 小计的汇总维度 | string[] | [] | |
reverseGrandTotalsLayout | 总计布局位置,默认下或右 | boolean | false | |
reverseSubTotalsLayout | 小计布局位置,默认下或右 | boolean | false | |
grandTotalsLabel | 总计别名 | string | 总计 | |
subTotalsLabel | 小计别名 | string | 小计 | |
calcGrandTotals | 自定义计算总计 | CalcTotals | ||
calcSubTotals | 自定义计算小计 | CalcTotals | ||
grandTotalsGroupDimensions | 总计的分组维度 | string[] | ||
subTotalsGroupDimensions | 小计的分组维度 | string[] |
参数 | 说明 | 类型 | 必选 | 默认值 |
---|---|---|---|---|
aggregation | 聚合方式 | SUM | MIN | MAX | AVG | ||
calcFunc | 自定义方法 | (query: Record<string, any>, data: Record<string, any>[], spreadsheet: SpreadSheet) => number |
参数 | 说明 | 类型 | 默认值 | 必选 |
---|---|---|---|---|
enable | 是否展示 tooltip | boolean | true | |
operation | tooltip 操作配置项 | TooltipOperation | - | |
rowCell | 行头单元格配置 | BaseTooltipConfig | - | |
colCell | 列头单元格配置 | BaseTooltipConfig | - | |
dataCell | 数值单元格配置 | BaseTooltipConfig | - | |
cornerCell | 角头单元格配置 | BaseTooltipConfig | - | |
render | 自定义整个 tooltip, 可以继承 BaseTooltip 自己重写一些方法 | RenderTooltip | - | |
content | 自定义 tooltip 内容 | ReactNode | Element | string 或者 (cell, defaultTooltipShowOptions) => ReactNode | Element | string | - | |
autoAdjustBoundary | 当 tooltip 超过边界时自动调整显示位置,container: 图表区域,body: 整个浏览器窗口,设置为 null 可关闭此功能 | container | body | body | |
adjustPosition | 自定义 tooltip 位置, | (positionInfo: TooltipPositionInfo ) => {x: number, y: number} | ||
getContainer | 自定义 tooltip 挂载容器, | () => HTMLElement | document.body | |
className | 额外的容器类名, | string | - | |
style | 额外的容器样式, | CSSProperties | - |
功能描述:tooltip 基础通用配置
参数 | 说明 | 类型 | 默认值 | 必选 |
---|---|---|---|---|
enable | 是否展示 tooltip | boolean | true | |
operation | tooltip 操作配置项 | TooltipOperation | - | |
content | 自定义 tooltip 内容 | ReactNode | Element | string | 或者 (cell, defaultTooltipShowOptions) => ReactNode | Element | string | - |
参数 | 说明 | 类型 | 默认值 | 必选 |
---|---|---|---|---|
position | 默认经过计算(默认偏移量 + autoAdjustBoundary)后的 Tooltip 位置坐标 | TooltipPosition | ✓ | |
event | 当前点击事件信息 | Event | ✓ |
功能描述:tooltip 操作配置项。查看 文档 和 示例.
参数 | 说明 | 类型 | 默认值 | 必选 |
---|---|---|---|---|
hiddenColumns | 是否开启隐藏列(叶子节点有效) | boolean | true | |
sort | 是否开启组内排序 | boolean | false | |
tableSort | 是否开启明细表列头排序 | boolean | false | |
menu | 自定义操作栏菜单配置项 | TooltipOperatorMenuOptions | - |
功能描述:tooltip 显示配置。
参数 | 类型 | 必选 | 默认值 | 功能描述 |
---|---|---|---|---|
position | TooltipPosition | ✓ | tooltip 显示位置 | |
data | TooltipData | tooltip 数据 | ||
cellInfos | Record<string, any> | 单元格信息 | ||
options | TooltipOptions | tooltip 部分配置 | ||
content | ReactNode | string | 或者 (cell, defaultTooltipShowOptions: TooltipShowOptions) => ReactNode | string | 自定义 tooltip 内容 | ||
event | Event | 当前事件 Event |
功能描述:tooltip 坐标
参数 | 类型 | 必选 | 默认值 | 功能描述 |
---|---|---|---|---|
x | number | ✓ | 横坐标 | |
y | number | ✓ | 纵坐标 |
功能描述:tooltip 数据
参数 | 类型 | 必选 | 默认值 | 功能描述 |
---|---|---|---|---|
summaries | TooltipSummaryOptions | 所选项统计(按度量值区分)列表 | ||
details | ListItem | 数据点明细信息 | ||
headInfo | TooltipHeadInfo | 轴(行/列头)列表 | ||
name | string | 当前单元格名称 | ||
tips | string | 提示/说明信息 | ||
infos | string | 底部提示信息(可用于快捷键操作提示) |
功能描述:tooltip 所选项统计(按度量值区分)列表
参数 | 类型 | 必选 | 默认值 | 功能描述 |
---|---|---|---|---|
name | string | ✓ | 名称 | |
value | number | string | ✓ | 值 | |
selectedData | Record<string, any> | ✓ | 当前选择的数据列表 |
功能描述: tooltip 轴(行/列头)列表
功能描述:tooltip 数据点明细数据
参数 | 类型 | 必选 | 默认值 | 功能描述 |
---|---|---|---|---|
name | string | ✓ | 名称 | |
value | string | number | ✓ | 值 | |
icon | ReactNode | 自定义图标组件 |
功能描述:tooltip 配置
参数 | 类型 | 必选 | 默认值 | 功能描述 |
---|---|---|---|---|
hideSummary | boolean | false | 是否隐藏所选项统计信息 | |
operator | TooltipOperatorOptions | 操作栏配置 | ||
onlyShowOperator | boolean | false | 是否只展示操作菜单项 | |
isTotals | boolean | false | 是否是 总计/小计 单元格 | |
onlyShowCellText | boolean | false | 是否只显示当前单元格文本 | |
enableFormat | boolean | false | 是否开启格式化 | |
forceRender | boolean | false | 是否强制清空 dom | |
data | TooltipData | - | 自定义 tooltip 数据 |
功能描述:tooltip 操作栏配置
参数 | 类型 | 必选 | 默认值 | 功能描述 |
---|---|---|---|---|
menu | TooltipOperatorMenuOptions | 操作项菜单配置 |
功能描述: tooltip 操作栏菜单配置
参数 | 类型 | 必选 | 默认值 | 功能描述 |
---|---|---|---|---|
items | TooltipOperatorMenuItem[] | 操作项列表 | ||
onClick | (info: TooltipOperatorMenuInfo, cell: S2CellType) => void | 点击事件 | ||
selectedKeys | string[] | 初始选中的菜单项 key 数组 |
功能描述: tooltip 操作项列表
参数 | 类型 | 必选 | 默认值 | 功能描述 |
---|---|---|---|---|
key | string | ✓ | 唯一标识 | |
label | ReactNode | string | 名称 | ||
icon | ReactNode | Element | string | 自定义图标 | ||
visible | boolean | (cell: S2CellType) => boolean | true | 操作项是否显示,可传入一个函数根据当前单元格信息动态显示 | |
onClick | (info : { key: string, [key: string]: unknown; } , cell : S2CellType) => void | 点击事件回调 (info 为当前点击的菜单项,cell 为当前 tooltip 对应的单元格) | ||
children | TooltipOperatorMenuItem[] | 子菜单列表 |
S2 内置了前端分页渲染的能力,但不提供分页组件,需要自行实现。
首先需要在 s2Options
中配置 pagination
属性
const s2Options = {width: 600,height: 480,pagination: {pageSize: 4,current: 1,}};
第 1 页 (current: 1
) :
第 2 页 (current: 2
) :
参数 | 说明 | 类型 | 默认值 | 必选 |
---|---|---|---|---|
pageSize | 每页数量 | number | - | ✓ |
current | 当前页(从 1 开始) | number | 1 | ✓ |
total | 数据总条数 | number | - |
参数 | 类型 | 必选 | 默认值 | 功能描述 |
---|---|---|---|---|
layoutWidthType | adaptive | colAdaptive | compact | 单元格宽度布局类型adaptive : 行列等宽,均分整个 Canvas 画布宽度 colAdaptive :列等宽,行头紧凑布局,列等分画布宽度减去行头宽度的剩余宽度 compact :行列紧凑布局,指标维度少的时候无法布满整个画布,列头宽度为实际内容宽度(取当前列最大值,采样每一列前 50 条数据) | ||
dataCell | DataCell | 数值单元格配置 | ||
rowCell | RowCell | 行头单元格配置 | ||
colCell | ColCell | 列头单元格配置 | ||
cornerCell | CornerCell | 角头单元格配置 | ||
mergedCell | MergedCell | 合并单元格配置 | ||
seriesNumberCell | SeriesNumberCell | 序号单元格配置 |
功能描述:数值单元格配置
参数 | 说明 | 类型 | 默认值 | 必选 |
---|---|---|---|---|
width | 单元格宽度 (优先级:colCell.widthByField > colCell.width > dataCell.width ) | number | 96 | - |
height | 单元格高度 (优先级:rowCell.heightByField > rowCell.height > dataCell.height ) | number | 30 | - |
valuesCfg | 单元格配置 | { originalValueField?: string, widthPercent?: number[], showOriginalValue?: boolean } | - |
其他公用配置见 CellTextWordWrapStyle
功能描述:列头单元格配置
参数 | 说明 | 类型 | 默认值 | 必选 |
---|---|---|---|---|
width | 单元格宽度,可根据当前列头节点动态设置 (叶子节点有效) | number | (colNode: Node) => number | 96 | |
height | 单元格高度,可根据当前列头节点动态设置 (叶子节点有效) | number | (colNode: Node) => number | 30 | |
widthByField | 根据度量值设置宽度(拖拽或者预设宽度场景), field 对应 s2DataConfig.fields.columns 中的 field 或 列头 id (优先级大于 width ) 查看详情 | Record<string, number> | - | |
heightByField | 根据度量值设置高度(拖拽或者预设高度场景), field 对应 s2DataConfig.fields.columns 中的 field 或 列头 id (优先级大于 height ) 查看详情 | Record<string, number> | - | |
hideValue | 默认数值挂列头,会同时显示列头和数值,隐藏数值,使其更美观。(即 s2DataConfig.fields.values 且仅在单数值时有效,多数值时推荐使用 隐藏列头) | boolean | false |
功能描述:行头单元格配置
参数 | 说明 | 类型 | 默认值 | 必选 |
---|---|---|---|---|
width | 行单元格宽度,可根据当前行头节点动态设置,树状结构同样适用 | number | (rowNode: Node) => number | ||
treeWidth | 树状模式下行单元格宽度,优先级高于 width , 值为空时则默认使用 width | number | ||
height | 行单元格高度,可根据当前行头节点动态设置 | number | (rowNode: Node) => number | 30 | |
collapseFields | 树状模式下行头自定义折叠节点。 支持 id ( 'root[&] 行头维度值' ) 和 维度 field ('city' ) 两种格式,优先级大于 collapseAll 和 expandDepth , 设置为 null 时优先级最低。 查看 demo | Record<string, boolean> | ||
collapseAll | 在树状结构模式下行头是否默认收起全部。 | boolean | false | |
expandDepth | 在树状结构模式下行头默认展开展开的层级(层级从 0 开始), 设置为 null 时优先级最低 | number | ||
showTreeLeafNodeAlignDot | 树状模式下行头叶子节点是否显示层级占位点 | boolean | false | |
withByField | 根据 field 设置每行的宽度。field 对应 s2DataConfig.fields.rows 中的 field 或 列头 id (优先级大于 width ) 查看详情 | Record<string, number> | - | |
heightByField | 根据 field 设置每行的高度。1. 透视表: field 对应 s2DataConfig.fields.rows 中的 field 或 列头 id. 2. 明细表: field 对应 行序号,从 1 开始。(优先级大于 height ) 查看详情 | Record<string, number> | - |
其他公用配置见 CellTextWordWrapStyle
其他公用配置见 CellTextWordWrapStyle
其他公用配置见 CellTextWordWrapStyle
功能描述:单元格换行配置。查看示例
参数 | 说明 | 类型 | 默认值 | 必选 |
---|---|---|---|---|
wordWrap | 文本是否自动换行(数值单元格不建议换行)。了解更多 | boolean | true | |
maxLines | 最大行数,文本超出后将被截断,当 手动拖拽调整高度 或存在 自定义单元格高度 时,为保证展示合理性,会根据当前文本行高计算出能展示的最大行数,覆盖默认的 maxLines 配置。该配置 支持配置为 Infinity (数值单元格不建议换行),需要配合 wordWrap 和 textOverflow 一起使用。了解更多 | number | 1 | |
maxLines | 最大行数,文本超出后将被截断,支持配置为 Infinity (数值单元格不建议换行),需要配合 wordWrap 和 textOverflow 一起使用。了解更多 | number | 1 | |
textOverflow | 自定义隐藏的文本溢出内容,例如直接裁剪、追加省略号或一个自定义字符串,需要配合 wordWrap 和 maxLines 一起使用。了解更多 | string | ellipsis |
功能描述:数值单元格数据和位置等信息
参数 | 类型 | 必选 | 默认值 | 功能描述 |
---|---|---|---|---|
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 |
DataCellCallback = (viewMeta: ViewMeta, s2: Spreadsheet) => G.Group;
功能描述:自定义数值单元格。查看示例
CellCallback = (node: Node, spreadsheet: SpreadSheet, ...restOptions: unknown[]) => G.Group;
功能描述:自定义单元格。查看示例
参数 | 说明 | 类型 | 默认值 | 必选 |
---|---|---|---|---|
node | 当前渲染的 node 节点 | Node | - | ✓ |
spreadsheet | 表格实例 | SpreadSheet | - | ✓ |
restOptions | 不定参数,传递额外的信息 | unknown[] | - |
DataCellCallback = (s2: Spreadsheet, cells: S2CellType[], viewMeta: ViewMeta) => MergedCell;
功能描述:自定义合并单元格。查看示例
CornerHeaderCallback = (parent: S2CellType, spreadsheet: SpreadSheet, ...restOptions: unknown[]) => void;
功能描述:自定义角头。查看示例
参数 | 说明 | 类型 | 默认值 | 必选 |
---|---|---|---|---|
parent | 父级单元格 | S2CellType | - | ✓ |
spreadsheet | 表格实例 | SpreadSheet | - | ✓ |
restOptions | 不定参数,传递额外的信息 | unknown[] | - |
LayoutHierarchy = (spreadsheet: SpreadSheet, node: Node) => LayoutHierarchyReturnType;
功能描述:自定义层级结构
参数 | 类型 | 必选 | 默认值 | 功能描述 |
---|---|---|---|---|
spreadsheet | SpreadSheet | ✓ | 表格实例 | |
node | Node | ✓ | 当前渲染的 node 节点 |
interface LayoutHierarchyReturnType {push?: Node[];unshift?: Node[];delete?: boolean;}
LayoutArrange = (spreadsheet: SpreadSheet, parent: Node, field: string, fieldValues: string[]) => string[];
功能描述:自定义顺序
参数 | 类型 | 必选 | 默认值 | 功能描述 |
---|---|---|---|---|
spreadsheet | SpreadSheet | ✓ | 表格实例 | |
node | Node | ✓ | 当前渲染的 node 节点 | |
field | string | ✓ | 当前的字段名 | |
fieldValues | string[] | ✓ | 当前字段值 |
LayoutCoordinate = (spreadsheet: SpreadSheet, rowNode: Node, colNode: Node) => void
功能描述:自定义单元格行列坐标
参数 | 类型 | 必选 | 默认值 | 功能描述 |
---|---|---|---|---|
spreadsheet | SpreadSheet | ✓ | 表格实例 | |
rowNode | Node | ✓ | 行头节点 | |
colNode | Node | ✓ | 列头节点 |
LayoutCellMeta = (viewMeta: ViewMeta) => ViewMeta | null;
功能描述:自定义单元格元信息
参数 | 类型 | 必选 | 默认值 | 功能描述 |
---|---|---|---|---|
viewMeta | ViewMeta | 单元格元信息 |
LayoutSeriesNumberNodes = (rowsHierarchy: Hierarchy, seriesNumberWidth: number, spreadsheet: SpreadSheet) => Node[];
功能描述:自定义序号节点
参数 | 类型 | 必选 | 默认值 | 功能描述 |
---|---|---|---|---|
rowsHierarchy | Hierarchy | 行头层级结构 | ||
seriesNumberWidth | number | 表格实例 | ||
spreadsheet | SpreadSheet | 表格实例 |
功能描述:为表格行列头角头注册自定义操作 icon
。如果该配置位空,则展示透视表默认操作 icon
。查看 详细说明
参数 | 类型 | 必选 | 默认值 | 功能描述 | 版本 |
---|---|---|---|---|---|
icons | string[] | {name:string,position:'right' | 'left'}[] | ✓ | 已经注册的 icon 名称,或用户通过 customSVGIcons 注册的 icon 名称,如果是字符串形式,则 position 默认为 'right' ,也可以使用对象的形式,显示指定 icon 的位置 | ||
belongsCell | string[] | ✓ | 需要增加操作图标的单元格名称 cornerCell、colCell、rowCell | ||
defaultHide | boolean | (mete: Node, iconName: string)=> boolean | 是否默认隐藏,如果为 true 则为 hover 后再显示;false 则始终显示 | 1.26.0 支持配置为一个函数 | ||
displayCondition | (mete: Node, iconName: string)=> boolean | 展示的过滤条件,可以通过该回调函数用户自定义行列头哪些层级或单元格需要展示 icon。 所有返回值为 true 的 icon 会展示给用户。 | 1.26.0 回传 iconName 并按单个 icon 控制显隐 | ||
onClick | (headerIconClickParams: HeaderIconClickParams) => void; | ✓ | 1.26.0 | ||
onHover | (headerIconHoverParams: HeaderIconHoverParams) => void; | 1.26.0 |
功能描述: 点击自定义操作 icon 后透视表返回的当前 icon 相关
参数 | 说明 | 类型 | 默认值 | 必选 |
---|---|---|---|---|
iconName | 当前点击的 icon 名称 | string | - | ✓ |
meta | 当前 cell 的 meta 信息 | Node | - | ✓ |
event | 当前点击事件信息 | Event | false | ✓ |
功能描述:用于用户注册自己的 icon
图标, 目前只支持 svg
格式。查看 详细说明
参数 | 类型 | 必选 | 默认值 | 功能描述 |
---|---|---|---|---|
name | string | ✓ | 内置或自定义的 icon 名称 | |
src | string | ✓ | 目前支持三种格式的 svg 字符串:base64、svg 本地文件、线上图片地址(不支持替换颜色) |
功能描述:基本数据格式。查看文档
参数 | 说明 | 类型 | 默认值 | 必选 |
---|---|---|---|---|
colNodes | 列头节点,对应 ColCell (含可视范围外) | Node[] | ||
colLeafNodes | 列头叶子节点,对应 ColCell (含可视范围外) | Node[] | ||
colsHierarchy | 列头节点层级结构 (含可视范围外) | Hierarchy | ||
rowNodes | 行头节点,对应 RowCell (含可视范围外) | Node[] | ||
rowLeafNodes | 行头叶子节点,对应 RowCell (含可视范围外) | Node[] | ||
rowsHierarchy | 行头节点层级结构 (含可视范围外) | Hierarchy | ✓ | |
seriesNumberNodes | 序号节点,对应 SeriesNumberCell (含可视范围外) | Node[] | ||
cornerNodes | 角头节点,对应 CornerCell (含可视范围外) | Node[] |
功能描述:自定义数据集。查看示例
DataSet = (spreadsheet: SpreadSheet) => BaseDataSet;
功能描述:设置默认合并的单元格信息
参数 | 说明 | 类型 | 默认值 | 必选 |
---|---|---|---|---|
colIndex | 单元格的列索引 | number | - | |
rowIndex | 单元格的行索引 | number | - | |
showText | 设置 showText: true 时,则展示当前格子的 meta 信息为合并后单元格的 meta 。默认使用第一个选中点击的单元格。 | booelan | - |