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>
234 lines
8.0 KiB
Markdown
234 lines
8.0 KiB
Markdown
# Charts -- Flow (流向与特殊类型)
|
||
|
||
瀑布图、K 线、横向条形、漏斗图、桑基图。基础设施见 [charts-base.md](charts-base.md)。
|
||
|
||
---
|
||
|
||
## 瀑布图（加减拆解）
|
||
|
||
从总量逐步拆解到净值。正/负值不同颜色。
|
||
|
||
```javascript
|
||
const waterfallOption = {
|
||
tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
|
||
grid: { left: '10%', right: '5%', top: '10%', bottom: '12%' },
|
||
xAxis: { type: 'category', data: ['营业收入', '营业成本', '毛利', '销售费用', '管理费用', '财务费用', '营业利润'] },
|
||
yAxis: { type: 'value', axisLabel: { formatter: v => formatCN(v) } },
|
||
series: [
|
||
{
|
||
name: '辅助',
|
||
type: 'bar', stack: 'total',
|
||
itemStyle: { borderColor: 'transparent', color: 'transparent' },
|
||
data: [0, 0, 0, 0, 0, 0, 0] /* 计算后的偏移量 */
|
||
},
|
||
{
|
||
name: '数值',
|
||
type: 'bar', stack: 'total', barWidth: '40%',
|
||
label: { show: true, position: 'top', formatter: p => formatCN(p.value) },
|
||
data: [
|
||
{ value: 10000, itemStyle: { color: '#2563eb' } },
|
||
{ value: -6000, itemStyle: { color: '#dc2626' } },
|
||
{ value: 4000, itemStyle: { color: '#2563eb' } },
|
||
{ value: -800, itemStyle: { color: '#dc2626' } },
|
||
{ value: -600, itemStyle: { color: '#dc2626' } },
|
||
{ value: -200, itemStyle: { color: '#dc2626' } },
|
||
{ value: 2400, itemStyle: { color: '#16a34a' } }
|
||
]
|
||
}
|
||
]
|
||
};
|
||
```
|
||
|
||
**瀑布图辅助层计算逻辑：**
|
||
|
||
```javascript
|
||
// 自动计算 transparent 辅助柱的高度
|
||
function buildWaterfall(items) {
|
||
// items: [{ label, value, type: 'start'|'add'|'sub'|'total' }]
|
||
let running = 0;
|
||
const categories = [], assist = [], values = [];
|
||
items.forEach(item => {
|
||
categories.push(item.label);
|
||
if (item.type === 'start' || item.type === 'total') {
|
||
assist.push(0);
|
||
values.push({ value: item.value, itemStyle: { color: item.type === 'total' ? '#16a34a' : '#2563eb' } });
|
||
running = item.value;
|
||
} else {
|
||
const v = item.type === 'sub' ? -Math.abs(item.value) : Math.abs(item.value);
|
||
assist.push(Math.max(0, running + Math.min(0, v)));
|
||
values.push({ value: v, itemStyle: { color: v >= 0 ? '#2563eb' : '#dc2626' } });
|
||
running += v;
|
||
}
|
||
});
|
||
return { categories, assist, values };
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## K 线图（股价走势）
|
||
|
||
A 股惯例：红涨绿跌。
|
||
|
||
```javascript
|
||
const candlestickOption = {
|
||
tooltip: { trigger: 'axis' },
|
||
grid: { left: '10%', right: '5%', top: '10%', bottom: '15%' },
|
||
xAxis: { type: 'category', data: ['03-01', '03-04', '03-05', '03-06', '03-07', '03-08', '03-11', '03-12'] },
|
||
yAxis: { type: 'value', scale: true },
|
||
series: [{
|
||
type: 'candlestick',
|
||
itemStyle: {
|
||
color: '#dc2626', /* 阳线填充 */
|
||
color0: '#16a34a', /* 阴线填充 */
|
||
borderColor: '#dc2626',
|
||
borderColor0: '#16a34a'
|
||
},
|
||
data: [
|
||
/* [open, close, low, high] */
|
||
[540, 548, 536, 552],
|
||
[548, 545, 540, 550],
|
||
[545, 555, 543, 558],
|
||
[555, 550, 546, 556],
|
||
[550, 560, 548, 562],
|
||
[560, 558, 554, 563],
|
||
[558, 565, 555, 568],
|
||
[565, 550, 548, 566]
|
||
]
|
||
}]
|
||
};
|
||
```
|
||
|
||
K 线 + 成交量组合：
|
||
|
||
```javascript
|
||
const klineWithVolOption = {
|
||
tooltip: { trigger: 'axis' },
|
||
grid: [
|
||
{ left: '10%', right: '5%', top: '8%', height: '55%' }, /* K 线区域 */
|
||
{ left: '10%', right: '5%', top: '72%', height: '18%' } /* 成交量区域 */
|
||
],
|
||
xAxis: [
|
||
{ type: 'category', data: /* dates */, gridIndex: 0 },
|
||
{ type: 'category', data: /* dates */, gridIndex: 1 }
|
||
],
|
||
yAxis: [
|
||
{ type: 'value', scale: true, gridIndex: 0 },
|
||
{ type: 'value', gridIndex: 1, axisLabel: { formatter: v => formatCN(v) } }
|
||
],
|
||
series: [
|
||
{
|
||
type: 'candlestick',
|
||
xAxisIndex: 0, yAxisIndex: 0,
|
||
itemStyle: { color: '#dc2626', color0: '#16a34a', borderColor: '#dc2626', borderColor0: '#16a34a' },
|
||
data: /* [[open,close,low,high], ...] */
|
||
},
|
||
{
|
||
type: 'bar',
|
||
xAxisIndex: 1, yAxisIndex: 1,
|
||
barWidth: '60%',
|
||
data: /* volume array, with itemStyle per bar based on up/down */
|
||
}
|
||
]
|
||
};
|
||
```
|
||
|
||
---
|
||
|
||
## 横向条形图（排名 / Top N）
|
||
|
||
横向更易阅读长标签。inverse 从上到下递减。
|
||
|
||
```javascript
|
||
const horizontalBarOption = {
|
||
tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
|
||
grid: { left: '22%', right: '10%', top: '5%', bottom: '5%' },
|
||
xAxis: { type: 'value', axisLabel: { formatter: v => formatCN(v) } },
|
||
yAxis: {
|
||
type: 'category',
|
||
inverse: true,
|
||
data: ['腾讯', 'Sony', '微软', '任天堂', 'EA', '动视暴雪'],
|
||
axisLabel: { fontSize: 12 }
|
||
},
|
||
series: [{
|
||
type: 'bar',
|
||
barWidth: '55%',
|
||
data: [
|
||
{ value: 1843, itemStyle: { color: '#1a365d' } },
|
||
{ value: 1250, itemStyle: { color: '#93c5fd' } },
|
||
{ value: 1180, itemStyle: { color: '#93c5fd' } },
|
||
{ value: 920, itemStyle: { color: '#93c5fd' } },
|
||
{ value: 580, itemStyle: { color: '#93c5fd' } },
|
||
{ value: 520, itemStyle: { color: '#93c5fd' } }
|
||
],
|
||
label: { show: true, position: 'right', formatter: p => formatCN(p.value), fontSize: 11 },
|
||
itemStyle: { borderRadius: [0, 3, 3, 0] }
|
||
}]
|
||
};
|
||
```
|
||
|
||
---
|
||
|
||
## 漏斗图（转化/筛选流程）
|
||
|
||
逐步递减的转化过程。
|
||
|
||
```javascript
|
||
const funnelOption = {
|
||
tooltip: { trigger: 'item', formatter: '{b}: {c} ({d}%)' },
|
||
series: [{
|
||
type: 'funnel',
|
||
left: '15%', right: '15%', top: '8%', bottom: '8%',
|
||
width: '70%',
|
||
minSize: '15%', maxSize: '100%',
|
||
sort: 'descending',
|
||
gap: 4,
|
||
label: { show: true, position: 'inside', formatter: '{b}\n{c}', fontSize: 12, fontFamily: 'Noto Sans SC' },
|
||
itemStyle: { borderWidth: 0 },
|
||
data: [
|
||
{ value: 5000, name: '初筛股票池', itemStyle: { color: '#93c5fd' } },
|
||
{ value: 2800, name: '基本面过滤', itemStyle: { color: '#60a5fa' } },
|
||
{ value: 1200, name: '估值合理', itemStyle: { color: '#3b82f6' } },
|
||
{ value: 450, name: '技术面确认', itemStyle: { color: '#2563eb' } },
|
||
{ value: 120, name: '最终标的', itemStyle: { color: '#1a365d' } }
|
||
]
|
||
}]
|
||
};
|
||
```
|
||
|
||
---
|
||
|
||
## 桑基图 Sankey（价值流向）
|
||
|
||
从来源到去向的流转关系。
|
||
|
||
```javascript
|
||
const sankeyOption = {
|
||
tooltip: { trigger: 'item', formatter: '{b}: {c}亿' },
|
||
series: [{
|
||
type: 'sankey',
|
||
layout: 'none',
|
||
top: '5%', bottom: '5%', left: '5%', right: '15%',
|
||
nodeWidth: 20,
|
||
nodeGap: 12,
|
||
label: { fontSize: 11, fontFamily: 'Noto Sans SC' },
|
||
lineStyle: { color: 'gradient', curveness: 0.5, opacity: 0.4 },
|
||
emphasis: { lineStyle: { opacity: 0.7 } },
|
||
data: [
|
||
{ name: '游戏' }, { name: '社交' }, { name: '广告' }, { name: '金融科技' },
|
||
{ name: '营业收入' }, { name: '营业成本' }, { name: '毛利' }, { name: '费用' }, { name: '净利润' }
|
||
],
|
||
links: [
|
||
{ source: '游戏', target: '营业收入', value: 1843 },
|
||
{ source: '社交', target: '营业收入', value: 1200 },
|
||
{ source: '广告', target: '营业收入', value: 1240 },
|
||
{ source: '金融科技', target: '营业收入', value: 2100 },
|
||
{ source: '营业收入', target: '营业成本', value: 3073 },
|
||
{ source: '营业收入', target: '毛利', value: 3536 },
|
||
{ source: '毛利', target: '费用', value: 1515 },
|
||
{ source: '毛利', target: '净利润', value: 2021 }
|
||
]
|
||
}]
|
||
};
|
||
```
|