logo

S2

  • 使用文档
  • API 文档
  • 图表示例
  • 在线体验
  • 更新日志
  • 所有产品antv logo arrow
  • 2.x
  • 基础配置项
    • S2DataConfig
    • S2Options
      Updated
    • S2Theme
      Updated
    • S2Event
      Updated
  • 基础类
    • SpreadSheet
      Updated
    • Interaction
      Updated
    • Store
    • BaseCell
      Updated
    • BaseDataSet
      Updated
    • Node
    • BaseTooltip
    • BaseFacet
      Updated
    • Hierarchy
      New
    • BaseBBox
      New
    • CellData
      New
  • 分析组件
    • 表组件
      Updated
    • 维度下钻
      Updated
    • 维度切换组件
      Updated
    • 高级排序
      Updated
    • 导出
      Updated
  • 绘图属性
  • 透视组合图拓展 S2Options

S2Theme

上一篇
S2Options
下一篇
S2Event

Resources

Ant Design
Galacea Effects
Umi-React 应用开发框架
Dumi-组件/文档研发工具
ahooks-React Hooks 库

社区

体验科技专栏
seeconfSEE Conf-蚂蚁体验科技大会

帮助

GitHub
StackOverflow

more products更多产品

Ant DesignAnt Design-企业级 UI 设计语言
yuque语雀-知识创作与分享工具
EggEgg-企业级 Node 开发框架
kitchenKitchen-Sketch 工具集
GalaceanGalacean-互动图形解决方案
xtech蚂蚁体验科技
© Copyright 2025 Ant Group Co., Ltd..备案号:京ICP备15032932号-38

Loading...

主题配置

// 统一设置主题 Schema, 色板,名称
s2.setThemeCfg({
theme: {},
palette: {},
name: "default"
});
// 单独设置主题 Schema, 配置单元格背景,文字大小,文字颜色
s2.setTheme({
rowCell: {
cell: {
backgroundColor: "#fff"
}
}
});

ThemeCfg

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

参数说明类型默认值必选
theme主题 schemaS2Theme-
palette色板Palette-
name主题名ThemeNamedefault

ThemeName

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

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

Palette

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

参数说明类型默认值必选
brandColor色板主题色string-✓
basicColors基础颜色string[]-✓
basicColorRelationsbasicColors 与标准色板数组下标的对应关系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序号列宽number80
miniChartmini 图MiniChartTheme

ResizeArea

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

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

ScrollBarTheme

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

参数说明类型默认值必选
trackColor滚动条轨道颜色stringrgba(0,0,0,0)
thumbHoverColor滚动条 Hover 态颜色stringrgba(0,0,0,0.4)
thumbColor滚动条颜色stringrgba(0,0,0,0.15)
thumbHorizontalMinSize滚动条水平最小尺寸 (在大数量情况下,滚动条会很小,可配置水平滚动条最小尺寸)string32
thumbVerticalMinSize滚动条垂直最小尺寸 (在大数量情况下,滚动条会很小,可配置垂直滚动条最小尺寸)string32
size滚动条尺寸numberMobile: 3
PC: 6
hoverSize滚动条 Hover 时的尺寸number16
lineCap指定如何绘制每一条线段末端butt | round | squareround

SplitLine

功能描述:分割线样式

参数说明类型默认值必选
horizontalBorderColor水平分割线颜色stringbasicColors[12]
horizontalBorderColorOpacity水平分割线颜色透明度number0.2
horizontalBorderWidth水平分割线宽度number2
verticalBorderColor垂直分割线颜色stringbasicColors[11]
verticalBorderColorOpacity垂直分割线颜色透明度number0.25
verticalBorderWidth垂直分割线宽度number2
showShadow分割线是否显示外阴影(行列冻结情况下)booleantrue
shadowWidth阴影宽度number8
shadowColorsleft : 线性变化左侧颜色
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 等系统字体,会导致浏览器卡死)stringRoboto, PingFangSC, Microsoft YaHei, Arial, sans-serif
fontSize字体大小number-
fontWeightnumber
string (可选项:normal
bold
bolder
lighter)
number | string粗体文本:Mobile:520 PC: bold
普通文本:normal
fontStyle字体样式normal | italic | obliquenormal
fontVariant字体变体normal | small-caps | stringnormal
fill字体颜色string-
linkTextFill链接文本颜色string-
opacity字体透明度number1

CellTheme

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

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

IconTheme

功能描述:icon 通用主题

参数说明类型默认值必选
fillicon 填充色string-
sizeicon 大小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透明度number1

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