commit 3ae396776d742bfd737d3bc80f07936f7158b67b Author: Joey Date: Sun Aug 23 21:23:41 2026 +0800 feat: 构建泡泡玛特相关图表 diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..5e85fe6 --- /dev/null +++ b/.gitignore @@ -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/ diff --git a/CLAUDE.md b/CLAUDE.md new file mode 100644 index 0000000..2bf1e2b --- /dev/null +++ b/CLAUDE.md @@ -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`，改一处全局生效。 diff --git a/README.md b/README.md new file mode 100644 index 0000000..0fe36d4 --- /dev/null +++ b/README.md @@ -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` 加一个 `
` 容器 +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**：用原生 ` + + + +
+

财报图表

+

改 data/*.csv 后点「重新加载」即可更新

+ +
+ +
+
+ data/inventory.csv + +
+
+
+ +
+
+ data/margin.csv + +
+
+
+ +
+
+ data/margin.csv（毛利率 + 净利率两列） + +
+
+
+ +
+
+ data/growth.csv + +
+
+
+ +
+
+ data/fx.csv + +
+
+
+ +
+ +
+

📊 泡泡玛特财报分析

+

基于 data/ppmt.xlsx 自动生成

+
+ +
+
+ data/ppmt_assets.csv + +
+
+
+ +
+
+ data/ppmt_profit.csv + +
+
+
+ +
+
+ data/ppmt_ip.csv + +
+
+
+ +
+
+ data/ppmt_category.csv + +
+
+
+ +
+
+ data/ppmt_sankey_2026h1.csv + +
+
+
+ +
+
+ data/ppmt_region_channel_yoy.csv + +
+
+
+ +
+
+ data/ppmt_growth.csv + +
+
+
+ +
+
+ data/ppmt_margins.csv + +
+
+
+ +
+
+ data/ppmt_margin_bridge.csv + +
+
+
+ +
+
+ data/ppmt_core_profit.csv + +
+
+
+ +
+
+ data/ppmt_core_margin.csv + +
+
+
+ +
+
+ data/ppmt_ip_share_2026h1.csv + +
+
+
+ +
+
+ data/ppmt_ip_share_history.csv + +
+
+
+ +
+
+ data/ppmt_ip_ex_monsters.csv + +
+
+
+ + + + diff --git a/js/charts/fx.js b/js/charts/fx.js new file mode 100644 index 0000000..6626fa5 --- /dev/null +++ b/js/charts/fx.js @@ -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 谨制' + ), + ], + }; +} diff --git a/js/charts/growth.js b/js/charts/growth.js new file mode 100644 index 0000000..ec871b7 --- /dev/null +++ b/js/charts/growth.js @@ -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'), + ], + }; +} diff --git a/js/charts/inventory.js b/js/charts/inventory.js new file mode 100644 index 0000000..9602429 --- /dev/null +++ b/js/charts/inventory.js @@ -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' + ), + ], + }; +} diff --git a/js/charts/margin.js b/js/charts/margin.js new file mode 100644 index 0000000..603c621 --- /dev/null +++ b/js/charts/margin.js @@ -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'), + ], + }; +} diff --git a/js/charts/ppmt_assets.js b/js/charts/ppmt_assets.js new file mode 100644 index 0000000..8d68062 --- /dev/null +++ b/js/charts/ppmt_assets.js @@ -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'), + ], + }; +} diff --git a/js/charts/ppmt_bridge.js b/js/charts/ppmt_bridge.js new file mode 100644 index 0000000..7e0be77 --- /dev/null +++ b/js/charts/ppmt_bridge.js @@ -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 `${items[i]}
${values[i].toFixed(2)}%`; + const sign = types[i] === 'pos' ? '+' : '−'; + return `${items[i]}
${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' + ), + ], + }; +} diff --git a/js/charts/ppmt_category.js b/js/charts/ppmt_category.js new file mode 100644 index 0000000..892fccf --- /dev/null +++ b/js/charts/ppmt_category.js @@ -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 = `${params[0].axisValue}
`; + let total = 0; + params.forEach(p => { + total += p.value; + result += `${p.marker}${p.seriesName}: ${p.value.toFixed(2)} 亿元
`; + }); + result += `合计: ${total.toFixed(2)} 亿元`; + 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'), + ], + }; +} diff --git a/js/charts/ppmt_core_margin.js b/js/charts/ppmt_core_margin.js new file mode 100644 index 0000000..cf5d4e7 --- /dev/null +++ b/js/charts/ppmt_core_margin.js @@ -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' + ), + ], + }; +} diff --git a/js/charts/ppmt_core_profit.js b/js/charts/ppmt_core_profit.js new file mode 100644 index 0000000..6a6e80c --- /dev/null +++ b/js/charts/ppmt_core_profit.js @@ -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 = `${params[0].axisValue}
`; + params.forEach((p) => { + if (p.seriesName === '核心利润') { + result += `${p.marker}${p.seriesName}: ${p.value.toFixed(1)}亿
`; + } else if (p.seriesName === '同比增速' && p.value !== null) { + result += `${p.marker}${p.seriesName}: ${p.value > 0 ? '+' : ''}${p.value.toFixed(1)}%
`; + } + }); + 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' + ), + ], + }; +} diff --git a/js/charts/ppmt_growth.js b/js/charts/ppmt_growth.js new file mode 100644 index 0000000..4cbecc0 --- /dev/null +++ b/js/charts/ppmt_growth.js @@ -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'), + ], + }; +} diff --git a/js/charts/ppmt_ip.js b/js/charts/ppmt_ip.js new file mode 100644 index 0000000..3187b79 --- /dev/null +++ b/js/charts/ppmt_ip.js @@ -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'), + ], + }; +} diff --git a/js/charts/ppmt_ip_ex_monsters.js b/js/charts/ppmt_ip_ex_monsters.js new file mode 100644 index 0000000..273e018 --- /dev/null +++ b/js/charts/ppmt_ip_ex_monsters.js @@ -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 = `${ps[0].axisValue}
`; + ps.forEach((p) => { + if (p.seriesName === '除MONSTERS外收入') { + out += `${p.marker}${p.seriesName}: ${p.value.toFixed(1)} 亿元
`; + } else if (p.value !== null && p.value !== '') { + out += `${p.marker}${p.seriesName}: ${p.value > 0 ? '+' : ''}${p.value.toFixed(1)}%
`; + } + }); + 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'), + ], + }; +} diff --git a/js/charts/ppmt_ip_share.js b/js/charts/ppmt_ip_share.js new file mode 100644 index 0000000..1e1f682 --- /dev/null +++ b/js/charts/ppmt_ip_share.js @@ -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'), + ], + }; +} diff --git a/js/charts/ppmt_ip_share_history.js b/js/charts/ppmt_ip_share_history.js new file mode 100644 index 0000000..6833f38 --- /dev/null +++ b/js/charts/ppmt_ip_share_history.js @@ -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 = `${ps[0].axisValue}　合计 ${totals[i].toFixed(1)} 亿元
`; + 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('
'); + }, + }, + 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'), + ], + }; +} diff --git a/js/charts/ppmt_margins.js b/js/charts/ppmt_margins.js new file mode 100644 index 0000000..8a58a6b --- /dev/null +++ b/js/charts/ppmt_margins.js @@ -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' + ), + ], + }; +} diff --git a/js/charts/ppmt_profit.js b/js/charts/ppmt_profit.js new file mode 100644 index 0000000..b30bc1e --- /dev/null +++ b/js/charts/ppmt_profit.js @@ -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'), + ], + }; +} diff --git a/js/charts/ppmt_region_channel.js b/js/charts/ppmt_region_channel.js new file mode 100644 index 0000000..1da2da1 --- /dev/null +++ b/js/charts/ppmt_region_channel.js @@ -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 = `${params[0].axisValue}
`; + params.forEach(p => { + const value = Math.abs(p.value); + result += `${p.marker}${p.seriesName}: ${value.toFixed(2)} 亿元
`; + }); + 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'), + ], + }; +} diff --git a/js/charts/ppmt_region_yoy.js b/js/charts/ppmt_region_yoy.js new file mode 100644 index 0000000..723c171 --- /dev/null +++ b/js/charts/ppmt_region_yoy.js @@ -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 = `${params[0].axisValue}
`; + params.forEach(p => { + const value = p.value; + const sign = value >= 0 ? '+' : ''; + result += `${p.marker}${p.seriesName}: ${sign}${value.toFixed(1)}%
`; + }); + 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'), + ], + }; +} diff --git a/js/charts/ppmt_sankey.js b/js/charts/ppmt_sankey.js new file mode 100644 index 0000000..5724753 --- /dev/null +++ b/js/charts/ppmt_sankey.js @@ -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}
${params.data.value.toFixed(2)} 亿元`; + } else { + return `${params.name}
总额: ${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'), + ], + }; +} diff --git a/js/charts/twoline.js b/js/charts/twoline.js new file mode 100644 index 0000000..488c84b --- /dev/null +++ b/js/charts/twoline.js @@ -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'), + ], + }; +} diff --git a/js/csv.js b/js/csv.js new file mode 100644 index 0000000..2a452e2 --- /dev/null +++ b/js/csv.js @@ -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]); +} diff --git a/js/main.js b/js/main.js new file mode 100644 index 0000000..74b5a63 --- /dev/null +++ b/js/main.js @@ -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 = `
${err.message}
`; + 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); + }); +}); diff --git a/js/theme.js b/js/theme.js new file mode 100644 index 0000000..dec6e37 --- /dev/null +++ b/js/theme.js @@ -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; +} diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..3eaee81 --- /dev/null +++ b/package-lock.json @@ -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" + } + } + } +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..4c035ab --- /dev/null +++ b/package.json @@ -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" + } +} diff --git a/test/regress.mjs b/test/regress.mjs new file mode 100644 index 0000000..f92f549 --- /dev/null +++ b/test/regress.mjs @@ -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(/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);