用途
该技能用于在 Pencil 中初始化基于 ECharts 规范的图表设计系统。它面向需要在 .pen 文件中搭建图表主题与占位结构的场景，帮助建立统一的图表配色、坐标轴与文字样式，并为各类图表创建布局占位框架。
主要能力
- 注册 ECharts 相关设计令牌（design tokens），包括图表主题色、字体等。
- 创建“Charts Overview”框架，包含各类图表类型的占位区块。
- 覆盖基础图表：折线图、柱状图、饼图、散点图、雷达图、仪表盘。
- 覆盖复杂图表：K线图、热力图、树图、矩形树图、旭日图、平行坐标、桑基图、漏斗图、象形柱图。
- 提供容器占位：图表容器占位、图例占位、网格占位。
- 使用 Auto Layout 组织框架，并限制每次 batch_design 调用最多 25 个操作。
使用方式
该技能输出一个 PENCIL_PLAN，随后 Agent 按顺序调用 Pencil MCP 工具：open_document、set_variables、batch_design，可选调用 get_screenshot。
第一步：初始化变量（set_variables）
使用 mcp__pencil__set_variables 注册 ECharts 相关设计令牌，遵循 .pen 文件 schema。
图表颜色（调色板）：
- echarts-color-1: #5470c6
- echarts-color-2: #91cc75
- echarts-color-3: #fac858
- echarts-color-4: #ee6666
- echarts-color-5: #73c0de
坐标轴 / 网格 / 文字：
- echarts-axis-line-color: #6e7079
- echarts-split-line-color: #e0e6f1
- echarts-text-color: #6e7079
- echarts-font-size: 12px
如需更多令牌，可从 ECharts 主题文档中补充。
第二步：创建组件概览结构（batch_design）
使用 mcp__pencil__batch_design 创建“Charts Overview”框架，包含图表类型（数据可视化组件）的占位区块：
基础图表（Basic Charts）：折线图、柱状图、饼图、散点图、雷达图、仪表盘。
复杂图表（Complex Charts）：K线图、热力图、树图、矩形树图、旭日图、平行坐标、桑基图、漏斗图、象形柱图。
容器（Containers）：图表容器占位、图例占位、网格占位。
使用 Auto Layout 组织框架。每次 batch_design 调用最多 25 个操作。
适用场景
- 用户明确提到“Pencil”和“ECharts”。
- 需要为图表编排 Pencil 设计系统初始化任务。
- 需要在 .pen 文件中基于 ECharts 规范初始化图表/设计系统：设置图表主题颜色，并为图表类型创建占位框架。
限制与最佳实践
- 仅在用户明确提及“Pencil”和“ECharts”，或为图表编排 Pencil 设计系统初始化任务时使用。
- 验证令牌值是否符合 ECharts 主题文档。
- 使用 set_variables 时，除非请求完全重置，否则使用 replace: false。
- 此处的图表“组件”是用于布局的占位框架；实际图表配置在代码侧完成。
参考资料
- references/contract.md – 设计令牌与图表类型命名。
- references/official.md – 官方文档链接。
- references/examples.md – 示例 PENCIL_PLAN。
- references/components.md – 图表类型规范。
关键词
pencil, echarts, chart, design system, init, variables, data visualization