a65adcc2e5
Sources: extracted from two upstream archives (skill-repo, skills-main),
merged with the following policy:
- 15 broken symlinks (pointing to /Users/jameslee/.cc-switch/skills or
../../.agents/skills on a foreign machine) discarded
- 3 real name collisions with identical content (ai-pair, ifind-http-api,
zhipu-websearch) kept as one copy
- Functional overlaps deduped keeping the strongest variant:
- docx family: kept docx (official, full toolchain) + docx-cn
(GB/T 9704 Chinese official-document constants),
dropped docx_writer (no scripts, name collided with docx)
- humanizer family: kept humanizer-zh (6 zh reference docs),
dropped humanizer (en, redundant for CN workflow)
- Skills that only ran in a foreign environment removed:
ablemind-ops, app-publish, hlb-design-system, openclaw-adj-skill,
claude-driver
- alphapai excluded from this public repo because its SKILL.md hard-coded
live credentials
Result: 25 skills, 572 files, ~7.5 MB.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
237 lines
7.9 KiB
Markdown
237 lines
7.9 KiB
Markdown
# Charts -- Composition (构成类)
|
||
|
||
饼图、环形图、Treemap、旭日图等。基础设施见 [charts-base.md](charts-base.md)。
|
||
|
||
---
|
||
|
||
## 环形饼图（3-6 项占比）
|
||
|
||
```javascript
|
||
const pieOption = {
|
||
color: ['#1a365d', '#2563eb', '#60a5fa', '#93c5fd', '#c5963a'],
|
||
tooltip: { trigger: 'item', formatter: '{b}: {c} ({d}%)' },
|
||
legend: { orient: 'vertical', right: '5%', top: 'center' },
|
||
series: [{
|
||
type: 'pie',
|
||
radius: ['40%', '70%'],
|
||
center: ['40%', '50%'],
|
||
padAngle: 2,
|
||
itemStyle: { borderRadius: 4 },
|
||
label: { formatter: '{b}\n{d}%', fontSize: 11 },
|
||
emphasis: {
|
||
label: { fontSize: 14, fontWeight: 'bold' },
|
||
itemStyle: { shadowBlur: 10, shadowColor: 'rgba(0,0,0,0.2)' }
|
||
},
|
||
data: [
|
||
{ value: 4500, name: '业务A' },
|
||
{ value: 3200, name: '业务B' },
|
||
{ value: 2100, name: '业务C' },
|
||
{ value: 1500, name: '其他' }
|
||
]
|
||
}]
|
||
};
|
||
```
|
||
|
||
---
|
||
|
||
## 玫瑰图 / 南丁格尔图
|
||
|
||
各项数值差异大时，用半径缩放强调差异。
|
||
|
||
```javascript
|
||
const roseOption = {
|
||
color: ['#1a365d', '#2563eb', '#3b82f6', '#60a5fa', '#93c5fd', '#c5963a'],
|
||
tooltip: { trigger: 'item', formatter: '{b}: {c} ({d}%)' },
|
||
legend: { bottom: '3%', left: 'center' },
|
||
series: [{
|
||
type: 'pie',
|
||
radius: ['15%', '70%'],
|
||
center: ['50%', '45%'],
|
||
roseType: 'area', /* 'radius' = 半径缩放, 'area' = 面积缩放 */
|
||
itemStyle: { borderRadius: 5 },
|
||
label: { formatter: '{b}\n{c}亿', fontSize: 11 },
|
||
data: [
|
||
{ value: 1843, name: '游戏' },
|
||
{ value: 1200, name: '社交网络' },
|
||
{ value: 1240, name: '网络广告' },
|
||
{ value: 2100, name: '金融科技' },
|
||
{ value: 69, name: '其他' }
|
||
]
|
||
}]
|
||
};
|
||
```
|
||
|
||
---
|
||
|
||
## 嵌套环形图（两级分类）
|
||
|
||
内环大类，外环细分。
|
||
|
||
```javascript
|
||
const nestedPieOption = {
|
||
tooltip: { trigger: 'item', formatter: '{a}<br/>{b}: {c} ({d}%)' },
|
||
series: [
|
||
{
|
||
name: '大类',
|
||
type: 'pie',
|
||
radius: ['0%', '35%'],
|
||
label: { position: 'inner', fontSize: 10, color: '#fff' },
|
||
data: [
|
||
{ value: 3043, name: '增值服务' },
|
||
{ value: 2100, name: '金融科技' },
|
||
{ value: 1240, name: '广告' }
|
||
]
|
||
},
|
||
{
|
||
name: '细分',
|
||
type: 'pie',
|
||
radius: ['45%', '70%'],
|
||
label: { formatter: '{b}: {d}%', fontSize: 10 },
|
||
data: [
|
||
{ value: 1843, name: '游戏' },
|
||
{ value: 1200, name: '社交网络' },
|
||
{ value: 1100, name: '支付' },
|
||
{ value: 1000, name: '企业服务' },
|
||
{ value: 740, name: '媒体广告' },
|
||
{ value: 500, name: '社交广告' }
|
||
]
|
||
}
|
||
]
|
||
};
|
||
```
|
||
|
||
---
|
||
|
||
## 半环仪表盘（单指标达标率）
|
||
|
||
```javascript
|
||
const gaugeOption = {
|
||
series: [{
|
||
type: 'gauge',
|
||
startAngle: 180,
|
||
endAngle: 0,
|
||
radius: '90%',
|
||
center: ['50%', '65%'],
|
||
min: 0, max: 100,
|
||
pointer: { show: false },
|
||
progress: { show: true, overlap: false, roundCap: true, width: 18, itemStyle: { color: '#2563eb' } },
|
||
axisLine: { lineStyle: { width: 18, color: [[1, '#e5e7eb']] } },
|
||
axisTick: { show: false },
|
||
splitLine: { show: false },
|
||
axisLabel: { show: false },
|
||
detail: {
|
||
fontSize: 28, fontFamily: 'Noto Sans SC', fontWeight: 700,
|
||
formatter: '{value}%', offsetCenter: [0, '-15%'], color: '#1a1a2e'
|
||
},
|
||
title: { fontSize: 13, offsetCenter: [0, '15%'], color: '#5a5a7a' },
|
||
data: [{ value: 73.5, name: '目标达成率' }]
|
||
}]
|
||
};
|
||
```
|
||
|
||
---
|
||
|
||
## Treemap 矩形树图
|
||
|
||
面积 = 数值大小。适合两层层级构成。
|
||
|
||
```javascript
|
||
const treemapOption = {
|
||
tooltip: {
|
||
formatter: p => {
|
||
const path = p.treePathInfo.map(n => n.name).filter(n => n).join(' > ');
|
||
return path + '<br/>金额: ' + formatCN(p.value);
|
||
}
|
||
},
|
||
series: [{
|
||
type: 'treemap',
|
||
roam: false,
|
||
width: '92%', height: '85%', top: '8%',
|
||
breadcrumb: { show: true, bottom: 0 },
|
||
label: { show: true, formatter: '{b}\n{c}亿', fontSize: 12, fontFamily: 'Noto Sans SC' },
|
||
upperLabel: { show: true, height: 24, fontSize: 12, fontWeight: 600, color: '#fff' },
|
||
levels: [
|
||
{ itemStyle: { borderColor: '#fff', borderWidth: 3, gapWidth: 3 }, upperLabel: { show: true } },
|
||
{ itemStyle: { borderColor: 'rgba(255,255,255,0.5)', borderWidth: 1, gapWidth: 1 }, colorSaturation: [0.3, 0.6] }
|
||
],
|
||
data: [
|
||
{
|
||
name: '增值服务', value: 3043,
|
||
children: [
|
||
{ name: '本土游戏', value: 1200, itemStyle: { color: '#1a365d' } },
|
||
{ name: '海外游戏', value: 643, itemStyle: { color: '#2563eb' } },
|
||
{ name: '社交网络', value: 1200, itemStyle: { color: '#3b82f6' } }
|
||
]
|
||
},
|
||
{
|
||
name: '金融科技', value: 2100,
|
||
children: [
|
||
{ name: '支付', value: 1100, itemStyle: { color: '#c5963a' } },
|
||
{ name: '云服务', value: 600, itemStyle: { color: '#d4a853' } },
|
||
{ name: '其他', value: 400, itemStyle: { color: '#e8c882' } }
|
||
]
|
||
},
|
||
{
|
||
name: '网络广告', value: 1240,
|
||
children: [
|
||
{ name: '社交广告', value: 740, itemStyle: { color: '#16a34a' } },
|
||
{ name: '媒体广告', value: 500, itemStyle: { color: '#22c55e' } }
|
||
]
|
||
}
|
||
]
|
||
}]
|
||
};
|
||
```
|
||
|
||
---
|
||
|
||
## 旭日图 Sunburst（多层级环形）
|
||
|
||
从内到外逐层细化。适合 3 层以上层级。
|
||
|
||
```javascript
|
||
const sunburstOption = {
|
||
tooltip: {
|
||
formatter: p => {
|
||
const path = p.treePathInfo.map(n => n.name).filter(n => n).join(' > ');
|
||
return path + '<br/>金额: ' + formatCN(p.value);
|
||
}
|
||
},
|
||
series: [{
|
||
type: 'sunburst',
|
||
radius: ['12%', '85%'],
|
||
sort: 'desc',
|
||
emphasis: { focus: 'ancestor' },
|
||
label: { fontSize: 10, fontFamily: 'Noto Sans SC', rotate: 'radial', minAngle: 10 },
|
||
levels: [
|
||
{},
|
||
{ r0: '12%', r: '40%', label: { fontSize: 12, fontWeight: 600 }, itemStyle: { borderWidth: 2, borderColor: '#fff' } },
|
||
{ r0: '40%', r: '65%', label: { fontSize: 10 }, itemStyle: { borderWidth: 1.5, borderColor: '#fff' } },
|
||
{ r0: '65%', r: '85%', label: { fontSize: 9, align: 'right' }, itemStyle: { borderWidth: 1, borderColor: 'rgba(255,255,255,0.6)' } }
|
||
],
|
||
data: [
|
||
{
|
||
name: '增值服务', itemStyle: { color: '#1a365d' },
|
||
children: [
|
||
{ name: '游戏', value: 1843, children: [
|
||
{ name: '王者荣耀', value: 500 }, { name: '和平精英', value: 350 },
|
||
{ name: 'LoL/Valorant', value: 400 }, { name: '其他', value: 593 }
|
||
]},
|
||
{ name: '社交网络', value: 1200, children: [
|
||
{ name: '会员订阅', value: 650 }, { name: '虚拟道具', value: 550 }
|
||
]}
|
||
]
|
||
},
|
||
{
|
||
name: '金融科技', itemStyle: { color: '#c5963a' },
|
||
children: [ { name: '支付', value: 1100 }, { name: '云服务', value: 600 }, { name: '其他', value: 400 } ]
|
||
},
|
||
{
|
||
name: '广告', itemStyle: { color: '#16a34a' },
|
||
children: [ { name: '社交广告', value: 740 }, { name: '媒体广告', value: 500 } ]
|
||
}
|
||
]
|
||
}]
|
||
};
|
||
```
|