S2

简介

S2 中内置了 4 套开箱即用的主题配置，也提供了强大的主题自定义功能。查看 API

色彩

在 S2 的色彩使用中，我们会首先选定一个主题色，并使用主题色生成一套 标准色板：

标准色板共 11 个色彩位，主题色位于索引 6 上
使用主题色加不同程度的 白 生成 5 个较淡的颜色，置于索引 0~5 上
使用主题色加不同程度的 黑 生成 5 个较深的颜色，置于索引 6~11 上

以下是使用 #0A78F4、#FF5500 不同主题色，生成标准色板的示例：

色板 Palette

色板的定义为 Palette，当生成主题 schema 时会从中取用颜色，而它的颜色则来自于标准色板中，Palette 的关键属性有：

basicColors：基础颜色，共 15 个色彩位，本质上确定了表格的配色方案，生成主题 schema 时会从 basicColors 固定索引上取色，如行头背景颜色固定会取 basicColors[1] 的颜色
basicColorRelations：basicColors 与标准色板的对应关系，如内置的 colorful 主题中，行头背景色 basicColors[1] 是取用标准色板中的索引 0 的颜色

由此 S2 保证了，所有绘制时使用的颜色均来自于主题色或主题色的派生颜色。这样使表格界面颜色统一，也便于用户根据自己需要的主题色，生成个性化主题。

主题 Schema

主题 schema 的定义为 S2Theme，其详尽地描述了单元格、交互等主题样式，属性包含颜色、线条粗细、文字大小、文字对齐方式等。整个 schema 中，所有的颜色会从 Palette 中取用：

basicColors：基础颜色，如角/列/行头背景，字体/icon 颜色。
semanticColors：语义颜色，如红色、绿色、黄色指代的色值。
others：补充颜色，一些固定特殊色，如搜索结果。

const s2 = new PivotSheet(container, s2DataConfig, s2Options);

s2.setThemeCfg({
  theme: {
    background: {
      color: '#353c59',
    }
  }
});

//  等价于
s2.setTheme({
  background: {
    color: '#353c59',
  },
});

await s2.render(false);

自定义主题

s2 实例上的 setThemeCfg 方法是一切主题配置的入口，该方法接收一个类型为 ThemeCfg 的参数，你可以：

通过 ThemeCfg.name 使用预置主题
通过 ThemeCfg.palette 自定义色板生成主题
通过 ThemeCfg.theme 自定义 schema 生成主题（可与上两个属性同时使用，即覆盖由它们生成的主题）

选择预置主题

你可以通过指定主题名字来使用对应的主题：

const s2 = new PivotSheet(container, s2DataConfig, s2Options);

// name 可为 default, colorful, gray, dark
s2.setThemeCfg({ name: 'colorful' });
await s2.render(false);

S2 内置 4 套主题效果：

默认 (default)
多彩蓝 (colorful)
简约灰 (gray)
暗黑 (dark)

📊 查看更多主题示例。

自定义 Schema

如果内置的主题不满意你的要求，那么你可以通过自定义 schema 的方式重写特定的配置。

此时你可以调用 s2.setTheme 或者 s2.setThemeCfg() 配置 theme 对象。查看完整 Schema 配置：

const s2 = new PivotSheet(container, s2DataConfig, s2Options);

const customTheme = {
  background: {
    color: '#353c59',
  },
};

s2.setTheme(customTheme) // 等价与：s2.setThemeCfg({ theme: customTheme })
await s2.render(false);

自定义单元格对齐方式

单元格文本配置分为了 text（普通文本）, bolderText（加粗文本）, seriesText（序号文本）, measureText（度量值文本）, 分别对应不同场景。

查看详情或完整 API

s2.setTheme({
  rowCell: {
    text: {
      textAlign: 'left',
    },
    bolderText: {
      textAlign: 'left',
    },
    seriesText: {
      textAlign: 'left',
    },
    measureText: {
      textAlign: 'left',
    }
  },
});

自定义单元格背景色

查看完整 API

s2.setTheme({
  rowCell: {
    cell: {
      backgroundColor: '#dcdcdc',
    },
  },
});

