S2

S2 可以手动拖拽动态改变单元格的宽高，同时内置了 行列等宽, 列等宽 和 行列紧凑布局 三种布局 (查看示例)

我们可以通过主题修改单元格的背景色，字体大小等配置，如果想自定义单元格的宽高，可以通过 s2Options 的 style 配置来实现

const s2Options = {
  style: {
    // 行头单元格配置
    rowCell: {},
    // 列头单元格配置
    colCell: {},
    // 数值单元格配置
    dataCell: {},
  },
}

调整数值单元格宽高

注意

优先级: 小于 rowCell.height/rowCell.heightByField 和 colCell.width/colCell.widthByField

const s2Options = {
  style: {
    dataCell: {
      width: 100,
      height: 90
    },
  }
}

行头单元格高度和列头单元格的宽度始终和数值单元格一致，所以此时相当于也调整了行头的高度 和 列头的宽度.

调整行头单元格宽高

注意

行头单元格高度调整作用于叶子节点 （非叶子节点的高度是所有子节点高度度总和）, 且高度始终和 数值单元格 高度一致。

优先级: rowCell.heightByField > rowCell.height > dataCell.height

const s2Options = {
  style: {
    rowCell: {
      width: 50,
      height: 50
    },
  },
}

还可以根据当前行头节点信息动态调整，返回 null 代表使用默认宽高.

const s2Options = {
  style: {
    rowCell: {
      width: (rowNode) => {
        // 例：叶子节点 300px, 非叶子节点 200px
        return rowNode.isLeaf ? 300 : 200;
      },
      height: (rowNode) => {
        // 例：偶数行高度 300pox, 奇数行默认高度
        return rowNode.level % 2 === 0 ? 300 : null
      }
    },
  },
}

提示

如果想给特定某一行/列设置不同的宽高，可以通过 rowCell 的 widthByField 和 heightByField 预设高度来实现，支持两种类型的配置：

fieldId （例：root[&]浙江省[&]杭州市): 行列交叉后每一个行头节点对应的唯一 ID, 适用于宽高精确到具体的单元格（如何获取 ID）
field （例：city): 对应 s2DataConfig.fields.rows 中配置的 field, 适用于精确到某一类维值的单元格

import { EXTRA_FIELD } from '@antv/s2'

const s2Options = {
  style: {
    rowCell: {
      widthByField: {
        // 调整维度
        city: 100,
        // 调整具体单元格
        'root[&]浙江省[&]杭州市': 60,
        // 数值挂行头时对应的 [数值] 虚拟字段
        [EXTRA_FIELD]: 20,
      },
      heightByField: {
        type: 10,
        'root[&]浙江省[&]杭州市': 60,
        'root[&]浙江省[&]宁波市': 100,
      },
    },
  },
}

调整树状模式下行头宽度

和平铺模式配置无区别

const s2Options = {
  hierarchyType: 'tree',
  style: {
    rowCell: {
      width: 200,
    }
  },
}

调整列头单元格宽高

注意

列头单元格宽度调整作用于叶子节点 （非叶子节点的宽度是所有子节点宽度总和）, 且宽度始终和 数值单元格 宽度一致。

优先级: colCell.widthByField > colCell.width > dataCell.width

const s2Options = {
  style: {
    colCell: {
      width: 200,
      height: 60,
    },
  },
}

如果想给每一列设置不同的宽高，可以根据当前列头节点信息动态调整宽高，返回 null 代表使用默认宽高.

const s2Options = {
  style: {
    colCell: {
      width: (colNode) => {
        // 例：前两列宽度 100px, 其他 50px
        return colNode.colIndex <= 2 ? 100 : 50
      },
      height: (colNode) => {
        // 例：前两列高度 100px, 其他 默认
        return colNode.colIndex <= 2 ? 100 : null
      },
    },
  },
}

提示

如果想给特定某一列设置不同的宽高，可以通过 colCell 的 widthByField 和 heightByField 预设宽高来实现，支持两种类型的配置：

fieldId （例：root[&]家具[&]沙发[&]number): 行列交叉后每一个列头节点对应的唯一 ID, 适用于宽高精确到具体的单元格（如何获取 ID）
field （例：city): 对应 s2DataConfig.fields.columns 中配置的 field, 适用于精确到某一类维值的单元格

import { EXTRA_FIELD } from '@antv/s2'

const s2Options = {
  style: {
    colCell: {
       widthByField: {
        // 默认 [数值挂列头], EXTRA_FIELD 为内部虚拟数值列，对应 [数值] 单元格
        [EXTRA_FIELD]: 60,
        city: 20,
        'root[&]家具[&]沙发[&]number': 120,
      },
      heightByField: {
        [EXTRA_FIELD]: 80,
        // 调整维度
        city: 20,
        // 调整具体单元格
        'root[&]家具[&]沙发[&]number': 120,
      },
    },
  },
}

