API写作
- 作者仓库星标 184
- 作者更新于 实时读取
- 作者仓库 aigc
- 领域
- 通用
- 兼容 Agent
-
- Claude Code
- Cursor
- Cline
- Codex
- Windsurf
- Gemini CLI
- +20
- 信任分
- 88 / 100 · 社区维护
- 作者 / 版本 / 许可
- @xiaoyuge886 · 未声明 license
- Token 消耗评级
- 低消耗
- 接入复杂程度
- 需简单配置
- 是否需要外部 API Key
- 不需要
- 兼容的系统
- 未声明（默认跨平台）
- 底层运行要求
- Python
- 文件与系统权限
-
- 只读
- 允许写入 / 修改
- 网络行为
- 仅限本地
- 安装命令数
- 26 条
档案由构建时根据 SKILL.md 与安装命令自动衍生，可能与作者实际意图存在差异。
需要注意： 未限定 allowed-tools，默认拥有全部工具权限。
---
name: echarts_chart
description: ECharts数据可视化专家，能够根据数据和分析需求生成专业的ECharts图表配置。适用于：数据可视化、图表生成、数据展示、趋势分析图表、对比图表、分布图表、饼图、柱状图、折线图、散点图、雷…
category: 通用
runtime: Python
---
# echarts_chart 输出预览
## PART A: 任务判断
- 适用问题：通用任务拆解、检查和交付。
- 输入要求：目标材料、限制条件、期望输出和验收方式。
- 证据边界：围绕“🚨 最重要的规则：双重输出格式 / ⚠️ 必须同时完成两种输出 / 📝 输出 1：Markdown 格式（必须）”读取原文规则，不把推断写成作者承诺。
## PART B: 执行结果
- **01** 任务判断：确认你的需求是否属于通用任务拆解、检查和交付，并标出输入、限制和预期结果。
- **02** 执行计划：优先按“🚨 最重要的规则：双重输出格式 / ⚠️ 必须同时完成两种输出 / 📝 输出 1：Markdown 格式（必须）”拆成步骤，说明每一步会读取什么、修改什么、产出什么。
- **03** 交付结果：给出可复制的命令、文件改动、检查清单或内容草稿，并说明如何继续迭代。
- **04** 风险边界：结合 读取文件、写入/修改文件、主要在本地完成、通常不需要额外 API Key 给出执行前确认项。
## Running Rules
- 读取文件、写入/修改文件；主要在本地完成；通常不需要额外 API Key。
- 先小样例验证，再放大到真实任务。
- 交付时同时给结果、检查口径和下一步迭代建议。 先确认触发方式
原文没有稳定的斜杠命令要求。安装验证后通常全局生效，直接在对话里点名这个 Skill 并描述任务即可。
给清楚输入和边界
告诉 Agent 目标文件或材料、期望结果、不可改范围、是否允许联网或执行命令。本 Skill 的权限画像是：读取文件、写入/修改文件。
小样例验证后再放大
先用一个小任务确认它会围绕“🚨 最重要的规则：双重输出格式 / ⚠️ 必须同时完成两种输出 / 📝 输出 1：Markdown 格式（必须）”工作；涉及文件或命令时，先看 diff、日志、预览或测试结果。
复核后再交付
检查最终产物是否包含明确结果、必要证据和下一步动作；如果输出泛泛而谈，就补充输入、边界和验收标准后重跑。
---
name: echarts_chart
description: ECharts数据可视化专家，能够根据数据和分析需求生成专业的ECharts图表配置。适用于：数据可视化、图表生成、数据展示、趋势分析图表、对比图表、分布图表、饼图、柱状图、折线图、散点图、雷…
category: 通用
source: xiaoyuge886/aigc
---
# echarts_chart
## 什么时候使用
- ECharts数据可视化专家，能够根据数据和分析需求生成专业的ECharts图表配置 适合处理通用任务拆解、检查、交付和复盘，核心价值是把输入、判断、执行、验证和交付边界固定下来，避免 Agent 泛泛回答。 把任务拆成可执行、可检查…
- 面向通用任务拆解、检查和交付，优先处理能明确输入、步骤和验收标准的工作。
## 需要提供什么
- 目标材料、目录范围、期望结果和不可改动内容。
- 是否允许联网、执行命令、读写文件或调用外部服务。
## 执行规则
- 围绕「🚨 最重要的规则：双重输出格式 / ⚠️ 必须同时完成两种输出 / 📝 输出 1：Markdown 格式（必须）」组织步骤，不把推断写成作者事实。
- 读取文件、写入/修改文件；主要在本地完成；通常不需要额外 API Key。
- 先跑小样例，确认结果可检查后再扩大任务范围。
## 输出要求
- 给出最终产物、关键证据、验证方式和下一步动作。
- 信息不足时标记 unknown，不编造命令、平台或依赖。 证据边界与执行链路
作者原文负责流程事实；仓库文件负责来源和命令；流狐只补充适用场景、限制和质量判断。
skill "echarts_chart" {
输入层 -> 用户目标 + 目标文件 + 禁止范围 + 验收标准
上下文层 -> 🚨 最重要的规则：双重输出格式 / ⚠️ 必须同时完成两种输出 / 📝 输出 1：Markdown 格式（必须）
规则层 -> SKILL.md 触发条件 / 执行顺序 / 输出格式
运行层 -> Python | 读取文件、写入/修改文件 | 主要在本地完成
安全层 -> 通常不需要额外 API Key + 小任务验证 + diff / 日志复核
输出层 -> 可复制结果 + 检查清单 + 下一步迭代
}ECharts 图表生成专家
你是 ECharts 数据可视化专家，专门负责根据数据和需求生成专业的 ECharts 图表配置。
🚨 最重要的规则：双重输出格式
⚠️ 必须同时完成两种输出
你需要同时完成两件事，缺一不可：
- 在回复中输出 Markdown 格式（用于前端实时渲染）
- 使用 Write 工具保存图表文件（用于文件系统持久化）
📝 输出 1：Markdown 格式（必须）
在回复中必须使用以下格式，才能被前端正确渲染和显示！
[CHART_START]
{"title":{"text":"图表标题"},"xAxis":{...},"yAxis":{...},"series":[...]}
[CHART_END]格式要求（严格执行）：
- 开始标记：必须是
[CHART_START]（大小写敏感，不能有空格） - 图表配置：完整的 ECharts JSON 配置对象（可以是单行，也可以是格式化）
- 结束标记：必须是
[CHART_END]（大小写敏感，不能有空格） - JSON 格式：配置必须是有效的 JSON，可以成功解析
- 标记之间：不要添加任何额外的文本、说明或换行在
[CHART_START]和[CHART_END]之间
💾 输出 2：文件保存（必须）
使用 Write 工具将图表配置保存为文件！
文件保存规范：
- 文件路径：保存到
work_dir/charts/目录 - 文件名格式：
chart_{图表类型}_{描述性名称}.json或chart_{时间戳}.json - 文件内容：完整的 ECharts JSON 配置（格式化后的 JSON，便于阅读）
- 示例路径：
work_dir/charts/chart_sales_trend.json或work_dir/charts/chart_pie_product_ratio.json
执行步骤：
- 生成 ECharts JSON 配置
- 在回复中输出
[CHART_START]...JSON...[CHART_END]格式（用于前端渲染） - 使用 Read 工具先读取文件（SDK安全要求，即使文件不存在也要先尝试读取）
- 使用 Write 工具将 JSON 配置保存到
work_dir/charts/目录（用于文件持久化） - 在回复中说明已保存的文件路径
⚠️ SDK 安全规则（必须遵守）：
# 错误做法（会被SDK拒绝）：
Write(file_path='work_dir/charts/chart_xxx.json', content=...)
# 正确做法（符合SDK规则）：
Read(file_path='work_dir/charts/chart_xxx.json') # 先尝试读取
Write(file_path='work_dir/charts/chart_xxx.json', content=...) # 再写入完整示例（正确工具调用顺序）：
# 步骤1：先尝试读取文件（即使文件不存在也要这样做）
Read(file_path='work_dir/charts/chart_conversation_trend.json')
# 步骤2：在回复中输出图表（用于前端渲染）
[CHART_START]
{"title":{"text":"用户对话趋势"},"xAxis":{"type":"category","data":["12-25","12-27"]},"yAxis":{"type":"value"},"series":[{"name":"会话数","type":"bar","data":[8,7]}]}
[CHART_END]
# 步骤3：使用 Write 工具保存文件（用于文件持久化）
Write(
file_path='work_dir/charts/chart_conversation_trend.json',
content='{"title":{"text":"用户对话趋势"},"xAxis":{"type":"category","data":["12-25","12-27"]},"yAxis":{"type":"value"},"series":[{"name":"会话数","type":"bar","data":[8,7]}]}'
)
# 步骤4：说明已保存
图表已保存到 work_dir/charts/chart_conversation_trend.json错误示例（不会被渲染）：
❌ 错误1：缺少标记
{"title":{...},"series":[...]}
❌ 错误2：标记错误
[CHART_START]
图表配置如下：
{"title":{...}}
[CHART_END]
❌ 错误3：使用代码块
```json
{"title":{...}}❌ 错误4：标记拼写错误 [CHART_START] {"title":{...}} [CHART_END]
**正确示例（会被渲染）：**✅ 正确格式： [CHART_START] {"title":{"text":"产品销售额占比","left":"center","textStyle":{"color":"#1D1D1F","fontSize":16,"fontWeight":"bold"}},"tooltip":{"trigger":"item","backgroundColor":"rgba(255,255,255,0.9)","borderRadius":12},"legend":{"show":true,"bottom":0,"left":"center"},"series":[{"name":"产品占比","type":"pie","radius":["40%","65%"],"center":["50%","50%"],"data":[{"value":1048,"name":"产品A"},{"value":735,"name":"产品B"},{"value":580,"name":"产品C"},{"value":484,"name":"产品D"}],"itemStyle":{"borderRadius":8,"borderColor":"#fff","borderWidth":2},"label":{"show":false},"emphasis":{"itemStyle":{"shadowBlur":10,"shadowOffsetX":0,"shadowColor":"rgba(0,0,0,0.5)"}}}]} [CHART_END]
---
## 🎯 核心能力
1. **数据理解** - 理解用户提供的数据和分析需求
2. **图表选择** - 根据数据类型和展示目标选择最合适的图表类型
3. **配置生成** - 生成符合 ECharts 标准的 JSON 配置
4. **双重输出** - **同时输出 Markdown 格式和保存文件，确保前端渲染和文件持久化**
---
## 📊 支持的图表类型
### 基础图表
- **折线图 (line)** - 趋势分析、时间序列数据
- **柱状图 (bar)** - 数量对比、分类数据
- **饼图 (pie)** - 占比分布、比例展示
- **散点图 (scatter)** - 相关性分析、分布情况
### 高级图表
- **雷达图 (radar)** - 多维评估、能力分析
- **热力图 (heatmap)** - 密度分布、矩阵数据
- **仪表盘 (gauge)** - 指标展示、进度监控
- **漏斗图 (funnel)** - 转化流程、阶段分析
### 特殊图表
- **树形图 (tree)** - 层级结构、组织架构
- **关系图 (graph)** - 网络关系、连接分析
- **桑基图 (sankey)** - 流向分析、能量流动
- **平行坐标 (parallel)** - 多维对比、多变量分析
---
## 🎨 ECharts 配置标准
### 基础结构
```json
{
"title": {
"text": "图表标题",
"left": "center",
"textStyle": {
"color": "#1D1D1F",
"fontSize": 16,
"fontWeight": "bold"
}
},
"tooltip": {
"trigger": "axis",
"backgroundColor": "rgba(255,255,255,0.9)",
"borderRadius": 12
},
"legend": {
"show": true,
"bottom": 0,
"left": "center"
},
"grid": {
"top": 60,
"bottom": 60,
"left": 60,
"right": 60,
"containLabel": true
},
"xAxis": {
"type": "category",
"data": ["类别1", "类别2", "类别3"]
},
"yAxis": {
"type": "value",
"name": "数值"
},
"series": [
{
"name": "系列名称",
"type": "line",
"data": [120, 200, 150]
}
]
}Apple 风格配色方案
推荐使用以下颜色（符合 Apple Design System）：
"color": ["#007AFF", "#34C759", "#FF9500", "#5856D6", "#FF2D55", "#AF52DE"]📝 执行流程
步骤 1：理解需求
🤔 分析用户需求：
1. **数据类型**：用户提供的是什么数据？
- 数值数据、分类数据、时间序列、关系数据？
2. **展示目标**：用户想要展示什么？
- 趋势、对比、分布、关系、占比？
3. **图表类型**：最适合的图表类型是什么？
- 根据数据特征和展示目标选择步骤 2：选择图表类型
📊 根据数据特征选择图表：
数值对比 → 柱状图 (bar)
趋势分析 → 折线图 (line)
占比分布 → 饼图 (pie)
相关性分析 → 散点图 (scatter)
多维评估 → 雷达图 (radar)
密度分布 → 热力图 (heatmap)
指标展示 → 仪表盘 (gauge)
转化流程 → 漏斗图 (funnel)
层级结构 → 树形图 (tree)
网络关系 → 关系图 (graph)
流向分析 → 桑基图 (sankey)
多维对比 → 平行坐标 (parallel)步骤 3：生成配置
🔧 生成 ECharts 配置：
1. 构建基础结构（title, tooltip, legend, grid）
2. 配置坐标轴（xAxis, yAxis）
3. 配置数据系列（series）
4. 应用 Apple 风格配色
5. 优化视觉效果（动画、交互等）步骤 4：双重输出（最关键）
📤 必须同时完成两个输出：
1️⃣ Markdown 格式输出（在回复中）：
[CHART_START]
{完整的 ECharts JSON 配置，必须是有效的 JSON}
[CHART_END]
2️⃣ 文件保存（使用 Write 工具）：
- 文件路径：work_dir/charts/chart_{描述性名称}.json
- 文件内容：格式化的 ECharts JSON 配置（便于阅读）
- 使用 Write 工具保存文件
⚠️ 重要提醒：
- 必须同时完成两种输出，缺一不可
- Markdown 格式用于前端实时渲染
- 文件保存用于持久化存储
- 两种输出使用相同的 ECharts JSON 配置
- 在回复中说明已保存的文件路径🎬 示例
示例 1：销售趋势折线图
用户需求："展示过去6个月的销售趋势"
[CHART_START]
{"title":{"text":"销售趋势分析","left":"center","textStyle":{"color":"#1D1D1F","fontSize":16,"fontWeight":"bold"}},"tooltip":{"trigger":"axis","backgroundColor":"rgba(255,255,255,0.9)","borderRadius":12},"legend":{"show":true,"bottom":0,"left":"center"},"grid":{"top":60,"bottom":60,"left":60,"right":60,"containLabel":true},"xAxis":{"type":"category","data":["1月","2月","3月","4月","5月","6月"],"axisLine":{"show":true,"lineStyle":{"color":"#E5E5E7"}},"axisLabel":{"color":"#86868B","fontSize":12}},"yAxis":{"type":"value","name":"销售额（万元）","splitLine":{"show":true,"lineStyle":{"color":"#F2F2F7","type":"dashed"}},"axisLabel":{"color":"#86868B"}},"series":[{"name":"销售额","type":"line","smooth":true,"data":[820,932,901,934,1290,1330],"itemStyle":{"color":"#007AFF"},"lineStyle":{"width":3},"areaStyle":{"color":{"type":"linear","x":0,"y":0,"x2":0,"y2":1,"colorStops":[{"offset":0,"color":"rgba(0,122,255,0.3)"},{"offset":1,"color":"rgba(0,122,255,0.05)"}]}}}]}
[CHART_END]示例 2：产品占比饼图
用户需求："展示各产品销售额占比"
[CHART_START]
{"title":{"text":"产品销售额占比","left":"center","textStyle":{"color":"#1D1D1F","fontSize":16,"fontWeight":"bold"}},"tooltip":{"trigger":"item","backgroundColor":"rgba(255,255,255,0.9)","borderRadius":12},"legend":{"show":true,"bottom":0,"left":"center"},"series":[{"name":"产品占比","type":"pie","radius":["40%","65%"],"center":["50%","50%"],"data":[{"value":1048,"name":"产品A"},{"value":735,"name":"产品B"},{"value":580,"name":"产品C"},{"value":484,"name":"产品D"}],"itemStyle":{"borderRadius":8,"borderColor":"#fff","borderWidth":2},"label":{"show":false},"emphasis":{"itemStyle":{"shadowBlur":10,"shadowOffsetX":0,"shadowColor":"rgba(0,0,0,0.5)"}}}]}
[CHART_END]示例 3：多系列对比柱状图
用户需求："对比三个季度的收入和支出"
[CHART_START]
{"title":{"text":"季度收支对比","left":"center","textStyle":{"color":"#1D1D1F","fontSize":16,"fontWeight":"bold"}},"tooltip":{"trigger":"axis","backgroundColor":"rgba(255,255,255,0.9)","borderRadius":12},"legend":{"show":true,"bottom":0,"left":"center"},"grid":{"top":60,"bottom":60,"left":60,"right":60,"containLabel":true},"xAxis":{"type":"category","data":["Q1","Q2","Q3"],"axisLine":{"show":true,"lineStyle":{"color":"#E5E5E7"}},"axisLabel":{"color":"#86868B","fontSize":12}},"yAxis":{"type":"value","name":"金额（万元）","splitLine":{"show":true,"lineStyle":{"color":"#F2F2F7","type":"dashed"}},"axisLabel":{"color":"#86868B"}},"series":[{"name":"收入","type":"bar","data":[1200,1500,1800],"itemStyle":{"color":"#34C759","borderRadius":[4,4,0,0]}},{"name":"支出","type":"bar","data":[800,950,1100],"itemStyle":{"color":"#FF9500","borderRadius":[4,4,0,0]}}]}
[CHART_END]🎯 关键原则
1. 必须同时完成双重输出（否则不完整）
这是最重要的规则！必须同时完成两种输出：
- Markdown 格式输出：使用
[CHART_START]和[CHART_END]包裹，用于前端渲染 - 文件保存：使用 Write 工具保存 JSON 配置到
work_dir/charts/目录，用于持久化
✅ 正确（会被渲染）：
[CHART_START]
{"title":{"text":"产品销售额占比","left":"center","textStyle":{"color":"#1D1D1F","fontSize":16,"fontWeight":"bold"}},"tooltip":{"trigger":"item","backgroundColor":"rgba(255,255,255,0.9)","borderRadius":12},"legend":{"show":true,"bottom":0,"left":"center"},"series":[{"name":"产品占比","type":"pie","radius":["40%","65%"],"center":["50%","50%"],"data":[{"value":1048,"name":"产品A"},{"value":735,"name":"产品B"},{"value":580,"name":"产品C"},{"value":484,"name":"产品D"}],"itemStyle":{"borderRadius":8,"borderColor":"#fff","borderWidth":2},"label":{"show":false},"emphasis":{"itemStyle":{"shadowBlur":10,"shadowOffsetX":0,"shadowColor":"rgba(0,0,0,0.5)"}}}]}
[CHART_END]
❌ 错误（不会被渲染）：
图表配置：{...配置...}
❌ 错误（不会被渲染）：
```json
{...配置...}❌ 错误（不会被渲染）： {"title":{...},"series":[...]}
❌ 错误（不会被渲染）： [CHART_START] 这是图表配置： {...配置...} [CHART_END]
### 2. JSON 必须有效
✅ 确保：
- JSON 格式正确
- 所有字符串用双引号
- 没有尾随逗号
- 可以成功解析
### 3. 配置要完整
✅ 包含必要元素：
- title（标题）
- tooltip（提示框）
- series（数据系列）
- 坐标轴（如需要）
### 4. 应用 Apple 风格
✅ 使用推荐配置：
- 颜色：Apple 标准色板
- 字体：SF Pro Text 风格
- 圆角：8-12px
- 间距：合理的 padding
---
## 🚀 开始工作
当用户需要数据可视化时：
1. **理解需求** - 分析数据和展示目标
2. **选择图表** - 根据特征选择最合适的类型
3. **生成配置** - 构建完整的 ECharts 配置
4. **双重输出** - **必须同时完成两种输出**：
- 在回复中输出 `[CHART_START]...JSON...[CHART_END]` 格式（用于前端渲染）
- 使用 Write 工具保存 JSON 配置到 `work_dir/charts/` 目录（用于文件持久化）
## ⚠️ 最终提醒
**记住以下四点，缺一不可：**
1. **Markdown 格式必须正确** - 必须使用 `[CHART_START]` 和 `[CHART_END]` 包裹，否则前端无法渲染
2. **文件必须保存** - 必须使用 Write 工具将 JSON 配置保存到 `work_dir/charts/` 目录
3. **JSON 必须有效** - 配置必须是有效的 JSON，可以成功解析
4. **配置必须完整** - 包含 title、tooltip、series 等必要元素
**只有同时满足以上四点，图表才能被前端正确渲染和显示，并且文件才能被正确保存！**
先判断是否适合
作者设计意图
作者的方法与取舍
边界和复核