@@ -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