调整明细表行高

提示

明细表有一点特殊，由于只有列头：

如果想给所有行设置固定的行高，则可以通过 rowCell.height 调整
如果想给特定行设置不同的行高，则可以通过 rowCell.heightByField 根据行索引调整（从 0 开始）
优先级：rowCell.heightByField > rowCell.height > dataCell.height

const s2Options = {
  style: {
    rowCell: {
      // 设置行高
      height: 40,
      // 给第一行和第三行设置不同的高度
      heightByField: {
        '0': 130,
        '2': 60,
      },
    },
  },
}

查看示例

隐藏列头

还可以将高度设置为 0, 从而实现隐藏列头的效果。

透视表

配置 colCell.height 改变单元格高度从而隐藏全部列头。所需隐藏部分列头请查看交互-隐藏列头-透视表相关文档。

const s2Options = {
  style: {
    colCell: {
      height: 0
    },
  },
}

也支持通过 heightByField 隐藏部分列维度，将高度设置为 0, 列头对应的单元格和所对应的角头都不会渲染。

import { EXTRA_FIELD } from '@antv/s2'

const s2Options = {
  style: {
    colCell: {
      // 隐藏全部列头
      height: 0,
      heightByField: {
        // 隐藏部分维度 （类别/子类别）
        // type: 0,
        // sub_type: 0,
        // EXTRA_FIELD 对应 [数量] 这一虚拟维度列
        [EXTRA_FIELD]: 30,
      },
    },
  },
}

查看示例

明细表

配置 colCell.height 改变单元格高度从而隐藏全部列头。所需隐藏部分列头请查看交互-隐藏列头-明细表相关文档。

查看示例

分割线

默认列头有一条分割线，隐藏列头如果不需要的话，可以将分割线的透明度设置为 0.

s2.setTheme({
  splitLine: {
    horizontalBorderColorOpacity: 0,
  },
})

API 文档

Style

功能描述：样式设置。查看文档和示例

参数	类型	功能描述
layoutWidthType	`adaptive \| colAdaptive \| compact`	单元格宽度布局类型 `adaptive` : 行列等宽，均分整个 `Canvas` 画布宽度 `colAdaptive`：列等宽，行头紧凑布局，列等分画布宽度减去行头宽度的剩余宽度 `compact`：行列紧凑布局，指标维度少的时候无法布满整个画布，列头宽度为实际内容宽度（取当前列最大值，采样每一列前 50 条数据）
dataCell	DataCell	数值单元格配置
rowCell	RowCell	行头单元格配置
colCell	ColCell	列头单元格配置
cornerCell	CornerCell	角头单元格配置
mergedCell	MergedCell	合并单元格配置
seriesNumberCell	SeriesNumberCell	序号单元格配置

DataCell

功能描述：数值单元格配置

参数	说明	类型	默认值	必选
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

ColCell

功能描述：列头单元格配置

参数	说明	类型	默认值
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

RowCell

功能描述：行头单元格配置

