S2

功能描述：单元格基类。详情

cell.getActualText()

参数	说明	类型
getMeta	获取单元格元数据	() => `ViewMeta`
setMeta	设置单元格元数据	(vieMeta: `Partial<ViewMeta>`) => void
getIconStyle	获取单元格图标样式	() => `IconTheme`
getStyle	获取单元格样式	(name?: string) => `DefaultCellTheme`
getTextAndIconPosition	获取单元格文本和图标的位置	(iconCount: `number`) => `TextAndIconPosition`
cellType	单元格类型	`CellType`
initCell	初始化单元格	`() => void`
update	更新单元格	`() => void`
getTextStyle	获取文本样式	() => TextTheme & CellTextWordWrapStyle
getCellTextWordWrapStyle	获取文本换行配置	`() => { wordWrap: boolean, maxLines: number, textOverflow: string \| boolean }`
getFormattedFieldValue	获取格式化后的字段值	`() => { formattedValue: string, value: string }`
getMaxTextWidth	获取文本最大宽度	`() => number`
getTextPosition	获取文本坐标	`Point`
getContentArea	获取内容区域	`() => { x: number, y: number, width: number, height: number }`
updateByState	根据状态更新单元格样式	`(stateName: InteractionStateName, cell: S2CellType) => void`
hideInteractionShape	隐藏单元格的交互图层	`() => void`
clearUnselectedState	清空未选中状态	`() => void`
getTextShape	获取文字图层	`() => IShape`
getTextShapes	获取所有文字图层	`() => IShape[]`
addTextShape	添加文字图层	`(shape: IShape) => void`
getConditionIconShape	获取 icon 图层	`() => GuiIcon`
getConditionIconShapes	获取所有 icon 图层	`() => GuiIcon[]`
addConditionIconShape	添加 icon 图层	`(shape: GuiIcon) => void`
isShallowRender	是否是浅渲染	`( ) => boolean`
getActualText	获取实际渲染的文本（含省略号）	`() => string`
getOriginalText	获取原始的文本（不含省略号）	`() => string \| number`
getActualTextWidth	实际渲染的文本宽度，如果是多行文本，取最大的一行宽度	`() => number`
getActualTextHeight	实际渲染的文本宽度，如果是多行文本，取每一行文本高度的总和	`() => number`
getMultiLineActualTexts	获取实际渲染的多行文本（含省略号）	`() => string[]`
getMultiLineActualTextWidth	实际渲染的多行文本宽度（每一行文本宽度的总和）	`() => number`
getMultiLineActualTextHeight	实际渲染的多行文本高度（每一行文本高度的总和）	`() => number`
isTextOverflowing	文本是否溢出（有省略号）	`() => boolean`
isMultiLineText	是否是多行文本	`() => boolean`
getEmptyPlaceholder	获取单元格空值占位符	`() => string`
getTextLineBoundingRects	获取文本包围盒	`() => string`
getTextLineHeight	获取文本行高	`() => number`
getFieldValue	获取单元格展示的数值	`() => string`

ViewMeta

功能描述：数值单元格数据和位置等信息

参数	类型	功能描述
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

RawData

DateItem

type RawData = Record<string, DataItem>;

SimpleData

type SimpleData = string | number | null | undefined;

MultiData

功能描述：用于支持多指标类型的自定义数据单元格渲染。例如：趋势分析表

配置项名称	说明	类型	默认值	必选
`values`	格式化后的数据，直接展示在 dataCfg 中	SimpleData[][]		✓
`originalValues`	原始数据，用于原始数据导出	SimpleData[][]
`label`	用作单元格小标题，单独占一行展示	`string`
`[key: string]`	其他透传字段，用于自定义单元格的定制化展示	`unknown`	``

{
  "number": {
    "originalValues": [1, 2, 3],
    "values": ["1", "2", "3"]
  }
}

DataItem

SimpleData | MultiData | MiniChartData

type DataItem = SimpleData | MultiData | MiniChartData | Record<string, unknown>;

{
  "number": 7789,
  "province": "浙江省",
  "city": "杭州市",
  "type": "家具",
  "sub_type": "桌子"
}

ExtraData

import type { EXTRA_FIELD, VALUE_FIELD } from '@antv/s2';

type ExtraData = {
  [EXTRA_FIELD]: string;
  [VALUE_FIELD]: string | DataItem;
};

{
  "$$extra$$": "number",
  "$$value$$": 7789,
}

