@wubaoqi/guancopilot 0.0.0-stage → 0.2.0
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/NOTICE.md +17 -0
- package/README.md +146 -2
- package/assets/coreutils.wasm +0 -0
- package/assets/find.wasm +0 -0
- package/assets/guanbi.wasm +4 -0
- package/assets/guancli.wasm +0 -0
- package/assets/guanhelm.wasm +0 -0
- package/assets/jq.wasm +0 -0
- package/assets/openskills.wasm +0 -0
- package/assets/rg.wasm +0 -0
- package/assets/sed.wasm +0 -0
- package/bin/guancopilot +0 -0
- package/bin/guanvm +0 -0
- package/bin/platforms.cjs +6 -0
- package/bin/run.cjs +39 -0
- package/bin/runtime.cjs +44 -0
- package/licenses/Go-LICENSE +27 -0
- package/licenses/browser-_speed-highlight_core-LICENSE +121 -0
- package/licenses/browser-_speed-highlight_core-package.json +14 -0
- package/licenses/browser-dompurify-LICENSE +202 -0
- package/licenses/browser-dompurify-LICENSE-MPL +373 -0
- package/licenses/browser-dompurify-package.json +10 -0
- package/licenses/browser-marked-LICENSE +44 -0
- package/licenses/browser-marked-package.json +10 -0
- package/licenses/coreutils-LICENSE +18 -0
- package/licenses/findutils-LICENSE +18 -0
- package/licenses/github.com_BurntSushi_toml_v1.6.0-COPYING +21 -0
- package/licenses/github.com_dustin_go-humanize_v1.0.1-LICENSE +21 -0
- package/licenses/github.com_google_jsonschema-go_v0.4.3-LICENSE +21 -0
- package/licenses/github.com_google_uuid_v1.6.0-LICENSE +27 -0
- package/licenses/github.com_jackc_pgpassfile_v1.0.0-LICENSE +22 -0
- package/licenses/github.com_jackc_pgservicefile_v0.0.0-20240606120523-5a60cdf6a761-LICENSE +22 -0
- package/licenses/github.com_jackc_pgx_v5_v5.11.0-LICENSE +22 -0
- package/licenses/github.com_jackc_puddle_v2_v2.2.2-LICENSE +22 -0
- package/licenses/github.com_mattn_go-isatty_v0.0.20-LICENSE +9 -0
- package/licenses/github.com_modelcontextprotocol_go-sdk_v1.8.0-LICENSE +216 -0
- package/licenses/github.com_ncruces_go-strftime_v1.0.0-LICENSE +21 -0
- package/licenses/github.com_remyoudompheng_bigfft_v0.0.0-20230129092748-24d4a6f8daec-LICENSE +27 -0
- package/licenses/github.com_santhosh-tekuri_jsonschema_v6_v6.0.3-LICENSE +175 -0
- package/licenses/github.com_segmentio_asm_v1.1.3-LICENSE +21 -0
- package/licenses/github.com_segmentio_encoding_v0.5.4-LICENSE +21 -0
- package/licenses/github.com_tetratelabs_wazero_v1.12.0-LICENSE +201 -0
- package/licenses/github.com_tetratelabs_wazero_v1.12.0-NOTICE +2 -0
- package/licenses/github.com_yosida95_uritemplate_v3_v3.0.2-LICENSE +25 -0
- package/licenses/golang.org_x_image_v0.44.0-LICENSE +27 -0
- package/licenses/golang.org_x_net_v0.58.0-LICENSE +27 -0
- package/licenses/golang.org_x_oauth2_v0.36.0-LICENSE +27 -0
- package/licenses/golang.org_x_sync_v0.22.0-LICENSE +27 -0
- package/licenses/golang.org_x_sys_v0.47.0-LICENSE +27 -0
- package/licenses/golang.org_x_text_v0.41.0-LICENSE +27 -0
- package/licenses/golang.org_x_time_v0.15.0-LICENSE +27 -0
- package/licenses/guanbi-skills-LICENSE +133 -0
- package/licenses/guanbi-skills-LICENSE.README.md +28 -0
- package/licenses/guanbi-skills-LICENSE.zh-CN +82 -0
- package/licenses/jq-COPYING +176 -0
- package/licenses/modernc.org_libc_v1.73.4-LICENSE +27 -0
- package/licenses/modernc.org_libc_v1.73.4-LICENSE-3RD-PARTY.md +305 -0
- package/licenses/modernc.org_mathutil_v1.7.1-LICENSE +27 -0
- package/licenses/modernc.org_memory_v1.11.0-LICENSE +27 -0
- package/licenses/modernc.org_memory_v1.11.0-LICENSE-GO +27 -0
- package/licenses/modernc.org_memory_v1.11.0-LICENSE-LOGO +1 -0
- package/licenses/modernc.org_memory_v1.11.0-LICENSE-MMAP-GO +25 -0
- package/licenses/modernc.org_sqlite_v1.53.0-LICENSE +26 -0
- package/licenses/mvdan.cc_sh_v3_v3.13.1-LICENSE +27 -0
- package/licenses/ripgrep-COPYING +3 -0
- package/licenses/ripgrep-LICENSE-MIT +21 -0
- package/licenses/sed-LICENSE +21 -0
- package/manifest.json +972 -0
- package/package.json +30 -4
- package/plugin/guancopilot.js +193 -0
- package/skills-bundle/.guanvm-skills-bundle +0 -0
- package/skills-bundle/_recipes/dashboard/gates/page_check.js +16 -0
- package/skills-bundle/_recipes/dashboard/gates/report_check.js +4 -0
- package/skills-bundle/_recipes/dashboard/knowledge/01.md +1 -0
- package/skills-bundle/_recipes/dashboard/knowledge/02.md +1 -0
- package/skills-bundle/_recipes/dashboard/knowledge/03.md +1 -0
- package/skills-bundle/_recipes/dashboard/knowledge/04.md +1 -0
- package/skills-bundle/_recipes/dashboard/knowledge/05.md +1 -0
- package/skills-bundle/_recipes/dashboard/knowledge/06.md +1 -0
- package/skills-bundle/_recipes/dashboard/template.json +41 -0
- package/skills-bundle/_recipes/etl/gates/etl_live_check.js +10 -0
- package/skills-bundle/_recipes/etl/gates/etl_report_check.js +3 -0
- package/skills-bundle/_recipes/etl/knowledge/01.md +1 -0
- package/skills-bundle/_recipes/etl/knowledge/02.md +9 -0
- package/skills-bundle/_recipes/etl/knowledge/03.md +1 -0
- package/skills-bundle/_recipes/etl/knowledge/04.md +1 -0
- package/skills-bundle/_recipes/etl/knowledge/05.md +1 -0
- package/skills-bundle/_recipes/etl/template.json +39 -0
- package/skills-bundle/_recipes/hints.json +46 -0
- package/skills-bundle/guancli/.commandface.json +155 -0
- package/skills-bundle/guancli/SKILL.md +342 -0
- package/skills-bundle/guancli/evals/evals.json +156 -0
- package/skills-bundle/guancli/evals/fixtures/metric-candidate-empty-search.json +13 -0
- package/skills-bundle/guancli/evals/fixtures/metric-candidate-prior-request.json +13 -0
- package/skills-bundle/guancli/evals/fixtures/metric-consumption-columns.json +46 -0
- package/skills-bundle/guancli/evals/fixtures/metric-consumption-metadata.json +36 -0
- package/skills-bundle/guancli/evals/fixtures/metric-consumption-query.json +18 -0
- package/skills-bundle/guancli/references/analysis-primitives.md +95 -0
- package/skills-bundle/guancli/references/auth-and-config.md +131 -0
- package/skills-bundle/guancli/references/examples/metric-date-in.json +7 -0
- package/skills-bundle/guancli/references/examples/metric-query-rows.py +83 -0
- package/skills-bundle/guancli/references/examples/metric-query.sh +6 -0
- package/skills-bundle/guancli/references/form-chatbi.md +199 -0
- package/skills-bundle/guancli/references/gateway.md +148 -0
- package/skills-bundle/guancli/references/metric-batch-query.md +82 -0
- package/skills-bundle/guancli/references/metric-commands.md +562 -0
- package/skills-bundle/guancli/references/metric-generic-query.md +215 -0
- package/skills-bundle/guancli/references/metric-json-migration.md +18 -0
- package/skills-bundle/guancli/references/metric-query-recipes.md +358 -0
- package/skills-bundle/guancli/references/preview-and-output.md +192 -0
- package/skills-bundle/guancli/references/resource-query.md +101 -0
- package/skills-bundle/guands/SKILL.md +281 -0
- package/skills-bundle/guands/references/calc-fields-boundaries-and-pitfalls.md +160 -0
- package/skills-bundle/guands/references/command-reference.md +267 -0
- package/skills-bundle/guands/references/incremental-and-schedule.md +157 -0
- package/skills-bundle/guands/references/workflows.md +256 -0
- package/skills-bundle/guanetl/SKILL.md +391 -0
- package/skills-bundle/guanetl/evals/evals.json +41 -0
- package/skills-bundle/guanetl/references/ETL_AI_DEVELOP.md +456 -0
- package/skills-bundle/guanmetric/SKILL.md +144 -0
- package/skills-bundle/guanmetric/evals/evals.json +117 -0
- package/skills-bundle/guanmetric/evals/fixtures/atomic-detail-read-model.json +18 -0
- package/skills-bundle/guanmetric/evals/fixtures/confirmed-template-summary.json +12 -0
- package/skills-bundle/guanmetric/evals/fixtures/create-result-unknown-state.json +13 -0
- package/skills-bundle/guanmetric/evals/forward-eval-2026-09-21.json +62 -0
- package/skills-bundle/guanmetric/references/metric-api-contract-examples.json +690 -0
- package/skills-bundle/guanmetric/references/metric-api-contract.schema.json +349 -0
- package/skills-bundle/guanmetric/references/metric-api-contracts.md +436 -0
- package/skills-bundle/guanmetric/references/metric-atomic-mutation.md +238 -0
- package/skills-bundle/guanmetric/references/metric-batch-status.md +71 -0
- package/skills-bundle/guanmetric/references/metric-business-dictionary-api-contract-examples.json +53 -0
- package/skills-bundle/guanmetric/references/metric-business-dictionary-api-contract.schema.json +26 -0
- package/skills-bundle/guanmetric/references/metric-business-dictionary.md +76 -0
- package/skills-bundle/guanmetric/references/metric-common-fields.md +246 -0
- package/skills-bundle/guanmetric/references/metric-composite-mutation.md +165 -0
- package/skills-bundle/guanmetric/references/metric-delete-mutation.md +70 -0
- package/skills-bundle/guanmetric/references/metric-derived-mutation.md +453 -0
- package/skills-bundle/guanmetric/references/metric-excel-template.md +365 -0
- package/skills-bundle/guanmetric/references/metric-expression-rules.md +146 -0
- package/skills-bundle/guanmetric/references/metric-flow-generate-example.json +79 -0
- package/skills-bundle/guanmetric/references/metric-flow-generate.schema.json +93 -0
- package/skills-bundle/guanmetric/references/metric-flow.md +218 -0
- package/skills-bundle/guanmetric/references/metric-hierarchy-api-contract-examples.json +171 -0
- package/skills-bundle/guanmetric/references/metric-hierarchy-api-contract.schema.json +167 -0
- package/skills-bundle/guanmetric/references/metric-hierarchy-api-contracts.md +193 -0
- package/skills-bundle/guanmetric/references/metric-mutation.md +155 -0
- package/skills-bundle/guanmetric/references/metric-public-dimension-api-contract-examples.json +62 -0
- package/skills-bundle/guanmetric/references/metric-public-dimension-api-contract.schema.json +47 -0
- package/skills-bundle/guanmetric/references/metric-public-dimension.md +155 -0
- package/skills-bundle/guanmetric/references/metric-tree-api-contract-examples.json +277 -0
- package/skills-bundle/guanmetric/references/metric-tree-api-contract.schema.json +263 -0
- package/skills-bundle/guanmetric/references/metric-tree-api-contracts.md +53 -0
- package/skills-bundle/guanmetric/references/metric-tree-mutation.md +500 -0
- package/skills-bundle/guanmetric/references/metric-validation-ownership.md +74 -0
- package/skills-bundle/guanvis/SKILL.md +333 -0
- package/skills-bundle/guanvis/evals/china_map/card_01_basic_map.js +13 -0
- package/skills-bundle/guanvis/evals/china_map/card_02_world_map.js +10 -0
- package/skills-bundle/guanvis/evals/china_map/card_03_point_map.js +12 -0
- package/skills-bundle/guanvis/evals/china_map/page.js +10 -0
- package/skills-bundle/guanvis/evals/china_map/schema.js +10 -0
- package/skills-bundle/guanvis/evals/comparative_mvp_roundtrip/README.md +30 -0
- package/skills-bundle/guanvis/evals/comparative_mvp_roundtrip/card_01_comparative_mvp.js +72 -0
- package/skills-bundle/guanvis/evals/comparative_mvp_roundtrip/page.js +6 -0
- package/skills-bundle/guanvis/evals/comparative_mvp_roundtrip/schema.js +22 -0
- package/skills-bundle/guanvis/evals/comparative_mvp_roundtrip/verify_default_roundtrip.sh +92 -0
- package/skills-bundle/guanvis/evals/complex_report_pro/card_01_monthly.js +63 -0
- package/skills-bundle/guanvis/evals/complex_report_pro/page.js +6 -0
- package/skills-bundle/guanvis/evals/complex_report_pro/schema.js +6 -0
- package/skills-bundle/guanvis/evals/custom_chart_echarts/card_01_bar.js +13 -0
- package/skills-bundle/guanvis/evals/custom_chart_echarts/card_02_pie.js +13 -0
- package/skills-bundle/guanvis/evals/custom_chart_echarts/charts/bar.js +11 -0
- package/skills-bundle/guanvis/evals/custom_chart_echarts/charts/pie.js +15 -0
- package/skills-bundle/guanvis/evals/custom_chart_echarts/page.js +5 -0
- package/skills-bundle/guanvis/evals/custom_chart_echarts/schema.js +9 -0
- package/skills-bundle/guanvis/evals/custom_chart_sdk/card_01_level_nodes.js +19 -0
- package/skills-bundle/guanvis/evals/custom_chart_sdk/charts/level_nodes.css +51 -0
- package/skills-bundle/guanvis/evals/custom_chart_sdk/charts/level_nodes.html +1 -0
- package/skills-bundle/guanvis/evals/custom_chart_sdk/charts/level_nodes.js +28 -0
- package/skills-bundle/guanvis/evals/custom_chart_sdk/page.js +5 -0
- package/skills-bundle/guanvis/evals/custom_chart_sdk/schema.js +7 -0
- package/skills-bundle/guanvis/evals/dynamic_fields/card_01_dynamic_dataset.js +20 -0
- package/skills-bundle/guanvis/evals/dynamic_fields/card_02_dynamic_metric_chart.js +16 -0
- package/skills-bundle/guanvis/evals/dynamic_fields/metrics.js +19 -0
- package/skills-bundle/guanvis/evals/dynamic_fields/page.js +9 -0
- package/skills-bundle/guanvis/evals/dynamic_fields/schema.js +7 -0
- package/skills-bundle/guanvis/evals/dynamic_fields/verify_default_roundtrip.sh +137 -0
- package/skills-bundle/guanvis/evals/percentage_advcalc_roundtrip/README.md +26 -0
- package/skills-bundle/guanvis/evals/percentage_advcalc_roundtrip/card_01_percentage_advcalc.js +44 -0
- package/skills-bundle/guanvis/evals/percentage_advcalc_roundtrip/card_02_scroll_percentage.js +12 -0
- package/skills-bundle/guanvis/evals/percentage_advcalc_roundtrip/page.js +6 -0
- package/skills-bundle/guanvis/evals/percentage_advcalc_roundtrip/schema.js +22 -0
- package/skills-bundle/guanvis/evals/rank_advcalc_roundtrip/README.md +28 -0
- package/skills-bundle/guanvis/evals/rank_advcalc_roundtrip/card_01_rank_advcalc.js +59 -0
- package/skills-bundle/guanvis/evals/rank_advcalc_roundtrip/page.js +6 -0
- package/skills-bundle/guanvis/evals/rank_advcalc_roundtrip/schema.js +22 -0
- package/skills-bundle/guanvis/evals/rank_advcalc_roundtrip/verify_default_roundtrip.sh +135 -0
- package/skills-bundle/guanvis/evals/running_total_advcalc_roundtrip/README.md +15 -0
- package/skills-bundle/guanvis/evals/running_total_advcalc_roundtrip/card_01_running_total_advcalc.js +74 -0
- package/skills-bundle/guanvis/evals/running_total_advcalc_roundtrip/page.js +6 -0
- package/skills-bundle/guanvis/evals/running_total_advcalc_roundtrip/schema.js +22 -0
- package/skills-bundle/guanvis/evals/sales_dashboard/card_01_revenue_column.js +10 -0
- package/skills-bundle/guanvis/evals/sales_dashboard/card_02_trend_line.js +9 -0
- package/skills-bundle/guanvis/evals/sales_dashboard/card_03_kpi.js +6 -0
- package/skills-bundle/guanvis/evals/sales_dashboard/card_04_pie.js +9 -0
- package/skills-bundle/guanvis/evals/sales_dashboard/card_05_calc_field_test.js +12 -0
- package/skills-bundle/guanvis/evals/sales_dashboard/page.js +11 -0
- package/skills-bundle/guanvis/evals/sales_dashboard/schema.js +14 -0
- package/skills-bundle/guanvis/evals/sales_dashboard/selector_01_region.js +10 -0
- package/skills-bundle/guanvis/evals/split_charts/card_01_column_split.js +10 -0
- package/skills-bundle/guanvis/evals/split_charts/card_02_line_split.js +10 -0
- package/skills-bundle/guanvis/evals/split_charts/card_03_combo_split.js +11 -0
- package/skills-bundle/guanvis/evals/split_charts/page.js +10 -0
- package/skills-bundle/guanvis/evals/split_charts/schema.js +14 -0
- package/skills-bundle/guanvis/evals/tab_layout/card_00_total_revenue.js +6 -0
- package/skills-bundle/guanvis/evals/tab_layout/card_01_revenue.js +10 -0
- package/skills-bundle/guanvis/evals/tab_layout/card_02_trend.js +9 -0
- package/skills-bundle/guanvis/evals/tab_layout/card_03_story.js +11 -0
- package/skills-bundle/guanvis/evals/tab_layout/page.js +23 -0
- package/skills-bundle/guanvis/evals/tab_layout/schema.js +11 -0
- package/skills-bundle/guanvis/evals/tab_layout/selector_01_region.js +8 -0
- package/skills-bundle/guanvis/references/api-reference.md +476 -0
- package/skills-bundle/guanvis/references/builder-reference.md +1676 -0
- package/skills-bundle/guanvis/references/chart-properties.md +2101 -0
- package/skills-bundle/guanvis/references/checkout-editing.md +53 -0
- package/skills-bundle/guanvis/references/complex-report-pro-patterns.md +398 -0
- package/skills-bundle/guanvis/references/dir-and-page-management.md +48 -0
- package/skills-bundle/guanvis/references/metric-chart-reference.md +258 -0
- package/skills-bundle/guanvis/references/publish-and-constraints.md +60 -0
- package/skills-bundle/guanvis/references/selector-reference.md +431 -0
- package/skills-bundle/guanvis/references/tableau-migration.md +73 -0
- package/skills-bundle/guanvis/references/theme.md +123 -0
- package/skills-bundle/guanvis/references/troubleshooting.md +25 -0
- package/skills-bundle/guanvis/references/validation-and-chart-patterns.md +205 -0
- package/skills-bundle/guanwf/SKILL.md +543 -0
- package/skills-bundle/guanwf/references/ETL_AI_DEVELOP.md +456 -0
- package/skills-bundle/guanwf/references/TASK_NODE_CONTRACTS.md +64 -0
- package/skills-bundle/guanwf/references/WORKFLOW_DSL.md +536 -0
- package/skills-bundle/guanwf/references/WORKFLOW_NODES.md +166 -0
- package/skills-bundle/js/SKILL.md +145 -0
|
@@ -0,0 +1,2101 @@
|
|
|
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: true,
|
|
87
|
+
bgImage: {
|
|
88
|
+
uploadPath: "./assets/title-background.png",
|
|
89
|
+
renderType: ImageRenderType.STRETCH
|
|
90
|
+
},
|
|
91
|
+
showIcon: true,
|
|
92
|
+
icon: {
|
|
93
|
+
uploadPath: "./assets/title-icon.png"
|
|
94
|
+
},
|
|
95
|
+
topStrip: {
|
|
96
|
+
enabled: true,
|
|
97
|
+
width: 2,
|
|
98
|
+
backgroundColor: "#1456F0"
|
|
99
|
+
},
|
|
100
|
+
bottomStrip: {
|
|
101
|
+
enabled: false,
|
|
102
|
+
width: 2,
|
|
103
|
+
backgroundColor: "#DEE0E3"
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
})
|
|
107
|
+
```
|
|
108
|
+
|
|
109
|
+
`style` 对应前端 `settings.style`:
|
|
110
|
+
|
|
111
|
+
| 字段 | 类型/取值 | 说明 |
|
|
112
|
+
|---|---|---|
|
|
113
|
+
| `fontFamily` | string | 字体 |
|
|
114
|
+
| `fontSize` | 9–72 | 字号 |
|
|
115
|
+
| `color` | string / `null` | 字体颜色;`null` 使用默认颜色 |
|
|
116
|
+
| `bold` / `italic` / `underline` | boolean | 字形 |
|
|
117
|
+
| `textAlign` | `"left"` / `"center"` / `"right"` | 标题水平对齐 |
|
|
118
|
+
|
|
119
|
+
新建 Card 或 MetricChart 时,只要传入 `style`,就会补齐前端标题默认值:`color: null`、`bold: true`、`italic: false`、`underline: false`、`fontSize: 14`、`fontFamily: "sans-serif"`。
|
|
120
|
+
|
|
121
|
+
`titleSetting` 对应前端 `settings.titleSetting`:
|
|
122
|
+
|
|
123
|
+
| 字段 | 类型/取值 | 说明 |
|
|
124
|
+
|---|---|---|
|
|
125
|
+
| `backgroundColor` | string / `null` | 标题区域背景色 |
|
|
126
|
+
| `height` | 0–100 的整数 | 标题区域高度,单位 px |
|
|
127
|
+
| `showBgImage` / `showIcon` | boolean | 是否显示背景图/图标 |
|
|
128
|
+
| `bgImage` / `icon` | image object / `null` | 图片配置;`null` 清除对应图片 |
|
|
129
|
+
| `topStrip` / `bottomStrip` | strip object / `null` | 顶部/底部边框 |
|
|
130
|
+
|
|
131
|
+
图片对象支持:
|
|
132
|
+
|
|
133
|
+
| 字段 | 类型/取值 | 说明 |
|
|
134
|
+
|---|---|---|
|
|
135
|
+
| `url` | string | 外链、当前环境已有的上传图片地址或素材地址 |
|
|
136
|
+
| `uploadPath` | string | 本地图片路径;没有 `url` 时生效,`pack`/`publish` 时作为 Card 附件上传 |
|
|
137
|
+
| `sourceType` | `1` / `2` / `3` | 链接、上传或素材;使用 `uploadPath` 时固定为 `2`,不必传入 |
|
|
138
|
+
| `renderType` | `1` / `2` / `3` | 原比例、铺满或自适应;本地图片省略时默认自适应 |
|
|
139
|
+
|
|
140
|
+
本地标题背景图和 icon 支持 `jpg/jpeg/png/gif`,相对路径以 guanvis 工程目录为基准;`url` 和
|
|
141
|
+
`uploadPath` 同时设置时优先使用 `url`,并产生 warning。边框对象包含 `enabled`、`backgroundColor`
|
|
142
|
+
和 `width`,其中 `width` 可用 `2`、`4`、`6`、`8`。
|
|
143
|
+
|
|
144
|
+
`attachCard()` 只增量合并显式传入的字段。例如只修改字号和底部边框开关时,不会覆盖线上标题颜色、背景和其它边框字段。
|
|
145
|
+
|
|
146
|
+
## 图标
|
|
147
|
+
|
|
148
|
+
### 获取可用图标
|
|
149
|
+
|
|
150
|
+
可用图标来自当前 BI 环境的 `/api/icon-group/list`,不要猜测图标组或图标 ID。执行:
|
|
151
|
+
|
|
152
|
+
```bash
|
|
153
|
+
guanvis icon list
|
|
154
|
+
guanvis icon list --group default_line -f json
|
|
155
|
+
```
|
|
156
|
+
|
|
157
|
+
输出中的 `GROUP_ID` 是图标组 ID,`ICON_IDS` 是该组可用的图标 ID。内置组通常包括
|
|
158
|
+
`default_line`、`default_fill`、`default_combination`、`default_square` 和
|
|
159
|
+
`default_portal`,但图标 ID、隐藏状态和租户自定义组必须以目标环境的查询结果为准。
|
|
160
|
+
该命令用于获取全部可用图标,不限定具体图表类型。
|
|
161
|
+
|
|
162
|
+
### 系统图标引用
|
|
163
|
+
|
|
164
|
+
图表属性引用 BI 系统图标时,使用下列字段:
|
|
165
|
+
|
|
166
|
+
| 字段 | 类型/取值 | 说明 |
|
|
167
|
+
|---|---|---|
|
|
168
|
+
| `groupId` | 非空字符串 | 系统图标组 ID,必须来自 `guanvis icon list` 的查询结果 |
|
|
169
|
+
| `iconId` | 非空字符串 | 系统图标 ID,必须属于所选 `groupId` |
|
|
170
|
+
| `colors` | `{ primary?, secondary?, tertiary? }` | 系统图标的颜色配置,每项为 string / `null` |
|
|
171
|
+
|
|
172
|
+
只有 `groupId`、`iconId` 和 `colors` 与 BI 系统中的图标资源相关。图标的开关、大小、
|
|
173
|
+
位置、对齐和间距属于具体图表的展示配置,分别在对应图表 API 中说明。图标引用不负责
|
|
174
|
+
上传图标、创建素材或管理前端图标库。
|
|
175
|
+
|
|
176
|
+
## 指标与进度
|
|
177
|
+
|
|
178
|
+
本节说明指标类图表的专属属性。各 API 的适用图表和配置范围见对应小节;
|
|
179
|
+
`attachCard()` 只深度合并显式传入的字段。
|
|
180
|
+
|
|
181
|
+
### 共用文字样式
|
|
182
|
+
|
|
183
|
+
下文的 `value`、`style`、`nameStyle` 和 `text` 文字样式对象使用相同字段:
|
|
184
|
+
|
|
185
|
+
| 字段 | 类型/取值 | 说明 |
|
|
186
|
+
|---|---|---|
|
|
187
|
+
| `fontFamily` | 非空字符串 | 字体 |
|
|
188
|
+
| `fontSize` | number / `null` | 指标卡为 `null`(自动)或 `9`~`1638`;对比指标卡为 `9`~`1638`;进度类为 `9`~`72`;多环进度图为 `12`~`72` |
|
|
189
|
+
| `color` | string / `null` | 文字颜色;`null` 恢复主题默认色 |
|
|
190
|
+
| `bold` / `italic` / `underline` | boolean | 加粗、斜体和下划线 |
|
|
191
|
+
| `strikeThrough` | boolean | 删除线;只用于指标卡和对比指标卡 |
|
|
192
|
+
|
|
193
|
+
### `setSingleValueSetting(config)`
|
|
194
|
+
|
|
195
|
+
设置指标卡 `SINGLE_VALUE` 的对齐、数值、标签和图标:
|
|
196
|
+
|
|
197
|
+
```javascript
|
|
198
|
+
.setSingleValueSetting({
|
|
199
|
+
alignment: "center",
|
|
200
|
+
value: { fontSize: null, bold: true, color: "#1F2329" },
|
|
201
|
+
label: {
|
|
202
|
+
show: true,
|
|
203
|
+
style: { fontSize: 14, color: "#646A73" },
|
|
204
|
+
position: "mt",
|
|
205
|
+
alignment: "center",
|
|
206
|
+
maxWidth: 180
|
|
207
|
+
},
|
|
208
|
+
icon: {
|
|
209
|
+
show: true,
|
|
210
|
+
groupId: "default_line",
|
|
211
|
+
iconId: "bar_chart",
|
|
212
|
+
size: null,
|
|
213
|
+
position: "left",
|
|
214
|
+
alignment: "center",
|
|
215
|
+
margin: 10
|
|
216
|
+
}
|
|
217
|
+
})
|
|
218
|
+
```
|
|
219
|
+
|
|
220
|
+
| 字段 | 类型/取值 | 说明 |
|
|
221
|
+
|---|---|---|
|
|
222
|
+
| `alignment` | `"left"` / `"center"` / `"right"` | 整个指标卡对齐方式 |
|
|
223
|
+
| `value` | 文字样式 | 数值样式 |
|
|
224
|
+
| `label.show` | boolean | 是否显示标签 |
|
|
225
|
+
| `label.style` | 文字样式 | 标签样式 |
|
|
226
|
+
| `label.position` | `"mt"` / `"ml"` | 标签位于数值上方/左侧 |
|
|
227
|
+
| `label.alignment` | `"left"` / `"center"` / `"right"` | 标签与数值的对齐方式 |
|
|
228
|
+
| `label.maxWidth` | 0~999 的整数 | 标签最大宽度,单位 px |
|
|
229
|
+
| `icon.show` | boolean | 是否显示指标装饰图标 |
|
|
230
|
+
| `icon.groupId` | 非空字符串 | 系统图标组 ID,参考「图标」章节 |
|
|
231
|
+
| `icon.iconId` | 非空字符串 | 系统图标 ID,参考「图标」章节 |
|
|
232
|
+
| `icon.colors` | `{ primary?, secondary?, tertiary? }` | 系统图标颜色,参考「图标」章节 |
|
|
233
|
+
| `icon.size` | `null` 或 9~1638 的整数 | 图标大小;`null` 表示自动 |
|
|
234
|
+
| `icon.position` | `"tagLeft"` / `"left"` / `"top"` | 标签左侧、指标左侧或指标上方 |
|
|
235
|
+
| `icon.alignment` | `"left"` / `"center"` / `"right"` / `"top"` / `"bottom"` | 图标与指标的对齐方式 |
|
|
236
|
+
| `icon.margin` | 4~999 的整数 | 图标与指标间距,单位 px |
|
|
237
|
+
|
|
238
|
+
`value.fontSize: null` 和 `label.style.fontSize: null` 表示字号自动。
|
|
239
|
+
|
|
240
|
+
当 `icon.show: true` 时,最终 payload 会包含完整的基础图标配置:`show`、`groupId`、
|
|
241
|
+
`iconId`、`size`、`position` 和 `margin`。新建指标卡缺少这些字段时默认补齐
|
|
242
|
+
`default_line / bar_chart / null(自动) / left / 10`;`attachCard()` 优先保留线上已有的
|
|
243
|
+
图标选择和颜色,只补齐缺失的基础字段。
|
|
244
|
+
|
|
245
|
+
### `setKPISetting(config)`
|
|
246
|
+
|
|
247
|
+
设置对比指标卡 `KPI_CARD` 的布局、主指标和对比指标:
|
|
248
|
+
|
|
249
|
+
```javascript
|
|
250
|
+
.setKPISetting({
|
|
251
|
+
layout: {
|
|
252
|
+
preset: "classic",
|
|
253
|
+
alignment: "left",
|
|
254
|
+
divider: { show: true, color: "#D0D3D6" }
|
|
255
|
+
},
|
|
256
|
+
main: {
|
|
257
|
+
value: { fontSize: 32, bold: true },
|
|
258
|
+
label: { show: true, style: { fontSize: 12 }, position: "ml" },
|
|
259
|
+
icon: { show: true, groupId: "default_line", iconId: "bar_chart" }
|
|
260
|
+
},
|
|
261
|
+
compare: {
|
|
262
|
+
value: { fontSize: 14 },
|
|
263
|
+
label: { style: { fontSize: 12 }, position: "cl" },
|
|
264
|
+
maxPerLine: 1,
|
|
265
|
+
iconStyle: "positiveGreenStyle1",
|
|
266
|
+
iconShowMap: { 0: false }
|
|
267
|
+
}
|
|
268
|
+
})
|
|
269
|
+
```
|
|
270
|
+
|
|
271
|
+
| 字段 | 类型/取值 | 说明 |
|
|
272
|
+
|---|---|---|
|
|
273
|
+
| `layout.preset` | `"classic"` / `"style1"`~`"style6"` | 快捷布局;同时设置主指标和对比指标的布局默认组合 |
|
|
274
|
+
| `layout.alignment` | `"left"` / `"center"` / `"right"` | 整个指标块对齐方式 |
|
|
275
|
+
| `layout.divider.show` | boolean | 是否显示分割线 |
|
|
276
|
+
| `layout.divider.color` | string / `null` | 分割线颜色;`null` 恢复默认色 |
|
|
277
|
+
| `main.value` | 文字样式 | 主指标数值 |
|
|
278
|
+
| `main.label.show` | boolean | 是否显示主指标标签 |
|
|
279
|
+
| `main.label.style` | 文字样式 | 主指标标签 |
|
|
280
|
+
| `main.label.position` | `"mt"` / `"ml"` | 主标签位于数值上方/左侧 |
|
|
281
|
+
| `main.label.alignment` | `"left"` / `"center"` / `"right"` | 主标签与数值对齐 |
|
|
282
|
+
| `main.label.valueAlign` | `"follow"` / `"right"` / `"both_ends"` | 主标签与数值分布;允许在任意快捷布局中保存,具体生效条件见下表 |
|
|
283
|
+
| `main.label.maxWidth` | 0~999 的整数 | 主标签最大宽度,单位 px |
|
|
284
|
+
| `main.label.valueMargin` | 4~100 的整数 | 主标签与数值间距,单位 px |
|
|
285
|
+
| `main.icon.show` | boolean | 是否显示主指标装饰图标 |
|
|
286
|
+
| `main.icon.groupId` | 非空字符串 | 系统图标组 ID,参考「图标」章节 |
|
|
287
|
+
| `main.icon.iconId` | 非空字符串 | 系统图标 ID,参考「图标」章节 |
|
|
288
|
+
| `main.icon.colors` | `{ primary?, secondary?, tertiary? }` | 系统图标颜色,参考「图标」章节 |
|
|
289
|
+
| `main.icon.size` | 9~1638 的整数 | 图标大小 |
|
|
290
|
+
| `main.icon.position` | `"tagLeft"` / `"left"` / `"top"` | 标签左侧、指标左侧或指标上方 |
|
|
291
|
+
| `main.icon.alignment` | `"left"` / `"center"` / `"right"` / `"top"` / `"bottom"` | 图标与指标的对齐方式 |
|
|
292
|
+
| `main.icon.margin` | 4~999 的整数 | 图标与指标间距,单位 px |
|
|
293
|
+
| `compare.value` | 文字样式 | 对比指标数值 |
|
|
294
|
+
| `compare.label.style` | 文字样式 | 对比指标标签 |
|
|
295
|
+
| `compare.label.position` | `"ct"` / `"cl"` | 对比标签位于数值上方/左侧 |
|
|
296
|
+
| `compare.label.alignment` | `"left"` / `"center"` / `"right"` | 对比标签与数值对齐 |
|
|
297
|
+
| `compare.label.valueAlign` | `"follow"` / `"right"` / `"both_ends"` | 对比标签与数值分布;允许保存,渲染效果受标签位置、布局结构和 `maxPerLine` 影响 |
|
|
298
|
+
| `compare.label.maxWidth` | 0~999 的整数 | 对比标签最大宽度,单位 px |
|
|
299
|
+
| `compare.label.valueMargin` | 4~100 的整数 | 对比标签与数值间距,单位 px |
|
|
300
|
+
| `compare.maxPerLine` | 大于等于 1 的整数 | 对比指标每行最多显示几个 |
|
|
301
|
+
| `compare.iconStyle` | `positiveRed` / `positiveGreen` / `positiveRedStyle1` / `positiveGreenStyle1` / `displayNull` | 涨跌图标样式;`displayNull` 不显示 |
|
|
302
|
+
| `compare.iconShowMap` | `{ [index]: boolean }` | 按对比指标索引控制图标;payload 只保存值为 `false` 的项 |
|
|
303
|
+
|
|
304
|
+
快捷布局与前端一致,会原子化写入下列默认组合:
|
|
305
|
+
|
|
306
|
+
| `preset` | 主指标标签 | 对比指标位置 | 对比指标标签 | `maxPerLine` | 其它关键默认值 |
|
|
307
|
+
|---|---|---|---|---:|---|
|
|
308
|
+
| `classic` | 左侧 | 主指标下 | 左侧 | 1 | 主、对比指标 `valueAlign: "follow"` |
|
|
309
|
+
| `style1` | 上方、居中 | 固定底部 | 左侧 | 2 | 显示分割线 |
|
|
310
|
+
| `style2` | 上方、居中 | 固定底部 | 上方 | 2 | 显示分割线 |
|
|
311
|
+
| `style3` | 上方、左对齐 | 主指标右侧 | 上方 | 9 | 主/对比指标跟随排列 |
|
|
312
|
+
| `style4` | 左侧、左对齐 | 主指标下 | 左侧 | 2 | — |
|
|
313
|
+
| `style5` | 左侧、左对齐 | 主指标下 | 上方 | 2 | — |
|
|
314
|
+
| `style6` | 左侧、居中 | 主指标下 | 左侧 | 1 | 主指标 `valueAlign: "both_ends"` |
|
|
315
|
+
|
|
316
|
+
切换快捷布局时会覆盖表中列出的布局字段,但保留数值字体、颜色、图标等无关样式;同一次
|
|
317
|
+
`setKPISetting()` 中,`main`、`compare` 及 `layout` 的其它显式字段在预设之后应用,可覆盖
|
|
318
|
+
预设值。
|
|
319
|
+
|
|
320
|
+
`valueAlign` 的生效规则与前端渲染一致。前端代码中的 `isClassicKpi` 指的是下表中的
|
|
321
|
+
Grid 结构,并不要求 `layout.preset` 必须为 `"classic"`;例如 `style6` 也属于 Grid 结构。
|
|
322
|
+
|
|
323
|
+
| 当前结构 | `main.label.valueAlign` | `compare.label.valueAlign` |
|
|
324
|
+
|---|---|---|
|
|
325
|
+
| Grid:对比指标在主指标下、对比标签在左侧、`maxPerLine = 1` | 主标签在左侧时生效;`right`、`both_ends` 均使主数值靠右 | 生效;`right` 使对比数值靠右,`both_ends` 还会撑满整个 Grid |
|
|
326
|
+
| 纵向:对比指标位于固定底部,或不满足 Grid 条件且不在主指标右侧 | 当前渲染器不读取,配置保留 | 标签在左侧且 `maxPerLine = 1` 时 `right` 生效;每行多个时由网格自动分布,`both_ends` 无特殊效果 |
|
|
327
|
+
| 横向:对比指标在主指标右侧且不满足 Grid 条件 | 当前渲染器不读取,配置保留 | 标签在左侧且 `maxPerLine = 1` 时 `right` 生效;主/对比整体为两端分布时,运行时按 `right` 渲染 |
|
|
328
|
+
|
|
329
|
+
这些是“当前是否产生视觉效果”的条件,不是 payload 合法性约束。GuanVis 会像前端一样保存
|
|
330
|
+
合法枚举值,不会因为切换快捷布局、标签位置、整体分布方式或 `maxPerLine` 而清空另一个
|
|
331
|
+
`valueAlign`,也不会因此报错;暂时不生效的值在以后切回适用结构时仍可恢复生效。
|
|
332
|
+
`main.label.valueAlign: "both_ends"` 与 `compare.label.valueAlign` 可以同时存在,Grid 渲染器会
|
|
333
|
+
合并处理,不会引起异常。`attachCard()` 同样保留线上已有值,只覆盖显式传入的字段。
|
|
334
|
+
|
|
335
|
+
当 `main.icon.show: true` 时,最终 payload 会包含完整的基础图标配置:`show`、`groupId`、
|
|
336
|
+
`iconId`、`size`、`position` 和 `margin`。新建对比指标卡缺少这些字段时默认补齐
|
|
337
|
+
`default_line / bar_chart / 24 / left / 10`;`attachCard()` 优先保留线上已有的图标选择和
|
|
338
|
+
颜色,只补齐缺失的基础字段。
|
|
339
|
+
|
|
340
|
+
分割线沿用卡片现有的对比指标布局,仅在对比指标位于固定底部时可见;本节不开放对比指标位置配置。
|
|
341
|
+
|
|
342
|
+
### 进度类共用数据标签
|
|
343
|
+
|
|
344
|
+
`setProgressBarSetting()`、`setProgressPieSetting()`、`setLiquidGaugeSetting()` 和
|
|
345
|
+
`setSolidGaugeSetting()` 的 `main` / `secondary` 使用下列字段;不适用某图表的字段会报错。
|
|
346
|
+
|
|
347
|
+
| 字段 | 类型/取值 | 说明 |
|
|
348
|
+
|---|---|---|
|
|
349
|
+
| `main.format` | `"percent"` / `"current"` | 主指标显示百分比或当前值 |
|
|
350
|
+
| `main.precision` | `0` / `1` / `2` | 百分比小数位数 |
|
|
351
|
+
| `main.value` | 文字样式 | 主指标数值样式 |
|
|
352
|
+
| `main.valuePosition` | 见具体方法 | 主指标数值位置;仅进度条支持 |
|
|
353
|
+
| `main.outline` | boolean | 主指标是否显示描边;仅进度条支持 |
|
|
354
|
+
| `main.showName` | boolean | 是否显示数值名称 |
|
|
355
|
+
| `main.name` | string | 数值名称 |
|
|
356
|
+
| `main.nameStyle` | 文字样式 | 数值名称样式 |
|
|
357
|
+
| `main.namePosition` | 见具体方法 | 数值名称位置;仅进度条支持 |
|
|
358
|
+
| `secondary.showPercent` / `showCurrent` / `showTarget` | boolean | 次指标显示百分比、当前值和目标值 |
|
|
359
|
+
| `secondary.percentName` | string | 次指标中的百分比名称 |
|
|
360
|
+
| `secondary.precision` | `0` / `1` / `2` | 次指标百分比小数位数 |
|
|
361
|
+
| `secondary.text` | 文字样式 | 次指标文本样式 |
|
|
362
|
+
| `secondary.position` | 见具体方法 | 次指标位置 |
|
|
363
|
+
| `secondary.alignment` | `"left"` / `"center"` | 次指标对齐方式;仅进度条支持 |
|
|
364
|
+
|
|
365
|
+
### `setProgressBarSetting(config)`
|
|
366
|
+
|
|
367
|
+
设置进度条 `PROGRESS_BAR` 的颜色、数据标签和图形显示:
|
|
368
|
+
|
|
369
|
+
```javascript
|
|
370
|
+
.setProgressBarSetting({
|
|
371
|
+
colors: {
|
|
372
|
+
mode: "gradient",
|
|
373
|
+
startColor: "#1456F0",
|
|
374
|
+
endColor: "#7AA2FF",
|
|
375
|
+
background: "#E8EAF0"
|
|
376
|
+
},
|
|
377
|
+
main: {
|
|
378
|
+
format: "percent",
|
|
379
|
+
precision: 1,
|
|
380
|
+
value: { fontSize: 28, bold: true },
|
|
381
|
+
valuePosition: "outer",
|
|
382
|
+
outline: true,
|
|
383
|
+
showName: true,
|
|
384
|
+
name: "完成率",
|
|
385
|
+
namePosition: "top"
|
|
386
|
+
},
|
|
387
|
+
secondary: {
|
|
388
|
+
showCurrent: true,
|
|
389
|
+
showTarget: true,
|
|
390
|
+
position: "bottom",
|
|
391
|
+
alignment: "left"
|
|
392
|
+
},
|
|
393
|
+
display: { mode: "custom", height: 28, borderRadius: 6 }
|
|
394
|
+
})
|
|
395
|
+
```
|
|
396
|
+
|
|
397
|
+
| 分组 | 字段 | 类型/取值 | 说明 |
|
|
398
|
+
|---|---|---|---|
|
|
399
|
+
| `colors` | `mode` | `"interval"` / `"gradient"` | 分段或渐变 |
|
|
400
|
+
| `colors` | `startColor` / `endColor` / `background` | string / `null` | 起始色、结束色和底色 |
|
|
401
|
+
| `colors` | `intervals` | 区间数组 | 分段颜色,结构见下表 |
|
|
402
|
+
| `main` | `valuePosition` | `"inner"` / `"right"` / `"outer"` | 数值在内部、右侧或外部 |
|
|
403
|
+
| `main` | `namePosition` | `"left"` / `"top"` / `"bottom"` | 数值名称位置;外部数值会强制显示名称,左侧名称会调整为上方 |
|
|
404
|
+
| `secondary` | `position` | `"top"` / `"bottom"` | 次指标位置 |
|
|
405
|
+
| `display` | `mode` | `"default"` / `"custom"` | 配置方式 |
|
|
406
|
+
| `display` | `height` | 1~64 的整数 | 进度条高度,单位 px |
|
|
407
|
+
| `display` | `borderRadius` | 0~32 的整数 | 进度条圆角,单位 px |
|
|
408
|
+
|
|
409
|
+
### `setProgressPieSetting(config)`
|
|
410
|
+
|
|
411
|
+
设置圆形进度条 `PROGRESS_PIE` 的颜色、数据标签和图形显示:
|
|
412
|
+
|
|
413
|
+
```javascript
|
|
414
|
+
.setProgressPieSetting({
|
|
415
|
+
colors: {
|
|
416
|
+
mode: "interval",
|
|
417
|
+
intervals: [
|
|
418
|
+
{ type: "less_than", min: 0, color: "#F54A45" },
|
|
419
|
+
{ type: "more_than", min: 0, color: "#34C724" }
|
|
420
|
+
],
|
|
421
|
+
background: "#E8EAF0"
|
|
422
|
+
},
|
|
423
|
+
main: { format: "current", value: { fontSize: 30 }, showName: true },
|
|
424
|
+
secondary: { showPercent: true, showTarget: true, position: "inner" },
|
|
425
|
+
display: { showTicks: true, wide: true, startAngle: 90 }
|
|
426
|
+
})
|
|
427
|
+
```
|
|
428
|
+
|
|
429
|
+
| 分组 | 字段 | 类型/取值 | 说明 |
|
|
430
|
+
|---|---|---|---|
|
|
431
|
+
| `colors` | `mode` | `"interval"` / `"gradient"` | 分段或渐变 |
|
|
432
|
+
| `colors` | `startColor` / `endColor` / `background` | string / `null` | 起始色、结束色和底色 |
|
|
433
|
+
| `colors` | `intervals` | 区间数组 | 分段颜色 |
|
|
434
|
+
| `secondary` | `position` | `"top"` / `"bottom"` / `"left"` / `"right"` / `"inner"` | 次指标位置 |
|
|
435
|
+
| `display` | `showTicks` | boolean | 显示刻度 |
|
|
436
|
+
| `display` | `wide` | boolean | 宽幅显示 |
|
|
437
|
+
| `display` | `startAngle` | 0~360 的整数 | 起始角度 |
|
|
438
|
+
|
|
439
|
+
进度条和圆形进度条的 `intervals` 结构:
|
|
440
|
+
|
|
441
|
+
| 字段 | 类型/取值 | 说明 |
|
|
442
|
+
|---|---|---|
|
|
443
|
+
| `type` | `"interval"` / `"more_than"` / `"less_than"` | 闭区间、大于阈值或小于阈值;默认 `interval` |
|
|
444
|
+
| `min` | -100~100 的整数 | 区间下界;`more_than` / `less_than` 时作为阈值 |
|
|
445
|
+
| `max` | -100~100 的整数 | `interval` 的区间上界,且不得小于 `min` |
|
|
446
|
+
| `color` | 非空字符串 | 区间颜色 |
|
|
447
|
+
|
|
448
|
+
### `setActivityGaugeSetting(config)`
|
|
449
|
+
|
|
450
|
+
设置多环进度图 `ACTIVITY_GAUGE`。色板继续使用 `.setThemeColor()`,本方法补充底色和数据标签:
|
|
451
|
+
|
|
452
|
+
```javascript
|
|
453
|
+
.setActivityGaugeSetting({
|
|
454
|
+
background: "#E8EAF0",
|
|
455
|
+
labels: {
|
|
456
|
+
showSeries: true,
|
|
457
|
+
showCategory: false,
|
|
458
|
+
showPercentage: true,
|
|
459
|
+
precision: 2,
|
|
460
|
+
count: 5,
|
|
461
|
+
valueFont: { fontFamily: "Arial", fontSize: 16 },
|
|
462
|
+
text: { fontSize: 14, color: "#646A73", bold: true }
|
|
463
|
+
}
|
|
464
|
+
})
|
|
465
|
+
```
|
|
466
|
+
|
|
467
|
+
| 字段 | 类型/取值 | 说明 |
|
|
468
|
+
|---|---|---|
|
|
469
|
+
| `background` | string / `null` | 环形底色 |
|
|
470
|
+
| `labels.show` | boolean | 一次开启/关闭系列名称、类别名称和百分比 |
|
|
471
|
+
| `labels.showSeries` / `showCategory` / `showPercentage` | boolean | 分别显示系列名称、类别名称和百分比 |
|
|
472
|
+
| `labels.precision` | `0` / `1` / `2` | 百分比小数位数 |
|
|
473
|
+
| `labels.count` | 1~25 的整数 | 标签数量 |
|
|
474
|
+
| `labels.valueFont.fontFamily` | 非空字符串 | 数值字体 |
|
|
475
|
+
| `labels.valueFont.fontSize` | `null` 或 12~72 | 数值字号;`null` 表示自动 |
|
|
476
|
+
| `labels.text` | 文字样式 | 标签文本样式,字号范围 12~72 |
|
|
477
|
+
|
|
478
|
+
### `setLiquidGaugeSetting(config)`
|
|
479
|
+
|
|
480
|
+
设置流体进度图 `LIQUID_GAUGE` 的外环颜色和数据标签:
|
|
481
|
+
|
|
482
|
+
```javascript
|
|
483
|
+
.setLiquidGaugeSetting({
|
|
484
|
+
outerColor: "#1456F0",
|
|
485
|
+
main: { format: "percent", precision: 1, showName: true, name: "完成率" },
|
|
486
|
+
secondary: { showCurrent: true, showTarget: true, position: "bottom" }
|
|
487
|
+
})
|
|
488
|
+
```
|
|
489
|
+
|
|
490
|
+
| 字段 | 类型/取值 | 说明 |
|
|
491
|
+
|---|---|---|
|
|
492
|
+
| `outerColor` | string / `null` | 外环颜色 |
|
|
493
|
+
| `main` | 进度类共用主指标 | 主指标数据格式、精度、数值和数值名称 |
|
|
494
|
+
| `secondary` | 进度类共用次指标 | 次指标内容、文本和位置 |
|
|
495
|
+
| `secondary.position` | `"top"` / `"bottom"` / `"left"` / `"right"` / `"inner"` | 次指标位置 |
|
|
496
|
+
|
|
497
|
+
### `setSolidGaugeSetting(config)`
|
|
498
|
+
|
|
499
|
+
设置填充仪表板 `SOLID_GAUGE` 的颜色、图形显示和数据标签:
|
|
500
|
+
|
|
501
|
+
```javascript
|
|
502
|
+
.setSolidGaugeSetting({
|
|
503
|
+
colors: {
|
|
504
|
+
intervals: [
|
|
505
|
+
{ min: 0, max: 80, color: "#F5B942" },
|
|
506
|
+
{ type: "more_than", min: 80, color: "#34C724" }
|
|
507
|
+
],
|
|
508
|
+
background: "#E8EAF0",
|
|
509
|
+
targetLine: "#111111"
|
|
510
|
+
},
|
|
511
|
+
display: { startAngle: -100, endAngle: 100, max: 120 },
|
|
512
|
+
main: { format: "current", showName: true, name: "销售额" },
|
|
513
|
+
secondary: { showPercent: true, showTarget: true, position: "right" }
|
|
514
|
+
})
|
|
515
|
+
```
|
|
516
|
+
|
|
517
|
+
| 分组 | 字段 | 类型/取值 | 说明 |
|
|
518
|
+
|---|---|---|---|
|
|
519
|
+
| `colors` | `intervals` | 区间数组 | 数值分段颜色;结构同上,但上下界必须是大于等于 0 的整数且无固定上限 |
|
|
520
|
+
| `colors` | `background` | string / `null` | 底色 |
|
|
521
|
+
| `colors` | `targetLine` | string / `null` | 目标线颜色 |
|
|
522
|
+
| `display` | `startAngle` | -120~0 的整数 | 起始角度 |
|
|
523
|
+
| `display` | `endAngle` | 0~120 的整数 | 结束角度 |
|
|
524
|
+
| `display` | `max` | 有限数字 / `null` | 最大值;`null` 使用自动最大值 |
|
|
525
|
+
| `main` | 进度类共用主指标 | 主指标数据格式、精度、数值和数值名称 |
|
|
526
|
+
| `secondary` | 进度类共用次指标 | 次指标内容、文本和位置 |
|
|
527
|
+
| `secondary.position` | `"top"` / `"bottom"` / `"left"` / `"right"` | 次指标位置 |
|
|
528
|
+
|
|
529
|
+
## 汇总指标
|
|
530
|
+
|
|
531
|
+
### `setSummary(field, options?)`
|
|
532
|
+
|
|
533
|
+
设置卡片底部/侧边的汇总指标。普通数据集 Card 传 `f()` / `field()`,指标平台 MetricChart 传 `metric()`:
|
|
534
|
+
|
|
535
|
+
```javascript
|
|
536
|
+
createCard(ChartType.PIVOT_TABLE, "区域销售")
|
|
537
|
+
.addRow(f("区域"))
|
|
538
|
+
.addMetric(f("销售额"))
|
|
539
|
+
.setSummary(f("销售额"), {
|
|
540
|
+
aggrType: AggrType.AVG,
|
|
541
|
+
label: "平均销售额",
|
|
542
|
+
position: "bottom",
|
|
543
|
+
format: NumberFormat.number(1)
|
|
544
|
+
});
|
|
545
|
+
|
|
546
|
+
createMetricChart(ChartType.PIVOT_TABLE, "销售指标")
|
|
547
|
+
.addMetric(metric("销售额"))
|
|
548
|
+
.setSummary(metric("销售额"), {
|
|
549
|
+
label: "销售额汇总",
|
|
550
|
+
position: "right"
|
|
551
|
+
});
|
|
552
|
+
```
|
|
553
|
+
|
|
554
|
+
普通 Card 的 `options`:
|
|
555
|
+
|
|
556
|
+
| 字段 | 说明 |
|
|
557
|
+
|---|---|
|
|
558
|
+
| `aggrType` | 指标字段支持 `SUM` / `MIN` / `MAX` / `AVG` / `CNT` / `CNT_DISTINCT`;维度支持 `CNT` / `CNT_DISTINCT` / `MIN` / `MAX` |
|
|
559
|
+
| `label` | 汇总指标显示名称;默认使用字段显示名 |
|
|
560
|
+
| `position` | `"top"` / `"bottom"` / `"left"` / `"right"`,默认 `"bottom"` |
|
|
561
|
+
| `format` | NumberFormat 格式对象 |
|
|
562
|
+
|
|
563
|
+
聚合计算字段固定使用 `aggrType: "NUL"`,不能再套一层聚合。MetricChart 的汇总直接引用指标 ID,只支持 `label` 和 `position`。
|
|
564
|
+
|
|
565
|
+
传 `null` 可关闭汇总指标:
|
|
566
|
+
|
|
567
|
+
```javascript
|
|
568
|
+
.setSummary(null)
|
|
569
|
+
```
|
|
570
|
+
|
|
571
|
+
为兼容已有 MetricChart 脚本,`.setSummary({ summaryType, ... })` 原始对象签名仍可使用;新代码优先传字段对象。
|
|
572
|
+
|
|
573
|
+
前端不提供汇总指标的图表包括:`SOLID_GAUGE`、`SINGLE_VALUE`、`PROGRESS_BAR`、`PROGRESS_PIE`、`KPI_CARD`、`LIQUID_GAUGE`、`ACTIVITY_GAUGE`、`KPI_TREND` 和 `DATA_GRID`。
|
|
574
|
+
|
|
575
|
+
### `setSummaryStyle(config)`
|
|
576
|
+
|
|
577
|
+
设置汇总指标名称和值的样式:
|
|
578
|
+
|
|
579
|
+
```javascript
|
|
580
|
+
.setSummaryStyle({
|
|
581
|
+
showLabel: true,
|
|
582
|
+
label: { fontSize: 12, color: "#646A73" },
|
|
583
|
+
value: { fontSize: 20, bold: true, color: "#1F2329" }
|
|
584
|
+
})
|
|
585
|
+
```
|
|
586
|
+
|
|
587
|
+
`label` / `value` 支持 `fontFamily`、`fontSize`(12–72)、`color`、`bold`、`italic`、`underline`。新建卡片会补齐前端默认样式;`attachCard()` 只增量修改显式传入的字段。
|
|
588
|
+
|
|
589
|
+
## 特殊值
|
|
590
|
+
|
|
591
|
+
### `setSpecialValue(config)`
|
|
592
|
+
|
|
593
|
+
把 `NULL` 等特殊值显示为指定文本。支持 `PIVOT_TABLE`、`GROUPED_TABLE`、`SINGLE_VALUE` 和 `KPI_CARD`。
|
|
594
|
+
|
|
595
|
+
```javascript
|
|
596
|
+
.setSpecialValue({ specialValue: "--" })
|
|
597
|
+
```
|
|
598
|
+
|
|
599
|
+
也可直接传字符串:
|
|
600
|
+
|
|
601
|
+
```javascript
|
|
602
|
+
.setSpecialValue("--")
|
|
603
|
+
```
|
|
604
|
+
|
|
605
|
+
透视表额外支持隐藏对比中的空值行/列:
|
|
606
|
+
|
|
607
|
+
```javascript
|
|
608
|
+
.setSpecialValue({
|
|
609
|
+
specialValue: "--",
|
|
610
|
+
hideEmptyCol: true,
|
|
611
|
+
hideEmptyRow: false
|
|
612
|
+
})
|
|
613
|
+
```
|
|
614
|
+
|
|
615
|
+
`hideEmptyCol` 和 `hideEmptyRow` 仅用于 `PIVOT_TABLE`;`attachCard()` 未显式传入的特殊值配置保持不变。
|
|
616
|
+
|
|
617
|
+
## 动态参数默认值
|
|
618
|
+
|
|
619
|
+
### `setDynamicParameterDefaultValue(parameter, value, options?)`
|
|
620
|
+
|
|
621
|
+
设置普通数据集 Card 的卡片级参数默认值。参数必须来自项目的 `dynamic-parameters.js`,优先用 `param(dpId)` 引用:
|
|
622
|
+
|
|
623
|
+
```javascript
|
|
624
|
+
.setDynamicParameterDefaultValue(
|
|
625
|
+
param("aaaaaaaaaaaaaaaaaaaaaaaa"),
|
|
626
|
+
["华东", "华南"]
|
|
627
|
+
)
|
|
628
|
+
```
|
|
629
|
+
|
|
630
|
+
`value` 为数组时会与前端一致地保存为逗号分隔字符串。设置默认值意味着使用卡片级覆盖,因此 `inheritParent` 默认是 `false`;需要继续继承数据集/全局参数时显式传:
|
|
631
|
+
|
|
632
|
+
```javascript
|
|
633
|
+
.setDynamicParameterDefaultValue(
|
|
634
|
+
param("aaaaaaaaaaaaaaaaaaaaaaaa"),
|
|
635
|
+
"全国",
|
|
636
|
+
{ inheritParent: true }
|
|
637
|
+
)
|
|
638
|
+
```
|
|
639
|
+
|
|
640
|
+
同一参数被多个计算字段引用时,会更新该 `dpId` 的全部卡片参数记录。卡片没有实际引用该参数时构建会报错,不会静默写入无效配置。`attachCard()` 使用相同 API,并保留其它参数记录和未修改字段。
|
|
641
|
+
|
|
642
|
+
## 图例
|
|
643
|
+
|
|
644
|
+
### `setShowLegend(show, position?)`
|
|
645
|
+
|
|
646
|
+
设置图例的显隐和主位置。
|
|
647
|
+
|
|
648
|
+
|
|
649
|
+
| 参数 | 类型 | 说明 |
|
|
650
|
+
| ---------- | --------- | ------ |
|
|
651
|
+
| `show` | boolean | 是否显示图例 |
|
|
652
|
+
| `position` | string,可选 | 图例位置 |
|
|
653
|
+
|
|
654
|
+
|
|
655
|
+
```javascript
|
|
656
|
+
.setShowLegend(true, "right")
|
|
657
|
+
```
|
|
658
|
+
|
|
659
|
+
`position` 可使用 `"top"`、`"bottom"`、`"left"`、`"right"`。
|
|
660
|
+
|
|
661
|
+
传入 `position` 时会清除原有的交叉方向对齐位置。
|
|
662
|
+
|
|
663
|
+
### `setChartLegend(config)`
|
|
664
|
+
|
|
665
|
+
设置完整的图例属性。
|
|
666
|
+
|
|
667
|
+
```javascript
|
|
668
|
+
.setChartLegend({
|
|
669
|
+
showLegend: true,
|
|
670
|
+
legendPosition: "right",
|
|
671
|
+
legendCrossPosition: "top",
|
|
672
|
+
fontFamily: "sans-serif",
|
|
673
|
+
fontSize: 12,
|
|
674
|
+
color: "#343D50",
|
|
675
|
+
bold: false,
|
|
676
|
+
customLegend: {
|
|
677
|
+
pagination: true
|
|
678
|
+
}
|
|
679
|
+
})
|
|
680
|
+
```
|
|
681
|
+
|
|
682
|
+
|
|
683
|
+
| 字段 | 类型/取值 | 说明 |
|
|
684
|
+
| ------------------------------- | -------------------------------------------------------- | ------------- |
|
|
685
|
+
| `showLegend` | boolean | 是否显示图例 |
|
|
686
|
+
| `legendPosition` | `"top"` / `"bottom"` / `"left"` / `"right"` | 图例主位置 |
|
|
687
|
+
| `legendCrossPosition` | `"center"` / `"top"` / `"bottom"` / `"left"` / `"right"` | 图例在交叉方向上的对齐位置 |
|
|
688
|
+
| `fontFamily` | string | 图例字体 |
|
|
689
|
+
| `fontSize` | 9–72 | 图例字号 |
|
|
690
|
+
| `color` | string | 图例文字颜色 |
|
|
691
|
+
| `bold` / `italic` / `underline` | boolean | 图例字形 |
|
|
692
|
+
| `customLegend` | object | 图例扩展展示配置 |
|
|
693
|
+
|
|
694
|
+
|
|
695
|
+
设置 `legendPosition` 且未同时设置 `legendCrossPosition` 时,会重置原有的交叉方向对齐位置。
|
|
696
|
+
|
|
697
|
+
`customLegend` 可包含:
|
|
698
|
+
|
|
699
|
+
|
|
700
|
+
| 字段 | 类型 | 说明 |
|
|
701
|
+
| ----------------- | ------- | ------------------- |
|
|
702
|
+
| `pagination` | boolean | 图例是否单行展示 |
|
|
703
|
+
| `showNumber` | boolean | 饼图图例显示数值 |
|
|
704
|
+
| `showPercentage` | boolean | 饼图图例显示百分比 |
|
|
705
|
+
| `autoAlignment` | boolean | 饼图图例数值右对齐 |
|
|
706
|
+
| `legendItemWidth` | number | 数值右对齐时的图例条目宽度,单位 px |
|
|
707
|
+
|
|
708
|
+
|
|
709
|
+
`showNumber`、`showPercentage`、`autoAlignment` 和 `legendItemWidth` 用于 `PIE`。饼图存在拆分字段,或颜色字段不是与分类字段相同的明细字段时,不应用这些配置。
|
|
710
|
+
|
|
711
|
+
在支持图例配置的图表中,`BASIC_LINE`、`BASIC_BAR`、`BASIC_COLUMN`、`BULLET_BAR`、`BULLET_COLUMN`、`BUTTERFLY`、`WORLD_MAP` 和 `BASIC_MAP` 不支持 `pagination`;其它支持图例配置的图表可以使用。图例位于上方或下方时显示为单行。
|
|
712
|
+
|
|
713
|
+
不适用于当前图表类型或字段布局的 `customLegend` 字段不会写入卡片;新建 Card 和 MetricChart 时同时产生 validation warning。
|
|
714
|
+
|
|
715
|
+
图例及 `customLegend` 的未知字段、错误类型、非法位置和小于 `1` 的 `legendItemWidth` 会产生 validation error。
|
|
716
|
+
|
|
717
|
+
## 数据标签
|
|
718
|
+
|
|
719
|
+
主图形和叠加图形的数据标签支持以下公共字段:
|
|
720
|
+
|
|
721
|
+
|
|
722
|
+
| 字段 | 类型 | 说明 |
|
|
723
|
+
| ------------------------------- | ------- | ------------------- |
|
|
724
|
+
| `show` | boolean | 当前图形的数据标签开关 |
|
|
725
|
+
| `showSeries` | boolean | 显示系列名 |
|
|
726
|
+
| `showCategory` | boolean | 显示分类/维度值 |
|
|
727
|
+
| `showNumber` | boolean | 显示数值 |
|
|
728
|
+
| `position` | string | 标签位置,例如 `"outside"` |
|
|
729
|
+
| `fontSize` | 9–72 | 标签字号 |
|
|
730
|
+
| `color` | string | 标签颜色,如 `"#343d50"` |
|
|
731
|
+
| `bold` / `italic` / `underline` | boolean | 标签字形 |
|
|
732
|
+
| `separator` | string | 多项标签内容之间的分隔符 |
|
|
733
|
+
| `textOutline` | boolean | 是否显示文字描边 |
|
|
734
|
+
| `allowOverlap` | boolean | 是否允许标签重叠 |
|
|
735
|
+
|
|
736
|
+
|
|
737
|
+
`show` 控制当前方法对应的图形;不传 `show` 时,只修改显式传入的字段。
|
|
738
|
+
|
|
739
|
+
标签位置由图表方向决定,可用值为 `"outside"`、`"top"`、`"middle"`、`"bottom"`、`"left"`、`"center"`、`"right"`,并非每种图表都支持全部值。
|
|
740
|
+
|
|
741
|
+
`separator` 可使用 `"comma"`、`"colon"`、`"semicolon"`、`"period"`、`"linefeed"`、`"space"`。
|
|
742
|
+
|
|
743
|
+
### `setDataLabel(config)`
|
|
744
|
+
|
|
745
|
+
设置主图形数据标签。
|
|
746
|
+
|
|
747
|
+
除公共字段外,主图形还支持:
|
|
748
|
+
|
|
749
|
+
|
|
750
|
+
| 字段 | 类型 | 说明 |
|
|
751
|
+
| ------------------- | --------------------- | ----------------- |
|
|
752
|
+
| `showPercentage` | boolean | 显示百分比 |
|
|
753
|
+
| `showSubPercentage` | boolean | 显示子级百分比 |
|
|
754
|
+
| `showTotal` | boolean | 显示总计 |
|
|
755
|
+
| `showSubTotal` | boolean | 显示小计 |
|
|
756
|
+
| `showConnector` | boolean | 饼图标签连接线,仅用于 `PIE` |
|
|
757
|
+
| `precision` | `"0"` / `"1"` / `"2"` | 百分比小数位数 |
|
|
758
|
+
|
|
759
|
+
|
|
760
|
+
标签内容字段按图表类型生效:
|
|
761
|
+
|
|
762
|
+
|
|
763
|
+
| 图表 | 可配置的标签内容 |
|
|
764
|
+
| -------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- |
|
|
765
|
+
| `PIE` | `showConnector`、`showCategory`、`showNumber`、`showPercentage` |
|
|
766
|
+
| `STACKED_COLUMN`、`STACKED_COLUMN_WITH_LINE`、`STACKED_COLUMN_WITH_SYMBOL`、`STACKED_BAR` | `showSeries`、`showCategory`、`showNumber`、`showPercentage`、`showTotal` |
|
|
767
|
+
| `PERCENT_STACKED_COLUMN`、`PERCENT_STACKED_BAR` | `showSeries`、`showCategory`、`showNumber`、`showPercentage` |
|
|
768
|
+
| `STACKED_SPLIT_COLUMN`、`STACKED_SPLIT_BAR` | `showSeries`、`showCategory`、`showNumber`、`showPercentage`、`showSubPercentage`、`showTotal`、`showSubTotal` |
|
|
769
|
+
| `BUTTERFLY`、`BASIC_BUBBLE`、`BASIC_SCATTER_PLOT`、`BASIC_MAP`、`WORLD_MAP` | `showCategory`、`showNumber` |
|
|
770
|
+
| 其它支持的图表 | `showSeries`、`showCategory`、`showNumber` |
|
|
771
|
+
|
|
772
|
+
|
|
773
|
+
`precision` 用于支持 `showPercentage` 的图表。
|
|
774
|
+
|
|
775
|
+
旭日图的样式字段为 `separator` 和 `allowOverlap`;`BASIC_MAP`、`WORLD_MAP`、`BUBBLE_MAP`、`POINT_MAP` 的样式字段为字体样式、`separator` 和 `allowOverlap`。
|
|
776
|
+
|
|
777
|
+
调用 `{ show: true }` 时默认打开以下字段:
|
|
778
|
+
|
|
779
|
+
|
|
780
|
+
| 图表 | 默认打开字段 |
|
|
781
|
+
| ------------------------ | ----------------------------------------------- |
|
|
782
|
+
| `PIE` | `showConnector`、`showCategory`、`showPercentage` |
|
|
783
|
+
| `RISING_SUN` | `showCategory` |
|
|
784
|
+
| `BASIC_BUBBLE` | `showCategory` |
|
|
785
|
+
| `PERCENT_STACKED_COLUMN` | `showPercentage` |
|
|
786
|
+
| 其它支持的图表 | `showNumber` |
|
|
787
|
+
|
|
788
|
+
`PIE` 和 `RISING_SUN` 开启数据标签时,未显式设置 `separator` 会使用 `"colon"`。
|
|
789
|
+
|
|
790
|
+
|
|
791
|
+
```javascript
|
|
792
|
+
.setDataLabel({
|
|
793
|
+
show: true,
|
|
794
|
+
showCategory: true,
|
|
795
|
+
showNumber: true,
|
|
796
|
+
separator: "colon",
|
|
797
|
+
position: "outside",
|
|
798
|
+
fontSize: 12,
|
|
799
|
+
color: "#343d50",
|
|
800
|
+
bold: true,
|
|
801
|
+
textOutline: true
|
|
802
|
+
})
|
|
803
|
+
```
|
|
804
|
+
|
|
805
|
+
`show: false` 会关闭主图形中决定标签显隐的字段,同时保留位置、字体、分隔符等样式配置。
|
|
806
|
+
|
|
807
|
+
数据标签的未知字段、非 boolean 显隐值、非法 `position` / `precision` / `separator` 和不合法的字体样式会产生 validation error。
|
|
808
|
+
|
|
809
|
+
### `setMetricAdditionalDataLabel(config)`
|
|
810
|
+
|
|
811
|
+
使用公共字段设置叠加图形数据标签。
|
|
812
|
+
|
|
813
|
+
```javascript
|
|
814
|
+
.setDataLabel({
|
|
815
|
+
show: true,
|
|
816
|
+
showNumber: true
|
|
817
|
+
})
|
|
818
|
+
.setMetricAdditionalDataLabel({
|
|
819
|
+
show: true,
|
|
820
|
+
showNumber: true,
|
|
821
|
+
position: "top"
|
|
822
|
+
})
|
|
823
|
+
```
|
|
824
|
+
|
|
825
|
+
两个方法的开关相互独立。`setDataLabel({ show: false })` 只关闭主图形标签;`setMetricAdditionalDataLabel({ show: false })` 只关闭叠加图形标签。
|
|
826
|
+
|
|
827
|
+
### `setTreemapDataLabel(config)`
|
|
828
|
+
|
|
829
|
+
设置矩形树图 `TREE_MAP` 第一层和第二层独立数据标签:
|
|
830
|
+
|
|
831
|
+
```javascript
|
|
832
|
+
.setTreemapDataLabel({
|
|
833
|
+
first: {
|
|
834
|
+
show: true,
|
|
835
|
+
showSeries: true,
|
|
836
|
+
showCategory: true,
|
|
837
|
+
showNumber: true,
|
|
838
|
+
separator: "linefeed",
|
|
839
|
+
fontSize: 14,
|
|
840
|
+
color: "#FFFFFF",
|
|
841
|
+
bold: true
|
|
842
|
+
},
|
|
843
|
+
second: {
|
|
844
|
+
show: true,
|
|
845
|
+
showCategory: true,
|
|
846
|
+
showNumber: true,
|
|
847
|
+
separator: "space",
|
|
848
|
+
fontSize: 12,
|
|
849
|
+
color: "#FFFFFF"
|
|
850
|
+
}
|
|
851
|
+
})
|
|
852
|
+
```
|
|
853
|
+
|
|
854
|
+
顶层配置:
|
|
855
|
+
|
|
856
|
+
| 字段 | 类型 | 说明 |
|
|
857
|
+
|---|---|---|
|
|
858
|
+
| `first` | object | 第一层数据标签配置 |
|
|
859
|
+
| `second` | object | 第二层数据标签配置 |
|
|
860
|
+
|
|
861
|
+
`first` 和 `second` 支持相同的属性:
|
|
862
|
+
|
|
863
|
+
| 字段 | 类型/取值 | 说明 |
|
|
864
|
+
|---|---|---|
|
|
865
|
+
| `show` | boolean | 当前层数据标签开关 |
|
|
866
|
+
| `showSeries` | boolean | 显示系列名称 |
|
|
867
|
+
| `showCategory` | boolean | 显示类别名称 |
|
|
868
|
+
| `showNumber` | boolean | 显示数值 |
|
|
869
|
+
| `separator` | `"comma"` / `"colon"` / `"semicolon"` / `"period"` / `"linefeed"` / `"space"` | 标签内容分隔符 |
|
|
870
|
+
| `fontSize` | 9–72 | 字号 |
|
|
871
|
+
| `color` | string / `null` | 文字颜色;`null` 使用图表默认颜色 |
|
|
872
|
+
| `bold` / `italic` / `underline` | boolean | 粗体、斜体和下划线 |
|
|
873
|
+
|
|
874
|
+
`show: true` 按 BI 前端的开启动作补入当前层默认配置:第一层为 `fontSize: 14`、白色、显示类别名称,第二层为 `fontSize: 12`、白色、显示类别名称;同一次调用显式传入的字段会覆盖这些默认值。`show: false` 会把当前层的 `showSeries`、`showCategory`、`showNumber` 全部设为 `false`,但保留分隔符和文字样式。
|
|
875
|
+
|
|
876
|
+
多次调用以及 `attachCard()` 都只合并本次涉及的层和属性,另一层及未识别的线上历史字段保持不变。
|
|
877
|
+
|
|
878
|
+
### `setFunnelDataLabel(config)`
|
|
879
|
+
|
|
880
|
+
设置漏斗图 `FUNNEL` 和水平漏斗图 `HORIZONTAL_FUNNEL` 的数值、最后一个数值、类别和转化率标签:
|
|
881
|
+
|
|
882
|
+
```javascript
|
|
883
|
+
.setFunnelDataLabel({
|
|
884
|
+
number: {
|
|
885
|
+
show: true,
|
|
886
|
+
fontSize: 14,
|
|
887
|
+
color: "#FFFFFF",
|
|
888
|
+
textOutline: true
|
|
889
|
+
},
|
|
890
|
+
lastNumber: {
|
|
891
|
+
fontSize: 14,
|
|
892
|
+
bold: true,
|
|
893
|
+
textOutline: true
|
|
894
|
+
},
|
|
895
|
+
category: {
|
|
896
|
+
show: true,
|
|
897
|
+
fontSize: 11,
|
|
898
|
+
color: "#343D50",
|
|
899
|
+
textOutline: false
|
|
900
|
+
},
|
|
901
|
+
conversionRate: {
|
|
902
|
+
show: true,
|
|
903
|
+
fontSize: 11,
|
|
904
|
+
color: "#343D50",
|
|
905
|
+
textOutline: true
|
|
906
|
+
}
|
|
907
|
+
})
|
|
908
|
+
```
|
|
909
|
+
|
|
910
|
+
| 字段 | 是否支持 `show` | 说明 |
|
|
911
|
+
|---|---|---|
|
|
912
|
+
| `number` | 是 | 各漏斗阶段的数值标签;其开关同时控制最后一个数值 |
|
|
913
|
+
| `lastNumber` | 否 | 最后一个数值的独立文字样式;显隐由 `number.show` 控制 |
|
|
914
|
+
| `category` | 是 | 类别标签 |
|
|
915
|
+
| `conversionRate` | 是 | 转化率标签 |
|
|
916
|
+
|
|
917
|
+
四个标签对象的文字样式属性:
|
|
918
|
+
|
|
919
|
+
| 字段 | 类型 | 说明 |
|
|
920
|
+
|---|---|---|
|
|
921
|
+
| `fontSize` | 9–72 | 字号 |
|
|
922
|
+
| `color` | string / `null` | 文字颜色;省略时使用当前主题的默认颜色 |
|
|
923
|
+
| `bold` / `italic` / `underline` | boolean | 粗体、斜体和下划线 |
|
|
924
|
+
| `textOutline` | boolean | 当前标签独立的文字描边开关 |
|
|
925
|
+
|
|
926
|
+
`number`、`category`、`conversionRate` 还支持 `show: boolean`。不传 `show` 时只修改样式;不调用本方法时,BI 前端默认显示数值、类别和转化率。由于前端共用 `showNumber` 开关,最后一个数值不能独立隐藏或显示。
|
|
927
|
+
|
|
928
|
+
多次调用以及 `attachCard()` 都是字段级合并:例如只修改 `category.color` 不会覆盖数值、转化率或类别的其它样式,也会保留未识别的线上历史字段。
|
|
929
|
+
|
|
930
|
+
## 坐标轴
|
|
931
|
+
|
|
932
|
+
### `setAxis(config)`
|
|
933
|
+
|
|
934
|
+
设置类目轴、基数值轴、主轴、副轴和缩略轴。`config` 可包含:
|
|
935
|
+
|
|
936
|
+
- `categoryAxis`:X 类目轴。
|
|
937
|
+
- `baseAxis`:X 数值轴,用于散点图、气泡图等。
|
|
938
|
+
- `mainAxis`:Y 主轴。
|
|
939
|
+
- `secondaryAxis`:Y 副轴,通常配合 `.addMetricAdditional()`。
|
|
940
|
+
- `navigator`:缩略轴。
|
|
941
|
+
|
|
942
|
+
```javascript
|
|
943
|
+
.setAxis({
|
|
944
|
+
categoryAxis: {
|
|
945
|
+
visible: true,
|
|
946
|
+
showTitle: true,
|
|
947
|
+
title: "月份",
|
|
948
|
+
autoRotate: 45,
|
|
949
|
+
labelFontSize: 12,
|
|
950
|
+
showAxisLine: true
|
|
951
|
+
},
|
|
952
|
+
baseAxis: {
|
|
953
|
+
visible: true,
|
|
954
|
+
min: 0,
|
|
955
|
+
max: 100
|
|
956
|
+
},
|
|
957
|
+
mainAxis: {
|
|
958
|
+
visible: true,
|
|
959
|
+
showTitle: true,
|
|
960
|
+
title: "销售额",
|
|
961
|
+
min: 0,
|
|
962
|
+
max: 100000,
|
|
963
|
+
autoExtremes: false,
|
|
964
|
+
showGridLine: true,
|
|
965
|
+
labelFontSize: 11,
|
|
966
|
+
format: NumberFormat.currency("¥", 0)
|
|
967
|
+
},
|
|
968
|
+
secondaryAxis: {
|
|
969
|
+
visible: true,
|
|
970
|
+
showTitle: true,
|
|
971
|
+
title: "利润率"
|
|
972
|
+
},
|
|
973
|
+
navigator: {
|
|
974
|
+
showNavigator: true,
|
|
975
|
+
fixedValueAxis: true,
|
|
976
|
+
fixedOnRight: false
|
|
977
|
+
}
|
|
978
|
+
})
|
|
979
|
+
```
|
|
980
|
+
|
|
981
|
+
|
|
982
|
+
| 属性 | 适用轴 | 说明 |
|
|
983
|
+
| ---------------------------------------------- | ----- | ------------------------------------------------------------------------------------- |
|
|
984
|
+
| `visible` | 所有 | 是否显示轴 |
|
|
985
|
+
| `showTitle` | 所有 | 是否显示轴标题 |
|
|
986
|
+
| `title` | 所有 | 轴标题文字 |
|
|
987
|
+
| `titleFontSize` / `titleColor` | 所有 | 标题字号、颜色 |
|
|
988
|
+
| `titleBold` / `titleItalic` / `titleUnderline` | 所有 | 标题字形 |
|
|
989
|
+
| `titlePosition` | 所有 | `"outside"` 或 `"top"`;是否生效取决于图表 |
|
|
990
|
+
| `labelFontSize` / `labelColor` | 所有 | 刻度标签字号、颜色 |
|
|
991
|
+
| `labelBold` / `labelItalic` / `labelUnderline` | 所有 | 刻度标签字形 |
|
|
992
|
+
| `unit` | 数值轴 | 单位文字 |
|
|
993
|
+
| `min` / `max` | 数值轴 | 固定轴范围 |
|
|
994
|
+
| `autoExtremes` | 数值轴 | 是否自动计算范围 |
|
|
995
|
+
| `showGridLine` | 数值轴 | 是否显示网格线 |
|
|
996
|
+
| `gridLineStyle` | 数值轴 | `{ lineType, lineWidth, lineColor }`;`lineType` 为 `"solid"` / `"dashed"` / `"dotted"` |
|
|
997
|
+
| `reverseValue` | 数值轴 | 是否反转轴方向 |
|
|
998
|
+
| `tickInterval` / `autoTickInterval` | 数值轴 | 刻度间隔及是否自动计算 |
|
|
999
|
+
| `format` | 数值轴 | NumberFormat 数值格式对象 |
|
|
1000
|
+
| `unifyAxisRange` | 主轴/副轴 | 自动统一双 Y 轴范围 |
|
|
1001
|
+
| `autoRotate` | 类目轴 | 标签旋转角度,范围 `-90` 到 `90` |
|
|
1002
|
+
| `textLength` | 类目轴 | 标签截断长度 |
|
|
1003
|
+
| `step` | 类目轴 | 标签显示间隔 |
|
|
1004
|
+
| `isFixTop` | 类目轴 | 将类目轴固定在顶部;仅部分图表生效 |
|
|
1005
|
+
| `showAxisLine` | 类目轴 | 是否显示轴线 |
|
|
1006
|
+
| `axisLineStyle` | 类目轴 | `{ lineType, lineWidth, lineColor }` |
|
|
1007
|
+
| `showNavigator` | 缩略轴 | 是否显示缩略轴 |
|
|
1008
|
+
| `fixedValueAxis` | 缩略轴 | 是否固定数值轴范围 |
|
|
1009
|
+
| `fixedOnRight` | 缩略轴 | 是否固定在右侧 |
|
|
1010
|
+
|
|
1011
|
+
各轴会按图表结构校验:
|
|
1012
|
+
|
|
1013
|
+
- `baseAxis` 只用于 `BASIC_SCATTER_PLOT` 和 `BASIC_BUBBLE`;这两类图表不使用 `categoryAxis`。
|
|
1014
|
+
- `secondaryAxis` 需要图表存在副轴;组合图还需要副轴数据区中存在字段。
|
|
1015
|
+
- `BOX_PLOT`、`RADAR_LINE` 和 `BUTTERFLY` 不使用 `navigator`。
|
|
1016
|
+
|
|
1017
|
+
坐标轴会校验顶层和各轴的字段名、字段类型及前端范围,包括字号 `9`–`72`、`autoRotate` 的 `-90`–`90`、大于等于 `1` 的 `textLength` / `step`、正数 `tickInterval`,以及 `min <= max`。轴线和网格线宽度为 `1`–`5`,线型为 `solid`、`dashed` 或 `dotted`。
|
|
1018
|
+
|
|
1019
|
+
`format` 可包含:
|
|
1020
|
+
|
|
1021
|
+
|
|
1022
|
+
| 字段 | 类型 | 说明 |
|
|
1023
|
+
| --------------------- | ------- | ------------------------------- |
|
|
1024
|
+
| `formatType` | string | `"NUMBER"`、`"CURRENCY"`、`"PERCENTAGE"` 或 `"ADVANCED"` |
|
|
1025
|
+
| `decimalPlaces` | number / null | 小数位数;`NUMBER` 省略时使用自动精度,`CURRENCY` 和 `PERCENTAGE` 省略时默认为 `2` |
|
|
1026
|
+
| `useThousandsSeparator` | boolean | 是否使用千分位;`NUMBER` 和 `CURRENCY` 省略时默认为 `true` |
|
|
1027
|
+
| `prefixUnit` | string | 缩放单位,如 `"K"`、`"M"`、`"万"`、`"亿"` 或 `"auto"` |
|
|
1028
|
+
| `showPrefixUnit` | boolean | 是否显示缩放单位 |
|
|
1029
|
+
| `currencySymbol` | string | 货币符号 |
|
|
1030
|
+
| `prefix` / `suffix` | string | 前缀和后缀 |
|
|
1031
|
+
| `customFormat` | string | 高级数值格式表达式 |
|
|
1032
|
+
| `divideDataBy` | number | 数值缩放除数 |
|
|
1033
|
+
| `suffixSizePercent` | number | 后缀字号比例 |
|
|
1034
|
+
|
|
1035
|
+
|
|
1036
|
+
优先使用 `NumberFormat.number()`、`NumberFormat.currency()`、`NumberFormat.percentage()` 和 `NumberFormat.auto()` 构造 `format`。构建 payload 时会把 `format` 转换为图表渲染使用的 `formatDefn`;如显式提供 `formatDefn`,则使用传入值。
|
|
1037
|
+
|
|
1038
|
+
## 工具提示
|
|
1039
|
+
|
|
1040
|
+
### `setTooltip(config)`
|
|
1041
|
+
|
|
1042
|
+
设置工具提示的显隐、内容和样式。
|
|
1043
|
+
|
|
1044
|
+
```javascript
|
|
1045
|
+
.setTooltip({ enabled: false })
|
|
1046
|
+
```
|
|
1047
|
+
|
|
1048
|
+
|
|
1049
|
+
| 字段 | 类型 | 说明 |
|
|
1050
|
+
| ---------------------------- | ---------------------- | ------------------------ |
|
|
1051
|
+
| `enabled` | boolean | 是否启用原生图表 Tooltip |
|
|
1052
|
+
| `maxNumber` | number | 最大显示条目数,默认 `20`、最小 `1` |
|
|
1053
|
+
| `onlyTooltipSeries` | boolean | 只展示显式放入 Tooltip zone 的字段 |
|
|
1054
|
+
| `hideTooltipColor` | boolean | 隐藏系列颜色标记;部分图表不支持 |
|
|
1055
|
+
| `hideTooltipTotal` | boolean | 隐藏 Tooltip 总计;仅支持总计的图表生效 |
|
|
1056
|
+
| `order` | `"metric"` / `"value"` | 按指标顺序或数值大小排序 |
|
|
1057
|
+
| `showNumber` | boolean | 饼图 Tooltip 是否显示数值 |
|
|
1058
|
+
| `style.title` / `style.body` | object | 标题、正文的字体样式对象 |
|
|
1059
|
+
| `style.backgroundColor` | string | Tooltip 背景色 |
|
|
1060
|
+
|
|
1061
|
+
传入的字段会按图表类型校验,只写入该图表可配置的 Tooltip 属性。
|
|
1062
|
+
|
|
1063
|
+
字体样式对象可包含 `fontFamily`、`fontSize`(9–72)、`color`、`bold`、`italic`、`underline`。新建时的默认值为:
|
|
1064
|
+
|
|
1065
|
+
```javascript
|
|
1066
|
+
{
|
|
1067
|
+
enabled: true,
|
|
1068
|
+
maxNumber: 20,
|
|
1069
|
+
onlyTooltipSeries: false,
|
|
1070
|
+
hideTooltipColor: false,
|
|
1071
|
+
hideTooltipTotal: false
|
|
1072
|
+
}
|
|
1073
|
+
```
|
|
1074
|
+
|
|
1075
|
+
Tooltip 展示哪些数据字段由 `.addTooltip(field)` 控制;`setTooltip()` 只控制 Tooltip 属性,两者不要混淆。
|
|
1076
|
+
|
|
1077
|
+
原生 Card Tooltip 不是 ECharts option。不要把自定义 ECharts 中的 `trigger: "axis"`、`formatter` 等字段传给 `setTooltip()`。
|
|
1078
|
+
|
|
1079
|
+
## 饼图
|
|
1080
|
+
|
|
1081
|
+
### `setPieSetting(config)`
|
|
1082
|
+
|
|
1083
|
+
设置饼图和环图的展示方式。
|
|
1084
|
+
|
|
1085
|
+
|
|
1086
|
+
| 字段 | 类型 | 说明 |
|
|
1087
|
+
| --------------- | ------- | -------------------------------------- |
|
|
1088
|
+
| `showAsRing` | boolean | 是否显示为环图 |
|
|
1089
|
+
| `innerSize` | number | 环图空心占比,范围 `0` 到 `100`;不是 `innerRadius` |
|
|
1090
|
+
| `mergeOther` | boolean | 是否合并小分类为“其它” |
|
|
1091
|
+
| `mergeSize` | number | 保留的维度数量,非负整数;其余合并为“其它” |
|
|
1092
|
+
| `mergeColor` | string | “其它”的颜色 |
|
|
1093
|
+
| `size` | number | 自定义饼图直径占比,范围 `0` 到 `100` |
|
|
1094
|
+
| `centerDisplay` | boolean | 是否启用中心区域展示能力 |
|
|
1095
|
+
|
|
1096
|
+
|
|
1097
|
+
设置 `showAsRing` 时,如果没有提供有效的 `innerSize`,会使用默认空心占比 `70`。
|
|
1098
|
+
|
|
1099
|
+
```javascript
|
|
1100
|
+
.setPieSetting({
|
|
1101
|
+
showAsRing: true,
|
|
1102
|
+
innerSize: 40,
|
|
1103
|
+
mergeOther: true,
|
|
1104
|
+
mergeSize: 5,
|
|
1105
|
+
mergeColor: "#E9ECF1",
|
|
1106
|
+
size: 75
|
|
1107
|
+
})
|
|
1108
|
+
```
|
|
1109
|
+
|
|
1110
|
+
### `setPieCenterText(config)`
|
|
1111
|
+
|
|
1112
|
+
设置饼图中心文本。
|
|
1113
|
+
|
|
1114
|
+
```javascript
|
|
1115
|
+
.setPieCenterText({
|
|
1116
|
+
showCenterText: true,
|
|
1117
|
+
valueType: "percent",
|
|
1118
|
+
valueFont: {
|
|
1119
|
+
fontSize: 16,
|
|
1120
|
+
bold: true
|
|
1121
|
+
},
|
|
1122
|
+
textFont: {
|
|
1123
|
+
fontSize: 12,
|
|
1124
|
+
color: "#646A73"
|
|
1125
|
+
}
|
|
1126
|
+
})
|
|
1127
|
+
```
|
|
1128
|
+
|
|
1129
|
+
| 字段 | 类型/取值 | 说明 |
|
|
1130
|
+
|---|---|---|
|
|
1131
|
+
| `showCenterText` | boolean | 是否显示中心文本 |
|
|
1132
|
+
| `valueType` | `"percent"` / `"number"` | 中心值显示百分比或数值 |
|
|
1133
|
+
| `valueFont` | object | 中心值字体样式 |
|
|
1134
|
+
| `textFont` | object | 中心说明文字字体样式 |
|
|
1135
|
+
|
|
1136
|
+
`valueFont` 和 `textFont` 可包含 `fontFamily`、`fontSize`(9–72)、`color`、`bold`、`italic`、`underline`。首次开启时会补齐中心值字号 `16` 和加粗样式;饼图包含多个指标时会关闭中心文本。
|
|
1137
|
+
|
|
1138
|
+
## 表格
|
|
1139
|
+
|
|
1140
|
+
### `setTableSetting(config)`
|
|
1141
|
+
|
|
1142
|
+
设置透视表、分组表、明细表、树状表和滚动表的行为与视觉样式。行为字段继续写入 `props.miscPivotTableSetting`;视觉样式按分组写入真实前端属性:
|
|
1143
|
+
|
|
1144
|
+
- `appearance` → `props.pivot_appearance`
|
|
1145
|
+
- `headers` → `props.pivot_headers`
|
|
1146
|
+
- `data` → `props.pivot_data`
|
|
1147
|
+
|
|
1148
|
+
视觉分组使用嵌套字段合并。只设置视觉样式时不会清空已有行为配置;编辑已有卡片时也只深合并显式传入的视觉字段。
|
|
1149
|
+
|
|
1150
|
+
| 图表类型 | 视觉能力 | 行为限制 |
|
|
1151
|
+
|---|---|---|
|
|
1152
|
+
| `PIVOT_TABLE` | 支持下表全部视觉字段 | 支持透视表序号配置 |
|
|
1153
|
+
| `GROUPED_TABLE` | 支持下表全部视觉字段 | 支持分组展示与展开配置 |
|
|
1154
|
+
| `DETAIL_TABLE` | 支持下表全部视觉字段 | `vAlign` 仅支持 `"MIDDLE"` |
|
|
1155
|
+
| `LAYER_TREE_TABLE` | 支持下表全部视觉字段 | 不支持分页、累计行号和跳过总计行;支持展开配置 |
|
|
1156
|
+
| `SCROLL_TABLE` | 使用下文所列的滚动表视觉字段 | 支持数字/字母换行及行号样式;不支持分页、累计行号、跳过总计行和 `textWrap`;`vAlign` 仅支持 `"MIDDLE"` |
|
|
1157
|
+
|
|
1158
|
+
#### 主题及样式:`appearance`
|
|
1159
|
+
|
|
1160
|
+
| 字段 | 类型/取值 | 说明 |
|
|
1161
|
+
|---|---|---|
|
|
1162
|
+
| `theme` | `"classic"` / `"compact"` | 经典或极简主题 |
|
|
1163
|
+
| `colorType` | `"grey"` / `"ocean"` / `"laker"` / `"spring"` / `"autumn"` | 表格色系 |
|
|
1164
|
+
| `banding` | `{ enabled: boolean, colors: string[] }` | 斑马纹开关与非空颜色数组 |
|
|
1165
|
+
| `border` | `{ enabled: boolean, colors: string[] }` | 外边框开关与非空颜色数组 |
|
|
1166
|
+
| `divider` | `{ colors: string[] }` | 行列分隔线非空颜色数组 |
|
|
1167
|
+
| `backgroundColor` | string | 表格背景色 |
|
|
1168
|
+
| `selectedColor` | string | 选中高亮色,可使用带透明度的 `rgba(...)` |
|
|
1169
|
+
| `colWidth` | integer,15–1000 | 表格列宽 |
|
|
1170
|
+
| `fontFamily` | 非空 string | 全表字体 |
|
|
1171
|
+
| `fontSize` | number,9–72 | 全表字号(BI 面板只提供 12 起,表格本身按给定值渲染;紧凑的迁移报表块常用 10) |
|
|
1172
|
+
| `cellPadding` | `"SMALL"` / `"MIDDLE"` / `"LARGE"` | 单元格内间距 |
|
|
1173
|
+
|
|
1174
|
+
滚动表的 `appearance` 仅支持 `colorType`、`banding`、`divider`、`backgroundColor`、`colWidth` 和 `cellPadding`。其中 `colorType` 可选 `"grey"` / `"light-blue"` / `"purple"` / `"lake-blue"` / `"green"` / `"yellow"`,`divider` 使用 `{ row: boolean, column: boolean, color: string }`。
|
|
1175
|
+
|
|
1176
|
+
#### 表头设置:`headers`
|
|
1177
|
+
|
|
1178
|
+
| 字段 | 类型/取值 | 说明 |
|
|
1179
|
+
|---|---|---|
|
|
1180
|
+
| `columnEnabled` | boolean | 是否显示列表头;仅滚动表支持配置 |
|
|
1181
|
+
| `colHeaderHeight` | integer,18–500 | 列表头行高 |
|
|
1182
|
+
| `columnStyle` | object | 列表头背景与文字样式 |
|
|
1183
|
+
| `colHeaderAlignment` | `"center"` / `"left"` / `"right"` / `"followField"` | 列表头对齐方式 |
|
|
1184
|
+
| `rowSize` | integer,0–100 | 行表头列数;滚动表不支持配置 |
|
|
1185
|
+
| `rowStyle` | object | 行表头背景与文字样式;额外支持 `showFillColor`;滚动表不支持配置 |
|
|
1186
|
+
|
|
1187
|
+
#### 数据行样式:`data`
|
|
1188
|
+
|
|
1189
|
+
| 字段 | 类型/取值 | 说明 |
|
|
1190
|
+
|---|---|---|
|
|
1191
|
+
| `rowHeight` | integer,18–500 | 数据行行高 |
|
|
1192
|
+
| `hoverColor` | string | 鼠标悬停背景色 |
|
|
1193
|
+
| `style` | object | 数据区文字样式 |
|
|
1194
|
+
|
|
1195
|
+
`columnStyle`、`rowStyle` 和 `data.style` 可包含 `fontFamily`、`fontSize`(12–72)、`color`、`bold`、`italic`、`underline`、`strikeThrough`。`columnStyle` / `rowStyle` 还支持 `fillColor`,`rowStyle` 额外支持 `showFillColor: boolean`。
|
|
1196
|
+
|
|
1197
|
+
```javascript
|
|
1198
|
+
.setTableSetting({
|
|
1199
|
+
appearance: {
|
|
1200
|
+
theme: "compact",
|
|
1201
|
+
colorType: "ocean",
|
|
1202
|
+
banding: { enabled: true, colors: ["#F5F7FA"] },
|
|
1203
|
+
border: { enabled: true, colors: ["#D9DEE8"] },
|
|
1204
|
+
divider: { colors: ["#E4E7F0"] },
|
|
1205
|
+
backgroundColor: "#FFFFFF",
|
|
1206
|
+
selectedColor: "rgba(22, 93, 255, 0.1)",
|
|
1207
|
+
colWidth: 120,
|
|
1208
|
+
fontFamily: "Arial",
|
|
1209
|
+
fontSize: 12,
|
|
1210
|
+
cellPadding: "MIDDLE"
|
|
1211
|
+
},
|
|
1212
|
+
headers: {
|
|
1213
|
+
colHeaderHeight: 36,
|
|
1214
|
+
columnStyle: { fillColor: "#EDF2FA", color: "#21272A", bold: true },
|
|
1215
|
+
colHeaderAlignment: "followField",
|
|
1216
|
+
rowSize: 1,
|
|
1217
|
+
rowStyle: { showFillColor: true, fillColor: "#F1F6FB", color: "#343D50" }
|
|
1218
|
+
},
|
|
1219
|
+
data: {
|
|
1220
|
+
rowHeight: 32,
|
|
1221
|
+
hoverColor: "#F5F5F5",
|
|
1222
|
+
style: { color: "#21272A", fontSize: 12 }
|
|
1223
|
+
}
|
|
1224
|
+
})
|
|
1225
|
+
```
|
|
1226
|
+
|
|
1227
|
+
#### 行为配置
|
|
1228
|
+
|
|
1229
|
+
| 字段 | 类型 | 说明 |
|
|
1230
|
+
|---|---|---|
|
|
1231
|
+
| `pagination` | boolean | 是否分页 |
|
|
1232
|
+
| `pageSize` | number | 每页行数;可选 `10` / `20` / `50` / `100` / `200` |
|
|
1233
|
+
| `autoAlignment` | boolean | 横向自动对齐 |
|
|
1234
|
+
| `vAlign` | `"MIDDLE"` / `"TOP"` | 垂直居中或向上对齐;明细表、滚动表不支持 `"TOP"` |
|
|
1235
|
+
| `textWrap` | boolean | `true` 自动换行,`false` 截断;滚动表不支持 |
|
|
1236
|
+
| `wordBreak` | boolean | 数字/字母是否自动换行;仅滚动表支持 |
|
|
1237
|
+
| `showHeaderSortingIcon` | boolean | 是否显示表头排序图标 |
|
|
1238
|
+
| `fixedHeaderInfo` | object | 固定表头;通常可包含 `{ X: boolean, Y: boolean }`;滚动表仅支持 `{ X: false }` |
|
|
1239
|
+
| `showLineNumber` | boolean | 是否显示行序号 |
|
|
1240
|
+
| `accumulatedLineNumber` | boolean | 分页时连续累加编号;树状表、滚动表不支持 |
|
|
1241
|
+
| `skipTotalRow` | boolean | 行序号排除总计/小计;与连续累加编号互斥;树状表、滚动表不支持 |
|
|
1242
|
+
|
|
1243
|
+
透视表和滚动表还支持:
|
|
1244
|
+
|
|
1245
|
+
| 字段 | 类型 | 说明 |
|
|
1246
|
+
|---|---|---|
|
|
1247
|
+
| `lineNumberTitle` | string | 序号列标题 |
|
|
1248
|
+
| `lineNumberType` | string | `"basic"` / `"num"` / `"circle"` / `"flag"` / `"medal"` / `"card"` / `"fire"` / `"crown"` |
|
|
1249
|
+
| `lineNumberStyle` | object | 序号字体样式 |
|
|
1250
|
+
|
|
1251
|
+
分组表还支持:
|
|
1252
|
+
|
|
1253
|
+
| 字段 | 类型 | 说明 |
|
|
1254
|
+
|---|---|---|
|
|
1255
|
+
| `treeDisplay` | boolean | 使用树形展示 |
|
|
1256
|
+
| `treeDisplayName` | string | 树形列名称 |
|
|
1257
|
+
| `isAutoShrinkGroupedTable` | boolean | 平铺展示无数据时隐藏列 |
|
|
1258
|
+
| `isDefaultExpandedGroupedTable` | boolean | 是否默认全部展开 |
|
|
1259
|
+
| `defaultExpandCols` | number | 默认展开列数 |
|
|
1260
|
+
|
|
1261
|
+
树状表支持其中的 `isDefaultExpandedGroupedTable` 和 `defaultExpandCols`。
|
|
1262
|
+
|
|
1263
|
+
|
|
1264
|
+
表格属性会按以下规则同步关联字段:
|
|
1265
|
+
|
|
1266
|
+
- 对支持累计行号的表格,`pagination: false` 会同时设置 `accumulatedLineNumber: false`。
|
|
1267
|
+
- 对支持跳过总计行的表格,`showLineNumber: false` 会同时设置 `skipTotalRow: false`。
|
|
1268
|
+
- `skipTotalRow: true` 与 `accumulatedLineNumber: true` 互斥,开启其中一项会关闭另一项。
|
|
1269
|
+
- `isDefaultExpandedGroupedTable: true` 会同时设置 `defaultExpandCols: 0`;设置大于 `0` 的 `defaultExpandCols` 会关闭默认全部展开。
|
|
1270
|
+
- `treeDisplay: true` 会把列总计位置设置为 `TOP`。
|
|
1271
|
+
|
|
1272
|
+
`lineNumberStyle` 可包含 `fontFamily`、`fontSize`、`color`、`bold`、`italic`、`underline`、`strikeThrough`。
|
|
1273
|
+
|
|
1274
|
+
```javascript
|
|
1275
|
+
.setTableSetting({
|
|
1276
|
+
pagination: true,
|
|
1277
|
+
pageSize: 20,
|
|
1278
|
+
textWrap: true,
|
|
1279
|
+
showLineNumber: true,
|
|
1280
|
+
lineNumberTitle: "序号",
|
|
1281
|
+
lineNumberType: "num"
|
|
1282
|
+
})
|
|
1283
|
+
```
|
|
1284
|
+
|
|
1285
|
+
指标平台分组表示例:
|
|
1286
|
+
|
|
1287
|
+
```javascript
|
|
1288
|
+
.setTableSetting({
|
|
1289
|
+
fixedHeaderInfo: { X: false },
|
|
1290
|
+
isDefaultExpandedGroupedTable: true,
|
|
1291
|
+
defaultExpandCols: 0
|
|
1292
|
+
})
|
|
1293
|
+
```
|
|
1294
|
+
|
|
1295
|
+
### 表格迷你图
|
|
1296
|
+
|
|
1297
|
+
迷你图只支持透视表 `PIVOT_TABLE`。字段开关和可视化样式是两层配置:
|
|
1298
|
+
|
|
1299
|
+
- `setMiniChart(selector, config)` 把指定数值字段设置为迷你图,写入 `zoneData.metric[].miniChart`;
|
|
1300
|
+
- `setMiniChartSetting(selector, config)` 设置该字段的迷你图样式,按最终字段 `key` 写入 `props.miniChart[key]`。
|
|
1301
|
+
|
|
1302
|
+
`selector` 可传数值字段的名称/`fdId`/`key` 字符串、metric zone 中从 `0` 开始的索引,
|
|
1303
|
+
或字段对象。GuanVis 会解析最终字段 key,不要手写 `props.miniChart` 的 key。
|
|
1304
|
+
|
|
1305
|
+
```javascript
|
|
1306
|
+
createCard(ChartType.PIVOT_TABLE, "月度销售")
|
|
1307
|
+
.addRow(f("区域"))
|
|
1308
|
+
.addMetric(f("销售额"))
|
|
1309
|
+
.setMiniChart("销售额", {
|
|
1310
|
+
chartType: MiniChartType.LINE,
|
|
1311
|
+
dimension: f("月份", {
|
|
1312
|
+
filterType: FilterType.IN,
|
|
1313
|
+
filterValue: ["2026-01", "2026-02"]
|
|
1314
|
+
}),
|
|
1315
|
+
ordering: MiniChartSort.ASC
|
|
1316
|
+
})
|
|
1317
|
+
.setMiniChartSetting("销售额", {
|
|
1318
|
+
color: "#1456F0",
|
|
1319
|
+
skipNulls: true,
|
|
1320
|
+
showPoint: false,
|
|
1321
|
+
lineStyle: "Solid_2",
|
|
1322
|
+
width: 180,
|
|
1323
|
+
height: 60,
|
|
1324
|
+
limit: 12,
|
|
1325
|
+
axes: { categoryAxis: { visible: false } },
|
|
1326
|
+
dataLabels: { metric: { showSeries: false, showNumber: true, allowOverlap: true } },
|
|
1327
|
+
chartLegend: { showLegend: false }
|
|
1328
|
+
});
|
|
1329
|
+
```
|
|
1330
|
+
|
|
1331
|
+
`setMiniChart()` 配置:
|
|
1332
|
+
|
|
1333
|
+
| 字段 | 类型/取值 | 说明 |
|
|
1334
|
+
|---|---|---|
|
|
1335
|
+
| `chartType` | `MiniChartType.LINE` / `COLUMN` / `PIE` / `PROGRESS` | 单线图、单柱图、饼图或进度条 |
|
|
1336
|
+
| `dimension` | `f()` / `field()` / `metricDim()` 字段 | 单线图、单柱图和饼图必填;不能使用聚合字段;进度条不支持 |
|
|
1337
|
+
| `ordering` | `MiniChartSort.ASC` / `DESC` | 维度升序或降序;省略时为 `ASC` |
|
|
1338
|
+
|
|
1339
|
+
`dimension` 可携带 `filterType`、`filterValue`、`filterLevel` 和
|
|
1340
|
+
`fieldFilterSettings`,用于迷你图维度筛选。进度条不构建维度数据,因此最终 `rows` 固定为空数组。
|
|
1341
|
+
|
|
1342
|
+
字段配置限制与前端一致:
|
|
1343
|
+
|
|
1344
|
+
| 限制 | GuanVis 行为 |
|
|
1345
|
+
|---|---|
|
|
1346
|
+
| 图表类型不是 `PIVOT_TABLE` | validation error |
|
|
1347
|
+
| column zone 存在非 MPH 的对比字段 | validation error;必须先移除对比字段 |
|
|
1348
|
+
| 开启自由钻取 | validation error |
|
|
1349
|
+
| 直连数据库、Web Service 或服务器直连文件数据集 | schema/base 中有 `sourceType` 时 validation error |
|
|
1350
|
+
| 动态数值字段(含 `dzId`) | validation error |
|
|
1351
|
+
| 主副指标组内字段 | validation error |
|
|
1352
|
+
| 字段已有高级计算 | 与前端确认切换后的结果一致:开启迷你图时清除 `advCalc` / `secondAdvCalc` |
|
|
1353
|
+
|
|
1354
|
+
知识反馈/分析结果存储、LOD 受限字段和“每张表最多几个迷你图”的上限依赖当前 BI
|
|
1355
|
+
运行时上下文或管理员参数,离线 `pack` 无法可靠推断;目标环境仍会执行自己的运行时限制,
|
|
1356
|
+
GuanVis 不硬编码可能随环境变化的数量上限。
|
|
1357
|
+
|
|
1358
|
+
调用 `setMiniChart(selector, null)` 会关闭该字段的迷你图并删除对应样式;切换
|
|
1359
|
+
`chartType` 会清除旧类型样式,避免把折线属性带入饼图或进度条。必须先调用
|
|
1360
|
+
`setMiniChart()` 开启字段,再调用 `setMiniChartSetting()`。
|
|
1361
|
+
|
|
1362
|
+
#### `setMiniChartSetting(selector, config)`
|
|
1363
|
+
|
|
1364
|
+
公共尺寸属性:
|
|
1365
|
+
|
|
1366
|
+
| 字段 | 适用类型 | 类型/范围 | 说明 |
|
|
1367
|
+
|---|---|---|---|
|
|
1368
|
+
| `width` | 全部 | 折线/柱形/饼图 50–1000;进度条 50–300 | 单元格宽度,px |
|
|
1369
|
+
| `height` | 全部 | 折线/柱形/饼图 30–500;进度条 30–100 | 单元格高度,px |
|
|
1370
|
+
| `limit` | 折线/柱形/饼图 | 大于等于 0 的整数 | 显示维度值数量;实际最大值由 BI 管理员参数决定 |
|
|
1371
|
+
|
|
1372
|
+
单线图属性:
|
|
1373
|
+
|
|
1374
|
+
| 字段 | 类型/取值 | 说明 |
|
|
1375
|
+
|---|---|---|
|
|
1376
|
+
| `color` | string / `null` | 线条颜色;`null` 使用主题色 |
|
|
1377
|
+
| `skipNulls` | boolean | 是否在空值处断开 |
|
|
1378
|
+
| `showArea` | boolean | 是否显示覆盖区域 |
|
|
1379
|
+
| `opacity` | 0–100 的整数 | 覆盖区域透明度 |
|
|
1380
|
+
| `colorType` | `"solid"` / `"gradient"` | 覆盖区域纯色或渐变 |
|
|
1381
|
+
| `showPoint` | boolean | 是否显示数据点 |
|
|
1382
|
+
| `showAsSpline` | boolean | 是否使用曲线 |
|
|
1383
|
+
| `lineStyle` | `"Solid_1"` / `"Solid_2"` / `"Solid_3"` / `"Dash_2"` | 线型 |
|
|
1384
|
+
| `axes` / `dataLabels` / `chartLegend` | object | 预览坐标轴、数据标签和图例,结构见下表 |
|
|
1385
|
+
|
|
1386
|
+
单柱图属性:
|
|
1387
|
+
|
|
1388
|
+
| 字段 | 类型/取值 | 说明 |
|
|
1389
|
+
|---|---|---|
|
|
1390
|
+
| `color` | string / `null` | 柱体颜色;`null` 使用主题色 |
|
|
1391
|
+
| `colorType` | `"solid"` / `"transparent_gradient"` / `"color_gradient"` | 柱体填充方式 |
|
|
1392
|
+
| `gapBetweenGroup` / `gapInGroup` | 0–100 的整数 | 分组间/组内间距百分比 |
|
|
1393
|
+
| `axes` / `dataLabels` / `chartLegend` | object | 预览坐标轴、数据标签和图例,结构见下表 |
|
|
1394
|
+
|
|
1395
|
+
饼图属性:
|
|
1396
|
+
|
|
1397
|
+
| 字段 | 类型/取值 | 说明 |
|
|
1398
|
+
|---|---|---|
|
|
1399
|
+
| `theme` | object | `{ tcId?, theme?, colors?, useSequentialPalette? }` 主题及颜色配置 |
|
|
1400
|
+
| `dataLabels` | object | 预览数据标签 |
|
|
1401
|
+
| `chartLegend` | object | 预览图例 |
|
|
1402
|
+
| `centerTextSetting` | object | 中心文本;支持 `showCenterText`、`valueType`、`valueFont`、`textFont` |
|
|
1403
|
+
|
|
1404
|
+
进度条属性:
|
|
1405
|
+
|
|
1406
|
+
| 字段 | 类型/取值 | 说明 |
|
|
1407
|
+
|---|---|---|
|
|
1408
|
+
| `intervalColors` | 非空数组 | 可用历史颜色字符串,或 `{ color, interval, type }`;`type` 为 `interval` / `more_than` / `less_than` |
|
|
1409
|
+
| `background` | string / `null` | 进度条底色 |
|
|
1410
|
+
| `showDataLabel` | boolean | 是否显示数值 |
|
|
1411
|
+
| `mainFontSize` | `null` / `"auto"` / 9–72 | 数值字号;`null` 或 `"auto"` 为自动 |
|
|
1412
|
+
| `mainLabelValueColor` | string / `null` | 数值颜色 |
|
|
1413
|
+
| `mainBold` / `mainItalic` / `mainUnderline` | boolean | 数值字形 |
|
|
1414
|
+
|
|
1415
|
+
预览公共对象使用前端的原生层级:
|
|
1416
|
+
|
|
1417
|
+
| 对象 | 支持字段 |
|
|
1418
|
+
|---|---|
|
|
1419
|
+
| `axes.categoryAxis` / `axes.mainAxis` | `visible`、标题字段、标签字体字段、轴线字段;迷你图面板不开放单位、范围、网格线、格式和导航器 |
|
|
1420
|
+
| `dataLabels.metric` | `showCategory`、`showSeries`、`showNumber`、`showPercentage`、`allowOverlap`、`position`、`fontSize`、`color`、`bold`、`italic`、`underline`、`textOutline`、`separator`;`showSeries` 用于兼容或关闭已有系列标签,布尔字段均会校验类型 |
|
|
1421
|
+
| `chartLegend` | `showLegend`、`legendPosition`、`legendCrossPosition`、字体字段及 `customLegend` |
|
|
1422
|
+
|
|
1423
|
+
重复调用会深度合并显式字段;`setMiniChartSetting(selector, null)` 只删除该字段的样式,
|
|
1424
|
+
不关闭字段迷你图。本 API 同时支持普通 Card、MetricChart 和 `attachCard()`。
|
|
1425
|
+
|
|
1426
|
+
### `setTableCellMerge(config)`
|
|
1427
|
+
|
|
1428
|
+
设置透视表单元格合并。
|
|
1429
|
+
|
|
1430
|
+
```javascript
|
|
1431
|
+
.setTableCellMerge({
|
|
1432
|
+
noMergeColumn: true,
|
|
1433
|
+
noMergeRow: false
|
|
1434
|
+
})
|
|
1435
|
+
```
|
|
1436
|
+
|
|
1437
|
+
| 字段 | 类型 | 说明 |
|
|
1438
|
+
|---|---|---|
|
|
1439
|
+
| `noMergeColumn` | boolean | 是否不合并列区域的相同单元格 |
|
|
1440
|
+
| `noMergeRow` | boolean | 是否不合并行区域的相同单元格 |
|
|
1441
|
+
|
|
1442
|
+
### `setGrandTotal(config)`
|
|
1443
|
+
|
|
1444
|
+
设置整表总计及其样式。
|
|
1445
|
+
|
|
1446
|
+
```javascript
|
|
1447
|
+
.setGrandTotal({
|
|
1448
|
+
rowTotal: {
|
|
1449
|
+
show: true,
|
|
1450
|
+
position: GrandTotalPosition.RIGHT
|
|
1451
|
+
},
|
|
1452
|
+
columnTotal: {
|
|
1453
|
+
show: true,
|
|
1454
|
+
position: GrandTotalPosition.BOTTOM
|
|
1455
|
+
},
|
|
1456
|
+
subtotalStyle: {
|
|
1457
|
+
alias: "小计",
|
|
1458
|
+
showDetail: true,
|
|
1459
|
+
fillColor: "#F5F7FA"
|
|
1460
|
+
},
|
|
1461
|
+
grandTotalStyle: {
|
|
1462
|
+
alias: "总计",
|
|
1463
|
+
bold: true
|
|
1464
|
+
}
|
|
1465
|
+
})
|
|
1466
|
+
```
|
|
1467
|
+
|
|
1468
|
+
|
|
1469
|
+
| 字段 | 类型/取值 | 说明 |
|
|
1470
|
+
| ----------------------------------------------------------------- | ----------------------------------- | ------------------------------------- |
|
|
1471
|
+
| `rowTotal.show` | boolean | 显示横向的行总计 |
|
|
1472
|
+
| `rowTotal.position` | `GrandTotalPosition.LEFT` / `RIGHT` | 行总计位置;新建卡片只传 `show: true` 时默认 `RIGHT` |
|
|
1473
|
+
| `columnTotal.show` | boolean | 显示纵向的列总计 |
|
|
1474
|
+
| `columnTotal.position` | `GrandTotalPosition.TOP` / `BOTTOM` | 列总计位置;新建透视表默认 `BOTTOM`,分组表默认 `TOP` |
|
|
1475
|
+
| `subtotalStyle.alias` | string | 小计别名 |
|
|
1476
|
+
| `subtotalStyle.showDetail` | boolean | 是否显示为“小计(维度)” |
|
|
1477
|
+
| `subtotalStyle.fillColor` | string | 小计填充色 |
|
|
1478
|
+
| `subtotalStyle.fontFamily` / `fontSize` / `color` | string / number / string | 小计字体、字号和文字颜色 |
|
|
1479
|
+
| `subtotalStyle.bold` / `italic` / `underline` / `strikeThrough` | boolean | 小计字形 |
|
|
1480
|
+
| `grandTotalStyle.alias` | string | 总计别名 |
|
|
1481
|
+
| `grandTotalStyle.fillColor` | string | 总计填充色 |
|
|
1482
|
+
| `grandTotalStyle.fontFamily` / `fontSize` / `color` | string / number / string | 总计字体、字号和文字颜色 |
|
|
1483
|
+
| `grandTotalStyle.bold` / `italic` / `underline` / `strikeThrough` | boolean | 总计字形 |
|
|
1484
|
+
|
|
1485
|
+
|
|
1486
|
+
AttachedCard 只修改显式传入的 `show`、`position` 和样式字段。例如只关闭列总计:
|
|
1487
|
+
|
|
1488
|
+
```javascript
|
|
1489
|
+
attachCard(CARD_ID, BASE_PATH)
|
|
1490
|
+
.setGrandTotal({ columnTotal: { show: false } });
|
|
1491
|
+
```
|
|
1492
|
+
|
|
1493
|
+
开启行总计需要表格存在列字段,开启列总计需要表格存在行字段。
|
|
1494
|
+
|
|
1495
|
+
字段级小计示例:
|
|
1496
|
+
|
|
1497
|
+
```javascript
|
|
1498
|
+
createCard(ChartType.PIVOT_TABLE, "区域销售")
|
|
1499
|
+
.addRow(f("区域", { hasSubTotal: true }))
|
|
1500
|
+
.addMetric(f("销售额", {
|
|
1501
|
+
aggrType: AggrType.SUM,
|
|
1502
|
+
subtotalSetting: {
|
|
1503
|
+
isDisplayed: true,
|
|
1504
|
+
isAggrDsBased: true,
|
|
1505
|
+
aggrType: "SUM"
|
|
1506
|
+
}
|
|
1507
|
+
}));
|
|
1508
|
+
|
|
1509
|
+
createMetricChart(ChartType.GROUPED_TABLE, "指标表")
|
|
1510
|
+
.addRow(metricDim("销售额", "区域", {
|
|
1511
|
+
subtotalSetting: { isDisplayed: true }
|
|
1512
|
+
}))
|
|
1513
|
+
.addMetric(metric("销售额", {
|
|
1514
|
+
subtotalSetting: {
|
|
1515
|
+
isDisplayed: true,
|
|
1516
|
+
isAggrDsBased: true,
|
|
1517
|
+
aggrType: "SUM"
|
|
1518
|
+
}
|
|
1519
|
+
}));
|
|
1520
|
+
```
|
|
1521
|
+
|
|
1522
|
+
修改已有卡片时使用字段 patch,不要整体替换 zone:
|
|
1523
|
+
|
|
1524
|
+
```javascript
|
|
1525
|
+
attachCard(CARD_ID, BASE_PATH)
|
|
1526
|
+
.updateRow("区域", { hasSubTotal: false })
|
|
1527
|
+
.updateMetric("销售额", {
|
|
1528
|
+
subtotalSetting: { isDisplayed: false }
|
|
1529
|
+
});
|
|
1530
|
+
```
|
|
1531
|
+
|
|
1532
|
+
`subtotalSetting.aggrType` 可使用 `"SUM"`、`"AVG"`、`"MAX"`、`"MIN"`。
|
|
1533
|
+
|
|
1534
|
+
## 折线图
|
|
1535
|
+
|
|
1536
|
+
### `setLineSetting(config)`
|
|
1537
|
+
|
|
1538
|
+
设置折线图和面积图的线条、数据点与区域填充:
|
|
1539
|
+
|
|
1540
|
+
```javascript
|
|
1541
|
+
.setLineSetting({
|
|
1542
|
+
skipNulls: true,
|
|
1543
|
+
showArea: true,
|
|
1544
|
+
colorType: "gradient",
|
|
1545
|
+
opacity: 60,
|
|
1546
|
+
showPoint: true,
|
|
1547
|
+
pointShape: "ring",
|
|
1548
|
+
pointSize: 6,
|
|
1549
|
+
showAsSpline: true,
|
|
1550
|
+
lineStyle: "Solid_2"
|
|
1551
|
+
})
|
|
1552
|
+
```
|
|
1553
|
+
|
|
1554
|
+
| 字段 | 类型 | 说明 |
|
|
1555
|
+
|---|---|---|
|
|
1556
|
+
| `skipNulls` | boolean | 是否在空值处断开 |
|
|
1557
|
+
| `showArea` | boolean | 是否显示折线下方的区域填充 |
|
|
1558
|
+
| `colorType` | `"solid"` / `"gradient"` | 区域填充方式 |
|
|
1559
|
+
| `opacity` | number | 区域填充透明度,范围 `0`~`100` |
|
|
1560
|
+
| `showPoint` | boolean | 是否显示数据点 |
|
|
1561
|
+
| `pointShape` | `"default"` / `"dot"` / `"ring"` | 混合图形、实心圆或空心圆 |
|
|
1562
|
+
| `pointSize` | `5` / `6` / `8` | 数据点大小 |
|
|
1563
|
+
| `showAsSpline` | boolean | 是否显示为曲线 |
|
|
1564
|
+
| `lineStyle` | `"Solid_1"` / `"Solid_2"` / `"Solid_3"` / `"Dash_2"` | 细实线、中实线、粗实线或虚线 |
|
|
1565
|
+
| `secondSetting` | object | 多折线图次数值轴的折线显示配置,字段与主配置相同 |
|
|
1566
|
+
|
|
1567
|
+
多折线图可以分别设置主数值轴和次数值轴:
|
|
1568
|
+
|
|
1569
|
+
```javascript
|
|
1570
|
+
.setLineSetting({
|
|
1571
|
+
lineStyle: "Solid_2",
|
|
1572
|
+
secondSetting: {
|
|
1573
|
+
showPoint: false,
|
|
1574
|
+
lineStyle: "Dash_2"
|
|
1575
|
+
}
|
|
1576
|
+
})
|
|
1577
|
+
```
|
|
1578
|
+
|
|
1579
|
+
堆积面积图和百分比堆积面积图使用 `skipNulls`、`opacity`、`showPoint`、`pointShape`、`pointSize`、`showAsSpline` 和 `lineStyle`。
|
|
1580
|
+
|
|
1581
|
+
## 组合图
|
|
1582
|
+
|
|
1583
|
+
### `setComboSetting(config)`
|
|
1584
|
+
|
|
1585
|
+
设置组合图的显示方式、折线或符号样式。
|
|
1586
|
+
|
|
1587
|
+
通用属性:
|
|
1588
|
+
|
|
1589
|
+
| 属性 | 类型 | 说明 |
|
|
1590
|
+
|---|---|---|
|
|
1591
|
+
| `swapYShape` | boolean | 是否交换主图形和叠加图形 |
|
|
1592
|
+
|
|
1593
|
+
折线组合图支持 `GROUPED_COLUMN_WITH_LINE` 和 `STACKED_COLUMN_WITH_LINE`:
|
|
1594
|
+
|
|
1595
|
+
```javascript
|
|
1596
|
+
.setComboSetting({
|
|
1597
|
+
swapYShape: true,
|
|
1598
|
+
line: {
|
|
1599
|
+
skipNulls: true,
|
|
1600
|
+
showPoint: true,
|
|
1601
|
+
pointShape: "ring",
|
|
1602
|
+
pointSize: 6,
|
|
1603
|
+
showAsSpline: true,
|
|
1604
|
+
lineStyle: "Solid_2"
|
|
1605
|
+
}
|
|
1606
|
+
})
|
|
1607
|
+
```
|
|
1608
|
+
|
|
1609
|
+
`line` 支持的属性:
|
|
1610
|
+
|
|
1611
|
+
| 属性 | 类型/取值 | 说明 |
|
|
1612
|
+
|---|---|---|
|
|
1613
|
+
| `skipNulls` | boolean | 是否在空值处断开 |
|
|
1614
|
+
| `showPoint` | boolean | 是否显示数据点 |
|
|
1615
|
+
| `pointShape` | `"default"` / `"dot"` / `"ring"` | 混合图形、实心圆或空心圆 |
|
|
1616
|
+
| `pointSize` | `5` / `6` / `8` | 数据点大小 |
|
|
1617
|
+
| `showAsSpline` | boolean | 是否显示为曲线 |
|
|
1618
|
+
| `lineStyle` | `"Solid_1"` / `"Solid_2"` / `"Solid_3"` / `"Dash_2"` | 细实线、中实线、粗实线或虚线 |
|
|
1619
|
+
|
|
1620
|
+
符号组合图支持 `GROUPED_COLUMN_WITH_SYMBOL` 和 `STACKED_COLUMN_WITH_SYMBOL`:
|
|
1621
|
+
|
|
1622
|
+
```javascript
|
|
1623
|
+
.setComboSetting({
|
|
1624
|
+
symbol: {
|
|
1625
|
+
symbols: ["circle", "diamond", "square", "triangle", "triangle-down"],
|
|
1626
|
+
symbolSize: 8
|
|
1627
|
+
}
|
|
1628
|
+
})
|
|
1629
|
+
```
|
|
1630
|
+
|
|
1631
|
+
`symbol` 支持的属性:
|
|
1632
|
+
|
|
1633
|
+
| 属性 | 类型/取值 | 说明 |
|
|
1634
|
+
|---|---|---|
|
|
1635
|
+
| `symbols` | 1~20 个 string | 可使用 `circle`、`diamond`、`square`、`triangle`、`triangle-down` 或有效的 `http(s)` 图片地址 |
|
|
1636
|
+
| `symbolSize` | 4~20 的整数 | 符号大小 |
|
|
1637
|
+
|
|
1638
|
+
`swapYShape` 可以单独设置,也可以与 `line` 或 `symbol` 一起设置;`line` 与 `symbol` 不能同时配置。`attachCard()` 只修改显式传入的字段。
|
|
1639
|
+
|
|
1640
|
+
## 瀑布图
|
|
1641
|
+
|
|
1642
|
+
### `setWaterfallSetting(config)`
|
|
1643
|
+
|
|
1644
|
+
设置 `WATERFALL_COLUMN` 的正负值颜色和累计值:
|
|
1645
|
+
|
|
1646
|
+
```javascript
|
|
1647
|
+
.setWaterfallSetting({
|
|
1648
|
+
upColor: "#FD7F76",
|
|
1649
|
+
downColor: "#69BFA8",
|
|
1650
|
+
showSum: true,
|
|
1651
|
+
sumName: "累计值",
|
|
1652
|
+
sumColor: "#4379CE"
|
|
1653
|
+
})
|
|
1654
|
+
```
|
|
1655
|
+
|
|
1656
|
+
| 属性 | 类型 | 说明 |
|
|
1657
|
+
|---|---|---|
|
|
1658
|
+
| `upColor` | 非空 string / `null` | 正值颜色;`null` 使用默认颜色 |
|
|
1659
|
+
| `downColor` | 非空 string / `null` | 负值颜色;`null` 使用默认颜色 |
|
|
1660
|
+
| `showSum` | boolean | 是否显示累计值 |
|
|
1661
|
+
| `sumName` | 非空 string / `null` | 累计值名称;`null` 使用“累计值” |
|
|
1662
|
+
| `sumColor` | 非空 string / `null` | 累计值颜色;`null` 使用默认颜色 |
|
|
1663
|
+
|
|
1664
|
+
该方法支持普通卡片、指标卡片和 `attachCard()`;多次调用或 attach 更新都只合并显式传入的属性。配置颜色指标时,正负值颜色由颜色指标决定;累计值配置仍然生效。
|
|
1665
|
+
|
|
1666
|
+
## 地图
|
|
1667
|
+
|
|
1668
|
+
### `setMapSetting(config)`
|
|
1669
|
+
|
|
1670
|
+
设置世界地图、中国行政地图、气泡行政地图和符号行政地图的专属属性。配置写入
|
|
1671
|
+
`props.highmapSetting`:
|
|
1672
|
+
|
|
1673
|
+
```javascript
|
|
1674
|
+
createCard(ChartType.BASIC_MAP, "浙江城市销售")
|
|
1675
|
+
.addRow(f("城市"))
|
|
1676
|
+
.addMetric(f("销售额"))
|
|
1677
|
+
.setMapSetting({
|
|
1678
|
+
showNullAsZero: true,
|
|
1679
|
+
region: MapRegion.CITY,
|
|
1680
|
+
province: { name: "浙江省", code: "330000" },
|
|
1681
|
+
city: { name: "杭州市", code: "330100" },
|
|
1682
|
+
underColor: "#E6E8EA",
|
|
1683
|
+
borderColor: "#617282",
|
|
1684
|
+
hoverColor: "#BADA55"
|
|
1685
|
+
});
|
|
1686
|
+
```
|
|
1687
|
+
|
|
1688
|
+
支持的属性:
|
|
1689
|
+
|
|
1690
|
+
| 字段 | 类型/取值 | 说明 |
|
|
1691
|
+
|---|---|---|
|
|
1692
|
+
| `showNullAsZero` | boolean | 是否把 `NULL` 数值显示为 `0` |
|
|
1693
|
+
| `region` | `MapRegion.COUNTRY` / `PROVINCE` / `CITY` / `AUTO` | 全国、省级、市级或自动地图范围;不适用于世界地图 |
|
|
1694
|
+
| `province` | `{ name, code }` / `null` | 省级显示内容;`name`、`code` 均为非空字符串,`null` 清除选择 |
|
|
1695
|
+
| `city` | `{ name, code }` / `null` | 市级显示内容;`name`、`code` 均为非空字符串,`null` 清除选择 |
|
|
1696
|
+
| `customRegion` | 非空 string / `null` | BI 中已有的自定义大区 `mapId`;`null` 关闭大区显示 |
|
|
1697
|
+
| `underColor` | 非空 string | 地图底色 |
|
|
1698
|
+
| `borderColor` | 非空 string | 地图边框颜色 |
|
|
1699
|
+
| `hoverColor` | 非空 string | 地图区域悬停背景色;只用于世界地图和中国行政地图 |
|
|
1700
|
+
| `symbol` | `MapSymbol` / http(s) URL | 符号行政地图的符号形状或自定义图片链接 |
|
|
1701
|
+
| `symbolSize` | 4~20 的整数 | 符号行政地图的符号大小,单位 px |
|
|
1702
|
+
|
|
1703
|
+
各地图实际支持范围:
|
|
1704
|
+
|
|
1705
|
+
| 图表 | Null 显示为 0 | 范围/显示内容/大区 | 底色/边框 | 悬停色 | 符号样式 |
|
|
1706
|
+
|---|---:|---:|---:|---:|---:|
|
|
1707
|
+
| `WORLD_MAP` | ✓ | — | ✓ | ✓ | — |
|
|
1708
|
+
| `BASIC_MAP` | ✓ | ✓ | ✓ | ✓ | — |
|
|
1709
|
+
| `BUBBLE_MAP` | ✓ | ✓ | ✓ | — | — |
|
|
1710
|
+
| `POINT_MAP` | ✓ | ✓ | ✓ | — | ✓ |
|
|
1711
|
+
|
|
1712
|
+
`MapRegion` 的后端值依次为 `1`、`2`、`3`、`4`。切换 `region` 时会与前端一致地清除
|
|
1713
|
+
原有 `province` 和 `city`;同一次调用显式传入的新 `province` / `city` 会在清除之后写入。
|
|
1714
|
+
`province` 仅在省级或市级范围中生效,`city` 仅在市级范围中生效。
|
|
1715
|
+
|
|
1716
|
+
`customRegion` 必须引用目标 BI 环境中已经存在的自定义大区 `mapId`,不要猜测或用名称代替。
|
|
1717
|
+
设置后渲染器优先使用自定义大区,`region`、`province` 和 `city` 会保留但暂不生效;清除
|
|
1718
|
+
`customRegion` 后可继续恢复生效。
|
|
1719
|
+
|
|
1720
|
+
`MapSymbol` 支持 `CIRCLE`、`DIAMOND`、`SQUARE`、`TRIANGLE`、`TRIANGLE_DOWN`;也可直接
|
|
1721
|
+
传入有效的 `http://` 或 `https://` 图片地址。重复调用及 `attachCard()` 均只深度合并显式字段,
|
|
1722
|
+
未修改颜色、区域设置和线上历史字段保持不变。
|
|
1723
|
+
|
|
1724
|
+
## 气泡图
|
|
1725
|
+
|
|
1726
|
+
### `setBubbleSetting(config)`
|
|
1727
|
+
|
|
1728
|
+
设置普通气泡图 `BASIC_BUBBLE` 和气泡行政地图 `BUBBLE_MAP` 的气泡半径范围,配置写入
|
|
1729
|
+
`props.bubbleSetting`:
|
|
1730
|
+
|
|
1731
|
+
```javascript
|
|
1732
|
+
.setBubbleSetting({
|
|
1733
|
+
minScale: 0.4,
|
|
1734
|
+
maxScale: 1.8
|
|
1735
|
+
})
|
|
1736
|
+
```
|
|
1737
|
+
|
|
1738
|
+
| 字段 | 类型/范围 | 说明 |
|
|
1739
|
+
|---|---|---|
|
|
1740
|
+
| `minScale` | 0~1 的有限数字 | 最小值侧的气泡半径缩放;越小,小值气泡越大 |
|
|
1741
|
+
| `maxScale` | 1~2 的有限数字 | 最大值侧的气泡半径缩放;越大,大值气泡越小 |
|
|
1742
|
+
|
|
1743
|
+
前端滑块默认对应 `minScale: 1`、`maxScale: 1`。两个值分别参与气泡数据范围的最小值和
|
|
1744
|
+
最大值换算,并不是直接的像素半径。重复调用或 `attachCard()` 只合并本次传入的字段。
|
|
1745
|
+
|
|
1746
|
+
## 雷达图
|
|
1747
|
+
|
|
1748
|
+
### `setRadarSetting(config)`
|
|
1749
|
+
|
|
1750
|
+
设置雷达图 `RADAR_LINE` 的图形显示属性,配置写入 `props.miscRadarSetting`:
|
|
1751
|
+
|
|
1752
|
+
```javascript
|
|
1753
|
+
.setRadarSetting({
|
|
1754
|
+
drawByMetric: true,
|
|
1755
|
+
showAsSpline: true,
|
|
1756
|
+
showPoint: true,
|
|
1757
|
+
showSolidFill: true,
|
|
1758
|
+
opacity: 40
|
|
1759
|
+
})
|
|
1760
|
+
```
|
|
1761
|
+
|
|
1762
|
+
| 属性 | 类型/范围 | 默认值 | 说明 |
|
|
1763
|
+
|---|---|---:|---|
|
|
1764
|
+
| `drawByMetric` | boolean | `false` | 是否按度量排列 |
|
|
1765
|
+
| `showAsSpline` | boolean | `false` | 是否显示为曲线 |
|
|
1766
|
+
| `showPoint` | boolean | `true` | 是否显示数据点 |
|
|
1767
|
+
| `showSolidFill` | boolean | `false` | 是否显示填充色 |
|
|
1768
|
+
| `opacity` | 0~100 的有限数字 | `30` | 填充色饱和度;仅在 `showSolidFill: true` 时生效 |
|
|
1769
|
+
|
|
1770
|
+
关闭填充色不会清除 `opacity`,再次开启时继续使用原值。新建卡片首次调用会补齐表中默认值;
|
|
1771
|
+
重复调用或 `attachCard()` 只合并显式传入的属性。
|
|
1772
|
+
|
|
1773
|
+
## 箱线图
|
|
1774
|
+
|
|
1775
|
+
### `setBoxPlotSetting(config)`
|
|
1776
|
+
|
|
1777
|
+
设置箱线图 `BOX_PLOT` 的数据点和箱体颜色,配置写入 `props.boxPlotSetting`:
|
|
1778
|
+
|
|
1779
|
+
```javascript
|
|
1780
|
+
.setBoxPlotSetting({
|
|
1781
|
+
showAll: true,
|
|
1782
|
+
fillColor: "#C7E1FF",
|
|
1783
|
+
dataPointColor: "#3472AB",
|
|
1784
|
+
lineColor: "#617282"
|
|
1785
|
+
})
|
|
1786
|
+
```
|
|
1787
|
+
|
|
1788
|
+
| 属性 | 类型 | 默认值 | 说明 |
|
|
1789
|
+
|---|---|---|---|
|
|
1790
|
+
| `showAll` | boolean | `false` | 是否显示所有数据点;关闭时仅显示异常值 |
|
|
1791
|
+
| `fillColor` | 非空 string | `"#C7E1FF"` | 箱体填充色 |
|
|
1792
|
+
| `dataPointColor` | 非空 string | `"#3472AB"` | 数据点颜色 |
|
|
1793
|
+
| `lineColor` | 非空 string | `"#617282"` | 箱体边框、中位线和范围线颜色 |
|
|
1794
|
+
|
|
1795
|
+
新建卡片首次调用会补齐表中默认值,保证箱线图颜色配置完整;重复调用或 `attachCard()`
|
|
1796
|
+
只合并显式传入的属性。
|
|
1797
|
+
|
|
1798
|
+
## 热力图
|
|
1799
|
+
|
|
1800
|
+
### `setHeatMapSetting(config)`
|
|
1801
|
+
|
|
1802
|
+
设置热力图 `HEAT_MAP` 的渐变色、网格色和数值标签,配置写入 `props.heatMapSetting`:
|
|
1803
|
+
|
|
1804
|
+
```javascript
|
|
1805
|
+
.setHeatMapSetting({
|
|
1806
|
+
startColor: "#EEEEEE",
|
|
1807
|
+
endColor: "#4379CE",
|
|
1808
|
+
gridColor: "#FFFFFF",
|
|
1809
|
+
dataLabel: true
|
|
1810
|
+
})
|
|
1811
|
+
```
|
|
1812
|
+
|
|
1813
|
+
| 属性 | 类型 | 默认值 | 说明 |
|
|
1814
|
+
|---|---|---|---|
|
|
1815
|
+
| `startColor` | 非空 string / `null` | `"#EEEEEE"` | 渐变起始颜色;`null` 使用前端默认色 |
|
|
1816
|
+
| `endColor` | 非空 string / `null` | `"#4379ce"` | 渐变结束颜色;`null` 使用前端默认色 |
|
|
1817
|
+
| `gridColor` | 非空 string / `null` | `"#ffffff"` | 网格颜色;`null` 使用前端默认色 |
|
|
1818
|
+
| `dataLabel` | boolean | `false` | 是否显示数值标签 |
|
|
1819
|
+
|
|
1820
|
+
新建卡片首次调用会补齐表中默认值;重复调用或 `attachCard()` 只合并显式传入的属性。
|
|
1821
|
+
|
|
1822
|
+
## 柱形图与条形图
|
|
1823
|
+
|
|
1824
|
+
### `setBarSetting(config)`
|
|
1825
|
+
|
|
1826
|
+
设置柱形图和条形图的柱体宽度、分组间距、组内间距和圆角;帕累托图还可以设置是否显示数据点:
|
|
1827
|
+
|
|
1828
|
+
```javascript
|
|
1829
|
+
.setBarSetting({
|
|
1830
|
+
barWidth: 35,
|
|
1831
|
+
barBorderRadius: 4
|
|
1832
|
+
})
|
|
1833
|
+
```
|
|
1834
|
+
|
|
1835
|
+
也可以使用间距模式:
|
|
1836
|
+
|
|
1837
|
+
```javascript
|
|
1838
|
+
.setBarSetting({
|
|
1839
|
+
gapBetweenGroup: 40,
|
|
1840
|
+
gapInGroup: 20,
|
|
1841
|
+
barBorderRadius: 2
|
|
1842
|
+
})
|
|
1843
|
+
```
|
|
1844
|
+
|
|
1845
|
+
| 字段 | 类型/范围 | 说明 |
|
|
1846
|
+
|---|---|---|
|
|
1847
|
+
| `barWidth` | 1–100 的整数 | 柱体宽度百分比 |
|
|
1848
|
+
| `gapBetweenGroup` | 0–100 的整数 | 分组间距百分比 |
|
|
1849
|
+
| `gapInGroup` | 0–100 的整数 | 分组内柱体间距百分比 |
|
|
1850
|
+
| `barBorderRadius` | 0–40 的整数 | 柱体圆角,单位 px |
|
|
1851
|
+
| `showPoint` | boolean | 是否显示帕累托曲线的数据点;仅 `PARETO` 支持 |
|
|
1852
|
+
|
|
1853
|
+
`barWidth` 与 `gapBetweenGroup` / `gapInGroup` 是两种互斥的配置方式,不能在同一次调用中同时设置。调用 `barWidth` 时自动使用宽度模式;调用任一间距字段时自动切换到间距模式并清除已有 `barWidth`。`barBorderRadius` 可以与任一模式组合,也可以单独修改;新建图表仅在该图表的前端默认矩阵本来使用宽度模式时补充 `useBarWidth: true`,不会把其它柱图强制切换模式。
|
|
1854
|
+
|
|
1855
|
+
该方法支持以下柱形图和条形图:
|
|
1856
|
+
|
|
1857
|
+
- 柱形图:`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`
|
|
1858
|
+
- 条形图:`BASIC_BAR`、`GROUPED_BAR`、`STACKED_BAR`、`STACKED_SPLIT_BAR`、`PERCENT_STACKED_BAR`、`BULLET_BAR`、`BUTTERFLY`
|
|
1859
|
+
|
|
1860
|
+
蝴蝶图没有组内柱体间距配置,因此不支持 `gapInGroup`。`showPoint` 只对 `PARETO` 开放,其它柱形图或条形图传入该字段会产生 validation error。`attachCard()` 使用相同的图表类型和字段校验,并只合并显式传入的配置;切换到间距模式时保留未修改的颜色、圆角和未知历史字段。
|
|
1861
|
+
|
|
1862
|
+
### `setStackSplitSetting(config)`
|
|
1863
|
+
|
|
1864
|
+
设置分组堆积柱形图或条形图的堆积分组方式。配置独立写入
|
|
1865
|
+
`props.stackSplitSetting`,不会修改 `miscBarSetting` 中的柱宽、间距、圆角或其它历史字段。
|
|
1866
|
+
|
|
1867
|
+
```javascript
|
|
1868
|
+
createCard(ChartType.STACKED_SPLIT_COLUMN, "渠道收入结构")
|
|
1869
|
+
.addRow(f("月份"))
|
|
1870
|
+
.addColumn(f("渠道"))
|
|
1871
|
+
.addMetric(f("收入"))
|
|
1872
|
+
.addMetric(f("利润"))
|
|
1873
|
+
.setStackSplitSetting({ mode: "SPLIT_BY_METRICS" });
|
|
1874
|
+
```
|
|
1875
|
+
|
|
1876
|
+
| 字段 | 类型/取值 | 说明 |
|
|
1877
|
+
|---|---|---|
|
|
1878
|
+
| `mode` | `"SPLIT_NONE"` | 无分组,所有系列使用同一个堆积组 |
|
|
1879
|
+
| `mode` | `"SPLIT_BY_METRICS"` | 按度量分组;相同度量在不同对比项下堆积为一组,需要多个度量才产生分组效果 |
|
|
1880
|
+
| `mode` | `"SPLIT_BY_ATTR"` | 按对比分组;相同对比字段取值下的多个度量堆积为一组,需要 `column` 对比字段才产生分组效果 |
|
|
1881
|
+
| `mode` | `"SPLIT_INTERLACED"` | 按系列顺序交替分为两组 |
|
|
1882
|
+
| `mode` | `"SPLIT_EVEN"` | 按系列顺序将前半部分和后半部分均匀分为两组 |
|
|
1883
|
+
|
|
1884
|
+
本方法只支持 `STACKED_SPLIT_COLUMN` 和 `STACKED_SPLIT_BAR`,普通堆积图、分组图及其它
|
|
1885
|
+
柱形图不支持。前端常量中的 `SPLIT_MANUAL` 是未来能力占位,当前属性面板没有开放,
|
|
1886
|
+
GuanVis 也不接受。按度量或按对比分组缺少对应字段时,前端保留配置但当前渲染不产生
|
|
1887
|
+
分组效果,因此 GuanVis 不会自动清除或报错。重复调用以及 `attachCard()` 都只覆盖 `mode`,
|
|
1888
|
+
并保留 `stackSplitSetting` 中未识别的历史字段。
|
|
1889
|
+
|
|
1890
|
+
## 帕累托图
|
|
1891
|
+
|
|
1892
|
+
### `setParetoSetting(config)`
|
|
1893
|
+
|
|
1894
|
+
设置 `PARETO` 的累计曲线名称和百分比精度:
|
|
1895
|
+
|
|
1896
|
+
```javascript
|
|
1897
|
+
createCard(ChartType.PARETO, "销售额帕累托图")
|
|
1898
|
+
.addRow(f("客户"))
|
|
1899
|
+
.addMetric(f("销售额"))
|
|
1900
|
+
.setBarSetting({ showPoint: true })
|
|
1901
|
+
.setParetoSetting({
|
|
1902
|
+
curveName: "累计占比",
|
|
1903
|
+
precision: 2
|
|
1904
|
+
});
|
|
1905
|
+
```
|
|
1906
|
+
|
|
1907
|
+
| 字段 | 类型/范围 | 说明 |
|
|
1908
|
+
|---|---|---|
|
|
1909
|
+
| `curveName` | 非空 string / `null` | 累计曲线名称;`null` 使用前端默认名称 |
|
|
1910
|
+
| `precision` | 0–6 的整数 | 累计百分比的小数位数 |
|
|
1911
|
+
|
|
1912
|
+
设置 `precision` 时会写入完整的百分比格式配置,包括 `divideDataBy: 100`、`formatType: "PERCENTAGE"` 和对应的 `decimalPlaces`。该方法只支持 `PARETO`,可用于普通卡片、指标卡片和 `attachCard()`;重复调用或 attach 更新只覆盖显式传入的属性,并保留其它历史字段。
|
|
1913
|
+
|
|
1914
|
+
## 图形填充
|
|
1915
|
+
|
|
1916
|
+
### `setShapeColorType(type)`
|
|
1917
|
+
|
|
1918
|
+
设置柱形、条形等图形的填充方式。
|
|
1919
|
+
|
|
1920
|
+
```javascript
|
|
1921
|
+
.setShapeColorType(ShapeColorType.TransparentGradient)
|
|
1922
|
+
```
|
|
1923
|
+
|
|
1924
|
+
|
|
1925
|
+
| 枚举 | 后端值 | 说明 |
|
|
1926
|
+
| ------------------------------------ | ------------------------ | ---- |
|
|
1927
|
+
| `ShapeColorType.Solid` | `"solid"` | 纯色 |
|
|
1928
|
+
| `ShapeColorType.TransparentGradient` | `"transparent_gradient"` | 透明渐变 |
|
|
1929
|
+
| `ShapeColorType.ColorGradient` | `"color_gradient"` | 彩色渐变 |
|
|
1930
|
+
|
|
1931
|
+
|
|
1932
|
+
它与 `.addColorBy()` / `.setColorByColors()` 的按指标值渐变着色不是同一能力。
|
|
1933
|
+
|
|
1934
|
+
## 拆分图
|
|
1935
|
+
|
|
1936
|
+
### `setSplitSetting(config)`
|
|
1937
|
+
|
|
1938
|
+
设置拆分图的布局、标签和工具提示,必须配合 `.addSplit(field)`:
|
|
1939
|
+
|
|
1940
|
+
```javascript
|
|
1941
|
+
.addSplit(f("区域"))
|
|
1942
|
+
.setSplitSetting({
|
|
1943
|
+
rows: 2,
|
|
1944
|
+
columns: 3,
|
|
1945
|
+
syncY: true,
|
|
1946
|
+
isolatedChartTooltip: true,
|
|
1947
|
+
titleFormat: {
|
|
1948
|
+
fontFamily: "sans-serif",
|
|
1949
|
+
fontSize: 12,
|
|
1950
|
+
color: "#343D50",
|
|
1951
|
+
bold: false
|
|
1952
|
+
}
|
|
1953
|
+
})
|
|
1954
|
+
```
|
|
1955
|
+
|
|
1956
|
+
|
|
1957
|
+
| 字段 | 类型 | 说明 |
|
|
1958
|
+
| ---------------------- | ------- | --------------------- |
|
|
1959
|
+
| `rows` | number | 拆分布局行数,最小为 `1` |
|
|
1960
|
+
| `columns` | number | 拆分布局列数,最小为 `1` |
|
|
1961
|
+
| `splitRows` | number | 拆分布局行数,与 `rows` 等价,最小为 `1` |
|
|
1962
|
+
| `splitColumns` | number | 拆分布局列数,与 `columns` 等价,最小为 `1` |
|
|
1963
|
+
| `syncY` | boolean | 是否统一拆分图的数值轴范围 |
|
|
1964
|
+
| `isolatedChartTooltip` | boolean | Tooltip 是否只显示当前拆分图的数据 |
|
|
1965
|
+
| `titleFormat` | object | 拆分标签字体样式 |
|
|
1966
|
+
|
|
1967
|
+
|
|
1968
|
+
`titleFormat` 可包含 `fontFamily`、`fontSize`、`color`、`bold`、`italic`、`underline`。不调用时默认 3 行 3 列。主轴或副轴同时设置固定最小值和最大值时,`syncY` 会设为 `true`。
|
|
1969
|
+
|
|
1970
|
+
`syncY` 和 `isolatedChartTooltip` 必须是 boolean;`titleFormat` 使用公共字体样式校验。`rows` 与 `splitRows`、`columns` 与 `splitColumns` 同时传入时必须相等。没有调用 `.addSplit()` 时,构建会提示该配置不生效。
|
|
1971
|
+
|
|
1972
|
+
## 辅助线
|
|
1973
|
+
|
|
1974
|
+
### `setAuxiliaryLine(config)`
|
|
1975
|
+
|
|
1976
|
+
设置数值轴辅助线和分组累计线:
|
|
1977
|
+
|
|
1978
|
+
```javascript
|
|
1979
|
+
.setAuxiliaryLine({
|
|
1980
|
+
mainAxis: [
|
|
1981
|
+
{ name: "目标线", color: "#FF0000", valueType: "FIXED", fixedValue: "50000" },
|
|
1982
|
+
{
|
|
1983
|
+
name: "销售额平均值",
|
|
1984
|
+
color: "#0088FF",
|
|
1985
|
+
valueType: "CALCULATED",
|
|
1986
|
+
field: chartField("metric", 0),
|
|
1987
|
+
calculatedValue: "AVG"
|
|
1988
|
+
}
|
|
1989
|
+
],
|
|
1990
|
+
secondaryAxis: [
|
|
1991
|
+
{ name: "基准线", color: "#00AA00", valueType: "FIXED", fixedValue: "0.3" }
|
|
1992
|
+
],
|
|
1993
|
+
baseAxis: [
|
|
1994
|
+
{ name: "X 轴基准线", color: "#8B5CF6", valueType: "FIXED", fixedValue: "50" }
|
|
1995
|
+
],
|
|
1996
|
+
groupTotal: {
|
|
1997
|
+
show: true,
|
|
1998
|
+
color: "#FF0000"
|
|
1999
|
+
}
|
|
2000
|
+
})
|
|
2001
|
+
```
|
|
2002
|
+
|
|
2003
|
+
|
|
2004
|
+
顶层配置:
|
|
2005
|
+
|
|
2006
|
+
| 字段 | 类型 | 说明 |
|
|
2007
|
+
|---|---|---|
|
|
2008
|
+
| `mainAxis` | array | 主数值轴辅助线数组 |
|
|
2009
|
+
| `secondaryAxis` | array | 次数值轴辅助线数组 |
|
|
2010
|
+
| `baseAxis` | array | 基数值轴辅助线数组 |
|
|
2011
|
+
| `groupTotal` | object | 分组累计线配置 |
|
|
2012
|
+
|
|
2013
|
+
`mainAxis`、`secondaryAxis` 和 `baseAxis` 数组中的辅助线项:
|
|
2014
|
+
|
|
2015
|
+
| 字段 | 类型 | 说明 |
|
|
2016
|
+
|---|---|---|
|
|
2017
|
+
| `name` | string | 辅助线名称,不能为空 |
|
|
2018
|
+
| `color` | string | 颜色,如 `"#FF0000"` |
|
|
2019
|
+
| `valueType` | `"FIXED"` / `"CALCULATED"` | 固定值辅助线或计算辅助线 |
|
|
2020
|
+
| `fixedValue` | number / string | 固定值,可传数字或数字字符串 |
|
|
2021
|
+
| `field` | object | 计算辅助线引用的图表字段,使用 `chartField(zone, index)` |
|
|
2022
|
+
| `calculatedValue` | string | 计算方式 |
|
|
2023
|
+
| `params` | array | 仅 `calculatedValue: "PERCENTILE"` 使用。第一个元素表示百分位比例,范围为 `0`~`1`;例如 `["0.9"]` 表示第 90 百分位,不传时使用 `["0.5"]` |
|
|
2024
|
+
|
|
2025
|
+
`groupTotal` 用于分组、堆积和拆分堆积柱/条图:
|
|
2026
|
+
|
|
2027
|
+
| 字段 | 类型 | 说明 |
|
|
2028
|
+
|---|---|---|
|
|
2029
|
+
| `show` | boolean | 是否显示分组累计线 |
|
|
2030
|
+
| `color` | string | 分组累计线颜色,如 `"#FF0000"` |
|
|
2031
|
+
|
|
2032
|
+
`chartField(zone, index)` 按最终数据区引用字段,`zone` 可使用 `"metric"` 或 `"metricAdditional"`,`index` 从 `0` 开始。构建时会自动写入字段的 `key`、ID、名称和类型;不要手写图表字段 key。
|
|
2033
|
+
|
|
2034
|
+
辅助线顶层和数组项中的未知字段会产生 validation error;显式传入的 `color` 必须是非空字符串。
|
|
2035
|
+
|
|
2036
|
+
图表字段的 `calculatedValue` 可使用 `"AVG"`、`"MED"`、`"PERCENTILE"`、`"MAX"`、`"MIN"`。
|
|
2037
|
+
|
|
2038
|
+
普通 Card 还可以引用不在图表数据区中的数据集字段,此时直接提供 `fdId`、`fdName`、`fdType` 和 `chartFd: false`;计算方式可使用 `"AVG"`、`"MAX"`、`"MIN"`、`"SUM"`、`"CNT"`、`"CNT_DISTINCT"`、`"NUL"`。
|
|
2039
|
+
|
|
2040
|
+
`valueType: "FIXED"` 会移除计算字段、聚合方式和参数;`valueType: "CALCULATED"` 会移除 `fixedValue`。AttachedCard 删除字段或改变字段所在数值轴后,会清理失效的计算辅助线。
|
|
2041
|
+
|
|
2042
|
+
## 主题色
|
|
2043
|
+
|
|
2044
|
+
编写 `setThemeColor()` 配置前,先检查项目根目录的 `theme-colors.js`。文件不存在时先生成快照:
|
|
2045
|
+
|
|
2046
|
+
```bash
|
|
2047
|
+
guanvis theme-color sync -d <project>
|
|
2048
|
+
```
|
|
2049
|
+
|
|
2050
|
+
`theme-colors.js` 是只读快照,项目内的多个页面和子目录共同使用这一份。从快照中选择真实 `tcId` 后,再编写 `setThemeColor(tcId)`;不要猜测或编造 `tcId`。主题色列表变化或切换 BI 环境后,重新执行 `theme-color sync`;快照会按实际选中的 profile、服务地址和 domain 校验当前环境,不一致时构建会提示刷新。
|
|
2051
|
+
|
|
2052
|
+
`preview`、`diff`、`pack` 和 `publish` 会在快照缺失时自动生成,作为构建兜底。这个兜底不能替代配置前读取快照,因为编写 `setThemeColor(tcId)` 时已经需要确定可用的 `tcId`。
|
|
2053
|
+
|
|
2054
|
+
也可以直接查看当前环境的主题色列表:
|
|
2055
|
+
|
|
2056
|
+
```bash
|
|
2057
|
+
guanvis theme-color list -f json
|
|
2058
|
+
```
|
|
2059
|
+
|
|
2060
|
+
### `setThemeColor(tcId, colors?, options?)`
|
|
2061
|
+
|
|
2062
|
+
切换主题色、修改颜色覆盖或选择分类/顺序色板:
|
|
2063
|
+
|
|
2064
|
+
```javascript
|
|
2065
|
+
.setThemeColor("<tcId>", [null, "#FF0000"], {
|
|
2066
|
+
useSequentialPalette: true
|
|
2067
|
+
})
|
|
2068
|
+
```
|
|
2069
|
+
|
|
2070
|
+
| 参数 | 类型 | 说明 |
|
|
2071
|
+
|---|---|---|
|
|
2072
|
+
| `tcId` | string / `null` | 非空字符串表示切换到快照中的指定主题;`null` 表示保留当前主题,当前没有主题时使用默认主题 |
|
|
2073
|
+
| `colors` | (string \| null)[] / `null`,可选 | 按位置设置颜色覆盖;字符串覆盖对应颜色,数组元素 `null` 使用色板原值;省略或传 `null` 时不修改,空数组清除全部覆盖 |
|
|
2074
|
+
| `options` | object / `null`,可选 | 色板模式配置;省略或传 `null` 时不显式修改 |
|
|
2075
|
+
|
|
2076
|
+
`options` 支持以下属性:
|
|
2077
|
+
|
|
2078
|
+
| 字段 | 类型 | 说明 |
|
|
2079
|
+
|---|---|---|
|
|
2080
|
+
| `useSequentialPalette` | boolean / `null` | `true` 使用顺序色板,`false` 使用分类色板;传 `null` 时不显式修改 |
|
|
2081
|
+
|
|
2082
|
+
只切换主题或同时修改颜色:
|
|
2083
|
+
|
|
2084
|
+
```javascript
|
|
2085
|
+
.setThemeColor("<tcId>")
|
|
2086
|
+
.setThemeColor("<tcId>", [null, "#FF0000"])
|
|
2087
|
+
```
|
|
2088
|
+
|
|
2089
|
+
只修改当前主题的颜色覆盖或色板模式时,`tcId` 传 `null`:
|
|
2090
|
+
|
|
2091
|
+
```javascript
|
|
2092
|
+
.setThemeColor(null, [null, null, "rgba(230, 18, 47, 1)"])
|
|
2093
|
+
|
|
2094
|
+
.setThemeColor(null, null, {
|
|
2095
|
+
useSequentialPalette: false
|
|
2096
|
+
})
|
|
2097
|
+
```
|
|
2098
|
+
|
|
2099
|
+
非空 `tcId` 必须使用主题色列表中的真实 ID。切换主题时会同步更新 `tcId`、`theme` 和色板模式;未显式传 `useSequentialPalette` 时,漏斗图在主题提供顺序色板时默认使用顺序色板,否则使用分类色板;其他图表默认使用分类色板。
|
|
2100
|
+
|
|
2101
|
+
已有颜色覆盖会按位置保留,并根据最终所选色板的颜色槽数量补 `null` 或截断。显式传空 `colors` 数组会清除颜色覆盖。`useSequentialPalette: true` 只允许用于开启了顺序色板且包含顺序色板颜色的主题,否则产生 validation error。
|