diff --git a/CLAUDE.md b/CLAUDE.md
index 7c98a9f..72afd82 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -95,6 +95,6 @@ pnpm test # 全量,只在改了 t
## 脚注
-`footnote()` 单行约 60 字符封顶(1200px 画布),超了用 `\n` 手动断行。结尾统一 `| @思考的Joey`。
+`footnote()` 单行约 60 字符封顶(1200px 画布),超了用 `\n` 手动断行。结尾统一 `| @Joey知行记`。
水印文案在 `theme.js` 的 `WATERMARK_TEXT`,改一处全局生效。
diff --git a/css/style.css b/css/style.css
index 50b795d..3403547 100644
--- a/css/style.css
+++ b/css/style.css
@@ -28,7 +28,10 @@ button {
.sidebar-title { margin: 0; }
.reload-button,
-.export-button {
+.export-button,
+.cart-button,
+.cart-export-button,
+.primary-button {
padding: 7px 13px;
border: 1px solid var(--line);
border-radius: 6px;
@@ -57,6 +60,186 @@ button {
.reload-button:hover { opacity: .88; transform: rotate(-45deg); }
.export-button:hover { color: var(--accent); border-color: var(--accent); }
+/* ── 合并队列(购物车)────────────────────────────── */
+
+.cart-button { font-size: 12px; }
+.cart-button:hover { color: var(--accent); border-color: var(--accent); }
+.cart-button[data-in-cart="true"] {
+ color: #fff;
+ background: var(--accent);
+ border-color: var(--accent);
+}
+
+.cart-bar[hidden] { display: none; }
+
+.cart-bar {
+ position: fixed;
+ left: 50%;
+ bottom: 18px;
+ transform: translateX(-50%);
+ z-index: 20;
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ max-width: min(1160px, calc(100vw - 32px));
+ padding: 9px 12px;
+ background: rgba(255, 255, 255, .97);
+ border: 1px solid var(--line);
+ border-radius: 12px;
+ box-shadow: 0 6px 24px rgba(0, 0, 0, .12);
+}
+
+.cart-label {
+ color: var(--muted);
+ font-size: 12px;
+ font-weight: 600;
+ white-space: nowrap;
+}
+
+.cart-chips {
+ display: flex;
+ gap: 6px;
+ max-width: 44vw;
+ overflow-x: auto;
+ scrollbar-width: none;
+}
+.cart-chips::-webkit-scrollbar { display: none; }
+
+.cart-chip {
+ display: flex;
+ align-items: center;
+ flex: 0 0 auto;
+ gap: 2px;
+ padding: 3px 4px 3px 10px;
+ background: var(--accent-soft);
+ border-radius: 6px;
+}
+
+.cart-chip-name {
+ max-width: 150px;
+ overflow: hidden;
+ color: var(--ink);
+ font-size: 12px;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.cart-chip-button {
+ padding: 2px 4px;
+ border: 0;
+ border-radius: 4px;
+ background: transparent;
+ color: var(--muted);
+ font-size: 12px;
+ line-height: 1.4;
+}
+.cart-chip-button:hover:not(:disabled) { color: var(--accent); }
+.cart-chip-button:disabled { opacity: .3; cursor: default; }
+
+.cart-divider { width: 1px; height: 22px; background: var(--line); }
+
+.cart-modes {
+ display: flex;
+ flex: 0 0 auto;
+ padding: 2px;
+ background: #f4f2ee;
+ border-radius: 6px;
+}
+
+.cart-mode-button {
+ padding: 4px 8px;
+ border: 0;
+ border-radius: 5px;
+ background: transparent;
+ color: var(--muted);
+ font-size: 12px;
+ white-space: nowrap;
+}
+.cart-mode-button[data-active="true"] {
+ color: var(--accent);
+ background: var(--surface);
+ box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
+}
+
+.cart-export-button { color: #fff; background: var(--accent); border-color: var(--accent); white-space: nowrap; }
+.cart-export-button:hover { opacity: .9; }
+.cart-clear-button { padding: 7px 8px; border: 0; background: transparent; color: var(--muted); font-size: 12px; white-space: nowrap; }
+.cart-clear-button:hover { color: #a63f32; }
+
+/* ── 合并预览弹窗 ────────────────────────────────── */
+
+.modal-overlay {
+ position: fixed;
+ inset: 0;
+ z-index: 30;
+ display: grid;
+ place-items: center;
+ padding: 24px;
+ background: rgba(51, 51, 51, .45);
+}
+
+.modal {
+ display: flex;
+ flex-direction: column;
+ max-width: min(860px, 100%);
+ max-height: calc(100vh - 48px);
+ background: var(--surface);
+ border-radius: 12px;
+ overflow: hidden;
+}
+
+.modal-head {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ padding: 12px 16px;
+ border-bottom: 1px solid var(--line);
+}
+
+.modal-title { margin: 0; font-size: 14px; }
+.modal-notice { color: #a67c2b; font-size: 12px; }
+
+.modal-close {
+ margin-left: auto;
+ padding: 2px 8px;
+ border: 0;
+ background: transparent;
+ color: var(--muted);
+ font-size: 16px;
+}
+.modal-close:hover { color: var(--ink); }
+
+.modal-body {
+ display: grid;
+ gap: 20px;
+ overflow-y: auto;
+ padding: 16px;
+}
+
+.preview-item {
+ display: grid;
+ gap: 10px;
+ justify-items: center;
+}
+
+.preview-canvas {
+ max-width: 100%;
+ height: auto;
+ border: 1px solid var(--line);
+ border-radius: 6px;
+}
+
+.modal-foot {
+ display: flex;
+ justify-content: flex-end;
+ gap: 10px;
+ padding: 12px 16px;
+ border-top: 1px solid var(--line);
+}
+
+.primary-button { color: #fff; background: var(--accent); border-color: var(--accent); }
+.primary-button:hover { opacity: .9; }
+
.app-layout {
display: grid;
grid-template-columns: 184px minmax(0, 1fr) 184px;
@@ -235,7 +418,9 @@ button {
.tab-button { flex: 0 0 auto; }
.card { scroll-margin-top: 120px; }
.card-bar { align-items: flex-start; flex-wrap: wrap; }
- .export-button { margin-left: auto; }
+ .cart-button { margin-left: auto; }
+ .cart-bar { left: 12px; right: 12px; transform: none; flex-wrap: wrap; }
+ .cart-chips { max-width: none; }
.chart { min-width: 560px; }
.card { overflow-x: auto; }
}
diff --git a/data/ppmt/ppmt_channel_amount_americas.csv b/data/ppmt/ppmt_channel_amount_americas.csv
new file mode 100644
index 0000000..4180db4
--- /dev/null
+++ b/data/ppmt/ppmt_channel_amount_americas.csv
@@ -0,0 +1,8 @@
+period,retail,robot_store,own_app,tiktok,amazon,online_other,wholesale,total_revenue
+2024H1,0.9,0.1,0.3,0.1,0.0,0.2,0.2,1.83
+2024H2,2.5,0.3,1.6,0.9,0.0,0.5,0.4,6.19
+2024FY,3.4,0.4,1.9,1.1,0.0,0.7,0.6,8.02
+2025H1,7.4,1.1,8.9,3.1,0.0,1.3,1.0,22.65
+2025H2,12.7,1.3,19.8,7.3,0.0,3.2,1.2,45.42
+2025FY,20.0,2.3,28.7,10.4,0.0,4.4,2.2,68.07
+2026H1,9.0,1.0,4.9,0.0,1.7,0.6,1.6,18.91
diff --git a/data/ppmt/ppmt_channel_amount_americas_annual.csv b/data/ppmt/ppmt_channel_amount_americas_annual.csv
new file mode 100644
index 0000000..8d1827b
--- /dev/null
+++ b/data/ppmt/ppmt_channel_amount_americas_annual.csv
@@ -0,0 +1,3 @@
+period,retail,robot_store,own_app,tiktok,amazon,online_other,wholesale,total_revenue
+2024FY,3.4,0.4,1.9,1.1,0.0,0.7,0.6,8.02
+2025FY,20.0,2.3,28.7,10.4,0.0,4.4,2.2,68.07
diff --git a/data/ppmt/ppmt_channel_amount_americas_halfyear.csv b/data/ppmt/ppmt_channel_amount_americas_halfyear.csv
new file mode 100644
index 0000000..20418e8
--- /dev/null
+++ b/data/ppmt/ppmt_channel_amount_americas_halfyear.csv
@@ -0,0 +1,6 @@
+period,retail,robot_store,own_app,tiktok,amazon,online_other,wholesale,total_revenue
+2024H1,0.9,0.1,0.3,0.1,0.0,0.2,0.2,1.83
+2024H2,2.5,0.3,1.6,0.9,0.0,0.5,0.4,6.19
+2025H1,7.4,1.1,8.9,3.1,0.0,1.3,1.0,22.65
+2025H2,12.7,1.3,19.8,7.3,0.0,3.2,1.2,45.42
+2026H1,9.0,1.0,4.9,0.0,1.7,0.6,1.6,18.91
diff --git a/data/ppmt/ppmt_channel_amount_apac.csv b/data/ppmt/ppmt_channel_amount_apac.csv
new file mode 100644
index 0000000..bd3fe5c
--- /dev/null
+++ b/data/ppmt/ppmt_channel_amount_apac.csv
@@ -0,0 +1,8 @@
+period,retail,robot_store,own_app,shopee,online_other,wholesale,total_revenue
+2024H1,4.8,0.2,0.4,0.4,0.8,1.3,7.97
+2024H2,11.8,0.2,2.6,2.4,3.0,3.0,23.13
+2024FY,16.7,0.4,3.0,2.9,3.8,4.3,31.10
+2025H1,14.9,0.3,3.1,2.8,4.8,2.6,28.51
+2025H2,28.3,0.6,11.4,2.9,5.5,2.9,51.60
+2025FY,43.2,0.9,14.6,5.7,10.3,5.4,80.11
+2026H1,17.2,0.6,3.4,1.1,2.0,1.6,25.76
diff --git a/data/ppmt/ppmt_channel_amount_apac_annual.csv b/data/ppmt/ppmt_channel_amount_apac_annual.csv
new file mode 100644
index 0000000..7faa849
--- /dev/null
+++ b/data/ppmt/ppmt_channel_amount_apac_annual.csv
@@ -0,0 +1,3 @@
+period,retail,robot_store,own_app,shopee,online_other,wholesale,total_revenue
+2024FY,16.7,0.4,3.0,2.9,3.8,4.3,31.10
+2025FY,43.2,0.9,14.6,5.7,10.3,5.4,80.11
diff --git a/data/ppmt/ppmt_channel_amount_apac_halfyear.csv b/data/ppmt/ppmt_channel_amount_apac_halfyear.csv
new file mode 100644
index 0000000..a71c548
--- /dev/null
+++ b/data/ppmt/ppmt_channel_amount_apac_halfyear.csv
@@ -0,0 +1,6 @@
+period,retail,robot_store,own_app,shopee,online_other,wholesale,total_revenue
+2024H1,4.8,0.2,0.4,0.4,0.8,1.3,7.97
+2024H2,11.8,0.2,2.6,2.4,3.0,3.0,23.13
+2025H1,14.9,0.3,3.1,2.8,4.8,2.6,28.51
+2025H2,28.3,0.6,11.4,2.9,5.5,2.9,51.60
+2026H1,17.2,0.6,3.4,1.1,2.0,1.6,25.76
diff --git a/data/ppmt/ppmt_channel_amount_china.csv b/data/ppmt/ppmt_channel_amount_china.csv
new file mode 100644
index 0000000..eb58795
--- /dev/null
+++ b/data/ppmt/ppmt_channel_amount_china.csv
@@ -0,0 +1,8 @@
+period,retail,robot_store,roboshop,tmall,douyin,online_other,wholesale,total_revenue
+2024H1,20.0,3.4,4.0,2.0,2.1,1.3,2.4,35.22
+2024H2,26.0,4.1,7.2,4.3,3.9,3.0,5.2,53.65
+2024FY,46.0,7.5,11.1,6.3,6.0,4.3,7.6,88.87
+2025H1,44.1,6.8,11.3,6.6,5.6,5.9,2.6,82.82
+2025H2,56.7,6.7,23.0,11.3,10.3,11.3,6.5,125.69
+2025FY,100.8,13.5,34.2,17.9,15.9,17.2,9.1,208.51
+2026H1,60.9,7.8,20.6,9.0,9.8,8.4,5.5,122.00
diff --git a/data/ppmt/ppmt_channel_amount_china_annual.csv b/data/ppmt/ppmt_channel_amount_china_annual.csv
new file mode 100644
index 0000000..737e5ec
--- /dev/null
+++ b/data/ppmt/ppmt_channel_amount_china_annual.csv
@@ -0,0 +1,3 @@
+period,retail,robot_store,roboshop,tmall,douyin,online_other,wholesale,total_revenue
+2024FY,46.0,7.5,11.1,6.3,6.0,4.3,7.6,88.87
+2025FY,100.8,13.5,34.2,17.9,15.9,17.2,9.1,208.51
diff --git a/data/ppmt/ppmt_channel_amount_china_halfyear.csv b/data/ppmt/ppmt_channel_amount_china_halfyear.csv
new file mode 100644
index 0000000..cab8fb1
--- /dev/null
+++ b/data/ppmt/ppmt_channel_amount_china_halfyear.csv
@@ -0,0 +1,6 @@
+period,retail,robot_store,roboshop,tmall,douyin,online_other,wholesale,total_revenue
+2024H1,20.0,3.4,4.0,2.0,2.1,1.3,2.4,35.22
+2024H2,26.0,4.1,7.2,4.3,3.9,3.0,5.2,53.65
+2025H1,44.1,6.8,11.3,6.6,5.6,5.9,2.6,82.82
+2025H2,56.7,6.7,23.0,11.3,10.3,11.3,6.5,125.69
+2026H1,60.9,7.8,20.6,9.0,9.8,8.4,5.5,122.00
diff --git a/data/ppmt/ppmt_channel_amount_europe.csv b/data/ppmt/ppmt_channel_amount_europe.csv
new file mode 100644
index 0000000..6c14ed3
--- /dev/null
+++ b/data/ppmt/ppmt_channel_amount_europe.csv
@@ -0,0 +1,8 @@
+period,retail,robot_store,own_app,online_other,wholesale,total_revenue
+2024H1,0.4,0.0,0.0,0.1,0.1,0.58
+2024H2,1.2,0.0,0.2,0.2,0.2,1.81
+2024FY,1.6,0.0,0.2,0.3,0.3,2.39
+2025H1,2.7,0.0,0.8,0.8,0.4,4.77
+2025H2,5.8,0.1,2.3,1.1,0.4,9.74
+2025FY,8.6,0.2,3.2,1.9,0.7,14.51
+2026H1,4.0,0.1,0.5,0.1,0.2,5.06
diff --git a/data/ppmt/ppmt_channel_amount_europe_annual.csv b/data/ppmt/ppmt_channel_amount_europe_annual.csv
new file mode 100644
index 0000000..e845bb3
--- /dev/null
+++ b/data/ppmt/ppmt_channel_amount_europe_annual.csv
@@ -0,0 +1,3 @@
+period,retail,robot_store,own_app,online_other,wholesale,total_revenue
+2024FY,1.6,0.0,0.2,0.3,0.3,2.39
+2025FY,8.6,0.2,3.2,1.9,0.7,14.51
diff --git a/data/ppmt/ppmt_channel_amount_europe_halfyear.csv b/data/ppmt/ppmt_channel_amount_europe_halfyear.csv
new file mode 100644
index 0000000..7df5abc
--- /dev/null
+++ b/data/ppmt/ppmt_channel_amount_europe_halfyear.csv
@@ -0,0 +1,6 @@
+period,retail,robot_store,own_app,online_other,wholesale,total_revenue
+2024H1,0.4,0.0,0.0,0.1,0.1,0.58
+2024H2,1.2,0.0,0.2,0.2,0.2,1.81
+2025H1,2.7,0.0,0.8,0.8,0.4,4.77
+2025H2,5.8,0.1,2.3,1.1,0.4,9.74
+2026H1,4.0,0.1,0.5,0.1,0.2,5.06
diff --git a/js/charts/brk_holdings.js b/js/charts/brk_holdings.js
index 7921ddf..8ea9041 100644
--- a/js/charts/brk_holdings.js
+++ b/js/charts/brk_holdings.js
@@ -168,7 +168,7 @@ export function brkHoldingsChart(rows, { width, height }) {
})),
graphic: [
...watermarks(width, height),
- footnote('绿色=相对上一年新增;红色=相对上一年清仓;蓝色深浅=相对持股数量 | @思考的Joey'),
+ footnote('绿色=相对上一年新增;红色=相对上一年清仓;蓝色深浅=相对持股数量 | @Joey知行记'),
],
};
}
diff --git a/js/charts/growth.js b/js/charts/growth.js
index 788650b..fa1ec83 100644
--- a/js/charts/growth.js
+++ b/js/charts/growth.js
@@ -72,7 +72,7 @@ export function growthChart(rows, { width, height }) {
],
graphic: [
...watermarks(width, height),
- footnote('示例数据 | @思考的Joey'),
+ footnote('示例数据 | @Joey知行记'),
],
};
}
diff --git a/js/charts/index.js b/js/charts/index.js
index c7e6ec5..68e440e 100644
--- a/js/charts/index.js
+++ b/js/charts/index.js
@@ -26,7 +26,7 @@ import { workingCapitalDaysChart } from './ppmt_working_capital_days.js';
import { expenseStructureChart } from './ppmt_expense_structure.js';
import { channelRevenueChart } from './ppmt_channel_revenue.js';
import { channelShareChart } from './ppmt_channel_share.js';
-import { makeRegionChannelShareChart } from './ppmt_channel_share_region.js';
+import { makeRegionChannelShareChart, makeRegionChannelAmountChart } from './ppmt_channel_share_region.js';
import { storesRetailChart } from './ppmt_stores_retail.js';
import { storesRobotChart } from './ppmt_stores_robot.js';
import { regionShareChart } from './ppmt_region_share.js';
@@ -70,6 +70,10 @@ export const chartRegistry = {
'ppmt-channel-share-apac': makeRegionChannelShareChart('apac'),
'ppmt-channel-share-americas': makeRegionChannelShareChart('americas'),
'ppmt-channel-share-europe': makeRegionChannelShareChart('europe'),
+ 'ppmt-channel-amount-china': makeRegionChannelAmountChart('china'),
+ 'ppmt-channel-amount-apac': makeRegionChannelAmountChart('apac'),
+ 'ppmt-channel-amount-americas': makeRegionChannelAmountChart('americas'),
+ 'ppmt-channel-amount-europe': makeRegionChannelAmountChart('europe'),
'ppmt-stores-retail': storesRetailChart,
'ppmt-stores-robot': storesRobotChart,
'ppmt-region-share': regionShareChart,
diff --git a/js/charts/inventory.js b/js/charts/inventory.js
index 39aef4f..a4cc5d3 100644
--- a/js/charts/inventory.js
+++ b/js/charts/inventory.js
@@ -103,7 +103,7 @@ export function inventoryChart(rows, { width, height }) {
...watermarks(width, height),
footnote(
'周转天数=平均存货÷当期销售成本×期间天数(半年181/年度365,期初=上一年末,日历天数口径);' +
- '与公司披露一致:23年133/24年102/25年123/26H1 201天 | @思考的Joey'
+ '与公司披露一致:23年133/24年102/25年123/26H1 201天 | @Joey知行记'
),
],
};
diff --git a/js/charts/margin.js b/js/charts/margin.js
index 6f4c45c..001e443 100644
--- a/js/charts/margin.js
+++ b/js/charts/margin.js
@@ -74,7 +74,7 @@ export function marginChart(rows, { width, height }) {
],
graphic: [
...watermarks(width, height),
- footnote('示例数据 | @思考的Joey'),
+ footnote('示例数据 | @Joey知行记'),
],
};
}
diff --git a/js/charts/ppmt_assets.js b/js/charts/ppmt_assets.js
index abc729b..eb58c87 100644
--- a/js/charts/ppmt_assets.js
+++ b/js/charts/ppmt_assets.js
@@ -105,7 +105,7 @@ export function assetsChart(rows, { width, height, view = 'all' }) {
],
graphic: [
...watermarks(width, height),
- footnote('数据来源:泡泡玛特财报 | @思考的Joey'),
+ footnote('数据来源:泡泡玛特财报 | @Joey知行记'),
],
};
}
diff --git a/js/charts/ppmt_bridge.js b/js/charts/ppmt_bridge.js
index 5da4713..4fd6b87 100644
--- a/js/charts/ppmt_bridge.js
+++ b/js/charts/ppmt_bridge.js
@@ -109,7 +109,7 @@ export function ppmtBridgeChart(rows, { width, height }) {
...watermarks(width, height),
footnote(
'各项为占营收百分点,已折算为对净利率影响(×税盾系数)\n' +
- '其他收益净额:26H1净损失6.89亿,主要为汇兑损失7.20亿(25H1为汇兑收益1.20亿) | @思考的Joey'
+ '其他收益净额:26H1净损失6.89亿,主要为汇兑损失7.20亿(25H1为汇兑收益1.20亿) | @Joey知行记'
),
],
};
diff --git a/js/charts/ppmt_cash_conversion.js b/js/charts/ppmt_cash_conversion.js
index d90693f..ea25f17 100644
--- a/js/charts/ppmt_cash_conversion.js
+++ b/js/charts/ppmt_cash_conversion.js
@@ -89,7 +89,7 @@ export function cashConversionChart(rows, { width, height, view = 'all' }) {
],
graphic: [
...watermarks(width, height),
- footnote('数据来源:泡泡玛特合并现金流量表、利润表;H2为单独半年 | @思考的Joey'),
+ footnote('数据来源:泡泡玛特合并现金流量表、利润表;H2为单独半年 | @Joey知行记'),
],
};
}
diff --git a/js/charts/ppmt_cashflow_composition.js b/js/charts/ppmt_cashflow_composition.js
index 2993b50..6632d66 100644
--- a/js/charts/ppmt_cashflow_composition.js
+++ b/js/charts/ppmt_cashflow_composition.js
@@ -57,7 +57,7 @@ export function cashflowCompositionChart(rows, { width, height, view = 'all' })
],
graphic: [
...watermarks(width, height),
- footnote('数据来源:泡泡玛特合并现金流量表;H2为单独半年 | @思考的Joey'),
+ footnote('数据来源:泡泡玛特合并现金流量表;H2为单独半年 | @Joey知行记'),
],
};
}
diff --git a/js/charts/ppmt_category.js b/js/charts/ppmt_category.js
index 370cccf..a782a69 100644
--- a/js/charts/ppmt_category.js
+++ b/js/charts/ppmt_category.js
@@ -122,7 +122,7 @@ export function categoryChart(rows, { width, height, view = 'all' }) {
],
graphic: [
...watermarks(width, height),
- footnote('数据来源:泡泡玛特财报 | @思考的Joey'),
+ footnote('数据来源:泡泡玛特财报 | @Joey知行记'),
],
};
}
diff --git a/js/charts/ppmt_channel_revenue.js b/js/charts/ppmt_channel_revenue.js
index 9d3f8fe..e899c18 100644
--- a/js/charts/ppmt_channel_revenue.js
+++ b/js/charts/ppmt_channel_revenue.js
@@ -170,7 +170,7 @@ export function channelRevenueChart(rows, { width, height, view = 'all' }) {
],
graphic: [
...watermarks(width, height),
- footnote('数据来源:泡泡玛特营收构成表;渠道口径按财报披露 | @思考的Joey'),
+ footnote('数据来源:泡泡玛特营收构成表;渠道口径按财报披露 | @Joey知行记'),
],
};
}
diff --git a/js/charts/ppmt_channel_share.js b/js/charts/ppmt_channel_share.js
index 40759b0..75e93c3 100644
--- a/js/charts/ppmt_channel_share.js
+++ b/js/charts/ppmt_channel_share.js
@@ -74,7 +74,7 @@ export function channelShareChart(rows, { width, height, view = 'all' }) {
})),
graphic: [
...watermarks(width, height),
- footnote('数据来源:泡泡玛特分地区渠道收入披露(中国含港澳台);H2为单半年(全年−H1)\n线上渠道含抽盒机、天猫、抖音、自研APP及官网等 | @思考的Joey'),
+ footnote('数据来源:泡泡玛特分地区渠道收入披露(中国含港澳台);H2为单半年(全年−H1)\n线上渠道含抽盒机、天猫、抖音、自研APP及官网等 | @Joey知行记'),
],
};
}
diff --git a/js/charts/ppmt_channel_share_region.js b/js/charts/ppmt_channel_share_region.js
index 9d5612d..4f479ce 100644
--- a/js/charts/ppmt_channel_share_region.js
+++ b/js/charts/ppmt_channel_share_region.js
@@ -28,28 +28,111 @@ const REGIONS = {
title: '中国区',
source: '中国(含港澳台)',
series: ['retail', 'robot_store', 'roboshop', 'tmall', 'douyin', 'online_other', 'wholesale'],
- footnote: '数据来源:泡泡玛特中国区(含港澳台)分渠道收入披露;H2为单半年(全年−H1)\n线上渠道按财报披露拆分为抽盒机、天猫旗舰店、抖音平台与其他线上 | @思考的Joey',
+ footnote: '数据来源:泡泡玛特中国区(含港澳台)分渠道收入披露;H2为单半年(全年−H1)\n线上渠道按财报披露拆分为抽盒机、天猫旗舰店、抖音平台与其他线上 | @Joey知行记',
},
apac: {
title: '亚太区',
source: '亚太区',
series: ['retail', 'robot_store', 'own_app', 'shopee', 'online_other', 'wholesale'],
- footnote: '数据来源:泡泡玛特亚太区分渠道收入披露;H2为单半年(全年−H1)\n线上渠道按财报披露拆分为自研APP及官网、Shopee与其他线上 | @思考的Joey',
+ footnote: '数据来源:泡泡玛特亚太区分渠道收入披露;H2为单半年(全年−H1)\n线上渠道按财报披露拆分为自研APP及官网、Shopee与其他线上 | @Joey知行记',
},
americas: {
title: '美洲区',
source: '美洲区',
series: ['retail', 'robot_store', 'own_app', 'tiktok', 'amazon', 'online_other', 'wholesale'],
- footnote: '数据来源:泡泡玛特美洲区分渠道收入披露;H2为单半年(全年−H1)\n2026H1起TikTok无收入,亚马逊为2026年新开渠道 | @思考的Joey',
+ footnote: '数据来源:泡泡玛特美洲区分渠道收入披露;H2为单半年(全年−H1)\n2026H1起TikTok无收入,亚马逊为2026年新开渠道 | @Joey知行记',
},
europe: {
title: '欧洲及其他区',
source: '欧洲及其他地区',
series: ['retail', 'robot_store', 'own_app', 'online_other', 'wholesale'],
- footnote: '数据来源:泡泡玛特欧洲及其他地区分渠道收入披露;H2为单半年(全年−H1)\n线上渠道按财报披露拆分为自研APP及官网与其他线上 | @思考的Joey',
+ footnote: '数据来源:泡泡玛特欧洲及其他地区分渠道收入披露;H2为单半年(全年−H1)\n线上渠道按财报披露拆分为自研APP及官网与其他线上 | @Joey知行记',
},
};
+/** 轴上限取整齐刻度,柱高比例确定后,段标签的段内/外置可按像素判断(同 ppmt_channel_revenue)。 */
+const AMOUNT_NICE_MAX = [10, 20, 25, 50, 60, 80, 100, 120, 150, 200, 250, 300, 400, 500];
+
+/**
+ * 分地区渠道收入金额堆叠柱:与占比图同源同色,直接使用披露金额(亿元),
+ * 不做占比×总收入还原。矮段标签外置到柱体右侧的机制同全局渠道金额图。
+ */
+export function makeRegionChannelAmountChart(regionKey) {
+ const region = REGIONS[regionKey];
+ if (!region) throw new Error(`未配置的地区渠道金额图:${regionKey}`);
+ return function regionChannelAmountChart(rows, { width, height, view = 'all' }) {
+ const periods = col(rows, 'period');
+ const barWidth = view === 'all' ? 48 : 80;
+ const totalMax = Math.max(...rows.map((row) => row.total_revenue));
+ const axisMax = AMOUNT_NICE_MAX.find((max) => max >= totalMax * 1.02)
+ ?? Math.ceil((totalMax * 1.2) / 100) * 100;
+ // 绘图区像素高:画布高 − grid top 145 − grid bottom 100(两行脚注)
+ const pxPerUnit = (height - LAYOUT.gridTop - 100) / axisMax;
+ const rowOffsets = fanTinyLabelOffsets(rows, region.series, pxPerUnit);
+
+ return {
+ backgroundColor: '#fff',
+ title: {
+ ...titleStyle,
+ text: `泡泡玛特${region.title}渠道收入金额(${financialViewLabel(view)})`,
+ subtext: '堆叠柱为各渠道收入(亿元);矮段数值标注在柱体右侧,线上渠道按披露细分拆分',
+ },
+ legend: standardLegend(region.series.map((key) => SERIES[key].name)),
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: { type: 'shadow' },
+ textStyle: { fontFamily: FONT },
+ formatter: (params) => {
+ const row = rows[periods.indexOf(params[0].axisValue)];
+ return `${params[0].axisValue} ${region.source}总收入 ${row.total_revenue.toFixed(2)} 亿元
${params
+ .filter((item) => item.value !== null)
+ .slice()
+ .reverse()
+ .map((item) => `${item.marker}${item.seriesName}: ${item.value.toFixed(1)} 亿元`)
+ .join('
')}`;
+ },
+ },
+ grid: { left: 78, right: 82, top: LAYOUT.gridTop, bottom: 100 },
+ xAxis: { ...standalonePeriodAxis, data: periods },
+ yAxis: {
+ ...axisCommon,
+ type: 'value',
+ name: '渠道收入(亿元)',
+ nameLocation: 'middle',
+ nameGap: 56,
+ nameTextStyle: { color: PALETTE.grey, fontSize: 13, fontFamily: FONT },
+ min: 0,
+ max: axisMax,
+ interval: axisMax % 4 === 0 ? axisMax / 4 : axisMax / 5,
+ },
+ series: region.series.map((key, ci) => barSeries({
+ name: SERIES[key].name,
+ data: rows.map((row, ri) => stackedSharePoint(row[key], {
+ pxPerUnit,
+ labelColor: SERIES[key].labelColor,
+ dy: rowOffsets[ri][ci] ?? 0,
+ })),
+ color: SERIES[key].color,
+ barWidth,
+ stack: `channel-amount-${regionKey}`,
+ label: {
+ show: true,
+ position: 'inside',
+ fontSize: 11,
+ fontFamily: FONT,
+ fontWeight: 500,
+ overflow: 'none',
+ formatter: (point) => point.value.toFixed(1),
+ },
+ emphasis: { focus: 'series' },
+ })),
+ graphic: [
+ ...watermarks(width, height),
+ footnote(region.footnote),
+ ],
+ };
+ };
+}
/** 分地区渠道收入占比:线上渠道拆分披露的细分平台,每根柱按当期该地区总收入归一化。 */
export function makeRegionChannelShareChart(regionKey) {
const region = REGIONS[regionKey];
diff --git a/js/charts/ppmt_core_margin.js b/js/charts/ppmt_core_margin.js
index b04909e..718efc4 100644
--- a/js/charts/ppmt_core_margin.js
+++ b/js/charts/ppmt_core_margin.js
@@ -59,7 +59,7 @@ export function ppmtCoreMarginChart(rows, { width, height, view = 'all' }) {
...watermarks(width, height),
footnote(
'核心利润率由绝对值口径直接计算(核心利润÷营收),比三个比率行相减更准\n' +
- '——后者各只存4位小数,累加误差可达0.045pct | @思考的Joey'
+ '——后者各只存4位小数,累加误差可达0.045pct | @Joey知行记'
),
],
};
diff --git a/js/charts/ppmt_core_profit.js b/js/charts/ppmt_core_profit.js
index fc5da19..085c8f7 100644
--- a/js/charts/ppmt_core_profit.js
+++ b/js/charts/ppmt_core_profit.js
@@ -137,7 +137,7 @@ export function ppmtCoreProfitChart(rows, { width, height, view = 'all' }) {
...watermarks(width, height),
footnote(
'核心利润反映主业盈利能力(扣除营销与管理成本);' +
- '2025H1/H2同比增速受益于费用率优化和规模效应 | @思考的Joey'
+ '2025H1/H2同比增速受益于费用率优化和规模效应 | @Joey知行记'
),
],
};
diff --git a/js/charts/ppmt_expense_structure.js b/js/charts/ppmt_expense_structure.js
index 0427a37..a7dc3f8 100644
--- a/js/charts/ppmt_expense_structure.js
+++ b/js/charts/ppmt_expense_structure.js
@@ -69,7 +69,7 @@ export function expenseStructureChart(rows, { width, height, view = 'all' }) {
],
graphic: [
...watermarks(width, height),
- footnote('数据来源:泡泡玛特合并利润表;H2为单独半年 | @思考的Joey'),
+ footnote('数据来源:泡泡玛特合并利润表;H2为单独半年 | @Joey知行记'),
],
};
}
diff --git a/js/charts/ppmt_growth.js b/js/charts/ppmt_growth.js
index 82a154f..1bfc9d0 100644
--- a/js/charts/ppmt_growth.js
+++ b/js/charts/ppmt_growth.js
@@ -106,7 +106,7 @@ export function ppmtGrowthChart(rows, { width, height, view = 'all' }) {
})),
graphic: [
...watermarks(width, height),
- footnote('数据来源:泡泡玛特财报;2020H1/H2非GAAP净利用归母净利替代 | @思考的Joey'),
+ footnote('数据来源:泡泡玛特财报;2020H1/H2非GAAP净利用归母净利替代 | @Joey知行记'),
],
};
}
diff --git a/js/charts/ppmt_inventory.js b/js/charts/ppmt_inventory.js
index a28589d..8ff11d7 100644
--- a/js/charts/ppmt_inventory.js
+++ b/js/charts/ppmt_inventory.js
@@ -76,7 +76,7 @@ export function inventoryBalanceChart(rows, { width, height, view = 'all' }) {
],
graphic: [
...watermarks(width, height),
- footnote('数据来源:泡泡玛特历年合并资产负债表;存货为报告期末时点数 | @思考的Joey'),
+ footnote('数据来源:泡泡玛特历年合并资产负债表;存货为报告期末时点数 | @Joey知行记'),
],
};
}
diff --git a/js/charts/ppmt_ip.js b/js/charts/ppmt_ip.js
index 2b9c86d..f7cfd16 100644
--- a/js/charts/ppmt_ip.js
+++ b/js/charts/ppmt_ip.js
@@ -80,7 +80,7 @@ export function ipChart(rows, { width, height, view = 'all' }) {
series,
graphic: [
...watermarks(width, height),
- footnote('数据来源:泡泡玛特财报 | @思考的Joey'),
+ footnote('数据来源:泡泡玛特财报 | @Joey知行记'),
],
};
}
diff --git a/js/charts/ppmt_ip_ex_monsters.js b/js/charts/ppmt_ip_ex_monsters.js
index 822bf0c..3a23e13 100644
--- a/js/charts/ppmt_ip_ex_monsters.js
+++ b/js/charts/ppmt_ip_ex_monsters.js
@@ -143,7 +143,7 @@ export function ppmtIpExMonstersChart(rows, { width, height, view = 'all' }) {
],
graphic: [
...watermarks(width, height),
- footnote('除 THE MONSTERS 外其余 IP 合计;同比对去年同半年 | @思考的Joey'),
+ footnote('除 THE MONSTERS 外其余 IP 合计;同比对去年同半年 | @Joey知行记'),
],
};
}
diff --git a/js/charts/ppmt_ip_share.js b/js/charts/ppmt_ip_share.js
index 1e1f682..ead3f78 100644
--- a/js/charts/ppmt_ip_share.js
+++ b/js/charts/ppmt_ip_share.js
@@ -120,7 +120,7 @@ export function ppmtIpShareChart(rows, { width, height }) {
],
graphic: [
...watermarks(width, height),
- footnote('HACIPUPU、BUNNY、PUCKY 等 IP 2026H1 无收入数据,未列入 | @思考的Joey'),
+ 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
index 13d7a5d..feed01a 100644
--- a/js/charts/ppmt_ip_share_history.js
+++ b/js/charts/ppmt_ip_share_history.js
@@ -103,7 +103,7 @@ export function ppmtIpShareHistoryChart(rows, { width, height, view = 'all' }) {
})),
graphic: [
...watermarks(width, height),
- footnote('其他IP(含已停单列)= Zsiga、HACIPUPU、BUNNY、PUCKY、小甜豆等 | @思考的Joey'),
+ footnote('其他IP(含已停单列)= Zsiga、HACIPUPU、BUNNY、PUCKY、小甜豆等 | @Joey知行记'),
],
};
}
diff --git a/js/charts/ppmt_liquidity_working_capital.js b/js/charts/ppmt_liquidity_working_capital.js
index 298780b..6c31fad 100644
--- a/js/charts/ppmt_liquidity_working_capital.js
+++ b/js/charts/ppmt_liquidity_working_capital.js
@@ -77,7 +77,7 @@ export function liquidityWorkingCapitalChart(rows, { width, height, view = 'all'
],
graphic: [
...watermarks(width, height),
- footnote('数据来源:泡泡玛特合并资产负债表 | @思考的Joey'),
+ footnote('数据来源:泡泡玛特合并资产负债表 | @Joey知行记'),
],
};
}
diff --git a/js/charts/ppmt_margins.js b/js/charts/ppmt_margins.js
index f7b6571..4b836e7 100644
--- a/js/charts/ppmt_margins.js
+++ b/js/charts/ppmt_margins.js
@@ -110,7 +110,7 @@ export function ppmtMarginsChart(rows, { width, height, view = 'all' }) {
...watermarks(width, height),
footnote(
'毛利率/费用率取自利润表;非国际归母净利率=非GAAP净利÷营业收入,' +
- '2020H1/H2非GAAP缺失用归母净利替代 | @思考的Joey'
+ '2020H1/H2非GAAP缺失用归母净利替代 | @Joey知行记'
),
],
};
diff --git a/js/charts/ppmt_profit.js b/js/charts/ppmt_profit.js
index 9719fe2..4d188b1 100644
--- a/js/charts/ppmt_profit.js
+++ b/js/charts/ppmt_profit.js
@@ -123,7 +123,7 @@ export function profitChart(rows, { width, height, view = 'all' }) {
],
graphic: [
...watermarks(width, height),
- footnote('数据来源:泡泡玛特财报;H2为单独半年 | @思考的Joey'),
+ footnote('数据来源:泡泡玛特财报;H2为单独半年 | @Joey知行记'),
],
};
}
diff --git a/js/charts/ppmt_region_channel.js b/js/charts/ppmt_region_channel.js
index 23bf1a6..d74a9a2 100644
--- a/js/charts/ppmt_region_channel.js
+++ b/js/charts/ppmt_region_channel.js
@@ -120,7 +120,7 @@ export function regionChannelChart(rows, { width, height }) {
})),
graphic: [
...watermarks(width, height),
- footnote('数据来源:泡泡玛特财报 | @思考的Joey'),
+ footnote('数据来源:泡泡玛特财报 | @Joey知行记'),
],
};
}
diff --git a/js/charts/ppmt_region_channel_yoy_timeseries.js b/js/charts/ppmt_region_channel_yoy_timeseries.js
index 4aab1b9..d550696 100644
--- a/js/charts/ppmt_region_channel_yoy_timeseries.js
+++ b/js/charts/ppmt_region_channel_yoy_timeseries.js
@@ -111,7 +111,7 @@ export function regionChannelYoyTimeseriesChart(rows, { width, height }) {
}],
graphic: [
...watermarks(width, height),
- footnote('数据来源:泡泡玛特财报;早期海外为合并口径 | @思考的Joey'),
+ footnote('数据来源:泡泡玛特财报;早期海外为合并口径 | @Joey知行记'),
],
};
}
diff --git a/js/charts/ppmt_region_share.js b/js/charts/ppmt_region_share.js
index 9186375..0858512 100644
--- a/js/charts/ppmt_region_share.js
+++ b/js/charts/ppmt_region_share.js
@@ -105,7 +105,7 @@ export function regionShareChart(rows, { width, height, view = 'all' }) {
})),
graphic: [
...watermarks(width, height),
- footnote('数据来源:泡泡玛特财报;中国含港澳台\n2024H1为按2025年中报披露的分地区同比还原;H2为单半年 | @思考的Joey'),
+ footnote('数据来源:泡泡玛特财报;中国含港澳台\n2024H1为按2025年中报披露的分地区同比还原;H2为单半年 | @Joey知行记'),
],
};
}
diff --git a/js/charts/ppmt_region_yoy.js b/js/charts/ppmt_region_yoy.js
index 258bad0..8bef312 100644
--- a/js/charts/ppmt_region_yoy.js
+++ b/js/charts/ppmt_region_yoy.js
@@ -120,7 +120,7 @@ export function regionChannelYoyChart(rows, { width, height }) {
})),
graphic: [
...watermarks(width, height),
- footnote('数据来源:泡泡玛特财报(2026H1 vs 2025H1同比)| @思考的Joey'),
+ footnote('数据来源:泡泡玛特财报(2026H1 vs 2025H1同比)| @Joey知行记'),
],
};
}
diff --git a/js/charts/ppmt_retail_store_revenue.js b/js/charts/ppmt_retail_store_revenue.js
index 11e481c..c37c997 100644
--- a/js/charts/ppmt_retail_store_revenue.js
+++ b/js/charts/ppmt_retail_store_revenue.js
@@ -104,7 +104,7 @@ export function retailStoreRevenueChart(rows, { width, height, view = 'all' }) {
],
graphic: [
...watermarks(width, height),
- footnote('数据来源:泡泡玛特历年公告;收入仅含“零售店”渠道;H2收入=全年−H1\n2024年海外各区域缺少期初店数,相关单店收入留空 | @思考的Joey'),
+ footnote('数据来源:泡泡玛特历年公告;收入仅含“零售店”渠道;H2收入=全年−H1\n2024年海外各区域缺少期初店数,相关单店收入留空 | @Joey知行记'),
],
};
}
diff --git a/js/charts/ppmt_robot_store_revenue.js b/js/charts/ppmt_robot_store_revenue.js
index b5ec3df..89ea8be 100644
--- a/js/charts/ppmt_robot_store_revenue.js
+++ b/js/charts/ppmt_robot_store_revenue.js
@@ -102,7 +102,7 @@ export function robotStoreRevenueChart(rows, { width, height, view = 'all' }) {
],
graphic: [
...watermarks(width, height),
- footnote('数据来源:泡泡玛特历年公告;海外收入=亚太+美洲+欧洲及其他的机器人商店收入;H2收入=全年−H1\n2024H1海外期末机器人商店数未披露,相关单店收入留空 | @思考的Joey'),
+ footnote('数据来源:泡泡玛特历年公告;海外收入=亚太+美洲+欧洲及其他的机器人商店收入;H2收入=全年−H1\n2024H1海外期末机器人商店数未披露,相关单店收入留空 | @Joey知行记'),
],
};
}
diff --git a/js/charts/ppmt_sankey.js b/js/charts/ppmt_sankey.js
index 5724753..7e4f9c9 100644
--- a/js/charts/ppmt_sankey.js
+++ b/js/charts/ppmt_sankey.js
@@ -133,7 +133,7 @@ export function sankeyChart(rows, { width, height }) {
],
graphic: [
...watermarks(width, height),
- footnote('数据来源:泡泡玛特财报 | @思考的Joey'),
+ footnote('数据来源:泡泡玛特财报 | @Joey知行记'),
],
};
}
diff --git a/js/charts/ppmt_stores_retail.js b/js/charts/ppmt_stores_retail.js
index 7aa1e66..8b75981 100644
--- a/js/charts/ppmt_stores_retail.js
+++ b/js/charts/ppmt_stores_retail.js
@@ -128,7 +128,7 @@ export function storesRetailChart(rows, { width, height, view = 'all' }) {
],
graphic: [
...watermarks(width, height),
- footnote('数据来源:泡泡玛特历年公告;门店数为各期末时点数\n2023年及以前海外合计含港澳台;2024年起港澳台单列,海外=亚太+美洲+欧洲 | @思考的Joey'),
+ footnote('数据来源:泡泡玛特历年公告;门店数为各期末时点数\n2023年及以前海外合计含港澳台;2024年起港澳台单列,海外=亚太+美洲+欧洲 | @Joey知行记'),
],
};
}
diff --git a/js/charts/ppmt_stores_retail_share.js b/js/charts/ppmt_stores_retail_share.js
index d2f0dfb..278f4f6 100644
--- a/js/charts/ppmt_stores_retail_share.js
+++ b/js/charts/ppmt_stores_retail_share.js
@@ -75,7 +75,7 @@ export function storesRetailShareChart(rows, { width, height, view = 'all' }) {
})),
graphic: [
...watermarks(width, height),
- footnote('数据来源:泡泡玛特历年公告;门店数为各报告期末时点数\n中国=中国内地+港澳台;其他=全球合计−中国−亚太−美洲−欧洲 | @思考的Joey'),
+ footnote('数据来源:泡泡玛特历年公告;门店数为各报告期末时点数\n中国=中国内地+港澳台;其他=全球合计−中国−亚太−美洲−欧洲 | @Joey知行记'),
],
};
}
diff --git a/js/charts/ppmt_stores_robot.js b/js/charts/ppmt_stores_robot.js
index 076b88d..101fbd3 100644
--- a/js/charts/ppmt_stores_robot.js
+++ b/js/charts/ppmt_stores_robot.js
@@ -135,8 +135,8 @@ export function storesRobotChart(rows, { width, height, view = 'all' }) {
[
'数据来源:泡泡玛特历年公告;门店数为各期末时点数',
view === 'annual'
- ? '海外合计2023年及以前含港澳台、其后不含 | @思考的Joey'
- : '海外合计2023年及以前含港澳台、其后不含;2024H1海外数量未披露 | @思考的Joey',
+ ? '海外合计2023年及以前含港澳台、其后不含 | @Joey知行记'
+ : '海外合计2023年及以前含港澳台、其后不含;2024H1海外数量未披露 | @Joey知行记',
].join('\n'),
),
],
diff --git a/js/charts/ppmt_working_capital_days.js b/js/charts/ppmt_working_capital_days.js
index 5c47184..56deaee 100644
--- a/js/charts/ppmt_working_capital_days.js
+++ b/js/charts/ppmt_working_capital_days.js
@@ -78,7 +78,7 @@ export function workingCapitalDaysChart(rows, { width, height }) {
})),
graphic: [
...watermarks(width, height),
- footnote('数据来源:泡泡玛特财务指标(合并报表);原始180/360天口径已换算为181/365天 | @思考的Joey'),
+ footnote('数据来源:泡泡玛特财务指标(合并报表);原始180/360天口径已换算为181/365天 | @Joey知行记'),
],
};
}
diff --git a/js/charts/twoline.js b/js/charts/twoline.js
index 7802a7a..14fa01a 100644
--- a/js/charts/twoline.js
+++ b/js/charts/twoline.js
@@ -55,7 +55,7 @@ export function twoLineChart(rows, { width, height }) {
],
graphic: [
...watermarks(width, height),
- footnote('示例数据 | @思考的Joey'),
+ footnote('示例数据 | @Joey知行记'),
],
};
}
diff --git a/js/main.js b/js/main.js
index e01345f..c0eb075 100644
--- a/js/main.js
+++ b/js/main.js
@@ -1,17 +1,25 @@
import { loadCSV } from './csv.js';
import { getChartBuilder } from './charts/index.js';
+import { downloadCanvas, mergeImages } from './merge.js';
import {
createAppShell,
renderAnchors,
renderCards,
+ renderCartBar,
renderCompanies,
renderTabs,
showChartError,
+ showMergePreview,
} from './ui.js';
const instances = new Map();
const activeViews = new Map();
const chartRenderVersions = new Map();
+// 合并队列:instanceId → { instanceId, title, filename, dataUrl }
+// dataUrl 是加购(及后续每次重渲染)时的快照,切换 tab 后实例被 dispose 也能照常导出
+const cart = new Map();
+let cartMode = 'pairs';
+let closePreview;
let manifest;
let shell;
let state;
@@ -123,6 +131,7 @@ async function renderChart(chart, version, chartVersion) {
instances.set(chart.instanceId, instance);
const { width, height } = el.getBoundingClientRect();
instance.setOption(getChartBuilder(chart.key)(rows, { width, height, view }), true);
+ captureSnapshot(chart);
} catch (error) {
if (version === renderVersion) showChartError(chart.instanceId, error.message);
console.error(`渲染图表失败:${chart.id}`, error);
@@ -157,6 +166,116 @@ function exportPNG(chartId, filename) {
anchor.click();
}
+/** 图表在合并队列中时,每次重渲染(切换视图、重载数据、resize)都刷新快照,保证所见即所得 */
+function captureSnapshot(chart) {
+ if (!cart.has(chart.instanceId)) return;
+ const instance = instances.get(chart.instanceId);
+ if (!instance) return;
+ cart.get(chart.instanceId).dataUrl = instance.getDataURL({ type: 'png', pixelRatio: 2, backgroundColor: '#fff' });
+}
+
+function toggleCart(chart) {
+ if (cart.delete(chart.instanceId)) {
+ updateCartButton(chart.instanceId);
+ } else {
+ const instance = instances.get(chart.instanceId);
+ if (!instance) return;
+ cart.set(chart.instanceId, {
+ instanceId: chart.instanceId,
+ title: chart.title,
+ filename: chart.filename || chart.title,
+ dataUrl: instance.getDataURL({ type: 'png', pixelRatio: 2, backgroundColor: '#fff' }),
+ });
+ updateCartButton(chart.instanceId);
+ }
+ renderCart();
+}
+
+function updateCartButton(instanceId) {
+ const btn = document.querySelector(`[data-cart-id="${instanceId}"]`);
+ if (!btn) return;
+ const inCart = cart.has(instanceId);
+ btn.dataset.inCart = String(inCart);
+ btn.textContent = inCart ? '已加入 ✓' : '➕ 加入合并';
+}
+
+/** Map 保持插入序,删除后按新顺序重建即完成上移/下移 */
+function moveCartItem(instanceId, delta) {
+ const entries = [...cart.entries()];
+ const from = entries.findIndex(([id]) => id === instanceId);
+ const to = from + delta;
+ if (from < 0 || to < 0 || to >= entries.length) return;
+ [entries[from], entries[to]] = [entries[to], entries[from]];
+ cart.clear();
+ entries.forEach(([id, item]) => cart.set(id, item));
+ renderCart();
+}
+
+function clipName(name, max = 24) {
+ return name.length > max ? `${name.slice(0, max)}…` : name;
+}
+
+/** 按当前模式把队列合成为一组 { canvas, filename, partial? }:pairs 两两合并,single 全部拼一张 */
+async function buildCompositions() {
+ const items = [...cart.values()];
+ if (!items.length) return [];
+ if (cartMode === 'single') {
+ return [{
+ canvas: await mergeImages(items.map((item) => item.dataUrl)),
+ filename: `${clipName(items[0].filename)}等${items.length}张合并`,
+ }];
+ }
+ const pairs = [];
+ for (let i = 0; i < items.length; i += 2) {
+ const pair = items.slice(i, i + 2);
+ pairs.push({
+ canvas: await mergeImages(pair.map((item) => item.dataUrl)),
+ filename: pair.map((item) => clipName(item.filename)).join('+'),
+ partial: pair.length === 1,
+ });
+ }
+ return pairs;
+}
+
+async function openMergePreview() {
+ const entries = await buildCompositions();
+ if (!entries.length) return;
+ const notice = entries.some((entry) => entry.partial) ? '队列为奇数张,最后一张单独导出' : '';
+ const download = (entry) => downloadCanvas(entry.canvas, entry.filename);
+ closePreview = showMergePreview(entries, {
+ notice,
+ onDownload: download,
+ onDownloadAll: () => entries.forEach((entry, index) => {
+ setTimeout(() => download(entry), index * 350);
+ }),
+ onClose: () => closePreview?.(),
+ });
+}
+
+function renderCart() {
+ renderCartBar(shell.cartBar, {
+ items: [...cart.values()],
+ mode: cartMode,
+ onModeChange: (mode) => {
+ cartMode = mode;
+ renderCart();
+ },
+ onMove: moveCartItem,
+ onRemove: (instanceId) => {
+ cart.delete(instanceId);
+ updateCartButton(instanceId);
+ renderCart();
+ },
+ onClear: () => {
+ const ids = [...cart.keys()];
+ cart.clear();
+ ids.forEach(updateCartButton);
+ renderCart();
+ },
+ onPreview: openMergePreview,
+ });
+}
+
function updateHash(nextState) {
const hash = serializeHash(nextState);
if (window.location.hash === hash) {
@@ -189,6 +308,8 @@ function renderCurrent() {
});
renderCards(shell.cards, charts, activeViews, {
onExport: exportPNG,
+ isCarted: (instanceId) => cart.has(instanceId),
+ onToggleCart: toggleCart,
onSelectView: (chart, view) => {
if (activeViews.get(chart.viewKey) === view) return;
activeViews.set(chart.viewKey, view);
diff --git a/js/merge.js b/js/merge.js
new file mode 100644
index 0000000..16ace8f
--- /dev/null
+++ b/js/merge.js
@@ -0,0 +1,57 @@
+/**
+ * 图片纵向合成 —— 把多张图表 PNG 顺序拼接为一张竖版长图。
+ * 公众号文章在手机上以竖版窗口预览,横版单图显示过小,
+ * 两张上下拼接后(2400×~2800)接近满屏,阅读体验明显更好。
+ * 纯浏览器 Canvas API,无依赖。
+ */
+
+const DEFAULTS = { gap: 96, background: '#fff' }; // gap 为设备像素:@2x 导出下 96 = 视觉 48px
+
+function loadImage(src) {
+ return new Promise((resolve, reject) => {
+ const img = new Image();
+ img.onload = () => resolve(img);
+ img.onerror = () => reject(new Error('图片解码失败'));
+ img.src = src;
+ });
+}
+
+/**
+ * 按顺序纵向拼接一组图片 dataURL,返回合成后的 canvas。
+ * 宽度取各图最大值;宽度不一致的图等比缩放对齐(正常流程导出的图宽度一致,不会触发缩放)。
+ */
+export async function mergeImages(sources, options = {}) {
+ const { gap, background } = { ...DEFAULTS, ...options };
+ if (!sources.length) throw new Error('没有可合并的图片');
+
+ const images = await Promise.all(sources.map(loadImage));
+ const width = Math.max(...images.map((img) => img.width));
+ const heights = images.map((img) => Math.round(img.height * width / img.width));
+ const height = heights.reduce((sum, h) => sum + h, 0) + gap * (images.length - 1);
+
+ const canvas = document.createElement('canvas');
+ canvas.width = width;
+ canvas.height = height;
+ const ctx = canvas.getContext('2d');
+ ctx.fillStyle = background;
+ ctx.fillRect(0, 0, width, height);
+
+ let y = 0;
+ images.forEach((img, index) => {
+ ctx.drawImage(img, 0, y, width, heights[index]);
+ y += heights[index] + gap;
+ });
+ return canvas;
+}
+
+/** canvas → PNG Blob 触发下载(Blob URL 比超长 dataURL 下载更稳) */
+export function downloadCanvas(canvas, filename) {
+ canvas.toBlob((blob) => {
+ const url = URL.createObjectURL(blob);
+ const anchor = document.createElement('a');
+ anchor.href = url;
+ anchor.download = filename.endsWith('.png') ? filename : `${filename}.png`;
+ anchor.click();
+ setTimeout(() => URL.revokeObjectURL(url), 10_000);
+ }, 'image/png');
+}
diff --git a/js/theme.js b/js/theme.js
index 5885f78..ce2c82f 100644
--- a/js/theme.js
+++ b/js/theme.js
@@ -3,7 +3,7 @@
* 所有图表共用这一份配置,保证视觉一致性
*/
-export const WATERMARK_TEXT = '@思考的Joey';
+export const WATERMARK_TEXT = '@Joey知行记';
// 字体名用单引号:SVG 渲染时字符串会被塞进 style="..." 属性,
// 用双引号会提前闭合属性、生成非法 SVG(canvas 渲染看不出来,导出 SVG 时才炸)
diff --git a/js/ui.js b/js/ui.js
index fb116ad..6750768 100644
--- a/js/ui.js
+++ b/js/ui.js
@@ -28,9 +28,11 @@ export function createAppShell(root, { onReload }) {
content.append(tabs, cards);
const chartNav = element('aside', 'sidebar chart-sidebar');
layout.append(companyNav, content, chartNav);
- root.append(layout, reloadButton);
+ const cartBar = element('div', 'cart-bar');
+ cartBar.hidden = true;
+ root.append(layout, reloadButton, cartBar);
- return { companyNav, tabs, cards, chartNav };
+ return { companyNav, tabs, cards, chartNav, cartBar };
}
export function renderCompanies(container, companies, activeCompanyId, onSelect) {
@@ -57,7 +59,7 @@ export function renderTabs(container, tabs, activeTabId, onSelect) {
});
}
-export function renderCards(container, charts, activeViews, { onExport, onSelectView }) {
+export function renderCards(container, charts, activeViews, { onExport, isCarted, onToggleCart, onSelectView }) {
container.replaceChildren();
if (!charts.length) {
container.append(element('p', 'empty-state', '该分类暂时没有图表。'));
@@ -92,7 +94,13 @@ export function renderCards(container, charts, activeViews, { onExport, onSelect
bar.append(switcher);
}
- bar.append(button('导出 PNG', {
+ const cartButton = button(isCarted?.(chart.instanceId) ? '已加入 ✓' : '➕ 加入合并', {
+ onClick: () => onToggleCart?.(chart),
+ className: 'cart-button',
+ });
+ cartButton.dataset.cartId = chart.instanceId;
+ cartButton.dataset.inCart = String(Boolean(isCarted?.(chart.instanceId)));
+ bar.append(cartButton, button('导出 PNG', {
onClick: () => onExport(chart.instanceId, chart.filename || chart.title),
className: 'export-button',
}));
@@ -121,3 +129,95 @@ export function showChartError(chartId, message) {
if (!chartEl) return;
chartEl.replaceChildren(element('div', 'chart-error', message));
}
+
+const CART_MODES = [
+ ['pairs', '两两合并'],
+ ['single', '合并为一张'],
+];
+
+export function renderCartBar(container, { items = [], mode, onModeChange, onMove, onRemove, onClear, onPreview }) {
+ container.replaceChildren();
+ if (!items.length) {
+ container.hidden = true;
+ return;
+ }
+ container.hidden = false;
+
+ container.append(element('span', 'cart-label', `合并队列 ${items.length}`));
+
+ const chips = element('div', 'cart-chips');
+ items.forEach((item, index) => {
+ const chip = element('div', 'cart-chip');
+ chip.title = item.title;
+ const up = button('↑', { onClick: () => onMove?.(item.instanceId, -1), className: 'cart-chip-button' });
+ up.disabled = index === 0;
+ const down = button('↓', { onClick: () => onMove?.(item.instanceId, 1), className: 'cart-chip-button' });
+ down.disabled = index === items.length - 1;
+ chip.append(
+ element('span', 'cart-chip-name', item.title),
+ up,
+ down,
+ button('✕', { onClick: () => onRemove?.(item.instanceId), className: 'cart-chip-button' }),
+ );
+ chips.append(chip);
+ });
+ container.append(chips);
+
+ container.append(element('span', 'cart-divider'));
+
+ const modes = element('div', 'cart-modes');
+ CART_MODES.forEach(([value, label]) => {
+ modes.append(button(label, {
+ active: mode === value,
+ onClick: () => onModeChange?.(value),
+ className: 'cart-mode-button',
+ }));
+ });
+ container.append(modes);
+
+ container.append(button('预览导出', { onClick: () => onPreview?.(), className: 'cart-export-button' }));
+ container.append(button('清空', { onClick: () => onClear?.(), className: 'cart-clear-button' }));
+}
+
+export function showMergePreview(entries, { notice = '', onDownload, onDownloadAll, onClose }) {
+ const overlay = element('div', 'modal-overlay');
+ const modal = element('div', 'modal');
+
+ const head = element('div', 'modal-head');
+ head.append(element('h2', 'modal-title', `合并预览 · ${entries.length} 张`));
+ if (notice) head.append(element('span', 'modal-notice', notice));
+ head.append(button('✕', { onClick: onClose, className: 'modal-close' }));
+
+ const body = element('div', 'modal-body');
+ entries.forEach((entry) => {
+ const item = element('div', 'preview-item');
+ entry.canvas.className = 'preview-canvas';
+ item.append(entry.canvas);
+ item.append(button(`⬇ 下载:${entry.filename}.png`, {
+ onClick: () => onDownload?.(entry),
+ className: 'export-button',
+ }));
+ body.append(item);
+ });
+
+ const foot = element('div', 'modal-foot');
+ foot.append(button('全部下载', { onClick: () => onDownloadAll?.(), className: 'primary-button' }));
+ foot.append(button('取消', { onClick: onClose, className: 'export-button' }));
+
+ modal.append(head, body, foot);
+ overlay.append(modal);
+ overlay.addEventListener('click', (event) => {
+ if (event.target === overlay) onClose?.();
+ });
+ document.addEventListener('keydown', onKeydown);
+ document.body.append(overlay);
+
+ function onKeydown(event) {
+ if (event.key === 'Escape') onClose?.();
+ }
+
+ return () => {
+ document.removeEventListener('keydown', onKeydown);
+ overlay.remove();
+ };
+}
diff --git a/manifest.json b/manifest.json
index cae879e..c3ab12b 100644
--- a/manifest.json
+++ b/manifest.json
@@ -32,6 +32,10 @@
"ppmt-channel-share-apac": { "key": "ppmt-channel-share-apac", "title": "亚太区渠道收入占比", "defaultView": "all", "views": { "all": "data/ppmt/ppmt_channel_share_apac.csv", "annual": "data/ppmt/ppmt_channel_share_apac_annual.csv", "halfyear": "data/ppmt/ppmt_channel_share_apac_halfyear.csv" }, "height": 680, "filename": "泡泡玛特亚太区渠道收入占比" },
"ppmt-channel-share-americas": { "key": "ppmt-channel-share-americas", "title": "美洲区渠道收入占比", "defaultView": "all", "views": { "all": "data/ppmt/ppmt_channel_share_americas.csv", "annual": "data/ppmt/ppmt_channel_share_americas_annual.csv", "halfyear": "data/ppmt/ppmt_channel_share_americas_halfyear.csv" }, "height": 680, "filename": "泡泡玛特美洲区渠道收入占比" },
"ppmt-channel-share-europe": { "key": "ppmt-channel-share-europe", "title": "欧洲及其他区渠道收入占比", "defaultView": "all", "views": { "all": "data/ppmt/ppmt_channel_share_europe.csv", "annual": "data/ppmt/ppmt_channel_share_europe_annual.csv", "halfyear": "data/ppmt/ppmt_channel_share_europe_halfyear.csv" }, "height": 680, "filename": "泡泡玛特欧洲及其他区渠道收入占比" },
+ "ppmt-channel-amount-china": { "key": "ppmt-channel-amount-china", "title": "中国区渠道收入金额", "defaultView": "all", "views": { "all": "data/ppmt/ppmt_channel_amount_china.csv", "annual": "data/ppmt/ppmt_channel_amount_china_annual.csv", "halfyear": "data/ppmt/ppmt_channel_amount_china_halfyear.csv" }, "height": 680, "filename": "泡泡玛特中国区渠道收入金额" },
+ "ppmt-channel-amount-apac": { "key": "ppmt-channel-amount-apac", "title": "亚太区渠道收入金额", "defaultView": "all", "views": { "all": "data/ppmt/ppmt_channel_amount_apac.csv", "annual": "data/ppmt/ppmt_channel_amount_apac_annual.csv", "halfyear": "data/ppmt/ppmt_channel_amount_apac_halfyear.csv" }, "height": 680, "filename": "泡泡玛特亚太区渠道收入金额" },
+ "ppmt-channel-amount-americas": { "key": "ppmt-channel-amount-americas", "title": "美洲区渠道收入金额", "defaultView": "all", "views": { "all": "data/ppmt/ppmt_channel_amount_americas.csv", "annual": "data/ppmt/ppmt_channel_amount_americas_annual.csv", "halfyear": "data/ppmt/ppmt_channel_amount_americas_halfyear.csv" }, "height": 680, "filename": "泡泡玛特美洲区渠道收入金额" },
+ "ppmt-channel-amount-europe": { "key": "ppmt-channel-amount-europe", "title": "欧洲及其他区渠道收入金额", "defaultView": "all", "views": { "all": "data/ppmt/ppmt_channel_amount_europe.csv", "annual": "data/ppmt/ppmt_channel_amount_europe_annual.csv", "halfyear": "data/ppmt/ppmt_channel_amount_europe_halfyear.csv" }, "height": 680, "filename": "泡泡玛特欧洲及其他区渠道收入金额" },
"ppmt-stores-retail": { "key": "ppmt-stores-retail", "title": "分地区零售门店数量与同比增速", "defaultView": "all", "views": { "all": "data/ppmt/ppmt_stores_retail.csv", "annual": "data/ppmt/ppmt_stores_retail_annual.csv", "halfyear": "data/ppmt/ppmt_stores_retail_halfyear.csv" }, "height": 680, "filename": "泡泡玛特分地区零售门店数量与同比增速" },
"ppmt-stores-retail-share": { "key": "ppmt-stores-retail-share", "title": "分地区零售门店数量占比", "defaultView": "all", "views": { "all": "data/ppmt/ppmt_stores_retail_share.csv", "annual": "data/ppmt/ppmt_stores_retail_share_annual.csv", "halfyear": "data/ppmt/ppmt_stores_retail_share_halfyear.csv" }, "height": 680, "filename": "泡泡玛特分地区零售门店数量占比" },
"ppmt-retail-store-revenue": { "key": "ppmt-retail-store-revenue", "title": "各地区零售店单店收入", "defaultView": "all", "views": { "all": "data/ppmt/ppmt_retail_store_revenue.csv", "annual": "data/ppmt/ppmt_retail_store_revenue_annual.csv", "halfyear": "data/ppmt/ppmt_retail_store_revenue_halfyear.csv" }, "height": 680, "filename": "泡泡玛特各地区零售店单店收入" },
@@ -45,7 +49,7 @@
{ "id": "expense", "name": "费用率", "chartRefs": ["ppmt-margins", "ppmt-expense-structure"] },
{ "id": "balance-sheet", "name": "资产负债", "chartRefs": ["ppmt-assets", "ppmt-inventory", "ppmt-liquidity-working-capital", "ppmt-working-capital-days"] },
{ "id": "ip-category", "name": "IP 与品类", "chartRefs": ["ppmt-ip", "ppmt-ip-share", "ppmt-ip-share-history", "ppmt-ip-ex-monsters", "ppmt-category"] },
- { "id": "region-channel", "name": "区域渠道", "chartRefs": ["ppmt-region-channel", "ppmt-region-yoy", "ppmt-region-yoy-timeseries", "ppmt-channel-revenue", "ppmt-channel-share", "ppmt-channel-share-china", "ppmt-channel-share-apac", "ppmt-channel-share-americas", "ppmt-channel-share-europe", "ppmt-stores-retail", "ppmt-stores-retail-share", "ppmt-stores-robot", "ppmt-region-share"] },
+ { "id": "region-channel", "name": "区域渠道", "chartRefs": ["ppmt-region-channel", "ppmt-region-yoy", "ppmt-region-yoy-timeseries", "ppmt-channel-revenue", "ppmt-channel-share", "ppmt-channel-share-china", "ppmt-channel-amount-china", "ppmt-channel-share-apac", "ppmt-channel-amount-apac", "ppmt-channel-share-americas", "ppmt-channel-amount-americas", "ppmt-channel-share-europe", "ppmt-channel-amount-europe", "ppmt-stores-retail", "ppmt-stores-retail-share", "ppmt-stores-robot", "ppmt-region-share"] },
{ "id": "store-revenue", "name": "单店收入", "chartRefs": ["ppmt-retail-store-revenue", "ppmt-robot-store-revenue"] }
]
},
diff --git a/scripts/normalize_ppmt_financials.mjs b/scripts/normalize_ppmt_financials.mjs
index d49f3d3..018bc06 100644
--- a/scripts/normalize_ppmt_financials.mjs
+++ b/scripts/normalize_ppmt_financials.mjs
@@ -819,6 +819,18 @@ Object.entries(REGION_SERIES).forEach(([regionKey, seriesKeys]) => {
...Object.fromEntries(seriesKeys.map((key) => [key, 1])),
total_revenue: 2,
});
+ // 金额视图与占比视图同源(披露金额,非占比×总收入还原),供分地区渠道金额堆叠柱图使用。
+ const amountViewsWithTotal = Object.fromEntries(Object.entries(amountViews).map(([view, rows]) => [
+ view,
+ rows.map((row) => ({
+ ...row,
+ total_revenue: seriesKeys.reduce((sum, key) => sum + row[key], 0),
+ })),
+ ]));
+ writeRuntimeViews(`ppmt_channel_amount_${regionKey}`, ['period', ...seriesKeys, 'total_revenue'], amountViewsWithTotal, {
+ ...Object.fromEntries(seriesKeys.map((key) => [key, 1])),
+ total_revenue: 2,
+ });
});
console.log('已生成四地区渠道收入占比(线上细分)的全部、年度、半年 CSV。');