S2

主题配置

// 统一设置主题 Schema, 色板，名称
s2.setThemeCfg({
  theme: {},
  palette: {},
  name: "default"
});

// 单独设置主题 Schema, 配置单元格背景，文字大小，文字颜色
s2.setTheme({
  rowCell: {
    cell: {
      backgroundColor: "#fff"
    }
  }
});

ThemeCfg

功能描述：表格主题配置项。查看文档和示例

参数	说明	类型	默认值
theme	主题 schema	S2Theme	-
palette	色板	Palette	-
name	主题名	ThemeName	`default`

ThemeName

功能描述：表格主题名称。查看文档和示例

参数	说明	类型	默认值
default	默认	`string`	-
colorful	多彩蓝	`string`	-
gray	简约灰	`string`	-
dark	暗黑	`string`	-

Palette

功能描述：表主题色板。查看文档和示例

参数	说明	类型	默认值	必选
brandColor	色板主题色	`string`	-	✓
basicColors	基础颜色	`string[]`	-	✓
basicColorRelations	basicColors 与标准色板数组下标的对应关系	`Array<{ basicColorIndex: number; standardColorIndex: number}>`	-	✓
semanticColors	用于表示实际业务语义的颜色。例如内置颜色 “红跌绿涨”	`[key: string]`	-	✓
others	用于表示实际业务语义的颜色。例如内置颜色 “红跌绿涨”	`[key: string]`	-

S2Theme

功能描述：表格主题 Schema. 查看文档和示例

参数	说明	类型
cornerCell	角头单元格主题	DefaultCellTheme
rowCell	行头单元格主题	DefaultCellTheme
colCell	列头单元格主题	DefaultCellTheme
dataCell	数值单元格主题	DefaultCellTheme
resizeArea	列宽行高调整热区	ResizeArea
scrollBar	滚动条样式	ScrollBarTheme
splitLine	单元格分割线样式	SplitLine
prepareSelectMask	刷选遮罩样式	InteractionStateTheme
background	背景样式	Background
preview	图片、视频预览样式	PreviewTheme
empty	空数据占位符样式（明细表有效）	Empty
[key: string]	额外属性字段，用于用户自定义主题时传参	`unknown`

DefaultCellTheme

功能描述：默认单元格主题。查看文档和示例

参数	说明	类型	默认值
bolderText	加粗文本样式（如：总计，小计，行列头非叶子节点文本）了解更多	TextTheme	-
text	文本样式（如：数值，行列头叶子节点文本）了解更多	TextTheme	-
seriesText	序号文本样式	TextTheme	-
measureText	度量值文本样式（如：数值挂行/列头时，行头/列头/角头所对应的虚拟数值单元格文本）了解更多	TextTheme	-
cell	单元格样式	CellTheme	-
icon	图标样式	IconTheme	-
seriesNumberWidth	序号列宽	`number`	80
miniChart	mini 图	MiniChartTheme

ResizeArea

功能描述：列宽行高拖拽热区样式。查看文档和示例

参数	说明	类型	默认值
size	热区大小	`number`	3
background	热区背景色	`string`	-
backgroundOpacity	热区背景色透明度	`number`	-
guideLineColor	参考线颜色	`string`	-
guideLineDash	热区参考线虚线模式	`number[]`	`[3, 3]`
interactionState	热区交互态样式	InteractionState	-

ScrollBarTheme

功能描述：滚动条样式。查看文档和示例

参数	说明	类型	默认值
trackColor	滚动条轨道颜色	`string`	`rgba(0,0,0,0)`
thumbHoverColor	滚动条 Hover 态颜色	`string`	`rgba(0,0,0,0.4)`
thumbColor	滚动条颜色	`string`	`rgba(0,0,0,0.15)`
thumbHorizontalMinSize	滚动条水平最小尺寸（在大数量情况下，滚动条会很小，可配置水平滚动条最小尺寸）	`string`	`32`
thumbVerticalMinSize	滚动条垂直最小尺寸（在大数量情况下，滚动条会很小，可配置垂直滚动条最小尺寸）	`string`	`32`
size	滚动条尺寸	`number`	Mobile: `3` PC: `6`
hoverSize	滚动条 Hover 时的尺寸	`number`	`16`
lineCap	指定如何绘制每一条线段末端	`butt` \| `round` \| `square`	`round`

SplitLine

功能描述：分割线样式

参数	说明	类型	默认值
horizontalBorderColor	水平分割线颜色	`string`	`basicColors[12]`
horizontalBorderColorOpacity	水平分割线颜色透明度	`number`	0.2
horizontalBorderWidth	水平分割线宽度	`number`	2
verticalBorderColor	垂直分割线颜色	`string`	`basicColors[11]`
verticalBorderColorOpacity	垂直分割线颜色透明度	`number`	0.25
verticalBorderWidth	垂直分割线宽度	`number`	2
showShadow	分割线是否显示外阴影（行列冻结情况下）	`boolean`	`true`
shadowWidth	阴影宽度	`number`	8
shadowColors	`left` : 线性变化左侧颜色 `right` : 线性变化右侧颜色	`{left: string,` `right: string}`	`{left: 'rgba(0,0,0,0.1)',` `right: 'rgba(0,0,0,0)'}`
borderDash	分割线虚线	`number \| string \| (string \| number)[]`	`[]`

TextTheme

功能描述：文本主题

