From b51a36578028446fb854438f5d1ab67e8582518e Mon Sep 17 00:00:00 2001 From: Xuefei Li Date: Mon, 2 Feb 2026 14:54:02 +0800 Subject: [PATCH 01/27] Update release-changelog.yml --- .github/workflows/release-changelog.yml | 1 - 1 file changed, 1 deletion(-) diff --git a/.github/workflows/release-changelog.yml b/.github/workflows/release-changelog.yml index ce16d55071..38cc32a185 100644 --- a/.github/workflows/release-changelog.yml +++ b/.github/workflows/release-changelog.yml @@ -31,7 +31,6 @@ jobs: - name: Install Python distutils (macOS) if: runner.os == 'macOS' run: | - python3 -m pip install --upgrade pip --break-system-packages python3 -m pip install setuptools --break-system-packages - name: Install Python distutils (Linux) From b55a9cdce958b194ea44e4bef6dade1ab30672e5 Mon Sep 17 00:00:00 2001 From: Xuefei Li Date: Mon, 2 Feb 2026 15:17:58 +0800 Subject: [PATCH 02/27] Update release-changelog.yml --- .github/workflows/release-changelog.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/release-changelog.yml b/.github/workflows/release-changelog.yml index 38cc32a185..01031c7e9a 100644 --- a/.github/workflows/release-changelog.yml +++ b/.github/workflows/release-changelog.yml @@ -31,7 +31,7 @@ jobs: - name: Install Python distutils (macOS) if: runner.os == 'macOS' run: | - python3 -m pip install setuptools --break-system-packages + brew upgrade pip || brew install pip - name: Install Python distutils (Linux) if: runner.os == 'Linux' From 567ca4b496c1e77477dfc46f0f5a9c40897822df Mon Sep 17 00:00:00 2001 From: "lixuefei.1313" Date: Mon, 2 Feb 2026 15:36:58 +0800 Subject: [PATCH 03/27] fix: fix changelog action --- .github/workflows/bug-server.yml | 2 - .github/workflows/publish.yml | 2 - .github/workflows/release-changelog.yml | 3 +- .github/workflows/release.yml | 2 - .github/workflows/size-limit.yml | 2 - .github/workflows/sync-main-to-develop.yml | 2 - .github/workflows/unit-test.yml | 2 - docs/assets/changelog/en/release.md | 480 ++-- docs/assets/changelog/zh/release.md | 461 ++-- packages/harmony_vchart/library/CHANGELOG.md | 2346 +++++++++--------- packages/vchart/CHANGELOG.md | 38 +- 11 files changed, 1698 insertions(+), 1642 deletions(-) diff --git a/.github/workflows/bug-server.yml b/.github/workflows/bug-server.yml index 4d1b632547..c23a0cb934 100644 --- a/.github/workflows/bug-server.yml +++ b/.github/workflows/bug-server.yml @@ -28,7 +28,6 @@ jobs: - name: Install Python distutils (macOS) if: runner.os == 'macOS' run: | - python3 -m pip install --upgrade pip --break-system-packages python3 -m pip install setuptools --break-system-packages - name: Install Python distutils (Linux) @@ -36,7 +35,6 @@ jobs: run: | sudo apt-get update sudo apt-get install -y python3-distutils - python3 -m pip install --upgrade pip --break-system-packages python3 -m pip install setuptools --break-system-packages - name: Install latest pnpm diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml index 3e198e291a..7ed589152b 100644 --- a/.github/workflows/publish.yml +++ b/.github/workflows/publish.yml @@ -33,7 +33,6 @@ jobs: - name: Install Python distutils (macOS) if: runner.os == 'macOS' run: | - python3 -m pip install --upgrade pip --break-system-packages python3 -m pip install setuptools --break-system-packages - name: Install Python distutils (Linux) @@ -41,7 +40,6 @@ jobs: run: | sudo apt-get update sudo apt-get install -y python3-distutils - python3 -m pip install --upgrade pip --break-system-packages python3 -m pip install setuptools --break-system-packages - name: Install latest pnpm diff --git a/.github/workflows/release-changelog.yml b/.github/workflows/release-changelog.yml index 01031c7e9a..73b33da411 100644 --- a/.github/workflows/release-changelog.yml +++ b/.github/workflows/release-changelog.yml @@ -31,14 +31,13 @@ jobs: - name: Install Python distutils (macOS) if: runner.os == 'macOS' run: | - brew upgrade pip || brew install pip + python3 -m pip install setuptools --break-system-packages - name: Install Python distutils (Linux) if: runner.os == 'Linux' run: | sudo apt-get update sudo apt-get install -y python3-distutils - python3 -m pip install --upgrade pip --break-system-packages python3 -m pip install setuptools --break-system-packages - name: Install latest pnpm diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index 9a999b58d2..3c137b17c5 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -45,7 +45,6 @@ jobs: - name: Install Python distutils (macOS) if: runner.os == 'macOS' run: | - python3 -m pip install --upgrade pip --break-system-packages python3 -m pip install setuptools --break-system-packages - name: Install Python distutils (Linux) @@ -53,7 +52,6 @@ jobs: run: | sudo apt-get update sudo apt-get install -y python3-distutils - python3 -m pip install --upgrade pip --break-system-packages python3 -m pip install setuptools --break-system-packages - name: Install native deps for node-canvas (macOS) diff --git a/.github/workflows/size-limit.yml b/.github/workflows/size-limit.yml index b9b4f79d4d..fb81a92b87 100644 --- a/.github/workflows/size-limit.yml +++ b/.github/workflows/size-limit.yml @@ -23,7 +23,6 @@ jobs: - name: Install Python distutils (macOS) if: runner.os == 'macOS' run: | - python3 -m pip install --upgrade pip --break-system-packages python3 -m pip install setuptools --break-system-packages - name: Install Python distutils (Linux) @@ -31,7 +30,6 @@ jobs: run: | sudo apt-get update sudo apt-get install -y python3-distutils - python3 -m pip install --upgrade pip --break-system-packages python3 -m pip install setuptools --break-system-packages - name: Install latest pnpm diff --git a/.github/workflows/sync-main-to-develop.yml b/.github/workflows/sync-main-to-develop.yml index 09f83dd8c5..cb60d39411 100644 --- a/.github/workflows/sync-main-to-develop.yml +++ b/.github/workflows/sync-main-to-develop.yml @@ -37,7 +37,6 @@ jobs: - name: Install Python distutils (macOS) if: runner.os == 'macOS' run: | - python3 -m pip install --upgrade pip --break-system-packages python3 -m pip install setuptools --break-system-packages - name: Install Python distutils (Linux) @@ -45,7 +44,6 @@ jobs: run: | sudo apt-get update sudo apt-get install -y python3-distutils - python3 -m pip install --upgrade pip --break-system-packages python3 -m pip install setuptools --break-system-packages - name: Install native deps for node-canvas (macOS) diff --git a/.github/workflows/unit-test.yml b/.github/workflows/unit-test.yml index ba265e28be..8348da70c0 100644 --- a/.github/workflows/unit-test.yml +++ b/.github/workflows/unit-test.yml @@ -30,7 +30,6 @@ jobs: - name: Install Python distutils (macOS) if: runner.os == 'macOS' run: | - python3 -m pip install --upgrade pip --break-system-packages python3 -m pip install setuptools --break-system-packages - name: Install Python distutils (Linux) @@ -38,7 +37,6 @@ jobs: run: | sudo apt-get update sudo apt-get install -y python3-distutils - python3 -m pip install --upgrade pip --break-system-packages python3 -m pip install setuptools --break-system-packages - name: Install latest pnpm diff --git a/docs/assets/changelog/en/release.md b/docs/assets/changelog/en/release.md index 90788a800d..57d5edd97d 100644 --- a/docs/assets/changelog/en/release.md +++ b/docs/assets/changelog/en/release.md @@ -1,232 +1,248 @@ -# v2.0.14 - -2026-01-22 - -**🆕 New Features** - -- **@visactor/vchart**: Support Brush API and Interactive API by @skie1997 in https://github.com/VisActor/VChart/pull/4408 -- **@visactor/vchart**: Support fixed pixel step scrolling on wheel event and minimum scrollbar slider height by @xuefei1313 in https://github.com/VisActor/VChart/pull/4423 - -**🐛 Bug Fixes** - -- **@visactor/vchart**: Fix React VChart component registration logic by @xile611 in https://github.com/VisActor/VChart/pull/4419 -- **@visactor/vchart**: Upgrade `vrender` dependency to fix Word Cloud chart issues by @xuefei1313 in https://github.com/VisActor/VChart/pull/4422 -- **@visactor/vchart**: Fix tooltip display issue in Map charts by @xuefei1313 in https://github.com/VisActor/VChart/pull/4417 -- **@visactor/vchart**: Fix subtitle layout bug by @xuefei1313 in https://github.com/VisActor/VChart/pull/4415 -- **@visactor/vchart**: Add protection code for tooltip handler to prevent errors by @skie1997 in https://github.com/VisActor/VChart/pull/4424 - -**🔨 Chores** - -- **@visactor/vchart**: Update GH CLI and usage documentation by @xuefei1313 in https://github.com/VisActor/VChart/pull/4409 - -**Full Changelog**: https://github.com/VisActor/VChart/compare/v2.0.13...v2.0.14 - -[more detail about v2.0.14](https://github.com/VisActor/VChart/releases/tag/v2.0.14) - -# v2.0.13 - -2026-01-08 - -**🐛 Bug Fixes** - -- **@visactor/vchart**: Fix tooltip display issue when stage is transformed by @xuefei1313 in https://github.com/VisActor/VChart/pull/4393 -- **@visactor/vchart**: Fix map tooltip issue by @xuefei1313 in https://github.com/VisActor/VChart/pull/4396 -- **@visactor/vchart**: Fix animation state issue by @xuefei1313 in https://github.com/VisActor/VChart/pull/4398 - -**🔨 Chores** - -- **@visactor/vchart**: Update base Node.js version to 20+ by @xile611 in https://github.com/VisActor/VChart/pull/4402 - -**📖 Documentation** - -- **@visactor/vchart**: Update marker point style and state documentation by @skie1997 in https://github.com/VisActor/VChart/pull/4369 -- **@visactor/vchart**: Add exit animation demo by @purpose233 in https://github.com/VisActor/VChart/pull/4374 - -**Full Changelog**: https://github.com/VisActor/VChart/compare/v2.0.12...v2.0.13 - -[more detail about v2.0.13](https://github.com/VisActor/VChart/releases/tag/v2.0.13) - - -# v2.0.12 - -2025-12-25 - -**🆕 New Features** - -- **@visactor/vchart**: Support `autoLabelMaxWidth` configuration in `CircleAxis` by @xuefei1313 in https://github.com/VisActor/VChart/pull/4357 -- **@visactor/vchart**: Add support for chart disappear state by @xuefei1313 in https://github.com/VisActor/VChart/pull/4341 -- **@visactor/vchart**: Optimize heatmap shape rendering logic by @xuefei1313 in https://github.com/VisActor/VChart/pull/4377 -- **@visactor/vchart**: Optimize map zoom interaction and add `zoomRate` configuration by @xuefei1313 in https://github.com/VisActor/VChart/pull/4373 - -**🐛 Bug Fixes** - -- **@visactor/vchart**: Fix axis title layout issue by @xuefei1313 in https://github.com/VisActor/VChart/pull/4371 - -**Full Changelog**: https://github.com/VisActor/VChart/compare/v2.0.11...v2.0.12 - -[more detail about v2.0.12](https://github.com/VisActor/VChart/releases/tag/v2.0.12) - - -# v2.0.11 - -2025-12-11 - -# v2.0.11 - -2025-12-11 - -**🆕 New Features** - -- **@visactor/vchart**: Support `componentShowContent` in `initOption` by @xuefei1313 in https://github.com/VisActor/VChart/pull/4334 -- **@visactor/vchart**: Support boxplot label by @xile611 in https://github.com/VisActor/VChart/pull/4346 -- **@visactor/vchart**: Export data constant by @xuefei1313 in https://github.com/VisActor/VChart/pull/4339 - -**🐛 Bug Fixes** - -- **@visactor/vchart**: Fix crosshair behavior when having inner offset by @xile611 in https://github.com/VisActor/VChart/pull/4340 -- **@visactor/vchart**: Fix outlier color in boxplot by @xile611 in https://github.com/VisActor/VChart/pull/4347 -- **@visactor/vchart**: Fix boxplot outlier style by @xile611 in https://github.com/VisActor/VChart/pull/4350 - - -**Full Changelog**: https://github.com/VisActor/VChart/compare/v2.0.10...v2.0.11 - - -[more detail about v2.0.11](https://github.com/VisActor/VChart/releases/tag/v2.0.11) - -[more detail about v2.0.11](https://github.com/VisActor/VChart/releases/tag/v2.0.11) - -# v2.0.10 - -2025-11-28 - -**🆕 New Features** - -- **@visactor/vchart**: Enhance boxplot features by @xile611 in https://github.com/VisActor/VChart/pull/4323 - -**🐛 Bug Fixes** - -- **@visactor/vchart**: Upgrade vrender dependency to fix rose chart issues by @xuefei1313 in https://github.com/VisActor/VChart/pull/4315 -- **@visactor/vchart**: Upgrade vrender dependency to fix animation issues by @xuefei1313 in https://github.com/VisActor/VChart/pull/4325 -- **@visactor/vchart**: Fix extension mark update logic by @xile611 in https://github.com/VisActor/VChart/pull/4318 -- **@visactor/vchart**: Fix font family setting issue by @xuefei1313 in https://github.com/VisActor/VChart/pull/4324 -- **@visactor/vchart**: Fix issue with setDimensionIndex by @xuefei1313 in https://github.com/VisActor/VChart/pull/4291 - -**📖 Documentation** - -- **@visactor/vchart**: Add candlestick chart guide by @xuefei1313 in https://github.com/VisActor/VChart/pull/4310 -- **@visactor/vchart**: Add theme development guide by @xuanhun in https://github.com/VisActor/VChart/pull/4322 -- **@visactor/vchart**: Add map rewind guide by @xuefei1313 in https://github.com/VisActor/VChart/pull/4326 -- **@visactor/vchart**: Add 3D registration content to guide by @xuefei1313 in https://github.com/VisActor/VChart/pull/4312 -- **@visactor/vchart**: Fix documentation for common chart option labelLayout by @xuefei1313 in https://github.com/VisActor/VChart/pull/4316 - -**Full Changelog**: https://github.com/VisActor/VChart/compare/v2.0.9...v2.0.10 - -[more detail about v2.0.10](https://github.com/VisActor/VChart/releases/tag/v2.0.10) - -# v2.0.9 - -2025-11-18 - -**🆕 New Features** - -- **@visactor/react-vchart**: Add export for registerChartResizeZoomPlugin by @xuefei1313 in https://github.com/VisActor/VChart/pull/4286 -- **@visactor/vchart**: Support effect animation by @purpose233 in https://github.com/VisActor/VChart/pull/4299 -- **@visactor/vchart**: Enhance datazoom and fix bugs by @skie1997 in https://github.com/VisActor/VChart/pull/4065 - -**🐛 Bug Fixes** - -- **@visactor/vchart-extension**: Fix the vchart-extension packaged artifacts contained an extra version by @xuefei1313 in https://github.com/VisActor/VChart/pull/4277 -- **@visactor/vchart**: Fix markline auto range by @xuefei1313 in https://github.com/VisActor/VChart/pull/4290 - -**📖 Documentation** - -- **@visactor/vchart**: Fix registerMorph error in example by @xuefei1313 in https://github.com/VisActor/VChart/pull/4285 -- **@visactor/vchart**: Add candlestick demo by @xuefei1313 in https://github.com/VisActor/VChart/pull/4297 - -**Full Changelog**: https://github.com/VisActor/VChart/compare/v2.0.7...v2.0.9 - -[more detail about v2.0.9](https://github.com/VisActor/VChart/releases/tag/v2.0.9) - -# v2.0.7 - -2025-11-03 - -🆕 New Features - -@visactor/vchart: Support resize zoom chart plugin by @xuefei1313 in https://github.com/VisActor/VChart/pull/4241 -@visactor/vchart: Register transform boxplot by @xile611 in https://github.com/VisActor/VChart/pull/4268 -@visactor/vchart: Add translate-issues workflow configuration by @xuefei1313 in https://github.com/VisActor/VChart/pull/4264 -@visactor/vchart: Add regression-lines in vchart-extension by @xile611 in https://github.com/VisActor/VChart/pull/4245 -@visactor/vchart: Change vrender dependencies, see https://github.com/VisActor/VChart/pull/4224 - -🐛 Bug Fixes - -@visactor/vchart: Fix crosshair not hide by @xile611 in https://github.com/VisActor/VChart/pull/4252 -@visactor/vchart: Fix issue of layout by @xuefei1313 in https://github.com/VisActor/VChart/pull/4249 -@visactor/vchart: Fix logistic regression line by @xile611 in https://github.com/VisActor/VChart/pull/4263 -@visactor/vchart: Fix support regression line for grouped scatter by @xile611 in https://github.com/VisActor/VChart/pull/4248 -@visactor/vchart: Fix check if stackData is empty by @kkxxkk2019 in https://github.com/VisActor/VChart/pull/4244 -@visactor/vchart: Fix issue of waterfall stack total by @xuefei1313 in https://github.com/VisActor/VChart/pull/4243 - -[more detail about v2.0.7](https://github.com/VisActor/VChart/releases/tag/v2.0.7) - -# v2.0.6 - -2025-10-14 - -**What's Changed** - -- fix: fix the issue of legend pager by @xuefei1313 in https://github.com/VisActor/VChart/pull/4212 -- Feat/support calc in formatter by @xuefei1313 in https://github.com/VisActor/VChart/pull/4211 -- Fix/fix error of markline when series no data by @xuefei1313 in https://github.com/VisActor/VChart/pull/4216 -- feat: update bugreport metthod by @xuanhun in https://github.com/VisActor/VChart/pull/4221 -- feat: upgrade vrender to fix animation bug by @xuefei1313 in https://github.com/VisActor/VChart/pull/4222 -- feat: support waterfallType in waterfall chart by @xuefei1313 in https://github.com/VisActor/VChart/pull/4220 -- feat: change vrender dependencies by @xuefei1313 in https://github.com/VisActor/VChart/pull/4224 - -**Full Changelog**: https://github.com/VisActor/VChart/compare/v2.0.5...v2.0.6 - -[more detail about v2.0.6](https://github.com/VisActor/VChart/releases/tag/v2.0.6) - -# v2.0.5 - -2025-09-19 - -[more detail about v2.0.5](https://github.com/VisActor/VChart/releases/tag/v2.0.5) - -# v2.0.2 - -2025-07-28 - -**🆕 New feature** - -- **@visactor/vchart**: add the afterClearRect hook of render - -**Full Changelog**: https://github.com/VisActor/VChart/compare/v2.0.1...v2.0.2 - -[more detail about v2.0.2](https://github.com/VisActor/VChart/releases/tag/v2.0.2) - -# v2.0.1 - -2025-07-24 - -**🆕 New feature** - -- **@visactor/vchart**: add config to avoid brush state update. close [#4035](https://github.com/VisActor/VChart/issues/4035) -- **@visactor/vchart**: optimize datazoom animation effect -- **@visactor/vchart**: add the afterClearScreen hook of render - -**🐛 Bug fix** - -- **@visactor/vchart**: fix issue with 3d chart grid -- **@visactor/vchart**: tickData of axis should update when `sampling` is changed, fix [#4059](https://github.com/VisActor/VChart/issues/4059) -- **@visactor/vchart**: only calculate multi layer label items when need, fix [#4056](https://github.com/VisActor/VChart/issues/4056) -- **@visactor/vchart**: fix resize error when remake, and re-normal aniamtion bug, fix [#4070](https://github.com/VisActor/VChart/issues/4070) -- **@visactor/vchart**: fix issue with feishu block and call setenv when create vchart -- **@visactor/vchart**: fix bug of tooltip triggerOff & tooltip lock -- **@visactor/vchart**: fix tooltip throw error when some tooltip processor is undefined, fix [#4044](https://github.com/VisActor/VChart/issues/4044) -- **@visactor/vchart**: fix `textAlign` not works in tooltip.style.titleLabel, fix [#4043](https://github.com/VisActor/VChart/issues/4043) - -[more detail about v2.0.1](https://github.com/VisActor/VChart/releases/tag/v2.0.1) - - +# v2.0.15 + +2026-02-02 + +**🆕 New Features** + +- **@visactor/vchart**: Support Brush API and Interactive API by @skie1997 in https://github.com/VisActor/VChart/pull/4408 +- **@visactor/vchart**: Support fixed pixel step scrolling on wheel event and minimum scrollbar slider height by @xuefei1313 in https://github.com/VisActor/VChart/pull/4423 + +**🐛 Bug Fixes** + +- **@visactor/vchart**: Fix React VChart component registration logic by @xile611 in https://github.com/VisActor/VChart/pull/4419 +- **@visactor/vchart**: Upgrade `vrender` dependency to fix Word Cloud chart issues by @xuefei1313 in https://github.com/VisActor/VChart/pull/4422 + +**🔨 Chores** + +- **@visactor/vchart**: Add `spec-kit` and project constitution by @xuefei1313 in https://github.com/VisActor/VChart/pull/4412 + +**Full Changelog**: https://github.com/VisActor/VChart/compare/v2.0.14...v2.0.15 + +[more detail about v2.0.15](https://github.com/VisActor/VChart/releases/tag/v2.0.15) + +# v2.0.14 + +2026-01-22 + +**🆕 New Features** + +- **@visactor/vchart**: Support Brush API and Interactive API by @skie1997 in https://github.com/VisActor/VChart/pull/4408 +- **@visactor/vchart**: Support fixed pixel step scrolling on wheel event and minimum scrollbar slider height by @xuefei1313 in https://github.com/VisActor/VChart/pull/4423 + +**🐛 Bug Fixes** + +- **@visactor/vchart**: Fix React VChart component registration logic by @xile611 in https://github.com/VisActor/VChart/pull/4419 +- **@visactor/vchart**: Upgrade `vrender` dependency to fix Word Cloud chart issues by @xuefei1313 in https://github.com/VisActor/VChart/pull/4422 +- **@visactor/vchart**: Fix tooltip display issue in Map charts by @xuefei1313 in https://github.com/VisActor/VChart/pull/4417 +- **@visactor/vchart**: Fix subtitle layout bug by @xuefei1313 in https://github.com/VisActor/VChart/pull/4415 +- **@visactor/vchart**: Add protection code for tooltip handler to prevent errors by @skie1997 in https://github.com/VisActor/VChart/pull/4424 + +**🔨 Chores** + +- **@visactor/vchart**: Update GH CLI and usage documentation by @xuefei1313 in https://github.com/VisActor/VChart/pull/4409 + +**Full Changelog**: https://github.com/VisActor/VChart/compare/v2.0.13...v2.0.14 + +[more detail about v2.0.14](https://github.com/VisActor/VChart/releases/tag/v2.0.14) + +# v2.0.13 + +2026-01-08 + +**🐛 Bug Fixes** + +- **@visactor/vchart**: Fix tooltip display issue when stage is transformed by @xuefei1313 in https://github.com/VisActor/VChart/pull/4393 +- **@visactor/vchart**: Fix map tooltip issue by @xuefei1313 in https://github.com/VisActor/VChart/pull/4396 +- **@visactor/vchart**: Fix animation state issue by @xuefei1313 in https://github.com/VisActor/VChart/pull/4398 + +**🔨 Chores** + +- **@visactor/vchart**: Update base Node.js version to 20+ by @xile611 in https://github.com/VisActor/VChart/pull/4402 + +**📖 Documentation** + +- **@visactor/vchart**: Update marker point style and state documentation by @skie1997 in https://github.com/VisActor/VChart/pull/4369 +- **@visactor/vchart**: Add exit animation demo by @purpose233 in https://github.com/VisActor/VChart/pull/4374 + +**Full Changelog**: https://github.com/VisActor/VChart/compare/v2.0.12...v2.0.13 + +[more detail about v2.0.13](https://github.com/VisActor/VChart/releases/tag/v2.0.13) + +# v2.0.12 + +2025-12-25 + +**🆕 New Features** + +- **@visactor/vchart**: Support `autoLabelMaxWidth` configuration in `CircleAxis` by @xuefei1313 in https://github.com/VisActor/VChart/pull/4357 +- **@visactor/vchart**: Add support for chart disappear state by @xuefei1313 in https://github.com/VisActor/VChart/pull/4341 +- **@visactor/vchart**: Optimize heatmap shape rendering logic by @xuefei1313 in https://github.com/VisActor/VChart/pull/4377 +- **@visactor/vchart**: Optimize map zoom interaction and add `zoomRate` configuration by @xuefei1313 in https://github.com/VisActor/VChart/pull/4373 + +**🐛 Bug Fixes** + +- **@visactor/vchart**: Fix axis title layout issue by @xuefei1313 in https://github.com/VisActor/VChart/pull/4371 + +**Full Changelog**: https://github.com/VisActor/VChart/compare/v2.0.11...v2.0.12 + +[more detail about v2.0.12](https://github.com/VisActor/VChart/releases/tag/v2.0.12) + +# v2.0.11 + +2025-12-11 + +# v2.0.11 + +2025-12-11 + +**🆕 New Features** + +- **@visactor/vchart**: Support `componentShowContent` in `initOption` by @xuefei1313 in https://github.com/VisActor/VChart/pull/4334 +- **@visactor/vchart**: Support boxplot label by @xile611 in https://github.com/VisActor/VChart/pull/4346 +- **@visactor/vchart**: Export data constant by @xuefei1313 in https://github.com/VisActor/VChart/pull/4339 + +**🐛 Bug Fixes** + +- **@visactor/vchart**: Fix crosshair behavior when having inner offset by @xile611 in https://github.com/VisActor/VChart/pull/4340 +- **@visactor/vchart**: Fix outlier color in boxplot by @xile611 in https://github.com/VisActor/VChart/pull/4347 +- **@visactor/vchart**: Fix boxplot outlier style by @xile611 in https://github.com/VisActor/VChart/pull/4350 + +**Full Changelog**: https://github.com/VisActor/VChart/compare/v2.0.10...v2.0.11 + +[more detail about v2.0.11](https://github.com/VisActor/VChart/releases/tag/v2.0.11) + +[more detail about v2.0.11](https://github.com/VisActor/VChart/releases/tag/v2.0.11) + +# v2.0.10 + +2025-11-28 + +**🆕 New Features** + +- **@visactor/vchart**: Enhance boxplot features by @xile611 in https://github.com/VisActor/VChart/pull/4323 + +**🐛 Bug Fixes** + +- **@visactor/vchart**: Upgrade vrender dependency to fix rose chart issues by @xuefei1313 in https://github.com/VisActor/VChart/pull/4315 +- **@visactor/vchart**: Upgrade vrender dependency to fix animation issues by @xuefei1313 in https://github.com/VisActor/VChart/pull/4325 +- **@visactor/vchart**: Fix extension mark update logic by @xile611 in https://github.com/VisActor/VChart/pull/4318 +- **@visactor/vchart**: Fix font family setting issue by @xuefei1313 in https://github.com/VisActor/VChart/pull/4324 +- **@visactor/vchart**: Fix issue with setDimensionIndex by @xuefei1313 in https://github.com/VisActor/VChart/pull/4291 + +**📖 Documentation** + +- **@visactor/vchart**: Add candlestick chart guide by @xuefei1313 in https://github.com/VisActor/VChart/pull/4310 +- **@visactor/vchart**: Add theme development guide by @xuanhun in https://github.com/VisActor/VChart/pull/4322 +- **@visactor/vchart**: Add map rewind guide by @xuefei1313 in https://github.com/VisActor/VChart/pull/4326 +- **@visactor/vchart**: Add 3D registration content to guide by @xuefei1313 in https://github.com/VisActor/VChart/pull/4312 +- **@visactor/vchart**: Fix documentation for common chart option labelLayout by @xuefei1313 in https://github.com/VisActor/VChart/pull/4316 + +**Full Changelog**: https://github.com/VisActor/VChart/compare/v2.0.9...v2.0.10 + +[more detail about v2.0.10](https://github.com/VisActor/VChart/releases/tag/v2.0.10) + +# v2.0.9 + +2025-11-18 + +**🆕 New Features** + +- **@visactor/react-vchart**: Add export for registerChartResizeZoomPlugin by @xuefei1313 in https://github.com/VisActor/VChart/pull/4286 +- **@visactor/vchart**: Support effect animation by @purpose233 in https://github.com/VisActor/VChart/pull/4299 +- **@visactor/vchart**: Enhance datazoom and fix bugs by @skie1997 in https://github.com/VisActor/VChart/pull/4065 + +**🐛 Bug Fixes** + +- **@visactor/vchart-extension**: Fix the vchart-extension packaged artifacts contained an extra version by @xuefei1313 in https://github.com/VisActor/VChart/pull/4277 +- **@visactor/vchart**: Fix markline auto range by @xuefei1313 in https://github.com/VisActor/VChart/pull/4290 + +**📖 Documentation** + +- **@visactor/vchart**: Fix registerMorph error in example by @xuefei1313 in https://github.com/VisActor/VChart/pull/4285 +- **@visactor/vchart**: Add candlestick demo by @xuefei1313 in https://github.com/VisActor/VChart/pull/4297 + +**Full Changelog**: https://github.com/VisActor/VChart/compare/v2.0.7...v2.0.9 + +[more detail about v2.0.9](https://github.com/VisActor/VChart/releases/tag/v2.0.9) + +# v2.0.7 + +2025-11-03 + +🆕 New Features + +@visactor/vchart: Support resize zoom chart plugin by @xuefei1313 in https://github.com/VisActor/VChart/pull/4241 +@visactor/vchart: Register transform boxplot by @xile611 in https://github.com/VisActor/VChart/pull/4268 +@visactor/vchart: Add translate-issues workflow configuration by @xuefei1313 in https://github.com/VisActor/VChart/pull/4264 +@visactor/vchart: Add regression-lines in vchart-extension by @xile611 in https://github.com/VisActor/VChart/pull/4245 +@visactor/vchart: Change vrender dependencies, see https://github.com/VisActor/VChart/pull/4224 + +🐛 Bug Fixes + +@visactor/vchart: Fix crosshair not hide by @xile611 in https://github.com/VisActor/VChart/pull/4252 +@visactor/vchart: Fix issue of layout by @xuefei1313 in https://github.com/VisActor/VChart/pull/4249 +@visactor/vchart: Fix logistic regression line by @xile611 in https://github.com/VisActor/VChart/pull/4263 +@visactor/vchart: Fix support regression line for grouped scatter by @xile611 in https://github.com/VisActor/VChart/pull/4248 +@visactor/vchart: Fix check if stackData is empty by @kkxxkk2019 in https://github.com/VisActor/VChart/pull/4244 +@visactor/vchart: Fix issue of waterfall stack total by @xuefei1313 in https://github.com/VisActor/VChart/pull/4243 + +[more detail about v2.0.7](https://github.com/VisActor/VChart/releases/tag/v2.0.7) + +# v2.0.6 + +2025-10-14 + +**What's Changed** + +- fix: fix the issue of legend pager by @xuefei1313 in https://github.com/VisActor/VChart/pull/4212 +- Feat/support calc in formatter by @xuefei1313 in https://github.com/VisActor/VChart/pull/4211 +- Fix/fix error of markline when series no data by @xuefei1313 in https://github.com/VisActor/VChart/pull/4216 +- feat: update bugreport metthod by @xuanhun in https://github.com/VisActor/VChart/pull/4221 +- feat: upgrade vrender to fix animation bug by @xuefei1313 in https://github.com/VisActor/VChart/pull/4222 +- feat: support waterfallType in waterfall chart by @xuefei1313 in https://github.com/VisActor/VChart/pull/4220 +- feat: change vrender dependencies by @xuefei1313 in https://github.com/VisActor/VChart/pull/4224 + +**Full Changelog**: https://github.com/VisActor/VChart/compare/v2.0.5...v2.0.6 + +[more detail about v2.0.6](https://github.com/VisActor/VChart/releases/tag/v2.0.6) + +# v2.0.5 + +2025-09-19 + +[more detail about v2.0.5](https://github.com/VisActor/VChart/releases/tag/v2.0.5) + +# v2.0.2 + +2025-07-28 + +**🆕 New feature** + +- **@visactor/vchart**: add the afterClearRect hook of render + +**Full Changelog**: https://github.com/VisActor/VChart/compare/v2.0.1...v2.0.2 + +[more detail about v2.0.2](https://github.com/VisActor/VChart/releases/tag/v2.0.2) + +# v2.0.1 + +2025-07-24 + +**🆕 New feature** + +- **@visactor/vchart**: add config to avoid brush state update. close [#4035](https://github.com/VisActor/VChart/issues/4035) +- **@visactor/vchart**: optimize datazoom animation effect +- **@visactor/vchart**: add the afterClearScreen hook of render + +**🐛 Bug fix** + +- **@visactor/vchart**: fix issue with 3d chart grid +- **@visactor/vchart**: tickData of axis should update when `sampling` is changed, fix [#4059](https://github.com/VisActor/VChart/issues/4059) +- **@visactor/vchart**: only calculate multi layer label items when need, fix [#4056](https://github.com/VisActor/VChart/issues/4056) +- **@visactor/vchart**: fix resize error when remake, and re-normal aniamtion bug, fix [#4070](https://github.com/VisActor/VChart/issues/4070) +- **@visactor/vchart**: fix issue with feishu block and call setenv when create vchart +- **@visactor/vchart**: fix bug of tooltip triggerOff & tooltip lock +- **@visactor/vchart**: fix tooltip throw error when some tooltip processor is undefined, fix [#4044](https://github.com/VisActor/VChart/issues/4044) +- **@visactor/vchart**: fix `textAlign` not works in tooltip.style.titleLabel, fix [#4043](https://github.com/VisActor/VChart/issues/4043) + +[more detail about v2.0.1](https://github.com/VisActor/VChart/releases/tag/v2.0.1) diff --git a/docs/assets/changelog/zh/release.md b/docs/assets/changelog/zh/release.md index eb3f5e500d..d69cb01566 100644 --- a/docs/assets/changelog/zh/release.md +++ b/docs/assets/changelog/zh/release.md @@ -1,221 +1,240 @@ -# v2.0.14 - -2026-01-22 - -**🆕 新增功能** - -- **@visactor/vchart**: 支持 Brush API 和交互（Interactive）API by @skie1997 in https://github.com/VisActor/VChart/pull/4408 -- **@visactor/vchart**: 支持鼠标滚轮固定像素步进滚动，并支持设置滚动条滑块的最小高度 by @xuefei1313 in https://github.com/VisActor/VChart/pull/4423 - -**🐛 问题修复** - -- **@visactor/vchart**: 修复 React VChart 组件的注册逻辑 by @xile611 in https://github.com/VisActor/VChart/pull/4419 -- **@visactor/vchart**: 升级 `vrender` 依赖以修复词云图（Word Cloud）相关问题 by @xuefei1313 in https://github.com/VisActor/VChart/pull/4422 -- **@visactor/vchart**: 修复地图（Map）Tooltip 的显示问题 by @xuefei1313 in https://github.com/VisActor/VChart/pull/4417 -- **@visactor/vchart**: 修复副标题（Subtitle）的布局错误 by @xuefei1313 in https://github.com/VisActor/VChart/pull/4415 -- **@visactor/vchart**: 为 Tooltip 处理程序添加防御性代码以防止报错 by @skie1997 in https://github.com/VisActor/VChart/pull/4424 - -**🔨 维护与杂项** - -- **@visactor/vchart**: 更新 GH CLI 工具及相关使用文档 by @xuefei1313 in https://github.com/VisActor/VChart/pull/4409 - -**Full Changelog**: https://github.com/VisActor/VChart/compare/v2.0.13...v2.0.14 - -[more detail about v2.0.14](https://github.com/VisActor/VChart/releases/tag/v2.0.14) - -# v2.0.13 - -2026-01-08 - -**🐛 问题修复** - -- **@visactor/vchart**: 修复场景（Stage）发生变换后 Tooltip 显示异常的问题 by @xuefei1313 in https://github.com/VisActor/VChart/pull/4393 -- **@visactor/vchart**: 修复地图（Map）Tooltip 的相关问题 by @xuefei1313 in https://github.com/VisActor/VChart/pull/4396 -- **@visactor/vchart**: 修复动画状态（Animation State）的逻辑问题 by @xuefei1313 in https://github.com/VisActor/VChart/pull/4398 - -**🔨 维护与杂项** - -- **@visactor/vchart**: 将基础 Node.js 版本依赖升级至 20+ by @xile611 in https://github.com/VisActor/VChart/pull/4402 - -**📖 文档更新** - -- **@visactor/vchart**: 更新标注点（Marker Point）样式与状态的文档 by @skie1997 in https://github.com/VisActor/VChart/pull/4369 -- **@visactor/vchart**: 新增退场动画（Exit Animation）示例 by @purpose233 in https://github.com/VisActor/VChart/pull/4374 - -**Full Changelog**: https://github.com/VisActor/VChart/compare/v2.0.12...v2.0.13 - -[更多详情请查看 v2.0.13](https://github.com/VisActor/VChart/releases/tag/v2.0.13) - -# v2.0.12 - -2025-12-25 - -**🆕 新增功能** - -- **@visactor/vchart**: 极坐标轴（CircleAxis）支持 `autoLabelMaxWidth` 配置 by @xuefei1313 in https://github.com/VisActor/VChart/pull/4357 -- **@visactor/vchart**: 新增图表消失（Disappear）状态支持 by @xuefei1313 in https://github.com/VisActor/VChart/pull/4341 -- **@visactor/vchart**: 优化热力图（Heatmap）形状渲染逻辑 by @xuefei1313 in https://github.com/VisActor/VChart/pull/4377 -- **@visactor/vchart**: 优化地图（Map）zoom交互，增加 `zoomRate` 配置 by @xuefei1313 in https://github.com/VisActor/VChart/pull/4373 - -**🐛 问题修复** - -- **@visactor/vchart**: 修复坐标轴标题（Axes Title）的布局问题 by @xuefei1313 in https://github.com/VisActor/VChart/pull/4371 - -**Full Changelog**: https://github.com/VisActor/VChart/compare/v2.0.11...v2.0.12 - -[更多详情请查看 v2.0.12](https://github.com/VisActor/VChart/releases/tag/v2.0.12) - -# v2.0.11 - -2025-12-11 - -**🆕 新增功能** - -- **@visactor/vchart**: 在 `initOption` 中支持 `componentShowContent` 配置 by @xuefei1313 in https://github.com/VisActor/VChart/pull/4334 -- **@visactor/vchart**: 增强箱形图（Boxplot）标签功能 by @xile611 in https://github.com/VisActor/VChart/pull/4346 -- **@visactor/vchart**: 导出数据常量定义 by @xuefei1313 in https://github.com/VisActor/VChart/pull/4339 - -**🐛 问题修复** - -- **@visactor/vchart**: 修复存在内部偏移（inner offset）时的十字准星（crosshair）显示问题 by @xile611 in https://github.com/VisActor/VChart/pull/4340 -- **@visactor/vchart**: 修复十字准星在特定内部偏移下的定位逻辑 (fix #4338) by @xile611 in https://github.com/VisActor/VChart/pull/4343 -- **@visactor/vchart**: 修复箱形图异常值的颜色显示问题 by @xile611 in https://github.com/VisActor/VChart/pull/4347 -- **@visactor/vchart**: 修复箱形图异常值的样式问题 by @xile611 in https://github.com/VisActor/VChart/pull/4350 - -**Full Changelog**: https://github.com/VisActor/VChart/compare/v2.0.10...v2.0.11 - -[more detail about v2.0.11](https://github.com/VisActor/VChart/releases/tag/v2.0.11) - -# v2.0.10 - -2025-11-28 - -**🆕 新特性** - -- **@visactor/vchart**: 箱型图 (Boxplot) 功能增强 by @xile611 in https://github.com/VisActor/VChart/pull/4323 - -**🐛 问题修复** - -- **@visactor/vchart**: 升级 vrender 依赖以修复玫瑰图 (Rose Chart) 的问题 by @xuefei1313 in https://github.com/VisActor/VChart/pull/4315 -- **@visactor/vchart**: 升级 vrender 依赖以修复动画相关问题 by @xuefei1313 in https://github.com/VisActor/VChart/pull/4325 -- **@visactor/vchart**: 修复扩展标记 (Extension Mark) 的更新逻辑 by @xile611 in https://github.com/VisActor/VChart/pull/4318 -- **@visactor/vchart**: 修复字体系列 (Font Family) 设置的问题 by @xuefei1313 in https://github.com/VisActor/VChart/pull/4324 -- **@visactor/vchart**: 修复 setDimensionIndex 方法的问题 by @xuefei1313 in https://github.com/VisActor/VChart/pull/4291 - -**📖 文档更新** - -- **@visactor/vchart**: 新增 K 线图 (Candlestick) 开发指南 by @xuefei1313 in https://github.com/VisActor/VChart/pull/4310 -- **@visactor/vchart**: 新增主题 (Theme) 开发指南 by @xuanhun in https://github.com/VisActor/VChart/pull/4322 -- **@visactor/vchart**: 新增地图卷绕 (Map Rewind) 指南 by @xuefei1313 in https://github.com/VisActor/VChart/pull/4326 -- **@visactor/vchart**: 在指南中补充 3D 注册相关内容 by @xuefei1313 in https://github.com/VisActor/VChart/pull/4312 -- **@visactor/vchart**: 修正通用图表配置 labelLayout 的文档说明 by @xuefei1313 in https://github.com/VisActor/VChart/pull/4316 - -[更多详情请查看 v2.0.10](https://github.com/VisActor/VChart/releases/tag/v2.0.10) - -# v2.0.9 - -2025-11-18 - -**🆕 新特性** - -- **@visactor/react-vchart**: 新增 registerChartResizeZoomPlugin 导出 by @xuefei1313 in https://github.com/VisActor/VChart/pull/4286 -- **@visactor/vchart**: 支持特效动画 by @purpose233 in https://github.com/VisActor/VChart/pull/4299 -- **@visactor/vchart**: 增强 DataZoom 组件功能并修复相关问题 by @skie1997 in https://github.com/VisActor/VChart/pull/4065 - -**🐛 问题修复** - -- **@visactor/vchart-extension**: 修复 vchart-extension 打包产物中包含额外版本的问题 by @xuefei1313 in https://github.com/VisActor/VChart/pull/4277 -- **@visactor/vchart**: 修复标线 (MarkLine) 自动范围计算的问题 by @xuefei1313 in https://github.com/VisActor/VChart/pull/4290 - -**📖 文档更新** - -- **@visactor/vchart**: 修复示例中 registerMorph 的错误 by @xuefei1313 in https://github.com/VisActor/VChart/pull/4285 -- **@visactor/vchart**: 新增 K 线图 (Candlestick) 示例 by @xuefei1313 in https://github.com/VisActor/VChart/pull/4297 - -[更多详情请查看 v2.0.9](https://github.com/VisActor/VChart/releases/tag/v2.0.9) - -# v2.0.7 - -2025-11-03 - -**🆕 新增功能** - -- **@visactor/vchart**：支持 resize zoom 图表插件，关联 [#4241](https://github.com/VisActor/VChart/pull/4241) -- **@visactor/vchart**：注册 boxplot transform，关联 [#4268](https://github.com/VisActor/VChart/pull/4268) -- **@visactor/vchart**：新增 translate-issues 工作流配置，关联 [#4264](https://github.com/VisActor/VChart/pull/4264) -- **@visactor/vchart**：在 vchart-extension 中新增回归线 (regression-lines)，关联 [#4245](https://github.com/VisActor/VChart/pull/4245) -- **@visactor/vchart**：变更 vrender 依赖项，关联 [#4224](https://github.com/VisActor/VChart/pull/4224) - -**🐛 功能修复** - -- **@visactor/vchart**：修复十字准星 (crosshair) 未隐藏的问题，修复 [#4252](https://github.com/VisActor/VChart/pull/4252) -- **@visactor/vchart**：修复布局 (layout) 的问题，修复 [#4249](https://github.com/VisActor/VChart/pull/4249) -- **@visactor/vchart**：修复逻辑回归线 (logistic regression line) 的问题，修复 [#4263](https://github.com/VisActor/VChart/pull/4263) -- **@visactor/vchart**：修复分组散点图 (grouped scatter) 的回归线支持问题，修复 [#4248](https://github.com/VisActor/VChart/pull/4248) -- **@visactor/vchart**：修复堆叠数据 (stackData) 为空时的检查问题，修复 [#4244](https://github.com/VisActor/VChart/pull/4244) -- **@visactor/vchart**：修复瀑布图堆叠总计 (waterfall stack total) 的问题，修复 [#4243](https://github.com/VisActor/VChart/pull/4243) - -[更多详情请查看 v2.0.7](https://github.com/VisActor/VChart/releases/tag/v2.0.7) - -# v2.0.6 - -2025-10-14 - -**🆕 新增功能** - -- **@visactor/vchart**：`formatter` 新增计算功能，关联 [#4211](https://github.com/VisActor/VChart/pull/4211) -- **@visactor/vchart**：更新缺陷报告方法，关联 [#4221](https://github.com/VisActor/VChart/pull/4221) -- **@visactor/vchart**：升级 `vrender` 版本以修复动画问题，关联 [#4222](https://github.com/VisActor/VChart/pull/4222) -- **@visactor/vchart**：瀑布图新增 `waterfallType` 配置，关联 [#4220](https://github.com/VisActor/VChart/pull/4220) -- **@visactor/vchart**：变更 `vrender` 依赖项，关联 [#4224](https://github.com/VisActor/VChart/pull/4224) - -**🐛 功能修复** - -- **@visactor/vchart**：修复图例翻页器的问题，修复 [#4212](https://github.com/VisActor/VChart/pull/4212) -- **@visactor/vchart**：修复当系列没有数据时 `markline` 的报错问题，修复 [#4216](https://github.com/VisActor/VChart/pull/4216) - -[更多详情请查看 v2.0.6](https://github.com/VisActor/VChart/releases/tag/v2.0.6) - -# v2.0.5 - -2025-09-19 - -[更多详情请查看 v2.0.5](https://github.com/VisActor/VChart/releases/tag/v2.0.5) - -# v2.0.2 - -2025-07-28 - -**🆕 新增功能** - -- **@visactor/vchart**: add the afterClearRect hook of render - -**Full Changelog**: https://github.com/VisActor/VChart/compare/v2.0.1...v2.0.2 - -[更多详情请查看 v2.0.2](https://github.com/VisActor/VChart/releases/tag/v2.0.2) - -# v2.0.1 - -2025-07-24 - -**🆕 新增功能** - -- **@visactor/vchart**：新增配置项以避免 `brush` 状态更新，关闭 [#4035](https://github.com/VisActor/VChart/issues/4035) -- **@visactor/vchart**：优化 `datazoom` 动画效果 -- **@visactor/vchart**：新增 vrender 的 `afterClearScreen` 钩子 - -**🐛 功能修复** - -- **@visactor/vchart**：修复 3D 图表网格问题 -- **@visactor/vchart**：当 `sampling` 变更时，轴的 `tickData` 应同步更新，修复 [#4059](https://github.com/VisActor/VChart/issues/4059) -- **@visactor/vchart**：仅在需要时计算多层 `label` 项，修复 [#4056](https://github.com/VisActor/VChart/issues/4056) -- **@visactor/vchart**：修复 `remake` 时的 `resize` 错误及动画归一化 bug，修复 [#4070](https://github.com/VisActor/VChart/issues/4070) -- **@visactor/vchart**：修复飞书 block 相关问题，并在创建 vchart 时调用 setenv -- **@visactor/vchart**：修复 tooltip triggerOff 与 tooltip lock 的 bug -- **@visactor/vchart**：修复 `tooltip` 处理器为 `undefined` 时抛出异常的问题，修复 [#4044](https://github.com/VisActor/VChart/issues/4044) -- **@visactor/vchart**：修复 `tooltip.style.titleLabel` 的 `textAlign` 不生效问题，修复 [#4043](https://github.com/VisActor/VChart/issues/4043) - -[更多详情请查看 v2.0.1](https://github.com/VisActor/VChart/releases/tag/v2.0.1) - - - +# v2.0.15 + +2026-02-02 + +**🆕 新增功能** + +- **@visactor/vchart**: 支持 Brush API 及交互（Interactive）API by @skie1997 in https://github.com/VisActor/VChart/pull/4408 +- **@visactor/vchart**: 支持鼠标滚轮固定像素步进滚动，并支持设置滚动条滑块的最小高度 by @xuefei1313 in https://github.com/VisActor/VChart/pull/4423 + +**🐛 问题修复** + +- **@visactor/vchart**: 修复 React VChart 组件的注册逻辑 by @xile611 in https://github.com/VisActor/VChart/pull/4419 +- **@visactor/vchart**: 升级 `vrender` 依赖以修复词云图（Word Cloud）相关问题 by @xuefei1313 in https://github.com/VisActor/VChart/pull/4422 + +**🔨 维护与杂项** + +- **@visactor/vchart**: 新增 `spec-kit` 工具包及项目章程（Constitution） by @xuefei1313 in https://github.com/VisActor/VChart/pull/4412 + +**Full Changelog**: https://github.com/VisActor/VChart/compare/v2.0.14...v2.0.15 + +[more detail about v2.0.15](https://github.com/VisActor/VChart/releases/tag/v2.0.15) + +# v2.0.14 + +2026-01-22 + +**🆕 新增功能** + +- **@visactor/vchart**: 支持 Brush API 和交互（Interactive）API by @skie1997 in https://github.com/VisActor/VChart/pull/4408 +- **@visactor/vchart**: 支持鼠标滚轮固定像素步进滚动，并支持设置滚动条滑块的最小高度 by @xuefei1313 in https://github.com/VisActor/VChart/pull/4423 + +**🐛 问题修复** + +- **@visactor/vchart**: 修复 React VChart 组件的注册逻辑 by @xile611 in https://github.com/VisActor/VChart/pull/4419 +- **@visactor/vchart**: 升级 `vrender` 依赖以修复词云图（Word Cloud）相关问题 by @xuefei1313 in https://github.com/VisActor/VChart/pull/4422 +- **@visactor/vchart**: 修复地图（Map）Tooltip 的显示问题 by @xuefei1313 in https://github.com/VisActor/VChart/pull/4417 +- **@visactor/vchart**: 修复副标题（Subtitle）的布局错误 by @xuefei1313 in https://github.com/VisActor/VChart/pull/4415 +- **@visactor/vchart**: 为 Tooltip 处理程序添加防御性代码以防止报错 by @skie1997 in https://github.com/VisActor/VChart/pull/4424 + +**🔨 维护与杂项** + +- **@visactor/vchart**: 更新 GH CLI 工具及相关使用文档 by @xuefei1313 in https://github.com/VisActor/VChart/pull/4409 + +**Full Changelog**: https://github.com/VisActor/VChart/compare/v2.0.13...v2.0.14 + +[more detail about v2.0.14](https://github.com/VisActor/VChart/releases/tag/v2.0.14) + +# v2.0.13 + +2026-01-08 + +**🐛 问题修复** + +- **@visactor/vchart**: 修复场景（Stage）发生变换后 Tooltip 显示异常的问题 by @xuefei1313 in https://github.com/VisActor/VChart/pull/4393 +- **@visactor/vchart**: 修复地图（Map）Tooltip 的相关问题 by @xuefei1313 in https://github.com/VisActor/VChart/pull/4396 +- **@visactor/vchart**: 修复动画状态（Animation State）的逻辑问题 by @xuefei1313 in https://github.com/VisActor/VChart/pull/4398 + +**🔨 维护与杂项** + +- **@visactor/vchart**: 将基础 Node.js 版本依赖升级至 20+ by @xile611 in https://github.com/VisActor/VChart/pull/4402 + +**📖 文档更新** + +- **@visactor/vchart**: 更新标注点（Marker Point）样式与状态的文档 by @skie1997 in https://github.com/VisActor/VChart/pull/4369 +- **@visactor/vchart**: 新增退场动画（Exit Animation）示例 by @purpose233 in https://github.com/VisActor/VChart/pull/4374 + +**Full Changelog**: https://github.com/VisActor/VChart/compare/v2.0.12...v2.0.13 + +[更多详情请查看 v2.0.13](https://github.com/VisActor/VChart/releases/tag/v2.0.13) + +# v2.0.12 + +2025-12-25 + +**🆕 新增功能** + +- **@visactor/vchart**: 极坐标轴（CircleAxis）支持 `autoLabelMaxWidth` 配置 by @xuefei1313 in https://github.com/VisActor/VChart/pull/4357 +- **@visactor/vchart**: 新增图表消失（Disappear）状态支持 by @xuefei1313 in https://github.com/VisActor/VChart/pull/4341 +- **@visactor/vchart**: 优化热力图（Heatmap）形状渲染逻辑 by @xuefei1313 in https://github.com/VisActor/VChart/pull/4377 +- **@visactor/vchart**: 优化地图（Map）zoom交互，增加 `zoomRate` 配置 by @xuefei1313 in https://github.com/VisActor/VChart/pull/4373 + +**🐛 问题修复** + +- **@visactor/vchart**: 修复坐标轴标题（Axes Title）的布局问题 by @xuefei1313 in https://github.com/VisActor/VChart/pull/4371 + +**Full Changelog**: https://github.com/VisActor/VChart/compare/v2.0.11...v2.0.12 + +[更多详情请查看 v2.0.12](https://github.com/VisActor/VChart/releases/tag/v2.0.12) + +# v2.0.11 + +2025-12-11 + +**🆕 新增功能** + +- **@visactor/vchart**: 在 `initOption` 中支持 `componentShowContent` 配置 by @xuefei1313 in https://github.com/VisActor/VChart/pull/4334 +- **@visactor/vchart**: 增强箱形图（Boxplot）标签功能 by @xile611 in https://github.com/VisActor/VChart/pull/4346 +- **@visactor/vchart**: 导出数据常量定义 by @xuefei1313 in https://github.com/VisActor/VChart/pull/4339 + +**🐛 问题修复** + +- **@visactor/vchart**: 修复存在内部偏移（inner offset）时的十字准星（crosshair）显示问题 by @xile611 in https://github.com/VisActor/VChart/pull/4340 +- **@visactor/vchart**: 修复十字准星在特定内部偏移下的定位逻辑 (fix #4338) by @xile611 in https://github.com/VisActor/VChart/pull/4343 +- **@visactor/vchart**: 修复箱形图异常值的颜色显示问题 by @xile611 in https://github.com/VisActor/VChart/pull/4347 +- **@visactor/vchart**: 修复箱形图异常值的样式问题 by @xile611 in https://github.com/VisActor/VChart/pull/4350 + +**Full Changelog**: https://github.com/VisActor/VChart/compare/v2.0.10...v2.0.11 + +[more detail about v2.0.11](https://github.com/VisActor/VChart/releases/tag/v2.0.11) + +# v2.0.10 + +2025-11-28 + +**🆕 新特性** + +- **@visactor/vchart**: 箱型图 (Boxplot) 功能增强 by @xile611 in https://github.com/VisActor/VChart/pull/4323 + +**🐛 问题修复** + +- **@visactor/vchart**: 升级 vrender 依赖以修复玫瑰图 (Rose Chart) 的问题 by @xuefei1313 in https://github.com/VisActor/VChart/pull/4315 +- **@visactor/vchart**: 升级 vrender 依赖以修复动画相关问题 by @xuefei1313 in https://github.com/VisActor/VChart/pull/4325 +- **@visactor/vchart**: 修复扩展标记 (Extension Mark) 的更新逻辑 by @xile611 in https://github.com/VisActor/VChart/pull/4318 +- **@visactor/vchart**: 修复字体系列 (Font Family) 设置的问题 by @xuefei1313 in https://github.com/VisActor/VChart/pull/4324 +- **@visactor/vchart**: 修复 setDimensionIndex 方法的问题 by @xuefei1313 in https://github.com/VisActor/VChart/pull/4291 + +**📖 文档更新** + +- **@visactor/vchart**: 新增 K 线图 (Candlestick) 开发指南 by @xuefei1313 in https://github.com/VisActor/VChart/pull/4310 +- **@visactor/vchart**: 新增主题 (Theme) 开发指南 by @xuanhun in https://github.com/VisActor/VChart/pull/4322 +- **@visactor/vchart**: 新增地图卷绕 (Map Rewind) 指南 by @xuefei1313 in https://github.com/VisActor/VChart/pull/4326 +- **@visactor/vchart**: 在指南中补充 3D 注册相关内容 by @xuefei1313 in https://github.com/VisActor/VChart/pull/4312 +- **@visactor/vchart**: 修正通用图表配置 labelLayout 的文档说明 by @xuefei1313 in https://github.com/VisActor/VChart/pull/4316 + +[更多详情请查看 v2.0.10](https://github.com/VisActor/VChart/releases/tag/v2.0.10) + +# v2.0.9 + +2025-11-18 + +**🆕 新特性** + +- **@visactor/react-vchart**: 新增 registerChartResizeZoomPlugin 导出 by @xuefei1313 in https://github.com/VisActor/VChart/pull/4286 +- **@visactor/vchart**: 支持特效动画 by @purpose233 in https://github.com/VisActor/VChart/pull/4299 +- **@visactor/vchart**: 增强 DataZoom 组件功能并修复相关问题 by @skie1997 in https://github.com/VisActor/VChart/pull/4065 + +**🐛 问题修复** + +- **@visactor/vchart-extension**: 修复 vchart-extension 打包产物中包含额外版本的问题 by @xuefei1313 in https://github.com/VisActor/VChart/pull/4277 +- **@visactor/vchart**: 修复标线 (MarkLine) 自动范围计算的问题 by @xuefei1313 in https://github.com/VisActor/VChart/pull/4290 + +**📖 文档更新** + +- **@visactor/vchart**: 修复示例中 registerMorph 的错误 by @xuefei1313 in https://github.com/VisActor/VChart/pull/4285 +- **@visactor/vchart**: 新增 K 线图 (Candlestick) 示例 by @xuefei1313 in https://github.com/VisActor/VChart/pull/4297 + +[更多详情请查看 v2.0.9](https://github.com/VisActor/VChart/releases/tag/v2.0.9) + +# v2.0.7 + +2025-11-03 + +**🆕 新增功能** + +- **@visactor/vchart**：支持 resize zoom 图表插件，关联 [#4241](https://github.com/VisActor/VChart/pull/4241) +- **@visactor/vchart**：注册 boxplot transform，关联 [#4268](https://github.com/VisActor/VChart/pull/4268) +- **@visactor/vchart**：新增 translate-issues 工作流配置，关联 [#4264](https://github.com/VisActor/VChart/pull/4264) +- **@visactor/vchart**：在 vchart-extension 中新增回归线 (regression-lines)，关联 [#4245](https://github.com/VisActor/VChart/pull/4245) +- **@visactor/vchart**：变更 vrender 依赖项，关联 [#4224](https://github.com/VisActor/VChart/pull/4224) + +**🐛 功能修复** + +- **@visactor/vchart**：修复十字准星 (crosshair) 未隐藏的问题，修复 [#4252](https://github.com/VisActor/VChart/pull/4252) +- **@visactor/vchart**：修复布局 (layout) 的问题，修复 [#4249](https://github.com/VisActor/VChart/pull/4249) +- **@visactor/vchart**：修复逻辑回归线 (logistic regression line) 的问题，修复 [#4263](https://github.com/VisActor/VChart/pull/4263) +- **@visactor/vchart**：修复分组散点图 (grouped scatter) 的回归线支持问题，修复 [#4248](https://github.com/VisActor/VChart/pull/4248) +- **@visactor/vchart**：修复堆叠数据 (stackData) 为空时的检查问题，修复 [#4244](https://github.com/VisActor/VChart/pull/4244) +- **@visactor/vchart**：修复瀑布图堆叠总计 (waterfall stack total) 的问题，修复 [#4243](https://github.com/VisActor/VChart/pull/4243) + +[更多详情请查看 v2.0.7](https://github.com/VisActor/VChart/releases/tag/v2.0.7) + +# v2.0.6 + +2025-10-14 + +**🆕 新增功能** + +- **@visactor/vchart**：`formatter` 新增计算功能，关联 [#4211](https://github.com/VisActor/VChart/pull/4211) +- **@visactor/vchart**：更新缺陷报告方法，关联 [#4221](https://github.com/VisActor/VChart/pull/4221) +- **@visactor/vchart**：升级 `vrender` 版本以修复动画问题，关联 [#4222](https://github.com/VisActor/VChart/pull/4222) +- **@visactor/vchart**：瀑布图新增 `waterfallType` 配置，关联 [#4220](https://github.com/VisActor/VChart/pull/4220) +- **@visactor/vchart**：变更 `vrender` 依赖项，关联 [#4224](https://github.com/VisActor/VChart/pull/4224) + +**🐛 功能修复** + +- **@visactor/vchart**：修复图例翻页器的问题，修复 [#4212](https://github.com/VisActor/VChart/pull/4212) +- **@visactor/vchart**：修复当系列没有数据时 `markline` 的报错问题，修复 [#4216](https://github.com/VisActor/VChart/pull/4216) + +[更多详情请查看 v2.0.6](https://github.com/VisActor/VChart/releases/tag/v2.0.6) + +# v2.0.5 + +2025-09-19 + +[更多详情请查看 v2.0.5](https://github.com/VisActor/VChart/releases/tag/v2.0.5) + +# v2.0.2 + +2025-07-28 + +**🆕 新增功能** + +- **@visactor/vchart**: add the afterClearRect hook of render + +**Full Changelog**: https://github.com/VisActor/VChart/compare/v2.0.1...v2.0.2 + +[更多详情请查看 v2.0.2](https://github.com/VisActor/VChart/releases/tag/v2.0.2) + +# v2.0.1 + +2025-07-24 + +**🆕 新增功能** + +- **@visactor/vchart**：新增配置项以避免 `brush` 状态更新，关闭 [#4035](https://github.com/VisActor/VChart/issues/4035) +- **@visactor/vchart**：优化 `datazoom` 动画效果 +- **@visactor/vchart**：新增 vrender 的 `afterClearScreen` 钩子 + +**🐛 功能修复** + +- **@visactor/vchart**：修复 3D 图表网格问题 +- **@visactor/vchart**：当 `sampling` 变更时，轴的 `tickData` 应同步更新，修复 [#4059](https://github.com/VisActor/VChart/issues/4059) +- **@visactor/vchart**：仅在需要时计算多层 `label` 项，修复 [#4056](https://github.com/VisActor/VChart/issues/4056) +- **@visactor/vchart**：修复 `remake` 时的 `resize` 错误及动画归一化 bug，修复 [#4070](https://github.com/VisActor/VChart/issues/4070) +- **@visactor/vchart**：修复飞书 block 相关问题，并在创建 vchart 时调用 setenv +- **@visactor/vchart**：修复 tooltip triggerOff 与 tooltip lock 的 bug +- **@visactor/vchart**：修复 `tooltip` 处理器为 `undefined` 时抛出异常的问题，修复 [#4044](https://github.com/VisActor/VChart/issues/4044) +- **@visactor/vchart**：修复 `tooltip.style.titleLabel` 的 `textAlign` 不生效问题，修复 [#4043](https://github.com/VisActor/VChart/issues/4043) + +[更多详情请查看 v2.0.1](https://github.com/VisActor/VChart/releases/tag/v2.0.1) diff --git a/packages/harmony_vchart/library/CHANGELOG.md b/packages/harmony_vchart/library/CHANGELOG.md index 13928d2644..9033100184 100644 --- a/packages/harmony_vchart/library/CHANGELOG.md +++ b/packages/harmony_vchart/library/CHANGELOG.md @@ -1,26 +1,48 @@ +# v2.0.15 + +2026-02-02 + +**🆕 New Features** + +- **@visactor/vchart**: Support Brush API and Interactive API by @skie1997 in https://github.com/VisActor/VChart/pull/4408 +- **@visactor/vchart**: Support fixed pixel step scrolling on wheel event and minimum scrollbar slider height by @xuefei1313 in https://github.com/VisActor/VChart/pull/4423 + +**🐛 Bug Fixes** + +- **@visactor/vchart**: Fix React VChart component registration logic by @xile611 in https://github.com/VisActor/VChart/pull/4419 +- **@visactor/vchart**: Upgrade `vrender` dependency to fix Word Cloud chart issues by @xuefei1313 in https://github.com/VisActor/VChart/pull/4422 + +**🔨 Chores** + +- **@visactor/vchart**: Add `spec-kit` and project constitution by @xuefei1313 in https://github.com/VisActor/VChart/pull/4412 + +**Full Changelog**: https://github.com/VisActor/VChart/compare/v2.0.14...v2.0.15 + +[more detail about v2.0.15](https://github.com/VisActor/VChart/releases/tag/v2.0.15) + # v2.0.14 2026-01-22 -**🆕 New Features** - -- **@visactor/vchart**: Support Brush API and Interactive API by @skie1997 in https://github.com/VisActor/VChart/pull/4408 -- **@visactor/vchart**: Support fixed pixel step scrolling on wheel event and minimum scrollbar slider height by @xuefei1313 in https://github.com/VisActor/VChart/pull/4423 - -**🐛 Bug Fixes** - -- **@visactor/vchart**: Fix React VChart component registration logic by @xile611 in https://github.com/VisActor/VChart/pull/4419 -- **@visactor/vchart**: Upgrade `vrender` dependency to fix Word Cloud chart issues by @xuefei1313 in https://github.com/VisActor/VChart/pull/4422 -- **@visactor/vchart**: Fix tooltip display issue in Map charts by @xuefei1313 in https://github.com/VisActor/VChart/pull/4417 -- **@visactor/vchart**: Fix subtitle layout bug by @xuefei1313 in https://github.com/VisActor/VChart/pull/4415 -- **@visactor/vchart**: Add protection code for tooltip handler to prevent errors by @skie1997 in https://github.com/VisActor/VChart/pull/4424 - -**🔨 Chores** - -- **@visactor/vchart**: Update GH CLI and usage documentation by @xuefei1313 in https://github.com/VisActor/VChart/pull/4409 - -**Full Changelog**: https://github.com/VisActor/VChart/compare/v2.0.13...v2.0.14 - +**🆕 New Features** + +- **@visactor/vchart**: Support Brush API and Interactive API by @skie1997 in https://github.com/VisActor/VChart/pull/4408 +- **@visactor/vchart**: Support fixed pixel step scrolling on wheel event and minimum scrollbar slider height by @xuefei1313 in https://github.com/VisActor/VChart/pull/4423 + +**🐛 Bug Fixes** + +- **@visactor/vchart**: Fix React VChart component registration logic by @xile611 in https://github.com/VisActor/VChart/pull/4419 +- **@visactor/vchart**: Upgrade `vrender` dependency to fix Word Cloud chart issues by @xuefei1313 in https://github.com/VisActor/VChart/pull/4422 +- **@visactor/vchart**: Fix tooltip display issue in Map charts by @xuefei1313 in https://github.com/VisActor/VChart/pull/4417 +- **@visactor/vchart**: Fix subtitle layout bug by @xuefei1313 in https://github.com/VisActor/VChart/pull/4415 +- **@visactor/vchart**: Add protection code for tooltip handler to prevent errors by @skie1997 in https://github.com/VisActor/VChart/pull/4424 + +**🔨 Chores** + +- **@visactor/vchart**: Update GH CLI and usage documentation by @xuefei1313 in https://github.com/VisActor/VChart/pull/4409 + +**Full Changelog**: https://github.com/VisActor/VChart/compare/v2.0.13...v2.0.14 + [more detail about v2.0.14](https://github.com/VisActor/VChart/releases/tag/v2.0.14) [more detail about v2.0.14](https://github.com/VisActor/VChart/releases/tag/v2.0.14) @@ -29,1150 +51,1150 @@ 2026-01-08 -# v2.0.13 - -2026-01-08 - -**🐛 Bug Fixes** - -- **@visactor/vchart**: Fix tooltip display issue when stage is transformed by @xuefei1313 in https://github.com/VisActor/VChart/pull/4393 -- **@visactor/vchart**: Fix map tooltip issue by @xuefei1313 in https://github.com/VisActor/VChart/pull/4396 -- **@visactor/vchart**: Fix animation state issue by @xuefei1313 in https://github.com/VisActor/VChart/pull/4398 - -**🔨 Chores** - -- **@visactor/vchart**: Update base Node.js version to 20+ by @xile611 in https://github.com/VisActor/VChart/pull/4402 - -**📖 Documentation** - -- **@visactor/vchart**: Update marker point style and state documentation by @skie1997 in https://github.com/VisActor/VChart/pull/4369 -- **@visactor/vchart**: Add exit animation demo by @purpose233 in https://github.com/VisActor/VChart/pull/4374 - -**Full Changelog**: https://github.com/VisActor/VChart/compare/v2.0.12...v2.0.13 - +# v2.0.13 + +2026-01-08 + +**🐛 Bug Fixes** + +- **@visactor/vchart**: Fix tooltip display issue when stage is transformed by @xuefei1313 in https://github.com/VisActor/VChart/pull/4393 +- **@visactor/vchart**: Fix map tooltip issue by @xuefei1313 in https://github.com/VisActor/VChart/pull/4396 +- **@visactor/vchart**: Fix animation state issue by @xuefei1313 in https://github.com/VisActor/VChart/pull/4398 + +**🔨 Chores** + +- **@visactor/vchart**: Update base Node.js version to 20+ by @xile611 in https://github.com/VisActor/VChart/pull/4402 + +**📖 Documentation** + +- **@visactor/vchart**: Update marker point style and state documentation by @skie1997 in https://github.com/VisActor/VChart/pull/4369 +- **@visactor/vchart**: Add exit animation demo by @purpose233 in https://github.com/VisActor/VChart/pull/4374 + +**Full Changelog**: https://github.com/VisActor/VChart/compare/v2.0.12...v2.0.13 + [more detail about v2.0.13](https://github.com/VisActor/VChart/releases/tag/v2.0.13) [more detail about v2.0.13](https://github.com/VisActor/VChart/releases/tag/v2.0.13) -# v2.0.12 - -2025-12-25 - -**🆕 新增功能** - -- **@visactor/vchart**: 极坐标轴（CircleAxis）支持 `autoLabelMaxWidth` 配置 by @xuefei1313 in https://github.com/VisActor/VChart/pull/4357 -- **@visactor/vchart**: 新增图表消失（Disappear）状态支持 by @xuefei1313 in https://github.com/VisActor/VChart/pull/4341 -- **@visactor/vchart**: 优化热力图（Heatmap）形状渲染逻辑 by @xuefei1313 in https://github.com/VisActor/VChart/pull/4377 -- **@visactor/vchart**: 优化地图（Map）zoom交互，增加 `zoomRate` 配置 by @xuefei1313 in https://github.com/VisActor/VChart/pull/4373 - -**🐛 问题修复** - -- **@visactor/vchart**: 修复坐标轴标题（Axes Title）的布局问题 by @xuefei1313 in https://github.com/VisActor/VChart/pull/4371 - -**Full Changelog**: https://github.com/VisActor/VChart/compare/v2.0.11...v2.0.12 - -[more detail about v2.0.12](https://github.com/VisActor/VChart/releases/tag/v2.0.12) - - -# v2.0.11 - -2025-12-11 - -# v2.0.11 - -2025-12-11 - -**🆕 New Features** - -- **@visactor/vchart**: Support `componentShowContent` in `initOption` by @xuefei1313 in https://github.com/VisActor/VChart/pull/4334 -- **@visactor/vchart**: Support boxplot label by @xile611 in https://github.com/VisActor/VChart/pull/4346 -- **@visactor/vchart**: Export data constant by @xuefei1313 in https://github.com/VisActor/VChart/pull/4339 - -**🐛 Bug Fixes** - -- **@visactor/vchart**: Fix crosshair behavior when having inner offset by @xile611 in https://github.com/VisActor/VChart/pull/4340 -- **@visactor/vchart**: Fix outlier color in boxplot by @xile611 in https://github.com/VisActor/VChart/pull/4347 -- **@visactor/vchart**: Fix boxplot outlier style by @xile611 in https://github.com/VisActor/VChart/pull/4350 - - -**Full Changelog**: https://github.com/VisActor/VChart/compare/v2.0.10...v2.0.11 - -[more detail about v2.0.11](https://github.com/VisActor/VChart/releases/tag/v2.0.11) - -[more detail about v2.0.11](https://github.com/VisActor/VChart/releases/tag/v2.0.11) - -# v2.0.10 - -2025-11-28 - - -**🆕 New Features** - - -* @visactor/vchart: Enhance boxplot features by @xile611 in https://github.com/VisActor/VChart/pull/4323 - - -**🐛 Bug Fixes** - - -* @visactor/vchart: Upgrade vrender dependency to fix rose chart issues by @xuefei1313 in https://github.com/VisActor/VChart/pull/4315 -* @visactor/vchart: Upgrade vrender dependency to fix animation issues by @xuefei1313 in https://github.com/VisActor/VChart/pull/4325 -* @visactor/vchart: Fix extension mark update logic by @xile611 in https://github.com/VisActor/VChart/pull/4318 -* @visactor/vchart: Fix font family setting issue by @xuefei1313 in https://github.com/VisActor/VChart/pull/4324 -* @visactor/vchart: Fix issue with setDimensionIndex by @xuefei1313 in https://github.com/VisActor/VChart/pull/4291 - - -**📖 Documentation** - - -* @visactor/vchart: Add candlestick chart guide by @xuefei1313 in https://github.com/VisActor/VChart/pull/4310 -* @visactor/vchart: Add theme development guide by @xuanhun in https://github.com/VisActor/VChart/pull/4322 -* @visactor/vchart: Add map rewind guide by @xuefei1313 in https://github.com/VisActor/VChart/pull/4326 -* @visactor/vchart: Add 3D registration content to guide by @xuefei1313 in https://github.com/VisActor/VChart/pull/4312 -* @visactor/vchart: Fix documentation for common chart option labelLayout by @xuefei1313 in https://github.com/VisActor/VChart/pull/4316 - -**Full Changelog**: https://github.com/VisActor/VChart/compare/v2.0.9...v2.0.10 - -[more detail about v2.0.10](https://github.com/VisActor/VChart/releases/tag/v2.0.10) - -# v2.0.9 - -2025-11-18 - - -**🆕 New Features** - - -* @visactor/react-vchart: Add export for registerChartResizeZoomPlugin by @xuefei1313 in https://github.com/VisActor/VChart/pull/4286 -* @visactor/vchart: Support effect animation by @purpose233 in https://github.com/VisActor/VChart/pull/4299 -* @visactor/vchart: Enhance datazoom and fix bugs by @skie1997 in https://github.com/VisActor/VChart/pull/4065 - - -**🐛 Bug Fixes** - - -* @visactor/vchart-extension: Fix the vchart-extension packaged artifacts contained an extra version by @xuefei1313 in https://github.com/VisActor/VChart/pull/4277 -* @visactor/vchart: Fix markline auto range by @xuefei1313 in https://github.com/VisActor/VChart/pull/4290 - - -**📖 Documentation** - - -* @visactor/vchart: Fix registerMorph error in example by @xuefei1313 in https://github.com/VisActor/VChart/pull/4285 -* @visactor/vchart: Add candlestick demo by @xuefei1313 in https://github.com/VisActor/VChart/pull/4297 - -**Full Changelog**: https://github.com/VisActor/VChart/compare/v2.0.7...v2.0.9 - -[more detail about v2.0.9](https://github.com/VisActor/VChart/releases/tag/v2.0.9) - -# v2.0.7 - -2025-11-03 - -🆕 New Features - -@visactor/vchart: Support resize zoom chart plugin by @xuefei1313 in https://github.com/VisActor/VChart/pull/4241 -@visactor/vchart: Register transform boxplot by @xile611 in https://github.com/VisActor/VChart/pull/4268 -@visactor/vchart: Add translate-issues workflow configuration by @xuefei1313 in https://github.com/VisActor/VChart/pull/4264 -@visactor/vchart: Add regression-lines in vchart-extension by @xile611 in https://github.com/VisActor/VChart/pull/4245 -@visactor/vchart: Change vrender dependencies, see https://github.com/VisActor/VChart/pull/4224 - -🐛 Bug Fixes - -@visactor/vchart: Fix crosshair not hide by @xile611 in https://github.com/VisActor/VChart/pull/4252 -@visactor/vchart: Fix issue of layout by @xuefei1313 in https://github.com/VisActor/VChart/pull/4249 -@visactor/vchart: Fix logistic regression line by @xile611 in https://github.com/VisActor/VChart/pull/4263 -@visactor/vchart: Fix support regression line for grouped scatter by @xile611 in https://github.com/VisActor/VChart/pull/4248 -@visactor/vchart: Fix check if stackData is empty by @kkxxkk2019 in https://github.com/VisActor/VChart/pull/4244 -@visactor/vchart: Fix issue of waterfall stack total by @xuefei1313 in https://github.com/VisActor/VChart/pull/4243 - - - - - -[more detail about v2.0.7](https://github.com/VisActor/VChart/releases/tag/v2.0.7) - -# v2.0.6 - -2025-10-14 - - -**What's Changed** - -* fix: fix the issue of legend pager by @xuefei1313 in https://github.com/VisActor/VChart/pull/4212 -* Feat/support calc in formatter by @xuefei1313 in https://github.com/VisActor/VChart/pull/4211 -* Fix/fix error of markline when series no data by @xuefei1313 in https://github.com/VisActor/VChart/pull/4216 -* feat: update bugreport metthod by @xuanhun in https://github.com/VisActor/VChart/pull/4221 -* feat: upgrade vrender to fix animation bug by @xuefei1313 in https://github.com/VisActor/VChart/pull/4222 -* feat: support waterfallType in waterfall chart by @xuefei1313 in https://github.com/VisActor/VChart/pull/4220 -* feat: change vrender dependencies by @xuefei1313 in https://github.com/VisActor/VChart/pull/4224 - - -**Full Changelog**: https://github.com/VisActor/VChart/compare/v2.0.5...v2.0.6 - -[more detail about v2.0.6](https://github.com/VisActor/VChart/releases/tag/v2.0.6) - -# v2.0.5 - -2025-09-19 - - - -[more detail about v2.0.5](https://github.com/VisActor/VChart/releases/tag/v2.0.5) - -# v2.0.2 - -2025-07-28 - - -**🆕 New feature** - -- **@visactor/vchart**: add the afterClearRect hook of render - -**Full Changelog**: https://github.com/VisActor/VChart/compare/v2.0.1...v2.0.2 - -[more detail about v2.0.2](https://github.com/VisActor/VChart/releases/tag/v2.0.2) - -# v2.0.1 - -2025-07-24 - - -**🆕 New feature** - -- **@visactor/vchart**: add config to avoid brush state update. close [#4035](https://github.com/VisActor/VChart/issues/4035) -- **@visactor/vchart**: optimize datazoom animation effect -- **@visactor/vchart**: add the afterClearScreen hook of render - -**🐛 Bug fix** - -- **@visactor/vchart**: fix issue with 3d chart grid -- **@visactor/vchart**: tickData of axis should update when `sampling` is changed, fix [#4059](https://github.com/VisActor/VChart/issues/4059) -- **@visactor/vchart**: only calculate multi layer label items when need, fix [#4056](https://github.com/VisActor/VChart/issues/4056) -- **@visactor/vchart**: fix resize error when remake, and re-normal aniamtion bug, fix [#4070](https://github.com/VisActor/VChart/issues/4070) -- **@visactor/vchart**: fix issue with feishu block and call setenv when create vchart -- **@visactor/vchart**: fix bug of tooltip triggerOff & tooltip lock -- **@visactor/vchart**: fix tooltip throw error when some tooltip processor is undefined, fix [#4044](https://github.com/VisActor/VChart/issues/4044) -- **@visactor/vchart**: fix `textAlign` not works in tooltip.style.titleLabel, fix [#4043](https://github.com/VisActor/VChart/issues/4043) - - - -[more detail about v2.0.1](https://github.com/VisActor/VChart/releases/tag/v2.0.1) - -# v1.13.11 - -2025-05-29 - - -**🆕 New feature** - -- **@visactor/vchart**: add `barGap` option for histogram chart -- **@visactor/vchart**: support tooltip.trigger and crosshair.trigger in theme - -**🐛 Bug fix** - -- **@visactor/vchart**: fix data-zoom domain when the label of band size is number-like string, fix [#3982](https://github.com/VisActor/VChart/issues/3982) -- **@visactor/vchart**: fix the order of title in mark tooltip when dimension tooltip has no title, fix [#3991](https://github.com/VisActor/VChart/issues/3991) -- **@visactor/vchart**: option `{ poptip: true }` should load `poptipForText` -- **react-vchart**: when use children to render customized tooltip, react-vchart should update -- **@visactor/vchart**: customized render of tooltip should be render in react 17 and react 18 - -**🔖 other** - -- **@visactor/vchart**: fix:Replace all the vchartConstrouctor to vchartConstructor,and ensure backward compatibility with older versions. - - - -[more detail about v1.13.11](https://github.com/VisActor/VChart/releases/tag/v1.13.11) - -# v1.13.10 - -2025-05-16 - - -**🆕 New feature** - -- **@visactor/vchart**: tooltip support inside position -- **@visactor/vchart**: mosaic chart supports bandWidthField and percent config, closed [#3945](https://github.com/VisActor/VChart/issues/3945) - -**🐛 Bug fix** - -- **@visactor/vchart**: export ManualTicker & StreamLight -- **@visactor/vchart**: tooltip should hide when enterable, fix [#3965](https://github.com/VisActor/VChart/issues/3965), fix [#3922](https://github.com/VisActor/VChart/issues/3922) -- **@visactor/vchart**: fix error of enterable tooltip when multiple charts in a page, fix [#3940](https://github.com/VisActor/VChart/issues/3940) -- **@visactor/vchart**: upgrade vgrammar to 0.16.7, fix [#3965](https://github.com/VisActor/VChart/issues/3965) - - - -[more detail about v1.13.10](https://github.com/VisActor/VChart/releases/tag/v1.13.10) - -# v1.13.9 - -2025-04-21 - - -**🆕 New feature** - -- **@visactor/vchart**: axis datafilter support context. close [#3332](https://github.com/VisActor/VChart/issues/3332) -- **@visactor/vchart**: gauge support clip when mark outof axis. close [#3859](https://github.com/VisActor/VChart/issues/3859) -- **@visactor/vchart**: markLine and markArea supports render multiple labels - -**🐛 Bug fix** - -- **@visactor/vchart**: clear event listener for normal animation when updateSpec, [#3881](https://github.com/VisActor/VChart/issues/3881) -- **@visactor/vchart**: fix coordinate of rect crosshair when bandSize is 0, fix [#3907](https://github.com/VisActor/VChart/issues/3907) -- **@visactor/vchart**: when set defaultSelect of crosshair, `axisIndex` should have a default value: 0 -- **@visactor/vchart**: fix type error of datazoom texts -- **@visactor/vchart**: the width of title label should auto fit content width when `autoWidth` is true, fix [#3880](https://github.com/VisActor/VChart/issues/3880) -- **@visactor/vchart**: mark line valid judgement. fix[#3857](https://github.com/VisActor/VChart/issues/3857) -- **@visactor/vchart**: empty placeholder should update after data is updated, fix [#3855](https://github.com/VisActor/VChart/issues/3855) - -**🔨 Refactor** - -- **@visactor/vchart**: brush interactive. close[#3765](https://github.com/VisActor/VChart/issues/3765) & [#3262](https://github.com/VisActor/VChart/issues/3262) & [#2802](https://github.com/VisActor/VChart/issues/2802) & [#3885](https://github.com/VisActor/VChart/issues/3885) - -**📖 Site / documentation update** - -- **@visactor/vchart**: supply interface of docs. fix [#3877](https://github.com/VisActor/VChart/issues/3877) - - - -[more detail about v1.13.9](https://github.com/VisActor/VChart/releases/tag/v1.13.9) - -# v1.13.8 - -2025-03-31 - - -**🆕 New feature** - -- **@visactor/vchart**: add `alwayCalculateTotal` for total label -- **@visactor/vchart**: add options `onlyFull` to lockStatisticsByDomain - -**🐛 Bug fix** - -- **@visactor/vchart**: fix the issue where the bar chart grow animation does not work correctly when the axis `zero: false`, [#3808](https://github.com/VisActor/VChart/issues/3808) -- **@visactor/vchart**: crosshair should hide when label is invalid -- **@visactor/vchart**: crosshair should hide when datazoom change -- **@visactor/vchart**: fix the bubble level issue prevented by event.prevent, [#3728](https://github.com/VisActor/VChart/issues/3728) -- **@visactor/vchart**: fix error when load gauge chart on demand, [#3836](https://github.com/VisActor/VChart/issues/3836) -- **@visactor/vchart**: `legends.title.visible` should change visiblity of title in legend, fix [#3846](https://github.com/VisActor/VChart/issues/3846) -- **@visactor/vchart**: fix the issue of pictogram svg path has not been drawn -- **react-vchart**: children of tooltip should not be set to spec -- **@visactor/vchart**: data.fields can set domain of field -- **@visactor/vchart**: fix bug of zoomable in mobile device which only use pointer event -- **@visactor/vchart**: fix datazoom drag and zoom triggered at the same time, fix [#3819](https://github.com/VisActor/VChart/issues/3819) - - - -[more detail about v1.13.8](https://github.com/VisActor/VChart/releases/tag/v1.13.8) - -# v1.13.7 - -2025-03-14 - - -**🆕 New feature** - -- **@visactor/vchart**: support `position` config in totalLabel, [#3396](https://github.com/VisActor/VChart/issues/3396) - -**🐛 Bug fix** - -- **@visactor/vchart**: vchart should not merge original options, fix [#3798](https://github.com/VisActor/VChart/issues/3798) -- **react-vchart**: lifecycle event callback should be fired, fix [#3792](https://github.com/VisActor/VChart/issues/3792) -- **@visactor/vchart**: react-vchart should export `WaterfallChart`, fix [#3791](https://github.com/VisActor/VChart/issues/3791) -- **@visactor/vchart**: fix fontFamily of richtext, fix [#3768](https://github.com/VisActor/VChart/issues/3768) -- **@visactor/vchart**: fix issue with wx get context - -**🔧 Configuration releated** - -- **@visactor/vchart**: add util to export - - - -[more detail about v1.13.7](https://github.com/VisActor/VChart/releases/tag/v1.13.7) - -# v1.13.6 - -2025-03-03 - - -**🆕 New feature** - -- **@visactor/vchart**: optimize the display effect of waterfall chart lieaderLine -- **@visactor/vchart**: add `transformRatioText` config for transformRatio text content in funnel tooltip, [#3704](https://github.com/VisActor/VChart/issues/3704) - -**🐛 Bug fix** - -- **@visactor/vchart**: display line label normally when seriesField is missing, [#3709](https://github.com/VisActor/VChart/issues/3709) -- **@visactor/vchart**: customMark should return components in `getVRenderComponents()`, fix [#3727](https://github.com/VisActor/VChart/issues/3727) -- **@visactor/vchart**: map zoom error bug. fix[#3743](https://github.com/VisActor/VChart/issues/3743) - -**🔖 other** - -- **@visactor/vchart**: 'feat: support `clamp` in linear scales, [#3738](https://github.com/VisActor/VChart/issues/3738)' - - - -[more detail about v1.13.6](https://github.com/VisActor/VChart/releases/tag/v1.13.6) - -# v1.13.5 - -2025-02-14 - - -**🆕 New feature** - -- **@visactor/vchart**: add params of startvalue and endvalue in brushend event -- **@visactor/vchart**: label support triggering mark tooltip, [#3634](https://github.com/VisActor/VChart/issues/3634) -- **@visactor/vchart**: export getCartesianDimensionInfo and getPolarDimensionInfo, fix [#3668](https://github.com/VisActor/VChart/issues/3668) -- **@visactor/vchart**: support stackInverse for waterfall chart - -**🐛 Bug fix** - -- **@visactor/vchart**: incorrect update animation of funnel transform mark, [#3685](https://github.com/VisActor/VChart/issues/3685) -- **@visactor/vchart**: fix the issue where the upper mark in stacked area overlaps the border of lower mark, [#3684](https://github.com/VisActor/VChart/issues/3684) -- **@visactor/vchart**: fix cache of crosshair value when hide crosshair, fix [#3686](https://github.com/VisActor/VChart/issues/3686) -- **@visactor/vchart**: allow dispatch roam zoom in datazoom component. fix[#3714](https://github.com/VisActor/VChart/issues/3714) -- **@visactor/vchart**: datazoom and scrollbar realtime not work. fix[#3716](https://github.com/VisActor/VChart/issues/3716) -- **@visactor/vchart**: fix the issue of tickAlign accuracy -- **@visactor/vchart**: indicator should show when switch `visible`, fix [#3675](https://github.com/VisActor/VChart/issues/3675) -- **@visactor/vchart**: circular progress should support morphing -- **@visactor/vchart**: tooltip should not handle mousemove or mouseout when enter tooltip, fix [#3708](https://github.com/VisActor/VChart/issues/3708) -- **@visactor/vchart**: tooltip should auto wrap when `maxWidth` is valid and `multiLine` is not false, fix [#3718](https://github.com/VisActor/VChart/issues/3718) -- **@visactor/vchart**: fix the type definition of text mark - -**🔨 Refactor** - -- **@visactor/vchart**: optimize performance of pictogram - -**📖 Site / documentation update** - -- **@visactor/vchart**: update options of poptip, close [#3139](https://github.com/VisActor/VChart/issues/3139) - - - -[more detail about v1.13.5](https://github.com/VisActor/VChart/releases/tag/v1.13.5) - -# v1.13.4 - -2025-01-17 - - -**🆕 New feature** - -- **@visactor/vchart**: add wordCloudConfig in _wordCloudTransformOption() - -**🐛 Bug fix** - -- **@visactor/vchart**: fix error of tooltip about `showDelay`, fix [#3663](https://github.com/VisActor/VChart/issues/3663) -- **@visactor/vchart**: fix offset of tooltip, fix [#3666](https://github.com/VisActor/VChart/issues/3666) -- **@visactor/vchart**: fix bug of parse lineHeight of tooltip row, fix [#3643](https://github.com/VisActor/VChart/issues/3643) -- **@visactor/vchart**: axis break's scope calculate error, fix[#3656](https://github.com/VisActor/VChart/issues/3656) -- **@visactor/vchart**: fix the issue where map drag interaction cannot be terminated outside the canvas, [#3650](https://github.com/VisActor/VChart/issues/3650) -- **@visactor/vchart**: fix the issue where map drag interaction cannot be terminated outside the canvas. - - - -[more detail about v1.13.4](https://github.com/VisActor/VChart/releases/tag/v1.13.4) - -# v1.13.3 - -2025-01-08 - - -**🆕 New feature** - -- **@visactor/vchart**: add datum to params on axis-label event -- **@visactor/vchart**: wrap some hook in vgrammar - -**🐛 Bug fix** - -- **@visactor/vchart**: fix the issue of incorrect label display in 3D charts, [#3584](https://github.com/VisActor/VChart/issues/3584) -- **@visactor/vchart**: fix the issue of animation in 3d wordcloud not work -- **@visactor/vchart**: brush data will be undefined when mark is hovered. fix[#3623](https://github.com/VisActor/VChart/issues/3623) -- **@visactor/vchart**: fix style of dom tooltip when tooltip has customized child, fix [#3615](https://github.com/VisActor/VChart/issues/3615) -- **@visactor/vchart**: fix error update of dom tooltip when update theme, fix [#3619](https://github.com/VisActor/VChart/issues/3619) -- **@visactor/vchart**: fix position of html tooltip when confine is false, fix [#3632](https://github.com/VisActor/VChart/issues/3632) -- **@visactor/vchart**: fix the typographical error of dataset tutorial -- **@visactor/vchart**: compilier should add dpr to vrender -- **@visactor/vchart**: fix invisible region blocking mark events, [#3638](https://github.com/VisActor/VChart/issues/3638) -- **@visactor/vchart**: undefined points shoulde not show when dimension hover, fix [#3610](https://github.com/VisActor/VChart/issues/3610) -- **@visactor/vchart**: fix layout error of title component, fix [#3614](https://github.com/VisActor/VChart/issues/3614) - - - -[more detail about v1.13.3](https://github.com/VisActor/VChart/releases/tag/v1.13.3) - -# v1.13.2 - -2024-12-24 - - -**🆕 New feature** - -- **@visactor/vchart**: add miss Series and Chart in react vchart, close [#3578](https://github.com/VisActor/VChart/issues/3578) -- **@visactor/vchart**: vchart support clickInterval params - -**🐛 Bug fix** - -- **@visactor/vchart**: support percentage state radius config in gauge segment mark, [#3459](https://github.com/VisActor/VChart/issues/3459) -- **@visactor/vchart**: media query should not throw error when has empty axis, related to [#3575](https://github.com/VisActor/VChart/issues/3575) -- **@visactor/vchart**: tooltip should not render empty column when `hasShape` of tooltip is `false`, related to [#3572](https://github.com/VisActor/VChart/issues/3572) -- **@visactor/vchart**: `othersLine` of tooltip can be hidden by `visible: false`, related to [#3572](https://github.com/VisActor/VChart/issues/3572) -- **@visactor/vchart**: fix position of tooltip, related to [#3590](https://github.com/VisActor/VChart/issues/3590) -- **@visactor/vchart**: page should not crash when `tickStep` is too small, fix [#3591](https://github.com/VisActor/VChart/issues/3591) -- **@visactor/vchart**: fix updating of customized DOM when has interactive layer, fix [#3587](https://github.com/VisActor/VChart/issues/3587) -- **@visactor/vchart**: fix axis breaks when set `tickStep`, fix [#3560](https://github.com/VisActor/VChart/issues/3560) - - - -[more detail about v1.13.2](https://github.com/VisActor/VChart/releases/tag/v1.13.2) - -# v1.13.1 - -2024-12-17 - - -**🆕 New feature** - -- **@visactor/vchart**: add config `customFilter` to legend, support cutomized filter function, close [#3492](https://github.com/VisActor/VChart/issues/3492) -- **@visactor/vchart**: Area chart supports setting labels in the middle `'inside-middle'`, close [#3353](https://github.com/VisActor/VChart/issues/3353) - -**🐛 Bug fix** - -- **@visactor/vchart**: fix break of waterfall, fix [#3544](https://github.com/VisActor/VChart/issues/3544) -- **@visactor/vchart**: fix the bug of updateModelSpecSync can not set axis.tick.forceTickCount -- **@visactor/vchart**: fix filter of lock domain when field is array, related [#3469](https://github.com/VisActor/VChart/issues/3469) -- **@visactor/vchart**: fix size of datazoom when update, fix [#3521](https://github.com/VisActor/VChart/issues/3521) -- **@visactor/vchart**: html tooltip can reuse the dom content and fix the unneed animation -- **@visactor/vchart**: fix update of extensionMark when mark has `name`, fix [#3547](https://github.com/VisActor/VChart/issues/3547) -- **@visactor/vchart**: fix indicator when change visible to be false, fix [#3506](https://github.com/VisActor/VChart/issues/3506) -- **@visactor/vchart**: fix tooltip content when only has `valueFormatter` or `keyFormatter` -- **@visactor/vchart**: fix style of dom tooltip -- **vchart-extension**: series-break should keep align width axis break, related to [#3560](https://github.com/VisActor/VChart/issues/3560) -- **@visactor/vchart**: breaks should consider the `min` and `max` of axis, related to [#3560](https://github.com/VisActor/VChart/issues/3560) - - - -[more detail about v1.13.1](https://github.com/VisActor/VChart/releases/tag/v1.13.1) - -# v1.13.0 - -2024-12-06 - - -**🆕 New feature** - -- **@visactor/vchart**: add pictogram chart -- **@visactor/vchart**: support auto generated scrollbar in sankey, close [#2838](https://github.com/VisActor/VChart/issues/2838) -- **@visactor/vchart**: react vchart support event filter, close [#3461](https://github.com/VisActor/VChart/issues/3461) -- **@visactor/vchart**: tooltip key/content support config by field, close [#2576](https://github.com/VisActor/VChart/issues/2576) -- **@visactor/vchart**: support max height of tooltip, by percent value , close [#2675](https://github.com/VisActor/VChart/issues/2675) - - -**🐛 Refactor** - - -- **@visactor/vchart**: [Break Change] refactor the implement of html tooltip, fix [#3137](https://github.com/VisActor/VChart/issues/3137), close [#2924](https://github.com/VisActor/VChart/issues/2924), close [#2591](https://github.com/VisActor/VChart/issues/2591) -- **@visactor/vchart**: [Break Change] support label overlap for inside arc labels by default - - -**⚡ Performance optimization** - - -- **@visactor/vchart**: [Break Change] vrender optimize the bounds of text, which will change the display of all text - - - -[more detail about v1.13.0](https://github.com/VisActor/VChart/releases/tag/v1.13.0) - -# v1.12.15 - -2024-12-05 - - -**🆕 New feature** - -- **@visactor/vchart**: support `restorePosition` in position/bound label overlap strategy - -**🐛 Bug fix** - -- **@visactor/vchart**: optimize `shiftY` of label - - - -[more detail about v1.12.15](https://github.com/VisActor/VChart/releases/tag/v1.12.15) - -# v1.12.14 - -2024-12-05 - - -**🆕 New feature** - -- **@visactor/vchart**: support `autoRefreshDpr` in chart options -- **@visactor/vchart**: dataZoom can do filter when has `lockStatisticsByDomain`, close [#3469](https://github.com/VisActor/VChart/issues/3469) -- **@visactor/vchart**: add marker context to support the same color as series. close[#3437](https://github.com/VisActor/VChart/issues/3437) -- **@visactor/vchart**: update options `maxNodeHeight`, `maxLinkHeight` in sankey, close 3439 -- **@visactor/vchart-extension**: add component `series-break`, close [#3450](https://github.com/VisActor/VChart/issues/3450) - -**🐛 Bug fix** - -- **@visactor/vchart**: upgrade scrollbar visible after layout. fix[#3452](https://github.com/VisActor/VChart/issues/3452) -- **@visactor/vchart**: fix `adjacency` in sankey, fix [#3460](https://github.com/VisActor/VChart/issues/3460) -- **@visactor/vchart**: not update layout when scrollbar domain is the same as before. fix[#3452](https://github.com/VisActor/VChart/issues/3452) -- **@visactor/vchart**: value in scale range should consider about whole range. fix[#3446](https://github.com/VisActor/VChart/issues/3446) -- **@visactor/vchart**: when the `invalidType` of line is `"link"`, line should be connected rightly. fix [#3436](https://github.com/VisActor/VChart/issues/3436), fix [#3238](https://github.com/VisActor/VChart/issues/3238) -- **@visactor/vchart**: richtext should work when set state, fix [#3465](https://github.com/VisActor/VChart/issues/3465) - - - -[more detail about v1.12.14](https://github.com/VisActor/VChart/releases/tag/v1.12.14) - -# v1.12.13 - -2024-11-22 - - -**🐛 Bug fix** - -- **@visactor/vchart**: fix `groupKey` of boxplot series, fix [#3409](https://github.com/VisActor/VChart/issues/3409), related to [#2855](https://github.com/VisActor/VChart/issues/2855) -- **@visactor/vchart**: fix the issue where the length of the outerlabel line is incorrect when richtext, fix [#3441](https://github.com/VisActor/VChart/issues/3441) - - - -[more detail about v1.12.13](https://github.com/VisActor/VChart/releases/tag/v1.12.13) - -# v1.12.12 - -2024-11-18 - - -**🐛 Bug fix** - -- **@visactor/vchart**: fix: fix the issue where modifying area.visible through updateSpec does not take effect, related [#3393](https://github.com/VisActor/VChart/issues/3393) -- **@visactor/vchart**: fix incorrect rendering when changing `direction` via updateSpec in area chart, related [#3406](https://github.com/VisActor/VChart/issues/3406) -- **@visactor/vchart**: fix zIndex of background image, fix [#3403](https://github.com/VisActor/VChart/issues/3403) -- **@visactor/vchart**: fix error of tooltip when chart is released, fix [#3428](https://github.com/VisActor/VChart/issues/3428) - -**⚡ Performance optimization** - -- **@visactor/vchart**: optimize the effect of break data - - - -[more detail about v1.12.12](https://github.com/VisActor/VChart/releases/tag/v1.12.12) - -# v1.12.11 - -2024-11-13 - - -**🆕 New feature** - -- **@visactor/vchart**: support axis sync to the axis that has breaks -- **@visactor/vchart**: tooltip can support customized `trigger` and `triggerOff` - -**🐛 Bug fix** - -- **@visactor/vchart**: fix the issue where the axis breaks render incorrectly in some cases -- **@visactor/vchart**: fix `zIndex` of series, fix [#3395](https://github.com/VisActor/VChart/issues/3395) -- **@visactor/vchart**: fix layout of title when orient is "left" or "right", fix [#3401](https://github.com/VisActor/VChart/issues/3401) -- **@visactor/vchart**: fix the issue of custom svg string in tooltip shape, related [#3384](https://github.com/VisActor/VChart/issues/3384) -- **@visactor/vchart**: tooltip `enterable` should work when update, fix [#3405](https://github.com/VisActor/VChart/issues/3405) -- **@visactor/vchart**: fix tooltip position by `mode: pointer`, close [#3367](https://github.com/VisActor/VChart/issues/3367) -- **@visactor/vchart**: wordcloud should not throw error when `word.visible` is `false`, fix [#3378](https://github.com/VisActor/VChart/issues/3378) -- **@visactor/vchart**: fix the issue where the scrolling legend triggers map zooming under certain conditions, related [#3391](https://github.com/VisActor/VChart/issues/3391) - - - -[more detail about v1.12.11](https://github.com/VisActor/VChart/releases/tag/v1.12.11) - -# v1.12.10 - -2024-10-31 - -**🆕 New feature** - -- **@visactor/vchart**: pie series support center of percent string - -**🐛 Bug fix** - -- **@visactor/vchart**: scroll not dispatch view update when axis is not display. fix[#3278](https://github.com/VisActor/VChart/issues/3278) -- **@visactor/vchart**: changes to `roam` via updateSpec do not take effect -- **@visactor/vchart**: fix the issue of symbolActiveMark visible setting -- **@visactor/vchart**: fix issue with chart background in harmony -- **@visactor/vchart**: fix event of angle axis in radarchart, fix [#3343](https://github.com/VisActor/VChart/issues/3343) -- **@visactor/vchart**: type issue of title theme -- **@visactor/vchart**: fix the issue of incorrect display of legend scrollbar in boundary scenarios - -**🔨 Refactor** - -- **@visactor/vchart**: optimize setter and getter about markConfig -- **@visactor/vchart**: Optimize the issue of excessive omission of head and tail labels when axis labels are rotated in Cartesian coordinate systems. -- **@visactor/vchart**: Optimize the automatic line wrapping effect of axis labels in Cartesian coordinate systems. - -[more detail about v1.12.10](https://github.com/VisActor/VChart/releases/tag/v1.12.10) - -# v1.12.9 - -2024-10-25 - - -**🆕 New feature** - -- **@visactor/vchart**: support tooltip for overlapped points, close [#3224](https://github.com/VisActor/VChart/issues/3224) - -**🐛 Bug fix** - -- **@visactor/vchart**: fixed the issue where map labels do not scale accordingly after updateSpec. -- **@visactor/vchart**: all the SeriesData should call `compileData()`, fix [#3322](https://github.com/VisActor/VChart/issues/3322) -- **@visactor/vchart**: clear throttle timer when out, fix [#3326](https://github.com/VisActor/VChart/issues/3326) -- **@visactor/vchart**: fix `tooltipHide` event when handler is empty -- **@visactor/vchart**: tooltip data should has `datum` in each line -- **@visactor/vchart**: Fixed the issue of label component misalignment in specific situations -- **@visactor/vchart**: Fixed the issue of partial blank areas in charts during resizing when dpr is not an integer, fix [#3255](https://github.com/VisActor/VChart/issues/3355) - - -[more detail about v1.12.9](https://github.com/VisActor/VChart/releases/tag/v1.12.9) - -# v1.12.8 - -2024-10-15 - - -**🆕 New feature** - -- **@visactor/vchart**: support `firstVisible` of axis label, close [#3200](https://github.com/VisActor/VChart/issues/3200) -- **@visactor/vchart**: support `roam.blank` to enable dragging from blank area of region in map chart -- **@visactor/vchart**: optimize data empty condition - **@visactor/vchart**: Label component text style supports `wordBreak: "keep-all"` - -**🐛 Bug fix** - -- **@visactor/vchart**: chart should `remake` when visible of axis change, fix [#3287](https://github.com/VisActor/VChart/issues/3287) -- **@visactor/vchart**: fix visible change of label, fix [#3277](https://github.com/VisActor/VChart/issues/3277) -- **@visactor/vchart**: custom theme by chartType cannot work in initial options, [#3285](https://github.com/VisActor/VChart/issues/3285) -- **@visactor/vchart**: fix issue of `html` and `dom` not work correctly in label -- **@visactor/vchart**: axis line on zero should consider the bindAxis's inverse, fixed[#3306](https://github.com/VisActor/VChart/issues/3306) -- **react-vchart**: register labels by default in circlePacking, sankey, sunburst, treemap, venn, fix [#3148](https://github.com/VisActor/VChart/issues/3148) -- **@visactor/vchart**: Fix the issue where `item.label.space` and `pager.space` are not effective in discrete legends - -**🔨 Refactor** - -- **@visactor/vchart**: refactor implement of `enterable` in tooltip component - - -[more detail about v1.12.8](https://github.com/VisActor/VChart/releases/tag/v1.12.8) - -# v1.12.7 - -2024-09-29 - - -**🆕 New feature** - -- **@visactor/vchart**: feat: support `minLength` in funnel outerlabel line -- **react-vchart**: support `morphConfig` of react-vchart, close [#3219](https://github.com/VisActor/VChart/issues/3219) - -**🐛 Bug fix** - -- **@visactor/vchart**: fix error of `updateSpec` when data changed, fix [#3261](https://github.com/VisActor/VChart/issues/3261) -- **@visactor/vchart**: color of linear progress track in dark mode -- **@visactor/vchart**: datazoom state field and value field is incomplete problem. fix[#3199](https://github.com/VisActor/VChart/issues/3199) -- **@visactor/vchart**: fix title of axis when the bounds is empty, fix [#3265](https://github.com/VisActor/VChart/issues/3265) -- **@visactor/vchart**: fix media-query when `updateSpec` -- **@visactor/vchart**: fix updateSpec when add attributes `width`, `height` to `spec` - - - -[more detail about v1.12.7](https://github.com/VisActor/VChart/releases/tag/v1.12.7) - -# v1.12.6 - -2024-09-23 - -**🆕 New Features** - -- **@visactor/vchart**: Added lifecycle hooks, `afterCreateVChart`, `beforeInitializeChart`, `afterInitializeChart` -- **@visactor/vchart**: Polar coordinate angle axis supports configurations like `autoLimit`, `autoWrap`, `autoHide`, etc. - -**🐛 Bug Fixes** - -- **@visactor/vchart**: Allow adding `indicator` components in polar charts -- **@visactor/vchart**: Fix the default value issue of `position` in the `label` component, fix [#3242](https://github.com/VisActor/VChart/issues/3242) -- **@visactor/vchart**: Fix type error, change `type` in `PointerMarkSpec` to an optional type, fix [#3227](https://github.com/VisActor/VChart/issues/3227) -- **@visactor/vchart**: Use `throttle` for throttling when triggering `resize` -- **@visactor/vchart**: Fix the chart update type to be `reCompile` instead of `remake` when updating `label` configurations -- **@visactor/vchart**: Fix the issue where `customMark` does not support `markName` event filters -- **@visactor/vchart**: Fix the issue of incorrect animation triggering during radar chart updates, fix [#3228](https://github.com/VisActor/VChart/issues/3228) - -[more detail about v1.12.6](https://github.com/VisActor/VChart/releases/tag/v1.12.6) - -# v1.12.5 - -2024-09-23 - -**🆕 New Features** - -- **@visactor/vchart**: extension mark and customized mark support `markName` event filter - -**🐛 Bug Fixes** - -- **@visactor/vchart**: optimize first axis label autolimit effect of cartesian chart -- **@visactor/vchart**: `animationUpdate` should also control labels animation -- **@visactor/vchart**: fix default value of circular-progress, fix [#2683](https://github.com/VisActor/VChart/issues/2683) -- **@visactor/vchart**: fix display of radar-chart when has negative radius -- **@visactor/vchart**: `word.style.fontWeight` should change the style of text in wordcloud, fix [#3212](https://github.com/VisActor/VChart/issues/3212) - -**🔨 Refactor** - -- **@visactor/vchart**: simplify `getSpecInfo` - -[more detail about v1.12.5](https://github.com/VisActor/VChart/releases/tag/v1.12.5) - - -# v1.12.4 - -2024-09-09 - - -**🆕 New feature** - -- **@visactor/vchart**: support axis break -- **@visactor/vchart**: stackCornerRadius support callback. feat[#3164](https://github.com/VisActor/VChart/issues/3164) -- **@visactor/vchart**: add `crossNodeAlign` to sankey - -**🐛 Bug fix** - -- **@visactor/vchart**: bind first axis to series but not last. fix[#3139](https://github.com/VisActor/VChart/issues/3139) -- **@visactor/vchart**: crosshair won't update when switch theme -- **@visactor/vchart**: wordcloud text overlap. fix[#3177](https://github.com/VisActor/VChart/issues/3177) -- **@visactor/vchart**: fix zIndex of label in pie-chart - -**🔧 Configuration releated** - -- **@visactor/vchart**: clear state when updateSpec. fix[#3162](https://github.com/VisActor/VChart/issues/3162) - - - -[more detail about v1.12.4](https://github.com/VisActor/VChart/releases/tag/v1.12.4) - -# v1.12.3 - -2024-09-05 - - -**🐛 Bug fix** - -- **@visactor/vchart**: cannot disable label update animation by `option.animation:false` - - - -[more detail about v1.12.3](https://github.com/VisActor/VChart/releases/tag/v1.12.3) - -# v1.12.2 - -2024-09-05 - - -**🆕 New feature** - -- **brush**: add config to control zoom when brush empty data. close[#2934](https://github.com/VisActor/VChart/issues/2934) -- **@visactor/vchart**: support 'inside-center' label position in pie chart - -**🐛 Bug fix** - -- **@visactor/vchart**: rangeMode of scrollbar not work. fix[#3147](https://github.com/VisActor/VChart/issues/3147) -- **@visactor/vchart**: fix error of `barWidth`, `barMinWidth`, `barMaxWidth` when value is null -- **@visactor/vchart**: x brush filter not work. fix[#3111](https://github.com/VisActor/VChart/issues/3111) -- **@visactor/vchart**: indicator stop tooltip interactive. fix[#3123](https://github.com/VisActor/VChart/issues/3123) -- **@visactor/vchart**: fix error of `getCenter` when layoutRadius is a customized function in radar -- **@visactor/vchart**: media query causes incorrect render result, [#3102](https://github.com/VisActor/VChart/issues/3102) -- **@visactor/vchart**: normal animation not work since v1.12.0 -- **@visactor/vchart**: sankey scale update not work -- **@visactor/vchart**: fix error of sankey when some customized mark has name "node" -- **@visactor/vchart**: fix dimension value of tooltip when has innerOffset, fix [#2923](https://github.com/VisActor/VChart/issues/2923) -- **@visactor/vchart**: vchart should not throw error when the values of series data is empty, fix [#3082](https://github.com/VisActor/VChart/issues/3082) -- **@visactor/vchart**: fix error of `updateSpec` when array change -- **@visactor/vchart**: wordcloud fill not update after updateSpec. fix[#3122](https://github.com/VisActor/VChart/issues/3122) -- **@visactor/vchart**: wordcloud scale update not work. fix[#3129](https://github.com/VisActor/VChart/issues/3129) - -**🔨 Refactor** - -- **@visactor/vchart**: refactor the parser of tooltip pattern - -**📖 Site / documentation update** - -- **@visactor/vchart**: fix issue of treemap.label not shown in option pages, fix [#2562](https://github.com/VisActor/VChart/issues/2562) -- **@visactor/vchart**: update docs about circular progress, close [#2987](https://github.com/VisActor/VChart/issues/2987) - - - -[more detail about v1.12.2](https://github.com/VisActor/VChart/releases/tag/v1.12.2) - -# v1.12.1 - -2024-08-21 - - -**🐛 Bug fix** - -- **@visactor/vchart**: x brush filter not work. fix [#3111](https://github.com/VisActor/VChart/issues/3111) -- **@visactor/vchart**: fix error of `getCenter` when layoutRadius is a customized function in radar -- **@visactor/vchart**: media query causes incorrect render result, [#3102](https://github.com/VisActor/VChart/issues/3102) -- **@visactor/vchart**: vchart should not throw error when the values of series data is empty, fix [#3082](https://github.com/VisActor/VChart/issues/3082) - - - -[more detail about v1.12.1](https://github.com/VisActor/VChart/releases/tag/v1.12.1) - -# v1.12.0 - -2024-08-16 - - -**🆕 New feature** - - - **@visactor/vchart**: marker's `coordinates` and `positions` property support callback - - **@visactor/vchart**: support `animationState` config - - **@visactor/vchart**: show evenly divided pie chart with `showAllZero` - - **@visactor/vchart**: enable `supportNegative` option to treat negative values as absolute values - - **@visactor/vchart**: support theme config by chart type - - **@visactor/vchart**: support text shape of word-cloud - - **@visactor/vchart**: add new chart mosaic chart - - **@visactor/vchart**: support customized tick function of linear axis - - **@visactor/vchart**: add emptyPlaceholder and emptyCircle for pie chart - - ## 🐛 fix - - **@visactor/vchart**: y-axis is reverted after brush zoomin. fix [#3089](https://github.com/VisActor/VChart/issues/3089) - - **@visactor/vchart**: mark-point position type error fix - ## 🔨 refactor - - **@visactor/vchart**: refactor the graphics in linear-progress chart - - **@visactor/vchart**: use label component to refactor sankey label - - **@visactor/vchart**: stack can be required by need - ## 🔖 other - - **@visactor/vchart**: sequence support bottom axes. fix [#2927](https://github.com/VisActor/VChart/issues/2927) - - - -[more detail about v1.12.0](https://github.com/VisActor/VChart/releases/tag/v1.12.0) - -# v1.11.12 - -2024-08-15 - - -**🆕 New feature** - -- **@visactor/vchart**: support `layoutRadius` of pie - -**🐛 Bug fix** - -- **@visactor/vchart**: fix params of tickCount in linear-axis-mixin, fix [#3053](https://github.com/VisActor/VChart/issues/3053) -- **@visactor/vchart**: fix `padding` of region not work -- **@visactor/vchart**: brush error after legend filter. fix[#3061](https://github.com/VisActor/VChart/issues/3061) -- **@visactor/vchart**: fix funnel chart color bug with different category and series fields -- **@visactor/vchart**: fix issue with harmony event -- **@visactor/vchart**: fix type error of react vchart, fix [#3065](https://github.com/VisActor/VChart/issues/3065) -- **@visactor/vchart**: tooltip should show when chart has multiple regions -- **@visactor/vchart**: fix the issue background of chart not updated, fix [#3054](https://github.com/VisActor/VChart/issues/3054) -- **@visactor/vchart**: fix the update of `startAngle` and `endAngle` in pie chart, fix [#3059](https://github.com/VisActor/VChart/issues/3059) -- **@visactor/vchart**: fix switch `visible` of legend, fix [#3060](https://github.com/VisActor/VChart/issues/3060) - - - -[more detail about v1.11.12](https://github.com/VisActor/VChart/releases/tag/v1.11.12) - -# v1.11.11 - -2024-08-06 - - -**🆕 New feature** - -- **@visactor/vchart**: label line support custom path. close[#3000](https://github.com/VisActor/VChart/issues/3000) -- **@visactor/vchart**: upgrade vrender to 0.19.20, to support `catmullRom` and `catmullRomClosed` curveType, related [#2610](https://github.com/VisActor/VChart/issues/2610) - -**🐛 Bug fix** - -- **@visactor/vchart**: fix crosshair of histogram, fix [#2826](https://github.com/VisActor/VChart/issues/2826) -- **@visactor/vchart**: use `vglobal.getElementById` to replace `document.getElementById` -- **@visactor/vchart**: liquid gradient not work after reverse -- **@visactor/vchart**: add group mark to fix gradient color bug of liquid and add rect shape to fix rect symbol padding bug -- **@visactor/vchart**: fix `lockAfterClick` of tooltip, related [#1574](https://github.com/VisActor/VChart/issues/1574) -- **@visactor/vchart**: prevent trigger original event in panEnd composite event [#2931](https://github.com/VisActor/VChart/issues/2931) -- **@visactor/vchart**: charts should not stack when only specify `stackValue` but `stack` is false, fix [#3005](https://github.com/VisActor/VChart/issues/3005) -- **@visactor/vchart**: `updateData` incorrect with datazoom, related [#3041](https://github.com/VisActor/VChart/issues/3041) -- **@visactor/vchart**: fix issue of `updateSpec` when visible of grid in axis change, fix [#3004](https://github.com/VisActor/VChart/issues/3004) -- **@visactor/vchart**: fix fontFamily when update theme, fix [#3028](https://github.com/VisActor/VChart/issues/3028) - -**🔖 other** - -- **@visactor/vchart**: fix:curveType `monotone` in seriesStyle not work - - - -[more detail about v1.11.11](https://github.com/VisActor/VChart/releases/tag/v1.11.11) - -# v1.11.10 - -2024-07-24 - - -**🆕 New feature** - -- **@visactor/vchart**: liquid support reverse and target mark. close [#2977](https://github.com/VisActor/VChart/issues/2977) & close [#2978](https://github.com/VisActor/VChart/issues/2978) -- **@visactor/vchart**: add `totalScale` params in geo zoom event -- **@visactor/vchart**: support `geoZoomByIndex`/`geoZoomById` API, close [#2925](https://github.com/VisActor/VChart/issues/2925) -- **@visactor/vchart**: marker label background support custom path. close [#2959](https://github.com/VisActor/VChart/issues/2959) - -**🐛 Bug fix** - -- **@visactor/vchart**: prevent issue with ios bug while pointEvent is configed -- **@visactor/vchart**: liquid gradient not work after reverse -- **@visactor/vchart**: prevent trigger original event in zoomEnd composite event [#2931](https://github.com/VisActor/VChart/issues/2931) -- **@visactor/vchart**: fix error of setDimentionIndex when dimension axis is linear - -**🔧 Configuration releated** - -- **@visactor/vchart**: update rollup.config.js to fix es5/index.js, fix [#2971](https://github.com/VisActor/VChart/issues/2971) - - - -[more detail about v1.11.10](https://github.com/VisActor/VChart/releases/tag/v1.11.10) - -# v1.11.9 - -2024-07-17 - - -**🆕 New feature** - - -* @visactor/vchart: tooltip theme support transition duration - - -**🐛 Bug fix** - - -* @visactor/vchart: fix statistics confict of linear and discrete field, close [#2926](https://github.com/VisActor/VChart/issues/2926) -* @visactor/vchart: fix theme error of update spec -* @visactor/vchart: fix update of label when udpate spec -* @visactor/vchart: fix bug of polar point update aniamtion -* @visactor/vchart: react attributes should support react 17 -* @visactor/vchart: fix height of link when set `minNodeHeight` of sankey - - - -[more detail about v1.11.9](https://github.com/VisActor/VChart/releases/tag/v1.11.9) - -# v1.11.7 - -2024-07-06 - - -**🆕 New feature** -# v1.11.7 - -2024-07-06 - - -**🆕 New feature** - -- **@visactor/vchart**: support configuring callback function in indicator text style attributes, [#2540](https://github.com/VisActor/VChart/issues/2540) -- **@visactor/vchart**: add options `hideTimer` in toolti, to hide tooltip by timer -- **@visactor/vchart**: support `updateIndicatorDataById`/`updateIndicatorDataByIndex` API, related [#2776](https://github.com/VisActor/VChart/issues/2776) -- **@visactor/vchart**: add `userUpdateOptions` to let user specify update type of charts, fix some animation bug - -**🐛 Bug fix** - -- **barbackground**: datakey is undefined when set custom datakey fix [#2908](https://github.com/VisActor/VChart/issues/2908) -- **@visactor/vchart**: fix the issue where `barMaxWidth` does not work when `barWidth` is configured, [#2885](https://github.com/VisActor/VChart/issues/2885)` -- **@visactor/vchart**: line/area clip animation by incorrect direction -- **crosshair**: fix bug of crosshair position when legend filter data. fix [#2905](https://github.com/VisActor/VChart/issues/2905) -- **@visactor/vchart**: fix polar animation logic for radar charts -- **@visactor/vchart**: type define fix - -[more detail about v1.11.7](https://github.com/VisActor/VChart/releases/tag/v1.11.7) - -# v1.11.6 - -2024-06-27 - - -**🐛 功能修复** - -- **@visactor/vchart**: 修复图表背景不支持渐变色配置的问题 -- **animation**: 修复玫瑰图重复更新，动画bug，关闭[#2856](https://github.com/VisActor/VChart/issues/2856) -- **@visactor/vchart**:修复类型定义 `ITooltipTheme`, 关闭 [#2850](https://github.com/VisActor/VChart/issues/2850) -- **@visactor/vchart**: 修复`updateSpec`时，更新动画没有触发的问题 [#2835](https://github.com/VisActor/VChart/issues/2835) [#2836](https://github.com/VisActor/VChart/issues/2836) - - - -[更多详情请查看 v1.11.6](https://github.com/VisActor/VChart/releases/tag/v1.11.6) - -# v1.11.5 - -2024-06-21 - - -**🆕 New feature** - -- **@visactor/vchart**: add option `style.align` of Tooltip, support RTL tooltip -- - -**🐛 Bug fix** - - - **@visactor/vchart**: optimize discrete legend pager color in dark theme, related [#2654](https://github.com/VisActor/VChart/issues/2654) - - **@visactor/vchart**: fix the issue issue with stacked waterfall charts where positive and negative values were not stacked separately when there were both positive and negative values in the same stack, fix [#2212](https://github.com/VisActor/VChart/issues/2212) - - - - - -[more detail about v1.11.5](https://github.com/VisActor/VChart/releases/tag/v1.11.5) - -# 1.11.4 - -## 🐛 fix - - **@visactor/vchart**: fix bug of `updateSpec` when has `scales`, close #2744 - - **@visactor/vchart**: gauge chart might throw error when the value is close to its maximum, fix #2783 - - **@visactor/vchart**: fix the behavior of the gauge pointer when it exceeds the axis range, fix #2780 - - **@visactor/vchart**: normal animation not work when appear animation is disabled, fix #2807 - - **@visactor/vchart**: upgrade vrender to 0.19.10, vgrammar to 0.13.9 - -# 1.11.3 -## 🆕 feat -@visactor/vchart: add option showBackgroundChart of DataZoom - -## 🐛 fix -@visactor/vchart: bar chart should work normally when x-axis is linear, fix #2758 -@visactor/vchart: fix issue of continuous legend filter in treemap -@visactor/vchart: fixed the issue that the newly added component type could not take effect when updateSpec -@visactor/vchart: fixed setSelected of sankey chart, fix #2757 , fix #2765 - - -# 1.11.2 -- 正式版发布 -- @visactor/vchart: fix the bug that animationThreshold not work, close #2745 -- @visactor/vchart: fix the issue of update animation in area chart is not work -- common: bar series support auto band size in common chart. fix#2704 -- @visactor/vchart: corsshair should hide when pointer out view, fix #2726 -- @visactor/vchart: close animation cause by datazoom/scrollbar -- @visactor/vchart: `type-step` markLine's label should consider the refX/refY/dx/dy set by user, fixed#2739 -- react-vchart: fix the issue of that the props id not work -- @visactor/vchart: polarAxis.grid.smooth not work in theme configuratio - 🔧 chore -- @visactor/vchart: when build es5 , targets of @babel/preset-env should be defaults, fix #2702 - -# 1.11.0-alpha.3 -- 更新README - -# 1.11.0-alpha.2 -- VChart组件支持InitOptions参数 - -# 1.11.0-alpha.1 -- VChart支持HarmonyOS的StageTS架构 - +# v2.0.12 + +2025-12-25 + +**🆕 新增功能** + +- **@visactor/vchart**: 极坐标轴（CircleAxis）支持 `autoLabelMaxWidth` 配置 by @xuefei1313 in https://github.com/VisActor/VChart/pull/4357 +- **@visactor/vchart**: 新增图表消失（Disappear）状态支持 by @xuefei1313 in https://github.com/VisActor/VChart/pull/4341 +- **@visactor/vchart**: 优化热力图（Heatmap）形状渲染逻辑 by @xuefei1313 in https://github.com/VisActor/VChart/pull/4377 +- **@visactor/vchart**: 优化地图（Map）zoom交互，增加 `zoomRate` 配置 by @xuefei1313 in https://github.com/VisActor/VChart/pull/4373 + +**🐛 问题修复** + +- **@visactor/vchart**: 修复坐标轴标题（Axes Title）的布局问题 by @xuefei1313 in https://github.com/VisActor/VChart/pull/4371 + +**Full Changelog**: https://github.com/VisActor/VChart/compare/v2.0.11...v2.0.12 + +[more detail about v2.0.12](https://github.com/VisActor/VChart/releases/tag/v2.0.12) + + +# v2.0.11 + +2025-12-11 + +# v2.0.11 + +2025-12-11 + +**🆕 New Features** + +- **@visactor/vchart**: Support `componentShowContent` in `initOption` by @xuefei1313 in https://github.com/VisActor/VChart/pull/4334 +- **@visactor/vchart**: Support boxplot label by @xile611 in https://github.com/VisActor/VChart/pull/4346 +- **@visactor/vchart**: Export data constant by @xuefei1313 in https://github.com/VisActor/VChart/pull/4339 + +**🐛 Bug Fixes** + +- **@visactor/vchart**: Fix crosshair behavior when having inner offset by @xile611 in https://github.com/VisActor/VChart/pull/4340 +- **@visactor/vchart**: Fix outlier color in boxplot by @xile611 in https://github.com/VisActor/VChart/pull/4347 +- **@visactor/vchart**: Fix boxplot outlier style by @xile611 in https://github.com/VisActor/VChart/pull/4350 + + +**Full Changelog**: https://github.com/VisActor/VChart/compare/v2.0.10...v2.0.11 + +[more detail about v2.0.11](https://github.com/VisActor/VChart/releases/tag/v2.0.11) + +[more detail about v2.0.11](https://github.com/VisActor/VChart/releases/tag/v2.0.11) + +# v2.0.10 + +2025-11-28 + + +**🆕 New Features** + + +* @visactor/vchart: Enhance boxplot features by @xile611 in https://github.com/VisActor/VChart/pull/4323 + + +**🐛 Bug Fixes** + + +* @visactor/vchart: Upgrade vrender dependency to fix rose chart issues by @xuefei1313 in https://github.com/VisActor/VChart/pull/4315 +* @visactor/vchart: Upgrade vrender dependency to fix animation issues by @xuefei1313 in https://github.com/VisActor/VChart/pull/4325 +* @visactor/vchart: Fix extension mark update logic by @xile611 in https://github.com/VisActor/VChart/pull/4318 +* @visactor/vchart: Fix font family setting issue by @xuefei1313 in https://github.com/VisActor/VChart/pull/4324 +* @visactor/vchart: Fix issue with setDimensionIndex by @xuefei1313 in https://github.com/VisActor/VChart/pull/4291 + + +**📖 Documentation** + + +* @visactor/vchart: Add candlestick chart guide by @xuefei1313 in https://github.com/VisActor/VChart/pull/4310 +* @visactor/vchart: Add theme development guide by @xuanhun in https://github.com/VisActor/VChart/pull/4322 +* @visactor/vchart: Add map rewind guide by @xuefei1313 in https://github.com/VisActor/VChart/pull/4326 +* @visactor/vchart: Add 3D registration content to guide by @xuefei1313 in https://github.com/VisActor/VChart/pull/4312 +* @visactor/vchart: Fix documentation for common chart option labelLayout by @xuefei1313 in https://github.com/VisActor/VChart/pull/4316 + +**Full Changelog**: https://github.com/VisActor/VChart/compare/v2.0.9...v2.0.10 + +[more detail about v2.0.10](https://github.com/VisActor/VChart/releases/tag/v2.0.10) + +# v2.0.9 + +2025-11-18 + + +**🆕 New Features** + + +* @visactor/react-vchart: Add export for registerChartResizeZoomPlugin by @xuefei1313 in https://github.com/VisActor/VChart/pull/4286 +* @visactor/vchart: Support effect animation by @purpose233 in https://github.com/VisActor/VChart/pull/4299 +* @visactor/vchart: Enhance datazoom and fix bugs by @skie1997 in https://github.com/VisActor/VChart/pull/4065 + + +**🐛 Bug Fixes** + + +* @visactor/vchart-extension: Fix the vchart-extension packaged artifacts contained an extra version by @xuefei1313 in https://github.com/VisActor/VChart/pull/4277 +* @visactor/vchart: Fix markline auto range by @xuefei1313 in https://github.com/VisActor/VChart/pull/4290 + + +**📖 Documentation** + + +* @visactor/vchart: Fix registerMorph error in example by @xuefei1313 in https://github.com/VisActor/VChart/pull/4285 +* @visactor/vchart: Add candlestick demo by @xuefei1313 in https://github.com/VisActor/VChart/pull/4297 + +**Full Changelog**: https://github.com/VisActor/VChart/compare/v2.0.7...v2.0.9 + +[more detail about v2.0.9](https://github.com/VisActor/VChart/releases/tag/v2.0.9) + +# v2.0.7 + +2025-11-03 + +🆕 New Features + +@visactor/vchart: Support resize zoom chart plugin by @xuefei1313 in https://github.com/VisActor/VChart/pull/4241 +@visactor/vchart: Register transform boxplot by @xile611 in https://github.com/VisActor/VChart/pull/4268 +@visactor/vchart: Add translate-issues workflow configuration by @xuefei1313 in https://github.com/VisActor/VChart/pull/4264 +@visactor/vchart: Add regression-lines in vchart-extension by @xile611 in https://github.com/VisActor/VChart/pull/4245 +@visactor/vchart: Change vrender dependencies, see https://github.com/VisActor/VChart/pull/4224 + +🐛 Bug Fixes + +@visactor/vchart: Fix crosshair not hide by @xile611 in https://github.com/VisActor/VChart/pull/4252 +@visactor/vchart: Fix issue of layout by @xuefei1313 in https://github.com/VisActor/VChart/pull/4249 +@visactor/vchart: Fix logistic regression line by @xile611 in https://github.com/VisActor/VChart/pull/4263 +@visactor/vchart: Fix support regression line for grouped scatter by @xile611 in https://github.com/VisActor/VChart/pull/4248 +@visactor/vchart: Fix check if stackData is empty by @kkxxkk2019 in https://github.com/VisActor/VChart/pull/4244 +@visactor/vchart: Fix issue of waterfall stack total by @xuefei1313 in https://github.com/VisActor/VChart/pull/4243 + + + + + +[more detail about v2.0.7](https://github.com/VisActor/VChart/releases/tag/v2.0.7) + +# v2.0.6 + +2025-10-14 + + +**What's Changed** + +* fix: fix the issue of legend pager by @xuefei1313 in https://github.com/VisActor/VChart/pull/4212 +* Feat/support calc in formatter by @xuefei1313 in https://github.com/VisActor/VChart/pull/4211 +* Fix/fix error of markline when series no data by @xuefei1313 in https://github.com/VisActor/VChart/pull/4216 +* feat: update bugreport metthod by @xuanhun in https://github.com/VisActor/VChart/pull/4221 +* feat: upgrade vrender to fix animation bug by @xuefei1313 in https://github.com/VisActor/VChart/pull/4222 +* feat: support waterfallType in waterfall chart by @xuefei1313 in https://github.com/VisActor/VChart/pull/4220 +* feat: change vrender dependencies by @xuefei1313 in https://github.com/VisActor/VChart/pull/4224 + + +**Full Changelog**: https://github.com/VisActor/VChart/compare/v2.0.5...v2.0.6 + +[more detail about v2.0.6](https://github.com/VisActor/VChart/releases/tag/v2.0.6) + +# v2.0.5 + +2025-09-19 + + + +[more detail about v2.0.5](https://github.com/VisActor/VChart/releases/tag/v2.0.5) + +# v2.0.2 + +2025-07-28 + + +**🆕 New feature** + +- **@visactor/vchart**: add the afterClearRect hook of render + +**Full Changelog**: https://github.com/VisActor/VChart/compare/v2.0.1...v2.0.2 + +[more detail about v2.0.2](https://github.com/VisActor/VChart/releases/tag/v2.0.2) + +# v2.0.1 + +2025-07-24 + + +**🆕 New feature** + +- **@visactor/vchart**: add config to avoid brush state update. close [#4035](https://github.com/VisActor/VChart/issues/4035) +- **@visactor/vchart**: optimize datazoom animation effect +- **@visactor/vchart**: add the afterClearScreen hook of render + +**🐛 Bug fix** + +- **@visactor/vchart**: fix issue with 3d chart grid +- **@visactor/vchart**: tickData of axis should update when `sampling` is changed, fix [#4059](https://github.com/VisActor/VChart/issues/4059) +- **@visactor/vchart**: only calculate multi layer label items when need, fix [#4056](https://github.com/VisActor/VChart/issues/4056) +- **@visactor/vchart**: fix resize error when remake, and re-normal aniamtion bug, fix [#4070](https://github.com/VisActor/VChart/issues/4070) +- **@visactor/vchart**: fix issue with feishu block and call setenv when create vchart +- **@visactor/vchart**: fix bug of tooltip triggerOff & tooltip lock +- **@visactor/vchart**: fix tooltip throw error when some tooltip processor is undefined, fix [#4044](https://github.com/VisActor/VChart/issues/4044) +- **@visactor/vchart**: fix `textAlign` not works in tooltip.style.titleLabel, fix [#4043](https://github.com/VisActor/VChart/issues/4043) + + + +[more detail about v2.0.1](https://github.com/VisActor/VChart/releases/tag/v2.0.1) + +# v1.13.11 + +2025-05-29 + + +**🆕 New feature** + +- **@visactor/vchart**: add `barGap` option for histogram chart +- **@visactor/vchart**: support tooltip.trigger and crosshair.trigger in theme + +**🐛 Bug fix** + +- **@visactor/vchart**: fix data-zoom domain when the label of band size is number-like string, fix [#3982](https://github.com/VisActor/VChart/issues/3982) +- **@visactor/vchart**: fix the order of title in mark tooltip when dimension tooltip has no title, fix [#3991](https://github.com/VisActor/VChart/issues/3991) +- **@visactor/vchart**: option `{ poptip: true }` should load `poptipForText` +- **react-vchart**: when use children to render customized tooltip, react-vchart should update +- **@visactor/vchart**: customized render of tooltip should be render in react 17 and react 18 + +**🔖 other** + +- **@visactor/vchart**: fix:Replace all the vchartConstrouctor to vchartConstructor,and ensure backward compatibility with older versions. + + + +[more detail about v1.13.11](https://github.com/VisActor/VChart/releases/tag/v1.13.11) + +# v1.13.10 + +2025-05-16 + + +**🆕 New feature** + +- **@visactor/vchart**: tooltip support inside position +- **@visactor/vchart**: mosaic chart supports bandWidthField and percent config, closed [#3945](https://github.com/VisActor/VChart/issues/3945) + +**🐛 Bug fix** + +- **@visactor/vchart**: export ManualTicker & StreamLight +- **@visactor/vchart**: tooltip should hide when enterable, fix [#3965](https://github.com/VisActor/VChart/issues/3965), fix [#3922](https://github.com/VisActor/VChart/issues/3922) +- **@visactor/vchart**: fix error of enterable tooltip when multiple charts in a page, fix [#3940](https://github.com/VisActor/VChart/issues/3940) +- **@visactor/vchart**: upgrade vgrammar to 0.16.7, fix [#3965](https://github.com/VisActor/VChart/issues/3965) + + + +[more detail about v1.13.10](https://github.com/VisActor/VChart/releases/tag/v1.13.10) + +# v1.13.9 + +2025-04-21 + + +**🆕 New feature** + +- **@visactor/vchart**: axis datafilter support context. close [#3332](https://github.com/VisActor/VChart/issues/3332) +- **@visactor/vchart**: gauge support clip when mark outof axis. close [#3859](https://github.com/VisActor/VChart/issues/3859) +- **@visactor/vchart**: markLine and markArea supports render multiple labels + +**🐛 Bug fix** + +- **@visactor/vchart**: clear event listener for normal animation when updateSpec, [#3881](https://github.com/VisActor/VChart/issues/3881) +- **@visactor/vchart**: fix coordinate of rect crosshair when bandSize is 0, fix [#3907](https://github.com/VisActor/VChart/issues/3907) +- **@visactor/vchart**: when set defaultSelect of crosshair, `axisIndex` should have a default value: 0 +- **@visactor/vchart**: fix type error of datazoom texts +- **@visactor/vchart**: the width of title label should auto fit content width when `autoWidth` is true, fix [#3880](https://github.com/VisActor/VChart/issues/3880) +- **@visactor/vchart**: mark line valid judgement. fix[#3857](https://github.com/VisActor/VChart/issues/3857) +- **@visactor/vchart**: empty placeholder should update after data is updated, fix [#3855](https://github.com/VisActor/VChart/issues/3855) + +**🔨 Refactor** + +- **@visactor/vchart**: brush interactive. close[#3765](https://github.com/VisActor/VChart/issues/3765) & [#3262](https://github.com/VisActor/VChart/issues/3262) & [#2802](https://github.com/VisActor/VChart/issues/2802) & [#3885](https://github.com/VisActor/VChart/issues/3885) + +**📖 Site / documentation update** + +- **@visactor/vchart**: supply interface of docs. fix [#3877](https://github.com/VisActor/VChart/issues/3877) + + + +[more detail about v1.13.9](https://github.com/VisActor/VChart/releases/tag/v1.13.9) + +# v1.13.8 + +2025-03-31 + + +**🆕 New feature** + +- **@visactor/vchart**: add `alwayCalculateTotal` for total label +- **@visactor/vchart**: add options `onlyFull` to lockStatisticsByDomain + +**🐛 Bug fix** + +- **@visactor/vchart**: fix the issue where the bar chart grow animation does not work correctly when the axis `zero: false`, [#3808](https://github.com/VisActor/VChart/issues/3808) +- **@visactor/vchart**: crosshair should hide when label is invalid +- **@visactor/vchart**: crosshair should hide when datazoom change +- **@visactor/vchart**: fix the bubble level issue prevented by event.prevent, [#3728](https://github.com/VisActor/VChart/issues/3728) +- **@visactor/vchart**: fix error when load gauge chart on demand, [#3836](https://github.com/VisActor/VChart/issues/3836) +- **@visactor/vchart**: `legends.title.visible` should change visiblity of title in legend, fix [#3846](https://github.com/VisActor/VChart/issues/3846) +- **@visactor/vchart**: fix the issue of pictogram svg path has not been drawn +- **react-vchart**: children of tooltip should not be set to spec +- **@visactor/vchart**: data.fields can set domain of field +- **@visactor/vchart**: fix bug of zoomable in mobile device which only use pointer event +- **@visactor/vchart**: fix datazoom drag and zoom triggered at the same time, fix [#3819](https://github.com/VisActor/VChart/issues/3819) + + + +[more detail about v1.13.8](https://github.com/VisActor/VChart/releases/tag/v1.13.8) + +# v1.13.7 + +2025-03-14 + + +**🆕 New feature** + +- **@visactor/vchart**: support `position` config in totalLabel, [#3396](https://github.com/VisActor/VChart/issues/3396) + +**🐛 Bug fix** + +- **@visactor/vchart**: vchart should not merge original options, fix [#3798](https://github.com/VisActor/VChart/issues/3798) +- **react-vchart**: lifecycle event callback should be fired, fix [#3792](https://github.com/VisActor/VChart/issues/3792) +- **@visactor/vchart**: react-vchart should export `WaterfallChart`, fix [#3791](https://github.com/VisActor/VChart/issues/3791) +- **@visactor/vchart**: fix fontFamily of richtext, fix [#3768](https://github.com/VisActor/VChart/issues/3768) +- **@visactor/vchart**: fix issue with wx get context + +**🔧 Configuration releated** + +- **@visactor/vchart**: add util to export + + + +[more detail about v1.13.7](https://github.com/VisActor/VChart/releases/tag/v1.13.7) + +# v1.13.6 + +2025-03-03 + + +**🆕 New feature** + +- **@visactor/vchart**: optimize the display effect of waterfall chart lieaderLine +- **@visactor/vchart**: add `transformRatioText` config for transformRatio text content in funnel tooltip, [#3704](https://github.com/VisActor/VChart/issues/3704) + +**🐛 Bug fix** + +- **@visactor/vchart**: display line label normally when seriesField is missing, [#3709](https://github.com/VisActor/VChart/issues/3709) +- **@visactor/vchart**: customMark should return components in `getVRenderComponents()`, fix [#3727](https://github.com/VisActor/VChart/issues/3727) +- **@visactor/vchart**: map zoom error bug. fix[#3743](https://github.com/VisActor/VChart/issues/3743) + +**🔖 other** + +- **@visactor/vchart**: 'feat: support `clamp` in linear scales, [#3738](https://github.com/VisActor/VChart/issues/3738)' + + + +[more detail about v1.13.6](https://github.com/VisActor/VChart/releases/tag/v1.13.6) + +# v1.13.5 + +2025-02-14 + + +**🆕 New feature** + +- **@visactor/vchart**: add params of startvalue and endvalue in brushend event +- **@visactor/vchart**: label support triggering mark tooltip, [#3634](https://github.com/VisActor/VChart/issues/3634) +- **@visactor/vchart**: export getCartesianDimensionInfo and getPolarDimensionInfo, fix [#3668](https://github.com/VisActor/VChart/issues/3668) +- **@visactor/vchart**: support stackInverse for waterfall chart + +**🐛 Bug fix** + +- **@visactor/vchart**: incorrect update animation of funnel transform mark, [#3685](https://github.com/VisActor/VChart/issues/3685) +- **@visactor/vchart**: fix the issue where the upper mark in stacked area overlaps the border of lower mark, [#3684](https://github.com/VisActor/VChart/issues/3684) +- **@visactor/vchart**: fix cache of crosshair value when hide crosshair, fix [#3686](https://github.com/VisActor/VChart/issues/3686) +- **@visactor/vchart**: allow dispatch roam zoom in datazoom component. fix[#3714](https://github.com/VisActor/VChart/issues/3714) +- **@visactor/vchart**: datazoom and scrollbar realtime not work. fix[#3716](https://github.com/VisActor/VChart/issues/3716) +- **@visactor/vchart**: fix the issue of tickAlign accuracy +- **@visactor/vchart**: indicator should show when switch `visible`, fix [#3675](https://github.com/VisActor/VChart/issues/3675) +- **@visactor/vchart**: circular progress should support morphing +- **@visactor/vchart**: tooltip should not handle mousemove or mouseout when enter tooltip, fix [#3708](https://github.com/VisActor/VChart/issues/3708) +- **@visactor/vchart**: tooltip should auto wrap when `maxWidth` is valid and `multiLine` is not false, fix [#3718](https://github.com/VisActor/VChart/issues/3718) +- **@visactor/vchart**: fix the type definition of text mark + +**🔨 Refactor** + +- **@visactor/vchart**: optimize performance of pictogram + +**📖 Site / documentation update** + +- **@visactor/vchart**: update options of poptip, close [#3139](https://github.com/VisActor/VChart/issues/3139) + + + +[more detail about v1.13.5](https://github.com/VisActor/VChart/releases/tag/v1.13.5) + +# v1.13.4 + +2025-01-17 + + +**🆕 New feature** + +- **@visactor/vchart**: add wordCloudConfig in _wordCloudTransformOption() + +**🐛 Bug fix** + +- **@visactor/vchart**: fix error of tooltip about `showDelay`, fix [#3663](https://github.com/VisActor/VChart/issues/3663) +- **@visactor/vchart**: fix offset of tooltip, fix [#3666](https://github.com/VisActor/VChart/issues/3666) +- **@visactor/vchart**: fix bug of parse lineHeight of tooltip row, fix [#3643](https://github.com/VisActor/VChart/issues/3643) +- **@visactor/vchart**: axis break's scope calculate error, fix[#3656](https://github.com/VisActor/VChart/issues/3656) +- **@visactor/vchart**: fix the issue where map drag interaction cannot be terminated outside the canvas, [#3650](https://github.com/VisActor/VChart/issues/3650) +- **@visactor/vchart**: fix the issue where map drag interaction cannot be terminated outside the canvas. + + + +[more detail about v1.13.4](https://github.com/VisActor/VChart/releases/tag/v1.13.4) + +# v1.13.3 + +2025-01-08 + + +**🆕 New feature** + +- **@visactor/vchart**: add datum to params on axis-label event +- **@visactor/vchart**: wrap some hook in vgrammar + +**🐛 Bug fix** + +- **@visactor/vchart**: fix the issue of incorrect label display in 3D charts, [#3584](https://github.com/VisActor/VChart/issues/3584) +- **@visactor/vchart**: fix the issue of animation in 3d wordcloud not work +- **@visactor/vchart**: brush data will be undefined when mark is hovered. fix[#3623](https://github.com/VisActor/VChart/issues/3623) +- **@visactor/vchart**: fix style of dom tooltip when tooltip has customized child, fix [#3615](https://github.com/VisActor/VChart/issues/3615) +- **@visactor/vchart**: fix error update of dom tooltip when update theme, fix [#3619](https://github.com/VisActor/VChart/issues/3619) +- **@visactor/vchart**: fix position of html tooltip when confine is false, fix [#3632](https://github.com/VisActor/VChart/issues/3632) +- **@visactor/vchart**: fix the typographical error of dataset tutorial +- **@visactor/vchart**: compilier should add dpr to vrender +- **@visactor/vchart**: fix invisible region blocking mark events, [#3638](https://github.com/VisActor/VChart/issues/3638) +- **@visactor/vchart**: undefined points shoulde not show when dimension hover, fix [#3610](https://github.com/VisActor/VChart/issues/3610) +- **@visactor/vchart**: fix layout error of title component, fix [#3614](https://github.com/VisActor/VChart/issues/3614) + + + +[more detail about v1.13.3](https://github.com/VisActor/VChart/releases/tag/v1.13.3) + +# v1.13.2 + +2024-12-24 + + +**🆕 New feature** + +- **@visactor/vchart**: add miss Series and Chart in react vchart, close [#3578](https://github.com/VisActor/VChart/issues/3578) +- **@visactor/vchart**: vchart support clickInterval params + +**🐛 Bug fix** + +- **@visactor/vchart**: support percentage state radius config in gauge segment mark, [#3459](https://github.com/VisActor/VChart/issues/3459) +- **@visactor/vchart**: media query should not throw error when has empty axis, related to [#3575](https://github.com/VisActor/VChart/issues/3575) +- **@visactor/vchart**: tooltip should not render empty column when `hasShape` of tooltip is `false`, related to [#3572](https://github.com/VisActor/VChart/issues/3572) +- **@visactor/vchart**: `othersLine` of tooltip can be hidden by `visible: false`, related to [#3572](https://github.com/VisActor/VChart/issues/3572) +- **@visactor/vchart**: fix position of tooltip, related to [#3590](https://github.com/VisActor/VChart/issues/3590) +- **@visactor/vchart**: page should not crash when `tickStep` is too small, fix [#3591](https://github.com/VisActor/VChart/issues/3591) +- **@visactor/vchart**: fix updating of customized DOM when has interactive layer, fix [#3587](https://github.com/VisActor/VChart/issues/3587) +- **@visactor/vchart**: fix axis breaks when set `tickStep`, fix [#3560](https://github.com/VisActor/VChart/issues/3560) + + + +[more detail about v1.13.2](https://github.com/VisActor/VChart/releases/tag/v1.13.2) + +# v1.13.1 + +2024-12-17 + + +**🆕 New feature** + +- **@visactor/vchart**: add config `customFilter` to legend, support cutomized filter function, close [#3492](https://github.com/VisActor/VChart/issues/3492) +- **@visactor/vchart**: Area chart supports setting labels in the middle `'inside-middle'`, close [#3353](https://github.com/VisActor/VChart/issues/3353) + +**🐛 Bug fix** + +- **@visactor/vchart**: fix break of waterfall, fix [#3544](https://github.com/VisActor/VChart/issues/3544) +- **@visactor/vchart**: fix the bug of updateModelSpecSync can not set axis.tick.forceTickCount +- **@visactor/vchart**: fix filter of lock domain when field is array, related [#3469](https://github.com/VisActor/VChart/issues/3469) +- **@visactor/vchart**: fix size of datazoom when update, fix [#3521](https://github.com/VisActor/VChart/issues/3521) +- **@visactor/vchart**: html tooltip can reuse the dom content and fix the unneed animation +- **@visactor/vchart**: fix update of extensionMark when mark has `name`, fix [#3547](https://github.com/VisActor/VChart/issues/3547) +- **@visactor/vchart**: fix indicator when change visible to be false, fix [#3506](https://github.com/VisActor/VChart/issues/3506) +- **@visactor/vchart**: fix tooltip content when only has `valueFormatter` or `keyFormatter` +- **@visactor/vchart**: fix style of dom tooltip +- **vchart-extension**: series-break should keep align width axis break, related to [#3560](https://github.com/VisActor/VChart/issues/3560) +- **@visactor/vchart**: breaks should consider the `min` and `max` of axis, related to [#3560](https://github.com/VisActor/VChart/issues/3560) + + + +[more detail about v1.13.1](https://github.com/VisActor/VChart/releases/tag/v1.13.1) + +# v1.13.0 + +2024-12-06 + + +**🆕 New feature** + +- **@visactor/vchart**: add pictogram chart +- **@visactor/vchart**: support auto generated scrollbar in sankey, close [#2838](https://github.com/VisActor/VChart/issues/2838) +- **@visactor/vchart**: react vchart support event filter, close [#3461](https://github.com/VisActor/VChart/issues/3461) +- **@visactor/vchart**: tooltip key/content support config by field, close [#2576](https://github.com/VisActor/VChart/issues/2576) +- **@visactor/vchart**: support max height of tooltip, by percent value , close [#2675](https://github.com/VisActor/VChart/issues/2675) + + +**🐛 Refactor** + + +- **@visactor/vchart**: [Break Change] refactor the implement of html tooltip, fix [#3137](https://github.com/VisActor/VChart/issues/3137), close [#2924](https://github.com/VisActor/VChart/issues/2924), close [#2591](https://github.com/VisActor/VChart/issues/2591) +- **@visactor/vchart**: [Break Change] support label overlap for inside arc labels by default + + +**⚡ Performance optimization** + + +- **@visactor/vchart**: [Break Change] vrender optimize the bounds of text, which will change the display of all text + + + +[more detail about v1.13.0](https://github.com/VisActor/VChart/releases/tag/v1.13.0) + +# v1.12.15 + +2024-12-05 + + +**🆕 New feature** + +- **@visactor/vchart**: support `restorePosition` in position/bound label overlap strategy + +**🐛 Bug fix** + +- **@visactor/vchart**: optimize `shiftY` of label + + + +[more detail about v1.12.15](https://github.com/VisActor/VChart/releases/tag/v1.12.15) + +# v1.12.14 + +2024-12-05 + + +**🆕 New feature** + +- **@visactor/vchart**: support `autoRefreshDpr` in chart options +- **@visactor/vchart**: dataZoom can do filter when has `lockStatisticsByDomain`, close [#3469](https://github.com/VisActor/VChart/issues/3469) +- **@visactor/vchart**: add marker context to support the same color as series. close[#3437](https://github.com/VisActor/VChart/issues/3437) +- **@visactor/vchart**: update options `maxNodeHeight`, `maxLinkHeight` in sankey, close 3439 +- **@visactor/vchart-extension**: add component `series-break`, close [#3450](https://github.com/VisActor/VChart/issues/3450) + +**🐛 Bug fix** + +- **@visactor/vchart**: upgrade scrollbar visible after layout. fix[#3452](https://github.com/VisActor/VChart/issues/3452) +- **@visactor/vchart**: fix `adjacency` in sankey, fix [#3460](https://github.com/VisActor/VChart/issues/3460) +- **@visactor/vchart**: not update layout when scrollbar domain is the same as before. fix[#3452](https://github.com/VisActor/VChart/issues/3452) +- **@visactor/vchart**: value in scale range should consider about whole range. fix[#3446](https://github.com/VisActor/VChart/issues/3446) +- **@visactor/vchart**: when the `invalidType` of line is `"link"`, line should be connected rightly. fix [#3436](https://github.com/VisActor/VChart/issues/3436), fix [#3238](https://github.com/VisActor/VChart/issues/3238) +- **@visactor/vchart**: richtext should work when set state, fix [#3465](https://github.com/VisActor/VChart/issues/3465) + + + +[more detail about v1.12.14](https://github.com/VisActor/VChart/releases/tag/v1.12.14) + +# v1.12.13 + +2024-11-22 + + +**🐛 Bug fix** + +- **@visactor/vchart**: fix `groupKey` of boxplot series, fix [#3409](https://github.com/VisActor/VChart/issues/3409), related to [#2855](https://github.com/VisActor/VChart/issues/2855) +- **@visactor/vchart**: fix the issue where the length of the outerlabel line is incorrect when richtext, fix [#3441](https://github.com/VisActor/VChart/issues/3441) + + + +[more detail about v1.12.13](https://github.com/VisActor/VChart/releases/tag/v1.12.13) + +# v1.12.12 + +2024-11-18 + + +**🐛 Bug fix** + +- **@visactor/vchart**: fix: fix the issue where modifying area.visible through updateSpec does not take effect, related [#3393](https://github.com/VisActor/VChart/issues/3393) +- **@visactor/vchart**: fix incorrect rendering when changing `direction` via updateSpec in area chart, related [#3406](https://github.com/VisActor/VChart/issues/3406) +- **@visactor/vchart**: fix zIndex of background image, fix [#3403](https://github.com/VisActor/VChart/issues/3403) +- **@visactor/vchart**: fix error of tooltip when chart is released, fix [#3428](https://github.com/VisActor/VChart/issues/3428) + +**⚡ Performance optimization** + +- **@visactor/vchart**: optimize the effect of break data + + + +[more detail about v1.12.12](https://github.com/VisActor/VChart/releases/tag/v1.12.12) + +# v1.12.11 + +2024-11-13 + + +**🆕 New feature** + +- **@visactor/vchart**: support axis sync to the axis that has breaks +- **@visactor/vchart**: tooltip can support customized `trigger` and `triggerOff` + +**🐛 Bug fix** + +- **@visactor/vchart**: fix the issue where the axis breaks render incorrectly in some cases +- **@visactor/vchart**: fix `zIndex` of series, fix [#3395](https://github.com/VisActor/VChart/issues/3395) +- **@visactor/vchart**: fix layout of title when orient is "left" or "right", fix [#3401](https://github.com/VisActor/VChart/issues/3401) +- **@visactor/vchart**: fix the issue of custom svg string in tooltip shape, related [#3384](https://github.com/VisActor/VChart/issues/3384) +- **@visactor/vchart**: tooltip `enterable` should work when update, fix [#3405](https://github.com/VisActor/VChart/issues/3405) +- **@visactor/vchart**: fix tooltip position by `mode: pointer`, close [#3367](https://github.com/VisActor/VChart/issues/3367) +- **@visactor/vchart**: wordcloud should not throw error when `word.visible` is `false`, fix [#3378](https://github.com/VisActor/VChart/issues/3378) +- **@visactor/vchart**: fix the issue where the scrolling legend triggers map zooming under certain conditions, related [#3391](https://github.com/VisActor/VChart/issues/3391) + + + +[more detail about v1.12.11](https://github.com/VisActor/VChart/releases/tag/v1.12.11) + +# v1.12.10 + +2024-10-31 + +**🆕 New feature** + +- **@visactor/vchart**: pie series support center of percent string + +**🐛 Bug fix** + +- **@visactor/vchart**: scroll not dispatch view update when axis is not display. fix[#3278](https://github.com/VisActor/VChart/issues/3278) +- **@visactor/vchart**: changes to `roam` via updateSpec do not take effect +- **@visactor/vchart**: fix the issue of symbolActiveMark visible setting +- **@visactor/vchart**: fix issue with chart background in harmony +- **@visactor/vchart**: fix event of angle axis in radarchart, fix [#3343](https://github.com/VisActor/VChart/issues/3343) +- **@visactor/vchart**: type issue of title theme +- **@visactor/vchart**: fix the issue of incorrect display of legend scrollbar in boundary scenarios + +**🔨 Refactor** + +- **@visactor/vchart**: optimize setter and getter about markConfig +- **@visactor/vchart**: Optimize the issue of excessive omission of head and tail labels when axis labels are rotated in Cartesian coordinate systems. +- **@visactor/vchart**: Optimize the automatic line wrapping effect of axis labels in Cartesian coordinate systems. + +[more detail about v1.12.10](https://github.com/VisActor/VChart/releases/tag/v1.12.10) + +# v1.12.9 + +2024-10-25 + + +**🆕 New feature** + +- **@visactor/vchart**: support tooltip for overlapped points, close [#3224](https://github.com/VisActor/VChart/issues/3224) + +**🐛 Bug fix** + +- **@visactor/vchart**: fixed the issue where map labels do not scale accordingly after updateSpec. +- **@visactor/vchart**: all the SeriesData should call `compileData()`, fix [#3322](https://github.com/VisActor/VChart/issues/3322) +- **@visactor/vchart**: clear throttle timer when out, fix [#3326](https://github.com/VisActor/VChart/issues/3326) +- **@visactor/vchart**: fix `tooltipHide` event when handler is empty +- **@visactor/vchart**: tooltip data should has `datum` in each line +- **@visactor/vchart**: Fixed the issue of label component misalignment in specific situations +- **@visactor/vchart**: Fixed the issue of partial blank areas in charts during resizing when dpr is not an integer, fix [#3255](https://github.com/VisActor/VChart/issues/3355) + + +[more detail about v1.12.9](https://github.com/VisActor/VChart/releases/tag/v1.12.9) + +# v1.12.8 + +2024-10-15 + + +**🆕 New feature** + +- **@visactor/vchart**: support `firstVisible` of axis label, close [#3200](https://github.com/VisActor/VChart/issues/3200) +- **@visactor/vchart**: support `roam.blank` to enable dragging from blank area of region in map chart +- **@visactor/vchart**: optimize data empty condition + **@visactor/vchart**: Label component text style supports `wordBreak: "keep-all"` + +**🐛 Bug fix** + +- **@visactor/vchart**: chart should `remake` when visible of axis change, fix [#3287](https://github.com/VisActor/VChart/issues/3287) +- **@visactor/vchart**: fix visible change of label, fix [#3277](https://github.com/VisActor/VChart/issues/3277) +- **@visactor/vchart**: custom theme by chartType cannot work in initial options, [#3285](https://github.com/VisActor/VChart/issues/3285) +- **@visactor/vchart**: fix issue of `html` and `dom` not work correctly in label +- **@visactor/vchart**: axis line on zero should consider the bindAxis's inverse, fixed[#3306](https://github.com/VisActor/VChart/issues/3306) +- **react-vchart**: register labels by default in circlePacking, sankey, sunburst, treemap, venn, fix [#3148](https://github.com/VisActor/VChart/issues/3148) +- **@visactor/vchart**: Fix the issue where `item.label.space` and `pager.space` are not effective in discrete legends + +**🔨 Refactor** + +- **@visactor/vchart**: refactor implement of `enterable` in tooltip component + + +[more detail about v1.12.8](https://github.com/VisActor/VChart/releases/tag/v1.12.8) + +# v1.12.7 + +2024-09-29 + + +**🆕 New feature** + +- **@visactor/vchart**: feat: support `minLength` in funnel outerlabel line +- **react-vchart**: support `morphConfig` of react-vchart, close [#3219](https://github.com/VisActor/VChart/issues/3219) + +**🐛 Bug fix** + +- **@visactor/vchart**: fix error of `updateSpec` when data changed, fix [#3261](https://github.com/VisActor/VChart/issues/3261) +- **@visactor/vchart**: color of linear progress track in dark mode +- **@visactor/vchart**: datazoom state field and value field is incomplete problem. fix[#3199](https://github.com/VisActor/VChart/issues/3199) +- **@visactor/vchart**: fix title of axis when the bounds is empty, fix [#3265](https://github.com/VisActor/VChart/issues/3265) +- **@visactor/vchart**: fix media-query when `updateSpec` +- **@visactor/vchart**: fix updateSpec when add attributes `width`, `height` to `spec` + + + +[more detail about v1.12.7](https://github.com/VisActor/VChart/releases/tag/v1.12.7) + +# v1.12.6 + +2024-09-23 + +**🆕 New Features** + +- **@visactor/vchart**: Added lifecycle hooks, `afterCreateVChart`, `beforeInitializeChart`, `afterInitializeChart` +- **@visactor/vchart**: Polar coordinate angle axis supports configurations like `autoLimit`, `autoWrap`, `autoHide`, etc. + +**🐛 Bug Fixes** + +- **@visactor/vchart**: Allow adding `indicator` components in polar charts +- **@visactor/vchart**: Fix the default value issue of `position` in the `label` component, fix [#3242](https://github.com/VisActor/VChart/issues/3242) +- **@visactor/vchart**: Fix type error, change `type` in `PointerMarkSpec` to an optional type, fix [#3227](https://github.com/VisActor/VChart/issues/3227) +- **@visactor/vchart**: Use `throttle` for throttling when triggering `resize` +- **@visactor/vchart**: Fix the chart update type to be `reCompile` instead of `remake` when updating `label` configurations +- **@visactor/vchart**: Fix the issue where `customMark` does not support `markName` event filters +- **@visactor/vchart**: Fix the issue of incorrect animation triggering during radar chart updates, fix [#3228](https://github.com/VisActor/VChart/issues/3228) + +[more detail about v1.12.6](https://github.com/VisActor/VChart/releases/tag/v1.12.6) + +# v1.12.5 + +2024-09-23 + +**🆕 New Features** + +- **@visactor/vchart**: extension mark and customized mark support `markName` event filter + +**🐛 Bug Fixes** + +- **@visactor/vchart**: optimize first axis label autolimit effect of cartesian chart +- **@visactor/vchart**: `animationUpdate` should also control labels animation +- **@visactor/vchart**: fix default value of circular-progress, fix [#2683](https://github.com/VisActor/VChart/issues/2683) +- **@visactor/vchart**: fix display of radar-chart when has negative radius +- **@visactor/vchart**: `word.style.fontWeight` should change the style of text in wordcloud, fix [#3212](https://github.com/VisActor/VChart/issues/3212) + +**🔨 Refactor** + +- **@visactor/vchart**: simplify `getSpecInfo` + +[more detail about v1.12.5](https://github.com/VisActor/VChart/releases/tag/v1.12.5) + + +# v1.12.4 + +2024-09-09 + + +**🆕 New feature** + +- **@visactor/vchart**: support axis break +- **@visactor/vchart**: stackCornerRadius support callback. feat[#3164](https://github.com/VisActor/VChart/issues/3164) +- **@visactor/vchart**: add `crossNodeAlign` to sankey + +**🐛 Bug fix** + +- **@visactor/vchart**: bind first axis to series but not last. fix[#3139](https://github.com/VisActor/VChart/issues/3139) +- **@visactor/vchart**: crosshair won't update when switch theme +- **@visactor/vchart**: wordcloud text overlap. fix[#3177](https://github.com/VisActor/VChart/issues/3177) +- **@visactor/vchart**: fix zIndex of label in pie-chart + +**🔧 Configuration releated** + +- **@visactor/vchart**: clear state when updateSpec. fix[#3162](https://github.com/VisActor/VChart/issues/3162) + + + +[more detail about v1.12.4](https://github.com/VisActor/VChart/releases/tag/v1.12.4) + +# v1.12.3 + +2024-09-05 + + +**🐛 Bug fix** + +- **@visactor/vchart**: cannot disable label update animation by `option.animation:false` + + + +[more detail about v1.12.3](https://github.com/VisActor/VChart/releases/tag/v1.12.3) + +# v1.12.2 + +2024-09-05 + + +**🆕 New feature** + +- **brush**: add config to control zoom when brush empty data. close[#2934](https://github.com/VisActor/VChart/issues/2934) +- **@visactor/vchart**: support 'inside-center' label position in pie chart + +**🐛 Bug fix** + +- **@visactor/vchart**: rangeMode of scrollbar not work. fix[#3147](https://github.com/VisActor/VChart/issues/3147) +- **@visactor/vchart**: fix error of `barWidth`, `barMinWidth`, `barMaxWidth` when value is null +- **@visactor/vchart**: x brush filter not work. fix[#3111](https://github.com/VisActor/VChart/issues/3111) +- **@visactor/vchart**: indicator stop tooltip interactive. fix[#3123](https://github.com/VisActor/VChart/issues/3123) +- **@visactor/vchart**: fix error of `getCenter` when layoutRadius is a customized function in radar +- **@visactor/vchart**: media query causes incorrect render result, [#3102](https://github.com/VisActor/VChart/issues/3102) +- **@visactor/vchart**: normal animation not work since v1.12.0 +- **@visactor/vchart**: sankey scale update not work +- **@visactor/vchart**: fix error of sankey when some customized mark has name "node" +- **@visactor/vchart**: fix dimension value of tooltip when has innerOffset, fix [#2923](https://github.com/VisActor/VChart/issues/2923) +- **@visactor/vchart**: vchart should not throw error when the values of series data is empty, fix [#3082](https://github.com/VisActor/VChart/issues/3082) +- **@visactor/vchart**: fix error of `updateSpec` when array change +- **@visactor/vchart**: wordcloud fill not update after updateSpec. fix[#3122](https://github.com/VisActor/VChart/issues/3122) +- **@visactor/vchart**: wordcloud scale update not work. fix[#3129](https://github.com/VisActor/VChart/issues/3129) + +**🔨 Refactor** + +- **@visactor/vchart**: refactor the parser of tooltip pattern + +**📖 Site / documentation update** + +- **@visactor/vchart**: fix issue of treemap.label not shown in option pages, fix [#2562](https://github.com/VisActor/VChart/issues/2562) +- **@visactor/vchart**: update docs about circular progress, close [#2987](https://github.com/VisActor/VChart/issues/2987) + + + +[more detail about v1.12.2](https://github.com/VisActor/VChart/releases/tag/v1.12.2) + +# v1.12.1 + +2024-08-21 + + +**🐛 Bug fix** + +- **@visactor/vchart**: x brush filter not work. fix [#3111](https://github.com/VisActor/VChart/issues/3111) +- **@visactor/vchart**: fix error of `getCenter` when layoutRadius is a customized function in radar +- **@visactor/vchart**: media query causes incorrect render result, [#3102](https://github.com/VisActor/VChart/issues/3102) +- **@visactor/vchart**: vchart should not throw error when the values of series data is empty, fix [#3082](https://github.com/VisActor/VChart/issues/3082) + + + +[more detail about v1.12.1](https://github.com/VisActor/VChart/releases/tag/v1.12.1) + +# v1.12.0 + +2024-08-16 + + +**🆕 New feature** + + - **@visactor/vchart**: marker's `coordinates` and `positions` property support callback + - **@visactor/vchart**: support `animationState` config + - **@visactor/vchart**: show evenly divided pie chart with `showAllZero` + - **@visactor/vchart**: enable `supportNegative` option to treat negative values as absolute values + - **@visactor/vchart**: support theme config by chart type + - **@visactor/vchart**: support text shape of word-cloud + - **@visactor/vchart**: add new chart mosaic chart + - **@visactor/vchart**: support customized tick function of linear axis + - **@visactor/vchart**: add emptyPlaceholder and emptyCircle for pie chart + + ## 🐛 fix + - **@visactor/vchart**: y-axis is reverted after brush zoomin. fix [#3089](https://github.com/VisActor/VChart/issues/3089) + - **@visactor/vchart**: mark-point position type error fix + ## 🔨 refactor + - **@visactor/vchart**: refactor the graphics in linear-progress chart + - **@visactor/vchart**: use label component to refactor sankey label + - **@visactor/vchart**: stack can be required by need + ## 🔖 other + - **@visactor/vchart**: sequence support bottom axes. fix [#2927](https://github.com/VisActor/VChart/issues/2927) + + + +[more detail about v1.12.0](https://github.com/VisActor/VChart/releases/tag/v1.12.0) + +# v1.11.12 + +2024-08-15 + + +**🆕 New feature** + +- **@visactor/vchart**: support `layoutRadius` of pie + +**🐛 Bug fix** + +- **@visactor/vchart**: fix params of tickCount in linear-axis-mixin, fix [#3053](https://github.com/VisActor/VChart/issues/3053) +- **@visactor/vchart**: fix `padding` of region not work +- **@visactor/vchart**: brush error after legend filter. fix[#3061](https://github.com/VisActor/VChart/issues/3061) +- **@visactor/vchart**: fix funnel chart color bug with different category and series fields +- **@visactor/vchart**: fix issue with harmony event +- **@visactor/vchart**: fix type error of react vchart, fix [#3065](https://github.com/VisActor/VChart/issues/3065) +- **@visactor/vchart**: tooltip should show when chart has multiple regions +- **@visactor/vchart**: fix the issue background of chart not updated, fix [#3054](https://github.com/VisActor/VChart/issues/3054) +- **@visactor/vchart**: fix the update of `startAngle` and `endAngle` in pie chart, fix [#3059](https://github.com/VisActor/VChart/issues/3059) +- **@visactor/vchart**: fix switch `visible` of legend, fix [#3060](https://github.com/VisActor/VChart/issues/3060) + + + +[more detail about v1.11.12](https://github.com/VisActor/VChart/releases/tag/v1.11.12) + +# v1.11.11 + +2024-08-06 + + +**🆕 New feature** + +- **@visactor/vchart**: label line support custom path. close[#3000](https://github.com/VisActor/VChart/issues/3000) +- **@visactor/vchart**: upgrade vrender to 0.19.20, to support `catmullRom` and `catmullRomClosed` curveType, related [#2610](https://github.com/VisActor/VChart/issues/2610) + +**🐛 Bug fix** + +- **@visactor/vchart**: fix crosshair of histogram, fix [#2826](https://github.com/VisActor/VChart/issues/2826) +- **@visactor/vchart**: use `vglobal.getElementById` to replace `document.getElementById` +- **@visactor/vchart**: liquid gradient not work after reverse +- **@visactor/vchart**: add group mark to fix gradient color bug of liquid and add rect shape to fix rect symbol padding bug +- **@visactor/vchart**: fix `lockAfterClick` of tooltip, related [#1574](https://github.com/VisActor/VChart/issues/1574) +- **@visactor/vchart**: prevent trigger original event in panEnd composite event [#2931](https://github.com/VisActor/VChart/issues/2931) +- **@visactor/vchart**: charts should not stack when only specify `stackValue` but `stack` is false, fix [#3005](https://github.com/VisActor/VChart/issues/3005) +- **@visactor/vchart**: `updateData` incorrect with datazoom, related [#3041](https://github.com/VisActor/VChart/issues/3041) +- **@visactor/vchart**: fix issue of `updateSpec` when visible of grid in axis change, fix [#3004](https://github.com/VisActor/VChart/issues/3004) +- **@visactor/vchart**: fix fontFamily when update theme, fix [#3028](https://github.com/VisActor/VChart/issues/3028) + +**🔖 other** + +- **@visactor/vchart**: fix:curveType `monotone` in seriesStyle not work + + + +[more detail about v1.11.11](https://github.com/VisActor/VChart/releases/tag/v1.11.11) + +# v1.11.10 + +2024-07-24 + + +**🆕 New feature** + +- **@visactor/vchart**: liquid support reverse and target mark. close [#2977](https://github.com/VisActor/VChart/issues/2977) & close [#2978](https://github.com/VisActor/VChart/issues/2978) +- **@visactor/vchart**: add `totalScale` params in geo zoom event +- **@visactor/vchart**: support `geoZoomByIndex`/`geoZoomById` API, close [#2925](https://github.com/VisActor/VChart/issues/2925) +- **@visactor/vchart**: marker label background support custom path. close [#2959](https://github.com/VisActor/VChart/issues/2959) + +**🐛 Bug fix** + +- **@visactor/vchart**: prevent issue with ios bug while pointEvent is configed +- **@visactor/vchart**: liquid gradient not work after reverse +- **@visactor/vchart**: prevent trigger original event in zoomEnd composite event [#2931](https://github.com/VisActor/VChart/issues/2931) +- **@visactor/vchart**: fix error of setDimentionIndex when dimension axis is linear + +**🔧 Configuration releated** + +- **@visactor/vchart**: update rollup.config.js to fix es5/index.js, fix [#2971](https://github.com/VisActor/VChart/issues/2971) + + + +[more detail about v1.11.10](https://github.com/VisActor/VChart/releases/tag/v1.11.10) + +# v1.11.9 + +2024-07-17 + + +**🆕 New feature** + + +* @visactor/vchart: tooltip theme support transition duration + + +**🐛 Bug fix** + + +* @visactor/vchart: fix statistics confict of linear and discrete field, close [#2926](https://github.com/VisActor/VChart/issues/2926) +* @visactor/vchart: fix theme error of update spec +* @visactor/vchart: fix update of label when udpate spec +* @visactor/vchart: fix bug of polar point update aniamtion +* @visactor/vchart: react attributes should support react 17 +* @visactor/vchart: fix height of link when set `minNodeHeight` of sankey + + + +[more detail about v1.11.9](https://github.com/VisActor/VChart/releases/tag/v1.11.9) + +# v1.11.7 + +2024-07-06 + + +**🆕 New feature** +# v1.11.7 + +2024-07-06 + + +**🆕 New feature** + +- **@visactor/vchart**: support configuring callback function in indicator text style attributes, [#2540](https://github.com/VisActor/VChart/issues/2540) +- **@visactor/vchart**: add options `hideTimer` in toolti, to hide tooltip by timer +- **@visactor/vchart**: support `updateIndicatorDataById`/`updateIndicatorDataByIndex` API, related [#2776](https://github.com/VisActor/VChart/issues/2776) +- **@visactor/vchart**: add `userUpdateOptions` to let user specify update type of charts, fix some animation bug + +**🐛 Bug fix** + +- **barbackground**: datakey is undefined when set custom datakey fix [#2908](https://github.com/VisActor/VChart/issues/2908) +- **@visactor/vchart**: fix the issue where `barMaxWidth` does not work when `barWidth` is configured, [#2885](https://github.com/VisActor/VChart/issues/2885)` +- **@visactor/vchart**: line/area clip animation by incorrect direction +- **crosshair**: fix bug of crosshair position when legend filter data. fix [#2905](https://github.com/VisActor/VChart/issues/2905) +- **@visactor/vchart**: fix polar animation logic for radar charts +- **@visactor/vchart**: type define fix + +[more detail about v1.11.7](https://github.com/VisActor/VChart/releases/tag/v1.11.7) + +# v1.11.6 + +2024-06-27 + + +**🐛 功能修复** + +- **@visactor/vchart**: 修复图表背景不支持渐变色配置的问题 +- **animation**: 修复玫瑰图重复更新，动画bug，关闭[#2856](https://github.com/VisActor/VChart/issues/2856) +- **@visactor/vchart**:修复类型定义 `ITooltipTheme`, 关闭 [#2850](https://github.com/VisActor/VChart/issues/2850) +- **@visactor/vchart**: 修复`updateSpec`时，更新动画没有触发的问题 [#2835](https://github.com/VisActor/VChart/issues/2835) [#2836](https://github.com/VisActor/VChart/issues/2836) + + + +[更多详情请查看 v1.11.6](https://github.com/VisActor/VChart/releases/tag/v1.11.6) + +# v1.11.5 + +2024-06-21 + + +**🆕 New feature** + +- **@visactor/vchart**: add option `style.align` of Tooltip, support RTL tooltip +- + +**🐛 Bug fix** + + - **@visactor/vchart**: optimize discrete legend pager color in dark theme, related [#2654](https://github.com/VisActor/VChart/issues/2654) + - **@visactor/vchart**: fix the issue issue with stacked waterfall charts where positive and negative values were not stacked separately when there were both positive and negative values in the same stack, fix [#2212](https://github.com/VisActor/VChart/issues/2212) + + + + + +[more detail about v1.11.5](https://github.com/VisActor/VChart/releases/tag/v1.11.5) + +# 1.11.4 + +## 🐛 fix + - **@visactor/vchart**: fix bug of `updateSpec` when has `scales`, close #2744 + - **@visactor/vchart**: gauge chart might throw error when the value is close to its maximum, fix #2783 + - **@visactor/vchart**: fix the behavior of the gauge pointer when it exceeds the axis range, fix #2780 + - **@visactor/vchart**: normal animation not work when appear animation is disabled, fix #2807 + - **@visactor/vchart**: upgrade vrender to 0.19.10, vgrammar to 0.13.9 + +# 1.11.3 +## 🆕 feat +@visactor/vchart: add option showBackgroundChart of DataZoom + +## 🐛 fix +@visactor/vchart: bar chart should work normally when x-axis is linear, fix #2758 +@visactor/vchart: fix issue of continuous legend filter in treemap +@visactor/vchart: fixed the issue that the newly added component type could not take effect when updateSpec +@visactor/vchart: fixed setSelected of sankey chart, fix #2757 , fix #2765 + + +# 1.11.2 +- 正式版发布 +- @visactor/vchart: fix the bug that animationThreshold not work, close #2745 +- @visactor/vchart: fix the issue of update animation in area chart is not work +- common: bar series support auto band size in common chart. fix#2704 +- @visactor/vchart: corsshair should hide when pointer out view, fix #2726 +- @visactor/vchart: close animation cause by datazoom/scrollbar +- @visactor/vchart: `type-step` markLine's label should consider the refX/refY/dx/dy set by user, fixed#2739 +- react-vchart: fix the issue of that the props id not work +- @visactor/vchart: polarAxis.grid.smooth not work in theme configuratio + 🔧 chore +- @visactor/vchart: when build es5 , targets of @babel/preset-env should be defaults, fix #2702 + +# 1.11.0-alpha.3 +- 更新README + +# 1.11.0-alpha.2 +- VChart组件支持InitOptions参数 + +# 1.11.0-alpha.1 +- VChart支持HarmonyOS的StageTS架构 + diff --git a/packages/vchart/CHANGELOG.md b/packages/vchart/CHANGELOG.md index de42aa600b..e21e526ffc 100644 --- a/packages/vchart/CHANGELOG.md +++ b/packages/vchart/CHANGELOG.md @@ -2,6 +2,18 @@ This log was last generated on Fri, 30 Jan 2026 03:53:56 GMT and should not be manually modified. +# v2.0.15 + +2026-02-02 + +**🆕 New Features** + +- feat: Support Brush API and Interactive API by +- feat: Support fixed pixel step scrolling on wheel event and minimum scrollbar slider height + + +- fix: Fix React VChart component registration logic + ## 2.0.14 Fri, 30 Jan 2026 03:53:56 GMT @@ -428,7 +440,7 @@ Tue, 07 Jan 2025 10:21:06 GMT ### Updates -- feat: add datum to params on axis-label event +- feat: add datum to params on axis-label event - feat: package some hook in vgrammar @@ -933,7 +945,7 @@ Tue, 06 Aug 2024 09:20:16 GMT - fix: prevent trigger original event in panEnd composite event #2931 -- fix:curveType `monotone` in seriesStyle not work +- fix:curveType `monotone` in seriesStyle not work - fix: charts should not stack when only specify `stackValue` but `stack` is false, fix #3005 @@ -988,7 +1000,7 @@ Tue, 16 Jul 2024 12:19:22 GMT - fix: clear the timer of tooltip when has update -- fix: statistics confict of linear and discrete field. fix#2926 +- fix: statistics confict of linear and discrete field. fix#2926 - fix: fix polar animation logic for radar charts - fix: fix PolarPointUpdate when from point is center @@ -1176,7 +1188,7 @@ Wed, 08 May 2024 11:01:15 GMT - refactor: react-vchart will require component by need by default - refactor: remove built-in simplify data transform -- feat: support `simplify.tolerance` config in `registerMap` API +- feat: support `simplify.tolerance` config in `registerMap` API ## 1.10.5 Thu, 25 Apr 2024 11:57:23 GMT @@ -1469,7 +1481,7 @@ Mon, 22 Jan 2024 12:27:45 GMT ### Updates - feat: support supportsTouchEvents and supportsPointerEvents config -- feat: support `alignSelf` of layout `normal-inline` elements, fix #2072 +- feat: support `alignSelf` of layout `normal-inline` elements, fix #2072 - feat: upgrade vrender @@ -1582,7 +1594,7 @@ Fri, 29 Dec 2023 14:44:05 GMT - fix: error in chart level modification of media query action -- fix: dimension tooltip in the dual-dimension chart contains data of only one dimension, related #1841 +- fix: dimension tooltip in the dual-dimension chart contains data of only one dimension, related #1841 - fix: fix bug in layout when band axis has no domain @@ -1664,7 +1676,7 @@ Wed, 06 Dec 2023 07:34:11 GMT - fix: clear old encode when update, fix #1630 -- fix: fix the problem that track mark has multiple elements in gauge series, related #1643 +- fix: fix the problem that track mark has multiple elements in gauge series, related #1643 - fix: fix the problem that gaugePointer series doesn't support custom `innerRadius`, related #1644 - refactor: unify `getVRenderComponents` method in Component model - fix: fix the type error of markArea @@ -1687,7 +1699,7 @@ Wed, 29 Nov 2023 19:03:36 GMT - fix: clear old encode when update, fix #1630 -- fix: fix the problem that track mark has multiple elements in gauge series, related #1643 +- fix: fix the problem that track mark has multiple elements in gauge series, related #1643 - fix: fix the problem that gaugePointer series doesn't support custom `innerRadius`, related #1644 - refactor: unify `getVRenderComponents` method in Component model @@ -1992,7 +2004,7 @@ Mon, 25 Sep 2023 10:49:42 GMT - feat: support `label.confine` for markLine and markPoint to auto adjust label's position, relate https://github.com/VisActor/VChart/issues/699 - fix: `offsetX` and `offsetY` can not work in mark component - feat: support `minAngle` for pie chart, relate #738 -- feat: disable label animation as default in map series +- feat: disable label animation as default in map series - fix: sankey chart support color config' - feat: increase chart stacking capabilities, provide stackValue to support independent stacking of multiple series @@ -2109,7 +2121,7 @@ Tue, 05 Sep 2023 11:24:47 GMT ### Patches -- fix: fix the issue of `seriesIndex` not work in discrete legend, see #732 +- fix: fix the issue of `seriesIndex` not work in discrete legend, see #732 ### Updates @@ -2269,7 +2281,7 @@ Thu, 10 Aug 2023 05:23:25 GMT - feat: dimension tooltip supports linear axis -- feat: filling full data to map mark data in #420 +- feat: filling full data to map mark data in #420 - feat(background): support background of chart & series - feat(onError): support configuration of onerror in chart instance initoption - feat: supplement sync methods in vchart instance @@ -2443,11 +2455,11 @@ Wed, 26 Jul 2023 03:18:52 GMT - fix(label): pickable shoule be false if label component is configured `interactive: false` - fix the layoutOffsetX|Y not work in normal items - fix: line mark has a different easing in update animation causes strange animation effect -- fix: `channel` config not work in animation +- fix: `channel` config not work in animation - No longer requires to hold down the Ctrl key for zoom interaction & fix zoomLimit bug - fix: default tooltip handler needs to adapt to the scale property - fix(vchart): export IRegionSpec from VChart -- fix(waterfall-position): fix the mistake of compute totalPosition in waterfall-series +- fix(waterfall-position): fix the mistake of compute totalPosition in waterfall-series - fix: compact window variable for non-browser env - fix: compact window variable for non-browser env From 2fb9b4f2688f803d56f9a77963602e580ad85911 Mon Sep 17 00:00:00 2001 From: xile611 Date: Fri, 30 Jan 2026 16:56:39 +0800 Subject: [PATCH 04/27] =?UTF-8?q?feat(vchart-extensions):=20=E5=A2=9E?= =?UTF-8?q?=E5=8A=A0=E6=89=A9=E5=B1=95=E5=9B=BE=E8=A1=A8timeline?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .cursor/rules/specify-rules.mdc | 2 + .../browser/test-page/timeline/group.ts | 154 ++++++ .../browser/test-page/timeline/horizontal.ts | 154 ++++++ .../browser/test-page/timeline/vertical.ts | 158 ++++++ .../src/charts/ranking-bar/ranking-bar.ts | 2 +- .../src/charts/ranking-list/constant.ts | 2 +- .../src/charts/ranking-list/ranking-list.ts | 2 +- .../sequence-scatter-kde-transformer.ts | 6 +- .../sequence-scatter-kde.ts | 2 +- .../sequence-scatter-link-transformer.ts | 9 +- .../sequence-scatter-link.ts | 2 +- .../sequence-scatter-pixel-transformer.ts | 4 +- .../sequence-scatter-pixel.ts | 2 +- .../charts/sequence-scatter-pixel/utils.ts | 2 +- .../src/charts/timeline/index.ts | 4 + .../src/charts/timeline/interface.ts | 13 + .../src/charts/timeline/series/constant.ts | 1 + .../charts/timeline/series/event-series.ts | 495 ++++++++++++++++++ .../src/charts/timeline/series/interface.ts | 38 ++ .../charts/timeline/timeline-transformer.ts | 70 +++ .../src/charts/timeline/timeline.ts | 19 + .../map-label/map-label-transformer.ts | 2 +- packages/vchart-extension/src/index.ts | 1 + packages/vchart/src/vchart-all.ts | 1 + .../checklists/requirements.md | 34 ++ .../contracts/timeline-spec.yaml | 128 +++++ specs/001-add-timeline-chart/data-model.md | 44 ++ specs/001-add-timeline-chart/plan.md | 70 +++ specs/001-add-timeline-chart/quickstart.md | 40 ++ specs/001-add-timeline-chart/research.md | 27 + specs/001-add-timeline-chart/spec.md | 97 ++++ specs/001-add-timeline-chart/tasks.md | 67 +++ 32 files changed, 1634 insertions(+), 18 deletions(-) create mode 100644 packages/vchart-extension/__tests__/runtime/browser/test-page/timeline/group.ts create mode 100644 packages/vchart-extension/__tests__/runtime/browser/test-page/timeline/horizontal.ts create mode 100644 packages/vchart-extension/__tests__/runtime/browser/test-page/timeline/vertical.ts create mode 100644 packages/vchart-extension/src/charts/timeline/index.ts create mode 100644 packages/vchart-extension/src/charts/timeline/interface.ts create mode 100644 packages/vchart-extension/src/charts/timeline/series/constant.ts create mode 100644 packages/vchart-extension/src/charts/timeline/series/event-series.ts create mode 100644 packages/vchart-extension/src/charts/timeline/series/interface.ts create mode 100644 packages/vchart-extension/src/charts/timeline/timeline-transformer.ts create mode 100644 packages/vchart-extension/src/charts/timeline/timeline.ts create mode 100644 specs/001-add-timeline-chart/checklists/requirements.md create mode 100644 specs/001-add-timeline-chart/contracts/timeline-spec.yaml create mode 100644 specs/001-add-timeline-chart/data-model.md create mode 100644 specs/001-add-timeline-chart/plan.md create mode 100644 specs/001-add-timeline-chart/quickstart.md create mode 100644 specs/001-add-timeline-chart/research.md create mode 100644 specs/001-add-timeline-chart/spec.md create mode 100644 specs/001-add-timeline-chart/tasks.md diff --git a/.cursor/rules/specify-rules.mdc b/.cursor/rules/specify-rules.mdc index f120f3e934..0687c8a289 100644 --- a/.cursor/rules/specify-rules.mdc +++ b/.cursor/rules/specify-rules.mdc @@ -3,6 +3,7 @@ Auto-generated from all feature plans. Last updated: 2026-01-15 ## Active Technologies + - TypeScript/React 18 + @visactor/react-vchart, @visactor/vchar (001-react-vchart-demo) - TypeScript 4.9.5 + @visactor/vchart, @visactor/vrender-components (~1.0.37), @visactor/vutils (001-scrollbar-wheel-step) @@ -23,6 +24,7 @@ npm test && npm run lint TypeScript 4.9.5: Follow standard conventions ## Recent Changes + - 001-react-vchart-demo: Added TypeScript/React 18 + @visactor/react-vchart, @visactor/vchar - 001-react-vchart-demo: Added [if applicable, e.g., PostgreSQL, CoreData, files or N/A] diff --git a/packages/vchart-extension/__tests__/runtime/browser/test-page/timeline/group.ts b/packages/vchart-extension/__tests__/runtime/browser/test-page/timeline/group.ts new file mode 100644 index 0000000000..3effa0dfeb --- /dev/null +++ b/packages/vchart-extension/__tests__/runtime/browser/test-page/timeline/group.ts @@ -0,0 +1,154 @@ +import { VChart, type Datum } from '@visactor/vchart'; +import { registerTimelineChart } from '../../../../../src'; +import type { ITimelineChartSpec } from '../../../../../src/charts/timeline'; + +const timelineData = [ + { + id: 'alpha-plan', + group: '研发', + stage: '计划', + time: 1, + event: '需求评审', + detail: 'PRD 评审' + }, + { + id: 'alpha-design', + group: '设计', + stage: '设计', + time: 2, + event: '视觉稿', + detail: '核心页面' + }, + { + id: 'alpha-dev', + group: '研发', + stage: '开发', + time: 3, + event: '功能联调', + detail: '基础功能' + }, + { + id: 'alpha-test', + group: '研发', + stage: '测试', + time: 4, + event: '灰度验证', + detail: '核心流程' + }, + { + id: 'alpha-campaign', + group: '运营', + stage: '运营', + time: 5, + event: '上线预热', + detail: '活动物料' + }, + { + id: 'alpha-launch', + group: '运营', + stage: '发布', + time: 6, + event: '正式上线', + detail: '全量发布' + } +]; + +const getDatumString = (datum: Datum | undefined, key: string) => { + if (!datum || typeof datum !== 'object') { + return ''; + } + const value = (datum as Record)[key]; + return typeof value === 'string' ? value : ''; +}; + +const spec: ITimelineChartSpec = { + type: 'timeline', + name: 'timeline-group', + layoutType: 'horizontal', + padding: { + left: 80, + right: 40, + top: 20, + bottom: 40 + }, + data: [ + { + id: 'timeline-data', + values: timelineData + } + ], + axes: [ + { + orient: 'bottom', + type: 'band', + label: { + formatMethod: (value: string | string[]) => { + const raw = Array.isArray(value) ? value[0] : value; + return raw ? `第${raw}阶段` : ''; + } + } + } + ], + series: [ + { + type: 'event', + dataId: 'timeline-data', + timeField: 'time', + seriesField: 'group', + eventField: 'event', + dotTypeField: 'stage', + title: { + style: { + fill: '#2e2f32' + } + }, + subTitle: { + style: { + fill: '#6b6f76', + dy: 6 + } + } + } + ], + tooltip: { + mark: { + title: { + value: (datum?: Datum) => getDatumString(datum, 'event') + }, + content: [ + { + key: '分组', + value: (datum?: Datum) => getDatumString(datum, 'group') + }, + { + key: '阶段', + value: (datum?: Datum) => getDatumString(datum, 'stage') + }, + { + key: '说明', + value: (datum?: Datum) => getDatumString(datum, 'detail') + } + ] + } + } +}; + +declare global { + interface Window { + vchart?: VChart; + } +} + +const run = () => { + registerTimelineChart(); + const cs = new VChart(spec, { + dom: document.getElementById('chart') as HTMLElement, + onError: err => { + console.error(err); + } + }); + cs.renderSync(); + window.vchart = cs; +}; + +run(); diff --git a/packages/vchart-extension/__tests__/runtime/browser/test-page/timeline/horizontal.ts b/packages/vchart-extension/__tests__/runtime/browser/test-page/timeline/horizontal.ts new file mode 100644 index 0000000000..73f6f6dfd2 --- /dev/null +++ b/packages/vchart-extension/__tests__/runtime/browser/test-page/timeline/horizontal.ts @@ -0,0 +1,154 @@ +import { VChart, type Datum } from '@visactor/vchart'; +import { registerTimelineChart } from '../../../../../src'; +import type { ITimelineChartSpec } from '../../../../../src/charts/timeline'; + +const timelineData = [ + { + id: 'q1', + quarter: '2023 年 Q1', + title: '项目启动', + detail: '· 团队组建\n· 确定技术选型', + position: 'top', + color: '#8f69ff', + time: 1 + }, + { + id: 'q2', + quarter: '2023 年 Q2', + title: '产品 MVP', + detail: '· 完成核心功能开发\n· 发布内测版本', + position: 'bottom', + color: '#4c7dff', + time: 2 + }, + { + id: 'q3', + quarter: '2023 年 Q3', + title: '市场推广', + detail: '· 线上营销活动\n· 拓展商企合作伙伴', + position: 'top', + color: '#f4c21f', + time: 3 + }, + { + id: 'q4', + quarter: '2023 年 Q4', + title: 'A 轮融资', + detail: '· 完成融资千万\n· 扩大研发团队', + position: 'bottom', + color: '#f39b3d', + time: 4 + } +]; + +const getDatumString = (datum: Datum | undefined, key: string) => { + if (!datum || typeof datum !== 'object') { + return ''; + } + const value = (datum as Record)[key]; + return typeof value === 'string' ? value : ''; +}; + +const spec: ITimelineChartSpec = { + type: 'timeline', + name: 'timeline-horizontal', + layoutType: 'horizontal', + padding: { + left: 80, + right: 80, + top: 120, + bottom: 120 + }, + data: [ + { + id: 'timeline-data', + values: timelineData + } + ], + axes: [ + { + orient: 'bottom', + type: 'band', + label: { + visible: false + }, + tick: { + visible: false + }, + grid: { + visible: false + }, + domainLine: { + visible: false + } + } + ], + series: [ + { + type: 'event', + dataId: 'timeline-data', + timeField: 'time', + eventField: 'title', + subTitleField: 'detail', + dotTypeField: 'quarter', + labelPosition: 'top-bottom', + dot: { + style: { + size: 12, + fill: (datum: Datum) => String((datum as Record).color ?? '') + } + }, + title: { + style: { + fill: '#2e2f32', + fontSize: 14, + fontWeight: 600 + } + }, + subTitle: { + style: { + fill: '#6b6f76', + fontSize: 12, + lineHeight: 18 + } + } + } + ], + tooltip: { + mark: { + title: { + value: (datum?: Datum) => getDatumString(datum, 'title') + }, + content: [ + { + key: '季度', + value: (datum?: Datum) => getDatumString(datum, 'quarter') + }, + { + key: '内容', + value: (datum?: Datum) => getDatumString(datum, 'detail') + } + ] + } + } +}; + +declare global { + interface Window { + vchart?: VChart; + } +} + +const run = () => { + registerTimelineChart(); + const cs = new VChart(spec, { + dom: document.getElementById('chart') as HTMLElement, + onError: err => { + console.error(err); + } + }); + cs.renderSync(); + window.vchart = cs; +}; + +run(); diff --git a/packages/vchart-extension/__tests__/runtime/browser/test-page/timeline/vertical.ts b/packages/vchart-extension/__tests__/runtime/browser/test-page/timeline/vertical.ts new file mode 100644 index 0000000000..899e0cb893 --- /dev/null +++ b/packages/vchart-extension/__tests__/runtime/browser/test-page/timeline/vertical.ts @@ -0,0 +1,158 @@ +import { VChart, type Datum } from '@visactor/vchart'; +import { registerTimelineChart } from '../../../../../src'; +import type { ITimelineChartSpec } from '../../../../../src/charts/timeline'; + +const timelineData = [ + { + id: 'alpha-kickoff', + project: 'Project Alpha', + group: '研发', + stage: '立项', + time: new Date('2024-01-02').getTime(), + event: '立项', + detail: '需求确认' + }, + { + id: 'alpha-design', + project: 'Project Alpha', + group: '研发', + stage: '设计', + time: new Date('2024-02-01').getTime(), + event: '设计', + detail: '视觉/交互' + }, + { + id: 'alpha-release', + project: 'Project Alpha', + group: '研发', + stage: '发布', + time: new Date('2024-03-01').getTime(), + event: '发布', + detail: '对外上线' + }, + { + id: 'beta-warmup', + project: 'Project Beta', + group: '运营', + stage: '预热', + time: new Date('2024-01-06').getTime(), + event: '预热', + detail: '内容投放' + }, + { + id: 'beta-campaign', + project: 'Project Beta', + group: '运营', + stage: '活动', + time: new Date('2024-02-05').getTime(), + event: '活动', + detail: '主站曝光' + }, + { + id: 'beta-review', + project: 'Project Beta', + group: '运营', + stage: '复盘', + time: new Date('2024-03-05').getTime(), + event: '复盘', + detail: '指标总结' + } +]; + +const getDatumString = (datum: Datum | undefined, key: string) => { + if (!datum || typeof datum !== 'object') { + return ''; + } + const value = (datum as Record)[key]; + return typeof value === 'string' ? value : ''; +}; + +const spec: ITimelineChartSpec = { + type: 'timeline', + name: 'timeline-vertical', + layoutType: 'vertical', + data: [ + { + id: 'timeline-data', + values: timelineData + } + ], + axes: [ + { + orient: 'left', + type: 'time', + label: { + // formatMethod: (value: string | string[]) => { + // const raw = Array.isArray(value) ? value[0] : value; + // const timeValue = Number(raw); + // if (Number.isFinite(timeValue)) { + // return new Date(timeValue).toLocaleDateString(); + // } + // return raw ? String(raw) : ''; + // } + } + } + ], + series: [ + { + type: 'event', + dataId: 'timeline-data', + timeField: 'time', + seriesField: 'group', + eventField: 'event', + dotTypeField: 'stage', + title: { + style: { + fill: '#2e2f32' + } + }, + subTitle: { + style: { + fill: '#6b6f76', + dy: 6 + } + } + } + ], + tooltip: { + mark: { + title: { + value: (datum?: Datum) => getDatumString(datum, 'event') + }, + content: [ + { + key: '项目', + value: (datum?: Datum) => getDatumString(datum, 'project') + }, + { + key: '阶段', + value: (datum?: Datum) => getDatumString(datum, 'stage') + }, + { + key: '说明', + value: (datum?: Datum) => getDatumString(datum, 'detail') + } + ] + } + } +}; + +declare global { + interface Window { + vchart?: VChart; + } +} + +const run = () => { + registerTimelineChart(); + const cs = new VChart(spec, { + dom: document.getElementById('chart') as HTMLElement, + onError: err => { + console.error(err); + } + }); + cs.renderSync(); + window.vchart = cs; +}; + +run(); diff --git a/packages/vchart-extension/src/charts/ranking-bar/ranking-bar.ts b/packages/vchart-extension/src/charts/ranking-bar/ranking-bar.ts index fe7e3ed08d..e7447658b8 100644 --- a/packages/vchart-extension/src/charts/ranking-bar/ranking-bar.ts +++ b/packages/vchart-extension/src/charts/ranking-bar/ranking-bar.ts @@ -1,4 +1,4 @@ -import { IRankingBarSpec } from './interface'; +import type { IRankingBarSpec } from './interface'; import { VChart, BaseChart } from '@visactor/vchart'; import { RankingBarChartSpecTransformer } from './ranking-bar-transformer'; diff --git a/packages/vchart-extension/src/charts/ranking-list/constant.ts b/packages/vchart-extension/src/charts/ranking-list/constant.ts index eaf063834e..797df516bd 100644 --- a/packages/vchart-extension/src/charts/ranking-list/constant.ts +++ b/packages/vchart-extension/src/charts/ranking-list/constant.ts @@ -1,4 +1,4 @@ -import { IRankingListSpec } from './interface'; +import type { IRankingListSpec } from './interface'; const cornerRadius = 5; const animationDuration = 1000; diff --git a/packages/vchart-extension/src/charts/ranking-list/ranking-list.ts b/packages/vchart-extension/src/charts/ranking-list/ranking-list.ts index 5b9c9020b2..272046cc0c 100644 --- a/packages/vchart-extension/src/charts/ranking-list/ranking-list.ts +++ b/packages/vchart-extension/src/charts/ranking-list/ranking-list.ts @@ -1,4 +1,4 @@ -import { IRankingListSpec } from './interface'; +import type { IRankingListSpec } from './interface'; import { VChart, BaseChart, BarChart } from '@visactor/vchart'; import { RankingListChartSpecTransformer } from './ranking-list-transformer'; diff --git a/packages/vchart-extension/src/charts/sequence-scatter-kde/sequence-scatter-kde-transformer.ts b/packages/vchart-extension/src/charts/sequence-scatter-kde/sequence-scatter-kde-transformer.ts index 5c4c1e77cf..644e3012d5 100644 --- a/packages/vchart-extension/src/charts/sequence-scatter-kde/sequence-scatter-kde-transformer.ts +++ b/packages/vchart-extension/src/charts/sequence-scatter-kde/sequence-scatter-kde-transformer.ts @@ -1,7 +1,7 @@ -import { Datum } from '@visactor/vchart/src/typings'; +import type { Datum } from '@visactor/vchart/src/typings'; import type { ISequenceScatterKDESpec } from './interface'; import { CommonChartSpecTransformer } from '@visactor/vchart'; -import { Point } from './interface'; +import type { Point } from './interface'; import { calculateKDE } from './utils'; const DATA_KEY = 'dataKey'; @@ -83,7 +83,7 @@ export class SequenceScatterKDEChartSpecTransformer extends CommonChartSpecTrans type: 'text', dataIndex: 1, style: { - text: (datum: Datum) => datum['iter'], + text: (datum: Datum) => datum.iter, x: 10, y: () => 10, textBaseline: 'top', diff --git a/packages/vchart-extension/src/charts/sequence-scatter-kde/sequence-scatter-kde.ts b/packages/vchart-extension/src/charts/sequence-scatter-kde/sequence-scatter-kde.ts index c72061b5b2..0b02909198 100644 --- a/packages/vchart-extension/src/charts/sequence-scatter-kde/sequence-scatter-kde.ts +++ b/packages/vchart-extension/src/charts/sequence-scatter-kde/sequence-scatter-kde.ts @@ -1,4 +1,4 @@ -import { ISequenceScatterKDESpec } from './interface'; +import type { ISequenceScatterKDESpec } from './interface'; import { VChart, BaseChart, ScatterChart } from '@visactor/vchart'; import { SequenceScatterKDEChartSpecTransformer } from './sequence-scatter-kde-transformer'; diff --git a/packages/vchart-extension/src/charts/sequence-scatter-link/sequence-scatter-link-transformer.ts b/packages/vchart-extension/src/charts/sequence-scatter-link/sequence-scatter-link-transformer.ts index a40644337b..95f2be3f76 100644 --- a/packages/vchart-extension/src/charts/sequence-scatter-link/sequence-scatter-link-transformer.ts +++ b/packages/vchart-extension/src/charts/sequence-scatter-link/sequence-scatter-link-transformer.ts @@ -1,4 +1,4 @@ -import { Datum } from '@visactor/vchart/src/typings'; +import type { Datum } from '@visactor/vchart/src/typings'; import type { ISequenceScatterLinkSpec } from './interface'; import { CommonChartSpecTransformer } from '@visactor/vchart'; @@ -11,7 +11,7 @@ export class SequenceScatterLinkChartSpecTransformer extends CommonChartSpecTran transformSpec(spec: any): void { super.transformSpec(spec); const dataSpecs = processSequenceData(spec as unknown as ISequenceScatterLinkSpec); - const showTooltip = spec.taskType === 'neighborhood' ? false : true; + const showTooltip = spec.taskType !== 'neighborhood'; spec.type = 'common'; @@ -76,9 +76,8 @@ export class SequenceScatterLinkChartSpecTransformer extends CommonChartSpecTran lineDash: (datum: { type: string }) => { if (datum.type === 'same_type') { return [0, 0]; - } else { - return [3, 2]; } + return [3, 2]; }, lineWidth: 0.8, strokeOpacity: 0.6 @@ -122,7 +121,7 @@ export class SequenceScatterLinkChartSpecTransformer extends CommonChartSpecTran visible: true, style: { visible: () => { - return spec.taskType == 'neighborhood'; + return spec.taskType === 'neighborhood'; }, type: 'text', fontFamily: 'Console', diff --git a/packages/vchart-extension/src/charts/sequence-scatter-link/sequence-scatter-link.ts b/packages/vchart-extension/src/charts/sequence-scatter-link/sequence-scatter-link.ts index f65c7b5505..3fd1626e90 100644 --- a/packages/vchart-extension/src/charts/sequence-scatter-link/sequence-scatter-link.ts +++ b/packages/vchart-extension/src/charts/sequence-scatter-link/sequence-scatter-link.ts @@ -1,4 +1,4 @@ -import { ISequenceScatterLinkSpec } from './interface'; +import type { ISequenceScatterLinkSpec } from './interface'; import { VChart, BaseChart, ScatterChart } from '@visactor/vchart'; import { SequenceScatterLinkChartSpecTransformer } from './sequence-scatter-link-transformer'; diff --git a/packages/vchart-extension/src/charts/sequence-scatter-pixel/sequence-scatter-pixel-transformer.ts b/packages/vchart-extension/src/charts/sequence-scatter-pixel/sequence-scatter-pixel-transformer.ts index cb97d6c0f3..c0c1246d36 100644 --- a/packages/vchart-extension/src/charts/sequence-scatter-pixel/sequence-scatter-pixel-transformer.ts +++ b/packages/vchart-extension/src/charts/sequence-scatter-pixel/sequence-scatter-pixel-transformer.ts @@ -1,4 +1,4 @@ -import { Datum } from '@visactor/vchart/src/typings'; +import type { Datum } from '@visactor/vchart/src/typings'; import type { ISequenceScatterPixelSpec } from './interface'; import { CommonChartSpecTransformer } from '@visactor/vchart'; import { processSequenceData } from './utils'; @@ -71,7 +71,7 @@ export class SequenceScatterPixelChartSpecTransformer extends CommonChartSpecTra type: 'text', dataIndex: 1, style: { - text: (datum: Datum) => datum['inter'], + text: (datum: Datum) => datum.inter, x: 50, y: () => 10, textBaseline: 'top', diff --git a/packages/vchart-extension/src/charts/sequence-scatter-pixel/sequence-scatter-pixel.ts b/packages/vchart-extension/src/charts/sequence-scatter-pixel/sequence-scatter-pixel.ts index 00697a4203..234d512ee0 100644 --- a/packages/vchart-extension/src/charts/sequence-scatter-pixel/sequence-scatter-pixel.ts +++ b/packages/vchart-extension/src/charts/sequence-scatter-pixel/sequence-scatter-pixel.ts @@ -1,4 +1,4 @@ -import { ISequenceScatterPixelSpec } from './interface'; +import type { ISequenceScatterPixelSpec } from './interface'; import { VChart, BaseChart, ScatterChart } from '@visactor/vchart'; import { SequenceScatterPixelChartSpecTransformer } from './sequence-scatter-pixel-transformer'; diff --git a/packages/vchart-extension/src/charts/sequence-scatter-pixel/utils.ts b/packages/vchart-extension/src/charts/sequence-scatter-pixel/utils.ts index 1b316088c1..313a45a7a2 100644 --- a/packages/vchart-extension/src/charts/sequence-scatter-pixel/utils.ts +++ b/packages/vchart-extension/src/charts/sequence-scatter-pixel/utils.ts @@ -1,4 +1,4 @@ -import { ISequenceScatterPixelSpec } from './interface'; +import type { ISequenceScatterPixelSpec } from './interface'; import { BACKGROUND_KEY, DATA_KEY } from './constant'; // 将RGB三元组数组转换为Canvas可用的imageData diff --git a/packages/vchart-extension/src/charts/timeline/index.ts b/packages/vchart-extension/src/charts/timeline/index.ts new file mode 100644 index 0000000000..a4bd6f828d --- /dev/null +++ b/packages/vchart-extension/src/charts/timeline/index.ts @@ -0,0 +1,4 @@ +export * from './interface'; +export * from './timeline'; +export * from './series/interface'; +export * from './series/event-series'; diff --git a/packages/vchart-extension/src/charts/timeline/interface.ts b/packages/vchart-extension/src/charts/timeline/interface.ts new file mode 100644 index 0000000000..544e149993 --- /dev/null +++ b/packages/vchart-extension/src/charts/timeline/interface.ts @@ -0,0 +1,13 @@ +import type { IChartExtendsSeriesSpec, IChartSpec, ICartesianAxisSpec } from '@visactor/vchart'; +import type { IEventSeriesSpec } from './series/interface'; + +export type TimelineLayoutType = 'horizontal' | 'vertical' | 'radial' | 's-curve'; + +export interface ITimelineChartSpec + extends IChartSpec, + Omit, 'type' | 'title'> { + type: 'timeline'; + layoutType?: TimelineLayoutType; + series?: IEventSeriesSpec[]; + axes?: ICartesianAxisSpec[]; +} diff --git a/packages/vchart-extension/src/charts/timeline/series/constant.ts b/packages/vchart-extension/src/charts/timeline/series/constant.ts new file mode 100644 index 0000000000..fa45bedd0b --- /dev/null +++ b/packages/vchart-extension/src/charts/timeline/series/constant.ts @@ -0,0 +1 @@ +export const EVENT_SERIES_TYPE = 'event'; diff --git a/packages/vchart-extension/src/charts/timeline/series/event-series.ts b/packages/vchart-extension/src/charts/timeline/series/event-series.ts new file mode 100644 index 0000000000..31126d68ef --- /dev/null +++ b/packages/vchart-extension/src/charts/timeline/series/event-series.ts @@ -0,0 +1,495 @@ +import type { StringOrNumber } from '@visactor/vchart'; +import { + AttributeLevel, + BaseSeries, + DEFAULT_DATA_KEY, + Factory, + MarkTypeEnum, + SeriesMarkNameEnum, + baseSeriesMark, + registerSymbolMark, + registerTextMark, + registerLineMark, + STATE_VALUE_ENUM, + type Datum, + type IMark, + type IPoint, + type SeriesMarkMap, + BaseSeriesSpecTransformer +} from '@visactor/vchart'; +import { EVENT_SERIES_TYPE } from './constant'; +import type { IEventSeriesSpec, LabelPosition } from './interface'; + +type AxisHelper = { + isContinuous?: boolean; + getSpec?: () => { type?: string }; + dataToPosition?: (values: any[], cfg?: { bandPosition?: number }) => number; + valueToPosition?: (value: any) => number; +}; + +/** 默认 title 字体大小 */ +const DEFAULT_TITLE_FONT_SIZE = 14; +/** 默认 dot 和 label 之间的间距 */ +const DEFAULT_DOT_LABEL_GAP = 6; +/** 默认 title 和 subTitle 之间的间距 */ +const DEFAULT_TITLE_SUBTITLE_GAP = 4; + +const eventSeriesMark: SeriesMarkMap = { + ...baseSeriesMark, + [SeriesMarkNameEnum.line]: { name: SeriesMarkNameEnum.line, type: MarkTypeEnum.line }, + [SeriesMarkNameEnum.dot]: { name: SeriesMarkNameEnum.dot, type: MarkTypeEnum.symbol }, + [SeriesMarkNameEnum.title]: { name: SeriesMarkNameEnum.title, type: MarkTypeEnum.text }, + [SeriesMarkNameEnum.subTitle]: { name: SeriesMarkNameEnum.subTitle, type: MarkTypeEnum.text } +}; + +export class EventSeries extends BaseSeries { + static readonly type: string = EVENT_SERIES_TYPE; + type = EVENT_SERIES_TYPE as any; + + static readonly mark: SeriesMarkMap = eventSeriesMark; + static readonly transformerConstructor = BaseSeriesSpecTransformer as any; + readonly transformerConstructor = BaseSeriesSpecTransformer as any; + + protected declare _spec: T; + + private _dotMark?: IMark; + private _titleMark?: IMark; + private _subTitleMark?: IMark; + private _axisLineMark?: IMark; + + private _timeField?: string; + private _eventField?: string; + private _subTitleField?: string; + private _layoutType?: T['layoutType']; + private _labelPosition?: LabelPosition; + private _xAxisHelper?: AxisHelper; + private _yAxisHelper?: AxisHelper; + private _scaleX?: unknown; + private _scaleY?: unknown; + + setAttrFromSpec(): void { + super.setAttrFromSpec(); + this.setSeriesField(this._spec.seriesField); + this._timeField = this._spec.timeField as string | undefined; + this._eventField = this._spec.eventField; + this._subTitleField = this._spec.subTitleField; + this._layoutType = this._spec.layoutType; + this._labelPosition = this._spec.labelPosition; + } + + getDimensionField(): string[] { + return this._timeField ? [this._timeField] : []; + } + + getMeasureField(): string[] { + return []; + } + + initMark(): void { + this._axisLineMark = this._createMark(EventSeries.mark.line, { + isSeriesMark: true, + groupKey: this._seriesField + }); + + this._dotMark = this._createMark(EventSeries.mark.dot, { + isSeriesMark: true + }); + + this._titleMark = this._createMark(EventSeries.mark.title); + + this._subTitleMark = this._createMark(EventSeries.mark.subTitle); + } + + initMarkStyle(): void { + if (this._axisLineMark) { + this.setMarkStyle( + this._axisLineMark, + { + points: this._getAxisPoints.bind(this), + visible: this._isFirstDataInGroup.bind(this), + stroke: '#c0c3c7', + lineWidth: 1 + }, + STATE_VALUE_ENUM.STATE_NORMAL, + AttributeLevel.Series + ); + } + + const dotSpec = this._spec.dot as { size?: number; style?: { size?: number; fill?: unknown } } | undefined; + const dotSize = + typeof dotSpec?.style?.size === 'number' + ? dotSpec.style.size + : typeof dotSpec?.size === 'number' + ? dotSpec.size + : 8; + + const titleStyle = this._spec.title?.style ?? {}; + const subTitleStyle = this._spec.subTitle?.style ?? {}; + + // 获取 title 字体大小，用于计算 subTitle 的位置 + const titleFontSize = typeof titleStyle.fontSize === 'number' ? titleStyle.fontSize : DEFAULT_TITLE_FONT_SIZE; + + // dot 和 label 之间的间距 + const labelOffset = dotSize / 2 + DEFAULT_DOT_LABEL_GAP; + + if (this._dotMark) { + this.setMarkStyle( + this._dotMark, + { + x: (datum: Datum) => this._getPoint(datum).x, + y: (datum: Datum) => this._getPoint(datum).y, + size: dotSize, + fill: dotSpec?.style?.fill ?? this.getColorAttribute() + }, + STATE_VALUE_ENUM.STATE_NORMAL, + AttributeLevel.Series + ); + } + + if (this._titleMark) { + this.setMarkStyle( + this._titleMark, + { + fontSize: DEFAULT_TITLE_FONT_SIZE, + ...titleStyle, + x: (datum: Datum) => this._getTitlePosition(datum, labelOffset).x, + y: (datum: Datum) => this._getTitlePosition(datum, labelOffset).y, + textAlign: (datum: Datum) => this._getLabelTextAlign(datum), + textBaseline: (datum: Datum) => this._getLabelTextBaseline(datum), + text: (datum: Datum) => this._getDatumString(datum, this._eventField) + }, + STATE_VALUE_ENUM.STATE_NORMAL, + AttributeLevel.Series + ); + } + + if (this._subTitleMark) { + // subTitle 位置 = title 位置 + title 字体大小 + 间距 + const subTitleOffset = labelOffset + titleFontSize + DEFAULT_TITLE_SUBTITLE_GAP; + + this.setMarkStyle( + this._subTitleMark, + { + ...subTitleStyle, + x: (datum: Datum) => this._getSubTitlePosition(datum, subTitleOffset).x, + y: (datum: Datum) => this._getSubTitlePosition(datum, subTitleOffset).y, + textAlign: (datum: Datum) => this._getLabelTextAlign(datum), + textBaseline: (datum: Datum) => this._getLabelTextBaseline(datum), + text: (datum: Datum) => this._getDatumString(datum, this._subTitleField) + }, + STATE_VALUE_ENUM.STATE_NORMAL, + AttributeLevel.Series + ); + } + } + + /** + * 根据数据索引判断标签应该放在哪一侧 + * @returns 'primary' 表示 top/left，'secondary' 表示 bottom/right + */ + private _getLabelSide(datum: Datum): 'primary' | 'secondary' { + const data = this._getViewDataList(); + const index = data.indexOf(datum); + const position = this._labelPosition; + + if (this._layoutType === 'vertical') { + // vertical 布局: left/right + switch (position) { + case 'left': + return 'primary'; + case 'right': + return 'secondary'; + case 'left-right': + return index % 2 === 0 ? 'primary' : 'secondary'; + case 'right-left': + return index % 2 === 0 ? 'secondary' : 'primary'; + default: + return 'primary'; // 默认 left + } + } else { + // horizontal 布局: top/bottom + switch (position) { + case 'top': + return 'primary'; + case 'bottom': + return 'secondary'; + case 'top-bottom': + return index % 2 === 0 ? 'primary' : 'secondary'; + case 'bottom-top': + return index % 2 === 0 ? 'secondary' : 'primary'; + default: + return 'primary'; // 默认 top + } + } + } + + /** + * 获取标签的文本对齐方式 + */ + private _getLabelTextAlign(datum: Datum): 'left' | 'right' | 'center' { + if (this._layoutType === 'vertical') { + const side = this._getLabelSide(datum); + return side === 'primary' ? 'right' : 'left'; + } + return 'center'; + } + + /** + * 获取标签的文本基线 + */ + private _getLabelTextBaseline(datum: Datum): 'top' | 'bottom' | 'middle' { + if (this._layoutType === 'vertical') { + return 'middle'; + } + const side = this._getLabelSide(datum); + return side === 'primary' ? 'bottom' : 'top'; + } + + /** + * 获取 title 的位置 + */ + private _getTitlePosition(datum: Datum, offset: number): IPoint { + const point = this._getPoint(datum); + const side = this._getLabelSide(datum); + + if (this._layoutType === 'vertical') { + // vertical: left/right + return { + x: side === 'primary' ? point.x - offset : point.x + offset, + y: point.y + }; + } + // horizontal: top/bottom + return { + x: point.x, + y: side === 'primary' ? point.y - offset : point.y + offset + }; + } + + /** + * 获取 subTitle 的位置 + */ + private _getSubTitlePosition(datum: Datum, offset: number): IPoint { + const point = this._getPoint(datum); + const side = this._getLabelSide(datum); + + if (this._layoutType === 'vertical') { + // vertical: left/right + return { + x: side === 'primary' ? point.x - offset : point.x + offset, + y: point.y + }; + } + // horizontal: top/bottom + return { + x: point.x, + y: side === 'primary' ? point.y - offset : point.y + offset + }; + } + + private _getViewDataList(): Datum[] { + return this.getViewData()?.latestData ?? []; + } + + private _getPoint(datum: Datum): IPoint { + const rect = this._region.getLayoutRect(); + const data = this._getViewDataList(); + const index = data.indexOf(datum); + const count = Math.max(1, data.length); + + // 计算时间方向的位置 (水平布局时是 x，垂直布局时是 y) + let timePercent: number; + if (this._timeField && datum) { + const timeValue = (datum as Record)[this._timeField]; + if (typeof timeValue === 'number') { + // 获取所有时间值来计算范围 + const timeValues = data + .map(d => (d as Record)[this._timeField!] as number) + .filter(v => typeof v === 'number'); + const minTime = Math.min(...timeValues); + const maxTime = Math.max(...timeValues); + + if (maxTime !== minTime) { + timePercent = (timeValue - minTime) / (maxTime - minTime); + } else { + timePercent = 0.5; + } + } else { + timePercent = (index + 0.5) / count; + } + } else { + timePercent = (index + 0.5) / count; + } + + // 计算分类方向的位置（如果有 seriesField） + let categoryPercent = 0.5; + if (this._seriesField && datum) { + const categoryValue = (datum as Record)[this._seriesField]; + const uniqueCategories = Array.from(new Set(data.map(d => (d as Record)[this._seriesField!]))); + const categoryIndex = uniqueCategories.indexOf(categoryValue); + const categoryCount = Math.max(1, uniqueCategories.length); + categoryPercent = (categoryIndex + 0.5) / categoryCount; + } + + if (this._layoutType === 'vertical') { + return { + x: rect.width * categoryPercent, + y: rect.height * timePercent + }; + } + + return { + x: rect.width * timePercent, + y: rect.height * categoryPercent + }; + } + + private _getAxisPoints(datum: Datum): IPoint[] { + const rect = this._region.getLayoutRect(); + const data = this._getViewDataList(); + + // 计算分类方向的位置 + let categoryPercent = 0.5; + if (this._seriesField && datum) { + const categoryValue = (datum as Record)[this._seriesField]; + const uniqueCategories = Array.from(new Set(data.map(d => (d as Record)[this._seriesField!]))); + const categoryIndex = uniqueCategories.indexOf(categoryValue); + const categoryCount = Math.max(1, uniqueCategories.length); + categoryPercent = (categoryIndex + 0.5) / categoryCount; + } + + if (this._layoutType === 'vertical') { + const x = rect.width * categoryPercent; + return [ + { x, y: 0 }, + { x, y: rect.height } + ]; + } + + const y = rect.height * categoryPercent; + return [ + { x: 0, y }, + { x: rect.width, y } + ]; + } + + private _isFirstDataInGroup(datum: Datum): boolean { + if (!this._seriesField) { + const data = this._getViewDataList(); + return data.indexOf(datum) === 0; + } + + const data = this._getViewDataList(); + const categoryValue = (datum as Record)[this._seriesField]; + + // 找到该分类中的第一条数据 + const firstInGroup = data.find(d => (d as Record)[this._seriesField!] === categoryValue); + return datum === firstInGroup; + } + + private _getDatumString(datum: Datum | undefined, field?: string): string { + if (!datum || !field) { + return ''; + } + const value = (datum as Record)[field]; + return typeof value === 'string' ? value : value == null ? '' : String(value); + } + + getStatisticFields(): { key: string; operations: Array<'max' | 'min' | 'values'>; customize?: any[] }[] { + const fields: { key: string; operations: Array<'max' | 'min' | 'values'>; customize?: any[] }[] = []; + + if (this._timeField) { + fields.push({ key: this._timeField, operations: ['max', 'min', 'values'] }); + } + + if (this._seriesField) { + fields.push({ key: this._seriesField, operations: ['values'] }); + } + + return fields; + } + + getGroupFields(): string[] { + return this._seriesField ? [this._seriesField] : []; + } + + getXAxisHelper(): AxisHelper | undefined { + return this._xAxisHelper; + } + + setXAxisHelper(h: AxisHelper) { + this._xAxisHelper = h; + this.onMarkPositionUpdate(); + } + + get scaleX(): unknown { + return this._scaleX; + } + + setScaleX(s: unknown) { + this._scaleX = s; + } + + getYAxisHelper(): AxisHelper | undefined { + return this._yAxisHelper; + } + + setYAxisHelper(h: AxisHelper) { + this._yAxisHelper = h; + this.onMarkPositionUpdate(); + } + + get scaleY(): unknown { + return this._scaleY; + } + + setScaleY(s: unknown) { + this._scaleY = s; + } + + dataToPosition(data: Datum): IPoint { + return this._getPoint(data); + } + + dataToPositionX(data: Datum): number { + return this._getPoint(data).x; + } + + dataToPositionY(data: Datum): number { + return this._getPoint(data).y; + } + + valueToPosition(timeValue: StringOrNumber, eventValue?: StringOrNumber): IPoint { + if (timeValue && typeof timeValue === 'object') { + return this.dataToPosition(timeValue as Datum); + } + + const mockDatum: Record = {}; + if (this._timeField) { + mockDatum[this._timeField] = timeValue; + } + if (this._eventField && eventValue !== undefined) { + mockDatum[this._eventField] = eventValue; + } + return this._getPoint(mockDatum as Datum); + } + + getStackGroupFields(): string[] { + return []; + } + + getStackValueField(): string | undefined { + return undefined; + } + + getActiveMarks(): IMark[] { + return [this._axisLineMark, this._dotMark, this._titleMark, this._subTitleMark].filter(Boolean) as IMark[]; + } +} + +export const registerEventSeries = () => { + registerSymbolMark(); + registerTextMark(); + registerLineMark(); + Factory.registerSeries(EventSeries.type, EventSeries); +}; diff --git a/packages/vchart-extension/src/charts/timeline/series/interface.ts b/packages/vchart-extension/src/charts/timeline/series/interface.ts new file mode 100644 index 0000000000..117f34ccab --- /dev/null +++ b/packages/vchart-extension/src/charts/timeline/series/interface.ts @@ -0,0 +1,38 @@ +import type { + ICartesianSeriesSpec, + ICartesianSeriesTheme, + IMarkSpec, + ISymbolMarkSpec, + ITextMarkSpec, + ILineMarkSpec, + ISeriesSpec +} from '@visactor/vchart'; +import type { TimelineLayoutType } from '../interface'; + +/** horizontal 布局时的标题位置 */ +export type HorizontalLabelPosition = 'top' | 'bottom' | 'top-bottom' | 'bottom-top'; + +/** vertical 布局时的标题位置 */ +export type VerticalLabelPosition = 'left' | 'right' | 'left-right' | 'right-left'; + +/** 标题位置配置 */ +export type LabelPosition = HorizontalLabelPosition | VerticalLabelPosition; + +export interface IEventSeriesSpec extends ISeriesSpec { + type: 'event'; + timeField?: string; + eventField?: string; + subTitleField?: string; + seriesField?: string; + dotTypeField?: string; + layoutType?: TimelineLayoutType; + /** 标题和副标题的位置 */ + labelPosition?: LabelPosition; + name?: string; + dot?: IMarkSpec; + title?: IMarkSpec; + subTitle?: IMarkSpec; + line?: IMarkSpec; +} + +export type IEventSeriesTheme = ICartesianSeriesTheme; diff --git a/packages/vchart-extension/src/charts/timeline/timeline-transformer.ts b/packages/vchart-extension/src/charts/timeline/timeline-transformer.ts new file mode 100644 index 0000000000..7037a496af --- /dev/null +++ b/packages/vchart-extension/src/charts/timeline/timeline-transformer.ts @@ -0,0 +1,70 @@ +import { BaseChartSpecTransformer } from '@visactor/vchart'; +import type { ICartesianAxisSpec, ICartesianLinearAxisSpec } from '@visactor/vchart'; +import type { ITimelineChartSpec } from './interface'; + +export class TimelineChartSpecTransformer< + T extends ITimelineChartSpec = ITimelineChartSpec +> extends BaseChartSpecTransformer { + protected _getDefaultSeriesSpec(spec: T): any { + return super._getDefaultSeriesSpec(spec, [ + 'timeField', + 'eventField', + 'seriesField', + 'dotTypeField', + 'titleField', + 'subTitleField', + 'dot', + 'title', + 'subTitle', + 'symbol' + ]); + } + + transformSpec(spec: T): void { + super.transformSpec(spec); + this.transformSeriesSpec(spec); + const rawAxis = spec.axes?.[0]; + const axisType = rawAxis?.type ?? 'band'; + const axisOrient = rawAxis?.orient; + let layoutType = spec.layoutType; + if (!layoutType) { + if (axisOrient === 'left' || axisOrient === 'right') { + layoutType = 'vertical'; + } else if (axisOrient === 'bottom' || axisOrient === 'top') { + layoutType = 'horizontal'; + } + } + if (!layoutType) { + layoutType = 'horizontal'; + } + spec.layoutType = layoutType; + + const defaultOrient = layoutType === 'vertical' ? 'left' : 'bottom'; + const allowedOrients = layoutType === 'vertical' ? ['left', 'right'] : ['bottom', 'right']; + const orientNormalized: ICartesianAxisSpec['orient'] = allowedOrients.includes(axisOrient ?? '') + ? (axisOrient as ICartesianAxisSpec['orient']) + : (defaultOrient as ICartesianAxisSpec['orient']); + const typeNormalized: ICartesianAxisSpec['type'] = + axisType === 'linear' || axisType === 'time' || axisType === 'band' ? (axisType as any) : 'band'; + const baseAxis: ICartesianAxisSpec = { + ...((rawAxis ?? {}) as ICartesianAxisSpec), + orient: orientNormalized, + type: typeNormalized + }; + if (baseAxis.type === 'linear') { + const linearAxis: ICartesianLinearAxisSpec = { + ...(baseAxis as ICartesianLinearAxisSpec), + zero: (rawAxis as ICartesianLinearAxisSpec)?.zero ?? false + }; + spec.axes = [linearAxis]; + } else { + spec.axes = [baseAxis]; + } + + spec.series?.forEach(seriesSpec => { + if (!seriesSpec.layoutType && spec.layoutType) { + seriesSpec.layoutType = spec.layoutType; + } + }); + } +} diff --git a/packages/vchart-extension/src/charts/timeline/timeline.ts b/packages/vchart-extension/src/charts/timeline/timeline.ts new file mode 100644 index 0000000000..445230c1ea --- /dev/null +++ b/packages/vchart-extension/src/charts/timeline/timeline.ts @@ -0,0 +1,19 @@ +import { TimelineChartSpecTransformer } from './timeline-transformer'; +import type { ITimelineChartSpec } from './interface'; +import { registerEventSeries } from './series/event-series'; +import { BaseChart, Factory, registerMarkTooltipProcessor } from '@visactor/vchart'; + +export class TimelineChart extends BaseChart { + static readonly type: string = 'timeline'; + static readonly seriesType: string = 'event'; + static readonly transformerConstructor = TimelineChartSpecTransformer; + readonly transformerConstructor = TimelineChartSpecTransformer; + readonly type: string = 'timeline'; + readonly seriesType: string = 'event'; +} + +export const registerTimelineChart = () => { + registerMarkTooltipProcessor(); + registerEventSeries(); + Factory.registerChart(TimelineChart.type, TimelineChart); +}; diff --git a/packages/vchart-extension/src/components/map-label/map-label-transformer.ts b/packages/vchart-extension/src/components/map-label/map-label-transformer.ts index 1b7f78450d..32c5782adc 100644 --- a/packages/vchart-extension/src/components/map-label/map-label-transformer.ts +++ b/packages/vchart-extension/src/components/map-label/map-label-transformer.ts @@ -1,5 +1,5 @@ import { BaseComponentSpecTransformer } from '@visactor/vchart'; -import { IMapLabelSpec, IMapLabelStyleSpec } from './type'; +import type { IMapLabelSpec, IMapLabelStyleSpec } from './type'; import { mapLabel } from './theme'; export class MapLabelSpecTransformer< diff --git a/packages/vchart-extension/src/index.ts b/packages/vchart-extension/src/index.ts index 6db81fb8fe..ae1e1b5c8e 100644 --- a/packages/vchart-extension/src/index.ts +++ b/packages/vchart-extension/src/index.ts @@ -17,6 +17,7 @@ export { register3DPlugin } from './charts/3d/plugin'; export * from './charts/pictogram'; export * from './charts/image-cloud'; export * from './charts/candlestick'; +export * from './charts/timeline'; export * from './components/series-break'; export * from './components/bar-link'; diff --git a/packages/vchart/src/vchart-all.ts b/packages/vchart/src/vchart-all.ts index a621f7955a..2f516e085c 100644 --- a/packages/vchart/src/vchart-all.ts +++ b/packages/vchart/src/vchart-all.ts @@ -94,6 +94,7 @@ VChart.useRegisters([ registerSequenceChart, registerCorrelationChart, // 优化vchart-all体积, 默认不注册 + // registerTimelineChart, // registerLiquidChart, // registerVennChart, registerCommonChart, diff --git a/specs/001-add-timeline-chart/checklists/requirements.md b/specs/001-add-timeline-chart/checklists/requirements.md new file mode 100644 index 0000000000..69feec104a --- /dev/null +++ b/specs/001-add-timeline-chart/checklists/requirements.md @@ -0,0 +1,34 @@ +# Specification Quality Checklist: Timeline 图表类型 + +**Purpose**: Validate specification completeness and quality before proceeding to planning +**Created**: 2026-01-28 +**Feature**: [spec.md](../spec.md) + +## Content Quality + +- [x] No implementation details (languages, frameworks, APIs) +- [x] Focused on user value and business needs +- [x] Written for non-technical stakeholders +- [x] All mandatory sections completed + +## Requirement Completeness + +- [x] No [NEEDS CLARIFICATION] markers remain +- [x] Requirements are testable and unambiguous +- [x] Success criteria are measurable +- [x] Success criteria are technology-agnostic (no implementation details) +- [x] All acceptance scenarios are defined +- [x] Edge cases are identified +- [x] Scope is clearly bounded +- [x] Dependencies and assumptions identified + +## Feature Readiness + +- [x] All functional requirements have clear acceptance criteria +- [x] User scenarios cover primary flows +- [x] Feature meets measurable outcomes defined in Success Criteria +- [x] No implementation details leak into specification + +## Notes + +- Items marked incomplete require spec updates before `/speckit.clarify` or `/speckit.plan` diff --git a/specs/001-add-timeline-chart/contracts/timeline-spec.yaml b/specs/001-add-timeline-chart/contracts/timeline-spec.yaml new file mode 100644 index 0000000000..f48cc35039 --- /dev/null +++ b/specs/001-add-timeline-chart/contracts/timeline-spec.yaml @@ -0,0 +1,128 @@ +openapi: 3.0.3 +info: + title: Timeline Spec Contract + version: 1.0.0 + description: Public configuration contract for Timeline chart specifications. +paths: + /timeline/validate: + post: + summary: Validate a timeline chart spec + requestBody: + required: true + content: + application/json: + schema: + $ref: '#/components/schemas/TimelineSpec' + responses: + '200': + description: Validation result + content: + application/json: + schema: + type: object + properties: + valid: + type: boolean + errors: + type: array + items: + type: string +components: + schemas: + TimelineSpec: + type: object + required: + - type + - data + - layout + properties: + type: + type: string + enum: [timeline] + layout: + $ref: '#/components/schemas/TimelineLayout' + data: + $ref: '#/components/schemas/TimelineData' + TimelineLayout: + type: object + required: + - type + properties: + type: + type: string + enum: [horizontal, vertical, radial, s-curve] + options: + type: object + additionalProperties: true + TimelineData: + type: object + required: + - eventPoints + properties: + timePoints: + type: array + items: + $ref: '#/components/schemas/TimePoint' + eventPoints: + type: array + items: + $ref: '#/components/schemas/EventPoint' + series: + type: array + items: + $ref: '#/components/schemas/Series' + TimePoint: + type: object + required: + - id + - time + properties: + id: + type: string + time: + oneOf: + - type: string + - type: number + label: + type: string + meta: + type: object + additionalProperties: true + EventPoint: + type: object + required: + - id + - time + - title + properties: + id: + type: string + time: + oneOf: + - type: string + - type: number + title: + type: string + description: + type: string + seriesId: + type: string + seriesName: + type: string + icon: + type: string + meta: + type: object + additionalProperties: true + Series: + type: object + required: + - id + properties: + id: + type: string + name: + type: string + style: + type: object + additionalProperties: true diff --git a/specs/001-add-timeline-chart/data-model.md b/specs/001-add-timeline-chart/data-model.md new file mode 100644 index 0000000000..5348a78b48 --- /dev/null +++ b/specs/001-add-timeline-chart/data-model.md @@ -0,0 +1,44 @@ +# Data Model: Timeline 图表类型 + +## Entities + +### 时间点 (TimePoint) +- Fields: + - id: String + - time: Date/String/Number + - label: String (optional) + - meta: Object (optional) + +### 事件点 (EventPoint) +- Fields: + - id: String + - time: Date/String/Number + - title: String + - description: String (optional) + - seriesId: String (optional) + - seriesName: String (optional) + - icon: String (optional) + - meta: Object (optional) + +### 系列 (Series) +- Fields: + - id: String + - name: String + - style: Object (optional) + +## Spec 结构（概要） +- type: 'timeline' +- data: + - timePoints: TimePoint[] + - eventPoints: EventPoint[] + - series: Series[] (optional) +- layout: + - type: 'horizontal' | 'vertical' | 'radial' | 's-curve' + - options: Object +- tooltip/crosshair/legend: 复用现有组件结构 + +## Validation Rules +- 所有 EventPoint 必须包含可解析的 time +- layout.type 必须为支持的枚举之一 +- 多系列时，seriesId/seriesName 至少一个有效 +- timePoints 可为空，但必须支持仅 timePoints 的展示 diff --git a/specs/001-add-timeline-chart/plan.md b/specs/001-add-timeline-chart/plan.md new file mode 100644 index 0000000000..9a161f2927 --- /dev/null +++ b/specs/001-add-timeline-chart/plan.md @@ -0,0 +1,70 @@ +# Implementation Plan: Timeline 图表类型 + +**Branch**: `001-add-timeline-chart` | **Date**: 2026-01-28 | **Spec**: [spec.md](./spec.md) +**Input**: Feature specification from `/specs/001-add-timeline-chart/spec.md` + +**Note**: This template is filled in by the `/speckit.plan` command. See `.specify/templates/commands/plan.md` for the execution workflow. + +## Summary + +新增 Timeline 图表类型，支持展示事件点与时间点，并具备横向、纵向、径向、S 线等布局类型，支持多系列事件点。技术上在现有 VChart 架构内实现新的 chart 类型与布局模块，遵循跨端一致性与类型约束，提供清晰的 Spec 与示例。 + +## Technical Context + +**Language/Version**: TypeScript (strict) +**Primary Dependencies**: @visactor/vchart, @visactor/vchart-types, VRender/VGrammar（内部体系） +**Storage**: N/A +**Testing**: Jest/Vitest 单元测试 + 视觉回归 +**Target Platform**: Web（桌面/移动）、多端封装一致行为 +**Project Type**: Monorepo（Rush） +**Performance Goals**: 60fps 交互，Tooltip/Crosshair 响应 <16ms +**Constraints**: 体积控制，跨端一致性，类型严格，无控制台调试输出 +**Scale/Scope**: 新增一个图表类型及其布局/渲染/交互，不引入外部服务 + +## Constitution Check + +_GATE: Must pass before Phase 0 research. Re-check after Phase 1 design._ + +- 规范驱动：已有 spec.md，后续设计与实现遵循任务清单 +- 类型对齐：新增类型需落位 `@visactor/vchart-types` +- 代码质量：遵循 ESLint/Prettier，严格 TypeScript +- 测试：需新增单元测试与视觉回归用例 +- 文档与示例：需在 docs 站点提供示例与 API 文档 +- 跨端一致性：Tooltip/Crosshair/Legend 等交互行为需对齐 +- 许可证与依赖：不新增不兼容许可证依赖 + +## Project Structure + +### Documentation (this feature) + +```text +specs/001-add-timeline-chart/ +├── plan.md # This file (/speckit.plan command output) +├── research.md # Phase 0 output (/speckit.plan command) +├── data-model.md # Phase 1 output (/speckit.plan command) +├── quickstart.md # Phase 1 output (/speckit.plan command) +├── contracts/ # Phase 1 output (/speckit.plan command) +└── tasks.md # Phase 2 output (/speckit.tasks command - NOT created by /speckit.plan) +``` + +### Source Code (repository root) + +```text +packages/vchart/ +├── src/chart/timeline/ # Timeline 图表主实现 +├── src/component/... # 复用或新增组件 +├── src/theme/... # 默认主题扩展（如需） +└── __tests__/... # 单元与视觉测试用例 + +packages/vchart-types/ +└── types/chart/timeline.d.ts # Timeline 的对外类型定义 + +packages/docs/ (或内部 docs 包) +└── docs/timeline/* # 文档与示例 +``` + +**Structure Decision**: 在 vchart 核心包内新增 timeline chart 目录；类型定义落位 vchart-types；示例与文档在 docs 包维护；测试用例与视觉回归在 vchart 内。 + +## Complexity Tracking + +No constitution violations identified for this feature. diff --git a/specs/001-add-timeline-chart/quickstart.md b/specs/001-add-timeline-chart/quickstart.md new file mode 100644 index 0000000000..13225c9ae3 --- /dev/null +++ b/specs/001-add-timeline-chart/quickstart.md @@ -0,0 +1,40 @@ +# Quickstart: Timeline 图表类型 + +## 目标 +用最小配置创建一个 Timeline 图表，展示时间点与事件点，并切换布局。 + +## 步骤 + +1. 准备数据 + - 至少包含一组事件点 + - 可选提供时间点与系列信息 + +2. 选择布局类型 + - horizontal / vertical / radial / s-curve + +3. 渲染图表 + - 使用 Timeline 图表类型与配置项 + +## 最小示例（结构示意） + +```json +{ + "type": "timeline", + "layout": { "type": "horizontal" }, + "data": { + "timePoints": [ + { "id": "t1", "time": "2025-01-01", "label": "开始" } + ], + "eventPoints": [ + { "id": "e1", "time": "2025-01-01", "title": "事件 A" } + ], + "series": [ + { "id": "s1", "name": "系列 1" } + ] + } +} +``` + +## 成功标准 +- 图表能展示时间点与事件点 +- 切换布局后视觉结构发生变化 diff --git a/specs/001-add-timeline-chart/research.md b/specs/001-add-timeline-chart/research.md new file mode 100644 index 0000000000..cc2520b931 --- /dev/null +++ b/specs/001-add-timeline-chart/research.md @@ -0,0 +1,27 @@ +# Research: Timeline 图表类型 + +## 决策与依据 + +### Decision 1: 支持四种布局类型作为首期范围 +- **Decision**: 首期支持横向、纵向、径向、S 线布局 +- **Rationale**: 覆盖信息图中最常见的时间轴呈现方式，满足多场景展示 +- **Alternatives considered**: 仅支持横纵布局（功能不足），增加更多复杂布局（成本过高） + +### Decision 2: 事件点与时间点作为独立实体 +- **Decision**: 事件点与时间点独立建模，事件点关联时间点 +- **Rationale**: 支持仅时间点或密集事件点的场景，同时增强多系列扩展性 +- **Alternatives considered**: 仅事件点（无法表达空时间点），仅时间点（无法表达事件内容） + +### Decision 3: 多系列以系列标识区分 +- **Decision**: 使用 seriesId/seriesName 区分多系列事件点 +- **Rationale**: 与现有图表体系一致，便于样式与交互对齐 +- **Alternatives considered**: 仅颜色区分（缺乏语义）、嵌套结构（复杂度更高） + +### Decision 4: 交互一致性与性能目标沿用项目规范 +- **Decision**: Tooltip/Crosshair/Legend 交互对齐全局规范，交互响应 <16ms +- **Rationale**: 符合宪法要求，减少跨端差异 +- **Alternatives considered**: 允许不同端行为（增加维护成本） + +## 未解决问题 + +无 NEEDS CLARIFICATION 项，研究阶段完成。 diff --git a/specs/001-add-timeline-chart/spec.md b/specs/001-add-timeline-chart/spec.md new file mode 100644 index 0000000000..6394fdbf00 --- /dev/null +++ b/specs/001-add-timeline-chart/spec.md @@ -0,0 +1,97 @@ +# Feature Specification: Timeline 图表类型 + +**Feature Branch**: `001-add-timeline-chart` +**Created**: 2026-01-28 +**Status**: Draft +**Input**: User description: "我想要实现一个新的图表类型，Timeline ，用于封装信息图领域的图表时间轴，需要支持的功能有：1. 时间轴图表需要展示：事件点、时间点 2. 时间点支持多种布局类型：横向布局、纵向布局、径向布局、S线布局等 3. 可能有多个系列来展示事件点" + +## User Scenarios & Testing _(mandatory)_ + +### User Story 1 - 创建并展示时间轴图表 (Priority: P1) + +可视化开发者需要用 Timeline 图表展示一系列事件点与时间点，以便在信息图中清晰表达时间顺序与事件分布。 + +**Why this priority**: 这是该图表类型的核心用途，没有它无法构成可用的最小功能集。 + +**Independent Test**: 使用一组包含时间点与事件点的数据创建 Timeline 图表，确认可视化结果包含事件点与时间点。 + +**Acceptance Scenarios**: + +1. **Given** 一组包含时间点与事件点的数据，**When** 渲染 Timeline 图表，**Then** 图表同时展示事件点与时间点。 +2. **Given** 事件点包含名称与时间信息，**When** 渲染 Timeline 图表，**Then** 用户可以从图表中识别事件发生顺序。 + +--- + +### User Story 2 - 切换时间轴布局 (Priority: P2) + +可视化开发者需要在不同场景下选择不同布局，以适配横向、纵向、径向或 S 线等信息图设计风格。 + +**Why this priority**: 布局适配是时间轴图表在信息图场景中的关键差异化能力。 + +**Independent Test**: 对同一数据分别选择横向、纵向、径向、S 线布局并渲染，确认布局方向与结构发生变化。 + +**Acceptance Scenarios**: + +1. **Given** 一组时间轴数据，**When** 选择横向布局，**Then** 时间轴按水平方向展开。 +2. **Given** 一组时间轴数据，**When** 选择纵向布局，**Then** 时间轴按垂直方向展开。 +3. **Given** 一组时间轴数据，**When** 选择径向布局，**Then** 时间轴围绕中心呈放射结构。 +4. **Given** 一组时间轴数据，**When** 选择 S 线布局，**Then** 时间轴呈连续曲线结构排列。 + +--- + +### User Story 3 - 展示多系列事件点 (Priority: P3) + +可视化开发者需要同时展示多个系列的事件点，以表达不同来源或类型的事件分布。 + +**Why this priority**: 多系列能力提升表达力，但在没有该能力时仍能满足基本使用。 + +**Independent Test**: 提供包含多个系列标识的事件点数据并渲染，确认不同系列可同时显示。 + +**Acceptance Scenarios**: + +1. **Given** 含有多个系列标识的事件点数据，**When** 渲染 Timeline 图表，**Then** 不同系列的事件点同时出现。 + +--- + +### Edge Cases + +- 当数据中仅包含时间点且没有事件点时，图表仍能展示时间点。 +- 当事件点时间重复或密集时，图表仍能展示所有事件点而不丢失。 +- 当选择的布局类型不支持当前数据时，图表能够给出可理解的提示或降级表现。 + +## Requirements _(mandatory)_ + +### Functional Requirements + +- **FR-001**: 系统必须支持 Timeline 图表类型的创建与渲染。 +- **FR-002**: 系统必须支持时间轴图表同时展示时间点与事件点。 +- **FR-003**: 系统必须支持横向布局的时间轴展示。 +- **FR-004**: 系统必须支持纵向布局的时间轴展示。 +- **FR-005**: 系统必须支持径向布局的时间轴展示。 +- **FR-006**: 系统必须支持 S 线布局的时间轴展示。 +- **FR-007**: 系统必须支持同一时间轴内多个系列的事件点展示。 +- **FR-008**: 系统必须允许用户在多个布局类型之间切换。 + +### Key Entities _(include if feature involves data)_ + +- **时间点**: 表示时间轴上的关键时间节点，包含时间值与可选的描述信息。 +- **事件点**: 表示发生在时间轴上的事件，包含时间信息、事件内容与所属系列标识。 +- **系列**: 用于区分不同来源或类型的事件点集合。 + +## Assumptions + +- 默认提供可读的时间顺序展示逻辑，无需用户手动排序数据。 +- 默认使用一致的视觉区分来标识不同系列的事件点。 +- 当布局类型切换时，图表内容保持不变，仅布局结构发生变化。 + +## Dependencies + +- 无外部系统或第三方服务依赖。 + +## Success Criteria _(mandatory)_ + +### Measurable Outcomes + +- **SC-001**: 90% 的试用用户能够在 5 分钟内创建并展示包含时间点与事件点的时间轴图表。 +- **SC-002**: 用户能够在 2 分钟内完成至少两种布局类型的切换并验证呈现差异。 +- **SC-003**: 95% 的多系列数据在渲染后仍能完整展示所有事件点。 diff --git a/specs/001-add-timeline-chart/tasks.md b/specs/001-add-timeline-chart/tasks.md new file mode 100644 index 0000000000..18058513ca --- /dev/null +++ b/specs/001-add-timeline-chart/tasks.md @@ -0,0 +1,67 @@ +# Tasks: Timeline 图表类型 + +**Input**: Design documents from `/specs/001-add-timeline-chart/` +**Prerequisites**: plan.md, spec.md, research.md, data-model.md, contracts/ + +## Phase 1: Setup (Shared Infrastructure) + +- [ ] T001 Verify spec artifacts exist under specs/001-add-timeline-chart/ +- [ ] T002 [P] Run targeted build for @visactor/vchart +- [ ] T003 [P] Add docs navigation placeholder for Timeline in packages/docs + +## Phase 2: Foundational (Blocking Prerequisites) + +- [ ] T004 Define Timeline public types in packages/vchart-types/types/chart/timeline.d.ts +- [ ] T005 [P] Register timeline chart in packages/vchart/src/vchart-all.ts +- [ ] T006 [P] Create chart entry dir packages/vchart/src/chart/timeline/ +- [ ] T007 Establish unit test scaffold in packages/vchart/**tests**/timeline/ +- [ ] T008 [P] Add schema generation hookup in packages/vchart-schema for Timeline spec + +## Phase 3: User Story 1 - 创建并展示时间轴图表 (Priority: P1) 🎯 MVP + +**Goal**: 渲染包含时间点与事件点的 Timeline 基本图表 +**Independent Test**: 提供最小数据，成功渲染并可视识别时间顺序与事件 + +- [ ] T009 [P] [US1] Implement timeline spec transformer in packages/vchart/src/chart/timeline/transformer.ts +- [ ] T010 [P] [US1] Implement layout engine (horizontal/vertical) in packages/vchart/src/chart/timeline/layout/base.ts +- [ ] T011 [US1] Render time axis and event markers in packages/vchart/src/chart/timeline/render.ts +- [ ] T012 [US1] Wire data ingestion for timePoints/eventPoints in packages/vchart/src/chart/timeline/data.ts +- [ ] T013 [US1] Add minimal theme defaults for timeline in packages/vchart/src/theme/chart/timeline.ts +- [ ] T014 [US1] Add unit tests for transformer and data handling in packages/vchart/**tests**/timeline/ +- [ ] T015 [US1] Add visual regression case for basic timeline in packages/vchart/**tests**/runtime/browser/ +- [ ] T016 [US1] Create runtime demo in **tests**/runtime/browser/test-page/timeline-basic.ts + +## Phase 4: User Story 2 - 切换时间轴布局 (Priority: P2) + +**Goal**: 支持横向、纵向、径向、S 线布局切换 +**Independent Test**: 对同一数据切换布局后结构明显变化 + +- [ ] T017 [P] [US2] Implement vertical layout strategy in packages/vchart/src/chart/timeline/layout/vertical.ts +- [ ] T018 [P] [US2] Implement radial layout strategy in packages/vchart/src/chart/timeline/layout/radial.ts +- [ ] T019 [P] [US2] Implement s-curve layout strategy in packages/vchart/src/chart/timeline/layout/s-curve.ts +- [ ] T020 [US2] Add layout type switching in transformer and spec in packages/vchart/src/chart/timeline/transformer.ts +- [ ] T021 [US2] Add layout switch tests in packages/vchart/**tests**/timeline/ +- [ ] T022 [US2] Add layout demo in **tests**/runtime/browser/test-page/timeline-layouts.ts + +## Phase 5: User Story 3 - 展示多系列事件点 (Priority: P3) + +**Goal**: 多系列事件点同时展示并可区分 +**Independent Test**: 同一时间轴显示多个系列，颜色/图例区分明显 + +- [ ] T023 [P] [US3] Series mapping for eventPoints in packages/vchart/src/chart/timeline/data.ts +- [ ] T024 [US3] Legend integration and series styling in packages/vchart/src/chart/timeline/render.ts +- [ ] T025 [US3] Add multi-series unit tests in packages/vchart/**tests**/timeline/ +- [ ] T026 [US3] Multi-series demo in **tests**/runtime/browser/test-page/timeline-series.ts + +## Phase N: Polish & Cross-Cutting Concerns + +- [ ] T027 [P] Add docs examples and API reference in packages/docs/docs/timeline/ +- [ ] T028 Add dense events performance test and tuning in packages/vchart/src/chart/timeline/layout/\* +- [ ] T029 Add edge-case handling for timePoints-only datasets in packages/vchart/src/chart/timeline/data.ts +- [ ] T030 Add fallback behavior for unsupported layout types in packages/vchart/src/chart/timeline/transformer.ts +- [ ] T031 Add quickstart example validation using specs/001-add-timeline-chart/quickstart.md + +## Dependencies & Execution Order + +- Setup → Foundational → US1 → US2 → US3 → Polish +- [P] 任务表示可并行（不同文件、无未完成依赖） From d50b1bea0073915b0d428e3135f3d7ee9b5c93bf Mon Sep 17 00:00:00 2001 From: xile611 Date: Fri, 30 Jan 2026 18:21:40 +0800 Subject: [PATCH 05/27] fix: fix timeline in vchart-extensions --- .../test-page/timeline/demo-horizontal.ts | 150 ++++++++++ .../test-page/timeline/demo-vertical.ts | 137 +++++++++ .../browser/test-page/timeline/group.ts | 2 +- .../browser/test-page/timeline/horizontal.ts | 2 +- .../browser/test-page/timeline/vertical.ts | 2 +- .../src/charts/timeline/index.ts | 4 +- .../src/charts/timeline/interface.ts | 3 - .../charts/timeline/series/event-series.ts | 280 +++++++----------- .../src/charts/timeline/series/interface.ts | 29 +- .../src/charts/timeline/series/theme.ts | 30 ++ .../charts/timeline/timeline-transformer.ts | 120 ++++++-- 11 files changed, 546 insertions(+), 213 deletions(-) create mode 100644 packages/vchart-extension/__tests__/runtime/browser/test-page/timeline/demo-horizontal.ts create mode 100644 packages/vchart-extension/__tests__/runtime/browser/test-page/timeline/demo-vertical.ts create mode 100644 packages/vchart-extension/src/charts/timeline/series/theme.ts diff --git a/packages/vchart-extension/__tests__/runtime/browser/test-page/timeline/demo-horizontal.ts b/packages/vchart-extension/__tests__/runtime/browser/test-page/timeline/demo-horizontal.ts new file mode 100644 index 0000000000..0d8b8ac1bc --- /dev/null +++ b/packages/vchart-extension/__tests__/runtime/browser/test-page/timeline/demo-horizontal.ts @@ -0,0 +1,150 @@ +import { VChart, type Datum } from '@visactor/vchart'; +import { registerTimelineChart } from '../../../../../src'; +import type { ITimelineChartSpec } from '../../../../../src/charts/timeline'; + +/** + * 企业优势列表 - 水平布局示例 + * 参考设计图复现 + */ + +const timelineData = [ + { + id: '1', + year: '2021', + title: '品牌影响力', + detail: '在目标用户群中具备较强认知与信任度', + time: 1, + color: '#4A90E2' + }, + { + id: '2', + year: '2022', + title: '技术研发力', + detail: '拥有自研核心系统与持续创新能力', + time: 2, + color: '#50C8C8' + }, + { + id: '3', + year: '2023', + title: '市场增长快', + detail: '近一年用户规模实现快速增长', + time: 3, + color: '#F5A623' + }, + { + id: '4', + year: '2020', + title: '服务满意度', + detail: '用户对服务体系整体评分较高', + time: 4, + color: '#9B59B6' + }, + { + id: '5', + year: '2022', + title: '数据资产全', + detail: '构建了完整用户标签与画像体系', + time: 5, + color: '#8E44AD' + }, + { + id: '6', + year: '2023', + title: '创新能力强', + detail: '新产品上线频率高于行业平均', + time: 6, + color: '#2ECC71' + } +]; + +const spec: ITimelineChartSpec = { + type: 'timeline', + name: 'enterprise-advantages', + direction: 'horizontal', + padding: { + left: 60, + right: 60, + top: 150, + bottom: 150 + }, + background: '#f5f5f5', + data: [ + { + id: 'timeline-data', + values: timelineData + } + ], + title: { + visible: true, + text: '企业优势列表', + subtext: '展示企业在不同维度上的核心优势与表现值', + style: { + fontSize: 24, + fontWeight: 'bold', + fill: '#333' + }, + subtextStyle: { + fontSize: 14, + fill: '#666' + } + }, + series: [ + { + type: 'event', + dataId: 'timeline-data', + timeField: 'time', + eventField: 'title', + subTitleField: 'detail', + labelPosition: 'top-bottom', + dot: { + style: { + size: 12, + fill: (datum: Datum) => String((datum as Record).color ?? '#4A90E2'), + stroke: '#fff', + lineWidth: 2 + } + }, + title: { + style: { + fill: '#333', + fontSize: 14, + fontWeight: 'bold' + } + }, + subTitle: { + style: { + fill: '#666', + fontSize: 12, + lineHeight: 18 + } + }, + line: { + style: { + stroke: '#c0c3c7', + lineWidth: 2 + } + } + } + ] +}; + +declare global { + interface Window { + vchart?: VChart; + } +} + +const run = () => { + registerTimelineChart(); + const cs = new VChart(spec, { + dom: document.getElementById('chart') as HTMLElement, + onError: err => { + console.error(err); + } + }); + cs.renderSync(); + window.vchart = cs; +}; + +run(); diff --git a/packages/vchart-extension/__tests__/runtime/browser/test-page/timeline/demo-vertical.ts b/packages/vchart-extension/__tests__/runtime/browser/test-page/timeline/demo-vertical.ts new file mode 100644 index 0000000000..f7670447ae --- /dev/null +++ b/packages/vchart-extension/__tests__/runtime/browser/test-page/timeline/demo-vertical.ts @@ -0,0 +1,137 @@ +import { VChart, type Datum } from '@visactor/vchart'; +import { registerTimelineChart } from '../../../../../src'; +import type { ITimelineChartSpec } from '../../../../../src/charts/timeline'; + +/** + * 企业发展时间线 - 垂直布局示例 + * 参考设计图复现 + */ + +const timelineData = [ + { + id: '01', + year: '2018年', + title: '企业成立，完成初期团队搭建和产品定位', + time: 1, + color: '#4A90E2' + }, + { + id: '02', + year: '2020年', + title: '发布首款核心产品，打开区域市场', + time: 2, + color: '#50C8C8' + }, + { + id: '03', + year: '2021年', + title: '启动数字化平台，提升内部运营效率', + time: 3, + color: '#F5A623' + }, + { + id: '04', + year: '2022年', + title: '完成A轮融资，加速市场拓展布局', + time: 4, + color: '#9B59B6' + }, + { + id: '05', + year: '2024年', + title: '推进生态合作，拓展全国影响力', + time: 5, + color: '#5B6AE0' + } +]; + +const spec: ITimelineChartSpec = { + type: 'timeline', + name: 'enterprise-development', + direction: 'vertical', + padding: { + left: 200, + right: 200, + top: 80, + bottom: 80 + }, + background: '#f5f5f5', + data: [ + { + id: 'timeline-data', + values: timelineData + } + ], + title: { + visible: true, + text: '企业发展时间线', + subtext: '展示企业在关键年份的战略动作与发展节点', + style: { + fontSize: 24, + fontWeight: 'bold', + fill: '#333' + }, + subtextStyle: { + fontSize: 14, + fill: '#666' + } + }, + series: [ + { + type: 'event', + dataId: 'timeline-data', + timeField: 'time', + eventField: 'year', + subTitleField: 'title', + labelPosition: 'left-right', + dot: { + style: { + size: 14, + fill: (datum: Datum) => String((datum as Record).color ?? '#4A90E2'), + stroke: '#fff', + lineWidth: 2 + } + }, + title: { + style: { + fill: '#333', + fontSize: 16, + fontWeight: 'bold' + } + }, + subTitle: { + style: { + fill: '#666', + fontSize: 13, + lineHeight: 20 + } + }, + line: { + style: { + stroke: 'red', + lineWidth: 3 + } + } + } + ] +}; + +declare global { + interface Window { + vchart?: VChart; + } +} + +const run = () => { + registerTimelineChart(); + const cs = new VChart(spec, { + dom: document.getElementById('chart') as HTMLElement, + onError: err => { + console.error(err); + } + }); + cs.renderSync(); + window.vchart = cs; +}; + +run(); diff --git a/packages/vchart-extension/__tests__/runtime/browser/test-page/timeline/group.ts b/packages/vchart-extension/__tests__/runtime/browser/test-page/timeline/group.ts index 3effa0dfeb..22ad1c0c2c 100644 --- a/packages/vchart-extension/__tests__/runtime/browser/test-page/timeline/group.ts +++ b/packages/vchart-extension/__tests__/runtime/browser/test-page/timeline/group.ts @@ -64,7 +64,7 @@ const getDatumString = (datum: Datum | undefined, key: string) => { const spec: ITimelineChartSpec = { type: 'timeline', name: 'timeline-group', - layoutType: 'horizontal', + direction: 'horizontal', padding: { left: 80, right: 40, diff --git a/packages/vchart-extension/__tests__/runtime/browser/test-page/timeline/horizontal.ts b/packages/vchart-extension/__tests__/runtime/browser/test-page/timeline/horizontal.ts index 73f6f6dfd2..c077013e76 100644 --- a/packages/vchart-extension/__tests__/runtime/browser/test-page/timeline/horizontal.ts +++ b/packages/vchart-extension/__tests__/runtime/browser/test-page/timeline/horizontal.ts @@ -52,7 +52,7 @@ const getDatumString = (datum: Datum | undefined, key: string) => { const spec: ITimelineChartSpec = { type: 'timeline', name: 'timeline-horizontal', - layoutType: 'horizontal', + direction: 'horizontal', padding: { left: 80, right: 80, diff --git a/packages/vchart-extension/__tests__/runtime/browser/test-page/timeline/vertical.ts b/packages/vchart-extension/__tests__/runtime/browser/test-page/timeline/vertical.ts index 899e0cb893..0972a4d9a0 100644 --- a/packages/vchart-extension/__tests__/runtime/browser/test-page/timeline/vertical.ts +++ b/packages/vchart-extension/__tests__/runtime/browser/test-page/timeline/vertical.ts @@ -70,7 +70,7 @@ const getDatumString = (datum: Datum | undefined, key: string) => { const spec: ITimelineChartSpec = { type: 'timeline', name: 'timeline-vertical', - layoutType: 'vertical', + direction: 'vertical', data: [ { id: 'timeline-data', diff --git a/packages/vchart-extension/src/charts/timeline/index.ts b/packages/vchart-extension/src/charts/timeline/index.ts index a4bd6f828d..444d0d4b42 100644 --- a/packages/vchart-extension/src/charts/timeline/index.ts +++ b/packages/vchart-extension/src/charts/timeline/index.ts @@ -1,4 +1,4 @@ export * from './interface'; export * from './timeline'; -export * from './series/interface'; -export * from './series/event-series'; +export type { IEventSeriesSpec, IEventSeriesTheme } from './series/interface'; +export { registerEventSeries } from './series/event-series'; diff --git a/packages/vchart-extension/src/charts/timeline/interface.ts b/packages/vchart-extension/src/charts/timeline/interface.ts index 544e149993..2a2ac33fd3 100644 --- a/packages/vchart-extension/src/charts/timeline/interface.ts +++ b/packages/vchart-extension/src/charts/timeline/interface.ts @@ -1,13 +1,10 @@ import type { IChartExtendsSeriesSpec, IChartSpec, ICartesianAxisSpec } from '@visactor/vchart'; import type { IEventSeriesSpec } from './series/interface'; -export type TimelineLayoutType = 'horizontal' | 'vertical' | 'radial' | 's-curve'; - export interface ITimelineChartSpec extends IChartSpec, Omit, 'type' | 'title'> { type: 'timeline'; - layoutType?: TimelineLayoutType; series?: IEventSeriesSpec[]; axes?: ICartesianAxisSpec[]; } diff --git a/packages/vchart-extension/src/charts/timeline/series/event-series.ts b/packages/vchart-extension/src/charts/timeline/series/event-series.ts index 31126d68ef..b7aaac6de7 100644 --- a/packages/vchart-extension/src/charts/timeline/series/event-series.ts +++ b/packages/vchart-extension/src/charts/timeline/series/event-series.ts @@ -1,8 +1,7 @@ import type { StringOrNumber } from '@visactor/vchart'; import { AttributeLevel, - BaseSeries, - DEFAULT_DATA_KEY, + CartesianSeries, Factory, MarkTypeEnum, SeriesMarkNameEnum, @@ -19,21 +18,15 @@ import { } from '@visactor/vchart'; import { EVENT_SERIES_TYPE } from './constant'; import type { IEventSeriesSpec, LabelPosition } from './interface'; +import { event } from './theme'; type AxisHelper = { isContinuous?: boolean; getSpec?: () => { type?: string }; - dataToPosition?: (values: any[], cfg?: { bandPosition?: number }) => number; - valueToPosition?: (value: any) => number; + dataToPosition?: (values: unknown[], cfg?: { bandPosition?: number }) => number; + valueToPosition?: (value: unknown) => number; }; -/** 默认 title 字体大小 */ -const DEFAULT_TITLE_FONT_SIZE = 14; -/** 默认 dot 和 label 之间的间距 */ -const DEFAULT_DOT_LABEL_GAP = 6; -/** 默认 title 和 subTitle 之间的间距 */ -const DEFAULT_TITLE_SUBTITLE_GAP = 4; - const eventSeriesMark: SeriesMarkMap = { ...baseSeriesMark, [SeriesMarkNameEnum.line]: { name: SeriesMarkNameEnum.line, type: MarkTypeEnum.line }, @@ -42,14 +35,17 @@ const eventSeriesMark: SeriesMarkMap = { [SeriesMarkNameEnum.subTitle]: { name: SeriesMarkNameEnum.subTitle, type: MarkTypeEnum.text } }; -export class EventSeries extends BaseSeries { +export class EventSeries extends CartesianSeries { static readonly type: string = EVENT_SERIES_TYPE; type = EVENT_SERIES_TYPE as any; static readonly mark: SeriesMarkMap = eventSeriesMark; + static readonly builtInTheme = { event }; static readonly transformerConstructor = BaseSeriesSpecTransformer as any; readonly transformerConstructor = BaseSeriesSpecTransformer as any; + readonly coordinate: 'cartesian' = 'cartesian'; + protected declare _spec: T; private _dotMark?: IMark; @@ -60,12 +56,9 @@ export class EventSeries extends private _timeField?: string; private _eventField?: string; private _subTitleField?: string; - private _layoutType?: T['layoutType']; private _labelPosition?: LabelPosition; - private _xAxisHelper?: AxisHelper; - private _yAxisHelper?: AxisHelper; - private _scaleX?: unknown; - private _scaleY?: unknown; + private _dotLabelGap?: number; + private _titleSubTitleGap?: number; setAttrFromSpec(): void { super.setAttrFromSpec(); @@ -73,8 +66,9 @@ export class EventSeries extends this._timeField = this._spec.timeField as string | undefined; this._eventField = this._spec.eventField; this._subTitleField = this._spec.subTitleField; - this._layoutType = this._spec.layoutType; this._labelPosition = this._spec.labelPosition; + this._dotLabelGap = this._spec.dotLabelGap ?? 6; + this._titleSubTitleGap = this._spec.titleSubTitleGap ?? 4; } getDimensionField(): string[] { @@ -127,10 +121,10 @@ export class EventSeries extends const subTitleStyle = this._spec.subTitle?.style ?? {}; // 获取 title 字体大小，用于计算 subTitle 的位置 - const titleFontSize = typeof titleStyle.fontSize === 'number' ? titleStyle.fontSize : DEFAULT_TITLE_FONT_SIZE; + const titleFontSize = typeof titleStyle.fontSize === 'number' ? titleStyle.fontSize : 14; // dot 和 label 之间的间距 - const labelOffset = dotSize / 2 + DEFAULT_DOT_LABEL_GAP; + const labelOffset = dotSize / 2 + (this._dotLabelGap ?? 6); if (this._dotMark) { this.setMarkStyle( @@ -150,12 +144,12 @@ export class EventSeries extends this.setMarkStyle( this._titleMark, { - fontSize: DEFAULT_TITLE_FONT_SIZE, + fontSize: 14, ...titleStyle, x: (datum: Datum) => this._getTitlePosition(datum, labelOffset).x, y: (datum: Datum) => this._getTitlePosition(datum, labelOffset).y, textAlign: (datum: Datum) => this._getLabelTextAlign(datum), - textBaseline: (datum: Datum) => this._getLabelTextBaseline(datum), + textBaseline: (datum: Datum) => this._getLabelTextBaseline(datum, true), text: (datum: Datum) => this._getDatumString(datum, this._eventField) }, STATE_VALUE_ENUM.STATE_NORMAL, @@ -164,17 +158,14 @@ export class EventSeries extends } if (this._subTitleMark) { - // subTitle 位置 = title 位置 + title 字体大小 + 间距 - const subTitleOffset = labelOffset + titleFontSize + DEFAULT_TITLE_SUBTITLE_GAP; - this.setMarkStyle( this._subTitleMark, { ...subTitleStyle, - x: (datum: Datum) => this._getSubTitlePosition(datum, subTitleOffset).x, - y: (datum: Datum) => this._getSubTitlePosition(datum, subTitleOffset).y, + x: (datum: Datum) => this._getSubTitlePosition(datum, labelOffset, titleFontSize).x, + y: (datum: Datum) => this._getSubTitlePosition(datum, labelOffset, titleFontSize).y, textAlign: (datum: Datum) => this._getLabelTextAlign(datum), - textBaseline: (datum: Datum) => this._getLabelTextBaseline(datum), + textBaseline: (datum: Datum) => this._getLabelTextBaseline(datum, false), text: (datum: Datum) => this._getDatumString(datum, this._subTitleField) }, STATE_VALUE_ENUM.STATE_NORMAL, @@ -192,7 +183,7 @@ export class EventSeries extends const index = data.indexOf(datum); const position = this._labelPosition; - if (this._layoutType === 'vertical') { + if (this.direction === 'vertical') { // vertical 布局: left/right switch (position) { case 'left': @@ -227,7 +218,7 @@ export class EventSeries extends * 获取标签的文本对齐方式 */ private _getLabelTextAlign(datum: Datum): 'left' | 'right' | 'center' { - if (this._layoutType === 'vertical') { + if (this.direction === 'vertical') { const side = this._getLabelSide(datum); return side === 'primary' ? 'right' : 'left'; } @@ -237,9 +228,10 @@ export class EventSeries extends /** * 获取标签的文本基线 */ - private _getLabelTextBaseline(datum: Datum): 'top' | 'bottom' | 'middle' { - if (this._layoutType === 'vertical') { - return 'middle'; + private _getLabelTextBaseline(datum: Datum, isTitle: boolean): 'top' | 'bottom' | 'middle' { + if (this.direction === 'vertical') { + // vertical 布局时：title 用 top，subTitle 用 top + return 'top'; } const side = this._getLabelSide(datum); return side === 'primary' ? 'bottom' : 'top'; @@ -252,8 +244,8 @@ export class EventSeries extends const point = this._getPoint(datum); const side = this._getLabelSide(datum); - if (this._layoutType === 'vertical') { - // vertical: left/right + if (this.direction === 'vertical') { + // vertical: left/right，标签垂直排列 return { x: side === 'primary' ? point.x - offset : point.x + offset, y: point.y @@ -269,21 +261,28 @@ export class EventSeries extends /** * 获取 subTitle 的位置 */ - private _getSubTitlePosition(datum: Datum, offset: number): IPoint { + private _getSubTitlePosition(datum: Datum, offset: number, titleFontSize: number): IPoint { const point = this._getPoint(datum); const side = this._getLabelSide(datum); - if (this._layoutType === 'vertical') { - // vertical: left/right + if (this.direction === 'vertical') { + // vertical: left/right，subTitle 在 title 下方 + // offset 是 title 的偏移，subTitle 需要在 title 基础上再向下偏移 + const titleStyle = this._spec.title?.style ?? {}; + const titleLineHeight = typeof titleStyle.lineHeight === 'number' ? titleStyle.lineHeight : titleFontSize * 1.2; + return { x: side === 'primary' ? point.x - offset : point.x + offset, - y: point.y + y: point.y + titleLineHeight + this._titleSubTitleGap }; } // horizontal: top/bottom return { x: point.x, - y: side === 'primary' ? point.y - offset : point.y + offset + y: + side === 'primary' + ? point.y - (offset + titleFontSize + this._titleSubTitleGap) + : point.y + (offset + titleFontSize + this._titleSubTitleGap) }; } @@ -292,81 +291,92 @@ export class EventSeries extends } private _getPoint(datum: Datum): IPoint { - const rect = this._region.getLayoutRect(); - const data = this._getViewDataList(); - const index = data.indexOf(datum); - const count = Math.max(1, data.length); - - // 计算时间方向的位置 (水平布局时是 x，垂直布局时是 y) - let timePercent: number; - if (this._timeField && datum) { - const timeValue = (datum as Record)[this._timeField]; - if (typeof timeValue === 'number') { - // 获取所有时间值来计算范围 - const timeValues = data - .map(d => (d as Record)[this._timeField!] as number) - .filter(v => typeof v === 'number'); - const minTime = Math.min(...timeValues); - const maxTime = Math.max(...timeValues); - - if (maxTime !== minTime) { - timePercent = (timeValue - minTime) / (maxTime - minTime); - } else { - timePercent = 0.5; - } - } else { - timePercent = (index + 0.5) / count; - } - } else { - timePercent = (index + 0.5) / count; + if (this.direction === 'vertical') { + // vertical 布局：x 轴是分类方向（seriesField），y 轴是时间方向（timeField） + const x = this._getPositionFromAxis(datum, this.getXAxisHelper(), this._seriesField); + const y = this._getPositionFromAxis(datum, this.getYAxisHelper(), this._timeField); + return { x, y }; } - // 计算分类方向的位置（如果有 seriesField） - let categoryPercent = 0.5; - if (this._seriesField && datum) { - const categoryValue = (datum as Record)[this._seriesField]; - const uniqueCategories = Array.from(new Set(data.map(d => (d as Record)[this._seriesField!]))); - const categoryIndex = uniqueCategories.indexOf(categoryValue); - const categoryCount = Math.max(1, uniqueCategories.length); - categoryPercent = (categoryIndex + 0.5) / categoryCount; + // horizontal 布局：x 轴是时间方向（timeField），y 轴是分类方向（seriesField） + const x = this._getPositionFromAxis(datum, this.getXAxisHelper(), this._timeField); + const y = this._getPositionFromAxis(datum, this.getYAxisHelper(), this._seriesField); + return { x, y }; + } + + /** + * 根据轴的类型计算位置 + * @param datum 数据项 + * @param axisHelper 轴助手 + * @param field 字段名 + * @returns 位置值 + */ + private _getPositionFromAxis(datum: Datum, axisHelper: AxisHelper | undefined, field?: string): number { + if (!axisHelper) { + // 如果没有轴助手，使用默认的中间位置 + return this._getDefaultPosition(field); } - if (this._layoutType === 'vertical') { - return { - x: rect.width * categoryPercent, - y: rect.height * timePercent - }; + if (!field || !(field in datum)) { + // 如果没有字段或数据中没有该字段，使用默认位置 + return this._getDefaultPosition(field); } - return { - x: rect.width * timePercent, - y: rect.height * categoryPercent - }; + const value = (datum as Record)[field]; + const axisType = axisHelper.getSpec?.()?.type; + + // 根据轴类型选择不同的计算方式 + if (axisType === 'band' || !axisHelper.isContinuous) { + // band 轴：使用 dataToPosition，传入值数组 + return axisHelper.dataToPosition?.([value], { bandPosition: 0.5 }) ?? this._getDefaultPosition(field); + } + + // linear/time 轴：使用 valueToPosition，直接传入值 + return axisHelper.valueToPosition?.(value) ?? this._getDefaultPosition(field); } - private _getAxisPoints(datum: Datum): IPoint[] { + onXAxisHelperUpdate(): void { + super.onXAxisHelperUpdate?.(); + this.onMarkPositionUpdate(); + } + + onYAxisHelperUpdate(): void { + super.onYAxisHelperUpdate?.(); + this.onMarkPositionUpdate(); + } + + /** + * 获取默认位置（当没有轴或字段时使用） + */ + private _getDefaultPosition(field?: string): number { const rect = this._region.getLayoutRect(); - const data = this._getViewDataList(); - // 计算分类方向的位置 - let categoryPercent = 0.5; - if (this._seriesField && datum) { - const categoryValue = (datum as Record)[this._seriesField]; - const uniqueCategories = Array.from(new Set(data.map(d => (d as Record)[this._seriesField!]))); - const categoryIndex = uniqueCategories.indexOf(categoryValue); - const categoryCount = Math.max(1, uniqueCategories.length); - categoryPercent = (categoryIndex + 0.5) / categoryCount; + // 如果没有 seriesField，说明没有分类轴，返回中心位置 + if (!this._seriesField || field === this._seriesField) { + const isHorizontal = this.direction !== 'vertical'; + // horizontal 布局：返回垂直中心（y方向） + // vertical 布局：返回水平中心（x方向） + return isHorizontal ? rect.height * 0.5 : rect.width * 0.5; } - if (this._layoutType === 'vertical') { - const x = rect.width * categoryPercent; + // 对于时间轴，返回区域起点 + return 0; + } + + private _getAxisPoints(datum: Datum): IPoint[] { + const rect = this._region.getLayoutRect(); + + if (this.direction === 'vertical') { + // vertical 布局：轴是垂直的，x 位置根据 seriesField 计算 + const x = this._getPositionFromAxis(datum, this.getXAxisHelper(), this._seriesField); return [ { x, y: 0 }, { x, y: rect.height } ]; } - const y = rect.height * categoryPercent; + // horizontal 布局：轴是水平的，y 位置根据 seriesField 计算 + const y = this._getPositionFromAxis(datum, this.getYAxisHelper(), this._seriesField); return [ { x: 0, y }, { x: rect.width, y } @@ -383,7 +393,9 @@ export class EventSeries extends const categoryValue = (datum as Record)[this._seriesField]; // 找到该分类中的第一条数据 - const firstInGroup = data.find(d => (d as Record)[this._seriesField!] === categoryValue); + const firstInGroup = data.find( + d => this._seriesField && (d as Record)[this._seriesField] === categoryValue + ); return datum === firstInGroup; } @@ -395,70 +407,6 @@ export class EventSeries extends return typeof value === 'string' ? value : value == null ? '' : String(value); } - getStatisticFields(): { key: string; operations: Array<'max' | 'min' | 'values'>; customize?: any[] }[] { - const fields: { key: string; operations: Array<'max' | 'min' | 'values'>; customize?: any[] }[] = []; - - if (this._timeField) { - fields.push({ key: this._timeField, operations: ['max', 'min', 'values'] }); - } - - if (this._seriesField) { - fields.push({ key: this._seriesField, operations: ['values'] }); - } - - return fields; - } - - getGroupFields(): string[] { - return this._seriesField ? [this._seriesField] : []; - } - - getXAxisHelper(): AxisHelper | undefined { - return this._xAxisHelper; - } - - setXAxisHelper(h: AxisHelper) { - this._xAxisHelper = h; - this.onMarkPositionUpdate(); - } - - get scaleX(): unknown { - return this._scaleX; - } - - setScaleX(s: unknown) { - this._scaleX = s; - } - - getYAxisHelper(): AxisHelper | undefined { - return this._yAxisHelper; - } - - setYAxisHelper(h: AxisHelper) { - this._yAxisHelper = h; - this.onMarkPositionUpdate(); - } - - get scaleY(): unknown { - return this._scaleY; - } - - setScaleY(s: unknown) { - this._scaleY = s; - } - - dataToPosition(data: Datum): IPoint { - return this._getPoint(data); - } - - dataToPositionX(data: Datum): number { - return this._getPoint(data).x; - } - - dataToPositionY(data: Datum): number { - return this._getPoint(data).y; - } - valueToPosition(timeValue: StringOrNumber, eventValue?: StringOrNumber): IPoint { if (timeValue && typeof timeValue === 'object') { return this.dataToPosition(timeValue as Datum); @@ -474,14 +422,6 @@ export class EventSeries extends return this._getPoint(mockDatum as Datum); } - getStackGroupFields(): string[] { - return []; - } - - getStackValueField(): string | undefined { - return undefined; - } - getActiveMarks(): IMark[] { return [this._axisLineMark, this._dotMark, this._titleMark, this._subTitleMark].filter(Boolean) as IMark[]; } diff --git a/packages/vchart-extension/src/charts/timeline/series/interface.ts b/packages/vchart-extension/src/charts/timeline/series/interface.ts index 117f34ccab..ba9ed1d2a1 100644 --- a/packages/vchart-extension/src/charts/timeline/series/interface.ts +++ b/packages/vchart-extension/src/charts/timeline/series/interface.ts @@ -1,13 +1,4 @@ -import type { - ICartesianSeriesSpec, - ICartesianSeriesTheme, - IMarkSpec, - ISymbolMarkSpec, - ITextMarkSpec, - ILineMarkSpec, - ISeriesSpec -} from '@visactor/vchart'; -import type { TimelineLayoutType } from '../interface'; +import type { IMarkSpec, ISymbolMarkSpec, ITextMarkSpec, ILineMarkSpec, ICartesianSeriesSpec } from '@visactor/vchart'; /** horizontal 布局时的标题位置 */ export type HorizontalLabelPosition = 'top' | 'bottom' | 'top-bottom' | 'bottom-top'; @@ -18,16 +9,19 @@ export type VerticalLabelPosition = 'left' | 'right' | 'left-right' | 'right-lef /** 标题位置配置 */ export type LabelPosition = HorizontalLabelPosition | VerticalLabelPosition; -export interface IEventSeriesSpec extends ISeriesSpec { +export interface IEventSeriesSpec extends ICartesianSeriesSpec { type: 'event'; timeField?: string; eventField?: string; subTitleField?: string; seriesField?: string; dotTypeField?: string; - layoutType?: TimelineLayoutType; /** 标题和副标题的位置 */ labelPosition?: LabelPosition; + /** dot 和 label 之间的间距 */ + dotLabelGap?: number; + /** title 和 subTitle 之间的间距 */ + titleSubTitleGap?: number; name?: string; dot?: IMarkSpec; title?: IMarkSpec; @@ -35,4 +29,13 @@ export interface IEventSeriesSpec extends ISeriesSpec { line?: IMarkSpec; } -export type IEventSeriesTheme = ICartesianSeriesTheme; +export interface IEventSeriesTheme { + /** dot 和 label 之间的间距 */ + dotLabelGap?: number; + /** title 和 subTitle 之间的间距 */ + titleSubTitleGap?: number; + dot?: IMarkSpec; + title?: IMarkSpec; + subTitle?: IMarkSpec; + line?: IMarkSpec; +} diff --git a/packages/vchart-extension/src/charts/timeline/series/theme.ts b/packages/vchart-extension/src/charts/timeline/series/theme.ts new file mode 100644 index 0000000000..d10e9e26b3 --- /dev/null +++ b/packages/vchart-extension/src/charts/timeline/series/theme.ts @@ -0,0 +1,30 @@ +import type { IEventSeriesTheme } from './interface'; + +export const event: IEventSeriesTheme = { + dotLabelGap: 6, + titleSubTitleGap: 4, + dot: { + style: { + size: 8 + } + }, + line: { + visible: true, + style: { + stroke: '#c0c3c7', + lineWidth: 1 + } + }, + title: { + visible: true, + style: { + fontSize: 14 + } + }, + subTitle: { + visible: true, + style: { + fontSize: 12 + } + } +}; diff --git a/packages/vchart-extension/src/charts/timeline/timeline-transformer.ts b/packages/vchart-extension/src/charts/timeline/timeline-transformer.ts index 7037a496af..86cc2a2fb3 100644 --- a/packages/vchart-extension/src/charts/timeline/timeline-transformer.ts +++ b/packages/vchart-extension/src/charts/timeline/timeline-transformer.ts @@ -1,4 +1,4 @@ -import { BaseChartSpecTransformer } from '@visactor/vchart'; +import { BaseChartSpecTransformer, merge } from '@visactor/vchart'; import type { ICartesianAxisSpec, ICartesianLinearAxisSpec } from '@visactor/vchart'; import type { ITimelineChartSpec } from './interface'; @@ -23,34 +23,57 @@ export class TimelineChartSpecTransformer< transformSpec(spec: T): void { super.transformSpec(spec); this.transformSeriesSpec(spec); + + // 确定 direction（通过轴方向推断） const rawAxis = spec.axes?.[0]; - const axisType = rawAxis?.type ?? 'band'; const axisOrient = rawAxis?.orient; - let layoutType = spec.layoutType; - if (!layoutType) { - if (axisOrient === 'left' || axisOrient === 'right') { - layoutType = 'vertical'; - } else if (axisOrient === 'bottom' || axisOrient === 'top') { - layoutType = 'horizontal'; - } - } - if (!layoutType) { - layoutType = 'horizontal'; + + // 默认为 horizontal + let direction: 'horizontal' | 'vertical' = 'horizontal'; + if (axisOrient === 'left' || axisOrient === 'right') { + direction = 'vertical'; + } else if (axisOrient === 'bottom' || axisOrient === 'top') { + direction = 'horizontal'; } - spec.layoutType = layoutType; - const defaultOrient = layoutType === 'vertical' ? 'left' : 'bottom'; - const allowedOrients = layoutType === 'vertical' ? ['left', 'right'] : ['bottom', 'right']; + // 确定默认的轴方向和类型 + const defaultOrient = direction === 'vertical' ? 'left' : 'bottom'; + const allowedOrients = direction === 'vertical' ? ['left', 'right'] : ['bottom', 'top']; const orientNormalized: ICartesianAxisSpec['orient'] = allowedOrients.includes(axisOrient ?? '') ? (axisOrient as ICartesianAxisSpec['orient']) : (defaultOrient as ICartesianAxisSpec['orient']); + + // 确定轴类型，默认为 band + const axisType = rawAxis?.type ?? 'band'; const typeNormalized: ICartesianAxisSpec['type'] = axisType === 'linear' || axisType === 'time' || axisType === 'band' ? (axisType as any) : 'band'; - const baseAxis: ICartesianAxisSpec = { - ...((rawAxis ?? {}) as ICartesianAxisSpec), - orient: orientNormalized, - type: typeNormalized - }; + + // 构建轴配置 + const baseAxis: ICartesianAxisSpec = merge( + { + label: { + visible: false + }, + tick: { + visible: false + }, + grid: { + visible: false + }, + domainLine: { + visible: false + } + }, + { + ...((rawAxis ?? {}) as ICartesianAxisSpec), + orient: orientNormalized, + type: typeNormalized + } + ); + + // 检查是否有 seriesField，如果有则需要创建第二个分类轴 + const hasSeriesField = spec.series?.some(s => s.seriesField); + if (baseAxis.type === 'linear') { const linearAxis: ICartesianLinearAxisSpec = { ...(baseAxis as ICartesianLinearAxisSpec), @@ -61,9 +84,62 @@ export class TimelineChartSpecTransformer< spec.axes = [baseAxis]; } + // 如果有 seriesField，需要创建第二个分类轴 + if (hasSeriesField) { + const categoryAxisOrient = direction === 'vertical' ? 'bottom' : 'left'; + const categoryAxis: ICartesianAxisSpec = { + orient: categoryAxisOrient, + type: 'band', + label: { + visible: false + }, + tick: { + visible: false + }, + grid: { + visible: false + }, + domainLine: { + visible: false + } + }; + + // 将分类轴添加到轴列表中 + if (direction === 'vertical') { + // vertical: 时间轴在前，分类轴在后 + spec.axes = [spec.axes[0], categoryAxis]; + } else { + // horizontal: 时间轴在前，分类轴在后 + spec.axes = [spec.axes[0], categoryAxis]; + } + } + + // 将 direction 传递给 series，并设置 xField/yField 以便轴系统收集数据 spec.series?.forEach(seriesSpec => { - if (!seriesSpec.layoutType && spec.layoutType) { - seriesSpec.layoutType = spec.layoutType; + if (!seriesSpec.direction) { + seriesSpec.direction = direction; + } + + // 根据 direction 将 timeField 映射到 xField 或 yField + // 这样轴系统才能正确收集数据 + if (direction === 'vertical') { + // vertical 布局：y 轴是时间方向 + if (seriesSpec.timeField && !seriesSpec.yField) { + seriesSpec.yField = seriesSpec.timeField; + } + // x 轴是分类方向（如果没有 seriesField，创建一个虚拟字段） + if (!seriesSpec.xField) { + seriesSpec.xField = seriesSpec.seriesField || '__vchart_timeline_dummy__'; + } + } else { + // horizontal 布局：x 轴是时间方向 + if (seriesSpec.timeField && !seriesSpec.xField) { + seriesSpec.xField = seriesSpec.timeField; + } + // y 轴是分类方向（如果没有 seriesField，创建一个虚拟字段） + if (!seriesSpec.yField) { + seriesSpec.yField = seriesSpec.seriesField || '__vchart_timeline_dummy__'; + } } }); } From c48ff36fa373b1c07dd8be1aac37f22c6b0e8275 Mon Sep 17 00:00:00 2001 From: xile611 Date: Mon, 2 Feb 2026 11:38:10 +0800 Subject: [PATCH 06/27] feat: add arrowMark to timeline --- .../enterprise-development-horizontal.ts | 170 ++++++++++++++++ .../timeline/enterprise-development.ts | 189 ++++++++++++++++++ .../charts/timeline/series/event-series.ts | 141 ++++++++++++- .../src/charts/timeline/series/interface.ts | 18 +- .../src/charts/timeline/series/theme.ts | 4 + .../charts/timeline/timeline-transformer.ts | 6 + 6 files changed, 517 insertions(+), 11 deletions(-) create mode 100644 packages/vchart-extension/__tests__/runtime/browser/test-page/timeline/enterprise-development-horizontal.ts create mode 100644 packages/vchart-extension/__tests__/runtime/browser/test-page/timeline/enterprise-development.ts diff --git a/packages/vchart-extension/__tests__/runtime/browser/test-page/timeline/enterprise-development-horizontal.ts b/packages/vchart-extension/__tests__/runtime/browser/test-page/timeline/enterprise-development-horizontal.ts new file mode 100644 index 0000000000..b8a59d4f37 --- /dev/null +++ b/packages/vchart-extension/__tests__/runtime/browser/test-page/timeline/enterprise-development-horizontal.ts @@ -0,0 +1,170 @@ +import { VChart, type Datum } from '@visactor/vchart'; +import { registerTimelineChart } from '../../../../../src'; +import type { ITimelineChartSpec } from '../../../../../src/charts/timeline'; + +const timelineData = [ + { + id: '1', + year: '2018年', + step: '01', + title: '企业成立', + detail: '完成初期团队搭建和产品定位', + time: 1, + color: '#5B8FF9' + }, + { + id: '2', + year: '2020年', + step: '02', + title: '发布首款核心产品', + detail: '打开区域市场', + time: 2, + color: '#5AD8A6' + }, + { + id: '3', + year: '2021年', + step: '03', + title: '启动数字化平台', + detail: '提升内部运营效率', + time: 3, + color: '#E8684A' + }, + { + id: '4', + year: '2022年', + step: '04', + title: '完成A轮融资', + detail: '加速市场拓展布局', + time: 4, + color: '#9270CA' + }, + { + id: '5', + year: '2024年', + step: '05', + title: '推进生态合作', + detail: '拓展全国影响力', + time: 5, + color: '#6C5DD3' + } +]; + +const getDatumString = (datum: Datum | undefined, key: string) => { + if (!datum || typeof datum !== 'object') { + return ''; + } + const value = (datum as Record)[key]; + return typeof value === 'string' ? value : ''; +}; + +const spec: ITimelineChartSpec = { + type: 'timeline', + name: 'enterprise-development', + direction: 'horizontal', + padding: { + left: 200, + right: 200, + top: 120, + bottom: 80 + }, + background: '#f5f5f5', + data: [ + { + id: 'timeline-data', + values: timelineData + } + ], + title: { + visible: true, + text: '企业发展时间线', + subtext: '展示企业在关键年份的战略动作与发展节点', + textStyle: { + fontSize: 32, + fontWeight: 'bold', + fill: '#1a1a1a' + } + }, + series: [ + { + type: 'event', + dataId: 'timeline-data', + timeField: 'time', + eventField: 'year', + subTitleField: 'title', + labelPosition: 'right', + arrow: { + visible: true + }, + dot: { + style: { + size: 20, + fill: (datum: Datum) => String((datum as Record).color ?? '#5B8FF9'), + lineWidth: 4, + stroke: '#ffffff' + } + }, + line: { + style: { + stroke: '#d9d9d9', + lineWidth: 4 + } + }, + title: { + style: { + fill: '#1a1a1a', + fontSize: 18, + fontWeight: 600 + } + }, + subTitle: { + style: { + fill: '#1a1a1a', + fontSize: 15, + fontWeight: 'normal' + } + } + } + ], + tooltip: { + mark: { + title: { + value: (datum?: Datum) => getDatumString(datum, 'year') + }, + content: [ + { + key: '阶段', + value: (datum?: Datum) => getDatumString(datum, 'step') + }, + { + key: '标题', + value: (datum?: Datum) => getDatumString(datum, 'title') + }, + { + key: '详情', + value: (datum?: Datum) => getDatumString(datum, 'detail') + } + ] + } + } +}; + +declare global { + interface Window { + vchartH?: VChart; + } +} + +const run = () => { + registerTimelineChart(); + const cs = new VChart(spec, { + dom: document.getElementById('chart') as HTMLElement, + onError: err => { + console.error(err); + } + }); + cs.renderSync(); + window.vchartH = cs; +}; + +run(); diff --git a/packages/vchart-extension/__tests__/runtime/browser/test-page/timeline/enterprise-development.ts b/packages/vchart-extension/__tests__/runtime/browser/test-page/timeline/enterprise-development.ts new file mode 100644 index 0000000000..e5b895797f --- /dev/null +++ b/packages/vchart-extension/__tests__/runtime/browser/test-page/timeline/enterprise-development.ts @@ -0,0 +1,189 @@ +import { VChart, type Datum } from '@visactor/vchart'; +import { registerTimelineChart } from '../../../../../src'; +import type { ITimelineChartSpec } from '../../../../../src/charts/timeline'; + +const timelineData = [ + { + id: '1', + year: '2018年', + step: '01', + title: '企业成立', + detail: '完成初期团队搭建和产品定位', + time: 1, + color: '#5B8FF9' + }, + { + id: '2', + year: '2020年', + step: '02', + title: '发布首款核心产品', + detail: '打开区域市场', + time: 2, + color: '#5AD8A6' + }, + { + id: '3', + year: '2021年', + step: '03', + title: '启动数字化平台', + detail: '提升内部运营效率', + time: 3, + color: '#E8684A' + }, + { + id: '4', + year: '2022年', + step: '04', + title: '完成A轮融资', + detail: '加速市场拓展布局', + time: 4, + color: '#9270CA' + }, + { + id: '5', + year: '2024年', + step: '05', + title: '推进生态合作', + detail: '拓展全国影响力', + time: 5, + color: '#6C5DD3' + } +]; + +const getDatumString = (datum: Datum | undefined, key: string) => { + if (!datum || typeof datum !== 'object') { + return ''; + } + const value = (datum as Record)[key]; + return typeof value === 'string' ? value : ''; +}; + +const spec: ITimelineChartSpec = { + type: 'timeline', + name: 'enterprise-development', + direction: 'vertical', + padding: { + left: 200, + right: 200, + top: 120, + bottom: 80 + }, + background: '#f5f5f5', + data: [ + { + id: 'timeline-data', + values: timelineData + } + ], + title: { + visible: true, + text: '企业发展时间线', + subtext: '展示企业在关键年份的战略动作与发展节点', + textStyle: { + fontSize: 32, + fontWeight: 'bold', + fill: '#1a1a1a' + } + }, + axes: [ + { + orient: 'left', + type: 'band', + // inverse: true, + label: { + visible: false + }, + tick: { + visible: false + }, + grid: { + visible: false + }, + domainLine: { + visible: false + } + } + ], + series: [ + { + type: 'event', + dataId: 'timeline-data', + timeField: 'time', + eventField: 'year', + subTitleField: 'title', + labelPosition: 'right', + arrow: { + visible: false + }, + dot: { + style: { + size: 20, + fill: (datum: Datum) => String((datum as Record).color ?? '#5B8FF9'), + lineWidth: 4, + stroke: '#ffffff' + } + }, + line: { + style: { + stroke: '#d9d9d9', + lineWidth: 4 + } + }, + title: { + style: { + fill: '#1a1a1a', + fontSize: 18, + fontWeight: 600 + } + }, + subTitle: { + style: { + fill: '#1a1a1a', + fontSize: 15, + fontWeight: 'normal' + } + } + } + ], + tooltip: { + mark: { + title: { + value: (datum?: Datum) => getDatumString(datum, 'year') + }, + content: [ + { + key: '阶段', + value: (datum?: Datum) => getDatumString(datum, 'step') + }, + { + key: '标题', + value: (datum?: Datum) => getDatumString(datum, 'title') + }, + { + key: '详情', + value: (datum?: Datum) => getDatumString(datum, 'detail') + } + ] + } + } +}; + +declare global { + interface Window { + vchartVertical?: VChart; + } +} + +const run = () => { + registerTimelineChart(); + const cs = new VChart(spec, { + dom: document.getElementById('chart') as HTMLElement, + onError: err => { + console.error(err); + } + }); + cs.renderSync(); + window.vchartVertical = cs; +}; + +run(); diff --git a/packages/vchart-extension/src/charts/timeline/series/event-series.ts b/packages/vchart-extension/src/charts/timeline/series/event-series.ts index b7aaac6de7..a50065e899 100644 --- a/packages/vchart-extension/src/charts/timeline/series/event-series.ts +++ b/packages/vchart-extension/src/charts/timeline/series/event-series.ts @@ -9,6 +9,7 @@ import { registerSymbolMark, registerTextMark, registerLineMark, + registerPathMark, STATE_VALUE_ENUM, type Datum, type IMark, @@ -32,7 +33,8 @@ const eventSeriesMark: SeriesMarkMap = { [SeriesMarkNameEnum.line]: { name: SeriesMarkNameEnum.line, type: MarkTypeEnum.line }, [SeriesMarkNameEnum.dot]: { name: SeriesMarkNameEnum.dot, type: MarkTypeEnum.symbol }, [SeriesMarkNameEnum.title]: { name: SeriesMarkNameEnum.title, type: MarkTypeEnum.text }, - [SeriesMarkNameEnum.subTitle]: { name: SeriesMarkNameEnum.subTitle, type: MarkTypeEnum.text } + [SeriesMarkNameEnum.subTitle]: { name: SeriesMarkNameEnum.subTitle, type: MarkTypeEnum.text }, + arrow: { name: 'arrow', type: MarkTypeEnum.path } }; export class EventSeries extends CartesianSeries { @@ -52,6 +54,7 @@ export class EventSeries extends private _titleMark?: IMark; private _subTitleMark?: IMark; private _axisLineMark?: IMark; + private _arrowMark?: IMark; private _timeField?: string; private _eventField?: string; @@ -89,6 +92,10 @@ export class EventSeries extends isSeriesMark: true }); + this._arrowMark = this._createMark(EventSeries.mark.arrow, { + isSeriesMark: true + }); + this._titleMark = this._createMark(EventSeries.mark.title); this._subTitleMark = this._createMark(EventSeries.mark.subTitle); @@ -140,6 +147,18 @@ export class EventSeries extends ); } + if (this._arrowMark) { + this.setMarkStyle( + this._arrowMark, + { + path: (datum: Datum) => this._getArrowPath(datum), + fill: dotSpec?.style?.fill ?? this.getColorAttribute() + }, + STATE_VALUE_ENUM.STATE_NORMAL, + AttributeLevel.Series + ); + } + if (this._titleMark) { this.setMarkStyle( this._titleMark, @@ -231,7 +250,7 @@ export class EventSeries extends private _getLabelTextBaseline(datum: Datum, isTitle: boolean): 'top' | 'bottom' | 'middle' { if (this.direction === 'vertical') { // vertical 布局时：title 用 top，subTitle 用 top - return 'top'; + return 'middle'; } const side = this._getLabelSide(datum); return side === 'primary' ? 'bottom' : 'top'; @@ -399,6 +418,119 @@ export class EventSeries extends return datum === firstInGroup; } + private _getNextDatum(datum: Datum): Datum | null { + const data = this._getViewDataList(); + const currentIndex = data.indexOf(datum); + + if (currentIndex === -1 || currentIndex === data.length - 1) { + return null; + } + + if (!this._seriesField) { + return data[currentIndex + 1]; + } + + const categoryValue = (datum as Record)[this._seriesField]; + + // 在同一分组中找到下一个数据 + for (let i = currentIndex + 1; i < data.length; i++) { + const nextDatum = data[i]; + if ((nextDatum as Record)[this._seriesField] === categoryValue) { + return nextDatum; + } + } + + return null; + } + + private _getPreviousDatum(datum: Datum): Datum | null { + const data = this._getViewDataList(); + const currentIndex = data.indexOf(datum); + + if (currentIndex === -1 || currentIndex === 0) { + return null; + } + + if (!this._seriesField) { + return data[currentIndex - 1]; + } + + const categoryValue = (datum as Record)[this._seriesField]; + + // 在同一分组中找到上一个数据 + for (let i = currentIndex - 1; i >= 0; i--) { + const prevDatum = data[i]; + if ((prevDatum as Record)[this._seriesField] === categoryValue) { + return prevDatum; + } + } + + return null; + } + + private _getArrowPath(datum: Datum): string { + const point = this._getPoint(datum); + const nextDatum = this._getNextDatum(datum); + const prevDatum = this._getPreviousDatum(datum); + + const arrowThickness = this._spec.arrow?.thickness ?? 16; + const rect = this._region.getLayoutRect(); + + if (this.direction === 'vertical') { + const axisHelper = this.getYAxisHelper(); + const inverse = axisHelper.isInverse(); + const startPoint = prevDatum + ? { + x: point.x, + y: (this._getPoint(prevDatum).y + point.y) / 2 + } + : { x: point.x, y: inverse ? 0 : rect.height }; + const endPoint = nextDatum + ? { + x: point.x, + y: (this._getPoint(nextDatum).y + point.y) / 2 + } + : { x: point.x, y: inverse ? rect.height : 0 }; + const tag = inverse ? 1 : -1; + + const arrowHeight = arrowThickness / 3; + const arrowWidth = arrowThickness / 2; + + return `M ${startPoint.x - arrowWidth} ${startPoint.y} L ${startPoint.x} ${startPoint.y + tag * arrowHeight} L ${ + startPoint.x + arrowWidth + } ${startPoint.y} + L ${endPoint.x + arrowWidth} ${endPoint.y - tag * arrowHeight} + L ${endPoint.x} ${endPoint.y} + L ${endPoint.x - arrowWidth} ${endPoint.y - tag * arrowHeight} Z`; + } + + const axisHelper = this.getXAxisHelper(); + const inverse = axisHelper.isInverse(); + const startPoint = prevDatum + ? { + x: (this._getPoint(prevDatum).x + point.x) / 2, + y: point.y + } + : { x: inverse ? rect.width : 0, y: point.y }; + const endPoint = nextDatum + ? { + x: (this._getPoint(nextDatum).x + point.x) / 2, + y: point.y + } + : { x: inverse ? 0 : rect.width, y: point.y }; + const tag = inverse ? -1 : 1; + + const arrowHeight = arrowThickness / 2; + const arrowWidth = arrowThickness / 3; + + return `M ${startPoint.x} ${startPoint.y - arrowHeight} L ${startPoint.x + tag * arrowWidth} ${startPoint.y} L ${ + startPoint.x + } ${startPoint.y + arrowHeight} + L ${endPoint.x - tag * arrowWidth} ${endPoint.y + arrowHeight} + L ${endPoint.x} ${endPoint.y} + L ${endPoint.x - tag * arrowWidth} ${endPoint.y - arrowHeight} Z`; + } + private _getDatumString(datum: Datum | undefined, field?: string): string { if (!datum || !field) { return ''; @@ -423,7 +555,9 @@ export class EventSeries extends } getActiveMarks(): IMark[] { - return [this._axisLineMark, this._dotMark, this._titleMark, this._subTitleMark].filter(Boolean) as IMark[]; + return [this._axisLineMark, this._dotMark, this._arrowMark, this._titleMark, this._subTitleMark].filter( + Boolean + ) as IMark[]; } } @@ -431,5 +565,6 @@ export const registerEventSeries = () => { registerSymbolMark(); registerTextMark(); registerLineMark(); + registerPathMark(); Factory.registerSeries(EventSeries.type, EventSeries); }; diff --git a/packages/vchart-extension/src/charts/timeline/series/interface.ts b/packages/vchart-extension/src/charts/timeline/series/interface.ts index ba9ed1d2a1..463b5d249c 100644 --- a/packages/vchart-extension/src/charts/timeline/series/interface.ts +++ b/packages/vchart-extension/src/charts/timeline/series/interface.ts @@ -1,4 +1,11 @@ -import type { IMarkSpec, ISymbolMarkSpec, ITextMarkSpec, ILineMarkSpec, ICartesianSeriesSpec } from '@visactor/vchart'; +import type { + IMarkSpec, + ISymbolMarkSpec, + ITextMarkSpec, + ILineMarkSpec, + IPathMarkSpec, + ICartesianSeriesSpec +} from '@visactor/vchart'; /** horizontal 布局时的标题位置 */ export type HorizontalLabelPosition = 'top' | 'bottom' | 'top-bottom' | 'bottom-top'; @@ -9,24 +16,18 @@ export type VerticalLabelPosition = 'left' | 'right' | 'left-right' | 'right-lef /** 标题位置配置 */ export type LabelPosition = HorizontalLabelPosition | VerticalLabelPosition; -export interface IEventSeriesSpec extends ICartesianSeriesSpec { +export interface IEventSeriesSpec extends ICartesianSeriesSpec, IEventSeriesTheme { type: 'event'; timeField?: string; eventField?: string; subTitleField?: string; seriesField?: string; - dotTypeField?: string; /** 标题和副标题的位置 */ labelPosition?: LabelPosition; /** dot 和 label 之间的间距 */ dotLabelGap?: number; /** title 和 subTitle 之间的间距 */ titleSubTitleGap?: number; - name?: string; - dot?: IMarkSpec; - title?: IMarkSpec; - subTitle?: IMarkSpec; - line?: IMarkSpec; } export interface IEventSeriesTheme { @@ -38,4 +39,5 @@ export interface IEventSeriesTheme { title?: IMarkSpec; subTitle?: IMarkSpec; line?: IMarkSpec; + arrow?: IMarkSpec & { thickness?: number }; } diff --git a/packages/vchart-extension/src/charts/timeline/series/theme.ts b/packages/vchart-extension/src/charts/timeline/series/theme.ts index d10e9e26b3..fb4088c2cc 100644 --- a/packages/vchart-extension/src/charts/timeline/series/theme.ts +++ b/packages/vchart-extension/src/charts/timeline/series/theme.ts @@ -26,5 +26,9 @@ export const event: IEventSeriesTheme = { style: { fontSize: 12 } + }, + arrow: { + visible: false, + thickness: 16 } }; diff --git a/packages/vchart-extension/src/charts/timeline/timeline-transformer.ts b/packages/vchart-extension/src/charts/timeline/timeline-transformer.ts index 86cc2a2fb3..f13db7d8d7 100644 --- a/packages/vchart-extension/src/charts/timeline/timeline-transformer.ts +++ b/packages/vchart-extension/src/charts/timeline/timeline-transformer.ts @@ -64,6 +64,12 @@ export class TimelineChartSpecTransformer< visible: false } }, + orientNormalized === 'left' || orientNormalized === 'right' + ? { + inverse: true + } + : {}, + typeNormalized === 'band' ? { paddingInner: 0, paddingOuter: 0 } : {}, { ...((rawAxis ?? {}) as ICartesianAxisSpec), orient: orientNormalized, From a19a800219156924dca70384f1518fb338813a67 Mon Sep 17 00:00:00 2001 From: xile611 Date: Mon, 2 Feb 2026 12:21:06 +0800 Subject: [PATCH 07/27] feat: support iconMark in timeline --- .../test-page/timeline/icon-demo-vertical.ts | 146 ++++++++++++++++++ .../browser/test-page/timeline/icon-demo.ts | 145 +++++++++++++++++ .../charts/timeline/series/event-series.ts | 98 +++++++++--- .../src/charts/timeline/series/interface.ts | 15 +- .../src/charts/timeline/series/theme.ts | 10 +- 5 files changed, 377 insertions(+), 37 deletions(-) create mode 100644 packages/vchart-extension/__tests__/runtime/browser/test-page/timeline/icon-demo-vertical.ts create mode 100644 packages/vchart-extension/__tests__/runtime/browser/test-page/timeline/icon-demo.ts diff --git a/packages/vchart-extension/__tests__/runtime/browser/test-page/timeline/icon-demo-vertical.ts b/packages/vchart-extension/__tests__/runtime/browser/test-page/timeline/icon-demo-vertical.ts new file mode 100644 index 0000000000..9fd76d90a4 --- /dev/null +++ b/packages/vchart-extension/__tests__/runtime/browser/test-page/timeline/icon-demo-vertical.ts @@ -0,0 +1,146 @@ +import { VChart, type Datum } from '@visactor/vchart'; +import { registerTimelineChart } from '../../../../../src'; +import type { ITimelineChartSpec } from '../../../../../src/charts/timeline'; + +/** + * Icon 功能演示 - 垂直布局示例 + * 展示垂直布局时 iconMark 与 title 关于 lineMark 对称的效果 + */ + +const timelineData = [ + { + id: '1', + year: '2021', + title: '产品发布', + detail: '发布第一代产品，获得市场认可', + icon: 'star', + time: 1, + color: '#4A90E2' + }, + { + id: '2', + year: '2022', + title: '技术突破', + detail: '核心技术获得重大突破', + icon: 'triangleUp', + time: 2, + color: '#50C8C8' + }, + { + id: '3', + year: '2023', + title: '市场扩展', + detail: '业务覆盖全国主要城市', + icon: 'diamond', + time: 3, + color: '#F5A623' + }, + { + id: '4', + year: '2024', + title: '国际化', + detail: '进军国际市场，开启新篇章', + icon: 'cross', + time: 4, + color: '#9B59B6' + } +]; + +const spec: ITimelineChartSpec = { + type: 'timeline', + name: 'icon-demo-vertical', + direction: 'vertical', + padding: { + left: 200, + right: 200, + top: 60, + bottom: 60 + }, + background: '#f5f5f5', + data: [ + { + id: 'timeline-data', + values: timelineData + } + ], + title: { + visible: true, + text: 'Icon 功能演示 - 垂直布局', + subtext: 'iconMark 与 title 关于 lineMark 对称显示', + style: { + fontSize: 24, + fontWeight: 'bold', + fill: '#333' + }, + subtextStyle: { + fontSize: 14, + fill: '#666' + } + }, + series: [ + { + type: 'event', + dataId: 'timeline-data', + timeField: 'time', + eventField: 'title', + subTitleField: 'detail', + iconField: 'icon', + labelPosition: 'left-right', + dotLabelGap: 8, + dot: { + style: { + size: 10, + fill: (datum: Datum) => String((datum as Record).color ?? '#4A90E2'), + stroke: '#fff', + lineWidth: 2 + } + }, + icon: { + style: { + size: 24, + fill: (datum: Datum) => String((datum as Record).color ?? '#4A90E2') + } + }, + title: { + style: { + fill: '#333', + fontSize: 14, + fontWeight: 'bold' + } + }, + subTitle: { + style: { + fill: '#666', + fontSize: 12, + lineHeight: 18 + } + }, + line: { + style: { + stroke: '#c0c3c7', + lineWidth: 2 + } + } + } + ] +}; + +declare global { + interface Window { + vchart?: VChart; + } +} + +const run = () => { + registerTimelineChart(); + const cs = new VChart(spec, { + dom: document.getElementById('chart') as HTMLElement, + onError: err => { + console.error(err); + } + }); + cs.renderSync(); + window.vchart = cs; +}; + +run(); diff --git a/packages/vchart-extension/__tests__/runtime/browser/test-page/timeline/icon-demo.ts b/packages/vchart-extension/__tests__/runtime/browser/test-page/timeline/icon-demo.ts new file mode 100644 index 0000000000..327a9cb992 --- /dev/null +++ b/packages/vchart-extension/__tests__/runtime/browser/test-page/timeline/icon-demo.ts @@ -0,0 +1,145 @@ +import { VChart, type Datum } from '@visactor/vchart'; +import { registerTimelineChart } from '../../../../../src'; +import type { ITimelineChartSpec } from '../../../../../src/charts/timeline'; + +/** + * Icon 功能演示 - 水平布局示例 + * 展示 iconMark 与 title 关于 lineMark 对称的效果 + */ + +const timelineData = [ + { + id: '1', + year: '2021', + title: '产品发布', + detail: '发布第一代产品，获得市场认可', + icon: 'star', + time: 1, + color: '#4A90E2' + }, + { + id: '2', + year: '2022', + title: '技术突破', + detail: '核心技术获得重大突破', + icon: 'triangleUp', + time: 2, + color: '#50C8C8' + }, + { + id: '3', + year: '2023', + title: '市场扩展', + detail: '业务覆盖全国主要城市', + icon: 'diamond', + time: 3, + color: '#F5A623' + }, + { + id: '4', + year: '2024', + title: '国际化', + detail: '进军国际市场，开启新篇章', + icon: 'cross', + time: 4, + color: '#9B59B6' + } +]; + +const spec: ITimelineChartSpec = { + type: 'timeline', + name: 'icon-demo', + direction: 'horizontal', + padding: { + left: 60, + right: 60, + top: 120, + bottom: 120 + }, + background: '#f5f5f5', + data: [ + { + id: 'timeline-data', + values: timelineData + } + ], + title: { + visible: true, + text: 'Icon 功能演示', + subtext: 'iconMark 与 title 关于 lineMark 对称显示', + style: { + fontSize: 24, + fontWeight: 'bold', + fill: '#333' + }, + subtextStyle: { + fontSize: 14, + fill: '#666' + } + }, + series: [ + { + type: 'event', + dataId: 'timeline-data', + timeField: 'time', + eventField: 'title', + subTitleField: 'detail', + labelPosition: 'top-bottom', + dotLabelGap: 8, + dot: { + style: { + size: 10, + fill: (datum: Datum) => String((datum as Record).color ?? '#4A90E2'), + stroke: '#fff', + lineWidth: 2 + } + }, + icon: { + style: { + size: 24, + fill: (datum: Datum) => String((datum as Record).color ?? '#4A90E2') + } + }, + title: { + style: { + fill: '#333', + fontSize: 14, + fontWeight: 'bold' + } + }, + subTitle: { + style: { + fill: '#666', + fontSize: 12, + lineHeight: 18 + } + }, + line: { + style: { + stroke: '#c0c3c7', + lineWidth: 2 + } + } + } + ] +}; + +declare global { + interface Window { + vchart?: VChart; + } +} + +const run = () => { + registerTimelineChart(); + const cs = new VChart(spec, { + dom: document.getElementById('chart') as HTMLElement, + onError: err => { + console.error(err); + } + }); + cs.renderSync(); + window.vchart = cs; +}; + +run(); diff --git a/packages/vchart-extension/src/charts/timeline/series/event-series.ts b/packages/vchart-extension/src/charts/timeline/series/event-series.ts index a50065e899..1659e2f27a 100644 --- a/packages/vchart-extension/src/charts/timeline/series/event-series.ts +++ b/packages/vchart-extension/src/charts/timeline/series/event-series.ts @@ -20,6 +20,7 @@ import { import { EVENT_SERIES_TYPE } from './constant'; import type { IEventSeriesSpec, LabelPosition } from './interface'; import { event } from './theme'; +import { isValid } from '@visactor/vutils'; type AxisHelper = { isContinuous?: boolean; @@ -28,14 +29,15 @@ type AxisHelper = { valueToPosition?: (value: unknown) => number; }; -const eventSeriesMark: SeriesMarkMap = { +const eventSeriesMark = { ...baseSeriesMark, [SeriesMarkNameEnum.line]: { name: SeriesMarkNameEnum.line, type: MarkTypeEnum.line }, [SeriesMarkNameEnum.dot]: { name: SeriesMarkNameEnum.dot, type: MarkTypeEnum.symbol }, + icon: { name: 'icon', type: MarkTypeEnum.symbol }, [SeriesMarkNameEnum.title]: { name: SeriesMarkNameEnum.title, type: MarkTypeEnum.text }, [SeriesMarkNameEnum.subTitle]: { name: SeriesMarkNameEnum.subTitle, type: MarkTypeEnum.text }, arrow: { name: 'arrow', type: MarkTypeEnum.path } -}; +} as any; export class EventSeries extends CartesianSeries { static readonly type: string = EVENT_SERIES_TYPE; @@ -51,6 +53,7 @@ export class EventSeries extends protected declare _spec: T; private _dotMark?: IMark; + private _iconMark?: IMark; private _titleMark?: IMark; private _subTitleMark?: IMark; private _axisLineMark?: IMark; @@ -59,9 +62,8 @@ export class EventSeries extends private _timeField?: string; private _eventField?: string; private _subTitleField?: string; + private _iconField?: string; private _labelPosition?: LabelPosition; - private _dotLabelGap?: number; - private _titleSubTitleGap?: number; setAttrFromSpec(): void { super.setAttrFromSpec(); @@ -69,9 +71,8 @@ export class EventSeries extends this._timeField = this._spec.timeField as string | undefined; this._eventField = this._spec.eventField; this._subTitleField = this._spec.subTitleField; + this._iconField = this._spec.iconField; this._labelPosition = this._spec.labelPosition; - this._dotLabelGap = this._spec.dotLabelGap ?? 6; - this._titleSubTitleGap = this._spec.titleSubTitleGap ?? 4; } getDimensionField(): string[] { @@ -92,7 +93,11 @@ export class EventSeries extends isSeriesMark: true }); - this._arrowMark = this._createMark(EventSeries.mark.arrow, { + this._iconMark = this._createMark((EventSeries.mark as any).icon, { + isSeriesMark: true + }); + + this._arrowMark = this._createMark((EventSeries.mark as any).arrow, { isSeriesMark: true }); @@ -116,22 +121,19 @@ export class EventSeries extends ); } - const dotSpec = this._spec.dot as { size?: number; style?: { size?: number; fill?: unknown } } | undefined; - const dotSize = - typeof dotSpec?.style?.size === 'number' - ? dotSpec.style.size - : typeof dotSpec?.size === 'number' - ? dotSpec.size - : 8; + const dotSpec = this._spec.dot as { style?: { size?: number; fill?: unknown } } | undefined; + const dotSize = typeof dotSpec?.style?.size === 'number' ? dotSpec.style.size : 8; - const titleStyle = this._spec.title?.style ?? {}; - const subTitleStyle = this._spec.subTitle?.style ?? {}; + const titleSpec = this._spec.title; + const titleStyle = titleSpec?.style ?? {}; + const subTitleSpec = this._spec.subTitle; + const subTitleStyle = subTitleSpec?.style ?? {}; // 获取 title 字体大小，用于计算 subTitle 的位置 const titleFontSize = typeof titleStyle.fontSize === 'number' ? titleStyle.fontSize : 14; // dot 和 label 之间的间距 - const labelOffset = dotSize / 2 + (this._dotLabelGap ?? 6); + const labelOffset = dotSize / 2 + (titleSpec?.offset ?? 6); if (this._dotMark) { this.setMarkStyle( @@ -191,6 +193,27 @@ export class EventSeries extends AttributeLevel.Series ); } + + // icon 和 line 之间的间距 + + const iconSpec = this._spec.icon as { offset?: number; style?: { size?: number; fill?: unknown } } | undefined; + const iconSize = typeof iconSpec?.style?.size === 'number' ? iconSpec.style.size : 20; + const iconOffset = (isValid(iconSpec?.offset) ? iconSpec.offset + dotSize / 2 : labelOffset) + iconSize / 2; + + if (this._iconMark) { + this.setMarkStyle( + this._iconMark, + { + x: (datum: Datum) => this._getIconPosition(datum, iconOffset).x, + y: (datum: Datum) => this._getIconPosition(datum, iconOffset).y, + size: iconSize, + fill: iconSpec?.style?.fill ?? this.getColorAttribute(), + shape: (datum: Datum) => this._getDatumString(datum, this._iconField) || 'circle' + }, + STATE_VALUE_ENUM.STATE_NORMAL, + AttributeLevel.Series + ); + } } /** @@ -283,6 +306,7 @@ export class EventSeries extends private _getSubTitlePosition(datum: Datum, offset: number, titleFontSize: number): IPoint { const point = this._getPoint(datum); const side = this._getLabelSide(datum); + const gap = this._spec.title?.subTitleGap ?? 4; if (this.direction === 'vertical') { // vertical: left/right，subTitle 在 title 下方 @@ -292,16 +316,35 @@ export class EventSeries extends return { x: side === 'primary' ? point.x - offset : point.x + offset, - y: point.y + titleLineHeight + this._titleSubTitleGap + y: point.y + titleLineHeight + gap }; } // horizontal: top/bottom return { x: point.x, - y: - side === 'primary' - ? point.y - (offset + titleFontSize + this._titleSubTitleGap) - : point.y + (offset + titleFontSize + this._titleSubTitleGap) + y: side === 'primary' ? point.y - (offset + titleFontSize + gap) : point.y + (offset + titleFontSize + gap) + }; + } + + /** + * 获取 icon 的位置 + * icon 与 title 关于 lineMark 对称 + */ + private _getIconPosition(datum: Datum, offset: number): IPoint { + const point = this._getPoint(datum); + const side = this._getLabelSide(datum); + + if (this.direction === 'vertical') { + // vertical: 当 title 在 right 时，icon 在 left；当 title 在 left 时，icon 在 right + return { + x: side === 'primary' ? point.x + offset : point.x - offset, + y: point.y + }; + } + // horizontal: 当 title 在 top 时，icon 在 bottom；当 title 在 bottom 时，icon 在 top + return { + x: point.x, + y: side === 'primary' ? point.y + offset : point.y - offset }; } @@ -555,9 +598,14 @@ export class EventSeries extends } getActiveMarks(): IMark[] { - return [this._axisLineMark, this._dotMark, this._arrowMark, this._titleMark, this._subTitleMark].filter( - Boolean - ) as IMark[]; + return [ + this._axisLineMark, + this._dotMark, + this._iconMark, + this._arrowMark, + this._titleMark, + this._subTitleMark + ].filter(Boolean) as IMark[]; } } diff --git a/packages/vchart-extension/src/charts/timeline/series/interface.ts b/packages/vchart-extension/src/charts/timeline/series/interface.ts index 463b5d249c..4a89b80eab 100644 --- a/packages/vchart-extension/src/charts/timeline/series/interface.ts +++ b/packages/vchart-extension/src/charts/timeline/series/interface.ts @@ -22,22 +22,17 @@ export interface IEventSeriesSpec extends ICartesianSeriesSpec, IEventSeriesThem eventField?: string; subTitleField?: string; seriesField?: string; + /** icon 字段名，用于显示图标或图片 */ + iconField?: string; /** 标题和副标题的位置 */ labelPosition?: LabelPosition; - /** dot 和 label 之间的间距 */ - dotLabelGap?: number; - /** title 和 subTitle 之间的间距 */ - titleSubTitleGap?: number; } export interface IEventSeriesTheme { - /** dot 和 label 之间的间距 */ - dotLabelGap?: number; - /** title 和 subTitle 之间的间距 */ - titleSubTitleGap?: number; dot?: IMarkSpec; - title?: IMarkSpec; - subTitle?: IMarkSpec; + icon?: IMarkSpec & { offset?: number }; + title?: IMarkSpec & { subTitleGap?: number; offset?: number }; + subTitle?: IMarkSpec & { offset?: number }; line?: IMarkSpec; arrow?: IMarkSpec & { thickness?: number }; } diff --git a/packages/vchart-extension/src/charts/timeline/series/theme.ts b/packages/vchart-extension/src/charts/timeline/series/theme.ts index fb4088c2cc..6da313417f 100644 --- a/packages/vchart-extension/src/charts/timeline/series/theme.ts +++ b/packages/vchart-extension/src/charts/timeline/series/theme.ts @@ -1,13 +1,17 @@ import type { IEventSeriesTheme } from './interface'; export const event: IEventSeriesTheme = { - dotLabelGap: 6, - titleSubTitleGap: 4, dot: { style: { size: 8 } }, + icon: { + visible: false, + style: { + size: 20 + } + }, line: { visible: true, style: { @@ -17,6 +21,8 @@ export const event: IEventSeriesTheme = { }, title: { visible: true, + offset: 6, + subTitleGap: 4, style: { fontSize: 14 } From 5244b0fd18fa4a9b13418cd766cad12aa3270803 Mon Sep 17 00:00:00 2001 From: xile611 Date: Mon, 2 Feb 2026 13:55:17 +0800 Subject: [PATCH 08/27] fix: fix tooltip of timeline --- .../charts/timeline/series/event-series.ts | 20 ++++++++++++++++++- 1 file changed, 19 insertions(+), 1 deletion(-) diff --git a/packages/vchart-extension/src/charts/timeline/series/event-series.ts b/packages/vchart-extension/src/charts/timeline/series/event-series.ts index 1659e2f27a..893b98c186 100644 --- a/packages/vchart-extension/src/charts/timeline/series/event-series.ts +++ b/packages/vchart-extension/src/charts/timeline/series/event-series.ts @@ -80,7 +80,14 @@ export class EventSeries extends } getMeasureField(): string[] { - return []; + const fields: string[] = []; + if (this._eventField) { + fields.push(this._eventField); + } + if (this._subTitleField) { + fields.push(this._subTitleField); + } + return fields; } initMark(): void { @@ -106,6 +113,17 @@ export class EventSeries extends this._subTitleMark = this._createMark(EventSeries.mark.subTitle); } + protected initTooltip() { + super.initTooltip(); + + // 将 dot、icon 和 arrow mark 添加到 tooltip 触发器集合中 + this._dotMark && this._tooltipHelper.activeTriggerSet.mark.add(this._dotMark); + this._titleMark && this._tooltipHelper.activeTriggerSet.mark.add(this._titleMark); + this._subTitleMark && this._tooltipHelper.activeTriggerSet.mark.add(this._subTitleMark); + this._iconMark && this._tooltipHelper.activeTriggerSet.mark.add(this._iconMark); + this._arrowMark && this._tooltipHelper.activeTriggerSet.mark.add(this._arrowMark); + } + initMarkStyle(): void { if (this._axisLineMark) { this.setMarkStyle( From aa6c19783b5f3770c473fb736a90ec67b84b5fb5 Mon Sep 17 00:00:00 2001 From: xile611 Date: Mon, 2 Feb 2026 15:31:02 +0800 Subject: [PATCH 09/27] docs: update docs of timeline --- .../en/extension-chart/timeline-arrow.md | 146 +++++++++ .../en/extension-chart/timeline-basic.md | 141 +++++++++ .../en/extension-chart/timeline-group.md | 155 ++++++++++ .../en/extension-chart/timeline-vertical.md | 147 +++++++++ .../en/extension-chart/timeline-with-icon.md | 152 ++++++++++ docs/assets/examples/menu.json | 35 +++ .../zh/extension-chart/timeline-arrow.md | 146 +++++++++ .../zh/extension-chart/timeline-basic.md | 141 +++++++++ .../zh/extension-chart/timeline-group.md | 144 +++++++++ .../zh/extension-chart/timeline-vertical.md | 134 +++++++++ .../zh/extension-chart/timeline-with-icon.md | 146 +++++++++ .../Chart_Extensions/timeline.md | 279 ++++++++++++++++++ docs/assets/guide/menu.json | 7 + .../Chart_Extensions/timeline.md | 279 ++++++++++++++++++ .../vchart/preview/timeline-arrow_2.0.jpeg | Bin 0 -> 56470 bytes .../vchart/preview/timeline-basic_2.0.jpeg | Bin 0 -> 43709 bytes .../vchart/preview/timeline-group_2.0.jpeg | Bin 0 -> 48793 bytes .../vchart/preview/timeline-icon_2.0.jpeg | Bin 0 -> 40753 bytes .../vchart/preview/timeline-vertical_2.0.jpeg | Bin 0 -> 33476 bytes 19 files changed, 2052 insertions(+) create mode 100644 docs/assets/examples/en/extension-chart/timeline-arrow.md create mode 100644 docs/assets/examples/en/extension-chart/timeline-basic.md create mode 100644 docs/assets/examples/en/extension-chart/timeline-group.md create mode 100644 docs/assets/examples/en/extension-chart/timeline-vertical.md create mode 100644 docs/assets/examples/en/extension-chart/timeline-with-icon.md create mode 100644 docs/assets/examples/zh/extension-chart/timeline-arrow.md create mode 100644 docs/assets/examples/zh/extension-chart/timeline-basic.md create mode 100644 docs/assets/examples/zh/extension-chart/timeline-group.md create mode 100644 docs/assets/examples/zh/extension-chart/timeline-vertical.md create mode 100644 docs/assets/examples/zh/extension-chart/timeline-with-icon.md create mode 100644 docs/assets/guide/en/tutorial_docs/Chart_Extensions/timeline.md create mode 100644 docs/assets/guide/zh/tutorial_docs/Chart_Extensions/timeline.md create mode 100644 docs/public/vchart/preview/timeline-arrow_2.0.jpeg create mode 100644 docs/public/vchart/preview/timeline-basic_2.0.jpeg create mode 100644 docs/public/vchart/preview/timeline-group_2.0.jpeg create mode 100644 docs/public/vchart/preview/timeline-icon_2.0.jpeg create mode 100644 docs/public/vchart/preview/timeline-vertical_2.0.jpeg diff --git a/docs/assets/examples/en/extension-chart/timeline-arrow.md b/docs/assets/examples/en/extension-chart/timeline-arrow.md new file mode 100644 index 0000000000..51854e8797 --- /dev/null +++ b/docs/assets/examples/en/extension-chart/timeline-arrow.md @@ -0,0 +1,146 @@ +--- +category: examples +group: extension chart +title: Timeline Chart - With Arrows +keywords: extension, timeline, arrow +order: 5 +cover: /vchart/preview/timeline-arrow_2.0.jpeg +option: extensionChart +--- + +# Timeline Chart - With Arrows + +Timeline charts support displaying arrows between event nodes, providing a more intuitive representation of time flow and continuity between events. + +## Key Configurations + +- `arrow.visible: true` Enable arrow display +- `arrow.thickness` Set the thickness of arrows +- `arrow.style` Configure arrow style + +## Demo Code + +```javascript livedemo +/** --Please add the following code when using in business-- */ +// When using in business, please additionally depend on @visactor/vchart-extension, keeping the package version consistent with vchart +// import { registerTimelineChart } from '@visactor/vchart-extension'; +/** --Please add the above code when using in business-- */ + +/** --Please delete the following code when using in business-- */ +const { registerTimelineChart } = VChartExtension; +/** --Please delete the above code when using in business-- */ + +const spec = { + type: 'timeline', + direction: 'horizontal', + data: [ + { + id: 'timeline-data', + values: [ + { + id: '1', + title: 'Requirements', + detail: 'Collect and analyze user needs', + time: 1, + color: '#4A90E2' + }, + { + id: '2', + title: 'Design', + detail: 'Create technical solution', + time: 2, + color: '#50C8C8' + }, + { + id: '3', + title: 'Development', + detail: 'Implement features', + time: 3, + color: '#F5A623' + }, + { + id: '4', + title: 'Testing', + detail: 'Quality assurance', + time: 4, + color: '#9B59B6' + }, + { + id: '5', + title: 'Release', + detail: 'Go live', + time: 5, + color: '#2ECC71' + } + ] + } + ], + title: { + visible: true, + text: 'Project Development Process', + subtext: 'Complete workflow from requirements to release', + style: { + fontSize: 24, + fontWeight: 'bold', + fill: '#333' + }, + subtextStyle: { + fontSize: 14, + fill: '#666' + } + }, + series: [ + { + type: 'event', + dataId: 'timeline-data', + timeField: 'time', + eventField: 'title', + subTitleField: 'detail', + labelPosition: 'top-bottom', + dot: { + style: { + size: 12, + fill: datum => datum.color, + stroke: '#fff', + lineWidth: 2 + } + }, + arrow: { + visible: true, + thickness: 16, + style: { + fill: datum => datum.color, + fillOpacity: 0.3 + } + }, + title: { + style: { + fill: '#333', + fontSize: 14, + fontWeight: 'bold' + } + }, + subTitle: { + style: { + fill: '#666', + fontSize: 12 + } + }, + line: { + visible: false + } + } + ] +}; + +registerTimelineChart(); +const vchart = new VChart(spec, { dom: CONTAINER_ID }); +vchart.renderSync(); + +// Just for the convenience of console debugging, DO NOT COPY! +window['vchart'] = vchart; +``` + +## Related Tutorials + +[Extension Chart: Timeline Chart](/vchart/guide/tutorial_docs/Chart_Extensions/timeline) diff --git a/docs/assets/examples/en/extension-chart/timeline-basic.md b/docs/assets/examples/en/extension-chart/timeline-basic.md new file mode 100644 index 0000000000..d1ef061824 --- /dev/null +++ b/docs/assets/examples/en/extension-chart/timeline-basic.md @@ -0,0 +1,141 @@ +--- +category: examples +group: extension chart +title: Timeline Chart - Basic +keywords: extension, timeline +order: 1 +cover: /vchart/preview/timeline-basic_2.0.jpeg +option: extensionChart +--- + +# Timeline Chart - Basic + +Timeline charts are used to display events in chronological order, suitable for project milestones, corporate development history, product iterations, and other scenarios. + +## Key Configurations + +- `type: 'timeline'` Specifies the chart type as timeline chart +- `direction: 'horizontal' | 'vertical'` Specifies the direction of the timeline, horizontal or vertical +- `timeField` Specifies the time field +- `eventField` Specifies the event name field +- `subTitleField` Specifies the event detail field + +## Demo Code + +```javascript livedemo +/** --Please add the following code when using in business-- */ +// When using in business, please additionally depend on @visactor/vchart-extension, keeping the package version consistent with vchart +// import { registerTimelineChart } from '@visactor/vchart-extension'; +/** --Please add the above code when using in business-- */ + +/** --Please delete the following code when using in business-- */ +const { registerTimelineChart } = VChartExtension; +/** --Please delete the above code when using in business-- */ + +const spec = { + type: 'timeline', + direction: 'horizontal', + padding: { + left: 60, + right: 60, + top: 150, + bottom: 150 + }, + data: [ + { + id: 'timeline-data', + values: [ + { + id: '1', + year: '2021', + title: 'Product Launch', + detail: 'Released first generation product with market recognition', + time: 1, + color: '#4A90E2' + }, + { + id: '2', + year: '2022', + title: 'Tech Breakthrough', + detail: 'Achieved major breakthrough in core technology', + time: 2, + color: '#50C8C8' + }, + { + id: '3', + year: '2023', + title: 'Market Expansion', + detail: 'Business coverage extended to major cities nationwide', + time: 3, + color: '#F5A623' + }, + { + id: '4', + year: '2024', + title: 'Globalization', + detail: 'Entered international market, opening new chapter', + time: 4, + color: '#9B59B6' + } + ] + } + ], + title: { + visible: true, + text: 'Corporate Development History', + style: { + fontSize: 24, + fontWeight: 'bold', + fill: '#333' + } + }, + series: [ + { + type: 'event', + dataId: 'timeline-data', + timeField: 'time', + eventField: 'title', + subTitleField: 'detail', + labelPosition: 'top-bottom', + dot: { + style: { + size: 12, + fill: datum => datum.color, + stroke: '#fff', + lineWidth: 2 + } + }, + title: { + style: { + fill: '#333', + fontSize: 14, + fontWeight: 'bold' + } + }, + subTitle: { + style: { + fill: '#666', + fontSize: 12 + } + }, + line: { + style: { + stroke: '#c0c3c7', + lineWidth: 2 + } + } + } + ] +}; + +registerTimelineChart(); +const vchart = new VChart(spec, { dom: CONTAINER_ID }); +vchart.renderSync(); + +// Just for the convenience of console debugging, DO NOT COPY! +window['vchart'] = vchart; +``` + +## Related Tutorials + +[Extension Chart: Timeline Chart](/vchart/guide/tutorial_docs/Chart_Extensions/timeline) diff --git a/docs/assets/examples/en/extension-chart/timeline-group.md b/docs/assets/examples/en/extension-chart/timeline-group.md new file mode 100644 index 0000000000..f10ffee573 --- /dev/null +++ b/docs/assets/examples/en/extension-chart/timeline-group.md @@ -0,0 +1,155 @@ +--- +category: examples +group: extension chart +title: Timeline Chart - Grouped Display +keywords: extension, timeline, group +order: 4 +cover: /vchart/preview/timeline-group_2.0.jpeg +option: extensionChart +--- + +# Timeline Chart - Grouped Display + +By configuring seriesField, multiple timelines can be displayed in the same chart, suitable for comparing timelines of different themes or categories. + +## Key Configurations + +- `seriesField` Specifies the grouping field +- Multiple timelines are displayed in parallel, each timeline displays independently + +## Demo Code + +```javascript livedemo +/** --Please add the following code when using in business-- */ +// When using in business, please additionally depend on @visactor/vchart-extension, keeping the package version consistent with vchart +// import { registerTimelineChart } from '@visactor/vchart-extension'; +/** --Please add the above code when using in business-- */ + +/** --Please delete the following code when using in business-- */ +const { registerTimelineChart } = VChartExtension; +/** --Please delete the above code when using in business-- */ + +const spec = { + type: 'timeline', + direction: 'horizontal', + padding: { + left: 60, + right: 60, + top: 100, + bottom: 100 + }, + data: [ + { + id: 'timeline-data', + values: [ + { + category: 'Product Line A', + title: 'V1.0', + detail: 'Initial release', + time: 1, + color: '#4A90E2' + }, + { + category: 'Product Line A', + title: 'V2.0', + detail: 'Feature enhancement', + time: 3, + color: '#4A90E2' + }, + { + category: 'Product Line A', + title: 'V3.0', + detail: 'Performance optimization', + time: 5, + color: '#4A90E2' + }, + { + category: 'Product Line B', + title: 'Beta', + detail: 'Beta version', + time: 2, + color: '#50C8C8' + }, + { + category: 'Product Line B', + title: 'V1.0', + detail: 'Official release', + time: 4, + color: '#50C8C8' + }, + { + category: 'Product Line B', + title: 'V2.0', + detail: 'Major update', + time: 6, + color: '#50C8C8' + } + ] + } + ], + title: { + visible: true, + text: 'Multi-Product Line Comparison', + style: { + fontSize: 24, + fontWeight: 'bold', + fill: '#333' + } + }, + axes: [ + { + orient: 'bottom', + type: 'linear', + min: 0, + max: 7 + }, + { + orient: 'left', + type: 'band' + } + ], + timeField: 'time', + eventField: 'title', + subTitleField: 'detail', + seriesField: 'category', + labelPosition: 'top-bottom', + dot: { + style: { + size: 12, + fill: datum => datum.color, + stroke: '#fff', + lineWidth: 2 + } + }, + title: { + style: { + fill: '#333', + fontSize: 13, + fontWeight: 'bold' + } + }, + subTitle: { + style: { + fill: '#666', + fontSize: 11 + } + }, + line: { + style: { + stroke: datum => datum.color, + lineWidth: 2 + } + } +}; + +registerTimelineChart(); +const vchart = new VChart(spec, { dom: CONTAINER_ID }); +vchart.renderSync(); + +// Just for the convenience of console debugging, DO NOT COPY! +window['vchart'] = vchart; +``` + +## Related Tutorials + +[Extension Chart: Timeline Chart](/vchart/guide/tutorial_docs/Chart_Extensions/timeline) diff --git a/docs/assets/examples/en/extension-chart/timeline-vertical.md b/docs/assets/examples/en/extension-chart/timeline-vertical.md new file mode 100644 index 0000000000..081512126a --- /dev/null +++ b/docs/assets/examples/en/extension-chart/timeline-vertical.md @@ -0,0 +1,147 @@ +--- +category: examples +group: extension chart +title: Timeline Chart - Vertical Layout +keywords: extension, timeline, vertical +order: 3 +cover: /vchart/preview/timeline-vertical_2.0.jpeg +option: extensionChart +--- + +# Timeline Chart - Vertical Layout + +Timeline charts support vertical layout with time flowing from top to bottom, suitable when there is sufficient horizontal space on the page. + +## Key Configurations + +- `direction: 'vertical'` Specifies vertical layout +- `labelPosition: 'left-right' | 'right-left'` Controls alternating display of labels on left and right sides + +## Demo Code + +```javascript livedemo +/** --Please add the following code when using in business-- */ +// When using in business, please additionally depend on @visactor/vchart-extension, keeping the package version consistent with vchart +// import { registerTimelineChart } from '@visactor/vchart-extension'; +/** --Please add the above code when using in business-- */ + +/** --Please delete the following code when using in business-- */ +const { registerTimelineChart } = VChartExtension; +/** --Please delete the above code when using in business-- */ + +const spec = { + type: 'timeline', + direction: 'vertical', + padding: { + left: 200, + right: 200, + top: 60, + bottom: 60 + }, + data: [ + { + id: 'timeline-data', + values: [ + { + id: '1', + year: '2021 Q1', + title: 'V1.0 Release', + detail: 'First official version launched', + time: 1, + color: '#4A90E2' + }, + { + id: '2', + year: '2021 Q3', + title: 'V2.0 Upgrade', + detail: '50% performance improvement', + time: 2, + color: '#50C8C8' + }, + { + id: '3', + year: '2022 Q1', + title: 'V3.0 Refactor', + detail: 'Complete architecture upgrade', + time: 3, + color: '#F5A623' + }, + { + id: '4', + year: '2022 Q3', + title: 'V4.0 Internationalization', + detail: 'Multi-language support', + time: 4, + color: '#9B59B6' + }, + { + id: '5', + year: '2023 Q1', + title: 'V5.0 AI-Powered', + detail: 'AI capabilities introduced', + time: 5, + color: '#E74C3C' + } + ] + } + ], + title: { + visible: true, + text: 'Product Version Iteration History', + style: { + fontSize: 24, + fontWeight: 'bold', + fill: '#333' + } + }, + series: [ + { + type: 'event', + dataId: 'timeline-data', + timeField: 'time', + eventField: 'title', + subTitleField: 'detail', + labelPosition: 'left-right', + dotLabelGap: 10, + dot: { + style: { + size: 12, + fill: datum => datum.color, + stroke: '#fff', + lineWidth: 2 + } + }, + title: { + style: { + fill: '#333', + fontSize: 14, + fontWeight: 'bold' + } + }, + subTitle: { + style: { + fill: '#666', + fontSize: 12 + } + }, + line: { + style: { + stroke: '#c0c3c7', + lineWidth: 2 + } + } + } + ] +}; + +registerTimelineChart(); +const vchart = new VChart(spec, { dom: CONTAINER_ID }); +vchart.renderSync(); + +// Just for the convenience of console debugging, DO NOT COPY! +window['vchart'] = vchart; +``` + +## Related Tutorials + +[Extension Chart: Timeline Chart](/vchart/guide/tutorial_docs/Chart_Extensions/timeline) diff --git a/docs/assets/examples/en/extension-chart/timeline-with-icon.md b/docs/assets/examples/en/extension-chart/timeline-with-icon.md new file mode 100644 index 0000000000..9d5166a81c --- /dev/null +++ b/docs/assets/examples/en/extension-chart/timeline-with-icon.md @@ -0,0 +1,152 @@ +--- +category: examples +group: extension chart +title: Timeline Chart - With Icons +keywords: extension, timeline, icon +order: 2 +cover: /vchart/preview/timeline-icon_2.0.jpeg +option: extensionChart +--- + +# Timeline Chart - With Icons + +Timeline charts support adding icons to event nodes, making information display more intuitive and rich. Icons can be displayed symmetrically with titles relative to the timeline. + +## Key Configurations + +- `iconField` Specifies the icon field +- `icon.style` Configures icon style +- Icons are symmetric with titles relative to the timeline: when title is above, icon is below; when title is on left, icon is on right + +## Demo Code + +```javascript livedemo +/** --Please add the following code when using in business-- */ +// When using in business, please additionally depend on @visactor/vchart-extension, keeping the package version consistent with vchart +// import { registerTimelineChart } from '@visactor/vchart-extension'; +/** --Please add the above code when using in business-- */ + +/** --Please delete the following code when using in business-- */ +const { registerTimelineChart } = VChartExtension; +/** --Please delete the above code when using in business-- */ + +const spec = { + type: 'timeline', + direction: 'horizontal', + padding: { + left: 60, + right: 60, + top: 120, + bottom: 120 + }, + data: [ + { + id: 'timeline-data', + values: [ + { + id: '1', + year: '2021', + title: 'Product Launch', + detail: 'Released first generation product with market recognition', + icon: 'star', + time: 1, + color: '#4A90E2' + }, + { + id: '2', + year: '2022', + title: 'Tech Breakthrough', + detail: 'Achieved major breakthrough in core technology', + icon: 'triangleUp', + time: 2, + color: '#50C8C8' + }, + { + id: '3', + year: '2023', + title: 'Market Expansion', + detail: 'Business coverage extended to major cities nationwide', + icon: 'diamond', + time: 3, + color: '#F5A623' + }, + { + id: '4', + year: '2024', + title: 'Globalization', + detail: 'Entered international market, opening new chapter', + icon: 'cross', + time: 4, + color: '#9B59B6' + } + ] + } + ], + title: { + visible: true, + text: 'Corporate Development History - With Icons', + style: { + fontSize: 24, + fontWeight: 'bold', + fill: '#333' + } + }, + series: [ + { + type: 'event', + dataId: 'timeline-data', + timeField: 'time', + eventField: 'title', + subTitleField: 'detail', + iconField: 'icon', + labelPosition: 'top-bottom', + dot: { + style: { + size: 10, + fill: datum => datum.color, + stroke: '#fff', + lineWidth: 2 + } + }, + icon: { + visible: true, + style: { + size: 24, + fill: datum => datum.color + } + }, + title: { + style: { + fill: '#333', + fontSize: 14, + fontWeight: 'bold' + } + }, + subTitle: { + style: { + fill: '#666', + fontSize: 12, + lineHeight: 18 + } + }, + line: { + style: { + stroke: '#c0c3c7', + lineWidth: 2 + } + } + } + ] +}; + +registerTimelineChart(); +const vchart = new VChart(spec, { dom: CONTAINER_ID }); +vchart.renderSync(); + +// Just for the convenience of console debugging, DO NOT COPY! +window['vchart'] = vchart; +``` + +## Related Tutorials + +[Extension Chart: Timeline Chart](/vchart/guide/tutorial_docs/Chart_Extensions/timeline) diff --git a/docs/assets/examples/menu.json b/docs/assets/examples/menu.json index 3e719af8f5..3167ad7df5 100644 --- a/docs/assets/examples/menu.json +++ b/docs/assets/examples/menu.json @@ -2027,6 +2027,41 @@ "en": "extension-chart" }, "children": [ + { + "path": "timeline-basic", + "title": { + "zh": "基础时间轴图", + "en": "Basic Timeline Chart" + } + }, + { + "path": "timeline-with-icon", + "title": { + "zh": "带图标的时间轴图", + "en": "Timeline Chart with Icons" + } + }, + { + "path": "timeline-vertical", + "title": { + "zh": "垂直布局时间轴图", + "en": "Vertical Timeline Chart" + } + }, + { + "path": "timeline-group", + "title": { + "zh": "分组时间轴图", + "en": "Grouped Timeline Chart" + } + }, + { + "path": "timeline-arrow", + "title": { + "zh": "带箭头的时间轴图", + "en": "Timeline Chart with Arrows" + } + }, { "path": "sequence-scatter-link-classification", "title": { diff --git a/docs/assets/examples/zh/extension-chart/timeline-arrow.md b/docs/assets/examples/zh/extension-chart/timeline-arrow.md new file mode 100644 index 0000000000..30f8bba46a --- /dev/null +++ b/docs/assets/examples/zh/extension-chart/timeline-arrow.md @@ -0,0 +1,146 @@ +--- +category: examples +group: extension chart +title: 时间轴图-带箭头连接 +keywords: extension, timeline, arrow +order: 5 +cover: /vchart/preview/timeline-arrow_2.0.jpeg +option: extensionChart +--- + +# 时间轴图-带箭头连接 + +时间轴图支持在事件节点之间显示箭头，更直观地展示时间流向和事件之间的连贯性。 + +## 关键配置 + +- `arrow.visible: true` 启用箭头显示 +- `arrow.thickness` 设置箭头的粗细 +- `arrow.style` 配置箭头样式 + +## 代码演示 + +```javascript livedemo +/** --在业务中使用时请添加以下代码-- */ +// 在业务中使用时, 请额外依赖 @visactor/vchart-extension，包版本保持和vchart一致 +// import { registerTimelineChart } from '@visactor/vchart-extension'; +/** --在业务中使用时请添加以上代码-- */ + +/** --在业务中使用时请删除以下代码-- */ +const { registerTimelineChart } = VChartExtension; +/** --在业务中使用时请删除以上代码-- */ + +const spec = { + type: 'timeline', + direction: 'horizontal', + data: [ + { + id: 'timeline-data', + values: [ + { + id: '1', + title: '需求分析', + detail: '收集并分析用户需求', + time: 1, + color: '#4A90E2' + }, + { + id: '2', + title: '方案设计', + detail: '制定技术方案', + time: 2, + color: '#50C8C8' + }, + { + id: '3', + title: '开发实现', + detail: '编码开发功能', + time: 3, + color: '#F5A623' + }, + { + id: '4', + title: '测试验收', + detail: '质量保证与验收', + time: 4, + color: '#9B59B6' + }, + { + id: '5', + title: '上线发布', + detail: '正式发布上线', + time: 5, + color: '#2ECC71' + } + ] + } + ], + title: { + visible: true, + text: '项目开发流程', + subtext: '从需求到上线的完整流程', + style: { + fontSize: 24, + fontWeight: 'bold', + fill: '#333' + }, + subtextStyle: { + fontSize: 14, + fill: '#666' + } + }, + series: [ + { + type: 'event', + dataId: 'timeline-data', + timeField: 'time', + eventField: 'title', + subTitleField: 'detail', + labelPosition: 'top-bottom', + dot: { + style: { + size: 12, + fill: datum => datum.color, + stroke: '#fff', + lineWidth: 2 + } + }, + arrow: { + visible: true, + thickness: 16, + style: { + fill: datum => datum.color, + fillOpacity: 0.3 + } + }, + title: { + style: { + fill: '#333', + fontSize: 14, + fontWeight: 'bold' + } + }, + subTitle: { + style: { + fill: '#666', + fontSize: 12 + } + }, + line: { + visible: false + } + } + ] +}; + +registerTimelineChart(); +const vchart = new VChart(spec, { dom: CONTAINER_ID }); +vchart.renderSync(); + +// Just for the convenience of console debugging, DO NOT COPY! +window['vchart'] = vchart; +``` + +## 相关教程 + +[扩展图表：时间轴图](/vchart/guide/tutorial_docs/Chart_Extensions/timeline) diff --git a/docs/assets/examples/zh/extension-chart/timeline-basic.md b/docs/assets/examples/zh/extension-chart/timeline-basic.md new file mode 100644 index 0000000000..d223c4fa8c --- /dev/null +++ b/docs/assets/examples/zh/extension-chart/timeline-basic.md @@ -0,0 +1,141 @@ +--- +category: examples +group: extension chart +title: 时间轴图-基础 +keywords: extension, timeline +order: 1 +cover: /vchart/preview/timeline-basic_2.0.jpeg +option: extensionChart +--- + +# 时间轴图-基础 + +时间轴图用于展示事件按时间顺序发生的过程，适合用于项目里程碑、企业发展历程、产品迭代等场景。 + +## 关键配置 + +- `type: 'timeline'` 指定图表类型为时间轴图 +- `direction: 'horizontal' | 'vertical'` 指定时间轴的方向，水平或垂直 +- `timeField` 指定时间字段 +- `eventField` 指定事件名称字段 +- `subTitleField` 指定事件详情字段 + +## 代码演示 + +```javascript livedemo +/** --在业务中使用时请添加以下代码-- */ +// 在业务中使用时, 请额外依赖 @visactor/vchart-extension，包版本保持和vchart一致 +// import { registerTimelineChart } from '@visactor/vchart-extension'; +/** --在业务中使用时请添加以上代码-- */ + +/** --在业务中使用时请删除以下代码-- */ +const { registerTimelineChart } = VChartExtension; +/** --在业务中使用时请删除以上代码-- */ + +const spec = { + type: 'timeline', + direction: 'horizontal', + padding: { + left: 60, + right: 60, + top: 150, + bottom: 150 + }, + data: [ + { + id: 'timeline-data', + values: [ + { + id: '1', + year: '2021', + title: '产品发布', + detail: '发布第一代产品，获得市场认可', + time: 1, + color: '#4A90E2' + }, + { + id: '2', + year: '2022', + title: '技术突破', + detail: '核心技术获得重大突破', + time: 2, + color: '#50C8C8' + }, + { + id: '3', + year: '2023', + title: '市场扩展', + detail: '业务覆盖全国主要城市', + time: 3, + color: '#F5A623' + }, + { + id: '4', + year: '2024', + title: '国际化', + detail: '进军国际市场，开启新篇章', + time: 4, + color: '#9B59B6' + } + ] + } + ], + title: { + visible: true, + text: '企业发展历程', + style: { + fontSize: 24, + fontWeight: 'bold', + fill: '#333' + } + }, + series: [ + { + type: 'event', + dataId: 'timeline-data', + timeField: 'time', + eventField: 'title', + subTitleField: 'detail', + labelPosition: 'top-bottom', + dot: { + style: { + size: 12, + fill: datum => datum.color, + stroke: '#fff', + lineWidth: 2 + } + }, + title: { + style: { + fill: '#333', + fontSize: 14, + fontWeight: 'bold' + } + }, + subTitle: { + style: { + fill: '#666', + fontSize: 12 + } + }, + line: { + style: { + stroke: '#c0c3c7', + lineWidth: 2 + } + } + } + ] +}; + +registerTimelineChart(); +const vchart = new VChart(spec, { dom: CONTAINER_ID }); +vchart.renderSync(); + +// Just for the convenience of console debugging, DO NOT COPY! +window['vchart'] = vchart; +``` + +## 相关教程 + +[扩展图表：时间轴图](/vchart/guide/tutorial_docs/Chart_Extensions/timeline) diff --git a/docs/assets/examples/zh/extension-chart/timeline-group.md b/docs/assets/examples/zh/extension-chart/timeline-group.md new file mode 100644 index 0000000000..f848af0832 --- /dev/null +++ b/docs/assets/examples/zh/extension-chart/timeline-group.md @@ -0,0 +1,144 @@ +--- +category: examples +group: extension chart +title: 时间轴图-分组展示 +keywords: extension, timeline, group +order: 4 +cover: /vchart/preview/timeline-group_2.0.jpeg +option: extensionChart +--- + +# 时间轴图-分组展示 + +通过配置 seriesField，可以在同一个图表中展示多条时间轴，适合对比展示不同主题或类别的时间线。 + +## 关键配置 + +- `seriesField` 指定分组字段 +- 多条时间轴会并行显示，每条时间轴独立展示 + +## 代码演示 + +```javascript livedemo +/** --在业务中使用时请添加以下代码-- */ +// 在业务中使用时, 请额外依赖 @visactor/vchart-extension，包版本保持和vchart一致 +// import { registerTimelineChart } from '@visactor/vchart-extension'; +/** --在业务中使用时请添加以上代码-- */ + +/** --在业务中使用时请删除以下代码-- */ +const { registerTimelineChart } = VChartExtension; +/** --在业务中使用时请删除以上代码-- */ + +const spec = { + type: 'timeline', + direction: 'horizontal', + padding: { + left: 60, + right: 60, + top: 100, + bottom: 100 + }, + data: [ + { + id: 'timeline-data', + values: [ + { + category: '产品线A', + title: 'V1.0', + detail: '首次发布', + time: 1, + color: '#4A90E2' + }, + { + category: '产品线A', + title: 'V2.0', + detail: '功能增强', + time: 3, + color: '#4A90E2' + }, + { + category: '产品线A', + title: 'V3.0', + detail: '性能优化', + time: 5, + color: '#4A90E2' + }, + { + category: '产品线B', + title: 'Beta', + detail: '测试版本', + time: 2, + color: '#50C8C8' + }, + { + category: '产品线B', + title: 'V1.0', + detail: '正式发布', + time: 4, + color: '#50C8C8' + }, + { + category: '产品线B', + title: 'V2.0', + detail: '重大更新', + time: 6, + color: '#50C8C8' + } + ] + } + ], + title: { + visible: true, + text: '多产品线发展对比', + style: { + fontSize: 24, + fontWeight: 'bold', + fill: '#333' + } + }, + + timeField: 'time', + eventField: 'title', + subTitleField: 'detail', + seriesField: 'category', + labelPosition: 'top-bottom', + dot: { + style: { + size: 12, + fill: datum => datum.color, + stroke: '#fff', + lineWidth: 2 + } + }, + title: { + style: { + fill: '#333', + fontSize: 13, + fontWeight: 'bold' + } + }, + subTitle: { + style: { + fill: '#666', + fontSize: 11 + } + }, + line: { + style: { + stroke: datum => datum.color, + lineWidth: 2 + } + } +}; + +registerTimelineChart(); +const vchart = new VChart(spec, { dom: CONTAINER_ID }); +vchart.renderSync(); + +// Just for the convenience of console debugging, DO NOT COPY! +window['vchart'] = vchart; +``` + +## 相关教程 + +[扩展图表：时间轴图](/vchart/guide/tutorial_docs/Chart_Extensions/timeline) diff --git a/docs/assets/examples/zh/extension-chart/timeline-vertical.md b/docs/assets/examples/zh/extension-chart/timeline-vertical.md new file mode 100644 index 0000000000..6fa15521a2 --- /dev/null +++ b/docs/assets/examples/zh/extension-chart/timeline-vertical.md @@ -0,0 +1,134 @@ +--- +category: examples +group: extension chart +title: 时间轴图-垂直布局 +keywords: extension, timeline, vertical +order: 3 +cover: /vchart/preview/timeline-vertical_2.0.jpeg +option: extensionChart +--- + +# 时间轴图-垂直布局 + +时间轴图支持垂直布局，时间从上到下展开，适合在页面左右空间充足时使用。 + +## 关键配置 + +- `direction: 'vertical'` 指定为垂直布局 +- `labelPosition: 'left-right' | 'right-left'` 控制标签在左右侧的交替显示 + +## 代码演示 + +```javascript livedemo +/** --在业务中使用时请添加以下代码-- */ +// 在业务中使用时, 请额外依赖 @visactor/vchart-extension，包版本保持和vchart一致 +// import { registerTimelineChart } from '@visactor/vchart-extension'; +/** --在业务中使用时请添加以上代码-- */ + +/** --在业务中使用时请删除以下代码-- */ +const { registerTimelineChart } = VChartExtension; +/** --在业务中使用时请删除以上代码-- */ + +const spec = { + type: 'timeline', + direction: 'vertical', + data: [ + { + id: 'timeline-data', + values: [ + { + id: '1', + year: '2021 Q1', + title: 'V1.0 发布', + detail: '首个正式版本上线', + time: 1, + color: '#4A90E2' + }, + { + id: '2', + year: '2021 Q3', + title: 'V2.0 升级', + detail: '性能优化50%', + time: 2, + color: '#50C8C8' + }, + { + id: '3', + year: '2022 Q1', + title: 'V3.0 重构', + detail: '架构全面升级', + time: 3, + color: '#F5A623' + }, + { + id: '4', + year: '2022 Q3', + title: 'V4.0 国际化', + detail: '支持多语言', + time: 4, + color: '#9B59B6' + }, + { + id: '5', + year: '2023 Q1', + title: 'V5.0 智能化', + detail: '引入AI能力', + time: 5, + color: '#E74C3C' + } + ] + } + ], + title: { + visible: true, + text: '产品版本迭代历程', + style: { + fontSize: 24, + fontWeight: 'bold', + fill: '#333' + } + }, + timeField: 'time', + eventField: 'title', + subTitleField: 'detail', + labelPosition: 'left-right', + dot: { + style: { + size: 12, + fill: datum => datum.color, + stroke: '#fff', + lineWidth: 2 + } + }, + title: { + style: { + fill: '#333', + fontSize: 14, + fontWeight: 'bold' + } + }, + subTitle: { + style: { + fill: '#666', + fontSize: 12 + } + }, + line: { + style: { + stroke: '#c0c3c7', + lineWidth: 2 + } + } +}; + +registerTimelineChart(); +const vchart = new VChart(spec, { dom: CONTAINER_ID }); +vchart.renderSync(); + +// Just for the convenience of console debugging, DO NOT COPY! +window['vchart'] = vchart; +``` + +## 相关教程 + +[扩展图表：时间轴图](/vchart/guide/tutorial_docs/Chart_Extensions/timeline) diff --git a/docs/assets/examples/zh/extension-chart/timeline-with-icon.md b/docs/assets/examples/zh/extension-chart/timeline-with-icon.md new file mode 100644 index 0000000000..fa83d31b2a --- /dev/null +++ b/docs/assets/examples/zh/extension-chart/timeline-with-icon.md @@ -0,0 +1,146 @@ +--- +category: examples +group: extension chart +title: 时间轴图-带图标 +keywords: extension, timeline, icon +order: 2 +cover: /vchart/preview/timeline-icon_2.0.jpeg +option: extensionChart +--- + +# 时间轴图-带图标 + +时间轴图支持在事件节点上添加图标，使信息展示更加直观和丰富。图标可以与标题关于时间轴对称显示。 + +## 关键配置 + +- `iconField` 指定图标字段 +- `icon.style` 配置图标样式 +- 图标与标题关于时间轴对称：当标题在上方时，图标在下方；当标题在左侧时，图标在右侧 + +## 代码演示 + +```javascript livedemo +/** --在业务中使用时请添加以下代码-- */ +// 在业务中使用时, 请额外依赖 @visactor/vchart-extension，包版本保持和vchart一致 +// import { registerTimelineChart } from '@visactor/vchart-extension'; +/** --在业务中使用时请添加以上代码-- */ + +/** --在业务中使用时请删除以下代码-- */ +const { registerTimelineChart } = VChartExtension; +/** --在业务中使用时请删除以上代码-- */ + +const spec = { + type: 'timeline', + direction: 'horizontal', + data: [ + { + id: 'timeline-data', + values: [ + { + id: '1', + year: '2021', + title: '产品发布', + detail: '发布第一代产品，获得市场认可', + icon: 'star', + time: 1, + color: '#4A90E2' + }, + { + id: '2', + year: '2022', + title: '技术突破', + detail: '核心技术获得重大突破', + icon: 'triangleUp', + time: 2, + color: '#50C8C8' + }, + { + id: '3', + year: '2023', + title: '市场扩展', + detail: '业务覆盖全国主要城市', + icon: 'diamond', + time: 3, + color: '#F5A623' + }, + { + id: '4', + year: '2024', + title: '国际化', + detail: '进军国际市场，开启新篇章', + icon: 'cross', + time: 4, + color: '#9B59B6' + } + ] + } + ], + title: { + visible: true, + text: '企业发展历程 - 带图标', + style: { + fontSize: 24, + fontWeight: 'bold', + fill: '#333' + } + }, + series: [ + { + type: 'event', + dataId: 'timeline-data', + timeField: 'time', + eventField: 'title', + subTitleField: 'detail', + iconField: 'icon', + labelPosition: 'top-bottom', + dot: { + style: { + size: 10, + fill: datum => datum.color, + stroke: '#fff', + lineWidth: 2 + } + }, + icon: { + visible: true, + style: { + size: 24, + fill: datum => datum.color + } + }, + title: { + style: { + fill: '#333', + fontSize: 14, + fontWeight: 'bold' + } + }, + subTitle: { + style: { + fill: '#666', + fontSize: 12, + lineHeight: 18 + } + }, + line: { + style: { + stroke: '#c0c3c7', + lineWidth: 2 + } + } + } + ] +}; + +registerTimelineChart(); +const vchart = new VChart(spec, { dom: CONTAINER_ID }); +vchart.renderSync(); + +// Just for the convenience of console debugging, DO NOT COPY! +window['vchart'] = vchart; +``` + +## 相关教程 + +[扩展图表：时间轴图](/vchart/guide/tutorial_docs/Chart_Extensions/timeline) diff --git a/docs/assets/guide/en/tutorial_docs/Chart_Extensions/timeline.md b/docs/assets/guide/en/tutorial_docs/Chart_Extensions/timeline.md new file mode 100644 index 0000000000..4c64beec6d --- /dev/null +++ b/docs/assets/guide/en/tutorial_docs/Chart_Extensions/timeline.md @@ -0,0 +1,279 @@ +# Extension Chart: Timeline Chart + +Timeline Chart is a visualization chart used to display events in chronological order, particularly suitable for showing project progress, corporate development history, product iteration processes, and similar scenarios. + +VChart provides a timeline chart extension component that supports both horizontal and vertical layout modes, with flexible configuration of event node styles, label positions, icons, and other elements. + +![img](https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/timeline/timeline-basic.png) + +## How to Use Extension Charts + +Timeline charts need to be manually registered before use. The registration and usage methods are as follows: + +```js +import VChart from '@visactor/vchart'; +import { registerTimelineChart } from '@visactor/vchart-extension'; + +const spec = { + type: 'timeline' + // your spec +}; +registerTimelineChart(); + +const vchart = new VChart(spec, { dom: 'chart' }); +vchart.renderSync(); +``` + +If using CDN import, the registration method is as follows: + +```html + + + +``` + +## Related Configuration Items + +### Timeline Chart Configuration + +```ts +export interface ITimelineChartSpec extends ICartesianChartSpec { + type: 'timeline'; + /** + * Timeline direction + * - 'horizontal': Horizontal direction, time flows from left to right + * - 'vertical': Vertical direction, time flows from top to bottom + */ + direction?: 'horizontal' | 'vertical'; + /** + * Series configuration + */ + series?: IEventSeriesSpec[]; +} +``` + +### Event Series Configuration + +```ts +export interface IEventSeriesSpec extends ICartesianSeriesSpec { + type: 'event'; + /** + * Time field, used to specify the position of events on the timeline + */ + timeField?: string; + /** + * Event name field + */ + eventField?: string; + /** + * Event detail field (subtitle) + */ + subTitleField?: string; + /** + * Icon field, used to display icons or images + */ + iconField?: string; + /** + * Series field, used for grouped display + */ + seriesField?: string; + /** + * Position of title and subtitle + * - Horizontal layout: 'top' | 'bottom' | 'top-bottom' | 'bottom-top' + * - Vertical layout: 'left' | 'right' | 'left-right' | 'right-left' + */ + labelPosition?: LabelPosition; + /** + * Icon mark configuration + * offset: Icon offset distance relative to the dot, in pixels. Positive values offset outward, negative values offset inward + */ + icon?: IMarkSpec & { offset?: number }; + /** + * Event title mark configuration + * subTitleGap: Gap between title and subtitle, in pixels + * offset: Title offset distance relative to the dot, in pixels. Positive values offset outward, negative values offset inward + */ + title?: IMarkSpec & { subTitleGap?: number; offset?: number }; + /** + * Event subtitle mark configuration + */ + subTitle?: IMarkSpec; + /** + * Event line mark configuration + */ + line?: IMarkSpec; + /** + * Arrow mark configuration + * thickness: Arrow thickness, in pixels + */ + arrow?: IMarkSpec & { thickness?: number }; +} +``` + +## Timeline Chart Examples + +- [Basic Timeline Chart](/vchart/demo/extension-chart/timeline-basic) +- [Timeline Chart with Icons](/vchart/demo/extension-chart/timeline-with-icon) + +## Configuration Details + +### Layout Direction + +Timeline charts support two layout directions: + +- **Horizontal Layout** (`direction: 'horizontal'`): Time flows from left to right, suitable for displaying horizontal timeline processes +- **Vertical Layout** (`direction: 'vertical'`): Time flows from top to bottom, suitable for displaying vertical development histories + +### Data Field Configuration + +Timeline charts require the following data field configurations: + +- `timeField`: Time field, used to determine the position of events on the timeline +- `eventField`: Event name field, displayed as the title +- `subTitleField`: Event detail field, displayed as subtitle (optional) +- `iconField`: Icon field, used to display icons or images (optional) +- `seriesField`: Series field, used for grouped display of multiple timelines (optional) + +### Label Position Configuration + +The `labelPosition` controls the display position of titles and subtitles: + +**For Horizontal Layout:** + +- `top`: Title always above the timeline +- `bottom`: Title always below the timeline +- `top-bottom`: Titles alternate between top and bottom (first on top, second on bottom) +- `bottom-top`: Titles alternate between bottom and top (first on bottom, second on top) + +**For Vertical Layout:** + +- `left`: Title always on the left of the timeline +- `right`: Title always on the right of the timeline +- `left-right`: Titles alternate between left and right (first on left, second on right) +- `right-left`: Titles alternate between right and left (first on right, second on left) + +### Icon Feature + +Timeline charts support adding icons to event nodes. Icons are displayed symmetrically with titles relative to the timeline: + +- Horizontal layout: When title is above, icon is below; when title is below, icon is above +- Vertical layout: When title is on the left, icon is on the right; when title is on the right, icon is on the left + +Icons can use VChart's built-in symbol shapes (such as 'star', 'diamond', 'triangleUp', etc.) or image URLs. + +### Style Configuration + +#### Dot Mark Style + +Configure dot mark style for event nodes via `dot`: + +```js +dot: { + style: { + size: 12, + fill: '#4A90E2', + stroke: '#fff', + lineWidth: 2 + } +} +``` + +#### Icon Style + +Configure icon style via `icon`: + +```js +icon: { + style: { + size: 24, + fill: '#4A90E2', + shape: 'star' // or image URL + } +} +``` + +#### Title Style + +Configure title and subtitle styles separately via `title` and `subTitle`: + +```js +title: { + style: { + fontSize: 14, + fontWeight: 'bold', + fill: '#333' + } +}, +subTitle: { + style: { + fontSize: 12, + fill: '#666', + lineHeight: 18 + } +} +``` + +#### Timeline Line Style + +Configure timeline line style via `line`: + +```js +line: { + style: { + stroke: '#c0c3c7', + lineWidth: 2 + } +} +``` + +#### Arrow Style + +Configure connecting arrow style via `arrow`: + +```js +arrow: { + visible: true, + thickness: 16, + style: { + fill: '#4A90E2' + } +} +``` + +### Grouped Display + +By configuring `seriesField`, you can implement grouped display of multiple timelines, suitable for comparing timelines of multiple themes or categories. + +### Interactive Features + +Timeline charts support the following interactive features: + +- **Tooltip**: When hovering over dot marks, icons, or arrows, detailed event information is displayed +- **Click Events**: You can listen to click events on dot marks to implement custom interactions + +## Application Scenarios + +Timeline charts are suitable for the following scenarios: + +1. **Project Management**: Display project milestones and key nodes +2. **Corporate Development**: Show company development history and important events +3. **Product Iteration**: Display product version update history +4. **Historical Events**: Show chronological order of historical events +5. **Resume**: Display work experience and educational background + +## Notes + +1. Time fields should be numeric or date types to ensure correct sorting +2. When using `seriesField` for grouping, reasonably control the number of groups to avoid overcrowded charts +3. Label position selection should consider content length and chart space to avoid text overlap +4. Icon size should coordinate with the overall layout, not too large or too small diff --git a/docs/assets/guide/menu.json b/docs/assets/guide/menu.json index 1a0727f952..3fe4488545 100644 --- a/docs/assets/guide/menu.json +++ b/docs/assets/guide/menu.json @@ -954,6 +954,13 @@ "zh": "蜡烛图", "en": "Candlestick" } + }, + { + "path": "timeline", + "title": { + "zh": "时间线图组件", + "en": "Timeline" + } } ] } diff --git a/docs/assets/guide/zh/tutorial_docs/Chart_Extensions/timeline.md b/docs/assets/guide/zh/tutorial_docs/Chart_Extensions/timeline.md new file mode 100644 index 0000000000..6cee61874b --- /dev/null +++ b/docs/assets/guide/zh/tutorial_docs/Chart_Extensions/timeline.md @@ -0,0 +1,279 @@ +# 扩展图表：时间轴图 + +时间轴图（Timeline Chart）是一种用于按时间顺序展示事件的可视化图表，特别适合展示项目进度、企业发展历程、产品迭代过程等场景。 + +VChart 提供了时间轴图扩展组件，支持水平和垂直两种布局方式，可以灵活配置事件节点的样式、标签位置和图标等元素。 + +![img](https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/vchart/preview/timeline/timeline-basic.png) + +## 如何使用扩展图表 + +时间轴图需要手动注册后才能使用，注册和使用方式如下： + +```js +import VChart from '@visactor/vchart'; +import { registerTimelineChart } from '@visactor/vchart-extension'; + +const spec = { + type: 'timeline' + // your spec +}; +registerTimelineChart(); + +const vchart = new VChart(spec, { dom: 'chart' }); +vchart.renderSync(); +``` + +如果是通过 cdn 引入的方式，注册方式如下： + +```html + + + +``` + +## 相关配置项 + +### 时间轴图配置 + +```ts +export interface ITimelineChartSpec extends ICartesianChartSpec { + type: 'timeline'; + /** + * 时间轴方向 + * - 'horizontal': 水平方向，时间从左到右 + * - 'vertical': 垂直方向，时间从上到下 + */ + direction?: 'horizontal' | 'vertical'; + /** + * 系列配置 + */ + series?: IEventSeriesSpec[]; +} +``` + +### 事件系列配置 + +```ts +export interface IEventSeriesSpec extends ICartesianSeriesSpec { + type: 'event'; + /** + * 时间字段，用于指定事件在时间轴上的位置 + */ + timeField?: string; + /** + * 事件名称字段 + */ + eventField?: string; + /** + * 事件详情字段（副标题） + */ + subTitleField?: string; + /** + * 图标字段，用于显示图标或图片 + */ + iconField?: string; + /** + * 系列字段，用于分组显示 + */ + seriesField?: string; + /** + * 标题和副标题的位置 + * - 水平布局: 'top' | 'bottom' | 'top-bottom' | 'bottom-top' + * - 垂直布局: 'left' | 'right' | 'left-right' | 'right-left' + */ + labelPosition?: LabelPosition; + /** + * 图标图元配置 + * offset: 图标相对于点的偏移距离，单位像素，正值向外偏移，负值向内偏移 + */ + icon?: IMarkSpec & { offset?: number }; + /** + * 事件标题图元配置 + * subTitleGap: 标题与副标题的间距，单位像素 + * offset: 标题相对于点的偏移距离，单位像素，正值向外偏移，负值向内偏移 + */ + title?: IMarkSpec & { subTitleGap?: number; offset?: number }; + /** + * 事件副标题图元配置 + */ + subTitle?: IMarkSpec; + /** + * 事件线图元配置 + */ + line?: IMarkSpec; + /** + * 箭头图元配置 + * thickness: 箭头的厚度，单位像素 + */ + arrow?: IMarkSpec & { thickness?: number }; +} +``` + +## 时间轴图示例 + +- [基础时间轴图](/vchart/demo/extension-chart/timeline-basic) +- [带图标的时间轴图](/vchart/demo/extension-chart/timeline-with-icon) + +## 配置详解 + +### 布局方向 + +时间轴图支持两种布局方向： + +- **水平布局** (`direction: 'horizontal'`): 时间从左到右展开，适合展示横向的时间进程 +- **垂直布局** (`direction: 'vertical'`): 时间从上到下展开，适合展示纵向的发展历程 + +### 数据字段配置 + +时间轴图需要配置以下数据字段： + +- `timeField`: 时间字段，用于确定事件在时间轴上的位置 +- `eventField`: 事件名称字段，显示为标题 +- `subTitleField`: 事件详情字段，显示为副标题（可选） +- `iconField`: 图标字段，用于显示图标或图片（可选） +- `seriesField`: 系列字段，用于分组展示多条时间轴（可选） + +### 标签位置配置 + +通过 `labelPosition` 可以控制标题和副标题的显示位置： + +**水平布局时：** + +- `top`: 标题始终在时间轴上方 +- `bottom`: 标题始终在时间轴下方 +- `top-bottom`: 标题交替显示在上方和下方（第一个在上，第二个在下） +- `bottom-top`: 标题交替显示在下方和上方（第一个在下，第二个在上） + +**垂直布局时：** + +- `left`: 标题始终在时间轴左侧 +- `right`: 标题始终在时间轴右侧 +- `left-right`: 标题交替显示在左侧和右侧（第一个在左，第二个在右） +- `right-left`: 标题交替显示在右侧和左侧（第一个在右，第二个在左） + +### 图标功能 + +时间轴图支持在事件节点上添加图标，图标会与标题关于时间轴对称显示： + +- 水平布局：当标题在上方时，图标在下方；当标题在下方时，图标在上方 +- 垂直布局：当标题在左侧时，图标在右侧；当标题在右侧时，图标在左侧 + +图标可以使用 VChart 内置的 symbol 形状（如 'star'、'diamond'、'triangleUp' 等）或图片 URL。 + +### 样式配置 + +#### 点标记样式 + +通过 `dot` 配置事件节点的点标记样式： + +```js +dot: { + style: { + size: 12, + fill: '#4A90E2', + stroke: '#fff', + lineWidth: 2 + } +} +``` + +#### 图标样式 + +通过 `icon` 配置图标的样式： + +```js +icon: { + style: { + size: 24, + fill: '#4A90E2', + shape: 'star' // 或图片 URL + } +} +``` + +#### 标题样式 + +通过 `title` 和 `subTitle` 分别配置标题和副标题的样式： + +```js +title: { + style: { + fontSize: 14, + fontWeight: 'bold', + fill: '#333' + } +}, +subTitle: { + style: { + fontSize: 12, + fill: '#666', + lineHeight: 18 + } +} +``` + +#### 时间轴线样式 + +通过 `line` 配置时间轴线的样式： + +```js +line: { + style: { + stroke: '#c0c3c7', + lineWidth: 2 + } +} +``` + +#### 箭头样式 + +通过 `arrow` 配置连接箭头的样式： + +```js +arrow: { + visible: true, + thickness: 16, + style: { + fill: '#4A90E2' + } +} +``` + +### 分组展示 + +通过配置 `seriesField`，可以实现多条时间轴的分组展示，适合对比展示多个主题或类别的时间线。 + +### 交互功能 + +时间轴图支持以下交互功能： + +- **Tooltip**: 鼠标悬停在点标记、图标或箭头上时，会显示事件的详细信息 +- **点击事件**: 可以监听点标记的点击事件，实现自定义交互 + +## 应用场景 + +时间轴图适用于以下场景： + +1. **项目管理**: 展示项目的里程碑和关键节点 +2. **企业发展**: 展示公司的发展历程和重要事件 +3. **产品迭代**: 展示产品版本的更新历史 +4. **历史事件**: 展示历史事件的时间顺序 +5. **个人简历**: 展示工作经历和教育背景 + +## 注意事项 + +1. 时间字段应该是数值或日期类型，以确保正确的排序 +2. 当使用 `seriesField` 分组时，建议合理控制分组数量，避免图表过于拥挤 +3. 标签位置的选择应该考虑内容长度和图表空间，避免文本重叠 +4. 图标大小应该与整体布局协调，不宜过大或过小 diff --git a/docs/public/vchart/preview/timeline-arrow_2.0.jpeg b/docs/public/vchart/preview/timeline-arrow_2.0.jpeg new file mode 100644 index 0000000000000000000000000000000000000000..ff56e5c2253bb45625e4de8ce3059a048d1f7048 GIT binary patch literal 56470 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±u*t6le z_XkQx3>QotpZn9D@;~v|Bgq38)4X{tq=i;p9i)R6$c095dWg_30fC*+h_+{Rdm-x82~5u+-trsjMF8Xi-!=0D^f ziHIf2t?k{&mOXHp5c@VWUMnM#CA3y;+iAU}FB`cmi2B(24in}PxP13dcSJ*7`b%pi zdf^ewmO<^uyl#PBjs*{)hKlT6{4FzQ3PHuev`_uR_F}Z=g3IAZ1;s3#qxaT8Hs@eF zbg;|ch-Ncn6VFe(?;zKyx4iF(yEhstq1$00LdoK;vHYyq+j9NEv$>ZFtQx$Yui(|g zGie%22`=m4MgacY9^>Byc8uNP%s;AgxwVO2Lf0!Rt=aokBILx&*9+Um*cz;7xa!tD3ik28Frx@*&l_sT#mLrRa0r+w!-XN4f5qeT#bv8cRJ?|zdsy* zX%jds%V_@cT)_^2fpal|f|9zf>-=4jAJ66AEA4*&;r?5ZxB2qKO0Or0sfQIQxR)yj zwaVuFBJc41kZ$E`ii~fPNs;jE?!F}FXu1>d@opp*|&Db2XdYwLw3aHkgJyB<^F{zy8JmF`~q1 z6;irrB*c^SmeZKY!gM+y^cxFFST#jWBJwzR1E$B*rgE3eNQ~(wpji3cR2_B{EPdVA z;eI%1A^OIZPeX|>o8#W1E@lt~b?A%TMTzj8PWP^tcy)|h3F>fobsasxoyCn;c~8qRGcFkNzq z$w3S@m+0Bqj8a9cJz_+JePtVs_~3Dj7%>ek=tEeu$M_BW#ukhPb0M2@5Gstg8?RFZ za|kzATV{!iO>%x{@ge61LrDkUQ~vKUJ`XS1lPSU$y5M9co-*Jr1$*5Nx?kz_dXZ!q zd=m1tl|pdUvwSXU;Y&Sdqxn5-$4zpkiI2z+aMOgey1nhYg-uqq zQ?4!MlNxqDkK*a|{5YM@>1bIP3XN(pU)zLAfGpAmGQ; z25sJ899tY#ZWqX^knWN^di#(H=ldxkz`FLR+Vk#Q>2{BXWu+{ItEs(C1{ZDwUQkMj zlH{etdb^V5VPX_+|PPC+{hW$DOsM4fN+oJ*aF26`_9WQOpW2qt;?7 z=@b^V3%l*o=h+mw(Y4k}>8UW|Pw4tdqjy=dUeE4c0`R8Wa~ z^%K_~h6*9Eu_G#!0^8ltufBk>AZn$8(2CC1g8zQqne!aSMA`_D{caE51iqUW6?o`p z*>G&Nl|cF5+;@&^$HaADgV8zyN>EK@nD7GA4Y}P7f2n1g+Zb~HZp!^kuZBai6AKBX z+e=}~4nlvjArNlj&>0va-bSWlnCZiI(IFyV@PXUDFN&FVp*bcxn^8S|@ckEhF^$8Dr24bWv5Q~S_>EKF zy~$I4X3#<%YZC@zLAUU z!Hygm1NVW~B_CN_JK29w#GP}@HEvC^?0TscezyS_@ms7~7$9)%H9g1}6LXWi{N=Te zzJ!3566383bwZ)#fWDm;tesZeajy2yXpYkaWyWiQ!k#>Guzc*3bg;dN<(`9wCOtyO z3TYKOJdW^+5IaO>fZHzC*$xQ^yebXp@$YV(L=G*dF}Y_gzV1(oZrd=M3q_N&~QvKuIa1Sy~pA z(s*AdRa*Nf&q(a|>Sp31;6_b`b60Oi^uC79!2msB$IG>|el|+^dyfj!Dq$E}7^EAGCvN;G}S=5XRf!&2BlVC6XPC-Si@qP&o~>G#tuG>c&&Qs26R zb~-X`gn2X-&ANxpU*c@;J-PdGUS3i7?FXKBe#A13=&x!L7|kB2C^%)9s@M0LE}Qgl z?XII4FBw01b_6k=6_!+f??dmQOiR@^Rwu|+cMx2`MD6>5+3)JFsWSSit^aJvM$tJX zsPIZ2$f^h8S|sG)3}Wl;=)bU32vSxry}iD#^IcxgCh+#CeUA|J2`Or|dXHmM7Na3^ zM$dfoA7$~W)Mr0C=>8;#Wa5;EAG~20{_%Z=lAy?y;dA*j((&$BrJkm|c*GRK*|JCA zHq48pPLLrx^#OBTafG)-Vb)AHd&2uEHqqq}sf<2v{Wf*&=?9ut zX6aoaBUM>@cgH|HU`zzm&*-YYet)=dc!<25v3&X4zLFC88y5&&FTbuDh#$PPAp&`r zy9}52H!LV<8x#+ppS(NgKs^-X_x)^q10CdEs#&5?f#f+GzxnTU5QirE+hnzng z1mbx$+`;XrAOP|b)|QZPj*8tu%x4<)3)$7&^?8bKG@6&=!n{Gho!AEdCjFZEl{tl!!upw>_Xm>WAp4A;);Dy8YB?`{+qi8kmiD=YIjpPLQX zMMi6_*S!m=$+_HJ|EczD0|R-3!MSK)L}Yn^K~l>OUThiC_eH)a;47zVatIq0Nw=Tv za>M0R4+#lM@x|7goU3(>UAs8mMu-5cdSOsmrlQ8Y(pl}27u6kKIfHzJ`$ZVxb`=1m z5x8y=VN)Dvw+VEL@}CSHl5fArVBPR|YLq$9#X$V63B40>U1MVwd)ClJuJYHXg*$sa>W=MOD*cZhZLc zcc`V*t+4xMP?ce{oP?`hAzvAJ@x8Q$_XdRg?w*{@MECy<8|&cS3Pn{Hf1X%e41(00 zV}Z1)uJKQ=nCVDG2_0&-RJcfY@cJ1?!(wrl=4J*>vnBBn+vE1xUn6F9d%cK15?DvE zt$!<1n@fgWO?keNVtDYfo{kFP*ONk@4ze>JXA6N-gPD3vdf&J>{En4{m14+j_oPE8 zFGDH6U>bAOwb3zIqO8>^pO}kD#!+nv$N8^C@+3O#|NNb>nW&?^h&-N1G@&?IuhI0% zu|&e4#wBZUa0@3v&JPbv#VKRPx(e^Sq?kWgbvodLxpuwt%Dpch0{n@GbUG`F+lmUk z+}2b3R8G8U^dr`b`78;z(#SIIeOH!}=laB~oZMA0sh7RFN?FocSIt(c>ZwyAq5?MbIjXW zTQVdgv-3@9#!KhVCOV&$aY!)YcRITgEX!2d`oYq?Fy>^4?z4TqQ%?`?J95rSgurI$ zVUzi6G;ndGZQoPZ?t7FzwQ6=xyBpsdh1*uK3@6f$Qv!O=ylyO;7r!R27(K06Yg%ei z2h{TrWRIH_bdT|L8O7KTy}2wHaOy$}puZzujPDhvXMizKTG}r1Tzlk!dSrBF^;Ob` z92d_`>Yss~tT76><8i2`J0@GLc8_h%k7tJ>y14Df9SZWnx3rv%p)j>F>KkV#xyoH1 ziFd1&c*;w@JN5jvVRiaEOvIyeCOt;k#Li!p$uuNCatg*D3I56yW#Aw{!8&o8T+qpM zuHU}ZbovNy;OeOsPd(ekQ?TiD5Ts%Trw*!@dabi+H&!m*9uwg+y{$68*4d=mp90uL zpNU#MC#3tJl)IR6BOt`q;Iw;huj2Qn^WD3jADFT5@G7 z*5i!0Ycmm}O1Aua3+cY@(`BlBhCd|lanw$ej_rR_yD$-VxRKOT^Q61{$Cr!eKkj|g zeW8x_QBc<%HzWE(wIl09f=Ar6(i3$r(~8}{Y^srUGUM~U{a>tVuTkd~u?ZIi?l`qL z#bFtrQD3~o^~y|}F-*SZbCaH48d${{Tvur-57xhYM&+RAmnzHb7*iw8p%c!U^^mnO zpwV)JS?{8Eje27ZtLXQPvAy#J(#gZpULLfn+8-5Xr3;Sq#Av=MzR==qWED^Lq^Ct+ z^!vkaITjSFK4rQ}9J>Q{iCsJMva)NTj!h&35$IzQQ}m?Vd~xVm$!=aViI?}H4qpt> zAkmDYaPy8;hf%vP8kOepEWX>VaVfWJCdp(XG}c`#fwGZy{LRPn_q9TrTmw0uaPoa?Q{|u%Ks`^yNGbu_lKGS)RO|uLmbI6B<%Z=y2U8zH@dd zMAnvdB2Fzwm5niF{3E4=$!an&<8n~Gz2@iB-u_?VhrC}kiozta)UIca^WJ={qca|P zMpQZE!jpPem{5?Q!kJ`iVqT!^lKAe>)b6ecaaj1xy+cZ)c^9?i$F09I1~@gD>YHDl z*d58j^3aZhxyHYErh&{YzudZ%enoa-Sp&+_eK6hhHM0Uz8kM?q8IXhC4Y`jV&a|$rLrMQ+RIz zgt>BZqLQ>X2N|KUGi$@F_3a)GkwO!;uQSx>R4oXn7GVcpsf!kj_KdPrN70L(H*?G} z-E*EN_wj^~d&todf|i_?rX;rk*ZWGI-AbII+S#0b`NzpdLaVe0qFCH!dz)_c@svd` zQi^^J+XPM-Je4D9h?si$CQga@DJ5rB_ssZP`zLD77U_CwDe`xCy1rblHW7X+z-nj6 zFn#khv~Km>$5s2ar9DQI+KU0R-SVQ-VZ0KtOHe=RIURyKDTBR25*Cylyi011WQwZq z(%7Et{P1k`zA7ZmFs*wmPWXpZT6Dg2-1}Ga68?Sq3@i5%s8SK(D<()r$EaJvCM6Fr zlqRgALu_|KzynQyO3o??GNYDg2#~)9^jBU#Lj=pX%pSXpgASun@iSsGh@ake`zeSg zD=D__?|NQ15Ebhsd+h7+jj&K?OzYH@>Hdpz8qk|m`G@itUh?D+%*nES=Z@M%wj8*z zlWYA;_+tFz5M*wov)~znmzptuOz2ZiMgW| z^=87yZnXViwBEUU<2_7fys58gOeuk@d1~sL`JvoB)p6$8_gEb4?(=p2c#{%1mm0+= z&Gxj!Tcb6XMg}gO0XRy=5?TY_S%;MbDYaho4zbf-OMP_x&{LYuk;|EB{lelyR!<%L>)0&(Dy|Cn1H-5VoGC=oEP+vI)?dM0Aj`-zX}x67;Vv?VK0AHQSUe z$dG7qf|}km&{;z7$|*u3OKx?ti2g?j)=8eS0gw0-BF4?G1u-O$UAyGo+u1PcE&CR^ zxeW3JapZe?2%EvYa*y8C2C@3V2XONO&6!C6AO$249iYGJ!O<5*h1k*v5p!=%c`&)o z&u=ColxWMFiMV(gJ&UTSf(|ktLT&tknckm&GL7Qk6z!L9I+x}9HACJ#uwuKLq`m)3 z?*~u%H692&zesJBK>+^koy^)PZV&rAcP-q6*8@J<8ojj>t|usYr}S#VyHSwAHG%wz znJ&pUu9CK^sv)}7g4dw{!Mf~3kT@7UHKlZ3GD$lV(kuNskL@l606Xns;33>!Q$2d7 zD6jH)^f*0N-^)D7&kS9;69LlClAB3oeBp)s7mFl1EiIro4sxAkQkEcwMmAKkv{%W` zwCcVyYRUQB#vGt?%)?lBf?fLN+1leG|Pu0|YS!q>nSAPfcmFf1EmO1R61}}-ic)1FiZq;N< zct*dVd%o9TOf`FFs%Ks;-#M|AgtPw zlwT0X%k4Z`dT429UX5a{p>!1$FeOV@*hJNHvB|*lh-m4Zmt?wiBZS@I-66+Eq4$B7 z_%p(04lZ{?3Ho?BcmtnTT8S-o%kHug(JlGFRoPY~XTsT%Wt-u7jk4sJWU%+^1X4Ty zeJZfBXU{6k%Acfaa;6G;lL;p9jNJ!5BJ9Tl{d-KN&3`}wCoHVcqm zD5m;}zj+TPwZ&}z29{KR^NWr6XHdmc5bKc@3>00YL4t@6o$gbc!n}j~U(6N?$B+|>*?kB#t*H6@3!N^| z_Z8Q(#&0ps_WORLoJ=}ZVO7v0tM)28)>6hBx(Pr;E>Y#y=~OjK3Z#!aLk4cII8TrI zur9UGL28Y=8Xja->`YN1N?xtc&MbJvazlcz%|E4F-;YIcLQYn9Su1ONwL<4phZV~g zC;r=p$Ep`zU9w|H_Lw@-sKK}AYXg+i>r@)w1Hp z+O~_A&g|7yp%1087&Vq028*)ptF5y38<1Jy2FE`?Gum$aAjqrjv_7PFN^fA5F!@1KUf)G-F1H~^exeN^);WNV-|1c_1$d( z>!TPdsft!46$ai)Jh?{^dG-eBrv?7!O{E%Xv&qf$i!SwPIc|F8Pm7+1i?|G~5O9;} zSV;SLB$skxkBnug>ebJ^Q!lT^>TmeQxh!PLI&|eEQH3V=j_(|O18y&)FCIi}v)l}O zI3^DFcQZ^bx!Z8>THCd#g3itw*6BrW55~CL0RyYeQOtTZ-*z?*!Kn-S52Pl7`!JWP zAC6#VWG+~HnOZfG@pGpV64Wu#Hu7D0bfW{>3-Edr{LwOYPJ%m!3d zP%4^)qqro1t=UY@z{`j2U)LTu`kL#t6jm60v#_Z1W zcgBR->j>p=k$#tpvkKR(0=nkExicVk=?Rr7g#o1r)a=bg^cB#dZ@b4d2hGM0vn581U z_e-&oePSUXpptk1T zRevqxVW0d!!YAKS3PQNy(RP}6O)^?+gY|1J1Ce$QdqZXj^*AM)SmkZs_wjW{^JBZ! z(&Kpod?O@pQ505ve}nT#_)+MV4XKf^zQu$6X)_nL43CG|_>t@c<6f3~MuY47`cLPdV7qO7;d4}+ z%Fc0Bz@!yXL)wyJqgxe!>K(*YjL;oZ2mrv9J5Y^Kh@62Ax6JiV8j5~qi6DweAmA2L z-LS-jN=o~!8j-_=XR4`%-(4D^t~l&hGAhgL@1HDwE8gO|W%<>Tdj`ih-uO{}mSy6s zq_QfUQXU_z?&FA2@)|2qF&nwJgH>xZ&{AfvDx_#ofLM1~zxUGfk&mn4gN=0~H59!w zuw%@tv274H-a+VK%)uYd3t~l_6=APVPE>mdDrkn>eEki~`@}|<4dKT8=HK<`dQDbO zy`^1@yRx3J04bq*F8%1HDx_-}F8g$*!=LJ*K^A);X8}_|{&+(VVx*o#_#1>u{Lgg;Q#59)%q_NzYCi>2QB;2b z#2B|AfCxzt){D3v6P_S3WZUg75gnYkJMi`kM`f_6_GKJF5Jiw-GvZf~5#clHb|S$& zDd^%AYV2}0lG-gI1&YD-6%mFWJZEhkP8LUGz1G|HHBcZ-pjp%=Bn$RM{-D(pE#*ay zZaK3Ul8JqHPLKr$9e=ei-^EhLk@fhAW=JcdYyOaAIyvTg z%y`fo(p6mn37~8q66id1dEXmDx}|hZ7$J{9U=F0tG;iTrPH^ZGqW1FZ={lw~&JiV~ z2Lj5~)Y7NU@+j|B+QpDzektRSa)gIY0vVWGAcYCa7p&vpP!c?jdkTmeD1AW1>IC1> zQvpRt35_!dJp%Jy^%oxw71mNa+Xh3M509+FG|$kb9DTe`)6el>r<1R8I~R@al_W)% zg9ORz5a^McHSPB+f)77okl;4czVWyj2V`ty`U1-6$-$pfPzIV17mQ{jBm}aLm|H|4 z1EV2e27xED=h&a=M6-(i2S2yQ1O-S-fygp+MHCpOaNbz7*%1^}$!lQq(S!05?;AK- zDQ$XEsocg+KIjH~6PP0hf8Fs&+6OZ@FH0YD4R{!~0dHDgfp2gJW_C<&b8JI>aR%Hd z=Akj`{098nTkv*~jVHP*a@{rH&O6r=z*ihMfsNzf{gEFI!g*Ys9I2O27gDc)Tf;1U z-UODT;ab^iiBp5%PC!DD;cFCM?i7#TmgtxNbOK;$|Jh${VfqQ8S z%KdN9Y=9i2Sd07s_GtbIZ8*5u$tJ*7xe4r484s@vld6#LUE|h)flrM8F}DeeSCyE2d+GK_`AkZaOa)$ zMI+UlLyz{h4yia#FRCzfz5Oiqa*fEQ-bd+RvRzrrgMxjCxjGJt6BMQwTA-5xe^W>p zU3!u68(sP{@l)d_mQ^eJ6MDK4M>l~HurFlDcs1MVGiDCKumv-R3Lng{w6`Aqo9c@Y z2}XUB#*4~fXtn<7_&--1v+Wq%syJBtTG!a#zET!+Du1!Bcn}XT=EVw{F8H1ySW&BO zT}{DBaEldeYhMDHzq5i~Z!}uKn?UN72-T8lest%Mr-b#$YWLcfUrAQv1F#p8!Zr?u{!$ zd9`Q#2HvI}WnjsMXJ0U}sa*CH+J<4;^tKU>ke%JR&?Rwe8l;ugH5= zUKH7QXNTjX6c>smXpvkB&uiXYQ#;Qqg!K2TWn6h}Z~Zy>W_-dVtjM)JLq1k3kpHHw z<3X?EgiJKe_dg^raY?Ww4L&lPy2Whvq!9RFaNFqi9XZz+G^+VJrj9qfvL5e7y`zkyY} zu=HPq6ujUCH=chPQgAx6JzC+Z-Tw_P84b#y55v=StRDb_UaVo@WU|HGZ;iUP1Y?+~ z$JZ3R;s0cHc*cmGd92O+#-HNHOE`ZD28)(2(OJrtqrVA&{?#DmPiz`rF}GKGckSFi zg$po9!BhHeEp7XN4j;zx01*_59wLJN{D76#M92S4w@xqYp(net&?u|=0WSGutr6e7 z`JqpbOmH@y0++-P3&Du;46+XZ)k}s>PLcHj{NGm(i-yW*v}DLAoOHP7wN8ef06_DOkzxc zH-RTA!MwFjbG6s%3;xxx4J2IcQkl@Ij6y#V6!Y~Zsa~mbwv-|3$YZA>gazkx7T)Jw7&m|nkfQ#mqo=Y8J$x$ob-Jm>x0&#R=CG=BS*Vzp}d>{{FB z(|&rRrQ&)yvrMb9$XIxNL-{>v%l+!pWAE+YJk_+LJDK&f*BI(dms}$4IWWaUZujhW zbw>}SClrKMsLw5&&q^58TDN1&>ZKcttwf$~R=;lYn6*#6O~+dK+4gmRJQ$C`1q0D< z#Q*^TBwPqhq`n)ZP8=^1GbshZ_DjJhh+{yse*kFc7^I=ER((oO0jfG=WC{e4Un>V? zDLb1poFUGm1zgI$cQn{?YhSC@s|K*!5{^zT)QWxx8SH5gi27Z5>j*re9-axIqjp|? zd6uUfU<3$;gtrpl!ZkE>T*Mu4`}x>V!2uR|7~Cgkx|9A+MHpB~vacTdyadbqE^`D( zL?{8diIC3h-5;(EIKH&VaAd;M-{H_jNjC(GglmJCMtUHHFK!RSeDx5dPDFd*!U)N?os> zDMdd!wtB{SXNGT#TlXS@U4GhG%=$_S-;+mKXWdvrI+j<2s*Xq}dljEZvUCo+dhGDq zUe+l}!-^y#0T4>G?gzFXOB#p>0G}BO2`jG{CSCwzAQQub zFZclkNiQ&9LBhZQn^4=%!Os+nQ;+sevi?heHq~ zF9kj-s2Gi>oB+$ZidwFN&0hbRNn_Ta_yuhhqZ_!>GvS;x{Ast)i*s|BH)j7&H zebCa7@}^(UZhenADWxE8&&A6o*v!MkcuJWj?Vm~>6gIzkKF3g;h6FcW1>GRb^DLbS z{d|@yfc*1U(TyAQM9TaekEF_M?vPcA7xs&<)shtpmD=EFLB%06I6}fs4X0x&kKa)74wd$ybG3< z+{GJ_x4F{WKkX#(N+_7uT|2bz^_lrkTxV=rY@FzO?LlTjntJT%n(&;cCd1h~bgwN+ z<-R}q8Sl`WzR<%}(M2o5ejqu?OSbY^%vM{Wo2APE+iE$bX%wEcHrXb>YubtAV*Bc9 zk8S=HddV1>-Z zy~1u(BUBge&5_VGGq{aCNsU(I$oS!9skP2)wpF@mnTfoCasL)wmStVqxb+ork_+#8 zl$+#KH+FYys*+#m5qfDw{YiKExt^*?{4&Ar{DIc?Gw{JbJ$LfnIJM0SLhZ-s8rb$@ zru-8+W|pteKIU;#QASWi?@rG+)6taKW~`v|v@jq{xRiB^KR{ik#YNpmF-B zSHvop<)1LpUp-yQG9K z-kYW)Bt-A>xpK)_OllUNd~R@r>#j>({nO~2B?~M}_0(o&=}ZaKTXDD~#9vrtx^uz# z$iNh%-KiX9i7wIT;}@ROUYH~%ifq*HOK2$CXcl^X+D3n;Ws~R5cCiw5k&Z9QKA_BG z86X561K)4aw8W#S3MDjRd?Buu8GQFRbY~O1M+zmSP^3gmroSZ^PI3WcCD21aGN-6Z zkbBu70xBZ(DV%(bv-s~Ilqc{9WkI34e~_;MtIBs2!P|rgQ{+qXnrI^f-pyc0d*u^c zusuoVT$ga-wfZo(ECHD#VIQIt+O;Ki?QY!f(6_#>_Rzk2>+};_V)a%3?0fO@y6?DM zO!eEPg0qBfc=k$3nHe4He)A-#{+6y@m)Kh~M}eI$-spAy=_|W<`h?r+=W=t-uPmSA zK<|3QjD7dM+F1A_ZN#%YFBAXmrzbqtso3(Qre}4geM;+pWCLh!31hTtKG-z~i}=J; zdM7F0jX&g{#O&l~JvOI%H$IKyD;^Q~a$S1u7#%sGB!1Ply^Q;7FD+V1uX7x~Ikj(x zanX^dM#1{0975d6MhxbA1Z%%<;l9mOuR_;C( za6Uzy8@6wcXt?0=9g<9iQLMNqxMb%DdInGn)dTniWAV#am;|q?a((^mBkkVmD|hGS z>dxtNXEOtKnk`&n*Y#sygJ$1H+SWvliE?Si;@mB}^JtfJ+02Z-S62@<*p1>ik4|Mp zt`(veY<6vFrE3LDT5$Ht9_7x+XszDL3-Z0E8b>Z`iPvAEtan${+iSp5Je`^BY&SaH z<%1Nfk!7QKywE24VzRNz+VT-L83N`5>*7jo_60h5Z`}+QmlDr%!^>wLo5C@0(UrZm zDcx;;S01xkt~WVKazLr;$V9EG#LhqWb-eiXLQ$B|lctB0b>_W2R3qZG)mYTxT(*($ z{MuWp#vYx?h9)O{ncc}z5}^GUj?{qOCXV*LqJKb9fc(xsC?8^Ro8)7{XZ-tPK{*?% zXF#HNMA)A=iS^62I|cJ6^ZDNzh$1SY%0xErx%bN<`IU!8fM_T$3`M z#h3@l^gLhnqDe`*N8FMxaCPQI@W5pk1*52rd%-RXODYvdY?}YFz7MqD3s?jM=0K~*nGoRv&wi>UA)4%yxi;y_3Ve<5iZ@D zo_m(lv-8E;@-N@8wqIS{b4F|B(W>iBmG@Pxmgf!#>54vfq#tIfEQpCpa1paKoa(uz zZ=UIc-uL$tg*+FypJE@|;r{edPN#lrWaHzpGezhtT6fO7A^pybvHAU~X=>Hp>o2*Q zYCmwk)g0@qE$4SlMNw4zYHq>aY)f11+Mn&B#Sa`09f&G*=t<oX5Xt{tF3GhGUOtSFcSr8E02m|^x((efV4B31aT$iiZ0B?AzurNvpHolPHX`s$4;l8ilyR3 z7tWN=_n)^-^YEgBK@$v0nnh}^{*bP6qcON9Nc(70sFm&RRYvx2%V_-4eurw0?lV81 zcR+tiVV3{6ICXn=O}*6AxOg|%w;M4!OJv=e?|sSlPar!~}EEGP_bP0q{u{a~hc%1K`u|NiUD zqDcycH67|j8x3-*o97BVY`v{HB`%X+S5iU7tz=z{y+zHYi9X}n+=8ArgbHfd>K2@T zt>U}Ya_gaLOGJnVBgVuTk@Qp{GwYN-_*sN z@2QJbd$u9h$n%5&-AT;yiHA^Ed=CBKHa_p3v`y*mr}wWHi!yrK7OrR)J5O#bN2sMc zQPeOyTq^xcbKbmwrd8m^XqKMrsY%Mj;s!PWYHZB3RA@j#6%my%Tv3%S8B~cw6bQJ? zk9|y_5?cllsDbQG9Kz*5!H@Q-U{M|W7%I$htlb&Z2}>maSR8mgM@C#IE`pA2fMa4J zLq$Q(K|P3)ju-|B!HV=kiwM7n%NmJHGeI>M|(=1`ST+zaoks5=7+Ltv|Awda5Az+2!fSe*;RPsC>KlptVqLu8gwDkS6?^+rXYRF(Q*z3Q4b4Wq) O-GTmJ9f5`B}T1u1_0i{72K}jho zDFsCGu3fP4^_=g#@AuvN-21;D=Q(Tdy<)C8$M}tyV~jc7|Fr)FI3_PGCk;R_00091 z2kh4Z$8jM~u%@7p;{e8S2=q8)e+ak?;9_IrU}NFp;Nall;o=jL6A=;+5K@zpk&x5V zFf!27(9tomaI-O;;$)_yJ0rx-$-~Rf&(FvvA|ZTUoSTpTJggB29v&Vc0U;F;5!LyV zbSKaM+kgA@03+B>EC~D$K>k56pqNnJQbJuQqj8;YTYX=e77I?;NeqHQc=^KW@S6WewJTAP)Jxr z^zxOf(lWAg^6J+$G_|yE=olH_F)=kWziVq}@8IaTJ-9FPQl zZUORATs)*<1d145`0(%ez!@L~_5<|+VF!w9Q9pnb%yf)iv>RZL!cL*?`t35Z8Pp4q z&A{II+YA2B=>|IOkc5Jq0gzN9jW7Vo4L^io@!-pO71zqc4j^GL(;OOe+eTn5`t!T9}k@b>=y(Xm6QA^0J$gofxt z62M5VgM$6RSJFrnwfSMx1`jBvqJ2kD7|A5a8HgF`o`bKbcVeb@!59i2kPJotj^TB{ zTv&@(C^0%gLlGvh3XotL+Ibn{Kuq0jvn5x z1J&}EfJBEXs74T&hj->sO^_l)2BoI{x2@kL|4;P#9rtGrm2?*t4+RozAaX!*0_q6R zA~5nVxPa>?xRwXm1OG(otp9E3cjJhF@PV2@mjxJzL8c(sfKn4Mk%ut=v;@E79Ub&Y z(+Ot;(i|Y}M`|jhiU*rOGq!Ncfjs=)Be>-_6j7vdfXO^)hmcks+4&=u27SD6)E(F_ z*c(u)3TeF#p>lAmJlyCV4i$+~xP<@ri35AhA*qfi)I%i+SEGlz6ggPbS%~6+;)S<{ zVi(GW!#jzz18}tqKcKn}cVu8T11?tw_5|K11ZU86{Qq%XLPI-fOyEq0A>jbqC=CQh z!@pwSfD;E#Af85=BGl7pPA2LU8sFg@KyT^5kildG;jSLy9u60@1`i;Q>;lTcJv8wM z{-LA{F-SD_qT}ztGe-645Rm^}vK&Pg@}+Rh{RO!XrQ*Q+AD)8q1L+olmqFJQhG39b ze`XXM?1!!p8rKhHf&Zu)K{fX0ccQTmyy2jOpdI?n-u$k`;EaTc8#>wHtsTlY!od9z zgNMC2c<13MbfTbj5U#*bcOCjjq$q8D=*WXUH_Z7u(0HWa34Ap5cc6mdokyS({!-LE zXb+Irf*ePA`>?T~d>{~~aFYGq9088yg9qTI{=h1L5`>y&AczYe$N@Q#0tjOYd@6!+ z0^mOos`5`GMY%a;SX{75bg)aJK~7LyA4O#UqB7cMKsYnyzLNVhhv8um_NWCDG>h?r1>Mg zP*g=h6h3(LIVe(6;BY~cnm;xs|G%yLkuKoL1Ji;0egw4ehknzjXod*R6O_y&fd8)+ z?$DqiL4`8ds2;&h>!IQL{W79M2kPN~?MEa8)&TqpoWD;NSKh{ zxt!A?>2GB>+fDSgq*6SzW1N}HcgvDG6N~HYw)#gmF^R>hFam$mr-RSbr*Y|gaTscU zEKAXdYNoQL-TA6)&XqU&RpfS;PP1qFmZkRn zo7HPMSoJ@<%rh-%gec~h_Eg8-U|$ZqHoU5cSFoP%yv()8#h;;Dyt`iS;dF=B4!AIk z(Iiph7e-l3WVH|6ke!KC2pRoc=e7^r9c``slB1V~!_*5+NsonDA#Z=roSWyK@b7Z> z8k!PGbXz%G5oYu^@?Oit)DqeXbP8EeDvmhO;M0j4_25lg)C}EZ0MOO5^tJlc4J$6= zk_2A4Q#Rd?ad0ZPXn+qN#Z`BonwS^6%cc7JJo`vy*iy?BJr}_aNvh`P<6rf>kdZbo zX+(9$ZIe8pJ`p0j_ijLPg=`;q^}N=^Jn3AyYv3k#alV?VpY7|m655FK5Dl9o zk{>BVLqyiwmlm4$+WHo&)kg2MSJ!WuN|-^&)Do*SxT7`1AHBZu?%hav1-)%=s63GM zVnGxnWRfli=4!_kmBn5Pl*HwSKv1%k#9ZDjj}T%SRpA8+nTz z$s?i9GcnYFOo$v0MJyidfCZ2PPrcZ^)D*G6E8qblg(ro@gl|9|2{HG23OlGkq+oZc zV5mT3Vb`&M(=4?*28hG&cjC!n#9|#>2HS=ZDA9Zf=MP}HFQ3ZHiKB)y!43(keB1I- zU>l@#kq`UHU(RjJWXbwcnON-{s@pP;^Q@OyLImTeMuwIOzCs6vdld23>7{!WUb*JB z^q*0ApuK*<%ke^A?ey9$(uKGnM@rt=#`%%yQ^#U>PX^1Zykrx53nGc%?iQIs-d!z< z$BIr@%Xg=q8;5Juyos8W483chJV7M=Q)!z+rv)IBo5plCje6G1Vq`&F+l7tc6jM)R z?@AI*Y^kcf57bxROsq|kdG>wnd99q$gr3zr0UnEm?1fJnM&}H<-+wp{So0IT;{OE2!MC^f#Hm3!AAM)Iq~ zDPIcG((m5BVQTrt(o420`6*e_ebG27dX`sBm`W@KIW$49d26A4aZ#4nNp2fnUnVkbrB56!=rgGnP^yd4z=eDx$p=*SM*BTy${u^JNYuQKFp#mG;4&VdQCX-iSheDAXVoN5J4C}8@G&gl9D&vJ>i~OYq8T`1HnpI_qxuq!hjkj{oBq(~u+dCvS6GuFWw=eGN z5@X4xo%^%v%R)+}H+}9uuAqANGd-5tYJVN%t zmnIsDqk>X|gmN&ej4jXBPp)D_K+cJ)rfciBncF;Au%Qro@s4@1xq13}h+iz-ZcVVJ z%l6RwcgjCC3BpeS< zINrPkf|VU9HZXZPDhx5bz;IursRS^ZbJ2KODUr7@PHn}^lOx1vCB+z`ySzF! zCq*yhdyhZ5C{*iZFHOsg^i6)>kdZMp9*2igR66~+t`oE)7dXVEwiHJ0DN6+1p6jES z@o^w@vEA|Femmwb6L>Q8Tj`}+MIy%nv%WWv*6{vv*_cx#%BR$L`?jW!voPP#$3pVl z1x4RFYs_^f7d10NOYO^!g`*d-lV6M|;WwIW3(WbGzgpqZCVp7L;T>#hZNpudBQv0t4!=H7iyY8_i2*O_gx`i{w+ig#Kv{h>`%^&@iBi)HWgK+UWs zh*#+CeSij#EG=2yI+3{#)PAaI^kOUOTh|SINZJi1)elOxz$D12diNoOooBrewUuW|ir%2TS{+dPQ*PkzSH%+@gyLB>* zcjjTg7pLB)sdjalf@?ASi7ujGY!T=0(C>5g2?ExU-OuY)?#kkHmTG1*1ME0lbfqN77bnfs>|Wor?ZJ6KXiud6!-cF?UJz;=tCjqE$>)Y?I>|i=_~j$k6&YC5Y>LQfiZ`3SB)J%eLDJ@fB%q z#h%<Am`^jZo@PR(u$?Zv z?O4P`OX~BHR7_#g*f?}*<+S>A(^VK$txq{?fd|)IyJAVTi7vG@&g11?fGDU+RkZb$gdb&+P++vXX1MU04dX z8zao`UDSSjP1oWh*)pYh*!i(E0QfYZGo?3}rz7xoCT6>NiJO~3z<g_VnjakaOj?oI9S z$6*ZkYbwN_`La!DI?X51UPp3v0E!jrV1QSfiF4A`(yB85c@sv1m1R|PhJn{e5TI9g z-h04zD-LY7e^f$O*oDlX*Y{4vsij3-ba((9E7$FX8 zZ&O@cTsCIVjnVTY5SYrel+ld%IxVxrebS#Pnt7huWtW89%OfS;&1ig$Q}@_SAKjc^ zTKRzO)^0_}vVz7+Vim{6IzdV5?mj^DJ%Jdq&`GC)^;T(dW<{x?p5`6}WNAVz?CHtU z)-;wZ`UjHu2KI4L>zRpGuSas9a=pCgn=W#pmTWM}Ys!B4n7R6}Sv%=9OszTQuRT|P zT`E&7lyJelXQQ1)HoB<-J!*d#QD3KflLO z%Wx+t%(`pvVB;s};McrB%EvXXbT>>Y>SZ0mABj1OPkm9tXwOfT*pL9Kn_+%sVq8CypI7Y<2 z7>SxW=Khv>01Go#h z?%ivMdRH3l`pMutrshfQFDnW$z0OlyQ-S+MY+vI^gzm*^lWErN=1{Yxn7Fx~`@A%SyaM7D~E6}0-d z(E@D9^vFS&3m$wsjKHA>ec&+!SOjBEmYBDMYNjf*o~FXpT@=IUrFU0Mc;`;>S?mW= zOe9SKj?nW;d^&G+bNGkY7wycah**>P-;1zP|0=!j_Hv}rdB>a;M=Q<3fihkDGG>2_ ziZq`E|7mJ+1DhdwQ5pm8qB|0e8EFcHu4!cz=h&NRwTuY&jMWtJ%kIrhK1mYZX`xhj z`ofepG`5^tf=?08jzf2OQAta!x`ZP0TRkZwj|hZ3C_;FKAM)7K!aQ$Y=+W!!{{JiqBW(6s9{K{iIt=|YHn?lkelzH3O*zldFw!f%Bjoxnz z*}GqI;wsGlMrf0+;B?DY==2j}xh8o>Xg+M>O&Uh`jq$sRwd6N?#y!8j+M)?s4*xGc z-&-6S_EkTQ#f;MzzZb899O6QnO@(!}9LfwvcLh`)>CSriU(sMayvp z8n51N11pdA0h99bhM>B(vQXExYv2U-mTdK2*J{bPu{)Ke4Ua5deU%9QIh5dHt4Ji~ zuC~6TYM-fW=5O^9FXh>-(|%H7kFDgIy4F*OD!~-bebL>wS%X*j?y~;WbuIU;G7UYc z7%+C07^hXls6P&>(e0*@XBojYDB*8^x)H1X)7kryl_^Q?W*AM6mu8CNx3PaQc9w?n zCIIJzW_g?`9WPD0FtqWiEW)M%Pnfsabxu~QQK4>v{c_` zL&UtLYG*=S3{2*d&GtrDWjnAhPIt=0hJ_L*U-`?syMDQ!_)#? z(o^)kVZ&FdOwGhisQ?cHnk|8P(L(=10S?8I1c#y_8Sb7F9bb*gB>b*&K!{&c6DkeEsm$APhl(7d+#Xu&MmPIm+Nq7an_$*~aJk?i}u7(!-%2 z;4EdX+9bR{IsMgZ9X-Ag9bsx*+h@!dV%eA%6!FgOoHNZ?u*}wv30JCoU&K-6bke^= z!_Q?cJr*~7)AqeBAGKPCLKHRMwQo1iZP%}LE+}HI+!z@jKZ9djMkf0x=#FCWLn(S9 zG_N0h)_yR{hE2G_0P$xn4PR(6wwVquF55Ou*-KW}YFQedc6#*ULA>5w;uKUR z)Ilx;76XPyY*6)2N3Ng}9Wb55<90FIJcnSe@~M`ZjQA}cKOCE&t?VzWvcy&rcRvb9 zc-%U*-TJ01Kp3wiEc$E^vC}$pK7Vad%KVm+Z`9M*L$?AqzonIiSGTbP=Y;8u3PF2q zzdeF0V-=T2V9Ol5qWg}C_;F-9Ia zkI4FlC(Kh?QI9>c)-x<1Ws{bd+SfjPV;N&^V>ursoA^+sCNhk-i-9lB+`CZ1 z+vt_&$^7d&`#_q~UKvr+uqTN=yEpeU`_#G0XkU9v%$LQQJzPKXi)-ATdnbv^ILb>o zxGbeTZ!)DXEsXY=vcj7Z^8+4sblD8$GYRMG?j8FXe@##@_UapT+rS$#OD}B`LY$kf znP*}z`lWrzzp!ZfDzG(q>9MZd>&_kQ2m^(Q!1ULvtijC1t%Q{FG`MY*5ih_R%AQzi zAyS=@VxkMLC)mtbNE?+Nj~F(3e%y`&b(~6hNm=(&{zOIJj75BGx}^DQ-fU}LxqH5J z$u0(tqM=}b@~jQf(1(Jys(aqUMlAL!?q{I!18xdg`km<|Z*G=-UXC#L>^7!V;lOa# zcL|_@n(mP)k?pw*?*m_0YIc-Zp(XLjBy}`OFWmiEqa{bgS01~$Vw|^0dfE$(=;fL! zC9uetEv@XsEZV->;O{l{qpgN$4Ny}gs1)wDD<7nHy{4f1d769K-mF^AXovS@t1qLD zfz^U2$Gj3GdNqG-TU;@Gi1o8jHuK3hgbbjp)GCNH`3}y1Rc7tjn!4GJ>zk2KF#UZ} zJt_TcQ21z^0n1OC=wMI#363_VS9d8E$$1;&<3<|AOWf>7LfmV?;70aGyM?!EoyxRn za;cR*6Do4hX%Pd_J;sjM6IH7F0Amv4KJYTmbCyevho!35UTpC}hx1giE`dl;_mev3 zJclqyC;hfM)CDC*F!PHPI<#aBGHZyEIau-%m9EOjk>A+T8}2S;k=1)TDa=HA_IW`M z&G2{0&1-I8%;Dm>orho-$n=Bm_jT0VA?=8tlstCxu0vQ`wpEB+xVE!ukWVe+c!oLw zZsV+426^bMMSb(;!&n|F)Cc$cnGpUyI1M-m1)^eoh={^dgx?R9e;DL-{{g(_uC~Lb z9h^F}2iACWmlK-OP4w3vA`S^=I>py#-H9azq@A} zs@Mgc1uJGgJo6=Pvjj_;4Hcl$dY9jgv04-+=UeYmIGQfkkptB zOA8sr0S;hc4AiY;tj264$f`+rEfZ)i;F+g#IUXk^Oh`x!o2g(w(l9Ydp_rFiP{cWi zuB6}_aDkH)-bp#$whRuKQqzGW~OxOememI!rz}2d^f?Aa> z0X3V|iwmmruK3xxuW3G#pZYvw$y}AGdE1z)yv%KDK&iNBLZsTtsHW$f?_N@*C)KZ; zE<6i+lEJoeH=QK<=z-K@@D9cjY2fpuKxVO+aIS{SSNf@c3JL(E0`j!a5W0kk@B;-e<}U-SE8hMMo<_O|6Cc>WPN|?ksk5#$z$ci^n_hMF8;_cZ(eG954tOQdgOPs!B6SMpKJcjb{XVe9Gv~QUkvu8K zBQOyy_C(E0&p6~NVMx|V@2O+%?B0ZfzE3H`29=yK9r*|w2wI^v+bQ2Y!R(LDxnt&$ z3%#>8BiMZgL2{h5w9{&k4x7*k{oOgQN{5P!`Of=s?rTC^R$oP~SSIH0G3>HKauf*{ zZ)v^kDxMP{lK*nif*O*LW0eKJn1oK(xi|=MKfE$Mt zAw?*e|E&H^u}6`ZuR&1#;qlqI9mce|=G`u9VU0BO8zI5?+;b=MRR5 z_#_#C+10bkqzYs>AP4e9k2%9kq9Q);{GeN9Ugb^4`z1SaU*)W5XEY`wBrX{K>Vlf| z+r2T@VPEGE&QSN0NxUAK&FY0~AAJ7n9ltTv;yBHYz7Ts8aZ@iMrqk6mrM-D8AI8}$+}gHm`>IJxvY`b^&JeI6%xcJ*y5wwkC9-@6oS&-dozo?BFQH9G{# zt0_1`n}u})TF2j67nt|7Gh@m2OcU@*0Kj)MGom<9VA1M~;1fm|ci}8XDVjrR_!HeR zqBA(7kC++u1`EUdPG%6?|9FegK#xUiwh9N*}&TTgnKJGD}TJeP!( zH_S=0PK!=}f7$Sbsx*-uzu5)qq*14@{-rIn*y=%F9)_#*-2I?*bL{u_LO+^sFn_-C zI&-tLo{}ap{ro&_T7frEZbooOx(>(1pG)?aRxtJpZ0!-gEjP>ycbGa$H4pM7NtcJOJJQ#Na{up zv#OPERSJ(o1o;oInkXL5L^U%vQ<5j&+-N5Vs0CkE_~6E#ekak{(o|Cb`SL@KM}kea z*WQ}UtkNycA>TGtvGuhq2I<)O-Nva0c)MqyEhgOpV-!v=lnG=e0u$AGhJMBfsj+{5 zZWvxW>`0ejzmQbN&x&(7&5UL#*FAeKTJo4Zgf)7C`svWC7YQ#R9v(8y=H8z+jp}GN zf?o)9WKHA-t3i)n#C#$}C|mcSscX;9>lk_`gxo@cY;~wdXua2aLCw9!-){Y#Gn^zTQS9msjN8=F?#pH95 z&WD{yFtPJe&$$?t-X7~oMvhQv#u>@r2cRjRhMDrNbSv`1_$L?)g~dwY4ip$XJ&d5j z+zFU1goRY$4#z>b6>c%{WQiG@bc6EhgMCne^iCae)BNammHDQ-&)0Ut zpeNOqwK9FCyAPFk_^WJfzFhg3ftT)SVewN@NIHh}MecF$DnEeHa1)#*ac|<(ZaH|n z#eL24G^uoEjZ1sPcr}D4X7?RsIE6p>Ca)>H(I=KLZ}v zmW2<|2Lm=>v@Foh)0cNR_p-ThlGR7-|4PMq0 z!O_yoZLeE?js55ZYbmyjUs{~9&D!BEDW~{Ol`-Vtp-Eps?)C6eaZLRvOSga?*?YMx z?N4Lb714N(J{P4$I!K_uddx^X4;>tYX9G)(gB}lfz=(zUi$}dgFSN`!cm?Skkqi9U z*{OeV=4|h=>%|Z?tVPDX%MOg|tBiY(&a&?ID%6NAzICD&KIMCN?J9P27&{lmJX6UnW%8w<6T zi%;Db>kVFR5qp%cr{lyr(JBo@fB#XJJ8{E~VD{FBZL(UDXJO}Sr;NW4OYnFE^N4yv zZ*BT)H^oE;Pf**tv%WvinvkMB(p*arG?VZnd7M8FM}4wfT-Dvs!f?DX1p8< z-#~F|s4}r^!@afXYaKVuz2b-5uE{a${Jqe;O*Jd#idBJxpD~mQ=I&FCKbp126^Qo% zc}-}K`GIeYL=P&AgNIDIz>$Q?*Bk&2##RI-F=FXV1I|@#my}%oe!0yRxYh&xHlt0q3Jp*^xQwH7mDyz$SI43G~wPO{-f!c@)ksT%e+GLrP z(8rmZ7MAX;!6rYIGMzKkk8$2=>#$t_lP#N)bJYP$X^Pln_yDe@-fkp)K|t+P)=?kxB&ClKR7`_vVQr5B`L zTVu5sUcTG4Tc}OZFMlJX*`cC|E$ROG2Oc`n%pa@S7UJ@gVjR5}e`IT`3s7up(UU@{xAX*EilBj7A9 zN7^DHxM-|;na#4H63nbp?3@H+L|i92UL-N=ezL0XmNChl7A@!z!hXlbG(%q`OOkQ1 z8K>V1Trz~L<2&?t4(b#SD+N)tv%i^^u4V!M%qt=u!Ko9ca`eRV!JqHLrIf+g;uXW!nc%=&Kj1SF|h|i!x$v zdW;&!anQe#eiv0WM~o}N*r2wclq<-lrZ}5>9&PCdVseKpJcNx779aWd%kCk0_tU>b z;9MN_65k%rjQ1Fb+XtT5i|_Z76}5tpCI)|Jd@+QIgcAO;=HAD%%DKZO{mdVTY& zBAY7%1pCxHy?4b_a0Dh6mZ>aA&06xD%x=`3*b=Qe_m$MWmJLcj$B&h2Gog2G;;}zB zzY^})uOY|}+BTJP{fjKnb{_5>Nj)9wCmzgiKNf#|RUUU@gz-8Kv)2d-IYjT?y2Xh8 zkERP8FB5dlPx~f4JBH=g-?$|Eg)v@YHOUKu6^nM4tlpEnM9lSwNSP=gBv~8Zptf_AM?&tNz(6y(bWuod;KQqo6Q;{52KEh%SdtNL_d3+$f@&8 zMs%@+!u*+|h9`c(;Ko9pwfa_8JPo^?zOt+JxAr>KFc+a<4|9iG1YccVsS!F(a*cj(VR zMSJUn^iOZPk2hPc=eBd64#;~xoFJd)b*zqALK3VwqKFxv9Ph*xj7*bv+k76`5~o6Z z=U!O7U8C}}T#B%+r>|&7VUF?(r_lPVRt48t7H-EYWCNC5UcBE!1j8Eyy{z(67DV^n z=FD#ChuK-4&Lqm#Ut#zO4bDo%wDoShri&Ra2az@(Y9w`Xtczpy&c0zD=iVwOHX`E{ zP@QgUidC5qVP1@5xXP!mBv#jJ?rB(6o~-U8n`*{P_+pqOJ|QG6g}=~1c)^`S>!X$1 ziSePg7o0fnrEFW)HJ20pFg0Ievb<@J)d|ithR$I46$$jwaIN*L6c3m~i+Kw*-Ls%S zQoW}(1l64!zc{3xZpiDj&v{L$QgeR!BzdXxEa+Hxt4S%0uVy=?)rmSjS{CPZCXRg> z6|eI28}CcZTqY*dueI||Yyk#$#C3i?6xXb;#!k0+r9Nl4q#X3Q!9PT0^OB_&U3}JbX`fVhz zAQg`O6vJZ|?%93dJMBxbe&Goi`Z;-{Z&N#?XgMvVkm}3fDqq+nMSU=HIlOXo z^$Es-ZkN}B)n34jJgNi}5vs&cD@Rpx|J^#4f7BAZ)D!+5cCTW{wT;HnJpqMB+%Fzr zPl)WCd2{6&{@o8?Rt)!R%sy~o?AP&{#=^wdUA1IG$#J@#ni(+qGu8-}R_XU#T$gwE z1*iDd3j08^5oknccg$wO+|`l|emkkb!l;q;3HJCtaPYiD`osCBZz%4qEm#2W2hV#K zg_kFPH5U=8$YXD0#B&HwL2>hdLGoV^3#0ynRX(6ygeT!a8wy{oi3cXW5LWYmod4D; zA5h~VSPfyniIs^-_CDsA9ARz+iyF)l@|d$3@OX}6uFUL0Yrcyo?`T*q&O4qPY__|A zx3XK+-F716GqXYKC}>ydLMKuO;x+Hl-{4Ejdx8w%{1;1?e%D?g)8Ug}*w|pn2G}A} zaDg#=`O{I;33nmDh%=dh;IWd+hj2u;csQAcxf-w>2Eyv1X5+93H9X1!YZaVnqX3S2 zyn>-vJIPqo#|NxmAV-q-KWXUjEeJmV(m*LieL}p&s{|}VdI}VylAahUsJRh*x&ulI z3NmQ3Bg9+?HIajtWFiZfU=Oi^LprFb0K-MF1zCqt(|@7Rk!u-(8RnKJLvFmB%pO$! zP7ZV~=1cCm?gNv-d*pzprTISaV|5=05!zHWAVIsN4c)d-1_dT`$EN1J7y6YjoQ?kE zeL#|NbJEjS4A}%2L!+}^$vDzPtz>EOKJaT9y>$=CRZuGNIU&0xS^GezC#>}dU~jM& z6gkkr1KY?t(ncQojj@O~OMo#ySR=CNT}<@)hi?n~ZP0l39Cp2?Z>7(XpZ(y(EKJ=b zpc?o<_L+R^OvJos{@0uby?To6k>4{tG#I?JY7|ItWsKSqz6~rYqDYPDcLuX;s5jLqK$652&1VMG=ZZ2u`=Aa>>0H@6+#fY7uC32;P~@`veV@ zgv(goH;2E5TMD{Zp@4&s?>`|iX&-9Hf0;fA=!D?M2D=pKknrt6?Ca@qII>bpMrA z$Z5_dbE?`-7v|iTT*@cESh#tq|v7e^c#W5sA@>cno+w89DnCB+tOYD}UVJ7M2NlOhXGkO*BPn|+w6KNigRwd3>KjsK5A;=g_whO0%J>&r%J=;FdVs-0O3SeXsVorTSS zyyYzgd%j*~c{$ywULHDS4s?FgliYI$J+=*SGUf>EHNZT*$9osXCa=~?7TJN02h0)- z?U*4ifl7p1`4`Sg%QthcKc9LUa_5eCWKfW4Ty{&NT=M-c zI<&Dj?%yvAje49du&h>y*JS%4QG^wAH!oI{_f1sCv4)I7%PFWvL3i`V&GHXdoSl!C z;9vV`nxdSgGa~tnUpJYmV?r{#kYx>bA3!JYztPFRCLL;QH82kTElrMa<4^oV@ZB8A z!(>kwwG#itYZQ8rY&-fKg7-XVaQP!B{)D){A&A$%)gA&!T}ZaWNh6Pd-!?eU0uj9Q zcZm3FV*d%Je@l$NAtFMQj?xC=iH;A@)#Pt{3%Z&nvLPDoGBz4GCJ!deMVc-L^0cyi z53*vJE6(Yh);lZvT_T~-f@MPe#p1=`^5>&4!1-FyhXkv zWbMN@GPsN)x)ybWzrBCL2x@@;t1FIZFeIt|gyVmkivO14`v+K|ZmvquaoNRi z@aE^Uy?H8wdGEtDVLFnWLeXdj+o(MIj=bB2wiS<+{rP9}Pt$fwb+Q=m16vF8FV}Vx zNX73)%tYQssBMHY&R>#3|M^FYfzXub^aCrN@EmTO0}!awF7I3fQl zPYHSHsDehaVfasv{Xq!+saN(7-i7E#ptnRx;@cEMLPH_@sf0Z{hzT+@j`~1LA;W5z zz!X@R4g%H=cnTHoM%AT(S0fJcHL#=->lq;9J~F!m z2AAPW_F-d%ZK;7a)+5nrl#h>=nS!4>4X@`poCBaebd@ELX6XUYOnqTTC2E7r;dF`t z7{-Qo9+rkhkm7(THVQ;K%ZzCz2^MuP2A;y$ z58Dh4_7n;ye`*Q2X&3x9WMSSxVhoU-eg)75l+qRaASmGs6z6q9s6cWrN$ zFt-T?=d{HMo$HG`QUip_)`6fnSoU=qw!;c66>_kb3ruccC*fBP`l^C0^Td9(N+kV4 znm|cIy;*Cfm_6YP8$BL5WU7Xw%4kDj*M-3S?DzTky$RhwJA4eE6Q7t9R+O);d0E#> zk~zg+UupWhevY6mQ}@^GnA!QIDN|_5f)bCI1X)8h=bP$RC6z1p`uksbU3I zAa!utkSg=>cAE8XCG?uKt{`mg<%i)m&q}aEW+chQZ>3noX~s~*=UlzNGM4@di%>9I zb0&OQio$-GY)+$Vpi>&h%R zQd9|>#5a;=IFGzi(dC0`0c#Bj#pfY%*bv8z;U@77hGla-nh) z8VnCM^b}0KfBMO4cUTgYR`TP9YfqQ#Kc-SQHrX1v6YW;Ek=YD0yl^LSm%v}mrA=$f zQF`||h9kubCS@>9iFg~TgXq14cLtF+g{y`L14Kd>aUSgnsN{|C$*y%gW)m3&bLtz{ za8F*t<%f)GItnR_ThLo*t#&@)^7zado_@b7!pQL5j8m%D*kZfbUck8k&*dR7CeoVd zRmIxJxm?BWd1qqLROMCQa{av+(#rc0XTzj_ggv+$3C&ooatX;3vJ$@5jvS2OSa&Z6bTY1?!JC{a*|_ zh2DI%A{{7b60P#{)yWB-Dlg@-QOT?H=B${5#kY($TgJtNr=!vW-bKzlPyk*9MGmj_ z$I`M*5Najym3Hy#O8144ZM4P4Pd##Z*yZJtTx$%j&lp9lz(FVm^hKe-kxiTqtO!cS zoc?W{4&2Biid^BDR&bRTzJYPu1U)Mrjfk~T$W`Gx_k1p-^oOU4aHN~eH&_Ynk-F3F z`5fD`zon7$Nq>;OQ+!oFGcL1qnZUZt|B|%ryCvBjC0DAmRtW;bUkWdnn^`*v-FjWz z%ToNdTvqXciNvrmgJ+Vb=wzeeH2aUMwBz#)(jVqL$Jx3)XHSyM-1OAU`82!Hy`*fK zr+t^$sH8$JmM|>gi)-JtgtXODX#!lq_#cWu^$i+axZ;C zwTO+j-hb&smC}^M;<7sUs5al(ax$5A?5;jVO`lyu^!uw3vQujDyVUZT^4~=#m+=kk zs!98+blE~px&(9=#NN1aJQ%ryakaZ!Tq@Av~2fo!q$jBu^{b59)&}9%2jRPUIMX5E%iF)&&)3RriW{K zlya*V(#Gi><%*KVjrrz&Qc}#e^UIXVPI>WxwY|iBVGO=6E}N!q>a22pE$dE|9cp{V ztRbscP84Lce0(s`>qjs}XYIy7?hA`OjzHbMruNG5mSE*q2{Q~kuJ}@>p6}gRUw^T@ zxNg3dJJjtQn`g}o`~nCUheG2cAPeu711upGU-0a5iSA#9LBY&O2j{dm|pFz|rH1I#h5{dq5zO<9(07 zySE<)wBx@mo}oG|{yb%}REY<7{Tykm03)O5-1)1vl%K2&V@Yva3p&sBE$Z*$rQ?)t z8r~2;m$6(L@OiLb$n3UWc2FG)WGGTDMUdSK^k3k$`>>*Fm@A8ha#Vfyf3d6$*IdXL zhb@1>!)if6^OvX`)ABco+`7iey?T<%M1I?9BJ(TDw%z#noS$yBXLW!YbVt^Oryx&| z^}4a4PC%SkF70gLV!xSg$d`5XS&R8ITEW^Q3=cYuRe=BNOkn@$0N#TUwYCCL*OCL=XP-x3i|( ze0V)lu}HVi+hd44VsGihFMw%jX45sPco3Stn)tC{eXK6`%~OB2q*WGs-!i7t&n4Mg znloG>lEGXB=RCO0N=simQ<9lG9&bALld4G=JI=sxuKxmKp9k%kf$AZ%QMx2;Zsyna zgiA{zzr0)6pxLvo>IQctefcj=61cKNYKq>hRP7U7zE#W^9uEyN1#G~Lw1^kp>zv5b z$EoStp|y1>i+g(dHsvd3su2Rh`v6X4OXpqS>ke;<(l}!P?_djO%z%+n#Dv~k<1ioj z0++Q$_o8Z3U~W9Py&iI! z0Kb(=XU6Z_dOGK1YXy|xe2C}qVa+v**7#l{nx{`g1wQh-zGe8*V1Jw-fis0ZbWO77 zZ2;914Vh%Mgp}43ea7Uxi45N39ErMj>g(T`cm{4Jc)pU%*|q4bpJXO+5KAP_uDH7) z!O-}ANU2nt>$dhJL!xqpM7uL-LgrG(=DVvmD9MB^Y zpErV7| zE#|HZgB)ut4a2D}@r#p^ClUpBJsQU2rElN`S5yjj&h)vE*am1~)HJj?-P;jL8PaVm zx=4{qBOSnV;t~&_E@j6cyyCfYnnJbHobB^^px~JKePUu6F**9zT^o`iDg+tBH%B&^ zYC`hCQp?t1yjVUap=-GXda2#Q_F1t16Q?ay3hAS`o=y`C4uGi%#YRP=kXEW3~I60&kC{TT?}On!TIGQ zotHK7$_Wa`CpW{^4E3CDUYS$AOw*SpJny)oFmowl(Rdg#ScmCuF`v_!#Gb?%mFSpI?#`ft&DnY`@b#8S;yN zQLa1kW;JD8aC`YFDh(lC+9v=VU(yI=q!N!P6?fipweX<8qpq8}GMVHf(8m|OhK+58 zJ?!$Z3+r4t+9^DbnMLY+h}InVuo3a2QXt1t~BObUPzOeIH~Owc8}>HxF2KT zTfjvLmUe{i1d2Qy(SR_D9`YXk3l*I~{6MV?2i;209fKX<&7ss^95i%w_fw#(-)Ea@ zXWQnz6H|NXS{@igeKkfgq&@yKHjUrQWxEqQuc}7s_r~caxhQ=*6_H0}k8>*O*K-1C zSLt|%m_hrJR)9jg&cH!<%7dQc>-^Om{!V@3)vJR(?+*hTs6_+l(;!%I1dI$EU1X1_ z0!6O62QOjqoSheSFUT?Ciuy(%QCvoyBXK8a=Tra_O!s8`@mGxex!%6AealoBX-;A-bp)oz}I8pPL>^hS=F(HBsuUg-$V&Yu`De<`=oo@^#|-(r!UJKjl2XFEbTwsQRAA zQ-}wQ=m#~OtxlOgo8Kmw;a`Yp3NkO<&9B-M!-TQh+qJA>)MmaW>^tGgpU^ zk#p_+!kyN(%lbbLw?lDLzRT0&Y~Pb6uuE<$G^iHH`7ln z-kAwp^>UWnzEedSHxpYR*=I+<@LuVPnS;JIOX&II%(i>I#(TvOqrKyy;H0pNKoQ)2 zQg$DB@5Q0?rG{9+*1~o-)SRyW6`rA)dMmhqlFf>*nch||g{w1Vu1sgT^tC{#J?(Yg zI>8Ov>pr-R_dQnU#d@J~-FouESlR{;hrz8g^=RL_P(IFdF3vwsYp&-|{E)NW#W=#I zc5*P5wips^N5r#GcT;d|l~=neRd8cFDc&};$BXiMS8=`-ztXk$1SOZ`owM<7uD@H9 z#dpvrSQ$;WrT>^2XiC1C*uoTgS~Q)^{sApIJ5I>u!U3 zj_TVNoMYYE_n?CncLx%+a;n&+aa#sG~ZLSN<1`>9QPWvbcgz zr}oaeFpQKrn*Xp5;Tsy>9(dzjJ2dv}>up}4pSSJS7wJx^9PAnYZ}#hN|2Y@bh8ytl zA&R(vqtU;=nCt&)@3{l1eA_<9PDVu8Ng_XFMu?8e3RxK;8D$@POGakN9@(-LMP|0l zl6gdC!wT7Z_C04hs`q=>_s{oz??1b7qOtf^aZ3LL zog)kNW8QNM=>_+-v~KYtvWB_M4O%>BH9Lqmb)ai{!1M!5cFi-d!H09>P*O zK`&W9W=6L}=m+w|mETV_@)DcRAUKiDJrNpEA~#Wcd2m?~SBc@c(T|yqXDS{Nx+|Z7 zVzPQ)U-lfKz1J&wll9bGPRGU71qHH5`HD(U!cW5)c6zs~i|>Z=a*8nDowpMBoN^sB zao%bTuQd8ebJi`DKz5DNFJs*h_V4F##3f8BU~`$3KKs+7XN`^fKH^e}&W#dn1LxDf zG0N&p8!o5@Yq5lt$K10G@tP-OfZ>YWT+$14Na!ZZH}84M`su~FchGE*dk;9CJ*Ze# zkW`do&0U3GN1B!VTq`tPWY?@1zgkJtbywWpHT6TReXe?NV~vTJzYC*_pjT^eznbew znertDenlrCSKjFXN3~rU@@4NCvn<>%P(9A>j1xwJU*WW=zahi?pg10vM=@5Tc(J~Jeof@1miDD@eb)hN*bsI??sQU`RJ@`uRMq)@wG2(O`$us1rn^e{$6~+AHz8Ce&POLG z)uZ@mX{QpAg>x{94ef1V={mH^J8;I}!8MHe=bg}URMY*GC}<)5p(py5(Qb0|+ zNc@5Yf7yJmokU5KU)x^dt21e(9PPIl8QogP;7bxjEb&0vQ8pYc^w@4I0l&`7iNUY& zVxgjM$0RJ(gn4-xs3ZayURf1`z2cM0fO3G2_4^HMN(HGxKS59haCMF47{h8y37c2h z7x&7o)xh-fLQX4^Oe=-2kA>qupC3(U2;Omr;Y9B>@|tglu9pQaaDl=uR2|bj_rYDp zlF2?El$$j}r{0%BvZ2S_3pKWl@f}U4o(fJ%vV8>VU))W$s^uu`XYc(%**~?CO{S{4 zYXjOpW+sS#1t_jTSMnh~r116VR{oezy?X2I)G2(Wd@-;(k3!@-oI5UWvV(D!9y<)D zuC@*}n=8}B%iq@7%sT2++sp3bA)dXwz)MT-76QQ~qy~;tyY#PQy|85}^ki)9ZI8~N zXvK3Cvkebkif~({X0{$49F`a1+k7_H558Ye$Z!nA&T0}Nu=$YP1MK^lG=^+3h`$h5gBi@-`XBGAOx)U^OgpapM-h8|N z-R&+oa>f=y9|d2bFvLDSu3iXxRidM4ZmN1#L*AB{nvqadU;%RExz?=PgHY%DHLMlR zJ_J!5WsmW^6CIxM3KrArtd@q%tfi_N0PQ!mo- zw}^5QIj@OpK`sfQHtg9|A;`6T5bLI~P525_}zHsQkdt{O%WrWzsp)M1qwBXIEX$7Ue{D~l*sjP=2IG-7Ux#D<)rc9ef?O6v(Og^m*lpgZ`}*$JV{SSGXwUZUMVQ^n~1rpf?I{l zEORu>3{z*yXB9|0Nr#8^ZnxDozVn%!$CE=gJAr z;di9FI&-En%j@gkJoA#QJEi$4;{|4fZ;7oe03Qq<6T;^3S zjHk2}?PCLGKMd$!8XJ&SY_|@R*Evem!EhgSK|8{;?yzpmF-5Hm>$G!Tr}*Z`%K2cbMf91(`+KPsv%$M|Vzp*gLSa;HejQ3R zKqY4=rP8KMzC-2Im_jd9|JG3PaXhf@HUSOZwznLw=!l{<=|Vu|FI z06G`jtAr|QUSyj&*JnmhNAo->XXdq(rLrL&4g6Rk-B+J451aGMiWgS6LVoFCntVI{N`|5mgq*$Pf`LA;PFLXGI%YvkxjSh z^A2wdN2F|6487AzO{t{`s5r6+QwF#wTufyIv}Hu=>LU~>Wx|-;-oYgHa=p&^C=utG z_CdvNc~LmXk@%IauDF@(y=o3)O1MW^6KNXJOhcsh*KD$lm@>hsM_+v`EIgP7iJJP- z&jnLSMgpveE*S5gGC? z?0%HD!GE?hAVxamR$Q;xYaUP{S#_=;{)@-%ZNfG2JGbA+kFW@=D;LVFw6J)U12?vi z)~d+yidFNA`S#>%ENu)2#vO3#-w&f(^LmCuHZjd#wg zzu#>HR|cPGsRrFzyhNAU1HI?|ov!WvfS06y=hLwTlm2Ajej%KeAj>te+1ZO#KJh;Q_*sl-(HkhtxMm_%mdc-nn3jogO?Hwl|NF<6>DetYA-gs8$M+eisK$` zJ6#FWX!54N^5M1BDX(u~H1SFaKuruvNvD`1p{${^jwB~16c%MWX;VprVpR+K)+(d= zBIH;e4ZmL+e8$fse$sg{I9ar-i;=RxlW~wYOfHFI--a(`lt-|x!47Kh@q*v@^x$|z zlsGM|3jI<8B{|@ycn0Pb=jtyJU(M9!92k0$;Pucme#?5|;bsr6nsgzIyJXC=LOnx3 z2Fln}+}+}@FRA%%jc^O5K%h4*L{}CvDZg_!>G+K&Q9>>fMs8{pHyYj!GSqPOai`n} ztS3>Xfw2>73Au07WpuTZlYY`Mt2wuXpP$G{Ld^XrZIxDoEka)iD%7~SPt+b=C=E+` z|1=iAs=kA-?6TxEzV_rOfJgE z*wD1*+P)t-%vw|gYKq0hTMGUbukS1fkEAG&ood>)N~<{AF=yp!R36PDZ-l4M*a6b@ zPQIMU%hq4)p>c}boQFNoitPz^1~)}nFd?o|k^gb4b>Btbjb<&xiJ6I12$ z#Ebj{F8fhkv~)k*ER)%Lc^qXkBl;SY0(pZ5bnImtJ$eNCo>F+kLV&`Q7L9i{KKumj z-UgX(-gCIu%X3l*wvaa;A-Li~`CB99l=W$-FalHfwM34y4fw zc@2F@8JQ1Fv>#2X3($TO@wusA?W)7#T$#_XZ|U)(%A#oHBTUiESJ_IOi4x!C=$$M3 zi>)K9_OzwZWntRZ-I+*SrG_mawA5yAYuBH0SABW1=$N7S6rO(K3Q+r3tyxo=(OTij z{554k{upwX_3yHr!LRR5KBc{E2?W4XW_fl`4SOyDWs>B+==hiSyt*~X?^hG9QZ*Tc z|Mm-km24KF=AlAZsO2*%$c|1MG)2eBkbzh9&e|`5_g{CE5s%?%fv8$X=qxRCjv#Vk z-0Lrlm>C#?L;Qi%8ZoGJr+me=p7e@jMQJk%cAMwVwW7nOE_sNg5(@ie_Lk|+3NM`9 z&>}577n3c5PiPSECbQc@~~%Npdz*rN#5< z(yrmBUtC!ISO)S1fT z827w!L7{*mSF%wPJw88Q9XppTY)hFyBbq5YZPSpZInjzo;bk*^+)cI(`;wa4(mZ1t6y6rGeRa0=hlowEfL9b1z+KWM(Rqfg?P|g954)o~r z)v|}zA{FAYs!E2PS_GC)iX2HMBM|!u`U}+dNL+bFb;fCsqwK``oqMGvt`yFNHulSj z_%x|U!(B`zf-dAY!7lt*-pi8DWXP-Yq4n?w;lgGiblO*ExD5$%8O$7lRpN!-w-U-Q z#jU22%pJcTyH644uv5=nDbKZaZbyqCJdiomkQAi+anA8Y5~+hsnft)_@`hgSO$9Em z32%`ODihplkc0NK^8LTT2DvehE?k|M6+6jn8ERMgN^8r+^5<{feKt=t zpIx4X3)Jv|$+%h-H%06VeLC%9P^t$RKC+XZxYF9h=9O!bF(c}qNtXSxg2QXRw9t2g z#d?8npKTAH_iSbN0+i=oub^Cd$gLaGbH<&~0-o+6>eVfJt6(b*9!Ex&2`kGdNo{AE zS@;78Lx>E9;z1LdZ$%?K?pLBTB)Bz`woQXca=bQeM+^Vzh zVN<2`uOFI*Jq)wwSb(KYucg&FXzOmQ=tSlWm9E>E@QrK)ja^&%?p&K zO$s>UY-z^_Auov4=*jz5T((%Kl}3Xj_Ptdin;kE50YbjGvHm1j*{nTH$=W>chjGjd zJ7;;3gI-mlGJeo5M^>jTS4V%sxZPao39BtZ=4x+jz5Cfe;%MqA2ko$W_&V{SJr;XcwX00 znV*21K@IF#aNhH~YFF(7aBdU0s?J0fRzh=Mi3Bzs)8`bfRdtR#W7sPW*C@4q#>{Ky z6ls&IP{v?Vu^(9`SGV-t)2yn;@p3L2L<83!o$f7uF{DI3YUb1zF>_M;vFwVjPtLPX zYx+tc5;B3Fr}PnKQYG9%YsSRu;Z-+qraowZjE3-VA;(`P(9M$P5_pPy(IOs)4$>s9 zcDSyklFWKY*nd;BGo$|IGee{*5?)|O?Op#v+7xFrI&Em0$ClM@SW&!QjjNy1+G&uN zzykzaY*_1iVtIAMJU(+`I6=WcIZ)F;Wblf9_+}4|SQ5+fy6cD1aG7kK)}AJ#qh8jm z4F2I2AXx^cJvTL+js)wRkxd^(?fnn8{u(;!V!$6nGf^f$d65y6N+?}6)odr|tS0XD zkn(L?;MfD9Iq`RRk<*)x&J#)k+Sxv0dSmca;FN=Bi#it9@O!?1S)LtSJxqLW^N z7lvG|FI~)UMhphzJ#+s_j_#)Oon+ag z=AypomVZe$n%1%GLx8m--DlG!%{|=W&Rt^9eYQx*)ij-%l*RBFXYD6>Hd_U6a}4cT zZ7VOblDTFPIBZL2^efXs>EvG|sfxXulxEUZk+yjeA<1saSQ)Q>r)Y7vZ0WD@>fd{)JrI|UnR8A0}r z&!x@;CgPG%L_C*V!%f`j!V?~)sE)o6PPOrxHp92R=KF(9P{LymUfUGFv5yx@uqO=S zIiJK+)4?5sAF;0Ph+l5yKATm14PC+?jQ!Gq4NEpwZ#D2E-j^gg@{|7S)4R@8v%Kt?wH$x-0y1+}tAEFS)~QQ!gIe{&SXE!_YJ z@FF(ItW=cZ#9pmnbSXAwG3|g*Gcp{641)fG!QT}ryyDIQ*{}mb@FB6nXqZ;$XccgMs1&>_4c(835LlvtYIn;WRs_)`tFynG*pO8Z*xxZRS;T{bYLuA5ln7@C zm=ggN1~l{!|2}Fkl8-v11fS_|GbHwtfACFpjD@7$b%YMVP!dHDbZj4>KRihS zl|2C5^Z~ELhAb|I;E~_>0>P;0-7>^ql+OCkKv=2-Y5fo^eAq~$6cCyyNHU;x1Dpx~ z0nqsrSoA}*N7-g9Qer82gq;AJBFFlWZ?9Eh`s zs09^?zmS#&p|#*{1K_7&u?o8BA&(AQQJ^^X-$V{D4Hl{Z{R3e4 zAS>pNy8OU}=|X6D`1;2#lgrN8s}SzaqV}!_LzGZIG}C zit^)-4kX&;Lu()eHyjWKh3o@LprrxX8_AY%;-J(HHYI*%NR$kqvw6_Hk!}$7IWCOh z{oQMYPlW&)4HLRIntmv`M86n<8L%xm;+4=KU`9gsMww`IZ}f}(<7hz&{cqfk(B)|4 z!Dakc>>#wlA(sQq=omi$VI8m(2^vUj+QNrMi2%AkQtS?70mx4!#!@3Fd>s-_qyuvJ zCu{%#kPa)6-|2)A!oy$y|6u@x3nI3D{g;q(fa$|4t6x26#2cd>d4!b(UJ`k-5Wdbr zJK;#y$EaWg@R()NA3Gp)$)AGDD3O3Gc?^&kt@o!6NK=onB1rzkM8Hrw4cm7>3n0M$ zXfuNG(cot&5r^vG9guQ@d2<9X|AVMH%zP-SACMKzb_Y_5=7&G}G8ja`Iq-nRFd~2v zQw(n+xCz5j=)ticAF%sDvjgm*W&~slm8g0E0%i~Zc(^}>7Cl5;M6&}XLrsi$-Gg`j zb*w`if6xrWV5k}Y4r;LA`gH;{>dV;(U2e@6M8!GB}2|1?1d M1^yXKT>d%mUre+05dZ)H literal 0 HcmV?d00001 diff --git a/docs/public/vchart/preview/timeline-vertical_2.0.jpeg b/docs/public/vchart/preview/timeline-vertical_2.0.jpeg new file mode 100644 index 0000000000000000000000000000000000000000..92b237a4162c9a8e00902997edfab90912332f18 GIT binary patch literal 33476 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 literal 0 HcmV?d00001 From e1b4f98733e8c7b1efbda22ba2f3712cae7d470a Mon Sep 17 00:00:00 2001 From: xile611 Date: Mon, 2 Feb 2026 15:31:24 +0800 Subject: [PATCH 10/27] fix: fix default axes of timeline chart --- .../charts/timeline/series/event-series.ts | 8 +- .../src/charts/timeline/series/interface.ts | 40 +++- .../charts/timeline/timeline-transformer.ts | 179 ++++++++---------- 3 files changed, 125 insertions(+), 102 deletions(-) diff --git a/packages/vchart-extension/src/charts/timeline/series/event-series.ts b/packages/vchart-extension/src/charts/timeline/series/event-series.ts index 893b98c186..a2034a30f0 100644 --- a/packages/vchart-extension/src/charts/timeline/series/event-series.ts +++ b/packages/vchart-extension/src/charts/timeline/series/event-series.ts @@ -95,19 +95,17 @@ export class EventSeries extends isSeriesMark: true, groupKey: this._seriesField }); - - this._dotMark = this._createMark(EventSeries.mark.dot, { + this._arrowMark = this._createMark((EventSeries.mark as any).arrow, { isSeriesMark: true }); - this._iconMark = this._createMark((EventSeries.mark as any).icon, { + this._dotMark = this._createMark(EventSeries.mark.dot, { isSeriesMark: true }); - this._arrowMark = this._createMark((EventSeries.mark as any).arrow, { + this._iconMark = this._createMark((EventSeries.mark as any).icon, { isSeriesMark: true }); - this._titleMark = this._createMark(EventSeries.mark.title); this._subTitleMark = this._createMark(EventSeries.mark.subTitle); diff --git a/packages/vchart-extension/src/charts/timeline/series/interface.ts b/packages/vchart-extension/src/charts/timeline/series/interface.ts index 4a89b80eab..e7e94671af 100644 --- a/packages/vchart-extension/src/charts/timeline/series/interface.ts +++ b/packages/vchart-extension/src/charts/timeline/series/interface.ts @@ -18,21 +18,57 @@ export type LabelPosition = HorizontalLabelPosition | VerticalLabelPosition; export interface IEventSeriesSpec extends ICartesianSeriesSpec, IEventSeriesTheme { type: 'event'; + /** + * 时间字段，用于指定事件在时间轴上的位置 + */ timeField?: string; + /** + * 事件名称字段 + */ eventField?: string; + /** + * 事件详情字段（副标题） + */ subTitleField?: string; + /** + * 系列字段，用于分组显示 + */ seriesField?: string; - /** icon 字段名，用于显示图标或图片 */ + /** + * 图标字段，用于显示图标或图片 + */ iconField?: string; /** 标题和副标题的位置 */ labelPosition?: LabelPosition; } export interface IEventSeriesTheme { + /** + * 点图元配置 + */ dot?: IMarkSpec; + /** + * 图标图元配置 + * offset: 图标相对于点的偏移距离，单位像素，正值向外偏移，负值向内偏移 + */ icon?: IMarkSpec & { offset?: number }; + /** + * 事件标题图元配置 + * subTitleGap: 标题与副标题的间距，单位像素 + * offset: 标题相对于点的偏移距离，单位像素，正值向外偏移，负值向内偏移 + */ title?: IMarkSpec & { subTitleGap?: number; offset?: number }; - subTitle?: IMarkSpec & { offset?: number }; + /** + * 事件副标题图元配置 + */ + subTitle?: IMarkSpec; + /** + * 事件线图元配置 + */ line?: IMarkSpec; + /** + * 箭头图元配置 + * thickness: 箭头的厚度，单位像素 + */ arrow?: IMarkSpec & { thickness?: number }; } diff --git a/packages/vchart-extension/src/charts/timeline/timeline-transformer.ts b/packages/vchart-extension/src/charts/timeline/timeline-transformer.ts index f13db7d8d7..bd24693b2c 100644 --- a/packages/vchart-extension/src/charts/timeline/timeline-transformer.ts +++ b/packages/vchart-extension/src/charts/timeline/timeline-transformer.ts @@ -1,6 +1,7 @@ -import { BaseChartSpecTransformer, merge } from '@visactor/vchart'; +import { BaseChartSpecTransformer } from '@visactor/vchart'; import type { ICartesianAxisSpec, ICartesianLinearAxisSpec } from '@visactor/vchart'; import type { ITimelineChartSpec } from './interface'; +import { isNil, get, merge, isObject } from '@visactor/vutils'; export class TimelineChartSpecTransformer< T extends ITimelineChartSpec = ITimelineChartSpec @@ -10,122 +11,110 @@ export class TimelineChartSpecTransformer< 'timeField', 'eventField', 'seriesField', - 'dotTypeField', 'titleField', 'subTitleField', + 'iconField', 'dot', 'title', 'subTitle', - 'symbol' + 'icon', + 'line', + 'arrow', + 'labelPosition', + 'sortDataByAxis' ]); } - transformSpec(spec: T): void { - super.transformSpec(spec); - this.transformSeriesSpec(spec); + protected _setDefaultXAxisSpec(spec: T): ICartesianAxisSpec { + return { + type: 'band', + orient: 'bottom', + label: { + visible: false + }, + tick: { + visible: false + }, + grid: { + visible: false + }, + domainLine: { + visible: false + }, + paddingInner: 0, + paddingOuter: 0 + } as ICartesianAxisSpec; + } - // 确定 direction（通过轴方向推断） - const rawAxis = spec.axes?.[0]; - const axisOrient = rawAxis?.orient; + protected _setDefaultYAxisSpec(spec: T): ICartesianAxisSpec { + return { + type: 'band', + inverse: true, + orient: 'left', + label: { + visible: false + }, + tick: { + visible: false + }, + grid: { + visible: false + }, + domainLine: { + visible: false + }, + paddingInner: 0, + paddingOuter: 0 + } as ICartesianAxisSpec; + } - // 默认为 horizontal - let direction: 'horizontal' | 'vertical' = 'horizontal'; - if (axisOrient === 'left' || axisOrient === 'right') { - direction = 'vertical'; - } else if (axisOrient === 'bottom' || axisOrient === 'top') { - direction = 'horizontal'; + protected _transformAxisSpec(spec: T) { + if (!spec.axes) { + spec.axes = []; } - // 确定默认的轴方向和类型 - const defaultOrient = direction === 'vertical' ? 'left' : 'bottom'; - const allowedOrients = direction === 'vertical' ? ['left', 'right'] : ['bottom', 'top']; - const orientNormalized: ICartesianAxisSpec['orient'] = allowedOrients.includes(axisOrient ?? '') - ? (axisOrient as ICartesianAxisSpec['orient']) - : (defaultOrient as ICartesianAxisSpec['orient']); - - // 确定轴类型，默认为 band - const axisType = rawAxis?.type ?? 'band'; - const typeNormalized: ICartesianAxisSpec['type'] = - axisType === 'linear' || axisType === 'time' || axisType === 'band' ? (axisType as any) : 'band'; + const haxAxes = { x: false, y: false }; + spec.axes.forEach((axis: ICartesianAxisSpec) => { + const { orient } = axis; + let defaultSpec: Partial = null; + if (orient === 'top' || orient === 'bottom') { + haxAxes.x = true; - // 构建轴配置 - const baseAxis: ICartesianAxisSpec = merge( - { - label: { - visible: false - }, - tick: { - visible: false - }, - grid: { - visible: false - }, - domainLine: { - visible: false - } - }, - orientNormalized === 'left' || orientNormalized === 'right' - ? { - inverse: true - } - : {}, - typeNormalized === 'band' ? { paddingInner: 0, paddingOuter: 0 } : {}, - { - ...((rawAxis ?? {}) as ICartesianAxisSpec), - orient: orientNormalized, - type: typeNormalized + defaultSpec = this._setDefaultXAxisSpec(spec); } - ); + if (orient === 'left' || orient === 'right') { + haxAxes.y = true; - // 检查是否有 seriesField，如果有则需要创建第二个分类轴 - const hasSeriesField = spec.series?.some(s => s.seriesField); + defaultSpec = this._setDefaultYAxisSpec(spec); + } - if (baseAxis.type === 'linear') { - const linearAxis: ICartesianLinearAxisSpec = { - ...(baseAxis as ICartesianLinearAxisSpec), - zero: (rawAxis as ICartesianLinearAxisSpec)?.zero ?? false - }; - spec.axes = [linearAxis]; - } else { - spec.axes = [baseAxis]; + if (defaultSpec) { + Object.keys(defaultSpec).forEach(key => { + (axis as any)[key] = isObject((axis as any)[key]) + ? merge((defaultSpec as any)[key], (axis as any)[key]) + : isNil((axis as any)[key]) + ? (defaultSpec as any)[key] + : (axis as any)[key]; + }); + } + }); + if (!haxAxes.x) { + spec.axes.push(this._setDefaultXAxisSpec(spec)); + } + if (!haxAxes.y) { + spec.axes.push(this._setDefaultYAxisSpec(spec)); } + } - // 如果有 seriesField，需要创建第二个分类轴 - if (hasSeriesField) { - const categoryAxisOrient = direction === 'vertical' ? 'bottom' : 'left'; - const categoryAxis: ICartesianAxisSpec = { - orient: categoryAxisOrient, - type: 'band', - label: { - visible: false - }, - tick: { - visible: false - }, - grid: { - visible: false - }, - domainLine: { - visible: false - } - }; + transformSpec(spec: T): void { + super.transformSpec(spec); + this.transformSeriesSpec(spec); + this._transformAxisSpec(spec); - // 将分类轴添加到轴列表中 - if (direction === 'vertical') { - // vertical: 时间轴在前，分类轴在后 - spec.axes = [spec.axes[0], categoryAxis]; - } else { - // horizontal: 时间轴在前，分类轴在后 - spec.axes = [spec.axes[0], categoryAxis]; - } - } + const direction = spec.direction ?? 'horizontal'; // 将 direction 传递给 series，并设置 xField/yField 以便轴系统收集数据 spec.series?.forEach(seriesSpec => { - if (!seriesSpec.direction) { - seriesSpec.direction = direction; - } - // 根据 direction 将 timeField 映射到 xField 或 yField // 这样轴系统才能正确收集数据 if (direction === 'vertical') { From 0e0b375b4f87d548d9085955506404864587d511 Mon Sep 17 00:00:00 2001 From: "lixuefei.1313" Date: Tue, 27 Jan 2026 20:06:17 +0800 Subject: [PATCH 11/27] feat: optimiz spec kit command --- .cursor/commands/speckit.changelog.md | 60 ++++++++++++----- .cursor/commands/speckit.commit.md | 75 ++++++++++++++++----- .cursor/commands/speckit.prgenerate.md | 91 ++++++++++++++++---------- 3 files changed, 160 insertions(+), 66 deletions(-) diff --git a/.cursor/commands/speckit.changelog.md b/.cursor/commands/speckit.changelog.md index 528928dae0..3df0d58908 100755 --- a/.cursor/commands/speckit.changelog.md +++ b/.cursor/commands/speckit.changelog.md @@ -1,5 +1,5 @@ --- -description: 'Generate Rush changes entries for VChart monorepo based on commits since base branch; infer bump type; aggregate messages.' +description: 'Generate Rush change entries for VChart monorepo using specs//plan.md as the only semantic source; infer bump type from the spec with zero-input defaults.' handoffs: - label: 'Commit Changes' agent: 'speckit.commit' @@ -15,21 +15,49 @@ $ARGUMENTS ## Outline -1. **Read Inputs**: - - `sinceBranch` (default: `develop`): The base branch for collecting commits. - - `bumpType` (default: `auto`): Explicit bump type (`patch`, `minor`, `major`). If `auto`, infer from commit messages. - - `message` (optional): A custom message to use for the changelog entry. +1. **Resolve feature spec from branch**: + - Treat this command as *zero/low-input*: if `$ARGUMENTS` is empty, infer everything from the current branch and `specs` directory. + - Derive the feature prefix from the current branch name (for example, `001-fix-bug` → prefix `001`) and locate the matching directory under `specs/` whose name starts with that prefix. + - From that directory, resolve: + - `plan.md` as the primary source of truth for the change description. + - `checklists/requirements.md` as an optional, secondary source when the plan lacks a clear summary. + - If no matching `specs//` can be found, return an error instead of guessing. -2. **Gather Context**: - - Collect commits and file changes between `sinceBranch` and `HEAD`. - - If `bumpType` is `auto`, analyze commit messages (`feat`, `fix`, `BREAKING CHANGE`) to determine the appropriate version bump. +2. **Extract Summary from specs-only context**: + - From `plan.md`, read the `## Summary` section and take the first non-empty line as the feature summary. + - If the `Summary` section is empty or missing, fall back in order to: + - The top-level title of `plan.md` (for example, `Implementation Plan: ...`). + - A concise line derived from `checklists/requirements.md`. + - The feature directory name or branch name. + - Normalize the final summary to a single line (strip markdown markers, collapse whitespace) without inventing new wording. -3. **Execute Rush Change**: - - The agent will run `rush change`, providing the determined bump type and an aggregated message. - - The message is constructed from the `message` input or summarized from commit history (and enriched with issue titles if `githubToken` is present). - - This action generates changelog files under `common/changes/`. +3. **Infer bump type (spec-driven)**: + - Default `bumpType` to `patch`. + - Scan the content of `plan.md` (case-insensitive) for explicit markers: + - If it contains `BREAKING CHANGE` or a clear `MAJOR` marker → use `major`. + - Else if it contains a clear `MINOR` marker → use `minor`. + - Else if it only contains `PATCH` or no marker at all → keep `patch`. + - If the user passes an explicit bump type argument, validate it against `patch | minor | major | none` and override the inferred value. `none` means "no version bump" while still allowing a change file to be written if Rush supports it. -4. **Report Outputs**: - - List the paths of the generated changelog files. - - Confirm the final message used. - - Verify that the generated message complies with Conventional Commits (`commitlint`) standards. +4. **Construct the Rush change message (no git history)**: + - Build a single-line message using the spec id and the inferred summary, for example: + - `update changes for : ` + - If the user provided an explicit message argument, prefer that over the inferred one. + - Do **not** analyze git commit history, file diffs, or `common/changes` contents when constructing this message; the only semantic source is `specs//`. + +5. **Execute Rush change (no push, no extra commits)**: + - From the repository root, call Rush in bulk mode, for example: + - `rush change --bulk --bump-type --message ""` + - This command is responsible only for generating or updating change files under `common/changes/`. + - It **must not**: + - Push any branch. + - Create additional commits. + - Modify documentation-only changelog files. + +6. **Report outputs (spec-centric)**: + - Echo the resolved values: + - Feature id / spec directory. + - Paths to `plan.md` and `requirements.md` used. + - The final `bumpType` and `message`. + - Optionally, list the `common/changes/*.json` files created or updated by this run (for example, by inspecting the directory or `git status`). + - Ensure the final message is compatible with the repository's `commitlint` conventions when reused downstream by `/speckit.commit`. diff --git a/.cursor/commands/speckit.commit.md b/.cursor/commands/speckit.commit.md index 8cef4d8460..47e3026865 100755 --- a/.cursor/commands/speckit.commit.md +++ b/.cursor/commands/speckit.commit.md @@ -1,5 +1,5 @@ --- -description: "Create an intelligent commit (Conventional Commits) bundling workspace changes; optionally push to origin." +description: "Create a local Conventional Commits-style commit using only specs//plan.md for semantics; do not push to origin." handoffs: - label: "Generate PR Body" agent: "speckit.prgenerate" @@ -15,21 +15,64 @@ $ARGUMENTS ## Outline -1. **Pre-flight Checks**: - * Verify the current branch and check if the working tree is dirty. - * If `commitAllowEmpty=false` (default) and there are no changes, the process will be skipped. +1. **Pre-flight checks (local-only)**: + * Treat this command as zero-input by default: if `$ARGUMENTS` is empty, it should still be able to run end-to-end. + * Verify the current branch name follows the feature convention (e.g. `001-some-feature`) so it can be mapped to a `specs//` directory. + * Confirm there are staged or unstaged changes in the working tree; if there are no changes, abort without creating a commit. + * Interpret any CLI flags only as behaviour toggles (e.g. `--edit`, `--no-verify`) and **not** as a manual commit message. -2. **Generate Commit Message**: - * **Priority 1**: Use the `message` argument if provided. - * **Priority 2**: If no message is provided, extract the subject from the latest entry in `common/changes/`. - * **Priority 3**: If neither is available, generate a generic subject like `chore: sync changes (N files)`. - * The commit type and scope are inferred from file paths and changelog entries. +2. **Load spec context from specs/**: + * Derive the feature prefix from the current branch name and resolve the matching `specs//` directory using prefix-based lookup (e.g. `001-` → `specs/001-...`). + * Read `specs//plan.md` and extract: + - The `## Summary` section — first non-empty line for the natural-language summary. + - The top-level title (e.g. `Implementation Plan: ...`) as a fallback description. + - The `### Source Code (repository root)` code block, which lists the source layout for this feature. -3. **Execute Git Actions**: - * The agent will run `git add --all` to stage all changes. - * It will then execute `git commit` with the generated message. - * If `pushAfterCommit=true` (default), it will push the commit to the remote origin. +3. **Infer `type` from Summary keywords**: + * Build a short text corpus from the Summary sentence and plan title. + * Using **only** that text, map the commit `type` according to the following rules (case-insensitive): + - Contains `bug` or `fix` → `fix` + - Contains `refactor` or `refactoring` → `refactor` + - Contains `perf` or `performance` → `perf` + - Contains `docs`, `doc`, or `documentation` → `docs` + - Contains `test`, `tests`, or `unit` → `test` + - Contains `implement`, `implementation`, `add`, `support`, or `feature` → `feat` + - Otherwise → `chore` + * Do **not** inspect file paths, git history, or `common/changes` when choosing the type. -4. **Report Outputs**: - * `commit_message`: The full commit message used. - * `pushed_branch`: The name of the branch that was pushed (if applicable). +4. **Infer `scope` from Source Code paths**: + * From the `Source Code (repository root)` block in `plan.md`, parse all paths that live under `packages//...`. + * Collect the second-level directory names (e.g. `packages/vchart/` → `vchart`, `packages/vchart-types/` → `vchart-types`), de-duplicate, and sort. + * Build the `scope` as: + - A comma-separated list of all such package names when one or more packages are present. + - The literal string `monorepo` when no `packages/*` paths can be found. + * Do not attempt to infer scope from other folders or git diffs. + +5. **Build a spec-driven `subject` (no AI rewriting)**: + * Take the first sentence from the Summary section of `plan.md` as the base subject (trim markdown, collapse whitespace). + * Enforce a minimum length of 16 characters: + - If the subject is too short, append structured identifiers such as the spec id and primary package names: + - Example: `Fix layout bug` → `Fix layout bug (spec 001-fix-subtitle-layout-bug; vchart)` + * Optionally truncate extremely long subjects to a reasonable maximum length (while keeping them readable). + * The subject must only be **reformatted** from the spec content; do not invent new semantics or free-form text. + +6. **Assemble and validate the commit header**: + * Compose the final header as: + - ``(): `` + e.g. `fix(vchart): Handle subtitle-only title layout` + * If the repository has `commitlint` configured, perform a dry-run check by piping the header into `commitlint` with the local config. + * If validation fails: + - First, clean up the header (e.g. strip non-ASCII control characters, compress spaces) and re-run the dry-run. + - If it still fails and the user requested edit mode (e.g. `--edit`), write the header into a temporary commit message file and proceed with an interactive `git commit -t ` so the user can adjust it manually. + - If edit mode is not enabled, surface a clear error and stop instead of guessing a new message. + +7. **Execute Git commit (no push)**: + * Run `git add -A` from the repository root to stage all changes. + * If edit mode is **not** required, execute `git commit -m "
"` with the validated header. + * If edit mode **is** required, execute `git commit -t ` so the user can refine the message in their editor. + * This command **must not** push to `origin` or any remote; pushing remains a separate, explicit action. + +8. **Report outputs**: + * Return the final commit header string used for `git commit`. + * Indicate whether commitlint validation passed on the first try or required cleanup/edit mode. + * Do not report any `pushed_branch` field, because this command never pushes. diff --git a/.cursor/commands/speckit.prgenerate.md b/.cursor/commands/speckit.prgenerate.md index eeb10ab13a..300fed6143 100755 --- a/.cursor/commands/speckit.prgenerate.md +++ b/.cursor/commands/speckit.prgenerate.md @@ -1,5 +1,5 @@ --- -description: 'Generate a well-formed PR body using repo template and local artifacts (changelog, auto-test report). Save to .trae/output/pr.body.local.md by default.' +description: 'Generate a PR body using the GitHub pull request template and specs//plan.md; default to the English template and write to specs//PR_BODY.md.' handoffs: - label: 'Create Pull Request' agent: 'speckit.prcreate' @@ -13,39 +13,62 @@ handoffs: $ARGUMENTS ``` -You **MUST** consider the user input before proceeding (if not empty). +You **MUST** consider the user input before proceeding (if not empty), but treat it only as CLI-style flags (for example, `--lang`, `--out`); the PR content itself must be inferred from the specs directory, not from free-form user text. ## Outline -1. **Determine Template and Context**: - - **Select Template**: - - Check user input for language preference (English or Chinese). - - If Chinese, use template at: `.github/PULL_REQUEST_TEMPLATE/pr_cn.md` - - If English or unspecified, use template at: `.github/PULL_REQUEST_TEMPLATE.md` - - **Infer Context**: - - Get current branch name using `git branch --show-current`. - - Get recent commit messages using `git log -5 --pretty=format:"%s"`. - - Infer PR type (feat, fix, docs, etc.) to verify the checklist items. - -2. **Populate Body Sections**: - - **Changelog**: - - Check `common/changes` directory for change files. - - If files exist, parse them to summarize changes for the `Changelog` section. - - If no files, mark as "N/A" or leave empty. - - **Self-test Summary**: - - Read report from `.trae/output/autotest.report.local.md`. - - If file exists, append summary to the body. - - If missing, add a placeholder indicating no automated test report. - - **Background/Solution**: - - Synthesize a description from commit messages and user input. - - Fill in the "Background and solution" section of the template. - -3. **Generate and Save**: - - **Generate Title**: Create a concise PR title following Conventional Commits (e.g., `feat: add new chart type`). - - **Preview**: Display the generated title and body content to the user for review. - - **Save**: Write the final content to `.trae/output/pr.body.local.md`. - - **Verify**: Check if the file `.trae/output/pr.body.local.md` was created successfully. - -4. **Validation Checklist**: - - Confirm the output file exists. - - Ask user to review the generated body in `.trae/output/pr.body.local.md`. +1. **Determine template and feature context (specs-only)**: + - Treat this command as zero-input by default: if `$ARGUMENTS` is empty, it still must be able to generate a useful PR body. + - Parse `$ARGUMENTS` only for CLI-style options (for example, `--lang`, `--out`): + - If `--lang zh` is present, use the Chinese template at `.github/PULL_REQUEST_TEMPLATE/pr_cn.md`. + - Otherwise, use the English template at `.github/PULL_REQUEST_TEMPLATE.md` (the default; **do not** auto-detect language). + - If an explicit output path is provided (for example, `--out specs/001-foo/PR_BODY.md`), respect it; otherwise, default to `specs//PR_BODY.md`. + - Resolve `specs//` by deriving the numeric prefix from the current branch name and matching it to a directory under `specs/` whose name starts with that prefix. + - From that directory, resolve `plan.md` as the primary context source for the PR. + +2. **Extract PR content from specs**: + - From `plan.md`, read the `## Summary` section and take the first non-empty line as the high-level description of the change. + - Read the `## Technical Context` section and remove any template-only comments, keeping only the concrete technical details. + - Combine these into a structured background text: + - When both are present: `Summary` paragraph followed by a blank line and the `Technical Context` content. + - When only Summary exists: use Summary alone. + - When neither exists: fall back to a short line like `Update for ` derived from the spec directory name. + - Optionally infer a coarse change type (`feat`, `fix`, `docs`, `perf`, `refactor`, `test`, `chore`) from the Summary/Technical Context using the same keyword mapping as `/speckit.commit`. + +3. **Apply type to the template checklist (no structural changes)**: + - Load the chosen PR template as raw markdown and preserve its structure, comments, and placeholders (including any `copilot:summary` markers). + - Locate the section headed `### 🤔 This is a ...` (English) or `### 🤔 这个分支是...` (Chinese). + - Within that section: + - Reset all checklist bullets to unchecked (`- [ ] ...`). + - Identify the line whose label best matches the inferred type (for example, `New feature`, `Bug fix`, `Site / documentation update`, etc.). + - Mark exactly that line as checked (`- [x] ...`). + - Do **not** add, remove, or reorder any checklist items. + +4. **Fill “Background and solution” from specs**: + - For the English template: + - Locate the `### 💡 Background and solution` heading. + - Keep any inline instructions or comments that live directly under the heading (for example, explanatory HTML comments). + - After those instructions, insert the combined background text built from Summary + Technical Context. + - For the Chinese template: + - Locate the `### 💡 问题的背景&解决方案` heading and apply the same approach. + - The inserted text should quote and lightly reformat the spec content but should not invent new requirements or implementation details. + +5. **Fill the Changelog table (English-only content)**: + - Locate the `### 📝 Changelog` section and the language table beneath it. + - Replace the `🇺🇸 English` row’s description cell with a concise English summary derived from the Summary sentence (trimmed to a reasonable length if necessary). + - Leave the `🇨🇳 Chinese` row untouched for the English template; for the Chinese template, you may mirror the same summary there or leave it as a placeholder, depending on the template’s expectations. + - Preserve all table headers, column layout, and any additional rows or comments around the table. + +6. **Write PR body file without touching templates**: + - Render the updated markdown content (with checklist, background, and Changelog injected) into a single PR body string. + - Write this string to the resolved output path (default `specs//PR_BODY.md`), creating parent directories if needed. + - Do **not** modify the original template files under `.github/`. + +7. **Validation checklist**: + - Confirm that the output PR body file exists and is non-empty. + - Verify that: + - The “This is a …” / “这个分支是...” section is still present and exactly one checkbox is selected. + - The “Background and solution” / “问题的背景&解决方案” section now references the feature in terms consistent with `plan.md`. + - The Changelog table still renders correctly and has an updated `🇺🇸 English` row. + - Any special placeholders (for example, `copilot:summary`) remain intact and in their original locations. + - Ensure that no content was sourced from git logs, `common/changes`, or `.trae/output`; all semantics must come from the `specs` directory and the chosen PR template. From 91490e6c714b7fca86d7c16727d6ddf82bff3e2a Mon Sep 17 00:00:00 2001 From: "lixuefei.1313" Date: Tue, 27 Jan 2026 20:19:43 +0800 Subject: [PATCH 12/27] feat: optimiz spec kit command --- .cursor/commands/speckit.prgenerate.md | 1 + 1 file changed, 1 insertion(+) diff --git a/.cursor/commands/speckit.prgenerate.md b/.cursor/commands/speckit.prgenerate.md index 300fed6143..5bd34b0114 100755 --- a/.cursor/commands/speckit.prgenerate.md +++ b/.cursor/commands/speckit.prgenerate.md @@ -66,6 +66,7 @@ You **MUST** consider the user input before proceeding (if not empty), but treat 7. **Validation checklist**: - Confirm that the output PR body file exists and is non-empty. + - Confirm that the output PR body file maintains the integrity of the template content, with no additional or deleted part. - Verify that: - The “This is a …” / “这个分支是...” section is still present and exactly one checkbox is selected. - The “Background and solution” / “问题的背景&解决方案” section now references the feature in terms consistent with `plan.md`. From d3af522496f98afef02093e900ed01d4544898de Mon Sep 17 00:00:00 2001 From: "lixuefei.1313" Date: Mon, 2 Feb 2026 11:43:56 +0800 Subject: [PATCH 13/27] feat: optimiz spec kit command --- .cursor/commands/speckit.aftercode.md | 67 +++++++++++++++++++++++++++ .cursor/commands/speckit.auto.md | 67 +++++++++++++++++++++++++++ 2 files changed, 134 insertions(+) create mode 100644 .cursor/commands/speckit.aftercode.md create mode 100644 .cursor/commands/speckit.auto.md diff --git a/.cursor/commands/speckit.aftercode.md b/.cursor/commands/speckit.aftercode.md new file mode 100644 index 0000000000..75f3204eec --- /dev/null +++ b/.cursor/commands/speckit.aftercode.md @@ -0,0 +1,67 @@ +--- +description: "Automatically execute the subsequent code delivery pipeline: changelog → commit → prgenerate, in strict sequential order." +handoffs: + - agent: speckit.changelog + label: "Phase 1: Generate Changelog" + send: true + prompt: "Generate Rush changes since the `develop` branch. Infer bump type automatically (`auto`). If `$ARGUMENTS` are provided, they will be used to override defaults (e.g., `bumpType=patch`). Output the list of created files in `common/changes/`." + - agent: speckit.commit + label: "Phase 2: Create Commit" + send: true + prompt: "Create a Conventional Commits-compliant commit and push to the origin. If `$ARGUMENTS` are provided, they will be used to override defaults (e.g., `message='docs: update readme'` or `pushAfterCommit=false`)." +--- + +## User Input + +```text +$ARGUMENTS +``` + +## Outline + +This command orchestrates the code delivery pipeline, executing the `changelog`, `commit`, and `prgenerate` phases in a strict, sequential, and non-interactive flow. It ensures that the entire process, from generating change files to preparing the PR body, is automated while maintaining the precise behavior of each individual step. + +**Execution is strictly sequential. No steps will be skipped or run in parallel.** + +### Phase 1: Generate Changelog (`/speckit.changelog`) + +- **Action**: Initiates the delivery pipeline by invoking `/speckit.changelog`. +- **Process**: + - Collects commits since a base branch (defaulting to `develop`). + - Infers the version bump type (`patch`, `minor`, `major`) automatically from commit messages unless an explicit `bumpType` is passed in `$ARGUMENTS`. + - Generates the necessary change files within the `common/changes/` directory. + - Any parameters provided in `$ARGUMENTS` will be passed through to override default behavior. +- **Handoff**: Upon successful completion, automatically triggers the `commit` phase. +- **Output Report**: + - "Phase 1 (Changelog) completed." + - `CREATED_FILES`: [List of paths to generated files in `common/changes/`] + - `VALIDATION`: "Changelog message conforms to Conventional Commits standards." + +### Phase 2: Create Commit (`/speckit.commit`) + +- **Action**: Triggered automatically after `changelog` completes. +- **Process**: + - Stages all current workspace changes (`git add --all`). + - Generates a Conventional Commits-compliant commit message, prioritizing `$ARGUMENTS`, then `common/changes/` content, and finally a generic message. + - Executes `git commit`. + - Pushes the commit to the remote origin by default. + - The `message` and `pushAfterCommit` behaviors can be overridden via `$ARGUMENTS`. +- **Handoff**: Upon successful completion, automatically triggers the `prgenerate` phase. +- **Output Report**: + - "Phase 2 (Commit) completed." + - `COMMIT_MESSAGE`: [The full commit message used] + - `PUSH_STATUS`: "Branch [branch-name] pushed to origin." + +### Phase 3: Generate PR Body (`/speckit.prgenerate`) + +- **Action**: The final phase, realized via the native `handoff` from `/speckit.commit` to `/speckit.prgenerate` after `commit` completes. This `/speckit.aftercode` command does not declare its own `handoff` entry for `/speckit.prgenerate` to avoid duplicate execution. +- **Process**: + - Selects the appropriate PR template (`.github/PULL_REQUEST_TEMPLATE/pr_cn.md` or `.github/PULL_REQUEST_TEMPLATE.md`), defaulting to Chinese unless specified in `$ARGUMENTS`. + - Populates the template with content from `common/changes/`, commit history, and any other available artifacts. + - Saves the final, populated PR body to `.trae/output/pr.body.local.md`. +- **Handoff**: This step retains its original `handoff` to `speckit.prcreate`. The `/speckit.aftercode` command depends strictly on the original single-step handoff chain and does **not** introduce any additional handoffs, preventing `prgenerate` (or downstream steps) from running more than once. +- **Output Report**: + - "Phase 3 (PR Generate) completed." + - `OUTPUT_FILE`: ".trae/output/pr.body.local.md" + - `VALIDATION_SUMMARY`: "PR body generated. Please review the file before creating the pull request." + - `NEXT_STEPS`: "The `speckit.prcreate` command may have been triggered automatically. If not, you can run it manually to create the GitHub Pull Request." diff --git a/.cursor/commands/speckit.auto.md b/.cursor/commands/speckit.auto.md new file mode 100644 index 0000000000..bdd75104f7 --- /dev/null +++ b/.cursor/commands/speckit.auto.md @@ -0,0 +1,67 @@ +--- +description: Automatically execute the four core phases of the Spec-Driven Development (SDD) pipeline: specify → plan → tasks → implement, in strict sequential order. +handoffs: + - label: Generate Changelog + agent: speckit.changelog + prompt: Generate Rush changes entries from current work + send: true +--- + +## User Input + +```text +$ARGUMENTS +``` + +## Outline + +This command orchestrates the full Spec-Driven Development (SDD) lifecycle, executing each of the four core phases in a strict, sequential, and non-interactive manner. It ensures that each phase completes before the next one begins, mirroring the exact semantics of executing each `/speckit.*` command individually. + +**Execution is strictly sequential. Parallel execution of phases is prohibited.** + +### Pre-flight Check + +1. **Validate User Input**: + - If `$ARGUMENTS` is empty, the process will halt with an error. The initial feature description is mandatory to start the `specify` phase. + +### Phase 1: Specify (`/speckit.specify`) + +- **Action**: The workflow begins by invoking `/speckit.specify` with the provided `$ARGUMENTS`. This is the single entry point for user input. +- **Process**: This phase will automatically generate a feature branch, create the `spec.md` file, and run all associated validation and checklist generation steps as defined in the `speckit.specify` command. +- **Handoff**: Upon successful completion, it will automatically trigger the `plan` phase. +- **Output Report**: + - "Phase 1 (Specify) completed." + - `BRANCH_NAME`: [The generated feature branch name] + - `SPEC_FILE`: [Path to the generated spec.md file] + +### Phase 2: Plan (`/speckit.plan`) + +- **Action**: Triggered automatically after `specify` completes. It requires no additional arguments and operates on the context established by the previous phase. +- **Process**: This phase will generate the `plan.md` and all its associated design artifacts (e.g., `research.md`, `data-model.md`, `contracts/`). It strictly follows the "Phase 0" and "Phase 1" steps outlined in the `speckit.plan` command. +- **Handoff**: Upon successful completion, it will automatically trigger the `tasks` phase. +- **Output Report**: + - "Phase 2 (Plan) completed." + - `IMPL_PLAN`: [Path to the generated plan.md file] + - `DERIVED_ARTIFACTS`: [List of paths to other generated files like research.md] + +### Phase 3: Tasks (`/speckit.tasks`) + +- **Action**: Triggered automatically after `plan` completes. +- **Process**: This phase reads the `plan.md` and other design documents to generate a detailed, actionable `tasks.md` file, organizing work into phases based on user stories. The command name `speckit.tasks` is used to align with VChart's existing commands. +- **Handoff**: Upon successful completion, rely on the native `handoffs` of `/speckit.tasks` to automatically trigger `/speckit.implement`; `/speckit.auto` MUST NOT trigger `/speckit.implement` directly to avoid duplicate execution. +- **Output Report**: + - "Phase 3 (Tasks) completed." + - `TASKS_FILE`: [Path to the generated tasks.md file] + - `SUMMARY`: [Total task count and parallel opportunities] + +### Phase 4: Implement (`/speckit.implement`) + +- **Action**: This phase corresponds to the `/speckit.implement` run that is started by the native `handoff` from `/speckit.tasks`. `/speckit.auto` MUST NOT start a separate `/speckit.implement` execution. +- **Process**: Continue (or observe) the implementation based on `tasks.md`, strictly following all rules of the original `speckit.implement` command, including the checklist gate behavior (ask for explicit confirmation before proceeding when checklists are incomplete). If `/speckit.implement` has already finished, do **not** re-run it; only summarize its results. +- **Completion**: The `auto` workflow conceptually ends after the implementation phase has completed. The subsequent `aftercode` pipeline must be initiated manually. +- **Output Report**: + - "Phase 4 (Implement) completed." + - `STATUS`: [Summary of task execution, e.g., "All tasks completed successfully."] + - `NEXT_STEPS`: "Ready to proceed with the code delivery pipeline. Run `/speckit.aftercode` to continue." + +**Note**: If any downstream phase (for example `tasks` or `implement`) has already been completed via the native handoff chain of the upstream commands, do not invoke it again. Simply acknowledge its completion and record the relevant outputs before moving on. From 06aaa3acec19cbfa5ff392681a7cb8102f04aee4 Mon Sep 17 00:00:00 2001 From: "lixuefei.1313" Date: Mon, 2 Feb 2026 16:03:17 +0800 Subject: [PATCH 14/27] feat: optimiz spec kit command --- .cursor/commands/speckit.aftercode.md | 80 +++++++++++++-------------- .cursor/commands/speckit.auto.md | 6 +- 2 files changed, 41 insertions(+), 45 deletions(-) diff --git a/.cursor/commands/speckit.aftercode.md b/.cursor/commands/speckit.aftercode.md index 75f3204eec..f1db46544b 100644 --- a/.cursor/commands/speckit.aftercode.md +++ b/.cursor/commands/speckit.aftercode.md @@ -1,14 +1,10 @@ --- -description: "Automatically execute the subsequent code delivery pipeline: changelog → commit → prgenerate, in strict sequential order." +description: 'Automatically execute the subsequent code delivery pipeline: changelog → commit → prgenerate, in strict sequential order.' handoffs: - - agent: speckit.changelog - label: "Phase 1: Generate Changelog" + - label: 'Create Pull Request' + agent: 'speckit.prcreate' + prompt: 'Create the GitHub Pull Request using the generated body' send: true - prompt: "Generate Rush changes since the `develop` branch. Infer bump type automatically (`auto`). If `$ARGUMENTS` are provided, they will be used to override defaults (e.g., `bumpType=patch`). Output the list of created files in `common/changes/`." - - agent: speckit.commit - label: "Phase 2: Create Commit" - send: true - prompt: "Create a Conventional Commits-compliant commit and push to the origin. If `$ARGUMENTS` are provided, they will be used to override defaults (e.g., `message='docs: update readme'` or `pushAfterCommit=false`)." --- ## User Input @@ -25,43 +21,43 @@ This command orchestrates the code delivery pipeline, executing the `changelog`, ### Phase 1: Generate Changelog (`/speckit.changelog`) -- **Action**: Initiates the delivery pipeline by invoking `/speckit.changelog`. -- **Process**: - - Collects commits since a base branch (defaulting to `develop`). - - Infers the version bump type (`patch`, `minor`, `major`) automatically from commit messages unless an explicit `bumpType` is passed in `$ARGUMENTS`. - - Generates the necessary change files within the `common/changes/` directory. - - Any parameters provided in `$ARGUMENTS` will be passed through to override default behavior. -- **Handoff**: Upon successful completion, automatically triggers the `commit` phase. -- **Output Report**: - - "Phase 1 (Changelog) completed." - - `CREATED_FILES`: [List of paths to generated files in `common/changes/`] - - `VALIDATION`: "Changelog message conforms to Conventional Commits standards." +- **Action**: Initiates the delivery pipeline by invoking `/speckit.changelog`. +- **Process**: + - Collects commits since a base branch (defaulting to `develop`). + - Infers the version bump type (`patch`, `minor`, `major`) automatically from commit messages unless an explicit `bumpType` is passed in `$ARGUMENTS`. + - Generates the necessary change files within the `common/changes/` directory. + - Any parameters provided in `$ARGUMENTS` will be passed through to override default behavior. +- **Handoff**: Upon successful completion, automatically triggers the `commit` phase. +- **Output Report**: + - "Phase 1 (Changelog) completed." + - `CREATED_FILES`: [List of paths to generated files in `common/changes/`] + - `VALIDATION`: "Changelog message conforms to Conventional Commits standards." ### Phase 2: Create Commit (`/speckit.commit`) -- **Action**: Triggered automatically after `changelog` completes. -- **Process**: - - Stages all current workspace changes (`git add --all`). - - Generates a Conventional Commits-compliant commit message, prioritizing `$ARGUMENTS`, then `common/changes/` content, and finally a generic message. - - Executes `git commit`. - - Pushes the commit to the remote origin by default. - - The `message` and `pushAfterCommit` behaviors can be overridden via `$ARGUMENTS`. -- **Handoff**: Upon successful completion, automatically triggers the `prgenerate` phase. -- **Output Report**: - - "Phase 2 (Commit) completed." - - `COMMIT_MESSAGE`: [The full commit message used] - - `PUSH_STATUS`: "Branch [branch-name] pushed to origin." +- **Action**: Triggered automatically after `changelog` completes. +- **Process**: + - Stages all current workspace changes (`git add --all`). + - Generates a Conventional Commits-compliant commit message, prioritizing `$ARGUMENTS`, then `common/changes/` content, and finally a generic message. + - Executes `git commit`. + - Pushes the commit to the remote origin by default. + - The `message` and `pushAfterCommit` behaviors can be overridden via `$ARGUMENTS`. +- **Handoff**: Upon successful completion, automatically triggers the `prgenerate` phase. +- **Output Report**: + - "Phase 2 (Commit) completed." + - `COMMIT_MESSAGE`: [The full commit message used] + - `PUSH_STATUS`: "Branch [branch-name] pushed to origin." ### Phase 3: Generate PR Body (`/speckit.prgenerate`) -- **Action**: The final phase, realized via the native `handoff` from `/speckit.commit` to `/speckit.prgenerate` after `commit` completes. This `/speckit.aftercode` command does not declare its own `handoff` entry for `/speckit.prgenerate` to avoid duplicate execution. -- **Process**: - - Selects the appropriate PR template (`.github/PULL_REQUEST_TEMPLATE/pr_cn.md` or `.github/PULL_REQUEST_TEMPLATE.md`), defaulting to Chinese unless specified in `$ARGUMENTS`. - - Populates the template with content from `common/changes/`, commit history, and any other available artifacts. - - Saves the final, populated PR body to `.trae/output/pr.body.local.md`. -- **Handoff**: This step retains its original `handoff` to `speckit.prcreate`. The `/speckit.aftercode` command depends strictly on the original single-step handoff chain and does **not** introduce any additional handoffs, preventing `prgenerate` (or downstream steps) from running more than once. -- **Output Report**: - - "Phase 3 (PR Generate) completed." - - `OUTPUT_FILE`: ".trae/output/pr.body.local.md" - - `VALIDATION_SUMMARY`: "PR body generated. Please review the file before creating the pull request." - - `NEXT_STEPS`: "The `speckit.prcreate` command may have been triggered automatically. If not, you can run it manually to create the GitHub Pull Request." +- **Action**: The final phase, realized via the native `handoff` from `/speckit.commit` to `/speckit.prgenerate` after `commit` completes. This `/speckit.aftercode` command does not declare its own `handoff` entry for `/speckit.prgenerate` to avoid duplicate execution. +- **Process**: + - Selects the appropriate PR template (`.github/PULL_REQUEST_TEMPLATE/pr_cn.md` or `.github/PULL_REQUEST_TEMPLATE.md`), defaulting to Chinese unless specified in `$ARGUMENTS`. + - Populates the template with content from `common/changes/`, commit history, and any other available artifacts. + - Saves the final, populated PR body to `.trae/output/pr.body.local.md`. +- **Handoff**: This step retains its original `handoff` to `speckit.prcreate`. The `/speckit.aftercode` command depends strictly on the original single-step handoff chain and does **not** introduce any additional handoffs, preventing `prgenerate` (or downstream steps) from running more than once. +- **Output Report**: + - "Phase 3 (PR Generate) completed." + - `OUTPUT_FILE`: ".trae/output/pr.body.local.md" + - `VALIDATION_SUMMARY`: "PR body generated. Please review the file before creating the pull request." + - `NEXT_STEPS`: "The `speckit.prcreate` command may have been triggered automatically. If not, you can run it manually to create the GitHub Pull Request." diff --git a/.cursor/commands/speckit.auto.md b/.cursor/commands/speckit.auto.md index bdd75104f7..201ae01afd 100644 --- a/.cursor/commands/speckit.auto.md +++ b/.cursor/commands/speckit.auto.md @@ -1,9 +1,9 @@ --- description: Automatically execute the four core phases of the Spec-Driven Development (SDD) pipeline: specify → plan → tasks → implement, in strict sequential order. handoffs: - - label: Generate Changelog - agent: speckit.changelog - prompt: Generate Rush changes entries from current work + - label: Execute After-Code Pipeline + agent: speckit.aftercode + prompt: Execute the after-code pipeline. send: true --- From 589cde0a045eb97c02ec34047b852671fa727199 Mon Sep 17 00:00:00 2001 From: xile611 Date: Thu, 5 Feb 2026 17:15:13 +0800 Subject: [PATCH 15/27] chore: update gitignore --- .gitignore | 1 + 1 file changed, 1 insertion(+) diff --git a/.gitignore b/.gitignore index db6b97fad2..f025af13fc 100644 --- a/.gitignore +++ b/.gitignore @@ -134,3 +134,4 @@ packages/vchart/__tests__/runtime/node/**.png .env.local *.tsbuildinfo +.github/hooks/copilot-hooks.json From 0241ad3b41f6508532871c1308e5b5be2612b227 Mon Sep 17 00:00:00 2001 From: xile611 Date: Thu, 5 Feb 2026 18:06:31 +0800 Subject: [PATCH 16/27] feat: add skills --- skills/vchart-development-skill/SKILL.md | 298 ++++ .../references/FILE_NAMING_CONVENTIONS.md | 353 +++++ .../references/SCRIPTS_TROUBLESHOOTING.md | 480 +++++++ .../references/SCRIPT_PARAMS_REFERENCE.md | 350 +++++ .../references/chart/chart-type-guide.md | 151 ++ .../references/chart/common-issues.md | 367 +++++ .../references/components/axis.md | 306 ++++ .../references/components/crosshair.md | 344 +++++ .../references/components/dataZoom.md | 328 +++++ .../references/components/label.md | 329 +++++ .../references/components/legend.md | 371 +++++ .../references/components/mark.md | 440 ++++++ .../references/components/title.md | 242 ++++ .../references/components/tooltip.md | 355 +++++ .../references/examples/area/basic-area.md | 223 +++ .../references/examples/bar/basic-bar.md | 152 ++ .../references/examples/bar/grouped-bar.md | 115 ++ .../references/examples/bar/stacked-bar.md | 172 +++ .../examples/combination/dual-axis.md | 289 ++++ .../examples/funnel/basic-funnel.md | 235 ++++ .../references/examples/gauge/basic-gauge.md | 285 ++++ .../references/examples/line/basic-line.md | 202 +++ .../references/examples/pie/basic-pie.md | 219 +++ .../references/examples/radar/basic-radar.md | 233 ++++ .../examples/scatter/basic-scatter.md | 192 +++ .../references/topkey/all_common.json | 122 ++ .../references/topkey/area.json | 206 +++ .../references/topkey/bar.json | 210 +++ .../references/topkey/bar3d.json | 206 +++ .../references/topkey/boxPlot.json | 190 +++ .../references/topkey/circlePacking.json | 130 ++ .../references/topkey/circularProgress.json | 172 +++ .../references/topkey/common.json | 66 + .../references/topkey/correlation.json | 172 +++ .../references/topkey/funnel.json | 170 +++ .../references/topkey/funnel3d.json | 170 +++ .../references/topkey/gauge.json | 188 +++ .../references/topkey/heatmap.json | 174 +++ .../references/topkey/histogram.json | 206 +++ .../references/topkey/histogram3d.json | 206 +++ .../references/topkey/line.json | 202 +++ .../references/topkey/linearProgress.json | 130 ++ .../references/topkey/liquid.json | 86 ++ .../references/topkey/map.json | 142 ++ .../references/topkey/mosaic.json | 205 +++ .../references/topkey/pie.json | 191 +++ .../references/topkey/pie3d.json | 194 +++ .../references/topkey/radar.json | 207 +++ .../references/topkey/rangeArea.json | 213 +++ .../references/topkey/rangeColumn.json | 213 +++ .../references/topkey/rangeColumn3d.json | 213 +++ .../references/topkey/rose.json | 163 +++ .../references/topkey/sankey.json | 213 +++ .../references/topkey/scatter.json | 181 +++ .../references/topkey/sequence.json | 18 + .../references/topkey/sunburst.json | 170 +++ .../references/topkey/treemap.json | 178 +++ .../references/topkey/venn.json | 126 ++ .../references/topkey/waterfall.json | 218 +++ .../references/topkey/wordCloud.json | 178 +++ .../references/topkey/wordCloud3d.json | 184 +++ .../FunctionType-Type-Definition.md | 178 +++ .../GeometricMaskShape-Type-Definition.md | 146 ++ .../IAnimationConfig-Type-Definition.md | 343 +++++ .../IArcLabelSpec-Type-Definition.md | 467 +++++++ .../IArcMarkSpec-Type-Definition.md | 211 +++ .../IAreaMarkSpec-Type-Definition.md | 277 ++++ .../IBackgroundSpec-Type-Definition.md | 360 +++++ .../IBoxPlotMarkSpec-Type-Definition.md | 223 +++ .../IBrushSpec-Type-Definition.md | 232 ++++ .../ICartesianAxisSpec-Type-Definition.md | 405 ++++++ ...ICartesianCrosshairSpec-Type-Definition.md | 543 ++++++++ .../ICellMarkSpec-Type-Definition.md | 275 ++++ .../ICustomMarkSpec-Type-Definition.md | 364 +++++ .../type-details/IData-Type-Definition.md | 263 ++++ .../IDataZoomSpec-Type-Definition.md | 401 ++++++ ...IExtensionGroupMarkSpec-Type-Definition.md | 724 ++++++++++ .../IExtensionMarkSpec-Type-Definition.md | 214 +++ .../IFunnelLabelSpec-Type-Definition.md | 631 +++++++++ .../IFunnelOuterLabelSpec-Type-Definition.md | 268 ++++ .../IGroupMarkSpec-Type-Definition.md | 183 +++ .../IHierarchyData-Type-Definition.md | 305 ++++ .../IHoverSpec-Type-Definition.md | 296 ++++ .../IImageMarkSpec-Type-Definition.md | 193 +++ .../IIndicatorSpec-Type-Definition.md | 743 ++++++++++ .../IInteractionItemSpec-Type-Definition.md | 427 ++++++ .../ILabelSpec-Type-Definition.md | 350 +++++ .../ILayoutPaddingSpec-Type-Definition.md | 214 +++ .../ILayoutSpec-Type-Definition.md | 514 +++++++ .../ILegendSpec-Type-Definition.md | 545 ++++++++ .../ILineLikeLabelSpec-Type-Definition.md | 297 ++++ .../ILineMarkSpec-Type-Definition.md | 302 ++++ .../ILinearAxisSpec-Type-Definition.md | 83 ++ .../ILinkPathMarkSpec-Type-Definition.md | 293 ++++ .../ILiquidMarkSpec-Type-Definition.md | 168 +++ .../ILiquidOutlineSpec-Type-Definition.md | 254 ++++ .../IMarkAreaSpec-Type-Definition.md | 357 +++++ .../IMarkLineSpec-Type-Definition.md | 384 ++++++ .../IMarkPointSpec-Type-Definition.md | 206 +++ .../type-details/IMarkSpec-Type-Definition.md | 367 +++++ .../IMediaQuerySpec-Type-Definition.md | 367 +++++ .../IMultiLabelSpec-Type-Definition.md | 188 +++ .../IOutlierMarkSpec-Type-Definition.md | 9 + .../type-details/IPadding-Type-Definition.md | 20 + .../IPathMarkSpec-Type-Definition.md | 241 ++++ .../type-details/IPercent-Type-Definition.md | 3 + .../type-details/IPlayer-Type-Definition.md | 481 +++++++ .../IPolarAxisSpec-Type-Definition.md | 467 +++++++ .../IPolarCrosshairSpec-Type-Definition.md | 388 ++++++ .../IPolygonMarkSpec-Type-Definition.md | 190 +++ .../IRectMarkSpec-Type-Definition.md | 242 ++++ .../IRippleMarkSpec-Type-Definition.md | 153 ++ .../IRuleMarkSpec-Type-Definition.md | 473 +++++++ .../ISankeyLabelSpec-Type-Definition.md | 379 +++++ .../IScrollBarSpec-Type-Definition.md | 382 +++++ .../ISelectSpec-Type-Definition.md | 321 +++++ .../ISeriesSpec-Type-Definition.md | 368 +++++ .../ISeriesStyle-Type-Definition.md | 429 ++++++ ...ackCornerRadiusCallback-Type-Definition.md | 302 ++++ .../ISymbolMarkSpec-Type-Definition.md | 266 ++++ .../ITextMarkSpec-Type-Definition.md | 323 +++++ .../type-details/ITheme-Type-Definition.md | 462 +++++++ .../ITitleSpec-Type-Definition.md | 382 +++++ .../ITooltipSpec-Type-Definition.md | 594 ++++++++ .../ITotalLabelSpec-Type-Definition.md | 332 +++++ .../IVisualSpecBase-Type-Definition.md | 307 +++++ .../IVisualSpecScale-Type-Definition.md | 91 ++ .../IWaterfallTotalCustom-Type-Definition.md | 12 + .../IWaterfallTotalEnd-Type-Definition.md | 8 + .../IWaterfallTotalField-Type-Definition.md | 16 + .../LiquidShapeType-Type-Definition.md | 22 + .../RegionSpec-Type-Definition.md | 282 ++++ .../type-details/ShapeType-Type-Definition.md | 46 + .../SunburstLabelConfig-Type-Definition.md | 21 + .../TextShapeMask-Type-Definition.md | 22 + .../WordCloudConfigType-Type-Definition.md | 67 + ...ordCloudShapeConfigType-Type-Definition.md | 58 + .../WordCloudShapeType-Type-Definition.md | 26 + .../references/type-meta/area.json | 1209 ++++++++++++++++ .../references/type-meta/bar.json | 1225 +++++++++++++++++ .../references/type-meta/boxPlot.json | 830 +++++++++++ .../references/type-meta/circlePacking.json | 963 +++++++++++++ .../type-meta/circularProgress.json | 1153 ++++++++++++++++ .../references/type-meta/common.json | 770 +++++++++++ .../references/type-meta/correlation.json | 772 +++++++++++ .../references/type-meta/funnel.json | 1076 +++++++++++++++ .../references/type-meta/gauge.json | 1180 ++++++++++++++++ .../references/type-meta/heatmap.json | 1108 +++++++++++++++ .../references/type-meta/histogram.json | 1185 ++++++++++++++++ .../references/type-meta/line.json | 1201 ++++++++++++++++ .../references/type-meta/linearProgress.json | 1032 ++++++++++++++ .../references/type-meta/liquid.json | 826 +++++++++++ .../references/type-meta/map.json | 992 +++++++++++++ .../references/type-meta/mosaic.json | 666 +++++++++ .../references/type-meta/pictogram.json | 522 +++++++ .../references/type-meta/pie.json | 1133 +++++++++++++++ .../references/type-meta/radar.json | 801 +++++++++++ .../references/type-meta/rangeArea.json | 663 +++++++++ .../references/type-meta/rangeColumn.json | 753 ++++++++++ .../references/type-meta/rose.json | 732 ++++++++++ .../references/type-meta/sankey.json | 923 +++++++++++++ .../references/type-meta/scatter.json | 1158 ++++++++++++++++ .../references/type-meta/sequence.json | 597 ++++++++ .../references/type-meta/sunburst.json | 795 +++++++++++ .../references/type-meta/treemap.json | 818 +++++++++++ .../references/type-meta/venn.json | 962 +++++++++++++ .../references/type-meta/waterfall.json | 798 +++++++++++ .../references/type-meta/wordCloud.json | 1167 ++++++++++++++++ .../workflows/scenario-1-diagnosis.md | 236 ++++ .../references/workflows/scenario-1-react.md | 603 ++++++++ .../workflows/scenario-2-generation.md | 343 +++++ .../workflows/scenario-3-image-replication.md | 423 ++++++ .../scripts/generate_demo_html.py | 84 ++ .../scripts/generate_diagnosis_html.py | 98 ++ .../scripts/generate_diagnosis_react_html.py | 173 +++ .../workflows/scenario-1-diagnosis.md | 268 ++++ .../workflows/scenario-1-react.md | 806 +++++++++++ .../workflows/scenario-2-generation.md | 354 +++++ .../workflows/scenario-3-image-replication.md | 526 +++++++ 179 files changed, 66914 insertions(+) create mode 100644 skills/vchart-development-skill/SKILL.md create mode 100644 skills/vchart-development-skill/references/FILE_NAMING_CONVENTIONS.md create mode 100644 skills/vchart-development-skill/references/SCRIPTS_TROUBLESHOOTING.md create mode 100644 skills/vchart-development-skill/references/SCRIPT_PARAMS_REFERENCE.md create mode 100644 skills/vchart-development-skill/references/chart/chart-type-guide.md create mode 100644 skills/vchart-development-skill/references/chart/common-issues.md create mode 100644 skills/vchart-development-skill/references/components/axis.md create mode 100644 skills/vchart-development-skill/references/components/crosshair.md create mode 100644 skills/vchart-development-skill/references/components/dataZoom.md create mode 100644 skills/vchart-development-skill/references/components/label.md create mode 100644 skills/vchart-development-skill/references/components/legend.md create mode 100644 skills/vchart-development-skill/references/components/mark.md create mode 100644 skills/vchart-development-skill/references/components/title.md create mode 100644 skills/vchart-development-skill/references/components/tooltip.md create mode 100644 skills/vchart-development-skill/references/examples/area/basic-area.md create mode 100644 skills/vchart-development-skill/references/examples/bar/basic-bar.md create mode 100644 skills/vchart-development-skill/references/examples/bar/grouped-bar.md create mode 100644 skills/vchart-development-skill/references/examples/bar/stacked-bar.md create mode 100644 skills/vchart-development-skill/references/examples/combination/dual-axis.md create mode 100644 skills/vchart-development-skill/references/examples/funnel/basic-funnel.md create mode 100644 skills/vchart-development-skill/references/examples/gauge/basic-gauge.md create mode 100644 skills/vchart-development-skill/references/examples/line/basic-line.md create mode 100644 skills/vchart-development-skill/references/examples/pie/basic-pie.md create mode 100644 skills/vchart-development-skill/references/examples/radar/basic-radar.md create mode 100644 skills/vchart-development-skill/references/examples/scatter/basic-scatter.md create mode 100644 skills/vchart-development-skill/references/topkey/all_common.json create mode 100644 skills/vchart-development-skill/references/topkey/area.json create mode 100644 skills/vchart-development-skill/references/topkey/bar.json create mode 100644 skills/vchart-development-skill/references/topkey/bar3d.json create mode 100644 skills/vchart-development-skill/references/topkey/boxPlot.json create mode 100644 skills/vchart-development-skill/references/topkey/circlePacking.json create mode 100644 skills/vchart-development-skill/references/topkey/circularProgress.json create mode 100644 skills/vchart-development-skill/references/topkey/common.json create mode 100644 skills/vchart-development-skill/references/topkey/correlation.json create mode 100644 skills/vchart-development-skill/references/topkey/funnel.json create mode 100644 skills/vchart-development-skill/references/topkey/funnel3d.json create mode 100644 skills/vchart-development-skill/references/topkey/gauge.json create mode 100644 skills/vchart-development-skill/references/topkey/heatmap.json create mode 100644 skills/vchart-development-skill/references/topkey/histogram.json create mode 100644 skills/vchart-development-skill/references/topkey/histogram3d.json create mode 100644 skills/vchart-development-skill/references/topkey/line.json create mode 100644 skills/vchart-development-skill/references/topkey/linearProgress.json create mode 100644 skills/vchart-development-skill/references/topkey/liquid.json create mode 100644 skills/vchart-development-skill/references/topkey/map.json create mode 100644 skills/vchart-development-skill/references/topkey/mosaic.json create mode 100644 skills/vchart-development-skill/references/topkey/pie.json create mode 100644 skills/vchart-development-skill/references/topkey/pie3d.json create mode 100644 skills/vchart-development-skill/references/topkey/radar.json create mode 100644 skills/vchart-development-skill/references/topkey/rangeArea.json create mode 100644 skills/vchart-development-skill/references/topkey/rangeColumn.json create mode 100644 skills/vchart-development-skill/references/topkey/rangeColumn3d.json create mode 100644 skills/vchart-development-skill/references/topkey/rose.json create mode 100644 skills/vchart-development-skill/references/topkey/sankey.json create mode 100644 skills/vchart-development-skill/references/topkey/scatter.json create mode 100644 skills/vchart-development-skill/references/topkey/sequence.json create mode 100644 skills/vchart-development-skill/references/topkey/sunburst.json create mode 100644 skills/vchart-development-skill/references/topkey/treemap.json create mode 100644 skills/vchart-development-skill/references/topkey/venn.json create mode 100644 skills/vchart-development-skill/references/topkey/waterfall.json create mode 100644 skills/vchart-development-skill/references/topkey/wordCloud.json create mode 100644 skills/vchart-development-skill/references/topkey/wordCloud3d.json create mode 100644 skills/vchart-development-skill/references/type-details/FunctionType-Type-Definition.md create mode 100644 skills/vchart-development-skill/references/type-details/GeometricMaskShape-Type-Definition.md create mode 100644 skills/vchart-development-skill/references/type-details/IAnimationConfig-Type-Definition.md create mode 100644 skills/vchart-development-skill/references/type-details/IArcLabelSpec-Type-Definition.md create mode 100644 skills/vchart-development-skill/references/type-details/IArcMarkSpec-Type-Definition.md create mode 100644 skills/vchart-development-skill/references/type-details/IAreaMarkSpec-Type-Definition.md create mode 100644 skills/vchart-development-skill/references/type-details/IBackgroundSpec-Type-Definition.md create mode 100644 skills/vchart-development-skill/references/type-details/IBoxPlotMarkSpec-Type-Definition.md create mode 100644 skills/vchart-development-skill/references/type-details/IBrushSpec-Type-Definition.md create mode 100644 skills/vchart-development-skill/references/type-details/ICartesianAxisSpec-Type-Definition.md create mode 100644 skills/vchart-development-skill/references/type-details/ICartesianCrosshairSpec-Type-Definition.md create mode 100644 skills/vchart-development-skill/references/type-details/ICellMarkSpec-Type-Definition.md create mode 100644 skills/vchart-development-skill/references/type-details/ICustomMarkSpec-Type-Definition.md create mode 100644 skills/vchart-development-skill/references/type-details/IData-Type-Definition.md create mode 100644 skills/vchart-development-skill/references/type-details/IDataZoomSpec-Type-Definition.md create mode 100644 skills/vchart-development-skill/references/type-details/IExtensionGroupMarkSpec-Type-Definition.md create mode 100644 skills/vchart-development-skill/references/type-details/IExtensionMarkSpec-Type-Definition.md create mode 100644 skills/vchart-development-skill/references/type-details/IFunnelLabelSpec-Type-Definition.md create mode 100644 skills/vchart-development-skill/references/type-details/IFunnelOuterLabelSpec-Type-Definition.md create mode 100644 skills/vchart-development-skill/references/type-details/IGroupMarkSpec-Type-Definition.md create mode 100644 skills/vchart-development-skill/references/type-details/IHierarchyData-Type-Definition.md create mode 100644 skills/vchart-development-skill/references/type-details/IHoverSpec-Type-Definition.md create mode 100644 skills/vchart-development-skill/references/type-details/IImageMarkSpec-Type-Definition.md create mode 100644 skills/vchart-development-skill/references/type-details/IIndicatorSpec-Type-Definition.md create mode 100644 skills/vchart-development-skill/references/type-details/IInteractionItemSpec-Type-Definition.md create mode 100644 skills/vchart-development-skill/references/type-details/ILabelSpec-Type-Definition.md create mode 100644 skills/vchart-development-skill/references/type-details/ILayoutPaddingSpec-Type-Definition.md create mode 100644 skills/vchart-development-skill/references/type-details/ILayoutSpec-Type-Definition.md create mode 100644 skills/vchart-development-skill/references/type-details/ILegendSpec-Type-Definition.md create mode 100644 skills/vchart-development-skill/references/type-details/ILineLikeLabelSpec-Type-Definition.md create mode 100644 skills/vchart-development-skill/references/type-details/ILineMarkSpec-Type-Definition.md create mode 100644 skills/vchart-development-skill/references/type-details/ILinearAxisSpec-Type-Definition.md create mode 100644 skills/vchart-development-skill/references/type-details/ILinkPathMarkSpec-Type-Definition.md create mode 100644 skills/vchart-development-skill/references/type-details/ILiquidMarkSpec-Type-Definition.md create mode 100644 skills/vchart-development-skill/references/type-details/ILiquidOutlineSpec-Type-Definition.md create mode 100644 skills/vchart-development-skill/references/type-details/IMarkAreaSpec-Type-Definition.md create mode 100644 skills/vchart-development-skill/references/type-details/IMarkLineSpec-Type-Definition.md create mode 100644 skills/vchart-development-skill/references/type-details/IMarkPointSpec-Type-Definition.md create mode 100644 skills/vchart-development-skill/references/type-details/IMarkSpec-Type-Definition.md create mode 100644 skills/vchart-development-skill/references/type-details/IMediaQuerySpec-Type-Definition.md create mode 100644 skills/vchart-development-skill/references/type-details/IMultiLabelSpec-Type-Definition.md create mode 100644 skills/vchart-development-skill/references/type-details/IOutlierMarkSpec-Type-Definition.md create mode 100644 skills/vchart-development-skill/references/type-details/IPadding-Type-Definition.md create mode 100644 skills/vchart-development-skill/references/type-details/IPathMarkSpec-Type-Definition.md create mode 100644 skills/vchart-development-skill/references/type-details/IPercent-Type-Definition.md create mode 100644 skills/vchart-development-skill/references/type-details/IPlayer-Type-Definition.md create mode 100644 skills/vchart-development-skill/references/type-details/IPolarAxisSpec-Type-Definition.md create mode 100644 skills/vchart-development-skill/references/type-details/IPolarCrosshairSpec-Type-Definition.md create mode 100644 skills/vchart-development-skill/references/type-details/IPolygonMarkSpec-Type-Definition.md create mode 100644 skills/vchart-development-skill/references/type-details/IRectMarkSpec-Type-Definition.md create mode 100644 skills/vchart-development-skill/references/type-details/IRippleMarkSpec-Type-Definition.md create mode 100644 skills/vchart-development-skill/references/type-details/IRuleMarkSpec-Type-Definition.md create mode 100644 skills/vchart-development-skill/references/type-details/ISankeyLabelSpec-Type-Definition.md create mode 100644 skills/vchart-development-skill/references/type-details/IScrollBarSpec-Type-Definition.md create mode 100644 skills/vchart-development-skill/references/type-details/ISelectSpec-Type-Definition.md create mode 100644 skills/vchart-development-skill/references/type-details/ISeriesSpec-Type-Definition.md create mode 100644 skills/vchart-development-skill/references/type-details/ISeriesStyle-Type-Definition.md create mode 100644 skills/vchart-development-skill/references/type-details/IStackCornerRadiusCallback-Type-Definition.md create mode 100644 skills/vchart-development-skill/references/type-details/ISymbolMarkSpec-Type-Definition.md create mode 100644 skills/vchart-development-skill/references/type-details/ITextMarkSpec-Type-Definition.md create mode 100644 skills/vchart-development-skill/references/type-details/ITheme-Type-Definition.md create mode 100644 skills/vchart-development-skill/references/type-details/ITitleSpec-Type-Definition.md create mode 100644 skills/vchart-development-skill/references/type-details/ITooltipSpec-Type-Definition.md create mode 100644 skills/vchart-development-skill/references/type-details/ITotalLabelSpec-Type-Definition.md create mode 100644 skills/vchart-development-skill/references/type-details/IVisualSpecBase-Type-Definition.md create mode 100644 skills/vchart-development-skill/references/type-details/IVisualSpecScale-Type-Definition.md create mode 100644 skills/vchart-development-skill/references/type-details/IWaterfallTotalCustom-Type-Definition.md create mode 100644 skills/vchart-development-skill/references/type-details/IWaterfallTotalEnd-Type-Definition.md create mode 100644 skills/vchart-development-skill/references/type-details/IWaterfallTotalField-Type-Definition.md create mode 100644 skills/vchart-development-skill/references/type-details/LiquidShapeType-Type-Definition.md create mode 100644 skills/vchart-development-skill/references/type-details/RegionSpec-Type-Definition.md create mode 100644 skills/vchart-development-skill/references/type-details/ShapeType-Type-Definition.md create mode 100644 skills/vchart-development-skill/references/type-details/SunburstLabelConfig-Type-Definition.md create mode 100644 skills/vchart-development-skill/references/type-details/TextShapeMask-Type-Definition.md create mode 100644 skills/vchart-development-skill/references/type-details/WordCloudConfigType-Type-Definition.md create mode 100644 skills/vchart-development-skill/references/type-details/WordCloudShapeConfigType-Type-Definition.md create mode 100644 skills/vchart-development-skill/references/type-details/WordCloudShapeType-Type-Definition.md create mode 100644 skills/vchart-development-skill/references/type-meta/area.json create mode 100644 skills/vchart-development-skill/references/type-meta/bar.json create mode 100644 skills/vchart-development-skill/references/type-meta/boxPlot.json create mode 100644 skills/vchart-development-skill/references/type-meta/circlePacking.json create mode 100644 skills/vchart-development-skill/references/type-meta/circularProgress.json create mode 100644 skills/vchart-development-skill/references/type-meta/common.json create mode 100644 skills/vchart-development-skill/references/type-meta/correlation.json create mode 100644 skills/vchart-development-skill/references/type-meta/funnel.json create mode 100644 skills/vchart-development-skill/references/type-meta/gauge.json create mode 100644 skills/vchart-development-skill/references/type-meta/heatmap.json create mode 100644 skills/vchart-development-skill/references/type-meta/histogram.json create mode 100644 skills/vchart-development-skill/references/type-meta/line.json create mode 100644 skills/vchart-development-skill/references/type-meta/linearProgress.json create mode 100644 skills/vchart-development-skill/references/type-meta/liquid.json create mode 100644 skills/vchart-development-skill/references/type-meta/map.json create mode 100644 skills/vchart-development-skill/references/type-meta/mosaic.json create mode 100644 skills/vchart-development-skill/references/type-meta/pictogram.json create mode 100644 skills/vchart-development-skill/references/type-meta/pie.json create mode 100644 skills/vchart-development-skill/references/type-meta/radar.json create mode 100644 skills/vchart-development-skill/references/type-meta/rangeArea.json create mode 100644 skills/vchart-development-skill/references/type-meta/rangeColumn.json create mode 100644 skills/vchart-development-skill/references/type-meta/rose.json create mode 100644 skills/vchart-development-skill/references/type-meta/sankey.json create mode 100644 skills/vchart-development-skill/references/type-meta/scatter.json create mode 100644 skills/vchart-development-skill/references/type-meta/sequence.json create mode 100644 skills/vchart-development-skill/references/type-meta/sunburst.json create mode 100644 skills/vchart-development-skill/references/type-meta/treemap.json create mode 100644 skills/vchart-development-skill/references/type-meta/venn.json create mode 100644 skills/vchart-development-skill/references/type-meta/waterfall.json create mode 100644 skills/vchart-development-skill/references/type-meta/wordCloud.json create mode 100644 skills/vchart-development-skill/references/workflows/scenario-1-diagnosis.md create mode 100644 skills/vchart-development-skill/references/workflows/scenario-1-react.md create mode 100644 skills/vchart-development-skill/references/workflows/scenario-2-generation.md create mode 100644 skills/vchart-development-skill/references/workflows/scenario-3-image-replication.md create mode 100644 skills/vchart-development-skill/scripts/generate_demo_html.py create mode 100644 skills/vchart-development-skill/scripts/generate_diagnosis_html.py create mode 100644 skills/vchart-development-skill/scripts/generate_diagnosis_react_html.py create mode 100644 skills/vchart-development-skill/workflows/scenario-1-diagnosis.md create mode 100644 skills/vchart-development-skill/workflows/scenario-1-react.md create mode 100644 skills/vchart-development-skill/workflows/scenario-2-generation.md create mode 100644 skills/vchart-development-skill/workflows/scenario-3-image-replication.md diff --git a/skills/vchart-development-skill/SKILL.md b/skills/vchart-development-skill/SKILL.md new file mode 100644 index 0000000000..32108b8e77 --- /dev/null +++ b/skills/vchart-development-skill/SKILL.md @@ -0,0 +1,298 @@ +--- +name: vchart-development-skill +description: VChart图表库专家助手，支持问题诊断、配置生成、图片/Figma设计稿还原等场景，基于结构化知识库提供精确的图表开发解决方案 +--- + +# VChart 图表开发助手 Skill + +## 角色定义 + +你是一位 VChart 图表库专家助手，专门帮助用户解决 VChart 2.0.0+ 版本的图表开发问题。你具备以下能力： + +- 深度理解 VChart 的 Spec 配置体系和 API +- 能够根据用户描述推断最合适的图表类型和配置项 +- 熟悉常见的配置问题和最佳实践 +- 能够生成符合 VChart 规范的完整或增量配置代码 +- **支持 React-VChart**：熟悉 `@visactor/react-vchart` 的组件使用和问题诊断 +- **对话上下文感知**：能在多轮对话中动态切换场景（生成→诊断→增量），而非僵化执行单一流程 +- **主动发现问题**：生成代码后主动自检，提前预警潜在风险（如字段映射错误） +- **快速响应反馈**：当用户反馈问题时，立即切换到诊断模式而非继续生成 + +## 核心知识库 + +本 Skill 依赖以下结构化知识库： + +| 知识库 | 路径 | 用途 | +| -------------- | ------------------------------ | -------------------------------- | +| **配置项索引** | `references/topkey/*.json` | 用户意图 → 配置项名称的快速映射 | +| **类型元数据** | `references/type-meta/*.json` | 图表类型的完整属性结构和继承关系 | +| **类型详情** | `references/type-details/*.md` | 配置项的详细类型定义和代码示例 | +| **示例库** | `references/examples/` | 常用图表的完整示例代码 | +| **组件参考** | `references/components/` | 组件配置速查 | + +**React-VChart 参考资源**： + +- **官方教程**：https://visactor.com/vchart/guide/tutorial_docs/Cross-terminal_and_Developer_Ecology/react +- **GitHub 仓库**：https://github.com/VisActor/VChart/tree/develop/packages/react-vchart + +--- + +## 输出规范 + +所有场景统一输出 **JavaScript 代码块**，包含完整的 VChart 配置对象： + +| 场景类型 | 输出内容 | 参考文档 | +| ------------------- | ---------------------------------- | --------------------------------------------------------------------------------------- | +| **VChart 问题诊断** | 修复后的完整 spec + 问题分析注释 | [scenario-1-diagnosis.md](references/workflows/scenario-1-diagnosis.md) | +| **配置生成** | 完整 spec + Mock 数据 | [scenario-2-generation.md](references/workflows/scenario-2-generation.md) | +| **图片还原** | 还原后的完整 spec + Mock 数据 | [scenario-3-image-replication.md](references/workflows/scenario-3-image-replication.md) | +| **React 问题诊断** | 修复后的 React 组件代码 + 问题分析 | [scenario-1-react.md](references/workflows/scenario-1-react.md) | + +**输出格式示例**： + +```javascript +// 📊 VChart 柱状图配置 +// 功能：展示多系列数据对比，支持图例交互 + +const spec = { + type: 'bar', + data: [ + { + id: 'barData', + values: [ + { category: 'A', value: 20, series: '系列1' }, + { category: 'B', value: 35, series: '系列1' }, + { category: 'A', value: 15, series: '系列2' }, + { category: 'B', value: 28, series: '系列2' } + ] + } + ], + xField: 'category', + yField: 'value', + seriesField: 'series', + legends: { visible: true, orient: 'top' }, + axes: [ + { orient: 'left', title: { visible: true, text: '数值' } }, + { orient: 'bottom', title: { visible: true, text: '类别' } } + ] +}; + +// 使用方式： +// const vchart = new VChart(spec, { dom: 'chart' }); +// vchart.renderSync(); +``` + +--- + +## 场景识别与动态切换 + +### 首次识别 + +当用户提出 VChart 相关问题时，识别属于以下哪种场景： + +#### 场景一：问题诊断 + +**识别信号**： + +- 用户提供了现有代码并描述"不工作"、"报错"、"显示异常" +- 用户询问"有没有更好的方式"、"如何优化" +- 用户遇到性能问题或渲染问题 +- **支持 React-VChart**：用户使用 `@visactor/react-vchart` 的 React 组件代码 + +#### 场景二：配置生成 + +**识别信号**： + +- 用户希望从 0 到 1 创建图表（提供描述/数据结构） +- 用户已有 spec，希望添加/修改某个功能点 +- 用户问"如何配置 xxx"、"怎么实现 xxx 效果" + +**场景二细分**： + +- **完整生成模式**：用户无现有 spec，需要生成完整配置 +- **增量生成模式**：用户有现有 spec，需要生成增量配置 + +#### 场景三：视觉还原 + +**识别信号**： + +- 用户提供了图表截图/设计稿图片 +- 用户提供了 Figma 设计稿链接或截图 +- 用户说"帮我实现这个图表"、"照着这个做一个" +- 用户希望复刻某个图表效果 + +**场景三细分**： + +- **普通图片模式**：从截图推断样式，中等精确度 +- **Figma 设计稿模式**：提取精确样式值，高精确度 + +--- + +### 对话中的场景动态切换 ⚠️ + +**核心原则**：根据最新用户输入重新评估场景，灵活切换。 + +#### 切换触发信号 + +| 当前场景 | 用户说... | 切换到 | 动作 | +| -------- | ------------------------------- | ------ | -------------- | +| 场景2 | "没显示"/"报错"/"不对"/"为什么" | 场景1 | 诊断生成的代码 | +| 场景1 | "再加"/"怎么实现"/"如何配置" | 场景2 | 增量生成 | +| 场景3 | "调整"/"优化"/描述具体问题 | 场景1 | 诊断优化 | +| 任何 | 提供新图片/截图 | 场景3 | 新的视觉还原 | +| 任何 | "重新生成"/全新需求 | 场景2 | 新的完整生成 | + +#### 切换要点 + +- 保留之前代码作为上下文基础 +- 明确告知切换："我来帮您诊断一下..." +- 直接处理，无需重新收集信息 + +--- + +## 生成后自检与问题预警 🔍 + +生成代码后立即检查以下高频错误点： + +### 自检要点 + +1. **字段映射**（80%问题源）：xField/yField 与 data.values 中的键名完全一致？ +2. **数据结构**：data 格式正确？`[{ id, values: [{...}] }]` +3. **必填字段**：type、xField/yField（如适用）、data 都已配置？ +4. **类型正确**：数值是 number 而非 string？ + +### 主动提示 + +发现风险时告知用户： + +``` +✅ 已生成配置 +⚠️ 请确认数据字段名与 xField/yField 一致，否则图表可能无法显示 +💡 如遇问题请反馈，我会立即诊断 +``` + +### 问题反馈关键词 → 立即切换场景1 + +- "报错"/"error"/"不工作"/"失败" +- "没显示"/"空白"/"不出来" +- "数据不对"/"Y轴空"/"X轴乱" +- "为什么"/"有问题"/"不对" +- "帮我看看"/"检查"/"诊断" + +--- + +## 处理流程 + +根据场景识别结果，参考对应的处理流程文档： + +| 场景 | 处理流程文档 | 核心能力 | +| ----------------- | ------------------------------------------------------------------------------------------------------------ | ---------------------------------- | +| **问题诊断** | [references/workflows/scenario-1-diagnosis.md](references/workflows/scenario-1-diagnosis.md) | 配置检查、错误定位、性能优化 | +| **├─ React 专项** | [references/workflows/scenario-1-react.md](references/workflows/scenario-1-react.md) | React-VChart 特有问题诊断 | +| **配置生成** | [references/workflows/scenario-2-generation.md](references/workflows/scenario-2-generation.md) | 完整生成、增量生成、意图识别 | +| **视觉还原** | [references/workflows/scenario-3-image-replication.md](references/workflows/scenario-3-image-replication.md) | 图片分析、Figma 精确还原、样式匹配 | + +**⚠️ 注意**：场景不是固定的！在对话中随时根据用户最新输入切换场景。参见上文"对话中的场景动态切换"部分。 + +--- + +## 知识库查询指南 + +### 配置项查询 + +当需要查找配置项时，按以下顺序查询： + +``` +用户意图 → topkey/*.json → type-meta/*.json → type-details/*.md +``` + +**查询流程**： + +1. **意图识别**：用户说"加个标签" → 查询 `references/topkey/[图表类型].json` → 找到 `label` 配置项 +2. **结构查询**：需要 label 的属性 → 查询 `references/type-meta/[图表类型].json` → 找到 `label` 的类型定义 +3. **类型详情**：`label` 类型为 `ILabelSpec`（isSimple: false）→ 查询 `references/type-details/ILabelSpec-Type-Definition.md` + +> **常用配置项索引**： +> +> - 通用配置（标题、图例、tooltip等）→ `references/topkey/all_common.json` +> - 图表专属配置 → `references/topkey/[图表类型].json` + +### 类型定义查询 + +根据 `type-meta` 中的 `isSimple` 字段判断查询策略： + +| isSimple | 类型示例 | 查询方式 | +| -------- | --------------------- | -------------------------------------------------------------- | +| `true` | `boolean`, `string` | 直接使用 `references/type-meta` 中的 `type` 字段 | +| `false` | `ILabelSpec`, `IData` | 查询 `references/type-details/[类型名]-Type-Definition.md` | +| 函数类型 | 回调函数 | 查询 `references/type-details/FunctionType-Type-Definition.md` | + +--- + +## 通用查询策略 + +### 查询优先级 + +``` +1. 本地知识库（references/topkey/ → references/type-meta/ → references/type-details/ → references/examples/ → references/faq） +2. 在线文档（仅当本地不足时） +``` + +### 在线资源（补充） + +当本地知识库无法解决问题时： + +- **配置文档**：`https://www.visactor.io/vchart/option/[图表类型]` +- **API 文档**：`https://www.visactor.io/vchart/api/API/vchart` +- **示例代码**：GitHub `VisActor/VChart` 的 `docs/assets/examples/` +- **Issue 搜索**：`https://github.com/VisActor/VChart/issues` + +--- + +## 代码生成规范 + +生成的代码应： + +1. **类型正确**：属性值符合 `type-details` 中的类型定义 +2. **字段匹配**：数据字段名与 xField/yField 等严格对应（⚠️ 最常见错误源） +3. **必填完整**：包含 `type-meta` 中 `required: true` 的所有字段 +4. **注释清晰**：关键配置项添加注释说明 +5. **版本兼容**：使用 VChart 2.0.0+ 的 API +6. **React 需求**：如用户明确 React-VChart，优先采用 React 代码/模板（见 React 诊断模板），并提示依赖安装 + +--- + +## 输出规范 + +所有场景处理完成后，**必须输出可直接运行的 HTML 文件**，不得只返回 spec 片段。 + +### JavaScript 代码输出规范 + +**输出校验清单**： + +- ✅ 包含完整的 VChart spec 配置对象 +- ✅ 包含必要的数据（真实数据或合理的 Mock 数据） +- ✅ 添加关键配置的注释说明 +- ✅ 使用 ES6+ 语法（const/let、箭头函数等） +- ✅ 代码格式规范，易于复制使用 + +**不合格示例（禁止）**： + +- ❌ 只返回部分配置片段（如只有 `axes` 或 `series`） +- ❌ 缺少数据源（`data` 字段） +- ❌ 使用占位符如 `[...更多数据...]` 而不给出完整示例 +- ❌ 代码中包含 HTML 标签或模板语法 + +--- + +## 版本说明 + +本 Skill 针对 **VChart 2.0.0+** 版本设计。 + +如用户使用旧版本（1.x），需提醒可能存在的 API 差异。 + +--- + +## 本地知识库结构 + +主要目录：`chart-type-guide.md`、`references/workflows/`、`assets/template/`、`references/`。详情见各自文件夹。 diff --git a/skills/vchart-development-skill/references/FILE_NAMING_CONVENTIONS.md b/skills/vchart-development-skill/references/FILE_NAMING_CONVENTIONS.md new file mode 100644 index 0000000000..97778d0f61 --- /dev/null +++ b/skills/vchart-development-skill/references/FILE_NAMING_CONVENTIONS.md @@ -0,0 +1,353 @@ +# 文件命名约定指南 + +## 概述 + +不同 Python 脚本使用不同的输入文件格式和命名约定。请严格遵循本指南，避免在场景间混淆文件名和格式。 + +--- + +## 输入文件约定 + +### generate_diagnosis_html.py + +**输入文件名**：`config.js`（推荐）或自定义名称 + +**文件格式**：JavaScript 配置对象 + +**必需内容**： + +```javascript +// 1. 问题回顾对象 +const problemReview = { + highlightLines: [11], // 可选：高亮行号数组 + specCode: `[用户原始代码]` // 必需：完整 JS 代码字符串 +}; + +// 2. 诊断分析对象 +const diagnosis = { + problem: '[问题简述]', // 必需 + cause: '[原因分析]', // 必需 + suggestion: '[修复建议]' // 可选 +}; + +// 3. 解决方案数组 +const solutions = [ + { + title: '[方案标题]', // 必需 + description: '[方案描述]', // 必需 + highlightLines: [11], // 可选 + specCode: `[修复代码]` // 必需 + } + // 可添加更多方案... +]; +``` + +**使用示例**： + +```bash +python3 scripts/generate_diagnosis_html.py \ + --title "诊断报告" \ + --desc "问题分析结果" \ + --config-file config.js \ + --output output/diagnosis.html +``` + +**适用场景**： + +- [scenario-1-diagnosis.md](workflows/scenario-1-diagnosis.md)（VChart 问题诊断） + +--- + +### generate_demo_html.py + +**输入文件名**：`spec.js`（推荐）或自定义名称 + +**文件格式**：VChart Spec 配置（JavaScript） + +**必需内容**： + +```javascript +const spec = { + type: 'bar', // 图表类型 + data: { + values: [ + { category: 'A', value: 10 }, + { category: 'B', value: 20 } + ] + }, + xField: 'category', + yField: 'value' + // 其他 VChart 配置... +}; +``` + +**使用示例**： + +```bash +python3 scripts/generate_demo_html.py \ + --title "图表示例" \ + --desc "演示配置" \ + --feature "展示柱状图基本配置" \ + --tips "可调整 xField/yField" \ + --spec-file spec.js \ + --output output/demo.html +``` + +**适用场景**： + +- [scenario-2-generation.md](workflows/scenario-2-generation.md)（配置生成） +- [scenario-3-image-replication.md](workflows/scenario-3-image-replication.md)（图片还原） + +--- + +### generate_diagnosis_react_html.py + +**输入文件名**：无（使用命令行参数） + +**文件格式**：不需要输入文件，所有内容通过命令行参数传递 + +**必需参数**： + +```bash +--problem-code "原始 React 代码" # JSX 格式代码 +--problem-title "问题标题" # 问题简述 +--cause "问题原因" # 原因分析 +--solution-N-title "方案标题" # 第 N 个方案标题 +--solution-N-desc "方案描述" # 第 N 个方案描述 +--solution-N-code "修复代码" # 第 N 个方案代码 +``` + +**使用示例**： + +```bash +python3 scripts/generate_diagnosis_react_html.py \ + --problem-code "const Chart = () => " \ + --problem-title "图表不显示" \ + --cause "数据格式错误" \ + --solution-1-title "修正数据格式" \ + --solution-1-desc "添加必需的 values 字段" \ + --solution-1-code "const Chart = () => " \ + --output output/diagnosis_react.html +``` + +**适用场景**： + +- [scenario-1-react.md](workflows/scenario-1-react.md)（React-VChart 诊断） + +--- + +## 快速对照表 + +| 脚本 | 输入文件 | 文件格式 | 必需字段 | 适用场景 | +| ------------------------------------ | ----------- | ----------- | -------------------------------------------------- | -------------------- | +| **generate_diagnosis_html.py** | `config.js` | JS 配置对象 | `problemReview`
`diagnosis`
`solutions` | VChart 问题诊断 | +| **generate_demo_html.py** | `spec.js` | VChart Spec | `type`
`data`
`xField`/`yField` | 配置生成
图片还原 | +| **generate_diagnosis_react_html.py** | 无 | 命令行参数 | `--problem-code`
`--problem-title`
`--cause` | React 诊断 | + +--- + +## 常见混淆场景 + +### ❌ 错误：在 generate_demo_html.py 中使用 config.js + +```bash +# ❌ 错误：文件格式不匹配 +python3 scripts/generate_demo_html.py --spec-file config.js + +# config.js 包含的是诊断配置（problemReview/diagnosis/solutions） +# 而 generate_demo_html.py 需要的是 VChart spec +``` + +**正确做法**： + +```bash +# ✅ 正确：使用 spec.js +python3 scripts/generate_demo_html.py --spec-file spec.js +``` + +--- + +### ❌ 错误：在 generate_diagnosis_html.py 中使用 spec.js + +```bash +# ❌ 错误：文件格式不匹配 +python3 scripts/generate_diagnosis_html.py --config-file spec.js + +# spec.js 仅包含 VChart spec 配置 +# 而 generate_diagnosis_html.py 需要包含 problemReview/diagnosis/solutions +``` + +**正确做法**： + +```bash +# ✅ 正确：使用 config.js +python3 scripts/generate_diagnosis_html.py --config-file config.js +``` + +--- + +### ❌ 错误：为 React 脚本创建输入文件 + +```bash +# ❌ 不需要：React 脚本不使用输入文件 +cat > react_config.js << 'EOF' +... +EOF + +python3 scripts/generate_diagnosis_react_html.py --config-file react_config.js +``` + +**正确做法**： + +```bash +# ✅ 正确：直接使用命令行参数 +python3 scripts/generate_diagnosis_react_html.py \ + --problem-code "..." \ + --problem-title "..." \ + --cause "..." +``` + +--- + +## 文件创建模板 + +### 创建 config.js（用于诊断场景） + +```bash +cat > config.js << 'EOF' +const problemReview = { + specCode: `const spec = { + type: "bar", + data: { + values: [ + { category: "A", value: 10 } + ] + }, + xField: "category", + yField: "values" // 错误：应为 "value" +};` +}; + +const diagnosis = { + problem: "柱状图高度为 0，Y 轴无数据", + cause: "yField 值为 'values'，但数据字段名为 'value'，字段名不匹配", + suggestion: "确保 xField/yField 与数据字段名严格一致" +}; + +const solutions = [ + { + title: "修正字段映射", + description: "将 yField 从 'values' 改为 'value'", + specCode: `const spec = { + type: "bar", + data: { + values: [ + { category: "A", value: 10 } + ] + }, + xField: "category", + yField: "value" // 修正 +};` + } +]; +EOF +``` + +### 创建 spec.js（用于生成/还原场景） + +```bash +cat > spec.js << 'EOF' +const spec = { + type: "bar", + data: { + values: [ + { category: "A", value: 10 }, + { category: "B", value: 20 }, + { category: "C", value: 15 }, + { category: "D", value: 12 }, + { category: "E", value: 18 } + ] + }, + xField: "category", + yField: "value", + label: { + visible: true, + style: { fill: "#333" } + }, + tooltip: { + visible: true + } +}; +EOF +``` + +--- + +## 验证文件格式 + +### 验证 config.js + +```bash +# 检查是否包含必需对象 +grep "const problemReview" config.js +grep "const diagnosis" config.js +grep "const solutions" config.js + +# 验证 JavaScript 语法 +node -c config.js +``` + +### 验证 spec.js + +```bash +# 检查是否包含 spec 对象 +grep "const spec" spec.js + +# 验证 JavaScript 语法 +node -c spec.js + +# 检查必需字段 +grep "type:" spec.js +grep "data:" spec.js +``` + +--- + +## 最佳实践 + +### ✅ 推荐命名方式 + +| 场景 | 推荐文件名 | 说明 | +| ------------ | -------------------- | ----------------------------- | +| 诊断单个问题 | `config.js` | 默认名称，简洁明了 | +| 多个诊断案例 | `config_<场景>.js` | 例如：`config_bar_yfield.js` | +| 单个示例 | `spec.js` | 默认名称 | +| 多个示例 | `spec_<图表类型>.js` | 例如：`spec_line_gradient.js` | +| 图片还原 | `spec_<原图描述>.js` | 例如：`spec_sales_chart.js` | + +### ✅ 文件组织建议 + +``` +vchart-development-assistant/ +├── configs/ # 存放诊断配置文件 +│ ├── config_bar.js +│ ├── config_line.js +│ └── config_pie.js +├── specs/ # 存放图表 spec 文件 +│ ├── spec_bar_basic.js +│ ├── spec_line_multi.js +│ └── spec_pie_donut.js +└── output/ # 输出 HTML 文件 + ├── diagnosis_bar.html + ├── demo_line.html + └── demo_pie.html +``` + +--- + +## 故障排除 + +遇到文件格式相关问题？参见： + +- [SCRIPTS_TROUBLESHOOTING.md](SCRIPTS_TROUBLESHOOTING.md) - 常见问题解决方案 +- [SCRIPT_PARAMS_REFERENCE.md](SCRIPT_PARAMS_REFERENCE.md) - 脚本参数详细说明 diff --git a/skills/vchart-development-skill/references/SCRIPTS_TROUBLESHOOTING.md b/skills/vchart-development-skill/references/SCRIPTS_TROUBLESHOOTING.md new file mode 100644 index 0000000000..28723b85ac --- /dev/null +++ b/skills/vchart-development-skill/references/SCRIPTS_TROUBLESHOOTING.md @@ -0,0 +1,480 @@ +# Python 脚本常见问题排除指南 + +## 通用故障排除 + +### ❌ 模板不存在错误 + +**错误信息示例**： + +``` +❌ 模板不存在: assets/template/diagnosis.html +❌ 模板不存在: assets/template/demo.html +❌ 模板不存在: assets/template/diagnosis-react.html +``` + +**原因**：脚本运行位置不正确，未在项目根目录执行 + +**解决步骤**： + +1. 确认当前工作目录： + + ```bash + pwd + ``` + +2. 切换到项目根目录： + + ```bash + cd /path/to/vchart-development-assistant + ``` + +3. 验证模板文件存在： + + ```bash + ls assets/template/diagnosis.html + ls assets/template/demo.html + ls assets/template/diagnosis-react.html + ``` + +4. 重新运行脚本 + +**💡 提示**：脚本必须在 `vchart-development-assistant` 目录下运行，因为模板路径是相对路径。 + +--- + +### ❌ 输出目录问题 + +**症状**： + +- 生成的 HTML 文件无法打开 +- 提示权限错误 +- 找不到输出文件 + +**原因**：输出目录不存在或权限不足 + +**解决步骤**： + +1. 创建输出目录（脚本通常会自动创建）： + + ```bash + mkdir -p output + ``` + +2. 检查目录权限： + + ```bash + ls -la output/ + ``` + +3. 验证文件是否生成： + + ```bash + ls -la output/*.html + ``` + +4. 使用本地服务器打开（推荐）： + ```bash + python3 -m http.server 8000 + # 在浏览器访问 http://localhost:8000/output/xxx.html + ``` + +--- + +### ❌ 模板占位符缺失错误 + +**错误信息示例**： + +``` +❌ 模板中未找到 {{CONFIG_BLOCK}} 占位符 +❌ 模板中未找到 {{SPEC_CODE}} 占位符 +``` + +**原因**：模板文件被意外修改或损坏 + +**解决步骤**： + +1. 检查模板文件是否包含必需占位符： + + ```bash + # 检查 diagnosis.html + cat assets/template/diagnosis.html | grep "{{CONFIG_BLOCK}}" + + # 检查 demo.html + cat assets/template/demo.html | grep "{{SPEC_CODE}}" + + # 检查 diagnosis-react.html + cat assets/template/diagnosis-react.html | grep "{{CONFIG_BLOCK}}" + ``` + +2. 如果标记缺失，从版本控制恢复原始模板： + + ```bash + git checkout assets/template/diagnosis.html + git checkout assets/template/demo.html + git checkout assets/template/diagnosis-react.html + ``` + +3. 确保没有手动编辑过模板文件 + +**💡 提示**：模板文件是只读的，不要手动修改其中的标记注释。 + +--- + +## 按脚本分类故障排除 + +### generate_diagnosis_html.py + +#### ❌ 配置文件不存在：config.js + +**错误信息**： + +``` +❌ 配置文件不存在: config.js +``` + +**原因**：配置文件路径错误或文件未创建 + +**解决步骤**： + +1. 检查文件是否存在： + + ```bash + ls -la config.js + ``` + +2. 检查文件路径（相对于当前运行目录）： + + ```bash + # 如果文件在子目录 + ls -la output/config.js + ``` + + ### ❌ 模板中未找到 {{SPEC_CODE}} 占位符 + +3. 创建配置文件示例： + + ```bash + cat > config.js << 'EOF' + const problemReview = { + specCode: "const spec = { type: 'bar', data: { values: [] } };" + }; + + const diagnosis = { + problem: "图表显示问题", + cause: "配置项错误" + }; + cat assets/template/demo.html | grep "{{SPEC_CODE}}" + + const solutions = [ + { + title: "修复方案", + description: "修改配置", + specCode: "const spec = { type: 'bar', data: { values: [{x:1,y:2}] } };" + } + ]; + EOF + ``` + +4. 使用正确路径运行脚本： + ```bash + python3 scripts/generate_diagnosis_html.py --config-file config.js + ``` + +#### 配置文件格式错误 + +**症状**：HTML 生成成功但无法正确显示 + + 检查模板中是否有 {{SPEC_CODE}} 占位符 + +1. 验证配置文件是否为有效 JavaScript： + + ```bash + node -c config.js + ``` + +2. 确保配置文件包含三个必需对象： + - `problemReview`（包含 `specCode` 字段） + - `diagnosis`（包含 `problem` 和 `cause` 字段） + - `solutions`（数组，每个元素包含 `title`、`description`、`specCode`） + +3. 检查特殊字符是否正确转义（尤其是引号和反引号） + +--- + +### generate_demo_html.py + +#### ❌ Spec 文件不存在：spec.js + +**错误信息**： + +``` +❌ Spec 文件不存在: spec.js +``` + +**原因**：Spec 文件路径错误或文件未创建 + +**解决步骤**： + +1. 检查文件是否存在： + + ```bash + ls -la spec.js + ``` + +2. 创建 Spec 文件示例： + + ```bash + cat > spec.js << 'EOF' + const spec = { + type: "bar", + data: { + values: [ + { category: "A", value: 10 }, + { category: "B", value: 20 }, + { category: "C", value: 15 } + ] + }, + xField: "category", + yField: "value", + label: { visible: true } + }; + EOF + ``` + +3. 使用正确路径运行脚本： + ```bash + python3 scripts/generate_demo_html.py --spec-file spec.js --output output/demo.html + ``` + +#### 生成的 HTML 无法运行或显示空白 + +**原因**：Spec 代码有语法错误或数据格式不正确 + +**解决步骤**： + +1. 验证 Spec 代码语法（使用 Node.js）： + + ```bash + node -c spec.js + ``` + +2. 确保数据格式符合 VChart 要求： + - `data.values` 必须是数组 + - 数组中的对象必须包含 `xField` 和 `yField` 指定的字段 + +3. 验证字段映射： + + ```javascript + // ❌ 错误：字段名不匹配 + xField: "category", // 但数据中是 "cat" + + // ✅ 正确：字段名必须一致 + xField: "category", // 数据中确实有 "category" + ``` + +4. 在浏览器控制台查看详细错误： + - 右键 → 检查 → Console 查看 JavaScript 错误 + +--- + +### generate_diagnosis_react_html.py + +#### ❌ 特殊字符转义问题 + +**症状**： + +- 脚本执行失败 +- 生成的 HTML 中代码显示不完整 +- 代码中出现多余的 `\"` + +**原因**：命令行参数中包含特殊字符未正确转义 + +**解决步骤**： + +1. 对于包含双引号的代码，使用单引号包裹或转义： + + ```bash + # ❌ 错误：双引号冲突 + --problem-code "" + + # ✅ 方法1：使用单引号 + --problem-code '' + + # ✅ 方法2：转义双引号 + --problem-code "" + ``` + +2. 避免在命令行中直接传递复杂多行代码，改用简化版本： + + ```bash + # ❌ 容易失败：复杂代码 + --problem-code "const Chart = () => { + return ...; + }" + + # ✅ 建议：简化代码 + --problem-code "const Chart = () => " + ``` + +3. 使用浏览器开发者工具检查生成的 JavaScript 是否正确： + - 右键 → 检查 → Sources → 查看内联脚本 + +#### ❌ 多方案参数错误 + +**错误信息示例**： + +``` +缺少必需参数: --solution-1-title +``` + +**原因**： + +- 参数格式不正确 +- 方案编号不连续 +- 缺少必需的子参数 + +**解决步骤**： + +1. 确保每个方案包含三个必需参数： + + ```bash + --solution-1-title "方案标题" # 必需 + --solution-1-desc "方案描述" # 必需 + --solution-1-code "修复代码" # 必需 + ``` + +2. 确保方案编号连续（1, 2, 3...）： + + ```bash + # ❌ 错误：跳过了 solution-2 + --solution-1-title "..." --solution-3-title "..." + + # ✅ 正确：连续编号 + --solution-1-title "..." --solution-2-title "..." --solution-3-title "..." + ``` + +3. 验证参数： + ```bash + # 使用 echo 查看参数是否正确传递 + python3 scripts/generate_diagnosis_react_html.py \ + --problem-code "code" \ + --problem-title "title" \ + --cause "cause" \ + --solution-1-title "S1" \ + --solution-1-desc "D1" \ + --solution-1-code "C1" \ + --solution-2-title "S2" \ + --solution-2-desc "D2" \ + --solution-2-code "C2" + ``` + +--- + +## 调试技巧 + +### 查看详细错误信息 + +所有脚本都会输出详细错误信息，包括： + +- 错误类型 +- 错误位置 +- 建议解决方案（带 💡 图标） + +### 使用 Python 调试模式 + +```bash +# 启用详细输出 +python3 -u scripts/generate_diagnosis_html.py --config-file config.js + +# 查看 Python 错误堆栈 +python3 scripts/generate_diagnosis_html.py --config-file config.js 2>&1 | less +``` + +### 验证生成的 HTML + +```bash +# 检查 HTML 文件大小（应大于 10KB） +ls -lh output/*.html + +# 查看 HTML 前几行 +head -n 20 output/diagnosis.html + +# 在浏览器中打开 +open output/diagnosis.html # macOS +xdg-open output/diagnosis.html # Linux +``` + +### 使用本地服务器（推荐） + +某些浏览器限制本地文件访问，使用本地服务器可避免问题： + +```bash +# 启动服务器 +python3 -m http.server 8000 + +# 访问地址 +# http://localhost:8000/output/diagnosis.html +# http://localhost:8000/output/demo.html +``` + +--- + +## 最佳实践 + +### ✅ 推荐做法 + +1. **始终在项目根目录运行脚本** + + ```bash + cd vchart-development-assistant + python3 scripts/generate_*.py ... + ``` + +2. **使用相对路径** + + ```bash + --config-file config.js # ✅ 好 + --config-file ./config.js # ✅ 好 + --config-file /abs/path/config.js # ❌ 避免绝对路径 + ``` + +3. **先验证源文件语法** + + ```bash + node -c config.js # 验证配置文件 + node -c spec.js # 验证 Spec 文件 + ``` + +4. **使用版本控制跟踪配置文件** + ```bash + git add config.js spec.js + git commit -m "Add chart configuration" + ``` + +### ❌ 避免的做法 + +1. 手动编辑模板文件（assets/template/\*.html） +2. 在命令行中传递超过 10 行的代码 +3. 在非项目根目录运行脚本 +4. 使用包含空格的输出路径（未加引号） + +--- + +## 获取帮助 + +### 查看脚本帮助信息 + +```bash +python3 scripts/generate_diagnosis_html.py --help +python3 scripts/generate_demo_html.py --help +python3 scripts/generate_diagnosis_react_html.py --help +``` + +### 相关文档 + +- **诊断场景**：[scenario-1-diagnosis.md](workflows/scenario-1-diagnosis.md) +- **生成场景**：[scenario-2-generation.md](workflows/scenario-2-generation.md) +- **图片还原场景**：[scenario-3-image-replication.md](workflows/scenario-3-image-replication.md) +- **React 诊断场景**：[scenario-1-react.md](workflows/scenario-1-react.md) +- **文件命名约定**：[FILE_NAMING_CONVENTIONS.md](FILE_NAMING_CONVENTIONS.md) +- **脚本参数参考**：[SCRIPT_PARAMS_REFERENCE.md](SCRIPT_PARAMS_REFERENCE.md) diff --git a/skills/vchart-development-skill/references/SCRIPT_PARAMS_REFERENCE.md b/skills/vchart-development-skill/references/SCRIPT_PARAMS_REFERENCE.md new file mode 100644 index 0000000000..a6dc2cfe82 --- /dev/null +++ b/skills/vchart-development-skill/references/SCRIPT_PARAMS_REFERENCE.md @@ -0,0 +1,350 @@ +# Python 脚本参数参考 + +本文档提供所有 Python 脚本的参数详细说明。 + +--- + +## generate_diagnosis_html.py + +**用途**：生成 VChart 配置问题诊断 HTML 报告 + +**适用场景**：[scenario-1-diagnosis.md](workflows/scenario-1-diagnosis.md) + +### 参数列表 + +| 参数 | 类型 | 必需 | 默认值 | 说明 | +| --------------- | ------ | ---- | -------------------------------- | --------------------------------------------------------------- | +| `--title` | string | ❌ | `"VChart 问题诊断报告"` | 诊断报告的标题，显示在 HTML 页面顶部 | +| `--desc` | string | ❌ | `"基于用户配置的诊断与修复结果"` | 报告描述，概述诊断内容 | +| `--config-file` | path | ❌ | 使用内置示例 | 包含 `problemReview`/`diagnosis`/`solutions` 的 JS 配置文件路径 | +| `--output` | path | ❌ | `"output/diagnosis.html"` | 输出 HTML 文件的保存路径 | + +### 配置文件格式 + +`--config-file` 指向的 JavaScript 文件必须包含以下三个对象： + +```javascript +// 1. 问题回顾 +const problemReview = { + highlightLines: [11], // 可选：高亮行号数组 + specCode: `[用户原始代码]` // 必需：完整代码字符串 +}; + +// 2. 诊断分析 +const diagnosis = { + problem: '[问题简述]', // 必需 + cause: '[原因分析]', // 必需 + suggestion: '[修复建议]' // 可选 +}; + +// 3. 解决方案数组 +const solutions = [ + { + title: '[方案标题]', // 必需 + description: '[方案描述]', // 必需 + highlightLines: [11], // 可选 + specCode: `[修复代码]` // 必需 + } +]; +``` + +### 使用示例 + +**最小示例**（使用默认参数）： + +```bash +python3 scripts/generate_diagnosis_html.py --config-file config.js +``` + +**完整示例**（自定义所有参数）： + +```bash +python3 scripts/generate_diagnosis_html.py \ + --title "字段映射错误诊断" \ + --desc "柱状图 Y 轴数据显示问题分析" \ + --config-file configs/bar_yfield_error.js \ + --output output/diagnosis_bar_yfield.html +``` + +### 输出文件 + +生成的 HTML 文件包含： + +- 📋 **问题回顾区**：展示用户原始代码（支持语法高亮） +- 🔍 **诊断分析区**：问题、原因、建议说明 +- ✅ **解决方案区**：多个可编辑、可实时运行的修复方案 +- 💻 **Monaco Editor**：在线代码编辑器，支持实时预览 + +--- + +## generate_demo_html.py + +**用途**：生成 VChart 配置示例演示 HTML + +**适用场景**： + +- [scenario-2-generation.md](workflows/scenario-2-generation.md)（配置生成） +- [scenario-3-image-replication.md](workflows/scenario-3-image-replication.md)（图片还原） + +### 参数列表 + +| 参数 | 类型 | 必需 | 默认值 | 说明 | +| ------------- | ------ | ---- | -------------------------------- | --------------------------------------- | +| `--title` | string | ❌ | `"VChart 图表示例"` | 页面标题，显示在 HTML 页面顶部 | +| `--desc` | string | ❌ | `"基于需求生成的可运行图表配置"` | 页面描述，概述示例内容 | +| `--feature` | string | ❌ | `"补充主要功能说明"` | 主要功能说明，描述图表实现的核心特性 | +| `--tips` | string | ❌ | `"补充编辑提示"` | 编辑提示，指导用户可调整的配置项 | +| `--spec-file` | path | ❌ | 使用内置示例 | 包含完整 VChart spec 配置的 JS 文件路径 | +| `--output` | path | ❌ | `"output/demo.html"` | 输出 HTML 文件的保存路径 | + +### Spec 文件格式 + +`--spec-file` 指向的 JavaScript 文件必须包含完整的 VChart spec 对象： + +```javascript +const spec = { + type: 'bar', // 必需：图表类型 + data: { + // 必需：数据源 + values: [ + { category: 'A', value: 10 }, + { category: 'B', value: 20 } + ] + }, + xField: 'category', // 必需：X 轴字段映射 + yField: 'value', // 必需：Y 轴字段映射 + // 其他可选配置... + label: { visible: true }, + tooltip: { visible: true } +}; +``` + +### 使用示例 + +**最小示例**（使用默认参数）： + +```bash +python3 scripts/generate_demo_html.py --spec-file spec.js +``` + +**完整示例**（配置生成场景）： + +```bash +python3 scripts/generate_demo_html.py \ + --title "柱状图标签功能示例" \ + --desc "展示如何配置数据标签" \ + --feature "在柱子上显示数值标签，支持自定义格式化" \ + --tips "可修改 label.position、label.style 调整标签位置和样式" \ + --spec-file specs/bar_with_labels.js \ + --output output/demo_bar_labels.html +``` + +**完整示例**（图片还原场景）： + +```bash +python3 scripts/generate_demo_html.py \ + --title "销售趋势图还原" \ + --desc "基于设计稿还原的折线图" \ + --feature "还原了渐变填充、数据标签位置、坐标轴样式" \ + --tips "可调整 color、line.style、point.style 优化视觉效果" \ + --spec-file specs/sales_trend_replication.js \ + --output output/replication_sales_trend.html +``` + +### 输出文件 + +生成的 HTML 文件包含： + +- 📊 **图表预览区**：实时渲染的图表 +- 📝 **功能说明**：展示 `--feature` 内容 +- 💡 **编辑提示**：展示 `--tips` 内容 +- 💻 **Monaco Editor**：可编辑 spec 配置，实时预览修改效果 + +--- + +## generate_diagnosis_react_html.py + +**用途**：生成 React-VChart 组件问题诊断 HTML 报告 + +**适用场景**：[scenario-1-react.md](workflows/scenario-1-react.md) + +### 参数列表 + +| 参数 | 类型 | 必需 | 默认值 | 说明 | +| -------------------- | ------ | ---- | ------------------------------- | ------------------------------------- | +| `--problem-code` | string | ✅ | - | 用户的原始 React 组件代码（JSX 格式） | +| `--problem-title` | string | ✅ | - | 问题简述，概括问题现象 | +| `--cause` | string | ✅ | - | 问题原因分析 | +| `--suggestion` | string | ❌ | - | 修复建议（可选） | +| `--solution-N-title` | string | ✅ | - | 第 N 个解决方案的标题 | +| `--solution-N-desc` | string | ✅ | - | 第 N 个解决方案的描述 | +| `--solution-N-code` | string | ✅ | - | 第 N 个解决方案的修复代码 | +| `--output` | path | ❌ | `"output/diagnosis_react.html"` | 输出 HTML 文件的保存路径 | + +**注意**： + +- `N` 必须从 1 开始连续编号（1, 2, 3...） +- 每个方案必须同时提供 `title`、`desc`、`code` 三个参数 +- 不支持跳号（例如 1, 3, 5 是无效的） + +### 使用示例 + +**单方案示例**： + +```bash +python3 scripts/generate_diagnosis_react_html.py \ + --problem-code "const Chart = () => " \ + --problem-title "图表 Y 轴没有数据显示" \ + --cause "Bar 组件的 yField 值为 'values'，但数据字段名为 'value'" \ + --suggestion "确保 xField/yField 与数据字段名严格一致" \ + --solution-1-title "修正字段映射" \ + --solution-1-desc "将 yField 从 'values' 改为 'value'" \ + --solution-1-code "const Chart = () => " \ + --output output/react_yfield_fix.html +``` + +**多方案示例**： + +```bash +python3 scripts/generate_diagnosis_react_html.py \ + --problem-code "const Chart = () => { const data = getData(); return ; }" \ + --problem-title "图表渲染性能问题" \ + --cause "getData() 在每次渲染时重新执行，导致不必要的计算" \ + --solution-1-title "使用 useMemo 优化" \ + --solution-1-desc "使用 useMemo 缓存计算结果" \ + --solution-1-code "const Chart = () => { const data = useMemo(() => getData(), []); return ; }" \ + --solution-2-title "移至组件外部" \ + --solution-2-desc "将静态数据移至组件外部定义" \ + --solution-2-code "const data = getData(); const Chart = () => ;" \ + --output output/react_performance_fix.html +``` + +### 特殊字符处理 + +由于需要在命令行中传递 JSX 代码，注意以下转义规则： + +**双引号**： + +```bash +# ❌ 错误：双引号冲突 +--problem-code "" + +# ✅ 方法1：使用单引号包裹 +--problem-code '' + +# ✅ 方法2：转义双引号 +--problem-code "" +``` + +**换行符**： + +```bash +# ❌ 不推荐：多行代码容易出错 +--problem-code "const Chart = () => { + return ; +}" + +# ✅ 推荐：简化为单行 +--problem-code "const Chart = () => " +``` + +### 输出文件 + +生成的 HTML 文件包含： + +- 📋 **问题回顾区**：展示用户原始 React 代码 +- 🔍 **诊断分析区**：问题、原因、建议说明 +- ✅ **解决方案区**：多个可编辑、可实时运行的 React 组件方案 +- ⚛️ **React 渲染**：使用 Babel 转译 JSX，实时渲染组件 +- 💻 **Monaco Editor**：支持 JSX 语法高亮 + +--- + +## 参数对比总结 + +| 特性 | generate_diagnosis_html.py | generate_demo_html.py | generate_diagnosis_react_html.py | +| ------------ | -------------------------- | --------------------------------- | -------------------------------- | +| **输入方式** | 配置文件（config.js） | Spec 文件（spec.js） | 命令行参数 | +| **标题参数** | `--title` | `--title` | - | +| **描述参数** | `--desc` | `--desc` + `--feature` + `--tips` | `--problem-title` + `--cause` | +| **代码输入** | 文件中的 `specCode` | 文件中的 `spec` | `--problem-code` 参数 | +| **方案定义** | 文件中的 `solutions` 数组 | 单一 spec | `--solution-N-*` 参数 | +| **高亮行号** | 支持（`highlightLines`） | 不支持 | 不支持 | +| **输出路径** | `--output` | `--output` | `--output` | + +--- + +## 快速查询 + +### 按场景查找脚本 + +| 场景 | 推荐脚本 | 关键参数 | +| --------------------- | ---------------------------------- | ------------------------------------ | +| VChart 配置问题诊断 | `generate_diagnosis_html.py` | `--config-file` | +| 配置生成展示 | `generate_demo_html.py` | `--spec-file`, `--feature`, `--tips` | +| 图片/Figma 还原展示 | `generate_demo_html.py` | `--spec-file`, `--feature`, `--tips` | +| React-VChart 问题诊断 | `generate_diagnosis_react_html.py` | `--problem-code`, `--solution-N-*` | + +### 按输入文件类型查找 + +| 输入文件类型 | 脚本 | 文件格式要求 | +| ------------ | ---------------------------------- | -------------------------------------------- | +| `config.js` | `generate_diagnosis_html.py` | 包含 `problemReview`/`diagnosis`/`solutions` | +| `spec.js` | `generate_demo_html.py` | 包含 VChart `spec` 对象 | +| 无需文件 | `generate_diagnosis_react_html.py` | 通过命令行参数传递 | + +--- + +## 常见问题 + +### Q: 如何查看脚本的帮助信息？ + +```bash +python3 scripts/generate_diagnosis_html.py --help +python3 scripts/generate_demo_html.py --help +python3 scripts/generate_diagnosis_react_html.py --help +``` + +### Q: 参数中包含空格怎么办？ + +使用引号包裹： + +```bash +--title "这是一个包含空格的标题" +``` + +### Q: 如何使用相对路径？ + +所有路径参数都支持相对路径（相对于脚本运行目录）： + +```bash +--spec-file ./specs/bar.js # 当前目录下的 specs 文件夹 +--output ../output/demo.html # 上级目录的 output 文件夹 +``` + +### Q: 默认值是什么意思？ + +标记为"必需 ❌"的参数可以省略，脚本会使用默认值。例如： + +```bash +# 使用默认标题和输出路径 +python3 scripts/generate_demo_html.py --spec-file spec.js + +# 等同于 +python3 scripts/generate_demo_html.py \ + --title "VChart 图表示例" \ + --desc "基于需求生成的可运行图表配置" \ + --spec-file spec.js \ + --output output/demo.html +``` + +--- + +## 相关文档 + +- **故障排除**：[SCRIPTS_TROUBLESHOOTING.md](SCRIPTS_TROUBLESHOOTING.md) - 常见问题解决方案 +- **文件命名**：[FILE_NAMING_CONVENTIONS.md](FILE_NAMING_CONVENTIONS.md) - 输入文件格式和命名约定 +- **诊断场景**：[scenario-1-diagnosis.md](workflows/scenario-1-diagnosis.md) +- **生成场景**：[scenario-2-generation.md](workflows/scenario-2-generation.md) +- **图片还原**：[scenario-3-image-replication.md](workflows/scenario-3-image-replication.md) +- **React 诊断**：[scenario-1-react.md](workflows/scenario-1-react.md) diff --git a/skills/vchart-development-skill/references/chart/chart-type-guide.md b/skills/vchart-development-skill/references/chart/chart-type-guide.md new file mode 100644 index 0000000000..1f46c9a131 --- /dev/null +++ b/skills/vchart-development-skill/references/chart/chart-type-guide.md @@ -0,0 +1,151 @@ +# 图表类型选择指南 + +## 快速选择流程 + +``` +你想展示什么？ +├── 比较 → 柱状图/条形图 +├── 趋势 → 折线图/面积图 +├── 占比 → 饼图/环形图/玫瑰图 +├── 分布 → 散点图/直方图/箱线图 +├── 关系 → 散点图/桑基图/和弦图 +├── 层级 → 矩形树图/旭日图 +├── 流程 → 漏斗图/桑基图 +├── 地理 → 地图 +├── 多维度 → 雷达图/平行坐标 +└── 进度 → 仪表盘/进度条 +``` + +## 按数据特征选择 + +### 类目 + 数值 + +| 目的 | 推荐图表 | 说明 | +|-----|---------|------| +| 比较大小 | `bar` 柱状图 | 类目数量 < 12 | +| 比较大小 | `bar` 条形图 | 类目名称较长 | +| 查看排名 | `bar` 条形图 | 按数值排序 | +| 多组对比 | `bar` 分组柱状图 | 组数 < 4 | + +### 类目 + 多数值（系列） + +| 目的 | 推荐图表 | 说明 | +|-----|---------|------| +| 对比各系列 | `bar` 分组柱状图 | 系列数 < 4 | +| 总量+构成 | `bar` 堆叠柱状图 | 关注整体和部分 | +| 百分比构成 | `bar` 百分比堆叠 | 比较占比变化 | + +### 时间 + 数值 + +| 目的 | 推荐图表 | 说明 | +|-----|---------|------| +| 趋势变化 | `line` 折线图 | 连续变化 | +| 累积量 | `area` 面积图 | 强调总量 | +| 波动对比 | `line` 多系列折线 | 对比趋势 | +| 组成演变 | `area` 堆叠面积图 | 整体趋势+构成 | + +### 两个数值维度 + +| 目的 | 推荐图表 | 说明 | +|-----|---------|------| +| 相关性 | `scatter` 散点图 | X-Y 关系 | +| 聚类分析 | `scatter` 散点图 | 按颜色分组 | +| 三维关系 | `scatter` 气泡图 | 尺寸表示第三维 | + +### 占比数据 + +| 目的 | 推荐图表 | 说明 | +|-----|---------|------| +| 部分与整体 | `pie` 饼图 | 类目 < 7 | +| 空心展示 | `pie` 环形图 | 中心可放指标 | +| 对比占比 | `rose` 玫瑰图 | 半径表示数值 | + +### 层级数据 + +| 目的 | 推荐图表 | 说明 | +|-----|---------|------| +| 面积占比 | `treemap` 矩形树图 | 空间利用率高 | +| 层级关系 | `sunburst` 旭日图 | 突出层级结构 | +| 包含关系 | `circlePacking` 圆堆积 | 视觉友好 | + +### 流程/流向 + +| 目的 | 推荐图表 | 说明 | +|-----|---------|------| +| 转化漏斗 | `funnel` 漏斗图 | 各阶段转化 | +| 流量分配 | `sankey` 桑基图 | 多对多流向 | + +### 多维度对比 + +| 目的 | 推荐图表 | 说明 | +|-----|---------|------| +| 综合能力 | `radar` 雷达图 | 维度 3-8 个 | +| 指标对比 | `radar` 雷达图 | 多个对象对比 | + +### 进度/指标 + +| 目的 | 推荐图表 | 说明 | +|-----|---------|------| +| 完成度 | `gauge` 仪表盘 | 单一指标 | +| 进度 | `circularProgress` | 环形进度 | +| 目标对比 | `linearProgress` | 条形进度 | +| 液位/容量 | `liquid` 水波图 | 形象展示 | + +## 图表类型速查表 + +| 类型 | 标识 | 适用场景 | 数据要求 | +|-----|------|---------|---------| +| 柱状图 | `bar` | 类目比较 | 类目+数值 | +| 折线图 | `line` | 趋势变化 | 时间/顺序+数值 | +| 面积图 | `area` | 累积趋势 | 时间/顺序+数值 | +| 饼图 | `pie` | 占比分布 | 类目+数值 | +| 散点图 | `scatter` | 分布/相关 | 两个数值维度 | +| 雷达图 | `radar` | 多维对比 | 类目+多数值 | +| 漏斗图 | `funnel` | 流程转化 | 阶段+数值 | +| 仪表盘 | `gauge` | 进度指标 | 单一数值 | +| 桑基图 | `sankey` | 流向关系 | 源+目标+数值 | +| 矩形树图 | `treemap` | 层级占比 | 层级数据 | +| 旭日图 | `sunburst` | 层级分布 | 层级数据 | +| 词云 | `wordCloud` | 文本频率 | 词+频率 | +| 热力图 | `heatmap` | 密度/强度 | X+Y+数值 | +| 地图 | `map` | 地理分布 | 地区+数值 | +| 组合图 | `common` | 复杂场景 | 多种数据 | + +## 选择建议 + +### 数据量考虑 + +- **< 10 条**：饼图、雷达图 +- **10-50 条**：柱状图、折线图 +- **50-200 条**：折线图、散点图 +- **> 200 条**：考虑聚合或使用散点图/热力图 + +### 比较对象数量 + +- **单一对象**：仪表盘、进度条 +- **2-4 个对象**：分组柱状图、多系列折线 +- **5-7 个对象**：饼图、堆叠图 +- **> 7 个对象**：避免饼图，使用柱状图 + +### 用户理解难度 + +- **简单**：柱状图、折线图、饼图 +- **中等**：面积图、散点图、雷达图 +- **复杂**：桑基图、旭日图、平行坐标 + +## 常见错误 + +### ❌ 避免 + +1. **饼图类目过多**（>7个）→ 使用柱状图 +2. **3D效果**（不推荐）→ 使用2D图表 +3. **双Y轴量级差异大** → 考虑分成两个图 +4. **折线图类目轴** → 如果不是时序数据，考虑柱状图 +5. **堆叠图系列过多**（>5个）→ 考虑分面或其他图表 + +### ✅ 推荐 + +1. 优先选择用户熟悉的图表类型 +2. 保持图表简洁，避免信息过载 +3. 使用合适的颜色对比度 +4. 添加必要的标注和说明 diff --git a/skills/vchart-development-skill/references/chart/common-issues.md b/skills/vchart-development-skill/references/chart/common-issues.md new file mode 100644 index 0000000000..ab21f94958 --- /dev/null +++ b/skills/vchart-development-skill/references/chart/common-issues.md @@ -0,0 +1,367 @@ +# VChart 常见问题速查 + +## 数据相关问题 + +### 1. 图表不显示数据 + +**症状**：图表渲染但没有数据显示 + +**排查步骤**： +1. 检查 `data.values` 是否为空数组 +2. 检查字段映射（xField/yField/valueField）是否与数据字段名一致 +3. 检查数据字段名是否有拼写错误（区分大小写） + +```javascript +// ❌ 错误：字段名不匹配 +data: [{ id: 'data', values: [{ Month: '1月', Value: 100 }] }], +xField: 'month', // 应该是 'Month' +yField: 'value' // 应该是 'Value' + +// ✅ 正确 +data: [{ id: 'data', values: [{ month: '1月', value: 100 }] }], +xField: 'month', +yField: 'value' +``` + +### 2. 数据更新后图表不刷新 + +**解决方案**：使用 `updateData` 方法 + +```javascript +// 更新数据 +vchart.updateData('dataId', newValues); +``` + +### 3. 空值/缺失值处理 + +```javascript +// 方案1：在数据中填充 null +values: [ + { x: 'A', y: 10 }, + { x: 'B', y: null }, // 缺失值 + { x: 'C', y: 20 } +] + +// 方案2：使用 invalidType 配置 +line: { + style: { + // 遇到无效值时的处理方式 + // 'break': 断开 | 'link': 连接 | 'zero': 当作0 + } +} +``` + +--- + +## 样式相关问题 + +### 4. 如何修改默认颜色 + +```javascript +// 方案1：全局配置 color +const spec = { + color: ['#1890ff', '#52c41a', '#faad14', '#f5222d'], + // ... +}; + +// 方案2：在系列中配置 +bar: { + style: { + fill: '#1890ff' + } +} + +// 方案3：使用主题 +const vchart = new VChart(spec, { + dom: 'container', + theme: 'dark' // 或自定义主题 +}); +``` + +### 5. 渐变色配置 + +```javascript +bar: { + style: { + fill: { + gradient: 'linear', + x0: 0.5, y0: 0, + x1: 0.5, y1: 1, + stops: [ + { offset: 0, color: '#1890ff' }, + { offset: 1, color: '#096dd9' } + ] + } + } +} +``` + +### 6. 条件样式（根据数据值设置样式） + +```javascript +bar: { + style: { + fill: (datum) => datum.value > 100 ? '#52c41a' : '#f5222d' + } +} +``` + +--- + +## 坐标轴问题 + +### 7. Y轴不从0开始 + +```javascript +axes: [ + { + orient: 'left', + min: 0, // 强制从0开始 + // 或者 + zero: true + } +] +``` + +### 8. 坐标轴标签被截断 + +```javascript +axes: [ + { + orient: 'bottom', + label: { + autoRotate: true, // 自动旋转 + autoRotateAngle: [0, 45, 90], // 旋转角度候选 + autoHide: true, // 自动隐藏重叠标签 + autoLimit: true // 自动省略 + } + } +] +``` + +### 9. 双Y轴配置 + +```javascript +axes: [ + { orient: 'bottom', type: 'band' }, + { + orient: 'left', + type: 'linear', + seriesIndex: [0] // 关联第一个系列 + }, + { + orient: 'right', + type: 'linear', + seriesIndex: [1] // 关联第二个系列 + } +] +``` + +--- + +## 图例问题 + +### 10. 隐藏图例 + +```javascript +legends: { + visible: false +} +``` + +### 11. 图例位置调整 + +```javascript +legends: { + visible: true, + orient: 'right', // 'top' | 'bottom' | 'left' | 'right' + position: 'middle', // 'start' | 'middle' | 'end' + padding: { left: 20 } +} +``` + +### 12. 自定义图例内容 + +```javascript +legends: { + visible: true, + data: (data) => { + return data.map(item => ({ + label: item.label + ' (自定义)', + shape: { fill: item.shape.fill } + })); + } +} +``` + +--- + +## Tooltip 问题 + +### 13. 自定义 Tooltip 内容 + +```javascript +tooltip: { + mark: { + title: { + value: (datum) => `标题: ${datum.category}` + }, + content: [ + { + key: '数值', + value: (datum) => `${datum.value} 单位` + } + ] + } +} +``` + +### 14. Tooltip 触发方式 + +```javascript +tooltip: { + trigger: 'axis', // 'axis' | 'mark' + // axis: 按坐标轴触发（适合折线图） + // mark: 按图元触发（适合散点图） +} +``` + +--- + +## 性能问题 + +### 15. 大数据量优化 + +```javascript +const spec = { + // 关闭动画 + animation: false, + + // 或设置动画阈值 + animationThreshold: 1000, // 数据量超过此值自动关闭动画 + + // 使用采样 + sampling: 'lttb', // 'lttb' | 'average' | 'max' | 'min' | 'sum' + samplingFactor: 0.5 +}; +``` + +### 16. 按需加载图表类型 + +```javascript +import { VChart } from '@visactor/vchart'; +import { registerBarChart, registerTooltip } from '@visactor/vchart'; + +// 只注册需要的图表和组件 +VChart.useRegisters([registerBarChart, registerTooltip]); +``` + +--- + +## 交互问题 + +### 17. 禁用某些交互 + +```javascript +// 禁用 hover 效果 +bar: { + state: { + hover: { + // 不改变样式 + } + } +} + +// 禁用选中 +select: false +``` + +### 18. 监听图表事件 + +```javascript +const vchart = new VChart(spec, { dom: 'container' }); + +// 点击事件 +vchart.on('click', { level: 'mark' }, (params) => { + console.log('点击数据:', params.datum); +}); + +// hover 事件 +vchart.on('pointerover', { level: 'mark' }, (params) => { + console.log('hover 数据:', params.datum); +}); +``` + +--- + +## 响应式问题 + +### 19. 图表自适应容器大小 + +```javascript +const spec = { + autoFit: true, // 自动适应容器 + // 或指定尺寸 + width: 600, + height: 400 +}; +``` + +### 20. 窗口 resize 后图表不更新 + +```javascript +// 监听窗口变化，手动触发 resize +window.addEventListener('resize', () => { + vchart.resize(); +}); +``` + +--- + +## React/Vue 集成问题 + +### 21. React 中的基本用法 + +```jsx +import { BarChart } from '@visactor/react-vchart'; + +function App() { + const spec = {/* spec配置 */}; + + return ; +} +``` + +### 22. Vue 中的基本用法 + +```vue + + + +``` + +--- + +## 版本迁移问题 + +### 23. 从 1.x 升级到 2.0 + +主要变更： +1. 主题系统重构 +2. 部分 API 名称调整 +3. 动画配置优化 + +详细迁移指南请参考：[VChart 2.0 升级指南](https://www.visactor.io/vchart/guide/tutorial_docs/migrate) diff --git a/skills/vchart-development-skill/references/components/axis.md b/skills/vchart-development-skill/references/components/axis.md new file mode 100644 index 0000000000..2c33c77e73 --- /dev/null +++ b/skills/vchart-development-skill/references/components/axis.md @@ -0,0 +1,306 @@ +# 坐标轴配置 + +## 基础配置 + +```javascript +axes: [ + { + orient: 'bottom', // 位置 + type: 'band', // 类型 + // ...其他配置 + }, + { + orient: 'left', + type: 'linear', + // ...其他配置 + } +] +``` + +## 位置 (orient) + +| 值 | 说明 | +|---|------| +| `'bottom'` | 底部（X轴常用） | +| `'top'` | 顶部 | +| `'left'` | 左侧（Y轴常用） | +| `'right'` | 右侧（双Y轴） | + +## 类型 (type) + +| 值 | 说明 | 适用场景 | +|---|------|---------| +| `'band'` | 类目轴 | 离散数据（柱状图X轴） | +| `'linear'` | 线性轴 | 连续数值 | +| `'time'` | 时间轴 | 时间序列数据 | +| `'log'` | 对数轴 | 跨度大的数值 | + +## 数值范围 + +```javascript +{ + orient: 'left', + type: 'linear', + min: 0, // 最小值 + max: 100, // 最大值 + nice: true, // 优化刻度取整 + zero: true, // 是否包含0 + range: { // 或使用range + min: 0, + max: 100 + } +} +``` + +## 标题 + +```javascript +{ + title: { + visible: true, + text: '销售额（万元）', + position: 'middle', // 'start' | 'middle' | 'end' + space: 10, // 与轴的间距 + style: { + fontSize: 14, + fill: '#333', + fontWeight: 'bold' + } + } +} +``` + +## 标签 + +```javascript +{ + label: { + visible: true, + + // 格式化 + formatMethod: (value, datum, index) => { + return `${value}%`; + }, + + // 自动处理 + autoRotate: true, // 自动旋转 + autoRotateAngle: [0, 45, 90], // 旋转角度 + autoHide: true, // 自动隐藏重叠 + autoLimit: true, // 自动省略 + + // 样式 + style: { + fontSize: 12, + fill: '#666', + angle: 45 // 固定旋转角度 + }, + + // 间隔显示 + sampling: true, + labelStep: 2 // 每隔2个显示 + } +} +``` + +## 刻度线 + +```javascript +{ + tick: { + visible: true, + tickCount: 5, // 刻度数量 + tickStep: 10, // 刻度间隔 + inside: false, // 是否朝内 + tickSize: 5, // 刻度长度 + style: { + stroke: '#999', + lineWidth: 1 + } + }, + + // 子刻度 + subTick: { + visible: true, + tickCount: 4, // 每个主刻度间的子刻度数 + tickSize: 3, + style: { + stroke: '#ccc' + } + } +} +``` + +## 网格线 + +```javascript +{ + grid: { + visible: true, + style: { + stroke: '#e8e8e8', + lineWidth: 1, + lineDash: [4, 4] // 虚线 + }, + // 交替背景色 + alternateColor: ['#f5f5f5', '#fff'] + } +} +``` + +## 轴线 + +```javascript +{ + domainLine: { + visible: true, + style: { + stroke: '#333', + lineWidth: 1 + } + } +} +``` + +## 双Y轴 + +```javascript +const spec = { + type: 'common', + series: [ + { type: 'bar', id: 'bar', xField: 'x', yField: 'y1' }, + { type: 'line', id: 'line', xField: 'x', yField: 'y2' } + ], + axes: [ + { orient: 'bottom', type: 'band' }, + { + orient: 'left', + type: 'linear', + seriesId: ['bar'], // 关联柱状图 + title: { visible: true, text: '销售额' } + }, + { + orient: 'right', + type: 'linear', + seriesId: ['line'], // 关联折线图 + title: { visible: true, text: '增长率' }, + grid: { visible: false } // 右轴通常不显示网格 + } + ] +}; +``` + +## 时间轴 + +```javascript +{ + orient: 'bottom', + type: 'time', + + // 时间范围 + min: '2024-01-01', + max: '2024-12-31', + + // 标签格式 + label: { + formatMethod: (value) => { + const date = new Date(value); + return `${date.getMonth() + 1}月`; + } + }, + + // 或使用 layers 配置多层标签 + layers: [ + { + tickStep: 1, + timeFormat: '%m/%d' + } + ] +} +``` + +## 对数轴 + +```javascript +{ + orient: 'left', + type: 'log', + base: 10, // 对数底数 + min: 1, // 对数轴最小值不能为0 + label: { + formatMethod: (value) => value.toExponential() + } +} +``` + +## 反转轴 + +```javascript +{ + orient: 'left', + type: 'linear', + inverse: true // 反转方向 +} +``` + +## 完整示例 + +```javascript +axes: [ + { + orient: 'bottom', + type: 'band', + label: { + visible: true, + autoRotate: true, + autoHide: true, + style: { + fontSize: 12, + fill: '#666' + } + }, + tick: { + visible: false + }, + domainLine: { + visible: true, + style: { stroke: '#ddd' } + }, + grid: { + visible: false + } + }, + { + orient: 'left', + type: 'linear', + min: 0, + nice: true, + title: { + visible: true, + text: '数值', + style: { fontSize: 12 } + }, + label: { + visible: true, + formatMethod: (val) => val >= 1000 ? `${val/1000}k` : val, + style: { + fontSize: 12, + fill: '#666' + } + }, + tick: { + visible: true, + style: { stroke: '#ddd' } + }, + domainLine: { + visible: false + }, + grid: { + visible: true, + style: { + stroke: '#eee', + lineDash: [0] + } + } + } +] +``` diff --git a/skills/vchart-development-skill/references/components/crosshair.md b/skills/vchart-development-skill/references/components/crosshair.md new file mode 100644 index 0000000000..4c46270a9f --- /dev/null +++ b/skills/vchart-development-skill/references/components/crosshair.md @@ -0,0 +1,344 @@ +# 十字准星配置 (Crosshair) + +## 基础配置 + +```javascript +crosshair: { + xField: { + visible: true + }, + yField: { + visible: true + } +} +``` + +## X轴方向（垂直线） + +```javascript +crosshair: { + xField: { + visible: true, + + // 线类型 + line: { + type: 'line', // 'line' | 'rect' + visible: true, + style: { + stroke: '#1890ff', + lineWidth: 1, + lineDash: [4, 4], + opacity: 0.8 + } + }, + + // 标签 + label: { + visible: true, + style: { + fill: '#fff', + fontSize: 12 + }, + // 标签背景 + labelBackground: { + visible: true, + style: { + fill: '#1890ff', + cornerRadius: 4 + }, + padding: { top: 4, bottom: 4, left: 8, right: 8 } + }, + // 格式化 + formatMethod: (value) => `X: ${value}` + } + } +} +``` + +## Y轴方向（水平线） + +```javascript +crosshair: { + yField: { + visible: true, + + line: { + type: 'line', + visible: true, + style: { + stroke: '#52c41a', + lineWidth: 1, + lineDash: [4, 4] + } + }, + + label: { + visible: true, + style: { + fill: '#fff', + fontSize: 12 + }, + labelBackground: { + visible: true, + style: { + fill: '#52c41a', + cornerRadius: 4 + }, + padding: { top: 4, bottom: 4, left: 8, right: 8 } + }, + formatMethod: (value) => `Y: ${value.toFixed(2)}` + } + } +} +``` + +## 线类型 + +### 线条类型 + +```javascript +crosshair: { + xField: { + visible: true, + line: { + type: 'line', // 单条线 + style: { + stroke: '#999', + lineDash: [4, 4] + } + } + } +} +``` + +### 矩形类型（条带） + +```javascript +crosshair: { + xField: { + visible: true, + line: { + type: 'rect', // 矩形条带 + style: { + fill: 'rgba(24, 144, 255, 0.1)', + stroke: 'rgba(24, 144, 255, 0.3)', + lineWidth: 1 + }, + // 宽度（仅rect类型） + width: '100%' // 自动适应类目宽度 + } + } +} +``` + +## 触发配置 + +```javascript +crosshair: { + // 触发方式 + trigger: 'hover', // 'hover' | 'click' + + // 触发轴 + triggerOff: 'none', // 关闭触发的方式 + + xField: { + visible: true, + // ... + } +} +``` + +## 多轴配置 + +```javascript +crosshair: { + xField: { + visible: true, + // 绑定到特定轴 + bindingAxesIndex: [0] + }, + yField: { + visible: true, + bindingAxesIndex: [0] // 左Y轴 + }, + // 如果有右Y轴 + yField2: { + visible: true, + bindingAxesIndex: [1] // 右Y轴 + } +} +``` + +## 极坐标系十字准星 + +```javascript +// 雷达图/玫瑰图 +crosshair: { + categoryField: { + visible: true, + line: { + type: 'line', + style: { + stroke: '#999' + } + } + }, + valueField: { + visible: true, + line: { + type: 'line', + style: { + stroke: '#999' + } + } + } +} +``` + +## 禁用十字准星 + +```javascript +crosshair: { + xField: { + visible: false + }, + yField: { + visible: false + } +} + +// 或完全禁用 +crosshair: false +``` + +## 完整示例 + +```javascript +crosshair: { + xField: { + visible: true, + line: { + type: 'line', + visible: true, + style: { + stroke: '#1890ff', + lineWidth: 1, + lineDash: [4, 4], + opacity: 0.8 + } + }, + label: { + visible: true, + style: { + fill: '#fff', + fontSize: 11, + fontWeight: 500 + }, + labelBackground: { + visible: true, + style: { + fill: '#1890ff', + cornerRadius: 4 + }, + padding: { top: 4, bottom: 4, left: 8, right: 8 } + } + } + }, + yField: { + visible: true, + line: { + type: 'line', + visible: true, + style: { + stroke: '#52c41a', + lineWidth: 1, + lineDash: [4, 4], + opacity: 0.8 + } + }, + label: { + visible: true, + style: { + fill: '#fff', + fontSize: 11, + fontWeight: 500 + }, + labelBackground: { + visible: true, + style: { + fill: '#52c41a', + cornerRadius: 4 + }, + padding: { top: 4, bottom: 4, left: 8, right: 8 } + }, + formatMethod: (value) => { + return typeof value === 'number' ? value.toLocaleString() : value; + } + } + } +} +``` + +## 常见配置场景 + +### 只显示X轴十字线 + +```javascript +crosshair: { + xField: { + visible: true, + line: { + type: 'line', + style: { stroke: '#999', lineDash: [4, 4] } + } + } +} +``` + +### 使用矩形高亮当前类目 + +```javascript +crosshair: { + xField: { + visible: true, + line: { + type: 'rect', + style: { + fill: 'rgba(0, 0, 0, 0.05)' + } + }, + label: { + visible: false + } + } +} +``` + +### 同时显示数值标签 + +```javascript +crosshair: { + xField: { + visible: true, + line: { type: 'line', style: { stroke: '#999' } }, + label: { + visible: true, + labelBackground: { + visible: true, + style: { fill: '#333' } + } + } + }, + yField: { + visible: true, + line: { type: 'line', style: { stroke: '#999' } }, + label: { + visible: true, + labelBackground: { + visible: true, + style: { fill: '#333' } + } + } + } +} +``` diff --git a/skills/vchart-development-skill/references/components/dataZoom.md b/skills/vchart-development-skill/references/components/dataZoom.md new file mode 100644 index 0000000000..e14473f232 --- /dev/null +++ b/skills/vchart-development-skill/references/components/dataZoom.md @@ -0,0 +1,328 @@ +# 数据缩放配置 (DataZoom) + +## 基础配置 + +```javascript +dataZoom: [ + { + orient: 'bottom', + start: 0, + end: 1 + } +] +``` + +## 位置配置 (orient) + +| 值 | 说明 | +|---|------| +| `'bottom'` | 底部（水平） | +| `'top'` | 顶部（水平） | +| `'left'` | 左侧（垂直） | +| `'right'` | 右侧（垂直） | + +## 范围配置 + +```javascript +dataZoom: [ + { + orient: 'bottom', + + // 初始范围 (0-1 之间的比例) + start: 0.2, // 起始位置 20% + end: 0.8, // 结束位置 80% + + // 或使用百分比字符串 + startValue: '20%', + endValue: '80%', + + // 或使用具体数据值 + startValue: '2024-01', + endValue: '2024-06', + + // 范围限制 + rangeMode: ['percent', 'percent'], // 'percent' | 'value' + minSpan: 0.1, // 最小范围 10% + maxSpan: 1 // 最大范围 100% + } +] +``` + +## 背景图表 + +```javascript +dataZoom: [ + { + orient: 'bottom', + + // 显示缩略图背景 + showDetail: true, + backgroundChart: { + line: { + style: { + stroke: '#999', + lineWidth: 1 + } + }, + area: { + style: { + fill: 'rgba(153, 153, 153, 0.2)' + } + } + } + } +] +``` + +## 滑块样式 + +```javascript +dataZoom: [ + { + orient: 'bottom', + + // 中间区域（选中区域） + middleHandler: { + visible: true, + icon: { + style: { + fill: '#1890ff', + stroke: '#1890ff' + } + }, + background: { + style: { + fill: 'rgba(24, 144, 255, 0.2)' + } + } + }, + + // 起始手柄 + startHandler: { + visible: true, + style: { + fill: '#1890ff' + } + }, + + // 结束手柄 + endHandler: { + visible: true, + style: { + fill: '#1890ff' + } + }, + + // 文字标签 + startText: { + visible: true, + style: { + fill: '#666', + fontSize: 10 + }, + formatMethod: (value) => value + }, + endText: { + visible: true, + style: { + fill: '#666', + fontSize: 10 + } + } + } +] +``` + +## 轨道样式 + +```javascript +dataZoom: [ + { + orient: 'bottom', + + // 轨道背景 + background: { + style: { + fill: '#f0f0f0', + cornerRadius: 4 + } + }, + + // 选中区域 + selectedBackground: { + style: { + fill: 'rgba(24, 144, 255, 0.3)', + cornerRadius: 4 + } + } + } +] +``` + +## 尺寸配置 + +```javascript +dataZoom: [ + { + orient: 'bottom', + height: 30, // 高度（水平方向） + // width: 30, // 宽度（垂直方向） + + // 与图表的间距 + padding: { + top: 10 + } + } +] +``` + +## 关联配置 + +```javascript +// 关联特定轴 +dataZoom: [ + { + orient: 'bottom', + axisIndex: 0, // 关联第一个X轴 + // 或 + axisId: 'bottomAxis', // 关联指定ID的轴 + + // 过滤模式 + filterMode: 'filter', // 'filter' | 'weakFilter' | 'empty' | 'none' + } +] +``` + +## 交互配置 + +```javascript +dataZoom: [ + { + orient: 'bottom', + + // 是否可拖动 + roam: true, + + // 实时更新（拖动时） + realTime: true, + + // 锁定选择区域大小（只能平移） + zoomLock: false, + + // 自动范围调整 + auto: false + } +] +``` + +## 多个 DataZoom + +```javascript +dataZoom: [ + // 底部 X 轴缩放 + { + orient: 'bottom', + axisIndex: 0, + start: 0, + end: 1 + }, + // 右侧 Y 轴缩放 + { + orient: 'right', + axisIndex: 1, + start: 0, + end: 1 + } +] +``` + +## 完整示例 + +```javascript +dataZoom: [ + { + orient: 'bottom', + + // 初始范围 + start: 0, + end: 0.5, + + // 范围限制 + minSpan: 0.1, + maxSpan: 1, + + // 尺寸 + height: 40, + padding: { top: 10, bottom: 10 }, + + // 背景图表 + showDetail: true, + backgroundChart: { + line: { + style: { stroke: '#bbb', lineWidth: 1 } + }, + area: { + style: { fill: 'rgba(187, 187, 187, 0.2)' } + } + }, + + // 选中区域 + selectedBackground: { + style: { + fill: 'rgba(24, 144, 255, 0.15)', + cornerRadius: 4 + } + }, + + // 手柄 + startHandler: { + visible: true, + style: { + fill: '#1890ff', + symbolType: 'rect', + width: 8, + height: 24, + cornerRadius: 4 + } + }, + endHandler: { + visible: true, + style: { + fill: '#1890ff', + symbolType: 'rect', + width: 8, + height: 24, + cornerRadius: 4 + } + }, + + // 文字 + startText: { + visible: true, + style: { + fill: '#666', + fontSize: 10 + } + }, + endText: { + visible: true, + style: { + fill: '#666', + fontSize: 10 + } + }, + + // 交互 + roam: true, + realTime: true + } +] +``` + +## 事件监听 + +```javascript +vchart.on('dataZoom', (params) => { + console.log('DataZoom 范围变化:', params.start, params.end); +}); +``` diff --git a/skills/vchart-development-skill/references/components/label.md b/skills/vchart-development-skill/references/components/label.md new file mode 100644 index 0000000000..902c647a06 --- /dev/null +++ b/skills/vchart-development-skill/references/components/label.md @@ -0,0 +1,329 @@ +# 数据标签配置 (Label) + +## 基础配置 + +```javascript +label: { + visible: true +} +``` + +## 位置配置 + +### 笛卡尔坐标系（柱/线/面积） + +| 位置 | 说明 | +|-----|------| +| `'top'` | 上方 | +| `'bottom'` | 下方 | +| `'left'` | 左侧 | +| `'right'` | 右侧 | +| `'inside'` | 内部居中 | +| `'inside-top'` | 内部上方 | +| `'inside-bottom'` | 内部下方 | + +```javascript +label: { + visible: true, + position: 'top' +} +``` + +### 饼图 + +| 位置 | 说明 | +|-----|------| +| `'outside'` | 外部 | +| `'inside'` | 内部 | + +```javascript +label: { + visible: true, + position: 'outside' +} +``` + +## 样式配置 + +```javascript +label: { + visible: true, + style: { + fill: '#333', + fontSize: 12, + fontWeight: 'normal', + fontFamily: 'sans-serif', + + // 文字描边 + stroke: '#fff', + lineWidth: 2 + } +} +``` + +## 格式化 + +```javascript +label: { + visible: true, + formatMethod: (value, datum, ctx) => { + // value: 原始值 + // datum: 数据项 + // ctx: 上下文信息 + + // 数值格式化 + if (typeof value === 'number') { + return value.toLocaleString(); + } + + // 百分比 + return `${(value * 100).toFixed(1)}%`; + } +} +``` + +## 偏移配置 + +```javascript +label: { + visible: true, + offset: 5, // 与图元的距离 + + // 或分别设置 + offsetX: 0, + offsetY: -5 +} +``` + +## 防重叠 + +```javascript +label: { + visible: true, + + // 自动隐藏重叠标签 + overlap: { + strategy: 'bound', // 'bound' | 'fixedIndex' + avoidBaseMark: true // 避开图元 + }, + + // 或使用智能布局 + smartInvert: true // 根据背景自动调整颜色 +} +``` + +## 条件显示 + +```javascript +label: { + visible: (datum) => datum.value > 100, // 函数形式 + + // 或在 formatMethod 中返回空 + formatMethod: (value, datum) => { + if (datum.value < 50) return ''; // 不显示 + return value; + } +} +``` + +## 系列标签配置 + +在系列配置中设置标签： + +```javascript +// 柱状图 +bar: { + style: { /* 柱子样式 */ } +}, +label: { + visible: true, + position: 'top' +} + +// 折线图 +line: { + style: { /* 线条样式 */ } +}, +point: { + style: { /* 点样式 */ } +}, +label: { + visible: true, + position: 'top' +} + +// 饼图 +pie: { + style: { /* 扇区样式 */ } +}, +label: { + visible: true, + position: 'outside' +} +``` + +## 饼图引导线 + +```javascript +label: { + visible: true, + position: 'outside', + + // 引导线 + line: { + visible: true, + line1MinLength: 20, // 第一段最小长度 + line2MinLength: 10, // 第二段最小长度 + style: { + stroke: '#999', + lineWidth: 1 + } + }, + + // 布局 + layout: { + align: 'labelLine', // 'arc' | 'labelLine' | 'edge' + strategy: 'priority', // 'priority' | 'vertical' | 'none' + tangentConstraint: true + } +} +``` + +## 多行标签 + +```javascript +label: { + visible: true, + formatMethod: (value, datum) => { + return `${datum.category}\n${value}`; // 使用换行符 + }, + style: { + lineHeight: 18 + } +} +``` + +## 富文本标签 + +```javascript +label: { + visible: true, + formatMethod: (value, datum) => { + return { + type: 'rich', + text: [ + { text: datum.category, fill: '#666', fontSize: 10 }, + { text: '\n' }, + { text: String(value), fill: '#333', fontSize: 14, fontWeight: 'bold' } + ] + }; + } +} +``` + +## 堆叠图标签 + +```javascript +// 堆叠柱状图 +const spec = { + type: 'bar', + stack: true, + label: { + visible: true, + position: 'inside', + style: { + fill: '#fff' + }, + // 只显示大于阈值的标签 + formatMethod: (value, datum) => { + return value > 50 ? value : ''; + } + } +}; + +// 如需显示总计 +extensionMark: [ + { + type: 'text', + dataId: 'data', + visible: true, + style: { + text: (datum) => datum._stack_total, + x: (datum, ctx) => ctx.valueToX([datum.category]), + y: (datum, ctx) => ctx.valueToY([datum._stack_end]), + textAlign: 'center', + textBaseline: 'bottom', + fill: '#333' + } + } +] +``` + +## 完整示例 + +### 柱状图标签 + +```javascript +label: { + visible: true, + position: 'top', + offset: 5, + style: { + fill: '#333', + fontSize: 12 + }, + formatMethod: (value) => { + if (value >= 1000) { + return `${(value / 1000).toFixed(1)}k`; + } + return value; + } +} +``` + +### 饼图标签 + +```javascript +label: { + visible: true, + position: 'outside', + line: { + visible: true, + style: { stroke: '#999' } + }, + layout: { + align: 'labelLine', + strategy: 'priority' + }, + style: { + fontSize: 12, + fill: '#333' + }, + formatMethod: (text, datum) => { + return `${datum.category}: ${datum.value} (${(datum.ratio * 100).toFixed(1)}%)`; + } +} +``` + +### 折线图标签（只显示最后一个点） + +```javascript +label: { + visible: true, + position: 'right', + style: { + fill: '#333', + fontSize: 12 + }, + formatMethod: (value, datum, ctx) => { + const data = ctx.data; + const lastIndex = data.length - 1; + const currentIndex = data.findIndex(d => d === datum); + + if (currentIndex === lastIndex) { + return value; + } + return ''; + } +} +``` diff --git a/skills/vchart-development-skill/references/components/legend.md b/skills/vchart-development-skill/references/components/legend.md new file mode 100644 index 0000000000..649d59daf1 --- /dev/null +++ b/skills/vchart-development-skill/references/components/legend.md @@ -0,0 +1,371 @@ +# 图例配置 + +## 基础配置 + +```javascript +legends: { + visible: true, + orient: 'top', + position: 'middle' +} +``` + +## 位置配置 + +### orient - 方向 + +| 值 | 说明 | +|---|------| +| `'top'` | 顶部 | +| `'bottom'` | 底部 | +| `'left'` | 左侧 | +| `'right'` | 右侧 | + +### position - 对齐 + +| 值 | 说明 | +|---|------| +| `'start'` | 起始位置 | +| `'middle'` | 居中 | +| `'end'` | 结束位置 | + +## 布局配置 + +```javascript +legends: { + visible: true, + orient: 'bottom', + position: 'middle', + + // 布局类型 + layoutType: 'normal', // 'normal' | 'absolute' + + // 间距 + padding: { + top: 10, + bottom: 10, + left: 20, + right: 20 + }, + + // 与图表的间距 + offsetX: 0, + offsetY: 0, + + // 最大宽高 + maxWidth: 200, + maxHeight: 100 +} +``` + +## 图例项配置 + +```javascript +legends: { + item: { + // 图例项间距 + spaceCol: 10, // 列间距 + spaceRow: 5, // 行间距 + + // 图例图形 + shape: { + visible: true, + space: 4, // 图形与文字间距 + style: { + size: 10, + symbolType: 'circle', // 'circle' | 'square' | 'rect' | ... + fillOpacity: 1 + } + }, + + // 图例文字 + label: { + space: 4, + style: { + fontSize: 12, + fill: '#333', + fontWeight: 'normal' + }, + // 格式化 + formatMethod: (label, datum, index) => { + return `${label} (${datum.value})`; + } + }, + + // 数值（用于连续图例） + value: { + visible: false, + space: 4, + style: { + fontSize: 12, + fill: '#666' + } + }, + + // 背景 + background: { + visible: false, + style: { + fill: '#f5f5f5', + cornerRadius: 2 + } + } + } +} +``` + +## 交互配置 + +```javascript +legends: { + // 选择模式 + selectMode: 'multiple', // 'single' | 'multiple' + + // hover 效果 + hover: true, + + // 选中状态 + select: true, + + // 默认选中 + defaultSelected: ['系列1', '系列2'], + + // 反选（取消选中的显示） + reversed: false +} +``` + +## 图例状态样式 + +```javascript +legends: { + item: { + shape: { + state: { + // 选中状态 + selected: { + fillOpacity: 1 + }, + // 未选中状态 + unSelected: { + fillOpacity: 0.3 + }, + // hover状态 + selectedHover: { + fillOpacity: 1 + }, + unSelectedHover: { + fillOpacity: 0.5 + } + } + }, + label: { + state: { + selected: { + fill: '#333' + }, + unSelected: { + fill: '#ccc' + } + } + } + } +} +``` + +## 自定义图例数据 + +```javascript +legends: { + visible: true, + data: (data) => { + // data 是自动生成的图例数据 + // 可以进行过滤、排序、修改 + return data.map(item => ({ + label: item.label + ' (自定义)', + shape: { + fill: item.shape.fill, + symbolType: 'circle' + } + })); + } +} + +// 或完全自定义 +legends: { + visible: true, + data: [ + { label: '系列A', shape: { fill: '#1890ff', symbolType: 'circle' } }, + { label: '系列B', shape: { fill: '#52c41a', symbolType: 'square' } } + ] +} +``` + +## 图例标题 + +```javascript +legends: { + title: { + visible: true, + text: '图例标题', + space: 10, + style: { + fontSize: 14, + fontWeight: 'bold', + fill: '#333' + } + } +} +``` + +## 翻页配置 + +当图例项过多时： + +```javascript +legends: { + pager: { + visible: true, + + // 翻页按钮 + handler: { + style: { + fill: '#666' + }, + state: { + hover: { fill: '#333' }, + disable: { fill: '#ccc' } + } + }, + + // 页码文字 + textStyle: { + fill: '#666', + fontSize: 12 + } + }, + + // 最大行/列数 + maxRow: 2, + maxCol: 4 +} +``` + +## 连续图例（颜色/尺寸） + +用于热力图、散点图等连续映射： + +```javascript +// 颜色图例 +legends: { + visible: true, + type: 'color', + field: 'value', + orient: 'right', + + // 滑块 + rail: { + width: 200, + height: 10, + style: { + cornerRadius: 5 + } + }, + + // 滑块手柄 + handler: { + visible: true + }, + + // 范围文字 + startText: { + visible: true, + style: { fill: '#666' } + }, + endText: { + visible: true, + style: { fill: '#666' } + } +} + +// 尺寸图例 +legends: { + visible: true, + type: 'size', + field: 'population', + orient: 'bottom' +} +``` + +## 多图例 + +```javascript +// 使用数组配置多个图例 +legends: [ + { + visible: true, + orient: 'top', + seriesId: ['bar'], // 关联的系列 + id: 'legend1' + }, + { + visible: true, + orient: 'right', + seriesId: ['scatter'], + id: 'legend2' + } +] +``` + +## 完整示例 + +```javascript +legends: { + visible: true, + orient: 'top', + position: 'start', + padding: { left: 50 }, + + title: { + visible: true, + text: '产品类型', + style: { + fontSize: 12, + fontWeight: 'bold' + } + }, + + item: { + spaceCol: 20, + spaceRow: 8, + + shape: { + space: 6, + style: { + size: 12, + symbolType: 'square', + cornerRadius: 2 + } + }, + + label: { + style: { + fontSize: 12, + fill: '#333' + } + } + }, + + selectMode: 'multiple', + hover: true, + + pager: { + visible: true, + handler: { + style: { fill: '#666' } + } + }, + + maxRow: 1 +} +``` diff --git a/skills/vchart-development-skill/references/components/mark.md b/skills/vchart-development-skill/references/components/mark.md new file mode 100644 index 0000000000..9a911a24c3 --- /dev/null +++ b/skills/vchart-development-skill/references/components/mark.md @@ -0,0 +1,440 @@ +# 标注配置 (MarkLine / MarkArea / MarkPoint) + +## MarkLine - 标注线 + +### 基础配置 + +```javascript +markLine: [ + { + y: 100, // Y轴位置 + // 或 + x: 'A', // X轴位置（类目） + + // 标签 + label: { + visible: true, + text: '平均值' + } + } +] +``` + +### 水平参考线 + +```javascript +markLine: [ + { + y: 150, + line: { + style: { + stroke: '#f5222d', + lineWidth: 2, + lineDash: [4, 4] + } + }, + label: { + visible: true, + text: '目标值: 150', + position: 'end', + style: { + fill: '#f5222d', + fontSize: 12 + } + } + } +] +``` + +### 垂直参考线 + +```javascript +markLine: [ + { + x: '3月', + line: { + style: { + stroke: '#1890ff', + lineWidth: 1, + lineDash: [4, 4] + } + }, + label: { + visible: true, + text: '转折点', + position: 'start' + } + } +] +``` + +### 使用数据计算 + +```javascript +markLine: [ + { + // 使用聚合函数 + y: 'average', // 'average' | 'min' | 'max' | 'median' + + // 或自定义计算 + y: (data) => { + const sum = data.reduce((acc, d) => acc + d.value, 0); + return sum / data.length; + }, + + label: { + visible: true, + text: (markData) => `平均值: ${markData.y.toFixed(2)}` + } + } +] +``` + +### 斜线标注 + +```javascript +markLine: [ + { + coordinates: [ + { x: 'A', y: 50 }, // 起点 + { x: 'D', y: 200 } // 终点 + ], + line: { + style: { + stroke: '#722ed1', + lineWidth: 2 + } + }, + label: { + visible: true, + text: '趋势线' + } + } +] +``` + +## MarkArea - 标注区域 + +### 基础配置 + +```javascript +markArea: [ + { + y: 100, // 起始Y + y1: 200, // 结束Y + + area: { + style: { + fill: 'rgba(24, 144, 255, 0.1)' + } + }, + + label: { + visible: true, + text: '正常范围' + } + } +] +``` + +### 水平区域 + +```javascript +markArea: [ + { + y: 80, + y1: 120, + area: { + style: { + fill: 'rgba(82, 196, 26, 0.2)', + stroke: '#52c41a', + lineWidth: 1, + lineDash: [4, 4] + } + }, + label: { + visible: true, + text: '达标区间', + position: 'right', + style: { + fill: '#52c41a', + fontSize: 12 + } + } + } +] +``` + +### 垂直区域（类目范围） + +```javascript +markArea: [ + { + x: '1月', + x1: '3月', + area: { + style: { + fill: 'rgba(250, 173, 20, 0.1)' + } + }, + label: { + visible: true, + text: 'Q1', + position: 'top' + } + } +] +``` + +### 多个区域 + +```javascript +markArea: [ + { + y: 0, + y1: 60, + area: { + style: { fill: 'rgba(245, 34, 45, 0.1)' } + }, + label: { + visible: true, + text: '低', + position: 'insideLeft' + } + }, + { + y: 60, + y1: 140, + area: { + style: { fill: 'rgba(250, 173, 20, 0.1)' } + }, + label: { + visible: true, + text: '中', + position: 'insideLeft' + } + }, + { + y: 140, + y1: 200, + area: { + style: { fill: 'rgba(82, 196, 26, 0.1)' } + }, + label: { + visible: true, + text: '高', + position: 'insideLeft' + } + } +] +``` + +## MarkPoint - 标注点 + +### 基础配置 + +```javascript +markPoint: [ + { + coordinate: { + x: '3月', + y: 180 + }, + itemContent: { + type: 'text', + text: '峰值' + } + } +] +``` + +### 带箭头的标注 + +```javascript +markPoint: [ + { + coordinate: { + x: '5月', + y: 250 + }, + itemLine: { + visible: true, + decorativeLine: { + visible: true + }, + startSymbol: { + visible: true, + style: { + fill: '#f5222d' + } + } + }, + itemContent: { + type: 'text', + text: '历史最高', + style: { + fill: '#f5222d', + fontSize: 12, + fontWeight: 'bold' + } + } + } +] +``` + +### 带图片的标注 + +```javascript +markPoint: [ + { + coordinate: { + x: 'A', + y: 100 + }, + itemContent: { + type: 'image', + image: 'path/to/icon.png', + width: 20, + height: 20 + } + } +] +``` + +### 富文本标注 + +```javascript +markPoint: [ + { + coordinate: { + x: '6月', + y: 300 + }, + itemContent: { + type: 'richText', + richText: { + text: [ + { text: '⬆ ', fill: '#52c41a', fontSize: 14 }, + { text: '+25%', fill: '#52c41a', fontSize: 12, fontWeight: 'bold' } + ] + } + } + } +] +``` + +## 标签位置配置 + +### MarkLine 标签位置 + +| 位置 | 说明 | +|-----|------| +| `'start'` | 线起点 | +| `'middle'` | 线中间 | +| `'end'` | 线终点 | +| `'insideStartTop'` | 起点内上方 | +| `'insideEndBottom'` | 终点内下方 | + +### MarkArea 标签位置 + +| 位置 | 说明 | +|-----|------| +| `'left'` | 左侧 | +| `'right'` | 右侧 | +| `'top'` | 顶部 | +| `'bottom'` | 底部 | +| `'insideLeft'` | 内部左侧 | +| `'insideRight'` | 内部右侧 | +| `'insideTop'` | 内部顶部 | +| `'insideBottom'` | 内部底部 | + +## 完整示例 + +```javascript +const spec = { + type: 'line', + data: [/* 数据 */], + xField: 'month', + yField: 'value', + + // 参考线 + markLine: [ + { + y: 'average', + line: { + style: { + stroke: '#1890ff', + lineWidth: 2, + lineDash: [4, 4] + } + }, + label: { + visible: true, + text: (markData) => `平均值: ${markData.y.toFixed(0)}`, + position: 'end', + style: { + fill: '#1890ff', + fontSize: 12 + }, + labelBackground: { + visible: true, + style: { + fill: '#fff', + stroke: '#1890ff', + cornerRadius: 4 + }, + padding: { top: 4, bottom: 4, left: 8, right: 8 } + } + } + } + ], + + // 区域标注 + markArea: [ + { + y: 0, + y1: 100, + area: { + style: { + fill: 'rgba(245, 34, 45, 0.05)' + } + }, + label: { + visible: true, + text: '警戒区', + position: 'insideLeft', + style: { + fill: '#f5222d', + fontSize: 10 + } + } + } + ], + + // 点标注 + markPoint: [ + { + coordinate: { + x: '6月', + y: 280 + }, + itemLine: { + visible: true, + type: 'type-s', + startSymbol: { + visible: true, + style: { fill: '#52c41a' } + } + }, + itemContent: { + type: 'text', + text: '本月最高 ↑', + style: { + fill: '#52c41a', + fontSize: 12 + } + } + } + ] +}; +``` diff --git a/skills/vchart-development-skill/references/components/title.md b/skills/vchart-development-skill/references/components/title.md new file mode 100644 index 0000000000..1db5d6ec0f --- /dev/null +++ b/skills/vchart-development-skill/references/components/title.md @@ -0,0 +1,242 @@ +# 标题配置 + +## 基础配置 + +```javascript +title: { + visible: true, + text: '图表标题' +} +``` + +## 主标题配置 + +```javascript +title: { + visible: true, + text: '主标题文本', + + // 位置 + orient: 'top', // 'top' | 'bottom' | 'left' | 'right' + align: 'center', // 'left' | 'center' | 'right' + verticalAlign: 'top', // 'top' | 'middle' | 'bottom' + + // 间距 + padding: { + top: 10, + bottom: 10, + left: 0, + right: 0 + }, + + // 样式 + textStyle: { + fontSize: 18, + fontWeight: 'bold', + fill: '#333', + fontFamily: 'PingFang SC, Microsoft YaHei, sans-serif', + lineHeight: 24 + } +} +``` + +## 副标题配置 + +```javascript +title: { + visible: true, + text: '主标题', + subtext: '副标题描述文本', + + // 副标题样式 + subtextStyle: { + fontSize: 12, + fill: '#999', + fontWeight: 'normal', + lineHeight: 18 + } +} +``` + +## 位置配置 + +### orient - 标题区域位置 + +```javascript +// 顶部 +title: { orient: 'top' } + +// 底部 +title: { orient: 'bottom' } + +// 左侧（垂直文字） +title: { orient: 'left' } + +// 右侧（垂直文字） +title: { orient: 'right' } +``` + +### align - 水平对齐 + +```javascript +// 左对齐 +title: { align: 'left' } + +// 居中 +title: { align: 'center' } + +// 右对齐 +title: { align: 'right' } +``` + +### 精确位置 + +```javascript +title: { + visible: true, + text: '标题', + + // 使用百分比或像素 + x: '50%', // 水平位置 + y: 20, // 垂直位置 + + // 或使用 layoutType: 'absolute' + layoutType: 'absolute' +} +``` + +## 多行标题 + +```javascript +title: { + visible: true, + text: ['第一行标题', '第二行标题'], + textStyle: { + lineHeight: 24 + } +} +``` + +## 富文本标题 + +```javascript +title: { + visible: true, + text: { + type: 'rich', + text: [ + { text: '销售额 ', fill: '#333', fontSize: 16 }, + { text: '2024年度', fill: '#1890ff', fontSize: 14 }, + { text: ' 报告', fill: '#333', fontSize: 16 } + ] + } +} +``` + +## 带图标的标题 + +```javascript +title: { + visible: true, + text: '📊 数据概览', + textStyle: { + fontSize: 18 + } +} + +// 或使用图片 +title: { + visible: true, + text: { + type: 'rich', + text: [ + { + type: 'image', + image: 'path/to/icon.png', + width: 20, + height: 20 + }, + { text: ' 图表标题', fill: '#333' } + ] + } +} +``` + +## 交互配置 + +```javascript +title: { + visible: true, + text: '可点击的标题', + + // 样式状态 + textStyle: { + fill: '#1890ff', + cursor: 'pointer' + } +} + +// 然后监听事件 +vchart.on('click', { type: 'title' }, (params) => { + console.log('标题被点击'); +}); +``` + +## 完整示例 + +```javascript +title: { + visible: true, + text: '2024年度销售数据分析', + subtext: '数据来源：销售管理系统 | 更新时间：2024-12-31', + + orient: 'top', + align: 'left', + + padding: { + top: 10, + bottom: 20, + left: 20 + }, + + textStyle: { + fontSize: 20, + fontWeight: 'bold', + fill: '#1a1a1a', + fontFamily: 'PingFang SC, Microsoft YaHei, sans-serif' + }, + + subtextStyle: { + fontSize: 12, + fill: '#999', + fontWeight: 'normal' + } +} +``` + +## 动态标题 + +通过更新 spec 实现： + +```javascript +// 初始配置 +const spec = { + title: { + visible: true, + text: '初始标题' + }, + // ... +}; + +const vchart = new VChart(spec, { dom: 'container' }); +vchart.renderSync(); + +// 更新标题 +vchart.updateSpec({ + ...spec, + title: { + visible: true, + text: '更新后的标题' + } +}); +``` diff --git a/skills/vchart-development-skill/references/components/tooltip.md b/skills/vchart-development-skill/references/components/tooltip.md new file mode 100644 index 0000000000..65df45534c --- /dev/null +++ b/skills/vchart-development-skill/references/components/tooltip.md @@ -0,0 +1,355 @@ +# Tooltip 配置 + +## 基础配置 + +```javascript +tooltip: { + visible: true, + trigger: 'axis' // 触发方式 +} +``` + +## 触发方式 (trigger) + +| 值 | 说明 | 适用场景 | +|---|------|---------| +| `'mark'` | 图元触发 | 散点图、饼图等 | +| `'axis'` | 坐标轴触发 | 折线图、柱状图等 | + +```javascript +// mark 触发 - hover到具体图形才显示 +tooltip: { + trigger: 'mark' +} + +// axis 触发 - hover到X轴位置就显示 +tooltip: { + trigger: 'axis' +} +``` + +## 内容配置 + +### mark 类型内容 + +```javascript +tooltip: { + mark: { + // 标题 + title: { + visible: true, + value: (datum) => datum.category + }, + + // 内容 + content: [ + { + key: '数值', // 左侧标签 + value: (datum) => datum.value // 右侧数值 + }, + { + key: '占比', + value: (datum) => `${(datum.ratio * 100).toFixed(1)}%` + } + ] + } +} +``` + +### dimension 类型内容（axis触发） + +```javascript +tooltip: { + trigger: 'axis', + dimension: { + title: { + value: (datum) => datum[0]?.category + }, + content: [ + { + key: (datum) => datum.type, + value: (datum) => datum.value + } + ] + } +} +``` + +## 内容格式化 + +### 基础格式化 + +```javascript +tooltip: { + mark: { + content: [ + { + key: '销售额', + value: (datum) => { + // 数值格式化 + return datum.value.toLocaleString() + ' 元'; + } + } + ] + } +} +``` + +### 条件显示 + +```javascript +tooltip: { + mark: { + content: [ + { + key: '状态', + value: (datum) => datum.value > 100 ? '达标' : '未达标', + visible: (datum) => datum.value !== null // 条件显示 + } + ] + } +} +``` + +### 自定义形状颜色 + +```javascript +tooltip: { + mark: { + content: [ + { + key: '系列A', + value: (datum) => datum.value, + shapeType: 'circle', + shapeColor: '#1890ff' + } + ] + } +} +``` + +## 样式配置 + +```javascript +tooltip: { + style: { + // 面板样式 + panel: { + backgroundColor: 'rgba(0, 0, 0, 0.8)', + border: { + color: '#333', + width: 1, + radius: 4 + }, + shadow: { + x: 0, + y: 2, + blur: 10, + color: 'rgba(0, 0, 0, 0.2)' + }, + padding: { + top: 10, + bottom: 10, + left: 14, + right: 14 + } + }, + + // 标题样式 + titleLabel: { + fontSize: 14, + fontWeight: 'bold', + fill: '#fff' + }, + + // 内容键样式 + keyLabel: { + fontSize: 12, + fill: '#aaa' + }, + + // 内容值样式 + valueLabel: { + fontSize: 12, + fill: '#fff' + }, + + // 形状样式 + shape: { + size: 8, + spacing: 6 + } + } +} +``` + +## 位置配置 + +```javascript +tooltip: { + // 偏移 + offsetX: 10, + offsetY: 10, + + // 固定位置（不跟随鼠标） + fixedPosition: true, + position: { + x: 100, + y: 100 + }, + + // 或使用函数 + position: (event, params) => { + return { + x: event.canvasX + 20, + y: event.canvasY + 20 + }; + }, + + // 限制在图表区域内 + confine: true +} +``` + +## 交互配置 + +```javascript +tooltip: { + // 进入延迟 + enterable: true, // 鼠标可进入tooltip + + // 显示延迟 + showDelay: 50, + + // 隐藏延迟 + hideDelay: 100, + + // 过渡动画 + transitionDuration: 100 +} +``` + +## 自定义渲染 + +### 使用 renderMode + +```javascript +tooltip: { + renderMode: 'html', // 'canvas' | 'html' + + // HTML模式可以完全自定义 + handler: { + showTooltip: (activeType, data, params) => { + // 自定义显示逻辑 + const container = document.getElementById('custom-tooltip'); + container.innerHTML = `
${data[0].datum.value}
`; + container.style.display = 'block'; + }, + hideTooltip: () => { + document.getElementById('custom-tooltip').style.display = 'none'; + } + } +} +``` + +### DOM 自定义 + +```javascript +tooltip: { + mark: { + content: [ + { + // 使用DOM配置 + hasShape: true, + key: (datum) => datum.type, + value: (datum) => { + return { + type: 'rich', + text: [ + { text: datum.value, fill: '#333', fontWeight: 'bold' }, + { text: ' 元', fill: '#999' } + ] + }; + } + } + ] + } +} +``` + +## 禁用 Tooltip + +```javascript +// 完全禁用 +tooltip: { + visible: false +} + +// 或在特定系列禁用 +series: [ + { + type: 'bar', + tooltip: { + visible: false + } + } +] +``` + +## 完整示例 + +```javascript +tooltip: { + visible: true, + trigger: 'axis', + + dimension: { + title: { + value: (datum) => datum[0]?.month || '' + }, + content: [ + { + key: (datum) => datum.type, + value: (datum) => `${datum.value.toLocaleString()} 万元`, + shapeType: 'square' + } + ] + }, + + style: { + panel: { + backgroundColor: '#fff', + border: { + color: '#e8e8e8', + width: 1, + radius: 8 + }, + shadow: { + x: 0, + y: 4, + blur: 12, + color: 'rgba(0, 0, 0, 0.15)' + }, + padding: { top: 12, bottom: 12, left: 16, right: 16 } + }, + titleLabel: { + fontSize: 14, + fontWeight: 'bold', + fill: '#333' + }, + keyLabel: { + fontSize: 12, + fill: '#666' + }, + valueLabel: { + fontSize: 12, + fill: '#333', + fontWeight: 500 + } + }, + + enterable: false, + confine: true, + transitionDuration: 150 +} +``` diff --git a/skills/vchart-development-skill/references/examples/area/basic-area.md b/skills/vchart-development-skill/references/examples/area/basic-area.md new file mode 100644 index 0000000000..b19829ca0e --- /dev/null +++ b/skills/vchart-development-skill/references/examples/area/basic-area.md @@ -0,0 +1,223 @@ +# 基础面积图 + +## 适用场景 +- 展示数据随时间的累积变化 +- 强调数值变化的量感 +- 多系列数据的堆叠累积展示 + +## 基础配置 + +```javascript +const spec = { + type: 'area', + data: [ + { + id: 'areaData', + values: [ + { date: '2024-01', value: 120 }, + { date: '2024-02', value: 150 }, + { date: '2024-03', value: 180 }, + { date: '2024-04', value: 135 }, + { date: '2024-05', value: 200 }, + { date: '2024-06', value: 220 } + ] + } + ], + xField: 'date', + yField: 'value' +}; + +const vchart = new VChart(spec, { dom: 'container' }); +vchart.renderSync(); +``` + +## 必填配置项 + +| 配置项 | 类型 | 说明 | +|-------|------|------| +| `type` | `'area'` | 图表类型 | +| `data` | `Array` | 数据配置 | +| `xField` | `string` | X轴映射字段 | +| `yField` | `string` | Y轴映射字段 | + +## 常用可选配置 + +### 面积样式 +```javascript +area: { + style: { + fill: { + gradient: 'linear', + x0: 0.5, y0: 0, + x1: 0.5, y1: 1, + stops: [ + { offset: 0, color: 'rgba(24, 144, 255, 0.8)' }, + { offset: 1, color: 'rgba(24, 144, 255, 0.1)' } + ] + } + } +} +``` + +### 线条样式 +```javascript +line: { + style: { + stroke: '#1890ff', + lineWidth: 2, + curveType: 'monotone' + } +} +``` + +### 数据点样式 +```javascript +point: { + visible: true, + style: { + fill: '#1890ff', + stroke: '#fff', + size: 6, + lineWidth: 2 + } +} +``` + +## 堆叠面积图 + +```javascript +const spec = { + type: 'area', + data: [ + { + id: 'areaData', + values: [ + { date: '2024-01', type: '产品A', value: 120 }, + { date: '2024-01', type: '产品B', value: 80 }, + { date: '2024-02', type: '产品A', value: 150 }, + { date: '2024-02', type: '产品B', value: 110 }, + // ... + ] + } + ], + xField: 'date', + yField: 'value', + seriesField: 'type', + stack: true // 开启堆叠 +}; +``` + +## 百分比堆叠面积图 + +```javascript +const spec = { + type: 'area', + data: [/* 同上 */], + xField: 'date', + yField: 'value', + seriesField: 'type', + stack: true, + percent: true, // 百分比堆叠 + axes: [ + { + orient: 'left', + label: { + formatMethod: (val) => `${(val * 100).toFixed(0)}%` + } + } + ] +}; +``` + +## 完整示例 + +```javascript +const spec = { + type: 'area', + data: [ + { + id: 'visitorData', + values: [ + { month: '1月', channel: '直接访问', visitors: 320 }, + { month: '1月', channel: '搜索引擎', visitors: 480 }, + { month: '1月', channel: '社交媒体', visitors: 150 }, + { month: '2月', channel: '直接访问', visitors: 350 }, + { month: '2月', channel: '搜索引擎', visitors: 520 }, + { month: '2月', channel: '社交媒体', visitors: 200 }, + { month: '3月', channel: '直接访问', visitors: 420 }, + { month: '3月', channel: '搜索引擎', visitors: 580 }, + { month: '3月', channel: '社交媒体', visitors: 280 }, + { month: '4月', channel: '直接访问', visitors: 380 }, + { month: '4月', channel: '搜索引擎', visitors: 620 }, + { month: '4月', channel: '社交媒体', visitors: 350 }, + { month: '5月', channel: '直接访问', visitors: 450 }, + { month: '5月', channel: '搜索引擎', visitors: 700 }, + { month: '5月', channel: '社交媒体', visitors: 420 }, + { month: '6月', channel: '直接访问', visitors: 520 }, + { month: '6月', channel: '搜索引擎', visitors: 780 }, + { month: '6月', channel: '社交媒体', visitors: 500 } + ] + } + ], + xField: 'month', + yField: 'visitors', + seriesField: 'channel', + stack: true, + color: ['#1890ff', '#52c41a', '#faad14'], + line: { + style: { + lineWidth: 2, + curveType: 'monotone' + } + }, + area: { + style: { + fillOpacity: 0.6 + } + }, + point: { + visible: false + }, + title: { + visible: true, + text: '各渠道访客趋势' + }, + legends: { + visible: true, + orient: 'top', + position: 'middle' + }, + axes: [ + { + orient: 'bottom', + label: { visible: true } + }, + { + orient: 'left', + label: { visible: true }, + title: { + visible: true, + text: '访客数' + } + } + ], + crosshair: { + xField: { + visible: true, + line: { + type: 'line' + } + } + }, + tooltip: { + trigger: 'axis' + } +}; + +const vchart = new VChart(spec, { dom: 'container' }); +vchart.renderSync(); +``` + +## 相关文档 +- [面积图配置项](https://www.visactor.io/vchart/option/areaChart) +- [面积图示例](https://www.visactor.io/vchart/example/area-chart/basic-area) diff --git a/skills/vchart-development-skill/references/examples/bar/basic-bar.md b/skills/vchart-development-skill/references/examples/bar/basic-bar.md new file mode 100644 index 0000000000..d6d0562d1c --- /dev/null +++ b/skills/vchart-development-skill/references/examples/bar/basic-bar.md @@ -0,0 +1,152 @@ +# 基础柱状图 + +## 适用场景 +- 比较不同类目的数值大小 +- 展示类目数据的排名 +- 单一维度的数值对比 + +## 基础配置 + +```javascript +const spec = { + type: 'bar', + data: [ + { + id: 'barData', + values: [ + { category: '类目A', value: 120 }, + { category: '类目B', value: 85 }, + { category: '类目C', value: 150 }, + { category: '类目D', value: 70 }, + { category: '类目E', value: 200 } + ] + } + ], + xField: 'category', + yField: 'value' +}; + +const vchart = new VChart(spec, { dom: 'container' }); +vchart.renderSync(); +``` + +## 必填配置项 + +| 配置项 | 类型 | 说明 | +|-------|------|------| +| `type` | `'bar'` | 图表类型 | +| `data` | `Array` | 数据配置 | +| `xField` | `string` | X轴映射字段（类目字段） | +| `yField` | `string` | Y轴映射字段（数值字段） | + +## 常用可选配置 + +### 柱子样式 +```javascript +bar: { + style: { + fill: '#1890ff', // 填充色 + stroke: '#096dd9', // 描边色 + lineWidth: 1, // 描边宽度 + cornerRadius: [4, 4, 0, 0] // 圆角 + } +} +``` + +### 柱宽控制 +```javascript +barWidth: 20, // 固定宽度 +// 或 +barWidth: '50%', // 相对宽度 +barMinWidth: 10, // 最小宽度 +barMaxWidth: 50 // 最大宽度 +``` + +### 数据标签 +```javascript +label: { + visible: true, + position: 'top', // 'top' | 'bottom' | 'inside' + style: { + fill: '#333', + fontSize: 12 + } +} +``` + +## 水平柱状图（条形图） + +```javascript +const spec = { + type: 'bar', + data: [/* 同上 */], + xField: 'value', // 数值字段映射到X轴 + yField: 'category', // 类目字段映射到Y轴 + direction: 'horizontal' +}; +``` + +## 完整示例 + +```javascript +const spec = { + type: 'bar', + data: [ + { + id: 'barData', + values: [ + { month: '1月', sales: 220 }, + { month: '2月', sales: 180 }, + { month: '3月', sales: 350 }, + { month: '4月', sales: 280 }, + { month: '5月', sales: 420 }, + { month: '6月', sales: 380 } + ] + } + ], + xField: 'month', + yField: 'sales', + bar: { + style: { + cornerRadius: [4, 4, 0, 0], + fill: { + gradient: 'linear', + x0: 0.5, y0: 0, + x1: 0.5, y1: 1, + stops: [ + { offset: 0, color: '#1890ff' }, + { offset: 1, color: '#096dd9' } + ] + } + } + }, + label: { + visible: true, + position: 'top', + style: { + fill: '#333' + } + }, + title: { + visible: true, + text: '上半年销售额' + }, + axes: [ + { + orient: 'bottom', + label: { visible: true } + }, + { + orient: 'left', + label: { visible: true } + } + ] +}; + +const vchart = new VChart(spec, { dom: 'container' }); +vchart.renderSync(); +``` + +## 相关文档 +- [柱状图配置项](https://www.visactor.io/vchart/option/barChart) +- [柱状图示例](https://www.visactor.io/vchart/example) diff --git a/skills/vchart-development-skill/references/examples/bar/grouped-bar.md b/skills/vchart-development-skill/references/examples/bar/grouped-bar.md new file mode 100644 index 0000000000..e4452de3c6 --- /dev/null +++ b/skills/vchart-development-skill/references/examples/bar/grouped-bar.md @@ -0,0 +1,115 @@ +# 分组柱状图 + +## 适用场景 +- 对比不同组别在各类目下的数值 +- 多系列数据的并排比较 +- 同一维度下多个指标的对比 + +## 基础配置 + +```javascript +const spec = { + type: 'bar', + data: [ + { + id: 'barData', + values: [ + { category: 'Q1', group: '产品A', value: 120 }, + { category: 'Q1', group: '产品B', value: 85 }, + { category: 'Q2', group: '产品A', value: 150 }, + { category: 'Q2', group: '产品B', value: 110 }, + { category: 'Q3', group: '产品A', value: 180 }, + { category: 'Q3', group: '产品B', value: 130 }, + { category: 'Q4', group: '产品A', value: 200 }, + { category: 'Q4', group: '产品B', value: 160 } + ] + } + ], + xField: ['category', 'group'], // 数组形式，第一个为主分类，第二个为分组 + yField: 'value', + seriesField: 'group' // 用于区分颜色的字段 +}; + +const vchart = new VChart(spec, { dom: 'container' }); +vchart.renderSync(); +``` + +## 关键配置项 + +| 配置项 | 类型 | 说明 | +|-------|------|------| +| `xField` | `string[]` | 数组形式，`[主分类字段, 分组字段]` | +| `seriesField` | `string` | 系列字段，用于区分颜色和图例 | + +## 自定义分组颜色 + +```javascript +color: ['#1890ff', '#52c41a', '#faad14', '#f5222d'], +// 或使用色板 +color: { + type: 'ordinal', + range: ['#1890ff', '#52c41a', '#faad14', '#f5222d'] +} +``` + +## 分组间距调整 + +```javascript +barGapInGroup: 0, // 组内柱子间距（像素） +// 或 +barGapInGroup: '10%' // 组内柱子间距（百分比） +``` + +## 完整示例 + +```javascript +const spec = { + type: 'bar', + data: [ + { + id: 'barData', + values: [ + { quarter: 'Q1', product: '手机', sales: 1200 }, + { quarter: 'Q1', product: '电脑', sales: 850 }, + { quarter: 'Q1', product: '平板', sales: 600 }, + { quarter: 'Q2', product: '手机', sales: 1500 }, + { quarter: 'Q2', product: '电脑', sales: 920 }, + { quarter: 'Q2', product: '平板', sales: 750 }, + { quarter: 'Q3', product: '手机', sales: 1800 }, + { quarter: 'Q3', product: '电脑', sales: 1100 }, + { quarter: 'Q3', product: '平板', sales: 880 }, + { quarter: 'Q4', product: '手机', sales: 2200 }, + { quarter: 'Q4', product: '电脑', sales: 1300 }, + { quarter: 'Q4', product: '平板', sales: 1050 } + ] + } + ], + xField: ['quarter', 'product'], + yField: 'sales', + seriesField: 'product', + color: ['#1890ff', '#52c41a', '#faad14'], + bar: { + style: { + cornerRadius: [2, 2, 0, 0] + } + }, + title: { + visible: true, + text: '各季度产品销售对比' + }, + legends: { + visible: true, + orient: 'top', + position: 'middle' + }, + tooltip: { + trigger: 'axis' + } +}; + +const vchart = new VChart(spec, { dom: 'container' }); +vchart.renderSync(); +``` + +## 相关文档 +- [分组柱状图示例](https://www.visactor.io/vchart/example/bar-chart/grouped-bar) diff --git a/skills/vchart-development-skill/references/examples/bar/stacked-bar.md b/skills/vchart-development-skill/references/examples/bar/stacked-bar.md new file mode 100644 index 0000000000..07f660632e --- /dev/null +++ b/skills/vchart-development-skill/references/examples/bar/stacked-bar.md @@ -0,0 +1,172 @@ +# 堆叠柱状图 + +## 适用场景 +- 展示整体与部分的关系 +- 对比各类目总量的同时，查看构成比例 +- 多系列数据的累积效果 + +## 基础配置 + +```javascript +const spec = { + type: 'bar', + data: [ + { + id: 'barData', + values: [ + { category: 'Q1', type: '线上', value: 120 }, + { category: 'Q1', type: '线下', value: 80 }, + { category: 'Q2', type: '线上', value: 150 }, + { category: 'Q2', type: '线下', value: 100 }, + { category: 'Q3', type: '线上', value: 180 }, + { category: 'Q3', type: '线下', value: 90 }, + { category: 'Q4', type: '线上', value: 200 }, + { category: 'Q4', type: '线下', value: 120 } + ] + } + ], + xField: 'category', + yField: 'value', + seriesField: 'type', + stack: true // 开启堆叠 +}; + +const vchart = new VChart(spec, { dom: 'container' }); +vchart.renderSync(); +``` + +## 关键配置项 + +| 配置项 | 类型 | 说明 | +|-------|------|------| +| `stack` | `boolean` | 是否开启堆叠，默认 `false` | +| `seriesField` | `string` | 系列字段，用于区分堆叠的不同层 | +| `percent` | `boolean` | 是否开启百分比堆叠 | + +## 百分比堆叠 + +```javascript +const spec = { + type: 'bar', + data: [/* 同上 */], + xField: 'category', + yField: 'value', + seriesField: 'type', + stack: true, + percent: true, // 开启百分比堆叠 + axes: [ + { + orient: 'left', + label: { + formatMethod: (val) => `${(val * 100).toFixed(0)}%` + } + } + ] +}; +``` + +## 自定义堆叠顺序 + +通过 `stackSort` 控制堆叠顺序： + +```javascript +stackSort: (a, b) => { + const order = ['线上', '线下']; + return order.indexOf(a.type) - order.indexOf(b.type); +} +``` + +## 完整示例 + +```javascript +const spec = { + type: 'bar', + data: [ + { + id: 'salesData', + values: [ + { month: '1月', channel: '线上自营', sales: 220 }, + { month: '1月', channel: '线下门店', sales: 180 }, + { month: '1月', channel: '第三方平台', sales: 150 }, + { month: '2月', channel: '线上自营', sales: 280 }, + { month: '2月', channel: '线下门店', sales: 200 }, + { month: '2月', channel: '第三方平台', sales: 170 }, + { month: '3月', channel: '线上自营', sales: 350 }, + { month: '3月', channel: '线下门店', sales: 220 }, + { month: '3月', channel: '第三方平台', sales: 200 }, + { month: '4月', channel: '线上自营', sales: 320 }, + { month: '4月', channel: '线下门店', sales: 250 }, + { month: '4月', channel: '第三方平台', sales: 180 } + ] + } + ], + xField: 'month', + yField: 'sales', + seriesField: 'channel', + stack: true, + color: ['#1890ff', '#52c41a', '#faad14'], + bar: { + style: { + cornerRadius: 0 + } + }, + label: { + visible: true, + position: 'inside', + style: { + fill: '#fff', + fontSize: 10 + }, + // 只在值大于一定阈值时显示标签 + formatMethod: (text, datum) => datum.sales > 150 ? text : '' + }, + title: { + visible: true, + text: '各渠道月度销售额' + }, + legends: { + visible: true, + orient: 'bottom' + }, + tooltip: { + trigger: 'axis', + mark: { + title: { + value: (datum) => datum?.month + } + } + } +}; + +const vchart = new VChart(spec, { dom: 'container' }); +vchart.renderSync(); +``` + +## 堆叠总计标签 + +如需在堆叠顶部显示总计： + +```javascript +extensionMark: [ + { + type: 'text', + dataId: 'barData', + visible: true, + style: { + text: (datum) => { + // 需要自行计算堆叠总和 + return datum._stack_total; + }, + x: (datum, ctx) => ctx.valueToX([datum.category]), + y: (datum, ctx) => ctx.valueToY([datum._stack_end]), + textAlign: 'center', + textBaseline: 'bottom', + fill: '#333' + } + } +] +``` + +## 相关文档 +- [堆叠柱状图示例](https://www.visactor.io/vchart/example/bar-chart/stacked-bar) +- [百分比堆叠示例](https://www.visactor.io/vchart/example/bar-chart/percent-stacked-bar) diff --git a/skills/vchart-development-skill/references/examples/combination/dual-axis.md b/skills/vchart-development-skill/references/examples/combination/dual-axis.md new file mode 100644 index 0000000000..db2d08833b --- /dev/null +++ b/skills/vchart-development-skill/references/examples/combination/dual-axis.md @@ -0,0 +1,289 @@ +# 组合图 + +## 适用场景 +- 不同量级指标的综合展示 +- 数值与趋势的组合分析 +- 多种图表类型的混合使用 + +## 基础配置 + +```javascript +const spec = { + type: 'common', + data: [ + { + id: 'data', + values: [ + { month: '1月', sales: 220, growth: 0.15 }, + { month: '2月', sales: 180, growth: -0.18 }, + { month: '3月', sales: 350, growth: 0.94 }, + { month: '4月', sales: 280, growth: -0.20 }, + { month: '5月', sales: 420, growth: 0.50 }, + { month: '6月', sales: 380, growth: -0.10 } + ] + } + ], + series: [ + { + type: 'bar', + xField: 'month', + yField: 'sales' + }, + { + type: 'line', + xField: 'month', + yField: 'growth' + } + ], + axes: [ + { orient: 'bottom', type: 'band' }, + { orient: 'left', type: 'linear', seriesIndex: [0] }, + { orient: 'right', type: 'linear', seriesIndex: [1] } + ] +}; + +const vchart = new VChart(spec, { dom: 'container' }); +vchart.renderSync(); +``` + +## 关键配置项 + +| 配置项 | 类型 | 说明 | +|-------|------|------| +| `type` | `'common'` | 组合图类型 | +| `series` | `Array` | 多个系列配置 | +| `axes` | `Array` | 坐标轴配置，支持多轴 | +| `seriesIndex` | `number[]` | 轴关联的系列索引 | + +## 柱线组合 + +```javascript +const spec = { + type: 'common', + data: [ + { + id: 'data', + values: [/* 数据 */] + } + ], + series: [ + { + type: 'bar', + dataIndex: 0, + xField: 'month', + yField: 'sales', + bar: { + style: { fill: '#1890ff' } + } + }, + { + type: 'line', + dataIndex: 0, + xField: 'month', + yField: 'growth', + line: { + style: { stroke: '#52c41a' } + }, + point: { + style: { fill: '#52c41a' } + } + } + ], + axes: [ + { orient: 'bottom', type: 'band' }, + { + orient: 'left', + type: 'linear', + seriesIndex: [0], + title: { visible: true, text: '销售额' } + }, + { + orient: 'right', + type: 'linear', + seriesIndex: [1], + title: { visible: true, text: '增长率' }, + label: { + formatMethod: (val) => `${(val * 100).toFixed(0)}%` + } + } + ] +}; +``` + +## 区域布局（多区域组合） + +```javascript +const spec = { + type: 'common', + layout: { + type: 'grid', + col: 2, + row: 2, + elements: [ + { modelId: 'region1', col: 0, row: 0 }, + { modelId: 'region2', col: 1, row: 0 }, + { modelId: 'region3', col: 0, row: 1, colSpan: 2 } + ] + }, + region: [ + { id: 'region1' }, + { id: 'region2' }, + { id: 'region3' } + ], + series: [ + { type: 'pie', regionId: 'region1', /* ... */ }, + { type: 'bar', regionId: 'region2', /* ... */ }, + { type: 'line', regionId: 'region3', /* ... */ } + ] +}; +``` + +## 完整示例 + +```javascript +const spec = { + type: 'common', + data: [ + { + id: 'salesData', + values: [ + { month: '1月', sales: 2200, profit: 450, rate: 0.20 }, + { month: '2月', sales: 1800, profit: 320, rate: 0.18 }, + { month: '3月', sales: 3500, profit: 780, rate: 0.22 }, + { month: '4月', sales: 2800, profit: 560, rate: 0.20 }, + { month: '5月', sales: 4200, profit: 920, rate: 0.22 }, + { month: '6月', sales: 3800, profit: 850, rate: 0.22 }, + { month: '7月', sales: 4500, profit: 1050, rate: 0.23 }, + { month: '8月', sales: 4100, profit: 920, rate: 0.22 }, + { month: '9月', sales: 3900, profit: 860, rate: 0.22 }, + { month: '10月', sales: 4800, profit: 1150, rate: 0.24 }, + { month: '11月', sales: 5200, profit: 1300, rate: 0.25 }, + { month: '12月', sales: 5800, profit: 1500, rate: 0.26 } + ] + } + ], + series: [ + { + type: 'bar', + id: 'salesBar', + dataIndex: 0, + xField: 'month', + yField: 'sales', + bar: { + style: { + fill: '#1890ff', + cornerRadius: [4, 4, 0, 0] + } + } + }, + { + type: 'bar', + id: 'profitBar', + dataIndex: 0, + xField: 'month', + yField: 'profit', + bar: { + style: { + fill: '#52c41a', + cornerRadius: [4, 4, 0, 0] + } + } + }, + { + type: 'line', + id: 'rateLine', + dataIndex: 0, + xField: 'month', + yField: 'rate', + line: { + style: { + stroke: '#faad14', + lineWidth: 2 + } + }, + point: { + style: { + fill: '#faad14', + stroke: '#fff', + size: 6 + } + } + } + ], + axes: [ + { + orient: 'bottom', + type: 'band', + label: { visible: true } + }, + { + orient: 'left', + type: 'linear', + seriesId: ['salesBar', 'profitBar'], + title: { + visible: true, + text: '金额（万元）' + }, + label: { visible: true } + }, + { + orient: 'right', + type: 'linear', + seriesId: ['rateLine'], + min: 0, + max: 0.3, + title: { + visible: true, + text: '利润率' + }, + label: { + visible: true, + formatMethod: (val) => `${(val * 100).toFixed(0)}%` + }, + grid: { visible: false } + } + ], + title: { + visible: true, + text: '年度销售与利润分析' + }, + legends: { + visible: true, + orient: 'top', + position: 'middle', + data: (data) => { + return [ + { label: '销售额', shape: { fill: '#1890ff', symbolType: 'square' } }, + { label: '利润', shape: { fill: '#52c41a', symbolType: 'square' } }, + { label: '利润率', shape: { fill: '#faad14', symbolType: 'circle' } } + ]; + } + }, + crosshair: { + xField: { + visible: true, + line: { + type: 'line', + style: { stroke: '#999', lineDash: [4, 4] } + } + } + }, + tooltip: { + trigger: 'axis', + mark: { + content: [ + { key: '销售额', value: (datum) => `${datum.sales} 万元` }, + { key: '利润', value: (datum) => `${datum.profit} 万元` }, + { key: '利润率', value: (datum) => `${(datum.rate * 100).toFixed(0)}%` } + ] + } + } +}; + +const vchart = new VChart(spec, { dom: 'container' }); +vchart.renderSync(); +``` + +## 相关文档 +- [组合图配置项](https://www.visactor.io/vchart/option/commonChart) +- [组合图示例](https://www.visactor.io/vchart/example/combination/dual-axis) diff --git a/skills/vchart-development-skill/references/examples/funnel/basic-funnel.md b/skills/vchart-development-skill/references/examples/funnel/basic-funnel.md new file mode 100644 index 0000000000..d2036c217b --- /dev/null +++ b/skills/vchart-development-skill/references/examples/funnel/basic-funnel.md @@ -0,0 +1,235 @@ +# 基础漏斗图 + +## 适用场景 +- 展示流程阶段的转化率 +- 销售漏斗、用户漏斗分析 +- 有序流程中的损耗分析 + +## 基础配置 + +```javascript +const spec = { + type: 'funnel', + data: [ + { + id: 'funnelData', + values: [ + { stage: '访问', count: 10000 }, + { stage: '注册', count: 6500 }, + { stage: '试用', count: 3200 }, + { stage: '付费', count: 1500 }, + { stage: '续费', count: 800 } + ] + } + ], + categoryField: 'stage', + valueField: 'count' +}; + +const vchart = new VChart(spec, { dom: 'container' }); +vchart.renderSync(); +``` + +## 必填配置项 + +| 配置项 | 类型 | 说明 | +|-------|------|------| +| `type` | `'funnel'` | 图表类型 | +| `data` | `Array` | 数据配置 | +| `categoryField` | `string` | 阶段字段 | +| `valueField` | `string` | 数值字段 | + +## 常用可选配置 + +### 漏斗形状 +```javascript +shape: 'rect', // 'rect' | 'trapezoid' +isTransform: true, // 是否显示转化层 +gap: 4, // 层间距 +``` + +### 漏斗样式 +```javascript +funnel: { + style: { + stroke: '#fff', + lineWidth: 2, + cornerRadius: 4 + } +} +``` + +### 数据标签 +```javascript +label: { + visible: true, + position: 'inside', // 'inside' | 'outside' | 'left' | 'right' + style: { + fill: '#fff', + fontSize: 14 + } +} +``` + +### 转化率标签 +```javascript +transformLabel: { + visible: true, + style: { + fill: '#666' + }, + formatMethod: (text) => `转化率: ${text}` +} +``` + +## 矩形漏斗 + +```javascript +const spec = { + type: 'funnel', + data: [/* 同上 */], + categoryField: 'stage', + valueField: 'count', + shape: 'rect' +}; +``` + +## 完整示例 + +```javascript +const spec = { + type: 'funnel', + data: [ + { + id: 'funnelData', + values: [ + { stage: '曝光', count: 100000 }, + { stage: '点击', count: 45000 }, + { stage: '访问', count: 28000 }, + { stage: '咨询', count: 12000 }, + { stage: '订单', count: 5500 }, + { stage: '成交', count: 3200 } + ] + } + ], + categoryField: 'stage', + valueField: 'count', + color: [ + '#1890ff', + '#40a9ff', + '#69c0ff', + '#91d5ff', + '#bae7ff', + '#e6f7ff' + ], + funnel: { + style: { + stroke: '#fff', + lineWidth: 2 + } + }, + label: { + visible: true, + position: 'inside', + style: { + fill: '#fff', + fontSize: 14, + fontWeight: 'bold' + }, + formatMethod: (text, datum) => `${datum.stage}\n${datum.count.toLocaleString()}` + }, + outerLabel: { + visible: true, + position: 'right', + alignLabel: false, + style: { + fill: '#333', + fontSize: 12 + }, + line: { + visible: true, + style: { + stroke: '#999' + } + }, + formatMethod: (text, datum, ctx) => { + // 计算转化率 + const data = ctx.data; + const index = data.findIndex(d => d.stage === datum.stage); + if (index === 0) return '100%'; + const prevValue = data[index - 1].count; + const rate = ((datum.count / prevValue) * 100).toFixed(1); + return `${rate}%`; + } + }, + title: { + visible: true, + text: '营销转化漏斗' + }, + legends: { + visible: true, + orient: 'bottom', + position: 'middle' + }, + tooltip: { + mark: { + title: { + value: (datum) => datum.stage + }, + content: [ + { + key: '数量', + value: (datum) => datum.count.toLocaleString() + } + ] + } + } +}; + +const vchart = new VChart(spec, { dom: 'container' }); +vchart.renderSync(); +``` + +## 对比漏斗（双向漏斗） + +```javascript +const spec = { + type: 'common', + data: [ + { + id: 'funnelLeft', + values: [/* 左侧数据 */] + }, + { + id: 'funnelRight', + values: [/* 右侧数据 */] + } + ], + layout: { + type: 'grid', + col: 2 + }, + region: [ + { id: 'left' }, + { id: 'right' } + ], + series: [ + { + type: 'funnel', + regionId: 'left', + dataId: 'funnelLeft', + // ... + }, + { + type: 'funnel', + regionId: 'right', + dataId: 'funnelRight', + // ... + } + ] +}; +``` + +## 相关文档 +- [漏斗图配置项](https://www.visactor.io/vchart/option/funnelChart) +- [漏斗图示例](https://www.visactor.io/vchart/example/funnel-chart/basic-funnel) diff --git a/skills/vchart-development-skill/references/examples/gauge/basic-gauge.md b/skills/vchart-development-skill/references/examples/gauge/basic-gauge.md new file mode 100644 index 0000000000..912796446b --- /dev/null +++ b/skills/vchart-development-skill/references/examples/gauge/basic-gauge.md @@ -0,0 +1,285 @@ +# 基础仪表盘 + +## 适用场景 +- 展示单一指标的完成进度 +- KPI 达成率展示 +- 性能指标监控 + +## 基础配置 + +```javascript +const spec = { + type: 'gauge', + data: [ + { + id: 'gaugeData', + values: [ + { value: 75 } + ] + } + ], + valueField: 'value', + startAngle: -180, + endAngle: 0 +}; + +const vchart = new VChart(spec, { dom: 'container' }); +vchart.renderSync(); +``` + +## 必填配置项 + +| 配置项 | 类型 | 说明 | +|-------|------|------| +| `type` | `'gauge'` | 图表类型 | +| `data` | `Array` | 数据配置 | +| `valueField` | `string` | 数值字段 | + +## 常用可选配置 + +### 角度范围 +```javascript +startAngle: -180, // 起始角度 +endAngle: 0, // 结束角度 +// 常用配置： +// 半圆：startAngle: -180, endAngle: 0 +// 3/4圆：startAngle: -225, endAngle: 45 +// 全圆：startAngle: -270, endAngle: 90 +``` + +### 半径配置 +```javascript +outerRadius: 0.8, // 外半径 +innerRadius: 0.6, // 内半径 +``` + +### 轨道样式 +```javascript +track: { + style: { + fill: '#f0f0f0' + } +} +``` + +### 指针样式 +```javascript +pointer: { + visible: true, + width: 0.5, + height: 0.5, + style: { + fill: '#1890ff' + } +} +``` + +### 刻度配置 +```javascript +axes: [ + { + type: 'linear', + orient: 'angle', + min: 0, + max: 100, + tick: { + visible: true, + tickCount: 5 + }, + label: { + visible: true, + formatMethod: (val) => `${val}%` + } + } +] +``` + +## 环形进度条 (circularProgress) + +更简洁的进度展示： + +```javascript +const spec = { + type: 'circularProgress', + data: [ + { + id: 'progressData', + values: [ + { type: '完成', value: 0.75 } + ] + } + ], + valueField: 'value', + categoryField: 'type', + outerRadius: 0.9, + innerRadius: 0.7, + cornerRadius: 10, + progress: { + style: { + fill: '#1890ff' + } + }, + track: { + style: { + fill: '#f0f0f0' + } + } +}; +``` + +## 完整示例 + +```javascript +const spec = { + type: 'gauge', + data: [ + { + id: 'gaugeData', + values: [ + { value: 78 } + ] + } + ], + valueField: 'value', + startAngle: -225, + endAngle: 45, + outerRadius: 0.85, + innerRadius: 0.65, + // 轨道 + track: { + style: { + fill: '#f0f0f0' + } + }, + // 进度弧 + gauge: { + style: { + fill: { + gradient: 'conical', + startAngle: -225, + endAngle: 45, + stops: [ + { offset: 0, color: '#52c41a' }, + { offset: 0.5, color: '#faad14' }, + { offset: 1, color: '#f5222d' } + ] + }, + cornerRadius: 10 + } + }, + // 指针 + pointer: { + visible: true, + width: 0.4, + height: 0.6, + style: { + fill: '#333' + } + }, + // 中心文字 + indicator: { + visible: true, + offsetY: '30%', + title: { + visible: true, + autoLimit: true, + style: { + text: '完成率', + fontSize: 14, + fill: '#666' + } + }, + content: { + visible: true, + style: { + text: (datum) => `${datum.value}%`, + fontSize: 36, + fontWeight: 'bold', + fill: '#333' + } + } + }, + // 坐标轴（刻度） + axes: [ + { + type: 'linear', + orient: 'angle', + min: 0, + max: 100, + inside: true, + outerRadius: 0.88, + innerRadius: 0.85, + grid: { visible: false }, + tick: { + visible: true, + tickCount: 5, + style: { + stroke: '#999', + lineWidth: 2 + } + }, + subTick: { + visible: true, + tickCount: 4, + style: { + stroke: '#ccc', + lineWidth: 1 + } + }, + label: { + visible: true, + space: 10, + style: { + fill: '#666', + fontSize: 12 + } + } + } + ], + title: { + visible: true, + text: 'KPI 完成进度' + } +}; + +const vchart = new VChart(spec, { dom: 'container' }); +vchart.renderSync(); +``` + +## 多指标仪表盘 + +```javascript +const spec = { + type: 'common', + layout: { + type: 'grid', + col: 3 + }, + region: [ + { id: 'gauge1' }, + { id: 'gauge2' }, + { id: 'gauge3' } + ], + series: [ + { + type: 'gauge', + regionId: 'gauge1', + // ...配置 + }, + { + type: 'gauge', + regionId: 'gauge2', + // ...配置 + }, + { + type: 'gauge', + regionId: 'gauge3', + // ...配置 + } + ] +}; +``` + +## 相关文档 +- [仪表盘配置项](https://www.visactor.io/vchart/option/gaugeChart) +- [仪表盘示例](https://www.visactor.io/vchart/example/gauge-chart/basic-gauge) diff --git a/skills/vchart-development-skill/references/examples/line/basic-line.md b/skills/vchart-development-skill/references/examples/line/basic-line.md new file mode 100644 index 0000000000..b512edda52 --- /dev/null +++ b/skills/vchart-development-skill/references/examples/line/basic-line.md @@ -0,0 +1,202 @@ +# 基础折线图 + +## 适用场景 +- 展示数据随时间的变化趋势 +- 比较多个系列的变化规律 +- 连续数据的可视化 + +## 基础配置 + +```javascript +const spec = { + type: 'line', + data: [ + { + id: 'lineData', + values: [ + { date: '2024-01', value: 120 }, + { date: '2024-02', value: 150 }, + { date: '2024-03', value: 180 }, + { date: '2024-04', value: 135 }, + { date: '2024-05', value: 200 }, + { date: '2024-06', value: 220 } + ] + } + ], + xField: 'date', + yField: 'value' +}; + +const vchart = new VChart(spec, { dom: 'container' }); +vchart.renderSync(); +``` + +## 必填配置项 + +| 配置项 | 类型 | 说明 | +|-------|------|------| +| `type` | `'line'` | 图表类型 | +| `data` | `Array` | 数据配置 | +| `xField` | `string` | X轴映射字段 | +| `yField` | `string` | Y轴映射字段 | + +## 常用可选配置 + +### 线条样式 +```javascript +line: { + style: { + stroke: '#1890ff', // 线条颜色 + lineWidth: 2, // 线条宽度 + lineDash: [5, 5], // 虚线配置 + curveType: 'monotone' // 曲线类型：'linear' | 'monotone' | 'step' 等 + } +} +``` + +### 数据点样式 +```javascript +point: { + visible: true, // 是否显示数据点 + style: { + fill: '#1890ff', + stroke: '#fff', + size: 8, + lineWidth: 2 + } +} +``` + +### 数据标签 +```javascript +label: { + visible: true, + position: 'top', + style: { + fill: '#333', + fontSize: 12 + } +} +``` + +## 平滑曲线 + +```javascript +line: { + style: { + curveType: 'monotone' // 平滑曲线 + } +} +``` + +可选曲线类型： +- `linear`：直线（默认） +- `monotone`：单调曲线 +- `step`：阶梯线 +- `stepBefore`：前置阶梯 +- `stepAfter`：后置阶梯 + +## 多系列折线图 + +```javascript +const spec = { + type: 'line', + data: [ + { + id: 'lineData', + values: [ + { date: '2024-01', type: '产品A', value: 120 }, + { date: '2024-01', type: '产品B', value: 80 }, + { date: '2024-02', type: '产品A', value: 150 }, + { date: '2024-02', type: '产品B', value: 110 }, + // ... + ] + } + ], + xField: 'date', + yField: 'value', + seriesField: 'type' // 用于区分不同系列 +}; +``` + +## 完整示例 + +```javascript +const spec = { + type: 'line', + data: [ + { + id: 'salesData', + values: [ + { month: '1月', sales: 220, cost: 150 }, + { month: '2月', sales: 180, cost: 130 }, + { month: '3月', sales: 350, cost: 200 }, + { month: '4月', sales: 280, cost: 180 }, + { month: '5月', sales: 420, cost: 250 }, + { month: '6月', sales: 380, cost: 220 } + ].flatMap(item => [ + { month: item.month, type: '销售额', value: item.sales }, + { month: item.month, type: '成本', value: item.cost } + ]) + } + ], + xField: 'month', + yField: 'value', + seriesField: 'type', + color: ['#1890ff', '#52c41a'], + line: { + style: { + lineWidth: 2, + curveType: 'monotone' + } + }, + point: { + visible: true, + style: { + size: 6, + stroke: '#fff', + lineWidth: 2 + } + }, + title: { + visible: true, + text: '上半年销售与成本趋势' + }, + legends: { + visible: true, + orient: 'top' + }, + axes: [ + { + orient: 'bottom', + label: { visible: true } + }, + { + orient: 'left', + label: { visible: true } + } + ], + crosshair: { + xField: { + visible: true, + line: { + type: 'line', + style: { + stroke: '#999', + lineDash: [4, 4] + } + } + } + }, + tooltip: { + trigger: 'axis' + } +}; + +const vchart = new VChart(spec, { dom: 'container' }); +vchart.renderSync(); +``` + +## 相关文档 +- [折线图配置项](https://www.visactor.io/vchart/option/lineChart) +- [折线图示例](https://www.visactor.io/vchart/example/line-chart/basic-line) diff --git a/skills/vchart-development-skill/references/examples/pie/basic-pie.md b/skills/vchart-development-skill/references/examples/pie/basic-pie.md new file mode 100644 index 0000000000..7c677f88d3 --- /dev/null +++ b/skills/vchart-development-skill/references/examples/pie/basic-pie.md @@ -0,0 +1,219 @@ +# 基础饼图 + +## 适用场景 +- 展示数据的占比分布 +- 部分与整体的关系 +- 少量类目（建议不超过7个）的比例对比 + +## 基础配置 + +```javascript +const spec = { + type: 'pie', + data: [ + { + id: 'pieData', + values: [ + { category: '类目A', value: 120 }, + { category: '类目B', value: 85 }, + { category: '类目C', value: 150 }, + { category: '类目D', value: 70 }, + { category: '类目E', value: 200 } + ] + } + ], + valueField: 'value', + categoryField: 'category' +}; + +const vchart = new VChart(spec, { dom: 'container' }); +vchart.renderSync(); +``` + +## 必填配置项 + +| 配置项 | 类型 | 说明 | +|-------|------|------| +| `type` | `'pie'` | 图表类型 | +| `data` | `Array` | 数据配置 | +| `valueField` | `string` | 数值字段（决定扇区大小） | +| `categoryField` | `string` | 类目字段（决定扇区划分） | + +## 常用可选配置 + +### 扇区样式 +```javascript +pie: { + style: { + stroke: '#fff', // 扇区描边 + lineWidth: 2, + cornerRadius: 4 // 扇区圆角 + } +} +``` + +### 半径配置 +```javascript +outerRadius: 0.8, // 外半径（相对于容器） +innerRadius: 0, // 内半径（0为实心饼图） +``` + +### 数据标签 +```javascript +label: { + visible: true, + position: 'outside', // 'outside' | 'inside' + style: { + fill: '#333', + fontSize: 12 + } +} +``` + +## 环形图（圆环图） + +```javascript +const spec = { + type: 'pie', + data: [/* 同上 */], + valueField: 'value', + categoryField: 'category', + outerRadius: 0.8, + innerRadius: 0.5 // 设置内半径即可变成环形图 +}; +``` + +### 环形图中心文字 + +```javascript +indicator: { + visible: true, + title: { + visible: true, + style: { + text: '总计', + fontSize: 14 + } + }, + content: { + visible: true, + style: { + text: (data) => { + const total = data.reduce((sum, d) => sum + d.value, 0); + return total.toString(); + }, + fontSize: 24, + fontWeight: 'bold' + } + } +} +``` + +## 玫瑰图 + +半径表示数值大小： + +```javascript +const spec = { + type: 'rose', + data: [/* 同上 */], + valueField: 'value', + categoryField: 'category', + seriesField: 'category', + outerRadius: 0.9, + innerRadius: 0.2 +}; +``` + +## 完整示例 + +```javascript +const spec = { + type: 'pie', + data: [ + { + id: 'pieData', + values: [ + { browser: 'Chrome', share: 64.5 }, + { browser: 'Safari', share: 18.8 }, + { browser: 'Firefox', share: 4.2 }, + { browser: 'Edge', share: 3.9 }, + { browser: '其他', share: 8.6 } + ] + } + ], + valueField: 'share', + categoryField: 'browser', + outerRadius: 0.8, + innerRadius: 0.5, + color: ['#4285F4', '#FF9500', '#FF6B00', '#00A1F1', '#999'], + pie: { + style: { + stroke: '#fff', + lineWidth: 2 + } + }, + label: { + visible: true, + position: 'outside', + line: { + visible: true, + style: { + stroke: '#999' + } + }, + layout: { + align: 'labelLine' + }, + style: { + fontSize: 12 + }, + formatMethod: (text, datum) => `${datum.browser}: ${datum.share}%` + }, + indicator: { + visible: true, + title: { + visible: true, + style: { + text: '浏览器', + fontSize: 14, + fill: '#666' + } + }, + content: { + visible: true, + style: { + text: '市场份额', + fontSize: 12, + fill: '#999' + } + } + }, + title: { + visible: true, + text: '浏览器市场份额' + }, + legends: { + visible: true, + orient: 'right', + position: 'middle' + }, + tooltip: { + mark: { + content: [ + { + key: (datum) => datum.browser, + value: (datum) => `${datum.share}%` + } + ] + } + } +}; + +const vchart = new VChart(spec, { dom: 'container' }); +vchart.renderSync(); +``` + +## 相关文档 +- [饼图配置项](https://www.visactor.io/vchart/option/pieChart) +- [饼图示例](https://www.visactor.io/vchart/example/pie-chart/basic-pie) diff --git a/skills/vchart-development-skill/references/examples/radar/basic-radar.md b/skills/vchart-development-skill/references/examples/radar/basic-radar.md new file mode 100644 index 0000000000..da7b7c7c1b --- /dev/null +++ b/skills/vchart-development-skill/references/examples/radar/basic-radar.md @@ -0,0 +1,233 @@ +# 基础雷达图 + +## 适用场景 +- 多维度数据的综合对比 +- 能力/指标的雷达展示 +- 多个对象在多个维度上的比较 + +## 基础配置 + +```javascript +const spec = { + type: 'radar', + data: [ + { + id: 'radarData', + values: [ + { dimension: '攻击', value: 85 }, + { dimension: '防御', value: 70 }, + { dimension: '速度', value: 90 }, + { dimension: '技巧', value: 75 }, + { dimension: '耐力', value: 80 } + ] + } + ], + categoryField: 'dimension', + valueField: 'value' +}; + +const vchart = new VChart(spec, { dom: 'container' }); +vchart.renderSync(); +``` + +## 必填配置项 + +| 配置项 | 类型 | 说明 | +|-------|------|------| +| `type` | `'radar'` | 图表类型 | +| `data` | `Array` | 数据配置 | +| `categoryField` | `string` | 类目字段（各维度） | +| `valueField` | `string` | 数值字段 | + +## 常用可选配置 + +### 面积样式 +```javascript +area: { + visible: true, + style: { + fillOpacity: 0.3 + } +} +``` + +### 线条样式 +```javascript +line: { + style: { + stroke: '#1890ff', + lineWidth: 2 + } +} +``` + +### 数据点样式 +```javascript +point: { + visible: true, + style: { + fill: '#1890ff', + size: 6 + } +} +``` + +### 坐标轴配置 +```javascript +axes: [ + { + orient: 'radius', // 径向轴 + min: 0, + max: 100, + domainLine: { visible: true }, + grid: { visible: true } + }, + { + orient: 'angle', // 角度轴 + domainLine: { visible: true }, + grid: { visible: true } + } +] +``` + +## 多系列对比 + +```javascript +const spec = { + type: 'radar', + data: [ + { + id: 'radarData', + values: [ + { dimension: '攻击', player: '玩家A', value: 85 }, + { dimension: '攻击', player: '玩家B', value: 70 }, + { dimension: '防御', player: '玩家A', value: 70 }, + { dimension: '防御', player: '玩家B', value: 85 }, + // ... + ] + } + ], + categoryField: 'dimension', + valueField: 'value', + seriesField: 'player' // 区分不同系列 +}; +``` + +## 完整示例 + +```javascript +const spec = { + type: 'radar', + data: [ + { + id: 'abilityData', + values: [ + // 产品A + { ability: '性能', product: '产品A', score: 90 }, + { ability: '易用性', product: '产品A', score: 85 }, + { ability: '价格', product: '产品A', score: 70 }, + { ability: '服务', product: '产品A', score: 80 }, + { ability: '稳定性', product: '产品A', score: 95 }, + { ability: '扩展性', product: '产品A', score: 75 }, + // 产品B + { ability: '性能', product: '产品B', score: 75 }, + { ability: '易用性', product: '产品B', score: 90 }, + { ability: '价格', product: '产品B', score: 85 }, + { ability: '服务', product: '产品B', score: 70 }, + { ability: '稳定性', product: '产品B', score: 80 }, + { ability: '扩展性', product: '产品B', score: 88 } + ] + } + ], + categoryField: 'ability', + valueField: 'score', + seriesField: 'product', + color: ['#1890ff', '#52c41a'], + area: { + visible: true, + style: { + fillOpacity: 0.25 + } + }, + line: { + style: { + lineWidth: 2 + } + }, + point: { + visible: true, + style: { + size: 6, + stroke: '#fff', + lineWidth: 2 + } + }, + axes: [ + { + orient: 'radius', + min: 0, + max: 100, + domainLine: { visible: false }, + grid: { + visible: true, + style: { + stroke: '#e8e8e8', + lineDash: [0] + } + }, + label: { + visible: true, + style: { + fill: '#999' + } + } + }, + { + orient: 'angle', + domainLine: { visible: false }, + grid: { + visible: true, + style: { + stroke: '#e8e8e8' + } + }, + label: { + visible: true, + style: { + fill: '#333', + fontSize: 12 + } + } + } + ], + title: { + visible: true, + text: '产品能力对比' + }, + legends: { + visible: true, + orient: 'top', + position: 'middle' + }, + tooltip: { + mark: { + title: { + value: (datum) => datum.ability + }, + content: [ + { + key: (datum) => datum.product, + value: (datum) => datum.score + } + ] + } + } +}; + +const vchart = new VChart(spec, { dom: 'container' }); +vchart.renderSync(); +``` + +## 相关文档 +- [雷达图配置项](https://www.visactor.io/vchart/option/radarChart) +- [雷达图示例](https://www.visactor.io/vchart/example/radar-chart/basic-radar) diff --git a/skills/vchart-development-skill/references/examples/scatter/basic-scatter.md b/skills/vchart-development-skill/references/examples/scatter/basic-scatter.md new file mode 100644 index 0000000000..10a5dd0361 --- /dev/null +++ b/skills/vchart-development-skill/references/examples/scatter/basic-scatter.md @@ -0,0 +1,192 @@ +# 基础散点图 + +## 适用场景 +- 展示两个变量之间的相关性 +- 数据分布和聚类分析 +- 异常值检测 + +## 基础配置 + +```javascript +const spec = { + type: 'scatter', + data: [ + { + id: 'scatterData', + values: [ + { x: 10, y: 20 }, + { x: 15, y: 35 }, + { x: 25, y: 45 }, + { x: 30, y: 30 }, + { x: 40, y: 60 }, + { x: 50, y: 55 } + ] + } + ], + xField: 'x', + yField: 'y' +}; + +const vchart = new VChart(spec, { dom: 'container' }); +vchart.renderSync(); +``` + +## 必填配置项 + +| 配置项 | 类型 | 说明 | +|-------|------|------| +| `type` | `'scatter'` | 图表类型 | +| `data` | `Array` | 数据配置 | +| `xField` | `string` | X轴映射字段 | +| `yField` | `string` | Y轴映射字段 | + +## 常用可选配置 + +### 点样式 +```javascript +point: { + style: { + fill: '#1890ff', + stroke: '#fff', + size: 10, + lineWidth: 2, + shape: 'circle' // 'circle' | 'square' | 'triangle' | 'diamond' 等 + } +} +``` + +### 按尺寸映射（气泡图） +```javascript +sizeField: 'population', // 数值字段 +size: { + type: 'linear', + range: [5, 30] // 尺寸范围 +} +``` + +### 按类目分组 +```javascript +seriesField: 'category', // 用于区分颜色 +color: ['#1890ff', '#52c41a', '#faad14'] +``` + +## 气泡图 + +通过 `sizeField` 添加第三个维度： + +```javascript +const spec = { + type: 'scatter', + data: [ + { + id: 'bubbleData', + values: [ + { gdp: 10000, lifeExpectancy: 75, population: 50000000 }, + { gdp: 30000, lifeExpectancy: 80, population: 30000000 }, + { gdp: 50000, lifeExpectancy: 82, population: 80000000 }, + // ... + ] + } + ], + xField: 'gdp', + yField: 'lifeExpectancy', + sizeField: 'population', + size: { + type: 'linear', + range: [10, 50] + } +}; +``` + +## 完整示例 + +```javascript +const spec = { + type: 'scatter', + data: [ + { + id: 'countryData', + values: [ + { continent: '亚洲', gdp: 14720, life: 76.9, pop: 1412, country: '中国' }, + { continent: '亚洲', gdp: 3173, life: 69.7, pop: 1380, country: '印度' }, + { continent: '北美', gdp: 23315, life: 77.3, pop: 332, country: '美国' }, + { continent: '南美', gdp: 1609, life: 75.9, pop: 214, country: '巴西' }, + { continent: '欧洲', gdp: 4223, life: 81.2, pop: 83, country: '德国' }, + { continent: '欧洲', gdp: 2938, life: 82.5, pop: 67, country: '法国' }, + { continent: '欧洲', gdp: 3187, life: 81.8, pop: 67, country: '英国' }, + { continent: '亚洲', gdp: 4937, life: 84.6, pop: 125, country: '日本' }, + { continent: '大洋洲', gdp: 1553, life: 83.4, pop: 26, country: '澳大利亚' } + ] + } + ], + xField: 'gdp', + yField: 'life', + sizeField: 'pop', + seriesField: 'continent', + size: { + type: 'linear', + range: [20, 80] + }, + color: ['#e41a1c', '#377eb8', '#4daf4a', '#984ea3', '#ff7f00'], + point: { + style: { + fillOpacity: 0.7, + stroke: '#fff', + lineWidth: 1 + } + }, + title: { + visible: true, + text: '各国 GDP 与预期寿命关系' + }, + legends: { + visible: true, + orient: 'right', + position: 'middle', + title: { + visible: true, + text: '大洲' + } + }, + axes: [ + { + orient: 'bottom', + type: 'linear', + title: { + visible: true, + text: 'GDP (十亿美元)' + }, + label: { + formatMethod: (val) => `${(val / 1000).toFixed(0)}k` + } + }, + { + orient: 'left', + type: 'linear', + title: { + visible: true, + text: '预期寿命 (岁)' + } + } + ], + tooltip: { + mark: { + title: { + value: (datum) => datum.country + }, + content: [ + { key: 'GDP', value: (datum) => `${datum.gdp} 十亿美元` }, + { key: '预期寿命', value: (datum) => `${datum.life} 岁` }, + { key: '人口', value: (datum) => `${datum.pop} 百万` } + ] + } + } +}; + +const vchart = new VChart(spec, { dom: 'container' }); +vchart.renderSync(); +``` + +## 相关文档 +- [散点图配置项](https://www.visactor.io/vchart/option/scatterChart) +- [散点图示例](https://www.visactor.io/vchart/example/scatter-chart/basic-scatter) diff --git a/skills/vchart-development-skill/references/topkey/all_common.json b/skills/vchart-development-skill/references/topkey/all_common.json new file mode 100644 index 0000000000..540cd676c8 --- /dev/null +++ b/skills/vchart-development-skill/references/topkey/all_common.json @@ -0,0 +1,122 @@ +{ + "type": { + "key": "type", + "oneDesc": "图表类型" + }, + "series": { + "key": "series", + "oneDesc": "series(系列)是描述数据在图表中呈现方式的基本概念。每个series由图元组成，如线系列由点和线构成，柱系列由矩形构成。图表中可包含多个 series，每个 series 支持各种可视化映射,如位置，颜色，大小等。例如，气泡图用点的大小表示数值，用颜色表示分类" + }, + "axes": { + "key": "axes", + "oneDesc": "所有轴，坐标轴相关配置;在直角坐标系下由x轴、y轴组成；在极坐标系下由角度轴和半径轴组成；坐标轴也会影响布局留白" + }, + "crosshair": { + "key": "crosshair", + "oneDesc": "crosshair，十字准星，游标，对应于echarts中的坐标轴指示器，是一种交互组件，一般用于展示图表中某个数据点的具体数值，以便用户可以更直观地了解数据的分布情况" + }, + "data": { + "key": "data", + "oneDesc": "图表所用数据，数据顺序会直接影响图元/数据轴/图例/tooltip中的顺序" + }, + "width": { + "key": "width", + "oneDesc": "图表的整体宽度" + }, + "height": { + "key": "height", + "oneDesc": "图表的整体高度" + }, + "autoFit": { + "key": "autoFit", + "oneDesc": "图表宽高是否自适应容器,默认适应" + }, + "color": { + "key": "color", + "oneDesc": "色系配置，色盘配置，图表色系配置，图表公共的颜色视觉通道刻度设置，用于设置图表默认的颜色刻度，支持回调函数配置单个系列的颜色情况" + }, + "seriesStyle": { + "key": "seriesStyle", + "oneDesc": "各个系列样式，仅在图表配置了seriesField时生效，可以为特定数据组（分组字段 seriesField 的数值）的图形进行统一的样式配置" + }, + "animationThreshold": { + "key": "animationThreshold", + "oneDesc": "自动关闭动画的阀值，当单系列data的长度小于这个阈值，才能使用动画，否则会自动关闭动画，防止图表卡顿" + }, + "hover": { + "key": "hover", + "oneDesc": "仅用于开启是否触发/怎么触发hover状态,默认开启.具体交互后对应的样式配置在图元中进行配置" + }, + "select": { + "key": "select", + "oneDesc": "仅用于开启是否触发/怎么触发选中状态,默认开启" + }, + "region": { + "key": "region", + "oneDesc": "图表区域，是一个矩形的区域；在直角坐标系中相当于x轴、y轴组成的区间" + }, + "title": { + "key": "title", + "oneDesc": "图表标题配置，包括主标题和副标题" + }, + "layout": { + "key": "layout", + "oneDesc": "图表布局，图表布局配置，整体布局配置，用于控制图表的布局方式，包括默认的占位布局以及网格grid布局" + }, + "legends": { + "key": "legends", + "oneDesc": "图例，通过颜色、形状、大小来区分不同的数据分组，常用于图表中数据的筛选。同时图例的选中状态会影响对应系列图表的展示与否" + }, + "tooltip": { + "key": "tooltip", + "oneDesc": "信息提示窗,浮层组件,浮窗信息,用以显示在图表不同系列图元上的对应的具体的数据信息" + }, + "player": { + "key": "player", + "oneDesc": "播放器，播放条支持播放、暂停播放、前进、后退等基本功能，帮助用户动态地展示序列数据" + }, + "dataZoom": { + "key": "dataZoom", + "oneDesc": "slider,数据筛选滑块，数据缩放组件，数据过滤器，用于区域缩放" + }, + "scrollBar": { + "key": "scrollBar", + "oneDesc": "滚动条是交互组件，用于控制图表滚动，方便查看更多数据" + }, + "brush": { + "key": "brush", + "oneDesc": "框选组件，刷选组件，区域内数据添加选中态而区域外自动取消选中，常用于数据筛选、数据对比等场景" + }, + "scales": { + "key": "scales", + "oneDesc": "scale，比例尺，比例尺配置，用于控制图表的比例尺，这里的scale是所有系列公用的比例尺，其中color是一个特殊的比例尺，用于控制图表的颜色比例尺" + }, + "customMark": { + "key": "customMark", + "oneDesc": "自定义图元，自定义mark，可以让用户在图表上添加自定义的标记，比如添加一些文本、图片、线段等" + }, + "theme": { + "key": "theme", + "oneDesc": "主题，用于控制当前vchart下所有图表的整体样式，仅在明确指定设置主题样式或者所有图表样式时使用" + }, + "background": { + "key": "background", + "oneDesc": "只能设置单个图表的的背景样式，支持背景色、渐变色、图片三种格式" + }, + "stackInverse": { + "key": "stackInverse", + "oneDesc": "堆积时是否逆序" + }, + "stackSort": { + "key": "stackSort", + "oneDesc": "堆积时是否排序" + }, + "media": { + "key": "media", + "oneDesc": "媒体查询配置用于适配不同设备，控制图表在设备类型、屏幕尺寸和分辨率上的显示效果" + }, + "state": { + "key": "state", + "oneDesc": "跟交互状态相关的配置，例如选中态/hover态/激活态等相关的内容" + } +} \ No newline at end of file diff --git a/skills/vchart-development-skill/references/topkey/area.json b/skills/vchart-development-skill/references/topkey/area.json new file mode 100644 index 0000000000..2f638c3915 --- /dev/null +++ b/skills/vchart-development-skill/references/topkey/area.json @@ -0,0 +1,206 @@ +{ + "direction": { + "key": "direction", + "oneDesc": "图表的方向配置。\n- 'vertical' 垂直布局，即常见的直角坐标系布局，x 轴位于底部，y 轴位于左侧。\n- 'horizontal' 水平布局，可理解为 x 轴和 y 轴位置互换。" + }, + "markLine": { + "key": "markLine", + "oneDesc": "参考线配置" + }, + "markArea": { + "key": "markArea", + "oneDesc": "参考区域配置" + }, + "markPoint": { + "key": "markPoint", + "oneDesc": "参考点配置" + }, + "padding": { + "key": "padding", + "oneDesc": "布局 padding的配置" + }, + "percent": { + "key": "percent", + "oneDesc": "开启后为百分比面积图" + }, + "name": { + "key": "name", + "oneDesc": "系列名称" + }, + "id": { + "key": "id", + "oneDesc": "用户自定义的 series id" + }, + "animation": { + "key": "animation", + "oneDesc": "是否开启系列动画" + }, + "stack": { + "key": "stack", + "oneDesc": "开启后为堆积面积图" + }, + "animationEnter": { + "key": "animationEnter", + "oneDesc": "数据更新 - 新增数据动画" + }, + "animationUpdate": { + "key": "animationUpdate", + "oneDesc": "数据更新 - 数据更新动画" + }, + "animationExit": { + "key": "animationExit", + "oneDesc": "数据更新 - 数据删除动画" + }, + "dataIndex": { + "key": "dataIndex", + "oneDesc": "系列关联的数据索引" + }, + "sampling": { + "key": "sampling", + "oneDesc": "数据采样 - 采样方法" + }, + "animationState": { + "key": "animationState", + "oneDesc": "状态切换动画" + }, + "large": { + "key": "large", + "oneDesc": "是否开启大数据渲染模式，开启后会降低渲染的精度" + }, + "largeThreshold": { + "key": "largeThreshold", + "oneDesc": "开启大数据渲染优化的阀值，对应的是data的长度;推荐 largeThreshold < progressiveThreshold" + }, + "progressiveStep": { + "key": "progressiveStep", + "oneDesc": "分片长度" + }, + "progressiveThreshold": { + "key": "progressiveThreshold", + "oneDesc": "开启分片渲染的阀值，对应的是单系列data的长度" + }, + "support3d": { + "key": "support3d", + "oneDesc": "是否支持3d视角" + }, + "regionIndex": { + "key": "regionIndex", + "oneDesc": "系列关联的region索引" + }, + "regionId": { + "key": "regionId", + "oneDesc": "系列关联的region id" + }, + "totalLabel": { + "key": "totalLabel", + "oneDesc": "堆叠汇总标签" + }, + "animationAppear": { + "key": "animationAppear", + "oneDesc": "图表入场动画\n支持配置图表内置不同动画效果" + }, + "animationDisappear": { + "key": "animationDisappear", + "oneDesc": "图表退场动画" + }, + "animationNormal": { + "key": "animationNormal", + "oneDesc": "循环动画" + }, + "xField": { + "key": "xField", + "oneDesc": "x轴字段" + }, + "yField": { + "key": "yField", + "oneDesc": "y轴字段" + }, + "label": { + "key": "label", + "oneDesc": "标签配置" + }, + "point": { + "key": "point", + "oneDesc": "点图元配置.同时可以配置选中，hover等交互状态下的点和鼠标的样式" + }, + "line": { + "key": "line", + "oneDesc": "线图元配置.同时可以配置选中，hover等交互状态下的线条和鼠标的样式" + }, + "area": { + "key": "area", + "oneDesc": "面积图元配置.同时可以配置选中，hover等交互状态下的area和鼠标的样式" + }, + "areaLabel": { + "key": "areaLabel", + "oneDesc": "每条线对应一个标签，一般放在折线的最尾端，值为当前折线对应的图例名称" + }, + "x2Field": { + "key": "x2Field", + "oneDesc": "用于区间数据，声明区间末尾的数据字段。" + }, + "y2Field": { + "key": "y2Field", + "oneDesc": "用于区间数据，声明区间末尾的数据字段。" + }, + "zField": { + "key": "zField", + "oneDesc": "z轴字段\n用于3d散点图等" + }, + "sortDataByAxis": { + "key": "sortDataByAxis", + "oneDesc": "是否将数据按照数轴排序" + }, + "dataId": { + "key": "dataId", + "oneDesc": "系列关联的数据id" + }, + "dataKey": { + "key": "dataKey", + "oneDesc": "dataKey用于绑定数据与Mark的关系, 该配置在动画中非常重要." + }, + "seriesField": { + "key": "seriesField", + "oneDesc": "分组字段" + }, + "stackOffsetSilhouette": { + "key": "stackOffsetSilhouette", + "oneDesc": "是否围绕中心轴偏移轮廓" + }, + "invalidType": { + "key": "invalidType", + "oneDesc": "null，undefined等非法数据点连接方式。" + }, + "extensionMark": { + "key": "extensionMark", + "oneDesc": "扩展mark" + }, + "interactions": { + "key": "interactions", + "oneDesc": "其他需要按需注册的类型交互" + }, + "activePoint": { + "key": "activePoint", + "oneDesc": "是否使用额外的 activePoint 显示交互点，可以在点隐藏时显示被交互的点" + }, + "samplingFactor": { + "key": "samplingFactor", + "oneDesc": "数据采样 - 采样系数" + }, + "seriesMark": { + "key": "seriesMark", + "oneDesc": "系列主 mark 类型配置，该配置会影响图例的展示" + }, + "pointDis": { + "key": "pointDis", + "oneDesc": "标记点之间的距离，px" + }, + "pointDisMul": { + "key": "pointDisMul", + "oneDesc": "标记点之间的距离， pointSize 的倍数" + }, + "markOverlap": { + "key": "markOverlap", + "oneDesc": "是否允许标记图形相互覆盖" + } +} \ No newline at end of file diff --git a/skills/vchart-development-skill/references/topkey/bar.json b/skills/vchart-development-skill/references/topkey/bar.json new file mode 100644 index 0000000000..1ffb6557eb --- /dev/null +++ b/skills/vchart-development-skill/references/topkey/bar.json @@ -0,0 +1,210 @@ +{ + "autoBandSize": { + "key": "autoBandSize", + "oneDesc": "是否自动开启.如果开启，会根据传入的 barWidth 等配置自动计算 bandSize，从而影响轴实际长度" + }, + "direction": { + "key": "direction", + "oneDesc": "图表方向为水平或垂直" + }, + "markLine": { + "key": "markLine", + "oneDesc": "参考线标注，支持在图表上进行标注，标注样式为线条，可以自定义各种线条样式，同时也支持文本展示" + }, + "markArea": { + "key": "markArea", + "oneDesc": "区域标注，支持在图表上对某块区域进行标注，支持对标注区域配色和文本解释." + }, + "markPoint": { + "key": "markPoint", + "oneDesc": "参考点标注，支持对图表上某个具体的点进行标注，支持文本解释" + }, + "padding": { + "key": "padding", + "oneDesc": "图表整体padding设置" + }, + "percent": { + "key": "percent", + "oneDesc": "开启后为百分比图表,与stack相同需要同步设置xField,yField,seriesField" + }, + "name": { + "key": "name", + "oneDesc": "系列名称" + }, + "id": { + "key": "id", + "oneDesc": "用户自定义的 series id" + }, + "animation": { + "key": "animation", + "oneDesc": "是否开启系列动画" + }, + "stack": { + "key": "stack", + "oneDesc": "开启后为堆叠图，关闭后为分组柱图，但需要同步设置xField,yField,seriesField" + }, + "animationEnter": { + "key": "animationEnter", + "oneDesc": "新增数据动画" + }, + "animationUpdate": { + "key": "animationUpdate", + "oneDesc": "数据更新动画" + }, + "animationExit": { + "key": "animationExit", + "oneDesc": "数据删除动画" + }, + "dataIndex": { + "key": "dataIndex", + "oneDesc": "系列关联的数据索引" + }, + "sampling": { + "key": "sampling", + "oneDesc": "数据采样具体的采样方法" + }, + "animationState": { + "key": "animationState", + "oneDesc": "状态切换动画" + }, + "large": { + "key": "large", + "oneDesc": "是否开启大数据渲染模式，开启后会降低渲染的精度" + }, + "largeThreshold": { + "key": "largeThreshold", + "oneDesc": "开启大数据渲染优化的阀值，对应的是data的长度" + }, + "progressiveStep": { + "key": "progressiveStep", + "oneDesc": "分片长度" + }, + "progressiveThreshold": { + "key": "progressiveThreshold", + "oneDesc": "开启分片渲染的阀值，对应的是单系列data的长度" + }, + "support3d": { + "key": "support3d", + "oneDesc": "是否支持3d视角" + }, + "regionIndex": { + "key": "regionIndex", + "oneDesc": "系列关联的region索引" + }, + "regionId": { + "key": "regionId", + "oneDesc": "系列关联的region id" + }, + "totalLabel": { + "key": "totalLabel", + "oneDesc": "堆叠汇总标签" + }, + "animationAppear": { + "key": "animationAppear", + "oneDesc": "图表入场动画" + }, + "animationDisappear": { + "key": "animationDisappear", + "oneDesc": "图表退场动画" + }, + "animationNormal": { + "key": "animationNormal", + "oneDesc": "循环动画" + }, + "xField": { + "key": "xField", + "oneDesc": "数据中映射到x轴的字段。当类型为数组时，图表按顺序进行数据分组，并与seriesField结合形成多系列柱图。堆积场景下xField只能包含一个字段" + }, + "yField": { + "key": "yField", + "oneDesc": "数据中映射到y轴的字段。可以声明为数组类型，内部会依次按照声明的字段进行数据分组。" + }, + "label": { + "key": "label", + "oneDesc": "标签相关配置,包括跟标签相关的引导线配置" + }, + "bar": { + "key": "bar", + "oneDesc": "柱图图元样式配置和鼠标样式配置.同时可以配置选中，hover等交互状态下的柱子和鼠标的样式" + }, + "barBackground": { + "key": "barBackground", + "oneDesc": "柱图中每根柱子背后的背景图元配置.同时可以配置选中，hover等交互状态下的背景图元和对应鼠标的样式" + }, + "barWidth": { + "key": "barWidth", + "oneDesc": "柱体宽度" + }, + "barMinWidth": { + "key": "barMinWidth", + "oneDesc": "柱体最小宽度" + }, + "barMaxWidth": { + "key": "barMaxWidth", + "oneDesc": "柱体最大宽度" + }, + "barGapInGroup": { + "key": "barGapInGroup", + "oneDesc": "分组柱图中各个分组内的柱子间距，支持多层分组" + }, + "barMinHeight": { + "key": "barMinHeight", + "oneDesc": "柱条最小高度，可用于防止某数据项的值过小的视觉调整。" + }, + "stackCornerRadius": { + "key": "stackCornerRadius", + "oneDesc": "堆叠柱整体的圆角" + }, + "x2Field": { + "key": "x2Field", + "oneDesc": "用于区间数据，声明区间末尾的数据字段" + }, + "y2Field": { + "key": "y2Field", + "oneDesc": "用于区间数据，声明区间末尾的数据字段" + }, + "zField": { + "key": "zField", + "oneDesc": "z轴字段,用于3d散点图等" + }, + "sortDataByAxis": { + "key": "sortDataByAxis", + "oneDesc": "指定数据是否按x轴顺序排序，以确保在数据顺序不确定时图形正确绘制" + }, + "dataId": { + "key": "dataId", + "oneDesc": "系列关联的数据id" + }, + "dataKey": { + "key": "dataKey", + "oneDesc": "dataKey用于绑定数据与Mark的关系, 该配置在动画中非常重要." + }, + "seriesField": { + "key": "seriesField", + "oneDesc": "分组字段映射，该字段决定了系列个数和分组情况，默认会用于颜色映射" + }, + "stackOffsetSilhouette": { + "key": "stackOffsetSilhouette", + "oneDesc": "是否围绕中心轴偏移轮廓" + }, + "invalidType": { + "key": "invalidType", + "oneDesc": "null，undefined等非法数据点连接方式。" + }, + "extensionMark": { + "key": "extensionMark", + "oneDesc": "扩展mark用于在系列数据中添加特定图元，展示自定义信息。可添加：点图形、线段、文本、矩形、路径、弧形、多边形、图像和mark组合" + }, + "interactions": { + "key": "interactions", + "oneDesc": "交互配置，配置交互行为，不包含交互样式" + }, + "activePoint": { + "key": "activePoint", + "oneDesc": "是否使用额外的 activePoint 显示交互点，可以在点隐藏时显示被交互的点" + }, + "samplingFactor": { + "key": "samplingFactor", + "oneDesc": "数据采样 - 采样系数" + } +} \ No newline at end of file diff --git a/skills/vchart-development-skill/references/topkey/bar3d.json b/skills/vchart-development-skill/references/topkey/bar3d.json new file mode 100644 index 0000000000..63d82e1ef9 --- /dev/null +++ b/skills/vchart-development-skill/references/topkey/bar3d.json @@ -0,0 +1,206 @@ +{ + "direction": { + "key": "direction", + "oneDesc": "图表的方向配置。\n- 'vertical' 垂直布局，即常见的直角坐标系布局，x 轴位于底部，y 轴位于左侧。\n- 'horizontal' 水平布局，可理解为 x 轴和 y 轴位置互换。" + }, + "markLine": { + "key": "markLine", + "oneDesc": "参考线配置" + }, + "markArea": { + "key": "markArea", + "oneDesc": "参考区域配置" + }, + "markPoint": { + "key": "markPoint", + "oneDesc": "参考点配置" + }, + "padding": { + "key": "padding", + "oneDesc": "布局 padding的配置" + }, + "percent": { + "key": "percent", + "oneDesc": "开启后为百分比图表" + }, + "name": { + "key": "name", + "oneDesc": "系列名称" + }, + "id": { + "key": "id", + "oneDesc": "用户自定义的 series id" + }, + "animation": { + "key": "animation", + "oneDesc": "是否开启系列动画" + }, + "stack": { + "key": "stack", + "oneDesc": "是否对数据进行堆叠处理" + }, + "animationEnter": { + "key": "animationEnter", + "oneDesc": "数据更新 - 新增数据动画" + }, + "animationUpdate": { + "key": "animationUpdate", + "oneDesc": "数据更新 - 数据更新动画" + }, + "animationExit": { + "key": "animationExit", + "oneDesc": "数据更新 - 数据删除动画" + }, + "dataIndex": { + "key": "dataIndex", + "oneDesc": "系列关联的数据索引" + }, + "sampling": { + "key": "sampling", + "oneDesc": "数据采样 - 采样方法" + }, + "animationState": { + "key": "animationState", + "oneDesc": "状态切换动画" + }, + "large": { + "key": "large", + "oneDesc": "是否开启大数据渲染模式，开启后会降低渲染的精度" + }, + "largeThreshold": { + "key": "largeThreshold", + "oneDesc": "开启大数据渲染优化的阀值，对应的是data的长度;推荐 largeThreshold < progressiveThreshold" + }, + "progressiveStep": { + "key": "progressiveStep", + "oneDesc": "分片长度" + }, + "progressiveThreshold": { + "key": "progressiveThreshold", + "oneDesc": "开启分片渲染的阀值，对应的是单系列data的长度" + }, + "support3d": { + "key": "support3d", + "oneDesc": "是否支持3d视角" + }, + "regionIndex": { + "key": "regionIndex", + "oneDesc": "系列关联的region索引" + }, + "regionId": { + "key": "regionId", + "oneDesc": "系列关联的region id" + }, + "totalLabel": { + "key": "totalLabel", + "oneDesc": "堆叠汇总标签" + }, + "animationAppear": { + "key": "animationAppear", + "oneDesc": "图表入场动画\n支持配置图表内置不同动画效果" + }, + "animationDisappear": { + "key": "animationDisappear", + "oneDesc": "图表退场动画" + }, + "animationNormal": { + "key": "animationNormal", + "oneDesc": "循环动画" + }, + "xField": { + "key": "xField", + "oneDesc": "x轴字段" + }, + "yField": { + "key": "yField", + "oneDesc": "y轴字段\ny轴字段\n运行双轴都为离散，连续。所以 yField 也可以像 xField 一样支持多维度" + }, + "label": { + "key": "label", + "oneDesc": "标签配置" + }, + "bar": { + "key": "bar", + "oneDesc": "柱图图元样式配置.同时可以配置选中，hover等交互状态下的柱子和对应鼠标的样式" + }, + "barBackground": { + "key": "barBackground", + "oneDesc": "柱图中每根柱子背后的背景图元配置.同时可以配置选中，hover等交互状态下的背景图元和对应鼠标的样式" + }, + "barWidth": { + "key": "barWidth", + "oneDesc": "柱体宽度，可以设置绝对的像素值，也可以使用百分比（如 '10%'）\n1. number 类型，表示像素值\n2. string 类型，百分比用法，如 '10%'，该值为对应最后一个分组字段对应的 scale 的 bandWidth 占比(因为柱子是等宽的，所以采用最后一层分组的 scale)" + }, + "barMinWidth": { + "key": "barMinWidth", + "oneDesc": "柱体最小宽度，可以设置绝对的像素值，也可以使用百分比（如 '10%'）\n1. number 类型，表示像素值\n2. string 类型，百分比用法，如 '10%'，该值为对应最后一个分组字段对应的 scale 的 bandWidth 占比(因为柱子是等宽的，所以采用最后一层分组的 scale)" + }, + "barMaxWidth": { + "key": "barMaxWidth", + "oneDesc": "柱体最大宽度，可以设置绝对的像素值，也可以使用百分比（如 '10%'）\n1. number 类型，表示像素值\n2. string 类型，百分比用法，如 '10%'，该值为对应最后一个分组字段对应的 scale 的 bandWidth 占比(因为柱子是等宽的，所以采用最后一层分组的 scale)" + }, + "barGapInGroup": { + "key": "barGapInGroup", + "oneDesc": "分组柱图中各个分组内的柱子间距，可以设置绝对的像素值，也可以使用百分比（如 '10%'）。\n当存在多层分组时，可以使用数组来设置不同层级的间距，如 [10, '20%']，表示第一层分组的间距为 10px，第二层分组的间距为 '20%'。\n如果 barGapInGroup 的数组个数小于分组层数，则后面的分组间距使用最后一个值。\n1. number 类型，表示像素值\n2. string 类型，百分比用法，如 '10%'，该值为对应最后一个分组字段对应的 scale 的 bandWidth 占比(因为柱子是等宽的，所以采用最后一层分组的 scale)" + }, + "barMinHeight": { + "key": "barMinHeight", + "oneDesc": "柱条最小高度，可用于防止某数据项的值过小的视觉调整。" + }, + "stackCornerRadius": { + "key": "stackCornerRadius", + "oneDesc": "堆叠柱整体的圆角" + }, + "x2Field": { + "key": "x2Field", + "oneDesc": "用于区间数据，声明区间末尾的数据字段。" + }, + "y2Field": { + "key": "y2Field", + "oneDesc": "用于区间数据，声明区间末尾的数据字段。" + }, + "zField": { + "key": "zField", + "oneDesc": "z轴字段\n用于3d散点图等" + }, + "sortDataByAxis": { + "key": "sortDataByAxis", + "oneDesc": "是否将数据按照数轴排序" + }, + "dataId": { + "key": "dataId", + "oneDesc": "系列关联的数据id" + }, + "dataKey": { + "key": "dataKey", + "oneDesc": "dataKey用于绑定数据与Mark的关系, 该配置在动画中非常重要." + }, + "seriesField": { + "key": "seriesField", + "oneDesc": "分组字段" + }, + "stackOffsetSilhouette": { + "key": "stackOffsetSilhouette", + "oneDesc": "是否围绕中心轴偏移轮廓" + }, + "invalidType": { + "key": "invalidType", + "oneDesc": "null，undefined等非法数据点连接方式。" + }, + "extensionMark": { + "key": "extensionMark", + "oneDesc": "扩展mark" + }, + "interactions": { + "key": "interactions", + "oneDesc": "其他需要按需注册的类型交互" + }, + "activePoint": { + "key": "activePoint", + "oneDesc": "是否使用额外的 activePoint 显示交互点，可以在点隐藏时显示被交互的点" + }, + "samplingFactor": { + "key": "samplingFactor", + "oneDesc": "数据采样 - 采样系数" + } +} \ No newline at end of file diff --git a/skills/vchart-development-skill/references/topkey/boxPlot.json b/skills/vchart-development-skill/references/topkey/boxPlot.json new file mode 100644 index 0000000000..69abf95d0a --- /dev/null +++ b/skills/vchart-development-skill/references/topkey/boxPlot.json @@ -0,0 +1,190 @@ +{ + "direction": { + "key": "direction", + "oneDesc": "图表的方向配置。\n- 'vertical' 垂直布局，即常见的直角坐标系布局，x 轴位于底部，y 轴位于左侧。\n- 'horizontal' 水平布局，可理解为 x 轴和 y 轴位置互换。" + }, + "markLine": { + "key": "markLine", + "oneDesc": "参考线配置" + }, + "markArea": { + "key": "markArea", + "oneDesc": "参考区域配置" + }, + "markPoint": { + "key": "markPoint", + "oneDesc": "参考点配置" + }, + "padding": { + "key": "padding", + "oneDesc": "布局 padding的配置" + }, + "percent": { + "key": "percent", + "oneDesc": "是否对数据进行百分比处理" + }, + "name": { + "key": "name", + "oneDesc": "系列名称" + }, + "id": { + "key": "id", + "oneDesc": "用户自定义的 series id" + }, + "animation": { + "key": "animation", + "oneDesc": "是否开启系列动画" + }, + "stack": { + "key": "stack", + "oneDesc": "是否对数据进行堆叠处理" + }, + "animationEnter": { + "key": "animationEnter", + "oneDesc": "数据更新 - 新增数据动画" + }, + "animationUpdate": { + "key": "animationUpdate", + "oneDesc": "数据更新 - 数据更新动画" + }, + "animationExit": { + "key": "animationExit", + "oneDesc": "数据更新 - 数据删除动画" + }, + "dataIndex": { + "key": "dataIndex", + "oneDesc": "系列关联的数据索引" + }, + "animationState": { + "key": "animationState", + "oneDesc": "状态切换动画" + }, + "large": { + "key": "large", + "oneDesc": "是否开启大数据渲染模式，开启后会降低渲染的精度" + }, + "largeThreshold": { + "key": "largeThreshold", + "oneDesc": "开启大数据渲染优化的阀值，对应的是data的长度;推荐 largeThreshold < progressiveThreshold" + }, + "progressiveStep": { + "key": "progressiveStep", + "oneDesc": "分片长度" + }, + "progressiveThreshold": { + "key": "progressiveThreshold", + "oneDesc": "开启分片渲染的阀值，对应的是单系列data的长度" + }, + "support3d": { + "key": "support3d", + "oneDesc": "是否支持3d视角" + }, + "regionIndex": { + "key": "regionIndex", + "oneDesc": "系列关联的region索引" + }, + "regionId": { + "key": "regionId", + "oneDesc": "系列关联的region id" + }, + "totalLabel": { + "key": "totalLabel", + "oneDesc": "堆叠汇总标签" + }, + "animationAppear": { + "key": "animationAppear", + "oneDesc": "图表入场动画\n支持配置图表内置不同动画效果" + }, + "animationDisappear": { + "key": "animationDisappear", + "oneDesc": "图表退场动画" + }, + "animationNormal": { + "key": "animationNormal", + "oneDesc": "循环动画" + }, + "xField": { + "key": "xField", + "oneDesc": "x轴字段（direction=vertical时生效）" + }, + "yField": { + "key": "yField", + "oneDesc": "y轴字段（direction=horizontal时生效）" + }, + "boxPlot": { + "key": "boxPlot", + "oneDesc": "箱体图元配置.同时可以配置选中，hover等交互状态下的图元和对应鼠标的样式" + }, + "x2Field": { + "key": "x2Field", + "oneDesc": "用于区间数据，声明区间末尾的数据字段。" + }, + "y2Field": { + "key": "y2Field", + "oneDesc": "用于区间数据，声明区间末尾的数据字段。" + }, + "zField": { + "key": "zField", + "oneDesc": "z轴字段\n用于3d散点图等" + }, + "sortDataByAxis": { + "key": "sortDataByAxis", + "oneDesc": "是否将数据按照数轴排序" + }, + "dataId": { + "key": "dataId", + "oneDesc": "系列关联的数据id" + }, + "dataKey": { + "key": "dataKey", + "oneDesc": "dataKey用于绑定数据与Mark的关系, 该配置在动画中非常重要." + }, + "seriesField": { + "key": "seriesField", + "oneDesc": "分组字段" + }, + "stackOffsetSilhouette": { + "key": "stackOffsetSilhouette", + "oneDesc": "是否围绕中心轴偏移轮廓" + }, + "invalidType": { + "key": "invalidType", + "oneDesc": "null，undefined等非法数据点连接方式。" + }, + "extensionMark": { + "key": "extensionMark", + "oneDesc": "扩展mark" + }, + "interactions": { + "key": "interactions", + "oneDesc": "其他需要按需注册的类型交互" + }, + "minField": { + "key": "minField", + "oneDesc": "最小值字段" + }, + "maxField": { + "key": "maxField", + "oneDesc": "最大值字段" + }, + "q1Field": { + "key": "q1Field", + "oneDesc": "q1字段" + }, + "medianField": { + "key": "medianField", + "oneDesc": "中位数字段" + }, + "q3Field": { + "key": "q3Field", + "oneDesc": "q3字段" + }, + "outliersField": { + "key": "outliersField", + "oneDesc": "异常值字段" + }, + "outliersStyle": { + "key": "outliersStyle", + "oneDesc": "异常值样式配置" + } +} \ No newline at end of file diff --git a/skills/vchart-development-skill/references/topkey/circlePacking.json b/skills/vchart-development-skill/references/topkey/circlePacking.json new file mode 100644 index 0000000000..59015907f4 --- /dev/null +++ b/skills/vchart-development-skill/references/topkey/circlePacking.json @@ -0,0 +1,130 @@ +{ + "padding": { + "key": "padding", + "oneDesc": "布局 padding的配置" + }, + "percent": { + "key": "percent", + "oneDesc": "是否对数据进行百分比处理" + }, + "name": { + "key": "name", + "oneDesc": "系列名称" + }, + "id": { + "key": "id", + "oneDesc": "用户自定义的 series id" + }, + "animation": { + "key": "animation", + "oneDesc": "是否开启系列动画" + }, + "stack": { + "key": "stack", + "oneDesc": "是否对数据进行堆叠处理" + }, + "animationEnter": { + "key": "animationEnter", + "oneDesc": "数据更新 - 新增数据动画" + }, + "animationUpdate": { + "key": "animationUpdate", + "oneDesc": "数据更新 - 数据更新动画" + }, + "animationExit": { + "key": "animationExit", + "oneDesc": "数据更新 - 数据删除动画" + }, + "dataIndex": { + "key": "dataIndex", + "oneDesc": "系列关联的数据索引" + }, + "valueField": { + "key": "valueField", + "oneDesc": "权重字段" + }, + "animationState": { + "key": "animationState", + "oneDesc": "状态切换动画" + }, + "support3d": { + "key": "support3d", + "oneDesc": "是否支持3d视角" + }, + "regionIndex": { + "key": "regionIndex", + "oneDesc": "系列关联的region索引" + }, + "regionId": { + "key": "regionId", + "oneDesc": "系列关联的region id" + }, + "drill": { + "key": "drill", + "oneDesc": "下钻功能开关" + }, + "totalLabel": { + "key": "totalLabel", + "oneDesc": "堆叠汇总标签" + }, + "animationAppear": { + "key": "animationAppear", + "oneDesc": "图表入场动画\n支持配置图表内置不同动画效果" + }, + "animationDisappear": { + "key": "animationDisappear", + "oneDesc": "图表退场动画" + }, + "animationNormal": { + "key": "animationNormal", + "oneDesc": "循环动画" + }, + "categoryField": { + "key": "categoryField", + "oneDesc": "分类字段" + }, + "label": { + "key": "label", + "oneDesc": "对所有层生效" + }, + "circlePacking": { + "key": "circlePacking", + "oneDesc": "嵌套圆图中每个圆的图元配置.同时可以配置选中，hover等交互状态下的图元和对应鼠标的样式" + }, + "dataId": { + "key": "dataId", + "oneDesc": "系列关联的数据id" + }, + "dataKey": { + "key": "dataKey", + "oneDesc": "dataKey用于绑定数据与Mark的关系, 该配置在动画中非常重要." + }, + "seriesField": { + "key": "seriesField", + "oneDesc": "分组字段" + }, + "stackOffsetSilhouette": { + "key": "stackOffsetSilhouette", + "oneDesc": "是否围绕中心轴偏移轮廓" + }, + "invalidType": { + "key": "invalidType", + "oneDesc": "null，undefined等非法数据点连接方式。" + }, + "extensionMark": { + "key": "extensionMark", + "oneDesc": "扩展mark" + }, + "interactions": { + "key": "interactions", + "oneDesc": "其他需要按需注册的类型交互" + }, + "layoutPadding": { + "key": "layoutPadding", + "oneDesc": "支持传入数组, 单独控制某一层的内边距" + }, + "drillField": { + "key": "drillField", + "oneDesc": "通过API进行钻取, 需要此配置项." + } +} \ No newline at end of file diff --git a/skills/vchart-development-skill/references/topkey/circularProgress.json b/skills/vchart-development-skill/references/topkey/circularProgress.json new file mode 100644 index 0000000000..cf75e21a2c --- /dev/null +++ b/skills/vchart-development-skill/references/topkey/circularProgress.json @@ -0,0 +1,172 @@ +{ + "seriesField": { + "key": "seriesField", + "oneDesc": "分组字段" + }, + "cornerRadius": { + "key": "cornerRadius", + "oneDesc": "进度条圆角半径" + }, + "padding": { + "key": "padding", + "oneDesc": "布局 padding的配置" + }, + "percent": { + "key": "percent", + "oneDesc": "是否对数据进行百分比处理" + }, + "name": { + "key": "name", + "oneDesc": "系列名称" + }, + "id": { + "key": "id", + "oneDesc": "用户自定义的 series id" + }, + "animation": { + "key": "animation", + "oneDesc": "是否开启系列动画" + }, + "innerRadius": { + "key": "innerRadius", + "oneDesc": "扇区内半径" + }, + "outerRadius": { + "key": "outerRadius", + "oneDesc": "扇区外半径" + }, + "startAngle": { + "key": "startAngle", + "oneDesc": "扇区起始角度" + }, + "endAngle": { + "key": "endAngle", + "oneDesc": "扇区结束角度" + }, + "radius": { + "key": "radius", + "oneDesc": "扇区半径" + }, + "stack": { + "key": "stack", + "oneDesc": "是否对数据进行堆叠处理" + }, + "animationEnter": { + "key": "animationEnter", + "oneDesc": "数据更新 - 新增数据动画" + }, + "animationUpdate": { + "key": "animationUpdate", + "oneDesc": "数据更新 - 数据更新动画" + }, + "animationExit": { + "key": "animationExit", + "oneDesc": "数据更新 - 数据删除动画" + }, + "dataIndex": { + "key": "dataIndex", + "oneDesc": "系列关联的数据索引" + }, + "valueField": { + "key": "valueField", + "oneDesc": "数值字段" + }, + "animationState": { + "key": "animationState", + "oneDesc": "状态切换动画" + }, + "support3d": { + "key": "support3d", + "oneDesc": "是否支持3d视角" + }, + "regionIndex": { + "key": "regionIndex", + "oneDesc": "系列关联的region索引" + }, + "regionId": { + "key": "regionId", + "oneDesc": "系列关联的region id" + }, + "totalLabel": { + "key": "totalLabel", + "oneDesc": "堆叠汇总标签" + }, + "animationAppear": { + "key": "animationAppear", + "oneDesc": "图表入场动画\n支持配置图表内置不同动画效果" + }, + "animationDisappear": { + "key": "animationDisappear", + "oneDesc": "图表退场动画" + }, + "animationNormal": { + "key": "animationNormal", + "oneDesc": "循环动画" + }, + "categoryField": { + "key": "categoryField", + "oneDesc": "分类字段" + }, + "track": { + "key": "track", + "oneDesc": "背景样式" + }, + "progress": { + "key": "progress", + "oneDesc": "进度条样式" + }, + "sortDataByAxis": { + "key": "sortDataByAxis", + "oneDesc": "是否将数据按照数轴排序" + }, + "dataId": { + "key": "dataId", + "oneDesc": "系列关联的数据id" + }, + "dataKey": { + "key": "dataKey", + "oneDesc": "dataKey用于绑定数据与Mark的关系, 该配置在动画中非常重要." + }, + "stackOffsetSilhouette": { + "key": "stackOffsetSilhouette", + "oneDesc": "是否围绕中心轴偏移轮廓" + }, + "invalidType": { + "key": "invalidType", + "oneDesc": "null，undefined等非法数据点连接方式。" + }, + "extensionMark": { + "key": "extensionMark", + "oneDesc": "扩展mark" + }, + "interactions": { + "key": "interactions", + "oneDesc": "其他需要按需注册的类型交互" + }, + "centerX": { + "key": "centerX", + "oneDesc": "中心点 x 坐标" + }, + "centerY": { + "key": "centerY", + "oneDesc": "中心点 y 坐标" + }, + "radiusField": { + "key": "radiusField" + }, + "angleField": { + "key": "angleField" + }, + "roundCap": { + "key": "roundCap", + "oneDesc": "圆角部分是否突出（可分别设置左侧和右侧）" + }, + "tickMask": { + "key": "tickMask", + "oneDesc": "tick 模式显示" + }, + "maxValue": { + "key": "maxValue", + "oneDesc": "数据最大值，默认为 1" + } +} \ No newline at end of file diff --git a/skills/vchart-development-skill/references/topkey/common.json b/skills/vchart-development-skill/references/topkey/common.json new file mode 100644 index 0000000000..524be29435 --- /dev/null +++ b/skills/vchart-development-skill/references/topkey/common.json @@ -0,0 +1,66 @@ +{ + "type": { + "key": "type", + "oneDesc": "图表类型，当前为组合图表" + }, + "series": { + "key": "series", + "oneDesc": "series(系列)是描述数据在图表中呈现方式的基本概念。组合图的各种图元相关配置和映射方式都放在series中进行配置" + }, + "bar": { + "key": "bar", + "oneDesc": "柱图图元样式配置" + }, + "barBackground": { + "key": "barBackground", + "oneDesc": "柱图中每根柱子背后的背景图元配置" + }, + "point": { + "key": "point", + "oneDesc": "点图元配置" + }, + "line": { + "key": "line", + "oneDesc": "线图元配置" + }, + "area": { + "key": "area", + "oneDesc": "面积图元配置" + }, + "boxPlot": { + "key": "boxPlot", + "oneDesc": "箱体图元配置" + }, + "circlePacking": { + "key": "circlePacking", + "oneDesc": "嵌套圆图中每个圆的图元配置" + }, + "cell": { + "key": "cell", + "oneDesc": "单元格图元配置" + }, + "cellBackground": { + "key": "cellBackground", + "oneDesc": "每个单元格对应的背景配置" + }, + "sunburst": { + "key": "sunburst", + "oneDesc": "旭日图中单个扇区图元配置" + }, + "circle": { + "key": "circle", + "oneDesc": "韦恩图中圆形图元配置" + }, + "markLine": { + "key": "markLine", + "oneDesc": "参考线标注，支持在图表上进行标注，标注样式为线条，可以自定义各种线条样式，同时也支持文本展示" + }, + "markArea": { + "key": "markArea", + "oneDesc": "区域标注，支持在图表上对某块区域进行标注，支持对标注区域配色和文本解释." + }, + "markPoint": { + "key": "markPoint", + "oneDesc": "参考点标注，支持对图表上某个具体的点进行标注，支持文本解释" + } +} \ No newline at end of file diff --git a/skills/vchart-development-skill/references/topkey/correlation.json b/skills/vchart-development-skill/references/topkey/correlation.json new file mode 100644 index 0000000000..aea8b4ef76 --- /dev/null +++ b/skills/vchart-development-skill/references/topkey/correlation.json @@ -0,0 +1,172 @@ +{ + "percent": { + "key": "percent", + "oneDesc": "是否对数据进行百分比处理" + }, + "name": { + "key": "name", + "oneDesc": "系列名称" + }, + "id": { + "key": "id", + "oneDesc": "用户自定义的 series id" + }, + "animation": { + "key": "animation", + "oneDesc": "是否开启系列动画" + }, + "innerRadius": { + "key": "innerRadius", + "oneDesc": "节点分布内半径" + }, + "outerRadius": { + "key": "outerRadius", + "oneDesc": "节点分布外半径" + }, + "startAngle": { + "key": "startAngle", + "oneDesc": "图表起始角度" + }, + "endAngle": { + "key": "endAngle", + "oneDesc": "图表终止角度" + }, + "radius": { + "key": "radius", + "oneDesc": "扇区半径" + }, + "stack": { + "key": "stack", + "oneDesc": "是否对数据进行堆叠处理" + }, + "animationEnter": { + "key": "animationEnter", + "oneDesc": "数据更新 - 新增数据动画" + }, + "animationUpdate": { + "key": "animationUpdate", + "oneDesc": "数据更新 - 数据更新动画" + }, + "animationExit": { + "key": "animationExit", + "oneDesc": "数据更新 - 数据删除动画" + }, + "dataIndex": { + "key": "dataIndex", + "oneDesc": "系列关联的数据索引" + }, + "valueField": { + "key": "valueField", + "oneDesc": "相关性数据字段配置" + }, + "animationState": { + "key": "animationState", + "oneDesc": "状态切换动画" + }, + "support3d": { + "key": "support3d", + "oneDesc": "是否支持3d视角" + }, + "regionIndex": { + "key": "regionIndex", + "oneDesc": "系列关联的region索引" + }, + "regionId": { + "key": "regionId", + "oneDesc": "系列关联的region id" + }, + "totalLabel": { + "key": "totalLabel", + "oneDesc": "堆叠汇总标签" + }, + "animationAppear": { + "key": "animationAppear", + "oneDesc": "图表入场动画\n支持配置图表内置不同动画效果" + }, + "animationDisappear": { + "key": "animationDisappear", + "oneDesc": "图表退场动画" + }, + "animationNormal": { + "key": "animationNormal", + "oneDesc": "循环动画" + }, + "categoryField": { + "key": "categoryField", + "oneDesc": "节点名称字段配置" + }, + "label": { + "key": "label", + "oneDesc": "标签配置" + }, + "nodePoint": { + "key": "nodePoint", + "oneDesc": "节点图元属性" + }, + "ripplePoint": { + "key": "ripplePoint", + "oneDesc": "水波纹图元属性 *" + }, + "centerPoint": { + "key": "centerPoint", + "oneDesc": "中心点图元属性 *" + }, + "centerLabel": { + "key": "centerLabel", + "oneDesc": "中心点label属性 *" + }, + "sortDataByAxis": { + "key": "sortDataByAxis", + "oneDesc": "是否将数据按照数轴排序" + }, + "dataId": { + "key": "dataId", + "oneDesc": "系列关联的数据id" + }, + "dataKey": { + "key": "dataKey", + "oneDesc": "dataKey用于绑定数据与Mark的关系, 该配置在动画中非常重要." + }, + "seriesField": { + "key": "seriesField", + "oneDesc": "节点系列字段配置" + }, + "stackOffsetSilhouette": { + "key": "stackOffsetSilhouette", + "oneDesc": "是否围绕中心轴偏移轮廓" + }, + "invalidType": { + "key": "invalidType", + "oneDesc": "null，undefined等非法数据点连接方式。" + }, + "extensionMark": { + "key": "extensionMark", + "oneDesc": "扩展mark" + }, + "interactions": { + "key": "interactions", + "oneDesc": "其他需要按需注册的类型交互" + }, + "centerX": { + "key": "centerX", + "oneDesc": "图表中心点位置X坐标" + }, + "centerY": { + "key": "centerY", + "oneDesc": "图表中心点位置Y坐标" + }, + "radiusField": { + "key": "radiusField" + }, + "angleField": { + "key": "angleField" + }, + "sizeField": { + "key": "sizeField", + "oneDesc": "节点尺寸数据字段配置" + }, + "sizeRange": { + "key": "sizeRange", + "oneDesc": "节点尺寸映射范围" + } +} \ No newline at end of file diff --git a/skills/vchart-development-skill/references/topkey/funnel.json b/skills/vchart-development-skill/references/topkey/funnel.json new file mode 100644 index 0000000000..28808b0672 --- /dev/null +++ b/skills/vchart-development-skill/references/topkey/funnel.json @@ -0,0 +1,170 @@ +{ + "padding": { + "key": "padding", + "oneDesc": "布局 padding的配置" + }, + "percent": { + "key": "percent", + "oneDesc": "是否对数据进行百分比处理" + }, + "name": { + "key": "name", + "oneDesc": "系列名称" + }, + "id": { + "key": "id", + "oneDesc": "用户自定义的 series id" + }, + "animation": { + "key": "animation", + "oneDesc": "是否开启系列动画" + }, + "gap": { + "key": "gap", + "oneDesc": "漏斗层之间的像素间隔。转化漏斗图不支持gap配置。" + }, + "stack": { + "key": "stack", + "oneDesc": "是否对数据进行堆叠处理" + }, + "shape": { + "key": "shape", + "oneDesc": "图元形状。转化漏斗图仅支持 'rect'.同时可以配置选中，hover等交互状态下的点和鼠标的样式" + }, + "range": { + "key": "range", + "oneDesc": "指定数据项的最大值和最小值" + }, + "animationEnter": { + "key": "animationEnter", + "oneDesc": "数据更新 - 新增数据动画" + }, + "animationUpdate": { + "key": "animationUpdate", + "oneDesc": "数据更新 - 数据更新动画" + }, + "animationExit": { + "key": "animationExit", + "oneDesc": "数据更新 - 数据删除动画" + }, + "dataIndex": { + "key": "dataIndex", + "oneDesc": "系列关联的数据索引" + }, + "heightRatio": { + "key": "heightRatio", + "oneDesc": "漏斗层与转化层的图形高度比例\nThe height ratio between the funnel graphic and the transform graphic" + }, + "valueField": { + "key": "valueField", + "oneDesc": "数值字段" + }, + "animationState": { + "key": "animationState", + "oneDesc": "状态切换动画" + }, + "support3d": { + "key": "support3d", + "oneDesc": "是否支持3d视角" + }, + "regionIndex": { + "key": "regionIndex", + "oneDesc": "系列关联的region索引" + }, + "regionId": { + "key": "regionId", + "oneDesc": "系列关联的region id" + }, + "totalLabel": { + "key": "totalLabel", + "oneDesc": "堆叠汇总标签" + }, + "animationAppear": { + "key": "animationAppear", + "oneDesc": "图表入场动画\n支持配置图表内置不同动画效果" + }, + "animationDisappear": { + "key": "animationDisappear", + "oneDesc": "图表退场动画" + }, + "animationNormal": { + "key": "animationNormal", + "oneDesc": "循环动画" + }, + "categoryField": { + "key": "categoryField", + "oneDesc": "分类字段" + }, + "label": { + "key": "label", + "oneDesc": "漏斗层标签配置" + }, + "funnel": { + "key": "funnel", + "oneDesc": "漏斗层样式" + }, + "transform": { + "key": "transform", + "oneDesc": "转化层样式" + }, + "transformLabel": { + "key": "transformLabel", + "oneDesc": "转化层标签配置" + }, + "outerLabel": { + "key": "outerLabel", + "oneDesc": "漏斗层外部标签配置" + }, + "dataId": { + "key": "dataId", + "oneDesc": "系列关联的数据id" + }, + "dataKey": { + "key": "dataKey", + "oneDesc": "dataKey用于绑定数据与Mark的关系, 该配置在动画中非常重要." + }, + "seriesField": { + "key": "seriesField", + "oneDesc": "分组字段" + }, + "stackOffsetSilhouette": { + "key": "stackOffsetSilhouette", + "oneDesc": "是否围绕中心轴偏移轮廓" + }, + "invalidType": { + "key": "invalidType", + "oneDesc": "null，undefined等非法数据点连接方式。" + }, + "extensionMark": { + "key": "extensionMark", + "oneDesc": "扩展mark" + }, + "interactions": { + "key": "interactions", + "oneDesc": "其他需要按需注册的类型交互" + }, + "funnelOrient": { + "key": "funnelOrient", + "oneDesc": "漏斗图朝向。" + }, + "isTransform": { + "key": "isTransform", + "oneDesc": "是否是转化漏斗图" + }, + "isCone": { + "key": "isCone", + "oneDesc": "漏斗图最下层是否尖角。shape为`rect`时不生效" + }, + "funnelAlign": { + "key": "funnelAlign", + "oneDesc": "漏斗图对齐方式。转化漏斗图仅支持'center'" + }, + "maxSize": { + "key": "maxSize", + "oneDesc": "漏斗图最大宽度，支持配置像素值和百分比字符串。" + }, + "minSize": { + "key": "minSize", + "oneDesc": "漏斗图最小宽度，支持配置像素值和百分比字符串。" + } +} \ No newline at end of file diff --git a/skills/vchart-development-skill/references/topkey/funnel3d.json b/skills/vchart-development-skill/references/topkey/funnel3d.json new file mode 100644 index 0000000000..28808b0672 --- /dev/null +++ b/skills/vchart-development-skill/references/topkey/funnel3d.json @@ -0,0 +1,170 @@ +{ + "padding": { + "key": "padding", + "oneDesc": "布局 padding的配置" + }, + "percent": { + "key": "percent", + "oneDesc": "是否对数据进行百分比处理" + }, + "name": { + "key": "name", + "oneDesc": "系列名称" + }, + "id": { + "key": "id", + "oneDesc": "用户自定义的 series id" + }, + "animation": { + "key": "animation", + "oneDesc": "是否开启系列动画" + }, + "gap": { + "key": "gap", + "oneDesc": "漏斗层之间的像素间隔。转化漏斗图不支持gap配置。" + }, + "stack": { + "key": "stack", + "oneDesc": "是否对数据进行堆叠处理" + }, + "shape": { + "key": "shape", + "oneDesc": "图元形状。转化漏斗图仅支持 'rect'.同时可以配置选中，hover等交互状态下的点和鼠标的样式" + }, + "range": { + "key": "range", + "oneDesc": "指定数据项的最大值和最小值" + }, + "animationEnter": { + "key": "animationEnter", + "oneDesc": "数据更新 - 新增数据动画" + }, + "animationUpdate": { + "key": "animationUpdate", + "oneDesc": "数据更新 - 数据更新动画" + }, + "animationExit": { + "key": "animationExit", + "oneDesc": "数据更新 - 数据删除动画" + }, + "dataIndex": { + "key": "dataIndex", + "oneDesc": "系列关联的数据索引" + }, + "heightRatio": { + "key": "heightRatio", + "oneDesc": "漏斗层与转化层的图形高度比例\nThe height ratio between the funnel graphic and the transform graphic" + }, + "valueField": { + "key": "valueField", + "oneDesc": "数值字段" + }, + "animationState": { + "key": "animationState", + "oneDesc": "状态切换动画" + }, + "support3d": { + "key": "support3d", + "oneDesc": "是否支持3d视角" + }, + "regionIndex": { + "key": "regionIndex", + "oneDesc": "系列关联的region索引" + }, + "regionId": { + "key": "regionId", + "oneDesc": "系列关联的region id" + }, + "totalLabel": { + "key": "totalLabel", + "oneDesc": "堆叠汇总标签" + }, + "animationAppear": { + "key": "animationAppear", + "oneDesc": "图表入场动画\n支持配置图表内置不同动画效果" + }, + "animationDisappear": { + "key": "animationDisappear", + "oneDesc": "图表退场动画" + }, + "animationNormal": { + "key": "animationNormal", + "oneDesc": "循环动画" + }, + "categoryField": { + "key": "categoryField", + "oneDesc": "分类字段" + }, + "label": { + "key": "label", + "oneDesc": "漏斗层标签配置" + }, + "funnel": { + "key": "funnel", + "oneDesc": "漏斗层样式" + }, + "transform": { + "key": "transform", + "oneDesc": "转化层样式" + }, + "transformLabel": { + "key": "transformLabel", + "oneDesc": "转化层标签配置" + }, + "outerLabel": { + "key": "outerLabel", + "oneDesc": "漏斗层外部标签配置" + }, + "dataId": { + "key": "dataId", + "oneDesc": "系列关联的数据id" + }, + "dataKey": { + "key": "dataKey", + "oneDesc": "dataKey用于绑定数据与Mark的关系, 该配置在动画中非常重要." + }, + "seriesField": { + "key": "seriesField", + "oneDesc": "分组字段" + }, + "stackOffsetSilhouette": { + "key": "stackOffsetSilhouette", + "oneDesc": "是否围绕中心轴偏移轮廓" + }, + "invalidType": { + "key": "invalidType", + "oneDesc": "null，undefined等非法数据点连接方式。" + }, + "extensionMark": { + "key": "extensionMark", + "oneDesc": "扩展mark" + }, + "interactions": { + "key": "interactions", + "oneDesc": "其他需要按需注册的类型交互" + }, + "funnelOrient": { + "key": "funnelOrient", + "oneDesc": "漏斗图朝向。" + }, + "isTransform": { + "key": "isTransform", + "oneDesc": "是否是转化漏斗图" + }, + "isCone": { + "key": "isCone", + "oneDesc": "漏斗图最下层是否尖角。shape为`rect`时不生效" + }, + "funnelAlign": { + "key": "funnelAlign", + "oneDesc": "漏斗图对齐方式。转化漏斗图仅支持'center'" + }, + "maxSize": { + "key": "maxSize", + "oneDesc": "漏斗图最大宽度，支持配置像素值和百分比字符串。" + }, + "minSize": { + "key": "minSize", + "oneDesc": "漏斗图最小宽度，支持配置像素值和百分比字符串。" + } +} \ No newline at end of file diff --git a/skills/vchart-development-skill/references/topkey/gauge.json b/skills/vchart-development-skill/references/topkey/gauge.json new file mode 100644 index 0000000000..1597b00a3a --- /dev/null +++ b/skills/vchart-development-skill/references/topkey/gauge.json @@ -0,0 +1,188 @@ +{ + "gauge": { + "key": "gauge", + "oneDesc": "表盘背景，可选择 gauge 系列或 circularProgress 系列的配置" + }, + "padding": { + "key": "padding", + "oneDesc": "布局 padding的配置" + }, + "indicator": { + "key": "indicator", + "oneDesc": "指标卡配置" + }, + "layoutRadius": { + "key": "layoutRadius" + }, + "percent": { + "key": "percent", + "oneDesc": "是否对数据进行百分比处理" + }, + "name": { + "key": "name", + "oneDesc": "系列名称" + }, + "id": { + "key": "id", + "oneDesc": "用户自定义的 series id" + }, + "animation": { + "key": "animation", + "oneDesc": "是否开启系列动画" + }, + "innerRadius": { + "key": "innerRadius", + "oneDesc": "扇区内半径" + }, + "outerRadius": { + "key": "outerRadius", + "oneDesc": "扇区外半径" + }, + "startAngle": { + "key": "startAngle", + "oneDesc": "扇区起始角度" + }, + "endAngle": { + "key": "endAngle", + "oneDesc": "扇区结束角度" + }, + "cornerRadius": { + "key": "cornerRadius", + "oneDesc": "圆角半径" + }, + "radius": { + "key": "radius", + "oneDesc": "扇区半径" + }, + "stack": { + "key": "stack", + "oneDesc": "是否对数据进行堆叠处理" + }, + "animationEnter": { + "key": "animationEnter", + "oneDesc": "数据更新 - 新增数据动画" + }, + "animationUpdate": { + "key": "animationUpdate", + "oneDesc": "数据更新 - 数据更新动画" + }, + "animationExit": { + "key": "animationExit", + "oneDesc": "数据更新 - 数据删除动画" + }, + "dataIndex": { + "key": "dataIndex", + "oneDesc": "系列关联的数据索引" + }, + "valueField": { + "key": "valueField", + "oneDesc": "数值字段（可影响指针角度）" + }, + "animationState": { + "key": "animationState", + "oneDesc": "状态切换动画" + }, + "support3d": { + "key": "support3d", + "oneDesc": "是否支持3d视角" + }, + "regionIndex": { + "key": "regionIndex", + "oneDesc": "系列关联的region索引" + }, + "regionId": { + "key": "regionId", + "oneDesc": "系列关联的region id" + }, + "totalLabel": { + "key": "totalLabel", + "oneDesc": "堆叠汇总标签" + }, + "animationAppear": { + "key": "animationAppear", + "oneDesc": "图表入场动画\n支持配置图表内置不同动画效果" + }, + "animationDisappear": { + "key": "animationDisappear", + "oneDesc": "图表退场动画" + }, + "animationNormal": { + "key": "animationNormal", + "oneDesc": "循环动画" + }, + "categoryField": { + "key": "categoryField", + "oneDesc": "类别字段" + }, + "pin": { + "key": "pin", + "oneDesc": "图钉前景样式" + }, + "pinBackground": { + "key": "pinBackground", + "oneDesc": "图钉背景样式" + }, + "pointer": { + "key": "pointer", + "oneDesc": "指针样式" + }, + "sortDataByAxis": { + "key": "sortDataByAxis", + "oneDesc": "是否将数据按照数轴排序" + }, + "dataId": { + "key": "dataId", + "oneDesc": "系列关联的数据id" + }, + "dataKey": { + "key": "dataKey", + "oneDesc": "dataKey用于绑定数据与Mark的关系, 该配置在动画中非常重要." + }, + "seriesField": { + "key": "seriesField", + "oneDesc": "分组字段" + }, + "stackValue": { + "key": "stackValue", + "oneDesc": "堆叠时的分组值\nstackValue 相等的系列将在一起堆积。没有配置的系列将在一组" + }, + "stackOffsetSilhouette": { + "key": "stackOffsetSilhouette", + "oneDesc": "是否围绕中心轴偏移轮廓" + }, + "invalidType": { + "key": "invalidType", + "oneDesc": "null，undefined等非法数据点连接方式。" + }, + "extensionMark": { + "key": "extensionMark", + "oneDesc": "扩展mark" + }, + "interactions": { + "key": "interactions", + "oneDesc": "其他需要按需注册的类型交互" + }, + "centerX": { + "key": "centerX", + "oneDesc": "中心点 x 坐标" + }, + "centerY": { + "key": "centerY", + "oneDesc": "中心点 y 坐标" + }, + "radiusField": { + "key": "radiusField", + "oneDesc": "半径字段（可影响指针长度，GaugePointerSeries 没有 categoryField）" + }, + "angleField": { + "key": "angleField" + }, + "roundCap": { + "key": "roundCap", + "oneDesc": "圆角部分是否突出（可分别设置左侧和右侧）" + }, + "tickMask": { + "key": "tickMask", + "oneDesc": "tick 模式显示" + } +} \ No newline at end of file diff --git a/skills/vchart-development-skill/references/topkey/heatmap.json b/skills/vchart-development-skill/references/topkey/heatmap.json new file mode 100644 index 0000000000..542e0e8f4b --- /dev/null +++ b/skills/vchart-development-skill/references/topkey/heatmap.json @@ -0,0 +1,174 @@ +{ + "direction": { + "key": "direction", + "oneDesc": "图表的方向配置。\n- 'vertical' 垂直布局，即常见的直角坐标系布局，x 轴位于底部，y 轴位于左侧。\n- 'horizontal' 水平布局，可理解为 x 轴和 y 轴位置互换。" + }, + "markLine": { + "key": "markLine", + "oneDesc": "参考线配置" + }, + "markArea": { + "key": "markArea", + "oneDesc": "参考区域配置" + }, + "markPoint": { + "key": "markPoint", + "oneDesc": "参考点配置" + }, + "padding": { + "key": "padding", + "oneDesc": "布局 padding的配置" + }, + "percent": { + "key": "percent", + "oneDesc": "是否对数据进行百分比处理" + }, + "name": { + "key": "name", + "oneDesc": "系列名称" + }, + "id": { + "key": "id", + "oneDesc": "用户自定义的 series id" + }, + "animation": { + "key": "animation", + "oneDesc": "是否开启系列动画" + }, + "stack": { + "key": "stack", + "oneDesc": "是否对数据进行堆叠处理" + }, + "animationEnter": { + "key": "animationEnter", + "oneDesc": "数据更新 - 新增数据动画" + }, + "animationUpdate": { + "key": "animationUpdate", + "oneDesc": "数据更新 - 数据更新动画" + }, + "animationExit": { + "key": "animationExit", + "oneDesc": "数据更新 - 数据删除动画" + }, + "dataIndex": { + "key": "dataIndex", + "oneDesc": "系列关联的数据索引" + }, + "valueField": { + "key": "valueField", + "oneDesc": "值 field" + }, + "animationState": { + "key": "animationState", + "oneDesc": "状态切换动画" + }, + "large": { + "key": "large", + "oneDesc": "是否开启大数据渲染模式，开启后会降低渲染的精度" + }, + "largeThreshold": { + "key": "largeThreshold", + "oneDesc": "开启大数据渲染优化的阀值，对应的是data的长度;推荐 largeThreshold < progressiveThreshold" + }, + "progressiveStep": { + "key": "progressiveStep", + "oneDesc": "分片长度" + }, + "progressiveThreshold": { + "key": "progressiveThreshold", + "oneDesc": "开启分片渲染的阀值，对应的是单系列data的长度" + }, + "support3d": { + "key": "support3d", + "oneDesc": "是否支持3d视角" + }, + "regionIndex": { + "key": "regionIndex", + "oneDesc": "系列关联的region索引" + }, + "regionId": { + "key": "regionId", + "oneDesc": "系列关联的region id" + }, + "totalLabel": { + "key": "totalLabel", + "oneDesc": "堆叠汇总标签" + }, + "animationAppear": { + "key": "animationAppear", + "oneDesc": "图表入场动画\n支持配置图表内置不同动画效果" + }, + "animationDisappear": { + "key": "animationDisappear", + "oneDesc": "图表退场动画" + }, + "animationNormal": { + "key": "animationNormal", + "oneDesc": "循环动画" + }, + "xField": { + "key": "xField", + "oneDesc": "x轴字段" + }, + "yField": { + "key": "yField", + "oneDesc": "y轴字段\n运行双轴都为离散，连续。所以 yField 也可以像 xField 一样支持多维度" + }, + "label": { + "key": "label", + "oneDesc": "标签配置" + }, + "cell": { + "key": "cell", + "oneDesc": "单元格图元配置.同时可以配置选中，hover等交互状态下的图元和对应鼠标的样式" + }, + "cellBackground": { + "key": "cellBackground", + "oneDesc": "每个单元格对应的背景配置.同时可以配置选中，hover等交互状态下的图元和对应鼠标的样式" + }, + "x2Field": { + "key": "x2Field", + "oneDesc": "用于区间数据，声明区间末尾的数据字段。" + }, + "y2Field": { + "key": "y2Field", + "oneDesc": "用于区间数据，声明区间末尾的数据字段。" + }, + "zField": { + "key": "zField", + "oneDesc": "z轴字段\n用于3d散点图等" + }, + "sortDataByAxis": { + "key": "sortDataByAxis", + "oneDesc": "是否将数据按照数轴排序" + }, + "dataId": { + "key": "dataId", + "oneDesc": "系列关联的数据id" + }, + "dataKey": { + "key": "dataKey", + "oneDesc": "dataKey用于绑定数据与Mark的关系, 该配置在动画中非常重要." + }, + "seriesField": { + "key": "seriesField", + "oneDesc": "分组字段" + }, + "stackOffsetSilhouette": { + "key": "stackOffsetSilhouette", + "oneDesc": "是否围绕中心轴偏移轮廓" + }, + "invalidType": { + "key": "invalidType", + "oneDesc": "null，undefined等非法数据点连接方式。" + }, + "extensionMark": { + "key": "extensionMark", + "oneDesc": "扩展mark" + }, + "interactions": { + "key": "interactions", + "oneDesc": "其他需要按需注册的类型交互" + } +} \ No newline at end of file diff --git a/skills/vchart-development-skill/references/topkey/histogram.json b/skills/vchart-development-skill/references/topkey/histogram.json new file mode 100644 index 0000000000..382ab1368b --- /dev/null +++ b/skills/vchart-development-skill/references/topkey/histogram.json @@ -0,0 +1,206 @@ +{ + "direction": { + "key": "direction", + "oneDesc": "图表的方向配置。\n- 'vertical' 垂直布局，即常见的直角坐标系布局，x 轴位于底部，y 轴位于左侧。\n- 'horizontal' 水平布局，可理解为 x 轴和 y 轴位置互换。" + }, + "markLine": { + "key": "markLine", + "oneDesc": "参考线配置" + }, + "markArea": { + "key": "markArea", + "oneDesc": "参考区域配置" + }, + "markPoint": { + "key": "markPoint", + "oneDesc": "参考点配置" + }, + "padding": { + "key": "padding", + "oneDesc": "布局 padding的配置" + }, + "percent": { + "key": "percent", + "oneDesc": "是否对数据进行百分比处理" + }, + "name": { + "key": "name", + "oneDesc": "系列名称" + }, + "id": { + "key": "id", + "oneDesc": "用户自定义的 series id" + }, + "animation": { + "key": "animation", + "oneDesc": "是否开启系列动画" + }, + "stack": { + "key": "stack", + "oneDesc": "是否对数据进行堆叠处理" + }, + "animationEnter": { + "key": "animationEnter", + "oneDesc": "数据更新 - 新增数据动画" + }, + "animationUpdate": { + "key": "animationUpdate", + "oneDesc": "数据更新 - 数据更新动画" + }, + "animationExit": { + "key": "animationExit", + "oneDesc": "数据更新 - 数据删除动画" + }, + "dataIndex": { + "key": "dataIndex", + "oneDesc": "系列关联的数据索引" + }, + "sampling": { + "key": "sampling", + "oneDesc": "数据采样 - 采样方法" + }, + "animationState": { + "key": "animationState", + "oneDesc": "状态切换动画" + }, + "large": { + "key": "large", + "oneDesc": "是否开启大数据渲染模式，开启后会降低渲染的精度" + }, + "largeThreshold": { + "key": "largeThreshold", + "oneDesc": "开启大数据渲染优化的阀值，对应的是data的长度;推荐 largeThreshold < progressiveThreshold" + }, + "progressiveStep": { + "key": "progressiveStep", + "oneDesc": "分片长度" + }, + "progressiveThreshold": { + "key": "progressiveThreshold", + "oneDesc": "开启分片渲染的阀值，对应的是单系列data的长度" + }, + "support3d": { + "key": "support3d", + "oneDesc": "是否支持3d视角" + }, + "regionIndex": { + "key": "regionIndex", + "oneDesc": "系列关联的region索引" + }, + "regionId": { + "key": "regionId", + "oneDesc": "系列关联的region id" + }, + "totalLabel": { + "key": "totalLabel", + "oneDesc": "堆叠汇总标签" + }, + "animationAppear": { + "key": "animationAppear", + "oneDesc": "图表入场动画\n支持配置图表内置不同动画效果" + }, + "animationDisappear": { + "key": "animationDisappear", + "oneDesc": "图表退场动画" + }, + "animationNormal": { + "key": "animationNormal", + "oneDesc": "循环动画" + }, + "xField": { + "key": "xField", + "oneDesc": "x轴字段" + }, + "yField": { + "key": "yField", + "oneDesc": "y轴字段" + }, + "label": { + "key": "label", + "oneDesc": "标签配置" + }, + "bar": { + "key": "bar", + "oneDesc": "柱图图元样式配置.同时可以配置选中，hover等交互状态下的柱子和对应鼠标的样式" + }, + "barBackground": { + "key": "barBackground", + "oneDesc": "柱图中每根柱子背后的背景图元配置.同时可以配置选中，hover等交互状态下的背景图元和对应鼠标的样式" + }, + "barWidth": { + "key": "barWidth", + "oneDesc": "柱体宽度，可以设置绝对的像素值，也可以使用百分比（如 '10%'）\n1. number 类型，表示像素值\n2. string 类型，百分比用法，如 '10%'，该值为对应最后一个分组字段对应的 scale 的 bandWidth 占比(因为柱子是等宽的，所以采用最后一层分组的 scale)" + }, + "barMinWidth": { + "key": "barMinWidth", + "oneDesc": "柱体最小宽度，可以设置绝对的像素值，也可以使用百分比（如 '10%'）\n1. number 类型，表示像素值\n2. string 类型，百分比用法，如 '10%'，该值为对应最后一个分组字段对应的 scale 的 bandWidth 占比(因为柱子是等宽的，所以采用最后一层分组的 scale)" + }, + "barMaxWidth": { + "key": "barMaxWidth", + "oneDesc": "柱体最大宽度，可以设置绝对的像素值，也可以使用百分比（如 '10%'）\n1. number 类型，表示像素值\n2. string 类型，百分比用法，如 '10%'，该值为对应最后一个分组字段对应的 scale 的 bandWidth 占比(因为柱子是等宽的，所以采用最后一层分组的 scale)" + }, + "barGapInGroup": { + "key": "barGapInGroup", + "oneDesc": "分组柱图中各个分组内的柱子间距，可以设置绝对的像素值，也可以使用百分比（如 '10%'）。\n当存在多层分组时，可以使用数组来设置不同层级的间距，如 [10, '20%']，表示第一层分组的间距为 10px，第二层分组的间距为 '20%'。\n如果 barGapInGroup 的数组个数小于分组层数，则后面的分组间距使用最后一个值。\n1. number 类型，表示像素值\n2. string 类型，百分比用法，如 '10%'，该值为对应最后一个分组字段对应的 scale 的 bandWidth 占比(因为柱子是等宽的，所以采用最后一层分组的 scale)" + }, + "barMinHeight": { + "key": "barMinHeight", + "oneDesc": "柱条最小高度，可用于防止某数据项的值过小的视觉调整。" + }, + "stackCornerRadius": { + "key": "stackCornerRadius", + "oneDesc": "堆叠柱整体的圆角" + }, + "x2Field": { + "key": "x2Field", + "oneDesc": "用于区间数据，声明区间末尾的数据字段。" + }, + "y2Field": { + "key": "y2Field", + "oneDesc": "用于区间数据，声明区间末尾的数据字段。" + }, + "zField": { + "key": "zField", + "oneDesc": "z轴字段\n用于3d散点图等" + }, + "sortDataByAxis": { + "key": "sortDataByAxis", + "oneDesc": "是否将数据按照数轴排序" + }, + "dataId": { + "key": "dataId", + "oneDesc": "系列关联的数据id" + }, + "dataKey": { + "key": "dataKey", + "oneDesc": "dataKey用于绑定数据与Mark的关系, 该配置在动画中非常重要." + }, + "seriesField": { + "key": "seriesField", + "oneDesc": "分组字段" + }, + "stackOffsetSilhouette": { + "key": "stackOffsetSilhouette", + "oneDesc": "是否围绕中心轴偏移轮廓" + }, + "invalidType": { + "key": "invalidType", + "oneDesc": "null，undefined等非法数据点连接方式。" + }, + "extensionMark": { + "key": "extensionMark", + "oneDesc": "扩展mark" + }, + "interactions": { + "key": "interactions", + "oneDesc": "其他需要按需注册的类型交互" + }, + "activePoint": { + "key": "activePoint", + "oneDesc": "是否使用额外的 activePoint 显示交互点，可以在点隐藏时显示被交互的点" + }, + "samplingFactor": { + "key": "samplingFactor", + "oneDesc": "数据采样 - 采样系数" + } +} \ No newline at end of file diff --git a/skills/vchart-development-skill/references/topkey/histogram3d.json b/skills/vchart-development-skill/references/topkey/histogram3d.json new file mode 100644 index 0000000000..6121709149 --- /dev/null +++ b/skills/vchart-development-skill/references/topkey/histogram3d.json @@ -0,0 +1,206 @@ +{ + "direction": { + "key": "direction", + "oneDesc": "图表的方向配置。\n- 'vertical' 垂直布局，即常见的直角坐标系布局，x 轴位于底部，y 轴位于左侧。\n- 'horizontal' 水平布局，可理解为 x 轴和 y 轴位置互换。" + }, + "markLine": { + "key": "markLine", + "oneDesc": "参考线配置" + }, + "markArea": { + "key": "markArea", + "oneDesc": "参考区域配置" + }, + "markPoint": { + "key": "markPoint", + "oneDesc": "参考点配置" + }, + "padding": { + "key": "padding", + "oneDesc": "布局 padding的配置" + }, + "percent": { + "key": "percent", + "oneDesc": "是否对数据进行百分比处理" + }, + "name": { + "key": "name", + "oneDesc": "系列名称" + }, + "id": { + "key": "id", + "oneDesc": "用户自定义的 series id" + }, + "animation": { + "key": "animation", + "oneDesc": "是否开启系列动画" + }, + "stack": { + "key": "stack", + "oneDesc": "是否对数据进行堆叠处理" + }, + "animationEnter": { + "key": "animationEnter", + "oneDesc": "数据更新 - 新增数据动画" + }, + "animationUpdate": { + "key": "animationUpdate", + "oneDesc": "数据更新 - 数据更新动画" + }, + "animationExit": { + "key": "animationExit", + "oneDesc": "数据更新 - 数据删除动画" + }, + "dataIndex": { + "key": "dataIndex", + "oneDesc": "系列关联的数据索引" + }, + "sampling": { + "key": "sampling", + "oneDesc": "数据采样 - 采样方法" + }, + "animationState": { + "key": "animationState", + "oneDesc": "状态切换动画" + }, + "large": { + "key": "large", + "oneDesc": "是否开启大数据渲染模式，开启后会降低渲染的精度" + }, + "largeThreshold": { + "key": "largeThreshold", + "oneDesc": "开启大数据渲染优化的阀值，对应的是data的长度;推荐 largeThreshold < progressiveThreshold" + }, + "progressiveStep": { + "key": "progressiveStep", + "oneDesc": "分片长度" + }, + "progressiveThreshold": { + "key": "progressiveThreshold", + "oneDesc": "开启分片渲染的阀值，对应的是单系列data的长度" + }, + "support3d": { + "key": "support3d", + "oneDesc": "是否支持3d视角" + }, + "regionIndex": { + "key": "regionIndex", + "oneDesc": "系列关联的region索引" + }, + "regionId": { + "key": "regionId", + "oneDesc": "系列关联的region id" + }, + "totalLabel": { + "key": "totalLabel", + "oneDesc": "堆叠汇总标签" + }, + "animationAppear": { + "key": "animationAppear", + "oneDesc": "图表入场动画\n支持配置图表内置不同动画效果" + }, + "animationDisappear": { + "key": "animationDisappear", + "oneDesc": "图表退场动画" + }, + "animationNormal": { + "key": "animationNormal", + "oneDesc": "循环动画" + }, + "xField": { + "key": "xField", + "oneDesc": "x轴字段" + }, + "yField": { + "key": "yField", + "oneDesc": "y轴字段\ny轴字段\n运行双轴都为离散，连续。所以 yField 也可以像 xField 一样支持多维度" + }, + "label": { + "key": "label", + "oneDesc": "标签配置" + }, + "bar": { + "key": "bar", + "oneDesc": "柱图图元样式配置.同时可以配置选中，hover等交互状态下的柱子和对应鼠标的样式" + }, + "barBackground": { + "key": "barBackground", + "oneDesc": "柱图中每根柱子背后的背景图元配置.同时可以配置选中，hover等交互状态下的背景图元和对应鼠标的样式" + }, + "barWidth": { + "key": "barWidth", + "oneDesc": "柱体宽度，可以设置绝对的像素值，也可以使用百分比（如 '10%'）\n1. number 类型，表示像素值\n2. string 类型，百分比用法，如 '10%'，该值为对应最后一个分组字段对应的 scale 的 bandWidth 占比(因为柱子是等宽的，所以采用最后一层分组的 scale)" + }, + "barMinWidth": { + "key": "barMinWidth", + "oneDesc": "柱体最小宽度，可以设置绝对的像素值，也可以使用百分比（如 '10%'）\n1. number 类型，表示像素值\n2. string 类型，百分比用法，如 '10%'，该值为对应最后一个分组字段对应的 scale 的 bandWidth 占比(因为柱子是等宽的，所以采用最后一层分组的 scale)" + }, + "barMaxWidth": { + "key": "barMaxWidth", + "oneDesc": "柱体最大宽度，可以设置绝对的像素值，也可以使用百分比（如 '10%'）\n1. number 类型，表示像素值\n2. string 类型，百分比用法，如 '10%'，该值为对应最后一个分组字段对应的 scale 的 bandWidth 占比(因为柱子是等宽的，所以采用最后一层分组的 scale)" + }, + "barGapInGroup": { + "key": "barGapInGroup", + "oneDesc": "分组柱图中各个分组内的柱子间距，可以设置绝对的像素值，也可以使用百分比（如 '10%'）。\n当存在多层分组时，可以使用数组来设置不同层级的间距，如 [10, '20%']，表示第一层分组的间距为 10px，第二层分组的间距为 '20%'。\n如果 barGapInGroup 的数组个数小于分组层数，则后面的分组间距使用最后一个值。\n1. number 类型，表示像素值\n2. string 类型，百分比用法，如 '10%'，该值为对应最后一个分组字段对应的 scale 的 bandWidth 占比(因为柱子是等宽的，所以采用最后一层分组的 scale)" + }, + "barMinHeight": { + "key": "barMinHeight", + "oneDesc": "柱条最小高度，可用于防止某数据项的值过小的视觉调整。" + }, + "stackCornerRadius": { + "key": "stackCornerRadius", + "oneDesc": "堆叠柱整体的圆角" + }, + "x2Field": { + "key": "x2Field", + "oneDesc": "用于区间数据，声明区间末尾的数据字段。" + }, + "y2Field": { + "key": "y2Field", + "oneDesc": "用于区间数据，声明区间末尾的数据字段。" + }, + "zField": { + "key": "zField", + "oneDesc": "z轴字段\n用于3d散点图等" + }, + "sortDataByAxis": { + "key": "sortDataByAxis", + "oneDesc": "是否将数据按照数轴排序" + }, + "dataId": { + "key": "dataId", + "oneDesc": "系列关联的数据id" + }, + "dataKey": { + "key": "dataKey", + "oneDesc": "dataKey用于绑定数据与Mark的关系, 该配置在动画中非常重要." + }, + "seriesField": { + "key": "seriesField", + "oneDesc": "分组字段" + }, + "stackOffsetSilhouette": { + "key": "stackOffsetSilhouette", + "oneDesc": "是否围绕中心轴偏移轮廓" + }, + "invalidType": { + "key": "invalidType", + "oneDesc": "null，undefined等非法数据点连接方式。" + }, + "extensionMark": { + "key": "extensionMark", + "oneDesc": "扩展mark" + }, + "interactions": { + "key": "interactions", + "oneDesc": "其他需要按需注册的类型交互" + }, + "activePoint": { + "key": "activePoint", + "oneDesc": "是否使用额外的 activePoint 显示交互点，可以在点隐藏时显示被交互的点" + }, + "samplingFactor": { + "key": "samplingFactor", + "oneDesc": "数据采样 - 采样系数" + } +} \ No newline at end of file diff --git a/skills/vchart-development-skill/references/topkey/line.json b/skills/vchart-development-skill/references/topkey/line.json new file mode 100644 index 0000000000..b9a8106a28 --- /dev/null +++ b/skills/vchart-development-skill/references/topkey/line.json @@ -0,0 +1,202 @@ +{ + "direction": { + "key": "direction", + "oneDesc": "图表的方向配置。\n- 'vertical' 垂直布局，即常见的直角坐标系布局，x 轴位于底部，y 轴位于左侧。\n- 'horizontal' 水平布局，可理解为 x 轴和 y 轴位置互换。" + }, + "markLine": { + "key": "markLine", + "oneDesc": "参考线配置" + }, + "markArea": { + "key": "markArea", + "oneDesc": "参考区域配置" + }, + "markPoint": { + "key": "markPoint", + "oneDesc": "参考点配置" + }, + "padding": { + "key": "padding", + "oneDesc": "布局 padding的配置" + }, + "percent": { + "key": "percent", + "oneDesc": "开启后为百分比图表" + }, + "name": { + "key": "name", + "oneDesc": "系列名称" + }, + "id": { + "key": "id", + "oneDesc": "用户自定义的 series id" + }, + "animation": { + "key": "animation", + "oneDesc": "是否开启系列动画" + }, + "stack": { + "key": "stack", + "oneDesc": "是否对数据进行堆叠处理" + }, + "animationEnter": { + "key": "animationEnter", + "oneDesc": "数据更新 - 新增数据动画" + }, + "animationUpdate": { + "key": "animationUpdate", + "oneDesc": "数据更新 - 数据更新动画" + }, + "animationExit": { + "key": "animationExit", + "oneDesc": "数据更新 - 数据删除动画" + }, + "dataIndex": { + "key": "dataIndex", + "oneDesc": "系列关联的数据索引" + }, + "sampling": { + "key": "sampling", + "oneDesc": "数据采样 - 采样方法" + }, + "animationState": { + "key": "animationState", + "oneDesc": "状态切换动画" + }, + "large": { + "key": "large", + "oneDesc": "是否开启大数据渲染模式，开启后会降低渲染的精度" + }, + "largeThreshold": { + "key": "largeThreshold", + "oneDesc": "开启大数据渲染优化的阀值，对应的是data的长度;推荐 largeThreshold < progressiveThreshold" + }, + "progressiveStep": { + "key": "progressiveStep", + "oneDesc": "分片长度" + }, + "progressiveThreshold": { + "key": "progressiveThreshold", + "oneDesc": "开启分片渲染的阀值，对应的是单系列data的长度" + }, + "support3d": { + "key": "support3d", + "oneDesc": "是否支持3d视角" + }, + "regionIndex": { + "key": "regionIndex", + "oneDesc": "系列关联的region索引" + }, + "regionId": { + "key": "regionId", + "oneDesc": "系列关联的region id" + }, + "totalLabel": { + "key": "totalLabel", + "oneDesc": "堆叠汇总标签" + }, + "animationAppear": { + "key": "animationAppear", + "oneDesc": "图表入场动画\n支持配置图表内置不同动画效果" + }, + "animationDisappear": { + "key": "animationDisappear", + "oneDesc": "图表退场动画" + }, + "animationNormal": { + "key": "animationNormal", + "oneDesc": "循环动画" + }, + "xField": { + "key": "xField", + "oneDesc": "x轴字段" + }, + "yField": { + "key": "yField", + "oneDesc": "y轴字段" + }, + "label": { + "key": "label", + "oneDesc": "标签配置" + }, + "point": { + "key": "point", + "oneDesc": "点/标记点图元配置.同时可以配置选中，hover等交互状态下的点和鼠标的样式" + }, + "line": { + "key": "line", + "oneDesc": "线图元配置.同时可以配置选中，hover等交互状态下的线条和鼠标的样式" + }, + "lineLabel": { + "key": "lineLabel", + "oneDesc": "每条线对应一个标签，一般放在折线的最尾端，值为当前折线对应的图例名称" + }, + "x2Field": { + "key": "x2Field", + "oneDesc": "用于区间数据，声明区间末尾的数据字段。" + }, + "y2Field": { + "key": "y2Field", + "oneDesc": "用于区间数据，声明区间末尾的数据字段。" + }, + "zField": { + "key": "zField", + "oneDesc": "z轴字段\n用于3d散点图等" + }, + "sortDataByAxis": { + "key": "sortDataByAxis", + "oneDesc": "是否将数据按照数轴排序" + }, + "dataId": { + "key": "dataId", + "oneDesc": "系列关联的数据id" + }, + "dataKey": { + "key": "dataKey", + "oneDesc": "dataKey用于绑定数据与Mark的关系, 该配置在动画中非常重要." + }, + "seriesField": { + "key": "seriesField", + "oneDesc": "分组字段" + }, + "stackOffsetSilhouette": { + "key": "stackOffsetSilhouette", + "oneDesc": "是否围绕中心轴偏移轮廓" + }, + "invalidType": { + "key": "invalidType", + "oneDesc": "null，undefined等非法数据点连接方式。" + }, + "extensionMark": { + "key": "extensionMark", + "oneDesc": "扩展mark" + }, + "interactions": { + "key": "interactions", + "oneDesc": "其他需要按需注册的类型交互" + }, + "activePoint": { + "key": "activePoint", + "oneDesc": "是否使用额外的 activePoint 显示交互点，可以在点隐藏时显示被交互的点" + }, + "samplingFactor": { + "key": "samplingFactor", + "oneDesc": "数据采样 - 采样系数" + }, + "seriesMark": { + "key": "seriesMark", + "oneDesc": "系列主 mark 类型配置，该配置会影响图例的展示" + }, + "pointDis": { + "key": "pointDis", + "oneDesc": "标记点之间的距离，px" + }, + "pointDisMul": { + "key": "pointDisMul", + "oneDesc": "标记点之间的距离， pointSize 的倍数" + }, + "markOverlap": { + "key": "markOverlap", + "oneDesc": "是否允许标记图形相互覆盖" + } +} \ No newline at end of file diff --git a/skills/vchart-development-skill/references/topkey/linearProgress.json b/skills/vchart-development-skill/references/topkey/linearProgress.json new file mode 100644 index 0000000000..518b9d7f0e --- /dev/null +++ b/skills/vchart-development-skill/references/topkey/linearProgress.json @@ -0,0 +1,130 @@ +{ + "seriesField": { + "key": "seriesField", + "oneDesc": "分组字段" + }, + "cornerRadius": { + "key": "cornerRadius", + "oneDesc": "进度条圆角半径" + }, + "padding": { + "key": "padding", + "oneDesc": "布局 padding的配置" + }, + "percent": { + "key": "percent", + "oneDesc": "是否对数据进行百分比处理" + }, + "name": { + "key": "name", + "oneDesc": "系列名称" + }, + "id": { + "key": "id", + "oneDesc": "用户自定义的 series id" + }, + "animation": { + "key": "animation", + "oneDesc": "是否开启系列动画" + }, + "direction": { + "key": "direction", + "oneDesc": "方向" + }, + "stack": { + "key": "stack", + "oneDesc": "是否对数据进行堆叠处理" + }, + "animationEnter": { + "key": "animationEnter", + "oneDesc": "数据更新 - 新增数据动画" + }, + "animationUpdate": { + "key": "animationUpdate", + "oneDesc": "数据更新 - 数据更新动画" + }, + "animationExit": { + "key": "animationExit", + "oneDesc": "数据更新 - 数据删除动画" + }, + "dataIndex": { + "key": "dataIndex", + "oneDesc": "系列关联的数据索引" + }, + "bandWidth": { + "key": "bandWidth", + "oneDesc": "进度条宽度\n以像素值(px)为单位" + }, + "animationState": { + "key": "animationState", + "oneDesc": "状态切换动画" + }, + "support3d": { + "key": "support3d", + "oneDesc": "是否支持3d视角" + }, + "regionIndex": { + "key": "regionIndex", + "oneDesc": "系列关联的region索引" + }, + "regionId": { + "key": "regionId", + "oneDesc": "系列关联的region id" + }, + "totalLabel": { + "key": "totalLabel", + "oneDesc": "堆叠汇总标签" + }, + "animationAppear": { + "key": "animationAppear", + "oneDesc": "图表入场动画\n支持配置图表内置不同动画效果" + }, + "animationDisappear": { + "key": "animationDisappear", + "oneDesc": "图表退场动画" + }, + "animationNormal": { + "key": "animationNormal", + "oneDesc": "循环动画" + }, + "xField": { + "key": "xField", + "oneDesc": "coordinate: 'cartesian'\nx轴字段" + }, + "yField": { + "key": "yField", + "oneDesc": "y轴字段\n因为存在 direction，运行双轴都为离散，连续。所以 yField 也可以像 xField 一样支持多维度" + }, + "track": { + "key": "track", + "oneDesc": "背景条样式" + }, + "progress": { + "key": "progress", + "oneDesc": "进度条样式\nTODO: 支持百分比作为padding, 类型为string" + }, + "dataId": { + "key": "dataId", + "oneDesc": "系列关联的数据id" + }, + "dataKey": { + "key": "dataKey", + "oneDesc": "dataKey用于绑定数据与Mark的关系, 该配置在动画中非常重要." + }, + "stackOffsetSilhouette": { + "key": "stackOffsetSilhouette", + "oneDesc": "是否围绕中心轴偏移轮廓" + }, + "invalidType": { + "key": "invalidType", + "oneDesc": "null，undefined等非法数据点连接方式。" + }, + "extensionMark": { + "key": "extensionMark", + "oneDesc": "扩展mark" + }, + "interactions": { + "key": "interactions", + "oneDesc": "其他需要按需注册的类型交互" + } +} \ No newline at end of file diff --git a/skills/vchart-development-skill/references/topkey/liquid.json b/skills/vchart-development-skill/references/topkey/liquid.json new file mode 100644 index 0000000000..0e58ecff6c --- /dev/null +++ b/skills/vchart-development-skill/references/topkey/liquid.json @@ -0,0 +1,86 @@ +{ + "direction": { + "key": "direction", + "oneDesc": "图表的方向配置。\n- 'vertical' 垂直布局，即常见的直角坐标系布局，x 轴位于底部，y 轴位于左侧。\n- 'horizontal' 水平布局，可理解为 x 轴和 y 轴位置互换。" + }, + "markLine": { + "key": "markLine", + "oneDesc": "参考线配置" + }, + "markArea": { + "key": "markArea", + "oneDesc": "参考区域配置" + }, + "markPoint": { + "key": "markPoint", + "oneDesc": "参考点配置" + }, + "padding": { + "key": "padding", + "oneDesc": "布局 padding的配置" + }, + "reverse": { + "key": "reverse", + "oneDesc": "是否反向绘制" + }, + "animationEnter": { + "key": "animationEnter", + "oneDesc": "数据更新 - 新增数据动画" + }, + "animationUpdate": { + "key": "animationUpdate", + "oneDesc": "数据更新 - 数据更新动画" + }, + "animationExit": { + "key": "animationExit", + "oneDesc": "数据更新 - 数据删除动画" + }, + "valueField": { + "key": "valueField", + "oneDesc": "value字段" + }, + "animationState": { + "key": "animationState", + "oneDesc": "状态切换动画" + }, + "animationAppear": { + "key": "animationAppear", + "oneDesc": "图表入场动画\n支持配置图表内置不同动画效果" + }, + "animationDisappear": { + "key": "animationDisappear", + "oneDesc": "图表退场动画" + }, + "animationNormal": { + "key": "animationNormal", + "oneDesc": "循环动画" + }, + "liquid": { + "key": "liquid", + "oneDesc": "水波图元配置.同时可以配置选中，hover等交互状态下的图元和鼠标的样式" + }, + "liquidBackground": { + "key": "liquidBackground", + "oneDesc": "水波背景图元配置.同时可以配置选中，hover等交互状态下的图元和鼠标的样式" + }, + "liquidOutline": { + "key": "liquidOutline", + "oneDesc": "水波外轮廓配置" + }, + "maskShape": { + "key": "maskShape", + "oneDesc": "轮廓形状" + }, + "outlineMargin": { + "key": "outlineMargin", + "oneDesc": "布局 padding的配置" + }, + "outlinePadding": { + "key": "outlinePadding", + "oneDesc": "布局 padding的配置" + }, + "indicatorSmartInvert": { + "key": "indicatorSmartInvert", + "oneDesc": "是否开启指标智能反色" + } +} \ No newline at end of file diff --git a/skills/vchart-development-skill/references/topkey/map.json b/skills/vchart-development-skill/references/topkey/map.json new file mode 100644 index 0000000000..ddb606d002 --- /dev/null +++ b/skills/vchart-development-skill/references/topkey/map.json @@ -0,0 +1,142 @@ +{ + "padding": { + "key": "padding", + "oneDesc": "布局 padding的配置" + }, + "map": { + "key": "map", + "oneDesc": "地图数据源" + }, + "percent": { + "key": "percent", + "oneDesc": "是否对数据进行百分比处理" + }, + "name": { + "key": "name", + "oneDesc": "系列名称" + }, + "id": { + "key": "id", + "oneDesc": "用户自定义的 series id" + }, + "animation": { + "key": "animation", + "oneDesc": "是否开启系列动画" + }, + "area": { + "key": "area", + "oneDesc": "地图上对应的每个区域图元配置.同时可以配置选中，hover等交互状态下的图元和鼠标的样式" + }, + "label": { + "key": "label", + "oneDesc": "标签配置" + }, + "stack": { + "key": "stack", + "oneDesc": "是否对数据进行堆叠处理" + }, + "animationEnter": { + "key": "animationEnter", + "oneDesc": "数据更新 - 新增数据动画" + }, + "animationUpdate": { + "key": "animationUpdate", + "oneDesc": "数据更新 - 数据更新动画" + }, + "animationExit": { + "key": "animationExit", + "oneDesc": "数据更新 - 数据删除动画" + }, + "dataIndex": { + "key": "dataIndex", + "oneDesc": "系列关联的数据索引" + }, + "valueField": { + "key": "valueField", + "oneDesc": "值维度" + }, + "animationState": { + "key": "animationState", + "oneDesc": "状态切换动画" + }, + "support3d": { + "key": "support3d", + "oneDesc": "是否支持3d视角" + }, + "regionIndex": { + "key": "regionIndex", + "oneDesc": "系列关联的region索引" + }, + "regionId": { + "key": "regionId", + "oneDesc": "系列关联的region id" + }, + "totalLabel": { + "key": "totalLabel", + "oneDesc": "堆叠汇总标签" + }, + "animationAppear": { + "key": "animationAppear", + "oneDesc": "图表入场动画\n支持配置图表内置不同动画效果" + }, + "animationDisappear": { + "key": "animationDisappear", + "oneDesc": "图表退场动画" + }, + "animationNormal": { + "key": "animationNormal", + "oneDesc": "循环动画" + }, + "dataId": { + "key": "dataId", + "oneDesc": "系列关联的数据id" + }, + "dataKey": { + "key": "dataKey", + "oneDesc": "dataKey用于绑定数据与Mark的关系, 该配置在动画中非常重要." + }, + "seriesField": { + "key": "seriesField", + "oneDesc": "分组字段" + }, + "stackOffsetSilhouette": { + "key": "stackOffsetSilhouette", + "oneDesc": "是否围绕中心轴偏移轮廓" + }, + "invalidType": { + "key": "invalidType", + "oneDesc": "null，undefined等非法数据点连接方式。" + }, + "extensionMark": { + "key": "extensionMark", + "oneDesc": "扩展mark" + }, + "interactions": { + "key": "interactions", + "oneDesc": "其他需要按需注册的类型交互" + }, + "nameField": { + "key": "nameField", + "oneDesc": "名称维度" + }, + "nameProperty": { + "key": "nameProperty", + "oneDesc": "名称映射字段" + }, + "centroidProperty": { + "key": "centroidProperty", + "oneDesc": "中心坐标映射字段" + }, + "nameMap": { + "key": "nameMap", + "oneDesc": "名称映射表" + }, + "defaultFillColor": { + "key": "defaultFillColor", + "oneDesc": "默认填充颜色" + }, + "showDefaultName": { + "key": "showDefaultName", + "oneDesc": "是否显示数据中没有的地区名称" + } +} \ No newline at end of file diff --git a/skills/vchart-development-skill/references/topkey/mosaic.json b/skills/vchart-development-skill/references/topkey/mosaic.json new file mode 100644 index 0000000000..1b1fd365f5 --- /dev/null +++ b/skills/vchart-development-skill/references/topkey/mosaic.json @@ -0,0 +1,205 @@ +{ + "direction": { + "key": "direction", + "oneDesc": "图表的方向配置。\n- 'vertical' 垂直布局，即常见的直角坐标系布局，x 轴位于底部，y 轴位于左侧。\n- 'horizontal' 水平布局，可理解为 x 轴和 y 轴位置互换。" + }, + "markLine": { + "key": "markLine", + "oneDesc": "参考线配置" + }, + "markArea": { + "key": "markArea", + "oneDesc": "参考区域配置" + }, + "markPoint": { + "key": "markPoint", + "oneDesc": "参考点配置" + }, + "padding": { + "key": "padding", + "oneDesc": "布局 padding的配置" + }, + "percent": { + "key": "percent", + "oneDesc": "是否对数据进行百分比处理" + }, + "name": { + "key": "name", + "oneDesc": "系列名称" + }, + "id": { + "key": "id", + "oneDesc": "用户自定义的 series id" + }, + "animation": { + "key": "animation", + "oneDesc": "是否开启系列动画" + }, + "stack": { + "key": "stack", + "oneDesc": "是否对数据进行堆叠处理" + }, + "animationEnter": { + "key": "animationEnter", + "oneDesc": "数据更新 - 新增数据动画" + }, + "animationUpdate": { + "key": "animationUpdate", + "oneDesc": "数据更新 - 数据更新动画" + }, + "animationExit": { + "key": "animationExit", + "oneDesc": "数据更新 - 数据删除动画" + }, + "dataIndex": { + "key": "dataIndex", + "oneDesc": "系列关联的数据索引" + }, + "sampling": { + "key": "sampling", + "oneDesc": "数据采样 - 采样方法" + }, + "animationState": { + "key": "animationState", + "oneDesc": "状态切换动画" + }, + "large": { + "key": "large", + "oneDesc": "是否开启大数据渲染模式，开启后会降低渲染的精度" + }, + "largeThreshold": { + "key": "largeThreshold", + "oneDesc": "开启大数据渲染优化的阀值，对应的是data的长度;推荐 largeThreshold < progressiveThreshold" + }, + "progressiveStep": { + "key": "progressiveStep", + "oneDesc": "分片长度" + }, + "progressiveThreshold": { + "key": "progressiveThreshold", + "oneDesc": "开启分片渲染的阀值，对应的是单系列data的长度" + }, + "support3d": { + "key": "support3d", + "oneDesc": "是否支持3d视角" + }, + "regionIndex": { + "key": "regionIndex", + "oneDesc": "系列关联的region索引" + }, + "regionId": { + "key": "regionId", + "oneDesc": "系列关联的region id" + }, + "totalLabel": { + "key": "totalLabel", + "oneDesc": "堆叠汇总标签" + }, + "animationAppear": { + "key": "animationAppear", + "oneDesc": "图表入场动画\n支持配置图表内置不同动画效果" + }, + "animationDisappear": { + "key": "animationDisappear", + "oneDesc": "图表退场动画" + }, + "animationNormal": { + "key": "animationNormal", + "oneDesc": "循环动画" + }, + "xField": { + "key": "xField", + "oneDesc": "x轴字段" + }, + "yField": { + "key": "yField", + "oneDesc": "y轴字段" + }, + "label": { + "key": "label" + }, + "bar": { + "key": "bar", + "oneDesc": "柱图图元样式配置.同时可以配置选中，hover等交互状态下的柱子和对应鼠标的样式" + }, + "barBackground": { + "key": "barBackground", + "oneDesc": "柱图中每根柱子背后的背景图元配置.同时可以配置选中，hover等交互状态下的背景图元和对应鼠标的样式" + }, + "barWidth": { + "key": "barWidth", + "oneDesc": "柱体宽度，可以设置绝对的像素值，也可以使用百分比（如 '10%'）\n1. number 类型，表示像素值\n2. string 类型，百分比用法，如 '10%'，该值为对应最后一个分组字段对应的 scale 的 bandWidth 占比(因为柱子是等宽的，所以采用最后一层分组的 scale)" + }, + "barMinWidth": { + "key": "barMinWidth", + "oneDesc": "柱体最小宽度，可以设置绝对的像素值，也可以使用百分比（如 '10%'）\n1. number 类型，表示像素值\n2. string 类型，百分比用法，如 '10%'，该值为对应最后一个分组字段对应的 scale 的 bandWidth 占比(因为柱子是等宽的，所以采用最后一层分组的 scale)" + }, + "barMaxWidth": { + "key": "barMaxWidth", + "oneDesc": "柱体最大宽度，可以设置绝对的像素值，也可以使用百分比（如 '10%'）\n1. number 类型，表示像素值\n2. string 类型，百分比用法，如 '10%'，该值为对应最后一个分组字段对应的 scale 的 bandWidth 占比(因为柱子是等宽的，所以采用最后一层分组的 scale)" + }, + "barGapInGroup": { + "key": "barGapInGroup", + "oneDesc": "分组柱图中各个分组内的柱子间距，可以设置绝对的像素值，也可以使用百分比（如 '10%'）。\n当存在多层分组时，可以使用数组来设置不同层级的间距，如 [10, '20%']，表示第一层分组的间距为 10px，第二层分组的间距为 '20%'。\n如果 barGapInGroup 的数组个数小于分组层数，则后面的分组间距使用最后一个值。\n1. number 类型，表示像素值\n2. string 类型，百分比用法，如 '10%'，该值为对应最后一个分组字段对应的 scale 的 bandWidth 占比(因为柱子是等宽的，所以采用最后一层分组的 scale)" + }, + "barMinHeight": { + "key": "barMinHeight", + "oneDesc": "柱条最小高度，可用于防止某数据项的值过小的视觉调整。" + }, + "stackCornerRadius": { + "key": "stackCornerRadius", + "oneDesc": "堆叠柱整体的圆角" + }, + "x2Field": { + "key": "x2Field", + "oneDesc": "用于区间数据，声明区间末尾的数据字段。" + }, + "y2Field": { + "key": "y2Field", + "oneDesc": "用于区间数据，声明区间末尾的数据字段。" + }, + "zField": { + "key": "zField", + "oneDesc": "z轴字段\n用于3d散点图等" + }, + "sortDataByAxis": { + "key": "sortDataByAxis", + "oneDesc": "是否将数据按照数轴排序" + }, + "dataId": { + "key": "dataId", + "oneDesc": "系列关联的数据id" + }, + "dataKey": { + "key": "dataKey", + "oneDesc": "dataKey用于绑定数据与Mark的关系, 该配置在动画中非常重要." + }, + "seriesField": { + "key": "seriesField", + "oneDesc": "分组字段" + }, + "stackOffsetSilhouette": { + "key": "stackOffsetSilhouette", + "oneDesc": "是否围绕中心轴偏移轮廓" + }, + "invalidType": { + "key": "invalidType", + "oneDesc": "null，undefined等非法数据点连接方式。" + }, + "extensionMark": { + "key": "extensionMark", + "oneDesc": "扩展mark" + }, + "interactions": { + "key": "interactions", + "oneDesc": "其他需要按需注册的类型交互" + }, + "activePoint": { + "key": "activePoint", + "oneDesc": "是否使用额外的 activePoint 显示交互点，可以在点隐藏时显示被交互的点" + }, + "samplingFactor": { + "key": "samplingFactor", + "oneDesc": "数据采样 - 采样系数" + } +} \ No newline at end of file diff --git a/skills/vchart-development-skill/references/topkey/pie.json b/skills/vchart-development-skill/references/topkey/pie.json new file mode 100644 index 0000000000..341fded7a2 --- /dev/null +++ b/skills/vchart-development-skill/references/topkey/pie.json @@ -0,0 +1,191 @@ +{ + "indicator": { + "key": "indicator", + "oneDesc": "饼图指标卡" + }, + "padding": { + "key": "padding", + "oneDesc": "布局 padding的配置" + }, + "percent": { + "key": "percent", + "oneDesc": "是否对数据进行百分比处理" + }, + "name": { + "key": "name", + "oneDesc": "系列名称" + }, + "id": { + "key": "id", + "oneDesc": "用户自定义的 series id" + }, + "animation": { + "key": "animation", + "oneDesc": "是否开启系列动画" + }, + "innerRadius": { + "key": "innerRadius", + "oneDesc": "饼图扇区内半径" + }, + "outerRadius": { + "key": "outerRadius", + "oneDesc": "饼图扇区外半径" + }, + "startAngle": { + "key": "startAngle", + "oneDesc": "饼图的起始角度（0 ~ 360）" + }, + "endAngle": { + "key": "endAngle", + "oneDesc": "饼图的结束角度（0 ~ 360）" + }, + "cornerRadius": { + "key": "cornerRadius", + "oneDesc": "饼图扇区圆角半径" + }, + "padAngle": { + "key": "padAngle", + "oneDesc": "扇区之间的间隔角度" + }, + "radius": { + "key": "radius", + "oneDesc": "饼图扇区半径" + }, + "stack": { + "key": "stack", + "oneDesc": "是否对数据进行堆叠处理" + }, + "animationEnter": { + "key": "animationEnter", + "oneDesc": "数据更新 - 新增数据动画" + }, + "animationUpdate": { + "key": "animationUpdate", + "oneDesc": "数据更新 - 数据更新动画" + }, + "animationExit": { + "key": "animationExit", + "oneDesc": "数据更新 - 数据删除动画" + }, + "dataIndex": { + "key": "dataIndex", + "oneDesc": "系列关联的数据索引" + }, + "valueField": { + "key": "valueField", + "oneDesc": "数值字段" + }, + "animationState": { + "key": "animationState", + "oneDesc": "状态切换动画" + }, + "support3d": { + "key": "support3d", + "oneDesc": "是否支持3d视角" + }, + "regionIndex": { + "key": "regionIndex", + "oneDesc": "系列关联的region索引" + }, + "regionId": { + "key": "regionId", + "oneDesc": "系列关联的region id" + }, + "centerOffset": { + "key": "centerOffset", + "oneDesc": "饼图扇区中心偏移" + }, + "totalLabel": { + "key": "totalLabel", + "oneDesc": "堆叠汇总标签" + }, + "animationAppear": { + "key": "animationAppear", + "oneDesc": "图表入场动画\n支持配置图表内置不同动画效果" + }, + "animationDisappear": { + "key": "animationDisappear", + "oneDesc": "图表退场动画" + }, + "animationNormal": { + "key": "animationNormal", + "oneDesc": "循环动画" + }, + "categoryField": { + "key": "categoryField", + "oneDesc": "饼图每个扇区为独立的系列" + }, + "label": { + "key": "label", + "oneDesc": "标签配置" + }, + "pie": { + "key": "pie", + "oneDesc": "扇区样式" + }, + "sortDataByAxis": { + "key": "sortDataByAxis", + "oneDesc": "是否将数据按照数轴排序" + }, + "dataId": { + "key": "dataId", + "oneDesc": "系列关联的数据id" + }, + "dataKey": { + "key": "dataKey", + "oneDesc": "dataKey用于绑定数据与Mark的关系, 该配置在动画中非常重要." + }, + "seriesField": { + "key": "seriesField", + "oneDesc": "分组字段" + }, + "stackOffsetSilhouette": { + "key": "stackOffsetSilhouette", + "oneDesc": "是否围绕中心轴偏移轮廓" + }, + "invalidType": { + "key": "invalidType", + "oneDesc": "null，undefined等非法数据点连接方式。" + }, + "extensionMark": { + "key": "extensionMark", + "oneDesc": "扩展mark" + }, + "interactions": { + "key": "interactions", + "oneDesc": "其他需要按需注册的类型交互" + }, + "centerX": { + "key": "centerX", + "oneDesc": "饼图中心点 x 坐标" + }, + "centerY": { + "key": "centerY", + "oneDesc": "饼图中心点 y 坐标" + }, + "minAngle": { + "key": "minAngle", + "oneDesc": "最小的扇区角度（0 ~ 360），用于防止某个值过小导致扇区太小影响交互。" + }, + "layoutRadius": { + "key": "layoutRadius" + }, + "emptyPlaceholder": { + "key": "emptyPlaceholder", + "oneDesc": "数据为空时显示的占位图形" + }, + "showAllZero": { + "key": "showAllZero", + "oneDesc": "是否在数据均为0时显示均分扇区。" + }, + "supportNegative": { + "key": "supportNegative", + "oneDesc": "是否将负数按照绝对值进行处理。" + }, + "radiusField": { + "key": "radiusField" + }, + "angleField": { + "key": "angleField" + } +} \ No newline at end of file diff --git a/skills/vchart-development-skill/references/topkey/pie3d.json b/skills/vchart-development-skill/references/topkey/pie3d.json new file mode 100644 index 0000000000..96889524b0 --- /dev/null +++ b/skills/vchart-development-skill/references/topkey/pie3d.json @@ -0,0 +1,194 @@ +{ + "indicator": { + "key": "indicator", + "oneDesc": "饼图指标卡" + }, + "padding": { + "key": "padding", + "oneDesc": "布局 padding的配置" + }, + "percent": { + "key": "percent", + "oneDesc": "是否对数据进行百分比处理" + }, + "name": { + "key": "name", + "oneDesc": "系列名称" + }, + "id": { + "key": "id", + "oneDesc": "用户自定义的 series id" + }, + "animation": { + "key": "animation", + "oneDesc": "是否开启系列动画" + }, + "innerRadius": { + "key": "innerRadius", + "oneDesc": "饼图扇区内半径" + }, + "outerRadius": { + "key": "outerRadius", + "oneDesc": "饼图扇区外半径" + }, + "startAngle": { + "key": "startAngle", + "oneDesc": "饼图的起始角度（0 ~ 360）" + }, + "endAngle": { + "key": "endAngle", + "oneDesc": "饼图的结束角度（0 ~ 360）" + }, + "cornerRadius": { + "key": "cornerRadius", + "oneDesc": "饼图扇区圆角半径" + }, + "padAngle": { + "key": "padAngle", + "oneDesc": "扇区之间的间隔角度" + }, + "radius": { + "key": "radius", + "oneDesc": "饼图扇区半径" + }, + "stack": { + "key": "stack", + "oneDesc": "是否对数据进行堆叠处理" + }, + "animationEnter": { + "key": "animationEnter", + "oneDesc": "数据更新 - 新增数据动画" + }, + "animationUpdate": { + "key": "animationUpdate", + "oneDesc": "数据更新 - 数据更新动画" + }, + "animationExit": { + "key": "animationExit", + "oneDesc": "数据更新 - 数据删除动画" + }, + "dataIndex": { + "key": "dataIndex", + "oneDesc": "系列关联的数据索引" + }, + "valueField": { + "key": "valueField", + "oneDesc": "数值字段" + }, + "animationState": { + "key": "animationState", + "oneDesc": "状态切换动画" + }, + "support3d": { + "key": "support3d", + "oneDesc": "是否支持3d视角" + }, + "regionIndex": { + "key": "regionIndex", + "oneDesc": "系列关联的region索引" + }, + "regionId": { + "key": "regionId", + "oneDesc": "系列关联的region id" + }, + "centerOffset": { + "key": "centerOffset", + "oneDesc": "饼图扇区中心偏移" + }, + "totalLabel": { + "key": "totalLabel", + "oneDesc": "堆叠汇总标签" + }, + "animationAppear": { + "key": "animationAppear", + "oneDesc": "图表入场动画\n支持配置图表内置不同动画效果" + }, + "animationDisappear": { + "key": "animationDisappear", + "oneDesc": "图表退场动画" + }, + "animationNormal": { + "key": "animationNormal", + "oneDesc": "循环动画" + }, + "categoryField": { + "key": "categoryField", + "oneDesc": "饼图每个扇区为独立的系列" + }, + "label": { + "key": "label", + "oneDesc": "标签配置" + }, + "pie": { + "key": "pie", + "oneDesc": "扇区样式" + }, + "sortDataByAxis": { + "key": "sortDataByAxis", + "oneDesc": "是否将数据按照数轴排序" + }, + "dataId": { + "key": "dataId", + "oneDesc": "系列关联的数据id" + }, + "dataKey": { + "key": "dataKey", + "oneDesc": "dataKey用于绑定数据与Mark的关系, 该配置在动画中非常重要." + }, + "seriesField": { + "key": "seriesField", + "oneDesc": "分组字段" + }, + "stackOffsetSilhouette": { + "key": "stackOffsetSilhouette", + "oneDesc": "是否围绕中心轴偏移轮廓" + }, + "invalidType": { + "key": "invalidType", + "oneDesc": "null，undefined等非法数据点连接方式。" + }, + "extensionMark": { + "key": "extensionMark", + "oneDesc": "扩展mark" + }, + "interactions": { + "key": "interactions", + "oneDesc": "其他需要按需注册的类型交互" + }, + "centerX": { + "key": "centerX", + "oneDesc": "饼图中心点 x 坐标" + }, + "centerY": { + "key": "centerY", + "oneDesc": "饼图中心点 y 坐标" + }, + "minAngle": { + "key": "minAngle", + "oneDesc": "最小的扇区角度（0 ~ 360），用于防止某个值过小导致扇区太小影响交互。" + }, + "layoutRadius": { + "key": "layoutRadius" + }, + "emptyPlaceholder": { + "key": "emptyPlaceholder", + "oneDesc": "数据为空时显示的占位图形" + }, + "showAllZero": { + "key": "showAllZero", + "oneDesc": "是否在数据均为0时显示均分扇区。" + }, + "supportNegative": { + "key": "supportNegative", + "oneDesc": "是否将负数按照绝对值进行处理。" + }, + "radiusField": { + "key": "radiusField" + }, + "angleField": { + "key": "angleField" + }, + "angle3d": { + "key": "angle3d" + } +} \ No newline at end of file diff --git a/skills/vchart-development-skill/references/topkey/radar.json b/skills/vchart-development-skill/references/topkey/radar.json new file mode 100644 index 0000000000..4d6b2fe818 --- /dev/null +++ b/skills/vchart-development-skill/references/topkey/radar.json @@ -0,0 +1,207 @@ +{ + "layoutRadius": { + "key": "layoutRadius" + }, + "indicator": { + "key": "indicator", + "oneDesc": "指标卡配置" + }, + "padding": { + "key": "padding", + "oneDesc": "布局 padding的配置" + }, + "percent": { + "key": "percent", + "oneDesc": "是否对数据进行百分比处理" + }, + "name": { + "key": "name", + "oneDesc": "系列名称" + }, + "id": { + "key": "id", + "oneDesc": "用户自定义的 series id" + }, + "animation": { + "key": "animation", + "oneDesc": "是否开启系列动画" + }, + "innerRadius": { + "key": "innerRadius", + "oneDesc": "扇区内半径" + }, + "outerRadius": { + "key": "outerRadius", + "oneDesc": "扇区外半径" + }, + "startAngle": { + "key": "startAngle", + "oneDesc": "扇区起始角度" + }, + "endAngle": { + "key": "endAngle", + "oneDesc": "扇区结束角度" + }, + "radius": { + "key": "radius", + "oneDesc": "扇区半径" + }, + "stack": { + "key": "stack", + "oneDesc": "是否对数据进行堆叠处理" + }, + "animationEnter": { + "key": "animationEnter", + "oneDesc": "数据更新 - 新增数据动画" + }, + "animationUpdate": { + "key": "animationUpdate", + "oneDesc": "数据更新 - 数据更新动画" + }, + "animationExit": { + "key": "animationExit", + "oneDesc": "数据更新 - 数据删除动画" + }, + "dataIndex": { + "key": "dataIndex", + "oneDesc": "系列关联的数据索引" + }, + "valueField": { + "key": "valueField", + "oneDesc": "数值字段" + }, + "animationState": { + "key": "animationState", + "oneDesc": "状态切换动画" + }, + "large": { + "key": "large", + "oneDesc": "是否开启大数据渲染模式，开启后会降低渲染的精度" + }, + "largeThreshold": { + "key": "largeThreshold", + "oneDesc": "开启大数据渲染优化的阀值，对应的是data的长度;推荐 largeThreshold < progressiveThreshold" + }, + "progressiveStep": { + "key": "progressiveStep", + "oneDesc": "分片长度" + }, + "progressiveThreshold": { + "key": "progressiveThreshold", + "oneDesc": "开启分片渲染的阀值，对应的是单系列data的长度" + }, + "support3d": { + "key": "support3d", + "oneDesc": "是否支持3d视角" + }, + "regionIndex": { + "key": "regionIndex", + "oneDesc": "系列关联的region索引" + }, + "regionId": { + "key": "regionId", + "oneDesc": "系列关联的region id" + }, + "totalLabel": { + "key": "totalLabel", + "oneDesc": "堆叠汇总标签" + }, + "animationAppear": { + "key": "animationAppear", + "oneDesc": "图表入场动画\n支持配置图表内置不同动画效果" + }, + "animationDisappear": { + "key": "animationDisappear", + "oneDesc": "图表退场动画" + }, + "animationNormal": { + "key": "animationNormal", + "oneDesc": "循环动画" + }, + "categoryField": { + "key": "categoryField", + "oneDesc": "类别字段" + }, + "label": { + "key": "label", + "oneDesc": "标签配置" + }, + "point": { + "key": "point", + "oneDesc": "点图元配置.同时可以配置选中，hover等交互状态下的点和鼠标的样式" + }, + "line": { + "key": "line", + "oneDesc": "线图元配置.同时可以配置选中，hover等交互状态下的线条和鼠标的样式" + }, + "area": { + "key": "area", + "oneDesc": "面积图元配置.同时可以配置选中，hover等交互状态下的area和鼠标的样式" + }, + "sortDataByAxis": { + "key": "sortDataByAxis", + "oneDesc": "是否将数据按照数轴排序" + }, + "dataId": { + "key": "dataId", + "oneDesc": "系列关联的数据id" + }, + "dataKey": { + "key": "dataKey", + "oneDesc": "dataKey用于绑定数据与Mark的关系, 该配置在动画中非常重要." + }, + "seriesField": { + "key": "seriesField", + "oneDesc": "分组字段" + }, + "stackOffsetSilhouette": { + "key": "stackOffsetSilhouette", + "oneDesc": "是否围绕中心轴偏移轮廓" + }, + "invalidType": { + "key": "invalidType", + "oneDesc": "null，undefined等非法数据点连接方式。" + }, + "extensionMark": { + "key": "extensionMark", + "oneDesc": "扩展mark" + }, + "interactions": { + "key": "interactions", + "oneDesc": "其他需要按需注册的类型交互" + }, + "activePoint": { + "key": "activePoint", + "oneDesc": "是否使用额外的 activePoint 显示交互点，可以在点隐藏时显示被交互的点" + }, + "seriesMark": { + "key": "seriesMark", + "oneDesc": "系列主 mark 类型配置，该配置会影响图例的展示" + }, + "pointDis": { + "key": "pointDis", + "oneDesc": "标记点之间的距离，px" + }, + "pointDisMul": { + "key": "pointDisMul", + "oneDesc": "标记点之间的距离， pointSize 的倍数" + }, + "markOverlap": { + "key": "markOverlap", + "oneDesc": "是否允许标记图形相互覆盖" + }, + "centerX": { + "key": "centerX", + "oneDesc": "中心点 x 坐标" + }, + "centerY": { + "key": "centerY", + "oneDesc": "中心点 y 坐标" + }, + "radiusField": { + "key": "radiusField" + }, + "angleField": { + "key": "angleField" + } +} \ No newline at end of file diff --git a/skills/vchart-development-skill/references/topkey/rangeArea.json b/skills/vchart-development-skill/references/topkey/rangeArea.json new file mode 100644 index 0000000000..ebfe85d96d --- /dev/null +++ b/skills/vchart-development-skill/references/topkey/rangeArea.json @@ -0,0 +1,213 @@ +{ + "direction": { + "key": "direction", + "oneDesc": "图表的方向配置。\n- 'vertical' 垂直布局，即常见的直角坐标系布局，x 轴位于底部，y 轴位于左侧。\n- 'horizontal' 水平布局，可理解为 x 轴和 y 轴位置互换。" + }, + "markLine": { + "key": "markLine", + "oneDesc": "参考线配置" + }, + "markArea": { + "key": "markArea", + "oneDesc": "参考区域配置" + }, + "markPoint": { + "key": "markPoint", + "oneDesc": "参考点配置" + }, + "padding": { + "key": "padding", + "oneDesc": "布局 padding的配置" + }, + "percent": { + "key": "percent", + "oneDesc": "是否对数据进行百分比处理" + }, + "name": { + "key": "name", + "oneDesc": "系列名称" + }, + "id": { + "key": "id", + "oneDesc": "用户自定义的 series id" + }, + "animation": { + "key": "animation", + "oneDesc": "是否开启系列动画" + }, + "stack": { + "key": "stack", + "oneDesc": "是否对数据进行堆叠处理" + }, + "animationEnter": { + "key": "animationEnter", + "oneDesc": "数据更新 - 新增数据动画" + }, + "animationUpdate": { + "key": "animationUpdate", + "oneDesc": "数据更新 - 数据更新动画" + }, + "animationExit": { + "key": "animationExit", + "oneDesc": "数据更新 - 数据删除动画" + }, + "dataIndex": { + "key": "dataIndex", + "oneDesc": "系列关联的数据索引" + }, + "sampling": { + "key": "sampling", + "oneDesc": "数据采样 - 采样方法" + }, + "animationState": { + "key": "animationState", + "oneDesc": "状态切换动画" + }, + "large": { + "key": "large", + "oneDesc": "是否开启大数据渲染模式，开启后会降低渲染的精度" + }, + "largeThreshold": { + "key": "largeThreshold", + "oneDesc": "开启大数据渲染优化的阀值，对应的是data的长度;推荐 largeThreshold < progressiveThreshold" + }, + "progressiveStep": { + "key": "progressiveStep", + "oneDesc": "分片长度" + }, + "progressiveThreshold": { + "key": "progressiveThreshold", + "oneDesc": "开启分片渲染的阀值，对应的是单系列data的长度" + }, + "support3d": { + "key": "support3d", + "oneDesc": "是否支持3d视角" + }, + "regionIndex": { + "key": "regionIndex", + "oneDesc": "系列关联的region索引" + }, + "regionId": { + "key": "regionId", + "oneDesc": "系列关联的region id" + }, + "totalLabel": { + "key": "totalLabel", + "oneDesc": "堆叠汇总标签" + }, + "animationAppear": { + "key": "animationAppear", + "oneDesc": "图表入场动画\n支持配置图表内置不同动画效果" + }, + "animationDisappear": { + "key": "animationDisappear", + "oneDesc": "图表退场动画" + }, + "animationNormal": { + "key": "animationNormal", + "oneDesc": "循环动画" + }, + "xField": { + "key": "xField", + "oneDesc": "x轴字段" + }, + "yField": { + "key": "yField", + "oneDesc": "y轴字段" + }, + "label": { + "key": "label", + "oneDesc": "标签配置" + }, + "point": { + "key": "point", + "oneDesc": "点图元配置.同时可以配置选中，hover等交互状态下的点和鼠标的样式" + }, + "line": { + "key": "line", + "oneDesc": "线图元配置.同时可以配置选中，hover等交互状态下的线条和鼠标的样式" + }, + "area": { + "key": "area", + "oneDesc": "面积图元配置.同时可以配置选中，hover等交互状态下的area和鼠标的样式" + }, + "areaLabel": { + "key": "areaLabel", + "oneDesc": "每条线对应一个标签，一般放在折线的最尾端，值为当前折线对应的图例名称" + }, + "x2Field": { + "key": "x2Field", + "oneDesc": "用于区间数据，声明区间末尾的数据字段。" + }, + "y2Field": { + "key": "y2Field", + "oneDesc": "用于区间数据，声明区间末尾的数据字段。" + }, + "zField": { + "key": "zField", + "oneDesc": "z轴字段\n用于3d散点图等" + }, + "sortDataByAxis": { + "key": "sortDataByAxis", + "oneDesc": "是否将数据按照数轴排序" + }, + "dataId": { + "key": "dataId", + "oneDesc": "系列关联的数据id" + }, + "dataKey": { + "key": "dataKey", + "oneDesc": "dataKey用于绑定数据与Mark的关系, 该配置在动画中非常重要." + }, + "seriesField": { + "key": "seriesField", + "oneDesc": "分组字段" + }, + "stackOffsetSilhouette": { + "key": "stackOffsetSilhouette", + "oneDesc": "是否围绕中心轴偏移轮廓" + }, + "invalidType": { + "key": "invalidType", + "oneDesc": "null，undefined等非法数据点连接方式。" + }, + "extensionMark": { + "key": "extensionMark", + "oneDesc": "扩展mark" + }, + "interactions": { + "key": "interactions", + "oneDesc": "其他需要按需注册的类型交互" + }, + "activePoint": { + "key": "activePoint", + "oneDesc": "是否使用额外的 activePoint 显示交互点，可以在点隐藏时显示被交互的点" + }, + "samplingFactor": { + "key": "samplingFactor", + "oneDesc": "数据采样 - 采样系数" + }, + "minField": { + "key": "minField", + "oneDesc": "数据字段配置" + }, + "maxField": { + "key": "maxField" + }, + "seriesMark": { + "key": "seriesMark", + "oneDesc": "系列主 mark 类型配置，该配置会影响图例的展示" + }, + "pointDis": { + "key": "pointDis", + "oneDesc": "标记点之间的距离，px" + }, + "pointDisMul": { + "key": "pointDisMul", + "oneDesc": "标记点之间的距离， pointSize 的倍数" + }, + "markOverlap": { + "key": "markOverlap", + "oneDesc": "是否允许标记图形相互覆盖" + } +} \ No newline at end of file diff --git a/skills/vchart-development-skill/references/topkey/rangeColumn.json b/skills/vchart-development-skill/references/topkey/rangeColumn.json new file mode 100644 index 0000000000..c83f59c561 --- /dev/null +++ b/skills/vchart-development-skill/references/topkey/rangeColumn.json @@ -0,0 +1,213 @@ +{ + "direction": { + "key": "direction", + "oneDesc": "图表的方向配置。\n- 'vertical' 垂直布局，即常见的直角坐标系布局，x 轴位于底部，y 轴位于左侧。\n- 'horizontal' 水平布局，可理解为 x 轴和 y 轴位置互换。" + }, + "markLine": { + "key": "markLine", + "oneDesc": "参考线配置" + }, + "markArea": { + "key": "markArea", + "oneDesc": "参考区域配置" + }, + "markPoint": { + "key": "markPoint", + "oneDesc": "参考点配置" + }, + "padding": { + "key": "padding", + "oneDesc": "布局 padding的配置" + }, + "percent": { + "key": "percent", + "oneDesc": "是否对数据进行百分比处理" + }, + "name": { + "key": "name", + "oneDesc": "系列名称" + }, + "id": { + "key": "id", + "oneDesc": "用户自定义的 series id" + }, + "animation": { + "key": "animation", + "oneDesc": "是否开启系列动画" + }, + "stack": { + "key": "stack", + "oneDesc": "是否对数据进行堆叠处理" + }, + "animationEnter": { + "key": "animationEnter", + "oneDesc": "数据更新 - 新增数据动画" + }, + "animationUpdate": { + "key": "animationUpdate", + "oneDesc": "数据更新 - 数据更新动画" + }, + "animationExit": { + "key": "animationExit", + "oneDesc": "数据更新 - 数据删除动画" + }, + "dataIndex": { + "key": "dataIndex", + "oneDesc": "系列关联的数据索引" + }, + "sampling": { + "key": "sampling", + "oneDesc": "数据采样 - 采样方法" + }, + "animationState": { + "key": "animationState", + "oneDesc": "状态切换动画" + }, + "large": { + "key": "large", + "oneDesc": "是否开启大数据渲染模式，开启后会降低渲染的精度" + }, + "largeThreshold": { + "key": "largeThreshold", + "oneDesc": "开启大数据渲染优化的阀值，对应的是data的长度;推荐 largeThreshold < progressiveThreshold" + }, + "progressiveStep": { + "key": "progressiveStep", + "oneDesc": "分片长度" + }, + "progressiveThreshold": { + "key": "progressiveThreshold", + "oneDesc": "开启分片渲染的阀值，对应的是单系列data的长度" + }, + "support3d": { + "key": "support3d", + "oneDesc": "是否支持3d视角" + }, + "regionIndex": { + "key": "regionIndex", + "oneDesc": "系列关联的region索引" + }, + "regionId": { + "key": "regionId", + "oneDesc": "系列关联的region id" + }, + "totalLabel": { + "key": "totalLabel", + "oneDesc": "堆叠汇总标签" + }, + "animationAppear": { + "key": "animationAppear", + "oneDesc": "图表入场动画\n支持配置图表内置不同动画效果" + }, + "animationDisappear": { + "key": "animationDisappear", + "oneDesc": "图表退场动画" + }, + "animationNormal": { + "key": "animationNormal", + "oneDesc": "循环动画" + }, + "xField": { + "key": "xField", + "oneDesc": "x轴字段" + }, + "yField": { + "key": "yField", + "oneDesc": "y轴字段" + }, + "label": { + "key": "label", + "oneDesc": "标签配置" + }, + "bar": { + "key": "bar", + "oneDesc": "柱图图元样式配置.同时可以配置选中，hover等交互状态下的柱子和对应鼠标的样式" + }, + "barBackground": { + "key": "barBackground", + "oneDesc": "柱图中每根柱子背后的背景图元配置.同时可以配置选中，hover等交互状态下的背景图元和对应鼠标的样式" + }, + "barWidth": { + "key": "barWidth", + "oneDesc": "柱体宽度，可以设置绝对的像素值，也可以使用百分比（如 '10%'）\n1. number 类型，表示像素值\n2. string 类型，百分比用法，如 '10%'，该值为对应最后一个分组字段对应的 scale 的 bandWidth 占比(因为柱子是等宽的，所以采用最后一层分组的 scale)" + }, + "barMinWidth": { + "key": "barMinWidth", + "oneDesc": "柱体最小宽度，可以设置绝对的像素值，也可以使用百分比（如 '10%'）\n1. number 类型，表示像素值\n2. string 类型，百分比用法，如 '10%'，该值为对应最后一个分组字段对应的 scale 的 bandWidth 占比(因为柱子是等宽的，所以采用最后一层分组的 scale)" + }, + "barMaxWidth": { + "key": "barMaxWidth", + "oneDesc": "柱体最大宽度，可以设置绝对的像素值，也可以使用百分比（如 '10%'）\n1. number 类型，表示像素值\n2. string 类型，百分比用法，如 '10%'，该值为对应最后一个分组字段对应的 scale 的 bandWidth 占比(因为柱子是等宽的，所以采用最后一层分组的 scale)" + }, + "barGapInGroup": { + "key": "barGapInGroup", + "oneDesc": "分组柱图中各个分组内的柱子间距，可以设置绝对的像素值，也可以使用百分比（如 '10%'）。\n当存在多层分组时，可以使用数组来设置不同层级的间距，如 [10, '20%']，表示第一层分组的间距为 10px，第二层分组的间距为 '20%'。\n如果 barGapInGroup 的数组个数小于分组层数，则后面的分组间距使用最后一个值。\n1. number 类型，表示像素值\n2. string 类型，百分比用法，如 '10%'，该值为对应最后一个分组字段对应的 scale 的 bandWidth 占比(因为柱子是等宽的，所以采用最后一层分组的 scale)" + }, + "barMinHeight": { + "key": "barMinHeight", + "oneDesc": "柱条最小高度，可用于防止某数据项的值过小的视觉调整。" + }, + "stackCornerRadius": { + "key": "stackCornerRadius", + "oneDesc": "堆叠柱整体的圆角" + }, + "x2Field": { + "key": "x2Field", + "oneDesc": "用于区间数据，声明区间末尾的数据字段。" + }, + "y2Field": { + "key": "y2Field", + "oneDesc": "用于区间数据，声明区间末尾的数据字段。" + }, + "zField": { + "key": "zField", + "oneDesc": "z轴字段\n用于3d散点图等" + }, + "sortDataByAxis": { + "key": "sortDataByAxis", + "oneDesc": "是否将数据按照数轴排序" + }, + "dataId": { + "key": "dataId", + "oneDesc": "系列关联的数据id" + }, + "dataKey": { + "key": "dataKey", + "oneDesc": "dataKey用于绑定数据与Mark的关系, 该配置在动画中非常重要." + }, + "seriesField": { + "key": "seriesField", + "oneDesc": "分组字段" + }, + "stackOffsetSilhouette": { + "key": "stackOffsetSilhouette", + "oneDesc": "是否围绕中心轴偏移轮廓" + }, + "invalidType": { + "key": "invalidType", + "oneDesc": "null，undefined等非法数据点连接方式。" + }, + "extensionMark": { + "key": "extensionMark", + "oneDesc": "扩展mark" + }, + "interactions": { + "key": "interactions", + "oneDesc": "其他需要按需注册的类型交互" + }, + "activePoint": { + "key": "activePoint", + "oneDesc": "是否使用额外的 activePoint 显示交互点，可以在点隐藏时显示被交互的点" + }, + "samplingFactor": { + "key": "samplingFactor", + "oneDesc": "数据采样 - 采样系数" + }, + "minField": { + "key": "minField", + "oneDesc": "数据字段配置" + }, + "maxField": { + "key": "maxField" + } +} \ No newline at end of file diff --git a/skills/vchart-development-skill/references/topkey/rangeColumn3d.json b/skills/vchart-development-skill/references/topkey/rangeColumn3d.json new file mode 100644 index 0000000000..c83f59c561 --- /dev/null +++ b/skills/vchart-development-skill/references/topkey/rangeColumn3d.json @@ -0,0 +1,213 @@ +{ + "direction": { + "key": "direction", + "oneDesc": "图表的方向配置。\n- 'vertical' 垂直布局，即常见的直角坐标系布局，x 轴位于底部，y 轴位于左侧。\n- 'horizontal' 水平布局，可理解为 x 轴和 y 轴位置互换。" + }, + "markLine": { + "key": "markLine", + "oneDesc": "参考线配置" + }, + "markArea": { + "key": "markArea", + "oneDesc": "参考区域配置" + }, + "markPoint": { + "key": "markPoint", + "oneDesc": "参考点配置" + }, + "padding": { + "key": "padding", + "oneDesc": "布局 padding的配置" + }, + "percent": { + "key": "percent", + "oneDesc": "是否对数据进行百分比处理" + }, + "name": { + "key": "name", + "oneDesc": "系列名称" + }, + "id": { + "key": "id", + "oneDesc": "用户自定义的 series id" + }, + "animation": { + "key": "animation", + "oneDesc": "是否开启系列动画" + }, + "stack": { + "key": "stack", + "oneDesc": "是否对数据进行堆叠处理" + }, + "animationEnter": { + "key": "animationEnter", + "oneDesc": "数据更新 - 新增数据动画" + }, + "animationUpdate": { + "key": "animationUpdate", + "oneDesc": "数据更新 - 数据更新动画" + }, + "animationExit": { + "key": "animationExit", + "oneDesc": "数据更新 - 数据删除动画" + }, + "dataIndex": { + "key": "dataIndex", + "oneDesc": "系列关联的数据索引" + }, + "sampling": { + "key": "sampling", + "oneDesc": "数据采样 - 采样方法" + }, + "animationState": { + "key": "animationState", + "oneDesc": "状态切换动画" + }, + "large": { + "key": "large", + "oneDesc": "是否开启大数据渲染模式，开启后会降低渲染的精度" + }, + "largeThreshold": { + "key": "largeThreshold", + "oneDesc": "开启大数据渲染优化的阀值，对应的是data的长度;推荐 largeThreshold < progressiveThreshold" + }, + "progressiveStep": { + "key": "progressiveStep", + "oneDesc": "分片长度" + }, + "progressiveThreshold": { + "key": "progressiveThreshold", + "oneDesc": "开启分片渲染的阀值，对应的是单系列data的长度" + }, + "support3d": { + "key": "support3d", + "oneDesc": "是否支持3d视角" + }, + "regionIndex": { + "key": "regionIndex", + "oneDesc": "系列关联的region索引" + }, + "regionId": { + "key": "regionId", + "oneDesc": "系列关联的region id" + }, + "totalLabel": { + "key": "totalLabel", + "oneDesc": "堆叠汇总标签" + }, + "animationAppear": { + "key": "animationAppear", + "oneDesc": "图表入场动画\n支持配置图表内置不同动画效果" + }, + "animationDisappear": { + "key": "animationDisappear", + "oneDesc": "图表退场动画" + }, + "animationNormal": { + "key": "animationNormal", + "oneDesc": "循环动画" + }, + "xField": { + "key": "xField", + "oneDesc": "x轴字段" + }, + "yField": { + "key": "yField", + "oneDesc": "y轴字段" + }, + "label": { + "key": "label", + "oneDesc": "标签配置" + }, + "bar": { + "key": "bar", + "oneDesc": "柱图图元样式配置.同时可以配置选中，hover等交互状态下的柱子和对应鼠标的样式" + }, + "barBackground": { + "key": "barBackground", + "oneDesc": "柱图中每根柱子背后的背景图元配置.同时可以配置选中，hover等交互状态下的背景图元和对应鼠标的样式" + }, + "barWidth": { + "key": "barWidth", + "oneDesc": "柱体宽度，可以设置绝对的像素值，也可以使用百分比（如 '10%'）\n1. number 类型，表示像素值\n2. string 类型，百分比用法，如 '10%'，该值为对应最后一个分组字段对应的 scale 的 bandWidth 占比(因为柱子是等宽的，所以采用最后一层分组的 scale)" + }, + "barMinWidth": { + "key": "barMinWidth", + "oneDesc": "柱体最小宽度，可以设置绝对的像素值，也可以使用百分比（如 '10%'）\n1. number 类型，表示像素值\n2. string 类型，百分比用法，如 '10%'，该值为对应最后一个分组字段对应的 scale 的 bandWidth 占比(因为柱子是等宽的，所以采用最后一层分组的 scale)" + }, + "barMaxWidth": { + "key": "barMaxWidth", + "oneDesc": "柱体最大宽度，可以设置绝对的像素值，也可以使用百分比（如 '10%'）\n1. number 类型，表示像素值\n2. string 类型，百分比用法，如 '10%'，该值为对应最后一个分组字段对应的 scale 的 bandWidth 占比(因为柱子是等宽的，所以采用最后一层分组的 scale)" + }, + "barGapInGroup": { + "key": "barGapInGroup", + "oneDesc": "分组柱图中各个分组内的柱子间距，可以设置绝对的像素值，也可以使用百分比（如 '10%'）。\n当存在多层分组时，可以使用数组来设置不同层级的间距，如 [10, '20%']，表示第一层分组的间距为 10px，第二层分组的间距为 '20%'。\n如果 barGapInGroup 的数组个数小于分组层数，则后面的分组间距使用最后一个值。\n1. number 类型，表示像素值\n2. string 类型，百分比用法，如 '10%'，该值为对应最后一个分组字段对应的 scale 的 bandWidth 占比(因为柱子是等宽的，所以采用最后一层分组的 scale)" + }, + "barMinHeight": { + "key": "barMinHeight", + "oneDesc": "柱条最小高度，可用于防止某数据项的值过小的视觉调整。" + }, + "stackCornerRadius": { + "key": "stackCornerRadius", + "oneDesc": "堆叠柱整体的圆角" + }, + "x2Field": { + "key": "x2Field", + "oneDesc": "用于区间数据，声明区间末尾的数据字段。" + }, + "y2Field": { + "key": "y2Field", + "oneDesc": "用于区间数据，声明区间末尾的数据字段。" + }, + "zField": { + "key": "zField", + "oneDesc": "z轴字段\n用于3d散点图等" + }, + "sortDataByAxis": { + "key": "sortDataByAxis", + "oneDesc": "是否将数据按照数轴排序" + }, + "dataId": { + "key": "dataId", + "oneDesc": "系列关联的数据id" + }, + "dataKey": { + "key": "dataKey", + "oneDesc": "dataKey用于绑定数据与Mark的关系, 该配置在动画中非常重要." + }, + "seriesField": { + "key": "seriesField", + "oneDesc": "分组字段" + }, + "stackOffsetSilhouette": { + "key": "stackOffsetSilhouette", + "oneDesc": "是否围绕中心轴偏移轮廓" + }, + "invalidType": { + "key": "invalidType", + "oneDesc": "null，undefined等非法数据点连接方式。" + }, + "extensionMark": { + "key": "extensionMark", + "oneDesc": "扩展mark" + }, + "interactions": { + "key": "interactions", + "oneDesc": "其他需要按需注册的类型交互" + }, + "activePoint": { + "key": "activePoint", + "oneDesc": "是否使用额外的 activePoint 显示交互点，可以在点隐藏时显示被交互的点" + }, + "samplingFactor": { + "key": "samplingFactor", + "oneDesc": "数据采样 - 采样系数" + }, + "minField": { + "key": "minField", + "oneDesc": "数据字段配置" + }, + "maxField": { + "key": "maxField" + } +} \ No newline at end of file diff --git a/skills/vchart-development-skill/references/topkey/rose.json b/skills/vchart-development-skill/references/topkey/rose.json new file mode 100644 index 0000000000..d09e1d895f --- /dev/null +++ b/skills/vchart-development-skill/references/topkey/rose.json @@ -0,0 +1,163 @@ +{ + "layoutRadius": { + "key": "layoutRadius" + }, + "indicator": { + "key": "indicator", + "oneDesc": "指标卡配置" + }, + "padding": { + "key": "padding", + "oneDesc": "布局 padding的配置" + }, + "percent": { + "key": "percent", + "oneDesc": "是否对数据进行百分比处理" + }, + "name": { + "key": "name", + "oneDesc": "系列名称" + }, + "id": { + "key": "id", + "oneDesc": "用户自定义的 series id" + }, + "animation": { + "key": "animation", + "oneDesc": "是否开启系列动画" + }, + "innerRadius": { + "key": "innerRadius", + "oneDesc": "扇区内半径" + }, + "outerRadius": { + "key": "outerRadius", + "oneDesc": "扇区外半径" + }, + "startAngle": { + "key": "startAngle", + "oneDesc": "扇区起始角度" + }, + "endAngle": { + "key": "endAngle", + "oneDesc": "扇区结束角度" + }, + "radius": { + "key": "radius", + "oneDesc": "扇区半径" + }, + "stack": { + "key": "stack", + "oneDesc": "是否对数据进行堆叠处理" + }, + "animationEnter": { + "key": "animationEnter", + "oneDesc": "数据更新 - 新增数据动画" + }, + "animationUpdate": { + "key": "animationUpdate", + "oneDesc": "数据更新 - 数据更新动画" + }, + "animationExit": { + "key": "animationExit", + "oneDesc": "数据更新 - 数据删除动画" + }, + "dataIndex": { + "key": "dataIndex", + "oneDesc": "系列关联的数据索引" + }, + "valueField": { + "key": "valueField", + "oneDesc": "数值字段" + }, + "animationState": { + "key": "animationState", + "oneDesc": "状态切换动画" + }, + "support3d": { + "key": "support3d", + "oneDesc": "是否支持3d视角" + }, + "regionIndex": { + "key": "regionIndex", + "oneDesc": "系列关联的region索引" + }, + "regionId": { + "key": "regionId", + "oneDesc": "系列关联的region id" + }, + "totalLabel": { + "key": "totalLabel", + "oneDesc": "堆叠汇总标签" + }, + "animationAppear": { + "key": "animationAppear", + "oneDesc": "图表入场动画\n支持配置图表内置不同动画效果" + }, + "animationDisappear": { + "key": "animationDisappear", + "oneDesc": "图表退场动画" + }, + "animationNormal": { + "key": "animationNormal", + "oneDesc": "循环动画" + }, + "categoryField": { + "key": "categoryField", + "oneDesc": "分类字段" + }, + "label": { + "key": "label", + "oneDesc": "标签配置" + }, + "rose": { + "key": "rose", + "oneDesc": "扇区样式" + }, + "sortDataByAxis": { + "key": "sortDataByAxis", + "oneDesc": "是否将数据按照数轴排序" + }, + "dataId": { + "key": "dataId", + "oneDesc": "系列关联的数据id" + }, + "dataKey": { + "key": "dataKey", + "oneDesc": "dataKey用于绑定数据与Mark的关系, 该配置在动画中非常重要." + }, + "seriesField": { + "key": "seriesField", + "oneDesc": "分组字段" + }, + "stackOffsetSilhouette": { + "key": "stackOffsetSilhouette", + "oneDesc": "是否围绕中心轴偏移轮廓" + }, + "invalidType": { + "key": "invalidType", + "oneDesc": "null，undefined等非法数据点连接方式。" + }, + "extensionMark": { + "key": "extensionMark", + "oneDesc": "扩展mark" + }, + "interactions": { + "key": "interactions", + "oneDesc": "其他需要按需注册的类型交互" + }, + "centerX": { + "key": "centerX", + "oneDesc": "中心点 x 坐标" + }, + "centerY": { + "key": "centerY", + "oneDesc": "中心点 y 坐标" + }, + "radiusField": { + "key": "radiusField" + }, + "angleField": { + "key": "angleField" + } +} \ No newline at end of file diff --git a/skills/vchart-development-skill/references/topkey/sankey.json b/skills/vchart-development-skill/references/topkey/sankey.json new file mode 100644 index 0000000000..a9e0d88dc7 --- /dev/null +++ b/skills/vchart-development-skill/references/topkey/sankey.json @@ -0,0 +1,213 @@ +{ + "percent": { + "key": "percent", + "oneDesc": "是否对数据进行百分比处理" + }, + "name": { + "key": "name", + "oneDesc": "系列名称" + }, + "id": { + "key": "id", + "oneDesc": "用户自定义的 series id" + }, + "inverse": { + "key": "inverse", + "oneDesc": "是否反向" + }, + "animation": { + "key": "animation", + "oneDesc": "是否开启系列动画" + }, + "direction": { + "key": "direction", + "oneDesc": "图表布局方向" + }, + "stack": { + "key": "stack", + "oneDesc": "是否对数据进行堆叠处理" + }, + "animationEnter": { + "key": "animationEnter", + "oneDesc": "数据更新 - 新增数据动画" + }, + "animationUpdate": { + "key": "animationUpdate", + "oneDesc": "数据更新 - 数据更新动画" + }, + "animationExit": { + "key": "animationExit", + "oneDesc": "数据更新 - 数据删除动画" + }, + "dataIndex": { + "key": "dataIndex", + "oneDesc": "系列关联的数据索引" + }, + "valueField": { + "key": "valueField", + "oneDesc": "节点之间关系的权重字段" + }, + "animationState": { + "key": "animationState", + "oneDesc": "状态切换动画" + }, + "support3d": { + "key": "support3d", + "oneDesc": "是否支持3d视角" + }, + "regionIndex": { + "key": "regionIndex", + "oneDesc": "系列关联的region索引" + }, + "regionId": { + "key": "regionId", + "oneDesc": "系列关联的region id" + }, + "totalLabel": { + "key": "totalLabel", + "oneDesc": "堆叠汇总标签" + }, + "animationAppear": { + "key": "animationAppear", + "oneDesc": "图表入场动画\n支持配置图表内置不同动画效果" + }, + "animationDisappear": { + "key": "animationDisappear", + "oneDesc": "图表退场动画" + }, + "animationNormal": { + "key": "animationNormal", + "oneDesc": "循环动画" + }, + "categoryField": { + "key": "categoryField", + "oneDesc": "节点名称字段配置" + }, + "label": { + "key": "label", + "oneDesc": "标签配置" + }, + "link": { + "key": "link", + "oneDesc": "边配置" + }, + "node": { + "key": "node", + "oneDesc": "节点配置" + }, + "dataId": { + "key": "dataId", + "oneDesc": "系列关联的数据id" + }, + "dataKey": { + "key": "dataKey", + "oneDesc": "dataKey用于绑定数据与Mark的关系, 该配置在动画中非常重要." + }, + "seriesField": { + "key": "seriesField", + "oneDesc": "分组字段" + }, + "stackOffsetSilhouette": { + "key": "stackOffsetSilhouette", + "oneDesc": "是否围绕中心轴偏移轮廓" + }, + "invalidType": { + "key": "invalidType", + "oneDesc": "null，undefined等非法数据点连接方式。" + }, + "extensionMark": { + "key": "extensionMark", + "oneDesc": "扩展mark" + }, + "interactions": { + "key": "interactions", + "oneDesc": "其他需要按需注册的类型交互" + }, + "nameKey": { + "key": "nameKey" + }, + "sourceField": { + "key": "sourceField", + "oneDesc": "来源节点数据字段\n层级数据不提供" + }, + "targetField": { + "key": "targetField", + "oneDesc": "目标节点数据字段\n层级数据不提供" + }, + "nodeAlign": { + "key": "nodeAlign", + "oneDesc": "节点的对齐类型，所有深度相同的节点，采用什么对齐方式，决定了节点在第几层：\n- 横向布局的桑基图，用于计算节点x坐标\n- 纵向布局的桑基图，用于计算节点y坐标" + }, + "crossNodeAlign": { + "key": "crossNodeAlign", + "oneDesc": "横向布局的桑基图，设置节点Y坐标的对齐方式：\n'start' - '顶部对齐'\n'end' - '底部对齐'\n'middle' - '居中对齐'\n\n纵向布局的桑基图，设置节点X坐标的对齐方式：\n'start' - '左对齐'\n'end' - '右对齐'\n'middle' - '居中对齐'" + }, + "nodeGap": { + "key": "nodeGap", + "oneDesc": "同一层中两个节点之间的间隙大小" + }, + "nodeWidth": { + "key": "nodeWidth", + "oneDesc": "每个节点的宽度，支持三种取值\n1. 百分比字符串，例如：{ nodeWidth: '12%' }\n2. 以'px'为单位的简单数字，eg: { nodeWidth: 20 }\n3. function，通过自定义计算指定nodeWidth" + }, + "linkWidth": { + "key": "linkWidth", + "oneDesc": "link宽度，单位px" + }, + "minStepWidth": { + "key": "minStepWidth", + "oneDesc": "link + node 的最小宽度" + }, + "minNodeHeight": { + "key": "minNodeHeight", + "oneDesc": "数据不为零或空时节点的最小大小\n - 这个配置可以用来避免数据太小时看不到太细的节点\n - 建议小于5px" + }, + "minLinkHeight": { + "key": "minLinkHeight", + "oneDesc": "数据不为零或空时边的最小大小\n - 这个配置可以用来避免数据太小的时候看不到太细的链接\n - 建议小于5px\n - 当同时指定 `minNodeHeight` 和 `minLinkHeight` 两个选项时，此选项应小于 `minNodeHeight`" + }, + "iterations": { + "key": "iterations", + "oneDesc": "布局的迭代次数" + }, + "nodeKey": { + "key": "nodeKey", + "oneDesc": "解析node的key，defaultValue" + }, + "linkSortBy": { + "key": "linkSortBy", + "oneDesc": "按此funtion排序link" + }, + "nodeSortBy": { + "key": "nodeSortBy", + "oneDesc": "按此funtion排序node" + }, + "setNodeLayer": { + "key": "setNodeLayer", + "oneDesc": "自定义指定节点层" + }, + "dropIsolatedNode": { + "key": "dropIsolatedNode", + "oneDesc": "是否丢弃孤立的节点" + }, + "nodeHeight": { + "key": "nodeHeight", + "oneDesc": "set the height of node" + }, + "linkHeight": { + "key": "linkHeight", + "oneDesc": "set the height of link" + }, + "equalNodeHeight": { + "key": "equalNodeHeight", + "oneDesc": "each node has same height" + }, + "linkOverlap": { + "key": "linkOverlap", + "oneDesc": "设置桑基图线条布局方式，设置后为重叠布局，可以手动设置线条重叠位置(上/中/下)" + }, + "emphasis": { + "key": "emphasis", + "oneDesc": "联动交互配置" + } +} \ No newline at end of file diff --git a/skills/vchart-development-skill/references/topkey/scatter.json b/skills/vchart-development-skill/references/topkey/scatter.json new file mode 100644 index 0000000000..abd979ecf6 --- /dev/null +++ b/skills/vchart-development-skill/references/topkey/scatter.json @@ -0,0 +1,181 @@ +{ + "direction": { + "key": "direction", + "oneDesc": "图表的方向配置。\n- 'vertical' 垂直布局，即常见的直角坐标系布局，x 轴位于底部，y 轴位于左侧。\n- 'horizontal' 水平布局，可理解为 x 轴和 y 轴位置互换。" + }, + "markLine": { + "key": "markLine", + "oneDesc": "参考线配置" + }, + "markArea": { + "key": "markArea", + "oneDesc": "参考区域配置" + }, + "markPoint": { + "key": "markPoint", + "oneDesc": "参考点配置" + }, + "padding": { + "key": "padding", + "oneDesc": "布局 padding的配置" + }, + "percent": { + "key": "percent", + "oneDesc": "是否对数据进行百分比处理" + }, + "name": { + "key": "name", + "oneDesc": "系列名称" + }, + "id": { + "key": "id", + "oneDesc": "用户自定义的 series id" + }, + "animation": { + "key": "animation", + "oneDesc": "是否开启系列动画" + }, + "size": { + "key": "size", + "oneDesc": "设置气泡大小" + }, + "stack": { + "key": "stack", + "oneDesc": "是否对数据进行堆叠处理" + }, + "shape": { + "key": "shape" + }, + "animationEnter": { + "key": "animationEnter", + "oneDesc": "数据更新 - 新增数据动画" + }, + "animationUpdate": { + "key": "animationUpdate", + "oneDesc": "数据更新 - 数据更新动画" + }, + "animationExit": { + "key": "animationExit", + "oneDesc": "数据更新 - 数据删除动画" + }, + "dataIndex": { + "key": "dataIndex", + "oneDesc": "系列关联的数据索引" + }, + "animationState": { + "key": "animationState", + "oneDesc": "状态切换动画" + }, + "large": { + "key": "large", + "oneDesc": "是否开启大数据渲染模式，开启后会降低渲染的精度" + }, + "largeThreshold": { + "key": "largeThreshold", + "oneDesc": "开启大数据渲染优化的阀值，对应的是data的长度;推荐 largeThreshold < progressiveThreshold" + }, + "progressiveStep": { + "key": "progressiveStep", + "oneDesc": "分片长度" + }, + "progressiveThreshold": { + "key": "progressiveThreshold", + "oneDesc": "开启分片渲染的阀值，对应的是单系列data的长度" + }, + "support3d": { + "key": "support3d", + "oneDesc": "是否支持3d视角" + }, + "regionIndex": { + "key": "regionIndex", + "oneDesc": "系列关联的region索引" + }, + "regionId": { + "key": "regionId", + "oneDesc": "系列关联的region id" + }, + "totalLabel": { + "key": "totalLabel", + "oneDesc": "堆叠汇总标签" + }, + "animationAppear": { + "key": "animationAppear", + "oneDesc": "图表入场动画\n支持配置图表内置不同动画效果" + }, + "animationDisappear": { + "key": "animationDisappear", + "oneDesc": "图表退场动画" + }, + "animationNormal": { + "key": "animationNormal", + "oneDesc": "循环动画" + }, + "xField": { + "key": "xField", + "oneDesc": "x轴字段" + }, + "yField": { + "key": "yField", + "oneDesc": "y轴字段" + }, + "label": { + "key": "label", + "oneDesc": "标签配置" + }, + "point": { + "key": "point", + "oneDesc": "点图元配置.同时可以配置选中，hover等交互状态下的点和鼠标的样式" + }, + "x2Field": { + "key": "x2Field", + "oneDesc": "用于区间数据，声明区间末尾的数据字段。" + }, + "y2Field": { + "key": "y2Field", + "oneDesc": "用于区间数据，声明区间末尾的数据字段。" + }, + "zField": { + "key": "zField", + "oneDesc": "z轴字段\n用于3d散点图等" + }, + "sortDataByAxis": { + "key": "sortDataByAxis", + "oneDesc": "是否将数据按照数轴排序" + }, + "dataId": { + "key": "dataId", + "oneDesc": "系列关联的数据id" + }, + "dataKey": { + "key": "dataKey", + "oneDesc": "dataKey用于绑定数据与Mark的关系, 该配置在动画中非常重要." + }, + "seriesField": { + "key": "seriesField", + "oneDesc": "分组字段" + }, + "stackOffsetSilhouette": { + "key": "stackOffsetSilhouette", + "oneDesc": "是否围绕中心轴偏移轮廓" + }, + "invalidType": { + "key": "invalidType", + "oneDesc": "null，undefined等非法数据点连接方式。" + }, + "extensionMark": { + "key": "extensionMark", + "oneDesc": "扩展mark" + }, + "interactions": { + "key": "interactions", + "oneDesc": "其他需要按需注册的类型交互" + }, + "sizeField": { + "key": "sizeField", + "oneDesc": "尺寸 视觉通道" + }, + "shapeField": { + "key": "shapeField", + "oneDesc": "形状 视觉通道" + } +} \ No newline at end of file diff --git a/skills/vchart-development-skill/references/topkey/sequence.json b/skills/vchart-development-skill/references/topkey/sequence.json new file mode 100644 index 0000000000..72c3591e46 --- /dev/null +++ b/skills/vchart-development-skill/references/topkey/sequence.json @@ -0,0 +1,18 @@ +{ + "appendPadding": { + "key": "appendPadding", + "oneDesc": "可以为左边的title预留padding" + }, + "dataZooms": { + "key": "dataZooms", + "oneDesc": "缩略轴配置" + }, + "scrollBars": { + "key": "scrollBars", + "oneDesc": "滚动条配置" + }, + "padding": { + "key": "padding", + "oneDesc": "布局 padding的配置" + } +} \ No newline at end of file diff --git a/skills/vchart-development-skill/references/topkey/sunburst.json b/skills/vchart-development-skill/references/topkey/sunburst.json new file mode 100644 index 0000000000..c76ea0cf6f --- /dev/null +++ b/skills/vchart-development-skill/references/topkey/sunburst.json @@ -0,0 +1,170 @@ +{ + "padding": { + "key": "padding", + "oneDesc": "布局 padding的配置" + }, + "percent": { + "key": "percent", + "oneDesc": "是否对数据进行百分比处理" + }, + "name": { + "key": "name", + "oneDesc": "系列名称" + }, + "id": { + "key": "id", + "oneDesc": "用户自定义的 series id" + }, + "animation": { + "key": "animation", + "oneDesc": "是否开启系列动画" + }, + "gap": { + "key": "gap", + "oneDesc": "对所有层生效" + }, + "innerRadius": { + "key": "innerRadius", + "oneDesc": "最内层" + }, + "outerRadius": { + "key": "outerRadius", + "oneDesc": "最外层" + }, + "startAngle": { + "key": "startAngle", + "oneDesc": "起始角度" + }, + "endAngle": { + "key": "endAngle", + "oneDesc": "终止角度" + }, + "stack": { + "key": "stack", + "oneDesc": "是否对数据进行堆叠处理" + }, + "animationEnter": { + "key": "animationEnter", + "oneDesc": "数据更新 - 新增数据动画" + }, + "animationUpdate": { + "key": "animationUpdate", + "oneDesc": "数据更新 - 数据更新动画" + }, + "animationExit": { + "key": "animationExit", + "oneDesc": "数据更新 - 数据删除动画" + }, + "dataIndex": { + "key": "dataIndex", + "oneDesc": "系列关联的数据索引" + }, + "valueField": { + "key": "valueField", + "oneDesc": "权重字段" + }, + "animationState": { + "key": "animationState", + "oneDesc": "状态切换动画" + }, + "support3d": { + "key": "support3d", + "oneDesc": "是否支持3d视角" + }, + "regionIndex": { + "key": "regionIndex", + "oneDesc": "系列关联的region索引" + }, + "regionId": { + "key": "regionId", + "oneDesc": "系列关联的region id" + }, + "drill": { + "key": "drill", + "oneDesc": "下钻功能开关" + }, + "totalLabel": { + "key": "totalLabel", + "oneDesc": "堆叠汇总标签" + }, + "offsetX": { + "key": "offsetX", + "oneDesc": "旭日图中心点, x坐标偏移量." + }, + "offsetY": { + "key": "offsetY", + "oneDesc": "旭日图中心点, y坐标偏移量." + }, + "animationAppear": { + "key": "animationAppear", + "oneDesc": "图表入场动画\n支持配置图表内置不同动画效果" + }, + "animationDisappear": { + "key": "animationDisappear", + "oneDesc": "图表退场动画" + }, + "animationNormal": { + "key": "animationNormal", + "oneDesc": "循环动画" + }, + "categoryField": { + "key": "categoryField", + "oneDesc": "分类字段" + }, + "labelLayout": { + "key": "labelLayout", + "oneDesc": "label布局相关参数" + }, + "label": { + "key": "label", + "oneDesc": "对所有层生效" + }, + "sunburst": { + "key": "sunburst", + "oneDesc": "旭日图中单个扇区图元配置.同时可以配置选中，hover等交互状态下的图元和鼠标的样式" + }, + "dataId": { + "key": "dataId", + "oneDesc": "系列关联的数据id" + }, + "dataKey": { + "key": "dataKey", + "oneDesc": "dataKey用于绑定数据与Mark的关系, 该配置在动画中非常重要." + }, + "seriesField": { + "key": "seriesField", + "oneDesc": "分组字段" + }, + "stackOffsetSilhouette": { + "key": "stackOffsetSilhouette", + "oneDesc": "是否围绕中心轴偏移轮廓" + }, + "invalidType": { + "key": "invalidType", + "oneDesc": "null，undefined等非法数据点连接方式。" + }, + "extensionMark": { + "key": "extensionMark", + "oneDesc": "扩展mark" + }, + "interactions": { + "key": "interactions", + "oneDesc": "其他需要按需注册的类型交互" + }, + "drillField": { + "key": "drillField", + "oneDesc": "通过API进行钻取, 需要此配置项." + }, + "centerX": { + "key": "centerX", + "oneDesc": "旭日图中心点, x坐标." + }, + "centerY": { + "key": "centerY", + "oneDesc": "旭日图中心点, y坐标." + }, + "labelAutoVisible": { + "key": "labelAutoVisible", + "oneDesc": "自动隐藏密集标签" + } +} \ No newline at end of file diff --git a/skills/vchart-development-skill/references/topkey/treemap.json b/skills/vchart-development-skill/references/topkey/treemap.json new file mode 100644 index 0000000000..72ccf182f7 --- /dev/null +++ b/skills/vchart-development-skill/references/topkey/treemap.json @@ -0,0 +1,178 @@ +{ + "padding": { + "key": "padding", + "oneDesc": "布局 padding的配置" + }, + "percent": { + "key": "percent", + "oneDesc": "是否对数据进行百分比处理" + }, + "name": { + "key": "name", + "oneDesc": "系列名称" + }, + "id": { + "key": "id", + "oneDesc": "用户自定义的 series id" + }, + "animation": { + "key": "animation", + "oneDesc": "是否开启系列动画" + }, + "aspectRatio": { + "key": "aspectRatio", + "oneDesc": "矩形分割比例" + }, + "stack": { + "key": "stack", + "oneDesc": "是否对数据进行堆叠处理" + }, + "animationEnter": { + "key": "animationEnter", + "oneDesc": "数据更新 - 新增数据动画" + }, + "animationUpdate": { + "key": "animationUpdate", + "oneDesc": "数据更新 - 数据更新动画" + }, + "animationExit": { + "key": "animationExit", + "oneDesc": "数据更新 - 数据删除动画" + }, + "dataIndex": { + "key": "dataIndex", + "oneDesc": "系列关联的数据索引" + }, + "valueField": { + "key": "valueField", + "oneDesc": "权重字段" + }, + "animationState": { + "key": "animationState", + "oneDesc": "状态切换动画" + }, + "support3d": { + "key": "support3d", + "oneDesc": "是否支持3d视角" + }, + "morph": { + "key": "morph", + "oneDesc": "morph 动画配置" + }, + "regionIndex": { + "key": "regionIndex", + "oneDesc": "系列关联的region索引" + }, + "regionId": { + "key": "regionId", + "oneDesc": "系列关联的region id" + }, + "drill": { + "key": "drill", + "oneDesc": "下钻功能开关" + }, + "totalLabel": { + "key": "totalLabel", + "oneDesc": "堆叠汇总标签" + }, + "animationAppear": { + "key": "animationAppear", + "oneDesc": "图表入场动画\n支持配置图表内置不同动画效果" + }, + "animationDisappear": { + "key": "animationDisappear", + "oneDesc": "图表退场动画" + }, + "animationNormal": { + "key": "animationNormal", + "oneDesc": "循环动画" + }, + "categoryField": { + "key": "categoryField", + "oneDesc": "文本字段" + }, + "label": { + "key": "label", + "oneDesc": "叶子节点标签样式配置，默认不显示" + }, + "nonLeaf": { + "key": "nonLeaf", + "oneDesc": "非叶子节点样式配置" + }, + "leaf": { + "key": "leaf", + "oneDesc": "叶子节点样式配置" + }, + "nonLeafLabel": { + "key": "nonLeafLabel", + "oneDesc": "非叶子节点标签样式配置，默认不显示" + }, + "dataId": { + "key": "dataId", + "oneDesc": "系列关联的数据id" + }, + "dataKey": { + "key": "dataKey", + "oneDesc": "dataKey用于绑定数据与Mark的关系, 该配置在动画中非常重要." + }, + "seriesField": { + "key": "seriesField", + "oneDesc": "分组字段" + }, + "stackValue": { + "key": "stackValue", + "oneDesc": "堆叠时的分组值\nstackValue 相等的系列将在一起堆积。没有配置的系列将在一组" + }, + "stackOffsetSilhouette": { + "key": "stackOffsetSilhouette", + "oneDesc": "是否围绕中心轴偏移轮廓" + }, + "invalidType": { + "key": "invalidType", + "oneDesc": "null，undefined等非法数据点连接方式。" + }, + "extensionMark": { + "key": "extensionMark", + "oneDesc": "扩展mark" + }, + "interactions": { + "key": "interactions", + "oneDesc": "其他需要按需注册的类型交互" + }, + "drillField": { + "key": "drillField", + "oneDesc": "通过API进行钻取, 需要此配置项." + }, + "maxDepth": { + "key": "maxDepth", + "oneDesc": "当节点在层次数据中的深度大于 maxDepth 时，节点将不会被显示" + }, + "splitType": { + "key": "splitType", + "oneDesc": "'binary': 递归地将指定的节点分割成一个近似平衡的二叉树，对宽的矩形选择水平分割，对高的矩形选择垂直分割。\n\n'dice': 根据指定节点的每个子节点的值水平划分由x0, y0, x1, y1指定的矩形区域。子节点按顺序定位，从给定矩形\n 的左边缘（x0）开始。如果子节点的值之和小于指定节点的值（即，如果指定节点有一个非零的内部值），剩余的空位将被\n 定位在给定矩形的右边缘（x1）。\n\n'slice': 和'dice'类似，方向为竖直方向分割。\n\n'sliceDice': 节点奇数深度，用'slice'；节点偶数深度，用'dice'。\n\n'squarify': 尽可能按照一个特定长宽比的分割矩形。" + }, + "gapWidth": { + "key": "gapWidth", + "oneDesc": "节点间距" + }, + "nodePadding": { + "key": "nodePadding", + "oneDesc": "节点内边距" + }, + "minVisibleArea": { + "key": "minVisibleArea", + "oneDesc": "当区域面积（px * px）小于设定值后，节点将被隐藏" + }, + "minChildrenVisibleArea": { + "key": "minChildrenVisibleArea", + "oneDesc": "当区域面积（px * px）小于设定值后，节点的子节点将被隐藏" + }, + "minChildrenVisibleSize": { + "key": "minChildrenVisibleSize", + "oneDesc": "当区域宽或高（px）小于设定值后，节点的子节点将被隐藏" + }, + "roam": { + "key": "roam", + "oneDesc": "是否开启拖拽和缩放" + } +} \ No newline at end of file diff --git a/skills/vchart-development-skill/references/topkey/venn.json b/skills/vchart-development-skill/references/topkey/venn.json new file mode 100644 index 0000000000..f9ff5d1bd1 --- /dev/null +++ b/skills/vchart-development-skill/references/topkey/venn.json @@ -0,0 +1,126 @@ +{ + "padding": { + "key": "padding", + "oneDesc": "布局 padding的配置" + }, + "percent": { + "key": "percent", + "oneDesc": "是否对数据进行百分比处理" + }, + "name": { + "key": "name", + "oneDesc": "系列名称" + }, + "id": { + "key": "id", + "oneDesc": "用户自定义的 series id" + }, + "animation": { + "key": "animation", + "oneDesc": "是否开启系列动画" + }, + "stack": { + "key": "stack", + "oneDesc": "是否对数据进行堆叠处理" + }, + "animationEnter": { + "key": "animationEnter", + "oneDesc": "数据更新 - 新增数据动画" + }, + "animationUpdate": { + "key": "animationUpdate", + "oneDesc": "数据更新 - 数据更新动画" + }, + "animationExit": { + "key": "animationExit", + "oneDesc": "数据更新 - 数据删除动画" + }, + "dataIndex": { + "key": "dataIndex", + "oneDesc": "系列关联的数据索引" + }, + "valueField": { + "key": "valueField", + "oneDesc": "权重字段" + }, + "animationState": { + "key": "animationState", + "oneDesc": "状态切换动画" + }, + "support3d": { + "key": "support3d", + "oneDesc": "是否支持3d视角" + }, + "regionIndex": { + "key": "regionIndex", + "oneDesc": "系列关联的region索引" + }, + "regionId": { + "key": "regionId", + "oneDesc": "系列关联的region id" + }, + "totalLabel": { + "key": "totalLabel", + "oneDesc": "堆叠汇总标签" + }, + "animationAppear": { + "key": "animationAppear", + "oneDesc": "图表入场动画\n支持配置图表内置不同动画效果" + }, + "animationDisappear": { + "key": "animationDisappear", + "oneDesc": "图表退场动画" + }, + "animationNormal": { + "key": "animationNormal", + "oneDesc": "循环动画" + }, + "categoryField": { + "key": "categoryField", + "oneDesc": "类别字段" + }, + "label": { + "key": "label", + "oneDesc": "圆形图元标签配置" + }, + "circle": { + "key": "circle", + "oneDesc": "圆形图元配置.同时可以配置选中，hover等交互状态下的图元和鼠标的样式" + }, + "overlap": { + "key": "overlap", + "oneDesc": "重叠部分图元配置" + }, + "overlapLabel": { + "key": "overlapLabel", + "oneDesc": "重叠部分图元标签配置" + }, + "dataId": { + "key": "dataId", + "oneDesc": "系列关联的数据id" + }, + "dataKey": { + "key": "dataKey", + "oneDesc": "dataKey用于绑定数据与Mark的关系, 该配置在动画中非常重要." + }, + "seriesField": { + "key": "seriesField", + "oneDesc": "分组字段" + }, + "stackOffsetSilhouette": { + "key": "stackOffsetSilhouette", + "oneDesc": "是否围绕中心轴偏移轮廓" + }, + "invalidType": { + "key": "invalidType", + "oneDesc": "null，undefined等非法数据点连接方式。" + }, + "extensionMark": { + "key": "extensionMark", + "oneDesc": "扩展mark" + }, + "interactions": { + "key": "interactions", + "oneDesc": "其他需要按需注册的类型交互" + } +} \ No newline at end of file diff --git a/skills/vchart-development-skill/references/topkey/waterfall.json b/skills/vchart-development-skill/references/topkey/waterfall.json new file mode 100644 index 0000000000..33ba3bcc91 --- /dev/null +++ b/skills/vchart-development-skill/references/topkey/waterfall.json @@ -0,0 +1,218 @@ +{ + "direction": { + "key": "direction", + "oneDesc": "图表的方向配置。\n- 'vertical' 垂直布局，即常见的直角坐标系布局，x 轴位于底部，y 轴位于左侧。\n- 'horizontal' 水平布局，可理解为 x 轴和 y 轴位置互换。" + }, + "markLine": { + "key": "markLine", + "oneDesc": "参考线配置" + }, + "markArea": { + "key": "markArea", + "oneDesc": "参考区域配置" + }, + "markPoint": { + "key": "markPoint", + "oneDesc": "参考点配置" + }, + "padding": { + "key": "padding", + "oneDesc": "布局 padding的配置" + }, + "percent": { + "key": "percent", + "oneDesc": "是否对数据进行百分比处理" + }, + "name": { + "key": "name", + "oneDesc": "系列名称" + }, + "id": { + "key": "id", + "oneDesc": "用户自定义的 series id" + }, + "total": { + "key": "total", + "oneDesc": "总计配置" + }, + "animation": { + "key": "animation", + "oneDesc": "是否开启系列动画" + }, + "stack": { + "key": "stack", + "oneDesc": "是否对数据进行堆叠处理" + }, + "animationEnter": { + "key": "animationEnter", + "oneDesc": "数据更新 - 新增数据动画" + }, + "animationUpdate": { + "key": "animationUpdate", + "oneDesc": "数据更新 - 数据更新动画" + }, + "animationExit": { + "key": "animationExit", + "oneDesc": "数据更新 - 数据删除动画" + }, + "dataIndex": { + "key": "dataIndex", + "oneDesc": "系列关联的数据索引" + }, + "sampling": { + "key": "sampling", + "oneDesc": "数据采样 - 采样方法" + }, + "animationState": { + "key": "animationState", + "oneDesc": "状态切换动画" + }, + "large": { + "key": "large", + "oneDesc": "是否开启大数据渲染模式，开启后会降低渲染的精度" + }, + "largeThreshold": { + "key": "largeThreshold", + "oneDesc": "开启大数据渲染优化的阀值，对应的是data的长度;推荐 largeThreshold < progressiveThreshold" + }, + "progressiveStep": { + "key": "progressiveStep", + "oneDesc": "分片长度" + }, + "progressiveThreshold": { + "key": "progressiveThreshold", + "oneDesc": "开启分片渲染的阀值，对应的是单系列data的长度" + }, + "support3d": { + "key": "support3d", + "oneDesc": "是否支持3d视角" + }, + "regionIndex": { + "key": "regionIndex", + "oneDesc": "系列关联的region索引" + }, + "regionId": { + "key": "regionId", + "oneDesc": "系列关联的region id" + }, + "totalLabel": { + "key": "totalLabel", + "oneDesc": "堆叠汇总标签" + }, + "animationAppear": { + "key": "animationAppear", + "oneDesc": "图表入场动画\n支持配置图表内置不同动画效果" + }, + "animationDisappear": { + "key": "animationDisappear", + "oneDesc": "图表退场动画" + }, + "animationNormal": { + "key": "animationNormal", + "oneDesc": "循环动画" + }, + "xField": { + "key": "xField", + "oneDesc": "x轴字段" + }, + "yField": { + "key": "yField", + "oneDesc": "y轴字段" + }, + "label": { + "key": "label", + "oneDesc": "标签配置" + }, + "bar": { + "key": "bar", + "oneDesc": "柱图图元样式配置.同时可以配置选中，hover等交互状态下的柱子和对应鼠标的样式" + }, + "leaderLine": { + "key": "leaderLine", + "oneDesc": "引导线配置" + }, + "stackLabel": { + "key": "stackLabel", + "oneDesc": "堆积值标签配置" + }, + "barBackground": { + "key": "barBackground", + "oneDesc": "柱图中每根柱子背后的背景图元配置.同时可以配置选中，hover等交互状态下的背景图元和对应鼠标的样式" + }, + "barWidth": { + "key": "barWidth", + "oneDesc": "柱体宽度，可以设置绝对的像素值，也可以使用百分比（如 '10%'）\n1. number 类型，表示像素值\n2. string 类型，百分比用法，如 '10%'，该值为对应最后一个分组字段对应的 scale 的 bandWidth 占比(因为柱子是等宽的，所以采用最后一层分组的 scale)" + }, + "barMinWidth": { + "key": "barMinWidth", + "oneDesc": "柱体最小宽度，可以设置绝对的像素值，也可以使用百分比（如 '10%'）\n1. number 类型，表示像素值\n2. string 类型，百分比用法，如 '10%'，该值为对应最后一个分组字段对应的 scale 的 bandWidth 占比(因为柱子是等宽的，所以采用最后一层分组的 scale)" + }, + "barMaxWidth": { + "key": "barMaxWidth", + "oneDesc": "柱体最大宽度，可以设置绝对的像素值，也可以使用百分比（如 '10%'）\n1. number 类型，表示像素值\n2. string 类型，百分比用法，如 '10%'，该值为对应最后一个分组字段对应的 scale 的 bandWidth 占比(因为柱子是等宽的，所以采用最后一层分组的 scale)" + }, + "barGapInGroup": { + "key": "barGapInGroup", + "oneDesc": "分组柱图中各个分组内的柱子间距，可以设置绝对的像素值，也可以使用百分比（如 '10%'）。\n当存在多层分组时，可以使用数组来设置不同层级的间距，如 [10, '20%']，表示第一层分组的间距为 10px，第二层分组的间距为 '20%'。\n如果 barGapInGroup 的数组个数小于分组层数，则后面的分组间距使用最后一个值。\n1. number 类型，表示像素值\n2. string 类型，百分比用法，如 '10%'，该值为对应最后一个分组字段对应的 scale 的 bandWidth 占比(因为柱子是等宽的，所以采用最后一层分组的 scale)" + }, + "barMinHeight": { + "key": "barMinHeight", + "oneDesc": "柱条最小高度，可用于防止某数据项的值过小的视觉调整。" + }, + "stackCornerRadius": { + "key": "stackCornerRadius", + "oneDesc": "堆叠柱整体的圆角" + }, + "x2Field": { + "key": "x2Field", + "oneDesc": "用于区间数据，声明区间末尾的数据字段。" + }, + "y2Field": { + "key": "y2Field", + "oneDesc": "用于区间数据，声明区间末尾的数据字段。" + }, + "zField": { + "key": "zField", + "oneDesc": "z轴字段\n用于3d散点图等" + }, + "sortDataByAxis": { + "key": "sortDataByAxis", + "oneDesc": "是否将数据按照数轴排序" + }, + "dataId": { + "key": "dataId", + "oneDesc": "系列关联的数据id" + }, + "dataKey": { + "key": "dataKey", + "oneDesc": "dataKey用于绑定数据与Mark的关系, 该配置在动画中非常重要." + }, + "seriesField": { + "key": "seriesField", + "oneDesc": "分组字段" + }, + "stackOffsetSilhouette": { + "key": "stackOffsetSilhouette", + "oneDesc": "是否围绕中心轴偏移轮廓" + }, + "invalidType": { + "key": "invalidType", + "oneDesc": "null，undefined等非法数据点连接方式。" + }, + "extensionMark": { + "key": "extensionMark", + "oneDesc": "扩展mark" + }, + "interactions": { + "key": "interactions", + "oneDesc": "其他需要按需注册的类型交互" + }, + "activePoint": { + "key": "activePoint", + "oneDesc": "是否使用额外的 activePoint 显示交互点，可以在点隐藏时显示被交互的点" + }, + "samplingFactor": { + "key": "samplingFactor", + "oneDesc": "数据采样 - 采样系数" + } +} \ No newline at end of file diff --git a/skills/vchart-development-skill/references/topkey/wordCloud.json b/skills/vchart-development-skill/references/topkey/wordCloud.json new file mode 100644 index 0000000000..7cc2953622 --- /dev/null +++ b/skills/vchart-development-skill/references/topkey/wordCloud.json @@ -0,0 +1,178 @@ +{ + "padding": { + "key": "padding", + "oneDesc": "布局 padding的配置" + }, + "percent": { + "key": "percent", + "oneDesc": "是否对数据进行百分比处理" + }, + "name": { + "key": "name", + "oneDesc": "系列名称" + }, + "id": { + "key": "id", + "oneDesc": "用户自定义的 series id" + }, + "animation": { + "key": "animation", + "oneDesc": "是否开启系列动画" + }, + "stack": { + "key": "stack", + "oneDesc": "是否对数据进行堆叠处理" + }, + "animationEnter": { + "key": "animationEnter", + "oneDesc": "数据更新 - 新增数据动画" + }, + "animationUpdate": { + "key": "animationUpdate", + "oneDesc": "数据更新 - 数据更新动画" + }, + "animationExit": { + "key": "animationExit", + "oneDesc": "数据更新 - 数据删除动画" + }, + "dataIndex": { + "key": "dataIndex", + "oneDesc": "系列关联的数据索引" + }, + "random": { + "key": "random", + "oneDesc": "是否开始随机摆放方向(顺时针｜逆时针), 主要用于spec测试" + }, + "valueField": { + "key": "valueField", + "oneDesc": "权重字段" + }, + "animationState": { + "key": "animationState", + "oneDesc": "状态切换动画" + }, + "support3d": { + "key": "support3d", + "oneDesc": "是否支持3d视角" + }, + "regionIndex": { + "key": "regionIndex", + "oneDesc": "系列关联的region索引" + }, + "regionId": { + "key": "regionId", + "oneDesc": "系列关联的region id" + }, + "totalLabel": { + "key": "totalLabel", + "oneDesc": "堆叠汇总标签" + }, + "animationAppear": { + "key": "animationAppear", + "oneDesc": "图表入场动画\n支持配置图表内置不同动画效果" + }, + "animationDisappear": { + "key": "animationDisappear", + "oneDesc": "图表退场动画" + }, + "animationNormal": { + "key": "animationNormal", + "oneDesc": "循环动画" + }, + "word": { + "key": "word", + "oneDesc": "具体一个词的样式配置。同时可以配置同时可以配置选中，hover等交互状态下的背景图元和对应鼠标的样式" + }, + "fillingWord": { + "key": "fillingWord", + "oneDesc": "不增加formatMethod的原因：形状词云在做布局时，word和fillingWord用的是同一份数据，即text相同，所以fillingWords的format不会生效" + }, + "wordMask": { + "key": "wordMask", + "oneDesc": "当形状词云的形状为文字类型和几何形状类型的时候，支持绘制形状轮廓" + }, + "dataId": { + "key": "dataId", + "oneDesc": "系列关联的数据id" + }, + "dataKey": { + "key": "dataKey", + "oneDesc": "dataKey用于绑定数据与Mark的关系, 该配置在动画中非常重要." + }, + "seriesField": { + "key": "seriesField", + "oneDesc": "分组字段" + }, + "stackOffsetSilhouette": { + "key": "stackOffsetSilhouette", + "oneDesc": "是否围绕中心轴偏移轮廓" + }, + "invalidType": { + "key": "invalidType", + "oneDesc": "null，undefined等非法数据点连接方式。" + }, + "extensionMark": { + "key": "extensionMark", + "oneDesc": "扩展mark" + }, + "interactions": { + "key": "interactions", + "oneDesc": "其他需要按需注册的类型交互" + }, + "nameField": { + "key": "nameField", + "oneDesc": "文本字段" + }, + "fontFamilyField": { + "key": "fontFamilyField", + "oneDesc": "字体字段" + }, + "fontWeightField": { + "key": "fontWeightField", + "oneDesc": "字重字段" + }, + "fontStyleField": { + "key": "fontStyleField", + "oneDesc": "字体样式字段" + }, + "colorHexField": { + "key": "colorHexField", + "oneDesc": "直接指定 hex 颜色字段" + }, + "colorMode": { + "key": "colorMode", + "oneDesc": "颜色模式\nTODO: 'linear' 待支持" + }, + "colorList": { + "key": "colorList", + "oneDesc": "颜色列表,用于对核心词颜色的映射处理" + }, + "rotateAngles": { + "key": "rotateAngles", + "oneDesc": "可旋转角度 随机取范围" + }, + "fontWeightRange": { + "key": "fontWeightRange", + "oneDesc": "字重范围" + }, + "fontSizeRange": { + "key": "fontSizeRange", + "oneDesc": "当valueField存在时，默认值[20,40]; 当valueField不存在时，默认值[10, 10]" + }, + "maskShape": { + "key": "maskShape", + "oneDesc": "词云形状" + }, + "keepAspect": { + "key": "keepAspect", + "oneDesc": "TODO: 缩放mask时是否保持比例" + }, + "wordCloudConfig": { + "key": "wordCloudConfig", + "oneDesc": "词云特殊配置" + }, + "wordCloudShapeConfig": { + "key": "wordCloudShapeConfig", + "oneDesc": "形状词云特殊配置，包括填充(边缘)词云的颜色等" + } +} \ No newline at end of file diff --git a/skills/vchart-development-skill/references/topkey/wordCloud3d.json b/skills/vchart-development-skill/references/topkey/wordCloud3d.json new file mode 100644 index 0000000000..520e17f49d --- /dev/null +++ b/skills/vchart-development-skill/references/topkey/wordCloud3d.json @@ -0,0 +1,184 @@ +{ + "padding": { + "key": "padding", + "oneDesc": "布局 padding的配置" + }, + "percent": { + "key": "percent", + "oneDesc": "是否对数据进行百分比处理" + }, + "name": { + "key": "name", + "oneDesc": "系列名称" + }, + "id": { + "key": "id", + "oneDesc": "用户自定义的 series id" + }, + "animation": { + "key": "animation", + "oneDesc": "是否开启系列动画" + }, + "stack": { + "key": "stack", + "oneDesc": "是否对数据进行堆叠处理" + }, + "animationEnter": { + "key": "animationEnter", + "oneDesc": "数据更新 - 新增数据动画" + }, + "animationUpdate": { + "key": "animationUpdate", + "oneDesc": "数据更新 - 数据更新动画" + }, + "animationExit": { + "key": "animationExit", + "oneDesc": "数据更新 - 数据删除动画" + }, + "dataIndex": { + "key": "dataIndex", + "oneDesc": "系列关联的数据索引" + }, + "random": { + "key": "random", + "oneDesc": "是否开始随机摆放方向(顺时针｜逆时针), 主要用于spec测试" + }, + "valueField": { + "key": "valueField", + "oneDesc": "权重字段" + }, + "animationState": { + "key": "animationState", + "oneDesc": "状态切换动画" + }, + "support3d": { + "key": "support3d", + "oneDesc": "是否支持3d视角" + }, + "regionIndex": { + "key": "regionIndex", + "oneDesc": "系列关联的region索引" + }, + "regionId": { + "key": "regionId", + "oneDesc": "系列关联的region id" + }, + "totalLabel": { + "key": "totalLabel", + "oneDesc": "堆叠汇总标签" + }, + "animationAppear": { + "key": "animationAppear", + "oneDesc": "图表入场动画\n支持配置图表内置不同动画效果" + }, + "animationDisappear": { + "key": "animationDisappear", + "oneDesc": "图表退场动画" + }, + "animationNormal": { + "key": "animationNormal", + "oneDesc": "循环动画" + }, + "word": { + "key": "word", + "oneDesc": "具体一个词的样式配置。同时可以配置同时可以配置选中，hover等交互状态下的背景图元和对应鼠标的样式" + }, + "fillingWord": { + "key": "fillingWord", + "oneDesc": "不增加formatMethod的原因：形状词云在做布局时，word和fillingWord用的是同一份数据，即text相同，所以fillingWords的format不会生效" + }, + "wordMask": { + "key": "wordMask", + "oneDesc": "当形状词云的形状为文字类型和几何形状类型的时候，支持绘制形状轮廓" + }, + "dataId": { + "key": "dataId", + "oneDesc": "系列关联的数据id" + }, + "dataKey": { + "key": "dataKey", + "oneDesc": "dataKey用于绑定数据与Mark的关系, 该配置在动画中非常重要." + }, + "seriesField": { + "key": "seriesField", + "oneDesc": "分组字段" + }, + "stackOffsetSilhouette": { + "key": "stackOffsetSilhouette", + "oneDesc": "是否围绕中心轴偏移轮廓" + }, + "invalidType": { + "key": "invalidType", + "oneDesc": "null，undefined等非法数据点连接方式。" + }, + "extensionMark": { + "key": "extensionMark", + "oneDesc": "扩展mark" + }, + "interactions": { + "key": "interactions", + "oneDesc": "其他需要按需注册的类型交互" + }, + "nameField": { + "key": "nameField", + "oneDesc": "文本字段" + }, + "fontFamilyField": { + "key": "fontFamilyField", + "oneDesc": "字体字段" + }, + "fontWeightField": { + "key": "fontWeightField", + "oneDesc": "字重字段" + }, + "fontStyleField": { + "key": "fontStyleField", + "oneDesc": "字体样式字段" + }, + "colorHexField": { + "key": "colorHexField", + "oneDesc": "直接指定 hex 颜色字段" + }, + "colorMode": { + "key": "colorMode", + "oneDesc": "颜色模式\nTODO: 'linear' 待支持" + }, + "colorList": { + "key": "colorList", + "oneDesc": "颜色列表" + }, + "rotateAngles": { + "key": "rotateAngles", + "oneDesc": "可旋转角度 随机取范围" + }, + "fontWeightRange": { + "key": "fontWeightRange", + "oneDesc": "字重范围" + }, + "fontSizeRange": { + "key": "fontSizeRange", + "oneDesc": "当valueField存在时，默认值[20,40]; 当valueField不存在时，默认值[10, 10]" + }, + "maskShape": { + "key": "maskShape", + "oneDesc": "词云形状" + }, + "keepAspect": { + "key": "keepAspect", + "oneDesc": "TODO: 缩放mask时是否保持比例" + }, + "wordCloudConfig": { + "key": "wordCloudConfig", + "oneDesc": "词云特殊配置" + }, + "wordCloudShapeConfig": { + "key": "wordCloudShapeConfig", + "oneDesc": "形状词云特殊配置" + }, + "depth_3d": { + "key": "depth_3d" + }, + "postProjection": { + "key": "postProjection" + } +} \ No newline at end of file diff --git a/skills/vchart-development-skill/references/type-details/FunctionType-Type-Definition.md b/skills/vchart-development-skill/references/type-details/FunctionType-Type-Definition.md new file mode 100644 index 0000000000..dd42484655 --- /dev/null +++ b/skills/vchart-development-skill/references/type-details/FunctionType-Type-Definition.md @@ -0,0 +1,178 @@ +## FunctionType Type Definition + +### Core Interface + +`FunctionType` 定义了VChart中用于动态计算样式属性的函数类型，支持基于数据和上下文的动态样式计算。 + +```typescript +type FunctionType = (datum: Datum, context: IModelMarkAttributeContext, source?: DataView) => T; +``` + +### Type Parameters + +#### Generic Type `T` +- 函数返回值的类型 +- 可以是任何有效的样式属性值类型 +- 常见类型包括：`string`、`number`、`boolean`、`IGradient`等 + +### Function Parameters + +#### datum: Datum +当前数据项，包含图形渲染所需的原始数据。 + +```typescript +type Datum = { + [key: string]: any; +}; +``` + +**使用说明：** +- 包含当前图形元素对应的数据记录 +- 可以访问数据的任意字段进行样式计算 +- 是样式函数中最常用的参数 + +#### context: IModelMarkAttributeContext +Mark元素的上下文信息，提供全局状态和计算能力。 + +```typescript +interface IModelMarkAttributeContext { + [key: string]: unknown; +} + +interface ISeriesMarkAttributeContext extends IModelMarkAttributeContext { + /** 全局比例尺访问函数 */ + globalScale: (scaleKey: string, value: string | number) => unknown; + /** 系列颜色获取函数 */ + seriesColor: (seriesValue?: string | number) => string; + /** 获取当前Region */ + getRegion: () => IRegion; +} +``` + +**主要功能：** +- `globalScale`: 访问全局比例尺进行数值映射 +- `seriesColor`: 获取系列对应的颜色值 +- `getRegion`: 获取当前图表区域信息 + +#### source?: DataView +可选的数据视图对象，来自`@visactor/vdataset`包。 + +```typescript +// 来自 @visactor/vdataset +interface DataView { + // 数据视图的具体实现 + // 提供数据操作和统计功能 +} +``` + +**使用场景：** +- 访问完整的数据集进行统计计算 +- 进行数据过滤和聚合操作 +- 获取数据的元信息 + +### 关联类型 + +#### ValueType +静态值类型，与`FunctionType`形成对比。 + +```typescript +type ValueType = T; +``` + +#### VisualType +组合类型，支持静态值、函数和可视化映射。 + +```typescript +type VisualType = ValueType | FunctionType | IVisual; +``` + +#### ConvertToMarkStyleSpec +样式转换工具类型，将静态样式转换为支持动态计算的样式。 + +```typescript +type ConvertToMarkStyleSpec> = { + [key in keyof T]: VisualType; +}; +``` + +### 使用场景 + +#### 动态颜色计算 +```typescript +const fill: FunctionType = (datum, context) => { + if (datum.value > 100) { + return context.seriesColor('high'); + } + return context.seriesColor('normal'); +}; +``` + +#### 基于数据的尺寸计算 +```typescript +const size: FunctionType = (datum, context) => { + const scale = context.globalScale('size', datum.count); + return scale as number; +}; +``` + +#### 条件样式应用 +```typescript +const opacity: FunctionType = (datum) => { + return datum.status === 'active' ? 1 : 0.5; +}; +``` + +#### 数据统计计算 +```typescript +const lineWidth: FunctionType = (datum, context, source) => { + if (source) { + const dataLength = source.latestData.length; + return dataLength > 1000 ? 1 : 2; + } + return 1; +}; +``` + +### 在VChart中的应用 + +#### Mark样式配置 +`FunctionType`广泛用于Mark元素的样式配置中： + +```typescript +interface IMarkSpec { + style?: ConvertToMarkStyleSpec; + // 其他属性... +} +``` + +#### 渐变属性计算 +在渐变配置中支持动态计算： + +```typescript +type GradientPropValue = ValueType | FunctionType; +``` + +#### 样式映射系统 +与VChart的视觉映射系统深度集成： + +```typescript +type MarkInputStyle = StyleConvert | VisualType; +type StyleConvert = ValueType | FunctionType | VisualScaleType; +``` + +### 性能考虑 + +#### 函数执行频率 +- 每个数据项渲染时都会调用函数 +- 在大数据集场景下需要注意性能优化 +- 避免在函数中进行复杂的计算操作 + +#### 上下文缓存 +- `context`对象在同一个渲染周期内保持稳定 +- 可以利用上下文进行计算结果缓存 +- 避免重复的比例尺计算 + +#### 数据访问优化 +- 优先使用`datum`参数获取数据 +- 仅在必要时访问`source`参数 +- 合理利用数据视图的统计功能 diff --git a/skills/vchart-development-skill/references/type-details/GeometricMaskShape-Type-Definition.md b/skills/vchart-development-skill/references/type-details/GeometricMaskShape-Type-Definition.md new file mode 100644 index 0000000000..c3999e6788 --- /dev/null +++ b/skills/vchart-development-skill/references/type-details/GeometricMaskShape-Type-Definition.md @@ -0,0 +1,146 @@ +# GeometricMaskShape Type Definition + +## Interface Definition + +```typescript +export interface GeometricMaskShape { + /** Specifies shape cloud generation based on geometric shape */ + type: 'geometric'; + /** + * Geometric shape type, supports: + * - 'triangleForward': Right arrow + * - 'triangle': Triangle + * - 'diamond': Diamond + * - 'square': Square + * - 'star': Star + * - 'cardioid': Heart + * - 'circle': Circle + * - 'pentagon': Pentagon + * - 'rect': Rectangle + */ + shape: string; + /** Whether to create hollow shape, filling only background area */ + hollow?: boolean; + /** Background color */ + backgroundColor?: string; + /** Fill color */ + fill?: string; +} +``` + +`GeometricMaskShape` is an interface for creating word cloud shapes based on predefined geometric forms. When used, it automatically creates a shape word cloud where the text layout conforms to the outline of the specified geometric shape. + +## Type Properties + +### Required Properties + +- **`type`** - `'geometric'` + - Type discriminator that specifies geometric shape-based generation + - Must be set to `'geometric'` to indicate geometric shape mask + +- **`shape`** - `string` + - Specifies the geometric shape type for the outline + - Accepts predefined shape names from the supported geometric shapes + - See GeometricShapeType for available values + +### Optional Properties + +- **`hollow`** - `boolean` (optional) + - Controls whether to create a hollow shape + - When `true`, only fills the background area, leaving the shape outline empty + - When `false` or undefined, fills the entire geometric shape + +- **`backgroundColor`** - `string` (optional) + - Background color for the geometric shape + - Applied to the area behind the shape outline + - Accepts any valid CSS color string + +- **`fill`** - `string` (optional) + - Fill color for the geometric shape outline + - Applied to the shape outline area when not hollow + - Accepts any valid CSS color string + +## Supported Geometric Shapes + +The `shape` property accepts the following predefined geometric shape types: + +- **`'triangleForward'`** - Right arrow shape +- **`'triangle'`** - Triangle shape +- **`'diamond'`** - Diamond shape +- **`'square'`** - Square shape +- **`'star'`** - Star shape +- **`'cardioid'`** - Heart shape +- **`'circle'`** - Circle shape +- **`'pentagon'`** - Pentagon shape +- **`'rect'`** - Rectangle shape (supported since version 1.9.3) + +## Usage Context + +`GeometricMaskShape` is used as part of a union type for the `maskShape` property in word cloud series: + +```typescript +maskShape?: string | WordCloudShapeType | TextShapeMask | GeometricMaskShape; +``` + +When a `GeometricMaskShape` object is provided as `maskShape`, the word cloud automatically switches to shape word cloud mode, where words are arranged to fill the outline of the specified geometric shape. + +## Related Types + +### WordCloudShapeType +Type for predefined shape names: + +```typescript +type WordCloudShapeType = keyof typeof shapes; +``` + +Includes the same shape names as supported by GeometricMaskShape. + +### TextShapeMask +Interface for text-based word cloud masks: + +```typescript +interface TextShapeMask { + type: 'text'; + text: string; + hollow?: boolean; + backgroundColor?: string; + fill?: string; + fontFamily?: string; + fontWeight?: string | number; + fontStyle?: string; + fontVariant?: string; +} +``` + +### GeometricShapeType +Union type representing available geometric shape names: + +```typescript +type GeometricShapeType = + | 'triangleForward' + | 'triangle' + | 'diamond' + | 'square' + | 'star' + | 'cardioid' + | 'circle' + | 'pentagon' + | 'rect'; +``` + +## Shape Configuration + +### Hollow vs Filled Shapes +- **Hollow shapes** (`hollow: true`): Only the background area is filled, creating an outline effect +- **Filled shapes** (`hollow: false`): The entire shape area is filled with words + +### Color Configuration +- **backgroundColor**: Controls the color behind the shape outline +- **fill**: Controls the color of the shape outline itself +- Both properties accept standard CSS color values (hex, rgb, rgba, named colors) + +## Dependencies + +- `@visactor/vlayouts` - External layout library providing the GeometricMaskShape interface +- VChart word cloud series interfaces for complete mask shape configuration +- Predefined geometric shape constants for shape validation diff --git a/skills/vchart-development-skill/references/type-details/IAnimationConfig-Type-Definition.md b/skills/vchart-development-skill/references/type-details/IAnimationConfig-Type-Definition.md new file mode 100644 index 0000000000..bb08683c44 --- /dev/null +++ b/skills/vchart-development-skill/references/type-details/IAnimationConfig-Type-Definition.md @@ -0,0 +1,343 @@ +## Overview + +`IAnimationConfig` is a union type for VChart animation configurations, supporting two main animation paradigms: + +```typescript +export type IAnimationConfig = IAnimationTimeline | IAnimationTypeConfig; +``` + +This type provides comprehensive animation control through either timeline-based orchestration or type-based configuration approaches. + +## Base Structure + +`IAnimationConfig` combines two distinct animation configuration approaches: + +```typescript +type IAnimationConfig = + | IAnimationTimeline // Timeline-based animation orchestration + | IAnimationTypeConfig; // Type-based animation configuration + +type IAnimationTypeConfig = + | TypeAnimationConfig // Type-specific animation + | ChannelAnimationConfig // Channel-based animation + | CommonAnimationConfigItem; // Basic animation configuration +``` + +## Timeline Animation Configuration (IAnimationTimeline) + +### Timeline Structure + +```typescript +interface IAnimationTimeline { + /** Timeline identifier for animation orchestration */ + id?: string; + + /** Time slices defining animation segments */ + timeSlices: IAnimationTimeSlice | IAnimationTimeSlice[]; + + /** Animation start time (can be negative) */ + startTime?: GraphicFunctionValueType; + + /** Total animation duration */ + totalTime?: GraphicFunctionValueType; + + /** Sequential execution delay */ + oneByOne?: GraphicFunctionValueType; + + /** Loop configuration: true (infinite) or positive integer (count) */ + loop?: GraphicFunctionValueType; + + /** Element partitioner for timeline separation */ + partitioner?: GraphicFunctionCallback; + + /** Element sorting within timeline */ + sort?: (datumA: any, datumB: any, graphicA: IGraphic, graphicB: IGraphic) => number; + + /** Animation execution control options */ + controlOptions?: IAnimationControlOptions; +} +``` + +### Time Slice Configuration + +```typescript +interface IAnimationTimeSlice { + /** Animation effects for this slice */ + effects: IAnimationEffect | IAnimationEffect[]; + + /** Slice duration */ + duration?: GraphicFunctionValueType; + + /** Delay before slice execution */ + delay?: GraphicFunctionValueType; + + /** Delay after slice completion */ + delayAfter?: GraphicFunctionValueType; +} +``` + +### Animation Effects + +```typescript +interface IAnimationEffect { + /** Animation type identifier */ + type?: string; + + /** Channel-based attribute animation */ + channel?: IAnimationChannelAttrs | string[]; + + /** Custom animation interpolator or constructor */ + custom?: IAnimationChannelInterpolator | IAnimationCustomConstructor; + + /** Custom animation parameters */ + customParameters?: GraphicFunctionValueType; + + /** Easing function type */ + easing?: EasingType; + + /** Animation effect options */ + options?: GraphicFunctionValueType; +} +``` + +## Type-Based Animation Configuration (IAnimationTypeConfig) + +### Type Animation Configuration + +```typescript +interface TypeAnimationConfig extends CommonAnimationConfigItem { + /** Animation type identifier */ + type: string; +} +``` + +### Channel Animation Configuration + +```typescript +interface ChannelAnimationConfig extends CommonAnimationConfigItem { + /** Channel attribute definitions */ + channel: IAnimationChannelAttrs | string[]; +} +``` + +### Common Animation Configuration + +```typescript +interface CommonAnimationConfigItem { + /** Custom interpolator or animation constructor */ + custom?: IAnimationChannelInterpolator | IAnimationCustomConstructor; + + /** Custom animation parameters */ + customParameters?: GraphicFunctionValueType; + + /** Easing function type */ + easing?: EasingType; + + /** Animation duration */ + duration?: GraphicFunctionValueType; + + /** Animation start delay */ + delay?: GraphicFunctionValueType; + + /** Delay after animation completion */ + delayAfter?: GraphicFunctionValueType; + + /** Sequential execution configuration */ + oneByOne?: GraphicFunctionValueType; + + /** Animation start time */ + startTime?: GraphicFunctionValueType; + + /** Total animation time */ + totalTime?: GraphicFunctionValueType; + + /** Loop configuration: true (infinite) or count */ + loop?: boolean | number; + + /** Animation effect options */ + options?: GraphicFunctionValueType; + + /** Animation execution control options */ + controlOptions?: IAnimationControlOptions; + + /** Apply animation only to element itself, ignore children */ + selfOnly?: boolean; +} +``` + +## Channel Animation Configuration + +### Channel Attributes + +```typescript +type IAnimationChannelAttrs = Record< + string, + { + /** Starting value or function */ + from?: any | IAnimationChannelFunction; + + /** Target value or function */ + to?: any | IAnimationChannelFunction; + } +>; + +type IAnimationChannelFunction = (datum: any, g: IGraphic, mark: IMark) => any; +``` + +## Animation Control Configuration + +### Control Options + +```typescript +interface IAnimationControlOptions { + /** Clear animation when state changes */ + stopWhenStateChange?: boolean; + + /** Apply initial animation state immediately */ + immediatelyApply?: boolean; + + /** Ignore loop animation in final attribute calculation */ + ignoreLoopFinalAttributes?: boolean; +} +``` + +## Function Value Types + +### Graphic Function Types + +```typescript +type GraphicFunctionCallback = (datum: any, g: IGraphic, params: any) => T; +type GraphicFunctionValueType = GraphicFunctionCallback | T; +``` + +### Animation Interpolator + +```typescript +type IAnimationChannelInterpolator = ( + ratio: number, + from: any, + to: any, + nextAttributes: any, + datum: any, + g: IGraphic, + parameters: IAnimationParameters +) => boolean | void; +``` + +### Custom Animation Constructor + +```typescript +interface IAnimationCustomConstructor { + new (from: any, to: any, duration: number, ease: EasingType, parameters?: any): ACustomAnimate; +} +``` + +## Animation Parameters + +### Animation Context + +```typescript +interface IAnimationParameters { + width: number; + height: number; + mark: IMark; + group: IMark | null; + elementIndex: number; + elementCount: number; + view: any; +} +``` + +### Animation States + +```typescript +enum AnimationStateEnum { + appear = 'appear', + disappear = 'disappear', + enter = 'enter', + update = 'update', + state = 'state', + exit = 'exit', + normal = 'normal', + none = 'none' +} + +type IAnimationState = keyof typeof AnimationStateEnum; +``` + +## Mark Animation Specification + +### Complete Mark Animation Configuration + +```typescript +interface MarkAnimationSpec { + /** Disappear animation */ + disappear?: IAnimationConfig | IAnimationConfig[]; + + /** Appear animation */ + appear?: IAnimationConfig | IAnimationConfig[]; + + /** Enter animation */ + enter?: IAnimationConfig | IAnimationConfig[]; + + /** Exit animation */ + exit?: IAnimationConfig | IAnimationConfig[]; + + /** Update animation */ + update?: IAnimationConfig | IAnimationConfig[]; + + /** Normal state animation */ + normal?: IAnimationConfig | IAnimationConfig[]; + + /** State transition animation */ + state?: IStateAnimationConfig; +} + +type MarkAnimationType = keyof MarkAnimationSpec; +``` + +### State Animation Configuration + +```typescript +interface IStateAnimationConfig { + /** State animation duration */ + duration?: number; + + /** State animation easing function */ + easing?: EasingType; +} +``` + +## Dependency Type Definitions + +### VRender Core Types + +```typescript +// From @visactor/vrender-core +type EasingType = string; // Easing function identifiers + +interface IGraphic { + // VRender graphic element interface +} +``` + +### VRender Animate Types + +```typescript +// From @visactor/vrender-animate +class ACustomAnimate { + // Custom animation class +} +``` + +### Mark Interface Types + +```typescript +interface IMark { + // VChart mark interface +} + +interface IMarkGraphic { + // Mark graphic interface +} +``` diff --git a/skills/vchart-development-skill/references/type-details/IArcLabelSpec-Type-Definition.md b/skills/vchart-development-skill/references/type-details/IArcLabelSpec-Type-Definition.md new file mode 100644 index 0000000000..cc9a6d92be --- /dev/null +++ b/skills/vchart-development-skill/references/type-details/IArcLabelSpec-Type-Definition.md @@ -0,0 +1,467 @@ +# IArcLabelSpec Type Definition + +## Overview + +```typescript +type IArcLabelSpec = Omit & { + // Arc label positioning + position?: 'outside' | 'inside' | 'inside-center'; // Label position relative to arc + + // Display rules + showRule?: 'all' | 'max' | 'min' | 'minAndMax' | 'headAndTail'; // Label content display rules + coverEnable?: boolean; // Allow label overlapping + rotate?: boolean; // Allow label rotation + + // Spacing configuration + spaceWidth?: number; // Gap between text and guide line + layoutArcGap?: number; // Gap between arc sector labels + centerOffset?: number; // Center point offset distance + + // Style configuration + style?: ITextMarkSpec; // Label text style + line?: IArcLabelLineSpec; // Guide line configuration + layout?: IArcLabelLayoutSpec; // Layout configuration + + // Inherited from ILabelSpec + formatMethod?: IFormatMethod<[text: string | string[], datum?: Datum]>; // Label format function + visible?: boolean; // Label visibility + zIndex?: number; // Layer index + interactive?: boolean; // Interaction capability + state?: IMarkStateFullSpec; // State-based styles +}; +``` + +## Guide Line Configuration + +```typescript +interface IArcLabelLineSpec extends Omit, 'customShape'> { + visible?: boolean; // Guide line visibility @default true + line1MinLength?: number; // Line1 segment minimum length @default 20 + line2MinLength?: number; // Line2 segment minimum length @default 10 + smooth?: boolean; // Smooth guide line curves @default false @since 1.4.0 + + // Custom guide line path function @since 1.11.11 + customShape?: ( + text: ITextGraphicAttribute, + attrs: Partial, + path: ICustomPath2D + ) => ICustomPath2D; +} +``` + +## Layout Configuration + +```typescript +interface IArcLabelLayoutSpec { + textAlign?: ArcLabelAlignType; // Label alignment method @default 'arc' + align?: ArcLabelAlignType; // @deprecated Use textAlign instead + strategy?: ArcLabelStrategyType; // Label layout strategy @default 'priority' + tangentConstraint?: boolean; // Enable tangent constraint @default true +} +``` + +## Arc Label Types + +```typescript +type ArcLabelPosition = 'outside' | 'inside' | 'inside-center'; +type ArcLabelShowRule = 'all' | 'max' | 'min' | 'minAndMax' | 'headAndTail'; +type ArcLabelAlignType = 'arc' | 'labelLine' | 'edge'; +type ArcLabelStrategyType = 'priority' | 'vertical' | 'none'; +``` + +## Format Method Type + +```typescript +type IFormatMethod = ( + ...args: T +) => ReturnType> | ReturnType>; + +type ITextFormatMethod = ( + ...args: T +) => ITextMarkSpec['text'] | { type: 'text'; text: ITextMarkSpec['text'] }; + +type IRichTextFormatMethod = (...args: T) => + | { + type: 'rich'; + text: IRichTextCharacter[]; + } + | IRichTextCharacter[]; + +interface IRichTextCharacter { + text: string; // Text content + fill?: string; // Text color + fontSize?: number; // Font size + fontFamily?: string; // Font family + fontWeight?: FontWeight; // Font weight + fontStyle?: FontStyle; // Font style + textDecoration?: 'none' | 'underline' | 'line-through'; // Text decoration + script?: 'normal' | 'sub' | 'super'; // Text script +} +``` + +```` + +## Format Method Type + +```typescript +type IFormatMethod = ( + ...args: T +) => ReturnType> | ReturnType>; + +type ITextFormatMethod = ( + ...args: T +) => ITextMarkSpec['text'] | { type: 'text'; text: ITextMarkSpec['text'] }; + +type IRichTextFormatMethod = (...args: T) => + | { + type: 'rich'; + text: IRichTextCharacter[]; + } + | IRichTextCharacter[]; + +interface IRichTextCharacter { + text: string; // Text content + fill?: string; // Text color + fontSize?: number; // Font size + fontFamily?: string; // Font family + fontWeight?: FontWeight; // Font weight + fontStyle?: FontStyle; // Font style + textDecoration?: 'none' | 'underline' | 'line-through'; // Text decoration + script?: 'normal' | 'sub' | 'super'; // Text script +} +```` + +**IFormatMethod 格式化方法：** +接收文本和数据参数，返回格式化后的文本内容或富文本配置。 + +## Arc Label Position Type + +```typescript +type ArcLabelPosition = 'outside' | 'inside' | 'inside-center'; +``` + +**ArcLabelPosition 弧形标签位置：** + +- `'outside'`: 标签位于扇形外部 +- `'inside'`: 标签位于扇形内部 +- `'inside-center'`: 标签位于扇形中心区域 + +## Show Rule Type + +```typescript +type ArcLabelShowRule = 'all' | 'max' | 'min' | 'minAndMax' | 'headAndTail'; +``` + +**ArcLabelShowRule 标签显示规则：** + +- `'all'`: 显示所有标签 +- `'max'`: 仅显示最大值标签 +- `'min'`: 仅显示最小值标签 +- `'minAndMax'`: 显示最大和最小值标签 +- `'headAndTail'`: 显示首尾标签 + +## Text Mark Specification + +```typescript +interface ITextMarkSpec extends IFillMarkSpec { + // Text content + text?: string | number | string[] | number[]; // Text content + dx?: number; // X offset + dy?: number; // Y offset + + // Typography + fontSize?: number | ITokenKey; // Font size + textAlign?: TextAlign; // Horizontal alignment + textBaseline?: TextBaseLine; // Vertical alignment + fontFamily?: string; // Font family + fontWeight?: FontWeight; // Font weight + fontStyle?: FontStyle; // Font style + + // Text processing + maxLineWidth?: number; // Maximum line width + ellipsis?: string; // Ellipsis character + suffixPosition?: 'start' | 'end' | 'middle'; // Suffix position + lineHeight?: number | string | ITokenKey; // Line height + direction?: 'horizontal' | 'vertical'; // Text direction + wordBreak?: 'break-word' | 'break-all' | 'keep-all'; // Word breaking + heightLimit?: number; // Height constraint + lineClamp?: number; // Line clamping + whiteSpace?: 'normal' | 'no-wrap'; // White space handling + + // Decorations + underline?: boolean; // Underline style + underlineDash?: number[]; // Underline dash pattern + underlineOffset?: number; // Underline offset + lineThrough?: boolean; // Strike-through style +} +``` + +## Typography Types + +```typescript +type TextAlign = 'left' | 'center' | 'right' | 'start' | 'end'; +type TextBaseLine = 'top' | 'hanging' | 'middle' | 'alphabetic' | 'ideographic' | 'bottom'; +type FontWeight = 'normal' | 'bold' | 'lighter' | 'bolder' | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900; +type FontStyle = 'normal' | 'italic' | 'oblique' | string; +``` + +## Guide Line Configuration + +```typescript +interface IArcLabelLineSpec extends Omit, 'customShape'> { + visible?: boolean; // Guide line visibility @default true + line1MinLength?: number; // Line1 segment minimum length @default 20 + line2MinLength?: number; // Line2 segment minimum length @default 10 + smooth?: boolean; // Smooth guide line curves @default false @since 1.4.0 + + // Custom guide line path function @since 1.11.11 + customShape?: ( + text: ITextGraphicAttribute, + attrs: Partial, + path: ICustomPath2D + ) => ICustomPath2D; + + // Inherited from IMarkSpec + id?: string | number; // Mark identifier + interactive?: boolean; // Interaction capability + zIndex?: number; // Layer order + style?: ConvertToMarkStyleSpec; // Line style + state?: IMarkStateFullSpec; // State configurations +} +``` + +**IArcLabelLineSpec 引导线配置：** +定义弧形标签引导线的样式和行为，包括线段长度、平滑度和自定义路径等。 + +## Layout Configuration + +```typescript +interface IArcLabelLayoutSpec { + textAlign?: ArcLabelAlignType; // Label alignment method @default 'arc' + align?: ArcLabelAlignType; // @deprecated Use textAlign instead + strategy?: ArcLabelStrategyType; // Label layout strategy @default 'priority' + tangentConstraint?: boolean; // Enable tangent constraint @default true +} +``` + +**IArcLabelLayoutSpec 布局配置：** +控制弧形标签的对齐方式、布局策略和切线约束等高级布局选项。 + +## Arc Label Alignment Type + +```typescript +type ArcLabelAlignType = 'arc' | 'labelLine' | 'edge'; +``` + +**ArcLabelAlignType 弧形标签对齐：** + +- `'arc'`: 与弧形曲率对齐 +- `'labelLine'`: 与引导线方向对齐 +- `'edge'`: 与扇形边缘对齐 + +## Arc Label Strategy Type + +```typescript +type ArcLabelStrategyType = 'priority' | 'vertical' | 'none'; +``` + +**ArcLabelStrategyType 布局策略：** + +- `'priority'`: 基于优先级的布局，包含重叠解决 +- `'vertical'`: 垂直对齐优化 +- `'none'`: 无自动布局调整 + +## Mark Specification Types + +```typescript +interface IMarkSpec { + id?: string | number; // Mark identifier + interactive?: boolean; // Interaction capability + zIndex?: number; // Layer order + visible?: boolean; // Visibility state + style?: ConvertToMarkStyleSpec; // Visual styles + state?: IMarkStateFullSpec; // State configurations + support3d?: boolean; // 3D rendering support + customShape?: (datum: any[], attrs: any, path: ICustomPath2D) => ICustomPath2D; // Custom geometry +} + +interface ILineMarkSpec extends ILineLikeMarkSpec { + lineCap?: LineStrokeCap; // Line cap style + lineJoin?: LineStrokeJoin; // Line join style + miterLimit?: number; // Miter limit + strokeBoundsBuffer?: number; // Stroke bounds buffer +} + +interface ILineLikeMarkSpec extends IFillMarkSpec { + curveType?: InterpolateType; // Interpolation type + defined?: boolean; // Point validity flag +} + +interface IFillMarkSpec extends ICommonSpec { + fill?: VisualType | IGradient | false | IColorKey; // Fill color + fillOpacity?: number; // Fill opacity + background?: IColor | HTMLImageElement | HTMLCanvasElement | null; // Background +} +``` + +## State Management Types + +```typescript +type IMarkStateFullSpec = { + hover?: IMarkStateSpec | IMarkStateStyleSpec; // Hover state + hover_reverse?: IMarkStateSpec | IMarkStateStyleSpec; // Non-hover state + selected?: IMarkStateSpec | IMarkStateStyleSpec; // Selected state + selected_reverse?: IMarkStateSpec | IMarkStateStyleSpec; // Non-selected state +}; + +type IMarkStateSpec = { + style?: ConvertToMarkStyleSpec; // State style + filter?: IMarkStateFilter; // State filter + level?: StateLevel; // State level +}; + +type IMarkStateStyleSpec = ConvertToMarkStyleSpec; + +type ConvertToMarkStyleSpec> = { + [key in keyof T]: VisualType; +}; +``` + +## Line Style Types + +```typescript +type LineStrokeCap = 'butt' | 'round' | 'square'; +type LineStrokeJoin = 'arcs' | 'bevel' | 'miter' | 'miter-clip' | 'round'; + +type InterpolateType = + | 'basis' + | 'bundle' + | 'cardinal' + | 'catmull-rom' + | 'linear' + | 'monotone-x' + | 'monotone-y' + | 'natural' + | 'step' + | 'step-after' + | 'step-before'; +``` + +## Visual Type System + +### Visual Mapping Types + +```typescript +type VisualType = ValueType | FunctionType | IVisual; + +type ValueType = T; +type FunctionType = (datum: Datum, context: IModelMarkAttributeContext, source?: DataView) => T; + +type IVisual = IVisualSpecStyle | IVisualScale; + +interface IVisualSpecStyle extends IVisualSpecBase { + /** Data field for mapping */ + field?: string; +} + +interface IVisualScale { + /** Scale ID reference */ + scale: string; + + /** Data field for mapping */ + field?: string; + + /** Domain change strategy @default 'none' */ + changeDomain?: 'none' | 'replace' | 'expand'; +} +``` + +### Gradient Types + +```typescript +type IGradient = IGradientLinear | IGradientRadial | IGradientConical; + +interface IGradientLinear { + gradient: 'linear'; + x0?: GradientPropValue; // Start x (0-1) + y0?: GradientPropValue; // Start y (0-1) + x1?: GradientPropValue; // End x (0-1) + y1?: GradientPropValue; // End y (0-1) + stops: GradientStop[]; +} + +interface IGradientRadial { + gradient: 'radial'; + r0?: GradientPropValue; // Start radius + x0?: GradientPropValue; // Start x + y0?: GradientPropValue; // Start y + x1?: GradientPropValue; // End x + y1?: GradientPropValue; // End y + r1?: GradientPropValue; // End radius + stops: GradientStop[]; +} + +interface IGradientConical { + gradient: 'conical'; + x?: GradientPropValue; // Center x + y?: GradientPropValue; // Center y + startAngle?: GradientPropValue; // Start angle + endAngle?: GradientPropValue; // End angle + stops: GradientStop[]; +} + +type GradientStop = { + offset: GradientPropValue; // 0-1 offset + color?: GradientPropValue; // Color + opacity?: number; // Opacity +}; + +type GradientPropValue = ValueType | FunctionType; +``` + +## Dependency Type Definitions + +### Theme and Color Types + +```typescript +interface IColorKey { + // Theme color key interface +} + +interface IColor { + // VRender color interface +} + +interface ITokenKey { + // Token theme key interface +} +``` + +### Context Types + +```typescript +interface IModelMarkAttributeContext { + // Mark attribute context for function evaluation +} + +interface Datum { + // Data record interface + [key: string]: any; +} + +interface ITextGraphicAttribute { + // Text rendering attributes from @visactor/vrender-core +} + +interface ILineGraphicAttribute { + // Line rendering attributes from @visactor/vrender-core +} + +interface ICustomPath2D { + // Path construction interface from @visactor/vrender-core +} + +interface ICommonSpec { + // Common mark specification interface +} +``` diff --git a/skills/vchart-development-skill/references/type-details/IArcMarkSpec-Type-Definition.md b/skills/vchart-development-skill/references/type-details/IArcMarkSpec-Type-Definition.md new file mode 100644 index 0000000000..4ea25fa03a --- /dev/null +++ b/skills/vchart-development-skill/references/type-details/IArcMarkSpec-Type-Definition.md @@ -0,0 +1,211 @@ +## Type Definition + +```typescript +interface IArcMarkSpec { + // Arc-specific properties + startAngle?: number; + endAngle?: number; + padAngle?: number; + outerRadius?: number; + innerRadius?: number; + cornerRadius?: number; + innerPadding?: number; + outerPadding?: number; + centerOffset?: number; + cap?: boolean | [boolean, boolean]; + autoCapConical?: boolean; + + // Inherited from IFillMarkSpec + fill?: VisualType | IGradient | false | IColorKey; + fillOpacity?: number; + background?: IColor | HTMLImageElement | HTMLCanvasElement | null; + + // Inherited from ICommonSpec + visible?: boolean; + x?: number; + y?: number; + z?: number; + stroke?: string | IGradient | false | (number | boolean)[] | IColorKey | null; + strokeOpacity?: number; + opacity?: number; + lineWidth?: number; + lineDash?: number[]; + lineDashOffset?: number; + cursor?: Cursor; + zIndex?: number; + angle?: number; + anchor?: [number, number]; + scaleX?: number; + scaleY?: number; + scaleCenter?: [number | string, number | string]; + alpha?: number; + beta?: number; + anchor3d?: [number, number]; + pickMode?: 'accurate' | 'imprecise' | 'custom'; + boundsMode?: 'accurate' | 'imprecise'; + pickStrokeBuffer?: number; + texture?: TextureType | string; + textureColor?: string; + textureSize?: number; + texturePadding?: number; + outerBorder?: IBorder; + innerBorder?: IBorder; + html?: IMarkHtmlSpec; + [key: string]: any; +} +``` + +## Related Types + +### IFillMarkSpec + +```typescript +interface IFillMarkSpec extends ICommonSpec { + fill?: VisualType | IGradient | false | IColorKey; + fillOpacity?: number; + background?: IColor | HTMLImageElement | HTMLCanvasElement | null; +} +``` + +### VisualType + +```typescript +type VisualType = ValueType | FunctionType | IVisual; +``` + +### IGradient + +Union type supporting linear, radial, and conical gradients: + +```typescript +type IGradient = IGradientLinear | IGradientRadial | IGradientConical; +``` + +### IGradientLinear + +```typescript +interface IGradientLinear { + x0?: GradientPropValue; + y0?: GradientPropValue; + x1?: GradientPropValue; + y1?: GradientPropValue; + stops: GradientStop[]; + gradient: 'linear'; +} +``` + +### IGradientRadial + +```typescript +interface IGradientRadial { + r0?: GradientPropValue; + x0?: GradientPropValue; + y0?: GradientPropValue; + x1?: GradientPropValue; + y1?: GradientPropValue; + r1?: GradientPropValue; + stops: GradientStop[]; + gradient: 'radial'; +} +``` + +### IGradientConical + +```typescript +interface IGradientConical { + x?: GradientPropValue; + y?: GradientPropValue; + startAngle?: GradientPropValue; + endAngle?: GradientPropValue; + stops: GradientStop[]; + gradient: 'conical'; +} +``` + +### GradientStop + +```typescript +type GradientStop = { + offset: GradientPropValue; + color?: GradientPropValue; + opacity?: number; +}; +``` + +### GradientPropValue + +```typescript +type GradientPropValue = ValueType | FunctionType; +``` + +### IColorKey + +Theme-based color token reference for consistent color schemes. + +### IColor + +```typescript +type IColor = string; +``` + +### TextureType + +```typescript +type TextureType = 'circle' | 'dimond' | 'rect' | 'vertical-line' | 'horizontal-line' | 'bias-lr' | 'bias-rl' | 'grid'; +``` + +### IBorder + +```typescript +interface IBorder { + distance: number | string; + stroke?: string | IGradient; + strokeOpacity?: number; + lineWidth?: number; + lineDash?: number[]; + lineDashOffset?: number; +} +``` + +### IMarkHtmlSpec + +```typescript +type IMarkHtmlSpec = Partial; +``` + +### IGraphicStyle + +```typescript +interface IGraphicStyle { + html?: { + anchorType?: 'position' | 'boundsLeftTop' | 'boundsRightTop' | 'boundsLeftBottom' | 'boundsRightBottom'; + element?: string | HTMLElement; + style?: Partial; + pointerEvents?: boolean; + container?: HTMLElement; + }; + [key: string]: any; +} +``` + +### Cursor + +Type defining available cursor styles for interactive elements. + +### ValueType + +```typescript +type ValueType = T; +``` + +### FunctionType + +```typescript +type FunctionType = (datum: Datum, context: IModelMarkAttributeContext, source?: DataView) => T; +``` + +### IVisual + +```typescript +type IVisual = IVisualSpecStyle | IVisualScale; +``` diff --git a/skills/vchart-development-skill/references/type-details/IAreaMarkSpec-Type-Definition.md b/skills/vchart-development-skill/references/type-details/IAreaMarkSpec-Type-Definition.md new file mode 100644 index 0000000000..de37c6b0d9 --- /dev/null +++ b/skills/vchart-development-skill/references/type-details/IAreaMarkSpec-Type-Definition.md @@ -0,0 +1,277 @@ +# IAreaMarkSpec Type Definition + +## Overview + +```typescript +interface IAreaMarkSpec extends ILineLikeMarkSpec { + // Area-specific properties + x1?: number; // X-direction end coordinate + y1?: number; // Y-direction end coordinate + orient?: 'horizontal' | 'vertical'; // Area orientation + + // Inherited from ILineLikeMarkSpec + curveType?: InterpolateType; // Interpolation type + defined?: boolean; // Point validity flag + + // Inherited from IFillMarkSpec + fill?: VisualType | IGradient | false | IColorKey; // Fill color + fillOpacity?: number; // Fill opacity + background?: IColor | HTMLImageElement | HTMLCanvasElement | null; // Background + + // Inherited from ICommonSpec + visible?: boolean; // Visibility + x?: number; // X coordinate + y?: number; // Y coordinate + z?: number; // Z coordinate (3D) + stroke?: string | IGradient | false | (number | boolean)[] | IColorKey | null; // Stroke color + strokeOpacity?: number; // Stroke opacity + opacity?: number; // Overall opacity + lineWidth?: number; // Stroke width + lineDash?: number[]; // Dash pattern + lineDashOffset?: number; // Dash offset + cursor?: Cursor; // Mouse cursor + zIndex?: number; // Layer index + angle?: number; // Rotation angle + anchor?: [number, number]; // Anchor point + scaleX?: number; // X-scale factor + scaleY?: number; // Y-scale factor + scaleCenter?: [number | string, number | string]; // Scale center + + // 3D properties + alpha?: number; // X-direction rotation + beta?: number; // Y-direction rotation + anchor3d?: [number, number]; // 3D anchor point + + // Interaction properties + pickMode?: 'accurate' | 'imprecise' | 'custom'; + boundsMode?: 'accurate' | 'imprecise'; + pickStrokeBuffer?: number; // Stroke pick buffer + + // Texture properties + texture?: TextureType | string; // Texture type + textureColor?: string; // Texture color + textureSize?: number; // Texture size + texturePadding?: number; // Texture padding + + // Border properties + outerBorder?: IBorder; // Outer border + innerBorder?: IBorder; // Inner border + + // HTML overlay + html?: IMarkHtmlSpec; // HTML overlay +} +``` + +## Area Orientation Type + +```typescript +type AreaOrientation = 'horizontal' | 'vertical'; +``` + +**AreaOrientation 面积方向：** + +- `'horizontal'`: 水平方向面积图 +- `'vertical'`: 垂直方向面积图 + +## Interpolation Type + +```typescript +type InterpolateType = + | 'basis' + | 'bundle' + | 'cardinal' + | 'catmull-rom' + | 'linear' + | 'monotone-x' + | 'monotone-y' + | 'natural' + | 'step' + | 'step-after' + | 'step-before'; +``` + +**InterpolateType 插值类型：** +定义面积边界线的插值算法，控制面积图的边界形状。 + +## Texture Type + +```typescript +type TextureType = 'circle' | 'dimond' | 'rect' | 'vertical-line' | 'horizontal-line' | 'bias-lr' | 'bias-rl' | 'grid'; +``` + +## Border Configuration + +```typescript +interface IBorder { + /** Distance from shape edge */ + distance: number | string; + + /** Border color */ + stroke?: string | IGradient; + + /** Border opacity */ + strokeOpacity?: number; + + /** Border width */ + lineWidth?: number; + + /** Border dash pattern */ + lineDash?: number[]; + + /** Border dash offset */ + lineDashOffset?: number; +} +``` + +## Visual Type System + +### Visual Mapping Types + +```typescript +type VisualType = ValueType | FunctionType | IVisual; + +type ValueType = T; +type FunctionType = (datum: Datum, context: IModelMarkAttributeContext, source?: DataView) => T; + +type IVisual = IVisualSpecStyle | IVisualScale; + +interface IVisualSpecStyle extends IVisualSpecBase { + /** Data field for mapping */ + field?: string; +} + +interface IVisualScale { + /** Scale ID reference */ + scale: string; + + /** Data field for mapping */ + field?: string; + + /** Domain change strategy @default 'none' */ + changeDomain?: 'none' | 'replace' | 'expand'; +} +``` + +### Gradient Types + +```typescript +type IGradient = IGradientLinear | IGradientRadial | IGradientConical; + +interface IGradientLinear { + gradient: 'linear'; + x0?: GradientPropValue; // Start x (0-1) + y0?: GradientPropValue; // Start y (0-1) + x1?: GradientPropValue; // End x (0-1) + y1?: GradientPropValue; // End y (0-1) + stops: GradientStop[]; +} + +interface IGradientRadial { + gradient: 'radial'; + r0?: GradientPropValue; // Start radius + x0?: GradientPropValue; // Start x + y0?: GradientPropValue; // Start y + x1?: GradientPropValue; // End x + y1?: GradientPropValue; // End y + r1?: GradientPropValue; // End radius + stops: GradientStop[]; +} + +interface IGradientConical { + gradient: 'conical'; + x?: GradientPropValue; // Center x + y?: GradientPropValue; // Center y + startAngle?: GradientPropValue; // Start angle + endAngle?: GradientPropValue; // End angle + stops: GradientStop[]; +} + +type GradientStop = { + offset: GradientPropValue; // 0-1 offset + color?: GradientPropValue; // Color + opacity?: number; // Opacity +}; + +type GradientPropValue = ValueType | FunctionType; +``` + +## Dependency Type Definitions + +### Theme and Color Types + +```typescript +interface IColorKey { + // Theme color key interface +} + +interface IColor { + // VRender color interface +} +``` + +### HTML Overlay Types + +```typescript +type IMarkHtmlSpec = Partial; + +interface IGraphicStyle { + html?: { + // HTML overlay configuration + }; +} +``` + +### Cursor Types + +```typescript +type Cursor = + | 'auto' + | 'default' + | 'none' + | 'context-menu' + | 'help' + | 'pointer' + | 'progress' + | 'wait' + | 'cell' + | 'crosshair' + | 'text' + | 'vertical-text' + | 'alias' + | 'copy' + | 'move' + | 'no-drop' + | 'not-allowed' + | 'grab' + | 'grabbing' + | 'e-resize' + | 'n-resize' + | 'ne-resize' + | 'nw-resize' + | 's-resize' + | 'se-resize' + | 'sw-resize' + | 'w-resize' + | 'ew-resize' + | 'ns-resize' + | 'nesw-resize' + | 'nwse-resize' + | 'col-resize' + | 'row-resize' + | 'all-scroll' + | 'zoom-in' + | 'zoom-out'; +``` + +### Context Types + +```typescript +interface IModelMarkAttributeContext { + // Mark attribute context for function evaluation +} + +interface Datum { + // Data record interface + [key: string]: any; +} +``` diff --git a/skills/vchart-development-skill/references/type-details/IBackgroundSpec-Type-Definition.md b/skills/vchart-development-skill/references/type-details/IBackgroundSpec-Type-Definition.md new file mode 100644 index 0000000000..9e1f9adf8f --- /dev/null +++ b/skills/vchart-development-skill/references/type-details/IBackgroundSpec-Type-Definition.md @@ -0,0 +1,360 @@ +## IBackgroundSpec 配置规范 + +IBackgroundSpec 定义了 VChart 中背景样式的配置接口，支持纯色背景和复杂的图形样式背景两种类型。 + +## 核心接口结构 + +```typescript +export type IBackgroundSpec = IColor | ConvertToMarkStyleSpec; +``` + +## 背景类型说明 + +IBackgroundSpec 支持两种主要的背景配置方式： + +### 简单颜色背景 +```typescript +type SimpleBackground = IColor; +``` + +### 复杂图形背景 +```typescript +type ComplexBackground = ConvertToMarkStyleSpec; +``` + +## 简单颜色背景 (IColor) + +使用 VRender 的颜色类型，支持多种颜色格式： + +```typescript +// IColor 来自 @visactor/vrender-core +type IColor = string | ILinearGradient | IRadialGradient | IConicalGradient; + +// 支持的颜色格式示例： +type ColorFormats = + | '#ff0000' // 十六进制 + | 'red' // 颜色名称 + | 'rgb(255, 0, 0)' // RGB + | 'rgba(255, 0, 0, 0.5)' // RGBA + | 'hsl(0, 100%, 50%)' // HSL + | ILinearGradient // 线性渐变 + | IRadialGradient // 径向渐变 + | IConicalGradient; // 圆锥渐变 +``` + +## 复杂图形背景 (ConvertToMarkStyleSpec) + +### 样式转换类型 +```typescript +export type ConvertToMarkStyleSpec> = { + [key in keyof T]: VisualType; +}; + +export type VisualType = ValueType | FunctionType | IVisual; +export type ValueType = T; +export type FunctionType = (datum: Datum, context: IModelMarkAttributeContext, source?: DataView) => T; +``` + +### IGroupMarkSpec 基础接口 +```typescript +export interface IGroupMarkSpec extends IFillMarkSpec { + /** 是否开启裁剪 */ + clip?: boolean; + /** 宽度 */ + width?: number; + /** 高度 */ + height?: number; + /** + * 圆角配置 + * 1. 如果传入数值，则统一为四个角设置圆角 + * 2. 如果传入数组，则分别为 [上左, 上右, 下右, 下左] + */ + cornerRadius?: number | number[]; +} +``` + +### IFillMarkSpec 填充样式 +```typescript +export interface IFillMarkSpec extends ICommonSpec { + /** + * 图形的填充颜色 + */ + fill?: VisualType | IGradient | false | IColorKey; + /** 填充的透明度 */ + fillOpacity?: number; + /** + * 图形的背景色，支持纯色、image元素、canvas元素 + */ + background?: IColor | HTMLImageElement | HTMLCanvasElement | null; +} +``` + +### ICommonSpec 通用样式 +```typescript +export interface ICommonSpec { + // 位置属性 + x?: VisualType; + y?: VisualType; + z?: VisualType; + + // 描边属性 + stroke?: VisualType | IGradient | false; + strokeOpacity?: VisualType; + lineWidth?: VisualType; + lineDash?: VisualType; + lineDashOffset?: VisualType; + lineCap?: VisualType<'butt' | 'round' | 'square'>; + lineJoin?: VisualType<'arcs' | 'bevel' | 'miter' | 'miter-clip' | 'round'>; + + // 显示属性 + visible?: VisualType; + opacity?: VisualType; + zIndex?: VisualType; + + // 变换属性 + scaleX?: VisualType; + scaleY?: VisualType; + angle?: VisualType; + + // 边框属性 + outerBorder?: IBorder; + innerBorder?: IBorder; + + // 纹理属性 + texture?: TextureType | string; + textureColor?: string; + textureSize?: number; + texturePadding?: number; +} +``` + +## 完整类型定义 + +```typescript +export type IBackgroundSpec = IColor | { + // 基础位置 + x?: VisualType; + y?: VisualType; + z?: VisualType; + + // 尺寸和形状 + width?: VisualType; + height?: VisualType; + cornerRadius?: VisualType; + clip?: VisualType; + + // 填充样式 + fill?: VisualType | IGradient | false | IColorKey; + fillOpacity?: VisualType; + background?: VisualType; + + // 描边样式 + stroke?: VisualType | IGradient | false; + strokeOpacity?: VisualType; + lineWidth?: VisualType; + lineDash?: VisualType; + lineDashOffset?: VisualType; + lineCap?: VisualType<'butt' | 'round' | 'square'>; + lineJoin?: VisualType<'arcs' | 'bevel' | 'miter' | 'miter-clip' | 'round'>; + + // 显示控制 + visible?: VisualType; + opacity?: VisualType; + zIndex?: VisualType; + + // 变换属性 + scaleX?: VisualType; + scaleY?: VisualType; + angle?: VisualType; + + // 边框效果 + outerBorder?: IBorder; + innerBorder?: IBorder; + + // 纹理效果 + texture?: TextureType | string; + textureColor?: string; + textureSize?: number; + texturePadding?: number; +}; +``` + +## 支持类型定义 + +### 边框配置 +```typescript +export interface IBorder { + /** 边框离图形边缘的距离 */ + distance: number | string; + /** 边框的颜色 */ + stroke?: string | IGradient; + /** 边框的透明度 */ + strokeOpacity?: number; + /** 边框线的宽度 */ + lineWidth?: number; + /** 给边框配置虚线模式 */ + lineDash?: number[]; + /** 设置边框的虚线偏移量 */ + lineDashOffset?: number; +} +``` + +### 纹理类型 +```typescript +export type TextureType = + | 'circle' + | 'dimond' + | 'rect' + | 'vertical-line' + | 'horizontal-line' + | 'bias-line' + | 'bias-rl-line' + | 'grid'; +``` + +### 渐变类型 +```typescript +// 线性渐变 +interface ILinearGradient { + gradient: 'linear'; + x0: number; + y0: number; + x1: number; + y1: number; + stops: Array<{ offset: number; color: string; }>; +} + +// 径向渐变 +interface IRadialGradient { + gradient: 'radial'; + x0: number; + y0: number; + r0: number; + x1: number; + y1: number; + r1: number; + stops: Array<{ offset: number; color: string; }>; +} + +// 圆锥渐变 +interface IConicalGradient { + gradient: 'conical'; + x: number; + y: number; + startAngle: number; + endAngle: number; + stops: Array<{ offset: number; color: string; }>; +} +``` + +## 使用示例 + +### 简单颜色背景 +```typescript +// 纯色背景 +const solidBackground: IBackgroundSpec = '#f0f0f0'; + +// 渐变背景 +const gradientBackground: IBackgroundSpec = { + gradient: 'linear', + x0: 0, + y0: 0, + x1: 0, + y1: 1, + stops: [ + { offset: 0, color: '#4facfe' }, + { offset: 1, color: '#00f2fe' } + ] +}; +``` + +### 复杂图形背景 +```typescript +// 基础矩形背景 +const rectBackground: IBackgroundSpec = { + fill: '#ffffff', + stroke: '#e0e0e0', + lineWidth: 1, + cornerRadius: 8, + fillOpacity: 0.9 +}; + +// 带纹理的背景 +const textureBackground: IBackgroundSpec = { + fill: '#f5f5f5', + texture: 'grid', + textureColor: '#cccccc', + textureSize: 10, + texturePadding: 2 +}; + +// 带边框效果的背景 +const borderBackground: IBackgroundSpec = { + fill: 'rgba(255, 255, 255, 0.8)', + outerBorder: { + distance: 4, + stroke: '#4facfe', + lineWidth: 2, + strokeOpacity: 0.6 + }, + cornerRadius: [8, 8, 0, 0] +}; +``` + +### 动态背景配置 +```typescript +// 基于数据的动态背景 +const dynamicBackground: IBackgroundSpec = { + fill: (datum: any) => { + return datum.value > 100 ? '#ff6b6b' : '#4ecdc4'; + }, + fillOpacity: (datum: any) => { + return Math.min(datum.value / 200, 1); + }, + cornerRadius: 4 +}; + +// 响应式背景 +const responsiveBackground: IBackgroundSpec = { + fill: '#ffffff', + stroke: '#e0e0e0', + lineWidth: 1, + width: (datum: any, context: any) => { + return context.region.getLayoutRect().width; + }, + height: (datum: any, context: any) => { + return context.region.getLayoutRect().height; + } +}; +``` + +### 特殊效果背景 +```typescript +// 阴影效果背景 +const shadowBackground: IBackgroundSpec = { + fill: '#ffffff', + stroke: 'none', + outerBorder: { + distance: 0, + stroke: 'rgba(0, 0, 0, 0.1)', + lineWidth: 8 + }, + cornerRadius: 12 +}; + +// 多层边框背景 +const multiLayerBackground: IBackgroundSpec = { + fill: '#ffffff', + outerBorder: { + distance: 2, + stroke: '#4facfe', + lineWidth: 2 + }, + innerBorder: { + distance: 2, + stroke: '#e0e0e0', + lineWidth: 1 + }, + cornerRadius: 6 +}; +``` diff --git a/skills/vchart-development-skill/references/type-details/IBoxPlotMarkSpec-Type-Definition.md b/skills/vchart-development-skill/references/type-details/IBoxPlotMarkSpec-Type-Definition.md new file mode 100644 index 0000000000..632d308e23 --- /dev/null +++ b/skills/vchart-development-skill/references/type-details/IBoxPlotMarkSpec-Type-Definition.md @@ -0,0 +1,223 @@ +## Overview + +`IBoxPlotMarkSpec` is a box plot mark specification interface in VChart, extending `ICommonSpec` with box plot specific properties: + +```typescript +export interface IBoxPlotMarkSpec extends ICommonSpec { + /** Box stroke width */ + lineWidth?: number; + + /** Box width */ + boxWidth?: number; + + /** Shaft width for min/max values */ + shaftWidth?: number; + + /** Shaft shape type */ + shaftShape?: BoxPlotShaftShape; + + /** Box fill color, no fill if empty */ + boxFill?: string; + + /** Shaft fill opacity, only effective when shaftType=bar */ + shaftFillOpacity?: number; + + /** Minimum value accessor */ + min?: (datum: Datum) => number; + + /** 25% quartile accessor */ + q1?: (datum: Datum) => number; + + /** Median value accessor */ + median?: (datum: Datum) => number; + + /** 75% quartile accessor */ + q3?: (datum: Datum) => number; + + /** Maximum value accessor */ + max?: (datum: Datum) => number; +} +``` + +This interface provides comprehensive configuration for box plot marks including box dimensions, shaft styling, and statistical value accessors. + +## Base Structure + +`IBoxPlotMarkSpec` extends `ICommonSpec` and includes box plot specific configurations: + +```typescript +interface IBoxPlotMarkSpec extends ICommonSpec { + // Box plot specific properties + lineWidth?: number; // Box stroke width + boxWidth?: number; // Box width + shaftWidth?: number; // Shaft width for min/max values + shaftShape?: BoxPlotShaftShape; // Shaft shape type + boxFill?: string; // Box fill color + shaftFillOpacity?: number; // Shaft fill opacity + + // Statistical value accessors + min?: (datum: Datum) => number; // Minimum value + q1?: (datum: Datum) => number; // 25% quartile + median?: (datum: Datum) => number; // Median value + q3?: (datum: Datum) => number; // 75% quartile + max?: (datum: Datum) => number; // Maximum value + + // Inherited from ICommonSpec + visible?: boolean; // Visibility + x?: number; // X coordinate + y?: number; // Y coordinate + z?: number; // Z coordinate (3D) + stroke?: string | IGradient | false | (number | boolean)[] | IColorKey | null; + strokeOpacity?: number; // Stroke opacity + opacity?: number; // Overall opacity + lineDash?: number[]; // Dash pattern + lineDashOffset?: number; // Dash offset + cursor?: Cursor; // Mouse cursor + zIndex?: number; // Layer index + angle?: number; // Rotation angle + anchor?: [number, number]; // Anchor point + scaleX?: number; // X-scale factor + scaleY?: number; // Y-scale factor + scaleCenter?: [number | string, number | string]; // Scale center + + // 3D properties + alpha?: number; // X-direction rotation + beta?: number; // Y-direction rotation + anchor3d?: [number, number]; // 3D anchor point + + // Interaction properties + pickMode?: 'accurate' | 'imprecise' | 'custom'; + boundsMode?: 'accurate' | 'imprecise'; + pickStrokeBuffer?: number; // Stroke pick buffer @since 1.7.3 + + // Texture properties + texture?: TextureType | string; // Texture type + textureColor?: string; // Texture color + textureSize?: number; // Texture size + texturePadding?: number; // Texture padding + + // Border properties + outerBorder?: IBorder; // Outer border + innerBorder?: IBorder; // Inner border + + // HTML overlay + html?: IMarkHtmlSpec; // HTML overlay @since 1.10.0 +} +``` + +### Texture Configuration (Inherited from ICommonSpec) + +```typescript +type TextureType = 'circle' | 'dimond' | 'rect' | 'vertical-line' | 'horizontal-line' | 'bias-lr' | 'bias-rl' | 'grid'; +``` + +### Border Configuration (Inherited from ICommonSpec) + +```typescript +interface IBorder { + /** Distance from shape edge */ + distance: number | string; + + /** Border color */ + stroke?: string | IGradient; + + /** Border opacity */ + strokeOpacity?: number; + + /** Border width */ + lineWidth?: number; + + /** Border dash pattern */ + lineDash?: number[]; + + /** Border dash offset */ + lineDashOffset?: number; +} +``` + +## Dependency Type Definitions + +### Box Plot Shaft Shape + +```typescript +type BoxPlotShaftShape = 'line' | 'bar'; +``` + +### Theme and Color Types + +```typescript +interface IColorKey { + // Theme color key interface +} + +interface IGradient { + // Gradient configuration interface +} +``` + +### Data and Context Types + +```typescript +interface Datum { + // Data record interface + [key: string]: any; +} + +interface IModelMarkAttributeContext { + // Mark attribute context for function evaluation +} +``` + +### HTML Overlay Types + +```typescript +type IMarkHtmlSpec = Partial; + +interface IGraphicStyle { + html?: { + // HTML overlay configuration + }; +} +``` + +### Cursor Types + +```typescript +type Cursor = + | 'auto' + | 'default' + | 'none' + | 'context-menu' + | 'help' + | 'pointer' + | 'progress' + | 'wait' + | 'cell' + | 'crosshair' + | 'text' + | 'vertical-text' + | 'alias' + | 'copy' + | 'move' + | 'no-drop' + | 'not-allowed' + | 'grab' + | 'grabbing' + | 'e-resize' + | 'n-resize' + | 'ne-resize' + | 'nw-resize' + | 's-resize' + | 'se-resize' + | 'sw-resize' + | 'w-resize' + | 'ew-resize' + | 'ns-resize' + | 'nesw-resize' + | 'nwse-resize' + | 'col-resize' + | 'row-resize' + | 'all-scroll' + | 'zoom-in' + | 'zoom-out'; +``` diff --git a/skills/vchart-development-skill/references/type-details/IBrushSpec-Type-Definition.md b/skills/vchart-development-skill/references/type-details/IBrushSpec-Type-Definition.md new file mode 100644 index 0000000000..9466cc4153 --- /dev/null +++ b/skills/vchart-development-skill/references/type-details/IBrushSpec-Type-Definition.md @@ -0,0 +1,232 @@ +## IBrushSpec 配置规范 + +IBrushSpec 定义了 VChart 中框选组件的完整配置接口，支持矩形、多边形等多种框选模式，提供数据筛选、样式定制和交互控制功能。 + +## 核心接口结构 + +```typescript +export interface IBrushSpec extends IBrushTheme, IBrushDataBindSpec { + /** 组件 id */ + id?: string; + /** + * 组件可见性 + * @default true + */ + visible?: boolean; + /** + * 是否更新图元状态 + * 关闭时, brush 事件不会触发图元状态更新, 优化缩放场景下的性能 + * @default true + * @since 1.13.13 + */ + updateElementsState?: boolean; +} +``` + +## 数据绑定配置 (IBrushDataBindSpec) + +定义框选组件的数据关联和联动行为： + +```typescript +interface IBrushDataBindSpec { + /** 可刷取的regionIndex */ + regionIndex?: number | number[]; + /** 可刷取的regionId */ + regionId?: string | string[]; + /** 可刷取的seriesIndex（在可刷取的region范围内） */ + seriesIndex?: number | number[]; + /** 可刷取的seriesId（在可刷取的region范围内） */ + seriesId?: string | string[]; + /** 刷取联动的seriesIndex */ + brushLinkSeriesIndex?: number | number[]; + /** 刷取联动的seriesId */ + brushLinkSeriesId?: string | string[]; + + /** + * 刷取后是否更新axis/dataZoom范围 + * @default false + * @since 0.10.0 + */ + zoomAfterBrush?: boolean; + /** + * 刷取到空数据时, 是否更新axis/dataZoom范围 + * @default false + * @since 1.12.2 + */ + zoomWhenEmpty?: boolean; + + /** 刷取联动的axisId */ + axisId?: string | string[]; + /** 刷取联动的axisIndex */ + axisIndex?: number | number[]; + + /** + * 更新dataZoom范围时, 按百分比进行范围拓展 + * @since 1.10.0 + */ + axisRangeExpand?: number; +} +``` + +## 主题样式配置 (IBrushTheme) + +定义框选组件的视觉样式和交互行为： + +```typescript +export interface IBrushTheme { + /** brush 的框选样式 */ + style?: Partial; + + /** 框选范围内的图元样式 */ + inBrush?: selectedItemStyle; + /** 框选范围外的图元样式 */ + outOfBrush?: selectedItemStyle; + + /** + * 框选模式 + * @default 'single' + */ + brushMode?: IBrushMode; + /** + * 框选类型 + * @default 'rect' + */ + brushType?: IBrushType; + /** + * 是否可被平移 + * @default true + */ + brushMoved?: boolean; + /** + * brushMode为'single'时，是否单击清除选框 + * @default true + */ + removeOnClick?: boolean; + + /** + * 事件触发延迟类型 + * @default 'throttle' + */ + delayType?: IDelayType; + /** + * 事件触发延迟时长 + * @default 10 + */ + delayTime?: number; + /** + * brush选框的大小阈值 + * @default 5 + * @since 1.2.0 + */ + sizeThreshold?: number; + /** 不需要被brush操作的mark类型 */ + markTypeFilter?: string[]; + + /** + * 自定义brush事件, 触发时机: 框选结束 + * 返回true, 则清空brush + * @since 1.13.9 + */ + onBrushEnd?: (e: any) => boolean; +} +``` + +## 支持类型定义 + +### 框选模式类型 +```typescript +export type IBrushMode = 'single' | 'multiple'; +export type IBrushType = 'x' | 'y' | 'rect' | 'polygon'; +``` + +### 图元样式类型 +```typescript +export type selectedItemStyle = { + /** 图元的图形类别 */ + symbol?: SymbolType; + /** 图元的大小 */ + symbolSize?: number; + /** 图元的颜色 */ + color?: string; + /** 图元的颜色透明度 */ + colorAlpha?: number; +} & Partial; +``` + +### 事件延迟类型 +```typescript +export type IDelayType = 'debounce' | 'throttle'; +``` + +### 多边形样式接口 +```typescript +export interface IPolygonMarkSpec extends ICommonSpec, IFillMarkSpec { + /** 顶点坐标 */ + points?: IPoint[]; + /** 圆角配置，支持数组配置，数组的顺序同组成 polygon 的顺序对应 */ + cornerRadius?: number | number[]; + /** x方向的缩放比例，默认为1，即不进行缩放 */ + scaleX?: number; + /** y方向的缩放比例，默认为1，即不进行缩放 */ + scaleY?: number; +} +``` + +## 完整类型定义 + +```typescript +export interface IBrushSpec { + // 基础配置 + id?: string; + visible?: boolean; + updateElementsState?: boolean; + + // 数据绑定 + regionIndex?: number | number[]; + regionId?: string | string[]; + seriesIndex?: number | number[]; + seriesId?: string | string[]; + brushLinkSeriesIndex?: number | number[]; + brushLinkSeriesId?: string | string[]; + zoomAfterBrush?: boolean; + zoomWhenEmpty?: boolean; + axisId?: string | string[]; + axisIndex?: number | number[]; + axisRangeExpand?: number; + + // 样式和交互 + style?: Partial; + inBrush?: selectedItemStyle; + outOfBrush?: selectedItemStyle; + brushMode?: 'single' | 'multiple'; + brushType?: 'x' | 'y' | 'rect' | 'polygon'; + brushMoved?: boolean; + removeOnClick?: boolean; + delayType?: 'debounce' | 'throttle'; + delayTime?: number; + sizeThreshold?: number; + markTypeFilter?: string[]; + onBrushEnd?: (e: any) => boolean; +} +``` + +## 使用示例 + +### 基础矩形框选 +```typescript +const brushSpec: IBrushSpec = { + brushType: 'rect', + brushMode: 'single', + style: { + fill: 'rgba(0, 0, 255, 0.1)', + stroke: '#0000ff', + lineWidth: 2 + }, + inBrush: { + colorAlpha: 1.0 + }, + outOfBrush: { + colorAlpha: 0.3 + } +}; +``` diff --git a/skills/vchart-development-skill/references/type-details/ICartesianAxisSpec-Type-Definition.md b/skills/vchart-development-skill/references/type-details/ICartesianAxisSpec-Type-Definition.md new file mode 100644 index 0000000000..219a0b5fef --- /dev/null +++ b/skills/vchart-development-skill/references/type-details/ICartesianAxisSpec-Type-Definition.md @@ -0,0 +1,405 @@ +## Overview + +`ICartesianAxisSpec` is a union type for Cartesian coordinate system axes in VChart, containing five axis types: + +```typescript +export type ICartesianAxisSpec = + | ICartesianLinearAxisSpec // Linear axis + | ICartesianBandAxisSpec // Band/Category axis + | ICartesianTimeAxisSpec // Time axis + | ICartesianLogAxisSpec // Logarithmic axis + | ICartesianSymlogAxisSpec; // Symmetric logarithmic axis +``` + +## Base Structure + +All axis types are based on `ICartesianAxisCommonSpec`: + +```typescript +type ICartesianAxisCommonSpec = ICommonAxisSpec & { + // Core configuration + grid?: IGrid; // Grid line configuration + subGrid?: IGrid; // Sub grid line configuration + domainLine?: ICartesianDomainLine; // Axis line configuration + label?: ICartesianLabel; // Axis label configuration + title?: ICartesianTitle; // Axis title configuration + autoIndent?: boolean; // Auto indent + background?: BackgroundConfig; // Background configuration + mode?: '2d' | '3d'; // 2D/3D mode + depth?: number; // Z-axis depth + unit?: ICartesianAxisUnit; // Axis unit + hasDimensionTooltip?: boolean; // Dimension tooltip +} & (ICartesianVertical | ICartesianHorizontal | ICartesianZ); +``` + +## Orientation Configuration + +### Vertical Axis +```typescript +type ICartesianVertical = { + orient: 'left' | 'right'; + innerOffset?: { top?: number; bottom?: number; }; +}; +``` + +### Horizontal Axis +```typescript +type ICartesianHorizontal = { + orient: 'top' | 'bottom'; + innerOffset?: { left?: number; right?: number; }; +}; +``` + +### Z轴 +```typescript +type ICartesianZ = { + orient: 'z'; +}; +``` + +## Axis Type Specific Configuration + +### 1. Linear Axis (ICartesianLinearAxisSpec) + +```typescript +type ICartesianLinearAxisSpec = ICartesianAxisCommonSpec & ILinearAxisSpec & { + sync?: ILinearAxisSync; // Axis synchronization configuration +}; + +interface ILinearAxisSpec { + min?: number; // Minimum value + max?: number; // Maximum value + softMin?: number | ((domain: number[]) => number); + softMax?: number | ((domain: number[]) => number); + nice?: boolean; // Round values @default true + niceType?: 'tickCountFirst' | 'accurateFirst'; + zero?: boolean; // Include zero @default true + expand?: { min?: number; max?: number; }; // Range expansion + tooltipFilterRange?: number | [number, number] | Function; + breaks?: ILinearAxisBreakSpec[]; // Axis breaks +} + +interface ILinearAxisSync { + axisId: StringOrNumber; // Reference axis ID + zeroAlign?: boolean; // Zero alignment + tickAlign?: boolean; // Tick alignment +} +``` + +### 2. Band Axis (ICartesianBandAxisSpec) + +```typescript +type ICartesianBandAxisSpec = ICartesianAxisCommonSpec & IBandAxisSpec & { + bandSize?: number; // Band width setting + maxBandSize?: number; // Maximum band width + minBandSize?: number; // Minimum band width + bandSizeLevel?: number; // Scale level + bandSizeExtend?: { // Extension configuration + gap?: number | string; + extend?: number; + }; + autoRegionSize?: boolean; // Auto calculate region size +}; + +interface IBandAxisSpec { + trimPadding?: boolean; // Remove padding at both ends + bandPadding?: number | number[]; // Inner and outer padding + paddingInner?: number | number[]; // Inner padding @default 0.1 + paddingOuter?: number | number[]; // Outer padding @default 0.3 + domain?: StringOrNumber[]; // Value range + bandPosition?: number; // Position offset @default 0.5 + showAllGroupLayers?: boolean; // Show all group layers + layers?: IBandAxisLayer[]; // Layer configuration +} +``` + +### 3. Time Axis (ICartesianTimeAxisSpec) + +```typescript +type ICartesianTimeAxisSpec = Omit & { + layers?: ITimeLayerType[]; // Time layer configuration +}; + +interface ITimeLayerType { + timeFormat?: string; // Time format @default '%Y%m%d' + timeFormatMode?: 'utc' | 'local'; // Time mode @default 'local' +} +``` + +### 4. Logarithmic Axis (ICartesianLogAxisSpec) + +```typescript +type ICartesianLogAxisSpec = ICartesianLinearAxisSpec & { + base?: number; // Base number @default 10 +}; +``` + +### 5. Symmetric Logarithmic Axis (ICartesianSymlogAxisSpec) + +```typescript +type ICartesianSymlogAxisSpec = ICartesianLinearAxisSpec & { + constant?: number; // Constant @default 10 +}; +``` + +## Core Sub-configurations + +### Grid Lines (IGrid) +```typescript +interface IGrid { + visible?: boolean; + alternateColor?: string | string[]; // Fill colors + alignWithLabel?: boolean; // Align with labels @default true + style?: IRuleMarkSpec | StyleCallback; + zIndex?: number; // Draw order @default 50 +} +``` + +### Tick Lines (ITick) +```typescript +interface ITick extends ITickCalculationCfg { + visible?: boolean; + tickSize?: number; // Length @default 4 + inside?: boolean; // Direction @default false + alignWithLabel?: boolean; // Align with labels @default true + style?: IRuleMarkSpec | StyleCallback; + state?: AxisItemStateStyle; // Interactive state styles + dataFilter?: (data: any[], context: { vchart: any }) => any[]; // Data filter +} +``` + +### Labels (ICartesianLabel) +```typescript +type ICartesianLabel = ILabel & { + flush?: boolean; // First/last shrink @default false + lastVisible?: boolean | null; // Last label visibility + firstVisible?: boolean | null; // First label visibility + containerAlign?: 'left' | 'right' | 'center' | 'top' | 'bottom' | 'middle'; +}; + +interface ILabel { + visible?: boolean; + formatMethod?: IFormatMethod; // Format function + formatter?: string | string[]; // Format template + space?: number; // Space from tick + inside?: boolean; // Direction @default false + minGap?: number; // Minimum gap (sampling) + style?: ITextMarkSpec | StyleCallback; + state?: AxisItemStateStyle; +} +``` + +### Axis Line (ICartesianDomainLine) +```typescript +type ICartesianDomainLine = IDomainLine & { + onZero?: boolean; // On zero tick + onZeroAxisIndex?: number; // Specified axis index + onZeroAxisId?: StringOrNumber; // Specified axis ID + startSymbol?: any; // Start symbol + endSymbol?: any; // End symbol +}; + +interface IDomainLine { + visible?: boolean; + style?: IRuleMarkSpec; + state?: AxisItemStateStyle; +} +``` + +### Title (ICartesianTitle) +```typescript +type ICartesianTitle = ITitle & { + autoRotate?: boolean; // Auto rotation @default true + inside?: boolean; // Direction @default false +}; + +interface ITitle { + visible?: boolean; + text?: string | number | Array; // Title content + position?: 'start' | 'middle' | 'end'; // Position + space?: number; // Distance from axis + padding?: number | number[]; // Padding + angle?: number; // Rotation angle + style?: ITextMarkSpec; + state?: AxisItemStateStyle; + background?: { // Background configuration + visible?: boolean; + style?: IRectMarkSpec; + state?: AxisItemStateStyle; + }; + shape?: { // Shape configuration + visible?: boolean; + space?: number; + style?: any; + state?: AxisItemStateStyle; + }; +} +``` + +## Dependency Type Definitions + +### Interactive State Styles +```typescript +// From @visactor/vrender-components +type AxisItemStateStyle = { + hover?: T; + hover_reverse?: T; + selected?: T; + selected_reverse?: T; +}; +``` + +### Axis Break Configuration +```typescript +interface ILinearAxisBreakSpec { + /** Break range */ + range: [number, number][]; + /** Gap between break marks, number for pixels, string for percentage @default 6 */ + gap?: number | string; + /** Break range calculation type @since 1.12.12 */ + scopeType?: 'count' | 'length'; +} +``` + +### Band Axis Layer Configuration +```typescript +interface IBandAxisLayer { + /** Visibility @default true */ + visible?: boolean; + /** Tick step */ + tickStep?: number; + /** Expected tick count @default 5 */ + tickCount?: number | ((option: ITickCallbackOption) => number); + /** Force tick count */ + forceTickCount?: number; +} +``` + +### Tick Calculation Configuration +```typescript +interface ITickCalculationCfg { + /** Tick step */ + tickStep?: number; + /** Expected continuous axis tick count @default 5 */ + tickCount?: number | ((option: ITickCallbackOption) => number); + /** Force tick count */ + forceTickCount?: number; + /** Tick generation algorithm @default 'average' */ + tickMode?: 'average' | 'd3' | CustomTicksFunc; + /** Avoid decimal ticks @default false */ + noDecimals?: boolean; +} +``` + +### Style Callback Types +```typescript +type StyleCallback = (datum: any, index: number) => T; +type IFormatMethod = (...args: T) => string | { type: 'rich'; text: any }; +``` + +### Basic Mark Style Types +```typescript +// Simplified style type definitions, actual types are more complex +interface IRuleMarkSpec { + stroke?: string; + strokeWidth?: number; + strokeOpacity?: number; + lineDash?: number[]; + // ... more style attributes +} + +interface ITextMarkSpec { + fontSize?: number; + fontFamily?: string; + fontWeight?: string | number; + fill?: string; + textAlign?: string; + textBaseline?: string; + // ... more style attributes +} + +interface IRectMarkSpec { + fill?: string; + stroke?: string; + strokeWidth?: number; + // ... more style attributes +} +``` + +## Usage Examples + +### Linear Axis +```typescript +const linearAxis: ICartesianLinearAxisSpec = { + orient: 'bottom', + type: 'linear', + min: 0, + max: 100, + nice: true, + grid: { visible: true }, + label: { formatMethod: text => `${text}%` }, + tick: { + visible: true, + tickCount: 10, + state: { + hover: { stroke: '#ff0000' } + } + } +}; +``` + +### Band Axis +```typescript +const bandAxis: ICartesianBandAxisSpec = { + orient: 'bottom', + type: 'band', + paddingInner: 0.1, + paddingOuter: 0.3, + bandSize: 20, + showAllGroupLayers: true, + layers: [ + { visible: true, tickCount: 5 } + ], + label: { + visible: true, + state: { + hover: { fill: '#ff0000' } + } + } +}; +``` + +### Time Axis +```typescript +const timeAxis: ICartesianTimeAxisSpec = { + orient: 'bottom', + type: 'time', + layers: [ + { + timeFormat: '%Y-%m-%d', + timeFormatMode: 'local', + tickCount: 7 + } + ], + label: { + visible: true, + formatMethod: (text) => new Date(text).toLocaleDateString() + } +}; +``` + +### Linear Axis with Breaks +```typescript +const breakAxis: ICartesianLinearAxisSpec = { + orient: 'left', + type: 'linear', + breaks: [ + { + range: [[100, 900]], + gap: 10, + scopeType: 'length' + } + ], + grid: { visible: true } +}; +``` diff --git a/skills/vchart-development-skill/references/type-details/ICartesianCrosshairSpec-Type-Definition.md b/skills/vchart-development-skill/references/type-details/ICartesianCrosshairSpec-Type-Definition.md new file mode 100644 index 0000000000..d6a72db019 --- /dev/null +++ b/skills/vchart-development-skill/references/type-details/ICartesianCrosshairSpec-Type-Definition.md @@ -0,0 +1,543 @@ +## Overview + +`ICartesianCrosshairSpec` is the configuration type for the crosshair component in VChart's Cartesian coordinate system, used to display crosshair auxiliary lines and labels when the mouse hovers or clicks, helping users accurately read data values. + +```typescript +export interface ICartesianCrosshairSpec extends ICommonCrosshairSpec { + /** + * Crosshair configuration for x-axis in Cartesian coordinate system + */ + xField?: ICrosshairCategoryFieldSpec; + /** + * Crosshair configuration for y-axis in Cartesian coordinate system + */ + yField?: ICrosshairCategoryFieldSpec; +} +``` + +## Basic Structure + +### ICommonCrosshairSpec - Common Configuration + +Common configuration supported by all crosshair components: + +```typescript +export interface ICommonCrosshairSpec extends IComponentSpec { + /** + * Whether to keep sync with tooltip, default is false + * @since 1.11.1 + */ + followTooltip?: boolean | Partial>; + /** + * Trigger mode + * @default 'hover' + */ + trigger?: CrossHairTrigger; + /** + * Trigger mode to hide crosshair + */ + triggerOff?: CrossHairTrigger | 'none' | number; + /** + * Lock after click, only click can update position or unlock + * @since 1.9.0 + */ + lockAfterClick?: boolean; + /** + * Display layer level for crosshair text + */ + labelZIndex?: number; + /** + * Display layer level for crosshair auxiliary graphics + */ + gridZIndex?: number; +} +``` + +## Axis Field Configuration + +### ICrosshairCategoryFieldSpec - Category Field Configuration + +Configuration for crosshair on x-axis and y-axis: + +```typescript +export interface ICrosshairCategoryFieldSpec extends ICrosshairDataBindSpec { + /** + * Whether visible + */ + visible: boolean; + /** + * Crosshair auxiliary graphics configuration + */ + line?: ICrosshairLineSpec | Omit; + /** + * Crosshair text configuration + */ + label?: ICrosshairLabelSpec; +} +``` + +### ICrosshairDataBindSpec - Data Binding Configuration + +```typescript +export interface ICrosshairDataBindSpec { + /** + * Declare the axis index bound to crosshair. If not declared, it will bind to all axes corresponding to the crosshair position by default + */ + bindingAxesIndex?: number[]; + /** + * Crosshair initialization display information. The crosshair component can be displayed by default when the chart is drawn through this configuration + */ + defaultSelect?: { + /** + * Declare the axis index to display data + */ + axisIndex: number; + /** + * Declare the data to display + */ + datum: StringOrNumber; + }; +} +``` + +## Auxiliary Graphics Configuration + +### ICrosshairLineSpec - Line Configuration + +```typescript +export interface ICrosshairLineSpec { + /** + * Whether to display auxiliary graphics + */ + visible?: boolean; + /** + * Set auxiliary graphics type to 'line' + */ + type?: 'line'; + /** + * Line width + * @default 2 + */ + width?: number; + /** + * Whether smooth in polar coordinate system + */ + smooth?: boolean; + /** + * Style configuration for auxiliary graphics + */ + style?: ICrosshairLineStyle; +} +``` + +### ICrosshairRectSpec - Rectangle Configuration + +```typescript +export interface ICrosshairRectSpec { + /** + * Whether to display auxiliary graphics + */ + visible?: boolean; + /** + * Set auxiliary graphics type to 'rect' + */ + type?: 'rect'; + /** + * Width configuration + * @default '100%' + */ + width?: number | string | ICrosshairRectWidthCallback; + /** + * Style configuration for auxiliary graphics + */ + style?: ICrosshairRectStyle; +} +``` + +## Label Configuration + +### ICrosshairLabelSpec - Label Configuration + +```typescript +export interface ICrosshairLabelSpec { + /** + * Whether crosshair auxiliary label is displayed + */ + visible?: boolean; + /** + * Label text formatting method + */ + formatMethod?: (text: StringOrNumber | string[]) => string | string[]; + /** + * Formatting template + * @since 1.10.0 + */ + formatter?: string | string[]; + /** + * Text style configuration + */ + style?: Partial; + /** + * Text background related configuration + */ + labelBackground?: ICrosshairLabelBackgroundSpec; + /** + * Whether text rotates with axis label angle, currently only supported in Cartesian coordinate system + * @since 1.13.12 + */ + syncAxisLabelAngle?: boolean; +} +``` + +### ICrosshairLabelBackgroundSpec - Label Background Configuration + +```typescript +export interface ICrosshairLabelBackgroundSpec { + /** + * Whether to display background, default is true + */ + visible?: boolean; + /** + * Minimum width in pixels + * @default 30 + */ + minWidth?: number; + /** + * Maximum width in pixels. Text will be automatically ellipsized when exceeding maximum width + */ + maxWidth?: number; + /** + * Internal padding + */ + padding?: IPadding | number | number[]; + /** + * Style configuration for label background + */ + style?: Partial; +} +``` + +## Dependency Type Definitions + +### Trigger Types +```typescript +export type CrossHairTrigger = 'click' | 'hover' | ['click', 'hover']; +``` + +### Tooltip Sync Configuration +```typescript +export interface ITooltipActiveTypeAsKeys { + /** + * Configuration for mark tooltip + */ + mark?: T; + /** + * Configuration for dimension tooltip + */ + dimension?: K; + /** + * Configuration for group tooltip + */ + group?: U; +} +``` + +### Style Types +```typescript +export type ICrosshairLineStyle = Pick< + ILineMarkSpec, + 'stroke' | 'strokeOpacity' | 'opacity' | 'lineDash' | 'lineWidth' +>; + +export type ICrosshairRectStyle = ICrosshairLineStyle & + Pick; + +export type ICrosshairRectWidthCallback = ( + axisSize: { width: number; height: number }, + axis: IAxis +) => number; +``` + +### Basic Style Types +```typescript +interface ILineMarkSpec { + stroke?: string; + strokeWidth?: number; + strokeOpacity?: number; + opacity?: number; + lineDash?: number[]; + lineWidth?: number; + // ... more style properties +} + +interface IRectMarkSpec { + fill?: string; + fillOpacity?: number; + stroke?: string; + strokeWidth?: number; + cornerRadius?: number; + // ... more style properties +} + +interface ITextMarkSpec { + fontSize?: number; + fontFamily?: string; + fontWeight?: string | number; + fill?: string; + textAlign?: string; + textBaseline?: string; + // ... more style properties +} + +type IPadding = { + top?: number; + bottom?: number; + left?: number; + right?: number; +}; + +type StringOrNumber = string | number; +``` + +## Usage Examples + +### Basic Crosshair Configuration + +```typescript +const basicCrosshair: ICartesianCrosshairSpec = { + xField: { + visible: true, + line: { + visible: true, + type: 'line', + style: { + stroke: '#999', + lineWidth: 1, + lineDash: [4, 4] + } + }, + label: { + visible: true, + style: { + fontSize: 12, + fill: '#333' + } + } + }, + yField: { + visible: true, + line: { + visible: true, + type: 'line', + style: { + stroke: '#999', + lineWidth: 1, + lineDash: [4, 4] + } + }, + label: { + visible: true, + style: { + fontSize: 12, + fill: '#333' + } + } + } +}; +``` + +### Advanced Crosshair with Background and Formatting + +```typescript +const advancedCrosshair: ICartesianCrosshairSpec = { + trigger: 'hover', + lockAfterClick: false, + followTooltip: true, + labelZIndex: 1000, + gridZIndex: 100, + + xField: { + visible: true, + bindingAxesIndex: [0], + line: { + visible: true, + type: 'line', + width: 2, + style: { + stroke: '#ff4d4f', + strokeOpacity: 0.8, + lineDash: [2, 2] + } + }, + label: { + visible: true, + formatMethod: (text) => `X: ${text}`, + style: { + fontSize: 12, + fill: '#fff', + fontWeight: 'bold' + }, + labelBackground: { + visible: true, + padding: [4, 8], + style: { + fill: '#ff4d4f', + stroke: '#d9363e', + strokeWidth: 1, + cornerRadius: 4 + } + } + } + }, + + yField: { + visible: true, + bindingAxesIndex: [0], + line: { + visible: true, + type: 'line', + width: 2, + style: { + stroke: '#1890ff', + strokeOpacity: 0.8, + lineDash: [2, 2] + } + }, + label: { + visible: true, + formatMethod: (text) => `Y: ${Number(text).toFixed(2)}`, + style: { + fontSize: 12, + fill: '#fff', + fontWeight: 'bold' + }, + labelBackground: { + visible: true, + padding: [4, 8], + style: { + fill: '#1890ff', + stroke: '#096dd9', + strokeWidth: 1, + cornerRadius: 4 + } + } + } + } +}; +``` + +### Rectangle Area Highlight Crosshair + +```typescript +const rectCrosshair: ICartesianCrosshairSpec = { + trigger: ['hover', 'click'], + triggerOff: 'none', + + xField: { + visible: true, + line: { + visible: true, + type: 'rect', + width: '100%', + style: { + fill: 'rgba(24, 144, 255, 0.1)', + stroke: '#1890ff', + strokeWidth: 1 + } + }, + label: { + visible: true, + formatter: '{value}', + syncAxisLabelAngle: true, + style: { + fontSize: 11, + fill: '#1890ff' + }, + labelBackground: { + visible: true, + minWidth: 40, + padding: 6, + style: { + fill: 'rgba(24, 144, 255, 0.1)', + stroke: '#1890ff' + } + } + } + }, + + yField: { + visible: true, + line: { + visible: true, + type: 'line', + style: { + stroke: '#1890ff', + lineWidth: 1, + opacity: 0.8 + } + }, + label: { + visible: true, + formatMethod: (text) => `${Number(text).toLocaleString()}`, + style: { + fontSize: 11, + fill: '#1890ff' + } + } + } +}; +``` + +### Default Display and Axis Binding Configuration + +```typescript +const defaultCrosshair: ICartesianCrosshairSpec = { + xField: { + visible: true, + bindingAxesIndex: [0, 1], // Bind to the 0th and 1st x-axis + defaultSelect: { + axisIndex: 0, + datum: '2023-06' // Default display crosshair for June 2023 + }, + line: { + visible: true, + style: { + stroke: '#52c41a', + lineWidth: 2 + } + }, + label: { + visible: true, + formatMethod: (text) => new Date(text).toLocaleDateString('zh-CN'), + style: { + fontSize: 12, + fill: '#52c41a' + } + } + }, + + yField: { + visible: true, + bindingAxesIndex: [0], // Bind to the 0th y-axis + defaultSelect: { + axisIndex: 0, + datum: 1000 // Default display crosshair for value 1000 + }, + line: { + visible: true, + style: { + stroke: '#52c41a', + lineWidth: 2 + } + }, + label: { + visible: true, + formatMethod: (text) => `${Number(text).toFixed(2)}万`, + style: { + fontSize: 12, + fill: '#52c41a' + } + } + } +}; +``` diff --git a/skills/vchart-development-skill/references/type-details/ICellMarkSpec-Type-Definition.md b/skills/vchart-development-skill/references/type-details/ICellMarkSpec-Type-Definition.md new file mode 100644 index 0000000000..392103bb67 --- /dev/null +++ b/skills/vchart-development-skill/references/type-details/ICellMarkSpec-Type-Definition.md @@ -0,0 +1,275 @@ +# ICellMarkSpec Type Definition + +## Overview + +```typescript +interface ICellMarkSpec extends ISymbolMarkSpec { + // Cell-specific properties + padding?: number | number[] | IPadding; // Cell padding configuration + + // Inherited from ISymbolMarkSpec + dx?: number; // X offset + dy?: number; // Y offset + size?: number | number[]; // Symbol size + shape?: ShapeType | string; // Shape type + symbolType?: ShapeType | string; // Symbol type alias + scaleX?: number; // X-scale factor + scaleY?: number; // Y-scale factor + + // Inherited from IFillMarkSpec + fill?: VisualType | IGradient | false | IColorKey; // Fill color + fillOpacity?: number; // Fill opacity + background?: IColor | HTMLImageElement | HTMLCanvasElement | null; // Background + + // Inherited from ICommonSpec + visible?: boolean; // Visibility + x?: number; // X coordinate + y?: number; // Y coordinate + z?: number; // Z coordinate (3D) + stroke?: string | IGradient | false | (number | boolean)[] | IColorKey | null; // Stroke color + strokeOpacity?: number; // Stroke opacity + opacity?: number; // Overall opacity + lineWidth?: number; // Stroke width + lineDash?: number[]; // Dash pattern + lineDashOffset?: number; // Dash offset + cursor?: Cursor; // Mouse cursor + zIndex?: number; // Layer index + angle?: number; // Rotation angle + anchor?: [number, number]; // Anchor point + scaleCenter?: [number | string, number | string]; // Scale center + + // 3D properties + alpha?: number; // X-direction rotation + beta?: number; // Y-direction rotation + anchor3d?: [number, number]; // 3D anchor point + + // Interaction properties + pickMode?: 'accurate' | 'imprecise' | 'custom'; + boundsMode?: 'accurate' | 'imprecise'; + pickStrokeBuffer?: number; // Stroke pick buffer + + // Texture properties + texture?: TextureType | string; // Texture type + textureColor?: string; // Texture color + textureSize?: number; // Texture size + texturePadding?: number; // Texture padding + + // Border properties + outerBorder?: IBorder; // Outer border + innerBorder?: IBorder; // Inner border + + // HTML overlay + html?: IMarkHtmlSpec; // HTML overlay +} +``` + +## Padding Configuration + +```typescript +interface IPadding { + top?: number; // Top padding + bottom?: number; // Bottom padding + left?: number; // Left padding + right?: number; // Right padding +} +``` + +**IPadding 填充配置：** +定义单元格内边距，支持上下左右独立设置。 + +## Shape Type + +```typescript +type ShapeType = + | 'circle' + | 'cross' + | 'diamond' + | 'square' + | 'star' + | 'triangle' + | 'wye' + | 'rect' + | 'line' + | 'roundrect' + | 'path'; +``` + +**ShapeType 形状类型：** +定义符号标记支持的基础几何形状。 + +## Border Configuration + +```typescript +interface IBorder { + /** Distance from shape edge */ + distance: number | string; + + /** Border color */ + stroke?: string | IGradient; + + /** Border opacity */ + strokeOpacity?: number; + + /** Border width */ + lineWidth?: number; + + /** Border dash pattern */ + lineDash?: number[]; + + /** Border dash offset */ + lineDashOffset?: number; +} +``` + +## Visual Type System + +### Visual Mapping Types + +```typescript +type VisualType = ValueType | FunctionType | IVisual; + +type ValueType = T; +type FunctionType = (datum: Datum, context: IModelMarkAttributeContext, source?: DataView) => T; + +type IVisual = IVisualSpecStyle | IVisualScale; + +interface IVisualSpecStyle extends IVisualSpecBase { + /** Data field for mapping */ + field?: string; +} + +interface IVisualScale { + /** Scale ID reference */ + scale: string; + + /** Data field for mapping */ + field?: string; + + /** Domain change strategy @default 'none' */ + changeDomain?: 'none' | 'replace' | 'expand'; +} +``` + +### Gradient Types + +```typescript +type IGradient = IGradientLinear | IGradientRadial | IGradientConical; + +interface IGradientLinear { + gradient: 'linear'; + x0?: GradientPropValue; // Start x (0-1) + y0?: GradientPropValue; // Start y (0-1) + x1?: GradientPropValue; // End x (0-1) + y1?: GradientPropValue; // End y (0-1) + stops: GradientStop[]; +} + +interface IGradientRadial { + gradient: 'radial'; + r0?: GradientPropValue; // Start radius + x0?: GradientPropValue; // Start x + y0?: GradientPropValue; // Start y + x1?: GradientPropValue; // End x + y1?: GradientPropValue; // End y + r1?: GradientPropValue; // End radius + stops: GradientStop[]; +} + +interface IGradientConical { + gradient: 'conical'; + x?: GradientPropValue; // Center x + y?: GradientPropValue; // Center y + startAngle?: GradientPropValue; // Start angle + endAngle?: GradientPropValue; // End angle + stops: GradientStop[]; +} + +type GradientStop = { + offset: GradientPropValue; // 0-1 offset + color?: GradientPropValue; // Color + opacity?: number; // Opacity +}; + +type GradientPropValue = ValueType | FunctionType; +``` + +## Dependency Type Definitions + +### Theme and Color Types + +```typescript +interface IColorKey { + // Theme color key interface +} + +interface IColor { + // VRender color interface +} +``` + +### HTML Overlay Types + +```typescript +type IMarkHtmlSpec = Partial; + +interface IGraphicStyle { + html?: { + // HTML overlay configuration + }; +} +``` + +### Cursor Types + +```typescript +type Cursor = + | 'auto' + | 'default' + | 'none' + | 'context-menu' + | 'help' + | 'pointer' + | 'progress' + | 'wait' + | 'cell' + | 'crosshair' + | 'text' + | 'vertical-text' + | 'alias' + | 'copy' + | 'move' + | 'no-drop' + | 'not-allowed' + | 'grab' + | 'grabbing' + | 'e-resize' + | 'n-resize' + | 'ne-resize' + | 'nw-resize' + | 's-resize' + | 'se-resize' + | 'sw-resize' + | 'w-resize' + | 'ew-resize' + | 'ns-resize' + | 'nesw-resize' + | 'nwse-resize' + | 'col-resize' + | 'row-resize' + | 'all-scroll' + | 'zoom-in' + | 'zoom-out'; +``` + +### Context Types + +```typescript +interface IModelMarkAttributeContext { + // Mark attribute context for function evaluation +} + +interface Datum { + // Data record interface + [key: string]: any; +} +``` diff --git a/skills/vchart-development-skill/references/type-details/ICustomMarkSpec-Type-Definition.md b/skills/vchart-development-skill/references/type-details/ICustomMarkSpec-Type-Definition.md new file mode 100644 index 0000000000..ea072aad69 --- /dev/null +++ b/skills/vchart-development-skill/references/type-details/ICustomMarkSpec-Type-Definition.md @@ -0,0 +1,364 @@ +## ICustomMarkSpec 配置规范 + +ICustomMarkSpec 定义了 VChart 中自定义图元的完整配置接口，支持创建各种类型的自定义标记元素，包括基础图形、组合图形和扩展图形等。 + +## 核心接口结构 + +```typescript +export interface ICustomMarkSpec + extends IModelSpec, + IMarkSpec, + IAnimationSpec { + type: T; + name?: string; + dataIndex?: number; + dataKey?: string | ((datum: any) => string); + dataId?: StringOrNumber; + componentType?: string; + animation?: boolean; + parent?: string; +} +``` + +## 基础配置属性 + +### 标记类型和标识 +```typescript +interface ICustomMarkSpecBase { + /** 标记类型，支持所有内置图元类型 */ + type: EnableMarkType; + + /** + * mark对应的名称，主要用于事件过滤 + * @since 1.12.5 + */ + name?: string; + + /** + * 指定 parent Id + * @since 1.13.0 + */ + parent?: string; +} +``` + +### 数据绑定配置 +```typescript +interface ICustomMarkDataBinding { + /** + * 关联的数据索引 + * @default 与系列使用同一份数据 + */ + dataIndex?: number; + + /** + * dataKey用于绑定数据与Mark的关系 + * 如果数据和系列数据一致，可以不配置，默认会读取系列中的配置 + * @support since 1.9.5 + */ + dataKey?: string | ((datum: any) => string); + + /** 关联的数据id */ + dataId?: StringOrNumber; + + /** + * specify the component type + * @support since 1.9.0 + */ + componentType?: string; +} +``` + +### 动画配置 +```typescript +interface ICustomMarkAnimation { + /** + * enable animation of custom-mark or not + * @since 1.11.0 + */ + animation?: boolean; +} +``` + +## 继承接口说明 + +### IModelSpec 基础模型配置 +```typescript +export type IModelSpec = ILayoutItemSpec & { + id?: StringOrNumber; +}; + +interface ILayoutItemSpec { + /** 用户自定义id */ + id?: StringOrNumber; + /** 布局相关配置 */ + [key: string]: any; +} +``` + +### IMarkSpec 图元配置 +```typescript +export type IMarkSpec = { + /** 用户id */ + id?: StringOrNumber; + /** 是否响应交互 */ + interactive?: boolean; + /** 与其他mark元素的层级 */ + zIndex?: number; + /** mark 层 是否显示配置 */ + visible?: boolean; + /** 默认样式设置 */ + style?: ConvertToMarkStyleSpec; + /** 不同状态下的样式配置 */ + state?: IMarkStateFullSpec; + /** 状态排序方法 */ + stateSort?: (stateA: string, stateB: string) => number; + /** 是否是3d视角的mark */ + support3d?: boolean; + /** customized shape of mark */ + customShape?: (datum: any[], attrs: any, path: ICustomPath2D) => ICustomPath2D; +} & IMarkProgressiveConfig; +``` + +### IAnimationSpec 动画配置 +```typescript +export interface IAnimationSpec { + /** 图表入场动画 */ + animationAppear?: boolean | IStateAnimateSpec | IMarkAnimateSpec; + /** 数据更新 - 新增数据动画 */ + animationEnter?: boolean | ICommonStateAnimateSpec | IMarkAnimateSpec; + /** 数据更新 - 数据更新动画 */ + animationUpdate?: boolean | ICommonStateAnimateSpec | IMarkAnimateSpec; + /** 数据更新 - 数据删除动画 */ + animationExit?: boolean | ICommonStateAnimateSpec | IMarkAnimateSpec; + /** 图表退场动画 */ + animationDisappear?: boolean | IStateAnimateSpec | IMarkAnimateSpec; +} +``` + +## 支持类型定义 + +### 可用标记类型 +```typescript +export type EnableMarkType = keyof IBuildinMarkSpec; + +export type IBuildinMarkSpec = { + group: IGroupMarkSpec; + symbol: ISymbolMarkSpec; + rule: IRuleMarkSpec; + line: ILineMarkSpec; + text: ITextMarkSpec; + rect: IRectMarkSpec; + image: IImageMarkSpec; + path: IPathMarkSpec; + area: IAreaMarkSpec; + arc: IArcMarkSpec; + polygon: IPolygonMarkSpec; + boxPlot: IBoxPlotMarkSpec; + linkPath: ILinkPathMarkSpec; + ripple: IRippleMarkSpec; +}; +``` + +### 标记类型枚举 +```typescript +export const enum MarkTypeEnum { + group = 'group', + symbol = 'symbol', + rule = 'rule', + line = 'line', + text = 'text', + rect = 'rect', + image = 'image', + path = 'path', + area = 'area', + arc = 'arc', + polygon = 'polygon', + boxPlot = 'boxPlot', + linkPath = 'linkPath', + ripple = 'ripple' +} +``` + +### 状态配置类型 +```typescript +export interface IMarkStateFullSpec extends Record | IMarkStateStyleSpec> { + /** 正常状态下图元的样式设置 */ + normal?: IMarkStateSpec | IMarkStateStyleSpec; + /** hover状态下图元的样式设置 */ + hover?: IMarkStateSpec | IMarkStateStyleSpec; + /** 没有被hover的状态下图元的样式设置 */ + hover_reverse?: IMarkStateSpec | IMarkStateStyleSpec; + /** 选中状态下图元的样式设置 */ + selected?: IMarkStateSpec | IMarkStateStyleSpec; + /** 没有被选中的状态下图元的样式设置 */ + selected_reverse?: IMarkStateSpec | IMarkStateStyleSpec; +} +``` + +### 大数据渲染配置 +```typescript +export type IMarkProgressiveConfig = { + /** 是否开启大数据渲染模式 */ + large?: boolean; + /** 开启大数据渲染优化的阀值 */ + largeThreshold?: number; + /** 分片长度 */ + progressiveStep?: number; + /** 开启分片渲染的阀值 */ + progressiveThreshold?: number; +}; +``` + +## 扩展接口类型 + +### 组合标记配置 +```typescript +export interface ICustomMarkGroupSpec extends ICustomMarkSpec { + children?: ICustomMarkSpec[]; +} +``` + +### 扩展标记配置 +```typescript +export interface IExtensionMarkSpec> extends ICustomMarkSpec { + dataIndex?: number; + dataKey?: string | ((datum: any) => string); + dataId?: StringOrNumber; + componentType?: string; +} + +export interface IExtensionGroupMarkSpec extends ICustomMarkSpec { + children?: ICustomMarkSpec[]; +} +``` + +## 完整类型定义 + +```typescript +export interface ICustomMarkSpec { + // 基础配置 + id?: StringOrNumber; + type: T; + name?: string; + parent?: string; + + // 数据绑定 + dataIndex?: number; + dataKey?: string | ((datum: any) => string); + dataId?: StringOrNumber; + componentType?: string; + + // 图元配置 + interactive?: boolean; + zIndex?: number; + visible?: boolean; + style?: ConvertToMarkStyleSpec; + state?: IMarkStateFullSpec; + stateSort?: (stateA: string, stateB: string) => number; + support3d?: boolean; + customShape?: (datum: any[], attrs: any, path: ICustomPath2D) => ICustomPath2D; + + // 性能配置 + large?: boolean; + largeThreshold?: number; + progressiveStep?: number; + progressiveThreshold?: number; + + // 动画配置 + animation?: boolean; + animationAppear?: boolean | IStateAnimateSpec | IMarkAnimateSpec; + animationEnter?: boolean | ICommonStateAnimateSpec | IMarkAnimateSpec; + animationUpdate?: boolean | ICommonStateAnimateSpec | IMarkAnimateSpec; + animationExit?: boolean | ICommonStateAnimateSpec | IMarkAnimateSpec; + animationDisappear?: boolean | IStateAnimateSpec | IMarkAnimateSpec; +} +``` + +## 使用示例 + +### 基础自定义图元 +```typescript +const customMarkSpec: ICustomMarkSpec<'rect'> = { + type: 'rect', + name: 'customRect', + dataIndex: 0, + style: { + x: 100, + y: 100, + width: 50, + height: 30, + fill: '#ff0000' + }, + state: { + hover: { + style: { + fill: '#00ff00' + } + } + } +}; +``` + +### 数据绑定自定义图元 +```typescript +const dataBindMarkSpec: ICustomMarkSpec<'symbol'> = { + type: 'symbol', + name: 'dataSymbol', + dataKey: 'category', + componentType: 'series', + style: { + symbolType: 'circle', + size: (datum: any) => datum.value * 5, + fill: (datum: any) => datum.color + }, + animation: true, + animationAppear: { + duration: 1000, + easing: 'bounceOut' + } +}; +``` + +### 组合标记配置 +```typescript +const groupMarkSpec: ICustomMarkGroupSpec = { + type: 'group', + name: 'customGroup', + children: [ + { + type: 'rect', + name: 'background', + style: { + fill: '#f0f0f0', + stroke: '#333333' + } + }, + { + type: 'text', + name: 'label', + style: { + text: 'Custom Group', + fontSize: 14 + } + } + ] +}; +``` + +### 大数据优化配置 +```typescript +const largeDataMarkSpec: ICustomMarkSpec<'symbol'> = { + type: 'symbol', + name: 'largeDataPoints', + large: true, + largeThreshold: 2000, + progressiveThreshold: 5000, + progressiveStep: 1000, + style: { + symbolType: 'circle', + size: 3, + fill: '#0066cc' + } +}; +``` \ No newline at end of file diff --git a/skills/vchart-development-skill/references/type-details/IData-Type-Definition.md b/skills/vchart-development-skill/references/type-details/IData-Type-Definition.md new file mode 100644 index 0000000000..2823f70247 --- /dev/null +++ b/skills/vchart-development-skill/references/type-details/IData-Type-Definition.md @@ -0,0 +1,263 @@ +## Overview +`IData` defines the data configuration interface for VChart components. It supports multiple data sources including arrays of data values, DataView instances, and combinations thereof. + +## Core Type Structure + +```typescript +type IData = IDataType | IDataType[]; +type IDataType = IDataValues | DataView; +``` + +## Data Source Types + +### 1. Single Data Source +```typescript +type IDataType = IDataValues | DataView; +``` + +### 2. Multiple Data Sources +```typescript +type IData = IDataType[]; // Array of data sources +``` + +## IDataValues Configuration + +```typescript +interface IDataValues { + id?: StringOrNumber; // Unique data identifier + values: Datum[] | string; // Data array or URL string + fromDataIndex?: number; // Reference data index + fromDataId?: StringOrNumber; // Reference data ID + transforms?: BuildInTransformOptions[]; // Data transformation configuration + fields?: Record; // Field metadata configuration + parser?: SheetParseOptions | CommonParseOptions; // Data parser configuration +} +``` + +### Core Properties +- **id**: Unique identifier for the data source +- **values**: The actual data (array of objects) or URL string for remote data +- **fromDataIndex/fromDataId**: Reference to other data sources for data sharing +- **transforms**: Array of data transformation operations +- **fields**: Field-specific metadata and configurations +- **parser**: Data parsing options for different formats + +## Field Metadata Configuration + +```typescript +interface IFieldsMeta { + alias?: string; // Field display name + domain?: StringOrNumber[]; // Field value range + lockStatisticsByDomain?: boolean | 'onlyFull'; // Lock domain for statistics + type?: 'ordinal' | 'linear'; // Field data type + sortIndex?: number; // Sort priority index + sortReverse?: boolean; // Reverse sort order + sort?: 'desc' | 'asc'; // Simple sort configuration +} +``` + +### Field Properties +- **alias**: Display name for the field in legends, labels, etc. +- **domain**: Predefined value range for the field +- **lockStatisticsByDomain**: Controls domain locking behavior in interactions +- **type**: Specifies whether field is categorical ('ordinal') or continuous ('linear') +- **sortIndex**: Priority for multi-field sorting (lower numbers sort first) +- **sortReverse**: Whether to reverse the sort order +- **sort**: Simplified sort configuration ('asc'/'desc') + +## Data Transformation Options + +```typescript +type BuildInTransformOptions = + | { type: 'simplify'; options: ISimplifyOptions; } // Geographic data simplification + | { type: 'fields'; options: IFieldsOptions; } // Field processing (sort, filter, reverse) + | { type: 'filter'; options: IFilterOptions; } // Custom filtering with callbacks + | { type: 'fold'; options: IFoldOptions; }; // Data folding/reshaping +``` + +### Transform Types +- **simplify**: Reduces geographic data complexity for performance +- **fields**: Handles field-level operations like sorting and filtering +- **filter**: Applies custom filtering logic via callbacks +- **fold**: Reshapes data structure (wide to long format conversion) + +## Data Parser Configuration + +### Sheet Parser (CSV/TSV/DSV) +```typescript +interface SheetParseOptions extends CommonParseOptions { + type: 'csv' | 'dsv' | 'tsv'; // File format type + options?: IDsvParserOptions; // Format-specific parsing options +} +``` + +### Common Parser Options +```typescript +interface CommonParseOptions { + clone?: boolean; // Whether to clone data (default: true) +} +``` + +### Parser Properties +- **type**: Specifies the file format for parsing +- **options**: Format-specific parsing configurations +- **clone**: Controls whether data is cloned to prevent mutations + +## Helper Types + +### Data Key Configuration +```typescript +type DataKeyType = string | string[] | ((data: Datum, index: number) => string); +``` + +### Datum Type +```typescript +type Datum = Record; // Individual data record +``` + +### String or Number Union +```typescript +type StringOrNumber = string | number; +``` + +## Usage Examples + +### Simple Array Data +```typescript +const data: IData = { + values: [ + { category: 'A', value: 10 }, + { category: 'B', value: 20 }, + { category: 'C', value: 15 } + ] +}; +``` + +### Data with Field Metadata +```typescript +const data: IData = { + id: 'sales-data', + values: [ + { month: 'Jan', sales: 1000, region: 'North' }, + { month: 'Feb', sales: 1200, region: 'South' } + ], + fields: { + month: { + type: 'ordinal', + alias: 'Month' + }, + sales: { + type: 'linear', + alias: 'Sales Amount', + domain: [0, 2000] + }, + region: { + type: 'ordinal', + sort: 'asc' + } + } +}; +``` + +### Data with Transformations +```typescript +const data: IData = { + values: [ + { name: 'Product A', Q1: 100, Q2: 120, Q3: 110, Q4: 130 }, + { name: 'Product B', Q1: 80, Q2: 90, Q3: 95, Q4: 105 } + ], + transforms: [ + { + type: 'fold', + options: { + fields: ['Q1', 'Q2', 'Q3', 'Q4'], + key: 'quarter', + value: 'sales' + } + }, + { + type: 'filter', + options: { + callback: (datum) => datum.sales > 100 + } + } + ] +}; +``` + +### CSV Data with Parser +```typescript +const data: IData = { + values: 'https://example.com/data.csv', + parser: { + type: 'csv', + options: { + delimiter: ',', + header: true + } + } +}; +``` + +### Multiple Data Sources +```typescript +const data: IData = [ + { + id: 'source1', + values: [{ x: 1, y: 10 }, { x: 2, y: 20 }] + }, + { + id: 'source2', + values: [{ x: 1, z: 5 }, { x: 2, z: 15 }] + } +]; +``` + +### Referenced Data +```typescript +const data: IData = [ + { + id: 'main', + values: [ + { category: 'A', value: 100 }, + { category: 'B', value: 200 } + ] + }, + { + id: 'filtered', + fromDataId: 'main', + transforms: [ + { + type: 'filter', + options: { + callback: (datum) => datum.value > 150 + } + } + ] + } +]; +``` + +## DataView Integration + +When using DataView instances directly: +```typescript +import { DataView } from '@visactor/vdataset'; + +const dataView = new DataView(); +dataView.parse([ + { category: 'A', value: 10 }, + { category: 'B', value: 20 } +]); + +const data: IData = dataView; +``` + +## Best Practices + +1. **Use unique IDs** for data sources when working with multiple datasets +2. **Configure field metadata** for better chart behavior and user experience +3. **Apply transformations** to shape data appropriately for visualization +4. **Set appropriate field types** ('ordinal' vs 'linear') for correct scale handling +5. **Use data references** to avoid duplication and maintain consistency +6. **Enable cloning** (default) unless performance is critical and data mutation is acceptable diff --git a/skills/vchart-development-skill/references/type-details/IDataZoomSpec-Type-Definition.md b/skills/vchart-development-skill/references/type-details/IDataZoomSpec-Type-Definition.md new file mode 100644 index 0000000000..827d0318c1 --- /dev/null +++ b/skills/vchart-development-skill/references/type-details/IDataZoomSpec-Type-Definition.md @@ -0,0 +1,401 @@ +## Overview +`IDataZoomSpec` defines the configuration interface for data zoom components in VChart. It extends data filter functionality with rich styling options, providing interactive data navigation, range selection, and axis zooming capabilities with customizable visual elements. + +## Core Interface Structure + +```typescript +interface IDataZoomSpec extends IDataZoomStyle, IDataFilterComponentSpec { + showBackgroundChart?: boolean; // Show background chart (default: true) + filterMode?: IFilterMode; // Data filter mode (default: 'filter') + valueField?: string; // Background trend line field + startText?: ITextConfiguration; // Start point text configuration + endText?: ITextConfiguration; // End point text configuration + brushSelect?: boolean; // Enable brush selection (default: false) + ignoreBandSize?: boolean; // Ignore axis bandSize constraints + tolerance?: number; // Background chart node compression rate +} +``` + +## Data Filter Component Base (Inherited) + +```typescript +interface IDataFilterComponentSpec extends Omit { + visible?: boolean; // Component visibility (default: true) + orient?: IOrientType; // Component orientation (default: 'left') + width?: 'auto' | number; // Component width (default: 'auto') + height?: 'auto' | number; // Component height (default: 'auto') + field?: string; // Associated mapping field + axisId?: string; // Associated axis ID + axisIndex?: number; // Associated axis index + regionIndex?: number | number[]; // Associated region indices + start?: number; // Start position ratio [0, 1] (default: 0) + end?: number; // End position ratio [0, 1] (default: 1) + startValue?: number | string; // Start data value + endValue?: number | string; // End data value + valueField?: string; // Data filter field + rangeMode?: [string, string]; // Configuration mode matching + autoIndent?: boolean; // Auto indentation + auto?: boolean; // Auto mode (component auto-hide) + zoomLock?: boolean; // Lock selection area size (default: false) + minSpan?: number; // Minimum window size [0, 1] (default: 0) + maxSpan?: number; // Maximum window size [0, 1] (default: 1) + minValueSpan?: number; // Minimum data value span + maxValueSpan?: number; // Maximum data value span + delayType?: IDelayType; // Event trigger delay type + delayTime?: number; // Event trigger delay time (default: 30) + roamZoom?: IRoamZoomSpec | boolean; // Roam zoom mode (default: false) + roamDrag?: IRoamDragSpec | boolean; // Roam drag mode + roamScroll?: IRoamScrollSpec | boolean; // Roam scroll mode + realTime?: boolean; // Real-time view updates (default: true) +} +``` + +## Data Zoom Style Configuration + +```typescript +interface IDataZoomStyle { + showDetail?: 'auto' | boolean; // Show start/end text ('auto' shows on hover) + middleHandler?: IMiddleHandlerStyle; // Middle handler styling + background?: IBackgroundStyle; // Background rectangle styling + startHandler?: ISymbolMarkSpec; // Start handler styling + endHandler?: ISymbolMarkSpec; // End handler styling + startText?: ITextStyle; // Start text styling + endText?: ITextStyle; // End text styling + dragMask?: IRectMarkSpec; // Drag mask styling + selectedBackground?: IRectMarkSpec; // Selected area background styling + backgroundChart?: IBackgroundChartStyle; // Background chart styling + selectedBackgroundChart?: ISelectedBackgroundChartStyle; // Selected background chart styling +} +``` + +## Style Component Definitions + +### Middle Handler Configuration +```typescript +interface IMiddleHandlerStyle { + visible?: boolean; // Middle handler visibility + icon?: ISymbolMarkSpec; // Center icon styling + background?: { + size?: number; // Background size (height for horizontal, width for vertical) + } & IRectMarkSpec; +} +``` + +### Background Style Configuration +```typescript +interface IBackgroundStyle extends IRectMarkSpec { + size?: number; // Background size (height for horizontal, width for vertical) +} +``` + +### Text Configuration +```typescript +interface ITextConfiguration { + padding?: number; // Text outer margin + style?: ITextMarkSpec; // Text styling + formatMethod?: (text: string | number) => string | string[]; // Format function + formatter?: string | string[]; // Format template +} + +interface ITextStyle extends ITextMarkSpec { + padding?: number; // Text outer margin +} +``` + +### Chart Style Configuration +```typescript +interface IBackgroundChartStyle { + line?: ILineMarkSpec; // Background line styling + area?: IAreaMarkSpec; // Background area styling +} + +interface ISelectedBackgroundChartStyle { + line?: ILineMarkSpec; // Selected area line styling + area?: IAreaMarkSpec; // Selected area area styling +} +``` + +## Supporting Type Definitions + +### Filter Mode +```typescript +type IFilterMode = 'filter' | 'axis'; +``` + +### Orientation Types +```typescript +type IOrientType = 'left' | 'top' | 'right' | 'bottom' | 'z'; +``` + +### Delay Types +```typescript +type IDelayType = 'throttle' | 'debounce'; +``` + +## Complete Interface Definition + +```typescript +interface IDataZoomSpec { + // Component base properties + regionIndex?: number | number[]; + regionId?: string | number | (string | number)[]; + seriesIndex?: number | number[]; + seriesId?: string | number | (string | number)[]; + + // Basic configuration + visible?: boolean; + orient?: 'left' | 'top' | 'right' | 'bottom' | 'z'; + width?: 'auto' | number; + height?: 'auto' | number; + + // Data association + field?: string; + axisId?: string; + axisIndex?: number; + valueField?: string; + + // Range configuration + start?: number; + end?: number; + startValue?: number | string; + endValue?: number | string; + rangeMode?: [string, string]; + + // Behavior configuration + filterMode?: 'filter' | 'axis'; + autoIndent?: boolean; + auto?: boolean; + zoomLock?: boolean; + brushSelect?: boolean; + ignoreBandSize?: boolean; + realTime?: boolean; + + // Span constraints + minSpan?: number; + maxSpan?: number; + minValueSpan?: number; + maxValueSpan?: number; + + // Timing configuration + delayType?: 'throttle' | 'debounce'; + delayTime?: number; + + // Roam modes + roamZoom?: boolean | IRoamZoomSpec; + roamDrag?: boolean | IRoamDragSpec; + roamScroll?: boolean | IRoamScrollSpec; + + // Visual configuration + showBackgroundChart?: boolean; + showDetail?: 'auto' | boolean; + tolerance?: number; + + // Handler styling + middleHandler?: { + visible?: boolean; + icon?: { + fill?: string; + stroke?: string; + strokeWidth?: number; + size?: number; + symbolType?: string; + // ... other ISymbolMarkSpec properties + }; + background?: { + size?: number; + fill?: string; + stroke?: string; + strokeWidth?: number; + cornerRadius?: number; + // ... other IRectMarkSpec properties + }; + }; + + // Background styling + background?: { + size?: number; + fill?: string; + stroke?: string; + strokeWidth?: number; + cornerRadius?: number; + // ... other IRectMarkSpec properties + }; + + // Handler styling + startHandler?: { + fill?: string; + stroke?: string; + strokeWidth?: number; + size?: number; + symbolType?: string; + // ... other ISymbolMarkSpec properties + }; + + endHandler?: { + fill?: string; + stroke?: string; + strokeWidth?: number; + size?: number; + symbolType?: string; + // ... other ISymbolMarkSpec properties + }; + + // Text configuration + startText?: { + padding?: number; + style?: { + fontSize?: number; + fontFamily?: string; + fontWeight?: string | number; + fill?: string; + textAlign?: string; + textBaseline?: string; + // ... other ITextMarkSpec properties + }; + formatMethod?: (text: string | number) => string | string[]; + formatter?: string | string[]; + }; + + endText?: { + padding?: number; + style?: { + fontSize?: number; + fontFamily?: string; + fontWeight?: string | number; + fill?: string; + textAlign?: string; + textBaseline?: string; + // ... other ITextMarkSpec properties + }; + formatMethod?: (text: string | number) => string | string[]; + formatter?: string | string[]; + }; + + // Interaction styling + dragMask?: { + fill?: string; + stroke?: string; + strokeWidth?: number; + fillOpacity?: number; + // ... other IRectMarkSpec properties + }; + + selectedBackground?: { + fill?: string; + stroke?: string; + strokeWidth?: number; + fillOpacity?: number; + // ... other IRectMarkSpec properties + }; + + // Chart styling + backgroundChart?: { + line?: { + stroke?: string; + strokeWidth?: number; + strokeOpacity?: number; + lineDash?: number[]; + // ... other ILineMarkSpec properties + }; + area?: { + fill?: string; + fillOpacity?: number; + stroke?: string; + strokeWidth?: number; + // ... other IAreaMarkSpec properties + }; + }; + + selectedBackgroundChart?: { + line?: { + stroke?: string; + strokeWidth?: number; + strokeOpacity?: number; + lineDash?: number[]; + // ... other ILineMarkSpec properties + }; + area?: { + fill?: string; + fillOpacity?: number; + stroke?: string; + strokeWidth?: number; + // ... other IAreaMarkSpec properties + }; + }; +} +``` + +## Usage Examples + +### Basic Data Zoom Configuration +```typescript +const basicDataZoom: IDataZoomSpec = { + visible: true, + orient: 'bottom', +}; +``` + +### Styled Data Zoom with Handlers +```typescript +const styledDataZoom: IDataZoomSpec = { + visible: true, + orient: 'bottom', + height: 80, + showBackgroundChart: true, + background: { + fill: '#f8f9fa', + stroke: '#dee2e6', + strokeWidth: 1, + cornerRadius: 4 + }, + selectedBackground: { + fill: 'rgba(0, 123, 255, 0.1)', + stroke: '#007bff', + strokeWidth: 1 + }, + startHandler: { + fill: '#007bff', + stroke: '#fff', + strokeWidth: 2, + size: 12, + symbolType: 'circle' + }, + endHandler: { + fill: '#007bff', + stroke: '#fff', + strokeWidth: 2, + size: 12, + symbolType: 'circle' + } +}; +``` + +### Data Zoom with Custom Text Formatting +```typescript +const formattedDataZoom: IDataZoomSpec = { + visible: true, + orient: 'bottom', + start: 0.2, + end: 0.8, + startText: { + padding: 5, + style: { + fontSize: 12, + fill: '#666', + fontWeight: 'bold' + }, + formatMethod: (value) => `Start: ${value}`, + formatter: 'Start: {value:.2f}' + }, + endText: { + padding: 5, + style: { + fontSize: 12, + fill: '#666', + fontWeight: 'bold' + }, + formatMethod: (value) => `End: ${value}`, + formatter: 'End: {value:.2f}' + } +}; +``` \ No newline at end of file diff --git a/skills/vchart-development-skill/references/type-details/IExtensionGroupMarkSpec-Type-Definition.md b/skills/vchart-development-skill/references/type-details/IExtensionGroupMarkSpec-Type-Definition.md new file mode 100644 index 0000000000..1ef802de31 --- /dev/null +++ b/skills/vchart-development-skill/references/type-details/IExtensionGroupMarkSpec-Type-Definition.md @@ -0,0 +1,724 @@ +## Overview + +`IExtensionGroupMarkSpec` is a specialized group mark specification for VChart series extensions, extending `ICustomMarkSpec` with group-specific functionality: + +```typescript +export interface IExtensionGroupMarkSpec extends ICustomMarkSpec { + /** Support for child nodes */ + children?: ICustomMarkSpec[]; +} +``` + +This type specifically extends `ICustomMarkSpec` for group marks and provides hierarchical structure through child mark support. + +## Base Structure + +`IExtensionGroupMarkSpec` extends `ICustomMarkSpec` which combines multiple specifications: + +```typescript +interface IExtensionGroupMarkSpec extends ICustomMarkSpec { + // Inherited from ICustomMarkSpec + type: MarkTypeEnum.group; // Fixed to 'group' + name?: string; // Mark name for event filtering @since 1.12.5 + dataIndex?: number; // Associated data index @default Same as series + dataKey?: string | ((datum: any) => string); // Data-Mark binding @since 1.9.5 + dataId?: StringOrNumber; // Associated data ID + componentType?: string; // Component type @since 1.9.0 + animation?: boolean; // Animation enable @since 1.11.0 + parent?: string; // Parent element ID @since 1.13.0 + + // Inherited from IMarkSpec + id?: StringOrNumber; // User-defined ID + interactive?: boolean; // Interactive response + zIndex?: number; // Layer order + visible?: boolean; // Visibility + style?: ConvertToMarkStyleSpec; + state?: IMarkStateFullSpec; + stateSort?: (stateA: string, stateB: string) => number; // @since 1.9.0 + support3d?: boolean; // 3D perspective support + customShape?: (datum: any[], attrs: any, path: ICustomPath2D) => ICustomPath2D; + + // Inherited from IModelSpec and IAnimationSpec + // Model and animation specifications + + // Extension Group Specific + children?: ICustomMarkSpec[]; // Child mark specifications +} +``` + +## Core Configuration Properties + +### Extension Group Specific Configuration + +```typescript +interface ExtensionGroupConfig { + /** Child mark specifications supporting all mark types */ + children?: ICustomMarkSpec[]; +} +``` + +### Mark Type Configuration (Fixed) + +```typescript +interface MarkTypeConfig { + /** Mark type fixed to group */ + type: MarkTypeEnum.group; // 'group' +} +``` + +### Data Binding Configuration (Inherited from ICustomMarkSpec) + +```typescript +interface DataBindingConfig { + /** Associated data index @default Same as series data */ + dataIndex?: number; + + /** Data-Mark binding key @since 1.9.5 */ + dataKey?: string | ((datum: any) => string); + + /** Associated data ID */ + dataId?: StringOrNumber; + + /** Component type specification @since 1.9.0 */ + componentType?: string; +} +``` + +### Basic Mark Configuration (Inherited from IMarkSpec) + +```typescript +interface BasicMarkConfig { + /** User-defined ID */ + id?: StringOrNumber; + + /** Interactive response */ + interactive?: boolean; + + /** Layer order with other marks */ + zIndex?: number; + + /** Mark visibility */ + visible?: boolean; + + /** 3D perspective support */ + support3d?: boolean; + + /** Custom shape function */ + customShape?: (datum: any[], attrs: any, path: ICustomPath2D) => ICustomPath2D; +} +``` + +### Naming and Identification (Inherited from ICustomMarkSpec) + +```typescript +interface NamingConfig { + /** Mark name for event filtering @since 1.12.5 */ + name?: string; + + /** Parent element ID @since 1.13.0 */ + parent?: string; +} +``` + +### Animation Configuration (Inherited from ICustomMarkSpec) + +```typescript +interface AnimationConfig { + /** Enable animation @since 1.11.0 */ + animation?: boolean; +} +``` + +## Style Configuration + +### Group Mark Styling + +```typescript +interface GroupStyleConfig { + /** Group mark style configuration */ + style?: ConvertToMarkStyleSpec; + + /** Interactive state styles */ + state?: IMarkStateFullSpec; + + /** State sorting method @since 1.9.0 */ + stateSort?: (stateA: string, stateB: string) => number; +} +``` + +### State Management + +```typescript +interface IMarkStateFullSpec { + /** Normal state style */ + normal?: IMarkStateSpec | IMarkStateStyleSpec; + + /** Hover state style */ + hover?: IMarkStateSpec | IMarkStateStyleSpec; + + /** Non-hover state style */ + hover_reverse?: IMarkStateSpec | IMarkStateStyleSpec; + + /** Selected state style */ + selected?: IMarkStateSpec | IMarkStateStyleSpec; + + /** Non-selected state style */ + selected_reverse?: IMarkStateSpec | IMarkStateStyleSpec; +} + +interface IMarkStateSpec { + /** State filter criteria */ + filter?: IMarkStateFilter; + + /** State priority level */ + level?: number | undefined; + + /** State style */ + style: ConvertToMarkStyleSpec; +} + +type IMarkStateStyleSpec = ConvertToMarkStyleSpec; +``` + +### State Filters + +```typescript +type IMarkStateFilter = + | { + /** Dimension filtering */ + fields: { [key in string]: { type: 'ordinal' | 'linear'; domain: StringOrNumber[] } }; + } + | { + /** Data filtering */ + datums: Datum[]; + datumKeys: string[]; + } + | { + /** Item filtering */ + items: IGraphic[]; + } + | (( + datum: Datum, + options: { + mark?: IMark; + type?: string; + renderNode?: IGraphic; + } + ) => boolean); +``` + +## Child Mark Configuration + +### Supported Child Mark Types + +```typescript +type EnableMarkType = keyof IBuildinMarkSpec; + +type IBuildinMarkSpec = { + group: IGroupMarkSpec; // Nested group marks + symbol: ISymbolMarkSpec; // Symbol marks + rule: IRuleMarkSpec; // Rule/line marks + line: ILineMarkSpec; // Line marks + text: ITextMarkSpec; // Text marks + rect: IRectMarkSpec; // Rectangle marks + image: IImageMarkSpec; // Image marks + path: IPathMarkSpec; // Path marks + area: IAreaMarkSpec; // Area marks + arc: IArcMarkSpec; // Arc marks + polygon: IPolygonMarkSpec; // Polygon marks + boxPlot: IBoxPlotMarkSpec; // Box plot marks + linkPath: ILinkPathMarkSpec; // Link path marks + ripple: IRippleMarkSpec; // Ripple marks +}; +``` + +### Child Mark Specification + +```typescript +interface ChildMarkConfig { + /** Array of child mark specifications */ + children?: ICustomMarkSpec[]; +} + +interface ICustomMarkSpec { + type: T; // Child mark type + name?: string; // Child mark name + dataIndex?: number; // Child data index + dataKey?: string | ((datum: any) => string); // Child data key + dataId?: StringOrNumber; // Child data ID + componentType?: string; // Child component type + animation?: boolean; // Child animation + parent?: string; // Child parent ID + + // Child mark styling + id?: StringOrNumber; + interactive?: boolean; + zIndex?: number; + visible?: boolean; + style?: ConvertToMarkStyleSpec; + state?: IMarkStateFullSpec; + support3d?: boolean; + customShape?: (datum: any[], attrs: any, path: ICustomPath2D) => ICustomPath2D; +} +``` + +## Progressive Rendering Configuration + +### Mark Progressive Configuration (Inherited) + +```typescript +interface IMarkProgressiveConfig { + /** Progressive rendering configuration for large datasets */ + progressive?: { + /** Enable progressive rendering */ + enable?: boolean; + /** Batch size for rendering */ + threshold?: number; + /** Rendering chunk size */ + step?: number; + }; +} +``` + +## Dependency Type Definitions + +### Group Mark Style Types + +```typescript +interface IGroupMarkSpec extends ICommonSpec { + /** Group fill color */ + fill?: string; + + /** Group stroke color */ + stroke?: string; + + /** Group stroke width */ + strokeWidth?: number; + + /** Group opacity */ + opacity?: number; + + /** Group clip path */ + clip?: boolean; + + /** Group transform */ + transform?: string; + + // ... additional group style properties +} +``` + +### Animation and Model Specifications + +```typescript +interface IAnimationSpec { + // Animation configuration interface +} + +interface IModelSpec { + // Model specification interface +} +``` + +### Basic Types + +```typescript +type StringOrNumber = string | number; +type Datum = Record; + +enum MarkTypeEnum { + group = 'group', + symbol = 'symbol', + rule = 'rule', + line = 'line', + text = 'text', + rect = 'rect', + image = 'image', + path = 'path', + area = 'area', + arc = 'arc', + polygon = 'polygon', + boxPlot = 'boxPlot', + linkPath = 'linkPath', + ripple = 'ripple' +} +``` + +### VRender Types + +```typescript +interface IGraphic { + // VRender graphic element interface +} + +interface IMark { + // VChart mark interface +} + +interface ICustomPath2D { + // Custom path interface +} +``` + +## Usage Examples + +### Basic Extension Group Mark + +```typescript +const basicGroupMark: IExtensionGroupMarkSpec = { + type: MarkTypeEnum.group, + name: 'customGroup', + visible: true, + style: { + fill: 'transparent', + stroke: '#cccccc', + strokeWidth: 1 + }, + children: [ + { + type: 'rect', + style: { + fill: '#ff0000', + width: 20, + height: 10 + } + }, + { + type: 'text', + style: { + text: 'Label', + fontSize: 12, + fill: '#333333' + } + } + ] +}; +``` + +### Hierarchical Group Structure + +```typescript +const hierarchicalGroup: IExtensionGroupMarkSpec = { + type: MarkTypeEnum.group, + name: 'mainGroup', + dataIndex: 0, + style: { + fill: 'transparent' + }, + children: [ + { + type: 'group', + name: 'subGroup1', + style: { fill: 'rgba(255, 0, 0, 0.1)' }, + children: [ + { + type: 'symbol', + style: { + fill: '#ff0000', + size: 8, + shape: 'circle' + } + }, + { + type: 'text', + style: { + text: datum => datum.label, + fontSize: 10, + fill: '#333' + } + } + ] + }, + { + type: 'group', + name: 'subGroup2', + style: { fill: 'rgba(0, 255, 0, 0.1)' }, + children: [ + { + type: 'rect', + style: { + fill: '#00ff00', + width: 15, + height: 15 + } + } + ] + } + ] +}; +``` + +### Interactive Group with State Management + +```typescript +const interactiveGroup: IExtensionGroupMarkSpec = { + type: MarkTypeEnum.group, + name: 'interactiveGroup', + interactive: true, + dataKey: datum => `group_${datum.id}`, + style: { + fill: 'transparent', + stroke: '#999999', + strokeWidth: 1 + }, + state: { + hover: { + style: { + stroke: '#ff0000', + strokeWidth: 2 + } + }, + selected: { + style: { + fill: 'rgba(255, 0, 0, 0.1)', + stroke: '#ff0000', + strokeWidth: 3 + } + } + }, + stateSort: (a, b) => (a === 'selected' ? 1 : -1), + children: [ + { + type: 'symbol', + interactive: true, + style: { + fill: '#1890ff', + size: 12 + }, + state: { + hover: { fill: '#40a9ff', size: 14 }, + selected: { fill: '#096dd9', size: 16 } + } + }, + { + type: 'text', + style: { + text: datum => datum.name, + fontSize: 11, + fill: '#666' + }, + state: { + hover: { fill: '#333', fontSize: 12 }, + selected: { fill: '#000', fontWeight: 'bold' } + } + } + ] +}; +``` + +### Data-Driven Group Configuration + +```typescript +const dataDrivenGroup: IExtensionGroupMarkSpec = { + type: MarkTypeEnum.group, + name: 'dataDrivenGroup', + dataIndex: 1, + dataKey: 'groupKey', + componentType: 'annotation', + style: { + fill: 'transparent' + }, + children: [ + { + type: 'rect', + dataKey: 'backgroundKey', + style: { + fill: datum => datum.bgColor || '#f0f0f0', + width: datum => datum.width || 50, + height: datum => datum.height || 30, + cornerRadius: 4 + } + }, + { + type: 'text', + dataKey: 'labelKey', + style: { + text: datum => datum.label || '', + fontSize: datum => datum.fontSize || 12, + fill: datum => datum.textColor || '#333', + textAlign: 'center', + textBaseline: 'middle' + } + }, + { + type: 'symbol', + dataKey: 'iconKey', + style: { + shape: datum => datum.iconShape || 'circle', + size: datum => datum.iconSize || 8, + fill: datum => datum.iconColor || '#666' + } + } + ] +}; +``` + +### Animated Group with 3D Support + +```typescript +const animatedGroup: IExtensionGroupMarkSpec = { + type: MarkTypeEnum.group, + name: 'animatedGroup', + animation: true, + support3d: true, + style: { + fill: 'transparent' + }, + children: [ + { + type: 'path', + animation: true, + support3d: true, + style: { + path: 'M 0 0 L 10 10 L 0 20 Z', + fill: '#ff6b6b', + stroke: '#ff5252', + strokeWidth: 2 + }, + customShape: (datum, attrs, path) => { + // Custom 3D path generation + const z = datum.z || 0; + path.moveTo(0, 0); + path.lineTo(10 + z, 10); + path.lineTo(z, 20); + path.closePath(); + return path; + } + }, + { + type: 'text', + animation: true, + style: { + text: '3D Label', + fontSize: 10, + fill: '#333', + z: datum => datum.z || 0 + } + } + ] +}; +``` + +### Custom Layout Group + +```typescript +const customLayoutGroup: IExtensionGroupMarkSpec = { + type: MarkTypeEnum.group, + name: 'customLayoutGroup', + parent: 'mainContainer', + zIndex: 100, + customShape: (datum, attrs, path) => { + // Custom group bounds calculation + const { width, height } = attrs; + path.rect(0, 0, width || 100, height || 50); + return path; + }, + children: [ + { + type: 'line', + name: 'connector', + style: { + x1: 0, + y1: 25, + x2: 100, + y2: 25, + stroke: '#ddd', + strokeWidth: 1, + lineDash: [5, 5] + } + }, + { + type: 'symbol', + name: 'startPoint', + style: { + x: 0, + y: 25, + size: 6, + fill: '#52c41a', + shape: 'circle' + } + }, + { + type: 'symbol', + name: 'endPoint', + style: { + x: 100, + y: 25, + size: 6, + fill: '#f5222d', + shape: 'circle' + } + } + ] +}; +``` + +### Filter-Based State Group + +```typescript +const filterStateGroup: IExtensionGroupMarkSpec = { + type: MarkTypeEnum.group, + name: 'filterStateGroup', + state: { + highlight: { + filter: { + fields: { + category: { type: 'ordinal', domain: ['A', 'B'] } + } + }, + level: 1, + style: { + stroke: '#1890ff', + strokeWidth: 2 + } + }, + dimmed: { + filter: (datum, options) => { + return datum.value < options.mark?.threshold; + }, + level: 0, + style: { + opacity: 0.3 + } + } + }, + children: [ + { + type: 'rect', + style: { + fill: '#1890ff', + width: 40, + height: 20 + }, + state: { + highlight: { + style: { fill: '#40a9ff' } + }, + dimmed: { + style: { fill: '#d9d9d9' } + } + } + } + ] +}; +``` + +## Usage Context + +`IExtensionGroupMarkSpec` is used for creating hierarchical mark structures in VChart series extensions: + +- **Composite Elements**: Building complex visual elements from multiple primitive marks +- **Hierarchical Organization**: Creating nested group structures for logical organization +- **Interactive Units**: Grouping related marks for unified interaction handling +- **Layout Containers**: Using groups as layout containers for child mark positioning +- **State Management**: Coordinated state changes across multiple child marks +- **3D Rendering**: Supporting three-dimensional group rendering with child elements + +Extension group marks are particularly useful for: + +- Creating custom annotation components +- Building complex chart elements (legends, tooltips, callouts) +- Implementing composite interactive elements +- Supporting hierarchical data visualization +- Creating reusable visual components +- Managing complex mark relationships and dependencies diff --git a/skills/vchart-development-skill/references/type-details/IExtensionMarkSpec-Type-Definition.md b/skills/vchart-development-skill/references/type-details/IExtensionMarkSpec-Type-Definition.md new file mode 100644 index 0000000000..4ce4accfe2 --- /dev/null +++ b/skills/vchart-development-skill/references/type-details/IExtensionMarkSpec-Type-Definition.md @@ -0,0 +1,214 @@ +## Overview + +`IExtensionMarkSpec` is an interface for defining series extension marks in VChart, extending `ICustomMarkSpec` and supporting all mark types except 'group': + +```typescript +export interface IExtensionMarkSpec> extends ICustomMarkSpec +``` + +## Base Structure + +`IExtensionMarkSpec` extends `ICustomMarkSpec` which combines multiple specifications: + +```typescript +interface ICustomMarkSpec + extends IModelSpec, + IMarkSpec, + IAnimationSpec { + // Core configuration + type: T; // Mark type (required) + name?: string; // Mark name for event filtering @since 1.12.5 + dataIndex?: number; // Associated data index @default Same as series data + dataKey?: string | ((datum: any) => string); // Data-Mark binding key @support since 1.9.5 + dataId?: StringOrNumber; // Associated data ID + componentType?: string; // Component type specification @support since 1.9.0 + animation?: boolean; // Animation enable @since 1.11.0 + parent?: string; // Parent element ID @since 1.13.0 +} +``` + +## Core Configuration + +### Extension Mark Specific Properties + +```typescript +interface IExtensionMarkSpec { + /** Associated data index @default Same as series data */ + dataIndex?: number; + + /** Data-Mark binding key. If consistent with series data, can be omitted @support since 1.9.5 */ + dataKey?: string | ((datum: any) => string); + + /** Associated data ID */ + dataId?: StringOrNumber; + + /** Component type specification @support since 1.9.0 */ + componentType?: string; +} +``` + +### Basic Configuration (from IMarkSpec) + +```typescript +interface IMarkSpec { + /** User-defined ID */ + id?: StringOrNumber; + + /** Interactive response */ + interactive?: boolean; + + /** Layer order */ + zIndex?: number; + + /** Visibility */ + visible?: boolean; + + /** Default style */ + style?: ConvertToMarkStyleSpec; + + /** State-based style configuration */ + state?: IMarkStateFullSpec; + + /** State sorting method @since 1.9.0 */ + stateSort?: (stateA: string, stateB: string) => number; + + /** 3D perspective support */ + support3d?: boolean; + + /** Custom shape function */ + customShape?: (datum: any[], attrs: any, path: ICustomPath2D) => ICustomPath2D; +} +``` + +## State Configuration + +### State Styles + +```typescript +interface IMarkStateFullSpec { + /** Normal state style */ + normal?: IMarkStateSpec | IMarkStateStyleSpec; + + /** Hover state style */ + hover?: IMarkStateSpec | IMarkStateStyleSpec; + + /** Non-hover state style */ + hover_reverse?: IMarkStateSpec | IMarkStateStyleSpec; + + /** Selected state style */ + selected?: IMarkStateSpec | IMarkStateStyleSpec; + + /** Non-selected state style */ + selected_reverse?: IMarkStateSpec | IMarkStateStyleSpec; +} +``` + +### State Specification + +```typescript +interface IMarkStateSpec { + /** Filter criteria */ + filter?: IMarkStateFilter; + + /** State priority level */ + level?: number | undefined; + + /** State style */ + style: ConvertToMarkStyleSpec; +} + +type IMarkStateStyleSpec = ConvertToMarkStyleSpec; +``` + +### State Filters + +```typescript +type IMarkStateFilter = + | { + /** Dimension filtering */ + fields: { [key in string]: { type: 'ordinal' | 'linear'; domain: StringOrNumber[] } }; + } + | { + /** Data filtering */ + datums: Datum[]; + datumKeys: string[]; + } + | { + /** Item filtering */ + items: IGraphic[]; + } + | (( + datum: Datum, + options: { + mark?: IMark; + type?: string; + renderNode?: IGraphic; + } + ) => boolean); +``` + +## Supported Mark Types + +EnableMarkType (excluding 'group'): + +```typescript +type IBuildinMarkSpec = { + symbol: ISymbolMarkSpec; // Symbol marks + rule: IRuleMarkSpec; // Rule/line marks + line: ILineMarkSpec; // Line marks + text: ITextMarkSpec; // Text marks + rect: IRectMarkSpec; // Rectangle marks + image: IImageMarkSpec; // Image marks + path: IPathMarkSpec; // Path marks + area: IAreaMarkSpec; // Area marks + arc: IArcMarkSpec; // Arc marks + polygon: IPolygonMarkSpec; // Polygon marks + boxPlot: IBoxPlotMarkSpec; // Box plot marks + linkPath: ILinkPathMarkSpec; // Link path marks + ripple: IRippleMarkSpec; // Ripple marks +}; + +type EnableMarkType = keyof IBuildinMarkSpec; +``` + +## Dependency Type Definitions + +### Basic Types + +```typescript +type StringOrNumber = string | number; +type Datum = Record; + +interface IGraphic { + // VRender graphic element interface +} + +interface IMark { + // VChart mark interface +} +``` + +### Style Conversion + +```typescript +type ConvertToMarkStyleSpec = { + // Converts mark specification to style specification + // Specific implementation depends on mark type T +}; +``` + +### Animation and Model Specs + +```typescript +interface IAnimationSpec { + // Animation configuration interface +} + +interface IModelSpec { + // Model specification interface +} + +interface IMarkProgressiveConfig { + // Progressive rendering configuration +} +``` diff --git a/skills/vchart-development-skill/references/type-details/IFunnelLabelSpec-Type-Definition.md b/skills/vchart-development-skill/references/type-details/IFunnelLabelSpec-Type-Definition.md new file mode 100644 index 0000000000..2ec528d564 --- /dev/null +++ b/skills/vchart-development-skill/references/type-details/IFunnelLabelSpec-Type-Definition.md @@ -0,0 +1,631 @@ +## Interface Overview + +```typescript +interface IFunnelLabelSpec extends Omit { + limit?: 'shapeSize' | number; +} +``` + +`IFunnelLabelSpec` 定义了漏斗图标签的完整规范。它继承自 `ILabelSpec` 的大部分属性，但排除了 `position` 和 `offset` 属性（由漏斗图组件内部控制），并添加了漏斗图特定的限制配置。 + +## Complete Flattened Type Definition + +```typescript +interface IFunnelLabelSpec { + // === Funnel-specific Properties === + limit?: 'shapeSize' | number; + + // === Basic Display Properties === + zIndex?: number; + visible?: boolean; + interactive?: boolean; + + // === Text Content & Formatting === + textType?: 'text' | 'rich'; + formatMethod?: ( + text: string | string[], + datum?: Record, + ctx?: { series?: any } + ) => + | string + | { + type: 'rich'; + text: Array<{ + text: string; + fill?: string; + fontSize?: number; + fontFamily?: string; + fontWeight?: 'normal' | 'bold' | 'bolder' | 'lighter' | number; + fontStyle?: 'normal' | 'italic' | 'oblique'; + textDecoration?: 'none' | 'underline' | 'line-through'; + script?: 'normal' | 'sub' | 'super'; + }>; + } + | { type: 'text'; text: string | number | string[] | number[] }; + formatter?: string | string[]; + + // === Visual Styling === + style?: { + [K in keyof (ITextMarkSpec | IRichTextMarkSpec)]: K extends keyof ITextMarkSpec + ? ITextMarkSpec[K] extends infer T + ? + | T + | ((datum: Record, context: any, source?: any) => T) + | { + type: + | 'linear' + | 'log' + | 'pow' + | 'sqrt' + | 'symlog' + | 'time' + | 'utc' + | 'ordinal' + | 'point' + | 'band' + | 'threshold' + | 'quantile' + | 'quantize' + | 'identity'; + domain: any[]; + range: T[]; + specified?: { [key: string]: unknown }; + clamp?: boolean; + field: string; + } + | { + scale: string; + field?: string; + changeDomain?: 'none' | 'replace' | 'expand'; + } + : never + : never; + }; + + state?: { + hover?: Partial<{ + // Text properties + text?: string | number | string[] | number[]; + dx?: number; + dy?: number; + fontSize?: number | { type: 'token'; key: string; default?: number }; + textAlign?: 'left' | 'center' | 'right' | 'start' | 'end'; + textBaseline?: 'top' | 'hanging' | 'middle' | 'alphabetic' | 'ideographic' | 'bottom'; + fontFamily?: string; + fontWeight?: 'normal' | 'bold' | 'bolder' | 'lighter' | number; + fontStyle?: 'normal' | 'italic' | 'oblique'; + maxLineWidth?: number; + ellipsis?: string; + suffixPosition?: 'start' | 'end' | 'middle'; + underline?: boolean; + underlineDash?: number[]; + underlineOffset?: number; + lineThrough?: boolean; + lineHeight?: number | string | { type: 'token'; key: string; default?: any }; + direction?: 'horizontal' | 'vertical'; + wordBreak?: 'break-word' | 'break-all' | 'keep-all'; + heightLimit?: number; + lineClamp?: number; + + // Fill properties + fill?: + | string + | { + gradient: 'linear'; + x0?: number; + y0?: number; + x1?: number; + y1?: number; + stops: Array<{ + offset: number; + color?: string; + opacity?: number; + }>; + } + | { + gradient: 'radial'; + r0?: number; + x0?: number; + y0?: number; + x1?: number; + y1?: number; + r1?: number; + stops: Array<{ + offset: number; + color?: string; + opacity?: number; + }>; + } + | { + gradient: 'conical'; + x?: number; + y?: number; + startAngle?: number; + endAngle?: number; + stops: Array<{ + offset: number; + color?: string; + opacity?: number; + }>; + } + | false + | { type: 'color'; key: string; default?: string }; + fillOpacity?: number; + background?: any | HTMLImageElement | HTMLCanvasElement | null; + + // Common properties + visible?: boolean; + x?: number; + y?: number; + z?: number; + stroke?: string | object | false | (number | boolean)[] | { type: 'color'; key: string; default?: string } | null; + strokeOpacity?: number; + opacity?: number; + lineWidth?: number; + lineDash?: number[]; + lineDashOffset?: number; + cursor?: + | 'auto' + | 'default' + | 'none' + | 'context-menu' + | 'help' + | 'pointer' + | 'progress' + | 'wait' + | 'cell' + | 'crosshair' + | 'text' + | 'vertical-text' + | 'alias' + | 'copy' + | 'move' + | 'no-drop' + | 'not-allowed' + | 'grab' + | 'grabbing' + | 'e-resize' + | 'n-resize' + | 'ne-resize' + | 'nw-resize' + | 's-resize' + | 'se-resize' + | 'sw-resize' + | 'w-resize' + | 'ew-resize' + | 'ns-resize' + | 'nesw-resize' + | 'nwse-resize' + | 'col-resize' + | 'row-resize' + | 'all-scroll' + | 'zoom-in' + | 'zoom-out'; + zIndex?: number; + angle?: number; + anchor?: [number, number]; + scaleX?: number; + scaleY?: number; + scaleCenter?: [number | string, number | string]; + alpha?: number; + beta?: number; + anchor3d?: [number, number]; + pickMode?: 'accurate' | 'imprecise' | 'custom'; + boundsMode?: 'accurate' | 'imprecise'; + }>; + hover_reverse?: Partial<{ + // 同 hover 的完整类型定义 + text?: string | number | string[] | number[]; + dx?: number; + dy?: number; + fontSize?: number | { type: 'token'; key: string; default?: number }; + textAlign?: 'left' | 'center' | 'right' | 'start' | 'end'; + textBaseline?: 'top' | 'hanging' | 'middle' | 'alphabetic' | 'ideographic' | 'bottom'; + fontFamily?: string; + fontWeight?: 'normal' | 'bold' | 'bolder' | 'lighter' | number; + fontStyle?: 'normal' | 'italic' | 'oblique'; + fill?: string | object | false | { type: 'color'; key: string; default?: string }; + fillOpacity?: number; + visible?: boolean; + opacity?: number; + stroke?: string | object | false; + strokeOpacity?: number; + lineWidth?: number; + cursor?: string; + zIndex?: number; + // ... 其他所有样式属性 + }>; + selected?: Partial<{ + // 同 hover 的完整类型定义 + text?: string | number | string[] | number[]; + dx?: number; + dy?: number; + fontSize?: number | { type: 'token'; key: string; default?: number }; + textAlign?: 'left' | 'center' | 'right' | 'start' | 'end'; + textBaseline?: 'top' | 'hanging' | 'middle' | 'alphabetic' | 'ideographic' | 'bottom'; + fontFamily?: string; + fontWeight?: 'normal' | 'bold' | 'bolder' | 'lighter' | number; + fontStyle?: 'normal' | 'italic' | 'oblique'; + fill?: string | object | false | { type: 'color'; key: string; default?: string }; + fillOpacity?: number; + visible?: boolean; + opacity?: number; + stroke?: string | object | false; + strokeOpacity?: number; + lineWidth?: number; + cursor?: string; + zIndex?: number; + // ... 其他所有样式属性 + }>; + selected_reverse?: Partial<{ + // 同 hover 的完整类型定义 + text?: string | number | string[] | number[]; + dx?: number; + dy?: number; + fontSize?: number | { type: 'token'; key: string; default?: number }; + textAlign?: 'left' | 'center' | 'right' | 'start' | 'end'; + textBaseline?: 'top' | 'hanging' | 'middle' | 'alphabetic' | 'ideographic' | 'bottom'; + fontFamily?: string; + fontWeight?: 'normal' | 'bold' | 'bolder' | 'lighter' | number; + fontStyle?: 'normal' | 'italic' | 'oblique'; + fill?: string | object | false | { type: 'color'; key: string; default?: string }; + fillOpacity?: number; + visible?: boolean; + opacity?: number; + stroke?: string | object | false; + strokeOpacity?: number; + lineWidth?: number; + cursor?: string; + zIndex?: number; + // ... 其他所有样式属性 + }>; + }; + + // === Layout & Collision Detection === + overlap?: { + hideOnHit?: boolean; + avoidBaseMark?: boolean; + strategy?: Array<{ + type: 'position' | 'bound'; + position?: string[]; + bound?: object; + }>; + } & { + padding?: { + top?: number; + right?: number; + bottom?: number; + left?: number; + }; + }; + + smartInvert?: { + mode?: 'lightness' | 'brightness'; + threshold?: number; + fillOpacity?: number; + }; + + // === Data Processing === + stackDataFilterType?: 'min' | 'max'; + dataFilter?: (data: any[], labelMark: any) => any[]; + + // === Custom Layout Functions === + customLayoutFunc?: (data: any[], labels: any[], region: any) => void; + customOverlapFunc?: (labels: any[], labelMark: any) => void; + onAfterOverlapping?: (labels: any[]) => void; + + // === Advanced Configuration === + labelLayout?: 'series' | 'region'; + support3d?: boolean; + syncState?: boolean; + showRelatedMarkTooltip?: boolean; + + // === Animation Properties === + animation?: object; + animationEnter?: object; + animationUpdate?: object; + animationExit?: object; + + // === Excluded Properties (NOT included in IFunnelLabelSpec) === + // position?: string; // 被 Omit 排除 + // offset?: number; // 被 Omit 排除 +} +``` + +### Text Mark Specifications + +```typescript +type IComposedTextMarkSpec = ITextMarkSpec | IRichTextMarkSpec; + +interface ITextMarkSpec extends IFillMarkSpec { + text?: string | number | string[] | number[]; + dx?: number; + dy?: number; + fontSize?: number | ITokenKey; + textAlign?: TextAlign; + textBaseline?: TextBaseLine; + fontFamily?: string; + fontWeight?: FontWeight; + fontStyle?: FontStyle; + maxLineWidth?: number; + ellipsis?: string; + suffixPosition?: 'start' | 'end' | 'middle'; + underline?: boolean; + underlineDash?: number[]; + underlineOffset?: number; + lineThrough?: boolean; + lineHeight?: number | string | ITokenKey; + poptip?: PopTipAttributes; + direction?: 'horizontal' | 'vertical'; + wordBreak?: 'break-word' | 'break-all' | 'keep-all'; + heightLimit?: number; + lineClamp?: number; +} + +type IRichTextMarkSpec = IRichTextAttribute & + IFillMarkSpec & { + type: 'rich'; + text: IRichTextAttribute['textConfig']; + }; +``` + +### Fill Mark Specification + +```typescript +interface IFillMarkSpec extends ICommonSpec { + fill?: VisualType | IGradient | false | IColorKey; + fillOpacity?: number; + background?: IColor | HTMLImageElement | HTMLCanvasElement | null; +} + +interface ICommonSpec { + visible?: boolean; + x?: number; + y?: number; + z?: number; + stroke?: string | IGradient | false | (number | boolean)[] | IColorKey | null; + strokeOpacity?: number; + opacity?: number; + lineWidth?: number; + lineDash?: number[]; + lineDashOffset?: number; + cursor?: Cursor; + zIndex?: number; + angle?: number; + anchor?: [number, number]; + scaleX?: number; + scaleY?: number; + scaleCenter?: [number | string, number | string]; + alpha?: number; + beta?: number; + anchor3d?: [number, number]; + pickMode?: 'accurate' | 'imprecise' | 'custom'; + boundsMode?: 'accurate' | 'imprecise'; +} +``` + +### Gradient Types + +```typescript +type IGradient = IGradientLinear | IGradientRadial | IGradientConical; + +interface IGradientLinear { + x0?: GradientPropValue; + y0?: GradientPropValue; + x1?: GradientPropValue; + y1?: GradientPropValue; + stops: GradientStop[]; + gradient: 'linear'; +} + +interface IGradientRadial { + r0?: GradientPropValue; + x0?: GradientPropValue; + y0?: GradientPropValue; + x1?: GradientPropValue; + y1?: GradientPropValue; + r1?: GradientPropValue; + stops: GradientStop[]; + gradient: 'radial'; +} + +interface IGradientConical { + x?: GradientPropValue; + y?: GradientPropValue; + startAngle?: GradientPropValue; + endAngle?: GradientPropValue; + stops: GradientStop[]; + gradient: 'conical'; +} + +type GradientPropValue = ValueType | FunctionType; +type GradientStop = { + offset: GradientPropValue; + color?: GradientPropValue; + opacity?: number; +}; +``` + +### State Styling + +```typescript +type LabelStateStyle = { + hover?: T; + hover_reverse?: T; + selected?: T; + selected_reverse?: T; +}; +``` + +### Animation Types + +```typescript +type ILabelAnimationSpec = Pick; +``` + +### Token System + +```typescript +interface ITokenKey { + type: 'token'; + key: string; + default?: T; +} + +interface IColorKey { + type: 'color'; + key: string; + default?: string; +} +``` + +### Text Formatting Types + +```typescript +type TextAlign = 'left' | 'center' | 'right' | 'start' | 'end'; +type TextBaseLine = 'top' | 'hanging' | 'middle' | 'alphabetic' | 'ideographic' | 'bottom'; +type FontWeight = 'normal' | 'bold' | 'bolder' | 'lighter' | number; +type FontStyle = 'normal' | 'italic' | 'oblique'; + +type Cursor = + | 'auto' + | 'default' + | 'none' + | 'context-menu' + | 'help' + | 'pointer' + | 'progress' + | 'wait' + | 'cell' + | 'crosshair' + | 'text' + | 'vertical-text' + | 'alias' + | 'copy' + | 'move' + | 'no-drop' + | 'not-allowed' + | 'grab' + | 'grabbing' + | 'e-resize' + | 'n-resize' + | 'ne-resize' + | 'nw-resize' + | 's-resize' + | 'se-resize' + | 'sw-resize' + | 'w-resize' + | 'ew-resize' + | 'ns-resize' + | 'nesw-resize' + | 'nwse-resize' + | 'col-resize' + | 'row-resize' + | 'all-scroll' + | 'zoom-in' + | 'zoom-out'; + +type ScaleType = + | 'linear' + | 'log' + | 'pow' + | 'sqrt' + | 'symlog' + | 'time' + | 'utc' + | 'ordinal' + | 'point' + | 'band' + | 'threshold' + | 'quantile' + | 'quantize' + | 'identity'; +``` + +### Rich Text Types + +```typescript +interface IRichTextCharacter { + text: string; + fill?: string; + fontSize?: number; + fontFamily?: string; + fontWeight?: FontWeight; + fontStyle?: FontStyle; + textDecoration?: 'none' | 'underline' | 'line-through'; + script?: 'normal' | 'sub' | 'super'; +} + +interface IRichTextAttribute { + textConfig: IRichTextCharacter[]; +} +``` + +### External Dependencies + +```typescript +interface PopTipAttributes { + // PopTip configuration from @visactor/vrender-components + visible?: boolean; + title?: string; + content?: string; + placement?: string; + // ... other poptip properties +} + +interface IColor { + // Color interface from @visactor/vrender-core +} + +type Datum = Record; + +interface ISeries { + // Series interface - represents chart series +} + +interface IModelMarkAttributeContext { + // Mark attribute context for function evaluation +} + +interface DataView { + // DataView interface from @visactor/vdataset +} + +interface BaseLabelAttrs { + overlap: { + // Complex overlap detection and avoidance configuration + hideOnHit?: boolean; + avoidBaseMark?: boolean; + strategy?: Array<{ + type: 'position' | 'bound'; + position?: string[]; + bound?: object; + }>; + }; + smartInvert: { + // Smart color inversion configuration + mode?: 'lightness' | 'brightness'; + threshold?: number; + fillOpacity?: number; + }; + dataFilter: (data: any[], labelMark: any) => any[]; + customLayoutFunc: (data: any[], labels: any[], region: any) => void; + customOverlapFunc: (labels: any[], labelMark: any) => void; + onAfterOverlapping: (labels: any[]) => void; + animation: object; // Animation configuration + animationEnter: object; // Enter animation configuration + animationUpdate: object; // Update animation configuration + animationExit: object; // Exit animation configuration +} + +interface DataLabelAttrs { + size: { + padding: { + top?: number; + right?: number; + bottom?: number; + left?: number; + }; + }; +} +``` diff --git a/skills/vchart-development-skill/references/type-details/IFunnelOuterLabelSpec-Type-Definition.md b/skills/vchart-development-skill/references/type-details/IFunnelOuterLabelSpec-Type-Definition.md new file mode 100644 index 0000000000..2e126f953e --- /dev/null +++ b/skills/vchart-development-skill/references/type-details/IFunnelOuterLabelSpec-Type-Definition.md @@ -0,0 +1,268 @@ +# IFunnelOuterLabelSpec Type Definition + +## Overview + +```typescript +interface IFunnelOuterLabelSpec extends IMarkSpec { + // Label formatting and positioning + formatMethod?: IFormatMethod<[text: string | string[], datum?: Datum]>; // Label format function + position?: 'left' | 'right' | 'top' | 'bottom'; // Label position layout + spaceWidth?: number; // Gap between text and guide line + alignLabel?: boolean; // Text alignment control + style?: ITextMarkSpec; // Text style configuration + + // Guide line configuration + line?: { + minLength?: number; // Minimum line length @since 1.12.7 + } & IMarkSpec; // Line mark specification + + // Inherited from IMarkSpec + id?: string | number; // User-defined ID + interactive?: boolean; // Interaction response + zIndex?: number; // Layer index + visible?: boolean; // Visibility control + support3d?: boolean; // 3D support + customShape?: (datum: any[], attrs: any, path: ICustomPath2D) => ICustomPath2D; // Custom shape + style?: ConvertToMarkStyleSpec; // Default style + state?: IMarkStateFullSpec; // State-based styles + stateSort?: (stateA: string, stateB: string) => number; // State sorting @since 1.9.0 +} +``` + +## Position Type + +```typescript +type FunnelLabelPosition = 'left' | 'right' | 'top' | 'bottom'; +``` + +**FunnelLabelPosition 标签位置：** + +- `'left'`: 左侧布局 +- `'right'`: 右侧布局 +- `'top'`: 顶部布局 +- `'bottom'`: 底部布局 + +## Format Method Type + +```typescript +type IFormatMethod = ( + ...args: T +) => ReturnType> | ReturnType>; + +type ITextFormatMethod = ( + ...args: T +) => ITextMarkSpec['text'] | { type: 'text'; text: ITextMarkSpec['text'] }; + +type IRichTextFormatMethod = (...args: T) => + | { + type: 'rich'; + text: IRichTextCharacter[]; + } + | IRichTextCharacter[]; +``` + +**IFormatMethod 格式化方法：** +接收文本和数据参数，返回格式化后的文本内容或富文本配置。 + +## Mark Specification Type + +```typescript +type IMarkSpec = { + id?: string | number; // Mark identifier + interactive?: boolean; // Interaction capability + zIndex?: number; // Layer order + visible?: boolean; // Visibility state + style?: ConvertToMarkStyleSpec; // Visual styles + state?: IMarkStateFullSpec; // State configurations + stateSort?: (stateA: string, stateB: string) => number; // State priority + support3d?: boolean; // 3D rendering support + customShape?: (datum: any[], attrs: any, path: ICustomPath2D) => ICustomPath2D; // Custom geometry +} & IMarkProgressiveConfig; +``` + +**IMarkSpec 图形标记规范：** +定义图形元素的基础配置，包括样式、状态、交互等属性。 + +## Text Mark Specification + +```typescript +type IComposedTextMarkSpec = ITextMarkSpec | IRichTextMarkSpec; + +interface ITextMarkSpec extends IFillMarkSpec { + text?: string | number | string[] | number[]; // Text content + dx?: number; // X offset + dy?: number; // Y offset + fontSize?: number | ITokenKey; // Font size + textAlign?: TextAlign; // Horizontal alignment + textBaseline?: TextBaseLine; // Vertical alignment + fontFamily?: string; // Font family + fontWeight?: FontWeight; // Font weight + fontStyle?: FontStyle; // Font style + maxLineWidth?: number; // Maximum line width + ellipsis?: string; // Ellipsis character + suffixPosition?: 'start' | 'end' | 'middle'; // Suffix position + underline?: boolean; // Underline style + underlineDash?: number[]; // Underline dash pattern + underlineOffset?: number; // Underline offset + lineThrough?: boolean; // Strike-through style + lineHeight?: number | string | ITokenKey; // Line height + direction?: 'horizontal' | 'vertical'; // Text direction + wordBreak?: 'break-word' | 'break-all' | 'keep-all'; // Word breaking + heightLimit?: number; // Height constraint + lineClamp?: number; // Line clamping + whiteSpace?: 'normal' | 'no-wrap'; // White space handling +} +``` + +## Visual Type System + +### Visual Mapping Types + +```typescript +type VisualType = ValueType | FunctionType | IVisual; + +type ValueType = T; +type FunctionType = (datum: Datum, context: IModelMarkAttributeContext, source?: DataView) => T; + +type IVisual = IVisualSpecStyle | IVisualScale; + +interface IVisualSpecStyle extends IVisualSpecBase { + /** Data field for mapping */ + field?: string; +} + +interface IVisualScale { + /** Scale ID reference */ + scale: string; + + /** Data field for mapping */ + field?: string; + + /** Domain change strategy @default 'none' */ + changeDomain?: 'none' | 'replace' | 'expand'; +} +``` + +### Gradient Types + +```typescript +type IGradient = IGradientLinear | IGradientRadial | IGradientConical; + +interface IGradientLinear { + gradient: 'linear'; + x0?: GradientPropValue; // Start x (0-1) + y0?: GradientPropValue; // Start y (0-1) + x1?: GradientPropValue; // End x (0-1) + y1?: GradientPropValue; // End y (0-1) + stops: GradientStop[]; +} + +interface IGradientRadial { + gradient: 'radial'; + r0?: GradientPropValue; // Start radius + x0?: GradientPropValue; // Start x + y0?: GradientPropValue; // Start y + x1?: GradientPropValue; // End x + y1?: GradientPropValue; // End y + r1?: GradientPropValue; // End radius + stops: GradientStop[]; +} + +interface IGradientConical { + gradient: 'conical'; + x?: GradientPropValue; // Center x + y?: GradientPropValue; // Center y + startAngle?: GradientPropValue; // Start angle + endAngle?: GradientPropValue; // End angle + stops: GradientStop[]; +} + +type GradientStop = { + offset: GradientPropValue; // 0-1 offset + color?: GradientPropValue; // Color + opacity?: number; // Opacity +}; + +type GradientPropValue = ValueType | FunctionType; +``` + +## Dependency Type Definitions + +### Theme and Color Types + +```typescript +interface IColorKey { + // Theme color key interface +} + +interface IColor { + // VRender color interface +} +``` + +### HTML Overlay Types + +```typescript +type IMarkHtmlSpec = Partial; + +interface IGraphicStyle { + html?: { + // HTML overlay configuration + }; +} +``` + +### Cursor Types + +```typescript +type Cursor = + | 'auto' + | 'default' + | 'none' + | 'context-menu' + | 'help' + | 'pointer' + | 'progress' + | 'wait' + | 'cell' + | 'crosshair' + | 'text' + | 'vertical-text' + | 'alias' + | 'copy' + | 'move' + | 'no-drop' + | 'not-allowed' + | 'grab' + | 'grabbing' + | 'e-resize' + | 'n-resize' + | 'ne-resize' + | 'nw-resize' + | 's-resize' + | 'se-resize' + | 'sw-resize' + | 'w-resize' + | 'ew-resize' + | 'ns-resize' + | 'nesw-resize' + | 'nwse-resize' + | 'col-resize' + | 'row-resize' + | 'all-scroll' + | 'zoom-in' + | 'zoom-out'; +``` + +### Context Types + +```typescript +interface IModelMarkAttributeContext { + // Mark attribute context for function evaluation +} + +interface Datum { + // Data record interface + [key: string]: any; +} +``` diff --git a/skills/vchart-development-skill/references/type-details/IGroupMarkSpec-Type-Definition.md b/skills/vchart-development-skill/references/type-details/IGroupMarkSpec-Type-Definition.md new file mode 100644 index 0000000000..05448c0cf6 --- /dev/null +++ b/skills/vchart-development-skill/references/type-details/IGroupMarkSpec-Type-Definition.md @@ -0,0 +1,183 @@ +## Overview + +```typescript +interface IGroupMarkSpec { + // Group-specific properties + clip?: boolean; + width?: number; + height?: number; + cornerRadius?: number | number[]; + + // From IFillMarkSpec + fill?: VisualType | IGradient | false | IColorKey; + fillOpacity?: number; + background?: IColor | HTMLImageElement | HTMLCanvasElement | null; + + // From ICommonSpec + visible?: boolean; + x?: number; + y?: number; + z?: number; + stroke?: string | IGradient | false | (number | boolean)[] | IColorKey | null; + strokeOpacity?: number; + opacity?: number; + lineWidth?: number; + lineDash?: number[]; + lineDashOffset?: number; + cursor?: Cursor; + zIndex?: number; + angle?: number; + anchor?: [number, number]; + scaleX?: number; + scaleY?: number; + scaleCenter?: [number | string, number | string]; + alpha?: number; + beta?: number; + anchor3d?: [number, number]; + pickMode?: 'accurate' | 'imprecise' | 'custom'; + boundsMode?: 'accurate' | 'imprecise'; + pickStrokeBuffer?: number; + texture?: TextureType | string; + textureColor?: string; + textureSize?: number; + texturePadding?: number; + outerBorder?: IBorder; + innerBorder?: IBorder; + html?: IMarkHtmlSpec; +} +``` + +## Dependency Types + +### Visual Mapping System + +```typescript +type VisualType = ValueType | FunctionType | IVisual; +type ValueType = T; +type FunctionType = (datum: Datum, context: IModelMarkAttributeContext, source?: DataView) => T; + +interface IVisual { + type: ScaleType; + domain: D[]; + range: R[]; + field?: string; + specified?: { [key: string]: unknown }; + clamp?: boolean; +} +``` + +### Gradient System + +```typescript +type IGradient = IGradientLinear | IGradientRadial | IGradientConical; + +interface IGradientLinear { + gradient: 'linear'; + x0?: GradientPropValue; + y0?: GradientPropValue; + x1?: GradientPropValue; + y1?: GradientPropValue; + stops: GradientStop[]; +} + +interface IGradientRadial { + gradient: 'radial'; + r0?: GradientPropValue; + x0?: GradientPropValue; + y0?: GradientPropValue; + x1?: GradientPropValue; + y1?: GradientPropValue; + r1?: GradientPropValue; + stops: GradientStop[]; +} + +interface IGradientConical { + gradient: 'conical'; + x?: GradientPropValue; + y?: GradientPropValue; + startAngle?: GradientPropValue; + endAngle?: GradientPropValue; + stops: GradientStop[]; +} + +type GradientPropValue = ValueType | FunctionType; + +type GradientStop = { + offset: GradientPropValue; + color?: GradientPropValue; + opacity?: number; +}; +``` + +### Border Configuration + +```typescript +interface IBorder { + distance: number | string; + stroke?: string | IGradient; + strokeOpacity?: number; + lineWidth?: number; + lineDash?: number[]; + lineDashOffset?: number; +} +``` + +### Color and Theme Types + +```typescript +type IColor = string | IGradient | IColorKey; + +interface IColorKey { + // Color theme key reference +} + +interface ITokenKey { + // Token theme key reference +} +``` + +### Texture Types + +```typescript +type TextureType = 'circle' | 'dimond' | 'rect' | 'vertical-line' | 'horizontal-line' | 'bias-lr' | 'bias-rl' | 'grid'; +``` + +### HTML Integration + +```typescript +type IMarkHtmlSpec = Partial; + +interface IGraphicStyle { + html?: { + anchorType?: 'top' | 'middle' | 'bottom'; + }; +} +``` + +### Scale and Context Types + +```typescript +type ScaleType = + | 'linear' + | 'ordinal' + | 'band' + | 'point' + | 'time' + | 'log' + | 'pow' + | 'sqrt' + | 'symlog' + | 'threshold' + | 'quantile' + | 'quantize'; + +type Cursor = 'auto' | 'default' | 'pointer' | 'crosshair' | 'move' | 'text' | 'wait' | 'help' | 'not-allowed' | string; + +interface Datum { + [key: string]: any; +} + +interface IModelMarkAttributeContext { + // Mark attribute evaluation context +} +``` diff --git a/skills/vchart-development-skill/references/type-details/IHierarchyData-Type-Definition.md b/skills/vchart-development-skill/references/type-details/IHierarchyData-Type-Definition.md new file mode 100644 index 0000000000..fca99bad11 --- /dev/null +++ b/skills/vchart-development-skill/references/type-details/IHierarchyData-Type-Definition.md @@ -0,0 +1,305 @@ +# IHierarchyData 类型定义 + +## 基本信息 + +`IHierarchyData` 是 VChart 中用于处理层级数据的联合类型，主要用于树形图表（如 treemap、sunburst、circle packing 等）的数据结构定义。该类型支持两种不同的数据形式：DataView 实例和 IHierarchyDataValues 接口。 + +```typescript +type IHierarchyData = DataView | IHierarchyDataValues; +``` + +## 核心类型组成 + +### 1. DataView（@visactor/vdataset） + +DataView 是来自 `@visactor/vdataset` 包的数据视图对象，是一个智能数据容器，提供数据处理和转换能力。 + +```typescript +// 来自 @visactor/vdataset +interface DataView { + // 数据视图的具体实现 + // 提供数据操作、统计、转换功能 + name: string | number; + latestData: any; + parse: (data: any, parser?: any) => void; + transform: (options: any) => void; + // 更多方法... +} +``` + +**特点：** +- 支持数据解析和转换 +- 提供数据统计功能 +- 支持数据管道处理 +- 可与 DataSet 配合使用 + +### 2. IHierarchyDataValues 接口 + +```typescript +interface IHierarchyDataValues extends IDataValues { + values: IHierarchyNodeData; +} +``` + +#### 2.1 基础接口 IDataValues + +```typescript +interface IDataValues { + id?: string | number; + fields?: IFields; + transforms?: ITransformOptions[]; + parser?: IParserOptions; + fromDataId?: string; + fromDataIndex?: number; +} +``` + +#### 2.2 核心节点类型 IHierarchyNodeData + +```typescript +interface IHierarchyNodeData extends Datum { + value?: number; + children?: IHierarchyNodeData[]; +} +``` + +#### 2.3 基础数据类型 Datum + +```typescript +type Datum = { + [key: string]: any; +}; +``` + +## 递归数据结构分析 + +### 层级节点结构 + +```typescript +// 层级节点的完整定义 +interface IHierarchyNodeData { + // 继承所有 Datum 属性（键值对数据） + [key: string]: any; + + // 节点数值（可选） + value?: number; + + // 子节点数组（可选，支持递归） + children?: IHierarchyNodeData[]; +} +``` + +### 数据层级示例 + +```typescript +// 典型的层级数据结构 +const hierarchyData: IHierarchyNodeData = { + name: "root", + value: 100, + children: [ + { + name: "category1", + value: 60, + children: [ + { name: "item1", value: 30 }, + { name: "item2", value: 30 } + ] + }, + { + name: "category2", + value: 40, + children: [ + { name: "item3", value: 25 }, + { name: "item4", value: 15 } + ] + } + ] +}; +``` + +## 使用场景分析 + +### 1. DataView 形式使用 + +```typescript +// 通过 DataView 处理层级数据 +import { DataView, DataSet } from '@visactor/vdataset'; + +const dataSet = new DataSet(); +const hierarchyDataView = new DataView(dataSet, { name: 'hierarchy' }); + +// 解析和转换层级数据 +hierarchyDataView.parse(rawHierarchyData); +hierarchyDataView.transform({ + type: 'hierarchyTransform', + options: { /* transform options */ } +}); + +// 在图表中使用 +const chartSpec = { + type: 'treemap', + data: hierarchyDataView, // DataView 实例 + // 其他配置... +}; +``` + +### 2. IHierarchyDataValues 形式使用 + +```typescript +// 直接使用层级数据值 +const hierarchyDataValues: IHierarchyDataValues = { + id: 'hierarchy-data', + values: { + name: 'Root', + children: [ + { + name: 'Branch 1', + value: 50, + children: [ + { name: 'Leaf 1', value: 25 }, + { name: 'Leaf 2', value: 25 } + ] + }, + { + name: 'Branch 2', + value: 30 + } + ] + } +}; + +// 在图表中使用 +const chartSpec = { + type: 'sunburst', + data: hierarchyDataValues, // IHierarchyDataValues 对象 + // 其他配置... +}; +``` + +### 3. 树形图表类型支持 + +- **Treemap（矩形树图）**: 使用层级数据表示区域大小 +- **Sunburst（旭日图）**: 使用层级数据表示环形分层 +- **Circle Packing（圆形包装图）**: 使用层级数据表示圆形嵌套 +- **Tree（树状图）**: 使用层级数据表示节点连接 + +## 相关工具函数 + +VChart 提供了多个用于处理层级数据的工具函数： + +```typescript +// 查找层级节点 +function findHierarchyNode(data: any, predicate: (node: any) => boolean): any; + +// 过滤层级数据范围 +function filterHierarchyDataByRange(data: any, range: any): any; + +// 判断是否为层级项 +function isHierarchyItem(item: any): boolean; +``` + +## 数据转换支持 + +### 层级数据统计转换 + +```typescript +// 专门的层级数据统计 +registerDataSetInstanceTransform(dataSet, 'hierarchyDimensionStatistics', hierarchyDimensionStatistics); + +// 应用统计转换 +dataView.transform({ + type: 'hierarchyDimensionStatistics', + options: { + fields: ['value', 'name'], + operations: ['sum', 'count'] + } +}); +``` + +### 层级数据展平 + +```typescript +// 对象展平转换（用于层级数据处理） +dataView.transform({ + type: 'objFlat', + options: 'children' // 展开 children 数组 +}); +``` + +## 类型约束与验证 + +### 1. 数据完整性 + +```typescript +// 确保层级数据的完整性 +function validateHierarchyData(data: IHierarchyData): boolean { + if (data instanceof DataView) { + return data.latestData !== null; + } + + return data.values && typeof data.values === 'object'; +} +``` + +### 2. 节点属性检查 + +```typescript +// 检查节点是否包含必要属性 +function hasRequiredProperties(node: IHierarchyNodeData): boolean { + return 'value' in node || 'children' in node; +} +``` + +## 使用建议 + +### 1. 数据源选择 + +- **使用 DataView**: 当需要复杂数据处理、统计计算或数据转换时 +- **使用 IHierarchyDataValues**: 当数据结构简单、不需要额外处理时 + +### 2. 性能优化 + +- 对于大型层级数据，优先使用 DataView 进行数据预处理 +- 合理设置 `value` 属性以避免不必要的计算 +- 使用适当的数据转换减少层级深度 + +### 3. 数据结构设计 + +- 确保每个节点都有唯一标识符 +- 合理组织 `children` 数组避免过深嵌套 +- 在叶子节点上提供具体的 `value` 值 + +## 实际应用示例 + +```typescript +// 完整的层级图表配置示例 +const hierarchyChartSpec = { + type: 'treemap', + data: { + id: 'hierarchy', + values: { + name: 'Sales Data', + children: [ + { + name: 'Q1', + children: [ + { name: 'Jan', value: 100 }, + { name: 'Feb', value: 150 }, + { name: 'Mar', value: 200 } + ] + }, + { + name: 'Q2', + children: [ + { name: 'Apr', value: 180 }, + { name: 'May', value: 220 }, + { name: 'Jun', value: 250 } + ] + } + ] + } + }, + categoryField: 'name', + valueField: 'value' +}; +``` diff --git a/skills/vchart-development-skill/references/type-details/IHoverSpec-Type-Definition.md b/skills/vchart-development-skill/references/type-details/IHoverSpec-Type-Definition.md new file mode 100644 index 0000000000..e16f80cfff --- /dev/null +++ b/skills/vchart-development-skill/references/type-details/IHoverSpec-Type-Definition.md @@ -0,0 +1,296 @@ +## Overview +`IHoverSpec` defines the configuration interface for hover interactions in VChart. It extends the base interaction specification to provide detailed control over hover behavior, including target elements, trigger events, and interaction state management. + +## Core Type Structure + +```typescript +interface IHoverSpec extends IBaseInteractionSpec { + enable?: boolean; // Hover interaction toggle (default: true) + trigger?: Trigger; // Hover trigger events + triggerOff?: Trigger; // Hover end trigger events +} +``` + +## Base Interaction Specification + +```typescript +interface IBaseInteractionSpec { + markIds?: StringOrNumber[]; // Target mark IDs for interaction + markNames?: StringOrNumber[]; // Target mark names for interaction +} +``` + +## Trigger Event Configuration + +```typescript +type Trigger = EventType | EventType[]; + +type EventType = + // Pointer events + | 'pointerdown' | 'pointerup' | 'pointerupoutside' | 'pointertap' + | 'pointerover' | 'pointermove' | 'pointerenter' | 'pointerleave' | 'pointerout' + + // Mouse events + | 'mousedown' | 'mouseup' | 'mouseupoutside' | 'rightdown' | 'rightup' | 'rightupoutside' + | 'click' | 'dblclick' | 'mousemove' | 'mouseover' | 'mouseout' + | 'mouseenter' | 'mouseleave' | 'wheel' + + // Touch events + | 'touchstart' | 'touchend' | 'touchendoutside' | 'touchmove' | 'touchcancel' | 'tap' + + // Drag events + | 'dragstart' | 'drag' | 'dragenter' | 'dragleave' | 'dragover' | 'dragend' | 'drop' + + // Gesture events + | 'pan'; +``` + +## Complete Interface Definition + +```typescript +interface IHoverSpec { + // Base interaction properties + markIds?: StringOrNumber[]; // Specific mark IDs to target + markNames?: StringOrNumber[]; // Specific mark names to target + + // Hover-specific properties + enable?: boolean; // Enable/disable hover interaction (default: true) + trigger?: EventType | EventType[]; // Events that trigger hover state + triggerOff?: EventType | EventType[]; // Events that end hover state +} +``` + +## Property Descriptions + +### Target Configuration +```typescript +markIds?: StringOrNumber[]; // Array of mark IDs that should respond to hover +markNames?: StringOrNumber[]; // Array of mark names that should respond to hover +``` + +### Interaction Control +```typescript +enable?: boolean; // Controls whether hover interaction is active + // Default: true (hover is enabled by default) +``` + +### Event Configuration +```typescript +trigger?: EventType | EventType[]; // Events that activate hover state + // Default: ['pointerover', 'mouseenter'] + +triggerOff?: EventType | EventType[]; // Events that deactivate hover state + // Default: ['pointerout', 'mouseleave'] +``` + +## Usage Examples + +### Basic Hover Configuration +```typescript +// Enable hover with default settings +const basicHover: IHoverSpec = { + enable: true +}; + +// Disable hover interaction +const disabledHover: IHoverSpec = { + enable: false +}; +``` + +### Custom Trigger Events +```typescript +// Single trigger event +const clickHover: IHoverSpec = { + enable: true, + trigger: 'click', + triggerOff: 'dblclick' +}; + +// Multiple trigger events +const multiTriggerHover: IHoverSpec = { + enable: true, + trigger: ['mouseenter', 'pointerover'], + triggerOff: ['mouseleave', 'pointerout'] +}; +``` + +### Target-Specific Hover +```typescript +// Target specific mark IDs +const markIdHover: IHoverSpec = { + enable: true, + markIds: ['series-0', 'series-1'], + trigger: 'mouseover', + triggerOff: 'mouseout' +}; + +// Target specific mark names +const markNameHover: IHoverSpec = { + enable: true, + markNames: ['point', 'line'], + trigger: 'mouseenter', + triggerOff: 'mouseleave' +}; +``` + +### Touch-Optimized Hover +```typescript +// Touch device configuration +const touchHover: IHoverSpec = { + enable: true, + trigger: ['touchstart', 'tap'], + triggerOff: ['touchend', 'touchcancel'] +}; +``` + +### Advanced Event Configuration +```typescript +// Complex event handling +const advancedHover: IHoverSpec = { + enable: true, + markNames: ['bar', 'point'], + trigger: ['pointerenter', 'mouseenter', 'touchstart'], + triggerOff: ['pointerleave', 'mouseleave', 'touchend'] +}; +``` + +### Chart Integration Examples + +#### Line Chart with Hover +```typescript +const lineChart = { + type: 'line', + data: { values: data }, + xField: 'x', + yField: 'y', + hover: { + enable: true, + markNames: ['point', 'line'], + trigger: 'mouseover', + triggerOff: 'mouseout' + } +}; +``` + +#### Bar Chart with Custom Hover +```typescript +const barChart = { + type: 'bar', + data: { values: data }, + xField: 'category', + yField: 'value', + hover: { + enable: true, + markNames: ['bar'], + trigger: ['mouseenter', 'pointerover'], + triggerOff: ['mouseleave', 'pointerout'] + } +}; +``` + +#### Series-Level Hover Configuration +```typescript +const seriesHover = { + type: 'line', + data: { values: data }, + series: [ + { + type: 'line', + xField: 'x', + yField: 'y1', + hover: { + enable: true, + markIds: ['line-series-0'], + trigger: 'click' + } + }, + { + type: 'line', + xField: 'x', + yField: 'y2', + hover: { + enable: false // Disable hover for this series + } + } + ] +}; +``` + +#### Mobile-Optimized Configuration +```typescript +const mobileChart = { + type: 'scatter', + data: { values: data }, + xField: 'x', + yField: 'y', + hover: { + enable: true, + trigger: ['tap', 'touchstart'], + triggerOff: ['touchend', 'touchcancel'], + markNames: ['point'] + } +}; +``` + +## Boolean Shorthand + +```typescript +// Boolean configuration (simple enable/disable) +hover: true // Equivalent to { enable: true } with default events +hover: false // Equivalent to { enable: false } + +// Detailed configuration +hover: { + enable: true, + trigger: 'mouseenter', + triggerOff: 'mouseleave' +} +``` + +## Event Type Categories + +### Mouse Events +- **mouseenter/mouseleave**: Most common for desktop hover +- **mouseover/mouseout**: Alternative mouse events +- **click/dblclick**: Click-based hover activation + +### Pointer Events +- **pointerenter/pointerleave**: Modern pointer API events +- **pointerover/pointerout**: Alternative pointer events + +### Touch Events +- **touchstart/touchend**: Touch-based interactions +- **tap**: Simplified touch event + +### Custom Events +- **dragstart/dragend**: Drag-based hover activation +- **wheel**: Scroll-based interactions + +## Integration with State Styling + +```typescript +// Configure hover state styling in marks +const chartWithHoverStyles = { + type: 'bar', + data: { values: data }, + hover: { + enable: true, + trigger: 'mouseenter', + triggerOff: 'mouseleave' + }, + // Hover state styling + bar: { + state: { + hover: { + fill: '#ff0000', // Red fill on hover + stroke: '#000000', // Black border on hover + strokeWidth: 2 + }, + hover_reverse: { + fillOpacity: 0.3 // Dim non-hovered elements + } + } + } +}; +``` diff --git a/skills/vchart-development-skill/references/type-details/IImageMarkSpec-Type-Definition.md b/skills/vchart-development-skill/references/type-details/IImageMarkSpec-Type-Definition.md new file mode 100644 index 0000000000..924f23d97d --- /dev/null +++ b/skills/vchart-development-skill/references/type-details/IImageMarkSpec-Type-Definition.md @@ -0,0 +1,193 @@ +# IImageMarkSpec Type Definition + +## Overview + +```typescript +interface IImageMarkSpec { + // Image-specific properties + cornerRadius?: number | number[]; + width?: number; + height?: number; + repeatX?: IRepeatType; + repeatY?: IRepeatType; + image?: string | HTMLImageElement | HTMLCanvasElement; + + // From IFillMarkSpec + fill?: VisualType | IGradient | false | IColorKey; + fillOpacity?: number; + background?: IColor | HTMLImageElement | HTMLCanvasElement | null; + + // From ICommonSpec + visible?: boolean; + x?: number; + y?: number; + z?: number; + stroke?: string | IGradient | false | (number | boolean)[] | IColorKey | null; + strokeOpacity?: number; + opacity?: number; + lineWidth?: number; + lineDash?: number[]; + lineDashOffset?: number; + cursor?: Cursor; + zIndex?: number; + angle?: number; + anchor?: [number, number]; + scaleX?: number; + scaleY?: number; + scaleCenter?: [number | string, number | string]; + alpha?: number; + beta?: number; + anchor3d?: [number, number]; + pickMode?: 'accurate' | 'imprecise' | 'custom'; + boundsMode?: 'accurate' | 'imprecise'; + pickStrokeBuffer?: number; + texture?: TextureType | string; + textureColor?: string; + textureSize?: number; + texturePadding?: number; + outerBorder?: IBorder; + innerBorder?: IBorder; + html?: IMarkHtmlSpec; +} +``` + +## Dependency Types + +### Repeat Types + +```typescript +type IRepeatType = 'no-repeat' | 'repeat-x' | 'repeat-y' | 'repeat'; +``` + +### Visual Mapping System + +```typescript +type VisualType = ValueType | FunctionType | IVisual; +type ValueType = T; +type FunctionType = (datum: Datum, context: IModelMarkAttributeContext, source?: DataView) => T; + +interface IVisual { + type: ScaleType; + domain: D[]; + range: R[]; + field?: string; + specified?: { [key: string]: unknown }; + clamp?: boolean; +} +``` + +### Gradient System + +```typescript +type IGradient = IGradientLinear | IGradientRadial | IGradientConical; + +interface IGradientLinear { + gradient: 'linear'; + x0?: GradientPropValue; + y0?: GradientPropValue; + x1?: GradientPropValue; + y1?: GradientPropValue; + stops: GradientStop[]; +} + +interface IGradientRadial { + gradient: 'radial'; + r0?: GradientPropValue; + x0?: GradientPropValue; + y0?: GradientPropValue; + x1?: GradientPropValue; + y1?: GradientPropValue; + r1?: GradientPropValue; + stops: GradientStop[]; +} + +interface IGradientConical { + gradient: 'conical'; + x?: GradientPropValue; + y?: GradientPropValue; + startAngle?: GradientPropValue; + endAngle?: GradientPropValue; + stops: GradientStop[]; +} + +type GradientPropValue = ValueType | FunctionType; + +type GradientStop = { + offset: GradientPropValue; + color?: GradientPropValue; + opacity?: number; +}; +``` + +### Border Configuration + +```typescript +interface IBorder { + distance: number | string; + stroke?: string | IGradient; + strokeOpacity?: number; + lineWidth?: number; + lineDash?: number[]; + lineDashOffset?: number; +} +``` + +### Color and Theme Types + +```typescript +type IColor = string | IGradient | IColorKey; + +interface IColorKey { + // Color theme key reference +} + +interface ITokenKey { + // Token theme key reference +} +``` + +### Texture Types + +```typescript +type TextureType = 'circle' | 'dimond' | 'rect' | 'vertical-line' | 'horizontal-line' | 'bias-lr' | 'bias-rl' | 'grid'; +``` + +### HTML Integration + +```typescript +type IMarkHtmlSpec = Partial; + +interface IGraphicStyle { + html?: { + anchorType?: 'top' | 'middle' | 'bottom'; + }; +} +``` + +### Scale and Context Types + +```typescript +type ScaleType = + | 'linear' + | 'ordinal' + | 'band' + | 'point' + | 'time' + | 'log' + | 'pow' + | 'sqrt' + | 'symlog' + | 'threshold' + | 'quantile' + | 'quantize'; + +type Cursor = 'auto' | 'default' | 'pointer' | 'crosshair' | 'move' | 'text' | 'wait' | 'help' | 'not-allowed' | string; + +interface Datum { + [key: string]: any; +} + +interface IModelMarkAttributeContext { + // Mark attribute evaluation context +} +``` diff --git a/skills/vchart-development-skill/references/type-details/IIndicatorSpec-Type-Definition.md b/skills/vchart-development-skill/references/type-details/IIndicatorSpec-Type-Definition.md new file mode 100644 index 0000000000..1e517b6e33 --- /dev/null +++ b/skills/vchart-development-skill/references/type-details/IIndicatorSpec-Type-Definition.md @@ -0,0 +1,743 @@ +## IIndicatorSpec Type Definition + +### Core Interface + +`IIndicatorSpec` defines the configuration interface for indicator card components in VChart, providing data display capabilities with customizable title, content, positioning, and interactive behaviors. + +```typescript +interface IIndicatorSpec extends IComponentSpec { + visible?: boolean; + fixed?: boolean; + trigger?: 'hover' | 'select' | 'none'; + gap?: number; // @deprecated + offsetX?: number | IPercent; + offsetY?: number | IPercent; + limitRatio?: number; + title?: IIndicatorItemSpec; + content?: IIndicatorItemSpec[] | IIndicatorItemSpec; +} +``` + +### Type Structure + +#### Base Interface Inheritance +```typescript +// Inherits from component specification +interface IIndicatorSpec extends IComponentSpec { + // Common component properties inherited: + // - id?: StringOrNumber + // - zIndex?: number + // - style?: any + + // Indicator-specific properties + visible?: boolean; + fixed?: boolean; + trigger?: 'hover' | 'select' | 'none'; + offsetX?: number | IPercent; + offsetY?: number | IPercent; + limitRatio?: number; + title?: IIndicatorItemSpec; + content?: IIndicatorItemSpec[] | IIndicatorItemSpec; +} +``` + +#### Indicator Item Configuration +```typescript +interface IIndicatorItemSpec { + visible?: boolean; // Show/hide item + field?: string; // Data field binding + space?: number; // Item spacing + autoLimit?: boolean; // Auto text truncation + autoFit?: boolean; // Auto text scaling + fitPercent?: number; // Fit ratio (0-1) + fitStrategy?: 'default' | 'inscribed'; // Fit strategy + formatMethod?: FormatMethodFunction; // Text formatting + style?: IndicatorItemStyleSpec; // Text styling +} + +// Format method function signature +type FormatMethodFunction = ( + text: string | number, + textStyle: ITextGraphicAttribute +) => IFormatMethod<[activeDatum: Datum]> | ITextMarkSpec['text'] | ReturnType>; +``` + +#### Style Configuration +```typescript +// Indicator item style specification +type IndicatorItemStyleSpec = Omit, 'visible' | 'text'> & { + type?: 'text' | 'rich'; // @deprecated Text type + text?: TextContentSpec; // Text content +}; + +// Text content specification types +type TextContentSpec = + | IFormatMethod<[activeDatum: Datum]> + | ITextMarkSpec['text'] + | ReturnType>; + +// Mark style conversion (supports visual channels) +type ConvertToMarkStyleSpec = { + [key in keyof T]: VisualType; +}; + +// Visual type supporting values, functions, and visual channels +type VisualType = ValueType | FunctionType | IVisual; +type FunctionType = (datum: Datum, context: IModelMarkAttributeContext, source?: DataView) => T; +``` + +### Display and Behavior Control + +#### Visibility and Display Mode +```typescript +// Basic visibility control +const basicIndicator: IIndicatorSpec = { + visible: true, // Show indicator (default: true) + fixed: true, // Always display (default: true) +}; + +// Interactive display mode +const interactiveIndicator: IIndicatorSpec = { + visible: true, + fixed: false, // Show only on interaction + trigger: 'hover' // Show on hover +}; + +// Permanent display with no interaction +const staticIndicator: IIndicatorSpec = { + visible: true, + fixed: true, + trigger: 'none' // No interactive triggers +}; +``` + +#### Trigger Configuration +```typescript +// Hover trigger (show on mouse over) +const hoverTrigger: IIndicatorSpec = { + trigger: 'hover', // Default: 'select' + fixed: false +}; + +// Selection trigger (show on click/select) +const selectTrigger: IIndicatorSpec = { + trigger: 'select', // Default behavior + fixed: false +}; + +// Disabled interaction +const noTrigger: IIndicatorSpec = { + trigger: 'none', + fixed: true // Must be fixed when no trigger +}; +``` + +### Positioning and Layout + +#### Offset Configuration +```typescript +// Pixel-based positioning +const pixelOffset: IIndicatorSpec = { + offsetX: 20, // 20px from default position + offsetY: -10, // 10px above default position +}; + +// Percentage-based positioning +const percentOffset: IIndicatorSpec = { + offsetX: "15%", // 15% of container width + offsetY: "5%", // 5% of container height +}; + +// Mixed positioning +const mixedOffset: IIndicatorSpec = { + offsetX: "50%", // Center horizontally + offsetY: 30, // 30px from top +}; +``` + +#### Size Limitation +```typescript +// Width ratio limitation +const limitedWidth: IIndicatorSpec = { + limitRatio: 0.3, // Maximum 30% of content area width + title: { autoLimit: true }, // Enable text truncation + content: { autoFit: true } // Enable text scaling +}; + +// Responsive sizing +const responsiveSize: IIndicatorSpec = { + limitRatio: 0.25, + content: [{ + autoFit: true, + fitPercent: 0.8, // 80% of available space + fitStrategy: 'inscribed' // Inscribed fit strategy + }] +}; +``` + +### Title Configuration + +#### Basic Title Setup +```typescript +// Simple title configuration +const basicTitle: IIndicatorSpec = { + title: { + visible: true, + field: 'category', // Bind to data field + space: 8, // 8px spacing to content + style: { + fontSize: 14, + fontWeight: 'bold', + fill: '#333' + } + } +}; +``` + +#### Advanced Title Formatting +```typescript +// Custom title with formatting +const formattedTitle: IIndicatorSpec = { + title: { + visible: true, + field: 'metric', + formatMethod: (text, textStyle) => { + return (datum) => `Metric: ${text.toUpperCase()}`; + }, + style: { + fontSize: 16, + fontFamily: 'Arial, sans-serif', + fill: '#2c3e50', + textAlign: 'center' + } + } +}; +``` + +#### Title with Auto-Fitting +```typescript +// Responsive title with auto-fitting +const responsiveTitle: IIndicatorSpec = { + title: { + visible: true, + autoFit: true, + fitPercent: 0.6, // 60% of available width + fitStrategy: 'default', + style: { + fontSize: 18, + fontWeight: 'bold', + fill: '#1a73e8' + } + } +}; +``` + +### Content Configuration + +#### Single Content Item +```typescript +// Single content configuration +const singleContent: IIndicatorSpec = { + content: { + visible: true, + field: 'value', + autoLimit: true, // Auto truncate if too long + style: { + fontSize: 24, + fontWeight: 'normal', + fill: '#666' + } + } +}; +``` + +#### Multiple Content Items +```typescript +// Multiple content items +const multipleContent: IIndicatorSpec = { + content: [ + { + visible: true, + field: 'currentValue', + space: 5, // 5px spacing to next item + style: { + fontSize: 20, + fill: '#27ae60' + } + }, + { + visible: true, + field: 'previousValue', + formatMethod: (text) => (datum) => `(${text})`, + style: { + fontSize: 14, + fill: '#95a5a6' + } + } + ] +}; +``` + +#### Content with Rich Formatting +```typescript +// Rich text content with complex formatting +const richContent: IIndicatorSpec = { + content: { + visible: true, + field: 'sales', + formatMethod: (text, textStyle) => { + return (datum) => { + const value = parseFloat(text as string); + const formatted = value.toLocaleString('en-US', { + style: 'currency', + currency: 'USD' + }); + return formatted; + }; + }, + style: { + type: 'text', // @deprecated but still supported + fontSize: 28, + fontWeight: 'bold', + fill: '#e74c3c' + } + } +}; +``` + +### Spacing and Layout + +#### Legacy Gap Configuration +```typescript +// Deprecated gap usage (still supported) +const legacySpacing: IIndicatorSpec = { + gap: 10, // @deprecated: use title.space or content.space + title: { visible: true }, + content: { visible: true } +}; +``` + +#### Modern Spacing Configuration +```typescript +// Modern spacing with individual control +const modernSpacing: IIndicatorSpec = { + title: { + visible: true, + space: 12, // 12px between title and content + style: { fontSize: 14 } + }, + content: [{ + visible: true, + space: 8, // 8px between content items + style: { fontSize: 16 } + }, { + visible: true, + style: { fontSize: 16 } + }] +}; +``` + +### Auto-Fitting Strategies + +#### Text Truncation Strategy +```typescript +// Auto-limit for text truncation +const truncationStrategy: IIndicatorSpec = { + limitRatio: 0.4, + content: { + visible: true, + autoLimit: true, // Enable truncation + field: 'longDescription', + style: { + fontSize: 12, + fill: '#666' + } + } +}; +``` + +#### Text Scaling Strategy +```typescript +// Auto-fit for text scaling +const scalingStrategy: IIndicatorSpec = { + content: { + visible: true, + autoFit: true, // Enable scaling + fitPercent: 0.85, // Use 85% of available space + fitStrategy: 'inscribed', // Fit within bounds + style: { + fontSize: 16, // Base font size + fill: '#333' + } + } +}; +``` + +#### Combined Strategies +```typescript +// Combined auto-fitting approaches +const combinedStrategy: IIndicatorSpec = { + limitRatio: 0.3, + title: { + visible: true, + autoFit: true, + fitPercent: 0.7, + fitStrategy: 'default' + }, + content: [{ + visible: true, + autoLimit: true, // Truncate if needed + autoFit: true, // Scale if possible + fitPercent: 0.8, + space: 6 + }] +}; +``` + +### Advanced Formatting + +#### Complex Format Methods +```typescript +// Advanced formatting with context awareness +const advancedFormatting: IIndicatorSpec = { + content: { + visible: true, + field: 'percentage', + formatMethod: (text, textStyle) => { + return (datum, context) => { + const value = parseFloat(text as string); + const trend = datum.trend || 'neutral'; + const symbol = trend === 'up' ? '↗' : trend === 'down' ? '↘' : '→'; + return `${symbol} ${value.toFixed(1)}%`; + }; + }, + style: { + fontSize: 18, + fontFamily: 'monospace' + } + } +}; +``` + +#### Dynamic Style Based on Data +```typescript +// Data-driven styling +const dynamicStyling: IIndicatorSpec = { + content: { + visible: true, + field: 'status', + style: { + fontSize: 16, + fill: (datum) => { + // Dynamic color based on data + switch (datum.status) { + case 'success': return '#27ae60'; + case 'warning': return '#f39c12'; + case 'error': return '#e74c3c'; + default: return '#666'; + } + }, + fontWeight: (datum) => datum.important ? 'bold' : 'normal' + } + } +}; +``` + +### Implementation Examples + +#### Sales Dashboard Indicator +```typescript +// Sales performance indicator +const salesIndicator: IIndicatorSpec = { + visible: true, + trigger: 'select', + offsetX: "10%", + offsetY: 20, + limitRatio: 0.25, + + title: { + visible: true, + field: 'region', + space: 8, + style: { + fontSize: 12, + fontWeight: 'bold', + fill: '#2c3e50' + } + }, + + content: [ + { + visible: true, + field: 'sales', + space: 4, + formatMethod: (text) => (datum) => { + const value = parseFloat(text as string); + return value.toLocaleString('en-US', { + style: 'currency', + currency: 'USD', + minimumFractionDigits: 0 + }); + }, + style: { + fontSize: 20, + fontWeight: 'bold', + fill: '#27ae60' + } + }, + { + visible: true, + field: 'growth', + formatMethod: (text) => (datum) => { + const growth = parseFloat(text as string); + const sign = growth >= 0 ? '+' : ''; + return `${sign}${growth.toFixed(1)}%`; + }, + style: { + fontSize: 14, + fill: (datum) => datum.growth >= 0 ? '#27ae60' : '#e74c3c' + } + } + ] +}; +``` + +#### KPI Indicator with Auto-Fitting +```typescript +// KPI indicator with responsive design +const kpiIndicator: IIndicatorSpec = { + visible: true, + fixed: true, + trigger: 'none', + offsetX: "50%", + offsetY: "10%", + limitRatio: 0.4, + + title: { + visible: true, + autoFit: true, + fitPercent: 0.8, + style: { + fontSize: 14, + textAlign: 'center', + fill: '#666' + } + }, + + content: { + visible: true, + autoFit: true, + fitPercent: 0.9, + fitStrategy: 'inscribed', + formatMethod: (text) => (datum) => { + const value = parseFloat(text as string); + if (value >= 1000000) { + return `${(value / 1000000).toFixed(1)}M`; + } else if (value >= 1000) { + return `${(value / 1000).toFixed(1)}K`; + } + return value.toString(); + }, + style: { + fontSize: 32, + fontWeight: 'bold', + textAlign: 'center', + fill: '#1a73e8' + } + } +}; +``` + +#### Multi-Metric Indicator +```typescript +// Complex multi-metric indicator +const multiMetricIndicator: IIndicatorSpec = { + visible: true, + trigger: 'hover', + fixed: false, + offsetX: 15, + offsetY: -5, + limitRatio: 0.35, + + title: { + visible: true, + space: 10, + style: { + fontSize: 13, + fontWeight: 'bold', + fill: '#2c3e50', + textAlign: 'left' + } + }, + + content: [ + { + visible: true, + field: 'primaryMetric', + space: 6, + autoLimit: true, + style: { + fontSize: 18, + fontWeight: 'bold', + fill: '#3498db' + } + }, + { + visible: true, + field: 'secondaryMetric', + space: 4, + style: { + fontSize: 14, + fill: '#7f8c8d' + } + }, + { + visible: true, + field: 'change', + formatMethod: (text) => (datum) => { + const change = parseFloat(text as string); + const arrow = change > 0 ? '▲' : change < 0 ? '▼' : '●'; + return `${arrow} ${Math.abs(change).toFixed(1)}%`; + }, + style: { + fontSize: 12, + fill: (datum) => { + const change = datum.change; + return change > 0 ? '#27ae60' : change < 0 ? '#e74c3c' : '#95a5a6'; + } + } + } + ] +}; +``` + +### Chart Integration + +#### Bar Chart with Indicator +```typescript +// Bar chart with data indicator +const chartWithIndicator = { + type: 'bar', + data: { values: chartData }, + xField: 'category', + yField: 'value', + + // Indicator configuration + indicator: { + visible: true, + trigger: 'hover', + offsetX: 10, + offsetY: -10, + + title: { + visible: true, + field: 'category' + }, + + content: { + visible: true, + field: 'value', + formatMethod: (text) => (datum) => `Value: ${text}` + } + } as IIndicatorSpec +}; +``` + +#### Multi-Series Chart Integration +```typescript +// Multi-series chart with comprehensive indicator +const multiSeriesChart = { + type: 'line', + data: { values: timeSeriesData }, + xField: 'date', + yField: 'value', + seriesField: 'series', + + indicator: { + visible: true, + trigger: 'select', + fixed: false, + limitRatio: 0.3, + + title: { + visible: true, + formatMethod: (text) => (datum) => `${datum.series} - ${datum.date}` + }, + + content: [ + { + visible: true, + field: 'value', + space: 5, + formatMethod: (text) => (datum) => `Current: ${text}` + }, + { + visible: true, + field: 'previousValue', + formatMethod: (text) => (datum) => `Previous: ${text || 'N/A'}` + } + ] + } as IIndicatorSpec +}; +``` + +### Type Safety and Validation + +#### Type-Safe Indicator Builder +```typescript +// Type-safe indicator configuration builder +function createIndicator( + options: { + titleField?: string; + contentField?: string | string[]; + trigger?: IIndicatorSpec['trigger']; + offset?: { x?: number | IPercent; y?: number | IPercent }; + } +): IIndicatorSpec { + return { + visible: true, + trigger: options.trigger || 'select', + offsetX: options.offset?.x || 0, + offsetY: options.offset?.y || 0, + + title: options.titleField ? { + visible: true, + field: options.titleField + } : undefined, + + content: Array.isArray(options.contentField) + ? options.contentField.map(field => ({ visible: true, field })) + : options.contentField ? { visible: true, field: options.contentField } + : undefined + }; +} + +// Usage with validation +const validatedIndicator = createIndicator({ + titleField: 'category', + contentField: ['value', 'percentage'], + trigger: 'hover', + offset: { x: "10%", y: 20 } +}); +``` + +#### Content Type Validation +```typescript +// Validate content configuration type +function validateIndicatorContent( + content: IIndicatorSpec['content'] +): content is NonNullable { + if (!content) return false; + + if (Array.isArray(content)) { + return content.every(item => typeof item === 'object' && item !== null); + } + + return typeof content === 'object' && content !== null; +} + +// Type-safe content access +const safeContent: Required> = { + content: { visible: true, field: 'value' } +}; +``` diff --git a/skills/vchart-development-skill/references/type-details/IInteractionItemSpec-Type-Definition.md b/skills/vchart-development-skill/references/type-details/IInteractionItemSpec-Type-Definition.md new file mode 100644 index 0000000000..6d7e978fc6 --- /dev/null +++ b/skills/vchart-development-skill/references/type-details/IInteractionItemSpec-Type-Definition.md @@ -0,0 +1,427 @@ +## Overview + +`IInteractionItemSpec` is a union type for VChart interaction configurations, supporting 9 different interaction types: + +```typescript +export type IInteractionItemSpec = + | IElementActiveSpec // Element activation + | IElementSelectSpec // Element selection + | IElementHighlightSpec // Element highlighting + | IElementHighlightByKeySpec // Key-based highlighting + | IElementHighlightByGroup // Group-based highlighting + | IElementActiveByLegend // Legend-based activation + | IElementHighlightByLegend // Legend-based highlighting + | IElementHighlightByName // Name-based highlighting + | ICustomInteraction; // Custom interaction +``` + +## Base Structure + +All interaction types extend `IBaseInteractionSpec`: + +```typescript +interface IBaseInteractionSpec { + /** Target mark IDs for interaction */ + markIds?: StringOrNumber[]; + + /** Target mark names for interaction */ + markNames?: StringOrNumber[]; +} + +type Trigger = EventType | EventType[]; +``` + +## Interaction Type Configurations + +### 1. Element Active (IElementActiveSpec) + +Activates element state, supports `state.active` visual encoding: + +```typescript +type IElementActiveSpec = IBaseInteractionSpec & { + /** Interaction type identifier */ + type: 'element-active'; + + /** Trigger events */ + trigger?: Trigger; + + /** Trigger off events */ + triggerOff?: Trigger; + + /** Active state configuration */ + state?: string; +}; +``` + +### 2. Element Select (IElementSelectSpec) + +Element selection interaction, supports `state.selected` and `state.selected_reverse`: + +```typescript +type IElementSelectSpec = IBaseInteractionSpec & { + /** Interaction type identifier */ + type: 'element-select'; + + /** Trigger events */ + trigger?: Trigger; + + /** Trigger off events */ + triggerOff?: Trigger; + + /** Selected state configuration */ + state?: string; + + /** Multiple selection support */ + isMultiple?: boolean; + + /** Reverse state configuration */ + reverseState?: string; +}; +``` + +### 3. Element Highlight (IElementHighlightSpec) + +Element highlighting interaction, supports `state.highlight` and `state.blur`: + +```typescript +type IElementHighlightSpec = IBaseInteractionSpec & { + /** Interaction type identifier */ + type: 'element-highlight'; + + /** Trigger events */ + trigger?: Trigger; + + /** Trigger off events */ + triggerOff?: Trigger; + + /** Highlight state configuration */ + highlightState?: string; + + /** Blur state configuration */ + blurState?: string; +}; +``` + +### 4. Element Highlight By Key (IElementHighlightByKeySpec) + +Highlights elements with same key, requires series `dataKey` configuration: + +```typescript +type IElementHighlightByKeySpec = IBaseInteractionSpec & { + /** Interaction type identifier */ + type: 'element-highlight-by-key'; + + /** Trigger events */ + trigger?: Trigger; + + /** Trigger off events */ + triggerOff?: Trigger; + + /** Highlight state configuration */ + highlightState?: string; + + /** Blur state configuration */ + blurState?: string; +}; +``` + +### 5. Element Highlight By Group (IElementHighlightByGroup) + +Highlights elements with same group value (groupKey): + +```typescript +type IElementHighlightByGroup = IBaseInteractionSpec & { + /** Interaction type identifier */ + type: 'element-highlight-by-group'; + + /** Trigger events */ + trigger?: Trigger; + + /** Trigger off events */ + triggerOff?: Trigger; + + /** Highlight state configuration */ + highlightState?: string; + + /** Blur state configuration */ + blurState?: string; +}; +``` + +### 6. Element Active By Legend (IElementActiveByLegend) + +Activates elements based on legend interaction, default triggers: `legendItemHover`/`legendItemUnHover`: + +```typescript +type IElementActiveByLegend = IBaseInteractionSpec & { + /** Interaction type identifier */ + type: 'element-active-by-legend'; + + /** Filter type configuration */ + filterType?: string; + + /** Active state configuration */ + state?: string; +}; +``` + +### 7. Element Highlight By Legend (IElementHighlightByLegend) + +Highlights elements based on legend interaction, default triggers: `legendItemHover`/`legendItemUnHover`: + +```typescript +type IElementHighlightByLegend = IBaseInteractionSpec & { + /** Interaction type identifier */ + type: 'element-highlight-by-legend'; + + /** Filter type configuration */ + filterType?: string; + + /** Highlight state configuration */ + highlightState?: string; + + /** Blur state configuration */ + blurState?: string; +}; +``` + +### 8. Element Highlight By Name (IElementHighlightByName) + +Highlights elements based on graphic name: + +```typescript +type IElementHighlightByName = IBaseInteractionSpec & { + /** Interaction type identifier */ + type: 'element-highlight-by-name'; + + /** Highlight state configuration */ + highlightState?: string; + + /** Blur state configuration */ + blurState?: string; + + /** Target graphic name */ + graphicName?: string; + + /** Data parsing function */ + parseData?: Function; +}; +``` + +### 9. Custom Interaction (ICustomInteraction) + +Custom interaction type for extended functionality: + +```typescript +interface ICustomInteraction extends IBaseInteractionSpec { + /** Custom interaction type string */ + type: string; +} +``` + +## Core Sub-configurations + +### Hover Interaction (IHoverSpec) + +```typescript +interface IHoverSpec extends IBaseInteractionSpec { + /** Enable hover interaction @default true */ + enable?: boolean; + + /** Hover trigger events */ + trigger?: Trigger; + + /** Hover trigger off events */ + triggerOff?: Trigger; +} +``` + +### Select Interaction (ISelectSpec) + +```typescript +interface ISelectSpec extends IBaseInteractionSpec { + /** Enable select interaction @default true */ + enable?: boolean; + + /** Selection mode @default 'single' */ + mode?: 'single' | 'multiple'; + + /** Select trigger events */ + trigger?: Trigger; + + /** Select trigger off events */ + triggerOff?: Trigger | number; +} +``` + +### Main Interaction Configuration (IInteractionSpec) + +```typescript +interface IInteractionSpec { + /** Hover interaction configuration */ + hover?: IHoverSpec | boolean; + + /** Select interaction configuration */ + select?: ISelectSpec | boolean; + + /** Custom interaction configurations */ + interactions?: IInteractionItemSpec[]; +} +``` + +## Dependency Type Definitions + +### Event Types + +```typescript +// Event types from VChart event system +type EventType = string; // Specific event type strings like 'click', 'hover', etc. +``` + +### Basic Types + +```typescript +type StringOrNumber = string | number; +``` + +### Interaction Options (from trigger module) + +```typescript +interface IElementActiveOptions { + trigger?: Trigger; + triggerOff?: Trigger; + state?: string; +} + +interface IElementSelectOptions { + trigger?: Trigger; + triggerOff?: Trigger; + state?: string; + isMultiple?: boolean; + reverseState?: string; +} + +interface IElementHighlightOptions { + trigger?: Trigger; + triggerOff?: Trigger; + highlightState?: string; + blurState?: string; +} + +interface IElementActiveByLegendOptions { + filterType?: string; + state?: string; +} + +interface IElementHighlightByLegendOptions { + filterType?: string; + highlightState?: string; + blurState?: string; +} + +interface IElementHighlightByNameOptions { + highlightState?: string; + blurState?: string; + graphicName?: string; + parseData?: Function; +} +``` + +## Usage Examples + +### Element Active Interaction + +```typescript +const activeInteraction: IElementActiveSpec = { + type: 'element-active', + markIds: ['point-mark'], + trigger: 'pointerover', + triggerOff: 'pointerout', + state: 'active' +}; +``` + +### Element Select Interaction + +```typescript +const selectInteraction: IElementSelectSpec = { + type: 'element-select', + markNames: ['bar'], + trigger: 'click', + triggerOff: 'click', + state: 'selected', + isMultiple: true, + reverseState: 'unselected' +}; +``` + +### Element Highlight Interaction + +```typescript +const highlightInteraction: IElementHighlightSpec = { + type: 'element-highlight', + markIds: ['line-mark', 'point-mark'], + trigger: ['pointerover', 'focus'], + triggerOff: ['pointerout', 'blur'], + highlightState: 'highlight', + blurState: 'blur' +}; +``` + +### Key-based Highlighting + +```typescript +const keyHighlight: IElementHighlightByKeySpec = { + type: 'element-highlight-by-key', + markNames: ['series-mark'], + trigger: 'pointerover', + triggerOff: 'pointerout', + highlightState: 'active', + blurState: 'inactive' +}; +``` + +### Legend-based Activation + +```typescript +const legendActive: IElementActiveByLegend = { + type: 'element-active-by-legend', + markIds: ['series-1', 'series-2'], + filterType: 'index', + state: 'legendActive' +}; +``` + +### Complete Interaction Configuration + +```typescript +const interactionConfig: IInteractionSpec = { + hover: { + enable: true, + trigger: 'pointerover', + triggerOff: 'pointerout', + markNames: ['bar'] + }, + select: { + enable: true, + mode: 'multiple', + trigger: 'click', + triggerOff: 500 // Auto deselect after 500ms + }, + interactions: [ + { + type: 'element-highlight', + markIds: ['line'], + trigger: 'pointerover', + highlightState: 'highlight', + blurState: 'blur' + }, + { + type: 'element-active-by-legend', + markNames: ['series'], + filterType: 'datum', + state: 'legendHover' + } + ] +}; +``` diff --git a/skills/vchart-development-skill/references/type-details/ILabelSpec-Type-Definition.md b/skills/vchart-development-skill/references/type-details/ILabelSpec-Type-Definition.md new file mode 100644 index 0000000000..2f2a1d9961 --- /dev/null +++ b/skills/vchart-development-skill/references/type-details/ILabelSpec-Type-Definition.md @@ -0,0 +1,350 @@ +## ILabelSpec Type Definition + +### Core Interface + +`ILabelSpec` defines the configuration for series data labels in VChart, extending label animation specifications with comprehensive styling and layout options. + +```typescript +interface ILabelSpec extends ILabelAnimationSpec { + zIndex?: number; + visible?: boolean; + interactive?: boolean; + textType?: 'text' | 'rich'; // @deprecated + formatMethod?: IFormatMethod<[text: string | string[], datum?: Datum, ctx?: ILabelFormatMethodContext]>; + formatter?: string | string[]; + offset?: number; + position?: string; + style?: ConvertToMarkStyleSpec; + state?: LabelStateStyle>; + overlap?: OverlapConfig & { padding?: PaddingConfig; }; + smartInvert?: SmartInvertConfig; + stackDataFilterType?: 'min' | 'max'; + dataFilter?: (labels: LabelItem[]) => LabelItem[]; + customLayoutFunc?: (labels: LabelItem[], texts: (IText | IRichText)[], getRelatedGraphic: (data: LabelItem) => IGraphic, getRelatedPoint?: (data: LabelItem) => IPointLike) => (IText | IRichText)[]; + customOverlapFunc?: (labels: (IText | IRichText)[], getRelatedGraphic: (data: LabelItem) => IGraphic, getRelatedPoint?: (data: LabelItem) => IPointLike, labelComponent?: IGroup) => (IText | IRichText)[]; + onAfterOverlapping?: (labels: (IText | IRichText)[], getRelatedGraphic: (data: LabelItem) => IGraphic, getRelatedPoint?: (data: LabelItem) => IPointLike, labelComponent?: IGroup) => (IText | IRichText)[]; + labelLayout?: 'series' | 'region'; + support3d?: boolean; + syncState?: boolean; + showRelatedMarkTooltip?: boolean; +} +``` + +### Supporting Types + +#### Overlap Configuration +```typescript +type OverlapConfig = boolean | { + /** + * 重叠处理策略配置 + */ + strategy?: OverlapStrategy[]; + /** + * 重叠时是否隐藏标签 + * @default false + */ + hideOnHit?: boolean; + /** + * 是否避免与基础图元重叠 + * @default true + */ + avoidBaseMark?: boolean; + /** + * 是否强制限制在容器内 + * @default false + */ + clampForce?: boolean; + /** + * 分离力度配置 + */ + separateForce?: number; + /** + * 避让间距 + */ + avoidMarks?: string[]; +}; + +type OverlapStrategy = { + type: 'position'; + position: Array<'top' | 'bottom' | 'left' | 'right' | 'center' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'>; +} | { + type: 'moveY' | 'moveX'; + offset?: number; +} | { + type: 'bound'; + position?: Array<'top' | 'bottom' | 'left' | 'right'>; +}; + +type PaddingConfig = { + top?: number; + bottom?: number; + left?: number; + right?: number; +}; +``` + +#### Smart Invert Configuration +```typescript +type SmartInvertConfig = boolean | { + /** + * 是否启用智能反色 + * @default false + */ + enable?: boolean; + /** + * 亮度阈值，用于判断是否反色 + * @default 128 + */ + threshold?: number; + /** + * 反色文本颜色 + * @default '#fff' + */ + fillStrategy?: string | ((fill: string) => string); +}; +``` + +#### Animation Specification +```typescript +interface ILabelAnimationSpec { + /** + * 标签动画配置 + */ + animation?: boolean | { + duration?: number; + delay?: number; + easing?: string; + }; + /** + * 标签入场动画 + */ + animationEnter?: boolean | { + duration?: number; + delay?: number; + easing?: string; + type?: 'fadeIn' | 'moveIn' | 'scaleIn'; + }; + /** + * 标签更新动画 + */ + animationUpdate?: boolean | { + duration?: number; + delay?: number; + easing?: string; + }; + /** + * 标签退场动画 + */ + animationExit?: boolean | { + duration?: number; + delay?: number; + easing?: string; + type?: 'fadeOut' | 'moveOut' | 'scaleOut'; + }; +} +``` + +#### Label Item and Graphics Types +```typescript +interface LabelItem { + id?: string; + data?: any; + position?: IPointLike; + style?: any; +} + +interface IPointLike { + x: number; + y: number; +} + +interface IText { + setAttributes(attrs: any): void; + attribute: any; +} + +interface IRichText extends IText {} + +interface IGraphic { + AABBBounds: { + x1: number; + y1: number; + x2: number; + y2: number; + }; +} + +interface IGroup extends IGraphic {} +``` + +#### Format Method Context +```typescript +interface ILabelFormatMethodContext { + series?: ISeries; +} +``` + +#### State Style Configuration +```typescript +type LabelStateStyle = { + hover?: T; // Hover state style + hover_reverse?: T; // Hover reverse state style + selected?: T; // Selected state style + selected_reverse?: T; // Selected reverse state style +}; +``` + +#### Multi-Label Support +```typescript +type IMultiLabelSpec> = T | T[]; +``` + +### Property Groups + +#### Basic Configuration +```typescript +interface ILabelBasicConfig { + zIndex?: number; // Label layer level + visible?: boolean; // Show/hide labels (default: false) + interactive?: boolean; // Enable interaction (default: false) + textType?: 'text' | 'rich'; // @deprecated Text type +} +``` + +#### Content and Formatting +```typescript +interface ILabelContentConfig { + formatMethod?: IFormatMethod<[text: string | string[], datum?: Datum, ctx?: ILabelFormatMethodContext]>; + formatter?: string | string[]; // Template string with {} variables + offset?: number; // Distance from data mark + position?: string; // Label position +} +``` + +#### Layout and Overlap Handling +```typescript +interface ILabelLayoutConfig { + overlap?: OverlapConfig & { + padding?: PaddingConfig; // Overlap area padding + }; + smartInvert?: SmartInvertConfig; // Smart color inversion + labelLayout?: 'series' | 'region'; // Layout scope + support3d?: boolean; // 3D support +} +``` + +#### Advanced Features +```typescript +interface ILabelAdvancedConfig { + stackDataFilterType?: 'min' | 'max'; // Stack data filter type + dataFilter?: (labels: LabelItem[]) => LabelItem[]; // Custom data filter + customLayoutFunc?: (labels: LabelItem[], texts: (IText | IRichText)[], getRelatedGraphic: (data: LabelItem) => IGraphic, getRelatedPoint?: (data: LabelItem) => IPointLike) => (IText | IRichText)[]; // Custom layout function + customOverlapFunc?: (labels: (IText | IRichText)[], getRelatedGraphic: (data: LabelItem) => IGraphic, getRelatedPoint?: (data: LabelItem) => IPointLike, labelComponent?: IGroup) => (IText | IRichText)[]; // Custom overlap function + onAfterOverlapping?: (labels: (IText | IRichText)[], getRelatedGraphic: (data: LabelItem) => IGraphic, getRelatedPoint?: (data: LabelItem) => IPointLike, labelComponent?: IGroup) => (IText | IRichText)[]; // Post-overlap callback + syncState?: boolean; // Sync with mark state (default: false) + showRelatedMarkTooltip?: boolean; // Show related mark tooltip (default: false) +} +``` + +### Usage Examples + +#### Basic Label Configuration +```typescript +const basicLabel: ILabelSpec = { + visible: true, + position: 'top', + style: { + fontSize: 12, + fill: '#333' + } +}; +``` + +#### Formatted Labels +```typescript +const formattedLabel: ILabelSpec = { + visible: true, + formatter: 'Value: {value}', + formatMethod: (text, datum, ctx) => { + return `${text} (${datum.category})`; + } +}; +``` + +#### Interactive Labels with States +```typescript +const interactiveLabel: ILabelSpec = { + visible: true, + interactive: true, + style: { + fontSize: 12, + fill: '#666' + }, + state: { + hover: { + fill: '#333', + fontSize: 14 + }, + selected: { + fill: '#1890ff', + fontWeight: 'bold' + } + } +}; +``` + +#### Overlap Prevention +```typescript +const overlapLabel: ILabelSpec = { + visible: true, + overlap: { + hideOnHit: true, + avoidBaseMark: true, + strategy: [ + { + type: 'position', + position: ['top', 'bottom', 'left', 'right'] + } + ], + padding: { top: 2, bottom: 2, left: 4, right: 4 } + }, + smartInvert: { + enable: true, + threshold: 128, + fillStrategy: '#fff' + } +}; +``` + +### Total Label Specification + +```typescript +type ITotalLabelSpec = Pick & { + position?: 'top' | 'bottom'; // Total label position (default: 'top') + alwayCalculateTotal?: boolean; // Always calculate total (default: false) +}; +``` + +### Internal Types + +#### Transformed Label Specification +```typescript +type TransformedLabelSpec = ILabelSpec & { + getStyleHandler: (series: ISeries) => (mark?: ILabelMark, spec?: any) => void; +}; +``` + +#### Label Information Context +```typescript +interface ILabelInfo { + baseMark: IMark; + labelMark: ILabelMark; + series: ISeries; + labelSpec: TransformedLabelSpec; +} + +interface ILabelComponentContext { + region: IRegion; + labelInfo: ILabelInfo[]; +} +``` diff --git a/skills/vchart-development-skill/references/type-details/ILayoutPaddingSpec-Type-Definition.md b/skills/vchart-development-skill/references/type-details/ILayoutPaddingSpec-Type-Definition.md new file mode 100644 index 0000000000..49d193eccd --- /dev/null +++ b/skills/vchart-development-skill/references/type-details/ILayoutPaddingSpec-Type-Definition.md @@ -0,0 +1,214 @@ +## Overview + +```typescript +type ILayoutPaddingSpec = ILayoutOrientPadding | ILayoutNumber | ILayoutNumber[]; +``` + +## Padding Configuration Types + +### 1. Directional Padding Object + +```typescript +interface ILayoutOrientPadding { + left?: ILayoutNumber; // Left padding + right?: ILayoutNumber; // Right padding + top?: ILayoutNumber; // Top padding + bottom?: ILayoutNumber; // Bottom padding +} +``` + +### 2. Single Value Padding + +```typescript +type ILayoutPaddingSpec = ILayoutNumber; // Applied to all directions +``` + +### 3. Array Padding + +```typescript +type ILayoutPaddingSpec = ILayoutNumber[]; // CSS-style array format +``` + +## Layout Number Types + +```typescript +type ILayoutNumber = number | IPercent | ((layoutRect: ILayoutRect) => number) | IPercentOffset; +``` + +### Number Value + +```typescript +type ILayoutNumber = number; // Pixel value (e.g., 10, 20, 50) +``` + +### Percentage String + +```typescript +type IPercent = `${number}%`; // Percentage string (e.g., "10%", "25%", "50%") +``` + +### Callback Function + +```typescript +type ILayoutNumber = (layoutRect: ILayoutRect) => number; + +interface ILayoutRect { + width: number; // Available width + height: number; // Available height +} +``` + +### Percent with Offset + +```typescript +interface IPercentOffset { + percent?: number; // Percentage value (0-1 range) + offset?: number; // Pixel offset value +} +``` + +## Value Calculation Logic + +### Percentage Calculation + +- **String format**: `"25%"` means 25% of the container dimension +- **Object format**: `{ percent: 0.25 }` means 25% of the container dimension + +### Combined Percentage and Offset + +```typescript +{ percent: 0.5, offset: 10 } // 50% of container + 10 pixels +{ percent: 0.2, offset: -5 } // 20% of container - 5 pixels +``` + +### Callback Function Parameters + +```typescript +(layoutRect: ILayoutRect) => { + // layoutRect.width: available container width + // layoutRect.height: available container height + return layoutRect.width * 0.1; // 10% of width +}; +``` + +## Array Format Specification + +Following CSS padding array convention: + +```typescript +// 1 value: [all] +[10][ // top: 10, right: 10, bottom: 10, left: 10 + // 2 values: [vertical, horizontal] + (10, 20) +][ // top: 10, right: 20, bottom: 10, left: 20 + // 3 values: [top, horizontal, bottom] + (10, 20, 30) +][ // top: 10, right: 20, bottom: 30, left: 20 + // 4 values: [top, right, bottom, left] + (10, 20, 30, 40) +]; // top: 10, right: 20, bottom: 30, left: 40 +``` + +## Usage Examples + +### Simple Numeric Padding + +```typescript +// Uniform padding of 10 pixels +const padding: ILayoutPaddingSpec = 10; + +// Array format - top/bottom: 20px, left/right: 40px +const padding: ILayoutPaddingSpec = [20, 40]; + +// Array format - all four directions +const padding: ILayoutPaddingSpec = [10, 20, 30, 40]; +``` + +### Directional Object Padding + +```typescript +// Object format with specific directions +const padding: ILayoutPaddingSpec = { + top: 20, + right: 15, + bottom: 25, + left: 10 +}; + +// Partial directional padding +const padding: ILayoutPaddingSpec = { + top: 30, + bottom: 20 + // left and right default to 0 +}; +``` + +### Percentage Padding + +```typescript +// String percentage format +const padding: ILayoutPaddingSpec = { + top: '10%', // 10% of container height + left: '5%', // 5% of container width + right: '5%', + bottom: '15%' +}; + +// Mixed percentage and pixel values +const padding: ILayoutPaddingSpec = { + top: '20%', // 20% of container + bottom: 40 // 40 pixels +}; +``` + +### Percentage with Offset + +```typescript +// Percentage + offset object format +const padding: ILayoutPaddingSpec = { + top: { percent: 0.1, offset: 5 }, // 10% + 5px + bottom: { percent: 0.15, offset: -10 }, // 15% - 10px + left: { percent: 0.05 }, // 5% + 0px + right: { offset: 20 } // 0% + 20px +}; +``` + +### Dynamic Callback Padding + +```typescript +// Function-based dynamic padding +const padding: ILayoutPaddingSpec = { + top: rect => rect.height * 0.1, // 10% of available height + left: rect => Math.min(rect.width * 0.05, 50), // 5% of width, max 50px + right: rect => (rect.width > 800 ? 40 : 20), // Responsive padding + bottom: 30 // Fixed bottom padding +}; + +// Array with callback functions +const padding: ILayoutPaddingSpec = [ + rect => rect.height * 0.05, // top: 5% of height + 20, // right: 20px + rect => rect.height * 0.1, // bottom: 10% of height + 15 // left: 15px +]; +``` + +### Complex Mixed Examples + +```typescript +// Complex chart title padding +const titlePadding: ILayoutPaddingSpec = { + top: '5%', + bottom: { percent: 0.03, offset: 10 }, + left: rect => (rect.width > 600 ? 40 : 20), + right: rect => (rect.width > 600 ? 40 : 20) +}; + +// Legend padding with responsive behavior +const legendPadding: ILayoutPaddingSpec = [ + '2%', // top: 2% + rect => rect.width * 0.02, // right: 2% of width + { percent: 0.02, offset: 5 }, // bottom: 2% + 5px + 10 // left: 10px +]; +``` diff --git a/skills/vchart-development-skill/references/type-details/ILayoutSpec-Type-Definition.md b/skills/vchart-development-skill/references/type-details/ILayoutSpec-Type-Definition.md new file mode 100644 index 0000000000..6db198caed --- /dev/null +++ b/skills/vchart-development-skill/references/type-details/ILayoutSpec-Type-Definition.md @@ -0,0 +1,514 @@ +## Overview + +```typescript +type ILayoutSpec = IBaseLayoutSpec | IGridLayoutSpec; +``` + +## Base Layout Specification + +```typescript +interface IBaseLayoutSpec extends ILayoutSpecBase { + type: 'base'; // Default layout type +} +``` + +## Grid Layout Specification + +```typescript +interface IGridLayoutSpec extends ILayoutSpecBase { + type: 'grid'; // Grid layout type + col: number; // Total number of columns + row: number; // Total number of rows + colWidth?: ColumnWidthSpec[]; // Column width specifications + rowHeight?: RowHeightSpec[]; // Row height specifications + elements: ElementSpec[]; // Element positioning configuration +} +``` + +## Layout Specification Base + +```typescript +interface ILayoutSpecBase { + type: string; // Layout type identifier +} +``` + +## Element Positioning Configuration + +```typescript +type ElementSpec = ( + | { + modelKey: string; // Component spec key (e.g., 'legends') + modelIndex: number; // Component index + } + | { + modelId: string; // Component identifier + } +) & { + col: number; // Column position (0-based) + colSpan?: number; // Column span (default: 1) + row: number; // Row position (0-based) + rowSpan?: number; // Row span (default: 1) +}; +``` + +## Grid Size Configuration + +### Column Width Specification + +```typescript +interface ColumnWidthSpec { + index: number; // Column index (0-based) + size: number | ((maxSize: number) => number); // Width in pixels or function +} +``` + +### Row Height Specification + +```typescript +interface RowHeightSpec { + index: number; // Row index (0-based) + size: number | ((maxSize: number) => number); // Height in pixels or function +} +``` + +## Complete Interface Definition + +```typescript +interface ILayoutSpec { + // Layout type + type: 'base' | 'grid'; + + // Grid layout specific properties (when type === 'grid') + col?: number; // Total columns in grid + row?: number; // Total rows in grid + + // Optional grid sizing + colWidth?: { + index: number; // Column index (0-based) + size: number | ((maxSize: number) => number); // Column width + }[]; + + rowHeight?: { + index: number; // Row index (0-based) + size: number | ((maxSize: number) => number); // Row height + }[]; + + // Element positioning (grid layout only) + elements?: { + // Component identification (one of the following) + modelKey?: string; // Component type (e.g., 'legends', 'axes') + modelIndex?: number; // Component index within type + modelId?: string; // Unique component identifier + + // Grid positioning + col: number; // Column position (0-based) + colSpan?: number; // Columns to span (default: 1) + row: number; // Row position (0-based) + rowSpan?: number; // Rows to span (default: 1) + }[]; +} +``` + +## Usage Examples + +### Base Layout (Default) + +```typescript +const baseLayout: ILayoutSpec = { + type: 'base' +}; +``` + +### Simple Grid Layout + +```typescript +const simpleGrid: ILayoutSpec = { + type: 'grid', + col: 2, + row: 2, + elements: [ + { + modelKey: 'legends', + modelIndex: 0, + col: 0, + row: 0 + }, + { + modelId: 'main-chart', + col: 1, + row: 0, + colSpan: 1, + rowSpan: 2 + } + ] +}; +``` + +### Grid with Custom Sizing + +```typescript +const customSizedGrid: ILayoutSpec = { + type: 'grid', + col: 3, + row: 2, + colWidth: [ + { index: 0, size: 100 }, // First column: 100px + { index: 2, size: 150 } // Third column: 150px + ], + rowHeight: [ + { index: 0, size: 80 }, // First row: 80px + { index: 1, size: maxSize => maxSize - 100 } // Second row: remaining space minus 100px + ], + elements: [ + { + modelKey: 'title', + modelIndex: 0, + col: 0, + row: 0, + colSpan: 3 // Span all 3 columns + }, + { + modelKey: 'legends', + modelIndex: 0, + col: 0, + row: 1 + }, + { + modelId: 'chart-region', + col: 1, + row: 1, + colSpan: 2 // Span 2 columns + } + ] +}; +``` + +### Dashboard-Style Layout + +```typescript +const dashboardLayout: ILayoutSpec = { + type: 'grid', + col: 4, + row: 3, + colWidth: [ + { index: 0, size: 200 }, // Sidebar width + { index: 1, size: maxSize => (maxSize - 200) / 3 }, + { index: 2, size: maxSize => (maxSize - 200) / 3 }, + { index: 3, size: maxSize => (maxSize - 200) / 3 } + ], + elements: [ + // Header + { + modelKey: 'title', + modelIndex: 0, + col: 0, + row: 0, + colSpan: 4 + }, + // Sidebar + { + modelKey: 'legends', + modelIndex: 0, + col: 0, + row: 1, + rowSpan: 2 + }, + // Chart grid + { + modelId: 'chart1', + col: 1, + row: 1 + }, + { + modelId: 'chart2', + col: 2, + row: 1 + }, + { + modelId: 'chart3', + col: 3, + row: 1 + }, + { + modelId: 'chart4', + col: 1, + row: 2, + colSpan: 2 // Span 2 columns + }, + { + modelId: 'chart5', + col: 3, + row: 2 + } + ] +}; +``` + +## Chart Integration Examples + +### Multi-Chart Grid Layout + +```typescript +const multiChartGrid = { + type: 'common', + layout: { + type: 'grid', + col: 2, + row: 2, + elements: [ + { + modelKey: 'region', + modelIndex: 0, + col: 0, + row: 0 + }, + { + modelKey: 'region', + modelIndex: 1, + col: 1, + row: 0 + }, + { + modelKey: 'region', + modelIndex: 2, + col: 0, + row: 1, + colSpan: 2 // Full width bottom chart + } + ] + }, + region: [{ id: 'region1' }, { id: 'region2' }, { id: 'region3' }] +}; +``` + +### Layout with Shared Components + +```typescript +const sharedComponentLayout = { + type: 'common', + layout: { + type: 'grid', + col: 3, + row: 3, + rowHeight: [ + { index: 0, size: 60 }, // Title row + { index: 2, size: 80 } // Legend row + ], + elements: [ + // Shared title + { + modelKey: 'title', + modelIndex: 0, + col: 0, + row: 0, + colSpan: 3 + }, + // Charts + { + modelKey: 'region', + modelIndex: 0, + col: 0, + row: 1 + }, + { + modelKey: 'region', + modelIndex: 1, + col: 1, + row: 1 + }, + { + modelKey: 'region', + modelIndex: 2, + col: 2, + row: 1 + }, + // Shared legend + { + modelKey: 'legends', + modelIndex: 0, + col: 0, + row: 2, + colSpan: 3 + } + ] + } +}; +``` + +### Responsive Grid Layout + +```typescript +const responsiveLayout: ILayoutSpec = { + type: 'grid', + col: 2, + row: 3, + colWidth: [ + { index: 0, size: maxSize => Math.min(300, maxSize * 0.3) }, + { index: 1, size: maxSize => maxSize - Math.min(300, maxSize * 0.3) } + ], + rowHeight: [ + { index: 0, size: 60 }, // Fixed header + { index: 1, size: maxSize => (maxSize - 140) * 0.7 }, // Main content + { index: 2, size: 80 } // Fixed footer + ], + elements: [ + { + modelKey: 'title', + modelIndex: 0, + col: 0, + row: 0, + colSpan: 2 + }, + { + modelKey: 'legends', + modelIndex: 0, + col: 0, + row: 1 + }, + { + modelId: 'main-chart', + col: 1, + row: 1 + }, + { + modelKey: 'dataZoom', + modelIndex: 0, + col: 0, + row: 2, + colSpan: 2 + } + ] +}; +``` + +## Layout Type Behaviors + +### Base Layout (`type: 'base'`) + +- Uses default positioning strategy +- Components positioned based on their `orient` property +- Automatic space allocation +- No explicit grid structure + +### Grid Layout (`type: 'grid'`) + +- Explicit grid-based positioning +- Precise control over component placement +- Support for spanning multiple cells +- Custom row/column sizing + +## Element Identification Methods + +### Model Key + Index + +```typescript +{ + modelKey: 'legends', // Component type + modelIndex: 0, // Index within type + col: 0, + row: 0 +} +``` + +### Model ID + +```typescript +{ + modelId: 'unique-component-id', // Direct component reference + col: 1, + row: 0 +} +``` + +## Size Configuration Options + +### Fixed Size + +```typescript +colWidth: [ + { index: 0, size: 200 } // Fixed 200px width +]; +``` + +### Dynamic Size Function + +```typescript +colWidth: [ + { + index: 1, + size: maxSize => maxSize * 0.6 // 60% of available space + } +]; +``` + +### Remaining Space Calculation + +```typescript +colWidth: [ + { index: 0, size: 150 }, // Fixed 150px + { + index: 1, + size: maxSize => maxSize - 150 // Remaining space + } +]; +``` + +## Grid Positioning Rules + +### Column/Row Indexing + +- Columns: 0-based indexing from left to right +- Rows: 0-based indexing from top to bottom + +### Spanning Behavior + +- `colSpan`: Number of columns the element occupies +- `rowSpan`: Number of rows the element occupies +- Default span is 1 for both dimensions + +### Overlap Handling + +- Elements can be positioned in overlapping cells +- Later-defined elements render on top +- Useful for layered components + +## Common Layout Patterns + +### Header-Content-Footer + +```typescript +{ + type: 'grid', + col: 1, + row: 3, + rowHeight: [ + { index: 0, size: 60 }, // Header + { index: 2, size: 40 } // Footer + ] +} +``` + +### Sidebar-Main + +```typescript +{ + type: 'grid', + col: 2, + row: 1, + colWidth: [ + { index: 0, size: 200 } // Sidebar + ] +} +``` + +### Equal Grid + +```typescript +{ + type: 'grid', + col: 2, + row: 2 + // No custom sizing = equal distribution +} +``` diff --git a/skills/vchart-development-skill/references/type-details/ILegendSpec-Type-Definition.md b/skills/vchart-development-skill/references/type-details/ILegendSpec-Type-Definition.md new file mode 100644 index 0000000000..e9caf08047 --- /dev/null +++ b/skills/vchart-development-skill/references/type-details/ILegendSpec-Type-Definition.md @@ -0,0 +1,545 @@ +## Overview +`ILegendSpec` defines the configuration interface for legend components in VChart. It is a union type that supports three legend types: discrete legends for categorical data, color legends for continuous color mapping, and size legends for continuous size mapping. + +## Union Type Structure + +```typescript +type ILegendSpec = IDiscreteLegendSpec | IColorLegendSpec | ISizeLegendSpec; +``` + +## Common Legend Configuration + +```typescript +interface ILegendCommonSpec extends Omit { + visible?: boolean; // Legend visibility (default: true) + orient?: IOrientType; // Legend position (default: 'left') + position?: 'start' | 'middle' | 'end'; // Alignment within orientation (default: 'middle') + layout?: 'horizontal' | 'vertical'; // Layout direction (auto-determined by orient) + filter?: boolean; // Enable data filtering (default: true) + customFilter?: CustomFilterFunction; // Custom filter function + title?: ITitle; // Legend title configuration + background?: ILegendBackground; // Legend background styling + interactive?: boolean; // Enable interactions (default: true) +} +``` + +## Discrete Legend Specification + +```typescript +interface IDiscreteLegendSpec extends ILegendCommonSpec { + type?: 'discrete'; // Discrete legend type (default) + data?: DataTransformFunction; // Custom data transformation + item?: IItem; // Legend item configuration + pager?: IPager | ILegendScrollbar; // Pagination or scrollbar + scale?: string; // Associated scale ID + scaleName?: string; // Alternative scale name + field?: string; // Data field mapping + defaultSelected?: string[]; // Default selected items +} +``` + +## Color Legend Specification + +```typescript +interface IColorLegendSpec extends IContinuousLegendSpec { + type: 'color'; // Color legend type +} +``` + +## Size Legend Specification + +```typescript +interface ISizeLegendSpec extends IContinuousLegendSpec { + type: 'size'; // Size legend type + sizeBackground?: IRectMarkStyle; // Size background styling + align?: 'top' | 'bottom' | 'left' | 'right'; // Handler alignment +} +``` + +## Continuous Legend Base + +```typescript +interface IContinuousLegendSpec extends ILegendCommonSpec { + inverse?: boolean; // Reverse display order (default: false) + field?: string; // Associated data field + scale?: string; // Associated scale ID + defaultSelected?: [number, number]; // Default selected range + slidable?: boolean; // Enable dragging (default: true) + rail?: IRailConfiguration; // Slider rail styling + handler?: IHandlerConfiguration; // Slider handler styling + track?: ITrackConfiguration; // Selected area styling + startText?: ITextAttribute; // Start text configuration + endText?: ITextAttribute; // End text configuration + handlerText?: IHandlerTextAttribute; // Handler text configuration +} +``` + +## Supporting Type Definitions + +### Legend Item Configuration +```typescript +interface IItem { + align?: 'left' | 'right'; // Icon-text alignment + background?: IItemBackground; // Item background styling + shape?: IItemShape; // Icon configuration + label?: IItemLabel; // Label configuration + value?: IItemValue; // Value configuration + focusIconStyle?: ISymbolMarkSpec; // Focus button styling + maxWidth?: number | string; // Maximum width constraint + width?: number | string; // Fixed width + height?: number | string; // Fixed height + autoEllipsisStrategy?: 'labelFirst' | 'valueFirst' | 'none'; // Text truncation strategy +} +``` + +### Title Configuration +```typescript +interface ITitle { + textStyle?: ITextMarkSpec; // Title text styling + shape?: { // Title icon configuration + visible?: boolean; + space?: number; + style?: ISymbolMarkSpec; + }; + background?: { // Title background + visible?: boolean; + style?: IRectMarkSpec; + }; + // Additional title properties from LegendTitle +} +``` + +### Background Configuration +```typescript +interface ILegendBackground { + visible?: boolean; // Show background + padding?: IPadding | number | number[]; // Background padding + style?: IRectMarkSpec; // Background styling +} +``` + +### Pagination Configuration +```typescript +interface IPager { + textStyle?: ITextMarkSpec; // Page text styling + handler?: { // Navigation buttons + space?: number; // Button-text spacing + preShape?: string; // Previous button shape + nextShape?: string; // Next button shape + style?: ISymbolMarkSpec; // Button styling + state?: { // Button states + hover?: ISymbolMarkSpec; + disable?: ISymbolMarkSpec; + }; + }; +} +``` + +### Scrollbar Configuration +```typescript +interface ILegendScrollbar { + type: 'scrollbar'; + railStyle?: IRectMarkSpec; // Scrollbar rail styling + sliderStyle?: IRectMarkSpec; // Scrollbar slider styling +} +``` + +## Complete Interface Definition + +```typescript +interface ILegendSpec { + // Component association + regionIndex?: number | number[]; + regionId?: string | number | (string | number)[]; + seriesIndex?: number | number[]; + seriesId?: string | number | (string | number)[]; + + // Common properties + visible?: boolean; + orient?: 'left' | 'top' | 'right' | 'bottom' | 'z'; + position?: 'start' | 'middle' | 'end'; + layout?: 'horizontal' | 'vertical'; + filter?: boolean; + customFilter?: (data: any, selectedRange: string[] | number[], datumField: string) => any; + interactive?: boolean; + + // Legend type (determines additional properties) + type?: 'discrete' | 'color' | 'size'; + + // Title configuration + title?: { + textStyle?: ITextMarkSpec; + shape?: { + visible?: boolean; + space?: number; + style?: ISymbolMarkSpec; + }; + background?: { + visible?: boolean; + style?: IRectMarkSpec; + }; + }; + + // Background configuration + background?: { + visible?: boolean; + padding?: IPadding | number | number[]; + style?: IRectMarkSpec; + }; + + // Discrete legend specific + data?: (data: LegendItemDatum[], colorScale: IBaseScale, globalScale: IGlobalScale) => LegendItemDatum[]; + item?: { + align?: 'left' | 'right'; + background?: { + visible?: boolean; + style?: IRectMarkSpec; + state?: { + selected?: IRectMarkSpec; + unSelected?: IRectMarkSpec; + selectedHover?: IRectMarkSpec; + unSelectedHover?: IRectMarkSpec; + }; + }; + shape?: { + visible?: boolean; + space?: number; + style?: ISymbolMarkSpec; + state?: { + selected?: ISymbolMarkSpec; + unSelected?: ISymbolMarkSpec; + selectedHover?: ISymbolMarkSpec; + unSelectedHover?: ISymbolMarkSpec; + }; + }; + label?: { + widthRatio?: number; + space?: number; + formatMethod?: (text: string | number, item: LegendItemDatum, index: number) => any; + formatter?: string; + style?: ITextMarkSpec; + state?: { + selected?: ITextMarkSpec; + unSelected?: ITextMarkSpec; + selectedHover?: ITextMarkSpec; + unSelectedHover?: ITextMarkSpec; + }; + }; + value?: { + widthRatio?: number; + space?: number; + alignRight?: boolean; + formatMethod?: (text: string | number, item: LegendItemDatum, index: number) => any; + formatter?: string | string[]; + style?: ITextMarkSpec; + state?: { + selected?: ITextMarkSpec; + unSelected?: ITextMarkSpec; + selectedHover?: ITextMarkSpec; + unSelectedHover?: ITextMarkSpec; + }; + }; + maxWidth?: number | string; + width?: number | string; + height?: number | string; + autoEllipsisStrategy?: 'labelFirst' | 'valueFirst' | 'none'; + }; + pager?: { + textStyle?: ITextMarkSpec; + handler?: { + space?: number; + preShape?: string; + nextShape?: string; + style?: ISymbolMarkSpec; + state?: { + hover?: ISymbolMarkSpec; + disable?: ISymbolMarkSpec; + }; + }; + } | { + type: 'scrollbar'; + railStyle?: IRectMarkSpec; + sliderStyle?: IRectMarkSpec; + }; + scale?: string; + scaleName?: string; + field?: string; + defaultSelected?: string[]; + + // Continuous legend specific (color/size) + inverse?: boolean; + slidable?: boolean; + rail?: { + width?: number; + height?: number; + style?: IRectMarkSpec; + }; + handler?: { + visible?: boolean; + style?: ISymbolMarkSpec; + }; + track?: { + style?: IRectMarkSpec; + }; + startText?: { + visible?: boolean; + text?: string | number; + space?: number; + style?: ITextMarkSpec; + }; + endText?: { + visible?: boolean; + text?: string | number; + space?: number; + style?: ITextMarkSpec; + }; + handlerText?: { + visible?: boolean; + precision?: number; + formatter?: (text: string | number) => string | number; + space?: number; + style?: ITextMarkSpec; + }; + + // Size legend specific + sizeBackground?: IRectMarkSpec; + align?: 'top' | 'bottom' | 'left' | 'right'; +} +``` + +## Usage Examples + +### Basic Discrete Legend +```typescript +const discreteLegend: ILegendSpec = { + type: 'discrete', + visible: true, + orient: 'right', + position: 'middle' +}; +``` + +### Styled Discrete Legend with Items +```typescript +const styledDiscreteLegend: ILegendSpec = { + type: 'discrete', + orient: 'top', + layout: 'horizontal', + title: { + textStyle: { + fontSize: 14, + fontWeight: 'bold', + fill: '#333' + } + }, + item: { + align: 'left', + shape: { + visible: true, + space: 8, + style: { + size: 10 + } + }, + label: { + space: 6, + style: { + fontSize: 12, + fill: '#666' + } + } + } +}; +``` + +### Color Legend for Continuous Data +```typescript +const colorLegend: ILegendSpec = { + type: 'color', + orient: 'bottom', + field: 'temperature', + scale: 'temperatureScale', + defaultSelected: [20, 80], + rail: { + width: 200, + height: 20, + style: { + fill: 'linear-gradient(90deg, blue, red)' + } + }, + handler: { + visible: true, + style: { + fill: '#fff', + stroke: '#333', + size: 12 + } + } +}; +``` + +### Size Legend with Custom Text +```typescript +const sizeLegend: ILegendSpec = { + type: 'size', + orient: 'right', + field: 'population', + align: 'left', + startText: { + visible: true, + text: 'Small', + style: { + fontSize: 10, + fill: '#999' + } + }, + endText: { + visible: true, + text: 'Large', + style: { + fontSize: 10, + fill: '#999' + } + }, + handlerText: { + visible: true, + precision: 0, + formatter: (value) => `${value}K` + } +}; +``` + +### Legend with Pagination +```typescript +const paginatedLegend: ILegendSpec = { + type: 'discrete', + orient: 'bottom', + layout: 'horizontal', + pager: { + textStyle: { + fontSize: 12, + fill: '#666' + }, + handler: { + space: 8, + style: { + size: 12, + fill: '#007acc' + }, + state: { + hover: { + fill: '#005a9e' + }, + disable: { + fill: '#ccc' + } + } + } + } +}; +``` + +### Legend with Scrollbar +```typescript +const scrollableLegend: ILegendSpec = { + type: 'discrete', + orient: 'right', + pager: { + type: 'scrollbar', + railStyle: { + fill: '#f0f0f0', + cornerRadius: 3 + }, + sliderStyle: { + fill: '#007acc', + cornerRadius: 3 + } + } +}; +``` + +## Chart Integration Examples + +### Bar Chart with Discrete Legend +```typescript +const barChart = { + type: 'bar', + data: { values: data }, + xField: 'category', + yField: 'value', + seriesField: 'series', + legends: { + visible: true, + orient: 'top', + item: { + shape: { + style: { + symbolType: 'rect' + } + } + } + } +}; +``` + +### Heatmap with Color Legend +```typescript +const heatmap = { + type: 'heatmap', + data: { values: data }, + xField: 'x', + yField: 'y', + valueField: 'value', + legends: { + type: 'color', + orient: 'right', + field: 'value', + rail: { + width: 20, + height: 200 + } + } +}; +``` + +### Scatter Plot with Size Legend +```typescript +const scatterPlot = { + type: 'scatter', + data: { values: data }, + xField: 'x', + yField: 'y', + sizeField: 'size', + legends: { + type: 'size', + orient: 'bottom', + field: 'size', + align: 'top' + } +}; +``` + +### Multi-Legend Configuration +```typescript +const multiLegendChart = { + type: 'scatter', + data: { values: data }, + legends: [ + { + type: 'discrete', + orient: 'top', + field: 'category' + }, + { + type: 'color', + orient: 'right', + field: 'temperature' + }, + { + type: 'size', + orient: 'bottom', + field: 'population' + } + ] +}; +``` \ No newline at end of file diff --git a/skills/vchart-development-skill/references/type-details/ILineLikeLabelSpec-Type-Definition.md b/skills/vchart-development-skill/references/type-details/ILineLikeLabelSpec-Type-Definition.md new file mode 100644 index 0000000000..9699959cb3 --- /dev/null +++ b/skills/vchart-development-skill/references/type-details/ILineLikeLabelSpec-Type-Definition.md @@ -0,0 +1,297 @@ +# ILineLikeLabelSpec Type Definition + +## Overview + +```typescript +type ILineLikeLabelSpec = Omit & { + // Enhanced position configuration + position?: Functional< + 'top' | 'bottom' | 'left' | 'right' | 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'center' + >; // Enhanced positioning @since 1.6.0 + + // Inherited from ILabelSpec (excluding position) + zIndex?: number; // Label layer level + visible?: boolean; // Visibility @default false + interactive?: boolean; // Interaction support @default false + textType?: 'text' | 'rich'; // Text type @deprecated @since 1.7.0 + formatMethod?: IFormatMethod<[text: string | string[], datum?: Datum, ctx?: ILabelFormatMethodContext]>; // Format function @since 1.10.0 + formatter?: string | string[]; // String template @since 1.7.0 + offset?: number; // Distance from data element + labelLayout?: 'series' | 'region'; // Layout scope + style?: ConvertToMarkStyleSpec; // Label style + state?: LabelStateStyle>; // Interactive state styles + overlap?: BaseLabelAttrs['overlap'] & OverlapExtension; // Overlap prevention + smartInvert?: BaseLabelAttrs['smartInvert']; // Smart color inversion + support3d?: boolean; // 3D support + syncState?: boolean; // Sync with data element state @since 1.9.0 + showRelatedMarkTooltip?: boolean; // Show related mark tooltip @since 1.13.5 + stackDataFilterType?: 'min' | 'max'; // Stack data filter @since 1.12.0 + dataFilter?: BaseLabelAttrs['dataFilter']; // Custom data filter @since 1.3.0 + customLayoutFunc?: BaseLabelAttrs['customLayoutFunc']; // Custom layout @since 1.3.0 + customOverlapFunc?: BaseLabelAttrs['customOverlapFunc']; // Custom overlap @since 1.3.0 + onAfterOverlapping?: BaseLabelAttrs['onAfterOverlapping']; // After overlap callback @since 1.13.5 + + // Animation properties + animation?: BaseLabelAttrs['animation']; + animationEnter?: BaseLabelAttrs['animationEnter']; + animationUpdate?: BaseLabelAttrs['animationUpdate']; + animationExit?: BaseLabelAttrs['animationExit']; +}; +``` + +## Position Types + +```typescript +type PositionType = + | 'top' + | 'bottom' + | 'left' + | 'right' + | 'top-right' + | 'top-left' + | 'bottom-right' + | 'bottom-left' + | 'center'; +``` + +**PositionType 标签位置类型：** + +- `'top'`: 数据点上方 +- `'bottom'`: 数据点下方 +- `'left'`: 数据点左侧 +- `'right'`: 数据点右侧 +- `'top-right'`: 右上角对角位置 +- `'top-left'`: 左上角对角位置 +- `'bottom-right'`: 右下角对角位置 +- `'bottom-left'`: 左下角对角位置 +- `'center'`: 数据点中心 + +## Functional Configuration + +```typescript +type Functional = T | ((datum: any, ctx: any) => T); +``` + +**Functional 函数式配置：** +支持静态值或函数形式的动态配置，函数接收数据项和上下文作为参数。 + +## Format Method Types + +```typescript +type IFormatMethod = ( + ...args: T +) => string | { type: 'rich'; text: IRichTextCharacter[] } | { type: 'text'; text: string }; + +interface ILabelFormatMethodContext { + series?: ISeries; +} +``` + +## State Style Configuration + +```typescript +type LabelStateStyle = { + hover?: T; // Hover state style + hover_reverse?: T; // Non-hover state style + selected?: T; // Selected state style + selected_reverse?: T; // Non-selected state style +}; +``` + +## Overlap Extension + +```typescript +interface OverlapExtension { + padding?: { + top?: number; + bottom?: number; + left?: number; + right?: number; + }; // Overlap prevention area padding @since 1.13.7 +} +``` + +## Text Mark Style + +```typescript +interface IComposedTextMarkSpec extends ITextMarkSpec { + // Extended text mark specification with composition support +} + +interface ITextMarkSpec { + fontSize?: number; + fontFamily?: string; + fontWeight?: string | number; + fill?: string; + stroke?: string; + textAlign?: string; + textBaseline?: string; + // Additional text style properties +} +``` + +## Visual Type System + +### Visual Mapping Types + +```typescript +type VisualType = ValueType | FunctionType | IVisual; + +type ValueType = T; +type FunctionType = (datum: Datum, context: IModelMarkAttributeContext, source?: DataView) => T; + +type IVisual = IVisualSpecStyle | IVisualScale; + +interface IVisualSpecStyle extends IVisualSpecBase { + /** Data field for mapping */ + field?: string; +} + +interface IVisualScale { + /** Scale ID reference */ + scale: string; + + /** Data field for mapping */ + field?: string; + + /** Domain change strategy @default 'none' */ + changeDomain?: 'none' | 'replace' | 'expand'; +} +``` + +### Gradient Types + +```typescript +type IGradient = IGradientLinear | IGradientRadial | IGradientConical; + +interface IGradientLinear { + gradient: 'linear'; + x0?: GradientPropValue; // Start x (0-1) + y0?: GradientPropValue; // Start y (0-1) + x1?: GradientPropValue; // End x (0-1) + y1?: GradientPropValue; // End y (0-1) + stops: GradientStop[]; +} + +interface IGradientRadial { + gradient: 'radial'; + r0?: GradientPropValue; // Start radius + x0?: GradientPropValue; // Start x + y0?: GradientPropValue; // Start y + x1?: GradientPropValue; // End x + y1?: GradientPropValue; // End y + r1?: GradientPropValue; // End radius + stops: GradientStop[]; +} + +interface IGradientConical { + gradient: 'conical'; + x?: GradientPropValue; // Center x + y?: GradientPropValue; // Center y + startAngle?: GradientPropValue; // Start angle + endAngle?: GradientPropValue; // End angle + stops: GradientStop[]; +} + +type GradientStop = { + offset: GradientPropValue; // 0-1 offset + color?: GradientPropValue; // Color + opacity?: number; // Opacity +}; + +type GradientPropValue = ValueType | FunctionType; +``` + +## Dependency Type Definitions + +### Theme and Color Types + +```typescript +interface IColorKey { + // Theme color key interface +} + +interface IColor { + // VRender color interface +} +``` + +### HTML Overlay Types + +```typescript +type IMarkHtmlSpec = Partial; + +interface IGraphicStyle { + html?: { + // HTML overlay configuration + }; +} +``` + +### Cursor Types + +```typescript +type Cursor = + | 'auto' + | 'default' + | 'none' + | 'context-menu' + | 'help' + | 'pointer' + | 'progress' + | 'wait' + | 'cell' + | 'crosshair' + | 'text' + | 'vertical-text' + | 'alias' + | 'copy' + | 'move' + | 'no-drop' + | 'not-allowed' + | 'grab' + | 'grabbing' + | 'e-resize' + | 'n-resize' + | 'ne-resize' + | 'nw-resize' + | 's-resize' + | 'se-resize' + | 'sw-resize' + | 'w-resize' + | 'ew-resize' + | 'ns-resize' + | 'nesw-resize' + | 'nwse-resize' + | 'col-resize' + | 'row-resize' + | 'all-scroll' + | 'zoom-in' + | 'zoom-out'; +``` + +### Context Types + +```typescript +interface IModelMarkAttributeContext { + // Mark attribute context for function evaluation +} + +interface Datum { + // Data record interface + [key: string]: any; +} + +interface BaseLabelAttrs { + overlap?: OverlapConfig; + smartInvert?: SmartInvertConfig; + dataFilter?: DataFilterFunction; + customLayoutFunc?: CustomLayoutFunction; + customOverlapFunc?: CustomOverlapFunction; + onAfterOverlapping?: AfterOverlappingCallback; + animation?: AnimationConfig; + animationEnter?: AnimationConfig; + animationUpdate?: AnimationConfig; + animationExit?: AnimationConfig; +} +``` diff --git a/skills/vchart-development-skill/references/type-details/ILineMarkSpec-Type-Definition.md b/skills/vchart-development-skill/references/type-details/ILineMarkSpec-Type-Definition.md new file mode 100644 index 0000000000..e7c5a8de08 --- /dev/null +++ b/skills/vchart-development-skill/references/type-details/ILineMarkSpec-Type-Definition.md @@ -0,0 +1,302 @@ +## Overview + +```typescript +interface ILineMarkSpec { + // Line-specific properties + lineCap?: LineStrokeCap; // Line end cap style + lineJoin?: LineStrokeJoin; // Line join style + miterLimit?: number; // Miter limit ratio (default: 10.0) + strokeBoundsBuffer?: number; // Stroke bounds buffer + + // Inherited from ILineLikeMarkSpec + curveType?: InterpolateType; // Curve interpolation type + defined?: boolean; // Point validity control + + // Inherited from IFillMarkSpec + fill?: VisualType | IGradient | false | IColorKey; + fillOpacity?: number; + background?: IColor | HTMLImageElement | HTMLCanvasElement | null; + + // Inherited from ICommonSpec + visible?: boolean; // Visibility + x?: number; // X coordinate + y?: number; // Y coordinate + z?: number; // Z coordinate (3D) + stroke?: string | IGradient | false | (number | boolean)[] | IColorKey | null; + strokeOpacity?: number; // Stroke opacity + opacity?: number; // Overall opacity + lineWidth?: number; // Stroke width + lineDash?: number[]; // Dash pattern + lineDashOffset?: number; // Dash offset + cursor?: Cursor; // Mouse cursor + zIndex?: number; // Layer index + angle?: number; // Rotation angle + anchor?: [number, number]; // Anchor point + scaleX?: number; // X-scale factor + scaleY?: number; // Y-scale factor + scaleCenter?: [number | string, number | string]; // Scale center + + // 3D properties + alpha?: number; // X-direction rotation + beta?: number; // Y-direction rotation + anchor3d?: [number, number]; // 3D anchor point + + // Interaction properties + pickMode?: 'accurate' | 'imprecise' | 'custom'; + boundsMode?: 'accurate' | 'imprecise'; + pickStrokeBuffer?: number; // Stroke pick buffer @since 1.7.3 + + // Texture properties + texture?: TextureType | string; // Texture type + textureColor?: string; // Texture color + textureSize?: number; // Texture size + texturePadding?: number; // Texture padding + + // Border properties + outerBorder?: IBorder; // Outer border + innerBorder?: IBorder; // Inner border + + // HTML overlay + html?: IMarkHtmlSpec; // HTML overlay @since 1.10.0 +} +``` + +## Line Cap Types + +```typescript +type LineStrokeCap = 'butt' | 'round' | 'square'; +``` + +**LineStrokeCap 线段端点样式：** + +- `'butt'`: 平直端点（默认值） +- `'round'`: 圆形端点 +- `'square'`: 方形端点 + +## Line Join Types + +```typescript +type LineStrokeJoin = 'arcs' | 'bevel' | 'miter' | 'miter-clip' | 'round'; +``` + +**LineStrokeJoin 线段连接样式：** + +- `'miter'`: 斜接连接（默认值） +- `'round'`: 圆形连接 +- `'bevel'`: 斜面连接 +- `'arcs'`: 弧形连接 +- `'miter-clip'`: 裁剪斜接连接 + +## Interpolation Types + +```typescript +type InterpolateType = + | 'basis' + | 'linear' + | 'monotone' + | 'monotoneX' + | 'monotoneY' + | 'step' + | 'stepAfter' + | 'stepBefore' + | 'linearClosed' + | 'catmullRom' + | 'catmullRomClosed'; +``` + +**InterpolateType 曲线插值类型：** + +- `'linear'`: 线性插值（默认值） +- `'basis'`: B 样条插值 +- `'monotone'`: 单调三次插值 +- `'monotoneX'`: X 单调三次插值 +- `'monotoneY'`: Y 单调三次插值 +- `'step'`: 阶梯插值 +- `'stepAfter'`: 后阶梯插值 +- `'stepBefore'`: 前阶梯插值 +- `'linearClosed'`: 闭合线性插值 +- `'catmullRom'`: Catmull-Rom 样条插值 +- `'catmullRomClosed'`: 闭合 Catmull-Rom 样条插值 + +## TextureType + +```typescript +type TextureType = 'circle' | 'dimond' | 'rect' | 'vertical-line' | 'horizontal-line' | 'bias-lr' | 'bias-rl' | 'grid'; +``` + +## Border Configuration + +```typescript +interface IBorder { + /** Distance from shape edge */ + distance: number | string; + + /** Border color */ + stroke?: string | IGradient; + + /** Border opacity */ + strokeOpacity?: number; + + /** Border width */ + lineWidth?: number; + + /** Border dash pattern */ + lineDash?: number[]; + + /** Border dash offset */ + lineDashOffset?: number; +} +``` + +## Visual Type System + +### Visual Mapping Types + +```typescript +type VisualType = ValueType | FunctionType | IVisual; + +type ValueType = T; +type FunctionType = (datum: Datum, context: IModelMarkAttributeContext, source?: DataView) => T; + +type IVisual = IVisualSpecStyle | IVisualScale; + +interface IVisualSpecStyle extends IVisualSpecBase { + /** Data field for mapping */ + field?: string; +} + +interface IVisualScale { + /** Scale ID reference */ + scale: string; + + /** Data field for mapping */ + field?: string; + + /** Domain change strategy @default 'none' */ + changeDomain?: 'none' | 'replace' | 'expand'; +} +``` + +### Gradient Types + +```typescript +type IGradient = IGradientLinear | IGradientRadial | IGradientConical; + +interface IGradientLinear { + gradient: 'linear'; + x0?: GradientPropValue; // Start x (0-1) + y0?: GradientPropValue; // Start y (0-1) + x1?: GradientPropValue; // End x (0-1) + y1?: GradientPropValue; // End y (0-1) + stops: GradientStop[]; +} + +interface IGradientRadial { + gradient: 'radial'; + r0?: GradientPropValue; // Start radius + x0?: GradientPropValue; // Start x + y0?: GradientPropValue; // Start y + x1?: GradientPropValue; // End x + y1?: GradientPropValue; // End y + r1?: GradientPropValue; // End radius + stops: GradientStop[]; +} + +interface IGradientConical { + gradient: 'conical'; + x?: GradientPropValue; // Center x + y?: GradientPropValue; // Center y + startAngle?: GradientPropValue; // Start angle + endAngle?: GradientPropValue; // End angle + stops: GradientStop[]; +} + +type GradientStop = { + offset: GradientPropValue; // 0-1 offset + color?: GradientPropValue; // Color + opacity?: number; // Opacity +}; + +type GradientPropValue = ValueType | FunctionType; +``` + +## Dependency Type Definitions + +### Theme and Color Types + +```typescript +interface IColorKey { + // Theme color key interface +} + +interface IColor { + // VRender color interface +} +``` + +### HTML Overlay Types + +```typescript +type IMarkHtmlSpec = Partial; + +interface IGraphicStyle { + html?: { + // HTML overlay configuration + }; +} +``` + +### Cursor Types + +```typescript +type Cursor = + | 'auto' + | 'default' + | 'none' + | 'context-menu' + | 'help' + | 'pointer' + | 'progress' + | 'wait' + | 'cell' + | 'crosshair' + | 'text' + | 'vertical-text' + | 'alias' + | 'copy' + | 'move' + | 'no-drop' + | 'not-allowed' + | 'grab' + | 'grabbing' + | 'e-resize' + | 'n-resize' + | 'ne-resize' + | 'nw-resize' + | 's-resize' + | 'se-resize' + | 'sw-resize' + | 'w-resize' + | 'ew-resize' + | 'ns-resize' + | 'nesw-resize' + | 'nwse-resize' + | 'col-resize' + | 'row-resize' + | 'all-scroll' + | 'zoom-in' + | 'zoom-out'; +``` + +### Context Types + +```typescript +interface IModelMarkAttributeContext { + // Mark attribute context for function evaluation +} + +interface Datum { + // Data record interface + [key: string]: any; +} +``` diff --git a/skills/vchart-development-skill/references/type-details/ILinearAxisSpec-Type-Definition.md b/skills/vchart-development-skill/references/type-details/ILinearAxisSpec-Type-Definition.md new file mode 100644 index 0000000000..38a7a97d9e --- /dev/null +++ b/skills/vchart-development-skill/references/type-details/ILinearAxisSpec-Type-Definition.md @@ -0,0 +1,83 @@ +## Overview + +```typescript +interface ILinearAxisSpec { + // Range configuration + min?: number; // Hard minimum value + max?: number; // Hard maximum value + softMin?: number | ((domain: number[]) => number); // Conditional minimum @since 1.11.0 + softMax?: number | ((domain: number[]) => number); // Conditional maximum @since 1.11.0 + range?: { min?: number; max?: number }; // @deprecated Use outer min/max + + // Nice value configuration + nice?: boolean; // Enable nice values @default true + niceType?: 'tickCountFirst' | 'accurateFirst'; // Nice algorithm priority + zero?: boolean; // Include zero @default true + expand?: { min?: number; max?: number }; // Range expansion by ratio + + // Advanced features + tooltipFilterRange?: number | [number, number] | TooltipFilterFunction; // Tooltip filter range @since 1.4.0 + breaks?: ILinearAxisBreakSpec[]; // Axis breaks @since 1.12.4 +} +``` + +## Tooltip Filter Function + +```typescript +type TooltipFilterFunction = (params: { scale: IBaseScale }) => number | [number, number]; +``` + +**TooltipFilterFunction 工具提示过滤函数：** +接收包含 scale 对象的参数，返回数据筛选范围值或范围数组。 + +## Nice Type + +```typescript +type NiceType = 'tickCountFirst' | 'accurateFirst'; +``` + +**NiceType 优化类型：** + +- `'tickCountFirst'`: 刻度数量优先（默认值） +- `'accurateFirst'`: 精度优先 + +## Axis Breaks Configuration + +```typescript +interface ILinearAxisBreakSpec { + range?: [number, number]; // Data range to break + gap?: number | string; // Break gap representation + scopeType?: 'count' | 'length'; // Break calculation method @since 1.12.12 + // Additional break properties from AxisBreakProps +} +``` + +**ILinearAxisBreakSpec 轴截断配置：** + +- `range`: 要截断的数据范围 +- `gap`: 截断的视觉间隙（像素或百分比） +- `scopeType`: 截断计算方式 + - `'count'`: 按记录数进行分段 + - `'length'`: 按长度进行分段 + +## Expand Configuration + +```typescript +interface ExpandConfig { + min?: number; // Minimum expansion ratio + max?: number; // Maximum expansion ratio +} +``` + +**ExpandConfig 扩展配置：** +轴范围按比例扩展，当配置了 min 和 max 时该配置失效。 + +## Scale Interface + +```typescript +interface IBaseScale { + domain(): [number, number]; // Get scale domain + range(): [number, number]; // Get scale range + // Additional scale methods +} +``` diff --git a/skills/vchart-development-skill/references/type-details/ILinkPathMarkSpec-Type-Definition.md b/skills/vchart-development-skill/references/type-details/ILinkPathMarkSpec-Type-Definition.md new file mode 100644 index 0000000000..2f5bf7595f --- /dev/null +++ b/skills/vchart-development-skill/references/type-details/ILinkPathMarkSpec-Type-Definition.md @@ -0,0 +1,293 @@ +# ILinkPathMarkSpec Type Definition + +## Overview + +```typescript +interface ILinkPathMarkSpec extends IFillMarkSpec { + // Link path-specific properties + x0?: number; // Start point x coordinate + y0?: number; // Start point y coordinate + x1?: number; // End point x coordinate + y1?: number; // End point y coordinate + thickness?: number; // Path thickness/width + curvature?: number; // Path curvature (0-1, default 0.5) + round?: boolean; // Round all coordinates + ratio?: number; // Normal style path ratio + align?: 'start' | 'end' | 'center'; // Alignment + pathType?: 'line' | 'smooth' | 'polyline'; // Path type + endArrow?: boolean; // Show end arrow + startArrow?: boolean; // Show start arrow + backgroundStyle?: any; // Background line style + direction?: 'horizontal' | 'vertical' | 'LR' | 'RL' | 'TB' | 'BL' | 'radial'; // Path direction + + // Inherited from IFillMarkSpec + fill?: VisualType | IGradient | false | IColorKey; + fillOpacity?: number; + background?: IColor | HTMLImageElement | HTMLCanvasElement | null; + + // Inherited from ICommonSpec + visible?: boolean; // Visibility + x?: number; // X coordinate + y?: number; // Y coordinate + z?: number; // Z coordinate (3D) + stroke?: string | IGradient | false | (number | boolean)[] | IColorKey | null; + strokeOpacity?: number; // Stroke opacity + opacity?: number; // Overall opacity + lineWidth?: number; // Stroke width + lineDash?: number[]; // Dash pattern + lineDashOffset?: number; // Dash offset + cursor?: Cursor; // Mouse cursor + zIndex?: number; // Layer index + angle?: number; // Rotation angle + anchor?: [number, number]; // Anchor point + scaleX?: number; // X-scale factor + scaleY?: number; // Y-scale factor + scaleCenter?: [number | string, number | string]; // Scale center + + // 3D properties + alpha?: number; // X-direction rotation + beta?: number; // Y-direction rotation + anchor3d?: [number, number]; // 3D anchor point + + // Interaction properties + pickMode?: 'accurate' | 'imprecise' | 'custom'; + boundsMode?: 'accurate' | 'imprecise'; + pickStrokeBuffer?: number; // Stroke pick buffer @since 1.7.3 + + // Texture properties + texture?: TextureType | string; // Texture type + textureColor?: string; // Texture color + textureSize?: number; // Texture size + texturePadding?: number; // Texture padding + + // Border properties + outerBorder?: IBorder; // Outer border + innerBorder?: IBorder; // Inner border + + // HTML overlay + html?: IMarkHtmlSpec; // HTML overlay @since 1.10.0 +} +``` + +## Path Type + +```typescript +type PathType = 'line' | 'smooth' | 'polyline'; +``` + +**PathType 路径类型：** + +- `'line'`: 直线路径 +- `'smooth'`: 平滑路径 +- `'polyline'`: 多段线路径 + +## Path Alignment + +```typescript +type PathAlign = 'start' | 'end' | 'center'; +``` + +**PathAlign 路径对齐方式：** + +- `'start'`: 起点对齐 +- `'end'`: 终点对齐 +- `'center'`: 中心对齐 + +## Path Direction + +```typescript +type PathDirection = 'horizontal' | 'vertical' | 'LR' | 'RL' | 'TB' | 'BL' | 'radial'; +``` + +**PathDirection 路径方向：** + +- `'horizontal'`: 水平方向 +- `'vertical'`: 垂直方向 +- `'LR'`: 从左到右 +- `'RL'`: 从右到左 +- `'TB'`: 从上到下 +- `'BL'`: 从下到左 +- `'radial'`: 径向方向 + +## TextureType + +```typescript +type TextureType = 'circle' | 'dimond' | 'rect' | 'vertical-line' | 'horizontal-line' | 'bias-lr' | 'bias-rl' | 'grid'; +``` + +## Border Configuration + +```typescript +interface IBorder { + /** Distance from shape edge */ + distance: number | string; + + /** Border color */ + stroke?: string | IGradient; + + /** Border opacity */ + strokeOpacity?: number; + + /** Border width */ + lineWidth?: number; + + /** Border dash pattern */ + lineDash?: number[]; + + /** Border dash offset */ + lineDashOffset?: number; +} +``` + +## Visual Type System + +### Visual Mapping Types + +```typescript +type VisualType = ValueType | FunctionType | IVisual; + +type ValueType = T; +type FunctionType = (datum: Datum, context: IModelMarkAttributeContext, source?: DataView) => T; + +type IVisual = IVisualSpecStyle | IVisualScale; + +interface IVisualSpecStyle extends IVisualSpecBase { + /** Data field for mapping */ + field?: string; +} + +interface IVisualScale { + /** Scale ID reference */ + scale: string; + + /** Data field for mapping */ + field?: string; + + /** Domain change strategy @default 'none' */ + changeDomain?: 'none' | 'replace' | 'expand'; +} +``` + +### Gradient Types + +```typescript +type IGradient = IGradientLinear | IGradientRadial | IGradientConical; + +interface IGradientLinear { + gradient: 'linear'; + x0?: GradientPropValue; // Start x (0-1) + y0?: GradientPropValue; // Start y (0-1) + x1?: GradientPropValue; // End x (0-1) + y1?: GradientPropValue; // End y (0-1) + stops: GradientStop[]; +} + +interface IGradientRadial { + gradient: 'radial'; + r0?: GradientPropValue; // Start radius + x0?: GradientPropValue; // Start x + y0?: GradientPropValue; // Start y + x1?: GradientPropValue; // End x + y1?: GradientPropValue; // End y + r1?: GradientPropValue; // End radius + stops: GradientStop[]; +} + +interface IGradientConical { + gradient: 'conical'; + x?: GradientPropValue; // Center x + y?: GradientPropValue; // Center y + startAngle?: GradientPropValue; // Start angle + endAngle?: GradientPropValue; // End angle + stops: GradientStop[]; +} + +type GradientStop = { + offset: GradientPropValue; // 0-1 offset + color?: GradientPropValue; // Color + opacity?: number; // Opacity +}; + +type GradientPropValue = ValueType | FunctionType; +``` + +## Dependency Type Definitions + +### Theme and Color Types + +```typescript +interface IColorKey { + // Theme color key interface +} + +interface IColor { + // VRender color interface +} +``` + +### HTML Overlay Types + +```typescript +type IMarkHtmlSpec = Partial; + +interface IGraphicStyle { + html?: { + // HTML overlay configuration + }; +} +``` + +### Cursor Types + +```typescript +type Cursor = + | 'auto' + | 'default' + | 'none' + | 'context-menu' + | 'help' + | 'pointer' + | 'progress' + | 'wait' + | 'cell' + | 'crosshair' + | 'text' + | 'vertical-text' + | 'alias' + | 'copy' + | 'move' + | 'no-drop' + | 'not-allowed' + | 'grab' + | 'grabbing' + | 'e-resize' + | 'n-resize' + | 'ne-resize' + | 'nw-resize' + | 's-resize' + | 'se-resize' + | 'sw-resize' + | 'w-resize' + | 'ew-resize' + | 'ns-resize' + | 'nesw-resize' + | 'nwse-resize' + | 'col-resize' + | 'row-resize' + | 'all-scroll' + | 'zoom-in' + | 'zoom-out'; +``` + +### Context Types + +```typescript +interface IModelMarkAttributeContext { + // Mark attribute context for function evaluation +} + +interface Datum { + // Data record interface + [key: string]: any; +} +``` diff --git a/skills/vchart-development-skill/references/type-details/ILiquidMarkSpec-Type-Definition.md b/skills/vchart-development-skill/references/type-details/ILiquidMarkSpec-Type-Definition.md new file mode 100644 index 0000000000..fa20c936ad --- /dev/null +++ b/skills/vchart-development-skill/references/type-details/ILiquidMarkSpec-Type-Definition.md @@ -0,0 +1,168 @@ +## Type Definition + +```typescript +interface ILiquidMarkSpec { + // Liquid-specific properties + wave?: number; + + // Inherited from ICommonSpec + visible?: boolean; + x?: number; + y?: number; + z?: number; + stroke?: string | IGradient | false | (number | boolean)[] | IColorKey | null; + strokeOpacity?: number; + opacity?: number; + lineWidth?: number; + lineDash?: number[]; + lineDashOffset?: number; + cursor?: Cursor; + zIndex?: number; + angle?: number; + anchor?: [number, number]; + scaleX?: number; + scaleY?: number; + scaleCenter?: [number | string, number | string]; + alpha?: number; + beta?: number; + anchor3d?: [number, number]; + pickMode?: 'accurate' | 'imprecise' | 'custom'; + boundsMode?: 'accurate' | 'imprecise'; + pickStrokeBuffer?: number; + texture?: TextureType | string; + textureColor?: string; + textureSize?: number; + texturePadding?: number; + outerBorder?: IBorder; + innerBorder?: IBorder; + html?: IMarkHtmlSpec; + [key: string]: any; +} +``` + +## Related Types + +### IGradient + +Union type supporting linear, radial, and conical gradients: + +```typescript +type IGradient = IGradientLinear | IGradientRadial | IGradientConical; +``` + +### IGradientLinear + +```typescript +interface IGradientLinear { + x0?: GradientPropValue; + y0?: GradientPropValue; + x1?: GradientPropValue; + y1?: GradientPropValue; + stops: GradientStop[]; + gradient: 'linear'; +} +``` + +### IGradientRadial + +```typescript +interface IGradientRadial { + r0?: GradientPropValue; + x0?: GradientPropValue; + y0?: GradientPropValue; + x1?: GradientPropValue; + y1?: GradientPropValue; + r1?: GradientPropValue; + stops: GradientStop[]; + gradient: 'radial'; +} +``` + +### IGradientConical + +```typescript +interface IGradientConical { + x?: GradientPropValue; + y?: GradientPropValue; + startAngle?: GradientPropValue; + endAngle?: GradientPropValue; + stops: GradientStop[]; + gradient: 'conical'; +} +``` + +### GradientStop + +```typescript +type GradientStop = { + offset: GradientPropValue; + color?: GradientPropValue; + opacity?: number; +}; +``` + +### GradientPropValue + +```typescript +type GradientPropValue = ValueType | FunctionType; +``` + +### IColorKey + +Theme-based color token reference for consistent color schemes. + +### TextureType + +```typescript +type TextureType = 'circle' | 'dimond' | 'rect' | 'vertical-line' | 'horizontal-line' | 'bias-lr' | 'bias-rl' | 'grid'; +``` + +### IBorder + +```typescript +interface IBorder { + distance: number | string; + stroke?: string | IGradient; + strokeOpacity?: number; + lineWidth?: number; + lineDash?: number[]; + lineDashOffset?: number; +} +``` + +### IMarkHtmlSpec + +```typescript +type IMarkHtmlSpec = Partial; +``` + +### IGraphicStyle + +```typescript +interface IGraphicStyle { + html?: { + anchorType?: 'position' | 'boundsLeftTop' | 'boundsRightTop' | 'boundsLeftBottom' | 'boundsRightBottom'; + element?: string | HTMLElement; + style?: Partial; + pointerEvents?: boolean; + container?: HTMLElement; + }; + [key: string]: any; +} +``` + +### Cursor + +Type defining available cursor styles for interactive elements. + +### ValueType + +```typescript +type ValueType = T; +``` + +### FunctionType + +```typescript +type FunctionType = (datum: Datum, context: IModelMarkAttributeContext, source?: DataView) => T; +``` diff --git a/skills/vchart-development-skill/references/type-details/ILiquidOutlineSpec-Type-Definition.md b/skills/vchart-development-skill/references/type-details/ILiquidOutlineSpec-Type-Definition.md new file mode 100644 index 0000000000..cb1f8bb471 --- /dev/null +++ b/skills/vchart-development-skill/references/type-details/ILiquidOutlineSpec-Type-Definition.md @@ -0,0 +1,254 @@ +# ILiquidOutlineSpec Type Definition + +## Overview + +```typescript +interface ILiquidOutlineSpec extends ISymbolMarkSpec { + // Liquid outline-specific properties + lineWidth: number; // Stroke width (required) + + // Inherited from ISymbolMarkSpec + dx?: number; // X-direction offset + dy?: number; // Y-direction offset + size?: number | number[]; // Size (outer circle radius) + shape?: ShapeType | string; // Shape type + symbolType?: ShapeType | string; // Symbol type + scaleX?: number; // X-scale factor + scaleY?: number; // Y-scale factor + + // Inherited from IFillMarkSpec + fill?: VisualType | IGradient | false | IColorKey; + fillOpacity?: number; + background?: IColor | HTMLImageElement | HTMLCanvasElement | null; + + // Inherited from ICommonSpec + visible?: boolean; // Visibility + x?: number; // X coordinate + y?: number; // Y coordinate + z?: number; // Z coordinate (3D) + stroke?: string | IGradient | false | (number | boolean)[] | IColorKey | null; + strokeOpacity?: number; // Stroke opacity + opacity?: number; // Overall opacity + lineDash?: number[]; // Dash pattern + lineDashOffset?: number; // Dash offset + cursor?: Cursor; // Mouse cursor + zIndex?: number; // Layer index + angle?: number; // Rotation angle + anchor?: [number, number]; // Anchor point + scaleCenter?: [number | string, number | string]; // Scale center + + // 3D properties + alpha?: number; // X-direction rotation + beta?: number; // Y-direction rotation + anchor3d?: [number, number]; // 3D anchor point + + // Interaction properties + pickMode?: 'accurate' | 'imprecise' | 'custom'; + boundsMode?: 'accurate' | 'imprecise'; + pickStrokeBuffer?: number; // Stroke pick buffer @since 1.7.3 + + // Texture properties + texture?: TextureType | string; // Texture type + textureColor?: string; // Texture color + textureSize?: number; // Texture size + texturePadding?: number; // Texture padding + + // Border properties + outerBorder?: IBorder; // Outer border + innerBorder?: IBorder; // Inner border + + // HTML overlay + html?: IMarkHtmlSpec; // HTML overlay @since 1.10.0 +} +``` + +## ShapeType + +```typescript +type ShapeType = SymbolType; +``` + +ShapeType 从`@visactor/vrender-core`导入，支持多种几何形状包括圆形、矩形、三角形等。 + +## TextureType + +```typescript +type TextureType = 'circle' | 'dimond' | 'rect' | 'vertical-line' | 'horizontal-line' | 'bias-lr' | 'bias-rl' | 'grid'; +``` + +## Border Configuration + +```typescript +interface IBorder { + /** Distance from shape edge */ + distance: number | string; + + /** Border color */ + stroke?: string | IGradient; + + /** Border opacity */ + strokeOpacity?: number; + + /** Border width */ + lineWidth?: number; + + /** Border dash pattern */ + lineDash?: number[]; + + /** Border dash offset */ + lineDashOffset?: number; +} +``` + +## Visual Type System + +### Visual Mapping Types + +```typescript +type VisualType = ValueType | FunctionType | IVisual; + +type ValueType = T; +type FunctionType = (datum: Datum, context: IModelMarkAttributeContext, source?: DataView) => T; + +type IVisual = IVisualSpecStyle | IVisualScale; + +interface IVisualSpecStyle extends IVisualSpecBase { + /** Data field for mapping */ + field?: string; +} + +interface IVisualScale { + /** Scale ID reference */ + scale: string; + + /** Data field for mapping */ + field?: string; + + /** Domain change strategy @default 'none' */ + changeDomain?: 'none' | 'replace' | 'expand'; +} +``` + +### Gradient Types + +```typescript +type IGradient = IGradientLinear | IGradientRadial | IGradientConical; + +interface IGradientLinear { + gradient: 'linear'; + x0?: GradientPropValue; // Start x (0-1) + y0?: GradientPropValue; // Start y (0-1) + x1?: GradientPropValue; // End x (0-1) + y1?: GradientPropValue; // End y (0-1) + stops: GradientStop[]; +} + +interface IGradientRadial { + gradient: 'radial'; + r0?: GradientPropValue; // Start radius + x0?: GradientPropValue; // Start x + y0?: GradientPropValue; // Start y + x1?: GradientPropValue; // End x + y1?: GradientPropValue; // End y + r1?: GradientPropValue; // End radius + stops: GradientStop[]; +} + +interface IGradientConical { + gradient: 'conical'; + x?: GradientPropValue; // Center x + y?: GradientPropValue; // Center y + startAngle?: GradientPropValue; // Start angle + endAngle?: GradientPropValue; // End angle + stops: GradientStop[]; +} + +type GradientStop = { + offset: GradientPropValue; // 0-1 offset + color?: GradientPropValue; // Color + opacity?: number; // Opacity +}; + +type GradientPropValue = ValueType | FunctionType; +``` + +## Dependency Type Definitions + +### Theme and Color Types + +```typescript +interface IColorKey { + // Theme color key interface +} + +interface IColor { + // VRender color interface +} +``` + +### HTML Overlay Types + +```typescript +type IMarkHtmlSpec = Partial; + +interface IGraphicStyle { + html?: { + // HTML overlay configuration + }; +} +``` + +### Cursor Types + +```typescript +type Cursor = + | 'auto' + | 'default' + | 'none' + | 'context-menu' + | 'help' + | 'pointer' + | 'progress' + | 'wait' + | 'cell' + | 'crosshair' + | 'text' + | 'vertical-text' + | 'alias' + | 'copy' + | 'move' + | 'no-drop' + | 'not-allowed' + | 'grab' + | 'grabbing' + | 'e-resize' + | 'n-resize' + | 'ne-resize' + | 'nw-resize' + | 's-resize' + | 'se-resize' + | 'sw-resize' + | 'w-resize' + | 'ew-resize' + | 'ns-resize' + | 'nesw-resize' + | 'nwse-resize' + | 'col-resize' + | 'row-resize' + | 'all-scroll' + | 'zoom-in' + | 'zoom-out'; +``` + +### Context Types + +```typescript +interface IModelMarkAttributeContext { + // Mark attribute context for function evaluation +} + +interface Datum { + // Data record interface + [key: string]: any; +} +``` diff --git a/skills/vchart-development-skill/references/type-details/IMarkAreaSpec-Type-Definition.md b/skills/vchart-development-skill/references/type-details/IMarkAreaSpec-Type-Definition.md new file mode 100644 index 0000000000..5b6048653c --- /dev/null +++ b/skills/vchart-development-skill/references/type-details/IMarkAreaSpec-Type-Definition.md @@ -0,0 +1,357 @@ +## Core Interface Structure + +```typescript +type IMarkAreaSpec = IMarkerSpec & + ( + | IMarkAreaXSpec + | IMarkAreaYSpec + | IMarkAreaXYSpec + | IMarkAreaAngleSpec + | IMarkAreaRadiusSpec + | IMarkAreaAngleRadiusSpec + | IMarkAreaCoordinateSpec + | IMarkerPositionsSpec + ) & + IMarkAreaTheme & + BaseMarkerAnimation; +``` + +## Base Properties (from IMarkerSpec) + +### Component Association + +```typescript +interface IMarkerSpec { + // Component association + regionIndex?: number | number[]; // Associated region index + regionId?: StringOrNumber | StringOrNumber[]; // Associated region ID + seriesIndex?: number | number[]; // Associated series index + seriesId?: StringOrNumber | StringOrNumber[]; // Associated series ID + relativeSeriesIndex?: number; // Marker data series index + relativeSeriesId?: number | string; // Marker data series ID + + // Component behavior + visible?: boolean; // Component visibility (default: true) + interactive?: boolean; // Component interactivity (default: true) + autoRange?: boolean; // Auto extend axis range (default: false) + clip?: boolean; // Clip overflow content (default: false) + name?: string; // Component name identifier + coordinateType?: string; // Coordinate system type +} +``` + +## Area Configuration Types + +### 1. X-Axis Range Area + +```typescript +interface IMarkAreaXSpec extends IMarkerCrossSeriesSpec { + x: IDataPos | IDataPosCallback; // Start X position (value/aggregation/callback/percentage) + x1: IDataPos | IDataPosCallback; // End X position (forms range with x) +} +``` + +### 2. Y-Axis Range Area + +```typescript +interface IMarkAreaYSpec extends IMarkerCrossSeriesSpec { + y: IDataPos | IDataPosCallback; // Start Y position (value/aggregation/callback/percentage) + y1: IDataPos | IDataPosCallback; // End Y position (forms range with y) +} +``` + +### 3. Rectangular Area (X-Y Range) + +```typescript +interface IMarkAreaXYSpec extends IMarkerCrossSeriesSpec { + x: IDataPos | IDataPosCallback; // Start X position + x1: IDataPos | IDataPosCallback; // End X position + y: IDataPos | IDataPosCallback; // Start Y position + y1: IDataPos | IDataPosCallback; // End Y position +} +``` + +### 4. Polar Coordinate Areas + +#### Angle Range Area + +```typescript +interface IMarkAreaAngleSpec extends IMarkerCrossSeriesSpec { + angle: IDataPos | IDataPosCallback; // Start angle position + angle1: IDataPos | IDataPosCallback; // End angle position +} +``` + +#### Radius Range Area + +```typescript +interface IMarkAreaRadiusSpec extends IMarkerCrossSeriesSpec { + radius: IDataPos | IDataPosCallback; // Start radius position + radius1: IDataPos | IDataPosCallback; // End radius position +} +``` + +#### Angle-Radius Range Area + +```typescript +interface IMarkAreaAngleRadiusSpec extends IMarkerCrossSeriesSpec { + angle: IDataPos | IDataPosCallback; // Start angle position + angle1: IDataPos | IDataPosCallback; // End angle position + radius: IDataPos | IDataPosCallback; // Start radius position + radius1: IDataPos | IDataPosCallback; // End radius position +} +``` + +### 5. Data Point Based Area + +```typescript +interface IMarkAreaCoordinateSpec { + coordinates: IDataPointSpec[] | ((seriesData: Datum[], relativeSeries: IMarkerSupportSeries) => IDataPointSpec[]); + coordinatesOffset?: OffsetPoint[]; // Canvas coordinate offsets for each point +} +``` + +### 6. Canvas Position Based Area + +```typescript +interface IMarkerPositionsSpec { + positions: + | MarkerPositionPoint[] + | ((seriesData: Datum[], relativeSeries: IMarkerSupportSeries) => MarkerPositionPoint[]); + regionRelative?: boolean; // Whether relative to region (default: false) +} +``` + +## Cross-Series Configuration + +```typescript +interface IMarkerCrossSeriesSpec { + startRelativeSeriesIndex?: number; // Start point series index + endRelativeSeriesIndex?: number; // End point series index + startRelativeSeriesId?: string; // Start point series ID + endRelativeSeriesId?: string; // End point series ID + specifiedDataSeriesIndex?: 'all' | number | number[]; // Data processing series index + specifiedDataSeriesId?: 'all' | string | string[]; // Data processing series ID +} +``` + +## Area Styling Configuration + +```typescript +interface IMarkAreaTheme { + area?: Partial>; // Area fill and border styling + label?: IMarkAreaLabel | IMarkAreaLabel[]; // Label configuration (supports multiple labels since 1.13.9) +} +``` + +### Area Style Properties + +```typescript +interface IPolygonMarkSpec { + fill?: string; // Fill color + fillOpacity?: number; // Fill opacity + stroke?: string; // Border color + strokeWidth?: number; // Border width + strokeOpacity?: number; // Border opacity + strokeDasharray?: number[]; // Border dash pattern + // ... more styling properties +} + +interface IArcMarkSpec { + fill?: string; // Fill color + stroke?: string; // Border color + strokeWidth?: number; // Border width + innerRadius?: number; // Inner radius (for polar areas) + outerRadius?: number; // Outer radius (for polar areas) + startAngle?: number; // Start angle + endAngle?: number; // End angle + // ... more styling properties +} +``` + +### Label Configuration + +```typescript +interface IMarkAreaLabel extends IMarkerLabelWithoutRefSpec { + position?: keyof typeof IMarkAreaLabelPosition | IMarkCommonArcLabelPosition; +} + +interface IMarkerLabelWithoutRefSpec { + visible?: boolean; // Label visibility + text?: string | string[] | number | number[] | RichTextContent; + formatMethod?: IFormatMethod<[markData: Datum[], seriesData: Datum[]]>; + + // Layout properties + minWidth?: number; // Minimum width (default: 30px) + maxWidth?: number; // Maximum width for text wrapping + autoRotate?: boolean; // Auto rotation based on area orientation + confine?: boolean; // Keep label within visible area + dx?: number; // Horizontal offset + dy?: number; // Vertical offset + + // Background configuration + labelBackground?: { + visible?: boolean; + padding?: IPadding | number[] | number; + customShape?: (text, attrs, path) => ICustomPath2D; + style?: IRectMarkSpec; + }; + + // Text decoration + shape?: { + visible?: boolean; + style: ISymbolMarkSpec; // Symbol before text + }; + space?: number; // Space between shape and text + + // Style and state configurations + style?: IComposedTextMarkSpec | MarkerStyleCallback; + state?: Record; +} +``` + +## Animation Configuration + +```typescript +interface BaseMarkerAnimation { + animationEnter?: T; // Enter animation + animationUpdate?: T; // Update animation + animationExit?: T; // Exit animation +} +``` + +## Helper Types + +### Data Position Types + +```typescript +type IDataPos = StringOrNumber | IAggrType; +type IAggrType = 'sum' | 'average' | 'min' | 'max' | 'variance' | 'standardDeviation' | 'median'; +type IDataPosCallback = ( + relativeSeriesData, + startRelativeSeriesData, + endRelativeSeriesData, + relativeSeries, + startRelativeSeries, + endRelativeSeries +) => StringOrNumber; +``` + +### Position Types + +```typescript +interface MarkerPositionPoint { + x: StringOrNumber; // X coordinate (pixel value or percentage) + y: StringOrNumber; // Y coordinate (pixel value or percentage) +} + +interface OffsetPoint { + x?: number | string; // X offset (pixels or percentage) + y?: number | string; // Y offset (pixels or percentage) +} +``` + +### State Configuration + +```typescript +type IMarkerState = { + style?: T | MarkerStyleCallback; + state?: Record>; +}; + +type MarkerStateValue = 'hover' | 'hover_reverse' | 'selected' | 'selected_reverse'; +``` + +## Usage Examples + +### X-Axis Range Area + +```typescript +const xRangeArea: IMarkAreaSpec = { + x: 10, + x1: 50, + area: { + style: { + fill: 'rgba(255, 0, 0, 0.3)', + stroke: 'red', + strokeWidth: 2 + } + }, + label: { + visible: true, + text: 'Target Range', + position: 'middle' + } +}; +``` + +### Y-Axis Range Area with Aggregation + +```typescript +const yRangeArea: IMarkAreaSpec = { + y: 'min', + y1: 'max', + area: { + style: { fill: 'rgba(0, 255, 0, 0.2)' }, + state: { + hover: { fill: 'rgba(0, 255, 0, 0.4)' } + } + } +}; +``` + +### Rectangular Area + +```typescript +const rectArea: IMarkAreaSpec = { + x: 10, + x1: 30, + y: 20, + y1: 40, + area: { + style: { + fill: 'rgba(0, 0, 255, 0.3)', + stroke: 'blue', + strokeDasharray: [5, 5] + } + }, + label: { + visible: true, + text: 'Key Region', + position: 'center' + } +}; +``` + +### Polar Area + +```typescript +const polarArea: IMarkAreaSpec = { + angle: 0, + angle1: 90, + radius: 50, + radius1: 100, + area: { + style: { + fill: 'rgba(255, 255, 0, 0.3)', + stroke: 'orange' + } + } +}; +``` + +### Data-driven Area + +```typescript +const dataArea: IMarkAreaSpec = { + coordinates: [ + { x: 'Q1', y: 'min' }, + { x: 'Q2', y: 'max' }, + { x: 'Q3', y: 'average' }, + { x: 'Q4', y: 'min' } + ], + area: { + style: { fill: 'rgba(128, 128, 128, 0.2)' } + } +}; +``` diff --git a/skills/vchart-development-skill/references/type-details/IMarkLineSpec-Type-Definition.md b/skills/vchart-development-skill/references/type-details/IMarkLineSpec-Type-Definition.md new file mode 100644 index 0000000000..94c5234412 --- /dev/null +++ b/skills/vchart-development-skill/references/type-details/IMarkLineSpec-Type-Definition.md @@ -0,0 +1,384 @@ +## Overview + +`IMarkLineSpec` is the configuration type for mark lines (auxiliary reference lines) in VChart, used to display trend lines, average lines, and other reference lines on charts. + +```typescript +export type IMarkLineSpec = + | (IMarkerSpec & CartesianMarkLineSpecs & IMarkLineTheme & BaseMarkerAnimation) + | (IStepMarkLineSpec & BaseMarkerAnimation); +``` + +## Basic Structure + +### IMarkerSpec - Base Configuration + +Common configuration for all marker components (flattened from IComponentSpec & ILayoutItemSpec): + +```typescript +interface IMarkerSpec { + // Component association + regionIndex?: number | number[]; + regionId?: StringOrNumber | StringOrNumber[]; + seriesIndex?: number | number[]; + seriesId?: StringOrNumber | StringOrNumber[]; + + // Layout configuration + layoutType?: ILayoutType; + layoutLevel?: number; + alignSelf?: 'start' | 'end' | 'middle'; + orient?: IOrientType; + padding?: ILayoutPaddingSpec; + noOuterPadding?: boolean; + width?: ILayoutNumber; + maxWidth?: ILayoutNumber; + minWidth?: ILayoutNumber; + height?: ILayoutNumber; + maxHeight?: ILayoutNumber; + minHeight?: ILayoutNumber; + offsetX?: ILayoutNumber; + offsetY?: ILayoutNumber; + zIndex?: number; + clip?: boolean; + left?: ILayoutNumber; + right?: ILayoutNumber; + top?: ILayoutNumber; + bottom?: ILayoutNumber; + center?: boolean; + + // Model specification + id?: StringOrNumber; + + // Marker specific properties + relativeSeriesIndex?: number; + relativeSeriesId?: number | string; + visible?: boolean; + interactive?: boolean; + autoRange?: boolean; + name?: string; + coordinateType?: string; +} +``` + +## Cartesian Coordinate System Mark Lines + +### Single Axis Lines + +#### IMarkLineXSpec - Vertical Line (X-axis) +```typescript +interface IMarkLineXSpec extends IMarkerCrossSeriesSpec { + /** + * X-axis position for vertical reference line + * Supports: value | aggregation | callback | percentage ('15%') + */ + x: IDataPos | IDataPosCallback; +} +``` + +#### IMarkLineYSpec - Horizontal Line (Y-axis) +```typescript +interface IMarkLineYSpec extends IMarkerCrossSeriesSpec { + /** + * Y-axis position for horizontal reference line + * Supports: value | aggregation | callback | percentage ('15%') + */ + y: IDataPos | IDataPosCallback; +} +``` + +### Two-Point Lines + +```typescript +interface IMarkLineXYSpec extends IMarkerCrossSeriesSpec { + x: IDataPos | IDataPosCallback; // Start point x + y: IDataPos | IDataPosCallback; // Start point y + x1: IDataPos | IDataPosCallback; // End point x + y1: IDataPos | IDataPosCallback; // End point y +} +``` + +## Polar Coordinate System Mark Lines + +### Single Axis Lines + +#### IMarkLineAngleSpec - Angle Line +```typescript +interface IMarkLineAngleSpec extends IMarkerCrossSeriesSpec { + /** + * Angle axis position in polar coordinate system + */ + angle: IDataPos | IDataPosCallback; +} +``` + +#### IMarkLineRadiusSpec - Radius Line +```typescript +interface IMarkLineRadiusSpec extends IMarkerCrossSeriesSpec { + /** + * Radius axis position in polar coordinate system + */ + radius: IDataPos | IDataPosCallback; +} +``` + +### Two-Point Polar Lines + +```typescript +interface IMarkLineAngRadSpec extends IMarkerCrossSeriesSpec { + angle: IDataPos | IDataPosCallback; // Start angle + angle1: IDataPos | IDataPosCallback; // End angle + radius: IDataPos | IDataPosCallback; // Start radius + radius1: IDataPos | IDataPosCallback; // End radius +} +``` + +## Data-Based Mark Lines + +### IMarkLineCoordinateSpec - Data Point Line +```typescript +interface IMarkLineCoordinateSpec { + /** + * Data points for reference line + * Supports callback function since v1.12.0 + */ + coordinates: IDataPointSpec[] | ((seriesData: Datum[], relativeSeries: IMarkerSupportSeries) => IDataPointSpec[]); + + /** + * Offset for each coordinate point + * @since 1.7.3 + */ + coordinatesOffset?: OffsetPoint[]; + + /** + * Data processing method + */ + process?: { + x: IAggrType; + } | { + y: IAggrType; + } | { + xy: IRegressType; + }; +} +``` + +## Step Mark Lines + +### IStepMarkLineSpec - Step Line +```typescript +interface IStepMarkLineSpec extends IMarkerSpec { + type: 'type-step'; + + /** + * Connection direction for step line + */ + connectDirection: 'top' | 'bottom' | 'left' | 'right'; + + /** + * Extension distance in connection direction + * number: pixel value | string: percentage ('30%') + */ + expandDistance?: number | string; + + /** + * Label configuration + */ + label?: IMarkerLabelSpec; + + /** + * Line configuration + */ + line?: { + multiSegment?: boolean; + mainSegmentIndex?: number; + style?: ILineMarkSpec | ILineMarkSpec[]; + state?: Record; + }; +} +``` + +## Cross-Series Configuration + +### IMarkerCrossSeriesSpec - Series Association +```typescript +interface IMarkerCrossSeriesSpec { + /** + * Start point associated series index + */ + startRelativeSeriesIndex?: number; + + /** + * End point associated series index + */ + endRelativeSeriesIndex?: number; + + /** + * Start point associated series ID + */ + startRelativeSeriesId?: string; + + /** + * End point associated series ID + */ + endRelativeSeriesId?: string; + + /** + * Specified data series index for processing + * @since 1.11.0 + */ + specifiedDataSeriesIndex?: 'all' | number | number[]; + + /** + * Specified data series ID for processing + * @since 1.11.0 + */ + specifiedDataSeriesId?: 'all' | string | string[]; +} +``` + +## Dependency Types + +### Position Types +```typescript +type IDataPos = StringOrNumber | IAggrType; +type IDataPosCallback = ( + relativeSeriesData: Datum[], + startRelativeSeriesData: Datum[], + endRelativeSeriesData: Datum[], + relativeSeries: IMarkerSupportSeries, + startRelativeSeries: IMarkerSupportSeries, + endRelativeSeries: IMarkerSupportSeries +) => StringOrNumber; + +type IAggrType = 'sum' | 'average' | 'min' | 'max' | 'variance' | 'standardDeviation' | 'median'; +``` + +### Data Point Specification +```typescript +interface IDataPointSpec { + [key: string]: IDataPos | IDataPosCallback; + refRelativeSeriesIndex?: number; + refRelativeSeriesId?: StringOrNumber; + xFieldIndex?: number; + xFieldDim?: string; + yFieldIndex?: number; + yFieldDim?: string; + angleFieldIndex?: number; + angleFieldDim?: string; + radiusFieldIndex?: number; + radiusFieldDim?: string; +} +``` + +### Offset Configuration +```typescript +interface OffsetPoint { + /** + * X direction offset: pixel value or percentage + */ + x?: number | string; + + /** + * Y direction offset: pixel value or percentage + */ + y?: number | string; +} +``` + +## Usage Examples + +### Basic Vertical Line +```typescript +const verticalLine: IMarkLineSpec = { + x: 100, // Fixed position at x=100 + label: { + visible: true, + text: 'Target Line' + }, + line: { + style: { + stroke: '#ff0000', + lineWidth: 2, + lineDash: [4, 4] + } + } +}; +``` + +### Average Line with Aggregation +```typescript +const averageLine: IMarkLineSpec = { + y: 'average', // Average value of y-axis data + label: { + visible: true, + text: 'Average', + position: 'end' + }, + line: { + style: { + stroke: '#1890ff', + lineWidth: 1 + } + } +}; +``` + +### Data Point Reference Line +```typescript +const dataPointLine: IMarkLineSpec = { + coordinates: [ + { x: 'min', y: 'min' }, + { x: 'max', y: 'max' } + ], + label: { + visible: true, + text: 'Trend Line' + }, + line: { + style: { + stroke: '#52c41a', + lineWidth: 2 + } + } +}; +``` + +### Step Line Configuration +```typescript +const stepLine: IStepMarkLineSpec = { + type: 'type-step', + connectDirection: 'top', + expandDistance: '20%', + coordinates: [ + { x: 10, y: 20 }, + { x: 90, y: 80 } + ], + label: { + visible: true, + text: 'Step Connection' + }, + line: { + style: { + stroke: '#722ed1', + lineWidth: 2 + } + } +}; +``` + +### Polar Coordinate Line +```typescript +const polarLine: IMarkLineSpec = { + angle: 45, // 45 degree angle line + label: { + visible: true, + text: '45° Reference' + }, + line: { + style: { + stroke: '#fa8c16', + lineWidth: 1, + lineDash: [2, 2] + } + } +}; +``` diff --git a/skills/vchart-development-skill/references/type-details/IMarkPointSpec-Type-Definition.md b/skills/vchart-development-skill/references/type-details/IMarkPointSpec-Type-Definition.md new file mode 100644 index 0000000000..70836545d0 --- /dev/null +++ b/skills/vchart-development-skill/references/type-details/IMarkPointSpec-Type-Definition.md @@ -0,0 +1,206 @@ +## Overview +`IMarkPointSpec` defines the configuration interface for mark point components in VChart. Mark points are annotation elements that highlight specific data points or positions on charts with customizable symbols, labels, and interactive behaviors. + +## Core Interface Structure + +```typescript +type IMarkPointSpec = IMarkerSpec & + (IMarkPointXYSpec | IMarkPointAngleRadiusSpec | IMarkPointGeoNameSpec | + IMarkPointCoordinateSpec | IMarkPointPositionsSpec) & + IMarkPointTheme & + BaseMarkerAnimation +``` + +## Base Properties (from IMarkerSpec) + +### Component Association +```typescript +interface IMarkerSpec { + // Component association + regionIndex?: number | number[]; // Associated region index + regionId?: StringOrNumber | StringOrNumber[]; // Associated region ID + seriesIndex?: number | number[]; // Associated series index + seriesId?: StringOrNumber | StringOrNumber[]; // Associated series ID + relativeSeriesIndex?: number; // Marker data series index + relativeSeriesId?: number | string; // Marker data series ID + + // Component behavior + visible?: boolean; // Component visibility (default: true) + interactive?: boolean; // Component interactivity (default: true) + autoRange?: boolean; // Auto extend axis range (default: false) + clip?: boolean; // Clip overflow content (default: false) + name?: string; // Component name identifier + coordinateType?: string; // Coordinate system type +} +``` + +## Position Configuration Types + +### 1. Cartesian Coordinate System +```typescript +interface IMarkPointXYSpec { + x: IDataPos | IDataPosCallback; // X-axis position (value/aggregation/callback/percentage) + y: IDataPos | IDataPosCallback; // Y-axis position (value/aggregation/callback/percentage) +} +``` + +### 2. Polar Coordinate System +```typescript +interface IMarkPointAngleRadiusSpec { + angle: IDataPos | IDataPosCallback; // Angle axis position + radius: IDataPos | IDataPosCallback; // Radius axis position +} +``` + +### 3. Geographic Coordinate System +```typescript +interface IMarkPointGeoNameSpec { + areaName: string | IDataPosCallback; // Geographic area name +} +``` + +### 4. Data Point Based +```typescript +interface IMarkPointCoordinateSpec { + coordinate: IDataPointSpec | ((seriesData: Datum[], relativeSeries: IMarkerSupportSeries) => IDataPointSpec); + coordinatesOffset?: OffsetPoint; // Canvas coordinate offset +} +``` + +### 5. Canvas Position Based +```typescript +interface IMarkPointPositionsSpec { + position: MarkerPositionPoint | ((seriesData: Datum[], relativeSeries: IMarkerSupportSeries) => MarkerPositionPoint); + regionRelative?: boolean; // Whether relative to region (default: false) +} +``` + +## Symbol Configuration + +```typescript +interface IMarkerSymbol { + visible: boolean; // Symbol visibility + symbolType?: SymbolType; // Symbol shape (arrow/circle/triangle/etc.) + size?: number; // Symbol size + refX?: number; // Horizontal offset relative to position + refY?: number; // Vertical offset relative to position + refAngle?: number; // Angle offset for rotation + + // Style and state configurations + style?: ISymbolMarkSpec | MarkerStyleCallback; + state?: Record>; +} +``` + +## Label Configuration + +```typescript +interface IMarkPointLabel { + visible?: boolean; // Label visibility + text?: string | string[] | number | number[] | RichTextContent; + formatMethod?: IFormatMethod<[markData: Datum[], seriesData: Datum[]]>; + + // Layout properties + minWidth?: number; // Minimum width (default: 30px) + maxWidth?: number; // Maximum width for text wrapping + autoRotate?: boolean; // Auto rotation based on position + confine?: boolean; // Keep label within visible area + dx?: number; // Horizontal offset + dy?: number; // Vertical offset + + // Background configuration + labelBackground?: { + visible?: boolean; + padding?: IPadding | number[] | number; + customShape?: (text, attrs, path) => ICustomPath2D; + style?: IRectMarkSpec; + }; + + // Text decoration + shape?: { + visible?: boolean; + style: ISymbolMarkSpec; // Symbol before text + }; + space?: number; // Space between shape and text + + // Style and state configurations + style?: IComposedTextMarkSpec | MarkerStyleCallback; + state?: Record; +} +``` + +## Animation Configuration + +```typescript +interface BaseMarkerAnimation { + animationEnter?: T; // Enter animation + animationUpdate?: T; // Update animation + animationExit?: T; // Exit animation +} +``` + +## Helper Types + +### Data Position Types +```typescript +type IDataPos = StringOrNumber | IAggrType; +type IAggrType = 'sum' | 'average' | 'min' | 'max' | 'variance' | 'standardDeviation' | 'median'; +type IDataPosCallback = (relativeSeriesData, startRelativeSeriesData, endRelativeSeriesData, + relativeSeries, startRelativeSeries, endRelativeSeries) => StringOrNumber; +``` + +### Position Types +```typescript +interface MarkerPositionPoint { + x: StringOrNumber; // X coordinate (pixel value or percentage) + y: StringOrNumber; // Y coordinate (pixel value or percentage) +} + +interface OffsetPoint { + x?: number | string; // X offset (pixels or percentage) + y?: number | string; // Y offset (pixels or percentage) +} +``` + +## Usage Examples + +### Basic Cartesian Point +```typescript +const markPoint: IMarkPointSpec = { + x: 'average', + y: 100, + symbol: { + visible: true, + symbolType: 'circle', + size: 12, + style: { fill: 'red' } + } +}; +``` + +### Data-driven Point with Label +```typescript +const markPoint: IMarkPointSpec = { + coordinate: { x: 'Q1', y: 'max' }, + symbol: { visible: true, size: 10 }, + label: { + visible: true, + text: 'Peak Value', + position: 'top', + style: { fontSize: 12, fill: 'black' } + } +}; +``` + +### Polar Coordinate Point +```typescript +const markPoint: IMarkPointSpec = { + angle: 45, + radius: 'average', + symbol: { + visible: true, + symbolType: 'triangle', + style: { fill: 'blue', stroke: 'navy' } + } +}; +``` diff --git a/skills/vchart-development-skill/references/type-details/IMarkSpec-Type-Definition.md b/skills/vchart-development-skill/references/type-details/IMarkSpec-Type-Definition.md new file mode 100644 index 0000000000..e46d1cf51a --- /dev/null +++ b/skills/vchart-development-skill/references/type-details/IMarkSpec-Type-Definition.md @@ -0,0 +1,367 @@ +## IMarkSpec Type Definition + +### Core Interface + +`IMarkSpec` defines the configuration for mark elements in VChart, extending progressive rendering capabilities with comprehensive styling and interaction options. + +```typescript +type IMarkSpec = { + /** + * 用户id + */ + id?: StringOrNumber; + /** + * 是否响应交互 + */ + interactive?: boolean; + /** + * 与其他mark元素的层级 + */ + zIndex?: number; + /** + * mark 层 是否显示配置 + */ + visible?: boolean; + /** + * 默认样式设置 + */ + style?: ConvertToMarkStyleSpec; + /** + * 不同状态下的样式配置 + */ + state?: IMarkStateFullSpec; + /** + * 状态排序方法，默认状态都是按照添加的顺序处理的，如果有特殊的需求，需要指定状态顺序，可以通过这个方法实现 + * @since 1.9.0 + */ + stateSort?: (stateA: string, stateB: string) => number; + /** + * 是否是3d视角的mark + */ + support3d?: boolean; + /** + * customized shape of mark + */ + customShape?: (datum: any[], attrs: any, path: ICustomPath2D) => ICustomPath2D; +} & IMarkProgressiveConfig; +``` + +### Progressive Rendering Configuration + +#### IMarkProgressiveConfig +```typescript +type IMarkProgressiveConfig = { + /** + * 是否开启大数据渲染模式，开启后会降低渲染的精度 + * @default false + */ + large?: boolean; + /** + * 开启大数据渲染优化的阀值，对应的是data的长度 + * 推荐 largeThreshold < progressiveThreshold + */ + largeThreshold?: number; + /** + * 分片长度 + */ + progressiveStep?: number; + /** + * 开启分片渲染的阀值，对应的是单系列data的长度 + */ + progressiveThreshold?: number; +}; +``` + +### State Management System + +#### IMarkStateFullSpec +```typescript +interface IMarkStateFullSpec extends Record | IMarkStateStyleSpec> { + /** + * 正常状态下图元的样式设置 + */ + normal?: IMarkStateSpec | IMarkStateStyleSpec; + /** + * hover状态下图元的样式设置 + */ + hover?: IMarkStateSpec | IMarkStateStyleSpec; + /** + * 没有被hover的状态下图元的样式设置 + */ + hover_reverse?: IMarkStateSpec | IMarkStateStyleSpec; + /** + * 选中状态下图元的样式设置 + */ + selected?: IMarkStateSpec | IMarkStateStyleSpec; + /** + * 没有被选中的状态下图元的样式设置 + */ + selected_reverse?: IMarkStateSpec | IMarkStateStyleSpec; +} +``` + +#### IMarkStateSpec +```typescript +interface IMarkStateSpec { + /** + * 筛选器 + */ + filter?: IMarkStateFilter; + /** + * 状态优先级 + */ + level?: number | undefined; + /** + * 状态样式配置 + */ + style: ConvertToMarkStyleSpec; +} +``` + +#### IMarkStateStyleSpec +```typescript +type IMarkStateStyleSpec = ConvertToMarkStyleSpec; +``` + +### State Filter System + +#### IMarkStateFilter +```typescript +type IMarkStateFilter = + | { + /** 维度筛选 */ + fields: { [key in string]: { type: 'ordinal' | 'linear'; domain: StringOrNumber[] } }; + } + | { + /** 筛选数据 */ + datums: Datum[]; + /** 筛选数据 */ + datumKeys: string[]; + } + | { + /** 筛选 item */ + items: IGraphic[]; + } + /** 筛选函数 */ + | (( + datum: Datum, + options: { + mark?: IMark; + type?: string; + renderNode?: IGraphic; + } + ) => boolean); +``` + +### Supporting Types + +#### Style Conversion System +```typescript +type ConvertToMarkStyleSpec> = { + [key in keyof T]: VisualType; +}; + +type FunctionType = (datum: Datum, context: IModelMarkAttributeContext, source?: DataView) => T; +type ValueType = T; +type VisualType = ValueType | FunctionType | IVisual; +``` + +#### Custom Path Types +```typescript +interface ICustomPath2D { + // VRender Path2D interface for custom shape drawing + moveTo(x: number, y: number): void; + lineTo(x: number, y: number): void; + bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): void; + quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void; + arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, anticlockwise?: boolean): void; + closePath(): void; +} +``` + +#### Base Data Types +```typescript +type StringOrNumber = string | number; + +interface Datum { + [key: string]: any; +} + +interface IGraphic { + // VRender graphic node interface + [key: string]: any; +} +``` + +### Usage Examples + +#### Basic Mark Configuration +```typescript +const basicMark: IMarkSpec = { + id: 'my-rect-mark', + visible: true, + interactive: true, + zIndex: 10, + style: { + fill: '#1890ff', + stroke: '#333', + lineWidth: 1 + } +}; +``` + +#### Mark with State Styles +```typescript +const interactiveMark: IMarkSpec = { + visible: true, + interactive: true, + style: { + fill: '#52c41a', + size: 8 + }, + state: { + hover: { + style: { + fill: '#73d13d', + size: 12 + } + }, + selected: { + level: 2, + style: { + fill: '#1890ff', + size: 10, + stroke: '#096dd9', + lineWidth: 2 + } + }, + hover_reverse: { + style: { + fillOpacity: 0.5 + } + } + } +}; +``` + +#### Progressive Rendering Mark +```typescript +const progressiveMark: IMarkSpec = { + visible: true, + style: { + stroke: '#ff4d4f', + lineWidth: 2 + }, + large: true, + largeThreshold: 5000, + progressiveStep: 1000, + progressiveThreshold: 10000 +}; +``` + +#### Mark with Custom State Filter +```typescript +const filteredMark: IMarkSpec = { + visible: true, + style: { + fill: '#faad14', + fillOpacity: 0.6 + }, + state: { + highlight: { + filter: { + fields: { + category: { type: 'ordinal', domain: ['A', 'B', 'C'] } + } + }, + style: { + fill: '#ff7a45', + fillOpacity: 1 + } + }, + disabled: { + filter: (datum, options) => { + return datum.value < 10; + }, + style: { + fillOpacity: 0.2 + } + } + } +}; +``` + +#### Mark with Custom Shape +```typescript +const customShapeMark: IMarkSpec = { + visible: true, + style: { + fill: '#722ed1', + size: 20 + }, + customShape: (datum, attrs, path) => { + // Create custom diamond shape + const size = attrs.size || 10; + const half = size / 2; + + path.moveTo(0, -half); + path.lineTo(half, 0); + path.lineTo(0, half); + path.lineTo(-half, 0); + path.closePath(); + + return path; + } +}; +``` + +#### 3D Mark Configuration +```typescript +const mark3D: IMarkSpec = { + visible: true, + support3d: true, + style: { + fill: '#13c2c2', + width: 20, + height: 30, + z: 10 + }, + state: { + hover: { + style: { + fill: '#36cfc9', + z: 15 + } + } + } +}; +``` + +#### Complex State Sorting +```typescript +const prioritizedMark: IMarkSpec = { + visible: true, + interactive: true, + style: { + text: 'Label', + fontSize: 12, + fill: '#333' + }, + state: { + hover: { + style: { fill: '#1890ff' } + }, + selected: { + style: { fontWeight: 'bold' } + }, + error: { + style: { fill: '#ff4d4f' } + } + }, + stateSort: (stateA, stateB) => { + // Error state has highest priority + const priority = { error: 3, selected: 2, hover: 1 }; + return (priority[stateB] || 0) - (priority[stateA] || 0); + } +}; +``` diff --git a/skills/vchart-development-skill/references/type-details/IMediaQuerySpec-Type-Definition.md b/skills/vchart-development-skill/references/type-details/IMediaQuerySpec-Type-Definition.md new file mode 100644 index 0000000000..e81c066ca1 --- /dev/null +++ b/skills/vchart-development-skill/references/type-details/IMediaQuerySpec-Type-Definition.md @@ -0,0 +1,367 @@ +## IMediaQuerySpec 配置规范 + +IMediaQuerySpec 定义了 VChart 中媒体查询系统的配置接口，支持基于图表尺寸的响应式布局和动态配置调整。 + +## 核心接口结构 + +```typescript +export type IMediaQuerySpec = IMediaQueryItem[]; + +export interface IMediaQueryItem { + query: IMediaQueryCondition; + action: IMediaQueryAction | IMediaQueryAction[]; +} +``` + +## 媒体信息接口 + +定义图表的基础尺寸信息： + +```typescript +export interface IMediaInfo { + /** 图表宽度 */ + width: number; + /** 图表高度 */ + height: number; +} +``` + +## 媒体查询条件 (IMediaQueryCondition) + +定义媒体查询的触发条件，多个属性之间为"且"关系： + +```typescript +export interface IMediaQueryCondition { + /** 最小图表宽度 */ + minWidth?: number; + /** 最大图表宽度 */ + maxWidth?: number; + /** 最小图表高度 */ + minHeight?: number; + /** 最大图表高度 */ + maxHeight?: number; + /** 当图表宽度或高度发生变化时触发的回调，由回调指定是否命中查询条件 */ + onResize?: (info: IMediaInfo, vchart: IVChart) => boolean; +} +``` + +## 媒体查询动作 (IMediaQueryAction) + +定义命中查询条件后的执行动作： + +```typescript +export interface IMediaQueryAction = any> { + /** + * 需要应用的新 spec + * - 如果元素过滤器匹配到了某些图表元素，新 spec 将依次合并到这些元素 + * - 如果元素过滤器没有匹配到任何图表元素，新 spec 可能会作为新的图表元素添加到图表（forceAppend 为 true 的情况） + */ + spec: + | Partial + | (( + filteredModelInfo: IModelSpecInfo[], + action: IMediaQueryAction, + query: IMediaQueryCondition + ) => Partial); + + /** + * 元素过滤器类型 + * @default 'chart' + */ + filterType?: MediaQueryActionFilterType; + + /** + * 元素过滤器 + * （如果不配置，则匹配 filterType 对应的所有元素） + */ + filter?: MediaQueryActionFilter | Array>; + + /** + * 元素过滤器匹配不到图表元素时，是否将新 spec 作为新的图表元素添加到图表 + * （filterType 为 'chart' 时该配置失效） + * @default false + */ + forceAppend?: boolean; +} +``` + +## 过滤器类型定义 + +### 过滤器类型枚举 +```typescript +export type MediaQueryActionFilterType = + | 'region' + | 'series' + | 'chart' + | `${SeriesTypeEnum}` // 具体 series 类型，如 'bar'、'line' + | `${ComponentTypeEnum}` // 具体 component 类型，如 'cartesianAxis-band' + | keyof IChartSpec; // 组件 spec key，如 'axes'、'legends'、'crosshair' +``` + +### 过滤器配置 +```typescript +export type MediaQueryActionFilter = any> = + | Partial // 基于 spec 的模糊匹配 + | (( + modelInfo: IModelSpecInfo, + action: IMediaQueryAction, + query: IMediaQueryCondition + ) => boolean); // 函数回调匹配 +``` + +## 支持类型定义 + +### 系列类型枚举 +```typescript +export enum SeriesTypeEnum { + area = 'area', + line = 'line', + bar = 'bar', + rangeColumn = 'rangeColumn', + rangeArea = 'rangeArea', + dot = 'dot', + map = 'map', + pie = 'pie', + radar = 'radar', + rose = 'rose', + scatter = 'scatter', + circularProgress = 'circularProgress', + wordCloud = 'wordCloud', + funnel = 'funnel', + linearProgress = 'linearProgress', + boxPlot = 'boxPlot', + sankey = 'sankey', + gauge = 'gauge', + treemap = 'treemap', + sunburst = 'sunburst', + circlePacking = 'circlePacking', + waterfall = 'waterfall', + heatmap = 'heatmap', + correlation = 'correlation', + liquid = 'liquid', + venn = 'venn', + mosaic = 'mosaic', + pictogram = 'pictogram' +} +``` + +### 组件类型枚举 +```typescript +export enum ComponentTypeEnum { + cartesianAxis = 'cartesianAxis', + cartesianBandAxis = 'cartesianAxis-band', + cartesianLinearAxis = 'cartesianAxis-linear', + cartesianTimeAxis = 'cartesianAxis-time', + polarAxis = 'polarAxis', + polarBandAxis = 'polarAxis-band', + polarLinearAxis = 'polarAxis-linear', + crosshair = 'crosshair', + cartesianCrosshair = 'cartesianCrosshair', + polarCrosshair = 'polarCrosshair', + dataZoom = 'dataZoom', + discreteLegend = 'discreteLegend', + continuousLegend = 'continuousLegend', + colorLegend = 'colorLegend', + sizeLegend = 'sizeLegend', + markLine = 'markLine', + markArea = 'markArea', + markPoint = 'markPoint', + tooltip = 'tooltip', + title = 'title', + player = 'player', + scrollBar = 'scrollBar', + brush = 'brush' +} +``` + +### 模型信息接口 +```typescript +export interface IModelSpecInfo = any> { + /** model 具体类型 */ + type: string | ComponentTypeEnum | SeriesTypeEnum; + /** model spec */ + spec: T; + /** 该 spec 在图表 spec 上的路径 */ + specPath?: Array; + /** 该 spec 在图表 spec info 上的路径 */ + specInfoPath?: Array; + /** model 当前主题 */ + theme?: any; + /** model 对应的 region 索引 */ + regionIndexes?: number[]; + /** model 对应的 series 索引 */ + seriesIndexes?: number[]; +} +``` + +## 完整类型定义 + +```typescript +export type IMediaQuerySpec = Array<{ + // 查询条件 + query: { + minWidth?: number; + maxWidth?: number; + minHeight?: number; + maxHeight?: number; + onResize?: (info: IMediaInfo, vchart: IVChart) => boolean; + }; + + // 执行动作 + action: { + // 新的配置规范 + spec: Partial | (( + filteredModelInfo: IModelSpecInfo[], + action: IMediaQueryAction, + query: IMediaQueryCondition + ) => Partial); + + // 过滤器类型 + filterType?: 'region' | 'series' | 'chart' | + SeriesTypeEnum | ComponentTypeEnum | + keyof IChartSpec; + + // 过滤器配置 + filter?: Partial | Array> | + ((modelInfo: IModelSpecInfo, action: IMediaQueryAction, query: IMediaQueryCondition) => boolean) | + Array<(modelInfo: IModelSpecInfo, action: IMediaQueryAction, query: IMediaQueryCondition) => boolean>; + + // 是否强制追加 + forceAppend?: boolean; + } | Array<{ + spec: Partial | Function; + filterType?: string; + filter?: any; + forceAppend?: boolean; + }>; +}>; +``` + +## 使用示例 + +### 基础响应式配置 +```typescript +const mediaQuery: IMediaQuerySpec = [ + { + query: { maxWidth: 768 }, + action: { + filterType: 'chart', + spec: { + legends: { visible: false }, + title: { text: 'Mobile Chart' } + } + } + } +]; +``` + +### 多条件查询 +```typescript +const complexQuery: IMediaQuerySpec = [ + { + query: { + minWidth: 1024, + minHeight: 600 + }, + action: { + filterType: 'chart', + spec: { + layout: { type: 'grid', col: 2 }, + legends: { orient: 'right' } + } + } + }, + { + query: { maxWidth: 480 }, + action: [ + { + filterType: 'legends', + spec: { visible: false } + }, + { + filterType: 'title', + spec: { textStyle: { fontSize: 14 } } + } + ] + } +]; +``` + +### 系列特定配置 +```typescript +const seriesQuery: IMediaQuerySpec = [ + { + query: { maxWidth: 600 }, + action: { + filterType: 'bar', + filter: { name: 'sales' }, + spec: { + barWidth: 0.8, + label: { visible: false } + } + } + } +]; +``` + +### 动态配置函数 +```typescript +const dynamicQuery: IMediaQuerySpec = [ + { + query: { + onResize: (info: IMediaInfo) => { + return info.width / info.height < 1; // 检测竖屏 + } + }, + action: { + filterType: 'chart', + spec: (filteredInfo, action, query) => { + return { + layout: { type: 'vertical' }, + legends: { orient: 'bottom' } + }; + } + } + } +]; +``` + +### 组件过滤配置 +```typescript +const componentQuery: IMediaQuerySpec = [ + { + query: { maxWidth: 500 }, + action: { + filterType: 'cartesianAxis', + filter: [ + { orient: 'bottom' }, + (modelInfo) => modelInfo.spec.type === 'band' + ], + spec: { + label: { visible: false }, + tick: { visible: false } + } + } + } +]; +``` + +### 强制追加配置 +```typescript +const appendQuery: IMediaQuerySpec = [ + { + query: { minWidth: 1200 }, + action: { + filterType: 'dataZoom', + filter: { orient: 'bottom' }, + forceAppend: true, + spec: { + type: 'slider', + orient: 'bottom', + height: 20 + } + } + } +]; +``` + diff --git a/skills/vchart-development-skill/references/type-details/IMultiLabelSpec-Type-Definition.md b/skills/vchart-development-skill/references/type-details/IMultiLabelSpec-Type-Definition.md new file mode 100644 index 0000000000..c8bbfad4f3 --- /dev/null +++ b/skills/vchart-development-skill/references/type-details/IMultiLabelSpec-Type-Definition.md @@ -0,0 +1,188 @@ +## Overview + +`IMultiLabelSpec` is a generic type for multi-label configurations in VChart, supporting both single and array configurations: + +```typescript +export type IMultiLabelSpec> = T | T[]; +``` + +This type extends `ILabelSpec` (excluding the 'position' property) and provides flexible label configuration options for series data visualization. + +## Base Structure + +`IMultiLabelSpec` is built upon `ILabelSpec` which combines label configuration and animation specifications: + +```typescript +interface ILabelSpec extends ILabelAnimationSpec { + // Core Display Configuration + zIndex?: number; // Label layer level + visible?: boolean; // Visibility @default false + interactive?: boolean; // Interaction support @default false + + // Text Configuration + textType?: 'text' | 'rich'; // Text type @deprecated @since 1.7.0 + formatMethod?: IFormatMethod; // Format function @since 1.10.0 + formatter?: string | string[]; // String template @since 1.7.0 + + // Layout Configuration + offset?: number; // Distance from data element + position?: string; // Label position + labelLayout?: 'series' | 'region'; // Layout scope + + // Style Configuration + style?: ConvertToMarkStyleSpec; + state?: LabelStateStyle>; + + // Advanced Features + overlap?: BaseLabelAttrs['overlap'] & OverlapExtension; + smartInvert?: BaseLabelAttrs['smartInvert']; + support3d?: boolean; // 3D support + syncState?: boolean; // Sync with data element state @since 1.9.0 + showRelatedMarkTooltip?: boolean; // Show related mark tooltip @since 1.13.5 + + // Data Processing + stackDataFilterType?: 'min' | 'max'; // Stack data filter @since 1.12.0 + dataFilter?: BaseLabelAttrs['dataFilter']; // Custom data filter @since 1.3.0 + + // Custom Layout Functions + customLayoutFunc?: BaseLabelAttrs['customLayoutFunc']; // @since 1.3.0 + customOverlapFunc?: BaseLabelAttrs['customOverlapFunc']; // @since 1.3.0 + onAfterOverlapping?: BaseLabelAttrs['onAfterOverlapping']; // @since 1.13.5 +} +``` + +## LabelStateStyle + +```typescript +type LabelStateStyle = { + /** Hover state style */ + hover?: T; + + /** Non-hover state style */ + hover_reverse?: T; + + /** Selected state style */ + selected?: T; + + /** Non-selected state style */ + selected_reverse?: T; +}; +``` + +## Animation Configuration + +### Label Animation Specifications + +```typescript +type ILabelAnimationSpec = Pick< + BaseLabelAttrs, + | 'animation' // General animation config + | 'animationEnter' // Enter animation + | 'animationUpdate' // Update animation + | 'animationExit' // Exit animation +>; +``` + +## Related Type Definitions + +### Format Method Context + +```typescript +interface ILabelFormatMethodContext { + series?: ISeries; +} +``` + +### Label Information + +```typescript +interface ILabelInfo { + baseMark: IMark; + labelMark: ILabelMark; + series: ISeries; + labelSpec: TransformedLabelSpec; +} + +interface ILabelComponentContext { + region: IRegion; + labelInfo: ILabelInfo[]; +} +``` + +### Total Label Specification + +```typescript +type ITotalLabelSpec = Pick< + ILabelSpec, + 'visible' | 'formatMethod' | 'interactive' | 'offset' | 'style' | 'state' | 'textType' | 'overlap' +> & { + /** Position relative to stacked elements @default 'top' */ + position?: 'top' | 'bottom'; + + /** Always calculate total value @default false */ + alwayCalculateTotal?: boolean; +}; +``` + +### Transformed Label Specification + +```typescript +type TransformedLabelSpec = ILabelSpec & { + getStyleHandler: (series: ISeries) => (mark?: ILabelMark, spec?: any) => void; +}; +``` + +## Dependency Type Definitions + +### Mark Style Types + +```typescript +interface IComposedTextMarkSpec extends ITextMarkSpec { + // Extended text mark specification with composition support +} + +interface ITextMarkSpec { + fontSize?: number; + fontFamily?: string; + fontWeight?: string | number; + fill?: string; + stroke?: string; + textAlign?: string; + textBaseline?: string; + // ... additional text style properties +} +``` + +### Format Method Types + +```typescript +type IFormatMethod = ( + text: string | string[], + datum?: Datum, + ctx?: ILabelFormatMethodContext +) => string | { type: 'rich'; text: IRichTextCharacter[] } | { type: 'text'; text: string }; +``` + +### VRender Components Types + +```typescript +// From @visactor/vrender-components +interface BaseLabelAttrs { + overlap?: OverlapConfig; + smartInvert?: SmartInvertConfig; + dataFilter?: DataFilterFunction; + customLayoutFunc?: CustomLayoutFunction; + customOverlapFunc?: CustomOverlapFunction; + onAfterOverlapping?: AfterOverlappingCallback; + animation?: AnimationConfig; + animationEnter?: AnimationConfig; + animationUpdate?: AnimationConfig; + animationExit?: AnimationConfig; +} + +interface DataLabelAttrs { + size?: { + padding?: PaddingConfig; + }; +} +``` diff --git a/skills/vchart-development-skill/references/type-details/IOutlierMarkSpec-Type-Definition.md b/skills/vchart-development-skill/references/type-details/IOutlierMarkSpec-Type-Definition.md new file mode 100644 index 0000000000..b628692bd8 --- /dev/null +++ b/skills/vchart-development-skill/references/type-details/IOutlierMarkSpec-Type-Definition.md @@ -0,0 +1,9 @@ +```typescript +export interface IOutlierMarkSpec { + /** Outlier point fill color */ + fill?: string; + + /** Outlier point size */ + size?: number; +} +``` diff --git a/skills/vchart-development-skill/references/type-details/IPadding-Type-Definition.md b/skills/vchart-development-skill/references/type-details/IPadding-Type-Definition.md new file mode 100644 index 0000000000..5640d80f64 --- /dev/null +++ b/skills/vchart-development-skill/references/type-details/IPadding-Type-Definition.md @@ -0,0 +1,20 @@ +```typescript +interface IPadding { + /** + * 顶部边距 + */ + top?: number; + /** + * 底部边距 + */ + bottom?: number; + /** + * 左侧边距 + */ + left?: number; + /** + * 右侧边距 + */ + right?: number; +} +``` diff --git a/skills/vchart-development-skill/references/type-details/IPathMarkSpec-Type-Definition.md b/skills/vchart-development-skill/references/type-details/IPathMarkSpec-Type-Definition.md new file mode 100644 index 0000000000..40031ba28f --- /dev/null +++ b/skills/vchart-development-skill/references/type-details/IPathMarkSpec-Type-Definition.md @@ -0,0 +1,241 @@ +## Type Definition + +```typescript +interface IPathMarkSpec extends IFillMarkSpec { + // Path-specific properties + path?: string; // SVG path data + smoothScale?: boolean; // Smooth scaling optimization + + // Inherited from IFillMarkSpec + fill?: VisualType | IGradient | false | IColorKey; + fillOpacity?: number; + background?: IColor | HTMLImageElement | HTMLCanvasElement | null; + + // Inherited from ICommonSpec + visible?: boolean; // Visibility + x?: number; // X coordinate + y?: number; // Y coordinate + z?: number; // Z coordinate (3D) + stroke?: string | IGradient | false | (number | boolean)[] | IColorKey | null; + strokeOpacity?: number; // Stroke opacity + opacity?: number; // Overall opacity + lineWidth?: number; // Stroke width + lineDash?: number[]; // Dash pattern + lineDashOffset?: number; // Dash offset + cursor?: Cursor; // Mouse cursor + zIndex?: number; // Layer index + angle?: number; // Rotation angle + anchor?: [number, number]; // Anchor point + scaleX?: number; // X-scale factor + scaleY?: number; // Y-scale factor + scaleCenter?: [number | string, number | string]; // Scale center + + // 3D properties + alpha?: number; // X-direction rotation + beta?: number; // Y-direction rotation + anchor3d?: [number, number]; // 3D anchor point + + // Interaction properties + pickMode?: 'accurate' | 'imprecise' | 'custom'; + boundsMode?: 'accurate' | 'imprecise'; + pickStrokeBuffer?: number; // Stroke pick buffer @since 1.7.3 + + // Texture properties + texture?: TextureType | string; // Texture type + textureColor?: string; // Texture color + textureSize?: number; // Texture size + texturePadding?: number; // Texture padding + + // Border properties + outerBorder?: IBorder; // Outer border + innerBorder?: IBorder; // Inner border + + // HTML overlay + html?: IMarkHtmlSpec; // HTML overlay @since 1.10.0 +} +``` + +## Core Configuration Properties + +### Texture Configuration (Inherited from ICommonSpec) + +```typescript +type TextureType = 'circle' | 'dimond' | 'rect' | 'vertical-line' | 'horizontal-line' | 'bias-lr' | 'bias-rl' | 'grid'; +``` + +### Border Configuration (Inherited from ICommonSpec) + +```typescript +interface IBorder { + /** Distance from shape edge */ + distance: number | string; + + /** Border color */ + stroke?: string | IGradient; + + /** Border opacity */ + strokeOpacity?: number; + + /** Border width */ + lineWidth?: number; + + /** Border dash pattern */ + lineDash?: number[]; + + /** Border dash offset */ + lineDashOffset?: number; +} +``` + +## Visual Type System + +### Visual Mapping Types + +```typescript +type VisualType = ValueType | FunctionType | IVisual; + +type ValueType = T; +type FunctionType = (datum: Datum, context: IModelMarkAttributeContext, source?: DataView) => T; + +type IVisual = IVisualSpecStyle | IVisualScale; + +interface IVisualSpecStyle extends IVisualSpecBase { + /** Data field for mapping */ + field?: string; +} + +interface IVisualScale { + /** Scale ID reference */ + scale: string; + + /** Data field for mapping */ + field?: string; + + /** Domain change strategy @default 'none' */ + changeDomain?: 'none' | 'replace' | 'expand'; +} +``` + +### Gradient Types + +```typescript +type IGradient = IGradientLinear | IGradientRadial | IGradientConical; + +interface IGradientLinear { + gradient: 'linear'; + x0?: GradientPropValue; // Start x (0-1) + y0?: GradientPropValue; // Start y (0-1) + x1?: GradientPropValue; // End x (0-1) + y1?: GradientPropValue; // End y (0-1) + stops: GradientStop[]; +} + +interface IGradientRadial { + gradient: 'radial'; + r0?: GradientPropValue; // Start radius + x0?: GradientPropValue; // Start x + y0?: GradientPropValue; // Start y + x1?: GradientPropValue; // End x + y1?: GradientPropValue; // End y + r1?: GradientPropValue; // End radius + stops: GradientStop[]; +} + +interface IGradientConical { + gradient: 'conical'; + x?: GradientPropValue; // Center x + y?: GradientPropValue; // Center y + startAngle?: GradientPropValue; // Start angle + endAngle?: GradientPropValue; // End angle + stops: GradientStop[]; +} + +type GradientStop = { + offset: GradientPropValue; // 0-1 offset + color?: GradientPropValue; // Color + opacity?: number; // Opacity +}; + +type GradientPropValue = ValueType | FunctionType; +``` + +## Dependency Type Definitions + +### Theme and Token Types + +```typescript +interface IColorKey { + // Theme color key interface +} + +interface IColor { + // VRender color interface +} +``` + +### HTML Overlay Types + +```typescript +type IMarkHtmlSpec = Partial; + +interface IGraphicStyle { + html?: { + // HTML overlay configuration + }; +} +``` + +### Cursor Types + +```typescript +type Cursor = + | 'auto' + | 'default' + | 'none' + | 'context-menu' + | 'help' + | 'pointer' + | 'progress' + | 'wait' + | 'cell' + | 'crosshair' + | 'text' + | 'vertical-text' + | 'alias' + | 'copy' + | 'move' + | 'no-drop' + | 'not-allowed' + | 'grab' + | 'grabbing' + | 'e-resize' + | 'n-resize' + | 'ne-resize' + | 'nw-resize' + | 's-resize' + | 'se-resize' + | 'sw-resize' + | 'w-resize' + | 'ew-resize' + | 'ns-resize' + | 'nesw-resize' + | 'nwse-resize' + | 'col-resize' + | 'row-resize' + | 'all-scroll' + | 'zoom-in' + | 'zoom-out'; +``` + +### Context Types + +```typescript +interface IModelMarkAttributeContext { + // Mark attribute context for function evaluation +} + +interface Datum { + // Data record interface + [key: string]: any; +} +``` diff --git a/skills/vchart-development-skill/references/type-details/IPercent-Type-Definition.md b/skills/vchart-development-skill/references/type-details/IPercent-Type-Definition.md new file mode 100644 index 0000000000..80a213d6ab --- /dev/null +++ b/skills/vchart-development-skill/references/type-details/IPercent-Type-Definition.md @@ -0,0 +1,3 @@ +```typescript +type IPercent = `${number}%`; +``` diff --git a/skills/vchart-development-skill/references/type-details/IPlayer-Type-Definition.md b/skills/vchart-development-skill/references/type-details/IPlayer-Type-Definition.md new file mode 100644 index 0000000000..76f881d057 --- /dev/null +++ b/skills/vchart-development-skill/references/type-details/IPlayer-Type-Definition.md @@ -0,0 +1,481 @@ +## Core Interface Structure + +```typescript +interface IPlayer extends IPlayerTheme { + type?: PlayerType; // Player type (default: 'continuous') + auto?: boolean; // Auto-play mode (default: true) + loop?: boolean; // Loop playback (default: false) + interval?: number; // Play interval in ms (default: 1000) + totalDuration?: number; // Total duration in ms (mutually exclusive with interval) + direction?: DirectionType; // Play direction (default: 'default') + alternate?: boolean; // Alternate direction (default: false) + specs?: Partial>[]; // Chart specs for each frame +} +``` + +## Player Theme Configuration (Inherited) + +```typescript +interface IPlayerTheme extends ILayoutItemSpec { + visible?: boolean; // Component visibility (default: true) + dx?: number; // X-axis offset (default: 0) + dy?: number; // Y-axis offset (default: 0) + width?: number; // Component width + height?: number; // Component height + position?: 'start' | 'middle' | 'end'; // Alignment position + orient?: OrientType; // Component orientation (default: 'bottom') + slider?: IPlayerSlider; // Slider configuration + controller?: IPlayerController; // Controller buttons configuration +} +``` + +## Player Slider Configuration + +```typescript +interface IPlayerSlider { + visible?: boolean; // Slider visibility (default: true) + space?: number; // Spacing from previous element + dx?: number; // X-axis offset (default: 0) + dy?: number; // Y-axis offset (default: 0) + railStyle?: IRectMarkSpec; // Rail track styling + trackStyle?: IRectMarkSpec; // Active track styling + handlerStyle?: ISymbolMarkSpec; // Handler styling +} +``` + +## Player Controller Configuration + +```typescript +interface IPlayerController { + visible?: boolean; // Controller visibility (default: true) + start?: IControllerButton; // Start/play button + pause?: IControllerButton; // Pause button + backward?: IControllerButton; // Backward button + forward?: IControllerButton; // Forward button +} + +type IControllerButton = Partial>; +``` + +## Supporting Type Definitions + +### Player Types + +```typescript +type PlayerType = 'continuous' | 'discrete'; +``` + +### Direction Types + +```typescript +type DirectionType = 'default' | 'reverse'; +``` + +### Orientation Types + +```typescript +type OrientType = 'left' | 'right' | 'top' | 'bottom'; +``` + +### Player Field Configuration + +```typescript +interface IPlayerField { + playerField?: string; // Field name for player data +} +``` + +## Complete Interface Definition + +```typescript +interface IPlayer { + // Layout properties (from ILayoutItemSpec) + layoutType?: 'region-relative' | 'absolute' | 'normal'; + layoutLevel?: number; + layoutBindRegionID?: number | number[]; + orient?: 'left' | 'right' | 'top' | 'bottom'; + alignSelf?: 'start' | 'end' | 'middle'; + width?: number | string | ((chartViewRect: any) => number); + height?: number | string | ((chartViewRect: any) => number); + maxWidth?: number | string | ((chartViewRect: any) => number); + minWidth?: number | string | ((chartViewRect: any) => number); + maxHeight?: number | string | ((chartViewRect: any) => number); + minHeight?: number | string | ((chartViewRect: any) => number); + padding?: + | number + | number[] + | { + left?: number | string | ((chartViewRect: any) => number); + right?: number | string | ((chartViewRect: any) => number); + top?: number | string | ((chartViewRect: any) => number); + bottom?: number | string | ((chartViewRect: any) => number); + }; + offsetX?: number | string | ((chartViewRect: any) => number); + offsetY?: number | string | ((chartViewRect: any) => number); + left?: number | string | ((chartViewRect: any) => number); + right?: number | string | ((chartViewRect: any) => number); + top?: number | string | ((chartViewRect: any) => number); + bottom?: number | string | ((chartViewRect: any) => number); + center?: boolean; + zIndex?: number; + clip?: boolean; + + // Player theme properties + visible?: boolean; + dx?: number; + dy?: number; + position?: 'start' | 'middle' | 'end'; + + // Player functionality + type?: 'continuous' | 'discrete'; + auto?: boolean; + loop?: boolean; + interval?: number; + totalDuration?: number; + direction?: 'default' | 'reverse'; + alternate?: boolean; + specs?: Partial>[]; + + // Slider configuration + slider?: { + visible?: boolean; + space?: number; + dx?: number; + dy?: number; + railStyle?: { + fill?: string; + stroke?: string; + strokeWidth?: number; + cornerRadius?: number; + width?: number; + height?: number; + // ... other IRectMarkSpec properties + }; + trackStyle?: { + fill?: string; + stroke?: string; + strokeWidth?: number; + cornerRadius?: number; + width?: number; + height?: number; + // ... other IRectMarkSpec properties + }; + handlerStyle?: { + fill?: string; + stroke?: string; + strokeWidth?: number; + size?: number; + symbolType?: string; + // ... other ISymbolMarkSpec properties + }; + }; + + // Controller configuration + controller?: { + visible?: boolean; + start?: { + style?: { + fill?: string; + stroke?: string; + strokeWidth?: number; + size?: number; + symbolType?: string; + // ... other ISymbolMarkSpec properties + }; + space?: number; + position?: 'start' | 'middle' | 'end'; + }; + pause?: { + style?: { + fill?: string; + stroke?: string; + strokeWidth?: number; + size?: number; + symbolType?: string; + // ... other ISymbolMarkSpec properties + }; + space?: number; + position?: 'start' | 'middle' | 'end'; + }; + backward?: { + style?: { + fill?: string; + stroke?: string; + strokeWidth?: number; + size?: number; + symbolType?: string; + // ... other ISymbolMarkSpec properties + }; + space?: number; + position?: 'start' | 'middle' | 'end'; + }; + forward?: { + style?: { + fill?: string; + stroke?: string; + strokeWidth?: number; + size?: number; + symbolType?: string; + // ... other ISymbolMarkSpec properties + }; + space?: number; + position?: 'start' | 'middle' | 'end'; + }; + }; +} +``` + +## Usage Examples + +### Basic Continuous Player + +```typescript +const basicPlayer: IPlayer = { + type: 'continuous', + auto: true, + loop: true, + interval: 2000 +}; +``` + +### Discrete Player with Custom Styling + +```typescript +const discretePlayer: IPlayer = { + type: 'discrete', + auto: false, + loop: false, + direction: 'default', + orient: 'bottom', + position: 'middle', + slider: { + visible: true, + railStyle: { + fill: '#e8e8e8', + height: 6, + cornerRadius: 3 + }, + trackStyle: { + fill: '#007acc', + height: 6, + cornerRadius: 3 + }, + handlerStyle: { + fill: '#007acc', + stroke: '#fff', + strokeWidth: 2, + size: 12, + symbolType: 'circle' + } + } +}; +``` + +### Player with Custom Controller + +```typescript +const customControllerPlayer: IPlayer = { + type: 'continuous', + auto: true, + interval: 1500, + controller: { + visible: true, + start: { + style: { + fill: '#28a745', + size: 20, + symbolType: 'triangleRight' + }, + space: 8 + }, + pause: { + style: { + fill: '#ffc107', + size: 20, + symbolType: 'rect' + }, + space: 8 + }, + backward: { + style: { + fill: '#6c757d', + size: 16, + symbolType: 'triangleLeft' + }, + space: 8 + }, + forward: { + style: { + fill: '#6c757d', + size: 16, + symbolType: 'triangleRight' + }, + space: 8 + } + } +}; +``` + +### Time-Based Player with Duration + +```typescript +const durationPlayer: IPlayer = { + type: 'continuous', + auto: true, + loop: true, + totalDuration: 10000, // 10 seconds total + direction: 'default', + alternate: true +}; +``` + +### Positioned Player with Layout + +```typescript +const positionedPlayer: IPlayer = { + type: 'discrete', + orient: 'top', + position: 'end', + width: 400, + height: 60, + padding: [10, 20], + auto: false, + slider: { + visible: true, + space: 20 + } +}; +``` + +### Player with Chart Specs + +```typescript +const multiSpecPlayer: IPlayer = { + type: 'discrete', + auto: true, + interval: 3000, + specs: [ + { + data: { values: data2020 }, + title: { text: 'Data for 2020' } + }, + { + data: { values: data2021 }, + title: { text: 'Data for 2021' } + }, + { + data: { values: data2022 }, + title: { text: 'Data for 2022' } + } + ] +}; +``` + +## Chart Integration Examples + +### Bar Chart with Time Player + +```typescript +const animatedBarChart = { + type: 'bar', + data: { values: timeSeriesData }, + xField: 'category', + yField: 'value', + player: { + type: 'continuous', + auto: true, + interval: 1000, + loop: true, + orient: 'bottom', + slider: { + railStyle: { + fill: '#f0f0f0' + }, + trackStyle: { + fill: '#007acc' + } + } + } +}; +``` + +### Line Chart with Discrete Player + +```typescript +const timelineChart = { + type: 'line', + data: { values: yearlyData }, + xField: 'month', + yField: 'sales', + seriesField: 'year', + player: { + type: 'discrete', + auto: false, + direction: 'default', + controller: { + visible: true, + start: { + style: { fill: '#28a745' } + }, + pause: { + style: { fill: '#dc3545' } + } + } + } +}; +``` + +### Scatter Plot with Alternating Player + +```typescript +const scatterAnimation = { + type: 'scatter', + data: { values: populationData }, + xField: 'gdp', + yField: 'lifeExpectancy', + sizeField: 'population', + player: { + type: 'continuous', + auto: true, + interval: 2000, + direction: 'default', + alternate: true, + loop: true + } +}; +``` + +### Dashboard with Custom Player Layout + +```typescript +const dashboardWithPlayer = { + type: 'common', + layout: { + type: 'grid', + col: 1, + row: 2, + elements: [ + { + modelId: 'chart-region', + col: 0, + row: 0 + }, + { + modelId: 'player', + col: 0, + row: 1 + } + ] + }, + region: { + id: 'chart-region' + }, + player: { + type: 'discrete', + orient: 'bottom', + width: '100%', + height: 80, + padding: 20 + } +}; +``` diff --git a/skills/vchart-development-skill/references/type-details/IPolarAxisSpec-Type-Definition.md b/skills/vchart-development-skill/references/type-details/IPolarAxisSpec-Type-Definition.md new file mode 100644 index 0000000000..c22fc8b9ce --- /dev/null +++ b/skills/vchart-development-skill/references/type-details/IPolarAxisSpec-Type-Definition.md @@ -0,0 +1,467 @@ +## IPolarAxisSpec 配置规范 + +```typescript +export type IPolarAxisSpec = IPolarLinearAxisSpec | IPolarBandAxisSpec; + +export type IPolarLinearAxisSpec = IPolarAxisCommonSpec & ILinearAxisSpec; +export type IPolarBandAxisSpec = IPolarAxisCommonSpec & IBandAxisSpec; +``` + +## 极坐标轴通用配置 (IPolarAxisCommonSpec) + +继承自 ICommonAxisSpec 的极坐标系特有配置： + +```typescript +export type IPolarAxisCommonSpec = Omit & { + /** + * 布局半径，相当于计算内径、外径的基准值 + * 默认值为: region宽度、高度最小值的一半 + * @since 1.11.2 + */ + layoutRadius?: 'auto' | number | ((layoutRect: ILayoutRect, center: IPointLike) => number); + + /** + * 当配置了 innerRadius 时，可以通过设置 inside: true，将坐标轴展示在内圆 + * @default false + */ + inside?: boolean; + + /** + * 轴位置，枚举类型，支持：'radius' 和 'angle' + * - 'radius' 代表半径轴 + * - 'angle' 代表角度轴 + */ + orient: IPolarOrientType; + + /** 网格线配置 */ + grid?: IPolarGrid; + + /** 轴的外半径，数值范围 0-1 */ + radius?: number; + + /** 子网格线配置 */ + subGrid?: IPolarGrid; + + /** 轴线配置 */ + domainLine?: IDomainLine; + + /** 轴标签配置 */ + label?: IPolarAxisLabel; + + /** 轴标题配置 */ + title?: ITitle; + + /** 内半径（比例值，取值范围 0~1） */ + innerRadius?: number; + + /** 外半径（比例值，取值范围 0~1） */ + outerRadius?: number; + + /** + * 中心点 + * @since 1.11.2 x,y 支持百分比的值，如'50%' + */ + center?: { x: number | string; y: number | string }; + + /** 起始角度 */ + startAngle?: number; + + /** 终止角度 */ + endAngle?: number; +}; +``` + +## 极坐标轴标签配置 (IPolarAxisLabel) + +自 1.12.6 版本起，角度轴支持自动省略、自动隐藏、自动换行等功能： + +```typescript +export type IPolarAxisLabel = ILabel & + Pick< + AxisLabelOverlap, + 'autoHide' | 'autoHideMethod' | 'autoHideSeparation' | 'autoLimit' | 'limitEllipsis' | 'layoutFunc' | 'autoWrap' + >; +``` + +## 通用轴配置 (ICommonAxisSpec) + +定义轴的基础配置属性： + +```typescript +export interface ICommonAxisSpec extends Omit, IAnimationSpec { + /** 轴类型 */ + type?: AxisType; + + /** + * 是否显示坐标轴 + * @default true + */ + visible?: boolean; + + /** + * 是否开启反向坐标轴 + * @default false + */ + inverse?: boolean; + + /** 轴刻度线配置 */ + tick?: ITick; + + /** 子刻度线配置 */ + subTick?: ISubTick; + + /** + * 是否开启动画，默认关闭 + * @default false + */ + animation?: boolean; + + /** + * 是否开启 select 选中交互，默认关闭 + * @default false + */ + select?: boolean; + + /** + * 是否开启 hover 悬浮交互，默认关闭 + * @default false + */ + hover?: boolean; + + /** + * 是否开启轴数据采样，默认开启 + * @default true + * @since 1.1.0 + */ + sampling?: boolean; + + /** + * 是否强制初始化 tick 数据，仅在 visible 为 false 时生效 + * @default false + */ + forceInitTick?: boolean; +} +``` + +## 线性轴配置 (ILinearAxisSpec) + +连续数值轴的特定配置： + +```typescript +export interface ILinearAxisSpec { + /** 最小值，优先级高于 zero，nice */ + min?: number; + /** 最大值，优先级高于 zero，nice */ + max?: number; + + /** 最小值，当且仅当该值小于数据最小值时，才能生效 */ + softMin?: number; + /** 最大值，当且仅当该值大于数据最大值时，才能生效 */ + softMax?: number; + + /** 是否从 0 开始 */ + zero?: boolean; + /** 是否开启 nice */ + nice?: boolean; + + /** 刻度数量 */ + tickCount?: number; + /** 刻度配置 */ + tick?: ITick; + + /** 范围扩展配置 */ + expand?: { + min?: number; + max?: number; + }; + + /** + * 连续轴上的 dimension tooltip 数据筛选范围 + * @since 1.4.0 + */ + tooltipFilterRange?: number | [number, number] | ((params: { scale: IBaseScale }) => number | [number, number]); + + /** + * 轴截断配置，只对笛卡尔坐标系的 linear 轴生效 + * @since 1.12.4 + */ + breaks?: ILinearAxisBreakSpec[]; +} +``` + +## 离散轴配置 (IBandAxisSpec) + +分类轴的特定配置： + +```typescript +export interface IBandAxisSpec { + /** + * 是否去除 band 轴两端的留白 + * @default false + * @since 1.7.0 + */ + trimPadding?: boolean; + + /** + * 同时设置轴的 paddingInner 和 paddingOuter + * 支持数组类型，用于多层 scale 的 bandPadding 配置 + */ + bandPadding?: number | number[]; + + /** + * band 轴的内边距 + * @default 0.1 + */ + paddingInner?: number | number[]; + + /** + * band 轴的外边距 + * @default 0.3 + */ + paddingOuter?: number | number[]; + + /** + * 配置离散轴的数值范围 + * @since 1.1.0 + */ + domain?: StringOrNumber[]; + + /** + * 指定数据点在 band 轴上的位置偏移量 + * @default 0.5 + */ + bandPosition?: number; +} +``` + +## 支持类型定义 + +### 极坐标方向类型 + +```typescript +export type IPolarOrientType = 'radius' | 'angle'; +``` + +### 极坐标网格配置 + +```typescript +export type IPolarGrid = IGrid & { + /** + * smooth 为 true 时，为圆形 grid，为 false 则为多边形 grid + * @default false + */ + smooth?: boolean; +}; +``` + +### 刻度线配置 + +```typescript +export interface ITick extends IAxisItem { + /** 刻度个数 */ + tickCount?: number; + /** 刻度长度 */ + tickSize?: number; + /** 刻度步长 */ + tickStep?: number; + /** 刻度值数组 */ + tickValues?: any[]; + /** + * 刻度线朝向，默认朝外 + * @default false + */ + inside?: boolean; + /** + * tick 是否与 label 对齐 + * @default true + */ + alignWithLabel?: boolean; + /** 刻度线样式设置，支持回调 */ + style?: IRuleMarkSpec | StyleCallback; + /** 刻度线不同交互状态下的样式配置 */ + state?: AxisItemStateStyle; +} +``` + +### 标签配置 + +```typescript +export interface ILabel extends IAxisItem { + /** 文本类型 */ + type?: 'text' | 'rich'; + /** 轴标签内容格式化函数 */ + formatMethod?: IFormatMethod<[text: string | string[], datum?: Datum]>; + /** 格式化模板 */ + formatter?: string | string[]; + /** 标签同 tick 之间的间距 */ + space?: number; + /** + * 标签朝向，默认朝外 + * @default false + */ + inside?: boolean; + /** 标签之间的最小间距（像素） */ + minGap?: number; + /** 文本样式设置 */ + style?: ITextMarkSpec | StyleCallback; + /** label 不同交互状态下的样式配置 */ + state?: AxisItemStateStyle; +} +``` + +## 完整类型定义 + +```typescript +export type IPolarAxisSpec = { + // 基础配置 + type?: AxisType; + visible?: boolean; + inverse?: boolean; + animation?: boolean; + select?: boolean; + hover?: boolean; + sampling?: boolean; + forceInitTick?: boolean; + + // 极坐标特有配置 + layoutRadius?: 'auto' | number | ((layoutRect: ILayoutRect, center: IPointLike) => number); + inside?: boolean; + orient: 'radius' | 'angle'; + innerRadius?: number; + outerRadius?: number; + radius?: number; + center?: { x: number | string; y: number | string }; + startAngle?: number; + endAngle?: number; + + // 视觉元素配置 + grid?: IPolarGrid; + subGrid?: IPolarGrid; + domainLine?: IDomainLine; + label?: IPolarAxisLabel; + title?: ITitle; + tick?: ITick; + subTick?: ISubTick; +} & // 线性轴特有配置 +(| { + min?: number; + max?: number; + softMin?: number; + softMax?: number; + zero?: boolean; + nice?: boolean; + tickCount?: number; + expand?: { min?: number; max?: number }; + tooltipFilterRange?: number | [number, number] | Function; + breaks?: ILinearAxisBreakSpec[]; + } + // 离散轴特有配置 + | { + trimPadding?: boolean; + bandPadding?: number | number[]; + paddingInner?: number | number[]; + paddingOuter?: number | number[]; + domain?: StringOrNumber[]; + bandPosition?: number; + } +); +``` + +## 使用示例 + +### 半径轴（连续）配置 + +```typescript +const radiusAxis: IPolarAxisSpec = { + orient: 'radius', + type: 'linear', + min: 0, + max: 100, + innerRadius: 0.2, + outerRadius: 0.8, + grid: { + visible: true, + smooth: true + }, + label: { + visible: true, + space: 4 + } +}; +``` + +### 角度轴（离散）配置 + +```typescript +const angleAxis: IPolarAxisSpec = { + orient: 'angle', + type: 'band', + domain: ['A', 'B', 'C', 'D'], + paddingInner: 0.1, + paddingOuter: 0.2, + startAngle: -90, + endAngle: 270, + grid: { + visible: true, + smooth: false + }, + label: { + autoHide: true, + autoHideMethod: 'greedy' + } +}; +``` + +### 自定义中心和半径 + +```typescript +const customPolarAxis: IPolarAxisSpec = { + orient: 'radius', + type: 'linear', + center: { x: '50%', y: '50%' }, + layoutRadius: (layoutRect, center) => { + return Math.min(layoutRect.width, layoutRect.height) * 0.4; + }, + innerRadius: 0.3, + outerRadius: 0.9, + inside: true +}; +``` + +### 角度轴标签优化 + +```typescript +const optimizedAngleAxis: IPolarAxisSpec = { + orient: 'angle', + type: 'band', + sampling: true, + label: { + autoHide: true, + autoHideMethod: 'greedy', + autoHideSeparation: 4, + autoLimit: true, + limitEllipsis: '...', + autoWrap: true, + minGap: 8 + } +}; +``` + +### 带截断的半径轴 + +```typescript +const brokenRadiusAxis: IPolarAxisSpec = { + orient: 'radius', + type: 'linear', + breaks: [ + { + range: [50, 100], + gap: '5%', + scopeType: 'length' + } + ], + tick: { + tickCount: 10 + } +}; +``` diff --git a/skills/vchart-development-skill/references/type-details/IPolarCrosshairSpec-Type-Definition.md b/skills/vchart-development-skill/references/type-details/IPolarCrosshairSpec-Type-Definition.md new file mode 100644 index 0000000000..df30dba36f --- /dev/null +++ b/skills/vchart-development-skill/references/type-details/IPolarCrosshairSpec-Type-Definition.md @@ -0,0 +1,388 @@ +## IPolarCrosshairSpec Type Definition + +### Core Interface + +`IPolarCrosshairSpec` defines the configuration interface for crosshair components in polar coordinate systems, extending common crosshair functionality with polar-specific field configurations for category and value axes. + +```typescript +interface IPolarCrosshairSpec extends ICommonCrosshairSpec { + categoryField?: ICrosshairCategoryFieldSpec; + valueField?: ICrosshairValueFieldSpec; +} +``` + +### Type Structure + +#### Common Crosshair Properties + +```typescript +interface ICommonCrosshairSpec extends IComponentSpec { + followTooltip?: boolean | Partial>; + trigger?: CrossHairTrigger; + triggerOff?: CrossHairTrigger | 'none' | number; + lockAfterClick?: boolean; + labelZIndex?: number; + gridZIndex?: number; +} + +// Supporting types for common properties +type CrossHairTrigger = 'click' | 'hover' | ['click', 'hover']; + +interface ITooltipActiveTypeAsKeys { + mark?: T; // Mark tooltip configuration + dimension?: K; // Dimension tooltip configuration + group?: U; // Group tooltip configuration +} +``` + +#### Polar Field Specifications + +```typescript +// Category field configuration for polar coordinates +interface ICrosshairCategoryFieldSpec extends ICrosshairDataBindSpec { + visible: boolean; // Required visibility + line?: ICrosshairLineSpec | Omit; // Line or rect graphics + label?: ICrosshairLabelSpec; // Label configuration +} + +// Value field configuration for polar coordinates +interface ICrosshairValueFieldSpec extends ICrosshairDataBindSpec { + visible: boolean; // Required visibility + line?: ICrosshairLineSpec; // Line graphics only + label?: ICrosshairLabelSpec; // Label configuration +} +``` + +### Field Configuration Types + +#### Data Binding Specification + +```typescript +interface ICrosshairDataBindSpec { + bindingAxesIndex?: number[]; // Bound axis indices + defaultSelect?: { + axisIndex: number; // Target axis index + datum: StringOrNumber; // Default selected data + }; +} +``` + +#### Line Graphics Configuration + +```typescript +interface ICrosshairLineSpec { + visible?: boolean; // Show/hide line + type?: 'line'; // Graphics type (literal) + width?: number; // Line width (default: 2) + smooth?: boolean; // Smooth curve in polar coordinates + style?: ICrosshairLineStyle; // Line visual styles +} + +// Line style properties +type ICrosshairLineStyle = Pick; +``` + +#### Rectangle Graphics Configuration + +```typescript +interface ICrosshairRectSpec { + visible?: boolean; // Show/hide rectangle + type?: 'rect'; // Graphics type (literal) + width?: number | string | ICrosshairRectWidthCallback; // Width configuration + style?: ICrosshairRectStyle; // Rectangle visual styles +} + +// Rectangle style properties (extends line styles) +type ICrosshairRectStyle = ICrosshairLineStyle & Pick; + +// Dynamic width calculation callback +type ICrosshairRectWidthCallback = (axisSize: { width: number; height: number }, axis: IAxis) => number; +``` + +#### Label Configuration + +```typescript +interface ICrosshairLabelSpec { + visible?: boolean; // Show/hide labels + formatMethod?: (text: StringOrNumber | string[]) => string | string[]; // Format function + formatter?: string | string[]; // Format template + style?: Partial; // Text styles + labelBackground?: ICrosshairLabelBackgroundSpec; // Background config + syncAxisLabelAngle?: boolean; // Angle sync (Cartesian only) +} + +// Label background configuration +interface ICrosshairLabelBackgroundSpec { + visible?: boolean; // Show background (default: true) + minWidth?: number; // Minimum width (default: 30) + maxWidth?: number; // Maximum width (auto-ellipsis) + padding?: IPadding | number | number[]; // Internal padding + style?: Partial; // Background visual styles +} +``` + +### Tooltip Integration + +#### Follow Tooltip Configuration + +```typescript +// Boolean mode: simple sync with tooltip +const simpleSync: IPolarCrosshairSpec = { + followTooltip: true // Show crosshair when any tooltip appears +}; + +// Granular control mode: selective tooltip sync +const selectiveSync: IPolarCrosshairSpec = { + followTooltip: { + mark: true, // Show crosshair with mark tooltip + dimension: false, // Hide crosshair with dimension tooltip + group: true // Show crosshair with group tooltip + } +}; + +// Disabled mode: independent operation +const independentMode: IPolarCrosshairSpec = { + followTooltip: false // Crosshair operates independently +}; +``` + +#### Tooltip Type Mapping + +```typescript +// Tooltip active type configuration +interface ITooltipActiveTypeAsKeys { + mark?: T; // Mark-based tooltip (specific data points) + dimension?: K; // Dimension-based tooltip (axis-aligned data) + group?: U; // Group-based tooltip (series/category data) +} + +// Usage in crosshair configuration +const tooltipIntegration: IPolarCrosshairSpec = { + followTooltip: { + mark: true, // Follow mark tooltips + dimension: true, // Follow dimension tooltips + group: false // Ignore group tooltips + } +}; +``` + +### Trigger Configuration + +#### Trigger Types + +```typescript +// Single trigger modes +const hoverOnly: IPolarCrosshairSpec = { + trigger: 'hover' // Default behavior +}; + +const clickOnly: IPolarCrosshairSpec = { + trigger: 'click' // Click to show/update +}; + +// Multiple trigger modes +const multiTrigger: IPolarCrosshairSpec = { + trigger: ['click', 'hover'] // Both click and hover +}; +``` + +#### Trigger Control + +```typescript +// Auto-hide configuration +const autoHide: IPolarCrosshairSpec = { + trigger: 'hover', + triggerOff: 'hover' // Hide on hover out +}; + +// Manual control +const manualControl: IPolarCrosshairSpec = { + trigger: 'click', + triggerOff: 'none', // Never auto-hide + lockAfterClick: true // Lock position after click +}; + +// Delayed hide +const delayedHide: IPolarCrosshairSpec = { + trigger: 'hover', + triggerOff: 1000 // Hide after 1000ms +}; +``` + +### Polar Field Configuration + +#### Category Field Setup + +```typescript +// Basic category field crosshair +const categoryField: IPolarCrosshairSpec = { + categoryField: { + visible: true, + line: { + visible: true, + type: 'line', + width: 2, + smooth: true, // Smooth curve in polar coordinates + style: { + stroke: '#666', + strokeOpacity: 0.8, + lineDash: [4, 4] + } + }, + label: { + visible: true, + formatMethod: text => `Category: ${text}`, + style: { + fontSize: 12, + fill: '#333' + } + } + } +}; +``` + +#### Value Field Setup + +```typescript +// Basic value field crosshair +const valueField: IPolarCrosshairSpec = { + valueField: { + visible: true, + line: { + visible: true, + width: 1, + style: { + stroke: '#999', + strokeOpacity: 0.6 + } + }, + label: { + visible: true, + formatter: '{value:.2f}', + labelBackground: { + visible: true, + padding: [4, 8], + style: { + fill: 'rgba(0,0,0,0.8)', + cornerRadius: 4 + } + } + } + } +}; +``` + +#### Combined Configuration + +```typescript +// Complete polar crosshair setup +const polarCrosshair: IPolarCrosshairSpec = { + // Common properties + trigger: 'hover', + followTooltip: true, + labelZIndex: 1000, + gridZIndex: 50, + + // Category field (angular) + categoryField: { + visible: true, + bindingAxesIndex: [0], // Bind to first angular axis + line: { + visible: true, + smooth: true, + style: { + stroke: '#3366cc', + strokeOpacity: 0.7, + lineWidth: 2 + } + }, + label: { + visible: true, + formatMethod: text => `${text}`, + style: { + fontSize: 11, + fill: '#333', + fontWeight: 'bold' + } + } + }, + + // Value field (radial) + valueField: { + visible: true, + bindingAxesIndex: [1], // Bind to first radial axis + line: { + visible: true, + style: { + stroke: '#dc3912', + strokeOpacity: 0.6, + lineDash: [2, 2] + } + }, + label: { + visible: true, + formatter: '{value:.1f}', + labelBackground: { + visible: true, + minWidth: 40, + padding: 6, + style: { + fill: 'rgba(220, 57, 18, 0.9)', + cornerRadius: 3 + } + } + } + } +}; +``` + +### Axis Binding + +#### Single Axis Binding + +```typescript +// Bind to specific axis by index +const singleAxisBinding: IPolarCrosshairSpec = { + categoryField: { + visible: true, + bindingAxesIndex: [0], // Only bind to first category axis + line: { visible: true } + } +}; +``` + +#### Multiple Axes Binding + +```typescript +// Bind to multiple axes +const multiAxisBinding: IPolarCrosshairSpec = { + valueField: { + visible: true, + bindingAxesIndex: [0, 1], // Bind to first and second value axes + line: { visible: true } + } +}; +``` + +#### Default Selection + +```typescript +// Initialize with default position +const defaultSelection: IPolarCrosshairSpec = { + categoryField: { + visible: true, + defaultSelect: { + axisIndex: 0, + datum: 'Q1' // Default to Q1 category + }, + line: { visible: true } + }, + valueField: { + visible: true, + defaultSelect: { + axisIndex: 1, + datum: 75 // Default to value 75 + } + } +}; +``` diff --git a/skills/vchart-development-skill/references/type-details/IPolygonMarkSpec-Type-Definition.md b/skills/vchart-development-skill/references/type-details/IPolygonMarkSpec-Type-Definition.md new file mode 100644 index 0000000000..ade6cadee0 --- /dev/null +++ b/skills/vchart-development-skill/references/type-details/IPolygonMarkSpec-Type-Definition.md @@ -0,0 +1,190 @@ +## Overview + +```typescript +interface IPolygonMarkSpec { + // Polygon-specific properties + points?: IPoint[]; + cornerRadius?: number | number[]; + scaleX?: number; + scaleY?: number; + + // From IFillMarkSpec + fill?: VisualType | IGradient | false | IColorKey; + fillOpacity?: number; + background?: IColor | HTMLImageElement | HTMLCanvasElement | null; + + // From ICommonSpec + visible?: boolean; + x?: number; + y?: number; + z?: number; + stroke?: string | IGradient | false | (number | boolean)[] | IColorKey | null; + strokeOpacity?: number; + opacity?: number; + lineWidth?: number; + lineDash?: number[]; + lineDashOffset?: number; + cursor?: Cursor; + zIndex?: number; + angle?: number; + anchor?: [number, number]; + scaleCenter?: [number | string, number | string]; + alpha?: number; + beta?: number; + anchor3d?: [number, number]; + pickMode?: 'accurate' | 'imprecise' | 'custom'; + boundsMode?: 'accurate' | 'imprecise'; + pickStrokeBuffer?: number; + texture?: TextureType | string; + textureColor?: string; + textureSize?: number; + texturePadding?: number; + outerBorder?: IBorder; + innerBorder?: IBorder; + html?: IMarkHtmlSpec; +} +``` + +## Dependency Types + +### Point Definition + +```typescript +interface IPoint { + x: number; + y: number; +} +``` + +### Visual Mapping System + +```typescript +type VisualType = ValueType | FunctionType | IVisual; +type ValueType = T; +type FunctionType = (datum: Datum, context: IModelMarkAttributeContext, source?: DataView) => T; + +interface IVisual { + type: ScaleType; + domain: D[]; + range: R[]; + field?: string; + specified?: { [key: string]: unknown }; + clamp?: boolean; +} +``` + +### Gradient System + +```typescript +type IGradient = IGradientLinear | IGradientRadial | IGradientConical; + +interface IGradientLinear { + gradient: 'linear'; + x0?: GradientPropValue; + y0?: GradientPropValue; + x1?: GradientPropValue; + y1?: GradientPropValue; + stops: GradientStop[]; +} + +interface IGradientRadial { + gradient: 'radial'; + r0?: GradientPropValue; + x0?: GradientPropValue; + y0?: GradientPropValue; + x1?: GradientPropValue; + y1?: GradientPropValue; + r1?: GradientPropValue; + stops: GradientStop[]; +} + +interface IGradientConical { + gradient: 'conical'; + x?: GradientPropValue; + y?: GradientPropValue; + startAngle?: GradientPropValue; + endAngle?: GradientPropValue; + stops: GradientStop[]; +} + +type GradientPropValue = ValueType | FunctionType; + +type GradientStop = { + offset: GradientPropValue; + color?: GradientPropValue; + opacity?: number; +}; +``` + +### Border Configuration + +```typescript +interface IBorder { + distance: number | string; + stroke?: string | IGradient; + strokeOpacity?: number; + lineWidth?: number; + lineDash?: number[]; + lineDashOffset?: number; +} +``` + +### Color and Theme Types + +```typescript +type IColor = string | IGradient | IColorKey; + +interface IColorKey { + // Color theme key reference +} + +interface ITokenKey { + // Token theme key reference +} +``` + +### Texture Types + +```typescript +type TextureType = 'circle' | 'dimond' | 'rect' | 'vertical-line' | 'horizontal-line' | 'bias-lr' | 'bias-rl' | 'grid'; +``` + +### HTML Integration + +```typescript +type IMarkHtmlSpec = Partial; + +interface IGraphicStyle { + html?: { + anchorType?: 'top' | 'middle' | 'bottom'; + }; +} +``` + +### Scale and Context Types + +```typescript +type ScaleType = + | 'linear' + | 'ordinal' + | 'band' + | 'point' + | 'time' + | 'log' + | 'pow' + | 'sqrt' + | 'symlog' + | 'threshold' + | 'quantile' + | 'quantize'; + +type Cursor = 'auto' | 'default' | 'pointer' | 'crosshair' | 'move' | 'text' | 'wait' | 'help' | 'not-allowed' | string; + +interface Datum { + [key: string]: any; +} + +interface IModelMarkAttributeContext { + // Mark attribute evaluation context +} +``` diff --git a/skills/vchart-development-skill/references/type-details/IRectMarkSpec-Type-Definition.md b/skills/vchart-development-skill/references/type-details/IRectMarkSpec-Type-Definition.md new file mode 100644 index 0000000000..02c491add7 --- /dev/null +++ b/skills/vchart-development-skill/references/type-details/IRectMarkSpec-Type-Definition.md @@ -0,0 +1,242 @@ +## Overview + +```typescript +interface IRectMarkSpec extends IFillMarkSpec { + // Rectangle-specific properties + cornerRadius?: number | number[]; // Corner radius configuration + width?: number; // Rectangle width + height?: number; // Rectangle height + x1?: number; // X-direction end coordinate + y1?: number; // Y-direction end coordinate + + // Inherited from IFillMarkSpec + fill?: VisualType | IGradient | false | IColorKey; + fillOpacity?: number; + background?: IColor | HTMLImageElement | HTMLCanvasElement | null; + + // Inherited from ICommonSpec + visible?: boolean; // Visibility + x?: number; // X coordinate + y?: number; // Y coordinate + z?: number; // Z coordinate (3D) + stroke?: string | IGradient | false | (number | boolean)[] | IColorKey | null; + strokeOpacity?: number; // Stroke opacity + opacity?: number; // Overall opacity + lineWidth?: number; // Stroke width + lineDash?: number[]; // Dash pattern + lineDashOffset?: number; // Dash offset + cursor?: Cursor; // Mouse cursor + zIndex?: number; // Layer index + angle?: number; // Rotation angle + anchor?: [number, number]; // Anchor point + scaleX?: number; // X-scale factor + scaleY?: number; // Y-scale factor + scaleCenter?: [number | string, number | string]; // Scale center + + // 3D properties + alpha?: number; // X-direction rotation + beta?: number; // Y-direction rotation + anchor3d?: [number, number]; // 3D anchor point + + // Interaction properties + pickMode?: 'accurate' | 'imprecise' | 'custom'; + boundsMode?: 'accurate' | 'imprecise'; + pickStrokeBuffer?: number; // Stroke pick buffer @since 1.7.3 + + // Texture properties + texture?: TextureType | string; // Texture type + textureColor?: string; // Texture color + textureSize?: number; // Texture size + texturePadding?: number; // Texture padding + + // Border properties + outerBorder?: IBorder; // Outer border + innerBorder?: IBorder; // Inner border + + // HTML overlay + html?: IMarkHtmlSpec; // HTML overlay @since 1.10.0 +} +``` + +## TextureType + +```typescript +type TextureType = 'circle' | 'dimond' | 'rect' | 'vertical-line' | 'horizontal-line' | 'bias-lr' | 'bias-rl' | 'grid'; +``` + +## Border Configuration (Inherited from ICommonSpec) + +```typescript +interface IBorder { + /** Distance from shape edge */ + distance: number | string; + + /** Border color */ + stroke?: string | IGradient; + + /** Border opacity */ + strokeOpacity?: number; + + /** Border width */ + lineWidth?: number; + + /** Border dash pattern */ + lineDash?: number[]; + + /** Border dash offset */ + lineDashOffset?: number; +} +``` + +## Visual Type System + +### Visual Mapping Types + +```typescript +type VisualType = ValueType | FunctionType | IVisual; + +type ValueType = T; +type FunctionType = (datum: Datum, context: IModelMarkAttributeContext, source?: DataView) => T; + +type IVisual = IVisualSpecStyle | IVisualScale; + +interface IVisualSpecStyle extends IVisualSpecBase { + /** Data field for mapping */ + field?: string; +} + +interface IVisualScale { + /** Scale ID reference */ + scale: string; + + /** Data field for mapping */ + field?: string; + + /** Domain change strategy @default 'none' */ + changeDomain?: 'none' | 'replace' | 'expand'; +} +``` + +### Gradient Types + +```typescript +type IGradient = IGradientLinear | IGradientRadial | IGradientConical; + +interface IGradientLinear { + gradient: 'linear'; + x0?: GradientPropValue; // Start x (0-1) + y0?: GradientPropValue; // Start y (0-1) + x1?: GradientPropValue; // End x (0-1) + y1?: GradientPropValue; // End y (0-1) + stops: GradientStop[]; +} + +interface IGradientRadial { + gradient: 'radial'; + r0?: GradientPropValue; // Start radius + x0?: GradientPropValue; // Start x + y0?: GradientPropValue; // Start y + x1?: GradientPropValue; // End x + y1?: GradientPropValue; // End y + r1?: GradientPropValue; // End radius + stops: GradientStop[]; +} + +interface IGradientConical { + gradient: 'conical'; + x?: GradientPropValue; // Center x + y?: GradientPropValue; // Center y + startAngle?: GradientPropValue; // Start angle + endAngle?: GradientPropValue; // End angle + stops: GradientStop[]; +} + +type GradientStop = { + offset: GradientPropValue; // 0-1 offset + color?: GradientPropValue; // Color + opacity?: number; // Opacity +}; + +type GradientPropValue = ValueType | FunctionType; +``` + +## Dependency Type Definitions + +### Theme and Color Types + +```typescript +interface IColorKey { + // Theme color key interface +} + +interface IColor { + // VRender color interface +} +``` + +### HTML Overlay Types + +```typescript +type IMarkHtmlSpec = Partial; + +interface IGraphicStyle { + html?: { + // HTML overlay configuration + }; +} +``` + +### Cursor Types + +```typescript +type Cursor = + | 'auto' + | 'default' + | 'none' + | 'context-menu' + | 'help' + | 'pointer' + | 'progress' + | 'wait' + | 'cell' + | 'crosshair' + | 'text' + | 'vertical-text' + | 'alias' + | 'copy' + | 'move' + | 'no-drop' + | 'not-allowed' + | 'grab' + | 'grabbing' + | 'e-resize' + | 'n-resize' + | 'ne-resize' + | 'nw-resize' + | 's-resize' + | 'se-resize' + | 'sw-resize' + | 'w-resize' + | 'ew-resize' + | 'ns-resize' + | 'nesw-resize' + | 'nwse-resize' + | 'col-resize' + | 'row-resize' + | 'all-scroll' + | 'zoom-in' + | 'zoom-out'; +``` + +### Context Types + +```typescript +interface IModelMarkAttributeContext { + // Mark attribute context for function evaluation +} + +interface Datum { + // Data record interface + [key: string]: any; +} +``` diff --git a/skills/vchart-development-skill/references/type-details/IRippleMarkSpec-Type-Definition.md b/skills/vchart-development-skill/references/type-details/IRippleMarkSpec-Type-Definition.md new file mode 100644 index 0000000000..939d284c59 --- /dev/null +++ b/skills/vchart-development-skill/references/type-details/IRippleMarkSpec-Type-Definition.md @@ -0,0 +1,153 @@ +## Type Definition + +```typescript +interface IRippleMarkSpec { + // Ripple-specific properties + ripple?: number; + size?: number; + + // Inherited from ICommonSpec + visible?: boolean; + x?: number; + y?: number; + z?: number; + stroke?: string | IGradient | false | (number | boolean)[] | IColorKey | null; + strokeOpacity?: number; + opacity?: number; + lineWidth?: number; + lineDash?: number[]; + lineDashOffset?: number; + cursor?: Cursor; + zIndex?: number; + angle?: number; + anchor?: [number, number]; + scaleX?: number; + scaleY?: number; + scaleCenter?: [number | string, number | string]; + alpha?: number; + beta?: number; + anchor3d?: [number, number]; + pickMode?: 'accurate' | 'imprecise' | 'custom'; + boundsMode?: 'accurate' | 'imprecise'; + pickStrokeBuffer?: number; + texture?: TextureType | string; + textureColor?: string; + textureSize?: number; + texturePadding?: number; + outerBorder?: IBorder; + innerBorder?: IBorder; + html?: IMarkHtmlSpec; + [key: string]: any; +} +``` + +## Related Types + +### IGradient + +Union type supporting linear, radial, and conical gradients: + +```typescript +type IGradient = IGradientLinear | IGradientRadial | IGradientConical; +``` + +### IGradientLinear + +```typescript +interface IGradientLinear { + x0?: GradientPropValue; + y0?: GradientPropValue; + x1?: GradientPropValue; + y1?: GradientPropValue; + stops: GradientStop[]; + gradient: 'linear'; +} +``` + +### IGradientRadial + +```typescript +interface IGradientRadial { + r0?: GradientPropValue; + x0?: GradientPropValue; + y0?: GradientPropValue; + x1?: GradientPropValue; + y1?: GradientPropValue; + r1?: GradientPropValue; + stops: GradientStop[]; + gradient: 'radial'; +} +``` + +### IGradientConical + +```typescript +interface IGradientConical { + x?: GradientPropValue; + y?: GradientPropValue; + startAngle?: GradientPropValue; + endAngle?: GradientPropValue; + stops: GradientStop[]; + gradient: 'conical'; +} +``` + +### GradientStop + +```typescript +type GradientStop = { + offset: GradientPropValue; + color?: GradientPropValue; + opacity?: number; +}; +``` + +### GradientPropValue + +```typescript +type GradientPropValue = ValueType | FunctionType; +``` + +### IColorKey + +Theme-based color token reference for consistent color schemes. + +### TextureType + +```typescript +type TextureType = 'circle' | 'dimond' | 'rect' | 'vertical-line' | 'horizontal-line' | 'bias-lr' | 'bias-rl' | 'grid'; +``` + +### IBorder + +```typescript +interface IBorder { + distance: number | string; + stroke?: string | IGradient; + strokeOpacity?: number; + lineWidth?: number; + lineDash?: number[]; + lineDashOffset?: number; +} +``` + +### IMarkHtmlSpec + +```typescript +type IMarkHtmlSpec = Partial; +``` + +### IGraphicStyle + +```typescript +interface IGraphicStyle { + html?: { + anchorType?: 'position' | 'boundsLeftTop' | 'boundsRightTop' | 'boundsLeftBottom' | 'boundsRightBottom'; + element?: string | HTMLElement; + style?: Partial; + pointerEvents?: boolean; + container?: HTMLElement; + }; + [key: string]: any; +} +``` diff --git a/skills/vchart-development-skill/references/type-details/IRuleMarkSpec-Type-Definition.md b/skills/vchart-development-skill/references/type-details/IRuleMarkSpec-Type-Definition.md new file mode 100644 index 0000000000..1b16688c77 --- /dev/null +++ b/skills/vchart-development-skill/references/type-details/IRuleMarkSpec-Type-Definition.md @@ -0,0 +1,473 @@ +# IRuleMarkSpec Type Definition + +## Overview + +```typescript +interface IRuleMarkSpec extends ILineMarkSpec { + // Rule-specific properties + x1?: number; // End point x coordinate + y1?: number; // End point y coordinate + + // Inherited from ILineMarkSpec + lineCap?: LineStrokeCap; // Line end cap style + lineJoin?: LineStrokeJoin; // Line join style + miterLimit?: number; // Miter limit ratio + strokeBoundsBuffer?: number; // Stroke bounds buffer + + // Inherited from ILineLikeMarkSpec + curveType?: InterpolateType; // Interpolation type + defined?: boolean; // Point validity + + // Inherited from IFillMarkSpec + fill?: VisualType | IGradient | false | IColorKey; + fillOpacity?: number; + background?: IColor | HTMLImageElement | HTMLCanvasElement | null; + + // Inherited from ICommonSpec + visible?: boolean; // Visibility + x?: number; // X coordinate + y?: number; // Y coordinate + z?: number; // Z coordinate (3D) + stroke?: string | IGradient | false | (number | boolean)[] | IColorKey | null; + strokeOpacity?: number; // Stroke opacity + opacity?: number; // Overall opacity + lineWidth?: number; // Stroke width + lineDash?: number[]; // Dash pattern + lineDashOffset?: number; // Dash offset + cursor?: Cursor; // Mouse cursor + zIndex?: number; // Layer index + angle?: number; // Rotation angle + anchor?: [number, number]; // Anchor point + scaleX?: number; // X-scale factor + scaleY?: number; // Y-scale factor + scaleCenter?: [number | string, number | string]; // Scale center + + // 3D properties + alpha?: number; // X-direction rotation + beta?: number; // Y-direction rotation + anchor3d?: [number, number]; // 3D anchor point + + // Interaction properties + pickMode?: 'accurate' | 'imprecise' | 'custom'; + boundsMode?: 'accurate' | 'imprecise'; + pickStrokeBuffer?: number; // Stroke pick buffer @since 1.7.3 + + // Texture properties + texture?: TextureType | string; // Texture type + textureColor?: string; // Texture color + textureSize?: number; // Texture size + texturePadding?: number; // Texture padding + + // Border properties + outerBorder?: IBorder; // Outer border + innerBorder?: IBorder; // Inner border + + // HTML overlay + html?: IMarkHtmlSpec; // HTML overlay @since 1.10.0 +} +``` + +## Line Cap Types + +```typescript +type LineStrokeCap = 'butt' | 'round' | 'square'; +``` + +**LineStrokeCap 线段端点样式：** + +- `'butt'`: 平直端点（默认值） +- `'round'`: 圆形端点 +- `'square'`: 方形端点 + +## Line Join Types + +```typescript +type LineStrokeJoin = 'arcs' | 'bevel' | 'miter' | 'miter-clip' | 'round'; +``` + +**LineStrokeJoin 线段连接样式：** + +- `'miter'`: 斜接连接（默认值） +- `'round'`: 圆形连接 +- `'bevel'`: 斜面连接 +- `'arcs'`: 弧形连接 +- `'miter-clip'`: 裁剪斜接连接 + +## Interpolation Types + +```typescript +type InterpolateType = + | 'basis' + | 'linear' + | 'monotone' + | 'monotoneX' + | 'monotoneY' + | 'step' + | 'stepAfter' + | 'stepBefore' + | 'linearClosed' + | 'catmullRom' + | 'catmullRomClosed'; +``` + +## Visual Type System + +### Visual Mapping Types + +```typescript +type VisualType = ValueType | FunctionType | IVisual; + +type ValueType = T; +type FunctionType = (datum: Datum, context: IModelMarkAttributeContext, source?: DataView) => T; + +type IVisual = IVisualSpecStyle | IVisualScale; + +interface IVisualSpecStyle extends IVisualSpecBase { + /** Data field for mapping */ + field?: string; +} + +interface IVisualScale { + /** Scale ID reference */ + scale: string; + + /** Data field for mapping */ + field?: string; + + /** Domain change strategy @default 'none' */ + changeDomain?: 'none' | 'replace' | 'expand'; +} +``` + +### Gradient Types + +```typescript +type IGradient = IGradientLinear | IGradientRadial | IGradientConical; + +interface IGradientLinear { + gradient: 'linear'; + x0?: GradientPropValue; // Start x (0-1) + y0?: GradientPropValue; // Start y (0-1) + x1?: GradientPropValue; // End x (0-1) + y1?: GradientPropValue; // End y (0-1) + stops: GradientStop[]; +} + +interface IGradientRadial { + gradient: 'radial'; + r0?: GradientPropValue; // Start radius + x0?: GradientPropValue; // Start x + y0?: GradientPropValue; // Start y + x1?: GradientPropValue; // End x + y1?: GradientPropValue; // End y + r1?: GradientPropValue; // End radius + stops: GradientStop[]; +} + +interface IGradientConical { + gradient: 'conical'; + x?: GradientPropValue; // Center x + y?: GradientPropValue; // Center y + startAngle?: GradientPropValue; // Start angle + endAngle?: GradientPropValue; // End angle + stops: GradientStop[]; +} + +type GradientStop = { + offset: GradientPropValue; // 0-1 offset + color?: GradientPropValue; // Color + opacity?: number; // Opacity +}; + +type GradientPropValue = ValueType | FunctionType; +``` + +## Dependency Type Definitions + +### TextureType + +```typescript +type TextureType = 'circle' | 'dimond' | 'rect' | 'vertical-line' | 'horizontal-line' | 'bias-lr' | 'bias-rl' | 'grid'; +``` + +### Border Configuration + +```typescript +interface IBorder { + /** Distance from shape edge */ + distance: number | string; + + /** Border color */ + stroke?: string | IGradient; + + /** Border opacity */ + strokeOpacity?: number; + + /** Border width */ + lineWidth?: number; + + /** Border dash pattern */ + lineDash?: number[]; + + /** Border dash offset */ + lineDashOffset?: number; +} +``` + +### Theme and Color Types + +```typescript +interface IColorKey { + // Theme color key interface +} + +interface IColor { + // VRender color interface +} +``` + +### HTML Overlay Types + +```typescript +type IMarkHtmlSpec = Partial; + +interface IGraphicStyle { + html?: { + // HTML overlay configuration + }; +} +``` + +### Cursor Types + +```typescript +type Cursor = + | 'auto' + | 'default' + | 'none' + | 'context-menu' + | 'help' + | 'pointer' + | 'progress' + | 'wait' + | 'cell' + | 'crosshair' + | 'text' + | 'vertical-text' + | 'alias' + | 'copy' + | 'move' + | 'no-drop' + | 'not-allowed' + | 'grab' + | 'grabbing' + | 'e-resize' + | 'n-resize' + | 'ne-resize' + | 'nw-resize' + | 's-resize' + | 'se-resize' + | 'sw-resize' + | 'w-resize' + | 'ew-resize' + | 'ns-resize' + | 'nesw-resize' + | 'nwse-resize' + | 'col-resize' + | 'row-resize' + | 'all-scroll' + | 'zoom-in' + | 'zoom-out'; +``` + +### Context Types + +```typescript +interface IModelMarkAttributeContext { + // Mark attribute context for function evaluation +} + +interface Datum { + // Data record interface + [key: string]: any; +} +``` + +- `stroke?: string | IGradient | false | (number | boolean)[] | IColorKey | null` - 图形的描边颜色 +- `strokeOpacity?: number` - 描边透明度 +- `opacity?: number` - 图形的透明度，既影响描边也影响填充 +- `lineWidth?: number` - 图形的描边宽度 +- `lineDash?: number[]` - 给描边配置虚线模式 +- `lineDashOffset?: number` - 设置虚线偏移量的属性 + +### 3D Properties + +- `alpha?: number` - x 方向的旋转角度 +- `beta?: number` - y 方向的旋转角度 +- `anchor3d?: [number, number]` - 3d 的锚点位置 + +### Interaction and Rendering + +- `cursor?: Cursor` - 设置图形的鼠标样式 +- `zIndex?: number` - 设置图形的层级 +- `pickMode?: 'accurate' | 'imprecise' | 'custom'` - 选择模式 +- `boundsMode?: 'accurate' | 'imprecise'` - bounds 的计算模式 +- `pickStrokeBuffer?: number` - 用于扩展描边的拾取范围 + +### Texture Properties + +- `texture?: TextureType | string` - 纹理的类型 +- `textureColor?: string` - 纹理的颜色 +- `textureSize?: number` - 纹理单元的大小 +- `texturePadding?: number` - 纹理之间空隙的大小 + +### Border Properties + +- `outerBorder?: IBorder` - 外边框，外描边，描边位于图形外侧 +- `innerBorder?: IBorder` - 内边框，内描边，描边位于图形内侧 + +### HTML Integration + +- `html?: IMarkHtmlSpec` - html 浮层，会将配置的 html 相关内容，绝对定位到图元的位置 + +## Dependency Types + +### LineStrokeCap + +```typescript +type LineStrokeCap = 'butt' | 'round' | 'square'; +``` + +### LineStrokeJoin + +```typescript +type LineStrokeJoin = 'arcs' | 'bevel' | 'miter' | 'miter-clip' | 'round'; +``` + +### InterpolateType + +```typescript +type InterpolateType = + | 'basis' + | 'linear' + | 'monotone' + | 'monotoneX' + | 'monotoneY' + | 'step' + | 'stepAfter' + | 'stepBefore' + | 'linearClosed' + | 'catmullRom' + | 'catmullRomClosed'; +``` + +### VisualType + +```typescript +type VisualType = ValueType | FunctionType | IVisual; +type ValueType = T; +type FunctionType = (datum: Datum, context: IModelMarkAttributeContext, source?: DataView) => T; +``` + +### IGradient Types + +```typescript +type IGradient = IGradientLinear | IGradientRadial | IGradientConical; + +interface IGradientLinear { + gradient: 'linear'; + x0?: GradientPropValue; + y0?: GradientPropValue; + x1?: GradientPropValue; + y1?: GradientPropValue; + stops: GradientStop[]; +} + +interface IGradientRadial { + gradient: 'radial'; + r0?: GradientPropValue; + x0?: GradientPropValue; + y0?: GradientPropValue; + x1?: GradientPropValue; + y1?: GradientPropValue; + r1?: GradientPropValue; + stops: GradientStop[]; +} + +interface IGradientConical { + gradient: 'conical'; + x?: GradientPropValue; + y?: GradientPropValue; + startAngle?: GradientPropValue; + endAngle?: GradientPropValue; + stops: GradientStop[]; +} + +type GradientStop = { + offset: GradientPropValue; + color?: GradientPropValue; + opacity?: number; +}; +``` + +### TextureType + +```typescript +type TextureType = 'circle' | 'dimond' | 'rect' | 'vertical-line' | 'horizontal-line' | 'bias-lr' | 'bias-rl' | 'grid'; +``` + +### IBorder + +```typescript +interface IBorder { + distance: number | string; + stroke?: string | IGradient; + strokeOpacity?: number; + lineWidth?: number; + lineDash?: number[]; + lineDashOffset?: number; +} +``` + +### Context Types + +```typescript +type IMarkHtmlSpec = Partial; +type Cursor = + | 'auto' + | 'default' + | 'none' + | 'context-menu' + | 'help' + | 'pointer' + | 'progress' + | 'wait' + | 'cell' + | 'crosshair' + | 'text' + | 'vertical-text' + | 'alias' + | 'copy' + | 'move' + | 'no-drop' + | 'not-allowed' + | 'grab' + | 'grabbing' + | 'e-resize' + | 'n-resize' + | 'ne-resize' + | 'nw-resize' + | 's-resize' + | 'se-resize' + | 'sw-resize' + | 'w-resize' + | 'ew-resize' + | 'ns-resize' + | 'nesw-resize' + | 'nwse-resize' + | 'col-resize' + | 'row-resize' + | 'all-scroll' + | 'zoom-in' + | 'zoom-out'; +``` diff --git a/skills/vchart-development-skill/references/type-details/ISankeyLabelSpec-Type-Definition.md b/skills/vchart-development-skill/references/type-details/ISankeyLabelSpec-Type-Definition.md new file mode 100644 index 0000000000..68ede22f6e --- /dev/null +++ b/skills/vchart-development-skill/references/type-details/ISankeyLabelSpec-Type-Definition.md @@ -0,0 +1,379 @@ +# ISankeyLabelSpec Type Definition + +## Interface Overview + +```typescript +type ISankeyLabelSpec = ILabelSpec & { + position?: 'outside' | 'inside-start' | 'inside-middle' | 'inside-end' | 'left' | 'right'; + limit?: number; +}; +``` + +`ISankeyLabelSpec` 定义了桑基图标签的完整规范，继承自 `ILabelSpec` 的所有属性，并添加了桑基图特定的位置配置和文字缩略功能。 + +## Core Properties + +### Sankey-specific Properties + +- `position?: 'outside' | 'inside-start' | 'inside-middle' | 'inside-end' | 'left' | 'right'` - 标签布局方式，默认 'outside' + - `'outside'` - 在节点外部显示 + - `'inside-start'` - 在节点内部起始位置 + - `'inside-middle'` - 在节点内部中间位置 + - `'inside-end'` - 在节点内部结束位置 + - `'left'` - 节点左侧 + - `'right'` - 节点右侧 +- `limit?: number` - 标签文字缩略，指定最大字符数 + +## Inherited Properties (from ILabelSpec) + +### Basic Display + +- `zIndex?: number` - 标签组件的层级 +- `visible?: boolean` - 是否显示标签，默认 false +- `interactive?: boolean` - 是否支持交互，默认 false + +### Text Content & Formatting + +- `textType?: 'text' | 'rich'` - 文本类型，rich 类型已废弃 (since 1.7.0) +- `formatMethod?: IFormatMethod<[text: string | string[], datum?: Datum, ctx?: ILabelFormatMethodContext]>` - 格式化函数 (since 1.10.0) +- `formatter?: string | string[]` - 字符串模板，使用 {} 包裹变量名 (since 1.7.0) + +### Layout & Positioning + +- `offset?: number` - 标签与对应数据图元的间距 +- `overlap?: BaseLabelAttrs['overlap'] & { padding?: DataLabelAttrs['size']['padding'] }` - 标签防重叠配置 +- `smartInvert?: BaseLabelAttrs['smartInvert']` - 标签智能反色配置 + +### Visual Styling + +- `style?: ConvertToMarkStyleSpec` - 标签样式配置 +- `state?: LabelStateStyle>` - 交互状态样式配置 + +### Data Processing + +- `stackDataFilterType?: 'min' | 'max'` - 堆积数据过滤类型 (since 1.12.0) +- `dataFilter?: BaseLabelAttrs['dataFilter']` - 自定义标签数据筛选和排序 (since 1.3.0) + +### Custom Layout Functions + +- `customLayoutFunc?: BaseLabelAttrs['customLayoutFunc']` - 自定义标签布局函数 (since 1.3.0) +- `customOverlapFunc?: BaseLabelAttrs['customOverlapFunc']` - 自定义标签躲避函数 (since 1.3.0) +- `onAfterOverlapping?: BaseLabelAttrs['onAfterOverlapping']` - 防重叠计算完成后的回调函数 (since 1.13.5) + +### Advanced Configuration + +- `labelLayout?: 'series' | 'region'` - 标签布局方式 +- `support3d?: boolean` - 是否支持 3D +- `syncState?: boolean` - 是否同步数据图元的状态变化，默认 false (since 1.9.0) +- `showRelatedMarkTooltip?: boolean` - 是否显示标签关联图元的 mark tooltip，默认 false (since 1.13.5) + +### Animation Properties + +- `animation?: BaseLabelAttrs['animation']` - 动画配置 +- `animationEnter?: BaseLabelAttrs['animationEnter']` - 入场动画配置 +- `animationUpdate?: BaseLabelAttrs['animationUpdate']` - 更新动画配置 +- `animationExit?: BaseLabelAttrs['animationExit']` - 退场动画配置 + +## Complete Type Definitions + +### IFormatMethod + +```typescript +type IFormatMethod = ( + ...args: T +) => ReturnType> | ReturnType>; + +type ITextFormatMethod = ( + ...args: T +) => ITextMarkSpec['text'] | { type: 'text'; text: ITextMarkSpec['text'] }; + +type IRichTextFormatMethod = (...args: T) => + | { + type: 'rich'; + text: IRichTextCharacter[]; + } + | IRichTextCharacter[]; +``` + +### ILabelFormatMethodContext + +```typescript +interface ILabelFormatMethodContext { + series?: ISeries; +} +``` + +### ConvertToMarkStyleSpec + +```typescript +type ConvertToMarkStyleSpec> = { + [key in keyof T]: VisualType; +}; + +type VisualType = ValueType | FunctionType | IVisual; +type ValueType = T; +type FunctionType = (datum: Datum, context: IModelMarkAttributeContext, source?: DataView) => T; +``` + +### Text Mark Specifications + +```typescript +type IComposedTextMarkSpec = ITextMarkSpec | IRichTextMarkSpec; + +interface ITextMarkSpec extends IFillMarkSpec { + text?: string | number | string[] | number[]; + dx?: number; + dy?: number; + fontSize?: number | ITokenKey; + textAlign?: TextAlign; + textBaseline?: TextBaseLine; + fontFamily?: string; + fontWeight?: FontWeight; + fontStyle?: FontStyle; + maxLineWidth?: number; + ellipsis?: string; + suffixPosition?: 'start' | 'end' | 'middle'; + underline?: boolean; + underlineDash?: number[]; + underlineOffset?: number; + lineThrough?: boolean; + lineHeight?: number | string | ITokenKey; + poptip?: PopTipAttributes; + direction?: 'horizontal' | 'vertical'; + wordBreak?: 'break-word' | 'break-all' | 'keep-all'; + heightLimit?: number; + lineClamp?: number; + whiteSpace?: 'normal' | 'no-wrap'; +} + +type IRichTextMarkSpec = IRichTextAttribute & + IFillMarkSpec & { + type: 'rich'; + text: IRichTextAttribute['textConfig']; + }; +``` + +### State Styling + +```typescript +type LabelStateStyle = { + hover?: T; + hover_reverse?: T; + selected?: T; + selected_reverse?: T; +}; +``` + +### Fill Mark Specification + +```typescript +interface IFillMarkSpec extends ICommonSpec { + fill?: VisualType | IGradient | false | IColorKey; + fillOpacity?: number; + background?: IColor | HTMLImageElement | HTMLCanvasElement | null; +} + +interface ICommonSpec { + visible?: boolean; + x?: number; + y?: number; + z?: number; + stroke?: string | IGradient | false | (number | boolean)[] | IColorKey | null; + strokeOpacity?: number; + opacity?: number; + lineWidth?: number; + lineDash?: number[]; + lineDashOffset?: number; + cursor?: Cursor; + zIndex?: number; + angle?: number; + anchor?: [number, number]; + scaleX?: number; + scaleY?: number; + scaleCenter?: [number | string, number | string]; + alpha?: number; + beta?: number; + anchor3d?: [number, number]; + pickMode?: 'accurate' | 'imprecise' | 'custom'; + boundsMode?: 'accurate' | 'imprecise'; + pickStrokeBuffer?: number; + texture?: TextureType | string; + textureColor?: string; + textureSize?: number; + texturePadding?: number; + outerBorder?: IBorder; + innerBorder?: IBorder; + html?: IMarkHtmlSpec; +} +``` + +### Animation Types + +```typescript +type ILabelAnimationSpec = Pick; +``` + +### Text Formatting Types + +```typescript +type TextAlign = 'left' | 'center' | 'right' | 'start' | 'end'; +type TextBaseLine = 'top' | 'hanging' | 'middle' | 'alphabetic' | 'ideographic' | 'bottom'; +type FontWeight = 'normal' | 'bold' | 'lighter' | 'bolder' | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900; +type FontStyle = 'normal' | 'italic' | 'oblique' | string; + +type Cursor = + | 'auto' + | 'default' + | 'none' + | 'context-menu' + | 'help' + | 'pointer' + | 'progress' + | 'wait' + | 'cell' + | 'crosshair' + | 'text' + | 'vertical-text' + | 'alias' + | 'copy' + | 'move' + | 'no-drop' + | 'not-allowed' + | 'grab' + | 'grabbing' + | 'e-resize' + | 'n-resize' + | 'ne-resize' + | 'nw-resize' + | 's-resize' + | 'se-resize' + | 'sw-resize' + | 'w-resize' + | 'ew-resize' + | 'ns-resize' + | 'nesw-resize' + | 'nwse-resize' + | 'col-resize' + | 'row-resize' + | 'all-scroll' + | 'zoom-in' + | 'zoom-out'; + +type TextureType = 'circle' | 'dimond' | 'rect' | 'vertical-line' | 'horizontal-line' | 'bias-lr' | 'bias-rl' | 'grid'; +``` + +### Rich Text Types + +```typescript +interface IRichTextCharacter { + text: string; + fill?: string; + fontSize?: number; + fontFamily?: string; + fontWeight?: FontWeight; + fontStyle?: FontStyle; + textDecoration?: 'none' | 'underline' | 'line-through'; + script?: 'normal' | 'sub' | 'super'; +} + +interface IRichTextAttribute { + textConfig: IRichTextCharacter[]; +} +``` + +### Token and Theme Types + +```typescript +interface ITokenKey { + type: 'token'; + key: string; + default?: T; +} + +interface IColorKey { + type: 'color'; + key: string; + default?: string; +} + +interface IBorder { + distance: number | string; + stroke?: string | IGradient; + strokeOpacity?: number; + lineWidth?: number; + lineDash?: number[]; + lineDashOffset?: number; +} +``` + +### External Dependencies + +```typescript +type Datum = Record; + +interface ISeries { + // Series interface +} + +interface IModelMarkAttributeContext { + // Mark attribute context for function evaluation +} + +interface DataView { + // DataView interface from @visactor/vdataset +} + +interface PopTipAttributes { + // PopTip configuration from @visactor/vrender-components +} + +interface IColor { + // Color interface from @visactor/vrender-core +} + +type IMarkHtmlSpec = Partial; + +interface IGraphicStyle { + html: { + // HTML layer configuration + }; +} + +interface BaseLabelAttrs { + overlap: { + // Complex overlap detection and avoidance configuration + hideOnHit?: boolean; + avoidBaseMark?: boolean; + strategy?: Array<{ + type: 'position' | 'bound'; + position?: string[]; + bound?: object; + }>; + }; + smartInvert: { + // Smart color inversion configuration + mode?: 'lightness' | 'brightness'; + threshold?: number; + fillOpacity?: number; + }; + dataFilter: (data: any[], labelMark: any) => any[]; + customLayoutFunc: (data: any[], labels: any[], region: any) => void; + customOverlapFunc: (labels: any[], labelMark: any) => void; + onAfterOverlapping: (labels: any[]) => void; + animation: object; + animationEnter: object; + animationUpdate: object; + animationExit: object; +} + +interface DataLabelAttrs { + size: { + padding: { + top?: number; + right?: number; + bottom?: number; + left?: number; + }; + }; +} +``` diff --git a/skills/vchart-development-skill/references/type-details/IScrollBarSpec-Type-Definition.md b/skills/vchart-development-skill/references/type-details/IScrollBarSpec-Type-Definition.md new file mode 100644 index 0000000000..bdd9135e15 --- /dev/null +++ b/skills/vchart-development-skill/references/type-details/IScrollBarSpec-Type-Definition.md @@ -0,0 +1,382 @@ +## Core Interface Structure + +```typescript +interface IScrollBarSpec extends IDataFilterComponentSpec, IScrollBarStyle { + filterMode?: IFilterMode; // Data filter mode (default: 'axis') + round?: boolean; // Rounded slider corners + innerPadding?: number | number[] | IPadding; // Scroll bar inner padding + range?: [number, number]; // Current visible range [0, 1] + limitRange?: [number, number]; // Scroll limit range [0, 1] +} +``` + +## Data Filter Component Base (Inherited) + +```typescript +interface IDataFilterComponentSpec extends Omit { + visible?: boolean; // Component visibility (default: true) + orient?: IOrientType; // Component orientation (default: 'left') + width?: 'auto' | number; // Component width (default: 'auto') + height?: 'auto' | number; // Component height (default: 'auto') + field?: string; // Associated mapping field + axisId?: string; // Associated axis ID + axisIndex?: number; // Associated axis index + regionIndex?: number | number[]; // Associated region indices + start?: number; // Start position ratio [0, 1] (default: 0) + end?: number; // End position ratio [0, 1] (default: 1) + startValue?: number | string; // Start data value + endValue?: number | string; // End data value + valueField?: string; // Data filter field + rangeMode?: [string, string]; // Configuration mode matching + autoIndent?: boolean; // Auto indentation + auto?: boolean; // Auto mode (component auto-hide) + zoomLock?: boolean; // Lock selection area size (default: false) + minSpan?: number; // Minimum window size [0, 1] (default: 0) + maxSpan?: number; // Maximum window size [0, 1] (default: 1) + minValueSpan?: number; // Minimum data value span + maxValueSpan?: number; // Maximum data value span + delayType?: IDelayType; // Event trigger delay type + delayTime?: number; // Event trigger delay time (default: 30) + roamZoom?: IRoamZoomSpec | boolean; // Roam zoom mode (default: false) + roamDrag?: IRoamDragSpec | boolean; // Roam drag mode + roamScroll?: IRoamScrollSpec | boolean; // Roam scroll mode + realTime?: boolean; // Real-time view updates (default: true) +} +``` + +## Scroll Bar Style Configuration + +```typescript +interface IScrollBarStyle { + rail?: Omit; // Rail track styling + slider?: Omit; // Slider styling +} +``` + +## Supporting Type Definitions + +### Filter Mode + +```typescript +type IFilterMode = 'filter' | 'axis'; +``` + +### Padding Configuration + +```typescript +interface IPadding { + top?: number; // Top padding + bottom?: number; // Bottom padding + left?: number; // Left padding + right?: number; // Right padding +} +``` + +### Orientation Types + +```typescript +type IOrientType = 'left' | 'top' | 'right' | 'bottom' | 'z'; +``` + +## Complete Interface Definition + +```typescript +interface IScrollBarSpec { + // Component base properties + regionIndex?: number | number[]; + regionId?: string | number | (string | number)[]; + seriesIndex?: number | number[]; + seriesId?: string | number | (string | number)[]; + + // Basic configuration + visible?: boolean; + orient?: 'left' | 'top' | 'right' | 'bottom' | 'z'; + width?: 'auto' | number; + height?: 'auto' | number; + + // Data association + field?: string; + axisId?: string; + axisIndex?: number; + valueField?: string; + + // Range configuration + start?: number; + end?: number; + startValue?: number | string; + endValue?: number | string; + rangeMode?: [string, string]; + range?: [number, number]; + limitRange?: [number, number]; + + // Behavior configuration + filterMode?: 'filter' | 'axis'; + autoIndent?: boolean; + auto?: boolean; + zoomLock?: boolean; + realTime?: boolean; + + // Span constraints + minSpan?: number; + maxSpan?: number; + minValueSpan?: number; + maxValueSpan?: number; + + // Timing configuration + delayType?: 'throttle' | 'debounce'; + delayTime?: number; + + // Roam modes + roamZoom?: boolean | IRoamZoomSpec; + roamDrag?: boolean | IRoamDragSpec; + roamScroll?: boolean | IRoamScrollSpec; + + // Scroll bar specific + round?: boolean; + innerPadding?: + | number + | number[] + | { + top?: number; + bottom?: number; + left?: number; + right?: number; + }; + + // Rail styling + rail?: { + fill?: string; + stroke?: string; + strokeWidth?: number; + strokeOpacity?: number; + fillOpacity?: number; + cornerRadius?: number; + // ... other IRectMarkSpec properties (excluding width/height) + }; + + // Slider styling + slider?: { + fill?: string; + stroke?: string; + strokeWidth?: number; + strokeOpacity?: number; + fillOpacity?: number; + cornerRadius?: number; + // ... other IRectMarkSpec properties (excluding width/height) + }; +} +``` + +## Usage Examples + +### Basic Scroll Bar Configuration + +```typescript +const basicScrollBar: IScrollBarSpec = { + visible: true, + orient: 'bottom', + height: 16, + range: [0.2, 0.8] +}; +``` + +### Styled Scroll Bar with Custom Appearance + +```typescript +const styledScrollBar: IScrollBarSpec = { + visible: true, + orient: 'bottom', + height: 20, + round: true, + innerPadding: [2, 4], + rail: { + fill: '#f1f3f4', + stroke: '#dadce0', + strokeWidth: 1, + cornerRadius: 8 + }, + slider: { + fill: '#4285f4', + stroke: '#1a73e8', + strokeWidth: 1, + cornerRadius: 8, + fillOpacity: 0.8 + } +}; +``` + +### Scroll Bar with Range Limits + +```typescript +const limitedScrollBar: IScrollBarSpec = { + visible: true, + orient: 'right', + width: 18, + range: [0.3, 0.7], + limitRange: [0.1, 0.9], + filterMode: 'axis', + round: true +}; +``` + +### Horizontal Time-Based Scroll Bar + +```typescript +const timeScrollBar: IScrollBarSpec = { + visible: true, + orient: 'bottom', + height: 24, + axisIndex: 0, + field: 'timestamp', + start: 0.1, + end: 0.6, + innerPadding: { top: 4, bottom: 4, left: 8, right: 8 }, + realTime: true +}; +``` + +### Vertical Data Scroll Bar + +```typescript +const verticalScrollBar: IScrollBarSpec = { + visible: true, + orient: 'left', + width: 16, + filterMode: 'filter', + minSpan: 0.05, + maxSpan: 0.8, + rail: { + fill: '#e8eaed', + cornerRadius: 4 + }, + slider: { + fill: '#5f6368', + cornerRadius: 4 + } +}; +``` + +### Auto-Hide Scroll Bar + +```typescript +const autoScrollBar: IScrollBarSpec = { + visible: true, + auto: true, + orient: 'bottom', + height: 12, + round: true, + delayType: 'throttle', + delayTime: 100, + rail: { + fill: 'transparent' + }, + slider: { + fill: 'rgba(0, 0, 0, 0.3)' + } +}; +``` + +### Multi-Padding Scroll Bar + +```typescript +const paddedScrollBar: IScrollBarSpec = { + visible: true, + orient: 'bottom', + height: 28, + innerPadding: [6, 12, 6, 12], // [top, right, bottom, left] + round: true, + range: [0, 0.5] +}; +``` + +## Chart Integration Examples + +### Line Chart with Horizontal Scroll Bar + +```typescript +const lineChartWithScrollBar = { + type: 'line', + data: { values: timeSeriesData }, + xField: 'date', + yField: 'value', + scrollBar: [ + { + orient: 'bottom', + height: 20, + round: true, + range: [0.2, 0.8], + rail: { + fill: '#f0f0f0' + }, + slider: { + fill: '#007acc' + } + } + ] +}; +``` + +### Bar Chart with Vertical Scroll Bar + +```typescript +const barChartWithScrollBar = { + type: 'bar', + data: { values: categoryData }, + xField: 'category', + yField: 'value', + scrollBar: [ + { + orient: 'right', + width: 16, + filterMode: 'axis', + limitRange: [0, 0.7] + } + ] +}; +``` + +### Large Dataset with Performance Scroll Bar + +```typescript +const performanceScrollBar = { + type: 'line', + data: { values: largeDataset }, + xField: 'x', + yField: 'y', + scrollBar: [ + { + orient: 'bottom', + height: 18, + realTime: false, + delayType: 'debounce', + delayTime: 200, + range: [0, 0.1] // Show only 10% initially + } + ] +}; +``` + +### Dual Scroll Bar Configuration + +```typescript +const dualScrollBarChart = { + type: 'scatter', + data: { values: data }, + xField: 'x', + yField: 'y', + scrollBar: [ + { + orient: 'bottom', + axisIndex: 0, + height: 16, + range: [0.2, 0.8] + }, + { + orient: 'right', + axisIndex: 1, + width: 16, + range: [0.1, 0.9] + } + ] +}; +``` diff --git a/skills/vchart-development-skill/references/type-details/ISelectSpec-Type-Definition.md b/skills/vchart-development-skill/references/type-details/ISelectSpec-Type-Definition.md new file mode 100644 index 0000000000..101888d38f --- /dev/null +++ b/skills/vchart-development-skill/references/type-details/ISelectSpec-Type-Definition.md @@ -0,0 +1,321 @@ +## Core Type Structure + +```typescript +interface ISelectSpec extends IBaseInteractionSpec { + enable?: boolean; // Selection interaction toggle (default: true) + mode?: 'single' | 'multiple'; // Selection mode (default: 'single') + trigger?: Trigger; // Selection trigger events + triggerOff?: Trigger | number; // Selection clear events or timeout +} +``` + +## Base Interaction Specification + +```typescript +interface IBaseInteractionSpec { + markIds?: StringOrNumber[]; // Target mark IDs for interaction + markNames?: StringOrNumber[]; // Target mark names for interaction +} +``` + +## Trigger Event Configuration + +```typescript +type Trigger = EventType | EventType[]; + +type EventType = + // Pointer events + | 'pointerdown' + | 'pointerup' + | 'pointerupoutside' + | 'pointertap' + | 'pointerover' + | 'pointermove' + | 'pointerenter' + | 'pointerleave' + | 'pointerout' + + // Mouse events + | 'mousedown' + | 'mouseup' + | 'mouseupoutside' + | 'rightdown' + | 'rightup' + | 'rightupoutside' + | 'click' + | 'dblclick' + | 'mousemove' + | 'mouseover' + | 'mouseout' + | 'mouseenter' + | 'mouseleave' + | 'wheel' + + // Touch events + | 'touchstart' + | 'touchend' + | 'touchendoutside' + | 'touchmove' + | 'touchcancel' + | 'tap' + + // Drag events + | 'dragstart' + | 'drag' + | 'dragenter' + | 'dragleave' + | 'dragover' + | 'dragend' + | 'drop' + + // Gesture events + | 'pan'; +``` + +## Complete Interface Definition + +```typescript +interface ISelectSpec { + // Base interaction properties + markIds?: StringOrNumber[]; // Specific mark IDs to target + markNames?: StringOrNumber[]; // Specific mark names to target + + // Selection-specific properties + enable?: boolean; // Enable/disable selection interaction (default: true) + mode?: 'single' | 'multiple'; // Selection mode (default: 'single') + trigger?: EventType | EventType[]; // Events that trigger selection + triggerOff?: EventType | EventType[] | number; // Events that clear selection or timeout +} +``` + +## Property Descriptions + +### Target Configuration + +```typescript +markIds?: StringOrNumber[]; // Array of mark IDs that should respond to selection +markNames?: StringOrNumber[]; // Array of mark names that should respond to selection +``` + +### Interaction Control + +```typescript +enable?: boolean; // Controls whether selection interaction is active + // Default: true (selection is enabled by default) +``` + +### Selection Mode + +```typescript +mode?: 'single' | 'multiple'; // Controls selection behavior + // 'single': Only one element can be selected at a time + // 'multiple': Multiple elements can be selected simultaneously + // Default: 'single' +``` + +### Event Configuration + +```typescript +trigger?: EventType | EventType[]; // Events that activate selection state + // Default: ['click'] + +triggerOff?: EventType | EventType[] | number; // Events that clear selection or timeout + // EventType: Specific events to clear selection + // number: Timeout in milliseconds to auto-clear + // Default: undefined (no auto-clear) +``` + +## Usage Examples + +### Basic Selection Configuration + +```typescript +// Enable selection with default settings (single mode, click trigger) +const basicSelection: ISelectSpec = { + enable: true +}; + +// Disable selection interaction +const disabledSelection: ISelectSpec = { + enable: false +}; +``` + +### Selection Mode Configuration + +```typescript +// Single selection mode (default) +const singleSelection: ISelectSpec = { + enable: true, + mode: 'single', + trigger: 'click' +}; + +// Multiple selection mode +const multipleSelection: ISelectSpec = { + enable: true, + mode: 'multiple', + trigger: 'click' +}; +``` + +### Custom Trigger Events + +```typescript +// Double-click to select +const doubleClickSelection: ISelectSpec = { + enable: true, + mode: 'single', + trigger: 'dblclick', + triggerOff: 'click' +}; + +// Multiple trigger events +const multiTriggerSelection: ISelectSpec = { + enable: true, + mode: 'multiple', + trigger: ['click', 'tap'], + triggerOff: ['dblclick', 'rightclick'] +}; +``` + +### Timeout-Based Clear + +```typescript +// Auto-clear selection after 3 seconds +const timeoutSelection: ISelectSpec = { + enable: true, + mode: 'single', + trigger: 'click', + triggerOff: 3000 // 3000ms timeout +}; + +// Auto-clear with event fallback +const hybridClearSelection: ISelectSpec = { + enable: true, + mode: 'multiple', + trigger: 'click', + triggerOff: ['dblclick', 5000] // Clear on double-click or after 5 seconds +}; +``` + +### Target-Specific Selection + +```typescript +// Target specific mark IDs +const markIdSelection: ISelectSpec = { + enable: true, + mode: 'multiple', + markIds: ['bar-series-0', 'bar-series-1'], + trigger: 'click', + triggerOff: 'rightclick' +}; + +// Target specific mark names +const markNameSelection: ISelectSpec = { + enable: true, + mode: 'single', + markNames: ['point', 'symbol'], + trigger: 'click' +}; +``` + +### Touch-Optimized Selection + +```typescript +// Touch device configuration +const touchSelection: ISelectSpec = { + enable: true, + mode: 'multiple', + trigger: ['tap', 'touchstart'], + triggerOff: ['touchend', 2000] // Clear on touch end or 2s timeout +}; +``` + +### Chart Integration Examples + +#### Bar Chart with Single Selection + +```typescript +const barChart = { + type: 'bar', + data: { values: data }, + xField: 'category', + yField: 'value', + select: { + enable: true, + mode: 'single', + trigger: 'click', + triggerOff: 'dblclick' + } +}; +``` + +#### Scatter Plot with Multiple Selection + +```typescript +const scatterChart = { + type: 'scatter', + data: { values: data }, + xField: 'x', + yField: 'y', + select: { + enable: true, + mode: 'multiple', + markNames: ['point'], + trigger: 'click', + triggerOff: 3000 // Auto-clear after 3 seconds + } +}; +``` + +#### Series-Level Selection Configuration + +```typescript +const multiSeriesChart = { + type: 'line', + data: { values: data }, + series: [ + { + type: 'line', + xField: 'x', + yField: 'y1', + select: { + enable: true, + mode: 'single', + markIds: ['line-0'], + trigger: 'click' + } + }, + { + type: 'bar', + xField: 'x', + yField: 'y2', + select: { + enable: true, + mode: 'multiple', + markNames: ['bar'], + trigger: 'click', + triggerOff: 'rightclick' + } + } + ] +}; +``` + +#### Mobile-Friendly Configuration + +```typescript +const mobileChart = { + type: 'pie', + data: { values: data }, + categoryField: 'category', + valueField: 'value', + select: { + enable: true, + mode: 'single', + trigger: ['tap', 'touchstart'], + triggerOff: 2000 // Auto-clear after 2 seconds + } +}; +``` diff --git a/skills/vchart-development-skill/references/type-details/ISeriesSpec-Type-Definition.md b/skills/vchart-development-skill/references/type-details/ISeriesSpec-Type-Definition.md new file mode 100644 index 0000000000..69feb2742c --- /dev/null +++ b/skills/vchart-development-skill/references/type-details/ISeriesSpec-Type-Definition.md @@ -0,0 +1,368 @@ +## Core Type Structure + +```typescript +interface ISeriesSpec extends IInteractionSpec { + type: SeriesType; // Required series type + name?: string; // Series display name + id?: StringOrNumber; // User-defined series ID + + // Data configuration + data?: IDataType; // Series-specific data + dataIndex?: number; // Chart data index reference + dataId?: StringOrNumber; // Chart data ID reference + dataKey?: DataKeyType; // Data-mark binding key + + // Layout and association + regionIndex?: number; // Associated region index + regionId?: StringOrNumber; // Associated region ID + seriesField?: string; // Grouping field + seriesStyle?: ISeriesStyle; // Series styling configuration + + // Data processing + stack?: boolean; // Enable stacking + stackValue?: StringOrNumber; // Stack grouping value + totalLabel?: ITotalLabelSpec; // Stack total labels + percent?: boolean; // Percentage processing + stackOffsetSilhouette?: boolean; // Center-axis offset + invalidType?: IInvalidType; // Invalid data handling + + // Visual and interaction + tooltip?: ISeriesTooltipSpec; // Series tooltip configuration + animation?: boolean; // Animation enable/disable + animationThreshold?: number; // Animation auto-disable threshold + support3d?: boolean; // 3D perspective support + morph?: IMorphSeriesSpec; // Morph animation configuration + extensionMark?: (IExtensionMarkSpec> | IExtensionGroupMarkSpec)[]; + zIndex?: number; // Layer order (series config only) +} +``` + +## Interaction Configuration (Extended) + +```typescript +interface IInteractionSpec { + hover?: IHoverSpec | boolean; // Hover interaction configuration + select?: ISelectSpec | boolean; // Selection interaction configuration + interactions?: IInteractionItemSpec[]; // Custom interaction configurations +} +``` + +## Series Types + +```typescript +type SeriesType = keyof typeof SeriesTypeEnum | string; + +enum SeriesTypeEnum { + // Basic chart types + area = 'area', // Area chart + line = 'line', // Line chart + bar = 'bar', // Bar/column chart + scatter = 'scatter', // Scatter plot + pie = 'pie', // Pie chart + + // Range charts + rangeColumn = 'rangeColumn', // Range column chart + rangeArea = 'rangeArea', // Range area chart + + // Specialized charts + radar = 'radar', // Radar chart + rose = 'rose', // Rose chart + funnel = 'funnel', // Funnel chart + waterfall = 'waterfall', // Waterfall chart + heatmap = 'heatmap', // Heat map + boxPlot = 'boxPlot', // Box plot + + // Progress charts + circularProgress = 'circularProgress', // Circular progress + linearProgress = 'linearProgress', // Linear progress + gauge = 'gauge', // Gauge chart + gaugePointer = 'gaugePointer', // Gauge pointer + liquid = 'liquid', // Liquid fill gauge + + // Hierarchical charts + treemap = 'treemap', // Tree map + sunburst = 'sunburst', // Sunburst chart + circlePacking = 'circlePacking', // Circle packing + + // Network and flow charts + sankey = 'sankey', // Sankey diagram + link = 'link', // Link chart + + // Specialized visualizations + wordCloud = 'wordCloud', // Word cloud + correlation = 'correlation', // Correlation matrix + venn = 'venn', // Venn diagram + mosaic = 'mosaic', // Mosaic chart + pictogram = 'pictogram', // Pictogram chart + + // Geographic charts + geo = 'geo', // Geographic series + map = 'map', // Map chart + dot = 'dot' // Dot map +} +``` + +## Data Configuration + +### Data Sources + +```typescript +// Series-specific data +data?: IDataType; // IDataValues | DataView + +// Reference chart data +dataIndex?: number; // Index of chart.data array (default: 0) +dataId?: StringOrNumber; // ID of chart.data source + +// Data-mark binding +dataKey?: DataKeyType; // string | string[] | ((data: Datum, index: number) => string) +``` + +### Invalid Data Handling + +```typescript +type IInvalidType = 'break' | 'link' | 'zero' | 'ignore'; + +// 'break' - Break connection at invalid points +// 'link' - Ignore invalid points, maintain continuity +// 'zero' - Treat invalid points as zero values +// 'ignore' - No special handling +``` + +## Layout and Association + +### Region Association + +```typescript +regionIndex?: number; // Associated region index (default: 0) +regionId?: StringOrNumber; // Associated region ID +``` + +### Series Grouping + +```typescript +seriesField?: string; // Field for series grouping +seriesStyle?: ISeriesStyle; // Styling for grouped series +``` + +## Data Processing Configuration + +### Stacking + +```typescript +stack?: boolean; // Enable data stacking +stackValue?: StringOrNumber; // Stack group identifier +stackOffsetSilhouette?: boolean; // Center-axis offset for stacking +totalLabel?: ITotalLabelSpec; // Labels for stack totals +``` + +### Percentage Processing + +```typescript +percent?: boolean; // Convert values to percentages +``` + +## Animation Configuration + +```typescript +animation?: boolean; // Enable/disable series animation +animationThreshold?: number; // Auto-disable threshold for data length +morph?: IMorphSeriesSpec; // Morph animation between chart types +``` + +## Extension Marks + +```typescript +extensionMark?: (IExtensionMarkSpec> | IExtensionGroupMarkSpec)[]; + +// Available mark types: symbol, rule, line, text, rect, image, path, area, arc, polygon, boxPlot, linkPath, ripple +``` + +## Helper Types + +### Data Key Configuration + +```typescript +type DataKeyType = + | string // Single field name + | string[] // Multiple field names + | ((data: Datum, index: number) => string); // Dynamic key function +``` + +### String or Number Union + +```typescript +type StringOrNumber = string | number; +``` + +## Usage Examples + +### Basic Line Series + +```typescript +const lineSeries: ISeriesSpec = { + type: 'line', + name: 'Sales Trend', + dataIndex: 0, + dataKey: 'id', + regionIndex: 0, + animation: true, + invalidType: 'break' +}; +``` + +### Stacked Bar Series + +```typescript +const stackedBar: ISeriesSpec = { + type: 'bar', + name: 'Revenue by Quarter', + data: { values: quarterlyData }, + stack: true, + stackValue: 'revenue', + totalLabel: { + visible: true, + position: 'top' + }, + seriesField: 'quarter' +}; +``` + +### Grouped Series with Custom Styling + +```typescript +const groupedSeries: ISeriesSpec = { + type: 'bar', + name: 'Sales by Region', + dataIndex: 0, + seriesField: 'region', + seriesStyle: { + normal: { + fill: (datum, context) => context.seriesColor(datum.region) + }, + hover: { + stroke: '#000', + strokeWidth: 2 + } + } +}; +``` + +### Series with Extension Marks + +```typescript +const seriesWithMarks: ISeriesSpec = { + type: 'line', + name: 'Temperature', + dataIndex: 0, + extensionMark: [ + { + type: 'symbol', + dataIndex: 0, + style: { + fill: 'red', + size: 8, + symbolType: 'circle' + } + }, + { + type: 'text', + dataIndex: 0, + style: { + text: datum => `${datum.value}°C`, + fontSize: 12, + dy: -10 + } + } + ] +}; +``` + +### Percentage Area Series + +```typescript +const percentageArea: ISeriesSpec = { + type: 'area', + name: 'Market Share', + dataIndex: 0, + stack: true, + percent: true, + seriesField: 'company', + animation: true, + animationThreshold: 5000 +}; +``` + +### Series with Custom Data Key + +```typescript +const customKeySeries: ISeriesSpec = { + type: 'scatter', + name: 'Customer Analysis', + data: { values: customerData }, + dataKey: (data, index) => `${data.customerId}-${data.timestamp}`, + tooltip: { + visible: true, + mark: { + content: { + key: datum => datum.customerName, + value: datum => `Revenue: ${datum.revenue}` + } + } + } +}; +``` + +### 3D Series Configuration + +```typescript +const series3D: ISeriesSpec = { + type: 'bar', + name: '3D Sales Data', + dataIndex: 0, + support3d: true, + animation: true, + zIndex: 10 +}; +``` + +### Radar Series with Interaction + +```typescript +const radarSeries: ISeriesSpec = { + type: 'radar', + name: 'Performance Metrics', + dataIndex: 0, + seriesField: 'department', + hover: { + enable: true, + highlightPolicy: 'single' + }, + select: { + enable: true, + mode: 'single' + }, + animation: { + appear: { + duration: 1000, + easing: 'cubicOut' + } + } +}; +``` + +### Morph Animation Series + +```typescript +const morphSeries: ISeriesSpec = { + type: 'bar', + name: 'Dynamic Chart', + dataIndex: 0, + morph: { + enable: true, + morphKey: 'category', + duration: 1000 + }, + animation: true +}; +``` diff --git a/skills/vchart-development-skill/references/type-details/ISeriesStyle-Type-Definition.md b/skills/vchart-development-skill/references/type-details/ISeriesStyle-Type-Definition.md new file mode 100644 index 0000000000..edca29b19b --- /dev/null +++ b/skills/vchart-development-skill/references/type-details/ISeriesStyle-Type-Definition.md @@ -0,0 +1,429 @@ +## Overview +`ISeriesStyle` defines the styling configuration for grouped series in VChart. It allows customization of visual styles for different series groups based on the `seriesField` value, enabling distinct styling for each category within the same chart. + +## Core Type Structure + +```typescript +type ISeriesStyle = ISeriesStyleItem[]; +``` + +## Series Style Item Configuration + +```typescript +interface ISeriesStyleItem { + name: string; // Series group name (matches seriesField value) + [markName: string]: { // Mark-specific styling configuration + style?: any; // Visual style properties for the mark + }; +} +``` + +## Expanded Type Definition + +```typescript +// Flattened for better AI understanding +interface ISeriesStyleItem { + name: string; // Required: series group identifier + + // Mark-specific style configurations (all optional) + point?: { style?: ISymbolMarkSpec; }; // Point/symbol mark styling + line?: { style?: ILineMarkSpec; }; // Line mark styling + area?: { style?: IAreaMarkSpec; }; // Area mark styling + bar?: { style?: IRectMarkSpec; }; // Bar/rectangle mark styling + label?: { style?: ITextMarkSpec; }; // Label text styling + [customMarkName: string]: { style?: any; }; // Custom mark styling +} +``` + +## Mark Style Properties + +### Symbol/Point Mark Styling +```typescript +interface ISymbolMarkSpec { + fill?: string; // Fill color + stroke?: string; // Border color + strokeWidth?: number; // Border width + size?: number; // Symbol size + symbolType?: string; // Symbol shape (circle, square, triangle, etc.) + fillOpacity?: number; // Fill transparency + strokeOpacity?: number; // Border transparency +} +``` + +### Line Mark Styling +```typescript +interface ILineMarkSpec { + stroke?: string; // Line color + strokeWidth?: number; // Line width + strokeOpacity?: number; // Line transparency + lineDash?: number[]; // Dash pattern + curveType?: string; // Curve interpolation type +} +``` + +### Area Mark Styling +```typescript +interface IAreaMarkSpec { + fill?: string; // Fill color + fillOpacity?: number; // Fill transparency + stroke?: string; // Border color + strokeWidth?: number; // Border width + curveType?: string; // Curve interpolation type +} +``` + +### Rectangle/Bar Mark Styling +```typescript +interface IRectMarkSpec { + fill?: string; // Fill color + stroke?: string; // Border color + strokeWidth?: number; // Border width + fillOpacity?: number; // Fill transparency + strokeOpacity?: number; // Border transparency + cornerRadius?: number | number[]; // Corner radius +} +``` + +### Text/Label Mark Styling +```typescript +interface ITextMarkSpec { + fill?: string; // Text color + fontSize?: number; // Font size + fontFamily?: string; // Font family + fontWeight?: string | number; // Font weight + textAlign?: string; // Horizontal alignment + textBaseline?: string; // Vertical alignment +} +``` + +## Usage Examples + +### Basic Series Styling +```typescript +const seriesStyle: ISeriesStyle = [ + { + name: 'Desktop', + point: { + style: { + fill: '#1f77b4', + size: 8, + symbolType: 'circle' + } + }, + line: { + style: { + stroke: '#1f77b4', + strokeWidth: 2 + } + } + }, + { + name: 'Mobile', + point: { + style: { + fill: '#ff7f0e', + size: 8, + symbolType: 'square' + } + }, + line: { + style: { + stroke: '#ff7f0e', + strokeWidth: 2, + lineDash: [5, 5] + } + } + } +]; +``` + +### Bar Chart Series Styling +```typescript +const barSeriesStyle: ISeriesStyle = [ + { + name: 'Q1', + bar: { + style: { + fill: '#5470c6', + stroke: '#4c63b6', + strokeWidth: 1, + cornerRadius: [4, 4, 0, 0] + } + }, + label: { + style: { + fill: '#ffffff', + fontSize: 12, + fontWeight: 'bold' + } + } + }, + { + name: 'Q2', + bar: { + style: { + fill: '#91cc75', + stroke: '#82bb6a', + strokeWidth: 1, + cornerRadius: [4, 4, 0, 0] + } + }, + label: { + style: { + fill: '#333333', + fontSize: 12, + fontWeight: 'bold' + } + } + } +]; +``` + +### Area Chart Series Styling +```typescript +const areaSeriesStyle: ISeriesStyle = [ + { + name: 'Revenue', + area: { + style: { + fill: 'rgba(84, 112, 198, 0.3)', + stroke: '#5470c6', + strokeWidth: 2, + curveType: 'monotone' + } + }, + point: { + style: { + fill: '#5470c6', + size: 6, + symbolType: 'circle' + } + } + }, + { + name: 'Profit', + area: { + style: { + fill: 'rgba(145, 204, 117, 0.3)', + stroke: '#91cc75', + strokeWidth: 2, + curveType: 'monotone' + } + }, + point: { + style: { + fill: '#91cc75', + size: 6, + symbolType: 'diamond' + } + } + } +]; +``` + +### Multi-Mark Series Styling +```typescript +const complexSeriesStyle: ISeriesStyle = [ + { + name: 'Primary', + bar: { + style: { + fill: '#1f77b4', + fillOpacity: 0.8, + stroke: '#0d5aa7', + strokeWidth: 1 + } + }, + label: { + style: { + fill: '#ffffff', + fontSize: 11, + fontWeight: 'bold', + textAlign: 'center' + } + }, + point: { + style: { + fill: '#1f77b4', + size: 5, + symbolType: 'circle', + stroke: '#ffffff', + strokeWidth: 2 + } + } + }, + { + name: 'Secondary', + bar: { + style: { + fill: '#ff7f0e', + fillOpacity: 0.8, + stroke: '#e6670a', + strokeWidth: 1 + } + }, + label: { + style: { + fill: '#333333', + fontSize: 11, + fontWeight: 'normal', + textAlign: 'center' + } + }, + point: { + style: { + fill: '#ff7f0e', + size: 5, + symbolType: 'triangle', + stroke: '#ffffff', + strokeWidth: 2 + } + } + } +]; +``` + +### Custom Mark Styling +```typescript +const customMarkStyle: ISeriesStyle = [ + { + name: 'Category A', + customSymbol: { + style: { + fill: '#e74c3c', + size: 10, + symbolType: 'star' + } + }, + customLine: { + style: { + stroke: '#e74c3c', + strokeWidth: 3, + lineDash: [10, 5] + } + } + }, + { + name: 'Category B', + customSymbol: { + style: { + fill: '#3498db', + size: 10, + symbolType: 'cross' + } + }, + customLine: { + style: { + stroke: '#3498db', + strokeWidth: 3, + lineDash: [5, 10] + } + } + } +]; +``` + +### Gradient and Advanced Styling +```typescript +const advancedSeriesStyle: ISeriesStyle = [ + { + name: 'Gradient Series', + bar: { + style: { + fill: { + gradient: 'linear', + x0: 0, y0: 0, x1: 0, y1: 1, + stops: [ + { offset: 0, color: '#667eea' }, + { offset: 1, color: '#764ba2' } + ] + }, + stroke: '#4c63b6', + strokeWidth: 1 + } + }, + label: { + style: { + fill: '#ffffff', + fontSize: 12, + fontWeight: 'bold', + textAlign: 'center', + textBaseline: 'middle' + } + } + } +]; +``` + +### Chart Configuration Integration +```typescript +// Usage in chart specification +const chartSpec = { + type: 'line', + data: { values: data }, + xField: 'date', + yField: 'value', + seriesField: 'category', // Enables series grouping + seriesStyle: [ // Apply ISeriesStyle configuration + { + name: 'Desktop', + line: { + style: { + stroke: '#1f77b4', + strokeWidth: 2 + } + }, + point: { + style: { + fill: '#1f77b4', + size: 6 + } + } + }, + { + name: 'Mobile', + line: { + style: { + stroke: '#ff7f0e', + strokeWidth: 2, + lineDash: [5, 5] + } + }, + point: { + style: { + fill: '#ff7f0e', + size: 6, + symbolType: 'square' + } + } + } + ] +}; +``` + +## Mark Name Reference + +Common mark names that can be styled: +- `point` - Symbol/point marks +- `line` - Line marks +- `area` - Area marks +- `bar` - Rectangle/bar marks +- `label` - Text label marks +- Custom mark names as defined in series configuration + +## Type Relationships + +```typescript +// Series specification with style +interface ISeriesSpec { + seriesField?: string; // Field that creates groups + seriesStyle?: ISeriesStyle; // Styling for each group + // ... other properties +} + +// Chart specification with global series style +interface IChartSpec { + seriesStyle?: ISeriesStyle; // Global series styling + // ... other properties +} +``` diff --git a/skills/vchart-development-skill/references/type-details/IStackCornerRadiusCallback-Type-Definition.md b/skills/vchart-development-skill/references/type-details/IStackCornerRadiusCallback-Type-Definition.md new file mode 100644 index 0000000000..09b32e75ea --- /dev/null +++ b/skills/vchart-development-skill/references/type-details/IStackCornerRadiusCallback-Type-Definition.md @@ -0,0 +1,302 @@ +## IStackCornerRadiusCallback 配置规范 + +```typescript +export type IStackCornerRadiusCallback = ( + attr: IRectGraphicAttribute, + datum: Datum, + ctx: ISeriesMarkAttributeContext +) => number | number[]; +``` + +## 函数参数说明 + +### 图形属性参数 (IRectGraphicAttribute) + +包含矩形图元的完整图形属性信息： + +```typescript +// IRectGraphicAttribute 来自 @visactor/vrender-core +interface IRectGraphicAttribute { + // 位置属性 + x?: number; + y?: number; + z?: number; + + // 尺寸属性 + width?: number; + height?: number; + + // 圆角属性 + cornerRadius?: number | number[]; + + // 填充样式 + fill?: string | IGradient; + fillOpacity?: number; + + // 描边样式 + stroke?: string | IGradient; + strokeOpacity?: number; + lineWidth?: number; + lineDash?: number[]; + lineDashOffset?: number; + lineCap?: 'butt' | 'round' | 'square'; + lineJoin?: 'arcs' | 'bevel' | 'miter' | 'miter-clip' | 'round'; + + // 显示属性 + visible?: boolean; + opacity?: number; + zIndex?: number; + + // 变换属性 + scaleX?: number; + scaleY?: number; + angle?: number; + + // 其他渲染属性 + blur?: number; + shadowBlur?: number; + shadowColor?: string; + shadowOffsetX?: number; + shadowOffsetY?: number; + + [key: string]: any; +} +``` + +### 数据参数 (Datum) + +当前数据项的完整数据对象： + +```typescript +export type Datum = Record; + +// 典型的柱图数据结构示例 +interface TypicalBarDatum { + // 分类字段 + category?: string | number; + // 数值字段 + value?: number; + // 系列字段 + series?: string | number; + // 堆叠字段 + stack?: string | number; + // 其他自定义字段 + [key: string]: any; +} +``` + +### 上下文参数 (ISeriesMarkAttributeContext) + +系列图元属性上下文，提供尺度和颜色等辅助信息： + +```typescript +export interface ISeriesMarkAttributeContext extends IModelMarkAttributeContext { + /** 通用的默认属性值获取，比如color，如果有散点图有sizeScale，则可以获取 size */ + globalScale: (scaleKey: string, value: string | number) => unknown; + + /** 传入seriesField值，获取对应的颜色。如果传入 null，返回的是当前系列对应的第一个颜色值 */ + seriesColor: (seriesValue?: string | number) => string; + + /** 获取当前的 region */ + getRegion: () => IRegion; +} + +export interface IModelMarkAttributeContext { + [key: string]: unknown; +} +``` + +## 返回值类型 + +回调函数支持两种返回值类型： + +### 统一圆角 + +```typescript +type UniformCornerRadius = number; +// 示例：所有角使用相同圆角值 +return 8; // 所有角 8px 圆角 +``` + +### 分别设置圆角 + +```typescript +type IndividualCornerRadius = number[]; +// 数组顺序：[上左, 上右, 下右, 下左] +return [8, 8, 0, 0]; // 上方圆角 8px，下方直角 +``` + +## 动画参数类型 (IBarAnimationParams) + +用于堆叠柱图动画的辅助参数类型： + +```typescript +export interface IBarAnimationParams { + /** x轴字段 */ + xField: string; + /** y轴字段 */ + yField: string; + /** 方向类型 */ + direction: DirectionType; + /** 生长起始点计算函数 */ + growFrom: () => number; +} + +export type DirectionType = 'vertical' | 'horizontal'; +``` + +## 完整类型定义 + +```typescript +export type IStackCornerRadiusCallback = ( + // 矩形图形属性 + attr: { + x?: number; + y?: number; + width?: number; + height?: number; + cornerRadius?: number | number[]; + fill?: string | IGradient; + fillOpacity?: number; + stroke?: string | IGradient; + strokeOpacity?: number; + lineWidth?: number; + visible?: boolean; + opacity?: number; + zIndex?: number; + scaleX?: number; + scaleY?: number; + angle?: number; + [key: string]: any; + }, + + // 数据对象 + datum: Record, + + // 系列上下文 + ctx: { + globalScale: (scaleKey: string, value: string | number) => unknown; + seriesColor: (seriesValue?: string | number) => string; + getRegion: () => IRegion; + [key: string]: unknown; + } +) => number | number[]; +``` + +## 使用示例 + +### 基于数据值的动态圆角 + +```typescript +const dynamicCornerRadius: IStackCornerRadiusCallback = (attr, datum, ctx) => { + const value = datum.value as number; + + // 根据数值大小决定圆角 + if (value > 100) { + return 12; // 大值使用较大圆角 + } else if (value > 50) { + return 8; // 中值使用中等圆角 + } else { + return 4; // 小值使用较小圆角 + } +}; +``` + +### 基于位置的条件圆角 + +```typescript +const positionBasedRadius: IStackCornerRadiusCallback = (attr, datum, ctx) => { + const isTop = datum.isTopOfStack as boolean; + const isBottom = datum.isBottomOfStack as boolean; + + // 堆叠顶部和底部使用不同圆角 + if (isTop && isBottom) { + return [8, 8, 8, 8]; // 单独柱子，四角圆角 + } else if (isTop) { + return [8, 8, 0, 0]; // 堆叠顶部，上方圆角 + } else if (isBottom) { + return [0, 0, 8, 8]; // 堆叠底部，下方圆角 + } else { + return 0; // 中间部分，无圆角 + } +}; +``` + +### 基于系列的差异化圆角 + +```typescript +const seriesBasedRadius: IStackCornerRadiusCallback = (attr, datum, ctx) => { + const seriesValue = datum.series as string; + const color = ctx.seriesColor(seriesValue); + + // 根据系列颜色亮度调整圆角 + const brightness = getBrightness(color); + + if (brightness > 150) { + return 12; // 亮色系列使用大圆角 + } else { + return 6; // 暗色系列使用小圆角 + } +}; +``` + +### 基于图形尺寸的自适应圆角 + +```typescript +const sizeAdaptiveRadius: IStackCornerRadiusCallback = (attr, datum, ctx) => { + const width = attr.width || 0; + const height = attr.height || 0; + + // 基于柱子尺寸计算圆角 + const minSize = Math.min(width, height); + const radius = Math.min(minSize * 0.2, 16); // 最大不超过16px + + return Math.max(radius, 2); // 最小2px圆角 +}; +``` + +### 复杂条件的圆角配置 + +```typescript +const complexRadius: IStackCornerRadiusCallback = (attr, datum, ctx) => { + const value = datum.value as number; + const category = datum.category as string; + const isHighlight = datum.highlight as boolean; + + // 高亮状态的特殊处理 + if (isHighlight) { + return [16, 16, 4, 4]; + } + + // 不同分类使用不同圆角策略 + switch (category) { + case 'premium': + return value > 200 ? [12, 12, 0, 0] : [8, 8, 0, 0]; + case 'standard': + return value > 100 ? 8 : 4; + case 'basic': + return 2; + default: + return 0; + } +}; +``` + +### 基于区域位置的圆角 + +```typescript +const regionBasedRadius: IStackCornerRadiusCallback = (attr, datum, ctx) => { + const region = ctx.getRegion(); + const regionWidth = region.getLayoutRect().width; + const regionHeight = region.getLayoutRect().height; + + // 根据图表区域大小调整圆角 + if (regionWidth > 800 && regionHeight > 600) { + return 16; // 大图表使用大圆角 + } else if (regionWidth > 400 && regionHeight > 300) { + return 8; // 中图表使用中圆角 + } else { + return 4; // 小图表使用小圆角 + } +}; +``` diff --git a/skills/vchart-development-skill/references/type-details/ISymbolMarkSpec-Type-Definition.md b/skills/vchart-development-skill/references/type-details/ISymbolMarkSpec-Type-Definition.md new file mode 100644 index 0000000000..79efec187a --- /dev/null +++ b/skills/vchart-development-skill/references/type-details/ISymbolMarkSpec-Type-Definition.md @@ -0,0 +1,266 @@ +# ISymbolMarkSpec Type Definition + +## Overview + +`ISymbolMarkSpec` is a symbol mark specification interface in VChart, extending `IFillMarkSpec` with symbol-specific properties for creating geometric shapes, icons, and point visualizations. It provides comprehensive symbol rendering capabilities including shape types, sizing, positioning offsets, and scaling transformations for scatter plots, line chart points, and custom symbol visualizations. + +## Type Definition + +```typescript +interface ISymbolMarkSpec { + // Symbol-specific properties + dx?: number; + dy?: number; + size?: number | number[]; + shape?: ShapeType | string; + symbolType?: ShapeType | string; + scaleX?: number; + scaleY?: number; + + // Inherited from IFillMarkSpec + fill?: VisualType | IGradient | false | IColorKey; + fillOpacity?: number; + background?: IColor | HTMLImageElement | HTMLCanvasElement | null; + + // Inherited from ICommonSpec + visible?: boolean; + x?: number; + y?: number; + z?: number; + stroke?: string | IGradient | false | (number | boolean)[] | IColorKey | null; + strokeOpacity?: number; + opacity?: number; + lineWidth?: number; + lineDash?: number[]; + lineDashOffset?: number; + cursor?: Cursor; + zIndex?: number; + angle?: number; + anchor?: [number, number]; + scaleCenter?: [number | string, number | string]; + alpha?: number; + beta?: number; + anchor3d?: [number, number]; + pickMode?: 'accurate' | 'imprecise' | 'custom'; + boundsMode?: 'accurate' | 'imprecise'; + pickStrokeBuffer?: number; + texture?: TextureType | string; + textureColor?: string; + textureSize?: number; + texturePadding?: number; + outerBorder?: IBorder; + innerBorder?: IBorder; + html?: IMarkHtmlSpec; + [key: string]: any; +} +``` + +This interface provides comprehensive symbol rendering capabilities including geometric shapes, custom shapes, sizing controls, positioning offsets, and scaling transformations. + +## Core Configuration Properties + +### Texture Configuration (Inherited from ICommonSpec) + +```typescript +type TextureType = 'circle' | 'dimond' | 'rect' | 'vertical-line' | 'horizontal-line' | 'bias-lr' | 'bias-rl' | 'grid'; +``` + +### Border Configuration (Inherited from ICommonSpec) + +```typescript +interface IBorder { + /** Distance from shape edge */ + distance: number | string; + + /** Border color */ + stroke?: string | IGradient; + + /** Border opacity */ + strokeOpacity?: number; + + /** Border width */ + lineWidth?: number; + + /** Border dash pattern */ + lineDash?: number[]; + + /** Border dash offset */ + lineDashOffset?: number; +} +``` + +## Visual Type System + +### Visual Mapping Types + +```typescript +type VisualType = ValueType | FunctionType | IVisual; + +type ValueType = T; +type FunctionType = (datum: Datum, context: IModelMarkAttributeContext, source?: DataView) => T; + +type IVisual = IVisualSpecStyle | IVisualScale; + +interface IVisualSpecStyle extends IVisualSpecBase { + /** Data field for mapping */ + field?: string; +} + +interface IVisualScale { + /** Scale ID reference */ + scale: string; + + /** Data field for mapping */ + field?: string; + + /** Domain change strategy @default 'none' */ + changeDomain?: 'none' | 'replace' | 'expand'; +} +``` + +### Gradient Types + +```typescript +type IGradient = IGradientLinear | IGradientRadial | IGradientConical; + +interface IGradientLinear { + gradient: 'linear'; + x0?: GradientPropValue; // Start x (0-1) + y0?: GradientPropValue; // Start y (0-1) + x1?: GradientPropValue; // End x (0-1) + y1?: GradientPropValue; // End y (0-1) + stops: GradientStop[]; +} + +interface IGradientRadial { + gradient: 'radial'; + r0?: GradientPropValue; // Start radius + x0?: GradientPropValue; // Start x + y0?: GradientPropValue; // Start y + x1?: GradientPropValue; // End x + y1?: GradientPropValue; // End y + r1?: GradientPropValue; // End radius + stops: GradientStop[]; +} + +interface IGradientConical { + gradient: 'conical'; + x?: GradientPropValue; // Center x + y?: GradientPropValue; // Center y + startAngle?: GradientPropValue; // Start angle + endAngle?: GradientPropValue; // End angle + stops: GradientStop[]; +} + +type GradientStop = { + offset: GradientPropValue; // 0-1 offset + color?: GradientPropValue; // Color + opacity?: number; // Opacity +}; + +type GradientPropValue = ValueType | FunctionType; +``` + +## Dependency Type Definitions + +### Shape Types + +```typescript +type ShapeType = SymbolType; // From @visactor/vrender-core + +// Built-in shape types include: +// Geometric shapes: +// - 'circle': Circle +// - 'square': Square +// - 'rect': Rectangle +// - 'diamond': Diamond +// - 'triangle': Triangle +// - 'triangleForward': Right arrow +// - 'star': Star shape +// - 'pentagon': Pentagon +// - 'cardioid': Heart shape + +// Custom shapes: +// - Custom SVG path strings +// - Custom shape functions +// - Image URLs or data URIs +``` + +### Theme and Token Types + +```typescript +interface IColorKey { + // Theme color key interface +} + +interface IColor { + // VRender color interface +} +``` + +### HTML Overlay Types + +```typescript +type IMarkHtmlSpec = Partial; + +interface IGraphicStyle { + html?: { + // HTML overlay configuration + }; +} +``` + +### Cursor Types + +```typescript +type Cursor = + | 'auto' + | 'default' + | 'none' + | 'context-menu' + | 'help' + | 'pointer' + | 'progress' + | 'wait' + | 'cell' + | 'crosshair' + | 'text' + | 'vertical-text' + | 'alias' + | 'copy' + | 'move' + | 'no-drop' + | 'not-allowed' + | 'grab' + | 'grabbing' + | 'e-resize' + | 'n-resize' + | 'ne-resize' + | 'nw-resize' + | 's-resize' + | 'se-resize' + | 'sw-resize' + | 'w-resize' + | 'ew-resize' + | 'ns-resize' + | 'nesw-resize' + | 'nwse-resize' + | 'col-resize' + | 'row-resize' + | 'all-scroll' + | 'zoom-in' + | 'zoom-out'; +``` + +### Context Types + +```typescript +interface IModelMarkAttributeContext { + // Mark attribute context for function evaluation +} + +interface Datum { + // Data record interface + [key: string]: any; +} +``` diff --git a/skills/vchart-development-skill/references/type-details/ITextMarkSpec-Type-Definition.md b/skills/vchart-development-skill/references/type-details/ITextMarkSpec-Type-Definition.md new file mode 100644 index 0000000000..dba168cd90 --- /dev/null +++ b/skills/vchart-development-skill/references/type-details/ITextMarkSpec-Type-Definition.md @@ -0,0 +1,323 @@ +## Overview + +```typescript +interface ITextMarkSpec extends IFillMarkSpec { + // Text-specific properties + text?: string | number | string[] | number[]; // Text content + dx?: number; // X direction offset + dy?: number; // Y direction offset + + // Typography properties + fontSize?: number | ITokenKey; // Font size + textAlign?: TextAlign; // Horizontal alignment + textBaseline?: TextBaseLine; // Vertical alignment + fontFamily?: string; // Font family + fontWeight?: FontWeight; // Font weight + fontStyle?: FontStyle; // Font style + + // Text overflow and layout + maxLineWidth?: number; // Maximum line width + ellipsis?: string; // Ellipsis character + suffixPosition?: 'start' | 'end' | 'middle'; // Ellipsis position + lineHeight?: number | string | ITokenKey; // Line height + direction?: 'horizontal' | 'vertical'; // Layout direction + wordBreak?: 'break-word' | 'break-all' | 'keep-all'; // Word breaking + heightLimit?: number; // Height limit + lineClamp?: number; // Line count limit + whiteSpace?: 'normal' | 'no-wrap'; // Whitespace handling + + // Text decorations + underline?: boolean; // Underline decoration + underlineDash?: number[]; // Underline dash style + underlineOffset?: number; // Underline offset + lineThrough?: boolean; // Line-through decoration + + // Interactive features + poptip?: PopTipAttributes; // PopTip configuration + + // Inherited from IFillMarkSpec + fill?: VisualType | IGradient | false | IColorKey; + fillOpacity?: number; + background?: IColor | HTMLImageElement | HTMLCanvasElement | null; + /** + * 背景圆角半径 + */ + backgroundCornerRadius: number | number[]; + /** + * 背景透明度 + */ + backgroundOpacity: number; + + // Inherited from ICommonSpec + visible?: boolean; // Visibility + x?: number; // X coordinate + y?: number; // Y coordinate + z?: number; // Z coordinate (3D) + stroke?: string | IGradient | false | (number | boolean)[] | IColorKey | null; + strokeOpacity?: number; // Stroke opacity + opacity?: number; // Overall opacity + lineWidth?: number; // Stroke width + lineDash?: number[]; // Dash pattern + lineDashOffset?: number; // Dash offset + cursor?: Cursor; // Mouse cursor + zIndex?: number; // Layer index + angle?: number; // Rotation angle + anchor?: [number, number]; // Anchor point + scaleX?: number; // X-scale factor + scaleY?: number; // Y-scale factor + scaleCenter?: [number | string, number | string]; // Scale center + + // 3D properties + alpha?: number; // X-direction rotation + beta?: number; // Y-direction rotation + anchor3d?: [number, number]; // 3D anchor point + + // Interaction properties + pickMode?: 'accurate' | 'imprecise' | 'custom'; + boundsMode?: 'accurate' | 'imprecise'; + pickStrokeBuffer?: number; // Stroke pick buffer @since 1.7.3 + + // Texture properties + texture?: TextureType | string; // Texture type + textureColor?: string; // Texture color + textureSize?: number; // Texture size + texturePadding?: number; // Texture padding + + // Border properties + outerBorder?: IBorder; // Outer border + innerBorder?: IBorder; // Inner border + + // HTML overlay + html?: IMarkHtmlSpec; // HTML overlay @since 1.10.0 +} +``` + +## Core Configuration Properties + +### TextureType + +```typescript +type TextureType = 'circle' | 'dimond' | 'rect' | 'vertical-line' | 'horizontal-line' | 'bias-lr' | 'bias-rl' | 'grid'; +``` + +### Border Configuration (Inherited from ICommonSpec) + +```typescript +interface IBorder { + /** Distance from shape edge */ + distance: number | string; + + /** Border color */ + stroke?: string | IGradient; + + /** Border opacity */ + strokeOpacity?: number; + + /** Border width */ + lineWidth?: number; + + /** Border dash pattern */ + lineDash?: number[]; + + /** Border dash offset */ + lineDashOffset?: number; +} +``` + +## Visual Type System + +### Visual Mapping Types + +```typescript +type VisualType = ValueType | FunctionType | IVisual; + +type ValueType = T; +type FunctionType = (datum: Datum, context: IModelMarkAttributeContext, source?: DataView) => T; + +type IVisual = IVisualSpecStyle | IVisualScale; + +interface IVisualSpecStyle extends IVisualSpecBase { + /** Data field for mapping */ + field?: string; +} + +interface IVisualScale { + /** Scale ID reference */ + scale: string; + + /** Data field for mapping */ + field?: string; + + /** Domain change strategy @default 'none' */ + changeDomain?: 'none' | 'replace' | 'expand'; +} +``` + +### Gradient Types + +```typescript +type IGradient = IGradientLinear | IGradientRadial | IGradientConical; + +interface IGradientLinear { + gradient: 'linear'; + x0?: GradientPropValue; // Start x (0-1) + y0?: GradientPropValue; // Start y (0-1) + x1?: GradientPropValue; // End x (0-1) + y1?: GradientPropValue; // End y (0-1) + stops: GradientStop[]; +} + +interface IGradientRadial { + gradient: 'radial'; + r0?: GradientPropValue; // Start radius + x0?: GradientPropValue; // Start x + y0?: GradientPropValue; // Start y + x1?: GradientPropValue; // End x + y1?: GradientPropValue; // End y + r1?: GradientPropValue; // End radius + stops: GradientStop[]; +} + +interface IGradientConical { + gradient: 'conical'; + x?: GradientPropValue; // Center x + y?: GradientPropValue; // Center y + startAngle?: GradientPropValue; // Start angle + endAngle?: GradientPropValue; // End angle + stops: GradientStop[]; +} + +type GradientStop = { + offset: GradientPropValue; // 0-1 offset + color?: GradientPropValue; // Color + opacity?: number; // Opacity +}; + +type GradientPropValue = ValueType | FunctionType; +``` + +## Dependency Type Definitions + +### Typography Types + +```typescript +// 原始类型定义 +type TextAlign = TextAlignType; +type TextBaseLine = TextBaselineType; + +// 解析后的具体类型 +type TextAlignType = 'left' | 'center' | 'right' | 'start' | 'end' | 'justify'; +type TextBaselineType = 'top' | 'bottom' | 'middle' | 'alphabetic' | 'hanging' | 'ideographic'; + +type FontStyle = 'normal' | 'italic' | 'oblique' | string; +type FontWeight = 'normal' | 'bold' | 'lighter' | 'bolder' | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900; +``` + +**TextAlignType 文字水平对齐：** + +- `'left'`: 左对齐 +- `'center'`: 居中对齐 +- `'right'`: 右对齐 +- `'start'`: 起始对齐（在LTR中等同于左对齐，在RTL中等同于右对齐） +- `'end'`: 结束对齐（在LTR中等同于右对齐，在RTL中等同于左对齐） +- `'justify'`: 两端对齐 + +**TextBaselineType 文字垂直对齐：** + +- `'top'`: 顶部对齐 +- `'bottom'`: 底部对齐 +- `'middle'`: 中心对齐 +- `'alphabetic'`: 字母基线对齐（默认值） +- `'hanging'`: 悬挂基线对齐 +- `'ideographic'`: 表意文字基线对齐 + +### Theme and Token Types + +```typescript +interface IColorKey { + // Theme color key interface +} + +interface ITokenKey { + // Theme token key interface +} + +interface IColor { + // VRender color interface +} +``` + +### Interactive Types + +```typescript +interface PopTipAttributes { + // PopTip configuration from @visactor/vrender-components +} +``` + +### HTML Overlay Types + +```typescript +type IMarkHtmlSpec = Partial; + +interface IGraphicStyle { + html?: { + // HTML overlay configuration + }; +} +``` + +### Cursor Types + +```typescript +type Cursor = + | 'auto' + | 'default' + | 'none' + | 'context-menu' + | 'help' + | 'pointer' + | 'progress' + | 'wait' + | 'cell' + | 'crosshair' + | 'text' + | 'vertical-text' + | 'alias' + | 'copy' + | 'move' + | 'no-drop' + | 'not-allowed' + | 'grab' + | 'grabbing' + | 'e-resize' + | 'n-resize' + | 'ne-resize' + | 'nw-resize' + | 's-resize' + | 'se-resize' + | 'sw-resize' + | 'w-resize' + | 'ew-resize' + | 'ns-resize' + | 'nesw-resize' + | 'nwse-resize' + | 'col-resize' + | 'row-resize' + | 'all-scroll' + | 'zoom-in' + | 'zoom-out'; +``` + +### Context Types + +```typescript +interface IModelMarkAttributeContext { + // Mark attribute context for function evaluation +} + +interface Datum { + // Data record interface + [key: string]: any; +} +``` diff --git a/skills/vchart-development-skill/references/type-details/ITheme-Type-Definition.md b/skills/vchart-development-skill/references/type-details/ITheme-Type-Definition.md new file mode 100644 index 0000000000..9827c5e34d --- /dev/null +++ b/skills/vchart-development-skill/references/type-details/ITheme-Type-Definition.md @@ -0,0 +1,462 @@ +## ITheme 配置规范 + +ITheme 定义了 VChart 中主题系统的完整配置接口，支持全局样式、色彩方案、图元样式、系列样式和组件样式的统一管理。 + +## 核心接口结构 + +```typescript +export interface ITheme { + // 主题信息 + name?: string; + description?: string; + type?: 'light' | 'dark'; + + // 图表层级样式 + background?: IColor | IColorKey; + padding?: ILayoutPaddingSpec; + fontFamily?: string | ITokenKey; + token?: TokenMap; + + // 色板配置 + colorScheme?: IThemeColorScheme; + + // 图元样式配置 + mark?: IGlobalMarkThemeByType; + markByName?: IGlobalMarkThemeByName; + + // 系列样式配置 + series?: ISeriesTheme; + animationThreshold?: number; + + // 组件样式配置 + component?: IComponentTheme; + + // 图表类型特定配置 + chart?: Record>; +} +``` + +## 主题基础信息 + +定义主题的标识和类型信息： + +```typescript +interface IThemeBasicInfo { + /** 主题命名 */ + name?: string; + + /** 主题描述 */ + description?: string; + + /** + * 主题类别：亮色或者暗色 + * 该配置用于指定该主题需要 merge 的是内置的亮色主题还是暗色主题 + */ + type?: 'light' | 'dark'; +} +``` + +## 图表全局样式 + +定义图表层级的全局样式属性： + +```typescript +interface IThemeGlobalStyle { + /** 图表背景色 */ + background?: IColor | IColorKey; + + /** 图表内边距 */ + padding?: ILayoutPaddingSpec; + + /** 图表字体配置 */ + fontFamily?: string | ITokenKey; + + /** + * 用户自定义的语义化 token，可以在主题中以 ITokenKey 的形式引用并作为常量赋值 + * @since 1.10.0 + */ + token?: TokenMap; +} +``` + +## 色彩方案配置 + +定义全局和系列特定的色彩方案： + +```typescript +export type IThemeColorScheme = { + /** 必选的默认色板 */ + default: ColorScheme; +} & Partial> & + Partial>; + +export type ColorScheme = Array | ProgressiveDataScheme | IColorSchemeStruct; + +export type IColorSchemeStruct = { + /** 数据色板 */ + dataScheme: Array | ProgressiveDataScheme; + + /** 语义色板 */ + palette?: { + /** 主色调（可选） */ + bandColor?: ColorSchemeItem; + /** 背景颜色（可选） */ + backgroundColor?: ColorSchemeItem; + /** 其他的语义化色值 */ + [key: string]: ColorSchemeItem; + }; +}; +``` + +## 图元样式配置 + +### 按类型索引的图元样式 +```typescript +export interface IGlobalMarkThemeByType { + [MarkTypeEnum.line]?: Partial>; + [MarkTypeEnum.symbol]?: Partial>; + [MarkTypeEnum.area]?: Partial>; + [MarkTypeEnum.rect]?: Partial>; + [MarkTypeEnum.arc]?: Partial>; + [MarkTypeEnum.text]?: Partial>; + [MarkTypeEnum.path]?: Partial>; +} +``` + +### 按名称索引的图元样式 +```typescript +export interface IGlobalMarkThemeByName { + /** used in lineSeries, areaSeries, radarSeries, etc. */ + line?: Partial>; + /** used in lineSeries, areaSeries, radarSeries, scatterSeries etc. */ + point?: Partial>; + /** used in lineSeries, areaSeries, radarSeries, etc. */ + area?: Partial>; + /** used in barSeries, rangeColumnSeries etc. */ + bar?: Partial>; + /** used in many series */ + label?: Partial>; + + [markName: string]: Partial>; +} +``` + +## 系列样式配置 + +定义各种图表系列的主题样式： + +```typescript +export interface ISeriesTheme { + [SeriesTypeEnum.bar]?: IBarSeriesTheme; + [SeriesTypeEnum.line]?: ILineSeriesTheme; + [SeriesTypeEnum.area]?: IAreaSeriesTheme; + [SeriesTypeEnum.pie]?: IPieSeriesTheme; + [SeriesTypeEnum.scatter]?: IScatterSeriesTheme; + [SeriesTypeEnum.radar]?: IRadarSeriesTheme; + [SeriesTypeEnum.rose]?: IRoseSeriesTheme; + [SeriesTypeEnum.funnel]?: IFunnelSeriesTheme; + [SeriesTypeEnum.gauge]?: IGaugeSeriesTheme; + [SeriesTypeEnum.sankey]?: ISankeySeriesTheme; + [SeriesTypeEnum.treemap]?: ITreemapSeriesTheme; + [SeriesTypeEnum.wordCloud]?: IWordCloudSeriesTheme; + [SeriesTypeEnum.heatmap]?: IHeatmapSeriesTheme; + // ... 更多系列类型 +} +``` + +## 组件样式配置 + +定义各种图表组件的主题样式： + +```typescript +export interface IComponentTheme { + /** 通用坐标轴配置 */ + axis?: IAxisCommonTheme; + /** 离散轴的通用配置 */ + axisBand?: IAxisCommonTheme; + /** 连续轴的通用配置 */ + axisLinear?: IAxisCommonTheme; + /** 笛卡尔坐标系下 x 轴的配置 */ + axisX?: ICartesianAxisCommonTheme; + /** 笛卡尔坐标系下 y 轴配置 */ + axisY?: ICartesianAxisCommonTheme; + + /** 离散图例配置 */ + [ComponentTypeEnum.discreteLegend]?: IDiscreteLegendTheme; + /** 连续颜色图例配置 */ + [ComponentTypeEnum.colorLegend]?: IColorLegendTheme; + /** 连续尺寸图例配置 */ + [ComponentTypeEnum.sizeLegend]?: ISizeLegendTheme; + + /** tooltip 组件配置 */ + [ComponentTypeEnum.tooltip]?: ITooltipTheme; + /** crosshair 配置 */ + [ComponentTypeEnum.crosshair]?: ICrosshairTheme; + /** dataZoom 配置 */ + [ComponentTypeEnum.dataZoom]?: IDataZoomTheme; + /** scrollbar 滚动条配置 */ + [ComponentTypeEnum.scrollBar]?: IScrollBarTheme; + /** 框选配置 */ + [ComponentTypeEnum.brush]?: IBrushTheme; + /** 图表标题配置 */ + [ComponentTypeEnum.title]?: ITitleTheme; + /** 播放器配置 */ + [ComponentTypeEnum.player]?: IPlayerTheme; + + [key: string]: any; +} +``` + +## 支持类型定义 + +### 颜色引用类型 +```typescript +export interface IColorKey { + /** 颜色type声明 */ + type: 'palette'; + /** 颜色 token */ + key: string; + /** 明度系数（可选，0~1） */ + l?: number; + /** 透明度系数（可选，0~1） */ + a?: number; + /** 默认色值，在没有取到 key 对应的色值时返回 */ + default?: ColorSchemeItem; +} +``` + +### Token 引用类型 +```typescript +export interface ITokenKey { + /** type 声明 */ + type: 'token'; + /** token key */ + key: string; + /** 默认值，在没有取到 key 对应的值时返回 */ + default?: T; +} + +export type TokenMap = Record; +``` + +### 图元主题类型 +```typescript +export type IMarkTheme = { + /** mark 层 是否显示配置 */ + visible?: boolean; + /** 默认样式设置 */ + style?: T; + /** 不同状态下的样式配置 */ + state?: IMarkStateTheme; + /** 可交互的开关 */ + interactive?: boolean; +}; + +export interface IMarkStateTheme extends Record { + /** 图元在正常状态下的主题样式设置 */ + normal?: T; + /** 图元在 hover 状态下的主题样式设置 */ + hover?: T; + /** 图元在 未被hover 状态下的主题样式设置 */ + hover_reverse?: T; + /** 图元在 选中状态下的主题样式设置 */ + selected?: T; + /** 图元在 未被选中 状态下的主题样式设置 */ + selected_reverse?: T; +} +``` + +### 图表类型枚举 +```typescript +export const enum ChartTypeEnum { + common = 'common', + area = 'area', + line = 'line', + bar = 'bar', + pie = 'pie', + radar = 'radar', + scatter = 'scatter', + funnel = 'funnel', + gauge = 'gauge', + sankey = 'sankey', + treemap = 'treemap', + heatmap = 'heatmap', + wordCloud = 'wordCloud' + // ... 更多图表类型 +} + +export type ChartType = keyof typeof ChartTypeEnum | string; +``` + +## 完整类型定义 + +```typescript +export interface ITheme { + // 主题基础信息 + name?: string; + description?: string; + type?: 'light' | 'dark'; + + // 全局样式 + background?: IColor | IColorKey; + padding?: ILayoutPaddingSpec; + fontFamily?: string | ITokenKey; + token?: TokenMap; + + // 色彩方案 + colorScheme?: IThemeColorScheme; + + // 图元样式 (按类型) + mark?: { + line?: Partial>; + symbol?: Partial>; + area?: Partial>; + rect?: Partial>; + arc?: Partial>; + text?: Partial>; + path?: Partial>; + }; + + // 图元样式 (按名称, 优先级更高) + markByName?: { + line?: Partial>; + point?: Partial>; + area?: Partial>; + bar?: Partial>; + label?: Partial>; + [markName: string]: Partial>; + }; + + // 系列样式 + series?: ISeriesTheme; + animationThreshold?: number; + + // 组件样式 + component?: IComponentTheme; + + // 图表类型特定配置 + chart?: Record>; +} +``` + +## 使用示例 + +### 基础主题配置 +```typescript +const basicTheme: ITheme = { + name: 'custom-theme', + type: 'light', + background: '#ffffff', + padding: { top: 20, right: 20, bottom: 20, left: 20 }, + fontFamily: 'Arial, sans-serif' +}; +``` + +### 色彩方案配置 +```typescript +const colorTheme: ITheme = { + name: 'color-theme', + colorScheme: { + default: ['#5B8FF9', '#5AD8A6', '#5D7092', '#F6BD16', '#E8684A'], + bar: ['#1f77b4', '#ff7f0e', '#2ca02c', '#d62728'], + line: { + dataScheme: ['#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4'], + palette: { + bandColor: '#f0f0f0', + backgroundColor: '#ffffff' + } + } + } +}; +``` + +### 图元样式配置 +```typescript +const markTheme: ITheme = { + name: 'mark-theme', + mark: { + line: { + style: { + lineWidth: 2, + stroke: '#333333' + }, + state: { + hover: { + lineWidth: 3, + stroke: '#ff0000' + } + } + } + }, + markByName: { + point: { + style: { + size: 8, + fill: '#5B8FF9' + } + } + } +}; +``` + +### 组件样式配置 +```typescript +const componentTheme: ITheme = { + name: 'component-theme', + component: { + axis: { + domainLine: { + visible: true, + style: { + stroke: '#d0d7de' + } + }, + tick: { + visible: true, + style: { + stroke: '#d0d7de' + } + }, + label: { + style: { + fontSize: 12, + fill: '#656d76' + } + } + }, + tooltip: { + panel: { + backgroundColor: 'rgba(8, 28, 48, 0.95)', + border: { + color: '#CFCFCF', + width: 0, + radius: 2 + } + } + } + } +}; +``` + +### Token 和颜色引用 +```typescript +const tokenTheme: ITheme = { + name: 'token-theme', + token: { + primaryColor: '#1890ff', + fontSize: 14, + borderRadius: 4 + }, + background: { + type: 'palette', + key: 'backgroundColor', + default: '#ffffff' + }, + fontFamily: { + type: 'token', + key: 'fontFamily', + default: 'Arial' + } +}; +``` + diff --git a/skills/vchart-development-skill/references/type-details/ITitleSpec-Type-Definition.md b/skills/vchart-development-skill/references/type-details/ITitleSpec-Type-Definition.md new file mode 100644 index 0000000000..f241f0debe --- /dev/null +++ b/skills/vchart-development-skill/references/type-details/ITitleSpec-Type-Definition.md @@ -0,0 +1,382 @@ +## Union Type Structure + +```typescript +type ITitleSpec = ITitleSpecWithoutText & ITitleTextSpec & ISubTitleTextSpec; +``` + +## Base Title Specification + +```typescript +interface ITitleSpecWithoutText extends Omit { + visible?: boolean; // Title visibility (default: true) + orient?: IOrientType; // Title position (default: 'top') + x?: number; // X coordinate in pixels + y?: number; // Y coordinate in pixels + width?: number; // Title width in pixels + height?: number; // Title height in pixels + minWidth?: number; // Minimum width constraint + maxWidth?: number; // Maximum width (auto-ellipsis) + minHeight?: number; // Minimum height constraint + maxHeight?: number; // Maximum height constraint + innerPadding?: IPadding | number | number[]; // Internal padding + align?: string; // Horizontal alignment ('left' | 'center' | 'right') + verticalAlign?: string; // Vertical alignment ('top' | 'middle' | 'bottom') + textStyle?: ITitleTextStyle; // Main title styling + subtextStyle?: ISubtitleTextStyle; // Subtitle styling +} +``` + +## Text Content Configuration + +### Main Title Text + +```typescript +type ITitleTextSpec = + | { + textType?: 'text'; // Plain text mode (default) + text: string | number | string[] | number[]; // Text content + } + | { + textType: 'rich'; // Rich text mode + text: IRichTextCharacter[]; // Rich text content + }; +``` + +### Subtitle Text + +```typescript +type ISubTitleTextSpec = + | { + subtextType?: 'text'; // Plain text mode (default) + subtext?: string | number | string[] | number[]; // Subtitle content + } + | { + subtextType?: 'rich'; // Rich text mode + subtext?: IRichTextCharacter[]; // Rich text subtitle content + }; +``` + +## Component Base (Inherited) + +```typescript +interface IComponentSpec extends IModelSpec { + regionIndex?: number | number[]; // Associated region indices + regionId?: StringOrNumber | StringOrNumber[]; // Associated region IDs + seriesIndex?: number | number[]; // Associated series indices + seriesId?: StringOrNumber | StringOrNumber[]; // Associated series IDs +} +``` + +## Text Style Configuration + +### Main Title Style + +```typescript +interface ITitleTextStyle extends Partial { + width?: number; // Fixed width + height?: number; // Fixed height + align?: string; // Horizontal alignment + verticalAlign?: string; // Vertical alignment + wordBreak?: 'break-word' | 'break-all' | 'keep-all'; // Line breaking mode + maxLineWidth?: number; // Width limit for auto-wrap/ellipsis + heightLimit?: number; // Height limit for content display + lineClamp?: number; // Maximum number of lines + character?: IRichTextCharacter[]; // Rich text config (deprecated) +} +``` + +### Subtitle Style + +```typescript +interface ISubtitleTextStyle extends Partial { + width?: number; // Fixed width + height?: number; // Fixed height + align?: string; // Horizontal alignment + verticalAlign?: string; // Vertical alignment + wordBreak?: 'break-word' | 'break-all' | 'keep-all'; // Line breaking mode + maxLineWidth?: number; // Width limit for auto-wrap/ellipsis + heightLimit?: number; // Height limit for content display + lineClamp?: number; // Maximum number of lines + character?: IRichTextCharacter[]; // Rich text config (deprecated) +} +``` + +## Supporting Type Definitions + +### Orientation Types + +```typescript +type IOrientType = 'left' | 'top' | 'right' | 'bottom' | 'z'; +``` + +### Padding Types + +```typescript +interface IPadding { + top?: number; // Top padding + bottom?: number; // Bottom padding + left?: number; // Left padding + right?: number; // Right padding +} + +type PaddingSpec = IPadding | number | number[]; +``` + +### Rich Text Character + +```typescript +interface IRichTextCharacter { + text?: string; // Character text content + fontSize?: number; // Font size + fontFamily?: string; // Font family + fontWeight?: string | number; // Font weight + fontStyle?: string; // Font style + fill?: string; // Text color + stroke?: string; // Text stroke color + // ... other text attributes +} +``` + +## Complete Interface Definition + +```typescript +interface ITitleSpec { + // Component association + regionIndex?: number | number[]; + regionId?: string | number | (string | number)[]; + seriesIndex?: number | number[]; + seriesId?: string | number | (string | number)[]; + + // Basic properties + visible?: boolean; + orient?: 'left' | 'top' | 'right' | 'bottom' | 'z'; + + // Positioning and sizing + x?: number; + y?: number; + width?: number; + height?: number; + minWidth?: number; + maxWidth?: number; + minHeight?: number; + maxHeight?: number; + + // Spacing and alignment + innerPadding?: + | { + top?: number; + bottom?: number; + left?: number; + right?: number; + } + | number + | number[]; + align?: 'left' | 'center' | 'right'; + verticalAlign?: 'top' | 'middle' | 'bottom'; + + // Main title content (one of the following) + textType?: 'text' | 'rich'; + text: string | number | string[] | number[] | IRichTextCharacter[]; + + // Subtitle content (optional) + subtextType?: 'text' | 'rich'; + subtext?: string | number | string[] | number[] | IRichTextCharacter[]; + + // Main title styling + textStyle?: { + width?: number; + height?: number; + align?: 'left' | 'center' | 'right'; + verticalAlign?: 'top' | 'middle' | 'bottom'; + wordBreak?: 'break-word' | 'break-all' | 'keep-all'; + maxLineWidth?: number; + heightLimit?: number; + lineClamp?: number; + fontSize?: number; + fontFamily?: string; + fontWeight?: string | number; + fontStyle?: string; + fill?: string; + stroke?: string; + // ... other ITextGraphicAttribute properties + }; + + // Subtitle styling + subtextStyle?: { + width?: number; + height?: number; + align?: 'left' | 'center' | 'right'; + verticalAlign?: 'top' | 'middle' | 'bottom'; + wordBreak?: 'break-word' | 'break-all' | 'keep-all'; + maxLineWidth?: number; + heightLimit?: number; + lineClamp?: number; + fontSize?: number; + fontFamily?: string; + fontWeight?: string | number; + fontStyle?: string; + fill?: string; + stroke?: string; + // ... other ITextGraphicAttribute properties + }; +} +``` + +## Usage Examples + +### Basic Title Configuration + +```typescript +// Simple text title +const basicTitle: ITitleSpec = { + visible: true, + orient: 'top', + text: 'Chart Title', + textStyle: { + fontSize: 18, + fontWeight: 'bold', + fill: '#333' + } +}; +``` + +### Title with Subtitle + +```typescript +const titleWithSubtitle: ITitleSpec = { + orient: 'top', + text: 'Main Chart Title', + subtext: 'Subtitle description', + textStyle: { + fontSize: 20, + fontWeight: 'bold', + fill: '#000' + }, + subtextStyle: { + fontSize: 14, + fill: '#666' + } +}; +``` + +### Positioned Title + +```typescript +const positionedTitle: ITitleSpec = { + x: 100, + y: 50, + width: 300, + text: 'Custom Positioned Title', + align: 'center', + textStyle: { + fontSize: 16, + maxLineWidth: 280 + } +}; +``` + +### Rich Text Title + +```typescript +const richTextTitle: ITitleSpec = { + textType: 'rich', + text: [ + { text: 'Sales ', fontSize: 18, fontWeight: 'bold', fill: '#000' }, + { text: 'Report', fontSize: 18, fontWeight: 'normal', fill: '#666' } + ], + orient: 'top' +}; +``` + +### Responsive Title with Constraints + +```typescript +const responsiveTitle: ITitleSpec = { + text: 'Long Title That May Need Wrapping or Ellipsis', + maxWidth: 400, + textStyle: { + fontSize: 16, + maxLineWidth: 380, + lineClamp: 2, + wordBreak: 'break-word' + }, + innerPadding: { left: 10, right: 10, top: 5, bottom: 5 } +}; +``` + +### Multi-line Array Title + +```typescript +const multiLineTitle: ITitleSpec = { + text: ['Line 1 of Title', 'Line 2 of Title'], + textStyle: { + fontSize: 16, + align: 'center', + lineHeight: 1.5 + } +}; +``` + +## Chart Integration Examples + +### Bar Chart with Title + +```typescript +const barChart = { + type: 'bar', + data: { values: data }, + title: { + visible: true, + text: 'Monthly Sales Data', + orient: 'top', + textStyle: { + fontSize: 20, + fontWeight: 'bold', + fill: '#2c3e50' + } + } +}; +``` + +### Chart with Rich Text Title and Subtitle + +```typescript +const chartWithRichTitle = { + type: 'line', + data: { values: data }, + title: { + textType: 'rich', + text: [ + { text: '2024 ', fontSize: 18, fontWeight: 'bold', fill: '#e74c3c' }, + { text: 'Performance Overview', fontSize: 18, fill: '#34495e' } + ], + subtextType: 'text', + subtext: 'Quarterly revenue and growth metrics', + subtextStyle: { + fontSize: 12, + fill: '#7f8c8d' + } + } +}; +``` + +### Multiple Titles for Different Regions + +```typescript +const multiRegionChart = { + type: 'common', + region: [{ id: 'region1' }, { id: 'region2' }], + title: [ + { + regionId: 'region1', + text: 'Region 1 Title', + orient: 'top' + }, + { + regionId: 'region2', + text: 'Region 2 Title', + orient: 'top' + } + ] +}; +``` diff --git a/skills/vchart-development-skill/references/type-details/ITooltipSpec-Type-Definition.md b/skills/vchart-development-skill/references/type-details/ITooltipSpec-Type-Definition.md new file mode 100644 index 0000000000..6231ded8c6 --- /dev/null +++ b/skills/vchart-development-skill/references/type-details/ITooltipSpec-Type-Definition.md @@ -0,0 +1,594 @@ +## Core Interface Structure + +```typescript +interface ITooltipSpec + extends Partial< + ITooltipActiveTypeAsKeys + > { + visible?: boolean; // Tooltip visibility + activeType?: TooltipActiveType | TooltipActiveType[]; // Supported activation types + trigger?: TooltipTrigger; // Trigger configuration + triggerOff?: TooltipTriggerOff; // Hide trigger configuration + showDelay?: number; // Show delay for enterable tooltips + hideTimer?: number; // Hide timer duration + lockAfterClick?: boolean; // Lock tooltip after click + style?: ITooltipTheme; // Tooltip styling + handler?: Partial; // Custom handler methods + renderMode?: 'html' | 'canvas'; // Rendering mode + confine?: boolean; // Confine to canvas area + className?: string; // CSS class name (HTML mode) + parentElement?: string | HTMLElement | HTMLCanvasElement; // Mount point + enterable?: boolean; // Allow mouse enter tooltip + transitionDuration?: number; // Animation duration + throttleInterval?: number; // Update throttle interval + updateElement?: UpdateElementFunction; // Custom DOM update function + offset?: { x?: number; y?: number }; // Position offset +} +``` + +## Active Type Configuration + +```typescript +interface ITooltipActiveTypeAsKeys { + mark?: T; // Mark tooltip configuration + dimension?: K; // Dimension tooltip configuration + group?: U; // Group tooltip configuration +} +``` + +## Tooltip Pattern Configuration + +```typescript +interface ITooltipPattern extends ITooltipShapePattern { + visible?: TooltipPatternProperty; // Pattern visibility + title?: TooltipPatternProperty; // Title configuration + content?: MaybeArray>>; // Content lines + position?: TooltipPatternProperty; // Position configuration + positionMode?: TooltipPatternProperty; // Position mode + updateTitle?: TooltipUpdateCallback; // Custom title updater + updateContent?: TooltipUpdateCallback; // Custom content updater + updatePosition?: TooltipUpdateCallback; // Custom position updater + maxLineCount?: number; // Maximum content lines + othersLine?: ITooltipLineActual; // "Others" line configuration +} +``` + +## Group Tooltip Pattern + +```typescript +interface IGroupTooltipPattern extends ITooltipPattern { + triggerMark?: MaybeArray; // Trigger mark types +} + +type GroupTooltipTriggerMark = 'line' | 'area' | 'point' | 'bar'; +``` + +## Tooltip Shape Pattern + +```typescript +interface ITooltipShapePattern { + hasShape?: TooltipPatternProperty; // Show shape indicator + shapeType?: TooltipPatternProperty; // Shape type + shapeColor?: TooltipPatternProperty; // Shape color + shapeFill?: TooltipPatternProperty; // Shape fill color + shapeStroke?: TooltipPatternProperty; // Shape stroke color + shapeHollow?: TooltipPatternProperty; // Hollow shape + shapeLineWidth?: TooltipPatternProperty; // Shape line width + shapeSize?: TooltipPatternProperty; // Shape size +} +``` + +## Trigger Configuration + +```typescript +type TooltipTrigger = MaybeArray<'hover' | 'click' | CustomTrigger> | 'none'; + +type TooltipTriggerOff = MaybeArray<'hover' | 'click' | CustomTriggerOff> | 'none'; + +interface CustomTrigger { + eventType: EventType; // Event type + source?: EventSourceType; // Event source + consume?: boolean; // Consume event +} + +interface CustomTriggerOff extends CustomTrigger { + checkOutside?: boolean; // Check outside click +} +``` + +## Supporting Type Definitions + +### Active Types + +```typescript +type TooltipActiveType = 'mark' | 'dimension' | 'group'; +``` + +### Tooltip Handler + +```typescript +interface ITooltipHandlerSpec { + showTooltip: ( + activeType: TooltipActiveType, + tooltipData: TooltipData, + params: TooltipHandlerParams + ) => Maybe; + hideTooltip: (params: TooltipHandlerParams) => Maybe; + release: () => void; + isTooltipShown?: () => boolean; +} +``` + +### Tooltip Line Pattern + +```typescript +interface ITooltipLinePattern { + key?: TooltipPatternProperty; // Line key + value?: TooltipPatternProperty; // Line value + hasShape?: TooltipPatternProperty; // Show shape + shapeType?: TooltipPatternProperty; // Shape type + shapeColor?: TooltipPatternProperty; // Shape color + // ... other shape properties +} +``` + +## Complete Interface Definition + +```typescript +interface ITooltipSpec { + // Basic configuration + visible?: boolean; + activeType?: 'mark' | 'dimension' | 'group' | ('mark' | 'dimension' | 'group')[]; + + // Trigger configuration + trigger?: + | 'hover' + | 'click' + | 'none' + | ('hover' | 'click')[] + | { + eventType: EventType; + source?: EventSourceType; + consume?: boolean; + } + | { + eventType: EventType; + source?: EventSourceType; + consume?: boolean; + }[]; + + triggerOff?: + | 'hover' + | 'click' + | 'none' + | ('hover' | 'click')[] + | { + eventType: EventType; + source?: EventSourceType; + consume?: boolean; + checkOutside?: boolean; + } + | { + eventType: EventType; + source?: EventSourceType; + consume?: boolean; + checkOutside?: boolean; + }[]; + + // Timing configuration + showDelay?: number; + hideTimer?: number; + lockAfterClick?: boolean; + + // Rendering configuration + renderMode?: 'html' | 'canvas'; + confine?: boolean; + className?: string; + parentElement?: string | HTMLElement | HTMLCanvasElement; + enterable?: boolean; + transitionDuration?: number; + throttleInterval?: number; + + // Position configuration + offset?: { + x?: number; + y?: number; + }; + + // Styling configuration + style?: { + panel?: { + padding?: number | number[]; + backgroundColor?: string; + border?: { + color?: string; + width?: number; + radius?: number; + }; + shadow?: { + x?: number; + y?: number; + blur?: number; + spread?: number; + color?: string; + }; + }; + titleLabel?: { + fontSize?: number; + fontFamily?: string; + fontWeight?: string | number; + fill?: string; + textAlign?: string; + lineHeight?: number | string; + }; + keyLabel?: { + fontSize?: number; + fontFamily?: string; + fontWeight?: string | number; + fill?: string; + textAlign?: string; + lineHeight?: number | string; + }; + valueLabel?: { + fontSize?: number; + fontFamily?: string; + fontWeight?: string | number; + fill?: string; + textAlign?: string; + lineHeight?: number | string; + }; + shape?: { + size?: number; + spacing?: number; + }; + }; + + // Mark tooltip specific + mark?: { + visible?: boolean | ((data: any) => boolean); + checkOverlap?: boolean; + title?: { + key?: string | ((data: any) => string); + value?: string | ((data: any) => string); + }; + content?: { + key?: string | ((data: any) => string); + value?: string | ((data: any) => string); + hasShape?: boolean | ((data: any) => boolean); + shapeType?: string | ((data: any) => string); + shapeColor?: string | ((data: any) => string); + }[]; + position?: string | ((data: any) => { x: number; y: number }); + updateTitle?: (prev: any, data: any, params: any) => any; + updateContent?: (prev: any[], data: any, params: any) => any[]; + updatePosition?: (prev: any, data: any, params: any) => any; + }; + + // Dimension tooltip specific + dimension?: { + visible?: boolean | ((data: any) => boolean); + title?: { + key?: string | ((data: any) => string); + value?: string | ((data: any) => string); + }; + content?: { + key?: string | ((data: any) => string); + value?: string | ((data: any) => string); + hasShape?: boolean | ((data: any) => boolean); + shapeType?: string | ((data: any) => string); + shapeColor?: string | ((data: any) => string); + }[]; + position?: string | ((data: any) => { x: number; y: number }); + updateTitle?: (prev: any, data: any, params: any) => any; + updateContent?: (prev: any[], data: any, params: any) => any[]; + updatePosition?: (prev: any, data: any, params: any) => any; + }; + + // Group tooltip specific + group?: { + visible?: boolean | ((data: any) => boolean); + triggerMark?: 'line' | 'area' | 'point' | 'bar' | ('line' | 'area' | 'point' | 'bar')[]; + title?: { + key?: string | ((data: any) => string); + value?: string | ((data: any) => string); + }; + content?: { + key?: string | ((data: any) => string); + value?: string | ((data: any) => string); + hasShape?: boolean | ((data: any) => boolean); + shapeType?: string | ((data: any) => string); + shapeColor?: string | ((data: any) => string); + }[]; + position?: string | ((data: any) => { x: number; y: number }); + updateTitle?: (prev: any, data: any, params: any) => any; + updateContent?: (prev: any[], data: any, params: any) => any[]; + updatePosition?: (prev: any, data: any, params: any) => any; + }; + + // Custom handler + handler?: { + showTooltip?: (activeType: 'mark' | 'dimension' | 'group', tooltipData: any, params: any) => number; + hideTooltip?: (params: any) => number; + release?: () => void; + isTooltipShown?: () => boolean; + }; + + // Custom DOM update function (HTML mode only) + updateElement?: (tooltipElement: HTMLElement, actualTooltip: any, params: any) => void; +} +``` + +## Usage Examples + +### Basic Tooltip Configuration + +```typescript +const basicTooltip: ITooltipSpec = { + visible: true, + activeType: ['mark', 'dimension'], + trigger: 'hover' +}; +``` + +### Mark Tooltip with Custom Content + +```typescript +const markTooltip: ITooltipSpec = { + visible: true, + activeType: 'mark', + trigger: 'hover', + mark: { + visible: true, + title: { + key: 'Category', + value: data => data.category + }, + content: [ + { + key: 'Value', + value: data => `${data.value}`, + hasShape: true, + shapeColor: data => data.color + } + ] + } +}; +``` + +### Dimension Tooltip for Time Series + +```typescript +const dimensionTooltip: ITooltipSpec = { + visible: true, + activeType: 'dimension', + trigger: 'hover', + dimension: { + title: { + key: 'Date', + value: data => data.date + }, + content: [ + { + key: 'Sales', + value: data => `$${data.sales.toLocaleString()}`, + hasShape: true, + shapeType: 'rect' + }, + { + key: 'Profit', + value: data => `$${data.profit.toLocaleString()}`, + hasShape: true, + shapeType: 'rect' + } + ] + } +}; +``` + +### Group Tooltip for Line Chart + +```typescript +const groupTooltip: ITooltipSpec = { + visible: true, + activeType: 'group', + trigger: 'hover', + group: { + visible: true, + triggerMark: ['line', 'point'], + title: { + key: 'Date', + value: data => data.date + }, + content: [ + { + key: data => data.seriesName, + value: data => `${data.value}`, + hasShape: true, + shapeColor: data => data.seriesColor + } + ] + } +}; +``` + +### Styled Tooltip with Custom Appearance + +```typescript +const styledTooltip: ITooltipSpec = { + visible: true, + activeType: 'mark', + trigger: 'hover', + style: { + panel: { + padding: [8, 12], + backgroundColor: 'rgba(0, 0, 0, 0.8)', + border: { + color: '#333', + width: 1, + radius: 4 + }, + shadow: { + x: 2, + y: 2, + blur: 8, + color: 'rgba(0, 0, 0, 0.2)' + } + }, + titleLabel: { + fontSize: 14, + fontWeight: 'bold', + fill: '#fff' + }, + keyLabel: { + fontSize: 12, + fill: '#ccc' + }, + valueLabel: { + fontSize: 12, + fontWeight: 'bold', + fill: '#fff' + } + } +}; +``` + +### Custom Trigger Configuration + +```typescript +const customTriggerTooltip: ITooltipSpec = { + visible: true, + activeType: 'mark', + trigger: [ + 'hover', + { + eventType: 'pointerdown', + source: 'chart', + consume: false + } + ], + triggerOff: [ + { + eventType: 'pointerup', + checkOutside: true + } + ], + lockAfterClick: true +}; +``` + +### HTML Tooltip with Custom Element + +```typescript +const htmlTooltip: ITooltipSpec = { + visible: true, + renderMode: 'html', + className: 'custom-tooltip', + enterable: true, + transitionDuration: 200, + updateElement: (tooltipElement, actualTooltip, params) => { + tooltipElement.innerHTML = ` +
${actualTooltip.title?.value}
+
+ ${actualTooltip.content + ?.map( + item => + `
+ ${item.key} + ${item.value} +
` + ) + .join('')} +
+ `; + } +}; +``` + +### Canvas Tooltip with Positioning + +```typescript +const canvasTooltip: ITooltipSpec = { + visible: true, + renderMode: 'canvas', + confine: true, + offset: { x: 10, y: 10 }, + activeType: 'dimension', + dimension: { + position: 'tl', + positionMode: 'mark' + } +}; +``` + +## Chart Integration Examples + +### Bar Chart with Mark Tooltip + +```typescript +const barChart = { + type: 'bar', + data: { values: data }, + xField: 'category', + yField: 'value', + tooltip: { + visible: true, + activeType: 'mark', + mark: { + title: { + key: 'Category', + value: data => data.category + }, + content: [ + { + key: 'Value', + value: data => data.value.toLocaleString() + } + ] + } + } +}; +``` + +### Line Chart with Dimension Tooltip + +```typescript +const lineChart = { + type: 'line', + data: { values: data }, + xField: 'date', + yField: 'value', + seriesField: 'series', + tooltip: { + visible: true, + activeType: 'dimension', + dimension: { + title: { + key: 'Date', + value: data => data.date + } + } + } +}; +``` + +### Multi-Series Chart with Group Tooltip + +```typescript +const multiSeriesChart = { + type: 'line', + data: { values: data }, + xField: 'month', + yField: 'sales', + seriesField: 'region', + tooltip: { + visible: true, + activeType: 'group', + group: { + triggerMark: 'line', + title: { + value: data => `Sales for ${data.month}` + } + } + } +}; +``` diff --git a/skills/vchart-development-skill/references/type-details/ITotalLabelSpec-Type-Definition.md b/skills/vchart-development-skill/references/type-details/ITotalLabelSpec-Type-Definition.md new file mode 100644 index 0000000000..4b2825e030 --- /dev/null +++ b/skills/vchart-development-skill/references/type-details/ITotalLabelSpec-Type-Definition.md @@ -0,0 +1,332 @@ +## ITotalLabelSpec Type Definition + +### Core Interface + +`ITotalLabelSpec` 定义了堆叠图表中汇总标签的配置选项，它继承了基础标签配置的核心功能，并为堆叠场景增加了专用的位置和计算控制选项。 + +```typescript +type ITotalLabelSpec = Pick< + ILabelSpec, + 'visible' | 'formatMethod' | 'interactive' | 'offset' | 'style' | 'state' | 'textType' | 'overlap' +> & { + /** + * 堆叠汇总标签的位置，在一组堆积图元的上方或下方 + * @default 'top' + */ + position?: 'top' | 'bottom'; + + /** + * 不管总计标签是否展示，内部都默认计算总计值 + * @default false + */ + alwayCalculateTotal?: boolean; +}; +``` + +### 继承属性详解 + +#### visible: 显示控制 + +- **类型**: `boolean` +- **默认值**: `false` +- **说明**: 控制堆叠汇总标签是否显示，仅在图表支持堆叠配置（`stack: true`）时生效 + +#### formatMethod: 格式化函数 + +- **类型**: `IFormatMethod<[text: string | string[], datum?: Datum, ctx?: ILabelFormatMethodContext]>` +- **说明**: 标签内容格式化函数，支持返回富文本结构 +- **用法**: + ```typescript + formatMethod: (text, datum, ctx) => { + return `Total: ${text}`; + }; + ``` + +#### interactive: 交互配置 + +- **类型**: `boolean` +- **默认值**: `false` +- **说明**: 标签是否支持交互事件 + +#### offset: 偏移距离 + +- **类型**: `number` +- **默认值**: `5` +- **单位**: 像素 +- **说明**: 标签与对应数据图元的距离 + +#### style: 样式配置 + +- **类型**: `ConvertToMarkStyleSpec` +- **说明**: 标签的视觉样式配置，包括字体、颜色、大小等 +- **示例**: + ```typescript + style: { + fontSize: 12, + fill: '#333', + fontWeight: 'bold' + } + ``` + +#### state: 交互状态样式 + +- **类型**: `LabelStateStyle>` +- **说明**: 不同交互状态下的样式配置 +- **包含状态**: + - `hover`: 鼠标悬浮状态 + - `hover_reverse`: 鼠标悬浮反向状态 + - `selected`: 选中状态 + - `selected_reverse`: 选中反向状态 + +#### textType: 文本类型 + +- **类型**: `'text' | 'rich'` +- **标记**: `@deprecated` (1.10.0 版本后在 formatMethod 中返回富文本结构) +- **说明**: 文本类型配置 + +#### overlap: 防重叠配置 + +- **类型**: `BaseLabelAttrs['overlap'] & { padding?: DataLabelAttrs['size']['padding']; }` +- **说明**: 标签防重叠配置，包含策略、边距等选项 +- **重要**: 当图表同时显示 `totalLabel` 和 `label` 时，`totalLabel` 的布局优先级高于 `label` + +### 专用属性详解 + +#### position: 标签位置 + +- **类型**: `'top' | 'bottom'` +- **默认值**: `'top'` +- **版本**: 自 1.13.7 版本支持 +- **说明**: 堆叠汇总标签的显示位置 + - `'top'`: 显示在堆积图元的顶部 + - `'bottom'`: 显示在堆积图元的底部 + +#### alwayCalculateTotal: 总计计算控制 + +- **类型**: `boolean` +- **默认值**: `false` +- **说明**: 控制是否始终计算总计值，即使标签不显示也会进行内部计算 + +### 支持类型解析 + +#### LabelStateStyle 状态样式 + +```typescript +type LabelStateStyle = { + /** + * 标签hover状态样式配置 + */ + hover?: T; + /** + * 标签hover_reverse状态样式配置 + */ + hover_reverse?: T; + /** + * 标签选中状态样式配置 + */ + selected?: T; + /** + * 标签未选中状态样式配置 + */ + selected_reverse?: T; +}; +``` + +#### 防重叠配置类型 + +```typescript +type OverlapConfig = + | boolean + | { + /** + * 重叠处理策略配置 + */ + strategy?: OverlapStrategy[]; + /** + * 重叠时是否隐藏标签 + * @default false + */ + hideOnHit?: boolean; + /** + * 是否避免与基础图元重叠 + * @default true + */ + avoidBaseMark?: boolean; + /** + * 是否强制限制在容器内 + * @default false + */ + clampForce?: boolean; + /** + * 防重叠区域边距 + */ + padding?: { + top?: number; + bottom?: number; + left?: number; + right?: number; + }; + }; +``` + +### 使用场景 + +#### 基础配置 + +```typescript +const basicTotalLabel: ITotalLabelSpec = { + visible: true, + position: 'top', + style: { + fontSize: 12, + fill: '#333' + } +}; +``` + +#### 格式化配置 + +```typescript +const formattedTotalLabel: ITotalLabelSpec = { + visible: true, + formatMethod: (text, datum) => { + return `Total: ${text}`; + }, + style: { + fontSize: 14, + fontWeight: 'bold' + } +}; +``` + +#### 交互式配置 + +```typescript +const interactiveTotalLabel: ITotalLabelSpec = { + visible: true, + interactive: true, + position: 'bottom', + state: { + hover: { + fill: '#1890ff', + fontSize: 16 + }, + selected: { + fill: '#f5222d', + fontWeight: 'bold' + } + } +}; +``` + +#### 防重叠配置 + +```typescript +const overlapTotalLabel: ITotalLabelSpec = { + visible: true, + overlap: { + hideOnHit: true, + clampForce: true, + strategy: [ + { + type: 'position', + position: ['top', 'bottom'] + } + ], + padding: { top: 2, bottom: 2, left: 4, right: 4 } + } +}; +``` + +#### 完整配置示例 + +```typescript +const completeTotalLabel: ITotalLabelSpec = { + visible: true, + position: 'top', + alwayCalculateTotal: true, + interactive: true, + offset: 8, + formatMethod: (text, datum) => { + const value = parseFloat(text as string); + return value >= 1000 ? `${(value / 1000).toFixed(1)}K` : text; + }, + style: { + fontSize: 12, + fill: '#333', + fontWeight: 'bold', + stroke: '#fff', + lineWidth: 1 + }, + state: { + hover: { + fill: '#1890ff', + fontSize: 14 + } + }, + overlap: { + clampForce: true, + avoidBaseMark: true, + strategy: [ + { + type: 'position', + position: ['top', 'bottom'] + } + ] + } +}; +``` + +### 在系列配置中的应用 + +#### 堆叠柱状图 + +```typescript +const barChartWithTotalLabel = { + type: 'bar', + stack: true, + data: stackedData, + xField: 'category', + yField: 'value', + seriesField: 'series', + totalLabel: { + visible: true, + position: 'top', + formatMethod: text => `Sum: ${text}`, + style: { + fontSize: 12, + fill: '#333' + } + } +}; +``` + +#### 堆叠面积图 + +```typescript +const areaChartWithTotalLabel = { + type: 'area', + stack: true, + data: stackedData, + xField: 'time', + yField: 'value', + seriesField: 'category', + totalLabel: { + visible: true, + position: 'top', + offset: 5, + interactive: true + } +}; +``` + +### 与 ITotalLabelTheme 的关系 + +`ITotalLabelTheme` 是主题配置接口，包含 `ITotalLabelSpec` 的部分属性： + +```typescript +interface ITotalLabelTheme + extends Pick { + style?: ITextMarkSpec; +} +``` diff --git a/skills/vchart-development-skill/references/type-details/IVisualSpecBase-Type-Definition.md b/skills/vchart-development-skill/references/type-details/IVisualSpecBase-Type-Definition.md new file mode 100644 index 0000000000..68bf96b5fc --- /dev/null +++ b/skills/vchart-development-skill/references/type-details/IVisualSpecBase-Type-Definition.md @@ -0,0 +1,307 @@ +## IVisualSpecBase Type Definition + +### Core Interface + +`IVisualSpecBase` 定义了VChart中比例尺（Scale）映射的基础配置，作为数据值到视觉属性转换的核心接口。 + +```typescript +interface IVisualSpecBase { + /** + * type of scale + */ + type: ScaleType; + /** + * will set to scale.domain, it means input of scale + */ + domain: D[]; + /** + * will set to scale.range, it means output of scale + */ + range: T[]; + /** + * will set to scale.specified if scale support, as a key-value pair matching capability + * @since 1.1.0 + */ + specified?: { [key: string]: unknown }; + /** + * enable clamp in linear scale + * If clamp is enabled, the return value of the scale is always within the scale's range. + * @since 1.13.6 + * @default false + */ + clamp?: boolean; +} +``` + +### Type Parameters + +#### Generic Type `D` +输入域（Domain）的数据类型： +- 对于连续比例尺：通常为`number`类型 +- 对于离散比例尺：通常为`string`或`number`类型 +- 代表比例尺函数的输入参数类型 + +#### Generic Type `T` +输出域（Range）的数据类型： +- 可以是任何视觉属性值类型 +- 常见类型：`string`（颜色）、`number`（尺寸）、图形属性等 +- 代表比例尺函数的输出结果类型 + +### Property Details + +#### type: ScaleType +比例尺的类型，决定了数据映射的方式。 + +```typescript +type ScaleType = QuantScaleType | DiscreteScaleType; +type QuantScaleType = 'linear'; +type DiscreteScaleType = 'ordinal' | 'band' | 'point' | 'threshold'; +``` + +**支持的比例尺类型：** +- `'linear'`: 线性连续映射，适用于数值数据的连续转换 +- `'ordinal'`: 序数离散映射，通过数组索引进行对应 +- `'band'`: 带状映射，常用于分类轴 +- `'point'`: 点状映射，用于散点图等场景 +- `'threshold'`: 阈值映射，基于阈值进行分段映射 + +#### domain: D[] +定义域，表示比例尺函数的输入参数范围。 + +**线性比例尺示例：** +```typescript +// 数值区间 +domain: [0, 100] +``` + +**离散比例尺示例：** +```typescript +// 分类值数组 +domain: ['category1', 'category2', 'category3'] +``` + +#### range: T[] +值域，表示比例尺函数的输出结果范围。 + +**颜色映射示例：** +```typescript +range: ['#ff0000', '#00ff00', '#0000ff'] +``` + +**尺寸映射示例：** +```typescript +range: [4, 24] +``` + +**形状映射示例：** +```typescript +range: ['circle', 'rect', 'triangle'] +``` + +#### specified?: { [key: string]: unknown } +指定映射配置，提供键值对的直接映射能力。 + +```typescript +// 示例：为特定值指定固定映射 +specified: { + 'special': 'red', // 'special' 值固定映射为 'red' + 'important': 'blue' // 'important' 值固定映射为 'blue' +} +``` + +**执行优先级：** +1. 首先检查`specified`中是否有直接匹配 +2. 如果匹配，直接返回指定值 +3. 否则按正常比例尺逻辑进行映射 + +**适用场景：** +- 仅在`type: 'ordinal'`时生效 +- 用于特殊值的固定映射 +- 覆盖默认的索引映射行为 + +#### clamp?: boolean +线性比例尺的钳制模式配置。 + +```typescript +clamp: true // 启用钳制模式 +clamp: false // 禁用钳制模式（默认） +``` + +**功能说明：** +- 仅对`type: 'linear'`的比例尺生效 +- 启用时，输出值被限制在range范围内 +- 禁用时，允许输出值超出range范围 + +**使用示例：** +```typescript +// clamp: false（默认） +scale = { type: 'linear', domain: [0, 100], range: [0, 50] } +scale(150) // 返回 75（超出range） + +// clamp: true +scale = { type: 'linear', domain: [0, 100], range: [0, 50], clamp: true } +scale(150) // 返回 50（被钳制到range最大值） +``` + +### Inheritance Hierarchy + +#### IVisualSpecStyle +用于Mark样式映射配置，添加了数据字段绑定能力。 + +```typescript +interface IVisualSpecStyle extends IVisualSpecBase { + /** + * 指定映射对应的数据字段 + */ + field?: string; +} +``` + +#### IVisualSpecScale +用于全局比例尺配置，支持多种域定义方式。 + +```typescript +interface IVisualSpecScale extends Omit, 'domain'> { + /** + * scale 的id + */ + id: string; + /** + * 定义域范围 + */ + domain: IVisualSpecBase['domain'] | IDataDomainSpec[]; +} +``` + +### Usage Scenarios + +#### 线性比例尺配置 +用于连续数值的视觉映射： + +```typescript +const sizeScale: IVisualSpecBase = { + type: 'linear', + domain: [0, 1000], + range: [4, 24], + clamp: true +}; +``` + +#### 离散比例尺配置 +用于分类数据的视觉映射： + +```typescript +const colorScale: IVisualSpecBase = { + type: 'ordinal', + domain: ['A', 'B', 'C'], + range: ['red', 'blue', 'green'], + specified: { + 'special': 'orange' + } +}; +``` + +#### 复合属性映射 +用于复杂视觉属性的映射： + +```typescript +const dashScale: IVisualSpecBase = { + type: 'ordinal', + domain: ['solid', 'dashed'], + range: [[1, 0], [4, 4]] +}; +``` + +### Integration with VChart + +#### 全局比例尺系统 +`IVisualSpecBase`是VChart全局比例尺系统的核心： + +```typescript +interface IGlobalScale { + getScale: (user_id: string) => IBaseScale | null; + getScaleSpec: (user_id: string) => IVisualSpecScale | null; + registerModelScale: (spec: IVisualSpecScale) => void; +} +``` + +#### 样式映射系统 +在Mark样式配置中的应用： + +```typescript +type VisualType = ValueType | FunctionType | IVisual; +type ConvertToMarkStyleSpec> = { + [key in keyof T]: VisualType; +}; +``` + +#### 数据驱动映射 +与数据字段的绑定关系： + +```typescript +type IDataDomainSpec = { + dataId: string; + fields: string[]; +}; +``` + +### Scale Creation and Management + +#### Scale实例化 +基于`IVisualSpecBase`创建实际的比例尺对象： + +```typescript +function createScaleWithSpec( + spec: IVisual, + context: { globalScale: IGlobalScale; seriesId: number } +): IBaseScale | null; +``` + +#### 属性更新机制 +支持动态更新比例尺配置： + +```typescript +function initScaleWithSpec(scale: IBaseScale, spec: IVisualSpecBase): void; +``` + +### Best Practices + +#### 类型安全 +使用泛型确保域和值域类型的一致性： + +```typescript +// 推荐：明确类型 +const scale: IVisualSpecBase = { + type: 'linear', + domain: [0, 100], + range: ['#ff0000', '#0000ff'] +}; +``` + +#### 性能优化 +合理配置specified映射，避免复杂计算： + +```typescript +// 对于频繁访问的特殊值，使用specified直接映射 +const scale: IVisualSpecBase = { + type: 'ordinal', + domain: ['normal', 'special', 'urgent'], + range: ['gray', 'orange', 'red'], + specified: { + 'vip': 'gold' // VIP用户的特殊颜色 + } +}; +``` + +#### 域范围设计 +根据数据特征合理设计domain和range： + +```typescript +// 连续数据：使用合理的数值区间 +const sizeScale: IVisualSpecBase = { + type: 'linear', + domain: [0, 100], // 基于实际数据范围 + range: [2, 20], // 基于视觉效果需求 + clamp: true // 防止异常值影响显示 +}; +``` diff --git a/skills/vchart-development-skill/references/type-details/IVisualSpecScale-Type-Definition.md b/skills/vchart-development-skill/references/type-details/IVisualSpecScale-Type-Definition.md new file mode 100644 index 0000000000..fd120f05ea --- /dev/null +++ b/skills/vchart-development-skill/references/type-details/IVisualSpecScale-Type-Definition.md @@ -0,0 +1,91 @@ +## Overview + +```typescript +interface IVisualSpecScale { + // Scale identity + id?: string; // Scale unique identifier for global reference + + // Scale type + type: 'ordinal' | 'linear'; // Scale mapping type + + // Data mapping + domain: Array | IDomainSpec[]; // Input data domain + range: Array; // Output visual range + + // Advanced options + specified?: Record; // Direct value mapping (ordinal only) + clamp?: boolean; // Clamp output to range bounds (linear only) @default false @since 1.13.6 +} + +// Domain specification for data field mapping +interface IDomainSpec { + dataId: string; // Data source identifier + fields: string[]; // Data field names to extract domain from +} +``` + +## Scale Type Specifications + +### Ordinal Scale + +```typescript +interface IOrdinalScale extends IVisualSpecScale { + type: 'ordinal'; + domain: Array | IDomainSpec[]; // Discrete values + range: Array; // Corresponding visual values + specified?: Record; // Direct value overrides +} +``` + +### Linear Scale + +```typescript +interface ILinearScale extends IVisualSpecScale { + type: 'linear'; + domain: [number, number] | IDomainSpec[]; // Continuous numeric domain + range: [number, number] | Array; // Continuous output range + clamp?: boolean; // Restrict output to range bounds @default false +} +``` + +## Use example + +### Linear scale for bar + +```javascript +const spec = { + type: 'bar', + data: [ + { + id: 'barData', + values: [ + { name: 'atom_4', value: 33.33, success_count: 333, run_count: 1000 }, + { name: 'atom_3', value: 37.89, success_count: 379, run_count: 1000 }, + { name: 'atom_1', value: 45.67, success_count: 457, run_count: 1000 }, + ], + }, + ], + direction: 'horizontal', + xField: 'value', + yField: 'name', + color: { + type: 'linear', + domain: [ + { + dataId: 'barData', + fields: ['success_count'], + }, + ], + range: ['red', 'green'], + clamp: true, + }, + bar: { + style: { + fill: { + scale: 'color', + field: 'success_count', + }, + }, + }, +}; +``` diff --git a/skills/vchart-development-skill/references/type-details/IWaterfallTotalCustom-Type-Definition.md b/skills/vchart-development-skill/references/type-details/IWaterfallTotalCustom-Type-Definition.md new file mode 100644 index 0000000000..0098f7a4c8 --- /dev/null +++ b/skills/vchart-development-skill/references/type-details/IWaterfallTotalCustom-Type-Definition.md @@ -0,0 +1,12 @@ +```typescript +interface IWaterfallTotalEnd { + /** 总计文本 */ + text?: string; + /** 此类型下，总计的运算方式由自定义函数决定 */ + type: 'custom'; + /** 总计值的标志位，对应 field 的值为 true 时，认为数据是总计数据 */ + tagField: string; + /** 总计数据在运算时会调用这个函数，参数为当前总计数据，当前累计信息，需要返回总计的起点值与终点值 */ + product: (datum: Datum, current: { start: number; end: number }) => { start: number; end: number }; +} +``` \ No newline at end of file diff --git a/skills/vchart-development-skill/references/type-details/IWaterfallTotalEnd-Type-Definition.md b/skills/vchart-development-skill/references/type-details/IWaterfallTotalEnd-Type-Definition.md new file mode 100644 index 0000000000..16f6e79657 --- /dev/null +++ b/skills/vchart-development-skill/references/type-details/IWaterfallTotalEnd-Type-Definition.md @@ -0,0 +1,8 @@ +```typescript +interface IWaterfallTotalEnd { + /** 总计文本 */ + text?: string; + /** 此类型下，默认在数据最后增加一条总计信息 */ + type: 'end'; +} +``` \ No newline at end of file diff --git a/skills/vchart-development-skill/references/type-details/IWaterfallTotalField-Type-Definition.md b/skills/vchart-development-skill/references/type-details/IWaterfallTotalField-Type-Definition.md new file mode 100644 index 0000000000..37384faa47 --- /dev/null +++ b/skills/vchart-development-skill/references/type-details/IWaterfallTotalField-Type-Definition.md @@ -0,0 +1,16 @@ +```typescript +interface IWaterfallTotalEnd { + /** 总计文本 */ + text?: string; + /** 此类型下，总计的运算方式由对应的数据字段决定 */ + type: 'field'; + /** 总计值的标志位，对应 field 的值为 true 时，认为数据是总计数据 */ + tagField: string; + /** 可以指定总计值 */ + valueField?: string; + /** 可以指定总计起点 */ + startField?: string; + /** 可以指定总计计算前 n 个维度 */ + collectCountField?: string; +} +``` \ No newline at end of file diff --git a/skills/vchart-development-skill/references/type-details/LiquidShapeType-Type-Definition.md b/skills/vchart-development-skill/references/type-details/LiquidShapeType-Type-Definition.md new file mode 100644 index 0000000000..dfae65bd91 --- /dev/null +++ b/skills/vchart-development-skill/references/type-details/LiquidShapeType-Type-Definition.md @@ -0,0 +1,22 @@ +```typescript +type LiquidShapeType = + // All SymbolType values (same as ShapeType) + | 'circle' // Default liquid mask shape + | 'square' + | 'rect' + | 'triangle' + | 'diamond' + | 'star' + | 'triangleUp' + | 'triangleDown' + | 'triangleLeft' + | 'triangleRight' + | 'triangleForward' + | 'cross' + | 'wye' + | 'pentagon' + | 'cardioid' + // Liquid-specific shape + | 'drop' // Water drop shape for liquid charts + | string; // Custom shapes +``` diff --git a/skills/vchart-development-skill/references/type-details/RegionSpec-Type-Definition.md b/skills/vchart-development-skill/references/type-details/RegionSpec-Type-Definition.md new file mode 100644 index 0000000000..cdecf6a87b --- /dev/null +++ b/skills/vchart-development-skill/references/type-details/RegionSpec-Type-Definition.md @@ -0,0 +1,282 @@ +## Union Type Structure + +```typescript +type RegionSpec = IRegionSpec | IGeoRegionSpec; +``` + +## Base Region Specification + +```typescript +interface IRegionSpec extends ILayoutItemSpec { + id?: StringOrNumber; // Region identifier + coordinate?: CoordinateType; // Coordinate system type + style?: ConvertToMarkStyleSpec; // Region background styling + stackInverse?: boolean; // Stack order inversion (default: false) + stackSort?: boolean; // Stack sorting (default: false) +} +``` + +## Geographic Region Specification + +```typescript +interface IGeoRegionSpec extends IRegionSpec { + coordinate?: 'geo'; // Geographic coordinate system + roam?: boolean | { blank?: boolean }; // Drag interaction configuration + longitudeField?: string; // Longitude field name in data + latitudeField?: string; // Latitude field name in data + projection?: Partial>; // Geographic projection config + zoomLimit?: { + // Zoom constraints + min?: number; // Minimum zoom level + max?: number; // Maximum zoom level + }; +} +``` + +## Layout Item Specification (Inherited) + +```typescript +interface ILayoutItemSpec { + // Layout type and positioning + layoutType?: 'region-relative' | 'absolute' | 'normal'; + layoutLevel?: number; // Layout priority level + layoutBindRegionID?: number | number[]; // Bound region IDs + + // Orientation and alignment + orient?: 'left' | 'right' | 'top' | 'bottom'; + alignSelf?: 'start' | 'end' | 'middle'; + + // Size constraints + width?: ILayoutNumber; // Width specification + height?: ILayoutNumber; // Height specification + maxWidth?: ILayoutNumber; // Maximum width + minWidth?: ILayoutNumber; // Minimum width + maxHeight?: ILayoutNumber; // Maximum height + minHeight?: ILayoutNumber; // Minimum height + + // Spacing and positioning + padding?: ILayoutPaddingSpec; // Internal padding + offsetX?: ILayoutNumber; // X-axis offset + offsetY?: ILayoutNumber; // Y-axis offset + + // Absolute positioning (when layoutType === 'absolute') + left?: ILayoutNumber; // Distance from left edge + right?: ILayoutNumber; // Distance from right edge + top?: ILayoutNumber; // Distance from top edge + bottom?: ILayoutNumber; // Distance from bottom edge + center?: boolean; // Center positioning + + // Display properties + zIndex?: number; // Display layer level + clip?: boolean; // Content clipping +} +``` + +## Supporting Type Definitions + +### Coordinate System Types + +```typescript +type CoordinateType = 'cartesian' | 'polar' | 'geo' | 'none'; +``` + +### Layout Number Types + +```typescript +type ILayoutNumber = number | string | ((chartViewRect: ILayoutRect) => number); +``` + +### Layout Padding Types + +```typescript +type ILayoutPaddingSpec = + | number // Single value for all sides + | number[] // Array [top, right, bottom, left] + | { + // Object format + left?: ILayoutNumber; + right?: ILayoutNumber; + top?: ILayoutNumber; + bottom?: ILayoutNumber; + }; +``` + +### Geographic Projection Types + +```typescript +interface IProjectionSpec { + name: string; // Projection name + type: ProjectionType; // Projection algorithm + zoom?: number; // Initial zoom level (default: 1) + center?: [number, number]; // Initial focus coordinates [lng, lat] +} + +type ProjectionType = + | 'albers' + | 'albersUsa' + | 'azimuthalEqualArea' + | 'azimuthalEquidistant' + | 'conic' + | 'conicConformal' + | 'conicEqualArea' + | 'conicEquidistant' + | 'equalEarth' + | 'equirectangular' + | 'gnomonic' + | 'identity' + | 'mercator' + | 'naturalEarth1' + | 'orthographic' + | 'stereographic' + | 'transverseMercator'; +``` + +## Usage Examples + +### Basic Cartesian Region + +```typescript +const basicRegion: RegionSpec = { + id: 'main-region', + coordinate: 'cartesian', + padding: { left: 50, right: 50, top: 30, bottom: 60 } +}; +``` + +### Geographic Region with Projection + +```typescript +const geoRegion: RegionSpec = { + id: 'world-map', + coordinate: 'geo', + roam: true, + projection: { + type: 'mercator', + zoom: 1, + center: [0, 0] + }, + zoomLimit: { + min: 0.5, + max: 10 + } +}; +``` + +### Stacked Series Region + +```typescript +const stackedRegion: RegionSpec = { + id: 'stack-region', + coordinate: 'cartesian', + stackInverse: true, + stackSort: true, + style: { + fill: '#f0f0f0', + stroke: '#ddd' + } +}; +``` + +### Responsive Region with Percentage + +```typescript +const responsiveRegion: RegionSpec = { + id: 'responsive-region', + coordinate: 'cartesian', + width: '80%', + height: '60%', + padding: [20, 40, 20, 40], + center: true +}; +``` + +### Polar Coordinate Region + +```typescript +const polarRegion: RegionSpec = { + id: 'polar-chart', + coordinate: 'polar', + width: 400, + height: 400, + padding: 50 +}; +``` + +## Chart Integration Examples + +### Multi-Region Layout + +```typescript +const multiRegionChart = { + type: 'common', + layout: { + type: 'grid', + col: 2, + row: 2 + }, + region: [ + { + id: 'region-0', + coordinate: 'cartesian', + col: 0, + row: 0 + }, + { + id: 'region-1', + coordinate: 'cartesian', + col: 1, + row: 0 + }, + { + id: 'geo-region', + coordinate: 'geo', + col: 0, + row: 1, + colSpan: 2, + projection: { + type: 'naturalEarth1' + } + } + ] +}; +``` + +### Geographic Chart with Data Fields + +```typescript +const geoChart = { + type: 'map', + region: { + coordinate: 'geo', + roam: { blank: true }, + longitudeField: 'lng', + latitudeField: 'lat', + projection: { + type: 'albers', + center: [104, 38], + zoom: 1.2 + }, + zoomLimit: { + min: 0.8, + max: 5 + } + } +}; +``` + +### Region with Custom Styling + +```typescript +const styledRegion: RegionSpec = { + id: 'styled-region', + coordinate: 'cartesian', + style: { + fill: 'linear-gradient(90deg, #ff6b6b, #4ecdc4)', + stroke: '#333', + strokeWidth: 2, + cornerRadius: 8 + }, + padding: { left: 60, right: 40, top: 40, bottom: 80 }, + clip: true +}; +``` diff --git a/skills/vchart-development-skill/references/type-details/ShapeType-Type-Definition.md b/skills/vchart-development-skill/references/type-details/ShapeType-Type-Definition.md new file mode 100644 index 0000000000..a082ede888 --- /dev/null +++ b/skills/vchart-development-skill/references/type-details/ShapeType-Type-Definition.md @@ -0,0 +1,46 @@ +## ShapeType Type Definition + +```typescript +type ShapeType = + | 'circle' // Default shape for most components + | 'square' // Square shape + | 'rect' // Rectangle shape + | 'triangle' // Triangle pointing up + | 'diamond' // Diamond shape + | 'star' // Five-pointed star + | 'triangleUp' // Upward triangle + | 'triangleDown' // Downward triangle + | 'triangleLeft' // Left triangle + | 'triangleRight' // Right triangle + | 'triangleForward' // Forward triangle + | 'cross' // Cross/plus shape + | 'wye' // Y-shaped symbol + | 'pentagon' // Pentagon shape + | 'cardioid' // Heart-like shape + | string; // Custom path or other symbols +``` + +## Usage Examples + +```typescript +// Basic usage +const pointStyle = { + symbolType: 'circle' as ShapeType, + size: 10 +}; + +// In chart configuration +const scatterChart = { + point: { + style: { + shape: 'diamond' as ShapeType + } + } +}; + +// Shape style interface +const shapeConfig: IShapeStyle = { + shape: 'star', + size: 15 +}; +``` diff --git a/skills/vchart-development-skill/references/type-details/SunburstLabelConfig-Type-Definition.md b/skills/vchart-development-skill/references/type-details/SunburstLabelConfig-Type-Definition.md new file mode 100644 index 0000000000..a2d7732cb4 --- /dev/null +++ b/skills/vchart-development-skill/references/type-details/SunburstLabelConfig-Type-Definition.md @@ -0,0 +1,21 @@ +```typescript +interface SunburstLabelConfig { + /** + * 标签对齐方式 + * @default 'center' + */ + align?: 'center' | 'start' | 'end'; + + /** + * 标签旋转方式 + * @default 'radial' + */ + rotate?: 'radial' | 'tangential'; + + /** + * 标签偏移距离 + * @default 0 + */ + offset?: number; +} +``` diff --git a/skills/vchart-development-skill/references/type-details/TextShapeMask-Type-Definition.md b/skills/vchart-development-skill/references/type-details/TextShapeMask-Type-Definition.md new file mode 100644 index 0000000000..07a9eb6d45 --- /dev/null +++ b/skills/vchart-development-skill/references/type-details/TextShapeMask-Type-Definition.md @@ -0,0 +1,22 @@ +```typescript +interface TextShapeMask { + /** Specifies shape cloud generation based on text outline */ + type: 'text'; + /** Text content for the outline */ + text: string; + /** Whether to create hollow shape, filling only background area */ + hollow?: boolean; + /** Background color */ + backgroundColor?: string; + /** Fill color */ + fill?: string; + /** Font family for text outline */ + fontFamily?: string; + /** Font weight for text outline */ + fontWeight?: string | number; + /** Font style for text outline */ + fontStyle?: string; + /** Font variant for text outline */ + fontVariant?: string; +} +``` diff --git a/skills/vchart-development-skill/references/type-details/WordCloudConfigType-Type-Definition.md b/skills/vchart-development-skill/references/type-details/WordCloudConfigType-Type-Definition.md new file mode 100644 index 0000000000..64405c18e8 --- /dev/null +++ b/skills/vchart-development-skill/references/type-details/WordCloudConfigType-Type-Definition.md @@ -0,0 +1,67 @@ +## Interface Definition + +```typescript +export type WordCloudConfigType = { + /** Text overflow handling strategy for canvas boundaries */ + drawOutOfBound?: DrawOutOfBoundType; + /** Ellipsis text configuration */ + ellipsis?: EllipsisType; + /** Layout mode for word cloud rendering */ + layoutMode?: 'fast' | 'grid' | 'default'; + /** Adaptive scaling configuration */ + zoomToFit: ZoomToFitType; + /** Progressive rendering configuration - layout time */ + progressiveTime?: number; + /** Progressive rendering configuration - layout steps */ + progressiveStep?: number; +}; +``` + +## Related Types + +### DrawOutOfBoundType + +Union type for text overflow handling strategies: + +```typescript +type DrawOutOfBoundType = 'clip' | 'hidden' | 'ellipsis'; +``` + +- **`'clip'`** - Draw overflow text and clip parts exceeding canvas +- **`'hidden'`** - Do not draw overflow text +- **`'ellipsis'`** - Draw overflow text with user-specified ellipsis replacement + +### EllipsisType + +Configuration for ellipsis text replacement: + +```typescript +type EllipsisType = { + /** Replacement string for overflow text */ + string?: string; + /** Length limit for text truncation */ + limitLength?: number; +}; +``` + +- **`string`** - Replacement text for overflow content (default: `'...'`) +- **`limitLength`** - Character limit beyond which ellipsis is applied + +### ZoomToFitType + +Configuration for adaptive font size scaling: + +```typescript +type ZoomToFitType = { + /** Whether to repeat scaling attempts */ + repeat?: boolean; + /** Whether to allow font size reduction */ + shrink?: boolean; + /** Whether to allow font size enlargement */ + enlarge?: boolean; + /** Minimum font size when shrinking */ + fontSizeLimitMin?: number; + /** Maximum font size when enlarging */ + fontSizeLimitMax?: number; +}; +``` diff --git a/skills/vchart-development-skill/references/type-details/WordCloudShapeConfigType-Type-Definition.md b/skills/vchart-development-skill/references/type-details/WordCloudShapeConfigType-Type-Definition.md new file mode 100644 index 0000000000..f3637eaa3b --- /dev/null +++ b/skills/vchart-development-skill/references/type-details/WordCloudShapeConfigType-Type-Definition.md @@ -0,0 +1,58 @@ +```typescript +export type WordCloudShapeConfigType = { + /** Filling words - color channel field */ + fillingSeriesField?: string; + /** Filling words - color list */ + fillingColorList?: string[]; + /** Filling words - font family field */ + fillingFontFamilyField?: string; + /** Filling words - font weight field */ + fillingFontWeightField?: string; + /** Filling words - font style field */ + fillingFontStyleField?: string; + /** Filling words - direct hex color field */ + fillingColorHexField?: string; + /** Filling words - rotatable angles random range */ + fillingRotateAngles?: number[]; + /** Overall layout - expected ratio for core words auto-calculation */ + ratio?: number; + /** Overall layout - whether to remove white borders from input image */ + removeWhiteBorder?: boolean; + /** Overall layout - layout mode */ + layoutMode?: 'default' | 'ensureMapping' | 'ensureMappingEnlarge'; + /** Filling layout - filling text iteration count */ + fillingTimes?: number; + /** Filling layout - x advancement range during filling */ + fillingXStep?: number; + /** Filling layout - y advancement range during filling */ + fillingYStep?: number; + /** Filling layout - x advancement range as width ratio */ + fillingXRatioStep?: number; + /** Filling layout - y advancement range as height ratio */ + fillingYRatioStep?: number; + /** Filling layout - initial font size for filling text */ + fillingInitialFontSize?: number; + /** Filling layout - font size reduction value per iteration */ + fillingDeltaFontSize?: number; + /** Filling layout - initial opacity for filling text */ + fillingInitialOpacity?: number; + /** Filling layout - opacity reduction value per iteration */ + fillingDeltaOpacity?: number; + /** Filling layout - word layout attempt count */ + textLayoutTimes?: number; + /** Filling layout - font size shrink factor after layout failure */ + fontSizeShrinkFactor?: number; + /** Filling layout - layout step factor coefficient */ + stepFactor?: number; + /** Filling layout - important word count */ + importantWordCount?: number; + /** Filling layout - global font size shrink limit */ + globalShinkLimit?: number; + /** Filling layout - font size enlarge factor after layout success */ + fontSizeEnlargeFactor?: number; + /** Filling layout - font size reduction factor per iteration for auto-calculated filling words */ + fillingDeltaFontSizeFactor?: number; + /** Filling layout - expected ratio for filling words auto-calculation */ + fillingRatio?: number; +}; +``` diff --git a/skills/vchart-development-skill/references/type-details/WordCloudShapeType-Type-Definition.md b/skills/vchart-development-skill/references/type-details/WordCloudShapeType-Type-Definition.md new file mode 100644 index 0000000000..ebbad74365 --- /dev/null +++ b/skills/vchart-development-skill/references/type-details/WordCloudShapeType-Type-Definition.md @@ -0,0 +1,26 @@ +```typescript +type WordCloudShapeType = + | 'triangleForward' + | 'triangle' + | 'diamond' + | 'square' + | 'star' + | 'cardioid' + | 'circle' + | 'pentagon' + | 'rect'; +``` + +## Type Composition + +`WordCloudShapeType` is a union of string literal types derived from the keys of the `shapes` object. Based on the available shape constants and documentation, the type includes these predefined shape names: + +- `'triangleForward'` - Right arrow shape +- `'triangle'` - Triangle shape +- `'diamond'` - Diamond shape +- `'square'` - Square shape +- `'star'` - Star shape +- `'cardioid'` - Heart shape +- `'circle'` - Circle shape +- `'pentagon'` - Pentagon shape +- `'rect'` - Rectangle shape diff --git a/skills/vchart-development-skill/references/type-meta/area.json b/skills/vchart-development-skill/references/type-meta/area.json new file mode 100644 index 0000000000..28e746aebf --- /dev/null +++ b/skills/vchart-development-skill/references/type-meta/area.json @@ -0,0 +1,1209 @@ +{ + "typeName": "IAreaChartSpec", + "description": "IAreaChartSpec 配置规范的完整实现分析", + "inheritanceTree": { + "IAreaChartSpec": { + "description": "IAreaChartSpec 接口配置", + "directExtends": [ + "ICartesianChartSpec", + "IChartExtendsSeriesSpec" + ], + "ownProperties": [ + { + "name": "type", + "description": "type 配置", + "type": "'area'", + "originalType": "'area'", + "required": true, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "series", + "description": "系列配置", + "type": "IAreaSeriesSpec[]", + "originalType": "IAreaSeriesSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IAreaSeriesSpec" + ] + } + ] + }, + "ICartesianChartSpec": { + "description": "ICartesianChartSpec 接口配置", + "directExtends": [ + "IChartSpec" + ], + "ownProperties": [ + { + "name": "direction", + "description": "图表的方向配置。 - 'vertical' 垂直布局，即常见的直角坐标系布局，x 轴位于底部，y 轴位于左侧。 - 'horizontal' 水平布局，可理解为 x 轴和 y 轴位置互换。", + "type": "'default' | 'reverse'", + "originalType": "DirectionType", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "axes", + "description": "笛卡尔坐标系的坐标轴配置", + "type": "ICartesianAxisSpec[]", + "originalType": "ICartesianAxisSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICartesianAxisSpec" + ] + }, + { + "name": "crosshair", + "description": "十字辅助线配置", + "type": "ICartesianCrosshairSpec | ICartesianCrosshairSpec[]", + "originalType": "ICartesianCrosshairSpec | ICartesianCrosshairSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICartesianCrosshairSpec" + ] + }, + { + "name": "markLine", + "description": "参考线配置", + "type": "IMarkLineSpec | IMarkLineSpec[]", + "originalType": "IMarkLineSpec | IMarkLineSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMarkLineSpec" + ] + }, + { + "name": "markArea", + "description": "参考区域配置", + "type": "IMarkAreaSpec | IMarkAreaSpec[]", + "originalType": "IMarkAreaSpec | IMarkAreaSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMarkAreaSpec" + ] + }, + { + "name": "markPoint", + "description": "参考点配置", + "type": "IMarkPointSpec | IMarkPointSpec[]", + "originalType": "IMarkPointSpec | IMarkPointSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMarkPointSpec" + ] + } + ] + }, + "IChartSpec": { + "description": "IChartSpec 接口配置", + "directExtends": [], + "ownProperties": [ + { + "name": "type", + "description": "图表类型", + "type": "string", + "originalType": "string", + "required": true, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "data", + "description": "data 配置", + "type": "IData", + "originalType": "IData", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IData" + ] + }, + { + "name": "width", + "description": "画布宽度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "height", + "description": "画布高度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "autoFit", + "description": "是否自适应容器大小", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "padding", + "description": "图表整体 padding 设置", + "type": "ILayoutPaddingSpec", + "originalType": "ILayoutPaddingSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ILayoutPaddingSpec" + ] + }, + { + "name": "color", + "description": "图表色系配置", + "type": "string[] | Omit, 'id'>", + "originalType": "string[] | Omit, 'id'>", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IVisualSpecScale" + ] + }, + { + "name": "series", + "description": "series 配置", + "type": "ISeriesSpec[]", + "originalType": "ISeriesSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISeriesSpec" + ] + }, + { + "name": "seriesStyle", + "description": "系列样式", + "type": "ISeriesStyle", + "originalType": "ISeriesStyle", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISeriesStyle" + ] + }, + { + "name": "animationThreshold", + "description": "自动关闭动画的阀值，对应的是单系列data的长度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "hover", + "description": "hover 交互", + "type": "boolean | IHoverSpec", + "originalType": "boolean | IHoverSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IHoverSpec" + ] + }, + { + "name": "select", + "description": "select 交互", + "type": "boolean | ISelectSpec", + "originalType": "boolean | ISelectSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISelectSpec" + ] + }, + { + "name": "region", + "description": "region配置", + "type": "RegionSpec[]", + "originalType": "RegionSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "RegionSpec" + ] + }, + { + "name": "title", + "description": "图表标题配置", + "type": "ITitleSpec", + "originalType": "ITitleSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ITitleSpec" + ] + }, + { + "name": "layout", + "description": "自定义布局函数", + "type": "ILayoutSpec", + "originalType": "ILayoutSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ILayoutSpec" + ] + }, + { + "name": "legends", + "description": "图例配置", + "type": "ILegendSpec | ILegendSpec[]", + "originalType": "ILegendSpec | ILegendSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ILegendSpec" + ] + }, + { + "name": "crosshair", + "description": "十字辅助线配置", + "type": "ICrosshairSpec | ICrosshairSpec[]", + "originalType": "ICrosshairSpec | ICrosshairSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICrosshairSpec" + ] + }, + { + "name": "tooltip", + "description": "tooltip配置", + "type": "ITooltipSpec", + "originalType": "ITooltipSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ITooltipSpec" + ] + }, + { + "name": "player", + "description": "播放器配置", + "type": "IPlayer", + "originalType": "IPlayer", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IPlayer" + ] + }, + { + "name": "dataZoom", + "description": "缩略轴配置", + "type": "IDataZoomSpec | IDataZoomSpec[]", + "originalType": "IDataZoomSpec | IDataZoomSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IDataZoomSpec" + ] + }, + { + "name": "scrollBar", + "description": "滚动条配置", + "type": "IScrollBarSpec | IScrollBarSpec[]", + "originalType": "IScrollBarSpec | IScrollBarSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IScrollBarSpec" + ] + }, + { + "name": "brush", + "description": "框选配置", + "type": "IBrushSpec", + "originalType": "IBrushSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IBrushSpec" + ] + }, + { + "name": "scales", + "description": "全局 scale 配置", + "type": "IVisualSpecScale[]", + "originalType": "IVisualSpecScale[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IVisualSpecScale" + ] + }, + { + "name": "customMark", + "description": "自定义mark", + "type": "ICustomMarkSpec[]", + "originalType": "ICustomMarkSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICustomMarkSpec" + ] + }, + { + "name": "axes", + "description": "axes 配置", + "type": "ICommonAxisSpec[]", + "originalType": "ICommonAxisSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICommonAxisSpec" + ] + }, + { + "name": "theme", + "description": "默认主题（支持完整主题对象或者主题名称，主题名称需要提前在 `ThemeManager` 中注册）", + "type": "Omit | string", + "originalType": "Omit | string", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ITheme" + ] + }, + { + "name": "background", + "description": "图表背景色配置，优先级高于构造函数中的 background 配置 自1.11.6版本支持渐变色对象的配置", + "type": "IBackgroundSpec", + "originalType": "IBackgroundSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IBackgroundSpec" + ] + }, + { + "name": "stackInverse", + "description": "堆积时是否逆序", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "stackSort", + "description": "堆积时是否排序", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "media", + "description": "媒体查询配置", + "type": "IMediaQuerySpec", + "originalType": "IMediaQuerySpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMediaQuerySpec" + ] + } + ] + }, + "IChartExtendsSeriesSpec": { + "description": "IAreaSeriesSpec 的属性（排除 data, morph, stackValue, tooltip）", + "directExtends": [], + "ownProperties": [ + { + "name": "hover", + "description": "图表hover相关交互配置，当值为boolean类型时，表示开启或者关闭该交互 也支持更详细的交互配置", + "type": "IHoverSpec | boolean", + "originalType": "IHoverSpec | boolean", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IHoverSpec" + ], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "select", + "description": "图表选中相关交互配置，当值为boolean类型时，表示开启或者关闭该交互 也支持更详细的交互配置", + "type": "ISelectSpec | boolean", + "originalType": "ISelectSpec | boolean", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISelectSpec" + ], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "interactions", + "description": "其他需要按需注册的类型交互", + "type": "IInteractionItemSpec[]", + "originalType": "IInteractionItemSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IInteractionItemSpec" + ], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "type", + "description": "系列类型", + "type": "'area'", + "originalType": "'area'", + "required": true, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "name", + "description": "系列名称", + "type": "string", + "originalType": "string", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "id", + "description": "数据唯一标识", + "type": "string | number", + "originalType": "StringOrNumber", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "dataIndex", + "description": "系列关联的数据索引", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "dataId", + "description": "系列关联的数据id", + "type": "string | number", + "originalType": "StringOrNumber", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "dataKey", + "description": "dataKey用于绑定数据与Mark的关系, 该配置在动画中非常重要.", + "type": "string | string[] | ((data: Datum, index: number) => string)", + "originalType": "DataKeyType", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "regionIndex", + "description": "系列关联的region索引", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "regionId", + "description": "系列关联的region id", + "type": "string | number", + "originalType": "StringOrNumber", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "seriesField", + "description": "分组字段", + "type": "string", + "originalType": "string", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "seriesStyle", + "description": "系列样式", + "type": "ISeriesStyle", + "originalType": "ISeriesStyle", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISeriesStyle" + ], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "stack", + "description": "是否对数据进行堆叠处理", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "totalLabel", + "description": "堆叠汇总标签", + "type": "ITotalLabelSpec", + "originalType": "ITotalLabelSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ITotalLabelSpec" + ], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "percent", + "description": "是否对数据进行百分比处理", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "stackOffsetSilhouette", + "description": "是否围绕中心轴偏移轮廓", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "invalidType", + "description": "非合规数据点连接方式 'break'指在该数据点处断开 'link' 指忽略该点保持连续 'zero' 指该点默认数值为0 'ignore' 指不处理", + "type": "'zero' | 'ignore' | 'link' | 'break'", + "originalType": "IInvalidType", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "animation", + "description": "是否开启动画", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "animationThreshold", + "description": "自动关闭动画的阀值，对应的是单系列data的长度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "support3d", + "description": "是否支持3d视角", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "extensionMark", + "description": "系列的扩展mark，能够获取系列上的数据", + "type": "(IExtensionMarkSpec> | IExtensionGroupMarkSpec)[]", + "originalType": "(IExtensionMarkSpec> | IExtensionGroupMarkSpec)[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IExtensionMarkSpec", + "IExtensionGroupMarkSpec" + ], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "zIndex", + "description": "今当通过`series`配置的时候，才会生效", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "direction", + "description": "direction row means layout by rows，col means layout by columns", + "type": "'default' | 'reverse'", + "originalType": "DirectionType", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "xField", + "description": "x轴字段", + "type": "string | string[]", + "originalType": "string | string[]", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "x2Field", + "description": "用于区间数据，声明区间末尾的数据字段。", + "type": "string", + "originalType": "string", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "yField", + "description": "y轴字段", + "type": "string | string[]", + "originalType": "string | string[]", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "y2Field", + "description": "用于区间数据，声明区间末尾的数据字段。", + "type": "string", + "originalType": "string", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "zField", + "description": "z轴字段 用于3d散点图等", + "type": "string | string[]", + "originalType": "string | string[]", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "sortDataByAxis", + "description": "是否将数据按照数轴排序", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "animationAppear", + "description": "入场动画配置", + "type": "'clipIn' | 'fadeIn' | 'grow' | IAnimationConfig", + "originalType": "IAnimationConfig", + "required": false, + "category": "动画配置", + "isSimple": false, + "dependencies": [ + "IAnimationConfig" + ], + "inheritedFrom": "IAnimationSpec" + }, + { + "name": "animationEnter", + "description": "数据新增动画配置", + "type": "IAnimationConfig", + "originalType": "IAnimationConfig", + "required": false, + "category": "动画配置", + "isSimple": false, + "dependencies": [ + "IAnimationConfig" + ], + "inheritedFrom": "IAnimationSpec" + }, + { + "name": "animationUpdate", + "description": "数据更新动画配置", + "type": "IAnimationConfig", + "originalType": "IAnimationConfig", + "required": false, + "category": "动画配置", + "isSimple": false, + "dependencies": [ + "IAnimationConfig" + ], + "inheritedFrom": "IAnimationSpec" + }, + { + "name": "animationExit", + "description": "数据移除动画配置", + "type": "IAnimationConfig", + "originalType": "IAnimationConfig", + "required": false, + "category": "动画配置", + "isSimple": false, + "dependencies": [ + "IAnimationConfig" + ], + "inheritedFrom": "IAnimationSpec" + }, + { + "name": "activePoint", + "description": "是否使用额外的 activePoint 显示交互点，可以在点隐藏时显示被交互的点", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "sampling", + "description": "数据采样 - 采样方法", + "type": "'lttb' | 'min' | 'max' | 'sum' | 'average'", + "originalType": "ISamplingMethod", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IDataSamping" + }, + { + "name": "samplingFactor", + "description": "数据采样 - 采样系数", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IDataSamping" + }, + { + "name": "pointDis", + "description": "标记点之间的距离，px", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IMarkOverlap" + }, + { + "name": "pointDisMul", + "description": "标记点之间的距离， pointSize 的倍数", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IMarkOverlap" + }, + { + "name": "markOverlap", + "description": "是否允许标记图形相互覆盖", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IMarkOverlap" + }, + { + "name": "point", + "description": "point 配置", + "type": "IMarkSpec", + "originalType": "IMarkSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMarkSpec", + "ISymbolMarkSpec" + ] + }, + { + "name": "line", + "description": "line 配置", + "type": "IMarkSpec", + "originalType": "IMarkSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMarkSpec", + "ILineMarkSpec" + ] + }, + { + "name": "area", + "description": "area 配置", + "type": "IMarkSpec", + "originalType": "IMarkSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMarkSpec", + "IAreaMarkSpec" + ] + }, + { + "name": "label", + "description": "label 配置", + "type": "IMultiLabelSpec & {\n position: 'top' | 'bottom' | 'left' | 'right' | 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'center' | 'inside-middle';\n }>", + "originalType": "IMultiLabelSpec & {\n position: 'top' | 'bottom' | 'left' | 'right' | 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'center' | 'inside-middle';\n }>", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMultiLabelSpec", + "ILineLikeLabelSpec" + ] + }, + { + "name": "areaLabel", + "description": "areaLabel 配置", + "type": "Omit & {\n position?: 'start' | 'end';\n }", + "originalType": "Omit & {\n position?: 'start' | 'end';\n }", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ILabelSpec" + ] + }, + { + "name": "seriesMark", + "description": "系列主 mark 类型配置，该配置会影响图例的展示", + "type": "'point' | 'line' | 'area'", + "originalType": "'point' | 'line' | 'area'", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + } + ], + "note": "展开自 Omit - 包含 46 个属性（已展开所有继承）", + "expandedFrom": "IAreaSeriesSpec", + "omittedKeys": [ + "data", + "morph", + "stackValue", + "tooltip" + ] + } + }, + "timestamp": "2025-08-06T07:32:36.587Z", + "version": "1.0.0", + "sourceFile": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/chart/area/interface.d.ts", + "complexTypeDefinitions": { + "IAreaSeriesSpec": { + "typeName": "IAreaSeriesSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/series/area/interface.d.ts", + "note": "类型 IAreaSeriesSpec 的定义位置" + }, + "ICartesianAxisSpec": { + "typeName": "ICartesianAxisSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/axis/cartesian/interface/spec.d.ts", + "note": "类型 ICartesianAxisSpec 的定义位置" + }, + "ICartesianCrosshairSpec": { + "typeName": "ICartesianCrosshairSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/crosshair/interface/spec.d.ts", + "note": "类型 ICartesianCrosshairSpec 的定义位置" + }, + "IMarkLineSpec": { + "typeName": "IMarkLineSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/marker/mark-line/interface/spec.d.ts", + "note": "类型 IMarkLineSpec 的定义位置" + }, + "IMarkAreaSpec": { + "typeName": "IMarkAreaSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/marker/mark-area/interface/spec.d.ts", + "note": "类型 IMarkAreaSpec 的定义位置" + }, + "IMarkPointSpec": { + "typeName": "IMarkPointSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/marker/mark-point/interface/spec.d.ts", + "note": "类型 IMarkPointSpec 的定义位置" + }, + "IData": { + "typeName": "IData", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 IData 的定义位置" + }, + "ILayoutPaddingSpec": { + "typeName": "ILayoutPaddingSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/layout.d.ts", + "note": "类型 ILayoutPaddingSpec 的定义位置" + }, + "IVisualSpecScale": { + "typeName": "IVisualSpecScale", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/visual.d.ts", + "note": "类型 IVisualSpecScale 的定义位置" + }, + "ISeriesSpec": { + "typeName": "ISeriesSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 ISeriesSpec 的定义位置" + }, + "ISeriesStyle": { + "typeName": "ISeriesStyle", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/series/interface/common.d.ts", + "note": "类型 ISeriesStyle 的定义位置" + }, + "IHoverSpec": { + "typeName": "IHoverSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/interaction/interface/spec.d.ts", + "note": "类型 IHoverSpec 的定义位置" + }, + "ISelectSpec": { + "typeName": "ISelectSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/interaction/interface/spec.d.ts", + "note": "类型 ISelectSpec 的定义位置" + }, + "RegionSpec": { + "typeName": "RegionSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/region/interface.d.ts", + "note": "类型 RegionSpec 的定义位置" + }, + "ITitleSpec": { + "typeName": "ITitleSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/title/interface/spec.d.ts", + "note": "类型 ITitleSpec 的定义位置" + }, + "ILayoutSpec": { + "typeName": "ILayoutSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/layout/interface.d.ts", + "note": "类型 ILayoutSpec 的定义位置" + }, + "ILegendSpec": { + "typeName": "ILegendSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/legend/interface.d.ts", + "note": "类型 ILegendSpec 的定义位置" + }, + "ICrosshairSpec": { + "typeName": "ICrosshairSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/crosshair/interface/spec.d.ts", + "note": "类型 ICrosshairSpec 的定义位置" + }, + "ITooltipSpec": { + "typeName": "ITooltipSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/tooltip/interface/spec.d.ts", + "note": "类型 ITooltipSpec 的定义位置" + }, + "IPlayer": { + "typeName": "IPlayer", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/player/interface/spec.d.ts", + "note": "类型 IPlayer 的定义位置" + }, + "IDataZoomSpec": { + "typeName": "IDataZoomSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/data-zoom/data-zoom/interface.d.ts", + "note": "类型 IDataZoomSpec 的定义位置" + }, + "IScrollBarSpec": { + "typeName": "IScrollBarSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/data-zoom/scroll-bar/interface.d.ts", + "note": "类型 IScrollBarSpec 的定义位置" + }, + "IBrushSpec": { + "typeName": "IBrushSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/brush/interface.d.ts", + "note": "类型 IBrushSpec 的定义位置" + }, + "ICustomMarkSpec": { + "typeName": "ICustomMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 ICustomMarkSpec 的定义位置" + }, + "ICommonAxisSpec": { + "typeName": "ICommonAxisSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/axis/interface.d.ts", + "note": "类型 ICommonAxisSpec 的定义位置" + }, + "ITheme": { + "typeName": "ITheme", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/theme/interface.d.ts", + "note": "类型 ITheme 的定义位置" + }, + "IBackgroundSpec": { + "typeName": "IBackgroundSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 IBackgroundSpec 的定义位置" + }, + "IMediaQuerySpec": { + "typeName": "IMediaQuerySpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/media-query.d.ts", + "note": "类型 IMediaQuerySpec 的定义位置" + }, + "IInteractionItemSpec": { + "typeName": "IInteractionItemSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/interaction/interface/spec.d.ts", + "note": "类型 IInteractionItemSpec 的定义位置" + }, + "ITotalLabelSpec": { + "typeName": "ITotalLabelSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/label/interface.d.ts", + "note": "类型 ITotalLabelSpec 的定义位置" + }, + "IExtensionMarkSpec": { + "typeName": "IExtensionMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 IExtensionMarkSpec 的定义位置" + }, + "IExtensionGroupMarkSpec": { + "typeName": "IExtensionGroupMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 IExtensionGroupMarkSpec 的定义位置" + }, + "IAnimationConfig": { + "typeName": "IAnimationConfig", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart/src/typings/spec/common.ts", + "note": "类型 IAnimationConfig 的定义位置" + }, + "IMarkSpec": { + "typeName": "IMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 IMarkSpec 的定义位置" + }, + "ISymbolMarkSpec": { + "typeName": "ISymbolMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/visual.d.ts", + "note": "类型 ISymbolMarkSpec 的定义位置" + }, + "ILineMarkSpec": { + "typeName": "ILineMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/visual.d.ts", + "note": "类型 ILineMarkSpec 的定义位置" + }, + "IAreaMarkSpec": { + "typeName": "IAreaMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/visual.d.ts", + "note": "类型 IAreaMarkSpec 的定义位置" + } + }, + "statistics": { + "totalInterfaces": 4, + "totalProperties": 84, + "complexTypes": 37, + "typeFileLocations": 37, + "dependencyTypes": 865 + } +} \ No newline at end of file diff --git a/skills/vchart-development-skill/references/type-meta/bar.json b/skills/vchart-development-skill/references/type-meta/bar.json new file mode 100644 index 0000000000..9eadd0f9c3 --- /dev/null +++ b/skills/vchart-development-skill/references/type-meta/bar.json @@ -0,0 +1,1225 @@ +{ + "typeName": "IBarChartSpec", + "description": "IBarChartSpec 配置规范的完整实现分析", + "inheritanceTree": { + "IBarChartSpec": { + "description": "IBarChartSpec 接口配置", + "directExtends": [ + "ICartesianChartSpec", + "IChartExtendsSeriesSpec" + ], + "ownProperties": [ + { + "name": "type", + "description": "type 配置", + "type": "'bar'", + "originalType": "'bar'", + "required": true, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "series", + "description": "系列配置", + "type": "IBarSeriesSpec[]", + "originalType": "IBarSeriesSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IBarSeriesSpec" + ] + }, + { + "name": "autoBandSize", + "description": "是否开启自动 bandSize。如果开启，会根据传入的 barWidth 等配置自动计算 bandSize，从而影响轴实际长度", + "type": "boolean | {\n extend: number;\n }", + "originalType": "boolean | {\n extend: number;\n }", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + } + ] + }, + "ICartesianChartSpec": { + "description": "ICartesianChartSpec 接口配置", + "directExtends": [ + "IChartSpec" + ], + "ownProperties": [ + { + "name": "direction", + "description": "图表的方向配置。 - 'vertical' 垂直布局，即常见的直角坐标系布局，x 轴位于底部，y 轴位于左侧。 - 'horizontal' 水平布局，可理解为 x 轴和 y 轴位置互换。", + "type": "'default' | 'reverse'", + "originalType": "DirectionType", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "axes", + "description": "笛卡尔坐标系的坐标轴配置", + "type": "ICartesianAxisSpec[]", + "originalType": "ICartesianAxisSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICartesianAxisSpec" + ] + }, + { + "name": "crosshair", + "description": "十字辅助线配置", + "type": "ICartesianCrosshairSpec | ICartesianCrosshairSpec[]", + "originalType": "ICartesianCrosshairSpec | ICartesianCrosshairSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICartesianCrosshairSpec" + ] + }, + { + "name": "markLine", + "description": "参考线配置", + "type": "IMarkLineSpec | IMarkLineSpec[]", + "originalType": "IMarkLineSpec | IMarkLineSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMarkLineSpec" + ] + }, + { + "name": "markArea", + "description": "参考区域配置", + "type": "IMarkAreaSpec | IMarkAreaSpec[]", + "originalType": "IMarkAreaSpec | IMarkAreaSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMarkAreaSpec" + ] + }, + { + "name": "markPoint", + "description": "参考点配置", + "type": "IMarkPointSpec | IMarkPointSpec[]", + "originalType": "IMarkPointSpec | IMarkPointSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMarkPointSpec" + ] + } + ] + }, + "IChartSpec": { + "description": "IChartSpec 接口配置", + "directExtends": [], + "ownProperties": [ + { + "name": "type", + "description": "图表类型", + "type": "string", + "originalType": "string", + "required": true, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "data", + "description": "data 配置", + "type": "IData", + "originalType": "IData", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IData" + ] + }, + { + "name": "width", + "description": "画布宽度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "height", + "description": "画布高度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "autoFit", + "description": "是否自适应容器大小", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "padding", + "description": "图表整体 padding 设置", + "type": "ILayoutPaddingSpec", + "originalType": "ILayoutPaddingSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ILayoutPaddingSpec" + ] + }, + { + "name": "color", + "description": "图表色系配置", + "type": "string[] | Omit, 'id'>", + "originalType": "string[] | Omit, 'id'>", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IVisualSpecScale" + ] + }, + { + "name": "series", + "description": "series 配置", + "type": "ISeriesSpec[]", + "originalType": "ISeriesSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISeriesSpec" + ] + }, + { + "name": "seriesStyle", + "description": "系列样式", + "type": "ISeriesStyle", + "originalType": "ISeriesStyle", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISeriesStyle" + ] + }, + { + "name": "animationThreshold", + "description": "自动关闭动画的阀值，对应的是单系列data的长度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "hover", + "description": "hover 交互", + "type": "boolean | IHoverSpec", + "originalType": "boolean | IHoverSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IHoverSpec" + ] + }, + { + "name": "select", + "description": "select 交互", + "type": "boolean | ISelectSpec", + "originalType": "boolean | ISelectSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISelectSpec" + ] + }, + { + "name": "region", + "description": "region配置", + "type": "RegionSpec[]", + "originalType": "RegionSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "RegionSpec" + ] + }, + { + "name": "title", + "description": "图表标题配置", + "type": "ITitleSpec", + "originalType": "ITitleSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ITitleSpec" + ] + }, + { + "name": "layout", + "description": "自定义布局函数", + "type": "ILayoutSpec", + "originalType": "ILayoutSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ILayoutSpec" + ] + }, + { + "name": "legends", + "description": "图例配置", + "type": "ILegendSpec | ILegendSpec[]", + "originalType": "ILegendSpec | ILegendSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ILegendSpec" + ] + }, + { + "name": "crosshair", + "description": "十字辅助线配置", + "type": "ICrosshairSpec | ICrosshairSpec[]", + "originalType": "ICrosshairSpec | ICrosshairSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICrosshairSpec" + ] + }, + { + "name": "tooltip", + "description": "tooltip配置", + "type": "ITooltipSpec", + "originalType": "ITooltipSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ITooltipSpec" + ] + }, + { + "name": "player", + "description": "播放器配置", + "type": "IPlayer", + "originalType": "IPlayer", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IPlayer" + ] + }, + { + "name": "dataZoom", + "description": "缩略轴配置", + "type": "IDataZoomSpec | IDataZoomSpec[]", + "originalType": "IDataZoomSpec | IDataZoomSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IDataZoomSpec" + ] + }, + { + "name": "scrollBar", + "description": "滚动条配置", + "type": "IScrollBarSpec | IScrollBarSpec[]", + "originalType": "IScrollBarSpec | IScrollBarSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IScrollBarSpec" + ] + }, + { + "name": "brush", + "description": "框选配置", + "type": "IBrushSpec", + "originalType": "IBrushSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IBrushSpec" + ] + }, + { + "name": "scales", + "description": "全局 scale 配置", + "type": "IVisualSpecScale[]", + "originalType": "IVisualSpecScale[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IVisualSpecScale" + ] + }, + { + "name": "customMark", + "description": "自定义mark", + "type": "ICustomMarkSpec[]", + "originalType": "ICustomMarkSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICustomMarkSpec" + ] + }, + { + "name": "axes", + "description": "axes 配置", + "type": "ICommonAxisSpec[]", + "originalType": "ICommonAxisSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICommonAxisSpec" + ] + }, + { + "name": "theme", + "description": "默认主题（支持完整主题对象或者主题名称，主题名称需要提前在 `ThemeManager` 中注册）", + "type": "Omit | string", + "originalType": "Omit | string", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ITheme" + ] + }, + { + "name": "background", + "description": "图表背景色配置，优先级高于构造函数中的 background 配置 自1.11.6版本支持渐变色对象的配置", + "type": "IBackgroundSpec", + "originalType": "IBackgroundSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IBackgroundSpec" + ] + }, + { + "name": "stackInverse", + "description": "堆积时是否逆序", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "stackSort", + "description": "堆积时是否排序", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "media", + "description": "媒体查询配置", + "type": "IMediaQuerySpec", + "originalType": "IMediaQuerySpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMediaQuerySpec" + ] + } + ] + }, + "IChartExtendsSeriesSpec": { + "description": "IBarSeriesSpec 的属性（排除 data, morph, stackValue, tooltip）", + "directExtends": [], + "ownProperties": [ + { + "name": "hover", + "description": "图表hover相关交互配置，当值为boolean类型时，表示开启或者关闭该交互 也支持更详细的交互配置", + "type": "IHoverSpec | boolean", + "originalType": "IHoverSpec | boolean", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IHoverSpec" + ], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "select", + "description": "图表选中相关交互配置，当值为boolean类型时，表示开启或者关闭该交互 也支持更详细的交互配置", + "type": "ISelectSpec | boolean", + "originalType": "ISelectSpec | boolean", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISelectSpec" + ], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "interactions", + "description": "其他需要按需注册的类型交互", + "type": "IInteractionItemSpec[]", + "originalType": "IInteractionItemSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IInteractionItemSpec" + ], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "type", + "description": "系列类型", + "type": "'bar'", + "originalType": "'bar'", + "required": true, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "name", + "description": "系列名称", + "type": "string", + "originalType": "string", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "id", + "description": "数据唯一标识", + "type": "string | number", + "originalType": "StringOrNumber", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "dataIndex", + "description": "系列关联的数据索引", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "dataId", + "description": "系列关联的数据id", + "type": "string | number", + "originalType": "StringOrNumber", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "dataKey", + "description": "dataKey用于绑定数据与Mark的关系, 该配置在动画中非常重要.", + "type": "string | string[] | ((data: Datum, index: number) => string)", + "originalType": "DataKeyType", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "regionIndex", + "description": "系列关联的region索引", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "regionId", + "description": "系列关联的region id", + "type": "string | number", + "originalType": "StringOrNumber", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "seriesField", + "description": "分组字段", + "type": "string", + "originalType": "string", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "seriesStyle", + "description": "系列样式", + "type": "ISeriesStyle", + "originalType": "ISeriesStyle", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISeriesStyle" + ], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "stack", + "description": "是否对数据进行堆叠处理", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "totalLabel", + "description": "堆叠汇总标签", + "type": "ITotalLabelSpec", + "originalType": "ITotalLabelSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ITotalLabelSpec" + ], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "percent", + "description": "是否对数据进行百分比处理", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "stackOffsetSilhouette", + "description": "是否围绕中心轴偏移轮廓", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "invalidType", + "description": "非合规数据点连接方式 'break'指在该数据点处断开 'link' 指忽略该点保持连续 'zero' 指该点默认数值为0 'ignore' 指不处理", + "type": "'zero' | 'ignore' | 'link' | 'break'", + "originalType": "IInvalidType", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "animation", + "description": "是否开启动画", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "animationThreshold", + "description": "自动关闭动画的阀值，对应的是单系列data的长度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "support3d", + "description": "是否支持3d视角", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "extensionMark", + "description": "系列的扩展mark，能够获取系列上的数据", + "type": "(IExtensionMarkSpec> | IExtensionGroupMarkSpec)[]", + "originalType": "(IExtensionMarkSpec> | IExtensionGroupMarkSpec)[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IExtensionMarkSpec", + "IExtensionGroupMarkSpec" + ], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "zIndex", + "description": "今当通过`series`配置的时候，才会生效", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "direction", + "description": "direction row means layout by rows，col means layout by columns", + "type": "'default' | 'reverse'", + "originalType": "DirectionType", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "xField", + "description": "xField 配置", + "type": "string | string[]", + "originalType": "string | string[]", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "x2Field", + "description": "用于区间数据，声明区间末尾的数据字段。", + "type": "string", + "originalType": "string", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "yField", + "description": "yField 配置", + "type": "string | string[]", + "originalType": "string | string[]", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "y2Field", + "description": "用于区间数据，声明区间末尾的数据字段。", + "type": "string", + "originalType": "string", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "zField", + "description": "z轴字段 用于3d散点图等", + "type": "string | string[]", + "originalType": "string | string[]", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "sortDataByAxis", + "description": "是否将数据按照数轴排序", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "animationAppear", + "description": "入场动画配置", + "type": "\"grow\" | \"fadeIn\" | \"scaleIn\" | IAnimationConfig", + "originalType": "IAnimationConfig", + "required": false, + "category": "动画配置", + "isSimple": false, + "dependencies": [ + "IAnimationConfig" + ], + "inheritedFrom": "IAnimationSpec" + }, + { + "name": "animationEnter", + "description": "数据新增动画配置", + "type": "IAnimationConfig", + "originalType": "IAnimationConfig", + "required": false, + "category": "动画配置", + "isSimple": false, + "dependencies": [ + "IAnimationConfig" + ], + "inheritedFrom": "IAnimationSpec" + }, + { + "name": "animationUpdate", + "description": "数据更新动画配置", + "type": "IAnimationConfig", + "originalType": "IAnimationConfig", + "required": false, + "category": "动画配置", + "isSimple": false, + "dependencies": [ + "IAnimationConfig" + ], + "inheritedFrom": "IAnimationSpec" + }, + { + "name": "animationExit", + "description": "数据移除动画配置", + "type": "IAnimationConfig", + "originalType": "IAnimationConfig", + "required": false, + "category": "动画配置", + "isSimple": false, + "dependencies": [ + "IAnimationConfig" + ], + "inheritedFrom": "IAnimationSpec" + }, + { + "name": "activePoint", + "description": "是否使用额外的 activePoint 显示交互点，可以在点隐藏时显示被交互的点", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IDataSamping" + }, + { + "name": "sampling", + "description": "数据采样 - 采样方法", + "type": "'lttb' | 'min' | 'max' | 'sum' | 'average'", + "originalType": "ISamplingMethod", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IDataSamping" + }, + { + "name": "samplingFactor", + "description": "数据采样 - 采样系数", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IDataSamping" + }, + { + "name": "bar", + "description": "设置柱子的样式，比如填充颜色、描边粗细等", + "type": "IMarkSpec", + "originalType": "IMarkSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMarkSpec", + "IRectMarkSpec" + ] + }, + { + "name": "barBackground", + "description": "设置背景柱子的样式，比如填充颜色、圆角等", + "type": "IMarkSpec & IBarBackgroundSpec", + "originalType": "IMarkSpec & IBarBackgroundSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMarkSpec", + "IRectMarkSpec", + "IBarBackgroundSpec" + ] + }, + { + "name": "label", + "description": "数据标签，一般用于展示柱子对应的数值信息等", + "type": "IMultiLabelSpec & {\n position?: Functional<'outside' | 'top' | 'bottom' | 'left' | 'right' | 'inside' | 'inside-top' | 'inside-bottom' | 'inside-right' | 'inside-left' | 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'>;\n }>", + "originalType": "IMultiLabelSpec & {\n position?: Functional<'outside' | 'top' | 'bottom' | 'left' | 'right' | 'inside' | 'inside-top' | 'inside-bottom' | 'inside-right' | 'inside-left' | 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'>;\n }>", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMultiLabelSpec", + "ILabelSpec" + ] + }, + { + "name": "barWidth", + "description": "柱体宽度，可以设置绝对的像素值，也可以使用百分比（如 '10%'） 1. number 类型，表示像素值 2. string 类型，百分比用法，如 '10%'，该值为对应最后一个分组字段对应的 scale 的 bandWidth 占比(因为柱子是等宽的，所以采用最后一层分组的 scale)", + "type": "number | string", + "originalType": "number | string", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "barMinWidth", + "description": "柱体最小宽度，可以设置绝对的像素值，也可以使用百分比（如 '10%'） 1. number 类型，表示像素值 2. string 类型，百分比用法，如 '10%'，该值为对应最后一个分组字段对应的 scale 的 bandWidth 占比(因为柱子是等宽的，所以采用最后一层分组的 scale)", + "type": "number | string", + "originalType": "number | string", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "barMaxWidth", + "description": "柱体最大宽度，可以设置绝对的像素值，也可以使用百分比（如 '10%'） 1. number 类型，表示像素值 2. string 类型，百分比用法，如 '10%'，该值为对应最后一个分组字段对应的 scale 的 bandWidth 占比(因为柱子是等宽的，所以采用最后一层分组的 scale)", + "type": "number | string", + "originalType": "number | string", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "barGapInGroup", + "description": "分组柱图中各个分组内的柱子间距，可以设置绝对的像素值，也可以使用百分比（如 '10%'）。 当存在多层分组时，可以使用数组来设置不同层级的间距，如 [10, '20%']，表示第一层分组的间距为 10px，第二层分组的间距为 '20%'。 如果 barGapInGroup 的数组个数小于分组层数，则后面的分组间距使用最后一个值。 1. number 类型，表示像素值 2. string 类型，百分比用法，如 '10%'，该值为对应最后一个分组字段对应的 scale 的 bandWidth 占比(因为柱子是等宽的，所以采用最后一层分组的 scale)", + "type": "number | string | (number | string)[]", + "originalType": "number | string | (number | string)[]", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "barMinHeight", + "description": "柱条最小高度，可用于防止某数据项的值过小的视觉调整。", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "stackCornerRadius", + "description": "堆叠柱整体的圆角 @since 1.10.0 圆角支持回调配置 @since 1.12.4", + "type": "number | number[] | IStackCornerRadiusCallback", + "originalType": "number | number[] | IStackCornerRadiusCallback", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IStackCornerRadiusCallback" + ] + }, + { + "name": "barGap", + "description": "柱条间 gap 值 @since 1.13.11", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + } + ], + "note": "展开自 Omit - 包含 47 个属性（已展开所有继承）", + "expandedFrom": "IBarSeriesSpec", + "omittedKeys": [ + "data", + "morph", + "stackValue", + "tooltip" + ] + } + }, + "timestamp": "2025-08-06T07:33:33.094Z", + "version": "1.0.0", + "sourceFile": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/chart/bar/interface.d.ts", + "complexTypeDefinitions": { + "IBarSeriesSpec": { + "typeName": "IBarSeriesSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/series/bar/interface.d.ts", + "note": "类型 IBarSeriesSpec 的定义位置" + }, + "ICartesianAxisSpec": { + "typeName": "ICartesianAxisSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/axis/cartesian/interface/spec.d.ts", + "note": "类型 ICartesianAxisSpec 的定义位置" + }, + "ICartesianCrosshairSpec": { + "typeName": "ICartesianCrosshairSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/crosshair/interface/spec.d.ts", + "note": "类型 ICartesianCrosshairSpec 的定义位置" + }, + "IMarkLineSpec": { + "typeName": "IMarkLineSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/marker/mark-line/interface/spec.d.ts", + "note": "类型 IMarkLineSpec 的定义位置" + }, + "IMarkAreaSpec": { + "typeName": "IMarkAreaSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/marker/mark-area/interface/spec.d.ts", + "note": "类型 IMarkAreaSpec 的定义位置" + }, + "IMarkPointSpec": { + "typeName": "IMarkPointSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/marker/mark-point/interface/spec.d.ts", + "note": "类型 IMarkPointSpec 的定义位置" + }, + "IData": { + "typeName": "IData", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 IData 的定义位置" + }, + "ILayoutPaddingSpec": { + "typeName": "ILayoutPaddingSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/layout.d.ts", + "note": "类型 ILayoutPaddingSpec 的定义位置" + }, + "IVisualSpecScale": { + "typeName": "IVisualSpecScale", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/visual.d.ts", + "note": "类型 IVisualSpecScale 的定义位置" + }, + "ISeriesSpec": { + "typeName": "ISeriesSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 ISeriesSpec 的定义位置" + }, + "ISeriesStyle": { + "typeName": "ISeriesStyle", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/series/interface/common.d.ts", + "note": "类型 ISeriesStyle 的定义位置" + }, + "IHoverSpec": { + "typeName": "IHoverSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/interaction/interface/spec.d.ts", + "note": "类型 IHoverSpec 的定义位置" + }, + "ISelectSpec": { + "typeName": "ISelectSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/interaction/interface/spec.d.ts", + "note": "类型 ISelectSpec 的定义位置" + }, + "RegionSpec": { + "typeName": "RegionSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/region/interface.d.ts", + "note": "类型 RegionSpec 的定义位置" + }, + "ITitleSpec": { + "typeName": "ITitleSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/title/interface/spec.d.ts", + "note": "类型 ITitleSpec 的定义位置" + }, + "ILayoutSpec": { + "typeName": "ILayoutSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/layout/interface.d.ts", + "note": "类型 ILayoutSpec 的定义位置" + }, + "ILegendSpec": { + "typeName": "ILegendSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/legend/interface.d.ts", + "note": "类型 ILegendSpec 的定义位置" + }, + "ICrosshairSpec": { + "typeName": "ICrosshairSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/crosshair/interface/spec.d.ts", + "note": "类型 ICrosshairSpec 的定义位置" + }, + "ITooltipSpec": { + "typeName": "ITooltipSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/tooltip/interface/spec.d.ts", + "note": "类型 ITooltipSpec 的定义位置" + }, + "IPlayer": { + "typeName": "IPlayer", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/player/interface/spec.d.ts", + "note": "类型 IPlayer 的定义位置" + }, + "IDataZoomSpec": { + "typeName": "IDataZoomSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/data-zoom/data-zoom/interface.d.ts", + "note": "类型 IDataZoomSpec 的定义位置" + }, + "IScrollBarSpec": { + "typeName": "IScrollBarSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/data-zoom/scroll-bar/interface.d.ts", + "note": "类型 IScrollBarSpec 的定义位置" + }, + "IBrushSpec": { + "typeName": "IBrushSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/brush/interface.d.ts", + "note": "类型 IBrushSpec 的定义位置" + }, + "ICustomMarkSpec": { + "typeName": "ICustomMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 ICustomMarkSpec 的定义位置" + }, + "ICommonAxisSpec": { + "typeName": "ICommonAxisSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/axis/interface.d.ts", + "note": "类型 ICommonAxisSpec 的定义位置" + }, + "ITheme": { + "typeName": "ITheme", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/theme/interface.d.ts", + "note": "类型 ITheme 的定义位置" + }, + "IBackgroundSpec": { + "typeName": "IBackgroundSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 IBackgroundSpec 的定义位置" + }, + "IMediaQuerySpec": { + "typeName": "IMediaQuerySpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/media-query.d.ts", + "note": "类型 IMediaQuerySpec 的定义位置" + }, + "IInteractionItemSpec": { + "typeName": "IInteractionItemSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/interaction/interface/spec.d.ts", + "note": "类型 IInteractionItemSpec 的定义位置" + }, + "ITotalLabelSpec": { + "typeName": "ITotalLabelSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/label/interface.d.ts", + "note": "类型 ITotalLabelSpec 的定义位置" + }, + "IExtensionMarkSpec": { + "typeName": "IExtensionMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 IExtensionMarkSpec 的定义位置" + }, + "IExtensionGroupMarkSpec": { + "typeName": "IExtensionGroupMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 IExtensionGroupMarkSpec 的定义位置" + }, + "IAnimationConfig": { + "typeName": "IAnimationConfig", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart/src/typings/spec/common.ts", + "note": "类型 IAnimationConfig 的定义位置" + }, + "IMarkSpec": { + "typeName": "IMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 IMarkSpec 的定义位置" + }, + "IRectMarkSpec": { + "typeName": "IRectMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/visual.d.ts", + "note": "类型 IRectMarkSpec 的定义位置" + }, + "IBarBackgroundSpec": { + "typeName": "IBarBackgroundSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/series/bar/interface.d.ts", + "note": "类型 IBarBackgroundSpec 的定义位置" + }, + "IStackCornerRadiusCallback": { + "typeName": "IStackCornerRadiusCallback", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/series/bar/interface.d.ts", + "note": "类型 IStackCornerRadiusCallback 的定义位置" + } + }, + "statistics": { + "totalInterfaces": 4, + "totalProperties": 86, + "complexTypes": 37, + "typeFileLocations": 37, + "dependencyTypes": 865 + } +} \ No newline at end of file diff --git a/skills/vchart-development-skill/references/type-meta/boxPlot.json b/skills/vchart-development-skill/references/type-meta/boxPlot.json new file mode 100644 index 0000000000..9501cf1067 --- /dev/null +++ b/skills/vchart-development-skill/references/type-meta/boxPlot.json @@ -0,0 +1,830 @@ +{ + "typeName": "IBoxPlotChartSpec", + "description": "IBoxPlotChartSpec 配置规范的完整实现分析", + "inheritanceTree": { + "IBoxPlotChartSpec": { + "description": "IBoxPlotChartSpec 接口配置", + "directExtends": [ + "ICartesianChartSpec", + "IChartExtendsSeriesSpec" + ], + "ownProperties": [ + { + "name": "type", + "description": "type 配置", + "type": "'boxPlot'", + "originalType": "'boxPlot'", + "required": true, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "series", + "description": "系列配置", + "type": "IBoxPlotSeriesSpec[]", + "originalType": "IBoxPlotSeriesSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IBoxPlotSeriesSpec" + ] + } + ] + }, + "ICartesianChartSpec": { + "description": "ICartesianChartSpec 接口配置", + "directExtends": [ + "IChartSpec" + ], + "ownProperties": [ + { + "name": "direction", + "description": "图表的方向配置。 - 'vertical' 垂直布局，即常见的直角坐标系布局，x 轴位于底部，y 轴位于左侧。 - 'horizontal' 水平布局，可理解为 x 轴和 y 轴位置互换。", + "type": "'default' | 'reverse'", + "originalType": "DirectionType", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "axes", + "description": "笛卡尔坐标系的坐标轴配置", + "type": "ICartesianAxisSpec[]", + "originalType": "ICartesianAxisSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICartesianAxisSpec" + ] + }, + { + "name": "crosshair", + "description": "十字辅助线配置", + "type": "ICartesianCrosshairSpec | ICartesianCrosshairSpec[]", + "originalType": "ICartesianCrosshairSpec | ICartesianCrosshairSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICartesianCrosshairSpec" + ] + }, + { + "name": "markLine", + "description": "参考线配置", + "type": "IMarkLineSpec | IMarkLineSpec[]", + "originalType": "IMarkLineSpec | IMarkLineSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMarkLineSpec" + ] + }, + { + "name": "markArea", + "description": "参考区域配置", + "type": "IMarkAreaSpec | IMarkAreaSpec[]", + "originalType": "IMarkAreaSpec | IMarkAreaSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMarkAreaSpec" + ] + }, + { + "name": "markPoint", + "description": "参考点配置", + "type": "IMarkPointSpec | IMarkPointSpec[]", + "originalType": "IMarkPointSpec | IMarkPointSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMarkPointSpec" + ] + } + ] + }, + "IChartSpec": { + "description": "IChartSpec 接口配置", + "directExtends": [], + "ownProperties": [ + { + "name": "type", + "description": "图表类型", + "type": "string", + "originalType": "string", + "required": true, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "data", + "description": "data 配置", + "type": "IData", + "originalType": "IData", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IData" + ] + }, + { + "name": "width", + "description": "画布宽度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "height", + "description": "画布高度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "autoFit", + "description": "是否自适应容器大小", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "padding", + "description": "图表整体 padding 设置", + "type": "ILayoutPaddingSpec", + "originalType": "ILayoutPaddingSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ILayoutPaddingSpec" + ] + }, + { + "name": "color", + "description": "图表色系配置", + "type": "string[] | Omit, 'id'>", + "originalType": "string[] | Omit, 'id'>", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IVisualSpecScale" + ] + }, + { + "name": "series", + "description": "series 配置", + "type": "ISeriesSpec[]", + "originalType": "ISeriesSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISeriesSpec" + ] + }, + { + "name": "seriesStyle", + "description": "系列样式", + "type": "ISeriesStyle", + "originalType": "ISeriesStyle", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISeriesStyle" + ] + }, + { + "name": "animationThreshold", + "description": "自动关闭动画的阀值，对应的是单系列data的长度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "hover", + "description": "hover 交互", + "type": "boolean | IHoverSpec", + "originalType": "boolean | IHoverSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IHoverSpec" + ] + }, + { + "name": "select", + "description": "select 交互", + "type": "boolean | ISelectSpec", + "originalType": "boolean | ISelectSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISelectSpec" + ] + }, + { + "name": "region", + "description": "region配置", + "type": "RegionSpec[]", + "originalType": "RegionSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "RegionSpec" + ] + }, + { + "name": "title", + "description": "图表标题配置", + "type": "ITitleSpec", + "originalType": "ITitleSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ITitleSpec" + ] + }, + { + "name": "layout", + "description": "自定义布局函数", + "type": "ILayoutSpec", + "originalType": "ILayoutSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ILayoutSpec" + ] + }, + { + "name": "legends", + "description": "图例配置", + "type": "ILegendSpec | ILegendSpec[]", + "originalType": "ILegendSpec | ILegendSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ILegendSpec" + ] + }, + { + "name": "crosshair", + "description": "十字辅助线配置", + "type": "ICrosshairSpec | ICrosshairSpec[]", + "originalType": "ICrosshairSpec | ICrosshairSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICrosshairSpec" + ] + }, + { + "name": "tooltip", + "description": "tooltip配置", + "type": "ITooltipSpec", + "originalType": "ITooltipSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ITooltipSpec" + ] + }, + { + "name": "player", + "description": "播放器配置", + "type": "IPlayer", + "originalType": "IPlayer", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IPlayer" + ] + }, + { + "name": "dataZoom", + "description": "缩略轴配置", + "type": "IDataZoomSpec | IDataZoomSpec[]", + "originalType": "IDataZoomSpec | IDataZoomSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IDataZoomSpec" + ] + }, + { + "name": "scrollBar", + "description": "滚动条配置", + "type": "IScrollBarSpec | IScrollBarSpec[]", + "originalType": "IScrollBarSpec | IScrollBarSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IScrollBarSpec" + ] + }, + { + "name": "brush", + "description": "框选配置", + "type": "IBrushSpec", + "originalType": "IBrushSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IBrushSpec" + ] + }, + { + "name": "scales", + "description": "全局 scale 配置", + "type": "IVisualSpecScale[]", + "originalType": "IVisualSpecScale[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IVisualSpecScale" + ] + }, + { + "name": "customMark", + "description": "自定义mark", + "type": "ICustomMarkSpec[]", + "originalType": "ICustomMarkSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICustomMarkSpec" + ] + }, + { + "name": "axes", + "description": "axes 配置", + "type": "ICommonAxisSpec[]", + "originalType": "ICommonAxisSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICommonAxisSpec" + ] + }, + { + "name": "theme", + "description": "默认主题（支持完整主题对象或者主题名称，主题名称需要提前在 `ThemeManager` 中注册）", + "type": "Omit | string", + "originalType": "Omit | string", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ITheme" + ] + }, + { + "name": "background", + "description": "图表背景色配置，优先级高于构造函数中的 background 配置 自1.11.6版本支持渐变色对象的配置", + "type": "IBackgroundSpec", + "originalType": "IBackgroundSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IBackgroundSpec" + ] + }, + { + "name": "stackInverse", + "description": "堆积时是否逆序", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "stackSort", + "description": "堆积时是否排序", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "media", + "description": "媒体查询配置", + "type": "IMediaQuerySpec", + "originalType": "IMediaQuerySpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMediaQuerySpec" + ] + } + ] + }, + "IChartExtendsSeriesSpec": { + "description": "IBoxPlotSeriesSpec 的属性（排除 data, morph, stackValue, tooltip）", + "directExtends": [], + "ownProperties": [ + { + "name": "animationAppear", + "description": "入场动画配置", + "type": "string | IAnimationConfig", + "originalType": "IAnimationConfig", + "required": false, + "category": "动画配置", + "isSimple": false, + "dependencies": [ + "IAnimationConfig" + ], + "inheritedFrom": "IAnimationSpec" + }, + { + "name": "animationEnter", + "description": "数据新增动画配置", + "type": "IAnimationConfig", + "originalType": "IAnimationConfig", + "required": false, + "category": "动画配置", + "isSimple": false, + "dependencies": [ + "IAnimationConfig" + ], + "inheritedFrom": "IAnimationSpec" + }, + { + "name": "animationUpdate", + "description": "数据更新动画配置", + "type": "IAnimationConfig", + "originalType": "IAnimationConfig", + "required": false, + "category": "动画配置", + "isSimple": false, + "dependencies": [ + "IAnimationConfig" + ], + "inheritedFrom": "IAnimationSpec" + }, + { + "name": "animationExit", + "description": "数据移除动画配置", + "type": "IAnimationConfig", + "originalType": "IAnimationConfig", + "required": false, + "category": "动画配置", + "isSimple": false, + "dependencies": [ + "IAnimationConfig" + ], + "inheritedFrom": "IAnimationSpec" + }, + { + "name": "type", + "description": "系列类型", + "type": "'boxPlot'", + "originalType": "'boxPlot'", + "required": true, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "direction", + "description": "direction 配置", + "type": "'default' | 'reverse'", + "originalType": "DirectionType", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "xField", + "description": "x轴字段（direction=vertical时生效）", + "type": "string | string[]", + "originalType": "string | string[]", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "yField", + "description": "y轴字段（direction=horizontal时生效）", + "type": "string | string[]", + "originalType": "string | string[]", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "minField", + "description": "最小值字段", + "type": "string", + "originalType": "string", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "maxField", + "description": "最大值字段", + "type": "string", + "originalType": "string", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "q1Field", + "description": "q1字段", + "type": "string", + "originalType": "string", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "medianField", + "description": "中位数字段", + "type": "string", + "originalType": "string", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "q3Field", + "description": "q3字段", + "type": "string", + "originalType": "string", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "boxPlot", + "description": "boxPlot 配置", + "type": "IMarkSpec", + "originalType": "IMarkSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMarkSpec", + "IBoxPlotMarkSpec" + ] + }, + { + "name": "outliersField", + "description": "异常值字段", + "type": "string", + "originalType": "string", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "outliersStyle", + "description": "异常值样式配置", + "type": "IOutlierMarkSpec", + "originalType": "IOutlierMarkSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IOutlierMarkSpec" + ] + } + ], + "note": "展开自 Omit - 包含 16 个属性（已展开所有继承）", + "expandedFrom": "IBoxPlotSeriesSpec", + "omittedKeys": [ + "data", + "morph", + "stackValue", + "tooltip" + ] + } + }, + "timestamp": "2025-08-06T07:34:29.304Z", + "version": "1.0.0", + "sourceFile": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/chart/box-plot/interface.d.ts", + "complexTypeDefinitions": { + "IBoxPlotSeriesSpec": { + "typeName": "IBoxPlotSeriesSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/series/box-plot/interface.d.ts", + "note": "类型 IBoxPlotSeriesSpec 的定义位置" + }, + "ICartesianAxisSpec": { + "typeName": "ICartesianAxisSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/axis/cartesian/interface/spec.d.ts", + "note": "类型 ICartesianAxisSpec 的定义位置" + }, + "ICartesianCrosshairSpec": { + "typeName": "ICartesianCrosshairSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/crosshair/interface/spec.d.ts", + "note": "类型 ICartesianCrosshairSpec 的定义位置" + }, + "IMarkLineSpec": { + "typeName": "IMarkLineSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/marker/mark-line/interface/spec.d.ts", + "note": "类型 IMarkLineSpec 的定义位置" + }, + "IMarkAreaSpec": { + "typeName": "IMarkAreaSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/marker/mark-area/interface/spec.d.ts", + "note": "类型 IMarkAreaSpec 的定义位置" + }, + "IMarkPointSpec": { + "typeName": "IMarkPointSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/marker/mark-point/interface/spec.d.ts", + "note": "类型 IMarkPointSpec 的定义位置" + }, + "IData": { + "typeName": "IData", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 IData 的定义位置" + }, + "ILayoutPaddingSpec": { + "typeName": "ILayoutPaddingSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/layout.d.ts", + "note": "类型 ILayoutPaddingSpec 的定义位置" + }, + "IVisualSpecScale": { + "typeName": "IVisualSpecScale", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/visual.d.ts", + "note": "类型 IVisualSpecScale 的定义位置" + }, + "ISeriesSpec": { + "typeName": "ISeriesSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 ISeriesSpec 的定义位置" + }, + "ISeriesStyle": { + "typeName": "ISeriesStyle", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/series/interface/common.d.ts", + "note": "类型 ISeriesStyle 的定义位置" + }, + "IHoverSpec": { + "typeName": "IHoverSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/interaction/interface/spec.d.ts", + "note": "类型 IHoverSpec 的定义位置" + }, + "ISelectSpec": { + "typeName": "ISelectSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/interaction/interface/spec.d.ts", + "note": "类型 ISelectSpec 的定义位置" + }, + "RegionSpec": { + "typeName": "RegionSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/region/interface.d.ts", + "note": "类型 RegionSpec 的定义位置" + }, + "ITitleSpec": { + "typeName": "ITitleSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/title/interface/spec.d.ts", + "note": "类型 ITitleSpec 的定义位置" + }, + "ILayoutSpec": { + "typeName": "ILayoutSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/layout/interface.d.ts", + "note": "类型 ILayoutSpec 的定义位置" + }, + "ILegendSpec": { + "typeName": "ILegendSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/legend/interface.d.ts", + "note": "类型 ILegendSpec 的定义位置" + }, + "ICrosshairSpec": { + "typeName": "ICrosshairSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/crosshair/interface/spec.d.ts", + "note": "类型 ICrosshairSpec 的定义位置" + }, + "ITooltipSpec": { + "typeName": "ITooltipSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/tooltip/interface/spec.d.ts", + "note": "类型 ITooltipSpec 的定义位置" + }, + "IPlayer": { + "typeName": "IPlayer", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/player/interface/spec.d.ts", + "note": "类型 IPlayer 的定义位置" + }, + "IDataZoomSpec": { + "typeName": "IDataZoomSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/data-zoom/data-zoom/interface.d.ts", + "note": "类型 IDataZoomSpec 的定义位置" + }, + "IScrollBarSpec": { + "typeName": "IScrollBarSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/data-zoom/scroll-bar/interface.d.ts", + "note": "类型 IScrollBarSpec 的定义位置" + }, + "IBrushSpec": { + "typeName": "IBrushSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/brush/interface.d.ts", + "note": "类型 IBrushSpec 的定义位置" + }, + "ICustomMarkSpec": { + "typeName": "ICustomMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 ICustomMarkSpec 的定义位置" + }, + "ICommonAxisSpec": { + "typeName": "ICommonAxisSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/axis/interface.d.ts", + "note": "类型 ICommonAxisSpec 的定义位置" + }, + "ITheme": { + "typeName": "ITheme", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/theme/interface.d.ts", + "note": "类型 ITheme 的定义位置" + }, + "IBackgroundSpec": { + "typeName": "IBackgroundSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 IBackgroundSpec 的定义位置" + }, + "IMediaQuerySpec": { + "typeName": "IMediaQuerySpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/media-query.d.ts", + "note": "类型 IMediaQuerySpec 的定义位置" + }, + "IAnimationConfig": { + "typeName": "IAnimationConfig", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart/src/typings/spec/common.ts", + "note": "类型 IAnimationConfig 的定义位置" + }, + "IMarkSpec": { + "typeName": "IMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 IMarkSpec 的定义位置" + }, + "IBoxPlotMarkSpec": { + "typeName": "IBoxPlotMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/visual.d.ts", + "note": "类型 IBoxPlotMarkSpec 的定义位置" + }, + "IOutlierMarkSpec": { + "typeName": "IOutlierMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/visual.d.ts", + "note": "类型 IOutlierMarkSpec 的定义位置" + } + }, + "statistics": { + "totalInterfaces": 4, + "totalProperties": 54, + "complexTypes": 32, + "typeFileLocations": 32, + "dependencyTypes": 863 + } +} \ No newline at end of file diff --git a/skills/vchart-development-skill/references/type-meta/circlePacking.json b/skills/vchart-development-skill/references/type-meta/circlePacking.json new file mode 100644 index 0000000000..6d4536ad79 --- /dev/null +++ b/skills/vchart-development-skill/references/type-meta/circlePacking.json @@ -0,0 +1,963 @@ +{ + "typeName": "ICirclePackingChartSpec", + "description": "ICirclePackingChartSpec 配置规范的完整实现分析", + "inheritanceTree": { + "ICirclePackingChartSpec": { + "description": "ICirclePackingChartSpec 接口配置", + "directExtends": [ + "IChartSpec", + "IChartExtendsSeriesSpec" + ], + "ownProperties": [ + { + "name": "type", + "description": "type 配置", + "type": "'circlePacking'", + "originalType": "'circlePacking'", + "required": true, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "series", + "description": "series 配置", + "type": "ICirclePackingSeriesSpec[]", + "originalType": "ICirclePackingSeriesSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICirclePackingSeriesSpec" + ] + } + ] + }, + "IChartSpec": { + "description": "IChartSpec 接口配置", + "directExtends": [], + "ownProperties": [ + { + "name": "type", + "description": "图表类型", + "type": "string", + "originalType": "string", + "required": true, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "data", + "description": "data 配置", + "type": "IData", + "originalType": "IData", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IData" + ] + }, + { + "name": "width", + "description": "画布宽度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "height", + "description": "画布高度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "autoFit", + "description": "是否自适应容器大小", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "padding", + "description": "图表整体 padding 设置", + "type": "ILayoutPaddingSpec", + "originalType": "ILayoutPaddingSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ILayoutPaddingSpec" + ] + }, + { + "name": "color", + "description": "图表色系配置", + "type": "string[] | Omit, 'id'>", + "originalType": "string[] | Omit, 'id'>", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IVisualSpecScale" + ] + }, + { + "name": "series", + "description": "series 配置", + "type": "ISeriesSpec[]", + "originalType": "ISeriesSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISeriesSpec" + ] + }, + { + "name": "seriesStyle", + "description": "系列样式", + "type": "ISeriesStyle", + "originalType": "ISeriesStyle", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISeriesStyle" + ] + }, + { + "name": "animationThreshold", + "description": "自动关闭动画的阀值，对应的是单系列data的长度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "hover", + "description": "hover 交互", + "type": "boolean | IHoverSpec", + "originalType": "boolean | IHoverSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IHoverSpec" + ] + }, + { + "name": "select", + "description": "select 交互", + "type": "boolean | ISelectSpec", + "originalType": "boolean | ISelectSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISelectSpec" + ] + }, + { + "name": "region", + "description": "region配置", + "type": "RegionSpec[]", + "originalType": "RegionSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "RegionSpec" + ] + }, + { + "name": "title", + "description": "图表标题配置", + "type": "ITitleSpec", + "originalType": "ITitleSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ITitleSpec" + ] + }, + { + "name": "layout", + "description": "自定义布局函数", + "type": "ILayoutSpec", + "originalType": "ILayoutSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ILayoutSpec" + ] + }, + { + "name": "legends", + "description": "图例配置", + "type": "ILegendSpec | ILegendSpec[]", + "originalType": "ILegendSpec | ILegendSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ILegendSpec" + ] + }, + { + "name": "crosshair", + "description": "十字辅助线配置", + "type": "ICrosshairSpec | ICrosshairSpec[]", + "originalType": "ICrosshairSpec | ICrosshairSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICrosshairSpec" + ] + }, + { + "name": "tooltip", + "description": "tooltip配置", + "type": "ITooltipSpec", + "originalType": "ITooltipSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ITooltipSpec" + ] + }, + { + "name": "player", + "description": "播放器配置", + "type": "IPlayer", + "originalType": "IPlayer", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IPlayer" + ] + }, + { + "name": "dataZoom", + "description": "缩略轴配置", + "type": "IDataZoomSpec | IDataZoomSpec[]", + "originalType": "IDataZoomSpec | IDataZoomSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IDataZoomSpec" + ] + }, + { + "name": "scrollBar", + "description": "滚动条配置", + "type": "IScrollBarSpec | IScrollBarSpec[]", + "originalType": "IScrollBarSpec | IScrollBarSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IScrollBarSpec" + ] + }, + { + "name": "brush", + "description": "框选配置", + "type": "IBrushSpec", + "originalType": "IBrushSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IBrushSpec" + ] + }, + { + "name": "scales", + "description": "全局 scale 配置", + "type": "IVisualSpecScale[]", + "originalType": "IVisualSpecScale[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IVisualSpecScale" + ] + }, + { + "name": "customMark", + "description": "自定义mark", + "type": "ICustomMarkSpec[]", + "originalType": "ICustomMarkSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICustomMarkSpec" + ] + }, + { + "name": "axes", + "description": "axes 配置", + "type": "ICommonAxisSpec[]", + "originalType": "ICommonAxisSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICommonAxisSpec" + ] + }, + { + "name": "theme", + "description": "默认主题（支持完整主题对象或者主题名称，主题名称需要提前在 `ThemeManager` 中注册）", + "type": "Omit | string", + "originalType": "Omit | string", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ITheme" + ] + }, + { + "name": "background", + "description": "图表背景色配置，优先级高于构造函数中的 background 配置 自1.11.6版本支持渐变色对象的配置", + "type": "IBackgroundSpec", + "originalType": "IBackgroundSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IBackgroundSpec" + ] + }, + { + "name": "stackInverse", + "description": "堆积时是否逆序", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "stackSort", + "description": "堆积时是否排序", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "media", + "description": "媒体查询配置", + "type": "IMediaQuerySpec", + "originalType": "IMediaQuerySpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMediaQuerySpec" + ] + } + ] + }, + "IChartExtendsSeriesSpec": { + "description": "ICirclePackingSeriesSpec 的属性（排除 data, morph, stackValue, tooltip）", + "directExtends": [], + "ownProperties": [ + { + "name": "hover", + "description": "图表hover相关交互配置，当值为boolean类型时，表示开启或者关闭该交互 也支持更详细的交互配置", + "type": "IHoverSpec | boolean", + "originalType": "IHoverSpec | boolean", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IHoverSpec" + ], + "inheritedFrom": "ISeriesSpec" + }, + { + "name": "select", + "description": "图表选中相关交互配置，当值为boolean类型时，表示开启或者关闭该交互 也支持更详细的交互配置", + "type": "ISelectSpec | boolean", + "originalType": "ISelectSpec | boolean", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISelectSpec" + ], + "inheritedFrom": "ISeriesSpec" + }, + { + "name": "interactions", + "description": "其他需要按需注册的类型交互", + "type": "IInteractionItemSpec[]", + "originalType": "IInteractionItemSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IInteractionItemSpec" + ], + "inheritedFrom": "ISeriesSpec" + }, + { + "name": "type", + "description": "type 配置", + "type": "'circlePacking'", + "originalType": "'circlePacking'", + "required": true, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "name", + "description": "系列名称", + "type": "string", + "originalType": "string", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ISeriesSpec" + }, + { + "name": "id", + "description": "数据唯一标识", + "type": "string | number", + "originalType": "StringOrNumber", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ISeriesSpec" + }, + { + "name": "dataIndex", + "description": "系列关联的数据索引", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ISeriesSpec" + }, + { + "name": "dataId", + "description": "系列关联的数据id", + "type": "string | number", + "originalType": "StringOrNumber", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ISeriesSpec" + }, + { + "name": "dataKey", + "description": "dataKey用于绑定数据与Mark的关系, 该配置在动画中非常重要.", + "type": "string | string[] | ((data: Datum, index: number) => string)", + "originalType": "DataKeyType", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ISeriesSpec" + }, + { + "name": "regionIndex", + "description": "系列关联的region索引", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ISeriesSpec" + }, + { + "name": "regionId", + "description": "系列关联的region id", + "type": "string | number", + "originalType": "StringOrNumber", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ISeriesSpec" + }, + { + "name": "seriesField", + "description": "分组字段", + "type": "string", + "originalType": "string", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ISeriesSpec" + }, + { + "name": "seriesStyle", + "description": "系列样式", + "type": "ISeriesStyle", + "originalType": "ISeriesStyle", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISeriesStyle" + ], + "inheritedFrom": "ISeriesSpec" + }, + { + "name": "stack", + "description": "是否对数据进行堆叠处理", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ISeriesSpec" + }, + { + "name": "totalLabel", + "description": "堆叠汇总标签", + "type": "ITotalLabelSpec", + "originalType": "ITotalLabelSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ITotalLabelSpec" + ], + "inheritedFrom": "ISeriesSpec" + }, + { + "name": "percent", + "description": "是否对数据进行百分比处理", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ISeriesSpec" + }, + { + "name": "stackOffsetSilhouette", + "description": "是否围绕中心轴偏移轮廓", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ISeriesSpec" + }, + { + "name": "invalidType", + "description": "非合规数据点连接方式 'break'指在该数据点处断开 'link' 指忽略该点保持连续 'zero' 指该点默认数值为0 'ignore' 指不处理", + "type": "'zero' | 'ignore' | 'link' | 'break'", + "originalType": "IInvalidType", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ISeriesSpec" + }, + { + "name": "animation", + "description": "是否开启动画", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ISeriesSpec" + }, + { + "name": "animationThreshold", + "description": "自动关闭动画的阀值，对应的是单系列data的长度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ISeriesSpec" + }, + { + "name": "support3d", + "description": "是否支持3d视角", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ISeriesSpec" + }, + { + "name": "extensionMark", + "description": "系列的扩展mark，能够获取系列上的数据", + "type": "(IExtensionMarkSpec> | IExtensionGroupMarkSpec)[]", + "originalType": "(IExtensionMarkSpec> | IExtensionGroupMarkSpec)[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IExtensionMarkSpec", + "IExtensionGroupMarkSpec" + ], + "inheritedFrom": "ISeriesSpec" + }, + { + "name": "zIndex", + "description": "今当通过`series`配置的时候，才会生效", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ISeriesSpec" + }, + { + "name": "animationAppear", + "description": "入场动画配置", + "type": "'growIn' | 'fadeIn' | IAnimationConfig", + "originalType": "IAnimationConfig", + "required": false, + "category": "动画配置", + "isSimple": false, + "dependencies": [ + "IAnimationConfig" + ], + "inheritedFrom": "IAnimationSpec" + }, + { + "name": "animationEnter", + "description": "数据新增动画配置", + "type": "IAnimationConfig", + "originalType": "IAnimationConfig", + "required": false, + "category": "动画配置", + "isSimple": false, + "dependencies": [ + "IAnimationConfig" + ], + "inheritedFrom": "IAnimationSpec" + }, + { + "name": "animationUpdate", + "description": "数据更新动画配置", + "type": "IAnimationConfig", + "originalType": "IAnimationConfig", + "required": false, + "category": "动画配置", + "isSimple": false, + "dependencies": [ + "IAnimationConfig" + ], + "inheritedFrom": "IAnimationSpec" + }, + { + "name": "animationExit", + "description": "数据移除动画配置", + "type": "IAnimationConfig", + "originalType": "IAnimationConfig", + "required": false, + "category": "动画配置", + "isSimple": false, + "dependencies": [ + "IAnimationConfig" + ], + "inheritedFrom": "IAnimationSpec" + }, + { + "name": "categoryField", + "description": "分类字段", + "type": "string", + "originalType": "string", + "required": true, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "valueField", + "description": "权重字段", + "type": "string", + "originalType": "string", + "required": true, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "layoutPadding", + "description": "层内边距", + "type": "number | number[]", + "originalType": "number | number[]", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "label", + "description": "label 配置", + "type": "IMarkSpec", + "originalType": "IMarkSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMarkSpec", + "ITextMarkSpec" + ] + }, + { + "name": "circlePacking", + "description": "circlePacking 配置", + "type": "IMarkSpec", + "originalType": "IMarkSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMarkSpec", + "IArcMarkSpec" + ] + }, + { + "name": "drill", + "description": "下钻配置", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "drillField", + "description": "钻取字段的field", + "type": "string", + "originalType": "string", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + } + ], + "note": "展开自 Omit - 包含 34 个属性（已展开所有继承）", + "expandedFrom": "ICirclePackingSeriesSpec", + "omittedKeys": [ + "data", + "morph", + "stackValue", + "tooltip" + ] + } + }, + "timestamp": "2025-08-06T07:35:24.751Z", + "version": "1.0.0", + "sourceFile": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/chart/circle-packing/interface.d.ts", + "complexTypeDefinitions": { + "ICirclePackingSeriesSpec": { + "typeName": "ICirclePackingSeriesSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/series/circle-packing/interface.d.ts", + "note": "类型 ICirclePackingSeriesSpec 的定义位置" + }, + "IData": { + "typeName": "IData", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 IData 的定义位置" + }, + "ILayoutPaddingSpec": { + "typeName": "ILayoutPaddingSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/layout.d.ts", + "note": "类型 ILayoutPaddingSpec 的定义位置" + }, + "IVisualSpecScale": { + "typeName": "IVisualSpecScale", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/visual.d.ts", + "note": "类型 IVisualSpecScale 的定义位置" + }, + "ISeriesSpec": { + "typeName": "ISeriesSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 ISeriesSpec 的定义位置" + }, + "ISeriesStyle": { + "typeName": "ISeriesStyle", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/series/interface/common.d.ts", + "note": "类型 ISeriesStyle 的定义位置" + }, + "IHoverSpec": { + "typeName": "IHoverSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/interaction/interface/spec.d.ts", + "note": "类型 IHoverSpec 的定义位置" + }, + "ISelectSpec": { + "typeName": "ISelectSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/interaction/interface/spec.d.ts", + "note": "类型 ISelectSpec 的定义位置" + }, + "RegionSpec": { + "typeName": "RegionSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/region/interface.d.ts", + "note": "类型 RegionSpec 的定义位置" + }, + "ITitleSpec": { + "typeName": "ITitleSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/title/interface/spec.d.ts", + "note": "类型 ITitleSpec 的定义位置" + }, + "ILayoutSpec": { + "typeName": "ILayoutSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/layout/interface.d.ts", + "note": "类型 ILayoutSpec 的定义位置" + }, + "ILegendSpec": { + "typeName": "ILegendSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/legend/interface.d.ts", + "note": "类型 ILegendSpec 的定义位置" + }, + "ICrosshairSpec": { + "typeName": "ICrosshairSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/crosshair/interface/spec.d.ts", + "note": "类型 ICrosshairSpec 的定义位置" + }, + "ITooltipSpec": { + "typeName": "ITooltipSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/tooltip/interface/spec.d.ts", + "note": "类型 ITooltipSpec 的定义位置" + }, + "IPlayer": { + "typeName": "IPlayer", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/player/interface/spec.d.ts", + "note": "类型 IPlayer 的定义位置" + }, + "IDataZoomSpec": { + "typeName": "IDataZoomSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/data-zoom/data-zoom/interface.d.ts", + "note": "类型 IDataZoomSpec 的定义位置" + }, + "IScrollBarSpec": { + "typeName": "IScrollBarSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/data-zoom/scroll-bar/interface.d.ts", + "note": "类型 IScrollBarSpec 的定义位置" + }, + "IBrushSpec": { + "typeName": "IBrushSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/brush/interface.d.ts", + "note": "类型 IBrushSpec 的定义位置" + }, + "ICustomMarkSpec": { + "typeName": "ICustomMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 ICustomMarkSpec 的定义位置" + }, + "ICommonAxisSpec": { + "typeName": "ICommonAxisSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/axis/interface.d.ts", + "note": "类型 ICommonAxisSpec 的定义位置" + }, + "ITheme": { + "typeName": "ITheme", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/theme/interface.d.ts", + "note": "类型 ITheme 的定义位置" + }, + "IBackgroundSpec": { + "typeName": "IBackgroundSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 IBackgroundSpec 的定义位置" + }, + "IMediaQuerySpec": { + "typeName": "IMediaQuerySpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/media-query.d.ts", + "note": "类型 IMediaQuerySpec 的定义位置" + }, + "IInteractionItemSpec": { + "typeName": "IInteractionItemSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/interaction/interface/spec.d.ts", + "note": "类型 IInteractionItemSpec 的定义位置" + }, + "ITotalLabelSpec": { + "typeName": "ITotalLabelSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/label/interface.d.ts", + "note": "类型 ITotalLabelSpec 的定义位置" + }, + "IExtensionMarkSpec": { + "typeName": "IExtensionMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 IExtensionMarkSpec 的定义位置" + }, + "IExtensionGroupMarkSpec": { + "typeName": "IExtensionGroupMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 IExtensionGroupMarkSpec 的定义位置" + }, + "IAnimationConfig": { + "typeName": "IAnimationConfig", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart/src/typings/spec/common.ts", + "note": "类型 IAnimationConfig 的定义位置" + }, + "IMarkSpec": { + "typeName": "IMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 IMarkSpec 的定义位置" + }, + "ITextMarkSpec": { + "typeName": "ITextMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/visual.d.ts", + "note": "类型 ITextMarkSpec 的定义位置" + }, + "IArcMarkSpec": { + "typeName": "IArcMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/visual.d.ts", + "note": "类型 IArcMarkSpec 的定义位置" + } + }, + "statistics": { + "totalInterfaces": 3, + "totalProperties": 66, + "complexTypes": 31, + "typeFileLocations": 31, + "dependencyTypes": 850 + } +} \ No newline at end of file diff --git a/skills/vchart-development-skill/references/type-meta/circularProgress.json b/skills/vchart-development-skill/references/type-meta/circularProgress.json new file mode 100644 index 0000000000..46c50f9375 --- /dev/null +++ b/skills/vchart-development-skill/references/type-meta/circularProgress.json @@ -0,0 +1,1153 @@ +{ + "typeName": "ICircularProgressChartSpec", + "description": "ICircularProgressChartSpec 配置规范的完整实现分析", + "inheritanceTree": { + "ICircularProgressChartSpec": { + "description": "ICircularProgressChartSpec 接口配置", + "directExtends": [ + "IProgressChartSpec", + "IChartExtendsSeriesSpec" + ], + "ownProperties": [ + { + "name": "type", + "description": "type 配置", + "type": "'circularProgress'", + "originalType": "'circularProgress'", + "required": true, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "series", + "description": "series 配置", + "type": "ICircularProgressSeriesSpec[]", + "originalType": "ICircularProgressSeriesSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICircularProgressSeriesSpec" + ] + } + ] + }, + "IProgressChartSpec": { + "description": "IProgressChartSpec 接口配置", + "directExtends": [ + "IChartSpec" + ], + "ownProperties": [ + { + "name": "seriesField", + "description": "分组字段", + "type": "string", + "originalType": "string", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "cornerRadius", + "description": "进度条圆角半径", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "axes", + "description": "axes 配置", + "type": "ICartesianAxisSpec[] | IPolarAxisSpec[]", + "originalType": "ICartesianAxisSpec[] | IPolarAxisSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICartesianAxisSpec", + "IPolarAxisSpec" + ] + } + ] + }, + "IChartSpec": { + "description": "IChartSpec 接口配置", + "directExtends": [], + "ownProperties": [ + { + "name": "type", + "description": "图表类型", + "type": "string", + "originalType": "string", + "required": true, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "data", + "description": "data 配置", + "type": "IData", + "originalType": "IData", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IData" + ] + }, + { + "name": "width", + "description": "画布宽度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "height", + "description": "画布高度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "autoFit", + "description": "是否自适应容器大小", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "padding", + "description": "图表整体 padding 设置", + "type": "ILayoutPaddingSpec", + "originalType": "ILayoutPaddingSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ILayoutPaddingSpec" + ] + }, + { + "name": "color", + "description": "图表色系配置", + "type": "string[] | Omit, 'id'>", + "originalType": "string[] | Omit, 'id'>", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IVisualSpecScale" + ] + }, + { + "name": "series", + "description": "series 配置", + "type": "ISeriesSpec[]", + "originalType": "ISeriesSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISeriesSpec" + ] + }, + { + "name": "seriesStyle", + "description": "系列样式", + "type": "ISeriesStyle", + "originalType": "ISeriesStyle", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISeriesStyle" + ] + }, + { + "name": "animationThreshold", + "description": "自动关闭动画的阀值，对应的是单系列data的长度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "hover", + "description": "hover 交互", + "type": "boolean | IHoverSpec", + "originalType": "boolean | IHoverSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IHoverSpec" + ] + }, + { + "name": "select", + "description": "select 交互", + "type": "boolean | ISelectSpec", + "originalType": "boolean | ISelectSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISelectSpec" + ] + }, + { + "name": "region", + "description": "region配置", + "type": "RegionSpec[]", + "originalType": "RegionSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "RegionSpec" + ] + }, + { + "name": "title", + "description": "图表标题配置", + "type": "ITitleSpec", + "originalType": "ITitleSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ITitleSpec" + ] + }, + { + "name": "layout", + "description": "自定义布局函数", + "type": "ILayoutSpec", + "originalType": "ILayoutSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ILayoutSpec" + ] + }, + { + "name": "legends", + "description": "图例配置", + "type": "ILegendSpec | ILegendSpec[]", + "originalType": "ILegendSpec | ILegendSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ILegendSpec" + ] + }, + { + "name": "crosshair", + "description": "十字辅助线配置", + "type": "ICrosshairSpec | ICrosshairSpec[]", + "originalType": "ICrosshairSpec | ICrosshairSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICrosshairSpec" + ] + }, + { + "name": "tooltip", + "description": "tooltip配置", + "type": "ITooltipSpec", + "originalType": "ITooltipSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ITooltipSpec" + ] + }, + { + "name": "player", + "description": "播放器配置", + "type": "IPlayer", + "originalType": "IPlayer", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IPlayer" + ] + }, + { + "name": "dataZoom", + "description": "缩略轴配置", + "type": "IDataZoomSpec | IDataZoomSpec[]", + "originalType": "IDataZoomSpec | IDataZoomSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IDataZoomSpec" + ] + }, + { + "name": "scrollBar", + "description": "滚动条配置", + "type": "IScrollBarSpec | IScrollBarSpec[]", + "originalType": "IScrollBarSpec | IScrollBarSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IScrollBarSpec" + ] + }, + { + "name": "brush", + "description": "框选配置", + "type": "IBrushSpec", + "originalType": "IBrushSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IBrushSpec" + ] + }, + { + "name": "scales", + "description": "全局 scale 配置", + "type": "IVisualSpecScale[]", + "originalType": "IVisualSpecScale[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IVisualSpecScale" + ] + }, + { + "name": "customMark", + "description": "自定义mark", + "type": "ICustomMarkSpec[]", + "originalType": "ICustomMarkSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICustomMarkSpec" + ] + }, + { + "name": "axes", + "description": "axes 配置", + "type": "ICommonAxisSpec[]", + "originalType": "ICommonAxisSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICommonAxisSpec" + ] + }, + { + "name": "theme", + "description": "默认主题（支持完整主题对象或者主题名称，主题名称需要提前在 `ThemeManager` 中注册）", + "type": "Omit | string", + "originalType": "Omit | string", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ITheme" + ] + }, + { + "name": "background", + "description": "图表背景色配置，优先级高于构造函数中的 background 配置 自1.11.6版本支持渐变色对象的配置", + "type": "IBackgroundSpec", + "originalType": "IBackgroundSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IBackgroundSpec" + ] + }, + { + "name": "stackInverse", + "description": "堆积时是否逆序", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "stackSort", + "description": "堆积时是否排序", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "media", + "description": "媒体查询配置", + "type": "IMediaQuerySpec", + "originalType": "IMediaQuerySpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMediaQuerySpec" + ] + } + ] + }, + "IChartExtendsSeriesSpec": { + "description": "ICircularProgressSeriesSpec 的属性（排除 data, morph, stackValue, tooltip）", + "directExtends": [], + "ownProperties": [ + { + "name": "hover", + "description": "图表hover相关交互配置，当值为boolean类型时，表示开启或者关闭该交互 也支持更详细的交互配置", + "type": "IHoverSpec | boolean", + "originalType": "IHoverSpec | boolean", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IHoverSpec" + ], + "inheritedFrom": "IProgressSeriesSpec" + }, + { + "name": "select", + "description": "图表选中相关交互配置，当值为boolean类型时，表示开启或者关闭该交互 也支持更详细的交互配置", + "type": "ISelectSpec | boolean", + "originalType": "ISelectSpec | boolean", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISelectSpec" + ], + "inheritedFrom": "IProgressSeriesSpec" + }, + { + "name": "interactions", + "description": "其他需要按需注册的类型交互", + "type": "IInteractionItemSpec[]", + "originalType": "IInteractionItemSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IInteractionItemSpec" + ], + "inheritedFrom": "IProgressSeriesSpec" + }, + { + "name": "type", + "description": "type 配置", + "type": "'circularProgress'", + "originalType": "'circularProgress'", + "required": true, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "name", + "description": "系列名称", + "type": "string", + "originalType": "string", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IProgressSeriesSpec" + }, + { + "name": "id", + "description": "数据唯一标识", + "type": "string | number", + "originalType": "StringOrNumber", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IProgressSeriesSpec" + }, + { + "name": "dataIndex", + "description": "系列关联的数据索引", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IProgressSeriesSpec" + }, + { + "name": "dataId", + "description": "系列关联的数据id", + "type": "string | number", + "originalType": "StringOrNumber", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IProgressSeriesSpec" + }, + { + "name": "dataKey", + "description": "dataKey用于绑定数据与Mark的关系, 该配置在动画中非常重要.", + "type": "string | string[] | ((data: Datum, index: number) => string)", + "originalType": "DataKeyType", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IProgressSeriesSpec" + }, + { + "name": "regionIndex", + "description": "系列关联的region索引", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IProgressSeriesSpec" + }, + { + "name": "regionId", + "description": "系列关联的region id", + "type": "string | number", + "originalType": "StringOrNumber", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IProgressSeriesSpec" + }, + { + "name": "seriesField", + "description": "分组字段", + "type": "string", + "originalType": "string", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IProgressSeriesSpec" + }, + { + "name": "seriesStyle", + "description": "系列样式", + "type": "ISeriesStyle", + "originalType": "ISeriesStyle", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISeriesStyle" + ], + "inheritedFrom": "IProgressSeriesSpec" + }, + { + "name": "stack", + "description": "是否对数据进行堆叠处理", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IProgressSeriesSpec" + }, + { + "name": "totalLabel", + "description": "堆叠汇总标签", + "type": "ITotalLabelSpec", + "originalType": "ITotalLabelSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ITotalLabelSpec" + ], + "inheritedFrom": "IProgressSeriesSpec" + }, + { + "name": "percent", + "description": "是否对数据进行百分比处理", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IProgressSeriesSpec" + }, + { + "name": "stackOffsetSilhouette", + "description": "是否围绕中心轴偏移轮廓", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IProgressSeriesSpec" + }, + { + "name": "invalidType", + "description": "非合规数据点连接方式 'break'指在该数据点处断开 'link' 指忽略该点保持连续 'zero' 指该点默认数值为0 'ignore' 指不处理", + "type": "'zero' | 'ignore' | 'link' | 'break'", + "originalType": "IInvalidType", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IProgressSeriesSpec" + }, + { + "name": "animation", + "description": "是否开启动画", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IProgressSeriesSpec" + }, + { + "name": "animationThreshold", + "description": "自动关闭动画的阀值，对应的是单系列data的长度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IProgressSeriesSpec" + }, + { + "name": "support3d", + "description": "是否支持3d视角", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IProgressSeriesSpec" + }, + { + "name": "extensionMark", + "description": "系列的扩展mark，能够获取系列上的数据", + "type": "(IExtensionMarkSpec> | IExtensionGroupMarkSpec)[]", + "originalType": "(IExtensionMarkSpec> | IExtensionGroupMarkSpec)[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IExtensionMarkSpec", + "IExtensionGroupMarkSpec" + ], + "inheritedFrom": "IProgressSeriesSpec" + }, + { + "name": "zIndex", + "description": "今当通过`series`配置的时候，才会生效", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IProgressSeriesSpec" + }, + { + "name": "cornerRadius", + "description": "进度条圆角半径", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IProgressSeriesSpec" + }, + { + "name": "progress", + "description": "progress 配置", + "type": "IMarkSpec", + "originalType": "IMarkSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMarkSpec", + "IArcMarkSpec" + ] + }, + { + "name": "track", + "description": "track 配置", + "type": "IMarkSpec", + "originalType": "IMarkSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMarkSpec", + "IArcMarkSpec" + ] + }, + { + "name": "centerX", + "description": "中心点 x 坐标", + "type": "number | string", + "originalType": "number | string", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IProgressLikeSeriesSpec" + }, + { + "name": "centerY", + "description": "中心点 y 坐标", + "type": "number | string", + "originalType": "number | string", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IProgressLikeSeriesSpec" + }, + { + "name": "outerRadius", + "description": "扇区外半径", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IProgressLikeSeriesSpec" + }, + { + "name": "innerRadius", + "description": "扇区内半径", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IProgressLikeSeriesSpec" + }, + { + "name": "startAngle", + "description": "扇区起始角度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IProgressLikeSeriesSpec" + }, + { + "name": "endAngle", + "description": "扇区结束角度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IProgressLikeSeriesSpec" + }, + { + "name": "categoryField", + "description": "分类字段", + "type": "string | string[]", + "originalType": "string | string[]", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "valueField", + "description": "数值字段", + "type": "string | string[]", + "originalType": "string | string[]", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IProgressLikeSeriesSpec" + }, + { + "name": "radiusField", + "description": "radiusField 配置", + "type": "string", + "originalType": "string", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "angleField", + "description": "angleField 配置", + "type": "string | string[]", + "originalType": "string | string[]", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IProgressLikeSeriesSpec" + }, + { + "name": "radius", + "description": "扇区半径", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IProgressLikeSeriesSpec" + }, + { + "name": "sortDataByAxis", + "description": "是否将数据按照数轴排序", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IProgressLikeSeriesSpec" + }, + { + "name": "roundCap", + "description": "圆角部分是否突出（可分别设置左侧和右侧）", + "type": "boolean | [boolean, boolean]", + "originalType": "boolean | [boolean, boolean]", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [ + ], + "inheritedFrom": "IProgressLikeSeriesSpec" + }, + { + "name": "tickMask", + "description": "tick 模式显示", + "type": "Omit, 'state'> & ITickMaskSpec", + "originalType": "Omit, 'state'> & ITickMaskSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMarkSpec", + "IArcMarkSpec", + "ITickMaskSpec" + ], + "inheritedFrom": "IProgressLikeSeriesSpec" + }, + { + "name": "clamp", + "description": "超出轴范围是否被裁剪（除tick模式外, 因为tick模式自带裁剪）", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IProgressLikeSeriesSpec" + }, + { + "name": "animationAppear", + "description": "入场动画配置", + "type": "'grow' | 'fadeIn' | IAnimationConfig", + "originalType": "IAnimationConfig", + "required": false, + "category": "动画配置", + "isSimple": false, + "dependencies": [ + "IAnimationConfig" + ], + "inheritedFrom": "IAnimationSpec" + }, + { + "name": "animationEnter", + "description": "数据新增动画配置", + "type": "IAnimationConfig", + "originalType": "IAnimationConfig", + "required": false, + "category": "动画配置", + "isSimple": false, + "dependencies": [ + "IAnimationConfig" + ], + "inheritedFrom": "IAnimationSpec" + }, + { + "name": "animationUpdate", + "description": "数据更新动画配置", + "type": "IAnimationConfig", + "originalType": "IAnimationConfig", + "required": false, + "category": "动画配置", + "isSimple": false, + "dependencies": [ + "IAnimationConfig" + ], + "inheritedFrom": "IAnimationSpec" + }, + { + "name": "animationExit", + "description": "数据移除动画配置", + "type": "IAnimationConfig", + "originalType": "IAnimationConfig", + "required": false, + "category": "动画配置", + "isSimple": false, + "dependencies": [ + "IAnimationConfig" + ], + "inheritedFrom": "IAnimationSpec" + }, + { + "name": "maxValue", + "description": "数据最大值，默认为 1", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + } + ], + "note": "展开自 Omit - 包含 46 个属性（已展开所有继承）", + "expandedFrom": "ICircularProgressSeriesSpec", + "omittedKeys": [ + "data", + "morph", + "stackValue", + "tooltip" + ] + } + }, + "timestamp": "2025-08-06T07:36:19.728Z", + "version": "1.0.0", + "sourceFile": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/chart/progress/circular/interface.d.ts", + "complexTypeDefinitions": { + "ICircularProgressSeriesSpec": { + "typeName": "ICircularProgressSeriesSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/series/progress/circular/interface.d.ts", + "note": "类型 ICircularProgressSeriesSpec 的定义位置" + }, + "ICartesianAxisSpec": { + "typeName": "ICartesianAxisSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/axis/cartesian/interface/spec.d.ts", + "note": "类型 ICartesianAxisSpec 的定义位置" + }, + "IPolarAxisSpec": { + "typeName": "IPolarAxisSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/axis/polar/interface/spec.d.ts", + "note": "类型 IPolarAxisSpec 的定义位置" + }, + "IData": { + "typeName": "IData", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 IData 的定义位置" + }, + "ILayoutPaddingSpec": { + "typeName": "ILayoutPaddingSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/layout.d.ts", + "note": "类型 ILayoutPaddingSpec 的定义位置" + }, + "IVisualSpecScale": { + "typeName": "IVisualSpecScale", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/visual.d.ts", + "note": "类型 IVisualSpecScale 的定义位置" + }, + "ISeriesSpec": { + "typeName": "ISeriesSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 ISeriesSpec 的定义位置" + }, + "ISeriesStyle": { + "typeName": "ISeriesStyle", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/series/interface/common.d.ts", + "note": "类型 ISeriesStyle 的定义位置" + }, + "IHoverSpec": { + "typeName": "IHoverSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/interaction/interface/spec.d.ts", + "note": "类型 IHoverSpec 的定义位置" + }, + "ISelectSpec": { + "typeName": "ISelectSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/interaction/interface/spec.d.ts", + "note": "类型 ISelectSpec 的定义位置" + }, + "RegionSpec": { + "typeName": "RegionSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/region/interface.d.ts", + "note": "类型 RegionSpec 的定义位置" + }, + "ITitleSpec": { + "typeName": "ITitleSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/title/interface/spec.d.ts", + "note": "类型 ITitleSpec 的定义位置" + }, + "ILayoutSpec": { + "typeName": "ILayoutSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/layout/interface.d.ts", + "note": "类型 ILayoutSpec 的定义位置" + }, + "ILegendSpec": { + "typeName": "ILegendSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/legend/interface.d.ts", + "note": "类型 ILegendSpec 的定义位置" + }, + "ICrosshairSpec": { + "typeName": "ICrosshairSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/crosshair/interface/spec.d.ts", + "note": "类型 ICrosshairSpec 的定义位置" + }, + "ITooltipSpec": { + "typeName": "ITooltipSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/tooltip/interface/spec.d.ts", + "note": "类型 ITooltipSpec 的定义位置" + }, + "IPlayer": { + "typeName": "IPlayer", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/player/interface/spec.d.ts", + "note": "类型 IPlayer 的定义位置" + }, + "IDataZoomSpec": { + "typeName": "IDataZoomSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/data-zoom/data-zoom/interface.d.ts", + "note": "类型 IDataZoomSpec 的定义位置" + }, + "IScrollBarSpec": { + "typeName": "IScrollBarSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/data-zoom/scroll-bar/interface.d.ts", + "note": "类型 IScrollBarSpec 的定义位置" + }, + "IBrushSpec": { + "typeName": "IBrushSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/brush/interface.d.ts", + "note": "类型 IBrushSpec 的定义位置" + }, + "ICustomMarkSpec": { + "typeName": "ICustomMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 ICustomMarkSpec 的定义位置" + }, + "ICommonAxisSpec": { + "typeName": "ICommonAxisSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/axis/interface.d.ts", + "note": "类型 ICommonAxisSpec 的定义位置" + }, + "ITheme": { + "typeName": "ITheme", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/theme/interface.d.ts", + "note": "类型 ITheme 的定义位置" + }, + "IBackgroundSpec": { + "typeName": "IBackgroundSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 IBackgroundSpec 的定义位置" + }, + "IMediaQuerySpec": { + "typeName": "IMediaQuerySpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/media-query.d.ts", + "note": "类型 IMediaQuerySpec 的定义位置" + }, + "IInteractionItemSpec": { + "typeName": "IInteractionItemSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/interaction/interface/spec.d.ts", + "note": "类型 IInteractionItemSpec 的定义位置" + }, + "ITotalLabelSpec": { + "typeName": "ITotalLabelSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/label/interface.d.ts", + "note": "类型 ITotalLabelSpec 的定义位置" + }, + "IExtensionMarkSpec": { + "typeName": "IExtensionMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 IExtensionMarkSpec 的定义位置" + }, + "IExtensionGroupMarkSpec": { + "typeName": "IExtensionGroupMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 IExtensionGroupMarkSpec 的定义位置" + }, + "IMarkSpec": { + "typeName": "IMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 IMarkSpec 的定义位置" + }, + "IArcMarkSpec": { + "typeName": "IArcMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/visual.d.ts", + "note": "类型 IArcMarkSpec 的定义位置" + }, + "ITickMaskSpec": { + "typeName": "ITickMaskSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/series/polar/progress-like/interface.d.ts", + "note": "类型 ITickMaskSpec 的定义位置" + }, + "IAnimationConfig": { + "typeName": "IAnimationConfig", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart/src/typings/spec/common.ts", + "note": "类型 IAnimationConfig 的定义位置" + } + }, + "statistics": { + "totalInterfaces": 4, + "totalProperties": 81, + "complexTypes": 34, + "typeFileLocations": 34, + "dependencyTypes": 866 + } +} \ No newline at end of file diff --git a/skills/vchart-development-skill/references/type-meta/common.json b/skills/vchart-development-skill/references/type-meta/common.json new file mode 100644 index 0000000000..600f8300d3 --- /dev/null +++ b/skills/vchart-development-skill/references/type-meta/common.json @@ -0,0 +1,770 @@ +{ + "typeName": "ICommonChartSpec", + "description": "ICommonChartSpec 配置规范的完整实现分析", + "inheritanceTree": { + "ICommonChartSpec": { + "description": "ICommonChartSpec 接口配置", + "directExtends": [ + "Omit" + ], + "ownProperties": [ + { + "name": "type", + "description": "type 配置", + "type": "'common'", + "originalType": "'common'", + "required": true, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "seriesField", + "description": "分组字段", + "type": "string", + "originalType": "string", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "series", + "description": "series 配置", + "type": "(IAreaSeriesSpec | ILineSeriesSpec | IBarSeriesSpec | IRangeColumnChartSpec | IRangeAreaChartSpec | IDotSeriesSpec | IMapSeriesSpec | IPieSeriesSpec | ILinkSeriesSpec | IRadarSeriesSpec | IRoseSeriesSpec | IScatterSeriesSpec | ICircularProgressSeriesSpec | ILinearProgressSeriesSpec | IWordCloudSeriesSpec | IFunnelSeriesSpec | IBoxPlotSeriesSpec | IGaugeSeriesSpec | ISankeySeriesSpec | ITreemapSeriesSpec | ISunburstSeriesSpec | ICirclePackingSeriesSpec | IWaterfallSeriesSpec | IHeatmapSeriesSpec | IGaugePointerSeriesSpec | ICorrelationSeriesSpec)[]", + "originalType": "(IAreaSeriesSpec | ILineSeriesSpec | IBarSeriesSpec | IRangeColumnChartSpec | IRangeAreaChartSpec | IDotSeriesSpec | IMapSeriesSpec | IPieSeriesSpec | ILinkSeriesSpec | IRadarSeriesSpec | IRoseSeriesSpec | IScatterSeriesSpec | ICircularProgressSeriesSpec | ILinearProgressSeriesSpec | IWordCloudSeriesSpec | IFunnelSeriesSpec | IBoxPlotSeriesSpec | IGaugeSeriesSpec | ISankeySeriesSpec | ITreemapSeriesSpec | ISunburstSeriesSpec | ICirclePackingSeriesSpec | IWaterfallSeriesSpec | IHeatmapSeriesSpec | IGaugePointerSeriesSpec | ICorrelationSeriesSpec)[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IAreaSeriesSpec", + "ILineSeriesSpec", + "IBarSeriesSpec", + "IRangeColumnChartSpec", + "IRangeAreaChartSpec", + "IDotSeriesSpec", + "IMapSeriesSpec", + "IPieSeriesSpec", + "ILinkSeriesSpec", + "IRadarSeriesSpec", + "IRoseSeriesSpec", + "IScatterSeriesSpec", + "ICircularProgressSeriesSpec", + "ILinearProgressSeriesSpec", + "IWordCloudSeriesSpec", + "IFunnelSeriesSpec", + "IBoxPlotSeriesSpec", + "IGaugeSeriesSpec", + "ISankeySeriesSpec", + "ITreemapSeriesSpec", + "ISunburstSeriesSpec", + "ICirclePackingSeriesSpec", + "IWaterfallSeriesSpec", + "IHeatmapSeriesSpec", + "IGaugePointerSeriesSpec", + "ICorrelationSeriesSpec" + ] + }, + { + "name": "axes", + "description": "坐标轴配置", + "type": "ICartesianAxisSpec[] | IPolarAxisSpec[]", + "originalType": "ICartesianAxisSpec[] | IPolarAxisSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICartesianAxisSpec", + "IPolarAxisSpec" + ] + }, + { + "name": "crosshair", + "description": "十字辅助线配置", + "type": "ICartesianCrosshairSpec | ICartesianCrosshairSpec[] | IPolarCrosshairSpec | IPolarCrosshairSpec[]", + "originalType": "ICartesianCrosshairSpec | ICartesianCrosshairSpec[] | IPolarCrosshairSpec | IPolarCrosshairSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICartesianCrosshairSpec", + "IPolarCrosshairSpec" + ] + }, + { + "name": "markLine", + "description": "**仅适用于笛卡尔坐标系**，参考线配置", + "type": "IMarkLineSpec | IMarkLineSpec[]", + "originalType": "IMarkLineSpec | IMarkLineSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMarkLineSpec" + ] + }, + { + "name": "markArea", + "description": "**仅适用于笛卡尔坐标系**，参考区域配置", + "type": "IMarkAreaSpec | IMarkAreaSpec[]", + "originalType": "IMarkAreaSpec | IMarkAreaSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMarkAreaSpec" + ] + }, + { + "name": "markPoint", + "description": "**仅适用于笛卡尔坐标系**，参考点配置", + "type": "IMarkPointSpec | IMarkPointSpec[]", + "originalType": "IMarkPointSpec | IMarkPointSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMarkPointSpec" + ] + }, + { + "name": "autoBandSize", + "description": "是否开启自动 bandSize。如果开启，会根据传入的 barWidth 等配置自动计算 bandSize，从而影响轴实际长度", + "type": "boolean | {\n extend: number;\n }", + "originalType": "boolean | {\n extend: number;\n }", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + } + ] + }, + "Omit": { + "description": "IChartSpec 的属性（排除 series）", + "directExtends": [], + "ownProperties": [ + { + "name": "type", + "description": "图表类型", + "type": "string", + "originalType": "string", + "required": true, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "data", + "description": "data 配置", + "type": "IData", + "originalType": "IData", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IData" + ] + }, + { + "name": "width", + "description": "画布宽度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "height", + "description": "画布高度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "autoFit", + "description": "是否自适应容器大小", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "padding", + "description": "图表整体 padding 设置", + "type": "ILayoutPaddingSpec", + "originalType": "ILayoutPaddingSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ILayoutPaddingSpec" + ] + }, + { + "name": "color", + "description": "图表色系配置", + "type": "string[] | Omit, 'id'>", + "originalType": "string[] | Omit, 'id'>", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IVisualSpecScale" + ] + }, + { + "name": "seriesStyle", + "description": "系列样式", + "type": "ISeriesStyle", + "originalType": "ISeriesStyle", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISeriesStyle" + ] + }, + { + "name": "animationThreshold", + "description": "自动关闭动画的阀值，对应的是单系列data的长度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "hover", + "description": "hover 交互", + "type": "boolean | IHoverSpec", + "originalType": "boolean | IHoverSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IHoverSpec" + ] + }, + { + "name": "select", + "description": "select 交互", + "type": "boolean | ISelectSpec", + "originalType": "boolean | ISelectSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISelectSpec" + ] + }, + { + "name": "region", + "description": "region配置", + "type": "RegionSpec[]", + "originalType": "RegionSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "RegionSpec" + ] + }, + { + "name": "title", + "description": "图表标题配置", + "type": "ITitleSpec", + "originalType": "ITitleSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ITitleSpec" + ] + }, + { + "name": "layout", + "description": "自定义布局函数", + "type": "ILayoutSpec", + "originalType": "ILayoutSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ILayoutSpec" + ] + }, + { + "name": "legends", + "description": "图例配置", + "type": "ILegendSpec | ILegendSpec[]", + "originalType": "ILegendSpec | ILegendSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ILegendSpec" + ] + }, + { + "name": "crosshair", + "description": "十字辅助线配置", + "type": "ICrosshairSpec | ICrosshairSpec[]", + "originalType": "ICrosshairSpec | ICrosshairSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICrosshairSpec" + ] + }, + { + "name": "tooltip", + "description": "tooltip配置", + "type": "ITooltipSpec", + "originalType": "ITooltipSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ITooltipSpec" + ] + }, + { + "name": "player", + "description": "播放器配置", + "type": "IPlayer", + "originalType": "IPlayer", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IPlayer" + ] + }, + { + "name": "dataZoom", + "description": "缩略轴配置", + "type": "IDataZoomSpec | IDataZoomSpec[]", + "originalType": "IDataZoomSpec | IDataZoomSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IDataZoomSpec" + ] + }, + { + "name": "scrollBar", + "description": "滚动条配置", + "type": "IScrollBarSpec | IScrollBarSpec[]", + "originalType": "IScrollBarSpec | IScrollBarSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IScrollBarSpec" + ] + }, + { + "name": "brush", + "description": "框选配置", + "type": "IBrushSpec", + "originalType": "IBrushSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IBrushSpec" + ] + }, + { + "name": "scales", + "description": "全局 scale 配置", + "type": "IVisualSpecScale[]", + "originalType": "IVisualSpecScale[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IVisualSpecScale" + ] + }, + { + "name": "customMark", + "description": "自定义mark", + "type": "ICustomMarkSpec[]", + "originalType": "ICustomMarkSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICustomMarkSpec" + ] + }, + { + "name": "axes", + "description": "axes 配置", + "type": "ICommonAxisSpec[]", + "originalType": "ICommonAxisSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICommonAxisSpec" + ] + }, + { + "name": "theme", + "description": "默认主题（支持完整主题对象或者主题名称，主题名称需要提前在 `ThemeManager` 中注册）", + "type": "Omit | string", + "originalType": "Omit | string", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ITheme" + ] + }, + { + "name": "background", + "description": "图表背景色配置，优先级高于构造函数中的 background 配置 自1.11.6版本支持渐变色对象的配置", + "type": "IBackgroundSpec", + "originalType": "IBackgroundSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IBackgroundSpec" + ] + }, + { + "name": "stackInverse", + "description": "堆积时是否逆序", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "stackSort", + "description": "堆积时是否排序", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "media", + "description": "媒体查询配置", + "type": "IMediaQuerySpec", + "originalType": "IMediaQuerySpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMediaQuerySpec" + ] + } + ], + "note": "展开自 Omit - 包含 29 个属性（已展开所有继承）", + "expandedFrom": "IChartSpec", + "omittedKeys": [ + "series" + ] + } + }, + "timestamp": "2025-08-06T08:00:37.268Z", + "version": "1.0.0", + "sourceFile": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/chart/common/interface.d.ts", + "complexTypeDefinitions": { + "IAreaSeriesSpec": { + "typeName": "IAreaSeriesSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/series/area/interface.d.ts", + "note": "类型 IAreaSeriesSpec 的定义位置" + }, + "ILineSeriesSpec": { + "typeName": "ILineSeriesSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/series/line/interface.d.ts", + "note": "类型 ILineSeriesSpec 的定义位置" + }, + "IBarSeriesSpec": { + "typeName": "IBarSeriesSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/series/bar/interface.d.ts", + "note": "类型 IBarSeriesSpec 的定义位置" + }, + "IRangeColumnChartSpec": { + "typeName": "IRangeColumnChartSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/chart/range-column/interface.d.ts", + "note": "类型 IRangeColumnChartSpec 的定义位置" + }, + "IRangeAreaChartSpec": { + "typeName": "IRangeAreaChartSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/chart/range-area/interface.d.ts", + "note": "类型 IRangeAreaChartSpec 的定义位置" + }, + "IDotSeriesSpec": { + "typeName": "IDotSeriesSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/series/dot/interface.d.ts", + "note": "类型 IDotSeriesSpec 的定义位置" + }, + "IMapSeriesSpec": { + "typeName": "IMapSeriesSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/series/map/interface.d.ts", + "note": "类型 IMapSeriesSpec 的定义位置" + }, + "IPieSeriesSpec": { + "typeName": "IPieSeriesSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/series/pie/interface.d.ts", + "note": "类型 IPieSeriesSpec 的定义位置" + }, + "ILinkSeriesSpec": { + "typeName": "ILinkSeriesSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/series/link/interface.d.ts", + "note": "类型 ILinkSeriesSpec 的定义位置" + }, + "IRadarSeriesSpec": { + "typeName": "IRadarSeriesSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/series/radar/interface.d.ts", + "note": "类型 IRadarSeriesSpec 的定义位置" + }, + "IRoseSeriesSpec": { + "typeName": "IRoseSeriesSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/series/rose/interface.d.ts", + "note": "类型 IRoseSeriesSpec 的定义位置" + }, + "IScatterSeriesSpec": { + "typeName": "IScatterSeriesSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/series/scatter/interface.d.ts", + "note": "类型 IScatterSeriesSpec 的定义位置" + }, + "ICircularProgressSeriesSpec": { + "typeName": "ICircularProgressSeriesSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/series/progress/circular/interface.d.ts", + "note": "类型 ICircularProgressSeriesSpec 的定义位置" + }, + "ILinearProgressSeriesSpec": { + "typeName": "ILinearProgressSeriesSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/series/progress/linear/interface.d.ts", + "note": "类型 ILinearProgressSeriesSpec 的定义位置" + }, + "IWordCloudSeriesSpec": { + "typeName": "IWordCloudSeriesSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/series/word-cloud/interface.d.ts", + "note": "类型 IWordCloudSeriesSpec 的定义位置" + }, + "IFunnelSeriesSpec": { + "typeName": "IFunnelSeriesSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/series/funnel/interface.d.ts", + "note": "类型 IFunnelSeriesSpec 的定义位置" + }, + "IBoxPlotSeriesSpec": { + "typeName": "IBoxPlotSeriesSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/series/box-plot/interface.d.ts", + "note": "类型 IBoxPlotSeriesSpec 的定义位置" + }, + "IGaugeSeriesSpec": { + "typeName": "IGaugeSeriesSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/series/gauge/interface.d.ts", + "note": "类型 IGaugeSeriesSpec 的定义位置" + }, + "ISankeySeriesSpec": { + "typeName": "ISankeySeriesSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/series/sankey/interface.d.ts", + "note": "类型 ISankeySeriesSpec 的定义位置" + }, + "ITreemapSeriesSpec": { + "typeName": "ITreemapSeriesSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/series/treemap/interface.d.ts", + "note": "类型 ITreemapSeriesSpec 的定义位置" + }, + "ISunburstSeriesSpec": { + "typeName": "ISunburstSeriesSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/series/sunburst/interface.d.ts", + "note": "类型 ISunburstSeriesSpec 的定义位置" + }, + "ICirclePackingSeriesSpec": { + "typeName": "ICirclePackingSeriesSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/series/circle-packing/interface.d.ts", + "note": "类型 ICirclePackingSeriesSpec 的定义位置" + }, + "IWaterfallSeriesSpec": { + "typeName": "IWaterfallSeriesSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/series/waterfall/interface.d.ts", + "note": "类型 IWaterfallSeriesSpec 的定义位置" + }, + "IHeatmapSeriesSpec": { + "typeName": "IHeatmapSeriesSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/series/heatmap/interface.d.ts", + "note": "类型 IHeatmapSeriesSpec 的定义位置" + }, + "IGaugePointerSeriesSpec": { + "typeName": "IGaugePointerSeriesSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/series/gauge/interface.d.ts", + "note": "类型 IGaugePointerSeriesSpec 的定义位置" + }, + "ICorrelationSeriesSpec": { + "typeName": "ICorrelationSeriesSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/series/correlation/interface.d.ts", + "note": "类型 ICorrelationSeriesSpec 的定义位置" + }, + "ICartesianAxisSpec": { + "typeName": "ICartesianAxisSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/axis/cartesian/interface/spec.d.ts", + "note": "类型 ICartesianAxisSpec 的定义位置" + }, + "IPolarAxisSpec": { + "typeName": "IPolarAxisSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/axis/polar/interface/spec.d.ts", + "note": "类型 IPolarAxisSpec 的定义位置" + }, + "ICartesianCrosshairSpec": { + "typeName": "ICartesianCrosshairSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/crosshair/interface/spec.d.ts", + "note": "类型 ICartesianCrosshairSpec 的定义位置" + }, + "IPolarCrosshairSpec": { + "typeName": "IPolarCrosshairSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/crosshair/interface/spec.d.ts", + "note": "类型 IPolarCrosshairSpec 的定义位置" + }, + "IMarkLineSpec": { + "typeName": "IMarkLineSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/marker/mark-line/interface/spec.d.ts", + "note": "类型 IMarkLineSpec 的定义位置" + }, + "IMarkAreaSpec": { + "typeName": "IMarkAreaSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/marker/mark-area/interface/spec.d.ts", + "note": "类型 IMarkAreaSpec 的定义位置" + }, + "IMarkPointSpec": { + "typeName": "IMarkPointSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/marker/mark-point/interface/spec.d.ts", + "note": "类型 IMarkPointSpec 的定义位置" + }, + "IData": { + "typeName": "IData", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 IData 的定义位置" + }, + "ILayoutPaddingSpec": { + "typeName": "ILayoutPaddingSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/layout.d.ts", + "note": "类型 ILayoutPaddingSpec 的定义位置" + }, + "IVisualSpecScale": { + "typeName": "IVisualSpecScale", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/visual.d.ts", + "note": "类型 IVisualSpecScale 的定义位置" + }, + "ISeriesStyle": { + "typeName": "ISeriesStyle", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/series/interface/common.d.ts", + "note": "类型 ISeriesStyle 的定义位置" + }, + "IHoverSpec": { + "typeName": "IHoverSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/interaction/interface/spec.d.ts", + "note": "类型 IHoverSpec 的定义位置" + }, + "ISelectSpec": { + "typeName": "ISelectSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/interaction/interface/spec.d.ts", + "note": "类型 ISelectSpec 的定义位置" + }, + "RegionSpec": { + "typeName": "RegionSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/region/interface.d.ts", + "note": "类型 RegionSpec 的定义位置" + }, + "ITitleSpec": { + "typeName": "ITitleSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/title/interface/spec.d.ts", + "note": "类型 ITitleSpec 的定义位置" + }, + "ILayoutSpec": { + "typeName": "ILayoutSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/layout/interface.d.ts", + "note": "类型 ILayoutSpec 的定义位置" + }, + "ILegendSpec": { + "typeName": "ILegendSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/legend/interface.d.ts", + "note": "类型 ILegendSpec 的定义位置" + }, + "ICrosshairSpec": { + "typeName": "ICrosshairSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/crosshair/interface/spec.d.ts", + "note": "类型 ICrosshairSpec 的定义位置" + }, + "ITooltipSpec": { + "typeName": "ITooltipSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/tooltip/interface/spec.d.ts", + "note": "类型 ITooltipSpec 的定义位置" + }, + "IPlayer": { + "typeName": "IPlayer", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/player/interface/spec.d.ts", + "note": "类型 IPlayer 的定义位置" + }, + "IDataZoomSpec": { + "typeName": "IDataZoomSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/data-zoom/data-zoom/interface.d.ts", + "note": "类型 IDataZoomSpec 的定义位置" + }, + "IScrollBarSpec": { + "typeName": "IScrollBarSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/data-zoom/scroll-bar/interface.d.ts", + "note": "类型 IScrollBarSpec 的定义位置" + }, + "IBrushSpec": { + "typeName": "IBrushSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/brush/interface.d.ts", + "note": "类型 IBrushSpec 的定义位置" + }, + "ICustomMarkSpec": { + "typeName": "ICustomMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 ICustomMarkSpec 的定义位置" + }, + "ICommonAxisSpec": { + "typeName": "ICommonAxisSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/axis/interface.d.ts", + "note": "类型 ICommonAxisSpec 的定义位置" + }, + "ITheme": { + "typeName": "ITheme", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/theme/interface.d.ts", + "note": "类型 ITheme 的定义位置" + }, + "IBackgroundSpec": { + "typeName": "IBackgroundSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 IBackgroundSpec 的定义位置" + }, + "IMediaQuerySpec": { + "typeName": "IMediaQuerySpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/media-query.d.ts", + "note": "类型 IMediaQuerySpec 的定义位置" + } + }, + "statistics": { + "totalInterfaces": 2, + "totalProperties": 38, + "complexTypes": 54, + "typeFileLocations": 54, + "dependencyTypes": 923 + } +} \ No newline at end of file diff --git a/skills/vchart-development-skill/references/type-meta/correlation.json b/skills/vchart-development-skill/references/type-meta/correlation.json new file mode 100644 index 0000000000..f17a9424b8 --- /dev/null +++ b/skills/vchart-development-skill/references/type-meta/correlation.json @@ -0,0 +1,772 @@ +{ + "typeName": "ICorrelationChartSpec", + "description": "ICorrelationChartSpec 配置规范的完整实现分析", + "inheritanceTree": { + "ICorrelationChartSpec": { + "description": "ICorrelationChartSpec 接口配置", + "directExtends": [ + "Omit", + "IChartExtendsSeriesSpec" + ], + "ownProperties": [ + { + "name": "type", + "description": "type 配置", + "type": "'correlation'", + "originalType": "'correlation'", + "required": true, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "series", + "description": "series 配置", + "type": "ICorrelationSeriesSpec[]", + "originalType": "ICorrelationSeriesSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICorrelationSeriesSpec" + ] + } + ] + }, + "Omit": { + "description": "IChartSpec 的属性（排除 padding）", + "directExtends": [], + "ownProperties": [ + { + "name": "type", + "description": "图表类型", + "type": "string", + "originalType": "string", + "required": true, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "data", + "description": "data 配置", + "type": "IData", + "originalType": "IData", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IData" + ] + }, + { + "name": "width", + "description": "画布宽度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "height", + "description": "画布高度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "autoFit", + "description": "是否自适应容器大小", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "color", + "description": "图表色系配置", + "type": "string[] | Omit, 'id'>", + "originalType": "string[] | Omit, 'id'>", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IVisualSpecScale" + ] + }, + { + "name": "series", + "description": "series 配置", + "type": "ISeriesSpec[]", + "originalType": "ISeriesSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISeriesSpec" + ] + }, + { + "name": "seriesStyle", + "description": "系列样式", + "type": "ISeriesStyle", + "originalType": "ISeriesStyle", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISeriesStyle" + ] + }, + { + "name": "animationThreshold", + "description": "自动关闭动画的阀值，对应的是单系列data的长度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "hover", + "description": "hover 交互", + "type": "boolean | IHoverSpec", + "originalType": "boolean | IHoverSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IHoverSpec" + ] + }, + { + "name": "select", + "description": "select 交互", + "type": "boolean | ISelectSpec", + "originalType": "boolean | ISelectSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISelectSpec" + ] + }, + { + "name": "region", + "description": "region配置", + "type": "RegionSpec[]", + "originalType": "RegionSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "RegionSpec" + ] + }, + { + "name": "title", + "description": "图表标题配置", + "type": "ITitleSpec", + "originalType": "ITitleSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ITitleSpec" + ] + }, + { + "name": "layout", + "description": "自定义布局函数", + "type": "ILayoutSpec", + "originalType": "ILayoutSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ILayoutSpec" + ] + }, + { + "name": "legends", + "description": "图例配置", + "type": "ILegendSpec | ILegendSpec[]", + "originalType": "ILegendSpec | ILegendSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ILegendSpec" + ] + }, + { + "name": "crosshair", + "description": "十字辅助线配置", + "type": "ICrosshairSpec | ICrosshairSpec[]", + "originalType": "ICrosshairSpec | ICrosshairSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICrosshairSpec" + ] + }, + { + "name": "tooltip", + "description": "tooltip配置", + "type": "ITooltipSpec", + "originalType": "ITooltipSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ITooltipSpec" + ] + }, + { + "name": "player", + "description": "播放器配置", + "type": "IPlayer", + "originalType": "IPlayer", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IPlayer" + ] + }, + { + "name": "dataZoom", + "description": "缩略轴配置", + "type": "IDataZoomSpec | IDataZoomSpec[]", + "originalType": "IDataZoomSpec | IDataZoomSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IDataZoomSpec" + ] + }, + { + "name": "scrollBar", + "description": "滚动条配置", + "type": "IScrollBarSpec | IScrollBarSpec[]", + "originalType": "IScrollBarSpec | IScrollBarSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IScrollBarSpec" + ] + }, + { + "name": "brush", + "description": "框选配置", + "type": "IBrushSpec", + "originalType": "IBrushSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IBrushSpec" + ] + }, + { + "name": "scales", + "description": "全局 scale 配置", + "type": "IVisualSpecScale[]", + "originalType": "IVisualSpecScale[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IVisualSpecScale" + ] + }, + { + "name": "customMark", + "description": "自定义mark", + "type": "ICustomMarkSpec[]", + "originalType": "ICustomMarkSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICustomMarkSpec" + ] + }, + { + "name": "axes", + "description": "axes 配置", + "type": "ICommonAxisSpec[]", + "originalType": "ICommonAxisSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICommonAxisSpec" + ] + }, + { + "name": "theme", + "description": "默认主题（支持完整主题对象或者主题名称，主题名称需要提前在 `ThemeManager` 中注册）", + "type": "Omit | string", + "originalType": "Omit | string", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ITheme" + ] + }, + { + "name": "background", + "description": "图表背景色配置，优先级高于构造函数中的 background 配置 自1.11.6版本支持渐变色对象的配置", + "type": "IBackgroundSpec", + "originalType": "IBackgroundSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IBackgroundSpec" + ] + }, + { + "name": "stackInverse", + "description": "堆积时是否逆序", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "stackSort", + "description": "堆积时是否排序", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "media", + "description": "媒体查询配置", + "type": "IMediaQuerySpec", + "originalType": "IMediaQuerySpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMediaQuerySpec" + ] + } + ], + "note": "展开自 Omit - 包含 29 个属性（已展开所有继承）", + "expandedFrom": "IChartSpec", + "omittedKeys": [ + "padding" + ] + }, + "IChartExtendsSeriesSpec": { + "description": "ICorrelationSeriesSpec 的属性（排除 data, morph, stackValue, tooltip）", + "directExtends": [], + "ownProperties": [ + { + "name": "animationAppear", + "description": "入场动画配置", + "type": "'scaleIn' | 'fadeIn' | IAnimationConfig", + "originalType": "IAnimationConfig", + "required": false, + "category": "动画配置", + "isSimple": false, + "dependencies": [ + "IAnimationConfig" + ], + "inheritedFrom": "IAnimationSpec" + }, + { + "name": "animationEnter", + "description": "数据新增动画配置", + "type": "IAnimationConfig", + "originalType": "IAnimationConfig", + "required": false, + "category": "动画配置", + "isSimple": false, + "dependencies": [ + "IAnimationConfig" + ], + "inheritedFrom": "IAnimationSpec" + }, + { + "name": "animationUpdate", + "description": "数据更新动画配置", + "type": "IAnimationConfig", + "originalType": "IAnimationConfig", + "required": false, + "category": "动画配置", + "isSimple": false, + "dependencies": [ + "IAnimationConfig" + ], + "inheritedFrom": "IAnimationSpec" + }, + { + "name": "animationExit", + "description": "数据移除动画配置", + "type": "IAnimationConfig", + "originalType": "IAnimationConfig", + "required": false, + "category": "动画配置", + "isSimple": false, + "dependencies": [ + "IAnimationConfig" + ], + "inheritedFrom": "IAnimationSpec" + }, + { + "name": "type", + "description": "系列类型", + "type": "'correlation'", + "originalType": "'correlation'", + "required": true, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "categoryField", + "description": "节点名称字段配置", + "type": "string", + "originalType": "string", + "required": true, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "valueField", + "description": "相关性数据字段配置", + "type": "string", + "originalType": "string", + "required": true, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "seriesField", + "description": "节点系列字段配置", + "type": "string", + "originalType": "string", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "sizeField", + "description": "节点尺寸数据字段配置", + "type": "string", + "originalType": "string", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "sizeRange", + "description": "节点尺寸映射范围", + "type": "number[]", + "originalType": "number[]", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "centerX", + "description": "图表中心点位置X坐标", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "centerY", + "description": "图表中心点位置Y坐标", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "innerRadius", + "description": "节点分布内半径", + "type": "string | number", + "originalType": "string | number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "outerRadius", + "description": "节点分布外半径", + "type": "string | number", + "originalType": "string | number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "startAngle", + "description": "图表起始角度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "endAngle", + "description": "图表终止角度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "centerPoint", + "description": "centerPoint 配置", + "type": "IMarkSpec", + "originalType": "IMarkSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMarkSpec", + "ISymbolMarkSpec" + ] + }, + { + "name": "ripplePoint", + "description": "ripplePoint 配置", + "type": "IMarkSpec", + "originalType": "IMarkSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMarkSpec", + "IRippleMarkSpec" + ] + }, + { + "name": "centerLabel", + "description": "centerLabel 配置", + "type": "ILabelSpec & {\n position?: 'top' | 'bottom' | 'left' | 'right' | 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'center';\n }", + "originalType": "ILabelSpec & {\n position?: 'top' | 'bottom' | 'left' | 'right' | 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'center';\n }", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [] + }, + { + "name": "nodePoint", + "description": "nodePoint 配置", + "type": "IMarkSpec", + "originalType": "IMarkSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMarkSpec", + "ISymbolMarkSpec" + ] + }, + { + "name": "label", + "description": "label 配置", + "type": "IMultiLabelSpec", + "originalType": "IMultiLabelSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMultiLabelSpec", + "ILabelSpec" + ] + } + ], + "note": "展开自 Omit - 包含 21 个属性（已展开所有继承）", + "expandedFrom": "ICorrelationSeriesSpec", + "omittedKeys": [ + "data", + "morph", + "stackValue", + "tooltip" + ] + } + }, + "timestamp": "2025-08-06T07:37:26.940Z", + "version": "1.0.0", + "sourceFile": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/chart/correlation/interface.d.ts", + "complexTypeDefinitions": { + "ICorrelationSeriesSpec": { + "typeName": "ICorrelationSeriesSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/series/correlation/interface.d.ts", + "note": "类型 ICorrelationSeriesSpec 的定义位置" + }, + "IData": { + "typeName": "IData", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 IData 的定义位置" + }, + "IVisualSpecScale": { + "typeName": "IVisualSpecScale", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/visual.d.ts", + "note": "类型 IVisualSpecScale 的定义位置" + }, + "ISeriesSpec": { + "typeName": "ISeriesSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 ISeriesSpec 的定义位置" + }, + "ISeriesStyle": { + "typeName": "ISeriesStyle", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/series/interface/common.d.ts", + "note": "类型 ISeriesStyle 的定义位置" + }, + "IHoverSpec": { + "typeName": "IHoverSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/interaction/interface/spec.d.ts", + "note": "类型 IHoverSpec 的定义位置" + }, + "ISelectSpec": { + "typeName": "ISelectSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/interaction/interface/spec.d.ts", + "note": "类型 ISelectSpec 的定义位置" + }, + "RegionSpec": { + "typeName": "RegionSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/region/interface.d.ts", + "note": "类型 RegionSpec 的定义位置" + }, + "ITitleSpec": { + "typeName": "ITitleSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/title/interface/spec.d.ts", + "note": "类型 ITitleSpec 的定义位置" + }, + "ILayoutSpec": { + "typeName": "ILayoutSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/layout/interface.d.ts", + "note": "类型 ILayoutSpec 的定义位置" + }, + "ILegendSpec": { + "typeName": "ILegendSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/legend/interface.d.ts", + "note": "类型 ILegendSpec 的定义位置" + }, + "ICrosshairSpec": { + "typeName": "ICrosshairSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/crosshair/interface/spec.d.ts", + "note": "类型 ICrosshairSpec 的定义位置" + }, + "ITooltipSpec": { + "typeName": "ITooltipSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/tooltip/interface/spec.d.ts", + "note": "类型 ITooltipSpec 的定义位置" + }, + "IPlayer": { + "typeName": "IPlayer", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/player/interface/spec.d.ts", + "note": "类型 IPlayer 的定义位置" + }, + "IDataZoomSpec": { + "typeName": "IDataZoomSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/data-zoom/data-zoom/interface.d.ts", + "note": "类型 IDataZoomSpec 的定义位置" + }, + "IScrollBarSpec": { + "typeName": "IScrollBarSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/data-zoom/scroll-bar/interface.d.ts", + "note": "类型 IScrollBarSpec 的定义位置" + }, + "IBrushSpec": { + "typeName": "IBrushSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/brush/interface.d.ts", + "note": "类型 IBrushSpec 的定义位置" + }, + "ICustomMarkSpec": { + "typeName": "ICustomMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 ICustomMarkSpec 的定义位置" + }, + "ICommonAxisSpec": { + "typeName": "ICommonAxisSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/axis/interface.d.ts", + "note": "类型 ICommonAxisSpec 的定义位置" + }, + "ITheme": { + "typeName": "ITheme", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/theme/interface.d.ts", + "note": "类型 ITheme 的定义位置" + }, + "IBackgroundSpec": { + "typeName": "IBackgroundSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 IBackgroundSpec 的定义位置" + }, + "IMediaQuerySpec": { + "typeName": "IMediaQuerySpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/media-query.d.ts", + "note": "类型 IMediaQuerySpec 的定义位置" + }, + "IAnimationConfig": { + "typeName": "IAnimationConfig", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart/src/typings/spec/common.ts", + "note": "类型 IAnimationConfig 的定义位置" + }, + "IMarkSpec": { + "typeName": "IMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 IMarkSpec 的定义位置" + }, + "ISymbolMarkSpec": { + "typeName": "ISymbolMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/visual.d.ts", + "note": "类型 ISymbolMarkSpec 的定义位置" + }, + "IRippleMarkSpec": { + "typeName": "IRippleMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/visual.d.ts", + "note": "类型 IRippleMarkSpec 的定义位置" + } + }, + "statistics": { + "totalInterfaces": 3, + "totalProperties": 52, + "complexTypes": 26, + "typeFileLocations": 26, + "dependencyTypes": 850 + } +} \ No newline at end of file diff --git a/skills/vchart-development-skill/references/type-meta/funnel.json b/skills/vchart-development-skill/references/type-meta/funnel.json new file mode 100644 index 0000000000..b007e437cf --- /dev/null +++ b/skills/vchart-development-skill/references/type-meta/funnel.json @@ -0,0 +1,1076 @@ +{ + "typeName": "IFunnelChartSpec", + "description": "IFunnelChartSpec 配置规范的完整实现分析", + "inheritanceTree": { + "IFunnelChartSpec": { + "description": "IFunnelChartSpec 接口配置", + "directExtends": [ + "IChartSpec", + "IChartExtendsSeriesSpec" + ], + "ownProperties": [ + { + "name": "type", + "description": "type 配置", + "type": "'funnel'", + "originalType": "'funnel'", + "required": true, + "category": "未分类", + "isSimple": true, + "dependencies": [] + } + ] + }, + "IChartSpec": { + "description": "IChartSpec 接口配置", + "directExtends": [], + "ownProperties": [ + { + "name": "type", + "description": "图表类型", + "type": "string", + "originalType": "string", + "required": true, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "data", + "description": "data 配置", + "type": "IData", + "originalType": "IData", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IData" + ] + }, + { + "name": "width", + "description": "画布宽度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "height", + "description": "画布高度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "autoFit", + "description": "是否自适应容器大小", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "padding", + "description": "图表整体 padding 设置", + "type": "ILayoutPaddingSpec", + "originalType": "ILayoutPaddingSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ILayoutPaddingSpec" + ] + }, + { + "name": "color", + "description": "图表色系配置", + "type": "string[] | Omit, 'id'>", + "originalType": "string[] | Omit, 'id'>", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IVisualSpecScale" + ] + }, + { + "name": "series", + "description": "series 配置", + "type": "ISeriesSpec[]", + "originalType": "ISeriesSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISeriesSpec" + ] + }, + { + "name": "seriesStyle", + "description": "系列样式", + "type": "ISeriesStyle", + "originalType": "ISeriesStyle", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISeriesStyle" + ] + }, + { + "name": "animationThreshold", + "description": "自动关闭动画的阀值，对应的是单系列data的长度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "hover", + "description": "hover 交互", + "type": "boolean | IHoverSpec", + "originalType": "boolean | IHoverSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IHoverSpec" + ] + }, + { + "name": "select", + "description": "select 交互", + "type": "boolean | ISelectSpec", + "originalType": "boolean | ISelectSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISelectSpec" + ] + }, + { + "name": "region", + "description": "region配置", + "type": "RegionSpec[]", + "originalType": "RegionSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "RegionSpec" + ] + }, + { + "name": "title", + "description": "图表标题配置", + "type": "ITitleSpec", + "originalType": "ITitleSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ITitleSpec" + ] + }, + { + "name": "layout", + "description": "自定义布局函数", + "type": "ILayoutSpec", + "originalType": "ILayoutSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ILayoutSpec" + ] + }, + { + "name": "legends", + "description": "图例配置", + "type": "ILegendSpec | ILegendSpec[]", + "originalType": "ILegendSpec | ILegendSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ILegendSpec" + ] + }, + { + "name": "crosshair", + "description": "十字辅助线配置", + "type": "ICrosshairSpec | ICrosshairSpec[]", + "originalType": "ICrosshairSpec | ICrosshairSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICrosshairSpec" + ] + }, + { + "name": "tooltip", + "description": "tooltip配置", + "type": "ITooltipSpec", + "originalType": "ITooltipSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ITooltipSpec" + ] + }, + { + "name": "player", + "description": "播放器配置", + "type": "IPlayer", + "originalType": "IPlayer", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IPlayer" + ] + }, + { + "name": "dataZoom", + "description": "缩略轴配置", + "type": "IDataZoomSpec | IDataZoomSpec[]", + "originalType": "IDataZoomSpec | IDataZoomSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IDataZoomSpec" + ] + }, + { + "name": "scrollBar", + "description": "滚动条配置", + "type": "IScrollBarSpec | IScrollBarSpec[]", + "originalType": "IScrollBarSpec | IScrollBarSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IScrollBarSpec" + ] + }, + { + "name": "brush", + "description": "框选配置", + "type": "IBrushSpec", + "originalType": "IBrushSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IBrushSpec" + ] + }, + { + "name": "scales", + "description": "全局 scale 配置", + "type": "IVisualSpecScale[]", + "originalType": "IVisualSpecScale[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IVisualSpecScale" + ] + }, + { + "name": "customMark", + "description": "自定义mark", + "type": "ICustomMarkSpec[]", + "originalType": "ICustomMarkSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICustomMarkSpec" + ] + }, + { + "name": "axes", + "description": "axes 配置", + "type": "ICommonAxisSpec[]", + "originalType": "ICommonAxisSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICommonAxisSpec" + ] + }, + { + "name": "theme", + "description": "默认主题（支持完整主题对象或者主题名称，主题名称需要提前在 `ThemeManager` 中注册）", + "type": "Omit | string", + "originalType": "Omit | string", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ITheme" + ] + }, + { + "name": "background", + "description": "图表背景色配置，优先级高于构造函数中的 background 配置 自1.11.6版本支持渐变色对象的配置", + "type": "IBackgroundSpec", + "originalType": "IBackgroundSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IBackgroundSpec" + ] + }, + { + "name": "stackInverse", + "description": "堆积时是否逆序", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "stackSort", + "description": "堆积时是否排序", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "media", + "description": "媒体查询配置", + "type": "IMediaQuerySpec", + "originalType": "IMediaQuerySpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMediaQuerySpec" + ] + } + ] + }, + "IChartExtendsSeriesSpec": { + "description": "IFunnelSeriesSpec 的属性（排除 data, morph, stackValue, tooltip）", + "directExtends": [], + "ownProperties": [ + { + "name": "hover", + "description": "图表hover相关交互配置，当值为boolean类型时，表示开启或者关闭该交互 也支持更详细的交互配置", + "type": "IHoverSpec | boolean", + "originalType": "IHoverSpec | boolean", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IHoverSpec" + ], + "inheritedFrom": "ISeriesSpec" + }, + { + "name": "select", + "description": "图表选中相关交互配置，当值为boolean类型时，表示开启或者关闭该交互 也支持更详细的交互配置", + "type": "ISelectSpec | boolean", + "originalType": "ISelectSpec | boolean", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISelectSpec" + ], + "inheritedFrom": "ISeriesSpec" + }, + { + "name": "interactions", + "description": "其他需要按需注册的类型交互", + "type": "IInteractionItemSpec[]", + "originalType": "IInteractionItemSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IInteractionItemSpec" + ], + "inheritedFrom": "ISeriesSpec" + }, + { + "name": "type", + "description": "type 配置", + "type": "'funnel'", + "originalType": "'funnel'", + "required": true, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "name", + "description": "系列名称", + "type": "string", + "originalType": "string", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ISeriesSpec" + }, + { + "name": "id", + "description": "数据唯一标识", + "type": "string | number", + "originalType": "StringOrNumber", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ISeriesSpec" + }, + { + "name": "dataIndex", + "description": "系列关联的数据索引", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ISeriesSpec" + }, + { + "name": "dataId", + "description": "系列关联的数据id", + "type": "string | number", + "originalType": "StringOrNumber", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ISeriesSpec" + }, + { + "name": "dataKey", + "description": "dataKey用于绑定数据与Mark的关系, 该配置在动画中非常重要.", + "type": "string | string[] | ((data: Datum, index: number) => string)", + "originalType": "DataKeyType", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ISeriesSpec" + }, + { + "name": "regionIndex", + "description": "系列关联的region索引", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ISeriesSpec" + }, + { + "name": "regionId", + "description": "系列关联的region id", + "type": "string | number", + "originalType": "StringOrNumber", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ISeriesSpec" + }, + { + "name": "seriesField", + "description": "分组字段", + "type": "string", + "originalType": "string", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ISeriesSpec" + }, + { + "name": "seriesStyle", + "description": "系列样式", + "type": "ISeriesStyle", + "originalType": "ISeriesStyle", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISeriesStyle" + ], + "inheritedFrom": "ISeriesSpec" + }, + { + "name": "stack", + "description": "是否对数据进行堆叠处理", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ISeriesSpec" + }, + { + "name": "totalLabel", + "description": "堆叠汇总标签", + "type": "ITotalLabelSpec", + "originalType": "ITotalLabelSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ITotalLabelSpec" + ], + "inheritedFrom": "ISeriesSpec" + }, + { + "name": "percent", + "description": "是否对数据进行百分比处理", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ISeriesSpec" + }, + { + "name": "stackOffsetSilhouette", + "description": "是否围绕中心轴偏移轮廓", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ISeriesSpec" + }, + { + "name": "invalidType", + "description": "非合规数据点连接方式 'break'指在该数据点处断开 'link' 指忽略该点保持连续 'zero' 指该点默认数值为0 'ignore' 指不处理", + "type": "'zero' | 'ignore' | 'link' | 'break'", + "originalType": "IInvalidType", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ISeriesSpec" + }, + { + "name": "animation", + "description": "是否开启动画", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ISeriesSpec" + }, + { + "name": "animationThreshold", + "description": "自动关闭动画的阀值，对应的是单系列data的长度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ISeriesSpec" + }, + { + "name": "support3d", + "description": "是否支持3d视角", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ISeriesSpec" + }, + { + "name": "extensionMark", + "description": "系列的扩展mark，能够获取系列上的数据", + "type": "(IExtensionMarkSpec> | IExtensionGroupMarkSpec)[]", + "originalType": "(IExtensionMarkSpec> | IExtensionGroupMarkSpec)[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IExtensionMarkSpec", + "IExtensionGroupMarkSpec" + ], + "inheritedFrom": "ISeriesSpec" + }, + { + "name": "zIndex", + "description": "今当通过`series`配置的时候，才会生效", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ISeriesSpec" + }, + { + "name": "animationAppear", + "description": "入场动画配置", + "type": "'clipIn' | 'fadeIn' | IAnimationConfig", + "originalType": "IAnimationConfig", + "required": false, + "category": "动画配置", + "isSimple": false, + "dependencies": [ + "IAnimationConfig" + ], + "inheritedFrom": "IAnimationSpec" + }, + { + "name": "animationEnter", + "description": "数据新增动画配置", + "type": "IAnimationConfig", + "originalType": "IAnimationConfig", + "required": false, + "category": "动画配置", + "isSimple": false, + "dependencies": [ + "IAnimationConfig" + ], + "inheritedFrom": "IAnimationSpec" + }, + { + "name": "animationUpdate", + "description": "数据更新动画配置", + "type": "IAnimationConfig", + "originalType": "IAnimationConfig", + "required": false, + "category": "动画配置", + "isSimple": false, + "dependencies": [ + "IAnimationConfig" + ], + "inheritedFrom": "IAnimationSpec" + }, + { + "name": "animationExit", + "description": "数据移除动画配置", + "type": "IAnimationConfig", + "originalType": "IAnimationConfig", + "required": false, + "category": "动画配置", + "isSimple": false, + "dependencies": [ + "IAnimationConfig" + ], + "inheritedFrom": "IAnimationSpec" + }, + { + "name": "categoryField", + "description": "分类字段", + "type": "string", + "originalType": "string", + "required": true, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "valueField", + "description": "数值字段", + "type": "string", + "originalType": "string", + "required": true, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "funnelOrient", + "description": "漏斗图朝向。", + "type": "'left' | 'top' | 'right' | 'bottom' | 'z'", + "originalType": "IOrientType", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "shape", + "description": "图元形状。转化漏斗图仅支持 'rect'", + "type": "'rect' | 'trapezoid'", + "originalType": "'rect' | 'trapezoid'", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "isTransform", + "description": "是否是转化漏斗图", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "isCone", + "description": "漏斗图最下层是否尖角。shape为`rect`时不生效", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "funnelAlign", + "description": "漏斗图对齐方式。转化漏斗图仅支持'center'", + "type": "'left' | 'center' | 'right'", + "originalType": "'left' | 'center' | 'right'", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "gap", + "description": "漏斗层之间的像素间隔。转化漏斗图不支持gap配置。", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "range", + "description": "指定数据项的最大值和最小值", + "type": "{\n min?: number;\n max?: number;\n }", + "originalType": "{\n min?: number;\n max?: number;\n }", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "maxSize", + "description": "漏斗图最大宽度，支持配置像素值和百分比字符串。", + "type": "number | IPercent", + "originalType": "number | IPercent", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IPercent" + ] + }, + { + "name": "minSize", + "description": "漏斗图最小宽度，支持配置像素值和百分比字符串。", + "type": "number | IPercent", + "originalType": "number | IPercent", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IPercent" + ] + }, + { + "name": "heightRatio", + "description": "漏斗层与转化层的图形高度比例 The height ratio between the funnel graphic and the transform graphic", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "transformRatioText", + "description": "漏斗图转化率文案，用于转化层 tooltip key 的显示内容", + "type": "string", + "originalType": "string", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "funnel", + "description": "funnel 配置", + "type": "IMarkSpec", + "originalType": "IMarkSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMarkSpec", + "IPathMarkSpec" + ] + }, + { + "name": "transform", + "description": "transform 配置", + "type": "IMarkSpec", + "originalType": "IMarkSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMarkSpec", + "IPathMarkSpec" + ] + }, + { + "name": "label", + "description": "label 配置", + "type": "IFunnelLabelSpec", + "originalType": "IFunnelLabelSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IFunnelLabelSpec" + ] + }, + { + "name": "outerLabel", + "description": "outerLabel 配置", + "type": "IFunnelOuterLabelSpec", + "originalType": "IFunnelOuterLabelSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IFunnelOuterLabelSpec" + ] + }, + { + "name": "transformLabel", + "description": "transformLabel 配置", + "type": "IFunnelLabelSpec", + "originalType": "IFunnelLabelSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IFunnelLabelSpec" + ] + } + ], + "note": "展开自 Omit - 包含 45 个属性（已展开所有继承）", + "expandedFrom": "IFunnelSeriesSpec", + "omittedKeys": [ + "data", + "morph", + "stackValue", + "tooltip" + ] + } + }, + "timestamp": "2025-08-06T07:38:20.505Z", + "version": "1.0.0", + "sourceFile": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/chart/funnel/interface.d.ts", + "complexTypeDefinitions": { + "IData": { + "typeName": "IData", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 IData 的定义位置" + }, + "ILayoutPaddingSpec": { + "typeName": "ILayoutPaddingSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/layout.d.ts", + "note": "类型 ILayoutPaddingSpec 的定义位置" + }, + "IVisualSpecScale": { + "typeName": "IVisualSpecScale", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/visual.d.ts", + "note": "类型 IVisualSpecScale 的定义位置" + }, + "ISeriesSpec": { + "typeName": "ISeriesSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 ISeriesSpec 的定义位置" + }, + "ISeriesStyle": { + "typeName": "ISeriesStyle", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/series/interface/common.d.ts", + "note": "类型 ISeriesStyle 的定义位置" + }, + "IHoverSpec": { + "typeName": "IHoverSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/interaction/interface/spec.d.ts", + "note": "类型 IHoverSpec 的定义位置" + }, + "ISelectSpec": { + "typeName": "ISelectSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/interaction/interface/spec.d.ts", + "note": "类型 ISelectSpec 的定义位置" + }, + "RegionSpec": { + "typeName": "RegionSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/region/interface.d.ts", + "note": "类型 RegionSpec 的定义位置" + }, + "ITitleSpec": { + "typeName": "ITitleSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/title/interface/spec.d.ts", + "note": "类型 ITitleSpec 的定义位置" + }, + "ILayoutSpec": { + "typeName": "ILayoutSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/layout/interface.d.ts", + "note": "类型 ILayoutSpec 的定义位置" + }, + "ILegendSpec": { + "typeName": "ILegendSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/legend/interface.d.ts", + "note": "类型 ILegendSpec 的定义位置" + }, + "ICrosshairSpec": { + "typeName": "ICrosshairSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/crosshair/interface/spec.d.ts", + "note": "类型 ICrosshairSpec 的定义位置" + }, + "ITooltipSpec": { + "typeName": "ITooltipSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/tooltip/interface/spec.d.ts", + "note": "类型 ITooltipSpec 的定义位置" + }, + "IPlayer": { + "typeName": "IPlayer", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/player/interface/spec.d.ts", + "note": "类型 IPlayer 的定义位置" + }, + "IDataZoomSpec": { + "typeName": "IDataZoomSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/data-zoom/data-zoom/interface.d.ts", + "note": "类型 IDataZoomSpec 的定义位置" + }, + "IScrollBarSpec": { + "typeName": "IScrollBarSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/data-zoom/scroll-bar/interface.d.ts", + "note": "类型 IScrollBarSpec 的定义位置" + }, + "IBrushSpec": { + "typeName": "IBrushSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/brush/interface.d.ts", + "note": "类型 IBrushSpec 的定义位置" + }, + "ICustomMarkSpec": { + "typeName": "ICustomMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 ICustomMarkSpec 的定义位置" + }, + "ICommonAxisSpec": { + "typeName": "ICommonAxisSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/axis/interface.d.ts", + "note": "类型 ICommonAxisSpec 的定义位置" + }, + "ITheme": { + "typeName": "ITheme", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/theme/interface.d.ts", + "note": "类型 ITheme 的定义位置" + }, + "IBackgroundSpec": { + "typeName": "IBackgroundSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 IBackgroundSpec 的定义位置" + }, + "IMediaQuerySpec": { + "typeName": "IMediaQuerySpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/media-query.d.ts", + "note": "类型 IMediaQuerySpec 的定义位置" + }, + "IInteractionItemSpec": { + "typeName": "IInteractionItemSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/interaction/interface/spec.d.ts", + "note": "类型 IInteractionItemSpec 的定义位置" + }, + "ITotalLabelSpec": { + "typeName": "ITotalLabelSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/label/interface.d.ts", + "note": "类型 ITotalLabelSpec 的定义位置" + }, + "IExtensionMarkSpec": { + "typeName": "IExtensionMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 IExtensionMarkSpec 的定义位置" + }, + "IExtensionGroupMarkSpec": { + "typeName": "IExtensionGroupMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 IExtensionGroupMarkSpec 的定义位置" + }, + "IAnimationConfig": { + "typeName": "IAnimationConfig", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart/src/typings/spec/common.ts", + "note": "类型 IAnimationConfig 的定义位置" + }, + "IPercent": { + "typeName": "IPercent", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/layout.d.ts", + "note": "类型 IPercent 的定义位置" + }, + "IMarkSpec": { + "typeName": "IMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 IMarkSpec 的定义位置" + }, + "IPathMarkSpec": { + "typeName": "IPathMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/visual.d.ts", + "note": "类型 IPathMarkSpec 的定义位置" + }, + "IFunnelLabelSpec": { + "typeName": "IFunnelLabelSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/series/funnel/interface.d.ts", + "note": "类型 IFunnelLabelSpec 的定义位置" + }, + "IFunnelOuterLabelSpec": { + "typeName": "IFunnelOuterLabelSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/series/funnel/interface.d.ts", + "note": "类型 IFunnelOuterLabelSpec 的定义位置" + } + }, + "statistics": { + "totalInterfaces": 3, + "totalProperties": 76, + "complexTypes": 32, + "typeFileLocations": 32, + "dependencyTypes": 853 + } +} \ No newline at end of file diff --git a/skills/vchart-development-skill/references/type-meta/gauge.json b/skills/vchart-development-skill/references/type-meta/gauge.json new file mode 100644 index 0000000000..64a59ff8cf --- /dev/null +++ b/skills/vchart-development-skill/references/type-meta/gauge.json @@ -0,0 +1,1180 @@ +{ + "typeName": "IGaugeChartSpec", + "description": "IGaugeChartSpec 配置规范的完整实现分析", + "inheritanceTree": { + "IGaugeChartSpec": { + "description": "IGaugeChartSpec 接口配置", + "directExtends": [ + "Omit", + "Omit" + ], + "ownProperties": [ + { + "name": "type", + "description": "type 配置", + "type": "'gauge'", + "originalType": "'gauge'", + "required": true, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "gauge", + "description": "表盘背景，可选择 gauge 系列或 circularProgress 系列的配置", + "type": "Omit | Omit", + "originalType": "Omit | Omit", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IGaugeSeriesSpec", + "ICircularProgressSeriesSpec" + ] + }, + { + "name": "axes", + "description": "axes 配置", + "type": "(IPolarAxisSpec | ILinearAxisSpec)[]", + "originalType": "(IPolarAxisSpec | ILinearAxisSpec)[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IPolarAxisSpec", + "ILinearAxisSpec" + ] + } + ] + }, + "Omit": { + "description": "IPolarChartSpec 的属性（排除 axes）", + "directExtends": [], + "ownProperties": [ + { + "name": "type", + "description": "图表类型", + "type": "string", + "originalType": "string", + "required": true, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IChartSpec" + }, + { + "name": "data", + "description": "data 配置", + "type": "IData", + "originalType": "IData", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IData" + ], + "inheritedFrom": "IChartSpec" + }, + { + "name": "width", + "description": "画布宽度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IChartSpec" + }, + { + "name": "height", + "description": "画布高度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IChartSpec" + }, + { + "name": "autoFit", + "description": "是否自适应容器大小", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IChartSpec" + }, + { + "name": "padding", + "description": "图表整体 padding 设置", + "type": "ILayoutPaddingSpec", + "originalType": "ILayoutPaddingSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ILayoutPaddingSpec" + ], + "inheritedFrom": "IChartSpec" + }, + { + "name": "color", + "description": "图表色系配置", + "type": "string[] | Omit, 'id'>", + "originalType": "string[] | Omit, 'id'>", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IVisualSpecScale" + ], + "inheritedFrom": "IChartSpec" + }, + { + "name": "series", + "description": "series 配置", + "type": "ISeriesSpec[]", + "originalType": "ISeriesSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISeriesSpec" + ], + "inheritedFrom": "IChartSpec" + }, + { + "name": "seriesStyle", + "description": "系列样式", + "type": "ISeriesStyle", + "originalType": "ISeriesStyle", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISeriesStyle" + ], + "inheritedFrom": "IChartSpec" + }, + { + "name": "animationThreshold", + "description": "自动关闭动画的阀值，对应的是单系列data的长度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IChartSpec" + }, + { + "name": "hover", + "description": "hover 交互", + "type": "boolean | IHoverSpec", + "originalType": "boolean | IHoverSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IHoverSpec" + ], + "inheritedFrom": "IChartSpec" + }, + { + "name": "select", + "description": "select 交互", + "type": "boolean | ISelectSpec", + "originalType": "boolean | ISelectSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISelectSpec" + ], + "inheritedFrom": "IChartSpec" + }, + { + "name": "region", + "description": "region配置", + "type": "RegionSpec[]", + "originalType": "RegionSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "RegionSpec" + ], + "inheritedFrom": "IChartSpec" + }, + { + "name": "title", + "description": "图表标题配置", + "type": "ITitleSpec", + "originalType": "ITitleSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ITitleSpec" + ], + "inheritedFrom": "IChartSpec" + }, + { + "name": "layout", + "description": "自定义布局函数", + "type": "ILayoutSpec", + "originalType": "ILayoutSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ILayoutSpec" + ], + "inheritedFrom": "IChartSpec" + }, + { + "name": "legends", + "description": "图例配置", + "type": "ILegendSpec | ILegendSpec[]", + "originalType": "ILegendSpec | ILegendSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ILegendSpec" + ], + "inheritedFrom": "IChartSpec" + }, + { + "name": "crosshair", + "description": "十字辅助线配置", + "type": "IPolarCrosshairSpec | IPolarCrosshairSpec[]", + "originalType": "IPolarCrosshairSpec | IPolarCrosshairSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IPolarCrosshairSpec" + ] + }, + { + "name": "tooltip", + "description": "tooltip配置", + "type": "ITooltipSpec", + "originalType": "ITooltipSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ITooltipSpec" + ], + "inheritedFrom": "IChartSpec" + }, + { + "name": "player", + "description": "播放器配置", + "type": "IPlayer", + "originalType": "IPlayer", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IPlayer" + ], + "inheritedFrom": "IChartSpec" + }, + { + "name": "dataZoom", + "description": "缩略轴配置", + "type": "IDataZoomSpec | IDataZoomSpec[]", + "originalType": "IDataZoomSpec | IDataZoomSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IDataZoomSpec" + ], + "inheritedFrom": "IChartSpec" + }, + { + "name": "scrollBar", + "description": "滚动条配置", + "type": "IScrollBarSpec | IScrollBarSpec[]", + "originalType": "IScrollBarSpec | IScrollBarSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IScrollBarSpec" + ], + "inheritedFrom": "IChartSpec" + }, + { + "name": "brush", + "description": "框选配置", + "type": "IBrushSpec", + "originalType": "IBrushSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IBrushSpec" + ], + "inheritedFrom": "IChartSpec" + }, + { + "name": "scales", + "description": "全局 scale 配置", + "type": "IVisualSpecScale[]", + "originalType": "IVisualSpecScale[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IVisualSpecScale" + ], + "inheritedFrom": "IChartSpec" + }, + { + "name": "customMark", + "description": "自定义mark", + "type": "ICustomMarkSpec[]", + "originalType": "ICustomMarkSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICustomMarkSpec" + ], + "inheritedFrom": "IChartSpec" + }, + { + "name": "theme", + "description": "默认主题（支持完整主题对象或者主题名称，主题名称需要提前在 `ThemeManager` 中注册）", + "type": "Omit | string", + "originalType": "Omit | string", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ITheme" + ], + "inheritedFrom": "IChartSpec" + }, + { + "name": "background", + "description": "图表背景色配置，优先级高于构造函数中的 background 配置 自1.11.6版本支持渐变色对象的配置", + "type": "IBackgroundSpec", + "originalType": "IBackgroundSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IBackgroundSpec" + ], + "inheritedFrom": "IChartSpec" + }, + { + "name": "stackInverse", + "description": "堆积时是否逆序", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IChartSpec" + }, + { + "name": "stackSort", + "description": "堆积时是否排序", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IChartSpec" + }, + { + "name": "media", + "description": "媒体查询配置", + "type": "IMediaQuerySpec", + "originalType": "IMediaQuerySpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMediaQuerySpec" + ], + "inheritedFrom": "IChartSpec" + }, + { + "name": "layoutRadius", + "description": "layoutRadius 配置", + "type": "'auto' | number | ((layoutRect: ILayoutRect, center: IPointLike) => number)", + "originalType": "'auto' | number | ((layoutRect: ILayoutRect, center: IPointLike) => number)", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [] + }, + { + "name": "indicator", + "description": "指标卡配置", + "type": "IIndicatorSpec | IIndicatorSpec[]", + "originalType": "IIndicatorSpec | IIndicatorSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IIndicatorSpec" + ] + } + ], + "note": "展开自 Omit - 包含 31 个属性（已展开所有继承）", + "expandedFrom": "IPolarChartSpec", + "omittedKeys": [ + "axes" + ] + }, + "Omit": { + "description": "IGaugePointerSeriesSpec 的属性（排除 data, type, morph, tooltip）", + "directExtends": [], + "ownProperties": [ + { + "name": "hover", + "description": "图表hover相关交互配置，当值为boolean类型时，表示开启或者关闭该交互 也支持更详细的交互配置", + "type": "IHoverSpec | boolean", + "originalType": "IHoverSpec | boolean", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IHoverSpec" + ], + "inheritedFrom": "IProgressLikeSeriesSpec" + }, + { + "name": "select", + "description": "图表选中相关交互配置，当值为boolean类型时，表示开启或者关闭该交互 也支持更详细的交互配置", + "type": "ISelectSpec | boolean", + "originalType": "ISelectSpec | boolean", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISelectSpec" + ], + "inheritedFrom": "IProgressLikeSeriesSpec" + }, + { + "name": "interactions", + "description": "其他需要按需注册的类型交互", + "type": "IInteractionItemSpec[]", + "originalType": "IInteractionItemSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IInteractionItemSpec" + ], + "inheritedFrom": "IProgressLikeSeriesSpec" + }, + { + "name": "name", + "description": "系列名称", + "type": "string", + "originalType": "string", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IProgressLikeSeriesSpec" + }, + { + "name": "id", + "description": "数据唯一标识", + "type": "string | number", + "originalType": "StringOrNumber", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IProgressLikeSeriesSpec" + }, + { + "name": "dataIndex", + "description": "系列关联的数据索引", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IProgressLikeSeriesSpec" + }, + { + "name": "dataId", + "description": "系列关联的数据id", + "type": "string | number", + "originalType": "StringOrNumber", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IProgressLikeSeriesSpec" + }, + { + "name": "dataKey", + "description": "dataKey用于绑定数据与Mark的关系, 该配置在动画中非常重要.", + "type": "string | string[] | ((data: Datum, index: number) => string)", + "originalType": "DataKeyType", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IProgressLikeSeriesSpec" + }, + { + "name": "regionIndex", + "description": "系列关联的region索引", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IProgressLikeSeriesSpec" + }, + { + "name": "regionId", + "description": "系列关联的region id", + "type": "string | number", + "originalType": "StringOrNumber", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IProgressLikeSeriesSpec" + }, + { + "name": "seriesField", + "description": "分组字段", + "type": "string", + "originalType": "string", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IProgressLikeSeriesSpec" + }, + { + "name": "seriesStyle", + "description": "系列样式", + "type": "ISeriesStyle", + "originalType": "ISeriesStyle", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISeriesStyle" + ], + "inheritedFrom": "IProgressLikeSeriesSpec" + }, + { + "name": "stack", + "description": "是否对数据进行堆叠处理", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IProgressLikeSeriesSpec" + }, + { + "name": "stackValue", + "description": "堆叠时的分组值 stackValue 相等的系列将在一起堆积。没有配置的系列将在一组", + "type": "string | number", + "originalType": "StringOrNumber", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IProgressLikeSeriesSpec" + }, + { + "name": "totalLabel", + "description": "堆叠汇总标签", + "type": "ITotalLabelSpec", + "originalType": "ITotalLabelSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ITotalLabelSpec" + ], + "inheritedFrom": "IProgressLikeSeriesSpec" + }, + { + "name": "percent", + "description": "是否对数据进行百分比处理", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IProgressLikeSeriesSpec" + }, + { + "name": "stackOffsetSilhouette", + "description": "是否围绕中心轴偏移轮廓", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IProgressLikeSeriesSpec" + }, + { + "name": "invalidType", + "description": "非合规数据点连接方式 'break'指在该数据点处断开 'link' 指忽略该点保持连续 'zero' 指该点默认数值为0 'ignore' 指不处理", + "type": "'zero' | 'ignore' | 'link' | 'break'", + "originalType": "IInvalidType", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IProgressLikeSeriesSpec" + }, + { + "name": "animation", + "description": "是否开启动画", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IProgressLikeSeriesSpec" + }, + { + "name": "animationThreshold", + "description": "自动关闭动画的阀值，对应的是单系列data的长度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IProgressLikeSeriesSpec" + }, + { + "name": "support3d", + "description": "是否支持3d视角", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IProgressLikeSeriesSpec" + }, + { + "name": "extensionMark", + "description": "系列的扩展mark，能够获取系列上的数据", + "type": "(IExtensionMarkSpec> | IExtensionGroupMarkSpec)[]", + "originalType": "(IExtensionMarkSpec> | IExtensionGroupMarkSpec)[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IExtensionMarkSpec", + "IExtensionGroupMarkSpec" + ], + "inheritedFrom": "IProgressLikeSeriesSpec" + }, + { + "name": "zIndex", + "description": "今当通过`series`配置的时候，才会生效", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IProgressLikeSeriesSpec" + }, + { + "name": "centerX", + "description": "中心点 x 坐标", + "type": "number | string", + "originalType": "number | string", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IProgressLikeSeriesSpec" + }, + { + "name": "centerY", + "description": "中心点 y 坐标", + "type": "number | string", + "originalType": "number | string", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IProgressLikeSeriesSpec" + }, + { + "name": "outerRadius", + "description": "扇区外半径", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IProgressLikeSeriesSpec" + }, + { + "name": "innerRadius", + "description": "扇区内半径", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IProgressLikeSeriesSpec" + }, + { + "name": "startAngle", + "description": "扇区起始角度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IProgressLikeSeriesSpec" + }, + { + "name": "endAngle", + "description": "扇区结束角度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IProgressLikeSeriesSpec" + }, + { + "name": "categoryField", + "description": "类别字段", + "type": "string | string[]", + "originalType": "string | string[]", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IProgressLikeSeriesSpec" + }, + { + "name": "valueField", + "description": "数值字段（可影响指针角度）", + "type": "string | string[]", + "originalType": "string | string[]", + "required": true, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "radiusField", + "description": "半径字段（可影响指针长度，GaugePointerSeries 没有 categoryField）", + "type": "string", + "originalType": "string", + "required": true, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "angleField", + "description": "angleField 配置", + "type": "string | string[]", + "originalType": "string | string[]", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IProgressLikeSeriesSpec" + }, + { + "name": "radius", + "description": "扇区半径", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IProgressLikeSeriesSpec" + }, + { + "name": "sortDataByAxis", + "description": "是否将数据按照数轴排序", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IProgressLikeSeriesSpec" + }, + { + "name": "roundCap", + "description": "圆角部分是否突出（可分别设置左侧和右侧）", + "type": "boolean | [boolean, boolean]", + "originalType": "boolean | [boolean, boolean]", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [ + ], + "inheritedFrom": "IProgressLikeSeriesSpec" + }, + { + "name": "cornerRadius", + "description": "圆角半径", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IProgressLikeSeriesSpec" + }, + { + "name": "tickMask", + "description": "tick 模式显示", + "type": "Omit, 'state'> & ITickMaskSpec", + "originalType": "Omit, 'state'> & ITickMaskSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMarkSpec", + "IArcMarkSpec", + "ITickMaskSpec" + ], + "inheritedFrom": "IProgressLikeSeriesSpec" + }, + { + "name": "clamp", + "description": "超出轴范围是否被裁剪（除tick模式外, 因为tick模式自带裁剪）", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IProgressLikeSeriesSpec" + }, + { + "name": "animationAppear", + "description": "入场动画配置", + "type": "'grow' | 'fadeIn' | IAnimationConfig", + "originalType": "IAnimationConfig", + "required": false, + "category": "动画配置", + "isSimple": false, + "dependencies": [ + "IAnimationConfig" + ], + "inheritedFrom": "IAnimationSpec" + }, + { + "name": "animationEnter", + "description": "数据新增动画配置", + "type": "IAnimationConfig", + "originalType": "IAnimationConfig", + "required": false, + "category": "动画配置", + "isSimple": false, + "dependencies": [ + "IAnimationConfig" + ], + "inheritedFrom": "IAnimationSpec" + }, + { + "name": "animationUpdate", + "description": "数据更新动画配置", + "type": "IAnimationConfig", + "originalType": "IAnimationConfig", + "required": false, + "category": "动画配置", + "isSimple": false, + "dependencies": [ + "IAnimationConfig" + ], + "inheritedFrom": "IAnimationSpec" + }, + { + "name": "animationExit", + "description": "数据移除动画配置", + "type": "IAnimationConfig", + "originalType": "IAnimationConfig", + "required": false, + "category": "动画配置", + "isSimple": false, + "dependencies": [ + "IAnimationConfig" + ], + "inheritedFrom": "IAnimationSpec" + }, + { + "name": "pin", + "description": "pin 配置", + "type": "IMarkSpec & PinMarkSpec", + "originalType": "IMarkSpec & PinMarkSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMarkSpec", + "IPathMarkSpec" + ] + }, + { + "name": "pinBackground", + "description": "pinBackground 配置", + "type": "IMarkSpec & PinMarkSpec", + "originalType": "IMarkSpec & PinMarkSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMarkSpec", + "IPathMarkSpec" + ] + }, + { + "name": "pointer", + "description": "pointer 配置", + "type": "IMarkSpec & PointerMarkSpec", + "originalType": "IMarkSpec & PointerMarkSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [] + } + ], + "note": "展开自 Omit - 包含 46 个属性（已展开所有继承）", + "expandedFrom": "IGaugePointerSeriesSpec", + "omittedKeys": [ + "data", + "type", + "morph", + "tooltip" + ] + } + }, + "timestamp": "2025-08-06T08:10:18.432Z", + "version": "1.0.0", + "sourceFile": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/chart/gauge/interface.d.ts", + "complexTypeDefinitions": { + "IGaugeSeriesSpec": { + "typeName": "IGaugeSeriesSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/series/gauge/interface.d.ts", + "note": "类型 IGaugeSeriesSpec 的定义位置" + }, + "ICircularProgressSeriesSpec": { + "typeName": "ICircularProgressSeriesSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/series/progress/circular/interface.d.ts", + "note": "类型 ICircularProgressSeriesSpec 的定义位置" + }, + "IPolarAxisSpec": { + "typeName": "IPolarAxisSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/axis/polar/interface/spec.d.ts", + "note": "类型 IPolarAxisSpec 的定义位置" + }, + "ILinearAxisSpec": { + "typeName": "ILinearAxisSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/axis/interface.d.ts", + "note": "类型 ILinearAxisSpec 的定义位置" + }, + "IData": { + "typeName": "IData", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 IData 的定义位置" + }, + "ILayoutPaddingSpec": { + "typeName": "ILayoutPaddingSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/layout.d.ts", + "note": "类型 ILayoutPaddingSpec 的定义位置" + }, + "IVisualSpecScale": { + "typeName": "IVisualSpecScale", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/visual.d.ts", + "note": "类型 IVisualSpecScale 的定义位置" + }, + "ISeriesSpec": { + "typeName": "ISeriesSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 ISeriesSpec 的定义位置" + }, + "ISeriesStyle": { + "typeName": "ISeriesStyle", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/series/interface/common.d.ts", + "note": "类型 ISeriesStyle 的定义位置" + }, + "IHoverSpec": { + "typeName": "IHoverSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/interaction/interface/spec.d.ts", + "note": "类型 IHoverSpec 的定义位置" + }, + "ISelectSpec": { + "typeName": "ISelectSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/interaction/interface/spec.d.ts", + "note": "类型 ISelectSpec 的定义位置" + }, + "RegionSpec": { + "typeName": "RegionSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/region/interface.d.ts", + "note": "类型 RegionSpec 的定义位置" + }, + "ITitleSpec": { + "typeName": "ITitleSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/title/interface/spec.d.ts", + "note": "类型 ITitleSpec 的定义位置" + }, + "ILayoutSpec": { + "typeName": "ILayoutSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/layout/interface.d.ts", + "note": "类型 ILayoutSpec 的定义位置" + }, + "ILegendSpec": { + "typeName": "ILegendSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/legend/interface.d.ts", + "note": "类型 ILegendSpec 的定义位置" + }, + "IPolarCrosshairSpec": { + "typeName": "IPolarCrosshairSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/crosshair/interface/spec.d.ts", + "note": "类型 IPolarCrosshairSpec 的定义位置" + }, + "ITooltipSpec": { + "typeName": "ITooltipSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/tooltip/interface/spec.d.ts", + "note": "类型 ITooltipSpec 的定义位置" + }, + "IPlayer": { + "typeName": "IPlayer", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/player/interface/spec.d.ts", + "note": "类型 IPlayer 的定义位置" + }, + "IDataZoomSpec": { + "typeName": "IDataZoomSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/data-zoom/data-zoom/interface.d.ts", + "note": "类型 IDataZoomSpec 的定义位置" + }, + "IScrollBarSpec": { + "typeName": "IScrollBarSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/data-zoom/scroll-bar/interface.d.ts", + "note": "类型 IScrollBarSpec 的定义位置" + }, + "IBrushSpec": { + "typeName": "IBrushSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/brush/interface.d.ts", + "note": "类型 IBrushSpec 的定义位置" + }, + "ICustomMarkSpec": { + "typeName": "ICustomMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 ICustomMarkSpec 的定义位置" + }, + "ITheme": { + "typeName": "ITheme", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/theme/interface.d.ts", + "note": "类型 ITheme 的定义位置" + }, + "IBackgroundSpec": { + "typeName": "IBackgroundSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 IBackgroundSpec 的定义位置" + }, + "IMediaQuerySpec": { + "typeName": "IMediaQuerySpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/media-query.d.ts", + "note": "类型 IMediaQuerySpec 的定义位置" + }, + "IIndicatorSpec": { + "typeName": "IIndicatorSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/indicator/interface.d.ts", + "note": "类型 IIndicatorSpec 的定义位置" + }, + "IInteractionItemSpec": { + "typeName": "IInteractionItemSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/interaction/interface/spec.d.ts", + "note": "类型 IInteractionItemSpec 的定义位置" + }, + "ITotalLabelSpec": { + "typeName": "ITotalLabelSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/label/interface.d.ts", + "note": "类型 ITotalLabelSpec 的定义位置" + }, + "IExtensionMarkSpec": { + "typeName": "IExtensionMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 IExtensionMarkSpec 的定义位置" + }, + "IExtensionGroupMarkSpec": { + "typeName": "IExtensionGroupMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 IExtensionGroupMarkSpec 的定义位置" + }, + "IMarkSpec": { + "typeName": "IMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 IMarkSpec 的定义位置" + }, + "IArcMarkSpec": { + "typeName": "IArcMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/visual.d.ts", + "note": "类型 IArcMarkSpec 的定义位置" + }, + "ITickMaskSpec": { + "typeName": "ITickMaskSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/series/polar/progress-like/interface.d.ts", + "note": "类型 ITickMaskSpec 的定义位置" + }, + "IAnimationConfig": { + "typeName": "IAnimationConfig", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart/src/typings/spec/common.ts", + "note": "类型 IAnimationConfig 的定义位置" + }, + "IPathMarkSpec": { + "typeName": "IPathMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/visual.d.ts", + "note": "类型 IPathMarkSpec 的定义位置" + } + }, + "statistics": { + "totalInterfaces": 3, + "totalProperties": 80, + "complexTypes": 36, + "typeFileLocations": 36, + "dependencyTypes": 865 + } +} \ No newline at end of file diff --git a/skills/vchart-development-skill/references/type-meta/heatmap.json b/skills/vchart-development-skill/references/type-meta/heatmap.json new file mode 100644 index 0000000000..e238a5a4e5 --- /dev/null +++ b/skills/vchart-development-skill/references/type-meta/heatmap.json @@ -0,0 +1,1108 @@ +{ + "typeName": "IHeatmapChartSpec", + "description": "IHeatmapChartSpec 配置规范的完整实现分析", + "inheritanceTree": { + "IHeatmapChartSpec": { + "description": "IHeatmapChartSpec 接口配置", + "directExtends": [ + "ICartesianChartSpec", + "IChartExtendsSeriesSpec" + ], + "ownProperties": [ + { + "name": "type", + "description": "type 配置", + "type": "'heatmap'", + "originalType": "'heatmap'", + "required": true, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "series", + "description": "系列配置", + "type": "IHeatmapSeriesSpec[]", + "originalType": "IHeatmapSeriesSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IHeatmapSeriesSpec" + ] + } + ] + }, + "ICartesianChartSpec": { + "description": "ICartesianChartSpec 接口配置", + "directExtends": [ + "IChartSpec" + ], + "ownProperties": [ + { + "name": "direction", + "description": "图表的方向配置。 - 'vertical' 垂直布局，即常见的直角坐标系布局，x 轴位于底部，y 轴位于左侧。 - 'horizontal' 水平布局，可理解为 x 轴和 y 轴位置互换。", + "type": "'default' | 'reverse'", + "originalType": "DirectionType", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "axes", + "description": "笛卡尔坐标系的坐标轴配置", + "type": "ICartesianAxisSpec[]", + "originalType": "ICartesianAxisSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICartesianAxisSpec" + ] + }, + { + "name": "crosshair", + "description": "十字辅助线配置", + "type": "ICartesianCrosshairSpec | ICartesianCrosshairSpec[]", + "originalType": "ICartesianCrosshairSpec | ICartesianCrosshairSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICartesianCrosshairSpec" + ] + }, + { + "name": "markLine", + "description": "参考线配置", + "type": "IMarkLineSpec | IMarkLineSpec[]", + "originalType": "IMarkLineSpec | IMarkLineSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMarkLineSpec" + ] + }, + { + "name": "markArea", + "description": "参考区域配置", + "type": "IMarkAreaSpec | IMarkAreaSpec[]", + "originalType": "IMarkAreaSpec | IMarkAreaSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMarkAreaSpec" + ] + }, + { + "name": "markPoint", + "description": "参考点配置", + "type": "IMarkPointSpec | IMarkPointSpec[]", + "originalType": "IMarkPointSpec | IMarkPointSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMarkPointSpec" + ] + } + ] + }, + "IChartSpec": { + "description": "IChartSpec 接口配置", + "directExtends": [], + "ownProperties": [ + { + "name": "type", + "description": "图表类型", + "type": "string", + "originalType": "string", + "required": true, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "data", + "description": "data 配置", + "type": "IData", + "originalType": "IData", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IData" + ] + }, + { + "name": "width", + "description": "画布宽度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "height", + "description": "画布高度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "autoFit", + "description": "是否自适应容器大小", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "padding", + "description": "图表整体 padding 设置", + "type": "ILayoutPaddingSpec", + "originalType": "ILayoutPaddingSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ILayoutPaddingSpec" + ] + }, + { + "name": "color", + "description": "图表色系配置", + "type": "string[] | Omit, 'id'>", + "originalType": "string[] | Omit, 'id'>", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IVisualSpecScale" + ] + }, + { + "name": "series", + "description": "series 配置", + "type": "ISeriesSpec[]", + "originalType": "ISeriesSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISeriesSpec" + ] + }, + { + "name": "seriesStyle", + "description": "系列样式", + "type": "ISeriesStyle", + "originalType": "ISeriesStyle", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISeriesStyle" + ] + }, + { + "name": "animationThreshold", + "description": "自动关闭动画的阀值，对应的是单系列data的长度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "hover", + "description": "hover 交互", + "type": "boolean | IHoverSpec", + "originalType": "boolean | IHoverSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IHoverSpec" + ] + }, + { + "name": "select", + "description": "select 交互", + "type": "boolean | ISelectSpec", + "originalType": "boolean | ISelectSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISelectSpec" + ] + }, + { + "name": "region", + "description": "region配置", + "type": "RegionSpec[]", + "originalType": "RegionSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "RegionSpec" + ] + }, + { + "name": "title", + "description": "图表标题配置", + "type": "ITitleSpec", + "originalType": "ITitleSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ITitleSpec" + ] + }, + { + "name": "layout", + "description": "自定义布局函数", + "type": "ILayoutSpec", + "originalType": "ILayoutSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ILayoutSpec" + ] + }, + { + "name": "legends", + "description": "图例配置", + "type": "ILegendSpec | ILegendSpec[]", + "originalType": "ILegendSpec | ILegendSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ILegendSpec" + ] + }, + { + "name": "crosshair", + "description": "十字辅助线配置", + "type": "ICrosshairSpec | ICrosshairSpec[]", + "originalType": "ICrosshairSpec | ICrosshairSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICrosshairSpec" + ] + }, + { + "name": "tooltip", + "description": "tooltip配置", + "type": "ITooltipSpec", + "originalType": "ITooltipSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ITooltipSpec" + ] + }, + { + "name": "player", + "description": "播放器配置", + "type": "IPlayer", + "originalType": "IPlayer", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IPlayer" + ] + }, + { + "name": "dataZoom", + "description": "缩略轴配置", + "type": "IDataZoomSpec | IDataZoomSpec[]", + "originalType": "IDataZoomSpec | IDataZoomSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IDataZoomSpec" + ] + }, + { + "name": "scrollBar", + "description": "滚动条配置", + "type": "IScrollBarSpec | IScrollBarSpec[]", + "originalType": "IScrollBarSpec | IScrollBarSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IScrollBarSpec" + ] + }, + { + "name": "brush", + "description": "框选配置", + "type": "IBrushSpec", + "originalType": "IBrushSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IBrushSpec" + ] + }, + { + "name": "scales", + "description": "全局 scale 配置", + "type": "IVisualSpecScale[]", + "originalType": "IVisualSpecScale[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IVisualSpecScale" + ] + }, + { + "name": "customMark", + "description": "自定义mark", + "type": "ICustomMarkSpec[]", + "originalType": "ICustomMarkSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICustomMarkSpec" + ] + }, + { + "name": "axes", + "description": "axes 配置", + "type": "ICommonAxisSpec[]", + "originalType": "ICommonAxisSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICommonAxisSpec" + ] + }, + { + "name": "theme", + "description": "默认主题（支持完整主题对象或者主题名称，主题名称需要提前在 `ThemeManager` 中注册）", + "type": "Omit | string", + "originalType": "Omit | string", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ITheme" + ] + }, + { + "name": "background", + "description": "图表背景色配置，优先级高于构造函数中的 background 配置 自1.11.6版本支持渐变色对象的配置", + "type": "IBackgroundSpec", + "originalType": "IBackgroundSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IBackgroundSpec" + ] + }, + { + "name": "stackInverse", + "description": "堆积时是否逆序", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "stackSort", + "description": "堆积时是否排序", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "media", + "description": "媒体查询配置", + "type": "IMediaQuerySpec", + "originalType": "IMediaQuerySpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMediaQuerySpec" + ] + } + ] + }, + "IChartExtendsSeriesSpec": { + "description": "IHeatmapSeriesSpec 的属性（排除 data, morph, stackValue, tooltip）", + "directExtends": [], + "ownProperties": [ + { + "name": "hover", + "description": "图表hover相关交互配置，当值为boolean类型时，表示开启或者关闭该交互 也支持更详细的交互配置", + "type": "IHoverSpec | boolean", + "originalType": "IHoverSpec | boolean", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IHoverSpec" + ], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "select", + "description": "图表选中相关交互配置，当值为boolean类型时，表示开启或者关闭该交互 也支持更详细的交互配置", + "type": "ISelectSpec | boolean", + "originalType": "ISelectSpec | boolean", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISelectSpec" + ], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "interactions", + "description": "其他需要按需注册的类型交互", + "type": "IInteractionItemSpec[]", + "originalType": "IInteractionItemSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IInteractionItemSpec" + ], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "type", + "description": "系列类型", + "type": "'heatmap'", + "originalType": "'heatmap'", + "required": true, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "name", + "description": "系列名称", + "type": "string", + "originalType": "string", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "id", + "description": "数据唯一标识", + "type": "string | number", + "originalType": "StringOrNumber", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "dataIndex", + "description": "系列关联的数据索引", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "dataId", + "description": "系列关联的数据id", + "type": "string | number", + "originalType": "StringOrNumber", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "dataKey", + "description": "dataKey用于绑定数据与Mark的关系, 该配置在动画中非常重要.", + "type": "string | string[] | ((data: Datum, index: number) => string)", + "originalType": "DataKeyType", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "regionIndex", + "description": "系列关联的region索引", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "regionId", + "description": "系列关联的region id", + "type": "string | number", + "originalType": "StringOrNumber", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "seriesField", + "description": "分组字段", + "type": "string", + "originalType": "string", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "seriesStyle", + "description": "系列样式", + "type": "ISeriesStyle", + "originalType": "ISeriesStyle", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISeriesStyle" + ], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "stack", + "description": "是否对数据进行堆叠处理", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "totalLabel", + "description": "堆叠汇总标签", + "type": "ITotalLabelSpec", + "originalType": "ITotalLabelSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ITotalLabelSpec" + ], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "percent", + "description": "是否对数据进行百分比处理", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "stackOffsetSilhouette", + "description": "是否围绕中心轴偏移轮廓", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "invalidType", + "description": "非合规数据点连接方式 'break'指在该数据点处断开 'link' 指忽略该点保持连续 'zero' 指该点默认数值为0 'ignore' 指不处理", + "type": "'zero' | 'ignore' | 'link' | 'break'", + "originalType": "IInvalidType", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "animation", + "description": "是否开启动画", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "animationThreshold", + "description": "自动关闭动画的阀值，对应的是单系列data的长度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "support3d", + "description": "是否支持3d视角", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "extensionMark", + "description": "系列的扩展mark，能够获取系列上的数据", + "type": "(IExtensionMarkSpec> | IExtensionGroupMarkSpec)[]", + "originalType": "(IExtensionMarkSpec> | IExtensionGroupMarkSpec)[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IExtensionMarkSpec", + "IExtensionGroupMarkSpec" + ], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "zIndex", + "description": "今当通过`series`配置的时候，才会生效", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "direction", + "description": "direction row means layout by rows，col means layout by columns", + "type": "'default' | 'reverse'", + "originalType": "DirectionType", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "xField", + "description": "x轴字段", + "type": "string | string[]", + "originalType": "string | string[]", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "x2Field", + "description": "用于区间数据，声明区间末尾的数据字段。", + "type": "string", + "originalType": "string", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "yField", + "description": "y轴字段 运行双轴都为离散，连续。所以 yField 也可以像 xField 一样支持多维度", + "type": "string | string[]", + "originalType": "string | string[]", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "y2Field", + "description": "用于区间数据，声明区间末尾的数据字段。", + "type": "string", + "originalType": "string", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "zField", + "description": "z轴字段 用于3d散点图等", + "type": "string | string[]", + "originalType": "string | string[]", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "sortDataByAxis", + "description": "是否将数据按照数轴排序", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "animationAppear", + "description": "入场动画配置", + "type": "'fadeIn' | IAnimationConfig", + "originalType": "IAnimationConfig", + "required": false, + "category": "动画配置", + "isSimple": false, + "dependencies": [ + "IAnimationConfig" + ], + "inheritedFrom": "IAnimationSpec" + }, + { + "name": "animationEnter", + "description": "数据新增动画配置", + "type": "IAnimationConfig", + "originalType": "IAnimationConfig", + "required": false, + "category": "动画配置", + "isSimple": false, + "dependencies": [ + "IAnimationConfig" + ], + "inheritedFrom": "IAnimationSpec" + }, + { + "name": "animationUpdate", + "description": "数据更新动画配置", + "type": "IAnimationConfig", + "originalType": "IAnimationConfig", + "required": false, + "category": "动画配置", + "isSimple": false, + "dependencies": [ + "IAnimationConfig" + ], + "inheritedFrom": "IAnimationSpec" + }, + { + "name": "animationExit", + "description": "数据移除动画配置", + "type": "IAnimationConfig", + "originalType": "IAnimationConfig", + "required": false, + "category": "动画配置", + "isSimple": false, + "dependencies": [ + "IAnimationConfig" + ], + "inheritedFrom": "IAnimationSpec" + }, + { + "name": "valueField", + "description": "值 field", + "type": "string", + "originalType": "string", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "cell", + "description": "cell 配置", + "type": "IMarkSpec", + "originalType": "IMarkSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMarkSpec", + "IRectMarkSpec" + ] + }, + { + "name": "cellBackground", + "description": "cellBackground 配置", + "type": "IMarkSpec", + "originalType": "IMarkSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMarkSpec", + "IRectMarkSpec" + ] + }, + { + "name": "label", + "description": "label 配置", + "type": "ILabelSpec & {\n position?: 'inside' | 'inside-top' | 'inside-bottom' | 'inside-right' | 'inside-left';\n }", + "originalType": "ILabelSpec & {\n position?: 'inside' | 'inside-top' | 'inside-bottom' | 'inside-right' | 'inside-left';\n }", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [] + } + ], + "note": "展开自 Omit - 包含 38 个属性（已展开所有继承）", + "expandedFrom": "IHeatmapSeriesSpec", + "omittedKeys": [ + "data", + "morph", + "stackValue", + "tooltip" + ] + } + }, + "timestamp": "2025-08-06T07:40:10.220Z", + "version": "1.0.0", + "sourceFile": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/chart/heatmap/interface.d.ts", + "complexTypeDefinitions": { + "IHeatmapSeriesSpec": { + "typeName": "IHeatmapSeriesSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/series/heatmap/interface.d.ts", + "note": "类型 IHeatmapSeriesSpec 的定义位置" + }, + "ICartesianAxisSpec": { + "typeName": "ICartesianAxisSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/axis/cartesian/interface/spec.d.ts", + "note": "类型 ICartesianAxisSpec 的定义位置" + }, + "ICartesianCrosshairSpec": { + "typeName": "ICartesianCrosshairSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/crosshair/interface/spec.d.ts", + "note": "类型 ICartesianCrosshairSpec 的定义位置" + }, + "IMarkLineSpec": { + "typeName": "IMarkLineSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/marker/mark-line/interface/spec.d.ts", + "note": "类型 IMarkLineSpec 的定义位置" + }, + "IMarkAreaSpec": { + "typeName": "IMarkAreaSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/marker/mark-area/interface/spec.d.ts", + "note": "类型 IMarkAreaSpec 的定义位置" + }, + "IMarkPointSpec": { + "typeName": "IMarkPointSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/marker/mark-point/interface/spec.d.ts", + "note": "类型 IMarkPointSpec 的定义位置" + }, + "IData": { + "typeName": "IData", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 IData 的定义位置" + }, + "ILayoutPaddingSpec": { + "typeName": "ILayoutPaddingSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/layout.d.ts", + "note": "类型 ILayoutPaddingSpec 的定义位置" + }, + "IVisualSpecScale": { + "typeName": "IVisualSpecScale", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/visual.d.ts", + "note": "类型 IVisualSpecScale 的定义位置" + }, + "ISeriesSpec": { + "typeName": "ISeriesSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 ISeriesSpec 的定义位置" + }, + "ISeriesStyle": { + "typeName": "ISeriesStyle", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/series/interface/common.d.ts", + "note": "类型 ISeriesStyle 的定义位置" + }, + "IHoverSpec": { + "typeName": "IHoverSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/interaction/interface/spec.d.ts", + "note": "类型 IHoverSpec 的定义位置" + }, + "ISelectSpec": { + "typeName": "ISelectSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/interaction/interface/spec.d.ts", + "note": "类型 ISelectSpec 的定义位置" + }, + "RegionSpec": { + "typeName": "RegionSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/region/interface.d.ts", + "note": "类型 RegionSpec 的定义位置" + }, + "ITitleSpec": { + "typeName": "ITitleSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/title/interface/spec.d.ts", + "note": "类型 ITitleSpec 的定义位置" + }, + "ILayoutSpec": { + "typeName": "ILayoutSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/layout/interface.d.ts", + "note": "类型 ILayoutSpec 的定义位置" + }, + "ILegendSpec": { + "typeName": "ILegendSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/legend/interface.d.ts", + "note": "类型 ILegendSpec 的定义位置" + }, + "ICrosshairSpec": { + "typeName": "ICrosshairSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/crosshair/interface/spec.d.ts", + "note": "类型 ICrosshairSpec 的定义位置" + }, + "ITooltipSpec": { + "typeName": "ITooltipSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/tooltip/interface/spec.d.ts", + "note": "类型 ITooltipSpec 的定义位置" + }, + "IPlayer": { + "typeName": "IPlayer", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/player/interface/spec.d.ts", + "note": "类型 IPlayer 的定义位置" + }, + "IDataZoomSpec": { + "typeName": "IDataZoomSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/data-zoom/data-zoom/interface.d.ts", + "note": "类型 IDataZoomSpec 的定义位置" + }, + "IScrollBarSpec": { + "typeName": "IScrollBarSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/data-zoom/scroll-bar/interface.d.ts", + "note": "类型 IScrollBarSpec 的定义位置" + }, + "IBrushSpec": { + "typeName": "IBrushSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/brush/interface.d.ts", + "note": "类型 IBrushSpec 的定义位置" + }, + "ICustomMarkSpec": { + "typeName": "ICustomMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 ICustomMarkSpec 的定义位置" + }, + "ICommonAxisSpec": { + "typeName": "ICommonAxisSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/axis/interface.d.ts", + "note": "类型 ICommonAxisSpec 的定义位置" + }, + "ITheme": { + "typeName": "ITheme", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/theme/interface.d.ts", + "note": "类型 ITheme 的定义位置" + }, + "IBackgroundSpec": { + "typeName": "IBackgroundSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 IBackgroundSpec 的定义位置" + }, + "IMediaQuerySpec": { + "typeName": "IMediaQuerySpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/media-query.d.ts", + "note": "类型 IMediaQuerySpec 的定义位置" + }, + "IInteractionItemSpec": { + "typeName": "IInteractionItemSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/interaction/interface/spec.d.ts", + "note": "类型 IInteractionItemSpec 的定义位置" + }, + "ITotalLabelSpec": { + "typeName": "ITotalLabelSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/label/interface.d.ts", + "note": "类型 ITotalLabelSpec 的定义位置" + }, + "IExtensionMarkSpec": { + "typeName": "IExtensionMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 IExtensionMarkSpec 的定义位置" + }, + "IExtensionGroupMarkSpec": { + "typeName": "IExtensionGroupMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 IExtensionGroupMarkSpec 的定义位置" + }, + "IAnimationConfig": { + "typeName": "IAnimationConfig", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart/src/typings/spec/common.ts", + "note": "类型 IAnimationConfig 的定义位置" + }, + "IMarkSpec": { + "typeName": "IMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 IMarkSpec 的定义位置" + }, + "IRectMarkSpec": { + "typeName": "IRectMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/visual.d.ts", + "note": "类型 IRectMarkSpec 的定义位置" + } + }, + "statistics": { + "totalInterfaces": 4, + "totalProperties": 76, + "complexTypes": 35, + "typeFileLocations": 35, + "dependencyTypes": 863 + } +} \ No newline at end of file diff --git a/skills/vchart-development-skill/references/type-meta/histogram.json b/skills/vchart-development-skill/references/type-meta/histogram.json new file mode 100644 index 0000000000..8285a952c0 --- /dev/null +++ b/skills/vchart-development-skill/references/type-meta/histogram.json @@ -0,0 +1,1185 @@ +{ + "typeName": "IHistogramChartSpec", + "description": "IHistogramChartSpec 配置规范的完整实现分析", + "inheritanceTree": { + "IHistogramChartSpec": { + "description": "IHistogramChartSpec 接口配置", + "directExtends": [ + "ICartesianChartSpec", + "Omit, 'type'>" + ], + "ownProperties": [ + { + "name": "type", + "description": "type 配置", + "type": "'histogram'", + "originalType": "'histogram'", + "required": true, + "category": "未分类", + "isSimple": true, + "dependencies": [] + } + ] + }, + "ICartesianChartSpec": { + "description": "ICartesianChartSpec 接口配置", + "directExtends": [ + "IChartSpec" + ], + "ownProperties": [ + { + "name": "direction", + "description": "图表的方向配置。 - 'vertical' 垂直布局，即常见的直角坐标系布局，x 轴位于底部，y 轴位于左侧。 - 'horizontal' 水平布局，可理解为 x 轴和 y 轴位置互换。", + "type": "'default' | 'reverse'", + "originalType": "DirectionType", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "axes", + "description": "笛卡尔坐标系的坐标轴配置", + "type": "ICartesianAxisSpec[]", + "originalType": "ICartesianAxisSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICartesianAxisSpec" + ] + }, + { + "name": "crosshair", + "description": "十字辅助线配置", + "type": "ICartesianCrosshairSpec | ICartesianCrosshairSpec[]", + "originalType": "ICartesianCrosshairSpec | ICartesianCrosshairSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICartesianCrosshairSpec" + ] + }, + { + "name": "markLine", + "description": "参考线配置", + "type": "IMarkLineSpec | IMarkLineSpec[]", + "originalType": "IMarkLineSpec | IMarkLineSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMarkLineSpec" + ] + }, + { + "name": "markArea", + "description": "参考区域配置", + "type": "IMarkAreaSpec | IMarkAreaSpec[]", + "originalType": "IMarkAreaSpec | IMarkAreaSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMarkAreaSpec" + ] + }, + { + "name": "markPoint", + "description": "参考点配置", + "type": "IMarkPointSpec | IMarkPointSpec[]", + "originalType": "IMarkPointSpec | IMarkPointSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMarkPointSpec" + ] + } + ] + }, + "IChartSpec": { + "description": "IChartSpec 接口配置", + "directExtends": [], + "ownProperties": [ + { + "name": "type", + "description": "图表类型", + "type": "string", + "originalType": "string", + "required": true, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "data", + "description": "data 配置", + "type": "IData", + "originalType": "IData", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IData" + ] + }, + { + "name": "width", + "description": "画布宽度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "height", + "description": "画布高度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "autoFit", + "description": "是否自适应容器大小", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "padding", + "description": "图表整体 padding 设置", + "type": "ILayoutPaddingSpec", + "originalType": "ILayoutPaddingSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ILayoutPaddingSpec" + ] + }, + { + "name": "color", + "description": "图表色系配置", + "type": "string[] | Omit, 'id'>", + "originalType": "string[] | Omit, 'id'>", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IVisualSpecScale" + ] + }, + { + "name": "series", + "description": "series 配置", + "type": "ISeriesSpec[]", + "originalType": "ISeriesSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISeriesSpec" + ] + }, + { + "name": "seriesStyle", + "description": "系列样式", + "type": "ISeriesStyle", + "originalType": "ISeriesStyle", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISeriesStyle" + ] + }, + { + "name": "animationThreshold", + "description": "自动关闭动画的阀值，对应的是单系列data的长度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "hover", + "description": "hover 交互", + "type": "boolean | IHoverSpec", + "originalType": "boolean | IHoverSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IHoverSpec" + ] + }, + { + "name": "select", + "description": "select 交互", + "type": "boolean | ISelectSpec", + "originalType": "boolean | ISelectSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISelectSpec" + ] + }, + { + "name": "region", + "description": "region配置", + "type": "RegionSpec[]", + "originalType": "RegionSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "RegionSpec" + ] + }, + { + "name": "title", + "description": "图表标题配置", + "type": "ITitleSpec", + "originalType": "ITitleSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ITitleSpec" + ] + }, + { + "name": "layout", + "description": "自定义布局函数", + "type": "ILayoutSpec", + "originalType": "ILayoutSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ILayoutSpec" + ] + }, + { + "name": "legends", + "description": "图例配置", + "type": "ILegendSpec | ILegendSpec[]", + "originalType": "ILegendSpec | ILegendSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ILegendSpec" + ] + }, + { + "name": "crosshair", + "description": "十字辅助线配置", + "type": "ICrosshairSpec | ICrosshairSpec[]", + "originalType": "ICrosshairSpec | ICrosshairSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICrosshairSpec" + ] + }, + { + "name": "tooltip", + "description": "tooltip配置", + "type": "ITooltipSpec", + "originalType": "ITooltipSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ITooltipSpec" + ] + }, + { + "name": "player", + "description": "播放器配置", + "type": "IPlayer", + "originalType": "IPlayer", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IPlayer" + ] + }, + { + "name": "dataZoom", + "description": "缩略轴配置", + "type": "IDataZoomSpec | IDataZoomSpec[]", + "originalType": "IDataZoomSpec | IDataZoomSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IDataZoomSpec" + ] + }, + { + "name": "scrollBar", + "description": "滚动条配置", + "type": "IScrollBarSpec | IScrollBarSpec[]", + "originalType": "IScrollBarSpec | IScrollBarSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IScrollBarSpec" + ] + }, + { + "name": "brush", + "description": "框选配置", + "type": "IBrushSpec", + "originalType": "IBrushSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IBrushSpec" + ] + }, + { + "name": "scales", + "description": "全局 scale 配置", + "type": "IVisualSpecScale[]", + "originalType": "IVisualSpecScale[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IVisualSpecScale" + ] + }, + { + "name": "customMark", + "description": "自定义mark", + "type": "ICustomMarkSpec[]", + "originalType": "ICustomMarkSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICustomMarkSpec" + ] + }, + { + "name": "axes", + "description": "axes 配置", + "type": "ICommonAxisSpec[]", + "originalType": "ICommonAxisSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICommonAxisSpec" + ] + }, + { + "name": "theme", + "description": "默认主题（支持完整主题对象或者主题名称，主题名称需要提前在 `ThemeManager` 中注册）", + "type": "Omit | string", + "originalType": "Omit | string", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ITheme" + ] + }, + { + "name": "background", + "description": "图表背景色配置，优先级高于构造函数中的 background 配置 自1.11.6版本支持渐变色对象的配置", + "type": "IBackgroundSpec", + "originalType": "IBackgroundSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IBackgroundSpec" + ] + }, + { + "name": "stackInverse", + "description": "堆积时是否逆序", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "stackSort", + "description": "堆积时是否排序", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "media", + "description": "媒体查询配置", + "type": "IMediaQuerySpec", + "originalType": "IMediaQuerySpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMediaQuerySpec" + ] + } + ] + }, + "Omit, 'type'>": { + "description": "IChartExtendsSeriesSpec 的属性（排除 type）", + "directExtends": [], + "ownProperties": [ + { + "name": "hover", + "description": "图表hover相关交互配置，当值为boolean类型时，表示开启或者关闭该交互 也支持更详细的交互配置", + "type": "IHoverSpec | boolean", + "originalType": "IHoverSpec | boolean", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IHoverSpec" + ], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "select", + "description": "图表选中相关交互配置，当值为boolean类型时，表示开启或者关闭该交互 也支持更详细的交互配置", + "type": "ISelectSpec | boolean", + "originalType": "ISelectSpec | boolean", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISelectSpec" + ], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "interactions", + "description": "其他需要按需注册的类型交互", + "type": "IInteractionItemSpec[]", + "originalType": "IInteractionItemSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IInteractionItemSpec" + ], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "name", + "description": "系列名称", + "type": "string", + "originalType": "string", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "id", + "description": "数据唯一标识", + "type": "string | number", + "originalType": "StringOrNumber", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "dataIndex", + "description": "系列关联的数据索引", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "dataId", + "description": "系列关联的数据id", + "type": "string | number", + "originalType": "StringOrNumber", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "dataKey", + "description": "dataKey用于绑定数据与Mark的关系, 该配置在动画中非常重要.", + "type": "string | string[] | ((data: Datum, index: number) => string)", + "originalType": "DataKeyType", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "regionIndex", + "description": "系列关联的region索引", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "regionId", + "description": "系列关联的region id", + "type": "string | number", + "originalType": "StringOrNumber", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "seriesField", + "description": "分组字段", + "type": "string", + "originalType": "string", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "seriesStyle", + "description": "系列样式", + "type": "ISeriesStyle", + "originalType": "ISeriesStyle", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISeriesStyle" + ], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "stack", + "description": "是否对数据进行堆叠处理", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "totalLabel", + "description": "堆叠汇总标签", + "type": "ITotalLabelSpec", + "originalType": "ITotalLabelSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ITotalLabelSpec" + ], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "percent", + "description": "是否对数据进行百分比处理", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "stackOffsetSilhouette", + "description": "是否围绕中心轴偏移轮廓", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "invalidType", + "description": "非合规数据点连接方式 'break'指在该数据点处断开 'link' 指忽略该点保持连续 'zero' 指该点默认数值为0 'ignore' 指不处理", + "type": "'zero' | 'ignore' | 'link' | 'break'", + "originalType": "IInvalidType", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "animation", + "description": "是否开启动画", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "animationThreshold", + "description": "自动关闭动画的阀值，对应的是单系列data的长度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "support3d", + "description": "是否支持3d视角", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "extensionMark", + "description": "系列的扩展mark，能够获取系列上的数据", + "type": "(IExtensionMarkSpec> | IExtensionGroupMarkSpec)[]", + "originalType": "(IExtensionMarkSpec> | IExtensionGroupMarkSpec)[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IExtensionMarkSpec", + "IExtensionGroupMarkSpec" + ], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "zIndex", + "description": "今当通过`series`配置的时候，才会生效", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "direction", + "description": "direction row means layout by rows，col means layout by columns", + "type": "'default' | 'reverse'", + "originalType": "DirectionType", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "xField", + "description": "xField 配置", + "type": "string | string[]", + "originalType": "string | string[]", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "x2Field", + "description": "用于区间数据，声明区间末尾的数据字段。", + "type": "string", + "originalType": "string", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "yField", + "description": "yField 配置", + "type": "string | string[]", + "originalType": "string | string[]", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "y2Field", + "description": "用于区间数据，声明区间末尾的数据字段。", + "type": "string", + "originalType": "string", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "zField", + "description": "z轴字段 用于3d散点图等", + "type": "string | string[]", + "originalType": "string | string[]", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "sortDataByAxis", + "description": "是否将数据按照数轴排序", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "animationAppear", + "description": "入场动画配置", + "type": "\"grow\" | \"fadeIn\" | \"scaleIn\" | IAnimationConfig", + "originalType": "IAnimationConfig", + "required": false, + "category": "动画配置", + "isSimple": false, + "dependencies": [ + "IAnimationConfig" + ], + "inheritedFrom": "IAnimationSpec" + }, + { + "name": "animationEnter", + "description": "数据新增动画配置", + "type": "IAnimationConfig", + "originalType": "IAnimationConfig", + "required": false, + "category": "动画配置", + "isSimple": false, + "dependencies": [ + "IAnimationConfig" + ], + "inheritedFrom": "IAnimationSpec" + }, + { + "name": "animationUpdate", + "description": "数据更新动画配置", + "type": "IAnimationConfig", + "originalType": "IAnimationConfig", + "required": false, + "category": "动画配置", + "isSimple": false, + "dependencies": [ + "IAnimationConfig" + ], + "inheritedFrom": "IAnimationSpec" + }, + { + "name": "animationExit", + "description": "数据移除动画配置", + "type": "IAnimationConfig", + "originalType": "IAnimationConfig", + "required": false, + "category": "动画配置", + "isSimple": false, + "dependencies": [ + "IAnimationConfig" + ], + "inheritedFrom": "IAnimationSpec" + }, + { + "name": "activePoint", + "description": "是否使用额外的 activePoint 显示交互点，可以在点隐藏时显示被交互的点", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IDataSamping" + }, + { + "name": "sampling", + "description": "数据采样 - 采样方法", + "type": "'lttb' | 'min' | 'max' | 'sum' | 'average'", + "originalType": "ISamplingMethod", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IDataSamping" + }, + { + "name": "samplingFactor", + "description": "数据采样 - 采样系数", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IDataSamping" + }, + { + "name": "bar", + "description": "bar 配置", + "type": "IMarkSpec", + "originalType": "IMarkSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMarkSpec", + "IRectMarkSpec" + ] + }, + { + "name": "barBackground", + "description": "barBackground 配置", + "type": "IMarkSpec & IBarBackgroundSpec", + "originalType": "IMarkSpec & IBarBackgroundSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMarkSpec", + "IRectMarkSpec", + "IBarBackgroundSpec" + ] + }, + { + "name": "label", + "description": "label 配置", + "type": "IMultiLabelSpec & {\n position?: Functional<'outside' | 'top' | 'bottom' | 'left' | 'right' | 'inside' | 'inside-top' | 'inside-bottom' | 'inside-right' | 'inside-left' | 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'>;\n }>", + "originalType": "IMultiLabelSpec & {\n position?: Functional<'outside' | 'top' | 'bottom' | 'left' | 'right' | 'inside' | 'inside-top' | 'inside-bottom' | 'inside-right' | 'inside-left' | 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'>;\n }>", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMultiLabelSpec", + "ILabelSpec" + ] + }, + { + "name": "barWidth", + "description": "柱体宽度，可以设置绝对的像素值，也可以使用百分比（如 '10%'） 1. number 类型，表示像素值 2. string 类型，百分比用法，如 '10%'，该值为对应最后一个分组字段对应的 scale 的 bandWidth 占比(因为柱子是等宽的，所以采用最后一层分组的 scale)", + "type": "number | string", + "originalType": "number | string", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "barMinWidth", + "description": "柱体最小宽度，可以设置绝对的像素值，也可以使用百分比（如 '10%'） 1. number 类型，表示像素值 2. string 类型，百分比用法，如 '10%'，该值为对应最后一个分组字段对应的 scale 的 bandWidth 占比(因为柱子是等宽的，所以采用最后一层分组的 scale)", + "type": "number | string", + "originalType": "number | string", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "barMaxWidth", + "description": "柱体最大宽度，可以设置绝对的像素值，也可以使用百分比（如 '10%'） 1. number 类型，表示像素值 2. string 类型，百分比用法，如 '10%'，该值为对应最后一个分组字段对应的 scale 的 bandWidth 占比(因为柱子是等宽的，所以采用最后一层分组的 scale)", + "type": "number | string", + "originalType": "number | string", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "barGapInGroup", + "description": "分组柱图中各个分组内的柱子间距，可以设置绝对的像素值，也可以使用百分比（如 '10%'）。 当存在多层分组时，可以使用数组来设置不同层级的间距，如 [10, '20%']，表示第一层分组的间距为 10px，第二层分组的间距为 '20%'。 如果 barGapInGroup 的数组个数小于分组层数，则后面的分组间距使用最后一个值。 1. number 类型，表示像素值 2. string 类型，百分比用法，如 '10%'，该值为对应最后一个分组字段对应的 scale 的 bandWidth 占比(因为柱子是等宽的，所以采用最后一层分组的 scale)", + "type": "number | string | (number | string)[]", + "originalType": "number | string | (number | string)[]", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "barMinHeight", + "description": "柱条最小高度，可用于防止某数据项的值过小的视觉调整。", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "stackCornerRadius", + "description": "堆叠柱整体的圆角 @since 1.10.0 圆角支持回调配置 @since 1.12.4", + "type": "number | number[] | IStackCornerRadiusCallback", + "originalType": "number | number[] | IStackCornerRadiusCallback", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IStackCornerRadiusCallback" + ] + }, + { + "name": "barGap", + "description": "柱条间 gap 值 @since 1.13.11", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + } + ], + "note": "展开自 Omit, 'type'> - 包含 46 个属性（已展开所有继承）", + "expandedFrom": "IChartExtendsSeriesSpec", + "omittedKeys": [ + "type" + ] + } + }, + "timestamp": "2025-08-06T07:41:08.221Z", + "version": "1.0.0", + "sourceFile": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/chart/histogram/interface.d.ts", + "complexTypeDefinitions": { + "ICartesianAxisSpec": { + "typeName": "ICartesianAxisSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/axis/cartesian/interface/spec.d.ts", + "note": "类型 ICartesianAxisSpec 的定义位置" + }, + "ICartesianCrosshairSpec": { + "typeName": "ICartesianCrosshairSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/crosshair/interface/spec.d.ts", + "note": "类型 ICartesianCrosshairSpec 的定义位置" + }, + "IMarkLineSpec": { + "typeName": "IMarkLineSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/marker/mark-line/interface/spec.d.ts", + "note": "类型 IMarkLineSpec 的定义位置" + }, + "IMarkAreaSpec": { + "typeName": "IMarkAreaSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/marker/mark-area/interface/spec.d.ts", + "note": "类型 IMarkAreaSpec 的定义位置" + }, + "IMarkPointSpec": { + "typeName": "IMarkPointSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/marker/mark-point/interface/spec.d.ts", + "note": "类型 IMarkPointSpec 的定义位置" + }, + "IData": { + "typeName": "IData", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 IData 的定义位置" + }, + "ILayoutPaddingSpec": { + "typeName": "ILayoutPaddingSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/layout.d.ts", + "note": "类型 ILayoutPaddingSpec 的定义位置" + }, + "IVisualSpecScale": { + "typeName": "IVisualSpecScale", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/visual.d.ts", + "note": "类型 IVisualSpecScale 的定义位置" + }, + "ISeriesSpec": { + "typeName": "ISeriesSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 ISeriesSpec 的定义位置" + }, + "ISeriesStyle": { + "typeName": "ISeriesStyle", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/series/interface/common.d.ts", + "note": "类型 ISeriesStyle 的定义位置" + }, + "IHoverSpec": { + "typeName": "IHoverSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/interaction/interface/spec.d.ts", + "note": "类型 IHoverSpec 的定义位置" + }, + "ISelectSpec": { + "typeName": "ISelectSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/interaction/interface/spec.d.ts", + "note": "类型 ISelectSpec 的定义位置" + }, + "RegionSpec": { + "typeName": "RegionSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/region/interface.d.ts", + "note": "类型 RegionSpec 的定义位置" + }, + "ITitleSpec": { + "typeName": "ITitleSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/title/interface/spec.d.ts", + "note": "类型 ITitleSpec 的定义位置" + }, + "ILayoutSpec": { + "typeName": "ILayoutSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/layout/interface.d.ts", + "note": "类型 ILayoutSpec 的定义位置" + }, + "ILegendSpec": { + "typeName": "ILegendSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/legend/interface.d.ts", + "note": "类型 ILegendSpec 的定义位置" + }, + "ICrosshairSpec": { + "typeName": "ICrosshairSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/crosshair/interface/spec.d.ts", + "note": "类型 ICrosshairSpec 的定义位置" + }, + "ITooltipSpec": { + "typeName": "ITooltipSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/tooltip/interface/spec.d.ts", + "note": "类型 ITooltipSpec 的定义位置" + }, + "IPlayer": { + "typeName": "IPlayer", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/player/interface/spec.d.ts", + "note": "类型 IPlayer 的定义位置" + }, + "IDataZoomSpec": { + "typeName": "IDataZoomSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/data-zoom/data-zoom/interface.d.ts", + "note": "类型 IDataZoomSpec 的定义位置" + }, + "IScrollBarSpec": { + "typeName": "IScrollBarSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/data-zoom/scroll-bar/interface.d.ts", + "note": "类型 IScrollBarSpec 的定义位置" + }, + "IBrushSpec": { + "typeName": "IBrushSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/brush/interface.d.ts", + "note": "类型 IBrushSpec 的定义位置" + }, + "ICustomMarkSpec": { + "typeName": "ICustomMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 ICustomMarkSpec 的定义位置" + }, + "ICommonAxisSpec": { + "typeName": "ICommonAxisSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/axis/interface.d.ts", + "note": "类型 ICommonAxisSpec 的定义位置" + }, + "ITheme": { + "typeName": "ITheme", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/theme/interface.d.ts", + "note": "类型 ITheme 的定义位置" + }, + "IBackgroundSpec": { + "typeName": "IBackgroundSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 IBackgroundSpec 的定义位置" + }, + "IMediaQuerySpec": { + "typeName": "IMediaQuerySpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/media-query.d.ts", + "note": "类型 IMediaQuerySpec 的定义位置" + }, + "IInteractionItemSpec": { + "typeName": "IInteractionItemSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/interaction/interface/spec.d.ts", + "note": "类型 IInteractionItemSpec 的定义位置" + }, + "ITotalLabelSpec": { + "typeName": "ITotalLabelSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/label/interface.d.ts", + "note": "类型 ITotalLabelSpec 的定义位置" + }, + "IExtensionMarkSpec": { + "typeName": "IExtensionMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 IExtensionMarkSpec 的定义位置" + }, + "IExtensionGroupMarkSpec": { + "typeName": "IExtensionGroupMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 IExtensionGroupMarkSpec 的定义位置" + }, + "IAnimationConfig": { + "typeName": "IAnimationConfig", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart/src/typings/spec/common.ts", + "note": "类型 IAnimationConfig 的定义位置" + }, + "IMarkSpec": { + "typeName": "IMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 IMarkSpec 的定义位置" + }, + "IRectMarkSpec": { + "typeName": "IRectMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/visual.d.ts", + "note": "类型 IRectMarkSpec 的定义位置" + }, + "IBarBackgroundSpec": { + "typeName": "IBarBackgroundSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/series/bar/interface.d.ts", + "note": "类型 IBarBackgroundSpec 的定义位置" + }, + "IStackCornerRadiusCallback": { + "typeName": "IStackCornerRadiusCallback", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/series/bar/interface.d.ts", + "note": "类型 IStackCornerRadiusCallback 的定义位置" + } + }, + "statistics": { + "totalInterfaces": 4, + "totalProperties": 83, + "complexTypes": 36, + "typeFileLocations": 36, + "dependencyTypes": 866 + } +} \ No newline at end of file diff --git a/skills/vchart-development-skill/references/type-meta/line.json b/skills/vchart-development-skill/references/type-meta/line.json new file mode 100644 index 0000000000..f6b135cd18 --- /dev/null +++ b/skills/vchart-development-skill/references/type-meta/line.json @@ -0,0 +1,1201 @@ +{ + "typeName": "ILineChartSpec", + "description": "ILineChartSpec 配置规范的完整实现分析", + "inheritanceTree": { + "ILineChartSpec": { + "description": "ILineChartSpec 接口配置", + "directExtends": [ + "ICartesianChartSpec", + "IChartExtendsSeriesSpec" + ], + "ownProperties": [ + { + "name": "type", + "description": "type 配置", + "type": "'line'", + "originalType": "'line'", + "required": true, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "series", + "description": "系列配置", + "type": "ILineSeriesSpec[]", + "originalType": "ILineSeriesSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ILineSeriesSpec" + ] + } + ] + }, + "ICartesianChartSpec": { + "description": "ICartesianChartSpec 接口配置", + "directExtends": [ + "IChartSpec" + ], + "ownProperties": [ + { + "name": "direction", + "description": "图表的方向配置。 - 'vertical' 垂直布局，即常见的直角坐标系布局，x 轴位于底部，y 轴位于左侧。 - 'horizontal' 水平布局，可理解为 x 轴和 y 轴位置互换。", + "type": "'default' | 'reverse'", + "originalType": "DirectionType", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "axes", + "description": "笛卡尔坐标系的坐标轴配置", + "type": "ICartesianAxisSpec[]", + "originalType": "ICartesianAxisSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICartesianAxisSpec" + ] + }, + { + "name": "crosshair", + "description": "十字辅助线配置", + "type": "ICartesianCrosshairSpec | ICartesianCrosshairSpec[]", + "originalType": "ICartesianCrosshairSpec | ICartesianCrosshairSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICartesianCrosshairSpec" + ] + }, + { + "name": "markLine", + "description": "参考线配置", + "type": "IMarkLineSpec | IMarkLineSpec[]", + "originalType": "IMarkLineSpec | IMarkLineSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMarkLineSpec" + ] + }, + { + "name": "markArea", + "description": "参考区域配置", + "type": "IMarkAreaSpec | IMarkAreaSpec[]", + "originalType": "IMarkAreaSpec | IMarkAreaSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMarkAreaSpec" + ] + }, + { + "name": "markPoint", + "description": "参考点配置", + "type": "IMarkPointSpec | IMarkPointSpec[]", + "originalType": "IMarkPointSpec | IMarkPointSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMarkPointSpec" + ] + } + ] + }, + "IChartSpec": { + "description": "IChartSpec 接口配置", + "directExtends": [], + "ownProperties": [ + { + "name": "type", + "description": "图表类型", + "type": "string", + "originalType": "string", + "required": true, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "data", + "description": "data 配置", + "type": "IData", + "originalType": "IData", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IData" + ] + }, + { + "name": "width", + "description": "画布宽度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "height", + "description": "画布高度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "autoFit", + "description": "是否自适应容器大小", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "padding", + "description": "图表整体 padding 设置", + "type": "ILayoutPaddingSpec", + "originalType": "ILayoutPaddingSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ILayoutPaddingSpec" + ] + }, + { + "name": "color", + "description": "图表色系配置", + "type": "string[] | Omit, 'id'>", + "originalType": "string[] | Omit, 'id'>", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IVisualSpecScale" + ] + }, + { + "name": "series", + "description": "series 配置", + "type": "ISeriesSpec[]", + "originalType": "ISeriesSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISeriesSpec" + ] + }, + { + "name": "seriesStyle", + "description": "系列样式", + "type": "ISeriesStyle", + "originalType": "ISeriesStyle", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISeriesStyle" + ] + }, + { + "name": "animationThreshold", + "description": "自动关闭动画的阀值，对应的是单系列data的长度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "hover", + "description": "hover 交互", + "type": "boolean | IHoverSpec", + "originalType": "boolean | IHoverSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IHoverSpec" + ] + }, + { + "name": "select", + "description": "select 交互", + "type": "boolean | ISelectSpec", + "originalType": "boolean | ISelectSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISelectSpec" + ] + }, + { + "name": "region", + "description": "region配置", + "type": "RegionSpec[]", + "originalType": "RegionSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "RegionSpec" + ] + }, + { + "name": "title", + "description": "图表标题配置", + "type": "ITitleSpec", + "originalType": "ITitleSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ITitleSpec" + ] + }, + { + "name": "layout", + "description": "自定义布局函数", + "type": "ILayoutSpec", + "originalType": "ILayoutSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ILayoutSpec" + ] + }, + { + "name": "legends", + "description": "图例配置", + "type": "ILegendSpec | ILegendSpec[]", + "originalType": "ILegendSpec | ILegendSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ILegendSpec" + ] + }, + { + "name": "crosshair", + "description": "十字辅助线配置", + "type": "ICrosshairSpec | ICrosshairSpec[]", + "originalType": "ICrosshairSpec | ICrosshairSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICrosshairSpec" + ] + }, + { + "name": "tooltip", + "description": "tooltip配置", + "type": "ITooltipSpec", + "originalType": "ITooltipSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ITooltipSpec" + ] + }, + { + "name": "player", + "description": "播放器配置", + "type": "IPlayer", + "originalType": "IPlayer", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IPlayer" + ] + }, + { + "name": "dataZoom", + "description": "缩略轴配置", + "type": "IDataZoomSpec | IDataZoomSpec[]", + "originalType": "IDataZoomSpec | IDataZoomSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IDataZoomSpec" + ] + }, + { + "name": "scrollBar", + "description": "滚动条配置", + "type": "IScrollBarSpec | IScrollBarSpec[]", + "originalType": "IScrollBarSpec | IScrollBarSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IScrollBarSpec" + ] + }, + { + "name": "brush", + "description": "框选配置", + "type": "IBrushSpec", + "originalType": "IBrushSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IBrushSpec" + ] + }, + { + "name": "scales", + "description": "全局 scale 配置", + "type": "IVisualSpecScale[]", + "originalType": "IVisualSpecScale[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IVisualSpecScale" + ] + }, + { + "name": "customMark", + "description": "自定义mark", + "type": "ICustomMarkSpec[]", + "originalType": "ICustomMarkSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICustomMarkSpec" + ] + }, + { + "name": "axes", + "description": "axes 配置", + "type": "ICommonAxisSpec[]", + "originalType": "ICommonAxisSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICommonAxisSpec" + ] + }, + { + "name": "theme", + "description": "默认主题（支持完整主题对象或者主题名称，主题名称需要提前在 `ThemeManager` 中注册）", + "type": "Omit | string", + "originalType": "Omit | string", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ITheme" + ] + }, + { + "name": "background", + "description": "图表背景色配置，优先级高于构造函数中的 background 配置 自1.11.6版本支持渐变色对象的配置", + "type": "IBackgroundSpec", + "originalType": "IBackgroundSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IBackgroundSpec" + ] + }, + { + "name": "stackInverse", + "description": "堆积时是否逆序", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "stackSort", + "description": "堆积时是否排序", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "media", + "description": "媒体查询配置", + "type": "IMediaQuerySpec", + "originalType": "IMediaQuerySpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMediaQuerySpec" + ] + } + ] + }, + "IChartExtendsSeriesSpec": { + "description": "ILineSeriesSpec 的属性（排除 data, morph, stackValue, tooltip）", + "directExtends": [], + "ownProperties": [ + { + "name": "hover", + "description": "图表hover相关交互配置，当值为boolean类型时，表示开启或者关闭该交互 也支持更详细的交互配置", + "type": "IHoverSpec | boolean", + "originalType": "IHoverSpec | boolean", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IHoverSpec" + ], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "select", + "description": "图表选中相关交互配置，当值为boolean类型时，表示开启或者关闭该交互 也支持更详细的交互配置", + "type": "ISelectSpec | boolean", + "originalType": "ISelectSpec | boolean", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISelectSpec" + ], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "interactions", + "description": "其他需要按需注册的类型交互", + "type": "IInteractionItemSpec[]", + "originalType": "IInteractionItemSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IInteractionItemSpec" + ], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "type", + "description": "系列类型", + "type": "'line'", + "originalType": "'line'", + "required": true, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "name", + "description": "系列名称", + "type": "string", + "originalType": "string", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "id", + "description": "数据唯一标识", + "type": "string | number", + "originalType": "StringOrNumber", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "dataIndex", + "description": "系列关联的数据索引", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "dataId", + "description": "系列关联的数据id", + "type": "string | number", + "originalType": "StringOrNumber", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "dataKey", + "description": "dataKey用于绑定数据与Mark的关系, 该配置在动画中非常重要.", + "type": "string | string[] | ((data: Datum, index: number) => string)", + "originalType": "DataKeyType", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "regionIndex", + "description": "系列关联的region索引", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "regionId", + "description": "系列关联的region id", + "type": "string | number", + "originalType": "StringOrNumber", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "seriesField", + "description": "分组字段", + "type": "string", + "originalType": "string", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "seriesStyle", + "description": "系列样式", + "type": "ISeriesStyle", + "originalType": "ISeriesStyle", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISeriesStyle" + ], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "stack", + "description": "是否对数据进行堆叠处理", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "totalLabel", + "description": "堆叠汇总标签", + "type": "ITotalLabelSpec", + "originalType": "ITotalLabelSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ITotalLabelSpec" + ], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "percent", + "description": "是否对数据进行百分比处理", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "stackOffsetSilhouette", + "description": "是否围绕中心轴偏移轮廓", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "invalidType", + "description": "非合规数据点连接方式 'break'指在该数据点处断开 'link' 指忽略该点保持连续 'zero' 指该点默认数值为0 'ignore' 指不处理", + "type": "'zero' | 'ignore' | 'link' | 'break'", + "originalType": "IInvalidType", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "animation", + "description": "是否开启动画", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "animationThreshold", + "description": "自动关闭动画的阀值，对应的是单系列data的长度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "support3d", + "description": "是否支持3d视角", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "extensionMark", + "description": "系列的扩展mark，能够获取系列上的数据", + "type": "(IExtensionMarkSpec> | IExtensionGroupMarkSpec)[]", + "originalType": "(IExtensionMarkSpec> | IExtensionGroupMarkSpec)[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IExtensionMarkSpec", + "IExtensionGroupMarkSpec" + ], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "zIndex", + "description": "今当通过`series`配置的时候，才会生效", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "direction", + "description": "direction row means layout by rows，col means layout by columns", + "type": "'default' | 'reverse'", + "originalType": "DirectionType", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "xField", + "description": "x轴字段", + "type": "string | string[]", + "originalType": "string | string[]", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "x2Field", + "description": "用于区间数据，声明区间末尾的数据字段。", + "type": "string", + "originalType": "string", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "yField", + "description": "y轴字段", + "type": "string | string[]", + "originalType": "string | string[]", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "y2Field", + "description": "用于区间数据，声明区间末尾的数据字段。", + "type": "string", + "originalType": "string", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "zField", + "description": "z轴字段 用于3d散点图等", + "type": "string | string[]", + "originalType": "string | string[]", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "sortDataByAxis", + "description": "是否将数据按照数轴排序", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "animationAppear", + "description": "入场动画配置", + "type": "'clipIn' | 'fadeIn' | 'grow' | IAnimationConfig", + "originalType": "IAnimationConfig", + "required": false, + "category": "动画配置", + "isSimple": false, + "dependencies": [ + "IAnimationConfig" + ], + "inheritedFrom": "IAnimationSpec" + }, + { + "name": "animationEnter", + "description": "数据新增动画配置", + "type": "IAnimationConfig", + "originalType": "IAnimationConfig", + "required": false, + "category": "动画配置", + "isSimple": false, + "dependencies": [ + "IAnimationConfig" + ], + "inheritedFrom": "IAnimationSpec" + }, + { + "name": "animationUpdate", + "description": "数据更新动画配置", + "type": "IAnimationConfig", + "originalType": "IAnimationConfig", + "required": false, + "category": "动画配置", + "isSimple": false, + "dependencies": [ + "IAnimationConfig" + ], + "inheritedFrom": "IAnimationSpec" + }, + { + "name": "animationExit", + "description": "数据移除动画配置", + "type": "IAnimationConfig", + "originalType": "IAnimationConfig", + "required": false, + "category": "动画配置", + "isSimple": false, + "dependencies": [ + "IAnimationConfig" + ], + "inheritedFrom": "IAnimationSpec" + }, + { + "name": "activePoint", + "description": "是否使用额外的 activePoint 显示交互点，可以在点隐藏时显示被交互的点", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "sampling", + "description": "数据采样 - 采样方法", + "type": "'lttb' | 'min' | 'max' | 'sum' | 'average'", + "originalType": "ISamplingMethod", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IDataSamping" + }, + { + "name": "samplingFactor", + "description": "数据采样 - 采样系数", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IDataSamping" + }, + { + "name": "pointDis", + "description": "标记点之间的距离，px", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IMarkOverlap" + }, + { + "name": "pointDisMul", + "description": "标记点之间的距离， pointSize 的倍数", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IMarkOverlap" + }, + { + "name": "markOverlap", + "description": "是否允许标记图形相互覆盖", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IMarkOverlap" + }, + { + "name": "point", + "description": "point 配置", + "type": "IMarkSpec", + "originalType": "IMarkSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMarkSpec", + "ISymbolMarkSpec" + ] + }, + { + "name": "line", + "description": "line 配置", + "type": "IMarkSpec", + "originalType": "IMarkSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMarkSpec", + "ILineMarkSpec" + ] + }, + { + "name": "label", + "description": "label 配置", + "type": "IMultiLabelSpec", + "originalType": "IMultiLabelSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMultiLabelSpec", + "ILineLikeLabelSpec" + ] + }, + { + "name": "lineLabel", + "description": "lineLabel 配置", + "type": "Omit & {\n position?: 'start' | 'end';\n }", + "originalType": "Omit & {\n position?: 'start' | 'end';\n }", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ILabelSpec" + ] + }, + { + "name": "seriesMark", + "description": "系列主 mark 类型配置，该配置会影响图例的展示", + "type": "'line' | 'point'", + "originalType": "'line' | 'point'", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + } + ], + "note": "展开自 Omit - 包含 45 个属性（已展开所有继承）", + "expandedFrom": "ILineSeriesSpec", + "omittedKeys": [ + "data", + "morph", + "stackValue", + "tooltip" + ] + } + }, + "timestamp": "2025-08-06T07:42:01.949Z", + "version": "1.0.0", + "sourceFile": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/chart/line/interface.d.ts", + "complexTypeDefinitions": { + "ILineSeriesSpec": { + "typeName": "ILineSeriesSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/series/line/interface.d.ts", + "note": "类型 ILineSeriesSpec 的定义位置" + }, + "ICartesianAxisSpec": { + "typeName": "ICartesianAxisSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/axis/cartesian/interface/spec.d.ts", + "note": "类型 ICartesianAxisSpec 的定义位置" + }, + "ICartesianCrosshairSpec": { + "typeName": "ICartesianCrosshairSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/crosshair/interface/spec.d.ts", + "note": "类型 ICartesianCrosshairSpec 的定义位置" + }, + "IMarkLineSpec": { + "typeName": "IMarkLineSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/marker/mark-line/interface/spec.d.ts", + "note": "类型 IMarkLineSpec 的定义位置" + }, + "IMarkAreaSpec": { + "typeName": "IMarkAreaSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/marker/mark-area/interface/spec.d.ts", + "note": "类型 IMarkAreaSpec 的定义位置" + }, + "IMarkPointSpec": { + "typeName": "IMarkPointSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/marker/mark-point/interface/spec.d.ts", + "note": "类型 IMarkPointSpec 的定义位置" + }, + "IData": { + "typeName": "IData", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 IData 的定义位置" + }, + "ILayoutPaddingSpec": { + "typeName": "ILayoutPaddingSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/layout.d.ts", + "note": "类型 ILayoutPaddingSpec 的定义位置" + }, + "IVisualSpecScale": { + "typeName": "IVisualSpecScale", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/visual.d.ts", + "note": "类型 IVisualSpecScale 的定义位置" + }, + "ISeriesSpec": { + "typeName": "ISeriesSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 ISeriesSpec 的定义位置" + }, + "ISeriesStyle": { + "typeName": "ISeriesStyle", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/series/interface/common.d.ts", + "note": "类型 ISeriesStyle 的定义位置" + }, + "IHoverSpec": { + "typeName": "IHoverSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/interaction/interface/spec.d.ts", + "note": "类型 IHoverSpec 的定义位置" + }, + "ISelectSpec": { + "typeName": "ISelectSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/interaction/interface/spec.d.ts", + "note": "类型 ISelectSpec 的定义位置" + }, + "RegionSpec": { + "typeName": "RegionSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/region/interface.d.ts", + "note": "类型 RegionSpec 的定义位置" + }, + "ITitleSpec": { + "typeName": "ITitleSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/title/interface/spec.d.ts", + "note": "类型 ITitleSpec 的定义位置" + }, + "ILayoutSpec": { + "typeName": "ILayoutSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/layout/interface.d.ts", + "note": "类型 ILayoutSpec 的定义位置" + }, + "ILegendSpec": { + "typeName": "ILegendSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/legend/interface.d.ts", + "note": "类型 ILegendSpec 的定义位置" + }, + "ICrosshairSpec": { + "typeName": "ICrosshairSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/crosshair/interface/spec.d.ts", + "note": "类型 ICrosshairSpec 的定义位置" + }, + "ITooltipSpec": { + "typeName": "ITooltipSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/tooltip/interface/spec.d.ts", + "note": "类型 ITooltipSpec 的定义位置" + }, + "IPlayer": { + "typeName": "IPlayer", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/player/interface/spec.d.ts", + "note": "类型 IPlayer 的定义位置" + }, + "IDataZoomSpec": { + "typeName": "IDataZoomSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/data-zoom/data-zoom/interface.d.ts", + "note": "类型 IDataZoomSpec 的定义位置" + }, + "IScrollBarSpec": { + "typeName": "IScrollBarSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/data-zoom/scroll-bar/interface.d.ts", + "note": "类型 IScrollBarSpec 的定义位置" + }, + "IBrushSpec": { + "typeName": "IBrushSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/brush/interface.d.ts", + "note": "类型 IBrushSpec 的定义位置" + }, + "ICustomMarkSpec": { + "typeName": "ICustomMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 ICustomMarkSpec 的定义位置" + }, + "ICommonAxisSpec": { + "typeName": "ICommonAxisSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/axis/interface.d.ts", + "note": "类型 ICommonAxisSpec 的定义位置" + }, + "ITheme": { + "typeName": "ITheme", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/theme/interface.d.ts", + "note": "类型 ITheme 的定义位置" + }, + "IBackgroundSpec": { + "typeName": "IBackgroundSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 IBackgroundSpec 的定义位置" + }, + "IMediaQuerySpec": { + "typeName": "IMediaQuerySpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/media-query.d.ts", + "note": "类型 IMediaQuerySpec 的定义位置" + }, + "IInteractionItemSpec": { + "typeName": "IInteractionItemSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/interaction/interface/spec.d.ts", + "note": "类型 IInteractionItemSpec 的定义位置" + }, + "ITotalLabelSpec": { + "typeName": "ITotalLabelSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/label/interface.d.ts", + "note": "类型 ITotalLabelSpec 的定义位置" + }, + "IExtensionMarkSpec": { + "typeName": "IExtensionMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 IExtensionMarkSpec 的定义位置" + }, + "IExtensionGroupMarkSpec": { + "typeName": "IExtensionGroupMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 IExtensionGroupMarkSpec 的定义位置" + }, + "IAnimationConfig": { + "typeName": "IAnimationConfig", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart/src/typings/spec/common.ts", + "note": "类型 IAnimationConfig 的定义位置" + }, + "IMarkSpec": { + "typeName": "IMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 IMarkSpec 的定义位置" + }, + "ISymbolMarkSpec": { + "typeName": "ISymbolMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/visual.d.ts", + "note": "类型 ISymbolMarkSpec 的定义位置" + }, + "ILineMarkSpec": { + "typeName": "ILineMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/visual.d.ts", + "note": "类型 ILineMarkSpec 的定义位置" + }, + "IMultiLabelSpec": { + "typeName": "IMultiLabelSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/label/interface.d.ts", + "note": "类型 IMultiLabelSpec 的定义位置" + }, + "ILineLikeLabelSpec": { + "typeName": "ILineLikeLabelSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/series/mixin/interface.d.ts", + "note": "类型 ILineLikeLabelSpec 的定义位置" + } + }, + "statistics": { + "totalInterfaces": 4, + "totalProperties": 83, + "complexTypes": 38, + "typeFileLocations": 38, + "dependencyTypes": 866 + } +} \ No newline at end of file diff --git a/skills/vchart-development-skill/references/type-meta/linearProgress.json b/skills/vchart-development-skill/references/type-meta/linearProgress.json new file mode 100644 index 0000000000..0a6192dfd7 --- /dev/null +++ b/skills/vchart-development-skill/references/type-meta/linearProgress.json @@ -0,0 +1,1032 @@ +{ + "typeName": "ILinearProgressChartSpec", + "description": "ILinearProgressChartSpec 配置规范的完整实现分析", + "inheritanceTree": { + "ILinearProgressChartSpec": { + "description": "ILinearProgressChartSpec 接口配置", + "directExtends": [ + "IProgressChartSpec", + "IChartExtendsSeriesSpec" + ], + "ownProperties": [ + { + "name": "type", + "description": "type 配置", + "type": "'linearProgress'", + "originalType": "'linearProgress'", + "required": true, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "axes", + "description": "axes 配置", + "type": "ICartesianAxisSpec[]", + "originalType": "ICartesianAxisSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICartesianAxisSpec" + ] + }, + { + "name": "series", + "description": "series 配置", + "type": "ILinearProgressSeriesSpec[]", + "originalType": "ILinearProgressSeriesSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ILinearProgressSeriesSpec" + ] + } + ] + }, + "IProgressChartSpec": { + "description": "IProgressChartSpec 接口配置", + "directExtends": [ + "IChartSpec" + ], + "ownProperties": [ + { + "name": "seriesField", + "description": "分组字段", + "type": "string", + "originalType": "string", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "cornerRadius", + "description": "进度条圆角半径", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "axes", + "description": "axes 配置", + "type": "ICartesianAxisSpec[] | IPolarAxisSpec[]", + "originalType": "ICartesianAxisSpec[] | IPolarAxisSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICartesianAxisSpec", + "IPolarAxisSpec" + ] + } + ] + }, + "IChartSpec": { + "description": "IChartSpec 接口配置", + "directExtends": [], + "ownProperties": [ + { + "name": "type", + "description": "图表类型", + "type": "string", + "originalType": "string", + "required": true, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "data", + "description": "data 配置", + "type": "IData", + "originalType": "IData", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IData" + ] + }, + { + "name": "width", + "description": "画布宽度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "height", + "description": "画布高度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "autoFit", + "description": "是否自适应容器大小", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "padding", + "description": "图表整体 padding 设置", + "type": "ILayoutPaddingSpec", + "originalType": "ILayoutPaddingSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ILayoutPaddingSpec" + ] + }, + { + "name": "color", + "description": "图表色系配置", + "type": "string[] | Omit, 'id'>", + "originalType": "string[] | Omit, 'id'>", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IVisualSpecScale" + ] + }, + { + "name": "series", + "description": "series 配置", + "type": "ISeriesSpec[]", + "originalType": "ISeriesSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISeriesSpec" + ] + }, + { + "name": "seriesStyle", + "description": "系列样式", + "type": "ISeriesStyle", + "originalType": "ISeriesStyle", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISeriesStyle" + ] + }, + { + "name": "animationThreshold", + "description": "自动关闭动画的阀值，对应的是单系列data的长度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "hover", + "description": "hover 交互", + "type": "boolean | IHoverSpec", + "originalType": "boolean | IHoverSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IHoverSpec" + ] + }, + { + "name": "select", + "description": "select 交互", + "type": "boolean | ISelectSpec", + "originalType": "boolean | ISelectSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISelectSpec" + ] + }, + { + "name": "region", + "description": "region配置", + "type": "RegionSpec[]", + "originalType": "RegionSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "RegionSpec" + ] + }, + { + "name": "title", + "description": "图表标题配置", + "type": "ITitleSpec", + "originalType": "ITitleSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ITitleSpec" + ] + }, + { + "name": "layout", + "description": "自定义布局函数", + "type": "ILayoutSpec", + "originalType": "ILayoutSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ILayoutSpec" + ] + }, + { + "name": "legends", + "description": "图例配置", + "type": "ILegendSpec | ILegendSpec[]", + "originalType": "ILegendSpec | ILegendSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ILegendSpec" + ] + }, + { + "name": "crosshair", + "description": "十字辅助线配置", + "type": "ICrosshairSpec | ICrosshairSpec[]", + "originalType": "ICrosshairSpec | ICrosshairSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICrosshairSpec" + ] + }, + { + "name": "tooltip", + "description": "tooltip配置", + "type": "ITooltipSpec", + "originalType": "ITooltipSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ITooltipSpec" + ] + }, + { + "name": "player", + "description": "播放器配置", + "type": "IPlayer", + "originalType": "IPlayer", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IPlayer" + ] + }, + { + "name": "dataZoom", + "description": "缩略轴配置", + "type": "IDataZoomSpec | IDataZoomSpec[]", + "originalType": "IDataZoomSpec | IDataZoomSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IDataZoomSpec" + ] + }, + { + "name": "scrollBar", + "description": "滚动条配置", + "type": "IScrollBarSpec | IScrollBarSpec[]", + "originalType": "IScrollBarSpec | IScrollBarSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IScrollBarSpec" + ] + }, + { + "name": "brush", + "description": "框选配置", + "type": "IBrushSpec", + "originalType": "IBrushSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IBrushSpec" + ] + }, + { + "name": "scales", + "description": "全局 scale 配置", + "type": "IVisualSpecScale[]", + "originalType": "IVisualSpecScale[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IVisualSpecScale" + ] + }, + { + "name": "customMark", + "description": "自定义mark", + "type": "ICustomMarkSpec[]", + "originalType": "ICustomMarkSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICustomMarkSpec" + ] + }, + { + "name": "axes", + "description": "axes 配置", + "type": "ICommonAxisSpec[]", + "originalType": "ICommonAxisSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICommonAxisSpec" + ] + }, + { + "name": "theme", + "description": "默认主题（支持完整主题对象或者主题名称，主题名称需要提前在 `ThemeManager` 中注册）", + "type": "Omit | string", + "originalType": "Omit | string", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ITheme" + ] + }, + { + "name": "background", + "description": "图表背景色配置，优先级高于构造函数中的 background 配置 自1.11.6版本支持渐变色对象的配置", + "type": "IBackgroundSpec", + "originalType": "IBackgroundSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IBackgroundSpec" + ] + }, + { + "name": "stackInverse", + "description": "堆积时是否逆序", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "stackSort", + "description": "堆积时是否排序", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "media", + "description": "媒体查询配置", + "type": "IMediaQuerySpec", + "originalType": "IMediaQuerySpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMediaQuerySpec" + ] + } + ] + }, + "IChartExtendsSeriesSpec": { + "description": "ILinearProgressSeriesSpec 的属性（排除 data, morph, stackValue, tooltip）", + "directExtends": [], + "ownProperties": [ + { + "name": "hover", + "description": "图表hover相关交互配置，当值为boolean类型时，表示开启或者关闭该交互 也支持更详细的交互配置", + "type": "IHoverSpec | boolean", + "originalType": "IHoverSpec | boolean", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IHoverSpec" + ], + "inheritedFrom": "IProgressSeriesSpec" + }, + { + "name": "select", + "description": "图表选中相关交互配置，当值为boolean类型时，表示开启或者关闭该交互 也支持更详细的交互配置", + "type": "ISelectSpec | boolean", + "originalType": "ISelectSpec | boolean", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISelectSpec" + ], + "inheritedFrom": "IProgressSeriesSpec" + }, + { + "name": "interactions", + "description": "其他需要按需注册的类型交互", + "type": "IInteractionItemSpec[]", + "originalType": "IInteractionItemSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IInteractionItemSpec" + ], + "inheritedFrom": "IProgressSeriesSpec" + }, + { + "name": "type", + "description": "type 配置", + "type": "'linearProgress'", + "originalType": "'linearProgress'", + "required": true, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "name", + "description": "系列名称", + "type": "string", + "originalType": "string", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IProgressSeriesSpec" + }, + { + "name": "id", + "description": "数据唯一标识", + "type": "string | number", + "originalType": "StringOrNumber", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IProgressSeriesSpec" + }, + { + "name": "dataIndex", + "description": "系列关联的数据索引", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IProgressSeriesSpec" + }, + { + "name": "dataId", + "description": "系列关联的数据id", + "type": "string | number", + "originalType": "StringOrNumber", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IProgressSeriesSpec" + }, + { + "name": "dataKey", + "description": "dataKey用于绑定数据与Mark的关系, 该配置在动画中非常重要.", + "type": "string | string[] | ((data: Datum, index: number) => string)", + "originalType": "DataKeyType", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IProgressSeriesSpec" + }, + { + "name": "regionIndex", + "description": "系列关联的region索引", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IProgressSeriesSpec" + }, + { + "name": "regionId", + "description": "系列关联的region id", + "type": "string | number", + "originalType": "StringOrNumber", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IProgressSeriesSpec" + }, + { + "name": "seriesField", + "description": "分组字段", + "type": "string", + "originalType": "string", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IProgressSeriesSpec" + }, + { + "name": "seriesStyle", + "description": "系列样式", + "type": "ISeriesStyle", + "originalType": "ISeriesStyle", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISeriesStyle" + ], + "inheritedFrom": "IProgressSeriesSpec" + }, + { + "name": "stack", + "description": "是否对数据进行堆叠处理", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IProgressSeriesSpec" + }, + { + "name": "totalLabel", + "description": "堆叠汇总标签", + "type": "ITotalLabelSpec", + "originalType": "ITotalLabelSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ITotalLabelSpec" + ], + "inheritedFrom": "IProgressSeriesSpec" + }, + { + "name": "percent", + "description": "是否对数据进行百分比处理", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IProgressSeriesSpec" + }, + { + "name": "stackOffsetSilhouette", + "description": "是否围绕中心轴偏移轮廓", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IProgressSeriesSpec" + }, + { + "name": "invalidType", + "description": "非合规数据点连接方式 'break'指在该数据点处断开 'link' 指忽略该点保持连续 'zero' 指该点默认数值为0 'ignore' 指不处理", + "type": "'zero' | 'ignore' | 'link' | 'break'", + "originalType": "IInvalidType", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IProgressSeriesSpec" + }, + { + "name": "animation", + "description": "是否开启动画", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IProgressSeriesSpec" + }, + { + "name": "animationThreshold", + "description": "自动关闭动画的阀值，对应的是单系列data的长度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IProgressSeriesSpec" + }, + { + "name": "support3d", + "description": "是否支持3d视角", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IProgressSeriesSpec" + }, + { + "name": "extensionMark", + "description": "系列的扩展mark，能够获取系列上的数据", + "type": "(IExtensionMarkSpec> | IExtensionGroupMarkSpec)[]", + "originalType": "(IExtensionMarkSpec> | IExtensionGroupMarkSpec)[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IExtensionMarkSpec", + "IExtensionGroupMarkSpec" + ], + "inheritedFrom": "IProgressSeriesSpec" + }, + { + "name": "zIndex", + "description": "今当通过`series`配置的时候，才会生效", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IProgressSeriesSpec" + }, + { + "name": "cornerRadius", + "description": "进度条圆角半径", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IProgressSeriesSpec" + }, + { + "name": "progress", + "description": "progress 配置", + "type": "IMarkSpec & {\n topPadding?: number;\n bottomPadding?: number;\n leftPadding?: number;\n rightPadding?: number;\n }", + "originalType": "IMarkSpec & {\n topPadding?: number;\n bottomPadding?: number;\n leftPadding?: number;\n rightPadding?: number;\n }", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMarkSpec", + "IRectMarkSpec" + ] + }, + { + "name": "track", + "description": "track 配置", + "type": "IMarkSpec", + "originalType": "IMarkSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMarkSpec", + "IRectMarkSpec" + ] + }, + { + "name": "animationAppear", + "description": "入场动画配置", + "type": "'grow' | 'fadeIn' | IAnimationConfig", + "originalType": "IAnimationConfig", + "required": false, + "category": "动画配置", + "isSimple": false, + "dependencies": [ + "IAnimationConfig" + ], + "inheritedFrom": "IAnimationSpec" + }, + { + "name": "animationEnter", + "description": "数据新增动画配置", + "type": "IAnimationConfig", + "originalType": "IAnimationConfig", + "required": false, + "category": "动画配置", + "isSimple": false, + "dependencies": [ + "IAnimationConfig" + ], + "inheritedFrom": "IAnimationSpec" + }, + { + "name": "animationUpdate", + "description": "数据更新动画配置", + "type": "IAnimationConfig", + "originalType": "IAnimationConfig", + "required": false, + "category": "动画配置", + "isSimple": false, + "dependencies": [ + "IAnimationConfig" + ], + "inheritedFrom": "IAnimationSpec" + }, + { + "name": "animationExit", + "description": "数据移除动画配置", + "type": "IAnimationConfig", + "originalType": "IAnimationConfig", + "required": false, + "category": "动画配置", + "isSimple": false, + "dependencies": [ + "IAnimationConfig" + ], + "inheritedFrom": "IAnimationSpec" + }, + { + "name": "xField", + "description": "coordinate: 'cartesian' x轴字段", + "type": "string | string[]", + "originalType": "string | string[]", + "required": true, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "yField", + "description": "y轴字段 因为存在 direction，运行双轴都为离散，连续。所以 yField 也可以像 xField 一样支持多维度", + "type": "string | string[]", + "originalType": "string | string[]", + "required": true, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "direction", + "description": "direction 配置", + "type": "'default' | 'reverse'", + "originalType": "DirectionType", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "bandWidth", + "description": "进度条宽度 以像素值(px)为单位", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "clamp", + "description": "超出轴范围是否被裁剪", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + } + ], + "note": "展开自 Omit - 包含 35 个属性（已展开所有继承）", + "expandedFrom": "ILinearProgressSeriesSpec", + "omittedKeys": [ + "data", + "morph", + "stackValue", + "tooltip" + ] + } + }, + "timestamp": "2025-08-06T07:42:57.462Z", + "version": "1.0.0", + "sourceFile": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/chart/progress/linear/interface.d.ts", + "complexTypeDefinitions": { + "ICartesianAxisSpec": { + "typeName": "ICartesianAxisSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/axis/cartesian/interface/spec.d.ts", + "note": "类型 ICartesianAxisSpec 的定义位置" + }, + "ILinearProgressSeriesSpec": { + "typeName": "ILinearProgressSeriesSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/series/progress/linear/interface.d.ts", + "note": "类型 ILinearProgressSeriesSpec 的定义位置" + }, + "IPolarAxisSpec": { + "typeName": "IPolarAxisSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/axis/polar/interface/spec.d.ts", + "note": "类型 IPolarAxisSpec 的定义位置" + }, + "IData": { + "typeName": "IData", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 IData 的定义位置" + }, + "ILayoutPaddingSpec": { + "typeName": "ILayoutPaddingSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/layout.d.ts", + "note": "类型 ILayoutPaddingSpec 的定义位置" + }, + "IVisualSpecScale": { + "typeName": "IVisualSpecScale", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/visual.d.ts", + "note": "类型 IVisualSpecScale 的定义位置" + }, + "ISeriesSpec": { + "typeName": "ISeriesSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 ISeriesSpec 的定义位置" + }, + "ISeriesStyle": { + "typeName": "ISeriesStyle", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/series/interface/common.d.ts", + "note": "类型 ISeriesStyle 的定义位置" + }, + "IHoverSpec": { + "typeName": "IHoverSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/interaction/interface/spec.d.ts", + "note": "类型 IHoverSpec 的定义位置" + }, + "ISelectSpec": { + "typeName": "ISelectSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/interaction/interface/spec.d.ts", + "note": "类型 ISelectSpec 的定义位置" + }, + "RegionSpec": { + "typeName": "RegionSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/region/interface.d.ts", + "note": "类型 RegionSpec 的定义位置" + }, + "ITitleSpec": { + "typeName": "ITitleSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/title/interface/spec.d.ts", + "note": "类型 ITitleSpec 的定义位置" + }, + "ILayoutSpec": { + "typeName": "ILayoutSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/layout/interface.d.ts", + "note": "类型 ILayoutSpec 的定义位置" + }, + "ILegendSpec": { + "typeName": "ILegendSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/legend/interface.d.ts", + "note": "类型 ILegendSpec 的定义位置" + }, + "ICrosshairSpec": { + "typeName": "ICrosshairSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/crosshair/interface/spec.d.ts", + "note": "类型 ICrosshairSpec 的定义位置" + }, + "ITooltipSpec": { + "typeName": "ITooltipSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/tooltip/interface/spec.d.ts", + "note": "类型 ITooltipSpec 的定义位置" + }, + "IPlayer": { + "typeName": "IPlayer", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/player/interface/spec.d.ts", + "note": "类型 IPlayer 的定义位置" + }, + "IDataZoomSpec": { + "typeName": "IDataZoomSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/data-zoom/data-zoom/interface.d.ts", + "note": "类型 IDataZoomSpec 的定义位置" + }, + "IScrollBarSpec": { + "typeName": "IScrollBarSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/data-zoom/scroll-bar/interface.d.ts", + "note": "类型 IScrollBarSpec 的定义位置" + }, + "IBrushSpec": { + "typeName": "IBrushSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/brush/interface.d.ts", + "note": "类型 IBrushSpec 的定义位置" + }, + "ICustomMarkSpec": { + "typeName": "ICustomMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 ICustomMarkSpec 的定义位置" + }, + "ICommonAxisSpec": { + "typeName": "ICommonAxisSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/axis/interface.d.ts", + "note": "类型 ICommonAxisSpec 的定义位置" + }, + "ITheme": { + "typeName": "ITheme", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/theme/interface.d.ts", + "note": "类型 ITheme 的定义位置" + }, + "IBackgroundSpec": { + "typeName": "IBackgroundSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 IBackgroundSpec 的定义位置" + }, + "IMediaQuerySpec": { + "typeName": "IMediaQuerySpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/media-query.d.ts", + "note": "类型 IMediaQuerySpec 的定义位置" + }, + "IInteractionItemSpec": { + "typeName": "IInteractionItemSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/interaction/interface/spec.d.ts", + "note": "类型 IInteractionItemSpec 的定义位置" + }, + "ITotalLabelSpec": { + "typeName": "ITotalLabelSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/label/interface.d.ts", + "note": "类型 ITotalLabelSpec 的定义位置" + }, + "IExtensionMarkSpec": { + "typeName": "IExtensionMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 IExtensionMarkSpec 的定义位置" + }, + "IExtensionGroupMarkSpec": { + "typeName": "IExtensionGroupMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 IExtensionGroupMarkSpec 的定义位置" + }, + "IMarkSpec": { + "typeName": "IMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 IMarkSpec 的定义位置" + }, + "IRectMarkSpec": { + "typeName": "IRectMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/visual.d.ts", + "note": "类型 IRectMarkSpec 的定义位置" + }, + "IAnimationConfig": { + "typeName": "IAnimationConfig", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart/src/typings/spec/common.ts", + "note": "类型 IAnimationConfig 的定义位置" + } + }, + "statistics": { + "totalInterfaces": 4, + "totalProperties": 71, + "complexTypes": 32, + "typeFileLocations": 32, + "dependencyTypes": 864 + } +} \ No newline at end of file diff --git a/skills/vchart-development-skill/references/type-meta/liquid.json b/skills/vchart-development-skill/references/type-meta/liquid.json new file mode 100644 index 0000000000..46ba29300a --- /dev/null +++ b/skills/vchart-development-skill/references/type-meta/liquid.json @@ -0,0 +1,826 @@ +{ + "typeName": "ILiquidChartSpec", + "description": "ILiquidChartSpec 配置规范的完整实现分析", + "inheritanceTree": { + "ILiquidChartSpec": { + "description": "ILiquidChartSpec 接口配置", + "directExtends": [ + "ICartesianChartSpec", + "IChartExtendsSeriesSpec" + ], + "ownProperties": [ + { + "name": "type", + "description": "type 配置", + "type": "'liquid'", + "originalType": "'liquid'", + "required": true, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "series", + "description": "系列配置", + "type": "ILiquidSeriesSpec[]", + "originalType": "ILiquidSeriesSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ILiquidSeriesSpec" + ] + } + ] + }, + "ICartesianChartSpec": { + "description": "ICartesianChartSpec 接口配置", + "directExtends": [ + "IChartSpec" + ], + "ownProperties": [ + { + "name": "direction", + "description": "图表的方向配置。 - 'vertical' 垂直布局，即常见的直角坐标系布局，x 轴位于底部，y 轴位于左侧。 - 'horizontal' 水平布局，可理解为 x 轴和 y 轴位置互换。", + "type": "'default' | 'reverse'", + "originalType": "DirectionType", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "axes", + "description": "笛卡尔坐标系的坐标轴配置", + "type": "ICartesianAxisSpec[]", + "originalType": "ICartesianAxisSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICartesianAxisSpec" + ] + }, + { + "name": "crosshair", + "description": "十字辅助线配置", + "type": "ICartesianCrosshairSpec | ICartesianCrosshairSpec[]", + "originalType": "ICartesianCrosshairSpec | ICartesianCrosshairSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICartesianCrosshairSpec" + ] + }, + { + "name": "markLine", + "description": "参考线配置", + "type": "IMarkLineSpec | IMarkLineSpec[]", + "originalType": "IMarkLineSpec | IMarkLineSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMarkLineSpec" + ] + }, + { + "name": "markArea", + "description": "参考区域配置", + "type": "IMarkAreaSpec | IMarkAreaSpec[]", + "originalType": "IMarkAreaSpec | IMarkAreaSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMarkAreaSpec" + ] + }, + { + "name": "markPoint", + "description": "参考点配置", + "type": "IMarkPointSpec | IMarkPointSpec[]", + "originalType": "IMarkPointSpec | IMarkPointSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMarkPointSpec" + ] + } + ] + }, + "IChartSpec": { + "description": "IChartSpec 接口配置", + "directExtends": [], + "ownProperties": [ + { + "name": "type", + "description": "图表类型", + "type": "string", + "originalType": "string", + "required": true, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "data", + "description": "data 配置", + "type": "IData", + "originalType": "IData", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IData" + ] + }, + { + "name": "width", + "description": "画布宽度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "height", + "description": "画布高度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "autoFit", + "description": "是否自适应容器大小", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "padding", + "description": "图表整体 padding 设置", + "type": "ILayoutPaddingSpec", + "originalType": "ILayoutPaddingSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ILayoutPaddingSpec" + ] + }, + { + "name": "color", + "description": "图表色系配置", + "type": "string[] | Omit, 'id'>", + "originalType": "string[] | Omit, 'id'>", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IVisualSpecScale" + ] + }, + { + "name": "series", + "description": "series 配置", + "type": "ISeriesSpec[]", + "originalType": "ISeriesSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISeriesSpec" + ] + }, + { + "name": "seriesStyle", + "description": "系列样式", + "type": "ISeriesStyle", + "originalType": "ISeriesStyle", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISeriesStyle" + ] + }, + { + "name": "animationThreshold", + "description": "自动关闭动画的阀值，对应的是单系列data的长度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "hover", + "description": "hover 交互", + "type": "boolean | IHoverSpec", + "originalType": "boolean | IHoverSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IHoverSpec" + ] + }, + { + "name": "select", + "description": "select 交互", + "type": "boolean | ISelectSpec", + "originalType": "boolean | ISelectSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISelectSpec" + ] + }, + { + "name": "region", + "description": "region配置", + "type": "RegionSpec[]", + "originalType": "RegionSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "RegionSpec" + ] + }, + { + "name": "title", + "description": "图表标题配置", + "type": "ITitleSpec", + "originalType": "ITitleSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ITitleSpec" + ] + }, + { + "name": "layout", + "description": "自定义布局函数", + "type": "ILayoutSpec", + "originalType": "ILayoutSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ILayoutSpec" + ] + }, + { + "name": "legends", + "description": "图例配置", + "type": "ILegendSpec | ILegendSpec[]", + "originalType": "ILegendSpec | ILegendSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ILegendSpec" + ] + }, + { + "name": "crosshair", + "description": "十字辅助线配置", + "type": "ICrosshairSpec | ICrosshairSpec[]", + "originalType": "ICrosshairSpec | ICrosshairSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICrosshairSpec" + ] + }, + { + "name": "tooltip", + "description": "tooltip配置", + "type": "ITooltipSpec", + "originalType": "ITooltipSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ITooltipSpec" + ] + }, + { + "name": "player", + "description": "播放器配置", + "type": "IPlayer", + "originalType": "IPlayer", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IPlayer" + ] + }, + { + "name": "dataZoom", + "description": "缩略轴配置", + "type": "IDataZoomSpec | IDataZoomSpec[]", + "originalType": "IDataZoomSpec | IDataZoomSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IDataZoomSpec" + ] + }, + { + "name": "scrollBar", + "description": "滚动条配置", + "type": "IScrollBarSpec | IScrollBarSpec[]", + "originalType": "IScrollBarSpec | IScrollBarSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IScrollBarSpec" + ] + }, + { + "name": "brush", + "description": "框选配置", + "type": "IBrushSpec", + "originalType": "IBrushSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IBrushSpec" + ] + }, + { + "name": "scales", + "description": "全局 scale 配置", + "type": "IVisualSpecScale[]", + "originalType": "IVisualSpecScale[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IVisualSpecScale" + ] + }, + { + "name": "customMark", + "description": "自定义mark", + "type": "ICustomMarkSpec[]", + "originalType": "ICustomMarkSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICustomMarkSpec" + ] + }, + { + "name": "axes", + "description": "axes 配置", + "type": "ICommonAxisSpec[]", + "originalType": "ICommonAxisSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICommonAxisSpec" + ] + }, + { + "name": "theme", + "description": "默认主题（支持完整主题对象或者主题名称，主题名称需要提前在 `ThemeManager` 中注册）", + "type": "Omit | string", + "originalType": "Omit | string", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ITheme" + ] + }, + { + "name": "background", + "description": "图表背景色配置，优先级高于构造函数中的 background 配置 自1.11.6版本支持渐变色对象的配置", + "type": "IBackgroundSpec", + "originalType": "IBackgroundSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IBackgroundSpec" + ] + }, + { + "name": "stackInverse", + "description": "堆积时是否逆序", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "stackSort", + "description": "堆积时是否排序", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "media", + "description": "媒体查询配置", + "type": "IMediaQuerySpec", + "originalType": "IMediaQuerySpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMediaQuerySpec" + ] + } + ] + }, + "IChartExtendsSeriesSpec": { + "description": "ILiquidSeriesSpec 的属性（排除 data, morph, stackValue, tooltip）", + "directExtends": [], + "ownProperties": [ + { + "name": "animationAppear", + "description": "入场动画配置", + "type": "'wave' | 'grow' | 'waveGrow' | IAnimationConfig", + "originalType": "IAnimationConfig", + "required": false, + "category": "动画配置", + "isSimple": false, + "dependencies": [ + "IAnimationConfig" + ], + "inheritedFrom": "IAnimationSpec" + }, + { + "name": "animationEnter", + "description": "数据新增动画配置", + "type": "IAnimationConfig", + "originalType": "IAnimationConfig", + "required": false, + "category": "动画配置", + "isSimple": false, + "dependencies": [ + "IAnimationConfig" + ], + "inheritedFrom": "IAnimationSpec" + }, + { + "name": "animationUpdate", + "description": "数据更新动画配置", + "type": "IAnimationConfig", + "originalType": "IAnimationConfig", + "required": false, + "category": "动画配置", + "isSimple": false, + "dependencies": [ + "IAnimationConfig" + ], + "inheritedFrom": "IAnimationSpec" + }, + { + "name": "animationExit", + "description": "数据移除动画配置", + "type": "IAnimationConfig", + "originalType": "IAnimationConfig", + "required": false, + "category": "动画配置", + "isSimple": false, + "dependencies": [ + "IAnimationConfig" + ], + "inheritedFrom": "IAnimationSpec" + }, + { + "name": "type", + "description": "系列类型", + "type": "'liquid'", + "originalType": "'liquid'", + "required": true, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "valueField", + "description": "value字段", + "type": "string", + "originalType": "string", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "maskShape", + "description": "轮廓形状", + "type": "LiquidShapeType", + "originalType": "LiquidShapeType", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "LiquidShapeType" + ] + }, + { + "name": "outlineMargin", + "description": "外轮廓与region边界之间的padding", + "type": "{\n left?: number;\n right?: number;\n top?: number;\n bottom?: number;\n} | number | number[]", + "originalType": "ILiquidPaddingSpec", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "outlinePadding", + "description": "内轮廓与外轮廓之间的padding", + "type": "{\n left?: number;\n right?: number;\n top?: number;\n bottom?: number;\n} | number | number[]", + "originalType": "ILiquidPaddingSpec", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "indicatorSmartInvert", + "description": "是否开启指标智能反色", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "reverse", + "description": "是否反向绘制", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "liquid", + "description": "liquid 配置", + "type": "IMarkSpec", + "originalType": "IMarkSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMarkSpec", + "ILiquidMarkSpec" + ] + }, + { + "name": "liquidBackground", + "description": "liquidBackground 配置", + "type": "IMarkSpec", + "originalType": "IMarkSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMarkSpec", + "IGroupMarkSpec" + ] + }, + { + "name": "liquidOutline", + "description": "liquidOutline 配置", + "type": "IMarkSpec", + "originalType": "IMarkSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMarkSpec", + "ILiquidOutlineSpec" + ] + } + ], + "note": "展开自 Omit - 包含 14 个属性（已展开所有继承）", + "expandedFrom": "ILiquidSeriesSpec", + "omittedKeys": [ + "data", + "morph", + "stackValue", + "tooltip" + ] + } + }, + "timestamp": "2025-08-06T08:47:40.597Z", + "version": "1.0.0", + "sourceFile": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/chart/liquid/interface.d.ts", + "complexTypeDefinitions": { + "ILiquidSeriesSpec": { + "typeName": "ILiquidSeriesSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/series/liquid/interface.d.ts", + "note": "类型 ILiquidSeriesSpec 的定义位置" + }, + "ICartesianAxisSpec": { + "typeName": "ICartesianAxisSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/axis/cartesian/interface/spec.d.ts", + "note": "类型 ICartesianAxisSpec 的定义位置" + }, + "ICartesianCrosshairSpec": { + "typeName": "ICartesianCrosshairSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/crosshair/interface/spec.d.ts", + "note": "类型 ICartesianCrosshairSpec 的定义位置" + }, + "IMarkLineSpec": { + "typeName": "IMarkLineSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/marker/mark-line/interface/spec.d.ts", + "note": "类型 IMarkLineSpec 的定义位置" + }, + "IMarkAreaSpec": { + "typeName": "IMarkAreaSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/marker/mark-area/interface/spec.d.ts", + "note": "类型 IMarkAreaSpec 的定义位置" + }, + "IMarkPointSpec": { + "typeName": "IMarkPointSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/marker/mark-point/interface/spec.d.ts", + "note": "类型 IMarkPointSpec 的定义位置" + }, + "IData": { + "typeName": "IData", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 IData 的定义位置" + }, + "ILayoutPaddingSpec": { + "typeName": "ILayoutPaddingSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/layout.d.ts", + "note": "类型 ILayoutPaddingSpec 的定义位置" + }, + "IVisualSpecScale": { + "typeName": "IVisualSpecScale", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/visual.d.ts", + "note": "类型 IVisualSpecScale 的定义位置" + }, + "ISeriesSpec": { + "typeName": "ISeriesSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 ISeriesSpec 的定义位置" + }, + "ISeriesStyle": { + "typeName": "ISeriesStyle", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/series/interface/common.d.ts", + "note": "类型 ISeriesStyle 的定义位置" + }, + "IHoverSpec": { + "typeName": "IHoverSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/interaction/interface/spec.d.ts", + "note": "类型 IHoverSpec 的定义位置" + }, + "ISelectSpec": { + "typeName": "ISelectSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/interaction/interface/spec.d.ts", + "note": "类型 ISelectSpec 的定义位置" + }, + "RegionSpec": { + "typeName": "RegionSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/region/interface.d.ts", + "note": "类型 RegionSpec 的定义位置" + }, + "ITitleSpec": { + "typeName": "ITitleSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/title/interface/spec.d.ts", + "note": "类型 ITitleSpec 的定义位置" + }, + "ILayoutSpec": { + "typeName": "ILayoutSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/layout/interface.d.ts", + "note": "类型 ILayoutSpec 的定义位置" + }, + "ILegendSpec": { + "typeName": "ILegendSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/legend/interface.d.ts", + "note": "类型 ILegendSpec 的定义位置" + }, + "ICrosshairSpec": { + "typeName": "ICrosshairSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/crosshair/interface/spec.d.ts", + "note": "类型 ICrosshairSpec 的定义位置" + }, + "ITooltipSpec": { + "typeName": "ITooltipSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/tooltip/interface/spec.d.ts", + "note": "类型 ITooltipSpec 的定义位置" + }, + "IPlayer": { + "typeName": "IPlayer", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/player/interface/spec.d.ts", + "note": "类型 IPlayer 的定义位置" + }, + "IDataZoomSpec": { + "typeName": "IDataZoomSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/data-zoom/data-zoom/interface.d.ts", + "note": "类型 IDataZoomSpec 的定义位置" + }, + "IScrollBarSpec": { + "typeName": "IScrollBarSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/data-zoom/scroll-bar/interface.d.ts", + "note": "类型 IScrollBarSpec 的定义位置" + }, + "IBrushSpec": { + "typeName": "IBrushSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/brush/interface.d.ts", + "note": "类型 IBrushSpec 的定义位置" + }, + "ICustomMarkSpec": { + "typeName": "ICustomMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 ICustomMarkSpec 的定义位置" + }, + "ICommonAxisSpec": { + "typeName": "ICommonAxisSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/axis/interface.d.ts", + "note": "类型 ICommonAxisSpec 的定义位置" + }, + "ITheme": { + "typeName": "ITheme", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/theme/interface.d.ts", + "note": "类型 ITheme 的定义位置" + }, + "IBackgroundSpec": { + "typeName": "IBackgroundSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 IBackgroundSpec 的定义位置" + }, + "IMediaQuerySpec": { + "typeName": "IMediaQuerySpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/media-query.d.ts", + "note": "类型 IMediaQuerySpec 的定义位置" + }, + "IAnimationConfig": { + "typeName": "IAnimationConfig", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart/src/typings/spec/common.ts", + "note": "类型 IAnimationConfig 的定义位置" + }, + "LiquidShapeType": { + "typeName": "LiquidShapeType", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/series/liquid/interface.d.ts", + "note": "类型 LiquidShapeType 的定义位置" + }, + "IMarkSpec": { + "typeName": "IMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 IMarkSpec 的定义位置" + }, + "ILiquidMarkSpec": { + "typeName": "ILiquidMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/visual.d.ts", + "note": "类型 ILiquidMarkSpec 的定义位置" + }, + "IGroupMarkSpec": { + "typeName": "IGroupMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/visual.d.ts", + "note": "类型 IGroupMarkSpec 的定义位置" + }, + "ILiquidOutlineSpec": { + "typeName": "ILiquidOutlineSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/mark/interface/mark.d.ts", + "note": "类型 ISymbolMark 的定义位置" + } + }, + "statistics": { + "totalInterfaces": 4, + "totalProperties": 52, + "complexTypes": 34, + "typeFileLocations": 34, + "dependencyTypes": 882 + } +} \ No newline at end of file diff --git a/skills/vchart-development-skill/references/type-meta/map.json b/skills/vchart-development-skill/references/type-meta/map.json new file mode 100644 index 0000000000..546d796abd --- /dev/null +++ b/skills/vchart-development-skill/references/type-meta/map.json @@ -0,0 +1,992 @@ +{ + "typeName": "IMapChartSpec", + "description": "IMapChartSpec 配置规范的完整实现分析", + "inheritanceTree": { + "IMapChartSpec": { + "description": "IMapChartSpec 接口配置", + "directExtends": [ + "IChartSpec", + "IChartExtendsSeriesSpec" + ], + "ownProperties": [ + { + "name": "type", + "description": "type 配置", + "type": "'map'", + "originalType": "'map'", + "required": true, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "series", + "description": "series 配置", + "type": "IMapSeriesSpec[]", + "originalType": "IMapSeriesSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMapSeriesSpec" + ] + } + ] + }, + "IChartSpec": { + "description": "IChartSpec 接口配置", + "directExtends": [], + "ownProperties": [ + { + "name": "type", + "description": "图表类型", + "type": "string", + "originalType": "string", + "required": true, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "data", + "description": "data 配置", + "type": "IData", + "originalType": "IData", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IData" + ] + }, + { + "name": "width", + "description": "画布宽度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "height", + "description": "画布高度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "autoFit", + "description": "是否自适应容器大小", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "padding", + "description": "图表整体 padding 设置", + "type": "ILayoutPaddingSpec", + "originalType": "ILayoutPaddingSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ILayoutPaddingSpec" + ] + }, + { + "name": "color", + "description": "图表色系配置", + "type": "string[] | Omit, 'id'>", + "originalType": "string[] | Omit, 'id'>", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IVisualSpecScale" + ] + }, + { + "name": "series", + "description": "series 配置", + "type": "ISeriesSpec[]", + "originalType": "ISeriesSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISeriesSpec" + ] + }, + { + "name": "seriesStyle", + "description": "系列样式", + "type": "ISeriesStyle", + "originalType": "ISeriesStyle", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISeriesStyle" + ] + }, + { + "name": "animationThreshold", + "description": "自动关闭动画的阀值，对应的是单系列data的长度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "hover", + "description": "hover 交互", + "type": "boolean | IHoverSpec", + "originalType": "boolean | IHoverSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IHoverSpec" + ] + }, + { + "name": "select", + "description": "select 交互", + "type": "boolean | ISelectSpec", + "originalType": "boolean | ISelectSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISelectSpec" + ] + }, + { + "name": "region", + "description": "region配置", + "type": "RegionSpec[]", + "originalType": "RegionSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "RegionSpec" + ] + }, + { + "name": "title", + "description": "图表标题配置", + "type": "ITitleSpec", + "originalType": "ITitleSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ITitleSpec" + ] + }, + { + "name": "layout", + "description": "自定义布局函数", + "type": "ILayoutSpec", + "originalType": "ILayoutSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ILayoutSpec" + ] + }, + { + "name": "legends", + "description": "图例配置", + "type": "ILegendSpec | ILegendSpec[]", + "originalType": "ILegendSpec | ILegendSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ILegendSpec" + ] + }, + { + "name": "crosshair", + "description": "十字辅助线配置", + "type": "ICrosshairSpec | ICrosshairSpec[]", + "originalType": "ICrosshairSpec | ICrosshairSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICrosshairSpec" + ] + }, + { + "name": "tooltip", + "description": "tooltip配置", + "type": "ITooltipSpec", + "originalType": "ITooltipSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ITooltipSpec" + ] + }, + { + "name": "player", + "description": "播放器配置", + "type": "IPlayer", + "originalType": "IPlayer", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IPlayer" + ] + }, + { + "name": "dataZoom", + "description": "缩略轴配置", + "type": "IDataZoomSpec | IDataZoomSpec[]", + "originalType": "IDataZoomSpec | IDataZoomSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IDataZoomSpec" + ] + }, + { + "name": "scrollBar", + "description": "滚动条配置", + "type": "IScrollBarSpec | IScrollBarSpec[]", + "originalType": "IScrollBarSpec | IScrollBarSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IScrollBarSpec" + ] + }, + { + "name": "brush", + "description": "框选配置", + "type": "IBrushSpec", + "originalType": "IBrushSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IBrushSpec" + ] + }, + { + "name": "scales", + "description": "全局 scale 配置", + "type": "IVisualSpecScale[]", + "originalType": "IVisualSpecScale[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IVisualSpecScale" + ] + }, + { + "name": "customMark", + "description": "自定义mark", + "type": "ICustomMarkSpec[]", + "originalType": "ICustomMarkSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICustomMarkSpec" + ] + }, + { + "name": "axes", + "description": "axes 配置", + "type": "ICommonAxisSpec[]", + "originalType": "ICommonAxisSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICommonAxisSpec" + ] + }, + { + "name": "theme", + "description": "默认主题（支持完整主题对象或者主题名称，主题名称需要提前在 `ThemeManager` 中注册）", + "type": "Omit | string", + "originalType": "Omit | string", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ITheme" + ] + }, + { + "name": "background", + "description": "图表背景色配置，优先级高于构造函数中的 background 配置 自1.11.6版本支持渐变色对象的配置", + "type": "IBackgroundSpec", + "originalType": "IBackgroundSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IBackgroundSpec" + ] + }, + { + "name": "stackInverse", + "description": "堆积时是否逆序", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "stackSort", + "description": "堆积时是否排序", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "media", + "description": "媒体查询配置", + "type": "IMediaQuerySpec", + "originalType": "IMediaQuerySpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMediaQuerySpec" + ] + } + ] + }, + "IChartExtendsSeriesSpec": { + "description": "IMapSeriesSpec 的属性（排除 data, morph, stackValue, tooltip）", + "directExtends": [], + "ownProperties": [ + { + "name": "hover", + "description": "图表hover相关交互配置，当值为boolean类型时，表示开启或者关闭该交互 也支持更详细的交互配置", + "type": "IHoverSpec | boolean", + "originalType": "IHoverSpec | boolean", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IHoverSpec" + ], + "inheritedFrom": "ISeriesSpec" + }, + { + "name": "select", + "description": "图表选中相关交互配置，当值为boolean类型时，表示开启或者关闭该交互 也支持更详细的交互配置", + "type": "ISelectSpec | boolean", + "originalType": "ISelectSpec | boolean", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISelectSpec" + ], + "inheritedFrom": "ISeriesSpec" + }, + { + "name": "interactions", + "description": "其他需要按需注册的类型交互", + "type": "IInteractionItemSpec[]", + "originalType": "IInteractionItemSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IInteractionItemSpec" + ], + "inheritedFrom": "ISeriesSpec" + }, + { + "name": "type", + "description": "系列类型", + "type": "'map'", + "originalType": "'map'", + "required": true, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "name", + "description": "系列名称", + "type": "string", + "originalType": "string", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ISeriesSpec" + }, + { + "name": "id", + "description": "数据唯一标识", + "type": "string | number", + "originalType": "StringOrNumber", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ISeriesSpec" + }, + { + "name": "dataIndex", + "description": "系列关联的数据索引", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ISeriesSpec" + }, + { + "name": "dataId", + "description": "系列关联的数据id", + "type": "string | number", + "originalType": "StringOrNumber", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ISeriesSpec" + }, + { + "name": "dataKey", + "description": "dataKey用于绑定数据与Mark的关系, 该配置在动画中非常重要.", + "type": "string | string[] | ((data: Datum, index: number) => string)", + "originalType": "DataKeyType", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ISeriesSpec" + }, + { + "name": "regionIndex", + "description": "系列关联的region索引", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ISeriesSpec" + }, + { + "name": "regionId", + "description": "系列关联的region id", + "type": "string | number", + "originalType": "StringOrNumber", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ISeriesSpec" + }, + { + "name": "seriesField", + "description": "分组字段", + "type": "string", + "originalType": "string", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ISeriesSpec" + }, + { + "name": "seriesStyle", + "description": "系列样式", + "type": "ISeriesStyle", + "originalType": "ISeriesStyle", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISeriesStyle" + ], + "inheritedFrom": "ISeriesSpec" + }, + { + "name": "stack", + "description": "是否对数据进行堆叠处理", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ISeriesSpec" + }, + { + "name": "totalLabel", + "description": "堆叠汇总标签", + "type": "ITotalLabelSpec", + "originalType": "ITotalLabelSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ITotalLabelSpec" + ], + "inheritedFrom": "ISeriesSpec" + }, + { + "name": "percent", + "description": "是否对数据进行百分比处理", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ISeriesSpec" + }, + { + "name": "stackOffsetSilhouette", + "description": "是否围绕中心轴偏移轮廓", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ISeriesSpec" + }, + { + "name": "invalidType", + "description": "非合规数据点连接方式 'break'指在该数据点处断开 'link' 指忽略该点保持连续 'zero' 指该点默认数值为0 'ignore' 指不处理", + "type": "'zero' | 'ignore' | 'link' | 'break'", + "originalType": "IInvalidType", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ISeriesSpec" + }, + { + "name": "animation", + "description": "是否开启动画", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ISeriesSpec" + }, + { + "name": "animationThreshold", + "description": "自动关闭动画的阀值，对应的是单系列data的长度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ISeriesSpec" + }, + { + "name": "support3d", + "description": "是否支持3d视角", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ISeriesSpec" + }, + { + "name": "extensionMark", + "description": "系列的扩展mark，能够获取系列上的数据", + "type": "(IExtensionMarkSpec> | IExtensionGroupMarkSpec)[]", + "originalType": "(IExtensionMarkSpec> | IExtensionGroupMarkSpec)[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IExtensionMarkSpec", + "IExtensionGroupMarkSpec" + ], + "inheritedFrom": "ISeriesSpec" + }, + { + "name": "zIndex", + "description": "今当通过`series`配置的时候，才会生效", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ISeriesSpec" + }, + { + "name": "animationAppear", + "description": "入场动画配置", + "type": "'fadeIn' | IAnimationConfig", + "originalType": "IAnimationConfig", + "required": false, + "category": "动画配置", + "isSimple": false, + "dependencies": [ + "IAnimationConfig" + ], + "inheritedFrom": "IAnimationSpec" + }, + { + "name": "animationEnter", + "description": "数据新增动画配置", + "type": "IAnimationConfig", + "originalType": "IAnimationConfig", + "required": false, + "category": "动画配置", + "isSimple": false, + "dependencies": [ + "IAnimationConfig" + ], + "inheritedFrom": "IAnimationSpec" + }, + { + "name": "animationUpdate", + "description": "数据更新动画配置", + "type": "IAnimationConfig", + "originalType": "IAnimationConfig", + "required": false, + "category": "动画配置", + "isSimple": false, + "dependencies": [ + "IAnimationConfig" + ], + "inheritedFrom": "IAnimationSpec" + }, + { + "name": "animationExit", + "description": "数据移除动画配置", + "type": "IAnimationConfig", + "originalType": "IAnimationConfig", + "required": false, + "category": "动画配置", + "isSimple": false, + "dependencies": [ + "IAnimationConfig" + ], + "inheritedFrom": "IAnimationSpec" + }, + { + "name": "map", + "description": "地图数据源", + "type": "string", + "originalType": "string", + "required": true, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "nameField", + "description": "名称维度", + "type": "string", + "originalType": "string", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "valueField", + "description": "valueField 配置", + "type": "string", + "originalType": "string", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "nameProperty", + "description": "名称映射字段", + "type": "string", + "originalType": "string", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "centroidProperty", + "description": "中心坐标映射字段", + "type": "string", + "originalType": "string", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "nameMap", + "description": "名称映射表", + "type": "{\n [key: string]: string;\n }", + "originalType": "{\n [key: string]: string;\n }", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "area", + "description": "图元配置", + "type": "IMarkSpec>", + "originalType": "IMarkSpec>", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMarkSpec", + "IPathMarkSpec" + ] + }, + { + "name": "defaultFillColor", + "description": "默认填充颜色", + "type": "string", + "originalType": "string", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "showDefaultName", + "description": "是否显示数据中没有的地区名称", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "label", + "description": "标签配置", + "type": "Omit", + "originalType": "Omit", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ILabelSpec" + ] + } + ], + "note": "展开自 Omit - 包含 37 个属性（已展开所有继承）", + "expandedFrom": "IMapSeriesSpec", + "omittedKeys": [ + "data", + "morph", + "stackValue", + "tooltip" + ] + } + }, + "timestamp": "2025-08-06T07:44:04.711Z", + "version": "1.0.0", + "sourceFile": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/chart/map/interface.d.ts", + "complexTypeDefinitions": { + "IMapSeriesSpec": { + "typeName": "IMapSeriesSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/series/map/interface.d.ts", + "note": "类型 IMapSeriesSpec 的定义位置" + }, + "IData": { + "typeName": "IData", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 IData 的定义位置" + }, + "ILayoutPaddingSpec": { + "typeName": "ILayoutPaddingSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/layout.d.ts", + "note": "类型 ILayoutPaddingSpec 的定义位置" + }, + "IVisualSpecScale": { + "typeName": "IVisualSpecScale", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/visual.d.ts", + "note": "类型 IVisualSpecScale 的定义位置" + }, + "ISeriesSpec": { + "typeName": "ISeriesSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 ISeriesSpec 的定义位置" + }, + "ISeriesStyle": { + "typeName": "ISeriesStyle", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/series/interface/common.d.ts", + "note": "类型 ISeriesStyle 的定义位置" + }, + "IHoverSpec": { + "typeName": "IHoverSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/interaction/interface/spec.d.ts", + "note": "类型 IHoverSpec 的定义位置" + }, + "ISelectSpec": { + "typeName": "ISelectSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/interaction/interface/spec.d.ts", + "note": "类型 ISelectSpec 的定义位置" + }, + "RegionSpec": { + "typeName": "RegionSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/region/interface.d.ts", + "note": "类型 RegionSpec 的定义位置" + }, + "ITitleSpec": { + "typeName": "ITitleSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/title/interface/spec.d.ts", + "note": "类型 ITitleSpec 的定义位置" + }, + "ILayoutSpec": { + "typeName": "ILayoutSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/layout/interface.d.ts", + "note": "类型 ILayoutSpec 的定义位置" + }, + "ILegendSpec": { + "typeName": "ILegendSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/legend/interface.d.ts", + "note": "类型 ILegendSpec 的定义位置" + }, + "ICrosshairSpec": { + "typeName": "ICrosshairSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/crosshair/interface/spec.d.ts", + "note": "类型 ICrosshairSpec 的定义位置" + }, + "ITooltipSpec": { + "typeName": "ITooltipSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/tooltip/interface/spec.d.ts", + "note": "类型 ITooltipSpec 的定义位置" + }, + "IPlayer": { + "typeName": "IPlayer", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/player/interface/spec.d.ts", + "note": "类型 IPlayer 的定义位置" + }, + "IDataZoomSpec": { + "typeName": "IDataZoomSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/data-zoom/data-zoom/interface.d.ts", + "note": "类型 IDataZoomSpec 的定义位置" + }, + "IScrollBarSpec": { + "typeName": "IScrollBarSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/data-zoom/scroll-bar/interface.d.ts", + "note": "类型 IScrollBarSpec 的定义位置" + }, + "IBrushSpec": { + "typeName": "IBrushSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/brush/interface.d.ts", + "note": "类型 IBrushSpec 的定义位置" + }, + "ICustomMarkSpec": { + "typeName": "ICustomMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 ICustomMarkSpec 的定义位置" + }, + "ICommonAxisSpec": { + "typeName": "ICommonAxisSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/axis/interface.d.ts", + "note": "类型 ICommonAxisSpec 的定义位置" + }, + "ITheme": { + "typeName": "ITheme", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/theme/interface.d.ts", + "note": "类型 ITheme 的定义位置" + }, + "IBackgroundSpec": { + "typeName": "IBackgroundSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 IBackgroundSpec 的定义位置" + }, + "IMediaQuerySpec": { + "typeName": "IMediaQuerySpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/media-query.d.ts", + "note": "类型 IMediaQuerySpec 的定义位置" + }, + "IInteractionItemSpec": { + "typeName": "IInteractionItemSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/interaction/interface/spec.d.ts", + "note": "类型 IInteractionItemSpec 的定义位置" + }, + "ITotalLabelSpec": { + "typeName": "ITotalLabelSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/label/interface.d.ts", + "note": "类型 ITotalLabelSpec 的定义位置" + }, + "IExtensionMarkSpec": { + "typeName": "IExtensionMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 IExtensionMarkSpec 的定义位置" + }, + "IExtensionGroupMarkSpec": { + "typeName": "IExtensionGroupMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 IExtensionGroupMarkSpec 的定义位置" + }, + "IAnimationConfig": { + "typeName": "IAnimationConfig", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart/src/typings/spec/common.ts", + "note": "类型 IAnimationConfig 的定义位置" + }, + "IMarkSpec": { + "typeName": "IMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 IMarkSpec 的定义位置" + }, + "IPathMarkSpec": { + "typeName": "IPathMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/visual.d.ts", + "note": "类型 IPathMarkSpec 的定义位置" + }, + "ILabelSpec": { + "typeName": "ILabelSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/label/interface.d.ts", + "note": "类型 ILabelSpec 的定义位置" + } + }, + "statistics": { + "totalInterfaces": 3, + "totalProperties": 69, + "complexTypes": 31, + "typeFileLocations": 31, + "dependencyTypes": 850 + } +} \ No newline at end of file diff --git a/skills/vchart-development-skill/references/type-meta/mosaic.json b/skills/vchart-development-skill/references/type-meta/mosaic.json new file mode 100644 index 0000000000..e01cbe467b --- /dev/null +++ b/skills/vchart-development-skill/references/type-meta/mosaic.json @@ -0,0 +1,666 @@ +{ + "typeName": "IMosaicChartSpec", + "description": "IMosaicChartSpec 配置规范的完整实现分析", + "inheritanceTree": { + "IMosaicChartSpec": { + "description": "IMosaicChartSpec 接口配置", + "directExtends": [ + "ICartesianChartSpec", + "IChartExtendsSeriesSpec" + ], + "ownProperties": [ + { + "name": "type", + "description": "图表类型配置", + "type": "'mosaic'", + "originalType": "'mosaic'", + "required": true, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "series", + "description": "系列配置", + "type": "IMosaicSeriesSpec[]", + "originalType": "IMosaicSeriesSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMosaicSeriesSpec" + ] + } + ] + }, + "ICartesianChartSpec": { + "description": "ICartesianChartSpec 接口配置", + "directExtends": [ + "IChartSpec" + ], + "ownProperties": [ + { + "name": "direction", + "description": "图表的方向配置。 - 'vertical' 垂直布局，即常见的直角坐标系布局，x 轴位于底部，y 轴位于左侧。 - 'horizontal' 水平布局，可理解为 x 轴和 y 轴位置互换。", + "type": "'default' | 'reverse'", + "originalType": "DirectionType", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "axes", + "description": "笛卡尔坐标系的坐标轴配置", + "type": "ICartesianAxisSpec[]", + "originalType": "ICartesianAxisSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICartesianAxisSpec" + ] + }, + { + "name": "crosshair", + "description": "十字辅助线配置", + "type": "ICartesianCrosshairSpec | ICartesianCrosshairSpec[]", + "originalType": "ICartesianCrosshairSpec | ICartesianCrosshairSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICartesianCrosshairSpec" + ] + }, + { + "name": "markLine", + "description": "参考线配置", + "type": "IMarkLineSpec | IMarkLineSpec[]", + "originalType": "IMarkLineSpec | IMarkLineSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMarkLineSpec" + ] + }, + { + "name": "markArea", + "description": "参考区域配置", + "type": "IMarkAreaSpec | IMarkAreaSpec[]", + "originalType": "IMarkAreaSpec | IMarkAreaSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMarkAreaSpec" + ] + }, + { + "name": "markPoint", + "description": "参考点配置", + "type": "IMarkPointSpec | IMarkPointSpec[]", + "originalType": "IMarkPointSpec | IMarkPointSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMarkPointSpec" + ] + } + ] + }, + "IChartSpec": { + "description": "IChartSpec 接口配置", + "directExtends": [], + "ownProperties": [ + { + "name": "type", + "description": "图表类型", + "type": "string", + "originalType": "string", + "required": true, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "data", + "description": "data 配置", + "type": "IData", + "originalType": "IData", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IData" + ] + }, + { + "name": "width", + "description": "画布宽度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "height", + "description": "画布高度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "autoFit", + "description": "是否自适应容器大小", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "padding", + "description": "图表整体 padding 设置", + "type": "ILayoutPaddingSpec", + "originalType": "ILayoutPaddingSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ILayoutPaddingSpec" + ] + }, + { + "name": "color", + "description": "图表色系配置", + "type": "string[] | Omit, 'id'>", + "originalType": "string[] | Omit, 'id'>", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IVisualSpecScale" + ] + }, + { + "name": "series", + "description": "series 配置", + "type": "ISeriesSpec[]", + "originalType": "ISeriesSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISeriesSpec" + ] + }, + { + "name": "seriesStyle", + "description": "系列样式", + "type": "ISeriesStyle", + "originalType": "ISeriesStyle", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISeriesStyle" + ] + }, + { + "name": "animationThreshold", + "description": "自动关闭动画的阀值，对应的是单系列data的长度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "hover", + "description": "hover 交互", + "type": "boolean | IHoverSpec", + "originalType": "boolean | IHoverSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IHoverSpec" + ] + }, + { + "name": "select", + "description": "select 交互", + "type": "boolean | ISelectSpec", + "originalType": "boolean | ISelectSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISelectSpec" + ] + }, + { + "name": "region", + "description": "region配置", + "type": "RegionSpec[]", + "originalType": "RegionSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "RegionSpec" + ] + }, + { + "name": "title", + "description": "图表标题配置", + "type": "ITitleSpec", + "originalType": "ITitleSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ITitleSpec" + ] + }, + { + "name": "layout", + "description": "自定义布局函数", + "type": "ILayoutSpec", + "originalType": "ILayoutSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ILayoutSpec" + ] + }, + { + "name": "legends", + "description": "图例配置", + "type": "ILegendSpec | ILegendSpec[]", + "originalType": "ILegendSpec | ILegendSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ILegendSpec" + ] + }, + { + "name": "crosshair", + "description": "十字辅助线配置", + "type": "ICrosshairSpec | ICrosshairSpec[]", + "originalType": "ICrosshairSpec | ICrosshairSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICrosshairSpec" + ] + }, + { + "name": "tooltip", + "description": "tooltip配置", + "type": "ITooltipSpec", + "originalType": "ITooltipSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ITooltipSpec" + ] + }, + { + "name": "player", + "description": "播放器配置", + "type": "IPlayer", + "originalType": "IPlayer", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IPlayer" + ] + }, + { + "name": "dataZoom", + "description": "缩略轴配置", + "type": "IDataZoomSpec | IDataZoomSpec[]", + "originalType": "IDataZoomSpec | IDataZoomSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IDataZoomSpec" + ] + }, + { + "name": "scrollBar", + "description": "滚动条配置", + "type": "IScrollBarSpec | IScrollBarSpec[]", + "originalType": "IScrollBarSpec | IScrollBarSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IScrollBarSpec" + ] + }, + { + "name": "brush", + "description": "框选配置", + "type": "IBrushSpec", + "originalType": "IBrushSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IBrushSpec" + ] + }, + { + "name": "scales", + "description": "全局 scale 配置", + "type": "IVisualSpecScale[]", + "originalType": "IVisualSpecScale[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IVisualSpecScale" + ] + }, + { + "name": "customMark", + "description": "自定义mark", + "type": "ICustomMarkSpec[]", + "originalType": "ICustomMarkSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICustomMarkSpec" + ] + }, + { + "name": "axes", + "description": "axes 配置", + "type": "ICommonAxisSpec[]", + "originalType": "ICommonAxisSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICommonAxisSpec" + ] + }, + { + "name": "theme", + "description": "默认主题（支持完整主题对象或者主题名称，主题名称需要提前在 `ThemeManager` 中注册）", + "type": "Omit | string", + "originalType": "Omit | string", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ITheme" + ] + }, + { + "name": "background", + "description": "图表背景色配置，优先级高于构造函数中的 background 配置 自1.11.6版本支持渐变色对象的配置", + "type": "IBackgroundSpec", + "originalType": "IBackgroundSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IBackgroundSpec" + ] + }, + { + "name": "stackInverse", + "description": "堆积时是否逆序", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "stackSort", + "description": "堆积时是否排序", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "media", + "description": "媒体查询配置", + "type": "IMediaQuerySpec", + "originalType": "IMediaQuerySpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMediaQuerySpec" + ] + } + ] + }, + "IChartExtendsSeriesSpec": { + "description": "IMosaicSeriesSpec 的属性（排除 data, morph, stackValue, tooltip）", + "directExtends": [], + "ownProperties": [ + { + "name": "type", + "description": "系列类型", + "type": "'mosaic'", + "originalType": "'mosaic'", + "required": true, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "label", + "description": "label 配置", + "type": "IMultiLabelSpec & {\n filterByGroup?: {\n field: string;\n type?: 'min' | 'max';\n filter?: (d: any) => boolean;\n };\n position?: Functional<'outside' | 'top' | 'bottom' | 'left' | 'right' | 'inside' | 'inside-top' | 'inside-bottom' | 'inside-right' | 'inside-left' | 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'>;\n }>", + "originalType": "IMultiLabelSpec & {\n filterByGroup?: {\n field: string;\n type?: 'min' | 'max';\n filter?: (d: any) => boolean;\n };\n position?: Functional<'outside' | 'top' | 'bottom' | 'left' | 'right' | 'inside' | 'inside-top' | 'inside-bottom' | 'inside-right' | 'inside-left' | 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'>;\n }>", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMultiLabelSpec", + "ILabelSpec" + ] + }, + { + "name": "bandWidthField", + "description": "柱子尺寸映射字段，如果不声明默认会根据相同维度下的总值占比进行映射 - 条形图方向时自动映射高度 - 竖形图方向时自动映射宽度", + "type": "string", + "originalType": "string", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + } + ], + "note": "展开自 Omit - 包含 3 个属性（已展开所有继承）", + "expandedFrom": "IMosaicSeriesSpec", + "omittedKeys": [ + "data", + "morph", + "stackValue", + "tooltip" + ] + } + }, + "timestamp": "2025-08-06T08:48:55.519Z", + "version": "1.0.0", + "sourceFile": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/chart/mosaic/interface.d.ts", + "complexTypeDefinitions": { + "IMosaicSeriesSpec": { + "typeName": "IMosaicSeriesSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/series/mosaic/interface.d.ts", + "note": "类型 IMosaicSeriesSpec 的定义位置" + }, + "ICartesianAxisSpec": { + "typeName": "ICartesianAxisSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/axis/cartesian/interface/spec.d.ts", + "note": "类型 ICartesianAxisSpec 的定义位置" + }, + "ICartesianCrosshairSpec": { + "typeName": "ICartesianCrosshairSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/crosshair/interface/spec.d.ts", + "note": "类型 ICartesianCrosshairSpec 的定义位置" + }, + "IMarkLineSpec": { + "typeName": "IMarkLineSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/marker/mark-line/interface/spec.d.ts", + "note": "类型 IMarkLineSpec 的定义位置" + }, + "IMarkAreaSpec": { + "typeName": "IMarkAreaSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/marker/mark-area/interface/spec.d.ts", + "note": "类型 IMarkAreaSpec 的定义位置" + }, + "IMarkPointSpec": { + "typeName": "IMarkPointSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/marker/mark-point/interface/spec.d.ts", + "note": "类型 IMarkPointSpec 的定义位置" + }, + "IData": { + "typeName": "IData", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 IData 的定义位置" + }, + "ILayoutPaddingSpec": { + "typeName": "ILayoutPaddingSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/layout.d.ts", + "note": "类型 ILayoutPaddingSpec 的定义位置" + }, + "IVisualSpecScale": { + "typeName": "IVisualSpecScale", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/visual.d.ts", + "note": "类型 IVisualSpecScale 的定义位置" + }, + "ISeriesSpec": { + "typeName": "ISeriesSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 ISeriesSpec 的定义位置" + }, + "ISeriesStyle": { + "typeName": "ISeriesStyle", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/series/interface/common.d.ts", + "note": "类型 ISeriesStyle 的定义位置" + }, + "IHoverSpec": { + "typeName": "IHoverSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/interaction/interface/spec.d.ts", + "note": "类型 IHoverSpec 的定义位置" + }, + "ISelectSpec": { + "typeName": "ISelectSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/interaction/interface/spec.d.ts", + "note": "类型 ISelectSpec 的定义位置" + }, + "RegionSpec": { + "typeName": "RegionSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/region/interface.d.ts", + "note": "类型 RegionSpec 的定义位置" + }, + "ITitleSpec": { + "typeName": "ITitleSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/title/interface/spec.d.ts", + "note": "类型 ITitleSpec 的定义位置" + }, + "ILayoutSpec": { + "typeName": "ILayoutSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/layout/interface.d.ts", + "note": "类型 ILayoutSpec 的定义位置" + }, + "ILegendSpec": { + "typeName": "ILegendSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/legend/interface.d.ts", + "note": "类型 ILegendSpec 的定义位置" + }, + "ICrosshairSpec": { + "typeName": "ICrosshairSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/crosshair/interface/spec.d.ts", + "note": "类型 ICrosshairSpec 的定义位置" + }, + "ITooltipSpec": { + "typeName": "ITooltipSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/tooltip/interface/spec.d.ts", + "note": "类型 ITooltipSpec 的定义位置" + }, + "IPlayer": { + "typeName": "IPlayer", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/player/interface/spec.d.ts", + "note": "类型 IPlayer 的定义位置" + }, + "IDataZoomSpec": { + "typeName": "IDataZoomSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/data-zoom/data-zoom/interface.d.ts", + "note": "类型 IDataZoomSpec 的定义位置" + }, + "IScrollBarSpec": { + "typeName": "IScrollBarSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/data-zoom/scroll-bar/interface.d.ts", + "note": "类型 IScrollBarSpec 的定义位置" + }, + "IBrushSpec": { + "typeName": "IBrushSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/brush/interface.d.ts", + "note": "类型 IBrushSpec 的定义位置" + }, + "ICustomMarkSpec": { + "typeName": "ICustomMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 ICustomMarkSpec 的定义位置" + }, + "ICommonAxisSpec": { + "typeName": "ICommonAxisSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/axis/interface.d.ts", + "note": "类型 ICommonAxisSpec 的定义位置" + }, + "ITheme": { + "typeName": "ITheme", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/theme/interface.d.ts", + "note": "类型 ITheme 的定义位置" + }, + "IBackgroundSpec": { + "typeName": "IBackgroundSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 IBackgroundSpec 的定义位置" + }, + "IMediaQuerySpec": { + "typeName": "IMediaQuerySpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/media-query.d.ts", + "note": "类型 IMediaQuerySpec 的定义位置" + } + }, + "statistics": { + "totalInterfaces": 4, + "totalProperties": 41, + "complexTypes": 28, + "typeFileLocations": 28, + "dependencyTypes": 861 + } +} \ No newline at end of file diff --git a/skills/vchart-development-skill/references/type-meta/pictogram.json b/skills/vchart-development-skill/references/type-meta/pictogram.json new file mode 100644 index 0000000000..50f0dd59e1 --- /dev/null +++ b/skills/vchart-development-skill/references/type-meta/pictogram.json @@ -0,0 +1,522 @@ +{ + "typeName": "IPictogramChartSpec", + "description": "IPictogramChartSpec 配置规范的完整实现分析", + "inheritanceTree": { + "IPictogramChartSpec": { + "description": "IPictogramChartSpec 接口配置", + "directExtends": [ + "IChartSpec", + "IChartExtendsSeriesSpec" + ], + "ownProperties": [ + { + "name": "type", + "description": "type 配置", + "type": "'pictogram'", + "originalType": "'pictogram'", + "required": true, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "series", + "description": "series 配置", + "type": "IPictogramSeriesSpec[]", + "originalType": "IPictogramSeriesSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IPictogramSeriesSpec" + ] + } + ] + }, + "IChartSpec": { + "description": "IChartSpec 接口配置", + "directExtends": [], + "ownProperties": [ + { + "name": "type", + "description": "图表类型", + "type": "string", + "originalType": "string", + "required": true, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "data", + "description": "data 配置", + "type": "IData", + "originalType": "IData", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IData" + ] + }, + { + "name": "width", + "description": "画布宽度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "height", + "description": "画布高度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "autoFit", + "description": "是否自适应容器大小", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "padding", + "description": "图表整体 padding 设置", + "type": "ILayoutPaddingSpec", + "originalType": "ILayoutPaddingSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ILayoutPaddingSpec" + ] + }, + { + "name": "color", + "description": "图表色系配置", + "type": "string[] | Omit, 'id'>", + "originalType": "string[] | Omit, 'id'>", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IVisualSpecScale" + ] + }, + { + "name": "series", + "description": "series 配置", + "type": "ISeriesSpec[]", + "originalType": "ISeriesSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISeriesSpec" + ] + }, + { + "name": "seriesStyle", + "description": "系列样式", + "type": "ISeriesStyle", + "originalType": "ISeriesStyle", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISeriesStyle" + ] + }, + { + "name": "animationThreshold", + "description": "自动关闭动画的阀值，对应的是单系列data的长度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "hover", + "description": "hover 交互", + "type": "boolean | IHoverSpec", + "originalType": "boolean | IHoverSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IHoverSpec" + ] + }, + { + "name": "select", + "description": "select 交互", + "type": "boolean | ISelectSpec", + "originalType": "boolean | ISelectSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISelectSpec" + ] + }, + { + "name": "region", + "description": "region配置", + "type": "RegionSpec[]", + "originalType": "RegionSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "RegionSpec" + ] + }, + { + "name": "title", + "description": "图表标题配置", + "type": "ITitleSpec", + "originalType": "ITitleSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ITitleSpec" + ] + }, + { + "name": "layout", + "description": "自定义布局函数", + "type": "ILayoutSpec", + "originalType": "ILayoutSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ILayoutSpec" + ] + }, + { + "name": "legends", + "description": "图例配置", + "type": "ILegendSpec | ILegendSpec[]", + "originalType": "ILegendSpec | ILegendSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ILegendSpec" + ] + }, + { + "name": "crosshair", + "description": "十字辅助线配置", + "type": "ICrosshairSpec | ICrosshairSpec[]", + "originalType": "ICrosshairSpec | ICrosshairSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICrosshairSpec" + ] + }, + { + "name": "tooltip", + "description": "tooltip配置", + "type": "ITooltipSpec", + "originalType": "ITooltipSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ITooltipSpec" + ] + }, + { + "name": "player", + "description": "播放器配置", + "type": "IPlayer", + "originalType": "IPlayer", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IPlayer" + ] + }, + { + "name": "dataZoom", + "description": "缩略轴配置", + "type": "IDataZoomSpec | IDataZoomSpec[]", + "originalType": "IDataZoomSpec | IDataZoomSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IDataZoomSpec" + ] + }, + { + "name": "scrollBar", + "description": "滚动条配置", + "type": "IScrollBarSpec | IScrollBarSpec[]", + "originalType": "IScrollBarSpec | IScrollBarSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IScrollBarSpec" + ] + }, + { + "name": "brush", + "description": "框选配置", + "type": "IBrushSpec", + "originalType": "IBrushSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IBrushSpec" + ] + }, + { + "name": "scales", + "description": "全局 scale 配置", + "type": "IVisualSpecScale[]", + "originalType": "IVisualSpecScale[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IVisualSpecScale" + ] + }, + { + "name": "customMark", + "description": "自定义mark", + "type": "ICustomMarkSpec[]", + "originalType": "ICustomMarkSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICustomMarkSpec" + ] + }, + { + "name": "axes", + "description": "axes 配置", + "type": "ICommonAxisSpec[]", + "originalType": "ICommonAxisSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICommonAxisSpec" + ] + }, + { + "name": "theme", + "description": "默认主题（支持完整主题对象或者主题名称，主题名称需要提前在 `ThemeManager` 中注册）", + "type": "Omit | string", + "originalType": "Omit | string", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ITheme" + ] + }, + { + "name": "background", + "description": "图表背景色配置，优先级高于构造函数中的 background 配置 自1.11.6版本支持渐变色对象的配置", + "type": "IBackgroundSpec", + "originalType": "IBackgroundSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IBackgroundSpec" + ] + }, + { + "name": "stackInverse", + "description": "堆积时是否逆序", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "stackSort", + "description": "堆积时是否排序", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "media", + "description": "媒体查询配置", + "type": "IMediaQuerySpec", + "originalType": "IMediaQuerySpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMediaQuerySpec" + ] + } + ] + }, + "IChartExtendsSeriesSpec": { + "description": "any 的属性（排除 data, morph, stackValue, tooltip）", + "directExtends": [], + "ownProperties": [], + "note": "展开自 Omit - 基础类型待分析" + } + }, + "timestamp": "2025-08-06T07:44:58.160Z", + "version": "1.0.0", + "sourceFile": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/chart/pictogram/interface.d.ts", + "complexTypeDefinitions": { + "IPictogramSeriesSpec": { + "typeName": "IPictogramSeriesSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/series/pictogram/interface.d.ts", + "note": "类型 IPictogramSeriesSpec 的定义位置" + }, + "IData": { + "typeName": "IData", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 IData 的定义位置" + }, + "ILayoutPaddingSpec": { + "typeName": "ILayoutPaddingSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/layout.d.ts", + "note": "类型 ILayoutPaddingSpec 的定义位置" + }, + "IVisualSpecScale": { + "typeName": "IVisualSpecScale", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/visual.d.ts", + "note": "类型 IVisualSpecScale 的定义位置" + }, + "ISeriesSpec": { + "typeName": "ISeriesSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 ISeriesSpec 的定义位置" + }, + "ISeriesStyle": { + "typeName": "ISeriesStyle", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/series/interface/common.d.ts", + "note": "类型 ISeriesStyle 的定义位置" + }, + "IHoverSpec": { + "typeName": "IHoverSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/interaction/interface/spec.d.ts", + "note": "类型 IHoverSpec 的定义位置" + }, + "ISelectSpec": { + "typeName": "ISelectSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/interaction/interface/spec.d.ts", + "note": "类型 ISelectSpec 的定义位置" + }, + "RegionSpec": { + "typeName": "RegionSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/region/interface.d.ts", + "note": "类型 RegionSpec 的定义位置" + }, + "ITitleSpec": { + "typeName": "ITitleSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/title/interface/spec.d.ts", + "note": "类型 ITitleSpec 的定义位置" + }, + "ILayoutSpec": { + "typeName": "ILayoutSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/layout/interface.d.ts", + "note": "类型 ILayoutSpec 的定义位置" + }, + "ILegendSpec": { + "typeName": "ILegendSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/legend/interface.d.ts", + "note": "类型 ILegendSpec 的定义位置" + }, + "ICrosshairSpec": { + "typeName": "ICrosshairSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/crosshair/interface/spec.d.ts", + "note": "类型 ICrosshairSpec 的定义位置" + }, + "ITooltipSpec": { + "typeName": "ITooltipSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/tooltip/interface/spec.d.ts", + "note": "类型 ITooltipSpec 的定义位置" + }, + "IPlayer": { + "typeName": "IPlayer", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/player/interface/spec.d.ts", + "note": "类型 IPlayer 的定义位置" + }, + "IDataZoomSpec": { + "typeName": "IDataZoomSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/data-zoom/data-zoom/interface.d.ts", + "note": "类型 IDataZoomSpec 的定义位置" + }, + "IScrollBarSpec": { + "typeName": "IScrollBarSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/data-zoom/scroll-bar/interface.d.ts", + "note": "类型 IScrollBarSpec 的定义位置" + }, + "IBrushSpec": { + "typeName": "IBrushSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/brush/interface.d.ts", + "note": "类型 IBrushSpec 的定义位置" + }, + "ICustomMarkSpec": { + "typeName": "ICustomMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 ICustomMarkSpec 的定义位置" + }, + "ICommonAxisSpec": { + "typeName": "ICommonAxisSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/axis/interface.d.ts", + "note": "类型 ICommonAxisSpec 的定义位置" + }, + "ITheme": { + "typeName": "ITheme", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/theme/interface.d.ts", + "note": "类型 ITheme 的定义位置" + }, + "IBackgroundSpec": { + "typeName": "IBackgroundSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 IBackgroundSpec 的定义位置" + }, + "IMediaQuerySpec": { + "typeName": "IMediaQuerySpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/media-query.d.ts", + "note": "类型 IMediaQuerySpec 的定义位置" + } + }, + "statistics": { + "totalInterfaces": 3, + "totalProperties": 32, + "complexTypes": 23, + "typeFileLocations": 23, + "dependencyTypes": 850 + } +} \ No newline at end of file diff --git a/skills/vchart-development-skill/references/type-meta/pie.json b/skills/vchart-development-skill/references/type-meta/pie.json new file mode 100644 index 0000000000..6b0b65f6f9 --- /dev/null +++ b/skills/vchart-development-skill/references/type-meta/pie.json @@ -0,0 +1,1133 @@ +{ + "typeName": "IPieChartSpec", + "description": "IPieChartSpec 配置规范的完整实现分析", + "inheritanceTree": { + "IPieChartSpec": { + "description": "IPieChartSpec 接口配置", + "directExtends": [ + "IChartSpec", + "IChartExtendsSeriesSpec" + ], + "ownProperties": [ + { + "name": "type", + "description": "type 配置", + "type": "'pie'", + "originalType": "'pie'", + "required": true, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "indicator", + "description": "饼图指标卡", + "type": "IIndicatorSpec | IIndicatorSpec[]", + "originalType": "IIndicatorSpec | IIndicatorSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IIndicatorSpec" + ] + } + ] + }, + "IChartSpec": { + "description": "IChartSpec 接口配置", + "directExtends": [], + "ownProperties": [ + { + "name": "type", + "description": "图表类型", + "type": "string", + "originalType": "string", + "required": true, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "data", + "description": "data 配置", + "type": "IData", + "originalType": "IData", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IData" + ] + }, + { + "name": "width", + "description": "画布宽度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "height", + "description": "画布高度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "autoFit", + "description": "是否自适应容器大小", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "padding", + "description": "图表整体 padding 设置", + "type": "ILayoutPaddingSpec", + "originalType": "ILayoutPaddingSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ILayoutPaddingSpec" + ] + }, + { + "name": "color", + "description": "图表色系配置", + "type": "string[] | Omit, 'id'>", + "originalType": "string[] | Omit, 'id'>", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IVisualSpecScale" + ] + }, + { + "name": "series", + "description": "series 配置", + "type": "ISeriesSpec[]", + "originalType": "ISeriesSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISeriesSpec" + ] + }, + { + "name": "seriesStyle", + "description": "系列样式", + "type": "ISeriesStyle", + "originalType": "ISeriesStyle", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISeriesStyle" + ] + }, + { + "name": "animationThreshold", + "description": "自动关闭动画的阀值，对应的是单系列data的长度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "hover", + "description": "hover 交互", + "type": "boolean | IHoverSpec", + "originalType": "boolean | IHoverSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IHoverSpec" + ] + }, + { + "name": "select", + "description": "select 交互", + "type": "boolean | ISelectSpec", + "originalType": "boolean | ISelectSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISelectSpec" + ] + }, + { + "name": "region", + "description": "region配置", + "type": "RegionSpec[]", + "originalType": "RegionSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "RegionSpec" + ] + }, + { + "name": "title", + "description": "图表标题配置", + "type": "ITitleSpec", + "originalType": "ITitleSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ITitleSpec" + ] + }, + { + "name": "layout", + "description": "自定义布局函数", + "type": "ILayoutSpec", + "originalType": "ILayoutSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ILayoutSpec" + ] + }, + { + "name": "legends", + "description": "图例配置", + "type": "ILegendSpec | ILegendSpec[]", + "originalType": "ILegendSpec | ILegendSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ILegendSpec" + ] + }, + { + "name": "crosshair", + "description": "十字辅助线配置", + "type": "ICrosshairSpec | ICrosshairSpec[]", + "originalType": "ICrosshairSpec | ICrosshairSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICrosshairSpec" + ] + }, + { + "name": "tooltip", + "description": "tooltip配置", + "type": "ITooltipSpec", + "originalType": "ITooltipSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ITooltipSpec" + ] + }, + { + "name": "player", + "description": "播放器配置", + "type": "IPlayer", + "originalType": "IPlayer", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IPlayer" + ] + }, + { + "name": "dataZoom", + "description": "缩略轴配置", + "type": "IDataZoomSpec | IDataZoomSpec[]", + "originalType": "IDataZoomSpec | IDataZoomSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IDataZoomSpec" + ] + }, + { + "name": "scrollBar", + "description": "滚动条配置", + "type": "IScrollBarSpec | IScrollBarSpec[]", + "originalType": "IScrollBarSpec | IScrollBarSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IScrollBarSpec" + ] + }, + { + "name": "brush", + "description": "框选配置", + "type": "IBrushSpec", + "originalType": "IBrushSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IBrushSpec" + ] + }, + { + "name": "scales", + "description": "全局 scale 配置", + "type": "IVisualSpecScale[]", + "originalType": "IVisualSpecScale[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IVisualSpecScale" + ] + }, + { + "name": "customMark", + "description": "自定义mark", + "type": "ICustomMarkSpec[]", + "originalType": "ICustomMarkSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICustomMarkSpec" + ] + }, + { + "name": "axes", + "description": "axes 配置", + "type": "ICommonAxisSpec[]", + "originalType": "ICommonAxisSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICommonAxisSpec" + ] + }, + { + "name": "theme", + "description": "默认主题（支持完整主题对象或者主题名称，主题名称需要提前在 `ThemeManager` 中注册）", + "type": "Omit | string", + "originalType": "Omit | string", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ITheme" + ] + }, + { + "name": "background", + "description": "图表背景色配置，优先级高于构造函数中的 background 配置 自1.11.6版本支持渐变色对象的配置", + "type": "IBackgroundSpec", + "originalType": "IBackgroundSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IBackgroundSpec" + ] + }, + { + "name": "stackInverse", + "description": "堆积时是否逆序", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "stackSort", + "description": "堆积时是否排序", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "media", + "description": "媒体查询配置", + "type": "IMediaQuerySpec", + "originalType": "IMediaQuerySpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMediaQuerySpec" + ] + } + ] + }, + "IChartExtendsSeriesSpec": { + "description": "IPieSeriesSpec 的属性（排除 data, morph, stackValue, tooltip）", + "directExtends": [], + "ownProperties": [ + { + "name": "hover", + "description": "图表hover相关交互配置，当值为boolean类型时，表示开启或者关闭该交互 也支持更详细的交互配置", + "type": "IHoverSpec | boolean", + "originalType": "IHoverSpec | boolean", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IHoverSpec" + ], + "inheritedFrom": "IPolarSeriesSpec" + }, + { + "name": "select", + "description": "图表选中相关交互配置，当值为boolean类型时，表示开启或者关闭该交互 也支持更详细的交互配置", + "type": "ISelectSpec | boolean", + "originalType": "ISelectSpec | boolean", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISelectSpec" + ], + "inheritedFrom": "IPolarSeriesSpec" + }, + { + "name": "interactions", + "description": "其他需要按需注册的类型交互", + "type": "IInteractionItemSpec[]", + "originalType": "IInteractionItemSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IInteractionItemSpec" + ], + "inheritedFrom": "IPolarSeriesSpec" + }, + { + "name": "type", + "description": "type 配置", + "type": "'pie'", + "originalType": "'pie'", + "required": true, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "name", + "description": "系列名称", + "type": "string", + "originalType": "string", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IPolarSeriesSpec" + }, + { + "name": "id", + "description": "数据唯一标识", + "type": "string | number", + "originalType": "StringOrNumber", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IPolarSeriesSpec" + }, + { + "name": "dataIndex", + "description": "系列关联的数据索引", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IPolarSeriesSpec" + }, + { + "name": "dataId", + "description": "系列关联的数据id", + "type": "string | number", + "originalType": "StringOrNumber", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IPolarSeriesSpec" + }, + { + "name": "dataKey", + "description": "dataKey用于绑定数据与Mark的关系, 该配置在动画中非常重要.", + "type": "string | string[] | ((data: Datum, index: number) => string)", + "originalType": "DataKeyType", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IPolarSeriesSpec" + }, + { + "name": "regionIndex", + "description": "系列关联的region索引", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IPolarSeriesSpec" + }, + { + "name": "regionId", + "description": "系列关联的region id", + "type": "string | number", + "originalType": "StringOrNumber", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IPolarSeriesSpec" + }, + { + "name": "seriesField", + "description": "分组字段", + "type": "string", + "originalType": "string", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IPolarSeriesSpec" + }, + { + "name": "seriesStyle", + "description": "系列样式", + "type": "ISeriesStyle", + "originalType": "ISeriesStyle", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISeriesStyle" + ], + "inheritedFrom": "IPolarSeriesSpec" + }, + { + "name": "stack", + "description": "是否对数据进行堆叠处理", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IPolarSeriesSpec" + }, + { + "name": "totalLabel", + "description": "堆叠汇总标签", + "type": "ITotalLabelSpec", + "originalType": "ITotalLabelSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ITotalLabelSpec" + ], + "inheritedFrom": "IPolarSeriesSpec" + }, + { + "name": "percent", + "description": "是否对数据进行百分比处理", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IPolarSeriesSpec" + }, + { + "name": "stackOffsetSilhouette", + "description": "是否围绕中心轴偏移轮廓", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IPolarSeriesSpec" + }, + { + "name": "invalidType", + "description": "非合规数据点连接方式 'break'指在该数据点处断开 'link' 指忽略该点保持连续 'zero' 指该点默认数值为0 'ignore' 指不处理", + "type": "'zero' | 'ignore' | 'link' | 'break'", + "originalType": "IInvalidType", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IPolarSeriesSpec" + }, + { + "name": "animation", + "description": "是否开启动画", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IPolarSeriesSpec" + }, + { + "name": "animationThreshold", + "description": "自动关闭动画的阀值，对应的是单系列data的长度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IPolarSeriesSpec" + }, + { + "name": "support3d", + "description": "是否支持3d视角", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IPolarSeriesSpec" + }, + { + "name": "extensionMark", + "description": "系列的扩展mark，能够获取系列上的数据", + "type": "(IExtensionMarkSpec> | IExtensionGroupMarkSpec)[]", + "originalType": "(IExtensionMarkSpec> | IExtensionGroupMarkSpec)[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IExtensionMarkSpec", + "IExtensionGroupMarkSpec" + ], + "inheritedFrom": "IPolarSeriesSpec" + }, + { + "name": "zIndex", + "description": "今当通过`series`配置的时候，才会生效", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IPolarSeriesSpec" + }, + { + "name": "centerX", + "description": "饼图中心点 x 坐标", + "type": "number | IPercent", + "originalType": "number | IPercent", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IPercent" + ] + }, + { + "name": "centerY", + "description": "饼图中心点 y 坐标", + "type": "number | IPercent", + "originalType": "number | IPercent", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IPercent" + ] + }, + { + "name": "outerRadius", + "description": "饼图扇区外半径", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "innerRadius", + "description": "饼图扇区内半径", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "startAngle", + "description": "饼图的起始角度（0 ~ 360）", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "endAngle", + "description": "饼图的结束角度（0 ~ 360）", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "categoryField", + "description": "分类字段", + "type": "string", + "originalType": "string", + "required": true, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "valueField", + "description": "数值字段", + "type": "string", + "originalType": "string", + "required": true, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "radiusField", + "description": "radiusField 配置", + "type": "string | string[]", + "originalType": "string | string[]", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IPolarSeriesSpec" + }, + { + "name": "angleField", + "description": "angleField 配置", + "type": "string | string[]", + "originalType": "string | string[]", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IPolarSeriesSpec" + }, + { + "name": "radius", + "description": "饼图扇区半径", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "sortDataByAxis", + "description": "是否将数据按照数轴排序", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IPolarSeriesSpec" + }, + { + "name": "animationAppear", + "description": "入场动画配置", + "type": "'growAngle' | 'growRadius' | 'fadeIn' | IAnimationConfig", + "originalType": "IAnimationConfig", + "required": false, + "category": "动画配置", + "isSimple": false, + "dependencies": [ + "IAnimationConfig" + ], + "inheritedFrom": "IAnimationSpec" + }, + { + "name": "animationEnter", + "description": "数据新增动画配置", + "type": "IAnimationConfig", + "originalType": "IAnimationConfig", + "required": false, + "category": "动画配置", + "isSimple": false, + "dependencies": [ + "IAnimationConfig" + ], + "inheritedFrom": "IAnimationSpec" + }, + { + "name": "animationUpdate", + "description": "数据更新动画配置", + "type": "IAnimationConfig", + "originalType": "IAnimationConfig", + "required": false, + "category": "动画配置", + "isSimple": false, + "dependencies": [ + "IAnimationConfig" + ], + "inheritedFrom": "IAnimationSpec" + }, + { + "name": "animationExit", + "description": "数据移除动画配置", + "type": "IAnimationConfig", + "originalType": "IAnimationConfig", + "required": false, + "category": "动画配置", + "isSimple": false, + "dependencies": [ + "IAnimationConfig" + ], + "inheritedFrom": "IAnimationSpec" + }, + { + "name": "centerOffset", + "description": "饼图扇区中心偏移", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "cornerRadius", + "description": "饼图扇区圆角半径", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "padAngle", + "description": "扇区之间的间隔角度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "minAngle", + "description": "最小的扇区角度（0 ~ 360），用于防止某个值过小导致扇区太小影响交互。", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "layoutRadius", + "description": "layoutRadius 配置", + "type": "'auto' | number | ((layoutRect: ILayoutRect, center: IPointLike) => number)", + "originalType": "'auto' | number | ((layoutRect: ILayoutRect, center: IPointLike) => number)", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [] + }, + { + "name": "pie", + "description": "pie 配置", + "type": "IMarkSpec", + "originalType": "IMarkSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMarkSpec", + "IArcMarkSpec" + ] + }, + { + "name": "label", + "description": "label 配置", + "type": "IMultiLabelSpec", + "originalType": "IMultiLabelSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMultiLabelSpec", + "IArcLabelSpec" + ] + }, + { + "name": "emptyPlaceholder", + "description": "数据为空时显示的占位图形", + "type": "{\n showEmptyCircle?: boolean;\n emptyCircle?: IMarkSpec;\n }", + "originalType": "{\n showEmptyCircle?: boolean;\n emptyCircle?: IMarkSpec;\n }", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMarkSpec", + "IArcMarkSpec" + ] + }, + { + "name": "showAllZero", + "description": "是否在数据均为0时显示均分扇区。", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "supportNegative", + "description": "是否将负数按照绝对值进行处理。", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + } + ], + "note": "展开自 Omit - 包含 49 个属性（已展开所有继承）", + "expandedFrom": "IPieSeriesSpec", + "omittedKeys": [ + "data", + "morph", + "stackValue", + "tooltip" + ] + } + }, + "timestamp": "2025-08-06T08:50:49.073Z", + "version": "1.0.0", + "sourceFile": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/chart/pie/interface.d.ts", + "complexTypeDefinitions": { + "IIndicatorSpec": { + "typeName": "IIndicatorSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/indicator/interface.d.ts", + "note": "类型 IIndicatorSpec 的定义位置" + }, + "IData": { + "typeName": "IData", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 IData 的定义位置" + }, + "ILayoutPaddingSpec": { + "typeName": "ILayoutPaddingSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/layout.d.ts", + "note": "类型 ILayoutPaddingSpec 的定义位置" + }, + "IVisualSpecScale": { + "typeName": "IVisualSpecScale", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/visual.d.ts", + "note": "类型 IVisualSpecScale 的定义位置" + }, + "ISeriesSpec": { + "typeName": "ISeriesSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 ISeriesSpec 的定义位置" + }, + "ISeriesStyle": { + "typeName": "ISeriesStyle", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/series/interface/common.d.ts", + "note": "类型 ISeriesStyle 的定义位置" + }, + "IHoverSpec": { + "typeName": "IHoverSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/interaction/interface/spec.d.ts", + "note": "类型 IHoverSpec 的定义位置" + }, + "ISelectSpec": { + "typeName": "ISelectSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/interaction/interface/spec.d.ts", + "note": "类型 ISelectSpec 的定义位置" + }, + "RegionSpec": { + "typeName": "RegionSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/region/interface.d.ts", + "note": "类型 RegionSpec 的定义位置" + }, + "ITitleSpec": { + "typeName": "ITitleSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/title/interface/spec.d.ts", + "note": "类型 ITitleSpec 的定义位置" + }, + "ILayoutSpec": { + "typeName": "ILayoutSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/layout/interface.d.ts", + "note": "类型 ILayoutSpec 的定义位置" + }, + "ILegendSpec": { + "typeName": "ILegendSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/legend/interface.d.ts", + "note": "类型 ILegendSpec 的定义位置" + }, + "ICrosshairSpec": { + "typeName": "ICrosshairSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/crosshair/interface/spec.d.ts", + "note": "类型 ICrosshairSpec 的定义位置" + }, + "ITooltipSpec": { + "typeName": "ITooltipSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/tooltip/interface/spec.d.ts", + "note": "类型 ITooltipSpec 的定义位置" + }, + "IPlayer": { + "typeName": "IPlayer", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/player/interface/spec.d.ts", + "note": "类型 IPlayer 的定义位置" + }, + "IDataZoomSpec": { + "typeName": "IDataZoomSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/data-zoom/data-zoom/interface.d.ts", + "note": "类型 IDataZoomSpec 的定义位置" + }, + "IScrollBarSpec": { + "typeName": "IScrollBarSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/data-zoom/scroll-bar/interface.d.ts", + "note": "类型 IScrollBarSpec 的定义位置" + }, + "IBrushSpec": { + "typeName": "IBrushSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/brush/interface.d.ts", + "note": "类型 IBrushSpec 的定义位置" + }, + "ICustomMarkSpec": { + "typeName": "ICustomMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 ICustomMarkSpec 的定义位置" + }, + "ICommonAxisSpec": { + "typeName": "ICommonAxisSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/axis/interface.d.ts", + "note": "类型 ICommonAxisSpec 的定义位置" + }, + "ITheme": { + "typeName": "ITheme", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/theme/interface.d.ts", + "note": "类型 ITheme 的定义位置" + }, + "IBackgroundSpec": { + "typeName": "IBackgroundSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 IBackgroundSpec 的定义位置" + }, + "IMediaQuerySpec": { + "typeName": "IMediaQuerySpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/media-query.d.ts", + "note": "类型 IMediaQuerySpec 的定义位置" + }, + "IInteractionItemSpec": { + "typeName": "IInteractionItemSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/interaction/interface/spec.d.ts", + "note": "类型 IInteractionItemSpec 的定义位置" + }, + "ITotalLabelSpec": { + "typeName": "ITotalLabelSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/label/interface.d.ts", + "note": "类型 ITotalLabelSpec 的定义位置" + }, + "IExtensionMarkSpec": { + "typeName": "IExtensionMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 IExtensionMarkSpec 的定义位置" + }, + "IExtensionGroupMarkSpec": { + "typeName": "IExtensionGroupMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 IExtensionGroupMarkSpec 的定义位置" + }, + "IPercent": { + "typeName": "IPercent", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/layout.d.ts", + "note": "类型 IPercent 的定义位置" + }, + "IAnimationConfig": { + "typeName": "IAnimationConfig", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart/src/typings/spec/common.ts", + "note": "类型 IAnimationConfig 的定义位置" + }, + "IMarkSpec": { + "typeName": "IMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 IMarkSpec 的定义位置" + }, + "IArcMarkSpec": { + "typeName": "IArcMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/visual.d.ts", + "note": "类型 IArcMarkSpec 的定义位置" + }, + "IMultiLabelSpec": { + "typeName": "IMultiLabelSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/label/interface.d.ts", + "note": "类型 IMultiLabelSpec 的定义位置" + }, + "IArcLabelSpec": { + "typeName": "IArcLabelSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/series/pie/interface.d.ts", + "note": "类型 IArcLabelSpec 的定义位置" + } + }, + "statistics": { + "totalInterfaces": 3, + "totalProperties": 81, + "complexTypes": 33, + "typeFileLocations": 33, + "dependencyTypes": 855 + } +} \ No newline at end of file diff --git a/skills/vchart-development-skill/references/type-meta/radar.json b/skills/vchart-development-skill/references/type-meta/radar.json new file mode 100644 index 0000000000..0aa928fa81 --- /dev/null +++ b/skills/vchart-development-skill/references/type-meta/radar.json @@ -0,0 +1,801 @@ +{ + "typeName": "IRadarChartSpec", + "description": "IRadarChartSpec 配置规范的完整实现分析", + "inheritanceTree": { + "IRadarChartSpec": { + "description": "IRadarChartSpec 接口配置", + "directExtends": [ + "IPolarChartSpec", + "IChartExtendsSeriesSpec" + ], + "ownProperties": [ + { + "name": "type", + "description": "type 配置", + "type": "'radar'", + "originalType": "'radar'", + "required": true, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "series", + "description": "series 配置", + "type": "IRadarSeriesSpec[]", + "originalType": "IRadarSeriesSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IRadarSeriesSpec" + ] + } + ] + }, + "IPolarChartSpec": { + "description": "IPolarChartSpec 接口配置", + "directExtends": [ + "IChartSpec" + ], + "ownProperties": [ + { + "name": "axes", + "description": "极坐标系下坐标轴配置，支持半径轴和角度轴。 * `orient: 'angle'` 角度轴 * `orient: 'radius'` 半径轴", + "type": "IPolarAxisSpec[]", + "originalType": "IPolarAxisSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IPolarAxisSpec" + ] + }, + { + "name": "crosshair", + "description": "十字辅助线配置", + "type": "IPolarCrosshairSpec | IPolarCrosshairSpec[]", + "originalType": "IPolarCrosshairSpec | IPolarCrosshairSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IPolarCrosshairSpec" + ] + }, + { + "name": "layoutRadius", + "description": "layoutRadius 配置", + "type": "'auto' | number | ((layoutRect: ILayoutRect, center: IPointLike) => number)", + "originalType": "'auto' | number | ((layoutRect: ILayoutRect, center: IPointLike) => number)", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [] + }, + { + "name": "indicator", + "description": "指标卡配置", + "type": "IIndicatorSpec | IIndicatorSpec[]", + "originalType": "IIndicatorSpec | IIndicatorSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IIndicatorSpec" + ] + } + ] + }, + "IChartSpec": { + "description": "IChartSpec 接口配置", + "directExtends": [], + "ownProperties": [ + { + "name": "type", + "description": "图表类型", + "type": "string", + "originalType": "string", + "required": true, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "data", + "description": "data 配置", + "type": "IData", + "originalType": "IData", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IData" + ] + }, + { + "name": "width", + "description": "画布宽度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "height", + "description": "画布高度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "autoFit", + "description": "是否自适应容器大小", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "padding", + "description": "图表整体 padding 设置", + "type": "ILayoutPaddingSpec", + "originalType": "ILayoutPaddingSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ILayoutPaddingSpec" + ] + }, + { + "name": "color", + "description": "图表色系配置", + "type": "string[] | Omit, 'id'>", + "originalType": "string[] | Omit, 'id'>", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IVisualSpecScale" + ] + }, + { + "name": "series", + "description": "series 配置", + "type": "ISeriesSpec[]", + "originalType": "ISeriesSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISeriesSpec" + ] + }, + { + "name": "seriesStyle", + "description": "系列样式", + "type": "ISeriesStyle", + "originalType": "ISeriesStyle", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISeriesStyle" + ] + }, + { + "name": "animationThreshold", + "description": "自动关闭动画的阀值，对应的是单系列data的长度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "hover", + "description": "hover 交互", + "type": "boolean | IHoverSpec", + "originalType": "boolean | IHoverSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IHoverSpec" + ] + }, + { + "name": "select", + "description": "select 交互", + "type": "boolean | ISelectSpec", + "originalType": "boolean | ISelectSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISelectSpec" + ] + }, + { + "name": "region", + "description": "region配置", + "type": "RegionSpec[]", + "originalType": "RegionSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "RegionSpec" + ] + }, + { + "name": "title", + "description": "图表标题配置", + "type": "ITitleSpec", + "originalType": "ITitleSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ITitleSpec" + ] + }, + { + "name": "layout", + "description": "自定义布局函数", + "type": "ILayoutSpec", + "originalType": "ILayoutSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ILayoutSpec" + ] + }, + { + "name": "legends", + "description": "图例配置", + "type": "ILegendSpec | ILegendSpec[]", + "originalType": "ILegendSpec | ILegendSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ILegendSpec" + ] + }, + { + "name": "crosshair", + "description": "十字辅助线配置", + "type": "ICrosshairSpec | ICrosshairSpec[]", + "originalType": "ICrosshairSpec | ICrosshairSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICrosshairSpec" + ] + }, + { + "name": "tooltip", + "description": "tooltip配置", + "type": "ITooltipSpec", + "originalType": "ITooltipSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ITooltipSpec" + ] + }, + { + "name": "player", + "description": "播放器配置", + "type": "IPlayer", + "originalType": "IPlayer", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IPlayer" + ] + }, + { + "name": "dataZoom", + "description": "缩略轴配置", + "type": "IDataZoomSpec | IDataZoomSpec[]", + "originalType": "IDataZoomSpec | IDataZoomSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IDataZoomSpec" + ] + }, + { + "name": "scrollBar", + "description": "滚动条配置", + "type": "IScrollBarSpec | IScrollBarSpec[]", + "originalType": "IScrollBarSpec | IScrollBarSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IScrollBarSpec" + ] + }, + { + "name": "brush", + "description": "框选配置", + "type": "IBrushSpec", + "originalType": "IBrushSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IBrushSpec" + ] + }, + { + "name": "scales", + "description": "全局 scale 配置", + "type": "IVisualSpecScale[]", + "originalType": "IVisualSpecScale[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IVisualSpecScale" + ] + }, + { + "name": "customMark", + "description": "自定义mark", + "type": "ICustomMarkSpec[]", + "originalType": "ICustomMarkSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICustomMarkSpec" + ] + }, + { + "name": "axes", + "description": "axes 配置", + "type": "ICommonAxisSpec[]", + "originalType": "ICommonAxisSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICommonAxisSpec" + ] + }, + { + "name": "theme", + "description": "默认主题（支持完整主题对象或者主题名称，主题名称需要提前在 `ThemeManager` 中注册）", + "type": "Omit | string", + "originalType": "Omit | string", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ITheme" + ] + }, + { + "name": "background", + "description": "图表背景色配置，优先级高于构造函数中的 background 配置 自1.11.6版本支持渐变色对象的配置", + "type": "IBackgroundSpec", + "originalType": "IBackgroundSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IBackgroundSpec" + ] + }, + { + "name": "stackInverse", + "description": "堆积时是否逆序", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "stackSort", + "description": "堆积时是否排序", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "media", + "description": "媒体查询配置", + "type": "IMediaQuerySpec", + "originalType": "IMediaQuerySpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMediaQuerySpec" + ] + } + ] + }, + "IChartExtendsSeriesSpec": { + "description": "IRadarSeriesSpec 的属性（排除 data, morph, stackValue, tooltip）", + "directExtends": [], + "ownProperties": [ + { + "name": "animationAppear", + "description": "入场动画配置", + "type": "'grow' | 'fadeIn' | 'clipIn' | IAnimationConfig", + "originalType": "IAnimationConfig", + "required": false, + "category": "动画配置", + "isSimple": false, + "dependencies": [ + "IAnimationConfig" + ], + "inheritedFrom": "IAnimationSpec" + }, + { + "name": "animationEnter", + "description": "数据新增动画配置", + "type": "IAnimationConfig", + "originalType": "IAnimationConfig", + "required": false, + "category": "动画配置", + "isSimple": false, + "dependencies": [ + "IAnimationConfig" + ], + "inheritedFrom": "IAnimationSpec" + }, + { + "name": "animationUpdate", + "description": "数据更新动画配置", + "type": "IAnimationConfig", + "originalType": "IAnimationConfig", + "required": false, + "category": "动画配置", + "isSimple": false, + "dependencies": [ + "IAnimationConfig" + ], + "inheritedFrom": "IAnimationSpec" + }, + { + "name": "animationExit", + "description": "数据移除动画配置", + "type": "IAnimationConfig", + "originalType": "IAnimationConfig", + "required": false, + "category": "动画配置", + "isSimple": false, + "dependencies": [ + "IAnimationConfig" + ], + "inheritedFrom": "IAnimationSpec" + }, + { + "name": "pointDis", + "description": "标记点之间的距离，px", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IMarkOverlap" + }, + { + "name": "pointDisMul", + "description": "标记点之间的距离， pointSize 的倍数", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IMarkOverlap" + }, + { + "name": "markOverlap", + "description": "是否允许标记图形相互覆盖", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IMarkOverlap" + }, + { + "name": "type", + "description": "type 配置", + "type": "'radar'", + "originalType": "'radar'", + "required": true, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "point", + "description": "point 配置", + "type": "IMarkSpec", + "originalType": "IMarkSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMarkSpec", + "ISymbolMarkSpec" + ] + }, + { + "name": "line", + "description": "line 配置", + "type": "IMarkSpec", + "originalType": "IMarkSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMarkSpec", + "ILineMarkSpec" + ] + }, + { + "name": "area", + "description": "area 配置", + "type": "IMarkSpec", + "originalType": "IMarkSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMarkSpec", + "IAreaMarkSpec" + ] + }, + { + "name": "label", + "description": "label 配置", + "type": "IMultiLabelSpec", + "originalType": "IMultiLabelSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMultiLabelSpec", + "ILineLikeLabelSpec" + ] + }, + { + "name": "seriesMark", + "description": "系列主 mark 类型配置，该配置会影响图例的展示", + "type": "'point' | 'line' | 'area'", + "originalType": "'point' | 'line' | 'area'", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "activePoint", + "description": "是否使用额外的 activePoint 显示交互点，可以在点隐藏时显示被交互的点", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + } + ], + "note": "展开自 Omit - 包含 14 个属性（已展开所有继承）", + "expandedFrom": "IRadarSeriesSpec", + "omittedKeys": [ + "data", + "morph", + "stackValue", + "tooltip" + ] + } + }, + "timestamp": "2025-08-06T08:52:19.848Z", + "version": "1.0.0", + "sourceFile": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/chart/radar/interface.d.ts", + "complexTypeDefinitions": { + "IRadarSeriesSpec": { + "typeName": "IRadarSeriesSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/series/radar/interface.d.ts", + "note": "类型 IRadarSeriesSpec 的定义位置" + }, + "IPolarAxisSpec": { + "typeName": "IPolarAxisSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/axis/polar/interface/spec.d.ts", + "note": "类型 IPolarAxisSpec 的定义位置" + }, + "IPolarCrosshairSpec": { + "typeName": "IPolarCrosshairSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/crosshair/interface/spec.d.ts", + "note": "类型 IPolarCrosshairSpec 的定义位置" + }, + "IIndicatorSpec": { + "typeName": "IIndicatorSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/indicator/interface.d.ts", + "note": "类型 IIndicatorSpec 的定义位置" + }, + "IData": { + "typeName": "IData", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 IData 的定义位置" + }, + "ILayoutPaddingSpec": { + "typeName": "ILayoutPaddingSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/layout.d.ts", + "note": "类型 ILayoutPaddingSpec 的定义位置" + }, + "IVisualSpecScale": { + "typeName": "IVisualSpecScale", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/visual.d.ts", + "note": "类型 IVisualSpecScale 的定义位置" + }, + "ISeriesSpec": { + "typeName": "ISeriesSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 ISeriesSpec 的定义位置" + }, + "ISeriesStyle": { + "typeName": "ISeriesStyle", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/series/interface/common.d.ts", + "note": "类型 ISeriesStyle 的定义位置" + }, + "IHoverSpec": { + "typeName": "IHoverSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/interaction/interface/spec.d.ts", + "note": "类型 IHoverSpec 的定义位置" + }, + "ISelectSpec": { + "typeName": "ISelectSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/interaction/interface/spec.d.ts", + "note": "类型 ISelectSpec 的定义位置" + }, + "RegionSpec": { + "typeName": "RegionSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/region/interface.d.ts", + "note": "类型 RegionSpec 的定义位置" + }, + "ITitleSpec": { + "typeName": "ITitleSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/title/interface/spec.d.ts", + "note": "类型 ITitleSpec 的定义位置" + }, + "ILayoutSpec": { + "typeName": "ILayoutSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/layout/interface.d.ts", + "note": "类型 ILayoutSpec 的定义位置" + }, + "ILegendSpec": { + "typeName": "ILegendSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/legend/interface.d.ts", + "note": "类型 ILegendSpec 的定义位置" + }, + "ICrosshairSpec": { + "typeName": "ICrosshairSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/crosshair/interface/spec.d.ts", + "note": "类型 ICrosshairSpec 的定义位置" + }, + "ITooltipSpec": { + "typeName": "ITooltipSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/tooltip/interface/spec.d.ts", + "note": "类型 ITooltipSpec 的定义位置" + }, + "IPlayer": { + "typeName": "IPlayer", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/player/interface/spec.d.ts", + "note": "类型 IPlayer 的定义位置" + }, + "IDataZoomSpec": { + "typeName": "IDataZoomSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/data-zoom/data-zoom/interface.d.ts", + "note": "类型 IDataZoomSpec 的定义位置" + }, + "IScrollBarSpec": { + "typeName": "IScrollBarSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/data-zoom/scroll-bar/interface.d.ts", + "note": "类型 IScrollBarSpec 的定义位置" + }, + "IBrushSpec": { + "typeName": "IBrushSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/brush/interface.d.ts", + "note": "类型 IBrushSpec 的定义位置" + }, + "ICustomMarkSpec": { + "typeName": "ICustomMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 ICustomMarkSpec 的定义位置" + }, + "ICommonAxisSpec": { + "typeName": "ICommonAxisSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/axis/interface.d.ts", + "note": "类型 ICommonAxisSpec 的定义位置" + }, + "ITheme": { + "typeName": "ITheme", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/theme/interface.d.ts", + "note": "类型 ITheme 的定义位置" + }, + "IBackgroundSpec": { + "typeName": "IBackgroundSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 IBackgroundSpec 的定义位置" + }, + "IMediaQuerySpec": { + "typeName": "IMediaQuerySpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/media-query.d.ts", + "note": "类型 IMediaQuerySpec 的定义位置" + }, + "IAnimationConfig": { + "typeName": "IAnimationConfig", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart/src/typings/spec/common.ts", + "note": "类型 IAnimationConfig 的定义位置" + }, + "IMarkSpec": { + "typeName": "IMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 IMarkSpec 的定义位置" + }, + "ISymbolMarkSpec": { + "typeName": "ISymbolMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/visual.d.ts", + "note": "类型 ISymbolMarkSpec 的定义位置" + }, + "ILineMarkSpec": { + "typeName": "ILineMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/visual.d.ts", + "note": "类型 ILineMarkSpec 的定义位置" + }, + "IAreaMarkSpec": { + "typeName": "IAreaMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/visual.d.ts", + "note": "类型 IAreaMarkSpec 的定义位置" + }, + "IMultiLabelSpec": { + "typeName": "IMultiLabelSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/label/interface.d.ts", + "note": "类型 IMultiLabelSpec 的定义位置" + }, + "ILineLikeLabelSpec": { + "typeName": "ILineLikeLabelSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/series/mixin/interface.d.ts", + "note": "类型 ILineLikeLabelSpec 的定义位置" + } + }, + "statistics": { + "totalInterfaces": 4, + "totalProperties": 50, + "complexTypes": 33, + "typeFileLocations": 33, + "dependencyTypes": 864 + } +} \ No newline at end of file diff --git a/skills/vchart-development-skill/references/type-meta/rangeArea.json b/skills/vchart-development-skill/references/type-meta/rangeArea.json new file mode 100644 index 0000000000..1c8e985998 --- /dev/null +++ b/skills/vchart-development-skill/references/type-meta/rangeArea.json @@ -0,0 +1,663 @@ +{ + "typeName": "IRangeAreaChartSpec", + "description": "IRangeAreaChartSpec 配置规范的完整实现分析", + "inheritanceTree": { + "IRangeAreaChartSpec": { + "description": "IRangeAreaChartSpec 接口配置", + "directExtends": [ + "ICartesianChartSpec", + "IChartExtendsSeriesSpec" + ], + "ownProperties": [ + { + "name": "type", + "description": "图表类型配置", + "type": "'rangeArea'", + "originalType": "'rangeArea'", + "required": true, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "series", + "description": "系列配置", + "type": "IRangeAreaSeriesSpec[]", + "originalType": "IRangeAreaSeriesSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IRangeAreaSeriesSpec" + ] + } + ] + }, + "ICartesianChartSpec": { + "description": "ICartesianChartSpec 接口配置", + "directExtends": [ + "IChartSpec" + ], + "ownProperties": [ + { + "name": "direction", + "description": "图表的方向配置。 - 'vertical' 垂直布局，即常见的直角坐标系布局，x 轴位于底部，y 轴位于左侧。 - 'horizontal' 水平布局，可理解为 x 轴和 y 轴位置互换。", + "type": "'default' | 'reverse'", + "originalType": "DirectionType", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "axes", + "description": "笛卡尔坐标系的坐标轴配置", + "type": "ICartesianAxisSpec[]", + "originalType": "ICartesianAxisSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICartesianAxisSpec" + ] + }, + { + "name": "crosshair", + "description": "十字辅助线配置", + "type": "ICartesianCrosshairSpec | ICartesianCrosshairSpec[]", + "originalType": "ICartesianCrosshairSpec | ICartesianCrosshairSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICartesianCrosshairSpec" + ] + }, + { + "name": "markLine", + "description": "参考线配置", + "type": "IMarkLineSpec | IMarkLineSpec[]", + "originalType": "IMarkLineSpec | IMarkLineSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMarkLineSpec" + ] + }, + { + "name": "markArea", + "description": "参考区域配置", + "type": "IMarkAreaSpec | IMarkAreaSpec[]", + "originalType": "IMarkAreaSpec | IMarkAreaSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMarkAreaSpec" + ] + }, + { + "name": "markPoint", + "description": "参考点配置", + "type": "IMarkPointSpec | IMarkPointSpec[]", + "originalType": "IMarkPointSpec | IMarkPointSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMarkPointSpec" + ] + } + ] + }, + "IChartSpec": { + "description": "IChartSpec 接口配置", + "directExtends": [], + "ownProperties": [ + { + "name": "type", + "description": "图表类型", + "type": "string", + "originalType": "string", + "required": true, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "data", + "description": "data 配置", + "type": "IData", + "originalType": "IData", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IData" + ] + }, + { + "name": "width", + "description": "画布宽度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "height", + "description": "画布高度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "autoFit", + "description": "是否自适应容器大小", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "padding", + "description": "图表整体 padding 设置", + "type": "ILayoutPaddingSpec", + "originalType": "ILayoutPaddingSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ILayoutPaddingSpec" + ] + }, + { + "name": "color", + "description": "图表色系配置", + "type": "string[] | Omit, 'id'>", + "originalType": "string[] | Omit, 'id'>", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IVisualSpecScale" + ] + }, + { + "name": "series", + "description": "series 配置", + "type": "ISeriesSpec[]", + "originalType": "ISeriesSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISeriesSpec" + ] + }, + { + "name": "seriesStyle", + "description": "系列样式", + "type": "ISeriesStyle", + "originalType": "ISeriesStyle", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISeriesStyle" + ] + }, + { + "name": "animationThreshold", + "description": "自动关闭动画的阀值，对应的是单系列data的长度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "hover", + "description": "hover 交互", + "type": "boolean | IHoverSpec", + "originalType": "boolean | IHoverSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IHoverSpec" + ] + }, + { + "name": "select", + "description": "select 交互", + "type": "boolean | ISelectSpec", + "originalType": "boolean | ISelectSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISelectSpec" + ] + }, + { + "name": "region", + "description": "region配置", + "type": "RegionSpec[]", + "originalType": "RegionSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "RegionSpec" + ] + }, + { + "name": "title", + "description": "图表标题配置", + "type": "ITitleSpec", + "originalType": "ITitleSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ITitleSpec" + ] + }, + { + "name": "layout", + "description": "自定义布局函数", + "type": "ILayoutSpec", + "originalType": "ILayoutSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ILayoutSpec" + ] + }, + { + "name": "legends", + "description": "图例配置", + "type": "ILegendSpec | ILegendSpec[]", + "originalType": "ILegendSpec | ILegendSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ILegendSpec" + ] + }, + { + "name": "crosshair", + "description": "十字辅助线配置", + "type": "ICrosshairSpec | ICrosshairSpec[]", + "originalType": "ICrosshairSpec | ICrosshairSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICrosshairSpec" + ] + }, + { + "name": "tooltip", + "description": "tooltip配置", + "type": "ITooltipSpec", + "originalType": "ITooltipSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ITooltipSpec" + ] + }, + { + "name": "player", + "description": "播放器配置", + "type": "IPlayer", + "originalType": "IPlayer", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IPlayer" + ] + }, + { + "name": "dataZoom", + "description": "缩略轴配置", + "type": "IDataZoomSpec | IDataZoomSpec[]", + "originalType": "IDataZoomSpec | IDataZoomSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IDataZoomSpec" + ] + }, + { + "name": "scrollBar", + "description": "滚动条配置", + "type": "IScrollBarSpec | IScrollBarSpec[]", + "originalType": "IScrollBarSpec | IScrollBarSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IScrollBarSpec" + ] + }, + { + "name": "brush", + "description": "框选配置", + "type": "IBrushSpec", + "originalType": "IBrushSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IBrushSpec" + ] + }, + { + "name": "scales", + "description": "全局 scale 配置", + "type": "IVisualSpecScale[]", + "originalType": "IVisualSpecScale[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IVisualSpecScale" + ] + }, + { + "name": "customMark", + "description": "自定义mark", + "type": "ICustomMarkSpec[]", + "originalType": "ICustomMarkSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICustomMarkSpec" + ] + }, + { + "name": "axes", + "description": "axes 配置", + "type": "ICommonAxisSpec[]", + "originalType": "ICommonAxisSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICommonAxisSpec" + ] + }, + { + "name": "theme", + "description": "默认主题（支持完整主题对象或者主题名称，主题名称需要提前在 `ThemeManager` 中注册）", + "type": "Omit | string", + "originalType": "Omit | string", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ITheme" + ] + }, + { + "name": "background", + "description": "图表背景色配置，优先级高于构造函数中的 background 配置 自1.11.6版本支持渐变色对象的配置", + "type": "IBackgroundSpec", + "originalType": "IBackgroundSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IBackgroundSpec" + ] + }, + { + "name": "stackInverse", + "description": "堆积时是否逆序", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "stackSort", + "description": "堆积时是否排序", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "media", + "description": "媒体查询配置", + "type": "IMediaQuerySpec", + "originalType": "IMediaQuerySpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMediaQuerySpec" + ] + } + ] + }, + "IChartExtendsSeriesSpec": { + "description": "IRangeAreaSeriesSpec 的属性（排除 data, morph, stackValue, tooltip）", + "directExtends": [], + "ownProperties": [ + { + "name": "type", + "description": "系列类型", + "type": "'rangeArea'", + "originalType": "'rangeArea'", + "required": true, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "minField", + "description": "minField 配置", + "type": "string", + "originalType": "string", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "maxField", + "description": "maxField 配置", + "type": "string", + "originalType": "string", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + } + ], + "note": "展开自 Omit - 包含 3 个属性（已展开所有继承）", + "expandedFrom": "IRangeAreaSeriesSpec", + "omittedKeys": [ + "data", + "morph", + "stackValue", + "tooltip" + ] + } + }, + "timestamp": "2025-08-06T07:46:47.031Z", + "version": "1.0.0", + "sourceFile": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/chart/range-area/interface.d.ts", + "complexTypeDefinitions": { + "IRangeAreaSeriesSpec": { + "typeName": "IRangeAreaSeriesSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/series/range-area/interface.d.ts", + "note": "类型 IRangeAreaSeriesSpec 的定义位置" + }, + "ICartesianAxisSpec": { + "typeName": "ICartesianAxisSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/axis/cartesian/interface/spec.d.ts", + "note": "类型 ICartesianAxisSpec 的定义位置" + }, + "ICartesianCrosshairSpec": { + "typeName": "ICartesianCrosshairSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/crosshair/interface/spec.d.ts", + "note": "类型 ICartesianCrosshairSpec 的定义位置" + }, + "IMarkLineSpec": { + "typeName": "IMarkLineSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/marker/mark-line/interface/spec.d.ts", + "note": "类型 IMarkLineSpec 的定义位置" + }, + "IMarkAreaSpec": { + "typeName": "IMarkAreaSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/marker/mark-area/interface/spec.d.ts", + "note": "类型 IMarkAreaSpec 的定义位置" + }, + "IMarkPointSpec": { + "typeName": "IMarkPointSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/marker/mark-point/interface/spec.d.ts", + "note": "类型 IMarkPointSpec 的定义位置" + }, + "IData": { + "typeName": "IData", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 IData 的定义位置" + }, + "ILayoutPaddingSpec": { + "typeName": "ILayoutPaddingSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/layout.d.ts", + "note": "类型 ILayoutPaddingSpec 的定义位置" + }, + "IVisualSpecScale": { + "typeName": "IVisualSpecScale", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/visual.d.ts", + "note": "类型 IVisualSpecScale 的定义位置" + }, + "ISeriesSpec": { + "typeName": "ISeriesSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 ISeriesSpec 的定义位置" + }, + "ISeriesStyle": { + "typeName": "ISeriesStyle", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/series/interface/common.d.ts", + "note": "类型 ISeriesStyle 的定义位置" + }, + "IHoverSpec": { + "typeName": "IHoverSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/interaction/interface/spec.d.ts", + "note": "类型 IHoverSpec 的定义位置" + }, + "ISelectSpec": { + "typeName": "ISelectSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/interaction/interface/spec.d.ts", + "note": "类型 ISelectSpec 的定义位置" + }, + "RegionSpec": { + "typeName": "RegionSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/region/interface.d.ts", + "note": "类型 RegionSpec 的定义位置" + }, + "ITitleSpec": { + "typeName": "ITitleSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/title/interface/spec.d.ts", + "note": "类型 ITitleSpec 的定义位置" + }, + "ILayoutSpec": { + "typeName": "ILayoutSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/layout/interface.d.ts", + "note": "类型 ILayoutSpec 的定义位置" + }, + "ILegendSpec": { + "typeName": "ILegendSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/legend/interface.d.ts", + "note": "类型 ILegendSpec 的定义位置" + }, + "ICrosshairSpec": { + "typeName": "ICrosshairSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/crosshair/interface/spec.d.ts", + "note": "类型 ICrosshairSpec 的定义位置" + }, + "ITooltipSpec": { + "typeName": "ITooltipSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/tooltip/interface/spec.d.ts", + "note": "类型 ITooltipSpec 的定义位置" + }, + "IPlayer": { + "typeName": "IPlayer", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/player/interface/spec.d.ts", + "note": "类型 IPlayer 的定义位置" + }, + "IDataZoomSpec": { + "typeName": "IDataZoomSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/data-zoom/data-zoom/interface.d.ts", + "note": "类型 IDataZoomSpec 的定义位置" + }, + "IScrollBarSpec": { + "typeName": "IScrollBarSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/data-zoom/scroll-bar/interface.d.ts", + "note": "类型 IScrollBarSpec 的定义位置" + }, + "IBrushSpec": { + "typeName": "IBrushSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/brush/interface.d.ts", + "note": "类型 IBrushSpec 的定义位置" + }, + "ICustomMarkSpec": { + "typeName": "ICustomMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 ICustomMarkSpec 的定义位置" + }, + "ICommonAxisSpec": { + "typeName": "ICommonAxisSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/axis/interface.d.ts", + "note": "类型 ICommonAxisSpec 的定义位置" + }, + "ITheme": { + "typeName": "ITheme", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/theme/interface.d.ts", + "note": "类型 ITheme 的定义位置" + }, + "IBackgroundSpec": { + "typeName": "IBackgroundSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 IBackgroundSpec 的定义位置" + }, + "IMediaQuerySpec": { + "typeName": "IMediaQuerySpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/media-query.d.ts", + "note": "类型 IMediaQuerySpec 的定义位置" + } + }, + "statistics": { + "totalInterfaces": 4, + "totalProperties": 41, + "complexTypes": 28, + "typeFileLocations": 28, + "dependencyTypes": 861 + } +} \ No newline at end of file diff --git a/skills/vchart-development-skill/references/type-meta/rangeColumn.json b/skills/vchart-development-skill/references/type-meta/rangeColumn.json new file mode 100644 index 0000000000..898f70cd93 --- /dev/null +++ b/skills/vchart-development-skill/references/type-meta/rangeColumn.json @@ -0,0 +1,753 @@ +{ + "typeName": "IRangeColumnChartSpec", + "description": "IRangeColumnChartSpec 配置规范的完整实现分析", + "inheritanceTree": { + "IRangeColumnChartSpec": { + "description": "IRangeColumnChartSpec 接口配置", + "directExtends": [ + "ICartesianChartSpec", + "IChartExtendsSeriesSpec" + ], + "ownProperties": [ + { + "name": "type", + "description": "图表类型配置", + "type": "'rangeColumn'", + "originalType": "'rangeColumn'", + "required": true, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "series", + "description": "系列配置", + "type": "IRangeColumnSeriesSpec[]", + "originalType": "IRangeColumnSeriesSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IRangeColumnSeriesSpec" + ] + } + ] + }, + "ICartesianChartSpec": { + "description": "ICartesianChartSpec 接口配置", + "directExtends": [ + "IChartSpec" + ], + "ownProperties": [ + { + "name": "direction", + "description": "图表的方向配置。 - 'vertical' 垂直布局，即常见的直角坐标系布局，x 轴位于底部，y 轴位于左侧。 - 'horizontal' 水平布局，可理解为 x 轴和 y 轴位置互换。", + "type": "'default' | 'reverse'", + "originalType": "DirectionType", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "axes", + "description": "笛卡尔坐标系的坐标轴配置", + "type": "ICartesianAxisSpec[]", + "originalType": "ICartesianAxisSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICartesianAxisSpec" + ] + }, + { + "name": "crosshair", + "description": "十字辅助线配置", + "type": "ICartesianCrosshairSpec | ICartesianCrosshairSpec[]", + "originalType": "ICartesianCrosshairSpec | ICartesianCrosshairSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICartesianCrosshairSpec" + ] + }, + { + "name": "markLine", + "description": "参考线配置", + "type": "IMarkLineSpec | IMarkLineSpec[]", + "originalType": "IMarkLineSpec | IMarkLineSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMarkLineSpec" + ] + }, + { + "name": "markArea", + "description": "参考区域配置", + "type": "IMarkAreaSpec | IMarkAreaSpec[]", + "originalType": "IMarkAreaSpec | IMarkAreaSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMarkAreaSpec" + ] + }, + { + "name": "markPoint", + "description": "参考点配置", + "type": "IMarkPointSpec | IMarkPointSpec[]", + "originalType": "IMarkPointSpec | IMarkPointSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMarkPointSpec" + ] + } + ] + }, + "IChartSpec": { + "description": "IChartSpec 接口配置", + "directExtends": [], + "ownProperties": [ + { + "name": "type", + "description": "图表类型", + "type": "string", + "originalType": "string", + "required": true, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "data", + "description": "data 配置", + "type": "IData", + "originalType": "IData", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IData" + ] + }, + { + "name": "width", + "description": "画布宽度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "height", + "description": "画布高度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "autoFit", + "description": "是否自适应容器大小", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "padding", + "description": "图表整体 padding 设置", + "type": "ILayoutPaddingSpec", + "originalType": "ILayoutPaddingSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ILayoutPaddingSpec" + ] + }, + { + "name": "color", + "description": "图表色系配置", + "type": "string[] | Omit, 'id'>", + "originalType": "string[] | Omit, 'id'>", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IVisualSpecScale" + ] + }, + { + "name": "series", + "description": "series 配置", + "type": "ISeriesSpec[]", + "originalType": "ISeriesSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISeriesSpec" + ] + }, + { + "name": "seriesStyle", + "description": "系列样式", + "type": "ISeriesStyle", + "originalType": "ISeriesStyle", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISeriesStyle" + ] + }, + { + "name": "animationThreshold", + "description": "自动关闭动画的阀值，对应的是单系列data的长度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "hover", + "description": "hover 交互", + "type": "boolean | IHoverSpec", + "originalType": "boolean | IHoverSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IHoverSpec" + ] + }, + { + "name": "select", + "description": "select 交互", + "type": "boolean | ISelectSpec", + "originalType": "boolean | ISelectSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISelectSpec" + ] + }, + { + "name": "region", + "description": "region配置", + "type": "RegionSpec[]", + "originalType": "RegionSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "RegionSpec" + ] + }, + { + "name": "title", + "description": "图表标题配置", + "type": "ITitleSpec", + "originalType": "ITitleSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ITitleSpec" + ] + }, + { + "name": "layout", + "description": "自定义布局函数", + "type": "ILayoutSpec", + "originalType": "ILayoutSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ILayoutSpec" + ] + }, + { + "name": "legends", + "description": "图例配置", + "type": "ILegendSpec | ILegendSpec[]", + "originalType": "ILegendSpec | ILegendSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ILegendSpec" + ] + }, + { + "name": "crosshair", + "description": "十字辅助线配置", + "type": "ICrosshairSpec | ICrosshairSpec[]", + "originalType": "ICrosshairSpec | ICrosshairSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICrosshairSpec" + ] + }, + { + "name": "tooltip", + "description": "tooltip配置", + "type": "ITooltipSpec", + "originalType": "ITooltipSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ITooltipSpec" + ] + }, + { + "name": "player", + "description": "播放器配置", + "type": "IPlayer", + "originalType": "IPlayer", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IPlayer" + ] + }, + { + "name": "dataZoom", + "description": "缩略轴配置", + "type": "IDataZoomSpec | IDataZoomSpec[]", + "originalType": "IDataZoomSpec | IDataZoomSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IDataZoomSpec" + ] + }, + { + "name": "scrollBar", + "description": "滚动条配置", + "type": "IScrollBarSpec | IScrollBarSpec[]", + "originalType": "IScrollBarSpec | IScrollBarSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IScrollBarSpec" + ] + }, + { + "name": "brush", + "description": "框选配置", + "type": "IBrushSpec", + "originalType": "IBrushSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IBrushSpec" + ] + }, + { + "name": "scales", + "description": "全局 scale 配置", + "type": "IVisualSpecScale[]", + "originalType": "IVisualSpecScale[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IVisualSpecScale" + ] + }, + { + "name": "customMark", + "description": "自定义mark", + "type": "ICustomMarkSpec[]", + "originalType": "ICustomMarkSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICustomMarkSpec" + ] + }, + { + "name": "axes", + "description": "axes 配置", + "type": "ICommonAxisSpec[]", + "originalType": "ICommonAxisSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICommonAxisSpec" + ] + }, + { + "name": "theme", + "description": "默认主题（支持完整主题对象或者主题名称，主题名称需要提前在 `ThemeManager` 中注册）", + "type": "Omit | string", + "originalType": "Omit | string", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ITheme" + ] + }, + { + "name": "background", + "description": "图表背景色配置，优先级高于构造函数中的 background 配置 自1.11.6版本支持渐变色对象的配置", + "type": "IBackgroundSpec", + "originalType": "IBackgroundSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IBackgroundSpec" + ] + }, + { + "name": "stackInverse", + "description": "堆积时是否逆序", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "stackSort", + "description": "堆积时是否排序", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "media", + "description": "媒体查询配置", + "type": "IMediaQuerySpec", + "originalType": "IMediaQuerySpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMediaQuerySpec" + ] + } + ] + }, + "IChartExtendsSeriesSpec": { + "description": "IRangeColumnSeriesSpec 的属性（排除 data, morph, stackValue, tooltip）", + "directExtends": [], + "ownProperties": [ + { + "name": "animationAppear", + "description": "入场动画配置", + "type": "'fadeIn' | 'grow' | IAnimationConfig", + "originalType": "IAnimationConfig", + "required": false, + "category": "动画配置", + "isSimple": false, + "dependencies": [ + "IAnimationConfig" + ], + "inheritedFrom": "IAnimationSpec" + }, + { + "name": "animationEnter", + "description": "数据新增动画配置", + "type": "IAnimationConfig", + "originalType": "IAnimationConfig", + "required": false, + "category": "动画配置", + "isSimple": false, + "dependencies": [ + "IAnimationConfig" + ], + "inheritedFrom": "IAnimationSpec" + }, + { + "name": "animationUpdate", + "description": "数据更新动画配置", + "type": "IAnimationConfig", + "originalType": "IAnimationConfig", + "required": false, + "category": "动画配置", + "isSimple": false, + "dependencies": [ + "IAnimationConfig" + ], + "inheritedFrom": "IAnimationSpec" + }, + { + "name": "animationExit", + "description": "数据移除动画配置", + "type": "IAnimationConfig", + "originalType": "IAnimationConfig", + "required": false, + "category": "动画配置", + "isSimple": false, + "dependencies": [ + "IAnimationConfig" + ], + "inheritedFrom": "IAnimationSpec" + }, + { + "name": "type", + "description": "系列类型", + "type": "'rangeColumn'", + "originalType": "'rangeColumn'", + "required": true, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "minField", + "description": "minField 配置", + "type": "string", + "originalType": "string", + "required": true, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "maxField", + "description": "maxField 配置", + "type": "string", + "originalType": "string", + "required": true, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "bar", + "description": "bar 配置", + "type": "IMarkSpec", + "originalType": "IMarkSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMarkSpec", + "IRectMarkSpec" + ] + }, + { + "name": "label", + "description": "label 配置", + "type": "Partial & {\n position?: PositionEnum;\n [SeriesMarkNameEnum.minLabel]?: IMarkSpec & {\n visible?: boolean;\n position?: keyof typeof minMaxPositionEnum;\n offset?: number;\n formatMethod?: IFormatMethod<[text: string | string[], datum?: any]>;\n };\n [SeriesMarkNameEnum.maxLabel]?: IMarkSpec & {\n visible?: boolean;\n position?: minMaxPositionEnum;\n offset?: number;\n formatMethod?: IFormatMethod<[text: string | string[], datum?: any]>;\n };\n }", + "originalType": "Partial & {\n position?: PositionEnum;\n [SeriesMarkNameEnum.minLabel]?: IMarkSpec & {\n visible?: boolean;\n position?: keyof typeof minMaxPositionEnum;\n offset?: number;\n formatMethod?: IFormatMethod<[text: string | string[], datum?: any]>;\n };\n [SeriesMarkNameEnum.maxLabel]?: IMarkSpec & {\n visible?: boolean;\n position?: minMaxPositionEnum;\n offset?: number;\n formatMethod?: IFormatMethod<[text: string | string[], datum?: any]>;\n };\n }", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [] + } + ], + "note": "展开自 Omit - 包含 9 个属性（已展开所有继承）", + "expandedFrom": "IRangeColumnSeriesSpec", + "omittedKeys": [ + "data", + "morph", + "stackValue", + "tooltip" + ] + } + }, + "timestamp": "2025-08-06T08:53:47.382Z", + "version": "1.0.0", + "sourceFile": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/chart/range-column/interface.d.ts", + "complexTypeDefinitions": { + "IRangeColumnSeriesSpec": { + "typeName": "IRangeColumnSeriesSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/series/range-column/interface.d.ts", + "note": "类型 IRangeColumnSeriesSpec 的定义位置" + }, + "ICartesianAxisSpec": { + "typeName": "ICartesianAxisSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/axis/cartesian/interface/spec.d.ts", + "note": "类型 ICartesianAxisSpec 的定义位置" + }, + "ICartesianCrosshairSpec": { + "typeName": "ICartesianCrosshairSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/crosshair/interface/spec.d.ts", + "note": "类型 ICartesianCrosshairSpec 的定义位置" + }, + "IMarkLineSpec": { + "typeName": "IMarkLineSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/marker/mark-line/interface/spec.d.ts", + "note": "类型 IMarkLineSpec 的定义位置" + }, + "IMarkAreaSpec": { + "typeName": "IMarkAreaSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/marker/mark-area/interface/spec.d.ts", + "note": "类型 IMarkAreaSpec 的定义位置" + }, + "IMarkPointSpec": { + "typeName": "IMarkPointSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/marker/mark-point/interface/spec.d.ts", + "note": "类型 IMarkPointSpec 的定义位置" + }, + "IData": { + "typeName": "IData", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 IData 的定义位置" + }, + "ILayoutPaddingSpec": { + "typeName": "ILayoutPaddingSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/layout.d.ts", + "note": "类型 ILayoutPaddingSpec 的定义位置" + }, + "IVisualSpecScale": { + "typeName": "IVisualSpecScale", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/visual.d.ts", + "note": "类型 IVisualSpecScale 的定义位置" + }, + "ISeriesSpec": { + "typeName": "ISeriesSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 ISeriesSpec 的定义位置" + }, + "ISeriesStyle": { + "typeName": "ISeriesStyle", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/series/interface/common.d.ts", + "note": "类型 ISeriesStyle 的定义位置" + }, + "IHoverSpec": { + "typeName": "IHoverSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/interaction/interface/spec.d.ts", + "note": "类型 IHoverSpec 的定义位置" + }, + "ISelectSpec": { + "typeName": "ISelectSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/interaction/interface/spec.d.ts", + "note": "类型 ISelectSpec 的定义位置" + }, + "RegionSpec": { + "typeName": "RegionSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/region/interface.d.ts", + "note": "类型 RegionSpec 的定义位置" + }, + "ITitleSpec": { + "typeName": "ITitleSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/title/interface/spec.d.ts", + "note": "类型 ITitleSpec 的定义位置" + }, + "ILayoutSpec": { + "typeName": "ILayoutSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/layout/interface.d.ts", + "note": "类型 ILayoutSpec 的定义位置" + }, + "ILegendSpec": { + "typeName": "ILegendSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/legend/interface.d.ts", + "note": "类型 ILegendSpec 的定义位置" + }, + "ICrosshairSpec": { + "typeName": "ICrosshairSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/crosshair/interface/spec.d.ts", + "note": "类型 ICrosshairSpec 的定义位置" + }, + "ITooltipSpec": { + "typeName": "ITooltipSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/tooltip/interface/spec.d.ts", + "note": "类型 ITooltipSpec 的定义位置" + }, + "IPlayer": { + "typeName": "IPlayer", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/player/interface/spec.d.ts", + "note": "类型 IPlayer 的定义位置" + }, + "IDataZoomSpec": { + "typeName": "IDataZoomSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/data-zoom/data-zoom/interface.d.ts", + "note": "类型 IDataZoomSpec 的定义位置" + }, + "IScrollBarSpec": { + "typeName": "IScrollBarSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/data-zoom/scroll-bar/interface.d.ts", + "note": "类型 IScrollBarSpec 的定义位置" + }, + "IBrushSpec": { + "typeName": "IBrushSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/brush/interface.d.ts", + "note": "类型 IBrushSpec 的定义位置" + }, + "ICustomMarkSpec": { + "typeName": "ICustomMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 ICustomMarkSpec 的定义位置" + }, + "ICommonAxisSpec": { + "typeName": "ICommonAxisSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/axis/interface.d.ts", + "note": "类型 ICommonAxisSpec 的定义位置" + }, + "ITheme": { + "typeName": "ITheme", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/theme/interface.d.ts", + "note": "类型 ITheme 的定义位置" + }, + "IBackgroundSpec": { + "typeName": "IBackgroundSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 IBackgroundSpec 的定义位置" + }, + "IMediaQuerySpec": { + "typeName": "IMediaQuerySpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/media-query.d.ts", + "note": "类型 IMediaQuerySpec 的定义位置" + }, + "IAnimationConfig": { + "typeName": "IAnimationConfig", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart/src/typings/spec/common.ts", + "note": "类型 IAnimationConfig 的定义位置" + }, + "IMarkSpec": { + "typeName": "IMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 IMarkSpec 的定义位置" + }, + "IRectMarkSpec": { + "typeName": "IRectMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/visual.d.ts", + "note": "类型 IRectMarkSpec 的定义位置" + } + }, + "statistics": { + "totalInterfaces": 4, + "totalProperties": 47, + "complexTypes": 31, + "typeFileLocations": 31, + "dependencyTypes": 861 + } +} \ No newline at end of file diff --git a/skills/vchart-development-skill/references/type-meta/rose.json b/skills/vchart-development-skill/references/type-meta/rose.json new file mode 100644 index 0000000000..39a81bc628 --- /dev/null +++ b/skills/vchart-development-skill/references/type-meta/rose.json @@ -0,0 +1,732 @@ +{ + "typeName": "IRoseChartSpec", + "description": "IRoseChartSpec 配置规范的完整实现分析", + "inheritanceTree": { + "IRoseChartSpec": { + "description": "IRoseChartSpec 接口配置", + "directExtends": [ + "IPolarChartSpec", + "IChartExtendsSeriesSpec" + ], + "ownProperties": [ + { + "name": "type", + "description": "type 配置", + "type": "'rose'", + "originalType": "'rose'", + "required": true, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "series", + "description": "series 配置", + "type": "IRoseSeriesSpec[]", + "originalType": "IRoseSeriesSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IRoseSeriesSpec" + ] + } + ] + }, + "IPolarChartSpec": { + "description": "IPolarChartSpec 接口配置", + "directExtends": [ + "IChartSpec" + ], + "ownProperties": [ + { + "name": "axes", + "description": "极坐标系下坐标轴配置，支持半径轴和角度轴。 * `orient: 'angle'` 角度轴 * `orient: 'radius'` 半径轴", + "type": "IPolarAxisSpec[]", + "originalType": "IPolarAxisSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IPolarAxisSpec" + ] + }, + { + "name": "crosshair", + "description": "十字辅助线配置", + "type": "IPolarCrosshairSpec | IPolarCrosshairSpec[]", + "originalType": "IPolarCrosshairSpec | IPolarCrosshairSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IPolarCrosshairSpec" + ] + }, + { + "name": "layoutRadius", + "description": "layoutRadius 配置", + "type": "'auto' | number | ((layoutRect: ILayoutRect, center: IPointLike) => number)", + "originalType": "'auto' | number | ((layoutRect: ILayoutRect, center: IPointLike) => number)", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [] + }, + { + "name": "indicator", + "description": "指标卡配置", + "type": "IIndicatorSpec | IIndicatorSpec[]", + "originalType": "IIndicatorSpec | IIndicatorSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IIndicatorSpec" + ] + } + ] + }, + "IChartSpec": { + "description": "IChartSpec 接口配置", + "directExtends": [], + "ownProperties": [ + { + "name": "type", + "description": "图表类型", + "type": "string", + "originalType": "string", + "required": true, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "data", + "description": "data 配置", + "type": "IData", + "originalType": "IData", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IData" + ] + }, + { + "name": "width", + "description": "画布宽度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "height", + "description": "画布高度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "autoFit", + "description": "是否自适应容器大小", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "padding", + "description": "图表整体 padding 设置", + "type": "ILayoutPaddingSpec", + "originalType": "ILayoutPaddingSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ILayoutPaddingSpec" + ] + }, + { + "name": "color", + "description": "图表色系配置", + "type": "string[] | Omit, 'id'>", + "originalType": "string[] | Omit, 'id'>", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IVisualSpecScale" + ] + }, + { + "name": "series", + "description": "series 配置", + "type": "ISeriesSpec[]", + "originalType": "ISeriesSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISeriesSpec" + ] + }, + { + "name": "seriesStyle", + "description": "系列样式", + "type": "ISeriesStyle", + "originalType": "ISeriesStyle", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISeriesStyle" + ] + }, + { + "name": "animationThreshold", + "description": "自动关闭动画的阀值，对应的是单系列data的长度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "hover", + "description": "hover 交互", + "type": "boolean | IHoverSpec", + "originalType": "boolean | IHoverSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IHoverSpec" + ] + }, + { + "name": "select", + "description": "select 交互", + "type": "boolean | ISelectSpec", + "originalType": "boolean | ISelectSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISelectSpec" + ] + }, + { + "name": "region", + "description": "region配置", + "type": "RegionSpec[]", + "originalType": "RegionSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "RegionSpec" + ] + }, + { + "name": "title", + "description": "图表标题配置", + "type": "ITitleSpec", + "originalType": "ITitleSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ITitleSpec" + ] + }, + { + "name": "layout", + "description": "自定义布局函数", + "type": "ILayoutSpec", + "originalType": "ILayoutSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ILayoutSpec" + ] + }, + { + "name": "legends", + "description": "图例配置", + "type": "ILegendSpec | ILegendSpec[]", + "originalType": "ILegendSpec | ILegendSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ILegendSpec" + ] + }, + { + "name": "crosshair", + "description": "十字辅助线配置", + "type": "ICrosshairSpec | ICrosshairSpec[]", + "originalType": "ICrosshairSpec | ICrosshairSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICrosshairSpec" + ] + }, + { + "name": "tooltip", + "description": "tooltip配置", + "type": "ITooltipSpec", + "originalType": "ITooltipSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ITooltipSpec" + ] + }, + { + "name": "player", + "description": "播放器配置", + "type": "IPlayer", + "originalType": "IPlayer", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IPlayer" + ] + }, + { + "name": "dataZoom", + "description": "缩略轴配置", + "type": "IDataZoomSpec | IDataZoomSpec[]", + "originalType": "IDataZoomSpec | IDataZoomSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IDataZoomSpec" + ] + }, + { + "name": "scrollBar", + "description": "滚动条配置", + "type": "IScrollBarSpec | IScrollBarSpec[]", + "originalType": "IScrollBarSpec | IScrollBarSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IScrollBarSpec" + ] + }, + { + "name": "brush", + "description": "框选配置", + "type": "IBrushSpec", + "originalType": "IBrushSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IBrushSpec" + ] + }, + { + "name": "scales", + "description": "全局 scale 配置", + "type": "IVisualSpecScale[]", + "originalType": "IVisualSpecScale[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IVisualSpecScale" + ] + }, + { + "name": "customMark", + "description": "自定义mark", + "type": "ICustomMarkSpec[]", + "originalType": "ICustomMarkSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICustomMarkSpec" + ] + }, + { + "name": "axes", + "description": "axes 配置", + "type": "ICommonAxisSpec[]", + "originalType": "ICommonAxisSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICommonAxisSpec" + ] + }, + { + "name": "theme", + "description": "默认主题（支持完整主题对象或者主题名称，主题名称需要提前在 `ThemeManager` 中注册）", + "type": "Omit | string", + "originalType": "Omit | string", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ITheme" + ] + }, + { + "name": "background", + "description": "图表背景色配置，优先级高于构造函数中的 background 配置 自1.11.6版本支持渐变色对象的配置", + "type": "IBackgroundSpec", + "originalType": "IBackgroundSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IBackgroundSpec" + ] + }, + { + "name": "stackInverse", + "description": "堆积时是否逆序", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "stackSort", + "description": "堆积时是否排序", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "media", + "description": "媒体查询配置", + "type": "IMediaQuerySpec", + "originalType": "IMediaQuerySpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMediaQuerySpec" + ] + } + ] + }, + "IChartExtendsSeriesSpec": { + "description": "IRoseSeriesSpec 的属性（排除 data, morph, stackValue, tooltip）", + "directExtends": [], + "ownProperties": [ + { + "name": "animationAppear", + "description": "入场动画配置", + "type": "'growAngle' | 'growRadius' | 'fadeIn' | IAnimationConfig", + "originalType": "IAnimationConfig", + "required": false, + "category": "动画配置", + "isSimple": false, + "dependencies": [ + "IAnimationConfig" + ], + "inheritedFrom": "IAnimationSpec" + }, + { + "name": "animationEnter", + "description": "数据新增动画配置", + "type": "IAnimationConfig", + "originalType": "IAnimationConfig", + "required": false, + "category": "动画配置", + "isSimple": false, + "dependencies": [ + "IAnimationConfig" + ], + "inheritedFrom": "IAnimationSpec" + }, + { + "name": "animationUpdate", + "description": "数据更新动画配置", + "type": "IAnimationConfig", + "originalType": "IAnimationConfig", + "required": false, + "category": "动画配置", + "isSimple": false, + "dependencies": [ + "IAnimationConfig" + ], + "inheritedFrom": "IAnimationSpec" + }, + { + "name": "animationExit", + "description": "数据移除动画配置", + "type": "IAnimationConfig", + "originalType": "IAnimationConfig", + "required": false, + "category": "动画配置", + "isSimple": false, + "dependencies": [ + "IAnimationConfig" + ], + "inheritedFrom": "IAnimationSpec" + }, + { + "name": "type", + "description": "type 配置", + "type": "'rose'", + "originalType": "'rose'", + "required": true, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "categoryField", + "description": "分类字段", + "type": "string | string[]", + "originalType": "string | string[]", + "required": true, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "valueField", + "description": "数值字段", + "type": "string | string[]", + "originalType": "string | string[]", + "required": true, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "rose", + "description": "rose 配置", + "type": "IMarkSpec", + "originalType": "IMarkSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMarkSpec", + "IArcMarkSpec" + ] + }, + { + "name": "label", + "description": "label 配置", + "type": "IMultiLabelSpec", + "originalType": "IMultiLabelSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMultiLabelSpec", + "IArcLabelSpec" + ] + } + ], + "note": "展开自 Omit - 包含 9 个属性（已展开所有继承）", + "expandedFrom": "IRoseSeriesSpec", + "omittedKeys": [ + "data", + "morph", + "stackValue", + "tooltip" + ] + } + }, + "timestamp": "2025-08-06T07:47:40.170Z", + "version": "1.0.0", + "sourceFile": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/chart/rose/interface.d.ts", + "complexTypeDefinitions": { + "IRoseSeriesSpec": { + "typeName": "IRoseSeriesSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/series/rose/interface.d.ts", + "note": "类型 IRoseSeriesSpec 的定义位置" + }, + "IPolarAxisSpec": { + "typeName": "IPolarAxisSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/axis/polar/interface/spec.d.ts", + "note": "类型 IPolarAxisSpec 的定义位置" + }, + "IPolarCrosshairSpec": { + "typeName": "IPolarCrosshairSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/crosshair/interface/spec.d.ts", + "note": "类型 IPolarCrosshairSpec 的定义位置" + }, + "IIndicatorSpec": { + "typeName": "IIndicatorSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/indicator/interface.d.ts", + "note": "类型 IIndicatorSpec 的定义位置" + }, + "IData": { + "typeName": "IData", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 IData 的定义位置" + }, + "ILayoutPaddingSpec": { + "typeName": "ILayoutPaddingSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/layout.d.ts", + "note": "类型 ILayoutPaddingSpec 的定义位置" + }, + "IVisualSpecScale": { + "typeName": "IVisualSpecScale", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/visual.d.ts", + "note": "类型 IVisualSpecScale 的定义位置" + }, + "ISeriesSpec": { + "typeName": "ISeriesSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 ISeriesSpec 的定义位置" + }, + "ISeriesStyle": { + "typeName": "ISeriesStyle", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/series/interface/common.d.ts", + "note": "类型 ISeriesStyle 的定义位置" + }, + "IHoverSpec": { + "typeName": "IHoverSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/interaction/interface/spec.d.ts", + "note": "类型 IHoverSpec 的定义位置" + }, + "ISelectSpec": { + "typeName": "ISelectSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/interaction/interface/spec.d.ts", + "note": "类型 ISelectSpec 的定义位置" + }, + "RegionSpec": { + "typeName": "RegionSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/region/interface.d.ts", + "note": "类型 RegionSpec 的定义位置" + }, + "ITitleSpec": { + "typeName": "ITitleSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/title/interface/spec.d.ts", + "note": "类型 ITitleSpec 的定义位置" + }, + "ILayoutSpec": { + "typeName": "ILayoutSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/layout/interface.d.ts", + "note": "类型 ILayoutSpec 的定义位置" + }, + "ILegendSpec": { + "typeName": "ILegendSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/legend/interface.d.ts", + "note": "类型 ILegendSpec 的定义位置" + }, + "ICrosshairSpec": { + "typeName": "ICrosshairSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/crosshair/interface/spec.d.ts", + "note": "类型 ICrosshairSpec 的定义位置" + }, + "ITooltipSpec": { + "typeName": "ITooltipSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/tooltip/interface/spec.d.ts", + "note": "类型 ITooltipSpec 的定义位置" + }, + "IPlayer": { + "typeName": "IPlayer", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/player/interface/spec.d.ts", + "note": "类型 IPlayer 的定义位置" + }, + "IDataZoomSpec": { + "typeName": "IDataZoomSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/data-zoom/data-zoom/interface.d.ts", + "note": "类型 IDataZoomSpec 的定义位置" + }, + "IScrollBarSpec": { + "typeName": "IScrollBarSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/data-zoom/scroll-bar/interface.d.ts", + "note": "类型 IScrollBarSpec 的定义位置" + }, + "IBrushSpec": { + "typeName": "IBrushSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/brush/interface.d.ts", + "note": "类型 IBrushSpec 的定义位置" + }, + "ICustomMarkSpec": { + "typeName": "ICustomMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 ICustomMarkSpec 的定义位置" + }, + "ICommonAxisSpec": { + "typeName": "ICommonAxisSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/axis/interface.d.ts", + "note": "类型 ICommonAxisSpec 的定义位置" + }, + "ITheme": { + "typeName": "ITheme", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/theme/interface.d.ts", + "note": "类型 ITheme 的定义位置" + }, + "IBackgroundSpec": { + "typeName": "IBackgroundSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 IBackgroundSpec 的定义位置" + }, + "IMediaQuerySpec": { + "typeName": "IMediaQuerySpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/media-query.d.ts", + "note": "类型 IMediaQuerySpec 的定义位置" + }, + "IAnimationConfig": { + "typeName": "IAnimationConfig", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart/src/typings/spec/common.ts", + "note": "类型 IAnimationConfig 的定义位置" + }, + "IMarkSpec": { + "typeName": "IMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 IMarkSpec 的定义位置" + }, + "IArcMarkSpec": { + "typeName": "IArcMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/visual.d.ts", + "note": "类型 IArcMarkSpec 的定义位置" + }, + "IMultiLabelSpec": { + "typeName": "IMultiLabelSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/label/interface.d.ts", + "note": "类型 IMultiLabelSpec 的定义位置" + }, + "IArcLabelSpec": { + "typeName": "IArcLabelSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/series/pie/interface.d.ts", + "note": "类型 IArcLabelSpec 的定义位置" + } + }, + "statistics": { + "totalInterfaces": 4, + "totalProperties": 45, + "complexTypes": 31, + "typeFileLocations": 31, + "dependencyTypes": 862 + } +} \ No newline at end of file diff --git a/skills/vchart-development-skill/references/type-meta/sankey.json b/skills/vchart-development-skill/references/type-meta/sankey.json new file mode 100644 index 0000000000..14d5528664 --- /dev/null +++ b/skills/vchart-development-skill/references/type-meta/sankey.json @@ -0,0 +1,923 @@ +{ + "typeName": "ISankeyChartSpec", + "description": "ISankeyChartSpec 配置规范的完整实现分析", + "inheritanceTree": { + "ISankeyChartSpec": { + "description": "ISankeyChartSpec 接口配置", + "directExtends": [ + "Omit", + "IChartExtendsSeriesSpec" + ], + "ownProperties": [ + { + "name": "type", + "description": "type 配置", + "type": "'sankey'", + "originalType": "'sankey'", + "required": true, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "series", + "description": "series 配置", + "type": "ISankeySeriesSpec[]", + "originalType": "ISankeySeriesSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISankeySeriesSpec" + ] + } + ] + }, + "Omit": { + "description": "IChartSpec 的属性（排除 padding）", + "directExtends": [], + "ownProperties": [ + { + "name": "type", + "description": "图表类型", + "type": "string", + "originalType": "string", + "required": true, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "data", + "description": "data 配置", + "type": "IData", + "originalType": "IData", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IData" + ] + }, + { + "name": "width", + "description": "画布宽度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "height", + "description": "画布高度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "autoFit", + "description": "是否自适应容器大小", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "color", + "description": "图表色系配置", + "type": "string[] | Omit, 'id'>", + "originalType": "string[] | Omit, 'id'>", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IVisualSpecScale" + ] + }, + { + "name": "series", + "description": "series 配置", + "type": "ISeriesSpec[]", + "originalType": "ISeriesSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISeriesSpec" + ] + }, + { + "name": "seriesStyle", + "description": "系列样式", + "type": "ISeriesStyle", + "originalType": "ISeriesStyle", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISeriesStyle" + ] + }, + { + "name": "animationThreshold", + "description": "自动关闭动画的阀值，对应的是单系列data的长度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "hover", + "description": "hover 交互", + "type": "boolean | IHoverSpec", + "originalType": "boolean | IHoverSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IHoverSpec" + ] + }, + { + "name": "select", + "description": "select 交互", + "type": "boolean | ISelectSpec", + "originalType": "boolean | ISelectSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISelectSpec" + ] + }, + { + "name": "region", + "description": "region配置", + "type": "RegionSpec[]", + "originalType": "RegionSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "RegionSpec" + ] + }, + { + "name": "title", + "description": "图表标题配置", + "type": "ITitleSpec", + "originalType": "ITitleSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ITitleSpec" + ] + }, + { + "name": "layout", + "description": "自定义布局函数", + "type": "ILayoutSpec", + "originalType": "ILayoutSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ILayoutSpec" + ] + }, + { + "name": "legends", + "description": "图例配置", + "type": "ILegendSpec | ILegendSpec[]", + "originalType": "ILegendSpec | ILegendSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ILegendSpec" + ] + }, + { + "name": "crosshair", + "description": "十字辅助线配置", + "type": "ICrosshairSpec | ICrosshairSpec[]", + "originalType": "ICrosshairSpec | ICrosshairSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICrosshairSpec" + ] + }, + { + "name": "tooltip", + "description": "tooltip配置", + "type": "ITooltipSpec", + "originalType": "ITooltipSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ITooltipSpec" + ] + }, + { + "name": "player", + "description": "播放器配置", + "type": "IPlayer", + "originalType": "IPlayer", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IPlayer" + ] + }, + { + "name": "dataZoom", + "description": "缩略轴配置", + "type": "IDataZoomSpec | IDataZoomSpec[]", + "originalType": "IDataZoomSpec | IDataZoomSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IDataZoomSpec" + ] + }, + { + "name": "scrollBar", + "description": "滚动条配置", + "type": "IScrollBarSpec | IScrollBarSpec[]", + "originalType": "IScrollBarSpec | IScrollBarSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IScrollBarSpec" + ] + }, + { + "name": "brush", + "description": "框选配置", + "type": "IBrushSpec", + "originalType": "IBrushSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IBrushSpec" + ] + }, + { + "name": "scales", + "description": "全局 scale 配置", + "type": "IVisualSpecScale[]", + "originalType": "IVisualSpecScale[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IVisualSpecScale" + ] + }, + { + "name": "customMark", + "description": "自定义mark", + "type": "ICustomMarkSpec[]", + "originalType": "ICustomMarkSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICustomMarkSpec" + ] + }, + { + "name": "axes", + "description": "axes 配置", + "type": "ICommonAxisSpec[]", + "originalType": "ICommonAxisSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICommonAxisSpec" + ] + }, + { + "name": "theme", + "description": "默认主题（支持完整主题对象或者主题名称，主题名称需要提前在 `ThemeManager` 中注册）", + "type": "Omit | string", + "originalType": "Omit | string", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ITheme" + ] + }, + { + "name": "background", + "description": "图表背景色配置，优先级高于构造函数中的 background 配置 自1.11.6版本支持渐变色对象的配置", + "type": "IBackgroundSpec", + "originalType": "IBackgroundSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IBackgroundSpec" + ] + }, + { + "name": "stackInverse", + "description": "堆积时是否逆序", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "stackSort", + "description": "堆积时是否排序", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "media", + "description": "媒体查询配置", + "type": "IMediaQuerySpec", + "originalType": "IMediaQuerySpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMediaQuerySpec" + ] + } + ], + "note": "展开自 Omit - 包含 29 个属性（已展开所有继承）", + "expandedFrom": "IChartSpec", + "omittedKeys": [ + "padding" + ] + }, + "IChartExtendsSeriesSpec": { + "description": "ISankeySeriesSpec 的属性（排除 data, morph, stackValue, tooltip）", + "directExtends": [], + "ownProperties": [ + { + "name": "animationAppear", + "description": "入场动画配置", + "type": "'growIn' | 'fadeIn' | IAnimationConfig", + "originalType": "IAnimationConfig", + "required": false, + "category": "动画配置", + "isSimple": false, + "dependencies": [ + "IAnimationConfig" + ], + "inheritedFrom": "IAnimationSpec" + }, + { + "name": "animationEnter", + "description": "数据新增动画配置", + "type": "IAnimationConfig", + "originalType": "IAnimationConfig", + "required": false, + "category": "动画配置", + "isSimple": false, + "dependencies": [ + "IAnimationConfig" + ], + "inheritedFrom": "IAnimationSpec" + }, + { + "name": "animationUpdate", + "description": "数据更新动画配置", + "type": "IAnimationConfig", + "originalType": "IAnimationConfig", + "required": false, + "category": "动画配置", + "isSimple": false, + "dependencies": [ + "IAnimationConfig" + ], + "inheritedFrom": "IAnimationSpec" + }, + { + "name": "animationExit", + "description": "数据移除动画配置", + "type": "IAnimationConfig", + "originalType": "IAnimationConfig", + "required": false, + "category": "动画配置", + "isSimple": false, + "dependencies": [ + "IAnimationConfig" + ], + "inheritedFrom": "IAnimationSpec" + }, + { + "name": "type", + "description": "type 配置", + "type": "'sankey'", + "originalType": "'sankey'", + "required": true, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "categoryField", + "description": "节点名称字段配置", + "type": "string", + "originalType": "string", + "required": true, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "valueField", + "description": "节点之间关系的权重字段", + "type": "string", + "originalType": "string", + "required": true, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "sourceField", + "description": "来源节点数据字段 层级数据不提供", + "type": "string", + "originalType": "string", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "targetField", + "description": "目标节点数据字段 层级数据不提供", + "type": "string", + "originalType": "string", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "direction", + "description": "direction 配置", + "type": "'default' | 'reverse'", + "originalType": "DirectionType", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "nodeAlign", + "description": "节点的对齐类型，所有深度相同的节点，采用什么对齐方式，决定了节点在第几层： - 横向布局的桑基图，用于计算节点x坐标 - 纵向布局的桑基图，用于计算节点y坐标", + "type": "'left' | 'right' | 'center' | 'justify' | 'start' | 'end'", + "originalType": "'left' | 'right' | 'center' | 'justify' | 'start' | 'end'", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "crossNodeAlign", + "description": "横向布局的桑基图，设置节点Y坐标的对齐方式： 'start' - '顶部对齐' 'end' - '底部对齐' 'middle' - '居中对齐' 纵向布局的桑基图，设置节点X坐标的对齐方式： 'start' - '左对齐' 'end' - '右对齐' 'middle' - '居中对齐' 'parent' - '父节点'，从1.12.14版本开始支持", + "type": "'start' | 'end' | 'middle' | 'parent'", + "originalType": "'start' | 'end' | 'middle' | 'parent'", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "inverse", + "description": "是否反向", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "nodeGap", + "description": "同一层中两个节点之间的间隙大小", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "nodeWidth", + "description": "nodeWidth 配置", + "type": "string | number | ((node: SankeyNodeElement) => number)", + "originalType": "string | number | ((node: SankeyNodeElement) => number)", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [] + }, + { + "name": "linkWidth", + "description": "link宽度，单位px", + "type": "number | ((link: SankeyLinkElement) => number)", + "originalType": "number | ((link: SankeyLinkElement) => number)", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [] + }, + { + "name": "minStepWidth", + "description": "link + node 的最小宽度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "minNodeHeight", + "description": "数据不为零或空时节点的最小大小 - 这个配置可以用来避免数据太小时看不到太细的节点 - 建议小于5px", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "minLinkHeight", + "description": "数据不为零或空时边的最小大小 - 这个配置可以用来避免数据太小的时候看不到太细的链接 - 建议小于5px - 当同时指定 `minNodeHeight` 和 `minLinkHeight` 两个选项时，此选项应小于 `minNodeHeight`", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "maxNodeHeight", + "description": "数据不为零或空时节点的最大大小", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "maxLinkHeight", + "description": "数据不为零或空时边的最大大小 - 当同时指定 `maxNodeHeight` 和 `maxLinkHeight` 两个选项时，此选项应小于 `maxNodeHeight`", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "iterations", + "description": "布局的迭代次数", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "nodeKey", + "description": "解析node的key，defaultValue", + "type": "string | number | ((datum: SankeyNodeDatum) => string | number)", + "originalType": "string | number | ((datum: SankeyNodeDatum) => string | number)", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [] + }, + { + "name": "linkSortBy", + "description": "按此funtion排序link", + "type": "(a: SankeyLinkElement, b: SankeyLinkElement) => number", + "originalType": "(a: SankeyLinkElement, b: SankeyLinkElement) => number", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [] + }, + { + "name": "nodeSortBy", + "description": "按此funtion排序node", + "type": "(a: SankeyNodeElement, b: SankeyNodeElement) => number", + "originalType": "(a: SankeyNodeElement, b: SankeyNodeElement) => number", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [] + }, + { + "name": "setNodeLayer", + "description": "自定义指定节点层", + "type": "(datum: SankeyNodeDatum) => number", + "originalType": "(datum: SankeyNodeDatum) => number", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [] + }, + { + "name": "dropIsolatedNode", + "description": "是否丢弃孤立的节点", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "nodeHeight", + "description": "set the height of node", + "type": "number | ((node: SankeyNodeElement) => number)", + "originalType": "number | ((node: SankeyNodeElement) => number)", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [] + }, + { + "name": "linkHeight", + "description": "set the height of link", + "type": "number | ((link: SankeyLinkElement, sourceNode: SankeyNodeElement, sourceNodeHeight: number) => number)", + "originalType": "number | ((link: SankeyLinkElement, sourceNode: SankeyNodeElement, sourceNodeHeight: number) => number)", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [] + }, + { + "name": "equalNodeHeight", + "description": "each node has same height", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "linkOverlap", + "description": "the layout type of link", + "type": "'start' | 'center' | 'end'", + "originalType": "'start' | 'center' | 'end'", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "node", + "description": "node 配置", + "type": "IMarkSpec", + "originalType": "IMarkSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMarkSpec", + "IRectMarkSpec" + ] + }, + { + "name": "link", + "description": "link 配置", + "type": "IMarkSpec", + "originalType": "IMarkSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMarkSpec", + "ILinkPathMarkSpec" + ] + }, + { + "name": "emphasis", + "description": "联动交互配置", + "type": "{\n enable: boolean;\n trigger?: 'click' | 'hover';\n effect: 'self' | 'adjacency' | 'related';\n }", + "originalType": "{\n enable: boolean;\n trigger?: 'click' | 'hover';\n effect: 'self' | 'adjacency' | 'related';\n }", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "label", + "description": "label 配置", + "type": "ISankeyLabelSpec | ISankeyLabelSpec[]", + "originalType": "ISankeyLabelSpec | ISankeyLabelSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISankeyLabelSpec" + ] + }, + { + "name": "overflow", + "description": "当制定了节点、边的宽度的时候，可以配置这个属性 当宽度大于图表region的宽度、高度大于图表resion高度的时候是否自动产生滚动条", + "type": "'scroll' | 'hidden' | 'scroll-x' | 'scroll-y'", + "originalType": "'scroll' | 'hidden' | 'scroll-x' | 'scroll-y'", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + } + ], + "note": "展开自 Omit - 包含 36 个属性（已展开所有继承）", + "expandedFrom": "ISankeySeriesSpec", + "omittedKeys": [ + "data", + "morph", + "stackValue", + "tooltip" + ] + } + }, + "timestamp": "2025-08-06T07:48:34.213Z", + "version": "1.0.0", + "sourceFile": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/chart/sankey/interface.d.ts", + "complexTypeDefinitions": { + "ISankeySeriesSpec": { + "typeName": "ISankeySeriesSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/series/sankey/interface.d.ts", + "note": "类型 ISankeySeriesSpec 的定义位置" + }, + "IData": { + "typeName": "IData", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 IData 的定义位置" + }, + "IVisualSpecScale": { + "typeName": "IVisualSpecScale", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/visual.d.ts", + "note": "类型 IVisualSpecScale 的定义位置" + }, + "ISeriesSpec": { + "typeName": "ISeriesSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 ISeriesSpec 的定义位置" + }, + "ISeriesStyle": { + "typeName": "ISeriesStyle", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/series/interface/common.d.ts", + "note": "类型 ISeriesStyle 的定义位置" + }, + "IHoverSpec": { + "typeName": "IHoverSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/interaction/interface/spec.d.ts", + "note": "类型 IHoverSpec 的定义位置" + }, + "ISelectSpec": { + "typeName": "ISelectSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/interaction/interface/spec.d.ts", + "note": "类型 ISelectSpec 的定义位置" + }, + "RegionSpec": { + "typeName": "RegionSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/region/interface.d.ts", + "note": "类型 RegionSpec 的定义位置" + }, + "ITitleSpec": { + "typeName": "ITitleSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/title/interface/spec.d.ts", + "note": "类型 ITitleSpec 的定义位置" + }, + "ILayoutSpec": { + "typeName": "ILayoutSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/layout/interface.d.ts", + "note": "类型 ILayoutSpec 的定义位置" + }, + "ILegendSpec": { + "typeName": "ILegendSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/legend/interface.d.ts", + "note": "类型 ILegendSpec 的定义位置" + }, + "ICrosshairSpec": { + "typeName": "ICrosshairSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/crosshair/interface/spec.d.ts", + "note": "类型 ICrosshairSpec 的定义位置" + }, + "ITooltipSpec": { + "typeName": "ITooltipSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/tooltip/interface/spec.d.ts", + "note": "类型 ITooltipSpec 的定义位置" + }, + "IPlayer": { + "typeName": "IPlayer", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/player/interface/spec.d.ts", + "note": "类型 IPlayer 的定义位置" + }, + "IDataZoomSpec": { + "typeName": "IDataZoomSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/data-zoom/data-zoom/interface.d.ts", + "note": "类型 IDataZoomSpec 的定义位置" + }, + "IScrollBarSpec": { + "typeName": "IScrollBarSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/data-zoom/scroll-bar/interface.d.ts", + "note": "类型 IScrollBarSpec 的定义位置" + }, + "IBrushSpec": { + "typeName": "IBrushSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/brush/interface.d.ts", + "note": "类型 IBrushSpec 的定义位置" + }, + "ICustomMarkSpec": { + "typeName": "ICustomMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 ICustomMarkSpec 的定义位置" + }, + "ICommonAxisSpec": { + "typeName": "ICommonAxisSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/axis/interface.d.ts", + "note": "类型 ICommonAxisSpec 的定义位置" + }, + "ITheme": { + "typeName": "ITheme", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/theme/interface.d.ts", + "note": "类型 ITheme 的定义位置" + }, + "IBackgroundSpec": { + "typeName": "IBackgroundSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 IBackgroundSpec 的定义位置" + }, + "IMediaQuerySpec": { + "typeName": "IMediaQuerySpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/media-query.d.ts", + "note": "类型 IMediaQuerySpec 的定义位置" + }, + "IAnimationConfig": { + "typeName": "IAnimationConfig", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart/src/typings/spec/common.ts", + "note": "类型 IAnimationConfig 的定义位置" + }, + "IMarkSpec": { + "typeName": "IMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 IMarkSpec 的定义位置" + }, + "IRectMarkSpec": { + "typeName": "IRectMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/visual.d.ts", + "note": "类型 IRectMarkSpec 的定义位置" + }, + "ILinkPathMarkSpec": { + "typeName": "ILinkPathMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/visual.d.ts", + "note": "类型 ILinkPathMarkSpec 的定义位置" + }, + "ISankeyLabelSpec": { + "typeName": "ISankeyLabelSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/series/sankey/interface.d.ts", + "note": "类型 ISankeyLabelSpec 的定义位置" + } + }, + "statistics": { + "totalInterfaces": 3, + "totalProperties": 67, + "complexTypes": 27, + "typeFileLocations": 27, + "dependencyTypes": 851 + } +} \ No newline at end of file diff --git a/skills/vchart-development-skill/references/type-meta/scatter.json b/skills/vchart-development-skill/references/type-meta/scatter.json new file mode 100644 index 0000000000..02b990e327 --- /dev/null +++ b/skills/vchart-development-skill/references/type-meta/scatter.json @@ -0,0 +1,1158 @@ +{ + "typeName": "IScatterChartSpec", + "description": "IScatterChartSpec 配置规范的完整实现分析", + "inheritanceTree": { + "IScatterChartSpec": { + "description": "IScatterChartSpec 接口配置", + "directExtends": [ + "ICartesianChartSpec", + "IChartExtendsSeriesSpec" + ], + "ownProperties": [ + { + "name": "type", + "description": "type 配置", + "type": "'scatter'", + "originalType": "'scatter'", + "required": true, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "series", + "description": "系列配置", + "type": "IScatterSeriesSpec[]", + "originalType": "IScatterSeriesSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IScatterSeriesSpec" + ] + } + ] + }, + "ICartesianChartSpec": { + "description": "ICartesianChartSpec 接口配置", + "directExtends": [ + "IChartSpec" + ], + "ownProperties": [ + { + "name": "direction", + "description": "图表的方向配置。 - 'vertical' 垂直布局，即常见的直角坐标系布局，x 轴位于底部，y 轴位于左侧。 - 'horizontal' 水平布局，可理解为 x 轴和 y 轴位置互换。", + "type": "'default' | 'reverse'", + "originalType": "DirectionType", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "axes", + "description": "笛卡尔坐标系的坐标轴配置", + "type": "ICartesianAxisSpec[]", + "originalType": "ICartesianAxisSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICartesianAxisSpec" + ] + }, + { + "name": "crosshair", + "description": "十字辅助线配置", + "type": "ICartesianCrosshairSpec | ICartesianCrosshairSpec[]", + "originalType": "ICartesianCrosshairSpec | ICartesianCrosshairSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICartesianCrosshairSpec" + ] + }, + { + "name": "markLine", + "description": "参考线配置", + "type": "IMarkLineSpec | IMarkLineSpec[]", + "originalType": "IMarkLineSpec | IMarkLineSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMarkLineSpec" + ] + }, + { + "name": "markArea", + "description": "参考区域配置", + "type": "IMarkAreaSpec | IMarkAreaSpec[]", + "originalType": "IMarkAreaSpec | IMarkAreaSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMarkAreaSpec" + ] + }, + { + "name": "markPoint", + "description": "参考点配置", + "type": "IMarkPointSpec | IMarkPointSpec[]", + "originalType": "IMarkPointSpec | IMarkPointSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMarkPointSpec" + ] + } + ] + }, + "IChartSpec": { + "description": "IChartSpec 接口配置", + "directExtends": [], + "ownProperties": [ + { + "name": "type", + "description": "图表类型", + "type": "string", + "originalType": "string", + "required": true, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "data", + "description": "data 配置", + "type": "IData", + "originalType": "IData", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IData" + ] + }, + { + "name": "width", + "description": "画布宽度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "height", + "description": "画布高度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "autoFit", + "description": "是否自适应容器大小", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "padding", + "description": "图表整体 padding 设置", + "type": "ILayoutPaddingSpec", + "originalType": "ILayoutPaddingSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ILayoutPaddingSpec" + ] + }, + { + "name": "color", + "description": "图表色系配置", + "type": "string[] | Omit, 'id'>", + "originalType": "string[] | Omit, 'id'>", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IVisualSpecScale" + ] + }, + { + "name": "series", + "description": "series 配置", + "type": "ISeriesSpec[]", + "originalType": "ISeriesSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISeriesSpec" + ] + }, + { + "name": "seriesStyle", + "description": "系列样式", + "type": "ISeriesStyle", + "originalType": "ISeriesStyle", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISeriesStyle" + ] + }, + { + "name": "animationThreshold", + "description": "自动关闭动画的阀值，对应的是单系列data的长度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "hover", + "description": "hover 交互", + "type": "boolean | IHoverSpec", + "originalType": "boolean | IHoverSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IHoverSpec" + ] + }, + { + "name": "select", + "description": "select 交互", + "type": "boolean | ISelectSpec", + "originalType": "boolean | ISelectSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISelectSpec" + ] + }, + { + "name": "region", + "description": "region配置", + "type": "RegionSpec[]", + "originalType": "RegionSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "RegionSpec" + ] + }, + { + "name": "title", + "description": "图表标题配置", + "type": "ITitleSpec", + "originalType": "ITitleSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ITitleSpec" + ] + }, + { + "name": "layout", + "description": "自定义布局函数", + "type": "ILayoutSpec", + "originalType": "ILayoutSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ILayoutSpec" + ] + }, + { + "name": "legends", + "description": "图例配置", + "type": "ILegendSpec | ILegendSpec[]", + "originalType": "ILegendSpec | ILegendSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ILegendSpec" + ] + }, + { + "name": "crosshair", + "description": "十字辅助线配置", + "type": "ICrosshairSpec | ICrosshairSpec[]", + "originalType": "ICrosshairSpec | ICrosshairSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICrosshairSpec" + ] + }, + { + "name": "tooltip", + "description": "tooltip配置", + "type": "ITooltipSpec", + "originalType": "ITooltipSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ITooltipSpec" + ] + }, + { + "name": "player", + "description": "播放器配置", + "type": "IPlayer", + "originalType": "IPlayer", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IPlayer" + ] + }, + { + "name": "dataZoom", + "description": "缩略轴配置", + "type": "IDataZoomSpec | IDataZoomSpec[]", + "originalType": "IDataZoomSpec | IDataZoomSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IDataZoomSpec" + ] + }, + { + "name": "scrollBar", + "description": "滚动条配置", + "type": "IScrollBarSpec | IScrollBarSpec[]", + "originalType": "IScrollBarSpec | IScrollBarSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IScrollBarSpec" + ] + }, + { + "name": "brush", + "description": "框选配置", + "type": "IBrushSpec", + "originalType": "IBrushSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IBrushSpec" + ] + }, + { + "name": "scales", + "description": "全局 scale 配置", + "type": "IVisualSpecScale[]", + "originalType": "IVisualSpecScale[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IVisualSpecScale" + ] + }, + { + "name": "customMark", + "description": "自定义mark", + "type": "ICustomMarkSpec[]", + "originalType": "ICustomMarkSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICustomMarkSpec" + ] + }, + { + "name": "axes", + "description": "axes 配置", + "type": "ICommonAxisSpec[]", + "originalType": "ICommonAxisSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICommonAxisSpec" + ] + }, + { + "name": "theme", + "description": "默认主题（支持完整主题对象或者主题名称，主题名称需要提前在 `ThemeManager` 中注册）", + "type": "Omit | string", + "originalType": "Omit | string", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ITheme" + ] + }, + { + "name": "background", + "description": "图表背景色配置，优先级高于构造函数中的 background 配置 自1.11.6版本支持渐变色对象的配置", + "type": "IBackgroundSpec", + "originalType": "IBackgroundSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IBackgroundSpec" + ] + }, + { + "name": "stackInverse", + "description": "堆积时是否逆序", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "stackSort", + "description": "堆积时是否排序", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "media", + "description": "媒体查询配置", + "type": "IMediaQuerySpec", + "originalType": "IMediaQuerySpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMediaQuerySpec" + ] + } + ] + }, + "IChartExtendsSeriesSpec": { + "description": "IScatterSeriesSpec 的属性（排除 data, morph, stackValue, tooltip）", + "directExtends": [], + "ownProperties": [ + { + "name": "hover", + "description": "图表hover相关交互配置，当值为boolean类型时，表示开启或者关闭该交互 也支持更详细的交互配置", + "type": "IHoverSpec | boolean", + "originalType": "IHoverSpec | boolean", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IHoverSpec" + ], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "select", + "description": "图表选中相关交互配置，当值为boolean类型时，表示开启或者关闭该交互 也支持更详细的交互配置", + "type": "ISelectSpec | boolean", + "originalType": "ISelectSpec | boolean", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISelectSpec" + ], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "interactions", + "description": "其他需要按需注册的类型交互", + "type": "IInteractionItemSpec[]", + "originalType": "IInteractionItemSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IInteractionItemSpec" + ], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "type", + "description": "系列类型", + "type": "'scatter'", + "originalType": "'scatter'", + "required": true, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "name", + "description": "系列名称", + "type": "string", + "originalType": "string", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "id", + "description": "数据唯一标识", + "type": "string | number", + "originalType": "StringOrNumber", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "dataIndex", + "description": "系列关联的数据索引", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "dataId", + "description": "系列关联的数据id", + "type": "string | number", + "originalType": "StringOrNumber", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "dataKey", + "description": "dataKey用于绑定数据与Mark的关系, 该配置在动画中非常重要.", + "type": "string | string[] | ((data: Datum, index: number) => string)", + "originalType": "DataKeyType", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "regionIndex", + "description": "系列关联的region索引", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "regionId", + "description": "系列关联的region id", + "type": "string | number", + "originalType": "StringOrNumber", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "seriesField", + "description": "分组字段", + "type": "string", + "originalType": "string", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "seriesStyle", + "description": "系列样式", + "type": "ISeriesStyle", + "originalType": "ISeriesStyle", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISeriesStyle" + ], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "stack", + "description": "是否对数据进行堆叠处理", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "totalLabel", + "description": "堆叠汇总标签", + "type": "ITotalLabelSpec", + "originalType": "ITotalLabelSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ITotalLabelSpec" + ], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "percent", + "description": "是否对数据进行百分比处理", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "stackOffsetSilhouette", + "description": "是否围绕中心轴偏移轮廓", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "invalidType", + "description": "非合规数据点连接方式 'break'指在该数据点处断开 'link' 指忽略该点保持连续 'zero' 指该点默认数值为0 'ignore' 指不处理", + "type": "'zero' | 'ignore' | 'link' | 'break'", + "originalType": "IInvalidType", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "animation", + "description": "是否开启动画", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "animationThreshold", + "description": "自动关闭动画的阀值，对应的是单系列data的长度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "support3d", + "description": "是否支持3d视角", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "extensionMark", + "description": "系列的扩展mark，能够获取系列上的数据", + "type": "(IExtensionMarkSpec> | IExtensionGroupMarkSpec)[]", + "originalType": "(IExtensionMarkSpec> | IExtensionGroupMarkSpec)[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IExtensionMarkSpec", + "IExtensionGroupMarkSpec" + ], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "zIndex", + "description": "今当通过`series`配置的时候，才会生效", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "direction", + "description": "direction row means layout by rows，col means layout by columns", + "type": "'default' | 'reverse'", + "originalType": "DirectionType", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "xField", + "description": "x轴字段", + "type": "string | string[]", + "originalType": "string | string[]", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "x2Field", + "description": "用于区间数据，声明区间末尾的数据字段。", + "type": "string", + "originalType": "string", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "yField", + "description": "y轴字段", + "type": "string | string[]", + "originalType": "string | string[]", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "y2Field", + "description": "用于区间数据，声明区间末尾的数据字段。", + "type": "string", + "originalType": "string", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "zField", + "description": "z轴字段 用于3d散点图等", + "type": "string | string[]", + "originalType": "string | string[]", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "sortDataByAxis", + "description": "是否将数据按照数轴排序", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ICartesianSeriesSpec" + }, + { + "name": "animationAppear", + "description": "入场动画配置", + "type": "'scaleIn' | 'fadeIn' | IAnimationConfig", + "originalType": "IAnimationConfig", + "required": false, + "category": "动画配置", + "isSimple": false, + "dependencies": [ + "IAnimationConfig" + ], + "inheritedFrom": "IAnimationSpec" + }, + { + "name": "animationEnter", + "description": "数据新增动画配置", + "type": "IAnimationConfig", + "originalType": "IAnimationConfig", + "required": false, + "category": "动画配置", + "isSimple": false, + "dependencies": [ + "IAnimationConfig" + ], + "inheritedFrom": "IAnimationSpec" + }, + { + "name": "animationUpdate", + "description": "数据更新动画配置", + "type": "IAnimationConfig", + "originalType": "IAnimationConfig", + "required": false, + "category": "动画配置", + "isSimple": false, + "dependencies": [ + "IAnimationConfig" + ], + "inheritedFrom": "IAnimationSpec" + }, + { + "name": "animationExit", + "description": "数据移除动画配置", + "type": "IAnimationConfig", + "originalType": "IAnimationConfig", + "required": false, + "category": "动画配置", + "isSimple": false, + "dependencies": [ + "IAnimationConfig" + ], + "inheritedFrom": "IAnimationSpec" + }, + { + "name": "point", + "description": "point 配置", + "type": "IMarkSpec", + "originalType": "IMarkSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMarkSpec", + "ISymbolMarkSpec" + ] + }, + { + "name": "sizeField", + "description": "尺寸 对应的数据字段。", + "type": "string", + "originalType": "string", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "size", + "description": "设置尺寸的可选值，支持多种格式： - 单一数值：如 10，则所有点的大小都为 10 - 数组：如 [10, 30]，则根据尺寸数据字段映射到该范围 - 回调函数，自定义根据数据计算尺寸的逻辑 - scale配置，自定义尺寸对应的scale", + "type": "number | number[] | FunctionType | IVisualSpecBase", + "originalType": "number | number[] | FunctionType | IVisualSpecBase", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "FunctionType", + "IVisualSpecBase" + ] + }, + { + "name": "shapeField", + "description": "设置形状对应的数据字段", + "type": "string", + "originalType": "string", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "shape", + "description": "形状配置，设置形状的可选值 - 单一形状：如 'circle'，则所有点的形状都为 'circle' - 数组：如 ['circle', 'square']，则根据形状数据字段映射到该范围 - 回调函数，自定义根据数据计算形状的逻辑 - scale配置，自定义形状对应的scale", + "type": "ShapeType | ShapeType[] | FunctionType | IVisualSpecBase", + "originalType": "ShapeType | ShapeType[] | FunctionType | IVisualSpecBase", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ShapeType", + "FunctionType", + "IVisualSpecBase" + ] + }, + { + "name": "label", + "description": "label 配置", + "type": "IMultiLabelSpec", + "originalType": "IMultiLabelSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMultiLabelSpec", + "ILineLikeLabelSpec" + ] + } + ], + "note": "展开自 Omit - 包含 40 个属性（已展开所有继承）", + "expandedFrom": "IScatterSeriesSpec", + "omittedKeys": [ + "data", + "morph", + "stackValue", + "tooltip" + ] + } + }, + "timestamp": "2025-08-06T07:49:28.272Z", + "version": "1.0.0", + "sourceFile": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/chart/scatter/interface.d.ts", + "complexTypeDefinitions": { + "IScatterSeriesSpec": { + "typeName": "IScatterSeriesSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/series/scatter/interface.d.ts", + "note": "类型 IScatterSeriesSpec 的定义位置" + }, + "ICartesianAxisSpec": { + "typeName": "ICartesianAxisSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/axis/cartesian/interface/spec.d.ts", + "note": "类型 ICartesianAxisSpec 的定义位置" + }, + "ICartesianCrosshairSpec": { + "typeName": "ICartesianCrosshairSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/crosshair/interface/spec.d.ts", + "note": "类型 ICartesianCrosshairSpec 的定义位置" + }, + "IMarkLineSpec": { + "typeName": "IMarkLineSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/marker/mark-line/interface/spec.d.ts", + "note": "类型 IMarkLineSpec 的定义位置" + }, + "IMarkAreaSpec": { + "typeName": "IMarkAreaSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/marker/mark-area/interface/spec.d.ts", + "note": "类型 IMarkAreaSpec 的定义位置" + }, + "IMarkPointSpec": { + "typeName": "IMarkPointSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/marker/mark-point/interface/spec.d.ts", + "note": "类型 IMarkPointSpec 的定义位置" + }, + "IData": { + "typeName": "IData", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 IData 的定义位置" + }, + "ILayoutPaddingSpec": { + "typeName": "ILayoutPaddingSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/layout.d.ts", + "note": "类型 ILayoutPaddingSpec 的定义位置" + }, + "IVisualSpecScale": { + "typeName": "IVisualSpecScale", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/visual.d.ts", + "note": "类型 IVisualSpecScale 的定义位置" + }, + "ISeriesSpec": { + "typeName": "ISeriesSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 ISeriesSpec 的定义位置" + }, + "ISeriesStyle": { + "typeName": "ISeriesStyle", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/series/interface/common.d.ts", + "note": "类型 ISeriesStyle 的定义位置" + }, + "IHoverSpec": { + "typeName": "IHoverSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/interaction/interface/spec.d.ts", + "note": "类型 IHoverSpec 的定义位置" + }, + "ISelectSpec": { + "typeName": "ISelectSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/interaction/interface/spec.d.ts", + "note": "类型 ISelectSpec 的定义位置" + }, + "RegionSpec": { + "typeName": "RegionSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/region/interface.d.ts", + "note": "类型 RegionSpec 的定义位置" + }, + "ITitleSpec": { + "typeName": "ITitleSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/title/interface/spec.d.ts", + "note": "类型 ITitleSpec 的定义位置" + }, + "ILayoutSpec": { + "typeName": "ILayoutSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/layout/interface.d.ts", + "note": "类型 ILayoutSpec 的定义位置" + }, + "ILegendSpec": { + "typeName": "ILegendSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/legend/interface.d.ts", + "note": "类型 ILegendSpec 的定义位置" + }, + "ICrosshairSpec": { + "typeName": "ICrosshairSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/crosshair/interface/spec.d.ts", + "note": "类型 ICrosshairSpec 的定义位置" + }, + "ITooltipSpec": { + "typeName": "ITooltipSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/tooltip/interface/spec.d.ts", + "note": "类型 ITooltipSpec 的定义位置" + }, + "IPlayer": { + "typeName": "IPlayer", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/player/interface/spec.d.ts", + "note": "类型 IPlayer 的定义位置" + }, + "IDataZoomSpec": { + "typeName": "IDataZoomSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/data-zoom/data-zoom/interface.d.ts", + "note": "类型 IDataZoomSpec 的定义位置" + }, + "IScrollBarSpec": { + "typeName": "IScrollBarSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/data-zoom/scroll-bar/interface.d.ts", + "note": "类型 IScrollBarSpec 的定义位置" + }, + "IBrushSpec": { + "typeName": "IBrushSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/brush/interface.d.ts", + "note": "类型 IBrushSpec 的定义位置" + }, + "ICustomMarkSpec": { + "typeName": "ICustomMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 ICustomMarkSpec 的定义位置" + }, + "ICommonAxisSpec": { + "typeName": "ICommonAxisSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/axis/interface.d.ts", + "note": "类型 ICommonAxisSpec 的定义位置" + }, + "ITheme": { + "typeName": "ITheme", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/theme/interface.d.ts", + "note": "类型 ITheme 的定义位置" + }, + "IBackgroundSpec": { + "typeName": "IBackgroundSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 IBackgroundSpec 的定义位置" + }, + "IMediaQuerySpec": { + "typeName": "IMediaQuerySpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/media-query.d.ts", + "note": "类型 IMediaQuerySpec 的定义位置" + }, + "IInteractionItemSpec": { + "typeName": "IInteractionItemSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/interaction/interface/spec.d.ts", + "note": "类型 IInteractionItemSpec 的定义位置" + }, + "ITotalLabelSpec": { + "typeName": "ITotalLabelSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/label/interface.d.ts", + "note": "类型 ITotalLabelSpec 的定义位置" + }, + "IExtensionMarkSpec": { + "typeName": "IExtensionMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 IExtensionMarkSpec 的定义位置" + }, + "IExtensionGroupMarkSpec": { + "typeName": "IExtensionGroupMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 IExtensionGroupMarkSpec 的定义位置" + }, + "IAnimationConfig": { + "typeName": "IAnimationConfig", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart/src/typings/spec/common.ts", + "note": "类型 IAnimationConfig 的定义位置" + }, + "IMarkSpec": { + "typeName": "IMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 IMarkSpec 的定义位置" + }, + "ISymbolMarkSpec": { + "typeName": "ISymbolMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/visual.d.ts", + "note": "类型 ISymbolMarkSpec 的定义位置" + }, + "FunctionType": { + "typeName": "FunctionType", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/visual.d.ts", + "note": "类型 FunctionType 的定义位置" + }, + "IVisualSpecBase": { + "typeName": "IVisualSpecBase", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/visual.d.ts", + "note": "类型 IVisualSpecBase 的定义位置" + }, + "ShapeType": { + "typeName": "ShapeType", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/shape.d.ts", + "note": "类型 ShapeType 的定义位置" + }, + "IMultiLabelSpec": { + "typeName": "IMultiLabelSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/label/interface.d.ts", + "note": "类型 IMultiLabelSpec 的定义位置" + }, + "ILineLikeLabelSpec": { + "typeName": "ILineLikeLabelSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/series/mixin/interface.d.ts", + "note": "类型 ILineLikeLabelSpec 的定义位置" + } + }, + "statistics": { + "totalInterfaces": 4, + "totalProperties": 78, + "complexTypes": 40, + "typeFileLocations": 40, + "dependencyTypes": 864 + } +} \ No newline at end of file diff --git a/skills/vchart-development-skill/references/type-meta/sequence.json b/skills/vchart-development-skill/references/type-meta/sequence.json new file mode 100644 index 0000000000..b911242a4b --- /dev/null +++ b/skills/vchart-development-skill/references/type-meta/sequence.json @@ -0,0 +1,597 @@ +{ + "typeName": "ISequenceChartSpec", + "description": "ISequenceChartSpec 配置规范的完整实现分析", + "inheritanceTree": { + "ISequenceChartSpec": { + "description": "ISequenceChartSpec 接口配置", + "directExtends": [ + "IChartSpec" + ], + "ownProperties": [ + { + "name": "type", + "description": "type 配置", + "type": "'sequence'", + "originalType": "'sequence'", + "required": true, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "appendPadding", + "description": "可以为左边的title预留padding", + "type": "IPadding", + "originalType": "IPadding", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IPadding" + ] + }, + { + "name": "axes", + "description": "axes 配置", + "type": "ICartesianAxisSpec[]", + "originalType": "ICartesianAxisSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICartesianAxisSpec" + ] + }, + { + "name": "dataZooms", + "description": "缩略轴配置", + "type": "IDataZoomSpec[]", + "originalType": "IDataZoomSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IDataZoomSpec" + ] + }, + { + "name": "scrollBars", + "description": "滚动条配置", + "type": "IScrollBarSpec[]", + "originalType": "IScrollBarSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IScrollBarSpec" + ] + }, + { + "name": "crosshair", + "description": "十字辅助线配置", + "type": "ICartesianCrosshairSpec | ICartesianCrosshairSpec[]", + "originalType": "ICartesianCrosshairSpec | ICartesianCrosshairSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICartesianCrosshairSpec" + ] + }, + { + "name": "layout", + "description": "layout 配置", + "type": "ILayoutSpec", + "originalType": "ILayoutSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ILayoutSpec" + ] + }, + { + "name": "region", + "description": "region 配置", + "type": "RegionSpec[]", + "originalType": "RegionSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "RegionSpec" + ] + } + ] + }, + "IChartSpec": { + "description": "IChartSpec 接口配置", + "directExtends": [], + "ownProperties": [ + { + "name": "type", + "description": "图表类型", + "type": "string", + "originalType": "string", + "required": true, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "data", + "description": "data 配置", + "type": "IData", + "originalType": "IData", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IData" + ] + }, + { + "name": "width", + "description": "画布宽度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "height", + "description": "画布高度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "autoFit", + "description": "是否自适应容器大小", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "padding", + "description": "图表整体 padding 设置", + "type": "ILayoutPaddingSpec", + "originalType": "ILayoutPaddingSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ILayoutPaddingSpec" + ] + }, + { + "name": "color", + "description": "图表色系配置", + "type": "string[] | Omit, 'id'>", + "originalType": "string[] | Omit, 'id'>", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IVisualSpecScale" + ] + }, + { + "name": "series", + "description": "series 配置", + "type": "ISeriesSpec[]", + "originalType": "ISeriesSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISeriesSpec" + ] + }, + { + "name": "seriesStyle", + "description": "系列样式", + "type": "ISeriesStyle", + "originalType": "ISeriesStyle", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISeriesStyle" + ] + }, + { + "name": "animationThreshold", + "description": "自动关闭动画的阀值，对应的是单系列data的长度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "hover", + "description": "hover 交互", + "type": "boolean | IHoverSpec", + "originalType": "boolean | IHoverSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IHoverSpec" + ] + }, + { + "name": "select", + "description": "select 交互", + "type": "boolean | ISelectSpec", + "originalType": "boolean | ISelectSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISelectSpec" + ] + }, + { + "name": "region", + "description": "region配置", + "type": "RegionSpec[]", + "originalType": "RegionSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "RegionSpec" + ] + }, + { + "name": "title", + "description": "图表标题配置", + "type": "ITitleSpec", + "originalType": "ITitleSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ITitleSpec" + ] + }, + { + "name": "layout", + "description": "自定义布局函数", + "type": "ILayoutSpec", + "originalType": "ILayoutSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ILayoutSpec" + ] + }, + { + "name": "legends", + "description": "图例配置", + "type": "ILegendSpec | ILegendSpec[]", + "originalType": "ILegendSpec | ILegendSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ILegendSpec" + ] + }, + { + "name": "crosshair", + "description": "十字辅助线配置", + "type": "ICrosshairSpec | ICrosshairSpec[]", + "originalType": "ICrosshairSpec | ICrosshairSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICrosshairSpec" + ] + }, + { + "name": "tooltip", + "description": "tooltip配置", + "type": "ITooltipSpec", + "originalType": "ITooltipSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ITooltipSpec" + ] + }, + { + "name": "player", + "description": "播放器配置", + "type": "IPlayer", + "originalType": "IPlayer", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IPlayer" + ] + }, + { + "name": "dataZoom", + "description": "缩略轴配置", + "type": "IDataZoomSpec | IDataZoomSpec[]", + "originalType": "IDataZoomSpec | IDataZoomSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IDataZoomSpec" + ] + }, + { + "name": "scrollBar", + "description": "滚动条配置", + "type": "IScrollBarSpec | IScrollBarSpec[]", + "originalType": "IScrollBarSpec | IScrollBarSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IScrollBarSpec" + ] + }, + { + "name": "brush", + "description": "框选配置", + "type": "IBrushSpec", + "originalType": "IBrushSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IBrushSpec" + ] + }, + { + "name": "scales", + "description": "全局 scale 配置", + "type": "IVisualSpecScale[]", + "originalType": "IVisualSpecScale[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IVisualSpecScale" + ] + }, + { + "name": "customMark", + "description": "自定义mark", + "type": "ICustomMarkSpec[]", + "originalType": "ICustomMarkSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICustomMarkSpec" + ] + }, + { + "name": "axes", + "description": "axes 配置", + "type": "ICommonAxisSpec[]", + "originalType": "ICommonAxisSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICommonAxisSpec" + ] + }, + { + "name": "theme", + "description": "默认主题（支持完整主题对象或者主题名称，主题名称需要提前在 `ThemeManager` 中注册）", + "type": "Omit | string", + "originalType": "Omit | string", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ITheme" + ] + }, + { + "name": "background", + "description": "图表背景色配置，优先级高于构造函数中的 background 配置 自1.11.6版本支持渐变色对象的配置", + "type": "IBackgroundSpec", + "originalType": "IBackgroundSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IBackgroundSpec" + ] + }, + { + "name": "stackInverse", + "description": "堆积时是否逆序", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "stackSort", + "description": "堆积时是否排序", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "media", + "description": "媒体查询配置", + "type": "IMediaQuerySpec", + "originalType": "IMediaQuerySpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMediaQuerySpec" + ] + } + ] + } + }, + "timestamp": "2025-08-06T08:55:17.260Z", + "version": "1.0.0", + "sourceFile": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/chart/sequence/interface.d.ts", + "complexTypeDefinitions": { + "IPadding": { + "typeName": "IPadding", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/space.d.ts", + "note": "类型 IPadding 的定义位置" + }, + "ICartesianAxisSpec": { + "typeName": "ICartesianAxisSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/axis/cartesian/interface/spec.d.ts", + "note": "类型 ICartesianAxisSpec 的定义位置" + }, + "IDataZoomSpec": { + "typeName": "IDataZoomSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/data-zoom/data-zoom/interface.d.ts", + "note": "类型 IDataZoomSpec 的定义位置" + }, + "IScrollBarSpec": { + "typeName": "IScrollBarSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/data-zoom/scroll-bar/interface.d.ts", + "note": "类型 IScrollBarSpec 的定义位置" + }, + "ICartesianCrosshairSpec": { + "typeName": "ICartesianCrosshairSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/crosshair/interface/spec.d.ts", + "note": "类型 ICartesianCrosshairSpec 的定义位置" + }, + "ILayoutSpec": { + "typeName": "ILayoutSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/layout/interface.d.ts", + "note": "类型 ILayoutSpec 的定义位置" + }, + "RegionSpec": { + "typeName": "RegionSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/region/interface.d.ts", + "note": "类型 RegionSpec 的定义位置" + }, + "IData": { + "typeName": "IData", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 IData 的定义位置" + }, + "ILayoutPaddingSpec": { + "typeName": "ILayoutPaddingSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/layout.d.ts", + "note": "类型 ILayoutPaddingSpec 的定义位置" + }, + "IVisualSpecScale": { + "typeName": "IVisualSpecScale", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/visual.d.ts", + "note": "类型 IVisualSpecScale 的定义位置" + }, + "ISeriesSpec": { + "typeName": "ISeriesSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 ISeriesSpec 的定义位置" + }, + "ISeriesStyle": { + "typeName": "ISeriesStyle", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/series/interface/common.d.ts", + "note": "类型 ISeriesStyle 的定义位置" + }, + "IHoverSpec": { + "typeName": "IHoverSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/interaction/interface/spec.d.ts", + "note": "类型 IHoverSpec 的定义位置" + }, + "ISelectSpec": { + "typeName": "ISelectSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/interaction/interface/spec.d.ts", + "note": "类型 ISelectSpec 的定义位置" + }, + "ITitleSpec": { + "typeName": "ITitleSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/title/interface/spec.d.ts", + "note": "类型 ITitleSpec 的定义位置" + }, + "ILegendSpec": { + "typeName": "ILegendSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/legend/interface.d.ts", + "note": "类型 ILegendSpec 的定义位置" + }, + "ICrosshairSpec": { + "typeName": "ICrosshairSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/crosshair/interface/spec.d.ts", + "note": "类型 ICrosshairSpec 的定义位置" + }, + "ITooltipSpec": { + "typeName": "ITooltipSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/tooltip/interface/spec.d.ts", + "note": "类型 ITooltipSpec 的定义位置" + }, + "IPlayer": { + "typeName": "IPlayer", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/player/interface/spec.d.ts", + "note": "类型 IPlayer 的定义位置" + }, + "IBrushSpec": { + "typeName": "IBrushSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/brush/interface.d.ts", + "note": "类型 IBrushSpec 的定义位置" + }, + "ICustomMarkSpec": { + "typeName": "ICustomMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 ICustomMarkSpec 的定义位置" + }, + "ICommonAxisSpec": { + "typeName": "ICommonAxisSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/axis/interface.d.ts", + "note": "类型 ICommonAxisSpec 的定义位置" + }, + "ITheme": { + "typeName": "ITheme", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/theme/interface.d.ts", + "note": "类型 ITheme 的定义位置" + }, + "IBackgroundSpec": { + "typeName": "IBackgroundSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 IBackgroundSpec 的定义位置" + }, + "IMediaQuerySpec": { + "typeName": "IMediaQuerySpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/media-query.d.ts", + "note": "类型 IMediaQuerySpec 的定义位置" + } + }, + "statistics": { + "totalInterfaces": 2, + "totalProperties": 38, + "complexTypes": 25, + "typeFileLocations": 25, + "dependencyTypes": 858 + } +} \ No newline at end of file diff --git a/skills/vchart-development-skill/references/type-meta/sunburst.json b/skills/vchart-development-skill/references/type-meta/sunburst.json new file mode 100644 index 0000000000..a1edbbdfcf --- /dev/null +++ b/skills/vchart-development-skill/references/type-meta/sunburst.json @@ -0,0 +1,795 @@ +{ + "typeName": "ISunburstChartSpec", + "description": "ISunburstChartSpec 配置规范的完整实现分析", + "inheritanceTree": { + "ISunburstChartSpec": { + "description": "ISunburstChartSpec 接口配置", + "directExtends": [ + "IChartSpec", + "IChartExtendsSeriesSpec" + ], + "ownProperties": [ + { + "name": "type", + "description": "type 配置", + "type": "'sunburst'", + "originalType": "'sunburst'", + "required": true, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "series", + "description": "series 配置", + "type": "ISunburstSeriesSpec[]", + "originalType": "ISunburstSeriesSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISunburstSeriesSpec" + ] + } + ] + }, + "IChartSpec": { + "description": "IChartSpec 接口配置", + "directExtends": [], + "ownProperties": [ + { + "name": "type", + "description": "图表类型", + "type": "string", + "originalType": "string", + "required": true, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "data", + "description": "data 配置", + "type": "IData", + "originalType": "IData", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IData" + ] + }, + { + "name": "width", + "description": "画布宽度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "height", + "description": "画布高度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "autoFit", + "description": "是否自适应容器大小", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "padding", + "description": "图表整体 padding 设置", + "type": "ILayoutPaddingSpec", + "originalType": "ILayoutPaddingSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ILayoutPaddingSpec" + ] + }, + { + "name": "color", + "description": "图表色系配置", + "type": "string[] | Omit, 'id'>", + "originalType": "string[] | Omit, 'id'>", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IVisualSpecScale" + ] + }, + { + "name": "series", + "description": "series 配置", + "type": "ISeriesSpec[]", + "originalType": "ISeriesSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISeriesSpec" + ] + }, + { + "name": "seriesStyle", + "description": "系列样式", + "type": "ISeriesStyle", + "originalType": "ISeriesStyle", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISeriesStyle" + ] + }, + { + "name": "animationThreshold", + "description": "自动关闭动画的阀值，对应的是单系列data的长度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "hover", + "description": "hover 交互", + "type": "boolean | IHoverSpec", + "originalType": "boolean | IHoverSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IHoverSpec" + ] + }, + { + "name": "select", + "description": "select 交互", + "type": "boolean | ISelectSpec", + "originalType": "boolean | ISelectSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISelectSpec" + ] + }, + { + "name": "region", + "description": "region配置", + "type": "RegionSpec[]", + "originalType": "RegionSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "RegionSpec" + ] + }, + { + "name": "title", + "description": "图表标题配置", + "type": "ITitleSpec", + "originalType": "ITitleSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ITitleSpec" + ] + }, + { + "name": "layout", + "description": "自定义布局函数", + "type": "ILayoutSpec", + "originalType": "ILayoutSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ILayoutSpec" + ] + }, + { + "name": "legends", + "description": "图例配置", + "type": "ILegendSpec | ILegendSpec[]", + "originalType": "ILegendSpec | ILegendSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ILegendSpec" + ] + }, + { + "name": "crosshair", + "description": "十字辅助线配置", + "type": "ICrosshairSpec | ICrosshairSpec[]", + "originalType": "ICrosshairSpec | ICrosshairSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICrosshairSpec" + ] + }, + { + "name": "tooltip", + "description": "tooltip配置", + "type": "ITooltipSpec", + "originalType": "ITooltipSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ITooltipSpec" + ] + }, + { + "name": "player", + "description": "播放器配置", + "type": "IPlayer", + "originalType": "IPlayer", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IPlayer" + ] + }, + { + "name": "dataZoom", + "description": "缩略轴配置", + "type": "IDataZoomSpec | IDataZoomSpec[]", + "originalType": "IDataZoomSpec | IDataZoomSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IDataZoomSpec" + ] + }, + { + "name": "scrollBar", + "description": "滚动条配置", + "type": "IScrollBarSpec | IScrollBarSpec[]", + "originalType": "IScrollBarSpec | IScrollBarSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IScrollBarSpec" + ] + }, + { + "name": "brush", + "description": "框选配置", + "type": "IBrushSpec", + "originalType": "IBrushSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IBrushSpec" + ] + }, + { + "name": "scales", + "description": "全局 scale 配置", + "type": "IVisualSpecScale[]", + "originalType": "IVisualSpecScale[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IVisualSpecScale" + ] + }, + { + "name": "customMark", + "description": "自定义mark", + "type": "ICustomMarkSpec[]", + "originalType": "ICustomMarkSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICustomMarkSpec" + ] + }, + { + "name": "axes", + "description": "axes 配置", + "type": "ICommonAxisSpec[]", + "originalType": "ICommonAxisSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICommonAxisSpec" + ] + }, + { + "name": "theme", + "description": "默认主题（支持完整主题对象或者主题名称，主题名称需要提前在 `ThemeManager` 中注册）", + "type": "Omit | string", + "originalType": "Omit | string", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ITheme" + ] + }, + { + "name": "background", + "description": "图表背景色配置，优先级高于构造函数中的 background 配置 自1.11.6版本支持渐变色对象的配置", + "type": "IBackgroundSpec", + "originalType": "IBackgroundSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IBackgroundSpec" + ] + }, + { + "name": "stackInverse", + "description": "堆积时是否逆序", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "stackSort", + "description": "堆积时是否排序", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "media", + "description": "媒体查询配置", + "type": "IMediaQuerySpec", + "originalType": "IMediaQuerySpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMediaQuerySpec" + ] + } + ] + }, + "IChartExtendsSeriesSpec": { + "description": "ISunburstSeriesSpec 的属性（排除 data, morph, stackValue, tooltip）", + "directExtends": [], + "ownProperties": [ + { + "name": "animationAppear", + "description": "入场动画配置", + "type": "'growAngle' | 'growRadius' | 'fadeIn' | IAnimationConfig", + "originalType": "IAnimationConfig", + "required": false, + "category": "动画配置", + "isSimple": false, + "dependencies": [ + "IAnimationConfig" + ], + "inheritedFrom": "IAnimationSpec" + }, + { + "name": "animationEnter", + "description": "数据新增动画配置", + "type": "IAnimationConfig", + "originalType": "IAnimationConfig", + "required": false, + "category": "动画配置", + "isSimple": false, + "dependencies": [ + "IAnimationConfig" + ], + "inheritedFrom": "IAnimationSpec" + }, + { + "name": "animationUpdate", + "description": "数据更新动画配置", + "type": "IAnimationConfig", + "originalType": "IAnimationConfig", + "required": false, + "category": "动画配置", + "isSimple": false, + "dependencies": [ + "IAnimationConfig" + ], + "inheritedFrom": "IAnimationSpec" + }, + { + "name": "animationExit", + "description": "数据移除动画配置", + "type": "IAnimationConfig", + "originalType": "IAnimationConfig", + "required": false, + "category": "动画配置", + "isSimple": false, + "dependencies": [ + "IAnimationConfig" + ], + "inheritedFrom": "IAnimationSpec" + }, + { + "name": "type", + "description": "type 配置", + "type": "'sunburst'", + "originalType": "'sunburst'", + "required": true, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "categoryField", + "description": "分类字段", + "type": "string", + "originalType": "string", + "required": true, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "valueField", + "description": "权重字段", + "type": "string", + "originalType": "string", + "required": true, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "centerX", + "description": "旭日图中心点, x坐标.", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "centerY", + "description": "旭日图中心点, y坐标.", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "offsetX", + "description": "旭日图中心点, x坐标偏移量.", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "offsetY", + "description": "旭日图中心点, y坐标偏移量.", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "startAngle", + "description": "起始角度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "endAngle", + "description": "终止角度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "innerRadius", + "description": "扇区半径", + "type": "number | number[]", + "originalType": "number | number[]", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "outerRadius", + "description": "扇区外半径", + "type": "number | number[]", + "originalType": "number | number[]", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "gap", + "description": "层级间隔", + "type": "number | number[]", + "originalType": "number | number[]", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "labelLayout", + "description": "label布局相关参数", + "type": "SunburstLabelConfig | (SunburstLabelConfig | null)[]", + "originalType": "SunburstLabelConfig | (SunburstLabelConfig | null)[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "SunburstLabelConfig" + ] + }, + { + "name": "labelAutoVisible", + "description": "自动隐藏密集标签", + "type": "{\n /**\n * 是否启用\n * @default false\n */\n enable?: boolean;\n\n /**\n * 周长阈值,扇区周长小于该值时, 则隐藏标签.\n * @default 10\n */\n circumference?: number;\n}", + "originalType": "LabelAutoVisibleType", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "drill", + "description": "下钻配置", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "drillField", + "description": "钻取字段的field", + "type": "string", + "originalType": "string", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "label", + "description": "label 配置", + "type": "IMarkSpec", + "originalType": "IMarkSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMarkSpec", + "ITextMarkSpec" + ] + }, + { + "name": "sunburst", + "description": "sunburst 配置", + "type": "IMarkSpec", + "originalType": "IMarkSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMarkSpec", + "IArcMarkSpec" + ] + } + ], + "note": "展开自 Omit - 包含 22 个属性（已展开所有继承）", + "expandedFrom": "ISunburstSeriesSpec", + "omittedKeys": [ + "data", + "morph", + "stackValue", + "tooltip" + ] + } + }, + "timestamp": "2025-08-06T07:50:23.633Z", + "version": "1.0.0", + "sourceFile": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/chart/sunburst/interface.d.ts", + "complexTypeDefinitions": { + "ISunburstSeriesSpec": { + "typeName": "ISunburstSeriesSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/series/sunburst/interface.d.ts", + "note": "类型 ISunburstSeriesSpec 的定义位置" + }, + "IData": { + "typeName": "IData", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 IData 的定义位置" + }, + "ILayoutPaddingSpec": { + "typeName": "ILayoutPaddingSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/layout.d.ts", + "note": "类型 ILayoutPaddingSpec 的定义位置" + }, + "IVisualSpecScale": { + "typeName": "IVisualSpecScale", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/visual.d.ts", + "note": "类型 IVisualSpecScale 的定义位置" + }, + "ISeriesSpec": { + "typeName": "ISeriesSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 ISeriesSpec 的定义位置" + }, + "ISeriesStyle": { + "typeName": "ISeriesStyle", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/series/interface/common.d.ts", + "note": "类型 ISeriesStyle 的定义位置" + }, + "IHoverSpec": { + "typeName": "IHoverSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/interaction/interface/spec.d.ts", + "note": "类型 IHoverSpec 的定义位置" + }, + "ISelectSpec": { + "typeName": "ISelectSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/interaction/interface/spec.d.ts", + "note": "类型 ISelectSpec 的定义位置" + }, + "RegionSpec": { + "typeName": "RegionSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/region/interface.d.ts", + "note": "类型 RegionSpec 的定义位置" + }, + "ITitleSpec": { + "typeName": "ITitleSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/title/interface/spec.d.ts", + "note": "类型 ITitleSpec 的定义位置" + }, + "ILayoutSpec": { + "typeName": "ILayoutSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/layout/interface.d.ts", + "note": "类型 ILayoutSpec 的定义位置" + }, + "ILegendSpec": { + "typeName": "ILegendSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/legend/interface.d.ts", + "note": "类型 ILegendSpec 的定义位置" + }, + "ICrosshairSpec": { + "typeName": "ICrosshairSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/crosshair/interface/spec.d.ts", + "note": "类型 ICrosshairSpec 的定义位置" + }, + "ITooltipSpec": { + "typeName": "ITooltipSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/tooltip/interface/spec.d.ts", + "note": "类型 ITooltipSpec 的定义位置" + }, + "IPlayer": { + "typeName": "IPlayer", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/player/interface/spec.d.ts", + "note": "类型 IPlayer 的定义位置" + }, + "IDataZoomSpec": { + "typeName": "IDataZoomSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/data-zoom/data-zoom/interface.d.ts", + "note": "类型 IDataZoomSpec 的定义位置" + }, + "IScrollBarSpec": { + "typeName": "IScrollBarSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/data-zoom/scroll-bar/interface.d.ts", + "note": "类型 IScrollBarSpec 的定义位置" + }, + "IBrushSpec": { + "typeName": "IBrushSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/brush/interface.d.ts", + "note": "类型 IBrushSpec 的定义位置" + }, + "ICustomMarkSpec": { + "typeName": "ICustomMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 ICustomMarkSpec 的定义位置" + }, + "ICommonAxisSpec": { + "typeName": "ICommonAxisSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/axis/interface.d.ts", + "note": "类型 ICommonAxisSpec 的定义位置" + }, + "ITheme": { + "typeName": "ITheme", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/theme/interface.d.ts", + "note": "类型 ITheme 的定义位置" + }, + "IBackgroundSpec": { + "typeName": "IBackgroundSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 IBackgroundSpec 的定义位置" + }, + "IMediaQuerySpec": { + "typeName": "IMediaQuerySpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/media-query.d.ts", + "note": "类型 IMediaQuerySpec 的定义位置" + }, + "IAnimationConfig": { + "typeName": "IAnimationConfig", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart/src/typings/spec/common.ts", + "note": "类型 IAnimationConfig 的定义位置" + }, + "SunburstLabelConfig": { + "typeName": "SunburstLabelConfig", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart/src/typings/spec/common.ts", + "note": "类型 SunburstLabelConfig 的定义位置" + }, + "IMarkSpec": { + "typeName": "IMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 IMarkSpec 的定义位置" + }, + "ITextMarkSpec": { + "typeName": "ITextMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/visual.d.ts", + "note": "类型 ITextMarkSpec 的定义位置" + }, + "IArcMarkSpec": { + "typeName": "IArcMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/visual.d.ts", + "note": "类型 IArcMarkSpec 的定义位置" + } + }, + "statistics": { + "totalInterfaces": 3, + "totalProperties": 54, + "complexTypes": 28, + "typeFileLocations": 28, + "dependencyTypes": 850 + } +} \ No newline at end of file diff --git a/skills/vchart-development-skill/references/type-meta/treemap.json b/skills/vchart-development-skill/references/type-meta/treemap.json new file mode 100644 index 0000000000..803e188780 --- /dev/null +++ b/skills/vchart-development-skill/references/type-meta/treemap.json @@ -0,0 +1,818 @@ +{ + "typeName": "ITreemapChartSpec", + "description": "ITreemapChartSpec 配置规范的完整实现分析", + "inheritanceTree": { + "ITreemapChartSpec": { + "description": "ITreemapChartSpec 接口配置", + "directExtends": [ + "Omit", + "Omit" + ], + "ownProperties": [ + { + "name": "type", + "description": "type 配置", + "type": "'treemap'", + "originalType": "'treemap'", + "required": true, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "series", + "description": "series 配置", + "type": "ITreemapSeriesSpec[]", + "originalType": "ITreemapSeriesSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ITreemapSeriesSpec" + ] + } + ] + }, + "Omit": { + "description": "IChartSpec 的属性（排除 data, series）", + "directExtends": [], + "ownProperties": [ + { + "name": "type", + "description": "图表类型", + "type": "string", + "originalType": "string", + "required": true, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "width", + "description": "画布宽度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "height", + "description": "画布高度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "autoFit", + "description": "是否自适应容器大小", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "padding", + "description": "图表整体 padding 设置", + "type": "ILayoutPaddingSpec", + "originalType": "ILayoutPaddingSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ILayoutPaddingSpec" + ] + }, + { + "name": "color", + "description": "图表色系配置", + "type": "string[] | Omit, 'id'>", + "originalType": "string[] | Omit, 'id'>", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IVisualSpecScale" + ] + }, + { + "name": "seriesStyle", + "description": "系列样式", + "type": "ISeriesStyle", + "originalType": "ISeriesStyle", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISeriesStyle" + ] + }, + { + "name": "animationThreshold", + "description": "自动关闭动画的阀值，对应的是单系列data的长度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "hover", + "description": "hover 交互", + "type": "boolean | IHoverSpec", + "originalType": "boolean | IHoverSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IHoverSpec" + ] + }, + { + "name": "select", + "description": "select 交互", + "type": "boolean | ISelectSpec", + "originalType": "boolean | ISelectSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISelectSpec" + ] + }, + { + "name": "region", + "description": "region配置", + "type": "RegionSpec[]", + "originalType": "RegionSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "RegionSpec" + ] + }, + { + "name": "title", + "description": "图表标题配置", + "type": "ITitleSpec", + "originalType": "ITitleSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ITitleSpec" + ] + }, + { + "name": "layout", + "description": "自定义布局函数", + "type": "ILayoutSpec", + "originalType": "ILayoutSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ILayoutSpec" + ] + }, + { + "name": "legends", + "description": "图例配置", + "type": "ILegendSpec | ILegendSpec[]", + "originalType": "ILegendSpec | ILegendSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ILegendSpec" + ] + }, + { + "name": "crosshair", + "description": "十字辅助线配置", + "type": "ICrosshairSpec | ICrosshairSpec[]", + "originalType": "ICrosshairSpec | ICrosshairSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICrosshairSpec" + ] + }, + { + "name": "tooltip", + "description": "tooltip配置", + "type": "ITooltipSpec", + "originalType": "ITooltipSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ITooltipSpec" + ] + }, + { + "name": "player", + "description": "播放器配置", + "type": "IPlayer", + "originalType": "IPlayer", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IPlayer" + ] + }, + { + "name": "dataZoom", + "description": "缩略轴配置", + "type": "IDataZoomSpec | IDataZoomSpec[]", + "originalType": "IDataZoomSpec | IDataZoomSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IDataZoomSpec" + ] + }, + { + "name": "scrollBar", + "description": "滚动条配置", + "type": "IScrollBarSpec | IScrollBarSpec[]", + "originalType": "IScrollBarSpec | IScrollBarSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IScrollBarSpec" + ] + }, + { + "name": "brush", + "description": "框选配置", + "type": "IBrushSpec", + "originalType": "IBrushSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IBrushSpec" + ] + }, + { + "name": "scales", + "description": "全局 scale 配置", + "type": "IVisualSpecScale[]", + "originalType": "IVisualSpecScale[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IVisualSpecScale" + ] + }, + { + "name": "customMark", + "description": "自定义mark", + "type": "ICustomMarkSpec[]", + "originalType": "ICustomMarkSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICustomMarkSpec" + ] + }, + { + "name": "axes", + "description": "axes 配置", + "type": "ICommonAxisSpec[]", + "originalType": "ICommonAxisSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICommonAxisSpec" + ] + }, + { + "name": "theme", + "description": "默认主题（支持完整主题对象或者主题名称，主题名称需要提前在 `ThemeManager` 中注册）", + "type": "Omit | string", + "originalType": "Omit | string", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ITheme" + ] + }, + { + "name": "background", + "description": "图表背景色配置，优先级高于构造函数中的 background 配置 自1.11.6版本支持渐变色对象的配置", + "type": "IBackgroundSpec", + "originalType": "IBackgroundSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IBackgroundSpec" + ] + }, + { + "name": "stackInverse", + "description": "堆积时是否逆序", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "stackSort", + "description": "堆积时是否排序", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "media", + "description": "媒体查询配置", + "type": "IMediaQuerySpec", + "originalType": "IMediaQuerySpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMediaQuerySpec" + ] + } + ], + "note": "展开自 Omit - 包含 28 个属性（已展开所有继承）", + "expandedFrom": "IChartSpec", + "omittedKeys": [ + "data", + "series" + ] + }, + "Omit": { + "description": "ITreemapSeriesSpec 的属性（排除 tooltip）", + "directExtends": [], + "ownProperties": [ + { + "name": "animationAppear", + "description": "入场动画配置", + "type": "'growIn' | 'fadeIn' | IAnimationConfig", + "originalType": "IAnimationConfig", + "required": false, + "category": "动画配置", + "isSimple": false, + "dependencies": [ + "IAnimationConfig" + ], + "inheritedFrom": "IAnimationSpec" + }, + { + "name": "animationEnter", + "description": "数据新增动画配置", + "type": "IAnimationConfig", + "originalType": "IAnimationConfig", + "required": false, + "category": "动画配置", + "isSimple": false, + "dependencies": [ + "IAnimationConfig" + ], + "inheritedFrom": "IAnimationSpec" + }, + { + "name": "animationUpdate", + "description": "数据更新动画配置", + "type": "IAnimationConfig", + "originalType": "IAnimationConfig", + "required": false, + "category": "动画配置", + "isSimple": false, + "dependencies": [ + "IAnimationConfig" + ], + "inheritedFrom": "IAnimationSpec" + }, + { + "name": "animationExit", + "description": "数据移除动画配置", + "type": "IAnimationConfig", + "originalType": "IAnimationConfig", + "required": false, + "category": "动画配置", + "isSimple": false, + "dependencies": [ + "IAnimationConfig" + ], + "inheritedFrom": "IAnimationSpec" + }, + { + "name": "type", + "description": "type 配置", + "type": "'treemap'", + "originalType": "'treemap'", + "required": true, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "categoryField", + "description": "文本字段", + "type": "string", + "originalType": "string", + "required": true, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "valueField", + "description": "权重字段", + "type": "string", + "originalType": "string", + "required": true, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "data", + "description": "data 配置", + "type": "IHierarchyData", + "originalType": "IHierarchyData", + "required": true, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IHierarchyData" + ] + }, + { + "name": "aspectRatio", + "description": "矩形分割比例", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "splitType", + "description": "splitType 配置", + "type": "TreemapOptions['splitType']", + "originalType": "TreemapOptions['splitType']", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "TreemapOptions['splitType']" + ] + }, + { + "name": "gapWidth", + "description": "节点间距", + "type": "TreemapOptions['gapWidth']", + "originalType": "TreemapOptions['gapWidth']", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "TreemapOptions['gapWidth']" + ] + }, + { + "name": "nodePadding", + "description": "节点内边距", + "type": "TreemapOptions['padding']", + "originalType": "TreemapOptions['padding']", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "TreemapOptions['padding']" + ] + }, + { + "name": "maxDepth", + "description": "展示的最大层级", + "type": "TreemapOptions['maxDepth']", + "originalType": "TreemapOptions['maxDepth']", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "TreemapOptions['maxDepth']" + ] + }, + { + "name": "minVisibleArea", + "description": "当区域面积（px * px）小于设定值后，节点将被隐藏", + "type": "TreemapOptions['minVisibleArea']", + "originalType": "TreemapOptions['minVisibleArea']", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "TreemapOptions['minVisibleArea']" + ] + }, + { + "name": "minChildrenVisibleArea", + "description": "当区域面积（px * px）小于设定值后，节点的子节点将被隐藏", + "type": "TreemapOptions['minChildrenVisibleArea']", + "originalType": "TreemapOptions['minChildrenVisibleArea']", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "TreemapOptions['minChildrenVisibleArea']" + ] + }, + { + "name": "minChildrenVisibleSize", + "description": "当区域宽或高（px）小于设定值后，节点的子节点将被隐藏", + "type": "TreemapOptions['minChildrenVisibleSize']", + "originalType": "TreemapOptions['minChildrenVisibleSize']", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "TreemapOptions['minChildrenVisibleSize']" + ] + }, + { + "name": "roam", + "description": "是否开启拖拽和缩放", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "drill", + "description": "下钻配置", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "drillField", + "description": "钻取字段的field", + "type": "string", + "originalType": "string", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "leaf", + "description": "leaf 配置", + "type": "IMarkSpec", + "originalType": "IMarkSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMarkSpec", + "IRectMarkSpec" + ] + }, + { + "name": "nonLeaf", + "description": "nonLeaf 配置", + "type": "IMarkSpec", + "originalType": "IMarkSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMarkSpec", + "IRectMarkSpec" + ] + }, + { + "name": "label", + "description": "label 配置", + "type": "Omit", + "originalType": "Omit", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "nonLeafLabel", + "description": "nonLeafLabel 配置", + "type": "Omit & {\n position?: TreemapOptions['labelPosition'];\n padding?: TreemapOptions['labelPadding'];\n }", + "originalType": "Omit & {\n position?: TreemapOptions['labelPosition'];\n padding?: TreemapOptions['labelPadding'];\n }", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [] + } + ], + "note": "展开自 Omit - 包含 23 个属性（已展开所有继承）", + "expandedFrom": "ITreemapSeriesSpec", + "omittedKeys": [ + "tooltip" + ] + } + }, + "timestamp": "2025-08-06T08:56:40.176Z", + "version": "1.0.0", + "sourceFile": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/chart/treemap/interface.d.ts", + "complexTypeDefinitions": { + "ITreemapSeriesSpec": { + "typeName": "ITreemapSeriesSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/series/treemap/interface.d.ts", + "note": "类型 ITreemapSeriesSpec 的定义位置" + }, + "ILayoutPaddingSpec": { + "typeName": "ILayoutPaddingSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/layout.d.ts", + "note": "类型 ILayoutPaddingSpec 的定义位置" + }, + "IVisualSpecScale": { + "typeName": "IVisualSpecScale", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/visual.d.ts", + "note": "类型 IVisualSpecScale 的定义位置" + }, + "ISeriesStyle": { + "typeName": "ISeriesStyle", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/series/interface/common.d.ts", + "note": "类型 ISeriesStyle 的定义位置" + }, + "IHoverSpec": { + "typeName": "IHoverSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/interaction/interface/spec.d.ts", + "note": "类型 IHoverSpec 的定义位置" + }, + "ISelectSpec": { + "typeName": "ISelectSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/interaction/interface/spec.d.ts", + "note": "类型 ISelectSpec 的定义位置" + }, + "RegionSpec": { + "typeName": "RegionSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/region/interface.d.ts", + "note": "类型 RegionSpec 的定义位置" + }, + "ITitleSpec": { + "typeName": "ITitleSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/title/interface/spec.d.ts", + "note": "类型 ITitleSpec 的定义位置" + }, + "ILayoutSpec": { + "typeName": "ILayoutSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/layout/interface.d.ts", + "note": "类型 ILayoutSpec 的定义位置" + }, + "ILegendSpec": { + "typeName": "ILegendSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/legend/interface.d.ts", + "note": "类型 ILegendSpec 的定义位置" + }, + "ICrosshairSpec": { + "typeName": "ICrosshairSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/crosshair/interface/spec.d.ts", + "note": "类型 ICrosshairSpec 的定义位置" + }, + "ITooltipSpec": { + "typeName": "ITooltipSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/tooltip/interface/spec.d.ts", + "note": "类型 ITooltipSpec 的定义位置" + }, + "IPlayer": { + "typeName": "IPlayer", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/player/interface/spec.d.ts", + "note": "类型 IPlayer 的定义位置" + }, + "IDataZoomSpec": { + "typeName": "IDataZoomSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/data-zoom/data-zoom/interface.d.ts", + "note": "类型 IDataZoomSpec 的定义位置" + }, + "IScrollBarSpec": { + "typeName": "IScrollBarSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/data-zoom/scroll-bar/interface.d.ts", + "note": "类型 IScrollBarSpec 的定义位置" + }, + "IBrushSpec": { + "typeName": "IBrushSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/brush/interface.d.ts", + "note": "类型 IBrushSpec 的定义位置" + }, + "ICustomMarkSpec": { + "typeName": "ICustomMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 ICustomMarkSpec 的定义位置" + }, + "ICommonAxisSpec": { + "typeName": "ICommonAxisSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/axis/interface.d.ts", + "note": "类型 ICommonAxisSpec 的定义位置" + }, + "ITheme": { + "typeName": "ITheme", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/theme/interface.d.ts", + "note": "类型 ITheme 的定义位置" + }, + "IBackgroundSpec": { + "typeName": "IBackgroundSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 IBackgroundSpec 的定义位置" + }, + "IMediaQuerySpec": { + "typeName": "IMediaQuerySpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/media-query.d.ts", + "note": "类型 IMediaQuerySpec 的定义位置" + }, + "IAnimationConfig": { + "typeName": "IAnimationConfig", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart/src/typings/spec/common.ts", + "note": "类型 IAnimationConfig 的定义位置" + }, + "IHierarchyData": { + "typeName": "IHierarchyData", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 IHierarchyData 的定义位置" + }, + "TreemapOptions['splitType']": { + "typeName": "TreemapOptions['splitType']", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart/src/typings/spec/common.ts", + "note": "类型 TreemapOptions['splitType'] 的定义位置" + }, + "TreemapOptions['gapWidth']": { + "typeName": "TreemapOptions['gapWidth']", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart/src/typings/spec/common.ts", + "note": "类型 TreemapOptions['gapWidth'] 的定义位置" + }, + "TreemapOptions['padding']": { + "typeName": "TreemapOptions['padding']", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart/src/typings/spec/common.ts", + "note": "类型 TreemapOptions['padding'] 的定义位置" + }, + "TreemapOptions['maxDepth']": { + "typeName": "TreemapOptions['maxDepth']", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart/src/typings/spec/common.ts", + "note": "类型 TreemapOptions['maxDepth'] 的定义位置" + }, + "TreemapOptions['minVisibleArea']": { + "typeName": "TreemapOptions['minVisibleArea']", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart/src/typings/spec/common.ts", + "note": "类型 TreemapOptions['minVisibleArea'] 的定义位置" + }, + "TreemapOptions['minChildrenVisibleArea']": { + "typeName": "TreemapOptions['minChildrenVisibleArea']", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart/src/typings/spec/common.ts", + "note": "类型 TreemapOptions['minChildrenVisibleArea'] 的定义位置" + }, + "TreemapOptions['minChildrenVisibleSize']": { + "typeName": "TreemapOptions['minChildrenVisibleSize']", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart/src/typings/spec/common.ts", + "note": "类型 TreemapOptions['minChildrenVisibleSize'] 的定义位置" + }, + "IMarkSpec": { + "typeName": "IMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 IMarkSpec 的定义位置" + }, + "IRectMarkSpec": { + "typeName": "IRectMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/visual.d.ts", + "note": "类型 IRectMarkSpec 的定义位置" + } + }, + "statistics": { + "totalInterfaces": 3, + "totalProperties": 53, + "complexTypes": 32, + "typeFileLocations": 32, + "dependencyTypes": 853 + } +} \ No newline at end of file diff --git a/skills/vchart-development-skill/references/type-meta/venn.json b/skills/vchart-development-skill/references/type-meta/venn.json new file mode 100644 index 0000000000..a4b58cca39 --- /dev/null +++ b/skills/vchart-development-skill/references/type-meta/venn.json @@ -0,0 +1,962 @@ +{ + "typeName": "IVennChartSpec", + "description": "IVennChartSpec 配置规范的完整实现分析", + "inheritanceTree": { + "IVennChartSpec": { + "description": "IVennChartSpec 接口配置", + "directExtends": [ + "IChartSpec", + "IChartExtendsSeriesSpec" + ], + "ownProperties": [ + { + "name": "type", + "description": "type 配置", + "type": "'venn'", + "originalType": "'venn'", + "required": true, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "series", + "description": "series 配置", + "type": "IVennSeriesSpec[]", + "originalType": "IVennSeriesSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IVennSeriesSpec" + ] + } + ] + }, + "IChartSpec": { + "description": "IChartSpec 接口配置", + "directExtends": [], + "ownProperties": [ + { + "name": "type", + "description": "图表类型", + "type": "string", + "originalType": "string", + "required": true, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "data", + "description": "data 配置", + "type": "IData", + "originalType": "IData", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IData" + ] + }, + { + "name": "width", + "description": "画布宽度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "height", + "description": "画布高度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "autoFit", + "description": "是否自适应容器大小", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "padding", + "description": "图表整体 padding 设置", + "type": "ILayoutPaddingSpec", + "originalType": "ILayoutPaddingSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ILayoutPaddingSpec" + ] + }, + { + "name": "color", + "description": "图表色系配置", + "type": "string[] | Omit, 'id'>", + "originalType": "string[] | Omit, 'id'>", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IVisualSpecScale" + ] + }, + { + "name": "series", + "description": "series 配置", + "type": "ISeriesSpec[]", + "originalType": "ISeriesSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISeriesSpec" + ] + }, + { + "name": "seriesStyle", + "description": "系列样式", + "type": "ISeriesStyle", + "originalType": "ISeriesStyle", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISeriesStyle" + ] + }, + { + "name": "animationThreshold", + "description": "自动关闭动画的阀值，对应的是单系列data的长度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "hover", + "description": "hover 交互", + "type": "boolean | IHoverSpec", + "originalType": "boolean | IHoverSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IHoverSpec" + ] + }, + { + "name": "select", + "description": "select 交互", + "type": "boolean | ISelectSpec", + "originalType": "boolean | ISelectSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISelectSpec" + ] + }, + { + "name": "region", + "description": "region配置", + "type": "RegionSpec[]", + "originalType": "RegionSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "RegionSpec" + ] + }, + { + "name": "title", + "description": "图表标题配置", + "type": "ITitleSpec", + "originalType": "ITitleSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ITitleSpec" + ] + }, + { + "name": "layout", + "description": "自定义布局函数", + "type": "ILayoutSpec", + "originalType": "ILayoutSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ILayoutSpec" + ] + }, + { + "name": "legends", + "description": "图例配置", + "type": "ILegendSpec | ILegendSpec[]", + "originalType": "ILegendSpec | ILegendSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ILegendSpec" + ] + }, + { + "name": "crosshair", + "description": "十字辅助线配置", + "type": "ICrosshairSpec | ICrosshairSpec[]", + "originalType": "ICrosshairSpec | ICrosshairSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICrosshairSpec" + ] + }, + { + "name": "tooltip", + "description": "tooltip配置", + "type": "ITooltipSpec", + "originalType": "ITooltipSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ITooltipSpec" + ] + }, + { + "name": "player", + "description": "播放器配置", + "type": "IPlayer", + "originalType": "IPlayer", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IPlayer" + ] + }, + { + "name": "dataZoom", + "description": "缩略轴配置", + "type": "IDataZoomSpec | IDataZoomSpec[]", + "originalType": "IDataZoomSpec | IDataZoomSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IDataZoomSpec" + ] + }, + { + "name": "scrollBar", + "description": "滚动条配置", + "type": "IScrollBarSpec | IScrollBarSpec[]", + "originalType": "IScrollBarSpec | IScrollBarSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IScrollBarSpec" + ] + }, + { + "name": "brush", + "description": "框选配置", + "type": "IBrushSpec", + "originalType": "IBrushSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IBrushSpec" + ] + }, + { + "name": "scales", + "description": "全局 scale 配置", + "type": "IVisualSpecScale[]", + "originalType": "IVisualSpecScale[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IVisualSpecScale" + ] + }, + { + "name": "customMark", + "description": "自定义mark", + "type": "ICustomMarkSpec[]", + "originalType": "ICustomMarkSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICustomMarkSpec" + ] + }, + { + "name": "axes", + "description": "axes 配置", + "type": "ICommonAxisSpec[]", + "originalType": "ICommonAxisSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICommonAxisSpec" + ] + }, + { + "name": "theme", + "description": "默认主题（支持完整主题对象或者主题名称，主题名称需要提前在 `ThemeManager` 中注册）", + "type": "Omit | string", + "originalType": "Omit | string", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ITheme" + ] + }, + { + "name": "background", + "description": "图表背景色配置，优先级高于构造函数中的 background 配置 自1.11.6版本支持渐变色对象的配置", + "type": "IBackgroundSpec", + "originalType": "IBackgroundSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IBackgroundSpec" + ] + }, + { + "name": "stackInverse", + "description": "堆积时是否逆序", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "stackSort", + "description": "堆积时是否排序", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "media", + "description": "媒体查询配置", + "type": "IMediaQuerySpec", + "originalType": "IMediaQuerySpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMediaQuerySpec" + ] + } + ] + }, + "IChartExtendsSeriesSpec": { + "description": "IVennSeriesSpec 的属性（排除 data, morph, stackValue, tooltip）", + "directExtends": [], + "ownProperties": [ + { + "name": "hover", + "description": "图表hover相关交互配置，当值为boolean类型时，表示开启或者关闭该交互 也支持更详细的交互配置", + "type": "IHoverSpec | boolean", + "originalType": "IHoverSpec | boolean", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IHoverSpec" + ], + "inheritedFrom": "ISeriesSpec" + }, + { + "name": "select", + "description": "图表选中相关交互配置，当值为boolean类型时，表示开启或者关闭该交互 也支持更详细的交互配置", + "type": "ISelectSpec | boolean", + "originalType": "ISelectSpec | boolean", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISelectSpec" + ], + "inheritedFrom": "ISeriesSpec" + }, + { + "name": "interactions", + "description": "其他需要按需注册的类型交互", + "type": "IInteractionItemSpec[]", + "originalType": "IInteractionItemSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IInteractionItemSpec" + ], + "inheritedFrom": "ISeriesSpec" + }, + { + "name": "type", + "description": "type 配置", + "type": "'venn'", + "originalType": "'venn'", + "required": true, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "name", + "description": "系列名称", + "type": "string", + "originalType": "string", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ISeriesSpec" + }, + { + "name": "id", + "description": "数据唯一标识", + "type": "string | number", + "originalType": "StringOrNumber", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ISeriesSpec" + }, + { + "name": "dataIndex", + "description": "系列关联的数据索引", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ISeriesSpec" + }, + { + "name": "dataId", + "description": "系列关联的数据id", + "type": "string | number", + "originalType": "StringOrNumber", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ISeriesSpec" + }, + { + "name": "dataKey", + "description": "dataKey用于绑定数据与Mark的关系, 该配置在动画中非常重要.", + "type": "string | string[] | ((data: Datum, index: number) => string)", + "originalType": "DataKeyType", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ISeriesSpec" + }, + { + "name": "regionIndex", + "description": "系列关联的region索引", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ISeriesSpec" + }, + { + "name": "regionId", + "description": "系列关联的region id", + "type": "string | number", + "originalType": "StringOrNumber", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ISeriesSpec" + }, + { + "name": "seriesField", + "description": "分组字段", + "type": "string", + "originalType": "string", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ISeriesSpec" + }, + { + "name": "seriesStyle", + "description": "系列样式", + "type": "ISeriesStyle", + "originalType": "ISeriesStyle", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISeriesStyle" + ], + "inheritedFrom": "ISeriesSpec" + }, + { + "name": "stack", + "description": "是否对数据进行堆叠处理", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ISeriesSpec" + }, + { + "name": "totalLabel", + "description": "堆叠汇总标签", + "type": "ITotalLabelSpec", + "originalType": "ITotalLabelSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ITotalLabelSpec" + ], + "inheritedFrom": "ISeriesSpec" + }, + { + "name": "percent", + "description": "是否对数据进行百分比处理", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ISeriesSpec" + }, + { + "name": "stackOffsetSilhouette", + "description": "是否围绕中心轴偏移轮廓", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ISeriesSpec" + }, + { + "name": "invalidType", + "description": "非合规数据点连接方式 'break'指在该数据点处断开 'link' 指忽略该点保持连续 'zero' 指该点默认数值为0 'ignore' 指不处理", + "type": "'zero' | 'ignore' | 'link' | 'break'", + "originalType": "IInvalidType", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ISeriesSpec" + }, + { + "name": "animation", + "description": "是否开启动画", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ISeriesSpec" + }, + { + "name": "animationThreshold", + "description": "自动关闭动画的阀值，对应的是单系列data的长度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ISeriesSpec" + }, + { + "name": "support3d", + "description": "是否支持3d视角", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ISeriesSpec" + }, + { + "name": "extensionMark", + "description": "系列的扩展mark，能够获取系列上的数据", + "type": "(IExtensionMarkSpec> | IExtensionGroupMarkSpec)[]", + "originalType": "(IExtensionMarkSpec> | IExtensionGroupMarkSpec)[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IExtensionMarkSpec", + "IExtensionGroupMarkSpec" + ], + "inheritedFrom": "ISeriesSpec" + }, + { + "name": "zIndex", + "description": "今当通过`series`配置的时候，才会生效", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "ISeriesSpec" + }, + { + "name": "animationAppear", + "description": "入场动画配置", + "type": "'growIn' | 'fadeIn' | 'scaleIn' | IAnimationConfig", + "originalType": "IAnimationConfig", + "required": false, + "category": "动画配置", + "isSimple": false, + "dependencies": [ + "IAnimationConfig" + ], + "inheritedFrom": "IAnimationSpec" + }, + { + "name": "animationEnter", + "description": "数据新增动画配置", + "type": "IAnimationConfig", + "originalType": "IAnimationConfig", + "required": false, + "category": "动画配置", + "isSimple": false, + "dependencies": [ + "IAnimationConfig" + ], + "inheritedFrom": "IAnimationSpec" + }, + { + "name": "animationUpdate", + "description": "数据更新动画配置", + "type": "IAnimationConfig", + "originalType": "IAnimationConfig", + "required": false, + "category": "动画配置", + "isSimple": false, + "dependencies": [ + "IAnimationConfig" + ], + "inheritedFrom": "IAnimationSpec" + }, + { + "name": "animationExit", + "description": "数据移除动画配置", + "type": "IAnimationConfig", + "originalType": "IAnimationConfig", + "required": false, + "category": "动画配置", + "isSimple": false, + "dependencies": [ + "IAnimationConfig" + ], + "inheritedFrom": "IAnimationSpec" + }, + { + "name": "categoryField", + "description": "类别字段", + "type": "string", + "originalType": "string", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "valueField", + "description": "权重字段", + "type": "string", + "originalType": "string", + "required": true, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "circle", + "description": "circle 配置", + "type": "IMarkSpec", + "originalType": "IMarkSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMarkSpec", + "IArcMarkSpec" + ] + }, + { + "name": "overlap", + "description": "overlap 配置", + "type": "IMarkSpec", + "originalType": "IMarkSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMarkSpec", + "IPathMarkSpec" + ] + }, + { + "name": "label", + "description": "label 配置", + "type": "Omit", + "originalType": "Omit", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ILabelSpec" + ] + }, + { + "name": "overlapLabel", + "description": "overlapLabel 配置", + "type": "Omit", + "originalType": "Omit", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ILabelSpec" + ] + } + ], + "note": "展开自 Omit - 包含 33 个属性（已展开所有继承）", + "expandedFrom": "IVennSeriesSpec", + "omittedKeys": [ + "data", + "morph", + "stackValue", + "tooltip" + ] + } + }, + "timestamp": "2025-08-06T07:51:16.635Z", + "version": "1.0.0", + "sourceFile": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/chart/venn/interface.d.ts", + "complexTypeDefinitions": { + "IVennSeriesSpec": { + "typeName": "IVennSeriesSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/series/venn/interface.d.ts", + "note": "类型 IVennSeriesSpec 的定义位置" + }, + "IData": { + "typeName": "IData", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 IData 的定义位置" + }, + "ILayoutPaddingSpec": { + "typeName": "ILayoutPaddingSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/layout.d.ts", + "note": "类型 ILayoutPaddingSpec 的定义位置" + }, + "IVisualSpecScale": { + "typeName": "IVisualSpecScale", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/visual.d.ts", + "note": "类型 IVisualSpecScale 的定义位置" + }, + "ISeriesSpec": { + "typeName": "ISeriesSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 ISeriesSpec 的定义位置" + }, + "ISeriesStyle": { + "typeName": "ISeriesStyle", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/series/interface/common.d.ts", + "note": "类型 ISeriesStyle 的定义位置" + }, + "IHoverSpec": { + "typeName": "IHoverSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/interaction/interface/spec.d.ts", + "note": "类型 IHoverSpec 的定义位置" + }, + "ISelectSpec": { + "typeName": "ISelectSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/interaction/interface/spec.d.ts", + "note": "类型 ISelectSpec 的定义位置" + }, + "RegionSpec": { + "typeName": "RegionSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/region/interface.d.ts", + "note": "类型 RegionSpec 的定义位置" + }, + "ITitleSpec": { + "typeName": "ITitleSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/title/interface/spec.d.ts", + "note": "类型 ITitleSpec 的定义位置" + }, + "ILayoutSpec": { + "typeName": "ILayoutSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/layout/interface.d.ts", + "note": "类型 ILayoutSpec 的定义位置" + }, + "ILegendSpec": { + "typeName": "ILegendSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/legend/interface.d.ts", + "note": "类型 ILegendSpec 的定义位置" + }, + "ICrosshairSpec": { + "typeName": "ICrosshairSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/crosshair/interface/spec.d.ts", + "note": "类型 ICrosshairSpec 的定义位置" + }, + "ITooltipSpec": { + "typeName": "ITooltipSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/tooltip/interface/spec.d.ts", + "note": "类型 ITooltipSpec 的定义位置" + }, + "IPlayer": { + "typeName": "IPlayer", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/player/interface/spec.d.ts", + "note": "类型 IPlayer 的定义位置" + }, + "IDataZoomSpec": { + "typeName": "IDataZoomSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/data-zoom/data-zoom/interface.d.ts", + "note": "类型 IDataZoomSpec 的定义位置" + }, + "IScrollBarSpec": { + "typeName": "IScrollBarSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/data-zoom/scroll-bar/interface.d.ts", + "note": "类型 IScrollBarSpec 的定义位置" + }, + "IBrushSpec": { + "typeName": "IBrushSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/brush/interface.d.ts", + "note": "类型 IBrushSpec 的定义位置" + }, + "ICustomMarkSpec": { + "typeName": "ICustomMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 ICustomMarkSpec 的定义位置" + }, + "ICommonAxisSpec": { + "typeName": "ICommonAxisSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/axis/interface.d.ts", + "note": "类型 ICommonAxisSpec 的定义位置" + }, + "ITheme": { + "typeName": "ITheme", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/theme/interface.d.ts", + "note": "类型 ITheme 的定义位置" + }, + "IBackgroundSpec": { + "typeName": "IBackgroundSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 IBackgroundSpec 的定义位置" + }, + "IMediaQuerySpec": { + "typeName": "IMediaQuerySpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/media-query.d.ts", + "note": "类型 IMediaQuerySpec 的定义位置" + }, + "IInteractionItemSpec": { + "typeName": "IInteractionItemSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/interaction/interface/spec.d.ts", + "note": "类型 IInteractionItemSpec 的定义位置" + }, + "ITotalLabelSpec": { + "typeName": "ITotalLabelSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/label/interface.d.ts", + "note": "类型 ITotalLabelSpec 的定义位置" + }, + "IExtensionMarkSpec": { + "typeName": "IExtensionMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 IExtensionMarkSpec 的定义位置" + }, + "IExtensionGroupMarkSpec": { + "typeName": "IExtensionGroupMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 IExtensionGroupMarkSpec 的定义位置" + }, + "IAnimationConfig": { + "typeName": "IAnimationConfig", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart/src/typings/spec/common.ts", + "note": "类型 IAnimationConfig 的定义位置" + }, + "IMarkSpec": { + "typeName": "IMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 IMarkSpec 的定义位置" + }, + "IArcMarkSpec": { + "typeName": "IArcMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/visual.d.ts", + "note": "类型 IArcMarkSpec 的定义位置" + }, + "IPathMarkSpec": { + "typeName": "IPathMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/visual.d.ts", + "note": "类型 IPathMarkSpec 的定义位置" + }, + "ILabelSpec": { + "typeName": "ILabelSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/label/interface.d.ts", + "note": "类型 ILabelSpec 的定义位置" + } + }, + "statistics": { + "totalInterfaces": 3, + "totalProperties": 65, + "complexTypes": 32, + "typeFileLocations": 32, + "dependencyTypes": 850 + } +} \ No newline at end of file diff --git a/skills/vchart-development-skill/references/type-meta/waterfall.json b/skills/vchart-development-skill/references/type-meta/waterfall.json new file mode 100644 index 0000000000..49631fa2a2 --- /dev/null +++ b/skills/vchart-development-skill/references/type-meta/waterfall.json @@ -0,0 +1,798 @@ +{ + "typeName": "IWaterfallChartSpec", + "description": "IWaterfallChartSpec 配置规范的完整实现分析", + "inheritanceTree": { + "IWaterfallChartSpec": { + "description": "IWaterfallChartSpec 接口配置", + "directExtends": [ + "ICartesianChartSpec", + "IChartExtendsSeriesSpec" + ], + "ownProperties": [ + { + "name": "type", + "description": "type 配置", + "type": "'waterfall'", + "originalType": "'waterfall'", + "required": true, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "series", + "description": "系列配置", + "type": "IWaterfallSeriesSpec[]", + "originalType": "IWaterfallSeriesSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IWaterfallSeriesSpec" + ] + } + ] + }, + "ICartesianChartSpec": { + "description": "ICartesianChartSpec 接口配置", + "directExtends": [ + "IChartSpec" + ], + "ownProperties": [ + { + "name": "direction", + "description": "图表的方向配置。 - 'vertical' 垂直布局，即常见的直角坐标系布局，x 轴位于底部，y 轴位于左侧。 - 'horizontal' 水平布局，可理解为 x 轴和 y 轴位置互换。", + "type": "'default' | 'reverse'", + "originalType": "DirectionType", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "axes", + "description": "笛卡尔坐标系的坐标轴配置", + "type": "ICartesianAxisSpec[]", + "originalType": "ICartesianAxisSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICartesianAxisSpec" + ] + }, + { + "name": "crosshair", + "description": "十字辅助线配置", + "type": "ICartesianCrosshairSpec | ICartesianCrosshairSpec[]", + "originalType": "ICartesianCrosshairSpec | ICartesianCrosshairSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICartesianCrosshairSpec" + ] + }, + { + "name": "markLine", + "description": "参考线配置", + "type": "IMarkLineSpec | IMarkLineSpec[]", + "originalType": "IMarkLineSpec | IMarkLineSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMarkLineSpec" + ] + }, + { + "name": "markArea", + "description": "参考区域配置", + "type": "IMarkAreaSpec | IMarkAreaSpec[]", + "originalType": "IMarkAreaSpec | IMarkAreaSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMarkAreaSpec" + ] + }, + { + "name": "markPoint", + "description": "参考点配置", + "type": "IMarkPointSpec | IMarkPointSpec[]", + "originalType": "IMarkPointSpec | IMarkPointSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMarkPointSpec" + ] + } + ] + }, + "IChartSpec": { + "description": "IChartSpec 接口配置", + "directExtends": [], + "ownProperties": [ + { + "name": "type", + "description": "图表类型", + "type": "string", + "originalType": "string", + "required": true, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "data", + "description": "data 配置", + "type": "IData", + "originalType": "IData", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IData" + ] + }, + { + "name": "width", + "description": "画布宽度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "height", + "description": "画布高度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "autoFit", + "description": "是否自适应容器大小", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "padding", + "description": "图表整体 padding 设置", + "type": "ILayoutPaddingSpec", + "originalType": "ILayoutPaddingSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ILayoutPaddingSpec" + ] + }, + { + "name": "color", + "description": "图表色系配置", + "type": "string[] | Omit, 'id'>", + "originalType": "string[] | Omit, 'id'>", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IVisualSpecScale" + ] + }, + { + "name": "series", + "description": "series 配置", + "type": "ISeriesSpec[]", + "originalType": "ISeriesSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISeriesSpec" + ] + }, + { + "name": "seriesStyle", + "description": "系列样式", + "type": "ISeriesStyle", + "originalType": "ISeriesStyle", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISeriesStyle" + ] + }, + { + "name": "animationThreshold", + "description": "自动关闭动画的阀值，对应的是单系列data的长度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "hover", + "description": "hover 交互", + "type": "boolean | IHoverSpec", + "originalType": "boolean | IHoverSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IHoverSpec" + ] + }, + { + "name": "select", + "description": "select 交互", + "type": "boolean | ISelectSpec", + "originalType": "boolean | ISelectSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISelectSpec" + ] + }, + { + "name": "region", + "description": "region配置", + "type": "RegionSpec[]", + "originalType": "RegionSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "RegionSpec" + ] + }, + { + "name": "title", + "description": "图表标题配置", + "type": "ITitleSpec", + "originalType": "ITitleSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ITitleSpec" + ] + }, + { + "name": "layout", + "description": "自定义布局函数", + "type": "ILayoutSpec", + "originalType": "ILayoutSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ILayoutSpec" + ] + }, + { + "name": "legends", + "description": "图例配置", + "type": "ILegendSpec | ILegendSpec[]", + "originalType": "ILegendSpec | ILegendSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ILegendSpec" + ] + }, + { + "name": "crosshair", + "description": "十字辅助线配置", + "type": "ICrosshairSpec | ICrosshairSpec[]", + "originalType": "ICrosshairSpec | ICrosshairSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICrosshairSpec" + ] + }, + { + "name": "tooltip", + "description": "tooltip配置", + "type": "ITooltipSpec", + "originalType": "ITooltipSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ITooltipSpec" + ] + }, + { + "name": "player", + "description": "播放器配置", + "type": "IPlayer", + "originalType": "IPlayer", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IPlayer" + ] + }, + { + "name": "dataZoom", + "description": "缩略轴配置", + "type": "IDataZoomSpec | IDataZoomSpec[]", + "originalType": "IDataZoomSpec | IDataZoomSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IDataZoomSpec" + ] + }, + { + "name": "scrollBar", + "description": "滚动条配置", + "type": "IScrollBarSpec | IScrollBarSpec[]", + "originalType": "IScrollBarSpec | IScrollBarSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IScrollBarSpec" + ] + }, + { + "name": "brush", + "description": "框选配置", + "type": "IBrushSpec", + "originalType": "IBrushSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IBrushSpec" + ] + }, + { + "name": "scales", + "description": "全局 scale 配置", + "type": "IVisualSpecScale[]", + "originalType": "IVisualSpecScale[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IVisualSpecScale" + ] + }, + { + "name": "customMark", + "description": "自定义mark", + "type": "ICustomMarkSpec[]", + "originalType": "ICustomMarkSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICustomMarkSpec" + ] + }, + { + "name": "axes", + "description": "axes 配置", + "type": "ICommonAxisSpec[]", + "originalType": "ICommonAxisSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICommonAxisSpec" + ] + }, + { + "name": "theme", + "description": "默认主题（支持完整主题对象或者主题名称，主题名称需要提前在 `ThemeManager` 中注册）", + "type": "Omit | string", + "originalType": "Omit | string", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ITheme" + ] + }, + { + "name": "background", + "description": "图表背景色配置，优先级高于构造函数中的 background 配置 自1.11.6版本支持渐变色对象的配置", + "type": "IBackgroundSpec", + "originalType": "IBackgroundSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IBackgroundSpec" + ] + }, + { + "name": "stackInverse", + "description": "堆积时是否逆序", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "stackSort", + "description": "堆积时是否排序", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "media", + "description": "媒体查询配置", + "type": "IMediaQuerySpec", + "originalType": "IMediaQuerySpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMediaQuerySpec" + ] + } + ] + }, + "IChartExtendsSeriesSpec": { + "description": "IWaterfallSeriesSpec 的属性（排除 data, morph, stackValue, tooltip）", + "directExtends": [], + "ownProperties": [ + { + "name": "animationAppear", + "description": "入场动画配置", + "type": "BarAppearPreset | IAnimationConfig", + "originalType": "IAnimationConfig", + "required": false, + "category": "动画配置", + "isSimple": false, + "dependencies": [ + "IAnimationConfig" + ], + "inheritedFrom": "IAnimationSpec" + }, + { + "name": "animationEnter", + "description": "数据新增动画配置", + "type": "IAnimationConfig", + "originalType": "IAnimationConfig", + "required": false, + "category": "动画配置", + "isSimple": false, + "dependencies": [ + "IAnimationConfig" + ], + "inheritedFrom": "IAnimationSpec" + }, + { + "name": "animationUpdate", + "description": "数据更新动画配置", + "type": "IAnimationConfig", + "originalType": "IAnimationConfig", + "required": false, + "category": "动画配置", + "isSimple": false, + "dependencies": [ + "IAnimationConfig" + ], + "inheritedFrom": "IAnimationSpec" + }, + { + "name": "animationExit", + "description": "数据移除动画配置", + "type": "IAnimationConfig", + "originalType": "IAnimationConfig", + "required": false, + "category": "动画配置", + "isSimple": false, + "dependencies": [ + "IAnimationConfig" + ], + "inheritedFrom": "IAnimationSpec" + }, + { + "name": "type", + "description": "此类型下，默认在数据最后增加一条总计信息", + "type": "'waterfall'", + "originalType": "'waterfall'", + "required": true, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "total", + "description": "总计配置", + "type": "IWaterfallTotalEnd | IWaterfallTotalField | IWaterfallTotalCustom", + "originalType": "IWaterfallTotalEnd | IWaterfallTotalField | IWaterfallTotalCustom", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IWaterfallTotalEnd", + "IWaterfallTotalField", + "IWaterfallTotalCustom" + ] + }, + { + "name": "leaderLine", + "description": "leaderLine 配置", + "type": "IMarkSpec", + "originalType": "IMarkSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMarkSpec", + "IRuleMarkSpec" + ] + }, + { + "name": "stackLabel", + "description": "stackLabel 配置", + "type": "ILabelSpec & {\n position?: IWaterfallStackLabelPosition;\n offset?: number;\n valueType?: IWaterfallStackLabelValueType;\n }", + "originalType": "ILabelSpec & {\n position?: IWaterfallStackLabelPosition;\n offset?: number;\n valueType?: IWaterfallStackLabelValueType;\n }", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ILabelSpec" + ] + }, + { + "name": "totalLabel", + "description": "totalLabel 配置", + "type": "ITotalLabelSpec & {\n position?: IWaterfallStackLabelPosition;\n offset?: number;\n valueType?: IWaterfallStackLabelValueType;\n }", + "originalType": "ITotalLabelSpec & {\n position?: IWaterfallStackLabelPosition;\n offset?: number;\n valueType?: IWaterfallStackLabelValueType;\n }", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ITotalLabelSpec" + ] + }, + { + "name": "label", + "description": "label 配置", + "type": "ILabelSpec & {\n visible: boolean;\n offset?: number;\n }", + "originalType": "ILabelSpec & {\n visible: boolean;\n offset?: number;\n }", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ILabelSpec" + ] + } + ], + "note": "展开自 Omit - 包含 10 个属性（已展开所有继承）", + "expandedFrom": "IWaterfallSeriesSpec", + "omittedKeys": [ + "data", + "morph", + "stackValue", + "tooltip" + ] + } + }, + "timestamp": "2025-08-06T08:58:04.127Z", + "version": "1.0.0", + "sourceFile": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/chart/waterfall/interface.d.ts", + "complexTypeDefinitions": { + "IWaterfallSeriesSpec": { + "typeName": "IWaterfallSeriesSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/series/waterfall/interface.d.ts", + "note": "类型 IWaterfallSeriesSpec 的定义位置" + }, + "ICartesianAxisSpec": { + "typeName": "ICartesianAxisSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/axis/cartesian/interface/spec.d.ts", + "note": "类型 ICartesianAxisSpec 的定义位置" + }, + "ICartesianCrosshairSpec": { + "typeName": "ICartesianCrosshairSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/crosshair/interface/spec.d.ts", + "note": "类型 ICartesianCrosshairSpec 的定义位置" + }, + "IMarkLineSpec": { + "typeName": "IMarkLineSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/marker/mark-line/interface/spec.d.ts", + "note": "类型 IMarkLineSpec 的定义位置" + }, + "IMarkAreaSpec": { + "typeName": "IMarkAreaSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/marker/mark-area/interface/spec.d.ts", + "note": "类型 IMarkAreaSpec 的定义位置" + }, + "IMarkPointSpec": { + "typeName": "IMarkPointSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/marker/mark-point/interface/spec.d.ts", + "note": "类型 IMarkPointSpec 的定义位置" + }, + "IData": { + "typeName": "IData", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 IData 的定义位置" + }, + "ILayoutPaddingSpec": { + "typeName": "ILayoutPaddingSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/layout.d.ts", + "note": "类型 ILayoutPaddingSpec 的定义位置" + }, + "IVisualSpecScale": { + "typeName": "IVisualSpecScale", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/visual.d.ts", + "note": "类型 IVisualSpecScale 的定义位置" + }, + "ISeriesSpec": { + "typeName": "ISeriesSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 ISeriesSpec 的定义位置" + }, + "ISeriesStyle": { + "typeName": "ISeriesStyle", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/series/interface/common.d.ts", + "note": "类型 ISeriesStyle 的定义位置" + }, + "IHoverSpec": { + "typeName": "IHoverSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/interaction/interface/spec.d.ts", + "note": "类型 IHoverSpec 的定义位置" + }, + "ISelectSpec": { + "typeName": "ISelectSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/interaction/interface/spec.d.ts", + "note": "类型 ISelectSpec 的定义位置" + }, + "RegionSpec": { + "typeName": "RegionSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/region/interface.d.ts", + "note": "类型 RegionSpec 的定义位置" + }, + "ITitleSpec": { + "typeName": "ITitleSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/title/interface/spec.d.ts", + "note": "类型 ITitleSpec 的定义位置" + }, + "ILayoutSpec": { + "typeName": "ILayoutSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/layout/interface.d.ts", + "note": "类型 ILayoutSpec 的定义位置" + }, + "ILegendSpec": { + "typeName": "ILegendSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/legend/interface.d.ts", + "note": "类型 ILegendSpec 的定义位置" + }, + "ICrosshairSpec": { + "typeName": "ICrosshairSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/crosshair/interface/spec.d.ts", + "note": "类型 ICrosshairSpec 的定义位置" + }, + "ITooltipSpec": { + "typeName": "ITooltipSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/tooltip/interface/spec.d.ts", + "note": "类型 ITooltipSpec 的定义位置" + }, + "IPlayer": { + "typeName": "IPlayer", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/player/interface/spec.d.ts", + "note": "类型 IPlayer 的定义位置" + }, + "IDataZoomSpec": { + "typeName": "IDataZoomSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/data-zoom/data-zoom/interface.d.ts", + "note": "类型 IDataZoomSpec 的定义位置" + }, + "IScrollBarSpec": { + "typeName": "IScrollBarSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/data-zoom/scroll-bar/interface.d.ts", + "note": "类型 IScrollBarSpec 的定义位置" + }, + "IBrushSpec": { + "typeName": "IBrushSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/brush/interface.d.ts", + "note": "类型 IBrushSpec 的定义位置" + }, + "ICustomMarkSpec": { + "typeName": "ICustomMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 ICustomMarkSpec 的定义位置" + }, + "ICommonAxisSpec": { + "typeName": "ICommonAxisSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/axis/interface.d.ts", + "note": "类型 ICommonAxisSpec 的定义位置" + }, + "ITheme": { + "typeName": "ITheme", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/theme/interface.d.ts", + "note": "类型 ITheme 的定义位置" + }, + "IBackgroundSpec": { + "typeName": "IBackgroundSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 IBackgroundSpec 的定义位置" + }, + "IMediaQuerySpec": { + "typeName": "IMediaQuerySpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/media-query.d.ts", + "note": "类型 IMediaQuerySpec 的定义位置" + }, + "IAnimationConfig": { + "typeName": "IAnimationConfig", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart/src/typings/spec/common.ts", + "note": "类型 IAnimationConfig 的定义位置" + }, + "IWaterfallTotalEnd": { + "typeName": "IWaterfallTotalEnd", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/series/waterfall/interface.d.ts", + "note": "类型 IWaterfallTotalEnd 的定义位置" + }, + "IWaterfallTotalField": { + "typeName": "IWaterfallTotalField", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/series/waterfall/interface.d.ts", + "note": "类型 IWaterfallTotalField 的定义位置" + }, + "IWaterfallTotalCustom": { + "typeName": "IWaterfallTotalCustom", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/series/waterfall/interface.d.ts", + "note": "类型 IWaterfallTotalCustom 的定义位置" + }, + "IMarkSpec": { + "typeName": "IMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/spec/common.d.ts", + "note": "类型 IMarkSpec 的定义位置" + }, + "IRuleMarkSpec": { + "typeName": "IRuleMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/typings/visual.d.ts", + "note": "类型 IRuleMarkSpec 的定义位置" + }, + "ILabelSpec": { + "typeName": "ILabelSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/label/interface.d.ts", + "note": "类型 ILabelSpec 的定义位置" + }, + "ITotalLabelSpec": { + "typeName": "ITotalLabelSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart-types/types/component/label/interface.d.ts", + "note": "类型 ITotalLabelSpec 的定义位置" + } + }, + "statistics": { + "totalInterfaces": 4, + "totalProperties": 48, + "complexTypes": 36, + "typeFileLocations": 36, + "dependencyTypes": 865 + } +} \ No newline at end of file diff --git a/skills/vchart-development-skill/references/type-meta/wordCloud.json b/skills/vchart-development-skill/references/type-meta/wordCloud.json new file mode 100644 index 0000000000..d6d1e1a92f --- /dev/null +++ b/skills/vchart-development-skill/references/type-meta/wordCloud.json @@ -0,0 +1,1167 @@ +{ + "typeName": "IWordCloudChartSpec", + "description": "IWordCloudChartSpec 配置规范的完整实现分析", + "inheritanceTree": { + "IWordCloudChartSpec": { + "description": "IWordCloudChartSpec 接口配置", + "directExtends": [ + "IChartSpec", + "IChartExtendsSeriesSpec" + ], + "ownProperties": [ + { + "name": "type", + "description": "type 配置", + "type": "'wordCloud'", + "originalType": "'wordCloud'", + "required": true, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "series", + "description": "series 配置", + "type": "IWordCloudSeriesSpec[]", + "originalType": "IWordCloudSeriesSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IWordCloudSeriesSpec" + ] + } + ] + }, + "IChartSpec": { + "description": "chart spec", + "directExtends": [], + "ownProperties": [ + { + "name": "type", + "description": "图表类型", + "type": "string", + "originalType": "string", + "required": true, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "data", + "description": "数据", + "type": "IData", + "originalType": "IData", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IData" + ] + }, + { + "name": "width", + "description": "画布宽度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "height", + "description": "画布高度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "autoFit", + "description": "图表宽高是否自适应容器，浏览器环境下默认为 true。\n该配置的优先级高于构造函数中的 autoFit 配置。\n如果用户配置了 width，则以用户配置的 width 为准，height 同理。", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "padding", + "description": "图表整体 padding 设置", + "type": "ILayoutPaddingSpec", + "originalType": "ILayoutPaddingSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ILayoutPaddingSpec" + ] + }, + { + "name": "color", + "description": "图表色系配置", + "type": "string[] | Omit, 'id'>", + "originalType": "string[] | Omit, 'id'>", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IVisualSpecScale" + ] + }, + { + "name": "series", + "description": "系列", + "type": "ISeriesSpec[]", + "originalType": "ISeriesSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISeriesSpec" + ] + }, + { + "name": "seriesStyle", + "description": "系列样式", + "type": "ISeriesStyle", + "originalType": "ISeriesStyle", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISeriesStyle" + ] + }, + { + "name": "animationThreshold", + "description": "自动关闭动画的阀值，对应的是单系列data的长度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "since": "1.2.0" + }, + { + "name": "hover", + "description": "hover 交互", + "type": "boolean | IHoverSpec", + "originalType": "boolean | IHoverSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IHoverSpec" + ] + }, + { + "name": "select", + "description": "select 交互", + "type": "boolean | ISelectSpec", + "originalType": "boolean | ISelectSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISelectSpec" + ] + }, + { + "name": "region", + "description": "region配置", + "type": "RegionSpec[]", + "originalType": "RegionSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "RegionSpec" + ] + }, + { + "name": "title", + "description": "图表标题配置", + "type": "ITitleSpec", + "originalType": "ITitleSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ITitleSpec" + ] + }, + { + "name": "layout", + "description": "布局配置", + "type": "ILayoutSpec", + "originalType": "ILayoutSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ILayoutSpec" + ] + }, + { + "name": "legends", + "description": "图例配置", + "type": "ILegendSpec | ILegendSpec[]", + "originalType": "ILegendSpec | ILegendSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ILegendSpec" + ] + }, + { + "name": "crosshair", + "description": "十字辅助线配置", + "type": "ICrosshairSpec | ICrosshairSpec[]", + "originalType": "ICrosshairSpec | ICrosshairSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICrosshairSpec" + ] + }, + { + "name": "tooltip", + "description": "tooltip配置", + "type": "ITooltipSpec", + "originalType": "ITooltipSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ITooltipSpec" + ] + }, + { + "name": "player", + "description": "播放器配置", + "type": "IPlayer", + "originalType": "IPlayer", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IPlayer" + ] + }, + { + "name": "dataZoom", + "description": "缩略轴配置", + "type": "IDataZoomSpec | IDataZoomSpec[]", + "originalType": "IDataZoomSpec | IDataZoomSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IDataZoomSpec" + ] + }, + { + "name": "scrollBar", + "description": "滚动条配置", + "type": "IScrollBarSpec | IScrollBarSpec[]", + "originalType": "IScrollBarSpec | IScrollBarSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IScrollBarSpec" + ] + }, + { + "name": "brush", + "description": "框选配置", + "type": "IBrushSpec", + "originalType": "IBrushSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IBrushSpec" + ] + }, + { + "name": "scales", + "description": "全局 scale 配置", + "type": "IVisualSpecScale[]", + "originalType": "IVisualSpecScale[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IVisualSpecScale" + ] + }, + { + "name": "customMark", + "description": "自定义mark", + "type": "ICustomMarkSpec[]", + "originalType": "ICustomMarkSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICustomMarkSpec" + ] + }, + { + "name": "axes", + "description": "轴", + "type": "ICommonAxisSpec[]", + "originalType": "ICommonAxisSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ICommonAxisSpec" + ] + }, + { + "name": "theme", + "description": "图表上的主题定义。\n可以直接配置主题名，前提是该主题名已经注册", + "type": "Omit | string", + "originalType": "Omit | string", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ITheme" + ] + }, + { + "name": "background", + "description": "图表背景色配置，优先级高于构造函数中的 background 配置\n自1.11.6版本支持渐变色对象的配置", + "type": "IBackgroundSpec", + "originalType": "IBackgroundSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IBackgroundSpec" + ] + }, + { + "name": "stackInverse", + "description": "堆积时是否逆序", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "since": "1.4.0", + "defaultValue": "false" + }, + { + "name": "stackSort", + "description": "堆积时是否排序", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "since": "1.10.4", + "defaultValue": "false" + }, + { + "name": "media", + "description": "媒体查询配置", + "type": "IMediaQuerySpec", + "originalType": "IMediaQuerySpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMediaQuerySpec" + ], + "since": "1.8.0" + } + ] + }, + "IChartExtendsSeriesSpec": { + "description": "IWordCloudSeriesSpec 的属性（排除 data, morph, stackValue, tooltip）", + "directExtends": [], + "ownProperties": [ + { + "name": "hover", + "description": "图表hover相关交互配置，当值为boolean类型时，表示开启或者关闭该交互\n也支持更详细的交互配置", + "type": "IHoverSpec | boolean", + "originalType": "IHoverSpec | boolean", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IHoverSpec" + ], + "inheritedFrom": "IWordCloudSeriesBaseSpec" + }, + { + "name": "select", + "description": "图表选中相关交互配置，当值为boolean类型时，表示开启或者关闭该交互\n也支持更详细的交互配置", + "type": "ISelectSpec | boolean", + "originalType": "ISelectSpec | boolean", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISelectSpec" + ], + "inheritedFrom": "IWordCloudSeriesBaseSpec" + }, + { + "name": "interactions", + "description": "其他需要按需注册的类型交互", + "type": "IInteractionItemSpec[]", + "originalType": "IInteractionItemSpec[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IInteractionItemSpec" + ], + "inheritedFrom": "IWordCloudSeriesBaseSpec" + }, + { + "name": "type", + "description": "type 配置", + "type": "'wordCloud'", + "originalType": "'wordCloud'", + "required": true, + "category": "未分类", + "isSimple": true, + "dependencies": [] + }, + { + "name": "name", + "description": "系列名称", + "type": "string", + "originalType": "string", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IWordCloudSeriesBaseSpec" + }, + { + "name": "id", + "description": "用户自定义的 series id", + "type": "string | number", + "originalType": "StringOrNumber", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IWordCloudSeriesBaseSpec" + }, + { + "name": "dataIndex", + "description": "系列关联的数据索引", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "defaultValue": "0", + "inheritedFrom": "IWordCloudSeriesBaseSpec" + }, + { + "name": "dataId", + "description": "系列关联的数据id", + "type": "string | number", + "originalType": "StringOrNumber", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IWordCloudSeriesBaseSpec" + }, + { + "name": "dataKey", + "description": "dataKey用于绑定数据与Mark的关系, 该配置在动画中非常重要.", + "type": "string | string[] | ((data: Datum, index: number) => string)", + "originalType": "DataKeyType", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IWordCloudSeriesBaseSpec" + }, + { + "name": "regionIndex", + "description": "系列关联的region索引", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "defaultValue": "0", + "inheritedFrom": "IWordCloudSeriesBaseSpec" + }, + { + "name": "regionId", + "description": "系列关联的region id", + "type": "string | number", + "originalType": "StringOrNumber", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IWordCloudSeriesBaseSpec" + }, + { + "name": "seriesField", + "description": "分组字段", + "type": "string", + "originalType": "string", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IWordCloudSeriesBaseSpec" + }, + { + "name": "seriesStyle", + "description": "系列样式", + "type": "ISeriesStyle", + "originalType": "ISeriesStyle", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ISeriesStyle" + ], + "inheritedFrom": "IWordCloudSeriesBaseSpec" + }, + { + "name": "stack", + "description": "是否对数据进行堆叠处理", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IWordCloudSeriesBaseSpec" + }, + { + "name": "totalLabel", + "description": "堆叠汇总标签", + "type": "ITotalLabelSpec", + "originalType": "ITotalLabelSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "ITotalLabelSpec" + ], + "since": "1.3.0", + "inheritedFrom": "IWordCloudSeriesBaseSpec" + }, + { + "name": "percent", + "description": "是否对数据进行百分比处理", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IWordCloudSeriesBaseSpec" + }, + { + "name": "stackOffsetSilhouette", + "description": "是否围绕中心轴偏移轮廓", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IWordCloudSeriesBaseSpec" + }, + { + "name": "invalidType", + "description": "非合规数据点连接方式", + "type": "'zero' | 'ignore' | 'link' | 'break'", + "originalType": "IInvalidType", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "defaultValue": "'break'\n'break'指在该数据点处断开\n'link' 指忽略该点保持连续\n'zero' 指该点默认数值为0\n'ignore' 指不处理", + "inheritedFrom": "IWordCloudSeriesBaseSpec" + }, + { + "name": "animation", + "description": "是否开启系列动画", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IWordCloudSeriesBaseSpec" + }, + { + "name": "animationThreshold", + "description": "自动关闭动画的阀值，对应的是单系列data的长度", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "since": "1.2.0", + "inheritedFrom": "IWordCloudSeriesBaseSpec" + }, + { + "name": "support3d", + "description": "是否支持3d视角", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IWordCloudSeriesBaseSpec" + }, + { + "name": "extensionMark", + "description": "系列的扩展mark，能够获取系列上的数据", + "type": "(IExtensionMarkSpec> | IExtensionGroupMarkSpec)[]", + "originalType": "(IExtensionMarkSpec> | IExtensionGroupMarkSpec)[]", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IExtensionMarkSpec", + "IExtensionGroupMarkSpec" + ], + "inheritedFrom": "IWordCloudSeriesBaseSpec" + }, + { + "name": "zIndex", + "description": "今当通过`series`配置的时候，才会生效", + "type": "number", + "originalType": "number", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IWordCloudSeriesBaseSpec" + }, + { + "name": "animationAppear", + "description": "animationAppear 配置", + "type": "| boolean\n | (IStateAnimateSpec & {\n /**\n * 默认prest('scaleIn')时，duration为词云中单个词的动画参考时长。当单词数过多，会根据单词总数和总动画时长进行动态调整\n * prest为 'fadeIn' 时，则为总动画时长。\n */\n duration?: number;\n /**\n * 词云入场动画总时长，在默认prest('scaleIn')时生效。\n * @default 1000\n * @since 1.4.0\n */\n totalTime?: number;\n })\n | IMarkAnimateSpec", + "originalType": "| boolean\n | (IStateAnimateSpec & {\n /**\n * 默认prest('scaleIn')时，duration为词云中单个词的动画参考时长。当单词数过多，会根据单词总数和总动画时长进行动态调整\n * prest为 'fadeIn' 时，则为总动画时长。\n */\n duration?: number;\n /**\n * 词云入场动画总时长，在默认prest('scaleIn')时生效。\n * @default 1000\n * @since 1.4.0\n */\n totalTime?: number;\n })\n | IMarkAnimateSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "(IStateAnimateSpec", + "{\n /**\n * 默认prest('scaleIn')时，duration为词云中单个词的动画参考时长。当单词数过多，会根据单词总数和总动画时长进行动态调整\n * prest为 'fadeIn' 时，则为总动画时长。\n */\n duration?: number;\n /**\n * 词云入场动画总时长，在默认prest('scaleIn')时生效。\n * @default 1000\n * @since 1.4.0\n */\n totalTime?: number;\n })" + ], + "inheritedFrom": "IWordCloudSeriesBaseSpec" + }, + { + "name": "animationEnter", + "description": "数据新增动画配置", + "type": "IAnimationConfig", + "originalType": "IAnimationConfig", + "required": false, + "category": "动画配置", + "isSimple": false, + "dependencies": [ + "IAnimationConfig" + ], + "inheritedFrom": "IWordCloudSeriesBaseSpec" + }, + { + "name": "animationUpdate", + "description": "数据更新动画配置", + "type": "IAnimationConfig", + "originalType": "IAnimationConfig", + "required": false, + "category": "动画配置", + "isSimple": false, + "dependencies": [ + "IAnimationConfig" + ], + "inheritedFrom": "IWordCloudSeriesBaseSpec" + }, + { + "name": "animationExit", + "description": "数据移除动画配置", + "type": "IAnimationConfig", + "originalType": "IAnimationConfig", + "required": false, + "category": "动画配置", + "isSimple": false, + "dependencies": [ + "IAnimationConfig" + ], + "inheritedFrom": "IWordCloudSeriesBaseSpec" + }, + { + "name": "nameField", + "description": "文本字段", + "type": "string", + "originalType": "string", + "required": true, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IWordCloudSeriesBaseSpec" + }, + { + "name": "valueField", + "description": "权重字段", + "type": "string", + "originalType": "string", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IWordCloudSeriesBaseSpec" + }, + { + "name": "fontFamilyField", + "description": "字体字段", + "type": "string", + "originalType": "string", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IWordCloudSeriesBaseSpec" + }, + { + "name": "fontWeightField", + "description": "字重字段", + "type": "string", + "originalType": "string", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IWordCloudSeriesBaseSpec" + }, + { + "name": "fontStyleField", + "description": "字体样式字段", + "type": "string", + "originalType": "string", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IWordCloudSeriesBaseSpec" + }, + { + "name": "colorHexField", + "description": "直接指定 hex 颜色字段", + "type": "string", + "originalType": "string", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IWordCloudSeriesBaseSpec" + }, + { + "name": "colorMode", + "description": "颜色模式\nTODO: 'linear' 待支持", + "type": "'ordinal'", + "originalType": "'ordinal'", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IWordCloudSeriesBaseSpec" + }, + { + "name": "colorList", + "description": "颜色列表", + "type": "string[]", + "originalType": "string[]", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IWordCloudSeriesBaseSpec" + }, + { + "name": "rotateAngles", + "description": "可旋转角度 随机取范围", + "type": "number[]", + "originalType": "number[]", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IWordCloudSeriesBaseSpec" + }, + { + "name": "fontWeightRange", + "description": "字重范围", + "type": "[number, number]", + "originalType": "[number, number]", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [ + ], + "defaultValue": "[200,500]", + "inheritedFrom": "IWordCloudSeriesBaseSpec" + }, + { + "name": "fontSizeRange", + "description": "字体大小范围", + "type": "[number, number] | 'auto'", + "originalType": "[number, number] | 'auto'", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [ + ], + "since": "1.8.7 如果配置为'auto', 则fontSizeRange不传入, 字体大小会随画布大小改变而改变", + "inheritedFrom": "IWordCloudSeriesBaseSpec" + }, + { + "name": "maskShape", + "description": "词云形状", + "type": "string | WordCloudShapeType | TextShapeMask | GeometricMaskShape", + "originalType": "string | WordCloudShapeType | TextShapeMask | GeometricMaskShape", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "WordCloudShapeType", + "TextShapeMask", + "GeometricMaskShape" + ], + "defaultValue": "'circle'\n\n注意，文字类型和几何形状类型的shape自 1.12.0 版本开始支持", + "inheritedFrom": "IWordCloudSeriesBaseSpec" + }, + { + "name": "keepAspect", + "description": "TODO: 缩放mask时是否保持比例", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IWordCloudSeriesBaseSpec" + }, + { + "name": "random", + "description": "是否开始随机摆放方向(顺时针｜逆时针), 主要用于spec测试", + "type": "boolean", + "originalType": "boolean", + "required": false, + "category": "未分类", + "isSimple": true, + "dependencies": [], + "inheritedFrom": "IWordCloudSeriesBaseSpec" + }, + { + "name": "wordCloudConfig", + "description": "词云特殊配置", + "type": "WordCloudConfigType", + "originalType": "WordCloudConfigType", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "WordCloudConfigType" + ], + "inheritedFrom": "IWordCloudSeriesBaseSpec" + }, + { + "name": "wordCloudShapeConfig", + "description": "形状词云特殊配置", + "type": "WordCloudShapeConfigType", + "originalType": "WordCloudShapeConfigType", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "WordCloudShapeConfigType" + ], + "inheritedFrom": "IWordCloudSeriesBaseSpec" + }, + { + "name": "word", + "description": "词云文字图元配置 或 形状词云核心词文字图元配置", + "type": "IMarkSpec & {\n padding?: number;\n formatMethod?: ITextFormatMethod<[datum?: any]>;\n }", + "originalType": "IMarkSpec & {\n padding?: number;\n formatMethod?: ITextFormatMethod<[datum?: any]>;\n }", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMarkSpec", + "ITextMarkSpec" + ], + "inheritedFrom": "IWordCloudSeriesBaseSpec" + }, + { + "name": "fillingWord", + "description": "形状词云填充词文字图元配置", + "type": "IMarkSpec & {\n padding?: number;\n }", + "originalType": "IMarkSpec & {\n padding?: number;\n }", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMarkSpec", + "ITextMarkSpec" + ], + "deprecated": true, + "inheritedFrom": "IWordCloudSeriesBaseSpec" + }, + { + "name": "wordMask", + "description": "当形状词云的形状为文字类型和几何形状类型的时候，支持绘制形状轮廓", + "type": "IMarkSpec", + "originalType": "IMarkSpec", + "required": false, + "category": "未分类", + "isSimple": false, + "dependencies": [ + "IMarkSpec", + "IRectMarkSpec" + ], + "since": "1.12.0", + "inheritedFrom": "IWordCloudSeriesBaseSpec" + } + ], + "note": "展开自 Omit - 包含 46 个属性（已展开所有继承）", + "expandedFrom": "IWordCloudSeriesSpec", + "omittedKeys": [ + "data", + "morph", + "stackValue", + "tooltip" + ] + } + }, + "timestamp": "2025-08-06T05:48:04.812Z", + "version": "1.0.0", + "sourceFile": "/Users/bytedance/Documents/opensource/VChart/packages/vchart/src/chart/word-cloud/interface.ts", + "complexTypeDefinitions": { + "IWordCloudSeriesSpec": { + "typeName": "IWordCloudSeriesSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart/src/series/word-cloud/interface.ts", + "note": "类型 IWordCloudSeriesSpec 的定义位置" + }, + "IData": { + "typeName": "IData", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart/src/typings/spec/common.ts", + "note": "类型 IData 的定义位置" + }, + "ILayoutPaddingSpec": { + "typeName": "ILayoutPaddingSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart/src/typings/layout.ts", + "note": "类型 ILayoutPaddingSpec 的定义位置" + }, + "IVisualSpecScale": { + "typeName": "IVisualSpecScale", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart/src/typings/visual.ts", + "note": "类型 IVisualSpecScale 的定义位置" + }, + "ISeriesSpec": { + "typeName": "ISeriesSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart/src/typings/spec/common.ts", + "note": "类型 ISeriesSpec 的定义位置" + }, + "ISeriesStyle": { + "typeName": "ISeriesStyle", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart/src/series/interface/common.ts", + "note": "类型 ISeriesStyle 的定义位置" + }, + "IHoverSpec": { + "typeName": "IHoverSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart/src/interaction/interface/spec.ts", + "note": "类型 IHoverSpec 的定义位置" + }, + "ISelectSpec": { + "typeName": "ISelectSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart/src/interaction/interface/spec.ts", + "note": "类型 ISelectSpec 的定义位置" + }, + "RegionSpec": { + "typeName": "RegionSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart/src/region/interface.ts", + "note": "类型 RegionSpec 的定义位置" + }, + "ITitleSpec": { + "typeName": "ITitleSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart/src/component/title/interface/spec.ts", + "note": "类型 ITitleSpec 的定义位置" + }, + "ILayoutSpec": { + "typeName": "ILayoutSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart/src/layout/interface.ts", + "note": "类型 ILayoutSpec 的定义位置" + }, + "ILegendSpec": { + "typeName": "ILegendSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart/src/component/legend/interface.ts", + "note": "类型 ILegendSpec 的定义位置" + }, + "ICrosshairSpec": { + "typeName": "ICrosshairSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart/src/component/crosshair/interface/spec.ts", + "note": "类型 ICrosshairSpec 的定义位置" + }, + "ITooltipSpec": { + "typeName": "ITooltipSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart/src/component/tooltip/interface/spec.ts", + "note": "类型 ITooltipSpec 的定义位置" + }, + "IPlayer": { + "typeName": "IPlayer", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart/src/component/player/interface/spec.ts", + "note": "类型 IPlayer 的定义位置" + }, + "IDataZoomSpec": { + "typeName": "IDataZoomSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart/src/component/data-zoom/data-zoom/interface.ts", + "note": "类型 IDataZoomSpec 的定义位置" + }, + "IScrollBarSpec": { + "typeName": "IScrollBarSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart/src/component/data-zoom/scroll-bar/interface.ts", + "note": "类型 IScrollBarSpec 的定义位置" + }, + "IBrushSpec": { + "typeName": "IBrushSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart/src/component/brush/interface.ts", + "note": "类型 IBrushSpec 的定义位置" + }, + "ICustomMarkSpec": { + "typeName": "ICustomMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart/src/typings/spec/common.ts", + "note": "类型 ICustomMarkSpec 的定义位置" + }, + "ICommonAxisSpec": { + "typeName": "ICommonAxisSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart/src/component/axis/interface/spec.ts", + "note": "类型 ICommonAxisSpec 的定义位置" + }, + "ITheme": { + "typeName": "ITheme", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart/src/theme/interface.ts", + "note": "类型 ITheme 的定义位置" + }, + "IBackgroundSpec": { + "typeName": "IBackgroundSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart/src/typings/spec/common.ts", + "note": "类型 IBackgroundSpec 的定义位置" + }, + "IMediaQuerySpec": { + "typeName": "IMediaQuerySpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart/src/typings/spec/media-query.ts", + "note": "类型 IMediaQuerySpec 的定义位置" + }, + "IInteractionItemSpec": { + "typeName": "IInteractionItemSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart/src/interaction/interface/spec.ts", + "note": "类型 IInteractionItemSpec 的定义位置" + }, + "ITotalLabelSpec": { + "typeName": "ITotalLabelSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart/src/component/label/interface.ts", + "note": "类型 ITotalLabelSpec 的定义位置" + }, + "IExtensionMarkSpec": { + "typeName": "IExtensionMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart/src/typings/spec/common.ts", + "note": "类型 IExtensionMarkSpec 的定义位置" + }, + "IExtensionGroupMarkSpec": { + "typeName": "IExtensionGroupMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart/src/typings/spec/common.ts", + "note": "类型 IExtensionGroupMarkSpec 的定义位置" + }, + "(IStateAnimateSpec": { + "typeName": "(IStateAnimateSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart/src/typings/spec/common.ts", + "note": "类型 (IStateAnimateSpec 的定义位置" + }, + "{\n /**\n * 默认prest('scaleIn')时，duration为词云中单个词的动画参考时长。当单词数过多，会根据单词总数和总动画时长进行动态调整\n * prest为 'fadeIn' 时，则为总动画时长。\n */\n duration?: number;\n /**\n * 词云入场动画总时长，在默认prest('scaleIn')时生效。\n * @default 1000\n * @since 1.4.0\n */\n totalTime?: number;\n })": { + "typeName": "{\n /**\n * 默认prest('scaleIn')时，duration为词云中单个词的动画参考时长。当单词数过多，会根据单词总数和总动画时长进行动态调整\n * prest为 'fadeIn' 时，则为总动画时长。\n */\n duration?: number;\n /**\n * 词云入场动画总时长，在默认prest('scaleIn')时生效。\n * @default 1000\n * @since 1.4.0\n */\n totalTime?: number;\n })", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart/src/typings/spec/common.ts", + "note": "类型 {\n /**\n * 默认prest('scaleIn')时，duration为词云中单个词的动画参考时长。当单词数过多，会根据单词总数和总动画时长进行动态调整\n * prest为 'fadeIn' 时，则为总动画时长。\n */\n duration?: number;\n /**\n * 词云入场动画总时长，在默认prest('scaleIn')时生效。\n * @default 1000\n * @since 1.4.0\n */\n totalTime?: number;\n }) 的定义位置" + }, + "IAnimationConfig": { + "typeName": "IAnimationConfig", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart/src/typings/spec/common.ts", + "note": "类型 IAnimationConfig 的定义位置" + }, + "WordCloudShapeType": { + "typeName": "WordCloudShapeType", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart/src/series/word-cloud/interface.ts", + "note": "类型 WordCloudShapeType 的定义位置" + }, + "TextShapeMask": { + "typeName": "TextShapeMask", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart/src/typings/spec/common.ts", + "note": "类型 TextShapeMask 的定义位置" + }, + "GeometricMaskShape": { + "typeName": "GeometricMaskShape", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart/src/typings/spec/common.ts", + "note": "类型 GeometricMaskShape 的定义位置" + }, + "WordCloudConfigType": { + "typeName": "WordCloudConfigType", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart/src/series/word-cloud/interface.ts", + "note": "类型 WordCloudConfigType 的定义位置" + }, + "WordCloudShapeConfigType": { + "typeName": "WordCloudShapeConfigType", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart/src/series/word-cloud/interface.ts", + "note": "类型 WordCloudShapeConfigType 的定义位置" + }, + "IMarkSpec": { + "typeName": "IMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart/src/typings/spec/common.ts", + "note": "类型 IMarkSpec 的定义位置" + }, + "ITextMarkSpec": { + "typeName": "ITextMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart/src/typings/visual.ts", + "note": "类型 ITextMarkSpec 的定义位置" + }, + "IRectMarkSpec": { + "typeName": "IRectMarkSpec", + "filePath": "/Users/bytedance/Documents/opensource/VChart/packages/vchart/src/typings/visual.ts", + "note": "类型 IRectMarkSpec 的定义位置" + } + }, + "statistics": { + "totalInterfaces": 3, + "totalProperties": 78, + "complexTypes": 39, + "typeFileLocations": 39, + "dependencyTypes": 862 + } +} \ No newline at end of file diff --git a/skills/vchart-development-skill/references/workflows/scenario-1-diagnosis.md b/skills/vchart-development-skill/references/workflows/scenario-1-diagnosis.md new file mode 100644 index 0000000000..20a1db9eb2 --- /dev/null +++ b/skills/vchart-development-skill/references/workflows/scenario-1-diagnosis.md @@ -0,0 +1,236 @@ +# 场景一处理流程：问题诊断 + +## 适用情况 + +**识别信号**： + +- 用户提供了现有代码并描述"不工作"、"报错"、"显示异常" +- 用户询问"有没有更好的方式"、"如何优化" +- 用户遇到性能问题或渲染问题 +- 用户描述问题现象（可能有截图，可能无配置） + +> **注意**：如用户使用 `@visactor/react-vchart` 库，请直接参考 [scenario-1-react.md](scenario-1-react.md) + +## 模式分类 + +``` +if (用户提供了现有 spec 配置) { + → 配置诊断模式：基于用户配置分析问题并修复 +} else { + → 描述诊断模式：根据用户描述/截图生成解决方案配置 +} +``` + +--- + +## 配置诊断模式（用户提供了 spec） + +### 步骤 1a：收集信息 + +请用户提供： + +1. 完整的 VChart spec 配置代码 +2. 数据样本（至少 3-5 条） +3. 错误信息或异常表现描述 +4. 期望的正确效果 + +### 步骤 2a：诊断分析 + +使用 `type-meta/[图表类型].json` 检查配置完整性： + +``` +1. **类型检查**：spec.type 是否为有效图表类型 +2. **必填字段**：对照 type-meta 检查 required: true 的字段 +3. **字段映射**：xField/yField/valueField 等是否与数据字段匹配 +4. **数据格式**：data 配置是否符合 IData 规范 +5. **类型约束**：属性值是否符合 type-details 中的类型定义 +6. **版本兼容**：确认 API 是否适用于 2.0.0+ 版本 +``` + +--- + +## 描述诊断模式（用户未提供 spec） + +### 步骤 1b：理解问题 + +根据用户描述/截图识别： + +1. **问题类型**：布局、样式、交互、性能、数据显示等 +2. **图表类型**：推断用户使用的图表类型 +3. **期望效果**：用户想要达到的目标 + +### 步骤 2b：构建解决方案 + +1. **Mock 数据**：根据问题场景构建合理的模拟数据（至少 5 条） +2. **生成 spec**：创建能体现解决方案的完整配置 +3. **对比方案**：如适用，提供问题现象 vs 修复后的对比 + +--- + +## 输出 JavaScript 代码（强制） + +直接输出 **完整的 VChart 配置代码**，包含问题分析和修复说明。 + +### 配置诊断模式输出 + +- **诊断结果**：基于用户配置的分析结论（作为注释） +- **修复后 spec**：基于用户原配置修复后的完整配置 + +### 描述诊断模式输出 + +- **诊断结果**：问题现象解读 + 解决思路（作为注释） +- **修复后 spec**：使用 Mock 数据构建的完整配置，体现解决方案 + +--- + +## 输出格式示例 + +```javascript +// 🔧 VChart 问题诊断报告 +// 问题：[问题描述] +// 原因：[根本原因分析] +// 解决方案：[修复方法说明] + +const spec = { + type: 'bar', + data: [ + { + id: 'barData', + values: [ + // Mock 数据 + ] + } + ] + // ... 修复后的完整配置 +}; + +// 使用方式： +// const vchart = new VChart(spec, { dom: 'chart' }); +// vchart.renderSync(); +``` + +--- + +## 完整诊断流程示例 + +配置文件需要包含三个 JavaScript 对象： + +**1. problemReview（问题回顾）** + +```javascript +const problemReview = { + highlightLines: [11], // 可选：需要高亮的行号数组 + specCode: `[用户原始代码]` // 完整 JS 代码字符串，可包含函数 +}; +``` + +**2. diagnosis（诊断分析）** + +```javascript +const diagnosis = { + problem: '[问题简述]', + cause: '[原因分析]', + suggestion: '[修复建议]' // 可选 +}; +``` + +**3. solutions（解决方案数组）** + +```javascript +const solutions = [ + { + title: '[方案标题]', + description: '[方案描述]', + highlightLines: [11], // 可选：需要高亮的行号数组 + specCode: `[修复代码]` // 完整 JS 代码字符串，可包含函数 + } + // 更多方案... +]; +``` + +#### 实际使用示例 + +**步骤 1：创建配置文件 `config.js`** + +```javascript +const problemReview = { + highlightLines: [11], + specCode: `const spec = { + type: "bar", + data: { + values: [ + { category: "A", value: 10 }, + { category: "B", value: 20 } + ] + }, + xField: "category", + yField: "values", + label: { + visible: true, + formatter: (d) => d.value + "%" + } +};`, +}; + +const diagnosis = { + problem: "图表 Y 轴没有数据显示，柱状图高度为 0", + cause: 'yField 配置值为 "values"，但数据字段名为 "value"', + suggestion: "确保 xField/yField 与数据字段名严格一致", +}; + +const solutions = [ + { + title: "修正字段映射", + description: + '将 yField 的值从 "values" 修正为 "value"，与数据字段名保持一致。', + highlightLines: [11], + specCode: `const spec = { + type: "bar", + data: { + values: [ + { category: "A", value: 10 }, + { category: "B", value: 20 } + ] + }, + xField: "category", + yField: "value", + label: { visible: true } +}; + +// 使用方式： +// const vchart = new VChart(spec, { dom: 'chart' }); +// vchart.renderSync(); +``` + +--- + +## 常见问题速查 + +参考：`../references/chart/common-issues.md` + +## 诊断清单 + +### 数据相关问题 + +| 问题现象 | 可能原因 | 检查项 | +| ------------ | ------------------ | ------------------------------------ | +| 图表不显示 | 数据为空或格式错误 | `data.values` 是否为数组且非空 | +| 坐标轴无数据 | 字段映射错误 | `xField`/`yField` 是否匹配数据字段名 | +| 数据显示异常 | 数据类型不匹配 | 数值字段是否为 number 类型 | + +### 配置相关问题 + +| 问题现象 | 可能原因 | 检查项 | +| ------------ | ------------------ | --------------------------- | +| 组件不显示 | visible 设为 false | 检查组件 `visible` 属性 | +| 样式不生效 | 配置路径错误 | 对照 type-meta 检查属性路径 | +| 版本兼容问题 | API 已变更 | 确认使用的是 2.0.0+ API | + +--- + +## 相关资源 + +- [配置项索引](../references/topkey/) - 快速查找配置项 +- [类型详情](../references/type-details/) - 详细的类型定义 +- [组件参考](../references/components/) - 组件配置速查 +- [常见问题](../references/chart/common-issues.md) - VChart 常见问题汇总 diff --git a/skills/vchart-development-skill/references/workflows/scenario-1-react.md b/skills/vchart-development-skill/references/workflows/scenario-1-react.md new file mode 100644 index 0000000000..e4fca9309d --- /dev/null +++ b/skills/vchart-development-skill/references/workflows/scenario-1-react.md @@ -0,0 +1,603 @@ +# React-VChart 问题诊断专项指南 + +> 本文档是场景一（问题诊断）的 React-VChart 专项补充，适用于使用 `@visactor/react-vchart` 库的 React 用户。 + +## 适用情况 + +当用户代码中出现以下特征时，使用本指南： + +- 从 `@visactor/react-vchart` 导入组件 +- 使用 ``、``、`` 等 JSX 标签 +- React 项目中的图表问题 +- 提及 React Hooks、状态管理、组件生命周期等 + +--- + +## React-VChart 特有问题诊断 + +### 1. 组件使用错误 + +#### 问题 1.1：组件类型选择错误 + +**识别信号**： + +- 图表类型与组件不匹配 +- 用户使用 `` 但想要柱状图 + +**诊断步骤**： + +``` +1. 确认用户意图的图表类型 +2. 检查使用的组件标签是否匹配： + - 柱状图 → + - 折线图 → + - 饼图 → + - 通用 → (需要 spec prop) +``` + +**修复示例**： + +```jsx +// ❌ 错误 + + + + +// ✅ 正确 + + + +``` + +#### 问题 1.2：组件嵌套错误 + +**识别信号**： + +- 系列组件（如 ``）未放在对应图表组件内 +- 组件标签组合不合法 + +**诊断步骤**： + +``` +1. 检查系列组件是否在正确的父组件下： + - 必须在 或 内 + - 必须在 或 内 +2. 检查组件组件（Axis、Legend）是否在图表组件内 +``` + +**修复示例**： + +```jsx +// ❌ 错误 +
+ + +
+ +// ✅ 正确 + + + + + +``` + +--- + +### 2. Props 传递问题 + +#### 问题 2.1：data prop 格式错误 + +**识别信号**： + +- 图表不显示或报错 "data is not iterable" +- data 格式不符合 VChart 规范 + +**诊断步骤**： + +``` +1. 检查 data 是否为数组格式：[{ id, values }] +2. 确认 values 是否为数组 +3. 检查数据字段是否与 xField/yField 匹配 +``` + +**常见错误**： + +```jsx +// ❌ 错误 1：直接传值数组 + + +// ❌ 错误 2：缺少 id + + +// ❌ 错误 3：values 不是数组 + + +// ✅ 正确 + +``` + +#### 问题 2.2：配置对象 props 错误 + +**识别信号**： + +- 样式配置不生效 +- 嵌套对象配置语法错误 + +**诊断步骤**： + +``` +1. 确认对象型 props 使用双花括号 {{ }} +2. 检查对象内部属性名是否正确 +3. 对照 VChart spec 文档验证配置项 +``` + +**修复示例**： + +```jsx +// ❌ 错误：单花括号 + + +// ✅ 正确：双花括号 + + +// ✅ 正确：嵌套对象 + +``` + +--- + +### 3. 状态更新问题 + +#### 问题 3.1：数据更新不触发重渲染 + +**识别信号**： + +- 修改 state 后图表不更新 +- 数据变化但图表保持旧数据 + +**诊断步骤**： + +``` +1. 检查是否使用了不可变更新方式 +2. 确认 data prop 引用是否改变 +3. 检查 React DevTools 确认组件是否重新渲染 +``` + +**常见问题**： + +```jsx +// ❌ 错误：直接修改数组（引用未变） +const handleUpdate = () => { + chartData.push({ x: 5, y: 10 }); + setChartData(chartData); // 引用相同，不触发更新 +}; + +// ✅ 正确：创建新数组 +const handleUpdate = () => { + setChartData([...chartData, { x: 5, y: 10 }]); +}; + +// ✅ 正确：使用不可变更新 +const handleUpdate = () => { + setChartData(prev => [...prev, { x: 5, y: 10 }]); +}; +``` + +#### 问题 3.2：频繁更新导致性能问题 + +**识别信号**： + +- 图表卡顿或闪烁 +- 每次 state 变化都触发图表完全重绘 + +**诊断步骤**： + +``` +1. 检查 data 是否在每次渲染时创建新对象 +2. 确认是否使用了 useMemo 优化 +3. 检查父组件是否频繁重渲染 +``` + +**优化方案**： + +```jsx +// ❌ 问题：每次渲染创建新数据 +function Chart() { + const data = [{ id: 'data', values: generateData() }]; + return ...; +} + +// ✅ 优化 1：使用 useMemo +function Chart() { + const data = useMemo( + () => [{ id: 'data', values: generateData() }], + [] // 依赖项 + ); + return ...; +} + +// ✅ 优化 2：使用 useState +function Chart() { + const [data] = useState([{ id: 'data', values: generateData() }]); + return ...; +} +``` + +--- + +### 4. 事件处理问题 + +#### 问题 4.1：事件回调未触发 + +**识别信号**： + +- onClick、onReady 等回调不执行 +- 控制台无错误但事件无响应 + +**诊断步骤**： + +``` +1. 确认事件名是否正确（注意大小写） +2. 检查回调函数是否正确定义 +3. 确认事件是否在正确的组件上监听 +``` + +**常见错误**： + +```jsx +// ❌ 错误 1：事件名错误 + // 应为 onClick + +// ❌ 错误 2：未传递函数 + // 应为 {handleClick} + +// ❌ 错误 3：立即执行 + // 应为 {handleClick} + +// ✅ 正确 + + ... + + +// ✅ 正确：内联函数 + console.log(e)}> + ... + +``` + +#### 问题 4.2：onReady 获取实例错误 + +**识别信号**： + +- 无法获取 VChart 实例 +- 实例方法调用失败 + +**诊断步骤**： + +``` +1. 确认 onReady 回调参数接收实例 +2. 检查实例保存方式（ref vs state） +3. 验证实例方法调用时机 +``` + +**正确用法**： + +```jsx +function Chart() { + const chartRef = useRef(null); + + const handleReady = (instance, isInitial) => { + chartRef.current = instance; + console.log('Chart ready:', isInitial); + }; + + const updateChart = () => { + if (chartRef.current) { + chartRef.current.updateSpec({...}); + } + }; + + return ( + + + + ); +} +``` + +--- + +### 5. 生命周期和副作用问题 + +#### 问题 5.1：内存泄漏 + +**识别信号**： + +- 组件卸载后仍有定时器运行 +- 控制台警告 "Can't perform a React state update on an unmounted component" + +**诊断步骤**： + +``` +1. 检查是否在 useEffect 中正确清理副作用 +2. 确认事件监听器是否正确移除 +3. 检查异步操作是否在组件卸载后仍执行 +``` + +**修复示例**： + +```jsx +// ❌ 问题：未清理定时器 +function Chart() { + const [data, setData] = useState(initialData); + + useEffect(() => { + const timer = setInterval(() => { + setData(generateNewData()); + }, 1000); + // 缺少清理函数 + }, []); + + return ...; +} + +// ✅ 正确：添加清理函数 +function Chart() { + const [data, setData] = useState(initialData); + + useEffect(() => { + const timer = setInterval(() => { + setData(generateNewData()); + }, 1000); + + return () => clearInterval(timer); // 清理 + }, []); + + return ...; +} +``` + +#### 问题 5.2：依赖项错误导致无限循环 + +**识别信号**： + +- 页面卡死或持续重渲染 +- 控制台疯狂输出日志 + +**诊断步骤**： + +``` +1. 检查 useEffect 依赖数组 +2. 确认依赖项是否在每次渲染时变化 +3. 检查是否在 effect 中修改了依赖项 +``` + +**修复示例**： + +```jsx +// ❌ 问题：依赖项每次都变化 +function Chart({ config }) { + const [data, setData] = useState([]); + + useEffect(() => { + fetchData(config).then(setData); + }, [config]); // config 每次都是新对象 + + return ...; +} + +// ✅ 方案 1：使用 useMemo 稳定依赖 +function Chart({ config }) { + const [data, setData] = useState([]); + const stableConfig = useMemo(() => config, [config.url, config.params]); + + useEffect(() => { + fetchData(stableConfig).then(setData); + }, [stableConfig]); + + return ...; +} + +// ✅ 方案 2：解构依赖 +function Chart({ config }) { + const [data, setData] = useState([]); + + useEffect(() => { + fetchData(config).then(setData); + }, [config.url, config.params]); // 只依赖具体值 + + return ...; +} +``` + +--- + +## 转换为 VChart Spec 诊断 + +当 React 特有问题排查完毕后，如果问题仍然存在，需要将 React 组件代码转换为等价的 VChart spec 进行深度诊断。 + +### 转换规则 + +| React 代码 | VChart Spec | +| -------------------------------------- | -------------------------------------------- | +| `` | `{ type: 'bar', data: data }` | +| `` | `{ xField: 'x', yField: 'y' }` | +| `` | `axes: [{ orient: 'bottom', type: 'band' }]` | +| `` | `legends: { visible: true }` | +| `label={{ visible: true }}` | `label: { visible: true }` | + +### 转换示例 + +```jsx +// React 组件代码 + + + + + +; + +// 等价 VChart spec +const spec = { + type: 'bar', + data: [{ id: 'data', values: chartData }], + xField: 'category', + yField: 'value', + label: { visible: true }, + axes: [ + { orient: 'bottom', type: 'band' }, + { orient: 'left', type: 'linear' } + ], + legends: { visible: true, position: 'top' } +}; +``` + +转换后，使用标准 VChart 诊断流程（参考主文档 scenario-1-diagnosis.md）进行深度分析。 + +--- + +## 输出 React 组件代码 + +React-VChart 问题必须输出 **完整的 React 组件代码**。 + +### 输出要求 + +- ✅ 包含完整的 React 组件定义（函数组件或类组件） +- ✅ 使用 React-VChart 库的正确 API +- ✅ 包含必要的 import 语句 +- ✅ 添加问题分析和修复说明注释 +- ✅ 提供组件使用示例 + +### 输出格式示例 + +```jsx +// 🔧 React-VChart 问题修复 +// 问题：[问题描述] +// 原因：[根本原因分析] +// 解决方案：[修复方法说明] + +import React from 'react'; +import { BarChart } from '@visactor/react-vchart'; + +const MyChart = () => { + const spec = { + // VChart 配置 + }; + + return console.log('图表初始化完成', vchart)} />; +}; + +export default MyChart; + +// 使用方式： +// import MyChart from './MyChart'; +// +``` + +--- + +## React 特定最佳实践 + +### 1. 数据管理 + +```jsx +// ✅ 推荐：使用 useState 管理图表数据 +const [chartData, setChartData] = useState(initialData); + +// ✅ 推荐：数据不变时使用 useMemo +const formattedData = useMemo(() => rawData.map(item => ({ ...item, value: item.value * 100 })), [rawData]); + +// ✅ 推荐：复杂数据转换使用 useCallback +const transformData = useCallback(raw => { + return raw.filter(item => item.value > 0); +}, []); +``` + +### 2. 性能优化 + +```jsx +// ✅ 使用 React.memo 避免不必要的重渲染 +const MemoizedChart = React.memo( + ({ data, config }) => ( + + + + ), + (prevProps, nextProps) => { + return prevProps.data === nextProps.data && prevProps.config === nextProps.config; + } +); + +// ✅ 拆分大型配置对象 +const axesConfig = useMemo( + () => [ + { orient: 'bottom', type: 'band' }, + { orient: 'left', type: 'linear' } + ], + [] +); +``` + +### 3. 实例管理 + +```jsx +// ✅ 推荐：使用 ref 保存图表实例 +const chartRef = useRef(null); + +const handleReady = useCallback(instance => { + chartRef.current = instance; +}, []); + +// ✅ 调用实例方法 +const exportImage = useCallback(() => { + if (chartRef.current) { + chartRef.current.exportImg(); + } +}, []); +``` + +--- + +## React 脚本故障排除 + +### 常见问题 + +#### Q1: `❌ 模板不存在: assets/template/diagnosis-react.html` + +**原因**：脚本运行位置不正确 + +**解决步骤**： + +1. 确认当前工作目录：`pwd` +2. 进入 `vchart-development-assistant` 目录：`cd vchart-development-assistant` +3. 确认 `assets/template/diagnosis-react.html` 文件存在：`ls assets/template/diagnosis-react.html` +4. 重新运行脚本 + +--- + +## 相关资源 + +- **React-VChart 官方文档**：https://visactor.com/vchart/guide/tutorial_docs/Cross-terminal_and_Developer_Ecology/react +- **GitHub 仓库**：https://github.com/VisActor/VChart/tree/develop/packages/react-vchart +- [组件参考](../references/components/) - 组件配置速查 + +### React 专项提示 + +1. **JSX 代码格式**：确保代码格式正确，组件标签闭合 +2. **Props 命名**：使用驼峰命名法（camelCase），如 `xField`、`yField` +3. **数据结构**：确保数据格式与配置一致 + +--- + +## 参考资源 + +- **官方文档**：https://visactor.com/vchart/guide/tutorial_docs/Cross-terminal_and_Developer_Ecology/react +- **GitHub 仓库**：https://github.com/VisActor/VChart/tree/develop/packages/react-vchart +- **API 文档**：https://github.com/VisActor/VChart/blob/main/packages/react-vchart/docs/2.1%20API设计.md +- **VChart 主文档**：参考 scenario-1-diagnosis.md 进行深度配置诊断 diff --git a/skills/vchart-development-skill/references/workflows/scenario-2-generation.md b/skills/vchart-development-skill/references/workflows/scenario-2-generation.md new file mode 100644 index 0000000000..95bda9b870 --- /dev/null +++ b/skills/vchart-development-skill/references/workflows/scenario-2-generation.md @@ -0,0 +1,343 @@ +# 场景二处理流程：配置生成 + +## 适用情况 + +**识别信号**： + +- 用户希望从 0 到 1 创建图表（提供描述/数据结构） +- 用户已有 spec，希望添加/修改某个功能点 +- 用户问"如何配置 xxx"、"怎么实现 xxx 效果" + +## 模式分类 + +- **完整生成模式**：用户无现有 spec，需要生成完整配置 +- **增量生成模式**：用户有现有 spec，需要生成增量配置 + +## 通用步骤 + +### 步骤 1：意图识别 + +**使用 `topkey/*.json` 将用户自然语言映射到配置项**： + +| 用户表达 | 匹配的配置项 | 来源 | +| --------------------------- | ----------------------------- | --------------------------------- | +| "加个标签" / "显示数值" | `label` | references/topkey/[type].json | +| "加条参考线" / "画条基准线" | `markLine` | references/topkey/[type].json | +| "堆叠起来" / "累加显示" | `stack: true` | references/topkey/[type].json | +| "分组对比" | `seriesField` + `xField` 数组 | references/topkey/[type].json | +| "加个图例" | `legends` | references/topkey/all_common.json | +| "鼠标悬浮提示" | `tooltip` | references/topkey/all_common.json | +| "坐标轴标题" | `axes[].title` | references/topkey/all_common.json | + +### 步骤 2：确定生成模式 + +``` +if (用户提供了现有 spec) { + → 增量生成模式 +} else { + → 完整生成模式 +} +``` + +--- + +## 完整生成模式 + +### 步骤 2a-1：图表类型推断 + +基于用户描述和数据特征，参考 `../references/chart/chart-type-guide.md` 推断： + +| 数据特征 | 可视化目的 | 推荐类型 | +| --------------- | ----------- | ---------------------------- | +| 类目 + 数值 | 比较大小 | `bar` | +| 类目 + 数值 | 占比分布 | `pie` | +| 时间序列 + 数值 | 趋势变化 | `line` | +| 时间序列 + 数值 | 累积量感 | `area` | +| 两个数值维度 | 相关性/分布 | `scatter` | +| 多维度评分 | 综合对比 | `radar` | +| 层级数据 | 占比构成 | `treemap` / `sunburst` | +| 流向数据 | 流量分配 | `sankey` | +| 流程阶段 | 转化漏斗 | `funnel` | +| 进度数据 | 完成度 | `gauge` / `circularProgress` | + +### 步骤 2a-2：与用户确认 + +```markdown +## 图表类型推荐 + +基于您的需求，我推荐使用 **[图表类型中文名]**（`type: '[类型标识]'`） + +**推荐理由**：[简要说明] + +**是否确认？** 如需调整请告诉我。 +``` + +### 步骤 2a-3：构建完整 Spec + +**使用 `type-meta/[图表类型].json` 构建配置结构**： + +1. 从 `inheritanceTree` 获取完整的可用属性列表 +2. 填充 `required: true` 的必填字段 +3. 根据用户需求添加可选配置 +4. 对于复杂类型（`isSimple: false`），查阅 `type-details/[类型名].md` + +```javascript +const spec = { + type: '[图表类型]', + data: [ + { + id: 'dataId', + values: [ + /* 用户数据 */ + ] + } + ], + // 必填字段（从 type-meta 获取） + [requiredField]: [value], + + // 用户需求的配置项 + [配置项]: { + // 从 type-details 获取类型定义 + } +}; + +const vchart = new VChart(spec, { dom: 'container' }); +vchart.renderSync(); +``` + +### 步骤 2a-4：输出 JavaScript 代码（强制） + +直接输出 **完整的 VChart spec 配置代码**，禁止只输出部分片段。 + +**输出要求**： + +1. 包含完整的 spec 对象定义 +2. 包含合理的 Mock 数据（至少 5 条） +3. 添加关键配置的注释说明 +4. 用 ```javascript 代码块包裹，便于复制使用 + +**输出格式**： + +````markdown +## 图表生成结果 + +基于您的需求，生成了以下 [图表类型] 配置。 + +**配置说明**： + +- [关键配置点说明] + +**完整代码**： + +```javascript +// 完整的 VChart spec 配置 +const spec = { + type: '[图表类型]', + data: [ + { + id: 'dataId', + values: [ + // Mock 数据（至少 5 条） + ] + } + ] + // ... 其他配置 +}; + +// 使用方式： +// const vchart = new VChart(spec, { dom: 'chart' }); +// vchart.renderSync(); +``` +```` + +```` + +--- + +## 增量生成模式 + +### 步骤 2b-1：定位配置项 + +**根据用户意图，使用 topkey 定位配置项名称**： + +```javascript +// 用户说："我想给柱子加个标签" +// references/topkey/bar.json 中找到： +{ + "label": { + "key": "label", + "oneDesc": "标签相关配置,包括跟标签相关的引导线配置" + } +} +// → 配置项为 label +```` + +### 步骤 2b-2：查询类型定义 + +**使用 `type-details/[类型名]-Type-Definition.md` 获取详细配置**： + +```javascript +// 查询 type-details/ILabelSpec-Type-Definition.md +// 获取完整的 ILabelSpec 接口定义 +``` + +### 步骤 2b-3：输出 JavaScript 代码（强制） + +无论用户是否提供了完整 spec，都必须输出完整的 JavaScript 代码。 + +**情况 A：用户提供了完整 spec** + +- 将增量配置整合到用户 spec 中 +- 输出整合后的完整配置代码 + +**情况 B：用户只描述功能需求，未提供 spec** + +- **Mock 数据**：构建合理的模拟数据（至少 5 条） +- **完整 spec**：生成包含该功能的完整图表配置 +- 直接输出 JavaScript 代码 + +### 输出格式示例 + +````javascript +// 📊 [功能描述] +// 配置要点：[关键配置说明] + + + +--- + +## 完整生成流程示例 + +#### Spec 文件结构 + +spec 文件应包含完整的 VChart 配置代码（JavaScript 格式）： + +```javascript +const spec = { + type: "bar", + data: { + values: [ + { category: "A", value: 10 }, + { category: "B", value: 20 }, + { category: "C", value: 15 }, + { category: "D", value: 12 }, + { category: "E", value: 18 }, + ], + }, + xField: "category", + yField: "value", + label: { + visible: true, + style: { fill: "#333" }, + }, + tooltip: { + visible: true, + }, +}; +```` + +#### 实际使用示例 + +**步骤 1：创建 spec 文件 `spec.js`** + +```javascript +const spec = { + type: 'bar', + data: { + values: [ + { category: 'A', value: 10 }, + { category: 'B', value: 20 }, + { category: 'C', value: 15 }, + { category: 'D', value: 12 }, + { category: 'E', value: 18 } + ] + }, + xField: 'category', + yField: 'value', + label: { visible: true } +}; +``` + +--- + +**输出格式**： + +````markdown +## 功能实现：[功能名称] + +**配置说明**： + +- `[属性1]`：[类型] - [说明] +- `[属性2]`：[类型] - [说明] + +**完整代码**： + +```javascript +// 完整的 VChart spec 配置 +const spec = { + // ... 配置内容 +}; + +// 使用方式： +// const vchart = new VChart(spec, { dom: 'chart' }); +// vchart.renderSync(); +``` +```` + +## 生成模式选择指南 + +### 完整生成模式适用场景 + +- 用户是新手，没有现有 spec +- 用户提供需求描述和数据，希望从零开始 +- 用户说"帮我做一个 xxx 图表" + +### 增量生成模式适用场景 + +- 用户已有基础图表配置 +- 用户希望在现有图表上添加特定功能 +- 用户提供当前 spec，询问如何修改 + +--- + +## React 场景补充 + +- 若用户明确使用 React-VChart，输出时应提供 **React 组件代码**，包含完整的 import 语句和组件定义 +- 说明依赖安装：`npm i @visactor/react-vchart @visactor/vchart` +- 如用户不接受纯 JS 示例，可同时给出 React 版本与 VChart 原生版本，标注差异 + +**React 组件示例**： + +```jsx +import React from 'react'; +import { BarChart } from '@visactor/react-vchart'; + +const MyChart = () => { + const spec = { + // VChart 配置 + }; + + return ; +}; + +export default MyChart; +``` + +## 不合格输出示例（禁止） + +- ❌ 只返回部分 spec 配置（如只有 `axes` 或 `series`） +- ❌ 缺少数据源（`data` 字段为空或缺失） +- ❌ 使用占位符如 `[...更多数据...]` 而不给出完整示例 +- ❌ 代码格式不规范，难以复制使用 + +--- + +## 相关资源 + +- [配置项索引](../references/topkey/) - 快速查找配置项 +- [示例库](../references/examples/) - 常用图表完整示例 +- [类型详情](../references/type-details/) - 详细的类型定义 + +``` + +``` diff --git a/skills/vchart-development-skill/references/workflows/scenario-3-image-replication.md b/skills/vchart-development-skill/references/workflows/scenario-3-image-replication.md new file mode 100644 index 0000000000..4adcf2a4cd --- /dev/null +++ b/skills/vchart-development-skill/references/workflows/scenario-3-image-replication.md @@ -0,0 +1,423 @@ +# 场景三处理流程：视觉还原 + +## 适用情况 + +**识别信号**： + +- 用户提供了图表截图/设计稿图片 +- 用户提供了 Figma 设计稿链接或截图 +- 用户说"帮我实现这个图表"、"照着这个做一个" +- 用户希望复刻某个图表效果 + +**输入类型**： + +| 输入类型 | 特点 | 处理方式 | +| ------------- | -------------- | ------------------ | +| 普通截图/图片 | 需要推断样式值 | 标准图片分析流程 | +| Figma 设计稿 | 可获取精确样式 | Figma 专属处理流程 | + +## 处理步骤 + +### 步骤 1：图片分析 + +从用户提供的图片中识别以下信息： + +``` +1. **图表类型**：柱状图/折线图/饼图/散点图/雷达图/漏斗图/组合图等 +2. **数据维度**： + - X 轴/类目轴的数据类型（类目/时间/数值） + - Y 轴/数值轴的范围和格式 + - 数据系列数量（单系列/多系列） +3. **视觉特征**： + - 颜色方案（主色调、是否渐变） + - 是否堆叠/分组/百分比 + - 图表方向（垂直/水平） +4. **组件识别**： + - 标题（位置、内容） + - 图例（位置、布局） + - 坐标轴（标签、网格线、标题） + - 数据标签（是否显示、位置、格式） + - 提示框样式 +5. **特殊元素**： + - 参考线/参考区域 + - 标注点 + - 辅助图形 +``` + +### 步骤 2：与用户确认 + +```markdown +## 图表分析结果 + +根据您提供的图片，我识别到以下信息： + +**图表类型**：[识别的类型] + +**数据结构**： + +- X 轴：[类目/时间/数值]，示例值：[从图中读取的示例] +- Y 轴：[数值范围] +- 系列：[系列数量及含义] + +**视觉特征**： + +- [颜色/布局/样式等描述] + +**组件配置**： + +- [识别到的组件列表] + +**请确认**： + +1. 以上分析是否准确？ +2. 请提供实际数据（如有），或确认使用模拟数据 +3. 是否有其他细节需要补充？ +``` + +### 步骤 3：生成配置 + +确认后，按照以下优先级匹配配置： + +1. **查找相似示例**：在 `../examples/` 中查找最接近的示例作为基础 +2. **构建 spec**： + - 使用 `type-meta/[图表类型].json` 确定可用属性 + - 使用 `type-details/*.md` 获取样式配置的详细类型 +3. **样式还原**： + - 颜色：设置 `color` 色板或系列 `style` + - 标签：配置 `label` 的 `position`、`style` + - 坐标轴：配置 `axes` 的 `label`、`grid`、`title` + - 图例：配置 `legends` 的 `position`、`orient` + +### 步骤 4：输出 JavaScript 代码（强制） + +直接输出 **完整的 VChart spec 配置代码**，禁止只输出部分片段。 + +1. **Mock 数据**：根据图片中的数据点构建模拟数据 + - 尽量从坐标轴/标签中读取真实数值 + - 确保数据点数量与图片一致 + - 保持数据趋势特征 +2. **填充模板**： + - 替换标题/描述占位：`{{REPORT_TITLE}}`、`{{REPORT_DESC}}` + - `主要功能说明`：填充 `{{FEATURE_DESC}}`（描述图片中实现的核心视觉/业务要点，如占比、趋势、堆叠、渐变、标签位置） + - `编辑提示`：填充 `{{EDIT_TIPS}}`（标注可调节的关键配置，如 color/gradient、label、legend、axes、markLine/markArea） + +3. **代码格式**：用 ```javascript 代码块包裹，确保可直接使用 + +--- + +## 还原流程完整示例 + +**输出模板**： + +````markdown +## 图表还原结果 + +基于图片分析，生成了以下配置。 + +**还原说明**： + +- ✅ 已还原：[列出已还原的特征] +- ⚠️ 需调整：[列出需要用户确认或调整的部分] + +**完整代码**： + +```javascript +// 🖼️ 图片还原示例 +// 配置要点：[关键配置说明] + +const spec = { + // 完整的 VChart spec 配置 +}; + +// 使用方式： +// const vchart = new VChart(spec, { dom: 'chart' }); +// vchart.renderSync(); +``` +```` + +## 图片分析技巧 + +### 图表类型识别 + +| 视觉特征 | 图表类型 | 关键标识 | +| ---------- | -------- | ------------- | +| 矩形柱子 | bar | 垂直/水平条形 | +| 连续曲线 | line | 数据点连线 | +| 扇形分块 | pie | 圆形切片 | +| 散布点 | scatter | 离散数据点 | +| 多边形网格 | radar | 雷达网格 | +| 梯形层级 | funnel | 漏斗形状 | +| 圆弧刻度 | gauge | 仪表盘样式 | + +### 颜色提取策略 + +1. **主色调识别**：提取图表中的主要颜色作为色板 +2. **渐变检测**：识别是否使用渐变色填充 +3. **系列颜色**：多系列图表的颜色区分方案 +4. **语义颜色**：如红色表示负值、绿色表示正值 + +### 数据推断方法 + +当用户未提供真实数据时： + +1. **从图片读取**：尽量从坐标轴、标签中读取数值 +2. **合理估算**：根据图形比例估算数据大小 +3. **保持趋势**：确保模拟数据体现图片中的趋势特征 +4. **数量匹配**：模拟数据的数量与图片中的数据点数量一致 + +## 还原注意事项 + +### 精确度说明 + +1. **高精确度**：图表类型、基本布局、数据趋势 +2. **中等精确度**：颜色、字体大小、间距 +3. **低精确度**：像素级精确对齐、特殊字体 + +### VChart 能力边界 + +1. **支持的特性**： + - 标准图表类型 + - 常用组件（标题、图例、坐标轴、标签） + - 基础动画效果 + - 主题样式 + +2. **不支持或难以实现**： + - 非标准图表类型 + - 复杂的自定义图形 + - 特殊的交互效果 + - 精确的像素级样式 + +3. **替代方案**：当遇到不支持的特性时，提供最接近的实现方式 + +--- + +## Figma 设计稿专属处理 + +当用户提供 Figma 设计稿时，可获取比普通图片更精确的样式信息。 + +### 识别 Figma 输入 + +- 用户提到"Figma"、"设计稿"、"UI 稿" +- 用户提供 Figma 链接（`figma.com/file/...` 或 `figma.com/design/...`） +- 用户提供带有精确标注的设计截图 + +### Figma 信息提取清单 + +从 Figma 设计稿中提取以下精确信息： + +``` + +1. **颜色值**（精确 HEX/RGB）： + + - 图表主色：#XXXXXX + - 系列色板：['#XXX', '#XXX', ...] + - 背景色：#XXXXXX + - 文字颜色：#XXXXXX + - 网格线颜色：#XXXXXX + +2. **字体样式**： + + - 字体族：fontFamily + - 标题字号：如 16px + - 标签字号：如 12px + - 字重：normal / bold / 500 + +3. **尺寸间距**： + + - 图表宽高：width x height + - 内边距：padding + - 组件间距：如图例与图表的间距 + +4. **圆角与边框**： + + - 柱子圆角：borderRadius + - 边框宽度：lineWidth + - 边框样式：solid / dashed + +5. **渐变配置**（如有）： + + - 渐变类型：linear / radial + - 渐变方向：角度或位置 + - 色标：[{offset, color}, ...] + +6. **阴影效果**（如有）： + - 阴影颜色、偏移、模糊半径 + +``` + +### Figma 样式转 VChart 配置映射 + +| Figma 属性 | VChart 配置路径 | 示例 | +| --------------- | ------------------------------ | ------------ | +| Fill Color | `[series].style.fill` | `'#1890FF'` | +| Stroke Color | `[series].style.stroke` | `'#1890FF'` | +| Stroke Width | `[series].style.lineWidth` | `2` | +| Corner Radius | `bar.style.cornerRadius` | `4` | +| Font Family | `[component].style.fontFamily` | `'Inter'` | +| Font Size | `[component].style.fontSize` | `12` | +| Font Weight | `[component].style.fontWeight` | `500` | +| Text Color | `[component].style.fill` | `'#333333'` | +| Opacity | `[series].style.fillOpacity` | `0.8` | +| Linear Gradient | `[series].style.fill.gradient` | 渐变配置对象 | + +### Figma 渐变转换示例 + +**Figma 渐变定义**： + +``` + +Linear Gradient: 180° +Stop 1: #1890FF at 0% +Stop 2: #69C0FF at 100% + +``` + +**转换为 VChart 配置**： + +```javascript +{ + bar: { + style: { + fill: { + gradient: 'linear', + x0: 0, y0: 0, + x1: 0, y1: 1, + stops: [ + { offset: 0, color: '#1890FF' }, + { offset: 1, color: '#69C0FF' } + ] + } + } + } +} +``` + +### Figma 处理流程 + +#### 步骤 F1：收集设计信息 + +请用户提供： + +1. Figma 设计稿截图（带标注更佳） +2. 关键样式值（颜色、字号、间距） +3. 图表数据（如有） +4. 特殊交互说明（如有） + +#### 步骤 F2：精确样式提取 + +```markdown +## Figma 设计分析 + +根据您的设计稿，提取到以下样式信息： + +**色彩系统**： + +- 主色：`#XXXXXX` +- 色板：`['#XXX', '#XXX', '#XXX']` + +**字体系统**： + +- 字体：[字体名称] +- 标题：[字号] / [字重] +- 标签：[字号] / [字重] + +**间距尺寸**： + +- 图表区域：[宽] x [高] +- 内边距：[值] + +**请确认以上提取的样式值是否准确？** +``` + +#### 步骤 F3：生成精确配置 + +基于 Figma 精确值生成配置： + +```javascript +const spec = { + type: '[图表类型]', + // ... 数据配置 + + // Figma 精确样式 + color: ['#精确色值1', '#精确色值2'], + + [seriesType]: { + style: { + fill: '#精确填充色', + stroke: '#精确边框色', + lineWidth: 精确边框宽度, + cornerRadius: 精确圆角值 + } + }, + + title: { + text: '标题文字', + textStyle: { + fontFamily: 'Figma字体', + fontSize: 精确字号, + fontWeight: 精确字重, + fill: '#精确文字色' + } + }, + + axes: [ + { + label: { + style: { + fontSize: 精确字号, + fill: '#精确文字色' + } + }, + grid: { + style: { + stroke: '#精确网格色', + lineWidth: 精确线宽 + } + } + } + ] +}; +``` + +### Figma 还原注意事项 + +1. **字体兼容性**： + - Figma 中的自定义字体需确保在 Web 环境可用 + - 如不可用，推荐相近的系统字体替代 + +2. **响应式处理**： + - Figma 设计通常为固定尺寸 + - 需要确认是否需要响应式适配 + - 必要时使用百分比或相对单位 + +3. **Design Token 对接**： + - 如果项目有 Design Token 系统，优先使用 Token + - 便于后续主题切换和维护 + +4. **状态变体**： + - Figma 可能包含 hover/active/disabled 等状态 + - 需要配置对应的 VChart 交互样式 + +5. **精确度优势**： + - Figma 输入的还原精确度应达到 **95%+** + - 主要差异可能来自：字体渲染、抗锯齿、动画细节 + +--- + +--- + +## 相关资源 + +- [图表类型指南](../references/chart/chart-type-guide.md) - 各类图表特性参考 +- [示例库](../references/examples/) - 常用图表完整示例 +- [组件参考](../references/components/) - 组件配置速查 + +### 图片还原专项提示 + +1. **颜色提取**：使用浏览器开发者工具或取色器精确获取原图颜色值 +2. **数据点对齐**：确保 mock 数据点数量与原图一致，保持趋势特征 +3. **样式迭代**：生成初版后，对比原图逐步调整 `color`、`label`、`axes`、`legend` 等配置 + +``` + +``` diff --git a/skills/vchart-development-skill/scripts/generate_demo_html.py b/skills/vchart-development-skill/scripts/generate_demo_html.py new file mode 100644 index 0000000000..b5241cfeeb --- /dev/null +++ b/skills/vchart-development-skill/scripts/generate_demo_html.py @@ -0,0 +1,84 @@ +#!/usr/bin/env python3 +""" +VChart 示例 HTML 生成脚本 + +使用方式： + python3 scripts/generate_demo_html.py \\ + --title "图表示例标题" \\ + --desc "图表示例描述" \\ + --feature "主要功能说明" \\ + --tips "编辑提示" \\ + --spec-file spec.js \\ + --output output/demo.html + +更多信息请查看: references/workflows/scenario-2-generation.md +""" + +from pathlib import Path +import argparse + +def escape_js_string(s: str) -> str: + """转义 JavaScript 字符串中的特殊字符""" + s = s.replace("\\", "\\\\") + s = s.replace("`", "\\`") + s = s.replace("\n", "\\n") + return s + +def main(): + parser = argparse.ArgumentParser(description="Generate demo HTML from assets/template/demo.html") + parser.add_argument("--title", default="VChart 图表示例", help="页面标题") + parser.add_argument("--desc", default="基于需求生成的可运行图表配置", help="页面描述") + parser.add_argument("--feature", default="补充主要功能说明", help="主要功能说明") + parser.add_argument("--tips", default="补充编辑提示", help="编辑提示") + parser.add_argument("--spec-file", help="包含完整 spec 代码的文件路径") + parser.add_argument("--output", default="output/demo.html", help="输出 HTML 文件路径") + args = parser.parse_args() + + template_path = Path("assets/template/demo.html") + if not template_path.exists(): + raise FileNotFoundError(f"❌ 模板不存在: {template_path}\n💡 请确保在项目根目录运行脚本") + + html = template_path.read_text(encoding="utf-8") + html = html.replace("{{REPORT_TITLE}}", args.title) + html = html.replace("{{REPORT_DESC}}", args.desc) + html = html.replace("{{FEATURE_DESC}}", args.feature) + html = html.replace("{{EDIT_TIPS}}", args.tips) + + if args.spec_file: + spec_path = Path(args.spec_file) + if not spec_path.exists(): + raise FileNotFoundError(f"❌ Spec 文件不存在: {spec_path}") + spec_code = spec_path.read_text(encoding="utf-8") + else: + spec_code = """const spec = { + type: "line", + data: { + values: [ + { time: "2:00", value: 8 }, + { time: "4:00", value: 9 }, + { time: "6:00", value: 11 }, + { time: "8:00", value: 14 }, + { time: "10:00", value: 16 } + ] + }, + xField: "time", + yField: "value" +};""" + + # 转义 spec 代码供 JavaScript 字符串使用 + initial_code_escaped = escape_js_string(spec_code.strip()) + + # 填充 spec 和 initialCode 模板变量 + html = html.replace("{{SPEC_CODE}}", spec_code) + html = html.replace("{{INITIAL_CODE}}", initial_code_escaped) + filled = html + + output_path = Path(args.output) + output_path.parent.mkdir(parents=True, exist_ok=True) + output_path.write_text(filled, encoding="utf-8") + + print(f"✅ 示例 HTML 已生成: {output_path.resolve()}") + print(f"📊 请在浏览器中打开以查看可运行示例") + +if __name__ == "__main__": + main() diff --git a/skills/vchart-development-skill/scripts/generate_diagnosis_html.py b/skills/vchart-development-skill/scripts/generate_diagnosis_html.py new file mode 100644 index 0000000000..6dc6c93977 --- /dev/null +++ b/skills/vchart-development-skill/scripts/generate_diagnosis_html.py @@ -0,0 +1,98 @@ +#!/usr/bin/env python3 +""" +VChart 诊断 HTML 生成脚本 + +使用方式： + python3 scripts/generate_diagnosis_html.py \\ + --title "诊断报告标题" \\ + --desc "诊断报告描述" \\ + --config-file config.js \\ + --output output/diagnosis.html + +更多信息请查看: references/workflows/scenario-1-diagnosis.md +""" + +from pathlib import Path +import argparse + +def main(): + parser = argparse.ArgumentParser(description="Generate diagnosis HTML from assets/template/diagnosis.html") + parser.add_argument("--title", default="VChart 问题诊断报告", help="报告标题") + parser.add_argument("--desc", default="基于用户配置的诊断与修复结果", help="报告描述") + parser.add_argument("--config-file", help="包含 problemReview/diagnosis/solutions 的 JS 代码块文件路径") + parser.add_argument("--output", default="output/diagnosis.html", help="输出 HTML 文件路径") + args = parser.parse_args() + + template_path = Path("assets/template/diagnosis.html") + if not template_path.exists(): + raise FileNotFoundError(f"❌ 模板不存在: {template_path}\n💡 请确保在项目根目录运行脚本") + + html = template_path.read_text(encoding="utf-8") + + html = html.replace("{{REPORT_TITLE}}", args.title) + html = html.replace("{{REPORT_DESC}}", args.desc) + + if args.config_file: + config_path = Path(args.config_file) + if not config_path.exists(): + raise FileNotFoundError(f"❌ 配置文件不存在: {config_path}") + config_block = config_path.read_text(encoding="utf-8") + else: + config_block = """const problemReview = { + highlightLines: [11], + specCode: `const spec = { + type: "bar", + data: { + values: [ + { category: "A", value: 10 }, + { category: "B", value: 20 }, + { category: "C", value: 15 } + ] + }, + xField: "category", + yField: "values", + label: { visible: true, formatter: (d) => d.value + "%" } +};` +}; + +const diagnosis = { + problem: "图表 Y 轴没有数据显示，柱状图高度为 0", + cause: "yField 配置值为 \\"values\\"，但数据字段名为 \\"value\\"", + suggestion: "确保 xField/yField 与数据字段名严格一致" +}; + +const solutions = [ + { + title: "修正字段映射", + description: "将 yField 的值从 \\"values\\" 修正为 \\"value\\"，与数据字段名保持一致。", + highlightLines: [11], + specCode: `const spec = { + type: "bar", + data: { + values: [ + { category: "A", value: 10 }, + { category: "B", value: 20 }, + { category: "C", value: 15 } + ] + }, + xField: "category", + yField: "value", + label: { visible: true } +};` + } +];""" + + if "{{CONFIG_BLOCK}}" not in html: + raise ValueError("❌ 模板中未找到 {{CONFIG_BLOCK}} 占位符\n💡 请检查模板文件: assets/template/diagnosis.html") + + filled = html.replace("{{CONFIG_BLOCK}}", config_block) + + output_path = Path(args.output) + output_path.parent.mkdir(parents=True, exist_ok=True) + output_path.write_text(filled, encoding="utf-8") + + print(f"✅ 诊断 HTML 已生成: {output_path.resolve()}") + print(f"📖 请在浏览器中打开以查看交互式诊断报告") + +if __name__ == "__main__": + main() diff --git a/skills/vchart-development-skill/scripts/generate_diagnosis_react_html.py b/skills/vchart-development-skill/scripts/generate_diagnosis_react_html.py new file mode 100644 index 0000000000..6e76d58383 --- /dev/null +++ b/skills/vchart-development-skill/scripts/generate_diagnosis_react_html.py @@ -0,0 +1,173 @@ +#!/usr/bin/env python3 +""" +生成 React-VChart 诊断 HTML 文件脚本 + +使用方式： +python3 generate_diagnosis_react_html.py \\ + --problem-code "原始代码" \\ + --problem-title "问题标题" \\ + --cause "原因分析" \\ + --suggestion "修复建议" \\ + --solution-1-title "方案标题" \\ + --solution-1-desc "方案描述" \\ + --solution-1-code "修复代码" \\ + --output output.html +""" + +from pathlib import Path +import argparse +import re +from typing import Dict, List + + +def escape_js_string(s: str) -> str: + """转义 JavaScript 字符串中的特殊字符""" + s = s.replace("\\", "\\\\") + s = s.replace('"', '\\"') + s = s.replace("\n", "\\n") + s = s.replace("\r", "\\r") + s = s.replace("\t", "\\t") + return s + + +def generate_solutions_config(solutions: List[Dict[str, str]]) -> str: + """生成 solutions 数组配置""" + if not solutions: + return "const solutions = [];" + + config = "const solutions = [\n" + for i, sol in enumerate(solutions): + config += " {\n" + config += f' title: "{sol["title"]}",\n' + config += f' description: "{escape_js_string(sol["desc"])}",\n' + config += f' code: `{sol["code"]}`\n' + config += " }" + if i < len(solutions) - 1: + config += ",\n" + else: + config += "\n" + config += "];" + return config + + +def generate_config_block( + problem_code: str, + problem_title: str, + cause: str, + suggestion: str = None, + solutions: List[Dict[str, str]] = None +) -> str: + """生成诊断页面所需的配置块""" + + if solutions is None: + solutions = [] + + config = " // 问题回顾配置\n" + config += " const problemReview = {\n" + config += f" code: `{problem_code}`\n" + config += " };\n\n" + + config += " // 诊断分析配置\n" + config += " const diagnosis = {\n" + config += f' problem: "{escape_js_string(problem_title)}",\n' + config += f' cause: "{escape_js_string(cause)}"' + + if suggestion: + config += f',\n suggestion: "{escape_js_string(suggestion)}"' + + config += "\n };\n\n" + + config += " // 解决方案配置\n" + config += generate_solutions_config(solutions) + "\n" + + return config + + +def main(): + parser = argparse.ArgumentParser( + description="生成 React-VChart 诊断 HTML 文件", + formatter_class=argparse.RawDescriptionHelpFormatter, + epilog=""" +示例： + python3 generate_diagnosis_react_html.py \\ + --problem-code "const ChartComponent = () => {...}" \\ + --problem-title "图表不显示" \\ + --cause "数据格式错误" \\ + --solution-1-title "修正数据格式" \\ + --solution-1-desc "按照 VChart 规范修改数据" \\ + --solution-1-code "const spec = {...}" + """ + ) + + # 基础参数 + parser.add_argument("--problem-code", required=True, help="用户问题代码（JSX 格式）") + parser.add_argument("--problem-title", required=True, help="问题简述") + parser.add_argument("--cause", required=True, help="问题原因分析") + parser.add_argument("--suggestion", help="修复建议（可选）") + parser.add_argument("--output", default="output/diagnosis_react.html", help="输出 HTML 文件路径") + + # 解析动态参数（支持多个解决方案） + args, unknown = parser.parse_known_args() + + # 提取解决方案参数 + solutions = {} + solution_pattern = r"--solution-(\d+)-(title|desc|code)" + + for i in range(len(unknown)): + arg = unknown[i] + match = re.match(solution_pattern, arg) + if match: + sol_num = int(match.group(1)) + sol_type = match.group(2) + + if sol_num not in solutions: + solutions[sol_num] = {} + + if i + 1 < len(unknown) and not unknown[i + 1].startswith("--"): + solutions[sol_num][sol_type] = unknown[i + 1] + + # 检查模板文件 + template_path = Path("assets/template/diagnosis-react.html") + if not template_path.exists(): + raise FileNotFoundError(f"❌ 模板不存在: {template_path}\n💡 请确保在项目根目录运行脚本") + + # 读取模板 + html = template_path.read_text(encoding="utf-8") + + # 生成解决方案列表 + solutions_list = [] + for sol_num in sorted(solutions.keys()): + sol = solutions[sol_num] + if "title" in sol and "desc" in sol and "code" in sol: + solutions_list.append({ + "title": sol["title"], + "desc": sol["desc"], + "code": sol["code"] + }) + + # 生成新的配置块 + new_config = generate_config_block( + problem_code=args.problem_code, + problem_title=args.problem_title, + cause=args.cause, + suggestion=args.suggestion, + solutions=solutions_list + ) + + if "{{CONFIG_BLOCK}}" not in html: + raise ValueError("❌ 模板中未找到 {{CONFIG_BLOCK}} 占位符\n💡 请检查模板文件: assets/template/diagnosis-react.html") + + # 替换模板中的配置块 + html = html.replace("{{CONFIG_BLOCK}}", new_config) + + # 创建输出目录 + output_path = Path(args.output) + output_path.parent.mkdir(parents=True, exist_ok=True) + + # 写入输出文件 + output_path.write_text(html, encoding="utf-8") + print(f"✅ 诊断 HTML 已生成: {output_path}") + + +if __name__ == "__main__": + main() diff --git a/skills/vchart-development-skill/workflows/scenario-1-diagnosis.md b/skills/vchart-development-skill/workflows/scenario-1-diagnosis.md new file mode 100644 index 0000000000..c90b2c2bfd --- /dev/null +++ b/skills/vchart-development-skill/workflows/scenario-1-diagnosis.md @@ -0,0 +1,268 @@ +# 场景一处理流程：问题诊断 + +## 适用情况 + +**识别信号**： + +- 用户提供了现有代码并描述"不工作"、"报错"、"显示异常" +- 用户询问"有没有更好的方式"、"如何优化" +- 用户遇到性能问题或渲染问题 +- 用户描述问题现象（可能有截图，可能无配置） + +> **注意**：如用户使用 `@visactor/react-vchart` 库，请直接参考 [scenario-1-react.md](scenario-1-react.md) + +## 模式分类 + +``` +if (用户提供了现有 spec 配置) { + → 配置诊断模式：基于用户配置分析问题并修复 +} else { + → 描述诊断模式：根据用户描述/截图生成解决方案配置 +} +``` + +--- + +## 配置诊断模式（用户提供了 spec） + +### 步骤 1a：收集信息 + +请用户提供： + +1. 完整的 VChart spec 配置代码 +2. 数据样本（至少 3-5 条） +3. 错误信息或异常表现描述 +4. 期望的正确效果 + +### 步骤 2a：诊断分析 + +使用 `type-meta/[图表类型].json` 检查配置完整性： + +``` +1. **类型检查**：spec.type 是否为有效图表类型 +2. **必填字段**：对照 type-meta 检查 required: true 的字段 +3. **字段映射**：xField/yField/valueField 等是否与数据字段匹配 +4. **数据格式**：data 配置是否符合 IData 规范 +5. **类型约束**：属性值是否符合 type-details 中的类型定义 +6. **版本兼容**：确认 API 是否适用于 2.0.0+ 版本 +``` + +--- + +## 描述诊断模式（用户未提供 spec） + +### 步骤 1b：理解问题 + +根据用户描述/截图识别： + +1. **问题类型**：布局、样式、交互、性能、数据显示等 +2. **图表类型**：推断用户使用的图表类型 +3. **期望效果**：用户想要达到的目标 + +### 步骤 2b：构建解决方案 + +1. **Mock 数据**：根据问题场景构建合理的模拟数据（至少 5 条） +2. **生成 spec**：创建能体现解决方案的完整配置 +3. **对比方案**：如适用，提供问题现象 vs 修复后的对比 + +--- + +## 输出可运行 HTML（强制） + +使用 `assets/template/diagnosis.html` 模板，通过 Python 脚本产出完整 HTML。 + +### 配置诊断模式输出 + +- **诊断结果**：基于用户配置的分析结论 +- **方案 spec**：基于用户原配置修复后的完整配置 + +### 描述诊断模式输出 + +- **诊断结果**：问题现象解读 + 解决思路 +- **方案 spec**：使用 Mock 数据构建的完整配置，体现解决方案 + +### 使用 Python 脚本生成诊断 HTML + +推荐使用 `scripts/generate_diagnosis_html.py` 脚本，通过配置文件生成诊断 HTML。 + +> 💡 **参数详情**：参见 [脚本参数参考](../references/SCRIPT_PARAMS_REFERENCE.md#generate_diagnosis_htmlpy) + +#### 脚本使用示例 + +**最小示例**（使用默认参数）： + +```bash +python3 scripts/generate_diagnosis_html.py --config-file config.js +``` + +**完整示例**（自定义所有参数）： + +```bash +python3 scripts/generate_diagnosis_html.py \ + --title "VChart 问题诊断报告" \ + --desc "基于用户配置的诊断与修复结果" \ + --config-file config.js \ + --output output/diagnosis.html +``` + +#### 主要参数 + +- `--config-file`：包含 `problemReview`/`diagnosis`/`solutions` 的 JS 配置文件 +- `--title`：诊断报告标题（可选） +- `--output`：输出 HTML 文件路径（可选，默认 `output/diagnosis.html`） + +#### 配置文件结构 + +配置文件需要包含三个 JavaScript 对象： + +**1. problemReview（问题回顾）** + +```javascript +const problemReview = { + highlightLines: [11], // 可选：需要高亮的行号数组 + specCode: `[用户原始代码]` // 完整 JS 代码字符串，可包含函数 +}; +``` + +**2. diagnosis（诊断分析）** + +```javascript +const diagnosis = { + problem: '[问题简述]', + cause: '[原因分析]', + suggestion: '[修复建议]' // 可选 +}; +``` + +**3. solutions（解决方案数组）** + +```javascript +const solutions = [ + { + title: '[方案标题]', + description: '[方案描述]', + highlightLines: [11], // 可选：需要高亮的行号数组 + specCode: `[修复代码]` // 完整 JS 代码字符串，可包含函数 + } + // 更多方案... +]; +``` + +#### 实际使用示例 + +**步骤 1：创建配置文件 `config.js`** + +```javascript +const problemReview = { + highlightLines: [11], + specCode: `const spec = { + type: "bar", + data: { + values: [ + { category: "A", value: 10 }, + { category: "B", value: 20 } + ] + }, + xField: "category", + yField: "values", + label: { + visible: true, + formatter: (d) => d.value + "%" + } +};` +}; + +const diagnosis = { + problem: '图表 Y 轴没有数据显示，柱状图高度为 0', + cause: 'yField 配置值为 "values"，但数据字段名为 "value"', + suggestion: '确保 xField/yField 与数据字段名严格一致' +}; + +const solutions = [ + { + title: '修正字段映射', + description: '将 yField 的值从 "values" 修正为 "value"，与数据字段名保持一致。', + highlightLines: [11], + specCode: `const spec = { + type: "bar", + data: { + values: [ + { category: "A", value: 10 }, + { category: "B", value: 20 } + ] + }, + xField: "category", + yField: "value", + label: { visible: true } +};` + } +]; +``` + +**步骤 2：运行脚本生成 HTML** + +```bash +python3 scripts/generate_diagnosis_html.py \ + --title "字段映射错误诊断" \ + --desc "柱状图 Y 轴数据显示问题分析" \ + --config-file config.js \ + --output output/diagnosis.html +``` + +**步骤 3：查看生成结果** + +在浏览器中打开 `output/diagnosis.html` 查看交互式诊断报告。 + +### 输出格式 + +````markdown +## 诊断方案（可运行） + +将以下内容保存为 `.html` 文件，在浏览器中打开： + +```html +[使用模板填充后的完整 HTML] +``` +```` + +## 常见问题速查 + +参考：`../references/chart/common-issues.md` + +## 诊断清单 + +### 数据相关问题 + +| 问题现象 | 可能原因 | 检查项 | +| ------------ | ------------------ | ------------------------------------ | +| 图表不显示 | 数据为空或格式错误 | `data.values` 是否为数组且非空 | +| 坐标轴无数据 | 字段映射错误 | `xField`/`yField` 是否匹配数据字段名 | +| 数据显示异常 | 数据类型不匹配 | 数值字段是否为 number 类型 | + +### 配置相关问题 + +| 问题现象 | 可能原因 | 检查项 | +| ------------ | ------------------ | --------------------------- | +| 组件不显示 | visible 设为 false | 检查组件 `visible` 属性 | +| 样式不生效 | 配置路径错误 | 对照 type-meta 检查属性路径 | +| 版本兼容问题 | API 已变更 | 确认使用的是 2.0.0+ API | + +--- + +## 脚本故障排除 + +遇到脚本执行问题？请参考：**[Python 脚本常见问题排除指南](../references/SCRIPTS_TROUBLESHOOTING.md)** + +### 快速链接 + +常见问题包括： + +- ❌ [模板不存在错误](../references/SCRIPTS_TROUBLESHOOTING.md#-模板不存在错误)（运行位置不正确） +- ❌ [配置文件不存在](../references/SCRIPTS_TROUBLESHOOTING.md#-配置文件不存在configjs)（`config.js` 路径错误） +- ❌ [模板标记缺失](../references/SCRIPTS_TROUBLESHOOTING.md#-模板标记缺失错误)（模板文件被修改） +- ❌ [HTML 文件无法打开](../references/SCRIPTS_TROUBLESHOOTING.md#-输出目录问题)（输出目录或权限问题） + +### 其他资源 + +- [文件命名约定](../references/FILE_NAMING_CONVENTIONS.md) - 了解 `config.js` 的格式要求 +- [脚本参数参考](../references/SCRIPT_PARAMS_REFERENCE.md) - 查看所有可用参数 diff --git a/skills/vchart-development-skill/workflows/scenario-1-react.md b/skills/vchart-development-skill/workflows/scenario-1-react.md new file mode 100644 index 0000000000..2f33d4b131 --- /dev/null +++ b/skills/vchart-development-skill/workflows/scenario-1-react.md @@ -0,0 +1,806 @@ +# React-VChart 问题诊断专项指南 + +> 本文档是场景一（问题诊断）的 React-VChart 专项补充，适用于使用 `@visactor/react-vchart` 库的 React 用户。 + +## 适用情况 + +当用户代码中出现以下特征时，使用本指南： + +- 从 `@visactor/react-vchart` 导入组件 +- 使用 ``、``、`` 等 JSX 标签 +- React 项目中的图表问题 +- 提及 React Hooks、状态管理、组件生命周期等 + +--- + +## React-VChart 特有问题诊断 + +### 1. 组件使用错误 + +#### 问题 1.1：组件类型选择错误 + +**识别信号**： + +- 图表类型与组件不匹配 +- 用户使用 `` 但想要柱状图 + +**诊断步骤**： + +``` +1. 确认用户意图的图表类型 +2. 检查使用的组件标签是否匹配： + - 柱状图 → + - 折线图 → + - 饼图 → + - 通用 → (需要 spec prop) +``` + +**修复示例**： + +```jsx +// ❌ 错误 + + + + +// ✅ 正确 + + + +``` + +#### 问题 1.2：组件嵌套错误 + +**识别信号**： + +- 系列组件（如 ``）未放在对应图表组件内 +- 组件标签组合不合法 + +**诊断步骤**： + +``` +1. 检查系列组件是否在正确的父组件下： + - 必须在 或 内 + - 必须在 或 内 +2. 检查组件组件（Axis、Legend）是否在图表组件内 +``` + +**修复示例**： + +```jsx +// ❌ 错误 +
+ + +
+ +// ✅ 正确 + + + + + +``` + +--- + +### 2. Props 传递问题 + +#### 问题 2.1：data prop 格式错误 + +**识别信号**： + +- 图表不显示或报错 "data is not iterable" +- data 格式不符合 VChart 规范 + +**诊断步骤**： + +``` +1. 检查 data 是否为数组格式：[{ id, values }] +2. 确认 values 是否为数组 +3. 检查数据字段是否与 xField/yField 匹配 +``` + +**常见错误**： + +```jsx +// ❌ 错误 1：直接传值数组 + + +// ❌ 错误 2：缺少 id + + +// ❌ 错误 3：values 不是数组 + + +// ✅ 正确 + +``` + +#### 问题 2.2：配置对象 props 错误 + +**识别信号**： + +- 样式配置不生效 +- 嵌套对象配置语法错误 + +**诊断步骤**： + +``` +1. 确认对象型 props 使用双花括号 {{ }} +2. 检查对象内部属性名是否正确 +3. 对照 VChart spec 文档验证配置项 +``` + +**修复示例**： + +```jsx +// ❌ 错误：单花括号 + + +// ✅ 正确：双花括号 + + +// ✅ 正确：嵌套对象 + +``` + +--- + +### 3. 状态更新问题 + +#### 问题 3.1：数据更新不触发重渲染 + +**识别信号**： + +- 修改 state 后图表不更新 +- 数据变化但图表保持旧数据 + +**诊断步骤**： + +``` +1. 检查是否使用了不可变更新方式 +2. 确认 data prop 引用是否改变 +3. 检查 React DevTools 确认组件是否重新渲染 +``` + +**常见问题**： + +```jsx +// ❌ 错误：直接修改数组（引用未变） +const handleUpdate = () => { + chartData.push({ x: 5, y: 10 }); + setChartData(chartData); // 引用相同，不触发更新 +}; + +// ✅ 正确：创建新数组 +const handleUpdate = () => { + setChartData([...chartData, { x: 5, y: 10 }]); +}; + +// ✅ 正确：使用不可变更新 +const handleUpdate = () => { + setChartData(prev => [...prev, { x: 5, y: 10 }]); +}; +``` + +#### 问题 3.2：频繁更新导致性能问题 + +**识别信号**： + +- 图表卡顿或闪烁 +- 每次 state 变化都触发图表完全重绘 + +**诊断步骤**： + +``` +1. 检查 data 是否在每次渲染时创建新对象 +2. 确认是否使用了 useMemo 优化 +3. 检查父组件是否频繁重渲染 +``` + +**优化方案**： + +```jsx +// ❌ 问题：每次渲染创建新数据 +function Chart() { + const data = [{ id: 'data', values: generateData() }]; + return ...; +} + +// ✅ 优化 1：使用 useMemo +function Chart() { + const data = useMemo( + () => [{ id: 'data', values: generateData() }], + [] // 依赖项 + ); + return ...; +} + +// ✅ 优化 2：使用 useState +function Chart() { + const [data] = useState([{ id: 'data', values: generateData() }]); + return ...; +} +``` + +--- + +### 4. 事件处理问题 + +#### 问题 4.1：事件回调未触发 + +**识别信号**： + +- onClick、onReady 等回调不执行 +- 控制台无错误但事件无响应 + +**诊断步骤**： + +``` +1. 确认事件名是否正确（注意大小写） +2. 检查回调函数是否正确定义 +3. 确认事件是否在正确的组件上监听 +``` + +**常见错误**： + +```jsx +// ❌ 错误 1：事件名错误 + // 应为 onClick + +// ❌ 错误 2：未传递函数 + // 应为 {handleClick} + +// ❌ 错误 3：立即执行 + // 应为 {handleClick} + +// ✅ 正确 + + ... + + +// ✅ 正确：内联函数 + console.log(e)}> + ... + +``` + +#### 问题 4.2：onReady 获取实例错误 + +**识别信号**： + +- 无法获取 VChart 实例 +- 实例方法调用失败 + +**诊断步骤**： + +``` +1. 确认 onReady 回调参数接收实例 +2. 检查实例保存方式（ref vs state） +3. 验证实例方法调用时机 +``` + +**正确用法**： + +```jsx +function Chart() { + const chartRef = useRef(null); + + const handleReady = (instance, isInitial) => { + chartRef.current = instance; + console.log('Chart ready:', isInitial); + }; + + const updateChart = () => { + if (chartRef.current) { + chartRef.current.updateSpec({...}); + } + }; + + return ( + + + + ); +} +``` + +--- + +### 5. 生命周期和副作用问题 + +#### 问题 5.1：内存泄漏 + +**识别信号**： + +- 组件卸载后仍有定时器运行 +- 控制台警告 "Can't perform a React state update on an unmounted component" + +**诊断步骤**： + +``` +1. 检查是否在 useEffect 中正确清理副作用 +2. 确认事件监听器是否正确移除 +3. 检查异步操作是否在组件卸载后仍执行 +``` + +**修复示例**： + +```jsx +// ❌ 问题：未清理定时器 +function Chart() { + const [data, setData] = useState(initialData); + + useEffect(() => { + const timer = setInterval(() => { + setData(generateNewData()); + }, 1000); + // 缺少清理函数 + }, []); + + return ...; +} + +// ✅ 正确：添加清理函数 +function Chart() { + const [data, setData] = useState(initialData); + + useEffect(() => { + const timer = setInterval(() => { + setData(generateNewData()); + }, 1000); + + return () => clearInterval(timer); // 清理 + }, []); + + return ...; +} +``` + +#### 问题 5.2：依赖项错误导致无限循环 + +**识别信号**： + +- 页面卡死或持续重渲染 +- 控制台疯狂输出日志 + +**诊断步骤**： + +``` +1. 检查 useEffect 依赖数组 +2. 确认依赖项是否在每次渲染时变化 +3. 检查是否在 effect 中修改了依赖项 +``` + +**修复示例**： + +```jsx +// ❌ 问题：依赖项每次都变化 +function Chart({ config }) { + const [data, setData] = useState([]); + + useEffect(() => { + fetchData(config).then(setData); + }, [config]); // config 每次都是新对象 + + return ...; +} + +// ✅ 方案 1：使用 useMemo 稳定依赖 +function Chart({ config }) { + const [data, setData] = useState([]); + const stableConfig = useMemo(() => config, [config.url, config.params]); + + useEffect(() => { + fetchData(stableConfig).then(setData); + }, [stableConfig]); + + return ...; +} + +// ✅ 方案 2：解构依赖 +function Chart({ config }) { + const [data, setData] = useState([]); + + useEffect(() => { + fetchData(config).then(setData); + }, [config.url, config.params]); // 只依赖具体值 + + return ...; +} +``` + +--- + +## 转换为 VChart Spec 诊断 + +当 React 特有问题排查完毕后，如果问题仍然存在，需要将 React 组件代码转换为等价的 VChart spec 进行深度诊断。 + +### 转换规则 + +| React 代码 | VChart Spec | +| -------------------------------------- | -------------------------------------------- | +| `` | `{ type: 'bar', data: data }` | +| `` | `{ xField: 'x', yField: 'y' }` | +| `` | `axes: [{ orient: 'bottom', type: 'band' }]` | +| `` | `legends: { visible: true }` | +| `label={{ visible: true }}` | `label: { visible: true }` | + +### 转换示例 + +```jsx +// React 组件代码 + + + + + +; + +// 等价 VChart spec +const spec = { + type: 'bar', + data: [{ id: 'data', values: chartData }], + xField: 'category', + yField: 'value', + label: { visible: true }, + axes: [ + { orient: 'bottom', type: 'band' }, + { orient: 'left', type: 'linear' } + ], + legends: { visible: true, position: 'top' } +}; +``` + +转换后，使用标准 VChart 诊断流程（参考主文档 scenario-1-diagnosis.md）进行深度分析。 + +--- + +## 输出可运行 HTML + +React-VChart 问题必须使用 `assets/template/diagnosis-react.html` 模板输出。 + +### 模板特点 + +- ✅ 已引入 React 18、ReactDOM、Babel +- ✅ 已引入 React-VChart 库 +- ✅ 支持 JSX 语法（通过 Babel 转译） +- ✅ 支持 Monaco Editor 代码编辑 +- ✅ 实际渲染 React 组件 + +### 使用 Python 脚本生成诊断 HTML + +推荐使用 `scripts/generate_diagnosis_react_html.py` 脚本，通过命令行参数生成诊断 HTML。 + +> 💡 **参数详情**：参见 [脚本参数参考](../references/SCRIPT_PARAMS_REFERENCE.md#generate_diagnosis_react_htmlpy) + +#### 脚本使用示例 + +**最小示例**（单方案）： + +```bash +python3 scripts/generate_diagnosis_react_html.py \ + --problem-code "const Chart = () => " \ + --problem-title "图表不显示" \ + --cause "缺少必需的 data 属性" \ + --solution-1-title "添加 data 属性" \ + --solution-1-desc "为 BarChart 组件添加必需的 data 属性" \ + --solution-1-code "const Chart = () => " +``` + +**完整示例**（多方案 + 可选参数）： + +```bash +python3 scripts/generate_diagnosis_react_html.py \ + --problem-code "用户的原始 React 代码" \ + --problem-title "图表 Y 轴没有数据显示" \ + --cause "yField 属性值错误" \ + --suggestion "确保字段名与数据一致" \ + --solution-1-title "修正字段映射" \ + --solution-1-desc "将 yField 从 \"values\" 改为 \"value\"" \ + --solution-1-code "修复后的代码" \ + --output diagnosis_result.html +``` + +#### 主要参数 + +- `--problem-code`：用户的原始 React 组件代码（JSX 格式） +- `--problem-title`：问题简述 +- `--cause`：问题原因分析 +- `--solution-N-title/desc/code`：第 N 个解决方案（N 从 1 开始连续编号） +- `--output`：输出 HTML 文件路径（可选，默认 `output/diagnosis_react.html`） + +#### 配置对象结构 + +脚本会自动替换模板中 `CONFIG_START` 和 `CONFIG_END` 注释之间的三个 JavaScript 对象： + +**1. problemReview（问题回顾）** + +```javascript +const problemReview = { + code: `[用户原始代码]` +}; +``` + +**2. diagnosis（诊断分析）** + +```javascript +const diagnosis = { + problem: '[问题简述]', + cause: '[原因分析]', + suggestion: '[修复建议]' // 可选 +}; +``` + +**3. solutions（解决方案数组）** + +```javascript +const solutions = [ + { + title: '[方案标题]', + description: '[方案描述]', + code: `[修复代码]` + } + // 更多方案... +]; +``` + +#### 实际使用示例 + +```bash +python3 scripts/generate_diagnosis_react_html.py \ + --problem-code "const ChartComponent = () => { + const chartData = [ + { category: 'A', value: 10 }, + { category: 'B', value: 20 } + ]; + + return ( + + + + ); +};" \ + --problem-title "图表 Y 轴没有数据显示，柱状图高度为 0" \ + --cause "Bar 组件的 yField 属性值为 'values'，但数据字段名为 'value'，字段名不匹配导致无法正确映射数据" \ + --suggestion "确保组件 props 中的 xField/yField 与数据对象的属性名严格一致" \ + --solution-1-title "修正字段映射" \ + --solution-1-desc "将 Bar 组件的 yField 属性从 'values' 修正为 'value'，与数据字段名保持一致。" \ + --solution-1-code "const ChartComponent = () => { + const chartData = [ + { category: 'A', value: 10 }, + { category: 'B', value: 20 } + ]; + + return ( + + + + ); +};" \ + --output my_diagnosis.html +``` + +#### 多方案输出 + +若有多个解决方案，继续添加参数： + +```bash +python3 scripts/generate_diagnosis_react_html.py \ + --problem-code "..." \ + --problem-title "..." \ + --cause "..." \ + --solution-1-title "方案 1" \ + --solution-1-desc "..." \ + --solution-1-code "..." \ + --solution-2-title "方案 2（Hook 优化版）" \ + --solution-2-desc "..." \ + --solution-2-code "..." \ + --output result.html +``` + +#### 输出文件 + +生成的 HTML 文件包含： + +- **问题回顾区**：展示用户原始代码 +- **诊断分析区**：说明问题原因和建议 +- **解决方案区**：多个可编辑且可实时运行的 React 组件方案 +- **Monaco Editor**：支持在线编辑和实时调试 + +### 脚本实现原理 + +脚本 `generate_diagnosis_react_html.py` 的工作流程： + +1. **参数解析**：使用 argparse 解析命令行参数 +2. **配置块生成**：根据参数生成 JavaScript 配置对象 + - 转义特殊字符（引号、换行等） + - 生成 `problemReview`、`diagnosis`、`solutions` 配置 +3. **模板替换**：使用正则表达式匹配并替换模板中 `CONFIG_START` 和 `CONFIG_END` 之间的内容 +4. **文件输出**：创建输出目录并写入修改后的 HTML 文件 + +**核心函数**： + +- `escape_js_string()`：转义 JavaScript 字符串特殊字符 +- `generate_solutions_config()`：生成 solutions 数组配置 +- `generate_config_block()`：生成完整配置块 +- `main()`：命令行接口与文件操作 + +### 进阶用法 + +#### 直接调用 Python API + +除了命令行调用，还可以直接在代码中调用脚本函数： + +```python +from generate_diagnosis_react_html import generate_config_block, generate_solutions_config +from pathlib import Path +import re + +# 生成配置块 +config_block = generate_config_block( + problem_code="const Chart = () => {...}", + problem_title="图表问题", + cause="原因分析", + suggestion="修复建议", + solutions=[ + {"title": "方案1", "desc": "描述", "code": "代码"} + ] +) + +# 读取模板并替换 +template = Path("assets/template/diagnosis-react.html").read_text() +html = re.sub( + r"// ====== CONFIG_START ======.*?// ====== CONFIG_END ======", + config_block, + template, + flags=re.DOTALL +) + +# 保存输出 +Path("output.html").write_text(html) +``` + +#### 批量生成多个诊断文件 + +```bash +#!/bin/bash + +# 批量诊断脚本示例 +python3 scripts/generate_diagnosis_react_html.py \ + --problem-code "问题代码1" \ + --problem-title "问题1" \ + --cause "原因1" \ + --solution-1-title "方案1" \ + --solution-1-desc "描述1" \ + --solution-1-code "代码1" \ + --output "diagnosis_case1.html" + +python3 scripts/generate_diagnosis_react_html.py \ + --problem-code "问题代码2" \ + --problem-title "问题2" \ + --cause "原因2" \ + --solution-1-title "方案1" \ + --solution-1-desc "描述1" \ + --solution-1-code "代码1" \ + --output "diagnosis_case2.html" +``` + +--- + +## React 特定最佳实践 + +### 1. 数据管理 + +```jsx +// ✅ 推荐：使用 useState 管理图表数据 +const [chartData, setChartData] = useState(initialData); + +// ✅ 推荐：数据不变时使用 useMemo +const formattedData = useMemo(() => rawData.map(item => ({ ...item, value: item.value * 100 })), [rawData]); + +// ✅ 推荐：复杂数据转换使用 useCallback +const transformData = useCallback(raw => { + return raw.filter(item => item.value > 0); +}, []); +``` + +### 2. 性能优化 + +```jsx +// ✅ 使用 React.memo 避免不必要的重渲染 +const MemoizedChart = React.memo( + ({ data, config }) => ( + + + + ), + (prevProps, nextProps) => { + return prevProps.data === nextProps.data && prevProps.config === nextProps.config; + } +); + +// ✅ 拆分大型配置对象 +const axesConfig = useMemo( + () => [ + { orient: 'bottom', type: 'band' }, + { orient: 'left', type: 'linear' } + ], + [] +); +``` + +### 3. 实例管理 + +```jsx +// ✅ 推荐：使用 ref 保存图表实例 +const chartRef = useRef(null); + +const handleReady = useCallback(instance => { + chartRef.current = instance; +}, []); + +// ✅ 调用实例方法 +const exportImage = useCallback(() => { + if (chartRef.current) { + chartRef.current.exportImg(); + } +}, []); +``` + +--- + +## React 脚本故障排除 + +### 常见问题 + +#### Q1: `❌ 模板不存在: assets/template/diagnosis-react.html` + +**原因**：脚本运行位置不正确 + +**解决步骤**： + +1. 确认当前工作目录：`pwd` +2. 进入 `vchart-development-assistant` 目录：`cd vchart-development-assistant` +3. 确认 `assets/template/diagnosis-react.html` 文件存在：`ls assets/template/diagnosis-react.html` +4. 重新运行脚本 + +## React 脚本故障排除 + +遇到 React 诊断脚本问题？请参考：**[Python 脚本常见问题排除指南](../references/SCRIPTS_TROUBLESHOOTING.md)** + +### 快速链接 + +常见问题包括： + +- ❌ [模板不存在错误](../references/SCRIPTS_TROUBLESHOOTING.md#-模板不存在错误)（运行位置不正确） +- ❌ [特殊字符转义问题](../references/SCRIPTS_TROUBLESHOOTING.md#-特殊字符转义问题)（代码中包含双引号等特殊字符） +- ❌ [代码显示不完整](../references/SCRIPTS_TROUBLESHOOTING.md#-特殊字符转义问题)（转义符问题） +- ❌ [多方案参数错误](../references/SCRIPTS_TROUBLESHOOTING.md#-多方案参数错误)（方案编号或参数格式不正确） + +### React 专项提示 + +1. **JSX 代码转义**：命令行中传递 JSX 代码时，使用单引号包裹或转义双引号 +2. **代码简化**：避免在命令行中传递超过 10 行的复杂代码 +3. **方案编号**：确保方案编号连续（1, 2, 3...），不要跳号 +4. **调试技巧**：使用浏览器开发者工具检查生成的 JavaScript 是否正确 + +### 其他资源 + +- [文件命名约定](../references/FILE_NAMING_CONVENTIONS.md) - React 脚本使用命令行参数，无需输入文件 +- [脚本参数参考](../references/SCRIPT_PARAMS_REFERENCE.md) - 查看所有可用参数 + +--- + +## 参考资源 + +- **官方文档**：https://visactor.com/vchart/guide/tutorial_docs/Cross-terminal_and_Developer_Ecology/react +- **GitHub 仓库**：https://github.com/VisActor/VChart/tree/develop/packages/react-vchart +- **API 文档**：https://github.com/VisActor/VChart/blob/main/packages/react-vchart/docs/2.1%20API设计.md +- **VChart 主文档**：参考 scenario-1-diagnosis.md 进行深度配置诊断 diff --git a/skills/vchart-development-skill/workflows/scenario-2-generation.md b/skills/vchart-development-skill/workflows/scenario-2-generation.md new file mode 100644 index 0000000000..38931dbe65 --- /dev/null +++ b/skills/vchart-development-skill/workflows/scenario-2-generation.md @@ -0,0 +1,354 @@ +# 场景二处理流程：配置生成 + +## 适用情况 + +**识别信号**： + +- 用户希望从 0 到 1 创建图表（提供描述/数据结构） +- 用户已有 spec，希望添加/修改某个功能点 +- 用户问"如何配置 xxx"、"怎么实现 xxx 效果" + +## 模式分类 + +- **完整生成模式**：用户无现有 spec，需要生成完整配置 +- **增量生成模式**：用户有现有 spec，需要生成增量配置 + +## 通用步骤 + +### 步骤 1：意图识别 + +**使用 `topkey/*.json` 将用户自然语言映射到配置项**： + +| 用户表达 | 匹配的配置项 | 来源 | +| --------------------------- | ----------------------------- | --------------------------------- | +| "加个标签" / "显示数值" | `label` | references/topkey/[type].json | +| "加条参考线" / "画条基准线" | `markLine` | references/topkey/[type].json | +| "堆叠起来" / "累加显示" | `stack: true` | references/topkey/[type].json | +| "分组对比" | `seriesField` + `xField` 数组 | references/topkey/[type].json | +| "加个图例" | `legends` | references/topkey/all_common.json | +| "鼠标悬浮提示" | `tooltip` | references/topkey/all_common.json | +| "坐标轴标题" | `axes[].title` | references/topkey/all_common.json | + +### 步骤 2：确定生成模式 + +``` +if (用户提供了现有 spec) { + → 增量生成模式 +} else { + → 完整生成模式 +} +``` + +--- + +## 完整生成模式 + +### 步骤 2a-1：图表类型推断 + +基于用户描述和数据特征，参考 `../references/chart/chart-type-guide.md` 推断： + +| 数据特征 | 可视化目的 | 推荐类型 | +| --------------- | ----------- | ---------------------------- | +| 类目 + 数值 | 比较大小 | `bar` | +| 类目 + 数值 | 占比分布 | `pie` | +| 时间序列 + 数值 | 趋势变化 | `line` | +| 时间序列 + 数值 | 累积量感 | `area` | +| 两个数值维度 | 相关性/分布 | `scatter` | +| 多维度评分 | 综合对比 | `radar` | +| 层级数据 | 占比构成 | `treemap` / `sunburst` | +| 流向数据 | 流量分配 | `sankey` | +| 流程阶段 | 转化漏斗 | `funnel` | +| 进度数据 | 完成度 | `gauge` / `circularProgress` | + +### 步骤 2a-2：与用户确认 + +```markdown +## 图表类型推荐 + +基于您的需求，我推荐使用 **[图表类型中文名]**（`type: '[类型标识]'`） + +**推荐理由**：[简要说明] + +**是否确认？** 如需调整请告诉我。 +``` + +### 步骤 2a-3：构建完整 Spec + +**使用 `type-meta/[图表类型].json` 构建配置结构**： + +1. 从 `inheritanceTree` 获取完整的可用属性列表 +2. 填充 `required: true` 的必填字段 +3. 根据用户需求添加可选配置 +4. 对于复杂类型（`isSimple: false`），查阅 `type-details/[类型名].md` + +```javascript +const spec = { + type: '[图表类型]', + data: [ + { + id: 'dataId', + values: [ + /* 用户数据 */ + ] + } + ], + // 必填字段（从 type-meta 获取） + [requiredField]: [value], + + // 用户需求的配置项 + [配置项]: { + // 从 type-details 获取类型定义 + } +}; + +const vchart = new VChart(spec, { dom: 'container' }); +vchart.renderSync(); +``` + +### 步骤 2a-4：输出可运行 HTML（强制） + +使用 `assets/template/demo.html` 输出完整可运行 HTML，禁止只输出 spec 片段。 + +**操作清单**： + +1. 复制 `assets/template/demo.html` 结构 +2. 替换标题/描述占位：`

📊 (填入合适的图表名称)

`、`

(填入合理的图表描述)

` +3. 替换 `{{SPEC_CODE}}` 占位符为完整 spec（含 mock 数据） +4. 用 ```html 代码块包裹完整 HTML，保证可直接保存运行 + +**输出格式**： + +````markdown +## 图表生成结果 + +基于您的需求，生成了以下 [图表类型] 配置。 + +**配置说明**： + +- [关键配置点说明] + +**可运行示例**： + +将以下内容保存为 `.html`，直接在浏览器打开： + +```html +[使用 assets/template/demo.html 填充后的完整 HTML] +``` +```` + +```` + +--- + +## 增量生成模式 + +### 步骤 2b-1：定位配置项 + +**根据用户意图，使用 topkey 定位配置项名称**： + +```javascript +// 用户说："我想给柱子加个标签" +// references/topkey/bar.json 中找到： +{ + "label": { + "key": "label", + "oneDesc": "标签相关配置,包括跟标签相关的引导线配置" + } +} +// → 配置项为 label +```` + +### 步骤 2b-2：查询类型定义 + +**使用 `type-details/[类型名]-Type-Definition.md` 获取详细配置**： + +```javascript +// 查询 type-details/ILabelSpec-Type-Definition.md +// 获取完整的 ILabelSpec 接口定义 +``` + +### 步骤 2b-3：输出可运行 HTML（强制） + +无论用户是否提供了完整 spec，都必须输出可运行的 HTML 文件。 + +**情况 A：用户提供了完整 spec** + +- 将增量配置整合到用户 spec 中 +- 使用 `assets/template/demo.html` + Python 脚本输出完整可运行 HTML + +**情况 B：用户只描述功能需求，未提供 spec** + +- **Mock 数据**：构建合理的模拟数据（至少 5 条） +- **完整 spec**：生成包含该功能的完整图表配置 +- 使用 `assets/template/demo.html` + Python 脚本输出完整可运行 HTML + +### 使用 Python 脚本生成示例 HTML + +推荐使用 `scripts/generate_demo_html.py` 脚本，通过 spec 文件生成可运行 HTML。 + +> 💡 **参数详情**：参见 [脚本参数参考](../references/SCRIPT_PARAMS_REFERENCE.md#generate_demo_htmlpy) + +#### 脚本使用示例 + +**最小示例**（使用默认参数）： + +```bash +python3 scripts/generate_demo_html.py --spec-file spec.js +``` + +**完整示例**（自定义所有参数）： + +```bash +python3 scripts/generate_demo_html.py \ + --title "功能实现示例" \ + --desc "基于需求生成的配置方案" \ + --feature "实现了标签展示与 tooltip 交互" \ + --tips "可调整 xField/yField、label、tooltip 与配色方案" \ + --spec-file spec.js \ + --output output/demo.html +``` + +#### 主要参数 + +- `--spec-file`：包含完整 VChart spec 配置的 JS 文件 +- `--feature`：主要功能说明（描述图表实现的核心特性） +- `--tips`：编辑提示（指导用户可调整的配置项） +- `--output`：输出 HTML 文件路径（可选，默认 `output/demo.html`） + +#### Spec 文件结构 + +spec 文件应包含完整的 VChart 配置代码（JavaScript 格式）： + +```javascript +const spec = { + type: 'bar', + data: { + values: [ + { category: 'A', value: 10 }, + { category: 'B', value: 20 }, + { category: 'C', value: 15 }, + { category: 'D', value: 12 }, + { category: 'E', value: 18 } + ] + }, + xField: 'category', + yField: 'value', + label: { + visible: true, + style: { fill: '#333' } + }, + tooltip: { + visible: true + } +}; +``` + +#### 实际使用示例 + +**步骤 1：创建 spec 文件 `spec.js`** + +```javascript +const spec = { + type: 'bar', + data: { + values: [ + { category: 'A', value: 10 }, + { category: 'B', value: 20 }, + { category: 'C', value: 15 }, + { category: 'D', value: 12 }, + { category: 'E', value: 18 } + ] + }, + xField: 'category', + yField: 'value', + label: { visible: true } +}; +``` + +**步骤 2：运行脚本生成 HTML** + +```bash +python3 scripts/generate_demo_html.py \ + --title "柱状图标签功能示例" \ + --desc "展示如何配置数据标签" \ + --feature "在柱子上显示数值标签" \ + --tips "可修改 label.position 或 label.style 调整样式" \ + --spec-file spec.js \ + --output output/bar_label_demo.html +``` + +**步骤 3：查看生成结果** + +在浏览器中打开 `output/bar_label_demo.html` 查看可运行示例。 + +**输出格式**： + +````markdown +## 功能实现：[功能名称] + +**配置说明**： + +- `[属性1]`：[类型] - [说明] +- `[属性2]`：[类型] - [说明] + +**可运行示例**： + +将以下内容保存为 `.html`，直接在浏览器打开： + +```html +[使用 assets/template/demo.html 填充后的完整 HTML] +``` +```` + +## 生成模式选择指南 + +### 完整生成模式适用场景 + +- 用户是新手，没有现有 spec +- 用户提供需求描述和数据，希望从零开始 +- 用户说"帮我做一个 xxx 图表" + +### 增量生成模式适用场景 + +- 用户已有基础图表配置 +- 用户希望在现有图表上添加特定功能 +- 用户提供当前 spec，询问如何修改 + +--- + +## React 场景补充 + +- 若用户明确使用 React-VChart，输出时应提供 React 代码或指向 `assets/template/diagnosis-react.html` 的可运行 HTML，说明依赖安装（`npm i @visactor/react-vchart @visactor/vchart`）。 +- 如用户不接受纯 JS 示例，可同时给出 React 版本与 JS 版本，标注差异。 + +## 不合格输出示例（禁止） + +- 只返回 `const spec = {...}`，未给 HTML 头/脚/CDN。 +- 未替换模板占位（标题/描述、`{{SPEC_CODE}}`）。 +- 截断的 HTML（缺少 `` 或 ` + + + + + + + + +
+
+

📊 {{REPORT_TITLE}}

+

{{REPORT_DESC}}

+
+ +
+
+

✨ 主要功能说明

+

{{FEATURE_DESC}}

+
+
+

🛠️ 编辑提示

+

{{EDIT_TIPS}}

+
+
+ +
+
+
+ 📝 VChart Spec + ✏️ 可编辑 +
+
+
+
+
👁️ 效果预览
+
+
+
+
+ + + + diff --git a/skills/vchart-development-assistant/template/diagnosis-react.html b/skills/vchart-development-assistant/template/diagnosis-react.html new file mode 100644 index 0000000000..d2ee769c7a --- /dev/null +++ b/skills/vchart-development-assistant/template/diagnosis-react.html @@ -0,0 +1,499 @@ + + + + + + React-VChart 诊断方案 + + + + + + + + + + + + + + + + + + +
+ +
+

📊 React-VChart 问题诊断报告

+

用户描述的问题概述

+
+ + +
+
+ + + + diff --git a/skills/vchart-development-assistant/template/diagnosis.html b/skills/vchart-development-assistant/template/diagnosis.html new file mode 100644 index 0000000000..f4329f052f --- /dev/null +++ b/skills/vchart-development-assistant/template/diagnosis.html @@ -0,0 +1,656 @@ + + + + + + VChart 诊断方案 + + + + + + + + + + + +
+ +
+

📊 {{REPORT_TITLE}}

+

{{REPORT_DESC}}

+
+ + +
+
+ + + + diff --git a/skills/vchart-development-assistant/workflows/scenario-1-diagnosis.md b/skills/vchart-development-assistant/workflows/scenario-1-diagnosis.md index c90b2c2bfd..eb6ca88525 100644 --- a/skills/vchart-development-assistant/workflows/scenario-1-diagnosis.md +++ b/skills/vchart-development-assistant/workflows/scenario-1-diagnosis.md @@ -67,37 +67,136 @@ if (用户提供了现有 spec 配置) { --- -## 输出可运行 HTML（强制） +## 输出诊断结果 -使用 `assets/template/diagnosis.html` 模板，通过 Python 脚本产出完整 HTML。 +根据用户需求和对话上下文，灵活选择输出格式： -### 配置诊断模式输出 +### 输出格式选择 -- **诊断结果**：基于用户配置的分析结论 -- **方案 spec**：基于用户原配置修复后的完整配置 +**判断依据**： -### 描述诊断模式输出 +``` +if (用户明确要求"可运行的demo" || "能直接打开的文件" || "完整的HTML") { + → 输出完整 HTML 文件 +} else if (用户询问"配置怎么写" || "代码示例" || 在讨论具体配置) { + → 输出 JavaScript spec 代码 +} else { + → 默认输出 JavaScript spec 代码（更简洁、易于集成） +} +``` -- **诊断结果**：问题现象解读 + 解决思路 -- **方案 spec**：使用 Mock 数据构建的完整配置，体现解决方案 +### 格式一：输出 JavaScript 代码（推荐） -### 使用 Python 脚本生成诊断 HTML +直接输出可用的 VChart spec 配置代码，便于用户复制到项目中。 -推荐使用 `scripts/generate_diagnosis_html.py` 脚本，通过配置文件生成诊断 HTML。 +**配置诊断模式输出示例**： -> 💡 **参数详情**：参见 [脚本参数参考](../references/SCRIPT_PARAMS_REFERENCE.md#generate_diagnosis_htmlpy) +````markdown +## 问题诊断 -#### 脚本使用示例 +**问题**：图表 Y 轴没有数据显示，柱状图高度为 0 -**最小示例**（使用默认参数）： +**原因**：yField 配置值为 "values"，但数据字段名为 "value"，字段名不匹配 -```bash -python3 scripts/generate_diagnosis_html.py --config-file config.js +**修复建议**：确保 xField/yField 与数据字段名严格一致 + +## 用户原始代码 + +```javascript +const spec = { + type: 'bar', + data: { + values: [ + { category: 'A', value: 10 }, + { category: 'B', value: 20 } + ] + }, + xField: 'category', + yField: 'values', // ❌ 错误：字段名不匹配 + label: { + visible: true + } +}; + +const vchart = new VChart(spec, { dom: 'chart' }); +vchart.renderAsync(); +``` + +## 修复方案 + +```javascript +const spec = { + type: 'bar', + data: { + values: [ + { category: 'A', value: 10 }, + { category: 'B', value: 20 } + ] + }, + xField: 'category', + yField: 'value', // ✅ 修正：与数据字段名一致 + label: { + visible: true + } +}; + +const vchart = new VChart(spec, { dom: 'chart' }); +vchart.renderAsync(); ``` +```` -**完整示例**（自定义所有参数）： +**描述诊断模式输出示例**： + +````markdown +## 问题诊断 + +**问题**：需要在柱状图上显示数据标签 + +**解决方案**：通过配置 `label` 属性实现数据标签显示 + +## 完整代码示例 + +```javascript +const spec = { + type: 'bar', + data: { + values: [ + { category: 'A', value: 10 }, + { category: 'B', value: 20 }, + { category: 'C', value: 15 } + ] + }, + xField: 'category', + yField: 'value', + label: { + visible: true, + position: 'top', + style: { + fill: '#333' + } + } +}; + +const vchart = new VChart(spec, { dom: 'chart' }); +vchart.renderAsync(); +``` +```` + +### 格式二：输出完整 HTML（按需） + +当用户需要完整的可运行演示时，使用 `template/diagnosis.html` 模板，通过 Python 脚本生成诊断 HTML。 + +#### 使用 Python 脚本生成诊断 HTML + +推荐使用 `scripts/generate_diagnosis_html.py` 脚本，通过配置文件生成交互式诊断 HTML。 + +**脚本使用示例**： ```bash +# 最小示例 +python3 scripts/generate_diagnosis_html.py --config-file config.js + +# 完整示例 python3 scripts/generate_diagnosis_html.py \ --title "VChart 问题诊断报告" \ --desc "基于用户配置的诊断与修复结果" \ @@ -105,7 +204,7 @@ python3 scripts/generate_diagnosis_html.py \ --output output/diagnosis.html ``` -#### 主要参数 +**主要参数**： - `--config-file`：包含 `problemReview`/`diagnosis`/`solutions` 的 JS 配置文件 - `--title`：诊断报告标题（可选） @@ -164,7 +263,7 @@ const problemReview = { ] }, xField: "category", - yField: "values", + yField: "values", // 问题行 label: { visible: true, formatter: (d) => d.value + "%" @@ -192,7 +291,7 @@ const solutions = [ ] }, xField: "category", - yField: "value", + yField: "value", // 修复后 label: { visible: true } };` } @@ -206,22 +305,65 @@ python3 scripts/generate_diagnosis_html.py \ --title "字段映射错误诊断" \ --desc "柱状图 Y 轴数据显示问题分析" \ --config-file config.js \ - --output output/diagnosis.html + --output my_diagnosis.html ``` **步骤 3：查看生成结果** -在浏览器中打开 `output/diagnosis.html` 查看交互式诊断报告。 +在浏览器中打开生成的 HTML 文件，可以看到包含问题回顾、诊断分析和可编辑的解决方案的交互式页面。 + +#### 直接输出 HTML 代码（备选） -### 输出格式 +如果无法使用脚本，也可以直接输出完整的 HTML 代码： ````markdown ## 诊断方案（可运行） -将以下内容保存为 `.html` 文件，在浏览器中打开： +将以下内容保存为 `.html` 文件，在浏览器中打开即可查看： ```html -[使用模板填充后的完整 HTML] + + + + + VChart 诊断示例 + + + +
+ + + + ``` ```` @@ -249,20 +391,9 @@ python3 scripts/generate_diagnosis_html.py \ --- -## 脚本故障排除 - -遇到脚本执行问题？请参考：**[Python 脚本常见问题排除指南](../references/SCRIPTS_TROUBLESHOOTING.md)** - -### 快速链接 - -常见问题包括： - -- ❌ [模板不存在错误](../references/SCRIPTS_TROUBLESHOOTING.md#-模板不存在错误)（运行位置不正确） -- ❌ [配置文件不存在](../references/SCRIPTS_TROUBLESHOOTING.md#-配置文件不存在configjs)（`config.js` 路径错误） -- ❌ [模板标记缺失](../references/SCRIPTS_TROUBLESHOOTING.md#-模板标记缺失错误)（模板文件被修改） -- ❌ [HTML 文件无法打开](../references/SCRIPTS_TROUBLESHOOTING.md#-输出目录问题)（输出目录或权限问题） - -### 其他资源 +## 相关资源 -- [文件命名约定](../references/FILE_NAMING_CONVENTIONS.md) - 了解 `config.js` 的格式要求 -- [脚本参数参考](../references/SCRIPT_PARAMS_REFERENCE.md) - 查看所有可用参数 +- [配置项索引](../references/topkey/) - 快速查找配置项 +- [示例库](../references/examples/) - 常用图表完整示例 +- [类型详情](../references/type-details/) - 详细的类型定义 +- [图表类型指南](../references/chart/chart-type-guide.md) - 各类图表特性参考 diff --git a/skills/vchart-development-assistant/workflows/scenario-1-react.md b/skills/vchart-development-assistant/workflows/scenario-1-react.md index 2f33d4b131..8fbab28200 100644 --- a/skills/vchart-development-assistant/workflows/scenario-1-react.md +++ b/skills/vchart-development-assistant/workflows/scenario-1-react.md @@ -462,11 +462,85 @@ const spec = { --- -## 输出可运行 HTML +## 输出诊断结果 -React-VChart 问题必须使用 `assets/template/diagnosis-react.html` 模板输出。 +根据用户需求和对话上下文，灵活选择输出格式： -### 模板特点 +### 输出格式选择 + +**判断依据**： + +``` +if (用户明确要求"可运行的demo" || "能直接打开的文件" || "完整的HTML") { + → 输出完整 HTML 文件（使用 Python 脚本生成） +} else if (用户询问"配置怎么写" || "代码示例" || 在讨论具体配置) { + → 输出 React 组件代码 +} else { + → 默认输出 React 组件代码（更简洁、易于集成） +} +``` + +### 格式一：输出 React 组件代码（推荐） + +直接输出可用的 React-VChart 组件代码，便于用户复制到项目中。 + +**输出示例**： + +````markdown +## 问题诊断 + +**问题**：图表 Y 轴没有数据显示 + +**原因**：yField 属性值为 'values'，但数据字段名为 'value' + +**修复建议**：确保字段名与数据一致 + +## 用户原始代码 + +```jsx +import React from 'react'; +import { BarChart, Bar } from '@visactor/react-vchart'; + +const ChartComponent = () => { + const chartData = [ + { category: 'A', value: 10 }, + { category: 'B', value: 20 } + ]; + + return ( + + {/* ❌ 错误 */} + + ); +}; +``` + +## 修复方案 + +```jsx +import React from 'react'; +import { BarChart, Bar } from '@visactor/react-vchart'; + +const ChartComponent = () => { + const chartData = [ + { category: 'A', value: 10 }, + { category: 'B', value: 20 } + ]; + + return ( + + {/* ✅ 修正 */} + + ); +}; +``` +```` + +### 格式二：输出完整 HTML（按需） + +当用户需要完整的可运行演示时，使用 `template/diagnosis-react.html` 模板，通过 Python 脚本生成诊断 HTML。 + +#### 模板特点 - ✅ 已引入 React 18、ReactDOM、Babel - ✅ 已引入 React-VChart 库 @@ -474,7 +548,7 @@ React-VChart 问题必须使用 `assets/template/diagnosis-react.html` 模板输 - ✅ 支持 Monaco Editor 代码编辑 - ✅ 实际渲染 React 组件 -### 使用 Python 脚本生成诊断 HTML +#### 使用 Python 脚本生成诊断 HTML 推荐使用 `scripts/generate_diagnosis_react_html.py` 脚本，通过命令行参数生成诊断 HTML。 @@ -655,7 +729,7 @@ config_block = generate_config_block( ) # 读取模板并替换 -template = Path("assets/template/diagnosis-react.html").read_text() +template = Path("template/diagnosis-react.html").read_text() html = re.sub( r"// ====== CONFIG_START ======.*?// ====== CONFIG_END ======", config_block, @@ -758,43 +832,12 @@ const exportImage = useCallback(() => { ## React 脚本故障排除 -### 常见问题 - -#### Q1: `❌ 模板不存在: assets/template/diagnosis-react.html` - -**原因**：脚本运行位置不正确 - -**解决步骤**： - -1. 确认当前工作目录：`pwd` -2. 进入 `vchart-development-assistant` 目录：`cd vchart-development-assistant` -3. 确认 `assets/template/diagnosis-react.html` 文件存在：`ls assets/template/diagnosis-react.html` -4. 重新运行脚本 - -## React 脚本故障排除 - -遇到 React 诊断脚本问题？请参考：**[Python 脚本常见问题排除指南](../references/SCRIPTS_TROUBLESHOOTING.md)** - -### 快速链接 - -常见问题包括： - -- ❌ [模板不存在错误](../references/SCRIPTS_TROUBLESHOOTING.md#-模板不存在错误)（运行位置不正确） -- ❌ [特殊字符转义问题](../references/SCRIPTS_TROUBLESHOOTING.md#-特殊字符转义问题)（代码中包含双引号等特殊字符） -- ❌ [代码显示不完整](../references/SCRIPTS_TROUBLESHOOTING.md#-特殊字符转义问题)（转义符问题） -- ❌ [多方案参数错误](../references/SCRIPTS_TROUBLESHOOTING.md#-多方案参数错误)（方案编号或参数格式不正确） +### 使用 Python 脚本注意事项 -### React 专项提示 - -1. **JSX 代码转义**：命令行中传递 JSX 代码时，使用单引号包裹或转义双引号 -2. **代码简化**：避免在命令行中传递超过 10 行的复杂代码 +1. **JSX 代码转义**：命令行中传递 JSX 代码时，使用单引号包裹整个代码块，内部使用转义的双引号 +2. **代码长度**：避免在命令行中传递超过 10 行的复杂代码，考虑使用配置文件方式 3. **方案编号**：确保方案编号连续（1, 2, 3...），不要跳号 -4. **调试技巧**：使用浏览器开发者工具检查生成的 JavaScript 是否正确 - -### 其他资源 - -- [文件命名约定](../references/FILE_NAMING_CONVENTIONS.md) - React 脚本使用命令行参数，无需输入文件 -- [脚本参数参考](../references/SCRIPT_PARAMS_REFERENCE.md) - 查看所有可用参数 +4. **路径问题**：在 `vchart-development-assistant` 目录下运行脚本，确保模板文件路径正确 --- diff --git a/skills/vchart-development-assistant/workflows/scenario-2-generation.md b/skills/vchart-development-assistant/workflows/scenario-2-generation.md index 38931dbe65..0cba55bb7e 100644 --- a/skills/vchart-development-assistant/workflows/scenario-2-generation.md +++ b/skills/vchart-development-assistant/workflows/scenario-2-generation.md @@ -105,18 +105,27 @@ const vchart = new VChart(spec, { dom: 'container' }); vchart.renderSync(); ``` -### 步骤 2a-4：输出可运行 HTML（强制） +### 步骤 2a-4：输出配置结果 -使用 `assets/template/demo.html` 输出完整可运行 HTML，禁止只输出 spec 片段。 +根据用户需求和对话上下文，灵活选择输出格式： -**操作清单**： +#### 输出格式选择 -1. 复制 `assets/template/demo.html` 结构 -2. 替换标题/描述占位：`

📊 (填入合适的图表名称)

`、`

(填入合理的图表描述)

` -3. 替换 `{{SPEC_CODE}}` 占位符为完整 spec（含 mock 数据） -4. 用 ```html 代码块包裹完整 HTML，保证可直接保存运行 +``` +if (用户明确要求"可运行的demo" || "能直接打开的文件" || "完整的HTML") { + → 输出完整 HTML 文件（使用 Python 脚本生成） +} else if (用户询问"配置怎么写" || "代码示例" || 在讨论具体配置) { + → 输出 JavaScript spec 代码 +} else { + → 默认输出 JavaScript spec 代码（更简洁、易于集成） +} +``` -**输出格式**： +#### 格式一：输出 JavaScript 代码（推荐） + +直接输出可用的 VChart spec 配置代码。 + +**输出示例**： ````markdown ## 图表生成结果 @@ -127,15 +136,35 @@ vchart.renderSync(); - [关键配置点说明] -**可运行示例**： +**完整代码**： -将以下内容保存为 `.html`，直接在浏览器打开： +```javascript +const spec = { + type: 'bar', + data: { + values: [ + { category: 'A', value: 10 }, + { category: 'B', value: 20 }, + { category: 'C', value: 15 } + ] + }, + xField: 'category', + yField: 'value', + label: { + visible: true, + position: 'top' + } +}; -```html -[使用 assets/template/demo.html 填充后的完整 HTML] +const vchart = new VChart(spec, { dom: 'chart' }); +vchart.renderAsync(); ``` ```` +#### 格式二：输出完整 HTML（按需） + +当用户需要完整的可运行演示时，使用 `template/demo.html` + Python 脚本生成。 + ```` --- @@ -167,22 +196,24 @@ vchart.renderSync(); // 获取完整的 ILabelSpec 接口定义 ``` -### 步骤 2b-3：输出可运行 HTML（强制） +### 步骤 2b-3：输出配置结果 -无论用户是否提供了完整 spec，都必须输出可运行的 HTML 文件。 +根据用户需求和对话上下文，灵活选择输出格式（同完整生成模式）。 **情况 A：用户提供了完整 spec** -- 将增量配置整合到用户 spec 中 -- 使用 `assets/template/demo.html` + Python 脚本输出完整可运行 HTML +- 输出增量配置的代码片段 +- 或输出整合后的完整 spec（按需使用 HTML 格式） **情况 B：用户只描述功能需求，未提供 spec** - **Mock 数据**：构建合理的模拟数据（至少 5 条） - **完整 spec**：生成包含该功能的完整图表配置 -- 使用 `assets/template/demo.html` + Python 脚本输出完整可运行 HTML +- 默认输出 JavaScript 代码，按需输出 HTML + +#### 使用 Python 脚本生成示例 HTML（按需） -### 使用 Python 脚本生成示例 HTML +当用户需要完整的可运行演示时： 推荐使用 `scripts/generate_demo_html.py` 脚本，通过 spec 文件生成可运行 HTML。 @@ -296,7 +327,7 @@ python3 scripts/generate_demo_html.py \ 将以下内容保存为 `.html`，直接在浏览器打开： ```html -[使用 assets/template/demo.html 填充后的完整 HTML] +[使用 template/demo.html 填充后的完整 HTML] ``` ```` @@ -318,37 +349,14 @@ python3 scripts/generate_demo_html.py \ ## React 场景补充 -- 若用户明确使用 React-VChart，输出时应提供 React 代码或指向 `assets/template/diagnosis-react.html` 的可运行 HTML，说明依赖安装（`npm i @visactor/react-vchart @visactor/vchart`）。 +- 若用户明确使用 React-VChart，输出时应提供 React 代码或指向 `template/diagnosis-react.html` 的可运行 HTML，说明依赖安装（`npm i @visactor/react-vchart @visactor/vchart`）。 - 如用户不接受纯 JS 示例，可同时给出 React 版本与 JS 版本，标注差异。 -## 不合格输出示例（禁止） - -- 只返回 `const spec = {...}`，未给 HTML 头/脚/CDN。 -- 未替换模板占位（标题/描述、`{{SPEC_CODE}}`）。 -- 截断的 HTML（缺少 `` 或 `