自定义滚动条样式

查看完整 API

s2.setTheme({
  scrollBar: {
    thumbColor: '#666',
    thumbHorizontalMinSize: 20,
    thumbVerticalMinSize: 20,
  },
});

自定义交互样式

查看文档查看示例

自定义色板

自定义 schema 虽然灵活，但是心智负担比较重，需要对 schema 的结构有比较详细的了解。因此我们还提供了自定义色板功能，此时你需要为 setThemeCfg 配置palette对象。查看完整色板配置：

自选色板颜色

你可以参考内置色板个人化设置 basicColors 与 semanticColors，所选颜色会被用于表格不同部分的绘制，颜色使用关系请参考下方的色板对照表。

另外为方便大家调配专属色板，S2 官方提供了自助色板调色工具，所见即所得帮助你快速调配色板，一键复制粘贴进项目使用。

const s2 = new PivotSheet(container, s2DataConfig, s2Options);

const s2Palette = {
  // 基础配色色板
  basicColors: [
    '#FFFFFF',
    '#F8F5FE',
    '#EDE1FD',
    '#873BF4',
    '#7232CF',
    '#AB76F7',
    '#FFFFFF',
    '#DDC7FC',
    '#9858F5',
    '#B98EF8',
    '#873BF4',
    '#282B33',
    '#121826',
  ],
  // 语义化色板
  semanticColors: {
    red: '#FF4D4F',
    green: '#29A294',
  },
};

s2.setThemeCfg({ palette: s2Palette });
await s2.render(false);

按主题色自动生成

自选色板颜色的调配自由度大，但每个颜色都需要单独确定，整体过程较为复杂。为满足用户的一般主题诉求，S2 还提供了根据主题色生成色板的功能。

import { getPalette, generatePalette, PivotSheet } from '@antv/s2';

const s2 = new PivotSheet(container, s2DataConfig, s2Options);

// 主题色
const themeColor = '#EA1720';
// 使用内置的 colorful 色板作为参考色板
// 根据风格差异，你也可以选择 default、gray 作为参考色板
const palette = getPalette('colorful');
// 使用参考色板 & 主题色值生成新色板
const newPalette = generatePalette({ ...palette, brandColor: themeColor });

// 使用新色板设置主题
s2.setThemeCfg({
  palette: newPalette,
});
await s2.render(false);

预置主题色板对照表

色板			涉及范围	对应 schema 的 key
基础色-basicColors
默认	简约灰	多彩蓝
#000000	#000000	#FFFFFF	角头单元格粗体文本颜色	cornerCell.bolderText.fill
			角头单元格文本颜色	cornerCell.text.fill
			角头单元格图标颜色	cornerCell.icon.fill
			行头单元格图标颜色	rowCell.icon.fill
			列头单元格粗体文本颜色	colCell.bolderText.fill
			列头单元格文本颜色	colCell.text.fill
			列头单元格图标颜色	colCell.icon.fill
			数据单元格图标颜色	dataCell.icon.fill
#F5F8FE	#FAFBFB	#F5F8FF	行头单元格背景填充色	rowCell.cell.backgroundColor
			数据单元格背景填充色	dataCell.cell.backgroundColor
#E0E9FD	#F0F2F4	#E1EAFE	行头单元格鼠标悬停态背景填充色	rowCell.cell.interactionState.hover.backgroundColor
			行头单元格鼠标选中态背景填充色	rowCell.cell.interactionState.selected.backgroundColor
			数据单元格鼠标悬停态背景填充色	dataCell.cell.interactionState.hover.backgroundColor
			数据单元格鼠标悬停聚焦态背景填充色	dataCell.cell.interactionState.hoverFocus.backgroundColor
			数据单元格鼠标选中态背景填充色	dataCell.cell.interactionState.selected.backgroundColor
#E0E9FD	#F0F2F4	#3471F9	角头单元格背景填充色	cornerCell.cell.backgroundColor
			列头单元格背景填充色	colCell.cell.backgroundColor
#CCDBFC	#E7E9ED	#2C60D4	列头单元格鼠标鼠标悬停态背景填充色	colCell.cell.interactionState.hover.backgroundColor
			列头单元格鼠标鼠标选中态背景填充色	colCell.cell.interactionState.selected.backgroundColor
