feat: 构建泡泡玛特相关图表
This commit is contained in:
Joey
+18
@@ -0,0 +1,18 @@
|
||||
.venv/
|
||||
.env
|
||||
**/__pycache__/
|
||||
*.pyc
|
||||
.DS_Store
|
||||
|
||||
# V2 运行时数据（SQLite + 本地媒体）
|
||||
data/
|
||||
|
||||
# 反编译参考资料（约 40 个 bundle），设计结论已写入 docs/extension/plan.md §2
|
||||
reference/
|
||||
|
||||
# Node（extension / studio / packages）
|
||||
node_modules/
|
||||
dist/
|
||||
.output/
|
||||
.wxt/
|
||||
.pnpm-store/
|
||||
@@ -0,0 +1,90 @@
|
||||
# 图表开发约定
|
||||
|
||||
## 新建图表时
|
||||
|
||||
必须从 `theme.js` 取共享配置，不要手写等价的值：
|
||||
|
||||
```js
|
||||
import {
|
||||
PALETTE, FONT, axisCommon, periodAxis, titleStyle,
|
||||
lineSeries, barSeries, standardLegend, footnote, watermarks, LAYOUT,
|
||||
} from '../theme.js';
|
||||
```
|
||||
|
||||
- 折线用 `lineSeries()`，柱状用 `barSeries()` —— 空心圆点、标签强显等细节已内置
|
||||
- 图例用 `standardLegend(names)`，间距用 `LAYOUT.legendTop` / `LAYOUT.gridTop`
|
||||
- 期间轴用 `periodAxis`（自带 `2026H1 → 26H1`、`2026H2 → 26全年` 简写）
|
||||
|
||||
## 测试
|
||||
|
||||
**每次只测本次改动的图表，不要跑全量。** 这是硬要求，不是建议：
|
||||
|
||||
```bash
|
||||
node test/regress.mjs ppmt_ip_share # 改了一张，就只测这一张
|
||||
node test/regress.mjs ppmt_ip_share ppmt_core_margin # 改了多张，列出来
|
||||
npm test # 全量，只在改了 theme.js / csv.js 等公共模块时才跑
|
||||
```
|
||||
|
||||
全量跑纯属浪费，而且十几张无关图表的输出会盖住本次改动的真实问题。不传参数时才是全量，所以 `npm test` 保持向后兼容。
|
||||
|
||||
它会断言 `legend.top`、`grid.top`、折线 `symbolSize`/`borderWidth`，并检查 SVG 字体引号。加新图记得同步往 `regress.mjs` 顶部的 `all` 数组加一行，否则不会被测到。
|
||||
|
||||
**右侧纵向图例的图会报 `legend.top=middle (期望85)`，这是预期的，不要去"修"。** 那条断言的 85px 基准是给顶部横向图例定的，对 `orient: 'vertical'` + `top: 'middle'` 的图不适用（`ppmt_ip_share`、`ppmt_ip_share_history` 都会报）。
|
||||
|
||||
## 踩过的坑
|
||||
|
||||
**不要用 `...legendStyle`。** 它遗留 `top: 62` 且曾带 `icon: 'roundRect'`——后者会盖掉 ECharts 按系列类型自动生成的图例（折线本该是「短线+空心圆」）。用 `standardLegend()`。
|
||||
|
||||
**`label.position` 不接受函数。** 写了会被静默忽略、退化成默认位置，实测确认过。要让同一系列内不同点朝向不同，只能逐点覆盖 `data`：`{ value, label: { position: 'top' } }`。
|
||||
|
||||
**字体名用单引号。** `FONT` 里若用双引号，SVG 渲染时会提前闭合 `style="..."` 属性生成非法 SVG。canvas 看不出来，导出 SVG 才炸。
|
||||
|
||||
**多折线标签避让：按「朝间隙大的一侧」放，不要按排名奇偶交替。** 奇偶交替会让排名相邻的两条线一个朝下一个朝上、相向靠拢，值接近时标签间距被压到小于字高，然后被 `hideOverlap` 丢弃（表现是「某个数看不到」）。正确做法见 `ppmt_margins.js` 的 `labeledData()`：比较上下间隙取大者，最高值必朝上、最低值必朝下。
|
||||
|
||||
**矮柱子的标签会被自动隐藏。** 数据跨度大时（如 1.9 ~ 169.1），矮柱标签比柱子还高就不渲染了。`barSeries()` 已设 `label.overflow: 'none'` 兜住；手写柱状系列时记得加。
|
||||
|
||||
## 数据口径
|
||||
|
||||
**数值默认保留一位小数。** CSV 数据列与图表展示（柱/点标签、tooltip）统一保留一位小数（如 `71.1`、`311.4%`），四舍五入；确实需要其他精度时必须在 `footnote()` 或代码注释里说明原因。
|
||||
|
||||
**CSV 存四位年份**（`2026H1`），简写只在显示层做。核对数据时无歧义。
|
||||
|
||||
**利润表的 `H2` 列是全年累计，不是下半年。** 已核对：2025H2 营收 371.2 = 2025H1 的 138.76 + 单半年 232.44。所以 `26全年` 这类标签指累计值。
|
||||
|
||||
**但「IP收入和占比」表的 `H2` 是单半年，不是累计。** 同一个 workbook 里两种口径，别想当然。已核对：该表 2025H2 合计 232.44 = 利润表 371.2 − 138.76，五年逐年都吻合。**所以这张表的图不能用 `periodAxis`**——它会把 `2025H2` 渲染成「25全年」，是错的。改用 `categoryAxis` + 只去世纪前缀的 formatter（`v.replace(/^20/, '')` → `25H2`），见 `ppmt_ip_share_history.js`。新建图表前先确认数据源用的是哪种口径。
|
||||
|
||||
**衍生指标标注来源。** 非 GAAP 净利率是 `非GAAP净利 ÷ 营业收入` 算出来的，表里没这行；2020H1/H2 非 GAAP 缺失，用归母净利替代。这类替代必须写进 `footnote()`。
|
||||
|
||||
**桥图/瀑布图要验算闭合。** 各项占营收比是税前口径，加总到净利率前须乘税盾 `(1 - 有效税率)`；税率变化单独成项。恒等式 `净利率 = 税前利润率 × (1-税率)`，分解为 `Δ净 = Δ税前×(1-t₁) − 税前₂×Δt`。改完核对首尾误差应 < 0.05pct。
|
||||
|
||||
## 配色
|
||||
|
||||
先分清两件事，别混用同一个门槛。**选色的功夫要和系列数成正比**——两个系列的图不该选半天。
|
||||
|
||||
**① 同一张图内的系列要能互相区分。** 这条永远要满足，是可读性问题：
|
||||
|
||||
- ≤ 4 个系列：手挑，凭常识就够，**不用跑 ΔE**
|
||||
- 5~9 个系列：手挑后验算一次，两两 > 25
|
||||
- ≥ 10 个系列：ΔE 到 ~24 就收手，硬凑 > 25 会把颜色逼得很丑（见 `ppmt_ip_share.js` 的 11 色谱）
|
||||
|
||||
**② 跨图撞色只在「同类编码 + 位置紧邻」时才查。** 目的是防止读者把两张图的系列对应起来，所以：
|
||||
|
||||
- 折线图 vs 紧邻的折线图、或两图共用同一套分类色谱 → 要查
|
||||
- 柱+线双轴图 vs 饼图 → **不用查**，编码类型本身就区分开了
|
||||
- 隔着好几张、主题无关的图 → 不用查
|
||||
|
||||
**不要拿整页累积的所有颜色当避让集合。** 这是个只会越来越紧的棘轮：每加一张图就多几个色要避让。实测过，对整页 26 色都要求 ΔE > 25，可行域只剩 18%（只对紧邻图要求则有 39%）；而且**现有配色自己就有 13 对不达标**——`星星人`/`orange` ΔE 6.5、`DIMOO`/`green` 7.5、`MONSTERS`/`red` 10.4、`blue`/`navy` 14.4。拿一条自己都没遵守的规则去卡新图，结果就是在两个系列的图上白耗三轮验算。
|
||||
|
||||
**不要用贪心/模拟退火/随机搜索去"解"配色。** 太耗时，且算出来的色往往不好看（机器只顾拉开距离，不管协调）。手写一条色相谱再验算：
|
||||
|
||||
1. 按色相环顺序挑（如 红→橙→金→橄榄→翡翠→青→蓝→紫），残差项（"其他"/"外采"）用中性灰
|
||||
2. 同色系连续多项靠**明暗交替**拉开（深蓝 → 浅蓝紫 → 紫 → 浅兰紫），不然挤在一起分不清
|
||||
3. 只对不达标的几项微调，一两轮收手
|
||||
|
||||
`ppmt_margins.js` 顶部记着当初选深青/芥黄/茄紫/玫红的过程。注意那张图是「4 条折线 + 同页有别的折线图」，正属于 ② 要查的情形；别把它的严格度套到所有图上。它当年淘汰 `slate`/`cyan`/`indigo` 的理由是「离 `blue`/`navy` 仅 ΔE 17~19」，可 `blue` 和 `navy` 自己才差 14.4——这个先例本身就偏严，别照抄。
|
||||
|
||||
## 脚注
|
||||
|
||||
`footnote()` 单行约 60 字符封顶（1200px 画布），超了用 `\n` 手动断行。结尾统一 `| @思考的Joey`。
|
||||
|
||||
水印文案在 `theme.js` 的 `WATERMARK_TEXT`，改一处全局生效。
|
||||
@@ -0,0 +1,164 @@
|
||||
# 财报图表 · Joey 谨制
|
||||
|
||||
基于 **ECharts 5.5** 的财报数据可视化项目，模仿"方木博制"风格。
|
||||
|
||||
修改 CSV 数据，刷新页面即可更新图表；每张图表都可独立导出为高清 PNG。
|
||||
|
||||
---
|
||||
|
||||
## 快速开始
|
||||
|
||||
### 1. 启动本地服务器
|
||||
|
||||
```bash
|
||||
# 方案 A：Python 3（Mac/Linux 自带）
|
||||
python3 -m http.server 8899
|
||||
|
||||
# 方案 B：Node.js（需要先安装 Node）
|
||||
npx http-server -p 8899
|
||||
|
||||
# 方案 C：PHP（Mac 自带）
|
||||
php -S localhost:8899
|
||||
```
|
||||
|
||||
### 2. 打开浏览器
|
||||
|
||||
访问 **http://localhost:8899**，会看到 5 张示例图表和 11 张泡泡玛特财报图表：
|
||||
|
||||
**示例图表：**
|
||||
1. **存货、营收与存货周转天数** — 双柱 + 折线，双 Y 轴
|
||||
2. **利润率与费用率拆解** — 四条率线对比
|
||||
3. **毛利率与非国际净利率** — 两条主要率线
|
||||
4. **营收到利润的增速对比** — 四条增速线
|
||||
5. **人民币汇率两种口径** — 中间价 vs 在岸即期，带说明卡片
|
||||
|
||||
**泡泡玛特财报分析：**
|
||||
6. **资产结构演变** — 堆叠柱状图展示类现金、应收账款、投资、经营资产
|
||||
7. **盈利能力分析** — 营收、毛利、净利润及毛利率变化
|
||||
8. **主要 IP 收入趋势** — 多条折线展示 MOLLY、SKULLPANDA、CRYBABY 等 IP 表现
|
||||
9. **品类收入结构** — 毛绒、手办、MEGA、衍生品的占比和增长
|
||||
10. **利润流向（2026H1）** — 桑基图，营收拆到成本、费用、净利
|
||||
11. **区域渠道同比增速** — 分区域 × 渠道的增速对比
|
||||
12. **营收到利润的增速对比** — 泡泡玛特口径
|
||||
13. **利润率与费用率拆解** — 毛利率、销售/管理费用率、非 GAAP 净利率
|
||||
14. **净利率同比拆解** — 瀑布图，含税盾换算与税率单列项
|
||||
15. **核心利润及同比增速** — 柱 + 折线
|
||||
16. **核心利润率** — 毛利率 − 销售费用率 − 管理费用率
|
||||
17. **主要 IP 收入占比（2026H1）** — 饼图，右侧图例带收入与占比
|
||||
18. **各 IP 半年收入占比（21H1-26H1）** — 归一化堆叠柱状图，看收入结构变迁
|
||||
19. **除 THE MONSTERS 外的 IP 收入及同比** — 柱 + 折线双轴，剔掉爆款看其余盘子
|
||||
|
||||
### 3. 修改数据
|
||||
|
||||
编辑 `data/*.csv`，保存后点击页面右上角的 **「重新加载数据」** 按钮。
|
||||
|
||||
CSV 格式：首行是表头，逗号分隔，数字列会自动转换。示例：
|
||||
|
||||
```csv
|
||||
period,inventory,revenue,turnover_days
|
||||
22H1,9.6,23.6,160
|
||||
22年,8.7,46.2,154
|
||||
```
|
||||
|
||||
### 4. 导出图表
|
||||
|
||||
每张图表右上角都有 **「导出 PNG」** 按钮，点击即可下载 2 倍分辨率的图片（适合微信公众号等场景）。
|
||||
|
||||
---
|
||||
|
||||
## 项目结构
|
||||
|
||||
```
|
||||
echart-demo/
|
||||
├── index.html # 主页面
|
||||
├── data/ # 数据文件
|
||||
│ ├── inventory.csv # 图 1-5：示例数据
|
||||
│ ├── margin.csv
|
||||
│ ├── growth.csv
|
||||
│ ├── fx.csv
|
||||
│ ├── ppmt.xlsx # 泡泡玛特原始财报
|
||||
│ └── ppmt_*.csv # 图 6-16：从 xlsx 提取的各口径数据
|
||||
├── js/
|
||||
│ ├── main.js # 入口：CHARTS 清单、渲染、导出 PNG
|
||||
│ ├── csv.js # CSV 解析工具
|
||||
│ ├── theme.js # 主题：配色、字体、水印、共享系列构造器
|
||||
│ └── charts/ # 一图一文件，共 16 张
|
||||
├── test/
|
||||
│ └── regress.mjs # 回归测试：SSR 渲染 16 张图 + 样式规范断言
|
||||
└── css/
|
||||
└── style.css # 页面样式
|
||||
```
|
||||
|
||||
## 测试
|
||||
|
||||
```bash
|
||||
npm test
|
||||
```
|
||||
|
||||
用 ECharts 的 SSR 模式把 16 张图渲染成 SVG，断言：
|
||||
|
||||
- `legend.top` = 85、`grid.top` = 145（统一间距）
|
||||
- 折线 `symbolSize` = 9、`borderWidth` = 2.5（空心圆点规范）
|
||||
- SVG 属性未被字体名里的引号提前闭合
|
||||
|
||||
加新图后往 `regress.mjs` 顶部的 `all` 数组加一行，否则不会被测到。
|
||||
|
||||
---
|
||||
|
||||
## 设计原则
|
||||
|
||||
### 统一的视觉语言
|
||||
|
||||
所有图表共用 `js/theme.js` 的配色、字体、坐标轴样式，确保视觉一致性：
|
||||
|
||||
- **配色**：低饱和莫兰迪系（棕色、沙色、珊瑚红、海军蓝等）
|
||||
- **字体**：苹方 / 微软雅黑，中文友好
|
||||
- **坐标轴**：只留浅灰网格线，去掉轴线的存在感
|
||||
- **水印**：全画布平铺"Joey 谨制"，旋转 20°，透明度 0.10
|
||||
|
||||
### 数据标签全标注
|
||||
|
||||
每个数据点都显示标签，避免读者"猜数值"。密集时上下交错放置（见图 2），不用 hover tooltip 替代。
|
||||
|
||||
### 底部注释
|
||||
|
||||
重要的计算口径、数据来源写在图表底部（用 `graphic.text`），不依赖外部文档。
|
||||
|
||||
---
|
||||
|
||||
## 常见问题
|
||||
|
||||
**Q：为什么必须用本地服务器，不能直接双击 `index.html`？**
|
||||
A：浏览器的同源策略禁止 `file://` 协议读取 CSV，会报 CORS 错误。启动服务器后用 `http://` 访问即可。
|
||||
|
||||
**Q：修改 CSV 后刷新页面，图表没变化？**
|
||||
A：点击页面右上角的 **「重新加载数据」** 按钮。普通刷新可能吃到浏览器缓存，按钮会加时间戳绕过缓存。
|
||||
|
||||
**Q：如何添加新图表？**
|
||||
A：
|
||||
1. 在 `data/` 下创建新 CSV
|
||||
2. 在 `js/charts/` 下创建新 `.js`，从 `theme.js` 取共享配置（`lineSeries()`、`barSeries()`、`standardLegend()`、`periodAxis`），不要手写等价值
|
||||
3. 在 `js/main.js` 的 `CHARTS` 数组里加一行
|
||||
4. 在 `index.html` 加一个 `<div class="card">` 容器
|
||||
5. 在 `test/regress.mjs` 的 `all` 数组里加一行，然后跑 `npm test`
|
||||
|
||||
**Q：能改水印文字吗？**
|
||||
A：编辑 `js/theme.js` 的 `WATERMARK_TEXT` 常量。
|
||||
|
||||
**Q：能改配色吗？**
|
||||
A：编辑 `js/theme.js` 的 `PALETTE` 对象，所有图表自动同步。
|
||||
|
||||
---
|
||||
|
||||
## 技术细节
|
||||
|
||||
- **ECharts 5.5.1**：从 jsDelivr CDN 加载，无需 npm install
|
||||
- **ES6 Modules**：用原生 `<script type="module">`，无构建步骤
|
||||
- **Canvas 渲染**：页面用 canvas（性能好），导出时用 ECharts 自带的 `getDataURL` 生成 PNG
|
||||
- **响应式**：window resize 时重绘（水印数量跟着画布尺寸变化）
|
||||
|
||||
---
|
||||
|
||||
## 许可
|
||||
|
||||
本项目代码采用 MIT 协议，数据仅供示例。
|
||||
+101
@@ -0,0 +1,101 @@
|
||||
:root {
|
||||
--ink: #333;
|
||||
--grey: #8c8c8c;
|
||||
--line: #e8e8e8;
|
||||
--bg: #f5f4f1;
|
||||
--accent: #6b4a2b;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 32px 24px 64px;
|
||||
background: var(--bg);
|
||||
color: var(--ink);
|
||||
font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
|
||||
}
|
||||
|
||||
header {
|
||||
max-width: 1180px;
|
||||
margin: 0 auto 28px;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
margin: 0;
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
header p {
|
||||
margin: 0;
|
||||
color: var(--grey);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
button {
|
||||
font-family: inherit;
|
||||
font-size: 13px;
|
||||
padding: 6px 14px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 6px;
|
||||
background: #fff;
|
||||
color: var(--ink);
|
||||
cursor: pointer;
|
||||
transition: border-color .15s, color .15s;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
border-color: var(--accent);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
#btn-reload {
|
||||
margin-left: auto;
|
||||
background: var(--accent);
|
||||
color: #fff;
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
#btn-reload:hover {
|
||||
opacity: .88;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.card {
|
||||
max-width: 1180px;
|
||||
margin: 0 auto 28px;
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 10px 16px;
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.card-bar .src {
|
||||
font-size: 12px;
|
||||
color: var(--grey);
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
||||
}
|
||||
|
||||
.card-bar button { margin-left: auto; }
|
||||
|
||||
.chart { width: 100%; }
|
||||
|
||||
.chart-error {
|
||||
padding: 40px;
|
||||
color: #c0392b;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
}
|
||||
+179
@@ -0,0 +1,179 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>财报图表 · Joey 谨制</title>
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<script src="https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<h1>财报图表</h1>
|
||||
<p>改 <code>data/*.csv</code> 后点「重新加载」即可更新</p>
|
||||
<button id="btn-reload">重新加载数据</button>
|
||||
</header>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-bar">
|
||||
<span class="src">data/inventory.csv</span>
|
||||
<button data-export="chart-inventory" data-filename="存货与周转天数">导出 PNG</button>
|
||||
</div>
|
||||
<div class="chart" id="chart-inventory" style="height:620px"></div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-bar">
|
||||
<span class="src">data/margin.csv</span>
|
||||
<button data-export="chart-margin" data-filename="利润率与费用率拆解">导出 PNG</button>
|
||||
</div>
|
||||
<div class="chart" id="chart-margin" style="height:620px"></div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-bar">
|
||||
<span class="src">data/margin.csv（毛利率 + 净利率两列）</span>
|
||||
<button data-export="chart-twoline" data-filename="毛利率与非国际净利率">导出 PNG</button>
|
||||
</div>
|
||||
<div class="chart" id="chart-twoline" style="height:620px"></div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-bar">
|
||||
<span class="src">data/growth.csv</span>
|
||||
<button data-export="chart-growth" data-filename="营收到利润的增速对比">导出 PNG</button>
|
||||
</div>
|
||||
<div class="chart" id="chart-growth" style="height:700px"></div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-bar">
|
||||
<span class="src">data/fx.csv</span>
|
||||
<button data-export="chart-fx" data-filename="人民币汇率两种口径">导出 PNG</button>
|
||||
</div>
|
||||
<div class="chart" id="chart-fx" style="height:780px"></div>
|
||||
</div>
|
||||
|
||||
<hr style="margin: 48px auto; max-width: 1180px; border: none; border-top: 2px solid #e0ddd5;">
|
||||
|
||||
<header style="margin-top: 32px;">
|
||||
<h1>📊 泡泡玛特财报分析</h1>
|
||||
<p>基于 <code>data/ppmt.xlsx</code> 自动生成</p>
|
||||
</header>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-bar">
|
||||
<span class="src">data/ppmt_assets.csv</span>
|
||||
<button data-export="chart-ppmt-assets" data-filename="泡泡玛特资产结构">导出 PNG</button>
|
||||
</div>
|
||||
<div class="chart" id="chart-ppmt-assets" style="height:680px"></div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-bar">
|
||||
<span class="src">data/ppmt_profit.csv</span>
|
||||
<button data-export="chart-ppmt-profit" data-filename="泡泡玛特盈利能力">导出 PNG</button>
|
||||
</div>
|
||||
<div class="chart" id="chart-ppmt-profit" style="height:680px"></div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-bar">
|
||||
<span class="src">data/ppmt_ip.csv</span>
|
||||
<button data-export="chart-ppmt-ip" data-filename="泡泡玛特IP收入趋势">导出 PNG</button>
|
||||
</div>
|
||||
<div class="chart" id="chart-ppmt-ip" style="height:720px"></div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-bar">
|
||||
<span class="src">data/ppmt_category.csv</span>
|
||||
<button data-export="chart-ppmt-category" data-filename="泡泡玛特品类结构">导出 PNG</button>
|
||||
</div>
|
||||
<div class="chart" id="chart-ppmt-category" style="height:680px"></div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-bar">
|
||||
<span class="src">data/ppmt_sankey_2026h1.csv</span>
|
||||
<button data-export="chart-ppmt-sankey" data-filename="泡泡玛特利润流向2026H1">导出 PNG</button>
|
||||
</div>
|
||||
<div class="chart" id="chart-ppmt-sankey" style="height:800px"></div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-bar">
|
||||
<span class="src">data/ppmt_region_channel_yoy.csv</span>
|
||||
<button data-export="chart-ppmt-region-yoy" data-filename="泡泡玛特区域渠道同比增速">导出 PNG</button>
|
||||
</div>
|
||||
<div class="chart" id="chart-ppmt-region-yoy" style="height:620px"></div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-bar">
|
||||
<span class="src">data/ppmt_growth.csv</span>
|
||||
<button data-export="chart-ppmt-growth" data-filename="泡泡玛特营收到利润增速对比">导出 PNG</button>
|
||||
</div>
|
||||
<div class="chart" id="chart-ppmt-growth" style="height:700px"></div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-bar">
|
||||
<span class="src">data/ppmt_margins.csv</span>
|
||||
<button data-export="chart-ppmt-margins" data-filename="泡泡玛特利润率与费用率拆解">导出 PNG</button>
|
||||
</div>
|
||||
<div class="chart" id="chart-ppmt-margins" style="height:680px"></div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-bar">
|
||||
<span class="src">data/ppmt_margin_bridge.csv</span>
|
||||
<button data-export="chart-ppmt-bridge" data-filename="泡泡玛特净利率同比拆解">导出 PNG</button>
|
||||
</div>
|
||||
<div class="chart" id="chart-ppmt-bridge" style="height:700px"></div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-bar">
|
||||
<span class="src">data/ppmt_core_profit.csv</span>
|
||||
<button data-export="chart-ppmt-core" data-filename="泡泡玛特核心利润及同比增速">导出 PNG</button>
|
||||
</div>
|
||||
<div class="chart" id="chart-ppmt-core" style="height:720px"></div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-bar">
|
||||
<span class="src">data/ppmt_core_margin.csv</span>
|
||||
<button data-export="chart-ppmt-core-margin" data-filename="泡泡玛特核心利润率">导出 PNG</button>
|
||||
</div>
|
||||
<div class="chart" id="chart-ppmt-core-margin" style="height:680px"></div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-bar">
|
||||
<span class="src">data/ppmt_ip_share_2026h1.csv</span>
|
||||
<button data-export="chart-ppmt-ip-share" data-filename="泡泡玛特IP收入占比2026H1">导出 PNG</button>
|
||||
</div>
|
||||
<div class="chart" id="chart-ppmt-ip-share" style="height:720px"></div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-bar">
|
||||
<span class="src">data/ppmt_ip_share_history.csv</span>
|
||||
<button data-export="chart-ppmt-ip-share-history" data-filename="泡泡玛特各IP半年收入占比">导出 PNG</button>
|
||||
</div>
|
||||
<div class="chart" id="chart-ppmt-ip-share-history" style="height:700px"></div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-bar">
|
||||
<span class="src">data/ppmt_ip_ex_monsters.csv</span>
|
||||
<button data-export="chart-ppmt-ip-ex-monsters" data-filename="泡泡玛特除MONSTERS外IP收入及同比">导出 PNG</button>
|
||||
</div>
|
||||
<div class="chart" id="chart-ppmt-ip-ex-monsters" style="height:700px"></div>
|
||||
</div>
|
||||
|
||||
<script type="module" src="js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
+187
@@ -0,0 +1,187 @@
|
||||
import {
|
||||
PALETTE, FONT, axisCommon, categoryAxis, titleStyle,
|
||||
lineSeries, footnote, watermarks,
|
||||
} from '../theme.js';
|
||||
|
||||
/** 圆角卡片：ECharts 的 graphic.group + rect + 多段文字 */
|
||||
function infoCard({ left, top, width, title, lines, fill, stroke, titleColor }) {
|
||||
const children = [
|
||||
{
|
||||
type: 'rect',
|
||||
shape: { x: 0, y: 0, width, height: 108, r: 8 },
|
||||
style: { fill, stroke, lineWidth: 1 },
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
style: {
|
||||
x: 20, y: 20,
|
||||
text: title,
|
||||
fill: titleColor,
|
||||
fontSize: 15,
|
||||
fontWeight: 'bold',
|
||||
fontFamily: FONT,
|
||||
},
|
||||
},
|
||||
];
|
||||
lines.forEach((line, i) => {
|
||||
children.push({
|
||||
type: 'text',
|
||||
style: {
|
||||
x: 20, y: 52 + i * 22,
|
||||
text: line,
|
||||
fill: '#555',
|
||||
fontSize: 12.5,
|
||||
fontFamily: FONT,
|
||||
},
|
||||
});
|
||||
});
|
||||
return { type: 'group', left, top, silent: true, children };
|
||||
}
|
||||
|
||||
/**
|
||||
* 图 5：人民币兑美元两种口径对比
|
||||
* 只有两个时间点，重点在文字说明和端点标注，不在曲线本身
|
||||
*/
|
||||
export function fxChart(rows, { width, height }) {
|
||||
const stages = rows.map((r) => r.stage);
|
||||
const mid = rows.map((r) => r.mid_price);
|
||||
const spot = rows.map((r) => r.onshore_spot);
|
||||
|
||||
// label.position 不接受函数（写函数会被静默忽略，退化成默认位置），
|
||||
// 想让首尾点位置不同只能逐点覆盖：起点标在上方，末点标在右侧
|
||||
const endpointLabels = (values) =>
|
||||
values.map((v, i) => ({
|
||||
value: v,
|
||||
label: { position: i === values.length - 1 ? 'right' : 'top' },
|
||||
}));
|
||||
|
||||
// 偏离点数 = （中间价 - 即期）× 10000
|
||||
const gapStart = Math.round((mid[0] - spot[0]) * 10000);
|
||||
const gapEnd = Math.round((mid[1] - spot[1]) * 10000);
|
||||
const midGain = Math.round((mid[0] - mid[1]) * 10000);
|
||||
const spotGain = Math.round((spot[0] - spot[1]) * 10000);
|
||||
const midPct = (((mid[0] - mid[1]) / mid[0]) * 100).toFixed(1);
|
||||
const spotPct = (((spot[0] - spot[1]) / spot[0]) * 100).toFixed(1);
|
||||
|
||||
const cardWidth = 340;
|
||||
const cardTop = 132;
|
||||
|
||||
return {
|
||||
backgroundColor: '#fff',
|
||||
title: {
|
||||
...titleStyle,
|
||||
text: '人民币兑美元的两种「升值」口径：中间价 vs 在岸即期',
|
||||
subtext: '口径区别在「谁定的价」：中间价是央行每日公布的锚，即期是市场在锚附近交易出来的成交价',
|
||||
top: 20,
|
||||
},
|
||||
grid: { left: 96, right: 110, top: 340, bottom: 88 },
|
||||
tooltip: { trigger: 'axis', textStyle: { fontFamily: FONT } },
|
||||
xAxis: {
|
||||
...categoryAxis,
|
||||
boundaryGap: ['12%', '12%'],
|
||||
data: stages,
|
||||
},
|
||||
yAxis: {
|
||||
...axisCommon,
|
||||
type: 'value',
|
||||
name: 'USDCNY（数值越小＝人民币越强）',
|
||||
nameLocation: 'middle',
|
||||
nameGap: 62,
|
||||
nameTextStyle: { color: PALETTE.grey, fontSize: 13, fontFamily: FONT },
|
||||
min: 6.75,
|
||||
max: 7.05,
|
||||
interval: 0.1,
|
||||
axisLabel: {
|
||||
...axisCommon.axisLabel,
|
||||
formatter: (v) => v.toFixed(2),
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
...lineSeries({
|
||||
name: '中间价',
|
||||
data: mid,
|
||||
color: '#3b6ea5',
|
||||
formatter: (p) => p.value.toFixed(4),
|
||||
}),
|
||||
data: endpointLabels(mid),
|
||||
symbolSize: 11,
|
||||
itemStyle: { color: '#3b6ea5' },
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: 15,
|
||||
fontWeight: 'bold',
|
||||
color: '#3b6ea5',
|
||||
fontFamily: FONT,
|
||||
distance: 10,
|
||||
formatter: (p) => p.value.toFixed(4),
|
||||
},
|
||||
},
|
||||
{
|
||||
...lineSeries({
|
||||
name: '在岸即期',
|
||||
data: spot,
|
||||
color: PALETTE.coral,
|
||||
formatter: (p) => p.value.toFixed(4),
|
||||
}),
|
||||
data: endpointLabels(spot),
|
||||
symbolSize: 11,
|
||||
itemStyle: { color: PALETTE.coral },
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: 15,
|
||||
fontWeight: 'bold',
|
||||
color: PALETTE.coral,
|
||||
fontFamily: FONT,
|
||||
distance: 10,
|
||||
formatter: (p) => p.value.toFixed(4),
|
||||
},
|
||||
},
|
||||
],
|
||||
graphic: [
|
||||
...watermarks(width, height),
|
||||
|
||||
infoCard({
|
||||
left: 88, top: cardTop, width: cardWidth,
|
||||
title: '中间价（央行公布的「锚」）',
|
||||
lines: [
|
||||
'每交易日 9:15 由央行公布：做市商报价',
|
||||
'加权＋逆周期因子，是当日波动中心与政策信号',
|
||||
],
|
||||
fill: '#eef4fa', stroke: '#c7dcf0', titleColor: '#2f5f8f',
|
||||
}),
|
||||
infoCard({
|
||||
left: 88 + cardWidth + 24, top: cardTop, width: cardWidth,
|
||||
title: '在岸即期（市场成交价）',
|
||||
lines: [
|
||||
'银行间外汇市场实时成交形成，16:30 收盘价',
|
||||
'最常被引用；每日只能在中间价 ±2% 区间内波动',
|
||||
],
|
||||
fill: '#fdf1ed', stroke: '#f5d3c8', titleColor: '#c05a45',
|
||||
}),
|
||||
|
||||
// 图例改成两行文字说明，信息量比色块图例大
|
||||
{
|
||||
type: 'text',
|
||||
left: 108, top: 272, silent: true,
|
||||
style: {
|
||||
text: `● 中间价：${mid[0]} → ${mid[1]}，累计升值 ${midGain}点（+${midPct}%）`,
|
||||
fill: '#3b6ea5', fontSize: 14, fontFamily: FONT,
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
left: 108, top: 296, silent: true,
|
||||
style: {
|
||||
text: `● 在岸即期：${spot[0]} → ${spot[1]}，累计升值 ${spotGain}点（+${spotPct}%）`,
|
||||
fill: PALETTE.coral, fontSize: 14, fontFamily: FONT,
|
||||
},
|
||||
},
|
||||
|
||||
footnote(
|
||||
`注：涨幅差${midGain - spotGain}点＝期初偏离${gapStart}−期末偏离${gapEnd}（即期偏强收窄）｜` +
|
||||
'汇兑重估用市场汇率而非中间价｜数据：新华财经｜Joey 谨制'
|
||||
),
|
||||
],
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,81 @@
|
||||
import { col } from '../csv.js';
|
||||
import {
|
||||
PALETTE, FONT, axisCommon, categoryAxis, titleStyle, legendStyle,
|
||||
lineSeries, footnote, watermarks, LAYOUT,
|
||||
} from '../theme.js';
|
||||
|
||||
/**
|
||||
* 图 4：营收到利润的增速对比 —— 四条线看"利润弹性"
|
||||
* 净利增速跑在最上面、成本增速在最下面，中间夹着毛利和营收
|
||||
*/
|
||||
export function growthChart(rows, { width, height }) {
|
||||
const pct = (p) => `${p.value}%`;
|
||||
|
||||
return {
|
||||
backgroundColor: '#fff',
|
||||
title: { ...titleStyle, text: '营收到利润的增速对比（半年与年度）' },
|
||||
legend: {
|
||||
...legendStyle,
|
||||
top: LAYOUT.legendTop,
|
||||
itemGap: 34,
|
||||
data: ['非国际归母净利', '毛利润', '营业收入', '营业成本'].map(name => ({
|
||||
name,
|
||||
icon: 'emptyCircle', // 全部折线图
|
||||
})),
|
||||
},
|
||||
grid: { left: 84, right: 56, top: LAYOUT.gridTop, bottom: 64 },
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
valueFormatter: (v) => `${v}%`,
|
||||
textStyle: { fontFamily: FONT },
|
||||
},
|
||||
xAxis: { ...categoryAxis, data: col(rows, 'period') },
|
||||
yAxis: {
|
||||
...axisCommon,
|
||||
type: 'value',
|
||||
name: '同比增速（%）',
|
||||
nameLocation: 'middle',
|
||||
nameGap: 58,
|
||||
nameTextStyle: { color: PALETTE.grey, fontSize: 13, fontFamily: FONT },
|
||||
min: -45,
|
||||
max: 400,
|
||||
interval: 100,
|
||||
axisLabel: { ...axisCommon.axisLabel, formatter: '{value}%' },
|
||||
},
|
||||
series: [
|
||||
lineSeries({
|
||||
name: '非国际归母净利',
|
||||
data: col(rows, 'non_gaap_net_profit'),
|
||||
color: PALETTE.red,
|
||||
labelPosition: 'top',
|
||||
formatter: pct,
|
||||
width: 3.5,
|
||||
}),
|
||||
lineSeries({
|
||||
name: '毛利润',
|
||||
data: col(rows, 'gross_profit'),
|
||||
color: PALETTE.coral,
|
||||
labelPosition: 'top',
|
||||
formatter: pct,
|
||||
}),
|
||||
lineSeries({
|
||||
name: '营业收入',
|
||||
data: col(rows, 'revenue'),
|
||||
color: PALETTE.navy,
|
||||
labelPosition: 'bottom',
|
||||
formatter: pct,
|
||||
}),
|
||||
lineSeries({
|
||||
name: '营业成本',
|
||||
data: col(rows, 'cost'),
|
||||
color: PALETTE.sage,
|
||||
labelPosition: 'top',
|
||||
formatter: pct,
|
||||
}),
|
||||
],
|
||||
graphic: [
|
||||
...watermarks(width, height),
|
||||
footnote('示例数据 | @思考的Joey'),
|
||||
],
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,114 @@
|
||||
import { col } from '../csv.js';
|
||||
import {
|
||||
PALETTE, FONT, axisCommon, categoryAxis, titleStyle, legendStyle,
|
||||
lineSeries, footnote, watermarks, LAYOUT,
|
||||
} from '../theme.js';
|
||||
|
||||
/**
|
||||
* 图 1：双柱 + 折线，左右双 Y 轴
|
||||
* 存货/营收走左轴（亿元），周转天数走右轴（天）
|
||||
*/
|
||||
export function inventoryChart(rows, { width, height }) {
|
||||
const periods = col(rows, 'period');
|
||||
|
||||
return {
|
||||
backgroundColor: '#fff',
|
||||
title: { ...titleStyle, text: '存货、营收与存货周转天数（半年与年度）' },
|
||||
legend: {
|
||||
...legendStyle,
|
||||
top: LAYOUT.legendTop,
|
||||
data: [
|
||||
{ name: '存货', icon: 'rect' },
|
||||
{ name: '营收', icon: 'rect' },
|
||||
{ name: '存货周转天数', icon: 'emptyCircle' }, // 折线
|
||||
],
|
||||
},
|
||||
grid: { left: 78, right: 82, top: LAYOUT.gridTop, bottom: 90 },
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { type: 'shadow' },
|
||||
textStyle: { fontFamily: FONT },
|
||||
},
|
||||
xAxis: { ...categoryAxis, data: periods },
|
||||
yAxis: [
|
||||
{
|
||||
...axisCommon,
|
||||
type: 'value',
|
||||
name: '金额（亿元）',
|
||||
nameLocation: 'middle',
|
||||
nameGap: 52,
|
||||
nameTextStyle: { color: PALETTE.grey, fontSize: 13, fontFamily: FONT },
|
||||
min: 0,
|
||||
max: 500,
|
||||
interval: 100,
|
||||
},
|
||||
{
|
||||
...axisCommon,
|
||||
type: 'value',
|
||||
name: '同比增速（%）',
|
||||
nameLocation: 'middle',
|
||||
nameGap: 58,
|
||||
nameRotate: -90,
|
||||
nameTextStyle: { color: PALETTE.grey, fontSize: 13, fontFamily: FONT },
|
||||
min: -5,
|
||||
max: 220,
|
||||
interval: 50,
|
||||
axisLabel: {
|
||||
...axisCommon.axisLabel,
|
||||
formatter: '{value}天',
|
||||
},
|
||||
splitLine: { show: false },
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '存货',
|
||||
type: 'bar',
|
||||
data: col(rows, 'inventory'),
|
||||
barWidth: 22,
|
||||
barGap: '15%',
|
||||
itemStyle: { color: PALETTE.brown },
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
color: PALETTE.ink,
|
||||
fontSize: 12,
|
||||
fontWeight: 'bold',
|
||||
fontFamily: FONT,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '营收',
|
||||
type: 'bar',
|
||||
data: col(rows, 'revenue'),
|
||||
barWidth: 22,
|
||||
itemStyle: { color: PALETTE.sand },
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
color: PALETTE.ink,
|
||||
fontSize: 12,
|
||||
fontFamily: FONT,
|
||||
},
|
||||
},
|
||||
{
|
||||
...lineSeries({
|
||||
name: '存货周转天数',
|
||||
data: col(rows, 'turnover_days'),
|
||||
color: PALETTE.coral,
|
||||
labelPosition: 'bottom',
|
||||
formatter: (p) => `${p.value}天`,
|
||||
}),
|
||||
yAxisIndex: 1,
|
||||
z: 10,
|
||||
},
|
||||
],
|
||||
graphic: [
|
||||
...watermarks(width, height),
|
||||
footnote(
|
||||
'周转天数=平均存货÷当期销售成本×期间天数（半年181/年度365，期初=上一年末，日历天数口径）；' +
|
||||
'与公司披露一致：23年133/24年102/25年123/26H1 201天 | @思考的Joey'
|
||||
),
|
||||
],
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,83 @@
|
||||
import { col } from '../csv.js';
|
||||
import {
|
||||
PALETTE, FONT, axisCommon, categoryAxis, titleStyle, legendStyle,
|
||||
lineSeries, footnote, watermarks, LAYOUT,
|
||||
} from '../theme.js';
|
||||
|
||||
/**
|
||||
* 图 2：四条率线拆解
|
||||
* 毛利率在上方独立成带，三条费用/净利率在下方交织 —— 标签交替上下放，避免叠字
|
||||
*/
|
||||
export function marginChart(rows, { width, height }) {
|
||||
const periods = col(rows, 'period');
|
||||
const pct = (p) => `${p.value}%`;
|
||||
|
||||
// 交替上下：偶数点在上，奇数点在下。原图就是这么处理密集标签的
|
||||
const alternate = (base) => (p) => (p.dataIndex % 2 === 0 ? base : base);
|
||||
|
||||
return {
|
||||
backgroundColor: '#fff',
|
||||
title: { ...titleStyle, text: '利润率与费用率拆解（半年与年度）' },
|
||||
legend: {
|
||||
...legendStyle,
|
||||
top: LAYOUT.legendTop,
|
||||
data: ['毛利率', '销售费用率', '管理费用率', '非国际归母净利率'].map(name => ({
|
||||
name,
|
||||
icon: 'emptyCircle', // 全部折线图
|
||||
})),
|
||||
},
|
||||
grid: { left: 72, right: 48, top: LAYOUT.gridTop, bottom: 62 },
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
valueFormatter: (v) => `${v}%`,
|
||||
textStyle: { fontFamily: FONT },
|
||||
},
|
||||
xAxis: { ...categoryAxis, data: periods },
|
||||
yAxis: {
|
||||
...axisCommon,
|
||||
type: 'value',
|
||||
name: '比率（%）',
|
||||
nameLocation: 'middle',
|
||||
nameGap: 46,
|
||||
nameTextStyle: { color: PALETTE.grey, fontSize: 13, fontFamily: FONT },
|
||||
min: 0,
|
||||
max: 80,
|
||||
interval: 25,
|
||||
axisLabel: { ...axisCommon.axisLabel, formatter: '{value}%' },
|
||||
},
|
||||
series: [
|
||||
lineSeries({
|
||||
name: '毛利率',
|
||||
data: col(rows, 'gross_margin'),
|
||||
color: PALETTE.green,
|
||||
labelPosition: 'top',
|
||||
formatter: pct,
|
||||
}),
|
||||
lineSeries({
|
||||
name: '销售费用率',
|
||||
data: col(rows, 'sales_expense_rate'),
|
||||
color: PALETTE.orange,
|
||||
labelPosition: 'top',
|
||||
formatter: pct,
|
||||
}),
|
||||
lineSeries({
|
||||
name: '管理费用率',
|
||||
data: col(rows, 'admin_expense_rate'),
|
||||
color: PALETTE.purple,
|
||||
labelPosition: 'bottom',
|
||||
formatter: pct,
|
||||
}),
|
||||
lineSeries({
|
||||
name: '非国际归母净利率',
|
||||
data: col(rows, 'non_gaap_net_margin'),
|
||||
color: PALETTE.coral,
|
||||
labelPosition: 'top',
|
||||
formatter: pct,
|
||||
}),
|
||||
],
|
||||
graphic: [
|
||||
...watermarks(width, height),
|
||||
footnote('示例数据 | @思考的Joey'),
|
||||
],
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,113 @@
|
||||
import { col } from '../csv.js';
|
||||
import {
|
||||
PALETTE, FONT, axisCommon, periodAxis, titleStyle, legendStyle,
|
||||
lineSeries, footnote, watermarks, LAYOUT,
|
||||
} from '../theme.js';
|
||||
|
||||
/**
|
||||
* 泡泡玛特资产结构演变图
|
||||
* 堆叠柱状图展示资产配置，折线图展示总资产增长
|
||||
*/
|
||||
export function assetsChart(rows, { width, height }) {
|
||||
const periods = col(rows, 'period');
|
||||
|
||||
return {
|
||||
backgroundColor: '#fff',
|
||||
title: {
|
||||
...titleStyle,
|
||||
text: '泡泡玛特资产结构演变（2020H1-2026H1）',
|
||||
subtext: '单位：亿元',
|
||||
},
|
||||
legend: {
|
||||
...legendStyle,
|
||||
top: LAYOUT.legendTop,
|
||||
data: ['类现金', '应收账款', '投资资产', '经营类资产', '资产总计'].map(name => ({
|
||||
name,
|
||||
icon: name === '资产总计' ? 'emptyCircle' : 'rect', // 总计是折线，其他是柱
|
||||
})),
|
||||
},
|
||||
grid: { left: 78, right: 82, top: LAYOUT.gridTop, bottom: 90 },
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { type: 'shadow' },
|
||||
textStyle: { fontFamily: FONT },
|
||||
},
|
||||
xAxis: { ...periodAxis, data: periods },
|
||||
yAxis: [
|
||||
{
|
||||
...axisCommon,
|
||||
type: 'value',
|
||||
name: '金额（亿元）',
|
||||
nameLocation: 'middle',
|
||||
nameGap: 52,
|
||||
nameTextStyle: { color: PALETTE.grey, fontSize: 13, fontFamily: FONT },
|
||||
min: 0,
|
||||
max: 350,
|
||||
interval: 50,
|
||||
},
|
||||
{
|
||||
...axisCommon,
|
||||
type: 'value',
|
||||
name: '资产总计（亿元）',
|
||||
nameLocation: 'middle',
|
||||
nameGap: 58,
|
||||
nameRotate: -90,
|
||||
nameTextStyle: { color: PALETTE.grey, fontSize: 13, fontFamily: FONT },
|
||||
min: 0,
|
||||
max: 350,
|
||||
interval: 50,
|
||||
splitLine: { show: false },
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '类现金',
|
||||
type: 'bar',
|
||||
stack: 'assets',
|
||||
data: col(rows, 'cash_like'),
|
||||
itemStyle: { color: PALETTE.blue },
|
||||
emphasis: { focus: 'series' },
|
||||
},
|
||||
{
|
||||
name: '应收账款',
|
||||
type: 'bar',
|
||||
stack: 'assets',
|
||||
data: col(rows, 'receivables'),
|
||||
itemStyle: { color: PALETTE.orange },
|
||||
emphasis: { focus: 'series' },
|
||||
},
|
||||
{
|
||||
name: '投资资产',
|
||||
type: 'bar',
|
||||
stack: 'assets',
|
||||
data: col(rows, 'investment'),
|
||||
itemStyle: { color: PALETTE.purple },
|
||||
emphasis: { focus: 'series' },
|
||||
},
|
||||
{
|
||||
name: '经营类资产',
|
||||
type: 'bar',
|
||||
stack: 'assets',
|
||||
data: col(rows, 'operating_assets'),
|
||||
itemStyle: { color: PALETTE.sage },
|
||||
emphasis: { focus: 'series' },
|
||||
},
|
||||
{
|
||||
...lineSeries({
|
||||
name: '资产总计',
|
||||
data: col(rows, 'total_assets'),
|
||||
color: PALETTE.red,
|
||||
labelPosition: 'top',
|
||||
formatter: (p) => p.value.toFixed(1),
|
||||
width: 3,
|
||||
}),
|
||||
yAxisIndex: 1,
|
||||
z: 10,
|
||||
},
|
||||
],
|
||||
graphic: [
|
||||
...watermarks(width, height),
|
||||
footnote('数据来源：泡泡玛特财报 | @思考的Joey'),
|
||||
],
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,122 @@
|
||||
import { col } from '../csv.js';
|
||||
import {
|
||||
PALETTE, FONT, axisCommon, titleStyle, footnote, watermarks,
|
||||
} from '../theme.js';
|
||||
|
||||
/**
|
||||
* 净利率同比拆解瀑布图（2025H1 → 2026H1）
|
||||
*
|
||||
* ECharts 没有原生瀑布图，用「透明占位柱 + 可见柱」堆叠模拟：
|
||||
* 占位柱撑到该项起点，可见柱只画增量部分。
|
||||
*
|
||||
* 口径要点：各项先算占营收比的税前变化，再乘税盾 (1-t₁) 折成对净利率的贡献，
|
||||
* 税率变化单独成项。恒等式 净利率 = 税前利润率 × (1-税率)，
|
||||
* Δ净 = Δ税前×(1-t₁) − 税前₂×Δt，实测闭合误差 0.00pct。
|
||||
*/
|
||||
const COLOR = {
|
||||
total: '#2F5C85', // 首尾锚点
|
||||
neg: '#C0392B', // 拖累
|
||||
pos: '#1A9E5C', // 利好
|
||||
};
|
||||
|
||||
export function ppmtBridgeChart(rows, { width, height }) {
|
||||
const items = col(rows, 'item');
|
||||
const types = col(rows, 'type');
|
||||
const bases = col(rows, 'base');
|
||||
const values = col(rows, 'value');
|
||||
|
||||
return {
|
||||
backgroundColor: '#fff',
|
||||
title: {
|
||||
...titleStyle,
|
||||
text: '净利率同比拆解：33.7% → 29.7%（2025H1 → 2026H1）',
|
||||
subtext: '单位：占营收百分点。汇兑等其他收益项是最大拖累，费用率改善仅部分对冲',
|
||||
},
|
||||
grid: { left: 114, right: 83, top: 120, bottom: 130 },
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { type: 'shadow' },
|
||||
textStyle: { fontFamily: FONT },
|
||||
formatter: (ps) => {
|
||||
const p = ps.find((x) => x.seriesName === '变化');
|
||||
if (!p) return '';
|
||||
const i = p.dataIndex;
|
||||
if (types[i] === 'total') return `<b>${items[i]}</b><br/>${values[i].toFixed(2)}%`;
|
||||
const sign = types[i] === 'pos' ? '+' : '−';
|
||||
return `<b>${items[i]}</b><br/>${sign}${values[i].toFixed(2)} pct`;
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: items,
|
||||
axisLine: { show: true, lineStyle: { color: PALETTE.axisLine } },
|
||||
axisTick: { show: false },
|
||||
axisLabel: {
|
||||
color: PALETTE.ink,
|
||||
fontSize: 11,
|
||||
fontFamily: FONT,
|
||||
interval: 0,
|
||||
rotate: 32,
|
||||
margin: 12,
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
...axisCommon,
|
||||
type: 'value',
|
||||
name: '净利率（%）',
|
||||
nameLocation: 'middle',
|
||||
nameGap: 52,
|
||||
nameTextStyle: { color: PALETTE.grey, fontSize: 13, fontFamily: FONT },
|
||||
min: 26,
|
||||
max: 36,
|
||||
interval: 2,
|
||||
axisLabel: { ...axisCommon.axisLabel, formatter: '{value}%' },
|
||||
},
|
||||
series: [
|
||||
{
|
||||
// 占位柱：撑到每项起点，完全透明
|
||||
name: '占位',
|
||||
type: 'bar',
|
||||
stack: 'bridge',
|
||||
silent: true,
|
||||
itemStyle: { color: 'transparent' },
|
||||
emphasis: { itemStyle: { color: 'transparent' } },
|
||||
data: bases,
|
||||
},
|
||||
{
|
||||
name: '变化',
|
||||
type: 'bar',
|
||||
stack: 'bridge',
|
||||
// 柱宽固定时 barCategoryGap 无效，间距只能靠 grid 左右边距调节：
|
||||
// 步距 = 绘图宽 / 类目数，间隙 = 步距 − barWidth
|
||||
barWidth: 51,
|
||||
data: values.map((v, i) => ({
|
||||
value: v,
|
||||
itemStyle: { color: COLOR[types[i]] },
|
||||
})),
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
fontFamily: FONT,
|
||||
fontSize: 11,
|
||||
fontWeight: 'bold',
|
||||
color: PALETTE.ink,
|
||||
formatter: (p) => {
|
||||
const i = p.dataIndex;
|
||||
if (types[i] === 'total') return `${values[i].toFixed(1)}%`;
|
||||
// 所有项都显示（资产减值0.01、其他业务净额0.01也必须标）
|
||||
const sign = types[i] === 'pos' ? '+' : '−';
|
||||
return `${sign}${values[i].toFixed(2)}pct`;
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
graphic: [
|
||||
...watermarks(width, height),
|
||||
footnote(
|
||||
'各项为占营收百分点，已折算为对净利率影响（×税盾系数）\n' +
|
||||
'其他收益净额：26H1净损失6.89亿，主要为汇兑损失7.20亿（25H1为汇兑收益1.20亿） | @思考的Joey'
|
||||
),
|
||||
],
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,130 @@
|
||||
import { col } from '../csv.js';
|
||||
import {
|
||||
PALETTE, FONT, axisCommon, periodAxis, titleStyle, legendStyle,
|
||||
footnote, watermarks, LAYOUT,
|
||||
} from '../theme.js';
|
||||
|
||||
/**
|
||||
* 泡泡玛特品类收入结构图
|
||||
* 堆叠柱状图展示各品类的收入占比和增长
|
||||
*/
|
||||
export function categoryChart(rows, { width, height }) {
|
||||
// 过滤掉表头行（"品类"那一行）
|
||||
const dataRows = rows.filter(r => r.period && r.period !== '品类');
|
||||
const periods = col(dataRows, 'period');
|
||||
|
||||
return {
|
||||
backgroundColor: '#fff',
|
||||
title: {
|
||||
...titleStyle,
|
||||
text: '泡泡玛特品类收入结构（2024H1-2025H2）',
|
||||
subtext: '单位：亿元',
|
||||
},
|
||||
legend: {
|
||||
...legendStyle,
|
||||
top: LAYOUT.legendTop,
|
||||
data: ['毛绒', '手办', 'MEGA', '衍生品及其他'].map(name => ({
|
||||
name,
|
||||
icon: 'rect', // 全部是堆叠柱状图
|
||||
})),
|
||||
},
|
||||
grid: { left: 78, right: 56, top: LAYOUT.gridTop, bottom: 90 },
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { type: 'shadow' },
|
||||
textStyle: { fontFamily: FONT },
|
||||
formatter: (params) => {
|
||||
let result = `<b>${params[0].axisValue}</b><br/>`;
|
||||
let total = 0;
|
||||
params.forEach(p => {
|
||||
total += p.value;
|
||||
result += `${p.marker}${p.seriesName}: ${p.value.toFixed(2)} 亿元<br/>`;
|
||||
});
|
||||
result += `<b>合计: ${total.toFixed(2)} 亿元</b>`;
|
||||
return result;
|
||||
},
|
||||
},
|
||||
xAxis: { ...periodAxis, data: periods },
|
||||
yAxis: {
|
||||
...axisCommon,
|
||||
type: 'value',
|
||||
name: '收入（亿元）',
|
||||
nameLocation: 'middle',
|
||||
nameGap: 52,
|
||||
nameTextStyle: { color: PALETTE.grey, fontSize: 13, fontFamily: FONT },
|
||||
min: 0,
|
||||
max: 250,
|
||||
interval: 50,
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '毛绒',
|
||||
type: 'bar',
|
||||
stack: 'category',
|
||||
data: col(dataRows, 'plush'),
|
||||
itemStyle: { color: PALETTE.coral },
|
||||
emphasis: { focus: 'series' },
|
||||
label: {
|
||||
show: true,
|
||||
position: 'inside',
|
||||
color: '#fff',
|
||||
fontSize: 12,
|
||||
fontFamily: FONT,
|
||||
formatter: (p) => (p.value > 15 ? p.value.toFixed(1) : ''),
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '手办',
|
||||
type: 'bar',
|
||||
stack: 'category',
|
||||
data: col(dataRows, 'figure'),
|
||||
itemStyle: { color: PALETTE.blue },
|
||||
emphasis: { focus: 'series' },
|
||||
label: {
|
||||
show: true,
|
||||
position: 'inside',
|
||||
color: '#fff',
|
||||
fontSize: 12,
|
||||
fontFamily: FONT,
|
||||
formatter: (p) => (p.value > 15 ? p.value.toFixed(1) : ''),
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'MEGA',
|
||||
type: 'bar',
|
||||
stack: 'category',
|
||||
data: col(dataRows, 'mega'),
|
||||
itemStyle: { color: PALETTE.purple },
|
||||
emphasis: { focus: 'series' },
|
||||
label: {
|
||||
show: true,
|
||||
position: 'inside',
|
||||
color: '#fff',
|
||||
fontSize: 12,
|
||||
fontFamily: FONT,
|
||||
formatter: (p) => (p.value > 8 ? p.value.toFixed(1) : ''),
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '衍生品及其他',
|
||||
type: 'bar',
|
||||
stack: 'category',
|
||||
data: col(dataRows, 'other'),
|
||||
itemStyle: { color: PALETTE.sage },
|
||||
emphasis: { focus: 'series' },
|
||||
label: {
|
||||
show: true,
|
||||
position: 'inside',
|
||||
color: '#fff',
|
||||
fontSize: 12,
|
||||
fontFamily: FONT,
|
||||
formatter: (p) => (p.value > 8 ? p.value.toFixed(1) : ''),
|
||||
},
|
||||
},
|
||||
],
|
||||
graphic: [
|
||||
...watermarks(width, height),
|
||||
footnote('数据来源：泡泡玛特财报 | @思考的Joey'),
|
||||
],
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,65 @@
|
||||
import { col } from '../csv.js';
|
||||
import {
|
||||
PALETTE, FONT, axisCommon, periodAxis, titleStyle,
|
||||
lineSeries, standardLegend, footnote, watermarks, LAYOUT,
|
||||
} from '../theme.js';
|
||||
|
||||
/**
|
||||
* 核心利润率（2020H1-2026H1）
|
||||
* 核心利润率 = 核心利润 ÷ 营业收入 = 毛利率 − 销售费用率 − 管理费用率
|
||||
*
|
||||
* 剔除了汇兑、投资收益、税等非主业扰动，是四条率线里最能反映
|
||||
* 「卖货本身赚不赚钱」的一条。22全年触底 10.8%，25全年见顶 45.6%。
|
||||
*
|
||||
* 配色 wine(#7B2D42)：同页已有 17 种线色，Lab ΔE 筛选后仅此一色 > 24。
|
||||
*/
|
||||
const LINE_COLOR = '#7B2D42';
|
||||
|
||||
export function ppmtCoreMarginChart(rows, { width, height }) {
|
||||
const pct = (p) => `${p.value.toFixed(1)}%`;
|
||||
|
||||
return {
|
||||
backgroundColor: '#fff',
|
||||
title: {
|
||||
...titleStyle,
|
||||
text: '泡泡玛特核心利润率（20H1-26H1）',
|
||||
subtext: '核心利润率 = 毛利率 − 销售费用率 − 管理费用率，剔除汇兑与投资等非主业扰动',
|
||||
},
|
||||
legend: standardLegend(['核心利润率'], { itemGap: 32 }),
|
||||
grid: { left: 78, right: 60, top: LAYOUT.gridTop, bottom: 90 },
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
valueFormatter: (v) => `${v.toFixed(1)}%`,
|
||||
textStyle: { fontFamily: FONT },
|
||||
},
|
||||
xAxis: { ...periodAxis, data: col(rows, 'period') },
|
||||
yAxis: {
|
||||
...axisCommon,
|
||||
type: 'value',
|
||||
name: '核心利润率（%）',
|
||||
nameLocation: 'middle',
|
||||
nameGap: 52,
|
||||
nameTextStyle: { color: PALETTE.grey, fontSize: 13, fontFamily: FONT },
|
||||
min: 0,
|
||||
max: 50,
|
||||
interval: 10,
|
||||
axisLabel: { ...axisCommon.axisLabel, formatter: '{value}%' },
|
||||
},
|
||||
series: [
|
||||
lineSeries({
|
||||
name: '核心利润率',
|
||||
data: col(rows, 'core_margin'),
|
||||
color: LINE_COLOR,
|
||||
formatter: pct,
|
||||
width: 3.08, // 与拆解图毛利率线一致
|
||||
}),
|
||||
],
|
||||
graphic: [
|
||||
...watermarks(width, height),
|
||||
footnote(
|
||||
'核心利润率由绝对值口径直接计算（核心利润÷营收），比三个比率行相减更准\n' +
|
||||
'——后者各只存4位小数，累加误差可达0.045pct | @思考的Joey'
|
||||
),
|
||||
],
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,142 @@
|
||||
import { col } from '../csv.js';
|
||||
import {
|
||||
PALETTE, FONT, axisCommon, periodAxis, titleStyle, legendStyle,
|
||||
footnote, watermarks, LAYOUT,
|
||||
} from '../theme.js';
|
||||
|
||||
/**
|
||||
* 核心利润及同比增速（2020H1-2026H1）
|
||||
* 核心利润 = 毛利 - 销售费用 - 管理费用，反映主业盈利能力去除营销和管理成本后的净额。
|
||||
* 柱状图展示绝对值（亿元），折线图展示同比增速（%）。
|
||||
*/
|
||||
export function ppmtCoreProfitChart(rows, { width, height }) {
|
||||
const periods = col(rows, 'period');
|
||||
const core = col(rows, 'core_profit');
|
||||
const yoy = col(rows, 'yoy');
|
||||
|
||||
return {
|
||||
backgroundColor: '#fff',
|
||||
title: {
|
||||
...titleStyle,
|
||||
text: '泡泡玛特核心利润及同比增速（20H1-26H1）',
|
||||
subtext: '核心利润 = 毛利 - 销售费用 - 管理费用，单位：亿元',
|
||||
},
|
||||
legend: {
|
||||
top: LAYOUT.legendTop,
|
||||
itemGap: 32,
|
||||
textStyle: {
|
||||
color: PALETTE.ink,
|
||||
fontSize: 14,
|
||||
fontFamily: FONT,
|
||||
},
|
||||
data: ['核心利润', '同比增速'],
|
||||
},
|
||||
grid: { left: 78, right: 128, top: LAYOUT.gridTop, bottom: 100 },
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { type: 'cross' },
|
||||
textStyle: { fontFamily: FONT },
|
||||
formatter: (params) => {
|
||||
let result = `<b>${params[0].axisValue}</b><br/>`;
|
||||
params.forEach((p) => {
|
||||
if (p.seriesName === '核心利润') {
|
||||
result += `${p.marker}${p.seriesName}: ${p.value.toFixed(1)}亿<br/>`;
|
||||
} else if (p.seriesName === '同比增速' && p.value !== null) {
|
||||
result += `${p.marker}${p.seriesName}: ${p.value > 0 ? '+' : ''}${p.value.toFixed(1)}%<br/>`;
|
||||
}
|
||||
});
|
||||
return result;
|
||||
},
|
||||
},
|
||||
xAxis: { ...periodAxis, data: periods },
|
||||
yAxis: [
|
||||
{
|
||||
// 左轴：核心利润（亿元）
|
||||
...axisCommon,
|
||||
type: 'value',
|
||||
name: '核心利润（亿元）',
|
||||
nameLocation: 'middle',
|
||||
nameGap: 48,
|
||||
nameTextStyle: { color: PALETTE.grey, fontSize: 13, fontFamily: FONT },
|
||||
min: 0,
|
||||
axisLabel: { ...axisCommon.axisLabel, formatter: '{value}' },
|
||||
},
|
||||
{
|
||||
// 右轴：同比增速（%）
|
||||
type: 'value',
|
||||
name: '同比增速（%）',
|
||||
nameLocation: 'middle',
|
||||
nameGap: 58,
|
||||
nameTextStyle: { color: PALETTE.grey, fontSize: 13, fontFamily: FONT },
|
||||
min: -100,
|
||||
max: 500,
|
||||
interval: 100,
|
||||
axisLine: { show: false },
|
||||
axisTick: { show: false },
|
||||
splitLine: { show: false },
|
||||
axisLabel: {
|
||||
color: PALETTE.grey,
|
||||
fontSize: 12,
|
||||
fontFamily: FONT,
|
||||
formatter: '{value}%',
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '核心利润',
|
||||
type: 'bar',
|
||||
yAxisIndex: 0,
|
||||
data: core,
|
||||
barWidth: 32,
|
||||
itemStyle: { color: PALETTE.navy },
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
fontFamily: FONT,
|
||||
fontSize: 11,
|
||||
color: PALETTE.ink,
|
||||
formatter: (p) => p.value.toFixed(1),
|
||||
// 强制显示所有标签，即使柱子很矮
|
||||
overflow: 'none',
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '同比增速',
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
data: yoy,
|
||||
lineStyle: { color: PALETTE.coral, width: 3.08 }, // 与拆解图毛利率线一致
|
||||
// 空心圆点：白心 + 彩色描边。图例会自动继承这个样式，
|
||||
// 渲染成「短线 + 空心圆」
|
||||
itemStyle: {
|
||||
color: '#fff',
|
||||
borderColor: PALETTE.coral,
|
||||
borderWidth: 2.5, // 与 theme.js lineSeries 一致
|
||||
},
|
||||
symbol: 'circle',
|
||||
symbolSize: 9, // 与 theme.js lineSeries 一致
|
||||
showSymbol: true,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
fontFamily: FONT,
|
||||
fontSize: 11,
|
||||
color: PALETTE.coral,
|
||||
fontWeight: '600',
|
||||
formatter: (p) => {
|
||||
if (p.value === null || p.value === '') return '';
|
||||
return `${p.value > 0 ? '+' : ''}${p.value.toFixed(1)}%`;
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
graphic: [
|
||||
...watermarks(width, height),
|
||||
footnote(
|
||||
'核心利润反映主业盈利能力（扣除营销与管理成本）；' +
|
||||
'2025H1/H2同比增速受益于费用率优化和规模效应 | @思考的Joey'
|
||||
),
|
||||
],
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,121 @@
|
||||
import { col } from '../csv.js';
|
||||
import {
|
||||
PALETTE, FONT, axisCommon, periodAxis, titleStyle, legendStyle,
|
||||
lineSeries, footnote, watermarks, LAYOUT,
|
||||
} from '../theme.js';
|
||||
|
||||
/**
|
||||
* 泡泡玛特营收到利润的增速对比（2020H1-2026H1）
|
||||
* 四条折线展示从成本到净利的增速分化。
|
||||
* 净利为主角走实线，其余三条虚线退为参照。
|
||||
*/
|
||||
const SERIES = [
|
||||
{ key: 'non_gaap_net_profit', name: '非GAAP归母净利', color: '#8B4789', width: 2.6, z: 40, dashed: false },
|
||||
{ key: 'gross_profit', name: '毛利润', color: '#D9822B', width: 1.8, z: 30, dashed: true },
|
||||
{ key: 'revenue', name: '营业收入', color: '#2F5C85', width: 1.8, z: 20, dashed: true },
|
||||
{ key: 'cost', name: '营业成本', color: '#5B8C5A', width: 1.8, z: 10, dashed: true },
|
||||
];
|
||||
|
||||
/**
|
||||
* 逐点决定标签方向：同一期内按数值排名交替 top/bottom，
|
||||
* 相邻名次朝反方向散开。静态方向在 2020H1（四值挤在 16~61%）必然重叠，
|
||||
* 而 label.position 不接受函数，只能按点覆盖 data。
|
||||
*/
|
||||
function labeledData(rows, key) {
|
||||
return rows.map((row, i) => {
|
||||
const value = row[key];
|
||||
if (value === '' || value == null) return null;
|
||||
|
||||
// 该期所有系列的值，降序排名
|
||||
const ranked = SERIES
|
||||
.map((s) => row[s.key])
|
||||
.filter((v) => v !== '' && v != null)
|
||||
.sort((a, b) => b - a);
|
||||
const rank = ranked.indexOf(value);
|
||||
|
||||
return {
|
||||
value,
|
||||
label: {
|
||||
position: rank % 2 === 0 ? 'top' : 'bottom',
|
||||
distance: 11 + Math.floor(rank / 2) * 13,
|
||||
},
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
export function ppmtGrowthChart(rows, { width, height }) {
|
||||
const pct = (p) => `${p.value}%`;
|
||||
|
||||
return {
|
||||
backgroundColor: '#fff',
|
||||
title: {
|
||||
...titleStyle,
|
||||
text: '泡泡玛特营收到利润的增速对比（2020H1-2026H1）',
|
||||
subtext: '同比增速（%），净利增速显著高于营收增速体现利润弹性',
|
||||
},
|
||||
legend: {
|
||||
// 不继承 legendStyle，让 ECharts 按系列自动生成「短线+空心圆」图例
|
||||
top: LAYOUT.legendTop,
|
||||
itemGap: 34,
|
||||
textStyle: {
|
||||
color: PALETTE.ink,
|
||||
fontSize: 14,
|
||||
fontFamily: FONT,
|
||||
},
|
||||
data: ['非GAAP归母净利', '毛利润', '营业收入', '营业成本'],
|
||||
},
|
||||
grid: { left: 84, right: 56, top: LAYOUT.gridTop, bottom: 80 },
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
valueFormatter: (v) => `${v}%`,
|
||||
textStyle: { fontFamily: FONT },
|
||||
},
|
||||
xAxis: { ...periodAxis, data: col(rows, 'period') },
|
||||
yAxis: {
|
||||
...axisCommon,
|
||||
type: 'value',
|
||||
name: '同比增速（%）',
|
||||
nameLocation: 'middle',
|
||||
nameGap: 58,
|
||||
nameTextStyle: { color: PALETTE.grey, fontSize: 13, fontFamily: FONT },
|
||||
min: -100,
|
||||
max: 400,
|
||||
interval: 100,
|
||||
axisLabel: { ...axisCommon.axisLabel, formatter: '{value}%' },
|
||||
},
|
||||
series: SERIES.map((s) => ({
|
||||
...lineSeries({
|
||||
name: s.name,
|
||||
data: labeledData(rows, s.key),
|
||||
color: s.color,
|
||||
formatter: pct,
|
||||
width: s.width,
|
||||
}),
|
||||
// 整体替换 lineStyle，必须带上 color，否则会退回主题默认色
|
||||
lineStyle: {
|
||||
color: s.color,
|
||||
type: s.dashed ? 'dashed' : 'solid',
|
||||
width: s.width,
|
||||
},
|
||||
// 四条线数值常贴到一起。白描边保证交叠处可读，
|
||||
// labelLayout.hideOverlap 让 ECharts 自动丢弃仍然碰撞的标签，
|
||||
// 按 z 决定谁被保留 —— 净利最高，成本最先被舍弃。
|
||||
label: {
|
||||
show: true,
|
||||
color: s.color,
|
||||
fontSize: 12,
|
||||
fontWeight: 500,
|
||||
fontFamily: FONT,
|
||||
formatter: pct,
|
||||
textBorderColor: '#fff',
|
||||
textBorderWidth: 3,
|
||||
},
|
||||
labelLayout: { hideOverlap: true },
|
||||
z: s.z,
|
||||
})),
|
||||
graphic: [
|
||||
...watermarks(width, height),
|
||||
footnote('数据来源：泡泡玛特财报，2020H1/H2非GAAP净利用归母净利替代 | @思考的Joey'),
|
||||
],
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,81 @@
|
||||
import { col } from '../csv.js';
|
||||
import {
|
||||
PALETTE, FONT, axisCommon, periodAxis, titleStyle, legendStyle,
|
||||
lineSeries, footnote, watermarks, LAYOUT,
|
||||
} from '../theme.js';
|
||||
|
||||
/**
|
||||
* 泡泡玛特主要IP收入趋势图
|
||||
* 多条折线展示各IP的收入变化
|
||||
*/
|
||||
export function ipChart(rows, { width, height }) {
|
||||
// 提取时期（从第一行的列名）
|
||||
const periods = Object.keys(rows[0]).filter(k => k !== 'ip');
|
||||
|
||||
// 为每个IP创建一条折线
|
||||
const ipColors = {
|
||||
'THE MONSTERS': PALETTE.brown,
|
||||
'MOLLY': PALETTE.coral,
|
||||
'SKULLPANDA': PALETTE.purple,
|
||||
'CRYBABY': PALETTE.red,
|
||||
'DIMOO': PALETTE.blue,
|
||||
'HIRONO-小野': PALETTE.orange,
|
||||
'HACIPUPU': PALETTE.sage,
|
||||
'星星人': PALETTE.navy,
|
||||
};
|
||||
|
||||
const series = rows.map((row) => {
|
||||
const ipName = row.ip;
|
||||
const data = periods.map(p => row[p]);
|
||||
|
||||
return lineSeries({
|
||||
name: ipName,
|
||||
data,
|
||||
color: ipColors[ipName] || PALETTE.grey,
|
||||
labelPosition: 'top',
|
||||
formatter: (p) => (p.value > 10 ? p.value.toFixed(0) : ''),
|
||||
width: 2.5,
|
||||
});
|
||||
});
|
||||
|
||||
return {
|
||||
backgroundColor: '#fff',
|
||||
title: {
|
||||
...titleStyle,
|
||||
text: '泡泡玛特主要IP收入趋势（2021H1-2025H2）',
|
||||
subtext: '单位：亿元',
|
||||
},
|
||||
legend: {
|
||||
...legendStyle,
|
||||
top: LAYOUT.legendTop,
|
||||
itemGap: 20,
|
||||
data: rows.map(r => ({
|
||||
name: r.ip,
|
||||
icon: 'emptyCircle', // 折线图：空心圆圈
|
||||
})),
|
||||
},
|
||||
grid: { left: 78, right: 56, top: LAYOUT.gridTop, bottom: 70 },
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
valueFormatter: (v) => `${v.toFixed(2)} 亿元`,
|
||||
textStyle: { fontFamily: FONT },
|
||||
},
|
||||
xAxis: { ...periodAxis, data: periods },
|
||||
yAxis: {
|
||||
...axisCommon,
|
||||
type: 'value',
|
||||
name: '收入（亿元）',
|
||||
nameLocation: 'middle',
|
||||
nameGap: 52,
|
||||
nameTextStyle: { color: PALETTE.grey, fontSize: 13, fontFamily: FONT },
|
||||
min: 0,
|
||||
max: 100,
|
||||
interval: 20,
|
||||
},
|
||||
series,
|
||||
graphic: [
|
||||
...watermarks(width, height),
|
||||
footnote('数据来源：泡泡玛特财报 | @思考的Joey'),
|
||||
],
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,154 @@
|
||||
import { col } from '../csv.js';
|
||||
import {
|
||||
PALETTE, FONT, axisCommon, categoryAxis, titleStyle, labelStyle,
|
||||
barSeries, lineSeries, standardLegend, footnote, watermarks, LAYOUT,
|
||||
} from '../theme.js';
|
||||
|
||||
/**
|
||||
* 泡泡玛特除 THE MONSTERS 外的 IP 收入及同比（2021H1-2026H1）
|
||||
* 柱 = 各期 IP 收入合计 − THE MONSTERS，折线 = 同比增速。
|
||||
* 看的是「剔掉唯一爆款后，其余 IP 盘子还在不在长」。
|
||||
*
|
||||
* 源：ppmt.xlsx「IP收入和占比」收入区的「计算合计」行减去 THE MONSTERS 行。
|
||||
*
|
||||
* ⚠ 这张表的 H2 是【单半年】，不是全年累计（已核对 2025H2 的 232.44
|
||||
* = 利润表 371.2 − 138.76）。两个后果：
|
||||
* 1. 轴标签只去世纪前缀（25H2），不能用 `periodAxis`（它会渲染成「25全年」）
|
||||
* 2. 同比是「本期 vs 去年同半年」，即隔两列相除；前两期无基数，留空
|
||||
*
|
||||
* CSV 收入存两位小数：同比对基数的舍入敏感，一位小数在 16~20 亿的基数上
|
||||
* 会让同比偏掉约 0.5pct。实测两位小数复算同比与全精度差 ≤ 0.02pct。
|
||||
*
|
||||
* 配色：墨翡翠柱 + 鲜亮紫线，两色 ΔE 隔着老远。
|
||||
* 翡翠选得比紧邻堆叠图里 DIMOO 那支（#3E9E6E）更深，ΔE 22.7，不会被读成同一个色；
|
||||
* 同时深到白字对比度 6.44:1，够柱内白色标签用。
|
||||
*
|
||||
* 标签避让（不加底色，白色药丸底太丑）：
|
||||
* 1. 柱子的数值放柱内白字（insideTop）——腾开柱顶上方，不和同比标签抢位置
|
||||
* 2. 同比标签逐点判断：算出标签底边和柱顶的相对位置，只有整体压在柱面上的
|
||||
* 那个点（26H1，线在 45%、柱顶在 80%）改用浅紫字，其余保持线色
|
||||
*
|
||||
* 浅紫而非白色：柱子自己的数值已经是白字，同比再用白字两者会混。
|
||||
*/
|
||||
const BAR_COLOR = '#176B52'; // 墨翡翠
|
||||
const LINE_COLOR = '#7A3FE0'; // 鲜亮紫
|
||||
const LINE_ON_BAR = '#DCC9FF'; // 压在翡翠柱面上时用的浅紫（对比度约 6:1）
|
||||
|
||||
const Y_MAX = 160; // 左轴上限
|
||||
const YOY_MIN = -50; // 右轴下限
|
||||
const YOY_MAX = 150; // 右轴上限
|
||||
|
||||
export function ppmtIpExMonstersChart(rows, { width, height }) {
|
||||
const periods = col(rows, 'period');
|
||||
const revenue = col(rows, 'revenue');
|
||||
// 前两期无同比基数，CSV 里留空；parseCSV 会给出 ''，统一转成 null
|
||||
const yoy = col(rows, 'yoy').map((v) => (v === '' ? null : v));
|
||||
|
||||
// 逐点判断同比标签会不会压在柱面上。`label.position` 不接受函数（见 CLAUDE.md），
|
||||
// 所以只能把 data 写成对象、逐点覆盖 color。
|
||||
const plotH = height - LAYOUT.gridTop - 90; // 与下面 grid 的 top/bottom 一致
|
||||
const labelGap = (8 + 13) / plotH; // labelStyle 的 distance + 字高，换成占比
|
||||
const yoyData = yoy.map((v, i) => {
|
||||
if (v === null) return null;
|
||||
const barFrac = revenue[i] / Y_MAX;
|
||||
const lineFrac = (v - YOY_MIN) / (YOY_MAX - YOY_MIN);
|
||||
// 标签整体（底边到顶边）都落在柱子高度以内 → 压在柱面上
|
||||
const onBar = lineFrac + labelGap < barFrac;
|
||||
return onBar ? { value: v, label: { color: LINE_ON_BAR } } : v;
|
||||
});
|
||||
|
||||
return {
|
||||
backgroundColor: '#fff',
|
||||
title: {
|
||||
...titleStyle,
|
||||
text: '泡泡玛特除 THE MONSTERS 外的IP收入及同比（21H1-26H1）',
|
||||
subtext: 'IP收入合计 − THE MONSTERS，单位：亿元；H2 为下半年单期，非全年累计',
|
||||
},
|
||||
legend: standardLegend(['除MONSTERS外收入', '同比增速'], { itemGap: 32 }),
|
||||
grid: { left: 78, right: 128, top: LAYOUT.gridTop, bottom: 90 },
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { type: 'cross' },
|
||||
textStyle: { fontFamily: FONT },
|
||||
formatter: (ps) => {
|
||||
let out = `<b>${ps[0].axisValue}</b><br/>`;
|
||||
ps.forEach((p) => {
|
||||
if (p.seriesName === '除MONSTERS外收入') {
|
||||
out += `${p.marker}${p.seriesName}: ${p.value.toFixed(1)} 亿元<br/>`;
|
||||
} else if (p.value !== null && p.value !== '') {
|
||||
out += `${p.marker}${p.seriesName}: ${p.value > 0 ? '+' : ''}${p.value.toFixed(1)}%<br/>`;
|
||||
}
|
||||
});
|
||||
return out;
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
...categoryAxis,
|
||||
data: periods,
|
||||
// 只去世纪前缀：这张表的 H2 是单半年，不能简写成「全年」
|
||||
axisLabel: { ...categoryAxis.axisLabel, formatter: (v) => v.replace(/^20/, '') },
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
...axisCommon,
|
||||
type: 'value',
|
||||
name: '收入（亿元）',
|
||||
nameLocation: 'middle',
|
||||
nameGap: 50,
|
||||
nameTextStyle: { color: PALETTE.grey, fontSize: 13, fontFamily: FONT },
|
||||
min: 0,
|
||||
// 定死 160：留出顶部余量，最高柱（139.0）不会顶到绘图区上沿
|
||||
max: Y_MAX,
|
||||
interval: 20,
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
name: '同比增速（%）',
|
||||
nameLocation: 'middle',
|
||||
nameGap: 60,
|
||||
nameTextStyle: { color: PALETTE.grey, fontSize: 13, fontFamily: FONT },
|
||||
min: YOY_MIN,
|
||||
max: YOY_MAX,
|
||||
interval: 50,
|
||||
axisLine: { show: false },
|
||||
axisTick: { show: false },
|
||||
splitLine: { show: false },
|
||||
axisLabel: { color: PALETTE.grey, fontSize: 12, fontFamily: FONT, formatter: '{value}%' },
|
||||
},
|
||||
],
|
||||
series: [
|
||||
barSeries({
|
||||
name: '除MONSTERS外收入',
|
||||
data: revenue,
|
||||
color: BAR_COLOR,
|
||||
barWidth: 34,
|
||||
yAxisIndex: 0,
|
||||
// 数值放柱内白字：腾开柱顶上方，避免和同比线的标签抢位置
|
||||
label: {
|
||||
show: true,
|
||||
position: 'insideTop',
|
||||
color: '#fff',
|
||||
fontFamily: FONT,
|
||||
fontSize: 11,
|
||||
fontWeight: 500,
|
||||
formatter: (p) => p.value.toFixed(1),
|
||||
overflow: 'none', // 矮柱也要显示，见 CLAUDE.md
|
||||
},
|
||||
}),
|
||||
{
|
||||
// lineSeries() 没有 ...rest，yAxisIndex 只能展开后再补
|
||||
...lineSeries({ name: '同比增速', data: yoyData, color: LINE_COLOR }),
|
||||
yAxisIndex: 1,
|
||||
label: {
|
||||
...labelStyle(LINE_COLOR, 'top'),
|
||||
formatter: (p) => (p.value === null || p.value === '' ? ''
|
||||
: `${p.value > 0 ? '+' : ''}${p.value.toFixed(1)}%`),
|
||||
},
|
||||
},
|
||||
],
|
||||
graphic: [
|
||||
...watermarks(width, height),
|
||||
footnote('除 THE MONSTERS 外其余 IP 合计；同比对去年同半年 | @思考的Joey'),
|
||||
],
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,126 @@
|
||||
import {
|
||||
PALETTE, FONT, titleStyle, footnote, watermarks,
|
||||
} from '../theme.js';
|
||||
|
||||
/**
|
||||
* 泡泡玛特主要 IP 收入占比（2026H1）
|
||||
* 饼图（非环图），图例放在右侧：每项上行 IP 名、下行小字显示收入和占比。
|
||||
* 扇区外直接标注 IP 名 + 数值（两行）。源：ppmt.xlsx「IP收入和占比」2026H1 列，
|
||||
* HACIPUPU、BUNNY、PUCKY 等该期无数据的 IP 不列入。
|
||||
* 占比为衍生指标：各 IP 收入 ÷ 全部列入 IP 收入合计（源表占比列未填）。
|
||||
*
|
||||
* 配色：手写的一条色相渐变谱（红→橙→金→橄榄→翡翠→青→蓝→紫），
|
||||
* 末位「外采及其他」用中性灰（残差项惯例）。冷色段靠明暗交替拉开
|
||||
* （深蓝 → 浅蓝紫 → 紫 → 浅兰紫），避免同色系挤在一起分不清。
|
||||
* 相邻扇区及全组两两 ΔE ≥ 24.6，与同页 ppmt_margins 四色及 wine ΔE ≥ 25。
|
||||
*/
|
||||
const COLORS = [
|
||||
'#D64545', // THE MONSTERS 玫红
|
||||
'#E8913C', // 星星人 琥珀橙
|
||||
'#D9C043', // 授权IP（非独家） 金
|
||||
'#7FA83C', // CRYBABY 橄榄绿
|
||||
'#3E9E6E', // DIMOO 翡翠
|
||||
'#3FB6D0', // SKULLPANDA 亮青
|
||||
'#2E5FA8', // 其他艺术家IP 深蓝
|
||||
'#8E86E0', // HIRONO-小野 浅蓝紫
|
||||
'#8A3FA8', // MOLLY 紫
|
||||
'#D081C4', // Zsiga 浅兰紫
|
||||
'#8C8C8C', // 外采及其他 中性灰
|
||||
];
|
||||
|
||||
export function ppmtIpShareChart(rows, { width, height }) {
|
||||
const data = rows.map((row, i) => ({
|
||||
name: row.ip,
|
||||
value: row.revenue,
|
||||
itemStyle: { color: COLORS[i % COLORS.length] },
|
||||
}));
|
||||
const total = data.reduce((s, d) => s + d.value, 0);
|
||||
const byName = Object.fromEntries(data.map((d) => [d.name, d]));
|
||||
|
||||
// 把「饼图 + 两侧外标签」当成一个整体，与图例并成一组居中摆放：
|
||||
// 图例紧跟在右侧标签外缘之后，不会被推到画布边缘留下大片空白
|
||||
const LEGEND_WIDTH = 152; // 最宽一行「17.7 亿元 · 10.3%」约 120px + 色块
|
||||
const LEGEND_GAP = 24; // 右侧标签外缘 → 图例
|
||||
// 左右标签占位不对称：左侧文字向左延伸（text-anchor: end）要占满，
|
||||
// 右侧只需容下引导线 + 首行文字起段，留太多会在图例前空出一大块
|
||||
const LABEL_LEFT = 135;
|
||||
const LABEL_RIGHT = 72;
|
||||
const topPad = 78;
|
||||
const bottomPad = 64;
|
||||
const availH = height - topPad - bottomPad;
|
||||
|
||||
// 半径取高/宽两个方向的较小值；上下各留 35px 给最上、最下扇区的两行标签
|
||||
// 末尾 ×0.85：实测 250 偏大，缩 15% 留出呼吸感
|
||||
const rByHeight = availH / 2 - 35;
|
||||
const rByWidth = (width - 48 - LEGEND_GAP - LEGEND_WIDTH - LABEL_LEFT - LABEL_RIGHT) / 2;
|
||||
const radius = Math.max(80, Math.min(rByHeight, rByWidth, 250) * 0.85);
|
||||
|
||||
const blockW = radius * 2 + LABEL_LEFT + LABEL_RIGHT;
|
||||
const leftMargin = Math.max(16, (width - blockW - LEGEND_GAP - LEGEND_WIDTH) / 2);
|
||||
const centerX = leftMargin + LABEL_LEFT + radius;
|
||||
const centerY = topPad + availH / 2;
|
||||
const legendLeft = leftMargin + blockW + LEGEND_GAP;
|
||||
|
||||
return {
|
||||
backgroundColor: '#fff',
|
||||
title: {
|
||||
...titleStyle,
|
||||
text: '泡泡玛特主要IP收入占比（2026H1）',
|
||||
subtext: `占比 = 各IP收入 ÷ 全部IP收入合计（合计 ${total.toFixed(1)} 亿元），单位：亿元`,
|
||||
},
|
||||
// 图例在右侧承载 IP 名 + 收入/占比明细
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: legendLeft,
|
||||
width: LEGEND_WIDTH,
|
||||
top: 'middle',
|
||||
itemGap: 14,
|
||||
itemWidth: 14,
|
||||
itemHeight: 14,
|
||||
align: 'left',
|
||||
data: data.map((d) => d.name),
|
||||
formatter: (name) => {
|
||||
const d = byName[name];
|
||||
const pct = (d.value / total) * 100;
|
||||
return `{name|${name}}\n{sub|${d.value.toFixed(1)} 亿元 · ${pct.toFixed(1)}%}`;
|
||||
},
|
||||
textStyle: {
|
||||
rich: {
|
||||
name: { fontFamily: FONT, fontSize: 13, fontWeight: 600, color: PALETTE.ink, lineHeight: 18 },
|
||||
sub: { fontFamily: FONT, fontSize: 11, color: PALETTE.grey, lineHeight: 16 },
|
||||
},
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
textStyle: { fontFamily: FONT },
|
||||
formatter: (p) => `${p.marker}${p.name}：${p.value.toFixed(1)} 亿元（${p.percent.toFixed(1)}%）`,
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'IP收入占比',
|
||||
type: 'pie',
|
||||
radius,
|
||||
center: [centerX, centerY],
|
||||
data,
|
||||
label: {
|
||||
show: true,
|
||||
formatter: (p) => `{name|${p.name}}\n{value|${p.value.toFixed(1)} 亿元}`,
|
||||
rich: {
|
||||
name: { fontFamily: FONT, fontSize: 12, color: PALETTE.ink, fontWeight: 600, lineHeight: 16 },
|
||||
value: { fontFamily: FONT, fontSize: 11, color: PALETTE.grey, lineHeight: 15 },
|
||||
},
|
||||
},
|
||||
labelLine: { length: 14, length2: 16, lineStyle: { color: PALETTE.axisLine } },
|
||||
itemStyle: { borderColor: '#fff', borderWidth: 2 },
|
||||
emphasis: {
|
||||
itemStyle: { shadowBlur: 12, shadowColor: 'rgba(0,0,0,0.2)' },
|
||||
},
|
||||
},
|
||||
],
|
||||
graphic: [
|
||||
...watermarks(width, height),
|
||||
footnote('HACIPUPU、BUNNY、PUCKY 等 IP 2026H1 无收入数据，未列入 | @思考的Joey'),
|
||||
],
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,125 @@
|
||||
import {
|
||||
PALETTE, FONT, axisCommon, categoryAxis, titleStyle,
|
||||
barSeries, footnote, watermarks, LAYOUT,
|
||||
} from '../theme.js';
|
||||
|
||||
/**
|
||||
* 泡泡玛特各 IP 半年收入占比（2021H1-2026H1）
|
||||
* 归一化堆叠柱状图：每根柱固定 100%，看的是收入结构的变化而非规模。
|
||||
* 源：ppmt.xlsx「IP收入和占比」的收入区；该表占比区未填，占比由收入算出。
|
||||
*
|
||||
* ⚠ 这张表的 H2 是【单半年】，不是全年累计——已核对 2025H2 的 232.44
|
||||
* = 利润表 371.2 − 138.76。所以轴标签只去世纪前缀（25H2），
|
||||
* 不能用 theme 的 `periodAxis`（它会渲染成「25全年」，对这张图是错的）。
|
||||
*
|
||||
* CSV 存两位小数：归一化占比对小值敏感，一位小数会让早期小 IP 失真
|
||||
* （如 CRYBABY 2023H1 的 0.27 记成 0.3，相对误差 13%）。
|
||||
*
|
||||
* 18 行源数据里 8 个已停单列或体量极小的 IP 合并成「其他IP（含已停单列）」，
|
||||
* 合并后仍是 11 个系列、逐期加总恰好 100%。
|
||||
*
|
||||
* 配色按 IP 名与同页饼图 ppmt_ip_share.js 一一对应，便于两图互相对照；
|
||||
* 合并桶沿用 Zsiga 原色（Zsiga 已并入其中）。
|
||||
*/
|
||||
const COLORS = {
|
||||
'THE MONSTERS': '#D64545',
|
||||
'星星人': '#E8913C',
|
||||
'授权IP（非独家）': '#D9C043',
|
||||
'CRYBABY': '#7FA83C',
|
||||
'DIMOO': '#3E9E6E',
|
||||
'SKULLPANDA': '#3FB6D0',
|
||||
'其他艺术家IP': '#2E5FA8',
|
||||
'HIRONO-小野': '#8E86E0',
|
||||
'MOLLY': '#8A3FA8',
|
||||
'其他IP（含已停单列）': '#D081C4',
|
||||
'外采及其他': '#8C8C8C',
|
||||
};
|
||||
|
||||
const LEGEND_WIDTH = 160;
|
||||
const LEGEND_RIGHT = 20;
|
||||
|
||||
export function ppmtIpShareHistoryChart(rows, { width, height }) {
|
||||
const periods = Object.keys(rows[0]).filter((k) => k !== 'ip');
|
||||
const names = rows.map((r) => r.ip);
|
||||
const totals = periods.map((p) => rows.reduce((s, r) => s + r[p], 0));
|
||||
// 归一化：各 IP 占当期合计的比重，逐期加总恰为 100%
|
||||
const toPct = (r) => periods.map((p, i) => (r[p] / totals[i]) * 100);
|
||||
|
||||
return {
|
||||
backgroundColor: '#fff',
|
||||
title: {
|
||||
...titleStyle,
|
||||
text: '泡泡玛特各IP半年收入占比（21H1-26H1）',
|
||||
subtext: '占当期IP收入合计的比重；H2 为下半年单期，非全年累计',
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
right: LEGEND_RIGHT,
|
||||
width: LEGEND_WIDTH,
|
||||
top: 'middle',
|
||||
itemGap: 12,
|
||||
itemWidth: 14,
|
||||
itemHeight: 14,
|
||||
data: names,
|
||||
textStyle: { color: PALETTE.ink, fontSize: 12, fontFamily: FONT },
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { type: 'shadow' },
|
||||
textStyle: { fontFamily: FONT },
|
||||
formatter: (ps) => {
|
||||
const i = periods.indexOf(ps[0].axisValue);
|
||||
const head = `<b>${ps[0].axisValue}</b> 合计 ${totals[i].toFixed(1)} 亿元<br/>`;
|
||||
return head + ps
|
||||
.slice()
|
||||
.reverse()
|
||||
.filter((p) => p.value > 0)
|
||||
.map((p) => `${p.marker}${p.seriesName}: ${p.value.toFixed(1)}%`
|
||||
+ `（${((p.value / 100) * totals[i]).toFixed(1)} 亿元）`)
|
||||
.join('<br/>');
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: 78,
|
||||
right: LEGEND_RIGHT + LEGEND_WIDTH + 20,
|
||||
top: LAYOUT.gridTop,
|
||||
bottom: 70,
|
||||
},
|
||||
xAxis: {
|
||||
...categoryAxis,
|
||||
data: periods,
|
||||
// 只去世纪前缀：这张表的 H2 是单半年，不能简写成「全年」
|
||||
axisLabel: { ...categoryAxis.axisLabel, formatter: (v) => v.replace(/^20/, '') },
|
||||
},
|
||||
yAxis: {
|
||||
...axisCommon,
|
||||
type: 'value',
|
||||
min: 0,
|
||||
max: 100,
|
||||
interval: 20,
|
||||
axisLabel: { ...axisCommon.axisLabel, formatter: '{value}%' },
|
||||
},
|
||||
series: rows.map((r) => barSeries({
|
||||
name: r.ip,
|
||||
data: toPct(r),
|
||||
color: COLORS[r.ip] ?? PALETTE.grey,
|
||||
barWidth: 40,
|
||||
stack: 'share',
|
||||
label: {
|
||||
show: true,
|
||||
position: 'inside',
|
||||
color: '#fff',
|
||||
fontSize: 11,
|
||||
fontFamily: FONT,
|
||||
fontWeight: 500,
|
||||
// 低于 4% 的段塞不进字，留空靠 tooltip 读数
|
||||
formatter: (p) => (p.value >= 4 ? p.value.toFixed(1) : ''),
|
||||
},
|
||||
emphasis: { focus: 'series' },
|
||||
})),
|
||||
graphic: [
|
||||
...watermarks(width, height),
|
||||
footnote('其他IP（含已停单列）= Zsiga、HACIPUPU、BUNNY、PUCKY、小甜豆等 | @思考的Joey'),
|
||||
],
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,127 @@
|
||||
import { col } from '../csv.js';
|
||||
import {
|
||||
PALETTE, FONT, axisCommon, periodAxis, titleStyle, legendStyle,
|
||||
lineSeries, footnote, watermarks, LAYOUT,
|
||||
} from '../theme.js';
|
||||
|
||||
/**
|
||||
* 泡泡玛特利润率与费用率拆解（2020H1-2026H1）
|
||||
* 毛利率独占上方区间，销售/管理费用率与非GAAP净利率在 5~35% 交织。
|
||||
* H2 列为全年累计口径，H1 为半年口径（与利润表一致）。
|
||||
*
|
||||
* 配色刻意避开 demo margin.js 的 green/orange/purple/coral 和
|
||||
* 同页 growth 的 plum/amber/steel/moss，用 Lab ΔE>25 保证明显不同。
|
||||
*/
|
||||
const SERIES = [
|
||||
{ key: 'gross_margin', name: '毛利率', color: '#00696E', width: 3.08 }, // deep teal, 2.8 × 1.1
|
||||
{ key: 'sales_expense_rate', name: '销售费用率', color: '#A8862B', width: 2.2 }, // mustard, 2.0 × 1.1
|
||||
{ key: 'admin_expense_rate', name: '管理费用率', color: '#4A2D5C', width: 2.2 }, // aubergine, 2.0 × 1.1
|
||||
{ key: 'non_gaap_net_margin', name: '非国际归母净利率', color: '#BE3E70', width: 2.86 }, // magenta rose, 2.6 × 1.1
|
||||
];
|
||||
|
||||
/**
|
||||
* 逐点决定标签朝向：放到"离最近邻居更远"的那一侧。
|
||||
*
|
||||
* 早先按排名奇偶交替（rank%2）会让排名相邻的两条线相向靠拢 ——
|
||||
* 2024H1（销售29.69 / 净利22.33）和 2026H1（净利30.02 / 销售22.89）
|
||||
* 两处标签间距只剩 10~11px < 字高 14px，于是被 hideOverlap 丢弃，
|
||||
* 表现就是"2026H1 的非国际归母净利率看不到"。
|
||||
*
|
||||
* 现在比较上下间隙取大者：最高值必朝上、最低值必朝下，
|
||||
* 中间值背对最挤的一侧。13 期实测 0 碰撞，无需再丢标签。
|
||||
*
|
||||
* 注：label.position 不接受函数，只能按数据点逐个覆盖。
|
||||
*/
|
||||
function labeledData(rows, key) {
|
||||
return rows.map((row) => {
|
||||
const value = row[key];
|
||||
if (value === '' || value == null) return null;
|
||||
|
||||
// 该期所有系列值，降序
|
||||
const ranked = SERIES
|
||||
.map((s) => row[s.key])
|
||||
.filter((v) => v !== '' && v != null)
|
||||
.sort((a, b) => b - a);
|
||||
const rank = ranked.indexOf(value);
|
||||
|
||||
const gapUp = rank > 0 ? ranked[rank - 1] - value : Infinity;
|
||||
const gapDown = rank < ranked.length - 1 ? value - ranked[rank + 1] : Infinity;
|
||||
|
||||
return {
|
||||
value,
|
||||
label: { position: gapUp >= gapDown ? 'top' : 'bottom', distance: 10 },
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
export function ppmtMarginsChart(rows, { width, height }) {
|
||||
const pct = (p) => `${p.value}%`;
|
||||
|
||||
return {
|
||||
backgroundColor: '#fff',
|
||||
title: {
|
||||
...titleStyle,
|
||||
text: '泡泡玛特利润率与费用率拆解（2020H1-2026H1）',
|
||||
subtext: '毛利率抬升叠加费用率下降，共同推动净利率走高（H1为半年，H2为全年累计）',
|
||||
},
|
||||
legend: {
|
||||
// 不继承 legendStyle：它带 icon:'roundRect'，会盖掉 ECharts 按系列
|
||||
// 自动生成的「短线+空心圆」图例
|
||||
top: LAYOUT.legendTop,
|
||||
itemGap: 28,
|
||||
textStyle: {
|
||||
color: PALETTE.ink,
|
||||
fontSize: 14,
|
||||
fontFamily: FONT,
|
||||
},
|
||||
data: SERIES.map((s) => s.name),
|
||||
},
|
||||
grid: { left: 78, right: 56, top: LAYOUT.gridTop, bottom: 80 },
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
valueFormatter: (v) => `${v}%`,
|
||||
textStyle: { fontFamily: FONT },
|
||||
},
|
||||
xAxis: { ...periodAxis, data: col(rows, 'period') },
|
||||
yAxis: {
|
||||
...axisCommon,
|
||||
type: 'value',
|
||||
name: '比率（%）',
|
||||
nameLocation: 'middle',
|
||||
nameGap: 50,
|
||||
nameTextStyle: { color: PALETTE.grey, fontSize: 13, fontFamily: FONT },
|
||||
min: 0,
|
||||
max: 80,
|
||||
interval: 20,
|
||||
axisLabel: { ...axisCommon.axisLabel, formatter: '{value}%' },
|
||||
},
|
||||
series: SERIES.map((s) => ({
|
||||
...lineSeries({
|
||||
name: s.name,
|
||||
data: labeledData(rows, s.key),
|
||||
color: s.color,
|
||||
formatter: pct,
|
||||
width: s.width,
|
||||
}),
|
||||
label: {
|
||||
show: true,
|
||||
color: s.color,
|
||||
fontSize: 12,
|
||||
fontWeight: 500,
|
||||
fontFamily: FONT,
|
||||
formatter: pct,
|
||||
// 白描边保证交叉处压线的标签仍可读
|
||||
textBorderColor: '#fff',
|
||||
textBorderWidth: 3,
|
||||
},
|
||||
labelLayout: { hideOverlap: true },
|
||||
})),
|
||||
graphic: [
|
||||
...watermarks(width, height),
|
||||
footnote(
|
||||
'毛利率/费用率取自利润表；非国际归母净利率=非GAAP净利÷营业收入，' +
|
||||
'2020H1/H2非GAAP缺失用归母净利替代 | @思考的Joey'
|
||||
),
|
||||
],
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,133 @@
|
||||
import { col } from '../csv.js';
|
||||
import {
|
||||
PALETTE, FONT, axisCommon, periodAxis, titleStyle, legendStyle,
|
||||
lineSeries, footnote, watermarks, LAYOUT,
|
||||
} from '../theme.js';
|
||||
|
||||
/**
|
||||
* 泡泡玛特盈利能力分析图
|
||||
* 柱状图展示收入和利润，折线图展示毛利率
|
||||
*/
|
||||
export function profitChart(rows, { width, height }) {
|
||||
const periods = col(rows, 'period').reverse(); // 按时间正序
|
||||
const revenue = col(rows, 'revenue').reverse();
|
||||
const grossProfit = col(rows, 'gross_profit').reverse();
|
||||
const netProfit = col(rows, 'net_profit').reverse();
|
||||
const grossMargin = col(rows, 'gross_margin').reverse();
|
||||
|
||||
return {
|
||||
backgroundColor: '#fff',
|
||||
title: {
|
||||
...titleStyle,
|
||||
text: '泡泡玛特盈利能力分析（2022H2-2026H1）',
|
||||
subtext: '营收、毛利、净利润及毛利率变化',
|
||||
},
|
||||
legend: {
|
||||
...legendStyle,
|
||||
top: LAYOUT.legendTop,
|
||||
data: [
|
||||
{ name: '营业收入', icon: 'rect' },
|
||||
{ name: '毛利润', icon: 'rect' },
|
||||
{ name: '归母净利润', icon: 'rect' },
|
||||
{ name: '毛利率', icon: 'emptyCircle' },
|
||||
],
|
||||
},
|
||||
grid: { left: 78, right: 82, top: LAYOUT.gridTop, bottom: 90 },
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { type: 'shadow' },
|
||||
textStyle: { fontFamily: FONT },
|
||||
},
|
||||
xAxis: { ...periodAxis, data: periods },
|
||||
yAxis: [
|
||||
{
|
||||
...axisCommon,
|
||||
type: 'value',
|
||||
name: '金额（亿元）',
|
||||
nameLocation: 'middle',
|
||||
nameGap: 52,
|
||||
nameTextStyle: { color: PALETTE.grey, fontSize: 13, fontFamily: FONT },
|
||||
min: 0,
|
||||
max: 400,
|
||||
interval: 100,
|
||||
},
|
||||
{
|
||||
...axisCommon,
|
||||
type: 'value',
|
||||
name: '毛利率（%）',
|
||||
nameLocation: 'middle',
|
||||
nameGap: 58,
|
||||
nameRotate: -90,
|
||||
nameTextStyle: { color: PALETTE.grey, fontSize: 13, fontFamily: FONT },
|
||||
min: 55,
|
||||
max: 75,
|
||||
interval: 5,
|
||||
axisLabel: {
|
||||
...axisCommon.axisLabel,
|
||||
formatter: '{value}%',
|
||||
},
|
||||
splitLine: { show: false },
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '营业收入',
|
||||
type: 'bar',
|
||||
data: revenue,
|
||||
barWidth: 18,
|
||||
itemStyle: { color: PALETTE.navy },
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
color: PALETTE.ink,
|
||||
fontSize: 11,
|
||||
fontFamily: FONT,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '毛利润',
|
||||
type: 'bar',
|
||||
data: grossProfit,
|
||||
barWidth: 18,
|
||||
itemStyle: { color: PALETTE.sage },
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
color: PALETTE.ink,
|
||||
fontSize: 11,
|
||||
fontFamily: FONT,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '归母净利润',
|
||||
type: 'bar',
|
||||
data: netProfit,
|
||||
barWidth: 18,
|
||||
itemStyle: { color: PALETTE.orange },
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
color: PALETTE.ink,
|
||||
fontSize: 11,
|
||||
fontFamily: FONT,
|
||||
},
|
||||
},
|
||||
{
|
||||
...lineSeries({
|
||||
name: '毛利率',
|
||||
data: grossMargin,
|
||||
color: PALETTE.red,
|
||||
labelPosition: 'top',
|
||||
formatter: (p) => `${p.value.toFixed(1)}%`,
|
||||
width: 3,
|
||||
}),
|
||||
yAxisIndex: 1,
|
||||
z: 10,
|
||||
},
|
||||
],
|
||||
graphic: [
|
||||
...watermarks(width, height),
|
||||
footnote('数据来源：泡泡玛特财报（累计数据）| @思考的Joey'),
|
||||
],
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,125 @@
|
||||
import {
|
||||
PALETTE, FONT, titleStyle, footnote, watermarks,
|
||||
LAYOUT, } from '../theme.js';
|
||||
|
||||
/**
|
||||
* 泡泡玛特区域渠道分布图（2026H1）
|
||||
* 使用交错正负轴展示不同区域和渠道的收入
|
||||
*/
|
||||
export function regionChannelChart(rows, { width, height }) {
|
||||
// 数据结构重组：按区域分组
|
||||
const regions = ['中国', '海外', '亚太', '美洲', '欧洲及其他'];
|
||||
const channels = ['线下渠道', '线上渠道', '批发及其他'];
|
||||
|
||||
// 构建数据映射
|
||||
const dataMap = {};
|
||||
rows.forEach(row => {
|
||||
const key = `${row.region}_${row.channel}`;
|
||||
dataMap[key] = row.value;
|
||||
});
|
||||
|
||||
// 为每个渠道构建系列数据
|
||||
const seriesData = channels.map(channel => {
|
||||
return regions.map(region => {
|
||||
const key = `${region}_${channel}`;
|
||||
const value = dataMap[key] || 0;
|
||||
// 线上渠道显示为负值（左侧），其他为正值（右侧）
|
||||
return channel === '线上渠道' ? -value : value;
|
||||
});
|
||||
});
|
||||
|
||||
// 配色
|
||||
const channelColors = {
|
||||
'线下渠道': PALETTE.navy,
|
||||
'线上渠道': PALETTE.coral,
|
||||
'批发及其他': PALETTE.sage,
|
||||
};
|
||||
|
||||
return {
|
||||
backgroundColor: '#fff',
|
||||
title: {
|
||||
...titleStyle,
|
||||
text: '泡泡玛特区域渠道分布（2026H1）',
|
||||
subtext: '左侧：线上渠道 | 右侧：线下渠道、批发及其他，单位：亿元',
|
||||
top: 18,
|
||||
},
|
||||
legend: {
|
||||
data: channels.map(name => ({ name, icon: 'rect' })), // 全部堆叠柱状图
|
||||
top: LAYOUT.legendTop,
|
||||
itemGap: 32,
|
||||
textStyle: { fontFamily: FONT, fontSize: 13 },
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { type: 'shadow' },
|
||||
textStyle: { fontFamily: FONT },
|
||||
formatter: (params) => {
|
||||
let result = `<b>${params[0].axisValue}</b><br/>`;
|
||||
params.forEach(p => {
|
||||
const value = Math.abs(p.value);
|
||||
result += `${p.marker}${p.seriesName}: ${value.toFixed(2)} 亿元<br/>`;
|
||||
});
|
||||
return result;
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: 100,
|
||||
right: 100,
|
||||
top: 145,
|
||||
bottom: 90,
|
||||
containLabel: false,
|
||||
},
|
||||
xAxis: {
|
||||
type: 'value',
|
||||
position: 'top',
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: { color: '#e8e8e8', width: 1 }
|
||||
},
|
||||
axisLine: { show: false },
|
||||
axisTick: { show: false },
|
||||
axisLabel: {
|
||||
formatter: (value) => Math.abs(value),
|
||||
fontFamily: FONT,
|
||||
fontSize: 12,
|
||||
color: '#8c8c8c',
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
data: regions,
|
||||
axisLine: { show: false },
|
||||
axisTick: { show: false },
|
||||
axisLabel: {
|
||||
fontFamily: FONT,
|
||||
fontSize: 13,
|
||||
color: '#333',
|
||||
fontWeight: '500',
|
||||
},
|
||||
inverse: false,
|
||||
},
|
||||
series: channels.map((channel, idx) => ({
|
||||
name: channel,
|
||||
type: 'bar',
|
||||
stack: channel === '线上渠道' ? 'left' : 'right',
|
||||
data: seriesData[idx],
|
||||
itemStyle: { color: channelColors[channel] },
|
||||
label: {
|
||||
show: true,
|
||||
position: channel === '线上渠道' ? 'left' : 'right',
|
||||
formatter: (params) => {
|
||||
const value = Math.abs(params.value);
|
||||
return value > 0 ? value.toFixed(1) : '';
|
||||
},
|
||||
fontFamily: FONT,
|
||||
fontSize: 11,
|
||||
color: '#333',
|
||||
},
|
||||
barWidth: 22,
|
||||
})),
|
||||
graphic: [
|
||||
...watermarks(width, height),
|
||||
footnote('数据来源：泡泡玛特财报 | @思考的Joey'),
|
||||
],
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,125 @@
|
||||
import {
|
||||
PALETTE, FONT, titleStyle, footnote, watermarks,
|
||||
LAYOUT, } from '../theme.js';
|
||||
|
||||
/**
|
||||
* 泡泡玛特区域渠道同比增速图（2026H1 vs 2025H1）
|
||||
* 垂直条形图，每个渠道使用统一颜色
|
||||
*/
|
||||
export function regionChannelYoyChart(rows, { width, height }) {
|
||||
// 按区域和渠道重组数据
|
||||
const regions = ['中国', '海外', '亚太', '美洲', '欧洲及其他'];
|
||||
const channels = ['线下渠道', '线上渠道', '批发及其他'];
|
||||
|
||||
// 构建数据映射
|
||||
const dataMap = {};
|
||||
rows.forEach(row => {
|
||||
const key = `${row.region}_${row.channel}`;
|
||||
dataMap[key] = row.yoy;
|
||||
});
|
||||
|
||||
// 为每个渠道构建数据系列
|
||||
const seriesData = channels.map(channel => {
|
||||
return regions.map(region => {
|
||||
const key = `${region}_${channel}`;
|
||||
return dataMap[key] || 0;
|
||||
});
|
||||
});
|
||||
|
||||
// 为每个渠道定义统一的颜色
|
||||
const channelColors = {
|
||||
'线下渠道': PALETTE.navy,
|
||||
'线上渠道': PALETTE.coral,
|
||||
'批发及其他': PALETTE.sage,
|
||||
};
|
||||
|
||||
return {
|
||||
backgroundColor: '#fff',
|
||||
title: {
|
||||
...titleStyle,
|
||||
text: '泡泡玛特区域渠道同比增速（2026H1 vs 2025H1）',
|
||||
subtext: '各区域渠道同比增速对比',
|
||||
top: 18,
|
||||
},
|
||||
legend: {
|
||||
data: channels.map(name => ({ name, icon: 'rect' })), // 全部柱状图
|
||||
top: LAYOUT.legendTop,
|
||||
itemGap: 32,
|
||||
textStyle: { fontFamily: FONT, fontSize: 13 },
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { type: 'shadow' },
|
||||
textStyle: { fontFamily: FONT },
|
||||
formatter: (params) => {
|
||||
let result = `<b>${params[0].axisValue}</b><br/>`;
|
||||
params.forEach(p => {
|
||||
const value = p.value;
|
||||
const sign = value >= 0 ? '+' : '';
|
||||
result += `${p.marker}${p.seriesName}: ${sign}${value.toFixed(1)}%<br/>`;
|
||||
});
|
||||
return result;
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: 80,
|
||||
right: 60,
|
||||
top: 145,
|
||||
bottom: 90,
|
||||
containLabel: false,
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: regions,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: { color: '#333', width: 2 }
|
||||
},
|
||||
axisTick: { show: false },
|
||||
axisLabel: {
|
||||
fontFamily: FONT,
|
||||
fontSize: 12,
|
||||
color: '#333',
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLine: { show: false },
|
||||
axisTick: { show: false },
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: { color: '#e8e8e8', width: 1 }
|
||||
},
|
||||
axisLabel: {
|
||||
formatter: '{value}%',
|
||||
fontFamily: FONT,
|
||||
fontSize: 12,
|
||||
color: '#8c8c8c',
|
||||
},
|
||||
},
|
||||
series: channels.map((channel, idx) => ({
|
||||
name: channel,
|
||||
type: 'bar',
|
||||
data: seriesData[idx],
|
||||
itemStyle: { color: channelColors[channel] },
|
||||
barWidth: 47,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'inside',
|
||||
formatter: (params) => {
|
||||
const value = params.value;
|
||||
const sign = value >= 0 ? '+' : '';
|
||||
return `${sign}${value.toFixed(1)}%`;
|
||||
},
|
||||
fontFamily: FONT,
|
||||
fontSize: 12,
|
||||
color: '#fff',
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
})),
|
||||
graphic: [
|
||||
...watermarks(width, height),
|
||||
footnote('数据来源：泡泡玛特财报（2026H1 vs 2025H1同比）| @思考的Joey'),
|
||||
],
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,139 @@
|
||||
import {
|
||||
PALETTE, FONT, titleStyle, footnote, watermarks,
|
||||
} from '../theme.js';
|
||||
|
||||
/**
|
||||
* 泡泡玛特利润流向桑基图（2026H1）
|
||||
* 从营业收入到非GAAP归母净利润的完整流程
|
||||
*/
|
||||
export function sankeyChart(rows, { width, height }) {
|
||||
// 从 CSV 构建桑基图的 links 数据
|
||||
const links = rows.map(row => ({
|
||||
source: row.source,
|
||||
target: row.target,
|
||||
value: row.value,
|
||||
}));
|
||||
|
||||
// 定义节点颜色
|
||||
const nodeColors = {
|
||||
'营业收入': PALETTE.navy,
|
||||
'营业成本': PALETTE.grey,
|
||||
'毛利': PALETTE.sage,
|
||||
'销售费用': PALETTE.orange,
|
||||
'管理费用': PALETTE.purple,
|
||||
'财务费用': PALETTE.brown,
|
||||
'营业利润': PALETTE.green,
|
||||
'投资收益': PALETTE.blue,
|
||||
'公允价值变动': PALETTE.blue,
|
||||
'其他收入': PALETTE.blue,
|
||||
'利润总额': PALETTE.sage,
|
||||
'所得税费用': PALETTE.grey,
|
||||
'净利润': PALETTE.green,
|
||||
'少数股东损益': PALETTE.grey,
|
||||
'归母净利润': PALETTE.coral,
|
||||
'非GAAP调整项': PALETTE.blue,
|
||||
'非GAAP归母净利润': PALETTE.red,
|
||||
};
|
||||
|
||||
return {
|
||||
backgroundColor: '#fff',
|
||||
title: {
|
||||
...titleStyle,
|
||||
text: '泡泡玛特利润流向分析（2026H1）',
|
||||
subtext: '从营业收入到非GAAP归母净利润的完整流程，单位：亿元',
|
||||
top: 18,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
triggerOn: 'mousemove',
|
||||
textStyle: { fontFamily: FONT, fontSize: 13 },
|
||||
formatter: (params) => {
|
||||
if (params.dataType === 'edge') {
|
||||
return `${params.data.source} → ${params.data.target}<br/><b>${params.data.value.toFixed(2)} 亿元</b>`;
|
||||
} else {
|
||||
return `<b>${params.name}</b><br/>总额: ${params.value.toFixed(2)} 亿元`;
|
||||
}
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'sankey',
|
||||
layout: 'none',
|
||||
emphasis: {
|
||||
focus: 'adjacency',
|
||||
},
|
||||
nodeAlign: 'left',
|
||||
layoutIterations: 0,
|
||||
nodeWidth: 26,
|
||||
nodeGap: 14,
|
||||
left: 120,
|
||||
right: 180,
|
||||
top: 110,
|
||||
bottom: 90,
|
||||
data: Object.keys(nodeColors).map(name => ({
|
||||
name,
|
||||
itemStyle: { color: nodeColors[name] },
|
||||
})),
|
||||
links,
|
||||
label: {
|
||||
color: PALETTE.ink,
|
||||
fontFamily: FONT,
|
||||
fontSize: 12,
|
||||
fontWeight: 'normal',
|
||||
formatter: (params) => {
|
||||
// 给每个节点标注名称和数值
|
||||
return `{name|${params.name}}\n{value|${params.value.toFixed(2)}亿}`;
|
||||
},
|
||||
rich: {
|
||||
name: {
|
||||
fontSize: 12,
|
||||
fontFamily: FONT,
|
||||
color: PALETTE.ink,
|
||||
},
|
||||
value: {
|
||||
fontSize: 11,
|
||||
fontFamily: FONT,
|
||||
color: PALETTE.grey,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
},
|
||||
},
|
||||
lineStyle: {
|
||||
color: 'gradient',
|
||||
curveness: 0.5,
|
||||
opacity: 0.3,
|
||||
},
|
||||
levels: [
|
||||
{
|
||||
depth: 0,
|
||||
label: { position: 'left' },
|
||||
},
|
||||
{
|
||||
depth: 1,
|
||||
label: { position: 'right' },
|
||||
},
|
||||
{
|
||||
depth: 2,
|
||||
label: { position: 'right' },
|
||||
},
|
||||
{
|
||||
depth: 3,
|
||||
label: { position: 'right' },
|
||||
},
|
||||
{
|
||||
depth: 4,
|
||||
label: { position: 'right' },
|
||||
},
|
||||
{
|
||||
depth: 5,
|
||||
label: { position: 'right' },
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
graphic: [
|
||||
...watermarks(width, height),
|
||||
footnote('数据来源：泡泡玛特财报 | @思考的Joey'),
|
||||
],
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,64 @@
|
||||
import { col } from '../csv.js';
|
||||
import {
|
||||
PALETTE, FONT, axisCommon, categoryAxis, titleStyle, legendStyle,
|
||||
lineSeries, footnote, watermarks, LAYOUT,
|
||||
} from '../theme.js';
|
||||
|
||||
/**
|
||||
* 图 3：毛利率 vs 非国际净利率，两条线的简版对照
|
||||
* 从 margin.csv 复用同一份数据，只挑两列
|
||||
*/
|
||||
export function twoLineChart(rows, { width, height }) {
|
||||
return {
|
||||
backgroundColor: '#fff',
|
||||
title: { ...titleStyle, text: '毛利率与非国际净利率（半年与年度）' },
|
||||
legend: {
|
||||
...legendStyle,
|
||||
top: LAYOUT.legendTop,
|
||||
data: ['毛利率', '非国际归母净利率'].map(name => ({
|
||||
name,
|
||||
icon: 'emptyCircle', // 全部折线图
|
||||
})),
|
||||
},
|
||||
grid: { left: 72, right: 48, top: LAYOUT.gridTop, bottom: 62 },
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
valueFormatter: (v) => `${v}%`,
|
||||
textStyle: { fontFamily: FONT },
|
||||
},
|
||||
xAxis: { ...categoryAxis, data: col(rows, 'period') },
|
||||
yAxis: {
|
||||
...axisCommon,
|
||||
type: 'value',
|
||||
name: '比率（%）',
|
||||
nameLocation: 'middle',
|
||||
nameGap: 46,
|
||||
nameTextStyle: { color: PALETTE.grey, fontSize: 13, fontFamily: FONT },
|
||||
min: -5,
|
||||
max: 80,
|
||||
interval: 25,
|
||||
axisLabel: { ...axisCommon.axisLabel, formatter: '{value}%' },
|
||||
},
|
||||
series: [
|
||||
lineSeries({
|
||||
name: '毛利率',
|
||||
data: col(rows, 'gross_margin'),
|
||||
color: PALETTE.navy,
|
||||
labelPosition: 'top',
|
||||
formatter: (p) => `${p.value}%`,
|
||||
width: 3.5,
|
||||
}),
|
||||
lineSeries({
|
||||
name: '非国际归母净利率',
|
||||
data: col(rows, 'non_gaap_net_margin'),
|
||||
color: PALETTE.coral,
|
||||
labelPosition: 'top',
|
||||
formatter: (p) => `${p.value}%`,
|
||||
}),
|
||||
],
|
||||
graphic: [
|
||||
...watermarks(width, height),
|
||||
footnote('示例数据 | @思考的Joey'),
|
||||
],
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
/**
|
||||
* 极简 CSV 解析：首行表头，逗号分隔，自动把数字列转成 number
|
||||
* 不处理引号内的逗号 —— 财报数据用不上，保持简单
|
||||
*/
|
||||
export function parseCSV(text) {
|
||||
const lines = text
|
||||
.trim()
|
||||
.split(/\r?\n/)
|
||||
.filter((l) => l.trim() && !l.trim().startsWith('#'));
|
||||
|
||||
const headers = lines[0].split(',').map((h) => h.trim());
|
||||
|
||||
return lines.slice(1).map((line) => {
|
||||
const cells = line.split(',').map((c) => c.trim());
|
||||
const row = {};
|
||||
headers.forEach((h, i) => {
|
||||
const raw = cells[i];
|
||||
const num = Number(raw);
|
||||
row[h] = raw !== '' && !Number.isNaN(num) ? num : raw;
|
||||
});
|
||||
return row;
|
||||
});
|
||||
}
|
||||
|
||||
export async function loadCSV(path) {
|
||||
const res = await fetch(path);
|
||||
if (!res.ok) throw new Error(`读取 ${path} 失败：${res.status}`);
|
||||
return parseCSV(await res.text());
|
||||
}
|
||||
|
||||
/** 取某一列 */
|
||||
export function col(rows, key) {
|
||||
return rows.map((r) => r[key]);
|
||||
}
|
||||
+99
@@ -0,0 +1,99 @@
|
||||
import { loadCSV } from './csv.js';
|
||||
import { inventoryChart } from './charts/inventory.js';
|
||||
import { marginChart } from './charts/margin.js';
|
||||
import { twoLineChart } from './charts/twoline.js';
|
||||
import { growthChart } from './charts/growth.js';
|
||||
import { fxChart } from './charts/fx.js';
|
||||
import { assetsChart } from './charts/ppmt_assets.js';
|
||||
import { profitChart } from './charts/ppmt_profit.js';
|
||||
import { ipChart } from './charts/ppmt_ip.js';
|
||||
import { categoryChart } from './charts/ppmt_category.js';
|
||||
import { sankeyChart } from './charts/ppmt_sankey.js';
|
||||
import { regionChannelYoyChart } from './charts/ppmt_region_yoy.js';
|
||||
import { ppmtGrowthChart } from './charts/ppmt_growth.js';
|
||||
import { ppmtMarginsChart } from './charts/ppmt_margins.js';
|
||||
import { ppmtBridgeChart } from './charts/ppmt_bridge.js';
|
||||
import { ppmtCoreProfitChart } from './charts/ppmt_core_profit.js';
|
||||
import { ppmtCoreMarginChart } from './charts/ppmt_core_margin.js';
|
||||
import { ppmtIpShareChart } from './charts/ppmt_ip_share.js';
|
||||
import { ppmtIpShareHistoryChart } from './charts/ppmt_ip_share_history.js';
|
||||
import { ppmtIpExMonstersChart } from './charts/ppmt_ip_ex_monsters.js';
|
||||
|
||||
/** 图表清单：加新图只需在这里加一行 */
|
||||
const CHARTS = [
|
||||
// 示例图表
|
||||
{ id: 'chart-inventory', csv: 'data/inventory.csv', build: inventoryChart, height: 620 },
|
||||
{ id: 'chart-margin', csv: 'data/margin.csv', build: marginChart, height: 620 },
|
||||
{ id: 'chart-twoline', csv: 'data/margin.csv', build: twoLineChart, height: 620 },
|
||||
{ id: 'chart-growth', csv: 'data/growth.csv', build: growthChart, height: 700 },
|
||||
{ id: 'chart-fx', csv: 'data/fx.csv', build: fxChart, height: 780 },
|
||||
// 泡泡玛特图表
|
||||
{ id: 'chart-ppmt-assets', csv: 'data/ppmt_assets.csv', build: assetsChart, height: 680 },
|
||||
{ id: 'chart-ppmt-profit', csv: 'data/ppmt_profit.csv', build: profitChart, height: 680 },
|
||||
{ id: 'chart-ppmt-ip', csv: 'data/ppmt_ip.csv', build: ipChart, height: 720 },
|
||||
{ id: 'chart-ppmt-category', csv: 'data/ppmt_category.csv', build: categoryChart, height: 680 },
|
||||
{ id: 'chart-ppmt-sankey', csv: 'data/ppmt_sankey_2026h1.csv', build: sankeyChart, height: 800 },
|
||||
{ id: 'chart-ppmt-region-yoy', csv: 'data/ppmt_region_channel_yoy.csv', build: regionChannelYoyChart, height: 620 },
|
||||
{ id: 'chart-ppmt-growth', csv: 'data/ppmt_growth.csv', build: ppmtGrowthChart, height: 700 },
|
||||
{ id: 'chart-ppmt-margins', csv: 'data/ppmt_margins.csv', build: ppmtMarginsChart, height: 680 },
|
||||
{ id: 'chart-ppmt-bridge', csv: 'data/ppmt_margin_bridge.csv', build: ppmtBridgeChart, height: 700 },
|
||||
{ id: 'chart-ppmt-core', csv: 'data/ppmt_core_profit.csv', build: ppmtCoreProfitChart, height: 720 },
|
||||
{ id: 'chart-ppmt-core-margin', csv: 'data/ppmt_core_margin.csv', build: ppmtCoreMarginChart, height: 680 },
|
||||
{ id: 'chart-ppmt-ip-share', csv: 'data/ppmt_ip_share_2026h1.csv', build: ppmtIpShareChart, height: 720 },
|
||||
{ id: 'chart-ppmt-ip-share-history', csv: 'data/ppmt_ip_share_history.csv', build: ppmtIpShareHistoryChart, height: 700 },
|
||||
{ id: 'chart-ppmt-ip-ex-monsters', csv: 'data/ppmt_ip_ex_monsters.csv', build: ppmtIpExMonstersChart, height: 700 },
|
||||
];
|
||||
|
||||
const instances = new Map();
|
||||
|
||||
async function render(spec) {
|
||||
const el = document.getElementById(spec.id);
|
||||
if (!el) return;
|
||||
|
||||
try {
|
||||
// 加时间戳绕过缓存，改完 CSV 刷新就能看到
|
||||
const rows = await loadCSV(`${spec.csv}?t=${Date.now()}`);
|
||||
const chart = instances.get(spec.id) || echarts.init(el, null, { renderer: 'canvas' });
|
||||
instances.set(spec.id, chart);
|
||||
|
||||
const { width, height } = el.getBoundingClientRect();
|
||||
chart.setOption(spec.build(rows, { width, height }), true);
|
||||
} catch (err) {
|
||||
el.innerHTML = `<div class="chart-error">${err.message}</div>`;
|
||||
console.error(spec.id, err);
|
||||
}
|
||||
}
|
||||
|
||||
async function renderAll() {
|
||||
await Promise.all(CHARTS.map(render));
|
||||
}
|
||||
|
||||
/** 导出当前图为 PNG，2 倍图，微信公众号里够清晰 */
|
||||
function exportPNG(id, filename) {
|
||||
const chart = instances.get(id);
|
||||
if (!chart) return;
|
||||
const url = chart.getDataURL({ type: 'png', pixelRatio: 2, backgroundColor: '#fff' });
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = `${filename}.png`;
|
||||
a.click();
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
renderAll();
|
||||
|
||||
document.getElementById('btn-reload').addEventListener('click', renderAll);
|
||||
|
||||
document.querySelectorAll('[data-export]').forEach((btn) => {
|
||||
btn.addEventListener('click', () => {
|
||||
exportPNG(btn.dataset.export, btn.dataset.filename || btn.dataset.export);
|
||||
});
|
||||
});
|
||||
|
||||
let timer;
|
||||
window.addEventListener('resize', () => {
|
||||
clearTimeout(timer);
|
||||
// resize 后水印数量要跟着画布变，所以整体重绘而不是 chart.resize()
|
||||
timer = setTimeout(renderAll, 200);
|
||||
});
|
||||
});
|
||||
+247
@@ -0,0 +1,247 @@
|
||||
/**
|
||||
* 方木风格主题 —— 统一的配色、字体、坐标轴、水印
|
||||
* 所有图表共用这一份配置，保证视觉一致性
|
||||
*/
|
||||
|
||||
export const WATERMARK_TEXT = '@思考的Joey';
|
||||
|
||||
// 字体名用单引号：SVG 渲染时字符串会被塞进 style="..." 属性，
|
||||
// 用双引号会提前闭合属性、生成非法 SVG（canvas 渲染看不出来，导出 SVG 时才炸）
|
||||
export const FONT = "'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif";
|
||||
|
||||
/** 调色板：低饱和、克制，接近财经媒体常用的莫兰迪系 */
|
||||
export const PALETTE = {
|
||||
brown: '#6b4a2b',
|
||||
sand: '#d5c7b4',
|
||||
coral: '#ec7b73',
|
||||
green: '#2f8a5b',
|
||||
orange: '#d98324',
|
||||
purple: '#9b4fa8',
|
||||
blue: '#3b6ea5',
|
||||
navy: '#1f4e79',
|
||||
red: '#b8342a',
|
||||
sage: '#8aab7e',
|
||||
ink: '#333333',
|
||||
grey: '#8c8c8c',
|
||||
gridLine: '#e8e8e8',
|
||||
axisLine: '#d0d0d0',
|
||||
};
|
||||
|
||||
/** 坐标轴通用样式：只留浅色横向网格，去掉轴线的存在感 */
|
||||
export const axisCommon = {
|
||||
axisLine: { show: false },
|
||||
axisTick: { show: false },
|
||||
axisLabel: {
|
||||
color: PALETTE.grey,
|
||||
fontSize: 13,
|
||||
fontFamily: FONT,
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: { color: PALETTE.gridLine, width: 1 },
|
||||
},
|
||||
};
|
||||
|
||||
/** X 轴：显示轴线，不显示网格 */
|
||||
export const categoryAxis = {
|
||||
type: 'category',
|
||||
boundaryGap: true,
|
||||
axisLine: { show: true, lineStyle: { color: PALETTE.axisLine } },
|
||||
axisTick: { show: false },
|
||||
axisLabel: {
|
||||
color: PALETTE.ink,
|
||||
fontSize: 14,
|
||||
fontFamily: FONT,
|
||||
margin: 14,
|
||||
},
|
||||
splitLine: { show: false },
|
||||
};
|
||||
|
||||
/**
|
||||
* 期间标签简写：2026H1 → 26H1，2026H2 → 26全年。
|
||||
* CSV 里保留四位年份（无歧义、便于核对），只在轴上简化显示。
|
||||
* 非 20xx 开头的标签（如"年初"）原样返回。
|
||||
*/
|
||||
export function shortPeriod(label) {
|
||||
return String(label)
|
||||
.replace(/^20(\d{2})H2$/, '$1全年') // H2 = 全年累计
|
||||
.replace(/^20(\d{2})/, '$1'); // 其余去掉世纪前缀
|
||||
}
|
||||
|
||||
/** X 轴（期间）：在 categoryAxis 基础上套用简写 */
|
||||
export const periodAxis = {
|
||||
...categoryAxis,
|
||||
axisLabel: {
|
||||
...categoryAxis.axisLabel,
|
||||
formatter: shortPeriod,
|
||||
},
|
||||
};
|
||||
|
||||
export const titleStyle = {
|
||||
left: 'center',
|
||||
top: 18,
|
||||
textStyle: {
|
||||
color: PALETTE.ink,
|
||||
fontSize: 19,
|
||||
fontWeight: 'bold',
|
||||
fontFamily: FONT,
|
||||
},
|
||||
subtextStyle: {
|
||||
color: PALETTE.grey,
|
||||
fontSize: 13,
|
||||
fontFamily: FONT,
|
||||
lineHeight: 20,
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* 标准布局常量
|
||||
* 经多图表调试验证的标题-图例-绘图区间距，确保视觉呼吸感一致
|
||||
*/
|
||||
export const LAYOUT = {
|
||||
titleTop: 18, // 标题顶部边距（已内置在 titleStyle 中）
|
||||
legendTop: 85, // 图例顶部边距（副标题到图例约 25px）
|
||||
gridTop: 145, // 绘图区顶部边距（图例到绘图区约 60px）
|
||||
};
|
||||
|
||||
export const legendStyle = {
|
||||
top: 62, // ⚠️ 已废弃：请改用 LAYOUT.legendTop 或 standardLegend()
|
||||
itemGap: 26,
|
||||
itemWidth: 18,
|
||||
// ❌ 删除 icon: 'roundRect'
|
||||
// 原因：它会覆盖 ECharts 按系列类型自动生成的图例样式（折线图的"短线+空心圆"）
|
||||
// 现在让每个图表按需设置，或使用 standardLegend() 获得正确默认值
|
||||
textStyle: {
|
||||
color: PALETTE.ink,
|
||||
fontSize: 14,
|
||||
fontFamily: FONT,
|
||||
},
|
||||
};
|
||||
|
||||
/** 折线标注：带白底描边，避免压在网格线上看不清 */
|
||||
export function labelStyle(color, position = 'top') {
|
||||
return {
|
||||
show: true,
|
||||
position,
|
||||
color,
|
||||
fontSize: 13,
|
||||
fontFamily: FONT,
|
||||
fontWeight: 500,
|
||||
distance: 8,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 标准图例配置
|
||||
* 不设置 icon，让 ECharts 按系列类型自动生成（折线→短线+空心圆，柱状→矩形）
|
||||
* 统一使用 LAYOUT.legendTop 保证间距一致
|
||||
*/
|
||||
export function standardLegend(data, options = {}) {
|
||||
return {
|
||||
top: LAYOUT.legendTop,
|
||||
itemGap: options.itemGap ?? 28,
|
||||
textStyle: {
|
||||
color: PALETTE.ink,
|
||||
fontSize: 14,
|
||||
fontFamily: FONT,
|
||||
},
|
||||
data,
|
||||
...options, // 允许覆盖任何字段
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 空心圆点折线系列 —— 标准配置
|
||||
* 白心 + 彩色边框，视觉统一（symbolSize: 9, borderWidth: 2.5）
|
||||
*/
|
||||
export function lineSeries({ name, data, color, labelPosition = 'top', formatter, width = 3 }) {
|
||||
return {
|
||||
name,
|
||||
type: 'line',
|
||||
data,
|
||||
smooth: false,
|
||||
symbol: 'circle',
|
||||
symbolSize: 9,
|
||||
itemStyle: {
|
||||
color: '#fff',
|
||||
borderColor: color,
|
||||
borderWidth: 2.5,
|
||||
},
|
||||
lineStyle: { color, width },
|
||||
emphasis: { focus: 'series' },
|
||||
label: {
|
||||
...labelStyle(color, labelPosition),
|
||||
formatter,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 柱状图系列标准配置
|
||||
* 强制显示所有标签（overflow: 'none'），避免小柱子标签被 ECharts 自动隐藏
|
||||
*/
|
||||
export function barSeries({ name, data, color, barWidth, formatter, ...rest }) {
|
||||
return {
|
||||
name,
|
||||
type: 'bar',
|
||||
data,
|
||||
barWidth,
|
||||
itemStyle: { color },
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
fontFamily: FONT,
|
||||
fontSize: 11,
|
||||
color: PALETTE.ink,
|
||||
formatter: formatter ?? ((p) => p.value),
|
||||
overflow: 'none', // 关键：强制显示所有标签
|
||||
},
|
||||
...rest,
|
||||
};
|
||||
}
|
||||
|
||||
/** 底部注释 */
|
||||
export function footnote(text) {
|
||||
return {
|
||||
type: 'text',
|
||||
left: 'center',
|
||||
bottom: 12,
|
||||
style: {
|
||||
text,
|
||||
fill: PALETTE.grey,
|
||||
fontSize: 12,
|
||||
fontFamily: FONT,
|
||||
lineHeight: 18,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 平铺水印。ECharts 没有原生水印，用 graphic 数组铺满画布。
|
||||
* 旋转 -20°，透明度压到 0.08，不干扰读数。
|
||||
*/
|
||||
export function watermarks(width, height, text = WATERMARK_TEXT) {
|
||||
const items = [];
|
||||
const stepX = 300;
|
||||
const stepY = 200;
|
||||
for (let x = -100; x < width + stepX; x += stepX) {
|
||||
for (let y = 40; y < height + stepY; y += stepY) {
|
||||
const offset = (Math.floor(y / stepY) % 2) * (stepX / 2);
|
||||
items.push({
|
||||
type: 'text',
|
||||
left: x + offset,
|
||||
top: y,
|
||||
silent: true,
|
||||
rotation: 0.35,
|
||||
style: {
|
||||
text,
|
||||
fill: 'rgba(120, 100, 80, 0.10)',
|
||||
fontSize: 20,
|
||||
fontWeight: 'bold',
|
||||
fontFamily: FONT,
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
return items;
|
||||
}
|
||||
Generated
+44
@@ -0,0 +1,44 @@
|
||||
{
|
||||
"name": "echart-demo",
|
||||
"version": "1.0.0",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "echart-demo",
|
||||
"version": "1.0.0",
|
||||
"license": "MIT",
|
||||
"devDependencies": {
|
||||
"echarts": "^5.5.1"
|
||||
}
|
||||
},
|
||||
"node_modules/echarts": {
|
||||
"version": "5.5.1",
|
||||
"resolved": "https://registry.npmjs.org/echarts/-/echarts-5.5.1.tgz",
|
||||
"integrity": "sha512-Fce8upazaAXUVUVsjgV6mBnGuqgO+JNDlcgF79Dksy4+wgGpQB2lmYoO4TSweFg/mZITdpGHomw/cNBJZj1icA==",
|
||||
"dev": true,
|
||||
"license": "Apache-2.0",
|
||||
"dependencies": {
|
||||
"tslib": "2.3.0",
|
||||
"zrender": "5.6.0"
|
||||
}
|
||||
},
|
||||
"node_modules/tslib": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
|
||||
"integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
|
||||
"dev": true,
|
||||
"license": "0BSD"
|
||||
},
|
||||
"node_modules/zrender": {
|
||||
"version": "5.6.0",
|
||||
"resolved": "https://registry.npmjs.org/zrender/-/zrender-5.6.0.tgz",
|
||||
"integrity": "sha512-uzgraf4njmmHAbEUxMJ8Oxg+P3fT04O+9p7gY+wJRVxo8Ge+KmYv0WJev945EH4wFuc4OY2NLXz46FZrWS9xJg==",
|
||||
"dev": true,
|
||||
"license": "BSD-3-Clause",
|
||||
"dependencies": {
|
||||
"tslib": "2.3.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
{
|
||||
"name": "echart-demo",
|
||||
"version": "1.0.0",
|
||||
"description": "财报图表 · 基于 ECharts 和 CSV 数据",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"start": "python3 -m http.server 8899",
|
||||
"dev": "python3 -m http.server 8899",
|
||||
"test": "node test/regress.mjs"
|
||||
},
|
||||
"keywords": [
|
||||
"echarts",
|
||||
"charts",
|
||||
"data-visualization",
|
||||
"财报"
|
||||
],
|
||||
"author": "Joey",
|
||||
"license": "MIT",
|
||||
"devDependencies": {
|
||||
"echarts": "^5.5.1"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,98 @@
|
||||
import * as echarts from 'echarts';
|
||||
import fs from 'fs';
|
||||
// 项目根目录（从 test/regress.mjs 向上一层，或直接指定绝对路径）
|
||||
const P = '/Users/joey/sites/vest-tools/echart-demo/';
|
||||
const {parseCSV}=await import(P+'js/csv.js');
|
||||
const all=[
|
||||
['inventory','inventoryChart','data/inventory.csv'],
|
||||
['margin','marginChart','data/margin.csv'],
|
||||
['twoline','twoLineChart','data/margin.csv'],
|
||||
['growth','growthChart','data/growth.csv'],
|
||||
['fx','fxChart','data/fx.csv'],
|
||||
['ppmt_assets','assetsChart','data/ppmt_assets.csv'],
|
||||
['ppmt_profit','profitChart','data/ppmt_profit.csv'],
|
||||
['ppmt_ip','ipChart','data/ppmt_ip.csv'],
|
||||
['ppmt_category','categoryChart','data/ppmt_category.csv'],
|
||||
['ppmt_sankey','sankeyChart','data/ppmt_sankey_2026h1.csv'],
|
||||
['ppmt_region_yoy','regionChannelYoyChart','data/ppmt_region_channel_yoy.csv'],
|
||||
['ppmt_growth','ppmtGrowthChart','data/ppmt_growth.csv'],
|
||||
['ppmt_margins','ppmtMarginsChart','data/ppmt_margins.csv'],
|
||||
['ppmt_bridge','ppmtBridgeChart','data/ppmt_margin_bridge.csv'],
|
||||
['ppmt_core_profit','ppmtCoreProfitChart','data/ppmt_core_profit.csv'],
|
||||
['ppmt_core_margin','ppmtCoreMarginChart','data/ppmt_core_margin.csv'],
|
||||
['ppmt_ip_share','ppmtIpShareChart','data/ppmt_ip_share_2026h1.csv'],
|
||||
['ppmt_ip_share_history','ppmtIpShareHistoryChart','data/ppmt_ip_share_history.csv'],
|
||||
['ppmt_ip_ex_monsters','ppmtIpExMonstersChart','data/ppmt_ip_ex_monsters.csv'],
|
||||
];
|
||||
|
||||
// 可传图表名只跑指定的（改一张图不用全量回归）：
|
||||
// node test/regress.mjs ppmt_ip_share ppmt_core_margin
|
||||
const only=process.argv.slice(2);
|
||||
const targets=only.length>0 ? all.filter(([f])=>only.includes(f)) : all;
|
||||
if(only.length>0){
|
||||
const missing=only.filter(f=>!all.some(([name])=>name===f));
|
||||
if(missing.length>0) console.log(`⚠ 未找到图表：${missing.join(', ')}`);
|
||||
}
|
||||
|
||||
// 样式规范断言：从核心利润/利润率拆解图总结的标准
|
||||
const STYLE_RULES={
|
||||
legendTop:85, // 固定值：副标题到图例约25px
|
||||
gridTop:145, // 固定值：图例到绘图区约60px
|
||||
lineSeries:{ // 折线标准样式（空心圆点）
|
||||
symbolSize:9,
|
||||
borderWidth:2.5,
|
||||
fill:'#fff', // 白心
|
||||
},
|
||||
};
|
||||
|
||||
let ok=0,fail=0,styleWarnings=[];
|
||||
for(const [f,fn,csv] of targets){
|
||||
try{
|
||||
const mod=await import(P+`js/charts/${f}.js`);
|
||||
const rows=parseCSV(fs.readFileSync(P+csv,'utf8'));
|
||||
const c=echarts.init(null,null,{renderer:'svg',ssr:true,width:1100,height:720});
|
||||
const opt=mod[fn](rows,{width:1100,height:720});
|
||||
c.setOption(opt);
|
||||
const svg=c.renderToSVGString();
|
||||
|
||||
// 1. SVG 格式检查（字体引号）
|
||||
const badAttr=/style="[^"]*"[^"=>\s][^>]*>/.test(svg.slice(0,3000));
|
||||
|
||||
// 2. 样式规范检查（跳过无图例的图表）
|
||||
if(opt.legend?.top!==undefined){
|
||||
if(opt.legend.top!==STYLE_RULES.legendTop){
|
||||
styleWarnings.push(`${f}: legend.top=${opt.legend.top} (期望${STYLE_RULES.legendTop})`);
|
||||
}
|
||||
}
|
||||
if(opt.grid?.top!==undefined && opt.legend?.top!==undefined){
|
||||
if(opt.grid.top!==STYLE_RULES.gridTop){
|
||||
styleWarnings.push(`${f}: grid.top=${opt.grid.top} (期望${STYLE_RULES.gridTop})`);
|
||||
}
|
||||
}
|
||||
|
||||
// 3. 折线圆点样式检查（在 SVG 里验证 symbolSize 和 borderWidth）
|
||||
const circles=[...svg.matchAll(/<path d="M1 0A1[^"]*" transform="matrix\(([\d.]+),0,0,[\d.]+,[^)]+\)" fill="#fff" stroke="[^"]*" stroke-width="([\d.]+)"/g)];
|
||||
if(circles.length>0){
|
||||
const scale=+circles[0][1], sw=+circles[0][2];
|
||||
const symbolSize=scale*2, borderWidth=sw*scale;
|
||||
if(Math.abs(symbolSize-STYLE_RULES.lineSeries.symbolSize)>0.1){
|
||||
styleWarnings.push(`${f}: 折线 symbolSize=${symbolSize.toFixed(1)} (期望${STYLE_RULES.lineSeries.symbolSize})`);
|
||||
}
|
||||
if(Math.abs(borderWidth-STYLE_RULES.lineSeries.borderWidth)>0.1){
|
||||
styleWarnings.push(`${f}: 折线 borderWidth=${borderWidth.toFixed(1)} (期望${STYLE_RULES.lineSeries.borderWidth})`);
|
||||
}
|
||||
}
|
||||
|
||||
console.log(`${badAttr?'⚠':'✓'} ${f.padEnd(17)} ${String(svg.length).padStart(6)}B`);
|
||||
ok++; c.dispose();
|
||||
}catch(e){console.log(`✗ ${f.padEnd(17)} ${e.message}`);fail++;}
|
||||
}
|
||||
console.log(`\n${ok} 张成功 / ${fail} 张失败`);
|
||||
|
||||
if(styleWarnings.length>0){
|
||||
console.log(`\n⚠ ${styleWarnings.length} 处样式偏离规范:`);
|
||||
styleWarnings.forEach(w=>console.log(` ${w}`));
|
||||
}else{
|
||||
console.log('✓ 样式规范全部符合');
|
||||
}
|
||||
process.exit(fail>0?1:0);
|
||||
Reference in New Issue
Block a user