参数	说明	类型	默认值
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>`	-

CornerCell

其他公用配置见 CellTextWordWrapStyle

MergedCell

其他公用配置见 CellTextWordWrapStyle

SeriesNumberCell

其他公用配置见 CellTextWordWrapStyle

CellTextWordWrapStyle

功能描述：单元格换行配置。查看示例

参数	说明	类型	默认值
wordWrap	文本是否自动换行（数值单元格不建议换行）。了解更多	`boolean`	`true`
maxLines	最大行数，文本超出后将被截断，当手动拖拽调整高度或存在自定义单元格高度时，为保证展示合理性，会根据当前文本行高计算出能展示的最大行数，覆盖默认的 `maxLines` 配置。该配置支持配置为 `Infinity`（数值单元格不建议换行），需要配合 `wordWrap` 和 `textOverflow` 一起使用。了解更多	`number`	`1`
maxLines	最大行数，文本超出后将被截断，支持配置为 `Infinity`（数值单元格不建议换行），需要配合 `wordWrap` 和 `textOverflow` 一起使用。了解更多	`number`	`1`
textOverflow	自定义隐藏的文本溢出内容，例如直接裁剪、追加省略号或一个自定义字符串，需要配合 `wordWrap` 和 `maxLines` 一起使用。了解更多	`string`	`ellipsis`

S2 可以手动拖拽动态改变单元格的宽高，同时内置了 行列等宽, 列等宽 和 行列紧凑布局 三种布局 (查看示例)

我们可以通过主题修改单元格的背景色，字体大小等配置，如果想自定义单元格的宽高，可以通过 s2Options 的 style 配置来实现

const s2Options = {
  style: {
    // 行头单元格配置
    rowCell: {},
    // 列头单元格配置
    colCell: {},
    // 数值单元格配置
    dataCell: {},
  },
}

调整数值单元格宽高

注意

优先级: 小于 rowCell.height/rowCell.heightByField 和 colCell.width/colCell.widthByField

const s2Options = {
  style: {
    dataCell: {
      width: 100,
      height: 90
    },
  }
}

行头单元格高度和列头单元格的宽度始终和数值单元格一致，所以此时相当于也调整了行头的高度 和 列头的宽度.

调整行头单元格宽高

注意

行头单元格高度调整作用于叶子节点 （非叶子节点的高度是所有子节点高度度总和）, 且高度始终和 数值单元格 高度一致。

优先级: rowCell.heightByField > rowCell.height > dataCell.height

const s2Options = {
  style: {
    rowCell: {
      width: 50,
      height: 50
    },
  },
}

还可以根据当前行头节点信息动态调整，返回 null 代表使用默认宽高.

const s2Options = {
  style: {
    rowCell: {
      width: (rowNode) => {
        // 例：叶子节点 300px, 非叶子节点 200px
        return rowNode.isLeaf ? 300 : 200;
      },
      height: (rowNode) => {
        // 例：偶数行高度 300pox, 奇数行默认高度
        return rowNode.level % 2 === 0 ? 300 : null
      }
    },
  },
}

提示

如果想给特定某一行/列设置不同的宽高，可以通过 rowCell 的 widthByField 和 heightByField 预设高度来实现，支持两种类型的配置：

fieldId （例：root[&]浙江省[&]杭州市): 行列交叉后每一个行头节点对应的唯一 ID, 适用于宽高精确到具体的单元格（如何获取 ID）
field （例：city): 对应 s2DataConfig.fields.rows 中配置的 field, 适用于精确到某一类维值的单元格

import { EXTRA_FIELD } from '@antv/s2'

const s2Options = {
  style: {
    rowCell: {
      widthByField: {
        // 调整维度
        city: 100,
        // 调整具体单元格
        'root[&]浙江省[&]杭州市': 60,
        // 数值挂行头时对应的 [数值] 虚拟字段
        [EXTRA_FIELD]: 20,
      },
      heightByField: {
        type: 10,
        'root[&]浙江省[&]杭州市': 60,
        'root[&]浙江省[&]宁波市': 100,
      },
    },
  },
}

调整树状模式下行头宽度

和平铺模式配置无区别

const s2Options = {
  hierarchyType: 'tree',
  style: {
    rowCell: {
      width: 200,
    }
  },
}

调整列头单元格宽高

注意

列头单元格宽度调整作用于叶子节点 （非叶子节点的宽度是所有子节点宽度总和）, 且宽度始终和 数值单元格 宽度一致。

优先级: colCell.widthByField > colCell.width > dataCell.width

const s2Options = {
  style: {
    colCell: {
      width: 200,
      height: 60,
    },
  },
}

如果想给每一列设置不同的宽高，可以根据当前列头节点信息动态调整宽高，返回 null 代表使用默认宽高.

const s2Options = {
  style: {
    colCell: {
      width: (colNode) => {
        // 例：前两列宽度 100px, 其他 50px
        return colNode.colIndex <= 2 ? 100 : 50
      },
      height: (colNode) => {
        // 例：前两列高度 100px, 其他 默认
        return colNode.colIndex <= 2 ? 100 : null
      },
    },
  },
}

提示

如果想给特定某一列设置不同的宽高，可以通过 colCell 的 widthByField 和 heightByField 预设宽高来实现，支持两种类型的配置：

fieldId （例：root[&]家具[&]沙发[&]number): 行列交叉后每一个列头节点对应的唯一 ID, 适用于宽高精确到具体的单元格（如何获取 ID）
field （例：city): 对应 s2DataConfig.fields.columns 中配置的 field, 适用于精确到某一类维值的单元格

import { EXTRA_FIELD } from '@antv/s2'

const s2Options = {
  style: {
    colCell: {
       widthByField: {
        // 默认 [数值挂列头], EXTRA_FIELD 为内部虚拟数值列，对应 [数值] 单元格
        [EXTRA_FIELD]: 60,
        city: 20,
        'root[&]家具[&]沙发[&]number': 120,
      },
      heightByField: {
        [EXTRA_FIELD]: 80,
        // 调整维度
        city: 20,
        // 调整具体单元格
        'root[&]家具[&]沙发[&]number': 120,
      },
    },
  },
}

调整明细表行高

提示

明细表有一点特殊，由于只有列头：

如果想给所有行设置固定的行高，则可以通过 rowCell.height 调整
如果想给特定行设置不同的行高，则可以通过 rowCell.heightByField 根据行索引调整（从 0 开始）
优先级：rowCell.heightByField > rowCell.height > dataCell.height

const s2Options = {
  style: {
    rowCell: {
      // 设置行高
      height: 40,
      // 给第一行和第三行设置不同的高度
      heightByField: {
        '0': 130,
        '2': 60,
      },
    },
  },
}

查看示例

隐藏列头

还可以将高度设置为 0, 从而实现隐藏列头的效果。

透视表

配置 colCell.height 改变单元格高度从而隐藏全部列头。所需隐藏部分列头请查看交互-隐藏列头-透视表相关文档。

const s2Options = {
  style: {
    colCell: {
      height: 0
    },
  },
}

也支持通过 heightByField 隐藏部分列维度，将高度设置为 0, 列头对应的单元格和所对应的角头都不会渲染。

import { EXTRA_FIELD } from '@antv/s2'

const s2Options = {
  style: {
    colCell: {
      // 隐藏全部列头
      height: 0,
      heightByField: {
        // 隐藏部分维度 （类别/子类别）
        // type: 0,
        // sub_type: 0,
        // EXTRA_FIELD 对应 [数量] 这一虚拟维度列
        [EXTRA_FIELD]: 30,
      },
    },
  },
}

查看示例

明细表

配置 colCell.height 改变单元格高度从而隐藏全部列头。所需隐藏部分列头请查看交互-隐藏列头-明细表相关文档。

查看示例

分割线

默认列头有一条分割线，隐藏列头如果不需要的话，可以将分割线的透明度设置为 0.

s2.setTheme({
  splitLine: {
    horizontalBorderColorOpacity: 0,
  },
})

API 文档

Style

功能描述：样式设置。查看文档和示例

参数	类型	功能描述
layoutWidthType	`adaptive \| colAdaptive \| compact`	单元格宽度布局类型 `adaptive` : 行列等宽，均分整个 `Canvas` 画布宽度 `colAdaptive`：列等宽，行头紧凑布局，列等分画布宽度减去行头宽度的剩余宽度 `compact`：行列紧凑布局，指标维度少的时候无法布满整个画布，列头宽度为实际内容宽度（取当前列最大值，采样每一列前 50 条数据）
dataCell	DataCell	数值单元格配置
rowCell	RowCell	行头单元格配置
colCell	ColCell	列头单元格配置
cornerCell	CornerCell	角头单元格配置
mergedCell	MergedCell	合并单元格配置
seriesNumberCell	SeriesNumberCell	序号单元格配置

DataCell

功能描述：数值单元格配置

参数	说明	类型	默认值	必选
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

ColCell

功能描述：列头单元格配置

参数	说明	类型	默认值
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

RowCell

功能描述：行头单元格配置

参数	说明	类型	默认值
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>`	-

