ECharts 图表生成技能。当用户需要生成数据可视化图表、柱状图、折线图、饼图、组合图表时触发。 触发词:图表、画图、可视化、echarts、柱状图、折线图、饼图、双Y轴、数据展示
npx claudepluginhub within-7/minto-plugin-toolsThis skill inherits all available tools. When active, it can use any tool Claude has access to.
references/chart-templates.mdreferences/config-guide.md这是一个专业的数据可视化技能,根据用户提供的数据,生成可直接运行的 ECharts 图表代码。
| 图表类型 | 用途 | 示例场景 |
|---|---|---|
| 柱状图 (bar) | 分类数据对比 | 销售对比、市场份额 |
| 折线图 (line) | 趋势变化 | 增长趋势、时间序列 |
| 饼图 (pie) | 占比分布 | 市场份额、成本构成 |
| 散点图 (scatter) | 相关性分析 | 用户分布、价格销量关系 |
| 面积图 (area) | 累积趋势 | 累计销售、市场份额变化 |
用户提供数据时,支持以下格式:
年份 金额(百万) 增速
2015 578.31 57.80%
2016 773.13 33.70%
...
{
"categories": ["2015", "2016", "2017"],
"series": [
{"name": "金额", "type": "bar", "data": [578.31, 773.13, 1118.42]},
{"name": "增速", "type": "line", "data": [57.80, 33.70, 44.70]}
]
}
帮我画一个柱状图,数据如下:
2015年:578.31,增速57.80%
2016年:773.13,增速33.70%
...
生成的 ECharts 代码包含:
colors: ['#5470c6', '#ee6666', '#91cc75', '#fac858', '#73c0de']
colors: ['#3ba272', '#fc8452', '#9a60b4', '#ea7ccc', '#5470c6']
| 命令 | 用途 |
|---|---|
/generate-chart <数据> | 根据数据生成 ECharts 图表 |
用户: 帮我画一个图表展示近10年市场规模和增速
数据:2015年578.31百万,增速57.80%...
AI: [生成 ECharts 双Y轴组合图代码]
用户: 画一个柱状图对比2022-2024年各季度销售额
Q1: 100/120/150万
Q2: 150/180/200万
...
AI: [生成多系列柱状图代码]
Expert guidance for Next.js Cache Components and Partial Prerendering (PPR). **PROACTIVE ACTIVATION**: Use this skill automatically when working in Next.js projects that have `cacheComponents: true` in their next.config.ts/next.config.js. When this config is detected, proactively apply Cache Components patterns and best practices to all React Server Component implementations. **DETECTION**: At the start of a session in a Next.js project, check for `cacheComponents: true` in next.config. If enabled, this skill's patterns should guide all component authoring, data fetching, and caching decisions. **USE CASES**: Implementing 'use cache' directive, configuring cache lifetimes with cacheLife(), tagging cached data with cacheTag(), invalidating caches with updateTag()/revalidateTag(), optimizing static vs dynamic content boundaries, debugging cache issues, and reviewing Cache Component implementations.
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.