Data

type Data = RawData & ExtraData;

ViewMetaData

查看 CellData 定义

type ViewMetaData = Data | CellData;

Data

{
  "city": "杭州市"
}

CellData

{
  "extraField": "number",
  "raw": {
    "number": 7789,
    "province": "浙江省",
    "city": "杭州市",
    "type": "家具",
    "sub_type": "桌子"
  },
  "$$extra$$": "number",
  "$$value$$": 7789,
  "$$origin$$": {
    "number": 7789,
    "province": "浙江省",
    "city": "杭州市",
    "type": "家具",
    "sub_type": "桌子"
  }
}

MiniChartData

功能描述：在单元格内绘制 mini 图（支持折线图、子弹图、柱状图）. 查看文档和示例

BaseChartData

功能描述：内置折线图、柱状图数据配置项，数据格式参考 G2

参数	说明	类型	必选
type	mini 图类型	`line \| bar`	✓
encode	编码方式，声明 x 位置通道或 y 位置通道绑定的对应的列数据	`{x: string; y: string}`	✓
data	原始数据	Data[]	✓
[key: string]	其他透传字段，用于自定义单元格的定制化展示	`unknown`

BulletValue

功能描述：内置子弹图数据配置项

参数	说明	类型	必选	默认值
type	mini 图类型	`bullet`	✓	`bullet`
measure	当前指标	`number \| string`	✓
target	目标值	`number \| string`	✓
[key: string]	其他透传字段，用于自定义单元格的定制化展示	`unknown`

Point

interface Point {
  x: number,
  y: number
}

TextAndIconPosition

interface TextAndIconPosition {
  text: Point
  icon: Point
}

CellType

export enum CellType {
  DATA_CELL = 'dataCell',
  ROW_CELL = 'rowCell',
  COL_CELL = 'colCell',
  CORNER_CELL = 'cornerCell',
  MERGED_CELL = 'mergedCell',
  SERIES_NUMBER_CELL = 'seriesNumberCell',
}

S2CellType

export type S2CellType =
  | DataCell
  | HeaderCell
  | ColCell
  | CornerCell
  | RowCell
  | MergedCell
  | SeriesNumberCell
  | BaseCell;

功能描述：单元格基类。详情

cell.getActualText()

参数	说明	类型
getMeta	获取单元格元数据	() => `ViewMeta`
setMeta	设置单元格元数据	(vieMeta: `Partial<ViewMeta>`) => void
getIconStyle	获取单元格图标样式	() => `IconTheme`
getStyle	获取单元格样式	(name?: string) => `DefaultCellTheme`
getTextAndIconPosition	获取单元格文本和图标的位置	(iconCount: `number`) => `TextAndIconPosition`
cellType	单元格类型	`CellType`
initCell	初始化单元格	`() => void`
update	更新单元格	`() => void`
getTextStyle	获取文本样式	() => TextTheme & CellTextWordWrapStyle
getCellTextWordWrapStyle	获取文本换行配置	`() => { wordWrap: boolean, maxLines: number, textOverflow: string \| boolean }`
getFormattedFieldValue	获取格式化后的字段值	`() => { formattedValue: string, value: string }`
getMaxTextWidth	获取文本最大宽度	`() => number`
getTextPosition	获取文本坐标	`Point`
getContentArea	获取内容区域	`() => { x: number, y: number, width: number, height: number }`
updateByState	根据状态更新单元格样式	`(stateName: InteractionStateName, cell: S2CellType) => void`
hideInteractionShape	隐藏单元格的交互图层	`() => void`
clearUnselectedState	清空未选中状态	`() => void`
getTextShape	获取文字图层	`() => IShape`
getTextShapes	获取所有文字图层	`() => IShape[]`
addTextShape	添加文字图层	`(shape: IShape) => void`
getConditionIconShape	获取 icon 图层	`() => GuiIcon`
getConditionIconShapes	获取所有 icon 图层	`() => GuiIcon[]`
addConditionIconShape	添加 icon 图层	`(shape: GuiIcon) => void`
isShallowRender	是否是浅渲染	`( ) => boolean`
getActualText	获取实际渲染的文本（含省略号）	`() => string`
getOriginalText	获取原始的文本（不含省略号）	`() => string \| number`
getActualTextWidth	实际渲染的文本宽度，如果是多行文本，取最大的一行宽度	`() => number`
getActualTextHeight	实际渲染的文本宽度，如果是多行文本，取每一行文本高度的总和	`() => number`
getMultiLineActualTexts	获取实际渲染的多行文本（含省略号）	`() => string[]`
getMultiLineActualTextWidth	实际渲染的多行文本宽度（每一行文本宽度的总和）	`() => number`
getMultiLineActualTextHeight	实际渲染的多行文本高度（每一行文本高度的总和）	`() => number`
isTextOverflowing	文本是否溢出（有省略号）	`() => boolean`
isMultiLineText	是否是多行文本	`() => boolean`
getEmptyPlaceholder	获取单元格空值占位符	`() => string`
getTextLineBoundingRects	获取文本包围盒	`() => string`
getTextLineHeight	获取文本行高	`() => number`
getFieldValue	获取单元格展示的数值	`() => string`