参数	说明	类型	默认值
textAlign	文本内容的对齐方式	`left \| center \| right`	-
textBaseline	绘制文本时的基线	`top \| middle \| bottom`	-
fontFamily	字体，如需每个字体宽度一样，请使用等宽字体（如果是 Mac 或 iOS 系统，请避免使用 `-apple-system` `BlinkMacSystemFont` 等系统字体，会导致浏览器卡死)	`string`	`Roboto, PingFangSC, Microsoft YaHei, Arial, sans-serif`
fontSize	字体大小	`number`	-
fontWeight	`number` `string` （可选项：`normal` `bold` `bolder` `lighter`)	`number \| string`	粗体文本：Mobile：`520` PC: `bold` 普通文本：`normal`
fontStyle	字体样式	`normal \| italic \| oblique`	`normal`
fontVariant	字体变体	`normal \| small-caps \| string`	`normal`
fill	字体颜色	`string`	-
linkTextFill	链接文本颜色	`string`	-
opacity	字体透明度	`number`	1

CellTheme

功能描述：单元格通用主题

参数	说明	类型	默认值
crossBackgroundColor	奇数行单元格背景色	`string`	-
backgroundColor	单元格背景色（默认斑马纹效果，如果想禁用，可将 `crossBackgroundColor` 和 `backgroundColor` 设置为同一颜色）	`string`	-
backgroundColorOpacity	单元格背景色透明度	`number`	1
horizontalBorderColor	单元格水平边线颜色	`string`	-
horizontalBorderColorOpacity	单元格水平边线颜色透明度	`number`	1
horizontalBorderWidth	单元格水平边线宽度	`number`	-
verticalBorderColor	单元格垂直边线颜色	`string`	-
verticalBorderColorOpacity	单元格垂直边线颜色透明度	`number`	1
verticalBorderWidth	单元格垂直边线宽度	`number`	-
padding	单元格内边距	Padding	-
interactionState	单元格交互态 (查看默认配置) (示例)	Record<InteractionStateName, InteractionStateTheme>	-
borderDash	单元格边线虚线	`number \| string \| (string \| number)[]`	`[]`

IconTheme

功能描述：icon 通用主题

参数	说明	类型	默认值
fill	icon 填充色	`string`	-
size	icon 大小	`number`	-
margin	单元格外边距	Margin	-

InteractionStateName

功能描述：交互通用主题。查看文档和示例

s2.setTheme({
  dataCell: {
    cell: {
      interactionState: {
        hoverFocus: {},
        selected: {},
        prepareSelect: {}
      }
    }
  }
})

状态名	说明	类型
hover	悬停	InteractionStateTheme
hoverFocus	悬停聚焦	InteractionStateTheme
selected	选中	InteractionStateTheme
unselected	未选中	InteractionStateTheme
searchResult	搜索结果	InteractionStateTheme
highlight	高亮	InteractionStateTheme
prepareSelect	预选中	InteractionStateTheme

Margin ｜ Padding

功能描述：icon 外边距，单元格内边距。

参数	说明	类型
top	上	`number`
right	右	`number`
bottom	下	`number`
left	左	`number`

Background

功能描述：背景配置。查看文档和示例

参数	说明	类型	默认值	必选
color	颜色	`string`	-
opacity	透明度	`number`	1

Empty

功能描述：空数据占位符配置。查看文档和示例

参数	说明	类型	默认值	必选
icon	图标	Omit<IconTheme, 'size'> & { width: number, height: number }	`{ fill: '', width: 64, height: 41, margin: { top: 0, right: 0, bottom: 24, left: 0, } }`
text	文本	TextTheme	`{ fontSize: 12, fontWeight: 'normal', opacity: 1 }`

MiniChartTheme

功能描述：迷你图配置。查看文档和示例

参数	说明	类型
line	折线图样式配置	LineTheme
bar	柱状图样式配置	BarTheme
bullet	颜色	BulletTheme
interval	透明度	IntervalTheme

LineTheme

功能描述：mini 折线图样式配置

参数	说明	类型	默认值	必选
point	折线图的点配置	`{size: number; fill?: number; opacity?: number}`
linkLine	折线图的线配置	`{size: number; fill: number; opacity: number}`

BarTheme

功能描述：mini 柱状图样式配置

参数	说明	类型
intervalPadding	柱状图之间的间隔距离	`number`
fill	颜色填充	`string`
opacity	透明度	`number`

BulletTheme

功能描述：mini 子弹图样式配置

参数	说明	类型
progressBar	进度条样式	ProgressBar
comparativeMeasure	测量标记线	ComparativeMeasure
rangeColors	子弹图状态颜色	RangeColors
backgroundColor	子弹图背景颜色	`string`

ProgressBar

功能描述：mini 子弹图进度条样式配置

参数	说明	类型
widthPercent	子弹图宽度相对单元格 content 占比，小数	`number`
height	高度	`number`
innerHeight	内高度	`number`

ComparativeMeasure

功能描述：mini 子弹图测量标记线样式配置

参数	说明	类型
width	宽度	`number`
height	高度	`number`
fill	颜色填充	`string`
opacity	透明度	`number`

RangeColors

功能描述：mini 子弹图状态颜色样式配置

参数	说明	类型
good	满意	`string`
satisfactory	良好	`string`
bad	不符合预期	`string`

IntervalTheme

功能描述：mini 条形图样式（条件格式）

参数	说明	类型	默认值	必选
height	条形图高度	`number`
fill	颜色填充	`string`

PreviewTheme

功能描述：图片、视频预览样式

参数	说明	类型	默认值	必选
overlay	预览遮罩样式	`CssProperties`
mediaContainer	预览图片、视频本体样式	`CssProperties`