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
diff --git a/skills/vchart-development-assistant/SKILL.md b/skills/vchart-development-assistant/SKILL.md
new file mode 100644
index 0000000000..e5702cf3fd
--- /dev/null
+++ b/skills/vchart-development-assistant/SKILL.md
@@ -0,0 +1,288 @@
+---
+name: vchart-development-assistant
+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/` | 组件配置速查 |
+| **输出模板** | `template/demo.html` | 生成可运行 HTML 示例的标准模板(纯 JS) |
+| **诊断模板** | `template/diagnosis.html` | 问题诊断 HTML 模板(纯 JS) |
+| **React 诊断** | `template/diagnosis-react.html` | React-VChart 问题诊断 HTML 模板 |
+
+**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
+
+---
+
+## 脚本快速导航
+
+本 Skill 提供 3 个 Python 脚本,用于生成可交互的 HTML 诊断/演示页面:
+
+| 场景 | 脚本 | 输入文件 | 参考文档 |
+| ------------------- | ---------------------------------- | ------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| **VChart 问题诊断** | `generate_diagnosis_html.py` | `config.js`
(包含 problemReview/diagnosis/solutions) | [scenario-1-diagnosis.md](workflows/scenario-1-diagnosis.md)
[参数参考](references/SCRIPT_PARAMS_REFERENCE.md#generate_diagnosis_htmlpy) |
+| **配置生成演示** | `generate_demo_html.py` | `spec.js`
(完整 VChart spec) | [scenario-2-generation.md](workflows/scenario-2-generation.md)
[参数参考](references/SCRIPT_PARAMS_REFERENCE.md#generate_demo_htmlpy) |
+| **图片还原演示** | `generate_demo_html.py` | `spec.js`
(基于图片分析的 spec) | [scenario-3-image-replication.md](workflows/scenario-3-image-replication.md)
[参数参考](references/SCRIPT_PARAMS_REFERENCE.md#generate_demo_htmlpy) |
+| **React 问题诊断** | `generate_diagnosis_react_html.py` | 命令行参数
(无需文件) | [scenario-1-react.md](workflows/scenario-1-react.md)
[参数参考](references/SCRIPT_PARAMS_REFERENCE.md#generate_diagnosis_react_htmlpy) |
+
+**快速使用**:
+
+```bash
+# VChart 诊断
+python3 scripts/generate_diagnosis_html.py --config-file config.js
+
+# 配置生成/图片还原演示
+python3 scripts/generate_demo_html.py --spec-file spec.js
+
+# React 诊断
+python3 scripts/generate_diagnosis_react_html.py \
+ --problem-code "..." --problem-title "..." --cause "..." \
+ --solution-1-title "..." --solution-1-desc "..." --solution-1-code "..."
+```
+
+**常见问题**:参见 [脚本故障排除指南](references/SCRIPTS_TROUBLESHOOTING.md) 和 [文件命名约定](references/FILE_NAMING_CONVENTIONS.md)
+
+---
+
+## 场景识别与动态切换
+
+### 首次识别
+
+当用户提出 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轴乱"
+- "为什么"/"有问题"/"不对"
+- "帮我看看"/"检查"/"诊断"
+
+---
+
+## 处理流程
+
+根据场景识别结果,参考对应的处理流程文档:
+
+| 场景 | 处理流程文档 | 核心能力 |
+| ----------------- | -------------------------------------------------------------------------------------- | ---------------------------------- |
+| **问题诊断** | [workflows/scenario-1-diagnosis.md](workflows/scenario-1-diagnosis.md) | 配置检查、错误定位、性能优化 |
+| **├─ React 专项** | [workflows/scenario-1-react.md](workflows/scenario-1-react.md) | React-VChart 特有问题诊断 |
+| **配置生成** | [workflows/scenario-2-generation.md](workflows/scenario-2-generation.md) | 完整生成、增量生成、意图识别 |
+| **视觉还原** | [workflows/scenario-3-image-replication.md](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 片段。
+
+### 模板选择与硬约束
+
+| 场景 | 使用模板 | 强制要求 |
+| ------------------- | ------------------------------- | --------------------------------------------------- |
+| 配置生成 / 视觉还原 | `template/demo.html` | 替换标题/描述占位;替换 `{{SPEC_CODE}}` 为完整 spec |
+| 问题诊断(纯 JS) | `template/diagnosis.html` | 嵌入用户代码/问题点,并给出修复后 spec |
+| 问题诊断(React) | `template/diagnosis-react.html` | React 场景输出 React 诊断 HTML |
+
+**输出校验清单**(回答时提醒用户可直接保存为 .html 打开):
+
+- 包含对应模板的完整 HTML(含 CDN 引用),非截断/片段
+- 替换 `{{SPEC_CODE}}` 为完整 spec(或修复后的 spec)
+- 标题/描述占位已替换;如无描述填入简短用途
+- 如需本地预览,建议 `python3 -m http.server 8000`
+
+**不合格示例(禁止)**:
+
+- 仅返回 `const spec = {...}` 或局部配置
+- 省略 HTML 头/脚或 CDN 链接
+- 未替换模板占位符
+
+---
+
+## 版本说明
+
+本 Skill 针对 **VChart 2.0.0+** 版本设计。
+
+如用户使用旧版本(1.x),需提醒可能存在的 API 差异。
+
+---
+
+## 本地知识库结构
+
+主要目录:`chart-type-guide.md`、`workflows/`、`template/`、`references/`。详情见各自文件夹。
diff --git a/skills/vchart-development-assistant/references/FILE_NAMING_CONVENTIONS.md b/skills/vchart-development-assistant/references/FILE_NAMING_CONVENTIONS.md
new file mode 100644
index 0000000000..ad8ae5a980
--- /dev/null
+++ b/skills/vchart-development-assistant/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-assistant/references/SCRIPTS_TROUBLESHOOTING.md b/skills/vchart-development-assistant/references/SCRIPTS_TROUBLESHOOTING.md
new file mode 100644
index 0000000000..fd3c21070d
--- /dev/null
+++ b/skills/vchart-development-assistant/references/SCRIPTS_TROUBLESHOOTING.md
@@ -0,0 +1,480 @@
+# Python 脚本常见问题排除指南
+
+## 通用故障排除
+
+### ❌ 模板不存在错误
+
+**错误信息示例**:
+
+```
+❌ 模板不存在: template/diagnosis.html
+❌ 模板不存在: template/demo.html
+❌ 模板不存在: template/diagnosis-react.html
+```
+
+**原因**:脚本运行位置不正确,未在项目根目录执行
+
+**解决步骤**:
+
+1. 确认当前工作目录:
+
+ ```bash
+ pwd
+ ```
+
+2. 切换到项目根目录:
+
+ ```bash
+ cd /path/to/vchart-development-assistant
+ ```
+
+3. 验证模板文件存在:
+
+ ```bash
+ ls template/diagnosis.html
+ ls template/demo.html
+ ls 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 template/diagnosis.html | grep "{{CONFIG_BLOCK}}"
+
+ # 检查 demo.html
+ cat template/demo.html | grep "{{SPEC_CODE}}"
+
+ # 检查 diagnosis-react.html
+ cat template/diagnosis-react.html | grep "{{CONFIG_BLOCK}}"
+ ```
+
+2. 如果标记缺失,从版本控制恢复原始模板:
+
+ ```bash
+ git checkout template/diagnosis.html
+ git checkout template/demo.html
+ git checkout 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 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. 手动编辑模板文件(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-assistant/references/SCRIPT_PARAMS_REFERENCE.md b/skills/vchart-development-assistant/references/SCRIPT_PARAMS_REFERENCE.md
new file mode 100644
index 0000000000..cb0cc604b0
--- /dev/null
+++ b/skills/vchart-development-assistant/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-assistant/references/chart/chart-type-guide.md b/skills/vchart-development-assistant/references/chart/chart-type-guide.md
new file mode 100644
index 0000000000..1f46c9a131
--- /dev/null
+++ b/skills/vchart-development-assistant/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-assistant/references/chart/common-issues.md b/skills/vchart-development-assistant/references/chart/common-issues.md
new file mode 100644
index 0000000000..ab21f94958
--- /dev/null
+++ b/skills/vchart-development-assistant/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-assistant/references/components/axis.md b/skills/vchart-development-assistant/references/components/axis.md
new file mode 100644
index 0000000000..2c33c77e73
--- /dev/null
+++ b/skills/vchart-development-assistant/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-assistant/references/components/crosshair.md b/skills/vchart-development-assistant/references/components/crosshair.md
new file mode 100644
index 0000000000..4c46270a9f
--- /dev/null
+++ b/skills/vchart-development-assistant/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-assistant/references/components/dataZoom.md b/skills/vchart-development-assistant/references/components/dataZoom.md
new file mode 100644
index 0000000000..e14473f232
--- /dev/null
+++ b/skills/vchart-development-assistant/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-assistant/references/components/label.md b/skills/vchart-development-assistant/references/components/label.md
new file mode 100644
index 0000000000..902c647a06
--- /dev/null
+++ b/skills/vchart-development-assistant/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-assistant/references/components/legend.md b/skills/vchart-development-assistant/references/components/legend.md
new file mode 100644
index 0000000000..649d59daf1
--- /dev/null
+++ b/skills/vchart-development-assistant/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-assistant/references/components/mark.md b/skills/vchart-development-assistant/references/components/mark.md
new file mode 100644
index 0000000000..9a911a24c3
--- /dev/null
+++ b/skills/vchart-development-assistant/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-assistant/references/components/title.md b/skills/vchart-development-assistant/references/components/title.md
new file mode 100644
index 0000000000..1db5d6ec0f
--- /dev/null
+++ b/skills/vchart-development-assistant/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-assistant/references/components/tooltip.md b/skills/vchart-development-assistant/references/components/tooltip.md
new file mode 100644
index 0000000000..65df45534c
--- /dev/null
+++ b/skills/vchart-development-assistant/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-assistant/references/examples/area/basic-area.md b/skills/vchart-development-assistant/references/examples/area/basic-area.md
new file mode 100644
index 0000000000..b19829ca0e
--- /dev/null
+++ b/skills/vchart-development-assistant/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-assistant/references/examples/bar/basic-bar.md b/skills/vchart-development-assistant/references/examples/bar/basic-bar.md
new file mode 100644
index 0000000000..d6d0562d1c
--- /dev/null
+++ b/skills/vchart-development-assistant/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-assistant/references/examples/bar/grouped-bar.md b/skills/vchart-development-assistant/references/examples/bar/grouped-bar.md
new file mode 100644
index 0000000000..e4452de3c6
--- /dev/null
+++ b/skills/vchart-development-assistant/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-assistant/references/examples/bar/stacked-bar.md b/skills/vchart-development-assistant/references/examples/bar/stacked-bar.md
new file mode 100644
index 0000000000..07f660632e
--- /dev/null
+++ b/skills/vchart-development-assistant/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-assistant/references/examples/combination/dual-axis.md b/skills/vchart-development-assistant/references/examples/combination/dual-axis.md
new file mode 100644
index 0000000000..db2d08833b
--- /dev/null
+++ b/skills/vchart-development-assistant/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-assistant/references/examples/funnel/basic-funnel.md b/skills/vchart-development-assistant/references/examples/funnel/basic-funnel.md
new file mode 100644
index 0000000000..d2036c217b
--- /dev/null
+++ b/skills/vchart-development-assistant/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-assistant/references/examples/gauge/basic-gauge.md b/skills/vchart-development-assistant/references/examples/gauge/basic-gauge.md
new file mode 100644
index 0000000000..912796446b
--- /dev/null
+++ b/skills/vchart-development-assistant/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-assistant/references/examples/line/basic-line.md b/skills/vchart-development-assistant/references/examples/line/basic-line.md
new file mode 100644
index 0000000000..b512edda52
--- /dev/null
+++ b/skills/vchart-development-assistant/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-assistant/references/examples/pie/basic-pie.md b/skills/vchart-development-assistant/references/examples/pie/basic-pie.md
new file mode 100644
index 0000000000..7c677f88d3
--- /dev/null
+++ b/skills/vchart-development-assistant/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-assistant/references/examples/radar/basic-radar.md b/skills/vchart-development-assistant/references/examples/radar/basic-radar.md
new file mode 100644
index 0000000000..da7b7c7c1b
--- /dev/null
+++ b/skills/vchart-development-assistant/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-assistant/references/examples/scatter/basic-scatter.md b/skills/vchart-development-assistant/references/examples/scatter/basic-scatter.md
new file mode 100644
index 0000000000..10a5dd0361
--- /dev/null
+++ b/skills/vchart-development-assistant/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-assistant/references/topkey/all_common.json b/skills/vchart-development-assistant/references/topkey/all_common.json
new file mode 100644
index 0000000000..540cd676c8
--- /dev/null
+++ b/skills/vchart-development-assistant/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-assistant/references/topkey/area.json b/skills/vchart-development-assistant/references/topkey/area.json
new file mode 100644
index 0000000000..2f638c3915
--- /dev/null
+++ b/skills/vchart-development-assistant/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-assistant/references/topkey/bar.json b/skills/vchart-development-assistant/references/topkey/bar.json
new file mode 100644
index 0000000000..1ffb6557eb
--- /dev/null
+++ b/skills/vchart-development-assistant/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-assistant/references/topkey/bar3d.json b/skills/vchart-development-assistant/references/topkey/bar3d.json
new file mode 100644
index 0000000000..63d82e1ef9
--- /dev/null
+++ b/skills/vchart-development-assistant/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-assistant/references/topkey/boxPlot.json b/skills/vchart-development-assistant/references/topkey/boxPlot.json
new file mode 100644
index 0000000000..69abf95d0a
--- /dev/null
+++ b/skills/vchart-development-assistant/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-assistant/references/topkey/circlePacking.json b/skills/vchart-development-assistant/references/topkey/circlePacking.json
new file mode 100644
index 0000000000..59015907f4
--- /dev/null
+++ b/skills/vchart-development-assistant/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-assistant/references/topkey/circularProgress.json b/skills/vchart-development-assistant/references/topkey/circularProgress.json
new file mode 100644
index 0000000000..cf75e21a2c
--- /dev/null
+++ b/skills/vchart-development-assistant/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-assistant/references/topkey/common.json b/skills/vchart-development-assistant/references/topkey/common.json
new file mode 100644
index 0000000000..524be29435
--- /dev/null
+++ b/skills/vchart-development-assistant/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-assistant/references/topkey/correlation.json b/skills/vchart-development-assistant/references/topkey/correlation.json
new file mode 100644
index 0000000000..aea8b4ef76
--- /dev/null
+++ b/skills/vchart-development-assistant/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-assistant/references/topkey/funnel.json b/skills/vchart-development-assistant/references/topkey/funnel.json
new file mode 100644
index 0000000000..28808b0672
--- /dev/null
+++ b/skills/vchart-development-assistant/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-assistant/references/topkey/funnel3d.json b/skills/vchart-development-assistant/references/topkey/funnel3d.json
new file mode 100644
index 0000000000..28808b0672
--- /dev/null
+++ b/skills/vchart-development-assistant/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-assistant/references/topkey/gauge.json b/skills/vchart-development-assistant/references/topkey/gauge.json
new file mode 100644
index 0000000000..1597b00a3a
--- /dev/null
+++ b/skills/vchart-development-assistant/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-assistant/references/topkey/heatmap.json b/skills/vchart-development-assistant/references/topkey/heatmap.json
new file mode 100644
index 0000000000..542e0e8f4b
--- /dev/null
+++ b/skills/vchart-development-assistant/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-assistant/references/topkey/histogram.json b/skills/vchart-development-assistant/references/topkey/histogram.json
new file mode 100644
index 0000000000..382ab1368b
--- /dev/null
+++ b/skills/vchart-development-assistant/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-assistant/references/topkey/histogram3d.json b/skills/vchart-development-assistant/references/topkey/histogram3d.json
new file mode 100644
index 0000000000..6121709149
--- /dev/null
+++ b/skills/vchart-development-assistant/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-assistant/references/topkey/line.json b/skills/vchart-development-assistant/references/topkey/line.json
new file mode 100644
index 0000000000..b9a8106a28
--- /dev/null
+++ b/skills/vchart-development-assistant/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-assistant/references/topkey/linearProgress.json b/skills/vchart-development-assistant/references/topkey/linearProgress.json
new file mode 100644
index 0000000000..518b9d7f0e
--- /dev/null
+++ b/skills/vchart-development-assistant/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-assistant/references/topkey/liquid.json b/skills/vchart-development-assistant/references/topkey/liquid.json
new file mode 100644
index 0000000000..0e58ecff6c
--- /dev/null
+++ b/skills/vchart-development-assistant/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-assistant/references/topkey/map.json b/skills/vchart-development-assistant/references/topkey/map.json
new file mode 100644
index 0000000000..ddb606d002
--- /dev/null
+++ b/skills/vchart-development-assistant/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-assistant/references/topkey/mosaic.json b/skills/vchart-development-assistant/references/topkey/mosaic.json
new file mode 100644
index 0000000000..1b1fd365f5
--- /dev/null
+++ b/skills/vchart-development-assistant/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-assistant/references/topkey/pie.json b/skills/vchart-development-assistant/references/topkey/pie.json
new file mode 100644
index 0000000000..341fded7a2
--- /dev/null
+++ b/skills/vchart-development-assistant/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-assistant/references/topkey/pie3d.json b/skills/vchart-development-assistant/references/topkey/pie3d.json
new file mode 100644
index 0000000000..96889524b0
--- /dev/null
+++ b/skills/vchart-development-assistant/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-assistant/references/topkey/radar.json b/skills/vchart-development-assistant/references/topkey/radar.json
new file mode 100644
index 0000000000..4d6b2fe818
--- /dev/null
+++ b/skills/vchart-development-assistant/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-assistant/references/topkey/rangeArea.json b/skills/vchart-development-assistant/references/topkey/rangeArea.json
new file mode 100644
index 0000000000..ebfe85d96d
--- /dev/null
+++ b/skills/vchart-development-assistant/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-assistant/references/topkey/rangeColumn.json b/skills/vchart-development-assistant/references/topkey/rangeColumn.json
new file mode 100644
index 0000000000..c83f59c561
--- /dev/null
+++ b/skills/vchart-development-assistant/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-assistant/references/topkey/rangeColumn3d.json b/skills/vchart-development-assistant/references/topkey/rangeColumn3d.json
new file mode 100644
index 0000000000..c83f59c561
--- /dev/null
+++ b/skills/vchart-development-assistant/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-assistant/references/topkey/rose.json b/skills/vchart-development-assistant/references/topkey/rose.json
new file mode 100644
index 0000000000..d09e1d895f
--- /dev/null
+++ b/skills/vchart-development-assistant/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-assistant/references/topkey/sankey.json b/skills/vchart-development-assistant/references/topkey/sankey.json
new file mode 100644
index 0000000000..a9e0d88dc7
--- /dev/null
+++ b/skills/vchart-development-assistant/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-assistant/references/topkey/scatter.json b/skills/vchart-development-assistant/references/topkey/scatter.json
new file mode 100644
index 0000000000..abd979ecf6
--- /dev/null
+++ b/skills/vchart-development-assistant/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-assistant/references/topkey/sequence.json b/skills/vchart-development-assistant/references/topkey/sequence.json
new file mode 100644
index 0000000000..72c3591e46
--- /dev/null
+++ b/skills/vchart-development-assistant/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-assistant/references/topkey/sunburst.json b/skills/vchart-development-assistant/references/topkey/sunburst.json
new file mode 100644
index 0000000000..c76ea0cf6f
--- /dev/null
+++ b/skills/vchart-development-assistant/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-assistant/references/topkey/treemap.json b/skills/vchart-development-assistant/references/topkey/treemap.json
new file mode 100644
index 0000000000..72ccf182f7
--- /dev/null
+++ b/skills/vchart-development-assistant/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-assistant/references/topkey/venn.json b/skills/vchart-development-assistant/references/topkey/venn.json
new file mode 100644
index 0000000000..f9ff5d1bd1
--- /dev/null
+++ b/skills/vchart-development-assistant/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-assistant/references/topkey/waterfall.json b/skills/vchart-development-assistant/references/topkey/waterfall.json
new file mode 100644
index 0000000000..33ba3bcc91
--- /dev/null
+++ b/skills/vchart-development-assistant/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-assistant/references/topkey/wordCloud.json b/skills/vchart-development-assistant/references/topkey/wordCloud.json
new file mode 100644
index 0000000000..7cc2953622
--- /dev/null
+++ b/skills/vchart-development-assistant/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-assistant/references/topkey/wordCloud3d.json b/skills/vchart-development-assistant/references/topkey/wordCloud3d.json
new file mode 100644
index 0000000000..520e17f49d
--- /dev/null
+++ b/skills/vchart-development-assistant/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-assistant/references/type-details/FunctionType-Type-Definition.md b/skills/vchart-development-assistant/references/type-details/FunctionType-Type-Definition.md
new file mode 100644
index 0000000000..dd42484655
--- /dev/null
+++ b/skills/vchart-development-assistant/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-assistant/references/type-details/GeometricMaskShape-Type-Definition.md b/skills/vchart-development-assistant/references/type-details/GeometricMaskShape-Type-Definition.md
new file mode 100644
index 0000000000..c3999e6788
--- /dev/null
+++ b/skills/vchart-development-assistant/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-assistant/references/type-details/IAnimationConfig-Type-Definition.md b/skills/vchart-development-assistant/references/type-details/IAnimationConfig-Type-Definition.md
new file mode 100644
index 0000000000..bb08683c44
--- /dev/null
+++ b/skills/vchart-development-assistant/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-assistant/references/type-details/IArcLabelSpec-Type-Definition.md b/skills/vchart-development-assistant/references/type-details/IArcLabelSpec-Type-Definition.md
new file mode 100644
index 0000000000..cc9a6d92be
--- /dev/null
+++ b/skills/vchart-development-assistant/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-assistant/references/type-details/IArcMarkSpec-Type-Definition.md b/skills/vchart-development-assistant/references/type-details/IArcMarkSpec-Type-Definition.md
new file mode 100644
index 0000000000..4ea25fa03a
--- /dev/null
+++ b/skills/vchart-development-assistant/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-assistant/references/type-details/IAreaMarkSpec-Type-Definition.md b/skills/vchart-development-assistant/references/type-details/IAreaMarkSpec-Type-Definition.md
new file mode 100644
index 0000000000..de37c6b0d9
--- /dev/null
+++ b/skills/vchart-development-assistant/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-assistant/references/type-details/IBackgroundSpec-Type-Definition.md b/skills/vchart-development-assistant/references/type-details/IBackgroundSpec-Type-Definition.md
new file mode 100644
index 0000000000..9e1f9adf8f
--- /dev/null
+++ b/skills/vchart-development-assistant/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-assistant/references/type-details/IBoxPlotMarkSpec-Type-Definition.md b/skills/vchart-development-assistant/references/type-details/IBoxPlotMarkSpec-Type-Definition.md
new file mode 100644
index 0000000000..632d308e23
--- /dev/null
+++ b/skills/vchart-development-assistant/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-assistant/references/type-details/IBrushSpec-Type-Definition.md b/skills/vchart-development-assistant/references/type-details/IBrushSpec-Type-Definition.md
new file mode 100644
index 0000000000..9466cc4153
--- /dev/null
+++ b/skills/vchart-development-assistant/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-assistant/references/type-details/ICartesianAxisSpec-Type-Definition.md b/skills/vchart-development-assistant/references/type-details/ICartesianAxisSpec-Type-Definition.md
new file mode 100644
index 0000000000..219a0b5fef
--- /dev/null
+++ b/skills/vchart-development-assistant/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-assistant/references/type-details/ICartesianCrosshairSpec-Type-Definition.md b/skills/vchart-development-assistant/references/type-details/ICartesianCrosshairSpec-Type-Definition.md
new file mode 100644
index 0000000000..d6a72db019
--- /dev/null
+++ b/skills/vchart-development-assistant/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-assistant/references/type-details/ICellMarkSpec-Type-Definition.md b/skills/vchart-development-assistant/references/type-details/ICellMarkSpec-Type-Definition.md
new file mode 100644
index 0000000000..392103bb67
--- /dev/null
+++ b/skills/vchart-development-assistant/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