@guandata/guanvis 0.1.34 → 0.1.36
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +15 -0
- package/README.md +16 -4
- package/binaries/guanvis-darwin-arm64 +0 -0
- package/binaries/guanvis-darwin-x64 +0 -0
- package/binaries/guanvis-linux-arm64 +0 -0
- package/binaries/guanvis-linux-x64 +0 -0
- package/binaries/guanvis-win32-x64.exe +0 -0
- package/package.json +1 -1
- package/skills/guanvis/SKILL.md +117 -341
- package/skills/guanvis/references/api-reference.md +1 -0
- package/skills/guanvis/references/builder-reference.md +243 -94
- package/skills/guanvis/references/chart-properties.md +1177 -0
- package/skills/guanvis/references/checkout-editing.md +51 -0
- package/skills/guanvis/references/complex-report-pro-patterns.md +43 -0
- package/skills/guanvis/references/metric-chart-reference.md +15 -4
- package/skills/guanvis/references/publish-and-constraints.md +6 -4
- package/skills/guanvis/references/theme.md +11 -5
|
@@ -0,0 +1,1177 @@
|
|
|
1
|
+
# 图表属性配置
|
|
2
|
+
|
|
3
|
+
介绍图表属性配置的用法和参数。
|
|
4
|
+
|
|
5
|
+
调用属性方法时会按实际支持范围校验图表类型;不支持的调用会产生 validation error。AttachedCard 会在读取基线卡片的图表类型后执行相同校验。
|
|
6
|
+
|
|
7
|
+
标题、图例、数据标签、Tooltip、饼图中心文字和汇总指标共用字体样式校验:`fontFamily` 必须是非空字符串,`color` 必须是字符串或 `null`,`bold` / `italic` / `underline` 必须是 boolean。标题、图例、数据标签、Tooltip 和饼图中心文字的 `fontSize` 范围为 9–72;汇总指标为 12–72。
|
|
8
|
+
|
|
9
|
+
## 卡片设置
|
|
10
|
+
|
|
11
|
+
### `setCardSetting(config)`
|
|
12
|
+
|
|
13
|
+
设置卡片背景、主题跟随、内边距和内容间距:
|
|
14
|
+
|
|
15
|
+
```javascript
|
|
16
|
+
.setCardSetting({
|
|
17
|
+
background: {
|
|
18
|
+
color: "#F5F6F7",
|
|
19
|
+
image: {
|
|
20
|
+
show: true,
|
|
21
|
+
uploadPath: "./assets/card-background.png",
|
|
22
|
+
renderType: ImageRenderType.FIT_TO_CONTENT
|
|
23
|
+
}
|
|
24
|
+
},
|
|
25
|
+
followTheme: false,
|
|
26
|
+
padding: {
|
|
27
|
+
top: 4,
|
|
28
|
+
right: 12,
|
|
29
|
+
bottom: 12,
|
|
30
|
+
left: 12
|
|
31
|
+
},
|
|
32
|
+
contentSpace: ContentSpaceSize.MIDDLE
|
|
33
|
+
})
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
| 字段 | 类型 | 说明 |
|
|
37
|
+
|---|---|---|
|
|
38
|
+
| `background` | object | 背景色和背景图片 |
|
|
39
|
+
| `followTheme` | boolean | 是否跟随页面主题;传 `false` 后不再补齐该卡片的主题样式 |
|
|
40
|
+
| `padding` | object | 四周内边距 |
|
|
41
|
+
| `contentSpace` | `ContentSpaceSize` | 内容间距 |
|
|
42
|
+
|
|
43
|
+
`background` 支持:
|
|
44
|
+
|
|
45
|
+
| 字段 | 类型 | 说明 |
|
|
46
|
+
|---|---|---|
|
|
47
|
+
| `color` | string / `null` | 背景色;`null` 清除显式背景色 |
|
|
48
|
+
| `image` | object / `null` | 背景图片;`null` 清除并关闭背景图片 |
|
|
49
|
+
|
|
50
|
+
`background.image` 支持:
|
|
51
|
+
|
|
52
|
+
| 字段 | 类型/取值 | 说明 |
|
|
53
|
+
|---|---|---|
|
|
54
|
+
| `show` | boolean | 是否显示背景图片 |
|
|
55
|
+
| `url` | string | 以 `http://` 或 `https://` 开头的图片链接;与 `uploadPath` 同时设置时优先使用 `url` |
|
|
56
|
+
| `uploadPath` | string | 待上传的本地图片路径;没有 `url` 时生效,`pack`/`publish` 时作为 Card 附件上传 |
|
|
57
|
+
| `renderType` | `ImageRenderType` | `RATIO`、`STRETCH` 或 `FIT_TO_CONTENT` |
|
|
58
|
+
|
|
59
|
+
本地背景图支持 `jpg/jpeg/png/gif`,相对路径以 guanvis 工程目录为基准,`pack`/`publish` 时自动上传;`image: null` 会关闭并清空背景图。
|
|
60
|
+
|
|
61
|
+
`padding` 支持 `top`、`right`、`bottom`、`left`,每项均为 `0`–`32` 的整数,单位为 px。`contentSpace` 可传 `ContentSpaceSize.SMALL`、`ContentSpaceSize.MIDDLE` 或 `ContentSpaceSize.LARGE`。
|
|
62
|
+
|
|
63
|
+
该方法可用于 Card、MetricChart 和 `attachCard()`;重复调用或通过 `attachCard()` 修改时只合并显式传入的字段。
|
|
64
|
+
|
|
65
|
+
## 卡片标题
|
|
66
|
+
|
|
67
|
+
### `setCardTitleStyle(config)`
|
|
68
|
+
|
|
69
|
+
设置卡片标题的文字和标题区域样式。标题显隐继续使用 `.setShowTitle(boolean)`:
|
|
70
|
+
|
|
71
|
+
```javascript
|
|
72
|
+
.setShowTitle(true)
|
|
73
|
+
.setCardTitleStyle({
|
|
74
|
+
style: {
|
|
75
|
+
fontFamily: "sans-serif",
|
|
76
|
+
fontSize: 18,
|
|
77
|
+
color: "#1F2329",
|
|
78
|
+
bold: true,
|
|
79
|
+
italic: false,
|
|
80
|
+
underline: false,
|
|
81
|
+
textAlign: "left"
|
|
82
|
+
},
|
|
83
|
+
titleSetting: {
|
|
84
|
+
backgroundColor: "#FFFFFF",
|
|
85
|
+
height: 40,
|
|
86
|
+
showBgImage: false,
|
|
87
|
+
showIcon: true,
|
|
88
|
+
icon: {
|
|
89
|
+
url: "/guandata-store/images/title-icon.png",
|
|
90
|
+
sourceType: 3,
|
|
91
|
+
renderType: 3
|
|
92
|
+
},
|
|
93
|
+
topStrip: {
|
|
94
|
+
enabled: true,
|
|
95
|
+
width: 2,
|
|
96
|
+
backgroundColor: "#1456F0"
|
|
97
|
+
},
|
|
98
|
+
bottomStrip: {
|
|
99
|
+
enabled: false,
|
|
100
|
+
width: 2,
|
|
101
|
+
backgroundColor: "#DEE0E3"
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
})
|
|
105
|
+
```
|
|
106
|
+
|
|
107
|
+
`style` 对应前端 `settings.style`:
|
|
108
|
+
|
|
109
|
+
| 字段 | 类型/取值 | 说明 |
|
|
110
|
+
|---|---|---|
|
|
111
|
+
| `fontFamily` | string | 字体 |
|
|
112
|
+
| `fontSize` | 9–72 | 字号 |
|
|
113
|
+
| `color` | string / `null` | 字体颜色;`null` 使用默认颜色 |
|
|
114
|
+
| `bold` / `italic` / `underline` | boolean | 字形 |
|
|
115
|
+
| `textAlign` | `"left"` / `"center"` / `"right"` | 标题水平对齐 |
|
|
116
|
+
|
|
117
|
+
新建 Card 或 MetricChart 时,只要传入 `style`,就会补齐前端标题默认值:`color: null`、`bold: true`、`italic: false`、`underline: false`、`fontSize: 14`、`fontFamily: "sans-serif"`。
|
|
118
|
+
|
|
119
|
+
`titleSetting` 对应前端 `settings.titleSetting`:
|
|
120
|
+
|
|
121
|
+
| 字段 | 类型/取值 | 说明 |
|
|
122
|
+
|---|---|---|
|
|
123
|
+
| `backgroundColor` | string / `null` | 标题区域背景色 |
|
|
124
|
+
| `height` | 0–100 的整数 | 标题区域高度,单位 px |
|
|
125
|
+
| `showBgImage` / `showIcon` | boolean | 是否显示背景图/图标 |
|
|
126
|
+
| `bgImage` / `icon` | image object / `null` | 图片配置 |
|
|
127
|
+
| `topStrip` / `bottomStrip` | strip object / `null` | 顶部/底部边框 |
|
|
128
|
+
|
|
129
|
+
图片对象包含 `url`、`sourceType` 和 `renderType`。`sourceType`:`1` 链接、`2` 上传、`3` 素材;`renderType`:`1` 原比例、`2` 铺满、`3` 自适应。边框对象包含 `enabled`、`backgroundColor` 和 `width`,其中 `width` 可用 `2`、`4`、`6`、`8`。
|
|
130
|
+
|
|
131
|
+
`attachCard()` 只增量合并显式传入的字段。例如只修改字号和底部边框开关时,不会覆盖线上标题颜色、背景和其它边框字段。
|
|
132
|
+
|
|
133
|
+
## 汇总指标
|
|
134
|
+
|
|
135
|
+
### `setSummary(field, options?)`
|
|
136
|
+
|
|
137
|
+
设置卡片底部/侧边的汇总指标。普通数据集 Card 传 `f()` / `field()`,指标平台 MetricChart 传 `metric()`:
|
|
138
|
+
|
|
139
|
+
```javascript
|
|
140
|
+
createCard(ChartType.PIVOT_TABLE, "区域销售")
|
|
141
|
+
.addRow(f("区域"))
|
|
142
|
+
.addMetric(f("销售额"))
|
|
143
|
+
.setSummary(f("销售额"), {
|
|
144
|
+
aggrType: AggrType.AVG,
|
|
145
|
+
label: "平均销售额",
|
|
146
|
+
position: "bottom",
|
|
147
|
+
format: NumberFormat.number(1)
|
|
148
|
+
});
|
|
149
|
+
|
|
150
|
+
createMetricChart(ChartType.PIVOT_TABLE, "销售指标")
|
|
151
|
+
.addMetric(metric("销售额"))
|
|
152
|
+
.setSummary(metric("销售额"), {
|
|
153
|
+
label: "销售额汇总",
|
|
154
|
+
position: "right"
|
|
155
|
+
});
|
|
156
|
+
```
|
|
157
|
+
|
|
158
|
+
普通 Card 的 `options`:
|
|
159
|
+
|
|
160
|
+
| 字段 | 说明 |
|
|
161
|
+
|---|---|
|
|
162
|
+
| `aggrType` | 指标字段支持 `SUM` / `MIN` / `MAX` / `AVG` / `CNT` / `CNT_DISTINCT`;维度支持 `CNT` / `CNT_DISTINCT` / `MIN` / `MAX` |
|
|
163
|
+
| `label` | 汇总指标显示名称;默认使用字段显示名 |
|
|
164
|
+
| `position` | `"top"` / `"bottom"` / `"left"` / `"right"`,默认 `"bottom"` |
|
|
165
|
+
| `format` | NumberFormat 格式对象 |
|
|
166
|
+
|
|
167
|
+
聚合计算字段固定使用 `aggrType: "NUL"`,不能再套一层聚合。MetricChart 的汇总直接引用指标 ID,只支持 `label` 和 `position`。
|
|
168
|
+
|
|
169
|
+
传 `null` 可关闭汇总指标:
|
|
170
|
+
|
|
171
|
+
```javascript
|
|
172
|
+
.setSummary(null)
|
|
173
|
+
```
|
|
174
|
+
|
|
175
|
+
为兼容已有 MetricChart 脚本,`.setSummary({ summaryType, ... })` 原始对象签名仍可使用;新代码优先传字段对象。
|
|
176
|
+
|
|
177
|
+
前端不提供汇总指标的图表包括:`SOLID_GAUGE`、`SINGLE_VALUE`、`PROGRESS_BAR`、`PROGRESS_PIE`、`KPI_CARD`、`LIQUID_GAUGE`、`ACTIVITY_GAUGE`、`KPI_TREND` 和 `DATA_GRID`。
|
|
178
|
+
|
|
179
|
+
### `setSummaryStyle(config)`
|
|
180
|
+
|
|
181
|
+
设置汇总指标名称和值的样式:
|
|
182
|
+
|
|
183
|
+
```javascript
|
|
184
|
+
.setSummaryStyle({
|
|
185
|
+
showLabel: true,
|
|
186
|
+
label: { fontSize: 12, color: "#646A73" },
|
|
187
|
+
value: { fontSize: 20, bold: true, color: "#1F2329" }
|
|
188
|
+
})
|
|
189
|
+
```
|
|
190
|
+
|
|
191
|
+
`label` / `value` 支持 `fontFamily`、`fontSize`(12–72)、`color`、`bold`、`italic`、`underline`。新建卡片会补齐前端默认样式;`attachCard()` 只增量修改显式传入的字段。
|
|
192
|
+
|
|
193
|
+
## 特殊值
|
|
194
|
+
|
|
195
|
+
### `setSpecialValue(config)`
|
|
196
|
+
|
|
197
|
+
把 `NULL` 等特殊值显示为指定文本。支持 `PIVOT_TABLE`、`GROUPED_TABLE`、`SINGLE_VALUE` 和 `KPI_CARD`。
|
|
198
|
+
|
|
199
|
+
```javascript
|
|
200
|
+
.setSpecialValue({ specialValue: "--" })
|
|
201
|
+
```
|
|
202
|
+
|
|
203
|
+
也可直接传字符串:
|
|
204
|
+
|
|
205
|
+
```javascript
|
|
206
|
+
.setSpecialValue("--")
|
|
207
|
+
```
|
|
208
|
+
|
|
209
|
+
透视表额外支持隐藏对比中的空值行/列:
|
|
210
|
+
|
|
211
|
+
```javascript
|
|
212
|
+
.setSpecialValue({
|
|
213
|
+
specialValue: "--",
|
|
214
|
+
hideEmptyCol: true,
|
|
215
|
+
hideEmptyRow: false
|
|
216
|
+
})
|
|
217
|
+
```
|
|
218
|
+
|
|
219
|
+
`hideEmptyCol` 和 `hideEmptyRow` 仅用于 `PIVOT_TABLE`;`attachCard()` 未显式传入的特殊值配置保持不变。
|
|
220
|
+
|
|
221
|
+
## 动态参数默认值
|
|
222
|
+
|
|
223
|
+
### `setDynamicParameterDefaultValue(parameter, value, options?)`
|
|
224
|
+
|
|
225
|
+
设置普通数据集 Card 的卡片级参数默认值。参数必须来自项目的 `dynamic-parameters.js`,优先用 `param(dpId)` 引用:
|
|
226
|
+
|
|
227
|
+
```javascript
|
|
228
|
+
.setDynamicParameterDefaultValue(
|
|
229
|
+
param("aaaaaaaaaaaaaaaaaaaaaaaa"),
|
|
230
|
+
["华东", "华南"]
|
|
231
|
+
)
|
|
232
|
+
```
|
|
233
|
+
|
|
234
|
+
`value` 为数组时会与前端一致地保存为逗号分隔字符串。设置默认值意味着使用卡片级覆盖,因此 `inheritParent` 默认是 `false`;需要继续继承数据集/全局参数时显式传:
|
|
235
|
+
|
|
236
|
+
```javascript
|
|
237
|
+
.setDynamicParameterDefaultValue(
|
|
238
|
+
param("aaaaaaaaaaaaaaaaaaaaaaaa"),
|
|
239
|
+
"全国",
|
|
240
|
+
{ inheritParent: true }
|
|
241
|
+
)
|
|
242
|
+
```
|
|
243
|
+
|
|
244
|
+
同一参数被多个计算字段引用时,会更新该 `dpId` 的全部卡片参数记录。卡片没有实际引用该参数时构建会报错,不会静默写入无效配置。`attachCard()` 使用相同 API,并保留其它参数记录和未修改字段。
|
|
245
|
+
|
|
246
|
+
## 图例
|
|
247
|
+
|
|
248
|
+
### `setShowLegend(show, position?)`
|
|
249
|
+
|
|
250
|
+
设置图例的显隐和主位置。
|
|
251
|
+
|
|
252
|
+
|
|
253
|
+
| 参数 | 类型 | 说明 |
|
|
254
|
+
| ---------- | --------- | ------ |
|
|
255
|
+
| `show` | boolean | 是否显示图例 |
|
|
256
|
+
| `position` | string,可选 | 图例位置 |
|
|
257
|
+
|
|
258
|
+
|
|
259
|
+
```javascript
|
|
260
|
+
.setShowLegend(true, "right")
|
|
261
|
+
```
|
|
262
|
+
|
|
263
|
+
`position` 可使用 `"top"`、`"bottom"`、`"left"`、`"right"`。
|
|
264
|
+
|
|
265
|
+
传入 `position` 时会清除原有的交叉方向对齐位置。
|
|
266
|
+
|
|
267
|
+
### `setChartLegend(config)`
|
|
268
|
+
|
|
269
|
+
设置完整的图例属性。
|
|
270
|
+
|
|
271
|
+
```javascript
|
|
272
|
+
.setChartLegend({
|
|
273
|
+
showLegend: true,
|
|
274
|
+
legendPosition: "right",
|
|
275
|
+
legendCrossPosition: "top",
|
|
276
|
+
fontFamily: "sans-serif",
|
|
277
|
+
fontSize: 12,
|
|
278
|
+
color: "#343D50",
|
|
279
|
+
bold: false,
|
|
280
|
+
customLegend: {
|
|
281
|
+
pagination: true
|
|
282
|
+
}
|
|
283
|
+
})
|
|
284
|
+
```
|
|
285
|
+
|
|
286
|
+
|
|
287
|
+
| 字段 | 类型/取值 | 说明 |
|
|
288
|
+
| ------------------------------- | -------------------------------------------------------- | ------------- |
|
|
289
|
+
| `showLegend` | boolean | 是否显示图例 |
|
|
290
|
+
| `legendPosition` | `"top"` / `"bottom"` / `"left"` / `"right"` | 图例主位置 |
|
|
291
|
+
| `legendCrossPosition` | `"center"` / `"top"` / `"bottom"` / `"left"` / `"right"` | 图例在交叉方向上的对齐位置 |
|
|
292
|
+
| `fontFamily` | string | 图例字体 |
|
|
293
|
+
| `fontSize` | 9–72 | 图例字号 |
|
|
294
|
+
| `color` | string | 图例文字颜色 |
|
|
295
|
+
| `bold` / `italic` / `underline` | boolean | 图例字形 |
|
|
296
|
+
| `customLegend` | object | 图例扩展展示配置 |
|
|
297
|
+
|
|
298
|
+
|
|
299
|
+
设置 `legendPosition` 且未同时设置 `legendCrossPosition` 时,会重置原有的交叉方向对齐位置。
|
|
300
|
+
|
|
301
|
+
`customLegend` 可包含:
|
|
302
|
+
|
|
303
|
+
|
|
304
|
+
| 字段 | 类型 | 说明 |
|
|
305
|
+
| ----------------- | ------- | ------------------- |
|
|
306
|
+
| `pagination` | boolean | 图例是否单行展示 |
|
|
307
|
+
| `showNumber` | boolean | 饼图图例显示数值 |
|
|
308
|
+
| `showPercentage` | boolean | 饼图图例显示百分比 |
|
|
309
|
+
| `autoAlignment` | boolean | 饼图图例数值右对齐 |
|
|
310
|
+
| `legendItemWidth` | number | 数值右对齐时的图例条目宽度,单位 px |
|
|
311
|
+
|
|
312
|
+
|
|
313
|
+
`showNumber`、`showPercentage`、`autoAlignment` 和 `legendItemWidth` 用于 `PIE`。饼图存在拆分字段,或颜色字段不是与分类字段相同的明细字段时,不应用这些配置。
|
|
314
|
+
|
|
315
|
+
在支持图例配置的图表中,`BASIC_LINE`、`BASIC_BAR`、`BASIC_COLUMN`、`BULLET_BAR`、`BULLET_COLUMN`、`BUTTERFLY`、`WORLD_MAP` 和 `BASIC_MAP` 不支持 `pagination`;其它支持图例配置的图表可以使用。图例位于上方或下方时显示为单行。
|
|
316
|
+
|
|
317
|
+
不适用于当前图表类型或字段布局的 `customLegend` 字段不会写入卡片;新建 Card 和 MetricChart 时同时产生 validation warning。
|
|
318
|
+
|
|
319
|
+
图例及 `customLegend` 的未知字段、错误类型、非法位置和小于 `1` 的 `legendItemWidth` 会产生 validation error。
|
|
320
|
+
|
|
321
|
+
## 数据标签
|
|
322
|
+
|
|
323
|
+
主图形和叠加图形的数据标签支持以下公共字段:
|
|
324
|
+
|
|
325
|
+
|
|
326
|
+
| 字段 | 类型 | 说明 |
|
|
327
|
+
| ------------------------------- | ------- | ------------------- |
|
|
328
|
+
| `show` | boolean | 当前图形的数据标签开关 |
|
|
329
|
+
| `showSeries` | boolean | 显示系列名 |
|
|
330
|
+
| `showCategory` | boolean | 显示分类/维度值 |
|
|
331
|
+
| `showNumber` | boolean | 显示数值 |
|
|
332
|
+
| `position` | string | 标签位置,例如 `"outside"` |
|
|
333
|
+
| `fontSize` | 9–72 | 标签字号 |
|
|
334
|
+
| `color` | string | 标签颜色,如 `"#343d50"` |
|
|
335
|
+
| `bold` / `italic` / `underline` | boolean | 标签字形 |
|
|
336
|
+
| `separator` | string | 多项标签内容之间的分隔符 |
|
|
337
|
+
| `textOutline` | boolean | 是否显示文字描边 |
|
|
338
|
+
| `allowOverlap` | boolean | 是否允许标签重叠 |
|
|
339
|
+
|
|
340
|
+
|
|
341
|
+
`show` 控制当前方法对应的图形;不传 `show` 时,只修改显式传入的字段。
|
|
342
|
+
|
|
343
|
+
标签位置由图表方向决定,可用值为 `"outside"`、`"top"`、`"middle"`、`"bottom"`、`"left"`、`"center"`、`"right"`,并非每种图表都支持全部值。
|
|
344
|
+
|
|
345
|
+
`separator` 可使用 `"comma"`、`"colon"`、`"semicolon"`、`"period"`、`"linefeed"`、`"space"`。
|
|
346
|
+
|
|
347
|
+
### `setDataLabel(config)`
|
|
348
|
+
|
|
349
|
+
设置主图形数据标签。
|
|
350
|
+
|
|
351
|
+
除公共字段外,主图形还支持:
|
|
352
|
+
|
|
353
|
+
|
|
354
|
+
| 字段 | 类型 | 说明 |
|
|
355
|
+
| ------------------- | --------------------- | ----------------- |
|
|
356
|
+
| `showPercentage` | boolean | 显示百分比 |
|
|
357
|
+
| `showSubPercentage` | boolean | 显示子级百分比 |
|
|
358
|
+
| `showTotal` | boolean | 显示总计 |
|
|
359
|
+
| `showSubTotal` | boolean | 显示小计 |
|
|
360
|
+
| `showConnector` | boolean | 饼图标签连接线,仅用于 `PIE` |
|
|
361
|
+
| `precision` | `"0"` / `"1"` / `"2"` | 百分比小数位数 |
|
|
362
|
+
|
|
363
|
+
|
|
364
|
+
标签内容字段按图表类型生效:
|
|
365
|
+
|
|
366
|
+
|
|
367
|
+
| 图表 | 可配置的标签内容 |
|
|
368
|
+
| -------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- |
|
|
369
|
+
| `PIE` | `showConnector`、`showCategory`、`showNumber`、`showPercentage` |
|
|
370
|
+
| `STACKED_COLUMN`、`STACKED_COLUMN_WITH_LINE`、`STACKED_COLUMN_WITH_SYMBOL`、`STACKED_BAR` | `showSeries`、`showCategory`、`showNumber`、`showPercentage`、`showTotal` |
|
|
371
|
+
| `PERCENT_STACKED_COLUMN`、`PERCENT_STACKED_BAR` | `showSeries`、`showCategory`、`showNumber`、`showPercentage` |
|
|
372
|
+
| `STACKED_SPLIT_COLUMN`、`STACKED_SPLIT_BAR` | `showSeries`、`showCategory`、`showNumber`、`showPercentage`、`showSubPercentage`、`showTotal`、`showSubTotal` |
|
|
373
|
+
| `BUTTERFLY`、`BASIC_BUBBLE`、`BASIC_SCATTER_PLOT`、`BASIC_MAP`、`WORLD_MAP` | `showCategory`、`showNumber` |
|
|
374
|
+
| 其它支持的图表 | `showSeries`、`showCategory`、`showNumber` |
|
|
375
|
+
|
|
376
|
+
|
|
377
|
+
`precision` 用于支持 `showPercentage` 的图表。
|
|
378
|
+
|
|
379
|
+
旭日图的样式字段为 `separator` 和 `allowOverlap`;`BASIC_MAP`、`WORLD_MAP`、`BUBBLE_MAP`、`POINT_MAP` 的样式字段为字体样式、`separator` 和 `allowOverlap`。
|
|
380
|
+
|
|
381
|
+
调用 `{ show: true }` 时默认打开以下字段:
|
|
382
|
+
|
|
383
|
+
|
|
384
|
+
| 图表 | 默认打开字段 |
|
|
385
|
+
| ------------------------ | ----------------------------------------------- |
|
|
386
|
+
| `PIE` | `showConnector`、`showCategory`、`showPercentage` |
|
|
387
|
+
| `RISING_SUN` | `showCategory` |
|
|
388
|
+
| `BASIC_BUBBLE` | `showCategory` |
|
|
389
|
+
| `PERCENT_STACKED_COLUMN` | `showPercentage` |
|
|
390
|
+
| 其它支持的图表 | `showNumber` |
|
|
391
|
+
|
|
392
|
+
`PIE` 和 `RISING_SUN` 开启数据标签时,未显式设置 `separator` 会使用 `"colon"`。
|
|
393
|
+
|
|
394
|
+
|
|
395
|
+
```javascript
|
|
396
|
+
.setDataLabel({
|
|
397
|
+
show: true,
|
|
398
|
+
showCategory: true,
|
|
399
|
+
showNumber: true,
|
|
400
|
+
separator: "colon",
|
|
401
|
+
position: "outside",
|
|
402
|
+
fontSize: 12,
|
|
403
|
+
color: "#343d50",
|
|
404
|
+
bold: true,
|
|
405
|
+
textOutline: true
|
|
406
|
+
})
|
|
407
|
+
```
|
|
408
|
+
|
|
409
|
+
`show: false` 会关闭主图形中决定标签显隐的字段,同时保留位置、字体、分隔符等样式配置。
|
|
410
|
+
|
|
411
|
+
数据标签的未知字段、非 boolean 显隐值、非法 `position` / `precision` / `separator` 和不合法的字体样式会产生 validation error。
|
|
412
|
+
|
|
413
|
+
### `setMetricAdditionalDataLabel(config)`
|
|
414
|
+
|
|
415
|
+
使用公共字段设置叠加图形数据标签。
|
|
416
|
+
|
|
417
|
+
```javascript
|
|
418
|
+
.setDataLabel({
|
|
419
|
+
show: true,
|
|
420
|
+
showNumber: true
|
|
421
|
+
})
|
|
422
|
+
.setMetricAdditionalDataLabel({
|
|
423
|
+
show: true,
|
|
424
|
+
showNumber: true,
|
|
425
|
+
position: "top"
|
|
426
|
+
})
|
|
427
|
+
```
|
|
428
|
+
|
|
429
|
+
两个方法的开关相互独立。`setDataLabel({ show: false })` 只关闭主图形标签;`setMetricAdditionalDataLabel({ show: false })` 只关闭叠加图形标签。
|
|
430
|
+
|
|
431
|
+
## 坐标轴
|
|
432
|
+
|
|
433
|
+
### `setAxis(config)`
|
|
434
|
+
|
|
435
|
+
设置类目轴、基数值轴、主轴、副轴和缩略轴。`config` 可包含:
|
|
436
|
+
|
|
437
|
+
- `categoryAxis`:X 类目轴。
|
|
438
|
+
- `baseAxis`:X 数值轴,用于散点图、气泡图等。
|
|
439
|
+
- `mainAxis`:Y 主轴。
|
|
440
|
+
- `secondaryAxis`:Y 副轴,通常配合 `.addMetricAdditional()`。
|
|
441
|
+
- `navigator`:缩略轴。
|
|
442
|
+
|
|
443
|
+
```javascript
|
|
444
|
+
.setAxis({
|
|
445
|
+
categoryAxis: {
|
|
446
|
+
visible: true,
|
|
447
|
+
showTitle: true,
|
|
448
|
+
title: "月份",
|
|
449
|
+
autoRotate: 45,
|
|
450
|
+
labelFontSize: 12,
|
|
451
|
+
showAxisLine: true
|
|
452
|
+
},
|
|
453
|
+
baseAxis: {
|
|
454
|
+
visible: true,
|
|
455
|
+
min: 0,
|
|
456
|
+
max: 100
|
|
457
|
+
},
|
|
458
|
+
mainAxis: {
|
|
459
|
+
visible: true,
|
|
460
|
+
showTitle: true,
|
|
461
|
+
title: "销售额",
|
|
462
|
+
min: 0,
|
|
463
|
+
max: 100000,
|
|
464
|
+
autoExtremes: false,
|
|
465
|
+
showGridLine: true,
|
|
466
|
+
labelFontSize: 11,
|
|
467
|
+
format: NumberFormat.currency("¥", 0)
|
|
468
|
+
},
|
|
469
|
+
secondaryAxis: {
|
|
470
|
+
visible: true,
|
|
471
|
+
showTitle: true,
|
|
472
|
+
title: "利润率"
|
|
473
|
+
},
|
|
474
|
+
navigator: {
|
|
475
|
+
showNavigator: true,
|
|
476
|
+
fixedValueAxis: true,
|
|
477
|
+
fixedOnRight: false
|
|
478
|
+
}
|
|
479
|
+
})
|
|
480
|
+
```
|
|
481
|
+
|
|
482
|
+
|
|
483
|
+
| 属性 | 适用轴 | 说明 |
|
|
484
|
+
| ---------------------------------------------- | ----- | ------------------------------------------------------------------------------------- |
|
|
485
|
+
| `visible` | 所有 | 是否显示轴 |
|
|
486
|
+
| `showTitle` | 所有 | 是否显示轴标题 |
|
|
487
|
+
| `title` | 所有 | 轴标题文字 |
|
|
488
|
+
| `titleFontSize` / `titleColor` | 所有 | 标题字号、颜色 |
|
|
489
|
+
| `titleBold` / `titleItalic` / `titleUnderline` | 所有 | 标题字形 |
|
|
490
|
+
| `titlePosition` | 所有 | `"outside"` 或 `"top"`;是否生效取决于图表 |
|
|
491
|
+
| `labelFontSize` / `labelColor` | 所有 | 刻度标签字号、颜色 |
|
|
492
|
+
| `labelBold` / `labelItalic` / `labelUnderline` | 所有 | 刻度标签字形 |
|
|
493
|
+
| `unit` | 数值轴 | 单位文字 |
|
|
494
|
+
| `min` / `max` | 数值轴 | 固定轴范围 |
|
|
495
|
+
| `autoExtremes` | 数值轴 | 是否自动计算范围 |
|
|
496
|
+
| `showGridLine` | 数值轴 | 是否显示网格线 |
|
|
497
|
+
| `gridLineStyle` | 数值轴 | `{ lineType, lineWidth, lineColor }`;`lineType` 为 `"solid"` / `"dashed"` / `"dotted"` |
|
|
498
|
+
| `reverseValue` | 数值轴 | 是否反转轴方向 |
|
|
499
|
+
| `tickInterval` / `autoTickInterval` | 数值轴 | 刻度间隔及是否自动计算 |
|
|
500
|
+
| `format` | 数值轴 | NumberFormat 数值格式对象 |
|
|
501
|
+
| `unifyAxisRange` | 主轴/副轴 | 自动统一双 Y 轴范围 |
|
|
502
|
+
| `autoRotate` | 类目轴 | 标签旋转角度,范围 `-90` 到 `90` |
|
|
503
|
+
| `textLength` | 类目轴 | 标签截断长度 |
|
|
504
|
+
| `step` | 类目轴 | 标签显示间隔 |
|
|
505
|
+
| `isFixTop` | 类目轴 | 将类目轴固定在顶部;仅部分图表生效 |
|
|
506
|
+
| `showAxisLine` | 类目轴 | 是否显示轴线 |
|
|
507
|
+
| `axisLineStyle` | 类目轴 | `{ lineType, lineWidth, lineColor }` |
|
|
508
|
+
| `showNavigator` | 缩略轴 | 是否显示缩略轴 |
|
|
509
|
+
| `fixedValueAxis` | 缩略轴 | 是否固定数值轴范围 |
|
|
510
|
+
| `fixedOnRight` | 缩略轴 | 是否固定在右侧 |
|
|
511
|
+
|
|
512
|
+
各轴会按图表结构校验:
|
|
513
|
+
|
|
514
|
+
- `baseAxis` 只用于 `BASIC_SCATTER_PLOT` 和 `BASIC_BUBBLE`;这两类图表不使用 `categoryAxis`。
|
|
515
|
+
- `secondaryAxis` 需要图表存在副轴;组合图还需要副轴数据区中存在字段。
|
|
516
|
+
- `BOX_PLOT`、`RADAR_LINE` 和 `BUTTERFLY` 不使用 `navigator`。
|
|
517
|
+
|
|
518
|
+
坐标轴会校验顶层和各轴的字段名、字段类型及前端范围,包括字号 `9`–`72`、`autoRotate` 的 `-90`–`90`、大于等于 `1` 的 `textLength` / `step`、正数 `tickInterval`,以及 `min <= max`。轴线和网格线宽度为 `1`–`5`,线型为 `solid`、`dashed` 或 `dotted`。
|
|
519
|
+
|
|
520
|
+
`format` 可包含:
|
|
521
|
+
|
|
522
|
+
|
|
523
|
+
| 字段 | 类型 | 说明 |
|
|
524
|
+
| --------------------- | ------- | ------------------------------- |
|
|
525
|
+
| `formatType` | string | `"NUMBER"`、`"CURRENCY"`、`"PERCENTAGE"` 或 `"ADVANCED"` |
|
|
526
|
+
| `decimalPlaces` | number / null | 小数位数;`NUMBER` 省略时使用自动精度,`CURRENCY` 和 `PERCENTAGE` 省略时默认为 `2` |
|
|
527
|
+
| `useThousandsSeparator` | boolean | 是否使用千分位;`NUMBER` 和 `CURRENCY` 省略时默认为 `true` |
|
|
528
|
+
| `prefixUnit` | string | 缩放单位,如 `"K"`、`"M"`、`"万"`、`"亿"` 或 `"auto"` |
|
|
529
|
+
| `showPrefixUnit` | boolean | 是否显示缩放单位 |
|
|
530
|
+
| `currencySymbol` | string | 货币符号 |
|
|
531
|
+
| `prefix` / `suffix` | string | 前缀和后缀 |
|
|
532
|
+
| `customFormat` | string | 高级数值格式表达式 |
|
|
533
|
+
| `divideDataBy` | number | 数值缩放除数 |
|
|
534
|
+
| `suffixSizePercent` | number | 后缀字号比例 |
|
|
535
|
+
|
|
536
|
+
|
|
537
|
+
优先使用 `NumberFormat.number()`、`NumberFormat.currency()`、`NumberFormat.percentage()` 和 `NumberFormat.auto()` 构造 `format`。构建 payload 时会把 `format` 转换为图表渲染使用的 `formatDefn`;如显式提供 `formatDefn`,则使用传入值。
|
|
538
|
+
|
|
539
|
+
## 工具提示
|
|
540
|
+
|
|
541
|
+
### `setTooltip(config)`
|
|
542
|
+
|
|
543
|
+
设置工具提示的显隐、内容和样式。
|
|
544
|
+
|
|
545
|
+
```javascript
|
|
546
|
+
.setTooltip({ enabled: false })
|
|
547
|
+
```
|
|
548
|
+
|
|
549
|
+
|
|
550
|
+
| 字段 | 类型 | 说明 |
|
|
551
|
+
| ---------------------------- | ---------------------- | ------------------------ |
|
|
552
|
+
| `enabled` | boolean | 是否启用原生图表 Tooltip |
|
|
553
|
+
| `maxNumber` | number | 最大显示条目数,默认 `20`、最小 `1` |
|
|
554
|
+
| `onlyTooltipSeries` | boolean | 只展示显式放入 Tooltip zone 的字段 |
|
|
555
|
+
| `hideTooltipColor` | boolean | 隐藏系列颜色标记;部分图表不支持 |
|
|
556
|
+
| `hideTooltipTotal` | boolean | 隐藏 Tooltip 总计;仅支持总计的图表生效 |
|
|
557
|
+
| `order` | `"metric"` / `"value"` | 按指标顺序或数值大小排序 |
|
|
558
|
+
| `showNumber` | boolean | 饼图 Tooltip 是否显示数值 |
|
|
559
|
+
| `style.title` / `style.body` | object | 标题、正文的字体样式对象 |
|
|
560
|
+
| `style.backgroundColor` | string | Tooltip 背景色 |
|
|
561
|
+
|
|
562
|
+
传入的字段会按图表类型校验,只写入该图表可配置的 Tooltip 属性。
|
|
563
|
+
|
|
564
|
+
字体样式对象可包含 `fontFamily`、`fontSize`(9–72)、`color`、`bold`、`italic`、`underline`。新建时的默认值为:
|
|
565
|
+
|
|
566
|
+
```javascript
|
|
567
|
+
{
|
|
568
|
+
enabled: true,
|
|
569
|
+
maxNumber: 20,
|
|
570
|
+
onlyTooltipSeries: false,
|
|
571
|
+
hideTooltipColor: false,
|
|
572
|
+
hideTooltipTotal: false
|
|
573
|
+
}
|
|
574
|
+
```
|
|
575
|
+
|
|
576
|
+
Tooltip 展示哪些数据字段由 `.addTooltip(field)` 控制;`setTooltip()` 只控制 Tooltip 属性,两者不要混淆。
|
|
577
|
+
|
|
578
|
+
原生 Card Tooltip 不是 ECharts option。不要把自定义 ECharts 中的 `trigger: "axis"`、`formatter` 等字段传给 `setTooltip()`。
|
|
579
|
+
|
|
580
|
+
## 饼图
|
|
581
|
+
|
|
582
|
+
### `setPieSetting(config)`
|
|
583
|
+
|
|
584
|
+
设置饼图和环图的展示方式。
|
|
585
|
+
|
|
586
|
+
|
|
587
|
+
| 字段 | 类型 | 说明 |
|
|
588
|
+
| --------------- | ------- | -------------------------------------- |
|
|
589
|
+
| `showAsRing` | boolean | 是否显示为环图 |
|
|
590
|
+
| `innerSize` | number | 环图空心占比,范围 `0` 到 `100`;不是 `innerRadius` |
|
|
591
|
+
| `mergeOther` | boolean | 是否合并小分类为“其它” |
|
|
592
|
+
| `mergeSize` | number | 保留的维度数量,非负整数;其余合并为“其它” |
|
|
593
|
+
| `mergeColor` | string | “其它”的颜色 |
|
|
594
|
+
| `size` | number | 自定义饼图直径占比,范围 `0` 到 `100` |
|
|
595
|
+
| `centerDisplay` | boolean | 是否启用中心区域展示能力 |
|
|
596
|
+
|
|
597
|
+
|
|
598
|
+
设置 `showAsRing` 时,如果没有提供有效的 `innerSize`,会使用默认空心占比 `70`。
|
|
599
|
+
|
|
600
|
+
```javascript
|
|
601
|
+
.setPieSetting({
|
|
602
|
+
showAsRing: true,
|
|
603
|
+
innerSize: 40,
|
|
604
|
+
mergeOther: true,
|
|
605
|
+
mergeSize: 5,
|
|
606
|
+
mergeColor: "#E9ECF1",
|
|
607
|
+
size: 75
|
|
608
|
+
})
|
|
609
|
+
```
|
|
610
|
+
|
|
611
|
+
### `setPieCenterText(config)`
|
|
612
|
+
|
|
613
|
+
设置饼图中心文本。
|
|
614
|
+
|
|
615
|
+
```javascript
|
|
616
|
+
.setPieCenterText({
|
|
617
|
+
showCenterText: true,
|
|
618
|
+
valueType: "percent",
|
|
619
|
+
valueFont: {
|
|
620
|
+
fontSize: 16,
|
|
621
|
+
bold: true
|
|
622
|
+
},
|
|
623
|
+
textFont: {
|
|
624
|
+
fontSize: 12,
|
|
625
|
+
color: "#646A73"
|
|
626
|
+
}
|
|
627
|
+
})
|
|
628
|
+
```
|
|
629
|
+
|
|
630
|
+
| 字段 | 类型/取值 | 说明 |
|
|
631
|
+
|---|---|---|
|
|
632
|
+
| `showCenterText` | boolean | 是否显示中心文本 |
|
|
633
|
+
| `valueType` | `"percent"` / `"number"` | 中心值显示百分比或数值 |
|
|
634
|
+
| `valueFont` | object | 中心值字体样式 |
|
|
635
|
+
| `textFont` | object | 中心说明文字字体样式 |
|
|
636
|
+
|
|
637
|
+
`valueFont` 和 `textFont` 可包含 `fontFamily`、`fontSize`(9–72)、`color`、`bold`、`italic`、`underline`。首次开启时会补齐中心值字号 `16` 和加粗样式;饼图包含多个指标时会关闭中心文本。
|
|
638
|
+
|
|
639
|
+
## 表格
|
|
640
|
+
|
|
641
|
+
### `setTableSetting(config)`
|
|
642
|
+
|
|
643
|
+
设置透视表、分组表、明细表、树状表和滚动表的行为与视觉样式。行为字段继续写入 `props.miscPivotTableSetting`;视觉样式按分组写入真实前端属性:
|
|
644
|
+
|
|
645
|
+
- `appearance` → `props.pivot_appearance`
|
|
646
|
+
- `headers` → `props.pivot_headers`
|
|
647
|
+
- `data` → `props.pivot_data`
|
|
648
|
+
|
|
649
|
+
视觉分组使用嵌套字段合并。只设置视觉样式时不会清空已有行为配置;编辑已有卡片时也只深合并显式传入的视觉字段。
|
|
650
|
+
|
|
651
|
+
| 图表类型 | 视觉能力 | 行为限制 |
|
|
652
|
+
|---|---|---|
|
|
653
|
+
| `PIVOT_TABLE` | 支持下表全部视觉字段 | 支持透视表序号配置 |
|
|
654
|
+
| `GROUPED_TABLE` | 支持下表全部视觉字段 | 支持分组展示与展开配置 |
|
|
655
|
+
| `DETAIL_TABLE` | 支持下表全部视觉字段 | `vAlign` 仅支持 `"MIDDLE"` |
|
|
656
|
+
| `LAYER_TREE_TABLE` | 支持下表全部视觉字段 | 不支持分页、累计行号和跳过总计行;支持展开配置 |
|
|
657
|
+
| `SCROLL_TABLE` | 使用下文所列的滚动表视觉字段 | 支持数字/字母换行及行号样式;不支持分页、累计行号、跳过总计行和 `textWrap`;`vAlign` 仅支持 `"MIDDLE"` |
|
|
658
|
+
|
|
659
|
+
#### 主题及样式:`appearance`
|
|
660
|
+
|
|
661
|
+
| 字段 | 类型/取值 | 说明 |
|
|
662
|
+
|---|---|---|
|
|
663
|
+
| `theme` | `"classic"` / `"compact"` | 经典或极简主题 |
|
|
664
|
+
| `colorType` | `"grey"` / `"ocean"` / `"laker"` / `"spring"` / `"autumn"` | 表格色系 |
|
|
665
|
+
| `banding` | `{ enabled: boolean, colors: string[] }` | 斑马纹开关与非空颜色数组 |
|
|
666
|
+
| `border` | `{ enabled: boolean, colors: string[] }` | 外边框开关与非空颜色数组 |
|
|
667
|
+
| `divider` | `{ colors: string[] }` | 行列分隔线非空颜色数组 |
|
|
668
|
+
| `backgroundColor` | string | 表格背景色 |
|
|
669
|
+
| `selectedColor` | string | 选中高亮色,可使用带透明度的 `rgba(...)` |
|
|
670
|
+
| `colWidth` | integer,15–1000 | 表格列宽 |
|
|
671
|
+
| `fontFamily` | 非空 string | 全表字体 |
|
|
672
|
+
| `fontSize` | number,12–72 | 全表字号 |
|
|
673
|
+
| `cellPadding` | `"SMALL"` / `"MIDDLE"` / `"LARGE"` | 单元格内间距 |
|
|
674
|
+
|
|
675
|
+
滚动表的 `appearance` 仅支持 `colorType`、`banding`、`divider`、`backgroundColor`、`colWidth` 和 `cellPadding`。其中 `colorType` 可选 `"grey"` / `"light-blue"` / `"purple"` / `"lake-blue"` / `"green"` / `"yellow"`,`divider` 使用 `{ row: boolean, column: boolean, color: string }`。
|
|
676
|
+
|
|
677
|
+
#### 表头设置:`headers`
|
|
678
|
+
|
|
679
|
+
| 字段 | 类型/取值 | 说明 |
|
|
680
|
+
|---|---|---|
|
|
681
|
+
| `columnEnabled` | boolean | 是否显示列表头;仅滚动表支持配置 |
|
|
682
|
+
| `colHeaderHeight` | integer,18–500 | 列表头行高 |
|
|
683
|
+
| `columnStyle` | object | 列表头背景与文字样式 |
|
|
684
|
+
| `colHeaderAlignment` | `"center"` / `"left"` / `"right"` / `"followField"` | 列表头对齐方式 |
|
|
685
|
+
| `rowSize` | integer,0–100 | 行表头列数;滚动表不支持配置 |
|
|
686
|
+
| `rowStyle` | object | 行表头背景与文字样式;额外支持 `showFillColor`;滚动表不支持配置 |
|
|
687
|
+
|
|
688
|
+
#### 数据行样式:`data`
|
|
689
|
+
|
|
690
|
+
| 字段 | 类型/取值 | 说明 |
|
|
691
|
+
|---|---|---|
|
|
692
|
+
| `rowHeight` | integer,18–500 | 数据行行高 |
|
|
693
|
+
| `hoverColor` | string | 鼠标悬停背景色 |
|
|
694
|
+
| `style` | object | 数据区文字样式 |
|
|
695
|
+
|
|
696
|
+
`columnStyle`、`rowStyle` 和 `data.style` 可包含 `fontFamily`、`fontSize`(12–72)、`color`、`bold`、`italic`、`underline`、`strikeThrough`。`columnStyle` / `rowStyle` 还支持 `fillColor`,`rowStyle` 额外支持 `showFillColor: boolean`。
|
|
697
|
+
|
|
698
|
+
```javascript
|
|
699
|
+
.setTableSetting({
|
|
700
|
+
appearance: {
|
|
701
|
+
theme: "compact",
|
|
702
|
+
colorType: "ocean",
|
|
703
|
+
banding: { enabled: true, colors: ["#F5F7FA"] },
|
|
704
|
+
border: { enabled: true, colors: ["#D9DEE8"] },
|
|
705
|
+
divider: { colors: ["#E4E7F0"] },
|
|
706
|
+
backgroundColor: "#FFFFFF",
|
|
707
|
+
selectedColor: "rgba(22, 93, 255, 0.1)",
|
|
708
|
+
colWidth: 120,
|
|
709
|
+
fontFamily: "Arial",
|
|
710
|
+
fontSize: 12,
|
|
711
|
+
cellPadding: "MIDDLE"
|
|
712
|
+
},
|
|
713
|
+
headers: {
|
|
714
|
+
colHeaderHeight: 36,
|
|
715
|
+
columnStyle: { fillColor: "#EDF2FA", color: "#21272A", bold: true },
|
|
716
|
+
colHeaderAlignment: "followField",
|
|
717
|
+
rowSize: 1,
|
|
718
|
+
rowStyle: { showFillColor: true, fillColor: "#F1F6FB", color: "#343D50" }
|
|
719
|
+
},
|
|
720
|
+
data: {
|
|
721
|
+
rowHeight: 32,
|
|
722
|
+
hoverColor: "#F5F5F5",
|
|
723
|
+
style: { color: "#21272A", fontSize: 12 }
|
|
724
|
+
}
|
|
725
|
+
})
|
|
726
|
+
```
|
|
727
|
+
|
|
728
|
+
#### 行为配置
|
|
729
|
+
|
|
730
|
+
| 字段 | 类型 | 说明 |
|
|
731
|
+
|---|---|---|
|
|
732
|
+
| `pagination` | boolean | 是否分页 |
|
|
733
|
+
| `pageSize` | number | 每页行数;可选 `10` / `20` / `50` / `100` / `200` |
|
|
734
|
+
| `autoAlignment` | boolean | 横向自动对齐 |
|
|
735
|
+
| `vAlign` | `"MIDDLE"` / `"TOP"` | 垂直居中或向上对齐;明细表、滚动表不支持 `"TOP"` |
|
|
736
|
+
| `textWrap` | boolean | `true` 自动换行,`false` 截断;滚动表不支持 |
|
|
737
|
+
| `wordBreak` | boolean | 数字/字母是否自动换行;仅滚动表支持 |
|
|
738
|
+
| `showHeaderSortingIcon` | boolean | 是否显示表头排序图标 |
|
|
739
|
+
| `fixedHeaderInfo` | object | 固定表头;通常可包含 `{ X: boolean, Y: boolean }`;滚动表仅支持 `{ X: false }` |
|
|
740
|
+
| `showLineNumber` | boolean | 是否显示行序号 |
|
|
741
|
+
| `accumulatedLineNumber` | boolean | 分页时连续累加编号;树状表、滚动表不支持 |
|
|
742
|
+
| `skipTotalRow` | boolean | 行序号排除总计/小计;与连续累加编号互斥;树状表、滚动表不支持 |
|
|
743
|
+
|
|
744
|
+
透视表和滚动表还支持:
|
|
745
|
+
|
|
746
|
+
| 字段 | 类型 | 说明 |
|
|
747
|
+
|---|---|---|
|
|
748
|
+
| `lineNumberTitle` | string | 序号列标题 |
|
|
749
|
+
| `lineNumberType` | string | `"basic"` / `"num"` / `"circle"` / `"flag"` / `"medal"` / `"card"` / `"fire"` / `"crown"` |
|
|
750
|
+
| `lineNumberStyle` | object | 序号字体样式 |
|
|
751
|
+
|
|
752
|
+
分组表还支持:
|
|
753
|
+
|
|
754
|
+
| 字段 | 类型 | 说明 |
|
|
755
|
+
|---|---|---|
|
|
756
|
+
| `treeDisplay` | boolean | 使用树形展示 |
|
|
757
|
+
| `treeDisplayName` | string | 树形列名称 |
|
|
758
|
+
| `isAutoShrinkGroupedTable` | boolean | 平铺展示无数据时隐藏列 |
|
|
759
|
+
| `isDefaultExpandedGroupedTable` | boolean | 是否默认全部展开 |
|
|
760
|
+
| `defaultExpandCols` | number | 默认展开列数 |
|
|
761
|
+
|
|
762
|
+
树状表支持其中的 `isDefaultExpandedGroupedTable` 和 `defaultExpandCols`。
|
|
763
|
+
|
|
764
|
+
|
|
765
|
+
表格属性会按以下规则同步关联字段:
|
|
766
|
+
|
|
767
|
+
- 对支持累计行号的表格,`pagination: false` 会同时设置 `accumulatedLineNumber: false`。
|
|
768
|
+
- 对支持跳过总计行的表格,`showLineNumber: false` 会同时设置 `skipTotalRow: false`。
|
|
769
|
+
- `skipTotalRow: true` 与 `accumulatedLineNumber: true` 互斥,开启其中一项会关闭另一项。
|
|
770
|
+
- `isDefaultExpandedGroupedTable: true` 会同时设置 `defaultExpandCols: 0`;设置大于 `0` 的 `defaultExpandCols` 会关闭默认全部展开。
|
|
771
|
+
- `treeDisplay: true` 会把列总计位置设置为 `TOP`。
|
|
772
|
+
|
|
773
|
+
`lineNumberStyle` 可包含 `fontFamily`、`fontSize`、`color`、`bold`、`italic`、`underline`、`strikeThrough`。
|
|
774
|
+
|
|
775
|
+
```javascript
|
|
776
|
+
.setTableSetting({
|
|
777
|
+
pagination: true,
|
|
778
|
+
pageSize: 20,
|
|
779
|
+
textWrap: true,
|
|
780
|
+
showLineNumber: true,
|
|
781
|
+
lineNumberTitle: "序号",
|
|
782
|
+
lineNumberType: "num"
|
|
783
|
+
})
|
|
784
|
+
```
|
|
785
|
+
|
|
786
|
+
指标平台分组表示例:
|
|
787
|
+
|
|
788
|
+
```javascript
|
|
789
|
+
.setTableSetting({
|
|
790
|
+
fixedHeaderInfo: { X: false },
|
|
791
|
+
isDefaultExpandedGroupedTable: true,
|
|
792
|
+
defaultExpandCols: 0
|
|
793
|
+
})
|
|
794
|
+
```
|
|
795
|
+
|
|
796
|
+
### `setTableCellMerge(config)`
|
|
797
|
+
|
|
798
|
+
设置透视表单元格合并。
|
|
799
|
+
|
|
800
|
+
```javascript
|
|
801
|
+
.setTableCellMerge({
|
|
802
|
+
noMergeColumn: true,
|
|
803
|
+
noMergeRow: false
|
|
804
|
+
})
|
|
805
|
+
```
|
|
806
|
+
|
|
807
|
+
| 字段 | 类型 | 说明 |
|
|
808
|
+
|---|---|---|
|
|
809
|
+
| `noMergeColumn` | boolean | 是否不合并列区域的相同单元格 |
|
|
810
|
+
| `noMergeRow` | boolean | 是否不合并行区域的相同单元格 |
|
|
811
|
+
|
|
812
|
+
### `setGrandTotal(config)`
|
|
813
|
+
|
|
814
|
+
设置整表总计及其样式。
|
|
815
|
+
|
|
816
|
+
```javascript
|
|
817
|
+
.setGrandTotal({
|
|
818
|
+
rowTotal: {
|
|
819
|
+
show: true,
|
|
820
|
+
position: GrandTotalPosition.RIGHT
|
|
821
|
+
},
|
|
822
|
+
columnTotal: {
|
|
823
|
+
show: true,
|
|
824
|
+
position: GrandTotalPosition.BOTTOM
|
|
825
|
+
},
|
|
826
|
+
subtotalStyle: {
|
|
827
|
+
alias: "小计",
|
|
828
|
+
showDetail: true,
|
|
829
|
+
fillColor: "#F5F7FA"
|
|
830
|
+
},
|
|
831
|
+
grandTotalStyle: {
|
|
832
|
+
alias: "总计",
|
|
833
|
+
bold: true
|
|
834
|
+
}
|
|
835
|
+
})
|
|
836
|
+
```
|
|
837
|
+
|
|
838
|
+
|
|
839
|
+
| 字段 | 类型/取值 | 说明 |
|
|
840
|
+
| ----------------------------------------------------------------- | ----------------------------------- | ------------------------------------- |
|
|
841
|
+
| `rowTotal.show` | boolean | 显示横向的行总计 |
|
|
842
|
+
| `rowTotal.position` | `GrandTotalPosition.LEFT` / `RIGHT` | 行总计位置;新建卡片只传 `show: true` 时默认 `RIGHT` |
|
|
843
|
+
| `columnTotal.show` | boolean | 显示纵向的列总计 |
|
|
844
|
+
| `columnTotal.position` | `GrandTotalPosition.TOP` / `BOTTOM` | 列总计位置;新建透视表默认 `BOTTOM`,分组表默认 `TOP` |
|
|
845
|
+
| `subtotalStyle.alias` | string | 小计别名 |
|
|
846
|
+
| `subtotalStyle.showDetail` | boolean | 是否显示为“小计(维度)” |
|
|
847
|
+
| `subtotalStyle.fillColor` | string | 小计填充色 |
|
|
848
|
+
| `subtotalStyle.fontFamily` / `fontSize` / `color` | string / number / string | 小计字体、字号和文字颜色 |
|
|
849
|
+
| `subtotalStyle.bold` / `italic` / `underline` / `strikeThrough` | boolean | 小计字形 |
|
|
850
|
+
| `grandTotalStyle.alias` | string | 总计别名 |
|
|
851
|
+
| `grandTotalStyle.fillColor` | string | 总计填充色 |
|
|
852
|
+
| `grandTotalStyle.fontFamily` / `fontSize` / `color` | string / number / string | 总计字体、字号和文字颜色 |
|
|
853
|
+
| `grandTotalStyle.bold` / `italic` / `underline` / `strikeThrough` | boolean | 总计字形 |
|
|
854
|
+
|
|
855
|
+
|
|
856
|
+
AttachedCard 只修改显式传入的 `show`、`position` 和样式字段。例如只关闭列总计:
|
|
857
|
+
|
|
858
|
+
```javascript
|
|
859
|
+
attachCard(CARD_ID, BASE_PATH)
|
|
860
|
+
.setGrandTotal({ columnTotal: { show: false } });
|
|
861
|
+
```
|
|
862
|
+
|
|
863
|
+
开启行总计需要表格存在列字段,开启列总计需要表格存在行字段。
|
|
864
|
+
|
|
865
|
+
字段级小计示例:
|
|
866
|
+
|
|
867
|
+
```javascript
|
|
868
|
+
createCard(ChartType.PIVOT_TABLE, "区域销售")
|
|
869
|
+
.addRow(f("区域", { hasSubTotal: true }))
|
|
870
|
+
.addMetric(f("销售额", {
|
|
871
|
+
aggrType: AggrType.SUM,
|
|
872
|
+
subtotalSetting: {
|
|
873
|
+
isDisplayed: true,
|
|
874
|
+
isAggrDsBased: true,
|
|
875
|
+
aggrType: "SUM"
|
|
876
|
+
}
|
|
877
|
+
}));
|
|
878
|
+
|
|
879
|
+
createMetricChart(ChartType.GROUPED_TABLE, "指标表")
|
|
880
|
+
.addRow(metricDim("销售额", "区域", {
|
|
881
|
+
subtotalSetting: { isDisplayed: true }
|
|
882
|
+
}))
|
|
883
|
+
.addMetric(metric("销售额", {
|
|
884
|
+
subtotalSetting: {
|
|
885
|
+
isDisplayed: true,
|
|
886
|
+
isAggrDsBased: true,
|
|
887
|
+
aggrType: "SUM"
|
|
888
|
+
}
|
|
889
|
+
}));
|
|
890
|
+
```
|
|
891
|
+
|
|
892
|
+
修改已有卡片时使用字段 patch,不要整体替换 zone:
|
|
893
|
+
|
|
894
|
+
```javascript
|
|
895
|
+
attachCard(CARD_ID, BASE_PATH)
|
|
896
|
+
.updateRow("区域", { hasSubTotal: false })
|
|
897
|
+
.updateMetric("销售额", {
|
|
898
|
+
subtotalSetting: { isDisplayed: false }
|
|
899
|
+
});
|
|
900
|
+
```
|
|
901
|
+
|
|
902
|
+
`subtotalSetting.aggrType` 可使用 `"SUM"`、`"AVG"`、`"MAX"`、`"MIN"`。
|
|
903
|
+
|
|
904
|
+
## 折线图
|
|
905
|
+
|
|
906
|
+
### `setLineSetting(config)`
|
|
907
|
+
|
|
908
|
+
设置折线图和面积图的线条、数据点与区域填充:
|
|
909
|
+
|
|
910
|
+
```javascript
|
|
911
|
+
.setLineSetting({
|
|
912
|
+
skipNulls: true,
|
|
913
|
+
showArea: true,
|
|
914
|
+
colorType: "gradient",
|
|
915
|
+
opacity: 60,
|
|
916
|
+
showPoint: true,
|
|
917
|
+
pointShape: "ring",
|
|
918
|
+
pointSize: 6,
|
|
919
|
+
showAsSpline: true,
|
|
920
|
+
lineStyle: "Solid_2"
|
|
921
|
+
})
|
|
922
|
+
```
|
|
923
|
+
|
|
924
|
+
| 字段 | 类型 | 说明 |
|
|
925
|
+
|---|---|---|
|
|
926
|
+
| `skipNulls` | boolean | 是否在空值处断开 |
|
|
927
|
+
| `showArea` | boolean | 是否显示折线下方的区域填充 |
|
|
928
|
+
| `colorType` | `"solid"` / `"gradient"` | 区域填充方式 |
|
|
929
|
+
| `opacity` | number | 区域填充透明度,范围 `0`~`100` |
|
|
930
|
+
| `showPoint` | boolean | 是否显示数据点 |
|
|
931
|
+
| `pointShape` | `"default"` / `"dot"` / `"ring"` | 混合图形、实心圆或空心圆 |
|
|
932
|
+
| `pointSize` | `5` / `6` / `8` | 数据点大小 |
|
|
933
|
+
| `showAsSpline` | boolean | 是否显示为曲线 |
|
|
934
|
+
| `lineStyle` | `"Solid_1"` / `"Solid_2"` / `"Solid_3"` / `"Dash_2"` | 细实线、中实线、粗实线或虚线 |
|
|
935
|
+
| `secondSetting` | object | 多折线图次数值轴的折线显示配置,字段与主配置相同 |
|
|
936
|
+
|
|
937
|
+
多折线图可以分别设置主数值轴和次数值轴:
|
|
938
|
+
|
|
939
|
+
```javascript
|
|
940
|
+
.setLineSetting({
|
|
941
|
+
lineStyle: "Solid_2",
|
|
942
|
+
secondSetting: {
|
|
943
|
+
showPoint: false,
|
|
944
|
+
lineStyle: "Dash_2"
|
|
945
|
+
}
|
|
946
|
+
})
|
|
947
|
+
```
|
|
948
|
+
|
|
949
|
+
堆积面积图和百分比堆积面积图使用 `skipNulls`、`opacity`、`showPoint`、`pointShape`、`pointSize`、`showAsSpline` 和 `lineStyle`。
|
|
950
|
+
|
|
951
|
+
## 柱形图与条形图
|
|
952
|
+
|
|
953
|
+
### `setBarSetting(config)`
|
|
954
|
+
|
|
955
|
+
设置柱形图和条形图的柱体宽度、分组间距、组内间距和圆角:
|
|
956
|
+
|
|
957
|
+
```javascript
|
|
958
|
+
.setBarSetting({
|
|
959
|
+
barWidth: 35,
|
|
960
|
+
barBorderRadius: 4
|
|
961
|
+
})
|
|
962
|
+
```
|
|
963
|
+
|
|
964
|
+
也可以使用间距模式:
|
|
965
|
+
|
|
966
|
+
```javascript
|
|
967
|
+
.setBarSetting({
|
|
968
|
+
gapBetweenGroup: 40,
|
|
969
|
+
gapInGroup: 20,
|
|
970
|
+
barBorderRadius: 2
|
|
971
|
+
})
|
|
972
|
+
```
|
|
973
|
+
|
|
974
|
+
| 字段 | 类型/范围 | 说明 |
|
|
975
|
+
|---|---|---|
|
|
976
|
+
| `barWidth` | 1–100 的整数 | 柱体宽度百分比 |
|
|
977
|
+
| `gapBetweenGroup` | 0–100 的整数 | 分组间距百分比 |
|
|
978
|
+
| `gapInGroup` | 0–100 的整数 | 分组内柱体间距百分比 |
|
|
979
|
+
| `barBorderRadius` | 0–40 的整数 | 柱体圆角,单位 px |
|
|
980
|
+
|
|
981
|
+
`barWidth` 与 `gapBetweenGroup` / `gapInGroup` 是两种互斥的配置方式,不能在同一次调用中同时设置。调用 `barWidth` 时自动使用宽度模式;调用任一间距字段时自动切换到间距模式并清除已有 `barWidth`。`barBorderRadius` 可以与任一模式组合,也可以单独修改;新建图表仅在该图表的前端默认矩阵本来使用宽度模式时补充 `useBarWidth: true`,不会把其它柱图强制切换模式。
|
|
982
|
+
|
|
983
|
+
该方法支持以下柱形图和条形图:
|
|
984
|
+
|
|
985
|
+
- 柱形图:`BASIC_COLUMN`、`GROUPED_COLUMN`、`STACKED_COLUMN`、`STACKED_SPLIT_COLUMN`、`PERCENT_STACKED_COLUMN`、`GROUPED_COLUMN_WITH_LINE`、`STACKED_COLUMN_WITH_LINE`、`GROUPED_COLUMN_WITH_SYMBOL`、`STACKED_COLUMN_WITH_SYMBOL`、`BULLET_COLUMN`、`WATERFALL_COLUMN`、`PARETO`
|
|
986
|
+
- 条形图:`BASIC_BAR`、`GROUPED_BAR`、`STACKED_BAR`、`STACKED_SPLIT_BAR`、`PERCENT_STACKED_BAR`、`BULLET_BAR`、`BUTTERFLY`
|
|
987
|
+
|
|
988
|
+
蝴蝶图没有组内柱体间距配置,因此不支持 `gapInGroup`。`attachCard()` 使用相同的图表类型和字段校验,并只合并显式传入的配置;切换到间距模式时保留未修改的颜色、圆角和未知历史字段。
|
|
989
|
+
|
|
990
|
+
## 图形填充
|
|
991
|
+
|
|
992
|
+
### `setShapeColorType(type)`
|
|
993
|
+
|
|
994
|
+
设置柱形、条形等图形的填充方式。
|
|
995
|
+
|
|
996
|
+
```javascript
|
|
997
|
+
.setShapeColorType(ShapeColorType.TransparentGradient)
|
|
998
|
+
```
|
|
999
|
+
|
|
1000
|
+
|
|
1001
|
+
| 枚举 | 后端值 | 说明 |
|
|
1002
|
+
| ------------------------------------ | ------------------------ | ---- |
|
|
1003
|
+
| `ShapeColorType.Solid` | `"solid"` | 纯色 |
|
|
1004
|
+
| `ShapeColorType.TransparentGradient` | `"transparent_gradient"` | 透明渐变 |
|
|
1005
|
+
| `ShapeColorType.ColorGradient` | `"color_gradient"` | 彩色渐变 |
|
|
1006
|
+
|
|
1007
|
+
|
|
1008
|
+
它与 `.addColorBy()` / `.setColorByColors()` 的按指标值渐变着色不是同一能力。
|
|
1009
|
+
|
|
1010
|
+
## 拆分图
|
|
1011
|
+
|
|
1012
|
+
### `setSplitSetting(config)`
|
|
1013
|
+
|
|
1014
|
+
设置拆分图的布局、标签和工具提示,必须配合 `.addSplit(field)`:
|
|
1015
|
+
|
|
1016
|
+
```javascript
|
|
1017
|
+
.addSplit(f("区域"))
|
|
1018
|
+
.setSplitSetting({
|
|
1019
|
+
rows: 2,
|
|
1020
|
+
columns: 3,
|
|
1021
|
+
syncY: true,
|
|
1022
|
+
isolatedChartTooltip: true,
|
|
1023
|
+
titleFormat: {
|
|
1024
|
+
fontFamily: "sans-serif",
|
|
1025
|
+
fontSize: 12,
|
|
1026
|
+
color: "#343D50",
|
|
1027
|
+
bold: false
|
|
1028
|
+
}
|
|
1029
|
+
})
|
|
1030
|
+
```
|
|
1031
|
+
|
|
1032
|
+
|
|
1033
|
+
| 字段 | 类型 | 说明 |
|
|
1034
|
+
| ---------------------- | ------- | --------------------- |
|
|
1035
|
+
| `rows` | number | 拆分布局行数,最小为 `1` |
|
|
1036
|
+
| `columns` | number | 拆分布局列数,最小为 `1` |
|
|
1037
|
+
| `splitRows` | number | 拆分布局行数,与 `rows` 等价,最小为 `1` |
|
|
1038
|
+
| `splitColumns` | number | 拆分布局列数,与 `columns` 等价,最小为 `1` |
|
|
1039
|
+
| `syncY` | boolean | 是否统一拆分图的数值轴范围 |
|
|
1040
|
+
| `isolatedChartTooltip` | boolean | Tooltip 是否只显示当前拆分图的数据 |
|
|
1041
|
+
| `titleFormat` | object | 拆分标签字体样式 |
|
|
1042
|
+
|
|
1043
|
+
|
|
1044
|
+
`titleFormat` 可包含 `fontFamily`、`fontSize`、`color`、`bold`、`italic`、`underline`。不调用时默认 3 行 3 列。主轴或副轴同时设置固定最小值和最大值时,`syncY` 会设为 `true`。
|
|
1045
|
+
|
|
1046
|
+
`syncY` 和 `isolatedChartTooltip` 必须是 boolean;`titleFormat` 使用公共字体样式校验。`rows` 与 `splitRows`、`columns` 与 `splitColumns` 同时传入时必须相等。没有调用 `.addSplit()` 时,构建会提示该配置不生效。
|
|
1047
|
+
|
|
1048
|
+
## 辅助线
|
|
1049
|
+
|
|
1050
|
+
### `setAuxiliaryLine(config)`
|
|
1051
|
+
|
|
1052
|
+
设置数值轴辅助线和分组累计线:
|
|
1053
|
+
|
|
1054
|
+
```javascript
|
|
1055
|
+
.setAuxiliaryLine({
|
|
1056
|
+
mainAxis: [
|
|
1057
|
+
{ name: "目标线", color: "#FF0000", valueType: "FIXED", fixedValue: "50000" },
|
|
1058
|
+
{
|
|
1059
|
+
name: "销售额平均值",
|
|
1060
|
+
color: "#0088FF",
|
|
1061
|
+
valueType: "CALCULATED",
|
|
1062
|
+
field: chartField("metric", 0),
|
|
1063
|
+
calculatedValue: "AVG"
|
|
1064
|
+
}
|
|
1065
|
+
],
|
|
1066
|
+
secondaryAxis: [
|
|
1067
|
+
{ name: "基准线", color: "#00AA00", valueType: "FIXED", fixedValue: "0.3" }
|
|
1068
|
+
],
|
|
1069
|
+
baseAxis: [
|
|
1070
|
+
{ name: "X 轴基准线", color: "#8B5CF6", valueType: "FIXED", fixedValue: "50" }
|
|
1071
|
+
],
|
|
1072
|
+
groupTotal: {
|
|
1073
|
+
show: true,
|
|
1074
|
+
color: "#FF0000"
|
|
1075
|
+
}
|
|
1076
|
+
})
|
|
1077
|
+
```
|
|
1078
|
+
|
|
1079
|
+
|
|
1080
|
+
顶层配置:
|
|
1081
|
+
|
|
1082
|
+
| 字段 | 类型 | 说明 |
|
|
1083
|
+
|---|---|---|
|
|
1084
|
+
| `mainAxis` | array | 主数值轴辅助线数组 |
|
|
1085
|
+
| `secondaryAxis` | array | 次数值轴辅助线数组 |
|
|
1086
|
+
| `baseAxis` | array | 基数值轴辅助线数组 |
|
|
1087
|
+
| `groupTotal` | object | 分组累计线配置 |
|
|
1088
|
+
|
|
1089
|
+
`mainAxis`、`secondaryAxis` 和 `baseAxis` 数组中的辅助线项:
|
|
1090
|
+
|
|
1091
|
+
| 字段 | 类型 | 说明 |
|
|
1092
|
+
|---|---|---|
|
|
1093
|
+
| `name` | string | 辅助线名称,不能为空 |
|
|
1094
|
+
| `color` | string | 颜色,如 `"#FF0000"` |
|
|
1095
|
+
| `valueType` | `"FIXED"` / `"CALCULATED"` | 固定值辅助线或计算辅助线 |
|
|
1096
|
+
| `fixedValue` | number / string | 固定值,可传数字或数字字符串 |
|
|
1097
|
+
| `field` | object | 计算辅助线引用的图表字段,使用 `chartField(zone, index)` |
|
|
1098
|
+
| `calculatedValue` | string | 计算方式 |
|
|
1099
|
+
| `params` | array | 仅 `calculatedValue: "PERCENTILE"` 使用。第一个元素表示百分位比例,范围为 `0`~`1`;例如 `["0.9"]` 表示第 90 百分位,不传时使用 `["0.5"]` |
|
|
1100
|
+
|
|
1101
|
+
`groupTotal` 用于分组、堆积和拆分堆积柱/条图:
|
|
1102
|
+
|
|
1103
|
+
| 字段 | 类型 | 说明 |
|
|
1104
|
+
|---|---|---|
|
|
1105
|
+
| `show` | boolean | 是否显示分组累计线 |
|
|
1106
|
+
| `color` | string | 分组累计线颜色,如 `"#FF0000"` |
|
|
1107
|
+
|
|
1108
|
+
`chartField(zone, index)` 按最终数据区引用字段,`zone` 可使用 `"metric"` 或 `"metricAdditional"`,`index` 从 `0` 开始。构建时会自动写入字段的 `key`、ID、名称和类型;不要手写图表字段 key。
|
|
1109
|
+
|
|
1110
|
+
辅助线顶层和数组项中的未知字段会产生 validation error;显式传入的 `color` 必须是非空字符串。
|
|
1111
|
+
|
|
1112
|
+
图表字段的 `calculatedValue` 可使用 `"AVG"`、`"MED"`、`"PERCENTILE"`、`"MAX"`、`"MIN"`。
|
|
1113
|
+
|
|
1114
|
+
普通 Card 还可以引用不在图表数据区中的数据集字段,此时直接提供 `fdId`、`fdName`、`fdType` 和 `chartFd: false`;计算方式可使用 `"AVG"`、`"MAX"`、`"MIN"`、`"SUM"`、`"CNT"`、`"CNT_DISTINCT"`、`"NUL"`。
|
|
1115
|
+
|
|
1116
|
+
`valueType: "FIXED"` 会移除计算字段、聚合方式和参数;`valueType: "CALCULATED"` 会移除 `fixedValue`。AttachedCard 删除字段或改变字段所在数值轴后,会清理失效的计算辅助线。
|
|
1117
|
+
|
|
1118
|
+
## 主题色
|
|
1119
|
+
|
|
1120
|
+
编写 `setThemeColor()` 配置前,先检查项目根目录的 `theme-colors.js`。文件不存在时先生成快照:
|
|
1121
|
+
|
|
1122
|
+
```bash
|
|
1123
|
+
guanvis theme-color sync -d <project>
|
|
1124
|
+
```
|
|
1125
|
+
|
|
1126
|
+
`theme-colors.js` 是只读快照,项目内的多个页面和子目录共同使用这一份。从快照中选择真实 `tcId` 后,再编写 `setThemeColor(tcId)`;不要猜测或编造 `tcId`。主题色列表变化或切换 BI 环境后,重新执行 `theme-color sync`;快照会按实际选中的 profile、服务地址和 domain 校验当前环境,不一致时构建会提示刷新。
|
|
1127
|
+
|
|
1128
|
+
`preview`、`diff`、`pack` 和 `publish` 会在快照缺失时自动生成,作为构建兜底。这个兜底不能替代配置前读取快照,因为编写 `setThemeColor(tcId)` 时已经需要确定可用的 `tcId`。
|
|
1129
|
+
|
|
1130
|
+
也可以直接查看当前环境的主题色列表:
|
|
1131
|
+
|
|
1132
|
+
```bash
|
|
1133
|
+
guanvis theme-color list -f json
|
|
1134
|
+
```
|
|
1135
|
+
|
|
1136
|
+
### `setThemeColor(tcId, colors?, options?)`
|
|
1137
|
+
|
|
1138
|
+
切换主题色、修改颜色覆盖或选择分类/顺序色板:
|
|
1139
|
+
|
|
1140
|
+
```javascript
|
|
1141
|
+
.setThemeColor("<tcId>", [null, "#FF0000"], {
|
|
1142
|
+
useSequentialPalette: true
|
|
1143
|
+
})
|
|
1144
|
+
```
|
|
1145
|
+
|
|
1146
|
+
| 参数 | 类型 | 说明 |
|
|
1147
|
+
|---|---|---|
|
|
1148
|
+
| `tcId` | string / `null` | 非空字符串表示切换到快照中的指定主题;`null` 表示保留当前主题,当前没有主题时使用默认主题 |
|
|
1149
|
+
| `colors` | (string \| null)[] / `null`,可选 | 按位置设置颜色覆盖;字符串覆盖对应颜色,数组元素 `null` 使用色板原值;省略或传 `null` 时不修改,空数组清除全部覆盖 |
|
|
1150
|
+
| `options` | object / `null`,可选 | 色板模式配置;省略或传 `null` 时不显式修改 |
|
|
1151
|
+
|
|
1152
|
+
`options` 支持以下属性:
|
|
1153
|
+
|
|
1154
|
+
| 字段 | 类型 | 说明 |
|
|
1155
|
+
|---|---|---|
|
|
1156
|
+
| `useSequentialPalette` | boolean / `null` | `true` 使用顺序色板,`false` 使用分类色板;传 `null` 时不显式修改 |
|
|
1157
|
+
|
|
1158
|
+
只切换主题或同时修改颜色:
|
|
1159
|
+
|
|
1160
|
+
```javascript
|
|
1161
|
+
.setThemeColor("<tcId>")
|
|
1162
|
+
.setThemeColor("<tcId>", [null, "#FF0000"])
|
|
1163
|
+
```
|
|
1164
|
+
|
|
1165
|
+
只修改当前主题的颜色覆盖或色板模式时,`tcId` 传 `null`:
|
|
1166
|
+
|
|
1167
|
+
```javascript
|
|
1168
|
+
.setThemeColor(null, [null, null, "rgba(230, 18, 47, 1)"])
|
|
1169
|
+
|
|
1170
|
+
.setThemeColor(null, null, {
|
|
1171
|
+
useSequentialPalette: false
|
|
1172
|
+
})
|
|
1173
|
+
```
|
|
1174
|
+
|
|
1175
|
+
非空 `tcId` 必须使用主题色列表中的真实 ID。切换主题时会同步更新 `tcId`、`theme` 和色板模式;未显式传 `useSequentialPalette` 时,漏斗图在主题提供顺序色板时默认使用顺序色板,否则使用分类色板;其他图表默认使用分类色板。
|
|
1176
|
+
|
|
1177
|
+
已有颜色覆盖会按位置保留,并根据最终所选色板的颜色槽数量补 `null` 或截断。显式传空 `colors` 数组会清除颜色覆盖。`useSequentialPalette: true` 只允许用于开启了顺序色板且包含顺序色板颜色的主题,否则产生 validation error。
|