ViewMeta

功能描述：数值单元格数据和位置等信息

参数	类型	功能描述
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

RawData

DateItem

type RawData = Record<string, DataItem>;

SimpleData

type SimpleData = string | number | null | undefined;

MultiData

功能描述：用于支持多指标类型的自定义数据单元格渲染。例如：趋势分析表

配置项名称	说明	类型	默认值	必选
`values`	格式化后的数据，直接展示在 dataCfg 中	SimpleData[][]		✓
`originalValues`	原始数据，用于原始数据导出	SimpleData[][]
`label`	用作单元格小标题，单独占一行展示	`string`
`[key: string]`	其他透传字段，用于自定义单元格的定制化展示	`unknown`	``

{
  "number": {
    "originalValues": [1, 2, 3],
    "values": ["1", "2", "3"]
  }
}

DataItem

SimpleData | MultiData | MiniChartData

type DataItem = SimpleData | MultiData | MiniChartData | Record<string, unknown>;

{
  "number": 7789,
  "province": "浙江省",
  "city": "杭州市",
  "type": "家具",
  "sub_type": "桌子"
}

ExtraData

import type { EXTRA_FIELD, VALUE_FIELD } from '@antv/s2';

type ExtraData = {
  [EXTRA_FIELD]: string;
  [VALUE_FIELD]: string | DataItem;
};

{
  "$$extra$$": "number",
  "$$value$$": 7789,
}

Data

type Data = RawData & ExtraData;

ViewMetaData

查看 CellData 定义

type ViewMetaData = Data | CellData;

Data

{
  "city": "杭州市"
}

CellData

{
  "extraField": "number",
  "raw": {
    "number": 7789,
    "province": "浙江省",
    "city": "杭州市",
    "type": "家具",
    "sub_type": "桌子"
  },
  "$$extra$$": "number",
  "$$value$$": 7789,
  "$$origin$$": {
    "number": 7789,
    "province": "浙江省",
    "city": "杭州市",
    "type": "家具",
    "sub_type": "桌子"
  }
}

MiniChartData

功能描述：在单元格内绘制 mini 图（支持折线图、子弹图、柱状图）. 查看文档和示例

BaseChartData

功能描述：内置折线图、柱状图数据配置项，数据格式参考 G2

参数	说明	类型	必选
type	mini 图类型	`line \| bar`	✓
encode	编码方式，声明 x 位置通道或 y 位置通道绑定的对应的列数据	`{x: string; y: string}`	✓
data	原始数据	Data[]	✓
[key: string]	其他透传字段，用于自定义单元格的定制化展示	`unknown`

BulletValue

功能描述：内置子弹图数据配置项

参数	说明	类型	必选	默认值
type	mini 图类型	`bullet`	✓	`bullet`
measure	当前指标	`number \| string`	✓
target	目标值	`number \| string`	✓
[key: string]	其他透传字段，用于自定义单元格的定制化展示	`unknown`

Point

interface Point {
  x: number,
  y: number
}

TextAndIconPosition

interface TextAndIconPosition {
  text: Point
  icon: Point
}

CellType

export enum CellType {
  DATA_CELL = 'dataCell',
  ROW_CELL = 'rowCell',
  COL_CELL = 'colCell',
  CORNER_CELL = 'cornerCell',
  MERGED_CELL = 'mergedCell',
  SERIES_NUMBER_CELL = 'seriesNumberCell',
}

S2CellType

export type S2CellType =
  | DataCell
  | HeaderCell
  | ColCell
  | CornerCell
  | RowCell
  | MergedCell
  | SeriesNumberCell
  | BaseCell;