Skip to content

Commit e3de698

Browse files
authored
docs: 完善主题章节 (#1288)
* docs: 完善主题章节 * docs: 完善主题章节
1 parent c261d3f commit e3de698

File tree

4 files changed

+274
-191
lines changed

4 files changed

+274
-191
lines changed

s2-site/docs/api/general/S2Theme.zh.md

Lines changed: 119 additions & 116 deletions
Original file line numberDiff line numberDiff line change
@@ -5,195 +5,198 @@ order: 2
55

66
## ThemeCfg
77

8-
<description> **optional** _object_ </description>
8+
<description> **optional** _object_ </description>
99

10-
功能描述: 表主题配置项
10+
功能描述: 表主题配置项
1111

12-
| 参数 | 参数 | 类型 | 默认值 | 必选 |
13-
| :--- | :--- | :--- | :--- | :---: |
14-
| theme |主题 schema | [S2Theme](#s2theme) | - | |
15-
| palette | 色板 schema | [Palette](#palette) | - | |
16-
| name | 色板 schema | `default` \| `colorful` \| `gray` | `default`| |
12+
| 参数 | 参数 | 类型 | 默认值 | 必选 |
13+
| :------ | :---------- | :-------------------------------- | :-------- | :--: |
14+
| theme | 主题 schema | [S2Theme](#s2theme) | - | |
15+
| palette | 色板 | [Palette](#palette) | - | |
16+
| name | 主题名 | `default` \| `colorful` \| `gray` | `default` | |
1717

1818
### Palette
1919

20-
<description> **optional** _object_ </description>
20+
<description> **optional** _object_ </description>
2121

22-
功能描述: 表主题色板 `Schema`
22+
功能描述: 表主题色板
2323

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

2932
### S2Theme
3033

31-
<description> **optional** _object_ </description>
34+
<description> **optional** _object_ </description>
3235

33-
功能描述: 表主题 `Schema`
36+
功能描述: 表主题 `Schema`
3437

35-
| 参数 | 参数 | 类型 | 默认值 | 必选 |
36-
| :--- | :--- | :--- | :--- | :---: |
37-
| cornerCell | 角头单元格主题 | [DefaultCellTheme](#defaultcelltheme) | | |
38-
| rowCell | 行头单元格主题 | [DefaultCellTheme](#defaultcelltheme) | | |
39-
| colCell | 列头单元格主题 | [DefaultCellTheme](#defaultcelltheme) | | |
40-
| dataCell | 数值单元格主题 | [DefaultCellTheme](#defaultcelltheme) | | |
41-
| resizeArea | 列宽行高调整热区 | [ResizeArea](#resizearea) | | |
42-
| scrollBar | 滚动条样式 | [ScrollBarTheme](#scrollbartheme) | | |
43-
| splitLine | 单元格分割线样式 | [SplitLine](#splitline) | | |
44-
| prepareSelectMask | 刷选遮罩样式 | [InteractionStateTheme](#interactionstatetheme) | | |
45-
| background | 刷选遮罩样式 | [Background](#background) | | |
46-
| [key: string] | 额外属性字段,用于用户自定义主题时传参 | `unknown` | | |
38+
| 参数 | 参数 | 类型 | 默认值 | 必选 |
39+
| :-- | :-- | :-- | :-- | :-: |
40+
| cornerCell | 角头单元格主题 | [DefaultCellTheme](#defaultcelltheme) | | |
41+
| rowCell | 行头单元格主题 | [DefaultCellTheme](#defaultcelltheme) | | |
42+
| colCell | 列头单元格主题 | [DefaultCellTheme](#defaultcelltheme) | | |
43+
| dataCell | 数值单元格主题 | [DefaultCellTheme](#defaultcelltheme) | | |
44+
| resizeArea | 列宽行高调整热区 | [ResizeArea](#resizearea) | | |
45+
| scrollBar | 滚动条样式 | [ScrollBarTheme](#scrollbartheme) | | |
46+
| splitLine | 单元格分割线样式 | [SplitLine](#splitline) | | |
47+
| prepareSelectMask | 刷选遮罩样式 | [InteractionStateTheme](#interactionstatetheme) | | |
48+
| background | 刷选遮罩样式 | [Background](#background) | | |
49+
| [key: string] | 额外属性字段,用于用户自定义主题时传参 | `unknown` | | |
4750

4851
#### DefaultCellTheme
4952

50-
<description> **optional** _object_ </description>
53+
<description> **optional** _object_ </description>
5154

5255
功能描述: 默认单元格主题
5356

54-
| 参数 | 说明 | 类型 | 默认值 | 必选 |
55-
| :--- | :--- | :--- | :--- | :---: |
56-
| bolderText | 加粗文本样式 | [TextTheme](#texttheme) | - | |
57-
| text | 文本样式 | [TextTheme](#texttheme) | - | |
58-
| cell | 单元格样式 | [CellTheme](#texttheme) | - | |
59-
| icon | 图标样式 | [IconTheme](#texttheme) | - | |
60-
| seriesNumberWidth | 序号列宽 | `number` | 80 | |
57+
| 参数 | 说明 | 类型 | 默认值 | 必选 |
58+
| :---------------- | :----------- | :---------------------- | :----- | :--: |
59+
| bolderText | 加粗文本样式 | [TextTheme](#texttheme) | - | |
60+
| text | 文本样式 | [TextTheme](#texttheme) | - | |
61+
| cell | 单元格样式 | [CellTheme](#texttheme) | - | |
62+
| icon | 图标样式 | [IconTheme](#texttheme) | - | |
63+
| seriesNumberWidth | 序号列宽 | `number` | 80 | |
6164

6265
#### ResizeArea
6366

64-
<description> **optional** _object_ </description>
67+
<description> **optional** _object_ </description>
6568

6669
功能描述: 列宽行高拖拽热区样式
6770

68-
| 参数 | 说明 | 类型 | 默认值 | 必选 |
69-
| :--- | :--- | :--- | :--- | :---: |
71+
| 参数 | 说明 | 类型 | 默认值 | 必选 |
72+
| :-- | :-- | :-- | :-- | :-: |
7073
| size | 热区大小 | `number` | 3 | |
71-
| background | 热区背景色 | `string` | - | |
74+
| background | 热区背景色 | `string` | - | |
7275
| backgroundOpacity | 热区背景色透明度 | `number` | - | |
7376
| guideLineColor | 参考线颜色 | `string` | - | |
74-
| guideLineDash | 热区参考线 [虚线模式](https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/setLineDash) | `number[]` | `[3, 3]`| |
75-
| interactionState | 热区交互态样式 | [InteractionState](#interactionstate) | - | |
77+
| guideLineDash | 热区参考线 [虚线模式](https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/setLineDash) | `number[]` | `[3, 3]` | |
78+
| interactionState | 热区交互态样式 | [InteractionState](#interactionstate) | - | |
7679

7780
#### ScrollBarTheme
7881

79-
<description> **optional** _object_ </description>
82+
<description> **optional** _object_ </description>
8083

8184
功能描述: 滚动条样式
8285

83-
| 参数 | 说明 | 类型 | 默认值 | 必选 |
84-
| :--- | :--- | :--- | :--- | :---: |
85-
| trackColor | 滚动条轨道颜色 | `string` | `rgba(0,0,0,0)` | |
86-
| thumbHoverColor | 滚动条 Hover 态颜色 | `string` | `rgba(0,0,0,0.4)` | |
87-
| thumbColor | 滚动条颜色 | `string` | `rgba(0,0,0,0.15)` | |
88-
| size | 滚动条尺寸 | `number` | Mobile: 3 <br> PC: 6 | |
89-
| hoverSize | 滚动条 Hover 态大小 | `number` | 16 | |
90-
| lineCap | 指定如何绘制每一条线段末端 | `butt` \| `round` \| `square` | `round` | |
86+
| 参数 | 说明 | 类型 | 默认值 | 必选 |
87+
| :-- | :-- | :-- | :-- | :-: |
88+
| trackColor | 滚动条轨道颜色 | `string` | `rgba(0,0,0,0)` | |
89+
| thumbHoverColor | 滚动条 Hover 态颜色 | `string` | `rgba(0,0,0,0.4)` | |
90+
| thumbColor | 滚动条颜色 | `string` | `rgba(0,0,0,0.15)` | |
91+
| size | 滚动条尺寸 | `number` | Mobile: 3 <br> PC: 6 | |
92+
| hoverSize | 滚动条 Hover 态大小 | `number` | 16 | |
93+
| lineCap | 指定如何绘制每一条线段末端 | `butt` \| `round` \| `square` | `round` | |
9194

9295
#### SplitLine
9396

94-
<description> **optional** _object_ </description>
97+
<description> **optional** _object_ </description>
9598

9699
功能描述: 分割线样式
97100

98-
| 参数 | 说明 | 类型 | 默认值 | 必选 |
99-
| :--- | :--- | :--- | :--- | :---: |
100-
| horizontalBorderColor | 水平分割线颜色 | `string` | - | |
101-
| horizontalBorderColorOpacity | 水平分割线颜色透明度 | `number` | 1 | |
102-
| horizontalBorderWidth | 水平分割线宽度 | `number` | 2 | |
103-
| verticalBorderColor | 垂直分割线颜色 | `string` | - | |
104-
| verticalBorderColorOpacity | 垂直分割线颜色透明度 | `number` | 1 | |
105-
| verticalBorderWidth | 垂直分割线宽度 | `number` | 2 | |
106-
| showShadow | 分割线是否显示外阴影(行列冻结情况下) | `boolean` | `true` | |
107-
| shadowWidth | 阴影宽度 | `number` | 10 | |
108-
| shadowColors | `left` : 线性变化左侧颜色 <br> `right` : 线性变化右侧颜色 | `{left: string,` <br> `right: string}` | `{left: 'rgba(0,0,0,0.1)',`<br>`right: 'rgba(0,0,0,0)'}` | |
101+
| 参数 | 说明 | 类型 | 默认值 | 必选 |
102+
| :-- | :-- | :-- | :-- | :-: |
103+
| horizontalBorderColor | 水平分割线颜色 | `string` | - | |
104+
| horizontalBorderColorOpacity | 水平分割线颜色透明度 | `number` | 1 | |
105+
| horizontalBorderWidth | 水平分割线宽度 | `number` | 2 | |
106+
| verticalBorderColor | 垂直分割线颜色 | `string` | - | |
107+
| verticalBorderColorOpacity | 垂直分割线颜色透明度 | `number` | 1 | |
108+
| verticalBorderWidth | 垂直分割线宽度 | `number` | 2 | |
109+
| showShadow | 分割线是否显示外阴影(行列冻结情况下) | `boolean` | `true` | |
110+
| shadowWidth | 阴影宽度 | `number` | 10 | |
111+
| shadowColors | `left` : 线性变化左侧颜色 <br> `right` : 线性变化右侧颜色 | `{left: string,` <br> `right: string}` | `{left: 'rgba(0,0,0,0.1)',`<br>`right: 'rgba(0,0,0,0)'}` | |
109112

110113
#### TextTheme
111114

112-
<description> **optional** _object_ </description>
115+
<description> **optional** _object_ </description>
113116

114117
功能描述: 文本主题
115118

116-
| 参数 | 说明 | 类型 | 默认值 | 必选 |
117-
| :--- | :--- | :--- | :--- | :---: |
118-
| textAlign | 文本内容的对齐方式 | `left` \| `center` \| `right` | - | |
119-
| textBaseline | 绘制文本时的基线 | `top` \| `middle` \| `bottom` | - | |
120-
| fontFamily | 字体 | `string` | `Roboto, PingFangSC,` <br> `BlinkMacSystemFont,` <br> `Microsoft YaHei,` <br> `Arial, sans-serif` | |
121-
| fontSize | 字体大小 | `number` | - | |
122-
| fontWeight | number <br> string: `normal` <br> `bold` <br> `bolder` <br> `lighter` 字体粗细 | `number` \| `string` | 粗体文本:Mobile:`520` PC: `bold` <br> 普通文本:`normal` | |
123-
| fill | 字体颜色 | `string` | - | |
124-
| linkTextFill |链接文本颜色 | `string` | - | |
125-
| opacity | 字体透明度 | `number` | 1 | |
119+
| 参数 | 说明 | 类型 | 默认值 | 必选 |
120+
| :-- | :-- | :-- | :-- | :-: |
121+
| textAlign | 文本内容的对齐方式 | `left` \| `center` \| `right` | - | |
122+
| textBaseline | 绘制文本时的基线 | `top` \| `middle` \| `bottom` | - | |
123+
| fontFamily | 字体 | `string` | `Roboto, PingFangSC,` <br> `BlinkMacSystemFont,` <br> `Microsoft YaHei,` <br> `Arial, sans-serif` | |
124+
| fontSize | 字体大小 | `number` | - | |
125+
| fontWeight | number <br> string: `normal` <br> `bold` <br> `bolder` <br> `lighter` 字体粗细 | `number` \| `string` | 粗体文本:Mobile:`520` PC: `bold` <br> 普通文本:`normal` | |
126+
| fill | 字体颜色 | `string` | - | |
127+
| linkTextFill | 链接文本颜色 | `string` | - | |
128+
| opacity | 字体透明度 | `number` | 1 | |
126129

127130
#### CellTheme
128131

129-
<description> **optional** _object_ </description>
132+
<description> **optional** _object_ </description>
130133

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

133-
| 参数 | 说明 | 类型 | 默认值 | 必选 |
134-
| :--- | :--- | :--- | :--- | :---: |
135-
| crossBackgroundColor | 基数行单元格背景色 | `string` | - | |
136-
| backgroundColor | 单元格背景色 | `string` | - | |
136+
| 参数 | 说明 | 类型 | 默认值 | 必选 |
137+
| :-- | :-- | :-- | :-- | :-: |
138+
| crossBackgroundColor | 基数行单元格背景色 | `string` | - | |
139+
| backgroundColor | 单元格背景色 | `string` | - | |
137140
| backgroundColorOpacity | 单元格背景色透明度 | `number` | 1 | |
138-
| horizontalBorderColor | 单元格水平边线颜色 | `string` | - | |
139-
| horizontalBorderColorOpacity | 单元格水平边线颜色透明度 | `number` | 1 | |
140-
| horizontalBorderWidth | 单元格水平边线宽度 | `number` | - | |
141-
| verticalBorderColor | 单元格垂直边线颜色 | `string` | - | |
142-
| verticalBorderColorOpacity | 单元格垂直边线颜色透明度 | `number` | 1 | |
143-
| verticalBorderWidth | 单元格垂直边线宽度 | `number` | - | |
144-
| padding | 单元格内边距 | [Padding](#margin--padding) | - | |
145-
| interactionState | 单元格交互态 | [InteractionStateTheme](#interactionstatetheme) | - | |
146-
| miniBarChartHeight | 单元格内条件格式-迷你条形图高度 | `number` | 12 | |
147-
| miniBarChartFillColor | 单元格内条件格式-迷你条形图默认填充颜色 | `string` | - | |
141+
| horizontalBorderColor | 单元格水平边线颜色 | `string` | - | |
142+
| horizontalBorderColorOpacity | 单元格水平边线颜色透明度 | `number` | 1 | |
143+
| horizontalBorderWidth | 单元格水平边线宽度 | `number` | - | |
144+
| verticalBorderColor | 单元格垂直边线颜色 | `string` | - | |
145+
| verticalBorderColorOpacity | 单元格垂直边线颜色透明度 | `number` | 1 | |
146+
| verticalBorderWidth | 单元格垂直边线宽度 | `number` | - | |
147+
| padding | 单元格内边距 | [Padding](#margin--padding) | - | |
148+
| interactionState | 单元格交互态 | [InteractionStateTheme](#interactionstatetheme) | - | |
149+
| miniBarChartHeight | 单元格内条件格式-迷你条形图高度 | `number` | 12 | |
150+
| miniBarChartFillColor | 单元格内条件格式-迷你条形图默认填充颜色 | `string` | - | |
148151

149152
#### IconTheme
150153

151-
<description> **optional** _object_ </description>
154+
<description> **optional** _object_ </description>
152155

153156
功能描述:icon 通用主题
154157

155-
| 参数 | 说明 | 类型 | 默认值 | 必选 |
156-
| :--- | :--- | :--- | :--- | :---: |
157-
| fill | icon 填充色 | `string` | - | |
158-
| downIconColor | 下跌 icon 填充色 | `string` | `#FF4D4F` | |
159-
| upIconColor | 上涨 icon 填充色 | `string` | `#29A294` | |
160-
| size | icon 大小 | `number` | - | |
161-
| margin | 单元格外边距 | [Margin](#margin--padding) | - | |
158+
| 参数 | 说明 | 类型 | 默认值 | 必选 |
159+
| :-- | :-- | :-- | :-- | :-: |
160+
| fill | icon 填充色 | `string` | - | |
161+
| downIconColor | 下跌 icon 填充色 | `string` | `#FF4D4F` | |
162+
| upIconColor | 上涨 icon 填充色 | `string` | `#29A294` | |
163+
| size | icon 大小 | `number` | - | |
164+
| margin | 单元格外边距 | [Margin](#margin--padding) | - | |
162165

163166
#### InteractionStateTheme
164167

165-
<description> **optional** _object_ </description>
168+
<description> **optional** _object_ </description>
166169

167170
功能描述:交互通用主题
168171

169-
| 参数 | 说明 | 类型 | 默认值 | 必选 |
170-
| :--- | :--- | :--- | :--- | :---: |
171-
| backgroundColor | 背景填充色 | `string` | | |
172-
| backgroundOpacity | 背景透明度 | `number` | | |
173-
| borderColor | 边线填充色 | `string` | | |
174-
| borderWidth | 边线宽度 | `number` | | |
175-
| opacity | 整体透明度 | `number` | | |
172+
| 参数 | 说明 | 类型 | 默认值 | 必选 |
173+
| :---------------- | :--------- | :------- | :----- | :--: |
174+
| backgroundColor | 背景填充色 | `string` | | |
175+
| backgroundOpacity | 背景透明度 | `number` | | |
176+
| borderColor | 边线填充色 | `string` | | |
177+
| borderWidth | 边线宽度 | `number` | | |
178+
| opacity | 整体透明度 | `number` | | |
176179

177180
#### Margin | Padding
178181

179-
<description> **optional** _object_ </description>
182+
<description> **optional** _object_ </description>
180183

181184
功能描述:icon 外边距,单元格内边距
182185

183-
| 参数 | 说明 | 类型 | 默认值 | 必选 |
184-
| :--- | :--- | :--- | :---| :---: |
185-
| top || `number` | | |
186-
| right || `number` | | |
187-
| bottom || `number` | | |
188-
| left || `number` | | |
186+
| 参数 | 说明 | 类型 | 默认值 | 必选 |
187+
| :----- | :--- | :------- | :----- | :--: |
188+
| top | | `number` | | |
189+
| right | | `number` | | |
190+
| bottom | | `number` | | |
191+
| left | | `number` | | |
189192

190193
#### Background
191194

192-
<description> **optional** _object_ </description>
195+
<description> **optional** _object_ </description>
193196

194197
功能描述:背景
195198

196-
| 参数 | 说明 | 类型 | 默认值 | 必选 |
197-
| :--- | :--- | :--- | :---| :---: |
198-
| color | 颜色 | `string` | - | |
199-
| opacity | | `number` | 1 | |
199+
| 参数 | 说明 | 类型 | 默认值 | 必选 |
200+
| :------ | :--- | :------- | :----- | :--: |
201+
| color | 颜色 | `string` | - | |
202+
| opacity | | `number` | 1 | |

0 commit comments

Comments
 (0)