#234DAB	#6E757F	#2C60D4	刷选预选中状态蒙板背景填充色	prepareSelectMask.backgroundColor
#326EF4	#565C64	#2C60D4	行头单元格链接文本颜色	rowCell.text.linkTextFill
			行头单元格链接粗体文本颜色	rowCell.bolderText.linkTextFill
#326EF4	#9DA7B6	#3471F9	数据单元格柱状图填充色	miniChart.bar.fill
			resize 蒙层背景色	resizeArea.background
			resize 热区参考线颜色	resizeArea.guideLineColor
			resize 热区悬停态背景颜色	resizeArea.interactionState.hover.backgroundColor
#FFFFFF	#FFFFFF	#FFFFFF	数据单元格背景填充色	dataCell.cell.backgroundColor
			表格背景填充色	background.color
#E0E9FD	#F0F2F4	#E1EAFE	行头单元格水平边框颜色	rowCell.cell.horizontalBorderColor
			行头单元格垂直边框颜色	rowCell.cell.verticalBorderColor
			数据单元格水平边框颜色	dataCell.cell.horizontalBorderColor
			数据单元格垂直边框颜色	dataCell.cell.verticalBorderColor
#CCDBFC	#E7E9ED	#5286FA	角头单元格水平边框颜色	cornerCell.cell.horizontalBorderColor
			角头单元格垂直边框颜色	cornerCell.cell.verticalBorderColor
			列头单元格水平边框颜色	colCell.cell.horizontalBorderColor
			列头单元格垂直边框颜色	colCell.cell.verticalBorderColor
#326EF4	#BAC1CC	#5286FA	表体水平边框颜色（一级横向分割线）	splitLine.verticalBorderColor
#326EF4	#BAC1CC	#3471F9	表体垂直边框颜色（一级纵向分割线）	splitLine.horizontalBorderColor
#000000	#000000	#000000	数据单元格粗体文本颜色	dataCell.bolderText.fill
			数据单元格文本颜色	dataCell.text.fill
#000000	#000000	#000000	行头单元格粗体文本颜色	rowCell.bolderText.fill
			数据单元格鼠标悬停聚焦态边框颜色	dataCell.cell.interactionState.hoverFocus.borderColor
			数据单元格鼠标刷选预中态边框颜色	dataCell.cell.interactionState.prepareSelect.borderColor
			语义色-semanticColors

简介

S2 中内置了 4 套开箱即用的主题配置，也提供了强大的主题自定义功能。查看 API

色彩

在 S2 的色彩使用中，我们会首先选定一个主题色，并使用主题色生成一套 标准色板：

标准色板共 11 个色彩位，主题色位于索引 6 上
使用主题色加不同程度的 白 生成 5 个较淡的颜色，置于索引 0~5 上
使用主题色加不同程度的 黑 生成 5 个较深的颜色，置于索引 6~11 上

以下是使用 #0A78F4、#FF5500 不同主题色，生成标准色板的示例：

色板 Palette

色板的定义为 Palette，当生成主题 schema 时会从中取用颜色，而它的颜色则来自于标准色板中，Palette 的关键属性有：

basicColors：基础颜色，共 15 个色彩位，本质上确定了表格的配色方案，生成主题 schema 时会从 basicColors 固定索引上取色，如行头背景颜色固定会取 basicColors[1] 的颜色
basicColorRelations：basicColors 与标准色板的对应关系，如内置的 colorful 主题中，行头背景色 basicColors[1] 是取用标准色板中的索引 0 的颜色

主题 Schema

basicColors：基础颜色，如角/列/行头背景，字体/icon 颜色。
semanticColors：语义颜色，如红色、绿色、黄色指代的色值。
others：补充颜色，一些固定特殊色，如搜索结果。

const s2 = new PivotSheet(container, s2DataConfig, s2Options);

s2.setThemeCfg({
  theme: {
    background: {
      color: '#353c59',
    }
  }
});

//  等价于
s2.setTheme({
  background: {
    color: '#353c59',
  },
});