CornerCell

其他公用配置见 CellTextWordWrapStyle

MergedCell

其他公用配置见 CellTextWordWrapStyle

SeriesNumberCell

其他公用配置见 CellTextWordWrapStyle

CellTextWordWrapStyle

功能描述：单元格换行配置。查看示例

参数	说明	类型	默认值
wordWrap	文本是否自动换行（数值单元格不建议换行）。了解更多	`boolean`	`true`
maxLines	最大行数，文本超出后将被截断，当手动拖拽调整高度或存在自定义单元格高度时，为保证展示合理性，会根据当前文本行高计算出能展示的最大行数，覆盖默认的 `maxLines` 配置。该配置支持配置为 `Infinity`（数值单元格不建议换行），需要配合 `wordWrap` 和 `textOverflow` 一起使用。了解更多	`number`	`1`
maxLines	最大行数，文本超出后将被截断，支持配置为 `Infinity`（数值单元格不建议换行），需要配合 `wordWrap` 和 `textOverflow` 一起使用。了解更多	`number`	`1`
textOverflow	自定义隐藏的文本溢出内容，例如直接裁剪、追加省略号或一个自定义字符串，需要配合 `wordWrap` 和 `maxLines` 一起使用。了解更多	`string`	`ellipsis`

自定义单元格宽高

自定义单元格宽高

调整数值单元格宽高

注意

调整行头单元格宽高

注意

提示

调整树状模式下行头宽度

调整列头单元格宽高

注意

提示

调整明细表行高

提示

隐藏列头

透视表

明细表

分割线

API 文档

Style

DataCell

ColCell

RowCell

CornerCell

MergedCell

SeriesNumberCell

CellTextWordWrapStyle

调整数值单元格宽高

注意

调整行头单元格宽高

注意

提示

调整树状模式下行头宽度

调整列头单元格宽高

注意

提示

调整明细表行高

提示

隐藏列头

透视表

明细表

分割线

API 文档

Style

DataCell

ColCell

RowCell

CornerCell

MergedCell

SeriesNumberCell

CellTextWordWrapStyle