diff --git a/.changeset/rounded-bars-skill-api.md b/.changeset/rounded-bars-skill-api.md new file mode 100644 index 0000000000..92f48b4310 --- /dev/null +++ b/.changeset/rounded-bars-skill-api.md @@ -0,0 +1,7 @@ +--- +'@visactor/vseed': minor +--- + +Add `cornerRadius` to bar, column, histogram, dual-axis, and racing charts, with per-mark rounding enabled by default to support smooth updates. + +`stackCornerRadius` is now a boolean switch for whole-stack clipping. Move numeric or array values previously assigned to `stackCornerRadius` into `cornerRadius`, and set `stackCornerRadius: true` when whole-stack rounding is required. In that mode, `cornerRadius` takes precedence over `barStyle.barRadius`. diff --git a/README.md b/README.md index 830bf882ce..4f33c27779 100644 --- a/README.md +++ b/README.md @@ -9,5 +9,5 @@ VBI provides reusable packages and agent skills for AI-oriented business intelli | Name | Description | Test Coverage | Npm Version | | :------------------------------------------------------------- | :----------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------ | | [vbi](https://visactor.github.io/VBI) | HeadlessBI Interface | [![Coverage](https://img.shields.io/badge/Coverage-100%25-brightgreen.svg)](https://github.com/VisActor/VBI/actions/workflows/coverage.yml) | [![npm Version](https://img.shields.io/npm/v/@visactor/vbi.svg)](https://www.npmjs.com/package/@visactor/vbi) | -| [vseed](https://visactor.github.io/VBI/vseed/guide/quickStart) | Visualization Engine | [![Coverage](https://img.shields.io/badge/Coverage-91.45%25-brightgreen.svg)](https://github.com/VisActor/VSeed/actions/workflows/coverage.yml) | [![npm Version](https://img.shields.io/npm/v/@visactor/vseed.svg)](https://www.npmjs.com/package/@visactor/vseed) | +| [vseed](https://visactor.github.io/VBI/vseed/guide/quickStart) | Visualization Engine | [![Coverage](https://img.shields.io/badge/Coverage-91.49%25-brightgreen.svg)](https://github.com/VisActor/VSeed/actions/workflows/coverage.yml) | [![npm Version](https://img.shields.io/npm/v/@visactor/vseed.svg)](https://www.npmjs.com/package/@visactor/vseed) | | [vquery](https://visactor.github.io/VBI/VQuery) | Lightweight Query Engine | [![Coverage](https://img.shields.io/badge/Coverage-100.00%25-brightgreen.svg)](https://github.com/VisActor/VSeed/actions/workflows/coverage.yml) | [![npm Version](https://img.shields.io/npm/v/@visactor/vquery.svg)](https://www.npmjs.com/package/@visactor/vquery) | diff --git a/apps/website/docs/zh-CN/vseed/examples/features/_meta.json b/apps/website/docs/zh-CN/vseed/examples/features/_meta.json index 9a1c339a8b..3c87f2778e 100644 --- a/apps/website/docs/zh-CN/vseed/examples/features/_meta.json +++ b/apps/website/docs/zh-CN/vseed/examples/features/_meta.json @@ -54,6 +54,11 @@ "name": "color", "label": "Color" }, + { + "type": "file", + "name": "cornerRadius", + "label": "CornerRadius" + }, { "type": "file", "name": "dataset", diff --git a/apps/website/docs/zh-CN/vseed/examples/features/cornerRadius.mdx b/apps/website/docs/zh-CN/vseed/examples/features/cornerRadius.mdx new file mode 100644 index 0000000000..47e95d9e1c --- /dev/null +++ b/apps/website/docs/zh-CN/vseed/examples/features/cornerRadius.mdx @@ -0,0 +1,123 @@ +# CornerRadius + +## 单个图元圆角 + +圆角默认值为 0，不启用圆角。显式设置 cornerRadius 后，对每个图元单独绘制圆角；默认不启用整组 clip，适合平滑的更新动画。 + +```tsx preview +import { VSeedRender } from '@components' + +export default () => { + const vseedConfig = { + "chartType": "column", + "cornerRadius": [ + 10, + 10, + 0, + 0 + ], + "dataset": [ + { + "category": "A", + "series": "East", + "value": 10 + }, + { + "category": "A", + "series": "West", + "value": 20 + }, + { + "category": "B", + "series": "East", + "value": -10 + }, + { + "category": "B", + "series": "West", + "value": -20 + } + ], + "dimensions": [ + { + "id": "category" + }, + { + "id": "series" + } + ], + "measures": [ + { + "id": "value" + } + ], + "barStyle": { + "barBorderWidth": 0 + } +} + + return +} +``` + +## 整组堆叠圆角 + +cornerRadius 设置圆角值，stackCornerRadius: true 切换为整组堆叠圆角，通过 clip 裁剪整组，堆叠内部保持直角。开启 stackCornerRadius 会引起更新动画重叠的 bug，依赖 VChart 修复。 + +```tsx preview +import { VSeedRender } from '@components' + +export default () => { + const vseedConfig = { + "chartType": "column", + "cornerRadius": [ + 10, + 10, + 0, + 0 + ], + "stackCornerRadius": true, + "dataset": [ + { + "category": "A", + "series": "East", + "value": 10 + }, + { + "category": "A", + "series": "West", + "value": 20 + }, + { + "category": "B", + "series": "East", + "value": -10 + }, + { + "category": "B", + "series": "West", + "value": -20 + } + ], + "dimensions": [ + { + "id": "category" + }, + { + "id": "series" + } + ], + "measures": [ + { + "id": "value" + } + ], + "barStyle": { + "barBorderWidth": 0 + } +} + + return +} +``` + diff --git a/apps/website/docs/zh-CN/vseed/option/bar.md b/apps/website/docs/zh-CN/vseed/option/bar.md index 8d47f902ea..b89f1d0c20 100644 --- a/apps/website/docs/zh-CN/vseed/option/bar.md +++ b/apps/website/docs/zh-CN/vseed/option/bar.md @@ -2767,15 +2767,35 @@ Y轴动画配置 ::: -## stackCornerRadius +## cornerRadius **Type:** `number | number[] | undefined` :::note{title=描述} -条形图 堆叠圆角 +柱图圆角的数值或数组，默认 0，不启用圆角。当 stackCornerRadius 为 false 时，每个图元独立绘制圆角；为 true 时，通过 clip 裁剪整组堆叠柱体。数值设置所有角，数组按左上、右上、右下、左下排列，数据为负值时圆角方向自动翻转。设为 0 可关闭。barStyle.barRadius 可覆盖单个图元的圆角；stackCornerRadius 为 true 时，整组圆角统一使用 cornerRadius，不受 barStyle.barRadius 影响。 ::: +**示例** +[4, 4, 0, 0] + + + + +## stackCornerRadius + +**Type:** `boolean | undefined` + +:::note{title=描述} +是否使用整组堆叠圆角，默认 false。设为 true 时，通过 clip 裁剪整组柱体，圆角值统一读取 cornerRadius，保留堆叠内部的直角连接，并优先于 barStyle.barRadius（包括条件样式）。设为 false 时，cornerRadius 对每个图元单独生效。注意：开启 stackCornerRadius 会引起更新动画重叠的 bug，整组 clip 裁剪路径与图元更新动画不同步，依赖 VChart 修复；需要平滑更新动画时建议保持 false。 + +::: + +**示例** +true + + + ## barMaxWidth diff --git a/apps/website/docs/zh-CN/vseed/option/barParallel.md b/apps/website/docs/zh-CN/vseed/option/barParallel.md index fc18aaff91..522d272aa9 100644 --- a/apps/website/docs/zh-CN/vseed/option/barParallel.md +++ b/apps/website/docs/zh-CN/vseed/option/barParallel.md @@ -2759,15 +2759,35 @@ Y轴动画配置 ::: -## stackCornerRadius +## cornerRadius **Type:** `number | number[] | undefined` :::note{title=描述} -条形图 堆叠圆角 +柱图圆角的数值或数组，默认 0，不启用圆角。当 stackCornerRadius 为 false 时，每个图元独立绘制圆角；为 true 时，通过 clip 裁剪整组堆叠柱体。数值设置所有角，数组按左上、右上、右下、左下排列，数据为负值时圆角方向自动翻转。设为 0 可关闭。barStyle.barRadius 可覆盖单个图元的圆角；stackCornerRadius 为 true 时，整组圆角统一使用 cornerRadius，不受 barStyle.barRadius 影响。 ::: +**示例** +[4, 4, 0, 0] + + + + +## stackCornerRadius + +**Type:** `boolean | undefined` + +:::note{title=描述} +是否使用整组堆叠圆角，默认 false。设为 true 时，通过 clip 裁剪整组柱体，圆角值统一读取 cornerRadius，保留堆叠内部的直角连接，并优先于 barStyle.barRadius（包括条件样式）。设为 false 时，cornerRadius 对每个图元单独生效。注意：开启 stackCornerRadius 会引起更新动画重叠的 bug，整组 clip 裁剪路径与图元更新动画不同步，依赖 VChart 修复；需要平滑更新动画时建议保持 false。 + +::: + +**示例** +true + + + ## barMaxWidth diff --git a/apps/website/docs/zh-CN/vseed/option/barPercent.md b/apps/website/docs/zh-CN/vseed/option/barPercent.md index e7ae1109d5..8ce27726ae 100644 --- a/apps/website/docs/zh-CN/vseed/option/barPercent.md +++ b/apps/website/docs/zh-CN/vseed/option/barPercent.md @@ -2759,15 +2759,35 @@ Y轴动画配置 ::: -## stackCornerRadius +## cornerRadius **Type:** `number | number[] | undefined` :::note{title=描述} -条形图 堆叠圆角 +柱图圆角的数值或数组，默认 0，不启用圆角。当 stackCornerRadius 为 false 时，每个图元独立绘制圆角；为 true 时，通过 clip 裁剪整组堆叠柱体。数值设置所有角，数组按左上、右上、右下、左下排列，数据为负值时圆角方向自动翻转。设为 0 可关闭。barStyle.barRadius 可覆盖单个图元的圆角；stackCornerRadius 为 true 时，整组圆角统一使用 cornerRadius，不受 barStyle.barRadius 影响。 ::: +**示例** +[4, 4, 0, 0] + + + + +## stackCornerRadius + +**Type:** `boolean | undefined` + +:::note{title=描述} +是否使用整组堆叠圆角，默认 false。设为 true 时，通过 clip 裁剪整组柱体，圆角值统一读取 cornerRadius，保留堆叠内部的直角连接，并优先于 barStyle.barRadius（包括条件样式）。设为 false 时，cornerRadius 对每个图元单独生效。注意：开启 stackCornerRadius 会引起更新动画重叠的 bug，整组 clip 裁剪路径与图元更新动画不同步，依赖 VChart 修复；需要平滑更新动画时建议保持 false。 + +::: + +**示例** +true + + + ## barMaxWidth diff --git a/apps/website/docs/zh-CN/vseed/option/column.md b/apps/website/docs/zh-CN/vseed/option/column.md index aebc847adb..eb383d7cf0 100644 --- a/apps/website/docs/zh-CN/vseed/option/column.md +++ b/apps/website/docs/zh-CN/vseed/option/column.md @@ -2929,15 +2929,35 @@ order:'asc' ::: -## stackCornerRadius +## cornerRadius **Type:** `number | number[] | undefined` :::note{title=描述} -柱状图 堆叠圆角 +柱图圆角的数值或数组，默认 0，不启用圆角。当 stackCornerRadius 为 false 时，每个图元独立绘制圆角；为 true 时，通过 clip 裁剪整组堆叠柱体。数值设置所有角，数组按左上、右上、右下、左下排列，数据为负值时圆角方向自动翻转。设为 0 可关闭。barStyle.barRadius 可覆盖单个图元的圆角；stackCornerRadius 为 true 时，整组圆角统一使用 cornerRadius，不受 barStyle.barRadius 影响。 ::: +**示例** +[4, 4, 0, 0] + + + + +## stackCornerRadius + +**Type:** `boolean | undefined` + +:::note{title=描述} +是否使用整组堆叠圆角，默认 false。设为 true 时，通过 clip 裁剪整组柱体，圆角值统一读取 cornerRadius，保留堆叠内部的直角连接，并优先于 barStyle.barRadius（包括条件样式）。设为 false 时，cornerRadius 对每个图元单独生效。注意：开启 stackCornerRadius 会引起更新动画重叠的 bug，整组 clip 裁剪路径与图元更新动画不同步，依赖 VChart 修复；需要平滑更新动画时建议保持 false。 + +::: + +**示例** +true + + + ## barMaxWidth diff --git a/apps/website/docs/zh-CN/vseed/option/columnParallel.md b/apps/website/docs/zh-CN/vseed/option/columnParallel.md index eb6250a113..ef007e114b 100644 --- a/apps/website/docs/zh-CN/vseed/option/columnParallel.md +++ b/apps/website/docs/zh-CN/vseed/option/columnParallel.md @@ -2755,15 +2755,35 @@ Y轴动画配置 ::: -## stackCornerRadius +## cornerRadius **Type:** `number | number[] | undefined` :::note{title=描述} -柱状图 堆叠圆角 +柱图圆角的数值或数组，默认 0，不启用圆角。当 stackCornerRadius 为 false 时，每个图元独立绘制圆角；为 true 时，通过 clip 裁剪整组堆叠柱体。数值设置所有角，数组按左上、右上、右下、左下排列，数据为负值时圆角方向自动翻转。设为 0 可关闭。barStyle.barRadius 可覆盖单个图元的圆角；stackCornerRadius 为 true 时，整组圆角统一使用 cornerRadius，不受 barStyle.barRadius 影响。 ::: +**示例** +[4, 4, 0, 0] + + + + +## stackCornerRadius + +**Type:** `boolean | undefined` + +:::note{title=描述} +是否使用整组堆叠圆角，默认 false。设为 true 时，通过 clip 裁剪整组柱体，圆角值统一读取 cornerRadius，保留堆叠内部的直角连接，并优先于 barStyle.barRadius（包括条件样式）。设为 false 时，cornerRadius 对每个图元单独生效。注意：开启 stackCornerRadius 会引起更新动画重叠的 bug，整组 clip 裁剪路径与图元更新动画不同步，依赖 VChart 修复；需要平滑更新动画时建议保持 false。 + +::: + +**示例** +true + + + ## barMaxWidth diff --git a/apps/website/docs/zh-CN/vseed/option/columnPercent.md b/apps/website/docs/zh-CN/vseed/option/columnPercent.md index f61f189eef..06338ea461 100644 --- a/apps/website/docs/zh-CN/vseed/option/columnPercent.md +++ b/apps/website/docs/zh-CN/vseed/option/columnPercent.md @@ -2771,15 +2771,35 @@ Y轴动画配置 ::: -## stackCornerRadius +## cornerRadius **Type:** `number | number[] | undefined` :::note{title=描述} -并列柱状图 堆叠圆角 +柱图圆角的数值或数组，默认 0，不启用圆角。当 stackCornerRadius 为 false 时，每个图元独立绘制圆角；为 true 时，通过 clip 裁剪整组堆叠柱体。数值设置所有角，数组按左上、右上、右下、左下排列，数据为负值时圆角方向自动翻转。设为 0 可关闭。barStyle.barRadius 可覆盖单个图元的圆角；stackCornerRadius 为 true 时，整组圆角统一使用 cornerRadius，不受 barStyle.barRadius 影响。 ::: +**示例** +[4, 4, 0, 0] + + + + +## stackCornerRadius + +**Type:** `boolean | undefined` + +:::note{title=描述} +是否使用整组堆叠圆角，默认 false。设为 true 时，通过 clip 裁剪整组柱体，圆角值统一读取 cornerRadius，保留堆叠内部的直角连接，并优先于 barStyle.barRadius（包括条件样式）。设为 false 时，cornerRadius 对每个图元单独生效。注意：开启 stackCornerRadius 会引起更新动画重叠的 bug，整组 clip 裁剪路径与图元更新动画不同步，依赖 VChart 修复；需要平滑更新动画时建议保持 false。 + +::: + +**示例** +true + + + ## barMaxWidth diff --git a/apps/website/docs/zh-CN/vseed/option/dualAxis.md b/apps/website/docs/zh-CN/vseed/option/dualAxis.md index 5f1fac1eaf..666cb28e1c 100644 --- a/apps/website/docs/zh-CN/vseed/option/dualAxis.md +++ b/apps/website/docs/zh-CN/vseed/option/dualAxis.md @@ -3008,6 +3008,36 @@ brush的类型 ::: +## cornerRadius + +**Type:** `number | number[] | undefined` + +:::note{title=描述} +柱图圆角的数值或数组，默认 0，不启用圆角。当 stackCornerRadius 为 false 时，每个图元独立绘制圆角；为 true 时，通过 clip 裁剪整组堆叠柱体。数值设置所有角，数组按左上、右上、右下、左下排列，数据为负值时圆角方向自动翻转。设为 0 可关闭。barStyle.barRadius 可覆盖单个图元的圆角；stackCornerRadius 为 true 时，整组圆角统一使用 cornerRadius，不受 barStyle.barRadius 影响。 + +::: + +**示例** +[4, 4, 0, 0] + + + + +## stackCornerRadius + +**Type:** `boolean | undefined` + +:::note{title=描述} +是否使用整组堆叠圆角，默认 false。设为 true 时，通过 clip 裁剪整组柱体，圆角值统一读取 cornerRadius，保留堆叠内部的直角连接，并优先于 barStyle.barRadius（包括条件样式）。设为 false 时，cornerRadius 对每个图元单独生效。注意：开启 stackCornerRadius 会引起更新动画重叠的 bug，整组 clip 裁剪路径与图元更新动画不同步，依赖 VChart 修复；需要平滑更新动画时建议保持 false。 + +::: + +**示例** +true + + + + ## sort **Type:** `Sort | undefined` diff --git a/apps/website/docs/zh-CN/vseed/option/histogram.md b/apps/website/docs/zh-CN/vseed/option/histogram.md index cd4720518f..2ebbae8c22 100644 --- a/apps/website/docs/zh-CN/vseed/option/histogram.md +++ b/apps/website/docs/zh-CN/vseed/option/histogram.md @@ -2559,15 +2559,35 @@ Y轴动画配置 ::: -## stackCornerRadius +## cornerRadius **Type:** `number | number[] | undefined` :::note{title=描述} -柱状图 堆叠圆角 +柱图圆角的数值或数组，默认 0，不启用圆角。当 stackCornerRadius 为 false 时，每个图元独立绘制圆角；为 true 时，通过 clip 裁剪整组堆叠柱体。数值设置所有角，数组按左上、右上、右下、左下排列，数据为负值时圆角方向自动翻转。设为 0 可关闭。barStyle.barRadius 可覆盖单个图元的圆角；stackCornerRadius 为 true 时，整组圆角统一使用 cornerRadius，不受 barStyle.barRadius 影响。 ::: +**示例** +[4, 4, 0, 0] + + + + +## stackCornerRadius + +**Type:** `boolean | undefined` + +:::note{title=描述} +是否使用整组堆叠圆角，默认 false。设为 true 时，通过 clip 裁剪整组柱体，圆角值统一读取 cornerRadius，保留堆叠内部的直角连接，并优先于 barStyle.barRadius（包括条件样式）。设为 false 时，cornerRadius 对每个图元单独生效。注意：开启 stackCornerRadius 会引起更新动画重叠的 bug，整组 clip 裁剪路径与图元更新动画不同步，依赖 VChart 修复；需要平滑更新动画时建议保持 false。 + +::: + +**示例** +true + + + ## binCount diff --git a/apps/website/docs/zh-CN/vseed/option/raceBar.md b/apps/website/docs/zh-CN/vseed/option/raceBar.md index 1e9d50563e..1c4df640f5 100644 --- a/apps/website/docs/zh-CN/vseed/option/raceBar.md +++ b/apps/website/docs/zh-CN/vseed/option/raceBar.md @@ -2609,15 +2609,35 @@ Y轴动画配置 ::: -## stackCornerRadius +## cornerRadius **Type:** `number | number[] | undefined` :::note{title=描述} -堆叠圆角 +柱图圆角的数值或数组，默认 0，不启用圆角。当 stackCornerRadius 为 false 时，每个图元独立绘制圆角；为 true 时，通过 clip 裁剪整组堆叠柱体。数值设置所有角，数组按左上、右上、右下、左下排列，数据为负值时圆角方向自动翻转。设为 0 可关闭。barStyle.barRadius 可覆盖单个图元的圆角；stackCornerRadius 为 true 时，整组圆角统一使用 cornerRadius，不受 barStyle.barRadius 影响。 ::: +**示例** +[4, 4, 0, 0] + + + + +## stackCornerRadius + +**Type:** `boolean | undefined` + +:::note{title=描述} +是否使用整组堆叠圆角，默认 false。设为 true 时，通过 clip 裁剪整组柱体，圆角值统一读取 cornerRadius，保留堆叠内部的直角连接，并优先于 barStyle.barRadius（包括条件样式）。设为 false 时，cornerRadius 对每个图元单独生效。注意：开启 stackCornerRadius 会引起更新动画重叠的 bug，整组 clip 裁剪路径与图元更新动画不同步，依赖 VChart 修复；需要平滑更新动画时建议保持 false。 + +::: + +**示例** +true + + + ## barMaxWidth diff --git a/apps/website/docs/zh-CN/vseed/option/raceColumn.md b/apps/website/docs/zh-CN/vseed/option/raceColumn.md index 3a746e1d83..492ee7ee65 100644 --- a/apps/website/docs/zh-CN/vseed/option/raceColumn.md +++ b/apps/website/docs/zh-CN/vseed/option/raceColumn.md @@ -2652,15 +2652,35 @@ Y轴动画配置 ::: -## stackCornerRadius +## cornerRadius **Type:** `number | number[] | undefined` :::note{title=描述} -堆叠圆角配置 +柱图圆角的数值或数组，默认 0，不启用圆角。当 stackCornerRadius 为 false 时，每个图元独立绘制圆角；为 true 时，通过 clip 裁剪整组堆叠柱体。数值设置所有角，数组按左上、右上、右下、左下排列，数据为负值时圆角方向自动翻转。设为 0 可关闭。barStyle.barRadius 可覆盖单个图元的圆角；stackCornerRadius 为 true 时，整组圆角统一使用 cornerRadius，不受 barStyle.barRadius 影响。 ::: +**示例** +[4, 4, 0, 0] + + + + +## stackCornerRadius + +**Type:** `boolean | undefined` + +:::note{title=描述} +是否使用整组堆叠圆角，默认 false。设为 true 时，通过 clip 裁剪整组柱体，圆角值统一读取 cornerRadius，保留堆叠内部的直角连接，并优先于 barStyle.barRadius（包括条件样式）。设为 false 时，cornerRadius 对每个图元单独生效。注意：开启 stackCornerRadius 会引起更新动画重叠的 bug，整组 clip 裁剪路径与图元更新动画不同步，依赖 VChart 修复；需要平滑更新动画时建议保持 false。 + +::: + +**示例** +true + + + ## barMaxWidth diff --git a/packages/vseed/AGENTS.md b/packages/vseed/AGENTS.md index d606629e86..0c12bc0715 100644 --- a/packages/vseed/AGENTS.md +++ b/packages/vseed/AGENTS.md @@ -184,7 +184,7 @@ VSeed 支持在 DSL 中写动态过滤逻辑（code），在 build 前执行。 - 组合式 pipeline 构建图表类型 - 适配器模式（如 pivotAdapter）承接条件分支 -`stackCornerRadius` 的裁剪同时限制柱体描边的外扩。即使未配置圆角、使用单系列或条件圆角，也应保留静态柱体的裁剪边界；匹配显式 `barRadius` 时，裁剪圆角不应大于图元圆角，避免把直角裁成圆角。`moveIn` 因图元尚未到达最终位置，使用图元圆角而不使用最终位置裁剪。 +柱图圆角值统一由 `cornerRadius` 设置，`stackCornerRadius` 是布尔开关，默认 `false`，此时每个图元独立绘制圆角且不得生成整组 clip 回调。显式设置 `stackCornerRadius: true` 时，交由 VChart 使用 `cornerRadius` 裁剪整组堆叠柱体，并优先于 `barStyle.barRadius`（包括条件样式）；`cornerRadius: 0` 对应整组直角裁剪。整组 clip 与更新动画不同步，会引起更新动画重叠的 bug，依赖 VChart 修复；不得通过隐式动画降级改变显式配置的模式。 详见： diff --git a/packages/vseed/src/pipeline/advanced/chart/pipes/config/column.ts b/packages/vseed/src/pipeline/advanced/chart/pipes/config/column.ts index 92d1e2db39..7387526903 100644 --- a/packages/vseed/src/pipeline/advanced/chart/pipes/config/column.ts +++ b/packages/vseed/src/pipeline/advanced/chart/pipes/config/column.ts @@ -19,6 +19,7 @@ export const columnConfig: AdvancedPipe = (advancedVSeed, context) => { 'xAxis', 'yAxis', 'crosshairRect', + 'cornerRadius', 'stackCornerRadius', 'barMaxWidth', 'barGapInGroup', diff --git a/packages/vseed/src/pipeline/advanced/chart/pipes/config/dualAxis.ts b/packages/vseed/src/pipeline/advanced/chart/pipes/config/dualAxis.ts index 884d51299e..d5a53ac13b 100644 --- a/packages/vseed/src/pipeline/advanced/chart/pipes/config/dualAxis.ts +++ b/packages/vseed/src/pipeline/advanced/chart/pipes/config/dualAxis.ts @@ -27,6 +27,7 @@ export const dualAxisConfig: AdvancedPipe = (advancedVSeed, context) => { 'barGapInGroup', 'barMaxWidth', + 'cornerRadius', 'stackCornerRadius', 'dimensionLinkage', diff --git a/packages/vseed/src/pipeline/advanced/chart/pipes/config/histogram.ts b/packages/vseed/src/pipeline/advanced/chart/pipes/config/histogram.ts index 075e0b8c6d..de52a4f6e6 100644 --- a/packages/vseed/src/pipeline/advanced/chart/pipes/config/histogram.ts +++ b/packages/vseed/src/pipeline/advanced/chart/pipes/config/histogram.ts @@ -21,6 +21,8 @@ export const histogramConfig: AdvancedPipe = (advancedVSeed, context) => { 'xAxis', 'yAxis', 'crosshairRect', + 'cornerRadius', + 'stackCornerRadius', 'binCount', 'binStep', 'binValueType', diff --git a/packages/vseed/src/pipeline/spec/chart/pipeline/bar.ts b/packages/vseed/src/pipeline/spec/chart/pipeline/bar.ts index 58cc5d7b7b..9adb1a7cc8 100644 --- a/packages/vseed/src/pipeline/spec/chart/pipeline/bar.ts +++ b/packages/vseed/src/pipeline/spec/chart/pipeline/bar.ts @@ -26,7 +26,7 @@ import { annotationDifferenceLine, annotationAreaBand, horizontalCrosshairRect, - stackCornerRadius, + barCornerRadius, progressive, colorAdapter, linearColor, @@ -47,7 +47,7 @@ const bar: VChartSpecPipeline = [ initBar, barAnimation, regionPadding, - stackCornerRadius, + barCornerRadius, barMaxWidth, colorAdapter(color, linearColor), backgroundColor, @@ -79,7 +79,7 @@ const pivotBar: PivotChartSpecPipeline = [ initBar, barAnimation, regionPadding, - stackCornerRadius, + barCornerRadius, barMaxWidth, colorAdapter(color, linearColor), backgroundColor, diff --git a/packages/vseed/src/pipeline/spec/chart/pipeline/barParallel.ts b/packages/vseed/src/pipeline/spec/chart/pipeline/barParallel.ts index 77a0bd461b..1b4d7d6be7 100644 --- a/packages/vseed/src/pipeline/spec/chart/pipeline/barParallel.ts +++ b/packages/vseed/src/pipeline/spec/chart/pipeline/barParallel.ts @@ -26,7 +26,7 @@ import { annotationDifferenceLine, annotationAreaBand, horizontalCrosshairRect, - stackCornerRadius, + barCornerRadius, progressive, linearColor, colorAdapter, @@ -48,7 +48,7 @@ const barParallel: VChartSpecPipeline = [ initBarParallel, barAnimation, regionPadding, - stackCornerRadius, + barCornerRadius, barMaxWidth, barGapInGroup, colorAdapter(color, linearColor), @@ -80,7 +80,7 @@ const pivotBarParallel: PivotChartSpecPipeline = [ initBarParallel, barAnimation, regionPadding, - stackCornerRadius, + barCornerRadius, barMaxWidth, colorAdapter(color, linearColor), backgroundColor, diff --git a/packages/vseed/src/pipeline/spec/chart/pipeline/barPercent.ts b/packages/vseed/src/pipeline/spec/chart/pipeline/barPercent.ts index 0ba92c8226..ffea605637 100644 --- a/packages/vseed/src/pipeline/spec/chart/pipeline/barPercent.ts +++ b/packages/vseed/src/pipeline/spec/chart/pipeline/barPercent.ts @@ -26,7 +26,7 @@ import { annotationHorizontalLine, annotationAreaBand, horizontalCrosshairRect, - stackCornerRadius, + barCornerRadius, progressive, colorAdapter, linearColor, @@ -47,7 +47,7 @@ const barPercent: VChartSpecPipeline = [ initBar, barAnimation, regionPadding, - stackCornerRadius, + barCornerRadius, barMaxWidth, colorAdapter(color, linearColor), backgroundColor, @@ -78,7 +78,7 @@ const pivotBarPercent: PivotChartSpecPipeline = [ initBar, barAnimation, regionPadding, - stackCornerRadius, + barCornerRadius, barMaxWidth, colorAdapter(color, linearColor), backgroundColor, diff --git a/packages/vseed/src/pipeline/spec/chart/pipeline/boxplot.ts b/packages/vseed/src/pipeline/spec/chart/pipeline/boxplot.ts index b049f66b4c..29aba88ecb 100644 --- a/packages/vseed/src/pipeline/spec/chart/pipeline/boxplot.ts +++ b/packages/vseed/src/pipeline/spec/chart/pipeline/boxplot.ts @@ -16,7 +16,6 @@ import { annotationVerticalLine, annotationHorizontalLine, annotationAreaBand, - stackCornerRadius, boxMaxWidth, boxGapInGroup, progressive, @@ -42,7 +41,6 @@ import { const boxplot: VChartSpecPipeline = [ fontFamilyTheme, initBoxplot, - stackCornerRadius, boxMaxWidth, boxGapInGroup, colorAdapter(color, linearColor), @@ -70,7 +68,6 @@ const pivotBoxplot: PivotChartSpecPipeline = [ pivotIndicators([ fontFamilyTheme, initBoxplot, - stackCornerRadius, boxMaxWidth, boxGapInGroup, colorAdapter(color, linearColor), diff --git a/packages/vseed/src/pipeline/spec/chart/pipeline/column.ts b/packages/vseed/src/pipeline/spec/chart/pipeline/column.ts index 6192fc6ca7..04d127d384 100644 --- a/packages/vseed/src/pipeline/spec/chart/pipeline/column.ts +++ b/packages/vseed/src/pipeline/spec/chart/pipeline/column.ts @@ -27,7 +27,7 @@ import { annotationDifferenceLine, annotationAreaBand, verticalCrosshairRect, - stackCornerRadius, + barCornerRadius, progressive, colorAdapter, linearColor, @@ -49,7 +49,7 @@ const column: VChartSpecPipeline = [ initColumn, columnAnimation, regionPadding, - stackCornerRadius, + barCornerRadius, barMaxWidth, stackInverse, colorAdapter(color, linearColor), @@ -82,7 +82,7 @@ const pivotColumn: PivotChartSpecPipeline = [ initColumn, columnAnimation, regionPadding, - stackCornerRadius, + barCornerRadius, barMaxWidth, stackInverse, colorAdapter(color, linearColor), diff --git a/packages/vseed/src/pipeline/spec/chart/pipeline/columnParallel.ts b/packages/vseed/src/pipeline/spec/chart/pipeline/columnParallel.ts index 4ebd95bef0..5ae9d9bb38 100644 --- a/packages/vseed/src/pipeline/spec/chart/pipeline/columnParallel.ts +++ b/packages/vseed/src/pipeline/spec/chart/pipeline/columnParallel.ts @@ -26,7 +26,7 @@ import { annotationDifferenceLine, annotationAreaBand, verticalCrosshairRect, - stackCornerRadius, + barCornerRadius, progressive, linearColor, colorAdapter, @@ -48,7 +48,7 @@ const columnParallel: VChartSpecPipeline = [ initColumnParallel, columnAnimation, regionPadding, - stackCornerRadius, + barCornerRadius, barMaxWidth, barGapInGroup, colorAdapter(color, linearColor), @@ -80,7 +80,7 @@ const pivotColumnParallel: PivotChartSpecPipeline = [ initColumnParallel, columnAnimation, regionPadding, - stackCornerRadius, + barCornerRadius, barMaxWidth, colorAdapter(color, linearColor), backgroundColor, diff --git a/packages/vseed/src/pipeline/spec/chart/pipeline/columnPercent.ts b/packages/vseed/src/pipeline/spec/chart/pipeline/columnPercent.ts index d839e895c4..02ee2269d7 100644 --- a/packages/vseed/src/pipeline/spec/chart/pipeline/columnPercent.ts +++ b/packages/vseed/src/pipeline/spec/chart/pipeline/columnPercent.ts @@ -27,7 +27,7 @@ import { annotationHorizontalLine, annotationAreaBand, verticalCrosshairRect, - stackCornerRadius, + barCornerRadius, progressive, colorAdapter, linearColor, @@ -48,7 +48,7 @@ const columnPercent: VChartSpecPipeline = [ initColumn, columnAnimation, regionPadding, - stackCornerRadius, + barCornerRadius, stackInverse, barMaxWidth, colorAdapter(color, linearColor), @@ -80,7 +80,7 @@ const pivotColumnPercent: PivotChartSpecPipeline = [ initColumn, columnAnimation, regionPadding, - stackCornerRadius, + barCornerRadius, stackInverse, barMaxWidth, colorAdapter(color, linearColor), diff --git a/packages/vseed/src/pipeline/spec/chart/pipeline/dualAxis.ts b/packages/vseed/src/pipeline/spec/chart/pipeline/dualAxis.ts index 9925f147e8..e348061350 100644 --- a/packages/vseed/src/pipeline/spec/chart/pipeline/dualAxis.ts +++ b/packages/vseed/src/pipeline/spec/chart/pipeline/dualAxis.ts @@ -38,7 +38,7 @@ import { annotationAreaBand, barMaxWidth, barGapInGroup, - stackCornerRadius, + barCornerRadius, pivotTitle, pivotAxisStyle, dimensionLinkage, @@ -67,7 +67,7 @@ const dualAxis: VChartSpecPipeline = [ barMaxWidth, barGapInGroup, - barStyleFilter(stackCornerRadius), + barStyleFilter(barCornerRadius), barStyleFilter(colorBarStyleFill(columnStyle)), pointStyleFilter(colorPointStyleFill(pointStyle)), @@ -110,7 +110,7 @@ const pivotDualAxis: PivotChartSpecPipeline = [ barMaxWidth, barGapInGroup, - barStyleFilter(stackCornerRadius), + barStyleFilter(barCornerRadius), barStyleFilter(colorBarStyleFill(columnStyle)), pointStyleFilter(colorPointStyleFill(pointStyle)), diff --git a/packages/vseed/src/pipeline/spec/chart/pipeline/histogram.ts b/packages/vseed/src/pipeline/spec/chart/pipeline/histogram.ts index ba0cab454e..a06b2404f1 100644 --- a/packages/vseed/src/pipeline/spec/chart/pipeline/histogram.ts +++ b/packages/vseed/src/pipeline/spec/chart/pipeline/histogram.ts @@ -13,6 +13,7 @@ import { pivotColumnDimensions, pivotRowDimensions, columnStyle, + barCornerRadius, annotationPointOfHistogram, annotationVerticalLine, annotationHorizontalLine, @@ -41,6 +42,7 @@ import { const histogram: VChartSpecPipeline = [ fontFamilyTheme, initHistogram, + barCornerRadius, colorAdapter(color, linearColor), backgroundColor, datasetHistogram, @@ -68,6 +70,7 @@ const pivotHistogram: PivotChartSpecPipeline = [ pivotIndicators([ fontFamilyTheme, initHistogram, + barCornerRadius, colorAdapter(color, linearColor), backgroundColor, datasetHistogram, diff --git a/packages/vseed/src/pipeline/spec/chart/pipeline/raceBar.ts b/packages/vseed/src/pipeline/spec/chart/pipeline/raceBar.ts index 034bb3e681..8c17879271 100644 --- a/packages/vseed/src/pipeline/spec/chart/pipeline/raceBar.ts +++ b/packages/vseed/src/pipeline/spec/chart/pipeline/raceBar.ts @@ -12,7 +12,7 @@ import { annotationHorizontalLine, annotationAreaBand, horizontalCrosshairRect, - stackCornerRadius, + barCornerRadius, progressive, colorAdapter, linearColor, @@ -31,7 +31,7 @@ import { const raceBar: VChartSpecPipeline = [ fontFamilyTheme, initBar, - stackCornerRadius, + barCornerRadius, barMaxWidth, colorAdapter(color, linearColor), backgroundColor, diff --git a/packages/vseed/src/pipeline/spec/chart/pipeline/raceColumn.ts b/packages/vseed/src/pipeline/spec/chart/pipeline/raceColumn.ts index 1d306a97d2..4dae2a0b07 100644 --- a/packages/vseed/src/pipeline/spec/chart/pipeline/raceColumn.ts +++ b/packages/vseed/src/pipeline/spec/chart/pipeline/raceColumn.ts @@ -1,7 +1,7 @@ import type { VChartSpecPipeline } from 'src/types' import { initColumn, - stackCornerRadius, + barCornerRadius, barMaxWidth, colorAdapter, color, @@ -31,7 +31,7 @@ import { const raceColumn: VChartSpecPipeline = [ fontFamilyTheme, initColumn, - stackCornerRadius, + barCornerRadius, barMaxWidth, colorAdapter(color, linearColor), backgroundColor, diff --git a/packages/vseed/src/pipeline/spec/chart/pipeline/rose.ts b/packages/vseed/src/pipeline/spec/chart/pipeline/rose.ts index e7c7606f90..d4de239e60 100644 --- a/packages/vseed/src/pipeline/spec/chart/pipeline/rose.ts +++ b/packages/vseed/src/pipeline/spec/chart/pipeline/rose.ts @@ -16,7 +16,6 @@ import { pivotColumnDimensions, stackInverse, verticalCrosshairRect, - stackCornerRadius, initRose, roseAnimation, radiusAxis, @@ -39,7 +38,6 @@ const rose: VChartSpecPipeline = [ fontFamilyTheme, initRose, roseAnimation, - stackCornerRadius, stackInverse, colorAdapter(color, linearColor), backgroundColor, @@ -64,7 +62,6 @@ const pivotRose: PivotChartSpecPipeline = [ initRose, roseAnimation, addRegionPadding, - stackCornerRadius, stackInverse, colorAdapter(color, linearColor), backgroundColor, diff --git a/packages/vseed/src/pipeline/spec/chart/pipeline/roseParallel.ts b/packages/vseed/src/pipeline/spec/chart/pipeline/roseParallel.ts index 0ed7740051..b3a5d95be0 100644 --- a/packages/vseed/src/pipeline/spec/chart/pipeline/roseParallel.ts +++ b/packages/vseed/src/pipeline/spec/chart/pipeline/roseParallel.ts @@ -19,7 +19,6 @@ import { annotationHorizontalLine, annotationAreaBand, verticalCrosshairRect, - stackCornerRadius, initRoseParallel, roseAnimation, radiusAxis, @@ -42,7 +41,6 @@ const roseParallel: VChartSpecPipeline = [ fontFamilyTheme, initRoseParallel, roseAnimation, - stackCornerRadius, colorAdapter(color, linearColor), backgroundColor, datasetXY, @@ -70,7 +68,6 @@ const pivotRoseParallel: PivotChartSpecPipeline = [ initRoseParallel, roseAnimation, addRegionPadding, - stackCornerRadius, colorAdapter(color, linearColor), backgroundColor, datasetXY, diff --git a/packages/vseed/src/pipeline/spec/chart/pipes/markStyle/barStyle.ts b/packages/vseed/src/pipeline/spec/chart/pipes/markStyle/barStyle.ts index fa85e41391..91a9016f00 100644 --- a/packages/vseed/src/pipeline/spec/chart/pipes/markStyle/barStyle.ts +++ b/packages/vseed/src/pipeline/spec/chart/pipes/markStyle/barStyle.ts @@ -27,7 +27,7 @@ const createBarStyle = visible: barVisible, fill: createGradientFill(barColor, barGradient, colorField, gradientDirection), fillOpacity: barColorOpacity, - cornerRadius: barRadius, + ...(barRadius == null ? {} : { cornerRadius: (spec as IBarChartSpec).stackCornerRadius ? 0 : barRadius }), lineWidth: barBorderWidth, stroke: barBorderColor, strokeOpacity: barBorderOpacity, diff --git a/packages/vseed/src/pipeline/spec/chart/pipes/player/playerBar.ts b/packages/vseed/src/pipeline/spec/chart/pipes/player/playerBar.ts index 679565e13a..c0ec818657 100644 --- a/packages/vseed/src/pipeline/spec/chart/pipes/player/playerBar.ts +++ b/packages/vseed/src/pipeline/spec/chart/pipes/player/playerBar.ts @@ -69,7 +69,6 @@ export const playerBar: VChartSpecPipe = (spec, context) => { return { ...result, dataKey, - stackCornerRadius: undefined, animationUpdate: { bar: [ { diff --git a/packages/vseed/src/pipeline/spec/chart/pipes/player/playerColumn.ts b/packages/vseed/src/pipeline/spec/chart/pipes/player/playerColumn.ts index 7d8c341f78..7e18ed7b89 100644 --- a/packages/vseed/src/pipeline/spec/chart/pipes/player/playerColumn.ts +++ b/packages/vseed/src/pipeline/spec/chart/pipes/player/playerColumn.ts @@ -69,7 +69,6 @@ export const playerColumn: VChartSpecPipe = (spec, context) => { return { ...result, dataKey, - stackCornerRadius: undefined, animationUpdate: { bar: [ { diff --git a/packages/vseed/src/pipeline/spec/chart/pipes/stack/barCornerRadius.ts b/packages/vseed/src/pipeline/spec/chart/pipes/stack/barCornerRadius.ts new file mode 100644 index 0000000000..c05be4b233 --- /dev/null +++ b/packages/vseed/src/pipeline/spec/chart/pipes/stack/barCornerRadius.ts @@ -0,0 +1,21 @@ +import type { IBarChartSpec } from '@visactor/vchart' +import type { VChartSpecPipe } from 'src/types' +import { createBarCornerRadius, createStackCornerRadius } from './stackCornerRadiusUtils' + +export const barCornerRadius: VChartSpecPipe = (spec, { advancedVSeed, vseed }) => { + const config = advancedVSeed.config?.[vseed.chartType as 'column'] + const radius = config?.cornerRadius ?? 0 + const useStackRadius = config?.stackCornerRadius ?? false + + return { + ...spec, + stackCornerRadius: useStackRadius ? createStackCornerRadius(radius) : undefined, + bar: { + ...(spec as IBarChartSpec).bar, + style: { + ...(spec as IBarChartSpec).bar?.style, + cornerRadius: useStackRadius ? 0 : createBarCornerRadius(radius), + }, + }, + } as IBarChartSpec +} diff --git a/packages/vseed/src/pipeline/spec/chart/pipes/stack/index.ts b/packages/vseed/src/pipeline/spec/chart/pipes/stack/index.ts index 70905a7c7d..ae608157ce 100644 --- a/packages/vseed/src/pipeline/spec/chart/pipes/stack/index.ts +++ b/packages/vseed/src/pipeline/spec/chart/pipes/stack/index.ts @@ -1,2 +1,2 @@ export { stackInverse } from './stack' -export { stackCornerRadius } from './stackCornerRadius' +export { barCornerRadius } from './barCornerRadius' diff --git a/packages/vseed/src/pipeline/spec/chart/pipes/stack/stackCornerRadius.ts b/packages/vseed/src/pipeline/spec/chart/pipes/stack/stackCornerRadius.ts deleted file mode 100644 index 795efac3a5..0000000000 --- a/packages/vseed/src/pipeline/spec/chart/pipes/stack/stackCornerRadius.ts +++ /dev/null @@ -1,52 +0,0 @@ -import type { IBarChartSpec } from '@visactor/vchart' -import { normalizePadding } from '@visactor/vutils' -import type { VChartSpecPipe, StackCornerRadius, BarStyle } from 'src/types' -import { selector, selectorWithDynamicFilter } from 'src/dataSelector' -import { createBarCornerRadius, createStackCornerRadius, hasMoveInAnimation } from './stackCornerRadiusUtils' - -const hasBarMoveInAnimation = (spec: IBarChartSpec): boolean => { - return [spec.animationAppear, spec.animationNormal, spec.animationEnter, spec.animationUpdate].some( - hasMoveInAnimation, - ) -} - -export const stackCornerRadius: VChartSpecPipe = (spec, context) => { - const { advancedVSeed, vseed } = context - const { chartType } = vseed - const stackCornerRadius = (advancedVSeed.config?.[chartType as 'column']?.stackCornerRadius ?? 0) as StackCornerRadius - - if (!hasBarMoveInAnimation(spec as IBarChartSpec)) { - const styles = advancedVSeed.markStyle?.barStyle - const rules = ((Array.isArray(styles) ? styles : styles ? [styles] : []) as BarStyle[]) - .filter((rule) => rule.barRadius != null) - .reverse() - const defaultRadius = createStackCornerRadius(stackCornerRadius) - // Preserve the stroke bounds without rounding more than an explicit per-bar corner. - const clipRadius: typeof defaultRadius = rules.length - ? (attributes, datum) => { - const radius = defaultRadius(attributes, datum) - const rule = rules.find((rule) => - rule.dynamicFilter - ? selectorWithDynamicFilter(datum, rule.dynamicFilter, rule.selector) - : selector(datum, rule.selector), - ) - if (!rule) return radius - const barRadius = normalizePadding(rule.barRadius!) - return normalizePadding(radius).map((corner, index) => Math.min(corner, barRadius[index])) - } - : defaultRadius - return { ...spec, stackCornerRadius: clipRadius } as IBarChartSpec - } - - // A final-position clip would cut off moveIn before it reaches the bar bounds. - return { - ...spec, - bar: { - ...(spec as IBarChartSpec).bar, - style: { - ...(spec as IBarChartSpec).bar?.style, - cornerRadius: createBarCornerRadius(stackCornerRadius), - }, - }, - } as IBarChartSpec -} diff --git a/packages/vseed/src/pipeline/spec/chart/pipes/stack/stackCornerRadiusUtils.ts b/packages/vseed/src/pipeline/spec/chart/pipes/stack/stackCornerRadiusUtils.ts index 57221c3db9..9fc723724c 100644 --- a/packages/vseed/src/pipeline/spec/chart/pipes/stack/stackCornerRadiusUtils.ts +++ b/packages/vseed/src/pipeline/spec/chart/pipes/stack/stackCornerRadiusUtils.ts @@ -1,9 +1,9 @@ import { FoldMeasureId } from 'src/dataReshape/constant' -import type { Datum, StackCornerRadius } from 'src/types' +import type { Datum, CornerRadius } from 'src/types' -export type StackCornerRadiusCallback = (_: unknown, datum: Datum) => StackCornerRadius | 0 +export type StackCornerRadiusCallback = (_: unknown, datum: Datum) => CornerRadius | 0 -const reverseStackCornerRadius = (cornerRadius: StackCornerRadius): StackCornerRadius => { +const reverseStackCornerRadius = (cornerRadius: CornerRadius): CornerRadius => { if (!Array.isArray(cornerRadius)) { return cornerRadius } @@ -13,7 +13,7 @@ const reverseStackCornerRadius = (cornerRadius: StackCornerRadius): StackCornerR return [bottomRight, bottomLeft, topLeft, topRight] } -const mergeStackCornerRadius = (cornerRadius: StackCornerRadius): StackCornerRadius => { +const mergeStackCornerRadius = (cornerRadius: CornerRadius): CornerRadius => { if (!Array.isArray(cornerRadius)) { return cornerRadius } @@ -28,10 +28,7 @@ const mergeStackCornerRadius = (cornerRadius: StackCornerRadius): StackCornerRad ] } -const getStackRangeCornerRadius = ( - cornerRadius: StackCornerRadius, - datum: Datum, -): StackCornerRadius | 0 | undefined => { +const getStackRangeCornerRadius = (cornerRadius: CornerRadius, datum: Datum): CornerRadius | 0 | undefined => { const stackStart = datum?.['__VCHART_STACK_START'] const stackEnd = datum?.['__VCHART_STACK_END'] @@ -58,13 +55,13 @@ const getStackRangeCornerRadius = ( } type CornerRadiusCallbacks = { - bar: (datum: Datum) => StackCornerRadius | 0 + bar: (datum: Datum) => CornerRadius | 0 stack: StackCornerRadiusCallback } const callbacks = new Map() -const createCornerRadius = (radius: StackCornerRadius): CornerRadiusCallbacks => { +const createCornerRadius = (radius: CornerRadius): CornerRadiusCallbacks => { const key = JSON.stringify(radius) const cached = callbacks.get(key) if (cached) return cached @@ -94,26 +91,8 @@ const createCornerRadius = (radius: StackCornerRadius): CornerRadiusCallbacks => return result } -export const createStackCornerRadius = (radius: StackCornerRadius): StackCornerRadiusCallback => +export const createStackCornerRadius = (radius: CornerRadius): StackCornerRadiusCallback => createCornerRadius(radius).stack -export const createBarCornerRadius = (radius: StackCornerRadius): CornerRadiusCallbacks['bar'] => +export const createBarCornerRadius = (radius: CornerRadius): CornerRadiusCallbacks['bar'] => createCornerRadius(radius).bar - -export const hasMoveInAnimation = (animation: unknown): boolean => { - if (!animation) { - return false - } - - if (Array.isArray(animation)) { - return animation.some(hasMoveInAnimation) - } - - if (typeof animation !== 'object') { - return false - } - - const animationRecord = animation as Record - - return animationRecord.type === 'moveIn' || Object.values(animationRecord).some(hasMoveInAnimation) -} diff --git a/packages/vseed/src/theme/dark/bar.ts b/packages/vseed/src/theme/dark/bar.ts index 3141ccdce9..ef78d10d5f 100644 --- a/packages/vseed/src/theme/dark/bar.ts +++ b/packages/vseed/src/theme/dark/bar.ts @@ -40,7 +40,8 @@ export const getBarTheme = () => { xAxis: linearAxis, yAxis: barBandAxis, crosshairRect: crosshairRect, - stackCornerRadius: [0, 4, 4, 0], + cornerRadius: 0, + stackCornerRadius: false, pivotGrid: getDarkPivotChartGridConfig(), annotation: getDarkAnnotation(), } diff --git a/packages/vseed/src/theme/dark/column.ts b/packages/vseed/src/theme/dark/column.ts index 8c9db0b882..ae6dc10897 100644 --- a/packages/vseed/src/theme/dark/column.ts +++ b/packages/vseed/src/theme/dark/column.ts @@ -31,7 +31,8 @@ export const getColumnTheme = () => { xAxis: bandAxis, yAxis: linearAxis, crosshairRect: crosshairRect, - stackCornerRadius: [4, 4, 0, 0], + cornerRadius: 0, + stackCornerRadius: false, pivotGrid: getDarkPivotChartGridConfig(), annotation: getDarkAnnotation(), @@ -59,7 +60,8 @@ export const getColumnParallelTheme = () => { xAxis: bandAxis, yAxis: linearAxis, crosshairRect: crosshairRect, - stackCornerRadius: [4, 4, 0, 0], + cornerRadius: 0, + stackCornerRadius: false, pivotGrid: getDarkPivotChartGridConfig(), annotation: getDarkAnnotation(), } diff --git a/packages/vseed/src/theme/dark/dualAxis.ts b/packages/vseed/src/theme/dark/dualAxis.ts index bbc83c8521..4b1458fc81 100644 --- a/packages/vseed/src/theme/dark/dualAxis.ts +++ b/packages/vseed/src/theme/dark/dualAxis.ts @@ -26,6 +26,8 @@ export const getDualAxisTheme = () => { return { ...baseConfig, + cornerRadius: 0, + stackCornerRadius: false, xAxis: bandAxis, primaryYAxis: linearAxis, secondaryYAxis: { ...linearAxis, grid: { visible: false } }, diff --git a/packages/vseed/src/theme/dark/histogram.ts b/packages/vseed/src/theme/dark/histogram.ts index b3eff48a9e..709ed8a27a 100644 --- a/packages/vseed/src/theme/dark/histogram.ts +++ b/packages/vseed/src/theme/dark/histogram.ts @@ -26,6 +26,8 @@ export const getHistogramTheme = () => { return { ...baseConfig, + cornerRadius: 0, + stackCornerRadius: false, xAxis: linearAxis, yAxis: linearAxis, diff --git a/packages/vseed/src/theme/dark/race.ts b/packages/vseed/src/theme/dark/race.ts index bfce7d6f70..af6bed0659 100644 --- a/packages/vseed/src/theme/dark/race.ts +++ b/packages/vseed/src/theme/dark/race.ts @@ -47,7 +47,8 @@ export const getRaceBarTheme = () => { xAxis: linearAxis, yAxis: barBandAxis, crosshairRect: crosshairRect, - stackCornerRadius: [0, 4, 4, 0], + cornerRadius: 0, + stackCornerRadius: false, pivotGrid: getDarkPivotChartGridConfig(), annotation: getDarkAnnotation(), player, @@ -78,7 +79,8 @@ export const getRaceColumnTheme = () => { xAxis: bandAxis, yAxis: linearAxis, crosshairRect: crosshairRect, - stackCornerRadius: [4, 4, 0, 0], + cornerRadius: 0, + stackCornerRadius: false, pivotGrid: getDarkPivotChartGridConfig(), annotation: getDarkAnnotation(), player, diff --git a/packages/vseed/src/theme/light/bar.ts b/packages/vseed/src/theme/light/bar.ts index 205f323573..58a25fcf57 100644 --- a/packages/vseed/src/theme/light/bar.ts +++ b/packages/vseed/src/theme/light/bar.ts @@ -40,7 +40,8 @@ export const getBarTheme = () => { yAxis: barBandAxis, crosshairRect, - stackCornerRadius: [0, 4, 4, 0], + cornerRadius: 0, + stackCornerRadius: false, pivotGrid: getLightPivotChartGridConfig(), annotation: getLightAnnotation(), } diff --git a/packages/vseed/src/theme/light/column.ts b/packages/vseed/src/theme/light/column.ts index a4bf19a7e2..ff83b725ab 100644 --- a/packages/vseed/src/theme/light/column.ts +++ b/packages/vseed/src/theme/light/column.ts @@ -31,7 +31,8 @@ export const getColumnTheme = () => { yAxis: linearAxis, crosshairRect, - stackCornerRadius: [4, 4, 0, 0], + cornerRadius: 0, + stackCornerRadius: false, pivotGrid: getLightPivotChartGridConfig(), annotation: getLightAnnotation(), @@ -59,7 +60,8 @@ export const getColumnParallelTheme = () => { yAxis: linearAxis, crosshairRect, - stackCornerRadius: [4, 4, 0, 0], + cornerRadius: 0, + stackCornerRadius: false, pivotGrid: getLightPivotChartGridConfig(), annotation: getLightAnnotation(), } diff --git a/packages/vseed/src/theme/light/dualAxis.ts b/packages/vseed/src/theme/light/dualAxis.ts index 216c8b60b2..706aabdf9b 100644 --- a/packages/vseed/src/theme/light/dualAxis.ts +++ b/packages/vseed/src/theme/light/dualAxis.ts @@ -26,6 +26,8 @@ export const getDualAxisTheme = () => { return { ...baseConfig, + cornerRadius: 0, + stackCornerRadius: false, xAxis: bandAxis, primaryYAxis: linearAxis, secondaryYAxis: { ...linearAxis, grid: { visible: false } }, diff --git a/packages/vseed/src/theme/light/histogram.ts b/packages/vseed/src/theme/light/histogram.ts index 900622d260..2f56f446cf 100644 --- a/packages/vseed/src/theme/light/histogram.ts +++ b/packages/vseed/src/theme/light/histogram.ts @@ -26,6 +26,8 @@ export const getHistogramTheme = () => { return { ...baseConfig, + cornerRadius: 0, + stackCornerRadius: false, xAxis: linearAxis, yAxis: linearAxis, crosshairRect, diff --git a/packages/vseed/src/theme/light/race.ts b/packages/vseed/src/theme/light/race.ts index e4b8779e73..9f571318e8 100644 --- a/packages/vseed/src/theme/light/race.ts +++ b/packages/vseed/src/theme/light/race.ts @@ -62,7 +62,8 @@ export const getRaceBarTheme = () => { crosshairRect, player, - stackCornerRadius: [0, 4, 4, 0], + cornerRadius: 0, + stackCornerRadius: false, pivotGrid: getLightPivotChartGridConfig(), annotation: getLightAnnotation(), } @@ -107,7 +108,8 @@ export const getRaceColumnTheme = () => { crosshairRect, player, - stackCornerRadius: [4, 4, 0, 0], + cornerRadius: 0, + stackCornerRadius: false, pivotGrid: getLightPivotChartGridConfig(), annotation: getLightAnnotation(), diff --git a/packages/vseed/src/theme/tokenTheme.ts b/packages/vseed/src/theme/tokenTheme.ts index 41a4057437..ae9b8eb7d9 100644 --- a/packages/vseed/src/theme/tokenTheme.ts +++ b/packages/vseed/src/theme/tokenTheme.ts @@ -329,7 +329,7 @@ const withAxesAndExtras = ( export const createTokenThemeConfig = (tokens: TokenThemeDefinition): CustomThemeConfig => { const baseTheme = tokens.baseTheme === 'dark' ? darkTheme() : lightTheme() const baseConfig = (baseTheme.config || {}) as ThemeConfigMap - const nextConfig = {} as ThemeConfigMap + const nextConfig: Partial> = {} for (const chartType of Object.keys(baseConfig) as ThemeConfigKey[]) { const chartConfig = baseConfig[chartType] diff --git a/packages/vseed/src/types/chartType/bar/bar.ts b/packages/vseed/src/types/chartType/bar/bar.ts index 9408f38ece..8784de2495 100644 --- a/packages/vseed/src/types/chartType/bar/bar.ts +++ b/packages/vseed/src/types/chartType/bar/bar.ts @@ -24,6 +24,7 @@ import { type Dataset, type Label, type Legend, + type CornerRadius, type StackCornerRadius, type Theme, type Tooltip, @@ -149,7 +150,16 @@ export interface Bar { crosshairRect?: CrosshairRect /** - * @description 条形图 堆叠圆角 + * @description 柱图圆角的数值或数组，默认 0，不启用圆角。当 stackCornerRadius 为 false 时，每个图元独立绘制圆角；为 true 时，通过 clip 裁剪整组堆叠柱体。数值设置所有角，数组按左上、右上、右下、左下排列，数据为负值时圆角方向自动翻转。设为 0 可关闭。barStyle.barRadius 可覆盖单个图元的圆角；stackCornerRadius 为 true 时，整组圆角统一使用 cornerRadius，不受 barStyle.barRadius 影响。 + * @default 0 + * @example [4, 4, 0, 0] + */ + cornerRadius?: CornerRadius + + /** + * @description 是否使用整组堆叠圆角，默认 false。设为 true 时，通过 clip 裁剪整组柱体，圆角值统一读取 cornerRadius，保留堆叠内部的直角连接，并优先于 barStyle.barRadius（包括条件样式）。设为 false 时，cornerRadius 对每个图元单独生效。注意：开启 stackCornerRadius 会引起更新动画重叠的 bug，整组 clip 裁剪路径与图元更新动画不同步，依赖 VChart 修复；需要平滑更新动画时建议保持 false。 + * @default false + * @example true */ stackCornerRadius?: StackCornerRadius /** diff --git a/packages/vseed/src/types/chartType/bar/zBar.ts b/packages/vseed/src/types/chartType/bar/zBar.ts index d51152bd9a..31f159f07d 100644 --- a/packages/vseed/src/types/chartType/bar/zBar.ts +++ b/packages/vseed/src/types/chartType/bar/zBar.ts @@ -18,6 +18,7 @@ import { zLegend, zMeasures, zRegionPadding, + zCornerRadius, zStackCornerRadius, zTheme, zTooltip, @@ -49,6 +50,7 @@ export const zBar = z.object({ xAxis: zXLinearAxis.nullish(), yAxis: zYBandAxis.nullish(), crosshairRect: zCrosshairRect.nullish(), + cornerRadius: zCornerRadius.nullish(), stackCornerRadius: zStackCornerRadius.nullish(), barMaxWidth: zBarMaxWidth.nullish(), theme: zTheme.nullish(), diff --git a/packages/vseed/src/types/chartType/barParallel/barParallel.ts b/packages/vseed/src/types/chartType/barParallel/barParallel.ts index 76531eed39..560ca4a599 100644 --- a/packages/vseed/src/types/chartType/barParallel/barParallel.ts +++ b/packages/vseed/src/types/chartType/barParallel/barParallel.ts @@ -14,6 +14,7 @@ import type { Dataset, Label, Legend, + CornerRadius, StackCornerRadius, Theme, Tooltip, @@ -146,8 +147,16 @@ export interface BarParallel { crosshairRect?: CrosshairRect /** - * @description 条形图 堆叠圆角 - * @default 8 + * @description 柱图圆角的数值或数组，默认 0，不启用圆角。当 stackCornerRadius 为 false 时，每个图元独立绘制圆角；为 true 时，通过 clip 裁剪整组堆叠柱体。数值设置所有角，数组按左上、右上、右下、左下排列，数据为负值时圆角方向自动翻转。设为 0 可关闭。barStyle.barRadius 可覆盖单个图元的圆角；stackCornerRadius 为 true 时，整组圆角统一使用 cornerRadius，不受 barStyle.barRadius 影响。 + * @default 0 + * @example [4, 4, 0, 0] + */ + cornerRadius?: CornerRadius + + /** + * @description 是否使用整组堆叠圆角，默认 false。设为 true 时，通过 clip 裁剪整组柱体，圆角值统一读取 cornerRadius，保留堆叠内部的直角连接，并优先于 barStyle.barRadius（包括条件样式）。设为 false 时，cornerRadius 对每个图元单独生效。注意：开启 stackCornerRadius 会引起更新动画重叠的 bug，整组 clip 裁剪路径与图元更新动画不同步，依赖 VChart 修复；需要平滑更新动画时建议保持 false。 + * @default false + * @example true */ stackCornerRadius?: StackCornerRadius /** diff --git a/packages/vseed/src/types/chartType/barParallel/zBarParallel.ts b/packages/vseed/src/types/chartType/barParallel/zBarParallel.ts index c4f51ca154..0c1e597b7a 100644 --- a/packages/vseed/src/types/chartType/barParallel/zBarParallel.ts +++ b/packages/vseed/src/types/chartType/barParallel/zBarParallel.ts @@ -20,6 +20,7 @@ import { zLegend, zMeasures, zRegionPadding, + zCornerRadius, zStackCornerRadius, zTheme, zTooltip, @@ -47,6 +48,7 @@ export const zBarParallel = z.object({ xAxis: zXLinearAxis.nullish(), yAxis: zYBandAxis.nullish(), crosshairRect: zCrosshairRect.nullish(), + cornerRadius: zCornerRadius.nullish(), stackCornerRadius: zStackCornerRadius.nullish(), barMaxWidth: zBarMaxWidth.nullish(), barGapInGroup: zBarGapInGroup.nullish(), diff --git a/packages/vseed/src/types/chartType/barPercent/barPercent.ts b/packages/vseed/src/types/chartType/barPercent/barPercent.ts index 94f2e9bddc..6cc806de78 100644 --- a/packages/vseed/src/types/chartType/barPercent/barPercent.ts +++ b/packages/vseed/src/types/chartType/barPercent/barPercent.ts @@ -13,6 +13,7 @@ import type { Dataset, Label, Legend, + CornerRadius, StackCornerRadius, Theme, Tooltip, @@ -146,8 +147,16 @@ export interface BarPercent { crosshairRect?: CrosshairRect /** - * @description 条形图 堆叠圆角 - * @default 8 + * @description 柱图圆角的数值或数组，默认 0，不启用圆角。当 stackCornerRadius 为 false 时，每个图元独立绘制圆角；为 true 时，通过 clip 裁剪整组堆叠柱体。数值设置所有角，数组按左上、右上、右下、左下排列，数据为负值时圆角方向自动翻转。设为 0 可关闭。barStyle.barRadius 可覆盖单个图元的圆角；stackCornerRadius 为 true 时，整组圆角统一使用 cornerRadius，不受 barStyle.barRadius 影响。 + * @default 0 + * @example [4, 4, 0, 0] + */ + cornerRadius?: CornerRadius + + /** + * @description 是否使用整组堆叠圆角，默认 false。设为 true 时，通过 clip 裁剪整组柱体，圆角值统一读取 cornerRadius，保留堆叠内部的直角连接，并优先于 barStyle.barRadius（包括条件样式）。设为 false 时，cornerRadius 对每个图元单独生效。注意：开启 stackCornerRadius 会引起更新动画重叠的 bug，整组 clip 裁剪路径与图元更新动画不同步，依赖 VChart 修复；需要平滑更新动画时建议保持 false。 + * @default false + * @example true */ stackCornerRadius?: StackCornerRadius /** diff --git a/packages/vseed/src/types/chartType/barPercent/zBarPercent.ts b/packages/vseed/src/types/chartType/barPercent/zBarPercent.ts index 53e67f6d97..91b41a18cc 100644 --- a/packages/vseed/src/types/chartType/barPercent/zBarPercent.ts +++ b/packages/vseed/src/types/chartType/barPercent/zBarPercent.ts @@ -18,6 +18,7 @@ import { zLegend, zMeasures, zRegionPadding, + zCornerRadius, zStackCornerRadius, zTheme, zTooltip, @@ -47,6 +48,7 @@ export const zBarPercent = z.object({ xAxis: zXLinearAxis.nullish(), yAxis: zYBandAxis.nullish(), crosshairRect: zCrosshairRect.nullish(), + cornerRadius: zCornerRadius.nullish(), stackCornerRadius: zStackCornerRadius.nullish(), barMaxWidth: zBarMaxWidth.nullish(), theme: zTheme.nullish(), diff --git a/packages/vseed/src/types/chartType/column/column.ts b/packages/vseed/src/types/chartType/column/column.ts index 9c2784be14..2bc85a9fd4 100644 --- a/packages/vseed/src/types/chartType/column/column.ts +++ b/packages/vseed/src/types/chartType/column/column.ts @@ -13,6 +13,7 @@ import type { Dataset, Label, Legend, + CornerRadius, StackCornerRadius, Theme, Tooltip, @@ -179,8 +180,16 @@ export interface Column { crosshairRect?: CrosshairRect /** - * @description 柱状图 堆叠圆角 - * @default 8 + * @description 柱图圆角的数值或数组，默认 0，不启用圆角。当 stackCornerRadius 为 false 时，每个图元独立绘制圆角；为 true 时，通过 clip 裁剪整组堆叠柱体。数值设置所有角，数组按左上、右上、右下、左下排列，数据为负值时圆角方向自动翻转。设为 0 可关闭。barStyle.barRadius 可覆盖单个图元的圆角；stackCornerRadius 为 true 时，整组圆角统一使用 cornerRadius，不受 barStyle.barRadius 影响。 + * @default 0 + * @example [4, 4, 0, 0] + */ + cornerRadius?: CornerRadius + + /** + * @description 是否使用整组堆叠圆角，默认 false。设为 true 时，通过 clip 裁剪整组柱体，圆角值统一读取 cornerRadius，保留堆叠内部的直角连接，并优先于 barStyle.barRadius（包括条件样式）。设为 false 时，cornerRadius 对每个图元单独生效。注意：开启 stackCornerRadius 会引起更新动画重叠的 bug，整组 clip 裁剪路径与图元更新动画不同步，依赖 VChart 修复；需要平滑更新动画时建议保持 false。 + * @default false + * @example true */ stackCornerRadius?: StackCornerRadius /** diff --git a/packages/vseed/src/types/chartType/column/zColumn.ts b/packages/vseed/src/types/chartType/column/zColumn.ts index 64e34e1bcf..469a28e6bb 100644 --- a/packages/vseed/src/types/chartType/column/zColumn.ts +++ b/packages/vseed/src/types/chartType/column/zColumn.ts @@ -22,6 +22,7 @@ import { zRegionPadding, zSort, zSortLegend, + zCornerRadius, zStackCornerRadius, zTheme, zTooltip, @@ -55,6 +56,7 @@ export const zColumn = z.object({ sort: zSort.nullish(), sortLegent: zSortLegend.nullish(), crosshairRect: zCrosshairRect.nullish(), + cornerRadius: zCornerRadius.nullish(), stackCornerRadius: zStackCornerRadius.nullish(), barMaxWidth: zBarMaxWidth.nullish(), theme: zTheme.nullish(), diff --git a/packages/vseed/src/types/chartType/columnParallel/columnParallel.ts b/packages/vseed/src/types/chartType/columnParallel/columnParallel.ts index 9763aafc50..46592e3cb4 100644 --- a/packages/vseed/src/types/chartType/columnParallel/columnParallel.ts +++ b/packages/vseed/src/types/chartType/columnParallel/columnParallel.ts @@ -13,6 +13,7 @@ import type { Dataset, Label, Legend, + CornerRadius, StackCornerRadius, Theme, Tooltip, @@ -144,8 +145,16 @@ export interface ColumnParallel { crosshairRect?: CrosshairRect /** - * @description 柱状图 堆叠圆角 - * @default 8 + * @description 柱图圆角的数值或数组，默认 0，不启用圆角。当 stackCornerRadius 为 false 时，每个图元独立绘制圆角；为 true 时，通过 clip 裁剪整组堆叠柱体。数值设置所有角，数组按左上、右上、右下、左下排列，数据为负值时圆角方向自动翻转。设为 0 可关闭。barStyle.barRadius 可覆盖单个图元的圆角；stackCornerRadius 为 true 时，整组圆角统一使用 cornerRadius，不受 barStyle.barRadius 影响。 + * @default 0 + * @example [4, 4, 0, 0] + */ + cornerRadius?: CornerRadius + + /** + * @description 是否使用整组堆叠圆角，默认 false。设为 true 时，通过 clip 裁剪整组柱体，圆角值统一读取 cornerRadius，保留堆叠内部的直角连接，并优先于 barStyle.barRadius（包括条件样式）。设为 false 时，cornerRadius 对每个图元单独生效。注意：开启 stackCornerRadius 会引起更新动画重叠的 bug，整组 clip 裁剪路径与图元更新动画不同步，依赖 VChart 修复；需要平滑更新动画时建议保持 false。 + * @default false + * @example true */ stackCornerRadius?: StackCornerRadius /** diff --git a/packages/vseed/src/types/chartType/columnParallel/zColumnParallel.ts b/packages/vseed/src/types/chartType/columnParallel/zColumnParallel.ts index 956ed537c6..2013536c3f 100644 --- a/packages/vseed/src/types/chartType/columnParallel/zColumnParallel.ts +++ b/packages/vseed/src/types/chartType/columnParallel/zColumnParallel.ts @@ -20,6 +20,7 @@ import { zLegend, zMeasures, zRegionPadding, + zCornerRadius, zStackCornerRadius, zTheme, zTooltip, @@ -51,6 +52,7 @@ export const zColumnParallel = z.object({ xAxis: zXBandAxis.nullish(), yAxis: zYLinearAxis.nullish(), crosshairRect: zCrosshairRect.nullish(), + cornerRadius: zCornerRadius.nullish(), stackCornerRadius: zStackCornerRadius.nullish(), barMaxWidth: zBarMaxWidth.nullish(), barGapInGroup: zBarGapInGroup.nullish(), diff --git a/packages/vseed/src/types/chartType/columnPercent/columnPercent.ts b/packages/vseed/src/types/chartType/columnPercent/columnPercent.ts index a5fd7dbfbe..919e21846f 100644 --- a/packages/vseed/src/types/chartType/columnPercent/columnPercent.ts +++ b/packages/vseed/src/types/chartType/columnPercent/columnPercent.ts @@ -12,6 +12,7 @@ import type { Dataset, Label, Legend, + CornerRadius, StackCornerRadius, Theme, Tooltip, @@ -146,7 +147,16 @@ export interface ColumnPercent { crosshairRect?: CrosshairRect /** - * @description 并列柱状图 堆叠圆角 + * @description 柱图圆角的数值或数组，默认 0，不启用圆角。当 stackCornerRadius 为 false 时，每个图元独立绘制圆角；为 true 时，通过 clip 裁剪整组堆叠柱体。数值设置所有角，数组按左上、右上、右下、左下排列，数据为负值时圆角方向自动翻转。设为 0 可关闭。barStyle.barRadius 可覆盖单个图元的圆角；stackCornerRadius 为 true 时，整组圆角统一使用 cornerRadius，不受 barStyle.barRadius 影响。 + * @default 0 + * @example [4, 4, 0, 0] + */ + cornerRadius?: CornerRadius + + /** + * @description 是否使用整组堆叠圆角，默认 false。设为 true 时，通过 clip 裁剪整组柱体，圆角值统一读取 cornerRadius，保留堆叠内部的直角连接，并优先于 barStyle.barRadius（包括条件样式）。设为 false 时，cornerRadius 对每个图元单独生效。注意：开启 stackCornerRadius 会引起更新动画重叠的 bug，整组 clip 裁剪路径与图元更新动画不同步，依赖 VChart 修复；需要平滑更新动画时建议保持 false。 + * @default false + * @example true */ stackCornerRadius?: StackCornerRadius /** diff --git a/packages/vseed/src/types/chartType/columnPercent/zColumnPercent.ts b/packages/vseed/src/types/chartType/columnPercent/zColumnPercent.ts index d1636a1c80..12cbd6853d 100644 --- a/packages/vseed/src/types/chartType/columnPercent/zColumnPercent.ts +++ b/packages/vseed/src/types/chartType/columnPercent/zColumnPercent.ts @@ -17,6 +17,7 @@ import { zLegend, zMeasures, zRegionPadding, + zCornerRadius, zStackCornerRadius, zTheme, zTooltip, @@ -48,6 +49,7 @@ export const zColumnPercent = z.object({ xAxis: zXBandAxis.nullish(), yAxis: zYLinearAxis.nullish(), crosshairRect: zCrosshairRect.nullish(), + cornerRadius: zCornerRadius.nullish(), stackCornerRadius: zStackCornerRadius.nullish(), barMaxWidth: zBarMaxWidth.nullish(), theme: zTheme.nullish(), diff --git a/packages/vseed/src/types/chartType/dualAxis/dualAxis.ts b/packages/vseed/src/types/chartType/dualAxis/dualAxis.ts index 0f1db5465f..4dc910cca2 100644 --- a/packages/vseed/src/types/chartType/dualAxis/dualAxis.ts +++ b/packages/vseed/src/types/chartType/dualAxis/dualAxis.ts @@ -12,6 +12,8 @@ import type { BarStyle, Color, CrosshairRect, + CornerRadius, + StackCornerRadius, Dataset, DimensionLinkage, DualAxisDimension, @@ -149,6 +151,20 @@ export interface DualAxis { */ crosshairRect?: CrosshairRect + /** + * @description 柱图圆角的数值或数组，默认 0，不启用圆角。当 stackCornerRadius 为 false 时，每个图元独立绘制圆角；为 true 时，通过 clip 裁剪整组堆叠柱体。数值设置所有角，数组按左上、右上、右下、左下排列，数据为负值时圆角方向自动翻转。设为 0 可关闭。barStyle.barRadius 可覆盖单个图元的圆角；stackCornerRadius 为 true 时，整组圆角统一使用 cornerRadius，不受 barStyle.barRadius 影响。 + * @default 0 + * @example [4, 4, 0, 0] + */ + cornerRadius?: CornerRadius + + /** + * @description 是否使用整组堆叠圆角，默认 false。设为 true 时，通过 clip 裁剪整组柱体，圆角值统一读取 cornerRadius，保留堆叠内部的直角连接，并优先于 barStyle.barRadius（包括条件样式）。设为 false 时，cornerRadius 对每个图元单独生效。注意：开启 stackCornerRadius 会引起更新动画重叠的 bug，整组 clip 裁剪路径与图元更新动画不同步，依赖 VChart 修复；需要平滑更新动画时建议保持 false。 + * @default false + * @example true + */ + stackCornerRadius?: StackCornerRadius + /** * @description X轴排序配置, 支持根据维度或指标排序, 以及自定义排序顺序 * @example diff --git a/packages/vseed/src/types/chartType/dualAxis/zDualAxis.ts b/packages/vseed/src/types/chartType/dualAxis/zDualAxis.ts index 800483fa40..1f74652e78 100644 --- a/packages/vseed/src/types/chartType/dualAxis/zDualAxis.ts +++ b/packages/vseed/src/types/chartType/dualAxis/zDualAxis.ts @@ -12,6 +12,8 @@ import { zBarStyle, zColor, zCrosshairRect, + zCornerRadius, + zStackCornerRadius, zDataset, zDimensionLinkage, zDimensions, @@ -51,6 +53,8 @@ export const zDualAxis = z.object({ brush: zBrush.nullish(), crosshairRect: zCrosshairRect.nullish(), + cornerRadius: zCornerRadius.nullish(), + stackCornerRadius: zStackCornerRadius.nullish(), sort: zSort.nullish(), sortLegend: zSortLegend.nullish(), theme: zTheme.nullish(), diff --git a/packages/vseed/src/types/chartType/histogram/histogram.ts b/packages/vseed/src/types/chartType/histogram/histogram.ts index 50bd64aeba..7e6a8fc9b9 100644 --- a/packages/vseed/src/types/chartType/histogram/histogram.ts +++ b/packages/vseed/src/types/chartType/histogram/histogram.ts @@ -14,6 +14,7 @@ import type { Label, Legend, Page, + CornerRadius, StackCornerRadius, Theme, Tooltip, @@ -111,8 +112,16 @@ export interface Histogram { crosshairRect?: CrosshairRect /** - * @description 柱状图 堆叠圆角 - * @default 8 + * @description 柱图圆角的数值或数组，默认 0，不启用圆角。当 stackCornerRadius 为 false 时，每个图元独立绘制圆角；为 true 时，通过 clip 裁剪整组堆叠柱体。数值设置所有角，数组按左上、右上、右下、左下排列，数据为负值时圆角方向自动翻转。设为 0 可关闭。barStyle.barRadius 可覆盖单个图元的圆角；stackCornerRadius 为 true 时，整组圆角统一使用 cornerRadius，不受 barStyle.barRadius 影响。 + * @default 0 + * @example [4, 4, 0, 0] + */ + cornerRadius?: CornerRadius + + /** + * @description 是否使用整组堆叠圆角，默认 false。设为 true 时，通过 clip 裁剪整组柱体，圆角值统一读取 cornerRadius，保留堆叠内部的直角连接，并优先于 barStyle.barRadius（包括条件样式）。设为 false 时，cornerRadius 对每个图元单独生效。注意：开启 stackCornerRadius 会引起更新动画重叠的 bug，整组 clip 裁剪路径与图元更新动画不同步，依赖 VChart 修复；需要平滑更新动画时建议保持 false。 + * @default false + * @example true */ stackCornerRadius?: StackCornerRadius diff --git a/packages/vseed/src/types/chartType/histogram/zHistogram.ts b/packages/vseed/src/types/chartType/histogram/zHistogram.ts index 30476c91cf..19b7dde674 100644 --- a/packages/vseed/src/types/chartType/histogram/zHistogram.ts +++ b/packages/vseed/src/types/chartType/histogram/zHistogram.ts @@ -9,6 +9,8 @@ import { zBarStyle, zColor, zCrosshairRect, + zCornerRadius, + zStackCornerRadius, zDataset, zDimensionLinkage, zDimensions, @@ -43,6 +45,8 @@ export const zHistogram = z.object({ xAxis: zXLinearAxis.nullish(), yAxis: zYLinearAxis.nullish(), crosshairRect: zCrosshairRect.nullish(), + cornerRadius: zCornerRadius.nullish(), + stackCornerRadius: zStackCornerRadius.nullish(), binCount: z.number().positive().nullish(), binStep: z.number().positive().nullish(), binValueType: z.literal('count').or(z.literal('percentage')).nullish(), diff --git a/packages/vseed/src/types/chartType/raceBar/raceBar.ts b/packages/vseed/src/types/chartType/raceBar/raceBar.ts index 828e486cde..eb70366887 100644 --- a/packages/vseed/src/types/chartType/raceBar/raceBar.ts +++ b/packages/vseed/src/types/chartType/raceBar/raceBar.ts @@ -19,6 +19,7 @@ import type { Dataset, Label, Legend, + CornerRadius, StackCornerRadius, Theme, Tooltip, @@ -115,7 +116,16 @@ export interface RaceBar { crosshairRect?: CrosshairRect /** - * @description 堆叠圆角 + * @description 柱图圆角的数值或数组，默认 0，不启用圆角。当 stackCornerRadius 为 false 时，每个图元独立绘制圆角；为 true 时，通过 clip 裁剪整组堆叠柱体。数值设置所有角，数组按左上、右上、右下、左下排列，数据为负值时圆角方向自动翻转。设为 0 可关闭。barStyle.barRadius 可覆盖单个图元的圆角；stackCornerRadius 为 true 时，整组圆角统一使用 cornerRadius，不受 barStyle.barRadius 影响。 + * @default 0 + * @example [4, 4, 0, 0] + */ + cornerRadius?: CornerRadius + + /** + * @description 是否使用整组堆叠圆角，默认 false。设为 true 时，通过 clip 裁剪整组柱体，圆角值统一读取 cornerRadius，保留堆叠内部的直角连接，并优先于 barStyle.barRadius（包括条件样式）。设为 false 时，cornerRadius 对每个图元单独生效。注意：开启 stackCornerRadius 会引起更新动画重叠的 bug，整组 clip 裁剪路径与图元更新动画不同步，依赖 VChart 修复；需要平滑更新动画时建议保持 false。 + * @default false + * @example true */ stackCornerRadius?: StackCornerRadius diff --git a/packages/vseed/src/types/chartType/raceBar/zRaceBar.ts b/packages/vseed/src/types/chartType/raceBar/zRaceBar.ts index 3da7dc7e9c..45d90e8a3b 100644 --- a/packages/vseed/src/types/chartType/raceBar/zRaceBar.ts +++ b/packages/vseed/src/types/chartType/raceBar/zRaceBar.ts @@ -16,6 +16,7 @@ import { zLabel, zLegend, zMeasures, + zCornerRadius, zStackCornerRadius, zTheme, zTooltip, @@ -49,6 +50,7 @@ export const zRaceBar = z.object({ xAxis: zXLinearAxis.nullish(), yAxis: zYBandAxis.nullish(), crosshairRect: zCrosshairRect.nullish(), + cornerRadius: zCornerRadius.nullish(), stackCornerRadius: zStackCornerRadius.nullish(), barMaxWidth: zBarMaxWidth.nullish(), sortLegend: zSortLegend.nullish(), diff --git a/packages/vseed/src/types/chartType/raceColumn/raceColumn.ts b/packages/vseed/src/types/chartType/raceColumn/raceColumn.ts index 6c78e62b78..e189fa8bbd 100644 --- a/packages/vseed/src/types/chartType/raceColumn/raceColumn.ts +++ b/packages/vseed/src/types/chartType/raceColumn/raceColumn.ts @@ -18,6 +18,7 @@ import type { Dataset, Label, Legend, + CornerRadius, StackCornerRadius, Theme, Tooltip, @@ -129,7 +130,16 @@ export interface RaceColumn { crosshairRect?: CrosshairRect /** - * @description 堆叠圆角配置 + * @description 柱图圆角的数值或数组，默认 0，不启用圆角。当 stackCornerRadius 为 false 时，每个图元独立绘制圆角；为 true 时，通过 clip 裁剪整组堆叠柱体。数值设置所有角，数组按左上、右上、右下、左下排列，数据为负值时圆角方向自动翻转。设为 0 可关闭。barStyle.barRadius 可覆盖单个图元的圆角；stackCornerRadius 为 true 时，整组圆角统一使用 cornerRadius，不受 barStyle.barRadius 影响。 + * @default 0 + * @example [4, 4, 0, 0] + */ + cornerRadius?: CornerRadius + + /** + * @description 是否使用整组堆叠圆角，默认 false。设为 true 时，通过 clip 裁剪整组柱体，圆角值统一读取 cornerRadius，保留堆叠内部的直角连接，并优先于 barStyle.barRadius（包括条件样式）。设为 false 时，cornerRadius 对每个图元单独生效。注意：开启 stackCornerRadius 会引起更新动画重叠的 bug，整组 clip 裁剪路径与图元更新动画不同步，依赖 VChart 修复；需要平滑更新动画时建议保持 false。 + * @default false + * @example true */ stackCornerRadius?: StackCornerRadius diff --git a/packages/vseed/src/types/chartType/raceColumn/zRaceColumn.ts b/packages/vseed/src/types/chartType/raceColumn/zRaceColumn.ts index 735a0d406a..c3afe58e72 100644 --- a/packages/vseed/src/types/chartType/raceColumn/zRaceColumn.ts +++ b/packages/vseed/src/types/chartType/raceColumn/zRaceColumn.ts @@ -16,6 +16,7 @@ import { zLabel, zLegend, zMeasures, + zCornerRadius, zStackCornerRadius, zTheme, zTooltip, @@ -49,6 +50,7 @@ export const zRaceColumn = z.object({ xAxis: zYBandAxis.nullish(), yAxis: zXLinearAxis.nullish(), crosshairRect: zCrosshairRect.nullish(), + cornerRadius: zCornerRadius.nullish(), stackCornerRadius: zStackCornerRadius.nullish(), barMaxWidth: zBarMaxWidth.nullish(), sortLegend: zSortLegend.nullish(), diff --git a/packages/vseed/src/types/properties/config/bar.ts b/packages/vseed/src/types/properties/config/bar.ts index 4085c29e69..584d391d6f 100644 --- a/packages/vseed/src/types/properties/config/bar.ts +++ b/packages/vseed/src/types/properties/config/bar.ts @@ -1,6 +1,7 @@ import { z } from 'zod' import { zYBandAxis, zXLinearAxis } from './axes' import { zCrosshairRect } from './crosshair' +import { zCornerRadius } from './cornerRadius' import { zStackCornerRadius } from './stackCornerRadius/stackCornerRadius' import { zBackgroundColor } from './backgroundColor/backgroundColor' import { zColor } from './color/color' @@ -26,6 +27,7 @@ export const zBarConfig = z.object({ xAxis: zXLinearAxis.nullish(), yAxis: zYBandAxis.nullish(), crosshairRect: zCrosshairRect.nullish(), + cornerRadius: zCornerRadius.nullish(), stackCornerRadius: zStackCornerRadius.nullish(), pivotGrid: zPivotChartGridConfig.nullish(), annotation: zAnnotationConfig.nullish(), diff --git a/packages/vseed/src/types/properties/config/column.ts b/packages/vseed/src/types/properties/config/column.ts index 68876244fc..af0dd70f28 100644 --- a/packages/vseed/src/types/properties/config/column.ts +++ b/packages/vseed/src/types/properties/config/column.ts @@ -1,6 +1,7 @@ import { z } from 'zod' import { zXBandAxis, zYLinearAxis } from './axes' import { zCrosshairRect } from './crosshair' +import { zCornerRadius } from './cornerRadius' import { zStackCornerRadius } from './stackCornerRadius/stackCornerRadius' import { zBackgroundColor } from './backgroundColor/backgroundColor' import { zColor } from './color/color' @@ -28,6 +29,7 @@ export const zColumnParallelConfig = z.object({ xAxis: zXBandAxis.nullish(), yAxis: zYLinearAxis.nullish(), crosshairRect: zCrosshairRect.nullish(), + cornerRadius: zCornerRadius.nullish(), stackCornerRadius: zStackCornerRadius.nullish(), barMaxWidth: zBarMaxWidth.nullish(), barGapInGroup: zBarGapInGroup.nullish(), diff --git a/packages/vseed/src/types/properties/config/cornerRadius/cornerRadius.ts b/packages/vseed/src/types/properties/config/cornerRadius/cornerRadius.ts new file mode 100644 index 0000000000..347a25a406 --- /dev/null +++ b/packages/vseed/src/types/properties/config/cornerRadius/cornerRadius.ts @@ -0,0 +1,4 @@ +import { z } from 'zod' + +export const zCornerRadius = z.number().or(z.array(z.number())) +export type CornerRadius = z.infer diff --git a/packages/vseed/src/types/properties/config/cornerRadius/index.ts b/packages/vseed/src/types/properties/config/cornerRadius/index.ts new file mode 100644 index 0000000000..d6513f9a88 --- /dev/null +++ b/packages/vseed/src/types/properties/config/cornerRadius/index.ts @@ -0,0 +1 @@ +export * from './cornerRadius' diff --git a/packages/vseed/src/types/properties/config/dualAxis.ts b/packages/vseed/src/types/properties/config/dualAxis.ts index 9265270c53..9347699cfa 100644 --- a/packages/vseed/src/types/properties/config/dualAxis.ts +++ b/packages/vseed/src/types/properties/config/dualAxis.ts @@ -1,5 +1,7 @@ import { z } from 'zod' import { zXBandAxis, zYLinearAxis } from './axes' +import { zCornerRadius } from './cornerRadius' +import { zStackCornerRadius } from './stackCornerRadius' import { zCrosshairRect } from './crosshair' import { zBackgroundColor } from './backgroundColor/backgroundColor' import { zColor } from './color/color' @@ -25,6 +27,8 @@ export const zDualAxisConfig = z.object({ xAxis: zXBandAxis.nullish(), crosshairRect: zCrosshairRect.nullish(), + cornerRadius: zCornerRadius.nullish(), + stackCornerRadius: zStackCornerRadius.nullish(), pivotGrid: zPivotChartGridConfig.nullish(), annotation: zAnnotationConfig.nullish(), diff --git a/packages/vseed/src/types/properties/config/histogram.ts b/packages/vseed/src/types/properties/config/histogram.ts index 0f959a0a01..32948c7c29 100644 --- a/packages/vseed/src/types/properties/config/histogram.ts +++ b/packages/vseed/src/types/properties/config/histogram.ts @@ -1,6 +1,7 @@ import { z } from 'zod' import { zXBandAxis, zYLinearAxis } from './axes' import { zCrosshairRect } from './crosshair' +import { zCornerRadius } from './cornerRadius' import { zStackCornerRadius } from './stackCornerRadius/stackCornerRadius' import { zBackgroundColor } from './backgroundColor/backgroundColor' import { zColor } from './color/color' @@ -24,6 +25,7 @@ export const zHistogramConfig = z.object({ xAxis: zXBandAxis.nullish(), yAxis: zYLinearAxis.nullish(), crosshairRect: zCrosshairRect.nullish(), + cornerRadius: zCornerRadius.nullish(), stackCornerRadius: zStackCornerRadius.nullish(), pivotGrid: zPivotChartGridConfig.nullish(), annotation: zAnnotationConfig.nullish(), diff --git a/packages/vseed/src/types/properties/config/index.ts b/packages/vseed/src/types/properties/config/index.ts index 349624dabe..c61403643a 100644 --- a/packages/vseed/src/types/properties/config/index.ts +++ b/packages/vseed/src/types/properties/config/index.ts @@ -8,6 +8,7 @@ export * from './funnelTransform' export * from './label' export * from './legend' export * from './pivotGrid' +export * from './cornerRadius' export * from './stackCornerRadius' export * from './barWidth' export * from './tooltip' diff --git a/packages/vseed/src/types/properties/config/stackCornerRadius/stackCornerRadius.ts b/packages/vseed/src/types/properties/config/stackCornerRadius/stackCornerRadius.ts index eb7a6d83c2..7ad1250890 100644 --- a/packages/vseed/src/types/properties/config/stackCornerRadius/stackCornerRadius.ts +++ b/packages/vseed/src/types/properties/config/stackCornerRadius/stackCornerRadius.ts @@ -1,5 +1,4 @@ import { z } from 'zod' -export const zStackCornerRadius = z.number().or(z.array(z.number())).default([3, 3, 0, 0]) - +export const zStackCornerRadius = z.boolean() export type StackCornerRadius = z.infer diff --git a/packages/vseed/tests/examples/features/cornerRadius/per-mark.json b/packages/vseed/tests/examples/features/cornerRadius/per-mark.json new file mode 100644 index 0000000000..c2205ff069 --- /dev/null +++ b/packages/vseed/tests/examples/features/cornerRadius/per-mark.json @@ -0,0 +1,46 @@ +{ + "name": "单个图元圆角", + "description": "圆角默认值为 0，不启用圆角。显式设置 cornerRadius 后，对每个图元单独绘制圆角；默认不启用整组 clip，适合平滑的更新动画。", + "vseed": { + "chartType": "column", + "cornerRadius": [10, 10, 0, 0], + "dataset": [ + { + "category": "A", + "series": "East", + "value": 10 + }, + { + "category": "A", + "series": "West", + "value": 20 + }, + { + "category": "B", + "series": "East", + "value": -10 + }, + { + "category": "B", + "series": "West", + "value": -20 + } + ], + "dimensions": [ + { + "id": "category" + }, + { + "id": "series" + } + ], + "measures": [ + { + "id": "value" + } + ], + "barStyle": { + "barBorderWidth": 0 + } + } +} diff --git a/packages/vseed/tests/examples/features/cornerRadius/stack-group.json b/packages/vseed/tests/examples/features/cornerRadius/stack-group.json new file mode 100644 index 0000000000..164de4c319 --- /dev/null +++ b/packages/vseed/tests/examples/features/cornerRadius/stack-group.json @@ -0,0 +1,47 @@ +{ + "name": "整组堆叠圆角", + "description": "cornerRadius 设置圆角值，stackCornerRadius: true 切换为整组堆叠圆角，通过 clip 裁剪整组，堆叠内部保持直角。开启 stackCornerRadius 会引起更新动画重叠的 bug，依赖 VChart 修复。", + "vseed": { + "chartType": "column", + "cornerRadius": [10, 10, 0, 0], + "stackCornerRadius": true, + "dataset": [ + { + "category": "A", + "series": "East", + "value": 10 + }, + { + "category": "A", + "series": "West", + "value": 20 + }, + { + "category": "B", + "series": "East", + "value": -10 + }, + { + "category": "B", + "series": "West", + "value": -20 + } + ], + "dimensions": [ + { + "id": "category" + }, + { + "id": "series" + } + ], + "measures": [ + { + "id": "value" + } + ], + "barStyle": { + "barBorderWidth": 0 + } + } +} diff --git a/packages/vseed/tests/examples/features/features.test.ts b/packages/vseed/tests/examples/features/features.test.ts index af68b0a0fc..3743c0ca12 100644 --- a/packages/vseed/tests/examples/features/features.test.ts +++ b/packages/vseed/tests/examples/features/features.test.ts @@ -53,77 +53,79 @@ import config_49 from './centerText/empty.json' import config_50 from './centerText/pivot.json' import config_51 from './color/colormapping.json' import config_52 from './color/colorscheme.json' -import config_53 from './dataset/单指标-单维度.json' -import config_54 from './dataset/单指标-多维度.json' -import config_55 from './dataset/单指标-零维度.json' -import config_56 from './dataset/多指标-单维度.json' -import config_57 from './dataset/多指标-多维度.json' -import config_58 from './dataset/多指标-零维度.json' -import config_59 from './dataset/数据维度与指标配置.json' -import config_60 from './dataset/自动选择.json' -import config_61 from './dimensions/列维度.json' -import config_62 from './dimensions/普通维度.json' -import config_63 from './dimensions/行维度.json' -import config_64 from './dimensions/透视维度.json' -import config_65 from './dynamicFilter/annotation-horizontal-line.json' -import config_66 from './dynamicFilter/annotation-point.json' -import config_67 from './dynamicFilter/annotation-vertical-line.json' -import config_68 from './dynamicFilter/area-line-point-style.json' -import config_69 from './dynamicFilter/column-bar-style.json' -import config_70 from './dynamicFilter/pivot-table-cell-style.json' -import config_71 from './dynamicFilter/table-dynamic-cell-style.json' -import config_72 from './formatter/base-dim-formatter-bar.json' -import config_73 from './formatter/base-dim-formatter-dualAxis.json' -import config_74 from './formatter/base-dim-formatter-heatmap.json' -import config_75 from './formatter/base-dim-formatter-pie.json' -import config_76 from './formatter/base-dim-formatter-pivotChart.json' -import config_77 from './formatter/base-dim-formatter-pivotTable.json' -import config_78 from './formatter/base-dim-formatter-radar.json' -import config_79 from './formatter/base-dim-formatter-scatter.json' -import config_80 from './formatter/base-dim-formatter-table.json' -import config_81 from './formatter/base-dim-formatter-treemap.json' -import config_82 from './i18n/en-us.json' -import config_83 from './i18n/zh-cn.json' -import config_84 from './label/enable.json' -import config_85 from './legend/border.json' -import config_86 from './legend/enable.json' -import config_87 from './legend/labelcolor.json' -import config_88 from './legend/labelfontsize.json' -import config_89 from './legend/labelfontweight.json' -import config_90 from './legend/maxsize.json' -import config_91 from './legend/position.json' -import config_92 from './legend/static.json' -import config_93 from './measures/指标组.json' -import config_94 from './numFormat/autoformat.json' -import config_95 from './numFormat/fractiondigits.json' -import config_96 from './numFormat/ratio-&-symbol.json' -import config_97 from './numFormat/roundingmode.json' -import config_98 from './numFormat/roundingpriority.json' -import config_99 from './numFormat/significantdigits.json' -import config_100 from './numFormat/suffix-&-prefix.json' -import config_101 from './numFormat/thousandseparator.json' -import config_102 from './numFormat/type.json' -import config_103 from './pieStyle/compact-donut.json' -import config_104 from './pieStyle/half-pie.json' -import config_105 from './pointStyle/active-point.json' -import config_106 from './pointStyle/dimension-condition.json' -import config_107 from './pointStyle/measure-condition.json' -import config_108 from './pointStyle/partial-datum.json' -import config_109 from './pointStyle/point-array.json' -import config_110 from './pointStyle/value.json' -import config_111 from './polynomial/column-示例.json' -import config_112 from './polynomial/scatter-示例.json' -import config_113 from './sort/图例自身排序.json' -import config_114 from './sort/指标排序-1.json' -import config_115 from './sort/指标排序.json' -import config_116 from './sort/维度排序-1.json' -import config_117 from './sort/维度排序.json' -import config_118 from './sort/自定义排序(图例id).json' -import config_119 from './sort/自定义排序(图例名称).json' -import config_120 from './sort/自定义排序.json' -import config_121 from './totals/columnTotal.json' -import config_122 from './totals/rowTotal.json' -import config_123 from './totals/singleIndicator.json' +import config_53 from './cornerRadius/per-mark.json' +import config_54 from './cornerRadius/stack-group.json' +import config_55 from './dataset/单指标-单维度.json' +import config_56 from './dataset/单指标-多维度.json' +import config_57 from './dataset/单指标-零维度.json' +import config_58 from './dataset/多指标-单维度.json' +import config_59 from './dataset/多指标-多维度.json' +import config_60 from './dataset/多指标-零维度.json' +import config_61 from './dataset/数据维度与指标配置.json' +import config_62 from './dataset/自动选择.json' +import config_63 from './dimensions/列维度.json' +import config_64 from './dimensions/普通维度.json' +import config_65 from './dimensions/行维度.json' +import config_66 from './dimensions/透视维度.json' +import config_67 from './dynamicFilter/annotation-horizontal-line.json' +import config_68 from './dynamicFilter/annotation-point.json' +import config_69 from './dynamicFilter/annotation-vertical-line.json' +import config_70 from './dynamicFilter/area-line-point-style.json' +import config_71 from './dynamicFilter/column-bar-style.json' +import config_72 from './dynamicFilter/pivot-table-cell-style.json' +import config_73 from './dynamicFilter/table-dynamic-cell-style.json' +import config_74 from './formatter/base-dim-formatter-bar.json' +import config_75 from './formatter/base-dim-formatter-dualAxis.json' +import config_76 from './formatter/base-dim-formatter-heatmap.json' +import config_77 from './formatter/base-dim-formatter-pie.json' +import config_78 from './formatter/base-dim-formatter-pivotChart.json' +import config_79 from './formatter/base-dim-formatter-pivotTable.json' +import config_80 from './formatter/base-dim-formatter-radar.json' +import config_81 from './formatter/base-dim-formatter-scatter.json' +import config_82 from './formatter/base-dim-formatter-table.json' +import config_83 from './formatter/base-dim-formatter-treemap.json' +import config_84 from './i18n/en-us.json' +import config_85 from './i18n/zh-cn.json' +import config_86 from './label/enable.json' +import config_87 from './legend/border.json' +import config_88 from './legend/enable.json' +import config_89 from './legend/labelcolor.json' +import config_90 from './legend/labelfontsize.json' +import config_91 from './legend/labelfontweight.json' +import config_92 from './legend/maxsize.json' +import config_93 from './legend/position.json' +import config_94 from './legend/static.json' +import config_95 from './measures/指标组.json' +import config_96 from './numFormat/autoformat.json' +import config_97 from './numFormat/fractiondigits.json' +import config_98 from './numFormat/ratio-&-symbol.json' +import config_99 from './numFormat/roundingmode.json' +import config_100 from './numFormat/roundingpriority.json' +import config_101 from './numFormat/significantdigits.json' +import config_102 from './numFormat/suffix-&-prefix.json' +import config_103 from './numFormat/thousandseparator.json' +import config_104 from './numFormat/type.json' +import config_105 from './pieStyle/compact-donut.json' +import config_106 from './pieStyle/half-pie.json' +import config_107 from './pointStyle/active-point.json' +import config_108 from './pointStyle/dimension-condition.json' +import config_109 from './pointStyle/measure-condition.json' +import config_110 from './pointStyle/partial-datum.json' +import config_111 from './pointStyle/point-array.json' +import config_112 from './pointStyle/value.json' +import config_113 from './polynomial/column-示例.json' +import config_114 from './polynomial/scatter-示例.json' +import config_115 from './sort/图例自身排序.json' +import config_116 from './sort/指标排序-1.json' +import config_117 from './sort/指标排序.json' +import config_118 from './sort/维度排序-1.json' +import config_119 from './sort/维度排序.json' +import config_120 from './sort/自定义排序(图例id).json' +import config_121 from './sort/自定义排序(图例名称).json' +import config_122 from './sort/自定义排序.json' +import config_123 from './totals/columnTotal.json' +import config_124 from './totals/rowTotal.json' +import config_125 from './totals/singleIndicator.json' const cases = [ { name: 'animation/bar-like', vseed: config_0 }, @@ -179,77 +181,79 @@ const cases = [ { name: 'centerText/pivot', vseed: config_50 }, { name: 'color/colormapping', vseed: config_51 }, { name: 'color/colorscheme', vseed: config_52 }, - { name: 'dataset/单指标-单维度', vseed: config_53 }, - { name: 'dataset/单指标-多维度', vseed: config_54 }, - { name: 'dataset/单指标-零维度', vseed: config_55 }, - { name: 'dataset/多指标-单维度', vseed: config_56 }, - { name: 'dataset/多指标-多维度', vseed: config_57 }, - { name: 'dataset/多指标-零维度', vseed: config_58 }, - { name: 'dataset/数据维度与指标配置', vseed: config_59 }, - { name: 'dataset/自动选择', vseed: config_60 }, - { name: 'dimensions/列维度', vseed: config_61 }, - { name: 'dimensions/普通维度', vseed: config_62 }, - { name: 'dimensions/行维度', vseed: config_63 }, - { name: 'dimensions/透视维度', vseed: config_64 }, - { name: 'dynamicFilter/annotation-horizontal-line', vseed: config_65 }, - { name: 'dynamicFilter/annotation-point', vseed: config_66 }, - { name: 'dynamicFilter/annotation-vertical-line', vseed: config_67 }, - { name: 'dynamicFilter/area-line-point-style', vseed: config_68 }, - { name: 'dynamicFilter/column-bar-style', vseed: config_69 }, - { name: 'dynamicFilter/pivot-table-cell-style', vseed: config_70 }, - { name: 'dynamicFilter/table-dynamic-cell-style', vseed: config_71 }, - { name: 'formatter/base-dim-formatter-bar', vseed: config_72 }, - { name: 'formatter/base-dim-formatter-dualAxis', vseed: config_73 }, - { name: 'formatter/base-dim-formatter-heatmap', vseed: config_74 }, - { name: 'formatter/base-dim-formatter-pie', vseed: config_75 }, - { name: 'formatter/base-dim-formatter-pivotChart', vseed: config_76 }, - { name: 'formatter/base-dim-formatter-pivotTable', vseed: config_77 }, - { name: 'formatter/base-dim-formatter-radar', vseed: config_78 }, - { name: 'formatter/base-dim-formatter-scatter', vseed: config_79 }, - { name: 'formatter/base-dim-formatter-table', vseed: config_80 }, - { name: 'formatter/base-dim-formatter-treemap', vseed: config_81 }, - { name: 'i18n/en-us', vseed: config_82 }, - { name: 'i18n/zh-cn', vseed: config_83 }, - { name: 'label/enable', vseed: config_84 }, - { name: 'legend/border', vseed: config_85 }, - { name: 'legend/enable', vseed: config_86 }, - { name: 'legend/labelcolor', vseed: config_87 }, - { name: 'legend/labelfontsize', vseed: config_88 }, - { name: 'legend/labelfontweight', vseed: config_89 }, - { name: 'legend/maxsize', vseed: config_90 }, - { name: 'legend/position', vseed: config_91 }, - { name: 'legend/static', vseed: config_92 }, - { name: 'measures/指标组', vseed: config_93 }, - { name: 'numFormat/autoformat', vseed: config_94 }, - { name: 'numFormat/fractiondigits', vseed: config_95 }, - { name: 'numFormat/ratio-&-symbol', vseed: config_96 }, - { name: 'numFormat/roundingmode', vseed: config_97 }, - { name: 'numFormat/roundingpriority', vseed: config_98 }, - { name: 'numFormat/significantdigits', vseed: config_99 }, - { name: 'numFormat/suffix-&-prefix', vseed: config_100 }, - { name: 'numFormat/thousandseparator', vseed: config_101 }, - { name: 'numFormat/type', vseed: config_102 }, - { name: 'pieStyle/compact-donut', vseed: config_103 }, - { name: 'pieStyle/half-pie', vseed: config_104 }, - { name: 'pointStyle/active-point', vseed: config_105 }, - { name: 'pointStyle/dimension-condition', vseed: config_106 }, - { name: 'pointStyle/measure-condition', vseed: config_107 }, - { name: 'pointStyle/partial-datum', vseed: config_108 }, - { name: 'pointStyle/point-array', vseed: config_109 }, - { name: 'pointStyle/value', vseed: config_110 }, - { name: 'polynomial/column-示例', vseed: config_111 }, - { name: 'polynomial/scatter-示例', vseed: config_112 }, - { name: 'sort/图例自身排序', vseed: config_113 }, - { name: 'sort/指标排序-1', vseed: config_114 }, - { name: 'sort/指标排序', vseed: config_115 }, - { name: 'sort/维度排序-1', vseed: config_116 }, - { name: 'sort/维度排序', vseed: config_117 }, - { name: 'sort/自定义排序(图例id)', vseed: config_118 }, - { name: 'sort/自定义排序(图例名称)', vseed: config_119 }, - { name: 'sort/自定义排序', vseed: config_120 }, - { name: 'totals/columnTotal', vseed: config_121 }, - { name: 'totals/rowTotal', vseed: config_122 }, - { name: 'totals/singleIndicator', vseed: config_123 } + { name: 'cornerRadius/per-mark', vseed: config_53 }, + { name: 'cornerRadius/stack-group', vseed: config_54 }, + { name: 'dataset/单指标-单维度', vseed: config_55 }, + { name: 'dataset/单指标-多维度', vseed: config_56 }, + { name: 'dataset/单指标-零维度', vseed: config_57 }, + { name: 'dataset/多指标-单维度', vseed: config_58 }, + { name: 'dataset/多指标-多维度', vseed: config_59 }, + { name: 'dataset/多指标-零维度', vseed: config_60 }, + { name: 'dataset/数据维度与指标配置', vseed: config_61 }, + { name: 'dataset/自动选择', vseed: config_62 }, + { name: 'dimensions/列维度', vseed: config_63 }, + { name: 'dimensions/普通维度', vseed: config_64 }, + { name: 'dimensions/行维度', vseed: config_65 }, + { name: 'dimensions/透视维度', vseed: config_66 }, + { name: 'dynamicFilter/annotation-horizontal-line', vseed: config_67 }, + { name: 'dynamicFilter/annotation-point', vseed: config_68 }, + { name: 'dynamicFilter/annotation-vertical-line', vseed: config_69 }, + { name: 'dynamicFilter/area-line-point-style', vseed: config_70 }, + { name: 'dynamicFilter/column-bar-style', vseed: config_71 }, + { name: 'dynamicFilter/pivot-table-cell-style', vseed: config_72 }, + { name: 'dynamicFilter/table-dynamic-cell-style', vseed: config_73 }, + { name: 'formatter/base-dim-formatter-bar', vseed: config_74 }, + { name: 'formatter/base-dim-formatter-dualAxis', vseed: config_75 }, + { name: 'formatter/base-dim-formatter-heatmap', vseed: config_76 }, + { name: 'formatter/base-dim-formatter-pie', vseed: config_77 }, + { name: 'formatter/base-dim-formatter-pivotChart', vseed: config_78 }, + { name: 'formatter/base-dim-formatter-pivotTable', vseed: config_79 }, + { name: 'formatter/base-dim-formatter-radar', vseed: config_80 }, + { name: 'formatter/base-dim-formatter-scatter', vseed: config_81 }, + { name: 'formatter/base-dim-formatter-table', vseed: config_82 }, + { name: 'formatter/base-dim-formatter-treemap', vseed: config_83 }, + { name: 'i18n/en-us', vseed: config_84 }, + { name: 'i18n/zh-cn', vseed: config_85 }, + { name: 'label/enable', vseed: config_86 }, + { name: 'legend/border', vseed: config_87 }, + { name: 'legend/enable', vseed: config_88 }, + { name: 'legend/labelcolor', vseed: config_89 }, + { name: 'legend/labelfontsize', vseed: config_90 }, + { name: 'legend/labelfontweight', vseed: config_91 }, + { name: 'legend/maxsize', vseed: config_92 }, + { name: 'legend/position', vseed: config_93 }, + { name: 'legend/static', vseed: config_94 }, + { name: 'measures/指标组', vseed: config_95 }, + { name: 'numFormat/autoformat', vseed: config_96 }, + { name: 'numFormat/fractiondigits', vseed: config_97 }, + { name: 'numFormat/ratio-&-symbol', vseed: config_98 }, + { name: 'numFormat/roundingmode', vseed: config_99 }, + { name: 'numFormat/roundingpriority', vseed: config_100 }, + { name: 'numFormat/significantdigits', vseed: config_101 }, + { name: 'numFormat/suffix-&-prefix', vseed: config_102 }, + { name: 'numFormat/thousandseparator', vseed: config_103 }, + { name: 'numFormat/type', vseed: config_104 }, + { name: 'pieStyle/compact-donut', vseed: config_105 }, + { name: 'pieStyle/half-pie', vseed: config_106 }, + { name: 'pointStyle/active-point', vseed: config_107 }, + { name: 'pointStyle/dimension-condition', vseed: config_108 }, + { name: 'pointStyle/measure-condition', vseed: config_109 }, + { name: 'pointStyle/partial-datum', vseed: config_110 }, + { name: 'pointStyle/point-array', vseed: config_111 }, + { name: 'pointStyle/value', vseed: config_112 }, + { name: 'polynomial/column-示例', vseed: config_113 }, + { name: 'polynomial/scatter-示例', vseed: config_114 }, + { name: 'sort/图例自身排序', vseed: config_115 }, + { name: 'sort/指标排序-1', vseed: config_116 }, + { name: 'sort/指标排序', vseed: config_117 }, + { name: 'sort/维度排序-1', vseed: config_118 }, + { name: 'sort/维度排序', vseed: config_119 }, + { name: 'sort/自定义排序(图例id)', vseed: config_120 }, + { name: 'sort/自定义排序(图例名称)', vseed: config_121 }, + { name: 'sort/自定义排序', vseed: config_122 }, + { name: 'totals/columnTotal', vseed: config_123 }, + { name: 'totals/rowTotal', vseed: config_124 }, + { name: 'totals/singleIndicator', vseed: config_125 } ] describe('features', () => { diff --git a/packages/vseed/tests/integrations/bar/barStyle/nearlyEqual.json b/packages/vseed/tests/integrations/bar/barStyle/nearlyEqual.json index 06e725f908..7c31888325 100644 --- a/packages/vseed/tests/integrations/bar/barStyle/nearlyEqual.json +++ b/packages/vseed/tests/integrations/bar/barStyle/nearlyEqual.json @@ -18,7 +18,8 @@ "labelColor": "#212121", "labelFontSize": 12 }, - "stackCornerRadius": 4, + "cornerRadius": 4, + "stackCornerRadius": true, "barMaxWidth": 72, "yAxis": { "grid": { diff --git a/packages/vseed/tests/integrations/column/feedback/sameAlias.json b/packages/vseed/tests/integrations/column/feedback/sameAlias.json index 228d0f06dc..ff5a99acbd 100644 --- a/packages/vseed/tests/integrations/column/feedback/sameAlias.json +++ b/packages/vseed/tests/integrations/column/feedback/sameAlias.json @@ -96,7 +96,7 @@ }, "autoFormat": true }, - "stackCornerRadius": 0, + "stackCornerRadius": false, "measures": [ { "id": "co_20250916102539_ed6a", diff --git a/packages/vseed/tests/integrations/column/stackCornerRadius/stack-column.json b/packages/vseed/tests/integrations/column/stackCornerRadius/stack-column.json index bcd07cf89b..6e73ad5b8e 100644 --- a/packages/vseed/tests/integrations/column/stackCornerRadius/stack-column.json +++ b/packages/vseed/tests/integrations/column/stackCornerRadius/stack-column.json @@ -3,7 +3,8 @@ "description": "", "vseed": { "chartType": "column", - "stackCornerRadius": 10, + "cornerRadius": 10, + "stackCornerRadius": true, "dataset": [ { "date": "2019", diff --git a/packages/vseed/tests/integrations/columnParallel/stackCornerRadius/column.json b/packages/vseed/tests/integrations/columnParallel/stackCornerRadius/column.json index b38b06fd25..a3edd5e23f 100644 --- a/packages/vseed/tests/integrations/columnParallel/stackCornerRadius/column.json +++ b/packages/vseed/tests/integrations/columnParallel/stackCornerRadius/column.json @@ -3,7 +3,8 @@ "description": "", "vseed": { "chartType": "columnParallel", - "stackCornerRadius": 10, + "cornerRadius": 10, + "stackCornerRadius": true, "dataset": [ { "date": "2019", diff --git a/packages/vseed/tests/integrations/columnPercent/stackCornerRadius/percent-column.json b/packages/vseed/tests/integrations/columnPercent/stackCornerRadius/percent-column.json index 075313ddd4..566a69bd48 100644 --- a/packages/vseed/tests/integrations/columnPercent/stackCornerRadius/percent-column.json +++ b/packages/vseed/tests/integrations/columnPercent/stackCornerRadius/percent-column.json @@ -3,7 +3,8 @@ "description": "", "vseed": { "chartType": "columnPercent", - "stackCornerRadius": 10, + "cornerRadius": 10, + "stackCornerRadius": true, "dataset": [ { "date": "2019", diff --git a/packages/vseed/tests/integrations/dualAxis/annotationPoint/dualAxis-multi-measures.json b/packages/vseed/tests/integrations/dualAxis/annotationPoint/dualAxis-multi-measures.json index 6c91200cd5..16e59a4e60 100644 --- a/packages/vseed/tests/integrations/dualAxis/annotationPoint/dualAxis-multi-measures.json +++ b/packages/vseed/tests/integrations/dualAxis/annotationPoint/dualAxis-multi-measures.json @@ -17,7 +17,8 @@ "labelColor": "#FDFDFD", "labelFontSize": 12 }, - "stackCornerRadius": 6, + "cornerRadius": 6, + "stackCornerRadius": true, "barMaxWidth": 72, "xAxis": { "grid": { diff --git a/packages/vseed/tests/integrations/dualAxis/annotationPoint/dualAxis.json b/packages/vseed/tests/integrations/dualAxis/annotationPoint/dualAxis.json index b5a894a88d..20f31d8acd 100644 --- a/packages/vseed/tests/integrations/dualAxis/annotationPoint/dualAxis.json +++ b/packages/vseed/tests/integrations/dualAxis/annotationPoint/dualAxis.json @@ -17,7 +17,8 @@ "labelColor": "#FDFDFD", "labelFontSize": 12 }, - "stackCornerRadius": 6, + "cornerRadius": 6, + "stackCornerRadius": true, "barMaxWidth": 72, "xAxis": { "grid": { diff --git a/packages/vseed/tests/integrations/dualAxis/stackCornerRadius/dualAxis.json b/packages/vseed/tests/integrations/dualAxis/stackCornerRadius/dualAxis.json index 1d95a27851..8bcdc05ccb 100644 --- a/packages/vseed/tests/integrations/dualAxis/stackCornerRadius/dualAxis.json +++ b/packages/vseed/tests/integrations/dualAxis/stackCornerRadius/dualAxis.json @@ -62,7 +62,8 @@ "returnRatio": 305 } ], - "stackCornerRadius": 10, + "cornerRadius": 10, + "stackCornerRadius": true, "dimensions": [ { "id": "date", diff --git a/packages/vseed/tests/integrations/dualAxis/stackCornerRadius/secondary-bar.json b/packages/vseed/tests/integrations/dualAxis/stackCornerRadius/secondary-bar.json index 9463a1bc26..596a61a42c 100644 --- a/packages/vseed/tests/integrations/dualAxis/stackCornerRadius/secondary-bar.json +++ b/packages/vseed/tests/integrations/dualAxis/stackCornerRadius/secondary-bar.json @@ -38,7 +38,8 @@ } ], "chartType": "dualAxis", - "stackCornerRadius": 16, + "cornerRadius": 16, + "stackCornerRadius": true, "barMaxWidth": 20, "dataset": [ { diff --git a/packages/vseed/tests/unit/builder/barClipping.test.ts b/packages/vseed/tests/unit/builder/barClipping.test.ts index 1f34702272..9dad301908 100644 --- a/packages/vseed/tests/unit/builder/barClipping.test.ts +++ b/packages/vseed/tests/unit/builder/barClipping.test.ts @@ -7,8 +7,29 @@ import dualAxisCase from '../../integrations/dualAxis/combination/columnParallel beforeAll(registerAll) -test.each([columnCase, barCase, dualAxisCase])('$name keeps strokes within the native bar bounds', (fixture) => { - const spec = Builder.from(fixture.vseed as VSeed).build() +test.each([columnCase, barCase, dualAxisCase])('$name renders straight bars without group clipping by default', (fixture) => { + const spec = Builder.from({ ...fixture.vseed, barStyle: undefined } as VSeed).build() + const element = document.createElement('div') + document.body.append(element) + const chart = new VChart({ ...spec, width: 500, height: 500 }, { dom: element, animation: false }) + try { + chart.renderSync() + for (const series of chart.getChart()!.getAllSeries()) { + const mark = series.getMarkInName('bar') + if (!mark) continue + expect(series.getSpec().stackCornerRadius).toBeUndefined() + for (const datum of series.getViewData()!.latestData) { + expect(mark.getAttribute('cornerRadius', datum)).toBe(0) + } + } + } finally { + chart.release() + element.remove() + } +}) + +test.each([columnCase, barCase, dualAxisCase])('$name explicitly clips strokes to the requested group outline', (fixture) => { + const spec = Builder.from({ ...fixture.vseed, cornerRadius: 4, stackCornerRadius: true } as VSeed).build() const element = document.createElement('div') document.body.append(element) const chart = new VChart({ ...spec, width: 500, height: 500 }, { dom: element, animation: false }) diff --git a/packages/vseed/tests/unit/builder/barGradient.test.ts b/packages/vseed/tests/unit/builder/barGradient.test.ts index 973f8f2b3d..47967f1ed8 100644 --- a/packages/vseed/tests/unit/builder/barGradient.test.ts +++ b/packages/vseed/tests/unit/builder/barGradient.test.ts @@ -53,7 +53,7 @@ test.each(['column', 'bar', 'columnParallel', 'barParallel', 'columnPercent', 'b { offset: 1, color: 'rgba(255,0,0,0.5)' }, ], }) - expect(spec.stackCornerRadius).toBeTypeOf('function') + expect(spec.stackCornerRadius).toBeUndefined() }, ) diff --git a/packages/vseed/tests/unit/builder/barUpdates.test.ts b/packages/vseed/tests/unit/builder/barUpdates.test.ts index 527f73185a..80ee1c457e 100644 --- a/packages/vseed/tests/unit/builder/barUpdates.test.ts +++ b/packages/vseed/tests/unit/builder/barUpdates.test.ts @@ -4,6 +4,94 @@ import { Builder, registerAll } from 'src/builder' beforeAll(registerAll) describe('bar geometry across spec updates', () => { + test('histogram bins retain per-mark corners when the radius changes', async () => { + const build = (cornerRadius: number) => ({ + ...Builder.from({ + chartType: 'histogram', + dataset: [{ value: 10 }, { value: 15 }, { value: 20 }], + measures: [{ id: 'value' }], + cornerRadius, + stackCornerRadius: false, + barStyle: { barBorderWidth: 0 }, + }).build(), + width: 480, + height: 240, + animation: false, + }) + const element = document.createElement('div') + document.body.append(element) + const chart = new VChart(build(6), { dom: element }) + try { + chart.renderSync() + for (const radius of [6, 12, 0, 6]) { + await chart.updateSpec(build(radius)) + const series = chart.getChart()!.getAllSeries()[0] + const mark = series.getMarkInName('bar')! + expect((mark.getMarkConfig() as any).clip).not.toBe(true) + const nonempty = series.getViewData()!.latestData.filter((datum: any) => datum.__MeaValue__ > 0) + expect(nonempty.length).toBeGreaterThan(0) + for (const datum of nonempty) expect(mark.getAttribute('cornerRadius', datum)).toBe(radius) + } + } finally { + chart.release() + element.remove() + } + }) + + test.each(['column', 'bar'] as const)('%s switches between per-mark corners and whole stack clipping', async (chartType) => { + const build = (stackCornerRadius?: boolean, cornerRadius: number | number[] = [6, 6, 0, 0]) => ({ + ...Builder.from({ + chartType, + dataset: [ + { category: 'A', series: 'East', value: 10 }, + { category: 'A', series: 'West', value: 20 }, + ], + dimensions: [{ id: 'category' }, { id: 'series' }], + measures: [{ id: 'value' }], + cornerRadius, + stackCornerRadius, + barStyle: [{ barBorderWidth: 0 }, { selector: { series: 'West' }, barColor: 'red' }], + animation: { enable: false }, + }).build(), + width: 480, + height: 240, + }) + const element = document.createElement('div') + document.body.append(element) + const chart = new VChart(build(), { dom: element }) + try { + chart.renderSync() + const series = chart.getChart()!.getAllSeries()[0] + const modes: { stackCornerRadius?: boolean; cornerRadius: number | number[] }[] = [ + { cornerRadius: [6, 6, 0, 0] }, + { stackCornerRadius: true, cornerRadius: [6, 6, 0, 0] }, + { stackCornerRadius: true, cornerRadius: 12 }, + { stackCornerRadius: false, cornerRadius: 8 }, + { stackCornerRadius: true, cornerRadius: 0 }, + { cornerRadius: [6, 6, 0, 0] }, + ] + for (const { stackCornerRadius, cornerRadius } of modes) { + await chart.updateSpec(build(stackCornerRadius, cornerRadius)) + const current = chart.getChart()!.getAllSeries()[0] + expect(current).toBe(series) + const mark = current.getMarkInName('bar')! + const config = mark.getMarkConfig() as any + expect(config.clip === true).toBe(Boolean(stackCornerRadius)) + const data = current.getViewData()!.latestData + expect(data).toHaveLength(2) + for (const datum of data) expect(mark.getAttribute('cornerRadius', datum)).toEqual(stackCornerRadius ? 0 : cornerRadius) + if (stackCornerRadius) { + // Two stacked segments share one outline, rather than two rounded rectangles. + expect(config.clipPath()).toHaveLength(1) + expect(config.clipPath()[0].attribute.cornerRadius).toEqual(cornerRadius) + } + } + } finally { + chart.release() + element.remove() + } + }) + test.each(['column', 'bar'] as const)( '%s preserves single-series corners through native updates', async (chartType) => { @@ -13,7 +101,8 @@ describe('bar geometry across spec updates', () => { dataset: values.map((value, i) => ({ category: String(i), value })), dimensions: [{ id: 'category' }], measures: [{ id: 'value' }], - stackCornerRadius: [4, 4, 0, 0], + cornerRadius: [4, 4, 0, 0], + stackCornerRadius: true, animation: { enable: false }, }).build(), width: 480, @@ -81,6 +170,7 @@ describe('bar geometry across spec updates', () => { const current = chart.getChart()!.getAllSeries()[0] expect(current === series).toBe(true) const mark = current.getMarkInName('bar')! + expect((mark.getMarkConfig() as any).clip).not.toBe(true) for (const datum of current.getViewData()!.latestData) { for (const attribute of chartType.startsWith('column') ? ['x', 'y', 'y1', 'width'] diff --git a/packages/vseed/tests/unit/pipeline/spec/chart/pipes/stack/barCornerRadius.test.ts b/packages/vseed/tests/unit/pipeline/spec/chart/pipes/stack/barCornerRadius.test.ts new file mode 100644 index 0000000000..8ba3a4bfd8 --- /dev/null +++ b/packages/vseed/tests/unit/pipeline/spec/chart/pipes/stack/barCornerRadius.test.ts @@ -0,0 +1,215 @@ +import { barCornerRadius } from 'src/pipeline/spec/chart/pipes/stack/barCornerRadius' +import { theme as applyTheme } from 'src/pipeline/advanced/chart/pipes/theme/theme' +import { createBarCornerRadius, createStackCornerRadius } from 'src/pipeline/spec/chart/pipes/stack/stackCornerRadiusUtils' +import { Builder, registerAll, registerCustomTheme } from 'src/builder' +import { zVSeed } from 'src/types/zVseed' +import type { AdvancedVSeed, SpecPipelineContext, VSeed } from 'src/types' +import dualAxis from '../../../../../../examples/chartType/dualAxis/basic.json' + +const families = ['column', 'bar', 'columnParallel', 'barParallel', 'columnPercent', 'barPercent', 'raceBar', 'raceColumn', 'histogram'] as const +const seed = (options: object = {}): VSeed => ({ + chartType: 'column', + dataset: [{ category: 'A', series: 'East', value: 10 }, { category: 'A', series: 'West', value: 20 }], + dimensions: [{ id: 'category' }, { id: 'series' }], + measures: [{ id: 'value' }], + ...options, +}) as VSeed + +const context = (config?: object): SpecPipelineContext => ({ + advancedVSeed: { config: config ? { column: config } : {} } as AdvancedVSeed, + vseed: { chartType: 'column' } as VSeed, +}) as SpecPipelineContext + +beforeAll(registerAll) + +describe('bar corner modes', () => { + test('an explicit false overrides a stack-enabled custom theme and radius arrays replace scalar theme values', () => { + registerCustomTheme('boolean-stack-radius', ({ lightTheme }) => ({ + ...lightTheme, + config: { ...lightTheme.config, column: { ...lightTheme.config?.column, cornerRadius: 12, stackCornerRadius: true } }, + })) + const native = Builder.from(seed({ theme: 'boolean-stack-radius', stackCornerRadius: false })).build() + expect(native.stackCornerRadius).toBeUndefined() + expect(native.bar.style.cornerRadius({ __MeaId__: 'value', value: 10 })).toBe(12) + const stack = Builder.from(seed({ theme: 'boolean-stack-radius', cornerRadius: [6, 7, 0, 0] })).build() + expect(stack.stackCornerRadius(null, { __MeaId__: 'value', value: 10 })).toEqual([6, 7, 0, 0]) + + registerCustomTheme('array-corner-radius', ({ lightTheme }) => ({ + ...lightTheme, + config: { ...lightTheme.config, column: { ...lightTheme.config?.column, cornerRadius: [8, 9, 0, 0] } }, + })) + const themed = Builder.from(seed({ theme: 'array-corner-radius' })).build() + expect(themed.bar.style.cornerRadius({ __MeaId__: 'value', value: 10 })).toEqual([8, 9, 0, 0]) + const straight = Builder.from(seed({ theme: 'array-corner-radius', cornerRadius: 0 })).build() + expect(straight.bar.style.cornerRadius({ __MeaId__: 'value', value: 10 })).toBe(0) + const empty = Builder.from(seed({ theme: 'array-corner-radius', cornerRadius: [] })).build() + expect(empty.bar.style.cornerRadius({ __MeaId__: 'value', value: 10 })).toEqual([]) + const initial = applyTheme({} as AdvancedVSeed, { + vseed: seed({ theme: 'array-corner-radius' }), + customTheme: Builder.getThemeMap(), + } as any) + expect(initial.config?.column?.cornerRadius).toEqual([8, 9, 0, 0]) + }) + + test('selecting a corner mode preserves existing mark attributes from preceding pipes', () => { + for (const stackCornerRadius of [false, true]) { + const spec = barCornerRadius({ bar: { interactive: false, style: { fillOpacity: 0.3 } } }, context({ cornerRadius: 6, stackCornerRadius })) as any + expect(spec.bar.interactive).toBe(false) + expect(spec.bar.style.fillOpacity).toBe(0.3) + if (stackCornerRadius) expect(spec.stackCornerRadius(null, { __MeaId__: 'value', value: 10 })).toBe(6) + else expect(spec.bar.style.cornerRadius({ __MeaId__: 'value', value: 10 })).toBe(6) + } + }) + + test.each(families)('%s rejects numeric and array stack modes in serialized DSL', (chartType) => { + for (const stackCornerRadius of [0, 4, [], [4, 4, 0, 0]]) { + expect(zVSeed.safeParse(seed({ chartType, stackCornerRadius })).success).toBe(false) + } + for (const stackCornerRadius of [false, true]) { + expect(zVSeed.safeParse(seed({ chartType, cornerRadius: 4, stackCornerRadius })).success).toBe(true) + } + }) + + test('stack mode keeps straight corners when no explicit value is provided', () => { + const spec = Builder.from(seed({ stackCornerRadius: true })).build() + expect(spec.stackCornerRadius(null, { __VCHART_STACK_START: 0, __VCHART_STACK_END: 10 })).toBe(0) + expect(spec.bar.style.cornerRadius).toBe(0) + }) + + test.each([0, [], [0, 0, 0, 0]])('enabled stack mode retains the requested straight outline %j', (cornerRadius) => { + const spec = Builder.from(seed({ cornerRadius, stackCornerRadius: true })).build() + expect(spec.stackCornerRadius(null, { __VCHART_STACK_START: 0, __VCHART_STACK_END: 10 })).toEqual(cornerRadius) + expect(spec.bar.style.cornerRadius).toBe(0) + }) + + test('dual-axis bar series support both corner modes without affecting line series', () => { + for (const stackCornerRadius of [undefined, false, true]) { + const dsl = zVSeed.parse({ ...dualAxis.vseed, cornerRadius: 6, stackCornerRadius }) + const spec = Builder.from(dsl as VSeed).build() + const bar = spec.series.find((series: any) => series.type === 'bar') + const line = spec.series.find((series: any) => series.type === 'line') + expect(line.bar).toBeUndefined() + expect(line.stackCornerRadius).toBeUndefined() + if (stackCornerRadius) { + expect(bar.bar.style.cornerRadius).toBe(0) + expect(bar.stackCornerRadius(null, { __MeaId__: 'value', value: 10 })).toBe(6) + } else { + expect(bar.stackCornerRadius).toBeUndefined() + expect(bar.bar.style.cornerRadius({ __MeaId__: 'value', value: 10 })).toBe(6) + } + } + }) + + test.each(['column', 'bar', 'columnParallel', 'barParallel', 'columnPercent', 'barPercent', 'histogram'] as const)('%s pivot cells retain the selected corner mode', (chartType) => { + for (const stackCornerRadius of [undefined, false, true]) { + const spec = Builder.from(seed({ + chartType, + dimensions: [{ id: 'category', encoding: 'row' }, { id: 'series', encoding: 'color' }], + cornerRadius: 6, + stackCornerRadius, + })).build() + const chart = spec.indicators[0].chartSpec + if (stackCornerRadius) { + expect(chart.bar.style.cornerRadius).toBe(0) + expect(chart.stackCornerRadius(null, { __MeaId__: 'value', value: 10 })).toBe(6) + } else { + expect(chart.stackCornerRadius).toBeUndefined() + expect(chart.bar.style.cornerRadius({ __MeaId__: 'value', value: 10 })).toBe(6) + } + } + }) + + test.each(families)('%s accepts and forwards both DSL radius fields', (chartType) => { + const dsl = seed({ chartType, cornerRadius: [7, 7, 0, 0], stackCornerRadius: true }) + const parsed = zVSeed.parse(JSON.parse(JSON.stringify(dsl))) + expect(parsed).toMatchObject({ cornerRadius: [7, 7, 0, 0], stackCornerRadius: true }) + const spec = Builder.from(parsed as VSeed).build() + expect(spec.bar.style.cornerRadius).toBe(0) + expect(spec.stackCornerRadius(null, { __VCHART_STACK_START: 0, __VCHART_STACK_END: 30 })).toEqual([7, 7, 0, 0]) + }) + + test.each(families)('%s defaults to straight corners in both themes', (chartType) => { + for (const theme of ['light', 'dark']) { + const dsl = seed({ chartType, theme }) + expect(zVSeed.parse(dsl).stackCornerRadius).toBeUndefined() + expect(Builder.from(dsl).buildAdvanced()?.config?.[chartType]?.stackCornerRadius).toBe(false) + const spec = Builder.from(dsl).build() + expect(spec.stackCornerRadius).toBeUndefined() + expect(spec.bar.style.cornerRadius({ __MeaId__: 'value', value: 10 })).toBe(0) + expect(spec.bar.style.cornerRadius({ __MeaId__: 'value', value: -10 })).toBe(0) + } + }) + + test.each([undefined, false, null])('stack mode %j disables group clipping and retains native corners', (stackCornerRadius) => { + const spec = Builder.from(seed({ cornerRadius: 6, stackCornerRadius })).build() + expect(spec.stackCornerRadius).toBeUndefined() + expect(spec.bar.style.cornerRadius({ __MeaId__: 'value', value: -10 })).toBe(6) + }) + + test('missing config and zero native radius generate no group clip', () => { + for (const config of [undefined, { cornerRadius: 0 }]) { + const spec = barCornerRadius({}, context(config)) as any + expect(spec.stackCornerRadius).toBeUndefined() + expect(spec.bar.style.cornerRadius({ __MeaId__: 'value', value: 10 })).toBe(0) + } + }) + + test('native corners preserve per-bar global and conditional overrides', () => { + const spec = Builder.from(seed({ cornerRadius: 10, barStyle: [{ barRadius: 3 }, { selector: { series: 'West' }, barRadius: 0, barColor: 'red' }] })).build() + expect(spec.stackCornerRadius).toBeUndefined() + expect(spec.bar.style.cornerRadius).toBe(3) + expect(spec.bar.state.custom2.style.cornerRadius).toBe(0) + expect(spec.bar.state.custom2.filter({ series: 'West' })).toBe(true) + }) + + test('explicit group radius takes priority over native and conditional corners, including moveIn', () => { + const spec = Builder.from(seed({ + cornerRadius: 12, + stackCornerRadius: true, + barStyle: [{ barRadius: 30 }, { selector: { series: 'West' }, barRadius: 0, barColor: 'red' }], + animation: { enable: true, params: { update: { enable: true, effects: ['moveIn'] } } }, + })).build() + expect(spec.stackCornerRadius(null, { __VCHART_STACK_START: 0, __VCHART_STACK_END: 30 })).toBe(12) + expect(spec.bar.style.cornerRadius).toBe(0) + expect(spec.bar.state.custom2.style.cornerRadius).toBe(0) + expect(spec.bar.state.custom2.style.fill).toBe('red') + expect(spec.animationUpdate.bar.type).toBe('moveIn') + }) + + test('explicit group radius also overrides dynamic per-mark corners', () => { + const spec = Builder.from(seed({ cornerRadius: 6, stackCornerRadius: true, barStyle: { + barRadius: 20, + dynamicFilter: { type: 'row-with-field', code: '', result: { success: true, data: [{ __row_index: 0, field: 'value' }] } }, + } })).build() + expect(spec.bar.state.custom1.style.cornerRadius).toBe(0) + expect(spec.stackCornerRadius(null, { __MeaId__: 'value', value: 10 })).toBe(6) + }) + + test('native and group callbacks handle asymmetric positive, negative, crossing and zero values', () => { + const radius = [1, 2, 3, 4] + const bar = createBarCornerRadius(radius) + expect(bar({ __MeaId__: 'value', value: 10 })).toEqual(radius) + expect(bar({ __MeaId__: 'value', value: -10 })).toEqual([3, 4, 1, 2]) + expect(bar({ __MeaId__: 'value', value: 0 })).toBe(0) + expect(bar({})).toBe(0) + const stack = createStackCornerRadius(radius) + expect(stack(null, { __VCHART_STACK_START: 0, __VCHART_STACK_END: 10 })).toEqual(radius) + expect(stack(null, { __VCHART_STACK_START: -10, __VCHART_STACK_END: 0 })).toEqual([3, 4, 1, 2]) + expect(stack(null, { __VCHART_STACK_START: -10, __VCHART_STACK_END: 10 })).toEqual([3, 4, 3, 4]) + expect(stack(null, { __VCHART_STACK_START: 0, __VCHART_STACK_END: 0 })).toBe(0) + expect(createStackCornerRadius(4)(null, { __VCHART_STACK_START: -1, __VCHART_STACK_END: 1 })).toBe(4) + expect(createStackCornerRadius([])(null, { __VCHART_STACK_START: -1, __VCHART_STACK_END: 1 })).toEqual([0, 0, 0, 0]) + expect(createStackCornerRadius([])(null, { __VCHART_STACK_START: -1, __VCHART_STACK_END: 0 })).toEqual([0, 0, 0, 0]) + }) + + test('callbacks are stable across updateSpec builds and snapshot mutable inputs', () => { + const radius = [7, 7, 0, 0] + const callback = createStackCornerRadius(radius) + expect(createStackCornerRadius([...radius])).toBe(callback) + expect(createBarCornerRadius(radius)).toBe(createBarCornerRadius([...radius])) + radius[0] = 99 + expect(callback(null, { __MeaId__: 'value', value: 10 })).toEqual([7, 7, 0, 0]) + for (let value = 100; value < 165; value++) createStackCornerRadius(value) + expect(createStackCornerRadius([7, 7, 0, 0])).not.toBe(callback) + }) +}) diff --git a/packages/vseed/tests/unit/pipeline/spec/chart/pipes/stack/stackCornerRadius.test.ts b/packages/vseed/tests/unit/pipeline/spec/chart/pipes/stack/stackCornerRadius.test.ts deleted file mode 100644 index 18eba8cc6c..0000000000 --- a/packages/vseed/tests/unit/pipeline/spec/chart/pipes/stack/stackCornerRadius.test.ts +++ /dev/null @@ -1,140 +0,0 @@ -import { stackCornerRadius } from 'src/pipeline/spec/chart/pipes/stack/stackCornerRadius' -import { createStackCornerRadius } from 'src/pipeline/spec/chart/pipes/stack/stackCornerRadiusUtils' -import { Builder, registerAll } from 'src/builder' -import type { AdvancedVSeed, SpecPipelineContext, VSeed } from 'src/types' - -const createContext = (chartType = 'column'): SpecPipelineContext => - ({ - advancedVSeed: { - config: { - [chartType]: { stackCornerRadius: [4, 4, 0, 0] }, - }, - } as unknown as AdvancedVSeed, - vseed: { - chartType, - } as unknown as VSeed, - }) as SpecPipelineContext - -describe('stackCornerRadius pipe', () => { - beforeAll(registerAll) - - it('reuses callbacks by value without retaining mutable input arrays', () => { - const radius = [7, 7, 0, 0] - const callback = createStackCornerRadius(radius) - expect(createStackCornerRadius([...radius])).toBe(callback) - radius[0] = 99 - expect(callback(null, { __VCHART_STACK_START: 0, __VCHART_STACK_END: 10 })).toEqual([7, 7, 0, 0]) - expect(callback(null, { __VCHART_STACK_START: -10, __VCHART_STACK_END: 10 })).toEqual([7, 7, 7, 7]) - expect(callback(null, { __VCHART_STACK_START: 0, __VCHART_STACK_END: 0 })).toBe(0) - expect(createStackCornerRadius(4)(null, { __VCHART_STACK_START: -10, __VCHART_STACK_END: 0 })).toBe(4) - for (let radius = 100; radius < 165; radius++) createStackCornerRadius(radius) - expect(createStackCornerRadius([7, 7, 0, 0])).not.toBe(callback) - }) - - it.each([0, 4, [4, 4, 4, 4]])('explicit per-bar corners %j retain the stroke clip', (barRadius) => { - const spec = Builder.from({ - chartType: 'column', - dataset: [{ category: 'A', value: 10 }], - dimensions: [{ id: 'category' }], - measures: [{ id: 'value' }], - barStyle: { barRadius }, - }).build() - expect(spec.stackCornerRadius(null, { __VCHART_STACK_START: 0, __VCHART_STACK_END: 10 })).toEqual( - barRadius === 0 ? [0, 0, 0, 0] : [4, 4, 0, 0], - ) - expect(spec.bar.style.cornerRadius).toEqual(barRadius) - }) - - it('conditional per-bar corners preserve the default outline on unmatched bars', () => { - const dsl = { - chartType: 'column' as const, - dataset: [ - { category: 'A', series: 'East', value: -10 }, - { category: 'A', series: 'West', value: 20 }, - ], - dimensions: [{ id: 'category' }, { id: 'series' }], - measures: [{ id: 'value' }], - } - expect(Builder.from({ ...dsl, barStyle: { barColor: 'red' } }).build().stackCornerRadius).toBeTypeOf( - 'function', - ) - const spec = Builder.from({ ...dsl, barStyle: { selector: { value: -10 }, barRadius: 5 } }).build() - expect(spec.stackCornerRadius(null, { value: -10, __VCHART_STACK_START: -10, __VCHART_STACK_END: 0 })).toEqual([ - 0, 0, 4, 4, - ]) - expect(spec.stackCornerRadius(null, { value: 20, __VCHART_STACK_START: 0, __VCHART_STACK_END: 20 })).toEqual([ - 4, 4, 0, 0, - ]) - expect(spec.bar.state.custom1.style.cornerRadius).toBe(5) - }) - - it('dynamic corner rules preserve the default outline when they do not match', () => { - const context = createContext() - context.advancedVSeed.markStyle = { - barStyle: { - barRadius: 0, - dynamicFilter: { - type: 'row-with-field', - code: '', - result: { success: true, data: [{ __row_index: 0, field: 'value' }] }, - }, - }, - } - const spec = stackCornerRadius({}, context) as any - expect(spec.stackCornerRadius(null, { __row_index: 0, __MeaId__: 'value', value: 10 })).toEqual([0, 0, 0, 0]) - expect(spec.stackCornerRadius(null, { __row_index: 1, __VCHART_STACK_START: 0, __VCHART_STACK_END: 10 })).toEqual([ - 4, 4, 0, 0, - ]) - }) - - it('still clips strokes when no radius is configured', () => { - const context = createContext() - context.advancedVSeed.config = {} - const spec = stackCornerRadius({}, context) as any - expect(spec.stackCornerRadius(null, { __VCHART_STACK_START: 0, __VCHART_STACK_END: 10 })).toBe(0) - }) - - it('honors asymmetric corners and the last matching radius rule', () => { - const context = createContext() - context.advancedVSeed.markStyle = { - barStyle: [{ barRadius: [0, 8, 8, 0] }, { selector: { value: 10 }, barRadius: 2 }], - } - const spec = stackCornerRadius({}, context) as any - expect(spec.stackCornerRadius(null, { value: 10, __VCHART_STACK_START: 0, __VCHART_STACK_END: 10 })).toEqual([ - 2, 2, 0, 0, - ]) - expect(spec.stackCornerRadius(null, { value: -10, __VCHART_STACK_START: -10, __VCHART_STACK_END: 0 })).toEqual([ - 0, 0, 4, 0, - ]) - }) - it('should use root stackCornerRadius when no moveIn animation exists', () => { - const result = stackCornerRadius({}, createContext()) as any - - expect(typeof result.stackCornerRadius).toBe('function') - expect(result.bar?.style?.cornerRadius).toBeUndefined() - }) - - it('should put cornerRadius on bar mark when moveIn animation exists', () => { - const spec = { - animationNormal: { - bar: [{ type: 'moveIn' }], - }, - } - const result = stackCornerRadius(spec, createContext()) as any - - expect(result.stackCornerRadius).toBeUndefined() - expect(typeof result.bar.style.cornerRadius).toBe('function') - expect(result.bar.style.cornerRadius({ __VCHART_STACK_START: 0, __VCHART_STACK_END: 10 })).toEqual([4, 4, 0, 0]) - }) - - it('should reverse negative stack corners in the moveIn fallback', () => { - const spec = { - animationUpdate: { - bar: { type: 'moveIn' }, - }, - } - const result = stackCornerRadius(spec, createContext()) as any - - expect(result.bar.style.cornerRadius({ __VCHART_STACK_START: -10, __VCHART_STACK_END: 0 })).toEqual([0, 0, 4, 4]) - }) -}) diff --git a/packages/vseed/vite.config.ts b/packages/vseed/vite.config.ts index 1a9a60ae9e..801b1654c7 100644 --- a/packages/vseed/vite.config.ts +++ b/packages/vseed/vite.config.ts @@ -20,10 +20,10 @@ export default defineConfig(({ mode }) => ({ // V8 branch counts vary slightly between runs; use verified floors. thresholds: mode === 'unit' - ? { statements: 84.5, lines: 84.5, branches: 77.5, functions: 82.9 } + ? { statements: 85.48, lines: 85.48, branches: 77.87, functions: 83.29 } : mode === 'integration' ? undefined - : { statements: 91.4, lines: 91.4, branches: 82.4, functions: 84.8 }, + : { statements: 91.49, lines: 91.49, branches: 82.5, functions: 84.97 }, }, globals: true, environment: 'jsdom', diff --git a/skills/light-dashboard/SKILL.md b/skills/light-dashboard/SKILL.md new file mode 100644 index 0000000000..ad226ce1ef --- /dev/null +++ b/skills/light-dashboard/SKILL.md @@ -0,0 +1,102 @@ +--- +name: light-dashboard +description: 建小而美、低信息密度的交互式仪表盘。适用于经营概览、指标监测、趋势分析与专题数据看板，强调关键指标、清晰主次、充足留白、精致配色与必要交互。Powered By Visactor VBI +--- + +# 轻量仪表盘构建指南 + +## 核心方法论：基于 Dashboard 模板构建 + +模板仅作为实现与视觉参考。新建 Dashboard 先根据数据结构、分析任务和业务语境决定布局与主题色，再从下方索引选取适用片段；可重排、组合或重新设计，不默认复制某个模板，也不限于已有布局和配色。布局与颜色独立选择，例如趋势主导布局可以使用暖色，指标先行布局也可以使用蓝色；变化应有业务与阅读依据，不为多样性随机换色。已有宿主或用户指定风格时优先适配其要求。下方 [24 份模板索引](#24-份模板索引)列出简介与设计动机；[基础模板](templates/template-business-overview.html)用于查阅最小接入机制，[完整轻量示例](templates/example.html)用于查阅扩展实现；单图和局部修改只执行相关步骤。 + +构建前必须查看所选模板的 HTML 和对应截图，确认主辅比例、信息密度、字号与交互；不能只读索引或复制接入片段就开始交付。模板是产物的质量基线：业务适配与设计变化不能降低可读性、视觉完成度或必要交互。保留真实图表、适合数据的平滑趋势、`updateSpec()` 与指标文本动画、≤2° 小卡倾斜、默认展开明细和卡内联动；减少动态效果模式立即展示最终状态。详细约束统一遵循[轻量看板基线](references/best-practices/layout.md#轻量看板的功能与视觉基线)，不能因精简删去必要能力。 + +相近风格也要有设计差异：布局、背景与主题色分别按任务选择，避免反复输出同一骨架和固定渐变，仅替换标题或主色。遵循[差异设计](references/best-practices/design.md#相近风格中的差异设计)，在统一阅读面、密度与交互品质的基础上变化。指标字号统一按[数值字号规范](references/best-practices/metric-card.md#数值字号规范)分级：默认桌面主指标 / 辅助指标 / 卡内衍生指标为 **60 / 28 / 22px**，窄屏为 **40 / 26 / 20px**；同层级共用 token，不按卡宽、数字长度或筛选状态临时缩放。已有品牌规范可统一替换整套字号。 + +按以下 4 个阶段推进，已有结论直接沿用，局部修改只处理相关内容。按资料索引和阶段内链接查阅当前任务需要的内容。 + +## 资料索引 + +| 类别 | 资料 | 用途与查阅时机 | +| ---------- | ------------------------------------------------------------------ | -------------------------------------------------------------------- | +| 模板与示例 | [24 份模板索引](#24-份模板索引) · [可视总览](templates/index.html) | 查阅全部模板简介、布局和主题色动机；所有 HTML 与截图平铺在同一目录。 | +| 模板与示例 | [完整轻量 Dashboard](templates/example.html) | 扩展布局、配色与交互时查阅。 | +| 最佳实践 | [设计与布局](references/best-practices/layout.md) | 适配模板骨架、控制密度、配置布局与卡片动效。 | +| 最佳实践 | [配色与背景](references/best-practices/design.md) | 确定页面与图表的颜色层级。 | +| 最佳实践 | [指标卡](references/best-practices/metric-card.md) | 实现辅助图形、指标动画与卡内联动。 | +| 最佳实践 | [趋势图](references/best-practices/trend.md) | 实现平滑趋势、渐变面积与图内交互。 | +| 最佳实践 | [Filter 筛选器](references/best-practices/filter.md) | 设计平铺筛选、维护 Builder 条件并联动更新。 | +| 最佳实践 | [核心发现与指标洞察](references/best-practices/insight.md) | 选择衍生指标，组织计算口径、结论与证据。 | +| 最佳实践 | [截图对照验收](references/best-practices/visual-acceptance.md) | 验证桌面、窄屏的视觉效果与必要交互。 | +| 接入参考 | [核心能力](references/usage/capabilities.md) | 确认 DSL、Builder、Connector 与 UI 的职责。 | +| 接入参考 | [实践技巧](references/usage/tips.md) | 配置查询、字段映射、资源关联与保存恢复。 | +| 接入参考 | [HTML 接入](references/usage/how-use-vbi-in-html.md) | 使用 HTML / ESM 时查阅加载、渲染与模板关键片段。 | +| API 文档 | [VBI API 索引](references/api/vbi/index.md) | 核对实例、Chart、Dashboard、Insight Builder 的接口与类型。 | +| API 文档 | [VSeed API 索引](references/api/vseed/index.md) | 核对 Spec 构建、图表类型、主题、注册与数据工具。 | + +## 24 份模板索引 + +模板 HTML 为直接维护的参考产物，按需阅读、修改或组合片段。全部模板位于 `templates/`，统一使用 `template-分析主题.html`；对应桌面截图为同名 `.png`，手机截图为同名 `-mobile.png`。下表展示设计的判断过程，不是行业与布局、颜色的固定映射。先按阅读问题选择主次和结构，再独立选择主题色，可组合不同模板的片段；不要默认复制第一份或仅替换数据。 + + + +| 模板 | 简介与分析重点 | 布局动机 | 主题色动机 | +| --------------------------------------------------------------------------------- | ---------------------------------------------------------------------- | ----------------------------------------------------------------------------- | ----------------------------------------------------------------------------- | +| [template-life-expectancy](templates/template-life-expectancy.html) | 全球寿命观察；2,938 条寿命记录；真实年度趋势、国家覆盖与教育指标。 | 左侧大趋势承载长期变化，右侧小卡补充变化幅度、覆盖和教育，保持单一视觉中心。 | `#9FBFDF`；浅蓝与中性阅读面营造平静氛围，让长期曲线和数字优先。 | +| [template-heart-failure](templates/template-heart-failure.html) | 心衰样本观察；299 条临床样本；事件占比、射血分数、肌酐与年龄组比较。 | 顶部三项指标先概览，下方宽幅条形图再看年龄组；随访天数不伪装成日历趋势。 | `#B4A6D5`；低饱和紫区分指标概览风格，事件状态由标签表达，避免主题色暗示风险。 | +| [template-meal-workout](templates/template-meal-workout.html) | 餐食与运动画像；8,000 条餐食记录；热量、估算运动时长、营养与样本构成。 | 热量主区、运动与营养双列、样本构成收尾，分段解释不同量纲，避免 KPI 挤在一排。 | `#E4B18E`；暖橙呼应餐食与日常生活，统一各段强调色，减少多指标页面的颜色噪声。 | +| [template-business-overview](templates/template-business-overview.html) | 经营概览；轻量销售示例；销售额、增长、订单、利润与衍生效率指标。 | 左主趋势与右侧三张辅助卡突出销售规模，标题右侧合并筛选，明细承接核对。 | `#A8C7E8`；浅蓝统一趋势与卡片，白色阅读面降低密度，正负变化另用语义色表达。 | +| [template-education-performance](templates/template-education-performance.html) | 学习成果观察；葡萄牙两所中学 · 葡语课程 | 大幅年龄组比较居左，成绩、出勤与进步互相补充。 | `#7694D4`；蓝紫表达安静的学习氛围，以中性阅读面承载成绩。 | +| [template-education-attendance](templates/template-education-attendance.html) | 出勤与学习节奏；样本记录 · 学习投入与成绩 | 先读三个概览结果，再进入全宽学习时长比较，避免用因果语言解释出勤。 | `#B37C69`；陶土色配纸白强调教育观察的温度，与另一份冷色模板区分。 | +| [template-retail-sales](templates/template-retail-sales.html) | 零售月度脉搏；合成交易样本 · 金额与购买结构 | 全宽月度金额趋势先回答规模变化，随后一排结构与效率指标。 | `#CE7864`；柔和珊瑚色呼应消费场景，低饱和避免促销色淹没数据。 | +| [template-retail-basket](templates/template-retail-basket.html) | 品类与客单结构；合成零售样本 · 商品组合 | 右侧大品类比较与左侧结构卡形成镜像阅读，先看客单再看件数。 | `#558B98`；石油蓝用于冷静的商品结构分析，避免与金额趋势页共用暖色。 | +| [template-healthcare-charges](templates/template-healthcare-charges.html) | 医疗费用样本；保险费用数据 · 描述性观察 | 费用比较占据左侧主区，两个相关特征居右，样本结构横向收尾。 | `#8294AC`；灰蓝色稳定费用数据的阅读感，不以主题色暗示临床风险。 | +| [template-healthcare-regions](templates/template-healthcare-regions.html) | 地区费用画像；费用与家庭结构 · 样本概览 | 顶部两张概览卡后接左侧地区费用主图与右侧结构卡，强调区域描述。 | `#B77D91`；灰玫瑰与中性纸白让家庭结构观察更柔和，分类含义仍由文本表达。 | +| [template-banking-outreach](templates/template-banking-outreach.html) | 银行触达观察；营销样本 · 联系渠道与账户特征 | 渠道主图与窄侧栏构成主辅层级，底部全宽卡补充触达强度。 | `#767CB8`；靛蓝延续金融场景的克制感，负余额由坐标真实呈现。 | +| [template-banking-response](templates/template-banking-response.html) | 营销响应结构；教育分组 · 样本接受与联系强度 | 左侧两张细卡、右侧宽比较图，再以联系强度收尾，避免多组指标等权排列。 | `#B49759`；柔金色用于响应结构的重点强调，以白色卡片控制金融配色重量。 | +| [template-housing-price](templates/template-housing-price.html) | 住宅价格与空间；房源样本 · 卧室与配置 | 全宽卧室价格比较后，以宽结构卡和两张小卡说明房源配置。 | `#BB8C70`；沙陶色呼应空间与居住，金额采用原始单位而不编造币种。 | +| [template-housing-efficiency](templates/template-housing-efficiency.html) | 装修与空间效率；房源样本 · 总量口径的单位面积价格 | 宽空调结构卡在前，随后左主图与右辅卡；突出总价与面积的不同口径。 | `#9B6F80`；莓灰色与纸面边线让房源比较更像市场观察报告，与沙色空间页区分。 | +| [template-energy-renewables](templates/template-energy-renewables.html) | 可再生能源长镜头；美国 EIA 数据 · 1973—2024 | 右侧长年度曲线配左侧来源概览，底部宽卡补充风能报告值。 | `#C19A50`；琥珀色呼应能源，轻量纸面使长期曲线成为主视觉。 | +| [template-energy-wind](templates/template-energy-wind.html) | 风能的部门画像；报告覆盖与消费结构 · 美国部门样本 | 半宽部门比较和右侧上下分组卡形成紧凑双区，强调部门结构而非年度规模。 | `#5278A5`；深湖蓝强调风能与电力的清晰感，用中性背景区别长期琥珀曲线。 | +| [template-agriculture-climate](templates/template-agriculture-climate.html) | 作物环境样本；降雨与气候 · 标签数据观察 | 半宽气候主图置右，左侧用结构与温湿度解释样本，避免堆放 22 个作物 KPI。 | `#919565`；灰橄榄色呼应田野环境，保持原始分类与区间标签可读。 | +| [template-agriculture-nutrients](templates/template-agriculture-nutrients.html) | 土壤养分分组；氮磷钾与 pH · 观察样本 | 宽养分主图后接中间宽指标卡与两侧结构卡，按土壤问题组织阅读。 | `#B17851`；赭色呼应土壤，并与气候页的橄榄色区分，避免高饱和农作物拼色。 | +| [template-hospitality-bookings](templates/template-hospitality-bookings.html) | 酒店预订节奏；2017—2018 到店月份 · 预订记录 | 顶部指标分成窄宽窄节奏，再用全宽月份曲线承接预订规模。 | `#5E9DA4`；海蓝色呼应旅行体验，取消状态通过明确文字表达而不靠主题色判好坏。 | +| [template-hospitality-guests](templates/template-hospitality-guests.html) | 旅客与入住计划；渠道结构 · 人次、夜数与复住记录 | 左主图与右侧两张较高计划卡承接不同量纲，底部以取消记录补足质量。 | `#AD956E`；砂金色配报告式边线表达住宿计划，与月份页的海蓝轻量卡片区分。 | +| [template-manufacturing-failures](templates/template-manufacturing-failures.html) | 设备运行样本；合成预测维护数据 · 故障标签 | 右侧故障数量比较与左侧运行特征卡形成主辅，底部保留温差信息。 | `#7891A1`；钢灰蓝匹配设备运行语境，不把装饰色当故障告警色。 | +| [template-manufacturing-wear](templates/template-manufacturing-wear.html) | 磨损与运行工况；合成记录 · 速度、扭矩与故障标签 | 全宽故障结构卡后接七列工况主图与五列运行特征，突出量纲差异。 | `#C0884F`；铜橙呼应机械与工具，白色阅读面避免工业大屏的视觉重量。 | +| [template-logistics-fulfillment](templates/template-logistics-fulfillment.html) | 仓库履约观察；发运样本 · 准时状态与服务 | 较窄主图承载五个仓库分组，右侧三张大小有别的服务指标补充解释。 | `#588FBD`；晴蓝呼应物流流转，强调状态文字与样本占比的可读性。 | +| [template-logistics-service](templates/template-logistics-service.html) | 运输与服务画像；重量、折扣与商品成本 · 发运记录 | 三个概览卡在前，后接七列运输比较与五列服务卡，使重量成为主分析。 | `#A778A3`；灰兰紫区别运营规模页，给服务与商品属性建立温和的分析氛围。 | + + + +## Step1：确定指标、布局与主题色 + +- 明确核心分析问题、数据来源、交付环境及验收范围；阅读[核心能力](references/usage/capabilities.md)。按[实践技巧](references/usage/tips.md)确认字段、粒度、聚合、去重、单位与比较周期，用已知数据核对口径；按[洞察最佳实践](references/best-practices/insight.md)选择核心与衍生指标，明确公式和分母有效性，从同一范围的汇总结果计算。 +- 按阅读任务选择布局：一个主问题与真实时间变化适合主辅布局，多个关键结果需要先概览时适合指标行，多个不同量纲或解释层次适合分段组织。结合基准模板、[模板总览](templates/index.html)与[寿命截图](templates/template-life-expectancy.png)、[心衰截图](templates/template-heart-failure.png)、[餐食截图](templates/template-meal-workout.png)判断主次、面积与阅读顺序；不因模板有趋势图就为无日期数据制造时间轴。行业名称不直接决定模板，先比较同一行业两页为什么采用不同分析与布局，再匹配当前任务。 +- 按用户要求、品牌与宿主风格优先确定主题色，再结合业务语境、阅读氛围和对比度调整。主题色用于统一页面与图表的视觉强调；类别区分、正负变化和风险状态另按数据语义编码，不让装饰色改变含义。说明本次布局与配色的选择理由，以及参考了模板的哪些部分。 + +产出：指标口径与预期数值、已查看的模板与截图、布局 / 背景 / 主题色的选择理由及相对参照的设计差异。 + +## Step2：适配业务与视觉 + +- 将分析问题映射到核心发现、主分析区、辅助指标卡和明细。按[布局](references/best-practices/layout.md)、[指标卡](references/best-practices/metric-card.md)与[趋势图](references/best-practices/trend.md)最佳实践突出主次、合并重复信息；图表适配实际数据。核心发现用一句结论连接核心与衍生指标，并提供范围、基准和证据。 +- 以参考模板的主辅比例和留白为起点，按当前内容量与阅读顺序调整；按[配色最佳实践](references/best-practices/design.md)落实布局、背景与主题的差异，统一页面与图表。先定义主、辅、衍生指标及单位的字号 token，全页同层级一致；长数值优先调整单位表达与空间，不逐卡缩字。布局与配色切换控件仅在用户要求时添加。 +- 按[Filter 最佳实践](references/best-practices/filter.md)明确筛选与局部交互的作用范围；全局筛选集中在标题最右侧，优先一行平铺，省略重复标签并保留无障碍名称，避免未经设计的原生 `select` / `input`。确定桌面与窄屏布局。 + +产出：业务模块、页面骨架与联动范围。 + +## Step3：接入数据与交互 + +- 替换模板的数据接入与查询，确保 Connector 执行筛选、分组和聚合；沿 Chart Builder → `buildVSeed()` → VSeed Builder → VChart / VTable 渲染，HTML 指标复用查询结果并保留字段 ID。使用 HTML 时阅读[接入指南](references/usage/how-use-vbi-in-html.md)，按需查阅 [VBI API](references/api/vbi/index.md) 与 [VSeed API](references/api/vseed/index.md)。 +- 通过 Builder 维护自身筛选条件，保留其他条件；查询后复用实例调用 `updateSpec()`，同步指标动画与区间洞察。卡内联动复用缓存，防止旧结果覆盖；处理加载、空数据、错误、尺寸变化与资源释放。 +- Dashboard、Chart 与 Insight 使用同一 VBI 实例及资源 ID，组件提供 `layouts.lg`；可保存状态归所属 DSL，由 Builder 操作，UI 管理渲染与临时状态。需要恢复时保存 Dashboard 与引用资源，在新实例先注册资源再恢复，并明确外部数据和衍生公式的恢复方式。 + +产出：数据与交互完整、按需支持保存恢复的页面。 + +## Step4：验收与交付 + +- 核对汇总、筛选、比较及衍生指标，覆盖相关的空值、零分母和负值；在浏览器实际检查模板基线、筛选动画、卡内联动、连续操作、减少动态效果模式与控制台。承诺保存的配置须做 JSON 往返及新实例恢复，领域能力须可通过 DSL 与 Builder 独立使用。 +- 按[截图对照验收](references/best-practices/visual-acceptance.md)，在图表就绪后与所选模板做同视口桌面、窄屏对照，检查质量是否退步、设计差异是否清楚，以及同层级指标字号在汇总、筛选和局部查看时是否一致。保留有依据的差异；明显弱于模板时先修正再截图，不能以“已套用模板”或“能运行”替代验收。 +- 交付文件、运行入口、必要数据与接入说明，附最终截图、验证结果及限制；明确未验证范围，与 Step1 的交付范围一致。 + +产出：可运行、可检查的 Dashboard 与验收证据。 diff --git a/skills/vbi/references/api/chart-builder.md b/skills/light-dashboard/references/api/vbi/chart-builder.md similarity index 91% rename from skills/vbi/references/api/chart-builder.md rename to skills/light-dashboard/references/api/vbi/chart-builder.md index f9d14e2a47..340a8bb377 100644 --- a/skills/vbi/references/api/chart-builder.md +++ b/skills/light-dashboard/references/api/vbi/chart-builder.md @@ -1,5 +1,3 @@ - - # chartBuilder [API 索引](./index.md) @@ -41,7 +39,7 @@ import type { VSeedDSL } from '@visactor/vseed' ## VBIChartBuilder -源码：[packages/vbi/src/chart-builder/builder.ts](../../../../packages/vbi/src/chart-builder/builder.ts) +源码：[packages/vbi/src/chart-builder/builder.ts](https://github.com/VisActor/VBI/blob/main/packages/vbi/src/chart-builder/builder.ts) 包导出：`VBIChartBuilder` @@ -101,7 +99,7 @@ options = {} ## buildVQuery -源码：[packages/vbi/src/chart-builder/pipeline/vqueryDSL/index.ts](../../../../packages/vbi/src/chart-builder/pipeline/vqueryDSL/index.ts) +源码：[packages/vbi/src/chart-builder/pipeline/vqueryDSL/index.ts](https://github.com/VisActor/VBI/blob/main/packages/vbi/src/chart-builder/pipeline/vqueryDSL/index.ts) 包导出：`buildVQuery` @@ -113,7 +111,7 @@ const buildVQuery: (vbiDSL: VBIChartDSL, builder: VBIChartBuilderInterface ## SupportedMeasureEncoding -源码：[packages/vbi/src/chart-builder/features/chart-type/measure-encoding.ts](../../../../packages/vbi/src/chart-builder/features/chart-type/measure-encoding.ts) +源码：[packages/vbi/src/chart-builder/features/chart-type/measure-encoding.ts](https://github.com/VisActor/VBI/blob/main/packages/vbi/src/chart-builder/features/chart-type/measure-encoding.ts) 关联类型：通过公开 API 的签名引用，不是包入口的独立导出。 @@ -789,7 +787,7 @@ export type SupportedMeasureEncoding = NonNullable ## ThemeBuilder -源码：[packages/vbi/src/chart-builder/features/theme/theme-builder.ts](../../../../packages/vbi/src/chart-builder/features/theme/theme-builder.ts) +源码：[packages/vbi/src/chart-builder/features/theme/theme-builder.ts](https://github.com/VisActor/VBI/blob/main/packages/vbi/src/chart-builder/features/theme/theme-builder.ts) 包导出：`ThemeBuilder` @@ -828,7 +826,7 @@ export declare class ThemeBuilder { ## UndoManager -源码：[packages/vbi/src/chart-builder/features/undo-manager/undo-manager.ts](../../../../packages/vbi/src/chart-builder/features/undo-manager/undo-manager.ts) +源码：[packages/vbi/src/chart-builder/features/undo-manager/undo-manager.ts](https://github.com/VisActor/VBI/blob/main/packages/vbi/src/chart-builder/features/undo-manager/undo-manager.ts) 包导出：`UndoManager` @@ -892,7 +890,7 @@ options = {} ## UndoManagerOptions -源码：[packages/vbi/src/chart-builder/features/undo-manager/undo-manager.ts](../../../../packages/vbi/src/chart-builder/features/undo-manager/undo-manager.ts) +源码：[packages/vbi/src/chart-builder/features/undo-manager/undo-manager.ts](https://github.com/VisActor/VBI/blob/main/packages/vbi/src/chart-builder/features/undo-manager/undo-manager.ts) 包导出：`UndoManagerOptions` @@ -908,7 +906,7 @@ export interface UndoManagerOptions { ## WhereFilterBuilder -源码：[packages/vbi/src/chart-builder/features/whereFilter/where-builder.ts](../../../../packages/vbi/src/chart-builder/features/whereFilter/where-builder.ts) +源码：[packages/vbi/src/chart-builder/features/whereFilter/where-builder.ts](https://github.com/VisActor/VBI/blob/main/packages/vbi/src/chart-builder/features/whereFilter/where-builder.ts) 包导出：`WhereFilterBuilder` @@ -984,7 +982,7 @@ export declare class WhereFilterBuilder { ## WhereFilterNodeBuilder -源码：[packages/vbi/src/chart-builder/features/whereFilter/where-node-builder.ts](../../../../packages/vbi/src/chart-builder/features/whereFilter/where-node-builder.ts) +源码：[packages/vbi/src/chart-builder/features/whereFilter/where-node-builder.ts](https://github.com/VisActor/VBI/blob/main/packages/vbi/src/chart-builder/features/whereFilter/where-node-builder.ts) 关联类型：通过公开 API 的签名引用，不是包入口的独立导出。 @@ -1041,7 +1039,7 @@ export declare class WhereFilterNodeBuilder { ## WhereGroupBuilder -源码：[packages/vbi/src/chart-builder/features/whereFilter/where-group-builder.ts](../../../../packages/vbi/src/chart-builder/features/whereFilter/where-group-builder.ts) +源码：[packages/vbi/src/chart-builder/features/whereFilter/where-group-builder.ts](https://github.com/VisActor/VBI/blob/main/packages/vbi/src/chart-builder/features/whereFilter/where-group-builder.ts) 关联类型：通过公开 API 的签名引用，不是包入口的独立导出。 diff --git a/skills/vbi/references/api/dashboard-builder.md b/skills/light-dashboard/references/api/vbi/dashboard-builder.md similarity index 90% rename from skills/vbi/references/api/dashboard-builder.md rename to skills/light-dashboard/references/api/vbi/dashboard-builder.md index 3c2d1b9872..579de2edb4 100644 --- a/skills/vbi/references/api/dashboard-builder.md +++ b/skills/light-dashboard/references/api/vbi/dashboard-builder.md @@ -1,5 +1,3 @@ - - # dashboardBuilder [API 索引](./index.md) @@ -29,7 +27,7 @@ import type * as Y from 'yjs' ## VBIDashboardBuilder -源码：[packages/vbi/src/dashboard-builder/builder.ts](../../../../packages/vbi/src/dashboard-builder/builder.ts) +源码：[packages/vbi/src/dashboard-builder/builder.ts](https://github.com/VisActor/VBI/blob/main/packages/vbi/src/dashboard-builder/builder.ts) 包导出：`VBIDashboardBuilder` @@ -82,7 +80,7 @@ dependencies = {} ## DashboardChartBuilder -源码：[packages/vbi/src/dashboard-builder/features/chart/chart-builder.ts](../../../../packages/vbi/src/dashboard-builder/features/chart/chart-builder.ts) +源码：[packages/vbi/src/dashboard-builder/features/chart/chart-builder.ts](https://github.com/VisActor/VBI/blob/main/packages/vbi/src/dashboard-builder/features/chart/chart-builder.ts) 包导出：`DashboardChartBuilder` @@ -117,7 +115,7 @@ options = {} ## DashboardChartBuilderOptions -源码：[packages/vbi/src/dashboard-builder/features/chart/chart-builder.ts](../../../../packages/vbi/src/dashboard-builder/features/chart/chart-builder.ts) +源码：[packages/vbi/src/dashboard-builder/features/chart/chart-builder.ts](https://github.com/VisActor/VBI/blob/main/packages/vbi/src/dashboard-builder/features/chart/chart-builder.ts) 关联类型：通过公开 API 的签名引用，不是包入口的独立导出。 @@ -131,7 +129,7 @@ export interface DashboardChartBuilderOptions - # VBI API 从 `packages/vbi/src/index.ts` 的公开导出生成，并递归收录签名引用的本地类型及子 Builder。私有、受保护和 `@internal` 成员不属于公开 API。声明保留 JSDoc、重载、泛型、可选参数和推导返回值；Zod DSL 类型展开为字段定义。 -重新生成：在仓库根目录运行 `node skills/vbi/scripts/build-vbi-api.mjs`。脚本通过相对位置定位源码，与当前工作目录无关。请修改 TypeScript 源码或生成器，不要手工修改这些文件。 +此处保留公开 API 的参考快照。接口变更时按对应包的公开 TypeScript 声明更新签名与关联类型。 ## 分类 diff --git a/skills/vbi/references/api/insight-builder.md b/skills/light-dashboard/references/api/vbi/insight-builder.md similarity index 82% rename from skills/vbi/references/api/insight-builder.md rename to skills/light-dashboard/references/api/vbi/insight-builder.md index c96402d390..d565d3b26f 100644 --- a/skills/vbi/references/api/insight-builder.md +++ b/skills/light-dashboard/references/api/vbi/insight-builder.md @@ -1,5 +1,3 @@ - - # insightBuilder [API 索引](./index.md) @@ -14,7 +12,7 @@ import type * as Y from 'yjs' ## VBIInsightBuilder -源码：[packages/vbi/src/insight-builder/builder.ts](../../../../packages/vbi/src/insight-builder/builder.ts) +源码：[packages/vbi/src/insight-builder/builder.ts](https://github.com/VisActor/VBI/blob/main/packages/vbi/src/insight-builder/builder.ts) 包导出：`VBIInsightBuilder` diff --git a/skills/vbi/references/api/types.md b/skills/light-dashboard/references/api/vbi/types.md similarity index 85% rename from skills/vbi/references/api/types.md rename to skills/light-dashboard/references/api/vbi/types.md index ff24381720..5c40efb15e 100644 --- a/skills/vbi/references/api/types.md +++ b/skills/light-dashboard/references/api/vbi/types.md @@ -1,5 +1,3 @@ - - # DSL 与公共类型 [API 索引](./index.md) @@ -87,7 +85,7 @@ import { z } from 'zod' ## BuildVSeedOptions -源码：[packages/vbi/src/types/builder/build-vseed.ts](../../../../packages/vbi/src/types/builder/build-vseed.ts) +源码：[packages/vbi/src/types/builder/build-vseed.ts](https://github.com/VisActor/VBI/blob/main/packages/vbi/src/types/builder/build-vseed.ts) 包导出：`BuildVSeedOptions` @@ -99,7 +97,7 @@ export interface BuildVSeedOptions { ## ObserveCallback -源码：[packages/vbi/src/types/builder/observe.ts](../../../../packages/vbi/src/types/builder/observe.ts) +源码：[packages/vbi/src/types/builder/observe.ts](https://github.com/VisActor/VBI/blob/main/packages/vbi/src/types/builder/observe.ts) 包导出：`ObserveCallback` @@ -109,7 +107,7 @@ export type ObserveCallback = (e: YMapEvent, trans: Transaction) => void ## ObserveDeepCallback -源码：[packages/vbi/src/types/builder/observe.ts](../../../../packages/vbi/src/types/builder/observe.ts) +源码：[packages/vbi/src/types/builder/observe.ts](https://github.com/VisActor/VBI/blob/main/packages/vbi/src/types/builder/observe.ts) 包导出：`ObserveDeepCallback` @@ -119,7 +117,7 @@ export type ObserveDeepCallback = (events: YEvent[], trans: Transaction) => ## Schema -源码：[packages/vbi/src/types/connector/schema.ts](../../../../packages/vbi/src/types/connector/schema.ts) +源码：[packages/vbi/src/types/connector/schema.ts](https://github.com/VisActor/VBI/blob/main/packages/vbi/src/types/connector/schema.ts) 包导出：`VBISchema` @@ -129,7 +127,7 @@ export type Schema = { name: string; type: string }[] ## VBIChartBuilderAdapters -源码：[packages/vbi/src/types/builder/adapter.ts](../../../../packages/vbi/src/types/builder/adapter.ts) +源码：[packages/vbi/src/types/builder/adapter.ts](https://github.com/VisActor/VBI/blob/main/packages/vbi/src/types/builder/adapter.ts) 包导出：`VBIChartBuilderAdapters` @@ -144,7 +142,7 @@ export interface VBIChartBuilderAdapters - # VBI [API 索引](./index.md) @@ -36,7 +34,7 @@ ## VBI -源码：[packages/vbi/src/vbi.ts](../../../../packages/vbi/src/vbi.ts) +源码：[packages/vbi/src/vbi.ts](https://github.com/VisActor/VBI/blob/main/packages/vbi/src/vbi.ts) 包导出：`VBI` @@ -49,7 +47,7 @@ const VBI: VBIInstance ## createVBI -源码：[packages/vbi/src/vbi/create-vbi.ts](../../../../packages/vbi/src/vbi/create-vbi.ts) +源码：[packages/vbi/src/vbi/create-vbi.ts](https://github.com/VisActor/VBI/blob/main/packages/vbi/src/vbi/create-vbi.ts) 包导出：`createVBI` @@ -75,7 +73,7 @@ export declare function createVBI( ## VBIInstance -源码：[packages/vbi/src/vbi/types/vbi.ts](../../../../packages/vbi/src/vbi/types/vbi.ts) +源码：[packages/vbi/src/vbi/types/vbi.ts](https://github.com/VisActor/VBI/blob/main/packages/vbi/src/vbi/types/vbi.ts) 包导出：`VBIInstance` @@ -99,7 +97,7 @@ export interface VBIInstance( ## id -源码：[packages/vbi/src/utils/id.ts](../../../../packages/vbi/src/utils/id.ts) +源码：[packages/vbi/src/utils/id.ts](https://github.com/VisActor/VBI/blob/main/packages/vbi/src/utils/id.ts) 包导出：`id` @@ -201,7 +199,7 @@ const id: { ## InsightStore -源码：[packages/vbi/src/vbi/resources/insight-store.ts](../../../../packages/vbi/src/vbi/resources/insight-store.ts) +源码：[packages/vbi/src/vbi/resources/insight-store.ts](https://github.com/VisActor/VBI/blob/main/packages/vbi/src/vbi/resources/insight-store.ts) 关联类型：通过公开 API 的签名引用，不是包入口的独立导出。 @@ -213,7 +211,7 @@ export type InsightStore = ResourceStore ## isVBIFilter -源码：[packages/vbi/src/utils/filter-guards.ts](../../../../packages/vbi/src/utils/filter-guards.ts) +源码：[packages/vbi/src/utils/filter-guards.ts](https://github.com/VisActor/VBI/blob/main/packages/vbi/src/utils/filter-guards.ts) 包导出：`isVBIFilter` @@ -225,7 +223,7 @@ export declare function isVBIFilter(clause: VBIWhereClause): clause is VBIWhereF ## isVBIHavingFilter -源码：[packages/vbi/src/utils/filter-guards.ts](../../../../packages/vbi/src/utils/filter-guards.ts) +源码：[packages/vbi/src/utils/filter-guards.ts](https://github.com/VisActor/VBI/blob/main/packages/vbi/src/utils/filter-guards.ts) 包导出：`isVBIHavingFilter` @@ -237,7 +235,7 @@ export declare function isVBIHavingFilter(clause: VBIHavingClause): clause is VB ## isVBIHavingGroup -源码：[packages/vbi/src/utils/filter-guards.ts](../../../../packages/vbi/src/utils/filter-guards.ts) +源码：[packages/vbi/src/utils/filter-guards.ts](https://github.com/VisActor/VBI/blob/main/packages/vbi/src/utils/filter-guards.ts) 包导出：`isVBIHavingGroup` @@ -249,7 +247,7 @@ export declare function isVBIHavingGroup(clause: VBIHavingClause): clause is VBI ## isVBIWhereGroup -源码：[packages/vbi/src/utils/filter-guards.ts](../../../../packages/vbi/src/utils/filter-guards.ts) +源码：[packages/vbi/src/utils/filter-guards.ts](https://github.com/VisActor/VBI/blob/main/packages/vbi/src/utils/filter-guards.ts) 包导出：`isVBIWhereGroup` @@ -261,7 +259,7 @@ export declare function isVBIWhereGroup(clause: VBIWhereClause): clause is VBIWh ## preorderTraverse -源码：[packages/vbi/src/index.ts](../../../../packages/vbi/src/index.ts) +源码：[packages/vbi/src/index.ts](https://github.com/VisActor/VBI/blob/main/packages/vbi/src/index.ts) 包导出：`preorderTraverse` @@ -277,7 +275,7 @@ const preorderTraverse: ( ## ResourceStore -源码：[packages/vbi/src/vbi/resources/resource-store.ts](../../../../packages/vbi/src/vbi/resources/resource-store.ts) +源码：[packages/vbi/src/vbi/resources/resource-store.ts](https://github.com/VisActor/VBI/blob/main/packages/vbi/src/vbi/resources/resource-store.ts) 关联类型：通过公开 API 的签名引用，不是包入口的独立导出。 @@ -296,7 +294,7 @@ export interface ResourceStore { ## VBIChartNamespace -源码：[packages/vbi/src/vbi/types/chart.ts](../../../../packages/vbi/src/vbi/types/chart.ts) +源码：[packages/vbi/src/vbi/types/chart.ts](https://github.com/VisActor/VBI/blob/main/packages/vbi/src/vbi/types/chart.ts) 包导出：`VBIChartNamespace` @@ -317,7 +315,7 @@ export interface VBIChartNamespace Promise ## VBIConnectorLike -源码：[packages/vbi/src/vbi/types/connectors.ts](../../../../packages/vbi/src/vbi/types/connectors.ts) +源码：[packages/vbi/src/vbi/types/connectors.ts](https://github.com/VisActor/VBI/blob/main/packages/vbi/src/vbi/types/connectors.ts) 包导出：`VBIConnectorLike` @@ -367,7 +365,7 @@ export type VBIConnectorLike = VBIConnector | VBIConnectorFactory ## VBIConnectorNamespace -源码：[packages/vbi/src/vbi/types/connectors.ts](../../../../packages/vbi/src/vbi/types/connectors.ts) +源码：[packages/vbi/src/vbi/types/connectors.ts](https://github.com/VisActor/VBI/blob/main/packages/vbi/src/vbi/types/connectors.ts) 包导出：`VBIConnectorNamespace` @@ -389,7 +387,7 @@ export interface VBIConnectorNamespace { ## VBIDashboardNamespace -源码：[packages/vbi/src/vbi/types/dashboard.ts](../../../../packages/vbi/src/vbi/types/dashboard.ts) +源码：[packages/vbi/src/vbi/types/dashboard.ts](https://github.com/VisActor/VBI/blob/main/packages/vbi/src/vbi/types/dashboard.ts) 包导出：`VBIDashboardNamespace` @@ -410,7 +408,7 @@ export interface VBIDashboardNamespace implements VSeedBuilder { + /** + * @description 初始化 Builder 实例 + */ + constructor(vseed: VSeed) + /** + * @description 获取当前 Builder 使用的语言环境 + */ + get locale(): 'zh-CN' | 'en-US' | 'ja-JP' | 'de-DE' | 'id-ID' | 'fr-FR' | 'ko-KR' | 'vi-VN' + /** + * @description 异步执行动态过滤器代码。在 build() 前调用，用于执行 dynamicFilter 中的 code。幂等方法，多次调用不会重复执行 + */ + prepare: () => Promise + /** + * @description 生成最终的图表配置 (Spec)。这是最常用的核心方法。如果配置中包含 dynamicFilter code，需要先调用 prepare() + */ + build: () => T + /** + * @description 将中间层配置 (AdvancedVSeed) 转换为最终 Spec。仅当你需要深度定制中间层配置时使用 + */ + buildSpec: (advanced: AdvancedVSeed) => T + /** + * @description 生成中间层配置 (AdvancedVSeed)，即图表模版。比原始 VSeed 更详细，暴露了更多图表细节 + */ + buildAdvanced: () => AdvancedVSeed | null + /** + * @description 获取数据中涉及颜色的字段信息。常用于生成图表的图例或颜色筛选器 UI + */ + getColorItems: () => { + id: string + alias: string + }[] + /** + * @description 获取颜色字段的详细映射表。Key 为颜色 ID，Value 为详细信息 + */ + getColorIdMap: () => Record< + string, + { + id: string + alias: string + } + > + /** + * @description 获取离散颜色图中 colorId 到最终颜色值的映射 + */ + getColorValueMap: () => Record | undefined + /** + * @description 获取当前的 VSeed 输入数据 + */ + get vseed(): VSeed + /** + * @description 更新 VSeed 输入数据。更新后会清除 prepare() 的缓存状态 + */ + set vseed(value: VSeed) + /** + * @description 获取 prepare() 状态 + */ + get isPrepared(): boolean + /** + * @description 设置 prepare() 状态 + */ + set isPrepared(value: boolean) + /** + * @description 获取当前的 AdvancedVSeed 中间配置对象 + */ + get advancedVSeed(): AdvancedVSeed | null + /** + * @description 设置 AdvancedVSeed 中间配置对象。通常用于缓存或复用已有的中间配置 + */ + set advancedVSeed(value: AdvancedVSeed | null) + /** + * @description 获取当前生成的最终 Spec 对象 + */ + get spec(): Spec | null + /** + * @description 设置 Spec 对象。通常用于缓存 + */ + set spec(value: Spec | null) + /** + * @description 获取构建过程中的性能统计信息。包含各阶段耗时 (单位: ms) + */ + get performance(): Record + /** + * @description 设置性能统计信息 + */ + set performance(value: Record) + /** + * @description [内部方法] 获取指定图表类型的模版构建管线，用于调试 VSeed 到 AdvancedVSeed 的转换过程 + */ + static getAdvancedPipeline: ( + chartType: ChartType, + ) => import('src/types').Pipe[] + /** + * @description [内部方法] 获取指定图表类型的 Spec 构建管线，用于调试 AdvancedVSeed 到 Spec 的转换过程 + */ + static getSpecPipeline: (chartType: ChartType) => SpecPipe[] + /** + * @description 获取指定主题的配置。不传 themeKey 默认返回 'light' 主题 + */ + static getTheme: (themeKey?: string) => CustomThemeConfig + /** + * @description 获取所有已注册的主题配置 + */ + static getThemeMap: () => Record + /** + * @description 静态工厂方法，用于便捷地创建 Builder 实例 + */ + static from: (vseed: VSeed) => Builder + /** + * @description [扩展方法] 注册新图表类型的模版构建管线 + */ + static registerAdvancedPipeline: (chartType: ChartType, pipeline: AdvancedPipeline) => void + /** + * @description [扩展方法] 注册新图表类型的 Spec 构建管线 + */ + static registerSpecPipeline: (chartType: ChartType, pipeline: SpecPipeline) => void + /** + * @description [扩展方法] 修改现有图表的模版构建逻辑，插入自定义 Pipe 影响生成的 AdvancedVSeed + */ + static updateAdvanced: (chartType: ChartType, pipe: AdvancedPipe) => void + /** + * @description [扩展方法] 修改现有图表的 Spec 构建逻辑，插入自定义 Pipe 影响生成的最终 Spec + */ + static updateSpec: (chartType: ChartType, pipe: SpecPipe) => void + /** + * @description [扩展方法] 注册自定义主题 + */ + static registerTheme: (key: string, theme: CustomThemeConfig) => void +} +``` + +关联 API：[AdvancedPipe](pipeline.md#advancedpipe)、[AdvancedPipeline](pipeline.md#advancedpipeline)、[AdvancedPipelineContext](pipeline.md#advancedpipelinecontext)、[AdvancedVSeed](types.md#advancedvseed)、[ChartType](types.md#charttype)、[CustomThemeConfig](types.md#customthemeconfig)、[Pipe](pipeline.md#pipe)、[Spec](builder.md#spec)、[SpecPipe](pipeline.md#specpipe)、[SpecPipeline](pipeline.md#specpipeline)、[VSeed](types.md#vseed)、[VSeedBuilder](builder.md#vseedbuilder) + +## VSeedBuilder + +源码：[packages/vseed/src/types/builder/builder.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/builder/builder.ts) + +包导出：`VSeedBuilder` + +```typescript +export declare abstract class VSeedBuilder { + abstract build: () => Spec + abstract buildAdvanced: () => AdvancedVSeed | null + abstract buildSpec: (advancedVSeed: AdvancedVSeed) => Spec + abstract prepare: () => Promise + static getAdvancedPipeline: (chartType: ChartType) => AdvancedPipeline + static getSpecPipeline: (chartType: ChartType) => SpecPipeline + static getTheme: (themeKey: string) => CustomThemeConfig + static getThemeMap: () => Record + abstract getColorItems: () => { + id: string + alias: string + }[] + abstract getColorIdMap: () => Record< + string, + { + id: string + alias: string + } + > + abstract getColorValueMap: () => Record | undefined + abstract get spec(): Spec | null + abstract set spec(value: Spec | null) + abstract get vseed(): VSeed + abstract set vseed(value: VSeed) + abstract get advancedVSeed(): AdvancedVSeed | null + abstract set advancedVSeed(value: AdvancedVSeed | null) +} +``` + +关联 API：[AdvancedPipeline](pipeline.md#advancedpipeline)、[AdvancedVSeed](types.md#advancedvseed)、[ChartType](types.md#charttype)、[CustomThemeConfig](types.md#customthemeconfig)、[Spec](builder.md#spec)、[SpecPipeline](pipeline.md#specpipeline)、[VSeed](types.md#vseed) + +## Spec + +源码：[packages/vseed/src/types/builder/spec.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/builder/spec.ts) + +包导出：`Spec` + +```typescript +export type Spec = ISpec | PivotChartConstructorOptions | PivotTableConstructorOptions | ListTableConstructorOptions +``` diff --git a/skills/light-dashboard/references/api/vseed/chart-types.md b/skills/light-dashboard/references/api/vseed/chart-types.md new file mode 100644 index 0000000000..1ba74e2c47 --- /dev/null +++ b/skills/light-dashboard/references/api/vseed/chart-types.md @@ -0,0 +1,4995 @@ +# 图表与表格 DSL + +[API 索引](./index.md) + +- [Area](chart-types.md#area) +- [AreaPercent](chart-types.md#areapercent) +- [Bar](chart-types.md#bar) +- [BarParallel](chart-types.md#barparallel) +- [BarPercent](chart-types.md#barpercent) +- [BoxPlot](chart-types.md#boxplot) +- [CirclePacking](chart-types.md#circlepacking) +- [Column](chart-types.md#column) +- [ColumnParallel](chart-types.md#columnparallel) +- [ColumnPercent](chart-types.md#columnpercent) +- [Donut](chart-types.md#donut) +- [DualAxis](chart-types.md#dualaxis) +- [Funnel](chart-types.md#funnel) +- [Heatmap](chart-types.md#heatmap) +- [HierarchySankey](chart-types.md#hierarchysankey) +- [Histogram](chart-types.md#histogram) +- [Line](chart-types.md#line) +- [Pie](chart-types.md#pie) +- [PivotTable](chart-types.md#pivottable) +- [RaceBar](chart-types.md#racebar) +- [RaceColumn](chart-types.md#racecolumn) +- [RaceDonut](chart-types.md#racedonut) +- [RaceLine](chart-types.md#raceline) +- [RacePie](chart-types.md#racepie) +- [RaceScatter](chart-types.md#racescatter) +- [Radar](chart-types.md#radar) +- [Rose](chart-types.md#rose) +- [RoseParallel](chart-types.md#roseparallel) +- [Sankey](chart-types.md#sankey) +- [Scatter](chart-types.md#scatter) +- [Sunburst](chart-types.md#sunburst) +- [Table](chart-types.md#table) +- [TreeMap](chart-types.md#treemap) + +## Area + +源码：[packages/vseed/src/types/chartType/area/area.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/chartType/area/area.ts) + +包导出：`Area` + +````typescript +/** + * @recommend + * - 推荐字段配置: `1`个指标, `2`个维度 + * - 支持数据重塑: 至少`1`个指标, `0`个维度 + * @encoding + * 面积图支持以下视觉通道: + * `xAxis` : x轴通道, 支持`多个维度`, 按维度值映射至x轴 + * `yAxis` : y轴通道, 支持`多个指标`, 按指标值映射至y轴 + * `color` : 颜色通道, 支持`多个维度`或 `一个指标`, 维度颜色用于区分不同的数据系列, 指标颜色用于线性映射指标值到图形颜色 + * `tooltip`: 提示通道, 支持`多个维度`与 `多个指标`, 会在鼠标悬停在数据点上时展示 + * `label` : 标签通道, 支持`多个维度`与 `多个指标`, 会在数据点上展示数据标签 + * + * @description 面积图, 适用于展示数据随时间变化的趋势及累积关系, 通过填充区域增强数据对比. X轴为类目轴(分类数据), Y轴为数值轴(连续数据). + * 适用场景: + * - 展示单一数据系列的趋势变化 + * - 强调总量随时间的累积效果 + * - 对比多个数据系列的总量差异 + * @warning + * 数据要求: + * - 至少1个指标字段（度量） + * - 第一个维度字段映射到X轴，其余维度字段会与指标名称(存在多个指标时)合并, 作为图例项展示. + * - 所有指标会自动合并为一个指标 + * 默认开启的功能: + * - 模块开启堆叠 + * - 默认开启图例、坐标轴、区域填充、数据标签、提示信息 + */ +export interface Area { + /** + * 面积图 + * @description 面积图，展示数据趋势及累积关系的图表类型 + * @type {'area'} + * @example + * ```js {2} + * { + * chartType: 'area', + * dataset: [{month:'1月', value:100}, {month:'2月', value:150}, {month:'3月', value:120}], + * } + * ``` + */ + chartType: 'area' + /** + * 数据集 + * @description 符合TidyData规范的且已经聚合的数据集，用于定义图表的数据来源和结构, 用户输入的数据集并不需要进行任何处理, VSeed带有强大的数据重塑功能, 会自行进行数据重塑, 面积图的数据最终会被转换为2个维度, 1个指标. + * @type {Array>} + * @example [{month:'1月', value:100}, {month:'2月', value:150}, {month:'3月', value:120}] + */ + dataset: Dataset + /** + * 维度 + * @description 第一个维度被映射到X轴, 其余维度会与指标名称(存在多个指标时)合并, 作为图例项展示. + * @example [{ id: 'month', alias: '月份' }, { id: 'year', alias: '年份' }] + */ + dimensions?: ColumnDimension[] + /** + * 指标 + * @description 面积图的指标会自动合并为一个指标, 映射到Y轴, 指标名称会与其余维度合并, 作为图例项展示. + * @example [{id: 'value', alias: '数值'}] + */ + measures?: ColumnMeasure[] + /** + * 分页 + * @description 分页配置，用于配置图表的分页功能 + */ + page?: Page + /** + * 图表的背景颜色 + * @default transparent 默认为透明背景 + * @description 背景颜色可以是颜色字符串, 例如'red', 'blue', 也可以是hex, rgb或rgba'#ff0000', 'rgba(255,0,0,0.5)' + */ + backgroundColor?: BackgroundColor + /** + * 颜色 + * @description 颜色配置, 用于定义图表的颜色方案, 包括颜色列表, 颜色映射, 颜色渐变等. + */ + color?: Color + /** + * 标签 + * @description 标签配置, 用于定义图表的数据标签, 包括数据标签的位置, 格式, 样式等. + */ + label?: Label + /** + * 图例 + * @description 图例配置, 用于定义图表的图例, 包括图例的位置, 格式, 样式等. + */ + legend?: Legend + /** + * 绘图区内边距 + * @description 映射到 VChart 的 region[0].padding，用于为标注、标签等绘图区外扩元素预留空间。 + */ + regionPadding?: RegionPadding + /** + * 提示信息 + * @description 提示信息配置, 用于定义图表的提示信息, 包括提示信息的位置, 格式, 样式等. + */ + tooltip?: Tooltip + /** + * 框选 + * @description 框选配置，用于开启/关闭 brush 框选能力 + */ + brush?: Brush + /** + * 动画配置 + * @description 图表动画配置，按图表类型约束可选效果 + */ + animation?: LineAreaAnimation + /** + * x轴 + * @description 类目轴, x轴配置, 用于定义图表的x轴, 包括x轴的位置, 格式, 样式等. + */ + xAxis?: XBandAxis + /** + * y轴 + * @description 数值轴, y轴配置, 用于定义图表的y轴, 包括y轴的位置, 格式, 样式等. + */ + yAxis?: YLinearAxis + /** + * 垂直提示线 + * @description 鼠标移动到图表上时, 显示的垂直提示线 + */ + crosshairLine?: CrosshairLine + /** + * @description X轴排序配置, 支持根据维度或指标排序, 以及自定义排序顺序 + * @example + * sort: { + * orderBy: 'profit', + * order: 'asc', + * } + * sort: { + * customOrder:['2019', '2020', '2021'] + * } + */ + sort?: Sort + /** + * @description 图例排序配置, 支持根据维度或指标排序, 以及自定义排序顺序 + * @example + * sortLegend: { + * orderBy: 'profit', + * order: 'asc', + * } + * sortLegend: { + * customOrder:['2019', '2020', '2021'] + * } + */ + sortLegend?: SortLegend + /** + * 图表的主题, 主题是优先级较低的功能配置, 包含所有图表类型共用的通用配置, 与单类图表类型共用的图表配置 + * @default light 默认为亮色主题 + * @description 内置light与dark两种主题, 用户可以通过Builder自定义主题 + * @example 'dark' + * @example 'light' + * @example 'customThemeName' + */ + theme?: Theme + /** + * @description 点图元样式配置, 用于定义图表的点图元样式, 包括点图元的颜色, 边框等. + * 支持全局样式或条件样式配置 + * 数据筛选器 + * 若配置selector, 提供数值 selector, 局部数据 selector, 条件维度 selector, 条件指标 selector 共四类数据匹配能力 + * 若未配置selector, 则样式全局生效. + */ + pointStyle?: PointStyle | PointStyle[] + /** + * @description 线图元样式配置, 用于定义图表的线图元样式, 包括线图元的颜色, 透明度, 曲线等. + * 支持全局样式或条件样式配置 + * 数据筛选器 + * 若配置selector, 提供数值 selector, 局部数据 selector, 条件维度 selector, 条件指标 selector 共四类数据匹配能力 + * 若未配置selector, 则样式全局生效. + */ + lineStyle?: LineStyle | LineStyle[] + /** + * @description 面积图元样式配置, 用于定义图表的面积图元样式, 包括面积图元的颜色, 透明度, 边框等. + * 支持全局样式或条件样式配置 + * 数据筛选器 + * 若配置selector, 提供数值 selector, 局部数据 selector, 条件维度 selector, 条件指标 selector 共四类数据匹配能力 + * 若未配置selector, 则样式全局生效. + */ + areaStyle?: AreaStyle | AreaStyle[] + /** + * @description 标注点配置, 根据选择的数据, 定义图表的标注点, 包括标注点的位置, 格式, 样式等. + */ + annotationPoint?: AnnotationPoint | AnnotationPoint[] + /** + * @description 维度值标注线，竖直方向展示，能够设置标注线的位置, 样式等 + */ + annotationVerticalLine?: AnnotationVerticalLine | AnnotationVerticalLine[] + /** + * @description 数值标注线(包括均值线、最大值线、最小值线等)，水平方向展示，能够设置标注线的位置, 样式等，如需绘制均值线等数值对应的标注线请使用该配置 + */ + annotationHorizontalLine?: AnnotationHorizontalLine | AnnotationHorizontalLine[] + /** + * 标注区域 + * @description 标注区域配置, 根据选择的数据, 定义图表的标注区域, 包括标注区域的位置, 样式等. + */ + annotationArea?: AnnotationArea | AnnotationArea[] + /** + * 差异标注线 + * @description 根据两个选中的数据点，绘制差异标注线并自动计算差异文本。 + */ + annotationDifferenceLine?: AnnotationDifferenceLine | AnnotationDifferenceLine[] + /** + * @description 当图表开启透视功能或者指标组合的是否，是否开启维度联动功能 + * 当hover 到某个维度值时，联动高亮其他图表中相同维度值的数据 + */ + dimensionLinkage?: DimensionLinkage + /** + * 语言 + * @description 图表语言配置, 支持'zh-CN'与'en-US'两种语言, 另外可以调用 intl.setLocale('zh-CN') 方法设置语言 + * @default 'zh-CN' + */ + locale?: Locale +} +```` + +关联 API：[AnnotationArea](types.md#annotationarea)、[AnnotationDifferenceLine](types.md#annotationdifferenceline)、[AnnotationHorizontalLine](types.md#annotationhorizontalline)、[AnnotationPoint](types.md#annotationpoint)、[AnnotationVerticalLine](types.md#annotationverticalline)、[AreaStyle](types.md#areastyle)、[BackgroundColor](types.md#backgroundcolor)、[Brush](types.md#brush)、[Color](types.md#color)、[ColumnDimension](types.md#columndimension)、[ColumnMeasure](types.md#columnmeasure)、[CrosshairLine](types.md#crosshairline)、[Dataset](types.md#dataset)、[DimensionLinkage](types.md#dimensionlinkage)、[Label](types.md#label)、[Legend](types.md#legend)、[LineAreaAnimation](types.md#lineareaanimation)、[LineStyle](types.md#linestyle)、[Locale](i18n.md#locale)、[Page](types.md#page)、[PointStyle](types.md#pointstyle)、[RegionPadding](types.md#regionpadding)、[Sort](types.md#sort)、[SortLegend](types.md#sortlegend)、[Theme](types.md#theme)、[Tooltip](types.md#tooltip)、[XBandAxis](types.md#xbandaxis)、[YLinearAxis](types.md#ylinearaxis) + +## AreaPercent + +源码：[packages/vseed/src/types/chartType/areaPercent/areaPercent.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/chartType/areaPercent/areaPercent.ts) + +包导出：`AreaPercent` + +```typescript +/** + * @description 百分比面积图，适用于展示多类别占比随时间变化的趋势，Y轴以百分比形式展示占比关系 + * 适用场景: + * - 时间序列的构成变化分析 + * - 多类别占比趋势对比 + * - 累积占比与单一类别占比同时展示 + * @encoding + * 百分比面积图支持以下视觉通道: + * `xAxis` : x轴通道, 支持`多个维度`, 按维度值映射至x轴 + * `yAxis` : y轴通道, 支持`多个指标`, 按指标值映射至y轴 + * `color` : 颜色通道, 支持`多个维度`或 `一个指标`, 维度颜色用于区分不同的数据系列, 指标颜色用于线性映射指标值到图形颜色 + * `tooltip`: 提示通道, 支持`多个维度`与 `多个指标`, 会在鼠标悬停在数据点上时展示 + * `label` : 标签通道, 支持`多个维度`与 `多个指标`, 会在数据点上展示数据标签 + * @warning + * 数据要求: + * - 至少1个指标字段（度量） + * - 第一个维度会放至Y轴, 其余维度会与指标名称(存在多个指标时)合并, 作为图例项展示. + * - 所有指标会自动合并为一个指标 + * 默认开启的功能: + * - 默认开启图例、坐标轴、百分比标签、提示信息、占比计算 + * @recommend + * - 推荐字段配置: `1`个指标, `2`个维度 + * - 支持数据重塑: 至少`1`个指标, `0`个维度 + */ +export interface AreaPercent { + /** + * 百分比面积图 + * @description 百分比面积图，以百分比形式展示多类别占比随某个维度的变化 + * @type {'areaPercent'} + * @example 'areaPercent' + */ + chartType: 'areaPercent' + /** + * 数据集 + * @description 符合TidyData规范的且已经聚合的数据集，用于定义图表的数据来源和结构, 用户输入的数据集并不需要进行任何处理, VSeed带有强大的数据重塑功能, 会自行进行数据重塑, 百分比面积图的数据最终会被转换为2个维度, 1个指标. + * @type {Array>} + * @example [{month:'1月', category:'A', value:30}, {month:'1月', category:'B', value:70}] + */ + dataset: Dataset + /** + * 维度 + * @description 第一个维度被映射到X轴, 其余维度会与指标名称(存在多个指标时)合并, 作为图例项展示. + * @example [{ id: 'month', alias: '月份' }, { id: 'year', alias: '年份' }] + */ + dimensions?: ColumnDimension[] + /** + * 指标 + * @description 百分比面积图的指标会自动合并为一个指标, 映射到Y轴, 指标名称会与其余维度合并, 作为图例项展示. + * @example [{id: 'value', alias: '数值占比', format: 'percent'}] + */ + measures?: ColumnMeasure[] + /** + * 分页 + * @description 分页配置，用于配置图表的分页功能 + */ + page?: Page + /** + * 图表的背景颜色 + * @default transparent 默认为透明背景 + * @description 背景颜色可以是颜色字符串, 例如'red', 'blue', 也可以是hex, rgb或rgba'#ff0000', 'rgba(255,0,0,0.5)' + */ + backgroundColor?: BackgroundColor + /** + * 颜色 + * @description 颜色配置, 用于定义图表的颜色方案, 包括颜色列表, 颜色映射, 颜色渐变等. + */ + color?: Color + /** + * 标签 + * @description 标签配置, 用于定义图表的数据标签, 包括数据标签的位置, 格式, 样式等. + */ + label?: Label + /** + * 图例 + * @description 图例配置, 用于定义图表的图例, 包括图例的位置, 格式, 样式等. + */ + legend?: Legend + /** + * 绘图区内边距 + * @description 映射到 VChart 的 region[0].padding，用于为标注、标签等绘图区外扩元素预留空间。 + */ + regionPadding?: RegionPadding + /** + * 提示信息 + * @description 提示信息配置, 用于定义图表的提示信息, 包括提示信息的位置, 格式, 样式等. + */ + tooltip?: Tooltip + /** + * 框选 + * @description 框选配置，用于开启/关闭 brush 框选能力 + */ + brush?: Brush + /** + * 动画配置 + * @description 图表动画配置，按图表类型约束可选效果 + */ + animation?: LineAreaAnimation + /** + * x轴 + * @description 类目轴, x轴配置, 用于定义图表的x轴, 包括x轴的位置, 格式, 样式等. + */ + xAxis?: XBandAxis + /** + * y轴 + * @description 数值轴, y轴配置, 用于定义图表的y轴, 包括y轴的位置, 格式, 样式等. + */ + yAxis?: YLinearAxis + /** + * 垂直提示线 + * @description 鼠标移动到图表上时, 显示的垂直提示线 + */ + crosshairLine?: CrosshairLine + /** + * @description X轴排序配置, 支持根据维度或指标排序, 以及自定义排序顺序 + * @example + * sort: { + * orderBy: 'profit', + * order: 'asc', + * } + * sort: { + * customOrder:['2019', '2020', '2021'] + * } + */ + sort?: Sort + /** + * @description 图例排序配置, 支持根据维度或指标排序, 以及自定义排序顺序 + * @example + * sortLegend: { + * orderBy: 'profit', + * order: 'asc', + * } + * sortLegend: { + * customOrder:['2019', '2020', '2021'] + * } + */ + sortLegend?: SortLegend + /** + * 图表的主题, 主题是优先级较低的功能配置, 包含所有图表类型共用的通用配置, 与单类图表类型共用的图表配置 + * @default light 默认为亮色主题 + * @description 内置light与dark两种主题, 用户可以通过Builder自定义主题 + * @example 'dark' + * @example 'light' + * @example 'customThemeName' + */ + theme?: Theme + /** + * 点图元样式 + * @description 点图元样式配置, 用于定义图表的点图元样式, 包括点图元的颜色, 边框等. + * 支持全局样式或条件样式配置 + * 数据筛选器 + * 若配置selector, 提供数值 selector, 局部数据 selector, 条件维度 selector, 条件指标 selector 共四类数据匹配能力 + * 若未配置selector, 则样式全局生效. + */ + pointStyle?: PointStyle | PointStyle[] + /** + * 线图元样式 + * @description 线图元样式配置, 用于定义图表的线图元样式, 包括线图元的颜色, 透明度, 曲线等. + * 支持全局样式或条件样式配置 + * 数据筛选器 + * 若配置selector, 提供数值 selector, 局部数据 selector, 条件维度 selector, 条件指标 selector 共四类数据匹配能力 + * 若未配置selector, 则样式全局生效. + */ + lineStyle?: LineStyle | LineStyle[] + /** + * 面积图元样式 + * @description 面积图元样式配置, 用于定义图表的面积图元样式, 包括面积图元的颜色, 透明度, 边框等. + * 支持全局样式或条件样式配置 + * 数据筛选器 + * 若配置selector, 提供数值 selector, 局部数据 selector, 条件维度 selector, 条件指标 selector 共四类数据匹配能力 + * 若未配置selector, 则样式全局生效. + */ + areaStyle?: AreaStyle | AreaStyle[] + /** + * 标注点 + * @description 标注点配置, 根据选择的数据, 定义图表的标注点, 包括标注点的位置, 格式, 样式等. + */ + annotationPoint?: AnnotationPoint | AnnotationPoint[] + /** + * @description 维度值标注线，竖直方向展示，能够设置标注线的位置, 样式等 + */ + annotationVerticalLine?: AnnotationVerticalLine | AnnotationVerticalLine[] + /** + * @description 数值标注线(包括均值线、最大值线、最小值线等)，水平方向展示，能够设置标注线的位置, 样式等，如需绘制均值线等数值对应的标注线请使用该配置 + */ + annotationHorizontalLine?: AnnotationHorizontalLine | AnnotationHorizontalLine[] + /** + * 标注区域 + * @description 标注区域配置, 根据选择的数据, 定义图表的标注区域, 包括标注区域的位置, 样式等. + */ + annotationArea?: AnnotationArea | AnnotationArea[] + /** + * @description 当图表开启透视功能或者指标组合的是否，是否开启维度联动功能 + * 当hover 到某个维度值时，联动高亮其他图表中相同维度值的数据 + */ + dimensionLinkage?: DimensionLinkage + /** + * 语言 + * @description 图表语言配置, 支持'zh-CN'与'en-US'两种语言, 另外可以调用 intl.setLocale('zh-CN') 方法设置语言 + * @default 'zh-CN' + */ + locale?: Locale +} +``` + +关联 API：[AnnotationArea](types.md#annotationarea)、[AnnotationHorizontalLine](types.md#annotationhorizontalline)、[AnnotationPoint](types.md#annotationpoint)、[AnnotationVerticalLine](types.md#annotationverticalline)、[AreaStyle](types.md#areastyle)、[BackgroundColor](types.md#backgroundcolor)、[Brush](types.md#brush)、[Color](types.md#color)、[ColumnDimension](types.md#columndimension)、[ColumnMeasure](types.md#columnmeasure)、[CrosshairLine](types.md#crosshairline)、[Dataset](types.md#dataset)、[DimensionLinkage](types.md#dimensionlinkage)、[Label](types.md#label)、[Legend](types.md#legend)、[LineAreaAnimation](types.md#lineareaanimation)、[LineStyle](types.md#linestyle)、[Locale](i18n.md#locale)、[Page](types.md#page)、[PointStyle](types.md#pointstyle)、[RegionPadding](types.md#regionpadding)、[Sort](types.md#sort)、[SortLegend](types.md#sortlegend)、[Theme](types.md#theme)、[Tooltip](types.md#tooltip)、[XBandAxis](types.md#xbandaxis)、[YLinearAxis](types.md#ylinearaxis) + +## Bar + +源码：[packages/vseed/src/types/chartType/bar/bar.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/chartType/bar/bar.ts) + +包导出：`Bar` + +```typescript +/** + * @description 条形图，适用于横向数据对比场景，Y轴为类目轴（分类数据），X轴为数值轴（连续数据），柱子横向排列 + * 适用场景: + * - 数据项名称较长时 + * - 需要展示数据排名对比 + * - 展示正负双向数据 + * @encoding + * 条形图支持以下视觉通道: + * `yAxis` : y轴通道, 支持`多个维度`, 按维度值映射至y轴 + * `xAxis` : x轴通道, 支持`多个指标`, 按指标值映射至x轴 + * `detail` : 细分通道, 支持`多个维度`, 在同一个颜色系列下展示更细粒度的数据时使用 + * `color` : 颜色通道, 支持`多个维度`或 `一个指标`, 维度颜色用于区分不同的数据系列, 指标颜色用于线性映射指标值到图形颜色 + * `tooltip`: 提示通道, 支持`多个维度`与 `多个指标`, 会在鼠标悬停在数据点上时展示 + * `label` : 标签通道, 支持`多个维度`与 `多个指标`, 会在数据点上展示数据标签 + * @warning + * 数据要求: + * - 至少1个指标（度量） + * - 第一个维度会放至Y轴, 其余维度会与指标名称(存在多个指标时)合并, 作为图例项展示. + * - 所有指标会自动合并为一个指标 + * 默认开启的功能: + * - 默认开启图例、坐标轴、数据标签、提示信息 + * @recommend + * - 推荐字段配置: `1`个指标, `2`个维度 + * - 支持数据重塑: 至少`1`个指标, `0`个维度 + */ +export interface Bar { + /** + * @description 条形图，适用于横向数据对比场景，Y轴为类目轴（分类数据），X轴为数值轴（连续数据），柱子横向排列 + * @type {'bar'} + * @example 'bar' + */ + chartType: 'bar' + /** + * @description 数据源, 符合TidyData规范的且已经聚合的数据集，用于定义图表的数据来源和结构, 用户输入的数据集并不需要进行任何处理, VSeed带有强大的数据重塑功能, 会自行进行数据重塑, 条形图的数据最终会被转换为2个维度, 1个指标. + * @type {Array>} + * @example [{date:'2020-01-01', value:100}, {date:'2020-01-02', value:200}] + */ + dataset: Dataset + /** + * @description 维度, 第一个维度被映射到Y轴, 其余维度会与指标名称(存在多个指标时)合并, 作为图例项展示. + * @example [{id: "date", alias: "日期"}, {id: "value", alias: "数值"}] + */ + dimensions?: BarDimension[] + /** + * 指标 + * @description 指标, 条形图指标会自动合并为一个指标, 映射到X轴, 存在多个指标时, 指标名称会与其余维度合并, 作为图例项展示. + * @example [{id: "value", alias: "数值"}] + */ + measures?: BarMeasure[] + /** + * 分页 + * @description 分页配置，用于配置图表的分页功能 + */ + page?: Page + /** + * @description 图表的背景颜色, 默认为透明背景, 背景颜色可以是颜色字符串, 例如'red', 'blue', 也可以是hex, rgb或rgba'#ff0000', 'rgba(255,0,0,0.5)' + */ + backgroundColor?: BackgroundColor + /** + * 颜色 + * @description 颜色配置, 用于定义图表的颜色方案, 包括颜色列表, 颜色映射, 颜色渐变等. + */ + color?: Color + /** + * @description 标签配置, 用于定义图表的数据标签, 包括数据标签的位置, 格式, 样式等. + */ + label?: Label + /** + * @description 图例配置, 用于定义图表的图例, 包括图例的位置, 格式, 样式等. + */ + legend?: Legend + /** + * 绘图区内边距 + * @description 映射到 VChart 的 region[0].padding，用于为标注、标签等绘图区外扩元素预留空间。 + */ + regionPadding?: RegionPadding + /** + * @description 提示信息配置, 用于定义图表的提示信息, 包括提示信息的位置, 格式, 样式等. + */ + tooltip?: Tooltip + /** + * 框选 + * @description 框选配置，用于开启/关闭 brush 框选能力 + */ + brush?: Brush + /** + * 动画配置 + * @description 图表动画配置，按图表类型约束可选效果 + */ + animation?: BarLikeAnimation + /** + * @description x轴, 数值轴, x轴配置, 用于定义图表的x轴, 包括x轴的位置, 格式, 样式等. + */ + xAxis?: XLinearAxis + /** + * @description y轴, 类目轴, y轴配置, 用于定义图表的y轴, 包括y轴的位置, 格式, 样式等. + */ + yAxis?: YBandAxis + /** + * @description 水平提示框配置, 用于定义图表的水平提示框, 包括水平提示框的颜色、标签样式等. + */ + crosshairRect?: CrosshairRect + /** + * @description 柱图圆角的数值或数组，默认启用。当 stackCornerRadius 为 false 时，每个图元独立绘制圆角；为 true 时，通过 clip 裁剪整组堆叠柱体。数值设置所有角，数组按左上、右上、右下、左下排列，数据为负值时圆角方向自动翻转。设为 0 可关闭。barStyle.barRadius 可覆盖单个图元的圆角；stackCornerRadius 为 true 时，整组圆角统一使用 cornerRadius，不受 barStyle.barRadius 影响。 + * @default [0, 4, 4, 0] + * @example [4, 4, 0, 0] + */ + cornerRadius?: CornerRadius + /** + * @description 是否使用整组堆叠圆角，默认 false。设为 true 时，通过 clip 裁剪整组柱体，圆角值统一读取 cornerRadius，保留堆叠内部的直角连接，并优先于 barStyle.barRadius（包括条件样式）。设为 false 时，cornerRadius 对每个图元单独生效。注意：开启 stackCornerRadius 会引起更新动画重叠的 bug，整组 clip 裁剪路径与图元更新动画不同步，依赖 VChart 修复；需要平滑更新动画时建议保持 false。 + * @default false + * @example true + */ + stackCornerRadius?: StackCornerRadius + /** + * @description 矩形的最大高度，可以是像素值或者百分比字符串 + */ + barMaxWidth?: BarMaxWidth + /** + * @description Y轴排序配置, 支持根据维度或指标排序, 以及自定义排序顺序 + * @example + * sort: { + * orderBy: 'profit', + * order: 'asc', + * } + * sort: { + * customOrder:['2019', '2020', '2021'] + * } + */ + sort?: Sort + /** + * @description 图例排序配置, 支持根据维度或指标排序, 以及自定义排序顺序 + * @example + * sortLegend: { + * orderBy: 'profit', + * order: 'asc', + * } + * sortLegend: { + * customOrder:['2019', '2020', '2021'] + * } + */ + sortLegend?: SortLegend + /** + * @description 图表的主题, 主题是优先级较低的功能配置, 包含所有图表类型共用的通用配置, 与单类图表类型共用的图表配置, 内置light与dark两种主题, 用户可以通过Builder自定义主题 + * @default light 默认为亮色主题 + * @example 'dark' + * @example 'light' + * @example 'customThemeName' + */ + theme?: Theme + /** + * @description 矩形图元样式, 条形图样式配置, 用于定义图表的条形图样式, 包括条形图的颜色, 边框, 圆角等. + * 支持全局样式或条件样式配置 + * 数据筛选器 + * 若配置selector, 提供数值 selector, 局部数据 selector, 条件维度 selector, 条件指标 selector 共四类数据匹配能力 + * 若未配置selector, 则样式全局生效. + */ + barStyle?: BarStyle | BarStyle[] + /** + * @description 标注点配置, 根据选择的数据, 定义图表的标注点, 包括标注点的位置, 格式, 样式等. + */ + annotationPoint?: AnnotationPoint | AnnotationPoint[] + /** + * @description 数值标注线(包括均值线、最大值线、最小值线等)，竖直方向展示，能够设置标注线的位置, 样式等，如需绘制均值线等数值对应的标注线请使用该配置 + */ + annotationVerticalLine?: AnnotationVerticalLine | AnnotationVerticalLine[] + /** + * @description 维度值标注线，水平展示，能够设置标注线的位置, 样式等 + */ + annotationHorizontalLine?: AnnotationHorizontalLine | AnnotationHorizontalLine[] + /** + * @description 标注区域配置, 根据选择的数据, 定义图表的标注区域, 包括标注区域的位置, 样式等. + */ + annotationArea?: AnnotationArea | AnnotationArea[] + /** + * @description 差异标注线配置，用于绑定两个数据锚点并展示绝对差值或百分比差值。 + */ + annotationDifferenceLine?: AnnotationDifferenceLine | AnnotationDifferenceLine[] + /** + * @description 当图表开启透视功能或者指标组合的是否，是否开启维度联动功能 + * 当hover 到某个维度值时，联动高亮其他图表中相同维度值的数据 + */ + dimensionLinkage?: DimensionLinkage + /** + * @description 图表语言配置, 支持'zh-CN'与'en-US'两种语言, 另外可以调用 intl.setLocale('zh-CN') 方法设置语言 + * @default 'zh-CN' + */ + locale?: Locale +} +``` + +关联 API：[AnnotationArea](types.md#annotationarea)、[AnnotationDifferenceLine](types.md#annotationdifferenceline)、[AnnotationHorizontalLine](types.md#annotationhorizontalline)、[AnnotationPoint](types.md#annotationpoint)、[AnnotationVerticalLine](types.md#annotationverticalline)、[BackgroundColor](types.md#backgroundcolor)、[BarDimension](types.md#bardimension)、[BarLikeAnimation](types.md#barlikeanimation)、[BarMaxWidth](types.md#barmaxwidth)、[BarMeasure](types.md#barmeasure)、[BarStyle](types.md#barstyle)、[Brush](types.md#brush)、[Color](types.md#color)、[CornerRadius](types.md#cornerradius)、[CrosshairRect](types.md#crosshairrect)、[Dataset](types.md#dataset)、[DimensionLinkage](types.md#dimensionlinkage)、[Label](types.md#label)、[Legend](types.md#legend)、[Locale](i18n.md#locale)、[Page](types.md#page)、[RegionPadding](types.md#regionpadding)、[Sort](types.md#sort)、[SortLegend](types.md#sortlegend)、[StackCornerRadius](types.md#stackcornerradius)、[Theme](types.md#theme)、[Tooltip](types.md#tooltip)、[XLinearAxis](types.md#xlinearaxis)、[YBandAxis](types.md#ybandaxis) + +## BarParallel + +源码：[packages/vseed/src/types/chartType/barParallel/barParallel.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/chartType/barParallel/barParallel.ts) + +包导出：`BarParallel` + +```typescript +/** + * @description 并列条形图，适用于多指标横向并行对比场景，多个条形平行排列展示不同指标值 + * 适用场景: + * - 类别名称较长时的多指标对比 + * - 排名与数值同时展示的横向比较 + * - 多维度数据的并列分析 + * @encoding + * 并列条形图支持以下视觉通道: + * `yAxis` : y轴通道, 支持`多个维度`, 按维度值映射至y轴 + * `xAxis` : x轴通道, 支持`多个指标`, 按指标值映射至x轴 + * `detail` : 细分通道, 支持`多个维度`, 在同一个颜色系列下展示更细粒度的数据时使用 + * `color` : 颜色通道, 支持`多个维度`或 `一个指标`, 维度颜色用于区分不同的数据系列, 指标颜色用于线性映射指标值到图形颜色 + * `tooltip`: 提示通道, 支持`多个维度`与 `多个指标`, 会在鼠标悬停在数据点上时展示 + * `label` : 标签通道, 支持`多个维度`与 `多个指标`, 会在数据点上展示数据标签 + * @warning + * 数据要求: + * - 至少1个指标字段（度量） + * - 第一个维度会放至Y轴, 其余维度会与指标名称(存在多个指标时)合并, 作为图例项展示. + * - 所有指标会自动合并为一个指标 + * 默认开启的功能: + * - 默认开启图例、坐标轴、数据标签、提示信息 + * @recommend + * - 推荐字段配置: `1`个指标, `2`个维度 + * - 支持数据重塑: 至少`1`个指标, `0`个维度 + */ +export interface BarParallel { + /** + * @description 并列条形图，适用于多指标横向并行对比场景 + * @type {'barParallel'} + * @example 'barParallel' + */ + chartType: 'barParallel' + /** + * @description 数据源, 符合TidyData规范的且已经聚合的数据集，用于定义图表的数据来源和结构, 用户输入的数据集并不需要进行任何处理, VSeed带有强大的数据重塑功能, 会自行进行数据重塑, 并列条形图的数据最终会被转换为2个维度, 1个指标. + * @type {Array>} + * @example [{category:'A', value1:100, value2:200}, {category:'B', value1:150, value2:250}] + */ + dataset: Dataset + /** + * @description 维度, 第一个维度被映射到Y轴, 其余维度会与指标名称(存在多个指标时)合并, 作为图例项展示. + * @example [{id: 'category', alias: '类别'}] + */ + dimensions?: BarDimension[] + /** + * @description 指标, 并列条形图指标会自动合并为一个指标, 映射到X轴, 存在多个指标时, 指标名称会与其余维度合并, 作为图例项展示. + * @example [{id: 'value1', alias: '指标1'}, {id: 'value2', alias: '指标2'}] + */ + measures?: BarMeasure[] + /** + * 分页 + * @description 分页配置，用于配置图表的分页功能 + */ + page?: Page + /** + * @description 图表的背景颜色, 默认为透明背景, 背景颜色可以是颜色字符串, 例如'red', 'blue', 也可以是hex, rgb或rgba'#ff0000', 'rgba(255,0,0,0.5)' + */ + backgroundColor?: BackgroundColor + /** + * @description 颜色配置, 用于定义图表的颜色方案, 包括颜色列表, 颜色映射, 颜色渐变等. + */ + color?: Color + /** + * @description 标签配置, 用于定义图表的数据标签, 包括数据标签的位置, 格式, 样式等. + */ + label?: Label + /** + * @description 图例配置, 用于定义图表的图例, 包括图例的位置, 格式, 样式等. + */ + legend?: Legend + /** + * 绘图区内边距 + * @description 映射到 VChart 的 region[0].padding，用于为标注、标签等绘图区外扩元素预留空间。 + */ + regionPadding?: RegionPadding + /** + * @description 提示信息配置, 用于定义图表的提示信息, 包括提示信息的位置, 格式, 样式等. + */ + tooltip?: Tooltip + /** + * 框选 + * @description 框选配置，用于开启/关闭 brush 框选能力 + */ + brush?: Brush + /** + * 动画配置 + * @description 图表动画配置，按图表类型约束可选效果 + */ + animation?: BarLikeAnimation + /** + * @description x轴, 数值轴, x轴配置, 用于定义图表的x轴, 包括x轴的位置, 格式, 样式等. + */ + xAxis?: XLinearAxis + /** + * @description y轴, 类目轴, y轴配置, 用于定义图表的y轴, 包括y轴的位置, 格式, 样式等. + */ + yAxis?: YBandAxis + /** + * @description 水平提示框配置, 用于定义图表的水平提示框, 包括水平提示框的颜色、标签样式等. + */ + crosshairRect?: CrosshairRect + /** + * @description 柱图圆角的数值或数组，默认启用。当 stackCornerRadius 为 false 时，每个图元独立绘制圆角；为 true 时，通过 clip 裁剪整组堆叠柱体。数值设置所有角，数组按左上、右上、右下、左下排列，数据为负值时圆角方向自动翻转。设为 0 可关闭。barStyle.barRadius 可覆盖单个图元的圆角；stackCornerRadius 为 true 时，整组圆角统一使用 cornerRadius，不受 barStyle.barRadius 影响。 + * @default [0, 4, 4, 0] + * @example [4, 4, 0, 0] + */ + cornerRadius?: CornerRadius + /** + * @description 是否使用整组堆叠圆角，默认 false。设为 true 时，通过 clip 裁剪整组柱体，圆角值统一读取 cornerRadius，保留堆叠内部的直角连接，并优先于 barStyle.barRadius（包括条件样式）。设为 false 时，cornerRadius 对每个图元单独生效。注意：开启 stackCornerRadius 会引起更新动画重叠的 bug，整组 clip 裁剪路径与图元更新动画不同步，依赖 VChart 修复；需要平滑更新动画时建议保持 false。 + * @default false + * @example true + */ + stackCornerRadius?: StackCornerRadius + /** + * @description 矩形的最大高度，可以是像素值或者百分比字符串 + */ + barMaxWidth?: BarMaxWidth + /** + * @description 同一分类下，矩形之间的距离，可以是像素值或者百分比字符串 + */ + barGapInGroup?: BarGapInGroup + /** + * @description Y轴排序配置, 支持根据维度或指标排序, 以及自定义排序顺序 + * @example + * sort: { + * orderBy: 'profit', + * order: 'asc', + * } + * sort: { + * customOrder:['2019', '2020', '2021'] + * } + */ + sort?: Sort + /** + * @description 图例排序配置, 支持根据维度或指标排序, 以及自定义排序顺序 + * @example + * sortLegend: { + * orderBy: 'profit', + * order: 'asc', + * } + * sortLegend: { + * customOrder:['2019', '2020', '2021'] + * } + */ + sortLegend?: SortLegend + /** + * @description 图表的主题, 主题是优先级较低的功能配置, 包含所有图表类型共用的通用配置, 与单类图表类型共用的图表配置, 内置light与dark两种主题, 用户可以通过Builder自定义主题 + * @default light 默认为亮色主题 + * @example 'dark' + * @example 'light' + * @example 'customThemeName' + */ + theme?: Theme + /** + * @description 矩形图元样式, 条形图样式配置, 用于定义图表的条形图样式, 包括条形图的颜色, 边框, 圆角等. + * 支持全局样式或条件样式配置 + * 数据筛选器 + * 若配置selector, 提供数值 selector, 局部数据 selector, 条件维度 selector, 条件指标 selector 共四类数据匹配能力 + * 若未配置selector, 则样式全局生效. + */ + barStyle?: BarStyle | BarStyle[] + /** + * @description 标注点配置, 根据选择的数据, 定义图表的标注点, 包括标注点的位置, 格式, 样式等. + */ + annotationPoint?: AnnotationPoint | AnnotationPoint[] + /** + * @description 数值标注线(包括均值线、最大值线、最小值线等)，竖直方向展示，能够设置标注线的位置, 样式等，如需绘制均值线等数值对应的标注线请使用该配置 + */ + annotationVerticalLine?: AnnotationVerticalLine | AnnotationVerticalLine[] + /** + * @description 维度值标注线，水平展示，能够设置标注线的位置, 样式等 + */ + annotationHorizontalLine?: AnnotationHorizontalLine | AnnotationHorizontalLine[] + /** + * @description 标注区域配置, 根据选择的数据, 定义图表的标注区域, 包括标注区域的位置, 样式等. + */ + annotationArea?: AnnotationArea | AnnotationArea[] + /** + * @description 差异标注线配置，用于绑定两个数据锚点并展示绝对差值或百分比差值。 + */ + annotationDifferenceLine?: AnnotationDifferenceLine | AnnotationDifferenceLine[] + /** + * @description 当图表开启透视功能或者指标组合的是否，是否开启维度联动功能 + * 当hover 到某个维度值时，联动高亮其他图表中相同维度值的数据 + */ + dimensionLinkage?: DimensionLinkage + /** + * @description 图表语言配置, 支持'zh-CN'与'en-US'两种语言, 另外可以调用 intl.setLocale('zh-CN') 方法设置语言 + * @default 'zh-CN' + */ + locale?: Locale +} +``` + +关联 API：[AnnotationArea](types.md#annotationarea)、[AnnotationDifferenceLine](types.md#annotationdifferenceline)、[AnnotationHorizontalLine](types.md#annotationhorizontalline)、[AnnotationPoint](types.md#annotationpoint)、[AnnotationVerticalLine](types.md#annotationverticalline)、[BackgroundColor](types.md#backgroundcolor)、[BarDimension](types.md#bardimension)、[BarGapInGroup](types.md#bargapingroup)、[BarLikeAnimation](types.md#barlikeanimation)、[BarMaxWidth](types.md#barmaxwidth)、[BarMeasure](types.md#barmeasure)、[BarStyle](types.md#barstyle)、[Brush](types.md#brush)、[Color](types.md#color)、[CornerRadius](types.md#cornerradius)、[CrosshairRect](types.md#crosshairrect)、[Dataset](types.md#dataset)、[DimensionLinkage](types.md#dimensionlinkage)、[Label](types.md#label)、[Legend](types.md#legend)、[Locale](i18n.md#locale)、[Page](types.md#page)、[RegionPadding](types.md#regionpadding)、[Sort](types.md#sort)、[SortLegend](types.md#sortlegend)、[StackCornerRadius](types.md#stackcornerradius)、[Theme](types.md#theme)、[Tooltip](types.md#tooltip)、[XLinearAxis](types.md#xlinearaxis)、[YBandAxis](types.md#ybandaxis) + +## BarPercent + +源码：[packages/vseed/src/types/chartType/barPercent/barPercent.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/chartType/barPercent/barPercent.ts) + +包导出：`BarPercent` + +```typescript +/** + * @description 百分比条形图，适用于横向展示各类别占比关系的场景，X轴以百分比形式展示数据占比 + * 适用场景: + * - 类别名称较长时的占比对比 + * - 多维度数据的横向构成分析 + * - 排名与占比同时展示的场景 + * @encoding + * 百分比条形图支持以下视觉通道: + * `yAxis` : y轴通道, 支持`多个维度`, 按维度值映射至y轴 + * `xAxis` : x轴通道, 支持`多个指标`, 按指标值映射至x轴 + * `detail` : 细分通道, 支持`多个维度`, 在同一个颜色系列下展示更细粒度的数据时使用 + * `color` : 颜色通道, 支持`多个维度`或 `一个指标`, 维度颜色用于区分不同的数据系列, 指标颜色用于线性映射指标值到图形颜色 + * `tooltip`: 提示通道, 支持`多个维度`与 `多个指标`, 会在鼠标悬停在数据点上时展示 + * `label` : 标签通道, 支持`多个维度`与 `多个指标`, 会在数据点上展示数据标签 + * @warning + * 数据要求: + * - 至少1个维度字段和1个度量字段 + * - 所有类别占比之和为100% + * - 支持多系列堆叠展示占比关系 + * 默认开启的功能: + * - 默认开启图例、坐标轴、百分比标签、提示信息、占比计算 + * @recommend + * - 推荐字段配置: `1`个指标, `2`个维度 + * - 支持数据重塑: 至少`1`个指标, `0`个维度 + */ +export interface BarPercent { + /** + * @description 百分比条形图，以横向百分比形式展示各类别数据占比关系 + * @type {'barPercent'} + * @example 'barPercent' + */ + chartType: 'barPercent' + /** + * @description 数据源, 符合TidyData规范的且已经聚合的数据集，用于定义图表的数据来源和结构, 用户输入的数据集并不需要进行任何处理, VSeed带有强大的数据重塑功能, 会自行进行数据重塑, 百分比条形图的数据最终会被转换为2个维度, 1个指标. + * @type {Array>} + * @example [{category:'A', value:30}, {category:'B', value:70}] + */ + dataset: Dataset + /** + * @description 维度, 第一个维度会放至Y轴, 其余维度会与指标名称(存在多个指标时)合并, 作为图例项展示. + * @type {Dimensions} + * @example [{id: 'category', alias: '类别'}] + */ + dimensions?: BarDimension[] + /** + * @description 指标, 指标会自动合并为一个指标, 映射到X轴, 存在多个指标时, 指标名称会与其余维度合并, 作为图例项展示. + * @type {MeasureTree} + * @example [{id: 'value', alias: '数值占比', format: 'percent'}] + */ + measures?: BarMeasure[] + /** + * 分页 + * @description 分页配置，用于配置图表的分页功能 + */ + page?: Page + /** + * @description 图表的背景颜色, 默认为透明背景, 背景颜色可以是颜色字符串, 例如'red', 'blue', 也可以是hex, rgb或rgba'#ff0000', 'rgba(255,0,0,0.5)' + */ + backgroundColor?: BackgroundColor + /** + * @description 颜色配置, 用于定义图表的颜色方案, 包括颜色列表, 颜色映射, 颜色渐变等. + */ + color?: Color + /** + * @description 标签配置, 用于定义图表的数据标签, 包括数据标签的位置, 格式, 样式等. + */ + label?: Label + /** + * @description 图例配置, 用于定义图表的图例, 包括图例的位置, 格式, 样式等. + */ + legend?: Legend + /** + * 绘图区内边距 + * @description 映射到 VChart 的 region[0].padding，用于为标注、标签等绘图区外扩元素预留空间。 + */ + regionPadding?: RegionPadding + /** + * @description 提示信息配置, 用于定义图表的提示信息, 包括提示信息的位置, 格式, 样式等. + */ + tooltip?: Tooltip + /** + * 框选 + * @description 框选配置，用于开启/关闭 brush 框选能力 + */ + brush?: Brush + /** + * 动画配置 + * @description 图表动画配置，按图表类型约束可选效果 + */ + animation?: BarLikeAnimation + /** + * @description x轴, 数值轴, x轴配置, 用于定义图表的x轴, 包括x轴的位置, 格式, 样式等. + */ + xAxis?: XLinearAxis + /** + * @description y轴, 类目轴, y轴配置, 用于定义图表的y轴, 包括y轴的位置, 格式, 样式等. + */ + yAxis?: YBandAxis + /** + * @description 水平提示框配置, 用于定义图表的水平提示框, 包括水平提示框的颜色、标签样式等. + */ + crosshairRect?: CrosshairRect + /** + * @description 柱图圆角的数值或数组，默认启用。当 stackCornerRadius 为 false 时，每个图元独立绘制圆角；为 true 时，通过 clip 裁剪整组堆叠柱体。数值设置所有角，数组按左上、右上、右下、左下排列，数据为负值时圆角方向自动翻转。设为 0 可关闭。barStyle.barRadius 可覆盖单个图元的圆角；stackCornerRadius 为 true 时，整组圆角统一使用 cornerRadius，不受 barStyle.barRadius 影响。 + * @default [0, 4, 4, 0] + * @example [4, 4, 0, 0] + */ + cornerRadius?: CornerRadius + /** + * @description 是否使用整组堆叠圆角，默认 false。设为 true 时，通过 clip 裁剪整组柱体，圆角值统一读取 cornerRadius，保留堆叠内部的直角连接，并优先于 barStyle.barRadius（包括条件样式）。设为 false 时，cornerRadius 对每个图元单独生效。注意：开启 stackCornerRadius 会引起更新动画重叠的 bug，整组 clip 裁剪路径与图元更新动画不同步，依赖 VChart 修复；需要平滑更新动画时建议保持 false。 + * @default false + * @example true + */ + stackCornerRadius?: StackCornerRadius + /** + * @description 矩形的最大高度，可以是像素值或者百分比字符串 + */ + barMaxWidth?: BarMaxWidth + /** + * @description Y轴排序配置, 支持根据维度或指标排序, 以及自定义排序顺序 + * @example + * sort: { + * orderBy: 'profit', + * order: 'asc', + * } + * sort: { + * customOrder:['2019', '2020', '2021'] + * } + */ + sort?: Sort + /** + * @description 图例排序配置, 支持根据维度或指标排序, 以及自定义排序顺序 + * @example + * sortLegend: { + * orderBy: 'profit', + * order: 'asc', + * } + * sortLegend: { + * customOrder:['2019', '2020', '2021'] + * } + */ + sortLegend?: SortLegend + /** + * 图表的主题, 主题是优先级较低的功能配置, 包含所有图表类型共用的通用配置, 与单类图表类型共用的图表配置 + * @default light 默认为亮色主题 + * @description 内置light与dark两种主题, 用户可以通过Builder自定义主题 + * @example 'dark' + * @example 'light' + * @example 'customThemeName' + */ + theme?: Theme + /** + * 矩形图元样式 + * @description 条形图样式配置, 用于定义图表的条形图样式, 包括条形图的颜色, 边框, 圆角等. + * 支持全局样式或条件样式配置 + * 数据筛选器 + * 若配置selector, 提供数值 selector, 局部数据 selector, 条件维度 selector, 条件指标 selector 共四类数据匹配能力 + * 若未配置selector, 则样式全局生效. + */ + barStyle?: BarStyle | BarStyle[] + /** + * 标注点 + * @description 标注点配置, 根据选择的数据, 定义图表的标注点, 包括标注点的位置, 格式, 样式等. + */ + annotationPoint?: AnnotationPoint | AnnotationPoint[] + /** + * 标注垂直线 + * @description 数值标注线(包括均值线、最大值线、最小值线等)，竖直方向展示，能够设置标注线的位置, 样式等，如需绘制均值线等数值对应的标注线请使用该配置 + */ + annotationVerticalLine?: AnnotationVerticalLine | AnnotationVerticalLine[] + /** + * 标注水平线 + * @description 维度值标注线，水平展示，能够设置标注线的位置, 样式等 + */ + annotationHorizontalLine?: AnnotationHorizontalLine | AnnotationHorizontalLine[] + /** + * 标注区域 + * @description 标注区域配置, 根据选择的数据, 定义图表的标注区域, 包括标注区域的位置, 样式等. + */ + annotationArea?: AnnotationArea | AnnotationArea[] + /** + * @description 当图表开启透视功能或者指标组合的是否，是否开启维度联动功能 + * 当hover 到某个维度值时，联动高亮其他图表中相同维度值的数据 + */ + dimensionLinkage?: DimensionLinkage + /** + * 语言 + * @description 图表语言配置, 支持'zh-CN'与'en-US'两种语言, 另外可以调用 intl.setLocale('zh-CN') 方法设置语言 + * @default 'zh-CN' + */ + locale?: Locale +} +``` + +关联 API：[AnnotationArea](types.md#annotationarea)、[AnnotationHorizontalLine](types.md#annotationhorizontalline)、[AnnotationPoint](types.md#annotationpoint)、[AnnotationVerticalLine](types.md#annotationverticalline)、[BackgroundColor](types.md#backgroundcolor)、[BarDimension](types.md#bardimension)、[BarLikeAnimation](types.md#barlikeanimation)、[BarMaxWidth](types.md#barmaxwidth)、[BarMeasure](types.md#barmeasure)、[BarStyle](types.md#barstyle)、[Brush](types.md#brush)、[Color](types.md#color)、[CornerRadius](types.md#cornerradius)、[CrosshairRect](types.md#crosshairrect)、[Dataset](types.md#dataset)、[DimensionLinkage](types.md#dimensionlinkage)、[Label](types.md#label)、[Legend](types.md#legend)、[Locale](i18n.md#locale)、[Page](types.md#page)、[RegionPadding](types.md#regionpadding)、[Sort](types.md#sort)、[SortLegend](types.md#sortlegend)、[StackCornerRadius](types.md#stackcornerradius)、[Theme](types.md#theme)、[Tooltip](types.md#tooltip)、[XLinearAxis](types.md#xlinearaxis)、[YBandAxis](types.md#ybandaxis) + +## BoxPlot + +源码：[packages/vseed/src/types/chartType/boxPlot/boxPlot.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/chartType/boxPlot/boxPlot.ts) + +包导出：`BoxPlot` + +```typescript +/** + * @description 箱线图，适用于展示数据分布情况，X轴为类目轴（分类数据），Y轴为数值轴（连续数据），箱体纵向排列 + * 适用场景: + * - 数据项名称较短时 + * - 需要直观比较不同类别的数值大小 + * - 展示时间序列数据变化趋势 + * @encoding + * 箱线图支持以下视觉通道: + * `xAxis` : x轴通道, 支持`多个维度`, 按维度值映射至x轴 + * `yAxis` : y轴通道, 支持`多个指标`, 按指标值映射至y轴 + * `color` : 颜色通道, 支持`多个维度`或 `一个指标`, 维度颜色用于区分不同的数据系列, 指标颜色用于线性映射指标值到图形颜色 + * `tooltip`: 提示通道, 支持`多个维度`与 `多个指标`, 会在鼠标悬停在数据点上时展示 + * `label` : 标签通道, 支持`多个维度`与 `多个指标`, 会在数据点上展示数据标签 + * @warning + * 数据要求: + * - 至少1个数值字段（度量） + * - 第一个维度会放至X轴, 其余维度会与指标名称(存在多个指标时)合并, 作为图例项展示 + * - 所有指标会自动合并为一个指标 + * 默认开启的功能: + * - 默认开启图例、坐标轴、数据标签、提示信息 + * @recommend + * - 推荐字段配置: `1`个指标, `1`个维度 + * - 支持数据重塑: 至少`1`个指标, `0`个维度 + */ +export interface BoxPlot { + /** + * @description 箱型图，适用于展示数据分布情况，X轴为类目轴（分类数据），Y轴为数值轴（连续数据），箱体纵向排列 + * @type {'boxPlot'} + * @example 'boxPlot' + */ + chartType: 'boxPlot' + /** + * @description 符合TidyData规范的且已经聚合的数据集，用于定义图表的数据来源和结构, 用户输入的数据集并不需要进行任何处理, VSeed带有强大的数据重塑功能, 会自行进行数据重塑, 柱状图的数据最终会被转换为2个维度, 1个指标. + * @type {Array>} + * @example [{category:'A', value:100}, {category:'B', value:200}] + */ + dataset: Dataset + /** + * @description 箱线图的第一个维度被映射到X轴, 其余维度会与指标名称(存在多个指标时)合并, 作为图例项展示 + * @example [{id: "category", alias: "类别"}] + */ + dimensions?: BoxPlotDimension[] + /** + * @description 箱线图的所有指标会自动合并为一个指标, 映射到Y轴, 存在多个指标时, 指标名称会与其余维度合并, 作为图例项展示. + * @example [{id: "value", alias: "数值"}] + */ + measures?: BoxPlotMeasure[] + /** + * @description 分页配置, 用于指定分页的字段名, 必须是维度 + */ + page?: Page + /** + * @description 图表的背景颜色, 背景颜色可以是颜色字符串, 默认为透明背景, 例如'red', 'blue', 也可以是hex, rgb或rgba'#ff0000', 'rgba(255,0,0,0.5)' + */ + backgroundColor?: BackgroundColor + /** + * @description 颜色配置, 用于定义图表的颜色方案, 包括颜色列表, 颜色映射, 颜色渐变等. + */ + color?: Color + /** + * @description 标签配置, 用于定义图表的数据标签, 包括数据标签的位置, 格式, 样式等. + */ + label?: Label + /** + * @description 图例配置, 用于定义图表的图例, 包括图例的位置, 格式, 样式等. + */ + legend?: Legend + /** + * @description 提示信息配置, 用于定义图表的提示信息, 包括提示信息的位置, 格式, 样式等. + */ + tooltip?: Tooltip + /** + * 框选 + * @description 框选配置，用于开启/关闭 brush 框选能力 + */ + brush?: Brush + /** + * @description x轴, 类目轴, x轴配置, 用于定义图表的x轴, 包括x轴的位置, 格式, 样式等. + */ + xAxis?: XBandAxis + /** + * @description y轴, 数值轴, y轴配置, 用于定义图表的y轴, 包括y轴的位置, 格式, 样式等. + */ + yAxis?: YLinearAxis + /** + * @description X轴排序配置, 支持根据维度或指标排序, 以及自定义排序顺序 + * @example + * sort: { + * orderBy: 'profit', + * order: 'asc', + * } + * sort: { + * customOrder:['2019', '2020', '2021'] + * } + */ + sort?: Sort + /** + * @description 图例排序配置, 支持根据维度或指标排序, 以及自定义排序顺序 + * @example + * sortLegend: { + * orderBy: 'profit', + * order: 'asc', + * } + * sortLegend: { + * customOrder:['2019', '2020', '2021'] + * } + */ + sortLegend?: SortLegend + /** + * @description 图表的主题, 主题是优先级较低的功能配置, 包含所有图表类型共用的通用配置, 与单类图表类型共用的图表配置, 内置light与dark两种主题, 用户可以通过Builder自定义主题 + * @default light 默认为亮色主题 + * @example 'dark' + * @example 'light' + * @example 'customThemeName' + */ + theme?: Theme + /** + * @description 垂直提示框配置, 用于定义图表的垂直提示框, 包括垂直提示框的颜色、标签样式等. + */ + crosshairRect?: CrosshairRect + /** + * @description 箱线图箱体的样式配置，支持全局或选择器粒度生效 + */ + boxPlotStyle?: BoxPlotStyle | BoxPlotStyle[] + /** + * @description 异常点的样式配置，支持全局或选择器粒度生效 + */ + outlierStyle?: OutlierStyle | OutlierStyle[] + /** + * @description 直方图的须长配置，支持标量值和长度为2 的数组 + * 当值为标量的时候，使用 whiskers * IQR 来计算上界值和下界值 + * 当值为2元数组的时候，whiskers[0] 需要在[0, 0.25)之间，表示下界值取对应的百分位数； + * whiskers[1] 需要在(0.75, 1]之间，表示上界值取对应的百分位数； + */ + whiskers?: WhiskersConfig + /** + * @description 标注点配置, 根据选择的数据, 定义图表的标注点, 包括标注点的位置, 格式, 样式等. + */ + annotationPoint?: AnnotationPoint | AnnotationPoint[] + /** + * @description 维度值标注线，竖直方向展示，能够设置标注线的位置, 样式等 + */ + annotationVerticalLine?: AnnotationVerticalLine | AnnotationVerticalLine[] + /** + * @description 数值标注线(包括均值线、最大值线、最小值线等)，水平方向展示，能够设置标注线的位置, 样式等，如需绘制均值线等数值对应的标注线请使用该配置 + */ + annotationHorizontalLine?: AnnotationHorizontalLine | AnnotationHorizontalLine[] + /** + * @description 标注区域配置, 根据选择的数据, 定义图表的标注区域, 包括标注区域的位置, 样式等. + */ + annotationArea?: AnnotationArea | AnnotationArea[] + /** + * @description 当图表开启透视功能或者指标组合的是否，是否开启维度联动功能 + * 当hover 到某个维度值时，联动高亮其他图表中相同维度值的数据 + */ + dimensionLinkage?: DimensionLinkage + /** + * @description 图表语言配置, 支持'zh-CN'与'en-US'两种语言, 另外可以调用 intl.setLocale('zh-CN') 方法设置语言 + * @default 'zh-CN' + */ + locale?: Locale + /** + * @description 箱线图的最大宽度，可以设置绝对的像素值，也可以使用百分比（如 '10%'） + */ + boxMaxWidth?: string | number + /** + * @description 分组箱线图中各个分组内的间距，可以设置绝对的像素值，也可以使用百分比（如 '10%'）。 + */ + boxGapInGroup?: string | number +} +``` + +关联 API：[AnnotationArea](types.md#annotationarea)、[AnnotationHorizontalLine](types.md#annotationhorizontalline)、[AnnotationPoint](types.md#annotationpoint)、[AnnotationVerticalLine](types.md#annotationverticalline)、[BackgroundColor](types.md#backgroundcolor)、[BoxPlotDimension](types.md#boxplotdimension)、[BoxPlotMeasure](types.md#boxplotmeasure)、[BoxPlotStyle](types.md#boxplotstyle)、[Brush](types.md#brush)、[Color](types.md#color)、[CrosshairRect](types.md#crosshairrect)、[Dataset](types.md#dataset)、[DimensionLinkage](types.md#dimensionlinkage)、[Label](types.md#label)、[Legend](types.md#legend)、[Locale](i18n.md#locale)、[OutlierStyle](types.md#outlierstyle)、[Page](types.md#page)、[Sort](types.md#sort)、[SortLegend](types.md#sortlegend)、[Theme](types.md#theme)、[Tooltip](types.md#tooltip)、[WhiskersConfig](types.md#whiskersconfig)、[XBandAxis](types.md#xbandaxis)、[YLinearAxis](types.md#ylinearaxis) + +## CirclePacking + +源码：[packages/vseed/src/types/chartType/circlePacking/circlePacking.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/chartType/circlePacking/circlePacking.ts) + +包导出：`CirclePacking` + +```typescript +/** + * @description 圆形打包图，用于展示层级数据，通过圆的大小表示数值大小 + * 适用场景: + * - 展示层级数据的占比分布 + * - 强调数据的包含关系 + * @encoding + * 圆形打包图支持以下视觉通道: + * `color`: 颜色通道, 支持`多个维度`或 `一个指标` + * `label`: 标签通道, 支持`多个维度`与 `多个指标` + * `tooltip`: 提示通道, 支持`多个维度`与 `多个指标` + * @warning + * 数据要求: + * - 至少1个数值字段（度量）用于映射圆的大小 + * - 至少1个维度字段用于层级划分 + */ +export interface CirclePacking { + /** + * 圆形打包图 + * @description 圆形打包图，展示层级数据的占比关系 + * @type {'circlePacking'} + * @example 'circlePacking' + */ + chartType: 'circlePacking' + /** + * 数据集 + * @description 符合TidyData规范的且已经聚合的数据集，用于定义图表的数据来源和结构 + * @type {Array>} + * @example [{category:'A', value:30}, {category:'B', value:70}] + */ + dataset: Dataset + /** + * 维度 + * @description 维度配置，用于定义数据的层级结构 + * @example [{id: 'category', alias: '类别'}] + */ + dimensions?: HierarchyDimension[] + /** + * 指标 + * @description 指标配置，用于定义圆的大小 + * @example [{id: 'value', alias: '数值'}] + */ + measures?: HierarchyMeasure[] + /** + * 分页配置 + * @description 用于指定分页的字段名, 必须是维度 + */ + page?: Page + /** + * 图表的背景颜色 + * @default transparent 默认为透明背景 + * @description 背景颜色可以是颜色字符串, 例如'red', 'blue', 也可以是hex, rgb或rgba'#ff0000', 'rgba(255,0,0,0.5)' + */ + backgroundColor?: BackgroundColor + /** + * 颜色 + * @description 颜色配置, 用于定义图表的颜色方案, 包括颜色列表, 颜色映射, 颜色渐变等. + */ + color?: Color + /** + * 标签 + * @description 标签配置, 用于定义图表的数据标签, 包括数据标签的位置, 格式, 样式等. + */ + label?: Label + /** + * 提示信息 + * @description 提示信息配置, 用于定义图表的提示信息, 包括提示信息的位置, 格式, 样式等. + */ + tooltip?: Tooltip + /** + * 图表的主题 + * @default light 默认为亮色主题 + * @description 内置light与dark两种主题, 用户可以通过Builder自定义主题 + * @example 'dark' + * @example 'light' + */ + theme?: Theme + /** + * 语言 + * @description 图表语言配置, 支持'zh-CN'与'en-US'两种语言 + * @default 'zh-CN' + */ + locale?: Locale +} +``` + +关联 API：[BackgroundColor](types.md#backgroundcolor)、[Color](types.md#color)、[Dataset](types.md#dataset)、[HierarchyDimension](types.md#hierarchydimension)、[HierarchyMeasure](types.md#hierarchymeasure)、[Label](types.md#label)、[Locale](i18n.md#locale)、[Page](types.md#page)、[Theme](types.md#theme)、[Tooltip](types.md#tooltip) + +## Column + +源码：[packages/vseed/src/types/chartType/column/column.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/chartType/column/column.ts) + +包导出：`Column` + +```typescript +/** + * @description 柱状图，适用于纵向数据对比场景，X轴为类目轴（分类数据），Y轴为数值轴（连续数据），柱子纵向排列 + * 适用场景: + * - 数据项名称较短时 + * - 需要直观比较不同类别的数值大小 + * - 展示时间序列数据变化趋势 + * @encoding + * 柱状图支持以下视觉通道: + * `xAxis` : x轴通道, 支持`多个维度`, 按维度值映射至x轴 + * `yAxis` : y轴通道, 支持`多个指标`, 按指标值映射至y轴 + * `detail` : 细分通道, 支持`多个维度`, 在同一个颜色系列下展示更细粒度的数据时使用 + * `color` : 颜色通道, 支持`多个维度`或 `一个指标`, 维度颜色用于区分不同的数据系列, 指标颜色用于线性映射指标值到图形颜色 + * `tooltip`: 提示通道, 支持`多个维度`与 `多个指标`, 会在鼠标悬停在数据点上时展示 + * `label` : 标签通道, 支持`多个维度`与 `多个指标`, 会在数据点上展示数据标签 + * @warning + * 数据要求: + * - 至少1个数值字段（度量） + * - 第一个维度会放至X轴, 其余维度会与指标名称(存在多个指标时)合并, 作为图例项展示 + * - 所有指标会自动合并为一个指标 + * 默认开启的功能: + * - 默认开启图例、坐标轴、数据标签、提示信息 + * @recommend + * - 推荐字段配置: `1`个指标, `2`个维度 + * - 支持数据重塑: 至少`1`个指标, `0`个维度 + */ +export interface Column { + /** + * @description 柱状图，适用于纵向数据对比场景，X轴为类目轴（分类数据），Y轴为数值轴（连续数据），柱子纵向排列 + * @type {'column'} + * @example 'column' + */ + chartType: 'column' + /** + * @description 符合TidyData规范的且已经聚合的数据集，用于定义图表的数据来源和结构, 用户输入的数据集并不需要进行任何处理, VSeed带有强大的数据重塑功能, 会自行进行数据重塑, 柱状图的数据最终会被转换为2个维度, 1个指标. + * @type {Array>} + * @example [{category:'A', value:100}, {category:'B', value:200}] + */ + dataset: Dataset + /** + * @description 柱状图的第一个维度被映射到X轴, 其余维度会与指标名称(存在多个指标时)合并, 作为图例项展示 + * @example [{id: "category", alias: "类别"}] + */ + dimensions?: ColumnDimension[] + /** + * @description 柱状图的所有指标会自动合并为一个指标, 映射到Y轴, 存在多个指标时, 指标名称会与其余维度合并, 作为图例项展示. + * @example [{id: "value", alias: "数值"}] + */ + measures?: ColumnMeasure[] + /** + * @description 分页配置, 用于指定分页的字段名, 必须是维度 + */ + page?: Page + /** + * @description 图表的背景颜色, 背景颜色可以是颜色字符串, 默认为透明背景, 例如'red', 'blue', 也可以是hex, rgb或rgba'#ff0000', 'rgba(255,0,0,0.5)' + */ + backgroundColor?: BackgroundColor + /** + * @description 颜色配置, 用于定义图表的颜色方案, 包括颜色列表, 颜色映射, 颜色渐变等. + */ + color?: Color + /** + * @description 标签配置, 用于定义图表的数据标签, 包括数据标签的位置, 格式, 样式等. + */ + label?: Label + /** + * @description 图例配置, 用于定义图表的图例, 包括图例的位置, 格式, 样式等. + */ + legend?: Legend + /** + * 绘图区内边距 + * @description 映射到 VChart 的 region[0].padding，用于为标注、标签等绘图区外扩元素预留空间。 + */ + regionPadding?: RegionPadding + /** + * @description 提示信息配置, 用于定义图表的提示信息, 包括提示信息的位置, 格式, 样式等. + */ + tooltip?: Tooltip + /** + * 框选 + * @description 框选配置，用于开启/关闭 brush 框选能力 + */ + brush?: Brush + /** + * 动画配置 + * @description 图表动画配置，按图表类型约束可选效果 + */ + animation?: BarLikeAnimation + /** + * @description x轴, 类目轴, x轴配置, 用于定义图表的x轴, 包括x轴的位置, 格式, 样式等. + */ + xAxis?: XBandAxis + /** + * @description y轴, 数值轴, y轴配置, 用于定义图表的y轴, 包括y轴的位置, 格式, 样式等. + */ + yAxis?: YLinearAxis + /** + * @description X轴排序配置, 支持根据维度或指标排序, 以及自定义排序顺序 + * @example + * sort: { + * orderBy: 'profit', + * order: 'asc', + * } + * sort: { + * customOrder:['2019', '2020', '2021'] + * } + */ + sort?: Sort + /** + * @description 图例排序配置, 支持根据维度或指标排序, 以及自定义排序顺序 + * @example + * sortLegend: { + * orderBy: 'profit', + * order: 'asc', + * } + * sortLegend: { + * customOrder:['2019', '2020', '2021'] + * } + */ + sortLegend?: SortLegend + /** + * @description 图表的主题, 主题是优先级较低的功能配置, 包含所有图表类型共用的通用配置, 与单类图表类型共用的图表配置, 内置light与dark两种主题, 用户可以通过Builder自定义主题 + * @default light 默认为亮色主题 + * @example 'dark' + * @example 'light' + * @example 'customThemeName' + */ + theme?: Theme + /** + * @description 垂直提示框配置, 用于定义图表的垂直提示框, 包括垂直提示框的颜色、标签样式等. + */ + crosshairRect?: CrosshairRect + /** + * @description 柱图圆角的数值或数组，默认启用。当 stackCornerRadius 为 false 时，每个图元独立绘制圆角；为 true 时，通过 clip 裁剪整组堆叠柱体。数值设置所有角，数组按左上、右上、右下、左下排列，数据为负值时圆角方向自动翻转。设为 0 可关闭。barStyle.barRadius 可覆盖单个图元的圆角；stackCornerRadius 为 true 时，整组圆角统一使用 cornerRadius，不受 barStyle.barRadius 影响。 + * @default [4, 4, 0, 0] + * @example [4, 4, 0, 0] + */ + cornerRadius?: CornerRadius + /** + * @description 是否使用整组堆叠圆角，默认 false。设为 true 时，通过 clip 裁剪整组柱体，圆角值统一读取 cornerRadius，保留堆叠内部的直角连接，并优先于 barStyle.barRadius（包括条件样式）。设为 false 时，cornerRadius 对每个图元单独生效。注意：开启 stackCornerRadius 会引起更新动画重叠的 bug，整组 clip 裁剪路径与图元更新动画不同步，依赖 VChart 修复；需要平滑更新动画时建议保持 false。 + * @default false + * @example true + */ + stackCornerRadius?: StackCornerRadius + /** + * @description 柱子的最大宽度，可以是像素值或者百分比字符串 + */ + barMaxWidth?: BarMaxWidth + /** + * @description 矩形图元样式, 柱状图样式配置, 用于定义图表的柱状图样式, 包括柱状图的颜色, 边框, 圆角等. + * 支持全局样式或条件样式配置 + * 数据筛选器 + * 若配置selector, 提供数值 selector, 局部数据 selector, 条件维度 selector, 条件指标 selector 共四类数据匹配能力 + * 若未配置selector, 则样式全局生效. + */ + barStyle?: BarStyle | BarStyle[] + /** + * @description 标注点配置, 根据选择的数据, 定义图表的标注点, 包括标注点的位置, 格式, 样式等. + */ + annotationPoint?: AnnotationPoint | AnnotationPoint[] + /** + * @description 维度值标注线，竖直方向展示，能够设置标注线的位置, 样式等 + */ + annotationVerticalLine?: AnnotationVerticalLine | AnnotationVerticalLine[] + /** + * @description 数值标注线(包括均值线、最大值线、最小值线等)，水平方向展示，能够设置标注线的位置, 样式等，如需绘制均值线等数值对应的标注线请使用该配置 + */ + annotationHorizontalLine?: AnnotationHorizontalLine | AnnotationHorizontalLine[] + /** + * @description 标注区域配置, 根据选择的数据, 定义图表的标注区域, 包括标注区域的位置, 样式等. + */ + annotationArea?: AnnotationArea | AnnotationArea[] + /** + * @description 差异标注线配置，用于绑定两个数据锚点并展示绝对差值或百分比差值。 + */ + annotationDifferenceLine?: AnnotationDifferenceLine | AnnotationDifferenceLine[] + /** + * 多项式回归线 + * @description 多项式回归线配置, 包括多项式的阶数、回归线的样式等. + */ + polynomialRegressionLine?: PolynomialRegressionLine | PolynomialRegressionLine[] + /** + * @description 当图表开启透视功能或者指标组合的是否，是否开启维度联动功能 + * 当hover 到某个维度值时，联动高亮其他图表中相同维度值的数据 + */ + dimensionLinkage?: DimensionLinkage + /** + * @description 图表语言配置, 支持'zh-CN'与'en-US'两种语言, 另外可以调用 intl.setLocale('zh-CN') 方法设置语言 + * @default 'zh-CN' + */ + locale?: Locale +} +``` + +关联 API：[AnnotationArea](types.md#annotationarea)、[AnnotationDifferenceLine](types.md#annotationdifferenceline)、[AnnotationHorizontalLine](types.md#annotationhorizontalline)、[AnnotationPoint](types.md#annotationpoint)、[AnnotationVerticalLine](types.md#annotationverticalline)、[BackgroundColor](types.md#backgroundcolor)、[BarLikeAnimation](types.md#barlikeanimation)、[BarMaxWidth](types.md#barmaxwidth)、[BarStyle](types.md#barstyle)、[Brush](types.md#brush)、[Color](types.md#color)、[ColumnDimension](types.md#columndimension)、[ColumnMeasure](types.md#columnmeasure)、[CornerRadius](types.md#cornerradius)、[CrosshairRect](types.md#crosshairrect)、[Dataset](types.md#dataset)、[DimensionLinkage](types.md#dimensionlinkage)、[Label](types.md#label)、[Legend](types.md#legend)、[Locale](i18n.md#locale)、[Page](types.md#page)、[PolynomialRegressionLine](types.md#polynomialregressionline)、[RegionPadding](types.md#regionpadding)、[Sort](types.md#sort)、[SortLegend](types.md#sortlegend)、[StackCornerRadius](types.md#stackcornerradius)、[Theme](types.md#theme)、[Tooltip](types.md#tooltip)、[XBandAxis](types.md#xbandaxis)、[YLinearAxis](types.md#ylinearaxis) + +## ColumnParallel + +源码：[packages/vseed/src/types/chartType/columnParallel/columnParallel.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/chartType/columnParallel/columnParallel.ts) + +包导出：`ColumnParallel` + +```typescript +/** + * @description 并列柱状图，适用于多指标并行对比场景，多个柱子并列排列展示不同指标值 + * 适用场景: + * - 同一维度下多指标并行对比 + * - 多维度数据的横向比较 + * - 指标间关联性分析 + * @encoding + * 并列柱状图支持以下视觉通道: + * `xAxis` : x轴通道, 支持`多个维度`, 按维度值映射至x轴 + * `yAxis` : y轴通道, 支持`多个指标`, 按指标值映射至y轴 + * `detail` : 细分通道, 支持`多个维度`, 在同一个颜色系列下展示更细粒度的数据时使用 + * `color` : 颜色通道, 支持`多个维度`或 `一个指标`, 维度颜色用于区分不同的数据系列, 指标颜色用于线性映射指标值到图形颜色 + * `tooltip`: 提示通道, 支持`多个维度`与 `多个指标`, 会在鼠标悬停在数据点上时展示 + * `label` : 标签通道, 支持`多个维度`与 `多个指标`, 会在数据点上展示数据标签 + * @warning + * 数据要求: + * - 至少1个指标字段（度量） + * - 第一个维度会放至X轴, 其余维度会与指标名称(存在多个指标时)合并, 作为图例项展示. + * - 所有指标会自动合并为一个指标 + * 默认开启的功能: + * - 默认开启图例、坐标轴、数据标签、提示信息、指标排序 + * @recommend + * - 推荐字段配置: `1`个指标, `2`个维度 + * - 支持数据重塑: 至少`1`个指标, `0`个维度 + */ +export interface ColumnParallel { + /** + * @description 并列柱状图，适用于多指标并行对比场景 + * @example 'columnParallel' + */ + chartType: 'columnParallel' + /** + * @description 数据集, 符合TidyData规范的且已经聚合的数据集，用于定义图表的数据来源和结构, 用户输入的数据集并不需要进行任何处理, VSeed带有强大的数据重塑功能, 会自行进行数据重塑, 并列柱状图的数据最终会被转换为2个维度, 1个指标. + * @example [{category:'A', value1:100, value2:200}, {category:'B', value1:150, value2:250}] + */ + dataset: Dataset + /** + * @description 维度, 第一个维度被映射到X轴, 其余维度会与指标名称(存在多个指标时)合并, 作为图例项展示. + * @example [{id: 'category', alias: '类别'}] + */ + dimensions?: ColumnDimension[] + /** + * @description 指标, 并列柱状图的所有指标会自动合并为一个指标, 映射到Y轴, 存在多个指标时, 指标名称会与其余维度合并, 作为图例项展示. + * @example [{id: 'value1', alias: '指标1'}, {id: 'value2', alias: '指标2'}] + */ + measures?: ColumnMeasure[] + /** + * @description 分页配置, 用于指定分页的字段名, 必须是维度 + */ + page?: Page + /** + * @description 图表的背景颜色, 背景颜色可以是颜色字符串, 例如'red', 'blue', 也可以是hex, rgb或rgba'#ff0000', 'rgba(255,0,0,0.5)' + * @default transparent 默认为透明背景 + */ + backgroundColor?: BackgroundColor + /** + * @description 颜色配置, 用于定义图表的颜色方案, 包括颜色列表, 颜色映射, 颜色渐变等. + */ + color?: Color + /** + * @description 标签配置, 用于定义图表的数据标签, 包括数据标签的位置, 格式, 样式等. + */ + label?: Label + /** + * @description 图例配置, 用于定义图表的图例, 包括图例的位置, 格式, 样式等. + */ + legend?: Legend + /** + * 绘图区内边距 + * @description 映射到 VChart 的 region[0].padding，用于为标注、标签等绘图区外扩元素预留空间。 + */ + regionPadding?: RegionPadding + /** + * @description 提示信息配置, 用于定义图表的提示信息, 包括提示信息的位置, 格式, 样式等. + */ + tooltip?: Tooltip + /** + * 框选 + * @description 框选配置，用于开启/关闭 brush 框选能力 + */ + brush?: Brush + /** + * 动画配置 + * @description 图表动画配置，按图表类型约束可选效果 + */ + animation?: BarLikeAnimation + /** + * @description x轴, 类目轴, x轴配置, 用于定义图表的x轴, 包括x轴的位置, 格式, 样式等. + */ + xAxis?: XBandAxis + /** + * @description y轴, 数值轴, y轴配置, 用于定义图表的y轴, 包括y轴的位置, 格式, 样式等. + */ + yAxis?: YLinearAxis + /** + * @description 垂直提示框配置, 用于定义图表的垂直提示框, 包括垂直提示框的颜色、标签样式等. + */ + crosshairRect?: CrosshairRect + /** + * @description 柱图圆角的数值或数组，默认启用。当 stackCornerRadius 为 false 时，每个图元独立绘制圆角；为 true 时，通过 clip 裁剪整组堆叠柱体。数值设置所有角，数组按左上、右上、右下、左下排列，数据为负值时圆角方向自动翻转。设为 0 可关闭。barStyle.barRadius 可覆盖单个图元的圆角；stackCornerRadius 为 true 时，整组圆角统一使用 cornerRadius，不受 barStyle.barRadius 影响。 + * @default [4, 4, 0, 0] + * @example [4, 4, 0, 0] + */ + cornerRadius?: CornerRadius + /** + * @description 是否使用整组堆叠圆角，默认 false。设为 true 时，通过 clip 裁剪整组柱体，圆角值统一读取 cornerRadius，保留堆叠内部的直角连接，并优先于 barStyle.barRadius（包括条件样式）。设为 false 时，cornerRadius 对每个图元单独生效。注意：开启 stackCornerRadius 会引起更新动画重叠的 bug，整组 clip 裁剪路径与图元更新动画不同步，依赖 VChart 修复；需要平滑更新动画时建议保持 false。 + * @default false + * @example true + */ + stackCornerRadius?: StackCornerRadius + /** + * @description 柱子的最大宽度，可以是像素值或者百分比字符串 + */ + barMaxWidth?: BarMaxWidth + /** + * @description 同一分类下，柱子之间的距离，可以是像素值或者百分比字符串 + */ + barGapInGroup?: BarGapInGroup + /** + * @description X轴排序配置, 支持根据维度或指标排序, 以及自定义排序顺序 + * @example + * sort: { + * orderBy: 'profit', + * order: 'asc', + * } + * sort: { + * customOrder:['2019', '2020', '2021'] + * } + */ + sort?: Sort + /** + * @description 图例排序配置, 支持根据维度或指标排序, 以及自定义排序顺序 + * @example + * sortLegend: { + * orderBy: 'profit', + * order: 'asc', + * } + * sortLegend: { + * customOrder:['2019', '2020', '2021'] + * } + */ + sortLegend?: SortLegend + /** + * @description 图表的主题, 主题是优先级较低的功能配置, 包含所有图表类型共用的通用配置, 与单类图表类型共用的图表配置, 内置light与dark两种主题, 用户可以通过Builder自定义主题 + * @default light 默认为亮色主题 + * @example 'dark' + * @example 'light' + * @example 'customThemeName' + */ + theme?: Theme + /** + * @description 矩形图元样式, 并列柱状图样式配置, 用于定义图表的并列柱状图样式, 包括并列柱状图的颜色, 边框, 圆角等. + * 支持全局样式或条件样式配置 + * 数据筛选器 + * 若配置selector, 提供数值 selector, 局部数据 selector, 条件维度 selector, 条件指标 selector 共四类数据匹配能力 + * 若未配置selector, 则样式全局生效. + */ + barStyle?: BarStyle | BarStyle[] + /** + * 标注点 + * @description 标注点配置, 根据选择的数据, 定义图表的标注点, 包括标注点的位置, 格式, 样式等. + */ + annotationPoint?: AnnotationPoint | AnnotationPoint[] + /** + * @description 维度值标注线，竖直方向展示，能够设置标注线的位置, 样式等 + */ + annotationVerticalLine?: AnnotationVerticalLine | AnnotationVerticalLine[] + /** + * @description 数值标注线(包括均值线、最大值线、最小值线等)，水平方向展示，能够设置标注线的位置, 样式等，如需绘制均值线等数值对应的标注线请使用该配置 + */ + annotationHorizontalLine?: AnnotationHorizontalLine | AnnotationHorizontalLine[] + /** + * 标注区域 + * @description 标注区域配置, 根据选择的数据, 定义图表的标注区域, 包括标注区域的位置, 样式等. + */ + annotationArea?: AnnotationArea | AnnotationArea[] + /** + * @description 差异标注线配置，用于绑定两个数据锚点并展示绝对差值或百分比差值。 + */ + annotationDifferenceLine?: AnnotationDifferenceLine | AnnotationDifferenceLine[] + /** + * @description 当图表开启透视功能或者指标组合的是否，是否开启维度联动功能 + * 当hover 到某个维度值时，联动高亮其他图表中相同维度值的数据 + */ + dimensionLinkage?: DimensionLinkage + /** + * 语言 + * @description 图表语言配置, 支持'zh-CN'与'en-US'两种语言, 另外可以调用 intl.setLocale('zh-CN') 方法设置语言 + * @default 'zh-CN' + */ + locale?: Locale +} +``` + +关联 API：[AnnotationArea](types.md#annotationarea)、[AnnotationDifferenceLine](types.md#annotationdifferenceline)、[AnnotationHorizontalLine](types.md#annotationhorizontalline)、[AnnotationPoint](types.md#annotationpoint)、[AnnotationVerticalLine](types.md#annotationverticalline)、[BackgroundColor](types.md#backgroundcolor)、[BarGapInGroup](types.md#bargapingroup)、[BarLikeAnimation](types.md#barlikeanimation)、[BarMaxWidth](types.md#barmaxwidth)、[BarStyle](types.md#barstyle)、[Brush](types.md#brush)、[Color](types.md#color)、[ColumnDimension](types.md#columndimension)、[ColumnMeasure](types.md#columnmeasure)、[CornerRadius](types.md#cornerradius)、[CrosshairRect](types.md#crosshairrect)、[Dataset](types.md#dataset)、[DimensionLinkage](types.md#dimensionlinkage)、[Label](types.md#label)、[Legend](types.md#legend)、[Locale](i18n.md#locale)、[Page](types.md#page)、[RegionPadding](types.md#regionpadding)、[Sort](types.md#sort)、[SortLegend](types.md#sortlegend)、[StackCornerRadius](types.md#stackcornerradius)、[Theme](types.md#theme)、[Tooltip](types.md#tooltip)、[XBandAxis](types.md#xbandaxis)、[YLinearAxis](types.md#ylinearaxis) + +## ColumnPercent + +源码：[packages/vseed/src/types/chartType/columnPercent/columnPercent.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/chartType/columnPercent/columnPercent.ts) + +包导出：`ColumnPercent` + +```typescript +/** + * @description 百分比柱状图，适用于展示各类别占比关系的场景，Y轴以百分比形式展示数据占比 + * 适用场景: + * - 不同类别数据的占比对比 + * - 多维度数据的构成分析 + * - 时间序列的占比变化趋势 + * @encoding + * 百分比柱状图支持以下视觉通道: + * `xAxis` : x轴通道, 支持`多个维度`, 按维度值映射至x轴 + * `yAxis` : y轴通道, 支持`多个指标`, 按指标值映射至y轴 + * `detail` : 细分通道, 支持`多个维度`, 在同一个颜色系列下展示更细粒度的数据时使用 + * `color` : 颜色通道, 支持`多个维度`或 `一个指标`, 维度颜色用于区分不同的数据系列, 指标颜色用于线性映射指标值到图形颜色 + * `tooltip`: 提示通道, 支持`多个维度`与 `多个指标`, 会在鼠标悬停在数据点上时展示 + * `label` : 标签通道, 支持`多个维度`与 `多个指标`, 会在数据点上展示数据标签 + * @warning + * 数据要求: + * - 至少1个指标字段（度量） + * - 第一个维度会放至X轴, 其余维度会与指标名称(存在多个指标时)合并, 作为图例项展示. + * - 所有指标会自动合并为一个指标 + * 默认开启的功能: + * - 默认开启图例、坐标轴、百分比标签、提示信息、占比计算 + * @recommend + * - 推荐字段配置: `1`个指标, `2`个维度 + * - 支持数据重塑: 至少`1`个指标, `0`个维度 + */ +export interface ColumnPercent { + /** + * 百分比柱状图 + * @description 百分比柱状图，以百分比形式展示各类别数据占比关系 + * @type {'columnPercent'} + * @example 'columnPercent' + */ + chartType: 'columnPercent' + /** + * 数据集 + * @description 符合TidyData规范的且已经聚合的数据集，用于定义图表的数据来源和结构, 用户输入的数据集并不需要进行任何处理, VSeed带有强大的数据重塑功能, 会自行进行数据重塑, 百分比柱状图的数据最终会被转换为2个维度, 1个指标. + * @type {Array>} + * @example [{category:'A', value:30}, {category:'B', value:70}] + */ + dataset: Dataset + /** + * 维度 + * @description 第一个维度被映射到X轴, 其余维度会与指标名称(存在多个指标时)合并, 作为图例项展示. + * @example [{id: 'category', alias: '类别'}] + */ + dimensions?: ColumnDimension[] + /** + * 指标 + * @description 百分比柱状图指标会自动合并为一个指标, 映射到Y轴, 存在多个指标时, 指标名称会与其余维度合并, 作为图例项展示. + * @example [{id: 'value', alias: '数值占比', format: 'percent'}] + */ + measures?: ColumnMeasure[] + /** + * @description 分页配置, 用于指定分页的字段名, 必须是维度 + */ + page?: Page + /** + * @description 图表的背景颜色, 默认为透明背景, 背景颜色可以是颜色字符串, 例如'red', 'blue', 也可以是hex, rgb或rgba'#ff0000', 'rgba(255,0,0,0.5)' + */ + backgroundColor?: BackgroundColor + /** + * @description 颜色配置, 用于定义图表的颜色方案, 包括颜色列表, 颜色映射, 颜色渐变等. + */ + color?: Color + /** + * @description 标签配置, 用于定义图表的数据标签, 包括数据标签的位置, 格式, 样式等. + */ + label?: Label + /** + * @description 图例配置, 用于定义图表的图例, 包括图例的位置, 格式, 样式等. + */ + legend?: Legend + /** + * 绘图区内边距 + * @description 映射到 VChart 的 region[0].padding，用于为标注、标签等绘图区外扩元素预留空间。 + */ + regionPadding?: RegionPadding + /** + * @description 提示信息配置, 用于定义图表的提示信息, 包括提示信息的位置, 格式, 样式等. + */ + tooltip?: Tooltip + /** + * 框选 + * @description 框选配置，用于开启/关闭 brush 框选能力 + */ + brush?: Brush + /** + * 动画配置 + * @description 图表动画配置，按图表类型约束可选效果 + */ + animation?: BarLikeAnimation + /** + * @description x轴, 类目轴, x轴配置, 用于定义图表的x轴, 包括x轴的位置, 格式, 样式等. + */ + xAxis?: XBandAxis + /** + * @description y轴, 数值轴, y轴配置, 用于定义图表的y轴, 包括y轴的位置, 格式, 样式等. + */ + yAxis?: YLinearAxis + /** + * @description 垂直提示框配置, 用于定义图表的垂直提示框, 包括垂直提示框的颜色、标签样式等. + */ + crosshairRect?: CrosshairRect + /** + * @description 柱图圆角的数值或数组，默认启用。当 stackCornerRadius 为 false 时，每个图元独立绘制圆角；为 true 时，通过 clip 裁剪整组堆叠柱体。数值设置所有角，数组按左上、右上、右下、左下排列，数据为负值时圆角方向自动翻转。设为 0 可关闭。barStyle.barRadius 可覆盖单个图元的圆角；stackCornerRadius 为 true 时，整组圆角统一使用 cornerRadius，不受 barStyle.barRadius 影响。 + * @default [4, 4, 0, 0] + * @example [4, 4, 0, 0] + */ + cornerRadius?: CornerRadius + /** + * @description 是否使用整组堆叠圆角，默认 false。设为 true 时，通过 clip 裁剪整组柱体，圆角值统一读取 cornerRadius，保留堆叠内部的直角连接，并优先于 barStyle.barRadius（包括条件样式）。设为 false 时，cornerRadius 对每个图元单独生效。注意：开启 stackCornerRadius 会引起更新动画重叠的 bug，整组 clip 裁剪路径与图元更新动画不同步，依赖 VChart 修复；需要平滑更新动画时建议保持 false。 + * @default false + * @example true + */ + stackCornerRadius?: StackCornerRadius + /** + * @description 柱子的最大宽度，可以是像素值或者百分比字符串 + */ + barMaxWidth?: BarMaxWidth + /** + * @description X轴排序配置, 支持根据维度或指标排序, 以及自定义排序顺序 + * @example + * sort: { + * orderBy: 'profit', + * order: 'asc', + * } + * sort: { + * customOrder:['2019', '2020', '2021'] + * } + */ + sort?: Sort + /** + * @description 图例排序配置, 支持根据维度或指标排序, 以及自定义排序顺序 + * @example + * sortLegend: { + * orderBy: 'profit', + * order: 'asc', + * } + * sortLegend: { + * customOrder:['2019', '2020', '2021'] + * } + */ + sortLegend?: SortLegend + /** + * @description 图表的主题, 主题是优先级较低的功能配置, 包含所有图表类型共用的通用配置, 与单类图表类型共用的图表配置, 内置light与dark两种主题, 用户可以通过Builder自定义主题 + * @default light 默认为亮色主题 + * @example 'dark' + * @example 'light' + * @example 'customThemeName' + */ + theme?: Theme + /** + * @description 矩形图元样式, 用于定义图表的矩形图元样式, 包括矩形图元的颜色, 边框, 圆角等. + * 支持全局样式或条件样式配置 + * 数据筛选器 + * 若配置selector, 提供数值 selector, 局部数据 selector, 条件维度 selector, 条件指标 selector 共四类数据匹配能力 + * 若未配置selector, 则样式全局生效. + */ + barStyle?: BarStyle | BarStyle[] + /** + * @description 标注点配置, 根据选择的数据, 定义图表的标注点, 包括标注点的位置, 格式, 样式等. + */ + annotationPoint?: AnnotationPoint | AnnotationPoint[] + /** + * @description 维度值标注线，竖直方向展示，能够设置标注线的位置, 样式等 + */ + annotationVerticalLine?: AnnotationVerticalLine | AnnotationVerticalLine[] + /** + * @description 数值标注线(包括均值线、最大值线、最小值线等)，水平方向展示，能够设置标注线的位置, 样式等，如需绘制均值线等数值对应的标注线请使用该配置 + */ + annotationHorizontalLine?: AnnotationHorizontalLine | AnnotationHorizontalLine[] + /** + * @description 标注区域配置, 根据选择的数据, 定义图表的标注区域, 包括标注区域的位置, 样式等. + */ + annotationArea?: AnnotationArea | AnnotationArea[] + /** + * @description 当图表开启透视功能或者指标组合的是否，是否开启维度联动功能 + * 当hover 到某个维度值时，联动高亮其他图表中相同维度值的数据 + */ + dimensionLinkage?: DimensionLinkage + /** + * @description 图表语言配置, 支持'zh-CN'与'en-US'两种语言, 另外可以调用 intl.setLocale('zh-CN') 方法设置语言 + * @default 'zh-CN' + */ + locale?: Locale +} +``` + +关联 API：[AnnotationArea](types.md#annotationarea)、[AnnotationHorizontalLine](types.md#annotationhorizontalline)、[AnnotationPoint](types.md#annotationpoint)、[AnnotationVerticalLine](types.md#annotationverticalline)、[BackgroundColor](types.md#backgroundcolor)、[BarLikeAnimation](types.md#barlikeanimation)、[BarMaxWidth](types.md#barmaxwidth)、[BarStyle](types.md#barstyle)、[Brush](types.md#brush)、[Color](types.md#color)、[ColumnDimension](types.md#columndimension)、[ColumnMeasure](types.md#columnmeasure)、[CornerRadius](types.md#cornerradius)、[CrosshairRect](types.md#crosshairrect)、[Dataset](types.md#dataset)、[DimensionLinkage](types.md#dimensionlinkage)、[Label](types.md#label)、[Legend](types.md#legend)、[Locale](i18n.md#locale)、[Page](types.md#page)、[RegionPadding](types.md#regionpadding)、[Sort](types.md#sort)、[SortLegend](types.md#sortlegend)、[StackCornerRadius](types.md#stackcornerradius)、[Theme](types.md#theme)、[Tooltip](types.md#tooltip)、[XBandAxis](types.md#xbandaxis)、[YLinearAxis](types.md#ylinearaxis) + +## Donut + +源码：[packages/vseed/src/types/chartType/donut/donut.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/chartType/donut/donut.ts) + +包导出：`Donut` + +```typescript +/** + * @description 环形图，适用于展示单一维度数据的占比关系，中心留有空白区域可展示汇总信息 + * 适用场景: + * - 需要同时展示整体数据和各部分占比 + * - 强调数据的整体与部分关系 + * - 中心区域需要展示关键指标或标题 + * @encoding + * 环形图支持以下视觉通道: + * `angle` : 角度通道, 支持`多个指标`, 按指标值映射至扇形角度 + * `detail` : 细分通道, 支持`多个维度`, 在同一个颜色系列下展示更细粒度的数据时使用 + * `color` : 颜色通道, 支持`多个维度`或 `一个指标`, 维度颜色用于区分不同的数据系列, 指标颜色用于线性映射指标值到图形颜色 + * `tooltip`: 提示通道, 支持`多个维度`与 `多个指标`, 会在鼠标悬停在数据点上时展示 + * `label` : 标签通道, 支持`多个维度`与 `多个指标`, 会在数据点上展示数据标签 + * @warning + * 数据要求: + * - 至少1个指标字段（度量） + * - 所有维度会与指标名称(存在多个指标时)合并, 作为图例项展示. + * - 所有指标会自动合并为一个指标 + * 默认开启的功能: + * - 默认开启图例、数据标签、提示信息、占比计算；中心文本需显式配置 centerText + * @recommend + * - 推荐字段配置: `1`个指标, `2`个维度 + * - 支持数据重塑: 至少`1`个指标, `0`个维度 + */ +export interface Donut { + /** + * 环形图 + * @description 环形图，中心留有空白区域的饼图变体 + * @type {'donut'} + * @example 'donut' + */ + chartType: 'donut' + /** @description 外半径占可用半径的比例，范围 (0, 1]，默认 0.8。 */ + outerRadius?: number + /** @description 内半径占可用半径的比例，范围 [0, outerRadius)。默认外半径的 80%。 */ + innerRadius?: number + /** @description 起始角度，单位为度，默认 -90。 */ + startAngle?: number + /** @description 结束角度，默认 startAngle + 360；跨度必须在 (0, 360]。 */ + endAngle?: number + /** @description 扇区边框、圆角和悬停效果。 */ + pieStyle?: PieStyle + /** @description 固定中心主副文本；配置后默认开启，不随扇区交互变化。 */ + centerText?: CenterText + /** + * 数据集 + * @description 符合TidyData规范的且已经聚合的数据集，用于定义图表的数据来源和结构, 用户输入的数据集并不需要进行任何处理, VSeed带有强大的数据重塑功能, 会自行进行数据重塑, 环形图的数据最终会被转换为1个维度, 1个指标. + * @type {Array>} + * @example [{category:'A', value:30}, {category:'B', value:70}] + */ + dataset: Dataset + /** + * 维度 + * @description 环形图的所有维度会与指标名称(存在多个指标时)合并成1个维度, 映射到饼图的角度, 并作为图例项展示. + * @example [{id: 'category', alias: '类别'}] + */ + dimensions?: DonutDimension[] + /** + * 指标 + * @description 环形图的所有指标会自动合并为一个指标, 映射到饼图的半径, 存在多个指标时, 指标名称会与其余维度合并, 并作为图例项展示. + * @example [{id: 'value', alias: '数值占比', format: 'percent'}] + */ + measures?: DonutMeasure[] + /** + * @description 分页配置, 用于指定分页的字段名, 必须是维度 + */ + page?: Page + /** + * 图表的背景颜色 + * @default transparent 默认为透明背景 + * @description 背景颜色可以是颜色字符串, 例如'red', 'blue', 也可以是hex, rgb或rgba'#ff0000', 'rgba(255,0,0,0.5)' + */ + backgroundColor?: BackgroundColor + /** + * 颜色 + * @description 颜色配置, 用于定义图表的颜色方案, 包括颜色列表, 颜色映射, 颜色渐变等. + */ + color?: Color + /** + * 标签 + * @description 标签配置, 用于定义图表的数据标签, 包括数据标签的位置, 格式, 样式等. + */ + label?: PieLabel + /** + * 图例 + * @description 图例配置, 用于定义图表的图例, 包括图例的位置, 格式, 样式等. + */ + legend?: Legend + /** + * 提示信息 + * @description 提示信息配置, 用于定义图表的提示信息, 包括提示信息的位置, 格式, 样式等. + */ + tooltip?: Tooltip + /** + * 框选 + * @description 框选配置，用于开启/关闭 brush 框选能力 + */ + brush?: Brush + /** + * 动画配置 + * @description 图表动画配置，按图表类型约束可选效果 + */ + animation?: PieLikeAnimation + /** + * 图表的主题, 主题是优先级较低的功能配置, 包含所有图表类型共用的通用配置, 与单类图表类型共用的图表配置 + * @default light 默认为亮色主题 + * @description 内置light与dark两种主题, 用户可以通过Builder自定义主题 + * @example 'dark' + * @example 'light' + * @example 'customThemeName' + */ + theme?: Theme + /** + * 语言 + * @description 图表语言配置, 支持'zh-CN'与'en-US'两种语言, 另外可以调用 intl.setLocale('zh-CN') 方法设置语言 + * @default 'zh-CN' + */ + locale?: Locale +} +``` + +关联 API：[BackgroundColor](types.md#backgroundcolor)、[Brush](types.md#brush)、[CenterText](types.md#centertext)、[Color](types.md#color)、[Dataset](types.md#dataset)、[DonutDimension](types.md#donutdimension)、[DonutMeasure](types.md#donutmeasure)、[Legend](types.md#legend)、[Locale](i18n.md#locale)、[Page](types.md#page)、[PieLabel](types.md#pielabel)、[PieLikeAnimation](types.md#pielikeanimation)、[PieStyle](types.md#piestyle)、[Theme](types.md#theme)、[Tooltip](types.md#tooltip) + +## DualAxis + +源码：[packages/vseed/src/types/chartType/dualAxis/dualAxis.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/chartType/dualAxis/dualAxis.ts) + +包导出：`DualAxis` + +```typescript +/** + * @description 双轴图，适用于展示两个不同量级或不同单位指标的对比关系，包含主坐标轴和次坐标轴 + * 适用场景: + * - 不同量级指标的对比分析 + * - 相关性指标的趋势比较 + * - 需要同时展示数值和增长率等复合指标 + * - 支持不同类型图表组合（如折线图+柱状图/ 折线图+面积图/ 面积图+柱状图） + * @encoding + * 双轴图支持以下视觉通道: + * `xAxis` : x轴通道, 支持`多个维度`, 按维度值映射至x轴 + * `primaryYAxis` : 主轴y轴通道, 支持`多个指标`, 将指标映射至主轴 + * `secondaryYAxis` : 次轴y轴通道, 支持`多个指标`, 将指标映射至次轴 + * `detail` : 细分通道, 支持`多个维度`, 在同一个颜色系列下展示更细粒度的数据时使用 + * `color` : 颜色通道, 支持`多个维度`或 `一个指标`, 维度颜色用于区分不同的数据系列, 指标颜色用于线性映射指标值到图形颜色 + * `tooltip` : 提示通道, 支持`多个维度`与 `多个指标`, 会在鼠标悬停在数据点上时展示 + * `label` : 标签通道, 支持`多个维度`与 `多个指标`, 会在数据点上展示数据标签 + * @warning + * 数据要求: + * - 至少1个指标字段（度量） + * - 支持指标组, 第一组指标会放置(主轴)左轴, 第二组指标会放置(次轴)右轴 + * - 第一个维度会放至X轴, 其余维度会与指标名称(存在多个指标时)合并, 作为图例项展示. + * - 两组指标字段可分别映射到左右两个Y轴, 一个指标组内的所有会自动合并为一个指标 + * 默认开启的功能: + * - 默认开启坐标轴、图例、数据标签、提示信息 + * @recommend + * - 推荐字段配置: `2`个指标, `2`个维度 + * - 支持数据重塑: 至少`1`个指标, `0`个维度 + */ +export interface DualAxis { + /** + * @description 双轴图，展示两个不同量级指标对比关系的复合图表 + * @example 'dualAxis' + */ + chartType: 'dualAxis' + /** + * @description 数据集, 符合TidyData规范的且已经聚合的数据集，用于定义图表的数据来源和结构, 用户输入的数据集并不需要进行任何处理, VSeed带有强大的数据重塑功能, 会自行进行数据重塑, 双轴图的数据最终会被转换为2个维度, 1或2个指标(取决于用户是否配置了指标组). + * @example [{month:'1月', value:100, growth:0.2}, {month:'2月', value:150, growth:0.5}] + */ + dataset: Dataset + /** + * @description 维度, 第一个维度会放至X轴, 其余维度会与指标名称(存在多个指标时)合并, 作为图例项展示. + * @example [{id: 'month', alias: '月份'}] + */ + dimensions?: DualAxisDimension[] + /** + * @description 双轴图指标 + * 对于encoding中映射到primaryYAxis和secondaryYAxis的指标, + * 可以通过设置`parentId`属性, 将指标进行分组，不同分组的指标会显示到不同子图中， + * 也可以设置`chartType`属性，来指定不同指标组的图表类型。 + * @example [{ id: 'value', encoding: 'primaryYAxis' }, { id: 'growth', encoding: 'secondaryYAxis' }] + */ + measures?: DualAxisMeasure[] + /** + * @description 分页配置 + */ + page?: Page + /** + * @description 用于定义双轴图的两根轴的刻度是否对齐, 当measures有多组时, alignTicks可以配置为数组, 每项对应一个双轴图的刻度是否对齐. + * @example {"chartType":"dualAxis","dataset":[{"date":"2019","profit":10,"sales":100},{"date":"2020","profit":30,"sales":200},{"date":"2021","profit":30,"sales":300},{"date":"2022","profit":50,"sales":500}],"alignTicks":[false,true],"dualMeasures":[{"primaryMeasures":[{"id":"profit"}],"secondaryMeasures":[{"id":"sales"}]},{"primaryMeasures":[{"id":"profit"}],"secondaryMeasures":[{"id":"sales"}]}]} + */ + alignTicks?: boolean | boolean[] + /** + * @description 双轴图的主Y轴配置, 用于定义双轴图的主Y轴, 包括主Y轴的位置, 样式等. 当measures有多组时, primaryYAxis可以配置为数组, 每项对应一个双轴图的主Y轴. + */ + primaryYAxis?: YLinearAxis | YLinearAxis[] + /** + * @description 双轴图的次Y轴配置, 用于定义双轴图的次Y轴, 包括次Y轴的位置, 样式等. 当measures有多组时, secondaryYAxis可以配置为数组, 每项对应一个双轴图的次Y轴. + */ + secondaryYAxis?: YLinearAxis | YLinearAxis[] + /** + * @description x轴, 类目轴, x轴配置, 用于定义图表的x轴, 包括x轴的位置, 格式, 样式等. + */ + xAxis?: XBandAxis + /** + * @default transparent 默认为透明背景 + * @description 图表的背景颜色, 背景颜色可以是颜色字符串, 例如'red', 'blue', 也可以是hex, rgb或rgba'#ff0000', 'rgba(255,0,0,0.5)' + */ + backgroundColor?: BackgroundColor + /** + * @description 颜色配置, 用于定义图表的颜色方案, 包括颜色列表, 颜色映射, 颜色渐变等. + */ + color?: Color + /** + * @description 标签配置, 用于定义图表的数据标签, 包括数据标签的位置, 格式, 样式等. + */ + label?: Label + /** + * @description 图例配置, 用于定义图表的图例, 包括图例的位置, 格式, 样式等. + */ + legend?: Legend + /** + * @description 提示信息配置, 用于定义图表的提示信息, 包括提示信息的位置, 格式, 样式等. + */ + tooltip?: Tooltip + /** + * 框选 + * @description 框选配置，用于开启/关闭 brush 框选能力 + */ + brush?: Brush + /** + * 垂直提示框 + * @description 垂直提示框配置, 用于定义图表的垂直提示框, 包括垂直提示框的颜色、标签样式等. + */ + crosshairRect?: CrosshairRect + /** + * @description 柱图圆角的数值或数组，默认启用。当 stackCornerRadius 为 false 时，每个图元独立绘制圆角；为 true 时，通过 clip 裁剪整组堆叠柱体。数值设置所有角，数组按左上、右上、右下、左下排列，数据为负值时圆角方向自动翻转。设为 0 可关闭。barStyle.barRadius 可覆盖单个图元的圆角；stackCornerRadius 为 true 时，整组圆角统一使用 cornerRadius，不受 barStyle.barRadius 影响。 + * @default [4, 4, 0, 0] + * @example [4, 4, 0, 0] + */ + cornerRadius?: CornerRadius + /** + * @description 是否使用整组堆叠圆角，默认 false。设为 true 时，通过 clip 裁剪整组柱体，圆角值统一读取 cornerRadius，保留堆叠内部的直角连接，并优先于 barStyle.barRadius（包括条件样式）。设为 false 时，cornerRadius 对每个图元单独生效。注意：开启 stackCornerRadius 会引起更新动画重叠的 bug，整组 clip 裁剪路径与图元更新动画不同步，依赖 VChart 修复；需要平滑更新动画时建议保持 false。 + * @default false + * @example true + */ + stackCornerRadius?: StackCornerRadius + /** + * @description X轴排序配置, 支持根据维度或指标排序, 以及自定义排序顺序 + * @example + * sort: { + * orderBy: 'profit', + * order: 'asc', + * } + * sort: { + * customOrder:['2019', '2020', '2021'] + * } + */ + sort?: Sort + /** + * @description 图例排序配置, 支持根据维度或指标排序, 以及自定义排序顺序 + * @example + * sortLegend: { + * orderBy: 'profit', + * order: 'asc', + * } + * sortLegend: { + * customOrder:['2019', '2020', '2021'] + * } + */ + sortLegend?: SortLegend + /** + * @description 图表的主题, 主题是优先级较低的功能配置, 包含所有图表类型共用的通用配置, 与单类图表类型共用的图表配置, 内置light与dark两种主题, 用户可以通过Builder自定义主题 + * @default light 默认为亮色主题 + * @example 'dark' + * @example 'light' + * @example 'customThemeName' + */ + theme?: Theme + /** + * @description 柱子的最大宽度，可以是像素值或者百分比字符串 + */ + barMaxWidth?: BarMaxWidth + /** + * @description 同一分类下，柱子之间的距离，可以是像素值或者百分比字符串 + */ + barGapInGroup?: BarGapInGroup + /** + * 矩形图元样式 + * @description 条形图样式配置, 用于定义图表的条形图样式, 包括条形图的颜色, 边框, 圆角等. + * 支持全局样式或条件样式配置 + * 数据筛选器 + * 若配置selector, 提供数值 selector, 局部数据 selector, 条件维度 selector, 条件指标 selector 共四类数据匹配能力 + * 若未配置selector, 则样式全局生效. + */ + barStyle?: BarStyle | BarStyle[] + /** + * 线图元样式 + * @description 线图元样式配置, 用于定义图表的线图元样式, 包括线图元的颜色, 透明度, 曲线等. + * 支持全局样式或条件样式配置 + * 数据筛选器 + * 若配置selector, 提供数值 selector, 局部数据 selector, 条件维度 selector, 条件指标 selector 共四类数据匹配能力 + * 若未配置selector, 则样式全局生效. + */ + lineStyle?: LineStyle | LineStyle[] + /** + * 点图元样式 + * @description 点图元样式配置, 用于定义图表的点图元样式, 包括点图元的颜色, 边框等. + * 支持全局样式或条件样式配置 + * 数据筛选器 + * 若配置selector, 提供数值 selector, 局部数据 selector, 条件维度 selector, 条件指标 selector 共四类数据匹配能力 + * 若未配置selector, 则样式全局生效. + */ + pointStyle?: PointStyle | PointStyle[] + /** + * 面积图元样式 + * @description 面积图元样式配置, 用于定义图表的面积图元样式, 包括面积图元的颜色, 透明度, 边框等. + * 支持全局样式或条件样式配置 + * 数据筛选器 + * 若配置selector, 提供数值 selector, 局部数据 selector, 条件维度 selector, 条件指标 selector 共四类数据匹配能力 + * 若未配置selector, 则样式全局生效. + */ + areaStyle?: AreaStyle | AreaStyle[] + /** + * @description 标注点配置, 根据选择的数据, 定义图表的标注点, 包括标注点的位置, 格式, 样式等. + */ + annotationPoint?: AnnotationPoint | AnnotationPoint[] + /** + * @description 维度值标注线，竖直方向展示，能够设置标注线的位置, 样式等 + */ + annotationVerticalLine?: AnnotationVerticalLine | AnnotationVerticalLine[] + /** + * @description 数值标注线(包括均值线、最大值线、最小值线等)，水平方向展示，能够设置标注线的位置, 样式等，如需绘制均值线等数值对应的标注线请使用该配置 + */ + annotationHorizontalLine?: AnnotationHorizontalLine | AnnotationHorizontalLine[] + /** + * @description 标注区域配置, 根据选择的数据, 定义图表的标注区域, 包括标注区域的位置, 样式等. + */ + annotationArea?: AnnotationArea | AnnotationArea[] + /** + * @description 当图表开启透视功能或者指标组合的是否，是否开启维度联动功能 + * 当hover 到某个维度值时，联动高亮其他图表中相同维度值的数据 + */ + dimensionLinkage?: DimensionLinkage + /** + * @description 国际化配置, 图表语言配置, 支持'zh-CN'与'en-US'两种语言, 另外可以调用 intl.setLocale('zh-CN') 方法设置语言 + * @default 'zh-CN' + */ + locale?: Locale +} +``` + +关联 API：[AnnotationArea](types.md#annotationarea)、[AnnotationHorizontalLine](types.md#annotationhorizontalline)、[AnnotationPoint](types.md#annotationpoint)、[AnnotationVerticalLine](types.md#annotationverticalline)、[AreaStyle](types.md#areastyle)、[BackgroundColor](types.md#backgroundcolor)、[BarGapInGroup](types.md#bargapingroup)、[BarMaxWidth](types.md#barmaxwidth)、[BarStyle](types.md#barstyle)、[Brush](types.md#brush)、[Color](types.md#color)、[CornerRadius](types.md#cornerradius)、[CrosshairRect](types.md#crosshairrect)、[Dataset](types.md#dataset)、[DimensionLinkage](types.md#dimensionlinkage)、[DualAxisDimension](types.md#dualaxisdimension)、[DualAxisMeasure](types.md#dualaxismeasure)、[Label](types.md#label)、[Legend](types.md#legend)、[LineStyle](types.md#linestyle)、[Locale](i18n.md#locale)、[Page](types.md#page)、[PointStyle](types.md#pointstyle)、[Sort](types.md#sort)、[SortLegend](types.md#sortlegend)、[StackCornerRadius](types.md#stackcornerradius)、[Theme](types.md#theme)、[Tooltip](types.md#tooltip)、[XBandAxis](types.md#xbandaxis)、[YLinearAxis](types.md#ylinearaxis) + +## Funnel + +源码：[packages/vseed/src/types/chartType/funnel/funnel.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/chartType/funnel/funnel.ts) + +包导出：`Funnel` + +```typescript +/** + * @description 漏斗图，用于展示单一维度数据的占比关系 + * 适用场景: + * 漏斗图适用场景: + * - 适合用来分析具有多个连续、规范化步骤的流程，并清晰地展示在每个环节的数据流失或转化情况 + * @encoding + * 漏斗图支持以下视觉通道: + * `size` : 大小通道, 支持`多个指标`, 按指标值映射至漏斗宽度 + * `detail` : 细分通道, 支持`多个维度`, 在同一个颜色系列下展示更细粒度的数据时使用 + * `color` : 颜色通道, 支持`多个维度`或 `一个指标`, 维度颜色用于区分不同的数据系列, 指标颜色用于线性映射指标值到图形颜色 + * `tooltip`: 提示通道, 支持`多个维度`与 `多个指标`, 会在鼠标悬停在数据点上时展示 + * `label` : 标签通道, 支持`多个维度`与 `多个指标`, 会在数据点上展示数据标签 + * @warning + * 数据要求: + * - 至少1个数值字段（指标） + * - 所有维度会与指标名称(存在多个指标时)合并成一个维度, 作为图例项展示 + * - 所有指标会自动合并为一个指标 + * 默认开启的功能: + * - 默认开启图例、数据标签、提示信息、占比计算 + * @recommend + * - 推荐字段配置: `1`个指标, `1`个维度 + * - 支持数据重塑: 至少`1`个指标, `0`个维度 + */ +export interface Funnel { + /** + * 漏斗图 + * @description 漏斗图，展示单一维度数据的占比关系 + * @type {'funnel'} + * @example 'funnel' + */ + chartType: 'funnel' + /** + * 数据集 + * @description 符合TidyData规范的且已经聚合的数据集，用于定义图表的数据来源和结构, 用户输入的数据集并不需要进行任何处理, VSeed带有强大的数据重塑功能, 会自行进行数据重塑, 饼图的数据最终会被转换为1个维度, 1个指标. + * @type {Array>} + * @example [{category:'A', value:30}, {category:'B', value:70}] + */ + dataset: Dataset + /** + * 维度 + * @description 漏斗图的所有维度会与指标名称(存在多个指标时)合并成一个维度,并作为图例项展示 + * @example [{id: 'category', alias: '类别'}] + */ + dimensions?: FunnelDimension[] + /** + * 指标 + * @description 漏斗图的所有指标会自动合并为一个指标, 存在多个指标时, 指标名称会与其余维度合并, 作为图例项展示. + * @example [{id: 'value', alias: '数值占比', format: 'percent'}] + */ + measures?: FunnelMeasure[] + /** + * @description 分页配置 + */ + page?: Page + /** + * 图表的背景颜色 + * @default transparent 默认为透明背景 + * @description 背景颜色可以是颜色字符串, 例如'red', 'blue', 也可以是hex, rgb或rgba'#ff0000', 'rgba(255,0,0,0.5)' + */ + backgroundColor?: BackgroundColor + /** + * @description 线性渐变颜色配置, 用于定义图表的颜色方案 + */ + color?: Color + /** + * @description 标签配置, 用于定义图表的数据标签, 包括数据标签的位置, 格式, 样式等. + */ + label?: Label + /** + * @description 颜色图例配置, 用于定义图表的图例, 包括图例的位置, 格式, 样式等. + */ + legend?: ColorLegend + /** + * 提示信息 + * @description 提示信息配置, 用于定义图表的提示信息, 包括提示信息的位置, 格式, 样式等. + */ + tooltip?: Tooltip + /** + * 框选 + * @description 框选配置，用于开启/关闭 brush 框选能力 + */ + brush?: Brush + /** + * 图表的主题, 主题是优先级较低的功能配置, 包含所有图表类型共用的通用配置, 与单类图表类型共用的图表配置 + * @default light 默认为亮色主题 + * @description 内置light与dark两种主题, 用户可以通过Builder自定义主题 + * @example 'dark' + * @example 'light' + * @example 'customThemeName' + */ + theme?: Theme + /** + * 语言 + * @description 图表语言配置, 支持'zh-CN'与'en-US'两种语言, 另外可以调用 intl.setLocale('zh-CN') 方法设置语言 + * @default 'zh-CN' + */ + locale?: Locale +} +``` + +关联 API：[BackgroundColor](types.md#backgroundcolor)、[Brush](types.md#brush)、[Color](types.md#color)、[ColorLegend](types.md#colorlegend)、[Dataset](types.md#dataset)、[FunnelDimension](types.md#funneldimension)、[FunnelMeasure](types.md#funnelmeasure)、[Label](types.md#label)、[Locale](i18n.md#locale)、[Page](types.md#page)、[Theme](types.md#theme)、[Tooltip](types.md#tooltip) + +## Heatmap + +源码：[packages/vseed/src/types/chartType/heatmap/heatmap.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/chartType/heatmap/heatmap.ts) + +包导出：`Heatmap` + +```typescript +/** + * @description 热力图，通过二维矩阵的颜色深浅展示数据的分布和强弱关系 + * 适用场景: + * - 大规模二维数据的密度和强度展示 + * - 分类与数值的关联分析 + * - 时间序列与类别的交叉对比 + * @encoding + * 热力图支持以下视觉通道: + * `xAxis` : x轴通道, 支持`多个维度`, 按维度值映射至x轴 + * `yAxis` : y轴通道, 支持`多个维度`, 按维度值映射至y轴 + * `detail` : 细分通道, 支持`多个维度`, 在同一个颜色系列下展示更细粒度的数据时使用 + * `color` : 颜色通道, 支持`一个指标`, 按指标值映射至颜色 + * `tooltip`: 提示通道, 支持`多个维度`与 `多个指标`, 会在鼠标悬停在数据点上时展示 + * `label` : 标签通道, 支持`多个维度`与 `多个指标`, 会在数据点上展示数据标签 + * @warning + * 数据要求: + * - 至少2个维度字段，用于确定热力图的行和列 + * - 至少1个数值字段（度量），用于映射颜色深浅 + * - 支持多个指标时，通常选择一个指标进行颜色映射 + * 默认开启的功能: + * - 默认开启图例、坐标轴、数据标签、提示信息、数值缩放 + * @recommend + * - 推荐字段配置: `1`个指标, `2`个维度 + * - 支持数据重塑: 至少`1`个指标, `0`个维度 + */ +export interface Heatmap { + /** + * 热力图 + * @description 热力图，通过二维矩阵的颜色深浅展示数据的分布和强弱关系 + * @type {'heatmap'} + * @example 'heatmap' + */ + chartType: 'heatmap' + /** + * 数据集 + * @description 符合TidyData规范的且已经聚合的数据集，用于定义图表的数据来源和结构, 用户输入的数据集并不需要进行任何处理, VSeed带有强大的数据重塑功能, 会自行进行数据重塑, 热力图的数据最终会被转换为2个维度, 1个指标. + * @type {Array>} + * @example [{month:'1月', value:100}, {month:'2月', value:150}, {month:'3月', value:120}] + */ + dataset: Dataset + /** + * 维度 + * @description 热力图的第一个维度被映射到角度轴, 其余维度会与指标名称(存在多个指标时)合并, 作为图例项展示. + * @example [{id: 'category', alias: '类别'}] + */ + dimensions?: HeatmapDimension[] + /** + * 指标 + * @description 热力图的指标会自动合并为一个指标, 映射到半径轴, 存在多个指标时, 指标名称会与其余维度合并, 作为图例项展示. + * @example [{id: 'value', alias: '数值'}] + */ + measures?: HeatmapMeasure[] + /** + * @description 分页配置 + */ + page?: Page + /** + * 图表的背景颜色 + * @default transparent 默认为透明背景 + * @description 背景颜色可以是颜色字符串, 例如'red', 'blue', 也可以是hex, rgb或rgba'#ff0000', 'rgba(255,0,0,0.5)' + */ + backgroundColor?: BackgroundColor + /** + * 颜色 + * @description 颜色配置, 用于定义图表的颜色方案, 包括颜色列表, 颜色映射, 颜色渐变等. + */ + color?: Color + /** + * @description 热力图标签配置, 用于定义图表的数据标签, 自动开启标签反色, 确保标签可读性. + */ + label?: Label + /** + * 图例 + * @description 热力图的颜色图例配置, 用于定义图表的图例, 包括图例的位置, 格式, 样式等. + */ + legend?: ColorLegend + /** + * 提示信息 + * @description 热力图的提示信息配置, 用于定义图表的提示信息, 包括提示信息的位置, 格式, 样式等. + */ + tooltip?: Tooltip + /** + * 框选 + * @description 框选配置，用于开启/关闭 brush 框选能力 + */ + brush?: Brush + /** + * 图表的主题, 主题是优先级较低的功能配置, 包含所有图表类型共用的通用配置, 与单类图表类型共用的图表配置 + * @default light 默认为亮色主题 + * @description 内置light与dark两种主题, 用户可以通过Builder自定义主题 + * @example 'dark' + * @example 'light' + * @example 'customThemeName' + */ + theme?: Theme + /** + * 语言 + * @description 图表语言配置, 支持'zh-CN'与'en-US'两种语言, 另外可以调用 intl.setLocale('zh-CN') 方法设置语言 + * @default 'zh-CN' + */ + locale?: Locale +} +``` + +关联 API：[BackgroundColor](types.md#backgroundcolor)、[Brush](types.md#brush)、[Color](types.md#color)、[ColorLegend](types.md#colorlegend)、[Dataset](types.md#dataset)、[HeatmapDimension](types.md#heatmapdimension)、[HeatmapMeasure](types.md#heatmapmeasure)、[Label](types.md#label)、[Locale](i18n.md#locale)、[Page](types.md#page)、[Theme](types.md#theme)、[Tooltip](types.md#tooltip) + +## HierarchySankey + +源码：[packages/vseed/src/types/chartType/hierarchySankey/hierarchySankey.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/chartType/hierarchySankey/hierarchySankey.ts) + +包导出：`HierarchySankey` + +```typescript +/** + * @description 层级桑基图，用于展示层级流向数据，通过树形节点与流向连线表示层级关系与流量大小 + * 适用场景: + * - 展示从上游到下游的层级流转关系 + * - 强调树形结构中的流量分配与路径传递 + * @encoding + * 层级桑基图支持以下视觉通道: + * `hierarchy`: 层级通道, 支持`多个维度` + * `size`: 大小通道, 支持`一个指标` + * `label`: 标签通道, 支持`多个维度`与 `多个指标` + * `tooltip`: 提示通道, 支持`多个维度`与 `多个指标` + * @warning + * 数据要求: + * - 至少1个维度字段用于构造层级结构 + * - 至少1个数值字段（度量）用于映射流量大小 + * - advanced pipeline 需要将 tidyData 转换为 VChart 支持的树形 children 结构 + */ +export interface HierarchySankey { + /** + * 层级桑基图 + * @description 层级桑基图，展示层级结构中的流向关系和流量大小 + * @type {'hierarchySankey'} + * @example 'hierarchySankey' + */ + chartType: 'hierarchySankey' + /** + * 数据集 + * @description 符合 TidyData 规范且已经聚合的数据集，用于定义图表的数据来源和结构 + * @type {Array>} + * @example [{region: '华北', province: '河北', value: 30}, {region: '华南', province: '广东', value: 70}] + */ + dataset: Dataset + /** + * 维度 + * @description 维度配置，用于定义层级结构，支持 hierarchy / label / tooltip 通道 + * @example [{id: 'region', alias: '区域'}, {id: 'province', alias: '省份'}] + */ + dimensions?: HierarchyDimension[] + /** + * 指标 + * @description 指标配置，用于定义流量大小，支持 size / label / tooltip 通道 + * @example [{id: 'value', alias: '流量'}] + */ + measures?: HierarchyMeasure[] + /** + * 分页配置 + * @description 用于指定分页的字段名, 必须是维度 + */ + page?: Page + /** + * 图表的背景颜色 + * @default transparent 默认为透明背景 + * @description 背景颜色可以是颜色字符串, 例如 'red', 'blue', 也可以是 hex, rgb 或 rgba, 如 '#ff0000', 'rgba(255,0,0,0.5)' + */ + backgroundColor?: BackgroundColor + /** + * 颜色 + * @description 颜色配置, 用于定义图表的颜色方案, 包括颜色列表, 颜色映射, 颜色渐变等 + */ + color?: Color + /** + * 标签 + * @description 标签配置, 用于定义图表的数据标签, 包括位置, 格式, 样式等 + */ + label?: Label + /** + * 图例 + * @description 图例配置, 用于定义层级桑基图颜色图例的显示、位置与样式 + */ + legend?: Legend + /** + * 提示信息 + * @description 提示信息配置, 用于定义图表的提示信息, 包括内容, 格式, 样式等 + */ + tooltip?: Tooltip + /** + * 图表的主题 + * @default light 默认为亮色主题 + * @description 内置 light 与 dark 两种主题, 用户可以通过 Builder 自定义主题 + * @example 'dark' + * @example 'light' + */ + theme?: Theme + /** + * 语言 + * @description 图表语言配置, 支持 'zh-CN' 与 'en-US' 两种语言 + * @default 'zh-CN' + */ + locale?: Locale +} +``` + +关联 API：[BackgroundColor](types.md#backgroundcolor)、[Color](types.md#color)、[Dataset](types.md#dataset)、[HierarchyDimension](types.md#hierarchydimension)、[HierarchyMeasure](types.md#hierarchymeasure)、[Label](types.md#label)、[Legend](types.md#legend)、[Locale](i18n.md#locale)、[Page](types.md#page)、[Theme](types.md#theme)、[Tooltip](types.md#tooltip) + +## Histogram + +源码：[packages/vseed/src/types/chartType/histogram/histogram.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/chartType/histogram/histogram.ts) + +包导出：`Histogram` + +```typescript +/** + * @description 直方图，适用于展示数据分布情况的场景，X轴为数值轴（连续数据），Y轴为数值轴（连续数据），柱子纵向排列 + * 适用场景: + * - 展示数据的分布情况，如频率分布、概率分布等 + * - 分析数据的集中趋势和离散程度 + * - 识别数据中的异常值和模式 + * @encoding + * 直方图支持以下视觉通道: + * `xAxis` : x轴通道, 支持`一个维度`, 按维度值分箱计算后显示到x轴 + */ +export interface Histogram { + /** + * @description 直方图，适用于展示数据分布情况 + */ + chartType: 'histogram' + /** + * @description 符合TidyData规范的且已经聚合的数据集，用于定义图表的数据来源和结构, 用户输入的数据集并不需要进行任何处理, VSeed带有强大的数据重塑功能, 会自行进行数据重塑, 柱状图的数据最终会被转换为2个维度, 1个指标. + * @type {Array>} + * @example [{category:'A', value:100}, {category:'B', value:200}] + */ + dataset: Dataset + /** + * @description 直方图通常不需要维度 + * @example [{id: "category", alias: "类别"}] + */ + dimensions?: HistogramDimension[] + /** + * @description 直方图仅支持一个维度，并且数据为离散数据 + * @example [{id: "value", alias: "数值"}] + */ + measures?: HistogramMeasure[] + /** + * @description 分页配置 + */ + page?: Page + /** + * @description 图表的背景颜色, 背景颜色可以是颜色字符串, 默认为透明背景, 例如'red', 'blue', 也可以是hex, rgb或rgba'#ff0000', 'rgba(255,0,0,0.5)' + */ + backgroundColor?: BackgroundColor + /** + * @description 颜色配置, 用于定义图表的颜色方案, 包括颜色列表, 颜色映射, 颜色渐变等. + */ + color?: Color + /** + * @description 标签配置, 用于定义图表的数据标签, 包括数据标签的位置, 格式, 样式等. + */ + label?: Label + /** + * @description 图例配置, 用于定义图表的图例, 包括图例的位置, 格式, 样式等. + */ + legend?: Legend + /** + * @description 提示信息配置, 用于定义图表的提示信息, 包括提示信息的位置, 格式, 样式等. + */ + tooltip?: Tooltip + /** + * 框选 + * @description 框选配置，用于开启/关闭 brush 框选能力 + */ + brush?: Brush + /** + * @description x轴, 数值轴, x轴配置, 用于定义图表的x轴, 包括x轴的位置, 格式, 样式等. + */ + xAxis?: XLinearAxis + /** + * @description y轴, 数值轴, y轴配置, 用于定义图表的y轴, 包括y轴的位置, 格式, 样式等. + */ + yAxis?: YLinearAxis + /** + * @description 垂直提示框配置, 用于定义图表的垂直提示框, 包括垂直提示框的颜色、标签样式等. + */ + crosshairRect?: CrosshairRect + /** + * @description 柱图圆角的数值或数组，默认启用。当 stackCornerRadius 为 false 时，每个图元独立绘制圆角；为 true 时，通过 clip 裁剪整组堆叠柱体。数值设置所有角，数组按左上、右上、右下、左下排列，数据为负值时圆角方向自动翻转。设为 0 可关闭。barStyle.barRadius 可覆盖单个图元的圆角；stackCornerRadius 为 true 时，整组圆角统一使用 cornerRadius，不受 barStyle.barRadius 影响。 + * @default [4, 4, 0, 0] + * @example [4, 4, 0, 0] + */ + cornerRadius?: CornerRadius + /** + * @description 是否使用整组堆叠圆角，默认 false。设为 true 时，通过 clip 裁剪整组柱体，圆角值统一读取 cornerRadius，保留堆叠内部的直角连接，并优先于 barStyle.barRadius（包括条件样式）。设为 false 时，cornerRadius 对每个图元单独生效。注意：开启 stackCornerRadius 会引起更新动画重叠的 bug，整组 clip 裁剪路径与图元更新动画不同步，依赖 VChart 修复；需要平滑更新动画时建议保持 false。 + * @default false + * @example true + */ + stackCornerRadius?: StackCornerRadius + /** + * @description 直方图分箱数量, 用于定义直方图的分箱矩形（柱子）的数量 + */ + binCount?: number + /** + * @description 分箱步长，用于计算分箱的宽度，也会影响最终直方图中矩形（柱子）的宽度。如果同时设置了 binCount 和 binStep，则以 binStep 为准 + */ + binStep?: number + /** + * @description 直方图分箱值类型, 用于定义直方图的分箱矩形（柱子）值类型, 默认为'count' + * @default 'count' + */ + binValueType?: 'count' | 'percentage' + /** + * @description 图表的主题, 主题是优先级较低的功能配置, 包含所有图表类型共用的通用配置, 与单类图表类型共用的图表配置, 内置light与dark两种主题, 用户可以通过Builder自定义主题 + * @default light 默认为亮色主题 + * @example 'dark' + * @example 'light' + * @example 'customThemeName' + */ + theme?: Theme + /** + * @description 矩形图元样式, 柱状图样式配置, 用于定义图表的柱状图样式, 包括柱状图的颜色, 边框, 圆角等. + * 支持全局样式或条件样式配置 + * 数据筛选器 + * 若配置selector, 提供数值 selector, 局部数据 selector, 条件维度 selector, 条件指标 selector 共四类数据匹配能力 + * 若未配置selector, 则样式全局生效. + */ + barStyle?: BarStyle | BarStyle[] + /** + * @description 标注点配置, 根据选择的数据, 定义图表的标注点, 包括标注点的位置, 格式, 样式等. + */ + annotationPoint?: AnnotationPoint | AnnotationPoint[] + /** + * @description 数值标注线(分箱值)，竖直方向展示，能够设置标注线的位置, 样式等，如需分箱值对应的标注线，可以使用该配置 + */ + annotationVerticalLine?: AnnotationVerticalLine | AnnotationVerticalLine[] + /** + * @description 数值标注线(包括均值线、最大值线、最小值线等)，水平方向展示，能够设置标注线的位置, 样式等，如需绘制分箱值对应的标注线请使用该配置；注意分箱值受`binValueType` 影响 + */ + annotationHorizontalLine?: AnnotationHorizontalLine | AnnotationHorizontalLine[] + /** + * @description 标注区域配置, 根据选择的数据, 定义图表的标注区域, 包括标注区域的位置, 样式等. + */ + annotationArea?: AnnotationArea | AnnotationArea[] + /** + * @description 核密度回归线配置, 用于展示数据的趋势和分布情况 + */ + kdeRegressionLine?: KdeRegressionLine | KdeRegressionLine[] + /** + * @description 经验累积分布函数回归线配置, 用于展示数据的累积分布情况 + */ + ecdfRegressionLine?: EcdfRegressionLine | EcdfRegressionLine[] + /** + * @description 当图表开启透视功能或者指标组合的是否，是否开启维度联动功能 + * 当hover 到某个维度值时，联动高亮其他图表中相同维度值的数据 + */ + dimensionLinkage?: DimensionLinkage + /** + * @description 图表语言配置, 支持'zh-CN'与'en-US'两种语言, 另外可以调用 intl.setLocale('zh-CN') 方法设置语言 + * @default 'zh-CN' + */ + locale?: Locale +} +``` + +关联 API：[AnnotationArea](types.md#annotationarea)、[AnnotationHorizontalLine](types.md#annotationhorizontalline)、[AnnotationPoint](types.md#annotationpoint)、[AnnotationVerticalLine](types.md#annotationverticalline)、[BackgroundColor](types.md#backgroundcolor)、[BarStyle](types.md#barstyle)、[Brush](types.md#brush)、[Color](types.md#color)、[CornerRadius](types.md#cornerradius)、[CrosshairRect](types.md#crosshairrect)、[Dataset](types.md#dataset)、[DimensionLinkage](types.md#dimensionlinkage)、[EcdfRegressionLine](types.md#ecdfregressionline)、[HistogramDimension](types.md#histogramdimension)、[HistogramMeasure](types.md#histogrammeasure)、[KdeRegressionLine](types.md#kderegressionline)、[Label](types.md#label)、[Legend](types.md#legend)、[Locale](i18n.md#locale)、[Page](types.md#page)、[StackCornerRadius](types.md#stackcornerradius)、[Theme](types.md#theme)、[Tooltip](types.md#tooltip)、[XLinearAxis](types.md#xlinearaxis)、[YLinearAxis](types.md#ylinearaxis) + +## Line + +源码：[packages/vseed/src/types/chartType/line/line.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/chartType/line/line.ts) + +包导出：`Line` + +```typescript +/** + * @description 折线图，适用于展示数据随时间或有序类别变化的趋势，通过线段连接数据点形成趋势线 + * 适用场景: + * - 展示时间序列数据的变化趋势 + * - 比较多个数据系列的趋势对比 + * - 分析数据的增长或下降规律 + * @encoding + * 折线图支持以下视觉通道: + * `x` : x轴通道, 支持`多个维度`, 按维度值映射至x轴 + * `y` : y轴通道, 支持`多个指标`, 按指标值映射至y轴 + * `color` : 颜色通道, 支持`多个维度`或 `一个指标`, 维度颜色用于区分不同的数据系列, 指标颜色用于线性映射指标值到图形颜色 + * `tooltip`: 提示通道, 支持`多个维度`与 `多个指标`, 会在鼠标悬停在数据点上时展示 + * `label` : 标签通道, 支持`多个维度`与 `多个指标`, 会在数据点上展示数据标签 + * @warning + * 数据要求: + * - 至少1个数值字段（度量） + * - 第一个维度会放至X轴, 其余维度会与指标名称(存在多个指标时)合并, 作为图例项展示 + * - 所有指标会自动合并为一个指标 + * 默认开启的功能: + * - 默认开启图例、坐标轴、数据点标记、提示信息、趋势线 + * @recommend + * - 推荐字段配置: `1`个指标, `2`个维度 + * - 支持数据重塑: 至少`1`个指标, `0`个维度 + */ +export interface Line { + /** + * @description 折线图，适用于展示数据随时间或有序类别变化的趋势 + * @type {string} + * @example 'line' + */ + chartType: 'line' + /** + * @description 数据源, 符合TidyData规范的且已经聚合的数据集，用于定义图表的数据来源和结构, 用户输入的数据集并不需要进行任何处理, VSeed带有强大的数据重塑功能, 会自行进行数据重塑, 折线图的数据最终会被转换为2个维度, 1个指标. + * @type {Array>} + * @example [{month:'1月', value:100}, {month:'2月', value:150}, {month:'3月', value:120}] + */ + dataset: Dataset + /** + * @description 维度, 折线图的第一个维度被映射到X轴, 其余维度会与指标名称(存在多个指标时)合并, 作为图例项展示 + * @example [{id: "month", alias: "月份"}] + */ + dimensions?: LineDimension[] + /** + * @description 指标, 折线图的所有指标会自动合并为一个指标, 映射到Y轴, 存在多个指标时, 指标名称会与其余维度合并, 作为图例项展示. + * @example [{id: "value", alias: "数值"}] + */ + measures?: LineMeasure[] + /** + * @description 分页配置 + */ + page?: Page + /** + * 图表的背景颜色 + * @description 图表的背景颜色, 默认为透明背景, 背景颜色可以是颜色字符串, 例如'red', 'blue', 也可以是hex, rgb或rgba'#ff0000', 'rgba(255,0,0,0.5)' + */ + backgroundColor?: BackgroundColor + /** + * 颜色 + * @description 颜色配置, 用于定义图表的颜色方案, 包括颜色列表, 颜色映射, 颜色渐变等. + */ + color?: Color + /** + * 标签 + * @description 标签配置, 用于定义图表的数据标签, 包括数据标签的位置, 格式, 样式等. + */ + label?: Label + /** + * 图例 + * @description 图例配置, 用于定义图表的图例, 包括图例的位置, 格式, 样式等. + */ + legend?: Legend + /** + * 绘图区内边距 + * @description 映射到 VChart 的 region[0].padding，用于为标注、标签等绘图区外扩元素预留空间。 + */ + regionPadding?: RegionPadding + /** + * 提示信息 + * @description 提示信息配置, 用于定义图表的提示信息, 包括提示信息的位置, 格式, 样式等. + */ + tooltip?: Tooltip + /** + * 框选 + * @description 框选配置，用于开启/关闭 brush 框选能力 + */ + brush?: Brush + /** + * 动画配置 + * @description 图表动画配置，按图表类型约束可选效果 + */ + animation?: LineAreaAnimation + /** + * x轴 + * @description 类目轴, x轴配置, 用于定义图表的x轴, 包括x轴的位置, 格式, 样式等. + */ + xAxis?: XBandAxis + /** + * y轴 + * @description 数值轴, y轴配置, 用于定义图表的y轴, 包括y轴的位置, 格式, 样式等. + */ + yAxis?: YLinearAxis + /** + * 垂直提示线 + * @description 鼠标移动到图表上时, 显示的垂直提示线 + */ + crosshairLine?: CrosshairLine + /** + * @description X轴排序配置, 支持根据维度或指标排序, 以及自定义排序顺序 + * @example + * sort: { + * orderBy: 'profit', + * order: 'asc', + * } + * sort: { + * customOrder:['2019', '2020', '2021'] + * } + */ + sort?: Sort + /** + * @description 图例排序配置, 支持根据维度或指标排序, 以及自定义排序顺序 + * @example + * sortLegend: { + * orderBy: 'profit', + * order: 'asc', + * } + * sortLegend: { + * customOrder:['2019', '2020', '2021'] + * } + */ + sortLegend?: SortLegend + /** + * 图表的主题, 主题是优先级较低的功能配置, 包含所有图表类型共用的通用配置, 与单类图表类型共用的图表配置 + * @default light 默认为亮色主题 + * @description 内置light与dark两种主题, 用户可以通过Builder自定义主题 + * @example 'dark' + * @example 'light' + * @example 'customThemeName' + */ + theme?: Theme + /** + * 点图元样式 + * @description 点图元样式配置, 用于定义图表的点图元样式, 包括点图元的颜色, 边框等. + * 支持全局样式或条件样式配置 + * 数据筛选器 + * 若配置selector, 提供数值 selector, 局部数据 selector, 条件维度 selector, 条件指标 selector 共四类数据匹配能力 + * 若未配置selector, 则样式全局生效. + */ + pointStyle?: PointStyle | PointStyle[] + /** + * 线图元样式 + * @description 线图元样式配置, 用于定义图表的线图元样式, 包括线图元的颜色, 透明度, 曲线等. + * 支持全局样式或条件样式配置 + * 数据筛选器 + * 若配置selector, 提供数值 selector, 局部数据 selector, 条件维度 selector, 条件指标 selector 共四类数据匹配能力 + * 若未配置selector, 则样式全局生效. + */ + lineStyle?: LineStyle | LineStyle[] + /** + * 标注点 + * @description 标注点配置, 根据选择的数据, 定义图表的标注点, 包括标注点的位置, 格式, 样式等. + */ + annotationPoint?: AnnotationPoint | AnnotationPoint[] + /** + * @description 维度值标注线，竖直方向展示，能够设置标注线的位置, 样式等 + */ + annotationVerticalLine?: AnnotationVerticalLine | AnnotationVerticalLine[] + /** + * @description 数值标注线(包括均值线、最大值线、最小值线等)，水平方向展示，能够设置标注线的位置, 样式等，如需绘制均值线等数值对应的标注线请使用该配置 + */ + annotationHorizontalLine?: AnnotationHorizontalLine | AnnotationHorizontalLine[] + /** + * 标注区域 + * @description 标注区域配置, 根据选择的数据, 定义图表的标注区域, 包括标注区域的位置, 样式等. + */ + annotationArea?: AnnotationArea | AnnotationArea[] + /** + * 差异标注线 + * @description 根据两个选中的数据点，绘制差异标注线并自动计算差异文本。 + */ + annotationDifferenceLine?: AnnotationDifferenceLine | AnnotationDifferenceLine[] + /** + * @description 当图表开启透视功能或者指标组合的是否，是否开启维度联动功能 + * 当hover 到某个维度值时，联动高亮其他图表中相同维度值的数据 + */ + dimensionLinkage?: DimensionLinkage + /** + * 语言 + * @description 图表语言配置, 支持'zh-CN'与'en-US'两种语言, 另外可以调用 intl.setLocale('zh-CN') 方法设置语言 + * @default 'zh-CN' + */ + locale?: Locale +} +``` + +关联 API：[AnnotationArea](types.md#annotationarea)、[AnnotationDifferenceLine](types.md#annotationdifferenceline)、[AnnotationHorizontalLine](types.md#annotationhorizontalline)、[AnnotationPoint](types.md#annotationpoint)、[AnnotationVerticalLine](types.md#annotationverticalline)、[BackgroundColor](types.md#backgroundcolor)、[Brush](types.md#brush)、[Color](types.md#color)、[CrosshairLine](types.md#crosshairline)、[Dataset](types.md#dataset)、[DimensionLinkage](types.md#dimensionlinkage)、[Label](types.md#label)、[Legend](types.md#legend)、[LineAreaAnimation](types.md#lineareaanimation)、[LineDimension](types.md#linedimension)、[LineMeasure](types.md#linemeasure)、[LineStyle](types.md#linestyle)、[Locale](i18n.md#locale)、[Page](types.md#page)、[PointStyle](types.md#pointstyle)、[RegionPadding](types.md#regionpadding)、[Sort](types.md#sort)、[SortLegend](types.md#sortlegend)、[Theme](types.md#theme)、[Tooltip](types.md#tooltip)、[XBandAxis](types.md#xbandaxis)、[YLinearAxis](types.md#ylinearaxis) + +## Pie + +源码：[packages/vseed/src/types/chartType/pie/pie.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/chartType/pie/pie.ts) + +包导出：`Pie` + +```typescript +/** + * @description 饼图，适用于展示单一维度数据的占比关系，通过扇形面积大小表示各类别占比 + * 适用场景: + * - 展示分类数据的占比分布 + * - 强调数据的整体与部分关系 + * - 类别数量较少（建议不超过6个）的占比分析 + * @encoding + * 饼图支持以下视觉通道: + * `angle` : 角度通道, 支持`多个指标`, 按指标值映射至扇形角度 + * `detail` : 细分通道, 支持`多个维度`, 在同一个颜色系列下展示更细粒度的数据时使用 + * `color` : 颜色通道, 支持`多个维度`或 `一个指标`, 维度颜色用于区分不同的数据系列, 指标颜色用于线性映射指标值到图形颜色 + * `tooltip`: 提示通道, 支持`多个维度`与 `多个指标`, 会在鼠标悬停在数据点上时展示 + * `label` : 标签通道, 支持`多个维度`与 `多个指标`, 会在数据点上展示数据标签 + * @warning + * 数据要求: + * - 至少1个数值字段（度量） + * - 所有维度会与指标名称(存在多个指标时)合并成一个维度, 作为图例项展示 + * - 所有指标会自动合并为一个指标 + * 默认开启的功能: + * - 默认开启图例、数据标签、提示信息、占比计算 + * @recommend + * - 推荐字段配置: `1`个指标, `1`个维度 + * - 支持数据重塑: 至少`1`个指标, `0`个维度 + */ +export interface Pie { + /** + * 饼图 + * @description 饼图，展示单一维度数据的占比关系 + * @type {'pie'} + * @example 'pie' + */ + chartType: 'pie' + /** @description 外半径占可用半径的比例，范围 (0, 1]，默认 0.8。 */ + outerRadius?: number + /** @description 内半径占可用半径的比例，范围 [0, outerRadius)。默认 0。 */ + innerRadius?: number + /** @description 起始角度，单位为度，默认 -90。 */ + startAngle?: number + /** @description 结束角度，默认 startAngle + 360；跨度必须在 (0, 360]。 */ + endAngle?: number + /** @description 扇区边框、圆角和悬停效果。 */ + pieStyle?: PieStyle + /** + * 数据集 + * @description 符合TidyData规范的且已经聚合的数据集，用于定义图表的数据来源和结构, 用户输入的数据集并不需要进行任何处理, VSeed带有强大的数据重塑功能, 会自行进行数据重塑, 饼图的数据最终会被转换为1个维度, 1个指标. + * @type {Array>} + * @example [{category:'A', value:30}, {category:'B', value:70}] + */ + dataset: Dataset + /** + * 维度 + * @description 饼图的所有维度会与指标名称(存在多个指标时)合并成一个维度, 映射到角度, 并作为图例项展示 + * @example [{id: 'category', alias: '类别'}] + */ + dimensions?: PieDimension[] + /** + * 指标 + * @description 饼图的所有指标会自动合并为一个指标, 映射到半径轴, 存在多个指标时, 指标名称会与其余维度合并, 作为图例项展示. + * @example [{id: 'value', alias: '数值占比', format: 'percent'}] + */ + measures?: PieMeasure[] + /** + * @description 分页配置, 用于指定分页的字段名, 必须是维度 + */ + page?: Page + /** + * 图表的背景颜色 + * @default transparent 默认为透明背景 + * @description 背景颜色可以是颜色字符串, 例如'red', 'blue', 也可以是hex, rgb或rgba'#ff0000', 'rgba(255,0,0,0.5)' + */ + backgroundColor?: BackgroundColor + /** + * 颜色 + * @description 颜色配置, 用于定义图表的颜色方案, 包括颜色列表, 颜色映射, 颜色渐变等. + */ + color?: Color + /** + * 标签 + * @description 标签配置, 用于定义图表的数据标签, 包括数据标签的位置, 格式, 样式等. + */ + label?: PieLabel + /** + * 图例 + * @description 图例配置, 用于定义图表的图例, 包括图例的位置, 格式, 样式等. + */ + legend?: Legend + /** + * 提示信息 + * @description 提示信息配置, 用于定义图表的提示信息, 包括提示信息的位置, 格式, 样式等. + */ + tooltip?: Tooltip + /** + * 框选 + * @description 框选配置，用于开启/关闭 brush 框选能力 + */ + brush?: Brush + /** + * 动画配置 + * @description 图表动画配置，按图表类型约束可选效果 + */ + animation?: PieLikeAnimation + /** + * 图表的主题, 主题是优先级较低的功能配置, 包含所有图表类型共用的通用配置, 与单类图表类型共用的图表配置 + * @default light 默认为亮色主题 + * @description 内置light与dark两种主题, 用户可以通过Builder自定义主题 + * @example 'dark' + * @example 'light' + * @example 'customThemeName' + */ + theme?: Theme + /** + * 语言 + * @description 图表语言配置, 支持'zh-CN'与'en-US'两种语言, 另外可以调用 intl.setLocale('zh-CN') 方法设置语言 + * @default 'zh-CN' + */ + locale?: Locale +} +``` + +关联 API：[BackgroundColor](types.md#backgroundcolor)、[Brush](types.md#brush)、[Color](types.md#color)、[Dataset](types.md#dataset)、[Legend](types.md#legend)、[Locale](i18n.md#locale)、[Page](types.md#page)、[PieDimension](types.md#piedimension)、[PieLabel](types.md#pielabel)、[PieLikeAnimation](types.md#pielikeanimation)、[PieMeasure](types.md#piemeasure)、[PieStyle](types.md#piestyle)、[Theme](types.md#theme)、[Tooltip](types.md#tooltip) + +## PivotTable + +源码：[packages/vseed/src/types/chartType/pivotTable/pivotTable.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/chartType/pivotTable/pivotTable.ts) + +包导出：`PivotTable` + +```typescript +/** + * @description 透视表格，适用于多维度数据交叉分析场景，可灵活配置行、列维度和指标计算方式 + * 适用场景: + * - 复杂多维数据统计分析 + * - 数据钻取与聚合展示 + * - 业务报表生成与数据探索 + * @encoding + * 透视表支持以下视觉通道: + * `row` : 行维度, 支持`多个维度`, 按维度值在行上进行分组 + * `column` : 列维度, 支持`多个维度`, 按维度值在列上进行分组 + * `detail` : 细分通道, 支持`多个指标`, 在单元格中展示指标值 + * @warning + * 数据要求: + * - 至少1个行维度 或 1个列维度 或 1个指标 + * - 数据必须已聚合 + * - 数据可被分组 + * 默认开启的功能: + * - 默认开启行列排序、数据筛选、聚合计算、小计/总计 + * @recommend + * - 推荐字段配置: `1`个指标, `1`个维度 + * - 支持数据重塑: 至少`1`个指标, `0`个维度 + */ +export interface PivotTable { + /** + * @description 透视表，适用于多维度数据交叉分析场景 + * @type {'pivotTable'} + * @example 'pivotTable' + */ + chartType: 'pivotTable' + /** + * @description 符合TidyData规范的且已经聚合的数据集，用于定义图表的数据来源和结构, 用户输入的数据集并不需要进行任何处理, VSeed带有强大的数据重塑功能, 会自行进行数据重塑, 透视表的数据最终会被转换对应的树形结构, 用户无需手动进行数据处理. + * @type {Array>} + * @example [{region:'华东', product:'A', sales:1000}, {region:'华东', product:'B', sales:1500}] + */ + dataset: Dataset + /** + * @description 透视表的行维度和列维度，会自动对数据进行处理为树形结构, 并映射到行和列轴, + * @type {Dimensions} + * @example [{id: 'region', alias: '地区', isRow: true}, {id: 'product', alias: '产品', isColumn: true}] + */ + dimensions?: TableDimension[] + /** + * @description 透视表支持多个维度指标 + * @type {Measures} + * @example [{id: 'sales', alias: '销售额', aggregation: 'sum'}] + */ + measures?: TableMeasure[] + /** + * @description 分页配置, 用于指定分页的字段名, 必须是维度 + */ + page?: Page + /** + * @default transparent 默认为透明背景 + * @description 背景颜色可以是颜色字符串, 例如'red', 'blue', 也可以是hex, rgb或rgba'#ff0000', 'rgba(255,0,0,0.5)' + */ + backgroundColor?: BackgroundColor + /** + * @description 表格的边框颜色 + */ + borderColor?: string + /** + * @description 表格体的字体大小 + */ + bodyFontSize?: number + /** + * @description 表格体的字体颜色 + */ + bodyFontColor?: string + /** + * @description 表格体的背景颜色 + */ + bodyBackgroundColor?: string + /** + * @description 行表头、列表头的字体大小 + */ + headerFontSize?: number + /** + * @description 行表头、列表头的字体颜色 + */ + headerFontColor?: string + /** + * @description 行表头、列表头的背景颜色 + */ + headerBackgroundColor?: string + /** + * @description 鼠标悬浮在行、列表头的单元格时的背景颜色, 用于突出显示鼠标所在的行列交叉的单元格 + */ + hoverHeaderBackgroundColor?: string + /** + * @description 鼠标悬浮在行、列表头的单元格时, 用于突出显示鼠标所在的行与列的所有单元格 + */ + hoverHeaderInlineBackgroundColor?: string + /** + * @description 选中的单元格的边框颜色, 用于突出显示选中的单元格 + */ + selectedBorderColor?: string + /** + * @description 选中的单元格的背景颜色, 用于突出显示选中的单元格 + */ + selectedBackgroundColor?: string + /** + * @description 设置表格正文部分单元格的特殊样式 + */ + bodyCellStyle?: BodyCellStyle | BodyCellStyle[] + /** + * @description 指标是否作为列展示，当为 true 时指标在列方向展开，为 false 时在行方向展开 + * @default true + * @example true + */ + indicatorsAsCol?: boolean + /** + * @description 透视表的总计和小计配置 + * @example { row: { showGrandTotals: true, showSubTotals: true, subTotalsDimensions: ['category'] } } + */ + totals?: PivotTableTotals + /** + * 图表的主题, 主题是优先级较低的功能配置, 包含所有图表类型共用的通用配置, 与单类图表类型共用的图表配置 + * @default light 默认为亮色主题 + * @description 内置light与dark两种主题, 用户可以通过Builder自定义主题 + * @example 'dark' + * @example 'light' + * @example 'customThemeName' + */ + theme?: Theme + /** + * 语言 + * @description 图表语言配置, 支持'zh-CN'与'en-US'两种语言, 另外可以调用 intl.setLocale('zh-CN') 方法设置语言 + * @default 'zh-CN' + */ + locale?: Locale +} +``` + +关联 API：[BackgroundColor](types.md#backgroundcolor)、[BodyCellStyle](types.md#bodycellstyle)、[Dataset](types.md#dataset)、[Locale](i18n.md#locale)、[Page](types.md#page)、[PivotTableTotals](types.md#pivottabletotals)、[TableDimension](types.md#tabledimension)、[TableMeasure](types.md#tablemeasure)、[Theme](types.md#theme) + +## RaceBar + +源码：[packages/vseed/src/types/chartType/raceBar/raceBar.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/chartType/raceBar/raceBar.ts) + +包导出：`RaceBar` + +```typescript +/** + * @description 动态条形图 (Race Bar Chart) + * 适用于展示数据随时间变化的排名情况 + */ +export interface RaceBar { + /** + * @description 动态条形图，适用于展示数据随时间变化的排名情况 + * @type {'raceBar'} + */ + chartType: 'raceBar' + /** + * @description 数据源 + */ + dataset: Dataset + /** + * @description 维度 + */ + dimensions?: RaceBarDimension[] + /** + * @description 指标 + */ + measures?: RaceBarMeasure[] + /** + * @description 播放器配置, 用于指定时间维度, 动态条形图的核心配置 + */ + player?: Player + /** + * @description 排序配置, 动态条形图通常需要根据数值动态排序 + */ + sort?: Sort + /** + * @description 分页配置 + */ + page?: Page + /** + * @description 背景颜色 + */ + backgroundColor?: BackgroundColor + /** + * @description 颜色配置 + */ + color?: Color + /** + * @description 标签配置 + */ + label?: Label + /** + * @description 图例配置 + */ + legend?: Legend + /** + * @description 提示信息配置 + */ + tooltip?: Tooltip + /** + * @description 框选配置 + */ + brush?: Brush + /** + * @description x轴配置，为数值轴，展示指标值 + */ + xAxis?: XLinearAxis + /** + * @description y轴配置，为类目轴，展示维度值，柱子竖向排列 + */ + yAxis?: YBandAxis + /** + * @description 水平提示框配置 + */ + crosshairRect?: CrosshairRect + /** + * @description 柱图圆角的数值或数组，默认启用。当 stackCornerRadius 为 false 时，每个图元独立绘制圆角；为 true 时，通过 clip 裁剪整组堆叠柱体。数值设置所有角，数组按左上、右上、右下、左下排列，数据为负值时圆角方向自动翻转。设为 0 可关闭。barStyle.barRadius 可覆盖单个图元的圆角；stackCornerRadius 为 true 时，整组圆角统一使用 cornerRadius，不受 barStyle.barRadius 影响。 + * @default [0, 4, 4, 0] + * @example [4, 4, 0, 0] + */ + cornerRadius?: CornerRadius + /** + * @description 是否使用整组堆叠圆角，默认 false。设为 true 时，通过 clip 裁剪整组柱体，圆角值统一读取 cornerRadius，保留堆叠内部的直角连接，并优先于 barStyle.barRadius（包括条件样式）。设为 false 时，cornerRadius 对每个图元单独生效。注意：开启 stackCornerRadius 会引起更新动画重叠的 bug，整组 clip 裁剪路径与图元更新动画不同步，依赖 VChart 修复；需要平滑更新动画时建议保持 false。 + * @default false + * @example true + */ + stackCornerRadius?: StackCornerRadius + /** + * @description 矩形的最大高度 + */ + barMaxWidth?: BarMaxWidth + /** + * @description 图例排序配置 + */ + sortLegend?: SortLegend + /** + * @description 主题 + */ + theme?: Theme + /** + * @description 条形图样式配置 + */ + barStyle?: BarStyle | BarStyle[] + /** + * @description 标注点配置 + */ + annotationPoint?: AnnotationPoint | AnnotationPoint[] + /** + * @description 数值标注线 + */ + annotationVerticalLine?: AnnotationVerticalLine | AnnotationVerticalLine[] + /** + * @description 维度值标注线 + */ + annotationHorizontalLine?: AnnotationHorizontalLine | AnnotationHorizontalLine[] + /** + * @description 标注区域配置 + */ + annotationArea?: AnnotationArea | AnnotationArea[] + /** + * @description 维度联动配置 + */ + dimensionLinkage?: DimensionLinkage + /** + * @description 语言配置 + */ + locale?: Locale +} +``` + +关联 API：[AnnotationArea](types.md#annotationarea)、[AnnotationHorizontalLine](types.md#annotationhorizontalline)、[AnnotationPoint](types.md#annotationpoint)、[AnnotationVerticalLine](types.md#annotationverticalline)、[BackgroundColor](types.md#backgroundcolor)、[BarMaxWidth](types.md#barmaxwidth)、[BarStyle](types.md#barstyle)、[Brush](types.md#brush)、[Color](types.md#color)、[CornerRadius](types.md#cornerradius)、[CrosshairRect](types.md#crosshairrect)、[Dataset](types.md#dataset)、[DimensionLinkage](types.md#dimensionlinkage)、[Label](types.md#label)、[Legend](types.md#legend)、[Locale](i18n.md#locale)、[Page](types.md#page)、[Player](types.md#player)、[RaceBarDimension](types.md#racebardimension)、[RaceBarMeasure](types.md#racebarmeasure)、[Sort](types.md#sort)、[SortLegend](types.md#sortlegend)、[StackCornerRadius](types.md#stackcornerradius)、[Theme](types.md#theme)、[Tooltip](types.md#tooltip)、[XLinearAxis](types.md#xlinearaxis)、[YBandAxis](types.md#ybandaxis) + +## RaceColumn + +源码：[packages/vseed/src/types/chartType/raceColumn/raceColumn.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/chartType/raceColumn/raceColumn.ts) + +包导出：`RaceColumn` + +```typescript +/** + * @description 动态柱状图 (Race Column Chart) + * 适用于展示数据随时间变化的排名情况，柱子竖向排列 + * 适用场景： + * - 数据项名称较长时 + * - 需要直观比较不同类别的数值大小并展示其随时间的变化排序 + * - 展示时间序列数据变化趋势，并动态更新柱子排序 + * @note + * 动态柱状图： + * - X轴为类目轴（分类数据），展示维度值 + * - Y轴为数值轴（连续数据），展示指标值 + * - 支持通过播放器控制时间维度，动态展示数据变化 + * - 柱子在动画中根据数值大小动态排序 + */ +export interface RaceColumn { + /** + * @description 动态柱状图，适用于展示数据随时间变化的排名情况 + * @type {'raceColumn'} + */ + chartType: 'raceColumn' + /** + * @description 符合TidyData规范的且已经聚合的数据集 + * @type {Array>} + * @example [{category:'A', value:100, date: '2020'}, {category:'B', value:200, date: '2020'}] + */ + dataset: Dataset + /** + * 维度 + * @description 第一个维度映射到player，第二个维度映射到X轴 + */ + dimensions?: RaceColumnDimension[] + /** + * 指标 + * @description 动态柱状图的所有指标会自动合并为一个指标, 映射到Y轴, 存在多个指标时, 指标名称会与其余维度合并, 作为图例项展示. + * @example [{id: "value", alias: "数值"}] + */ + measures?: ColumnMeasure[] + /** + * @description 播放器配置，用于指定时间维度，是动态柱状图的核心配置 + * 通过播放器控制时间维度的播放进度，实现数据的动态更新和排序变化 + */ + player?: Player + /** + * @description 排序配置，动态柱状图通常需要根据数值动态排序 + * 控制柱子在X轴上的排序方式 + */ + sort?: Sort + /** + * @description 分页配置，用于处理数据量较大的场景 + */ + page?: Page + /** + * @description 背景颜色配置 + */ + backgroundColor?: BackgroundColor + /** + * @description 颜色配置，用于区分不同的维度或指标 + */ + color?: Color + /** + * @description 标签配置，用于在柱子上显示数据标签 + */ + label?: Label + /** + * @description 图例配置 + */ + legend?: Legend + /** + * @description 提示信息配置，用于鼠标悬停时展示详细信息 + */ + tooltip?: Tooltip + /** + * @description 框选配置，用于支持框选交互 + */ + brush?: Brush + /** + * @description X轴配置，为类目轴，展示维度值，柱子竖向排列 + */ + xAxis?: XBandAxis + /** + * @description Y轴配置，为数值轴，展示指标值 + */ + yAxis?: YLinearAxis + /** + * @description 十字线配置，用于展示数据的精确值 + */ + crosshairRect?: CrosshairRect + /** + * @description 柱图圆角的数值或数组，默认启用。当 stackCornerRadius 为 false 时，每个图元独立绘制圆角；为 true 时，通过 clip 裁剪整组堆叠柱体。数值设置所有角，数组按左上、右上、右下、左下排列，数据为负值时圆角方向自动翻转。设为 0 可关闭。barStyle.barRadius 可覆盖单个图元的圆角；stackCornerRadius 为 true 时，整组圆角统一使用 cornerRadius，不受 barStyle.barRadius 影响。 + * @default [4, 4, 0, 0] + * @example [4, 4, 0, 0] + */ + cornerRadius?: CornerRadius + /** + * @description 是否使用整组堆叠圆角，默认 false。设为 true 时，通过 clip 裁剪整组柱体，圆角值统一读取 cornerRadius，保留堆叠内部的直角连接，并优先于 barStyle.barRadius（包括条件样式）。设为 false 时，cornerRadius 对每个图元单独生效。注意：开启 stackCornerRadius 会引起更新动画重叠的 bug，整组 clip 裁剪路径与图元更新动画不同步，依赖 VChart 修复；需要平滑更新动画时建议保持 false。 + * @default false + * @example true + */ + stackCornerRadius?: StackCornerRadius + /** + * @description 矩形的最大宽度配置 + */ + barMaxWidth?: BarMaxWidth + /** + * @description 图例排序配置 + */ + sortLegend?: SortLegend + /** + * @description 主题配置 + */ + theme?: Theme + /** + * @description 柱形样式配置，可以为单个样式或数组形式 + */ + barStyle?: BarStyle | BarStyle[] + /** + * @description 标注点配置，用于在特定数据点上添加标记 + */ + annotationPoint?: AnnotationPoint | AnnotationPoint[] + /** + * @description 数值标注线，竖向标注线，标记特定的X轴数值 + */ + annotationVerticalLine?: AnnotationVerticalLine | AnnotationVerticalLine[] + /** + * @description 维度值标注线，横向标注线，标记特定的Y轴类别 + */ + annotationHorizontalLine?: AnnotationHorizontalLine | AnnotationHorizontalLine[] + /** + * @description 标注区域配置，用于突出显示特定的数据范围 + */ + annotationArea?: AnnotationArea | AnnotationArea[] + /** + * @description 维度联动配置，支持多个图表间的维度联动交互 + */ + dimensionLinkage?: DimensionLinkage + /** + * @description 语言配置 + */ + locale?: Locale +} +``` + +关联 API：[AnnotationArea](types.md#annotationarea)、[AnnotationHorizontalLine](types.md#annotationhorizontalline)、[AnnotationPoint](types.md#annotationpoint)、[AnnotationVerticalLine](types.md#annotationverticalline)、[BackgroundColor](types.md#backgroundcolor)、[BarMaxWidth](types.md#barmaxwidth)、[BarStyle](types.md#barstyle)、[Brush](types.md#brush)、[Color](types.md#color)、[ColumnMeasure](types.md#columnmeasure)、[CornerRadius](types.md#cornerradius)、[CrosshairRect](types.md#crosshairrect)、[Dataset](types.md#dataset)、[DimensionLinkage](types.md#dimensionlinkage)、[Label](types.md#label)、[Legend](types.md#legend)、[Locale](i18n.md#locale)、[Page](types.md#page)、[Player](types.md#player)、[RaceColumnDimension](types.md#racecolumndimension)、[Sort](types.md#sort)、[SortLegend](types.md#sortlegend)、[StackCornerRadius](types.md#stackcornerradius)、[Theme](types.md#theme)、[Tooltip](types.md#tooltip)、[XBandAxis](types.md#xbandaxis)、[YLinearAxis](types.md#ylinearaxis) + +## RaceDonut + +源码：[packages/vseed/src/types/chartType/raceDonut/raceDonut.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/chartType/raceDonut/raceDonut.ts) + +包导出：`RaceDonut` + +```typescript +/** + * @description 动态环形图 (Race Donut Chart) + * 适用于展示数据随时间变化的占比关系，中心留有空白区域可展示汇总信息 + * 适用场景： + * - 需要同时展示整体数据和各部分占比随时间的变化 + * - 强调数据的整体与部分关系 + * - 中心区域需要展示关键指标或标题 + * @note + * 动态环形图： + * - 角度映射指标值，颜色映射维度值 + * - 支持通过播放器控制时间维度，动态展示占比变化 + * - 相比饼图，中心区域留白，视觉上更轻量 + */ +export interface RaceDonut { + /** + * @description 动态环形图，适用于展示数据随时间变化的占比关系 + * @type {'raceDonut'} + */ + chartType: 'raceDonut' + /** + * @description 数据源 + */ + dataset: Dataset + /** + * @description 维度 + */ + dimensions?: RaceDonutDimension[] + /** + * @description 指标 + */ + measures?: DonutMeasure[] + /** + * @description 分页配置 + */ + page?: Page + /** + * @description 播放器配置, 用于指定时间维度, 动态环形图的核心配置 + */ + player?: Player + /** + * @description 背景颜色 + */ + backgroundColor?: BackgroundColor + /** + * @description 颜色配置 + */ + color?: Color + /** + * @description 标签配置 + */ + label?: PieLabel + /** + * @description 图例配置 + */ + legend?: Legend + /** + * @description 提示信息配置 + */ + tooltip?: Tooltip + /** + * @description 框选配置 + */ + brush?: Brush + /** + * @description 主题配置 + */ + theme?: Theme + /** + * @description 语言配置 + */ + locale?: Locale +} +``` + +关联 API：[BackgroundColor](types.md#backgroundcolor)、[Brush](types.md#brush)、[Color](types.md#color)、[Dataset](types.md#dataset)、[DonutMeasure](types.md#donutmeasure)、[Legend](types.md#legend)、[Locale](i18n.md#locale)、[Page](types.md#page)、[PieLabel](types.md#pielabel)、[Player](types.md#player)、[RaceDonutDimension](types.md#racedonutdimension)、[Theme](types.md#theme)、[Tooltip](types.md#tooltip) + +## RaceLine + +源码：[packages/vseed/src/types/chartType/raceLine/raceLine.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/chartType/raceLine/raceLine.ts) + +包导出：`RaceLine` + +```typescript +/** + * @description 动态折线图 (Race Line Chart) + * 适用于展示数据随时间变化的趋势，通过线段连接数据点形成趋势线 + * 适用场景: + * - 展示多个数据系列随时间的变化趋势 + * - 比较不同类别的增长或下降规律 + * - 观察数据在时间维度上的波动情况 + * @note + * 动态折线图： + * - X轴通常为时间轴或类目轴，展示维度值 + * - Y轴为数值轴，展示指标值 + * - 支持通过播放器控制时间维度，动态展示折线的延伸过程 + */ +export interface RaceLine { + /** + * @description 动态折线图，适用于展示数据随时间变化的趋势 + * @type {'raceLine'} + */ + chartType: 'raceLine' + /** + * @description 数据源 + */ + dataset: Dataset + /** + * @description 维度 + */ + dimensions?: LineDimension[] + /** + * @description 指标 + */ + measures?: LineMeasure[] + /** + * @description 分页配置 + */ + page?: Page + /** + * @description 播放器配置, 用于指定时间维度, 动态折线图的核心配置 + */ + player?: Player + /** + * @description 背景颜色 + */ + backgroundColor?: BackgroundColor + /** + * @description 颜色配置 + */ + color?: Color + /** + * @description 标签配置 + */ + label?: Label + /** + * @description 图例配置 + */ + legend?: Legend + /** + * @description 提示信息配置 + */ + tooltip?: Tooltip + /** + * @description 框选配置 + */ + brush?: Brush + /** + * @description x轴配置，为类目轴，展示维度值 + */ + xAxis?: XBandAxis + /** + * @description y轴配置，为数值轴，展示指标值 + */ + yAxis?: YLinearAxis + /** + * @description 垂直提示线配置 + */ + crosshairLine?: CrosshairLine + /** + * @description X轴排序配置 + */ + sort?: Sort + /** + * @description 图例排序配置 + */ + sortLegend?: SortLegend + /** + * @description 主题配置 + */ + theme?: Theme + /** + * @description 点图元样式配置 + */ + pointStyle?: PointStyle | PointStyle[] + /** + * @description 线图元样式配置 + */ + lineStyle?: LineStyle | LineStyle[] + /** + * @description 标注点配置 + */ + annotationPoint?: AnnotationPoint | AnnotationPoint[] + /** + * @description 维度值标注线配置 + */ + annotationVerticalLine?: AnnotationVerticalLine | AnnotationVerticalLine[] + /** + * @description 数值标注线配置 + */ + annotationHorizontalLine?: AnnotationHorizontalLine | AnnotationHorizontalLine[] + /** + * @description 标注区域配置 + */ + annotationArea?: AnnotationArea | AnnotationArea[] + /** + * @description 维度联动配置 + */ + dimensionLinkage?: DimensionLinkage + /** + * @description 语言配置 + */ + locale?: Locale +} +``` + +关联 API：[AnnotationArea](types.md#annotationarea)、[AnnotationHorizontalLine](types.md#annotationhorizontalline)、[AnnotationPoint](types.md#annotationpoint)、[AnnotationVerticalLine](types.md#annotationverticalline)、[BackgroundColor](types.md#backgroundcolor)、[Brush](types.md#brush)、[Color](types.md#color)、[CrosshairLine](types.md#crosshairline)、[Dataset](types.md#dataset)、[DimensionLinkage](types.md#dimensionlinkage)、[Label](types.md#label)、[Legend](types.md#legend)、[LineDimension](types.md#linedimension)、[LineMeasure](types.md#linemeasure)、[LineStyle](types.md#linestyle)、[Locale](i18n.md#locale)、[Page](types.md#page)、[Player](types.md#player)、[PointStyle](types.md#pointstyle)、[Sort](types.md#sort)、[SortLegend](types.md#sortlegend)、[Theme](types.md#theme)、[Tooltip](types.md#tooltip)、[XBandAxis](types.md#xbandaxis)、[YLinearAxis](types.md#ylinearaxis) + +## RacePie + +源码：[packages/vseed/src/types/chartType/racePie/racePie.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/chartType/racePie/racePie.ts) + +包导出：`RacePie` + +```typescript +/** + * @description 动态饼图 (Race Pie Chart) + * 适用于展示数据随时间变化的占比关系，通过扇形面积大小表示各类别占比 + * 适用场景： + * - 展示分类数据的占比分布随时间的变化 + * - 强调数据的整体与部分关系在时间维度上的演变 + * - 观察不同类别在总量中的占比波动 + * @note + * 动态饼图： + * - 角度映射指标值，颜色映射维度值 + * - 支持通过播放器控制时间维度，动态展示占比变化 + * - 扇形面积随数据变化动态调整 + */ +export interface RacePie { + /** + * @description 动态饼图，适用于展示数据随时间变化的占比关系 + * @type {'racePie'} + */ + chartType: 'racePie' + /** + * @description 数据源 + */ + dataset: Dataset + /** + * @description 维度 + */ + dimensions?: RacePieDimension[] + /** + * @description 指标 + */ + measures?: PieMeasure[] + /** + * @description 分页配置 + */ + page?: Page + /** + * @description 播放器配置, 用于指定时间维度, 动态饼图的核心配置 + */ + player?: Player + /** + * @description 背景颜色 + */ + backgroundColor?: BackgroundColor + /** + * @description 颜色配置 + */ + color?: Color + /** + * @description 标签配置 + */ + label?: PieLabel + /** + * @description 图例配置 + */ + legend?: Legend + /** + * @description 提示信息配置 + */ + tooltip?: Tooltip + /** + * @description 框选配置 + */ + brush?: Brush + /** + * @description 主题配置 + */ + theme?: Theme + /** + * @description 语言配置 + */ + locale?: Locale +} +``` + +关联 API：[BackgroundColor](types.md#backgroundcolor)、[Brush](types.md#brush)、[Color](types.md#color)、[Dataset](types.md#dataset)、[Legend](types.md#legend)、[Locale](i18n.md#locale)、[Page](types.md#page)、[PieLabel](types.md#pielabel)、[PieMeasure](types.md#piemeasure)、[Player](types.md#player)、[RacePieDimension](types.md#racepiedimension)、[Theme](types.md#theme)、[Tooltip](types.md#tooltip) + +## RaceScatter + +源码：[packages/vseed/src/types/chartType/raceScatter/raceScatter.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/chartType/raceScatter/raceScatter.ts) + +包导出：`RaceScatter` + +```typescript +/** + * @description 动态散点图 (Race Scatter Chart) + * 适用于展示数据随时间变化的分布情况，通过数据点的位置表示两个指标的数值 + * 适用场景： + * - 分析数据在二维空间中的分布特征并展示其随时间的动态变化 + * - 展示多个变量之间的相关性随时间的演变 + * - 观察数据点在二维空间中的运动轨迹 + * @note + * 动态散点图： + * - X轴和Y轴均为数值轴（连续数据），支持多个指标映射 + * - 支持通过播放器控制时间维度，动态展示数据变化 + * - 通过数据点的位置变化直观展示数据的动态变化 + */ +export interface RaceScatter { + /** + * @description 动态散点图，适用于展示数据随时间变化的分布情况 + * @type {'raceScatter'} + */ + chartType: 'raceScatter' + /** + * @description 数据源，符合TidyData规范的数据集 + */ + dataset: Dataset + /** + * @description 维度，用于区分不同的数据系列和进行图例展示 + */ + dimensions?: RaceScatterDimension[] + /** + * @description 指标，至少需要2个指标分别映射至X轴和Y轴 + */ + measures?: ScatterMeasure[] + /** + * @description 播放器配置，用于指定时间维度，是动态散点图的核心配置 + * 通过播放器控制时间维度的播放进度，实现数据的动态更新 + */ + player?: Player + /** + * @description 排序配置，用于控制维度值的排序方式 + */ + sort?: Sort + /** + * @description 分页配置，用于处理数据量较大的场景 + */ + page?: Page + /** + * @description 背景颜色配置 + */ + backgroundColor?: BackgroundColor + /** + * @description 散点图指标的大小, 用于定义散点图中数据点的大小 或 大小范围 + * - 若大小范围是一个数字, 例如10, 表示数据点的大小范围固定为10 + * - 若大小范围是一个长度为2的数组, 例如[10, 40], 表示数据点的大小范围在10到40之间 + * - 与sizeRange互斥, 优先级低于 size + */ + size?: number | number[] + /** + * @description 散点图指标的大小范围, 用于定义散点图中数据点的大小范围, + * - 若大小范围是一个长度为2的数组, 例如[10, 40], 表示数据点的大小范围在10到40之间 + * - 若大小范围是一个数字, 例如10, 表示数据点的大小范围固定为10 + * - 与sizeRange互斥, 优先级高于 size + */ + sizeRange?: number | number[] + /** + * @description 颜色配置，用于区分不同的维度或指标 + */ + color?: Color + /** + * @description 标签配置，用于在数据点上显示数据标签 + */ + label?: Label + /** + * @description 图例配置 + */ + legend?: Legend + /** + * @description 提示信息配置，用于鼠标悬停时展示详细信息 + */ + tooltip?: Tooltip + /** + * @description 框选配置，用于支持框选交互 + */ + brush?: Brush + /** + * @description X轴配置，为数值轴，展示第一个指标值 + */ + xAxis?: XLinearAxis + /** + * @description Y轴配置，为数值轴，展示第二个指标值 + */ + yAxis?: YLinearAxis + /** + * @description 十字线配置，用于展示数据的精确位置 + */ + crosshairLine?: CrosshairLine + /** + * @description 主题配置 + */ + theme?: Theme + /** + * @description 数据点样式配置，可以为单个样式或数组形式，支持全局样式或条件样式配置 + */ + pointStyle?: PointStyle | PointStyle[] + /** + * @description 标注点配置，用于在特定数据点上添加标记 + */ + annotationPoint?: AnnotationPoint | AnnotationPoint[] + /** + * @description 数值标注线，竖向标注线，标记特定的X轴数值 + */ + annotationVerticalLine?: AnnotationVerticalLine | AnnotationVerticalLine[] + /** + * @description 数值标注线，横向标注线，标记特定的Y轴数值 + */ + annotationHorizontalLine?: AnnotationHorizontalLine | AnnotationHorizontalLine[] + /** + * @description 标注区域配置，用于突出显示特定的数据范围 + */ + annotationArea?: AnnotationArea | AnnotationArea[] + /** + * @description 语言配置 + */ + locale?: Locale +} +``` + +关联 API：[AnnotationArea](types.md#annotationarea)、[AnnotationHorizontalLine](types.md#annotationhorizontalline)、[AnnotationPoint](types.md#annotationpoint)、[AnnotationVerticalLine](types.md#annotationverticalline)、[BackgroundColor](types.md#backgroundcolor)、[Brush](types.md#brush)、[Color](types.md#color)、[CrosshairLine](types.md#crosshairline)、[Dataset](types.md#dataset)、[Label](types.md#label)、[Legend](types.md#legend)、[Locale](i18n.md#locale)、[Page](types.md#page)、[Player](types.md#player)、[PointStyle](types.md#pointstyle)、[RaceScatterDimension](types.md#racescatterdimension)、[ScatterMeasure](types.md#scattermeasure)、[Sort](types.md#sort)、[Theme](types.md#theme)、[Tooltip](types.md#tooltip)、[XLinearAxis](types.md#xlinearaxis)、[YLinearAxis](types.md#ylinearaxis) + +## Radar + +源码：[packages/vseed/src/types/chartType/radar/radar.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/chartType/radar/radar.ts) + +包导出：`Radar` + +```typescript +/** + * @description 雷达图，适用于多维度数据的对比分析，通过多轴坐标系展示各维度的数值分布 + * 适用场景: + * - 多维度数据的综合表现对比 + * - 多个对象在多个指标上的性能评估 + * - 分类数据的多维度特征展示 + * @encoding + * 雷达图支持以下视觉通道: + * `angle` : 角度通道, 支持`多个维度`, 按维度值映射至角度轴 + * `radius` : 半径通道, 支持`多个指标`, 按指标值映射至半径轴 + * `color` : 颜色通道, 支持`多个维度`或 `一个指标`, 维度颜色用于区分不同的数据系列, 指标颜色用于线性映射指标值到图形颜色 + * `tooltip`: 提示通道, 支持`多个维度`与 `多个指标`, 会在鼠标悬停在数据点上时展示 + * `label` : 标签通道, 支持`多个维度`与 `多个指标`, 会在数据点上展示数据标签 + * @warning + * 数据要求: + * - 至少1个数值字段（度量） + * - 第一个维度作为雷达图的各个维度轴，其他维度作为不同的系列进行对比 + * - 支持多个指标分别作为不同的系列展示 + * 默认开启的功能: + * - 默认开启图例、雷达坐标系、数据标签、提示信息、数值缩放 + * @recommend + * - 推荐字段配置: `1`个指标, `1`个维度 + * - 支持数据重塑: 至少`1`个指标, `0`个维度 + */ +export interface Radar { + /** + * 雷达图 + * @description 雷达图，通过多轴坐标系展示多维度数据对比关系 + * @type {'radar'} + * @example 'radar' + */ + chartType: 'radar' + /** + * 数据集 + * @description 符合TidyData规范的且已经聚合的数据集，用于定义图表的数据来源和结构, 用户输入的数据集并不需要进行任何处理, VSeed带有强大的数据重塑功能, 会自行进行数据重塑, 玫瑰图的数据最终会被转换为2个维度, 1个指标. + * @type {Array>} + * @example [{month:'1月', value:100}, {month:'2月', value:150}, {month:'3月', value:120}] + */ + dataset: Dataset + /** + * 维度 + * @description 雷达图的第一个维度被映射到角度轴, 其余维度会与指标名称(存在多个指标时)合并, 作为图例项展示. + * @example [{id: 'category', alias: '类别'}] + */ + dimensions?: RadarDimension[] + /** + * 指标 + * @description 雷达图的指标会自动合并为一个指标, 映射到半径轴, 存在多个指标时, 指标名称会与其余维度合并, 作为图例项展示. + * @example [{id: 'value', alias: '数值'}] + */ + measures?: RadarMeasure[] + /** + * @description 分页配置, 用于指定分页的字段名, 必须是维度 + */ + page?: Page + /** + * 图表的背景颜色 + * @default transparent 默认为透明背景 + * @description 背景颜色可以是颜色字符串, 例如'red', 'blue', 也可以是hex, rgb或rgba'#ff0000', 'rgba(255,0,0,0.5)' + */ + backgroundColor?: BackgroundColor + /** + * 颜色 + * @description 颜色配置, 用于定义图表的颜色方案, 包括颜色列表, 颜色映射, 颜色渐变等. + */ + color?: Color + /** + * 标签 + * @description 标签配置, 用于定义图表的数据标签, 包括数据标签的位置, 格式, 样式等. + */ + label?: Label + /** + * 图例 + * @description 图例配置, 用于定义图表的图例, 包括图例的位置, 格式, 样式等. + */ + legend?: Legend + /** + * 提示信息 + * @description 提示信息配置, 用于定义图表的提示信息, 包括提示信息的位置, 格式, 样式等. + */ + tooltip?: Tooltip + /** + * 框选 + * @description 框选配置，用于开启/关闭 brush 框选能力 + */ + brush?: Brush + /** + * 动画配置 + * @description 图表动画配置，按图表类型约束可选效果 + */ + animation?: RadarAnimation + /** + * 图表的主题, 主题是优先级较低的功能配置, 包含所有图表类型共用的通用配置, 与单类图表类型共用的图表配置 + * @default light 默认为亮色主题 + * @description 内置light与dark两种主题, 用户可以通过Builder自定义主题 + * @example 'dark' + * @example 'light' + * @example 'customThemeName' + */ + theme?: Theme + /** + * @description 点图元样式配置, 用于定义图表的点图元样式, 包括点图元的颜色, 边框等. + * 支持全局样式或条件样式配置 + * 数据筛选器 + * 若配置selector, 提供数值 selector, 局部数据 selector, 条件维度 selector, 条件指标 selector 共四类数据匹配能力 + * 若未配置selector, 则样式全局生效. + */ + pointStyle?: PointStyle | PointStyle[] + /** + * @description 线图元样式配置, 用于定义图表的线图元样式, 包括线图元的颜色, 透明度, 曲线等. + * 支持全局样式或条件样式配置 + * 数据筛选器 + * 若配置selector, 提供数值 selector, 局部数据 selector, 条件维度 selector, 条件指标 selector 共四类数据匹配能力 + * 若未配置selector, 则样式全局生效. + */ + lineStyle?: LineStyle | LineStyle[] + /** + * @description 面积图元样式配置, 用于定义图表的面积图元样式, 包括面积图元的颜色, 透明度, 边框等. + * 支持全局样式或条件样式配置 + * 数据筛选器 + * 若配置selector, 提供数值 selector, 局部数据 selector, 条件维度 selector, 条件指标 selector 共四类数据匹配能力 + * 若未配置selector, 则样式全局生效. + */ + areaStyle?: AreaStyle | AreaStyle[] + /** + * 语言 + * @description 图表语言配置, 支持'zh-CN'与'en-US'两种语言, 另外可以调用 intl.setLocale('zh-CN') 方法设置语言 + * @default 'zh-CN' + */ + locale?: Locale +} +``` + +关联 API：[AreaStyle](types.md#areastyle)、[BackgroundColor](types.md#backgroundcolor)、[Brush](types.md#brush)、[Color](types.md#color)、[Dataset](types.md#dataset)、[Label](types.md#label)、[Legend](types.md#legend)、[LineStyle](types.md#linestyle)、[Locale](i18n.md#locale)、[Page](types.md#page)、[PointStyle](types.md#pointstyle)、[RadarAnimation](types.md#radaranimation)、[RadarDimension](types.md#radardimension)、[RadarMeasure](types.md#radarmeasure)、[Theme](types.md#theme)、[Tooltip](types.md#tooltip) + +## Rose + +源码：[packages/vseed/src/types/chartType/rose/rose.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/chartType/rose/rose.ts) + +包导出：`Rose` + +```typescript +/** + * @description 堆叠玫瑰图，适用于多维度数据对比场景，通过极坐标系下的扇形弧度和半径展示数据大小 + * 适用场景: + * - 多维度数据的分布对比 + * - 周期性数据的强弱比较 + * - 分类数据的数值与占比同时展示 + * @encoding + * 堆叠玫瑰图支持以下视觉通道: + * `angle` : 角度通道, 支持`多个维度`, 按维度值映射至角度轴 + * `radius` : 半径通道, 支持`多个指标`, 按指标值映射至半径轴 + * `detail` : 细分通道, 支持`多个维度`, 在同一个颜色系列下展示更细粒度的数据时使用 + * `color` : 颜色通道, 支持`多个维度`或 `一个指标`, 维度颜色用于区分不同的数据系列, 指标颜色用于线性映射指标值到图形颜色 + * `tooltip`: 提示通道, 支持`多个维度`与 `多个指标`, 会在鼠标悬停在数据点上时展示 + * `label` : 标签通道, 支持`多个维度`与 `多个指标`, 会在数据点上展示数据标签 + * @warning + * 数据要求: + * - 至少1个数值字段（度量） + * - 第一个维度会放至角度轴, 其余维度会与指标名称(存在多个指标时)合并, 作为图例项展示 + * - 所有指标会自动合并为一个指标 + * 默认开启的功能: + * - 默认开启图例、极坐标系、数据标签、提示信息、数值缩放 + * @recommend + * - 推荐字段配置: `1`个指标, `1`个维度 + * - 支持数据重塑: 至少`1`个指标, `0`个维度 + */ +export interface Rose { + /** + * 堆叠玫瑰图 + * @description 堆叠玫瑰图，通过极坐标系展示多维度数据对比关系 + * @type {'rose'} + * @example 'rose' + */ + chartType: 'rose' + /** + * 数据集 + * @description 符合TidyData规范的且已经聚合的数据集，用于定义图表的数据来源和结构, 用户输入的数据集并不需要进行任何处理, VSeed带有强大的数据重塑功能, 会自行进行数据重塑, 玫瑰图的数据最终会被转换为2个维度, 1个指标. + * @type {Array>} + * @example [{month:'1月', value:100}, {month:'2月', value:150}, {month:'3月', value:120}] + */ + dataset: Dataset + /** + * 维度 + * @description 玫瑰图的第一个维度被映射到角度轴, 其余维度会与指标名称(存在多个指标时)合并, 作为图例项展示. + * @example [{id: 'category', alias: '类别'}] + */ + dimensions?: RoseDimension[] + /** + * 指标 + * @description 玫瑰图的指标会自动合并为一个指标, 映射到半径轴, 存在多个指标时, 指标名称会与其余维度合并, 作为图例项展示. + * @example [{id: 'value', alias: '数值'}] + */ + measures?: RoseMeasure[] + /** + * @description 分页配置, 用于指定分页的字段名, 必须是维度 + */ + page?: Page + /** + * 图表的背景颜色 + * @default transparent 默认为透明背景 + * @description 背景颜色可以是颜色字符串, 例如'red', 'blue', 也可以是hex, rgb或rgba'#ff0000', 'rgba(255,0,0,0.5)' + */ + backgroundColor?: BackgroundColor + /** + * 颜色 + * @description 颜色配置, 用于定义图表的颜色方案, 包括颜色列表, 颜色映射, 颜色渐变等. + */ + color?: Color + /** + * 标签 + * @description 标签配置, 用于定义图表的数据标签, 包括数据标签的位置, 格式, 样式等. + */ + label?: PieLabel + /** + * 图例 + * @description 图例配置, 用于定义图表的图例, 包括图例的位置, 格式, 样式等. + */ + legend?: Legend + /** + * 提示信息 + * @description 提示信息配置, 用于定义图表的提示信息, 包括提示信息的位置, 格式, 样式等. + */ + tooltip?: Tooltip + /** + * 框选 + * @description 框选配置，用于开启/关闭 brush 框选能力 + */ + brush?: Brush + /** + * 动画配置 + * @description 图表动画配置，按图表类型约束可选效果 + */ + animation?: PieLikeAnimation + /** + * 图表的主题, 主题是优先级较低的功能配置, 包含所有图表类型共用的通用配置, 与单类图表类型共用的图表配置 + * @default light 默认为亮色主题 + * @description 内置light与dark两种主题, 用户可以通过Builder自定义主题 + * @example 'dark' + * @example 'light' + * @example 'customThemeName' + */ + theme?: Theme + /** + * 语言 + * @description 图表语言配置, 支持'zh-CN'与'en-US'两种语言, 另外可以调用 intl.setLocale('zh-CN') 方法设置语言 + * @default 'zh-CN' + */ + locale?: Locale +} +``` + +关联 API：[BackgroundColor](types.md#backgroundcolor)、[Brush](types.md#brush)、[Color](types.md#color)、[Dataset](types.md#dataset)、[Legend](types.md#legend)、[Locale](i18n.md#locale)、[Page](types.md#page)、[PieLabel](types.md#pielabel)、[PieLikeAnimation](types.md#pielikeanimation)、[RoseDimension](types.md#rosedimension)、[RoseMeasure](types.md#rosemeasure)、[Theme](types.md#theme)、[Tooltip](types.md#tooltip) + +## RoseParallel + +源码：[packages/vseed/src/types/chartType/roseParallel/roseParallel.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/chartType/roseParallel/roseParallel.ts) + +包导出：`RoseParallel` + +```typescript +/** + * @description 分组玫瑰图，适用于多维度数据对比场景，通过极坐标系下的扇形弧度和半径展示数据大小 + * 适用场景: + * - 多维度数据的分布对比 + * - 周期性数据的强弱比较 + * - 分类数据的数值与占比同时展示 + * @encoding + * 分组玫瑰图支持以下视觉通道: + * `angle` : 角度通道, 支持`多个维度`, 按维度值映射至角度轴 + * `radius` : 半径通道, 支持`多个指标`, 按指标值映射至半径轴 + * `detail` : 细分通道, 支持`多个维度`, 在同一个颜色系列下展示更细粒度的数据时使用 + * `color` : 颜色通道, 支持`多个维度`或 `一个指标`, 维度颜色用于区分不同的数据系列, 指标颜色用于线性映射指标值到图形颜色 + * `tooltip`: 提示通道, 支持`多个维度`与 `多个指标`, 会在鼠标悬停在数据点上时展示 + * `label` : 标签通道, 支持`多个维度`与 `多个指标`, 会在数据点上展示数据标签 + * @warning + * 数据要求: + * - 至少1个数值字段（度量） + * - 第一个维度会放至角度轴, 其余维度会与指标名称(存在多个指标时)合并, 作为图例项展示 + * - 所有指标会自动合并为一个指标 + * 默认开启的功能: + * - 默认开启图例、极坐标系、数据标签、提示信息、数值缩放 + * @recommend + * - 推荐字段配置: `1`个指标, `1`个维度 + * - 支持数据重塑: 至少`1`个指标, `0`个维度 + */ +export interface RoseParallel { + /** + * 分组玫瑰图 + * @description 分组玫瑰图，通过极坐标系展示多维度数据对比关系 + * @type {'roseParallel'} + * @example 'roseParallel' + */ + chartType: 'roseParallel' + /** + * 数据集 + * @description 符合TidyData规范的且已经聚合的数据集，用于定义图表的数据来源和结构, 用户输入的数据集并不需要进行任何处理, VSeed带有强大的数据重塑功能, 会自行进行数据重塑, 玫瑰图的数据最终会被转换为2个维度, 1个指标. + * @type {Array>} + * @example [{month:'1月', value:100}, {month:'2月', value:150}, {month:'3月', value:120}] + */ + dataset: Dataset + /** + * 维度 + * @description 玫瑰图的第一个维度被映射到角度轴, 其余维度会与指标名称(存在多个指标时)合并, 作为图例项展示. + * @example [{id: 'category', alias: '类别'}] + */ + dimensions?: RoseParallelDimension[] + /** + * 指标 + * @description 玫瑰图的指标会自动合并为一个指标, 映射到半径轴, 存在多个指标时, 指标名称会与其余维度合并, 作为图例项展示. + * @example [{id: 'value', alias: '数值'}] + */ + measures?: RoseParallelMeasure[] + /** + * @description 分页配置, 用于指定分页的字段名, 必须是维度 + */ + page?: Page + /** + * 图表的背景颜色 + * @default transparent 默认为透明背景 + * @description 背景颜色可以是颜色字符串, 例如'red', 'blue', 也可以是hex, rgb或rgba'#ff0000', 'rgba(255,0,0,0.5)' + */ + backgroundColor?: BackgroundColor + /** + * 颜色 + * @description 颜色配置, 用于定义图表的颜色方案, 包括颜色列表, 颜色映射, 颜色渐变等. + */ + color?: Color + /** + * 标签 + * @description 标签配置, 用于定义图表的数据标签, 包括数据标签的位置, 格式, 样式等. + */ + label?: PieLabel + /** + * 图例 + * @description 图例配置, 用于定义图表的图例, 包括图例的位置, 格式, 样式等. + */ + legend?: Legend + /** + * 提示信息 + * @description 提示信息配置, 用于定义图表的提示信息, 包括提示信息的位置, 格式, 样式等. + */ + tooltip?: Tooltip + /** + * 框选 + * @description 框选配置，用于开启/关闭 brush 框选能力 + */ + brush?: Brush + /** + * 动画配置 + * @description 图表动画配置，按图表类型约束可选效果 + */ + animation?: PieLikeAnimation + /** + * 图表的主题, 主题是优先级较低的功能配置, 包含所有图表类型共用的通用配置, 与单类图表类型共用的图表配置 + * @default light 默认为亮色主题 + * @description 内置light与dark两种主题, 用户可以通过Builder自定义主题 + * @example 'dark' + * @example 'light' + * @example 'customThemeName' + */ + theme?: Theme + /** + * 语言 + * @description 图表语言配置, 支持'zh-CN'与'en-US'两种语言, 另外可以调用 intl.setLocale('zh-CN') 方法设置语言 + * @default 'zh-CN' + */ + locale?: Locale +} +``` + +关联 API：[BackgroundColor](types.md#backgroundcolor)、[Brush](types.md#brush)、[Color](types.md#color)、[Dataset](types.md#dataset)、[Legend](types.md#legend)、[Locale](i18n.md#locale)、[Page](types.md#page)、[PieLabel](types.md#pielabel)、[PieLikeAnimation](types.md#pielikeanimation)、[RoseParallelDimension](types.md#roseparalleldimension)、[RoseParallelMeasure](types.md#roseparallelmeasure)、[Theme](types.md#theme)、[Tooltip](types.md#tooltip) + +## Sankey + +源码：[packages/vseed/src/types/chartType/sankey/sankey.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/chartType/sankey/sankey.ts) + +包导出：`Sankey` + +```typescript +/** + * @description 桑基图，用于展示 source 到 target 的流向关系，通过连线宽度表示流量大小。 + * 适用场景: + * - 展示普通 node-link 结构的流向关系 + * - 展示多个 source 维度、多 target 维度拼接后的路径流转 + * @encoding + * 桑基图支持以下视觉通道: + * `source`: 起点通道, 支持`多个维度` + * `target`: 终点通道, 支持`多个维度` + * `color`: 颜色通道, 支持`多个维度` + * `size`: 大小通道, 支持`一个指标` + * `label`: 标签通道, 支持`多个维度`与 `多个指标` + * `tooltip`: 提示通道, 支持`多个维度`与 `多个指标` + * @warning + * 数据要求: + * - 至少1个 source 维度或默认维度可映射为 source + * - 至少1个 target 维度 + * - 至少1个数值字段（度量）用于映射流量大小 + * - advanced pipeline 需要将 tidyData 转换为普通 sankey 可消费的 source / target / value 结构 + */ +export interface Sankey { + /** + * 桑基图 + * @description 桑基图，展示普通 source-target 流向关系和流量大小 + * @type {'sankey'} + * @example 'sankey' + */ + chartType: 'sankey' + /** + * 数据集 + * @description 符合 TidyData 规范且已经聚合的数据集，用于定义图表的数据来源和结构 + * @type {Array>} + * @example [{fromRegion: '华北', toRegion: '华东', value: 30}] + */ + dataset: Dataset + /** + * 维度 + * @description 维度配置，用于定义 source / target 节点结构，支持 source / target / color / detail / label / tooltip / row / column 通道 + * @example [{id: 'fromRegion', alias: '来源区域'}, {id: 'toRegion', alias: '去向区域', encoding: 'target'}] + */ + dimensions?: SankeyDimension[] + /** + * 指标 + * @description 指标配置，用于定义流量大小，支持 size / detail / label / tooltip 通道 + * @example [{id: 'sales', alias: '销售额'}] + */ + measures?: SankeyMeasure[] + /** + * 分页配置 + * @description 用于指定分页的字段名, 必须是维度 + */ + page?: Page + /** + * 图表的背景颜色 + * @default transparent 默认为透明背景 + */ + backgroundColor?: BackgroundColor + /** + * 颜色 + * @description 颜色配置, 用于定义图表的颜色方案 + */ + color?: Color + /** + * 标签 + * @description 标签配置, 用于定义图表的数据标签 + */ + label?: Label + /** + * 图例 + * @description 图例配置, 用于定义图形桑基图颜色图例的显示、位置与样式 + */ + legend?: Legend + /** + * 提示信息 + * @description 提示信息配置, 用于定义图表的提示信息 + */ + tooltip?: Tooltip + /** + * 图表的主题 + * @default light 默认为亮色主题 + */ + theme?: Theme + /** + * 语言 + * @description 图表语言配置, 支持 'zh-CN' 与 'en-US' + * @default 'zh-CN' + */ + locale?: Locale +} +``` + +关联 API：[BackgroundColor](types.md#backgroundcolor)、[Color](types.md#color)、[Dataset](types.md#dataset)、[Label](types.md#label)、[Legend](types.md#legend)、[Locale](i18n.md#locale)、[Page](types.md#page)、[SankeyDimension](types.md#sankeydimension)、[SankeyMeasure](types.md#sankeymeasure)、[Theme](types.md#theme)、[Tooltip](types.md#tooltip) + +## Scatter + +源码：[packages/vseed/src/types/chartType/scatter/scatter.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/chartType/scatter/scatter.ts) + +包导出：`Scatter` + +```typescript +/** + * @description 散点图，适用于展示数据的分布情况，通过点的位置表示数据的数值 + * 适用场景: + * - 分析数据的分布特征, 如数据的中心趋势, 分布范围, 异常值等 + * @encoding + * 散点图支持以下视觉通道: + * `xAxis` : x轴通道, 支持`多个指标`, 按指标值映射至x轴 + * `yAxis` : y轴通道, 支持`多个指标`, 按指标值映射至y轴 + * `color` : 颜色通道, 支持`多个维度`或 `一个指标`, 维度颜色用于区分不同的数据系列, 指标颜色用于线性映射指标值到图形颜色 + * `tooltip`: 提示通道, 支持`多个维度`与 `多个指标`, 会在鼠标悬停在数据点上时展示 + * `label` : 标签通道, 支持`多个维度`与 `多个指标`, 会在数据点上展示数据标签 + * @warning + * 数据要求: + * - 至少2个数值字段（度量） + * - 第一个指标字段会放至X轴, 其余指标会进行合并, 映射至Y轴 + * - 指标名称和维度名称会合并, 作为图例项展示 + * 默认开启的功能: + * - 默认开启图例、坐标轴、数据点标记、提示信息、趋势线 + * @recommend + * - 推荐字段配置: `2`个指标, `1`个维度 + * - 支持数据重塑: 至少`1`个指标, `0`个维度 + */ +export interface Scatter { + /** + * 散点图 + * @description 散点图，适用于展示数据的分布情况，通过点的位置表示数据的数值 + * @type {'scatter'} + * @example 'scatter' + */ + chartType: 'scatter' + /** + * 数据集 + * @description 符合TidyData规范的且已经聚合的数据集，用于定义图表的数据来源和结构, 用户输入的数据集并不需要进行任何处理, VSeed带有强大的数据重塑功能, 会自行进行数据重塑, 折线图的数据最终会被转换为2个维度, 1个指标. + * @type {Array>} + * @example [{month:'1月', value:100}, {month:'2月', value:150}, {month:'3月', value:120}] + */ + dataset: Dataset + /** + * 维度 + * @description 散点图的第一个维度被映射到X轴, 其余维度会与指标名称(存在多个指标时)合并, 作为图例项展示 + * @example [{id: "month", alias: "月份"}] + */ + dimensions?: ScatterDimension[] + /** + * @description 散点图指标 + * @example + * [ + * { + * id: 'profit', alias: '利润', encoding: 'xAxis' + * }, + * { + * id: 'sales', alias: '销售额', encoding: 'yAxis' + * } + * ] + */ + measures?: ScatterMeasure[] + /** + * @description 分页配置, 用于指定分页的字段名, 必须是维度 + */ + page?: Page + /** + * @description 散点图指标的大小, 用于定义散点图中数据点的大小 或 大小范围 + * - 若大小范围是一个数字, 例如10, 表示数据点的大小范围固定为10 + * - 若大小范围是一个长度为2的数组, 例如[10, 40], 表示数据点的大小范围在10到40之间 + * - 与sizeRange互斥, 优先级低于 size + */ + size?: number | number[] + /** + * @description 散点图指标的大小范围, 用于定义散点图中数据点的大小范围, + * - 若大小范围是一个长度为2的数组, 例如[10, 40], 表示数据点的大小范围在10到40之间 + * - 若大小范围是一个数字, 例如10, 表示数据点的大小范围固定为10 + * - 与sizeRange互斥, 优先级高于 size + */ + sizeRange?: number | number[] + /** + * 图表的背景颜色 + * @default transparent 默认为透明背景 + * @description 背景颜色可以是颜色字符串, 例如'red', 'blue', 也可以是hex, rgb或rgba'#ff0000', 'rgba(255,0,0,0.5)' + */ + backgroundColor?: BackgroundColor + /** + * 颜色 + * @description 颜色配置, 用于定义图表的颜色方案, 包括颜色列表, 颜色映射, 颜色渐变等. + */ + color?: Color + /** + * 标签 + * @description 标签配置, 用于定义图表的数据标签, 包括数据标签的位置, 格式, 样式等. + */ + label?: Label + /** + * 图例 + * @description 图例配置, 用于定义图表的图例, 包括图例的位置, 格式, 样式等. + */ + legend?: Legend + /** + * 提示信息 + * @description 提示信息配置, 用于定义图表的提示信息, 包括提示信息的位置, 格式, 样式等. + */ + tooltip?: Tooltip + /** + * 框选 + * @description 框选配置，用于开启/关闭 brush 框选能力 + */ + brush?: Brush + /** + * 动画配置 + * @description 图表动画配置，按图表类型约束可选效果 + */ + animation?: ScatterAnimation + /** + * x轴 + * @description 数值轴, x轴配置, 用于定义图表的x轴, 包括x轴的位置, 格式, 样式等. + */ + xAxis?: XLinearAxis + /** + * y轴 + * @description 数值轴, y轴配置, 用于定义图表的y轴, 包括y轴的位置, 格式, 样式等. + */ + yAxis?: YLinearAxis + /** + * 垂直提示线 + * @description 鼠标移动到图表上时, 显示的垂直提示线 + */ + crosshairLine?: CrosshairLine + /** + * 图表的主题, 主题是优先级较低的功能配置, 包含所有图表类型共用的通用配置, 与单类图表类型共用的图表配置 + * @default light 默认为亮色主题 + * @description 内置light与dark两种主题, 用户可以通过Builder自定义主题 + * @example 'dark' + * @example 'light' + * @example 'customThemeName' + */ + theme?: Theme + /** + * 点图元样式 + * @description 点图元样式配置, 用于定义图表的点图元样式, 包括点图元的颜色, 边框等. + * 支持全局样式或条件样式配置 + * 数据筛选器 + * 若配置selector, 提供数值 selector, 局部数据 selector, 条件维度 selector, 条件指标 selector 共四类数据匹配能力 + * 若未配置selector, 则样式全局生效. + */ + pointStyle?: PointStyle | PointStyle[] + /** + * 标注点 + * @description 标注点配置, 根据选择的数据, 定义图表的标注点, 包括标注点的位置, 格式, 样式等. + */ + annotationPoint?: AnnotationPoint | AnnotationPoint[] + /** + * 标注垂直线 + * @description 数值标注线(包括均值线、最大值线、最小值线等)，竖直方向展示，能够设置标注线的位置, 样式等，如需绘制x轴度量均值线等数值对应的标注线请使用该配置 + */ + annotationVerticalLine?: AnnotationVerticalLine | AnnotationVerticalLine[] + /** + * 标注水平线 + * @description 数值标注线(包括均值线、最大值线、最小值线等)，竖直方向展示，能够设置标注线的位置, 样式等，如需绘制y轴度量均值线等数值对应的标注线请使用该配置 + */ + annotationHorizontalLine?: AnnotationHorizontalLine | AnnotationHorizontalLine[] + /** + * 标注区域 + * @description 标注区域配置, 根据选择的数据, 定义图表的标注区域, 包括标注区域的位置, 样式等. + */ + annotationArea?: AnnotationArea | AnnotationArea[] + /** + * 线性回归线 + * @description 线性回归线配置, 包括线性回归线的样式等. + */ + linearRegressionLine?: LinearRegressionLine | LinearRegressionLine[] + /** + * 局部加权回归线配置项 + * @description 局部加权回归线配置项, 包括局部加权回归线的样式等. + */ + lowessRegressionLine?: LowessRegressionLine | LowessRegressionLine[] + /** + * 多项式回归线 + * @description 多项式回归线配置, 包括多项式的阶数、回归线的样式等. + */ + polynomialRegressionLine?: PolynomialRegressionLine | PolynomialRegressionLine[] + /** + * 逻辑回归线 + * @description 逻辑回归线配置, 包括逻辑回归线的样式等. + */ + logisticRegressionLine?: LogisticRegressionLine | LogisticRegressionLine[] + /** + * @description 当图表开启透视功能或者指标组合的是否，是否开启维度联动功能 + * 当hover 到某个维度值时，联动高亮其他图表中相同维度值的数据 + */ + dimensionLinkage?: DimensionLinkage + /** + * 语言 + * @description 图表语言配置, 支持'zh-CN'与'en-US'两种语言, 另外可以调用 intl.setLocale('zh-CN') 方法设置语言 + * @default 'zh-CN' + */ + locale?: Locale +} +``` + +关联 API：[AnnotationArea](types.md#annotationarea)、[AnnotationHorizontalLine](types.md#annotationhorizontalline)、[AnnotationPoint](types.md#annotationpoint)、[AnnotationVerticalLine](types.md#annotationverticalline)、[BackgroundColor](types.md#backgroundcolor)、[Brush](types.md#brush)、[Color](types.md#color)、[CrosshairLine](types.md#crosshairline)、[Dataset](types.md#dataset)、[DimensionLinkage](types.md#dimensionlinkage)、[Label](types.md#label)、[Legend](types.md#legend)、[LinearRegressionLine](types.md#linearregressionline)、[Locale](i18n.md#locale)、[LogisticRegressionLine](types.md#logisticregressionline)、[LowessRegressionLine](types.md#lowessregressionline)、[Page](types.md#page)、[PointStyle](types.md#pointstyle)、[PolynomialRegressionLine](types.md#polynomialregressionline)、[ScatterAnimation](types.md#scatteranimation)、[ScatterDimension](types.md#scatterdimension)、[ScatterMeasure](types.md#scattermeasure)、[Theme](types.md#theme)、[Tooltip](types.md#tooltip)、[XLinearAxis](types.md#xlinearaxis)、[YLinearAxis](types.md#ylinearaxis) + +## Sunburst + +源码：[packages/vseed/src/types/chartType/sunburst/sunburst.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/chartType/sunburst/sunburst.ts) + +包导出：`Sunburst` + +```typescript +/** + * @description 旭日图，用于展示层级数据，通过扇形面积大小表示数值大小 + * 适用场景: + * - 展示多层级数据的占比分布 + * - 强调层级关系和占比 + * @encoding + * 旭日图支持以下视觉通道: + * `color`: 颜色通道, 支持`多个维度`或 `一个指标` + * `label`: 标签通道, 支持`多个维度`与 `多个指标` + * `tooltip`: 提示通道, 支持`多个维度`与 `多个指标` + * @warning + * 数据要求: + * - 至少1个数值字段（度量）用于映射面积 + * - 至少1个维度字段用于层级划分 + */ +export interface Sunburst { + /** + * 旭日图 + * @description 旭日图，展示层级数据的占比关系 + * @type {'sunburst'} + * @example 'sunburst' + */ + chartType: 'sunburst' + /** + * 数据集 + * @description 符合TidyData规范的且已经聚合的数据集，用于定义图表的数据来源和结构 + * @type {Array>} + * @example [{category:'A', value:30}, {category:'B', value:70}] + */ + dataset: Dataset + /** + * 维度 + * @description 维度配置，用于定义数据的层级结构 + * @example [{id: 'category', alias: '类别'}] + */ + dimensions?: HierarchyDimension[] + /** + * 指标 + * @description 指标配置，用于定义扇形的大小（面积） + * @example [{id: 'value', alias: '数值'}] + */ + measures?: HierarchyMeasure[] + /** + * 分页配置 + * @description 用于指定分页的字段名, 必须是维度 + */ + page?: Page + /** + * 图表的背景颜色 + * @default transparent 默认为透明背景 + * @description 背景颜色可以是颜色字符串, 例如'red', 'blue', 也可以是hex, rgb或rgba'#ff0000', 'rgba(255,0,0,0.5)' + */ + backgroundColor?: BackgroundColor + /** + * 颜色 + * @description 颜色配置, 用于定义图表的颜色方案, 包括颜色列表, 颜色映射, 颜色渐变等. + */ + color?: Color + /** + * 标签 + * @description 标签配置, 用于定义图表的数据标签, 包括数据标签的位置, 格式, 样式等. + */ + label?: Label + /** + * 提示信息 + * @description 提示信息配置, 用于定义图表的提示信息, 包括提示信息的位置, 格式, 样式等. + */ + tooltip?: Tooltip + /** + * 图表的主题 + * @default light 默认为亮色主题 + * @description 内置light与dark两种主题, 用户可以通过Builder自定义主题 + * @example 'dark' + * @example 'light' + */ + theme?: Theme + /** + * 语言 + * @description 图表语言配置, 支持'zh-CN'与'en-US'两种语言 + * @default 'zh-CN' + */ + locale?: Locale +} +``` + +关联 API：[BackgroundColor](types.md#backgroundcolor)、[Color](types.md#color)、[Dataset](types.md#dataset)、[HierarchyDimension](types.md#hierarchydimension)、[HierarchyMeasure](types.md#hierarchymeasure)、[Label](types.md#label)、[Locale](i18n.md#locale)、[Page](types.md#page)、[Theme](types.md#theme)、[Tooltip](types.md#tooltip) + +## Table + +源码：[packages/vseed/src/types/chartType/table/table.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/chartType/table/table.ts) + +包导出：`Table` + +```typescript +/** + * @description 表格，适用于详细数据展示场景，行列分明，便于查看具体数值 + * 适用场景: + * - 需要展示详细数据明细 + * - 数据项需要精确比对 + * - 展示多维度数据属性 + * @encoding + * 仅支持配置维度树与指标树, 默认encoding到column + * @warning + * 数据要求: + * - 至少1个维度字段 + * - 至少1个度量字段 + * - 维度字段会作为表格的列标题 + * 默认开启的功能: + * - 默认开启排序、筛选、分页功能 + * @recommend + * - 推荐字段配置: `任意`个指标, `任意`个维度 + * - 支持数据重塑: 至少`任意`个指标, `任意`个维度 + */ +export interface Table { + /** + * @description 标准表格组件，用于展示详细数据 + * @type {'table'} + * @example 'table' + */ + chartType: 'table' + /** + * @description 符合TidyData规范的且已经聚合的数据集，用于定义图表的数据来源和结构, 用户输入的数据集并不需要进行任何处理, 一个字段对应一列, 一个记录对应一行 + * @type {Array>} + * @example [{id: 1, name: "A", value: 100}, {id: 2, name: "B", value: 200}] + */ + dataset: Dataset + /** + * @description 表格的每个维度会对应一列 + * @type {Dimensions} + * @example [{id: "name", alias: "名称"}] + */ + dimensions?: DimensionTree + /** + * @description 表格的每个指标会对应一行, 并且天生支持指标组合. + * @type {MeasureTree} + * @example [{id: "value", alias: "数值"}] + */ + measures?: MeasureTree + /** + * @description 分页配置, 用于指定分页的字段名, 必须是维度 + */ + page?: Page + /** + * @default transparent 默认为透明背景 + * @description 背景颜色可以是颜色字符串, 例如'red', 'blue', 也可以是hex, rgb或rgba'#ff0000', 'rgba(255,0,0,0.5)' + */ + backgroundColor?: BackgroundColor + /** + * @description 表格的边框颜色 + */ + borderColor?: string + /** + * @description 表格体的字体大小 + */ + bodyFontSize?: number + /** + * @description 表格体的字体颜色 + */ + bodyFontColor?: string + /** + * @description 表格体的背景颜色 + */ + bodyBackgroundColor?: string + /** + * @description 列表头的字体大小 + */ + headerFontSize?: number + /** + * @description 列表头的字体颜色 + */ + headerFontColor?: string + /** + * @description 列表头的背景颜色 + */ + headerBackgroundColor?: string + /** + * @description 鼠标悬浮在列表头的单元格时的背景颜色, 用于突出显示鼠标所在的单元格 + */ + hoverHeaderBackgroundColor?: string + /** + * @description 鼠标悬浮在列表头的时, 整行的单元格的背景颜色, 用于突出显示鼠标所在的行 + */ + hoverHeaderInlineBackgroundColor?: string + /** + * @description 选中的单元格的边框颜色, 用于突出显示选中的单元格 + */ + selectedBorderColor?: string + /** + * @description 选中的单元格的背景颜色, 用于突出显示选中的单元格 + */ + selectedBackgroundColor?: string + /** + * @description 设置表格正文部分单元格的特殊样式 + */ + bodyCellStyle?: BodyCellStyle | BodyCellStyle[] + /** + * @description 显示汇总行的类型，仅对度量列生效 + * - 'sum': 显示求和行 + * - 'avg': 显示平均值行 + * - 'max': 显示最大值行 + * - 'min': 显示最小值行 + * - 'count': 显示计数行 + * @example 'sum' + */ + totals?: TotalType + /** + * @default light 默认为亮色主题 + * @description 图表的主题, 主题是优先级较低的功能配置, 包含所有图表类型共用的通用配置, 与单类图表类型共用的图表配置, 内置light与dark两种主题, 用户可以通过Builder自定义主题 + * @example 'dark' + * @example 'light' + * @example 'customThemeName' + */ + theme?: Theme + /** + * @description 图表语言配置, 支持'zh-CN'与'en-US'两种语言, 另外可以调用 intl.setLocale('zh-CN') 方法设置语言 + * @default 'zh-CN' + */ + locale?: Locale +} +``` + +关联 API：[BackgroundColor](types.md#backgroundcolor)、[BodyCellStyle](types.md#bodycellstyle)、[Dataset](types.md#dataset)、[DimensionTree](types.md#dimensiontree)、[Locale](i18n.md#locale)、[MeasureTree](types.md#measuretree)、[Page](types.md#page)、[Theme](types.md#theme)、[TotalType](types.md#totaltype) + +## TreeMap + +源码：[packages/vseed/src/types/chartType/treeMap/treeMap.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/chartType/treeMap/treeMap.ts) + +包导出：`TreeMap` + +```typescript +/** + * @description 矩形树图，用于展示层级数据，通过矩形面积大小表示数值大小 + * 适用场景: + * - 展示层级数据的占比分布 + * - 强调数据的整体与部分关系 + * @encoding + * 矩形树图支持以下视觉通道: + * `color`: 颜色通道, 支持`多个维度`或 `一个指标` + * `label`: 标签通道, 支持`多个维度`与 `多个指标` + * `tooltip`: 提示通道, 支持`多个维度`与 `多个指标` + * @warning + * 数据要求: + * - 至少1个数值字段（度量）用于映射面积 + * - 至少1个维度字段用于层级划分 + */ +export interface TreeMap { + /** + * 矩形树图 + * @description 矩形树图，展示层级数据的占比关系 + * @type {'treeMap'} + * @example 'treeMap' + */ + chartType: 'treeMap' + /** + * 数据集 + * @description 符合TidyData规范的且已经聚合的数据集，用于定义图表的数据来源和结构 + * @type {Array>} + * @example [{category:'A', value:30}, {category:'B', value:70}] + */ + dataset: Dataset + /** + * 维度 + * @description 维度配置，用于定义数据的层级结构 + * @example [{id: 'category', alias: '类别'}] + */ + dimensions?: HierarchyDimension[] + /** + * 指标 + * @description 指标配置，用于定义扇形的大小（面积） + * @example [{id: 'value', alias: '数值'}] + */ + measures?: HierarchyMeasure[] + /** + * 分页配置 + * @description 用于指定分页的字段名, 必须是维度 + */ + page?: Page + /** + * 图表的背景颜色 + * @default transparent 默认为透明背景 + * @description 背景颜色可以是颜色字符串, 例如'red', 'blue', 也可以是hex, rgb或rgba'#ff0000', 'rgba(255,0,0,0.5)' + */ + backgroundColor?: BackgroundColor + /** + * 颜色 + * @description 颜色配置, 用于定义图表的颜色方案, 包括颜色列表, 颜色映射, 颜色渐变等. + */ + color?: Color + /** + * 标签 + * @description 标签配置, 用于定义图表的数据标签, 包括数据标签的位置, 格式, 样式等. + */ + label?: Label + /** + * 提示信息 + * @description 提示信息配置, 用于定义图表的提示信息, 包括提示信息的位置, 格式, 样式等. + */ + tooltip?: Tooltip + /** + * 图表的主题 + * @default light 默认为亮色主题 + * @description 内置light与dark两种主题, 用户可以通过Builder自定义主题 + * @example 'dark' + * @example 'light' + */ + theme?: Theme + /** + * 语言 + * @description 图表语言配置, 支持'zh-CN'与'en-US'两种语言 + * @default 'zh-CN' + */ + locale?: Locale +} +``` + +关联 API：[BackgroundColor](types.md#backgroundcolor)、[Color](types.md#color)、[Dataset](types.md#dataset)、[HierarchyDimension](types.md#hierarchydimension)、[HierarchyMeasure](types.md#hierarchymeasure)、[Label](types.md#label)、[Locale](i18n.md#locale)、[Page](types.md#page)、[Theme](types.md#theme)、[Tooltip](types.md#tooltip) diff --git a/skills/light-dashboard/references/api/vseed/data.md b/skills/light-dashboard/references/api/vseed/data.md new file mode 100644 index 0000000000..f8002d6bac --- /dev/null +++ b/skills/light-dashboard/references/api/vseed/data.md @@ -0,0 +1,854 @@ +# 数据重塑与选择器 + +[API 索引](./index.md) + +- [dataReshapeByEncoding](data.md#datareshapebyencoding) +- [selector](data.md#selector) +- [executeDynamicFilter](data.md#executedynamicfilter) +- [AngleEncoding](data.md#angleencoding) +- [BinCountMeasureId](data.md#bincountmeasureid) +- [BinEndMeasureId](data.md#binendmeasureid) +- [BinPercentageMeasureId](data.md#binpercentagemeasureid) +- [BinStartMeasureId](data.md#binstartmeasureid) +- [BoxPlotPivotIndicator](data.md#boxplotpivotindicator) +- [ColorEncoding](data.md#colorencoding) +- [ColorIdEncoding](data.md#coloridencoding) +- [DetailEncoding](data.md#detailencoding) +- [DimAxisType](data.md#dimaxistype) +- [DynamicFilter](data.md#dynamicfilter) +- [DynamicFilterResult](data.md#dynamicfilterresult) +- [FoldMeasureId](data.md#foldmeasureid) +- [FoldMeasureName](data.md#foldmeasurename) +- [foldMeasures](data.md#foldmeasures) +- [FoldMeasureValue](data.md#foldmeasurevalue) +- [FoldPrimaryMeasureValue](data.md#foldprimarymeasurevalue) +- [FoldSecondaryMeasureValue](data.md#foldsecondarymeasurevalue) +- [FoldXMeasureId](data.md#foldxmeasureid) +- [FoldXMeasureValue](data.md#foldxmeasurevalue) +- [FoldYMeasureId](data.md#foldymeasureid) +- [FoldYMeasureValue](data.md#foldymeasurevalue) +- [HierarchyEncoding](data.md#hierarchyencoding) +- [InnerRowIndex](data.md#innerrowindex) +- [isDimensionSelector](data.md#isdimensionselector) +- [isDynamicFilter](data.md#isdynamicfilter) +- [isFieldSelector](data.md#isfieldselector) +- [isMeasureSelector](data.md#ismeasureselector) +- [isPartialDatumSelector](data.md#ispartialdatumselector) +- [isRowWithFieldDynamicFilter](data.md#isrowwithfielddynamicfilter) +- [isValueDynamicFilter](data.md#isvaluedynamicfilter) +- [isValueSelector](data.md#isvalueselector) +- [LowerWhisker](data.md#lowerwhisker) +- [matchDynamicFilterResult](data.md#matchdynamicfilterresult) +- [matchesFieldSelector](data.md#matchesfieldselector) +- [MeasureId](data.md#measureid) +- [MeasureName](data.md#measurename) +- [MedianMeasureId](data.md#medianmeasureid) +- [ORIGINAL_DATA](data.md#original_data) +- [OutliersMeasureId](data.md#outliersmeasureid) +- [PlayerEncoding](data.md#playerencoding) +- [Q1MeasureValue](data.md#q1measurevalue) +- [Q3MeasureValue](data.md#q3measurevalue) +- [selectByDmension](data.md#selectbydmension) +- [selectByField](data.md#selectbyfield) +- [selectByMeasure](data.md#selectbymeasure) +- [selectByPartial](data.md#selectbypartial) +- [selectByValue](data.md#selectbyvalue) +- [selectorWithDynamicFilter](data.md#selectorwithdynamicfilter) +- [Separator](data.md#separator) +- [SourceEncoding](data.md#sourceencoding) +- [TargetEncoding](data.md#targetencoding) +- [unfoldDimensions](data.md#unfolddimensions) +- [UpperWhisker](data.md#upperwhisker) +- [XEncoding](data.md#xencoding) +- [YEncoding](data.md#yencoding) + +## dataReshapeByEncoding + +源码：[packages/vseed/src/dataReshape/dataReshapeByEncoding.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/dataReshape/dataReshapeByEncoding.ts) + +包导出：`dataReshapeByEncoding` + +```typescript +const dataReshapeByEncoding: ( + dataset: Dataset, + dimensions: Dimension[], + measures: Measure[], + encoding: Encoding, + options?: { + foldMeasureId?: string + foldMeasureName?: string + foldMeasureValue?: string + colorItemAsId?: boolean + colorMeasureId?: string + omitIds: string[] + locale?: Locale + }, +) => { + dataset: Dataset + foldInfo: FoldInfo + unfoldInfo: UnfoldInfo +} +``` + +关联 API：[Dataset](types.md#dataset)、[Dimension](types.md#dimension)、[Encoding](types.md#encoding)、[FoldInfo](types.md#foldinfo)、[Locale](i18n.md#locale)、[Measure](types.md#measure)、[UnfoldInfo](types.md#unfoldinfo) + +## selector + +源码：[packages/vseed/src/dataSelector/selector.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/dataSelector/selector.ts) + +包导出：`selector` + +```typescript +const selector: ( + vchartDatum: Datum, + selector: Selector | Selectors | undefined | null, + selectorMode?: 'And' | 'Or', +) => boolean +``` + +参数默认值： + +```typescript +// selector +selectorMode = 'And' +``` + +关联 API：[Datum](types.md#datum)、[Selector](types.md#selector)、[Selectors](types.md#selectors) + +## executeDynamicFilter + +源码：[packages/vseed/src/dataSelector/selector.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/dataSelector/selector.ts) + +包导出：`executeDynamicFilter` + +```typescript +/** + * 执行动态过滤器代码，获取匹配结果 + * @description + * 阶段1：执行阶段 - 一次性执行 dynamicFilter.code，获取所有匹配结果 + * - TableDynamicFilter → CellSelector[] + * - ChartDynamicFilter → PartialDatumSelector[] + * - ValueDynamicFilter → number | string + * + * @param filter 动态过滤器配置 + * @param allData 完整数据集 + * @returns 执行结果数组或标量值 + */ +const executeDynamicFilter: ( + filter: DynamicFilter, + allData: Datum[], +) => Promise<{ + success: boolean + data: DynamicFilterResult + error?: string +}> +``` + +关联 API：[Datum](types.md#datum)、[DynamicFilter](data.md#dynamicfilter)、[DynamicFilterResult](data.md#dynamicfilterresult) + +## AngleEncoding + +源码：[packages/vseed/src/dataReshape/constant.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/dataReshape/constant.ts) + +包导出：`AngleEncoding` + +```typescript +const AngleEncoding = '__Dim_Angle__' +``` + +## BinCountMeasureId + +源码：[packages/vseed/src/dataReshape/constant.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/dataReshape/constant.ts) + +包导出：`BinCountMeasureId` + +```typescript +const BinCountMeasureId = '__BinCount__' +``` + +## BinEndMeasureId + +源码：[packages/vseed/src/dataReshape/constant.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/dataReshape/constant.ts) + +包导出：`BinEndMeasureId` + +```typescript +const BinEndMeasureId = '__BinEnd__' +``` + +## BinPercentageMeasureId + +源码：[packages/vseed/src/dataReshape/constant.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/dataReshape/constant.ts) + +包导出：`BinPercentageMeasureId` + +```typescript +const BinPercentageMeasureId = '__BinPercentage__' +``` + +## BinStartMeasureId + +源码：[packages/vseed/src/dataReshape/constant.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/dataReshape/constant.ts) + +包导出：`BinStartMeasureId` + +```typescript +const BinStartMeasureId = '__BinStart__' +``` + +## BoxPlotPivotIndicator + +源码：[packages/vseed/src/dataReshape/constant.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/dataReshape/constant.ts) + +包导出：`BoxPlotPivotIndicator` + +```typescript +const BoxPlotPivotIndicator = '__BoxPlot_Pivot_Indicator__' +``` + +## ColorEncoding + +源码：[packages/vseed/src/dataReshape/constant.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/dataReshape/constant.ts) + +包导出：`ColorEncoding` + +```typescript +const ColorEncoding = '__Dim_Color__' +``` + +## ColorIdEncoding + +源码：[packages/vseed/src/dataReshape/constant.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/dataReshape/constant.ts) + +包导出：`ColorIdEncoding` + +```typescript +const ColorIdEncoding = '__Dim_ColorId__' +``` + +## DetailEncoding + +源码：[packages/vseed/src/dataReshape/constant.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/dataReshape/constant.ts) + +包导出：`DetailEncoding` + +```typescript +const DetailEncoding = '__Dim_Detail__' +``` + +## DimAxisType + +源码：[packages/vseed/src/dataReshape/constant.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/dataReshape/constant.ts) + +包导出：`DimAxisType` + +```typescript +const DimAxisType = '__Dim_AxisType__' +``` + +## DynamicFilter + +源码：[packages/vseed/src/dataSelector/selector.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/dataSelector/selector.ts) + +包导出：`DynamicFilter` + +```typescript +export type DynamicFilter = TableDynamicFilter | ChartDynamicFilter | ValueDynamicFilter +``` + +关联 API：[ChartDynamicFilter](types.md#chartdynamicfilter)、[TableDynamicFilter](types.md#tabledynamicfilter)、[ValueDynamicFilter](types.md#valuedynamicfilter) + +## DynamicFilterResult + +源码：[packages/vseed/src/dataSelector/selector.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/dataSelector/selector.ts) + +包导出：`DynamicFilterResult` + +```typescript +export type DynamicFilterResult = RowWithFieldRes[] | PartialDatumRes[] | number | string +``` + +关联 API：[PartialDatumRes](types.md#partialdatumres)、[RowWithFieldRes](types.md#rowwithfieldres) + +## FoldMeasureId + +源码：[packages/vseed/src/dataReshape/constant.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/dataReshape/constant.ts) + +包导出：`FoldMeasureId` + +```typescript +const FoldMeasureId = '__MeaId__' +``` + +## FoldMeasureName + +源码：[packages/vseed/src/dataReshape/constant.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/dataReshape/constant.ts) + +包导出：`FoldMeasureName` + +```typescript +const FoldMeasureName = '__MeaName__' +``` + +## foldMeasures + +源码：[packages/vseed/src/dataReshape/foldMeasures.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/dataReshape/foldMeasures.ts) + +包导出：`foldMeasures` + +```typescript +/** + * 折叠指定的指标 + * @description 合并指定的指标为1个, 无论多少个, 都能转换为1个, 取名为fold, 意为折叠后混合在一起. + */ +const foldMeasures: ( + dataset: Dataset, + measures: Measures, + options: { + measureId: string + measureName: string + measureValue: string + colorMeasureId?: string + allowEmptyFold?: boolean + omitIds?: string[] + }, +) => { + dataset: Dataset + foldInfo: FoldInfo +} +``` + +关联 API：[Dataset](types.md#dataset)、[FoldInfo](types.md#foldinfo)、[Measures](types.md#measures) + +## FoldMeasureValue + +源码：[packages/vseed/src/dataReshape/constant.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/dataReshape/constant.ts) + +包导出：`FoldMeasureValue` + +```typescript +const FoldMeasureValue = '__MeaValue__' +``` + +## FoldPrimaryMeasureValue + +源码：[packages/vseed/src/dataReshape/constant.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/dataReshape/constant.ts) + +包导出：`FoldPrimaryMeasureValue` + +```typescript +const FoldPrimaryMeasureValue = '__MeaPrimaryValue__' +``` + +## FoldSecondaryMeasureValue + +源码：[packages/vseed/src/dataReshape/constant.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/dataReshape/constant.ts) + +包导出：`FoldSecondaryMeasureValue` + +```typescript +const FoldSecondaryMeasureValue = '__MeaSecondaryValue__' +``` + +## FoldXMeasureId + +源码：[packages/vseed/src/dataReshape/constant.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/dataReshape/constant.ts) + +包导出：`FoldXMeasureId` + +```typescript +const FoldXMeasureId = '__MeaXId__' +``` + +## FoldXMeasureValue + +源码：[packages/vseed/src/dataReshape/constant.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/dataReshape/constant.ts) + +包导出：`FoldXMeasureValue` + +```typescript +const FoldXMeasureValue = '__MeaXValue__' +``` + +## FoldYMeasureId + +源码：[packages/vseed/src/dataReshape/constant.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/dataReshape/constant.ts) + +包导出：`FoldYMeasureId` + +```typescript +const FoldYMeasureId = '__MeaYId__' +``` + +## FoldYMeasureValue + +源码：[packages/vseed/src/dataReshape/constant.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/dataReshape/constant.ts) + +包导出：`FoldYMeasureValue` + +```typescript +const FoldYMeasureValue = '__MeaYValue__' +``` + +## HierarchyEncoding + +源码：[packages/vseed/src/dataReshape/constant.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/dataReshape/constant.ts) + +包导出：`HierarchyEncoding` + +```typescript +const HierarchyEncoding = '__Dim_Hierarchy__' +``` + +## InnerRowIndex + +源码：[packages/vseed/src/dataReshape/constant.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/dataReshape/constant.ts) + +包导出：`InnerRowIndex` + +```typescript +const InnerRowIndex = '__row_index' +``` + +## isDimensionSelector + +源码：[packages/vseed/src/dataSelector/selector.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/dataSelector/selector.ts) + +包导出：`isDimensionSelector` + +```typescript +const isDimensionSelector: (selector: Selector) => selector is DimensionSelector +``` + +关联 API：[DimensionSelector](types.md#dimensionselector)、[selector](data.md#selector)、[Selector](types.md#selector) + +## isDynamicFilter + +源码：[packages/vseed/src/dataSelector/selector.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/dataSelector/selector.ts) + +包导出：`isDynamicFilter` + +```typescript +/** + * 识别是否为动态过滤器（通用判断，包含所有类型的动态过滤器） + */ +const isDynamicFilter: (selector: any) => selector is DynamicFilter +``` + +关联 API：[DynamicFilter](data.md#dynamicfilter)、[selector](data.md#selector) + +## isFieldSelector + +源码：[packages/vseed/src/dataSelector/selector.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/dataSelector/selector.ts) + +包导出：`isFieldSelector` + +```typescript +/** + * 判断是否为字段选择器 + * @description 字段选择器只有 field 属性，没有 operator/op/value + */ +const isFieldSelector: (selector: Selector) => selector is FieldSelector +``` + +关联 API：[FieldSelector](types.md#fieldselector)、[selector](data.md#selector)、[Selector](types.md#selector) + +## isMeasureSelector + +源码：[packages/vseed/src/dataSelector/selector.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/dataSelector/selector.ts) + +包导出：`isMeasureSelector` + +```typescript +const isMeasureSelector: (selector: Selector) => selector is MeasureSelector +``` + +关联 API：[MeasureSelector](types.md#measureselector)、[selector](data.md#selector)、[Selector](types.md#selector) + +## isPartialDatumSelector + +源码：[packages/vseed/src/dataSelector/selector.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/dataSelector/selector.ts) + +包导出：`isPartialDatumSelector` + +```typescript +const isPartialDatumSelector: (selector: Selector) => selector is PartialDatumSelector +``` + +关联 API：[PartialDatumSelector](types.md#partialdatumselector)、[selector](data.md#selector)、[Selector](types.md#selector) + +## isRowWithFieldDynamicFilter + +源码：[packages/vseed/src/dataSelector/selector.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/dataSelector/selector.ts) + +包导出：`isRowWithFieldDynamicFilter` + +```typescript +/** + * 识别是否为row-with-field动态过滤器 + */ +const isRowWithFieldDynamicFilter: (selector: any) => selector is TableDynamicFilter +``` + +关联 API：[selector](data.md#selector)、[TableDynamicFilter](types.md#tabledynamicfilter) + +## isValueDynamicFilter + +源码：[packages/vseed/src/dataSelector/selector.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/dataSelector/selector.ts) + +包导出：`isValueDynamicFilter` + +```typescript +/** + * 识别是否为数值动态过滤器（用于标注线等场景） + */ +const isValueDynamicFilter: (selector: any) => selector is ValueDynamicFilter +``` + +关联 API：[selector](data.md#selector)、[ValueDynamicFilter](types.md#valuedynamicfilter) + +## isValueSelector + +源码：[packages/vseed/src/dataSelector/selector.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/dataSelector/selector.ts) + +包导出：`isValueSelector` + +```typescript +const isValueSelector: (selector: Selector) => selector is ValueSelector +``` + +关联 API：[selector](data.md#selector)、[Selector](types.md#selector)、[ValueSelector](types.md#valueselector) + +## LowerWhisker + +源码：[packages/vseed/src/dataReshape/constant.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/dataReshape/constant.ts) + +包导出：`LowerWhisker` + +```typescript +const LowerWhisker = '__Lower_Whisker__' +``` + +## matchDynamicFilterResult + +源码：[packages/vseed/src/dataSelector/selector.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/dataSelector/selector.ts) + +包导出：`matchDynamicFilterResult` + +```typescript +/** + * 匹配动态过滤器结果 + * @description + * 阶段2：匹配阶段 - 判断当前 datum/cell 是否在执行结果中 + * - 使用 OR 策略：结果数组中任一项匹配即返回 true + * - 表格场景：检查 { row, field } 是否在 CellSelector[] 中 + * - 图表场景：检查 datum 的维度值是否匹配 PartialDatumSelector[] 中任一项 + * - 数值场景：不适用（ValueDynamicFilter返回标量值，不用于匹配） + * + * @param result 动态过滤器执行结果（CellSelector[] 或 PartialDatumSelector[]，不包括 ValueDynamicFilter） + * @param datum 当前数据项 + * @param selectorType 选择器类型（用于区分表格和图表动态过滤器） + * @returns 是否匹配（OR 策略） + */ +const matchDynamicFilterResult: (result: DynamicFilterResult, datum: Datum, selectorType?: 'table' | 'chart') => boolean +``` + +参数默认值： + +```typescript +// matchDynamicFilterResult +selectorType = 'table' +``` + +关联 API：[Datum](types.md#datum)、[DynamicFilterResult](data.md#dynamicfilterresult) + +## matchesFieldSelector + +源码：[packages/vseed/src/dataSelector/selector.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/dataSelector/selector.ts) + +包导出：`matchesFieldSelector` + +```typescript +/** + * 检查给定的字段是否与 FieldSelector 匹配 + */ +const matchesFieldSelector: (field: string, fieldSelector: FieldSelector) => boolean +``` + +关联 API：[FieldSelector](types.md#fieldselector) + +## MeasureId + +源码：[packages/vseed/src/dataReshape/constant.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/dataReshape/constant.ts) + +包导出：`MeasureId` + +```typescript +const MeasureId = '__MeaId__' +``` + +## MeasureName + +源码：[packages/vseed/src/dataReshape/constant.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/dataReshape/constant.ts) + +包导出：`MeasureName` + +```typescript +const MeasureName = '__MeaName__' +``` + +## MedianMeasureId + +源码：[packages/vseed/src/dataReshape/constant.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/dataReshape/constant.ts) + +包导出：`MedianMeasureId` + +```typescript +const MedianMeasureId = '__Meadian__' +``` + +## ORIGINAL_DATA + +源码：[packages/vseed/src/dataReshape/constant.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/dataReshape/constant.ts) + +包导出：`ORIGINAL_DATA` + +```typescript +const ORIGINAL_DATA = '__OriginalData__' +``` + +## OutliersMeasureId + +源码：[packages/vseed/src/dataReshape/constant.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/dataReshape/constant.ts) + +包导出：`OutliersMeasureId` + +```typescript +const OutliersMeasureId = '__Outliers__' +``` + +## PlayerEncoding + +源码：[packages/vseed/src/dataReshape/constant.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/dataReshape/constant.ts) + +包导出：`PlayerEncoding` + +```typescript +const PlayerEncoding = '__Dim_Player__' +``` + +## Q1MeasureValue + +源码：[packages/vseed/src/dataReshape/constant.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/dataReshape/constant.ts) + +包导出：`Q1MeasureValue` + +```typescript +const Q1MeasureValue = '__Q1__' +``` + +## Q3MeasureValue + +源码：[packages/vseed/src/dataReshape/constant.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/dataReshape/constant.ts) + +包导出：`Q3MeasureValue` + +```typescript +const Q3MeasureValue = '__Q3__' +``` + +## selectByDmension + +源码：[packages/vseed/src/dataSelector/selector.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/dataSelector/selector.ts) + +包导出：`selectByDmension` + +```typescript +const selectByDmension: (selector: DimensionSelector, datum: Datum) => boolean +``` + +关联 API：[Datum](types.md#datum)、[DimensionSelector](types.md#dimensionselector)、[selector](data.md#selector) + +## selectByField + +源码：[packages/vseed/src/dataSelector/selector.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/dataSelector/selector.ts) + +包导出：`selectByField` + +```typescript +/** + * 通过字段名选择 + * @description 检查 datum 是否包含指定字段（用于列级选择） + */ +const selectByField: (selector: FieldSelector, datum: Datum) => boolean +``` + +关联 API：[Datum](types.md#datum)、[FieldSelector](types.md#fieldselector)、[selector](data.md#selector) + +## selectByMeasure + +源码：[packages/vseed/src/dataSelector/selector.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/dataSelector/selector.ts) + +包导出：`selectByMeasure` + +```typescript +const selectByMeasure: (selector: MeasureSelector, datum: Datum) => boolean +``` + +关联 API：[Datum](types.md#datum)、[MeasureSelector](types.md#measureselector)、[selector](data.md#selector) + +## selectByPartial + +源码：[packages/vseed/src/dataSelector/selector.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/dataSelector/selector.ts) + +包导出：`selectByPartial` + +```typescript +const selectByPartial: (selector: PartialDatumSelector, datum: Datum) => boolean +``` + +关联 API：[Datum](types.md#datum)、[PartialDatumSelector](types.md#partialdatumselector)、[selector](data.md#selector) + +## selectByValue + +源码：[packages/vseed/src/dataSelector/selector.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/dataSelector/selector.ts) + +包导出：`selectByValue` + +```typescript +const selectByValue: (selector: ValueSelector, datum: Datum) => boolean +``` + +关联 API：[Datum](types.md#datum)、[selector](data.md#selector)、[ValueSelector](types.md#valueselector) + +## selectorWithDynamicFilter + +源码：[packages/vseed/src/dataSelector/selector.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/dataSelector/selector.ts) + +包导出：`selectorWithDynamicFilter` + +```typescript +/** + * 带有动态过滤器支持的选择器 + * @description + * 处理流程（两阶段设计）： + * + * 阶段1 - 执行（Execute）： + * - 在 prepare() 阶段执行，结果写入 dynamicFilter.result + * - TableDynamicFilter → CellSelector[] + * - ChartDynamicFilter → PartialDatumSelector[] + * - ValueDynamicFilter → number | string（用于读取，不用于匹配） + * + * 阶段2 - 匹配（Match）： + * - 读取 dynamicFilter.result + * - 使用 OR 策略：结果数组中任一项匹配即返回 true + * - 表格：判断 { row, field } 是否在 CellSelector[] 中 + * - 图表：判断 datum 是否匹配 PartialDatumSelector[] 中任一项 + * - 数值：不用于匹配，直接返回 false（数值过滤器在主要用于标注线值，不用于行列选择） + * + * @param vchartDatum 单个数据项 + * @param selectorConfig 选择器配置（可包含 DynamicFilter） + * @param defaultSelector 传统选择器（仅在 DynamicFilter 无结果且有 fallback 时使用） + * @returns 该数据项是否符合选择条件 + */ +const selectorWithDynamicFilter: ( + vchartDatum: Datum, + selectorConfig: DynamicFilter, + defaultSelector?: Selector | Selector[] | null, +) => boolean +``` + +关联 API：[Datum](types.md#datum)、[DynamicFilter](data.md#dynamicfilter)、[Selector](types.md#selector) + +## Separator + +源码：[packages/vseed/src/dataReshape/constant.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/dataReshape/constant.ts) + +包导出：`Separator` + +```typescript +const Separator = '-' +``` + +## SourceEncoding + +源码：[packages/vseed/src/dataReshape/constant.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/dataReshape/constant.ts) + +包导出：`SourceEncoding` + +```typescript +const SourceEncoding = '__Dim_Source__' +``` + +## TargetEncoding + +源码：[packages/vseed/src/dataReshape/constant.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/dataReshape/constant.ts) + +包导出：`TargetEncoding` + +```typescript +const TargetEncoding = '__Dim_Target__' +``` + +## unfoldDimensions + +源码：[packages/vseed/src/dataReshape/unfoldDimensions.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/dataReshape/unfoldDimensions.ts) + +包导出：`unfoldDimensions` + +```typescript +/** + * @description 展开并合并视觉通道的维度, 在foldMeasures后合并维度, 所以不需要进行笛卡尔积 + * @param dataset 原始数据集 + * @param dimensions 维度 + * @param encoding 编码 + * @param options + * @returns + */ +const unfoldDimensions: ( + dataset: Dataset, + dimensions: Dimension[], + encoding: Encoding, + options: { + foldMeasureId: string + separator: string + colorItemAsId: boolean + formatDimensionValue?: (dimension: Dimension, value: unknown) => string + }, +) => { + dataset: Dataset + unfoldInfo: UnfoldInfo +} +``` + +关联 API：[Dataset](types.md#dataset)、[Dimension](types.md#dimension)、[Encoding](types.md#encoding)、[UnfoldInfo](types.md#unfoldinfo) + +## UpperWhisker + +源码：[packages/vseed/src/dataReshape/constant.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/dataReshape/constant.ts) + +包导出：`UpperWhisker` + +```typescript +const UpperWhisker = '__Upper_Whisker__' +``` + +## XEncoding + +源码：[packages/vseed/src/dataReshape/constant.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/dataReshape/constant.ts) + +包导出：`XEncoding` + +```typescript +const XEncoding = '__Dim_X__' +``` + +## YEncoding + +源码：[packages/vseed/src/dataReshape/constant.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/dataReshape/constant.ts) + +包导出：`YEncoding` + +```typescript +const YEncoding = '__Dim_Y__' +``` diff --git a/skills/light-dashboard/references/api/vseed/i18n.md b/skills/light-dashboard/references/api/vseed/i18n.md new file mode 100644 index 0000000000..b7c20d02f0 --- /dev/null +++ b/skills/light-dashboard/references/api/vseed/i18n.md @@ -0,0 +1,98 @@ +# 国际化 + +[API 索引](./index.md) + +- [intl](i18n.md#intl) +- [a](i18n.md#a) +- [Intl](i18n.md#intl-1) +- [Locale](i18n.md#locale) +- [LOCALES](i18n.md#locales) +- [TranslateRecordType](i18n.md#translaterecordtype) + +外部依赖类型使用源码中的导入名称： + +```typescript +import { z } from 'zod' +``` + +## intl + +源码：[packages/vseed/src/i18n/i18n.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/i18n/i18n.ts) + +包导出：`intl` + +```typescript +const intl: Intl +``` + +关联 API：[Intl](i18n.md#intl-1) + +## a + +源码：[packages/vseed/src/i18n/index.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/i18n/index.ts) + +包导出：`a` + +```typescript +const a = 123 +``` + +## Intl + +源码：[packages/vseed/src/i18n/i18n.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/i18n/i18n.ts) + +关联类型：通过公开 API 的签名引用，不是包入口的独立导出。 + +```typescript +declare class Intl { + canTranslate: (value: string) => boolean + /** + * @example i18n`指标名称` + */ + i18n: (segments: TemplateStringsArray, ...values: Array) => string + setLocale: (locale: Locale) => void + getLocale: () => Locale + static getInstance(): Intl +} +``` + +关联 API：[Locale](i18n.md#locale) + +## Locale + +源码：[packages/vseed/src/types/i18n/i18n.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/i18n/i18n.ts) + +包导出：`Locale` + +```typescript +export type Locale = (typeof LOCALES)[number] +``` + +关联 API：[LOCALES](i18n.md#locales) + +## LOCALES + +源码：[packages/vseed/src/types/i18n/i18n.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/i18n/i18n.ts) + +包导出：`LOCALES` + +```typescript +const LOCALES: readonly ['zh-CN', 'en-US', 'ja-JP', 'de-DE', 'id-ID', 'fr-FR', 'ko-KR', 'vi-VN'] +``` + +## TranslateRecordType + +源码：[packages/vseed/src/types/i18n/i18n.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/i18n/i18n.ts) + +包导出：`TranslateRecordType` + +```typescript +export type TranslateRecordType = Record< + string, + { + [local in Locale]: string + } +> +``` + +关联 API：[Locale](i18n.md#locale) diff --git a/skills/light-dashboard/references/api/vseed/index.md b/skills/light-dashboard/references/api/vseed/index.md new file mode 100644 index 0000000000..a39e3dc537 --- /dev/null +++ b/skills/light-dashboard/references/api/vseed/index.md @@ -0,0 +1,714 @@ +# VSeed API + +这是 VBI skill 的 VSeed API 补充，用于查阅 VSeed DSL 到 VChart、VTable Spec 的构建能力。先调用 `registerAll()` 注册内置图表与主题，再通过 `Builder.from(vseed).build()` 构建 Spec；配置包含动态过滤器代码时，先 `await builder.prepare()` 再构建。 + +从 `packages/vseed/src/index.ts` 的公开导出生成，并递归收录签名引用的本地类型。私有、受保护和 `@internal` 成员不属于公开 API。声明保留 JSDoc、重载、泛型、可选参数和推导返回值。Zod Schema 保留源码中的组合表达式与默认值；基于 Schema 的类型保留 z.infer 等引用，可沿关联 API 链接查看字段定义。 + +此处保留公开 API 的参考快照。接口变更时按对应包的公开 TypeScript 声明更新签名与关联类型。 + +## 分类 + +- [Builder](./builder.md) +- [注册与扩展](./register.md) +- [DSL 与公共类型](./types.md) +- [图表与表格 DSL](./chart-types.md) +- [构建管线类型](./pipeline.md) +- [Zod 校验 Schema](./schemas.md) +- [主题](./theme.md) +- [数据重塑与选择器](./data.md) +- [国际化](./i18n.md) + +## 公开导出（692） + +- [a](i18n.md#a) +- [AdvancedPipe](pipeline.md#advancedpipe) +- [AdvancedPipeline](pipeline.md#advancedpipeline) +- [AdvancedPipelineContext](pipeline.md#advancedpipelinecontext) +- [AdvancedVSeed](types.md#advancedvseed) +- [AngleEncoding](data.md#angleencoding) +- [AnimationEffectConfig](types.md#animationeffectconfig) +- [Annotation](types.md#annotation) +- [ANNOTATION_Z_INDEX](pipeline.md#annotation_z_index) +- [AnnotationArea](types.md#annotationarea) +- [AnnotationAreaConfig](types.md#annotationareaconfig) +- [AnnotationDifferenceLine](types.md#annotationdifferenceline) +- [AnnotationDifferenceLineConfig](types.md#annotationdifferencelineconfig) +- [AnnotationHorizontalLine](types.md#annotationhorizontalline) +- [AnnotationHorizontalLineConfig](types.md#annotationhorizontallineconfig) +- [AnnotationPoint](types.md#annotationpoint) +- [AnnotationPointConfig](types.md#annotationpointconfig) +- [AnnotationVerticalLine](types.md#annotationverticalline) +- [AnnotationVerticalLineConfig](types.md#annotationverticallineconfig) +- [Area](chart-types.md#area) +- [areaAdvancedPipeline](pipeline.md#areaadvancedpipeline) +- [AreaConfig](types.md#areaconfig) +- [AreaDimension](types.md#areadimension) +- [AreaMeasure](types.md#areameasure) +- [AreaPercent](chart-types.md#areapercent) +- [areaPercentAdvancedPipeline](pipeline.md#areapercentadvancedpipeline) +- [AreaPercentConfig](types.md#areapercentconfig) +- [AreaPercentDimension](types.md#areapercentdimension) +- [areaPercentSpecPipeline](pipeline.md#areapercentspecpipeline) +- [AreaSelector](types.md#areaselector) +- [AreaSelectors](types.md#areaselectors) +- [areaSpecPipeline](pipeline.md#areaspecpipeline) +- [AreaStyle](types.md#areastyle) +- [autoFormatter](pipeline.md#autoformatter) +- [autoNumFormatter](pipeline.md#autonumformatter) +- [AXIS_LABEL_SPACE](pipeline.md#axis_label_space) +- [BackgroundColor](types.md#backgroundcolor) +- [BAND_AXIS_INNER_OFFSET_IN_PIVOT](pipeline.md#band_axis_inner_offset_in_pivot) +- [Bar](chart-types.md#bar) +- [barAdvancedPipeline](pipeline.md#baradvancedpipeline) +- [BarConfig](types.md#barconfig) +- [BarDimension](types.md#bardimension) +- [BarGapInGroup](types.md#bargapingroup) +- [BarLikeAnimation](types.md#barlikeanimation) +- [BarLikeAnimationLoop](types.md#barlikeanimationloop) +- [BarLikeAnimationParams](types.md#barlikeanimationparams) +- [BarLikeAppearAnimation](types.md#barlikeappearanimation) +- [BarLikeLoopAnimation](types.md#barlikeloopanimation) +- [BarLikeLoopEffect](types.md#barlikeloopeffect) +- [BarLikeUpdateAnimation](types.md#barlikeupdateanimation) +- [BarMaxWidth](types.md#barmaxwidth) +- [BarMeasure](types.md#barmeasure) +- [BarParallel](chart-types.md#barparallel) +- [barParallelAdvancedPipeline](pipeline.md#barparalleladvancedpipeline) +- [BarParallelConfig](types.md#barparallelconfig) +- [BarParallelDimension](types.md#barparalleldimension) +- [BarParallelMeasure](types.md#barparallelmeasure) +- [barParallelSpecPipeline](pipeline.md#barparallelspecpipeline) +- [BarPercent](chart-types.md#barpercent) +- [barPercentAdvancedPipeline](pipeline.md#barpercentadvancedpipeline) +- [BarPercentConfig](types.md#barpercentconfig) +- [BarPercentDimension](types.md#barpercentdimension) +- [BarPercentMeasure](types.md#barpercentmeasure) +- [barPercentSpecPipeline](pipeline.md#barpercentspecpipeline) +- [barSpecPipeline](pipeline.md#barspecpipeline) +- [BarStyle](types.md#barstyle) +- [BaseDimension](types.md#basedimension) +- [BaseMeasure](types.md#basemeasure) +- [BinCountMeasureId](data.md#bincountmeasureid) +- [BinEndMeasureId](data.md#binendmeasureid) +- [BinPercentageMeasureId](data.md#binpercentagemeasureid) +- [BinStartMeasureId](data.md#binstartmeasureid) +- [BodyCellStyle](types.md#bodycellstyle) +- [BoxGapInGroup](types.md#boxgapingroup) +- [BoxMaxWidth](types.md#boxmaxwidth) +- [BoxPlot](chart-types.md#boxplot) +- [boxplotAdvancedPipeline](pipeline.md#boxplotadvancedpipeline) +- [BoxPlotDimension](types.md#boxplotdimension) +- [BoxPlotMeasure](types.md#boxplotmeasure) +- [BoxPlotPivotIndicator](data.md#boxplotpivotindicator) +- [boxplotSpecPipeline](pipeline.md#boxplotspecpipeline) +- [BoxPlotStyle](types.md#boxplotstyle) +- [Brush](types.md#brush) +- [BrushConfig](types.md#brushconfig) +- [Builder](builder.md#builder) +- [BUILTIN_UTILS_SOURCE](pipeline.md#builtin_utils_source) +- [CenterText](types.md#centertext) +- [CenterTextConfig](types.md#centertextconfig) +- [ChartDynamicFilter](types.md#chartdynamicfilter) +- [ChartType](types.md#charttype) +- [ChartTypeEnum](pipeline.md#charttypeenum) +- [checkVSeed](pipeline.md#checkvseed) +- [CirclePacking](chart-types.md#circlepacking) +- [circlePackingAdvancedPipeline](pipeline.md#circlepackingadvancedpipeline) +- [CirclePackingConfig](types.md#circlepackingconfig) +- [circlePackingSpecPipeline](pipeline.md#circlepackingspecpipeline) +- [Color](types.md#color) +- [ColorEncoding](data.md#colorencoding) +- [ColorIdEncoding](data.md#coloridencoding) +- [ColorLegend](types.md#colorlegend) +- [Column](chart-types.md#column) +- [columnAdvancedPipeline](pipeline.md#columnadvancedpipeline) +- [ColumnConfig](types.md#columnconfig) +- [ColumnDimension](types.md#columndimension) +- [ColumnMeasure](types.md#columnmeasure) +- [ColumnParallel](chart-types.md#columnparallel) +- [columnParallelAdvancedPipeline](pipeline.md#columnparalleladvancedpipeline) +- [ColumnParallelConfig](types.md#columnparallelconfig) +- [ColumnParallelDimension](types.md#columnparalleldimension) +- [ColumnParallelMeasure](types.md#columnparallelmeasure) +- [columnParallelSpecPipeline](pipeline.md#columnparallelspecpipeline) +- [ColumnPercent](chart-types.md#columnpercent) +- [columnPercentAdvancedPipeline](pipeline.md#columnpercentadvancedpipeline) +- [ColumnPercentConfig](types.md#columnpercentconfig) +- [ColumnPercentDimension](types.md#columnpercentdimension) +- [ColumnPercentMeasure](types.md#columnpercentmeasure) +- [columnPercentSpecPipeline](pipeline.md#columnpercentspecpipeline) +- [columnSpecPipeline](pipeline.md#columnspecpipeline) +- [condition](pipeline.md#condition) +- [Condition](pipeline.md#condition-1) +- [Config](types.md#config) +- [CornerRadius](types.md#cornerradius) +- [createAliasFormatter](pipeline.md#createaliasformatter) +- [createFormatter](pipeline.md#createformatter) +- [createFormatterByDimension](pipeline.md#createformatterbydimension) +- [createFormatterByMeasure](pipeline.md#createformatterbymeasure) +- [createNumFormatter](pipeline.md#createnumformatter) +- [createTimeFormatter](pipeline.md#createtimeformatter) +- [createTokenThemeConfig](theme.md#createtokenthemeconfig) +- [CrosshairLine](types.md#crosshairline) +- [CrosshairRect](types.md#crosshairrect) +- [CustomTheme](types.md#customtheme) +- [CustomThemeConfig](types.md#customthemeconfig) +- [darkTheme](theme.md#darktheme) +- [dataReshapeByEncoding](data.md#datareshapebyencoding) +- [Dataset](types.md#dataset) +- [DatasetReshapeInfo](types.md#datasetreshapeinfo) +- [Datum](types.md#datum) +- [DATUM_HIDE_KEY](pipeline.md#datum_hide_key) +- [DEFAULT_DUAL_CHART_TYPE](pipeline.md#default_dual_chart_type) +- [DEFAULT_PARENT_ID](pipeline.md#default_parent_id) +- [deleteDimensionTreeByCallback](pipeline.md#deletedimensiontreebycallback) +- [deleteMeasureTreeByCallback](pipeline.md#deletemeasuretreebycallback) +- [DetailEncoding](data.md#detailencoding) +- [DifferenceAnchor](types.md#differenceanchor) +- [DifferenceSelector](types.md#differenceselector) +- [DimAxisType](data.md#dimaxistype) +- [Dimension](types.md#dimension) +- [DimensionEncoding](types.md#dimensionencoding) +- [DimensionEncodingEnum](types.md#dimensionencodingenum) +- [DimensionGroup](types.md#dimensiongroup) +- [DimensionLinkage](types.md#dimensionlinkage) +- [Dimensions](types.md#dimensions) +- [DimensionSelector](types.md#dimensionselector) +- [DimensionTree](types.md#dimensiontree) +- [Donut](chart-types.md#donut) +- [donutAdvancedPipeline](pipeline.md#donutadvancedpipeline) +- [DonutConfig](types.md#donutconfig) +- [DonutDimension](types.md#donutdimension) +- [DonutMeasure](types.md#donutmeasure) +- [donutSpecPipeline](pipeline.md#donutspecpipeline) +- [DUAL_AXIS_CHART_COLUMN_Z_INDEX](pipeline.md#dual_axis_chart_column_z_index) +- [DUAL_AXIS_CHART_NON_COLUMN_Z_INDEX](pipeline.md#dual_axis_chart_non_column_z_index) +- [DUAL_AXIS_LABEL_Z_INDEX](pipeline.md#dual_axis_label_z_index) +- [DualAxis](chart-types.md#dualaxis) +- [dualAxisAdvancedPipeline](pipeline.md#dualaxisadvancedpipeline) +- [DualAxisConfig](types.md#dualaxisconfig) +- [DualAxisDimension](types.md#dualaxisdimension) +- [DualAxisMeasure](types.md#dualaxismeasure) +- [DualAxisOptions](types.md#dualaxisoptions) +- [dualAxisSpecPipeline](pipeline.md#dualaxisspecpipeline) +- [DynamicFilter](data.md#dynamicfilter) +- [DynamicFilterExecutionResult](types.md#dynamicfilterexecutionresult) +- [DynamicFilterResult](data.md#dynamicfilterresult) +- [EcdfRegressionLine](types.md#ecdfregressionline) +- [Encoding](types.md#encoding) +- [EncodingEnum](types.md#encodingenum) +- [execPipeline](pipeline.md#execpipeline) +- [ExecPipelineType](pipeline.md#execpipelinetype) +- [executeDynamicFilter](data.md#executedynamicfilter) +- [executeFilterCode](pipeline.md#executefiltercode) +- [FieldSelector](types.md#fieldselector) +- [findAllMeasures](pipeline.md#findallmeasures) +- [findFirstMeasure](pipeline.md#findfirstmeasure) +- [findMeasureById](pipeline.md#findmeasurebyid) +- [findTreeNodesBy](pipeline.md#findtreenodesby) +- [flatReshapeMeasures](pipeline.md#flatreshapemeasures) +- [FoldInfo](types.md#foldinfo) +- [FoldMeasureId](data.md#foldmeasureid) +- [FoldMeasureName](data.md#foldmeasurename) +- [foldMeasures](data.md#foldmeasures) +- [FoldMeasureValue](data.md#foldmeasurevalue) +- [FoldPrimaryMeasureValue](data.md#foldprimarymeasurevalue) +- [FoldSecondaryMeasureValue](data.md#foldsecondarymeasurevalue) +- [FoldXMeasureId](data.md#foldxmeasureid) +- [FoldXMeasureValue](data.md#foldxmeasurevalue) +- [FoldYMeasureId](data.md#foldymeasureid) +- [FoldYMeasureValue](data.md#foldymeasurevalue) +- [Formatter](types.md#formatter) +- [Funnel](chart-types.md#funnel) +- [funnelAdvancedPipeline](pipeline.md#funneladvancedpipeline) +- [FunnelConfig](types.md#funnelconfig) +- [FunnelDimension](types.md#funneldimension) +- [FunnelMeasure](types.md#funnelmeasure) +- [funnelSpecPipeline](pipeline.md#funnelspecpipeline) +- [FunnelTransformConfig](types.md#funneltransformconfig) +- [HAS_BUILTIN_UTILS](pipeline.md#has_builtin_utils) +- [hasMultipleMeasureInSingleView](pipeline.md#hasmultiplemeasureinsingleview) +- [Heatmap](chart-types.md#heatmap) +- [heatmapAdvancedPipeline](pipeline.md#heatmapadvancedpipeline) +- [HeatmapConfig](types.md#heatmapconfig) +- [HeatmapDimension](types.md#heatmapdimension) +- [HeatmapMeasure](types.md#heatmapmeasure) +- [heatmapSpecPipeline](pipeline.md#heatmapspecpipeline) +- [HierarchyDimension](types.md#hierarchydimension) +- [HierarchyEncoding](data.md#hierarchyencoding) +- [HierarchyMeasure](types.md#hierarchymeasure) +- [HierarchySankey](chart-types.md#hierarchysankey) +- [hierarchySankeyAdvancedPipeline](pipeline.md#hierarchysankeyadvancedpipeline) +- [HierarchySankeyConfig](types.md#hierarchysankeyconfig) +- [hierarchySankeySpecPipeline](pipeline.md#hierarchysankeyspecpipeline) +- [Histogram](chart-types.md#histogram) +- [histogramAdvancedPipeline](pipeline.md#histogramadvancedpipeline) +- [HistogramDimension](types.md#histogramdimension) +- [HistogramMeasure](types.md#histogrammeasure) +- [histogramSpecPipeline](pipeline.md#histogramspecpipeline) +- [initializeWorkerPool](pipeline.md#initializeworkerpool) +- [InnerRowIndex](data.md#innerrowindex) +- [intl](i18n.md#intl) +- [isAreaPercent](pipeline.md#isareapercent) +- [isBarLikeChart](pipeline.md#isbarlikechart) +- [isBarPercent](pipeline.md#isbarpercent) +- [isColumnPercent](pipeline.md#iscolumnpercent) +- [isCombination](pipeline.md#iscombination) +- [isDimension](pipeline.md#isdimension) +- [isDimensionGroup](pipeline.md#isdimensiongroup) +- [isDimensionSelector](data.md#isdimensionselector) +- [isDualAxisChartType](pipeline.md#isdualaxischarttype) +- [isDynamicFilter](data.md#isdynamicfilter) +- [isFieldSelector](data.md#isfieldselector) +- [isHierarchySankey](pipeline.md#ishierarchysankey) +- [isMeasure](pipeline.md#ismeasure) +- [isMeasureGroup](pipeline.md#ismeasuregroup) +- [isMeasures](pipeline.md#ismeasures) +- [isMeasureSelector](data.md#ismeasureselector) +- [isPartialDatumSelector](data.md#ispartialdatumselector) +- [isPivot](pipeline.md#ispivot) +- [isPivotChart](pipeline.md#ispivotchart) +- [isPivotTable](pipeline.md#ispivottable) +- [isPositionMeasure](pipeline.md#ispositionmeasure) +- [isRadar](pipeline.md#isradar) +- [isRectungularCoordinate](pipeline.md#isrectungularcoordinate) +- [isRowWithFieldDynamicFilter](data.md#isrowwithfielddynamicfilter) +- [isSankey](pipeline.md#issankey) +- [isTable](pipeline.md#istable) +- [isValueDynamicFilter](data.md#isvaluedynamicfilter) +- [isValueSelector](data.md#isvalueselector) +- [isVChart](pipeline.md#isvchart) +- [isVTable](pipeline.md#isvtable) +- [KdeRegressionLine](types.md#kderegressionline) +- [Label](types.md#label) +- [Legend](types.md#legend) +- [lightTheme](theme.md#lighttheme) +- [Line](chart-types.md#line) +- [lineAdvancedPipeline](pipeline.md#lineadvancedpipeline) +- [LINEAR_AXIS_INNER_OFFSET_TOP](pipeline.md#linear_axis_inner_offset_top) +- [LineAreaAnimation](types.md#lineareaanimation) +- [LineAreaAnimationLoop](types.md#lineareaanimationloop) +- [LineAreaAnimationParams](types.md#lineareaanimationparams) +- [LineAreaAppearAnimation](types.md#lineareaappearanimation) +- [LineAreaLoopAnimation](types.md#linearealoopanimation) +- [LineAreaLoopEffect](types.md#linearealoopeffect) +- [LineAreaUpdateAnimation](types.md#lineareaupdateanimation) +- [LinearRegressionLine](types.md#linearregressionline) +- [LineConfig](types.md#lineconfig) +- [LineDimension](types.md#linedimension) +- [LineMeasure](types.md#linemeasure) +- [lineSpecPipeline](pipeline.md#linespecpipeline) +- [LineStyle](types.md#linestyle) +- [ListTableSpecPipe](pipeline.md#listtablespecpipe) +- [ListTableSpecPipeline](pipeline.md#listtablespecpipeline) +- [Locale](i18n.md#locale) +- [LOCALES](i18n.md#locales) +- [LogisticRegressionLine](types.md#logisticregressionline) +- [LowerWhisker](data.md#lowerwhisker) +- [LowessRegressionLine](types.md#lowessregressionline) +- [MarkStyle](types.md#markstyle) +- [matchDynamicFilterResult](data.md#matchdynamicfilterresult) +- [matchesFieldSelector](data.md#matchesfieldselector) +- [Measure](types.md#measure) +- [measureDepth](pipeline.md#measuredepth) +- [MeasureEncoding](types.md#measureencoding) +- [MeasureEncodingEnum](types.md#measureencodingenum) +- [MeasureGroup](types.md#measuregroup) +- [MeasureId](data.md#measureid) +- [MeasureName](data.md#measurename) +- [Measures](types.md#measures) +- [MeasureSelector](types.md#measureselector) +- [MeasureTree](types.md#measuretree) +- [MedianMeasureId](data.md#medianmeasureid) +- [NoEffectAtmosphereConfig](types.md#noeffectatmosphereconfig) +- [NumFormat](types.md#numformat) +- [ORIGINAL_DATA](data.md#original_data) +- [OutliersMeasureId](data.md#outliersmeasureid) +- [OutlierStyle](types.md#outlierstyle) +- [Page](types.md#page) +- [PartialDatumRes](types.md#partialdatumres) +- [PartialDatumSelector](types.md#partialdatumselector) +- [Pie](chart-types.md#pie) +- [pieAdvancedPipeline](pipeline.md#pieadvancedpipeline) +- [PieConfig](types.md#pieconfig) +- [PieDimension](types.md#piedimension) +- [PieGeometry](types.md#piegeometry) +- [PieLabel](types.md#pielabel) +- [PieLikeAnimation](types.md#pielikeanimation) +- [PieLikeAnimationLoop](types.md#pielikeanimationloop) +- [PieLikeAnimationParams](types.md#pielikeanimationparams) +- [PieLikeAppearAnimation](types.md#pielikeappearanimation) +- [PieLikeLoopAnimation](types.md#pielikeloopanimation) +- [PieLikeLoopEffect](types.md#pielikeloopeffect) +- [PieLikeUpdateAnimation](types.md#pielikeupdateanimation) +- [PieMeasure](types.md#piemeasure) +- [pieSpecPipeline](pipeline.md#piespecpipeline) +- [PieStyle](types.md#piestyle) +- [Pipe](pipeline.md#pipe) +- [PivotChartGridConfig](types.md#pivotchartgridconfig) +- [PivotChartSpecPipe](pipeline.md#pivotchartspecpipe) +- [PivotChartSpecPipeline](pipeline.md#pivotchartspecpipeline) +- [PivotTable](chart-types.md#pivottable) +- [pivotTableAdvancedPipeline](pipeline.md#pivottableadvancedpipeline) +- [PivotTableConfig](types.md#pivottableconfig) +- [PivotTableSpecPipe](pipeline.md#pivottablespecpipe) +- [pivotTableSpecPipeline](pipeline.md#pivottablespecpipeline) +- [PivotTableSpecPipeline](pipeline.md#pivottablespecpipeline-1) +- [PivotTableTotals](types.md#pivottabletotals) +- [Player](types.md#player) +- [PlayerEncoding](data.md#playerencoding) +- [PointAtmosphereConfig](types.md#pointatmosphereconfig) +- [PointAtmosphereEffect](types.md#pointatmosphereeffect) +- [PointStyle](types.md#pointstyle) +- [PolynomialRegressionLine](types.md#polynomialregressionline) +- [preorderTraverse](pipeline.md#preordertraverse) +- [Q1MeasureValue](data.md#q1measurevalue) +- [Q3MeasureValue](data.md#q3measurevalue) +- [RaceBar](chart-types.md#racebar) +- [raceBarAdvancedPipeline](pipeline.md#racebaradvancedpipeline) +- [RaceBarDimension](types.md#racebardimension) +- [RaceBarMeasure](types.md#racebarmeasure) +- [RaceBarParallelDimension](types.md#racebarparalleldimension) +- [RaceBarPercentDimension](types.md#racebarpercentdimension) +- [raceBarSpecPipeline](pipeline.md#racebarspecpipeline) +- [RaceColumn](chart-types.md#racecolumn) +- [raceColumnAdvancedPipeline](pipeline.md#racecolumnadvancedpipeline) +- [RaceColumnDimension](types.md#racecolumndimension) +- [RaceColumnParallelDimension](types.md#racecolumnparalleldimension) +- [RaceColumnPercentDimension](types.md#racecolumnpercentdimension) +- [raceColumnSpecPipeline](pipeline.md#racecolumnspecpipeline) +- [RaceDonut](chart-types.md#racedonut) +- [raceDonutAdvancedPipeline](pipeline.md#racedonutadvancedpipeline) +- [RaceDonutDimension](types.md#racedonutdimension) +- [RaceDonutMeasure](types.md#racedonutmeasure) +- [raceDonutSpecPipeline](pipeline.md#racedonutspecpipeline) +- [RaceLine](chart-types.md#raceline) +- [raceLineAdvancedPipeline](pipeline.md#racelineadvancedpipeline) +- [raceLineSpecPipeline](pipeline.md#racelinespecpipeline) +- [RacePie](chart-types.md#racepie) +- [racePieAdvancedPipeline](pipeline.md#racepieadvancedpipeline) +- [RacePieDimension](types.md#racepiedimension) +- [RacePieMeasure](types.md#racepiemeasure) +- [racePieSpecPipeline](pipeline.md#racepiespecpipeline) +- [RaceScatter](chart-types.md#racescatter) +- [raceScatterAdvancedPipeline](pipeline.md#racescatteradvancedpipeline) +- [RaceScatterDimension](types.md#racescatterdimension) +- [raceScatterSpecPipeline](pipeline.md#racescatterspecpipeline) +- [Radar](chart-types.md#radar) +- [radarAdvancedPipeline](pipeline.md#radaradvancedpipeline) +- [RadarAnimation](types.md#radaranimation) +- [RadarAnimationLoop](types.md#radaranimationloop) +- [RadarAnimationParams](types.md#radaranimationparams) +- [RadarAppearAnimation](types.md#radarappearanimation) +- [RadarConfig](types.md#radarconfig) +- [RadarDimension](types.md#radardimension) +- [RadarMeasure](types.md#radarmeasure) +- [radarSpecPipeline](pipeline.md#radarspecpipeline) +- [RadarUpdateAnimation](types.md#radarupdateanimation) +- [RegionPadding](types.md#regionpadding) +- [registerAll](register.md#registerall) +- [registerArea](register.md#registerarea) +- [registerAreaPercent](register.md#registerareapercent) +- [registerBar](register.md#registerbar) +- [registerBarParallel](register.md#registerbarparallel) +- [registerBarPercent](register.md#registerbarpercent) +- [registerBoxPlot](register.md#registerboxplot) +- [registerColumn](register.md#registercolumn) +- [registerColumnParallel](register.md#registercolumnparallel) +- [registerColumnPercent](register.md#registercolumnpercent) +- [registerCustomTheme](register.md#registercustomtheme) +- [registerDarkTheme](register.md#registerdarktheme) +- [registerDonut](register.md#registerdonut) +- [registerDualAxis](register.md#registerdualaxis) +- [registerFunnel](register.md#registerfunnel) +- [registerHeatmap](register.md#registerheatmap) +- [registerHierarchySankey](register.md#registerhierarchysankey) +- [registerHistogram](register.md#registerhistogram) +- [registerLightTheme](register.md#registerlighttheme) +- [registerLine](register.md#registerline) +- [registerPie](register.md#registerpie) +- [registerPivotTable](register.md#registerpivottable) +- [registerRadar](register.md#registerradar) +- [registerRose](register.md#registerrose) +- [registerRoseParallel](register.md#registerroseparallel) +- [registerSankey](register.md#registersankey) +- [registerScatter](register.md#registerscatter) +- [registerTable](register.md#registertable) +- [registerTokenTheme](theme.md#registertokentheme) +- [RegisterTokenThemeOptions](theme.md#registertokenthemeoptions) +- [registerTokenThemes](theme.md#registertokenthemes) +- [RegressionLineConfig](types.md#regressionlineconfig) +- [replaceNullToUndefined](pipeline.md#replacenulltoundefined) +- [revisedBoxPlotFieldKey](pipeline.md#revisedboxplotfieldkey) +- [Rose](chart-types.md#rose) +- [roseAdvancedPipeline](pipeline.md#roseadvancedpipeline) +- [RoseConfig](types.md#roseconfig) +- [RoseDimension](types.md#rosedimension) +- [RoseMeasure](types.md#rosemeasure) +- [RoseParallel](chart-types.md#roseparallel) +- [roseParallelAdvancedPipeline](pipeline.md#roseparalleladvancedpipeline) +- [RoseParallelConfig](types.md#roseparallelconfig) +- [RoseParallelDimension](types.md#roseparalleldimension) +- [RoseParallelMeasure](types.md#roseparallelmeasure) +- [roseParallelSpecPipeline](pipeline.md#roseparallelspecpipeline) +- [roseSpecPipeline](pipeline.md#rosespecpipeline) +- [RowOrColumnTotalConfig](types.md#roworcolumntotalconfig) +- [RowWithFieldRes](types.md#rowwithfieldres) +- [Sankey](chart-types.md#sankey) +- [sankeyAdvancedPipeline](pipeline.md#sankeyadvancedpipeline) +- [SankeyConfig](types.md#sankeyconfig) +- [SankeyDimension](types.md#sankeydimension) +- [SankeyMeasure](types.md#sankeymeasure) +- [sankeySpecPipeline](pipeline.md#sankeyspecpipeline) +- [Scatter](chart-types.md#scatter) +- [scatterAdvancedPipeline](pipeline.md#scatteradvancedpipeline) +- [ScatterAnimation](types.md#scatteranimation) +- [ScatterAnimationLoop](types.md#scatteranimationloop) +- [ScatterAnimationParams](types.md#scatteranimationparams) +- [ScatterAppearAnimation](types.md#scatterappearanimation) +- [ScatterConfig](types.md#scatterconfig) +- [ScatterDimension](types.md#scatterdimension) +- [ScatterLoopAnimation](types.md#scatterloopanimation) +- [ScatterLoopEffect](types.md#scatterloopeffect) +- [ScatterMeasure](types.md#scattermeasure) +- [scatterSpecPipeline](pipeline.md#scatterspecpipeline) +- [ScatterUpdateAnimation](types.md#scatterupdateanimation) +- [selectByDmension](data.md#selectbydmension) +- [selectByField](data.md#selectbyfield) +- [selectByMeasure](data.md#selectbymeasure) +- [selectByPartial](data.md#selectbypartial) +- [selectByValue](data.md#selectbyvalue) +- [selector](data.md#selector) +- [Selector](types.md#selector) +- [Selectors](types.md#selectors) +- [selectorWithDynamicFilter](data.md#selectorwithdynamicfilter) +- [Separator](data.md#separator) +- [Sort](types.md#sort) +- [SortLegend](types.md#sortlegend) +- [SourceEncoding](data.md#sourceencoding) +- [Spec](builder.md#spec) +- [SpecPipe](pipeline.md#specpipe) +- [SpecPipeline](pipeline.md#specpipeline) +- [SpecPipelineContext](pipeline.md#specpipelinecontext) +- [StackCornerRadius](types.md#stackcornerradius) +- [Sunburst](chart-types.md#sunburst) +- [sunburstAdvancedPipeline](pipeline.md#sunburstadvancedpipeline) +- [SunburstConfig](types.md#sunburstconfig) +- [sunburstSpecPipeline](pipeline.md#sunburstspecpipeline) +- [Table](chart-types.md#table) +- [tableAdvancedPipeline](pipeline.md#tableadvancedpipeline) +- [TableConfig](types.md#tableconfig) +- [TableDimension](types.md#tabledimension) +- [TableDynamicFilter](types.md#tabledynamicfilter) +- [TableMeasure](types.md#tablemeasure) +- [tableSpecPipeline](pipeline.md#tablespecpipeline) +- [TargetEncoding](data.md#targetencoding) +- [terminateWorkerPool](pipeline.md#terminateworkerpool) +- [Theme](types.md#theme) +- [TimeFormat](types.md#timeformat) +- [TimeGranularity](types.md#timegranularity) +- [TokenThemeBase](theme.md#tokenthemebase) +- [TokenThemeDefinition](theme.md#tokenthemedefinition) +- [TokenThemeRegistry](theme.md#tokenthemeregistry) +- [Tooltip](types.md#tooltip) +- [TooltipConfig](types.md#tooltipconfig) +- [TotalType](types.md#totaltype) +- [TranslateRecordType](i18n.md#translaterecordtype) +- [TreeMap](chart-types.md#treemap) +- [treeMapAdvancedPipeline](pipeline.md#treemapadvancedpipeline) +- [TreeMapConfig](types.md#treemapconfig) +- [treeMapSpecPipeline](pipeline.md#treemapspecpipeline) +- [unfoldDimensions](data.md#unfolddimensions) +- [UnfoldInfo](types.md#unfoldinfo) +- [updateAdvanced](register.md#updateadvanced) +- [updateSpec](register.md#updatespec) +- [UpperWhisker](data.md#upperwhisker) +- [validateCodeSafety](pipeline.md#validatecodesafety) +- [ValueDynamicFilter](types.md#valuedynamicfilter) +- [ValueSelector](types.md#valueselector) +- [VChartSpecPipe](pipeline.md#vchartspecpipe) +- [VChartSpecPipeline](pipeline.md#vchartspecpipeline) +- [VSeed](types.md#vseed) +- [VSeedBuilder](builder.md#vseedbuilder) +- [VSeedDSL](types.md#vseeddsl) +- [WhiskersConfig](types.md#whiskersconfig) +- [XBandAxis](types.md#xbandaxis) +- [XEncoding](data.md#xencoding) +- [XLinearAxis](types.md#xlinearaxis) +- [YBandAxis](types.md#ybandaxis) +- [YEncoding](data.md#yencoding) +- [YLinearAxis](types.md#ylinearaxis) +- [zAdvancedVSeed](schemas.md#zadvancedvseed) +- [zAnalysis](schemas.md#zanalysis) +- [zAnnotation](schemas.md#zannotation) +- [zAnnotationArea](schemas.md#zannotationarea) +- [zAnnotationAreaConfig](schemas.md#zannotationareaconfig) +- [zAnnotationConfig](schemas.md#zannotationconfig) +- [zAnnotationDifferenceLine](schemas.md#zannotationdifferenceline) +- [zAnnotationDifferenceLineConfig](schemas.md#zannotationdifferencelineconfig) +- [zAnnotationHorizontalLine](schemas.md#zannotationhorizontalline) +- [zAnnotationHorizontalLineConfig](schemas.md#zannotationhorizontallineconfig) +- [zAnnotationPoint](schemas.md#zannotationpoint) +- [zAnnotationPointConfig](schemas.md#zannotationpointconfig) +- [zAnnotationVerticalLine](schemas.md#zannotationverticalline) +- [zAnnotationVerticalLineConfig](schemas.md#zannotationverticallineconfig) +- [zArea](schemas.md#zarea) +- [zAreaConfig](schemas.md#zareaconfig) +- [zAreaPercent](schemas.md#zareapercent) +- [zAreaPercentConfig](schemas.md#zareapercentconfig) +- [zAreaSelector](schemas.md#zareaselector) +- [zAreaSelectors](schemas.md#zareaselectors) +- [zAreaStyle](schemas.md#zareastyle) +- [zBackgroundColor](schemas.md#zbackgroundcolor) +- [zBar](schemas.md#zbar) +- [zBarConfig](schemas.md#zbarconfig) +- [zBarGapInGroup](schemas.md#zbargapingroup) +- [zBarLikeAnimation](schemas.md#zbarlikeanimation) +- [zBarMaxWidth](schemas.md#zbarmaxwidth) +- [zBarParallel](schemas.md#zbarparallel) +- [zBarParallelConfig](schemas.md#zbarparallelconfig) +- [zBarPercent](schemas.md#zbarpercent) +- [zBarPercentConfig](schemas.md#zbarpercentconfig) +- [zBarStyle](schemas.md#zbarstyle) +- [zBodyCellStyle](schemas.md#zbodycellstyle) +- [zBoxGapInGroup](schemas.md#zboxgapingroup) +- [zBoxMaxWidth](schemas.md#zboxmaxwidth) +- [zBoxPlot](schemas.md#zboxplot) +- [zBoxPlotStyle](schemas.md#zboxplotstyle) +- [zBrush](schemas.md#zbrush) +- [zBrushConfig](schemas.md#zbrushconfig) +- [zCellSelector](schemas.md#zcellselector) +- [zCenterText](schemas.md#zcentertext) +- [zCenterTextConfig](schemas.md#zcentertextconfig) +- [zChartDynamicFilter](schemas.md#zchartdynamicfilter) +- [zChartType](schemas.md#zcharttype) +- [zCirclePacking](schemas.md#zcirclepacking) +- [zCirclePackingConfig](schemas.md#zcirclepackingconfig) +- [zColor](schemas.md#zcolor) +- [zColorLegend](schemas.md#zcolorlegend) +- [zColumn](schemas.md#zcolumn) +- [zColumnConfig](schemas.md#zcolumnconfig) +- [zColumnParallel](schemas.md#zcolumnparallel) +- [zColumnParallelConfig](schemas.md#zcolumnparallelconfig) +- [zColumnPercent](schemas.md#zcolumnpercent) +- [zColumnPercentConfig](schemas.md#zcolumnpercentconfig) +- [zConfig](schemas.md#zconfig) +- [zCornerRadius](schemas.md#zcornerradius) +- [zCrosshairLine](schemas.md#zcrosshairline) +- [zCrosshairRect](schemas.md#zcrosshairrect) +- [zCustomTheme](schemas.md#zcustomtheme) +- [zCustomThemeConfig](schemas.md#zcustomthemeconfig) +- [zDataset](schemas.md#zdataset) +- [zDatasetReshapeInfo](schemas.md#zdatasetreshapeinfo) +- [zDatum](schemas.md#zdatum) +- [zDifferenceAnchor](schemas.md#zdifferenceanchor) +- [zDifferenceSelector](schemas.md#zdifferenceselector) +- [zDifferenceSelectors](schemas.md#zdifferenceselectors) +- [zDimension](schemas.md#zdimension) +- [zDimensionEncoding](schemas.md#zdimensionencoding) +- [zDimensionGroup](schemas.md#zdimensiongroup) +- [zDimensionLinkage](schemas.md#zdimensionlinkage) +- [zDimensions](schemas.md#zdimensions) +- [zDimensionSelector](schemas.md#zdimensionselector) +- [zDimensionTree](schemas.md#zdimensiontree) +- [zDonut](schemas.md#zdonut) +- [zDonutConfig](schemas.md#zdonutconfig) +- [zDualAxis](schemas.md#zdualaxis) +- [zDualAxisConfig](schemas.md#zdualaxisconfig) +- [zDualMeasure](schemas.md#zdualmeasure) +- [zDualMeasures](schemas.md#zdualmeasures) +- [zDynamicFilter](schemas.md#zdynamicfilter) +- [zEcdfRegressionLine](schemas.md#zecdfregressionline) +- [zEncoding](schemas.md#zencoding) +- [zFieldSelector](schemas.md#zfieldselector) +- [zFoldInfo](schemas.md#zfoldinfo) +- [zFunnel](schemas.md#zfunnel) +- [zFunnelConfig](schemas.md#zfunnelconfig) +- [zFunnelTransform](schemas.md#zfunneltransform) +- [zHeatmap](schemas.md#zheatmap) +- [zHeatmapConfig](schemas.md#zheatmapconfig) +- [zHierarchySankey](schemas.md#zhierarchysankey) +- [zHierarchySankeyConfig](schemas.md#zhierarchysankeyconfig) +- [zHistogram](schemas.md#zhistogram) +- [zKdeRegressionLine](schemas.md#zkderegressionline) +- [zLabel](schemas.md#zlabel) +- [zLegend](schemas.md#zlegend) +- [zLine](schemas.md#zline) +- [zLinearColor](schemas.md#zlinearcolor) +- [zLineAreaAnimation](schemas.md#zlineareaanimation) +- [zLinearRegressionLine](schemas.md#zlinearregressionline) +- [zLineConfig](schemas.md#zlineconfig) +- [zLineStyle](schemas.md#zlinestyle) +- [zLocale](schemas.md#zlocale) +- [zLogisticRegressionLine](schemas.md#zlogisticregressionline) +- [zLowessRegressionLine](schemas.md#zlowessregressionline) +- [zMarkStyle](schemas.md#zmarkstyle) +- [zMeasure](schemas.md#zmeasure) +- [zMeasureEncoding](schemas.md#zmeasureencoding) +- [zMeasureGroup](schemas.md#zmeasuregroup) +- [zMeasures](schemas.md#zmeasures) +- [zMeasureSelector](schemas.md#zmeasureselector) +- [zMeasureTree](schemas.md#zmeasuretree) +- [zNumFormat](schemas.md#znumformat) +- [zOutlierStyle](schemas.md#zoutlierstyle) +- [zPage](schemas.md#zpage) +- [zPartialSelector](schemas.md#zpartialselector) +- [zPie](schemas.md#zpie) +- [zPieConfig](schemas.md#zpieconfig) +- [zPieGeometry](schemas.md#zpiegeometry) +- [zPieLabel](schemas.md#zpielabel) +- [zPieLikeAnimation](schemas.md#zpielikeanimation) +- [zPieStyle](schemas.md#zpiestyle) +- [zPivotChartGridConfig](schemas.md#zpivotchartgridconfig) +- [zPivotTable](schemas.md#zpivottable) +- [zPivotTableConfig](schemas.md#zpivottableconfig) +- [zPivotTableTotals](schemas.md#zpivottabletotals) +- [zPlayer](schemas.md#zplayer) +- [zPointStyle](schemas.md#zpointstyle) +- [zPolynomialRegressionLine](schemas.md#zpolynomialregressionline) +- [zRaceBar](schemas.md#zracebar) +- [zRaceColumn](schemas.md#zracecolumn) +- [zRaceDonut](schemas.md#zracedonut) +- [zRaceLine](schemas.md#zraceline) +- [zRacePie](schemas.md#zracepie) +- [zRaceScatter](schemas.md#zracescatter) +- [zRadar](schemas.md#zradar) +- [zRadarAnimation](schemas.md#zradaranimation) +- [zRadarConfig](schemas.md#zradarconfig) +- [zRegionPadding](schemas.md#zregionpadding) +- [zRegressionLine](schemas.md#zregressionline) +- [zRose](schemas.md#zrose) +- [zRoseConfig](schemas.md#zroseconfig) +- [zRoseParallel](schemas.md#zroseparallel) +- [zRoseParallelConfig](schemas.md#zroseparallelconfig) +- [zRowOrColumnTotalConfig](schemas.md#zroworcolumntotalconfig) +- [zSankey](schemas.md#zsankey) +- [zSankeyConfig](schemas.md#zsankeyconfig) +- [zScatter](schemas.md#zscatter) +- [zScatterAnimation](schemas.md#zscatteranimation) +- [zScatterConfig](schemas.md#zscatterconfig) +- [zSelector](schemas.md#zselector) +- [zSelectors](schemas.md#zselectors) +- [zSort](schemas.md#zsort) +- [zSortLegend](schemas.md#zsortlegend) +- [zStackCornerRadius](schemas.md#zstackcornerradius) +- [zSunburst](schemas.md#zsunburst) +- [zSunburstConfig](schemas.md#zsunburstconfig) +- [zTable](schemas.md#ztable) +- [zTableConfig](schemas.md#ztableconfig) +- [zTableDynamicFilter](schemas.md#ztabledynamicfilter) +- [zTheme](schemas.md#ztheme) +- [zTimeFormat](schemas.md#ztimeformat) +- [zTokenThemeDefinition](schemas.md#ztokenthemedefinition) +- [zTooltip](schemas.md#ztooltip) +- [zTotalType](schemas.md#ztotaltype) +- [zTreeMap](schemas.md#ztreemap) +- [zTreeMapConfig](schemas.md#ztreemapconfig) +- [zUnfoldInfo](schemas.md#zunfoldinfo) +- [zValueDynamicFilter](schemas.md#zvaluedynamicfilter) +- [zVSeed](schemas.md#zvseed) +- [zWhiskersConfig](schemas.md#zwhiskersconfig) +- [zXBandAxis](schemas.md#zxbandaxis) +- [zXLinearAxis](schemas.md#zxlinearaxis) +- [zYBandAxis](schemas.md#zybandaxis) +- [zYLinearAxis](schemas.md#zylinearaxis) diff --git a/skills/light-dashboard/references/api/vseed/pipeline.md b/skills/light-dashboard/references/api/vseed/pipeline.md new file mode 100644 index 0000000000..d176acd69b --- /dev/null +++ b/skills/light-dashboard/references/api/vseed/pipeline.md @@ -0,0 +1,2175 @@ +# 构建管线类型 + +[API 索引](./index.md) + +- [AdvancedPipe](pipeline.md#advancedpipe) +- [AdvancedPipeline](pipeline.md#advancedpipeline) +- [AdvancedPipelineContext](pipeline.md#advancedpipelinecontext) +- [AliasFormatter](pipeline.md#aliasformatter) +- [AliasMap](pipeline.md#aliasmap) +- [ANNOTATION_Z_INDEX](pipeline.md#annotation_z_index) +- [areaAdvancedPipeline](pipeline.md#areaadvancedpipeline) +- [areaPercentAdvancedPipeline](pipeline.md#areapercentadvancedpipeline) +- [areaPercentSpecPipeline](pipeline.md#areapercentspecpipeline) +- [areaSpecPipeline](pipeline.md#areaspecpipeline) +- [autoFormatter](pipeline.md#autoformatter) +- [autoNumFormatter](pipeline.md#autonumformatter) +- [AXIS_LABEL_SPACE](pipeline.md#axis_label_space) +- [BAND_AXIS_INNER_OFFSET_IN_PIVOT](pipeline.md#band_axis_inner_offset_in_pivot) +- [barAdvancedPipeline](pipeline.md#baradvancedpipeline) +- [barParallelAdvancedPipeline](pipeline.md#barparalleladvancedpipeline) +- [barParallelSpecPipeline](pipeline.md#barparallelspecpipeline) +- [barPercentAdvancedPipeline](pipeline.md#barpercentadvancedpipeline) +- [barPercentSpecPipeline](pipeline.md#barpercentspecpipeline) +- [barSpecPipeline](pipeline.md#barspecpipeline) +- [boxplotAdvancedPipeline](pipeline.md#boxplotadvancedpipeline) +- [boxplotSpecPipeline](pipeline.md#boxplotspecpipeline) +- [BUILTIN_UTILS_SOURCE](pipeline.md#builtin_utils_source) +- [ChartTypeEnum](pipeline.md#charttypeenum) +- [checkVSeed](pipeline.md#checkvseed) +- [circlePackingAdvancedPipeline](pipeline.md#circlepackingadvancedpipeline) +- [circlePackingSpecPipeline](pipeline.md#circlepackingspecpipeline) +- [columnAdvancedPipeline](pipeline.md#columnadvancedpipeline) +- [columnParallelAdvancedPipeline](pipeline.md#columnparalleladvancedpipeline) +- [columnParallelSpecPipeline](pipeline.md#columnparallelspecpipeline) +- [columnPercentAdvancedPipeline](pipeline.md#columnpercentadvancedpipeline) +- [columnPercentSpecPipeline](pipeline.md#columnpercentspecpipeline) +- [columnSpecPipeline](pipeline.md#columnspecpipeline) +- [condition](pipeline.md#condition) +- [Condition](pipeline.md#condition-1) +- [createAliasFormatter](pipeline.md#createaliasformatter) +- [createFormatter](pipeline.md#createformatter) +- [createFormatterByDimension](pipeline.md#createformatterbydimension) +- [createFormatterByMeasure](pipeline.md#createformatterbymeasure) +- [createNumFormatter](pipeline.md#createnumformatter) +- [createTimeFormatter](pipeline.md#createtimeformatter) +- [DATUM_HIDE_KEY](pipeline.md#datum_hide_key) +- [DEFAULT_DUAL_CHART_TYPE](pipeline.md#default_dual_chart_type) +- [DEFAULT_PARENT_ID](pipeline.md#default_parent_id) +- [deleteDimensionTreeByCallback](pipeline.md#deletedimensiontreebycallback) +- [deleteMeasureTreeByCallback](pipeline.md#deletemeasuretreebycallback) +- [donutAdvancedPipeline](pipeline.md#donutadvancedpipeline) +- [donutSpecPipeline](pipeline.md#donutspecpipeline) +- [DUAL_AXIS_CHART_COLUMN_Z_INDEX](pipeline.md#dual_axis_chart_column_z_index) +- [DUAL_AXIS_CHART_NON_COLUMN_Z_INDEX](pipeline.md#dual_axis_chart_non_column_z_index) +- [DUAL_AXIS_LABEL_Z_INDEX](pipeline.md#dual_axis_label_z_index) +- [dualAxisAdvancedPipeline](pipeline.md#dualaxisadvancedpipeline) +- [dualAxisSpecPipeline](pipeline.md#dualaxisspecpipeline) +- [execPipeline](pipeline.md#execpipeline) +- [ExecPipelineType](pipeline.md#execpipelinetype) +- [executeFilterCode](pipeline.md#executefiltercode) +- [findAllMeasures](pipeline.md#findallmeasures) +- [findFirstMeasure](pipeline.md#findfirstmeasure) +- [findMeasureById](pipeline.md#findmeasurebyid) +- [findTreeNodesBy](pipeline.md#findtreenodesby) +- [flatReshapeMeasures](pipeline.md#flatreshapemeasures) +- [funnelAdvancedPipeline](pipeline.md#funneladvancedpipeline) +- [funnelSpecPipeline](pipeline.md#funnelspecpipeline) +- [HAS_BUILTIN_UTILS](pipeline.md#has_builtin_utils) +- [hasMultipleMeasureInSingleView](pipeline.md#hasmultiplemeasureinsingleview) +- [heatmapAdvancedPipeline](pipeline.md#heatmapadvancedpipeline) +- [heatmapSpecPipeline](pipeline.md#heatmapspecpipeline) +- [hierarchySankeyAdvancedPipeline](pipeline.md#hierarchysankeyadvancedpipeline) +- [hierarchySankeySpecPipeline](pipeline.md#hierarchysankeyspecpipeline) +- [histogramAdvancedPipeline](pipeline.md#histogramadvancedpipeline) +- [histogramSpecPipeline](pipeline.md#histogramspecpipeline) +- [initializeWorkerPool](pipeline.md#initializeworkerpool) +- [isAreaPercent](pipeline.md#isareapercent) +- [isBarLikeChart](pipeline.md#isbarlikechart) +- [isBarPercent](pipeline.md#isbarpercent) +- [isColumnPercent](pipeline.md#iscolumnpercent) +- [isCombination](pipeline.md#iscombination) +- [isDimension](pipeline.md#isdimension) +- [isDimensionGroup](pipeline.md#isdimensiongroup) +- [isDualAxisChartType](pipeline.md#isdualaxischarttype) +- [isHierarchySankey](pipeline.md#ishierarchysankey) +- [isMeasure](pipeline.md#ismeasure) +- [isMeasureGroup](pipeline.md#ismeasuregroup) +- [isMeasures](pipeline.md#ismeasures) +- [isPivot](pipeline.md#ispivot) +- [isPivotChart](pipeline.md#ispivotchart) +- [isPivotTable](pipeline.md#ispivottable) +- [isPositionMeasure](pipeline.md#ispositionmeasure) +- [isRadar](pipeline.md#isradar) +- [isRectungularCoordinate](pipeline.md#isrectungularcoordinate) +- [isSankey](pipeline.md#issankey) +- [isTable](pipeline.md#istable) +- [isVChart](pipeline.md#isvchart) +- [isVTable](pipeline.md#isvtable) +- [lineAdvancedPipeline](pipeline.md#lineadvancedpipeline) +- [LINEAR_AXIS_INNER_OFFSET_TOP](pipeline.md#linear_axis_inner_offset_top) +- [lineSpecPipeline](pipeline.md#linespecpipeline) +- [ListTableSpecPipe](pipeline.md#listtablespecpipe) +- [ListTableSpecPipeline](pipeline.md#listtablespecpipeline) +- [measureDepth](pipeline.md#measuredepth) +- [NullToUndefined](pipeline.md#nulltoundefined) +- [pieAdvancedPipeline](pipeline.md#pieadvancedpipeline) +- [pieSpecPipeline](pipeline.md#piespecpipeline) +- [Pipe](pipeline.md#pipe) +- [PivotChartSpecPipe](pipeline.md#pivotchartspecpipe) +- [PivotChartSpecPipeline](pipeline.md#pivotchartspecpipeline) +- [pivotTableAdvancedPipeline](pipeline.md#pivottableadvancedpipeline) +- [PivotTableSpecPipe](pipeline.md#pivottablespecpipe) +- [pivotTableSpecPipeline](pipeline.md#pivottablespecpipeline) +- [PivotTableSpecPipeline](pipeline.md#pivottablespecpipeline-1) +- [preorderTraverse](pipeline.md#preordertraverse) +- [raceBarAdvancedPipeline](pipeline.md#racebaradvancedpipeline) +- [raceBarSpecPipeline](pipeline.md#racebarspecpipeline) +- [raceColumnAdvancedPipeline](pipeline.md#racecolumnadvancedpipeline) +- [raceColumnSpecPipeline](pipeline.md#racecolumnspecpipeline) +- [raceDonutAdvancedPipeline](pipeline.md#racedonutadvancedpipeline) +- [raceDonutSpecPipeline](pipeline.md#racedonutspecpipeline) +- [raceLineAdvancedPipeline](pipeline.md#racelineadvancedpipeline) +- [raceLineSpecPipeline](pipeline.md#racelinespecpipeline) +- [racePieAdvancedPipeline](pipeline.md#racepieadvancedpipeline) +- [racePieSpecPipeline](pipeline.md#racepiespecpipeline) +- [raceScatterAdvancedPipeline](pipeline.md#racescatteradvancedpipeline) +- [raceScatterSpecPipeline](pipeline.md#racescatterspecpipeline) +- [radarAdvancedPipeline](pipeline.md#radaradvancedpipeline) +- [radarSpecPipeline](pipeline.md#radarspecpipeline) +- [replaceNullToUndefined](pipeline.md#replacenulltoundefined) +- [revisedBoxPlotFieldKey](pipeline.md#revisedboxplotfieldkey) +- [roseAdvancedPipeline](pipeline.md#roseadvancedpipeline) +- [roseParallelAdvancedPipeline](pipeline.md#roseparalleladvancedpipeline) +- [roseParallelSpecPipeline](pipeline.md#roseparallelspecpipeline) +- [roseSpecPipeline](pipeline.md#rosespecpipeline) +- [sankeyAdvancedPipeline](pipeline.md#sankeyadvancedpipeline) +- [sankeySpecPipeline](pipeline.md#sankeyspecpipeline) +- [scatterAdvancedPipeline](pipeline.md#scatteradvancedpipeline) +- [scatterSpecPipeline](pipeline.md#scatterspecpipeline) +- [SpecPipe](pipeline.md#specpipe) +- [SpecPipeline](pipeline.md#specpipeline) +- [SpecPipelineContext](pipeline.md#specpipelinecontext) +- [sunburstAdvancedPipeline](pipeline.md#sunburstadvancedpipeline) +- [sunburstSpecPipeline](pipeline.md#sunburstspecpipeline) +- [tableAdvancedPipeline](pipeline.md#tableadvancedpipeline) +- [tableSpecPipeline](pipeline.md#tablespecpipeline) +- [terminateWorkerPool](pipeline.md#terminateworkerpool) +- [treeMapAdvancedPipeline](pipeline.md#treemapadvancedpipeline) +- [treeMapSpecPipeline](pipeline.md#treemapspecpipeline) +- [validateCodeSafety](pipeline.md#validatecodesafety) +- [VChartSpecPipe](pipeline.md#vchartspecpipe) +- [VChartSpecPipeline](pipeline.md#vchartspecpipeline) + +外部依赖类型使用源码中的导入名称： + +```typescript +import type { ISpec } from '@visactor/vchart' +import type { + ListTableConstructorOptions, + PivotChartConstructorOptions, + PivotTableConstructorOptions, +} from '@visactor/vtable' +``` + +## AdvancedPipe + +源码：[packages/vseed/src/types/pipeline/advancedVSeed/advancedVSeed.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/pipeline/advancedVSeed/advancedVSeed.ts) + +包导出：`AdvancedPipe` + +```typescript +export type AdvancedPipe = Pipe +``` + +关联 API：[AdvancedPipelineContext](pipeline.md#advancedpipelinecontext)、[AdvancedVSeed](types.md#advancedvseed)、[Pipe](pipeline.md#pipe) + +## AdvancedPipeline + +源码：[packages/vseed/src/types/pipeline/advancedVSeed/advancedVSeed.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/pipeline/advancedVSeed/advancedVSeed.ts) + +包导出：`AdvancedPipeline` + +```typescript +export type AdvancedPipeline = Pipe[] +``` + +关联 API：[AdvancedPipelineContext](pipeline.md#advancedpipelinecontext)、[AdvancedVSeed](types.md#advancedvseed)、[Pipe](pipeline.md#pipe) + +## AdvancedPipelineContext + +源码：[packages/vseed/src/types/pipeline/advancedVSeed/advancedVSeed.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/pipeline/advancedVSeed/advancedVSeed.ts) + +包导出：`AdvancedPipelineContext` + +```typescript +export type AdvancedPipelineContext = { + vseed: VSeed + customTheme?: CustomTheme +} +``` + +关联 API：[CustomTheme](types.md#customtheme)、[VSeed](types.md#vseed) + +## AliasFormatter + +源码：[packages/vseed/src/pipeline/utils/format/createAliasFormatter.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/utils/format/createAliasFormatter.ts) + +关联类型：通过公开 API 的签名引用，不是包入口的独立导出。 + +```typescript +type AliasFormatter = (value: string | number) => string | number +``` + +## AliasMap + +源码：[packages/vseed/src/pipeline/utils/format/createAliasFormatter.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/utils/format/createAliasFormatter.ts) + +关联类型：通过公开 API 的签名引用，不是包入口的独立导出。 + +```typescript +type AliasMap = Record< + string, + { + alias: string + } +> +``` + +## ANNOTATION_Z_INDEX + +源码：[packages/vseed/src/pipeline/utils/constant.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/utils/constant.ts) + +包导出：`ANNOTATION_Z_INDEX` + +```typescript +const ANNOTATION_Z_INDEX = 1000 +``` + +## areaAdvancedPipeline + +源码：[packages/vseed/src/pipeline/advanced/chart/pipeline/area.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/advanced/chart/pipeline/area.ts) + +包导出：`areaAdvancedPipeline` + +```typescript +const areaAdvancedPipeline: AdvancedPipeline +``` + +关联 API：[AdvancedPipeline](pipeline.md#advancedpipeline) + +## areaPercentAdvancedPipeline + +源码：[packages/vseed/src/pipeline/advanced/chart/pipeline/areaPercent.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/advanced/chart/pipeline/areaPercent.ts) + +包导出：`areaPercentAdvancedPipeline` + +```typescript +const areaPercentAdvancedPipeline: AdvancedPipeline +``` + +关联 API：[AdvancedPipeline](pipeline.md#advancedpipeline) + +## areaPercentSpecPipeline + +源码：[packages/vseed/src/pipeline/spec/chart/pipeline/areaPercent.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/spec/chart/pipeline/areaPercent.ts) + +包导出：`areaPercentSpecPipeline` + +```typescript +const areaPercentSpecPipeline: import('src/types').SpecPipe[] +``` + +关联 API：[SpecPipe](pipeline.md#specpipe) + +## areaSpecPipeline + +源码：[packages/vseed/src/pipeline/spec/chart/pipeline/area.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/spec/chart/pipeline/area.ts) + +包导出：`areaSpecPipeline` + +```typescript +const areaSpecPipeline: import('src/types').SpecPipe[] +``` + +关联 API：[SpecPipe](pipeline.md#specpipe) + +## autoFormatter + +源码：[packages/vseed/src/pipeline/utils/format/createFormatter.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/utils/format/createFormatter.ts) + +包导出：`autoFormatter` + +```typescript +const autoFormatter: (value?: number | string, locale?: Locale) => string +``` + +参数默认值： + +```typescript +// autoFormatter +locale = intl.getLocale() +``` + +关联 API：[Locale](i18n.md#locale) + +## autoNumFormatter + +源码：[packages/vseed/src/pipeline/utils/format/createNumFormatter.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/utils/format/createNumFormatter.ts) + +包导出：`autoNumFormatter` + +```typescript +const autoNumFormatter: (value?: number | string, locale?: Locale) => string +``` + +参数默认值： + +```typescript +// autoNumFormatter +locale = intl.getLocale() +``` + +关联 API：[Locale](i18n.md#locale) + +## AXIS_LABEL_SPACE + +源码：[packages/vseed/src/pipeline/utils/constant.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/utils/constant.ts) + +包导出：`AXIS_LABEL_SPACE` + +```typescript +const AXIS_LABEL_SPACE = 8 +``` + +## BAND_AXIS_INNER_OFFSET_IN_PIVOT + +源码：[packages/vseed/src/pipeline/utils/constant.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/utils/constant.ts) + +包导出：`BAND_AXIS_INNER_OFFSET_IN_PIVOT` + +```typescript +const BAND_AXIS_INNER_OFFSET_IN_PIVOT = 2 +``` + +## barAdvancedPipeline + +源码：[packages/vseed/src/pipeline/advanced/chart/pipeline/bar.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/advanced/chart/pipeline/bar.ts) + +包导出：`barAdvancedPipeline` + +```typescript +const barAdvancedPipeline: AdvancedPipeline +``` + +关联 API：[AdvancedPipeline](pipeline.md#advancedpipeline) + +## barParallelAdvancedPipeline + +源码：[packages/vseed/src/pipeline/advanced/chart/pipeline/barParallel.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/advanced/chart/pipeline/barParallel.ts) + +包导出：`barParallelAdvancedPipeline` + +```typescript +const barParallelAdvancedPipeline: AdvancedPipeline +``` + +关联 API：[AdvancedPipeline](pipeline.md#advancedpipeline) + +## barParallelSpecPipeline + +源码：[packages/vseed/src/pipeline/spec/chart/pipeline/barParallel.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/spec/chart/pipeline/barParallel.ts) + +包导出：`barParallelSpecPipeline` + +```typescript +const barParallelSpecPipeline: import('src/types').SpecPipe[] +``` + +关联 API：[SpecPipe](pipeline.md#specpipe) + +## barPercentAdvancedPipeline + +源码：[packages/vseed/src/pipeline/advanced/chart/pipeline/barPercent.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/advanced/chart/pipeline/barPercent.ts) + +包导出：`barPercentAdvancedPipeline` + +```typescript +const barPercentAdvancedPipeline: AdvancedPipeline +``` + +关联 API：[AdvancedPipeline](pipeline.md#advancedpipeline) + +## barPercentSpecPipeline + +源码：[packages/vseed/src/pipeline/spec/chart/pipeline/barPercent.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/spec/chart/pipeline/barPercent.ts) + +包导出：`barPercentSpecPipeline` + +```typescript +const barPercentSpecPipeline: import('src/types').SpecPipe[] +``` + +关联 API：[SpecPipe](pipeline.md#specpipe) + +## barSpecPipeline + +源码：[packages/vseed/src/pipeline/spec/chart/pipeline/bar.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/spec/chart/pipeline/bar.ts) + +包导出：`barSpecPipeline` + +```typescript +const barSpecPipeline: import('src/types').SpecPipe[] +``` + +关联 API：[SpecPipe](pipeline.md#specpipe) + +## boxplotAdvancedPipeline + +源码：[packages/vseed/src/pipeline/advanced/chart/pipeline/boxplot.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/advanced/chart/pipeline/boxplot.ts) + +包导出：`boxplotAdvancedPipeline` + +```typescript +const boxplotAdvancedPipeline: AdvancedPipeline +``` + +关联 API：[AdvancedPipeline](pipeline.md#advancedpipeline) + +## boxplotSpecPipeline + +源码：[packages/vseed/src/pipeline/spec/chart/pipeline/boxplot.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/spec/chart/pipeline/boxplot.ts) + +包导出：`boxplotSpecPipeline` + +```typescript +const boxplotSpecPipeline: import('src/types').SpecPipe[] +``` + +关联 API：[SpecPipe](pipeline.md#specpipe) + +## BUILTIN_UTILS_SOURCE + +源码：[packages/vseed/src/pipeline/utils/sandbox/builtin-utils.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/utils/sandbox/builtin-utils.ts) + +包导出：`BUILTIN_UTILS_SOURCE` + +```typescript +/** + * 内置工具函数库 + * @description 提供数据筛选、统计、转换等常用功能，API 与 lodash/Ramda 兼容 + */ +const BUILTIN_UTILS_SOURCE: string +``` + +## ChartTypeEnum + +源码：[packages/vseed/src/pipeline/utils/constant.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/utils/constant.ts) + +包导出：`ChartTypeEnum` + +```typescript +const ChartTypeEnum: { + readonly Table: 'table' + readonly PivotTable: 'pivotTable' + readonly Line: 'line' + readonly Column: 'column' + readonly ColumnPercent: 'columnPercent' + readonly ColumnParallel: 'columnParallel' + readonly Bar: 'bar' + readonly BarPercent: 'barPercent' + readonly BarParallel: 'barParallel' + readonly Area: 'area' + readonly AreaPercent: 'areaPercent' + readonly DualAxis: 'dualAxis' + readonly Scatter: 'scatter' + readonly Rose: 'rose' + readonly RoseParallel: 'roseParallel' + readonly Pie: 'pie' + readonly Donut: 'donut' + readonly Radar: 'radar' + readonly CirclePacking: 'circlePacking' + readonly Sankey: 'sankey' + readonly HierarchySankey: 'hierarchySankey' + readonly Sunburst: 'sunburst' + readonly TreeMap: 'treeMap' + readonly RaceBar: 'raceBar' + readonly RaceColumn: 'raceColumn' + readonly RaceScatter: 'raceScatter' + readonly RaceLine: 'raceLine' + readonly RacePie: 'racePie' + readonly RaceDonut: 'raceDonut' + readonly Funnel: 'funnel' + readonly Heatmap: 'heatmap' + readonly Boxplot: 'boxPlot' + readonly Histogram: 'histogram' +} +``` + +## checkVSeed + +源码：[packages/vseed/src/pipeline/utils/valid/checkVSeed.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/utils/valid/checkVSeed.ts) + +包导出：`checkVSeed` + +```typescript +const checkVSeed: (vseed: VSeed) => void +``` + +关联 API：[VSeed](types.md#vseed) + +## circlePackingAdvancedPipeline + +源码：[packages/vseed/src/pipeline/advanced/chart/pipeline/circlePacking.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/advanced/chart/pipeline/circlePacking.ts) + +包导出：`circlePackingAdvancedPipeline` + +```typescript +const circlePackingAdvancedPipeline: AdvancedPipeline +``` + +关联 API：[AdvancedPipeline](pipeline.md#advancedpipeline) + +## circlePackingSpecPipeline + +源码：[packages/vseed/src/pipeline/spec/chart/pipeline/circlePacking.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/spec/chart/pipeline/circlePacking.ts) + +包导出：`circlePackingSpecPipeline` + +```typescript +const circlePackingSpecPipeline: import('src/types').SpecPipe[] +``` + +关联 API：[SpecPipe](pipeline.md#specpipe) + +## columnAdvancedPipeline + +源码：[packages/vseed/src/pipeline/advanced/chart/pipeline/column.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/advanced/chart/pipeline/column.ts) + +包导出：`columnAdvancedPipeline` + +```typescript +const columnAdvancedPipeline: AdvancedPipeline +``` + +关联 API：[AdvancedPipeline](pipeline.md#advancedpipeline) + +## columnParallelAdvancedPipeline + +源码：[packages/vseed/src/pipeline/advanced/chart/pipeline/columnParallel.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/advanced/chart/pipeline/columnParallel.ts) + +包导出：`columnParallelAdvancedPipeline` + +```typescript +const columnParallelAdvancedPipeline: AdvancedPipeline +``` + +关联 API：[AdvancedPipeline](pipeline.md#advancedpipeline) + +## columnParallelSpecPipeline + +源码：[packages/vseed/src/pipeline/spec/chart/pipeline/columnParallel.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/spec/chart/pipeline/columnParallel.ts) + +包导出：`columnParallelSpecPipeline` + +```typescript +const columnParallelSpecPipeline: import('src/types').SpecPipe[] +``` + +关联 API：[SpecPipe](pipeline.md#specpipe) + +## columnPercentAdvancedPipeline + +源码：[packages/vseed/src/pipeline/advanced/chart/pipeline/columnPercent.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/advanced/chart/pipeline/columnPercent.ts) + +包导出：`columnPercentAdvancedPipeline` + +```typescript +const columnPercentAdvancedPipeline: AdvancedPipeline +``` + +关联 API：[AdvancedPipeline](pipeline.md#advancedpipeline) + +## columnPercentSpecPipeline + +源码：[packages/vseed/src/pipeline/spec/chart/pipeline/columnPercent.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/spec/chart/pipeline/columnPercent.ts) + +包导出：`columnPercentSpecPipeline` + +```typescript +const columnPercentSpecPipeline: import('src/types').SpecPipe[] +``` + +关联 API：[SpecPipe](pipeline.md#specpipe) + +## columnSpecPipeline + +源码：[packages/vseed/src/pipeline/spec/chart/pipeline/column.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/spec/chart/pipeline/column.ts) + +包导出：`columnSpecPipeline` + +```typescript +const columnSpecPipeline: import('src/types').SpecPipe[] +``` + +关联 API：[SpecPipe](pipeline.md#specpipe) + +## condition + +源码：[packages/vseed/src/pipeline/spec/chart/utils/condition.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/spec/chart/utils/condition.ts) + +包导出：`condition` + +```typescript +const condition: (condition: Condition, truePipe: T, falsePipe: T) => T +``` + +关联 API：[Condition](pipeline.md#condition-1)、[SpecPipe](pipeline.md#specpipe) + +## Condition + +源码：[packages/vseed/src/pipeline/spec/chart/utils/condition.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/spec/chart/utils/condition.ts) + +包导出：`Condition` + +```typescript +export type Condition = (context: SpecPipelineContext) => boolean +``` + +关联 API：[SpecPipelineContext](pipeline.md#specpipelinecontext) + +## createAliasFormatter + +源码：[packages/vseed/src/pipeline/utils/format/createAliasFormatter.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/utils/format/createAliasFormatter.ts) + +包导出：`createAliasFormatter` + +```typescript +/** Only retain actual translations, without capturing a dataset or reshape context. */ +const createAliasFormatter: (aliases: AliasMap) => AliasFormatter | undefined +``` + +关联 API：[AliasFormatter](pipeline.md#aliasformatter)、[AliasMap](pipeline.md#aliasmap) + +## createFormatter + +源码：[packages/vseed/src/pipeline/utils/format/createFormatter.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/utils/format/createFormatter.ts) + +包导出：`createFormatter` + +```typescript +const createFormatter: (format: Partial, locale?: Locale) => Formatter +``` + +关联 API：[Formatter](types.md#formatter)、[Locale](i18n.md#locale)、[NumFormat](types.md#numformat) + +## createFormatterByDimension + +源码：[packages/vseed/src/pipeline/utils/format/createFormatterByDimension.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/utils/format/createFormatterByDimension.ts) + +包导出：`createFormatterByDimension` + +```typescript +const createFormatterByDimension: (dimension?: Dimension, locale?: Locale) => Formatter +``` + +参数默认值： + +```typescript +// createFormatterByDimension +locale = intl.getLocale() +``` + +关联 API：[Dimension](types.md#dimension)、[Formatter](types.md#formatter)、[Locale](i18n.md#locale) + +## createFormatterByMeasure + +源码：[packages/vseed/src/pipeline/utils/format/createFormatterByMeasure.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/utils/format/createFormatterByMeasure.ts) + +包导出：`createFormatterByMeasure` + +```typescript +const createFormatterByMeasure: (measure?: Measure) => Formatter +``` + +关联 API：[Formatter](types.md#formatter)、[Measure](types.md#measure) + +## createNumFormatter + +源码：[packages/vseed/src/pipeline/utils/format/createNumFormatter.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/utils/format/createNumFormatter.ts) + +包导出：`createNumFormatter` + +```typescript +const createNumFormatter: (format?: Partial, locale?: Locale) => Formatter +``` + +参数默认值： + +```typescript +// createNumFormatter +locale = intl.getLocale() +``` + +关联 API：[Formatter](types.md#formatter)、[Locale](i18n.md#locale)、[NumFormat](types.md#numformat) + +## createTimeFormatter + +源码：[packages/vseed/src/pipeline/utils/format/createTimeFormatter.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/utils/format/createTimeFormatter.ts) + +包导出：`createTimeFormatter` + +```typescript +const createTimeFormatter: (format?: TimeFormat, fallbackLocale?: Locale) => Formatter +``` + +参数默认值： + +```typescript +// createTimeFormatter +fallbackLocale = intl.getLocale() +``` + +关联 API：[Formatter](types.md#formatter)、[Locale](i18n.md#locale)、[TimeFormat](types.md#timeformat) + +## DATUM_HIDE_KEY + +源码：[packages/vseed/src/pipeline/utils/constant.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/utils/constant.ts) + +包导出：`DATUM_HIDE_KEY` + +```typescript +const DATUM_HIDE_KEY = '__VSEED_HideItem__' +``` + +## DEFAULT_DUAL_CHART_TYPE + +源码：[packages/vseed/src/pipeline/utils/chatType.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/utils/chatType.ts) + +包导出：`DEFAULT_DUAL_CHART_TYPE` + +```typescript +/** + * 默认的双轴图图表类型配置 + */ +const DEFAULT_DUAL_CHART_TYPE: { + primary: string + secondary: string +} +``` + +## DEFAULT_PARENT_ID + +源码：[packages/vseed/src/pipeline/utils/constant.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/utils/constant.ts) + +包导出：`DEFAULT_PARENT_ID` + +```typescript +const DEFAULT_PARENT_ID = '__DefaultParentId__' +``` + +## deleteDimensionTreeByCallback + +源码：[packages/vseed/src/pipeline/utils/dimensions/delete.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/utils/dimensions/delete.ts) + +包导出：`deleteDimensionTreeByCallback` + +```typescript +/** + * @description 删除 dimensionTree 中符合 callback 条件的节点 + * @param dimensionTree 待删除的 dimensionTree + * @param callback 回调函数，用于判断是否删除当前节点 + * @returns 删除后的 dimensionTree + */ +const deleteDimensionTreeByCallback: ( + dimensionTree?: T, + callback?: (dimension: Dimension, index: number, dimensions: (Dimension | DimensionGroup)[]) => boolean, +) => T | undefined +``` + +关联 API：[Dimension](types.md#dimension)、[DimensionGroup](types.md#dimensiongroup)、[DimensionTree](types.md#dimensiontree) + +## deleteMeasureTreeByCallback + +源码：[packages/vseed/src/pipeline/utils/measures/delete.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/utils/measures/delete.ts) + +包导出：`deleteMeasureTreeByCallback` + +```typescript +/** + * @description 删除 measureTree 中符合 callback 条件的节点 + * @param measureTree 待删除的 measureTree + * @param callback 回调函数，用于判断是否删除当前节点 + * @returns 删除的度量 + */ +const deleteMeasureTreeByCallback: ( + measureTree?: T, + callback?: (measure: Measure, index: number, measures: (Measure | MeasureGroup)[]) => boolean, +) => Measure[] +``` + +关联 API：[Measure](types.md#measure)、[MeasureGroup](types.md#measuregroup)、[MeasureTree](types.md#measuretree) + +## donutAdvancedPipeline + +源码：[packages/vseed/src/pipeline/advanced/chart/pipeline/donut.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/advanced/chart/pipeline/donut.ts) + +包导出：`donutAdvancedPipeline` + +```typescript +const donutAdvancedPipeline: AdvancedPipeline +``` + +关联 API：[AdvancedPipeline](pipeline.md#advancedpipeline) + +## donutSpecPipeline + +源码：[packages/vseed/src/pipeline/spec/chart/pipeline/donut.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/spec/chart/pipeline/donut.ts) + +包导出：`donutSpecPipeline` + +```typescript +const donutSpecPipeline: import('src/types').SpecPipe[] +``` + +关联 API：[SpecPipe](pipeline.md#specpipe) + +## DUAL_AXIS_CHART_COLUMN_Z_INDEX + +源码：[packages/vseed/src/pipeline/utils/constant.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/utils/constant.ts) + +包导出：`DUAL_AXIS_CHART_COLUMN_Z_INDEX` + +```typescript +const DUAL_AXIS_CHART_COLUMN_Z_INDEX = 1000 +``` + +## DUAL_AXIS_CHART_NON_COLUMN_Z_INDEX + +源码：[packages/vseed/src/pipeline/utils/constant.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/utils/constant.ts) + +包导出：`DUAL_AXIS_CHART_NON_COLUMN_Z_INDEX` + +```typescript +const DUAL_AXIS_CHART_NON_COLUMN_Z_INDEX = 1001 +``` + +## DUAL_AXIS_LABEL_Z_INDEX + +源码：[packages/vseed/src/pipeline/utils/constant.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/utils/constant.ts) + +包导出：`DUAL_AXIS_LABEL_Z_INDEX` + +```typescript +const DUAL_AXIS_LABEL_Z_INDEX = 1002 +``` + +## dualAxisAdvancedPipeline + +源码：[packages/vseed/src/pipeline/advanced/chart/pipeline/dualAxis.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/advanced/chart/pipeline/dualAxis.ts) + +包导出：`dualAxisAdvancedPipeline` + +```typescript +const dualAxisAdvancedPipeline: AdvancedPipeline +``` + +关联 API：[AdvancedPipeline](pipeline.md#advancedpipeline) + +## dualAxisSpecPipeline + +源码：[packages/vseed/src/pipeline/spec/chart/pipeline/dualAxis.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/spec/chart/pipeline/dualAxis.ts) + +包导出：`dualAxisSpecPipeline` + +```typescript +const dualAxisSpecPipeline: import('src/types').SpecPipe[] +``` + +关联 API：[SpecPipe](pipeline.md#specpipe) + +## execPipeline + +源码：[packages/vseed/src/pipeline/utils/pipeline.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/utils/pipeline.ts) + +包导出：`execPipeline` + +```typescript +/** + * 执行pipeline, 每个pipe负责构建结果的一部分, 构建完成后得到完整的目标结果 + * @param pipeline pipeline数组, 每个pipe负责构建结果的一部分 + * @param initialValue 初始值 + * @param context 上下文 + * @returns 执行后的结果 + */ +const execPipeline: ExecPipelineType +``` + +参数默认值： + +```typescript +// execPipeline +initialValue = {} +``` + +关联 API：[ExecPipelineType](pipeline.md#execpipelinetype) + +## ExecPipelineType + +源码：[packages/vseed/src/types/pipeline/pipeline.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/pipeline/pipeline.ts) + +包导出：`ExecPipelineType` + +```typescript +export type ExecPipelineType = (pipeline: Array>, context: U, initialValue?: Partial) => T +``` + +关联 API：[Pipe](pipeline.md#pipe) + +## executeFilterCode + +源码：[packages/vseed/src/pipeline/utils/sandbox/execute.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/utils/sandbox/execute.ts) + +包导出：`executeFilterCode` + +```typescript +/** + * 代码执行函数 + * @description 使用 Worker 池和增强安全检查 + */ +export declare function executeFilterCode(options: CodeExecutionOptions): Promise +``` + +关联 API：[CodeExecutionOptions](types.md#codeexecutionoptions)、[CodeExecutionResult](types.md#codeexecutionresult) + +## findAllMeasures + +源码：[packages/vseed/src/pipeline/utils/measures/find.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/utils/measures/find.ts) + +包导出：`findAllMeasures` + +```typescript +const findAllMeasures: (measures?: MeasureTree) => Measure[] +``` + +参数默认值： + +```typescript +// findAllMeasures +measures = [] +``` + +关联 API：[Measure](types.md#measure)、[MeasureTree](types.md#measuretree) + +## findFirstMeasure + +源码：[packages/vseed/src/pipeline/utils/measures/find.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/utils/measures/find.ts) + +包导出：`findFirstMeasure` + +```typescript +const findFirstMeasure: (measures?: MeasureTree) => Measure | undefined +``` + +参数默认值： + +```typescript +// findFirstMeasure +measures = [] +``` + +关联 API：[Measure](types.md#measure)、[MeasureTree](types.md#measuretree) + +## findMeasureById + +源码：[packages/vseed/src/pipeline/utils/measures/find.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/utils/measures/find.ts) + +包导出：`findMeasureById` + +```typescript +const findMeasureById: (measures: MeasureTree | undefined, id: string) => Measure | undefined +``` + +参数默认值： + +```typescript +// findMeasureById +measures = [] +``` + +关联 API：[Measure](types.md#measure)、[MeasureTree](types.md#measuretree) + +## findTreeNodesBy + +源码：[packages/vseed/src/pipeline/utils/tree/traverse.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/utils/tree/traverse.ts) + +包导出：`findTreeNodesBy` + +```typescript +const findTreeNodesBy: ( + nodes: Node[] | undefined, + callback: (node: Node) => boolean, + childrenKey?: K, +) => Node[] +``` + +参数默认值： + +```typescript +// findTreeNodesBy +nodes = [] + +// findTreeNodesBy +childrenKey = 'children' as K +``` + +## flatReshapeMeasures + +源码：[packages/vseed/src/pipeline/utils/measures/find.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/utils/measures/find.ts) + +包导出：`flatReshapeMeasures` + +```typescript +const flatReshapeMeasures: (reshapeMeasures: Measure[][]) => Measure[] +``` + +关联 API：[Measure](types.md#measure) + +## funnelAdvancedPipeline + +源码：[packages/vseed/src/pipeline/advanced/chart/pipeline/funnel.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/advanced/chart/pipeline/funnel.ts) + +包导出：`funnelAdvancedPipeline` + +```typescript +const funnelAdvancedPipeline: AdvancedPipeline +``` + +关联 API：[AdvancedPipeline](pipeline.md#advancedpipeline) + +## funnelSpecPipeline + +源码：[packages/vseed/src/pipeline/spec/chart/pipeline/funnel.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/spec/chart/pipeline/funnel.ts) + +包导出：`funnelSpecPipeline` + +```typescript +const funnelSpecPipeline: import('src/types').SpecPipe[] +``` + +关联 API：[SpecPipe](pipeline.md#specpipe) + +## HAS_BUILTIN_UTILS + +源码：[packages/vseed/src/pipeline/utils/sandbox/builtin-utils.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/utils/sandbox/builtin-utils.ts) + +包导出：`HAS_BUILTIN_UTILS` + +```typescript +const HAS_BUILTIN_UTILS: boolean +``` + +## hasMultipleMeasureInSingleView + +源码：[packages/vseed/src/pipeline/utils/measures/find.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/utils/measures/find.ts) + +包导出：`hasMultipleMeasureInSingleView` + +```typescript +const hasMultipleMeasureInSingleView: (reshapeMeasures: Measure[][]) => boolean +``` + +关联 API：[Measure](types.md#measure) + +## heatmapAdvancedPipeline + +源码：[packages/vseed/src/pipeline/advanced/chart/pipeline/heatmap.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/advanced/chart/pipeline/heatmap.ts) + +包导出：`heatmapAdvancedPipeline` + +```typescript +const heatmapAdvancedPipeline: AdvancedPipeline +``` + +关联 API：[AdvancedPipeline](pipeline.md#advancedpipeline) + +## heatmapSpecPipeline + +源码：[packages/vseed/src/pipeline/spec/chart/pipeline/heatmap.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/spec/chart/pipeline/heatmap.ts) + +包导出：`heatmapSpecPipeline` + +```typescript +const heatmapSpecPipeline: import('src/types').SpecPipe[] +``` + +关联 API：[SpecPipe](pipeline.md#specpipe) + +## hierarchySankeyAdvancedPipeline + +源码：[packages/vseed/src/pipeline/advanced/chart/pipeline/hierarchySankey.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/advanced/chart/pipeline/hierarchySankey.ts) + +包导出：`hierarchySankeyAdvancedPipeline` + +```typescript +const hierarchySankeyAdvancedPipeline: AdvancedPipeline +``` + +关联 API：[AdvancedPipeline](pipeline.md#advancedpipeline) + +## hierarchySankeySpecPipeline + +源码：[packages/vseed/src/pipeline/spec/chart/pipeline/hierarchySankey.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/spec/chart/pipeline/hierarchySankey.ts) + +包导出：`hierarchySankeySpecPipeline` + +```typescript +const hierarchySankeySpecPipeline: import('src/types').SpecPipe[] +``` + +关联 API：[SpecPipe](pipeline.md#specpipe) + +## histogramAdvancedPipeline + +源码：[packages/vseed/src/pipeline/advanced/chart/pipeline/histogram.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/advanced/chart/pipeline/histogram.ts) + +包导出：`histogramAdvancedPipeline` + +```typescript +const histogramAdvancedPipeline: AdvancedPipeline +``` + +关联 API：[AdvancedPipeline](pipeline.md#advancedpipeline) + +## histogramSpecPipeline + +源码：[packages/vseed/src/pipeline/spec/chart/pipeline/histogram.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/spec/chart/pipeline/histogram.ts) + +包导出：`histogramSpecPipeline` + +```typescript +const histogramSpecPipeline: import('src/types').SpecPipe[] +``` + +关联 API：[SpecPipe](pipeline.md#specpipe) + +## initializeWorkerPool + +源码：[packages/vseed/src/pipeline/utils/sandbox/execute.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/utils/sandbox/execute.ts) + +包导出：`initializeWorkerPool` + +````typescript +/** + * 初始化 Worker 池 + * @description 预热 Worker 实例，提升首次执行性能 + * + * **⚠️ 注意：这是一个可选的性能优化方法** + * + * - **懒加载模式**：如果不调用此方法，Worker 池会在首次使用时自动初始化 + * - **推荐场景**：应用启动时预热，避免首次筛选时的冷启动延迟 + * - **配置选项**： + * - `poolSize`: Worker 池大小（默认 2） + * + * @param options - 初始化选项 + * @param options.poolSize - Worker 池大小，默认为 2 + * + * @example + * ```typescript + * // ✅ 推荐：应用启动时预热（可选） + * import { initializeWorkerPool } from '@visactor/vseed' + * + * // 在 main.ts 或入口文件中 + * await initializeWorkerPool({ poolSize: 2 }) + * + * // ✅ 也可以：不做任何事，让 Worker 池自动初始化 + * // 首次调用 dynamicFilter 时会自动创建 + * ``` + */ +export declare function initializeWorkerPool(options?: { + utilityLibUrl?: string + utilityLibSource?: string + poolSize?: number +}): Promise +```` + +参数默认值： + +```typescript +// initializeWorkerPool +options = {} +``` + +## isAreaPercent + +源码：[packages/vseed/src/pipeline/utils/chatType.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/utils/chatType.ts) + +包导出：`isAreaPercent` + +```typescript +const isAreaPercent: (vseed: VSeed) => vseed is import('src/types').AreaPercent +``` + +关联 API：[AreaPercent](chart-types.md#areapercent)、[VSeed](types.md#vseed) + +## isBarLikeChart + +源码：[packages/vseed/src/pipeline/utils/chatType.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/utils/chatType.ts) + +包导出：`isBarLikeChart` + +```typescript +const isBarLikeChart: ( + vseed: VSeed, +) => vseed is + | import('src/types').Bar + | import('src/types').RaceBar + | import('src/types').BarParallel + | import('src/types').BarPercent +``` + +关联 API：[Bar](chart-types.md#bar)、[BarParallel](chart-types.md#barparallel)、[BarPercent](chart-types.md#barpercent)、[RaceBar](chart-types.md#racebar)、[VSeed](types.md#vseed) + +## isBarPercent + +源码：[packages/vseed/src/pipeline/utils/chatType.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/utils/chatType.ts) + +包导出：`isBarPercent` + +```typescript +const isBarPercent: (vseed: VSeed) => vseed is import('src/types').BarPercent +``` + +关联 API：[BarPercent](chart-types.md#barpercent)、[VSeed](types.md#vseed) + +## isColumnPercent + +源码：[packages/vseed/src/pipeline/utils/chatType.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/utils/chatType.ts) + +包导出：`isColumnPercent` + +```typescript +const isColumnPercent: (vseed: VSeed) => vseed is import('src/types').ColumnPercent +``` + +关联 API：[ColumnPercent](chart-types.md#columnpercent)、[VSeed](types.md#vseed) + +## isCombination + +源码：[packages/vseed/src/pipeline/utils/chatType.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/utils/chatType.ts) + +包导出：`isCombination` + +```typescript +/** + * @description 不存在column 或 row的encoding, 但是有多组指标的情况 + */ +const isCombination: (vseed: VSeed) => boolean | undefined +``` + +关联 API：[VSeed](types.md#vseed) + +## isDimension + +源码：[packages/vseed/src/pipeline/utils/dimensions/typeGuard.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/utils/dimensions/typeGuard.ts) + +包导出：`isDimension` + +```typescript +const isDimension: (dimension: Dimension | DimensionGroup) => dimension is Dimension +``` + +关联 API：[Dimension](types.md#dimension)、[DimensionGroup](types.md#dimensiongroup) + +## isDimensionGroup + +源码：[packages/vseed/src/pipeline/utils/dimensions/typeGuard.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/utils/dimensions/typeGuard.ts) + +包导出：`isDimensionGroup` + +```typescript +const isDimensionGroup: (dimension: Dimension | DimensionGroup) => dimension is DimensionGroup +``` + +关联 API：[Dimension](types.md#dimension)、[DimensionGroup](types.md#dimensiongroup) + +## isDualAxisChartType + +源码：[packages/vseed/src/pipeline/utils/chatType.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/utils/chatType.ts) + +包导出：`isDualAxisChartType` + +```typescript +const isDualAxisChartType: (chartType: string | undefined) => boolean | '' | undefined +``` + +## isHierarchySankey + +源码：[packages/vseed/src/pipeline/utils/chatType.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/utils/chatType.ts) + +包导出：`isHierarchySankey` + +```typescript +const isHierarchySankey: (vseed: VSeed) => vseed is import('src/types').HierarchySankey +``` + +关联 API：[HierarchySankey](chart-types.md#hierarchysankey)、[VSeed](types.md#vseed) + +## isMeasure + +源码：[packages/vseed/src/pipeline/utils/measures/typeGuard.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/utils/measures/typeGuard.ts) + +包导出：`isMeasure` + +```typescript +const isMeasure: (measure: Measure | MeasureGroup) => measure is Measure +``` + +关联 API：[Measure](types.md#measure)、[MeasureGroup](types.md#measuregroup) + +## isMeasureGroup + +源码：[packages/vseed/src/pipeline/utils/measures/typeGuard.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/utils/measures/typeGuard.ts) + +包导出：`isMeasureGroup` + +```typescript +const isMeasureGroup: (measure: Measure | MeasureGroup) => measure is MeasureGroup +``` + +关联 API：[Measure](types.md#measure)、[MeasureGroup](types.md#measuregroup) + +## isMeasures + +源码：[packages/vseed/src/pipeline/utils/measures/typeGuard.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/utils/measures/typeGuard.ts) + +包导出：`isMeasures` + +```typescript +const isMeasures: (measures: Measure[] | MeasureGroup[]) => measures is Measure[] +``` + +关联 API：[Measure](types.md#measure)、[MeasureGroup](types.md#measuregroup) + +## isPivot + +源码：[packages/vseed/src/pipeline/utils/chatType.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/utils/chatType.ts) + +包导出：`isPivot` + +```typescript +/** + * @description 存在column 或 row的encoding + */ +const isPivot: (vseed: VSeed) => boolean +``` + +关联 API：[VSeed](types.md#vseed) + +## isPivotChart + +源码：[packages/vseed/src/pipeline/utils/chatType.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/utils/chatType.ts) + +包导出：`isPivotChart` + +```typescript +/** + * @description 透视图表或组合图 + * - 透视图表定义: 存在 column 或 row的 encoding + * - 组合图表定义: 存在多组指标的情况 + * - 透视组合图表: 存在 column 或 row的 encoding 且 存在多组指标的情况 + * 上述三者都只能使用 VTable.PivotChart 绘制 + */ +const isPivotChart: (vseed: VSeed) => boolean | undefined +``` + +关联 API：[VSeed](types.md#vseed) + +## isPivotTable + +源码：[packages/vseed/src/pipeline/utils/chatType.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/utils/chatType.ts) + +包导出：`isPivotTable` + +```typescript +const isPivotTable: (vseed: VSeed) => vseed is import('src/types').PivotTable +``` + +关联 API：[PivotTable](chart-types.md#pivottable)、[VSeed](types.md#vseed) + +## isPositionMeasure + +源码：[packages/vseed/src/pipeline/utils/measures/typeGuard.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/utils/measures/typeGuard.ts) + +包导出：`isPositionMeasure` + +```typescript +const isPositionMeasure: (measure: Measure, chartType: ChartType) => boolean +``` + +关联 API：[ChartType](types.md#charttype)、[Measure](types.md#measure) + +## isRadar + +源码：[packages/vseed/src/pipeline/utils/chatType.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/utils/chatType.ts) + +包导出：`isRadar` + +```typescript +const isRadar: (vseed: VSeed) => vseed is import('src/types').Radar +``` + +关联 API：[Radar](chart-types.md#radar)、[VSeed](types.md#vseed) + +## isRectungularCoordinate + +源码：[packages/vseed/src/pipeline/utils/chatType.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/utils/chatType.ts) + +包导出：`isRectungularCoordinate` + +```typescript +const isRectungularCoordinate: (chartType: string) => boolean +``` + +## isSankey + +源码：[packages/vseed/src/pipeline/utils/chatType.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/utils/chatType.ts) + +包导出：`isSankey` + +```typescript +const isSankey: (vseed: VSeed) => vseed is import('src/types').Sankey +``` + +关联 API：[Sankey](chart-types.md#sankey)、[VSeed](types.md#vseed) + +## isTable + +源码：[packages/vseed/src/pipeline/utils/chatType.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/utils/chatType.ts) + +包导出：`isTable` + +```typescript +const isTable: (vseed: VSeed) => vseed is import('src/types').Table +``` + +关联 API：[Table](chart-types.md#table)、[VSeed](types.md#vseed) + +## isVChart + +源码：[packages/vseed/src/pipeline/utils/chatType.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/utils/chatType.ts) + +包导出：`isVChart` + +```typescript +const isVChart: (vseed: VSeed) => boolean +``` + +关联 API：[VSeed](types.md#vseed) + +## isVTable + +源码：[packages/vseed/src/pipeline/utils/chatType.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/utils/chatType.ts) + +包导出：`isVTable` + +```typescript +const isVTable: (vseed: VSeed) => boolean +``` + +关联 API：[VSeed](types.md#vseed) + +## lineAdvancedPipeline + +源码：[packages/vseed/src/pipeline/advanced/chart/pipeline/line.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/advanced/chart/pipeline/line.ts) + +包导出：`lineAdvancedPipeline` + +```typescript +const lineAdvancedPipeline: AdvancedPipeline +``` + +关联 API：[AdvancedPipeline](pipeline.md#advancedpipeline) + +## LINEAR_AXIS_INNER_OFFSET_TOP + +源码：[packages/vseed/src/pipeline/utils/constant.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/utils/constant.ts) + +包导出：`LINEAR_AXIS_INNER_OFFSET_TOP` + +```typescript +const LINEAR_AXIS_INNER_OFFSET_TOP = 12 +``` + +## lineSpecPipeline + +源码：[packages/vseed/src/pipeline/spec/chart/pipeline/line.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/spec/chart/pipeline/line.ts) + +包导出：`lineSpecPipeline` + +```typescript +const lineSpecPipeline: import('src/types').SpecPipe[] +``` + +关联 API：[SpecPipe](pipeline.md#specpipe) + +## ListTableSpecPipe + +源码：[packages/vseed/src/types/pipeline/spec/spec.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/pipeline/spec/spec.ts) + +包导出：`ListTableSpecPipe` + +```typescript +export type ListTableSpecPipe = Pipe +``` + +关联 API：[Pipe](pipeline.md#pipe)、[SpecPipelineContext](pipeline.md#specpipelinecontext) + +## ListTableSpecPipeline + +源码：[packages/vseed/src/types/pipeline/spec/spec.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/pipeline/spec/spec.ts) + +包导出：`ListTableSpecPipeline` + +```typescript +export type ListTableSpecPipeline = ListTableSpecPipe[] +``` + +关联 API：[ListTableSpecPipe](pipeline.md#listtablespecpipe) + +## measureDepth + +源码：[packages/vseed/src/pipeline/utils/measures/depth.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/utils/measures/depth.ts) + +包导出：`measureDepth` + +```typescript +/** + * 获取measures的深度 + * @param measures + * @param id + * @returns + */ +const measureDepth: (measures?: MeasureTree) => number +``` + +参数默认值： + +```typescript +// measureDepth +measures = [] +``` + +关联 API：[MeasureTree](types.md#measuretree) + +## NullToUndefined + +源码：[packages/vseed/src/pipeline/utils/replaceNullToUndefined.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/utils/replaceNullToUndefined.ts) + +关联类型：通过公开 API 的签名引用，不是包入口的独立导出。 + +```typescript +type NullToUndefined = T extends null + ? undefined + : T extends (infer U)[] + ? NullToUndefined[] + : T extends object + ? { + [K in keyof T]: NullToUndefined + } + : T +``` + +## pieAdvancedPipeline + +源码：[packages/vseed/src/pipeline/advanced/chart/pipeline/pie.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/advanced/chart/pipeline/pie.ts) + +包导出：`pieAdvancedPipeline` + +```typescript +const pieAdvancedPipeline: AdvancedPipeline +``` + +关联 API：[AdvancedPipeline](pipeline.md#advancedpipeline) + +## pieSpecPipeline + +源码：[packages/vseed/src/pipeline/spec/chart/pipeline/pie.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/spec/chart/pipeline/pie.ts) + +包导出：`pieSpecPipeline` + +```typescript +const pieSpecPipeline: import('src/types').SpecPipe[] +``` + +关联 API：[SpecPipe](pipeline.md#specpipe) + +## Pipe + +源码：[packages/vseed/src/types/pipeline/pipeline.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/pipeline/pipeline.ts) + +包导出：`Pipe` + +```typescript +export type Pipe = (result: Partial, context: U) => Partial +``` + +## PivotChartSpecPipe + +源码：[packages/vseed/src/types/pipeline/spec/spec.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/pipeline/spec/spec.ts) + +包导出：`PivotChartSpecPipe` + +```typescript +export type PivotChartSpecPipe = Pipe +``` + +关联 API：[Pipe](pipeline.md#pipe)、[SpecPipelineContext](pipeline.md#specpipelinecontext) + +## PivotChartSpecPipeline + +源码：[packages/vseed/src/types/pipeline/spec/spec.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/pipeline/spec/spec.ts) + +包导出：`PivotChartSpecPipeline` + +```typescript +export type PivotChartSpecPipeline = PivotChartSpecPipe[] +``` + +关联 API：[PivotChartSpecPipe](pipeline.md#pivotchartspecpipe) + +## pivotTableAdvancedPipeline + +源码：[packages/vseed/src/pipeline/advanced/table/pipeline/pivotTable.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/advanced/table/pipeline/pivotTable.ts) + +包导出：`pivotTableAdvancedPipeline` + +```typescript +const pivotTableAdvancedPipeline: AdvancedPipeline +``` + +关联 API：[AdvancedPipeline](pipeline.md#advancedpipeline) + +## PivotTableSpecPipe + +源码：[packages/vseed/src/types/pipeline/spec/spec.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/pipeline/spec/spec.ts) + +包导出：`PivotTableSpecPipe` + +```typescript +export type PivotTableSpecPipe = Pipe +``` + +关联 API：[Pipe](pipeline.md#pipe)、[SpecPipelineContext](pipeline.md#specpipelinecontext) + +## pivotTableSpecPipeline + +源码：[packages/vseed/src/pipeline/spec/table/pipeline/pivotTable.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/spec/table/pipeline/pivotTable.ts) + +包导出：`pivotTableSpecPipeline` + +```typescript +const pivotTableSpecPipeline: SpecPipeline +``` + +关联 API：[SpecPipeline](pipeline.md#specpipeline) + +## PivotTableSpecPipeline + +源码：[packages/vseed/src/types/pipeline/spec/spec.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/pipeline/spec/spec.ts) + +包导出：`PivotTableSpecPipeline` + +```typescript +export type PivotTableSpecPipeline = PivotTableSpecPipe[] +``` + +关联 API：[PivotTableSpecPipe](pipeline.md#pivottablespecpipe) + +## preorderTraverse + +源码：[packages/vseed/src/pipeline/utils/tree/traverse.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/utils/tree/traverse.ts) + +包导出：`preorderTraverse` + +```typescript +const preorderTraverse: ( + tree: Node[], + callback: (node: Node) => boolean, + childrenKey?: K, +) => void +``` + +参数默认值： + +```typescript +// preorderTraverse +childrenKey = 'children' as K +``` + +## raceBarAdvancedPipeline + +源码：[packages/vseed/src/pipeline/advanced/chart/pipeline/raceBar.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/advanced/chart/pipeline/raceBar.ts) + +包导出：`raceBarAdvancedPipeline` + +```typescript +const raceBarAdvancedPipeline: AdvancedPipeline +``` + +关联 API：[AdvancedPipeline](pipeline.md#advancedpipeline) + +## raceBarSpecPipeline + +源码：[packages/vseed/src/pipeline/spec/chart/pipeline/raceBar.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/spec/chart/pipeline/raceBar.ts) + +包导出：`raceBarSpecPipeline` + +```typescript +const raceBarSpecPipeline: VChartSpecPipeline +``` + +关联 API：[VChartSpecPipeline](pipeline.md#vchartspecpipeline) + +## raceColumnAdvancedPipeline + +源码：[packages/vseed/src/pipeline/advanced/chart/pipeline/raceColumn.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/advanced/chart/pipeline/raceColumn.ts) + +包导出：`raceColumnAdvancedPipeline` + +```typescript +const raceColumnAdvancedPipeline: AdvancedPipeline +``` + +关联 API：[AdvancedPipeline](pipeline.md#advancedpipeline) + +## raceColumnSpecPipeline + +源码：[packages/vseed/src/pipeline/spec/chart/pipeline/raceColumn.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/spec/chart/pipeline/raceColumn.ts) + +包导出：`raceColumnSpecPipeline` + +```typescript +const raceColumnSpecPipeline: VChartSpecPipeline +``` + +关联 API：[VChartSpecPipeline](pipeline.md#vchartspecpipeline) + +## raceDonutAdvancedPipeline + +源码：[packages/vseed/src/pipeline/advanced/chart/pipeline/raceDonut.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/advanced/chart/pipeline/raceDonut.ts) + +包导出：`raceDonutAdvancedPipeline` + +```typescript +const raceDonutAdvancedPipeline: AdvancedPipeline +``` + +关联 API：[AdvancedPipeline](pipeline.md#advancedpipeline) + +## raceDonutSpecPipeline + +源码：[packages/vseed/src/pipeline/spec/chart/pipeline/raceDonut.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/spec/chart/pipeline/raceDonut.ts) + +包导出：`raceDonutSpecPipeline` + +```typescript +const raceDonutSpecPipeline: VChartSpecPipeline +``` + +关联 API：[VChartSpecPipeline](pipeline.md#vchartspecpipeline) + +## raceLineAdvancedPipeline + +源码：[packages/vseed/src/pipeline/advanced/chart/pipeline/raceLine.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/advanced/chart/pipeline/raceLine.ts) + +包导出：`raceLineAdvancedPipeline` + +```typescript +const raceLineAdvancedPipeline: AdvancedPipeline +``` + +关联 API：[AdvancedPipeline](pipeline.md#advancedpipeline) + +## raceLineSpecPipeline + +源码：[packages/vseed/src/pipeline/spec/chart/pipeline/raceLine.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/spec/chart/pipeline/raceLine.ts) + +包导出：`raceLineSpecPipeline` + +```typescript +const raceLineSpecPipeline: VChartSpecPipeline +``` + +关联 API：[VChartSpecPipeline](pipeline.md#vchartspecpipeline) + +## racePieAdvancedPipeline + +源码：[packages/vseed/src/pipeline/advanced/chart/pipeline/racePie.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/advanced/chart/pipeline/racePie.ts) + +包导出：`racePieAdvancedPipeline` + +```typescript +const racePieAdvancedPipeline: AdvancedPipeline +``` + +关联 API：[AdvancedPipeline](pipeline.md#advancedpipeline) + +## racePieSpecPipeline + +源码：[packages/vseed/src/pipeline/spec/chart/pipeline/racePie.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/spec/chart/pipeline/racePie.ts) + +包导出：`racePieSpecPipeline` + +```typescript +const racePieSpecPipeline: VChartSpecPipeline +``` + +关联 API：[VChartSpecPipeline](pipeline.md#vchartspecpipeline) + +## raceScatterAdvancedPipeline + +源码：[packages/vseed/src/pipeline/advanced/chart/pipeline/raceScatter.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/advanced/chart/pipeline/raceScatter.ts) + +包导出：`raceScatterAdvancedPipeline` + +```typescript +const raceScatterAdvancedPipeline: AdvancedPipeline +``` + +关联 API：[AdvancedPipeline](pipeline.md#advancedpipeline) + +## raceScatterSpecPipeline + +源码：[packages/vseed/src/pipeline/spec/chart/pipeline/raceScatter.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/spec/chart/pipeline/raceScatter.ts) + +包导出：`raceScatterSpecPipeline` + +```typescript +const raceScatterSpecPipeline: VChartSpecPipeline +``` + +关联 API：[VChartSpecPipeline](pipeline.md#vchartspecpipeline) + +## radarAdvancedPipeline + +源码：[packages/vseed/src/pipeline/advanced/chart/pipeline/radar.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/advanced/chart/pipeline/radar.ts) + +包导出：`radarAdvancedPipeline` + +```typescript +const radarAdvancedPipeline: AdvancedPipeline +``` + +关联 API：[AdvancedPipeline](pipeline.md#advancedpipeline) + +## radarSpecPipeline + +源码：[packages/vseed/src/pipeline/spec/chart/pipeline/radar.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/spec/chart/pipeline/radar.ts) + +包导出：`radarSpecPipeline` + +```typescript +const radarSpecPipeline: SpecPipeline +``` + +关联 API：[SpecPipeline](pipeline.md#specpipeline) + +## replaceNullToUndefined + +源码：[packages/vseed/src/pipeline/utils/replaceNullToUndefined.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/utils/replaceNullToUndefined.ts) + +包导出：`replaceNullToUndefined` + +```typescript +const replaceNullToUndefined: (obj: T) => NullToUndefined +``` + +关联 API：[NullToUndefined](pipeline.md#nulltoundefined) + +## revisedBoxPlotFieldKey + +源码：[packages/vseed/src/pipeline/utils/boxplot.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/utils/boxplot.ts) + +包导出：`revisedBoxPlotFieldKey` + +```typescript +const revisedBoxPlotFieldKey: (fieldKey: string, groupId: string, isPivotChart?: boolean) => string +``` + +参数默认值： + +```typescript +// revisedBoxPlotFieldKey +isPivotChart = true +``` + +## roseAdvancedPipeline + +源码：[packages/vseed/src/pipeline/advanced/chart/pipeline/rose.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/advanced/chart/pipeline/rose.ts) + +包导出：`roseAdvancedPipeline` + +```typescript +const roseAdvancedPipeline: AdvancedPipeline +``` + +关联 API：[AdvancedPipeline](pipeline.md#advancedpipeline) + +## roseParallelAdvancedPipeline + +源码：[packages/vseed/src/pipeline/advanced/chart/pipeline/roseParallel.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/advanced/chart/pipeline/roseParallel.ts) + +包导出：`roseParallelAdvancedPipeline` + +```typescript +const roseParallelAdvancedPipeline: AdvancedPipeline +``` + +关联 API：[AdvancedPipeline](pipeline.md#advancedpipeline) + +## roseParallelSpecPipeline + +源码：[packages/vseed/src/pipeline/spec/chart/pipeline/roseParallel.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/spec/chart/pipeline/roseParallel.ts) + +包导出：`roseParallelSpecPipeline` + +```typescript +const roseParallelSpecPipeline: import('src/types').SpecPipe[] +``` + +关联 API：[SpecPipe](pipeline.md#specpipe) + +## roseSpecPipeline + +源码：[packages/vseed/src/pipeline/spec/chart/pipeline/rose.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/spec/chart/pipeline/rose.ts) + +包导出：`roseSpecPipeline` + +```typescript +const roseSpecPipeline: import('src/types').SpecPipe[] +``` + +关联 API：[SpecPipe](pipeline.md#specpipe) + +## sankeyAdvancedPipeline + +源码：[packages/vseed/src/pipeline/advanced/chart/pipeline/sankey.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/advanced/chart/pipeline/sankey.ts) + +包导出：`sankeyAdvancedPipeline` + +```typescript +const sankeyAdvancedPipeline: AdvancedPipeline +``` + +关联 API：[AdvancedPipeline](pipeline.md#advancedpipeline) + +## sankeySpecPipeline + +源码：[packages/vseed/src/pipeline/spec/chart/pipeline/sankey.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/spec/chart/pipeline/sankey.ts) + +包导出：`sankeySpecPipeline` + +```typescript +const sankeySpecPipeline: import('src/types').SpecPipe[] +``` + +关联 API：[SpecPipe](pipeline.md#specpipe) + +## scatterAdvancedPipeline + +源码：[packages/vseed/src/pipeline/advanced/chart/pipeline/scatter.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/advanced/chart/pipeline/scatter.ts) + +包导出：`scatterAdvancedPipeline` + +```typescript +const scatterAdvancedPipeline: AdvancedPipeline +``` + +关联 API：[AdvancedPipeline](pipeline.md#advancedpipeline) + +## scatterSpecPipeline + +源码：[packages/vseed/src/pipeline/spec/chart/pipeline/scatter.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/spec/chart/pipeline/scatter.ts) + +包导出：`scatterSpecPipeline` + +```typescript +const scatterSpecPipeline: import('src/types').SpecPipe[] +``` + +关联 API：[SpecPipe](pipeline.md#specpipe) + +## SpecPipe + +源码：[packages/vseed/src/types/pipeline/spec/spec.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/pipeline/spec/spec.ts) + +包导出：`SpecPipe` + +```typescript +export type SpecPipe = VChartSpecPipe | PivotChartSpecPipe | ListTableSpecPipe | PivotTableSpecPipe +``` + +关联 API：[ListTableSpecPipe](pipeline.md#listtablespecpipe)、[PivotChartSpecPipe](pipeline.md#pivotchartspecpipe)、[PivotTableSpecPipe](pipeline.md#pivottablespecpipe)、[VChartSpecPipe](pipeline.md#vchartspecpipe) + +## SpecPipeline + +源码：[packages/vseed/src/types/pipeline/spec/spec.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/pipeline/spec/spec.ts) + +包导出：`SpecPipeline` + +```typescript +export type SpecPipeline = SpecPipe[] +``` + +关联 API：[SpecPipe](pipeline.md#specpipe) + +## SpecPipelineContext + +源码：[packages/vseed/src/types/pipeline/spec/spec.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/pipeline/spec/spec.ts) + +包导出：`SpecPipelineContext` + +```typescript +export type SpecPipelineContext = { + vseed: VSeed + advancedVSeed: AdvancedVSeed +} +``` + +关联 API：[AdvancedVSeed](types.md#advancedvseed)、[VSeed](types.md#vseed) + +## sunburstAdvancedPipeline + +源码：[packages/vseed/src/pipeline/advanced/chart/pipeline/sunburst.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/advanced/chart/pipeline/sunburst.ts) + +包导出：`sunburstAdvancedPipeline` + +```typescript +const sunburstAdvancedPipeline: AdvancedPipeline +``` + +关联 API：[AdvancedPipeline](pipeline.md#advancedpipeline) + +## sunburstSpecPipeline + +源码：[packages/vseed/src/pipeline/spec/chart/pipeline/sunburst.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/spec/chart/pipeline/sunburst.ts) + +包导出：`sunburstSpecPipeline` + +```typescript +const sunburstSpecPipeline: import('src/types').SpecPipe[] +``` + +关联 API：[SpecPipe](pipeline.md#specpipe) + +## tableAdvancedPipeline + +源码：[packages/vseed/src/pipeline/advanced/table/pipeline/table.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/advanced/table/pipeline/table.ts) + +包导出：`tableAdvancedPipeline` + +```typescript +const tableAdvancedPipeline: AdvancedPipeline +``` + +关联 API：[AdvancedPipeline](pipeline.md#advancedpipeline) + +## tableSpecPipeline + +源码：[packages/vseed/src/pipeline/spec/table/pipeline/table.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/spec/table/pipeline/table.ts) + +包导出：`tableSpecPipeline` + +```typescript +const tableSpecPipeline: SpecPipeline +``` + +关联 API：[SpecPipeline](pipeline.md#specpipeline) + +## terminateWorkerPool + +源码：[packages/vseed/src/pipeline/utils/sandbox/execute.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/utils/sandbox/execute.ts) + +包导出：`terminateWorkerPool` + +````typescript +/** + * 销毁 Worker 池 + * @description 终止所有 Worker 实例并清理全局状态 + * + * **⚠️ 注意：大多数情况下不需要手动调用此方法** + * + * - **一般使用**：浏览器会在页面卸载时自动清理 Worker 资源 + * - **建议场景**： + * - 单元测试的清理阶段（`afterAll` 钩子） + * - 开发环境热重载时清理旧实例 + * - 动态卸载整个图表库模块（极少见） + * + * @example + * ```typescript + * // ✅ 推荐：测试环境 + * afterAll(() => { + * terminateWorkerPool() + * }) + * + * // ❌ 不推荐：组件卸载时（Worker 池是全局的，其他组件可能还在使用） + * onUnmounted(() => { + * terminateWorkerPool() // 不要这样做！ + * }) + * ``` + */ +export declare function terminateWorkerPool(): void +```` + +## treeMapAdvancedPipeline + +源码：[packages/vseed/src/pipeline/advanced/chart/pipeline/treeMap.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/advanced/chart/pipeline/treeMap.ts) + +包导出：`treeMapAdvancedPipeline` + +```typescript +const treeMapAdvancedPipeline: AdvancedPipeline +``` + +关联 API：[AdvancedPipeline](pipeline.md#advancedpipeline) + +## treeMapSpecPipeline + +源码：[packages/vseed/src/pipeline/spec/chart/pipeline/treeMap.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/spec/chart/pipeline/treeMap.ts) + +包导出：`treeMapSpecPipeline` + +```typescript +const treeMapSpecPipeline: import('src/types').SpecPipe[] +``` + +关联 API：[SpecPipe](pipeline.md#specpipe) + +## validateCodeSafety + +源码：[packages/vseed/src/pipeline/utils/sandbox/execute.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/pipeline/utils/sandbox/execute.ts) + +包导出：`validateCodeSafety` + +```typescript +/** + * 增强的安全验证 + * @description 针对 AI 生成代码的特定模式检查 + */ +export declare function validateCodeSafety(code: string): void +``` + +## VChartSpecPipe + +源码：[packages/vseed/src/types/pipeline/spec/spec.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/pipeline/spec/spec.ts) + +包导出：`VChartSpecPipe` + +```typescript +export type VChartSpecPipe = Pipe +``` + +关联 API：[Pipe](pipeline.md#pipe)、[SpecPipelineContext](pipeline.md#specpipelinecontext) + +## VChartSpecPipeline + +源码：[packages/vseed/src/types/pipeline/spec/spec.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/pipeline/spec/spec.ts) + +包导出：`VChartSpecPipeline` + +```typescript +export type VChartSpecPipeline = VChartSpecPipe[] +``` + +关联 API：[VChartSpecPipe](pipeline.md#vchartspecpipe) diff --git a/skills/light-dashboard/references/api/vseed/register.md b/skills/light-dashboard/references/api/vseed/register.md new file mode 100644 index 0000000000..d097e6a6c6 --- /dev/null +++ b/skills/light-dashboard/references/api/vseed/register.md @@ -0,0 +1,471 @@ +# 注册与扩展 + +[API 索引](./index.md) + +- [registerAll](register.md#registerall) +- [updateAdvanced](register.md#updateadvanced) +- [updateSpec](register.md#updatespec) +- [registerArea](register.md#registerarea) +- [registerAreaPercent](register.md#registerareapercent) +- [registerBar](register.md#registerbar) +- [registerBarParallel](register.md#registerbarparallel) +- [registerBarPercent](register.md#registerbarpercent) +- [registerBoxPlot](register.md#registerboxplot) +- [registerColumn](register.md#registercolumn) +- [registerColumnParallel](register.md#registercolumnparallel) +- [registerColumnPercent](register.md#registercolumnpercent) +- [registerCustomTheme](register.md#registercustomtheme) +- [registerDarkTheme](register.md#registerdarktheme) +- [registerDonut](register.md#registerdonut) +- [registerDualAxis](register.md#registerdualaxis) +- [registerFunnel](register.md#registerfunnel) +- [registerHeatmap](register.md#registerheatmap) +- [registerHierarchySankey](register.md#registerhierarchysankey) +- [registerHistogram](register.md#registerhistogram) +- [registerLightTheme](register.md#registerlighttheme) +- [registerLine](register.md#registerline) +- [registerPie](register.md#registerpie) +- [registerPivotTable](register.md#registerpivottable) +- [registerRadar](register.md#registerradar) +- [registerRose](register.md#registerrose) +- [registerRoseParallel](register.md#registerroseparallel) +- [registerSankey](register.md#registersankey) +- [registerScatter](register.md#registerscatter) +- [registerTable](register.md#registertable) + +## registerAll + +源码：[packages/vseed/src/builder/register/all.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/builder/register/all.ts) + +包导出：`registerAll` + +```typescript +/** + * @description 注册所有内置的图表类型和主题。 + * 包括：表格、透视表、折线图、柱状图、饼图、散点图等所有支持的图表，以及浅色/深色主题。 + * 在初始化应用时调用此函数，以确保所有功能可用。 + */ +const registerAll: () => void +``` + +## updateAdvanced + +源码：[packages/vseed/src/builder/register/custom.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/builder/register/custom.ts) + +包导出：`updateAdvanced` + +```typescript +/** + * @description 更新指定图表类型的 Advanced Pipeline。 + * 允许用户注入自定义的处理逻辑到高级配置构建流程中。 + * @param chartType 图表类型 + * @param advancedPipe 新的 Advanced Pipe + */ +const updateAdvanced: (chartType: ChartType, advancedPipe: AdvancedPipe) => void +``` + +关联 API：[AdvancedPipe](pipeline.md#advancedpipe)、[ChartType](types.md#charttype) + +## updateSpec + +源码：[packages/vseed/src/builder/register/custom.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/builder/register/custom.ts) + +包导出：`updateSpec` + +```typescript +/** + * @description 更新指定图表类型的 Spec Pipeline。 + * 允许用户注入自定义的处理逻辑到最终 Spec 构建流程中。 + * @param chartType 图表类型 + * @param specPipe 新的 Spec Pipe + */ +const updateSpec: (chartType: ChartType, specPipe: SpecPipe) => void +``` + +关联 API：[ChartType](types.md#charttype)、[SpecPipe](pipeline.md#specpipe) + +## registerArea + +源码：[packages/vseed/src/builder/register/chartType/area.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/builder/register/chartType/area.ts) + +包导出：`registerArea` + +```typescript +/** + * @description 注册 Area Chart 的构建管线。 + * 注册后，Builder 将支持构建 Area Chart 的 Spec 和 Advanced Config。 + */ +const registerArea: () => void +``` + +## registerAreaPercent + +源码：[packages/vseed/src/builder/register/chartType/areaPercent.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/builder/register/chartType/areaPercent.ts) + +包导出：`registerAreaPercent` + +```typescript +/** + * @description 注册 Area Percent Chart 的构建管线。 + * 注册后，Builder 将支持构建 Area Percent Chart 的 Spec 和 Advanced Config。 + */ +const registerAreaPercent: () => void +``` + +## registerBar + +源码：[packages/vseed/src/builder/register/chartType/bar.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/builder/register/chartType/bar.ts) + +包导出：`registerBar` + +```typescript +/** + * @description 注册 Bar Chart 的构建管线。 + * 注册后，Builder 将支持构建 Bar Chart 的 Spec 和 Advanced Config。 + */ +const registerBar: () => void +``` + +## registerBarParallel + +源码：[packages/vseed/src/builder/register/chartType/barParallel.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/builder/register/chartType/barParallel.ts) + +包导出：`registerBarParallel` + +```typescript +/** + * @description 注册 Bar Parallel Chart 的构建管线。 + * 注册后，Builder 将支持构建 Bar Parallel Chart 的 Spec 和 Advanced Config。 + */ +const registerBarParallel: () => void +``` + +## registerBarPercent + +源码：[packages/vseed/src/builder/register/chartType/barPercent.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/builder/register/chartType/barPercent.ts) + +包导出：`registerBarPercent` + +```typescript +/** + * @description 注册 Bar Percent Chart 的构建管线。 + * 注册后，Builder 将支持构建 Bar Percent Chart 的 Spec 和 Advanced Config。 + */ +const registerBarPercent: () => void +``` + +## registerBoxPlot + +源码：[packages/vseed/src/builder/register/chartType/boxplot.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/builder/register/chartType/boxplot.ts) + +包导出：`registerBoxPlot` + +```typescript +/** + * @description 注册 Box Plot Chart 的构建管线。 + * 注册后，Builder 将支持构建 Box Plot Chart 的 Spec 和 Advanced Config。 + */ +const registerBoxPlot: () => void +``` + +## registerColumn + +源码：[packages/vseed/src/builder/register/chartType/column.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/builder/register/chartType/column.ts) + +包导出：`registerColumn` + +```typescript +/** + * @description 注册 Column Chart 的构建管线。 + * 注册后，Builder 将支持构建 Column Chart 的 Spec 和 Advanced Config。 + */ +const registerColumn: () => void +``` + +## registerColumnParallel + +源码：[packages/vseed/src/builder/register/chartType/columnParallel.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/builder/register/chartType/columnParallel.ts) + +包导出：`registerColumnParallel` + +```typescript +/** + * @description 注册 Column Parallel Chart 的构建管线。 + * 注册后，Builder 将支持构建 Column Parallel Chart 的 Spec 和 Advanced Config。 + */ +const registerColumnParallel: () => void +``` + +## registerColumnPercent + +源码：[packages/vseed/src/builder/register/chartType/columnPercent.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/builder/register/chartType/columnPercent.ts) + +包导出：`registerColumnPercent` + +```typescript +/** + * @description 注册 Column Percent Chart 的构建管线。 + * 注册后，Builder 将支持构建 Column Percent Chart 的 Spec 和 Advanced Config。 + */ +const registerColumnPercent: () => void +``` + +## registerCustomTheme + +源码：[packages/vseed/src/builder/register/theme/custom.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/builder/register/theme/custom.ts) + +包导出：`registerCustomTheme` + +```typescript +/** + * @description 注册自定义主题。 + * @param key 主题的唯一标识符 + * @param themeConfig 主题配置对象，或者一个返回配置对象的函数 + * 如果是函数，它将接收包含 lightTheme 和 darkTheme 的对象作为参数，方便基于现有主题进行扩展。 + * @example + * registerCustomTheme('myTheme', { ... }); + * // 或者基于浅色主题修改 + * registerCustomTheme('myTheme', ({ lightTheme }) => ({ ...lightTheme, ... })); + */ +const registerCustomTheme: ( + key: string, + themeConfig: + | CustomThemeConfig + | ((props: { lightTheme: CustomThemeConfig; darkTheme: CustomThemeConfig }) => CustomThemeConfig), +) => void +``` + +关联 API：[CustomThemeConfig](types.md#customthemeconfig) + +## registerDarkTheme + +源码：[packages/vseed/src/builder/register/theme/dark.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/builder/register/theme/dark.ts) + +包导出：`registerDarkTheme` + +```typescript +/** + * @description 注册深色主题 (Dark Theme)。 + * 注册后，可以通过 Builder.getTheme('dark') 获取。 + */ +const registerDarkTheme: () => void +``` + +## registerDonut + +源码：[packages/vseed/src/builder/register/chartType/donut.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/builder/register/chartType/donut.ts) + +包导出：`registerDonut` + +```typescript +/** + * @description 注册 Donut Chart 的构建管线。 + * 注册后，Builder 将支持构建 Donut Chart 的 Spec 和 Advanced Config。 + */ +const registerDonut: () => void +``` + +## registerDualAxis + +源码：[packages/vseed/src/builder/register/chartType/dualAxis.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/builder/register/chartType/dualAxis.ts) + +包导出：`registerDualAxis` + +```typescript +/** + * @description 注册 Dual Axis Chart 的构建管线。 + * 注册后，Builder 将支持构建 Dual Axis Chart 的 Spec 和 Advanced Config。 + */ +const registerDualAxis: () => void +``` + +## registerFunnel + +源码：[packages/vseed/src/builder/register/chartType/funnel.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/builder/register/chartType/funnel.ts) + +包导出：`registerFunnel` + +```typescript +/** + * @description 注册 Funnel Chart 的构建管线。 + * 注册后，Builder 将支持构建 Funnel Chart 的 Spec 和 Advanced Config。 + */ +const registerFunnel: () => void +``` + +## registerHeatmap + +源码：[packages/vseed/src/builder/register/chartType/heatmap.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/builder/register/chartType/heatmap.ts) + +包导出：`registerHeatmap` + +```typescript +/** + * @description 注册 Heatmap Chart 的构建管线。 + * 注册后，Builder 将支持构建 Heatmap Chart 的 Spec 和 Advanced Config。 + */ +const registerHeatmap: () => void +``` + +## registerHierarchySankey + +源码：[packages/vseed/src/builder/register/chartType/hierarchySankey.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/builder/register/chartType/hierarchySankey.ts) + +包导出：`registerHierarchySankey` + +```typescript +/** + * @description 注册 HierarchySankey Chart 的构建管线。 + */ +const registerHierarchySankey: () => void +``` + +## registerHistogram + +源码：[packages/vseed/src/builder/register/chartType/histogram.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/builder/register/chartType/histogram.ts) + +包导出：`registerHistogram` + +```typescript +/** + * @description 注册 Histogram Chart 的构建管线。 + * 注册后，Builder 将支持构建 Histogram Chart 的 Spec 和 Advanced Config。 + */ +const registerHistogram: () => void +``` + +## registerLightTheme + +源码：[packages/vseed/src/builder/register/theme/light.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/builder/register/theme/light.ts) + +包导出：`registerLightTheme` + +```typescript +/** + * @description 注册浅色主题 (Light Theme)。 + * 注册后，可以通过 Builder.getTheme('light') 获取。 + */ +const registerLightTheme: () => void +``` + +## registerLine + +源码：[packages/vseed/src/builder/register/chartType/line.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/builder/register/chartType/line.ts) + +包导出：`registerLine` + +```typescript +/** + * @description 注册 Line Chart 的构建管线。 + * 注册后，Builder 将支持构建 Line Chart 的 Spec 和 Advanced Config。 + */ +const registerLine: () => void +``` + +## registerPie + +源码：[packages/vseed/src/builder/register/chartType/pie.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/builder/register/chartType/pie.ts) + +包导出：`registerPie` + +```typescript +/** + * @description 注册 Pie Chart 的构建管线。 + * 注册后，Builder 将支持构建 Pie Chart 的 Spec 和 Advanced Config。 + */ +const registerPie: () => void +``` + +## registerPivotTable + +源码：[packages/vseed/src/builder/register/chartType/pivotTable.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/builder/register/chartType/pivotTable.ts) + +包导出：`registerPivotTable` + +```typescript +/** + * @description 注册 Pivot Table Chart 的构建管线。 + * 注册后，Builder 将支持构建 Pivot Table Chart 的 Spec 和 Advanced Config。 + */ +const registerPivotTable: () => void +``` + +## registerRadar + +源码：[packages/vseed/src/builder/register/chartType/radar.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/builder/register/chartType/radar.ts) + +包导出：`registerRadar` + +```typescript +/** + * @description 注册 Radar Chart 的构建管线。 + * 注册后，Builder 将支持构建 Radar Chart 的 Spec 和 Advanced Config。 + */ +const registerRadar: () => void +``` + +## registerRose + +源码：[packages/vseed/src/builder/register/chartType/rose.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/builder/register/chartType/rose.ts) + +包导出：`registerRose` + +```typescript +/** + * @description 注册 Rose Chart 的构建管线。 + * 注册后，Builder 将支持构建 Rose Chart 的 Spec 和 Advanced Config。 + */ +const registerRose: () => void +``` + +## registerRoseParallel + +源码：[packages/vseed/src/builder/register/chartType/roseParallel.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/builder/register/chartType/roseParallel.ts) + +包导出：`registerRoseParallel` + +```typescript +/** + * @description 注册 Rose Parallel Chart 的构建管线。 + * 注册后，Builder 将支持构建 Rose Parallel Chart 的 Spec 和 Advanced Config。 + */ +const registerRoseParallel: () => void +``` + +## registerSankey + +源码：[packages/vseed/src/builder/register/chartType/sankey.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/builder/register/chartType/sankey.ts) + +包导出：`registerSankey` + +```typescript +const registerSankey: () => void +``` + +## registerScatter + +源码：[packages/vseed/src/builder/register/chartType/scatter.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/builder/register/chartType/scatter.ts) + +包导出：`registerScatter` + +```typescript +/** + * @description 注册 Scatter Chart 的构建管线。 + * 注册后，Builder 将支持构建 Scatter Chart 的 Spec 和 Advanced Config。 + */ +const registerScatter: () => void +``` + +## registerTable + +源码：[packages/vseed/src/builder/register/chartType/table.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/builder/register/chartType/table.ts) + +包导出：`registerTable` + +```typescript +/** + * @description 注册 Table Chart 的构建管线。 + * 注册后，Builder 将支持构建 Table Chart 的 Spec 和 Advanced Config。 + */ +const registerTable: () => void +``` diff --git a/skills/light-dashboard/references/api/vseed/schemas.md b/skills/light-dashboard/references/api/vseed/schemas.md new file mode 100644 index 0000000000..8826961508 --- /dev/null +++ b/skills/light-dashboard/references/api/vseed/schemas.md @@ -0,0 +1,4575 @@ +# Zod 校验 Schema + +[API 索引](./index.md) + +- [zVSeed](schemas.md#zvseed) +- [zAdvancedVSeed](schemas.md#zadvancedvseed) +- [zAnalysis](schemas.md#zanalysis) +- [zAnnotation](schemas.md#zannotation) +- [zAnnotationArea](schemas.md#zannotationarea) +- [zAnnotationAreaConfig](schemas.md#zannotationareaconfig) +- [zAnnotationConfig](schemas.md#zannotationconfig) +- [zAnnotationDifferenceLine](schemas.md#zannotationdifferenceline) +- [zAnnotationDifferenceLineConfig](schemas.md#zannotationdifferencelineconfig) +- [zAnnotationHorizontalLine](schemas.md#zannotationhorizontalline) +- [zAnnotationHorizontalLineConfig](schemas.md#zannotationhorizontallineconfig) +- [zAnnotationPoint](schemas.md#zannotationpoint) +- [zAnnotationPointConfig](schemas.md#zannotationpointconfig) +- [zAnnotationVerticalLine](schemas.md#zannotationverticalline) +- [zAnnotationVerticalLineConfig](schemas.md#zannotationverticallineconfig) +- [zArea](schemas.md#zarea) +- [zAreaConfig](schemas.md#zareaconfig) +- [zAreaPercent](schemas.md#zareapercent) +- [zAreaPercentConfig](schemas.md#zareapercentconfig) +- [zAreaSelector](schemas.md#zareaselector) +- [zAreaSelectors](schemas.md#zareaselectors) +- [zAreaStyle](schemas.md#zareastyle) +- [zBackgroundColor](schemas.md#zbackgroundcolor) +- [zBar](schemas.md#zbar) +- [zBarConfig](schemas.md#zbarconfig) +- [zBarGapInGroup](schemas.md#zbargapingroup) +- [zBarLikeAnimation](schemas.md#zbarlikeanimation) +- [zBarMaxWidth](schemas.md#zbarmaxwidth) +- [zBarParallel](schemas.md#zbarparallel) +- [zBarParallelConfig](schemas.md#zbarparallelconfig) +- [zBarPercent](schemas.md#zbarpercent) +- [zBarPercentConfig](schemas.md#zbarpercentconfig) +- [zBarStyle](schemas.md#zbarstyle) +- [zBodyCellStyle](schemas.md#zbodycellstyle) +- [zBoxGapInGroup](schemas.md#zboxgapingroup) +- [zBoxMaxWidth](schemas.md#zboxmaxwidth) +- [zBoxPlot](schemas.md#zboxplot) +- [zBoxplotConfig](schemas.md#zboxplotconfig) +- [zBoxPlotStyle](schemas.md#zboxplotstyle) +- [zBrush](schemas.md#zbrush) +- [zBrushConfig](schemas.md#zbrushconfig) +- [zCellSelector](schemas.md#zcellselector) +- [zCellStyle](schemas.md#zcellstyle) +- [zCenterText](schemas.md#zcentertext) +- [zCenterTextConfig](schemas.md#zcentertextconfig) +- [zChartDynamicFilter](schemas.md#zchartdynamicfilter) +- [zChartType](schemas.md#zcharttype) +- [zCirclePacking](schemas.md#zcirclepacking) +- [zCirclePackingConfig](schemas.md#zcirclepackingconfig) +- [zColor](schemas.md#zcolor) +- [zColorLegend](schemas.md#zcolorlegend) +- [zColumn](schemas.md#zcolumn) +- [zColumnConfig](schemas.md#zcolumnconfig) +- [zColumnParallel](schemas.md#zcolumnparallel) +- [zColumnParallelConfig](schemas.md#zcolumnparallelconfig) +- [zColumnPercent](schemas.md#zcolumnpercent) +- [zColumnPercentConfig](schemas.md#zcolumnpercentconfig) +- [zConfig](schemas.md#zconfig) +- [zCornerRadius](schemas.md#zcornerradius) +- [zCrosshairLine](schemas.md#zcrosshairline) +- [zCrosshairRect](schemas.md#zcrosshairrect) +- [zCustomTheme](schemas.md#zcustomtheme) +- [zCustomThemeConfig](schemas.md#zcustomthemeconfig) +- [zDataset](schemas.md#zdataset) +- [zDatasetReshapeInfo](schemas.md#zdatasetreshapeinfo) +- [zDatum](schemas.md#zdatum) +- [zDifferenceAnchor](schemas.md#zdifferenceanchor) +- [zDifferenceSelector](schemas.md#zdifferenceselector) +- [zDifferenceSelectors](schemas.md#zdifferenceselectors) +- [zDimension](schemas.md#zdimension) +- [zDimensionEncoding](schemas.md#zdimensionencoding) +- [zDimensionGroup](schemas.md#zdimensiongroup) +- [zDimensionLinkage](schemas.md#zdimensionlinkage) +- [zDimensions](schemas.md#zdimensions) +- [zDimensionSelector](schemas.md#zdimensionselector) +- [zDimensionTree](schemas.md#zdimensiontree) +- [zDonut](schemas.md#zdonut) +- [zDonutConfig](schemas.md#zdonutconfig) +- [zDualAxis](schemas.md#zdualaxis) +- [zDualAxisConfig](schemas.md#zdualaxisconfig) +- [zDualMeasure](schemas.md#zdualmeasure) +- [zDualMeasures](schemas.md#zdualmeasures) +- [zDynamicFilter](schemas.md#zdynamicfilter) +- [zEcdfRegressionLine](schemas.md#zecdfregressionline) +- [zEncoding](schemas.md#zencoding) +- [zFieldSelector](schemas.md#zfieldselector) +- [zFoldInfo](schemas.md#zfoldinfo) +- [zFunnel](schemas.md#zfunnel) +- [zFunnelConfig](schemas.md#zfunnelconfig) +- [zFunnelTransform](schemas.md#zfunneltransform) +- [zHeatmap](schemas.md#zheatmap) +- [zHeatmapCell](schemas.md#zheatmapcell) +- [zHeatmapConfig](schemas.md#zheatmapconfig) +- [zHierarchySankey](schemas.md#zhierarchysankey) +- [zHierarchySankeyConfig](schemas.md#zhierarchysankeyconfig) +- [zHistogram](schemas.md#zhistogram) +- [zHistogramConfig](schemas.md#zhistogramconfig) +- [zKdeRegressionLine](schemas.md#zkderegressionline) +- [zLabel](schemas.md#zlabel) +- [zLegend](schemas.md#zlegend) +- [zLine](schemas.md#zline) +- [zLinearColor](schemas.md#zlinearcolor) +- [zLineAreaAnimation](schemas.md#zlineareaanimation) +- [zLinearRegressionLine](schemas.md#zlinearregressionline) +- [zLineConfig](schemas.md#zlineconfig) +- [zLineStyle](schemas.md#zlinestyle) +- [zLocale](schemas.md#zlocale) +- [zLogisticRegressionLine](schemas.md#zlogisticregressionline) +- [zLowessRegressionLine](schemas.md#zlowessregressionline) +- [zMarkStyle](schemas.md#zmarkstyle) +- [zMeasure](schemas.md#zmeasure) +- [zMeasureEncoding](schemas.md#zmeasureencoding) +- [zMeasureGroup](schemas.md#zmeasuregroup) +- [zMeasures](schemas.md#zmeasures) +- [zMeasureSelector](schemas.md#zmeasureselector) +- [zMeasureTree](schemas.md#zmeasuretree) +- [zNumFormat](schemas.md#znumformat) +- [zOutlierStyle](schemas.md#zoutlierstyle) +- [zPage](schemas.md#zpage) +- [zPartialSelector](schemas.md#zpartialselector) +- [zPie](schemas.md#zpie) +- [zPieConfig](schemas.md#zpieconfig) +- [zPieGeometry](schemas.md#zpiegeometry) +- [zPieLabel](schemas.md#zpielabel) +- [zPieLikeAnimation](schemas.md#zpielikeanimation) +- [zPieStyle](schemas.md#zpiestyle) +- [zPivotChartGridConfig](schemas.md#zpivotchartgridconfig) +- [zPivotTable](schemas.md#zpivottable) +- [zPivotTableConfig](schemas.md#zpivottableconfig) +- [zPivotTableTotals](schemas.md#zpivottabletotals) +- [zPlayer](schemas.md#zplayer) +- [zPointStyle](schemas.md#zpointstyle) +- [zPolynomialRegressionLine](schemas.md#zpolynomialregressionline) +- [zRaceBar](schemas.md#zracebar) +- [zRaceBarConfig](schemas.md#zracebarconfig) +- [zRaceColumn](schemas.md#zracecolumn) +- [zRaceColumnConfig](schemas.md#zracecolumnconfig) +- [zRaceDonut](schemas.md#zracedonut) +- [zRaceDonutConfig](schemas.md#zracedonutconfig) +- [zRaceLine](schemas.md#zraceline) +- [zRaceLineConfig](schemas.md#zracelineconfig) +- [zRacePie](schemas.md#zracepie) +- [zRacePieConfig](schemas.md#zracepieconfig) +- [zRaceScatter](schemas.md#zracescatter) +- [zRaceScatterConfig](schemas.md#zracescatterconfig) +- [zRadar](schemas.md#zradar) +- [zRadarAnimation](schemas.md#zradaranimation) +- [zRadarConfig](schemas.md#zradarconfig) +- [zRegionPadding](schemas.md#zregionpadding) +- [zRegressionLine](schemas.md#zregressionline) +- [zRose](schemas.md#zrose) +- [zRoseConfig](schemas.md#zroseconfig) +- [zRoseParallel](schemas.md#zroseparallel) +- [zRoseParallelConfig](schemas.md#zroseparallelconfig) +- [zRowOrColumnTotalConfig](schemas.md#zroworcolumntotalconfig) +- [zSankey](schemas.md#zsankey) +- [zSankeyConfig](schemas.md#zsankeyconfig) +- [zScatter](schemas.md#zscatter) +- [zScatterAnimation](schemas.md#zscatteranimation) +- [zScatterConfig](schemas.md#zscatterconfig) +- [zSelector](schemas.md#zselector) +- [zSelectors](schemas.md#zselectors) +- [zSort](schemas.md#zsort) +- [zSortLegend](schemas.md#zsortlegend) +- [zStackCornerRadius](schemas.md#zstackcornerradius) +- [zSunburst](schemas.md#zsunburst) +- [zSunburstConfig](schemas.md#zsunburstconfig) +- [zTable](schemas.md#ztable) +- [zTableConfig](schemas.md#ztableconfig) +- [zTableDynamicFilter](schemas.md#ztabledynamicfilter) +- [zTheme](schemas.md#ztheme) +- [zTimeFormat](schemas.md#ztimeformat) +- [zTokenThemeDefinition](schemas.md#ztokenthemedefinition) +- [zTooltip](schemas.md#ztooltip) +- [zTotalType](schemas.md#ztotaltype) +- [zTreeMap](schemas.md#ztreemap) +- [zTreeMapConfig](schemas.md#ztreemapconfig) +- [zUnfoldInfo](schemas.md#zunfoldinfo) +- [zValueDynamicFilter](schemas.md#zvaluedynamicfilter) +- [zWhiskersConfig](schemas.md#zwhiskersconfig) +- [zXBandAxis](schemas.md#zxbandaxis) +- [zXLinearAxis](schemas.md#zxlinearaxis) +- [zYBandAxis](schemas.md#zybandaxis) +- [zYLinearAxis](schemas.md#zylinearaxis) + +外部依赖类型使用源码中的导入名称： + +```typescript +import type { z } from 'zod' +import { z } from 'zod' +``` + +## zVSeed + +源码：[packages/vseed/src/types/zVseed.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/zVseed.ts) + +包导出：`zVSeed` + +```typescript +/** + * @description VSeed 核心 Schema 定义 包含所有支持的图表类型的联合类型 + */ +const zVSeed: z.ZodTypeAny = z.discriminatedUnion('chartType', [ + zTable, + zPivotTable, + // cartesian + zLine, + zColumn, + zColumnParallel, + zColumnPercent, + zBar, + zBarParallel, + zBarPercent, + zArea, + zAreaPercent, + zScatter, + zDualAxis, + // polar + zPie, + zDonut, + zRose, + zRoseParallel, + zRadar, + + // hierarchy + zTreeMap, + zSunburst, + zCirclePacking, + zHierarchySankey, + zSankey, + + // race + zRaceBar, + zRaceColumn, + zRaceScatter, + zRaceLine, + zRacePie, + zRaceDonut, + + // other + zFunnel, + zHeatmap, + zBoxPlot, + zHistogram, +]) +``` + +关联 API：[zArea](schemas.md#zarea)、[zAreaPercent](schemas.md#zareapercent)、[zBar](schemas.md#zbar)、[zBarParallel](schemas.md#zbarparallel)、[zBarPercent](schemas.md#zbarpercent)、[zBoxPlot](schemas.md#zboxplot)、[zCirclePacking](schemas.md#zcirclepacking)、[zColumn](schemas.md#zcolumn)、[zColumnParallel](schemas.md#zcolumnparallel)、[zColumnPercent](schemas.md#zcolumnpercent)、[zDonut](schemas.md#zdonut)、[zDualAxis](schemas.md#zdualaxis)、[zFunnel](schemas.md#zfunnel)、[zHeatmap](schemas.md#zheatmap)、[zHierarchySankey](schemas.md#zhierarchysankey)、[zHistogram](schemas.md#zhistogram)、[zLine](schemas.md#zline)、[zPie](schemas.md#zpie)、[zPivotTable](schemas.md#zpivottable)、[zRaceBar](schemas.md#zracebar)、[zRaceColumn](schemas.md#zracecolumn)、[zRaceDonut](schemas.md#zracedonut)、[zRaceLine](schemas.md#zraceline)、[zRacePie](schemas.md#zracepie)、[zRaceScatter](schemas.md#zracescatter)、[zRadar](schemas.md#zradar)、[zRose](schemas.md#zrose)、[zRoseParallel](schemas.md#zroseparallel)、[zSankey](schemas.md#zsankey)、[zScatter](schemas.md#zscatter)、[zSunburst](schemas.md#zsunburst)、[zTable](schemas.md#ztable)、[zTreeMap](schemas.md#ztreemap) + +## zAdvancedVSeed + +源码：[packages/vseed/src/types/advancedVSeed.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/advancedVSeed.ts) + +包导出：`zAdvancedVSeed` + +```typescript +const zAdvancedVSeed: z.ZodType = z.object({ + chartType: zChartType, + dataset: zDataset, + datasetReshapeInfo: zDatasetReshapeInfo, + pivotAllDatasetReshapeInfo: zDatasetReshapeInfo, + dimensions: zDimensions.optional(), + measures: zMeasures.optional(), + reshapeMeasures: z.array(zMeasures).optional(), + reshapeDimensions: zDimensions.optional(), + measureTree: zMeasureTree.optional(), // 现在只有表格中可能会配置这种树状结构 + dimensionTree: zDimensionTree.optional(), // 现在只有表格中可能会配置这种树状结构 + encoding: zEncoding, + page: zPage.optional(), + config: zConfig, + analysis: zAnalysis, + theme: zTheme, + markStyle: zMarkStyle, + cellStyle: zCellStyle, + customTheme: zCustomThemeConfig, + annotation: zAnnotation, + locale: zLocale, + regressionLine: zRegressionLine, + totals: zPivotTableTotals.optional(), +}) +``` + +关联 API：[AdvancedVSeed](types.md#advancedvseed)、[zAnalysis](schemas.md#zanalysis)、[zAnnotation](schemas.md#zannotation)、[zCellStyle](schemas.md#zcellstyle)、[zChartType](schemas.md#zcharttype)、[zConfig](schemas.md#zconfig)、[zCustomThemeConfig](schemas.md#zcustomthemeconfig)、[zDataset](schemas.md#zdataset)、[zDatasetReshapeInfo](schemas.md#zdatasetreshapeinfo)、[zDimensions](schemas.md#zdimensions)、[zDimensionTree](schemas.md#zdimensiontree)、[zEncoding](schemas.md#zencoding)、[zLocale](schemas.md#zlocale)、[zMarkStyle](schemas.md#zmarkstyle)、[zMeasures](schemas.md#zmeasures)、[zMeasureTree](schemas.md#zmeasuretree)、[zPage](schemas.md#zpage)、[zPivotTableTotals](schemas.md#zpivottabletotals)、[zRegressionLine](schemas.md#zregressionline)、[zTheme](schemas.md#ztheme) + +## zAnalysis + +源码：[packages/vseed/src/types/properties/analysis/analysis.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/analysis/analysis.ts) + +包导出：`zAnalysis` + +```typescript +const zAnalysis = z.object({ + orderMapping: z.record(z.string(), z.array(z.string())).nullish(), +}) +``` + +## zAnnotation + +源码：[packages/vseed/src/types/properties/annotation/annotation.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/annotation/annotation.ts) + +包导出：`zAnnotation` + +```typescript +const zAnnotation = z.object({ + annotationPoint: zAnnotationPoint.or(z.array(zAnnotationPoint)).nullish(), + annotationVerticalLine: zAnnotationVerticalLine.or(z.array(zAnnotationVerticalLine)).nullish(), + annotationHorizontalLine: zAnnotationHorizontalLine.or(z.array(zAnnotationHorizontalLine)).nullish(), + annotationArea: zAnnotationArea.or(z.array(zAnnotationArea)).nullish(), + annotationDifferenceLine: zAnnotationDifferenceLine.or(z.array(zAnnotationDifferenceLine)).nullish(), +}) +``` + +关联 API：[zAnnotationArea](schemas.md#zannotationarea)、[zAnnotationDifferenceLine](schemas.md#zannotationdifferenceline)、[zAnnotationHorizontalLine](schemas.md#zannotationhorizontalline)、[zAnnotationPoint](schemas.md#zannotationpoint)、[zAnnotationVerticalLine](schemas.md#zannotationverticalline) + +## zAnnotationArea + +源码：[packages/vseed/src/types/properties/annotation/zAnnotationArea.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/annotation/zAnnotationArea.ts) + +包导出：`zAnnotationArea` + +```typescript +const zAnnotationArea = z.object({ + selector: z.union([zAreaSelector, zAreaSelectors]).nullish(), + textPosition: z + .enum(['top', 'topRight', 'topLeft', 'bottom', 'bottomLeft', 'bottomRight', 'left', 'right']) + .default('top') + .nullish(), + text: z.string().or(z.array(z.string())).nullish(), + textColor: z.string().default('#ffffff').nullish(), + textFontSize: z.number().default(12).nullish(), + textFontWeight: z.number().default(400).nullish(), + textAlign: z.enum(['left', 'right', 'center']).default('center').nullish(), + textBaseline: z.enum(['top', 'middle', 'bottom']).default('top').nullish(), + + textBackgroundVisible: z.boolean().default(true).nullish(), + textBackgroundColor: z.string().default('#191d24').nullish(), + textBackgroundBorderColor: z.string().default('#191d24').nullish(), + textBackgroundBorderWidth: z.number().default(1).nullish(), + textBackgroundBorderRadius: z.number().default(4).nullish(), + textBackgroundPadding: z.number().default(4).nullish(), + + areaColor: z.string().default('#888888').nullish(), + areaColorOpacity: z.number().default(0.15).nullish(), + areaBorderColor: z.string().default('#888888').nullish(), + areaBorderWidth: z.number().default(1).nullish(), + areaBorderRadius: z.number().default(4).nullish(), + areaLineDash: z.array(z.number()).nullish(), + + outerPadding: z.number().default(4).nullish(), +}) +``` + +关联 API：[zAreaSelector](schemas.md#zareaselector)、[zAreaSelectors](schemas.md#zareaselectors) + +## zAnnotationAreaConfig + +源码：[packages/vseed/src/types/properties/config/annotation/zAnnotation.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/annotation/zAnnotation.ts) + +包导出：`zAnnotationAreaConfig` + +```typescript +const zAnnotationAreaConfig = zAnnotationArea + .pick({ + textColor: true, + textFontSize: true, + textFontWeight: true, + + textBackgroundVisible: true, + textBackgroundColor: true, + textBackgroundBorderColor: true, + textBackgroundBorderWidth: true, + textBackgroundBorderRadius: true, + textBackgroundPadding: true, + + areaColor: true, + areaColorOpacity: true, + areaBorderColor: true, + areaBorderWidth: true, + areaBorderRadius: true, + areaLineDash: true, + + outerPadding: true, + }) + .extend({ + textBackgroundOpacity: z.number().nullish(), + }) + .partial() +``` + +关联 API：[zAnnotationArea](schemas.md#zannotationarea) + +## zAnnotationConfig + +源码：[packages/vseed/src/types/properties/config/annotation/zAnnotation.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/annotation/zAnnotation.ts) + +包导出：`zAnnotationConfig` + +```typescript +const zAnnotationConfig = z.object({ + annotationPoint: zAnnotationPointConfig.nullish(), + annotationHorizontalLine: zAnnotationHorizontalLineConfig.nullish(), + annotationVerticalLine: zAnnotationVerticalLineConfig.nullish(), + annotationArea: zAnnotationAreaConfig.nullish(), + annotationDifferenceLine: zAnnotationDifferenceLineConfig.nullish(), +}) +``` + +关联 API：[zAnnotationAreaConfig](schemas.md#zannotationareaconfig)、[zAnnotationDifferenceLineConfig](schemas.md#zannotationdifferencelineconfig)、[zAnnotationHorizontalLineConfig](schemas.md#zannotationhorizontallineconfig)、[zAnnotationPointConfig](schemas.md#zannotationpointconfig)、[zAnnotationVerticalLineConfig](schemas.md#zannotationverticallineconfig) + +## zAnnotationDifferenceLine + +源码：[packages/vseed/src/types/properties/annotation/zAnnotationDifferenceLine.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/annotation/zAnnotationDifferenceLine.ts) + +包导出：`zAnnotationDifferenceLine` + +```typescript +const zAnnotationDifferenceLine = z.object({ + start: zDifferenceAnchor, + end: zDifferenceAnchor, + differenceType: z.enum(['absolute', 'percent']).nullish(), + textFontSize: z.number().nullish(), + textFontWeight: z.number().or(z.string()).nullish(), + textColor: z.string().nullish(), + textBackgroundColor: z.string().nullish(), + lineColor: z.string().nullish(), + lineStyle: z.enum(['solid', 'dashed', 'dotted']).nullish(), +}) +``` + +关联 API：[zDifferenceAnchor](schemas.md#zdifferenceanchor) + +## zAnnotationDifferenceLineConfig + +源码：[packages/vseed/src/types/properties/config/annotation/zAnnotation.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/annotation/zAnnotation.ts) + +包导出：`zAnnotationDifferenceLineConfig` + +```typescript +const zAnnotationDifferenceLineConfig = zAnnotationDifferenceLine + .pick({ + lineColor: true, + lineStyle: true, + textColor: true, + textFontSize: true, + textFontWeight: true, + textBackgroundColor: true, + }) + .extend({ + textBackgroundBorderColor: z.string().nullish(), + textBackgroundBorderRadius: z.number().nullish(), + textBackgroundBorderWidth: z.number().nullish(), + textBackgroundPadding: z.number().nullish(), + lineDash: z.array(z.number()).nullish(), + textBackgroundOpacity: z.number().nullish(), + }) + .partial() +``` + +关联 API：[zAnnotationDifferenceLine](schemas.md#zannotationdifferenceline) + +## zAnnotationHorizontalLine + +源码：[packages/vseed/src/types/properties/annotation/zAnnotationHorizontalLine.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/annotation/zAnnotationHorizontalLine.ts) + +包导出：`zAnnotationHorizontalLine` + +```typescript +const zAnnotationHorizontalLine = z.object({ + yValue: z.union([z.number(), z.string(), z.array(z.union([z.number(), z.string()]))]).nullish(), + dynamicFilter: zValueDynamicFilter.optional(), + text: z.string().or(z.array(z.string())).nullish(), + textPosition: z + .enum(['outsideStart', 'outsideEnd', 'outsideMiddle', 'insideStart', 'insideMiddle', 'insideEnd']) + .default('insideEnd') + .nullish(), + textColor: z.string().default('#ffffff').nullish(), + textFontSize: z.number().default(12).nullish(), + textFontWeight: z.number().default(400).nullish(), + textAlign: z.enum(['left', 'right', 'center']).default('right').nullish(), + textBaseline: z.enum(['top', 'middle', 'bottom']).default('top').nullish(), + + lineVisible: z.boolean().default(true).nullish(), + lineColor: z.string().default('#212121').nullish(), + lineWidth: z.number().default(1).nullish(), + lineStyle: z + .union([z.literal('solid'), z.literal('dashed'), z.literal('dotted')]) + .default('dashed') + .nullish(), + + textBackgroundVisible: z.boolean().default(true).nullish(), + textBackgroundColor: z.string().default('#212121').nullish(), + textBackgroundBorderColor: z.string().default('#212121').nullish(), + textBackgroundBorderRadius: z.number().default(4).nullish(), + textBackgroundBorderWidth: z.number().default(1).nullish(), + textBackgroundPadding: z.number().default(2).nullish(), +}) +``` + +关联 API：[zValueDynamicFilter](schemas.md#zvaluedynamicfilter) + +## zAnnotationHorizontalLineConfig + +源码：[packages/vseed/src/types/properties/config/annotation/zAnnotation.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/annotation/zAnnotation.ts) + +包导出：`zAnnotationHorizontalLineConfig` + +```typescript +const zAnnotationHorizontalLineConfig = zAnnotationHorizontalLine + .pick({ + // only pick fields that exist on the runtime schema + lineColor: true, + lineWidth: true, + lineVisible: true, + lineStyle: true, + + textBackgroundVisible: true, + textColor: true, + textFontSize: true, + textFontWeight: true, + textBackgroundColor: true, + textBackgroundBorderColor: true, + textBackgroundBorderWidth: true, + textBackgroundBorderRadius: true, + textBackgroundPadding: true, + }) + // extend with additional config-only fields that runtime schema doesn't include + .extend({ + lineDash: z.array(z.number()).nullish(), + textBackgroundOpacity: z.number().nullish(), + + endSymbolVisible: z.boolean().nullish(), + endSymbolType: z.string().nullish(), + endSymbolSize: z.number().nullish(), + + startSymbolVisible: z.boolean().nullish(), + startSymbolType: z.string().nullish(), + startSymbolSize: z.number().nullish(), + }) + .partial() +``` + +关联 API：[zAnnotationHorizontalLine](schemas.md#zannotationhorizontalline) + +## zAnnotationPoint + +源码：[packages/vseed/src/types/properties/annotation/zAnnotationPoint.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/annotation/zAnnotationPoint.ts) + +包导出：`zAnnotationPoint` + +```typescript +const zAnnotationPoint = z.object({ + selector: z.union([zSelector, zSelectors]).nullish(), + measureId: z.string().nullish(), + dynamicFilter: zChartDynamicFilter.optional(), + text: z.string().or(z.array(z.string())).nullish(), + textColor: z.string().default('#ffffff').nullish(), + textFontSize: z.number().default(12).nullish(), + textFontWeight: z.number().default(400).nullish(), + textAlign: z.enum(['left', 'right', 'center']).default('center').nullish(), + textBaseline: z.enum(['top', 'middle', 'bottom']).default('middle').nullish(), + textBackgroundVisible: z.boolean().default(true).nullish(), + textBackgroundColor: z.string().default('#212121').nullish(), + textBackgroundBorderColor: z.string().nullish(), + textBackgroundBorderWidth: z.number().default(1).nullish(), + textBackgroundBorderRadius: z.number().default(4).nullish(), + textBackgroundPadding: z.number().nullish(), + + offsetY: z.number().default(0).nullish(), + offsetX: z.number().default(0).nullish(), +}) +``` + +关联 API：[zChartDynamicFilter](schemas.md#zchartdynamicfilter)、[zSelector](schemas.md#zselector)、[zSelectors](schemas.md#zselectors) + +## zAnnotationPointConfig + +源码：[packages/vseed/src/types/properties/config/annotation/zAnnotation.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/annotation/zAnnotation.ts) + +包导出：`zAnnotationPointConfig` + +```typescript +const zAnnotationPointConfig = zAnnotationPoint.omit({ selector: true, measureId: true, text: true }).partial().extend({ + textBackgroundOpacity: z.number().nullish(), +}) +``` + +关联 API：[zAnnotationPoint](schemas.md#zannotationpoint) + +## zAnnotationVerticalLine + +源码：[packages/vseed/src/types/properties/annotation/zAnnotationVerticalLine.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/annotation/zAnnotationVerticalLine.ts) + +包导出：`zAnnotationVerticalLine` + +```typescript +const zAnnotationVerticalLine = z.object({ + xValue: z.union([z.number(), z.string(), z.array(z.union([z.number(), z.string()]))]).nullish(), + dynamicFilter: zValueDynamicFilter.optional(), + text: z.string().or(z.array(z.string())).nullish(), + textPosition: z + .enum(['outsideStart', 'outsideEnd', 'outsideMiddle', 'insideStart', 'insideMiddle', 'insideEnd']) + .default('insideEnd') + .nullish(), + textColor: z.string().default('#ffffff').nullish(), + textFontSize: z.number().default(12).nullish(), + textFontWeight: z.number().default(400).nullish(), + textAlign: z.enum(['left', 'right', 'center']).default('right').nullish(), + textBaseline: z.enum(['top', 'middle', 'bottom']).default('top').nullish(), + + textBackgroundVisible: z.boolean().default(true).nullish(), + textBackgroundColor: z.string().default('#212121').nullish(), + textBackgroundBorderColor: z.string().default('#212121').nullish(), + textBackgroundBorderRadius: z.number().default(4).nullish(), + textBackgroundBorderWidth: z.number().default(1).nullish(), + textBackgroundPadding: z.number().default(2).nullish(), + + lineVisible: z.boolean().default(true).nullish(), + lineColor: z.string().default('#212121').nullish(), + lineWidth: z.number().default(1).nullish(), + lineStyle: z + .union([z.literal('solid'), z.literal('dashed'), z.literal('dotted')]) + .default('dashed') + .nullish(), +}) +``` + +关联 API：[zValueDynamicFilter](schemas.md#zvaluedynamicfilter) + +## zAnnotationVerticalLineConfig + +源码：[packages/vseed/src/types/properties/config/annotation/zAnnotation.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/annotation/zAnnotation.ts) + +包导出：`zAnnotationVerticalLineConfig` + +```typescript +const zAnnotationVerticalLineConfig = zAnnotationHorizontalLineConfig.clone() +``` + +关联 API：[zAnnotationHorizontalLineConfig](schemas.md#zannotationhorizontallineconfig) + +## zArea + +源码：[packages/vseed/src/types/chartType/area/zArea.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/chartType/area/zArea.ts) + +包导出：`zArea` + +```typescript +const zArea = z.object({ + chartType: z.literal('area'), + dataset: zDataset.nullish(), + encoding: zEncoding.nullish(), + dimensions: zDimensions.nullish(), + measures: zMeasures.nullish(), + page: zPage.nullish(), + + backgroundColor: zBackgroundColor.nullish(), + color: zColor.nullish(), + label: zLabel.nullish(), + legend: zLegend.nullish(), + regionPadding: zRegionPadding.nullish(), + tooltip: zTooltip.nullish(), + brush: zBrush.nullish(), + animation: zLineAreaAnimation.nullish(), + xAxis: zXBandAxis.nullish(), + yAxis: zYLinearAxis.nullish(), + crosshairLine: zCrosshairLine.nullish(), + theme: zTheme.nullish(), + pointStyle: z.array(zPointStyle).or(zPointStyle).nullish(), + lineStyle: z.array(zLineStyle).or(zLineStyle).nullish(), + areaStyle: z.array(zAreaStyle).or(zAreaStyle).nullish(), + annotationPoint: z.array(zAnnotationPoint).or(zAnnotationPoint).nullish(), + annotationVerticalLine: z.array(zAnnotationVerticalLine).or(zAnnotationVerticalLine).nullish(), + annotationHorizontalLine: z.array(zAnnotationHorizontalLine).or(zAnnotationHorizontalLine).nullish(), + annotationArea: z.array(zAnnotationArea).or(zAnnotationArea).nullish(), + annotationDifferenceLine: z.array(zAnnotationDifferenceLine).or(zAnnotationDifferenceLine).nullish(), + dimensionLinkage: zDimensionLinkage.nullish(), + locale: zLocale.nullish(), +}) +``` + +关联 API：[zAnnotationArea](schemas.md#zannotationarea)、[zAnnotationDifferenceLine](schemas.md#zannotationdifferenceline)、[zAnnotationHorizontalLine](schemas.md#zannotationhorizontalline)、[zAnnotationPoint](schemas.md#zannotationpoint)、[zAnnotationVerticalLine](schemas.md#zannotationverticalline)、[zAreaStyle](schemas.md#zareastyle)、[zBackgroundColor](schemas.md#zbackgroundcolor)、[zBrush](schemas.md#zbrush)、[zColor](schemas.md#zcolor)、[zCrosshairLine](schemas.md#zcrosshairline)、[zDataset](schemas.md#zdataset)、[zDimensionLinkage](schemas.md#zdimensionlinkage)、[zDimensions](schemas.md#zdimensions)、[zEncoding](schemas.md#zencoding)、[zLabel](schemas.md#zlabel)、[zLegend](schemas.md#zlegend)、[zLineAreaAnimation](schemas.md#zlineareaanimation)、[zLineStyle](schemas.md#zlinestyle)、[zLocale](schemas.md#zlocale)、[zMeasures](schemas.md#zmeasures)、[zPage](schemas.md#zpage)、[zPointStyle](schemas.md#zpointstyle)、[zRegionPadding](schemas.md#zregionpadding)、[zTheme](schemas.md#ztheme)、[zTooltip](schemas.md#ztooltip)、[zXBandAxis](schemas.md#zxbandaxis)、[zYLinearAxis](schemas.md#zylinearaxis) + +## zAreaConfig + +源码：[packages/vseed/src/types/properties/config/area.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/area.ts) + +包导出：`zAreaConfig` + +```typescript +const zAreaConfig = z.object({ + backgroundColor: zBackgroundColor.nullish(), + label: zLabel.nullish(), + color: zColor.nullish(), + tooltip: zTooltip.nullish(), + legend: zLegend.nullish(), + regionPadding: zRegionPadding.nullish(), + + xAxis: zXBandAxis.nullish(), + yAxis: zYLinearAxis.nullish(), + crosshairLine: zCrosshairLine.nullish(), + pivotGrid: zPivotChartGridConfig.nullish(), + annotation: zAnnotationConfig.nullish(), + + dimensionLinkage: zDimensionLinkage.nullish(), + + brush: zBrushConfig.nullish(), + animation: zLineAreaAnimation.nullish(), +}) +``` + +关联 API：[zAnnotationConfig](schemas.md#zannotationconfig)、[zBackgroundColor](schemas.md#zbackgroundcolor)、[zBrushConfig](schemas.md#zbrushconfig)、[zColor](schemas.md#zcolor)、[zCrosshairLine](schemas.md#zcrosshairline)、[zDimensionLinkage](schemas.md#zdimensionlinkage)、[zLabel](schemas.md#zlabel)、[zLegend](schemas.md#zlegend)、[zLineAreaAnimation](schemas.md#zlineareaanimation)、[zPivotChartGridConfig](schemas.md#zpivotchartgridconfig)、[zRegionPadding](schemas.md#zregionpadding)、[zTooltip](schemas.md#ztooltip)、[zXBandAxis](schemas.md#zxbandaxis)、[zYLinearAxis](schemas.md#zylinearaxis) + +## zAreaPercent + +源码：[packages/vseed/src/types/chartType/areaPercent/zAreaPercent.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/chartType/areaPercent/zAreaPercent.ts) + +包导出：`zAreaPercent` + +```typescript +const zAreaPercent = z.object({ + chartType: z.literal('areaPercent'), + dataset: zDataset.nullish(), + encoding: zEncoding.nullish(), + dimensions: zDimensions.nullish(), + measures: zMeasures.nullish(), + page: zPage.nullish(), + + backgroundColor: zBackgroundColor.nullish(), + color: zColor.nullish(), + label: zLabel.nullish(), + legend: zLegend.nullish(), + regionPadding: zRegionPadding.nullish(), + tooltip: zTooltip.nullish(), + brush: zBrush.nullish(), + animation: zLineAreaAnimation.nullish(), + xAxis: zXBandAxis.nullish(), + yAxis: zYLinearAxis.nullish(), + crosshairLine: zCrosshairLine.nullish(), + theme: zTheme.nullish(), + pointStyle: z.array(zPointStyle).or(zPointStyle).nullish(), + lineStyle: z.array(zLineStyle).or(zLineStyle).nullish(), + areaStyle: z.array(zAreaStyle).or(zAreaStyle).nullish(), + annotationPoint: z.array(zAnnotationPoint).or(zAnnotationPoint).nullish(), + annotationVerticalLine: z.array(zAnnotationVerticalLine).or(zAnnotationVerticalLine).nullish(), + annotationHorizontalLine: z.array(zAnnotationHorizontalLine).or(zAnnotationHorizontalLine).nullish(), + annotationArea: z.array(zAnnotationArea).or(zAnnotationArea).nullish(), + dimensionLinkage: zDimensionLinkage.nullish(), + locale: zLocale.nullish(), +}) +``` + +关联 API：[zAnnotationArea](schemas.md#zannotationarea)、[zAnnotationHorizontalLine](schemas.md#zannotationhorizontalline)、[zAnnotationPoint](schemas.md#zannotationpoint)、[zAnnotationVerticalLine](schemas.md#zannotationverticalline)、[zAreaStyle](schemas.md#zareastyle)、[zBackgroundColor](schemas.md#zbackgroundcolor)、[zBrush](schemas.md#zbrush)、[zColor](schemas.md#zcolor)、[zCrosshairLine](schemas.md#zcrosshairline)、[zDataset](schemas.md#zdataset)、[zDimensionLinkage](schemas.md#zdimensionlinkage)、[zDimensions](schemas.md#zdimensions)、[zEncoding](schemas.md#zencoding)、[zLabel](schemas.md#zlabel)、[zLegend](schemas.md#zlegend)、[zLineAreaAnimation](schemas.md#zlineareaanimation)、[zLineStyle](schemas.md#zlinestyle)、[zLocale](schemas.md#zlocale)、[zMeasures](schemas.md#zmeasures)、[zPage](schemas.md#zpage)、[zPointStyle](schemas.md#zpointstyle)、[zRegionPadding](schemas.md#zregionpadding)、[zTheme](schemas.md#ztheme)、[zTooltip](schemas.md#ztooltip)、[zXBandAxis](schemas.md#zxbandaxis)、[zYLinearAxis](schemas.md#zylinearaxis) + +## zAreaPercentConfig + +源码：[packages/vseed/src/types/properties/config/area.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/area.ts) + +包导出：`zAreaPercentConfig` + +```typescript +const zAreaPercentConfig = zAreaConfig +``` + +关联 API：[zAreaConfig](schemas.md#zareaconfig) + +## zAreaSelector + +源码：[packages/vseed/src/types/dataSelector/selector.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/dataSelector/selector.ts) + +包导出：`zAreaSelector` + +```typescript +const zAreaSelector = z.union([zFieldSelector, zMeasureSelector, zDimensionSelector]) +``` + +关联 API：[zDimensionSelector](schemas.md#zdimensionselector)、[zFieldSelector](schemas.md#zfieldselector)、[zMeasureSelector](schemas.md#zmeasureselector) + +## zAreaSelectors + +源码：[packages/vseed/src/types/dataSelector/selector.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/dataSelector/selector.ts) + +包导出：`zAreaSelectors` + +```typescript +const zAreaSelectors = z.array(zAreaSelector) +``` + +关联 API：[zAreaSelector](schemas.md#zareaselector) + +## zAreaStyle + +源码：[packages/vseed/src/types/properties/markStyle/zAreaStyle.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/markStyle/zAreaStyle.ts) + +包导出：`zAreaStyle` + +```typescript +const zAreaStyle = z.object({ + selector: z.union([zSelector, zSelectors]).nullish(), + dynamicFilter: zChartDynamicFilter.optional(), + areaVisible: z.boolean().nullish(), + areaColor: z.string().nullish(), + areaGradient: z.boolean().nullish(), + areaColorOpacity: z.number().nullish(), +}) +``` + +关联 API：[zChartDynamicFilter](schemas.md#zchartdynamicfilter)、[zSelector](schemas.md#zselector)、[zSelectors](schemas.md#zselectors) + +## zBackgroundColor + +源码：[packages/vseed/src/types/properties/config/backgroundColor/backgroundColor.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/backgroundColor/backgroundColor.ts) + +包导出：`zBackgroundColor` + +```typescript +const zBackgroundColor = z.string().default('transparent').nullish() +``` + +## zBar + +源码：[packages/vseed/src/types/chartType/bar/zBar.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/chartType/bar/zBar.ts) + +包导出：`zBar` + +```typescript +const zBar = z.object({ + chartType: z.literal('bar'), + dataset: zDataset.nullish(), + encoding: zEncoding.nullish(), + dimensions: zDimensions.nullish(), + measures: zMeasures.nullish(), + page: zPage.nullish(), + + backgroundColor: zBackgroundColor.nullish(), + color: zColor.nullish(), + label: zLabel.nullish(), + legend: zLegend.nullish(), + regionPadding: zRegionPadding.nullish(), + tooltip: zTooltip.nullish(), + brush: zBrush.nullish(), + animation: zBarLikeAnimation.nullish(), + xAxis: zXLinearAxis.nullish(), + yAxis: zYBandAxis.nullish(), + crosshairRect: zCrosshairRect.nullish(), + cornerRadius: zCornerRadius.nullish(), + stackCornerRadius: zStackCornerRadius.nullish(), + barMaxWidth: zBarMaxWidth.nullish(), + theme: zTheme.nullish(), + barStyle: z.array(zBarStyle).or(zBarStyle).nullish(), + annotationPoint: z.array(zAnnotationPoint).or(zAnnotationPoint).nullish(), + annotationVerticalLine: z.array(zAnnotationVerticalLine).or(zAnnotationVerticalLine).nullish(), + annotationHorizontalLine: z.array(zAnnotationHorizontalLine).or(zAnnotationHorizontalLine).nullish(), + annotationArea: z.array(zAnnotationArea).or(zAnnotationArea).nullish(), + annotationDifferenceLine: z.array(zAnnotationDifferenceLine).or(zAnnotationDifferenceLine).nullish(), + dimensionLinkage: zDimensionLinkage.nullish(), + locale: zLocale.nullish(), +}) +``` + +关联 API：[zAnnotationArea](schemas.md#zannotationarea)、[zAnnotationDifferenceLine](schemas.md#zannotationdifferenceline)、[zAnnotationHorizontalLine](schemas.md#zannotationhorizontalline)、[zAnnotationPoint](schemas.md#zannotationpoint)、[zAnnotationVerticalLine](schemas.md#zannotationverticalline)、[zBackgroundColor](schemas.md#zbackgroundcolor)、[zBarLikeAnimation](schemas.md#zbarlikeanimation)、[zBarMaxWidth](schemas.md#zbarmaxwidth)、[zBarStyle](schemas.md#zbarstyle)、[zBrush](schemas.md#zbrush)、[zColor](schemas.md#zcolor)、[zCornerRadius](schemas.md#zcornerradius)、[zCrosshairRect](schemas.md#zcrosshairrect)、[zDataset](schemas.md#zdataset)、[zDimensionLinkage](schemas.md#zdimensionlinkage)、[zDimensions](schemas.md#zdimensions)、[zEncoding](schemas.md#zencoding)、[zLabel](schemas.md#zlabel)、[zLegend](schemas.md#zlegend)、[zLocale](schemas.md#zlocale)、[zMeasures](schemas.md#zmeasures)、[zPage](schemas.md#zpage)、[zRegionPadding](schemas.md#zregionpadding)、[zStackCornerRadius](schemas.md#zstackcornerradius)、[zTheme](schemas.md#ztheme)、[zTooltip](schemas.md#ztooltip)、[zXLinearAxis](schemas.md#zxlinearaxis)、[zYBandAxis](schemas.md#zybandaxis) + +## zBarConfig + +源码：[packages/vseed/src/types/properties/config/bar.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/bar.ts) + +包导出：`zBarConfig` + +```typescript +const zBarConfig = z.object({ + backgroundColor: zBackgroundColor.nullish(), + label: zLabel.nullish(), + color: zColor.nullish(), + tooltip: zTooltip.nullish(), + legend: zLegend.nullish(), + regionPadding: zRegionPadding.nullish(), + + xAxis: zXLinearAxis.nullish(), + yAxis: zYBandAxis.nullish(), + crosshairRect: zCrosshairRect.nullish(), + cornerRadius: zCornerRadius.nullish(), + stackCornerRadius: zStackCornerRadius.nullish(), + pivotGrid: zPivotChartGridConfig.nullish(), + annotation: zAnnotationConfig.nullish(), + + dimensionLinkage: zDimensionLinkage.nullish(), + + brush: zBrushConfig.nullish(), + animation: zBarLikeAnimation.nullish(), +}) +``` + +关联 API：[zAnnotationConfig](schemas.md#zannotationconfig)、[zBackgroundColor](schemas.md#zbackgroundcolor)、[zBarLikeAnimation](schemas.md#zbarlikeanimation)、[zBrushConfig](schemas.md#zbrushconfig)、[zColor](schemas.md#zcolor)、[zCornerRadius](schemas.md#zcornerradius)、[zCrosshairRect](schemas.md#zcrosshairrect)、[zDimensionLinkage](schemas.md#zdimensionlinkage)、[zLabel](schemas.md#zlabel)、[zLegend](schemas.md#zlegend)、[zPivotChartGridConfig](schemas.md#zpivotchartgridconfig)、[zRegionPadding](schemas.md#zregionpadding)、[zStackCornerRadius](schemas.md#zstackcornerradius)、[zTooltip](schemas.md#ztooltip)、[zXLinearAxis](schemas.md#zxlinearaxis)、[zYBandAxis](schemas.md#zybandaxis) + +## zBarGapInGroup + +源码：[packages/vseed/src/types/properties/config/barWidth/index.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/barWidth/index.ts) + +包导出：`zBarGapInGroup` + +```typescript +const zBarGapInGroup = z.number().or(z.string()) +``` + +## zBarLikeAnimation + +源码：[packages/vseed/src/types/properties/config/animation/zAnimation.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/animation/zAnimation.ts) + +包导出：`zBarLikeAnimation` + +```typescript +const zBarLikeAnimation = createAnimation({ + appear: ['growth'], + update: ['growth', 'moveIn'], + loop: ['highLight', 'growth', 'moveIn', 'none'], + atmosphere: zPointAtmosphere, +}) +``` + +## zBarMaxWidth + +源码：[packages/vseed/src/types/properties/config/barWidth/index.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/barWidth/index.ts) + +包导出：`zBarMaxWidth` + +```typescript +const zBarMaxWidth = z.number().or(z.string()) +``` + +## zBarParallel + +源码：[packages/vseed/src/types/chartType/barParallel/zBarParallel.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/chartType/barParallel/zBarParallel.ts) + +包导出：`zBarParallel` + +```typescript +const zBarParallel = z.object({ + chartType: z.literal('barParallel'), + dataset: zDataset.nullish(), + encoding: zEncoding.nullish(), + dimensions: zDimensions.nullish(), + measures: zMeasures.nullish(), + backgroundColor: zBackgroundColor.nullish(), + color: zColor.nullish(), + label: zLabel.nullish(), + legend: zLegend.nullish(), + regionPadding: zRegionPadding.nullish(), + tooltip: zTooltip.nullish(), + brush: zBrush.nullish(), + animation: zBarLikeAnimation.nullish(), + xAxis: zXLinearAxis.nullish(), + yAxis: zYBandAxis.nullish(), + crosshairRect: zCrosshairRect.nullish(), + cornerRadius: zCornerRadius.nullish(), + stackCornerRadius: zStackCornerRadius.nullish(), + barMaxWidth: zBarMaxWidth.nullish(), + barGapInGroup: zBarGapInGroup.nullish(), + theme: zTheme.nullish(), + barStyle: z.array(zBarStyle).or(zBarStyle).nullish(), + annotationPoint: z.array(zAnnotationPoint).or(zAnnotationPoint).nullish(), + annotationVerticalLine: z.array(zAnnotationVerticalLine).or(zAnnotationVerticalLine).nullish(), + annotationHorizontalLine: z.array(zAnnotationHorizontalLine).or(zAnnotationHorizontalLine).nullish(), + annotationArea: z.array(zAnnotationArea).or(zAnnotationArea).nullish(), + annotationDifferenceLine: z.array(zAnnotationDifferenceLine).or(zAnnotationDifferenceLine).nullish(), + dimensionLinkage: zDimensionLinkage.nullish(), + locale: zLocale.nullish(), + page: zPage.nullish(), +}) +``` + +关联 API：[zAnnotationArea](schemas.md#zannotationarea)、[zAnnotationDifferenceLine](schemas.md#zannotationdifferenceline)、[zAnnotationHorizontalLine](schemas.md#zannotationhorizontalline)、[zAnnotationPoint](schemas.md#zannotationpoint)、[zAnnotationVerticalLine](schemas.md#zannotationverticalline)、[zBackgroundColor](schemas.md#zbackgroundcolor)、[zBarGapInGroup](schemas.md#zbargapingroup)、[zBarLikeAnimation](schemas.md#zbarlikeanimation)、[zBarMaxWidth](schemas.md#zbarmaxwidth)、[zBarStyle](schemas.md#zbarstyle)、[zBrush](schemas.md#zbrush)、[zColor](schemas.md#zcolor)、[zCornerRadius](schemas.md#zcornerradius)、[zCrosshairRect](schemas.md#zcrosshairrect)、[zDataset](schemas.md#zdataset)、[zDimensionLinkage](schemas.md#zdimensionlinkage)、[zDimensions](schemas.md#zdimensions)、[zEncoding](schemas.md#zencoding)、[zLabel](schemas.md#zlabel)、[zLegend](schemas.md#zlegend)、[zLocale](schemas.md#zlocale)、[zMeasures](schemas.md#zmeasures)、[zPage](schemas.md#zpage)、[zRegionPadding](schemas.md#zregionpadding)、[zStackCornerRadius](schemas.md#zstackcornerradius)、[zTheme](schemas.md#ztheme)、[zTooltip](schemas.md#ztooltip)、[zXLinearAxis](schemas.md#zxlinearaxis)、[zYBandAxis](schemas.md#zybandaxis) + +## zBarParallelConfig + +源码：[packages/vseed/src/types/properties/config/bar.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/bar.ts) + +包导出：`zBarParallelConfig` + +```typescript +const zBarParallelConfig = zBarConfig +``` + +关联 API：[zBarConfig](schemas.md#zbarconfig) + +## zBarPercent + +源码：[packages/vseed/src/types/chartType/barPercent/zBarPercent.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/chartType/barPercent/zBarPercent.ts) + +包导出：`zBarPercent` + +```typescript +const zBarPercent = z.object({ + chartType: z.literal('barPercent'), + dataset: zDataset.nullish(), + encoding: zEncoding.nullish(), + dimensions: zDimensions.nullish(), + measures: zMeasures.nullish(), + page: zPage.nullish(), + + backgroundColor: zBackgroundColor.nullish(), + color: zColor.nullish(), + label: zLabel.nullish(), + legend: zLegend.nullish(), + regionPadding: zRegionPadding.nullish(), + tooltip: zTooltip.nullish(), + brush: zBrush.nullish(), + animation: zBarLikeAnimation.nullish(), + xAxis: zXLinearAxis.nullish(), + yAxis: zYBandAxis.nullish(), + crosshairRect: zCrosshairRect.nullish(), + cornerRadius: zCornerRadius.nullish(), + stackCornerRadius: zStackCornerRadius.nullish(), + barMaxWidth: zBarMaxWidth.nullish(), + theme: zTheme.nullish(), + barStyle: z.array(zBarStyle).or(zBarStyle).nullish(), + annotationPoint: z.array(zAnnotationPoint).or(zAnnotationPoint).nullish(), + annotationVerticalLine: z.array(zAnnotationVerticalLine).or(zAnnotationVerticalLine).nullish(), + annotationHorizontalLine: z.array(zAnnotationHorizontalLine).or(zAnnotationHorizontalLine).nullish(), + annotationArea: z.array(zAnnotationArea).or(zAnnotationArea).nullish(), + dimensionLinkage: zDimensionLinkage.nullish(), + locale: zLocale.nullish(), +}) +``` + +关联 API：[zAnnotationArea](schemas.md#zannotationarea)、[zAnnotationHorizontalLine](schemas.md#zannotationhorizontalline)、[zAnnotationPoint](schemas.md#zannotationpoint)、[zAnnotationVerticalLine](schemas.md#zannotationverticalline)、[zBackgroundColor](schemas.md#zbackgroundcolor)、[zBarLikeAnimation](schemas.md#zbarlikeanimation)、[zBarMaxWidth](schemas.md#zbarmaxwidth)、[zBarStyle](schemas.md#zbarstyle)、[zBrush](schemas.md#zbrush)、[zColor](schemas.md#zcolor)、[zCornerRadius](schemas.md#zcornerradius)、[zCrosshairRect](schemas.md#zcrosshairrect)、[zDataset](schemas.md#zdataset)、[zDimensionLinkage](schemas.md#zdimensionlinkage)、[zDimensions](schemas.md#zdimensions)、[zEncoding](schemas.md#zencoding)、[zLabel](schemas.md#zlabel)、[zLegend](schemas.md#zlegend)、[zLocale](schemas.md#zlocale)、[zMeasures](schemas.md#zmeasures)、[zPage](schemas.md#zpage)、[zRegionPadding](schemas.md#zregionpadding)、[zStackCornerRadius](schemas.md#zstackcornerradius)、[zTheme](schemas.md#ztheme)、[zTooltip](schemas.md#ztooltip)、[zXLinearAxis](schemas.md#zxlinearaxis)、[zYBandAxis](schemas.md#zybandaxis) + +## zBarPercentConfig + +源码：[packages/vseed/src/types/properties/config/bar.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/bar.ts) + +包导出：`zBarPercentConfig` + +```typescript +const zBarPercentConfig = zBarConfig +``` + +关联 API：[zBarConfig](schemas.md#zbarconfig) + +## zBarStyle + +源码：[packages/vseed/src/types/properties/markStyle/zBarStyle.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/markStyle/zBarStyle.ts) + +包导出：`zBarStyle` + +```typescript +const zBarStyle = z.object({ + selector: z.union([zSelector, zSelectors]).nullish(), + dynamicFilter: zChartDynamicFilter.optional(), + barVisible: z.boolean().nullish(), + barColor: z.string().nullish(), + barGradient: z.boolean().nullish(), + barColorOpacity: z.number().nullish(), + barBorderColor: z.string().nullish(), + barBorderWidth: z.number().nullish(), + barBorderStyle: z.union([z.literal('solid'), z.literal('dashed'), z.literal('dotted')]).nullish(), + barRadius: z.union([z.number(), z.array(z.number())]).nullish(), +}) +``` + +关联 API：[zChartDynamicFilter](schemas.md#zchartdynamicfilter)、[zSelector](schemas.md#zselector)、[zSelectors](schemas.md#zselectors) + +## zBodyCellStyle + +源码：[packages/vseed/src/types/properties/cellStyle/bodyCellStyle.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/cellStyle/bodyCellStyle.ts) + +包导出：`zBodyCellStyle` + +```typescript +const zBodyCellStyle = z.object({ + selector: z.union([zSelector, zSelectors, zFieldSelector]).nullish(), + dynamicFilter: zTableDynamicFilter.nullish(), + backgroundColor: z.string().nullish(), + enableBackgroundColorScale: z.boolean().nullish(), + backgroundColorScale: z + .object({ + minValue: z.number().optional(), + maxValue: z.number().optional(), + minColor: z.string(), + maxColor: z.string(), + }) + .nullish(), + textFontSize: z.number().nullish(), + borderColor: z.string().nullish(), + borderLineWidth: z.number().nullish(), + enableProgressBar: z.boolean().nullish(), + barMin: z.number().nullish(), + barMax: z.number().nullish(), + barPositiveColor: z.string().nullish(), + barNegativeColor: z.string().nullish(), +}) +``` + +关联 API：[zFieldSelector](schemas.md#zfieldselector)、[zSelector](schemas.md#zselector)、[zSelectors](schemas.md#zselectors)、[zTableDynamicFilter](schemas.md#ztabledynamicfilter) + +## zBoxGapInGroup + +源码：[packages/vseed/src/types/properties/config/boxWidth/zBoxWidth.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/boxWidth/zBoxWidth.ts) + +包导出：`zBoxGapInGroup` + +```typescript +const zBoxGapInGroup = z.number().or(z.string()) +``` + +## zBoxMaxWidth + +源码：[packages/vseed/src/types/properties/config/boxWidth/zBoxWidth.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/boxWidth/zBoxWidth.ts) + +包导出：`zBoxMaxWidth` + +```typescript +const zBoxMaxWidth = z.number().or(z.string()) +``` + +## zBoxPlot + +源码：[packages/vseed/src/types/chartType/boxPlot/zBoxPlot.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/chartType/boxPlot/zBoxPlot.ts) + +包导出：`zBoxPlot` + +```typescript +const zBoxPlot = z.object({ + chartType: z.literal('boxPlot'), + dataset: zDataset.nullish(), + encoding: zEncoding.nullish(), + dimensions: zDimensions.nullish(), + measures: zMeasures.nullish(), + page: zPage.nullish(), + + backgroundColor: zBackgroundColor.nullish(), + color: zColor.nullish(), + label: zLabel.nullish(), + legend: zLegend.nullish(), + tooltip: zTooltip.nullish(), + brush: zBrush.nullish(), + xAxis: zXBandAxis.nullish(), + yAxis: zYLinearAxis.nullish(), + sort: zSort.nullish(), + sortLegent: zSortLegend.nullish(), + crosshairRect: zCrosshairRect.nullish(), + boxPlotStyle: z.array(zBoxPlotStyle).or(zBoxPlotStyle).nullish(), + outlierStyle: z.array(zOutlierStyle).or(zOutlierStyle).nullish(), + theme: zTheme.nullish(), + whiskers: zWhiskersConfig.nullish(), + annotationPoint: z.array(zAnnotationPoint).or(zAnnotationPoint).nullish(), + annotationVerticalLine: z.array(zAnnotationVerticalLine).or(zAnnotationVerticalLine).nullish(), + annotationHorizontalLine: z.array(zAnnotationHorizontalLine).or(zAnnotationHorizontalLine).nullish(), + annotationArea: z.array(zAnnotationArea).or(zAnnotationArea).nullish(), + dimensionLinkage: zDimensionLinkage.nullish(), + locale: zLocale.nullish(), + boxMaxWidth: zBoxMaxWidth.nullish(), + boxGapInGroup: zBoxGapInGroup.nullish(), +}) +``` + +关联 API：[zAnnotationArea](schemas.md#zannotationarea)、[zAnnotationHorizontalLine](schemas.md#zannotationhorizontalline)、[zAnnotationPoint](schemas.md#zannotationpoint)、[zAnnotationVerticalLine](schemas.md#zannotationverticalline)、[zBackgroundColor](schemas.md#zbackgroundcolor)、[zBoxGapInGroup](schemas.md#zboxgapingroup)、[zBoxMaxWidth](schemas.md#zboxmaxwidth)、[zBoxPlotStyle](schemas.md#zboxplotstyle)、[zBrush](schemas.md#zbrush)、[zColor](schemas.md#zcolor)、[zCrosshairRect](schemas.md#zcrosshairrect)、[zDataset](schemas.md#zdataset)、[zDimensionLinkage](schemas.md#zdimensionlinkage)、[zDimensions](schemas.md#zdimensions)、[zEncoding](schemas.md#zencoding)、[zLabel](schemas.md#zlabel)、[zLegend](schemas.md#zlegend)、[zLocale](schemas.md#zlocale)、[zMeasures](schemas.md#zmeasures)、[zOutlierStyle](schemas.md#zoutlierstyle)、[zPage](schemas.md#zpage)、[zSort](schemas.md#zsort)、[zSortLegend](schemas.md#zsortlegend)、[zTheme](schemas.md#ztheme)、[zTooltip](schemas.md#ztooltip)、[zWhiskersConfig](schemas.md#zwhiskersconfig)、[zXBandAxis](schemas.md#zxbandaxis)、[zYLinearAxis](schemas.md#zylinearaxis) + +## zBoxplotConfig + +源码：[packages/vseed/src/types/properties/config/boxplot.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/boxplot.ts) + +关联类型：通过公开 API 的签名引用，不是包入口的独立导出。 + +```typescript +const zBoxplotConfig = z.object({ + backgroundColor: zBackgroundColor.nullish(), + label: zLabel.nullish(), + color: zColor.nullish(), + tooltip: zTooltip.nullish(), + legend: zLegend.nullish(), + + xAxis: zXBandAxis.nullish(), + yAxis: zYLinearAxis.nullish(), + crosshairRect: zCrosshairRect.nullish(), + pivotGrid: zPivotChartGridConfig.nullish(), + annotation: zAnnotationConfig.nullish(), + + whiskers: zWhiskersConfig.nullish(), + + dimensionLinkage: zDimensionLinkage.nullish(), + + boxPlotStyle: zBoxPlotStyle.omit({ selector: true }).nullish(), + outlierStyle: zOutlierStyle.omit({ selector: true }).nullish(), + boxMaxWidth: zBoxMaxWidth.nullish(), + boxGapInGroup: zBoxGapInGroup.nullish(), +}) +``` + +关联 API：[zAnnotationConfig](schemas.md#zannotationconfig)、[zBackgroundColor](schemas.md#zbackgroundcolor)、[zBoxGapInGroup](schemas.md#zboxgapingroup)、[zBoxMaxWidth](schemas.md#zboxmaxwidth)、[zBoxPlotStyle](schemas.md#zboxplotstyle)、[zColor](schemas.md#zcolor)、[zCrosshairRect](schemas.md#zcrosshairrect)、[zDimensionLinkage](schemas.md#zdimensionlinkage)、[zLabel](schemas.md#zlabel)、[zLegend](schemas.md#zlegend)、[zOutlierStyle](schemas.md#zoutlierstyle)、[zPivotChartGridConfig](schemas.md#zpivotchartgridconfig)、[zTooltip](schemas.md#ztooltip)、[zWhiskersConfig](schemas.md#zwhiskersconfig)、[zXBandAxis](schemas.md#zxbandaxis)、[zYLinearAxis](schemas.md#zylinearaxis) + +## zBoxPlotStyle + +源码：[packages/vseed/src/types/properties/markStyle/zBoxPlotStyle.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/markStyle/zBoxPlotStyle.ts) + +包导出：`zBoxPlotStyle` + +```typescript +const zBoxPlotStyle = z.object({ + selector: zSelector.or(zSelectors).nullish(), + boxVisible: z.boolean().nullish(), + boxColor: z.string().nullish(), + boxColorOpacity: z.number().min(0).max(1).nullish(), + boxBorderColor: z.string().nullish(), + boxBorderWidth: z.number().min(0).nullish(), + boxBorderOpacity: z.number().min(0).max(1).nullish(), + boxCornerRadius: z.number().nullish(), + medianBorderColor: z.string().nullish(), + whiskerBorderColor: z.string().nullish(), +}) +``` + +关联 API：[zSelector](schemas.md#zselector)、[zSelectors](schemas.md#zselectors) + +## zBrush + +源码：[packages/vseed/src/types/properties/brush/zBrush.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/brush/zBrush.ts) + +包导出：`zBrush` + +```typescript +const zBrush = z.object({ + enable: z.boolean().optional().default(false), + brushType: z.enum(['x', 'y', 'rect', 'polygon']).optional().default('rect'), + brushMode: z.enum(['single', 'multiple']).optional().default('single'), + removeOnClick: z.boolean().optional().default(true), + inBrushStyle: zBrushStyleConfig.optional(), + outOfBrushStyle: zBrushStyleConfig.optional(), +}) +``` + +## zBrushConfig + +源码：[packages/vseed/src/types/properties/brush/zBrush.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/brush/zBrush.ts) + +包导出：`zBrushConfig` + +```typescript +const zBrushConfig = z.object({ + enable: z.boolean().optional().default(false), + inBrushStyle: zBrushStyleConfig.optional(), + outOfBrushStyle: zBrushStyleConfig.optional(), +}) +``` + +## zCellSelector + +源码：[packages/vseed/src/types/dataSelector/selector.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/dataSelector/selector.ts) + +包导出：`zCellSelector` + +```typescript +const zCellSelector = z.object({ + __row_index: z.number(), + field: z.union([z.string(), z.literal('*')]), +}) +``` + +## zCellStyle + +源码：[packages/vseed/src/types/properties/cellStyle/cellStyle.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/cellStyle/cellStyle.ts) + +关联类型：通过公开 API 的签名引用，不是包入口的独立导出。 + +```typescript +const zCellStyle = z.object({ + bodyCellStyle: zBodyCellStyle.nullish(), +}) +``` + +关联 API：[zBodyCellStyle](schemas.md#zbodycellstyle) + +## zCenterText + +源码：[packages/vseed/src/types/properties/config/centerText.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/centerText.ts) + +包导出：`zCenterText` + +```typescript +const zCenterText = z.object({ + titleText: z.union([z.string(), z.number()]).nullish(), + subTitleText: z.union([z.string(), z.number()]).nullish(), +}) +``` + +## zCenterTextConfig + +源码：[packages/vseed/src/types/properties/config/centerText.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/centerText.ts) + +包导出：`zCenterTextConfig` + +```typescript +/** 中心文本的主题配置；图表 DSL 只需提供文本，排版由主题统一管理。 */ +const zCenterTextConfig = zCenterText.extend({ + titleFontSize: z.number().positive().nullish(), + titleFontWeight: z.union([z.number(), z.string()]).nullish(), + subTitleFontSize: z.number().positive().nullish(), + subTitleOpacity: z.number().min(0).max(1).nullish(), + gap: z.number().nonnegative().nullish(), +}) +``` + +关联 API：[zCenterText](schemas.md#zcentertext) + +## zChartDynamicFilter + +源码：[packages/vseed/src/types/dataSelector/selector.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/dataSelector/selector.ts) + +包导出：`zChartDynamicFilter` + +```typescript +const zChartDynamicFilter = z.object({ + type: z.literal('row-with-field'), + description: z.string().optional(), + code: z.string(), + fallback: z.union([zSelector, zSelectors]).optional(), + result: z + .object({ + success: z.boolean(), + data: z.array(zCellSelector).optional(), + }) + .optional(), +}) +``` + +关联 API：[zCellSelector](schemas.md#zcellselector)、[zSelector](schemas.md#zselector)、[zSelectors](schemas.md#zselectors) + +## zChartType + +源码：[packages/vseed/src/types/properties/chartType/chartType.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/chartType/chartType.ts) + +包导出：`zChartType` + +```typescript +const zChartType = z.enum([ + 'table', + 'pivotTable', + // cartesian + 'line', + 'column', + 'columnPercent', + 'columnParallel', + 'bar', + 'barPercent', + 'barParallel', + 'raceBar', + 'area', + 'areaPercent', + 'scatter', + 'dualAxis', + // polar + 'rose', + 'roseParallel', + 'pie', + 'donut', + 'radar', + // race + 'raceBar', + 'raceColumn', + 'raceScatter', + 'raceLine', + 'racePie', + 'raceDonut', + // hierarchy + 'treeMap', + 'sunburst', + 'circlePacking', + 'hierarchySankey', + 'sankey', + // other + 'funnel', + 'heatmap', + 'boxPlot', + 'histogram', +]) +``` + +## zCirclePacking + +源码：[packages/vseed/src/types/chartType/circlePacking/zCirclePacking.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/chartType/circlePacking/zCirclePacking.ts) + +包导出：`zCirclePacking` + +```typescript +const zCirclePacking = z.object({ + chartType: z.literal('circlePacking'), + dataset: zDataset.nullish(), + dimensions: zDimensions.nullish(), + measures: zMeasures.nullish(), + page: zPage.nullish(), + + backgroundColor: zBackgroundColor.nullish(), + color: zColor.nullish(), + label: zLabel.nullish(), + tooltip: zTooltip.nullish(), + theme: zTheme.nullish(), + locale: zLocale.nullish(), +}) +``` + +关联 API：[zBackgroundColor](schemas.md#zbackgroundcolor)、[zColor](schemas.md#zcolor)、[zDataset](schemas.md#zdataset)、[zDimensions](schemas.md#zdimensions)、[zLabel](schemas.md#zlabel)、[zLocale](schemas.md#zlocale)、[zMeasures](schemas.md#zmeasures)、[zPage](schemas.md#zpage)、[zTheme](schemas.md#ztheme)、[zTooltip](schemas.md#ztooltip) + +## zCirclePackingConfig + +源码：[packages/vseed/src/types/properties/config/circlePacking.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/circlePacking.ts) + +包导出：`zCirclePackingConfig` + +```typescript +const zCirclePackingConfig = z.object({ + backgroundColor: zBackgroundColor.nullish(), + label: zLabel.nullish(), + color: zColor.nullish(), + tooltip: zTooltip.nullish(), + legend: zLegend.nullish(), + pivotGrid: zPivotChartGridConfig.nullish(), +}) +``` + +关联 API：[zBackgroundColor](schemas.md#zbackgroundcolor)、[zColor](schemas.md#zcolor)、[zLabel](schemas.md#zlabel)、[zLegend](schemas.md#zlegend)、[zPivotChartGridConfig](schemas.md#zpivotchartgridconfig)、[zTooltip](schemas.md#ztooltip) + +## zColor + +源码：[packages/vseed/src/types/properties/config/color/color.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/color/color.ts) + +包导出：`zColor` + +```typescript +const zColor = z.object({ + colorScheme: z.array(z.string()).nullish(), + linearColorScheme: z.array(z.string()).nullish(), + colorMapping: z.record(z.string(), z.string()).nullish(), +}) +``` + +## zColorLegend + +源码：[packages/vseed/src/types/properties/config/legend/legend.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/legend/legend.ts) + +包导出：`zColorLegend` + +```typescript +const zColorLegend = z.object({ + position: z + .enum([ + 'left', + 'leftTop', + 'leftBottom', + 'lt', + 'lb', + 'top', + 'topLeft', + 'topRight', + 'tl', + 'tr', + 'right', + 'rightTop', + 'rightBottom', + 'rt', + 'rb', + 'bottom', + 'bottomLeft', + 'bottomRight', + 'bl', + 'br', + ]) + .default('bottom') + .nullish(), + enable: z.boolean().default(true).nullish(), + railBackgroundColor: z.string().nullish(), + handlerBorderColor: z.string().nullish(), + labelColor: z.string().default('#fff').nullish(), + labelFontSize: z.number().default(12).nullish(), + labelFontWeight: z.number().or(z.string()).default(400).nullish(), +}) +``` + +## zColumn + +源码：[packages/vseed/src/types/chartType/column/zColumn.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/chartType/column/zColumn.ts) + +包导出：`zColumn` + +```typescript +const zColumn = z.object({ + chartType: z.literal('column'), + dataset: zDataset.nullish(), + encoding: zEncoding.nullish(), + dimensions: zDimensions.nullish(), + measures: zMeasures.nullish(), + page: zPage.nullish(), + player: zPlayer.nullish(), + + backgroundColor: zBackgroundColor.nullish(), + color: zColor.nullish(), + label: zLabel.nullish(), + legend: zLegend.nullish(), + regionPadding: zRegionPadding.nullish(), + tooltip: zTooltip.nullish(), + brush: zBrush.nullish(), + animation: zBarLikeAnimation.nullish(), + xAxis: zXBandAxis.nullish(), + yAxis: zYLinearAxis.nullish(), + sort: zSort.nullish(), + sortLegent: zSortLegend.nullish(), + crosshairRect: zCrosshairRect.nullish(), + cornerRadius: zCornerRadius.nullish(), + stackCornerRadius: zStackCornerRadius.nullish(), + barMaxWidth: zBarMaxWidth.nullish(), + theme: zTheme.nullish(), + barStyle: z.array(zBarStyle).or(zBarStyle).nullish(), + annotationPoint: z.array(zAnnotationPoint).or(zAnnotationPoint).nullish(), + annotationVerticalLine: z.array(zAnnotationVerticalLine).or(zAnnotationVerticalLine).nullish(), + annotationHorizontalLine: z.array(zAnnotationHorizontalLine).or(zAnnotationHorizontalLine).nullish(), + annotationArea: z.array(zAnnotationArea).or(zAnnotationArea).nullish(), + annotationDifferenceLine: z.array(zAnnotationDifferenceLine).or(zAnnotationDifferenceLine).nullish(), + polynomialRegressionLine: z.array(zPolynomialRegressionLine).or(zPolynomialRegressionLine).nullish(), + dimensionLinkage: zDimensionLinkage.nullish(), + locale: zLocale.nullish(), +}) +``` + +关联 API：[zAnnotationArea](schemas.md#zannotationarea)、[zAnnotationDifferenceLine](schemas.md#zannotationdifferenceline)、[zAnnotationHorizontalLine](schemas.md#zannotationhorizontalline)、[zAnnotationPoint](schemas.md#zannotationpoint)、[zAnnotationVerticalLine](schemas.md#zannotationverticalline)、[zBackgroundColor](schemas.md#zbackgroundcolor)、[zBarLikeAnimation](schemas.md#zbarlikeanimation)、[zBarMaxWidth](schemas.md#zbarmaxwidth)、[zBarStyle](schemas.md#zbarstyle)、[zBrush](schemas.md#zbrush)、[zColor](schemas.md#zcolor)、[zCornerRadius](schemas.md#zcornerradius)、[zCrosshairRect](schemas.md#zcrosshairrect)、[zDataset](schemas.md#zdataset)、[zDimensionLinkage](schemas.md#zdimensionlinkage)、[zDimensions](schemas.md#zdimensions)、[zEncoding](schemas.md#zencoding)、[zLabel](schemas.md#zlabel)、[zLegend](schemas.md#zlegend)、[zLocale](schemas.md#zlocale)、[zMeasures](schemas.md#zmeasures)、[zPage](schemas.md#zpage)、[zPlayer](schemas.md#zplayer)、[zPolynomialRegressionLine](schemas.md#zpolynomialregressionline)、[zRegionPadding](schemas.md#zregionpadding)、[zSort](schemas.md#zsort)、[zSortLegend](schemas.md#zsortlegend)、[zStackCornerRadius](schemas.md#zstackcornerradius)、[zTheme](schemas.md#ztheme)、[zTooltip](schemas.md#ztooltip)、[zXBandAxis](schemas.md#zxbandaxis)、[zYLinearAxis](schemas.md#zylinearaxis) + +## zColumnConfig + +源码：[packages/vseed/src/types/properties/config/column.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/column.ts) + +包导出：`zColumnConfig` + +```typescript +const zColumnConfig = zColumnParallelConfig.extend({ + regressionLine: zRegressionLine.nullish(), +}) +``` + +关联 API：[zColumnParallelConfig](schemas.md#zcolumnparallelconfig)、[zRegressionLine](schemas.md#zregressionline) + +## zColumnParallel + +源码：[packages/vseed/src/types/chartType/columnParallel/zColumnParallel.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/chartType/columnParallel/zColumnParallel.ts) + +包导出：`zColumnParallel` + +```typescript +const zColumnParallel = z.object({ + chartType: z.literal('columnParallel'), + dataset: zDataset.nullish(), + encoding: zEncoding.nullish(), + dimensions: zDimensions.nullish(), + measures: zMeasures.nullish(), + page: zPage.nullish(), + player: zPlayer.nullish(), + + backgroundColor: zBackgroundColor.nullish(), + color: zColor.nullish(), + label: zLabel.nullish(), + legend: zLegend.nullish(), + regionPadding: zRegionPadding.nullish(), + tooltip: zTooltip.nullish(), + brush: zBrush.nullish(), + animation: zBarLikeAnimation.nullish(), + xAxis: zXBandAxis.nullish(), + yAxis: zYLinearAxis.nullish(), + crosshairRect: zCrosshairRect.nullish(), + cornerRadius: zCornerRadius.nullish(), + stackCornerRadius: zStackCornerRadius.nullish(), + barMaxWidth: zBarMaxWidth.nullish(), + barGapInGroup: zBarGapInGroup.nullish(), + theme: zTheme.nullish(), + barStyle: z.array(zBarStyle).or(zBarStyle).nullish(), + annotationPoint: z.array(zAnnotationPoint).or(zAnnotationPoint).nullish(), + annotationVerticalLine: z.array(zAnnotationVerticalLine).or(zAnnotationVerticalLine).nullish(), + annotationHorizontalLine: z.array(zAnnotationHorizontalLine).or(zAnnotationHorizontalLine).nullish(), + annotationArea: z.array(zAnnotationArea).or(zAnnotationArea).nullish(), + annotationDifferenceLine: z.array(zAnnotationDifferenceLine).or(zAnnotationDifferenceLine).nullish(), + dimensionLinkage: zDimensionLinkage.nullish(), + locale: zLocale.nullish(), +}) +``` + +关联 API：[zAnnotationArea](schemas.md#zannotationarea)、[zAnnotationDifferenceLine](schemas.md#zannotationdifferenceline)、[zAnnotationHorizontalLine](schemas.md#zannotationhorizontalline)、[zAnnotationPoint](schemas.md#zannotationpoint)、[zAnnotationVerticalLine](schemas.md#zannotationverticalline)、[zBackgroundColor](schemas.md#zbackgroundcolor)、[zBarGapInGroup](schemas.md#zbargapingroup)、[zBarLikeAnimation](schemas.md#zbarlikeanimation)、[zBarMaxWidth](schemas.md#zbarmaxwidth)、[zBarStyle](schemas.md#zbarstyle)、[zBrush](schemas.md#zbrush)、[zColor](schemas.md#zcolor)、[zCornerRadius](schemas.md#zcornerradius)、[zCrosshairRect](schemas.md#zcrosshairrect)、[zDataset](schemas.md#zdataset)、[zDimensionLinkage](schemas.md#zdimensionlinkage)、[zDimensions](schemas.md#zdimensions)、[zEncoding](schemas.md#zencoding)、[zLabel](schemas.md#zlabel)、[zLegend](schemas.md#zlegend)、[zLocale](schemas.md#zlocale)、[zMeasures](schemas.md#zmeasures)、[zPage](schemas.md#zpage)、[zPlayer](schemas.md#zplayer)、[zRegionPadding](schemas.md#zregionpadding)、[zStackCornerRadius](schemas.md#zstackcornerradius)、[zTheme](schemas.md#ztheme)、[zTooltip](schemas.md#ztooltip)、[zXBandAxis](schemas.md#zxbandaxis)、[zYLinearAxis](schemas.md#zylinearaxis) + +## zColumnParallelConfig + +源码：[packages/vseed/src/types/properties/config/column.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/column.ts) + +包导出：`zColumnParallelConfig` + +```typescript +const zColumnParallelConfig = z.object({ + backgroundColor: zBackgroundColor.nullish(), + label: zLabel.nullish(), + color: zColor.nullish(), + tooltip: zTooltip.nullish(), + legend: zLegend.nullish(), + regionPadding: zRegionPadding.nullish(), + + xAxis: zXBandAxis.nullish(), + yAxis: zYLinearAxis.nullish(), + crosshairRect: zCrosshairRect.nullish(), + cornerRadius: zCornerRadius.nullish(), + stackCornerRadius: zStackCornerRadius.nullish(), + barMaxWidth: zBarMaxWidth.nullish(), + barGapInGroup: zBarGapInGroup.nullish(), + pivotGrid: zPivotChartGridConfig.nullish(), + annotation: zAnnotationConfig.nullish(), + + dimensionLinkage: zDimensionLinkage.nullish(), + + brush: zBrushConfig.nullish(), + animation: zBarLikeAnimation.nullish(), +}) +``` + +关联 API：[zAnnotationConfig](schemas.md#zannotationconfig)、[zBackgroundColor](schemas.md#zbackgroundcolor)、[zBarGapInGroup](schemas.md#zbargapingroup)、[zBarLikeAnimation](schemas.md#zbarlikeanimation)、[zBarMaxWidth](schemas.md#zbarmaxwidth)、[zBrushConfig](schemas.md#zbrushconfig)、[zColor](schemas.md#zcolor)、[zCornerRadius](schemas.md#zcornerradius)、[zCrosshairRect](schemas.md#zcrosshairrect)、[zDimensionLinkage](schemas.md#zdimensionlinkage)、[zLabel](schemas.md#zlabel)、[zLegend](schemas.md#zlegend)、[zPivotChartGridConfig](schemas.md#zpivotchartgridconfig)、[zRegionPadding](schemas.md#zregionpadding)、[zStackCornerRadius](schemas.md#zstackcornerradius)、[zTooltip](schemas.md#ztooltip)、[zXBandAxis](schemas.md#zxbandaxis)、[zYLinearAxis](schemas.md#zylinearaxis) + +## zColumnPercent + +源码：[packages/vseed/src/types/chartType/columnPercent/zColumnPercent.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/chartType/columnPercent/zColumnPercent.ts) + +包导出：`zColumnPercent` + +```typescript +const zColumnPercent = z.object({ + chartType: z.literal('columnPercent'), + dataset: zDataset.nullish(), + encoding: zEncoding.nullish(), + dimensions: zDimensions.nullish(), + measures: zMeasures.nullish(), + page: zPage.nullish(), + + backgroundColor: zBackgroundColor.nullish(), + color: zColor.nullish(), + label: zLabel.nullish(), + legend: zLegend.nullish(), + regionPadding: zRegionPadding.nullish(), + tooltip: zTooltip.nullish(), + brush: zBrush.nullish(), + animation: zBarLikeAnimation.nullish(), + xAxis: zXBandAxis.nullish(), + yAxis: zYLinearAxis.nullish(), + crosshairRect: zCrosshairRect.nullish(), + cornerRadius: zCornerRadius.nullish(), + stackCornerRadius: zStackCornerRadius.nullish(), + barMaxWidth: zBarMaxWidth.nullish(), + theme: zTheme.nullish(), + barStyle: z.array(zBarStyle).or(zBarStyle).nullish(), + annotationPoint: z.array(zAnnotationPoint).or(zAnnotationPoint).nullish(), + annotationVerticalLine: z.array(zAnnotationVerticalLine).or(zAnnotationVerticalLine).nullish(), + annotationHorizontalLine: z.array(zAnnotationHorizontalLine).or(zAnnotationHorizontalLine).nullish(), + annotationArea: z.array(zAnnotationArea).or(zAnnotationArea).nullish(), + dimensionLinkage: zDimensionLinkage.nullish(), + locale: zLocale.nullish(), +}) +``` + +关联 API：[zAnnotationArea](schemas.md#zannotationarea)、[zAnnotationHorizontalLine](schemas.md#zannotationhorizontalline)、[zAnnotationPoint](schemas.md#zannotationpoint)、[zAnnotationVerticalLine](schemas.md#zannotationverticalline)、[zBackgroundColor](schemas.md#zbackgroundcolor)、[zBarLikeAnimation](schemas.md#zbarlikeanimation)、[zBarMaxWidth](schemas.md#zbarmaxwidth)、[zBarStyle](schemas.md#zbarstyle)、[zBrush](schemas.md#zbrush)、[zColor](schemas.md#zcolor)、[zCornerRadius](schemas.md#zcornerradius)、[zCrosshairRect](schemas.md#zcrosshairrect)、[zDataset](schemas.md#zdataset)、[zDimensionLinkage](schemas.md#zdimensionlinkage)、[zDimensions](schemas.md#zdimensions)、[zEncoding](schemas.md#zencoding)、[zLabel](schemas.md#zlabel)、[zLegend](schemas.md#zlegend)、[zLocale](schemas.md#zlocale)、[zMeasures](schemas.md#zmeasures)、[zPage](schemas.md#zpage)、[zRegionPadding](schemas.md#zregionpadding)、[zStackCornerRadius](schemas.md#zstackcornerradius)、[zTheme](schemas.md#ztheme)、[zTooltip](schemas.md#ztooltip)、[zXBandAxis](schemas.md#zxbandaxis)、[zYLinearAxis](schemas.md#zylinearaxis) + +## zColumnPercentConfig + +源码：[packages/vseed/src/types/properties/config/column.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/column.ts) + +包导出：`zColumnPercentConfig` + +```typescript +const zColumnPercentConfig = zColumnParallelConfig.extend({}) +``` + +关联 API：[zColumnParallelConfig](schemas.md#zcolumnparallelconfig) + +## zConfig + +源码：[packages/vseed/src/types/properties/config/config.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/config.ts) + +包导出：`zConfig` + +```typescript +const zConfig = z.object({ + table: zTableConfig.nullish(), + pivotTable: zPivotTableConfig.nullish(), + + // cartesian + line: zLineConfig.nullish(), + column: zColumnConfig.nullish(), + columnParallel: zColumnParallelConfig.nullish(), + columnPercent: zColumnPercentConfig.nullish(), + bar: zBarConfig.nullish(), + barParallel: zBarParallelConfig.nullish(), + barPercent: zBarPercentConfig.nullish(), + area: zAreaConfig.nullish(), + areaPercent: zAreaPercentConfig.nullish(), + + scatter: zScatterConfig.nullish(), + dualAxis: zDualAxisConfig.nullish(), + + // polar + rose: zRoseConfig.nullish(), + roseParallel: zRoseParallelConfig.nullish(), + pie: zPieConfig.nullish(), + donut: zDonutConfig.nullish(), + radar: zRadarConfig.nullish(), + + // race + raceBar: zRaceBarConfig.nullish(), + raceColumn: zRaceColumnConfig.nullish(), + raceScatter: zRaceScatterConfig.nullish(), + raceLine: zRaceLineConfig.nullish(), + racePie: zRacePieConfig.nullish(), + raceDonut: zRaceDonutConfig.nullish(), + + // hierarchy + treeMap: zTreeMapConfig.nullish(), + sunburst: zSunburstConfig.nullish(), + circlePacking: zCirclePackingConfig.nullish(), + hierarchySankey: zHierarchySankeyConfig.nullish(), + sankey: zSankeyConfig.nullish(), + + // other + funnel: zFunnelConfig.nullish(), + heatmap: zHeatmapConfig.nullish(), + boxPlot: zBoxplotConfig.nullish(), + histogram: zHistogramConfig.nullish(), +}) +``` + +关联 API：[zAreaConfig](schemas.md#zareaconfig)、[zAreaPercentConfig](schemas.md#zareapercentconfig)、[zBarConfig](schemas.md#zbarconfig)、[zBarParallelConfig](schemas.md#zbarparallelconfig)、[zBarPercentConfig](schemas.md#zbarpercentconfig)、[zBoxplotConfig](schemas.md#zboxplotconfig)、[zCirclePackingConfig](schemas.md#zcirclepackingconfig)、[zColumnConfig](schemas.md#zcolumnconfig)、[zColumnParallelConfig](schemas.md#zcolumnparallelconfig)、[zColumnPercentConfig](schemas.md#zcolumnpercentconfig)、[zDonutConfig](schemas.md#zdonutconfig)、[zDualAxisConfig](schemas.md#zdualaxisconfig)、[zFunnelConfig](schemas.md#zfunnelconfig)、[zHeatmapConfig](schemas.md#zheatmapconfig)、[zHierarchySankeyConfig](schemas.md#zhierarchysankeyconfig)、[zHistogramConfig](schemas.md#zhistogramconfig)、[zLineConfig](schemas.md#zlineconfig)、[zPieConfig](schemas.md#zpieconfig)、[zPivotTableConfig](schemas.md#zpivottableconfig)、[zRaceBarConfig](schemas.md#zracebarconfig)、[zRaceColumnConfig](schemas.md#zracecolumnconfig)、[zRaceDonutConfig](schemas.md#zracedonutconfig)、[zRaceLineConfig](schemas.md#zracelineconfig)、[zRacePieConfig](schemas.md#zracepieconfig)、[zRaceScatterConfig](schemas.md#zracescatterconfig)、[zRadarConfig](schemas.md#zradarconfig)、[zRoseConfig](schemas.md#zroseconfig)、[zRoseParallelConfig](schemas.md#zroseparallelconfig)、[zSankeyConfig](schemas.md#zsankeyconfig)、[zScatterConfig](schemas.md#zscatterconfig)、[zSunburstConfig](schemas.md#zsunburstconfig)、[zTableConfig](schemas.md#ztableconfig)、[zTreeMapConfig](schemas.md#ztreemapconfig) + +## zCornerRadius + +源码：[packages/vseed/src/types/properties/config/cornerRadius/cornerRadius.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/cornerRadius/cornerRadius.ts) + +包导出：`zCornerRadius` + +```typescript +const zCornerRadius = z.number().or(z.array(z.number())) +``` + +## zCrosshairLine + +源码：[packages/vseed/src/types/properties/config/crosshair/zCrosshair.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/crosshair/zCrosshair.ts) + +包导出：`zCrosshairLine` + +```typescript +const zCrosshairLine = z.object({ + visible: z.boolean().nullish(), + lineColor: z.string().nullish(), + labelColor: z.string().nullish(), + labelVisible: z.boolean().nullish(), + labelBackgroundColor: z.string().nullish(), + lineDash: z.array(z.number()).nullish(), +}) +``` + +## zCrosshairRect + +源码：[packages/vseed/src/types/properties/config/crosshair/zCrosshair.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/crosshair/zCrosshair.ts) + +包导出：`zCrosshairRect` + +```typescript +const zCrosshairRect = z.object({ + visible: z.boolean().nullish(), + rectColor: z.string().nullish(), + labelColor: z.string().nullish(), + labelVisible: z.boolean().nullish(), + labelBackgroundColor: z.string().nullish(), +}) +``` + +## zCustomTheme + +源码：[packages/vseed/src/types/properties/theme/customTheme.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/theme/customTheme.ts) + +包导出：`zCustomTheme` + +```typescript +const zCustomTheme = z.record(z.string(), zCustomThemeConfig).nullish() +``` + +关联 API：[zCustomThemeConfig](schemas.md#zcustomthemeconfig) + +## zCustomThemeConfig + +源码：[packages/vseed/src/types/properties/theme/customTheme.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/theme/customTheme.ts) + +包导出：`zCustomThemeConfig` + +```typescript +const zCustomThemeConfig = z.object({ + config: zConfig.nullish(), +}) +``` + +关联 API：[zConfig](schemas.md#zconfig) + +## zDataset + +源码：[packages/vseed/src/types/properties/dataset/dataset.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/dataset/dataset.ts) + +包导出：`zDataset` + +```typescript +const zDataset = z.array(zDatum) +``` + +关联 API：[zDatum](schemas.md#zdatum) + +## zDatasetReshapeInfo + +源码：[packages/vseed/src/types/properties/datasetReshapeInfo/zDatasetReshapeInfo.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/datasetReshapeInfo/zDatasetReshapeInfo.ts) + +包导出：`zDatasetReshapeInfo` + +```typescript +const zDatasetReshapeInfo = z.array( + z.object({ + id: z.string(), + index: z.number(), + foldInfo: zFoldInfo, + foldInfoList: z.array(zFoldInfo).nullish(), + unfoldInfo: zUnfoldInfo, + }), +) +``` + +关联 API：[zFoldInfo](schemas.md#zfoldinfo)、[zUnfoldInfo](schemas.md#zunfoldinfo) + +## zDatum + +源码：[packages/vseed/src/types/properties/dataset/dataset.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/dataset/dataset.ts) + +包导出：`zDatum` + +```typescript +/** + * example dataset link: + * [ + * { date: '2019', 20001:'type', profit:10, sales: null, }, + * { date: '2020', 20001:'type', profit:30, sales: -1.1, }, + * { date: '2021', 20001:'type', profit:30, sales: 1, }, + * { date: '2023', 20001:'type', profit:40, sales: undefined, }, + * { date: '2022', 20001:'type', profit:50, sales: 100, }, + * ] + */ +const zDatum = z.record(z.string().or(z.number()), z.any()) +``` + +## zDifferenceAnchor + +源码：[packages/vseed/src/types/properties/annotation/zAnnotationDifferenceLine.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/annotation/zAnnotationDifferenceLine.ts) + +包导出：`zDifferenceAnchor` + +```typescript +const zDifferenceAnchor = z.object({ + selector: z.union([zDifferenceSelector, zDifferenceSelectors]), +}) +``` + +关联 API：[zDifferenceSelector](schemas.md#zdifferenceselector)、[zDifferenceSelectors](schemas.md#zdifferenceselectors) + +## zDifferenceSelector + +源码：[packages/vseed/src/types/properties/annotation/zAnnotationDifferenceLine.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/annotation/zAnnotationDifferenceLine.ts) + +包导出：`zDifferenceSelector` + +```typescript +const zDifferenceSelector = z.union([zPartialSelector, zMeasureSelector, zDimensionSelector]) +``` + +关联 API：[zDimensionSelector](schemas.md#zdimensionselector)、[zMeasureSelector](schemas.md#zmeasureselector)、[zPartialSelector](schemas.md#zpartialselector) + +## zDifferenceSelectors + +源码：[packages/vseed/src/types/properties/annotation/zAnnotationDifferenceLine.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/annotation/zAnnotationDifferenceLine.ts) + +包导出：`zDifferenceSelectors` + +```typescript +const zDifferenceSelectors = z.array(zDifferenceSelector) +``` + +关联 API：[zDifferenceSelector](schemas.md#zdifferenceselector) + +## zDimension + +源码：[packages/vseed/src/types/properties/dimensions/zDimensions.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/dimensions/zDimensions.ts) + +包导出：`zDimension` + +```typescript +const zDimension = z.object({ + id: z.string(), + alias: z.string().optional(), + encoding: zDimensionEncoding.optional(), + timeFormat: zTimeFormat.optional(), +}) +``` + +关联 API：[zDimensionEncoding](schemas.md#zdimensionencoding)、[zTimeFormat](schemas.md#ztimeformat) + +## zDimensionEncoding + +源码：[packages/vseed/src/types/properties/encoding/zDimensionEncoding.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/encoding/zDimensionEncoding.ts) + +包导出：`zDimensionEncoding` + +```typescript +const zDimensionEncoding = z.enum([ + 'xAxis', + 'yAxis', + 'angle', + 'color', + 'detail', + 'tooltip', + 'label', + 'row', + 'column', + 'player', + 'hierarchy', + 'source', + 'target', +]) +``` + +## zDimensionGroup + +源码：[packages/vseed/src/types/properties/dimensions/zDimensions.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/dimensions/zDimensions.ts) + +包导出：`zDimensionGroup` + +```typescript +const zDimensionGroup: z.ZodType = z.object({ + id: z.string(), + alias: z.string().optional(), + get children() { + return z.array(zDimensionGroup.or(zDimension)).optional() + }, +}) +``` + +关联 API：[DimensionGroup](types.md#dimensiongroup)、[zDimension](schemas.md#zdimension) + +## zDimensionLinkage + +源码：[packages/vseed/src/types/properties/config/dimensionLinkage/dimensionLinkage.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/dimensionLinkage/dimensionLinkage.ts) + +包导出：`zDimensionLinkage` + +```typescript +const zDimensionLinkage = z.object({ + enable: z.boolean().nullish(), + showTooltip: z.boolean().nullish(), + showLabel: z.boolean().nullish(), +}) +``` + +## zDimensions + +源码：[packages/vseed/src/types/properties/dimensions/zDimensions.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/dimensions/zDimensions.ts) + +包导出：`zDimensions` + +```typescript +const zDimensions = z.array(zDimension) +``` + +关联 API：[zDimension](schemas.md#zdimension) + +## zDimensionSelector + +源码：[packages/vseed/src/types/dataSelector/selector.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/dataSelector/selector.ts) + +包导出：`zDimensionSelector` + +```typescript +const zDimensionSelector = z.object({ + field: z.string(), + operator: z.enum(['in', 'not in']).nullish(), + op: z.enum(['in', 'not in']).nullish(), + value: z.union([z.string(), z.number(), z.array(z.union([z.string(), z.number()]))]), +}) +``` + +## zDimensionTree + +源码：[packages/vseed/src/types/properties/dimensions/zDimensions.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/dimensions/zDimensions.ts) + +包导出：`zDimensionTree` + +```typescript +const zDimensionTree = z.array(zDimensionGroup.or(zDimension)) +``` + +关联 API：[zDimension](schemas.md#zdimension)、[zDimensionGroup](schemas.md#zdimensiongroup) + +## zDonut + +源码：[packages/vseed/src/types/chartType/donut/zDonut.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/chartType/donut/zDonut.ts) + +包导出：`zDonut` + +```typescript +const zDonut = z.object({ + chartType: z.literal('donut'), + ...zPieGeometry.shape, + pieStyle: zPieStyle.nullish(), + centerText: zCenterText.nullish(), + dataset: zDataset.nullish(), + encoding: zEncoding.nullish(), + dimensions: zDimensions.nullish(), + measures: zMeasures.nullish(), + page: zPage.nullish(), + + backgroundColor: zBackgroundColor.nullish(), + color: zColor.nullish(), + label: zPieLabel.nullish(), + legend: zLegend.nullish(), + tooltip: zTooltip.nullish(), + brush: zBrush.nullish(), + animation: zPieLikeAnimation.nullish(), + theme: zTheme.nullish(), + locale: zLocale.nullish(), +}) +``` + +关联 API：[zBackgroundColor](schemas.md#zbackgroundcolor)、[zBrush](schemas.md#zbrush)、[zCenterText](schemas.md#zcentertext)、[zColor](schemas.md#zcolor)、[zDataset](schemas.md#zdataset)、[zDimensions](schemas.md#zdimensions)、[zEncoding](schemas.md#zencoding)、[zLegend](schemas.md#zlegend)、[zLocale](schemas.md#zlocale)、[zMeasures](schemas.md#zmeasures)、[zPage](schemas.md#zpage)、[zPieGeometry](schemas.md#zpiegeometry)、[zPieLabel](schemas.md#zpielabel)、[zPieLikeAnimation](schemas.md#zpielikeanimation)、[zPieStyle](schemas.md#zpiestyle)、[zTheme](schemas.md#ztheme)、[zTooltip](schemas.md#ztooltip) + +## zDonutConfig + +源码：[packages/vseed/src/types/properties/config/pie.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/pie.ts) + +包导出：`zDonutConfig` + +```typescript +const zDonutConfig = zPieConfig.extend({ centerText: zCenterTextConfig.nullish() }) +``` + +关联 API：[zCenterTextConfig](schemas.md#zcentertextconfig)、[zPieConfig](schemas.md#zpieconfig) + +## zDualAxis + +源码：[packages/vseed/src/types/chartType/dualAxis/zDualAxis.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/chartType/dualAxis/zDualAxis.ts) + +包导出：`zDualAxis` + +```typescript +const zDualAxis = z.object({ + chartType: z.literal('dualAxis'), + dataset: zDataset.nullish(), + dimensions: zDimensions.nullish(), + measures: zDualMeasures.nullish(), + page: zPage.nullish(), + + alignTicks: z.array(z.boolean()).or(z.boolean()).nullish(), + + primaryYAxis: z.array(zYLinearAxis).or(zYLinearAxis).nullish(), + secondaryYAxis: z.array(zYLinearAxis).or(zYLinearAxis).nullish(), + xAxis: zXBandAxis.nullish(), + + backgroundColor: zBackgroundColor.nullish(), + color: zColor.nullish(), + label: zLabel.nullish(), + legend: zLegend.nullish(), + tooltip: zTooltip.nullish(), + brush: zBrush.nullish(), + + crosshairRect: zCrosshairRect.nullish(), + cornerRadius: zCornerRadius.nullish(), + stackCornerRadius: zStackCornerRadius.nullish(), + sort: zSort.nullish(), + sortLegend: zSortLegend.nullish(), + theme: zTheme.nullish(), + barMaxWidth: zBarMaxWidth.nullish(), + barGapInGroup: zBarGapInGroup.nullish(), + + barStyle: z.array(zBarStyle).or(zBarStyle).nullish(), + pointStyle: z.array(zPointStyle).or(zPointStyle).nullish(), + lineStyle: z.array(zLineStyle).or(zLineStyle).nullish(), + areaStyle: z.array(zAreaStyle).or(zAreaStyle).nullish(), + + annotationPoint: z.array(zAnnotationPoint).or(zAnnotationPoint).nullish(), + annotationVerticalLine: z.array(zAnnotationVerticalLine).or(zAnnotationVerticalLine).nullish(), + annotationHorizontalLine: z.array(zAnnotationHorizontalLine).or(zAnnotationHorizontalLine).nullish(), + annotationArea: z.array(zAnnotationArea).or(zAnnotationArea).nullish(), + dimensionLinkage: zDimensionLinkage.nullish(), + + locale: zLocale.nullish(), +}) +``` + +关联 API：[zAnnotationArea](schemas.md#zannotationarea)、[zAnnotationHorizontalLine](schemas.md#zannotationhorizontalline)、[zAnnotationPoint](schemas.md#zannotationpoint)、[zAnnotationVerticalLine](schemas.md#zannotationverticalline)、[zAreaStyle](schemas.md#zareastyle)、[zBackgroundColor](schemas.md#zbackgroundcolor)、[zBarGapInGroup](schemas.md#zbargapingroup)、[zBarMaxWidth](schemas.md#zbarmaxwidth)、[zBarStyle](schemas.md#zbarstyle)、[zBrush](schemas.md#zbrush)、[zColor](schemas.md#zcolor)、[zCornerRadius](schemas.md#zcornerradius)、[zCrosshairRect](schemas.md#zcrosshairrect)、[zDataset](schemas.md#zdataset)、[zDimensionLinkage](schemas.md#zdimensionlinkage)、[zDimensions](schemas.md#zdimensions)、[zDualMeasures](schemas.md#zdualmeasures)、[zLabel](schemas.md#zlabel)、[zLegend](schemas.md#zlegend)、[zLineStyle](schemas.md#zlinestyle)、[zLocale](schemas.md#zlocale)、[zPage](schemas.md#zpage)、[zPointStyle](schemas.md#zpointstyle)、[zSort](schemas.md#zsort)、[zSortLegend](schemas.md#zsortlegend)、[zStackCornerRadius](schemas.md#zstackcornerradius)、[zTheme](schemas.md#ztheme)、[zTooltip](schemas.md#ztooltip)、[zXBandAxis](schemas.md#zxbandaxis)、[zYLinearAxis](schemas.md#zylinearaxis) + +## zDualAxisConfig + +源码：[packages/vseed/src/types/properties/config/dualAxis.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/dualAxis.ts) + +包导出：`zDualAxisConfig` + +```typescript +const zDualAxisConfig = z.object({ + backgroundColor: zBackgroundColor.nullish(), + label: zLabel.nullish(), + color: zColor.nullish(), + tooltip: zTooltip.nullish(), + legend: zLegend.nullish(), + + alignTicks: z.array(z.boolean()).or(z.boolean()).nullish(), + primaryYAxis: z.array(zYLinearAxis).or(zYLinearAxis).nullish(), + secondaryYAxis: z.array(zYLinearAxis).or(zYLinearAxis).nullish(), + + xAxis: zXBandAxis.nullish(), + crosshairRect: zCrosshairRect.nullish(), + cornerRadius: zCornerRadius.nullish(), + stackCornerRadius: zStackCornerRadius.nullish(), + pivotGrid: zPivotChartGridConfig.nullish(), + annotation: zAnnotationConfig.nullish(), + + dimensionLinkage: zDimensionLinkage.nullish(), +}) +``` + +关联 API：[zAnnotationConfig](schemas.md#zannotationconfig)、[zBackgroundColor](schemas.md#zbackgroundcolor)、[zColor](schemas.md#zcolor)、[zCornerRadius](schemas.md#zcornerradius)、[zCrosshairRect](schemas.md#zcrosshairrect)、[zDimensionLinkage](schemas.md#zdimensionlinkage)、[zLabel](schemas.md#zlabel)、[zLegend](schemas.md#zlegend)、[zPivotChartGridConfig](schemas.md#zpivotchartgridconfig)、[zStackCornerRadius](schemas.md#zstackcornerradius)、[zTooltip](schemas.md#ztooltip)、[zXBandAxis](schemas.md#zxbandaxis)、[zYLinearAxis](schemas.md#zylinearaxis) + +## zDualMeasure + +源码：[packages/vseed/src/types/properties/measures/zDualMeasures.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/measures/zDualMeasures.ts) + +包导出：`zDualMeasure` + +```typescript +const zDualMeasure = zMeasure.extend({ + chartType: z.enum(['line', 'column', 'columnParallel', 'area', 'scatter']).optional(), + encoding: z.enum(['primaryYAxis', 'secondaryYAxis', 'color', 'label', 'tooltip']).optional(), +}) +``` + +关联 API：[zMeasure](schemas.md#zmeasure) + +## zDualMeasures + +源码：[packages/vseed/src/types/properties/measures/zDualMeasures.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/measures/zDualMeasures.ts) + +包导出：`zDualMeasures` + +```typescript +const zDualMeasures = z.array(zDualMeasure) +``` + +关联 API：[zDualMeasure](schemas.md#zdualmeasure) + +## zDynamicFilter + +源码：[packages/vseed/src/types/dataSelector/selector.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/dataSelector/selector.ts) + +包导出：`zDynamicFilter` + +```typescript +/** + * @deprecated 请使用 zTableDynamicFilter 或 zChartDynamicFilter + */ +const zDynamicFilter = z.union([zTableDynamicFilter, zChartDynamicFilter]) +``` + +关联 API：[zChartDynamicFilter](schemas.md#zchartdynamicfilter)、[zTableDynamicFilter](schemas.md#ztabledynamicfilter) + +## zEcdfRegressionLine + +源码：[packages/vseed/src/types/properties/regressionLine/zRegressionLine.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/regressionLine/zRegressionLine.ts) + +包导出：`zEcdfRegressionLine` + +```typescript +const zEcdfRegressionLine = z.object({ + enable: z.boolean().nullish(), + color: z.string().nullish(), + lineWidth: z.number().nullish(), + lineDash: z.array(z.number()).nullish(), + text: z.string().nullish(), + textColor: z.string().nullish(), + textFontSize: z.number().nullish(), + textFontWeight: z.number().nullish(), +}) +``` + +## zEncoding + +源码：[packages/vseed/src/types/properties/encoding/zEncoding.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/encoding/zEncoding.ts) + +包导出：`zEncoding` + +```typescript +const zEncoding = z.object({ + x: z.array(z.string()).nullish(), + y: z.array(z.string()).nullish(), + angle: z.array(z.string()).nullish(), + radius: z.array(z.string()).nullish(), + detail: z.array(z.string()).nullish(), + + color: z.array(z.string()).nullish(), + size: z.array(z.string()).nullish(), + tooltip: z.array(z.string()).nullish(), + label: z.array(z.string()).nullish(), + + row: z.array(z.string()).nullish(), + column: z.array(z.string()).nullish(), + player: z.array(z.string()).nullish(), + hierarchy: z.array(z.string()).nullish(), + source: z.array(z.string()).nullish(), + target: z.array(z.string()).nullish(), + + value: z.array(z.string()).nullish(), + q1: z.array(z.string()).nullish(), + q3: z.array(z.string()).nullish(), + median: z.array(z.string()).nullish(), + min: z.array(z.string()).nullish(), + max: z.array(z.string()).nullish(), + outliers: z.array(z.string()).nullish(), + + x0: z.array(z.string()).nullish(), + x1: z.array(z.string()).nullish(), +}) +``` + +## zFieldSelector + +源码：[packages/vseed/src/types/dataSelector/selector.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/dataSelector/selector.ts) + +包导出：`zFieldSelector` + +```typescript +const zFieldSelector = z.object({ + field: z.union([z.string(), z.array(z.string())]), +}) +``` + +## zFoldInfo + +源码：[packages/vseed/src/types/properties/datasetReshapeInfo/zDatasetReshapeInfo.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/datasetReshapeInfo/zDatasetReshapeInfo.ts) + +包导出：`zFoldInfo` + +```typescript +const zFoldInfo = z.object({ + foldMap: z.record(z.string(), z.string().or(z.undefined())), + statistics: z.object({ + min: z.number(), + max: z.number(), + sum: z.number(), + count: z.number(), + colorMin: z.number(), + colorMax: z.number(), + }), + measureId: z.string(), + measureName: z.string(), + measureValue: z.string(), +}) +``` + +## zFunnel + +源码：[packages/vseed/src/types/chartType/funnel/zFunnel.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/chartType/funnel/zFunnel.ts) + +包导出：`zFunnel` + +```typescript +const zFunnel = z.object({ + chartType: z.literal('funnel'), + dataset: zDataset.nullish(), + encoding: zEncoding.nullish(), + dimensions: zDimensions.nullish(), + measures: zMeasures.nullish(), + page: zPage.nullish(), + + backgroundColor: zBackgroundColor.nullish(), + color: zColor.nullish(), + label: zLabel.nullish(), + legend: zColorLegend.nullish(), + tooltip: zTooltip.nullish(), + brush: zBrush.nullish(), + theme: zTheme.nullish(), + locale: zLocale.nullish(), +}) +``` + +关联 API：[zBackgroundColor](schemas.md#zbackgroundcolor)、[zBrush](schemas.md#zbrush)、[zColor](schemas.md#zcolor)、[zColorLegend](schemas.md#zcolorlegend)、[zDataset](schemas.md#zdataset)、[zDimensions](schemas.md#zdimensions)、[zEncoding](schemas.md#zencoding)、[zLabel](schemas.md#zlabel)、[zLocale](schemas.md#zlocale)、[zMeasures](schemas.md#zmeasures)、[zPage](schemas.md#zpage)、[zTheme](schemas.md#ztheme)、[zTooltip](schemas.md#ztooltip) + +## zFunnelConfig + +源码：[packages/vseed/src/types/properties/config/funnel.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/funnel.ts) + +包导出：`zFunnelConfig` + +```typescript +const zFunnelConfig = z.object({ + backgroundColor: zBackgroundColor.nullish(), + label: zLabel.nullish(), + color: zColor.nullish(), + tooltip: zTooltip.nullish(), + legend: zLegend.nullish(), + + pivotGrid: zPivotChartGridConfig.nullish(), + transform: zFunnelTransform.nullish(), +}) +``` + +关联 API：[zBackgroundColor](schemas.md#zbackgroundcolor)、[zColor](schemas.md#zcolor)、[zFunnelTransform](schemas.md#zfunneltransform)、[zLabel](schemas.md#zlabel)、[zLegend](schemas.md#zlegend)、[zPivotChartGridConfig](schemas.md#zpivotchartgridconfig)、[zTooltip](schemas.md#ztooltip) + +## zFunnelTransform + +源码：[packages/vseed/src/types/properties/config/funnelTransform/zFunnelTransform.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/funnelTransform/zFunnelTransform.ts) + +包导出：`zFunnelTransform` + +```typescript +const zFunnelTransform = z.object({ + backgroundColor: z.string().nullish(), + textColor: z.string().nullish(), +}) +``` + +## zHeatmap + +源码：[packages/vseed/src/types/chartType/heatmap/zHeatmap.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/chartType/heatmap/zHeatmap.ts) + +包导出：`zHeatmap` + +```typescript +const zHeatmap = z.object({ + chartType: z.literal('heatmap'), + dataset: zDataset.nullish(), + dimensions: zDimensions.nullish(), + measures: zMeasures.nullish(), + page: zPage.nullish(), + + backgroundColor: zBackgroundColor.nullish(), + color: zColor.nullish(), + label: zLabel.nullish(), + legend: zColorLegend.nullish(), + tooltip: zTooltip.nullish(), + brush: zBrush.nullish(), + theme: zTheme.nullish(), + locale: zLocale.nullish(), +}) +``` + +关联 API：[zBackgroundColor](schemas.md#zbackgroundcolor)、[zBrush](schemas.md#zbrush)、[zColor](schemas.md#zcolor)、[zColorLegend](schemas.md#zcolorlegend)、[zDataset](schemas.md#zdataset)、[zDimensions](schemas.md#zdimensions)、[zLabel](schemas.md#zlabel)、[zLocale](schemas.md#zlocale)、[zMeasures](schemas.md#zmeasures)、[zPage](schemas.md#zpage)、[zTheme](schemas.md#ztheme)、[zTooltip](schemas.md#ztooltip) + +## zHeatmapCell + +源码：[packages/vseed/src/types/properties/config/heatmap/zHeatmap.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/heatmap/zHeatmap.ts) + +关联类型：通过公开 API 的签名引用，不是包入口的独立导出。 + +```typescript +const zHeatmapCell = z.object({ + stroke: z.string().nullish(), + lineWidth: z.number().nullish(), + cornerRadius: z.number().nullish(), + hoverShadowColor: z.string().nullish(), +}) +``` + +## zHeatmapConfig + +源码：[packages/vseed/src/types/properties/config/heatmap.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/heatmap.ts) + +包导出：`zHeatmapConfig` + +```typescript +const zHeatmapConfig = z.object({ + backgroundColor: zBackgroundColor.nullish(), + label: zLabel.nullish(), + color: zColor.nullish(), + tooltip: zTooltip.nullish(), + legend: zColorLegend.nullish(), + + pivotGrid: zPivotChartGridConfig.nullish(), + cell: zHeatmapCell.nullish(), + + xAxis: zXBandAxis.nullish(), + yAxis: zYBandAxis.nullish(), + + brush: zBrushConfig.nullish(), +}) +``` + +关联 API：[zBackgroundColor](schemas.md#zbackgroundcolor)、[zBrushConfig](schemas.md#zbrushconfig)、[zColor](schemas.md#zcolor)、[zColorLegend](schemas.md#zcolorlegend)、[zHeatmapCell](schemas.md#zheatmapcell)、[zLabel](schemas.md#zlabel)、[zPivotChartGridConfig](schemas.md#zpivotchartgridconfig)、[zTooltip](schemas.md#ztooltip)、[zXBandAxis](schemas.md#zxbandaxis)、[zYBandAxis](schemas.md#zybandaxis) + +## zHierarchySankey + +源码：[packages/vseed/src/types/chartType/hierarchySankey/zHierarchySankey.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/chartType/hierarchySankey/zHierarchySankey.ts) + +包导出：`zHierarchySankey` + +```typescript +const zHierarchySankey = z.object({ + chartType: z.literal('hierarchySankey'), + dataset: zDataset.nullish(), + dimensions: zDimensions.nullish(), + measures: zMeasures.nullish(), + page: zPage.nullish(), + + backgroundColor: zBackgroundColor.nullish(), + color: zColor.nullish(), + label: zLabel.nullish(), + legend: zLegend.nullish(), + tooltip: zTooltip.nullish(), + theme: zTheme.nullish(), + locale: zLocale.nullish(), +}) +``` + +关联 API：[zBackgroundColor](schemas.md#zbackgroundcolor)、[zColor](schemas.md#zcolor)、[zDataset](schemas.md#zdataset)、[zDimensions](schemas.md#zdimensions)、[zLabel](schemas.md#zlabel)、[zLegend](schemas.md#zlegend)、[zLocale](schemas.md#zlocale)、[zMeasures](schemas.md#zmeasures)、[zPage](schemas.md#zpage)、[zTheme](schemas.md#ztheme)、[zTooltip](schemas.md#ztooltip) + +## zHierarchySankeyConfig + +源码：[packages/vseed/src/types/properties/config/hierarchySankey.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/hierarchySankey.ts) + +包导出：`zHierarchySankeyConfig` + +```typescript +const zHierarchySankeyConfig = z.object({ + backgroundColor: zBackgroundColor.nullish(), + label: zLabel.nullish(), + color: zColor.nullish(), + tooltip: zTooltip.nullish(), + legend: zLegend.nullish(), + pivotGrid: zPivotChartGridConfig.nullish(), +}) +``` + +关联 API：[zBackgroundColor](schemas.md#zbackgroundcolor)、[zColor](schemas.md#zcolor)、[zLabel](schemas.md#zlabel)、[zLegend](schemas.md#zlegend)、[zPivotChartGridConfig](schemas.md#zpivotchartgridconfig)、[zTooltip](schemas.md#ztooltip) + +## zHistogram + +源码：[packages/vseed/src/types/chartType/histogram/zHistogram.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/chartType/histogram/zHistogram.ts) + +包导出：`zHistogram` + +```typescript +const zHistogram = z.object({ + chartType: z.literal('histogram'), + dataset: zDataset.nullish(), + encoding: zEncoding.nullish(), + dimensions: zDimensions.nullish(), + measures: zMeasures.nullish(), + page: zPage.nullish(), + + backgroundColor: zBackgroundColor.nullish(), + color: zColor.nullish(), + label: zLabel.nullish(), + legend: zLegend.nullish(), + tooltip: zTooltip.nullish(), + brush: zBrush.nullish(), + xAxis: zXLinearAxis.nullish(), + yAxis: zYLinearAxis.nullish(), + crosshairRect: zCrosshairRect.nullish(), + cornerRadius: zCornerRadius.nullish(), + stackCornerRadius: zStackCornerRadius.nullish(), + binCount: z.number().positive().nullish(), + binStep: z.number().positive().nullish(), + binValueType: z.literal('count').or(z.literal('percentage')).nullish(), + theme: zTheme.nullish(), + barStyle: z.array(zBarStyle).or(zBarStyle).nullish(), + annotationPoint: z.array(zAnnotationPoint).or(zAnnotationPoint).nullish(), + annotationVerticalLine: z.array(zAnnotationVerticalLine).or(zAnnotationVerticalLine).nullish(), + annotationHorizontalLine: z.array(zAnnotationHorizontalLine).or(zAnnotationHorizontalLine).nullish(), + annotationArea: z.array(zAnnotationArea).or(zAnnotationArea).nullish(), + ecdfRegressionLine: z.array(zEcdfRegressionLine).or(zEcdfRegressionLine).nullish(), + kdeRegressionLine: z.array(zKdeRegressionLine).or(zKdeRegressionLine).nullish(), + dimensionLinkage: zDimensionLinkage.nullish(), + locale: zLocale.nullish(), +}) +``` + +关联 API：[zAnnotationArea](schemas.md#zannotationarea)、[zAnnotationHorizontalLine](schemas.md#zannotationhorizontalline)、[zAnnotationPoint](schemas.md#zannotationpoint)、[zAnnotationVerticalLine](schemas.md#zannotationverticalline)、[zBackgroundColor](schemas.md#zbackgroundcolor)、[zBarStyle](schemas.md#zbarstyle)、[zBrush](schemas.md#zbrush)、[zColor](schemas.md#zcolor)、[zCornerRadius](schemas.md#zcornerradius)、[zCrosshairRect](schemas.md#zcrosshairrect)、[zDataset](schemas.md#zdataset)、[zDimensionLinkage](schemas.md#zdimensionlinkage)、[zDimensions](schemas.md#zdimensions)、[zEcdfRegressionLine](schemas.md#zecdfregressionline)、[zEncoding](schemas.md#zencoding)、[zKdeRegressionLine](schemas.md#zkderegressionline)、[zLabel](schemas.md#zlabel)、[zLegend](schemas.md#zlegend)、[zLocale](schemas.md#zlocale)、[zMeasures](schemas.md#zmeasures)、[zPage](schemas.md#zpage)、[zStackCornerRadius](schemas.md#zstackcornerradius)、[zTheme](schemas.md#ztheme)、[zTooltip](schemas.md#ztooltip)、[zXLinearAxis](schemas.md#zxlinearaxis)、[zYLinearAxis](schemas.md#zylinearaxis) + +## zHistogramConfig + +源码：[packages/vseed/src/types/properties/config/histogram.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/histogram.ts) + +关联类型：通过公开 API 的签名引用，不是包入口的独立导出。 + +```typescript +const zHistogramConfig = z.object({ + backgroundColor: zBackgroundColor.nullish(), + label: zLabel.nullish(), + color: zColor.nullish(), + tooltip: zTooltip.nullish(), + legend: zLegend.nullish(), + + xAxis: zXBandAxis.nullish(), + yAxis: zYLinearAxis.nullish(), + crosshairRect: zCrosshairRect.nullish(), + cornerRadius: zCornerRadius.nullish(), + stackCornerRadius: zStackCornerRadius.nullish(), + pivotGrid: zPivotChartGridConfig.nullish(), + annotation: zAnnotationConfig.nullish(), + binCount: z.number().positive().nullish(), + binStep: z.number().positive().nullish(), + binValueType: z.literal('count').or(z.literal('percentage')).nullish(), + regressionLine: zRegressionLine.nullish(), + + dimensionLinkage: zDimensionLinkage.nullish(), + + brush: zBrushConfig.nullish(), +}) +``` + +关联 API：[zAnnotationConfig](schemas.md#zannotationconfig)、[zBackgroundColor](schemas.md#zbackgroundcolor)、[zBrushConfig](schemas.md#zbrushconfig)、[zColor](schemas.md#zcolor)、[zCornerRadius](schemas.md#zcornerradius)、[zCrosshairRect](schemas.md#zcrosshairrect)、[zDimensionLinkage](schemas.md#zdimensionlinkage)、[zLabel](schemas.md#zlabel)、[zLegend](schemas.md#zlegend)、[zPivotChartGridConfig](schemas.md#zpivotchartgridconfig)、[zRegressionLine](schemas.md#zregressionline)、[zStackCornerRadius](schemas.md#zstackcornerradius)、[zTooltip](schemas.md#ztooltip)、[zXBandAxis](schemas.md#zxbandaxis)、[zYLinearAxis](schemas.md#zylinearaxis) + +## zKdeRegressionLine + +源码：[packages/vseed/src/types/properties/regressionLine/zRegressionLine.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/regressionLine/zRegressionLine.ts) + +包导出：`zKdeRegressionLine` + +```typescript +const zKdeRegressionLine = zEcdfRegressionLine.extend({}) +``` + +关联 API：[zEcdfRegressionLine](schemas.md#zecdfregressionline) + +## zLabel + +源码：[packages/vseed/src/types/properties/config/label/zLabel.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/label/zLabel.ts) + +包导出：`zLabel` + +```typescript +const zLabel = z.object({ + enable: z.boolean().nullish(), + wrap: z.boolean().nullish(), + showValue: z.boolean().nullish(), + showValuePercent: z.boolean().nullish(), + showDimension: z.boolean().nullish(), + autoFormat: z.boolean().nullish(), + numFormat: zNumFormat.nullish(), + labelFontSize: z.number().nullish(), + labelFontWeight: z.number().or(z.string()).nullish(), + labelBackgroundColor: z.string().nullish(), + labelColor: z.string().nullish(), + labelColorSmartInvert: z.boolean().nullish(), + labelPosition: z.string().nullish(), + labelOverlap: z.boolean().nullish(), + selector: z.union([zSelector, zSelectors]).nullish(), + dynamicFilter: zChartDynamicFilter.optional(), +}) +``` + +关联 API：[zChartDynamicFilter](schemas.md#zchartdynamicfilter)、[zNumFormat](schemas.md#znumformat)、[zSelector](schemas.md#zselector)、[zSelectors](schemas.md#zselectors) + +## zLegend + +源码：[packages/vseed/src/types/properties/config/legend/legend.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/legend/legend.ts) + +包导出：`zLegend` + +```typescript +const zLegend = z.object({ + enable: z.boolean().default(true).nullish(), + interactive: z.boolean().nullish(), + border: z.boolean().default(true).nullish(), + maxSize: z.number().default(1).nullish(), + shapeType: z + .enum([ + 'circle', + 'cross', + 'diamond', + 'square', + 'arrow', + 'arrow2Left', + 'arrow2Right', + 'wedge', + 'thinTriangle', + 'triangle', + 'triangleUp', + 'triangleDown', + 'triangleRight', + 'triangleLeft', + 'stroke', + 'star', + 'wye', + 'rect', + 'arrowLeft', + 'arrowRight', + 'rectRound', + 'roundLine', + ]) + .default('rectRound') + .nullish(), + position: z + .enum([ + 'left', + 'leftTop', + 'leftBottom', + 'lt', + 'lb', + 'top', + 'topLeft', + 'topRight', + 'tl', + 'tr', + 'right', + 'rightTop', + 'rightBottom', + 'rt', + 'rb', + 'bottom', + 'bottomLeft', + 'bottomRight', + 'bl', + 'br', + ]) + .default('bottom') + .nullish(), + pagerIconColor: z.string().nullish(), + pagerIconDisableColor: z.string().nullish(), + labelColor: z.string().default('#fff').nullish(), + labelFontSize: z.number().default(12).nullish(), + labelFontWeight: z.number().or(z.string()).default(400).nullish(), +}) +``` + +## zLine + +源码：[packages/vseed/src/types/chartType/line/zLine.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/chartType/line/zLine.ts) + +包导出：`zLine` + +```typescript +const zLine = z.object({ + chartType: z.literal('line'), + dataset: zDataset.nullish(), + encoding: zEncoding.nullish(), + dimensions: zDimensions.nullish(), + measures: zMeasures.nullish(), + page: zPage.nullish(), + + backgroundColor: zBackgroundColor.nullish(), + color: zColor.nullish(), + label: zLabel.nullish(), + legend: zLegend.nullish(), + regionPadding: zRegionPadding.nullish(), + tooltip: zTooltip.nullish(), + brush: zBrush.nullish(), + animation: zLineAreaAnimation.nullish(), + xAxis: zXBandAxis.nullish(), + yAxis: zYLinearAxis.nullish(), + crosshairLine: zCrosshairLine.nullish(), + sort: zSort.nullish(), + sortLegend: zSortLegend.nullish(), + theme: zTheme.nullish(), + pointStyle: z.array(zPointStyle).or(zPointStyle).nullish(), + lineStyle: z.array(zLineStyle).or(zLineStyle).nullish(), + annotationPoint: z.array(zAnnotationPoint).or(zAnnotationPoint).nullish(), + annotationVerticalLine: z.array(zAnnotationVerticalLine).or(zAnnotationVerticalLine).nullish(), + annotationHorizontalLine: z.array(zAnnotationHorizontalLine).or(zAnnotationHorizontalLine).nullish(), + annotationArea: z.array(zAnnotationArea).or(zAnnotationArea).nullish(), + annotationDifferenceLine: z.array(zAnnotationDifferenceLine).or(zAnnotationDifferenceLine).nullish(), + dimensionLinkage: zDimensionLinkage.nullish(), + locale: zLocale.nullish(), +}) +``` + +关联 API：[zAnnotationArea](schemas.md#zannotationarea)、[zAnnotationDifferenceLine](schemas.md#zannotationdifferenceline)、[zAnnotationHorizontalLine](schemas.md#zannotationhorizontalline)、[zAnnotationPoint](schemas.md#zannotationpoint)、[zAnnotationVerticalLine](schemas.md#zannotationverticalline)、[zBackgroundColor](schemas.md#zbackgroundcolor)、[zBrush](schemas.md#zbrush)、[zColor](schemas.md#zcolor)、[zCrosshairLine](schemas.md#zcrosshairline)、[zDataset](schemas.md#zdataset)、[zDimensionLinkage](schemas.md#zdimensionlinkage)、[zDimensions](schemas.md#zdimensions)、[zEncoding](schemas.md#zencoding)、[zLabel](schemas.md#zlabel)、[zLegend](schemas.md#zlegend)、[zLineAreaAnimation](schemas.md#zlineareaanimation)、[zLineStyle](schemas.md#zlinestyle)、[zLocale](schemas.md#zlocale)、[zMeasures](schemas.md#zmeasures)、[zPage](schemas.md#zpage)、[zPointStyle](schemas.md#zpointstyle)、[zRegionPadding](schemas.md#zregionpadding)、[zSort](schemas.md#zsort)、[zSortLegend](schemas.md#zsortlegend)、[zTheme](schemas.md#ztheme)、[zTooltip](schemas.md#ztooltip)、[zXBandAxis](schemas.md#zxbandaxis)、[zYLinearAxis](schemas.md#zylinearaxis) + +## zLinearColor + +源码：[packages/vseed/src/types/properties/config/color/color.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/color/color.ts) + +包导出：`zLinearColor` + +```typescript +const zLinearColor = z.object({ + linearColorScheme: z.array(z.string()).nullish(), +}) +``` + +## zLineAreaAnimation + +源码：[packages/vseed/src/types/properties/config/animation/zAnimation.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/animation/zAnimation.ts) + +包导出：`zLineAreaAnimation` + +```typescript +const zLineAreaAnimation = createAnimation({ + appear: ['load', 'growth'], + update: ['growth'], + loop: ['load', 'growth', 'none'], + atmosphere: zPointAtmosphere, +}) +``` + +## zLinearRegressionLine + +源码：[packages/vseed/src/types/properties/regressionLine/zRegressionLine.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/regressionLine/zRegressionLine.ts) + +包导出：`zLinearRegressionLine` + +```typescript +const zLinearRegressionLine = zEcdfRegressionLine.extend({ + confidenceIntervalVisible: z.boolean().nullish(), + confidenceIntervalColor: z.string().nullish(), + confidenceIntervalOpacity: z.number().nullish(), + shadowBlur: z.number().nullish(), + shadowColor: z.string().nullish(), + shadowOffsetX: z.number().nullish(), + shadowOffsetY: z.number().nullish(), +}) +``` + +关联 API：[zEcdfRegressionLine](schemas.md#zecdfregressionline) + +## zLineConfig + +源码：[packages/vseed/src/types/properties/config/line.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/line.ts) + +包导出：`zLineConfig` + +```typescript +const zLineConfig = z.object({ + backgroundColor: zBackgroundColor.nullish(), + label: zLabel.nullish(), + color: zColor.nullish(), + tooltip: zTooltip.nullish(), + legend: zLegend.nullish(), + regionPadding: zRegionPadding.nullish(), + + xAxis: zXBandAxis.nullish(), + yAxis: zYLinearAxis.nullish(), + crosshairLine: zCrosshairLine.nullish(), + pivotGrid: zPivotChartGridConfig.nullish(), + annotation: zAnnotationConfig.nullish(), + + dimensionLinkage: zDimensionLinkage.nullish(), + + brush: zBrushConfig.nullish(), + animation: zLineAreaAnimation.nullish(), +}) +``` + +关联 API：[zAnnotationConfig](schemas.md#zannotationconfig)、[zBackgroundColor](schemas.md#zbackgroundcolor)、[zBrushConfig](schemas.md#zbrushconfig)、[zColor](schemas.md#zcolor)、[zCrosshairLine](schemas.md#zcrosshairline)、[zDimensionLinkage](schemas.md#zdimensionlinkage)、[zLabel](schemas.md#zlabel)、[zLegend](schemas.md#zlegend)、[zLineAreaAnimation](schemas.md#zlineareaanimation)、[zPivotChartGridConfig](schemas.md#zpivotchartgridconfig)、[zRegionPadding](schemas.md#zregionpadding)、[zTooltip](schemas.md#ztooltip)、[zXBandAxis](schemas.md#zxbandaxis)、[zYLinearAxis](schemas.md#zylinearaxis) + +## zLineStyle + +源码：[packages/vseed/src/types/properties/markStyle/zLineStyle.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/markStyle/zLineStyle.ts) + +包导出：`zLineStyle` + +```typescript +const zLineStyle = z.object({ + selector: z.union([zSelector, zSelectors]).nullish(), + dynamicFilter: zChartDynamicFilter.optional(), + lineVisible: z.boolean().nullish(), + lineSmooth: z.boolean().nullish(), + lineColor: z.string().nullish(), + lineColorOpacity: z.number().nullish(), + lineWidth: z.number().nullish(), + lineStyle: z.union([z.enum(['solid', 'dashed', 'dotted'])]).nullish(), +}) +``` + +关联 API：[zChartDynamicFilter](schemas.md#zchartdynamicfilter)、[zSelector](schemas.md#zselector)、[zSelectors](schemas.md#zselectors) + +## zLocale + +源码：[packages/vseed/src/types/i18n/i18n.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/i18n/i18n.ts) + +包导出：`zLocale` + +```typescript +const zLocale = z.enum(LOCALES).default('zh-CN') +``` + +关联 API：[LOCALES](i18n.md#locales) + +## zLogisticRegressionLine + +源码：[packages/vseed/src/types/properties/regressionLine/zRegressionLine.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/regressionLine/zRegressionLine.ts) + +包导出：`zLogisticRegressionLine` + +```typescript +const zLogisticRegressionLine = zLinearRegressionLine.extend({}) +``` + +关联 API：[zLinearRegressionLine](schemas.md#zlinearregressionline) + +## zLowessRegressionLine + +源码：[packages/vseed/src/types/properties/regressionLine/zRegressionLine.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/regressionLine/zRegressionLine.ts) + +包导出：`zLowessRegressionLine` + +```typescript +const zLowessRegressionLine = zLinearRegressionLine.extend({}) +``` + +关联 API：[zLinearRegressionLine](schemas.md#zlinearregressionline) + +## zMarkStyle + +源码：[packages/vseed/src/types/properties/markStyle/zMarkStyle.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/markStyle/zMarkStyle.ts) + +包导出：`zMarkStyle` + +```typescript +const zMarkStyle = z.object({ + barStyle: zBarStyle.or(z.array(zBarStyle)).nullish(), + pointStyle: zPointStyle.or(z.array(zPointStyle)).nullish(), + lineStyle: zLineStyle.or(z.array(zLineStyle)).nullish(), + areaStyle: zAreaStyle.or(z.array(zAreaStyle)).nullish(), + boxPlotStyle: zBoxPlotStyle.or(z.array(zBoxPlotStyle)).nullish(), + outlierStyle: zOutlierStyle.or(z.array(zOutlierStyle)).nullish(), +}) +``` + +关联 API：[zAreaStyle](schemas.md#zareastyle)、[zBarStyle](schemas.md#zbarstyle)、[zBoxPlotStyle](schemas.md#zboxplotstyle)、[zLineStyle](schemas.md#zlinestyle)、[zOutlierStyle](schemas.md#zoutlierstyle)、[zPointStyle](schemas.md#zpointstyle) + +## zMeasure + +源码：[packages/vseed/src/types/properties/measures/zMeasures.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/measures/zMeasures.ts) + +包导出：`zMeasure` + +```typescript +const zMeasure = z.object({ + id: z.string(), + alias: z.string().optional(), + autoFormat: z.boolean().optional(), + numFormat: zNumFormat.optional(), + format: zNumFormat.optional(), + encoding: z + .enum([ + 'primaryYAxis', + 'secondaryYAxis', + 'xAxis', + 'yAxis', + 'angle', + 'radius', + 'size', + 'color', + 'label', + 'tooltip', + 'detail', + 'column', + 'value', + 'q1', + 'q3', + 'min', + 'max', + 'median', + 'outliers', + 'x0', + 'x1', + ]) + .optional(), + parentId: z.string().optional(), + chartType: z.enum(['line', 'column', 'columnParallel', 'columnPercent', 'area', 'areaPercent', 'scatter']).optional(), +}) +``` + +关联 API：[zNumFormat](schemas.md#znumformat) + +## zMeasureEncoding + +源码：[packages/vseed/src/types/properties/encoding/zMeasureEncoding.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/encoding/zMeasureEncoding.ts) + +包导出：`zMeasureEncoding` + +```typescript +const zMeasureEncoding = z.enum([ + 'primaryYAxis', + 'secondaryYAxis', + 'xAxis', + 'yAxis', + 'angle', + 'radius', + 'size', + 'color', + 'detail', + 'column', + 'label', + 'tooltip', +]) +``` + +## zMeasureGroup + +源码：[packages/vseed/src/types/properties/measures/zMeasures.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/measures/zMeasures.ts) + +包导出：`zMeasureGroup` + +```typescript +const zMeasureGroup: z.ZodType = z.object({ + id: z.string(), + alias: z.string().optional(), + get children() { + return z.array(zMeasureGroup.or(zMeasure)).optional() + }, +}) +``` + +关联 API：[MeasureGroup](types.md#measuregroup)、[zMeasure](schemas.md#zmeasure) + +## zMeasures + +源码：[packages/vseed/src/types/properties/measures/zMeasures.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/measures/zMeasures.ts) + +包导出：`zMeasures` + +```typescript +const zMeasures = z.array(zMeasure) +``` + +关联 API：[zMeasure](schemas.md#zmeasure) + +## zMeasureSelector + +源码：[packages/vseed/src/types/dataSelector/selector.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/dataSelector/selector.ts) + +包导出：`zMeasureSelector` + +```typescript +const zMeasureSelector = z.object({ + field: z.string(), + operator: z.enum(['=', '==', '!=', '>', '<', '>=', '<=', 'between']).nullish(), + op: z.enum(['=', '==', '!=', '>', '<', '>=', '<=', 'between']).nullish(), + value: z.union([z.string(), z.number(), z.array(z.union([z.string(), z.number()]))]), +}) +``` + +## zMeasureTree + +源码：[packages/vseed/src/types/properties/measures/zMeasures.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/measures/zMeasures.ts) + +包导出：`zMeasureTree` + +```typescript +const zMeasureTree = z.array(zMeasureGroup.or(zMeasure)) +``` + +关联 API：[zMeasure](schemas.md#zmeasure)、[zMeasureGroup](schemas.md#zmeasuregroup) + +## zNumFormat + +源码：[packages/vseed/src/types/properties/format/numFormat.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/format/numFormat.ts) + +包导出：`zNumFormat` + +```typescript +const zNumFormat = z + .object({ + type: z.enum(['number', 'percent', 'permille', 'scientific']).default('number').optional(), + ratio: z.number().default(1).optional(), + symbol: z.string().default('').optional(), + thousandSeparator: z.boolean().default(false).optional(), + prefix: z.string().default('').optional(), + suffix: z.string().default('').optional(), + + fractionDigits: z.number().default(2).optional(), + significantDigits: z.number().default(0).optional(), + roundingPriority: z.enum(['morePrecision', 'lessPrecision']).default('morePrecision').optional(), + roundingMode: z + .enum(['floor', 'ceil', 'halfEven', 'expand', 'trunc', 'halfFloor', 'halfCeil', 'halfExpand', 'halfTrunc']) + .default('halfCeil') + .optional(), + }) + .optional() +``` + +## zOutlierStyle + +源码：[packages/vseed/src/types/properties/markStyle/zOutlierStyle.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/markStyle/zOutlierStyle.ts) + +包导出：`zOutlierStyle` + +```typescript +const zOutlierStyle = z.object({ + selector: z.union([zSelector, zSelectors]).optional(), + pointVisible: z.boolean().optional(), + pointSize: z.number().optional(), + pointColor: z.string().optional(), + pointColorOpacity: z.number().min(0).max(1).optional(), + pointBorderColor: z.string().optional(), + pointBorderWidth: z.number().min(0).optional(), + pointBorderStyle: z.enum(['solid', 'dashed', 'dotted']).optional(), +}) +``` + +关联 API：[zSelector](schemas.md#zselector)、[zSelectors](schemas.md#zselectors) + +## zPage + +源码：[packages/vseed/src/types/properties/page/zPage.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/page/zPage.ts) + +包导出：`zPage` + +```typescript +const zPage = z.object({ + field: z.string(), + currentValue: z.string(), +}) +``` + +## zPartialSelector + +源码：[packages/vseed/src/types/dataSelector/selector.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/dataSelector/selector.ts) + +包导出：`zPartialSelector` + +```typescript +const zPartialSelector = zDatum +``` + +关联 API：[zDatum](schemas.md#zdatum) + +## zPie + +源码：[packages/vseed/src/types/chartType/pie/zPie.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/chartType/pie/zPie.ts) + +包导出：`zPie` + +```typescript +const zPie = z.object({ + chartType: z.literal('pie'), + ...zPieGeometry.shape, + pieStyle: zPieStyle.nullish(), + dataset: zDataset.nullish(), + encoding: zEncoding.nullish(), + dimensions: zDimensions.nullish(), + measures: zMeasures.nullish(), + page: zPage.nullish(), + backgroundColor: zBackgroundColor.nullish(), + color: zColor.nullish(), + label: zPieLabel.nullish(), + legend: zLegend.nullish(), + tooltip: zTooltip.nullish(), + brush: zBrush.nullish(), + animation: zPieLikeAnimation.nullish(), + theme: zTheme.nullish(), + locale: zLocale.nullish(), +}) +``` + +关联 API：[zBackgroundColor](schemas.md#zbackgroundcolor)、[zBrush](schemas.md#zbrush)、[zColor](schemas.md#zcolor)、[zDataset](schemas.md#zdataset)、[zDimensions](schemas.md#zdimensions)、[zEncoding](schemas.md#zencoding)、[zLegend](schemas.md#zlegend)、[zLocale](schemas.md#zlocale)、[zMeasures](schemas.md#zmeasures)、[zPage](schemas.md#zpage)、[zPieGeometry](schemas.md#zpiegeometry)、[zPieLabel](schemas.md#zpielabel)、[zPieLikeAnimation](schemas.md#zpielikeanimation)、[zPieStyle](schemas.md#zpiestyle)、[zTheme](schemas.md#ztheme)、[zTooltip](schemas.md#ztooltip) + +## zPieConfig + +源码：[packages/vseed/src/types/properties/config/pie.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/pie.ts) + +包导出：`zPieConfig` + +```typescript +const zPieConfig = zPolarConfig.extend({ + ...zPieGeometry.shape, + pieStyle: zPieStyle.nullish(), +}) +``` + +关联 API：[zPieGeometry](schemas.md#zpiegeometry)、[zPieStyle](schemas.md#zpiestyle) + +## zPieGeometry + +源码：[packages/vseed/src/types/properties/config/pieGeometry.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/pieGeometry.ts) + +包导出：`zPieGeometry` + +```typescript +const zPieGeometry = z.object({ + outerRadius: z.number().positive().max(1).nullish(), + innerRadius: z.number().nonnegative().max(1).nullish(), + startAngle: z.number().nullish(), + endAngle: z.number().nullish(), +}) +``` + +## zPieLabel + +源码：[packages/vseed/src/types/properties/config/label/zPieLabel.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/label/zPieLabel.ts) + +包导出：`zPieLabel` + +```typescript +const zPieLabel = zLabel.extend({ + labelLayout: z.union([z.literal('arc'), z.literal('labelLine'), z.literal('edge')]).nullish(), +}) +``` + +关联 API：[zLabel](schemas.md#zlabel) + +## zPieLikeAnimation + +源码：[packages/vseed/src/types/properties/config/animation/zAnimation.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/animation/zAnimation.ts) + +包导出：`zPieLikeAnimation` + +```typescript +const zPieLikeAnimation = createAnimation({ + appear: ['radial', 'scale'], + update: ['radial'], + loop: ['enlarge', 'relocate'], + atmosphere: zNoEffectAtmosphere, +}) +``` + +## zPieStyle + +源码：[packages/vseed/src/types/properties/markStyle/zPieStyle.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/markStyle/zPieStyle.ts) + +包导出：`zPieStyle` + +```typescript +const zPieStyle = z.object({ + pieBorderColor: z.string().nullish(), + pieBorderWidth: z.number().nonnegative().nullish(), + pieCornerRadius: z.number().nonnegative().nullish(), + pieHoverEffect: z.enum(['opacity', 'enlarge', 'none']).nullish(), +}) +``` + +## zPivotChartGridConfig + +源码：[packages/vseed/src/types/properties/config/pivotGrid/pivotGrid.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/pivotGrid/pivotGrid.ts) + +包导出：`zPivotChartGridConfig` + +```typescript +const zPivotChartGridConfig = z.object({ + borderColor: z.string().nullish(), + bodyFontSize: z.number().nullish(), + bodyFontColor: z.string().nullish(), + headerFontSize: z.number().nullish(), + headerFontColor: z.string().nullish(), + headerBackgroundColor: z.string().nullish(), + hoverHeaderBackgroundColor: z.string().nullish(), + hoverHeaderInlineBackgroundColor: z.string().nullish(), + outlineBorderLineWidth: z.number().nullish(), + frameCornerRadius: z.number().nullish(), + + minChartWidth: z.number().nullish(), + minChartHeight: z.number().nullish(), + + titleFontColor: z.string().nullish(), + titleFontSize: z.number().nullish(), + titleFontWeight: z.string().nullish(), + + chartGridColor: z.string().nullish(), + axisLabelColor: z.string().nullish(), + axisLabelFontSize: z.number().nullish(), + axisLabelFontWeight: z.number().nullish(), +}) +``` + +## zPivotTable + +源码：[packages/vseed/src/types/chartType/pivotTable/zPivotTable.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/chartType/pivotTable/zPivotTable.ts) + +包导出：`zPivotTable` + +```typescript +const zPivotTable = z.object({ + chartType: z.literal('pivotTable'), + dataset: zDataset.nullish(), + dimensions: zDimensions.nullish(), + measures: zMeasures.nullish(), + page: zPage.nullish(), + + backgroundColor: zBackgroundColor.nullish(), + borderColor: z.string().nullish(), + bodyFontSize: z.number().nullish(), + bodyFontColor: z.string().nullish(), + bodyBackgroundColor: z.string().nullish(), + hoverBodyBackgroundColor: z.string().nullish(), + hoverBodyInlineBackgroundColor: z.string().nullish(), + headerFontSize: z.number().nullish(), + headerFontColor: z.string().nullish(), + headerBackgroundColor: z.string().nullish(), + hoverHeaderBackgroundColor: z.string().nullish(), + hoverHeaderInlineBackgroundColor: z.string().nullish(), + selectedBorderColor: z.string().nullish(), + selectedBackgroundColor: z.string().nullish(), + bodyCellStyle: z.array(zBodyCellStyle).or(zBodyCellStyle).nullish(), + + indicatorsAsCol: z.boolean().nullish(), + totals: zPivotTableTotals.nullish(), + + theme: zTheme.nullish(), + locale: zLocale.nullish(), +}) +``` + +关联 API：[zBackgroundColor](schemas.md#zbackgroundcolor)、[zBodyCellStyle](schemas.md#zbodycellstyle)、[zDataset](schemas.md#zdataset)、[zDimensions](schemas.md#zdimensions)、[zLocale](schemas.md#zlocale)、[zMeasures](schemas.md#zmeasures)、[zPage](schemas.md#zpage)、[zPivotTableTotals](schemas.md#zpivottabletotals)、[zTheme](schemas.md#ztheme) + +## zPivotTableConfig + +源码：[packages/vseed/src/types/properties/config/pivotTable.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/pivotTable.ts) + +包导出：`zPivotTableConfig` + +```typescript +const zPivotTableConfig = zTableConfig +``` + +关联 API：[zTableConfig](schemas.md#ztableconfig) + +## zPivotTableTotals + +源码：[packages/vseed/src/types/properties/totals/zTotals.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/totals/zTotals.ts) + +包导出：`zPivotTableTotals` + +```typescript +const zPivotTableTotals = z.object({ + row: zRowOrColumnTotalConfig.optional(), + column: zRowOrColumnTotalConfig.optional(), +}) +``` + +关联 API：[zRowOrColumnTotalConfig](schemas.md#zroworcolumntotalconfig) + +## zPlayer + +源码：[packages/vseed/src/types/properties/config/player/zPlayer.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/player/zPlayer.ts) + +包导出：`zPlayer` + +```typescript +const zPlayer = z.object({ + interval: z.number().optional(), + maxCount: z.number().or(z.literal(false)).optional(), + autoPlay: z.boolean().optional(), + loop: z.boolean().optional(), + position: z.enum(['top', 'bottom', 'left', 'right']).optional(), + + railColor: z.string().optional(), + fontFamily: z.string().optional(), + fontSize: z.number().optional(), + trackColor: z.string().optional(), + sliderHandleColor: z.string().optional(), + + startButtonColor: z.string().optional(), + pauseButtonColor: z.string().optional(), + backwardButtonColor: z.string().optional(), + forwardButtonColor: z.string().optional(), +}) +``` + +## zPointStyle + +源码：[packages/vseed/src/types/properties/markStyle/zPointStyle.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/markStyle/zPointStyle.ts) + +包导出：`zPointStyle` + +```typescript +const zPointStyle = z.object({ + selector: z.union([zSelector, zSelectors]).nullish(), + dynamicFilter: zChartDynamicFilter.optional(), + pointVisible: z.boolean().nullish(), + pointSize: z.number().nullish(), + pointColor: z.string().nullish(), + pointColorOpacity: z.number().nullish(), + pointBorderColor: z.string().nullish(), + pointBorderWidth: z.number().nullish(), + pointBorderStyle: z.union([z.enum(['solid', 'dashed', 'dotted'])]).nullish(), +}) +``` + +关联 API：[zChartDynamicFilter](schemas.md#zchartdynamicfilter)、[zSelector](schemas.md#zselector)、[zSelectors](schemas.md#zselectors) + +## zPolynomialRegressionLine + +源码：[packages/vseed/src/types/properties/regressionLine/zRegressionLine.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/regressionLine/zRegressionLine.ts) + +包导出：`zPolynomialRegressionLine` + +```typescript +const zPolynomialRegressionLine = zLinearRegressionLine.extend({ + degree: z.number().nullish(), +}) +``` + +关联 API：[zLinearRegressionLine](schemas.md#zlinearregressionline) + +## zRaceBar + +源码：[packages/vseed/src/types/chartType/raceBar/zRaceBar.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/chartType/raceBar/zRaceBar.ts) + +包导出：`zRaceBar` + +```typescript +const zRaceBar = z.object({ + chartType: z.literal('raceBar'), + dataset: zDataset.nullish(), + encoding: zEncoding.nullish(), + dimensions: zDimensions.nullish(), + measures: zMeasures.nullish(), + page: zPage.nullish(), + player: zPlayer.nullish(), + sort: zSort.nullish(), + + backgroundColor: zBackgroundColor.nullish(), + color: zColor.nullish(), + label: zLabel.nullish(), + legend: zLegend.nullish(), + tooltip: zTooltip.nullish(), + brush: zBrush.nullish(), + xAxis: zXLinearAxis.nullish(), + yAxis: zYBandAxis.nullish(), + crosshairRect: zCrosshairRect.nullish(), + cornerRadius: zCornerRadius.nullish(), + stackCornerRadius: zStackCornerRadius.nullish(), + barMaxWidth: zBarMaxWidth.nullish(), + sortLegend: zSortLegend.nullish(), + theme: zTheme.nullish(), + barStyle: z.array(zBarStyle).or(zBarStyle).nullish(), + annotationPoint: z.array(zAnnotationPoint).or(zAnnotationPoint).nullish(), + annotationVerticalLine: z.array(zAnnotationVerticalLine).or(zAnnotationVerticalLine).nullish(), + annotationHorizontalLine: z.array(zAnnotationHorizontalLine).or(zAnnotationHorizontalLine).nullish(), + annotationArea: z.array(zAnnotationArea).or(zAnnotationArea).nullish(), + dimensionLinkage: zDimensionLinkage.nullish(), + locale: zLocale.nullish(), +}) +``` + +关联 API：[zAnnotationArea](schemas.md#zannotationarea)、[zAnnotationHorizontalLine](schemas.md#zannotationhorizontalline)、[zAnnotationPoint](schemas.md#zannotationpoint)、[zAnnotationVerticalLine](schemas.md#zannotationverticalline)、[zBackgroundColor](schemas.md#zbackgroundcolor)、[zBarMaxWidth](schemas.md#zbarmaxwidth)、[zBarStyle](schemas.md#zbarstyle)、[zBrush](schemas.md#zbrush)、[zColor](schemas.md#zcolor)、[zCornerRadius](schemas.md#zcornerradius)、[zCrosshairRect](schemas.md#zcrosshairrect)、[zDataset](schemas.md#zdataset)、[zDimensionLinkage](schemas.md#zdimensionlinkage)、[zDimensions](schemas.md#zdimensions)、[zEncoding](schemas.md#zencoding)、[zLabel](schemas.md#zlabel)、[zLegend](schemas.md#zlegend)、[zLocale](schemas.md#zlocale)、[zMeasures](schemas.md#zmeasures)、[zPage](schemas.md#zpage)、[zPlayer](schemas.md#zplayer)、[zSort](schemas.md#zsort)、[zSortLegend](schemas.md#zsortlegend)、[zStackCornerRadius](schemas.md#zstackcornerradius)、[zTheme](schemas.md#ztheme)、[zTooltip](schemas.md#ztooltip)、[zXLinearAxis](schemas.md#zxlinearaxis)、[zYBandAxis](schemas.md#zybandaxis) + +## zRaceBarConfig + +源码：[packages/vseed/src/types/properties/config/race.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/race.ts) + +关联类型：通过公开 API 的签名引用，不是包入口的独立导出。 + +```typescript +const zRaceBarConfig = zBarConfig.extend({ + player: zPlayer.nullish(), +}) +``` + +关联 API：[zBarConfig](schemas.md#zbarconfig)、[zPlayer](schemas.md#zplayer) + +## zRaceColumn + +源码：[packages/vseed/src/types/chartType/raceColumn/zRaceColumn.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/chartType/raceColumn/zRaceColumn.ts) + +包导出：`zRaceColumn` + +```typescript +const zRaceColumn = z.object({ + chartType: z.literal('raceColumn'), + dataset: zDataset.nullish(), + encoding: zEncoding.nullish(), + dimensions: zDimensions.nullish(), + measures: zMeasures.nullish(), + page: zPage.nullish(), + player: zPlayer.nullish(), + sort: zSort.nullish(), + + backgroundColor: zBackgroundColor.nullish(), + color: zColor.nullish(), + label: zLabel.nullish(), + legend: zLegend.nullish(), + tooltip: zTooltip.nullish(), + brush: zBrush.nullish(), + xAxis: zYBandAxis.nullish(), + yAxis: zXLinearAxis.nullish(), + crosshairRect: zCrosshairRect.nullish(), + cornerRadius: zCornerRadius.nullish(), + stackCornerRadius: zStackCornerRadius.nullish(), + barMaxWidth: zBarMaxWidth.nullish(), + sortLegend: zSortLegend.nullish(), + theme: zTheme.nullish(), + barStyle: z.array(zBarStyle).or(zBarStyle).nullish(), + annotationPoint: z.array(zAnnotationPoint).or(zAnnotationPoint).nullish(), + annotationVerticalLine: z.array(zAnnotationVerticalLine).or(zAnnotationVerticalLine).nullish(), + annotationHorizontalLine: z.array(zAnnotationHorizontalLine).or(zAnnotationHorizontalLine).nullish(), + annotationArea: z.array(zAnnotationArea).or(zAnnotationArea).nullish(), + dimensionLinkage: zDimensionLinkage.nullish(), + locale: zLocale.nullish(), +}) +``` + +关联 API：[zAnnotationArea](schemas.md#zannotationarea)、[zAnnotationHorizontalLine](schemas.md#zannotationhorizontalline)、[zAnnotationPoint](schemas.md#zannotationpoint)、[zAnnotationVerticalLine](schemas.md#zannotationverticalline)、[zBackgroundColor](schemas.md#zbackgroundcolor)、[zBarMaxWidth](schemas.md#zbarmaxwidth)、[zBarStyle](schemas.md#zbarstyle)、[zBrush](schemas.md#zbrush)、[zColor](schemas.md#zcolor)、[zCornerRadius](schemas.md#zcornerradius)、[zCrosshairRect](schemas.md#zcrosshairrect)、[zDataset](schemas.md#zdataset)、[zDimensionLinkage](schemas.md#zdimensionlinkage)、[zDimensions](schemas.md#zdimensions)、[zEncoding](schemas.md#zencoding)、[zLabel](schemas.md#zlabel)、[zLegend](schemas.md#zlegend)、[zLocale](schemas.md#zlocale)、[zMeasures](schemas.md#zmeasures)、[zPage](schemas.md#zpage)、[zPlayer](schemas.md#zplayer)、[zSort](schemas.md#zsort)、[zSortLegend](schemas.md#zsortlegend)、[zStackCornerRadius](schemas.md#zstackcornerradius)、[zTheme](schemas.md#ztheme)、[zTooltip](schemas.md#ztooltip)、[zXLinearAxis](schemas.md#zxlinearaxis)、[zYBandAxis](schemas.md#zybandaxis) + +## zRaceColumnConfig + +源码：[packages/vseed/src/types/properties/config/race.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/race.ts) + +关联类型：通过公开 API 的签名引用，不是包入口的独立导出。 + +```typescript +const zRaceColumnConfig = zColumnConfig.extend({ + player: zPlayer.nullish(), +}) +``` + +关联 API：[zColumnConfig](schemas.md#zcolumnconfig)、[zPlayer](schemas.md#zplayer) + +## zRaceDonut + +源码：[packages/vseed/src/types/chartType/raceDonut/zRaceDonut.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/chartType/raceDonut/zRaceDonut.ts) + +包导出：`zRaceDonut` + +```typescript +const zRaceDonut = z.object({ + chartType: z.literal('raceDonut'), + dataset: zDataset.nullish(), + encoding: zEncoding.nullish(), + dimensions: zDimensions.nullish(), + measures: zMeasures.nullish(), + page: zPage.nullish(), + player: zPlayer.nullish(), + + backgroundColor: zBackgroundColor.nullish(), + color: zColor.nullish(), + label: zPieLabel.nullish(), + legend: zLegend.nullish(), + tooltip: zTooltip.nullish(), + brush: zBrush.nullish(), + theme: zTheme.nullish(), + locale: zLocale.nullish(), +}) +``` + +关联 API：[zBackgroundColor](schemas.md#zbackgroundcolor)、[zBrush](schemas.md#zbrush)、[zColor](schemas.md#zcolor)、[zDataset](schemas.md#zdataset)、[zDimensions](schemas.md#zdimensions)、[zEncoding](schemas.md#zencoding)、[zLegend](schemas.md#zlegend)、[zLocale](schemas.md#zlocale)、[zMeasures](schemas.md#zmeasures)、[zPage](schemas.md#zpage)、[zPieLabel](schemas.md#zpielabel)、[zPlayer](schemas.md#zplayer)、[zTheme](schemas.md#ztheme)、[zTooltip](schemas.md#ztooltip) + +## zRaceDonutConfig + +源码：[packages/vseed/src/types/properties/config/race.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/race.ts) + +关联类型：通过公开 API 的签名引用，不是包入口的独立导出。 + +```typescript +const zRaceDonutConfig = zScatterConfig.extend({ + ...zPieGeometry.shape, + pieStyle: zPieStyle.nullish(), + player: zPlayer.nullish(), +}) +``` + +关联 API：[zPieGeometry](schemas.md#zpiegeometry)、[zPieStyle](schemas.md#zpiestyle)、[zPlayer](schemas.md#zplayer)、[zScatterConfig](schemas.md#zscatterconfig) + +## zRaceLine + +源码：[packages/vseed/src/types/chartType/raceLine/zRaceLine.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/chartType/raceLine/zRaceLine.ts) + +包导出：`zRaceLine` + +```typescript +const zRaceLine = z.object({ + chartType: z.literal('raceLine'), + dataset: zDataset.nullish(), + encoding: zEncoding.nullish(), + dimensions: zDimensions.nullish(), + measures: zMeasures.nullish(), + page: zPage.nullish(), + player: zPlayer.nullish(), + + backgroundColor: zBackgroundColor.nullish(), + color: zColor.nullish(), + label: zLabel.nullish(), + legend: zLegend.nullish(), + tooltip: zTooltip.nullish(), + brush: zBrush.nullish(), + xAxis: zXBandAxis.nullish(), + yAxis: zYLinearAxis.nullish(), + crosshairLine: zCrosshairLine.nullish(), + sort: zSort.nullish(), + sortLegend: zSortLegend.nullish(), + theme: zTheme.nullish(), + pointStyle: z.array(zPointStyle).or(zPointStyle).nullish(), + lineStyle: z.array(zLineStyle).or(zLineStyle).nullish(), + annotationPoint: z.array(zAnnotationPoint).or(zAnnotationPoint).nullish(), + annotationVerticalLine: z.array(zAnnotationVerticalLine).or(zAnnotationVerticalLine).nullish(), + annotationHorizontalLine: z.array(zAnnotationHorizontalLine).or(zAnnotationHorizontalLine).nullish(), + annotationArea: z.array(zAnnotationArea).or(zAnnotationArea).nullish(), + dimensionLinkage: zDimensionLinkage.nullish(), + locale: zLocale.nullish(), +}) +``` + +关联 API：[zAnnotationArea](schemas.md#zannotationarea)、[zAnnotationHorizontalLine](schemas.md#zannotationhorizontalline)、[zAnnotationPoint](schemas.md#zannotationpoint)、[zAnnotationVerticalLine](schemas.md#zannotationverticalline)、[zBackgroundColor](schemas.md#zbackgroundcolor)、[zBrush](schemas.md#zbrush)、[zColor](schemas.md#zcolor)、[zCrosshairLine](schemas.md#zcrosshairline)、[zDataset](schemas.md#zdataset)、[zDimensionLinkage](schemas.md#zdimensionlinkage)、[zDimensions](schemas.md#zdimensions)、[zEncoding](schemas.md#zencoding)、[zLabel](schemas.md#zlabel)、[zLegend](schemas.md#zlegend)、[zLineStyle](schemas.md#zlinestyle)、[zLocale](schemas.md#zlocale)、[zMeasures](schemas.md#zmeasures)、[zPage](schemas.md#zpage)、[zPlayer](schemas.md#zplayer)、[zPointStyle](schemas.md#zpointstyle)、[zSort](schemas.md#zsort)、[zSortLegend](schemas.md#zsortlegend)、[zTheme](schemas.md#ztheme)、[zTooltip](schemas.md#ztooltip)、[zXBandAxis](schemas.md#zxbandaxis)、[zYLinearAxis](schemas.md#zylinearaxis) + +## zRaceLineConfig + +源码：[packages/vseed/src/types/properties/config/race.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/race.ts) + +关联类型：通过公开 API 的签名引用，不是包入口的独立导出。 + +```typescript +const zRaceLineConfig = zScatterConfig.extend({ + player: zPlayer.nullish(), +}) +``` + +关联 API：[zPlayer](schemas.md#zplayer)、[zScatterConfig](schemas.md#zscatterconfig) + +## zRacePie + +源码：[packages/vseed/src/types/chartType/racePie/zRacePie.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/chartType/racePie/zRacePie.ts) + +包导出：`zRacePie` + +```typescript +const zRacePie = z.object({ + chartType: z.literal('racePie'), + dataset: zDataset.nullish(), + encoding: zEncoding.nullish(), + dimensions: zDimensions.nullish(), + measures: zMeasures.nullish(), + page: zPage.nullish(), + player: zPlayer.nullish(), + + backgroundColor: zBackgroundColor.nullish(), + color: zColor.nullish(), + label: zPieLabel.nullish(), + legend: zLegend.nullish(), + tooltip: zTooltip.nullish(), + brush: zBrush.nullish(), + theme: zTheme.nullish(), + locale: zLocale.nullish(), +}) +``` + +关联 API：[zBackgroundColor](schemas.md#zbackgroundcolor)、[zBrush](schemas.md#zbrush)、[zColor](schemas.md#zcolor)、[zDataset](schemas.md#zdataset)、[zDimensions](schemas.md#zdimensions)、[zEncoding](schemas.md#zencoding)、[zLegend](schemas.md#zlegend)、[zLocale](schemas.md#zlocale)、[zMeasures](schemas.md#zmeasures)、[zPage](schemas.md#zpage)、[zPieLabel](schemas.md#zpielabel)、[zPlayer](schemas.md#zplayer)、[zTheme](schemas.md#ztheme)、[zTooltip](schemas.md#ztooltip) + +## zRacePieConfig + +源码：[packages/vseed/src/types/properties/config/race.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/race.ts) + +关联类型：通过公开 API 的签名引用，不是包入口的独立导出。 + +```typescript +const zRacePieConfig = zScatterConfig.extend({ + ...zPieGeometry.shape, + pieStyle: zPieStyle.nullish(), + player: zPlayer.nullish(), +}) +``` + +关联 API：[zPieGeometry](schemas.md#zpiegeometry)、[zPieStyle](schemas.md#zpiestyle)、[zPlayer](schemas.md#zplayer)、[zScatterConfig](schemas.md#zscatterconfig) + +## zRaceScatter + +源码：[packages/vseed/src/types/chartType/raceScatter/zRaceScatter.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/chartType/raceScatter/zRaceScatter.ts) + +包导出：`zRaceScatter` + +```typescript +const zRaceScatter = z.object({ + chartType: z.literal('raceScatter'), + dataset: zDataset.nullish(), + encoding: zEncoding.nullish(), + dimensions: zDimensions.nullish(), + measures: zMeasures.nullish(), + page: zPage.nullish(), + + player: zPlayer.nullish(), + sort: zSort.nullish(), + + backgroundColor: zBackgroundColor.nullish(), + size: z.number().or(z.array(z.number())).nullish(), + sizeRange: z.number().or(z.array(z.number())).nullish(), + color: zColor.nullish(), + label: zLabel.nullish(), + legend: zLegend.nullish(), + tooltip: zTooltip.nullish(), + brush: zBrush.nullish(), + xAxis: zXLinearAxis.nullish(), + yAxis: zYLinearAxis.nullish(), + crosshairLine: zCrosshairLine.nullish(), + theme: zTheme.nullish(), + pointStyle: z.array(zPointStyle).or(zPointStyle).nullish(), + annotationPoint: z.array(zAnnotationPoint).or(zAnnotationPoint).nullish(), + annotationVerticalLine: z.array(zAnnotationVerticalLine).or(zAnnotationVerticalLine).nullish(), + annotationHorizontalLine: z.array(zAnnotationHorizontalLine).or(zAnnotationHorizontalLine).nullish(), + annotationArea: z.array(zAnnotationArea).or(zAnnotationArea).nullish(), + regressionLine: zRegressionLine.nullish(), + locale: zLocale.nullish(), +}) +``` + +关联 API：[zAnnotationArea](schemas.md#zannotationarea)、[zAnnotationHorizontalLine](schemas.md#zannotationhorizontalline)、[zAnnotationPoint](schemas.md#zannotationpoint)、[zAnnotationVerticalLine](schemas.md#zannotationverticalline)、[zBackgroundColor](schemas.md#zbackgroundcolor)、[zBrush](schemas.md#zbrush)、[zColor](schemas.md#zcolor)、[zCrosshairLine](schemas.md#zcrosshairline)、[zDataset](schemas.md#zdataset)、[zDimensions](schemas.md#zdimensions)、[zEncoding](schemas.md#zencoding)、[zLabel](schemas.md#zlabel)、[zLegend](schemas.md#zlegend)、[zLocale](schemas.md#zlocale)、[zMeasures](schemas.md#zmeasures)、[zPage](schemas.md#zpage)、[zPlayer](schemas.md#zplayer)、[zPointStyle](schemas.md#zpointstyle)、[zRegressionLine](schemas.md#zregressionline)、[zSort](schemas.md#zsort)、[zTheme](schemas.md#ztheme)、[zTooltip](schemas.md#ztooltip)、[zXLinearAxis](schemas.md#zxlinearaxis)、[zYLinearAxis](schemas.md#zylinearaxis) + +## zRaceScatterConfig + +源码：[packages/vseed/src/types/properties/config/race.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/race.ts) + +关联类型：通过公开 API 的签名引用，不是包入口的独立导出。 + +```typescript +const zRaceScatterConfig = zScatterConfig.extend({ + player: zPlayer.nullish(), +}) +``` + +关联 API：[zPlayer](schemas.md#zplayer)、[zScatterConfig](schemas.md#zscatterconfig) + +## zRadar + +源码：[packages/vseed/src/types/chartType/radar/zRadar.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/chartType/radar/zRadar.ts) + +包导出：`zRadar` + +```typescript +const zRadar = z.object({ + chartType: z.literal('radar'), + dataset: zDataset.nullish(), + encoding: zEncoding.nullish(), + dimensions: zDimensions.nullish(), + measures: zMeasures.nullish(), + page: zPage.nullish(), + + backgroundColor: zBackgroundColor.nullish(), + color: zColor.nullish(), + label: zLabel.nullish(), + legend: zLegend.nullish(), + tooltip: zTooltip.nullish(), + brush: zBrush.nullish(), + animation: zRadarAnimation.nullish(), + theme: zTheme.nullish(), + locale: zLocale.nullish(), +}) +``` + +关联 API：[zBackgroundColor](schemas.md#zbackgroundcolor)、[zBrush](schemas.md#zbrush)、[zColor](schemas.md#zcolor)、[zDataset](schemas.md#zdataset)、[zDimensions](schemas.md#zdimensions)、[zEncoding](schemas.md#zencoding)、[zLabel](schemas.md#zlabel)、[zLegend](schemas.md#zlegend)、[zLocale](schemas.md#zlocale)、[zMeasures](schemas.md#zmeasures)、[zPage](schemas.md#zpage)、[zRadarAnimation](schemas.md#zradaranimation)、[zTheme](schemas.md#ztheme)、[zTooltip](schemas.md#ztooltip) + +## zRadarAnimation + +源码：[packages/vseed/src/types/properties/config/animation/zAnimation.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/animation/zAnimation.ts) + +包导出：`zRadarAnimation` + +```typescript +const zRadarAnimation = createAnimation({ + appear: ['radial', 'scale'], + update: ['growth'], + atmosphere: zPointAtmosphere, +}) +``` + +## zRadarConfig + +源码：[packages/vseed/src/types/properties/config/pie.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/pie.ts) + +包导出：`zRadarConfig` + +```typescript +const zRadarConfig = zPolarConfig.extend({ + animation: zRadarAnimation.nullish(), +}) +``` + +关联 API：[zRadarAnimation](schemas.md#zradaranimation) + +## zRegionPadding + +源码：[packages/vseed/src/types/properties/regionPadding/zRegionPadding.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/regionPadding/zRegionPadding.ts) + +包导出：`zRegionPadding` + +```typescript +const zRegionPadding = z.number().nonnegative().or(zRegionPaddingObject) +``` + +## zRegressionLine + +源码：[packages/vseed/src/types/properties/regressionLine/zRegressionLine.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/regressionLine/zRegressionLine.ts) + +包导出：`zRegressionLine` + +```typescript +const zRegressionLine = z.object({ + ecdfRegressionLine: zEcdfRegressionLine.or(z.array(zEcdfRegressionLine)).nullish(), + kdeRegressionLine: zKdeRegressionLine.or(z.array(zKdeRegressionLine)).nullish(), + linearRegressionLine: zLinearRegressionLine.or(z.array(zLinearRegressionLine)).nullish(), + lowessRegressionLine: zLowessRegressionLine.or(z.array(zLowessRegressionLine)).nullish(), + polynomialRegressionLine: zPolynomialRegressionLine.or(z.array(zPolynomialRegressionLine)).nullish(), + logisticRegressionLine: zLogisticRegressionLine.or(z.array(zLogisticRegressionLine)).nullish(), +}) +``` + +关联 API：[zEcdfRegressionLine](schemas.md#zecdfregressionline)、[zKdeRegressionLine](schemas.md#zkderegressionline)、[zLinearRegressionLine](schemas.md#zlinearregressionline)、[zLogisticRegressionLine](schemas.md#zlogisticregressionline)、[zLowessRegressionLine](schemas.md#zlowessregressionline)、[zPolynomialRegressionLine](schemas.md#zpolynomialregressionline) + +## zRose + +源码：[packages/vseed/src/types/chartType/rose/zRose.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/chartType/rose/zRose.ts) + +包导出：`zRose` + +```typescript +const zRose = z.object({ + chartType: z.literal('rose'), + dataset: zDataset.nullish(), + encoding: zEncoding.nullish(), + dimensions: zDimensions.nullish(), + measures: zMeasures.nullish(), + page: zPage.nullish(), + backgroundColor: zBackgroundColor.nullish(), + color: zColor.nullish(), + label: zLabel.nullish(), + legend: zLegend.nullish(), + tooltip: zTooltip.nullish(), + brush: zBrush.nullish(), + animation: zPieLikeAnimation.nullish(), + theme: zTheme.nullish(), + locale: zLocale.nullish(), +}) +``` + +关联 API：[zBackgroundColor](schemas.md#zbackgroundcolor)、[zBrush](schemas.md#zbrush)、[zColor](schemas.md#zcolor)、[zDataset](schemas.md#zdataset)、[zDimensions](schemas.md#zdimensions)、[zEncoding](schemas.md#zencoding)、[zLabel](schemas.md#zlabel)、[zLegend](schemas.md#zlegend)、[zLocale](schemas.md#zlocale)、[zMeasures](schemas.md#zmeasures)、[zPage](schemas.md#zpage)、[zPieLikeAnimation](schemas.md#zpielikeanimation)、[zTheme](schemas.md#ztheme)、[zTooltip](schemas.md#ztooltip) + +## zRoseConfig + +源码：[packages/vseed/src/types/properties/config/rose.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/rose.ts) + +包导出：`zRoseConfig` + +```typescript +const zRoseConfig = z.object({ + backgroundColor: zBackgroundColor.nullish(), + label: zPieLabel.nullish(), + color: zColor.nullish(), + tooltip: zTooltip.nullish(), + legend: zLegend.nullish(), + + pivotGrid: zPivotChartGridConfig.nullish(), + animation: zPieLikeAnimation.nullish(), +}) +``` + +关联 API：[zBackgroundColor](schemas.md#zbackgroundcolor)、[zColor](schemas.md#zcolor)、[zLegend](schemas.md#zlegend)、[zPieLabel](schemas.md#zpielabel)、[zPieLikeAnimation](schemas.md#zpielikeanimation)、[zPivotChartGridConfig](schemas.md#zpivotchartgridconfig)、[zTooltip](schemas.md#ztooltip) + +## zRoseParallel + +源码：[packages/vseed/src/types/chartType/roseParallel/zRoseParallel.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/chartType/roseParallel/zRoseParallel.ts) + +包导出：`zRoseParallel` + +```typescript +const zRoseParallel = z.object({ + chartType: z.literal('roseParallel'), + dataset: zDataset.nullish(), + encoding: zEncoding.nullish(), + dimensions: zDimensions.nullish(), + measures: zMeasures.nullish(), + page: zPage.nullish(), + + backgroundColor: zBackgroundColor.nullish(), + color: zColor.nullish(), + label: zLabel.nullish(), + legend: zLegend.nullish(), + tooltip: zTooltip.nullish(), + brush: zBrush.nullish(), + animation: zPieLikeAnimation.nullish(), + theme: zTheme.nullish(), + locale: zLocale.nullish(), +}) +``` + +关联 API：[zBackgroundColor](schemas.md#zbackgroundcolor)、[zBrush](schemas.md#zbrush)、[zColor](schemas.md#zcolor)、[zDataset](schemas.md#zdataset)、[zDimensions](schemas.md#zdimensions)、[zEncoding](schemas.md#zencoding)、[zLabel](schemas.md#zlabel)、[zLegend](schemas.md#zlegend)、[zLocale](schemas.md#zlocale)、[zMeasures](schemas.md#zmeasures)、[zPage](schemas.md#zpage)、[zPieLikeAnimation](schemas.md#zpielikeanimation)、[zTheme](schemas.md#ztheme)、[zTooltip](schemas.md#ztooltip) + +## zRoseParallelConfig + +源码：[packages/vseed/src/types/properties/config/rose.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/rose.ts) + +包导出：`zRoseParallelConfig` + +```typescript +const zRoseParallelConfig = zRoseConfig +``` + +关联 API：[zRoseConfig](schemas.md#zroseconfig) + +## zRowOrColumnTotalConfig + +源码：[packages/vseed/src/types/properties/totals/zTotals.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/totals/zTotals.ts) + +包导出：`zRowOrColumnTotalConfig` + +```typescript +const zRowOrColumnTotalConfig = z.object({ + showGrandTotals: z.boolean().optional(), + showSubTotals: z.boolean().optional(), + subTotalsDimensions: z.array(z.string()).optional(), +}) +``` + +## zSankey + +源码：[packages/vseed/src/types/chartType/sankey/zSankey.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/chartType/sankey/zSankey.ts) + +包导出：`zSankey` + +```typescript +const zSankey = z.object({ + chartType: z.literal('sankey'), + dataset: zDataset.nullish(), + dimensions: zDimensions.nullish(), + measures: zMeasures.nullish(), + page: zPage.nullish(), + + backgroundColor: zBackgroundColor.nullish(), + color: zColor.nullish(), + label: zLabel.nullish(), + legend: zLegend.nullish(), + tooltip: zTooltip.nullish(), + theme: zTheme.nullish(), + locale: zLocale.nullish(), +}) +``` + +关联 API：[zBackgroundColor](schemas.md#zbackgroundcolor)、[zColor](schemas.md#zcolor)、[zDataset](schemas.md#zdataset)、[zDimensions](schemas.md#zdimensions)、[zLabel](schemas.md#zlabel)、[zLegend](schemas.md#zlegend)、[zLocale](schemas.md#zlocale)、[zMeasures](schemas.md#zmeasures)、[zPage](schemas.md#zpage)、[zTheme](schemas.md#ztheme)、[zTooltip](schemas.md#ztooltip) + +## zSankeyConfig + +源码：[packages/vseed/src/types/properties/config/sankey.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/sankey.ts) + +包导出：`zSankeyConfig` + +```typescript +const zSankeyConfig = z.object({ + backgroundColor: zBackgroundColor.nullish(), + label: zLabel.nullish(), + color: zColor.nullish(), + tooltip: zTooltip.nullish(), + legend: zLegend.nullish(), + pivotGrid: zPivotChartGridConfig.nullish(), +}) +``` + +关联 API：[zBackgroundColor](schemas.md#zbackgroundcolor)、[zColor](schemas.md#zcolor)、[zLabel](schemas.md#zlabel)、[zLegend](schemas.md#zlegend)、[zPivotChartGridConfig](schemas.md#zpivotchartgridconfig)、[zTooltip](schemas.md#ztooltip) + +## zScatter + +源码：[packages/vseed/src/types/chartType/scatter/zScatter.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/chartType/scatter/zScatter.ts) + +包导出：`zScatter` + +```typescript +const zScatter = z.object({ + chartType: z.literal('scatter'), + dataset: zDataset.nullish(), + encoding: zEncoding.nullish(), + dimensions: zDimensions.nullish(), + measures: zMeasures.nullish(), + page: zPage.nullish(), + + backgroundColor: zBackgroundColor.nullish(), + size: z.number().or(z.array(z.number())).nullish(), + sizeRange: z.number().or(z.array(z.number())).nullish(), + color: zColor.nullish(), + label: zLabel.nullish(), + legend: zLegend.nullish(), + tooltip: zTooltip.nullish(), + brush: zBrush.nullish(), + animation: zScatterAnimation.nullish(), + xAxis: zXLinearAxis.nullish(), + yAxis: zYLinearAxis.nullish(), + crosshairLine: zCrosshairLine.nullish(), + theme: zTheme.nullish(), + pointStyle: z.array(zPointStyle).or(zPointStyle).nullish(), + annotationPoint: z.array(zAnnotationPoint).or(zAnnotationPoint).nullish(), + annotationVerticalLine: z.array(zAnnotationVerticalLine).or(zAnnotationVerticalLine).nullish(), + annotationHorizontalLine: z.array(zAnnotationHorizontalLine).or(zAnnotationHorizontalLine).nullish(), + annotationArea: z.array(zAnnotationArea).or(zAnnotationArea).nullish(), + linearRegressionLine: z.array(zLinearRegressionLine).or(zLinearRegressionLine).nullish(), + lowessRegressionLine: z.array(zLowessRegressionLine).or(zLowessRegressionLine).nullish(), + polynomialRegressionLine: z.array(zPolynomialRegressionLine).or(zPolynomialRegressionLine).nullish(), + logisticRegressionLine: z.array(zLogisticRegressionLine).or(zLogisticRegressionLine).nullish(), + dimensionLinkage: zDimensionLinkage.nullish(), + locale: zLocale.nullish(), +}) +``` + +关联 API：[zAnnotationArea](schemas.md#zannotationarea)、[zAnnotationHorizontalLine](schemas.md#zannotationhorizontalline)、[zAnnotationPoint](schemas.md#zannotationpoint)、[zAnnotationVerticalLine](schemas.md#zannotationverticalline)、[zBackgroundColor](schemas.md#zbackgroundcolor)、[zBrush](schemas.md#zbrush)、[zColor](schemas.md#zcolor)、[zCrosshairLine](schemas.md#zcrosshairline)、[zDataset](schemas.md#zdataset)、[zDimensionLinkage](schemas.md#zdimensionlinkage)、[zDimensions](schemas.md#zdimensions)、[zEncoding](schemas.md#zencoding)、[zLabel](schemas.md#zlabel)、[zLegend](schemas.md#zlegend)、[zLinearRegressionLine](schemas.md#zlinearregressionline)、[zLocale](schemas.md#zlocale)、[zLogisticRegressionLine](schemas.md#zlogisticregressionline)、[zLowessRegressionLine](schemas.md#zlowessregressionline)、[zMeasures](schemas.md#zmeasures)、[zPage](schemas.md#zpage)、[zPointStyle](schemas.md#zpointstyle)、[zPolynomialRegressionLine](schemas.md#zpolynomialregressionline)、[zScatterAnimation](schemas.md#zscatteranimation)、[zTheme](schemas.md#ztheme)、[zTooltip](schemas.md#ztooltip)、[zXLinearAxis](schemas.md#zxlinearaxis)、[zYLinearAxis](schemas.md#zylinearaxis) + +## zScatterAnimation + +源码：[packages/vseed/src/types/properties/config/animation/zAnimation.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/animation/zAnimation.ts) + +包导出：`zScatterAnimation` + +```typescript +const zScatterAnimation = createAnimation({ + appear: ['growth', 'scale'], + update: ['growth'], + loop: ['growth', 'scale', 'none'], + atmosphere: zPointAtmosphere, +}) +``` + +## zScatterConfig + +源码：[packages/vseed/src/types/properties/config/scatter.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/scatter.ts) + +包导出：`zScatterConfig` + +```typescript +const zScatterConfig = z.object({ + backgroundColor: zBackgroundColor.nullish(), + label: zLabel.nullish(), + color: zColor.nullish(), + tooltip: zTooltip.nullish(), + legend: zLegend.nullish(), + + xAxis: zXLinearAxis.nullish(), + yAxis: zYLinearAxis.nullish(), + crosshairLine: zCrosshairLine.nullish(), + size: z.number().or(z.array(z.number())).nullish(), + sizeRange: z.number().or(z.array(z.number())).nullish(), + pivotGrid: zPivotChartGridConfig.nullish(), + annotation: zAnnotationConfig.nullish(), + regressionLine: zRegressionLine.nullish(), + + dimensionLinkage: zDimensionLinkage.nullish(), + + brush: zBrushConfig.nullish(), + animation: zScatterAnimation.nullish(), +}) +``` + +关联 API：[zAnnotationConfig](schemas.md#zannotationconfig)、[zBackgroundColor](schemas.md#zbackgroundcolor)、[zBrushConfig](schemas.md#zbrushconfig)、[zColor](schemas.md#zcolor)、[zCrosshairLine](schemas.md#zcrosshairline)、[zDimensionLinkage](schemas.md#zdimensionlinkage)、[zLabel](schemas.md#zlabel)、[zLegend](schemas.md#zlegend)、[zPivotChartGridConfig](schemas.md#zpivotchartgridconfig)、[zRegressionLine](schemas.md#zregressionline)、[zScatterAnimation](schemas.md#zscatteranimation)、[zTooltip](schemas.md#ztooltip)、[zXLinearAxis](schemas.md#zxlinearaxis)、[zYLinearAxis](schemas.md#zylinearaxis) + +## zSelector + +源码：[packages/vseed/src/types/dataSelector/selector.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/dataSelector/selector.ts) + +包导出：`zSelector` + +```typescript +const zSelector = z.union([ + z.string(), + z.number(), + zFieldSelector, + zMeasureSelector, + zDimensionSelector, + zPartialSelector, +]) +``` + +关联 API：[zDimensionSelector](schemas.md#zdimensionselector)、[zFieldSelector](schemas.md#zfieldselector)、[zMeasureSelector](schemas.md#zmeasureselector)、[zPartialSelector](schemas.md#zpartialselector) + +## zSelectors + +源码：[packages/vseed/src/types/dataSelector/selector.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/dataSelector/selector.ts) + +包导出：`zSelectors` + +```typescript +const zSelectors = z.array(zSelector) +``` + +关联 API：[zSelector](schemas.md#zselector) + +## zSort + +源码：[packages/vseed/src/types/properties/analysis/sort.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/analysis/sort.ts) + +包导出：`zSort` + +```typescript +const zSort = z.object({ + order: z.enum(['asc', 'desc']).default('asc'), + orderBy: z.string().nullish(), + customOrder: z.array(z.any()).nullish(), +}) +``` + +## zSortLegend + +源码：[packages/vseed/src/types/properties/analysis/sortLegend.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/analysis/sortLegend.ts) + +包导出：`zSortLegend` + +```typescript +const zSortLegend = z.object({ + order: z.enum(['asc', 'desc']).default('asc'), + orderBy: z.string().nullish(), + customOrder: z.array(z.any()).nullish(), +}) +``` + +## zStackCornerRadius + +源码：[packages/vseed/src/types/properties/config/stackCornerRadius/stackCornerRadius.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/stackCornerRadius/stackCornerRadius.ts) + +包导出：`zStackCornerRadius` + +```typescript +const zStackCornerRadius = z.boolean() +``` + +## zSunburst + +源码：[packages/vseed/src/types/chartType/sunburst/zSunburst.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/chartType/sunburst/zSunburst.ts) + +包导出：`zSunburst` + +```typescript +const zSunburst = z.object({ + chartType: z.literal('sunburst'), + dataset: zDataset.nullish(), + dimensions: zDimensions.nullish(), + measures: zMeasures.nullish(), + page: zPage.nullish(), + + backgroundColor: zBackgroundColor.nullish(), + color: zColor.nullish(), + label: zLabel.nullish(), + tooltip: zTooltip.nullish(), + theme: zTheme.nullish(), + locale: zLocale.nullish(), +}) +``` + +关联 API：[zBackgroundColor](schemas.md#zbackgroundcolor)、[zColor](schemas.md#zcolor)、[zDataset](schemas.md#zdataset)、[zDimensions](schemas.md#zdimensions)、[zLabel](schemas.md#zlabel)、[zLocale](schemas.md#zlocale)、[zMeasures](schemas.md#zmeasures)、[zPage](schemas.md#zpage)、[zTheme](schemas.md#ztheme)、[zTooltip](schemas.md#ztooltip) + +## zSunburstConfig + +源码：[packages/vseed/src/types/properties/config/sunburst.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/sunburst.ts) + +包导出：`zSunburstConfig` + +```typescript +const zSunburstConfig = z.object({ + backgroundColor: zBackgroundColor.nullish(), + label: zLabel.nullish(), + color: zColor.nullish(), + tooltip: zTooltip.nullish(), + legend: zLegend.nullish(), + pivotGrid: zPivotChartGridConfig.nullish(), +}) +``` + +关联 API：[zBackgroundColor](schemas.md#zbackgroundcolor)、[zColor](schemas.md#zcolor)、[zLabel](schemas.md#zlabel)、[zLegend](schemas.md#zlegend)、[zPivotChartGridConfig](schemas.md#zpivotchartgridconfig)、[zTooltip](schemas.md#ztooltip) + +## zTable + +源码：[packages/vseed/src/types/chartType/table/zTable.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/chartType/table/zTable.ts) + +包导出：`zTable` + +```typescript +const zTable = z.object({ + chartType: z.literal('table'), + dataset: zDataset.nullish(), + dimensions: zDimensions.nullish(), + measures: zMeasureTree.nullish(), + page: zPage.nullish(), + + backgroundColor: zBackgroundColor.nullish(), + borderColor: z.string().nullish(), + bodyFontSize: z.number().nullish(), + bodyFontColor: z.string().nullish(), + bodyBackgroundColor: z.string().nullish(), + hoverBodyBackgroundColor: z.string().nullish(), + hoverBodyInlineBackgroundColor: z.string().nullish(), + headerFontSize: z.number().nullish(), + headerFontColor: z.string().nullish(), + headerBackgroundColor: z.string().nullish(), + hoverHeaderBackgroundColor: z.string().nullish(), + hoverHeaderInlineBackgroundColor: z.string().nullish(), + selectedBorderColor: z.string().nullish(), + selectedBackgroundColor: z.string().nullish(), + bodyCellStyle: z.array(zBodyCellStyle).or(zBodyCellStyle).nullish(), + + totals: zTotalType.nullish(), + + theme: zTheme.nullish(), + locale: zLocale.nullish(), +}) +``` + +关联 API：[zBackgroundColor](schemas.md#zbackgroundcolor)、[zBodyCellStyle](schemas.md#zbodycellstyle)、[zDataset](schemas.md#zdataset)、[zDimensions](schemas.md#zdimensions)、[zLocale](schemas.md#zlocale)、[zMeasureTree](schemas.md#zmeasuretree)、[zPage](schemas.md#zpage)、[zTheme](schemas.md#ztheme)、[zTotalType](schemas.md#ztotaltype) + +## zTableConfig + +源码：[packages/vseed/src/types/properties/config/table.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/table.ts) + +包导出：`zTableConfig` + +```typescript +const zTableConfig = z.object({ + backgroundColor: zBackgroundColor.nullish(), + + // Border + borderColor: z.string().nullish(), + + // Body + bodyFontSize: z.number().nullish(), + bodyFontFamily: z.string().nullish(), + bodyFontColor: z.string().nullish(), + bodyBackgroundColor: z.string().nullish(), + // Body interaction + hoverBodyBackgroundColor: z.string().nullish(), + hoverBodyInlineBackgroundColor: z.string().nullish(), + + // Header + headerFontSize: z.number().nullish(), + headerFontFamily: z.string().nullish(), + headerFontColor: z.string().nullish(), + headerBackgroundColor: z.string().nullish(), + // Header interaction + hoverHeaderBackgroundColor: z.string().nullish(), + hoverHeaderInlineBackgroundColor: z.string().nullish(), + + // Interaction + selectedBorderColor: z.string().nullish(), + selectedBackgroundColor: z.string().nullish(), + + // progressbar + barHeight: z.string().nullish(), + barMarkInBar: z.boolean().nullish(), + barMarkWidth: z.number().nullish(), + barPadding: z.array(z.union([z.number(), z.string()])).nullish(), + barRightToLeft: z.boolean().nullish(), + barAxisColor: z.string().nullish(), + + // backgroundColorScale + backgroundColorScale: z + .object({ + minColor: z.string().optional(), + maxColor: z.string().optional(), + }) + .nullish(), +}) +``` + +关联 API：[zBackgroundColor](schemas.md#zbackgroundcolor) + +## zTableDynamicFilter + +源码：[packages/vseed/src/types/dataSelector/selector.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/dataSelector/selector.ts) + +包导出：`zTableDynamicFilter` + +```typescript +const zTableDynamicFilter = z.object({ + type: z.literal('row-with-field'), + description: z.string().optional(), + code: z.string(), + fallback: z.union([zSelector, zSelectors]).optional(), + result: z + .object({ + success: z.boolean(), + data: z.array(zCellSelector).optional(), + }) + .optional(), +}) +``` + +关联 API：[zCellSelector](schemas.md#zcellselector)、[zSelector](schemas.md#zselector)、[zSelectors](schemas.md#zselectors) + +## zTheme + +源码：[packages/vseed/src/types/properties/theme/theme.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/theme/theme.ts) + +包导出：`zTheme` + +```typescript +const zTheme = z.string() +``` + +## zTimeFormat + +源码：[packages/vseed/src/types/properties/format/timeFormat.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/format/timeFormat.ts) + +包导出：`zTimeFormat` + +```typescript +const zTimeFormat = z + .object({ + type: z.enum(['year', 'quarter', 'month', 'week', 'day', 'hour', 'minute', 'second']), + }) + .optional() +``` + +## zTokenThemeDefinition + +源码：[packages/vseed/src/theme/tokenThemeSchema.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/theme/tokenThemeSchema.ts) + +包导出：`zTokenThemeDefinition` + +```typescript +/** Serializable theme tokens shared by renderers and document schemas. */ +const zTokenThemeDefinition = z.object({ + baseTheme: z.enum(['light', 'dark']), + fontFamily: z.string().optional(), + tableHeaderFontSize: z.number().optional(), + tableBodyFontSize: z.number().optional(), + labelFontSize: z.number().optional(), + tooltipFontSize: z.number().optional(), + axisFontSize: z.number().optional(), + legendFontSize: z.number().optional(), + playerFontSize: z.number().optional(), + axisLabelFontSize: z.number().optional(), + axisLabelFontWeight: z.number().optional(), + axisTitleFontSize: z.number().optional(), + axisTitleFontWeight: z.number().optional(), + legendLabelFontSize: z.number().optional(), + legendLabelFontWeight: z.number().optional(), + tooltipValueFontWeight: z.number().optional(), + dataLabelFontSize: z.number().optional(), + dataLabelFontWeight: z.number().optional(), + annotationLabelFontSize: z.number().optional(), + annotationLabelFontWeight: z.number().optional(), + colorScheme: z.tuple([z.string().min(1), z.string().min(1)]).rest(z.string().min(1)), + linearColorScheme: z.tuple([z.string().min(1), z.string().min(1)]), + textPrimary: z.string(), + textSecondary: z.string(), + borderColor: z.string(), + surfaceColor: z.string().optional(), + surfaceBackgroundColor: z.string().optional(), + accentColor: z.string().optional(), + positiveColor: z.string().optional(), + negativeColor: z.string().optional(), + tooltipBackgroundColor: z.string(), + tooltipBorderColor: z.string().optional(), + axisLabelColor: z.string().optional(), + axisTitleColor: z.string().optional(), + axisGridColor: z.string().optional(), + axisLineColor: z.string().optional(), + labelColor: z.string().optional(), + labelStroke: z.string().optional(), + legendLabelColor: z.string().optional(), + legendPagerIconColor: z.string().optional(), + legendPagerIconDisableColor: z.string().optional(), + playerRailColor: z.string().optional(), + playerSliderHandleColor: z.string().optional(), + playerSliderHandleBorderColor: z.string().optional(), + tableBorderColor: z.string().optional(), + tableBodyFontColor: z.string().optional(), + tableHeaderFontColor: z.string().optional(), + tableHeaderBackgroundColor: z.string().optional(), + tableHoverBodyBackgroundColor: z.string().optional(), + tableHoverBodyInlineBackgroundColor: z.string().optional(), + tableHoverHeaderBackgroundColor: z.string().optional(), + tableHoverHeaderInlineBackgroundColor: z.string().optional(), + tableSelectedBorderColor: z.string().optional(), + tableSelectedBackgroundColor: z.string().optional(), + annotationLineColor: z.string().optional(), + annotationLineStyle: z.enum(['solid', 'dashed', 'dotted']).optional(), + annotationLineDash: z.array(z.number()).optional(), + annotationTextColor: z.string().optional(), + annotationTextBackgroundColor: z.string().optional(), + annotationTextBackgroundBorderRadius: z.number().optional(), + annotationTextBackgroundBorderColor: z.string().optional(), + annotationTextBackgroundBorderWidth: z.number().optional(), + annotationTextBackgroundPadding: z.number().optional(), + annotationTextBackgroundOpacity: z.number().optional(), + annotationAreaColor: z.string().optional(), + annotationAreaColorOpacity: z.number().optional(), +}) +``` + +## zTooltip + +源码：[packages/vseed/src/types/properties/config/tooltip/tooltip.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/tooltip/tooltip.ts) + +包导出：`zTooltip` + +```typescript +const zTooltip = z.object({ + enable: z.boolean().default(true).nullish(), + borderColor: z.string().nullish(), + borderWidth: z.number().nullish(), + borderRadius: z.number().nullish(), + padding: z.number().or(z.array(z.number()).length(4)).nullish(), + backgroundColor: z.string().nullish(), + lineHeight: z.number().nullish(), + fontSize: z.number().nullish(), + lineSpace: z.number().nullish(), + keyColor: z.string().nullish(), + valueColor: z.string().nullish(), + valueFontWeight: z.number().nullish(), + titleColor: z.string().nullish(), +}) +``` + +## zTotalType + +源码：[packages/vseed/src/types/properties/aggregation/zAggregation.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/aggregation/zAggregation.ts) + +包导出：`zTotalType` + +```typescript +const zTotalType = z.enum(['sum', 'avg', 'max', 'min', 'count']) +``` + +## zTreeMap + +源码：[packages/vseed/src/types/chartType/treeMap/zTreeMap.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/chartType/treeMap/zTreeMap.ts) + +包导出：`zTreeMap` + +```typescript +const zTreeMap = z.object({ + chartType: z.literal('treeMap'), + dataset: zDataset.nullish(), + dimensions: zDimensions.nullish(), + measures: zMeasures.nullish(), + page: zPage.nullish(), + + backgroundColor: zBackgroundColor.nullish(), + color: zColor.nullish(), + label: zLabel.nullish(), + tooltip: zTooltip.nullish(), + theme: zTheme.nullish(), + locale: zLocale.nullish(), +}) +``` + +关联 API：[zBackgroundColor](schemas.md#zbackgroundcolor)、[zColor](schemas.md#zcolor)、[zDataset](schemas.md#zdataset)、[zDimensions](schemas.md#zdimensions)、[zLabel](schemas.md#zlabel)、[zLocale](schemas.md#zlocale)、[zMeasures](schemas.md#zmeasures)、[zPage](schemas.md#zpage)、[zTheme](schemas.md#ztheme)、[zTooltip](schemas.md#ztooltip) + +## zTreeMapConfig + +源码：[packages/vseed/src/types/properties/config/treeMap.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/treeMap.ts) + +包导出：`zTreeMapConfig` + +```typescript +const zTreeMapConfig = z.object({ + backgroundColor: zBackgroundColor.nullish(), + label: zLabel.nullish(), + color: zColor.nullish(), + tooltip: zTooltip.nullish(), + legend: zLegend.nullish(), + pivotGrid: zPivotChartGridConfig.nullish(), +}) +``` + +关联 API：[zBackgroundColor](schemas.md#zbackgroundcolor)、[zColor](schemas.md#zcolor)、[zLabel](schemas.md#zlabel)、[zLegend](schemas.md#zlegend)、[zPivotChartGridConfig](schemas.md#zpivotchartgridconfig)、[zTooltip](schemas.md#ztooltip) + +## zUnfoldInfo + +源码：[packages/vseed/src/types/properties/datasetReshapeInfo/zDatasetReshapeInfo.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/datasetReshapeInfo/zDatasetReshapeInfo.ts) + +包导出：`zUnfoldInfo` + +```typescript +const zUnfoldInfo = z.object({ + encodingX: z.string(), + encodingY: z.string(), + encodingColor: z.string(), + encodingColorId: z.string(), + encodingDetail: z.string(), + encodingAngle: z.string(), + encodingPlayer: z.string(), + encodingHierarchy: z.string(), + encodingSource: z.string().optional(), + encodingTarget: z.string().optional(), + colorItems: z.array(z.string()), + colorIdMap: z.record(z.string(), z.object({ id: z.string(), alias: z.string() })), +}) +``` + +## zValueDynamicFilter + +源码：[packages/vseed/src/types/dataSelector/selector.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/dataSelector/selector.ts) + +包导出：`zValueDynamicFilter` + +```typescript +const zValueDynamicFilter = z.object({ + type: z.literal('value'), + description: z.string().optional(), + code: z.string(), + fallback: z.union([z.string(), z.number()]).optional(), + result: z + .object({ + success: z.boolean(), + data: z.union([z.number(), z.string()]).optional(), + }) + .optional(), +}) +``` + +## zWhiskersConfig + +源码：[packages/vseed/src/types/properties/config/whiskers/index.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/whiskers/index.ts) + +包导出：`zWhiskersConfig` + +```typescript +const zWhiskersConfig = z.number().or(z.array(z.number())).default(1.5) +``` + +## zXBandAxis + +源码：[packages/vseed/src/types/properties/config/axes/zBandAxis.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/axes/zBandAxis.ts) + +包导出：`zXBandAxis` + +```typescript +const zXBandAxis = z.object({ + visible: z.boolean().default(true).nullish(), + + labelAutoHide: z.boolean().default(true).nullish(), + labelAutoHideGap: z.number().default(0).nullish(), + labelAutoRotate: z.boolean().default(true).nullish(), + labelAutoRotateAngleRange: z.array(z.number()).default([0, -45, -90]).nullish(), + labelAutoLimit: z.boolean().default(true).nullish(), + labelAutoLimitLength: z.number().default(100).nullish(), + label: z + .object({ + visible: z.boolean().default(true).nullish(), + labelColor: z.string().default('#797B85').nullish(), + labelFontSize: z.number().default(12).nullish(), + labelFontWeight: z.number().default(400).nullish(), + labelAngle: z.number().default(0).nullish(), + }) + .nullish(), + line: z + .object({ + visible: z.boolean().default(true).nullish(), + lineColor: z.string().default('rgba(54, 65, 89, 0.30)').nullish(), + lineWidth: z.number().default(1).nullish(), + }) + .nullish(), + tick: z + .object({ + visible: z.boolean().default(true).nullish(), + tickInside: z.boolean().default(false).nullish(), + tickColor: z.string().default('rgba(54, 65, 89, 0.30)').nullish(), + tickSize: z.number().default(4).nullish(), + }) + .nullish(), + title: z + .object({ + visible: z.boolean().default(false).nullish(), + titleText: z.string().default('').nullish(), + titleColor: z.string().default('#646A73').nullish(), + titleFontSize: z.number().default(12).nullish(), + titleFontWeight: z.number().default(400).nullish(), + }) + .nullish(), + grid: z + .object({ + visible: z.boolean().default(false).nullish(), + gridColor: z.string().default('rgba(54, 65, 89, 0.15)').nullish(), + gridWidth: z.number().default(0.5).nullish(), + gridLineDash: z.array(z.number()).nullish(), + }) + .nullish(), + + /** + * @description X轴动画配置 + */ + animation: z + .object({ + /** + * @description 动画时长 + */ + duration: z.number().nullish(), + /** + * @description 动画 easing 函数 + */ + easing: z.string().nullish(), + }) + .nullish(), +}) +``` + +## zXLinearAxis + +源码：[packages/vseed/src/types/properties/config/axes/zLinearAxis.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/axes/zLinearAxis.ts) + +包导出：`zXLinearAxis` + +```typescript +const zXLinearAxis = z.object({ + visible: z.boolean().default(true).nullish(), + + min: z.number().nullish(), + max: z.number().or(z.boolean()).nullish(), + nice: z.boolean().default(true).nullish(), + zero: z.boolean().default(true).nullish(), + log: z.boolean().default(false).nullish(), + logBase: z.number().default(10).nullish(), + inverse: z.boolean().default(false).nullish(), + numFormat: zNumFormat.nullish(), + label: z + .object({ + visible: z.boolean().default(true).nullish(), + labelColor: z.string().default('#797B85').nullish(), + labelFontSize: z.number().default(12).nullish(), + labelFontWeight: z.number().default(400).nullish(), + labelAngle: z.number().default(0).nullish(), + }) + .nullish(), + line: z + .object({ + visible: z.boolean().default(true).nullish(), + lineColor: z.string().default('rgba(54, 65, 89, 0.30)').nullish(), + lineWidth: z.number().default(1).nullish(), + }) + .nullish(), + tick: z + .object({ + visible: z.boolean().default(true).nullish(), + tickInside: z.boolean().default(false).nullish(), + tickColor: z.string().default('rgba(54, 65, 89, 0.30)').nullish(), + tickSize: z.number().default(4).nullish(), + }) + .nullish(), + title: z + .object({ + visible: z.boolean().default(false).nullish(), + titleText: z.string().default('').nullish(), + titleColor: z.string().default('#646A73').nullish(), + titleFontSize: z.number().default(12).nullish(), + titleFontWeight: z.number().default(400).nullish(), + }) + .nullish(), + grid: z + .object({ + visible: z.boolean().default(false).nullish(), + gridColor: z.string().default('rgba(54, 65, 89, 0.15)').nullish(), + gridWidth: z.number().default(0.5).nullish(), + gridLineDash: z.array(z.number()).nullish(), + }) + .nullish(), + + /** + * @description X轴动画配置 + */ + animation: z + .object({ + /** + * @description 动画时长 + */ + duration: z.number().nullish(), + /** + * @description 动画 easing 函数 + */ + easing: z.string().nullish(), + }) + .nullish(), +}) +``` + +关联 API：[zNumFormat](schemas.md#znumformat) + +## zYBandAxis + +源码：[packages/vseed/src/types/properties/config/axes/zBandAxis.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/axes/zBandAxis.ts) + +包导出：`zYBandAxis` + +```typescript +const zYBandAxis = zXBandAxis +``` + +关联 API：[zXBandAxis](schemas.md#zxbandaxis) + +## zYLinearAxis + +源码：[packages/vseed/src/types/properties/config/axes/zLinearAxis.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/axes/zLinearAxis.ts) + +包导出：`zYLinearAxis` + +```typescript +const zYLinearAxis = zXLinearAxis +``` + +关联 API：[zXLinearAxis](schemas.md#zxlinearaxis) diff --git a/skills/light-dashboard/references/api/vseed/theme.md b/skills/light-dashboard/references/api/vseed/theme.md new file mode 100644 index 0000000000..52d6fa7602 --- /dev/null +++ b/skills/light-dashboard/references/api/vseed/theme.md @@ -0,0 +1,127 @@ +# 主题 + +[API 索引](./index.md) + +- [lightTheme](theme.md#lighttheme) +- [darkTheme](theme.md#darktheme) +- [createTokenThemeConfig](theme.md#createtokenthemeconfig) +- [registerTokenTheme](theme.md#registertokentheme) +- [RegisterTokenThemeOptions](theme.md#registertokenthemeoptions) +- [registerTokenThemes](theme.md#registertokenthemes) +- [TokenThemeBase](theme.md#tokenthemebase) +- [TokenThemeDefinition](theme.md#tokenthemedefinition) +- [TokenThemeRegistry](theme.md#tokenthemeregistry) + +外部依赖类型使用源码中的导入名称： + +```typescript +import { z } from 'zod' +``` + +## lightTheme + +源码：[packages/vseed/src/theme/light/light.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/theme/light/light.ts) + +包导出：`lightTheme` + +```typescript +const lightTheme: () => CustomThemeConfig +``` + +关联 API：[CustomThemeConfig](types.md#customthemeconfig) + +## darkTheme + +源码：[packages/vseed/src/theme/dark/dark.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/theme/dark/dark.ts) + +包导出：`darkTheme` + +```typescript +const darkTheme: () => CustomThemeConfig +``` + +关联 API：[CustomThemeConfig](types.md#customthemeconfig) + +## createTokenThemeConfig + +源码：[packages/vseed/src/theme/tokenTheme.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/theme/tokenTheme.ts) + +包导出：`createTokenThemeConfig` + +```typescript +const createTokenThemeConfig: (tokens: TokenThemeDefinition) => CustomThemeConfig +``` + +关联 API：[CustomThemeConfig](types.md#customthemeconfig)、[TokenThemeDefinition](theme.md#tokenthemedefinition) + +## registerTokenTheme + +源码：[packages/vseed/src/theme/tokenTheme.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/theme/tokenTheme.ts) + +包导出：`registerTokenTheme` + +```typescript +const registerTokenTheme: (themeName: string, tokens: TokenThemeDefinition, options?: RegisterTokenThemeOptions) => void +``` + +关联 API：[RegisterTokenThemeOptions](theme.md#registertokenthemeoptions)、[TokenThemeDefinition](theme.md#tokenthemedefinition) + +## RegisterTokenThemeOptions + +源码：[packages/vseed/src/theme/tokenTheme.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/theme/tokenTheme.ts) + +包导出：`RegisterTokenThemeOptions` + +```typescript +export type RegisterTokenThemeOptions = { + ensureRegisterAll?: boolean +} +``` + +## registerTokenThemes + +源码：[packages/vseed/src/theme/tokenTheme.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/theme/tokenTheme.ts) + +包导出：`registerTokenThemes` + +```typescript +const registerTokenThemes: (themes: TokenThemeRegistry, options?: RegisterTokenThemeOptions) => void +``` + +关联 API：[RegisterTokenThemeOptions](theme.md#registertokenthemeoptions)、[TokenThemeRegistry](theme.md#tokenthemeregistry) + +## TokenThemeBase + +源码：[packages/vseed/src/theme/tokenTheme.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/theme/tokenTheme.ts) + +包导出：`TokenThemeBase` + +```typescript +export type TokenThemeBase = TokenThemeDefinition['baseTheme'] +``` + +关联 API：[TokenThemeDefinition](theme.md#tokenthemedefinition) + +## TokenThemeDefinition + +源码：[packages/vseed/src/theme/tokenThemeSchema.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/theme/tokenThemeSchema.ts) + +包导出：`TokenThemeDefinition` + +```typescript +export type TokenThemeDefinition = z.infer +``` + +关联 API：[zTokenThemeDefinition](schemas.md#ztokenthemedefinition) + +## TokenThemeRegistry + +源码：[packages/vseed/src/theme/tokenTheme.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/theme/tokenTheme.ts) + +包导出：`TokenThemeRegistry` + +```typescript +export type TokenThemeRegistry = Record +``` + +关联 API：[TokenThemeDefinition](theme.md#tokenthemedefinition) diff --git a/skills/light-dashboard/references/api/vseed/types.md b/skills/light-dashboard/references/api/vseed/types.md new file mode 100644 index 0000000000..ca9e10bf40 --- /dev/null +++ b/skills/light-dashboard/references/api/vseed/types.md @@ -0,0 +1,7352 @@ +# DSL 与公共类型 + +[API 索引](./index.md) + +- [VSeed](types.md#vseed) +- [VSeedDSL](types.md#vseeddsl) +- [AdvancedVSeed](types.md#advancedvseed) +- [AnimationEffectConfig](types.md#animationeffectconfig) +- [Annotation](types.md#annotation) +- [AnnotationArea](types.md#annotationarea) +- [AnnotationAreaConfig](types.md#annotationareaconfig) +- [AnnotationDifferenceLine](types.md#annotationdifferenceline) +- [AnnotationDifferenceLineConfig](types.md#annotationdifferencelineconfig) +- [AnnotationHorizontalLine](types.md#annotationhorizontalline) +- [AnnotationHorizontalLineConfig](types.md#annotationhorizontallineconfig) +- [AnnotationPoint](types.md#annotationpoint) +- [AnnotationPointConfig](types.md#annotationpointconfig) +- [AnnotationVerticalLine](types.md#annotationverticalline) +- [AnnotationVerticalLineConfig](types.md#annotationverticallineconfig) +- [AreaConfig](types.md#areaconfig) +- [AreaDimension](types.md#areadimension) +- [AreaMeasure](types.md#areameasure) +- [AreaPercentConfig](types.md#areapercentconfig) +- [AreaPercentDimension](types.md#areapercentdimension) +- [AreaSelector](types.md#areaselector) +- [AreaSelectors](types.md#areaselectors) +- [AreaStyle](types.md#areastyle) +- [BackgroundColor](types.md#backgroundcolor) +- [BarConfig](types.md#barconfig) +- [BarDimension](types.md#bardimension) +- [BarGapInGroup](types.md#bargapingroup) +- [BarLikeAnimation](types.md#barlikeanimation) +- [BarLikeAnimationLoop](types.md#barlikeanimationloop) +- [BarLikeAnimationParams](types.md#barlikeanimationparams) +- [BarLikeAppearAnimation](types.md#barlikeappearanimation) +- [BarLikeLoopAnimation](types.md#barlikeloopanimation) +- [BarLikeLoopEffect](types.md#barlikeloopeffect) +- [BarLikeUpdateAnimation](types.md#barlikeupdateanimation) +- [BarMaxWidth](types.md#barmaxwidth) +- [BarMeasure](types.md#barmeasure) +- [BarParallelConfig](types.md#barparallelconfig) +- [BarParallelDimension](types.md#barparalleldimension) +- [BarParallelMeasure](types.md#barparallelmeasure) +- [BarPercentConfig](types.md#barpercentconfig) +- [BarPercentDimension](types.md#barpercentdimension) +- [BarPercentMeasure](types.md#barpercentmeasure) +- [BarStyle](types.md#barstyle) +- [BaseDimension](types.md#basedimension) +- [BaseMeasure](types.md#basemeasure) +- [BodyCellStyle](types.md#bodycellstyle) +- [BoxGapInGroup](types.md#boxgapingroup) +- [BoxMaxWidth](types.md#boxmaxwidth) +- [BoxPlotDimension](types.md#boxplotdimension) +- [BoxPlotMeasure](types.md#boxplotmeasure) +- [BoxPlotStyle](types.md#boxplotstyle) +- [Brush](types.md#brush) +- [BrushConfig](types.md#brushconfig) +- [CenterText](types.md#centertext) +- [CenterTextConfig](types.md#centertextconfig) +- [ChartDynamicFilter](types.md#chartdynamicfilter) +- [ChartType](types.md#charttype) +- [CirclePackingConfig](types.md#circlepackingconfig) +- [CodeExecutionOptions](types.md#codeexecutionoptions) +- [CodeExecutionResult](types.md#codeexecutionresult) +- [Color](types.md#color) +- [ColorLegend](types.md#colorlegend) +- [ColumnConfig](types.md#columnconfig) +- [ColumnDimension](types.md#columndimension) +- [ColumnMeasure](types.md#columnmeasure) +- [ColumnParallelConfig](types.md#columnparallelconfig) +- [ColumnParallelDimension](types.md#columnparalleldimension) +- [ColumnParallelMeasure](types.md#columnparallelmeasure) +- [ColumnPercentConfig](types.md#columnpercentconfig) +- [ColumnPercentDimension](types.md#columnpercentdimension) +- [ColumnPercentMeasure](types.md#columnpercentmeasure) +- [Config](types.md#config) +- [CornerRadius](types.md#cornerradius) +- [CrosshairLine](types.md#crosshairline) +- [CrosshairRect](types.md#crosshairrect) +- [CustomTheme](types.md#customtheme) +- [CustomThemeConfig](types.md#customthemeconfig) +- [Dark](types.md#dark) +- [Dataset](types.md#dataset) +- [DatasetReshapeInfo](types.md#datasetreshapeinfo) +- [Datum](types.md#datum) +- [DifferenceAnchor](types.md#differenceanchor) +- [DifferenceSelector](types.md#differenceselector) +- [Dimension](types.md#dimension) +- [DimensionEncoding](types.md#dimensionencoding) +- [DimensionEncodingEnum](types.md#dimensionencodingenum) +- [DimensionGroup](types.md#dimensiongroup) +- [DimensionLinkage](types.md#dimensionlinkage) +- [Dimensions](types.md#dimensions) +- [DimensionSelector](types.md#dimensionselector) +- [DimensionTree](types.md#dimensiontree) +- [DonutConfig](types.md#donutconfig) +- [DonutDimension](types.md#donutdimension) +- [DonutMeasure](types.md#donutmeasure) +- [DualAxisConfig](types.md#dualaxisconfig) +- [DualAxisDimension](types.md#dualaxisdimension) +- [DualAxisMeasure](types.md#dualaxismeasure) +- [DualAxisOptions](types.md#dualaxisoptions) +- [DynamicFilterExecutionResult](types.md#dynamicfilterexecutionresult) +- [EcdfRegressionLine](types.md#ecdfregressionline) +- [Encoding](types.md#encoding) +- [EncodingEnum](types.md#encodingenum) +- [FieldSelector](types.md#fieldselector) +- [FoldInfo](types.md#foldinfo) +- [Formatter](types.md#formatter) +- [FunnelConfig](types.md#funnelconfig) +- [FunnelDimension](types.md#funneldimension) +- [FunnelMeasure](types.md#funnelmeasure) +- [FunnelTransformConfig](types.md#funneltransformconfig) +- [HeatmapConfig](types.md#heatmapconfig) +- [HeatmapDimension](types.md#heatmapdimension) +- [HeatmapMeasure](types.md#heatmapmeasure) +- [HierarchyDimension](types.md#hierarchydimension) +- [HierarchyMeasure](types.md#hierarchymeasure) +- [HierarchySankeyConfig](types.md#hierarchysankeyconfig) +- [HistogramDimension](types.md#histogramdimension) +- [HistogramMeasure](types.md#histogrammeasure) +- [KdeRegressionLine](types.md#kderegressionline) +- [Label](types.md#label) +- [Legend](types.md#legend) +- [Light](types.md#light) +- [LineAreaAnimation](types.md#lineareaanimation) +- [LineAreaAnimationLoop](types.md#lineareaanimationloop) +- [LineAreaAnimationParams](types.md#lineareaanimationparams) +- [LineAreaAppearAnimation](types.md#lineareaappearanimation) +- [LineAreaLoopAnimation](types.md#linearealoopanimation) +- [LineAreaLoopEffect](types.md#linearealoopeffect) +- [LineAreaUpdateAnimation](types.md#lineareaupdateanimation) +- [LinearRegressionLine](types.md#linearregressionline) +- [LineConfig](types.md#lineconfig) +- [LineDimension](types.md#linedimension) +- [LineMeasure](types.md#linemeasure) +- [LineStyle](types.md#linestyle) +- [LogisticRegressionLine](types.md#logisticregressionline) +- [LowessRegressionLine](types.md#lowessregressionline) +- [MarkStyle](types.md#markstyle) +- [Measure](types.md#measure) +- [MeasureEncoding](types.md#measureencoding) +- [MeasureEncodingEnum](types.md#measureencodingenum) +- [MeasureGroup](types.md#measuregroup) +- [Measures](types.md#measures) +- [MeasureSelector](types.md#measureselector) +- [MeasureTree](types.md#measuretree) +- [NoEffectAtmosphereConfig](types.md#noeffectatmosphereconfig) +- [NumFormat](types.md#numformat) +- [OutlierStyle](types.md#outlierstyle) +- [Page](types.md#page) +- [PartialDatumRes](types.md#partialdatumres) +- [PartialDatumSelector](types.md#partialdatumselector) +- [PieConfig](types.md#pieconfig) +- [PieDimension](types.md#piedimension) +- [PieGeometry](types.md#piegeometry) +- [PieLabel](types.md#pielabel) +- [PieLikeAnimation](types.md#pielikeanimation) +- [PieLikeAnimationLoop](types.md#pielikeanimationloop) +- [PieLikeAnimationParams](types.md#pielikeanimationparams) +- [PieLikeAppearAnimation](types.md#pielikeappearanimation) +- [PieLikeLoopAnimation](types.md#pielikeloopanimation) +- [PieLikeLoopEffect](types.md#pielikeloopeffect) +- [PieLikeUpdateAnimation](types.md#pielikeupdateanimation) +- [PieMeasure](types.md#piemeasure) +- [PieStyle](types.md#piestyle) +- [PivotChartGridConfig](types.md#pivotchartgridconfig) +- [PivotTableConfig](types.md#pivottableconfig) +- [PivotTableTotals](types.md#pivottabletotals) +- [Player](types.md#player) +- [PointAtmosphereConfig](types.md#pointatmosphereconfig) +- [PointAtmosphereEffect](types.md#pointatmosphereeffect) +- [PointStyle](types.md#pointstyle) +- [PolynomialRegressionLine](types.md#polynomialregressionline) +- [RaceBarDimension](types.md#racebardimension) +- [RaceBarMeasure](types.md#racebarmeasure) +- [RaceBarParallelDimension](types.md#racebarparalleldimension) +- [RaceBarPercentDimension](types.md#racebarpercentdimension) +- [RaceColumnDimension](types.md#racecolumndimension) +- [RaceColumnParallelDimension](types.md#racecolumnparalleldimension) +- [RaceColumnPercentDimension](types.md#racecolumnpercentdimension) +- [RaceDonutDimension](types.md#racedonutdimension) +- [RaceDonutMeasure](types.md#racedonutmeasure) +- [RacePieDimension](types.md#racepiedimension) +- [RacePieMeasure](types.md#racepiemeasure) +- [RaceScatterDimension](types.md#racescatterdimension) +- [RadarAnimation](types.md#radaranimation) +- [RadarAnimationLoop](types.md#radaranimationloop) +- [RadarAnimationParams](types.md#radaranimationparams) +- [RadarAppearAnimation](types.md#radarappearanimation) +- [RadarConfig](types.md#radarconfig) +- [RadarDimension](types.md#radardimension) +- [RadarMeasure](types.md#radarmeasure) +- [RadarUpdateAnimation](types.md#radarupdateanimation) +- [RegionPadding](types.md#regionpadding) +- [RegressionLineConfig](types.md#regressionlineconfig) +- [RoseConfig](types.md#roseconfig) +- [RoseDimension](types.md#rosedimension) +- [RoseMeasure](types.md#rosemeasure) +- [RoseParallelConfig](types.md#roseparallelconfig) +- [RoseParallelDimension](types.md#roseparalleldimension) +- [RoseParallelMeasure](types.md#roseparallelmeasure) +- [RowOrColumnTotalConfig](types.md#roworcolumntotalconfig) +- [RowWithFieldRes](types.md#rowwithfieldres) +- [SankeyConfig](types.md#sankeyconfig) +- [SankeyDimension](types.md#sankeydimension) +- [SankeyMeasure](types.md#sankeymeasure) +- [ScatterAnimation](types.md#scatteranimation) +- [ScatterAnimationLoop](types.md#scatteranimationloop) +- [ScatterAnimationParams](types.md#scatteranimationparams) +- [ScatterAppearAnimation](types.md#scatterappearanimation) +- [ScatterConfig](types.md#scatterconfig) +- [ScatterDimension](types.md#scatterdimension) +- [ScatterLoopAnimation](types.md#scatterloopanimation) +- [ScatterLoopEffect](types.md#scatterloopeffect) +- [ScatterMeasure](types.md#scattermeasure) +- [ScatterUpdateAnimation](types.md#scatterupdateanimation) +- [Selector](types.md#selector) +- [Selectors](types.md#selectors) +- [Sort](types.md#sort) +- [SortLegend](types.md#sortlegend) +- [StackCornerRadius](types.md#stackcornerradius) +- [SunburstConfig](types.md#sunburstconfig) +- [TableConfig](types.md#tableconfig) +- [TableDimension](types.md#tabledimension) +- [TableDynamicFilter](types.md#tabledynamicfilter) +- [TableMeasure](types.md#tablemeasure) +- [Theme](types.md#theme) +- [TimeFormat](types.md#timeformat) +- [TimeGranularity](types.md#timegranularity) +- [Tooltip](types.md#tooltip) +- [TooltipConfig](types.md#tooltipconfig) +- [TotalType](types.md#totaltype) +- [TreeMapConfig](types.md#treemapconfig) +- [UnfoldInfo](types.md#unfoldinfo) +- [ValueDynamicFilter](types.md#valuedynamicfilter) +- [ValueSelector](types.md#valueselector) +- [WhiskersConfig](types.md#whiskersconfig) +- [XBandAxis](types.md#xbandaxis) +- [XLinearAxis](types.md#xlinearaxis) +- [YBandAxis](types.md#ybandaxis) +- [YLinearAxis](types.md#ylinearaxis) + +外部依赖类型使用源码中的导入名称： + +```typescript +import type { z } from 'zod' +import { z } from 'zod' +``` + +## VSeed + +源码：[packages/vseed/src/types/vseed.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/vseed.ts) + +包导出：`VSeed` + +```typescript +export type VSeed = + | Table + | PivotTable + | Line + | Column + | ColumnParallel + | ColumnPercent + | Bar + | BarParallel + | BarPercent + | Area + | AreaPercent + | Scatter + | DualAxis + | Rose + | RoseParallel + | Pie + | Donut + | Radar + | RaceBar + | RaceColumn + | RaceScatter + | RaceLine + | RacePie + | RaceDonut + | TreeMap + | Sunburst + | CirclePacking + | HierarchySankey + | Sankey + | Funnel + | Heatmap + | BoxPlot + | Histogram +``` + +关联 API：[Area](chart-types.md#area)、[AreaPercent](chart-types.md#areapercent)、[Bar](chart-types.md#bar)、[BarParallel](chart-types.md#barparallel)、[BarPercent](chart-types.md#barpercent)、[BoxPlot](chart-types.md#boxplot)、[CirclePacking](chart-types.md#circlepacking)、[Column](chart-types.md#column)、[ColumnParallel](chart-types.md#columnparallel)、[ColumnPercent](chart-types.md#columnpercent)、[Donut](chart-types.md#donut)、[DualAxis](chart-types.md#dualaxis)、[Funnel](chart-types.md#funnel)、[Heatmap](chart-types.md#heatmap)、[HierarchySankey](chart-types.md#hierarchysankey)、[Histogram](chart-types.md#histogram)、[Line](chart-types.md#line)、[Pie](chart-types.md#pie)、[PivotTable](chart-types.md#pivottable)、[RaceBar](chart-types.md#racebar)、[RaceColumn](chart-types.md#racecolumn)、[RaceDonut](chart-types.md#racedonut)、[RaceLine](chart-types.md#raceline)、[RacePie](chart-types.md#racepie)、[RaceScatter](chart-types.md#racescatter)、[Radar](chart-types.md#radar)、[Rose](chart-types.md#rose)、[RoseParallel](chart-types.md#roseparallel)、[Sankey](chart-types.md#sankey)、[Scatter](chart-types.md#scatter)、[Sunburst](chart-types.md#sunburst)、[Table](chart-types.md#table)、[TreeMap](chart-types.md#treemap) + +## VSeedDSL + +源码：[packages/vseed/src/types/vseed.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/vseed.ts) + +包导出：`VSeedDSL` + +```typescript +export type VSeedDSL = VSeed +``` + +关联 API：[VSeed](types.md#vseed) + +## AdvancedVSeed + +源码：[packages/vseed/src/types/advancedVSeed.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/advancedVSeed.ts) + +包导出：`AdvancedVSeed` + +```typescript +export type AdvancedVSeed = { + chartType: z.infer + dataset: z.infer + datasetReshapeInfo: z.infer + pivotAllDatasetReshapeInfo: z.infer + dimensions?: z.infer + measures?: z.infer + reshapeMeasures?: z.infer[] + reshapeDimensions?: z.infer + measureTree?: z.infer + dimensionTree?: z.infer + encoding: z.infer + page?: z.infer + config: Config + analysis: z.infer + theme: z.infer + markStyle: z.infer + cellStyle: z.infer + customTheme: z.infer + annotation: z.infer + locale: z.infer + regressionLine: z.infer + totals?: PivotTableTotals +} +``` + +关联 API：[Config](types.md#config)、[PivotTableTotals](types.md#pivottabletotals)、[zAnalysis](schemas.md#zanalysis)、[zAnnotation](schemas.md#zannotation)、[zCellStyle](schemas.md#zcellstyle)、[zChartType](schemas.md#zcharttype)、[zCustomThemeConfig](schemas.md#zcustomthemeconfig)、[zDataset](schemas.md#zdataset)、[zDatasetReshapeInfo](schemas.md#zdatasetreshapeinfo)、[zDimensions](schemas.md#zdimensions)、[zDimensionTree](schemas.md#zdimensiontree)、[zEncoding](schemas.md#zencoding)、[zLocale](schemas.md#zlocale)、[zMarkStyle](schemas.md#zmarkstyle)、[zMeasures](schemas.md#zmeasures)、[zMeasureTree](schemas.md#zmeasuretree)、[zPage](schemas.md#zpage)、[zRegressionLine](schemas.md#zregressionline)、[zTheme](schemas.md#ztheme) + +## AnimationEffectConfig + +源码：[packages/vseed/src/types/properties/config/animation/animationEffect.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/animation/animationEffect.ts) + +包导出：`AnimationEffectConfig` + +```typescript +export interface AnimationEffectConfig { + /** @description 是否启用当前动画阶段 */ + enable?: boolean + /** @description 当前阶段使用的动画效果列表；更新阶段省略时使用默认补间 */ + effects?: string[] + /** @description 动画缓动函数 */ + ease?: string + /** @description 动画时长，单位为毫秒；数据更新阶段默认 1000 毫秒，0 表示立即完成 */ + duration?: number + /** @description 动画高亮或氛围颜色 */ + color?: string +} +``` + +## Annotation + +源码：[packages/vseed/src/types/properties/annotation/annotation.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/annotation/annotation.ts) + +包导出：`Annotation` + +```typescript +export type Annotation = z.infer +``` + +关联 API：[zAnnotation](schemas.md#zannotation) + +## AnnotationArea + +源码：[packages/vseed/src/types/properties/annotation/annotationArea.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/annotation/annotationArea.ts) + +包导出：`AnnotationArea` + +```typescript +export type AnnotationArea = { + /** + * @description 依赖选择的数据, 进行数据标记. + */ + selector?: AreaSelector | AreaSelectors + /** + * @description 标注的文本 + * @default '' + * @example '标注文本' + */ + text?: string | string[] + /** + * @description 文本位置 + * @example 'top' + */ + textPosition?: 'top' | 'topRight' | 'topLeft' | 'bottom' | 'bottomLeft' | 'bottomRight' | 'left' | 'right' + /** + * @description 文本颜色 + * @example 'red' + */ + textColor?: string + /** + * @description 文本字体大小 + * @example 12 + */ + textFontSize?: number + /** + * @description 文本字体重量 + * @example 400 + */ + textFontWeight?: number + /** + * @description 文本对齐方式, 一般情况下, 设置为right, 文本显示在标注区域中间, 确保显示在图表的可见区域 + * 建议设置为'center', 这样可以确保文本在标注区域的中间 + * right: 文本在标注区域的左侧, 文本的右侧边缘对齐标注区域 + * left: 文本在标注区域的右侧, 文本的左侧边缘对齐标注区域 + * center: 文本在标注区域的中心, 文本的中心对齐标注区域 + * @example 'center' 文本在标注区域的中间 + */ + textAlign?: 'left' | 'right' | 'center' + /** + * @description 文本垂直对齐方式, 一般情况下, 设置为top, 文本显示在标注区域底部, 确保显示在图表的可见区域 + * 建议设置为'top', 这样可以确保文本完整的显示在图表的可见区域 + * top: 文本在标注区域的底部, 文本的顶部边缘对齐标注区域 + * middle: 文本在标注区域的中心, 文本的中心对齐标注区域 + * bottom: 文本在标注区域的顶部, 文本的底部边缘对齐标注区域 + * @example 'top' 文本在标注区域的底部 + */ + textBaseline?: 'top' | 'middle' | 'bottom' + /** + * @description 背景可见 + * @example true + */ + textBackgroundVisible?: boolean + /** + * @description 背景颜色 + * @example 'red' + */ + textBackgroundColor?: string + /** + * 背景边框颜色 + * @description 背景边框颜色 + * @example 'red' + */ + textBackgroundBorderColor?: string + /** + * @description 背景边框宽度 + * @example 2 + */ + textBackgroundBorderWidth?: number + /** + * 背景边框圆角 + * @description 背景边框圆角 + * @example 4 + */ + textBackgroundBorderRadius?: number + /** + * @description 背景内边距 + * @example 4 + */ + textBackgroundPadding?: number + /** + * @description 标注区域区域颜色 + * @example 'red' + */ + areaColor?: string + /** + * @description 标注区域区域颜色透明度 + * @example 0.5 + */ + areaColorOpacity?: number + /** + * @description 标注区域区域边框颜色 + * @example 'red' + */ + areaBorderColor?: string + /** + * @description 标注区域区域边框宽度 + * @example 2 + */ + areaBorderWidth?: number + /** + * @description 标注区域区域边框圆角 + * @example 4 + */ + areaBorderRadius?: number + /** + * @description 标注区域区域边框的线型 + * @example [2, 2] + */ + areaLineDash?: number[] + /** + * @description 标注区域区域的边距 + * @example 0 + */ + outerPadding?: number +} +``` + +关联 API：[AreaSelector](types.md#areaselector)、[AreaSelectors](types.md#areaselectors) + +## AnnotationAreaConfig + +源码：[packages/vseed/src/types/properties/config/annotation/annotation.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/annotation/annotation.ts) + +包导出：`AnnotationAreaConfig` + +```typescript +export type AnnotationAreaConfig = Pick< + AnnotationArea, + | 'areaBorderColor' + | 'areaBorderRadius' + | 'areaBorderWidth' + | 'areaColor' + | 'areaColorOpacity' + | 'areaLineDash' + | 'outerPadding' + | 'textBackgroundBorderColor' + | 'textBackgroundBorderRadius' + | 'textBackgroundBorderWidth' + | 'textBackgroundColor' + | 'textBackgroundPadding' + | 'textBackgroundVisible' + | 'textColor' + | 'textFontSize' + | 'textFontWeight' +> & { + /** + * 文本背景透明度 + */ + textBackgroundOpacity?: number | null +} +``` + +关联 API：[AnnotationArea](types.md#annotationarea) + +## AnnotationDifferenceLine + +源码：[packages/vseed/src/types/properties/annotation/annotationDifferenceLine.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/annotation/annotationDifferenceLine.ts) + +包导出：`AnnotationDifferenceLine` + +```typescript +/** + * @description 差异标注线配置，用于绑定两个数据锚点并展示它们的绝对差值或百分比差值。 + */ +export type AnnotationDifferenceLine = { + /** + * @description 差异标注线的起始锚点。 + */ + start: DifferenceAnchor + /** + * @description 差异标注线的终止锚点。 + */ + end: DifferenceAnchor + /** + * @description 差异值类型。 + * - absolute: 显示绝对差值，计算方式为 end - start + * - percent: 显示百分比差值，计算方式为 (end - start) / start + */ + differenceType?: 'absolute' | 'percent' + /** + * @description 文本字体大小。 + */ + textFontSize?: number + /** + * @description 文本字体粗细。 + */ + textFontWeight?: number | string + /** + * @description 文本颜色。 + */ + textColor?: string + /** + * @description 文本背景色。 + */ + textBackgroundColor?: string + /** + * @description 线条颜色。 + */ + lineColor?: string + /** + * @description 线条样式。 + */ + lineStyle?: 'solid' | 'dashed' | 'dotted' +} +``` + +关联 API：[DifferenceAnchor](types.md#differenceanchor) + +## AnnotationDifferenceLineConfig + +源码：[packages/vseed/src/types/properties/config/annotation/annotation.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/annotation/annotation.ts) + +包导出：`AnnotationDifferenceLineConfig` + +```typescript +export type AnnotationDifferenceLineConfig = Pick< + AnnotationDifferenceLine, + 'lineColor' | 'lineStyle' | 'textBackgroundColor' | 'textColor' | 'textFontSize' | 'textFontWeight' +> & { + /** + * 文本背景边框颜色 + */ + textBackgroundBorderColor?: string | null + /** + * 文本背景边框圆角 + */ + textBackgroundBorderRadius?: number | null + /** + * 文本背景边框宽度 + */ + textBackgroundBorderWidth?: number | null + /** + * 文本背景内边距 + */ + textBackgroundPadding?: number | null + /** + * 线条虚线配置 + */ + lineDash?: number[] | null + /** + * 文本背景透明度 + */ + textBackgroundOpacity?: number | null +} +``` + +关联 API：[AnnotationDifferenceLine](types.md#annotationdifferenceline) + +## AnnotationHorizontalLine + +源码：[packages/vseed/src/types/properties/annotation/annotationHorizontalLine.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/annotation/annotationHorizontalLine.ts) + +包导出：`AnnotationHorizontalLine` + +```typescript +/** + * @description 水平标注线, 根据用户设置的 yValue, 从左向右绘制一条末尾有箭头的线, 标签默认在标注线的终点正下方 + */ +export type AnnotationHorizontalLine = { + /** + * @description 固定的y值, 用于标注水平线, 类目轴在y方向, 则可输入维值, 数值轴在y方向, 则可输入具体的数值 + */ + yValue?: (number | string) | (number | string)[] + /** + * 动态筛选器（AI生成代码执行） + * @description + * 通过 AI 生成的 JavaScript 代码动态计算标注线的值 + * 适用于需要根据数据动态确定标注线位置，如平均值、最大值、分位数，业务线等 + * + * 仅支持浏览器环境（需要 Web Worker） + * + * @type {ValueDynamicFilter} + */ + dynamicFilter?: ValueDynamicFilter + /** + * @description 标注的文本 + * @default '' + * @example '标注文本' + */ + text?: string | string[] + /** + * 文本位置 + * @description 标注线的标签位置（标签相对线的相对位置）。 + * @example 'outsideEnd' + */ + textPosition?: 'outsideStart' | 'outsideEnd' | 'outsideMiddle' | 'insideStart' | 'insideMiddle' | 'insideEnd' + /** + * @description 文本颜色 + * @example 'red' + */ + textColor?: string + /** + * @description 文本字体大小 + * @example 12 + */ + textFontSize?: number + /** + * @description 文本字体重量 + * @example 400 + */ + textFontWeight?: number + /** + * @description 文本对齐方式, 一般情况下, 无需设置 + * 建议设置为'right', 这样可以确保文本在标注线的左侧 + * right: 文本在参考线的左侧, 文本的右侧边缘对齐(水平)标注线的终点 + * left: 文本在参考线的右侧, 文本的左侧边缘对齐(水平)标注线的终点 + * center: 文本在参考线的中心, 文本的中心对齐(水平)标注线的终点 + * @example 'right' + */ + textAlign?: 'left' | 'right' | 'center' + /** + * @description 文本垂直对齐方式, 一般情况下, 无需设置 + * 建议设置为'top', 这样可以确保文本完整的显示在图表的可见区域 + * top: 文本在参考线的底部, 文本的顶部边缘对齐(水平)标注线 + * middle: 文本在参考线的中心, 文本的中心对齐(水平)标注线 + * bottom: 文本在参考线的顶部, 文本的底部边缘对齐(水平)标注线 + * @example 'top' + */ + textBaseline?: 'top' | 'middle' | 'bottom' + /** + * @description 背景可见 + * @example true + */ + textBackgroundVisible?: boolean + /** + * @description 背景颜色 + * @example 'red' + */ + textBackgroundColor?: string + /** + * @description 背景边框颜色 + * @example 'red' + */ + textBackgroundBorderColor?: string + /** + * 背景边框宽度 + * @description 背景边框宽度 + * @example 2 + */ + textBackgroundBorderWidth?: number + /** + * @description 背景边框圆角 + * @example 4 + */ + textBackgroundBorderRadius?: number + /** + * @description 背景内边距 + * @example 4 + */ + textBackgroundPadding?: number + /** + * 线可见 + * @description 线可见 + * @example true + */ + lineVisible?: boolean + /** + * @description 线颜色 + * @example 'red' + */ + lineColor?: string + /** + * @description 线宽度 + * @example 2 + */ + lineWidth?: number + /** + * @description 线样式 + * @example 'solid' + */ + lineStyle?: 'solid' | 'dashed' | 'dotted' + /** + * 是否开启将主线分隔成两段的功能 + */ + splitLine?: + | boolean + | { + /** + * 大于标注值的部分，对应的主色 + */ + positiveColor?: string + /** + * 小于标注值的部分，对应的主色 + */ + negativeColor?: string + } +} +``` + +关联 API：[ValueDynamicFilter](types.md#valuedynamicfilter) + +## AnnotationHorizontalLineConfig + +源码：[packages/vseed/src/types/properties/config/annotation/annotation.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/annotation/annotation.ts) + +包导出：`AnnotationHorizontalLineConfig` + +```typescript +export type AnnotationHorizontalLineConfig = Pick< + AnnotationHorizontalLine, + | 'textFontSize' + | 'lineColor' + | 'lineStyle' + | 'lineVisible' + | 'lineWidth' + | 'textColor' + | 'textBackgroundBorderColor' + | 'textBackgroundBorderRadius' + | 'textBackgroundBorderWidth' + | 'textBackgroundColor' + | 'textBackgroundPadding' + | 'textBackgroundVisible' + | 'textFontWeight' +> & { + /** + * 线条虚线配置 + */ + lineDash?: number[] | null + /** + * 文本背景透明度 + */ + textBackgroundOpacity?: number | null + /** + * 起点图标是否显示 + */ + startSymbolVisible?: boolean | null + /** + * 起点图标的类型，支持如下枚举值： + * 'circle' + * | 'cross' + * | 'diamond' + * | 'square' + * | 'arrow' + * | 'arrowLeft' + * | 'arrowRight' + * | 'arrow2Left' + * | 'arrow2Right' + * | 'wedge' + * | 'thinTriangle' + * | 'triangle' + * | 'triangleUp' + * | 'triangleDown' + * | 'triangleRight' + * | 'triangleLeft' + * | 'stroke' + * | 'star' + * | 'wye' + * | 'rect' + * | 'rectRound' + * | 'roundLine' + */ + startSymbolType?: string | null + /** + * 起点图标的大小 + */ + startSymbolSize?: number | null + /** + * 终点图标是否显示 + */ + endSymbolVisible?: boolean | null + /** + * 终点图标的类型，支持如下枚举值： + * 'circle' + * | 'cross' + * | 'diamond' + * | 'square' + * | 'arrow' + * | 'arrowLeft' + * | 'arrowRight' + * | 'arrow2Left' + * | 'arrow2Right' + * | 'wedge' + * | 'thinTriangle' + * | 'triangle' + * | 'triangleUp' + * | 'triangleDown' + * | 'triangleRight' + * | 'triangleLeft' + * | 'stroke' + * | 'star' + * | 'wye' + * | 'rect' + * | 'rectRound' + * | 'roundLine' + */ + endSymbolType?: string | null + /** + * 终点图标的大小 + */ + endSymbolSize?: number | null +} +``` + +关联 API：[AnnotationHorizontalLine](types.md#annotationhorizontalline) + +## AnnotationPoint + +源码：[packages/vseed/src/types/properties/annotation/annotationPoint.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/annotation/annotationPoint.ts) + +包导出：`AnnotationPoint` + +```typescript +/** + * @description 标注点, 根据用户设置的selector, 在数据点的左下方, 显示一个带有背景的标签. + */ +export type AnnotationPoint = { + /** + * @description 标注点的选择器, 用于选择数据点. + */ + selector?: Selector | Selectors + /** + * @description 指定标注点所属的指标 id。在多 measure 场景下，可与 selector 组合以唯一定位目标指标对应的标注点。 + */ + measureId?: string + /** + * 动态筛选器（AI生成代码执行） + * @description + * 通过 AI 生成的 JavaScript 代码实现复杂数据筛选逻辑 + * 适用于 Top N、统计分析、复杂条件等静态 selector 难以表达的场景 + * + * 核心能力: + * - 支持任意复杂的数据筛选条件 + * - 使用 内置工具函数 进行数据操作 + * - 在浏览器环境中安全执行（Web Worker 沙箱） + * + * 环境要求: 仅支持浏览器环境，Node.js 环境将使用 fallback + * + * 注意: selector 和 dynamicFilter 不能同时使用，dynamicFilter 优先级更高 + * + * @type {ChartDynamicFilter} + */ + dynamicFilter?: ChartDynamicFilter + /** + * @description 标注的文本 + * @default '' + * @example '标注文本' + */ + text?: string | string[] + /** + * @description 文本颜色 + * @example 'red' + */ + textColor?: string + /** + * @description 文本字体大小 + * @example 12 + */ + textFontSize?: number + /** + * @description 文本字体重量 + * @example 400 + */ + textFontWeight?: number + /** + * @description 文本对齐方式, 一般情况下, 设置为right, 文本显示在标注点左侧, 确保显示在图表的可见区域 + * 建议设置为'right', 这样可以确保文本在标注点的左侧 + * right: 文本在标注点的左侧, 文本的右侧边缘对齐标注点 + * left: 文本在标注点的右侧, 文本的左侧边缘对齐标注点 + * center: 文本在标注点的中心, 文本的中心对齐标注点 + * @example 'right' 文本在标注点的左侧 + */ + textAlign?: 'left' | 'right' | 'center' + /** + * @description 文本垂直对齐方式, 一般情况下, 设置为top, 文本显示在标注点底部, 确保显示在图表的可见区域 + * 建议设置为'top', 这样可以确保文本完整的显示在图表的可见区域 + * top: 文本在标注点的底部, 文本的顶部边缘对齐标注点 + * middle: 文本在标注点的中心, 文本的中心对齐标注点 + * bottom: 文本在标注点的顶部, 文本的底部边缘对齐标注点 + * @example 'top' 文本在标注点的底部 + */ + textBaseline?: 'top' | 'middle' | 'bottom' + /** + * @description 背景可见 + * @example true + */ + textBackgroundVisible?: boolean + /** + * @description 背景颜色 + * @example 'red' + */ + textBackgroundColor?: string + /** + * @description 背景边框颜色 + * @example 'red' + */ + textBackgroundBorderColor?: string + /** + * @description 背景边框宽度 + * @example 2 + */ + textBackgroundBorderWidth?: number + /** + * @description 背景边框圆角 + * @example 4 + */ + textBackgroundBorderRadius?: number + /** + * @description 背景内边距 + * @example 4 + */ + textBackgroundPadding?: number + /** + * @description 标注点整体在Y方向的偏移像素距离, 当标注点在图表上方(数值较大时)时, 建议设置为正值, 标注点在图表下方(数值较小时)时, 建议设置为负值. + * 负值则整体向上偏移, 例如设置为-10, 则整个标注点组件包括文本、文本背景, 一起向上偏移10像素 + * 正值则整体向下偏移, 例如设置为10, 则整个标注点组件包括文本、文本背景, 一起向下偏移10像素 + * @example offsetY: 5, 标注点整体向下偏移5像素 + */ + offsetY?: number + /** + * @description 标注点整体在X方向的偏移像素距离, 当标注点在图表左侧(类目轴起点)时, 建议设置为正值, 标注点在图表右侧(类目轴终点)时, 建议设置为负值. + * 负值则整体向左偏移, 例如设置为-10, 则整个标注点组件包括文本、文本背景, 一起向左偏移10像素 + * 正值则整体向右偏移, 例如设置为10, 则整个标注点组件包括文本、文本背景, 一起向右偏移10像素 + * @example offsetX: 5, 标注点整体向右偏移5像素 + */ + offsetX?: number +} +``` + +关联 API：[ChartDynamicFilter](types.md#chartdynamicfilter)、[Selector](types.md#selector)、[Selectors](types.md#selectors) + +## AnnotationPointConfig + +源码：[packages/vseed/src/types/properties/config/annotation/annotation.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/annotation/annotation.ts) + +包导出：`AnnotationPointConfig` + +```typescript +export type AnnotationPointConfig = Pick< + AnnotationPoint, + | 'textColor' + | 'textFontSize' + | 'textFontWeight' + | 'textBackgroundVisible' + | 'textBackgroundColor' + | 'textBackgroundBorderColor' + | 'textBackgroundBorderWidth' + | 'textBackgroundPadding' + | 'textBackgroundBorderRadius' + | 'offsetX' + | 'offsetY' +> & { + /** + * 文本背景透明度 + */ + textBackgroundOpacity?: number | null +} +``` + +关联 API：[AnnotationPoint](types.md#annotationpoint) + +## AnnotationVerticalLine + +源码：[packages/vseed/src/types/properties/annotation/annotationVerticalLine.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/annotation/annotationVerticalLine.ts) + +包导出：`AnnotationVerticalLine` + +```typescript +/** + * @description 垂直标注线, 根据用户设置的selector 或 xValue, 从下向上绘制一条末尾有箭头的线, 标签默认在标注线终点的正左侧 + */ +export type AnnotationVerticalLine = { + /** + * @description 固定的x值, 用于标注垂直线, 类目轴在x方向, 则可输入维值, 数值轴在x方向, 则可输入具体的数值 + */ + xValue?: (number | string) | (number | string)[] + /** + * 动态筛选器（AI生成代码执行） + * @description + * 通过 AI 生成的 JavaScript 代码动态计算标注线的值 + * 适用于需要根据数据动态确定标注线位置，如平均值、最大值、分位数，业务线等 + * + * 仅支持浏览器环境（需要 Web Worker） + * + * @type {ValueDynamicFilter} + */ + dynamicFilter?: ValueDynamicFilter + /** + * @description 标注的文本 + * @default '' + * @example '标注文本' + */ + text?: string | string[] + /** + * @description 文本位置, 标注线的标签位置（标签相对线的相对位置）。 + * @example 'outsideEnd' + */ + textPosition?: 'outsideStart' | 'outsideEnd' | 'outsideMiddle' | 'insideStart' | 'insideMiddle' | 'insideEnd' + /** + * @description 文本颜色 + * @example 'red' + */ + textColor?: string + /** + * @description 文本字体大小 + * @example 12 + */ + textFontSize?: number + /** + * @description 文本字体重量 + * @example 400 + */ + textFontWeight?: number + /** + * @description 文本对齐方式, 一般情况下, 无需设置 + * 建议设置为'right', 这样可以确保文本在标注线的左侧 + * right: 文本在参考线的左侧, 文本的右侧边缘对齐(垂直)标注线 + * left: 文本在参考线的右侧, 文本的左侧边缘对齐(垂直)标注线 + * center: 文本在参考线的中心, 文本的中心对齐(垂直)标注线 + * @example 'right' + */ + textAlign?: 'left' | 'right' | 'center' + /** + * @description 文本垂直对齐方式, 一般情况下, 无需设置 + * 建议设置为'top', 这样可以确保文本完整的显示在图表的可见区域 + * top: 文本在参考线的底部, 文本的顶部边缘对齐(垂直)标注线的终点 + * middle: 文本在参考线的中心, 文本的中心对齐(垂直)标注线的终点 + * bottom: 文本在参考线的顶部, 文本的底部边缘对齐(垂直)标注线的终点 + * @example 'top' + */ + textBaseline?: 'top' | 'middle' | 'bottom' + /** + * @description 线可见 + * @example true + */ + lineVisible?: boolean + /** + * @description 线颜色 + * @example 'red' + */ + lineColor?: string + /** + * @description 线宽度 + * @example 2 + */ + lineWidth?: number + /** + * @description 线样式 + * @example 'solid' + */ + lineStyle?: 'solid' | 'dashed' | 'dotted' + /** + * @description 背景可见 + * @example true + */ + textBackgroundVisible?: boolean + /** + * @description 背景颜色 + * @example 'red' + */ + textBackgroundColor?: string + /** + * @description 背景边框颜色 + * @example 'red' + */ + textBackgroundBorderColor?: string + /** + * @description 背景边框宽度 + * @example 2 + */ + textBackgroundBorderWidth?: number + /** + * @description 背景边框圆角 + * @example 4 + */ + textBackgroundBorderRadius?: number + /** + * @description 背景内边距 + * @example 4 + */ + textBackgroundPadding?: number +} +``` + +关联 API：[ValueDynamicFilter](types.md#valuedynamicfilter) + +## AnnotationVerticalLineConfig + +源码：[packages/vseed/src/types/properties/config/annotation/annotation.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/annotation/annotation.ts) + +包导出：`AnnotationVerticalLineConfig` + +```typescript +export type AnnotationVerticalLineConfig = AnnotationHorizontalLineConfig +``` + +关联 API：[AnnotationHorizontalLineConfig](types.md#annotationhorizontallineconfig) + +## AreaConfig + +源码：[packages/vseed/src/types/properties/config/area.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/area.ts) + +包导出：`AreaConfig` + +```typescript +export type AreaConfig = z.infer +``` + +关联 API：[zAreaConfig](schemas.md#zareaconfig) + +## AreaDimension + +源码：[packages/vseed/src/types/properties/dimensions/areaDimension.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/dimensions/areaDimension.ts) + +包导出：`AreaDimension` + +```typescript +export type AreaDimension = ColumnDimension +``` + +关联 API：[ColumnDimension](types.md#columndimension) + +## AreaMeasure + +源码：[packages/vseed/src/types/properties/measures/areaMeasure.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/measures/areaMeasure.ts) + +包导出：`AreaMeasure` + +```typescript +export type AreaMeasure = ColumnMeasure +``` + +关联 API：[ColumnMeasure](types.md#columnmeasure) + +## AreaPercentConfig + +源码：[packages/vseed/src/types/properties/config/area.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/area.ts) + +包导出：`AreaPercentConfig` + +```typescript +export type AreaPercentConfig = z.infer +``` + +关联 API：[zAreaPercentConfig](schemas.md#zareapercentconfig) + +## AreaPercentDimension + +源码：[packages/vseed/src/types/properties/dimensions/areaDimension.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/dimensions/areaDimension.ts) + +包导出：`AreaPercentDimension` + +```typescript +export type AreaPercentDimension = ColumnDimension +``` + +关联 API：[ColumnDimension](types.md#columndimension) + +## AreaSelector + +源码：[packages/vseed/src/types/dataSelector/selector.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/dataSelector/selector.ts) + +包导出：`AreaSelector` + +```typescript +export type AreaSelector = MeasureSelector | DimensionSelector +``` + +关联 API：[DimensionSelector](types.md#dimensionselector)、[MeasureSelector](types.md#measureselector) + +## AreaSelectors + +源码：[packages/vseed/src/types/dataSelector/selector.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/dataSelector/selector.ts) + +包导出：`AreaSelectors` + +```typescript +export type AreaSelectors = Array +``` + +关联 API：[AreaSelector](types.md#areaselector) + +## AreaStyle + +源码：[packages/vseed/src/types/properties/markStyle/areaStyle.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/markStyle/areaStyle.ts) + +包导出：`AreaStyle` + +```typescript +export type AreaStyle = { + /** + * 数据选择器 + * @description + * 若配置selector, 提供数值 selector, 局部数据 selector, 条件维度 selector, 条件指标 selector 共四类数据匹配能力 + * 若未配置selector, 则样式全局生效. + * @type {Selector | Selectors} + * @example 数值选择器 + * selector = "tool" + * selector = ["tool", "book"] + * selector = 100 + * selector = [100, 200] + * @example 局部数据选择器 + * selector = { profit: 100 } + * selector = [{ profit: 100 }, { profit: 200 }] + * @example 条件维度选择器 + * selector = { + * field: 'category', + * operator: 'in', + * value: 'tool' + * } + * selector = { + * field: 'category', + * operator: 'not in', + * value: 'book' + * } + * @example 条件指标选择器 + * selector = { + * field: 'profit', + * operator: '>=', + * value: 100 + * } + * selector = { + * field: 'profit', + * operator: 'between' + * value: [100, 300] + * } + */ + selector?: Selector | Selectors + /** + * 动态筛选器（AI生成代码执行） + * @description + * 通过 AI 生成的 JavaScript 代码实现复杂数据筛选逻辑 + * 适用于 Top N、统计分析、复杂条件等静态 selector 难以表达的场景 + * + * 核心能力: + * - 支持任意复杂的数据筛选条件 + * - 使用 内置工具函数 进行数据操作 + * - 在浏览器环境中安全执行（Web Worker 沙箱） + * + * 环境要求: 仅支持浏览器环境，Node.js 环境将使用 fallback + * + * 注意: selector 和 dynamicFilter 不能同时使用，dynamicFilter 优先级更高 + * + * @type {ChartDynamicFilter} + */ + dynamicFilter?: ChartDynamicFilter + /** + * 面积图元是否可见 + * @description 面积图元是否可见 + */ + areaVisible?: boolean + /** + * 面积图元的颜色 + * @description 面积图元的颜色 + */ + areaColor?: string + /** + * 面积线性渐变 + * @description 开启后从下方透明渐变到顶部的当前颜色；默认关闭。顶部透明度由 areaColorOpacity 控制。 + * @example true + */ + areaGradient?: boolean + /** + * 面积图元的颜色透明度 + * @description 面积图元的颜色透明度 + */ + areaColorOpacity?: number +} +``` + +关联 API：[ChartDynamicFilter](types.md#chartdynamicfilter)、[Selector](types.md#selector)、[Selectors](types.md#selectors) + +## BackgroundColor + +源码：[packages/vseed/src/types/properties/config/backgroundColor/backgroundColor.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/backgroundColor/backgroundColor.ts) + +包导出：`BackgroundColor` + +```typescript +/** + * 图表的背景颜色 + * @default transparent 默认为透明背景 + * @description 背景颜色可以是颜色字符串, 例如'red', 'blue', 也可以是hex, rgb或rgba'#ff0000', 'rgba(255,0,0,0.5)' + */ +export type BackgroundColor = string | undefined +``` + +## BarConfig + +源码：[packages/vseed/src/types/properties/config/bar.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/bar.ts) + +包导出：`BarConfig` + +```typescript +export type BarConfig = z.infer +``` + +关联 API：[zBarConfig](schemas.md#zbarconfig) + +## BarDimension + +源码：[packages/vseed/src/types/properties/dimensions/barDimension.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/dimensions/barDimension.ts) + +包导出：`BarDimension` + +```typescript +export type BarDimension = BaseDimension & { + /** + * @description 维度映射的通道 + * - yAxis: 支持将多个维度映射到y轴 + * - color: 支持将多个维度映射到颜色通道 + * - detail: 支持将多个维度映射到详情通道 + * - tooltip: 支持将多个维度映射到提示通道 + * - label: 支持将多个维度映射到标签通道 + * - row: 支持将多个维度映射到行通道 + * - column: 支持将多个维度映射到列通道 + */ + encoding?: 'yAxis' | 'color' | 'detail' | 'tooltip' | 'label' | 'row' | 'column' +} +``` + +关联 API：[BaseDimension](types.md#basedimension) + +## BarGapInGroup + +源码：[packages/vseed/src/types/properties/config/barWidth/index.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/barWidth/index.ts) + +包导出：`BarGapInGroup` + +```typescript +export type BarGapInGroup = z.infer +``` + +关联 API：[zBarGapInGroup](schemas.md#zbargapingroup) + +## BarLikeAnimation + +源码：[packages/vseed/src/types/properties/config/animation/animation.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/animation/animation.ts) + +包导出：`BarLikeAnimation` + +```typescript +export interface BarLikeAnimation { + /** @description 是否启用条形/柱形图动画 */ + enable?: boolean + /** @description 条形/柱形图动画参数 */ + params?: BarLikeAnimationParams +} +``` + +关联 API：[BarLikeAnimationParams](types.md#barlikeanimationparams) + +## BarLikeAnimationLoop + +源码：[packages/vseed/src/types/properties/config/animation/animationLoop.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/animation/animationLoop.ts) + +包导出：`BarLikeAnimationLoop` + +```typescript +export interface BarLikeAnimationLoop { + /** @description 是否启用循环动画 */ + enable?: boolean + /** @description 循环动画间隔，单位为毫秒 */ + interval?: number + /** @description 条形/柱形图循环动画配置 */ + loop?: BarLikeLoopAnimation + /** @description 条形/柱形图氛围动画配置 */ + atmosphere?: PointAtmosphereConfig +} +``` + +关联 API：[BarLikeLoopAnimation](types.md#barlikeloopanimation)、[PointAtmosphereConfig](types.md#pointatmosphereconfig) + +## BarLikeAnimationParams + +源码：[packages/vseed/src/types/properties/config/animation/animation.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/animation/animation.ts) + +包导出：`BarLikeAnimationParams` + +```typescript +export interface BarLikeAnimationParams { + /** @description 条形/柱形图入场动画配置 */ + appear?: BarLikeAppearAnimation + /** @description 条形/柱形图数据进入、更新、退出的共同动画配置 */ + update?: BarLikeUpdateAnimation + /** @description 条形/柱形图循环动画配置 */ + loop?: BarLikeAnimationLoop +} +``` + +关联 API：[BarLikeAnimationLoop](types.md#barlikeanimationloop)、[BarLikeAppearAnimation](types.md#barlikeappearanimation)、[BarLikeUpdateAnimation](types.md#barlikeupdateanimation) + +## BarLikeAppearAnimation + +源码：[packages/vseed/src/types/properties/config/animation/animationEffect.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/animation/animationEffect.ts) + +包导出：`BarLikeAppearAnimation` + +```typescript +export interface BarLikeAppearAnimation extends AnimationEffectConfig { + /** @description 条形/柱形图入场效果，支持生长动画 */ + effects?: 'growth'[] +} +``` + +关联 API：[AnimationEffectConfig](types.md#animationeffectconfig) + +## BarLikeLoopAnimation + +源码：[packages/vseed/src/types/properties/config/animation/animationEffect.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/animation/animationEffect.ts) + +包导出：`BarLikeLoopAnimation` + +```typescript +export interface BarLikeLoopAnimation extends AnimationEffectConfig { + /** @description 条形/柱形图循环效果 */ + effects?: BarLikeLoopEffect[] +} +``` + +关联 API：[AnimationEffectConfig](types.md#animationeffectconfig)、[BarLikeLoopEffect](types.md#barlikeloopeffect) + +## BarLikeLoopEffect + +源码：[packages/vseed/src/types/properties/config/animation/animationEffect.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/animation/animationEffect.ts) + +包导出：`BarLikeLoopEffect` + +```typescript +export type BarLikeLoopEffect = 'highLight' | 'growth' | 'moveIn' | 'none' +``` + +## BarLikeUpdateAnimation + +源码：[packages/vseed/src/types/properties/config/animation/animationEffect.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/animation/animationEffect.ts) + +包导出：`BarLikeUpdateAnimation` + +```typescript +export interface BarLikeUpdateAnimation extends AnimationEffectConfig { + /** @description 条形/柱形图更新效果，支持生长和移入动画 */ + effects?: ('growth' | 'moveIn')[] +} +``` + +关联 API：[AnimationEffectConfig](types.md#animationeffectconfig) + +## BarMaxWidth + +源码：[packages/vseed/src/types/properties/config/barWidth/index.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/barWidth/index.ts) + +包导出：`BarMaxWidth` + +```typescript +export type BarMaxWidth = z.infer +``` + +关联 API：[zBarMaxWidth](schemas.md#zbarmaxwidth) + +## BarMeasure + +源码：[packages/vseed/src/types/properties/measures/barMeasure.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/measures/barMeasure.ts) + +包导出：`BarMeasure` + +```typescript +export type BarMeasure = BaseMeasure & { + /** + * @description 指标映射的通道 + * - xAxis: 指标映射的x轴 + * - detail: 指标映射的详情 + * - color: 指标映射的颜色 + * - label: 指标映射的标签 + * - tooltip: 指标映射的提示 + */ + encoding?: 'xAxis' | 'detail' | 'color' | 'label' | 'tooltip' +} +``` + +关联 API：[BaseMeasure](types.md#basemeasure) + +## BarParallelConfig + +源码：[packages/vseed/src/types/properties/config/bar.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/bar.ts) + +包导出：`BarParallelConfig` + +```typescript +export type BarParallelConfig = z.infer +``` + +关联 API：[zBarParallelConfig](schemas.md#zbarparallelconfig) + +## BarParallelDimension + +源码：[packages/vseed/src/types/properties/dimensions/barDimension.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/dimensions/barDimension.ts) + +包导出：`BarParallelDimension` + +```typescript +export type BarParallelDimension = BarDimension +``` + +关联 API：[BarDimension](types.md#bardimension) + +## BarParallelMeasure + +源码：[packages/vseed/src/types/properties/measures/barMeasure.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/measures/barMeasure.ts) + +包导出：`BarParallelMeasure` + +```typescript +export type BarParallelMeasure = BarMeasure +``` + +关联 API：[BarMeasure](types.md#barmeasure) + +## BarPercentConfig + +源码：[packages/vseed/src/types/properties/config/bar.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/bar.ts) + +包导出：`BarPercentConfig` + +```typescript +export type BarPercentConfig = z.infer +``` + +关联 API：[zBarPercentConfig](schemas.md#zbarpercentconfig) + +## BarPercentDimension + +源码：[packages/vseed/src/types/properties/dimensions/barDimension.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/dimensions/barDimension.ts) + +包导出：`BarPercentDimension` + +```typescript +export type BarPercentDimension = BarDimension +``` + +关联 API：[BarDimension](types.md#bardimension) + +## BarPercentMeasure + +源码：[packages/vseed/src/types/properties/measures/barMeasure.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/measures/barMeasure.ts) + +包导出：`BarPercentMeasure` + +```typescript +export type BarPercentMeasure = BarMeasure +``` + +关联 API：[BarMeasure](types.md#barmeasure) + +## BarStyle + +源码：[packages/vseed/src/types/properties/markStyle/barStyle.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/markStyle/barStyle.ts) + +包导出：`BarStyle` + +```typescript +export type BarStyle = { + /** + * 数据选择器 + * @description + * 若配置selector, 提供数值 selector, 局部数据 selector, 条件维度 selector, 条件指标 selector 共四类数据匹配能力 + * 若未配置selector, 则样式全局生效. + * @type {Selector | Selectors} + * @example 数值选择器 + * selector = "tool" + * selector = ["tool", "book"] + * selector = 100 + * selector = [100, 200] + * @example 局部数据选择器 + * selector = { profit: 100 } + * selector = [{ profit: 100 }, { profit: 200 }] + * @example 条件维度选择器 + * selector = { + * field: 'category', + * operator: 'in', + * value: 'tool' + * } + * selector = { + * field: 'category', + * operator: 'not in', + * value: 'book' + * } + * @example 条件指标选择器 + * selector = { + * field: 'profit', + * operator: '>=', + * value: 100 + * } + * selector = { + * field: 'profit', + * operator: 'between' + * value: [100, 300] + * } + */ + selector?: Selector | Selectors + /** + * 动态筛选器（AI生成代码执行） + * @description + * 通过 AI 生成的 JavaScript 代码实现复杂数据筛选逻辑 + * 适用于 Top N、统计分析、复杂条件等静态 selector 难以表达的场景 + * + * 核心能力: + * - 支持任意复杂的数据筛选条件 + * - 使用 内置工具函数 进行数据操作 + * - 在浏览器环境中安全执行（Web Worker 沙箱） + * + * 环境要求: 仅支持浏览器环境，Node.js 环境将使用 fallback + * + * 注意: selector 和 dynamicFilter 不能同时使用，dynamicFilter 优先级更高 + * + * @type {ChartDynamicFilter} + */ + dynamicFilter?: ChartDynamicFilter + /** + * @description 柱图元(矩形图元)是否可见 + */ + barVisible?: boolean + /** + * @description 柱图元(矩形图元)颜色 + * @type {string} + */ + barColor?: string + /** + * 柱体线性渐变 + * @description 开启后从零值基线透明渐变到数值末端的当前颜色，自动适配正负值和横纵方向；默认关闭。 + * @example true + */ + barGradient?: boolean + /** + * @description 柱图元(矩形图元)颜色透明度 + * @type {number} + */ + barColorOpacity?: number + /** + * @description 柱图元(矩形图元)边框颜色 + * @type {string} + */ + barBorderColor?: string + /** + * @description 柱图元(矩形图元)边框宽度 + * @type {number} + */ + barBorderWidth?: number + /** + * @description 柱图元(矩形图元)边框样式 + * @type {number} + * @example solid + * @example dashed + * @example dotted + */ + barBorderStyle?: 'solid' | 'dashed' | 'dotted' + /** + * @description 柱图元(矩形图元)圆角 + * @type {number | number[]} + * @example 4 + * @example [0, 0, 10, 10] + */ + /** + * @description 柱图元(矩形图元)描边透明度 + * @type {number} + */ + barBorderOpacity?: number + /** @description 单根柱体圆角；配置后优先于堆叠外轮廓圆角，支持条件样式。 */ + barRadius?: number | number[] +} +``` + +关联 API：[ChartDynamicFilter](types.md#chartdynamicfilter)、[Selector](types.md#selector)、[Selectors](types.md#selectors) + +## BaseDimension + +源码：[packages/vseed/src/types/properties/dimensions/baseDimension.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/dimensions/baseDimension.ts) + +包导出：`BaseDimension` + +```typescript +export type BaseDimension = { + /** + * 维度对应的字段id + */ + id: string + /** + * 维度别名 + */ + alias?: string + /** + * @description 维度时间格式化配置 + */ + timeFormat?: TimeFormat +} +``` + +关联 API：[TimeFormat](types.md#timeformat) + +## BaseMeasure + +源码：[packages/vseed/src/types/properties/measures/baseMeasure.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/measures/baseMeasure.ts) + +包导出：`BaseMeasure` + +```typescript +/** + * @description 最基础的度量配置 + */ +export type BaseMeasure = { + /** + * @description 指标id, 不能重复 + */ + id: string + /** + * @description 指标别名, 允许重复, 未填写时, alias 为 id + * @default id + */ + alias?: string + /** + * @description 自动数值格式化，默认开启，优先级最高 + * 当 autoFormat=true 时，会覆盖 numFormat 的所有配置 + * 开启后，图表的数据标签、提示信息会根据指标数值和语言环境自动选择合适的格式化方式 + * 格式化规则：十进制数值，开启 compact notation，最小0位小数，最大2位小数，自动四舍五入，使用浏览器提供的 Intl.NumberFormat 实现 + * 例如: + * - locale为zh-CN: 749740.264 → 74.45万 + * - locale为en-US: 749740.264 → 744.5K + * @default true + */ + autoFormat?: boolean + /** + * @description 自定义指标的数值格式化，会自动应用于 label、tooltip + * 注意：若要使用自定义格式化，必须显式设置 autoFormat=false，否则 autoFormat 会覆盖此配置 + */ + numFormat?: NumFormat + /** + * @deprecated use numFormat instead + */ + format?: NumFormat + /** + * @description 指标映射的通道 + * - primaryYAxis: 指标映射的主y轴, 仅用于双轴图 + * - secondaryYAxis: 指标映射的次y轴, 仅用于双轴图 + * - xAxis: 指标映射的x轴, 适用于条形图、散点图 + * - yAxis: 指标映射的y轴, 适用于柱状图、折线图、面积图、散点图 + * - angle: 指标映射的角度, 适用于饼图、环形图、雷达图 + * - radius: 指标映射的半径, 适用于玫瑰图 + * - size: 指标映射的大小, 适用于漏斗图、散点图 + * - detail: 指标映射的详情, 适用于透视表、热力图 + * - column: 指标映射的列, 仅适用于表格 + * - color: 指标映射的颜色, 适用于所有图表 + * - label: 指标映射的标签, 适用于所有图表 + * - tooltip: 指标映射的提示, 适用于所有图表 + */ + encoding?: MeasureEncoding + /** + * @description 以扁平的指标配置形式, 构建树形指标组, parentId指向父级指标组的id, 用于构建指标树 + * @tip 指标树的配置存在两种形式, 方式一是直接配置带children的指标树, 方式二是配置parentId的扁平指标列表, 两种方式不能同时配置 + */ + parentId?: string +} +``` + +关联 API：[MeasureEncoding](types.md#measureencoding)、[NumFormat](types.md#numformat) + +## BodyCellStyle + +源码：[packages/vseed/src/types/properties/cellStyle/bodyCellStyle.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/cellStyle/bodyCellStyle.ts) + +包导出：`BodyCellStyle` + +```typescript +export type BodyCellStyle = { + /** + * 数据选择器 + * @description + * 若配置selector, 提供数值 selector, 局部数据 selector, 条件维度 selector, 条件指标 selector 共四类数据匹配能力 + * 若未配置selector, 则样式全局生效. + * + * 注意: selector 和 dynamicFilter 不能同时使用，dynamicFilter 优先级更高 + * + * @type {Selector | Selectors | FieldSelector} + * @example 数值选择器 + * selector = "tool" + * selector = ["tool", "book"] + * selector = 100 + * selector = [100, 200] + * @example 局部数据选择器 + * selector = { profit: 100 } + * selector = [{ profit: 100 }, { profit: 200 }] + * @example 条件维度选择器 + * selector = { + * field: 'category', + * operator: 'in', + * value: 'tool' + * } + * selector = { + * field: 'category', + * operator: 'not in', + * value: 'book' + * } + * @example 条件指标选择器 + * selector = { + * field: 'profit', + * operator: '>=', + * value: 100 + * } + * selector = { + * field: 'profit', + * operator: 'between' + * value: [100, 300] + * } + * @example 字段列筛选 + * selector = { + * field: 'category' + * } + * selector = { + * field: ['category', 'profit'] + * } + */ + selector?: Selector | Selectors | FieldSelector + /** + * 动态筛选器（代码驱动） + * @description + * 通过 AI 生成的 JavaScript 代码实现复杂数据筛选逻辑 + * 适用于 Top N、统计分析、复杂条件等静态 selector 难以表达的场景 + * + * 核心能力: + * - 支持任意复杂的数据筛选条件 + * - 使用 内置工具函数 进行数据操作 + * - 在浏览器环境中安全执行（Web Worker 沙箱） + * + * 环境要求: 仅支持浏览器环境，Node.js 环境将使用 fallback + * + * 注意: selector 和 dynamicFilter 不能同时使用，dynamicFilter 优先级更高 + * + * @type {TableDynamicFilter} + */ + dynamicFilter?: TableDynamicFilter + /** + * 单元格背景色 + */ + backgroundColor?: string + /** + * 是否开启背景色的色阶配置（color scale） + */ + enableBackgroundColorScale?: boolean + /** + * 单元格背景色scale映射，优先级高于backgroundColor + */ + backgroundColorScale?: { + /** 最小值，不配置时默认为当前数据列中的最小值 */ + minValue?: number + /** 最大值，不配置时默认为当前数据列中的最大值 */ + maxValue?: number + /** 最小值对应的颜色 */ + minColor: string + /** 最大值对应的颜色 */ + maxColor: string + } + /** + * 是否开启背景数据条条（一个条形柱来显示当前单元格的大小）功能，默认不开启 + */ + enableProgressBar?: boolean + /** + * 当前单元格直为正数时的背景数据条颜色 + */ + barPositiveColor?: string + /** + * 数值为负数时的背景数据条条颜色 + */ + barNegativeColor?: string + /** + * 进度条最小值 + * @description 未配置时自动计算列的最小值 + */ + barMin?: number + /** + * 进度条最大值 + * @description 未配置时自动计算列的最大值 + */ + barMax?: number + /** * 单元格文字颜色 + */ + textColor?: string + /** + * 单元格文字大小 + */ + textFontSize?: number + /** + * 单元格边框颜色 + */ + borderColor?: string + /** + * 单元格边框线宽 + */ + borderLineWidth?: number +} +``` + +关联 API：[FieldSelector](types.md#fieldselector)、[Selector](types.md#selector)、[Selectors](types.md#selectors)、[TableDynamicFilter](types.md#tabledynamicfilter) + +## BoxGapInGroup + +源码：[packages/vseed/src/types/properties/config/boxWidth/boxWidth.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/boxWidth/boxWidth.ts) + +包导出：`BoxGapInGroup` + +```typescript +/** + * 箱线图中同组箱子之间的间距 + */ +export type BoxGapInGroup = string | number +``` + +## BoxMaxWidth + +源码：[packages/vseed/src/types/properties/config/boxWidth/boxWidth.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/boxWidth/boxWidth.ts) + +包导出：`BoxMaxWidth` + +```typescript +/** + * 箱线图中箱子的最大宽度 + */ +export type BoxMaxWidth = string | number +``` + +## BoxPlotDimension + +源码：[packages/vseed/src/types/properties/dimensions/boxPlotDimension.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/dimensions/boxPlotDimension.ts) + +包导出：`BoxPlotDimension` + +```typescript +export type BoxPlotDimension = BaseDimension & { + /** + * @description 维度映射的通道 + * - xAxis: 支持将多个维度映射到x轴 + * - color: 支持将多个维度映射到颜色通道 + * - tooltip: 支持将多个维度映射到提示通道 + * - label: 支持将多个维度映射到标签通道 + * - row: 支持将多个维度映射到行通道 + * - column: 支持将多个维度映射到列通道 + */ + encoding?: 'xAxis' | 'color' | 'tooltip' | 'label' | 'row' | 'column' +} +``` + +关联 API：[BaseDimension](types.md#basedimension) + +## BoxPlotMeasure + +源码：[packages/vseed/src/types/properties/measures/boxPlotMeasure.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/measures/boxPlotMeasure.ts) + +包导出：`BoxPlotMeasure` + +```typescript +export type BoxPlotMeasure = BaseMeasure & { + /** + * @description 指标映射的通道 + * - value: 离散的值对应的指标，用于计算统计值展示箱线图 + * - q1: 统计值 25 分位数对应的指标映射 + * - q3: 统计值 75 分位数对应的指标映射 + * - min: 盒须最小值的指标映射 + * - max: 盒须最大值的指标映射 + * - meadian: 统计值中位数的指标映射 + * - outliers: 异常值的指标映射 + * - detail: 指标映射的详情 + * - color: 指标映射的颜色 + * - label: 指标映射的标签 + * - tooltip: 指标映射的提示 + */ + encoding?: 'value' | 'q1' | 'q3' | 'min' | 'max' | 'median' | 'outliers' | 'color' | 'label' | 'tooltip' +} +``` + +关联 API：[BaseMeasure](types.md#basemeasure) + +## BoxPlotStyle + +源码：[packages/vseed/src/types/properties/markStyle/boxPlotStyle.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/markStyle/boxPlotStyle.ts) + +包导出：`BoxPlotStyle` + +```typescript +export type BoxPlotStyle = { + /** + * 数据选择器 + * @description + * 若配置selector, 提供数值 selector, 局部数据 selector, 条件维度 selector, 条件指标 selector 共四类数据匹配能力 + * 若未配置selector, 则样式全局生效. + * @type {Selector | Selectors} + * @example 数值选择器 + * selector = "tool" + * selector = ["tool", "book"] + * selector = 100 + * selector = [100, 200] + * @example 局部数据选择器 + * selector = { profit: 100 } + * selector = [{ profit: 100 }, { profit: 200 }] + * @example 条件维度选择器 + * selector = { + * field: 'category', + * operator: 'in', + * value: 'tool' + * } + * selector = { + * field: 'category', + * operator: 'not in', + * value: 'book' + * } + * @example 条件指标选择器 + * selector = { + * field: 'profit', + * operator: '>=', + * value: 100 + * } + * selector = { + * field: 'profit', + * operator: 'between' + * value: [100, 300] + * } + */ + selector?: Selector | Selectors + /** + * @description boxPlot图元是否可见 + */ + boxVisible?: boolean + /** + * @description boxPlot图元颜色 + * @type {string} + */ + boxColor?: string + /** + * @description boxPlot图元颜色透明度 + * @type {number} + */ + boxColorOpacity?: number + /** + * @description boxPlot图元边框颜色 + * @type {string} + */ + boxBorderColor?: string + /** + * @description boxPlot图元边框宽度 + * @type {number} + */ + boxBorderWidth?: number + /** + * @description boxPlot图元边框透明度 + * @type {number} + */ + boxBorderOpacity?: number + /** + * @description 箱体的圆角大小 + */ + boxCornerRadius?: number + /** + * @description 中位数线的颜色 + */ + medianBorderColor?: string + /** + * @description 盒须线的颜色 + */ + whiskerBorderColor?: string +} +``` + +关联 API：[Selector](types.md#selector)、[Selectors](types.md#selectors) + +## Brush + +源码：[packages/vseed/src/types/properties/brush/brush.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/brush/brush.ts) + +包导出：`Brush` + +```typescript +/** + * 图表框选配置 + */ +export type Brush = { + /** + * 是否开启brush框选 + */ + enable?: boolean + /** + * brush的类型 + * @description 定义刷选框的形状和刷选方向 + * - `rect`: 矩形框选，可以在X轴和Y轴两个方向上同时进行框选 + * - `polygon`: 多边形框选，通过点击多个点绘制任意多边形进行框选 + * - `x`: X轴方向框选，只在X轴方向上进行框选，Y轴方向不限制 + * - `y`: Y轴方向框选，只在Y轴方向上进行框选，X轴方向不限制 + * @default 'rect' + */ + brushType?: 'x' | 'y' | 'rect' | 'polygon' + /** + * 框选模式，单选还是多选 + * @description 定义刷选的模式 + * - `single`: 单选模式，每次只能有一个刷选框 + * - `multiple`: 多选模式，可以同时存在多个刷选框 + * @default 'single' + */ + brushMode?: 'single' | 'multiple' + /** + * 框选结束是否清除选框 + */ + removeOnClick?: boolean + /** + * 被框选中的数据样式 + * @description 定义被刷选中的数据点的样式 + */ + inBrushStyle?: { + /** + * 不透明度 + * @description 被框选中的数据点的不透明度，取值范围 0-1 + */ + opacity?: number + /** + * 描边颜色 + */ + stroke?: string + /** + * 描边宽度 + */ + lineWidth?: number + } + /** + * 未被框选中的数据样式 + * @description 定义未被刷选中的数据点的样式 + */ + outOfBrushStyle?: { + /** + * 不透明度 + * @description 未被框选中的数据点的不透明度，取值范围 0-1 + */ + opacity?: number + /** + * 描边颜色 + */ + stroke?: string + /** + * 描边宽度 + */ + lineWidth?: number + } +} +``` + +## BrushConfig + +源码：[packages/vseed/src/types/properties/brush/zBrush.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/brush/zBrush.ts) + +包导出：`BrushConfig` + +```typescript +export type BrushConfig = z.infer +``` + +关联 API：[zBrushConfig](schemas.md#zbrushconfig) + +## CenterText + +源码：[packages/vseed/src/types/properties/config/centerText.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/centerText.ts) + +包导出：`CenterText` + +```typescript +/** 固定中心文本；主副文本默认 18/12px，超长文本按环内宽度省略，颜色跟随主题。省略 centerText 即不显示。 */ +export type CenterText = { + /** @description 主文本，不随扇区交互变化。业务计算及无数据占位文本由调用方提供。 */ + titleText?: string | number + /** @description 副文本。 */ + subTitleText?: string | number +} +``` + +## CenterTextConfig + +源码：[packages/vseed/src/types/properties/config/centerText.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/centerText.ts) + +包导出：`CenterTextConfig` + +```typescript +export type CenterTextConfig = z.infer +``` + +关联 API：[zCenterTextConfig](schemas.md#zcentertextconfig) + +## ChartDynamicFilter + +源码：[packages/vseed/src/types/dataSelector/selector.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/dataSelector/selector.ts) + +包导出：`ChartDynamicFilter` + +````typescript +/** + * 图表动态筛选器配置 + * @description 通过 AI 生成的 JavaScript 代码实现图表标记（柱子、点等）的筛选 + * @environment 仅支持浏览器环境（需要 Web Worker），Node.js 环境将使用 fallback + */ +export interface ChartDynamicFilter { + type: 'row-with-field' + /** + * 用户的筛选需求描述（自然语言） + * @example "高亮销售额大于1000的柱子" + * @example "高亮每个区域中利润率最高的柱子" + */ + description?: string + /** + * AI 生成的 JavaScript 筛选代码 + * @description + * - 只能使用内置工具函数（通过 _ 或 R 访问） + * - 输入参数: data (数组)，每个 item 包含 __row_index 字段表示行号 + * - 必须返回行索引与字段组合的数组: Array<{ __row_index: number, field: string }> + * - __row_index 表示原始数据项的行号，field 表示需要高亮的字段 + * - 禁止使用: eval, Function, 异步操作, DOM API, 网络请求 + * + * @example 高亮销售额大于1000的数据项的 sales 字段 + * ```javascript + * const filtered = _.filter(data, item => item.sales > 1000); + * return _.map(filtered, item => ({ + * __row_index: item.__row_index, + * field: 'sales' + * })); + * ``` + * + * @example 高亮每个区域中利润率最高的数据项 + * ```javascript + * const grouped = _.groupBy(data, 'area'); + * const maxItems = _.map(grouped, group => + * _.maxBy(group, item => item.profit / item.sales) + * ); + * return _.flatten( + * _.map(maxItems, item => [ + * { __row_index: item.__row_index, field: 'product' }, + * { __row_index: item.__row_index, field: 'profit' } + * ]) + * ); + * ``` + * + * @example 高亮多条件筛选的数据项 + * ```javascript + * const filtered = _.filter(data, item => { + * const profitRate = item.profit / item.sales; + * return profitRate > 0.2 && item.sales > 5000; + * }); + * return _.flatten( + * _.map(filtered, item => [ + * { __row_index: item.__row_index, field: 'product' }, + * { __row_index: item.__row_index, field: 'sales' } + * ]) + * ); + * ``` + */ + code: string + /** + * 代码执行失败或环境不支持时的降级方案 + */ + fallback?: Selector | Selectors + /** + * 动态筛选执行结果（运行期字段） + * @description prepare() 阶段写入，运行时只读 + */ + result?: DynamicFilterExecutionResult +} +```` + +关联 API：[DynamicFilterExecutionResult](types.md#dynamicfilterexecutionresult)、[RowWithFieldRes](types.md#rowwithfieldres)、[Selector](types.md#selector)、[Selectors](types.md#selectors) + +## ChartType + +源码：[packages/vseed/src/types/properties/chartType/chartType.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/chartType/chartType.ts) + +包导出：`ChartType` + +```typescript +export type ChartType = + | 'table' + | 'pivotTable' + | 'line' + | 'column' + | 'columnPercent' + | 'columnParallel' + | 'bar' + | 'barPercent' + | 'barParallel' + | 'area' + | 'areaPercent' + | 'scatter' + | 'dualAxis' + | 'rose' + | 'roseParallel' + | 'pie' + | 'donut' + | 'radar' + | 'raceBar' + | 'raceColumn' + | 'raceScatter' + | 'raceLine' + | 'racePie' + | 'raceDonut' + | 'treeMap' + | 'sunburst' + | 'circlePacking' + | 'hierarchySankey' + | 'sankey' + | 'heatmap' + | 'funnel' + | 'boxPlot' + | 'histogram' +``` + +## CirclePackingConfig + +源码：[packages/vseed/src/types/properties/config/circlePacking.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/circlePacking.ts) + +包导出：`CirclePackingConfig` + +```typescript +export type CirclePackingConfig = z.infer +``` + +关联 API：[zCirclePackingConfig](schemas.md#zcirclepackingconfig) + +## CodeExecutionOptions + +源码：[packages/vseed/src/types/sandbox.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/sandbox.ts) + +关联类型：通过公开 API 的签名引用，不是包入口的独立导出。 + +```typescript +/** + * 代码执行选项 + */ +export interface CodeExecutionOptions { + /** 执行代码 */ + code: string + /** 输入数据 */ + data: any[] + /** 超时时间（毫秒），默认 2000ms */ + timeout?: number +} +``` + +## CodeExecutionResult + +源码：[packages/vseed/src/types/sandbox.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/sandbox.ts) + +关联类型：通过公开 API 的签名引用，不是包入口的独立导出。 + +```typescript +/** + * 代码执行结果 + */ +export interface CodeExecutionResult { + success: boolean + data: any + error?: string +} +``` + +## Color + +源码：[packages/vseed/src/types/properties/config/color/color.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/color/color.ts) + +包导出：`Color` + +```typescript +export type Color = { + /** + * @description 离散颜色配色方案, 颜色配色方案用于定义图表中不同元素的颜色 + * @example ['#FFCDD2,#F8BBD0,#E1BEE7,#D1C4E9,#C5CAE9,#BBDEFB,#B3E5FC,#B2EBF2,#B2DFDB,#C8E6C9,#DCEDC8,#F0F4C3,#FFF9C4,#FFECB3,#FFE0B2'] + */ + colorScheme?: string[] + /** + * @description 线性渐变颜色配色方案, 线性渐变颜色配色方案用于定义图表中不同元素的颜色 + * @example ['#FFCDD2, #F8BBD0] + */ + linearColorScheme?: string[] + /** + * @description 颜色映射, 颜色映射用于将数据值映射到具体的颜色 + * @example + * { + * 'profit': 'red', + * 'sales': 'blue', + * } + */ + colorMapping?: Record + /** + * @description 正负颜色配置, 用于定义图表中正值的颜色 + */ + positiveColor?: string + /** + * @description 正负颜色配置, 用于定义图表中负值的颜色 + */ + negativeColor?: string +} +``` + +## ColorLegend + +源码：[packages/vseed/src/types/properties/config/legend/legend.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/legend/legend.ts) + +包导出：`ColorLegend` + +```typescript +export type ColorLegend = Pick< + Legend, + 'position' | 'enable' | 'labelColor' | 'labelFontColor' | 'labelFontSize' | 'labelFontWeight' +> & { + railBackgroundColor?: string + handlerBorderColor?: string +} +``` + +关联 API：[Legend](types.md#legend) + +## ColumnConfig + +源码：[packages/vseed/src/types/properties/config/column.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/column.ts) + +包导出：`ColumnConfig` + +```typescript +export type ColumnConfig = z.infer +``` + +关联 API：[zColumnConfig](schemas.md#zcolumnconfig) + +## ColumnDimension + +源码：[packages/vseed/src/types/properties/dimensions/columnDimension.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/dimensions/columnDimension.ts) + +包导出：`ColumnDimension` + +```typescript +/** + * 柱图类图表中的维度 + */ +export type ColumnDimension = BaseDimension & { + /** + * @description 维度映射的通道 + * - xAxis: 支持将多个维度映射到x轴 + * - color: 支持将多个维度映射到颜色通道 + * - detail: 支持将多个维度映射到详情通道 + * - tooltip: 支持将多个维度映射到提示通道 + * - label: 支持将多个维度映射到标签通道 + * - row: 支持将多个维度映射到行通道 + * - column: 支持将多个维度映射到列通道 + */ + encoding?: 'xAxis' | 'color' | 'detail' | 'tooltip' | 'label' | 'row' | 'column' +} +``` + +关联 API：[BaseDimension](types.md#basedimension) + +## ColumnMeasure + +源码：[packages/vseed/src/types/properties/measures/columnMeasure.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/measures/columnMeasure.ts) + +包导出：`ColumnMeasure` + +```typescript +export type ColumnMeasure = BaseMeasure & { + /** + * @description 指标映射的通道 + * - yAxis: 指标映射的y轴 + * - detail: 指标映射的详情 + * - color: 指标映射的颜色 + * - label: 指标映射的标签 + * - tooltip: 指标映射的提示 + */ + encoding?: 'yAxis' | 'detail' | 'color' | 'label' | 'tooltip' +} +``` + +关联 API：[BaseMeasure](types.md#basemeasure) + +## ColumnParallelConfig + +源码：[packages/vseed/src/types/properties/config/column.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/column.ts) + +包导出：`ColumnParallelConfig` + +```typescript +export type ColumnParallelConfig = z.infer +``` + +关联 API：[zColumnParallelConfig](schemas.md#zcolumnparallelconfig) + +## ColumnParallelDimension + +源码：[packages/vseed/src/types/properties/dimensions/columnDimension.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/dimensions/columnDimension.ts) + +包导出：`ColumnParallelDimension` + +```typescript +export type ColumnParallelDimension = ColumnDimension +``` + +关联 API：[ColumnDimension](types.md#columndimension) + +## ColumnParallelMeasure + +源码：[packages/vseed/src/types/properties/measures/columnMeasure.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/measures/columnMeasure.ts) + +包导出：`ColumnParallelMeasure` + +```typescript +export type ColumnParallelMeasure = ColumnMeasure +``` + +关联 API：[ColumnMeasure](types.md#columnmeasure) + +## ColumnPercentConfig + +源码：[packages/vseed/src/types/properties/config/column.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/column.ts) + +包导出：`ColumnPercentConfig` + +```typescript +export type ColumnPercentConfig = z.infer +``` + +关联 API：[zColumnPercentConfig](schemas.md#zcolumnpercentconfig) + +## ColumnPercentDimension + +源码：[packages/vseed/src/types/properties/dimensions/columnDimension.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/dimensions/columnDimension.ts) + +包导出：`ColumnPercentDimension` + +```typescript +export type ColumnPercentDimension = ColumnDimension +``` + +关联 API：[ColumnDimension](types.md#columndimension) + +## ColumnPercentMeasure + +源码：[packages/vseed/src/types/properties/measures/columnMeasure.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/measures/columnMeasure.ts) + +包导出：`ColumnPercentMeasure` + +```typescript +export type ColumnPercentMeasure = ColumnMeasure +``` + +关联 API：[ColumnMeasure](types.md#columnmeasure) + +## Config + +源码：[packages/vseed/src/types/properties/config/config.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/config.ts) + +包导出：`Config` + +```typescript +export type Config = z.infer +``` + +关联 API：[zConfig](schemas.md#zconfig) + +## CornerRadius + +源码：[packages/vseed/src/types/properties/config/cornerRadius/cornerRadius.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/cornerRadius/cornerRadius.ts) + +包导出：`CornerRadius` + +```typescript +export type CornerRadius = z.infer +``` + +关联 API：[zCornerRadius](schemas.md#zcornerradius) + +## CrosshairLine + +源码：[packages/vseed/src/types/properties/config/crosshair/crosshair.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/crosshair/crosshair.ts) + +包导出：`CrosshairLine` + +```typescript +/** + * @description 十字准星线配置，是一种用于在图表中显示十字准星线（提示线）的配置类型 + */ +export type CrosshairLine = { + /** + * @description 是否显示十字准星线 + */ + visible?: boolean + /** + * @description 十字准星线颜色 + */ + lineColor?: string + /** + * @description 十字准星线标签颜色 + */ + labelColor?: string + /** + * @description 是否显示十字准星线标签 + */ + labelVisible?: boolean + /** + * @description 十字准星线标签背景颜色 + */ + labelBackgroundColor?: string +} +``` + +## CrosshairRect + +源码：[packages/vseed/src/types/properties/config/crosshair/crosshair.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/crosshair/crosshair.ts) + +包导出：`CrosshairRect` + +```typescript +/** + * @description 十字准星线矩形区域配置，是一种用于在图表中显示十字准星线矩形区域的配置类型 + */ +export type CrosshairRect = { + /** + * @description 是否显示十字准星线矩形区域 + */ + visible?: boolean + /** + * @description 十字准星线矩形区域颜色 + */ + rectColor?: string + /** + * @description 十字准星线矩形区域标签颜色 + */ + labelColor?: string + /** + * @description 是否显示十字准星线矩形区域标签 + */ + labelVisible?: boolean + /** + * @description 十字准星线矩形区域标签背景颜色 + */ + labelBackgroundColor?: string +} +``` + +## CustomTheme + +源码：[packages/vseed/src/types/properties/theme/customTheme.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/theme/customTheme.ts) + +包导出：`CustomTheme` + +```typescript +export type CustomTheme = z.infer +``` + +关联 API：[zCustomTheme](schemas.md#zcustomtheme) + +## CustomThemeConfig + +源码：[packages/vseed/src/types/properties/theme/customTheme.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/theme/customTheme.ts) + +包导出：`CustomThemeConfig` + +```typescript +export type CustomThemeConfig = z.infer +``` + +关联 API：[zCustomThemeConfig](schemas.md#zcustomthemeconfig) + +## Dark + +源码：[packages/vseed/src/types/properties/theme/theme.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/theme/theme.ts) + +关联类型：通过公开 API 的签名引用，不是包入口的独立导出。 + +```typescript +type Dark = 'dark' & { + readonly brand: unique symbol +} +``` + +## Dataset + +源码：[packages/vseed/src/types/properties/dataset/dataset.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/dataset/dataset.ts) + +包导出：`Dataset` + +```typescript +export type Dataset = z.infer +``` + +关联 API：[zDataset](schemas.md#zdataset) + +## DatasetReshapeInfo + +源码：[packages/vseed/src/types/properties/datasetReshapeInfo/datasetReshapeInfo.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/datasetReshapeInfo/datasetReshapeInfo.ts) + +包导出：`DatasetReshapeInfo` + +```typescript +export type DatasetReshapeInfo = Array<{ + id: string + index: number + foldInfo: FoldInfo + foldInfoList?: FoldInfo[] + unfoldInfo: UnfoldInfo +}> +``` + +关联 API：[FoldInfo](types.md#foldinfo)、[UnfoldInfo](types.md#unfoldinfo) + +## Datum + +源码：[packages/vseed/src/types/properties/dataset/dataset.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/dataset/dataset.ts) + +包导出：`Datum` + +```typescript +export type Datum = z.infer +``` + +关联 API：[zDatum](schemas.md#zdatum) + +## DifferenceAnchor + +源码：[packages/vseed/src/types/properties/annotation/annotationDifferenceLine.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/annotation/annotationDifferenceLine.ts) + +包导出：`DifferenceAnchor` + +```typescript +/** + * @description 差异标注锚点配置，用于选择起始点或终止点绑定的数据。 + */ +export type DifferenceAnchor = { + /** + * @description 锚点选择器，必须最终定位到一个逻辑锚点。 + * @example { year: '1930', type: 'Autocracies' } + * @example [{ field: 'year', operator: 'in', value: ['1930'] }, { field: 'type', operator: 'in', value: ['Autocracies'] }] + */ + selector: DifferenceSelector | DifferenceSelector[] +} +``` + +关联 API：[DifferenceSelector](types.md#differenceselector) + +## DifferenceSelector + +源码：[packages/vseed/src/types/properties/annotation/annotationDifferenceLine.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/annotation/annotationDifferenceLine.ts) + +包导出：`DifferenceSelector` + +```typescript +/** + * @description 差异标注锚点选择器，仅支持能明确绑定到具体数据项的选择器类型。 + */ +export type DifferenceSelector = PartialDatumSelector | MeasureSelector | DimensionSelector +``` + +关联 API：[DimensionSelector](types.md#dimensionselector)、[MeasureSelector](types.md#measureselector)、[PartialDatumSelector](types.md#partialdatumselector) + +## Dimension + +源码：[packages/vseed/src/types/properties/dimensions/baseDimension.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/dimensions/baseDimension.ts) + +包导出：`Dimension` + +```typescript +/** + * @description 维度 + */ +export type Dimension = BaseDimension & { + /** + * @description 维度映射的通道 + * - xAxis: 支持将多个维度映射到x轴, 支持柱状图、折线图、面积图等 + * - yAxis: 支持将多个维度映射到y轴, 支持柱状图、折线图、面积图等 + * - angle: 支持将多个维度映射到角度通道, 支持玫瑰图、雷达图等 + * - color: 支持将多个维度映射到颜色通道, 支持所有图表类型 + * - detail: 支持将多个维度映射到详情通道, 支持所有图表类型 + * - tooltip: 支持将多个维度映射到提示通道, 支持所有图表类型 + * - label: 支持将多个维度映射到标签通道, 支持所有图表类型 + * - row: 支持将多个维度映射到行通道, 支持所有图表类型 + * - column: 支持将多个维度映射到列通道, 支持所有图表类型 + */ + encoding?: DimensionEncoding +} +``` + +关联 API：[BaseDimension](types.md#basedimension)、[DimensionEncoding](types.md#dimensionencoding) + +## DimensionEncoding + +源码：[packages/vseed/src/types/properties/encoding/dimensionEncoding.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/encoding/dimensionEncoding.ts) + +包导出：`DimensionEncoding` + +```typescript +/** + * @description 维度映射的通道 + * - x: 支持将多个维度映射到x轴, 支持柱状图、折线图、面积图等 + * - y: 支持将多个维度映射到y轴, 支持柱状图、折线图、面积图等 + * - angle: 支持将多个维度映射到角度通道, 支持玫瑰图、雷达图等 + * - color: 支持将多个维度映射到颜色通道, 支持所有图表类型 + * - detail: 支持将多个维度映射到详情通道, 支持所有图表类型 + * - tooltip: 支持将多个维度映射到提示通道, 支持所有图表类型 + * - label: 支持将多个维度映射到标签通道, 支持所有图表类型 + * - row: 支持将多个维度映射到行通道, 支持所有图表类型 + * - column: 支持将多个维度映射到列通道, 支持所有图表类型 + * - source: 支持将多个维度映射到桑基图的 source 通道 + * - target: 支持将多个维度映射到桑基图的 target 通道 + */ +export type DimensionEncoding = + | 'xAxis' + | 'yAxis' + | 'angle' + | 'color' + | 'detail' + | 'tooltip' + | 'label' + | 'row' + | 'column' + | 'player' + | 'hierarchy' + | 'source' + | 'target' +``` + +## DimensionEncodingEnum + +源码：[packages/vseed/src/types/properties/encoding/zDimensionEncoding.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/encoding/zDimensionEncoding.ts) + +包导出：`DimensionEncodingEnum` + +```typescript +const DimensionEncodingEnum: { + readonly xAxis: 'xAxis' + readonly yAxis: 'yAxis' + readonly angle: 'angle' + readonly color: 'color' + readonly detail: 'detail' + readonly tooltip: 'tooltip' + readonly label: 'label' + readonly row: 'row' + readonly column: 'column' + readonly player: 'player' + readonly hierarchy: 'hierarchy' + readonly source: 'source' + readonly target: 'target' +} +``` + +## DimensionGroup + +源码：[packages/vseed/src/types/properties/dimensions/tableDimension.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/dimensions/tableDimension.ts) + +包导出：`DimensionGroup` + +```typescript +/** + * @description 维度组 + */ +export type DimensionGroup = { + id: string + alias?: string + children?: (TableDimension | DimensionGroup)[] +} +``` + +关联 API：[TableDimension](types.md#tabledimension) + +## DimensionLinkage + +源码：[packages/vseed/src/types/properties/config/dimensionLinkage/dimensionLinkage.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/dimensionLinkage/dimensionLinkage.ts) + +包导出：`DimensionLinkage` + +```typescript +/** + * 透视图表维度联动配置 + */ +export type DimensionLinkage = { + /** + * 是否开启透视图表维度联动 + */ + enable: boolean + /** + * 是否显示所有维度对应子图表的Tooltip提示信息 + */ + showTooltip?: boolean + /** + * 是否显示crosshair 对应的标签 + */ + showLabel?: boolean +} +``` + +## Dimensions + +源码：[packages/vseed/src/types/properties/dimensions/baseDimension.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/dimensions/baseDimension.ts) + +包导出：`Dimensions` + +```typescript +export type Dimensions = Dimension[] +``` + +关联 API：[Dimension](types.md#dimension) + +## DimensionSelector + +源码：[packages/vseed/src/types/dataSelector/selector.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/dataSelector/selector.ts) + +包导出：`DimensionSelector` + +```typescript +/** + * @description 维度选择器, 用于选择数据项中维度字段的值 + */ +export type DimensionSelector = { + /** + * @description 维度字段, dimensions 某一项的 id + */ + field: string + /** + * @description 操作符 + * - in: 选择数据项中维度字段的值在 value 中的数据项 + * - not in: 选择数据项中维度字段的值不在 value 中的数据项 + */ + operator?: 'in' | 'not in' + /** + * @description 操作符 + * - in: 选择数据项中维度字段的值在 value 中的数据项 + * - not in: 选择数据项中维度字段的值不在 value 中的数据项 + * same as operator + */ + op?: 'in' | 'not in' + /** + * @description 选择数据项中维度字段的值, 支持数组 + */ + value: string | number | Array +} +``` + +## DimensionTree + +源码：[packages/vseed/src/types/properties/dimensions/tableDimension.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/dimensions/tableDimension.ts) + +包导出：`DimensionTree` + +```typescript +export type DimensionTree = (TableDimension | DimensionGroup)[] +``` + +关联 API：[DimensionGroup](types.md#dimensiongroup)、[TableDimension](types.md#tabledimension) + +## DonutConfig + +源码：[packages/vseed/src/types/properties/config/pie.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/pie.ts) + +包导出：`DonutConfig` + +```typescript +export type DonutConfig = z.infer +``` + +关联 API：[zDonutConfig](schemas.md#zdonutconfig) + +## DonutDimension + +源码：[packages/vseed/src/types/properties/dimensions/donutDimension.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/dimensions/donutDimension.ts) + +包导出：`DonutDimension` + +```typescript +export type DonutDimension = PieDimension +``` + +关联 API：[PieDimension](types.md#piedimension) + +## DonutMeasure + +源码：[packages/vseed/src/types/properties/measures/pieMeasure.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/measures/pieMeasure.ts) + +包导出：`DonutMeasure` + +```typescript +export type DonutMeasure = PieMeasure +``` + +关联 API：[PieMeasure](types.md#piemeasure) + +## DualAxisConfig + +源码：[packages/vseed/src/types/properties/config/dualAxis.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/dualAxis.ts) + +包导出：`DualAxisConfig` + +```typescript +export type DualAxisConfig = z.infer +``` + +关联 API：[zDualAxisConfig](schemas.md#zdualaxisconfig) + +## DualAxisDimension + +源码：[packages/vseed/src/types/properties/dimensions/dualAxisDimension.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/dimensions/dualAxisDimension.ts) + +包导出：`DualAxisDimension` + +```typescript +export type DualAxisDimension = ColumnDimension +``` + +关联 API：[ColumnDimension](types.md#columndimension) + +## DualAxisMeasure + +源码：[packages/vseed/src/types/properties/measures/dualAxisMeasure.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/measures/dualAxisMeasure.ts) + +包导出：`DualAxisMeasure` + +```typescript +export type DualAxisMeasure = BaseMeasure & { + /** + * @description 指标映射的通道 + * - primaryYAxis: 指标映射的主y轴 + * - secondaryYAxis: 指标映射的次y轴 + * - color: 指标映射的颜色 + * - label: 指标映射的标签 + * - tooltip: 指标映射的提示 + */ + encoding?: 'primaryYAxis' | 'secondaryYAxis' | 'color' | 'label' | 'tooltip' + /** + * @description 设置该指标在双轴图中的图表类型, 仅适用于双轴图 + * - line: 折线图 + * - column: 柱状图 + * - columnParallel: 平行柱状图 + * - columnPercent: 百分比柱状图 + * - area: 面积图 + * - areaPercent: 百分比面积图 + * - scatter: 散点图 + */ + chartType?: 'line' | 'column' | 'columnParallel' | 'columnPercent' | 'area' | 'areaPercent' | 'scatter' +} +``` + +关联 API：[BaseMeasure](types.md#basemeasure) + +## DualAxisOptions + +源码：[packages/vseed/src/types/properties/config/dualAxis.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/dualAxis.ts) + +包导出：`DualAxisOptions` + +```typescript +export type DualAxisOptions = { + axisType: 'primary' | 'secondary' + chartType: ChartType + foldInfo: FoldInfo +} +``` + +关联 API：[ChartType](types.md#charttype)、[FoldInfo](types.md#foldinfo) + +## DynamicFilterExecutionResult + +源码：[packages/vseed/src/types/dataSelector/selector.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/dataSelector/selector.ts) + +包导出：`DynamicFilterExecutionResult` + +```typescript +export type DynamicFilterExecutionResult = { + success: boolean + data?: T[] + error?: string +} +``` + +## EcdfRegressionLine + +源码：[packages/vseed/src/types/properties/regressionLine/ecdfRegressionLine.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/regressionLine/ecdfRegressionLine.ts) + +包导出：`EcdfRegressionLine` + +```typescript +/** + * @description 经验累积分布函数回归线配置项 + */ +export type EcdfRegressionLine = { + /** + * 是否开启 + */ + enable?: boolean + /** + * @description 回归线颜色 + * 用于设置回归线的颜色，如果不设置，默认使用图表的主颜色 + */ + color?: string + /** + * @description 回归线宽度 + * 用于设置回归线的宽度，单位为像素，默认值为1 + */ + lineWidth?: number + /** + * @description 回归线样式 + * 用于设置回归线的样式，例如实线、虚线等，默认值为实线 + */ + lineDash?: number[] + /** + * @description 回归线标签文本 + * 用于设置回归线的标签文本，空字符串表示不显示标签 + */ + text?: string + /** + * @description 文本颜色 + * @example 'red' + */ + textColor?: string + /** + * @description 文本字体大小 + * @example 12 + */ + textFontSize?: number + /** + * @description 文本字体重量 + * @example 400 + */ + textFontWeight?: number +} +``` + +## Encoding + +源码：[packages/vseed/src/types/properties/encoding/encoding.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/encoding/encoding.ts) + +包导出：`Encoding` + +```typescript +export type Encoding = { + /** + * @description X轴映射通道, 支持放入多个维度字段, 不支持放入指标字段, 在笛卡尔坐标系中用于显示离散的X轴, 例如柱状图、折线图、面积图、双轴图 + */ + x?: string[] + /** + * @description Y轴映射通道, 支持放入多个维度字段, 不支持放入指标字段, 在笛卡尔坐标系中用于显示离散的Y轴, 例如条形图 + */ + y?: string[] + /** + * @description 角度映射通道, 支持放入多个维度字段, 不支持放入指标字段, 在饼图中用于显示角度 + */ + angle?: string[] + /** + * @description 半径映射通道, 支持放入多个维度字段, 不支持放入指标字段, 在饼图中用于显示半径 + */ + radius?: string[] + /** + * @description 细分映射通道, 支持放入多个维度字段, 不支持放入指标字段, 在图表中显示更细粒度的数据 + */ + detail?: string[] + /** + * @description 颜色映射通道, 支持放入多个维度字段 或 1个 指标字段 + * - 多个维度: 合并所有维度为离散的图例项 + * - 1个指标: 映射为连续的颜色渐变 + */ + color?: string[] + /** + * @description 大小映射通道, 支持放入 1个 指标字段 + * - 1个指标: 映射为连续的大小渐变 + */ + size?: string[] + /** + * @description 提示映射通道, 支持放入多个维度字段 和 多个指标字段, 每多一个字段, tooltip内就会多显示一个字段的信息 + */ + tooltip?: string[] + /** + * @description 标签映射通道, 支持放入多个维度字段 和 多个指标字段, 每多一个字段, label内就会多显示一个字段的信息 + */ + label?: string[] + /** + * @description 行映射通道, 支持放入多个维度字段, 不支持放入指标字段, 在图表中进行行透视 + */ + row?: string[] + /** + * @description 列映射通道, 支持放入多个维度字段, 不支持放入指标字段, 在图表中进行列透视 + */ + column?: string[] + /** + * @description 播放映射通道, 支持放入多个维度字段, 不支持放入指标字段, 在图表中进行播放 + */ + player?: string[] + /** + * @description 层级映射通道, 支持放入多个维度字段, 不支持放入指标字段, 在矩形树图、旭日图、圆形打包图中用于显示层级 + */ + hierarchy?: string[] + /** + * @description 桑基图起点映射通道, 支持放入多个维度字段 + */ + source?: string[] + /** + * @description 桑基图终点映射通道, 支持放入多个维度字段 + */ + target?: string[] + /** + * ------------------------------------------------- 直方图与boxplot ------------------------------------------------- + */ + /** + * @description 明细数据通道，用于直方图/boxplot等图表设置明细数据 + */ + value?: string[] + /** + * @description 四分之一数据通道，用于boxplot图表设置四分之一数据 + */ + q1?: string[] + /** + * @description 中位数数据通道，用于boxplot图表设置中位数数据 + */ + median?: string[] + /** + * @description 四分之三数据通道，用于boxplot图表设置四分之三数据 + */ + q3?: string[] + /** + * @description 最小值数据通道，用于boxplot图表设置最小值数据 + */ + min?: string[] + /** + * @description 最大值数据通道，用于boxplot图表设置最大值数据 + */ + max?: string[] + /** + * @description 异常值数据通道，用于boxplot图表设置异常值数据 + */ + outliers?: string[] + /** + * @description 连续x轴起始数据通道，用于直方图图表设置连续x轴起始数据 + */ + x0?: string[] + /** + * @description 连续x轴结束数据通道，用于直方图图表设置连续x轴结束数据 + */ + x1?: string[] +} +``` + +## EncodingEnum + +源码：[packages/vseed/src/types/properties/encoding/zEncoding.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/encoding/zEncoding.ts) + +包导出：`EncodingEnum` + +```typescript +/** + * @description 仅VSeed内AdvancedVSeed使用此结构, 其余场景请使用DimensionEncodingEnum、MeasureEncodingEnum + */ +const EncodingEnum: { + readonly x: 'x' + readonly y: 'y' + readonly angle: 'angle' + readonly radius: 'radius' + readonly detail: 'detail' + readonly color: 'color' + readonly size: 'size' + readonly tooltip: 'tooltip' + readonly label: 'label' + readonly row: 'row' + readonly column: 'column' + readonly player: 'player' + readonly hierarchy: 'hierarchy' + readonly source: 'source' + readonly target: 'target' +} +``` + +## FieldSelector + +源码：[packages/vseed/src/types/dataSelector/selector.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/dataSelector/selector.ts) + +包导出：`FieldSelector` + +```typescript +/** + * @description 字段选择器，用于直接选择指定字段（列），不涉及条件判断 + */ +export type FieldSelector = { + /** + * @description 字段名，可以是单个字段或多个字段数组 + * @example 单个字段 + * field: 'sales' + * @example 多个字段 + * field: ['sales', 'profit', 'revenue'] + */ + field: string | string[] +} +``` + +## FoldInfo + +源码：[packages/vseed/src/types/properties/datasetReshapeInfo/datasetReshapeInfo.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/datasetReshapeInfo/datasetReshapeInfo.ts) + +包导出：`FoldInfo` + +```typescript +export type FoldInfo = { + foldMap: Record + statistics: { + min: number + max: number + sum: number + count: number + colorMin: number + colorMax: number + } + measureId: string + measureName: string + measureValue: string +} +``` + +## Formatter + +源码：[packages/vseed/src/types/properties/format/formatter.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/format/formatter.ts) + +包导出：`Formatter` + +```typescript +export type Formatter = (value?: number | string) => string +``` + +## FunnelConfig + +源码：[packages/vseed/src/types/properties/config/funnel.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/funnel.ts) + +包导出：`FunnelConfig` + +```typescript +export type FunnelConfig = z.infer +``` + +关联 API：[zFunnelConfig](schemas.md#zfunnelconfig) + +## FunnelDimension + +源码：[packages/vseed/src/types/properties/dimensions/funnelDimension.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/dimensions/funnelDimension.ts) + +包导出：`FunnelDimension` + +```typescript +export type FunnelDimension = PieDimension +``` + +关联 API：[PieDimension](types.md#piedimension) + +## FunnelMeasure + +源码：[packages/vseed/src/types/properties/measures/funnelMeasure.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/measures/funnelMeasure.ts) + +包导出：`FunnelMeasure` + +```typescript +export type FunnelMeasure = BaseMeasure & { + /** + * @description 指标映射的通道 + * - size: 指标映射的大小 + * - color: 指标映射的颜色 + * - label: 指标映射的标签 + * - tooltip: 指标映射的提示 + */ + encoding?: 'size' | 'color' | 'label' | 'tooltip' +} +``` + +关联 API：[BaseMeasure](types.md#basemeasure) + +## FunnelTransformConfig + +源码：[packages/vseed/src/types/properties/config/funnelTransform/funnelTransform.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/funnelTransform/funnelTransform.ts) + +包导出：`FunnelTransformConfig` + +```typescript +/** + * 漏斗图转换层的配置 + */ +export interface FunnelTransformConfig { + /** + * 转换层的背景颜色 + */ + backgroundColor?: string + /** + * 转换层的文本颜色 + */ + textColor?: string +} +``` + +## HeatmapConfig + +源码：[packages/vseed/src/types/properties/config/heatmap.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/heatmap.ts) + +包导出：`HeatmapConfig` + +```typescript +export type HeatmapConfig = z.infer +``` + +关联 API：[zHeatmapConfig](schemas.md#zheatmapconfig) + +## HeatmapDimension + +源码：[packages/vseed/src/types/properties/dimensions/heatmapDimension.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/dimensions/heatmapDimension.ts) + +包导出：`HeatmapDimension` + +```typescript +export type HeatmapDimension = BaseDimension & { + /** + * @description 维度映射的通道 + * - xAxis: 支持将多个维度映射到x轴 + * - yAxis: 支持将多个维度映射到y轴 + * - tooltip: 支持将多个维度映射到提示通道 + * - label: 支持将多个维度映射到标签通道 + * - row: 支持将多个维度映射到行通道 + * - column: 支持将多个维度映射到列通道 + */ + encoding?: 'xAxis' | 'yAxis' | 'tooltip' | 'label' | 'row' | 'column' +} +``` + +关联 API：[BaseDimension](types.md#basedimension) + +## HeatmapMeasure + +源码：[packages/vseed/src/types/properties/measures/heatmapMeasure.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/measures/heatmapMeasure.ts) + +包导出：`HeatmapMeasure` + +```typescript +export type HeatmapMeasure = BaseMeasure & { + /** + * @description 指标映射的通道 + * - color: 指标映射的颜色 + * - label: 指标映射的标签 + * - tooltip: 指标映射的提示 + */ + encoding?: 'color' | 'label' | 'tooltip' +} +``` + +关联 API：[BaseMeasure](types.md#basemeasure) + +## HierarchyDimension + +源码：[packages/vseed/src/types/properties/dimensions/hierarchyDimension.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/dimensions/hierarchyDimension.ts) + +包导出：`HierarchyDimension` + +```typescript +export type HierarchyDimension = BaseDimension & { + /** + * @description 维度映射的通道 + * - hierarchy: 支持将多个维度映射到层级通道 + * - label: 支持将多个维度映射到标签通道 + * - tooltip: 支持将多个维度映射到提示通道 + * @tip 第一个维度会被直接映射到 color 通道 + */ + encoding?: 'hierarchy' | 'label' | 'tooltip' +} +``` + +关联 API：[BaseDimension](types.md#basedimension) + +## HierarchyMeasure + +源码：[packages/vseed/src/types/properties/measures/hierarchyMeasure.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/measures/hierarchyMeasure.ts) + +包导出：`HierarchyMeasure` + +```typescript +export type HierarchyMeasure = BaseMeasure & { + /** + * @description 指标映射的通道 + * - size: 指标映射到大小通道，用于树图等图表的面积或大小展示 + * - label: 指标映射的标签 + * - tooltip: 指标映射的提示 + */ + encoding?: 'size' | 'label' | 'tooltip' +} +``` + +关联 API：[BaseMeasure](types.md#basemeasure) + +## HierarchySankeyConfig + +源码：[packages/vseed/src/types/properties/config/hierarchySankey.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/hierarchySankey.ts) + +包导出：`HierarchySankeyConfig` + +```typescript +export type HierarchySankeyConfig = z.infer +``` + +关联 API：[zHierarchySankeyConfig](schemas.md#zhierarchysankeyconfig) + +## HistogramDimension + +源码：[packages/vseed/src/types/properties/dimensions/histogramDimension.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/dimensions/histogramDimension.ts) + +包导出：`HistogramDimension` + +```typescript +export type HistogramDimension = BaseDimension & { + /** + * @description 维度映射的通道 + * - color: 支持将多个维度映射到颜色通道 + * - detail: 支持将多个维度映射到详情通道 + * - tooltip: 支持将多个维度映射到提示通道 + * - label: 支持将多个维度映射到标签通道 + * - row: 支持将多个维度映射到行通道 + * - column: 支持将多个维度映射到列通道 + */ + encoding?: 'tooltip' | 'label' | 'row' | 'column' +} +``` + +关联 API：[BaseDimension](types.md#basedimension) + +## HistogramMeasure + +源码：[packages/vseed/src/types/properties/measures/histogramMeasure.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/measures/histogramMeasure.ts) + +包导出：`HistogramMeasure` + +```typescript +export type HistogramMeasure = BaseMeasure & { + /** + * @description 指标映射的通道 + * - value: 直方图的值通道 + * - x0: 直方图的x0通道 + * - x1: 直方图的x1通道 + * - color: 指标映射的颜色 + * - label: 指标映射的标签 + * - tooltip: 指标映射的提示 + */ + encoding?: 'value' | 'x0' | 'x1' | 'color' | 'label' | 'tooltip' +} +``` + +关联 API：[BaseMeasure](types.md#basemeasure) + +## KdeRegressionLine + +源码：[packages/vseed/src/types/properties/regressionLine/kdeRegressionLine.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/regressionLine/kdeRegressionLine.ts) + +包导出：`KdeRegressionLine` + +```typescript +/** + * @description 核密度估计回归线配置项 + */ +export type KdeRegressionLine = { + /** + * @description 是否开启回归线功能 + */ + enable?: boolean + /** + * @description 回归线颜色 + * 用于设置回归线的颜色，如果不设置，默认使用图表的主颜色 + */ + color?: string + /** + * @description 回归线宽度 + * 用于设置回归线的宽度，单位为像素，默认值为1 + */ + lineWidth?: number + /** + * @description 回归线样式 + * 用于设置回归线的样式，例如实线、虚线等，默认值为实线 + */ + lineDash?: number[] + /** + * @description 回归线标签文本 + * 用于设置回归线的标签文本，空字符串表示不显示标签 + */ + text?: string + /** + * @description 文本颜色 + * @example 'red' + */ + textColor?: string + /** + * @description 文本字体大小 + * @example 12 + */ + textFontSize?: number + /** + * @description 文本字体重量 + * @example 400 + */ + textFontWeight?: number +} +``` + +## Label + +源码：[packages/vseed/src/types/properties/config/label/label.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/label/label.ts) + +包导出：`Label` + +```typescript +export type Label = { + /** + * @description 标签功能是否开启 + */ + enable: boolean + /** + * @description 标签是否换行 + */ + wrap?: boolean + /** + * @description 标签是否显示指标值 + * 多指标的场景, 无需担心多个指标的值会矛盾, 因为所有的绘图相关的指标, 都会经过`foldMeasures`处理, 合并为一个指标, 代表一个数据点, 所以不会矛盾 + * 注意: encoding的label优先级更高, 此配置不影响encoding的label + */ + showValue?: boolean + /** + * @description 标签是否显示指标值的百分比 + * 多指标的场景, 无需担心多个指标的值会矛盾, 因为所有的绘图相关的指标, 都会经过`foldMeasures`处理, 合并为一个指标, 代表一个数据点, 所以不会矛盾 + * 注意: encoding的label优先级更高, 此配置不影响encoding的label + */ + showValuePercent?: boolean + /** + * @description 标签是否显示维度标签 + * 展示所有维度标签 + * 注意: encoding的label优先级更高, 此配置不影响encoding的label + */ + showDimension?: boolean + /** + * @description 标签数值是否自动格式化, autoFormat 为 true 时, numFormat 配置失效 + */ + autoFormat?: boolean + /** + * @description 标签数值格式化配置, 会和 `measure` 中的 `format` 进行合并, `measure` 中的 `format` 优先级更高. numFormat 优先级低于 autoFormat + */ + numFormat?: NumFormat + /** + * @description 标签字体大小 + */ + labelFontSize?: number + /** + * @description 标签字体粗细 + */ + labelFontWeight?: number | string + /** + * @description 标签背景色 + */ + labelBackgroundColor?: string + /** + * @description 标签描边颜色 + */ + labelStroke?: string + /** + * @description 标签字体颜色 + */ + labelColor?: string + /** + * @description 标签是否自动根据图元颜色进行字体颜色的反转 + */ + labelColorSmartInvert?: boolean + /** + * @description 标签位置 + */ + labelPosition?: 'inside' | 'outside' + /** + * @description 标签防重叠功能是否启用 + */ + labelOverlap?: boolean + /** + * @description 标签筛选，默认selectors之间条件关系为Or + */ + selector?: Selector | Selectors + /** + * 动态筛选器（AI生成代码执行） + * @description + * 通过 AI 生成的 JavaScript 代码实现复杂数据筛选逻辑 + * + * 核心能力: + * - 支持任意复杂的数据筛选条件 + * - 使用 内置工具函数 进行数据操作 + * - 在浏览器环境中安全执行（Web Worker 沙箱） + * + * 环境要求: 仅支持浏览器环境，Node.js 环境将使用 fallback + * + * 注意: selector 和 dynamicFilter 不能同时使用，dynamicFilter 优先级更高 + * + * @type {ChartDynamicFilter} + */ + dynamicFilter?: ChartDynamicFilter +} +``` + +关联 API：[ChartDynamicFilter](types.md#chartdynamicfilter)、[NumFormat](types.md#numformat)、[Selector](types.md#selector)、[Selectors](types.md#selectors) + +## Legend + +源码：[packages/vseed/src/types/properties/config/legend/legend.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/legend/legend.ts) + +包导出：`Legend` + +```typescript +export type Legend = { + /** + * 图例功能是否开启 + * @default true + * @example enable: true + */ + enable?: boolean + /** + * @description 离散图例是否允许悬停、选择、聚焦和数据筛选。false 时仅说明分类。 + * @default true + */ + interactive?: boolean + /** + * @description 图例边框是否开启 + * @warning 仅离散图例生效 + * @default true + * @example border: true + */ + border?: boolean + /** + * @description 图例字体颜色 + */ + labelColor?: string + /** + * @description 分页器icon颜色 + */ + pagerIconColor?: string + /** + * @description 分页器icon置灰颜色 + */ + pagerIconDisableColor?: string + /** + * @description 图例字体大小 + * @example labelFontSize: 10 + */ + labelFontSize?: number + /** + * @description 图例字体颜色 + * @deprecated use labelColor instead + */ + labelFontColor?: string + /** + * @description 图例字体粗细 + * @example labelFontWeight: 400 + */ + labelFontWeight?: number | string + /** + * @description 图例形状 + * @warning 仅离散图例生效 + * @example shapeType: 'circle' + */ + shapeType?: + | 'circle' + | 'cross' + | 'diamond' + | 'square' + | 'arrow' + | 'arrow2Left' + | 'arrow2Right' + | 'wedge' + | 'thinTriangle' + | 'triangle' + | 'triangleUp' + | 'triangleDown' + | 'triangleRight' + | 'triangleLeft' + | 'stroke' + | 'star' + | 'wye' + | 'rect' + | 'arrowLeft' + | 'arrowRight' + | 'rectRound' + | 'roundLine' + /** + * 图例位置 + * @default 'right' + * @example position: 'rightTop' + */ + position?: + | 'left' + | 'leftTop' + | 'leftBottom' + | 'lt' + | 'lb' + | 'top' + | 'topLeft' + | 'topRight' + | 'tl' + | 'tr' + | 'right' + | 'rightTop' + | 'rightBottom' + | 'rt' + | 'rb' + | 'bottom' + | 'bottomLeft' + | 'bottomRight' + | 'bl' + | 'br' + /** + * @description 存在大量图例时, 最大列数 或 图例最大行数 + * 如果position为水平方向(bottom, bottomLeft, bottomRight, bl, br, top, topLeft, topRight, tl, tr), maxSize控制显示的列数 + * 如果position为垂直方向(left, leftTop, leftBottom, lt, lb, right, rightTop, rightBottom, rt, rb), maxSize控制显示的行数 + * + * @warning 仅离散图例生效 + * @example maxSize: 2 + * @default 1 + */ + maxSize?: number +} +``` + +## Light + +源码：[packages/vseed/src/types/properties/theme/theme.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/theme/theme.ts) + +关联类型：通过公开 API 的签名引用，不是包入口的独立导出。 + +```typescript +type Light = 'light' & { + readonly brand: unique symbol +} +``` + +## LineAreaAnimation + +源码：[packages/vseed/src/types/properties/config/animation/animation.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/animation/animation.ts) + +包导出：`LineAreaAnimation` + +```typescript +export interface LineAreaAnimation { + /** @description 是否启用折线/面积图动画 */ + enable?: boolean + /** @description 折线/面积图动画参数 */ + params?: LineAreaAnimationParams +} +``` + +关联 API：[LineAreaAnimationParams](types.md#lineareaanimationparams) + +## LineAreaAnimationLoop + +源码：[packages/vseed/src/types/properties/config/animation/animationLoop.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/animation/animationLoop.ts) + +包导出：`LineAreaAnimationLoop` + +```typescript +export interface LineAreaAnimationLoop { + /** @description 是否启用循环动画 */ + enable?: boolean + /** @description 循环动画间隔，单位为毫秒 */ + interval?: number + /** @description 折线/面积图循环动画配置 */ + loop?: LineAreaLoopAnimation + /** @description 折线/面积图氛围动画配置 */ + atmosphere?: PointAtmosphereConfig +} +``` + +关联 API：[LineAreaLoopAnimation](types.md#linearealoopanimation)、[PointAtmosphereConfig](types.md#pointatmosphereconfig) + +## LineAreaAnimationParams + +源码：[packages/vseed/src/types/properties/config/animation/animation.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/animation/animation.ts) + +包导出：`LineAreaAnimationParams` + +```typescript +export interface LineAreaAnimationParams { + /** @description 折线/面积图入场动画配置 */ + appear?: LineAreaAppearAnimation + /** @description 折线/面积图数据进入、更新、退出的共同动画配置 */ + update?: LineAreaUpdateAnimation + /** @description 折线/面积图循环动画配置 */ + loop?: LineAreaAnimationLoop +} +``` + +关联 API：[LineAreaAnimationLoop](types.md#lineareaanimationloop)、[LineAreaAppearAnimation](types.md#lineareaappearanimation)、[LineAreaUpdateAnimation](types.md#lineareaupdateanimation) + +## LineAreaAppearAnimation + +源码：[packages/vseed/src/types/properties/config/animation/animationEffect.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/animation/animationEffect.ts) + +包导出：`LineAreaAppearAnimation` + +```typescript +export interface LineAreaAppearAnimation extends AnimationEffectConfig { + /** @description 折线/面积图入场效果，支持加载和生长动画 */ + effects?: ('load' | 'growth')[] +} +``` + +关联 API：[AnimationEffectConfig](types.md#animationeffectconfig) + +## LineAreaLoopAnimation + +源码：[packages/vseed/src/types/properties/config/animation/animationEffect.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/animation/animationEffect.ts) + +包导出：`LineAreaLoopAnimation` + +```typescript +export interface LineAreaLoopAnimation extends AnimationEffectConfig { + /** @description 折线/面积图循环效果 */ + effects?: LineAreaLoopEffect[] +} +``` + +关联 API：[AnimationEffectConfig](types.md#animationeffectconfig)、[LineAreaLoopEffect](types.md#linearealoopeffect) + +## LineAreaLoopEffect + +源码：[packages/vseed/src/types/properties/config/animation/animationEffect.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/animation/animationEffect.ts) + +包导出：`LineAreaLoopEffect` + +```typescript +export type LineAreaLoopEffect = 'load' | 'growth' | 'none' +``` + +## LineAreaUpdateAnimation + +源码：[packages/vseed/src/types/properties/config/animation/animationEffect.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/animation/animationEffect.ts) + +包导出：`LineAreaUpdateAnimation` + +```typescript +export interface LineAreaUpdateAnimation extends AnimationEffectConfig { + /** @description 折线/面积图更新效果，支持生长动画 */ + effects?: 'growth'[] +} +``` + +关联 API：[AnimationEffectConfig](types.md#animationeffectconfig) + +## LinearRegressionLine + +源码：[packages/vseed/src/types/properties/regressionLine/linearRegressionLine.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/regressionLine/linearRegressionLine.ts) + +包导出：`LinearRegressionLine` + +```typescript +/** + * @description 线性回归线配置项 + */ +export type LinearRegressionLine = { + /** + * 是否开启 + */ + enable?: boolean + /** + * @description 回归线颜色 + * 用于设置回归线的颜色，如果不设置，默认使用图表的主颜色 + */ + color?: string + /** + * @description 回归线宽度 + * 用于设置回归线的宽度，单位为像素，默认值为1 + */ + lineWidth?: number + /** + * @description 回归线样式 + * 用于设置回归线的样式，例如实线、虚线等，默认值为实线 + */ + lineDash?: number[] + /** + * @description 回归线标签文本 + * 用于设置回归线的标签文本，空字符串表示不显示标签 + */ + text?: string + /** + * @description 文本颜色 + * @example 'red' + */ + textColor?: string + /** + * @description 文本字体大小 + * @example 12 + */ + textFontSize?: number + /** + * @description 文本字体重量 + * @example 400 + */ + textFontWeight?: number + /** + * @description 是否显示置信区间 + */ + confidenceIntervalVisible?: boolean + /** + * @description 置信区间数值设定，默认95%置信度 + * @default 0.95 + */ + confidenceLevel?: number + /** + * @description 置信区间颜色 + */ + confidenceIntervalColor?: string + /** + * @description 置信区间透明度 + * @example 0.5 + */ + confidenceIntervalOpacity?: number + /** + * @description 图形模糊效果程度 + * @example 0 + */ + shadowBlur?: number + /** + * @description 图形的阴影颜色 + * @example '#FFFFFF4D' + */ + shadowColor?: string + /** + * @description 阴影水平偏移距离 + * @example 0 + */ + shadowOffsetX?: number + /** + * @description 阴影垂直偏移距离 + * @example 1 + */ + shadowOffsetY?: number +} +``` + +## LineConfig + +源码：[packages/vseed/src/types/properties/config/line.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/line.ts) + +包导出：`LineConfig` + +```typescript +export type LineConfig = z.infer +``` + +关联 API：[zLineConfig](schemas.md#zlineconfig) + +## LineDimension + +源码：[packages/vseed/src/types/properties/dimensions/lineDimension.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/dimensions/lineDimension.ts) + +包导出：`LineDimension` + +```typescript +export type LineDimension = ColumnDimension +``` + +关联 API：[ColumnDimension](types.md#columndimension) + +## LineMeasure + +源码：[packages/vseed/src/types/properties/measures/lineMeasure.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/measures/lineMeasure.ts) + +包导出：`LineMeasure` + +```typescript +export type LineMeasure = ColumnMeasure +``` + +关联 API：[ColumnMeasure](types.md#columnmeasure) + +## LineStyle + +源码：[packages/vseed/src/types/properties/markStyle/lineStyle.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/markStyle/lineStyle.ts) + +包导出：`LineStyle` + +```typescript +export type LineStyle = { + /** + * 数据选择器 + * @description + * 若配置selector, 提供数值 selector, 局部数据 selector, 条件维度 selector, 条件指标 selector 共四类数据匹配能力 + * 若未配置selector, 则样式全局生效. + * @type {Selector | Selectors} + * @example 数值选择器 + * selector = "tool" + * selector = ["tool", "book"] + * selector = 100 + * selector = [100, 200] + * @example 局部数据选择器 + * selector = { profit: 100 } + * selector = [{ profit: 100 }, { profit: 200 }] + * @example 条件维度选择器 + * selector = { + * field: 'category', + * operator: 'in', + * value: 'tool' + * } + * selector = { + * field: 'category', + * operator: 'not in', + * value: 'book' + * } + * @example 条件指标选择器 + * selector = { + * field: 'profit', + * operator: '>=', + * value: 100 + * } + * selector = { + * field: 'profit', + * operator: 'between' + * value: [100, 300] + * } + */ + selector?: Selector | Selectors + /** + * 动态筛选器（AI生成代码执行） + * @description + * 通过 AI 生成的 JavaScript 代码实现复杂数据筛选逻辑 + * 适用于 Top N、统计分析、复杂条件等静态 selector 难以表达的场景 + * + * 核心能力: + * - 支持任意复杂的数据筛选条件 + * - 使用 内置工具函数 进行数据操作 + * - 在浏览器环境中安全执行（Web Worker 沙箱） + * + * 环境要求: 仅支持浏览器环境，Node.js 环境将使用 fallback + * + * 注意: selector 和 dynamicFilter 不能同时使用，dynamicFilter 优先级更高 + * + * @type {ChartDynamicFilter} + */ + dynamicFilter?: ChartDynamicFilter + /** + * @description 线段是否可见 + */ + lineVisible?: boolean + /** + * @description 线段是否平滑 + * @type {boolean} + */ + lineSmooth?: boolean + /** + * @description 线段颜色 + */ + lineColor?: string + /** + * @description 线段颜色透明度 + */ + lineColorOpacity?: number + /** + * @description 线段宽度 + */ + lineWidth?: number + /** + * @description 线段样式 + * @example `lineStyle: 'solid'` + */ + lineStyle?: 'solid' | 'dashed' | 'dotted' +} +``` + +关联 API：[ChartDynamicFilter](types.md#chartdynamicfilter)、[Selector](types.md#selector)、[Selectors](types.md#selectors) + +## LogisticRegressionLine + +源码：[packages/vseed/src/types/properties/regressionLine/logisticRegressionLine.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/regressionLine/logisticRegressionLine.ts) + +包导出：`LogisticRegressionLine` + +```typescript +/** + * @description Logistic回归线配置项 + */ +export type LogisticRegressionLine = { + /** + * 是否开启 + */ + enable?: boolean + /** + * @description 回归线颜色 + * 用于设置回归线的颜色，如果不设置，默认使用图表的主颜色 + */ + color?: string + /** + * @description 回归线宽度 + * 用于设置回归线的宽度，单位为像素，默认值为1 + */ + lineWidth?: number + /** + * @description 回归线样式 + * 用于设置回归线的样式，例如实线、虚线等，默认值为实线 + */ + lineDash?: number[] + /** + * @description 回归线标签文本 + * 用于设置回归线的标签文本，空字符串表示不显示标签 + */ + text?: string + /** + * @description 文本颜色 + * @example 'red' + */ + textColor?: string + /** + * @description 文本字体大小 + * @example 12 + */ + textFontSize?: number + /** + * @description 文本字体重量 + * @example 400 + */ + textFontWeight?: number + /** + * @description 是否显示置信区间 + */ + confidenceIntervalVisible?: boolean + /** + * @description 置信区间数值设定，默认95%置信度 + * @default 0.95 + */ + confidenceLevel?: number + /** + * @description 置信区间颜色 + */ + confidenceIntervalColor?: string + /** + * @description 置信区间透明度 + * @example 0.5 + */ + confidenceIntervalOpacity?: number +} +``` + +## LowessRegressionLine + +源码：[packages/vseed/src/types/properties/regressionLine/lowessRegressionLine.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/regressionLine/lowessRegressionLine.ts) + +包导出：`LowessRegressionLine` + +```typescript +/** + * @description 局部加权回归线配置项 + */ +export type LowessRegressionLine = { + /** + * 是否开启 + */ + enable?: boolean + /** + * @description 回归线颜色 + * 用于设置回归线的颜色，如果不设置，默认使用图表的主颜色 + */ + color?: string + /** + * @description 回归线宽度 + * 用于设置回归线的宽度，单位为像素，默认值为1 + */ + lineWidth?: number + /** + * @description 回归线样式 + * 用于设置回归线的样式，例如实线、虚线等，默认值为实线 + */ + lineDash?: number[] + /** + * @description 回归线标签文本 + * 用于设置回归线的标签文本，空字符串表示不显示标签 + */ + text?: string + /** + * @description 文本颜色 + * @example 'red' + */ + textColor?: string + /** + * @description 文本字体大小 + * @example 12 + */ + textFontSize?: number + /** + * @description 文本字体重量 + * @example 400 + */ + textFontWeight?: number + /** + * @description 是否显示置信区间 + */ + confidenceIntervalVisible?: boolean + /** + * @description 置信区间数值设定，默认95%置信度 + * @default 0.95 + */ + confidenceLevel?: number + /** + * @description 置信区间颜色 + */ + confidenceIntervalColor?: string + /** + * @description 置信区间透明度 + * @example 0.5 + */ + confidenceIntervalOpacity?: number +} +``` + +## MarkStyle + +源码：[packages/vseed/src/types/properties/markStyle/markStyle.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/markStyle/markStyle.ts) + +包导出：`MarkStyle` + +```typescript +export type MarkStyle = z.infer +``` + +关联 API：[zMarkStyle](schemas.md#zmarkstyle) + +## Measure + +源码：[packages/vseed/src/types/properties/measures/baseMeasure.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/measures/baseMeasure.ts) + +包导出：`Measure` + +```typescript +/** + * @description 指标 + */ +export type Measure = BaseMeasure & { + /** + * @description 指标映射的通道 + * - primaryYAxis: 指标映射的主y轴, 仅用于双轴图 + * - secondaryYAxis: 指标映射的次y轴, 仅用于双轴图 + * - xAxis: 指标映射的x轴, 适用于条形图、散点图 + * - yAxis: 指标映射的y轴, 适用于柱状图、折线图、面积图、散点图 + * - angle: 指标映射的角度, 适用于饼图、环形图、雷达图 + * - radius: 指标映射的半径, 适用于玫瑰图 + * - size: 指标映射的大小, 适用于漏斗图、散点图 + * - detail: 指标映射的详情, 适用于透视表、热力图 + * - column: 指标映射的列, 仅适用于表格 + * - color: 指标映射的颜色, 适用于所有图表 + * - label: 指标映射的标签, 适用于所有图表 + * - tooltip: 指标映射的提示, 适用于所有图表 + */ + encoding?: MeasureEncoding + /** + * @description 设置该指标在双轴图中的图表类型, 仅适用于双轴图 + * - line: 折线图 + * - column: 柱状图 + * - columnParallel: 平行柱状图 + * - columnPercent: 百分比柱状图 + * - area: 面积图 + * - areaPercent: 百分比面积图 + * - scatter: 散点图 + */ + chartType?: 'line' | 'column' | 'columnParallel' | 'columnPercent' | 'area' | 'areaPercent' | 'scatter' +} +``` + +关联 API：[BaseMeasure](types.md#basemeasure)、[MeasureEncoding](types.md#measureencoding) + +## MeasureEncoding + +源码：[packages/vseed/src/types/properties/encoding/measureEncoding.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/encoding/measureEncoding.ts) + +包导出：`MeasureEncoding` + +```typescript +export type MeasureEncoding = + | 'primaryYAxis' + | 'secondaryYAxis' + | 'xAxis' + | 'yAxis' + | 'angle' + | 'radius' + | 'size' + | 'color' + | 'detail' + | 'column' + | 'label' + | 'tooltip' + | 'value' + | 'q1' + | 'median' + | 'q3' + | 'min' + | 'max' + | 'outliers' + | 'x0' + | 'x1' +``` + +## MeasureEncodingEnum + +源码：[packages/vseed/src/types/properties/encoding/zMeasureEncoding.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/encoding/zMeasureEncoding.ts) + +包导出：`MeasureEncodingEnum` + +```typescript +const MeasureEncodingEnum: { + readonly primaryYAxis: 'primaryYAxis' + readonly secondaryYAxis: 'secondaryYAxis' + readonly xAxis: 'xAxis' + readonly yAxis: 'yAxis' + readonly angle: 'angle' + readonly radius: 'radius' + readonly size: 'size' + readonly color: 'color' + readonly detail: 'detail' + readonly column: 'column' + readonly label: 'label' + readonly tooltip: 'tooltip' +} +``` + +## MeasureGroup + +源码：[packages/vseed/src/types/properties/measures/measureTree.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/measures/measureTree.ts) + +包导出：`MeasureGroup` + +```typescript +export type MeasureGroup = { + /** + * @description 指标组id, 不能重复 + */ + id: string + /** + * @description 指标组别名, 允许重复, 未填写时, alias 为 id + * @default id + */ + alias?: string + /** + * @description 指标组的子指标或指标组 + */ + children?: (TableMeasure | MeasureGroup)[] +} +``` + +关联 API：[TableMeasure](types.md#tablemeasure) + +## Measures + +源码：[packages/vseed/src/types/properties/measures/baseMeasure.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/measures/baseMeasure.ts) + +包导出：`Measures` + +```typescript +export type Measures = Measure[] +``` + +关联 API：[Measure](types.md#measure) + +## MeasureSelector + +源码：[packages/vseed/src/types/dataSelector/selector.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/dataSelector/selector.ts) + +包导出：`MeasureSelector` + +```typescript +/** + * @description 指标选择器, 用于选择数据项中指标字段的值 + */ +export type MeasureSelector = { + /** + * @description 指标字段, measures 某一项的 id + */ + field: string + /** + * @description 操作符 + * - =: 选择数据项中指标字段的值等于 value 的数据项 + * - ==: 选择数据项中指标字段的值等于 value 的数据项 + * - !=: 选择数据项中指标字段的值不等于 value 的数据项 + * - >: 选择数据项中指标字段的值大于 value 的数据项 + * - <: 选择数据项中指标字段的值小于 value 的数据项 + * - >=: 选择数据项中指标字段的值大于等于 value 的数据项 + * - <=: 选择数据项中指标字段的值小于等于 value 的数据项 + * - between: 选择数据项中指标字段的值在 value 之间的 data item + */ + operator?: '=' | '==' | '!=' | '>' | '<' | '>=' | '<=' | 'between' + /** + * @description 操作符 + * - =: 选择数据项中指标字段的值等于 value 的数据项, 会将值转换为字符串后进行比较, 因此 1 == "1" 为 true + * - ==: 选择数据项中指标字段的值精准等于 value 的数据项, 不会做任何特殊处理, 因此 1 == "1" 为 false + * - !=: 选择数据项中指标字段的值不等于 value 的数据项 + * - >: 选择数据项中指标字段的值大于 value 的数据项 + * - <: 选择数据项中指标字段的值小于 value 的数据项 + * - >=: 选择数据项中指标字段的值大于等于 value 的数据项 + * - <=: 选择数据项中指标字段的值小于等于 value 的数据项 + * - between: 选择数据项中指标字段的值在 value 之间的 data item + * same as operator + */ + op?: '=' | '==' | '!=' | '>' | '<' | '>=' | '<=' | 'between' + /** + * @description 选择数据项中指标字段的值 + * - 仅 op 为 between 时, value 为长度为2的数组, 数组中的元素为指标字段的最小值和最大值 + * - 其他情况, value 为指标字段的单个值 + */ + value: string | number | Array +} +``` + +## MeasureTree + +源码：[packages/vseed/src/types/properties/measures/measureTree.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/measures/measureTree.ts) + +包导出：`MeasureTree` + +```typescript +export type MeasureTree = (TableMeasure | MeasureGroup)[] +``` + +关联 API：[MeasureGroup](types.md#measuregroup)、[TableMeasure](types.md#tablemeasure) + +## NoEffectAtmosphereConfig + +源码：[packages/vseed/src/types/properties/config/animation/animationAtmosphere.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/animation/animationAtmosphere.ts) + +包导出：`NoEffectAtmosphereConfig` + +```typescript +export interface NoEffectAtmosphereConfig { + /** @description 氛围动画缓动函数 */ + ease?: string + /** @description 氛围动画颜色 */ + color?: string +} +``` + +## NumFormat + +源码：[packages/vseed/src/types/properties/format/numFormat.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/format/numFormat.ts) + +包导出：`NumFormat` + +```typescript +export interface NumFormat { + /** + * @description 数字格式化类型, 支持数值(十进制)、百分比(%)、千分比(‰)、科学计数法 + * @default 'number' + */ + type?: 'number' | 'percent' | 'permille' | 'scientific' + /** + * @description 数值格式化比例, 不能为0 + * @default 1 + * @example + * - 100000 转换为 10万, ratio:10000, symbol:"万" + * - 100000 转换为 10K, ratio:1000, symbol:"K" + */ + ratio?: number + /** + * @description 数值格式化符号, 例如%、‰ + * @default '' + * @example + * - 100000 转换为 10万, ratio:10000, symbol:"万" + * - 100000 转换为 10K, ratio:1000, symbol:"K" + */ + symbol?: string + /** + * @description 数值格式化千分位分隔符 + * @default true + */ + thousandSeparator?: boolean + /** + * @description 数值格式化后缀 + * @default '' + */ + suffix?: string + /** + * @description 数值格式化前缀 + * @default '' + */ + prefix?: string + /** + * @description 数值格式化小数位, 使用浏览器提供的 Intl.NumberFormat 中的 minimumFractionDigits 和 maximumFractionDigits 进行格式化, 优先级低于 significantDigits + * @default 2 + * @example + * - 1234.5678 转换为 1235, fractionDigits:0 (roundingMode:halfCeil) + * - 1234.5678 转换为 1234.6, fractionDigits:1 (roundingMode:halfCeil) + * - 1234.5678 转换为 1234.57, fractionDigits:2 (roundingMode:halfCeil) + * - 1234.5678 转换为 1230.568, fractionDigits:3 (roundingMode:halfCeil) + * - 1234.5678 转换为 1234.5678, fractionDigits:4 (roundingMode:halfCeil) + * - 1234.5678 转换为 1234.56780, fractionDigits:5 (roundingMode:halfCeil) + */ + fractionDigits?: number + /** + * @description 数值格式化有效位, 使用浏览器提供的 Intl.NumberFormat 中的 minimumSignificantDigits 和 maximumSignificantDigits 进行格式化, 优先级高于 fractionDigits + * @default undefined + * @example + * - 1234.5678 转换为 1000, significantDigits:1 + * - 1234.5678 转换为 1200, significantDigits:2 + * - 1234.5678 转换为 1230, significantDigits:3 + * - 1234.5678 转换为 1234, significantDigits:4 + * - 1234.5678 转换为 1234.6, significantDigits:5 (roundingMode:halfCeil) + * - 1234.5678 转换为 1234.57, significantDigits:6 (roundingMode:halfCeil) + * - 1234.5678 转换为 1234.568, significantDigits:7 (roundingMode:halfCeil) + * - 1234.5678 转换为 1234.5678, significantDigits:8 (roundingMode:halfCeil) + */ + significantDigits?: number + /** + * @description 数值格式化舍入优先级, 处理同时设置了 significantDigits 和 fractionDigits 时的舍入优先级, 使用浏览器提供的 Intl.NumberFormat 进行格式化, 规则同 Intl.NumberFormat 中的 roundingPriority + * @default 'morePrecision' + * @example + * - 1234.5678 转换为 1230, significantDigits:3 (roundingPriority:lessPrecision) + * - 1234.5678 转换为 1234.5678, significantDigits:3 (roundingPriority:morePrecision) + */ + roundingPriority?: 'morePrecision' | 'lessPrecision' + /** + * @description 数值格式化舍入模式, 使用浏览器提供的 Intl.NumberFormat 进行格式化, 规则同 Intl.NumberFormat 中的 roundingMode + * @default 'halfExpand' + * @example + */ + roundingMode?: + | 'floor' + | 'ceil' + | 'expand' + | 'trunc' + | 'halfCeil' + | 'halfFloor' + | 'halfExpand' + | 'halfTrunc' + | 'halfEven' +} +``` + +## OutlierStyle + +源码：[packages/vseed/src/types/properties/markStyle/outlierStyle.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/markStyle/outlierStyle.ts) + +包导出：`OutlierStyle` + +```typescript +export type OutlierStyle = { + /** + * 数据选择器 + * @description + * 若配置selector, 提供数值 selector, 局部数据 selector, 条件维度 selector, 条件指标 selector 共四类数据匹配能力 + * 若未配置selector, 则样式全局生效. + * @type {Selector | Selectors} + * @example 数值选择器 + * selector = "tool" + * selector = ["tool", "book"] + * selector = 100 + * selector = [100, 200] + * @example 局部数据选择器 + * selector = { profit: 100 } + * selector = [{ profit: 100 }, { profit: 200 }] + * @example 条件维度选择器 + * selector = { + * field: 'category', + * operator: 'in', + * value: 'tool' + * } + * selector = { + * field: 'category', + * operator: 'not in', + * value: 'book' + * } + * @example 条件指标选择器 + * selector = { + * field: 'profit', + * operator: '>=', + * value: 100 + * } + * selector = { + * field: 'profit', + * operator: 'between' + * value: [100, 300] + * } + */ + selector?: Selector | Selectors + /** + * @description 点是否可见 + */ + pointVisible?: boolean + /** + * 点大小 + * @description 点大小 + */ + pointSize?: number + /** + * 点图元颜色 + * @description 点图元颜色 + */ + pointColor?: string + /** + * 点图元颜色透明度 + * @description 点图元颜色透明度 + */ + pointColorOpacity?: number + /** + * 点图元边框颜色 + * @description 点图元边框颜色 + */ + pointBorderColor?: string + /** + * 点图元边框宽度 + * @description 点图元边框宽度 + */ + pointBorderWidth?: number + /** + * 点图元边框样式 + * @description 点图元边框样式 + * @example solid + * @example dashed + * @example dotted + */ + pointBorderStyle?: 'solid' | 'dashed' | 'dotted' +} +``` + +关联 API：[Selector](types.md#selector)、[Selectors](types.md#selectors) + +## Page + +源码：[packages/vseed/src/types/properties/page/page.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/page/page.ts) + +包导出：`Page` + +```typescript +export type Page = { + /** + * @description 分页字段, 用于指定分页的字段名, 必须是维度 + */ + field: string + /** + * @description 当前分页值, 用于指定当前分页的依据值 + * @example '2023-01-01' + */ + currentValue: string +} +``` + +## PartialDatumRes + +源码：[packages/vseed/src/types/dataSelector/selector.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/dataSelector/selector.ts) + +包导出：`PartialDatumRes` + +```typescript +/** + * 部分数据项结果 + * @description 用于表示动态筛选器返回的部分数据项 + */ +export type PartialDatumRes = Datum +``` + +关联 API：[Datum](types.md#datum) + +## PartialDatumSelector + +源码：[packages/vseed/src/types/dataSelector/selector.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/dataSelector/selector.ts) + +包导出：`PartialDatumSelector` + +```typescript +export type PartialDatumSelector = Datum +``` + +关联 API：[Datum](types.md#datum) + +## PieConfig + +源码：[packages/vseed/src/types/properties/config/pie.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/pie.ts) + +包导出：`PieConfig` + +```typescript +export type PieConfig = z.infer +``` + +关联 API：[zPieConfig](schemas.md#zpieconfig) + +## PieDimension + +源码：[packages/vseed/src/types/properties/dimensions/pieDimension.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/dimensions/pieDimension.ts) + +包导出：`PieDimension` + +```typescript +export type PieDimension = BaseDimension & { + /** + * @description 维度映射的通道 + * - color: 支持将多个维度映射到颜色通道 + * - detail: 支持将多个维度映射到详情通道 + * - tooltip: 支持将多个维度映射到提示通道 + * - label: 支持将多个维度映射到标签通道 + * - row: 支持将多个维度映射到行通道 + * - column: 支持将多个维度映射到列通道 + */ + encoding?: 'color' | 'detail' | 'tooltip' | 'label' | 'row' | 'column' +} +``` + +关联 API：[BaseDimension](types.md#basedimension) + +## PieGeometry + +源码：[packages/vseed/src/types/properties/config/pieGeometry.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/pieGeometry.ts) + +包导出：`PieGeometry` + +```typescript +export type PieGeometry = { + /** @description 外半径占可用半径的比例，范围 (0, 1]，默认 0.8。 */ + outerRadius?: number + /** @description 内半径占可用半径的比例，必须小于外半径。未配置时保持主题的内外半径比例，内置饼图为 0，环图为 80%。 */ + innerRadius?: number + /** @description 起始角度，单位为度，默认 -90。 */ + startAngle?: number + /** @description 结束角度，单位为度。未配置时保持主题的角度跨度，内置主题为 360。角度跨度必须在 (0, 360]。 */ + endAngle?: number +} +``` + +## PieLabel + +源码：[packages/vseed/src/types/properties/config/label/pieLabel.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/label/pieLabel.ts) + +包导出：`PieLabel` + +```typescript +export type PieLabel = Label & { + /** + * @description 标签布局方式, 仅对饼图、环形图生效且`labelPosition`为`outside`时生效 + * - arc: 按弧形为标签布局 + * - labelLine: 标签两端对齐, 通过引导线连接扇形图元与标签 + * - edge: 标签两端对齐, 通过引导线连接扇形图元与标签, 并且贴近图表两端边缘 + */ + labelLayout?: 'arc' | 'labelLine' | 'edge' +} +``` + +关联 API：[Label](types.md#label) + +## PieLikeAnimation + +源码：[packages/vseed/src/types/properties/config/animation/animation.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/animation/animation.ts) + +包导出：`PieLikeAnimation` + +```typescript +export interface PieLikeAnimation { + /** @description 是否启用饼图/环图/玫瑰图动画 */ + enable?: boolean + /** @description 饼图/环图/玫瑰图动画参数 */ + params?: PieLikeAnimationParams +} +``` + +关联 API：[PieLikeAnimationParams](types.md#pielikeanimationparams) + +## PieLikeAnimationLoop + +源码：[packages/vseed/src/types/properties/config/animation/animationLoop.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/animation/animationLoop.ts) + +包导出：`PieLikeAnimationLoop` + +```typescript +export interface PieLikeAnimationLoop { + /** @description 是否启用循环动画 */ + enable?: boolean + /** @description 循环动画间隔，单位为毫秒 */ + interval?: number + /** @description 饼图/环图/玫瑰图循环动画配置 */ + loop?: PieLikeLoopAnimation + /** @description 饼图/环图/玫瑰图氛围动画配置 */ + atmosphere?: NoEffectAtmosphereConfig +} +``` + +关联 API：[NoEffectAtmosphereConfig](types.md#noeffectatmosphereconfig)、[PieLikeLoopAnimation](types.md#pielikeloopanimation) + +## PieLikeAnimationParams + +源码：[packages/vseed/src/types/properties/config/animation/animation.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/animation/animation.ts) + +包导出：`PieLikeAnimationParams` + +```typescript +export interface PieLikeAnimationParams { + /** @description 饼图/环图/玫瑰图入场动画配置 */ + appear?: PieLikeAppearAnimation + /** @description 饼图/环图/玫瑰图数据进入、更新、退出的共同动画配置 */ + update?: PieLikeUpdateAnimation + /** @description 饼图/环图/玫瑰图循环动画配置 */ + loop?: PieLikeAnimationLoop +} +``` + +关联 API：[PieLikeAnimationLoop](types.md#pielikeanimationloop)、[PieLikeAppearAnimation](types.md#pielikeappearanimation)、[PieLikeUpdateAnimation](types.md#pielikeupdateanimation) + +## PieLikeAppearAnimation + +源码：[packages/vseed/src/types/properties/config/animation/animationEffect.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/animation/animationEffect.ts) + +包导出：`PieLikeAppearAnimation` + +```typescript +export interface PieLikeAppearAnimation extends AnimationEffectConfig { + /** @description 饼图/环图/玫瑰图入场效果，支持径向和缩放动画 */ + effects?: ('radial' | 'scale')[] +} +``` + +关联 API：[AnimationEffectConfig](types.md#animationeffectconfig) + +## PieLikeLoopAnimation + +源码：[packages/vseed/src/types/properties/config/animation/animationEffect.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/animation/animationEffect.ts) + +包导出：`PieLikeLoopAnimation` + +```typescript +export interface PieLikeLoopAnimation extends AnimationEffectConfig { + /** @description 饼图/环图/玫瑰图循环效果 */ + effects?: PieLikeLoopEffect[] +} +``` + +关联 API：[AnimationEffectConfig](types.md#animationeffectconfig)、[PieLikeLoopEffect](types.md#pielikeloopeffect) + +## PieLikeLoopEffect + +源码：[packages/vseed/src/types/properties/config/animation/animationEffect.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/animation/animationEffect.ts) + +包导出：`PieLikeLoopEffect` + +```typescript +export type PieLikeLoopEffect = 'enlarge' | 'relocate' +``` + +## PieLikeUpdateAnimation + +源码：[packages/vseed/src/types/properties/config/animation/animationEffect.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/animation/animationEffect.ts) + +包导出：`PieLikeUpdateAnimation` + +```typescript +export interface PieLikeUpdateAnimation extends AnimationEffectConfig { + /** @description 饼图/环图/玫瑰图更新效果，支持径向动画 */ + effects?: 'radial'[] +} +``` + +关联 API：[AnimationEffectConfig](types.md#animationeffectconfig) + +## PieMeasure + +源码：[packages/vseed/src/types/properties/measures/pieMeasure.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/measures/pieMeasure.ts) + +包导出：`PieMeasure` + +```typescript +export type PieMeasure = BaseMeasure & { + /** + * @description 指标映射的通道 + * - angle: 指标映射的角度 + * - color: 指标映射的颜色 + * - label: 指标映射的标签 + * - tooltip: 指标映射的提示 + */ + encoding?: 'angle' | 'color' | 'label' | 'tooltip' +} +``` + +关联 API：[BaseMeasure](types.md#basemeasure) + +## PieStyle + +源码：[packages/vseed/src/types/properties/markStyle/pieStyle.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/markStyle/pieStyle.ts) + +包导出：`PieStyle` + +```typescript +export type PieStyle = { + /** @description 扇区边框颜色，默认跟随图表背景。 */ + pieBorderColor?: string + /** @description 扇区边框宽度，单位 px，默认按数据量自适应：不超过 30 条时为 1，否则为 0。0 表示无边框。 */ + pieBorderWidth?: number + /** @description 扇区圆角，单位 px。 */ + pieCornerRadius?: number + /** @description 悬停效果：enlarge 放大（默认）、opacity 降低透明度（固定为 0.75）、none 关闭。 */ + pieHoverEffect?: 'opacity' | 'enlarge' | 'none' +} +``` + +## PivotChartGridConfig + +源码：[packages/vseed/src/types/properties/config/pivotGrid/pivotGrid.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/pivotGrid/pivotGrid.ts) + +包导出：`PivotChartGridConfig` + +```typescript +export type PivotChartGridConfig = z.infer +``` + +关联 API：[zPivotChartGridConfig](schemas.md#zpivotchartgridconfig) + +## PivotTableConfig + +源码：[packages/vseed/src/types/properties/config/pivotTable.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/pivotTable.ts) + +包导出：`PivotTableConfig` + +```typescript +export type PivotTableConfig = z.infer +``` + +关联 API：[zPivotTableConfig](schemas.md#zpivottableconfig) + +## PivotTableTotals + +源码：[packages/vseed/src/types/properties/totals/totals.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/totals/totals.ts) + +包导出：`PivotTableTotals` + +```typescript +/** + * @description 透视表的总计小计配置 + */ +export type PivotTableTotals = { + /** + * @description 行的总计小计配置 + */ + row?: RowOrColumnTotalConfig + /** + * @description 列的总计小计配置 + */ + column?: RowOrColumnTotalConfig +} +``` + +关联 API：[RowOrColumnTotalConfig](types.md#roworcolumntotalconfig) + +## Player + +源码：[packages/vseed/src/types/properties/config/player/player.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/player/player.ts) + +包导出：`Player` + +```typescript +/** + * @description 播放器配置, 用于指定播放的字段名, 必须是维度 + * @warning 该功能不支持 table, pivotTable, dualAxis, histogram, boxPlot 等图表类型, 不支持在开启指标组合、行列透视下使用 + */ +export type Player = { + /** + * @description 最大播放数量, 超过该数量的数据将被截断, 设为 false 表示不限制 + */ + maxCount?: number | false + /** + * @description 播放间隔, 单位ms + */ + interval?: number + /** + * @description 是否自动播放 + */ + autoPlay?: boolean + /** + * @description 是否循环播放 + */ + loop?: boolean + /** + * @description 播放器位置 + */ + position?: 'top' | 'bottom' | 'left' | 'right' + /** + * @description 播放器进度条轨道颜色 + */ + railColor?: string + /** + * @description 播放器文本字体 + */ + fontFamily?: string + /** + * @description 播放器文本字号 + */ + fontSize?: number + /** + * @description 播放器进度条进度颜色 + */ + trackColor?: string + /** + * @description 播放器进度条滑块颜色 + */ + sliderHandleColor?: string + /** + * @description 播放器进度条滑块边框颜色 + */ + sliderHandleBorderColor?: string + /** + * @description 播放器开始按钮颜色 + */ + startButtonColor?: string + /** + * @description 播放器暂停按钮颜色 + */ + pauseButtonColor?: string + /** + * @description 播放器后退按钮颜色 + */ + backwardButtonColor?: string + /** + * @description 播放器前进按钮颜色 + */ + forwardButtonColor?: string +} +``` + +## PointAtmosphereConfig + +源码：[packages/vseed/src/types/properties/config/animation/animationAtmosphere.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/animation/animationAtmosphere.ts) + +包导出：`PointAtmosphereConfig` + +```typescript +export interface PointAtmosphereConfig { + /** @description 氛围动画缓动函数 */ + ease?: string + /** @description 氛围动画颜色 */ + color?: string + /** @description 氛围动画效果，支持涟漪、显隐和呼吸 */ + effect?: PointAtmosphereEffect +} +``` + +关联 API：[PointAtmosphereEffect](types.md#pointatmosphereeffect) + +## PointAtmosphereEffect + +源码：[packages/vseed/src/types/properties/config/animation/animationAtmosphere.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/animation/animationAtmosphere.ts) + +包导出：`PointAtmosphereEffect` + +```typescript +export type PointAtmosphereEffect = 'ripple' | 'reveal' | 'breath' +``` + +## PointStyle + +源码：[packages/vseed/src/types/properties/markStyle/pointStyle.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/markStyle/pointStyle.ts) + +包导出：`PointStyle` + +```typescript +export type PointStyle = { + /** + * 数据选择器 + * @description + * 若配置selector, 提供数值 selector, 局部数据 selector, 条件维度 selector, 条件指标 selector 共四类数据匹配能力 + * 若未配置selector, 则样式全局生效. + * @type {Selector | Selectors} + * @example 数值选择器 + * selector = "tool" + * selector = ["tool", "book"] + * selector = 100 + * selector = [100, 200] + * @example 局部数据选择器 + * selector = { profit: 100 } + * selector = [{ profit: 100 }, { profit: 200 }] + * @example 条件维度选择器 + * selector = { + * field: 'category', + * operator: 'in', + * value: 'tool' + * } + * selector = { + * field: 'category', + * operator: 'not in', + * value: 'book' + * } + * @example 条件指标选择器 + * selector = { + * field: 'profit', + * operator: '>=', + * value: 100 + * } + * selector = { + * field: 'profit', + * operator: 'between' + * value: [100, 300] + * } + */ + selector?: Selector | Selectors + /** + * 动态筛选器（AI生成代码执行） + * @description + * 通过 AI 生成的 JavaScript 代码实现复杂数据筛选逻辑 + * 适用于 Top N、统计分析、复杂条件等静态 selector 难以表达的场景 + * + * 核心能力: + * - 支持任意复杂的数据筛选条件 + * - 使用 内置工具函数 进行数据操作 + * - 在浏览器环境中安全执行（Web Worker 沙箱） + * + * 环境要求: 仅支持浏览器环境，Node.js 环境将使用 fallback + * + * 注意: selector 和 dynamicFilter 不能同时使用，dynamicFilter 优先级更高 + * + * @type {ChartDynamicFilter} + */ + dynamicFilter?: ChartDynamicFilter + /** + * @description 点是否默认可见。折线图、面积图（含百分比面积图）、雷达图及双轴图中的折线/面积系列设为 false 时，悬停对应维度仍会显示交互点。无条件设为 false 时不创建普通点图元，数据更新与退出动画也保持隐藏；条件样式仍可按数据控制可见性。 + */ + pointVisible?: boolean + /** + * 点大小 + * @description 点大小 + */ + pointSize?: number + /** + * 点图元颜色 + * @description 点图元颜色 + */ + pointColor?: string + /** + * 点图元颜色透明度 + * @description 点图元颜色透明度 + */ + pointColorOpacity?: number + /** + * 点图元边框颜色 + * @description 点图元边框颜色 + */ + pointBorderColor?: string + /** + * 点图元边框宽度 + * @description 点图元边框宽度 + */ + pointBorderWidth?: number + /** + * 点图元边框样式 + * @description 点图元边框样式 + * @example solid + * @example dashed + * @example dotted + */ + pointBorderStyle?: 'solid' | 'dashed' | 'dotted' +} +``` + +关联 API：[ChartDynamicFilter](types.md#chartdynamicfilter)、[Selector](types.md#selector)、[Selectors](types.md#selectors) + +## PolynomialRegressionLine + +源码：[packages/vseed/src/types/properties/regressionLine/polynomialRegressionLine.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/regressionLine/polynomialRegressionLine.ts) + +包导出：`PolynomialRegressionLine` + +```typescript +/** + * @description 多项式回归线配置 + */ +export type PolynomialRegressionLine = { + /** + * 是否开启 + */ + enable?: boolean + /** + * @description 回归线颜色 + * 用于设置回归线的颜色，如果不设置，默认使用图表的主颜色 + */ + color?: string + /** + * 多项式回归的阶数 + */ + degree?: number + /** + * @description 回归线宽度 + * 用于设置回归线的宽度，单位为像素，默认值为1 + */ + lineWidth?: number + /** + * @description 回归线样式 + * 用于设置回归线的样式，例如实线、虚线等，默认值为实线 + */ + lineDash?: number[] + /** + * @description 回归线标签文本 + * 用于设置回归线的标签文本，空字符串表示不显示标签 + */ + text?: string + /** + * @description 文本颜色 + * @example 'red' + */ + textColor?: string + /** + * @description 文本字体大小 + * @example 12 + */ + textFontSize?: number + /** + * @description 文本字体重量 + * @example 400 + */ + textFontWeight?: number + /** + * @description 是否显示置信区间 + */ + confidenceIntervalVisible?: boolean + /** + * @description 置信区间数值设定，默认95%置信度 + * @default 0.95 + */ + confidenceLevel?: number + /** + * @description 置信区间颜色 + */ + confidenceIntervalColor?: string + /** + * @description 置信区间透明度 + * @example 0.5 + */ + confidenceIntervalOpacity?: number +} +``` + +## RaceBarDimension + +源码：[packages/vseed/src/types/properties/dimensions/raceBarDimension.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/dimensions/raceBarDimension.ts) + +包导出：`RaceBarDimension` + +```typescript +export type RaceBarDimension = BaseDimension & { + /** + * @description 维度映射的通道 + * - player: 支持将多个维度映射到播放通道 + * - yAxis: 支持将多个维度映射到y轴 + * - color: 支持将多个维度映射到颜色通道 + * - detail: 支持将多个维度映射到详情通道 + * - tooltip: 支持将多个维度映射到提示通道 + * - label: 支持将多个维度映射到标签通道 + * - row: 支持将多个维度映射到行通道 + * - column: 支持将多个维度映射到列通道 + */ + encoding?: 'player' | 'yAxis' | 'color' | 'detail' | 'tooltip' | 'label' | 'row' | 'column' +} +``` + +关联 API：[BaseDimension](types.md#basedimension) + +## RaceBarMeasure + +源码：[packages/vseed/src/types/properties/measures/raceBarMeasure.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/measures/raceBarMeasure.ts) + +包导出：`RaceBarMeasure` + +```typescript +export type RaceBarMeasure = BaseMeasure & { + /** + * @description 指标映射的通道 + * - xAxis: 指标映射的x轴 + * - detail: 指标映射的详情 + * - color: 指标映射的颜色 + * - label: 指标映射的标签 + * - tooltip: 指标映射的提示 + */ + encoding?: 'xAxis' | 'detail' | 'color' | 'label' | 'tooltip' +} +``` + +关联 API：[BaseMeasure](types.md#basemeasure) + +## RaceBarParallelDimension + +源码：[packages/vseed/src/types/properties/dimensions/raceBarDimension.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/dimensions/raceBarDimension.ts) + +包导出：`RaceBarParallelDimension` + +```typescript +export type RaceBarParallelDimension = RaceBarDimension +``` + +关联 API：[RaceBarDimension](types.md#racebardimension) + +## RaceBarPercentDimension + +源码：[packages/vseed/src/types/properties/dimensions/raceBarDimension.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/dimensions/raceBarDimension.ts) + +包导出：`RaceBarPercentDimension` + +```typescript +export type RaceBarPercentDimension = RaceBarDimension +``` + +关联 API：[RaceBarDimension](types.md#racebardimension) + +## RaceColumnDimension + +源码：[packages/vseed/src/types/properties/dimensions/raceColumnDimension.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/dimensions/raceColumnDimension.ts) + +包导出：`RaceColumnDimension` + +```typescript +/** + * 竞赛柱图类图表中的维度 + */ +export type RaceColumnDimension = BaseDimension & { + /** + * @description 维度映射的通道 + * - xAxis: 支持将多个维度映射到x轴 + * - color: 支持将多个维度映射到颜色通道 + * - detail: 支持将多个维度映射到详情通道 + * - tooltip: 支持将多个维度映射到提示通道 + * - label: 支持将多个维度映射到标签通道 + * - row: 支持将多个维度映射到行通道 + * - column: 支持将多个维度映射到列通道 + * - player: 支持将多个维度映射到播放器通道 + */ + encoding?: 'xAxis' | 'color' | 'detail' | 'tooltip' | 'label' | 'row' | 'column' | 'player' +} +``` + +关联 API：[BaseDimension](types.md#basedimension) + +## RaceColumnParallelDimension + +源码：[packages/vseed/src/types/properties/dimensions/raceColumnDimension.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/dimensions/raceColumnDimension.ts) + +包导出：`RaceColumnParallelDimension` + +```typescript +export type RaceColumnParallelDimension = RaceColumnDimension +``` + +关联 API：[RaceColumnDimension](types.md#racecolumndimension) + +## RaceColumnPercentDimension + +源码：[packages/vseed/src/types/properties/dimensions/raceColumnDimension.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/dimensions/raceColumnDimension.ts) + +包导出：`RaceColumnPercentDimension` + +```typescript +export type RaceColumnPercentDimension = RaceColumnDimension +``` + +关联 API：[RaceColumnDimension](types.md#racecolumndimension) + +## RaceDonutDimension + +源码：[packages/vseed/src/types/properties/dimensions/raceDonutDimension.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/dimensions/raceDonutDimension.ts) + +包导出：`RaceDonutDimension` + +```typescript +export type RaceDonutDimension = Omit & { + /** + * @description 维度映射的通道 + * - color: 支持将多个维度映射到颜色通道 + * - detail: 支持将多个维度映射到详情通道 + * - tooltip: 支持将多个维度映射到提示通道 + * - label: 支持将多个维度映射到标签通道 + * - row: 支持将多个维度映射到行通道 + * - column: 支持将多个维度映射到列通道 + * - player: 支持将多个维度映射到播放器通道 + */ + encoding?: 'color' | 'detail' | 'tooltip' | 'label' | 'row' | 'column' | 'player' +} +``` + +关联 API：[DonutDimension](types.md#donutdimension) + +## RaceDonutMeasure + +源码：[packages/vseed/src/types/properties/measures/raceDonutMeasure.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/measures/raceDonutMeasure.ts) + +包导出：`RaceDonutMeasure` + +```typescript +export type RaceDonutMeasure = DonutMeasure +``` + +关联 API：[DonutMeasure](types.md#donutmeasure) + +## RacePieDimension + +源码：[packages/vseed/src/types/properties/dimensions/racePieDimension.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/dimensions/racePieDimension.ts) + +包导出：`RacePieDimension` + +```typescript +export type RacePieDimension = Omit & { + /** + * @description 维度映射的通道 + * - color: 支持将多个维度映射到颜色通道 + * - detail: 支持将多个维度映射到详情通道 + * - tooltip: 支持将多个维度映射到提示通道 + * - label: 支持将多个维度映射到标签通道 + * - row: 支持将多个维度映射到行通道 + * - column: 支持将多个维度映射到列通道 + * - player: 支持将多个维度映射到播放器通道 + */ + encoding?: 'color' | 'detail' | 'tooltip' | 'label' | 'row' | 'column' | 'player' +} +``` + +关联 API：[PieDimension](types.md#piedimension) + +## RacePieMeasure + +源码：[packages/vseed/src/types/properties/measures/racePieMeasure.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/measures/racePieMeasure.ts) + +包导出：`RacePieMeasure` + +```typescript +export type RacePieMeasure = PieMeasure +``` + +关联 API：[PieMeasure](types.md#piemeasure) + +## RaceScatterDimension + +源码：[packages/vseed/src/types/properties/dimensions/raceScatterDimension.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/dimensions/raceScatterDimension.ts) + +包导出：`RaceScatterDimension` + +```typescript +export type RaceScatterDimension = BaseDimension & { + /** + * @description 竞赛散点图类图表中的维度映射的通道 + * - color: 支持将多个维度映射到颜色通道 + * - detail: 支持将多个维度映射到详情通道 + * - tooltip: 支持将多个维度映射到提示通道 + * - label: 支持将多个维度映射到标签通道 + * - row: 支持将多个维度映射到行通道 + * - column: 支持将多个维度映射到列通道 + * - player: 支持将多个维度映射到播放器通道 + */ + encoding?: 'color' | 'detail' | 'tooltip' | 'label' | 'row' | 'column' | 'player' +} +``` + +关联 API：[BaseDimension](types.md#basedimension) + +## RadarAnimation + +源码：[packages/vseed/src/types/properties/config/animation/animation.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/animation/animation.ts) + +包导出：`RadarAnimation` + +```typescript +export interface RadarAnimation { + /** @description 是否启用雷达图动画 */ + enable?: boolean + /** @description 雷达图动画参数 */ + params?: RadarAnimationParams +} +``` + +关联 API：[RadarAnimationParams](types.md#radaranimationparams) + +## RadarAnimationLoop + +源码：[packages/vseed/src/types/properties/config/animation/animationLoop.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/animation/animationLoop.ts) + +包导出：`RadarAnimationLoop` + +```typescript +export interface RadarAnimationLoop { + /** @description 是否启用循环动画 */ + enable?: boolean + /** @description 循环动画间隔，单位为毫秒 */ + interval?: number + /** @description 雷达图氛围动画配置 */ + atmosphere?: PointAtmosphereConfig +} +``` + +关联 API：[PointAtmosphereConfig](types.md#pointatmosphereconfig) + +## RadarAnimationParams + +源码：[packages/vseed/src/types/properties/config/animation/animation.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/animation/animation.ts) + +包导出：`RadarAnimationParams` + +```typescript +export interface RadarAnimationParams { + /** @description 雷达图入场动画配置 */ + appear?: RadarAppearAnimation + /** @description 雷达图数据进入、更新、退出的共同动画配置 */ + update?: RadarUpdateAnimation + /** @description 雷达图循环动画配置 */ + loop?: RadarAnimationLoop +} +``` + +关联 API：[RadarAnimationLoop](types.md#radaranimationloop)、[RadarAppearAnimation](types.md#radarappearanimation)、[RadarUpdateAnimation](types.md#radarupdateanimation) + +## RadarAppearAnimation + +源码：[packages/vseed/src/types/properties/config/animation/animationEffect.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/animation/animationEffect.ts) + +包导出：`RadarAppearAnimation` + +```typescript +export interface RadarAppearAnimation extends AnimationEffectConfig { + /** @description 雷达图入场效果，支持径向和缩放动画 */ + effects?: ('radial' | 'scale')[] +} +``` + +关联 API：[AnimationEffectConfig](types.md#animationeffectconfig) + +## RadarConfig + +源码：[packages/vseed/src/types/properties/config/pie.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/pie.ts) + +包导出：`RadarConfig` + +```typescript +export type RadarConfig = z.infer +``` + +关联 API：[zRadarConfig](schemas.md#zradarconfig) + +## RadarDimension + +源码：[packages/vseed/src/types/properties/dimensions/radarDimension.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/dimensions/radarDimension.ts) + +包导出：`RadarDimension` + +```typescript +export type RadarDimension = BaseDimension & { + /** + * @description 维度映射的通道 + * - angle: 支持将多个维度映射到角度通道 + * - color: 支持将多个维度映射到颜色通道 + * - detail: 支持将多个维度映射到详情通道 + * - tooltip: 支持将多个维度映射到提示通道 + * - label: 支持将多个维度映射到标签通道 + * - row: 支持将多个维度映射到行通道 + * - column: 支持将多个维度映射到列通道 + */ + encoding?: 'angle' | 'color' | 'detail' | 'tooltip' | 'label' | 'row' | 'column' +} +``` + +关联 API：[BaseDimension](types.md#basedimension) + +## RadarMeasure + +源码：[packages/vseed/src/types/properties/measures/radarMeasure.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/measures/radarMeasure.ts) + +包导出：`RadarMeasure` + +```typescript +export type RadarMeasure = BaseMeasure & { + /** + * @description 指标映射的通道 + * - radius: 指标映射的半径 + * - color: 指标映射的颜色 + * - label: 指标映射的标签 + * - tooltip: 指标映射的提示 + */ + encoding?: 'radius' | 'color' | 'label' | 'tooltip' +} +``` + +关联 API：[BaseMeasure](types.md#basemeasure) + +## RadarUpdateAnimation + +源码：[packages/vseed/src/types/properties/config/animation/animationEffect.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/animation/animationEffect.ts) + +包导出：`RadarUpdateAnimation` + +```typescript +export interface RadarUpdateAnimation extends AnimationEffectConfig { + /** @description 雷达图更新效果，支持生长动画 */ + effects?: 'growth'[] +} +``` + +关联 API：[AnimationEffectConfig](types.md#animationeffectconfig) + +## RegionPadding + +源码：[packages/vseed/src/types/properties/regionPadding/regionPadding.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/regionPadding/regionPadding.ts) + +包导出：`RegionPadding` + +```typescript +export type RegionPadding = + | number + | { + top?: number + right?: number + bottom?: number + left?: number + } +``` + +## RegressionLineConfig + +源码：[packages/vseed/src/types/properties/regressionLine/zRegressionLine.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/regressionLine/zRegressionLine.ts) + +包导出：`RegressionLineConfig` + +```typescript +export type RegressionLineConfig = z.infer +``` + +关联 API：[zRegressionLine](schemas.md#zregressionline) + +## RoseConfig + +源码：[packages/vseed/src/types/properties/config/rose.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/rose.ts) + +包导出：`RoseConfig` + +```typescript +export type RoseConfig = z.infer +``` + +关联 API：[zRoseConfig](schemas.md#zroseconfig) + +## RoseDimension + +源码：[packages/vseed/src/types/properties/dimensions/roseDimension.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/dimensions/roseDimension.ts) + +包导出：`RoseDimension` + +```typescript +export type RoseDimension = RadarDimension +``` + +关联 API：[RadarDimension](types.md#radardimension) + +## RoseMeasure + +源码：[packages/vseed/src/types/properties/measures/radarMeasure.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/measures/radarMeasure.ts) + +包导出：`RoseMeasure` + +```typescript +export type RoseMeasure = RadarMeasure +``` + +关联 API：[RadarMeasure](types.md#radarmeasure) + +## RoseParallelConfig + +源码：[packages/vseed/src/types/properties/config/rose.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/rose.ts) + +包导出：`RoseParallelConfig` + +```typescript +export type RoseParallelConfig = z.infer +``` + +关联 API：[zRoseParallelConfig](schemas.md#zroseparallelconfig) + +## RoseParallelDimension + +源码：[packages/vseed/src/types/properties/dimensions/roseDimension.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/dimensions/roseDimension.ts) + +包导出：`RoseParallelDimension` + +```typescript +export type RoseParallelDimension = RadarDimension +``` + +关联 API：[RadarDimension](types.md#radardimension) + +## RoseParallelMeasure + +源码：[packages/vseed/src/types/properties/measures/radarMeasure.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/measures/radarMeasure.ts) + +包导出：`RoseParallelMeasure` + +```typescript +export type RoseParallelMeasure = RadarMeasure +``` + +关联 API：[RadarMeasure](types.md#radarmeasure) + +## RowOrColumnTotalConfig + +源码：[packages/vseed/src/types/properties/totals/totals.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/totals/totals.ts) + +包导出：`RowOrColumnTotalConfig` + +```typescript +/** + * @description 行或列的总计小计配置 + */ +export type RowOrColumnTotalConfig = { + /** + * @description 是否显示总计（总计行/列） + * @default false + */ + showGrandTotals?: boolean + /** + * @description 是否显示小计 + * @default false + */ + showSubTotals?: boolean + /** + * @description 小计的维度，按哪些维度进行小计分组 + * @default 首个维度 + * @example ['category', 'region'] + */ + subTotalsDimensions?: string[] +} +``` + +## RowWithFieldRes + +源码：[packages/vseed/src/types/dataSelector/selector.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/dataSelector/selector.ts) + +包导出：`RowWithFieldRes` + +```typescript +/** + * 行索引与字段组合的数据结构 + * @description 用于表示动态筛选器返回的结果，指向原始数据中特定行的特定字段 + */ +export type RowWithFieldRes = { + /** + * 原始数据项的行索引 + * @description 从 0 开始计数，对应数据源中数据项的位置 + */ + __row_index: number + /** + * 字段名称 + * @description + * - 具体字段名：表示该行中的某个特定字段 + * - '*'：表示该行的所有字段（整行） + */ + field: string | '*' +} +``` + +## SankeyConfig + +源码：[packages/vseed/src/types/properties/config/sankey.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/sankey.ts) + +包导出：`SankeyConfig` + +```typescript +export type SankeyConfig = z.infer +``` + +关联 API：[zSankeyConfig](schemas.md#zsankeyconfig) + +## SankeyDimension + +源码：[packages/vseed/src/types/properties/dimensions/sankeyDimension.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/dimensions/sankeyDimension.ts) + +包导出：`SankeyDimension` + +```typescript +export type SankeyDimension = BaseDimension & { + /** + * @description 维度映射的通道 + * - source: 支持将多个维度映射到 source 通道，advanced 阶段会拼接为上游节点路径 + * - target: 支持将多个维度映射到 target 通道，advanced 阶段会拼接为下游节点路径 + * - color: 支持将多个维度映射到颜色通道，用于生成 sankey 的颜色分类键 + * - detail: 支持将多个维度映射到明细通道 + * - label: 支持将多个维度映射到标签通道 + * - tooltip: 支持将多个维度映射到提示通道 + * - row: 支持将多个维度映射到行通道，用于 pivot chart + * - column: 支持将多个维度映射到列通道，用于 pivot chart + */ + encoding?: 'source' | 'target' | 'color' | 'detail' | 'label' | 'tooltip' | 'row' | 'column' +} +``` + +关联 API：[BaseDimension](types.md#basedimension) + +## SankeyMeasure + +源码：[packages/vseed/src/types/properties/measures/sankeyMeasure.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/measures/sankeyMeasure.ts) + +包导出：`SankeyMeasure` + +```typescript +export type SankeyMeasure = BaseMeasure & { + /** + * @description 指标映射的通道 + * - size: 指标映射到边宽/流量大小通道 + * - detail: 指标映射到明细通道 + * - label: 指标映射到标签通道 + * - tooltip: 指标映射到提示通道 + */ + encoding?: 'size' | 'detail' | 'label' | 'tooltip' +} +``` + +关联 API：[BaseMeasure](types.md#basemeasure) + +## ScatterAnimation + +源码：[packages/vseed/src/types/properties/config/animation/animation.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/animation/animation.ts) + +包导出：`ScatterAnimation` + +```typescript +export interface ScatterAnimation { + /** @description 是否启用散点图动画 */ + enable?: boolean + /** @description 散点图动画参数 */ + params?: ScatterAnimationParams +} +``` + +关联 API：[ScatterAnimationParams](types.md#scatteranimationparams) + +## ScatterAnimationLoop + +源码：[packages/vseed/src/types/properties/config/animation/animationLoop.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/animation/animationLoop.ts) + +包导出：`ScatterAnimationLoop` + +```typescript +export interface ScatterAnimationLoop { + /** @description 是否启用循环动画 */ + enable?: boolean + /** @description 循环动画间隔，单位为毫秒 */ + interval?: number + /** @description 散点图循环动画配置 */ + loop?: ScatterLoopAnimation + /** @description 散点图氛围动画配置 */ + atmosphere?: PointAtmosphereConfig +} +``` + +关联 API：[PointAtmosphereConfig](types.md#pointatmosphereconfig)、[ScatterLoopAnimation](types.md#scatterloopanimation) + +## ScatterAnimationParams + +源码：[packages/vseed/src/types/properties/config/animation/animation.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/animation/animation.ts) + +包导出：`ScatterAnimationParams` + +```typescript +export interface ScatterAnimationParams { + /** @description 散点图入场动画配置 */ + appear?: ScatterAppearAnimation + /** @description 散点图数据进入、更新、退出的共同动画配置 */ + update?: ScatterUpdateAnimation + /** @description 散点图循环动画配置 */ + loop?: ScatterAnimationLoop +} +``` + +关联 API：[ScatterAnimationLoop](types.md#scatteranimationloop)、[ScatterAppearAnimation](types.md#scatterappearanimation)、[ScatterUpdateAnimation](types.md#scatterupdateanimation) + +## ScatterAppearAnimation + +源码：[packages/vseed/src/types/properties/config/animation/animationEffect.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/animation/animationEffect.ts) + +包导出：`ScatterAppearAnimation` + +```typescript +export interface ScatterAppearAnimation extends AnimationEffectConfig { + /** @description 散点图入场效果，支持生长和缩放动画 */ + effects?: ('growth' | 'scale')[] +} +``` + +关联 API：[AnimationEffectConfig](types.md#animationeffectconfig) + +## ScatterConfig + +源码：[packages/vseed/src/types/properties/config/scatter.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/scatter.ts) + +包导出：`ScatterConfig` + +```typescript +export type ScatterConfig = z.infer +``` + +关联 API：[zScatterConfig](schemas.md#zscatterconfig) + +## ScatterDimension + +源码：[packages/vseed/src/types/properties/dimensions/scatterDimension.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/dimensions/scatterDimension.ts) + +包导出：`ScatterDimension` + +```typescript +export type ScatterDimension = BaseDimension & { + /** + * @description 维度映射的通道 + * - color: 支持将多个维度映射到颜色通道 + * - detail: 支持将多个维度映射到详情通道 + * - tooltip: 支持将多个维度映射到提示通道 + * - label: 支持将多个维度映射到标签通道 + * - row: 支持将多个维度映射到行通道 + * - column: 支持将多个维度映射到列通道 + */ + encoding?: 'color' | 'detail' | 'tooltip' | 'label' | 'row' | 'column' +} +``` + +关联 API：[BaseDimension](types.md#basedimension) + +## ScatterLoopAnimation + +源码：[packages/vseed/src/types/properties/config/animation/animationEffect.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/animation/animationEffect.ts) + +包导出：`ScatterLoopAnimation` + +```typescript +export interface ScatterLoopAnimation extends AnimationEffectConfig { + /** @description 散点图循环效果 */ + effects?: ScatterLoopEffect[] +} +``` + +关联 API：[AnimationEffectConfig](types.md#animationeffectconfig)、[ScatterLoopEffect](types.md#scatterloopeffect) + +## ScatterLoopEffect + +源码：[packages/vseed/src/types/properties/config/animation/animationEffect.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/animation/animationEffect.ts) + +包导出：`ScatterLoopEffect` + +```typescript +export type ScatterLoopEffect = 'growth' | 'scale' | 'none' +``` + +## ScatterMeasure + +源码：[packages/vseed/src/types/properties/measures/scatterMeasure.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/measures/scatterMeasure.ts) + +包导出：`ScatterMeasure` + +```typescript +export type ScatterMeasure = BaseMeasure & { + /** + * @description 指标映射的通道 + * - xAxis: 指标映射的x轴 + * - yAxis: 指标映射的y轴 + * - size: 指标映射的大小 + * - color: 指标映射的颜色 + * - label: 指标映射的标签 + * - tooltip: 指标映射的提示 + */ + encoding?: 'xAxis' | 'yAxis' | 'size' | 'color' | 'label' | 'tooltip' +} +``` + +关联 API：[BaseMeasure](types.md#basemeasure) + +## ScatterUpdateAnimation + +源码：[packages/vseed/src/types/properties/config/animation/animationEffect.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/animation/animationEffect.ts) + +包导出：`ScatterUpdateAnimation` + +```typescript +export interface ScatterUpdateAnimation extends AnimationEffectConfig { + /** @description 散点图更新效果，支持生长动画 */ + effects?: 'growth'[] +} +``` + +关联 API：[AnimationEffectConfig](types.md#animationeffectconfig) + +## Selector + +源码：[packages/vseed/src/types/dataSelector/selector.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/dataSelector/selector.ts) + +包导出：`Selector` + +```typescript +export type Selector = ValueSelector | PartialDatumSelector | MeasureSelector | DimensionSelector +``` + +关联 API：[DimensionSelector](types.md#dimensionselector)、[MeasureSelector](types.md#measureselector)、[PartialDatumSelector](types.md#partialdatumselector)、[ValueSelector](types.md#valueselector) + +## Selectors + +源码：[packages/vseed/src/types/dataSelector/selector.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/dataSelector/selector.ts) + +包导出：`Selectors` + +```typescript +export type Selectors = Array +``` + +关联 API：[Selector](types.md#selector) + +## Sort + +源码：[packages/vseed/src/types/properties/analysis/sort.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/analysis/sort.ts) + +包导出：`Sort` + +```typescript +/** + * @description 类目轴排序配置, 支持根据维度或指标排序, 以及自定义排序顺序 + * @default {} + * @example + * - order:'asc' + * - orderBy:'date' + * 或 + * - customOrder:['2019', '2020', '2021'] + */ +export type Sort = { + /** + * @description 排序顺序, 可选值为 'asc' 或 'desc' + * @enum ['asc', 'desc'] + * @example order:'asc' + */ + order?: 'asc' | 'desc' + /** + * @description 排序依赖的字段, 可以是维度id或指标id + * @example + * - orderBy:'date' + * - orderBy:'profit' + */ + orderBy?: string + /** + * @description 自定义排序顺序, 该顺序将直接应用至类目轴 + */ + customOrder?: string[] +} +``` + +## SortLegend + +源码：[packages/vseed/src/types/properties/analysis/sortLegend.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/analysis/sortLegend.ts) + +包导出：`SortLegend` + +```typescript +/** + * @description 图例排序配置, 支持根据维度或指标排序, 以及自定义排序顺序; 排序数组遵循从左到右或从上到下的顺序 + * @default {} + * @example + * - order:'asc' + * - orderBy:'date' + * 或 + * - customOrder:['2019', '2020', '2021'] + */ +export type SortLegend = { + /** + * @description 排序顺序, 可选值为 'asc' 或 'desc' + * @default 'asc' + * @enum ['asc', 'desc'] + * @example order:'asc' + */ + order?: 'asc' | 'desc' + /** + * @description 排序依赖的字段, 可以是维度id或指标id + * @example + * - orderBy:'date' + * - orderBy:'profit' + */ + orderBy?: string + /** + * @description 自定义排序顺序, 该顺序将直接应用至图例, 升序从左到右或从上到下, 降序从右到左或从下到上 + */ + customOrder?: string[] +} +``` + +## StackCornerRadius + +源码：[packages/vseed/src/types/properties/config/stackCornerRadius/stackCornerRadius.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/stackCornerRadius/stackCornerRadius.ts) + +包导出：`StackCornerRadius` + +```typescript +export type StackCornerRadius = z.infer +``` + +关联 API：[zStackCornerRadius](schemas.md#zstackcornerradius) + +## SunburstConfig + +源码：[packages/vseed/src/types/properties/config/sunburst.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/sunburst.ts) + +包导出：`SunburstConfig` + +```typescript +export type SunburstConfig = z.infer +``` + +关联 API：[zSunburstConfig](schemas.md#zsunburstconfig) + +## TableConfig + +源码：[packages/vseed/src/types/properties/config/table.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/table.ts) + +包导出：`TableConfig` + +```typescript +export type TableConfig = z.infer +``` + +关联 API：[zTableConfig](schemas.md#ztableconfig) + +## TableDimension + +源码：[packages/vseed/src/types/properties/dimensions/tableDimension.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/dimensions/tableDimension.ts) + +包导出：`TableDimension` + +```typescript +export type TableDimension = BaseDimension & { + /** + * @description 维度映射的通道 + * - row: 支持将多个维度映射到行通道 + * - column: 支持将多个维度映射到列通道 + */ + encoding?: 'row' | 'column' +} +``` + +关联 API：[BaseDimension](types.md#basedimension) + +## TableDynamicFilter + +源码：[packages/vseed/src/types/dataSelector/selector.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/dataSelector/selector.ts) + +包导出：`TableDynamicFilter` + +```typescript +/** + * 表格动态筛选器配置 + * @description 通过 AI 生成的 JavaScript 代码实现表格单元格级别的精确筛选 + * @environment 仅支持浏览器环境（需要 Web Worker），Node.js 环境将使用 fallback + */ +export interface TableDynamicFilter { + type: 'row-with-field' + /** + * 用户的筛选需求描述（自然语言） + * @example "高亮销售额大于1000的单元格" + * @example "高亮每行中最大值所在的单元格" + */ + description?: string + /** + * AI 生成的 JavaScript 筛选代码 + * @description + * - 只能使用内置工具函数（通过 _ 或 R 访问） + * - 输入参数: data (数组)，每个 item 包含 _index 字段表示行号 + * - 必须返回单元格选择器数组: Array<{ __row_index: number, field: string }> + * - field 为 "*" 时表示整行高亮 + * - 禁止使用: eval, Function, 异步操作, DOM API, 网络请求 + * + * @example Top N 筛选 + * dynamicFilter = { + * type: 'row-with-field', + * description: '高亮销售额最高的前3个产品', + * code: ` + * const sorted = _.sortBy(data, 'sales'); + * const reversed = [...sorted].reverse(); + * const result = _.take(reversed, 3); + * return _.flatten( + * _.map(result, item => [ + * { __row_index: item._index, field: 'product' }, + * { __row_index: item._index, field: 'sales' } + * ]) + * ); + * `, + * enabled: true + * } + * + * @example 多条件筛选 + * dynamicFilter = { + * type: 'row-with-field', + * description: '高亮利润率大于20%且销售额超过5000的产品', + * code: ` + * const matched = _.filter(data, item => { + * const profitRate = (item.profit / item.sales) * 100; + * return profitRate > 20 && item.sales > 5000; + * }); + * return _.flatten( + * _.map(matched, item => [ + * { __row_index: item._index, field: 'product' }, + * { __row_index: item._index, field: 'sales' } + * ]) + * ); + * `, + * enabled: true + * } + * + * @example 相对值筛选 + * dynamicFilter = { * + * type: 'row-with-field', + * description: '高亮销售额高于平均值的产品', + * code: ` + * const avgSales = _.meanBy(data, 'sales'); + * const matched = _.filter(data, item => item.sales > avgSales); + * return _.flatten( + * _.map(matched, item => [ + * { __row_index: item._index, field: 'product' }, + * { __row_index: item._index, field: 'sales' } + * ]) + * ); + * `, + * enabled: true + * } + * + * @example 分组筛选 + * dynamicFilter = { + * type: 'row-with-field', + * description: '每个区域中销售额最高的产品', + * code: ` + * const grouped = _.groupBy(data, 'region'); + * const topByRegion = _.map(_.values(grouped), group => _.maxBy(group, 'sales')); + * return _.flatten( + * _.map(topByRegion, item => [ + * { __row_index: item._index, field: 'product' }, + * { __row_index: item._index, field: 'sales' } + * ]) + * ); + * `, + * enabled: true + * } + * + * @example 整行高亮 + * dynamicFilter = { + * description: '高亮销售额大于利润的整行', + * code: ` + * const matched = _.filter(data, item => item.sales > item.profit); + * return matched.map(item => ({ + * __row_index: item._index, + * field: '*' + * })); + * `, + * enabled: true + * } + */ + code: string + /** + * 代码执行失败或环境不支持时的降级方案 + */ + fallback?: Selector | Selectors + /** + * 动态筛选执行结果（运行期字段） + * @description prepare() 阶段写入，运行时只读 + */ + result?: DynamicFilterExecutionResult +} +``` + +关联 API：[DynamicFilterExecutionResult](types.md#dynamicfilterexecutionresult)、[RowWithFieldRes](types.md#rowwithfieldres)、[Selector](types.md#selector)、[Selectors](types.md#selectors) + +## TableMeasure + +源码：[packages/vseed/src/types/properties/measures/tableMeasure.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/measures/tableMeasure.ts) + +包导出：`TableMeasure` + +```typescript +export type TableMeasure = BaseMeasure & { + /** + * @description 指标映射的通道 + * - column: 指标列 + */ + encoding?: 'column' +} +``` + +关联 API：[BaseMeasure](types.md#basemeasure) + +## Theme + +源码：[packages/vseed/src/types/properties/theme/theme.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/theme/theme.ts) + +包导出：`Theme` + +```typescript +/** + * 主题 + * @default light + * @description 内置 light、dark 两种主题, 新的主题可以通过registerTheme自定义主题. + */ +export type Theme = Light | Dark | string +``` + +关联 API：[Dark](types.md#dark)、[Light](types.md#light) + +## TimeFormat + +源码：[packages/vseed/src/types/properties/format/timeFormat.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/format/timeFormat.ts) + +包导出：`TimeFormat` + +```typescript +export interface TimeFormat { + /** + * @description 时间粒度，决定日期展示精度 + */ + type: TimeGranularity +} +``` + +关联 API：[TimeGranularity](types.md#timegranularity) + +## TimeGranularity + +源码：[packages/vseed/src/types/properties/format/timeFormat.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/format/timeFormat.ts) + +包导出：`TimeGranularity` + +```typescript +export type TimeGranularity = 'year' | 'quarter' | 'month' | 'week' | 'day' | 'hour' | 'minute' | 'second' +``` + +## Tooltip + +源码：[packages/vseed/src/types/properties/config/tooltip/tooltip.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/tooltip/tooltip.ts) + +包导出：`Tooltip` + +```typescript +export type Tooltip = { + /** + * 提示信息功能是否开启 + * @default true + */ + enable: boolean +} +``` + +## TooltipConfig + +源码：[packages/vseed/src/types/properties/config/tooltip/tooltip.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/tooltip/tooltip.ts) + +包导出：`TooltipConfig` + +```typescript +export type TooltipConfig = z.infer +``` + +关联 API：[zTooltip](schemas.md#ztooltip) + +## TotalType + +源码：[packages/vseed/src/types/properties/aggregation/aggregation.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/aggregation/aggregation.ts) + +包导出：`TotalType` + +```typescript +/** + * 表格汇总行的类型 + * - 'sum': 求和 + * - 'avg': 平均值 + * - 'max': 最大值 + * - 'min': 最小值 + * - 'count': 计数 + */ +export type TotalType = 'sum' | 'avg' | 'max' | 'min' | 'count' +``` + +## TreeMapConfig + +源码：[packages/vseed/src/types/properties/config/treeMap.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/treeMap.ts) + +包导出：`TreeMapConfig` + +```typescript +export type TreeMapConfig = z.infer +``` + +关联 API：[zTreeMapConfig](schemas.md#ztreemapconfig) + +## UnfoldInfo + +源码：[packages/vseed/src/types/properties/datasetReshapeInfo/datasetReshapeInfo.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/datasetReshapeInfo/datasetReshapeInfo.ts) + +包导出：`UnfoldInfo` + +```typescript +export type UnfoldInfo = { + encodingX: string + encodingY: string + encodingColor: string + encodingColorId: string + encodingDetail: string + encodingAngle: string + encodingPlayer: string + encodingHierarchy: string + encodingSource?: string + encodingTarget?: string + colorItems: string[] + colorIdMap: Record< + string, + { + id: string + alias: string + } + > +} +``` + +## ValueDynamicFilter + +源码：[packages/vseed/src/types/dataSelector/selector.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/dataSelector/selector.ts) + +包导出：`ValueDynamicFilter` + +````typescript +export interface ValueDynamicFilter { + type: 'value' + /** + * 用户的筛选需求描述（自然语言） + * @example "获取销售额最高的值作为标注线参考" + * @example "计算平均销售额用于标注线" + */ + description?: string + /** + * AI 生成的 JavaScript 筛选代码 + * @description + * - 只能使用内置工具函数（通过 _ 或 R 访问） + * - 输入参数: data (数组) + * - 必须返回单个数值或字符串: number | string + * - 适用场景：标注线（水平线、垂直线）需要的动态数值 + * - 禁止使用: eval, Function, 异步操作, DOM API, 网络请求 + * + * @example 获取销售额最大值作为标注线值 + * ```javascript + * const maxSales = _.maxBy(data, 'sales')?.sales; + * return maxSales || 0; + * ``` + * + * @example 计算平均值用于标注线 + * ```javascript + * const avgSales = _.meanBy(data, 'sales'); + * return _.round(avgSales, 2); + * ``` + * + * @example 获取分位数作为标注线 + * ```javascript + * const sorted = _.sortBy(data, 'sales'); + * const index = Math.floor(sorted.length * 0.75); + * return sorted[index]?.sales || 0; + * ``` + * + * @example 根据条件计算目标值 + * ```javascript + * const currentYearTotal = _.sumBy( + * _.filter(data, item => item.year === 2024), + * 'sales' + * ); + * return currentYearTotal; + * ``` + */ + code: string + /** + * 代码执行失败或环境不支持时的降级方案 + */ + fallback?: string | number + /** + * 动态筛选执行结果（运行期字段） + * @description prepare() 阶段写入，运行时只读 + */ + result?: { + success: boolean + data?: number | string + } +} +```` + +## ValueSelector + +源码：[packages/vseed/src/types/dataSelector/selector.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/dataSelector/selector.ts) + +包导出：`ValueSelector` + +```typescript +export type ValueSelector = string | number +``` + +## WhiskersConfig + +源码：[packages/vseed/src/types/properties/config/whiskers/index.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/whiskers/index.ts) + +包导出：`WhiskersConfig` + +```typescript +export type WhiskersConfig = z.infer +``` + +关联 API：[zWhiskersConfig](schemas.md#zwhiskersconfig) + +## XBandAxis + +源码：[packages/vseed/src/types/properties/config/axes/bandAxis.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/axes/bandAxis.ts) + +包导出：`XBandAxis` + +```typescript +export type XBandAxis = { + /** + * @description 轴是否可见 + */ + visible?: boolean + /** + * @description 轴是否反向展示, 仅对数值轴生效 + */ + inverse?: boolean + /** + * @description 是否在坐标轴上强制显示 0 值, 当配置了 min 和 max, 该配置项失效, 仅对数值轴生效 + */ + zero?: boolean + /** + * @description 轴标签, 自动隐藏, 2个标签若重叠(间隔小于autoHideGap), 则自动隐藏导致重叠的标签. 仅对类目轴生效. + */ + labelAutoHide?: boolean + /** + * @description 轴标签, 自动隐藏间隔, 若2个文本标签的间隔小于autoHideGap, 则自动隐藏导致重叠的标签. 仅对类目轴生效. + * autoHide开启时, 使用autoHide, 设置在autoHideSeparation上 + * autoHide关闭时, 使用sampling采样, 设置在minGap上 + */ + labelAutoHideGap?: number + /** + * @description 轴标签, 自动旋转, 当标签宽度超过轴长度时, 自动旋转标签. 仅对类目轴生效. + */ + labelAutoRotate?: boolean + /** + * @description 轴标签, 自动旋转角度范围, 当自动旋转开启时, 标签旋转角度范围. 仅对类目轴生效. + */ + labelAutoRotateAngleRange?: number[] + /** + * @description 轴标签, 自动限制长度, 当标签宽度超过轴长度时, 超出部分省略号表示, 鼠标悬浮后可见标签, 自动限制标签宽度. 仅对类目轴生效. + */ + labelAutoLimit?: boolean + /** + * @description 轴标签, 自动限制长度的最大长度, 当标签文本长度超过最大长度时, 超出部分省略号表示, 鼠标悬浮后可见标签. 仅对类目轴生效. + */ + labelAutoLimitLength?: number + /** + * @description X轴刻度标签 + */ + label?: { + /** + * @description 标签是否可见 + */ + visible?: boolean + /** + * @description 标签颜色 + */ + labelColor?: string + /** + * @description 标签字体大小 + */ + labelFontSize?: number + /** + * @description 标签字体粗细 + */ + labelFontWeight?: number + /** + * @description 标签旋转角度 + */ + labelAngle?: number + } + /** + * @description X轴线 + */ + line?: { + /** + * @description 轴线是否可见 + */ + visible?: boolean + /** + * @description 轴线颜色 + */ + lineColor?: string + /** + * @description 轴线宽度 + */ + lineWidth?: number + } + /** + * @description X轴刻度 + */ + tick?: { + /** + * 刻度是否可见 + * @default true + */ + visible?: boolean + /** + * 刻度是否朝内 + * @default false + */ + tickInside?: boolean + /** + * 刻度颜色 + */ + tickColor?: string + /** + * 刻度尺寸 + */ + tickSize?: number + } + /** + * @description X轴标题 + */ + title?: { + /** + * 标题是否可见 + * @default false + */ + visible?: boolean + /** + * 标题文本, 默认跟随字段配置 + */ + titleText?: string + /** + * 标题颜色 + */ + titleColor?: string + /** + * 标题字体大小 + */ + titleFontSize?: number + /** + * 标题字体粗细 + */ + titleFontWeight?: number + } + /** + * @description X轴网格线 + */ + grid?: { + visible?: boolean + /** + * 网格线颜色 + */ + gridColor?: string + /** + * 网格线宽度 + */ + gridWidth?: number + /** + * 网格线类型 + */ + gridLineDash?: number[] + } + /** + * @description X轴动画配置 + */ + animation?: { + /** + * @description 动画时长 + */ + duration?: number + /** + * @description 动画 easing 函数 + */ + easing?: string + } +} +``` + +## XLinearAxis + +源码：[packages/vseed/src/types/properties/config/axes/linearAxis.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/axes/linearAxis.ts) + +包导出：`XLinearAxis` + +```typescript +export type XLinearAxis = { + /** + * @description 轴是否可见 + */ + visible?: boolean + /** + * @description 轴的最小值, 优先级高于 nice 与 zero + */ + min?: number + /** + * @description 轴的最大值, 优先级高于 nice 与 zero, 如果为true, 则自动根据数据范围计算最大值 + */ + max?: number | boolean + /** + * @description 是否使用对数轴, 仅对数值轴生效 + */ + log?: boolean + /** + * @description 对数轴的底数, 仅对数值轴生效 + */ + logBase?: number + /** + * @description 是否自动调整轴的刻度间隔，使刻度标签更易读, 当配置了 min 和 max, 该配置项失效, 仅对数值轴生效 + */ + nice?: boolean + /** + * @description 轴是否反向展示, 仅对数值轴生效 + */ + inverse?: boolean + /** + * @description 是否在坐标轴上强制显示 0 值, 当配置了 min 和 max, 该配置项失效, 仅对数值轴生效 + */ + zero?: boolean + /** + * @description 是否自动格式化数值轴的刻度标签, 仅对数值轴生效, autoFormat 为 true 时, numFormat 配置失效 + */ + autoFormat?: boolean + /** + * @description 数值轴的数字格式化, 仅对数值轴生效, 优先级低于 autoFormat + */ + numFormat?: NumFormat + /** + * @description X轴刻度标签 + */ + label?: { + /** + * @description 标签是否可见 + */ + visible?: boolean + /** + * @description 标签颜色 + */ + labelColor?: string + /** + * @description 标签字体大小 + */ + labelFontSize?: number + /** + * @description 标签字体粗细 + */ + labelFontWeight?: number + /** + * @description 标签旋转角度 + */ + labelAngle?: number + } + /** + * @description X轴线 + */ + line?: { + /** + * @description 轴线是否可见 + */ + visible?: boolean + /** + * @description 轴线颜色 + */ + lineColor?: string + /** + * @description 轴线宽度 + */ + lineWidth?: number + } + /** + * @description X轴刻度 + */ + tick?: { + /** + * 刻度是否可见 + * @default true + */ + visible?: boolean + /** + * 刻度是否朝内 + * @default false + */ + tickInside?: boolean + /** + * 刻度颜色 + */ + tickColor?: string + /** + * 刻度尺寸 + */ + tickSize?: number + } + /** + * @description X轴标题 + */ + title?: { + /** + * 标题是否可见 + * @default false + */ + visible?: boolean + /** + * 标题文本, 默认跟随字段配置 + */ + titleText?: string + /** + * 标题颜色 + */ + titleColor?: string + /** + * 标题字体大小 + */ + titleFontSize?: number + /** + * 标题字体粗细 + */ + titleFontWeight?: number + } + /** + * @description X轴网格线 + */ + grid?: { + visible?: boolean + /** + * 网格线颜色 + */ + gridColor?: string + /** + * 网格线宽度 + */ + gridWidth?: number + /** + * 网格线类型 + */ + gridLineDash?: number[] + } + /** + * @description Y轴动画配置 + */ + animation?: { + /** + * @description 动画时长 + */ + duration?: number + /** + * @description 动画 easing 函数 + */ + easing?: string + } +} +``` + +关联 API：[NumFormat](types.md#numformat) + +## YBandAxis + +源码：[packages/vseed/src/types/properties/config/axes/bandAxis.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/axes/bandAxis.ts) + +包导出：`YBandAxis` + +```typescript +export type YBandAxis = { + /** + * @description 轴是否可见 + */ + visible?: boolean + /** + * @description 轴是否反向展示, 仅对数值轴生效 + */ + inverse?: boolean + /** + * @description 是否在坐标轴上强制显示 0 值, 当配置了 min 和 max, 该配置项失效, 仅对数值轴生效 + */ + zero?: boolean + /** + * @description 轴标签, 自动隐藏, 2个标签若重叠(间隔小于autoHideGap), 则自动隐藏导致重叠的标签. 仅对类目轴生效. + */ + labelAutoHide?: boolean + /** + * @description 轴标签, 自动隐藏间隔, 若2个文本标签的间隔小于autoHideGap, 则自动隐藏导致重叠的标签. 仅对类目轴生效. + * autoHide开启时, 使用autoHide, 设置在autoHideSeparation上 + * autoHide关闭时, 使用sampling采样, 设置在minGap上 + */ + labelAutoHideGap?: number + /** + * @description 轴标签, 自动旋转, 当标签宽度超过轴长度时, 自动旋转标签. 仅对类目轴生效. + */ + labelAutoRotate?: boolean + /** + * @description 轴标签, 自动旋转角度范围, 当自动旋转开启时, 标签旋转角度范围. 仅对类目轴生效. + */ + labelAutoRotateAngleRange?: number[] + /** + * @description 轴标签, 自动限制长度, 当标签宽度超过轴长度时, 超出部分省略号表示, 鼠标悬浮后可见标签, 自动限制标签宽度. 仅对类目轴生效. + */ + labelAutoLimit?: boolean + /** + * @description 轴标签, 自动限制长度的最大长度, 当标签文本长度超过最大长度时, 超出部分省略号表示, 鼠标悬浮后可见标签. 仅对类目轴生效. + */ + labelAutoLimitLength?: number + /** + * @description X轴刻度标签 + */ + label?: { + /** + * @description 标签是否可见 + */ + visible?: boolean + /** + * @description 标签颜色 + */ + labelColor?: string + /** + * @description 标签字体大小 + */ + labelFontSize?: number + /** + * @description 标签字体粗细 + */ + labelFontWeight?: number + /** + * @description 标签旋转角度 + */ + labelAngle?: number + } + /** + * @description X轴线 + */ + line?: { + /** + * @description 轴线是否可见 + */ + visible?: boolean + /** + * @description 轴线颜色 + */ + lineColor?: string + /** + * @description 轴线宽度 + */ + lineWidth?: number + } + /** + * @description X轴刻度 + */ + tick?: { + /** + * 刻度是否可见 + * @default true + */ + visible?: boolean + /** + * 刻度是否朝内 + * @default false + */ + tickInside?: boolean + /** + * 刻度颜色 + */ + tickColor?: string + /** + * 刻度尺寸 + */ + tickSize?: number + } + /** + * @description X轴标题 + */ + title?: { + /** + * 标题是否可见 + * @default false + */ + visible?: boolean + /** + * 标题文本, 默认跟随字段配置 + */ + titleText?: string + /** + * 标题颜色 + */ + titleColor?: string + /** + * 标题字体大小 + */ + titleFontSize?: number + /** + * 标题字体粗细 + */ + titleFontWeight?: number + } + /** + * @description X轴网格线 + */ + grid?: { + visible?: boolean + /** + * 网格线颜色 + */ + gridColor?: string + /** + * 网格线宽度 + */ + gridWidth?: number + /** + * 网格线类型 + */ + gridLineDash?: number[] + } + /** + * @description Y轴动画配置 + */ + animation?: { + /** + * @description 动画时长 + */ + duration?: number + /** + * @description 动画 easing 函数 + */ + easing?: string + } +} +``` + +## YLinearAxis + +源码：[packages/vseed/src/types/properties/config/axes/linearAxis.ts](https://github.com/VisActor/VBI/blob/main/packages/vseed/src/types/properties/config/axes/linearAxis.ts) + +包导出：`YLinearAxis` + +```typescript +export type YLinearAxis = { + /** + * @description 轴是否可见 + */ + visible?: boolean + /** + * @description 轴的最小值, 优先级高于 nice 与 zero + */ + min?: number + /** + * @description 轴的最大值, 优先级高于 nice 与 zero, 如果为true, 则自动根据数据范围计算最大值 + */ + max?: number | boolean + /** + * @description 是否使用对数轴, 仅对数值轴生效 + */ + log?: boolean + /** + * @description 对数轴的底数, 仅对数值轴生效 + */ + logBase?: number + /** + * @description 是否自动调整轴的刻度间隔，使刻度标签更易读, 当配置了 min 和 max, 该配置项失效, 仅对数值轴生效 + */ + nice?: boolean + /** + * @description 轴是否反向展示, 仅对数值轴生效 + */ + inverse?: boolean + /** + * @description 是否在坐标轴上强制显示 0 值, 当配置了 min 和 max, 该配置项失效, 仅对数值轴生效 + */ + zero?: boolean + /** + * @description 是否自动格式化数值轴的刻度标签, 仅对数值轴生效, autoFormat 为 true 时, numFormat 配置失效 + */ + autoFormat?: boolean + /** + * @description 数值轴的数字格式化, 仅对数值轴生效, 优先级低于 autoFormat + */ + numFormat?: NumFormat + /** + * @description X轴刻度标签 + */ + label?: { + /** + * @description 标签是否可见 + */ + visible?: boolean + /** + * @description 标签颜色 + */ + labelColor?: string + /** + * @description 标签字体大小 + */ + labelFontSize?: number + /** + * @description 标签字体粗细 + */ + labelFontWeight?: number + /** + * @description 标签旋转角度 + */ + labelAngle?: number + } + /** + * @description X轴线 + */ + line?: { + /** + * @description 轴线是否可见 + */ + visible?: boolean + /** + * @description 轴线颜色 + */ + lineColor?: string + /** + * @description 轴线宽度 + */ + lineWidth?: number + } + /** + * @description X轴刻度 + */ + tick?: { + /** + * 刻度是否可见 + * @default true + */ + visible?: boolean + /** + * 刻度是否朝内 + * @default false + */ + tickInside?: boolean + /** + * 刻度颜色 + */ + tickColor?: string + /** + * 刻度尺寸 + */ + tickSize?: number + } + /** + * @description X轴标题 + */ + title?: { + /** + * 标题是否可见 + * @default false + */ + visible?: boolean + /** + * 标题文本, 默认跟随字段配置 + */ + titleText?: string + /** + * 标题颜色 + */ + titleColor?: string + /** + * 标题字体大小 + */ + titleFontSize?: number + /** + * 标题字体粗细 + */ + titleFontWeight?: number + } + /** + * @description X轴网格线 + */ + grid?: { + visible?: boolean + /** + * 网格线颜色 + */ + gridColor?: string + /** + * 网格线宽度 + */ + gridWidth?: number + /** + * 网格线类型 + */ + gridLineDash?: number[] + } + /** + * @description Y轴动画配置 + */ + animation?: { + /** + * @description 动画时长 + */ + duration?: number + /** + * @description 动画 easing 函数 + */ + easing?: string + } +} +``` + +关联 API：[NumFormat](types.md#numformat) diff --git a/skills/light-dashboard/references/best-practices/design.md b/skills/light-dashboard/references/best-practices/design.md new file mode 100644 index 0000000000..4d430903b8 --- /dev/null +++ b/skills/light-dashboard/references/best-practices/design.md @@ -0,0 +1,294 @@ +# 视觉设计最佳实践 + +适用于轻量 Dashboard、指标卡和趋势图。参考 [24 份模板](../../SKILL.md#24-份模板索引)的主题与背景变化，以及[轻量看板示例](../../templates/example.html)的色板派生和玻璃透光实现。本文集中维护设计差异、色板、颜色变量和背景实现；布局与入场动效见[设计与布局最佳实践](./layout.md)，数字层级与迷你图见[指标卡最佳实践](./metric-card.md)。颜色选择器是示例的演示能力，成品仅在用户需要时提供。 + +## 相近风格中的差异设计 + +先实际查看最贴近任务的模板 HTML 与截图，再比较另一份不同结构或主题的参考。保留轻量、克制、数据优先的共同风格，同时独立决定下列设计；不把一套主辅网格、蓝紫渐变和圆角阴影当成所有任务的默认答案。已有品牌或宿主规范优先，在其允许范围内变化。 + +| 维度 | 可以变化的设计 | 保持的质量 | +| ------------ | ---------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------- | +| 布局骨架 | 左主右辅、右主左辅、全宽主区后接指标行、指标先行、分段叙事；按问题调整阅读顺序与主辅面积。 | 一个清晰主问题，相关信息成组，密度适中；不为变化编造时间轴。 | +| 背景与阅读面 | 近白暖灰纸面、冷灰细边线、低饱和外围渐变；改变冷暖、光源位置与渐变分布，卡片可用柔和阴影或克制边线。 | 内容底面稳定、文字与图形清楚；背景不抢主指标，不靠增加特效制造差异。 | +| 主题色 | 按语境选择蓝紫、陶土、珊瑚、灰玫瑰、琥珀、钢灰等；布局与颜色自由组合，不固定行业皮肤。 | 页面与图表统一，主强调色明确；正负、风险和类别仍按数据语义表达。 | +| 字体与细节 | 在整页统一的前提下选择界面式或报告式字体、圆角、边框和标题节奏。 | 同层级数字共用字号、字重和数位样式，不用忽大忽小制造变化。 | + +例如零售金额趋势页用全宽主图与珊瑚色，品类结构页可用右主左辅与石油蓝；能源长期观察采用琥珀纸面，部门比较采用湖蓝细边线。这些选择因分析重点而变，不是行业专属规则。暖色页面不必继续保留蓝紫背景；背景应与所选主题协调，也可保持纯净中性底色。 + +生成一组看板时并排查看缩略图：布局、背景、主题应形成可辨识的组合差异，而不是同一页换色。单页新设计也要说明相对参考保留了什么、为什么改变；不得以多样性为由降低图表、交互、字号层级或信息密度的质量。字号统一使用[数值字号规范](./metric-card.md#数值字号规范)，差异主要由结构、色彩与背景承担。 + +## 参考色板 + +提供八种柔和参考色。色号作为强调色的输入，浅背景、图标底色和辅助色由它派生；无需为每个预设分别维护整套样式。这些颜色是参考起点，不是可用颜色的完整清单；可根据当前场景、品牌、已有视觉风格和用户要求自行设计新的配色，遵循下方颜色层级与可读性原则。 + +**按需选择主色系，降低绿色系的选择优先级；没有明确需要时，不选择绿色作为主强调色或大面积背景的主色。** 先遵循用户指定配色与已有品牌、界面风格，再结合业务场景选择适合的色系。上下文未指定时，优先考虑合适的蓝、紫、粉、暖橙等非绿色系，也可设计新的配色；不要把任何一种替代色固定为所有 Dashboard 的默认色。 + +薄荷绿、森雾青、竹月青等偏绿或青绿色都适用这一限制。仅当用户明确要求、既有品牌规范或业务场景确需绿色时才选择；“清爽”“自然”“通透”“增长”等泛化描述不足以成为整页使用绿色的理由。局部数据的绿色语义不等于页面需要绿色主色系。参考示例时，不把色板首项、当前选中色或截图主色当作默认答案。 + +| 配色 | 色号 | 适合的视觉气质 | +| ------ | --------- | ------------------------------------ | +| 海盐蓝 | `#AFCBDA` | 清透、宁静，适合信息密度较低的看板。 | +| 晴空蓝 | `#A8C7E8` | 清朗、开阔，适合轻快的趋势展示。 | +| 薰衣紫 | `#B9AFD8` | 柔软、静谧，适合轻盈通透的界面。 | +| 雾玫粉 | `#D8B4B6` | 温柔、安静，适合柔和的经营概览。 | +| 杏桃橙 | `#F0C4A8` | 温暖、明亮，适合带日光感的界面。 | +| 薄荷绿 | `#16C99E` | 清爽、轻盈，强调趋势与选中状态。 | +| 森雾青 | `#7FA69A` | 自然、沉稳，带森林与雾气的感觉。 | +| 竹月青 | `#89A8A0` | 清雅、平和，适合克制的中性界面。 | + +一个 Dashboard 每次选择一个强调色，统一用于主要系列、选中控件和重点图标；通过明暗和透明度建立层级。两种背景色负责营造氛围，不为每张卡片另分配一种系列色。辅助图标和环图的浅色部分来自同一套派生规则。 + +颜色不能单独承担信息表达。下降、亏损和选中状态同时通过箭头、数值、位置或文字表达；本示例的下降指标与亏损柱保留语义红 `#D47C6A`，不会跟随强调色切换。 + +## 配色反例：装饰压过数据 + +经营看板应先让人看到指标、趋势和筛选状态，再感受到背景氛围。大面积亮青、紫色和粉色渐变，叠加透明卡片、彩色表格底色与发亮白边，容易让背景成为视觉主体。即使大数字仍然清楚，这种配色也会削弱标题、日期、单位和图表的阅读层级。 + +以下特征适用于识别本类轻量看板中的配色失控，不将某个色相本身判为错误： + +| 典型特征 | 对阅读的影响 | 改进方式 | +| -------------------------------------------- | ---------------------------------------------- | ---------------------------------------------------------------------------------------------- | +| 大面积青、紫、粉色块同时具有很强的存在感 | 多处装饰同时吸引注意，缺少安静的中性色区域。 | 以近白或浅灰底色为主，降低背景色的彩度、对比和覆盖强度；两种背景色只营造轻微氛围。 | +| 背景、卡片、嵌套面板和表格连续透明叠色 | 阅读面随底层渐变变化，同一张卡片出现不同色偏。 | 指标、图表和表格优先使用白色或近白色底面；玻璃感留在外围与留白处，避免逐层透色。 | +| 青色图表、粉色卡片、紫色表格各占一组视觉重点 | 装饰色形成多个强调中心，颜色与数据含义脱节。 | 保持一个信息强调色；两种背景色不用于区分卡片或给表格行上色，语义红仅用于下降、亏损等数据含义。 | +| 折线和面积填充与背景颜色接近 | 图形轮廓与页面色块融合，趋势变得不突出。 | 在稳定的中性阅读面上绘图，保留清晰线条，降低面积填充强度；透明 Canvas 仍需要清晰的底面。 | +| 浅灰标题、日期和单位直接落在变化的渐变上 | 不同位置的对比不一致，次要信息需要费力辨认。 | 文字使用稳定的深浅中性色，检查透明层合成后的实际底色，不能只检查 CSS 中的单个色号。 | +| 每张卡片都叠加亮白描边、光晕或局部高光 | 所有边缘同时被强调，装饰轮廓与内容争夺注意。 | 使用细中性边框与轻阴影，柔白斜光只作用于页面背景，避免给每张卡片制造发光边缘。 | + +“模糊”“浅色”“透明”不能替代低饱和与清晰层级：模糊只柔化边界，不会自动降低彩度；明亮的粉紫色仍可能很抢眼；过于透明的卡片会透出底层颜色，也不会自动显得轻盈。若 Prompt 只强调“液态玻璃、渐变、通透”，Agent 容易把这些词落实为多层特效叠加；应同时约束颜色的用途、覆盖区域和内容底面。 + +具体落地时，先为内容提供稳定底面，再添加背景装饰。沿用本页的 `--surface` 与 `--border`，例如： + +```css +.card { + background: var(--surface); + border: 1px solid var(--border); + box-shadow: 0 4px 16px rgb(40 51 62 / 4%); +} +``` + +确需半透明卡片时，以接近不透明的白色为起点，并在渐变最深处检查文字与图表；不要通过增加背景饱和度、`backdrop-filter: saturate(...)` 或彩色光晕补偿“玻璃感”。 + +## 统一颜色变量 + +页面使用 CSS 变量，图表使用同一次选择生成的 `palette`。避免只更新 DOM 样式而遗漏 Canvas 图表，也避免在折线、面积、柱体和环图中各自写死主色。 + +以下仅演示选择晴空蓝后的颜色变量，不指定通用默认色；实际初始化应使用根据上下文选定的配色。中性色供布局文档复用；此例的 `--background-end` 与 `--light-edge` 保留淡紫与白光边缘，切换预设时只改变背景的主色端，保持两色自然融合。 + +```css +:root { + --ink: #28333e; + --muted: #64717e; + --surface: #fff; + --border: #e5eaee; + --accent: #a8c7e8; + --accent-ink: #8ca6c3; + --accent-soft: #f5f8fc; + --secondary: #a4acce; + --secondary-soft: #f6f7fb; + --brand-color: #425160; + --background-base: #f0f2f5; + --background-start: #dce5f1; + --background-end: #ddd6ed; + --light-edge: #eee7f833; +} +``` + +下面参考示例 `selectPalette()` 内的派生逻辑提取为纯函数，并使用中性色派生背景，避免给其他色系附加偏绿底色。`mixColor()` 接收六位十六进制色号，`weight` 表示目标色的混合比例：文字强调色略混入深色，图标底色与环图底色混入白色，页面背景只保留少量主色。参考色较浅时，应复核细线、重点文字和选中边框的可读性，可调整其深浅，而不是把整个背景加深。 + +```javascript +function mixColor(color, target, weight) { + return ( + '#' + + [1, 3, 5] + .map((offset) => { + const from = parseInt(color.slice(offset, offset + 2), 16) + const to = parseInt(target.slice(offset, offset + 2), 16) + return Math.round(from + (to - from) * weight) + .toString(16) + .padStart(2, '0') + }) + .join('') + ) +} + +function createPalette(color) { + const secondary = mixColor(color, '#B9AFD8', 0.6) + return { + accent: color, + ring: mixColor(color, '#FFFFFF', 0.25), + ringTrack: mixColor(color, '#FFFFFF', 0.75), + tokens: { + '--accent': color, + '--accent-ink': mixColor(color, '#28333E', 0.22), + '--accent-soft': mixColor(color, '#FFFFFF', 0.88), + '--secondary': mixColor(secondary, '#28333E', 0.1), + '--secondary-soft': mixColor(secondary, '#FFFFFF', 0.88), + '--brand-color': mixColor(color, '#28333E', 0.8), + '--background-base': mixColor(color, '#F3F4F6', 0.96), + '--background-start': mixColor(color, '#EEF0F4', 0.74), + }, + } +} +``` + +这些比例服务于当前参考效果，不是所有主题的固定标准。初始化和切回默认色都使用同一派生函数，避免首次显示与再次选中默认色时得到两套不同的颜色。 + +## 大面积模糊渐变与柔白斜光 + +选择玻璃渐变背景时，可用两种协调的低饱和色大面积模糊、自然融合；以下示例的柔白光从左上斜穿至右下，边缘柔化并带轻微散射。两种背景色按所选色系搭配，此例为淡蓝与淡紫，不固定使用薄荷绿背景，不再叠加大面积暖黄等第三种色块。光束保持柔白，不随强调色染色。纸面、近白或细边线方案不必添加渐变与光束；不要让所有主题都继承同一蓝紫底色。 + +使用 `body::before` 绘制底层渐变，`body::after` 绘制白色斜光。以下样式与颜色变量组合使用： + +```css +body { + position: relative; + min-height: 100svh; + isolation: isolate; + margin: 0; + color: var(--ink); + background: var(--background-base); +} + +body::before, +body::after { + content: ''; + position: fixed; + pointer-events: none; +} + +body::before { + z-index: -2; + inset: -18%; + background: + radial-gradient(ellipse at 14% 22%, var(--background-start) 0%, transparent 62%), + radial-gradient(ellipse at 88% 78%, var(--background-end) 0%, transparent 64%); + filter: blur(64px); +} + +body::after { + z-index: -1; + inset: -10%; + background: + radial-gradient(ellipse at 24% 0%, #ffffffb3 0%, #ffffff00 48%), + linear-gradient( + 52deg, + #ffffff00 32%, + #ffffff14 38%, + #ffffff70 43%, + #ffffffd9 46%, + #ffffff80 49%, + var(--light-edge) 54%, + transparent 61% + ); + filter: blur(18px); +} +``` + +`isolation: isolate` 将负层级背景留在页面的独立堆叠上下文中；两层伪元素位于内容下方，`pointer-events: none` 保证点击与悬停命中控件和图表。负 `inset` 为模糊边缘预留空间，滚动时背景保持固定。只模糊背景层，不对卡片或 Content 应用 `filter`，保持文字和图表清晰。渐变位置、带宽与模糊半径可按容器比例调整，最终检查光束确实从左上延伸到右下。 + +## 图表配色与页面同步 + +在 VBI 的 `buildVSeed()` 返回结果上补充视觉属性，再经 VSeed `Builder` 构建 Spec。保持查询结果、字段 ID、统计周期和实例绑定，按图表类型消费同一个 `palette`： + +| 图形 | VSeed 配置 | 颜色来源 | +| ---------- | ----------------------------------------------------------- | ----------------------------------------------------- | +| 系列与折线 | `color.colorScheme`、需要显式覆盖时的 `lineStyle.lineColor` | `palette.accent` | +| 面积填充 | `areaStyle.areaColor` 与 `areaColorOpacity` | 强调色与低透明度，渐变可按图形需要开启。 | +| 正值柱体 | `barStyle.barColor` 与 `barColorOpacity` | 强调色与适度透明度。 | +| 亏损柱体 | 负值 selector 的 `barColor` | 固定语义红，不跟随预设变化。 | +| 两分类环图 | `color.colorScheme` | `palette.ring` 与 `palette.ringTrack`，保持分类顺序。 | + +例如利润柱图，`seed` 为已有查询结果，保留零基线与负值： + +```javascript +const valueId = seed.measures[0].id +seed.backgroundColor = 'transparent' +seed.color = { colorScheme: [palette.accent] } +seed.barStyle = [ + { barRadius: 2, barColor: palette.accent, barColorOpacity: 0.68, barGradient: false, barBorderWidth: 0 }, + { + selector: { field: valueId, operator: '<', value: 0 }, + barColor: '#D47C6A', + barGradient: false, + barBorderWidth: 0, + }, +] +const spec = Builder.from(seed).build() +await instance.updateSpec(spec) +``` + +主题切换复用已有 VChart 实例，通过 `updateSpec()` 更新；不要通过 CSS 给 Canvas 加滤镜来替代真实系列色。数值过渡、图表动画和悬停联动继续按指标卡文档处理。 + +示例中的色点属于当前页面的配色预览状态。需要保存、恢复或跨集成复用的主题配置，应由拥有它的 DSL 与公开 Builder 管理，不能只保存在 DOM 或浏览器本地存储中；相关接口见 [VBI ThemeBuilder](../api/vbi/chart-builder.md#themebuilder) 与 [VSeed 主题](../api/vseed/theme.md)。页面背景、控件样式和具体绘制仍由 UI 消费这些配置。 + +## 简洁的颜色选择器 + +使用一排小色点，选中项显示外圈与中心标记，旁边或下方显示色名和色号。桌面可放在标题旁，窄屏换到标题下方。保留可见的键盘焦点；每个按钮提供 `aria-label`，选中状态使用 `aria-pressed`，同一时刻只有一个预设处于选中状态。 + +下面以晴空蓝与雾玫粉展示两个预设的结构；完整八色按钮及 `.color-picker` 样式见轻量看板示例。初始选中项按上下文设置，不沿用示例的默认绿色，也不将此处蓝色固定为默认。色号与名称由按钮数据提供，事件读取这些值，不另外维护一份选项映射。 + +```html +
+ + +
+晴空蓝 · #A8C7E8 +``` + +沿用示例的 `requestRender()` 刷新队列，避免切换配色与统计周期时出现旧结果覆盖。初始化先应用选中预设，再构建图表；点击已选中的颜色无需重复刷新。 + +```javascript +const picker = document.querySelector('.color-picker') +const paletteLabel = document.querySelector('#palette-label') +let palette +function selectPalette(button) { + palette = createPalette(button.dataset.color) + for (const [name, value] of Object.entries(palette.tokens)) { + document.documentElement.style.setProperty(name, value) + } + picker.querySelectorAll('[data-color]').forEach((option) => { + option.setAttribute('aria-pressed', String(option === button)) + }) + paletteLabel.textContent = `${button.dataset.name} · ${button.dataset.color}` +} +selectPalette(picker.querySelector('[aria-pressed="true"]')) +picker.querySelectorAll('[data-color]').forEach((button) => { + button.addEventListener('click', () => { + if (button.getAttribute('aria-pressed') === 'true') return + selectPalette(button) + requestRender() + }) +}) +``` + +页面使用多个 `fieldset` 时，加载和恢复控件状态应覆盖全部相关控件，不依赖 `querySelector('fieldset')` 恰好命中统计周期。配色刷新不修改日期筛选、汇总算法、环图分类含义或区域明细口径。 + +## 可复用 Prompt 与验收 + +> 优化仪表盘配色与背景：先依据用户要求、已有品牌、界面风格与业务场景选择色系，使用一个统一强调色。没有明确需要时优先考虑适合当前场景的蓝、紫、粉、暖橙等非绿色系，降低绿色、薄荷绿及偏绿青色的选择优先级；只有上下文明确需要时才使用绿色，不照搬示例的默认配色，也不固定使用某一种替代色。以近白或浅灰底色为主，两种协调的低饱和色做大面积、低对比的柔和模糊渐变，主要从内容外围与留白处透出；一束柔白光从左上穿至右下，像阳光透过毛玻璃。指标、图表和表格保持稳定的白色或近白色阅读面，不逐层透明叠色，不给卡片和表格行分别铺青、紫、粉渐变，不添加发光白边。让指标与趋势先于背景吸引注意，保持次要文字和图形清晰。用简洁色点同步切换背景、图标和图表，显示色名与色号，保留现有布局、统计口径与交互。 + +- 主色系符合当前上下文；没有明确绿色需求时，不使用绿色、薄荷绿或偏绿青色作为主强调色及大面积背景的主色。色板首项、示例当前选中项和“清爽”等泛化描述不作为选绿理由。 +- 逐一切换八种预设，色名、色号、背景、图标、系列色和环图同时对应当前选择；配色动画结束后检查最终颜色。 +- 相同统计周期下切换配色，销售额、订单数、利润、环图占比与区域明细保持一致；再切换 30 → 14 → 7 → 30 天核对数据范围。 +- 仅一项选中，Tab 能到达色点，Enter / Space 可选择；焦点可见，加载结束后全部相关控件恢复可用。 +- 检查 375px / 390px 窄屏与桌面，选择器不横向溢出，不挤压标题和卡片；文字、细线与选中状态可辨认。 +- 柔白光从左上到右下，只有背景被模糊；装饰层不遮挡点击、Tooltip、悬停联动或卡片倾斜。 +- 第一眼能找到核心指标、趋势与选中状态；背景色块和卡片边缘不会比内容更突出，也不会形成多个装饰强调中心。 +- 在渐变最深处、最亮处及不同预设下检查合成后的阅读面，标题、日期、单位、表格与图表轮廓都清楚；关闭背景装饰后，信息层级仍然成立。 diff --git a/skills/light-dashboard/references/best-practices/filter.md b/skills/light-dashboard/references/best-practices/filter.md new file mode 100644 index 0000000000..0376b28156 --- /dev/null +++ b/skills/light-dashboard/references/best-practices/filter.md @@ -0,0 +1,158 @@ +# Filter 筛选器最佳实践 + +适用于 VBI Dashboard 的地区、周期、类别等筛选组件。**保持简约，少量选项优先平铺，桌面尽量一行完成；用 VBI Builder 修改数据范围，复用图表实例通过 `updateSpec()` 更新，并同步播放指标文本动画。** 参考[完整轻量看板](../../templates/example.html)的周期按钮、`setPeriod()`、`applyPeriod()`、`requestRender()` 和 `draw()`；地区与周期组合见[精简模板](../../templates/template-business-overview.html)的 `applyFilters()`。 + +## 简约控件与一行布局 + +- 少量互斥选项使用平铺按钮或分段选择器，例如“全部地区 / 华东 / 华北”“7 天 / 14 天 / 30 天”。多选使用可切换的标签按钮，明确多选语义。避免把未经设计的原生 HTML `select`、文本或日期 `input` 作为默认筛选外观；预设范围能满足任务时不增加输入框。 +- 控件使用短标签、轻底色与清楚的选中态，避免每个字段都套标题、边框卡片、说明和独立一行。选项已能表达含义时，省略重复的可见“地区”“周期”标签，通过 `aria-label` 保留分组名称；有歧义时保留必要的短标签。 +- 同一作用域的筛选器集中放置，桌面尽量保持一行。模板将地区与周期合并在“经营概览”标题行最右侧，利用标题旁的空余空间，避免分散在品牌行和趋势卡。全局条件统一更新整个看板；确有独立卡片的局部条件时才放到对应卡片旁，避免与全局条件混淆。 +- 选项多时，保留常用选项与紧凑的“更多筛选”入口，展开后提供经过设计的搜索、多选或日期范围组件；当前生效的条件与重置入口应可发现。避免把大量按钮摊成数排，也不为凑一行缩小文字、压缩点击区域或隐藏当前选择。 +- 窄屏优先完整标签与可操作性，可以必要换行或进入紧凑弹层；不强制 `nowrap` 造成横向溢出。组件视觉遵循宿主规范，搜索和精确日期确有需要时保留合适的输入能力。 + +```html +
+
+

经营概览

+

当前统计范围

+
+
+
+ + + +
+
+ + + +
+
+
+``` + +```css +.heading { + display: flex; + justify-content: space-between; + align-items: start; + flex-wrap: wrap; + gap: 20px; +} +.filter-row { + display: flex; + align-items: center; + flex-wrap: wrap; + gap: 12px; + min-width: 0; + margin: 0 0 0 auto; + padding: 0; + border: 0; +} +.segment { + display: inline-flex; + flex-wrap: wrap; + gap: 3px; + padding: 3px; + border-radius: 20px; + background: #edf1f4; +} +.segment button { + padding: 7px 12px; + border: 0; + border-radius: 17px; + background: transparent; + color: var(--muted); + font: inherit; + font-size: 12px; + cursor: pointer; +} +.segment button[aria-pressed='true'] { + background: #fff; + color: var(--ink); + box-shadow: 0 2px 5px #2436440a; +} +.segment button:focus-visible { + outline: 2px solid #6c8eb5; + outline-offset: 3px; +} +.segment button:disabled { + cursor: wait; + opacity: 0.6; +} +``` + +此片段沿用模板的颜色变量，将两个全局筛选分组放在同一标题行右侧；空间不足时整个筛选区换到下一行，仍尽量让两个分组并排。按钮保留 `type="button"`、`aria-pressed`、Tab / Enter 操作与可见焦点，加载时可禁用所在 `fieldset`。每个单选分组切换后只有一个按钮选中；默认选项从当前 DSL 读取，只有新建配置才采用演示默认值。 + +## 用 VBI 筛选器修改数据范围 + +筛选条件属于 Chart DSL，由公开 Builder 维护。组件只表达用户选择，不在 HTML 事件中重新实现过滤、聚合或拼接 SQL；Connector 执行收到的 `queryDSL`，不能忽略条件再返回完整数据。原始行范围使用 `whereFilter`，确需筛选聚合后的分组结果时使用 `havingFilter`，接口见[Chart Builder](../api/vbi/chart-builder.md)。 + +保存组件拥有的条件 ID，通过 `whereFilter.update()` 更新，通过 `remove()` 解除自身条件。“全部地区”表示移除地区限制，不是设置 `eq: '全部地区'`。不要用 `clear()` 清除其他组件或恢复配置中的筛选，例如消费者占比查询的 `customer_type = 消费者`。同一字段可能有多个条件，优先记录 ID 或使用专属条件组；完整示例按字段查找日期的方式仅适用于该示例唯一拥有该日期条件的场景。 + +以下摘自模板的条件维护方式。`chart` 为 Chart Builder，`ids` 为该组件针对这张图表保存的条件 ID；恢复配置时先关联原有条件，再初始化控件，不能直接新增重复条件。`firstDay`、`lastDay` 使用与 schema 一致的 UTC 日序号。 + +```javascript +chart.doc.transact(() => { + const date = (node) => node.setOperator('between').setValue({ min: firstDay, max: lastDay }) + if (ids.date) chart.whereFilter.update(ids.date, date) + else + chart.whereFilter.add('order_day', (node) => { + date(node) + ids.date = node.getId() + }) + if (region) { + const area = (node) => node.setOperator('eq').setValue(region) + if (ids.region) chart.whereFilter.update(ids.region, area) + else + chart.whereFilter.add('region', (node) => { + area(node) + ids.region = node.getId() + }) + } else if (ids.region) { + chart.whereFilter.remove(ids.region) + delete ids.region + } +}) +``` + +全局筛选需更新其作用域内的汇总、趋势、分组明细、占比分子与分母，以及比较周期查询。地区等条件在本期与前期保持一致；日期分别使用本期和此前等长区间，不能把同一日期范围直接套给前期查询。历史数据以已确认的数据最新日期为默认截止日，N 天范围包含首尾；模板的每日联动索引额外查询前一天，用于单日比较，不计入本期汇总。 + +| 交互 | 更新范围与状态归属 | +| ------------------ | ------------------------------------------------------------------------------------------------------------------------ | +| 全局筛选 | 更新相关 Chart Builder，汇总、图形、明细与 Insight 使用一致口径；可恢复条件保存在 DSL。 | +| 独立卡片局部筛选 | 只修改该卡拥有的 Builder 与比较查询，不影响无关卡片。 | +| 图表悬停或逐日查看 | 从已查询的日期索引读取临时值，主图联动全部指标、小图只联动自身；不逐次查询、不覆盖区间 Insight，退出恢复相同作用域汇总。 | + +## 联动更新与双重动画 + +保持一条刷新路径：`控件 → Builder 筛选条件 → DSL 订阅 → 查询 → VSeed / Spec → 图表与指标`。控件回调只修改 Builder；通过 `chart.dsl.observeDeep(requestRender)` 驱动刷新，不再同时手动调用另一套完整渲染，避免重复查询。批量修改使用每张图表的 `doc.transact()`，多张图表的通知在同一轮微任务合并；跨图表刷新与过期结果处理参考模板 `requestRender()` / `renderLoop()`。 + +首次创建 VChart，之后复用同一个实例并调用 `await instance.updateSpec(spec)`；不要通过替换 Canvas、销毁重建或只改 HTML 数字冒充联动。Spec 保留稳定字段 ID、系列与分类键，让图形可匹配更新前后的元素。生成 Spec 时开启约 **600ms** 的更新过渡，不能调用了 `updateSpec()` 却关闭动画。 + +以下为传入 VSeed `Builder.from()` 的更新动画配置，完整构建与复用实例代码见[HTML 接入](../usage/how-use-vbi-in-html.md#4-筛选改-builder渲染复用实例)及示例 `draw()`： + +```javascript +const animation = { + enable: !reducedMotion.matches, + params: { + appear: { enable: false }, + update: { enable: true, duration: 600, ease: 'cubicInOut' }, + }, +} +``` + +**图表与指标文本都必须更新动画。** 同一轮有效查询结果同时驱动图形与销售额、增长率、订单、利润、占比及辅助数字。文本使用示例 `animateMetric()`，约 600ms 缓和插值，保留金额、整数、百分比与正负号；连续更新取消旧帧，从当前显示值接续，最终精确落到真实值。首次显示直接使用真实结果；空值、零分母和无可比基期展示缺省或说明，不从虚构零值动画。数值插值仅影响展示，计算、Tooltip、导出与 Insight 使用查询结果，详见[指标文本更新动画](./metric-card.md#指标文本更新动画)。 + +查询期间保持卡片与图表容器稳定，设置 `aria-busy` 和简短反馈；可暂时禁用相关控件，完成或失败后恢复。连续变更使用版本号丢弃旧查询结果，串行提交图表更新，防止旧指标覆盖新筛选。开始刷新时取消旧悬停任务、隐藏旧 Tooltip，完成后替换日期缓存并恢复区间汇总；不重播首次入场动画，不重建明细容器或重置用户的展开状态。 + +减少动态效果模式立即完成文本数值并停止图表动画。卸载时解除 DSL 与图表事件订阅，清理定时器、动画帧并释放实例。错误时明确当前未成功更新，避免把上次结果标成新范围；空结果给出空状态及解除筛选入口，不制造趋势或占比。 + +## 验收 + +- 桌面同一作用域的筛选集中在页面标题最右侧，尽量一行，标题和主指标仍是视觉重心；无重复标签、默认原生 `select` / `input` 外观或多排表单。390px 下标签、点击区域与焦点完整，没有横向溢出。 +- 切换周期和地区，相关汇总、图表、明细、比较基准与 Insight 口径一致；选择“全部”只解除自身限制，消费者等其他条件仍存在。恢复 DSL 后控件与查询一致。 +- 确认 VChart 实例与 Canvas 复用、调用 `updateSpec()`；记录更新前、更新中与稳定后的图形或数值，证明图表和文本都有过渡，稳定值符合预期。截图不能单独证明动画。 +- 连续变更、加载失败、空结果、零基期及减少动态效果模式符合上述行为；筛选后无旧悬停值回写，局部交互不增加查询次数，明细展开状态保持。 + +布局对照与证据记录沿用[截图对照验收](./visual-acceptance.md)，无需额外增加常驻调试面板。 diff --git a/skills/light-dashboard/references/best-practices/insight.md b/skills/light-dashboard/references/best-practices/insight.md new file mode 100644 index 0000000000..d151902807 --- /dev/null +++ b/skills/light-dashboard/references/best-practices/insight.md @@ -0,0 +1,97 @@ +# 核心发现与指标洞察最佳实践 + +适用于 Dashboard 顶部“核心发现”与经营结论。**用一句有证据的结论连接核心指标与重要衍生指标，再展示范围、比较基准和逐项依据。** 核心指标描述规模，衍生指标补充结构、效率与质量，不能只罗列原始数值，也不能用未经计算的判断替代证据。版面比例与响应式由[布局最佳实践](./layout.md)负责。 + +参考[精简模板](../../templates/template-business-overview.html)与[完整轻量看板](../../templates/example.html)的 `deriveMetrics()`、`pointChange()`、`summarizeKeyFinding()`；完整示例的 `summarizePeriod()` 组织证据，模板在 `renderLoop()` 中写入同一 Insight 资源。 + +## 结论、范围与证据 + +“核心发现”模块按以下阅读顺序组织，标题不添加“AI 洞察”“指标波动 · 摘要演示”等技术或演示标识： + +1. **一句重要结论**：先说本期最值得关注的关系或分化，例如“销售额增长，订单数基本持平；客单价提升，利润率提升。”结论应能从后面的数字直接核对，不归因于数据未提供的营销、成本或客户行为。 +2. **范围与比较口径**：注明核心与衍生指标数量、起止日期、地区等生效条件和比较周期。模板使用“3 项核心指标 · 2 项衍生指标 · … · 对比前 30 天”。 +3. **核心指标依据**：销售额、去重订单数、利润等，每项一句，展示本期值、变化方向与幅度；覆盖本次已声明的核心指标清单。 +4. **重要衍生指标依据**：紧接核心指标列出利润率、平均客单价等已计算的结果及变化。优先选择能够解释主结论、揭示风险或补全经营表现的指标，不堆砌所有可计算公式。 + +以模板“全部地区、30 天”的内置数据为例： + +- 销售额：¥154,400，↑ 增长 41.5%。 +- 订单数：60 单，持平 0.0%。 +- 利润：¥16,494，↑ 增长 63.5%。 +- 利润率：10.7%，↑ 提升 1.4 个百分点。 +- 平均客单价：¥2,573，↑ 增长 41.5%。 + +前三项是核心指标，后两项是衍生指标。销售增长率属于销售额的变化描述，不另计一个核心指标；同一客单价在主卡和洞察中出现也只计一次。衍生指标的当前值与变化率同样不重复计数。 + +一个列表可以同时承载核心与衍生证据，通过顺序和范围说明表达区别，无需再增加一排等权 KPI 卡。内容增加时允许洞察卡自然增高，下方模块顺延；窄屏完整换行，不能固定高度裁切、缩小字号或让文字覆盖图表。 + +## 选择有意义的衍生指标 + +| 分析问题 | 衍生指标与公式 | 能补充的判断 | +| ---------------------------------- | ------------------------------------------------------ | ------------------------------------------------------------------------ | +| 销售增长是否伴随盈利改善？ | 利润率 = 汇总利润 ÷ 汇总销售额 | 销售与利润率同向提升，或规模扩大但盈利效率回落。 | +| 销售变化伴随订单量还是客单价变化？ | 平均客单价 = 汇总销售额 ÷ 去重订单数 | 订单减少但销售增长时，客单价提升可由数据验证；不据此推断提价或客户升级。 | +| 流量是否形成有效结果？ | 转化率 = 符合口径的转化数 ÷ 同口径机会数 | 规模与转化效率是否分化；需先确认去重对象、漏斗阶段和时间窗口。 | +| 总量掩盖了什么结构？ | 某类占比 = 该类指标 ÷ 全部同口径指标 | 收入、客户或订单结构变化；分类需互斥或明确重叠口径。 | +| 表现离目标还有多远？ | 完成率 = 实际值 ÷ 已确认目标值；缺口 = 目标值 − 实际值 | 进度与剩余任务；没有真实目标时不编造目标或阈值。 | + +选择取决于业务问题和可用字段。模板仅新增利润率与平均客单价两项，其他公式是按需选用的示例，不能在缺少分子、分母、目标或业务定义时补造数据。占比或高客单价也不天然代表更好，需要结合业务含义解释。 + +## 计算口径与比较单位 + +基础聚合仍由 VBI → VQuery 执行，衍生指标消费同一筛选范围的未格式化汇总结果。本期和前期分别计算，地区、去重键、币种与统计粒度保持一致。**先汇总再相除**：利润率用 `sum(profit) / sum(sales)`，客单价用汇总销售额除以全区间去重订单数；不能平均每日比率，也不能累加每日去重订单数代替全区间去重数。 + +模板中正销售额、正订单数才构成有效分母；利润可以为负，负利润率保留。实际业务存在净销售额为负等情况时先确认解释方式，不直接沿用正分母假设。零分母、缺失值显示 `—` 或简短说明，不能把缺失值当零，也不能用极小常数绕过除零。中间计算保留精度，仅展示时舍入。 + +```javascript +function deriveMetrics(total) { + const ratio = (value, base) => + Number.isFinite(value) && Number.isFinite(base) && base > 0 ? value / base : undefined + const margin = ratio(total.profit, total.sales) + return { + margin: margin === undefined ? undefined : margin * 100, + average: ratio(total.sales, total.order_id), + } +} +const current = deriveMetrics(total) +const previous = deriveMetrics(prior) +// 利润率已经是百分数单位，差值直接表示百分点；客单价比较相对变化率。 +const marginPoints = + Number.isFinite(current.margin) && Number.isFinite(previous.margin) ? current.margin - previous.margin : undefined +``` + +- 金额、数量或客单价的相对变化率：`(本期 − 前期) / abs(前期) × 100%`。前期为零不显示增速，保留本期值并说明暂无可比基数。 +- 比率的水平变化默认用**百分点**。利润率从 10% 到 12% 是提升 2 个百分点；如确需相对增幅则是 20%，必须明确标注，不能混写为提升 2%。前期利润率为 0% 仍可比较百分点，只要两期分母都有效。 +- 当前值与变化分别判断有效性：本期有值但前期无有效分母时，仍展示本期衍生指标，变化说明不可比；某项缺失不掩盖其他可比较指标。 +- 箭头表示实际增减，文字保留“增长 / 下跌”“提升 / 下降”及单位，颜色不作为唯一信号。本销售示例增长用绿、下跌用红，持平与不可比用中性色；退款率等反向指标按业务解释好坏，不能把增长一律写成改善。 + +本页公式是示例中的呈现层计算，没有增加 VBI 公式 DSL。若指标公式、依赖及口径需要作为 VBI 能力保存、恢复或跨集成复用，应在所属 DSL 和 Builder 中建模；保存 Insight 文本并不自动保存可重算的公式。能力边界见[派生计算与状态](../usage/tips.md)。 + +## 从数值形成更全面的结论 + +先比较规模，再结合相关衍生指标检查效率与质量是否一致。例如销售额上升、订单数下降而客单价上升，可以描述三者的关系；若利润率同时下降，结论必须保留这一分化，不能只报告销售增长。利润绝对值增长不等于利润率提高，增长速度相同也不意味着经营原因相同。 + +结论引用的衍生指标必须出现在证据中，且能从同一范围的核心聚合结果复算。避免“结合利润率与客单价查看表现”这类尚未给出计算结论的占位句。缺少可比数据时明确限制，继续展示有效本期值与其他指标；不生成推测的原因、建议或业务阈值。 + +接入 AI 时，调用方先计算并提供核心清单、衍生清单、公式与单位、本期值、前期值、比较结果、有效性和筛选范围，再要求模型总结关系。Insight Builder 只管理内容，不执行模型推理，也不应让模型猜测或自行补齐指标。两个 HTML 示例都用真实聚合结果生成确定性结论，未调用模型服务。 + +## Insight 资源与联动 + +通过 `insight.setContent(content)` 保存结论、范围与全部证据；Dashboard 通过资源 ID 引用同一个 Insight，UI 安全地写入 `textContent` 与原生列表，不把模型返回内容直接当任意 HTML 执行。模板采用以下顺序： + +```javascript +insight.setContent([conclusion, scope, ...evidence].join('\n')) +// renderInsight() 读取结论、范围与证据，渲染为 h2 / p / ul / li。 +``` + +这只是模板的文本协议，VBI 未定义这些行的业务语义。完整轻量示例仍以范围为首行、结论为第二行、后续 `- ` Markdown 列表保存证据，渲染时将结论放到范围之前；复制时保留各自写入与解析顺序，不交叉拼接。 + +全局筛选后，核心聚合、衍生计算、结论、范围和证据同时更新；旧查询结果不能覆盖新范围。局部图表悬停只改变对应数字，不覆盖区间 Insight。布局与配色切换复用资源与结论，增长方向等语义颜色不随主题改变。订阅与释放、保存 Dashboard 及资源快照见[状态与资源](../usage/tips.md#同时保存-dashboard-和资源)。 + +## 验收 + +- 一句结论在前，核心与衍生指标数量、范围与比较基准清楚；各项证据可复算，结论覆盖关键改善或分化，不编造原因。 +- 核对总量除以总量、全区间去重、百分点与相对百分比；覆盖零分母、零基期、缺失值和负利润，本期有效但前期不可比时仍能读到本期值。 +- 模板全部地区 30 天应显示利润率 10.7%、提升 1.4 个百分点、客单价 ¥2,573、增长 41.5%；7 天利润率约 10.4%、下降 2.4 个百分点，结论不能沿用“利润率提升”。 +- 切换地区与周期后重新计算，局部悬停不改洞察；桌面与窄屏下五项证据完整，无裁切、重叠或不必要的独立卡片。 +- 保存与恢复 Insight 文本后结论与依据完整；若承诺公式可重算，另验证公式定义与依赖的恢复，不能仅检查文本保存。 diff --git a/skills/light-dashboard/references/best-practices/layout.md b/skills/light-dashboard/references/best-practices/layout.md new file mode 100644 index 0000000000..0cc1669c84 --- /dev/null +++ b/skills/light-dashboard/references/best-practices/layout.md @@ -0,0 +1,712 @@ +# Dashboard 布局最佳实践 + +适用于经营概览、轻量看板和指标仪表盘。先根据分析任务选择阅读路径，再决定模块大小、分组与响应式排列。本文仅维护[轻量看板示例](../../templates/example.html)中已有的三种参考布局：趋势主导、指标先行、分段叙事。可在查阅示例后根据当前任务组合、调整或设计新的布局，遵循下方共同原则。配色与背景实现见[配色与背景最佳实践](./design.md)。 + +全部 24 份模板以 `template-分析主题.html` 平铺在 `templates/`；完整简介与布局、主题色动机见 [SKILL 模板索引](../../SKILL.md#24-份模板索引)，截图与入口见[可视总览](../../templates/index.html)。以下三页用于说明基础阅读路径。 + +## 复用轻量示例的视觉骨架 + +先实际查看最接近分析任务的模板 HTML 和截图，确认骨架、密度与必要交互，再开始构建。复用的是主辅关系、字体层级、间距节奏和阅读质量；布局、背景与配色按[差异设计](./design.md#相近风格中的差异设计)选择，不默认固定为同一套左右列与渐变。用户指定其他风格或宿主已有规范时，以其要求为准，产物的可读性和交互完成度仍不能因适配模板而降低。 + +需要可直接改造的参考实现时，按数据与阅读任务选择下表中的模板；每份 HTML 独立内嵌完整数据，保留筛选、`updateSpec()`、指标动画、小卡倾斜、局部查看和默认展开的明细。布局与配色固定在各自文件中，页面不提供风格选择器；实际业务可继续调整，不以文件编号作为默认优先级。 + +| 模板 | 参照与视觉 | 内嵌数据与适用任务 | +| ------------------------------------------------------------------------------ | ------------------------------------------------- | ------------------------------------------------------------------ | +| [template-life-expectancy.html](../../templates/template-life-expectancy.html) | `demo1`：蓝色；左侧主趋势 + 右侧三张辅助卡 | 2,938 条预期寿命记录；适合真实年度变化，主指标取末年国家等权均值。 | +| [template-heart-failure.html](../../templates/template-heart-failure.html) | `demo2`：紫色；先看三项指标，再看全宽主分析区 | 299 条心衰记录；适合样本与分组比较，随访天数不当作日历时间。 | +| [template-meal-workout.html](../../templates/template-meal-workout.html) | `demo3`：暖橙色；主结果、双列辅助区、全宽样本构成 | 8,000 条餐食记录；适合分段解释，使用套餐与运动方式比较。 | + +[基础模板](../../templates/template-business-overview.html)仍用于查阅最小机制和销售示例，关键片段见[HTML 接入](../usage/how-use-vbi-in-html.md#精简模板的重要片段)。它的蓝色趋势布局是一个示例；实际任务先选择匹配的阅读路径，再决定图形与配色。没有时间字段时使用分组比较，不编造趋势。 + +以下角色对应[示例 HTML](../../templates/example.html)的实际选择器，便于有选择地读取和复用；尺寸是当前示例的桌面起点，源码是实现依据，窄屏、长数字与嵌入容器按内容调整。 + +| 角色 | 源码入口 | 应保留的关系 | +| -------------- | ------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------- | +| 页面外壳与标题 | `.shell`、`.topbar`、`.heading` | 最大宽度 1140px，左右内边距 28px；品牌、标题、业务内容之间有分层留白，控件不挤占标题。 | +| 核心发现 | `.insight-card`、`.insight-conclusion`、`.insight-list` | 一句结论在前，周期和依据在后；文字区自然撑高，与主卡保持清楚间距。 | +| 主区域 | `.hero`、`.hero-top`、`.hero-value`、`.hero-figure` | 数字与图形组成同一分析单元；主、辅、衍生指标按[统一字号 token](./metric-card.md#数值字号规范)分级，不能逐卡缩放。 | +| 卡内辅助指标 | `.hero-bottom`、`.submetric` | 相关指标用轻分隔线和留白组织，不再拆成一排独立边框卡。 | +| 辅助区域 | `.small-card`、`.small-body`、`.mini-plot` | 短标题、数字与紧凑图形并排；图形支持数字，不与主图争夺面积和注意力。 | +| 网格与阅读面 | `.dashboard`、`.card`、`layoutPresets` | 桌面网格间距 18px，主卡内边距约 26–28px，卡片圆角 26px；稳定的近白阅读面承载内容，柔和背景从外围露出。 | +| 明细与说明 | `details`、`summary` | 经营明细默认展开并可折叠，筛选与视图变化保留展开状态；低频长说明另按需展开。 | + +趋势主导模式先沿用主区 8 列、侧栏 4 列的面积关系；指标先行模式仍保留一个显著的主分析区，不把后续图表全部做成等权卡片。主数字约为辅助数字的两倍可作为轻量风格的起点；通过卡片面积、位置、字重与留白共同强调重点，不只放大数字。小屏优先保证完整数值和阅读顺序，不能为维持比例裁切文字。 + +视觉骨架表达的是主辅关系，不绑定销售业务或时间趋势。没有有效时间字段时，可以用核心指标与重点排行、分组比较构成主区域；不生成虚构趋势或无意义的周期按钮。复用 HTML/CSS 时替换资源 ID、字段映射、统计口径与事件作用域，继续通过 DSL 与 Builder 管理可恢复状态。 + +下方 `Header + Content` 代码演示接入和网格映射，省略了完整示例的品牌区、卡内辅助指标与明细结构。需要轻量示例的完整视觉效果时，组合上表对应结构；不能只复制简化代码并认为已经保留了示例风格。 + +## 轻量看板的功能与视觉基线 + +以下是采用轻量示例风格时的必要交付项。模板通过内置小数据集和固定布局、配色缩短代码，不能通过删除图表、动效或卡内交互来“精简”。用户明确选择的其他风格与宿主规范优先；数据不支持某种图形时替换为有业务意义的图形，并说明调整。 + +| 必要项 | 参数与行为 | 模板入口 | +| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------ | +| 真实图形 | 主面积图、增长 mini area、订单占比 donut、利润 mini column；负利润保留负值与语义色。 | `buildChartSpec()`、`buildRingSpec()`、`draw()` | +| 更新动效 | 复用实例，筛选变化调用 `updateSpec()`，按需增加配色切换时同样复用实例；约 600ms、`cubicInOut`，首次不从虚构零值播放。 | `updateAnimation()`、`draw()` | +| 平铺控件 | 模板将地区与周期分段按钮集中在“经营概览”标题行最右侧，桌面同排，地区不重复显示“地区”标签，保留 `aria-label`；明确 `aria-pressed`、焦点与禁用状态，窄屏换行。布局、配色切换仅按需添加；选项多时再用搜索或定制下拉。 | `.segment`、`[data-region]`、`[data-days]` | +| 小卡倾斜 | 固定外层命中，内层 `perspective(800px) rotate3d(...)`；目标约 1.5°，合成旋转始终 ≤2°，离开、滚动、失焦复位。主图、洞察与展开大图保持平面。 | `.card-slot`、`.metric-card`、`bindCardTilt()` | +| 明细展开 | `
`，默认可见；不在刷新中重建 details 或覆盖 `open`。 | `details`、`#regions` | +| 平滑与数字过渡 | 面积图使用 `lineSmooth: true` 与渐变填充；指标、比较变化、占比及辅助数值约 600ms 缓和过渡，连续操作取消旧帧并从当前显示值接续。 | `buildChartSpec()`、`animateMetric()` | +| 卡内交互 | 主趋势联动全部指标，增长和利润小图只联动自身；悬停稳定 75ms 后显示当日值、比较前一天，移出恢复区间汇总。Tooltip 即时响应，区间洞察保持不变。 | `bindMetricHover()`、`showMetrics()`、`currentMetrics` | + +全局地区与周期筛选集中在页面标题右侧，逐日查看入口保留在图卡内，两者应可发现、可用键盘或触屏操作。模板支持图表左右键逐日查看、Esc 恢复，以及主卡前一天 / 后一天 / 区间汇总按钮。查询后建立日期索引，联动不重新查询；加载、刷新、离开与销毁取消待执行任务，避免旧事件覆盖新值。所有动效支持减少动态效果模式，且释放监听、定时器与动画帧。详见[指标卡](./metric-card.md)、[趋势](./trend.md)与[验收](./visual-acceptance.md#必要交互逐项验收)。 + +## 信息密度与模块取舍 + +先为每个模块说明它回答的业务问题、优先级和默认展开状态，再配置网格坐标。轻量概览通常由一个主分析区和少量辅助模块组成；模块数量由问题与可读性决定，不固定为四张 KPI 或若干张等高图表。用户要求多指标监控、完整分析或明细常驻时保留其需要，通过分组与章节组织。 + +| 内容情况 | 优先处理方式 | +| ------------------------------ | ------------------------------------------------------------------------------------------------------------ | +| 数字、洞察和图表重复同一结果 | 数字与图形合并到同一分析单元；洞察提炼关系或变化，避免再逐字复述全部卡片。必要的指标依据仍保留。 | +| 与主指标直接相关的小指标 | 放进主卡辅助区或共享指标条，使用轻分隔线；只有独立分析或交互需要时才拆卡。 | +| 辅助图只用于说明走势 | 使用 mini 图；若需要比较绝对值、类别或分布，保留必要坐标与标签，不机械缩成 mini。 | +| 多个筛选器与操作 | 常用选项平铺，桌面尽量一行；更多条件进入紧凑展开入口，明确全局与局部范围，见[Filter 最佳实践](./filter.md)。 | +| 经营明细、字段解释与长口径说明 | 经营明细默认展开且可折叠；低频长说明按需展开，保留必要单位、比较基准，不能以简洁为由删除解释。 | +| 多张同等大小的图表连续堆叠 | 根据分析优先级重新分配面积或分段；只有业务确实等权时使用等权排列。 | + +首屏应能识别最重要的问题、主要结果和当前筛选范围。不要通过缩小文字、压扁图形或取消卡片留白强塞全部模块；核心发现较长或窄屏空间不足时允许自然滚动。长分析页面按章节延续阅读，不要求整个 Dashboard 塞进一屏。 + +布局方案记录：参照布局、主区域及强调方式、辅助模块、默认展开内容、按需展开内容。对关键结构的调整给出业务理由，例如“HR 数据没有时间字段，因此主区域采用离职率与岗位比较”。在[截图对照验收](./visual-acceptance.md)中检查这些决定是否实际成立。 + +## 共同原则与可调参数 + +| 项目 | 约束 | +| -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | +| 布局 | 用 Dashboard DSL 管理可恢复的模块位置，UI 转换为网格；桌面按阅读路径组织，窄屏按业务顺序重排。 | +| 视图宽度 | 示例中的三种布局统一使用最大 **1140px** 的外壳，切换时只调整内部排列；新页面按内容与宿主空间调整，嵌入页面按容器可用宽度适配。 | +| 内容容器 | 独立模块可使用卡片；连续分析可用章节标题、留白和分隔线分组。避免卡片套卡片，以及每个数字都加独立边框。 | +| 内容高度 | 洞察、长文本与明细随内容自动撑高，下方区域随网格行高增长顺延；图表保留最小高度。不用固定高度裁切内容，也不依靠溢出到相邻区域展示。 | +| 主次关系 | 趋势主导突出主图；指标先行先展示核心指标；分段叙事按段落建立层次。主次关系由分析任务决定。 | +| 核心发现 | 三种布局均在顶部保留洞察，随核心与衍生证据自然增高；内容规则见[洞察最佳实践](./insight.md)。 | +| 联动方向 | 主区域向下联动，子区域只更新自身；布局切换保留已声明的模块关系。Header 全局过滤器可统一改变全部区域的分析范围。 | +| 3D 动效 | 主区域保持平面；轻量看板指标小卡默认轻微倾斜，任意时刻的合成旋转不超过 **2°**。展开大图、触屏和减少动态效果模式下关闭倾斜。 | +| 卡片入场 | 按阅读顺序缓和淡入与轻微上移；少量卡片可逐张延时，模块较多或长叙事按可见行或章节分批，避免累积等待。 | +| 圆角 | 根据卡片尺寸与页面留白调整，宽松布局可参考示例的 **24–26px**；窄屏、小容器或小卡片可减至 **8–16px**。控件按自身尺寸调整，同层级保持一致，避免圆角挤占内容。 | +| 页面结构 | 按分析任务与宿主约定组织标题、过滤器、内容和必要说明；**Header + Content** 可作为轻量看板的起点。 | + +卡片保留短标题、指标单位和必要的比较口径；加载、错误等反馈放在 Header 或相关卡片内。 + +数据口径说明应反映真实的统计范围、聚合或去重规则与比较基准，随筛选更新。说明的位置与样式按页面需要设置，窄屏允许换行，不遮挡图表或控件。 + +## 顶部核心发现 + +核心发现保持在分析区顶部、使用平面阅读面，内容增加时自然撑高并顺延后续模块。结论结构、核心与衍生指标、计算与比较口径、Insight 资源及内容验收统一见[核心发现与指标洞察最佳实践](./insight.md)。本页只维护位置、比例与响应式关系。 + +## 按分析任务选择布局 + +| 模式 | 首先回答的问题 | 桌面组织 | 窄屏阅读顺序 | +| -------- | ---------------------------- | --------------------------------------- | ------------------------------------- | +| 趋势主导 | 整体表现如何变化？ | 核心发现 → 主趋势 + 辅助侧栏。 | 核心发现 → 主趋势 → 辅助指标。 | +| 指标先行 | 当前结果是否达标？ | 核心发现 → KPI 横排 → 主趋势 → 明细。 | 核心发现 → 关键指标 → 主趋势 → 明细。 | +| 分段叙事 | 结果、原因与证据分别是什么？ | 核心发现 → 结果、原因与证据的连续章节。 | 核心发现 → 按章节顺序阅读。 | + +### 趋势主导 + +适合一个核心趋势带动少量辅助指标。示例键为 `focus`，顶部核心发现占 12 列，其下主图占 8 列，增长、订单和利润三张卡片占右侧 4 列。新页面可按内容调整跨度；主图保持充分的横向时间跨度，避免侧栏不断增高而主图留下大片空白。 + +```text +┌────────────────────────────────┐ +│ 核心发现 │ +├─────────────────────┬──────────┤ +│ │ 辅助指标 │ +│ 主趋势 ├──────────┤ +│ │ 辅助指标 │ +│ ├──────────┤ +│ │ 辅助指标 │ +└─────────────────────┴──────────┘ +``` + +主图可向下联动辅助指标。窄屏先显示核心发现，再显示主趋势和辅助模块，不等比例缩小桌面的侧栏。 + +### 指标先行 + +适合日常经营、目标完成率和运营监控。示例键为 `kpiFirst`，顶部先放核心发现，其下依次放订单数、销售增长和利润三张指标卡，再放通栏销售趋势和区域明细。新页面可根据业务优先级调整 KPI 的数量与排序；指标条也可共享一个容器，通过留白或分隔线区分。 + +```text +┌───────────────────────────────────┐ +│ 核心发现 │ +├───────────┬───────────┬───────────┤ +│ 订单数 │ 销售增长 │ 利润 │ +├───────────┴───────────┴───────────┤ +│ 主趋势 │ +├───────────────────────────────────┤ +│ 明细 │ +└───────────────────────────────────┘ +``` + +KPI 的排序体现业务优先级，行数与宽度根据标签、单位和数值长度调整。窄屏可保留两列短 KPI；长标签、复杂比较口径或空间不足时改为单列。 + +### 分段叙事 + +适合周报、月报、分析结论与专题复盘。示例键为 `story`，先用顶部核心发现交代结论，再展示通栏销售趋势、并列的增长与利润分析，最后展示订单与区域明细。用章节标题和留白串联“结论 → 结果 → 原因 → 证据”；连续内容可采用开放式分区，只在需要独立边界的模块使用卡片。 + +```text +结论 +┌───────────────────────────────────┐ +│ 核心发现 │ +└───────────────────────────────────┘ +结果 +┌───────────────────────────────────┐ +│ 核心趋势 │ +└───────────────────────────────────┘ +原因 +┌─────────────────┬─────────────────┐ +│ 增长分析 │ 利润分析 │ +└─────────────────┴─────────────────┘ +证据 +┌───────────────────────────────────┐ +│ 订单与区域明细 │ +└───────────────────────────────────┘ +``` + +每段围绕一个分析问题组织，不用固定的等高卡片把长表格、结论和图表硬压成同一高度。窄屏保留叙事顺序；联动限制在当前段落或明确定义的下游范围。 + +三种参考布局可以按章节组合，例如先用指标先行概览，再用分段叙事组织趋势与明细。先选阅读路径，再配置具体坐标；模式名称只是组装参考，实际保存的是组件关系与各断点的布局。 + +## 用 Dashboard DSL 保存布局 + +组件关系和可恢复的布局归 Dashboard DSL，通过 Builder 修改；UI 将布局转换为 CSS Grid。不要在 DSL 与 CSS 中分别维护两套卡片位置。 + +### 三种布局的坐标配方 + +下面以 12 列为基准，元组依次表示 `[角色, x, y, w, h]`。`positions()` 转成 Builder 接受的位置对象，`stack()` 按给定的阅读顺序生成窄屏单列。以下布局配方为 `insight` 留出桌面 3 行、窄屏 4 行，容纳周期说明和逐项列表。坐标是起点，行高、跨度和断点按内容调整；`h` 是网格行数，不是固定像素高度。下方渲染采用可增长的网格行，指标数量增加或文本换行时自动撑高对应行并顺延后续模块；调整模块的业务位置与最小跨度时仍通过 Builder 更新布局。 + +```javascript +const positions = (items) => Object.fromEntries(items.map(([role, x, y, w, h]) => [role, { x, y, w, h }])) +const stack = (items) => { + let y = 0 + return Object.fromEntries( + items.map(([role, h]) => { + const position = { x: 0, y, w: 12, h } + y += h + return [role, position] + }), + ) +} +const layoutPresets = { + focus: { + lg: positions([ + ['insight', 0, 0, 12, 3], + ['main', 0, 3, 8, 9], + ['growth', 8, 3, 4, 3], + ['orders', 8, 6, 4, 3], + ['profit', 8, 9, 4, 3], + ]), + xs: stack([ + ['insight', 4], + ['main', 9], + ['growth', 3], + ['orders', 3], + ['profit', 3], + ]), + }, + kpiFirst: { + lg: positions([ + ['insight', 0, 0, 12, 3], + ['orders', 0, 3, 4, 3], + ['growth', 4, 3, 4, 3], + ['profit', 8, 3, 4, 3], + ['main', 0, 6, 12, 9], + ]), + xs: stack([ + ['insight', 4], + ['orders', 3], + ['growth', 3], + ['profit', 3], + ['main', 9], + ]), + }, + story: { + lg: positions([ + ['insight', 0, 0, 12, 3], + ['main', 0, 3, 12, 9], + ['growth', 0, 12, 6, 6], + ['profit', 6, 12, 6, 6], + ['orders', 0, 18, 12, 4], + ]), + xs: stack([ + ['insight', 4], + ['main', 9], + ['growth', 6], + ['profit', 6], + ['orders', 4], + ]), + }, +} +``` + +分别对应示例中的趋势主导（`focus`）、指标先行（`kpiFirst`）和分段叙事（`story`），三种配方复用 `insight`、`main`、`growth`、`orders`、`profit` 五个角色；示例 HTML 将 `main` 命名为 `hero`。`insight` 绑定 Insight 资源，其余角色绑定 Chart 资源，切换时保留 widget ID、内容、分析配置与联动关系。区域明细在示例中位于这五个角色的网格之外，章节标题由 UI 组织。 + +`lg/xs` 是最小示例。需要平板两列短 KPI 等排列时，用同样的配方补充 `md/sm` 坐标，并让 UI 选择已配置的断点。窄屏重排后让 DOM 顺序与当前阅读顺序一致；仅改变 CSS Grid 的视觉位置不会改变键盘和读屏顺序。 + +### 将配方绑定到资源 + +下面假定已按[HTML 接入文档](../usage/how-use-vbi-in-html.md)导入 `VBI`，并创建 `trend`、`growth`、`totals`、`profit` 四个 Chart Builder。`insightContent` 的首行说明指标数量与周期，第二行保存一句重要结论，后续每行以 `- ` 开头保存一个指标的波动依据；`renderInsightContent()` 沿用轻量看板的渲染函数。以趋势主导模式演示绑定，其他两种模式复用这些资源，仅替换坐标配方： + +```javascript +const dashboard = VBI.dashboard.create(VBI.dashboard.createEmpty()) +const preset = layoutPresets.focus +const insight = VBI.insight.create(VBI.insight.createEmpty()).setContent(insightContent) +dashboard.insight.add((widget) => { + widget.setInsightId(insight).setTitle('核心发现').setLayouts({ + lg: preset.lg.insight, + xs: preset.xs.insight, + }) + document.querySelector('#insight-slot').dataset.widget = widget.getId() +}) +const renderInsight = () => { + renderInsightContent(insight.build().content) +} +insight.dsl.observeDeep(renderInsight) +renderInsight() +// 筛选后将新结论传给 insight.setContent(nextContent)；页面销毁时 unobserveDeep(renderInsight)。 +const widgets = [ + { + role: 'main', + chart: trend, + title: '销售总额', + slot: '#main-slot', + }, + { + role: 'growth', + chart: growth, + title: '销售增长', + slot: '#growth-slot', + }, + { + role: 'orders', + chart: totals, + title: '订单总数', + slot: '#orders-slot', + }, + { + role: 'profit', + chart: profit, + title: '利润', + slot: '#profit-slot', + }, +] +for (const { role, chart, title, slot } of widgets) { + dashboard.chart.add((widget) => { + widget.setChart(chart).setTitle(title).setLayouts({ lg: preset.lg[role], xs: preset.xs[role] }) + document.querySelector(slot).dataset.widget = widget.getId() + }) +} +``` + +`setLayouts()` 在 `dashboard.chart` 或 `dashboard.insight` 集合的 `add()` / `update()` 回调中提交，新增组件必须提供 `lg`。角色名只用于组装，不新增 DSL 字段；保存与恢复使用真实的 widget ID 和坐标。已有资源只改布局时，按 widget ID 调用对应集合的 `update()` 中的 `setLayouts()`，保留资源身份与分析配置。上述三种配方使用相同的五个资源，先匹配角色，再调整布局。保存时同时导出 Dashboard 和资源快照，确保洞察文本随资源恢复。 + +## Header + Content 示例 + +下面继续演示趋势主导模式，其他模式按角色与阅读顺序调整 Content 结构，共用 Header 和 DSL 到网格的映射。下方的数据说明与署名展示一种排布方式，按实际页面要求调整。样式中的颜色变量由[配色与背景最佳实践](./design.md#统一颜色变量)初始化；此处只定义布局与控件结构。过滤器的选中值应由当前分析配置初始化，点击只修改相关 Builder；具体刷新与指标绘制沿用轻量看板的 `applyPeriod()`、`requestRender()` 和 `draw()`。 + +```html +
+
+

经营概览

+
+ + + +
+
+
+
+
+

核心发现

+
+ +

+
    +
    +
    +
    +
    +
    +

    销售总额

    + — + +
    +
    +
    +
    +

    销售增长

    +
    + — + +
    +
    +
    +
    +
    +

    订单总数

    + — +
    +
    +
    +
    +

    利润

    +
    + — + +
    +
    +
    +
    +

    + 数据口径：当前筛选范围内销售额与利润求和，订单数去重；环比前一等长周期。 + Powered By VisActor +

    +
    +``` + +下方接入示例使用 24px 圆角，窄屏降为 16px。先引入[数值字号规范](./metric-card.md#数值字号规范)的容器与 token，将其容器查询中的 `.dashboard` 映射为本例 `.dashboard-grid`；以下代码仅按主辅角色消费字号。紧凑卡片可统一调整圆角，字号只按角色与断点整组切换，不逐卡覆盖。 + +```css +* { + box-sizing: border-box; +} +body { + margin: 0; + background: var(--background-base); + color: var(--ink); + font-family: Inter, 'PingFang SC', 'Microsoft YaHei', sans-serif; +} +.dashboard-view { + width: min(var(--content-width, 1140px), calc(100% - 32px)); + margin: 32px auto; +} +.dashboard-header { + display: flex; + align-items: center; + justify-content: space-between; + gap: 16px; + margin-bottom: 20px; +} +h1 { + margin: 0; + font-size: 24px; +} +h2 { + margin: 0 0 12px; + color: var(--muted); + font-size: 13px; + font-weight: 500; +} +.filters { + display: flex; + gap: 4px; + min-width: 0; + margin: 0; + padding: 0; + border: 0; +} +.filters button { + padding: 8px 12px; + border: 1px solid var(--border); + border-radius: 6px; + background: var(--surface); + color: var(--ink); + font: inherit; + cursor: pointer; +} +.filters button[aria-pressed='true'] { + border-color: var(--accent); + background: var(--accent-soft); +} +.filters button:focus-visible { + outline: 2px solid var(--accent); + outline-offset: 2px; +} +.dashboard-grid { + display: grid; + grid-template-columns: repeat(12, minmax(0, 1fr)); + grid-auto-rows: minmax(44px, auto); + gap: 16px; +} +.dashboard-attribution { + display: flex; + justify-content: flex-end; + flex-wrap: wrap; + gap: 4px 12px; + margin: 16px 0 0; + color: var(--muted); + font-size: 11px; + line-height: 1.5; + text-align: right; + overflow-wrap: anywhere; +} +.card-slot { + min-width: 0; + min-height: min-content; + display: flex; + flex-direction: column; +} +.card { + flex: 1; + min-height: min-content; + height: auto; + padding: 20px; + border: 1px solid var(--border); + border-radius: var(--card-radius, 24px); + background: var(--surface); +} +.insight-card { + padding: 12px 20px; + display: flex; + flex-direction: column; + justify-content: center; + gap: 10px; +} +.insight-card h2 { + margin: 0; + color: var(--accent-ink); +} +.insight-body { + display: grid; + gap: 8px; +} +.insight-conclusion { + color: var(--ink); + font-size: 16px; + font-weight: 600; + line-height: 1.65; + overflow-wrap: anywhere; +} +.insight-scope { + margin: 0; + color: var(--muted); + font-size: 12px; + line-height: 1.6; +} +.insight-list { + display: grid; + gap: 6px; + margin: 0; + padding-left: 20px; + font-size: 14px; + line-height: 1.65; + overflow-wrap: anywhere; +} +.insight-change { + font-weight: 600; + white-space: nowrap; +} +.insight-change[data-direction='up'] { + color: var(--insight-up, #12815e); +} +.insight-change[data-direction='down'] { + color: var(--insight-down, #c64a3f); +} +.main-card { + display: flex; + flex-direction: column; + transform: none; +} +.main-plot { + flex: 1; + min-height: 150px; + contain: size; + margin-top: 16px; +} +.sub-card { + transform: perspective(800px) rotate3d(var(--tilt-x, 0), var(--tilt-y, 1), 0, var(--tilt-angle, 0deg)); +} +.metric-value { + font-size: var(--metric-secondary-size); + font-variant-numeric: tabular-nums; + font-weight: 600; + letter-spacing: -0.025em; + line-height: 1.12; +} +.main-card > .metric-value { + font-size: var(--metric-primary-size); +} +.metric-body { + display: flex; + align-items: center; + justify-content: space-between; + gap: 12px; +} +.mini-plot { + width: clamp(72px, 28vw, 132px); + height: 72px; + flex-shrink: 0; + contain: size; +} +@media (max-width: 991px) { + .dashboard-header { + align-items: flex-start; + flex-wrap: wrap; + } +} +@media (max-width: 540px) { + .dashboard-view { + margin: 20px auto; + } + .card { + --card-radius: 16px; + padding: 16px; + } +} +@media (prefers-reduced-motion: reduce), (hover: none) { + .sub-card { + transform: none; + } +} +``` + +从 DSL 读取位置，布局应用后再调整 VChart 尺寸。`renderedCharts` 是沿用示例的 `Map`；初次绘图后也调用一次布局函数。 + +`minmax(44px, auto)` 将行高设为最小值，卡片按内容撑高；同一行的并列模块共享行高，下方模块自然顺延，不需把浏览器测得的像素高度写回 DSL。图表容器使用 `contain: size` 与明确尺寸或 `min-height`，避免 Canvas 内部尺寸反过来撑高网格，造成反复扩张；只对图表绘图区使用尺寸包含，不对洞察和文本容器使用。内容更新、字体加载或窄屏换行后的容器变化仍需触发图表 `resize()`。 + +```javascript +const grid = document.querySelector('.dashboard-grid') +function layoutDashboard() { + const dsl = dashboard.build() + const breakpoint = grid.clientWidth >= dsl.breakpoints.lg ? 'lg' : 'xs' + const ordered = [...dsl.layout[breakpoint]].sort((a, b) => a.y - b.y || a.x - b.x) + for (const [index, item] of ordered.entries()) { + const slot = grid.querySelector(`[data-widget="${item.widgetId}"]`) + if (grid.children[index] !== slot) grid.insertBefore(slot, grid.children[index] ?? null) + slot.style.gridColumn = `${item.x + 1} / span ${item.w}` + slot.style.gridRow = `${item.y + 1} / span ${item.h}` + } + renderedCharts.forEach((instance, element) => instance.resize(element.clientWidth, element.clientHeight)) +} +const resizeObserver = new ResizeObserver(layoutDashboard) +resizeObserver.observe(grid) +layoutDashboard() +// 页面销毁时执行 resizeObserver.disconnect()，并释放图表实例。 +``` + +这里以内容容器宽度选择断点，适用于看板嵌入侧栏或其他宿主。布局按 `y`、`x` 排序，再按该顺序移动容器，确保视觉、键盘与读屏顺序一致。CSS 的媒体查询调整 Header、内边距与圆角，不覆盖 DSL 中的卡片位置。示例三种布局共享最大 1140px 的外壳；新页面可通过 `.dashboard-view` 的 `--content-width` 按图表标签与宿主空间调整内容宽度。 + +最大内容宽度与 DSL 断点要配套设置。叙事页面若最大 960px，却仍使用默认 `lg: 992`，就始终只能选中窄屏布局；可根据并列模块的最小宽度，在创建 Dashboard 时把 `breakpoints.lg` 改为 800 等适合的阈值。重排时只移动位置确实变化的容器；若容器中存在已聚焦控件，保留并恢复焦点，避免键盘操作被响应式重排打断。 + +## 按模块关系联动与轻微倾斜 + +三种布局沿用示例的 `bindMetricHover()`：主图使用 `all` 作用域，增长图和利润图分别使用 `growth`、`profit`。移出时恢复相同作用域的区间汇总，子图不调用 `all`。切换布局不改变联动作用域，不因某个模块变大或排在左侧就让它控制全部指标。新页面按分析任务定义下游范围。具体指标更新示例见[指标卡最佳实践](./metric-card.md)。 + +倾斜绑定到固定外层 `.card-slot`，仅变换内层 `.sub-card`，避免图表 Canvas 或卡片自身的变换改变命中边界。透视与倾斜都放在内层卡片的 `transform` 中，外层不设置 `perspective`，内容保持在同一卡片平面上，避免父容器拦截图表悬停。下面使用单个 `rotate3d()` 角度，整体旋转被限制为 2°，避免两个轴各 2° 时合成倾斜超过上限。 + +```javascript +function bindSubCardTilt(slot) { + const card = slot.querySelector('.sub-card') + const motion = matchMedia('(prefers-reduced-motion: reduce)') + const mouse = matchMedia('(hover: hover) and (pointer: fine)') + const reset = () => card.style.setProperty('--tilt-angle', '0deg') + function move(event) { + if (motion.matches || !mouse.matches || event.pointerType !== 'mouse') return reset() + const rect = slot.getBoundingClientRect() + const x = Math.max(-1, Math.min(1, ((event.clientX - rect.left) / rect.width - 0.5) * 2)) + const y = Math.max(-1, Math.min(1, ((event.clientY - rect.top) / rect.height - 0.5) * 2)) + card.style.setProperty('--tilt-x', String(-y)) + card.style.setProperty('--tilt-y', String(x)) + card.style.setProperty('--tilt-angle', `${Math.min(1, Math.hypot(x, y)) * 2}deg`) + } + slot.addEventListener('pointermove', move, { capture: true, passive: true }) + slot.addEventListener('pointerleave', reset) + slot.addEventListener('pointercancel', reset) + window.addEventListener('blur', reset) + window.addEventListener('scroll', reset, { capture: true, passive: true }) + motion.addEventListener('change', reset) + mouse.addEventListener('change', reset) + return () => { + slot.removeEventListener('pointermove', move, true) + slot.removeEventListener('pointerleave', reset) + slot.removeEventListener('pointercancel', reset) + window.removeEventListener('blur', reset) + window.removeEventListener('scroll', reset, true) + motion.removeEventListener('change', reset) + mouse.removeEventListener('change', reset) + reset() + } +} +const disposeTilts = [...document.querySelectorAll('.sub-card')].map((card) => bindSubCardTilt(card.parentElement)) +// 页面销毁时执行 disposeTilts.forEach((dispose) => dispose())。 +``` + +## 卡片按顺序延时入场 + +卡片按当前阅读顺序依次入场，同一行从左到右。少量卡片可采用间隔 **380–480ms**、单卡时长 **1200–1500ms**；下面采用首张延时 **120ms**、卡片间隔 **420ms**、单卡时长 **1400ms**，结合透明度和 10px 上移形成缓和的出现效果，让相邻卡片的启动时刻有清楚可感知的间隔。轻量看板的 Header 与卡片沿用 420ms 间隔、1400ms 时长。模块较多或长叙事按可见行或章节分批播放，避免后续内容累积过长等待；开放式分区无需套用卡片动效。 + +动画施加到外层 `.card-slot`，内层 `.sub-card` 保留独立的轻微倾斜。页面首次数据与图表就绪后统一入场；过滤、悬停和响应式重排只更新内容及位置，不重复播放整页入场。HTML 默认保持可见，初始化进入等待状态后才隐藏卡片，加载失败时立即恢复可见并展示错误反馈。 + +```css +.dashboard-grid[data-entrance='pending'] .card-slot { + opacity: 0; +} +@media (prefers-reduced-motion: reduce) { + .dashboard-grid[data-entrance='pending'] .card-slot { + opacity: 1; + } +} +``` + +使用上述 `grid`、`dashboard` 和布局断点，按 DSL 位置计算入场顺序。不要仅依赖 DOM 顺序，以免移动端重排后动画顺序与实际位置不一致。 + +```javascript +const entranceMotion = matchMedia('(prefers-reduced-motion: reduce)') +let entranceAnimations = [] +let entranceStarted = false +function finishCardEntrance() { + entranceStarted = true + grid.dataset.entrance = 'complete' + entranceAnimations.forEach((animation) => animation.cancel()) + entranceAnimations = [] +} +function prepareCardEntrance() { + if (entranceMotion.matches) finishCardEntrance() + else grid.dataset.entrance = 'pending' +} +function revealCards() { + if (entranceStarted) return + entranceStarted = true + if (entranceMotion.matches) return finishCardEntrance() + const dsl = dashboard.build() + const breakpoint = grid.clientWidth >= dsl.breakpoints.lg ? 'lg' : 'xs' + const ordered = [...dsl.layout[breakpoint]].sort((a, b) => a.y - b.y || a.x - b.x) + grid.dataset.entrance = 'playing' + entranceAnimations = ordered.map((item, index) => { + const slot = grid.querySelector(`[data-widget="${item.widgetId}"]`) + return slot.animate( + [ + { opacity: 0, transform: 'translateY(10px)' }, + { opacity: 1, transform: 'translateY(0)' }, + ], + { delay: 120 + index * 420, duration: 1400, easing: 'cubic-bezier(.2,.75,.25,1)', fill: 'both' }, + ) + }) + Promise.all(entranceAnimations.map((animation) => animation.finished.catch(() => {}))).then(finishCardEntrance) +} +const onEntranceMotionChange = () => { + if (entranceMotion.matches) finishCardEntrance() +} +entranceMotion.addEventListener('change', onEntranceMotionChange) +// 初始化、异步加载前调用 prepareCardEntrance()；首次布局和绘图完成后调用 revealCards()。 +// 加载失败时调用 finishCardEntrance()。 +// 销毁时移除 onEntranceMotionChange 监听，并调用 finishCardEntrance() 取消剩余动画。 +``` + +减少动态效果模式下所有卡片直接可见，立即取消剩余入场动画。数值过渡与图表数据更新另按[指标卡最佳实践](./metric-card.md)处理。 + +## 示例参考与验收 + +轻量看板提供三种布局的 `layoutPresets`、`bindWidget()`、`layoutDashboard()`、`bindMetricHover()` 与实例更新的完整参考。三种布局共享最大 1140px 的外壳，复用相同指标与顶部洞察资源，支持数值更新动画与最大 2° 的轻微倾斜。洞察保持平面，文本随周期筛选更新。 + +验收覆盖移动端 375px / 390px、桌面 1440px、大屏 1920px，以及窄于窗口的嵌入容器： + +按照[截图对照验收](./visual-acceptance.md)保存并实际查看最终截图。以下项目同时检查布局正确性；视觉风格还需对照参照的比例、密度与视觉重量。 + +- 布局与分析任务匹配；内容宽度、列数和高度适合标签、指标与图表，没有横向溢出或大片无意义留白。 +- 增加洞察条目、延长文本、放大字号及切换窄屏后，卡片自动撑高，后续模块顺延，无裁切、重叠或内部纵向滚动条；内容缩短后高度回落，图表尺寸稳定，无持续扩张。 +- 三种布局在桌面与窄屏都先呈现“核心发现”，核心与衍生证据完整可读；内容与联动按[洞察验收](./insight.md#验收)检查。 +- 圆角与卡片尺寸、留白相称；宽松布局可参考 24–26px，窄屏、小容器和小卡片适当减小，不挤压文字或图表。 +- 数据口径说明准确并随筛选更新，窄屏不溢出，不遮挡图表与控件。 +- 同一断点中所有模块坐标不越界、不重叠；桌面与窄屏角色完整，DOM、键盘与读屏顺序符合当前阅读路径。 +- 趋势主导突出主趋势；指标先行先展示核心指标；分段叙事的章节与证据顺序清楚。卡片或开放分区按内容选用。 +- 联动按声明的模块关系发生，独立模块不意外更新其他区域，移出时恢复对应范围的汇总。 +- 大型交互图表保持平面；启用倾斜的小卡片始终不超过 2°。入场不会因模块较多造成长时间等待，筛选时不重复播放；减少动态效果模式下关闭倾斜与入场。 +- 保存恢复后资源身份、分析配置与各断点坐标一致。具体方法见[实践技巧](../usage/tips.md)。 diff --git a/skills/light-dashboard/references/best-practices/metric-card.md b/skills/light-dashboard/references/best-practices/metric-card.md new file mode 100644 index 0000000000..0b55676533 --- /dev/null +++ b/skills/light-dashboard/references/best-practices/metric-card.md @@ -0,0 +1,356 @@ +# 指标卡最佳实践 + +指标卡由短标题、指标文本和迷你图组成。参考[轻量看板示例](../../templates/example.html)的主趋势、销售增长与利润卡片；页面宽度、圆角和联动方向遵循[设计与布局最佳实践](./layout.md)，强调色、填充色与正负值颜色见[配色与背景最佳实践](./design.md)。 + +用于承载最重要指标的大幅趋势卡，使用渐变面积图并展示统计范围，见[趋势图最佳实践](./trend.md)。下方 mini 图配置用于指标旁的小型图，不替代主趋势图。 + +## 数值字号规范 + +先按分析优先级分配角色，再设置全页共用的字号 token。同一角色在同一断点必须使用相同字号、字重与行高；宽卡、窄卡、不同数字位数以及汇总 / 筛选 / 悬停状态都不能各自决定字号。卡片变宽不代表辅助指标升级为主指标。并列、同等重要的 KPI 使用同一层级；只有分析角色改变才改变层级。 + +下表是新建轻量看板的默认值。用户指定的品牌规范或已有宿主可以替换整套值，但仍须统一映射，不能逐卡随意覆盖。模板中的局部字号只是实现参考，不应照搬成多套互相冲突的规则。 + +| 数值角色 | 桌面 | 窄屏（内容容器 ≤800px） | 使用位置 | +| ------------------- | --------- | ----------------------- | -------------------------------------- | +| 主指标 | 60px | 40px | 主分析区最重要的数值。 | +| 辅助指标 | 28px | 26px | 辅助卡或并列指标行。 | +| 卡内衍生指标 | 22px | 20px | 主卡底部的比率、均值、覆盖等补充数值。 | +| 主指标单位 | 24px | 18px | 与主数字分离的金额、数量或物理单位。 | +| 辅助 / 衍生指标单位 | 16 / 14px | 14 / 12px | 与对应层级保持一致。 | + +数值统一使用等宽数字特性 `tabular-nums`、字重 600 和约 1.12 行高；单位字重 500。币种前缀与数值作为一个读数，单位使用独立节点，不能为了让长单位放得下而把整段数字缩小。常规指标标签和口径说明保持 12–14px 的清晰层级。 + +```css +.dashboard-view { + container-type: inline-size; + --metric-primary-size: 60px; + --metric-secondary-size: 28px; + --metric-tertiary-size: 22px; + --metric-primary-unit-size: 24px; + --metric-secondary-unit-size: 16px; + --metric-tertiary-unit-size: 14px; +} +.hero-value, +.small-value, +.submetric-value { + font-variant-numeric: tabular-nums; + font-weight: 600; + line-height: 1.12; + letter-spacing: -0.025em; +} +.hero-value { + font-size: var(--metric-primary-size); +} +.small-value { + font-size: var(--metric-secondary-size); +} +.submetric-value { + font-size: var(--metric-tertiary-size); +} +.metric-number, +.metric-unit { + white-space: nowrap; +} +.metric-unit { + display: inline-block; + margin-left: 0.12em; + font-weight: 500; + letter-spacing: 0; +} +.hero-value .metric-unit { + font-size: var(--metric-primary-unit-size); +} +.small-value .metric-unit { + font-size: var(--metric-secondary-unit-size); +} +.submetric-value .metric-unit { + font-size: var(--metric-tertiary-unit-size); +} +@container (max-width: 800px) { + .dashboard { + --metric-primary-size: 40px; + --metric-secondary-size: 26px; + --metric-tertiary-size: 20px; + --metric-primary-unit-size: 18px; + --metric-secondary-unit-size: 14px; + --metric-tertiary-unit-size: 12px; + } +} +``` + +`.dashboard-view` 是外层容器，`.dashboard` 是包含指标的后代网格，HTML 集成时映射到实际选择器。独立全屏页面也可使用相同断点的媒体查询；每个断点整组切换 token，不在单卡内按宽度缩字。单位与数字可自然换到不同的行，但数字本身和单位本身不拆散；动画只更新数值节点，保持单位节点与字号不变。 + +长数字先预留足够宽度、调整卡片跨度或 mini 图位置；业务允许时统一采用千分位、合适精度或明确标注的万 / 百万等单位，并让表格、Tooltip 可核对准确值。仍放不下时重排或自然增高，不裁切、不省略关键数值，也不使用逐卡自动适配字号。 + +验收时比较同层级所有指标的实际 `font-size`，同时检查默认汇总、最长数值、负值、百分比、带单位数值和筛选 / 局部查看后的状态。允许数值变化，不允许字号跳动；桌面与窄屏分别检查，避免只看 CSS 声明而漏掉后续选择器覆盖。 + +## 文本与迷你图配合 + +| 迷你图 | 适用内容 | 展示要求 | +| ----------- | ------------------------ | -------------------------------------------- | +| Mini line | 连续趋势、增长走势 | 使用细线，默认隐藏常驻数据点，悬停仍可读数。 | +| Mini area | 强调趋势的规模或总量 | 在细线下增加面积填充，保留轮廓可读性。 | +| Mini column | 每日利润、订单数等离散值 | 保留零值基准和负值，使用小圆角柱体。 | + +迷你图建议宽 80–140px、高 56–80px，与指标文本并排。单卡展示一个主要指标，避免堆叠长说明和装饰图标。 + +**Mini line、Mini area、Mini column 都必须禁用数据标签、图例和全部坐标轴元素，包括轴标题、轴标签、轴线、刻度与网格线；悬停时也不显示坐标轴上的准星标签。** 只保留折线、面积或柱体表达趋势，不为已隐藏的元素预留空间，不额外添加图表标题、参考线或注释，做到真正的 mini，而不是缩小的完整图表。可以保留按需出现的 Tooltip 与指标文本联动，时间口径放在指标卡文本或 Tooltip 中；HTML 容器通过 `role="img"` 和 `aria-label` 说明趋势含义。柱图保留零值在数值尺度中的基准作用，但不绘制零线。 + +文本与图表使用同一筛选范围和基础查询结果。汇总文本不依赖对逐日去重订单数再次求和；客单价和利润率使用汇总值计算。日期按顺序排列；只有业务确认“当天无记录即为零”时才补零，未知或缺失数据不要当作零。查询与派生指标的状态归属见[实践技巧](../usage/tips.md)。 + +## VSeed 配置：mini column、mini line、mini area + +以下为 JavaScript 示例，假定已导入 VSeed 的 `Builder`、`registerAll` 和 `VChart`；浏览器导入方式见[HTML 接入](../usage/how-use-vbi-in-html.md)。`mini` 是容器 DOM，容器须有明确尺寸。三种 mini 图使用普通 `column`、`line`、`area` 类型，加紧凑展示配置，不需要新增图表类型。 + +### 公共配置 + +示例使用已聚合的每日销售额，页面先按配色文档初始化 `--accent`，以下配置只消费这一颜色变量。三种迷你图都必须复用以下隐藏标签、图例与坐标轴的公共配置，并在各自配置中关闭准星标签。接入 VBI 的 `buildVSeed()` 时保留其 `dataset`、维度和度量 ID，在返回的 seed 上补充以下视觉属性即可。 + +```javascript +registerAll() +const accent = getComputedStyle(document.documentElement).getPropertyValue('--accent').trim() +const reducedMotion = matchMedia('(prefers-reduced-motion: reduce)') +const dailySales = [ + { date: '2026-10-01', value: 120 }, + { date: '2026-10-02', value: 145 }, + { date: '2026-10-03', value: 90 }, + { date: '2026-10-04', value: 160 }, + { date: '2026-10-05', value: 110 }, + { date: '2026-10-06', value: 180 }, + { date: '2026-10-07', value: 165 }, +] +function miniAxis() { + return { + visible: false, + title: { visible: false }, + label: { visible: false }, + line: { visible: false }, + tick: { visible: false }, + grid: { visible: false }, + } +} +function miniBase() { + return { + theme: 'light', + dataset: dailySales.map((row) => ({ ...row })), + dimensions: [{ id: 'date', alias: '日期', encoding: 'xAxis' }], + measures: [ + { id: 'value', alias: '销售额', encoding: 'yAxis', format: { type: 'number', prefix: '¥', fractionDigits: 0 } }, + ], + backgroundColor: 'transparent', + color: { colorScheme: [accent] }, + label: { enable: false }, + legend: { enable: false }, + xAxis: miniAxis(), + yAxis: { ...miniAxis(), zero: true }, // 保留零值基准，不显示轴线或零线。 + tooltip: { enable: true }, + animation: { + enable: !reducedMotion.matches, + params: { + appear: { enable: false }, + update: { enable: true, duration: 600, ease: 'cubicInOut' }, + }, + }, + } +} +``` + +### Mini column + +```javascript +const miniColumnSeed = { + ...miniBase(), + chartType: 'column', + crosshairRect: { labelVisible: false }, + barMaxWidth: 12, + barStyle: { barRadius: 2, barColor: accent, barColorOpacity: 0.75, barGradient: false, barBorderWidth: 0 }, +} +``` + +展示利润时替换为已查询的每日利润数据和度量别名，负值保留在零值基准下方；语义色配置统一见[配色与背景最佳实践](./design.md#图表配色与页面同步)。 + +### Mini line + +```javascript +const miniLineSeed = { + ...miniBase(), + chartType: 'line', + crosshairLine: { labelVisible: false }, + pointStyle: { pointVisible: false }, + lineStyle: { lineWidth: 1.5, lineColor: accent, lineSmooth: true }, +} +``` + +### Mini area + +```javascript +const miniAreaSeed = { + ...miniBase(), + chartType: 'area', + crosshairLine: { labelVisible: false }, + pointStyle: { pointVisible: false }, + lineStyle: { lineWidth: 1.5, lineColor: accent, lineSmooth: true }, + areaStyle: { areaColor: accent, areaColorOpacity: 0.18, areaGradient: false }, +} +``` + +轻量看板的 Mini line、Mini area 与主趋势默认使用平滑曲线，保持视觉一致。若数据点少、突变明显或曲线产生不存在的峰谷，再改用直线并说明原因；Tooltip 始终显示真实查询点值。 + +### 构建与更新实例 + +```javascript +function buildMiniSpec(seed) { + const spec = Builder.from(seed).build() + spec.padding = { top: 4, right: 4, bottom: 4, left: 4 } + // 轻量看板固定使用 0.6.4；关闭旧版整组圆角裁剪，圆角由 barStyle 绘制。 + if (seed.chartType === 'column') spec.stackCornerRadius = 0 + return spec +} +let activeSeed = miniLineSeed // 也可使用 miniColumnSeed / miniAreaSeed。 +const spec = buildMiniSpec(activeSeed) +const instance = new VChart(spec, { dom: mini }) +instance.renderSync() +// 来源是 VBI Chart Builder 时，首次渲染后执行 chartBuilder.instance.bind(instance)。 + +async function updateMini(nextSeed) { + activeSeed = nextSeed + if (reducedMotion.matches) instance.stopAnimation() + await instance.updateSpec( + buildMiniSpec({ + ...nextSeed, + animation: { ...nextSeed.animation, enable: !reducedMotion.matches }, + }), + ) +} +const onMotionChange = () => updateMini(activeSeed).catch((error) => console.error(error)) +reducedMotion.addEventListener('change', onMotionChange) +// 容器改变大小时调用 instance.resize(width, height)。 +// 销毁时移除 onMotionChange 监听，再调用 instance.release()。 +``` + +更新时保持日期、字段 ID 和系列含义稳定，并复用实例。`stackCornerRadius` 的覆盖用于上述固定版本的兼容处理，升级时按当前 VSeed API 检查是否仍需覆盖。 + +## 指标文本更新动画 + +统计范围切换、日期悬停和恢复汇总时，指标文本必须有数值过渡。轻量看板统一采用约 600ms，与图表更新节奏一致；首次显示直接展示真实值，避免从虚构的零值开始。销售额、订单、利润、增长率、变化率、占比、利润率与客单价都覆盖，不能只让主数字动起来。连续更新从当前显示值继续，取消上一次动画，不能等旧动画结束后覆盖新值。 + +为数字与单位保留独立节点，例如订单卡使用下方结构；金额卡的币种前缀可由数值格式化器输出。更新函数接收 `.metric-number`，不覆盖外层指标节点，从而保留单位及其字号。展示单位发生变化时在本次查询结果应用阶段统一更新，不在动画每帧重建节点。 + +```html + + —单 + +``` + +```javascript +const metricAnimations = new Map() +function updateMetric(element, target, format = String, duration = 600) { + const previous = metricAnimations.get(element) + if (previous) cancelAnimationFrame(previous.frame) + if (!Number.isFinite(target)) { + metricAnimations.delete(element) + element.textContent = '—' + return + } + const state = { value: previous?.value ?? target, frame: 0 } + metricAnimations.set(element, state) + const from = state.value + const started = performance.now() + function tick(now) { + const progress = + from === target || reducedMotion.matches || duration <= 0 ? 1 : Math.min(1, (now - started) / duration) + const eased = 1 - (1 - progress) ** 3 + state.value = from + (target - from) * eased + element.textContent = format(state.value) + state.frame = progress < 1 ? requestAnimationFrame(tick) : 0 + } + tick(started) +} +const money = (value) => + new Intl.NumberFormat('zh-CN', { style: 'currency', currency: 'CNY', maximumFractionDigits: 0 }).format(value) +const number = (value) => new Intl.NumberFormat('zh-CN', { maximumFractionDigits: 0 }).format(value) +// total 是 VBI 汇总查询结果经字段映射后的业务对象。 +updateMetric(document.querySelector('#sales .metric-number'), total.sales, money) +updateMetric(document.querySelector('#orders .metric-number'), total.order_id, number) +updateMetric(document.querySelector('#profit .metric-number'), total.profit, money) +``` + +数字使用 `font-variant-numeric: tabular-nums` 保持字符宽度稳定。图表 Tooltip 显示真实查询值，动画只用于展示，不参与计算或导出。减少动态效果模式下直接显示目标值；空值显示 `—`，不要转换成零。销毁时取消全部 `metricAnimations` 中的帧并清空 Map。 + +## 与图表联动 + +轻量看板的主图联动全部指标，增长小图只更新增长卡，利润小图只更新利润卡。悬停显示当日值与前一天比较，移出恢复对应卡片的区间汇总与前一个等长周期比较。这里的“较前一天 / 较前 N 天”是必要的指标口径，可以放在卡片内短标签或 Tooltip 中，无需页面 subtitle。 + +沿用示例的查询方式：一次刷新得到 `dailyTotals` 和 `dailyConsumers`，建立日期索引，悬停时读取缓存；不要每次鼠标移动都重新查询。把示例 `showMetrics()` 中对数值文本的直接赋值替换为 `updateMetric()`，并保留它的 `scope` 判断与零分母处理。增长率、利润率等目标值先由真实聚合结果计算，再执行文本动画。 + +以下片段假定已经创建并绑定 `trend`、`growth`、`profit` Builder，`showDate(date, scope)` / `restore(scope)` 读取本次查询的日期索引和汇总，调用上述动画更新相应卡片。每次刷新替换 `currentMetrics`，事件只订阅一次，避免监听器引用旧数据。[模板](../../templates/template-business-overview.html)还保留消费者占比环图：占比用范围内去重消费者订单数除以去重总订单数，固定分类与字段供 `updateSpec()` 匹配；主图逐日联动时同步更新环图与占比文本，环图 Tooltip 显示真实分类占比。 + +```javascript +let currentMetrics = { showDate, restore } +let metricsReady = true +function bindMetricHover(chart, scope, delay = 75) { + let timer, pendingDate, shownDate + function reset() { + clearTimeout(timer) + pendingDate = shownDate = undefined + } + const reportError = (error) => console.error(error) + function onHover({ action, dimensionInfo }) { + if (!metricsReady) return reset() + if (action === 'leave') { + const shouldRestore = shownDate !== undefined + reset() + if (shouldRestore) Promise.resolve(currentMetrics.restore(scope)).catch(reportError) + return + } + const date = dimensionInfo?.[0]?.value + if (typeof date !== 'string' || date === pendingDate) return + clearTimeout(timer) + pendingDate = undefined + if (date === shownDate) return + pendingDate = date + timer = setTimeout(() => { + pendingDate = undefined + if (!metricsReady) return + shownDate = date + Promise.resolve(currentMetrics.showDate(date, scope)).catch(reportError) + }, delay) + } + chart.instance.on('dimensionHover', onHover) + return { + reset, + dispose() { + reset() + chart.instance.off('dimensionHover', onHover) + }, + } +} +const hoverSubscriptions = [ + bindMetricHover(trend, 'all'), + bindMetricHover(growth, 'growth'), + bindMetricHover(profit, 'profit'), +] +function pauseMetricHover() { + metricsReady = false + hoverSubscriptions.forEach((subscription) => subscription.reset()) +} +async function resumeMetricHover(nextMetrics) { + currentMetrics = nextMetrics + await currentMetrics.restore('all') + metricsReady = true +} +// 刷新开始时 pauseMetricHover()；数据与图表就绪后 await resumeMetricHover(nextMetrics)。 +// 页面销毁时调用各订阅的 dispose()。 +``` + +默认延迟 75ms 与当前轻量看板实现一致，只延迟指标联动，原生 Tooltip 和悬停点即时响应。刷新、离开或销毁时取消待执行任务；禁止子图更新主区域或其他子区域。加载中的事件拦截、查询过期检查与刷新队列沿用示例的 `run()` 和 `requestRender()`。 + +## 验收 + +- 同层级指标使用同一字号 token；长数字、负值、单位与筛选 / 悬停 / 恢复不触发缩字。窄屏整组切换；实际 computed style 与[数值字号规范](#数值字号规范)一致。 +- 三种迷你图均不显示数据标签、图例、坐标轴及其标题、标签、轴线、刻度、网格线，也不为这些元素预留空间；悬停不出现准星标签，Tooltip 与指标文本联动正常。 +- 切换 30 → 14 → 7 → 30 天，指标文本和迷你图使用一致范围，复用同一渲染实例。 +- 悬停主图时全部指标更新，悬停小图时只有所属卡片更新，移出后恢复相同作用域的汇总。 +- 快速移动鼠标或切换周期，旧定时任务和旧数值动画不会覆盖最新值；悬停不增加查询次数。 +- 零分母、空值和负利润正确显示，柱图负值位于零值基准下方且不绘制零线；移动端无文字与图表重叠。 +- 减少动态效果模式下停止数值过渡与图表动画；销毁后无残留监听、定时器和动画帧。 diff --git a/skills/light-dashboard/references/best-practices/trend.md b/skills/light-dashboard/references/best-practices/trend.md new file mode 100644 index 0000000000..2db59baf6d --- /dev/null +++ b/skills/light-dashboard/references/best-practices/trend.md @@ -0,0 +1,84 @@ +# 趋势图最佳实践 + +适用于 Dashboard 中最重要指标的时间趋势。**将主要指标放在独立卡片中，以带渐变填充的面积图展示，并同时提供指标数值、比较基准与统计范围。** 参考[轻量看板示例](../../templates/example.html)的 `#hero-card`、`#trend` 和 `buildChartSpec()`；卡片布局见[布局最佳实践](./layout.md)，配色见[视觉设计最佳实践](./design.md)，小型趋势与数字过渡见[指标卡最佳实践](./metric-card.md)。 + +## 卡片结构与信息层级 + +| 区域 | 内容与要求 | +| ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------- | +| 顶部 | 指标短标题及可选图标；保持简约，将空间留给指标与趋势。 | +| 主指标 | 按[数值字号规范](./metric-card.md#数值字号规范)的主指标 token 展示真实汇总值，单位独立分级。下方展示变化率与比较基准；数值长度与筛选状态不改变字号。 | +| 趋势主体 | 单个主要指标的渐变面积图，轮廓线清晰、底部逐渐透明；给趋势足够的高度与留白。 | +| 日期标注 | 默认只显示起始、中间、结束日期；完整日期和当日值通过 Tooltip 查看。 | +| 底部辅助指标 | 可展示与主指标相关的利润率、客单价等少量指标，以轻分隔线组织，不再套独立卡片。 | + +卡片使用统一圆角、浅色背景和内边距。指标文本、面积图与辅助指标共享统计范围；利润率用汇总利润除以汇总销售额，客单价用汇总销售额除以去重订单数，不能直接平均每日比率或累加逐日去重数。零分母显示 `—`，没有可比基期时说明“暂无可比数据”。变化方向同时用文字或箭头表达，不能只靠颜色。 + +窄屏允许辅助指标纵向排列；数值不能溢出卡片。图表容器须有明确高度，可沿用示例的弹性布局与 `min-height: 150px`，根据卡片尺寸增加绘图区高度。主趋势卡保持平面，不应用指标小卡的鼠标倾斜效果。 + +## 简约坐标轴与渐变面积 + +默认隐藏轴标题、轴线、刻度、网格线及 Y 轴标签；X 轴也可隐藏，在图下用 HTML 标注三个日期，参考示例的 `.plot-labels`。不要同时显示两套日期标签。若分析任务确需直接比较绝对值，可保留少量 Y 轴标签，仍避免密集网格、常驻数据标签和重复图例。 + +面积填充使用同一强调色，从轮廓附近的浅色渐变到底部透明；不要用高不透明度遮盖走势，或用多种渐变颜色制造不存在的数值含义。截图中的绿色只是参考，主色沿用页面配色规则。保留零值基准和真实负值，不为制造波动裁掉零基线或把亏损改为零。 + +以下配置接收 `await trend.buildVSeed()` 得到的面积图 seed，保留其查询结果与字段 ID。假定已导入 VSeed 的 `Builder`、调用 `registerAll()`，并从页面统一配色中取得 `accent`。浏览器依赖与内置数据方式见[HTML 接入](../usage/how-use-vbi-in-html.md)。 + +```javascript +function buildTrendSpec(seed, accent, reducedMotion = false) { + const hiddenAxis = () => ({ + visible: false, + title: { visible: false }, + label: { visible: false }, + line: { visible: false }, + tick: { visible: false }, + grid: { visible: false }, + }) + const spec = Builder.from({ + ...seed, + backgroundColor: 'transparent', + color: { colorScheme: [accent] }, + label: { enable: false }, + legend: { enable: false }, + xAxis: hiddenAxis(), + yAxis: { ...hiddenAxis(), zero: true }, + pointStyle: { pointVisible: false }, + lineStyle: { lineWidth: 2.5, lineColor: accent, lineSmooth: true }, + areaStyle: { areaColor: accent, areaColorOpacity: 0.27, areaGradient: true }, + tooltip: { enable: true }, + crosshairLine: { labelVisible: false }, + animation: { + enable: !reducedMotion, + params: { appear: { enable: false }, update: { enable: true, duration: 600, ease: 'cubicInOut' } }, + }, + }).build() + spec.padding = { top: 8, bottom: 4, left: 3, right: 9 } + return spec +} +``` + +`areaGradient: true` 控制面积填充从顶部颜色到底部透明，顶部透明度由 `areaColorOpacity` 控制；轮廓线保持清楚。轻量看板主趋势与迷你趋势默认 `lineSmooth: true`，仅在确有虚假峰谷等误导风险时说明并改用直线，Tooltip 保持真实点值。平滑、渐变与约 600ms 的更新过渡是轻量基线，不因模板精简而删除。 + +## 数据范围与查询 + +使用 Chart Builder 创建 `area` 图表，以日期为 X 轴、主要指标为 Y 轴，明确聚合方式与日期升序。指标、趋势、比较基准、日期标注与辅助数值保持同一统计口径；范围变化后一起更新。筛选器的位置、条件维护与刷新链路统一见[Filter 最佳实践](./filter.md)，趋势卡无需重复放置全局筛选。 + +先按时间粒度整理日期并排序。只有业务确认“当天无记录即为零”时，才参考 `buildChartSpec()` 补齐缺失日期；未知、未采集或尚未同步的数据不能伪装成零。空区间显示空状态，不绘制虚构曲线。数据请求期间显示加载状态，连续变化时丢弃过期结果；复用渲染实例调用 `updateSpec()`。 + +## 图内独立交互 + +默认只在当前趋势卡内交互：悬停或触摸可查看日期和真实值，卡内主指标与辅助指标可随日期更新；移出恢复该卡的区间汇总。悬停时显示“当日指标 / 较前一天”，恢复后显示“区间汇总 / 较前 N 天”，避免将单日值误解为周期总额。触屏无法依赖鼠标移出，应支持取消选中或明确的恢复汇总操作。 + +采用轻量看板风格时，主趋势必须使用 `scope: 'all'` 联动整个看板，增长与利润小图只更新自身；局部悬停不改区间洞察。创建独立趋势卡时将更新函数限定到本卡 DOM、缓存和 Builder；局部逐日查看不应改变其他独立卡片。触屏提供逐日按钮与恢复汇总入口，图表支持左右键 / Esc，见[模板](../../templates/template-business-overview.html)。 + +实现时参考示例的 `draw()` 首次创建 VChart 后执行 `trend.instance.bind(instance)`，再通过 `trend.instance.on('dimensionHover', handler)` 订阅日期悬停。使用本次查询建立的日期索引读取指标，鼠标移动不触发新查询；同一天去重更新。事件订阅、75ms 延迟与清理方式见[指标卡的悬停实现](./metric-card.md#与图表联动)，将 `showDate()` / `restore()` 限定为当前卡即可。Tooltip 和悬停反馈保留，不因隐藏坐标轴而禁用。 + +数据范围变化前取消待执行的悬停任务、清除旧选中日期；新结果就绪后恢复区间汇总。减少动态效果模式下停止数值与图表动画。容器变化后调用 `resize()`；销毁时移除监听、定时器与动画帧并释放图表实例。 + +## 验收 + +- 主指标以带渐变填充的面积图展示，坐标轴简约，日期标注不重复；卡片具有清楚的主次层级，桌面与窄屏无溢出。 +- 数据范围变化后，主指标、比较基准、趋势、日期标注和辅助指标同步更新，符合已声明的作用范围。 +- 悬停、触摸与恢复汇总均能读到真实日期和指标；独立模式下不改变其他卡片，悬停不增加查询次数。 +- 快速移动与连续更新时，旧结果、旧定时任务和旧动画不会覆盖最新状态。 +- 空数据、缺失日期、零分母和负值按确认口径展示；减少动态效果模式及实例清理正常。 diff --git a/skills/light-dashboard/references/best-practices/visual-acceptance.md b/skills/light-dashboard/references/best-practices/visual-acceptance.md new file mode 100644 index 0000000000..a166be2275 --- /dev/null +++ b/skills/light-dashboard/references/best-practices/visual-acceptance.md @@ -0,0 +1,70 @@ +# Dashboard 截图对照验收 + +创建页面或调整布局、字体、配色、图表样式后使用。局部修改只比较受影响区域及相邻布局。数据与交互检查按 Skill 的验收要求执行；截图用于确认实际呈现和视觉取舍，不能证明指标口径正确。 + +## 确定参照与截图条件 + +开始实现前，必须实际查看所选模板 HTML 与对应截图；优先用户提供的参照、已有宿主页面，再从 [24 份模板](../../SKILL.md#24-份模板索引)选择。记录主区域、密度、字号角色、默认展开内容及必要交互，作为质量基线；只读索引、复制代码或图表能运行都不算完成参照。具体骨架和密度规则见[布局最佳实践](./layout.md)。 + +验收同时判断“质量是否达到参照”和“设计差异是否成立”。新布局、背景或主题可以不同，但可读性、视觉主次、信息密度和交互完成度不得退步；明显弱于模板时先修正再交付。用户指定其他风格时以其要求作为视觉目标，仍保留适用的功能与阅读质量。 + +对照前统一浏览器视口、缩放和展开状态。轻量页面默认检查 1440 × 1000 的桌面视口及 390 × 844 的窄屏视口，用户目标设备优先；嵌入式看板还检查真实宿主容器。尺寸变化由容器驱动，不能只把桌面截图缩成手机宽度。需要检查 375px 或 1920px 时沿用布局文档的适配范围。 + +仓库 `template-life-expectancy.png`、`template-heart-failure.png`、`template-meal-workout.png` 可用于选择风格，但它们的像素尺寸与展开状态可能不同。精确对照时在同一视口运行示例 HTML、选择相应布局并统一展开状态，再截图；避免直接比较不同缩放比例下的数字大小。若示例无法运行，可参照现有图片判断层级，并明确没有完成同视口对照。 + +## 等待内容实际就绪 + +截图前确认以下状态，优先等待应用现有的就绪信号与可见内容，不以固定延时或 `networkidle` 单独判断： + +- 数据查询已完成，关键指标不再是占位符；字体就绪，布局与图表容器尺寸稳定。 +- 每张有数据的图表已完成首次绘制，实际可见图形、标签或预期标记。出现 Canvas/SVG 节点、拿到 Spec 或成功 HTTP 响应都不足以证明绘制完成。 +- 无数据时显示明确空状态，失败时显示错误反馈。整块空白、持续加载和未处理的失败请求需要修复，不能当作正常留白。 +- 入场动画结束，截图不处于淡入中途；默认视图不被意外 Tooltip、悬停倾斜或弹层遮挡。动效本身另行交互检查。 + +## 查看截图并修正差异 + +保存首屏截图以检查注意力与控件占比；长页面另存全页截图检查节奏和明细。实际打开截图，与同视口参照并排查看。浏览器 DOM 检查和截图文件存在不能代替图像检查。 + +| 对照维度 | 检查问题 | 常见修正 | +| ------------ | ------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------- | +| 视觉重心 | 能否迅速找到主要结果？是否所有 KPI 和图表同等醒目？ | 调整主辅卡面积、位置和字体层级，合并相关指标。 | +| 字号一致性 | 同层级数字的实际字号是否一致？长数字、筛选或悬停后是否突然缩字？单位是否独立可读？ | 按[数值字号规范](./metric-card.md#数值字号规范)核对 computed style，移除逐卡覆盖，调整空间而不逐卡缩字。 | +| 信息密度 | 是否比参照多出重复的洞察、指标条、整图或明细？ | 合并重复内容、缩小辅助图形、按需展开次要内容。 | +| 留白与节奏 | 外壳、卡内、卡间留白是否协调？是否有无意义空洞？ | 调整内边距、网格跨度和绘图区高度，核对图表已绘制。 | +| 图表重量 | 柱体、环图、网格、图例和标签是否抢过主指标？ | 按图表任务调整尺寸、条宽、标签与辅助元素，保留必要读数。 | +| 控件占比 | 筛选和操作是否压过标题与结果？ | 区分高频与低频操作，明确全局与局部范围。 | +| 阅读面与配色 | 背景、边框、阴影是否比数据更突出？ | 恢复稳定的中性阅读面，降低装饰强度，核对文字与图形可读性。 | +| 设计差异 | 与参照或同批其他页面相比，布局、背景、主题是否形成清楚且有依据的差异？是否只是同一页换色？ | 按[差异设计](./design.md#相近风格中的差异设计)重选结构与背景组合，保留统一质量、字号与语义色。 | +| 窄屏顺序 | 主结果是否仍易找到？图形是否被压扁或数值裁切？ | 按业务阅读顺序重排，允许自然增高与滚动，调整图表尺寸。 | + +业务差异不要求逐像素一致。数据分布、语言长度、必要坐标与用户要求造成的差异可以保留，并说明理由；不能为匹配截图修改真实数值、编造趋势或隐藏用户要求的信息。一组页面另需并排查看缩略图确认差异，字号仍以同视口完整截图与实际样式核对，不能用不同缩放造成的大小差异作判断。 + +窄屏网格按阅读顺序连续排列，重新计算各卡的行起点，不直接保留桌面的行坐标；检查全页截图中的卡间距离，避免单列出现空行和大段无意义留白。条形图数值标签应有足够对比度，并为条外读数预留空间。 + +发现明显偏差后，先修正重心与密度，再处理字体、留白和细节；重新截图并查看受影响视口。确认同一问题已经解决后不重复无变化检查。若浏览器、依赖或数据访问阻塞验收，记录原因与未验证项，不宣称通过。 + +## 必要交互逐项验收 + +采用轻量示例风格时，以下项目是必要检查，不能只根据静态截图宣称通过。以所选[趋势主导模板](../../templates/template-life-expectancy.html)、[指标先行模板](../../templates/template-heart-failure.html)、[分段叙事模板](../../templates/template-meal-workout.html)或[基础模板](../../templates/template-business-overview.html)为参照；业务没有日历日期时验收分组比较与逐项查看，配色按所选模板核对。 + +| 项目 | 实际操作与通过条件 | +| -------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| 图表完整 | 所选模板的四张图实际可见，类型与数据相符，Tooltip 显示真实数值；环图分组有数据依据，涉及负值时保留。 | +| 首屏与刷新 | 模拟模块尚未加载、查询未完成及加载失败；标题与加载或错误反馈可见，未布局卡片不闪现、不挤成单列窄条，隐藏主体不可聚焦；就绪后图表尺寸正确，后续筛选不重新收起主体或重播入场。减少动态效果模式同样检查首屏。 | +| 实例更新与动画 | 按模板切换实际筛选项并快速恢复，如年份范围与发展阶段、年龄与高血压记录、活动水平与人群；实例与 Canvas 保持复用，调用 `updateSpec()`，图形有约 600ms 更新过渡，无重建闪白。 | +| 平铺选择器 | 全局筛选集中在页面标题行最右侧，桌面同排，主图内无重复全局筛选；选中状态清楚，Tab / Enter 可操作，初始化禁用，390px 不溢出。布局与配色控件仅按需提供，主题按本次设计选择验收，不限于基础三色。 | +| 小卡倾斜 | 鼠标移动到小卡边缘及图表上，倾斜仍正常，目标约 1.5°、包括弹性过冲在内整体 ≤2°；离开、滚动、失焦复位，主图与洞察保持平面。 | +| 默认明细 | 首次打开时表格已展开；手动折叠，再筛选后仍折叠；若实现布局或配色切换，也保留折叠状态，重新展开可读。 | +| 曲线与指标动画 | 有真实时间字段时主趋势与 mini 趋势平滑，真实点值不变；筛选、悬停、恢复时核心与衍生指标都过渡，首次显示不从虚构零值开始；图表标签在尺寸变化后仍显示真实读数。 | +| 字号稳定 | 在同一断点比较同层级数值，并实际切换筛选、局部查看和恢复；数值长度、单位与正负变化不改变字号。窄屏整组切换字号 token，完整显示数字；默认尺度及允许的统一品牌替换见[数值字号规范](./metric-card.md#数值字号规范)。 | +| 卡内联动 | 主图年份或分组联动全部指标及环图，小图只联动所属卡；移出恢复同作用域汇总；快速移动、换筛选后无旧值覆盖，悬停不增加查询次数，范围洞察保持不变。 | +| 洞察与衍生指标 | 核心发现同时展示核心与重要衍生证据，范围一致；占比、覆盖率、单件热量等从汇总值复算，百分点与百分比不混用，零分母不制造值。切换筛选后重算，局部悬停保留范围结论，详见[洞察验收](./insight.md#验收)。 | +| 降级与清理 | 图表方向键 / Esc 与逐项按钮可用；触屏关闭倾斜，减少动态效果立即完成数值并停止图表、倾斜与入场动画；卸载无残留帧、定时器与监听。 | + +动效检查至少记录更新前、更新中和稳定后的数值或连续帧，以及最终准确值。调试日志、临时断点或隔离的验收插桩可用于确认实例与查询次数，交付页面不保留调试面板。截图之外明确记录实际检查的交互、结果和未验证范围。 + +## 交付证据 + +交付说明中提供最终截图的路径或链接、实际页面 URL、视口和参照布局，简要说明修正结果及保留的业务差异。截图与最终代码一致；修正后不能继续使用旧截图。涉及筛选、明细展开或布局切换时，说明实际检查过的状态与结果。 + +示例记录格式：`桌面 1440 × 1000 / 窄屏 390 × 844；参照 focus；已合并重复 KPI、恢复主辅字号关系；最终截图：…；业务差异：无时间字段，主区使用岗位比较；未验证：…`。将内容替换为本次实际结果，无未验证项时省略对应字段。 diff --git a/skills/vbi/references/usage/capabilities.md b/skills/light-dashboard/references/usage/capabilities.md similarity index 93% rename from skills/vbi/references/usage/capabilities.md rename to skills/light-dashboard/references/usage/capabilities.md index 28527dd2a3..72d131498f 100644 --- a/skills/vbi/references/usage/capabilities.md +++ b/skills/light-dashboard/references/usage/capabilities.md @@ -22,4 +22,4 @@ VBI 通过 DSL 描述可保存、恢复和复用的 BI 状态，通过 Builder - 保存仪表盘时同时保存引用的图表、洞察资源；仪表盘 DSL 保存资源 ID，资源内容通过 `resources.snapshot()` 导出。 - 新增仪表盘组件需提供 `layouts.lg`；布局通过组件集合的 `add` / `update` 回调提交。仪表盘与引用资源各自维护文档及撤销历史。 -按需查阅：[实例与资源](api/vbi.md)、[图表 Builder](api/chart-builder.md)、[仪表盘 Builder](api/dashboard-builder.md)、[洞察 Builder](api/insight-builder.md)、[DSL 类型](api/types.md)。 +按需查阅：[实例与资源](../api/vbi/vbi.md)、[图表 Builder](../api/vbi/chart-builder.md)、[仪表盘 Builder](../api/vbi/dashboard-builder.md)、[洞察 Builder](../api/vbi/insight-builder.md)、[DSL 类型](../api/vbi/types.md)。 diff --git a/skills/light-dashboard/references/usage/how-use-vbi-in-html.md b/skills/light-dashboard/references/usage/how-use-vbi-in-html.md new file mode 100644 index 0000000000..8278852900 --- /dev/null +++ b/skills/light-dashboard/references/usage/how-use-vbi-in-html.md @@ -0,0 +1,642 @@ +# 在 HTML 中使用 VBI + +用一个 HTML 文件接入 VBI：无需框架或打包工具，使用 Builder 配置分析，再交给 VChart 或 VTable 渲染。VBI、VQuery、VSeed 通过浏览器 ESM 加载，VChart 和 VTable 使用发布包中的浏览器 bundle。本文先给出实践入口，再提供可直接运行的图表与表格教程；状态归属、查询复用和复杂页面组织见[最佳实践](./tips.md)。 + +**可直接打开或分享的独立 HTML，必须将分析数据内置在 HTML 中。** JSON 使用内联数组，CSV 使用内联文本，再通过 VQuery 的 `rawDataset` 接入。不要在运行时用 `fetch()` 读取旁边的 JSON / CSV 文件或依赖远程数据 URL：通过 `file://` 打开时，本地文件请求可能因 `origin: null` 被浏览器拦截；远程请求也可能受 CORS、网络或预览环境限制，导致 `blocked`、`Failed to fetch` 和图表空白。内置数据不代表完全离线，本文的 CDN 模块仍需联网加载。 + +## 数据源必须内置在 HTML 中 + +生成页面前先读取原始数据文件，将完整数据写入 HTML；不要只写数据文件路径，也不要让页面初始化时再下载数据。下方完整教程使用内联 JSON 数组。CSV 可采用以下方式，由 VQuery 解析，避免自行按逗号拆分而破坏带引号的字段： + +```html + + + +``` + +数据集的 `schema` 应与内置数据字段一致。生成内联数据时还需处理 HTML 的脚本结束标记：如果原始文本包含 ``，应改用安全序列化的 JSON 字符串（将 `<` 转义为 `\u003c`），运行时还原后再传给 VQuery，避免数据截断脚本元素。不要用 `mode: 'no-cors'` 或关闭浏览器安全策略绕过数据加载失败。 + +交付前用 `file://` 直接打开 HTML，检查筛选、聚合和渲染；在 Network 中确认没有 JSON / CSV 数据请求，在 Console 中确认没有数据加载错误。若业务明确需要实时远程数据，应通过 HTTP(S) 部署并正确配置数据服务的 CORS，同时显示加载失败状态；这类页面需要另行验证部署环境。 + +## 从参考实现选择起点 + +先看[可视总览](../../templates/index.html)：二十份独立 HTML 内嵌十个行业的完整 CSV，展示不同分析重点、布局、主题与数据口径。按需组合片段，不默认照搬某一页。配置在 `page-config`，完整数据在 `source-data`；每页的来源、字段映射与单位可追溯。 + +| 示例 | 适合学习 | 阅读代码时关注 | +| ---------------------------------------------------------------------- | ---------------------------------------------- | ------------------------------------------------------------------ | +| [模板 1：趋势主导](../../templates/template-life-expectancy.html) | 预期寿命年度趋势；蓝色主辅布局 | `prepareRows()`、`conditionsFor()`、`buildView()`、`drawPlot()` | +| [模板 2：指标先行](../../templates/template-heart-failure.html) | 心衰记录概览与年龄组比较；紫色指标行 | 同一查询范围的核心指标、事件占比与局部查看 | +| [模板 3：分段叙事](../../templates/template-meal-workout.html) | 餐食、运动、营养及样本构成；暖橙分段布局 | 汇总比率、不同分组的图表与缓存联动 | +| [精简 Dashboard 模板](../../templates/template-business-overview.html) | 新建轻量看板、内置数据与完整必要交互 | `draw()`、`animateMetric()`、`bindMetricHover()`、`bindCardTilt()` | +| [轻量看板](../../templates/example.html) | 顶部洞察、汇总指标、周期比较、自定义 HTML 卡片 | `summarizePeriod()`、`rowsOf()`、`layoutDashboard()` | + +新建看板按数据与分析任务从基准模板、行业参考集中选取片段或重组布局，基础模板用于查阅较小的接入实现。完整轻量示例用于参考更丰富的配色、图标与业务数据接入。`templates/` 中的 24 份模板可以单独复制 HTML，浏览器需要联网加载 CDN 模块。完整轻量看板当前仍通过网络加载 CSV，复制为独立交付页面时，必须按上文将 CSV 内置，并将数据初始化改为读取内联文本。 + +### 三种数据模板的共同机制 + +三份新模板在 `source-data` 中以原始列名和类型化行数组内嵌完整 CSV，空字符串保留为 `null`，不抽样、不将缺失数值补零。`prepareRows()` 映射查询字段，`conditionsFor()` 定义各查询的筛选范围；Builder 的 `observeDeep()` 合并刷新，查询后经 VSeed 构建 Spec，`drawPlot()` 复用实例调用 `updateSpec()`。`buildView()` 从查询汇总结果计算衍生指标与缓存索引；卡内查看不重新查询，也不改写区间洞察。明细默认展开，国家明细通过分页访问全部结果。 + +预期寿命模板使用真实年份，展示末年国家等权均值、首尾变化与有效寿命覆盖率；心衰模板只描述样本记录，死亡事件占比不等同于统一随访时点的死亡率；餐食模板以总热效应 / 总热量计算占比，以总热量 / 总食物件数计算单件热量。保留原始数据值及其缺失语义，不把样本分组比较写成因果结论。 + +图形、衍生公式与悬停显示属于这些独立页面的具体集成。若产品承诺跨宿主恢复整页，除 Dashboard 与资源快照外，还须明确保存或重建这些显示与计算规则，不能声称基础 DSL 已自动保存任意 HTML 计算代码。 + +## 精简模板的重要片段 + +[template-business-overview.html](../../templates/template-business-overview.html)保留与完整轻量示例一致的必要功能：固定趋势主导布局、柔和浅蓝（`#A8C7E8`）、顶部核心发现、销售主面积图、增长迷你面积图、订单占比环图、利润迷你柱图；标题右侧集中的地区与周期平铺筛选、600ms 图表与指标过渡、小卡 ≤2° 倾斜、默认展开表格、悬停及键盘联动。模板不提供布局和配色选择，地区筛选只显示“全部地区 / 华东 / 华北”选项，分组名称保留在 `aria-label` 中。精简的是数据规模、图标和显示设置，而必要的图表与卡内交互保持完整，逐项要求见[必要基线](../best-practices/layout.md#轻量看板的功能与视觉基线)。原始数据为内置的 60 天确定性演示数据，共 240 条商品明细、120 个订单，截止日为 2026-09-29；同一订单有两条商品明细，用于验证去重。消费者分类属于演示字段，实际数据无该字段时应更换有意义的分组图形。 + +先替换 `rawDataset`、`schema`、`connectorId` 与指标口径，再调整卡片内容和 Dashboard 坐标。模板的固定日期、地区和色系仅服务于这份演示数据。下列片段摘取关键机制，依赖模板已导入的模块、Builder 与 DOM；完整可运行文件以模板为准，依赖加载及 import map 见下方完整 HTML 教程。 + +首屏加载状态必须写在静态 HTML 中，不能等 CDN 或模块执行后再隐藏未布局的内容。模板用 `data-initialized="false"` 与 `inert` 暂时收起主体，保留标题、禁用筛选和可见的加载反馈；主体仍参与内部布局，让 Builder 设置坐标后能以真实尺寸绘制图表。首次数据、指标、洞察和图表就绪后再展示并播放入场；之后的筛选仅更新现有内容，不重新收起或重播。初始化失败时保留可见错误，减少动态效果只取消动效，不提前展示半成品。 + +### 1. 内置数据接入 Connector + +VQuery 负责执行 Builder 生成的筛选、分组与聚合。刷新时更新已有 IndexedDB 数据集，每次查询都在 `finally` 中断开连接。 + +```javascript +const query = new VQuery() +const source = { type: 'json', rawDataset } +if (await query.hasDataset(connectorId)) await query.updateDatasetSource(connectorId, schema, source) +else await query.createDataset(connectorId, schema, source) +VBI.connectors.register(connectorId, { + discoverSchema: async () => schema, + query: async ({ queryDSL }) => { + const dataset = await query.connectDataset(connectorId) + try { + return await dataset.query(queryDSL) + } finally { + await dataset.disconnect() + } + }, +}) +``` + +### 2. Builder 查询与自定义指标映射 + +模板的 `createChart()` 统一创建图表；`totals` 与 `previous` 查询本期和前期汇总，`trend`、`growth` 与 `profit` 查询每日走势，`regions` 查询地区分组结果，`consumers` 查询消费者去重订单，`dailyTotals` 与 `dailyConsumers` 建立联动日期索引。订单使用 `countDistinct`，销售额和利润使用 `sum`；总订单数不累加每日或地区去重数。 + +```javascript +const totals = createChart('table', null, ['sales', 'order_id', 'profit']) +const trend = createChart('area', 'order_date', ['sales']) +const seed = await totals.buildVSeed() +function rowsOf(chart, seed) { + const { dimensions, measures } = chart.build() + return seed.dataset.map((row) => + Object.fromEntries([...dimensions, ...measures].map((field) => [field.field, row[field.id]])), + ) +} +const total = rowsOf(totals, seed)[0] +// HTML 指标读取业务名；传给 VSeed 的 seed 保留原始字段 ID。 +``` + +此映射适用于平铺、每个字段只有一种聚合的模板。多个聚合复用同一字段时，应使用度量 ID 或不同业务键，避免覆盖；空结果、零分母和基期为零的展示见模板 `renderLoop()` 与 `comparison()`。 + +### 3. 资源与布局交给 Dashboard Builder + +Chart、Insight、Dashboard 使用同一 VBI 实例。组件布局在集合回调中提交，UI 读取 `dashboard.build().layout[breakpoint]`，同步 DOM 阅读顺序与 CSS Grid；不要再用另一套 CSS 固定模块位置。 + +```javascript +dashboard.chart.add((widget) => { + widget + .setChart(trend) + .setTitle('销售总额') + .setLayouts({ + lg: { x: 0, y: 1, w: 8, h: 9 }, + xs: { x: 0, y: 1, w: 12, h: 9 }, + }) + document.querySelector('#hero-slot').dataset.widget = widget.getId() +}) +insight.setContent([finding, scope, ...evidence].join('\n')) +// 模板用 insight.dsl.observeDeep(renderInsight) 将资源内容安全写入 DOM。 +``` + +模板 `layoutDashboard()` 以容器宽度选择断点，主卡数字约 59px、辅助数字约 29px，区域明细默认展开。模板在初始化时通过 Builder 设置固定布局，不保留布局预设、切换控件或相应事件；外层 slot 管布局与入场，内层 card 管倾斜。布局与字号的调整依据见[视觉骨架](../best-practices/layout.md#复用轻量示例的视觉骨架)。核心发现同时展示销售额、订单、利润三项核心指标与利润率、平均客单价两项衍生指标；结论与计算口径见[洞察最佳实践](../best-practices/insight.md)。Insight 内容由真实查询结果生成，没有调用模型服务；需要保存时同时导出 Dashboard DSL 与资源快照，恢复过程见[状态与资源](./tips.md#同时保存-dashboard-和资源)。 + +### 4. 筛选改 Builder，渲染复用实例 + +`applyFilters()` 以数据最新日期为截止日，按已保存的条件 ID 更新日期和地区；前期查询使用此前等长区间。控件只调用它，`observeDeep()` 订阅负责刷新。多图同步修改在同一轮微任务合并，`renderLoop()` 串行处理刷新并丢弃过期查询结果，查询期间禁用控件。 + +```javascript +const updateDate = (node) => node.setOperator('between').setValue({ min: firstDay, max: lastDay }) +chart.whereFilter.update(dateConditionId, updateDate) +// dateConditionId 在首次 whereFilter.add() 的回调中通过 node.getId() 保存。 +chart.dsl.observeDeep(requestRender) + +const seed = await chart.buildVSeed() +const spec = buildChartSpec(seed) +if (instances.has(element)) { + if (reducedMotion.matches) instances.get(element).stopAnimation() + await instances.get(element).updateSpec(spec) +} else { + const instance = new VChart(spec, { dom: element }) + instance.renderSync() + chart.instance.bind(instance) + instances.set(element, instance) +} +``` + +`buildChartSpec()` 定制透明背景、统一强调色、简约坐标与图形样式，不改变查询结果；迷你利润图保留负值，旧版柱图用 `spec.stackCornerRadius = 0` 关闭额外裁剪。平滑线与更新动画是必要配置，不能设置 `animation.enable: false` 后认为已经实现更新动画： + +```javascript +const appearance = { + lineStyle: { lineWidth: mini ? 1.5 : 2.5, lineSmooth: true }, + areaStyle: { areaColorOpacity: 0.27, areaGradient: true }, + animation: { + enable: !reducedMotion.matches, + params: { appear: { enable: false }, update: { enable: true, duration: 600, ease: 'cubicInOut' } }, + }, +} +// 将 appearance 合入 VBI 返回的 seed，再用 Builder.from(...).build()。 +``` + +`ResizeObserver` 重新应用布局并调整实例尺寸；页面卸载时解除 Builder 订阅、倾斜与悬停监听、断开观察、取消数值动画帧与待执行任务，并释放实例。 + +### 5. 保留主辅视觉比例 + +复用结构时同时保留卡间留白、绘图区高度与主辅字体层级。先引入[数值字号规范](../best-practices/metric-card.md#数值字号规范)的角色 token 和窄屏整组切换规则；以下选择器消费这些 token，避免逐卡或按数字长度缩放。卡片位置仍由上面的 Dashboard DSL 提供，窄屏读取 `xs` 坐标重排。 + +```css +.dashboard { + display: grid; + grid-template-columns: repeat(12, minmax(0, 1fr)); + grid-auto-rows: minmax(44px, auto); + gap: 18px; +} +.hero-value { + font-size: var(--metric-primary-size); +} +.small-value { + font-size: var(--metric-secondary-size); +} +.hero-figure { + position: relative; + flex: 1; + min-height: 220px; +} +#trend { + position: absolute; + inset: 0 0 24px; + width: 100%; +} +.mini { + width: 116px; + height: 77px; + flex-shrink: 0; +} +``` + +图形尺寸可随容器与业务内容调整，指标字号只按已定义的角色与断点切换；单位用独立节点，动画更新数值节点而不改变字号。长数值优先调整单位表达、卡片跨度或 mini 图位置，不按卡宽覆盖字号。核心发现自然撑高，卡内相关指标用分隔线组织；图表 Canvas 不反向撑高网格，长数值不能裁切。单独复制通用接入代码，不会自动获得模板的阅读质量，仍需先查看模板与截图并做最终对照。 + +### 6. 平铺选择器与默认展开明细 + +少量互斥选项优先平铺，桌面筛选区域尽量一行，避免重复标签和默认原生 HTML `select` / `input` 外观；大量选项与精确输入采用紧凑的定制入口，窄屏允许必要换行。控件显式表达选中状态，保留 `type="button"` 和键盘焦点。控件回调只更新自身条件，不能清除消费者等其他筛选。控件布局、作用范围、条件 ID 维护及图表与文本的同步动画见[Filter 最佳实践](../best-practices/filter.md)。 + +```html +
    +
    +

    经营概览

    +

    当前统计范围

    +
    +
    +
    + + + +
    +
    + + + +
    +
    +
    +
    + 查看区域明细与数据口径 + + +
    +
    +``` + +刷新只替换 `tbody`，不重建 `details` 或给 `open` 重新赋值。模板地区与周期按钮合并在“经营概览”标题行最右侧，作用范围均为本看板全局；趋势卡内只保留逐日查看与恢复汇总操作。`.segment` 允许窄屏换行；不默认使用原生 `select`，大量选项再使用搜索或定制下拉。 + +### 7. 指标文本过渡 + +使用模板 `animateMetric()` 覆盖全部动态数字。其状态同时保存当前显示值、目标值、格式函数和动画帧；新目标取消旧帧，从当前显示值接续，用 `1 - (1 - progress) ** 3` 在 600ms 内过渡。首次立即显示真实值，不从零开始；空值、无基期与零分母分别显示缺省或说明，减少动态效果模式立即结束动画。 + +```javascript +animateMetric('#sales', total.sales, money) +animateMetric('#orders', total.order_id, (value) => `${Math.round(value)} 单`) +animateMetric('#profit', total.profit, money) +animateMetric( + '#margin', + total.sales ? (total.profit / total.sales) * 100 : undefined, + (value) => `${value.toFixed(1)}%`, +) +animateMetric('#average', total.order_id ? total.sales / total.order_id : undefined, money) +// setChange() 也用 animateMetric() 更新变化率，并同步方向色。 +``` + +详细数值插值代码见[指标文本更新动画](../best-practices/metric-card.md#指标文本更新动画)。动画只改展示文本，计算、Tooltip、导出和洞察始终用真实查询结果。 + +### 8. 固定命中区域与 ≤2° 小卡倾斜 + +```html +
    +
    +
    +``` + +```css +.metric-card { + transform: perspective(800px) rotate3d(var(--tilt-x, 0), var(--tilt-y, 1), 0, var(--tilt-angle, 0deg)); +} +``` + +模板 `bindCardTilt()` 在固定外层区域读取鼠标坐标，只变换内层卡片；目标向量归一化后乘 1.5°，弹性插值时按向量长度限制为 2°，不能把两个轴各限制为 2° 后误认为合成角度合规。主趋势与洞察保持平面；移出、取消、滚动、失焦复位，触屏与减少动态效果关闭。模板保留返回的 `dispose()`，卸载时移除监听和帧。完整示例切换布局时还会复位倾斜，叙事布局展开为大图的卡片保持平面。参数与解释见[轻微倾斜](../best-practices/layout.md#按模块关系联动与轻微倾斜)。 + +### 9. 卡内交互与作用域 + +```javascript +const byDate = new Map(rowsOf(dailyTotals, dailySeed).map((row) => [row.order_date, row])) +// dailyTotals 的查询包含本期第一天的前一天，用于当日比较；不是从 DOM 数值反算。 +hoverSubscriptions.set(trend, bindMetricHover(trend, '#trend', 'all')) +hoverSubscriptions.set(growth, bindMetricHover(growth, '#growth-trend', 'growth')) +hoverSubscriptions.set(profit, bindMetricHover(profit, '#profit-trend', 'profit')) +// 只绑定一次；currentMetrics 在每轮查询后替换为新日期索引与区间汇总。 +``` + +悬停稳定 75ms 后读取日期缓存并更新文本，VChart Tooltip 即时响应；主图更新全部数字与订单环图，小图只更新所属卡片。离开恢复同作用域汇总，查询开始时暂停悬停并取消旧任务；刷新完成后恢复，局部联动不改 Insight。图表容器还支持左右键和 Esc；主卡的前一天 / 后一天 / 区间汇总按钮便于触屏查看。绑定与解除代码见[与图表联动](../best-practices/metric-card.md#与图表联动)，完整生命周期以模板为准。 + +### 模板运行核对 + +直接用 `file://` 打开，等待 `body[data-state="ready"][data-entrance="complete"]` 且四张图实际可见，再检查 30 → 14 → 7 → 30 天和地区筛选、默认展开及手动折叠、刷新后的初始化，以及 1440px 桌面与 390px 窄屏。实际检查 `updateSpec()` 复用与过渡、指标文本中间帧、平滑线、≤2° 倾斜、主图 / 小图联动与恢复、减少动态效果模式。确认模板无布局和配色控件、无重复“地区”标签，默认强调色为柔和浅蓝；三种布局与配色切换仅在完整示例或用户要求的扩展中验收。运行期只请求 CDN 依赖，不请求 JSON / CSV 数据。核心发现、汇总、图形和区域表使用同一筛选范围，明细展开状态不因筛选而重置。最终截图按[截图对照验收](../best-practices/visual-acceptance.md)保存并实际查看；截图无法替代动效与交互检查。 + +内置数据的核对基准如下，金额取整；选择华东、30 天时应为销售额 ¥74,800、30 单、利润 ¥7,977。全部地区 30 天有 40 个消费者订单，占比约 66.7%，中心文本取整为 67%；不得从重复明细条数计算占比。 + +| 全部地区周期 | 销售额 | 去重订单数 | 利润 | +| ------------ | -------- | ---------- | ------- | +| 30 天 | ¥154,400 | 60 | ¥16,494 | +| 14 天 | ¥76,960 | 28 | ¥8,890 | +| 7 天 | ¥39,656 | 14 | ¥4,116 | + +## 完整轻量示例的扩展能力 + +轻量看板直接加载 [Supermarket CSV](https://visactor.github.io/VBI/dataset/supermarket.csv)，以数据中的最新订单日期为截止日，切换最近 7、14、30 个日历日，并与前一个等长周期比较。VQuery 负责解析 CSV；接入层将订单日期规范为 ISO 日期和 UTC 日序号，VBI Builder 配置日期筛选、销售额与利润求和、订单 ID 去重计数。消费者订单占比使用 `customer_type = 消费者` 的去重订单数除以总订单数；区域订单数也各自去重，同一订单可能涉及多个地区，因此不能直接相加。图表将没有订单的日期显示为零，亏损日期用负向利润柱显示。 + +轻量看板的指标卡以固定外层区域追踪鼠标位置，常规倾斜幅度为 1.5°，弹性过渡的整体旋转始终不超过 2°；离开卡片、滚动或页面失焦时复位。触屏、减少动态效果模式和展开为大图的卡片关闭倾斜。迷你图表保留悬停提示；销售趋势主体卡片保持平面，所有卡片均无鼠标光效。 + +指标数值首次加载直接显示查询结果；筛选或悬停更新时用 600ms 缓和过渡，与图表更新节奏一致。连续更新从当前显示值接续，保留金额、整数、百分比和正负值格式；无数据时显示缺省文本，减少动态效果模式下立即更新。 + +轻量看板提供八种页面配色，包含默认薄荷绿及七种柔和参考色。点击标题旁的色点可同步切换背景、图标与图表颜色，保留左上到右下的柔白光束；配色切换不改变统计周期和指标口径，下降指标与亏损柱保留红色语义。 + +标题旁的三个布局图标按钮将顶部洞察与四个指标组织为趋势主导、指标先行或分段叙事，选中状态通过按钮和当前布局名称表达。三种布局统一使用最大 1140px 的外壳宽度，窄屏自适应；切换只改变内部排列。切换通过 Dashboard Builder 更新 `lg/xs` 坐标，保留图表、洞察资源、配色、统计周期和区域明细的展开状态；UI 按容器宽度读取布局、同步 DOM 顺序并调整图表尺寸。主趋势联动全部指标，迷你图只联动自身。布局原理见[布局最佳实践](../best-practices/layout.md)。 + +区域明细表格默认展开，可点击标题折叠或重新展开；筛选、布局与配色切换保留用户当前的展开状态。 + +三种布局都在图表前展示“核心发现”，以三项核心指标和利润率、平均客单价两项衍生指标共同支撑一句关键结论；比率变化使用百分点，金额变化使用相对增幅。内容、计算、AI 接入边界和 Insight 保存方式统一见[洞察最佳实践](../best-practices/insight.md)。切换周期后重新计算，布局、配色切换与局部悬停保留区间洞察。首次入场采用 420ms 间隔、1400ms 时长，减少动态效果模式下直接显示。 + +轻量看板的数据核对基准（当前 CSV 最新订单日期为 2019-12-30，共 9,959 条明细；金额显示取整）： + +| 周期 | 日期范围 | 销售额 | 去重订单数 | 利润 | +| ----- | ----------------------- | -------- | ---------- | ------- | +| 7 天 | 2019-12-24 — 2019-12-30 | ¥121,872 | 44 | ¥6,133 | +| 14 天 | 2019-12-17 — 2019-12-30 | ¥249,025 | 81 | ¥24,702 | +| 30 天 | 2019-12-01 — 2019-12-30 | ¥544,539 | 156 | ¥74,556 | + +业务大屏仍使用固定演示数据，日期基准是 2026 年 9 月；天数切换只影响趋势，地区筛选影响全部数据组件。散点图数据是参考截图的近似转录，其前沿与参考模型保持全局口径。这些页面展示的 HTML 数据表和指标卡由页面绘制；下面补充 VTable 的普通表和透视表接入。 + +## 先理解五个包的分工 + +| 包 | 在本文中的职责 | +| ------------------ | --------------------------------------------------------- | +| `@visactor/vbi` | 通过 Builder 管理图表 DSL，生成查询和 VSeed DSL | +| `@visactor/vquery` | 执行本地 JSON 数据的分组、聚合、筛选和排序 | +| `@visactor/vseed` | 将含数据的 VSeed DSL 构建为 VChart spec 或 VTable options | +| `@visactor/vchart` | 渲染柱状图、折线图、散点图等图形 | +| `@visactor/vtable` | 使用 `ListTable` 渲染普通表，使用 `PivotTable` 渲染透视表 | + +核心链路为 `VBI Builder → Connector / VQuery → VSeed → VChart 或 VTable`。图表和表格共享前面的配置与查询机制，最后选择对应渲染器。仅显示图形时可以省略 VTable；仅显示表格时可以省略 VChart。 + +## 运行一个完整 HTML：柱状图、普通表与透视表 + +将下面代码保存为 `index.html`，直接用浏览器打开。它使用内置在 HTML 中的同一份销售明细，无需额外数据文件或数据请求，支持切换三种视图、按地区筛选，并显示当前 DSL 和查询结果。为便于核对，数据只有五行。 + +下面的独立教程与轻量看板固定使用 VBI / VQuery / VSeed `0.6.4`，VChart `2.1.7`；教程另加入 VTable `1.23.1`，无需本地构建。固定版本可避免 `latest` 缓存使依赖版本不一致。 + +VChart 的 `build/index.min.js` 和 VTable 的 `dist/vtable.min.js` 通过普通 ` + + + + + +``` + +按以下结果核对，避免只检查“页面有图形”： + +| 操作 | 预期结果 | +| -------------------------- | ------------------------------------------------------------------ | +| 柱状图、全部地区 | 两根柱子：华东 `350`，华北 `230` | +| 普通表、全部地区 | 四行：华东线上 `300`、华东线下 `50`、华北线上 `150`、华北线下 `80` | +| 透视表、全部地区 | 地区作为行、渠道作为列；四个交叉单元格与普通表数值一致 | +| 选择华东，依次切换三个视图 | 柱状图 `350`；普通表两行；透视表只保留华东，线上 `300`、线下 `50` | +| 刷新页面 | 重新初始化演示数据，默认显示全部地区柱状图，无重复数据集创建错误 | + +这里的普通表展示的是按“地区＋渠道”聚合后的四行，原始五行中的华东线上记录已由 VQuery 合并。`table` 指展示类型，并不代表自动跳过聚合；需要逐条明细时，在查询设计中保留唯一记录维度并核对生成的查询。 + +## 图形与表格渲染的关键差异 + +三种视图都使用 `await builder.buildVSeed()` 和 `Builder.from(seed).build()`，后者的结果随 `chartType` 变化： + +| `chartType` | 本例维度编码 | 度量默认编码 | 渲染器 | +| ------------ | ------------------------- | ------------ | ------------------------------------------------ | +| `column` | 地区 `xAxis` | `yAxis` | `new VChart(spec, { dom })`，随后 `renderSync()` | +| `table` | 地区、渠道均为 `column` | `column` | `new ListTable(container, options)` | +| `pivotTable` | 地区 `row`、渠道 `column` | `detail` | `new PivotTable(container, options)` | + +先设置图表类型再添加字段，Builder 会为度量分配该类型的默认编码。透视表建议显式指定行、列维度，避免添加顺序改变布局。不要把 VBI 的 `row` / `column` 编码手工改造成 VTable 原生的 `rows` / `columns` / `indicators`；这一步由 VSeed 构建。 + +VTable 的构造函数接收容器和 options，不调用 VChart 的 `renderSync()`；实例也支持 `release()`，容器变化后使用无参 `resize()`。保留明确的容器宽高，否则 Canvas 可能不可见。原生用法可查阅 [VTable 官方入门文档](https://visactor.io/vtable/guide/Getting_Started/Getting_Started)。 + +## 从教程扩展到自己的页面 + +### 配置、查询与渲染分别使用对应入口 + +- `builder.build()` 返回可序列化的 VBI 图表 DSL；`builder.buildVQuery()` 只生成查询，不请求数据。只构建这两种配置时，不必注册连接器或创建渲染器。 +- `buildVSeed()` 会调用连接器的 `discoverSchema()` 和 `query()`，此前需要注册对应的 `connectorId`。返回数据以维度、度量 ID 为列名，保留这些 ID 供 VSeed 使用。 +- 修改字段、聚合和过滤条件后重新查询。只修改视觉样式时，可以基于已有 seed 构建新 options；同一份查询结果也可以同时提供给图形、指标卡和 HTML 表格。 +- VChart 与 VTable 的原生配置不同。先在 VSeed 层设置支持的主题、格式或样式，再按所选渲染器补充特有配置，具体分层见[最佳实践](./tips.md)。 + +### 保存与恢复 + +将以下片段放在完整示例的初始化 `try` 块内、`await render()` 之后，可保存当前视图并恢复为新的 Builder： + +```javascript +const savedChart = builders[$('#type').value].build() +const json = JSON.stringify(savedChart) +// 数据连接器仍需在恢复环境注册。 +const restoredBuilder = VBI.chart.create(JSON.parse(json)) +const restoredSeed = await restoredBuilder.buildVSeed() +// 按 restoredSeed.chartType 选择上文的 VChart / ListTable / PivotTable 分支。 +``` + +保存 Dashboard 时同时保存 `dashboard.build()` 和 `VBI.resources.snapshot()`；恢复时先注册资源，再创建 Dashboard Builder。精致散点图和业务大屏示例提供配置导出，完整流程与限制见[接入技巧中的配置恢复说明](./tips.md#8-明确筛选作用域并验证配置恢复)。 + +DSL 不包含连接器实现、原始数据、外部图片，以及页面后加的精细标注和渲染函数。本文完整 HTML 的刷新行为是重置演示数据和控件，尚未接入持久化读取；需要恢复筛选时，从保存的 DSL 初始化控件，避免首次渲染用默认值覆盖条件。 + +## 常见问题 + +| 现象 | 检查与处理 | +| ------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| 数据请求出现 `blocked`、CORS 或 `Failed to fetch` | 检查是否用 `fetch()` 读取本地 JSON / CSV 或远程数据 URL。独立 HTML 必须内置数据并通过 `rawDataset` 接入；同目录文件也可能在 `file://` 下被拦截。实时远程数据需在 HTTP(S) 部署环境验证 CORS。 | +| 模块加载失败或缺少命名导出 | VBI、VQuery、VSeed 使用固定版本的 `+esm` 入口；VChart、VTable 使用浏览器 bundle，并保留本文的 import map。普通 ` + + + + diff --git a/skills/vbi/examples/lightweight-dashboard.html b/skills/light-dashboard/templates/example.html similarity index 57% rename from skills/vbi/examples/lightweight-dashboard.html rename to skills/light-dashboard/templates/example.html index f1ac7d894d..2de5044931 100644 --- a/skills/vbi/examples/lightweight-dashboard.html +++ b/skills/light-dashboard/templates/example.html @@ -15,17 +15,65 @@ color-scheme: light; --ink: #28333e; --muted: #909aa4; - --mint: #16c99e; + --accent: #16c99e; + --accent-ink: #16c99e; + --accent-soft: #e0f9f1; + --secondary: #5c90d6; + --secondary-soft: #e7effc; + --brand-color: #283d3a; + --background-base: #edf2f1; + --background-start: #c7e9df; + --background-end: #ddd6ed; + --light-edge: #eee7f833; + --insight-up: #12815e; + --insight-down: #c64a3f; } body { + position: relative; + min-height: 100svh; + isolation: isolate; margin: 0; color: var(--ink); - background: #edf0f3; + background: var(--background-base); font-family: Inter, 'PingFang SC', 'Microsoft YaHei', sans-serif; -webkit-font-smoothing: antialiased; } + body::before, + body::after { + content: ''; + position: fixed; + pointer-events: none; + } + + body::before { + z-index: -2; + inset: -18%; + background: + radial-gradient(ellipse at 14% 22%, var(--background-start) 0%, transparent 62%), + radial-gradient(ellipse at 88% 78%, var(--background-end) 0%, transparent 64%); + filter: blur(64px); + } + + body::after { + z-index: -1; + inset: -10%; + background: + radial-gradient(ellipse at 24% 0%, #ffffffb3 0%, #ffffff00 48%), + linear-gradient( + 52deg, + #ffffff00 32%, + #ffffff14 38%, + #ffffff70 43%, + #ffffffd9 46%, + #ffffff80 49%, + var(--light-edge) 54%, + transparent 61% + ); + filter: blur(18px); + } + button { font: inherit; cursor: pointer; @@ -33,7 +81,7 @@ button:focus-visible, summary:focus-visible { - outline: 3px solid #67d9bd; + outline: 3px solid var(--accent-ink); outline-offset: 5px; } @@ -66,7 +114,7 @@ } .shell { - max-width: 1120px; + max-width: 1140px; margin: auto; padding: 32px 28px 24px; } @@ -93,7 +141,7 @@ width: 30px; height: 30px; border-radius: 10px; - background: #283d3a; + background: var(--brand-color); color: white; } @@ -108,9 +156,124 @@ } .heading { + display: flex; + align-items: flex-end; + justify-content: space-between; + flex-wrap: wrap; + gap: 18px; margin-bottom: 25px; } + .palette { + display: grid; + gap: 7px; + justify-items: end; + } + + .view-controls { + display: flex; + align-items: flex-start; + flex-wrap: wrap; + gap: 12px; + max-width: 100%; + } + + .layout-picker { + display: grid; + gap: 7px; + } + + .layout-options { + display: flex; + gap: 4px; + padding: 4px; + border: 1px solid #ffffffa6; + border-radius: 12px; + background: #ffffff65; + } + + .layout-options button { + display: grid; + place-items: center; + width: 34px; + height: 32px; + padding: 6px; + border-radius: 8px; + color: #7d8b93; + transition: + background 0.2s, + color 0.2s; + } + + .layout-options button:hover { + background: #ffffff80; + } + + .layout-options button[aria-pressed='true'] { + background: #ffffffed; + color: var(--accent-ink); + box-shadow: 0 2px 5px #2436440a; + } + + .layout-options button:focus-visible { + outline: 2px solid var(--accent-ink); + outline-offset: 2px; + } + + .layout-options svg { + width: 20px; + height: 20px; + fill: none; + stroke: currentColor; + stroke-width: 1.4; + } + + #layout-label { + color: #78858d; + font-size: 10px; + } + + .color-picker { + display: flex; + gap: 7px; + padding: 7px; + border: 1px solid #ffffffa6; + border-radius: 24px; + background: #ffffff65; + } + + .color-picker button { + display: grid; + place-items: center; + width: 24px; + height: 24px; + padding: 0; + border-radius: 50%; + box-shadow: inset 0 0 0 1px #28333e0a; + background: var(--swatch); + transition: box-shadow 0.2s; + } + + .color-picker button[aria-pressed='true'] { + box-shadow: + 0 0 0 2px #fff, + 0 0 0 3px var(--accent); + } + + .color-picker button[aria-pressed='true']::after { + content: ''; + width: 6px; + height: 6px; + border-radius: 50%; + background: white; + } + + #palette-label { + color: #78858d; + font-size: 10px; + font-variant-numeric: tabular-nums; + } + h1 { font-size: 27px; letter-spacing: -0.035em; @@ -145,33 +308,105 @@ flex-shrink: 0; } - .icon-box.mint { - background: #e0f9f1; - color: var(--mint); + .icon-box.accent { + background: var(--accent-soft); + color: var(--accent-ink); } - .icon-box.blue { - background: #e7effc; - color: #5c90d6; + .icon-box.secondary { + background: var(--secondary-soft); + color: var(--secondary); } .dashboard { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); - grid-auto-rows: 44px; + grid-auto-rows: minmax(44px, auto); gap: 18px; } - .card-slot { - min-width: 0; + .insight-card { + padding: 14px 24px; + display: flex; + flex-direction: column; + justify-content: center; + gap: 10px; + } + + .insight-heading { + display: flex; + align-items: center; + flex-wrap: wrap; + gap: 8px 14px; + } + + .insight-heading h2 { + color: var(--accent-ink); + font-size: 12px; + font-weight: 650; + } + + .insight-scope { + color: #78858d; + font-size: 12px; + line-height: 1.6; } - .card-slot:has(> .metric-card) { - perspective: 800px; + .insight-conclusion { + color: var(--ink); + font-size: 16px; + font-weight: 600; + line-height: 1.65; + overflow-wrap: anywhere; + } + + .insight-body { + display: grid; + gap: 8px; + } + + .insight-list { + display: grid; + gap: 6px; + margin: 0; + padding-left: 20px; + font-size: 14px; + line-height: 1.65; + overflow-wrap: anywhere; + } + + .insight-list li::marker { + color: #909aa4; + } + + .insight-list strong { + font-weight: 600; + } + + .insight-change { + font-weight: 600; + white-space: nowrap; + } + + .insight-change[data-direction='up'] { + color: var(--insight-up); + } + + .insight-change[data-direction='down'] { + color: var(--insight-down); + } + + .card-slot { + min-width: 0; + min-height: min-content; + display: flex; + flex-direction: column; } .card { - height: 100%; + flex: 1; + min-height: min-content; + height: auto; position: relative; border: 1px solid #ffffffb3; border-radius: 26px; @@ -181,8 +416,11 @@ } .metric-card { - transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); - transform-style: preserve-3d; + transform: perspective(800px) rotate3d(var(--tilt-x, 0), var(--tilt-y, 1), 0, var(--tilt-angle, 0deg)); + } + + .expanded .metric-card { + transform: none; } .hero { @@ -262,7 +500,7 @@ } .change { - color: var(--mint); + color: var(--accent-ink); font-weight: 600; white-space: nowrap; } @@ -284,6 +522,7 @@ flex: 1; min-height: 150px; width: 100%; + contain: size; } .plot-labels { @@ -382,6 +621,7 @@ height: 77px; flex-shrink: 0; align-self: flex-end; + contain: size; } #growth-card .mini-plot { @@ -413,7 +653,57 @@ } #orders-card .small-body { - margin-top: 8px; + margin-top: 4px; + } + + .expanded .small-card { + display: flex; + flex-direction: column; + } + + .expanded .small-body { + flex: 1; + min-height: 0; + flex-direction: column; + align-items: stretch; + } + + .expanded .small-body > div:first-child { + flex-shrink: 0; + } + + .expanded .small-value { + font-size: 40px; + } + + .expanded #growth, + .expanded #profit { + font-size: 40px; + } + + .expanded .mini-plot { + width: 100%; + height: auto; + min-height: 90px; + flex: 1; + align-self: stretch; + } + + .expanded #growth-card .mini-plot { + margin-top: 0; + } + + .dashboard[data-layout='story'] .card-slot[data-section]::before { + content: attr(data-section); + margin: 0 4px 12px; + color: #71818b; + font-size: 12px; + } + + .dashboard[data-layout='story'] .card { + border-color: #ffffff80; + background: #fbfdff; + box-shadow: none; } .details { @@ -529,10 +819,6 @@ padding: 26px 22px; } - .dashboard { - grid-auto-rows: 44px; - } - .topbar { margin-bottom: 32px; } @@ -543,7 +829,7 @@ .mini-plot { width: 150px; - height: 90px; + height: 77px; } .small-body { @@ -552,6 +838,10 @@ } @media (max-width: 540px) { + .palette { + justify-items: start; + } + .shell { padding: 22px 16px; } @@ -619,6 +909,10 @@ padding: 20px 24px; } + .insight-card { + padding: 18px 20px; + } + .mini-plot { width: clamp(80px, 26vw, 115px); } @@ -661,6 +955,12 @@ opacity: 1; } } + + @media (hover: none), (pointer: coarse) { + .metric-card { + transform: none !important; + } + } @@ -713,11 +1013,151 @@
    -

    经营概览

    -

    正在读取订单日期…

    +
    +

    经营概览

    +

    正在读取订单日期…

    +
    +
    +
    +
    + + + +
    + 布局 · 趋势主导 +
    +
    +
    + + + + + + + + +
    + 薄荷绿 · #16C99E +
    +
    -
    +
    +
    +
    +

    核心发现

    +
    +
    + +

    正在分析指标波动…

    +
      +
      +
      +
      +
      @@ -729,7 +1169,7 @@

      销售总额

      @@ -744,8 +1184,8 @@

      销售总额

      -
      - + @@ -754,8 +1194,8 @@

      销售总额

      —
      -
      - + @@ -767,10 +1207,10 @@

      销售总额

      -
      +
      - @@ -785,7 +1225,7 @@

      销售增长

      -
      +
      订单总数
      -
      +
      利润
      -
      +
      @@ -892,7 +1332,8 @@

      利润

      registerAll() const $ = (selector) => document.querySelector(selector) - const number = (value) => new Intl.NumberFormat('zh-CN', { maximumFractionDigits: 0 }).format(value) + const numberFormatter = new Intl.NumberFormat('zh-CN', { maximumFractionDigits: 0 }) + const number = (value) => numberFormatter.format(value) const money = (value) => `¥${number(value)}` const renderedCharts = new Map() const status = $('#status') @@ -905,6 +1346,48 @@

      利润

      let sourceInfo let controlsReady = false + function mixColor(color, target, weight) { + return ( + '#' + + [1, 3, 5] + .map((offset) => { + const from = parseInt(color.slice(offset, offset + 2), 16) + const to = parseInt(target.slice(offset, offset + 2), 16) + return Math.round(from + (to - from) * weight) + .toString(16) + .padStart(2, '0') + }) + .join('') + ) + } + + let palette + function selectPalette(button) { + const color = button.dataset.color + const secondary = mixColor(color, '#B9AFD8', 0.6) + palette = { + accent: color, + ring: mixColor(color, '#FFFFFF', 0.25), + ringTrack: mixColor(color, '#FFFFFF', 0.75), + } + const tokens = { + '--accent': color, + '--accent-ink': mixColor(color, '#28333E', 0.22), + '--accent-soft': mixColor(color, '#FFFFFF', 0.88), + '--secondary': mixColor(secondary, '#28333E', 0.1), + '--secondary-soft': mixColor(secondary, '#FFFFFF', 0.88), + '--brand-color': mixColor(color, '#28333E', 0.8), + '--background-base': mixColor(color, '#F3F4F6', 0.96), + '--background-start': mixColor(color, '#EDF2F1', 0.74), + } + for (const [name, value] of Object.entries(tokens)) document.documentElement.style.setProperty(name, value) + document + .querySelectorAll('[data-color]') + .forEach((option) => option.setAttribute('aria-pressed', String(option === button))) + $('#palette-label').textContent = `${button.dataset.name} · ${color}` + } + selectPalette($('.color-picker [aria-pressed="true"]')) + // VQuery 解析 CSV；接入层只规范日期，筛选、求和和订单去重仍由 VBI → VQuery 执行。 async function connectSupermarket(connectorId) { const csvSchema = [ @@ -981,6 +1464,47 @@

      利润

      } const reducedMotion = matchMedia('(prefers-reduced-motion: reduce)') + const finePointer = matchMedia('(hover: hover) and (pointer: fine)') + const metricAnimations = new Map() + function animateMetric(selector, value, format, emptyText = '—') { + const element = $(selector) + const previous = metricAnimations.get(element) + if (previous && previous.target === value) return + if (previous) cancelAnimationFrame(previous.frame) + if (!Number.isFinite(value)) { + metricAnimations.delete(element) + element.textContent = emptyText + return + } + const state = { value: previous?.value ?? value, target: value, format, frame: 0 } + metricAnimations.set(element, state) + if (!previous || reducedMotion.matches || state.value === value) { + state.value = value + element.textContent = format(value) + return + } + const from = state.value + const started = performance.now() + function tick(now) { + const progress = Math.min(1, (now - started) / 600) + state.value = from + (value - from) * (1 - (1 - progress) ** 3) + element.textContent = format(state.value) + state.frame = progress < 1 ? requestAnimationFrame(tick) : 0 + } + state.frame = requestAnimationFrame(tick) + } + function finishMetricAnimations() { + metricAnimations.forEach((state, element) => { + cancelAnimationFrame(state.frame) + state.frame = 0 + state.value = state.target + element.textContent = state.format(state.target) + }) + } + function onMetricMotionChange() { + if (reducedMotion.matches) finishMetricAnimations() + } + reducedMotion.addEventListener('change', onMetricMotionChange) let entrances = [] let hasEntered = false @@ -1000,8 +1524,8 @@

      利润

      { opacity: 1, transform: 'translateY(0)' }, ], { - duration: 1100, - delay: Number(element.dataset.enter) * 180, + duration: 1400, + delay: Number(element.dataset.enter) * 420, easing: 'cubic-bezier(.2,.75,.25,1)', fill: 'both', }, @@ -1025,22 +1549,26 @@

      利润

      vy = 0, frame = 0, last = 0 + function applyTilt(pitch, yaw) { + const length = Math.hypot(pitch, yaw) + card.style.setProperty('--tilt-x', String(length ? pitch / length : 0)) + card.style.setProperty('--tilt-y', String(length ? yaw / length : 1)) + card.style.setProperty('--tilt-angle', `${Math.min(2, length).toFixed(3)}deg`) + } function tick(now) { const dt = last ? Math.min((now - last) / 16.667, 2) : 1 last = now - vx = (vx + (targetX - x) * 0.14 * dt) * Math.pow(0.76, dt) - vy = (vy + (targetY - y) * 0.14 * dt) * Math.pow(0.76, dt) + vx = (vx + (targetX - x) * 0.1 * dt) * Math.pow(0.78, dt) + vy = (vy + (targetY - y) * 0.1 * dt) * Math.pow(0.78, dt) x += vx * dt y += vy * dt - card.style.setProperty('--rx', `${x.toFixed(3)}deg`) - card.style.setProperty('--ry', `${y.toFixed(3)}deg`) + applyTilt(x, y) if (Math.abs(targetX - x) + Math.abs(targetY - y) + Math.abs(vx) + Math.abs(vy) > 0.008) frame = requestAnimationFrame(tick) else { frame = 0 last = 0 - card.style.setProperty('--rx', `${targetX}deg`) - card.style.setProperty('--ry', `${targetY}deg`) + applyTilt(targetX, targetY) } } function start() { @@ -1050,20 +1578,27 @@

      利润

      hovering = false targetX = 0 targetY = 0 - if (reducedMotion.matches) { + if (reducedMotion.matches || !finePointer.matches) { cancelAnimationFrame(frame) frame = 0 last = 0 x = y = vx = vy = 0 - card.style.setProperty('--rx', '0deg') - card.style.setProperty('--ry', '0deg') + applyTilt(0, 0) } else start() } // 捕获阶段读取坐标，避免内部图表截断事件冒泡；单张卡片开始可见即可交互。 document.addEventListener( 'pointermove', (event) => { - if (reducedMotion.matches) return + if ( + reducedMotion.matches || + !finePointer.matches || + event.pointerType !== 'mouse' || + slot.classList.contains('expanded') + ) { + if (hovering) reset() + return + } const rect = slot.getBoundingClientRect() const inside = event.clientX >= rect.left && @@ -1075,11 +1610,11 @@

      利润

      return } hovering = true - const px = (event.clientX - rect.left) / rect.width - const py = (event.clientY - rect.top) / rect.height - const strength = event.pointerType === 'touch' ? 4 : 8 - targetX = (0.5 - py) * strength * 2 - targetY = (px - 0.5) * strength * 2 + const px = ((event.clientX - rect.left) / rect.width - 0.5) * 2 + const py = ((event.clientY - rect.top) / rect.height - 0.5) * 2 + const length = Math.max(1, Math.hypot(px, py)) + targetX = (-py / length) * 1.5 + targetY = (px / length) * 1.5 start() }, { capture: true, passive: true }, @@ -1099,8 +1634,10 @@

      利润

      document.addEventListener('scroll', resetHover, { capture: true, passive: true }) window.addEventListener('blur', resetHover) reducedMotion.addEventListener('change', reset) + finePointer.addEventListener('change', reset) + return reset } - document.querySelectorAll('.metric-card').forEach(bindMetricCardMotion) + const resetCardMotion = [...document.querySelectorAll('.metric-card')].map(bindMetricCardMotion) function buildChartSpec(seed, firstDay, lastDay, mini = false) { const dateId = seed.dimensions[0].id @@ -1115,7 +1652,7 @@

      利润

      Object.assign(seed, { backgroundColor: 'transparent', animation: updateAnimation(), - color: { colorScheme: ['#19cba1'] }, + color: { colorScheme: [palette.accent] }, label: { enable: false }, legend: { enable: false }, xAxis: { visible: false }, @@ -1130,24 +1667,29 @@

      利润

      seed.pointStyle = { pointVisible: false } seed.lineStyle = { lineWidth: mini ? 1.5 : 2.5, lineSmooth: true } seed.areaStyle = { - areaColor: '#19cba1', + areaColor: palette.accent, areaColorOpacity: 0.27, areaGradient: true, } } if (seed.chartType === 'column') { seed.barStyle = [ - { barRadius: 4, barColorOpacity: 0.68, barColor: '#19cba1', barGradient: true, barBorderWidth: 0 }, + { barRadius: 4, barColorOpacity: 0.68, barColor: palette.accent, barGradient: false, barBorderWidth: 0 }, { selector: { field: valueId, operator: '<', value: 0 }, barColor: '#d47c6a', - barGradient: true, + barGradient: false, barBorderWidth: 0, }, ] } const spec = Builder.from(seed).build() spec.padding = { top: 8, bottom: 4, left: 3, right: 9 } + if (seed.chartType === 'column') { + // 堆叠圆角裁剪路径直接跳到最终位置，会截断日期重排时的动画中间帧。 + // 此单系列小图由 barRadius 绘制圆角，关闭额外的堆叠裁剪即可。 + spec.stackCornerRadius = 0 + } return spec } @@ -1178,7 +1720,7 @@

      利润

      }, ], backgroundColor: 'transparent', - color: { colorScheme: ['#56dabb', '#c1f3e6'] }, + color: { colorScheme: [palette.ring, palette.ringTrack] }, label: { enable: false }, // 图例只说明分类，保持中心占比与完整订单口径一致。 legend: { @@ -1216,8 +1758,10 @@

      利润

      } async function run(task) { - $('fieldset').disabled = true + document.querySelectorAll('fieldset').forEach((controls) => (controls.disabled = true)) document.body.dataset.state = 'loading' + $('#insight-card').setAttribute('aria-busy', 'true') + renderInsightContent('正在更新当前统计周期的指标波动…') status.textContent = '正在加载数据…' try { await task() @@ -1226,25 +1770,89 @@

      利润

      revealComponents() } catch (error) { document.body.dataset.state = 'error' + renderInsightContent('数据加载失败，暂无法分析指标波动。') status.textContent = `加载失败：${error.message}` finishEntrance() console.error(error) } finally { - $('fieldset').disabled = !controlsReady + $('#insight-card').setAttribute('aria-busy', 'false') + document.querySelectorAll('fieldset').forEach((controls) => (controls.disabled = !controlsReady)) } } function bindWidget(dashboard, chart, slot, title, lg, xs) { dashboard.chart.add((widget) => widget.setChart(chart).setTitle(title).setLayouts({ lg, xs })) slot.dataset.widget = dashboard.chart.find(chart.getUUID()).getId() } + // 三种布局共用顶部洞察与四个指标；可恢复的位置写入 Dashboard DSL。 + const layoutPresets = { + focus: { + expanded: [], + lg: { + insight: [0, 0, 12, 3], + hero: [0, 3, 8, 9], + growth: [8, 3, 4, 3], + orders: [8, 6, 4, 3], + profit: [8, 9, 4, 3], + }, + xs: { + insight: [0, 0, 12, 4], + hero: [0, 4, 12, 9], + growth: [0, 13, 12, 3], + orders: [0, 16, 12, 3], + profit: [0, 19, 12, 3], + }, + }, + kpiFirst: { + expanded: [], + lg: { + insight: [0, 0, 12, 3], + orders: [0, 3, 4, 3], + growth: [4, 3, 4, 3], + profit: [8, 3, 4, 3], + hero: [0, 6, 12, 9], + }, + xs: { + insight: [0, 0, 12, 4], + orders: [0, 4, 12, 3], + growth: [0, 7, 12, 3], + profit: [0, 10, 12, 3], + hero: [0, 13, 12, 9], + }, + }, + story: { + expanded: ['growth', 'profit'], + lg: { + insight: [0, 0, 12, 3], + hero: [0, 3, 12, 9], + growth: [0, 12, 6, 6], + profit: [6, 12, 6, 6], + orders: [0, 18, 12, 4], + }, + xs: { + insight: [0, 0, 12, 4], + hero: [0, 4, 12, 9], + growth: [0, 13, 12, 6], + profit: [0, 19, 12, 6], + orders: [0, 25, 12, 4], + }, + }, + } + const position = ([x, y, w, h]) => ({ x, y, w, h }) function layoutDashboard(dashboard) { const dsl = dashboard.build() - const breakpoint = innerWidth >= dsl.breakpoints.lg ? 'lg' : 'xs' - for (const item of dsl.layout[breakpoint]) { + const grid = $('#dashboard') + const breakpoint = grid.clientWidth >= dsl.breakpoints.lg ? 'lg' : 'xs' + grid.dataset.breakpoint = breakpoint + const focused = document.activeElement + const ordered = [...dsl.layout[breakpoint]].sort((a, b) => a.y - b.y || a.x - b.x) + for (const [index, item] of ordered.entries()) { const slot = document.querySelector(`[data-widget="${item.widgetId}"]`) + if (grid.children[index] !== slot) grid.insertBefore(slot, grid.children[index] ?? null) slot.style.gridColumn = `${item.x + 1} / span ${item.w}` slot.style.gridRow = `${item.y + 1} / span ${item.h}` + slot.dataset.enter = index + 2 } + if (grid.contains(focused) && document.activeElement !== focused) focused.focus({ preventScroll: true }) requestAnimationFrame(() => renderedCharts.forEach((instance, element) => instance.resize(element.clientWidth, element.clientHeight)), ) @@ -1258,42 +1866,172 @@

      利润

      }) } function changeText(current, previous) { - if (!previous) return { text: '暂无可比数据', direction: 'flat', percent: '—' } + if (!previous) return { text: '暂无可比数据', direction: 'flat' } const percent = ((current - previous) / Math.abs(previous)) * 100 return { text: `${percent >= 0 ? '↑' : '↓'} ${Math.abs(percent).toFixed(1)}%`, direction: percent < 0 ? 'down' : 'up', - percent: `${percent >= 0 ? '+' : ''}${percent.toFixed(1)}%`, + value: percent, } } + + // 从同一筛选范围的聚合结果计算；不平均逐日比率，不从格式化文本反算。 + function deriveMetrics(total) { + const ratio = (value, base) => + Number.isFinite(value) && Number.isFinite(base) && base > 0 ? value / base : undefined + const margin = ratio(total.profit, total.sales) + return { margin: margin === undefined ? undefined : margin * 100, average: ratio(total.sales, total.order_id) } + } + function pointChange(current, previous) { + if (!Number.isFinite(current) || !Number.isFinite(previous)) return '暂无可比数据' + const delta = current - previous + if (Math.abs(delta) < 0.05) return '基本持平' + return `${delta > 0 ? '↑ 提升' : '↓ 下降'} ${Math.abs(delta).toFixed(1)} 个百分点` + } + // 规模与质量一起解释；仅描述数据关系，不推断营销、成本等未提供的原因。 + function summarizeKeyFinding(total, prior) { + if (!Number.isFinite(total.order_id) || total.order_id <= 0) + return '当前筛选范围暂无有效订单，暂无法形成比较结论。' + const current = deriveMetrics(total) + const previous = deriveMetrics(prior) + if ( + !['sales', 'order_id', 'profit'].every( + (field) => Number.isFinite(total[field]) && Number.isFinite(prior[field]), + ) || + total.sales <= 0 || + prior.sales <= 0 || + prior.order_id <= 0 + ) + return '部分指标缺少有效比较基数，请结合下方核心与衍生指标查看本期表现。' + const sales = ((total.sales - prior.sales) / prior.sales) * 100 + const orders = ((total.order_id - prior.order_id) / prior.order_id) * 100 + const average = ((current.average - previous.average) / previous.average) * 100 + const margin = current.margin - previous.margin + const direction = (delta, up, down) => (Math.abs(delta) < 0.05 ? '基本持平' : delta > 0 ? up : down) + const scale = + sales >= 0.05 && orders <= -0.05 + ? '销售增长伴随订单减少' + : `销售额${direction(sales, '增长', '下降')}，订单数${direction(orders, '增加', '减少')}` + return `${scale}；客单价${direction(average, '提升', '下降')}，利润率${direction(margin, '提升', '回落')}。` + } + + // 首行保存周期与核心/衍生数量，第二行保存结论，后续逐项列出依据；变化率不重复计数。 + // 实际接入 AI 时，将同一统计范围的关键结论与指标依据写入 Insight Builder。 + function summarizePeriod(total, prior, firstDay, lastDay) { + const days = lastDay - firstDay + 1 + const metrics = [ + { field: 'sales', label: '销售额', format: money }, + { field: 'order_id', label: '订单数', format: (value) => `${number(value)} 单` }, + { field: 'profit', label: '利润', format: money }, + ] + const items = metrics.map(({ field, label, format }) => { + const current = total[field] + const previous = prior[field] + if (!Number.isFinite(current)) return `- ${label}：暂无有效数据，暂无法判断变化。` + const value = format(current) + if (!Number.isFinite(previous)) return `- ${label}：${value}，缺少前期数据，暂无法比较。` + if (!previous) return `- ${label}：${value}，前期为 0，增速不适用。` + const percent = changeText(current, previous).value + const change = + Math.abs(percent) < 0.05 + ? '基本持平' + : `${percent < 0 ? '↓ 下跌' : '↑ 增长'} ${Math.abs(percent).toFixed(1)}%` + return `- ${label}：${value}，环比${change}。` + }) + const derived = deriveMetrics(total) + const priorDerived = deriveMetrics(prior) + const averageChange = Number.isFinite(derived.average) + ? changeText(derived.average, priorDerived.average) + : undefined + const averageChangeText = !Number.isFinite(averageChange?.value) + ? '暂无可比数据' + : Math.abs(averageChange.value) < 0.05 + ? '基本持平' + : `${averageChange.value > 0 ? '↑ 增长' : '↓ 下跌'} ${Math.abs(averageChange.value).toFixed(1)}%` + items.push( + `- 利润率：${Number.isFinite(derived.margin) ? `${derived.margin.toFixed(1)}%` : '—'}，${pointChange(derived.margin, priorDerived.margin)}。`, + `- 平均客单价：${Number.isFinite(derived.average) ? money(derived.average) : '—'}，${averageChangeText}。`, + ) + return [ + `${metrics.length} 项核心指标 · 2 项衍生指标 · ${dateKey(firstDay)} — ${dateKey(lastDay)} · 对比前 ${days} 天`, + summarizeKeyFinding(total, prior), + ...items, + ].join('\n') + } + + // Insight 保存周期、关键结论与 Markdown 列表；UI 只根据箭头标记着色。 + function renderInsightContent(content) { + const [scope = '', conclusion = '', ...lines] = content.split('\n') + $('#insight-conclusion').textContent = conclusion + $('#insight-conclusion').hidden = !conclusion + $('#insight-scope').textContent = scope + const items = lines + .filter((line) => line.startsWith('- ')) + .map((line) => { + let text = line.slice(2) + const item = document.createElement('li') + const labelEnd = text.indexOf('：') + 1 + if (labelEnd) { + const label = document.createElement('strong') + label.textContent = text.slice(0, labelEnd) + item.append(label) + text = text.slice(labelEnd) + } + const match = text.match(/[↑↓]\s*(?:增长|下跌|提升|下降)\s*\d+(?:\.\d+)?(?:%| 个百分点)/) + if (match) { + const change = document.createElement('span') + change.className = 'insight-change' + change.dataset.direction = match[0].startsWith('↑') ? 'up' : 'down' + change.textContent = match[0] + item.append(text.slice(0, match.index), change, text.slice(match.index + match[0].length)) + } else item.append(text) + return item + }) + $('#insight-list').replaceChildren(...items) + } function setChange(selector, change) { - $(selector).textContent = change.text $(selector).dataset.direction = change.direction + animateMetric( + selector, + change.value, + (value) => { + $(selector).dataset.direction = value < 0 ? 'down' : 'up' + return `${value >= 0 ? '↑' : '↓'} ${Math.abs(value).toFixed(1)}%` + }, + change.text, + ) } function showMetrics(total, prior, consumerTotal, comparison, scope = 'all') { const salesChange = changeText(total.sales, prior.sales) if (scope === 'all') { - $('#sales').textContent = money(total.sales) - $('#average').textContent = total.order_id ? money(total.sales / total.order_id) : '—' - $('#margin').textContent = total.sales ? `${((total.profit / total.sales) * 100).toFixed(1)}%` : '—' + animateMetric('#sales', total.sales, money) + animateMetric('#average', total.order_id ? total.sales / total.order_id : undefined, money) + animateMetric( + '#margin', + total.sales ? (total.profit / total.sales) * 100 : undefined, + (value) => `${value.toFixed(1)}%`, + ) setChange('#sales-change', salesChange) } if (scope === 'all' || scope === 'growth') { - $('#growth').textContent = salesChange.percent $('#growth').dataset.direction = salesChange.direction + animateMetric('#growth', salesChange.value, (value) => { + $('#growth').dataset.direction = value < 0 ? 'down' : 'up' + return `${value >= 0 ? '+' : ''}${value.toFixed(1)}%` + }) } if (scope === 'all' || scope === 'profit') { - $('#profit').textContent = money(total.profit) + animateMetric('#profit', total.profit, money) setChange('#profit-change', changeText(total.profit, prior.profit)) } const labels = scope === 'all' ? '.compare-label' : `#${scope}-card .compare-label` document.querySelectorAll(labels).forEach((label) => (label.textContent = comparison)) if (scope === 'all' || scope === 'orders') { - $('#orders').textContent = number(total.order_id) + animateMetric('#orders', total.order_id, number) setChange('#orders-change', changeText(total.order_id, prior.order_id)) const share = total.order_id ? (consumerTotal.order_id / total.order_id) * 100 : 0 $('#consumer-ring').setAttribute('aria-valuenow', share.toFixed(1)) - $('#consumer-share').textContent = total.order_id ? `${Math.round(share)}%` : '—' + animateMetric('#consumer-share', total.order_id ? share : undefined, (value) => `${Math.round(value)}%`) return draw($('#consumer-ring-plot'), buildConsumerRingSpec(share, total.order_id > 0)) } } @@ -1343,10 +2081,27 @@

      利润

      const connectorId = 'vbi-example-supermarket' await run(async () => { sourceInfo = await connectSupermarket(connectorId) + const emptyDashboard = VBI.dashboard.createEmpty() const dashboard = VBI.dashboard.create({ - ...VBI.dashboard.createEmpty(), + ...emptyDashboard, + breakpoints: { ...emptyDashboard.breakpoints, lg: 800 }, meta: { title: 'Brand · 经营概览', theme: 'light' }, }) + const insight = VBI.insight.create(VBI.insight.createEmpty()) + dashboard.insight.add((widget) => { + widget + .setInsightId(insight) + .setTitle('核心发现') + .setLayouts({ + lg: position(layoutPresets.focus.lg.insight), + xs: position(layoutPresets.focus.xs.insight), + }) + $('#insight-slot').dataset.widget = widget.getId() + }) + const renderInsight = () => { + renderInsightContent(insight.build().content) + } + insight.dsl.observeDeep(renderInsight) const trend = createChart(connectorId, 'area', 'order_date') const growth = createChart(connectorId, 'area', 'order_date') const totals = createChart(connectorId, 'table', null, ['sales', 'order_id', 'profit']) @@ -1356,38 +2111,22 @@

      利润

      const regions = createChart(connectorId, 'table', 'area', ['sales', 'order_id', 'profit']) const dailyTotals = createChart(connectorId, 'table', 'order_date', ['sales', 'order_id', 'profit']) const dailyConsumers = createChart(connectorId, 'table', 'order_date', ['order_id']) - bindWidget( - dashboard, - trend, - $('#hero-slot'), - '销售总额', - { x: 0, y: 0, w: 8, h: 9 }, - { x: 0, y: 0, w: 12, h: 9 }, - ) - bindWidget( - dashboard, - growth, - $('#growth-slot'), - '销售增长', - { x: 8, y: 0, w: 4, h: 3 }, - { x: 0, y: 9, w: 12, h: 3 }, - ) - bindWidget( - dashboard, - totals, - $('#orders-slot'), - '订单总数', - { x: 8, y: 3, w: 4, h: 3 }, - { x: 0, y: 12, w: 12, h: 3 }, - ) - bindWidget( - dashboard, - profit, - $('#profit-slot'), - '利润', - { x: 8, y: 6, w: 4, h: 3 }, - { x: 0, y: 15, w: 12, h: 3 }, - ) + const widgets = { + hero: { chart: trend, title: '销售总额' }, + growth: { chart: growth, title: '销售增长' }, + orders: { chart: totals, title: '订单总数' }, + profit: { chart: profit, title: '利润' }, + } + for (const [role, { chart, title }] of Object.entries(widgets)) { + bindWidget( + dashboard, + chart, + $(`#${role}-slot`), + title, + position(layoutPresets.focus.lg[role]), + position(layoutPresets.focus.xs[role]), + ) + } const charts = [trend, growth, totals, profit, previous, consumers, regions, dailyTotals, dailyConsumers] consumers.whereFilter.add('customer_type', (node) => node.setOperator('eq').setValue('消费者')) dailyConsumers.whereFilter.add('customer_type', (node) => node.setOperator('eq').setValue('消费者')) @@ -1403,6 +2142,39 @@

      利润

      let disposed = false let hoverMetrics const hoverSubscriptions = new Map() + function selectLayout(mode) { + const preset = layoutPresets[mode] + hoverSubscriptions.forEach((subscription) => subscription.reset()) + resetCardMotion.forEach((reset) => reset()) + if (hasEntered) finishEntrance() + const sections = { + hero: '结果 · 销售表现', + growth: '原因 · 增长走势', + profit: '原因 · 盈利表现', + orders: '证据 · 客户结构', + } + dashboard.doc.transact(() => { + dashboard.insight.update($('#insight-slot').dataset.widget, (widget) => + widget.setLayouts({ lg: position(preset.lg.insight), xs: position(preset.xs.insight) }), + ) + for (const role of Object.keys(widgets)) { + const slot = $(`#${role}-slot`) + dashboard.chart.update(slot.dataset.widget, (widget) => + widget.setLayouts({ lg: position(preset.lg[role]), xs: position(preset.xs[role]) }), + ) + slot.classList.toggle('expanded', preset.expanded.includes(role)) + slot.dataset.section = sections[role] + } + }) + $('#dashboard').dataset.layout = mode + document + .querySelectorAll('.layout-picker [data-layout]') + .forEach((button) => button.setAttribute('aria-pressed', String(button.dataset.layout === mode))) + $('#layout-label').textContent = `布局 · ${$(`.layout-picker [data-layout="${mode}"]`).title}` + renderedCharts.forEach((instance) => instance.hideTooltip()) + hoverMetrics?.restore()?.catch((error) => console.error(error)) + layoutDashboard(dashboard) + } async function render(currentRevision) { const { min: firstDay, max: lastDay } = trend.whereFilter .find((node) => 'getField' in node && node.getField() === 'order_day') @@ -1438,6 +2210,8 @@

      利润

      draw($('#profit-trend'), buildChartSpec(profitSeed, firstDay, lastDay, true), profit), ]) if (disposed || currentRevision !== revision) return + insight.setContent(summarizePeriod(total, prior, firstDay, lastDay)) + renderInsight() const byDate = new Map(dailyRows.map((row) => [row.order_date, row])) const consumersByDate = new Map(consumerRows.map((row) => [row.order_date, row])) function restore(scope = 'all') { @@ -1458,7 +2232,7 @@

      利润

      ) } hoverMetrics = { showDate, restore } - // 主图联动全部指标，小图仅更新所属卡片。 + // 主图联动全部指标，小图只更新所属卡片。 for (const [chart, scope] of [ [trend, 'all'], [growth, 'growth'], @@ -1523,7 +2297,7 @@

      利润

      return refreshTask } applyPeriod(30) - layoutDashboard(dashboard) + selectLayout($('.layout-picker [aria-pressed="true"]').dataset.layout) await render(revision) // 直接使用现有 DSL 订阅，无需等待 Builder 的同名便捷接口发布。 charts.forEach((chart) => chart.dsl.observeDeep(requestRender)) @@ -1533,6 +2307,18 @@

      利润

      applyPeriod(Number(button.dataset.days)) }), ) + document.querySelectorAll('[data-color]').forEach((button) => + button.addEventListener('click', () => { + if (button.getAttribute('aria-pressed') === 'true') return + selectPalette(button) + requestRender() + }), + ) + document.querySelectorAll('.layout-picker [data-layout]').forEach((button) => + button.addEventListener('click', () => { + if (button.getAttribute('aria-pressed') !== 'true') selectLayout(button.dataset.layout) + }), + ) $('#region-details').addEventListener('toggle', (event) => { if (!event.target.open || reducedMotion.matches) return document.querySelectorAll('tbody tr').forEach((row, index) => @@ -1545,16 +2331,20 @@

      利润

      ), ) }) - const onResize = () => layoutDashboard(dashboard) - window.addEventListener('resize', onResize) + const resizeObserver = new ResizeObserver(() => layoutDashboard(dashboard)) + resizeObserver.observe($('#dashboard')) reducedMotion.addEventListener('change', requestRender) window.addEventListener('pagehide', (event) => { if (event.persisted) return disposed = true + insight.dsl.unobserveDeep(renderInsight) charts.forEach((chart) => chart.dsl.unobserveDeep(requestRender)) hoverSubscriptions.forEach((subscription) => subscription.dispose()) - window.removeEventListener('resize', onResize) + resizeObserver.disconnect() reducedMotion.removeEventListener('change', requestRender) + reducedMotion.removeEventListener('change', onMetricMotionChange) + finishMetricAnimations() + metricAnimations.clear() renderedCharts.forEach((instance) => instance.release()) charts.forEach((chart) => chart.instance.bind(undefined)) renderedCharts.clear() diff --git a/skills/light-dashboard/templates/index.html b/skills/light-dashboard/templates/index.html new file mode 100644 index 0000000000..b1cefcd0ca --- /dev/null +++ b/skills/light-dashboard/templates/index.html @@ -0,0 +1,919 @@ + + + + + + + Dashboard 模板参考集 · VBI + + + +
      +
      +
      + VBI / INDUSTRY REFERENCES +

      同一能力，不同阅读路径

      +

      24 份模板 · 4 份基础 + 10 个行业 × 2 份 · 数据内嵌

      +
      +
      + +
      +
      +

      + 先从数据结构与分析任务确定布局，再独立选择主题色。下面的模板用于参考与组合；每个行业的两页采用不同分析重点、布局与主题色。点击截图打开完整模板，或查看 + PNG 与四份基准的对照。 +

      +
      +

      基础参考

      +

      四份基础实现；分别参考趋势主导、指标先行、分段叙事与经营主辅布局。

      +
      +
      + 全球寿命观察截图 +

      全球寿命观察

      +

      #9FBFDF · soft

      +

      2,938 条寿命记录；真实年度趋势、国家覆盖与教育指标。

      +

      左侧大趋势承载长期变化，右侧小卡补充变化幅度、覆盖和教育，保持单一视觉中心。

      +

      浅蓝与中性阅读面营造平静氛围，让长期曲线和数字优先。

      + +
      +
      + 心衰样本观察截图 +

      心衰样本观察

      +

      #B4A6D5 · soft

      +

      299 条临床样本；事件占比、射血分数、肌酐与年龄组比较。

      +

      顶部三项指标先概览，下方宽幅条形图再看年龄组；随访天数不伪装成日历趋势。

      +

      低饱和紫区分指标概览风格，事件状态由标签表达，避免主题色暗示风险。

      + +
      +
      + 餐食与运动画像截图 +

      餐食与运动画像

      +

      #E4B18E · soft

      +

      8,000 条餐食记录；热量、估算运动时长、营养与样本构成。

      +

      热量主区、运动与营养双列、样本构成收尾，分段解释不同量纲，避免 KPI 挤在一排。

      +

      暖橙呼应餐食与日常生活，统一各段强调色，减少多指标页面的颜色噪声。

      + +
      +
      + 经营概览截图 +

      经营概览

      +

      #A8C7E8 · soft

      +

      轻量销售示例；销售额、增长、订单、利润与衍生效率指标。

      +

      左主趋势与右侧三张辅助卡突出销售规模，标题右侧合并筛选，明细承接核对。

      +

      浅蓝统一趋势与卡片，白色阅读面降低密度，正负变化另用语义色表达。

      + +
      +
      +
      +
      +

      教育

      +

      + Student Performance Data Set + · 649 条完整记录 · Kaggle v2 +

      +
      +
      + 学习成果观察截图 +

      学习成果观察

      +

      #7694D4 · rounded

      +

      葡萄牙两所中学 · 葡语课程

      +

      大幅年龄组比较居左，成绩、出勤与进步互相补充。

      +

      蓝紫表达安静的学习氛围，以中性阅读面承载成绩。

      + +
      +
      + 出勤与学习节奏截图 +

      出勤与学习节奏

      +

      #B37C69 · paper

      +

      样本记录 · 学习投入与成绩

      +

      先读三个概览结果，再进入全宽学习时长比较，避免用因果语言解释出勤。

      +

      陶土色配纸白强调教育观察的温度，与另一份冷色模板区分。

      + +
      +
      +
      +
      +

      零售

      +

      + Retail Sales Dataset · + 1,000 条完整记录 · Kaggle v1 +

      +
      +
      + 零售月度脉搏截图 +

      零售月度脉搏

      +

      #CE7864 · soft

      +

      合成交易样本 · 金额与购买结构

      +

      全宽月度金额趋势先回答规模变化，随后一排结构与效率指标。

      +

      柔和珊瑚色呼应消费场景，低饱和避免促销色淹没数据。

      + +
      +
      + 品类与客单结构截图 +

      品类与客单结构

      +

      #558B98 · outline

      +

      合成零售样本 · 商品组合

      +

      右侧大品类比较与左侧结构卡形成镜像阅读，先看客单再看件数。

      +

      石油蓝用于冷静的商品结构分析，避免与金额趋势页共用暖色。

      + +
      +
      +
      +
      +

      医疗费用

      +

      + Medical Cost Personal Datasets · 1,338 + 条完整记录 · Kaggle v1 +

      +
      +
      + 医疗费用样本截图 +

      医疗费用样本

      +

      #8294AC · rounded

      +

      保险费用数据 · 描述性观察

      +

      费用比较占据左侧主区，两个相关特征居右，样本结构横向收尾。

      +

      灰蓝色稳定费用数据的阅读感，不以主题色暗示临床风险。

      + +
      +
      + 地区费用画像截图 +

      地区费用画像

      +

      #B77D91 · editorial

      +

      费用与家庭结构 · 样本概览

      +

      顶部两张概览卡后接左侧地区费用主图与右侧结构卡，强调区域描述。

      +

      灰玫瑰与中性纸白让家庭结构观察更柔和，分类含义仍由文本表达。

      + +
      +
      +
      +
      +

      银行营销

      +

      + Bank Marketing Dataset · + 11,162 条完整记录 · Kaggle v1 +

      +
      +
      + 银行触达观察截图 +

      银行触达观察

      +

      #767CB8 · outline

      +

      营销样本 · 联系渠道与账户特征

      +

      渠道主图与窄侧栏构成主辅层级，底部全宽卡补充触达强度。

      +

      靛蓝延续金融场景的克制感，负余额由坐标真实呈现。

      + +
      +
      + 营销响应结构截图 +

      营销响应结构

      +

      #B49759 · paper

      +

      教育分组 · 样本接受与联系强度

      +

      左侧两张细卡、右侧宽比较图，再以联系强度收尾，避免多组指标等权排列。

      +

      柔金色用于响应结构的重点强调，以白色卡片控制金融配色重量。

      + +
      +
      +
      +
      +

      房地产

      +

      + Housing Price Prediction + · 545 条完整记录 · Kaggle v1 +

      +
      +
      + 住宅价格与空间截图 +

      住宅价格与空间

      +

      #BB8C70 · soft

      +

      房源样本 · 卧室与配置

      +

      全宽卧室价格比较后，以宽结构卡和两张小卡说明房源配置。

      +

      沙陶色呼应空间与居住，金额采用原始单位而不编造币种。

      + +
      +
      + 装修与空间效率截图 +

      装修与空间效率

      +

      #9B6F80 · editorial

      +

      房源样本 · 总量口径的单位面积价格

      +

      宽空调结构卡在前，随后左主图与右辅卡；突出总价与面积的不同口径。

      +

      莓灰色与纸面边线让房源比较更像市场观察报告，与沙色空间页区分。

      + +
      +
      +
      +
      +

      能源

      +

      + U.S. Renewable Energy Consumption + · 3,065 条完整记录 · Kaggle v1 +

      +
      +
      + 可再生能源长镜头截图 +

      可再生能源长镜头

      +

      #C19A50 · paper

      +

      美国 EIA 数据 · 1973—2024

      +

      右侧长年度曲线配左侧来源概览，底部宽卡补充风能报告值。

      +

      琥珀色呼应能源，轻量纸面使长期曲线成为主视觉。

      + +
      +
      + 风能的部门画像截图 +

      风能的部门画像

      +

      #5278A5 · rounded

      +

      报告覆盖与消费结构 · 美国部门样本

      +

      半宽部门比较和右侧上下分组卡形成紧凑双区，强调部门结构而非年度规模。

      +

      深湖蓝强调风能与电力的清晰感，用中性背景区别长期琥珀曲线。

      + +
      +
      +
      +
      +

      农业

      +

      + Crop Recommendation Dataset + · 2,200 条完整记录 · Kaggle v1 +

      +
      +
      + 作物环境样本截图 +

      作物环境样本

      +

      #919565 · outline

      +

      降雨与气候 · 标签数据观察

      +

      半宽气候主图置右，左侧用结构与温湿度解释样本，避免堆放 22 个作物 KPI。

      +

      灰橄榄色呼应田野环境，保持原始分类与区间标签可读。

      + +
      +
      + 土壤养分分组截图 +

      土壤养分分组

      +

      #B17851 · paper

      +

      氮磷钾与 pH · 观察样本

      +

      宽养分主图后接中间宽指标卡与两侧结构卡，按土壤问题组织阅读。

      +

      赭色呼应土壤，并与气候页的橄榄色区分，避免高饱和农作物拼色。

      + +
      +
      +
      +
      +

      酒店旅游

      +

      + Hotel Reservations Dataset + · 36,275 条完整记录 · Kaggle v1 +

      +
      +
      + 酒店预订节奏截图 +

      酒店预订节奏

      +

      #5E9DA4 · soft

      +

      2017—2018 到店月份 · 预订记录

      +

      顶部指标分成窄宽窄节奏，再用全宽月份曲线承接预订规模。

      +

      海蓝色呼应旅行体验，取消状态通过明确文字表达而不靠主题色判好坏。

      + +
      +
      + 旅客与入住计划截图 +

      旅客与入住计划

      +

      #AD956E · editorial

      +

      渠道结构 · 人次、夜数与复住记录

      +

      左主图与右侧两张较高计划卡承接不同量纲，底部以取消记录补足质量。

      +

      砂金色配报告式边线表达住宿计划，与月份页的海蓝轻量卡片区分。

      + +
      +
      +
      +
      +

      制造业

      +

      + Machine Predictive Maintenance Classification + · 10,000 条完整记录 · Kaggle v1 +

      +
      +
      + 设备运行样本截图 +

      设备运行样本

      +

      #7891A1 · outline

      +

      合成预测维护数据 · 故障标签

      +

      右侧故障数量比较与左侧运行特征卡形成主辅，底部保留温差信息。

      +

      钢灰蓝匹配设备运行语境，不把装饰色当故障告警色。

      + +
      +
      + 磨损与运行工况截图 +

      磨损与运行工况

      +

      #C0884F · rounded

      +

      合成记录 · 速度、扭矩与故障标签

      +

      全宽故障结构卡后接七列工况主图与五列运行特征，突出量纲差异。

      +

      铜橙呼应机械与工具，白色阅读面避免工业大屏的视觉重量。

      + +
      +
      +
      +
      +

      物流

      +

      + E-Commerce Shipping Data · 10,999 + 条完整记录 · Kaggle v1 +

      +
      +
      + 仓库履约观察截图 +

      仓库履约观察

      +

      #588FBD · soft

      +

      发运样本 · 准时状态与服务

      +

      较窄主图承载五个仓库分组，右侧三张大小有别的服务指标补充解释。

      +

      晴蓝呼应物流流转，强调状态文字与样本占比的可读性。

      + +
      +
      + 运输与服务画像截图 +

      运输与服务画像

      +

      #A778A3 · paper

      +

      重量、折扣与商品成本 · 发运记录

      +

      三个概览卡在前，后接七列运输比较与五列服务卡，使重量成为主分析。

      +

      灰兰紫区别运营规模页，给服务与商品属性建立温和的分析氛围。

      + +
      +
      +
      +
      + 各模板内嵌其示例数据，浏览器只需联网加载 VBI / VQuery / VSeed / + VChart。行业模板的来源、版本、许可与原始数据校验值保存在 HTML 的 source-data 中。 +
      +
      + + + diff --git a/skills/light-dashboard/templates/template-agriculture-climate-mobile.png b/skills/light-dashboard/templates/template-agriculture-climate-mobile.png new file mode 100644 index 0000000000..90665c6a89 Binary files /dev/null and b/skills/light-dashboard/templates/template-agriculture-climate-mobile.png differ diff --git a/skills/light-dashboard/templates/template-agriculture-climate.html b/skills/light-dashboard/templates/template-agriculture-climate.html new file mode 100644 index 0000000000..fb6ae53f35 --- /dev/null +++ b/skills/light-dashboard/templates/template-agriculture-climate.html @@ -0,0 +1,1973 @@ + + + + + + + + 作物环境样本 · VBI + + + +
      +
      + AGRICULTURE / 01降雨与气候 · 标签数据观察 +
      +
      +
      +

      作物环境样本

      +

      正在准备内嵌数据…

      +
      +
      +
      + +
      +
      + +
      +
      +
      +
      +
      +
      +
      +

      核心发现

      +

      正在分析…

      +

      +
        +
        +
        +
        +
        +

        01 · 餐食热量

        +

        平均降雨量

        + — +

        +
        + + +
        +
        +
        +

        范围汇总 · 悬停或方向键查看降雨区间

        + +
        +
        +
        +

        所选记录数

        + — +
        +
        +

        平均 pH

        + — +
        +
        +
        +
        +
        +
        +

        +

        pH 6–7 样本占比

        +
        + — +
        + + — +
        +
        +

        + +
        +
        +
        +
        +

        +

        平均温度

        +
        + — + +
        +

        + +
        +
        +
        +
        +

        +

        平均湿度

        +
        + — + +
        +

        + +
        +
        +
        +
        + 降雨区间明细与统计口径 +
        + + + + + + + + + + + + + +
        + 每行一个带作物标签的环境样本；pH 6–7 + 仅为分析区间，不表示适种阈值。数据无日期、产量与试验对照，不提供种植推荐或产量归因。 +
        降雨区间记录数平均降雨量pH 6–7 样本占比平均温度平均湿度
        +
        + +
        +
        + +
        + + + + + + + + + + + diff --git a/skills/light-dashboard/templates/template-agriculture-climate.png b/skills/light-dashboard/templates/template-agriculture-climate.png new file mode 100644 index 0000000000..24880fbcfb Binary files /dev/null and b/skills/light-dashboard/templates/template-agriculture-climate.png differ diff --git a/skills/light-dashboard/templates/template-agriculture-nutrients-mobile.png b/skills/light-dashboard/templates/template-agriculture-nutrients-mobile.png new file mode 100644 index 0000000000..9a62f60d21 Binary files /dev/null and b/skills/light-dashboard/templates/template-agriculture-nutrients-mobile.png differ diff --git a/skills/light-dashboard/templates/template-agriculture-nutrients.html b/skills/light-dashboard/templates/template-agriculture-nutrients.html new file mode 100644 index 0000000000..fd1610c543 --- /dev/null +++ b/skills/light-dashboard/templates/template-agriculture-nutrients.html @@ -0,0 +1,1969 @@ + + + + + + + + 土壤养分分组 · VBI + + + +
        +
        + AGRICULTURE / 02氮磷钾与 pH · 观察样本 +
        +
        +
        +

        土壤养分分组

        +

        正在准备内嵌数据…

        +
        +
        +
        + +
        +
        + +
        +
        +
        +
        +
        +
        +
        +

        核心发现

        +

        正在分析…

        +

        +
          +
          +
          +
          +
          +

          01 · 餐食热量

          +

          平均氮指标

          + — +

          +
          + + +
          +
          +
          +

          范围汇总 · 悬停或方向键查看氮指标区间

          + +
          +
          +
          +

          所选记录数

          + — +
          +
          +

          平均 pH

          + — +
          +
          +
          +
          +
          +
          +

          +

          pH 6–7 样本占比

          +
          + — +
          + + — +
          +
          +

          + +
          +
          +
          +
          +

          +

          平均磷指标

          +
          + — + +
          +

          + +
          +
          +
          +
          +

          +

          平均钾指标

          +
          + — + +
          +

          + +
          +
          +
          +
          + 氮指标区间明细与统计口径 +
          + + + + + + + + + + + + + +
          + N/P/K + 按源字段原始量纲展示，不补造肥料单位。区间为本页分组；所有计算覆盖所选样本，不作肥料配方与因果建议。 +
          氮指标区间记录数平均氮指标pH 6–7 样本占比平均磷指标平均钾指标
          +
          + +
          +
          + +
          + + + + + + + + + + + diff --git a/skills/light-dashboard/templates/template-agriculture-nutrients.png b/skills/light-dashboard/templates/template-agriculture-nutrients.png new file mode 100644 index 0000000000..d6d26521c4 Binary files /dev/null and b/skills/light-dashboard/templates/template-agriculture-nutrients.png differ diff --git a/skills/light-dashboard/templates/template-banking-outreach-mobile.png b/skills/light-dashboard/templates/template-banking-outreach-mobile.png new file mode 100644 index 0000000000..9860066bcf Binary files /dev/null and b/skills/light-dashboard/templates/template-banking-outreach-mobile.png differ diff --git a/skills/light-dashboard/templates/template-banking-outreach.html b/skills/light-dashboard/templates/template-banking-outreach.html new file mode 100644 index 0000000000..c6dc8e0d6f --- /dev/null +++ b/skills/light-dashboard/templates/template-banking-outreach.html @@ -0,0 +1,1969 @@ + + + + + + + + 银行触达观察 · VBI + + + +
          +
          + BANKING / 01营销样本 · 联系渠道与账户特征 +
          +
          +
          +

          银行触达观察

          +

          正在准备内嵌数据…

          +
          +
          +
          + +
          +
          + +
          +
          +
          +
          +
          +
          +
          +

          核心发现

          +

          正在分析…

          +

          +
            +
            +
            +
            +
            +

            01 · 餐食热量

            +

            平均账户余额

            + — +

            +
            + + +
            +
            +
            +

            范围汇总 · 悬停或方向键查看联系渠道

            + +
            +
            +
            +

            所选记录数

            + — +
            +
            +

            平均年龄

            + — +
            +
            +
            +
            +
            +
            +

            +

            接受定存样本占比

            +
            + — +
            + + — +
            +
            +

            + +
            +
            +
            +
            +

            +

            平均联系时长

            +
            + — + +
            +

            + +
            +
            +
            +
            +

            +

            本轮平均联系次数

            +
            + — + +
            +

            + +
            +
            +
            +
            + 联系渠道明细与统计口径 +
            + + + + + + + + + + + + + +
            + 每行一条营销样本；deposit 是接受定存标签。本数据的接受占比不代表总体转化率；balance + 保留负值，源文件未声明币种。 +
            联系渠道记录数平均账户余额接受定存样本占比平均联系时长本轮平均联系次数
            +
            + +
            +
            + +
            + + + + + + + + + + + diff --git a/skills/light-dashboard/templates/template-banking-outreach.png b/skills/light-dashboard/templates/template-banking-outreach.png new file mode 100644 index 0000000000..6c7ae1a078 Binary files /dev/null and b/skills/light-dashboard/templates/template-banking-outreach.png differ diff --git a/skills/light-dashboard/templates/template-banking-response-mobile.png b/skills/light-dashboard/templates/template-banking-response-mobile.png new file mode 100644 index 0000000000..f394f10f11 Binary files /dev/null and b/skills/light-dashboard/templates/template-banking-response-mobile.png differ diff --git a/skills/light-dashboard/templates/template-banking-response.html b/skills/light-dashboard/templates/template-banking-response.html new file mode 100644 index 0000000000..5f0bcc3089 --- /dev/null +++ b/skills/light-dashboard/templates/template-banking-response.html @@ -0,0 +1,1970 @@ + + + + + + + + 营销响应结构 · VBI + + + +
            +
            + BANKING / 02教育分组 · 样本接受与联系强度 +
            +
            +
            +

            营销响应结构

            +

            正在准备内嵌数据…

            +
            +
            +
            + +
            +
            + +
            +
            +
            +
            +
            +
            +
            +

            核心发现

            +

            正在分析…

            +

            +
              +
              +
              +
              +
              +

              01 · 餐食热量

              +

              接受定存样本数

              + — +

              +
              + + +
              +
              +
              +

              范围汇总 · 悬停或方向键查看教育记录

              + +
              +
              +
              +

              所选记录数

              + — +
              +
              +

              平均年龄

              + — +
              +
              +
              +
              +
              +
              +

              +

              接受定存样本占比

              +
              + — +
              + + — +
              +
              +

              + +
              +
              +
              +
              +

              +

              平均账户余额

              +
              + — + +
              +

              + +
              +
              +
              +
              +

              +

              本轮平均联系次数

              +
              + — + +
              +

              + +
              +
              +
              +
              + 教育记录明细与统计口径 +
              + + + + + + + + + + + + + +
              + 展示所选样本接受数与接受占比，不推断教育或联系次数导致响应。数据只有月份/日期字段而无年份，未制造日历趋势。 +
              教育记录记录数接受定存样本数接受定存样本占比平均账户余额本轮平均联系次数
              +
              + +
              +
              + +
              + + + + + + + + + + + diff --git a/skills/light-dashboard/templates/template-banking-response.png b/skills/light-dashboard/templates/template-banking-response.png new file mode 100644 index 0000000000..d15642c539 Binary files /dev/null and b/skills/light-dashboard/templates/template-banking-response.png differ diff --git a/skills/light-dashboard/templates/template-business-overview-mobile.png b/skills/light-dashboard/templates/template-business-overview-mobile.png new file mode 100644 index 0000000000..7a4581982a Binary files /dev/null and b/skills/light-dashboard/templates/template-business-overview-mobile.png differ diff --git a/skills/light-dashboard/templates/template-business-overview.html b/skills/light-dashboard/templates/template-business-overview.html new file mode 100644 index 0000000000..510cfbcd0d --- /dev/null +++ b/skills/light-dashboard/templates/template-business-overview.html @@ -0,0 +1,1372 @@ + + + + + + + + 经营概览 · VBI 模板 + + + +
              +
              + Brand +
              +
              +
              +

              经营概览

              +

              正在准备数据…

              +
              +
              +
              + + + +
              +
              + + + +
              +
              +
              +
              +
              +
              +
              +

              核心发现

              +

              正在分析…

              +

              +
                +
                +
                +
                +
                +

                销售总额

                + — +

                + — · +

                +
                + + +
                +
                +
                +

                区间汇总 · 悬停查看当日

                + + + +
                +
                +
                +

                综合利润率

                + — +
                +
                +

                平均客单价

                + — +
                +
                +
                +
                +
                +
                +

                销售增长

                +
                + — + +
                +

                +
                +
                +
                +
                +

                订单总数

                +
                + — +
                + + — +
                +
                +

                + — · +

                +
                +
                +
                +
                +

                利润

                +
                + — + +
                +

                + — · +

                +
                +
                +
                +
                + 查看区域明细与数据口径 +
                + + + + + + + + + + + +
                + 销售额和利润求和，订单 ID 去重；消费者占比按去重订单计算。比较此前等长周期，悬停比较前一天。 +
                地区销售额订单数利润率
                +
                +
                +
                +

                正在加载模块…

                +
                + + + + + + diff --git a/skills/light-dashboard/templates/template-business-overview.png b/skills/light-dashboard/templates/template-business-overview.png new file mode 100644 index 0000000000..e945a7fca4 Binary files /dev/null and b/skills/light-dashboard/templates/template-business-overview.png differ diff --git a/skills/light-dashboard/templates/template-education-attendance-mobile.png b/skills/light-dashboard/templates/template-education-attendance-mobile.png new file mode 100644 index 0000000000..2450d42995 Binary files /dev/null and b/skills/light-dashboard/templates/template-education-attendance-mobile.png differ diff --git a/skills/light-dashboard/templates/template-education-attendance.html b/skills/light-dashboard/templates/template-education-attendance.html new file mode 100644 index 0000000000..fd9a40316b --- /dev/null +++ b/skills/light-dashboard/templates/template-education-attendance.html @@ -0,0 +1,1969 @@ + + + + + + + + 出勤与学习节奏 · VBI + + + +
                +
                + EDUCATION / 02样本记录 · 学习投入与成绩 +
                +
                +
                +

                出勤与学习节奏

                +

                正在准备内嵌数据…

                +
                +
                +
                + +
                +
                + +
                +
                +
                +
                +
                +
                +
                +

                核心发现

                +

                正在分析…

                +

                +
                  +
                  +
                  +
                  +
                  +

                  01 · 餐食热量

                  +

                  平均缺课次数

                  + — +

                  +
                  + + +
                  +
                  +
                  +

                  范围汇总 · 悬停或方向键查看每周学习时长

                  + +
                  +
                  +
                  +

                  所选记录数

                  + — +
                  +
                  +

                  首期成绩均值

                  + — +
                  +
                  +
                  +
                  +
                  +
                  +

                  +

                  有缺课记录占比

                  +
                  + — +
                  + + — +
                  +
                  +

                  + +
                  +
                  +
                  +
                  +

                  +

                  期末成绩均值

                  +
                  + — + +
                  +

                  + +
                  +
                  +
                  +
                  +

                  +

                  期末与首期平均差

                  +
                  + — + +
                  +

                  + +
                  +
                  +
                  +
                  + 每周学习时长明细与统计口径 +
                  + + + + + + + + + + + + + +
                  + 缺课是记录次数，不代表缺课率；studytime + 是有序时长档。仅展示同范围样本描述，不能据此认定学习时长影响成绩。 +
                  每周学习时长记录数平均缺课次数有缺课记录占比期末成绩均值期末与首期平均差
                  +
                  + +
                  +
                  + +
                  + + + + + + + + + + + diff --git a/skills/light-dashboard/templates/template-education-attendance.png b/skills/light-dashboard/templates/template-education-attendance.png new file mode 100644 index 0000000000..c70c546cc5 Binary files /dev/null and b/skills/light-dashboard/templates/template-education-attendance.png differ diff --git a/skills/light-dashboard/templates/template-education-performance-mobile.png b/skills/light-dashboard/templates/template-education-performance-mobile.png new file mode 100644 index 0000000000..e00bcd329e Binary files /dev/null and b/skills/light-dashboard/templates/template-education-performance-mobile.png differ diff --git a/skills/light-dashboard/templates/template-education-performance.html b/skills/light-dashboard/templates/template-education-performance.html new file mode 100644 index 0000000000..4eafb5e73b --- /dev/null +++ b/skills/light-dashboard/templates/template-education-performance.html @@ -0,0 +1,1969 @@ + + + + + + + + 学习成果观察 · VBI + + + +
                  +
                  + EDUCATION / 01葡萄牙两所中学 · 葡语课程 +
                  +
                  +
                  +

                  学习成果观察

                  +

                  正在准备内嵌数据…

                  +
                  +
                  +
                  + +
                  +
                  + +
                  +
                  +
                  +
                  +
                  +
                  +
                  +

                  核心发现

                  +

                  正在分析…

                  +

                  +
                    +
                    +
                    +
                    +
                    +

                    01 · 餐食热量

                    +

                    期末成绩均值

                    + — +

                    +
                    + + +
                    +
                    +
                    +

                    范围汇总 · 悬停或方向键查看年龄组

                    + +
                    +
                    +
                    +

                    所选记录数

                    + — +
                    +
                    +

                    首期成绩均值

                    + — +
                    +
                    +
                    +
                    +
                    +
                    +

                    +

                    期末 ≥10 分占比

                    +
                    + — +
                    + + — +
                    +
                    +

                    + +
                    +
                    +
                    +
                    +

                    +

                    平均缺课次数

                    +
                    + — + +
                    +

                    + +
                    +
                    +
                    +
                    +

                    +

                    期末与首期平均差

                    +
                    + — + +
                    +

                    + +
                    +
                    +
                    +
                    + 年龄组明细与统计口径 +
                    + + + + + + + + + + + + + +
                    + 每行一名学生；G1/G3 为首期/期末成绩，满分 20。≥10 + 分仅作本页分析分界，不推断学校政策。分组差异不证明因果。 +
                    年龄组记录数期末成绩均值期末 ≥10 分占比平均缺课次数期末与首期平均差
                    +
                    + +
                    +
                    + +
                    + + + + + + + + + + + diff --git a/skills/light-dashboard/templates/template-education-performance.png b/skills/light-dashboard/templates/template-education-performance.png new file mode 100644 index 0000000000..f14e79a39c Binary files /dev/null and b/skills/light-dashboard/templates/template-education-performance.png differ diff --git a/skills/light-dashboard/templates/template-energy-renewables-mobile.png b/skills/light-dashboard/templates/template-energy-renewables-mobile.png new file mode 100644 index 0000000000..4dd56490c8 Binary files /dev/null and b/skills/light-dashboard/templates/template-energy-renewables-mobile.png differ diff --git a/skills/light-dashboard/templates/template-energy-renewables.html b/skills/light-dashboard/templates/template-energy-renewables.html new file mode 100644 index 0000000000..ef6b95cc36 --- /dev/null +++ b/skills/light-dashboard/templates/template-energy-renewables.html @@ -0,0 +1,1976 @@ + + + + + + + + 可再生能源长镜头 · VBI + + + +
                    +
                    + ENERGY / 01美国 EIA 数据 · 1973—2024 +
                    +
                    +
                    +

                    可再生能源长镜头

                    +

                    正在准备内嵌数据…

                    +
                    +
                    +
                    + +
                    +
                    + +
                    +
                    +
                    +
                    +
                    +
                    +
                    +

                    核心发现

                    +

                    正在分析…

                    +

                    +
                      +
                      +
                      +
                      +
                      +

                      01 · 餐食热量

                      +

                      已报告消费合计

                      + — +

                      +
                      + + +
                      +
                      +
                      +

                      范围汇总 · 悬停或方向键查看年份

                      + +
                      +
                      +
                      +

                      所选记录数

                      + — +
                      +
                      +

                      月部门报告值均值

                      + — +
                      +
                      +
                      +
                      +
                      +
                      +

                      +

                      太阳能有报告占比

                      +
                      + — +
                      + + — +
                      +
                      +

                      + +
                      +
                      +
                      +
                      +

                      +

                      太阳能报告值均值

                      +
                      + — + +
                      +

                      + +
                      +
                      +
                      +
                      +

                      +

                      风能报告值均值

                      +
                      + — + +
                      +

                      + +
                      +
                      +
                      +
                      + 年份明细与统计口径 +
                      + + + + + + + + + + + + + +
                      + 源说明：0 表示未报告/无意义，查询中转为 null；报告率以非零太阳能记录数 / + 全部所选部门月记录数计算。总量直接使用 Total Renewable Energy，未叠加重复分项；2024 不完整，未作同比。 +
                      年份记录数已报告消费合计太阳能有报告占比太阳能报告值均值风能报告值均值
                      +
                      + +
                      +
                      + +
                      + + + + + + + + + + + diff --git a/skills/light-dashboard/templates/template-energy-renewables.png b/skills/light-dashboard/templates/template-energy-renewables.png new file mode 100644 index 0000000000..8fbfbd59b2 Binary files /dev/null and b/skills/light-dashboard/templates/template-energy-renewables.png differ diff --git a/skills/light-dashboard/templates/template-energy-wind-mobile.png b/skills/light-dashboard/templates/template-energy-wind-mobile.png new file mode 100644 index 0000000000..f9a25f36f6 Binary files /dev/null and b/skills/light-dashboard/templates/template-energy-wind-mobile.png differ diff --git a/skills/light-dashboard/templates/template-energy-wind.html b/skills/light-dashboard/templates/template-energy-wind.html new file mode 100644 index 0000000000..977856f44b --- /dev/null +++ b/skills/light-dashboard/templates/template-energy-wind.html @@ -0,0 +1,1976 @@ + + + + + + + + 风能的部门画像 · VBI + + + +
                      +
                      + ENERGY / 02报告覆盖与消费结构 · 美国部门样本 +
                      +
                      +
                      +

                      风能的部门画像

                      +

                      正在准备内嵌数据…

                      +
                      +
                      +
                      + +
                      +
                      + +
                      +
                      +
                      +
                      +
                      +
                      +
                      +

                      核心发现

                      +

                      正在分析…

                      +

                      +
                        +
                        +
                        +
                        +
                        +

                        01 · 餐食热量

                        +

                        风能已报告消费

                        + — +

                        +
                        + + +
                        +
                        +
                        +

                        范围汇总 · 悬停或方向键查看消费部门

                        + +
                        +
                        +
                        +

                        所选记录数

                        + — +
                        +
                        +

                        总消费报告值均值

                        + — +
                        +
                        +
                        +
                        +
                        +
                        +

                        +

                        风能有报告占比

                        +
                        + — +
                        + + — +
                        +
                        +

                        + +
                        +
                        +
                        +
                        +

                        +

                        太阳能报告值均值

                        +
                        + — + +
                        +

                        + +
                        +
                        +
                        +
                        +

                        +

                        风能报告值均值

                        +
                        + — + +
                        +

                        + +
                        +
                        +
                        +
                        + 消费部门明细与统计口径 +
                        + + + + + + + + + + + + + +
                        + 消费单位为万亿 BTU。0 按源说明作缺失，不当真实零；均值分母为各字段非零报告记录数，未报告的部门显示 + —。报告覆盖不等于风能能源占比。 +
                        消费部门记录数风能已报告消费风能有报告占比太阳能报告值均值风能报告值均值
                        +
                        + +
                        +
                        + +
                        + + + + + + + + + + + diff --git a/skills/light-dashboard/templates/template-energy-wind.png b/skills/light-dashboard/templates/template-energy-wind.png new file mode 100644 index 0000000000..52651868d5 Binary files /dev/null and b/skills/light-dashboard/templates/template-energy-wind.png differ diff --git a/skills/light-dashboard/templates/template-healthcare-charges-mobile.png b/skills/light-dashboard/templates/template-healthcare-charges-mobile.png new file mode 100644 index 0000000000..52e8f1b062 Binary files /dev/null and b/skills/light-dashboard/templates/template-healthcare-charges-mobile.png differ diff --git a/skills/light-dashboard/templates/template-healthcare-charges.html b/skills/light-dashboard/templates/template-healthcare-charges.html new file mode 100644 index 0000000000..a3effeca43 --- /dev/null +++ b/skills/light-dashboard/templates/template-healthcare-charges.html @@ -0,0 +1,1968 @@ + + + + + + + + 医疗费用样本 · VBI + + + +
                        +
                        + HEALTHCARE / 01保险费用数据 · 描述性观察 +
                        +
                        +
                        +

                        医疗费用样本

                        +

                        正在准备内嵌数据…

                        +
                        +
                        +
                        + +
                        +
                        + +
                        +
                        +
                        +
                        +
                        +
                        +
                        +

                        核心发现

                        +

                        正在分析…

                        +

                        +
                          +
                          +
                          +
                          +
                          +

                          01 · 餐食热量

                          +

                          平均医疗费用

                          + — +

                          +
                          + + +
                          +
                          +
                          +

                          范围汇总 · 悬停或方向键查看年龄组

                          + +
                          +
                          +
                          +

                          所选记录数

                          + — +
                          +
                          +

                          平均子女数

                          + — +
                          +
                          +
                          +
                          +
                          +
                          +

                          +

                          吸烟记录占比

                          +
                          + — +
                          + + — +
                          +
                          +

                          + +
                          +
                          +
                          +
                          +

                          +

                          平均 BMI

                          +
                          + — + +
                          +

                          + +
                          +
                          +
                          +
                          +

                          +

                          平均年龄

                          +
                          + — + +
                          +

                          + +
                          +
                          +
                          +
                          + 年龄组明细与统计口径 +
                          + + + + + + + + + + + + + +
                          + 每行一份保险样本；charges + 为个人医疗费用，源数据卡未声明币种，保留原始金额单位。BMI、吸烟和费用仅作样本描述，不作诊断、个体预测或因果归因。 +
                          年龄组记录数平均医疗费用吸烟记录占比平均 BMI平均年龄
                          +
                          + +
                          +
                          + +
                          + + + + + + + + + + + diff --git a/skills/light-dashboard/templates/template-healthcare-charges.png b/skills/light-dashboard/templates/template-healthcare-charges.png new file mode 100644 index 0000000000..c103f53ac3 Binary files /dev/null and b/skills/light-dashboard/templates/template-healthcare-charges.png differ diff --git a/skills/light-dashboard/templates/template-healthcare-regions-mobile.png b/skills/light-dashboard/templates/template-healthcare-regions-mobile.png new file mode 100644 index 0000000000..4eeb927f6b Binary files /dev/null and b/skills/light-dashboard/templates/template-healthcare-regions-mobile.png differ diff --git a/skills/light-dashboard/templates/template-healthcare-regions.html b/skills/light-dashboard/templates/template-healthcare-regions.html new file mode 100644 index 0000000000..fc8b2c1396 --- /dev/null +++ b/skills/light-dashboard/templates/template-healthcare-regions.html @@ -0,0 +1,1968 @@ + + + + + + + + 地区费用画像 · VBI + + + +
                          +
                          + HEALTHCARE / 02费用与家庭结构 · 样本概览 +
                          +
                          +
                          +

                          地区费用画像

                          +

                          正在准备内嵌数据…

                          +
                          +
                          +
                          + +
                          +
                          + +
                          +
                          +
                          +
                          +
                          +
                          +
                          +

                          核心发现

                          +

                          正在分析…

                          +

                          +
                            +
                            +
                            +
                            +
                            +

                            01 · 餐食热量

                            +

                            地区平均费用

                            + — +

                            +
                            + + +
                            +
                            +
                            +

                            范围汇总 · 悬停或方向键查看地区

                            + +
                            +
                            +
                            +

                            所选记录数

                            + — +
                            +
                            +

                            平均年龄

                            + — +
                            +
                            +
                            +
                            +
                            +
                            +

                            +

                            有子女记录占比

                            +
                            + — +
                            + + — +
                            +
                            +

                            + +
                            +
                            +
                            +
                            +

                            +

                            平均 BMI

                            +
                            + — + +
                            +

                            + +
                            +
                            +
                            +
                            +

                            +

                            平均子女数

                            +
                            + — + +
                            +

                            + +
                            +
                            +
                            +
                            + 地区明细与统计口径 +
                            + + + + + + + + + + + + + +
                            + 地区均值仅覆盖所选样本；不代表地区总体医疗水平。子女记录占比 = children>0 的记录数 / + 全部所选记录数；源数据卡未声明币种，保留原始金额单位。 +
                            地区记录数地区平均费用有子女记录占比平均 BMI平均子女数
                            +
                            + +
                            +
                            + +
                            + + + + + + + + + + + diff --git a/skills/light-dashboard/templates/template-healthcare-regions.png b/skills/light-dashboard/templates/template-healthcare-regions.png new file mode 100644 index 0000000000..96c4c2d9d4 Binary files /dev/null and b/skills/light-dashboard/templates/template-healthcare-regions.png differ diff --git a/skills/light-dashboard/templates/template-heart-failure-mobile.png b/skills/light-dashboard/templates/template-heart-failure-mobile.png new file mode 100644 index 0000000000..b0ef5ef5af Binary files /dev/null and b/skills/light-dashboard/templates/template-heart-failure-mobile.png differ diff --git a/skills/light-dashboard/templates/template-heart-failure.html b/skills/light-dashboard/templates/template-heart-failure.html new file mode 100644 index 0000000000..59338ad00b --- /dev/null +++ b/skills/light-dashboard/templates/template-heart-failure.html @@ -0,0 +1,1646 @@ + + + + + + + + 心衰样本观察 · VBI + + + +
                            +
                            + COHORT NOTES临床记录样本 +
                            +
                            +
                            +

                            心衰样本观察

                            +

                            正在准备内嵌数据…

                            +
                            +
                            +
                            + +
                            +
                            + +
                            +
                            +
                            +
                            +
                            +
                            +
                            +

                            核心发现

                            +

                            正在分析…

                            +

                            +
                              +
                              +
                              +
                              +
                              +

                              01 · 餐食热量

                              +

                              样本人数

                              + — +

                              +
                              + + +
                              +
                              +
                              +

                              全体汇总 · 悬停或方向键查看年龄组

                              + +
                              +
                              +
                              +

                              平均年龄

                              + — +
                              +
                              +

                              平均随访时长

                              + — +
                              +
                              +
                              +
                              +
                              +
                              +

                              +

                              记录死亡事件占比

                              +
                              + — +
                              + + — +
                              +
                              +

                              + +
                              +
                              +
                              +
                              +

                              +

                              平均射血分数

                              +
                              + — + +
                              +

                              + +
                              +
                              +
                              +
                              +

                              +

                              平均血清肌酐

                              +
                              + — + +
                              +

                              + +
                              +
                              +
                              +
                              + 年龄组明细与统计口径 +
                              + + + + + + + + + + + + + +
                              + 每行对应一份临床记录。事件占比 = DEATH_EVENT 之和 / 样本记录数；DEATH_EVENT=0 + 表示随访观察期内未记录死亡。time 为随访天数，年龄组比较是样本描述，不构成因果或个体预后判断。 +
                              年龄组（岁）样本人数记录死亡事件事件占比平均射血分数平均肌酐（mg/dL）
                              +
                              + +
                              +
                              +

                              正在加载图表模块…

                              +
                              + + + + + + + + + diff --git a/skills/light-dashboard/templates/template-heart-failure.png b/skills/light-dashboard/templates/template-heart-failure.png new file mode 100644 index 0000000000..81f8f70695 Binary files /dev/null and b/skills/light-dashboard/templates/template-heart-failure.png differ diff --git a/skills/light-dashboard/templates/template-hospitality-bookings-mobile.png b/skills/light-dashboard/templates/template-hospitality-bookings-mobile.png new file mode 100644 index 0000000000..18423022ba Binary files /dev/null and b/skills/light-dashboard/templates/template-hospitality-bookings-mobile.png differ diff --git a/skills/light-dashboard/templates/template-hospitality-bookings.html b/skills/light-dashboard/templates/template-hospitality-bookings.html new file mode 100644 index 0000000000..e03e15eb58 --- /dev/null +++ b/skills/light-dashboard/templates/template-hospitality-bookings.html @@ -0,0 +1,1966 @@ + + + + + + + + 酒店预订节奏 · VBI + + + +
                              +
                              + HOSPITALITY / 012017—2018 到店月份 · 预订记录 +
                              +
                              +
                              +

                              酒店预订节奏

                              +

                              正在准备内嵌数据…

                              +
                              +
                              +
                              + +
                              +
                              + +
                              +
                              +
                              +
                              +
                              +
                              +
                              +

                              核心发现

                              +

                              正在分析…

                              +

                              +
                                +
                                +
                                +
                                +
                                +

                                01 · 餐食热量

                                +

                                预订记录数

                                + — +

                                +
                                + + +
                                +
                                +
                                +

                                范围汇总 · 悬停或方向键查看到店月份

                                + +
                                +
                                +
                                +

                                所选记录数

                                + — +
                                +
                                +

                                平均预订夜数

                                + — +
                                +
                                +
                                +
                                +
                                +
                                +

                                +

                                已取消预订占比

                                +
                                + — +
                                + + — +
                                +
                                +

                                + +
                                +
                                +
                                +
                                +

                                +

                                平均提前预订

                                +
                                + — + +
                                +

                                + +
                                +
                                +
                                +
                                +

                                +

                                房价字段均值

                                +
                                + — + +
                                +

                                + +
                                +
                                +
                                +
                                + 到店月份明细与统计口径 +
                                + + + + + + + + + + + + + +
                                + 月份为计划到店月，不是下单时间。取消占比 = Canceled / + 所选预订；未取消不等于已入住。房价币种未说明，不将预订价乘夜数写成已实现收入。 +
                                到店月份记录数预订记录数已取消预订占比平均提前预订房价字段均值
                                +
                                + +
                                +
                                + +
                                + + + + + + + + + + + diff --git a/skills/light-dashboard/templates/template-hospitality-bookings.png b/skills/light-dashboard/templates/template-hospitality-bookings.png new file mode 100644 index 0000000000..3a7d50d780 Binary files /dev/null and b/skills/light-dashboard/templates/template-hospitality-bookings.png differ diff --git a/skills/light-dashboard/templates/template-hospitality-guests-mobile.png b/skills/light-dashboard/templates/template-hospitality-guests-mobile.png new file mode 100644 index 0000000000..a0a66a3ed0 Binary files /dev/null and b/skills/light-dashboard/templates/template-hospitality-guests-mobile.png differ diff --git a/skills/light-dashboard/templates/template-hospitality-guests.html b/skills/light-dashboard/templates/template-hospitality-guests.html new file mode 100644 index 0000000000..fe7225fbaa --- /dev/null +++ b/skills/light-dashboard/templates/template-hospitality-guests.html @@ -0,0 +1,1972 @@ + + + + + + + + 旅客与入住计划 · VBI + + + +
                                +
                                + HOSPITALITY / 02渠道结构 · 人次、夜数与复住记录 +
                                +
                                +
                                +

                                旅客与入住计划

                                +

                                正在准备内嵌数据…

                                +
                                +
                                +
                                + +
                                +
                                + +
                                +
                                +
                                +
                                +
                                +
                                +
                                +

                                核心发现

                                +

                                正在分析…

                                +

                                +
                                  +
                                  +
                                  +
                                  +
                                  +

                                  01 · 餐食热量

                                  +

                                  预订旅客人次

                                  + — +

                                  +
                                  + + +
                                  +
                                  +
                                  +

                                  范围汇总 · 悬停或方向键查看市场渠道

                                  + +
                                  +
                                  +
                                  +

                                  所选记录数

                                  + — +
                                  +
                                  +

                                  取消预订记录

                                  + — +
                                  +
                                  +
                                  +
                                  +
                                  +
                                  +

                                  +

                                  复住标记预订占比

                                  +
                                  + — +
                                  + + — +
                                  +
                                  +

                                  + +
                                  +
                                  +
                                  +
                                  +

                                  +

                                  平均预订夜数

                                  +
                                  + — + +
                                  +

                                  + +
                                  +
                                  +
                                  +
                                  +

                                  +

                                  平均提前预订

                                  +
                                  + — + +
                                  +

                                  + +
                                  +
                                  +
                                  +
                                  + 市场渠道明细与统计口径 +
                                  + + + + + + + + + + + + + +
                                  + 旅客人次 = 成人数 + 儿童数之和，不是去重旅客数；包括取消记录。复住占比按 repeated_guest + 字段计算，不推断实际入住或客户终身价值。 +
                                  市场渠道记录数预订旅客人次复住标记预订占比平均预订夜数平均提前预订
                                  +
                                  + +
                                  +
                                  + +
                                  + + + + + + + + + + + diff --git a/skills/light-dashboard/templates/template-hospitality-guests.png b/skills/light-dashboard/templates/template-hospitality-guests.png new file mode 100644 index 0000000000..f97bb0a6fc Binary files /dev/null and b/skills/light-dashboard/templates/template-hospitality-guests.png differ diff --git a/skills/light-dashboard/templates/template-housing-efficiency-mobile.png b/skills/light-dashboard/templates/template-housing-efficiency-mobile.png new file mode 100644 index 0000000000..47134a6eab Binary files /dev/null and b/skills/light-dashboard/templates/template-housing-efficiency-mobile.png differ diff --git a/skills/light-dashboard/templates/template-housing-efficiency.html b/skills/light-dashboard/templates/template-housing-efficiency.html new file mode 100644 index 0000000000..227a771575 --- /dev/null +++ b/skills/light-dashboard/templates/template-housing-efficiency.html @@ -0,0 +1,1971 @@ + + + + + + + + 装修与空间效率 · VBI + + + +
                                  +
                                  + HOUSING / 02房源样本 · 总量口径的单位面积价格 +
                                  +
                                  +
                                  +

                                  装修与空间效率

                                  +

                                  正在准备内嵌数据…

                                  +
                                  +
                                  +
                                  + +
                                  +
                                  + +
                                  +
                                  +
                                  +
                                  +
                                  +
                                  +
                                  +

                                  核心发现

                                  +

                                  正在分析…

                                  +

                                  +
                                    +
                                    +
                                    +
                                    +
                                    +

                                    01 · 餐食热量

                                    +

                                    单位面积价格

                                    + — +

                                    +
                                    + + +
                                    +
                                    +
                                    +

                                    范围汇总 · 悬停或方向键查看装修状态

                                    + +
                                    +
                                    +
                                    +

                                    所选记录数

                                    + — +
                                    +
                                    +

                                    价格合计

                                    + — +
                                    +
                                    +
                                    +
                                    +
                                    +
                                    +

                                    +

                                    有空调房源占比

                                    +
                                    + — +
                                    + + — +
                                    +
                                    +

                                    + +
                                    +
                                    +
                                    +
                                    +

                                    +

                                    平均房源价格

                                    +
                                    + — + +
                                    +

                                    + +
                                    +
                                    +
                                    +
                                    +

                                    +

                                    房源面积合计

                                    +
                                    + — + +
                                    +

                                    + +
                                    +
                                    +
                                    +
                                    + 装修状态明细与统计口径 +
                                    + + + + + + + + + + + + + +
                                    + 单位面积价格 = 同范围价格合计 / + 面积合计，不平均逐套比率。面积为平方英尺（ft²），价格币种未说明，不标作元/平方米。 +
                                    装修状态记录数单位面积价格有空调房源占比平均房源价格房源面积合计
                                    +
                                    + +
                                    +
                                    + +
                                    + + + + + + + + + + + diff --git a/skills/light-dashboard/templates/template-housing-efficiency.png b/skills/light-dashboard/templates/template-housing-efficiency.png new file mode 100644 index 0000000000..af1bab553e Binary files /dev/null and b/skills/light-dashboard/templates/template-housing-efficiency.png differ diff --git a/skills/light-dashboard/templates/template-housing-price-mobile.png b/skills/light-dashboard/templates/template-housing-price-mobile.png new file mode 100644 index 0000000000..01d8158611 Binary files /dev/null and b/skills/light-dashboard/templates/template-housing-price-mobile.png differ diff --git a/skills/light-dashboard/templates/template-housing-price.html b/skills/light-dashboard/templates/template-housing-price.html new file mode 100644 index 0000000000..bd0a2483f1 --- /dev/null +++ b/skills/light-dashboard/templates/template-housing-price.html @@ -0,0 +1,1964 @@ + + + + + + + + 住宅价格与空间 · VBI + + + +
                                    +
                                    + HOUSING / 01房源样本 · 卧室与配置 +
                                    +
                                    +
                                    +

                                    住宅价格与空间

                                    +

                                    正在准备内嵌数据…

                                    +
                                    +
                                    +
                                    + +
                                    +
                                    + +
                                    +
                                    +
                                    +
                                    +
                                    +
                                    +
                                    +

                                    核心发现

                                    +

                                    正在分析…

                                    +

                                    +
                                      +
                                      +
                                      +
                                      +
                                      +

                                      01 · 餐食热量

                                      +

                                      平均房源价格

                                      + — +

                                      +
                                      + + +
                                      +
                                      +
                                      +

                                      范围汇总 · 悬停或方向键查看卧室数量

                                      + +
                                      +
                                      +
                                      +

                                      所选记录数

                                      + — +
                                      +
                                      +

                                      平均车位数

                                      + — +
                                      +
                                      +
                                      +
                                      +
                                      +
                                      +

                                      +

                                      有空调房源占比

                                      +
                                      + — +
                                      + + — +
                                      +
                                      +

                                      + +
                                      +
                                      +
                                      +
                                      +

                                      +

                                      平均面积

                                      +
                                      + — + +
                                      +

                                      + +
                                      +
                                      +
                                      +
                                      +

                                      +

                                      平均浴室数

                                      +
                                      + — + +
                                      +

                                      + +
                                      +
                                      +
                                      +
                                      + 卧室数量明细与统计口径 +
                                      + + + + + + + + + + + + + +
                                      + 每行一套房源；源数据卡声明面积单位为平方英尺（ft²），价格币种未说明；价格展示“万”仅为数量缩写。配置与价格差异不代表因果。 +
                                      卧室数量记录数平均房源价格有空调房源占比平均面积平均浴室数
                                      +
                                      + +
                                      +
                                      + +
                                      + + + + + + + + + + + diff --git a/skills/light-dashboard/templates/template-housing-price.png b/skills/light-dashboard/templates/template-housing-price.png new file mode 100644 index 0000000000..826e8e1701 Binary files /dev/null and b/skills/light-dashboard/templates/template-housing-price.png differ diff --git a/skills/light-dashboard/templates/template-life-expectancy-mobile.png b/skills/light-dashboard/templates/template-life-expectancy-mobile.png new file mode 100644 index 0000000000..3385579c38 Binary files /dev/null and b/skills/light-dashboard/templates/template-life-expectancy-mobile.png differ diff --git a/skills/light-dashboard/templates/template-life-expectancy.html b/skills/light-dashboard/templates/template-life-expectancy.html new file mode 100644 index 0000000000..f129611428 --- /dev/null +++ b/skills/light-dashboard/templates/template-life-expectancy.html @@ -0,0 +1,1628 @@ + + + + + + + + 全球寿命观察 · VBI + + + +
                                      +
                                      + LIFE ATLAS国家健康数据 +
                                      +
                                      +
                                      +

                                      全球寿命观察

                                      +

                                      正在准备内嵌数据…

                                      +
                                      +
                                      +
                                      + +
                                      +
                                      + +
                                      +
                                      +
                                      +
                                      +
                                      +
                                      +
                                      +

                                      核心发现

                                      +

                                      正在分析…

                                      +

                                      +
                                        +
                                        +
                                        +
                                        +
                                        +

                                        01 · 餐食热量

                                        +

                                        平均预期寿命

                                        + — +

                                        +
                                        + + +
                                        +
                                        +
                                        +

                                        末年汇总 · 悬停或方向键查看年份

                                        + +
                                        +
                                        +
                                        +

                                        发达国家占比

                                        + — +
                                        +
                                        +

                                        寿命数据覆盖率

                                        + — +
                                        +
                                        +
                                        +
                                        +
                                        +
                                        +

                                        +

                                        首尾寿命变化

                                        +
                                        + — + +
                                        +

                                        + +
                                        +
                                        +
                                        +
                                        +

                                        +

                                        覆盖国家

                                        +
                                        + — +
                                        + + — +
                                        +
                                        +

                                        + +
                                        +
                                        +
                                        +
                                        +

                                        +

                                        平均受教育年限

                                        +
                                        + — + +
                                        +

                                        + +
                                        +
                                        +
                                        +
                                        + 国家明细与统计口径 +
                                        + + + + + + + + + + + +
                                        + 明细为 2015 + 年有效寿命记录，按预期寿命排序。寿命与受教育年限均按有值国家等权平均，非人口加权；覆盖率为有效寿命国家数 + / 该年源记录国家数。趋势纵轴不从零起。 +
                                        国家预期寿命（岁）受教育年限（年）成人死亡率（源字段值）
                                        +
                                        + +
                                        +
                                        +

                                        正在加载图表模块…

                                        +
                                        + + + + + + + + + diff --git a/skills/light-dashboard/templates/template-life-expectancy.png b/skills/light-dashboard/templates/template-life-expectancy.png new file mode 100644 index 0000000000..7770ba414c Binary files /dev/null and b/skills/light-dashboard/templates/template-life-expectancy.png differ diff --git a/skills/light-dashboard/templates/template-logistics-fulfillment-mobile.png b/skills/light-dashboard/templates/template-logistics-fulfillment-mobile.png new file mode 100644 index 0000000000..a501ba4d42 Binary files /dev/null and b/skills/light-dashboard/templates/template-logistics-fulfillment-mobile.png differ diff --git a/skills/light-dashboard/templates/template-logistics-fulfillment.html b/skills/light-dashboard/templates/template-logistics-fulfillment.html new file mode 100644 index 0000000000..a90b3f6746 --- /dev/null +++ b/skills/light-dashboard/templates/template-logistics-fulfillment.html @@ -0,0 +1,1960 @@ + + + + + + + + 仓库履约观察 · VBI + + + +
                                        +
                                        + LOGISTICS / 01发运样本 · 准时状态与服务 +
                                        +
                                        +
                                        +

                                        仓库履约观察

                                        +

                                        正在准备内嵌数据…

                                        +
                                        +
                                        +
                                        + +
                                        +
                                        + +
                                        +
                                        +
                                        +
                                        +
                                        +
                                        +
                                        +

                                        核心发现

                                        +

                                        正在分析…

                                        +

                                        +
                                          +
                                          +
                                          +
                                          +
                                          +

                                          01 · 餐食热量

                                          +

                                          发运记录数

                                          + — +

                                          +
                                          + + +
                                          +
                                          +
                                          +

                                          范围汇总 · 悬停或方向键查看仓库

                                          + +
                                          +
                                          +
                                          +

                                          所选记录数

                                          + — +
                                          +
                                          +

                                          平均包裹重量

                                          + — +
                                          +
                                          +
                                          +
                                          +
                                          +
                                          +

                                          +

                                          未按时送达占比

                                          +
                                          + — +
                                          + + — +
                                          +
                                          +

                                          + +
                                          +
                                          +
                                          +
                                          +

                                          +

                                          平均客户评分

                                          +
                                          + — + +
                                          +

                                          + +
                                          +
                                          +
                                          +
                                          +

                                          +

                                          平均客服呼叫

                                          +
                                          + — + +
                                          +

                                          + +
                                          +
                                          +
                                          +
                                          + 仓库明细与统计口径 +
                                          + + + + + + + + + + + + + +
                                          + Reached.on.Time_Y.N=1 表示未按时送达，0 + 表示按时送达，依据原数据卡解释。每行一份发运样本；无日期，不展示伪造履约趋势。 +
                                          仓库记录数发运记录数未按时送达占比平均客户评分平均客服呼叫
                                          +
                                          + +
                                          +
                                          + +
                                          + + + + + + + + + + + diff --git a/skills/light-dashboard/templates/template-logistics-fulfillment.png b/skills/light-dashboard/templates/template-logistics-fulfillment.png new file mode 100644 index 0000000000..c5a9a1f6cb Binary files /dev/null and b/skills/light-dashboard/templates/template-logistics-fulfillment.png differ diff --git a/skills/light-dashboard/templates/template-logistics-service-mobile.png b/skills/light-dashboard/templates/template-logistics-service-mobile.png new file mode 100644 index 0000000000..c393063433 Binary files /dev/null and b/skills/light-dashboard/templates/template-logistics-service-mobile.png differ diff --git a/skills/light-dashboard/templates/template-logistics-service.html b/skills/light-dashboard/templates/template-logistics-service.html new file mode 100644 index 0000000000..dc0391dc17 --- /dev/null +++ b/skills/light-dashboard/templates/template-logistics-service.html @@ -0,0 +1,1966 @@ + + + + + + + + 运输与服务画像 · VBI + + + +
                                          +
                                          + LOGISTICS / 02重量、折扣与商品成本 · 发运记录 +
                                          +
                                          +
                                          +

                                          运输与服务画像

                                          +

                                          正在准备内嵌数据…

                                          +
                                          +
                                          +
                                          + +
                                          +
                                          + +
                                          +
                                          +
                                          +
                                          +
                                          +
                                          +
                                          +

                                          核心发现

                                          +

                                          正在分析…

                                          +

                                          +
                                            +
                                            +
                                            +
                                            +
                                            +

                                            01 · 餐食热量

                                            +

                                            平均包裹重量

                                            + — +

                                            +
                                            + + +
                                            +
                                            +
                                            +

                                            范围汇总 · 悬停或方向键查看运输方式

                                            + +
                                            +
                                            +
                                            +

                                            所选记录数

                                            + — +
                                            +
                                            +

                                            平均客服呼叫

                                            + — +
                                            +
                                            +
                                            +
                                            +
                                            +
                                            +

                                            +

                                            按时送达占比

                                            +
                                            + — +
                                            + + — +
                                            +
                                            +

                                            + +
                                            +
                                            +
                                            +
                                            +

                                            +

                                            平均折扣字段值

                                            +
                                            + — + +
                                            +

                                            + +
                                            +
                                            +
                                            +
                                            +

                                            +

                                            平均商品成本

                                            +
                                            + — + +
                                            +

                                            + +
                                            +
                                            +
                                            +
                                            + 运输方式明细与统计口径 +
                                            + + + + + + + + + + + + + +
                                            + 准时标记 = 1 − 原目标值；商品成本单位 USD，Discount_offered + 未声明是金额或百分比，保留原字段单位。分组差异不推断延迟原因。 +
                                            运输方式记录数平均包裹重量按时送达占比平均折扣字段值平均商品成本
                                            +
                                            + +
                                            +
                                            + +
                                            + + + + + + + + + + + diff --git a/skills/light-dashboard/templates/template-logistics-service.png b/skills/light-dashboard/templates/template-logistics-service.png new file mode 100644 index 0000000000..09ada52f81 Binary files /dev/null and b/skills/light-dashboard/templates/template-logistics-service.png differ diff --git a/skills/light-dashboard/templates/template-manufacturing-failures-mobile.png b/skills/light-dashboard/templates/template-manufacturing-failures-mobile.png new file mode 100644 index 0000000000..838370a83a Binary files /dev/null and b/skills/light-dashboard/templates/template-manufacturing-failures-mobile.png differ diff --git a/skills/light-dashboard/templates/template-manufacturing-failures.html b/skills/light-dashboard/templates/template-manufacturing-failures.html new file mode 100644 index 0000000000..57c4cc010d --- /dev/null +++ b/skills/light-dashboard/templates/template-manufacturing-failures.html @@ -0,0 +1,1973 @@ + + + + + + + + 设备运行样本 · VBI + + + +
                                            +
                                            + MANUFACTURING / 01合成预测维护数据 · 故障标签 +
                                            +
                                            +
                                            +

                                            设备运行样本

                                            +

                                            正在准备内嵌数据…

                                            +
                                            +
                                            +
                                            + +
                                            +
                                            + +
                                            +
                                            +
                                            +
                                            +
                                            +
                                            +
                                            +

                                            核心发现

                                            +

                                            正在分析…

                                            +

                                            +
                                              +
                                              +
                                              +
                                              +
                                              +

                                              01 · 餐食热量

                                              +

                                              故障标签样本数

                                              + — +

                                              +
                                              + + +
                                              +
                                              +
                                              +

                                              范围汇总 · 悬停或方向键查看产品类型

                                              + +
                                              +
                                              +
                                              +

                                              所选记录数

                                              + — +
                                              +
                                              +

                                              平均扭矩

                                              + — +
                                              +
                                              +
                                              +
                                              +
                                              +
                                              +

                                              +

                                              Target=1占比

                                              +
                                              + — +
                                              + + — +
                                              +
                                              +

                                              + +
                                              +
                                              +
                                              +
                                              +

                                              +

                                              平均刀具磨损

                                              +
                                              + — + +
                                              +

                                              + +
                                              +
                                              +
                                              +
                                              +

                                              +

                                              平均工艺环境温差

                                              +
                                              + — + +
                                              +

                                              + +
                                              +
                                              +
                                              +
                                              + 产品类型明细与统计口径 +
                                              + + + + + + + + + + + + + +
                                              + 合成记录，不是生产实时监控。故障占比使用 Target；Failure Type 与 Target + 存在不一致，保留源值、不强行校正。无日历时间，不制造实时趋势。 +
                                              产品类型记录数故障标签样本数Target=1占比平均刀具磨损平均工艺环境温差
                                              +
                                              + +
                                              +
                                              + +
                                              + + + + + + + + + + + diff --git a/skills/light-dashboard/templates/template-manufacturing-failures.png b/skills/light-dashboard/templates/template-manufacturing-failures.png new file mode 100644 index 0000000000..e986e3022c Binary files /dev/null and b/skills/light-dashboard/templates/template-manufacturing-failures.png differ diff --git a/skills/light-dashboard/templates/template-manufacturing-wear-mobile.png b/skills/light-dashboard/templates/template-manufacturing-wear-mobile.png new file mode 100644 index 0000000000..aa2e826439 Binary files /dev/null and b/skills/light-dashboard/templates/template-manufacturing-wear-mobile.png differ diff --git a/skills/light-dashboard/templates/template-manufacturing-wear.html b/skills/light-dashboard/templates/template-manufacturing-wear.html new file mode 100644 index 0000000000..c295846c61 --- /dev/null +++ b/skills/light-dashboard/templates/template-manufacturing-wear.html @@ -0,0 +1,1973 @@ + + + + + + + + 磨损与运行工况 · VBI + + + +
                                              +
                                              + MANUFACTURING / 02合成记录 · 速度、扭矩与故障标签 +
                                              +
                                              +
                                              +

                                              磨损与运行工况

                                              +

                                              正在准备内嵌数据…

                                              +
                                              +
                                              +
                                              + +
                                              +
                                              + +
                                              +
                                              +
                                              +
                                              +
                                              +
                                              +
                                              +

                                              核心发现

                                              +

                                              正在分析…

                                              +

                                              +
                                                +
                                                +
                                                +
                                                +
                                                +

                                                01 · 餐食热量

                                                +

                                                平均刀具磨损

                                                + — +

                                                +
                                                + + +
                                                +
                                                +
                                                +

                                                范围汇总 · 悬停或方向键查看刀具磨损区间

                                                + +
                                                +
                                                +
                                                +

                                                所选记录数

                                                + — +
                                                +
                                                +

                                                平均工艺环境温差

                                                + — +
                                                +
                                                +
                                                +
                                                +
                                                +
                                                +

                                                +

                                                Target=1占比

                                                +
                                                + — +
                                                + + — +
                                                +
                                                +

                                                + +
                                                +
                                                +
                                                +
                                                +

                                                +

                                                平均转速

                                                +
                                                + — + +
                                                +

                                                + +
                                                +
                                                +
                                                +
                                                +

                                                +

                                                平均扭矩

                                                +
                                                + — + +
                                                +

                                                + +
                                                +
                                                +
                                                +
                                                + 刀具磨损区间明细与统计口径 +
                                                + + + + + + + + + + + + + +
                                                + 磨损分组仅描述同范围工况与 Target 标签；不据此预测故障或设置维护阈值。温差由 Process temperature − Air + temperature 逐行计算后求均值，单位 K。 +
                                                刀具磨损区间记录数平均刀具磨损Target=1占比平均转速平均扭矩
                                                +
                                                + +
                                                +
                                                + +
                                                + + + + + + + + + + + diff --git a/skills/light-dashboard/templates/template-manufacturing-wear.png b/skills/light-dashboard/templates/template-manufacturing-wear.png new file mode 100644 index 0000000000..e83774d401 Binary files /dev/null and b/skills/light-dashboard/templates/template-manufacturing-wear.png differ diff --git a/skills/light-dashboard/templates/template-meal-workout-mobile.png b/skills/light-dashboard/templates/template-meal-workout-mobile.png new file mode 100644 index 0000000000..e178e6bc82 Binary files /dev/null and b/skills/light-dashboard/templates/template-meal-workout-mobile.png differ diff --git a/skills/light-dashboard/templates/template-meal-workout.html b/skills/light-dashboard/templates/template-meal-workout.html new file mode 100644 index 0000000000..e22cb31721 --- /dev/null +++ b/skills/light-dashboard/templates/template-meal-workout.html @@ -0,0 +1,1742 @@ + + + + + + + + 餐食与运动画像 · VBI + + + +
                                                +
                                                + MEAL JOURNAL餐食数据观察 +
                                                +
                                                +
                                                +

                                                餐食与运动画像

                                                +

                                                正在准备内嵌数据…

                                                +
                                                +
                                                +
                                                + +
                                                +
                                                + +
                                                +
                                                +
                                                +
                                                +
                                                +
                                                +
                                                +

                                                核心发现

                                                +

                                                正在分析…

                                                +

                                                +
                                                  +
                                                  +
                                                  +
                                                  +
                                                  +

                                                  01 · 餐食热量

                                                  +

                                                  平均餐食热量

                                                  + — +

                                                  +
                                                  + + +
                                                  +
                                                  +
                                                  +

                                                  全体汇总 · 悬停或方向键查看套餐

                                                  + +
                                                  +
                                                  +
                                                  +

                                                  平均净热量

                                                  + — +
                                                  +
                                                  +

                                                  食物热效应占比

                                                  + — +
                                                  +
                                                  +
                                                  +
                                                  +
                                                  +
                                                  +

                                                  02 · 活动比较

                                                  +

                                                  估算运动时长

                                                  +
                                                  + — + +
                                                  +

                                                  + +
                                                  +
                                                  +
                                                  +
                                                  +

                                                  03 · 营养构成

                                                  +

                                                  平均蛋白质

                                                  +
                                                  + — + +
                                                  +

                                                  + +
                                                  +
                                                  +
                                                  +
                                                  +

                                                  04 · 样本构成

                                                  +

                                                  餐食样本份数

                                                  +
                                                  + — +
                                                  + + — +
                                                  +
                                                  +

                                                  + +
                                                  +
                                                  +
                                                  +
                                                  + 套餐明细与统计口径 +
                                                  + + + + + + + + + + + + + +
                                                  + 保留全部 8,000 份餐食记录；每份餐食等权平均。食物热效应占比 = 热效应热量总和 / 总热量；单件热量 = 总热量 + / 食物总件数。极高档对应源字段 Extreme / Half-Marathon + Toll，其余三档合并为其他档位；运动时长直接使用源数据估算值。 +
                                                  套餐类型样本份数平均热量（kcal）平均净热量（kcal）估算步行（分钟）平均蛋白质（g）
                                                  +
                                                  + +
                                                  +
                                                  +

                                                  正在加载图表模块…

                                                  +
                                                  + + + + + + + + + diff --git a/skills/light-dashboard/templates/template-meal-workout.png b/skills/light-dashboard/templates/template-meal-workout.png new file mode 100644 index 0000000000..50ce8648e4 Binary files /dev/null and b/skills/light-dashboard/templates/template-meal-workout.png differ diff --git a/skills/light-dashboard/templates/template-retail-basket-mobile.png b/skills/light-dashboard/templates/template-retail-basket-mobile.png new file mode 100644 index 0000000000..0eb878e124 Binary files /dev/null and b/skills/light-dashboard/templates/template-retail-basket-mobile.png differ diff --git a/skills/light-dashboard/templates/template-retail-basket.html b/skills/light-dashboard/templates/template-retail-basket.html new file mode 100644 index 0000000000..3b242482d7 --- /dev/null +++ b/skills/light-dashboard/templates/template-retail-basket.html @@ -0,0 +1,1970 @@ + + + + + + + + 品类与客单结构 · VBI + + + +
                                                  +
                                                  + RETAIL / 02合成零售样本 · 商品组合 +
                                                  +
                                                  +
                                                  +

                                                  品类与客单结构

                                                  +

                                                  正在准备内嵌数据…

                                                  +
                                                  +
                                                  +
                                                  + +
                                                  +
                                                  + +
                                                  +
                                                  +
                                                  +
                                                  +
                                                  +
                                                  +
                                                  +

                                                  核心发现

                                                  +

                                                  正在分析…

                                                  +

                                                  +
                                                    +
                                                    +
                                                    +
                                                    +
                                                    +

                                                    01 · 餐食热量

                                                    +

                                                    平均交易金额

                                                    + — +

                                                    +
                                                    + + +
                                                    +
                                                    +
                                                    +

                                                    范围汇总 · 悬停或方向键查看品类

                                                    + +
                                                    +
                                                    +
                                                    +

                                                    所选记录数

                                                    + — +
                                                    +
                                                    +

                                                    交易金额合计

                                                    + — +
                                                    +
                                                    +
                                                    +
                                                    +
                                                    +
                                                    +

                                                    +

                                                    每笔 ≥3 件占比

                                                    +
                                                    + — +
                                                    + + — +
                                                    +
                                                    +

                                                    + +
                                                    +
                                                    +
                                                    +
                                                    +

                                                    +

                                                    每笔平均件数

                                                    +
                                                    + — + +
                                                    +

                                                    + +
                                                    +
                                                    +
                                                    +
                                                    +

                                                    +

                                                    平均单件标价

                                                    +
                                                    + — + +
                                                    +

                                                    + +
                                                    +
                                                    +
                                                    +
                                                    + 品类明细与统计口径 +
                                                    + + + + + + + + + + + + + +
                                                    + 平均交易金额直接由交易金额求均值，不将品类均值再平均。≥3 件仅为分析分组；币种未说明，保留原始金额单位。 +
                                                    品类记录数平均交易金额每笔 ≥3 件占比每笔平均件数平均单件标价
                                                    +
                                                    + +
                                                    +
                                                    + +
                                                    + + + + + + + + + + + diff --git a/skills/light-dashboard/templates/template-retail-basket.png b/skills/light-dashboard/templates/template-retail-basket.png new file mode 100644 index 0000000000..2cf47eac8c Binary files /dev/null and b/skills/light-dashboard/templates/template-retail-basket.png differ diff --git a/skills/light-dashboard/templates/template-retail-sales-mobile.png b/skills/light-dashboard/templates/template-retail-sales-mobile.png new file mode 100644 index 0000000000..93097732a5 Binary files /dev/null and b/skills/light-dashboard/templates/template-retail-sales-mobile.png differ diff --git a/skills/light-dashboard/templates/template-retail-sales.html b/skills/light-dashboard/templates/template-retail-sales.html new file mode 100644 index 0000000000..fe41ec998f --- /dev/null +++ b/skills/light-dashboard/templates/template-retail-sales.html @@ -0,0 +1,1965 @@ + + + + + + + + 零售月度脉搏 · VBI + + + +
                                                    +
                                                    + RETAIL / 01合成交易样本 · 金额与购买结构 +
                                                    +
                                                    +
                                                    +

                                                    零售月度脉搏

                                                    +

                                                    正在准备内嵌数据…

                                                    +
                                                    +
                                                    +
                                                    + +
                                                    +
                                                    + +
                                                    +
                                                    +
                                                    +
                                                    +
                                                    +
                                                    +
                                                    +

                                                    核心发现

                                                    +

                                                    正在分析…

                                                    +

                                                    +
                                                      +
                                                      +
                                                      +
                                                      +
                                                      +

                                                      01 · 餐食热量

                                                      +

                                                      交易金额合计

                                                      + — +

                                                      +
                                                      + + +
                                                      +
                                                      +
                                                      +

                                                      范围汇总 · 悬停或方向键查看交易月份

                                                      + +
                                                      +
                                                      +
                                                      +

                                                      所选记录数

                                                      + — +
                                                      +
                                                      +

                                                      平均交易金额

                                                      + — +
                                                      +
                                                      +
                                                      +
                                                      +
                                                      +
                                                      +

                                                      +

                                                      电子类交易占比

                                                      +
                                                      + — +
                                                      + + — +
                                                      +
                                                      +

                                                      + +
                                                      +
                                                      +
                                                      +
                                                      +

                                                      +

                                                      售出件数

                                                      +
                                                      + — + +
                                                      +

                                                      + +
                                                      +
                                                      +
                                                      +
                                                      +

                                                      +

                                                      平均单件标价

                                                      +
                                                      + — + +
                                                      +

                                                      + +
                                                      +
                                                      +
                                                      +
                                                      + 交易月份明细与统计口径 +
                                                      + + + + + + + + + + + + + +
                                                      + 每行一笔合成交易；金额币种未说明，保留原始金额单位。2024 仅少量交易，不作年度同比。平均交易金额 = + 金额合计 / 去重交易数。 +
                                                      交易月份记录数交易金额合计电子类交易占比售出件数平均单件标价
                                                      +
                                                      + +
                                                      +
                                                      + +
                                                      + + + + + + + + + + + diff --git a/skills/light-dashboard/templates/template-retail-sales.png b/skills/light-dashboard/templates/template-retail-sales.png new file mode 100644 index 0000000000..70303d7a92 Binary files /dev/null and b/skills/light-dashboard/templates/template-retail-sales.png differ diff --git a/skills/vbi/SKILL.md b/skills/vbi/SKILL.md deleted file mode 100644 index cf7ca8ef25..0000000000 --- a/skills/vbi/SKILL.md +++ /dev/null @@ -1,15 +0,0 @@ ---- -name: vbi -description: 使用 VBI 的 DSL 和 Builder 构建图表、仪表盘与洞察。适用于 VBI 数据接入、分析配置、渲染集成及配置保存与恢复。 ---- - -# VBI - -通过公开 Builder API 管理 DSL。需要保存和复用的分析状态归所属 DSL，具体渲染和临时交互归 UI。 - -按需阅读： - -- [核心能力](references/usage/capabilities.md)：了解 VBI 的能力与职责。 -- [实践技巧](references/usage/tips.md)：查询复用、状态归属与配置恢复。 -- [HTML 接入](references/usage/how-use-vbi-in-html.md)：浏览器 ESM 接入与完整示例。 -- [API 索引](references/api/index.md)：查阅接口与类型。 diff --git a/skills/vbi/examples/assets/large-screen-live-preview.png b/skills/vbi/examples/assets/large-screen-live-preview.png deleted file mode 100644 index 820380a67b..0000000000 Binary files a/skills/vbi/examples/assets/large-screen-live-preview.png and /dev/null differ diff --git a/skills/vbi/examples/assets/large-screen-live-preview.prompt.txt b/skills/vbi/examples/assets/large-screen-live-preview.prompt.txt deleted file mode 100644 index 6df2d5cd51..0000000000 --- a/skills/vbi/examples/assets/large-screen-live-preview.prompt.txt +++ /dev/null @@ -1 +0,0 @@ -Use case: photorealistic-natural. Asset type: portrait still image for the right-side livestream preview panel in a Chinese business dashboard. Generate a photorealistic Chinese ecommerce livestream scene, portrait 2:3 composition. A fictional adult East Asian female presenter with shoulder-length brown hair wearing a simple ivory blouse, centered in the upper third, smiling naturally and presenting a bright orange packaged snack. In front of her a counter with neatly stacked orange, coral, cream and pastel turquoise bags of nuts and snacks, small price cards, lively orange-red promotional backdrop. Professional livestream softbox lighting, credible commercial studio photo, vibrant but sophisticated warm palette. Foreground packages fill the lower half, presenter clearly visible above them. No real brand names, no watermarks, no computer dashboard, no borders, no playback controls. Keep any packaging lettering abstract and minimal; UI labels will be added in code. The image is a fictional illustrative scene, not a real broadcast. diff --git a/skills/vbi/examples/assets/lightweight-dashboard-gradients.png b/skills/vbi/examples/assets/lightweight-dashboard-gradients.png deleted file mode 100644 index d2ba72a65e..0000000000 Binary files a/skills/vbi/examples/assets/lightweight-dashboard-gradients.png and /dev/null differ diff --git a/skills/vbi/examples/large-screen.html b/skills/vbi/examples/large-screen.html deleted file mode 100644 index e134e01511..0000000000 --- a/skills/vbi/examples/large-screen.html +++ /dev/null @@ -1,1595 +0,0 @@ - - - - - - - - 数字大屏 · 可视化业务全景 · VBI - - - -
                                                      -
                                                      -
                                                      - - -
                                                      -
                                                      -

                                                      数字大屏：可视化业务全景

                                                      -

                                                      POWERED BY VBI · 直播经营数据中心

                                                      -
                                                      -
                                                      - -

                                                      BUSINESS INTELLIGENCE / OVERVIEW

                                                      -
                                                      -
                                                      -
                                                      - -
                                                      -

                                                      收入类型构成

                                                      -
                                                      - -
                                                      内环人次外环收入
                                                      -
                                                      -
                                                      -
                                                      -
                                                      -

                                                      用户构成

                                                      -
                                                      - 消费金额观看人次消费人次 -
                                                      -
                                                      万元千人次
                                                      - -
                                                      -
                                                      -

                                                      直播业务规模

                                                      -
                                                      -
                                                      0.00
                                                      -

                                                      直播销售额 / 元

                                                      -
                                                      -
                                                      -
                                                      - -
                                                      -
                                                      -
                                                      - 0.00% -
                                                      -
                                                      -
                                                      -

                                                      直播画面

                                                      -
                                                      - AI 生成的直播场景示意：主播在橙色背景前展示坚果商品 -
                                                      品牌直播间 · 场景示意
                                                      -
                                                      - AUTUMN COLLECTION · 09 -

                                                      秋日好物 · 正当时

                                                      - AI 生成演示画面 · 非实时直播 -
                                                      -
                                                      -
                                                      -
                                                      -

                                                      趋势表现

                                                      -
                                                      - -
                                                      -
                                                      - 观看人次平均转化率 -
                                                      -
                                                      人次%
                                                      - -
                                                      -
                                                      -

                                                      热销商品排行

                                                      -
                                                        -
                                                        -
                                                        -
                                                        - 正在加载模块与演示数据…VBI × VQUERY × VSEED · 2026.09 演示数据 -
                                                        -
                                                        - - - - diff --git a/skills/vbi/examples/large-screen.png b/skills/vbi/examples/large-screen.png deleted file mode 100644 index 6f4b0757ca..0000000000 Binary files a/skills/vbi/examples/large-screen.png and /dev/null differ diff --git a/skills/vbi/examples/lightweight-dashboard.png b/skills/vbi/examples/lightweight-dashboard.png deleted file mode 100644 index 39aa66232c..0000000000 Binary files a/skills/vbi/examples/lightweight-dashboard.png and /dev/null differ diff --git a/skills/vbi/examples/polished-chart.html b/skills/vbi/examples/polished-chart.html deleted file mode 100644 index 1fdbe61be5..0000000000 --- a/skills/vbi/examples/polished-chart.html +++ /dev/null @@ -1,733 +0,0 @@ - - - - - - - - Pareto frontier · 精致图表 · VBI - - - -
                                                        -
                                                        -
                                                        -

                                                        Pareto frontier of the Artificial Analysis Intelligence Index v4.1.1

                                                        -

                                                        All 59 models from the reference · cost per Intelligence Index task

                                                        -
                                                        -

                                                        - Reference: Artificial Analysis · 2026-08-26Screenshot reconstruction · approximate data -

                                                        -
                                                        - -
                                                        -
                                                        -
                                                        -
                                                        -
                                                        - Line traces the global Pareto frontier across all models. -
                                                        - - - -
                                                        -
                                                        -
                                                        -
                                                        -

                                                        - 根据参考截图近似整理，非官方测评数据。点击图例筛选，悬浮查看数值；前沿线与参考模型保持全局口径。 -

                                                        -

                                                        正在加载 ESM 模块与演示数据…

                                                        -
                                                        -
                                                        - 查看当前模型数据 -
                                                        - - - - - - - - - - -
                                                        ModelProviderCost / task (USD)Index score
                                                        -
                                                        -
                                                        - -
                                                        - - - - diff --git a/skills/vbi/examples/polished-chart.png b/skills/vbi/examples/polished-chart.png deleted file mode 100644 index fb3a87d575..0000000000 Binary files a/skills/vbi/examples/polished-chart.png and /dev/null differ diff --git a/skills/vbi/references/best-practices/TODO.md b/skills/vbi/references/best-practices/TODO.md deleted file mode 100644 index eb287effa8..0000000000 --- a/skills/vbi/references/best-practices/TODO.md +++ /dev/null @@ -1 +0,0 @@ -等 DEMO 完成的差不多了, 总结最佳实践 diff --git a/skills/vbi/references/usage/how-use-vbi-in-html.md b/skills/vbi/references/usage/how-use-vbi-in-html.md deleted file mode 100644 index df76d41bd2..0000000000 --- a/skills/vbi/references/usage/how-use-vbi-in-html.md +++ /dev/null @@ -1,315 +0,0 @@ -# 在 HTML 中使用 VBI - -用一个 HTML 文件接入 VBI：无需框架或打包工具，使用 Builder 配置分析，再交给 VChart 或 VTable 渲染。VBI、VQuery、VSeed 通过浏览器 ESM 加载，VChart 和 VTable 使用发布包中的浏览器 bundle。本文先给出实践入口，再提供可直接运行的图表与表格教程；状态归属、查询复用和复杂页面组织见[最佳实践](./best-practices.md)。 - -## 从三个实践示例选择起点 - -| 示例 | 适合学习 | 阅读代码时关注 | -| ----------------------------------------------------- | -------------------------------------------- | ----------------------------------------------------------- | -| [精致散点图](../../examples/polished-chart.html) | 单图编码、图例筛选与精细标注 | `chartBuilder`、`decorate()`、`render()` | -| [轻量看板](../../examples/lightweight-dashboard.html) | 汇总指标、周期比较、自定义 HTML 卡片 | `createChart()`、`rowsOf()`、`layoutDashboard()` | -| [业务大屏](../../examples/large-screen.html) | 多图组合、Dashboard / Insight 资源、局部筛选 | `drawSocial()`、`drawIncome()`、`filterChart()`、`layout()` | - -用浏览器直接打开示例 HTML。浏览器需要联网加载 CDN 模块；复制大屏时同时保留 `assets/large-screen-live-preview.png`，另外两个示例可以单独复制 HTML。 - -轻量看板直接加载 [Supermarket CSV](https://visactor.github.io/VBI/dataset/supermarket.csv)，以数据中的最新订单日期为截止日，切换最近 7、12、30 个日历日，并与前一个等长周期比较。VQuery 负责解析 CSV；接入层将订单日期规范为 ISO 日期和 UTC 日序号，VBI Builder 配置日期筛选、销售额与利润求和、订单 ID 去重计数。消费者订单占比使用 `customer_type = 消费者` 的去重订单数除以总订单数；区域订单数也各自去重，同一订单可能涉及多个地区，因此不能直接相加。图表将没有订单的日期显示为零，亏损日期用负向利润柱显示。 - -轻量看板的指标卡以固定外层区域追踪鼠标位置，经过标题、数值和迷你图表时持续倾斜，离开卡片、滚动或页面失焦时复位。迷你图表保留悬停提示；左侧交互主体卡片保持平面，所有卡片均无鼠标光效。 - -轻量看板的数据核对基准（当前 CSV 最新订单日期为 2019-12-30，共 9,959 条明细；金额显示取整）： - -| 周期 | 日期范围 | 销售额 | 去重订单数 | 利润 | -| ----- | ----------------------- | -------- | ---------- | ------- | -| 7 天 | 2019-12-24 — 2019-12-30 | ¥121,872 | 44 | ¥6,133 | -| 12 天 | 2019-12-19 — 2019-12-30 | ¥206,696 | 69 | ¥18,093 | -| 30 天 | 2019-12-01 — 2019-12-30 | ¥544,539 | 156 | ¥74,556 | - -业务大屏仍使用固定演示数据，日期基准是 2026 年 9 月；天数切换只影响趋势，地区筛选影响全部数据组件。散点图数据是参考截图的近似转录，其前沿与参考模型保持全局口径。这些页面展示的 HTML 数据表和指标卡由页面绘制；下面补充 VTable 的普通表和透视表接入。 - -## 先理解五个包的分工 - -| 包 | 在本文中的职责 | -| ------------------ | --------------------------------------------------------- | -| `@visactor/vbi` | 通过 Builder 管理图表 DSL，生成查询和 VSeed DSL | -| `@visactor/vquery` | 执行本地 JSON 数据的分组、聚合、筛选和排序 | -| `@visactor/vseed` | 将含数据的 VSeed DSL 构建为 VChart spec 或 VTable options | -| `@visactor/vchart` | 渲染柱状图、折线图、散点图等图形 | -| `@visactor/vtable` | 使用 `ListTable` 渲染普通表，使用 `PivotTable` 渲染透视表 | - -核心链路为 `VBI Builder → Connector / VQuery → VSeed → VChart 或 VTable`。图表和表格共享前面的配置与查询机制，最后选择对应渲染器。仅显示图形时可以省略 VTable；仅显示表格时可以省略 VChart。 - -## 运行一个完整 HTML：柱状图、普通表与透视表 - -将下面代码保存为 `index.html`，直接用浏览器打开。它使用同一份销售明细，支持切换三种视图、按地区筛选，并显示当前 DSL 和查询结果。为便于核对，数据只有五行。 - -下面的独立教程与轻量看板固定使用 VBI / VQuery / VSeed `0.6.4`，VChart `2.1.7`；教程另加入 VTable `1.23.1`，无需本地构建。固定版本可避免 `latest` 缓存使依赖版本不一致。 - -VChart 的 `build/index.min.js` 和 VTable 的 `dist/vtable.min.js` 通过普通 ` - - - - - -``` - -按以下结果核对，避免只检查“页面有图形”： - -| 操作 | 预期结果 | -| -------------------------- | ------------------------------------------------------------------ | -| 柱状图、全部地区 | 两根柱子：华东 `350`，华北 `230` | -| 普通表、全部地区 | 四行：华东线上 `300`、华东线下 `50`、华北线上 `150`、华北线下 `80` | -| 透视表、全部地区 | 地区作为行、渠道作为列；四个交叉单元格与普通表数值一致 | -| 选择华东，依次切换三个视图 | 柱状图 `350`；普通表两行；透视表只保留华东，线上 `300`、线下 `50` | -| 刷新页面 | 重新初始化演示数据，默认显示全部地区柱状图，无重复数据集创建错误 | - -这里的普通表展示的是按“地区＋渠道”聚合后的四行，原始五行中的华东线上记录已由 VQuery 合并。`table` 指展示类型，并不代表自动跳过聚合；需要逐条明细时，在查询设计中保留唯一记录维度并核对生成的查询。 - -## 图形与表格渲染的关键差异 - -三种视图都使用 `await builder.buildVSeed()` 和 `Builder.from(seed).build()`，后者的结果随 `chartType` 变化： - -| `chartType` | 本例维度编码 | 度量默认编码 | 渲染器 | -| ------------ | ------------------------- | ------------ | ------------------------------------------------ | -| `column` | 地区 `xAxis` | `yAxis` | `new VChart(spec, { dom })`，随后 `renderSync()` | -| `table` | 地区、渠道均为 `column` | `column` | `new ListTable(container, options)` | -| `pivotTable` | 地区 `row`、渠道 `column` | `detail` | `new PivotTable(container, options)` | - -先设置图表类型再添加字段，Builder 会为度量分配该类型的默认编码。透视表建议显式指定行、列维度，避免添加顺序改变布局。不要把 VBI 的 `row` / `column` 编码手工改造成 VTable 原生的 `rows` / `columns` / `indicators`；这一步由 VSeed 构建。 - -VTable 的构造函数接收容器和 options，不调用 VChart 的 `renderSync()`；实例也支持 `release()`，容器变化后使用无参 `resize()`。保留明确的容器宽高，否则 Canvas 可能不可见。原生用法可查阅 [VTable 官方入门文档](https://visactor.io/vtable/guide/Getting_Started/Getting_Started)。 - -## 从教程扩展到自己的页面 - -### 配置、查询与渲染分别使用对应入口 - -- `builder.build()` 返回可序列化的 VBI 图表 DSL；`builder.buildVQuery()` 只生成查询，不请求数据。只构建这两种配置时，不必注册连接器或创建渲染器。 -- `buildVSeed()` 会调用连接器的 `discoverSchema()` 和 `query()`，此前需要注册对应的 `connectorId`。返回数据以维度、度量 ID 为列名，保留这些 ID 供 VSeed 使用。 -- 修改字段、聚合和过滤条件后重新查询。只修改视觉样式时，可以基于已有 seed 构建新 options；同一份查询结果也可以同时提供给图形、指标卡和 HTML 表格。 -- VChart 与 VTable 的原生配置不同。先在 VSeed 层设置支持的主题、格式或样式，再按所选渲染器补充特有配置，具体分层见[最佳实践](./best-practices.md)。 - -### 保存与恢复 - -将以下片段放在完整示例的初始化 `try` 块内、`await render()` 之后，可保存当前视图并恢复为新的 Builder： - -```javascript -const savedChart = builders[$('#type').value].build() -const json = JSON.stringify(savedChart) -// 数据连接器仍需在恢复环境注册。 -const restoredBuilder = VBI.chart.create(JSON.parse(json)) -const restoredSeed = await restoredBuilder.buildVSeed() -// 按 restoredSeed.chartType 选择上文的 VChart / ListTable / PivotTable 分支。 -``` - -保存 Dashboard 时同时保存 `dashboard.build()` 和 `VBI.resources.snapshot()`；恢复时先注册资源，再创建 Dashboard Builder。精致散点图和业务大屏示例提供配置导出，完整流程与限制见[接入技巧中的配置恢复说明](./tips.md#8-明确筛选作用域并验证配置恢复)。 - -DSL 不包含连接器实现、原始数据、外部图片，以及页面后加的精细标注和渲染函数。本文完整 HTML 的刷新行为是重置演示数据和控件，尚未接入持久化读取；需要恢复筛选时，从保存的 DSL 初始化控件，避免首次渲染用默认值覆盖条件。 - -## 常见问题 - -| 现象 | 检查与处理 | -| -------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| 模块加载失败或缺少命名导出 | VBI、VQuery、VSeed 使用固定版本的 `+esm` 入口；VChart、VTable 使用浏览器 bundle，并保留本文的 import map。普通 `