await s2.render(false);

自定义主题

s2 实例上的 setThemeCfg 方法是一切主题配置的入口，该方法接收一个类型为 ThemeCfg 的参数，你可以：

通过 ThemeCfg.name 使用预置主题
通过 ThemeCfg.palette 自定义色板生成主题
通过 ThemeCfg.theme 自定义 schema 生成主题（可与上两个属性同时使用，即覆盖由它们生成的主题）

选择预置主题

你可以通过指定主题名字来使用对应的主题：

const s2 = new PivotSheet(container, s2DataConfig, s2Options);

// name 可为 default, colorful, gray, dark
s2.setThemeCfg({ name: 'colorful' });
await s2.render(false);

S2 内置 4 套主题效果：

默认 (default)
多彩蓝 (colorful)
简约灰 (gray)
暗黑 (dark)

📊 查看更多主题示例。

自定义 Schema

如果内置的主题不满意你的要求，那么你可以通过自定义 schema 的方式重写特定的配置。

此时你可以调用 s2.setTheme 或者 s2.setThemeCfg() 配置 theme 对象。查看完整 Schema 配置：

const s2 = new PivotSheet(container, s2DataConfig, s2Options);

const customTheme = {
  background: {
    color: '#353c59',
  },
};

s2.setTheme(customTheme) // 等价与：s2.setThemeCfg({ theme: customTheme })
await s2.render(false);

自定义单元格对齐方式

单元格文本配置分为了 text（普通文本）, bolderText（加粗文本）, seriesText（序号文本）, measureText（度量值文本）, 分别对应不同场景。

查看详情或完整 API

s2.setTheme({
  rowCell: {
    text: {
      textAlign: 'left',
    },
    bolderText: {
      textAlign: 'left',
    },
    seriesText: {
      textAlign: 'left',
    },
    measureText: {
      textAlign: 'left',
    }
  },
});

自定义单元格背景色

查看完整 API

s2.setTheme({
  rowCell: {
    cell: {
      backgroundColor: '#dcdcdc',
    },
  },
});

自定义滚动条样式

查看完整 API

s2.setTheme({
  scrollBar: {
    thumbColor: '#666',
    thumbHorizontalMinSize: 20,
    thumbVerticalMinSize: 20,
  },
});

自定义交互样式

查看文档查看示例

自定义色板

自选色板颜色

你可以参考内置色板个人化设置 basicColors 与 semanticColors，所选颜色会被用于表格不同部分的绘制，颜色使用关系请参考下方的色板对照表。

另外为方便大家调配专属色板，S2 官方提供了自助色板调色工具，所见即所得帮助你快速调配色板，一键复制粘贴进项目使用。

const s2 = new PivotSheet(container, s2DataConfig, s2Options);

const s2Palette = {
  // 基础配色色板
  basicColors: [
    '#FFFFFF',
    '#F8F5FE',
    '#EDE1FD',
    '#873BF4',
    '#7232CF',
    '#AB76F7',
    '#FFFFFF',
    '#DDC7FC',
    '#9858F5',
    '#B98EF8',
    '#873BF4',
    '#282B33',
    '#121826',
  ],
  // 语义化色板
  semanticColors: {
    red: '#FF4D4F',
    green: '#29A294',
  },
};

s2.setThemeCfg({ palette: s2Palette });
await s2.render(false);

按主题色自动生成

import { getPalette, generatePalette, PivotSheet } from '@antv/s2';

const s2 = new PivotSheet(container, s2DataConfig, s2Options);

// 主题色
const themeColor = '#EA1720';
// 使用内置的 colorful 色板作为参考色板
// 根据风格差异，你也可以选择 default、gray 作为参考色板
const palette = getPalette('colorful');
// 使用参考色板 & 主题色值生成新色板
const newPalette = generatePalette({ ...palette, brandColor: themeColor });

// 使用新色板设置主题
s2.setThemeCfg({
  palette: newPalette,
});
await s2.render(false);

预置主题色板对照表

