From 589cde0a045eb97c02ec34047b852671fa727199 Mon Sep 17 00:00:00 2001 From: xile611 Date: Thu, 5 Feb 2026 17:15:13 +0800 Subject: [PATCH 1/4] 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 2/4] 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（缺少 `` 或 `