色板			涉及范围	对应 schema 的 key
基础色-basicColors
默认	简约灰	多彩蓝
#000000	#000000	#FFFFFF	角头单元格粗体文本颜色	cornerCell.bolderText.fill
			角头单元格文本颜色	cornerCell.text.fill
			角头单元格图标颜色	cornerCell.icon.fill
			行头单元格图标颜色	rowCell.icon.fill
			列头单元格粗体文本颜色	colCell.bolderText.fill
			列头单元格文本颜色	colCell.text.fill
			列头单元格图标颜色	colCell.icon.fill
			数据单元格图标颜色	dataCell.icon.fill
#F5F8FE	#FAFBFB	#F5F8FF	行头单元格背景填充色	rowCell.cell.backgroundColor
			数据单元格背景填充色	dataCell.cell.backgroundColor
#E0E9FD	#F0F2F4	#E1EAFE	行头单元格鼠标悬停态背景填充色	rowCell.cell.interactionState.hover.backgroundColor
			行头单元格鼠标选中态背景填充色	rowCell.cell.interactionState.selected.backgroundColor
			数据单元格鼠标悬停态背景填充色	dataCell.cell.interactionState.hover.backgroundColor
			数据单元格鼠标悬停聚焦态背景填充色	dataCell.cell.interactionState.hoverFocus.backgroundColor
			数据单元格鼠标选中态背景填充色	dataCell.cell.interactionState.selected.backgroundColor
#E0E9FD	#F0F2F4	#3471F9	角头单元格背景填充色	cornerCell.cell.backgroundColor
			列头单元格背景填充色	colCell.cell.backgroundColor
#CCDBFC	#E7E9ED	#2C60D4	列头单元格鼠标鼠标悬停态背景填充色	colCell.cell.interactionState.hover.backgroundColor
			列头单元格鼠标鼠标选中态背景填充色	colCell.cell.interactionState.selected.backgroundColor
#234DAB	#6E757F	#2C60D4	刷选预选中状态蒙板背景填充色	prepareSelectMask.backgroundColor
#326EF4	#565C64	#2C60D4	行头单元格链接文本颜色	rowCell.text.linkTextFill
			行头单元格链接粗体文本颜色	rowCell.bolderText.linkTextFill
#326EF4	#9DA7B6	#3471F9	数据单元格柱状图填充色	miniChart.bar.fill
			resize 蒙层背景色	resizeArea.background
			resize 热区参考线颜色	resizeArea.guideLineColor
			resize 热区悬停态背景颜色	resizeArea.interactionState.hover.backgroundColor
#FFFFFF	#FFFFFF	#FFFFFF	数据单元格背景填充色	dataCell.cell.backgroundColor
			表格背景填充色	background.color
#E0E9FD	#F0F2F4	#E1EAFE	行头单元格水平边框颜色	rowCell.cell.horizontalBorderColor
			行头单元格垂直边框颜色	rowCell.cell.verticalBorderColor
			数据单元格水平边框颜色	dataCell.cell.horizontalBorderColor
			数据单元格垂直边框颜色	dataCell.cell.verticalBorderColor
#CCDBFC	#E7E9ED	#5286FA	角头单元格水平边框颜色	cornerCell.cell.horizontalBorderColor
			角头单元格垂直边框颜色	cornerCell.cell.verticalBorderColor
			列头单元格水平边框颜色	colCell.cell.horizontalBorderColor
			列头单元格垂直边框颜色	colCell.cell.verticalBorderColor
#326EF4	#BAC1CC	#5286FA	表体水平边框颜色（一级横向分割线）	splitLine.verticalBorderColor
#326EF4	#BAC1CC	#3471F9	表体垂直边框颜色（一级纵向分割线）	splitLine.horizontalBorderColor
#000000	#000000	#000000	数据单元格粗体文本颜色	dataCell.bolderText.fill
			数据单元格文本颜色	dataCell.text.fill
#000000	#000000	#000000	行头单元格粗体文本颜色	rowCell.bolderText.fill
			数据单元格鼠标悬停聚焦态边框颜色	dataCell.cell.interactionState.hoverFocus.borderColor
			数据单元格鼠标刷选预中态边框颜色	dataCell.cell.interactionState.prepareSelect.borderColor
			语义色-semanticColors