feat: 构建泡泡玛特相关图表
This commit is contained in:
Joey
+187
@@ -0,0 +1,187 @@
|
||||
import {
|
||||
PALETTE, FONT, axisCommon, categoryAxis, titleStyle,
|
||||
lineSeries, footnote, watermarks,
|
||||
} from '../theme.js';
|
||||
|
||||
/** 圆角卡片：ECharts 的 graphic.group + rect + 多段文字 */
|
||||
function infoCard({ left, top, width, title, lines, fill, stroke, titleColor }) {
|
||||
const children = [
|
||||
{
|
||||
type: 'rect',
|
||||
shape: { x: 0, y: 0, width, height: 108, r: 8 },
|
||||
style: { fill, stroke, lineWidth: 1 },
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
style: {
|
||||
x: 20, y: 20,
|
||||
text: title,
|
||||
fill: titleColor,
|
||||
fontSize: 15,
|
||||
fontWeight: 'bold',
|
||||
fontFamily: FONT,
|
||||
},
|
||||
},
|
||||
];
|
||||
lines.forEach((line, i) => {
|
||||
children.push({
|
||||
type: 'text',
|
||||
style: {
|
||||
x: 20, y: 52 + i * 22,
|
||||
text: line,
|
||||
fill: '#555',
|
||||
fontSize: 12.5,
|
||||
fontFamily: FONT,
|
||||
},
|
||||
});
|
||||
});
|
||||
return { type: 'group', left, top, silent: true, children };
|
||||
}
|
||||
|
||||
/**
|
||||
* 图 5：人民币兑美元两种口径对比
|
||||
* 只有两个时间点，重点在文字说明和端点标注，不在曲线本身
|
||||
*/
|
||||
export function fxChart(rows, { width, height }) {
|
||||
const stages = rows.map((r) => r.stage);
|
||||
const mid = rows.map((r) => r.mid_price);
|
||||
const spot = rows.map((r) => r.onshore_spot);
|
||||
|
||||
// label.position 不接受函数（写函数会被静默忽略，退化成默认位置），
|
||||
// 想让首尾点位置不同只能逐点覆盖：起点标在上方，末点标在右侧
|
||||
const endpointLabels = (values) =>
|
||||
values.map((v, i) => ({
|
||||
value: v,
|
||||
label: { position: i === values.length - 1 ? 'right' : 'top' },
|
||||
}));
|
||||
|
||||
// 偏离点数 = （中间价 - 即期）× 10000
|
||||
const gapStart = Math.round((mid[0] - spot[0]) * 10000);
|
||||
const gapEnd = Math.round((mid[1] - spot[1]) * 10000);
|
||||
const midGain = Math.round((mid[0] - mid[1]) * 10000);
|
||||
const spotGain = Math.round((spot[0] - spot[1]) * 10000);
|
||||
const midPct = (((mid[0] - mid[1]) / mid[0]) * 100).toFixed(1);
|
||||
const spotPct = (((spot[0] - spot[1]) / spot[0]) * 100).toFixed(1);
|
||||
|
||||
const cardWidth = 340;
|
||||
const cardTop = 132;
|
||||
|
||||
return {
|
||||
backgroundColor: '#fff',
|
||||
title: {
|
||||
...titleStyle,
|
||||
text: '人民币兑美元的两种「升值」口径：中间价 vs 在岸即期',
|
||||
subtext: '口径区别在「谁定的价」：中间价是央行每日公布的锚，即期是市场在锚附近交易出来的成交价',
|
||||
top: 20,
|
||||
},
|
||||
grid: { left: 96, right: 110, top: 340, bottom: 88 },
|
||||
tooltip: { trigger: 'axis', textStyle: { fontFamily: FONT } },
|
||||
xAxis: {
|
||||
...categoryAxis,
|
||||
boundaryGap: ['12%', '12%'],
|
||||
data: stages,
|
||||
},
|
||||
yAxis: {
|
||||
...axisCommon,
|
||||
type: 'value',
|
||||
name: 'USDCNY（数值越小＝人民币越强）',
|
||||
nameLocation: 'middle',
|
||||
nameGap: 62,
|
||||
nameTextStyle: { color: PALETTE.grey, fontSize: 13, fontFamily: FONT },
|
||||
min: 6.75,
|
||||
max: 7.05,
|
||||
interval: 0.1,
|
||||
axisLabel: {
|
||||
...axisCommon.axisLabel,
|
||||
formatter: (v) => v.toFixed(2),
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
...lineSeries({
|
||||
name: '中间价',
|
||||
data: mid,
|
||||
color: '#3b6ea5',
|
||||
formatter: (p) => p.value.toFixed(4),
|
||||
}),
|
||||
data: endpointLabels(mid),
|
||||
symbolSize: 11,
|
||||
itemStyle: { color: '#3b6ea5' },
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: 15,
|
||||
fontWeight: 'bold',
|
||||
color: '#3b6ea5',
|
||||
fontFamily: FONT,
|
||||
distance: 10,
|
||||
formatter: (p) => p.value.toFixed(4),
|
||||
},
|
||||
},
|
||||
{
|
||||
...lineSeries({
|
||||
name: '在岸即期',
|
||||
data: spot,
|
||||
color: PALETTE.coral,
|
||||
formatter: (p) => p.value.toFixed(4),
|
||||
}),
|
||||
data: endpointLabels(spot),
|
||||
symbolSize: 11,
|
||||
itemStyle: { color: PALETTE.coral },
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: 15,
|
||||
fontWeight: 'bold',
|
||||
color: PALETTE.coral,
|
||||
fontFamily: FONT,
|
||||
distance: 10,
|
||||
formatter: (p) => p.value.toFixed(4),
|
||||
},
|
||||
},
|
||||
],
|
||||
graphic: [
|
||||
...watermarks(width, height),
|
||||
|
||||
infoCard({
|
||||
left: 88, top: cardTop, width: cardWidth,
|
||||
title: '中间价（央行公布的「锚」）',
|
||||
lines: [
|
||||
'每交易日 9:15 由央行公布：做市商报价',
|
||||
'加权＋逆周期因子，是当日波动中心与政策信号',
|
||||
],
|
||||
fill: '#eef4fa', stroke: '#c7dcf0', titleColor: '#2f5f8f',
|
||||
}),
|
||||
infoCard({
|
||||
left: 88 + cardWidth + 24, top: cardTop, width: cardWidth,
|
||||
title: '在岸即期（市场成交价）',
|
||||
lines: [
|
||||
'银行间外汇市场实时成交形成，16:30 收盘价',
|
||||
'最常被引用；每日只能在中间价 ±2% 区间内波动',
|
||||
],
|
||||
fill: '#fdf1ed', stroke: '#f5d3c8', titleColor: '#c05a45',
|
||||
}),
|
||||
|
||||
// 图例改成两行文字说明，信息量比色块图例大
|
||||
{
|
||||
type: 'text',
|
||||
left: 108, top: 272, silent: true,
|
||||
style: {
|
||||
text: `● 中间价：${mid[0]} → ${mid[1]}，累计升值 ${midGain}点（+${midPct}%）`,
|
||||
fill: '#3b6ea5', fontSize: 14, fontFamily: FONT,
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
left: 108, top: 296, silent: true,
|
||||
style: {
|
||||
text: `● 在岸即期：${spot[0]} → ${spot[1]}，累计升值 ${spotGain}点（+${spotPct}%）`,
|
||||
fill: PALETTE.coral, fontSize: 14, fontFamily: FONT,
|
||||
},
|
||||
},
|
||||
|
||||
footnote(
|
||||
`注：涨幅差${midGain - spotGain}点＝期初偏离${gapStart}−期末偏离${gapEnd}（即期偏强收窄）｜` +
|
||||
'汇兑重估用市场汇率而非中间价｜数据：新华财经｜Joey 谨制'
|
||||
),
|
||||
],
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,81 @@
|
||||
import { col } from '../csv.js';
|
||||
import {
|
||||
PALETTE, FONT, axisCommon, categoryAxis, titleStyle, legendStyle,
|
||||
lineSeries, footnote, watermarks, LAYOUT,
|
||||
} from '../theme.js';
|
||||
|
||||
/**
|
||||
* 图 4：营收到利润的增速对比 —— 四条线看"利润弹性"
|
||||
* 净利增速跑在最上面、成本增速在最下面，中间夹着毛利和营收
|
||||
*/
|
||||
export function growthChart(rows, { width, height }) {
|
||||
const pct = (p) => `${p.value}%`;
|
||||
|
||||
return {
|
||||
backgroundColor: '#fff',
|
||||
title: { ...titleStyle, text: '营收到利润的增速对比（半年与年度）' },
|
||||
legend: {
|
||||
...legendStyle,
|
||||
top: LAYOUT.legendTop,
|
||||
itemGap: 34,
|
||||
data: ['非国际归母净利', '毛利润', '营业收入', '营业成本'].map(name => ({
|
||||
name,
|
||||
icon: 'emptyCircle', // 全部折线图
|
||||
})),
|
||||
},
|
||||
grid: { left: 84, right: 56, top: LAYOUT.gridTop, bottom: 64 },
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
valueFormatter: (v) => `${v}%`,
|
||||
textStyle: { fontFamily: FONT },
|
||||
},
|
||||
xAxis: { ...categoryAxis, data: col(rows, 'period') },
|
||||
yAxis: {
|
||||
...axisCommon,
|
||||
type: 'value',
|
||||
name: '同比增速（%）',
|
||||
nameLocation: 'middle',
|
||||
nameGap: 58,
|
||||
nameTextStyle: { color: PALETTE.grey, fontSize: 13, fontFamily: FONT },
|
||||
min: -45,
|
||||
max: 400,
|
||||
interval: 100,
|
||||
axisLabel: { ...axisCommon.axisLabel, formatter: '{value}%' },
|
||||
},
|
||||
series: [
|
||||
lineSeries({
|
||||
name: '非国际归母净利',
|
||||
data: col(rows, 'non_gaap_net_profit'),
|
||||
color: PALETTE.red,
|
||||
labelPosition: 'top',
|
||||
formatter: pct,
|
||||
width: 3.5,
|
||||
}),
|
||||
lineSeries({
|
||||
name: '毛利润',
|
||||
data: col(rows, 'gross_profit'),
|
||||
color: PALETTE.coral,
|
||||
labelPosition: 'top',
|
||||
formatter: pct,
|
||||
}),
|
||||
lineSeries({
|
||||
name: '营业收入',
|
||||
data: col(rows, 'revenue'),
|
||||
color: PALETTE.navy,
|
||||
labelPosition: 'bottom',
|
||||
formatter: pct,
|
||||
}),
|
||||
lineSeries({
|
||||
name: '营业成本',
|
||||
data: col(rows, 'cost'),
|
||||
color: PALETTE.sage,
|
||||
labelPosition: 'top',
|
||||
formatter: pct,
|
||||
}),
|
||||
],
|
||||
graphic: [
|
||||
...watermarks(width, height),
|
||||
footnote('示例数据 | @思考的Joey'),
|
||||
],
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,114 @@
|
||||
import { col } from '../csv.js';
|
||||
import {
|
||||
PALETTE, FONT, axisCommon, categoryAxis, titleStyle, legendStyle,
|
||||
lineSeries, footnote, watermarks, LAYOUT,
|
||||
} from '../theme.js';
|
||||
|
||||
/**
|
||||
* 图 1：双柱 + 折线，左右双 Y 轴
|
||||
* 存货/营收走左轴（亿元），周转天数走右轴（天）
|
||||
*/
|
||||
export function inventoryChart(rows, { width, height }) {
|
||||
const periods = col(rows, 'period');
|
||||
|
||||
return {
|
||||
backgroundColor: '#fff',
|
||||
title: { ...titleStyle, text: '存货、营收与存货周转天数（半年与年度）' },
|
||||
legend: {
|
||||
...legendStyle,
|
||||
top: LAYOUT.legendTop,
|
||||
data: [
|
||||
{ name: '存货', icon: 'rect' },
|
||||
{ name: '营收', icon: 'rect' },
|
||||
{ name: '存货周转天数', icon: 'emptyCircle' }, // 折线
|
||||
],
|
||||
},
|
||||
grid: { left: 78, right: 82, top: LAYOUT.gridTop, bottom: 90 },
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { type: 'shadow' },
|
||||
textStyle: { fontFamily: FONT },
|
||||
},
|
||||
xAxis: { ...categoryAxis, data: periods },
|
||||
yAxis: [
|
||||
{
|
||||
...axisCommon,
|
||||
type: 'value',
|
||||
name: '金额（亿元）',
|
||||
nameLocation: 'middle',
|
||||
nameGap: 52,
|
||||
nameTextStyle: { color: PALETTE.grey, fontSize: 13, fontFamily: FONT },
|
||||
min: 0,
|
||||
max: 500,
|
||||
interval: 100,
|
||||
},
|
||||
{
|
||||
...axisCommon,
|
||||
type: 'value',
|
||||
name: '同比增速（%）',
|
||||
nameLocation: 'middle',
|
||||
nameGap: 58,
|
||||
nameRotate: -90,
|
||||
nameTextStyle: { color: PALETTE.grey, fontSize: 13, fontFamily: FONT },
|
||||
min: -5,
|
||||
max: 220,
|
||||
interval: 50,
|
||||
axisLabel: {
|
||||
...axisCommon.axisLabel,
|
||||
formatter: '{value}天',
|
||||
},
|
||||
splitLine: { show: false },
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '存货',
|
||||
type: 'bar',
|
||||
data: col(rows, 'inventory'),
|
||||
barWidth: 22,
|
||||
barGap: '15%',
|
||||
itemStyle: { color: PALETTE.brown },
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
color: PALETTE.ink,
|
||||
fontSize: 12,
|
||||
fontWeight: 'bold',
|
||||
fontFamily: FONT,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '营收',
|
||||
type: 'bar',
|
||||
data: col(rows, 'revenue'),
|
||||
barWidth: 22,
|
||||
itemStyle: { color: PALETTE.sand },
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
color: PALETTE.ink,
|
||||
fontSize: 12,
|
||||
fontFamily: FONT,
|
||||
},
|
||||
},
|
||||
{
|
||||
...lineSeries({
|
||||
name: '存货周转天数',
|
||||
data: col(rows, 'turnover_days'),
|
||||
color: PALETTE.coral,
|
||||
labelPosition: 'bottom',
|
||||
formatter: (p) => `${p.value}天`,
|
||||
}),
|
||||
yAxisIndex: 1,
|
||||
z: 10,
|
||||
},
|
||||
],
|
||||
graphic: [
|
||||
...watermarks(width, height),
|
||||
footnote(
|
||||
'周转天数=平均存货÷当期销售成本×期间天数（半年181/年度365，期初=上一年末，日历天数口径）；' +
|
||||
'与公司披露一致：23年133/24年102/25年123/26H1 201天 | @思考的Joey'
|
||||
),
|
||||
],
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,83 @@
|
||||
import { col } from '../csv.js';
|
||||
import {
|
||||
PALETTE, FONT, axisCommon, categoryAxis, titleStyle, legendStyle,
|
||||
lineSeries, footnote, watermarks, LAYOUT,
|
||||
} from '../theme.js';
|
||||
|
||||
/**
|
||||
* 图 2：四条率线拆解
|
||||
* 毛利率在上方独立成带，三条费用/净利率在下方交织 —— 标签交替上下放，避免叠字
|
||||
*/
|
||||
export function marginChart(rows, { width, height }) {
|
||||
const periods = col(rows, 'period');
|
||||
const pct = (p) => `${p.value}%`;
|
||||
|
||||
// 交替上下：偶数点在上，奇数点在下。原图就是这么处理密集标签的
|
||||
const alternate = (base) => (p) => (p.dataIndex % 2 === 0 ? base : base);
|
||||
|
||||
return {
|
||||
backgroundColor: '#fff',
|
||||
title: { ...titleStyle, text: '利润率与费用率拆解（半年与年度）' },
|
||||
legend: {
|
||||
...legendStyle,
|
||||
top: LAYOUT.legendTop,
|
||||
data: ['毛利率', '销售费用率', '管理费用率', '非国际归母净利率'].map(name => ({
|
||||
name,
|
||||
icon: 'emptyCircle', // 全部折线图
|
||||
})),
|
||||
},
|
||||
grid: { left: 72, right: 48, top: LAYOUT.gridTop, bottom: 62 },
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
valueFormatter: (v) => `${v}%`,
|
||||
textStyle: { fontFamily: FONT },
|
||||
},
|
||||
xAxis: { ...categoryAxis, data: periods },
|
||||
yAxis: {
|
||||
...axisCommon,
|
||||
type: 'value',
|
||||
name: '比率（%）',
|
||||
nameLocation: 'middle',
|
||||
nameGap: 46,
|
||||
nameTextStyle: { color: PALETTE.grey, fontSize: 13, fontFamily: FONT },
|
||||
min: 0,
|
||||
max: 80,
|
||||
interval: 25,
|
||||
axisLabel: { ...axisCommon.axisLabel, formatter: '{value}%' },
|
||||
},
|
||||
series: [
|
||||
lineSeries({
|
||||
name: '毛利率',
|
||||
data: col(rows, 'gross_margin'),
|
||||
color: PALETTE.green,
|
||||
labelPosition: 'top',
|
||||
formatter: pct,
|
||||
}),
|
||||
lineSeries({
|
||||
name: '销售费用率',
|
||||
data: col(rows, 'sales_expense_rate'),
|
||||
color: PALETTE.orange,
|
||||
labelPosition: 'top',
|
||||
formatter: pct,
|
||||
}),
|
||||
lineSeries({
|
||||
name: '管理费用率',
|
||||
data: col(rows, 'admin_expense_rate'),
|
||||
color: PALETTE.purple,
|
||||
labelPosition: 'bottom',
|
||||
formatter: pct,
|
||||
}),
|
||||
lineSeries({
|
||||
name: '非国际归母净利率',
|
||||
data: col(rows, 'non_gaap_net_margin'),
|
||||
color: PALETTE.coral,
|
||||
labelPosition: 'top',
|
||||
formatter: pct,
|
||||
}),
|
||||
],
|
||||
graphic: [
|
||||
...watermarks(width, height),
|
||||
footnote('示例数据 | @思考的Joey'),
|
||||
],
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,113 @@
|
||||
import { col } from '../csv.js';
|
||||
import {
|
||||
PALETTE, FONT, axisCommon, periodAxis, titleStyle, legendStyle,
|
||||
lineSeries, footnote, watermarks, LAYOUT,
|
||||
} from '../theme.js';
|
||||
|
||||
/**
|
||||
* 泡泡玛特资产结构演变图
|
||||
* 堆叠柱状图展示资产配置，折线图展示总资产增长
|
||||
*/
|
||||
export function assetsChart(rows, { width, height }) {
|
||||
const periods = col(rows, 'period');
|
||||
|
||||
return {
|
||||
backgroundColor: '#fff',
|
||||
title: {
|
||||
...titleStyle,
|
||||
text: '泡泡玛特资产结构演变（2020H1-2026H1）',
|
||||
subtext: '单位：亿元',
|
||||
},
|
||||
legend: {
|
||||
...legendStyle,
|
||||
top: LAYOUT.legendTop,
|
||||
data: ['类现金', '应收账款', '投资资产', '经营类资产', '资产总计'].map(name => ({
|
||||
name,
|
||||
icon: name === '资产总计' ? 'emptyCircle' : 'rect', // 总计是折线，其他是柱
|
||||
})),
|
||||
},
|
||||
grid: { left: 78, right: 82, top: LAYOUT.gridTop, bottom: 90 },
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { type: 'shadow' },
|
||||
textStyle: { fontFamily: FONT },
|
||||
},
|
||||
xAxis: { ...periodAxis, data: periods },
|
||||
yAxis: [
|
||||
{
|
||||
...axisCommon,
|
||||
type: 'value',
|
||||
name: '金额（亿元）',
|
||||
nameLocation: 'middle',
|
||||
nameGap: 52,
|
||||
nameTextStyle: { color: PALETTE.grey, fontSize: 13, fontFamily: FONT },
|
||||
min: 0,
|
||||
max: 350,
|
||||
interval: 50,
|
||||
},
|
||||
{
|
||||
...axisCommon,
|
||||
type: 'value',
|
||||
name: '资产总计（亿元）',
|
||||
nameLocation: 'middle',
|
||||
nameGap: 58,
|
||||
nameRotate: -90,
|
||||
nameTextStyle: { color: PALETTE.grey, fontSize: 13, fontFamily: FONT },
|
||||
min: 0,
|
||||
max: 350,
|
||||
interval: 50,
|
||||
splitLine: { show: false },
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '类现金',
|
||||
type: 'bar',
|
||||
stack: 'assets',
|
||||
data: col(rows, 'cash_like'),
|
||||
itemStyle: { color: PALETTE.blue },
|
||||
emphasis: { focus: 'series' },
|
||||
},
|
||||
{
|
||||
name: '应收账款',
|
||||
type: 'bar',
|
||||
stack: 'assets',
|
||||
data: col(rows, 'receivables'),
|
||||
itemStyle: { color: PALETTE.orange },
|
||||
emphasis: { focus: 'series' },
|
||||
},
|
||||
{
|
||||
name: '投资资产',
|
||||
type: 'bar',
|
||||
stack: 'assets',
|
||||
data: col(rows, 'investment'),
|
||||
itemStyle: { color: PALETTE.purple },
|
||||
emphasis: { focus: 'series' },
|
||||
},
|
||||
{
|
||||
name: '经营类资产',
|
||||
type: 'bar',
|
||||
stack: 'assets',
|
||||
data: col(rows, 'operating_assets'),
|
||||
itemStyle: { color: PALETTE.sage },
|
||||
emphasis: { focus: 'series' },
|
||||
},
|
||||
{
|
||||
...lineSeries({
|
||||
name: '资产总计',
|
||||
data: col(rows, 'total_assets'),
|
||||
color: PALETTE.red,
|
||||
labelPosition: 'top',
|
||||
formatter: (p) => p.value.toFixed(1),
|
||||
width: 3,
|
||||
}),
|
||||
yAxisIndex: 1,
|
||||
z: 10,
|
||||
},
|
||||
],
|
||||
graphic: [
|
||||
...watermarks(width, height),
|
||||
footnote('数据来源：泡泡玛特财报 | @思考的Joey'),
|
||||
],
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,122 @@
|
||||
import { col } from '../csv.js';
|
||||
import {
|
||||
PALETTE, FONT, axisCommon, titleStyle, footnote, watermarks,
|
||||
} from '../theme.js';
|
||||
|
||||
/**
|
||||
* 净利率同比拆解瀑布图（2025H1 → 2026H1）
|
||||
*
|
||||
* ECharts 没有原生瀑布图，用「透明占位柱 + 可见柱」堆叠模拟：
|
||||
* 占位柱撑到该项起点，可见柱只画增量部分。
|
||||
*
|
||||
* 口径要点：各项先算占营收比的税前变化，再乘税盾 (1-t₁) 折成对净利率的贡献，
|
||||
* 税率变化单独成项。恒等式 净利率 = 税前利润率 × (1-税率)，
|
||||
* Δ净 = Δ税前×(1-t₁) − 税前₂×Δt，实测闭合误差 0.00pct。
|
||||
*/
|
||||
const COLOR = {
|
||||
total: '#2F5C85', // 首尾锚点
|
||||
neg: '#C0392B', // 拖累
|
||||
pos: '#1A9E5C', // 利好
|
||||
};
|
||||
|
||||
export function ppmtBridgeChart(rows, { width, height }) {
|
||||
const items = col(rows, 'item');
|
||||
const types = col(rows, 'type');
|
||||
const bases = col(rows, 'base');
|
||||
const values = col(rows, 'value');
|
||||
|
||||
return {
|
||||
backgroundColor: '#fff',
|
||||
title: {
|
||||
...titleStyle,
|
||||
text: '净利率同比拆解：33.7% → 29.7%（2025H1 → 2026H1）',
|
||||
subtext: '单位：占营收百分点。汇兑等其他收益项是最大拖累，费用率改善仅部分对冲',
|
||||
},
|
||||
grid: { left: 114, right: 83, top: 120, bottom: 130 },
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { type: 'shadow' },
|
||||
textStyle: { fontFamily: FONT },
|
||||
formatter: (ps) => {
|
||||
const p = ps.find((x) => x.seriesName === '变化');
|
||||
if (!p) return '';
|
||||
const i = p.dataIndex;
|
||||
if (types[i] === 'total') return `<b>${items[i]}</b><br/>${values[i].toFixed(2)}%`;
|
||||
const sign = types[i] === 'pos' ? '+' : '−';
|
||||
return `<b>${items[i]}</b><br/>${sign}${values[i].toFixed(2)} pct`;
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: items,
|
||||
axisLine: { show: true, lineStyle: { color: PALETTE.axisLine } },
|
||||
axisTick: { show: false },
|
||||
axisLabel: {
|
||||
color: PALETTE.ink,
|
||||
fontSize: 11,
|
||||
fontFamily: FONT,
|
||||
interval: 0,
|
||||
rotate: 32,
|
||||
margin: 12,
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
...axisCommon,
|
||||
type: 'value',
|
||||
name: '净利率（%）',
|
||||
nameLocation: 'middle',
|
||||
nameGap: 52,
|
||||
nameTextStyle: { color: PALETTE.grey, fontSize: 13, fontFamily: FONT },
|
||||
min: 26,
|
||||
max: 36,
|
||||
interval: 2,
|
||||
axisLabel: { ...axisCommon.axisLabel, formatter: '{value}%' },
|
||||
},
|
||||
series: [
|
||||
{
|
||||
// 占位柱：撑到每项起点，完全透明
|
||||
name: '占位',
|
||||
type: 'bar',
|
||||
stack: 'bridge',
|
||||
silent: true,
|
||||
itemStyle: { color: 'transparent' },
|
||||
emphasis: { itemStyle: { color: 'transparent' } },
|
||||
data: bases,
|
||||
},
|
||||
{
|
||||
name: '变化',
|
||||
type: 'bar',
|
||||
stack: 'bridge',
|
||||
// 柱宽固定时 barCategoryGap 无效，间距只能靠 grid 左右边距调节：
|
||||
// 步距 = 绘图宽 / 类目数，间隙 = 步距 − barWidth
|
||||
barWidth: 51,
|
||||
data: values.map((v, i) => ({
|
||||
value: v,
|
||||
itemStyle: { color: COLOR[types[i]] },
|
||||
})),
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
fontFamily: FONT,
|
||||
fontSize: 11,
|
||||
fontWeight: 'bold',
|
||||
color: PALETTE.ink,
|
||||
formatter: (p) => {
|
||||
const i = p.dataIndex;
|
||||
if (types[i] === 'total') return `${values[i].toFixed(1)}%`;
|
||||
// 所有项都显示（资产减值0.01、其他业务净额0.01也必须标）
|
||||
const sign = types[i] === 'pos' ? '+' : '−';
|
||||
return `${sign}${values[i].toFixed(2)}pct`;
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
graphic: [
|
||||
...watermarks(width, height),
|
||||
footnote(
|
||||
'各项为占营收百分点，已折算为对净利率影响（×税盾系数）\n' +
|
||||
'其他收益净额：26H1净损失6.89亿，主要为汇兑损失7.20亿（25H1为汇兑收益1.20亿） | @思考的Joey'
|
||||
),
|
||||
],
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,130 @@
|
||||
import { col } from '../csv.js';
|
||||
import {
|
||||
PALETTE, FONT, axisCommon, periodAxis, titleStyle, legendStyle,
|
||||
footnote, watermarks, LAYOUT,
|
||||
} from '../theme.js';
|
||||
|
||||
/**
|
||||
* 泡泡玛特品类收入结构图
|
||||
* 堆叠柱状图展示各品类的收入占比和增长
|
||||
*/
|
||||
export function categoryChart(rows, { width, height }) {
|
||||
// 过滤掉表头行（"品类"那一行）
|
||||
const dataRows = rows.filter(r => r.period && r.period !== '品类');
|
||||
const periods = col(dataRows, 'period');
|
||||
|
||||
return {
|
||||
backgroundColor: '#fff',
|
||||
title: {
|
||||
...titleStyle,
|
||||
text: '泡泡玛特品类收入结构（2024H1-2025H2）',
|
||||
subtext: '单位：亿元',
|
||||
},
|
||||
legend: {
|
||||
...legendStyle,
|
||||
top: LAYOUT.legendTop,
|
||||
data: ['毛绒', '手办', 'MEGA', '衍生品及其他'].map(name => ({
|
||||
name,
|
||||
icon: 'rect', // 全部是堆叠柱状图
|
||||
})),
|
||||
},
|
||||
grid: { left: 78, right: 56, top: LAYOUT.gridTop, bottom: 90 },
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { type: 'shadow' },
|
||||
textStyle: { fontFamily: FONT },
|
||||
formatter: (params) => {
|
||||
let result = `<b>${params[0].axisValue}</b><br/>`;
|
||||
let total = 0;
|
||||
params.forEach(p => {
|
||||
total += p.value;
|
||||
result += `${p.marker}${p.seriesName}: ${p.value.toFixed(2)} 亿元<br/>`;
|
||||
});
|
||||
result += `<b>合计: ${total.toFixed(2)} 亿元</b>`;
|
||||
return result;
|
||||
},
|
||||
},
|
||||
xAxis: { ...periodAxis, data: periods },
|
||||
yAxis: {
|
||||
...axisCommon,
|
||||
type: 'value',
|
||||
name: '收入（亿元）',
|
||||
nameLocation: 'middle',
|
||||
nameGap: 52,
|
||||
nameTextStyle: { color: PALETTE.grey, fontSize: 13, fontFamily: FONT },
|
||||
min: 0,
|
||||
max: 250,
|
||||
interval: 50,
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '毛绒',
|
||||
type: 'bar',
|
||||
stack: 'category',
|
||||
data: col(dataRows, 'plush'),
|
||||
itemStyle: { color: PALETTE.coral },
|
||||
emphasis: { focus: 'series' },
|
||||
label: {
|
||||
show: true,
|
||||
position: 'inside',
|
||||
color: '#fff',
|
||||
fontSize: 12,
|
||||
fontFamily: FONT,
|
||||
formatter: (p) => (p.value > 15 ? p.value.toFixed(1) : ''),
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '手办',
|
||||
type: 'bar',
|
||||
stack: 'category',
|
||||
data: col(dataRows, 'figure'),
|
||||
itemStyle: { color: PALETTE.blue },
|
||||
emphasis: { focus: 'series' },
|
||||
label: {
|
||||
show: true,
|
||||
position: 'inside',
|
||||
color: '#fff',
|
||||
fontSize: 12,
|
||||
fontFamily: FONT,
|
||||
formatter: (p) => (p.value > 15 ? p.value.toFixed(1) : ''),
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'MEGA',
|
||||
type: 'bar',
|
||||
stack: 'category',
|
||||
data: col(dataRows, 'mega'),
|
||||
itemStyle: { color: PALETTE.purple },
|
||||
emphasis: { focus: 'series' },
|
||||
label: {
|
||||
show: true,
|
||||
position: 'inside',
|
||||
color: '#fff',
|
||||
fontSize: 12,
|
||||
fontFamily: FONT,
|
||||
formatter: (p) => (p.value > 8 ? p.value.toFixed(1) : ''),
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '衍生品及其他',
|
||||
type: 'bar',
|
||||
stack: 'category',
|
||||
data: col(dataRows, 'other'),
|
||||
itemStyle: { color: PALETTE.sage },
|
||||
emphasis: { focus: 'series' },
|
||||
label: {
|
||||
show: true,
|
||||
position: 'inside',
|
||||
color: '#fff',
|
||||
fontSize: 12,
|
||||
fontFamily: FONT,
|
||||
formatter: (p) => (p.value > 8 ? p.value.toFixed(1) : ''),
|
||||
},
|
||||
},
|
||||
],
|
||||
graphic: [
|
||||
...watermarks(width, height),
|
||||
footnote('数据来源：泡泡玛特财报 | @思考的Joey'),
|
||||
],
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,65 @@
|
||||
import { col } from '../csv.js';
|
||||
import {
|
||||
PALETTE, FONT, axisCommon, periodAxis, titleStyle,
|
||||
lineSeries, standardLegend, footnote, watermarks, LAYOUT,
|
||||
} from '../theme.js';
|
||||
|
||||
/**
|
||||
* 核心利润率（2020H1-2026H1）
|
||||
* 核心利润率 = 核心利润 ÷ 营业收入 = 毛利率 − 销售费用率 − 管理费用率
|
||||
*
|
||||
* 剔除了汇兑、投资收益、税等非主业扰动，是四条率线里最能反映
|
||||
* 「卖货本身赚不赚钱」的一条。22全年触底 10.8%，25全年见顶 45.6%。
|
||||
*
|
||||
* 配色 wine(#7B2D42)：同页已有 17 种线色，Lab ΔE 筛选后仅此一色 > 24。
|
||||
*/
|
||||
const LINE_COLOR = '#7B2D42';
|
||||
|
||||
export function ppmtCoreMarginChart(rows, { width, height }) {
|
||||
const pct = (p) => `${p.value.toFixed(1)}%`;
|
||||
|
||||
return {
|
||||
backgroundColor: '#fff',
|
||||
title: {
|
||||
...titleStyle,
|
||||
text: '泡泡玛特核心利润率（20H1-26H1）',
|
||||
subtext: '核心利润率 = 毛利率 − 销售费用率 − 管理费用率，剔除汇兑与投资等非主业扰动',
|
||||
},
|
||||
legend: standardLegend(['核心利润率'], { itemGap: 32 }),
|
||||
grid: { left: 78, right: 60, top: LAYOUT.gridTop, bottom: 90 },
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
valueFormatter: (v) => `${v.toFixed(1)}%`,
|
||||
textStyle: { fontFamily: FONT },
|
||||
},
|
||||
xAxis: { ...periodAxis, data: col(rows, 'period') },
|
||||
yAxis: {
|
||||
...axisCommon,
|
||||
type: 'value',
|
||||
name: '核心利润率（%）',
|
||||
nameLocation: 'middle',
|
||||
nameGap: 52,
|
||||
nameTextStyle: { color: PALETTE.grey, fontSize: 13, fontFamily: FONT },
|
||||
min: 0,
|
||||
max: 50,
|
||||
interval: 10,
|
||||
axisLabel: { ...axisCommon.axisLabel, formatter: '{value}%' },
|
||||
},
|
||||
series: [
|
||||
lineSeries({
|
||||
name: '核心利润率',
|
||||
data: col(rows, 'core_margin'),
|
||||
color: LINE_COLOR,
|
||||
formatter: pct,
|
||||
width: 3.08, // 与拆解图毛利率线一致
|
||||
}),
|
||||
],
|
||||
graphic: [
|
||||
...watermarks(width, height),
|
||||
footnote(
|
||||
'核心利润率由绝对值口径直接计算（核心利润÷营收），比三个比率行相减更准\n' +
|
||||
'——后者各只存4位小数，累加误差可达0.045pct | @思考的Joey'
|
||||
),
|
||||
],
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,142 @@
|
||||
import { col } from '../csv.js';
|
||||
import {
|
||||
PALETTE, FONT, axisCommon, periodAxis, titleStyle, legendStyle,
|
||||
footnote, watermarks, LAYOUT,
|
||||
} from '../theme.js';
|
||||
|
||||
/**
|
||||
* 核心利润及同比增速（2020H1-2026H1）
|
||||
* 核心利润 = 毛利 - 销售费用 - 管理费用，反映主业盈利能力去除营销和管理成本后的净额。
|
||||
* 柱状图展示绝对值（亿元），折线图展示同比增速（%）。
|
||||
*/
|
||||
export function ppmtCoreProfitChart(rows, { width, height }) {
|
||||
const periods = col(rows, 'period');
|
||||
const core = col(rows, 'core_profit');
|
||||
const yoy = col(rows, 'yoy');
|
||||
|
||||
return {
|
||||
backgroundColor: '#fff',
|
||||
title: {
|
||||
...titleStyle,
|
||||
text: '泡泡玛特核心利润及同比增速（20H1-26H1）',
|
||||
subtext: '核心利润 = 毛利 - 销售费用 - 管理费用，单位：亿元',
|
||||
},
|
||||
legend: {
|
||||
top: LAYOUT.legendTop,
|
||||
itemGap: 32,
|
||||
textStyle: {
|
||||
color: PALETTE.ink,
|
||||
fontSize: 14,
|
||||
fontFamily: FONT,
|
||||
},
|
||||
data: ['核心利润', '同比增速'],
|
||||
},
|
||||
grid: { left: 78, right: 128, top: LAYOUT.gridTop, bottom: 100 },
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { type: 'cross' },
|
||||
textStyle: { fontFamily: FONT },
|
||||
formatter: (params) => {
|
||||
let result = `<b>${params[0].axisValue}</b><br/>`;
|
||||
params.forEach((p) => {
|
||||
if (p.seriesName === '核心利润') {
|
||||
result += `${p.marker}${p.seriesName}: ${p.value.toFixed(1)}亿<br/>`;
|
||||
} else if (p.seriesName === '同比增速' && p.value !== null) {
|
||||
result += `${p.marker}${p.seriesName}: ${p.value > 0 ? '+' : ''}${p.value.toFixed(1)}%<br/>`;
|
||||
}
|
||||
});
|
||||
return result;
|
||||
},
|
||||
},
|
||||
xAxis: { ...periodAxis, data: periods },
|
||||
yAxis: [
|
||||
{
|
||||
// 左轴：核心利润（亿元）
|
||||
...axisCommon,
|
||||
type: 'value',
|
||||
name: '核心利润（亿元）',
|
||||
nameLocation: 'middle',
|
||||
nameGap: 48,
|
||||
nameTextStyle: { color: PALETTE.grey, fontSize: 13, fontFamily: FONT },
|
||||
min: 0,
|
||||
axisLabel: { ...axisCommon.axisLabel, formatter: '{value}' },
|
||||
},
|
||||
{
|
||||
// 右轴：同比增速（%）
|
||||
type: 'value',
|
||||
name: '同比增速（%）',
|
||||
nameLocation: 'middle',
|
||||
nameGap: 58,
|
||||
nameTextStyle: { color: PALETTE.grey, fontSize: 13, fontFamily: FONT },
|
||||
min: -100,
|
||||
max: 500,
|
||||
interval: 100,
|
||||
axisLine: { show: false },
|
||||
axisTick: { show: false },
|
||||
splitLine: { show: false },
|
||||
axisLabel: {
|
||||
color: PALETTE.grey,
|
||||
fontSize: 12,
|
||||
fontFamily: FONT,
|
||||
formatter: '{value}%',
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '核心利润',
|
||||
type: 'bar',
|
||||
yAxisIndex: 0,
|
||||
data: core,
|
||||
barWidth: 32,
|
||||
itemStyle: { color: PALETTE.navy },
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
fontFamily: FONT,
|
||||
fontSize: 11,
|
||||
color: PALETTE.ink,
|
||||
formatter: (p) => p.value.toFixed(1),
|
||||
// 强制显示所有标签，即使柱子很矮
|
||||
overflow: 'none',
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '同比增速',
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
data: yoy,
|
||||
lineStyle: { color: PALETTE.coral, width: 3.08 }, // 与拆解图毛利率线一致
|
||||
// 空心圆点：白心 + 彩色描边。图例会自动继承这个样式，
|
||||
// 渲染成「短线 + 空心圆」
|
||||
itemStyle: {
|
||||
color: '#fff',
|
||||
borderColor: PALETTE.coral,
|
||||
borderWidth: 2.5, // 与 theme.js lineSeries 一致
|
||||
},
|
||||
symbol: 'circle',
|
||||
symbolSize: 9, // 与 theme.js lineSeries 一致
|
||||
showSymbol: true,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
fontFamily: FONT,
|
||||
fontSize: 11,
|
||||
color: PALETTE.coral,
|
||||
fontWeight: '600',
|
||||
formatter: (p) => {
|
||||
if (p.value === null || p.value === '') return '';
|
||||
return `${p.value > 0 ? '+' : ''}${p.value.toFixed(1)}%`;
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
graphic: [
|
||||
...watermarks(width, height),
|
||||
footnote(
|
||||
'核心利润反映主业盈利能力（扣除营销与管理成本）；' +
|
||||
'2025H1/H2同比增速受益于费用率优化和规模效应 | @思考的Joey'
|
||||
),
|
||||
],
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,121 @@
|
||||
import { col } from '../csv.js';
|
||||
import {
|
||||
PALETTE, FONT, axisCommon, periodAxis, titleStyle, legendStyle,
|
||||
lineSeries, footnote, watermarks, LAYOUT,
|
||||
} from '../theme.js';
|
||||
|
||||
/**
|
||||
* 泡泡玛特营收到利润的增速对比（2020H1-2026H1）
|
||||
* 四条折线展示从成本到净利的增速分化。
|
||||
* 净利为主角走实线，其余三条虚线退为参照。
|
||||
*/
|
||||
const SERIES = [
|
||||
{ key: 'non_gaap_net_profit', name: '非GAAP归母净利', color: '#8B4789', width: 2.6, z: 40, dashed: false },
|
||||
{ key: 'gross_profit', name: '毛利润', color: '#D9822B', width: 1.8, z: 30, dashed: true },
|
||||
{ key: 'revenue', name: '营业收入', color: '#2F5C85', width: 1.8, z: 20, dashed: true },
|
||||
{ key: 'cost', name: '营业成本', color: '#5B8C5A', width: 1.8, z: 10, dashed: true },
|
||||
];
|
||||
|
||||
/**
|
||||
* 逐点决定标签方向：同一期内按数值排名交替 top/bottom，
|
||||
* 相邻名次朝反方向散开。静态方向在 2020H1（四值挤在 16~61%）必然重叠，
|
||||
* 而 label.position 不接受函数，只能按点覆盖 data。
|
||||
*/
|
||||
function labeledData(rows, key) {
|
||||
return rows.map((row, i) => {
|
||||
const value = row[key];
|
||||
if (value === '' || value == null) return null;
|
||||
|
||||
// 该期所有系列的值，降序排名
|
||||
const ranked = SERIES
|
||||
.map((s) => row[s.key])
|
||||
.filter((v) => v !== '' && v != null)
|
||||
.sort((a, b) => b - a);
|
||||
const rank = ranked.indexOf(value);
|
||||
|
||||
return {
|
||||
value,
|
||||
label: {
|
||||
position: rank % 2 === 0 ? 'top' : 'bottom',
|
||||
distance: 11 + Math.floor(rank / 2) * 13,
|
||||
},
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
export function ppmtGrowthChart(rows, { width, height }) {
|
||||
const pct = (p) => `${p.value}%`;
|
||||
|
||||
return {
|
||||
backgroundColor: '#fff',
|
||||
title: {
|
||||
...titleStyle,
|
||||
text: '泡泡玛特营收到利润的增速对比（2020H1-2026H1）',
|
||||
subtext: '同比增速（%），净利增速显著高于营收增速体现利润弹性',
|
||||
},
|
||||
legend: {
|
||||
// 不继承 legendStyle，让 ECharts 按系列自动生成「短线+空心圆」图例
|
||||
top: LAYOUT.legendTop,
|
||||
itemGap: 34,
|
||||
textStyle: {
|
||||
color: PALETTE.ink,
|
||||
fontSize: 14,
|
||||
fontFamily: FONT,
|
||||
},
|
||||
data: ['非GAAP归母净利', '毛利润', '营业收入', '营业成本'],
|
||||
},
|
||||
grid: { left: 84, right: 56, top: LAYOUT.gridTop, bottom: 80 },
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
valueFormatter: (v) => `${v}%`,
|
||||
textStyle: { fontFamily: FONT },
|
||||
},
|
||||
xAxis: { ...periodAxis, data: col(rows, 'period') },
|
||||
yAxis: {
|
||||
...axisCommon,
|
||||
type: 'value',
|
||||
name: '同比增速（%）',
|
||||
nameLocation: 'middle',
|
||||
nameGap: 58,
|
||||
nameTextStyle: { color: PALETTE.grey, fontSize: 13, fontFamily: FONT },
|
||||
min: -100,
|
||||
max: 400,
|
||||
interval: 100,
|
||||
axisLabel: { ...axisCommon.axisLabel, formatter: '{value}%' },
|
||||
},
|
||||
series: SERIES.map((s) => ({
|
||||
...lineSeries({
|
||||
name: s.name,
|
||||
data: labeledData(rows, s.key),
|
||||
color: s.color,
|
||||
formatter: pct,
|
||||
width: s.width,
|
||||
}),
|
||||
// 整体替换 lineStyle，必须带上 color，否则会退回主题默认色
|
||||
lineStyle: {
|
||||
color: s.color,
|
||||
type: s.dashed ? 'dashed' : 'solid',
|
||||
width: s.width,
|
||||
},
|
||||
// 四条线数值常贴到一起。白描边保证交叠处可读，
|
||||
// labelLayout.hideOverlap 让 ECharts 自动丢弃仍然碰撞的标签，
|
||||
// 按 z 决定谁被保留 —— 净利最高，成本最先被舍弃。
|
||||
label: {
|
||||
show: true,
|
||||
color: s.color,
|
||||
fontSize: 12,
|
||||
fontWeight: 500,
|
||||
fontFamily: FONT,
|
||||
formatter: pct,
|
||||
textBorderColor: '#fff',
|
||||
textBorderWidth: 3,
|
||||
},
|
||||
labelLayout: { hideOverlap: true },
|
||||
z: s.z,
|
||||
})),
|
||||
graphic: [
|
||||
...watermarks(width, height),
|
||||
footnote('数据来源：泡泡玛特财报，2020H1/H2非GAAP净利用归母净利替代 | @思考的Joey'),
|
||||
],
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,81 @@
|
||||
import { col } from '../csv.js';
|
||||
import {
|
||||
PALETTE, FONT, axisCommon, periodAxis, titleStyle, legendStyle,
|
||||
lineSeries, footnote, watermarks, LAYOUT,
|
||||
} from '../theme.js';
|
||||
|
||||
/**
|
||||
* 泡泡玛特主要IP收入趋势图
|
||||
* 多条折线展示各IP的收入变化
|
||||
*/
|
||||
export function ipChart(rows, { width, height }) {
|
||||
// 提取时期（从第一行的列名）
|
||||
const periods = Object.keys(rows[0]).filter(k => k !== 'ip');
|
||||
|
||||
// 为每个IP创建一条折线
|
||||
const ipColors = {
|
||||
'THE MONSTERS': PALETTE.brown,
|
||||
'MOLLY': PALETTE.coral,
|
||||
'SKULLPANDA': PALETTE.purple,
|
||||
'CRYBABY': PALETTE.red,
|
||||
'DIMOO': PALETTE.blue,
|
||||
'HIRONO-小野': PALETTE.orange,
|
||||
'HACIPUPU': PALETTE.sage,
|
||||
'星星人': PALETTE.navy,
|
||||
};
|
||||
|
||||
const series = rows.map((row) => {
|
||||
const ipName = row.ip;
|
||||
const data = periods.map(p => row[p]);
|
||||
|
||||
return lineSeries({
|
||||
name: ipName,
|
||||
data,
|
||||
color: ipColors[ipName] || PALETTE.grey,
|
||||
labelPosition: 'top',
|
||||
formatter: (p) => (p.value > 10 ? p.value.toFixed(0) : ''),
|
||||
width: 2.5,
|
||||
});
|
||||
});
|
||||
|
||||
return {
|
||||
backgroundColor: '#fff',
|
||||
title: {
|
||||
...titleStyle,
|
||||
text: '泡泡玛特主要IP收入趋势（2021H1-2025H2）',
|
||||
subtext: '单位：亿元',
|
||||
},
|
||||
legend: {
|
||||
...legendStyle,
|
||||
top: LAYOUT.legendTop,
|
||||
itemGap: 20,
|
||||
data: rows.map(r => ({
|
||||
name: r.ip,
|
||||
icon: 'emptyCircle', // 折线图：空心圆圈
|
||||
})),
|
||||
},
|
||||
grid: { left: 78, right: 56, top: LAYOUT.gridTop, bottom: 70 },
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
valueFormatter: (v) => `${v.toFixed(2)} 亿元`,
|
||||
textStyle: { fontFamily: FONT },
|
||||
},
|
||||
xAxis: { ...periodAxis, data: periods },
|
||||
yAxis: {
|
||||
...axisCommon,
|
||||
type: 'value',
|
||||
name: '收入（亿元）',
|
||||
nameLocation: 'middle',
|
||||
nameGap: 52,
|
||||
nameTextStyle: { color: PALETTE.grey, fontSize: 13, fontFamily: FONT },
|
||||
min: 0,
|
||||
max: 100,
|
||||
interval: 20,
|
||||
},
|
||||
series,
|
||||
graphic: [
|
||||
...watermarks(width, height),
|
||||
footnote('数据来源：泡泡玛特财报 | @思考的Joey'),
|
||||
],
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,154 @@
|
||||
import { col } from '../csv.js';
|
||||
import {
|
||||
PALETTE, FONT, axisCommon, categoryAxis, titleStyle, labelStyle,
|
||||
barSeries, lineSeries, standardLegend, footnote, watermarks, LAYOUT,
|
||||
} from '../theme.js';
|
||||
|
||||
/**
|
||||
* 泡泡玛特除 THE MONSTERS 外的 IP 收入及同比（2021H1-2026H1）
|
||||
* 柱 = 各期 IP 收入合计 − THE MONSTERS，折线 = 同比增速。
|
||||
* 看的是「剔掉唯一爆款后，其余 IP 盘子还在不在长」。
|
||||
*
|
||||
* 源：ppmt.xlsx「IP收入和占比」收入区的「计算合计」行减去 THE MONSTERS 行。
|
||||
*
|
||||
* ⚠ 这张表的 H2 是【单半年】，不是全年累计（已核对 2025H2 的 232.44
|
||||
* = 利润表 371.2 − 138.76）。两个后果：
|
||||
* 1. 轴标签只去世纪前缀（25H2），不能用 `periodAxis`（它会渲染成「25全年」）
|
||||
* 2. 同比是「本期 vs 去年同半年」，即隔两列相除；前两期无基数，留空
|
||||
*
|
||||
* CSV 收入存两位小数：同比对基数的舍入敏感，一位小数在 16~20 亿的基数上
|
||||
* 会让同比偏掉约 0.5pct。实测两位小数复算同比与全精度差 ≤ 0.02pct。
|
||||
*
|
||||
* 配色：墨翡翠柱 + 鲜亮紫线，两色 ΔE 隔着老远。
|
||||
* 翡翠选得比紧邻堆叠图里 DIMOO 那支（#3E9E6E）更深，ΔE 22.7，不会被读成同一个色；
|
||||
* 同时深到白字对比度 6.44:1，够柱内白色标签用。
|
||||
*
|
||||
* 标签避让（不加底色，白色药丸底太丑）：
|
||||
* 1. 柱子的数值放柱内白字（insideTop）——腾开柱顶上方，不和同比标签抢位置
|
||||
* 2. 同比标签逐点判断：算出标签底边和柱顶的相对位置，只有整体压在柱面上的
|
||||
* 那个点（26H1，线在 45%、柱顶在 80%）改用浅紫字，其余保持线色
|
||||
*
|
||||
* 浅紫而非白色：柱子自己的数值已经是白字，同比再用白字两者会混。
|
||||
*/
|
||||
const BAR_COLOR = '#176B52'; // 墨翡翠
|
||||
const LINE_COLOR = '#7A3FE0'; // 鲜亮紫
|
||||
const LINE_ON_BAR = '#DCC9FF'; // 压在翡翠柱面上时用的浅紫（对比度约 6:1）
|
||||
|
||||
const Y_MAX = 160; // 左轴上限
|
||||
const YOY_MIN = -50; // 右轴下限
|
||||
const YOY_MAX = 150; // 右轴上限
|
||||
|
||||
export function ppmtIpExMonstersChart(rows, { width, height }) {
|
||||
const periods = col(rows, 'period');
|
||||
const revenue = col(rows, 'revenue');
|
||||
// 前两期无同比基数，CSV 里留空；parseCSV 会给出 ''，统一转成 null
|
||||
const yoy = col(rows, 'yoy').map((v) => (v === '' ? null : v));
|
||||
|
||||
// 逐点判断同比标签会不会压在柱面上。`label.position` 不接受函数（见 CLAUDE.md），
|
||||
// 所以只能把 data 写成对象、逐点覆盖 color。
|
||||
const plotH = height - LAYOUT.gridTop - 90; // 与下面 grid 的 top/bottom 一致
|
||||
const labelGap = (8 + 13) / plotH; // labelStyle 的 distance + 字高，换成占比
|
||||
const yoyData = yoy.map((v, i) => {
|
||||
if (v === null) return null;
|
||||
const barFrac = revenue[i] / Y_MAX;
|
||||
const lineFrac = (v - YOY_MIN) / (YOY_MAX - YOY_MIN);
|
||||
// 标签整体（底边到顶边）都落在柱子高度以内 → 压在柱面上
|
||||
const onBar = lineFrac + labelGap < barFrac;
|
||||
return onBar ? { value: v, label: { color: LINE_ON_BAR } } : v;
|
||||
});
|
||||
|
||||
return {
|
||||
backgroundColor: '#fff',
|
||||
title: {
|
||||
...titleStyle,
|
||||
text: '泡泡玛特除 THE MONSTERS 外的IP收入及同比（21H1-26H1）',
|
||||
subtext: 'IP收入合计 − THE MONSTERS，单位：亿元；H2 为下半年单期，非全年累计',
|
||||
},
|
||||
legend: standardLegend(['除MONSTERS外收入', '同比增速'], { itemGap: 32 }),
|
||||
grid: { left: 78, right: 128, top: LAYOUT.gridTop, bottom: 90 },
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { type: 'cross' },
|
||||
textStyle: { fontFamily: FONT },
|
||||
formatter: (ps) => {
|
||||
let out = `<b>${ps[0].axisValue}</b><br/>`;
|
||||
ps.forEach((p) => {
|
||||
if (p.seriesName === '除MONSTERS外收入') {
|
||||
out += `${p.marker}${p.seriesName}: ${p.value.toFixed(1)} 亿元<br/>`;
|
||||
} else if (p.value !== null && p.value !== '') {
|
||||
out += `${p.marker}${p.seriesName}: ${p.value > 0 ? '+' : ''}${p.value.toFixed(1)}%<br/>`;
|
||||
}
|
||||
});
|
||||
return out;
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
...categoryAxis,
|
||||
data: periods,
|
||||
// 只去世纪前缀：这张表的 H2 是单半年，不能简写成「全年」
|
||||
axisLabel: { ...categoryAxis.axisLabel, formatter: (v) => v.replace(/^20/, '') },
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
...axisCommon,
|
||||
type: 'value',
|
||||
name: '收入（亿元）',
|
||||
nameLocation: 'middle',
|
||||
nameGap: 50,
|
||||
nameTextStyle: { color: PALETTE.grey, fontSize: 13, fontFamily: FONT },
|
||||
min: 0,
|
||||
// 定死 160：留出顶部余量，最高柱（139.0）不会顶到绘图区上沿
|
||||
max: Y_MAX,
|
||||
interval: 20,
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
name: '同比增速（%）',
|
||||
nameLocation: 'middle',
|
||||
nameGap: 60,
|
||||
nameTextStyle: { color: PALETTE.grey, fontSize: 13, fontFamily: FONT },
|
||||
min: YOY_MIN,
|
||||
max: YOY_MAX,
|
||||
interval: 50,
|
||||
axisLine: { show: false },
|
||||
axisTick: { show: false },
|
||||
splitLine: { show: false },
|
||||
axisLabel: { color: PALETTE.grey, fontSize: 12, fontFamily: FONT, formatter: '{value}%' },
|
||||
},
|
||||
],
|
||||
series: [
|
||||
barSeries({
|
||||
name: '除MONSTERS外收入',
|
||||
data: revenue,
|
||||
color: BAR_COLOR,
|
||||
barWidth: 34,
|
||||
yAxisIndex: 0,
|
||||
// 数值放柱内白字：腾开柱顶上方，避免和同比线的标签抢位置
|
||||
label: {
|
||||
show: true,
|
||||
position: 'insideTop',
|
||||
color: '#fff',
|
||||
fontFamily: FONT,
|
||||
fontSize: 11,
|
||||
fontWeight: 500,
|
||||
formatter: (p) => p.value.toFixed(1),
|
||||
overflow: 'none', // 矮柱也要显示，见 CLAUDE.md
|
||||
},
|
||||
}),
|
||||
{
|
||||
// lineSeries() 没有 ...rest，yAxisIndex 只能展开后再补
|
||||
...lineSeries({ name: '同比增速', data: yoyData, color: LINE_COLOR }),
|
||||
yAxisIndex: 1,
|
||||
label: {
|
||||
...labelStyle(LINE_COLOR, 'top'),
|
||||
formatter: (p) => (p.value === null || p.value === '' ? ''
|
||||
: `${p.value > 0 ? '+' : ''}${p.value.toFixed(1)}%`),
|
||||
},
|
||||
},
|
||||
],
|
||||
graphic: [
|
||||
...watermarks(width, height),
|
||||
footnote('除 THE MONSTERS 外其余 IP 合计；同比对去年同半年 | @思考的Joey'),
|
||||
],
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,126 @@
|
||||
import {
|
||||
PALETTE, FONT, titleStyle, footnote, watermarks,
|
||||
} from '../theme.js';
|
||||
|
||||
/**
|
||||
* 泡泡玛特主要 IP 收入占比（2026H1）
|
||||
* 饼图（非环图），图例放在右侧：每项上行 IP 名、下行小字显示收入和占比。
|
||||
* 扇区外直接标注 IP 名 + 数值（两行）。源：ppmt.xlsx「IP收入和占比」2026H1 列，
|
||||
* HACIPUPU、BUNNY、PUCKY 等该期无数据的 IP 不列入。
|
||||
* 占比为衍生指标：各 IP 收入 ÷ 全部列入 IP 收入合计（源表占比列未填）。
|
||||
*
|
||||
* 配色：手写的一条色相渐变谱（红→橙→金→橄榄→翡翠→青→蓝→紫），
|
||||
* 末位「外采及其他」用中性灰（残差项惯例）。冷色段靠明暗交替拉开
|
||||
* （深蓝 → 浅蓝紫 → 紫 → 浅兰紫），避免同色系挤在一起分不清。
|
||||
* 相邻扇区及全组两两 ΔE ≥ 24.6，与同页 ppmt_margins 四色及 wine ΔE ≥ 25。
|
||||
*/
|
||||
const COLORS = [
|
||||
'#D64545', // THE MONSTERS 玫红
|
||||
'#E8913C', // 星星人 琥珀橙
|
||||
'#D9C043', // 授权IP（非独家） 金
|
||||
'#7FA83C', // CRYBABY 橄榄绿
|
||||
'#3E9E6E', // DIMOO 翡翠
|
||||
'#3FB6D0', // SKULLPANDA 亮青
|
||||
'#2E5FA8', // 其他艺术家IP 深蓝
|
||||
'#8E86E0', // HIRONO-小野 浅蓝紫
|
||||
'#8A3FA8', // MOLLY 紫
|
||||
'#D081C4', // Zsiga 浅兰紫
|
||||
'#8C8C8C', // 外采及其他 中性灰
|
||||
];
|
||||
|
||||
export function ppmtIpShareChart(rows, { width, height }) {
|
||||
const data = rows.map((row, i) => ({
|
||||
name: row.ip,
|
||||
value: row.revenue,
|
||||
itemStyle: { color: COLORS[i % COLORS.length] },
|
||||
}));
|
||||
const total = data.reduce((s, d) => s + d.value, 0);
|
||||
const byName = Object.fromEntries(data.map((d) => [d.name, d]));
|
||||
|
||||
// 把「饼图 + 两侧外标签」当成一个整体，与图例并成一组居中摆放：
|
||||
// 图例紧跟在右侧标签外缘之后，不会被推到画布边缘留下大片空白
|
||||
const LEGEND_WIDTH = 152; // 最宽一行「17.7 亿元 · 10.3%」约 120px + 色块
|
||||
const LEGEND_GAP = 24; // 右侧标签外缘 → 图例
|
||||
// 左右标签占位不对称：左侧文字向左延伸（text-anchor: end）要占满，
|
||||
// 右侧只需容下引导线 + 首行文字起段，留太多会在图例前空出一大块
|
||||
const LABEL_LEFT = 135;
|
||||
const LABEL_RIGHT = 72;
|
||||
const topPad = 78;
|
||||
const bottomPad = 64;
|
||||
const availH = height - topPad - bottomPad;
|
||||
|
||||
// 半径取高/宽两个方向的较小值；上下各留 35px 给最上、最下扇区的两行标签
|
||||
// 末尾 ×0.85：实测 250 偏大，缩 15% 留出呼吸感
|
||||
const rByHeight = availH / 2 - 35;
|
||||
const rByWidth = (width - 48 - LEGEND_GAP - LEGEND_WIDTH - LABEL_LEFT - LABEL_RIGHT) / 2;
|
||||
const radius = Math.max(80, Math.min(rByHeight, rByWidth, 250) * 0.85);
|
||||
|
||||
const blockW = radius * 2 + LABEL_LEFT + LABEL_RIGHT;
|
||||
const leftMargin = Math.max(16, (width - blockW - LEGEND_GAP - LEGEND_WIDTH) / 2);
|
||||
const centerX = leftMargin + LABEL_LEFT + radius;
|
||||
const centerY = topPad + availH / 2;
|
||||
const legendLeft = leftMargin + blockW + LEGEND_GAP;
|
||||
|
||||
return {
|
||||
backgroundColor: '#fff',
|
||||
title: {
|
||||
...titleStyle,
|
||||
text: '泡泡玛特主要IP收入占比（2026H1）',
|
||||
subtext: `占比 = 各IP收入 ÷ 全部IP收入合计（合计 ${total.toFixed(1)} 亿元），单位：亿元`,
|
||||
},
|
||||
// 图例在右侧承载 IP 名 + 收入/占比明细
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: legendLeft,
|
||||
width: LEGEND_WIDTH,
|
||||
top: 'middle',
|
||||
itemGap: 14,
|
||||
itemWidth: 14,
|
||||
itemHeight: 14,
|
||||
align: 'left',
|
||||
data: data.map((d) => d.name),
|
||||
formatter: (name) => {
|
||||
const d = byName[name];
|
||||
const pct = (d.value / total) * 100;
|
||||
return `{name|${name}}\n{sub|${d.value.toFixed(1)} 亿元 · ${pct.toFixed(1)}%}`;
|
||||
},
|
||||
textStyle: {
|
||||
rich: {
|
||||
name: { fontFamily: FONT, fontSize: 13, fontWeight: 600, color: PALETTE.ink, lineHeight: 18 },
|
||||
sub: { fontFamily: FONT, fontSize: 11, color: PALETTE.grey, lineHeight: 16 },
|
||||
},
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
textStyle: { fontFamily: FONT },
|
||||
formatter: (p) => `${p.marker}${p.name}：${p.value.toFixed(1)} 亿元（${p.percent.toFixed(1)}%）`,
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'IP收入占比',
|
||||
type: 'pie',
|
||||
radius,
|
||||
center: [centerX, centerY],
|
||||
data,
|
||||
label: {
|
||||
show: true,
|
||||
formatter: (p) => `{name|${p.name}}\n{value|${p.value.toFixed(1)} 亿元}`,
|
||||
rich: {
|
||||
name: { fontFamily: FONT, fontSize: 12, color: PALETTE.ink, fontWeight: 600, lineHeight: 16 },
|
||||
value: { fontFamily: FONT, fontSize: 11, color: PALETTE.grey, lineHeight: 15 },
|
||||
},
|
||||
},
|
||||
labelLine: { length: 14, length2: 16, lineStyle: { color: PALETTE.axisLine } },
|
||||
itemStyle: { borderColor: '#fff', borderWidth: 2 },
|
||||
emphasis: {
|
||||
itemStyle: { shadowBlur: 12, shadowColor: 'rgba(0,0,0,0.2)' },
|
||||
},
|
||||
},
|
||||
],
|
||||
graphic: [
|
||||
...watermarks(width, height),
|
||||
footnote('HACIPUPU、BUNNY、PUCKY 等 IP 2026H1 无收入数据，未列入 | @思考的Joey'),
|
||||
],
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,125 @@
|
||||
import {
|
||||
PALETTE, FONT, axisCommon, categoryAxis, titleStyle,
|
||||
barSeries, footnote, watermarks, LAYOUT,
|
||||
} from '../theme.js';
|
||||
|
||||
/**
|
||||
* 泡泡玛特各 IP 半年收入占比（2021H1-2026H1）
|
||||
* 归一化堆叠柱状图：每根柱固定 100%，看的是收入结构的变化而非规模。
|
||||
* 源：ppmt.xlsx「IP收入和占比」的收入区；该表占比区未填，占比由收入算出。
|
||||
*
|
||||
* ⚠ 这张表的 H2 是【单半年】，不是全年累计——已核对 2025H2 的 232.44
|
||||
* = 利润表 371.2 − 138.76。所以轴标签只去世纪前缀（25H2），
|
||||
* 不能用 theme 的 `periodAxis`（它会渲染成「25全年」，对这张图是错的）。
|
||||
*
|
||||
* CSV 存两位小数：归一化占比对小值敏感，一位小数会让早期小 IP 失真
|
||||
* （如 CRYBABY 2023H1 的 0.27 记成 0.3，相对误差 13%）。
|
||||
*
|
||||
* 18 行源数据里 8 个已停单列或体量极小的 IP 合并成「其他IP（含已停单列）」，
|
||||
* 合并后仍是 11 个系列、逐期加总恰好 100%。
|
||||
*
|
||||
* 配色按 IP 名与同页饼图 ppmt_ip_share.js 一一对应，便于两图互相对照；
|
||||
* 合并桶沿用 Zsiga 原色（Zsiga 已并入其中）。
|
||||
*/
|
||||
const COLORS = {
|
||||
'THE MONSTERS': '#D64545',
|
||||
'星星人': '#E8913C',
|
||||
'授权IP（非独家）': '#D9C043',
|
||||
'CRYBABY': '#7FA83C',
|
||||
'DIMOO': '#3E9E6E',
|
||||
'SKULLPANDA': '#3FB6D0',
|
||||
'其他艺术家IP': '#2E5FA8',
|
||||
'HIRONO-小野': '#8E86E0',
|
||||
'MOLLY': '#8A3FA8',
|
||||
'其他IP（含已停单列）': '#D081C4',
|
||||
'外采及其他': '#8C8C8C',
|
||||
};
|
||||
|
||||
const LEGEND_WIDTH = 160;
|
||||
const LEGEND_RIGHT = 20;
|
||||
|
||||
export function ppmtIpShareHistoryChart(rows, { width, height }) {
|
||||
const periods = Object.keys(rows[0]).filter((k) => k !== 'ip');
|
||||
const names = rows.map((r) => r.ip);
|
||||
const totals = periods.map((p) => rows.reduce((s, r) => s + r[p], 0));
|
||||
// 归一化：各 IP 占当期合计的比重，逐期加总恰为 100%
|
||||
const toPct = (r) => periods.map((p, i) => (r[p] / totals[i]) * 100);
|
||||
|
||||
return {
|
||||
backgroundColor: '#fff',
|
||||
title: {
|
||||
...titleStyle,
|
||||
text: '泡泡玛特各IP半年收入占比（21H1-26H1）',
|
||||
subtext: '占当期IP收入合计的比重；H2 为下半年单期，非全年累计',
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
right: LEGEND_RIGHT,
|
||||
width: LEGEND_WIDTH,
|
||||
top: 'middle',
|
||||
itemGap: 12,
|
||||
itemWidth: 14,
|
||||
itemHeight: 14,
|
||||
data: names,
|
||||
textStyle: { color: PALETTE.ink, fontSize: 12, fontFamily: FONT },
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { type: 'shadow' },
|
||||
textStyle: { fontFamily: FONT },
|
||||
formatter: (ps) => {
|
||||
const i = periods.indexOf(ps[0].axisValue);
|
||||
const head = `<b>${ps[0].axisValue}</b> 合计 ${totals[i].toFixed(1)} 亿元<br/>`;
|
||||
return head + ps
|
||||
.slice()
|
||||
.reverse()
|
||||
.filter((p) => p.value > 0)
|
||||
.map((p) => `${p.marker}${p.seriesName}: ${p.value.toFixed(1)}%`
|
||||
+ `（${((p.value / 100) * totals[i]).toFixed(1)} 亿元）`)
|
||||
.join('<br/>');
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: 78,
|
||||
right: LEGEND_RIGHT + LEGEND_WIDTH + 20,
|
||||
top: LAYOUT.gridTop,
|
||||
bottom: 70,
|
||||
},
|
||||
xAxis: {
|
||||
...categoryAxis,
|
||||
data: periods,
|
||||
// 只去世纪前缀：这张表的 H2 是单半年，不能简写成「全年」
|
||||
axisLabel: { ...categoryAxis.axisLabel, formatter: (v) => v.replace(/^20/, '') },
|
||||
},
|
||||
yAxis: {
|
||||
...axisCommon,
|
||||
type: 'value',
|
||||
min: 0,
|
||||
max: 100,
|
||||
interval: 20,
|
||||
axisLabel: { ...axisCommon.axisLabel, formatter: '{value}%' },
|
||||
},
|
||||
series: rows.map((r) => barSeries({
|
||||
name: r.ip,
|
||||
data: toPct(r),
|
||||
color: COLORS[r.ip] ?? PALETTE.grey,
|
||||
barWidth: 40,
|
||||
stack: 'share',
|
||||
label: {
|
||||
show: true,
|
||||
position: 'inside',
|
||||
color: '#fff',
|
||||
fontSize: 11,
|
||||
fontFamily: FONT,
|
||||
fontWeight: 500,
|
||||
// 低于 4% 的段塞不进字，留空靠 tooltip 读数
|
||||
formatter: (p) => (p.value >= 4 ? p.value.toFixed(1) : ''),
|
||||
},
|
||||
emphasis: { focus: 'series' },
|
||||
})),
|
||||
graphic: [
|
||||
...watermarks(width, height),
|
||||
footnote('其他IP（含已停单列）= Zsiga、HACIPUPU、BUNNY、PUCKY、小甜豆等 | @思考的Joey'),
|
||||
],
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,127 @@
|
||||
import { col } from '../csv.js';
|
||||
import {
|
||||
PALETTE, FONT, axisCommon, periodAxis, titleStyle, legendStyle,
|
||||
lineSeries, footnote, watermarks, LAYOUT,
|
||||
} from '../theme.js';
|
||||
|
||||
/**
|
||||
* 泡泡玛特利润率与费用率拆解（2020H1-2026H1）
|
||||
* 毛利率独占上方区间，销售/管理费用率与非GAAP净利率在 5~35% 交织。
|
||||
* H2 列为全年累计口径，H1 为半年口径（与利润表一致）。
|
||||
*
|
||||
* 配色刻意避开 demo margin.js 的 green/orange/purple/coral 和
|
||||
* 同页 growth 的 plum/amber/steel/moss，用 Lab ΔE>25 保证明显不同。
|
||||
*/
|
||||
const SERIES = [
|
||||
{ key: 'gross_margin', name: '毛利率', color: '#00696E', width: 3.08 }, // deep teal, 2.8 × 1.1
|
||||
{ key: 'sales_expense_rate', name: '销售费用率', color: '#A8862B', width: 2.2 }, // mustard, 2.0 × 1.1
|
||||
{ key: 'admin_expense_rate', name: '管理费用率', color: '#4A2D5C', width: 2.2 }, // aubergine, 2.0 × 1.1
|
||||
{ key: 'non_gaap_net_margin', name: '非国际归母净利率', color: '#BE3E70', width: 2.86 }, // magenta rose, 2.6 × 1.1
|
||||
];
|
||||
|
||||
/**
|
||||
* 逐点决定标签朝向：放到"离最近邻居更远"的那一侧。
|
||||
*
|
||||
* 早先按排名奇偶交替（rank%2）会让排名相邻的两条线相向靠拢 ——
|
||||
* 2024H1（销售29.69 / 净利22.33）和 2026H1（净利30.02 / 销售22.89）
|
||||
* 两处标签间距只剩 10~11px < 字高 14px，于是被 hideOverlap 丢弃，
|
||||
* 表现就是"2026H1 的非国际归母净利率看不到"。
|
||||
*
|
||||
* 现在比较上下间隙取大者：最高值必朝上、最低值必朝下，
|
||||
* 中间值背对最挤的一侧。13 期实测 0 碰撞，无需再丢标签。
|
||||
*
|
||||
* 注：label.position 不接受函数，只能按数据点逐个覆盖。
|
||||
*/
|
||||
function labeledData(rows, key) {
|
||||
return rows.map((row) => {
|
||||
const value = row[key];
|
||||
if (value === '' || value == null) return null;
|
||||
|
||||
// 该期所有系列值，降序
|
||||
const ranked = SERIES
|
||||
.map((s) => row[s.key])
|
||||
.filter((v) => v !== '' && v != null)
|
||||
.sort((a, b) => b - a);
|
||||
const rank = ranked.indexOf(value);
|
||||
|
||||
const gapUp = rank > 0 ? ranked[rank - 1] - value : Infinity;
|
||||
const gapDown = rank < ranked.length - 1 ? value - ranked[rank + 1] : Infinity;
|
||||
|
||||
return {
|
||||
value,
|
||||
label: { position: gapUp >= gapDown ? 'top' : 'bottom', distance: 10 },
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
export function ppmtMarginsChart(rows, { width, height }) {
|
||||
const pct = (p) => `${p.value}%`;
|
||||
|
||||
return {
|
||||
backgroundColor: '#fff',
|
||||
title: {
|
||||
...titleStyle,
|
||||
text: '泡泡玛特利润率与费用率拆解（2020H1-2026H1）',
|
||||
subtext: '毛利率抬升叠加费用率下降，共同推动净利率走高（H1为半年，H2为全年累计）',
|
||||
},
|
||||
legend: {
|
||||
// 不继承 legendStyle：它带 icon:'roundRect'，会盖掉 ECharts 按系列
|
||||
// 自动生成的「短线+空心圆」图例
|
||||
top: LAYOUT.legendTop,
|
||||
itemGap: 28,
|
||||
textStyle: {
|
||||
color: PALETTE.ink,
|
||||
fontSize: 14,
|
||||
fontFamily: FONT,
|
||||
},
|
||||
data: SERIES.map((s) => s.name),
|
||||
},
|
||||
grid: { left: 78, right: 56, top: LAYOUT.gridTop, bottom: 80 },
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
valueFormatter: (v) => `${v}%`,
|
||||
textStyle: { fontFamily: FONT },
|
||||
},
|
||||
xAxis: { ...periodAxis, data: col(rows, 'period') },
|
||||
yAxis: {
|
||||
...axisCommon,
|
||||
type: 'value',
|
||||
name: '比率（%）',
|
||||
nameLocation: 'middle',
|
||||
nameGap: 50,
|
||||
nameTextStyle: { color: PALETTE.grey, fontSize: 13, fontFamily: FONT },
|
||||
min: 0,
|
||||
max: 80,
|
||||
interval: 20,
|
||||
axisLabel: { ...axisCommon.axisLabel, formatter: '{value}%' },
|
||||
},
|
||||
series: SERIES.map((s) => ({
|
||||
...lineSeries({
|
||||
name: s.name,
|
||||
data: labeledData(rows, s.key),
|
||||
color: s.color,
|
||||
formatter: pct,
|
||||
width: s.width,
|
||||
}),
|
||||
label: {
|
||||
show: true,
|
||||
color: s.color,
|
||||
fontSize: 12,
|
||||
fontWeight: 500,
|
||||
fontFamily: FONT,
|
||||
formatter: pct,
|
||||
// 白描边保证交叉处压线的标签仍可读
|
||||
textBorderColor: '#fff',
|
||||
textBorderWidth: 3,
|
||||
},
|
||||
labelLayout: { hideOverlap: true },
|
||||
})),
|
||||
graphic: [
|
||||
...watermarks(width, height),
|
||||
footnote(
|
||||
'毛利率/费用率取自利润表；非国际归母净利率=非GAAP净利÷营业收入，' +
|
||||
'2020H1/H2非GAAP缺失用归母净利替代 | @思考的Joey'
|
||||
),
|
||||
],
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,133 @@
|
||||
import { col } from '../csv.js';
|
||||
import {
|
||||
PALETTE, FONT, axisCommon, periodAxis, titleStyle, legendStyle,
|
||||
lineSeries, footnote, watermarks, LAYOUT,
|
||||
} from '../theme.js';
|
||||
|
||||
/**
|
||||
* 泡泡玛特盈利能力分析图
|
||||
* 柱状图展示收入和利润，折线图展示毛利率
|
||||
*/
|
||||
export function profitChart(rows, { width, height }) {
|
||||
const periods = col(rows, 'period').reverse(); // 按时间正序
|
||||
const revenue = col(rows, 'revenue').reverse();
|
||||
const grossProfit = col(rows, 'gross_profit').reverse();
|
||||
const netProfit = col(rows, 'net_profit').reverse();
|
||||
const grossMargin = col(rows, 'gross_margin').reverse();
|
||||
|
||||
return {
|
||||
backgroundColor: '#fff',
|
||||
title: {
|
||||
...titleStyle,
|
||||
text: '泡泡玛特盈利能力分析（2022H2-2026H1）',
|
||||
subtext: '营收、毛利、净利润及毛利率变化',
|
||||
},
|
||||
legend: {
|
||||
...legendStyle,
|
||||
top: LAYOUT.legendTop,
|
||||
data: [
|
||||
{ name: '营业收入', icon: 'rect' },
|
||||
{ name: '毛利润', icon: 'rect' },
|
||||
{ name: '归母净利润', icon: 'rect' },
|
||||
{ name: '毛利率', icon: 'emptyCircle' },
|
||||
],
|
||||
},
|
||||
grid: { left: 78, right: 82, top: LAYOUT.gridTop, bottom: 90 },
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { type: 'shadow' },
|
||||
textStyle: { fontFamily: FONT },
|
||||
},
|
||||
xAxis: { ...periodAxis, data: periods },
|
||||
yAxis: [
|
||||
{
|
||||
...axisCommon,
|
||||
type: 'value',
|
||||
name: '金额（亿元）',
|
||||
nameLocation: 'middle',
|
||||
nameGap: 52,
|
||||
nameTextStyle: { color: PALETTE.grey, fontSize: 13, fontFamily: FONT },
|
||||
min: 0,
|
||||
max: 400,
|
||||
interval: 100,
|
||||
},
|
||||
{
|
||||
...axisCommon,
|
||||
type: 'value',
|
||||
name: '毛利率（%）',
|
||||
nameLocation: 'middle',
|
||||
nameGap: 58,
|
||||
nameRotate: -90,
|
||||
nameTextStyle: { color: PALETTE.grey, fontSize: 13, fontFamily: FONT },
|
||||
min: 55,
|
||||
max: 75,
|
||||
interval: 5,
|
||||
axisLabel: {
|
||||
...axisCommon.axisLabel,
|
||||
formatter: '{value}%',
|
||||
},
|
||||
splitLine: { show: false },
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '营业收入',
|
||||
type: 'bar',
|
||||
data: revenue,
|
||||
barWidth: 18,
|
||||
itemStyle: { color: PALETTE.navy },
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
color: PALETTE.ink,
|
||||
fontSize: 11,
|
||||
fontFamily: FONT,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '毛利润',
|
||||
type: 'bar',
|
||||
data: grossProfit,
|
||||
barWidth: 18,
|
||||
itemStyle: { color: PALETTE.sage },
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
color: PALETTE.ink,
|
||||
fontSize: 11,
|
||||
fontFamily: FONT,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '归母净利润',
|
||||
type: 'bar',
|
||||
data: netProfit,
|
||||
barWidth: 18,
|
||||
itemStyle: { color: PALETTE.orange },
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
color: PALETTE.ink,
|
||||
fontSize: 11,
|
||||
fontFamily: FONT,
|
||||
},
|
||||
},
|
||||
{
|
||||
...lineSeries({
|
||||
name: '毛利率',
|
||||
data: grossMargin,
|
||||
color: PALETTE.red,
|
||||
labelPosition: 'top',
|
||||
formatter: (p) => `${p.value.toFixed(1)}%`,
|
||||
width: 3,
|
||||
}),
|
||||
yAxisIndex: 1,
|
||||
z: 10,
|
||||
},
|
||||
],
|
||||
graphic: [
|
||||
...watermarks(width, height),
|
||||
footnote('数据来源：泡泡玛特财报（累计数据）| @思考的Joey'),
|
||||
],
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,125 @@
|
||||
import {
|
||||
PALETTE, FONT, titleStyle, footnote, watermarks,
|
||||
LAYOUT, } from '../theme.js';
|
||||
|
||||
/**
|
||||
* 泡泡玛特区域渠道分布图（2026H1）
|
||||
* 使用交错正负轴展示不同区域和渠道的收入
|
||||
*/
|
||||
export function regionChannelChart(rows, { width, height }) {
|
||||
// 数据结构重组：按区域分组
|
||||
const regions = ['中国', '海外', '亚太', '美洲', '欧洲及其他'];
|
||||
const channels = ['线下渠道', '线上渠道', '批发及其他'];
|
||||
|
||||
// 构建数据映射
|
||||
const dataMap = {};
|
||||
rows.forEach(row => {
|
||||
const key = `${row.region}_${row.channel}`;
|
||||
dataMap[key] = row.value;
|
||||
});
|
||||
|
||||
// 为每个渠道构建系列数据
|
||||
const seriesData = channels.map(channel => {
|
||||
return regions.map(region => {
|
||||
const key = `${region}_${channel}`;
|
||||
const value = dataMap[key] || 0;
|
||||
// 线上渠道显示为负值（左侧），其他为正值（右侧）
|
||||
return channel === '线上渠道' ? -value : value;
|
||||
});
|
||||
});
|
||||
|
||||
// 配色
|
||||
const channelColors = {
|
||||
'线下渠道': PALETTE.navy,
|
||||
'线上渠道': PALETTE.coral,
|
||||
'批发及其他': PALETTE.sage,
|
||||
};
|
||||
|
||||
return {
|
||||
backgroundColor: '#fff',
|
||||
title: {
|
||||
...titleStyle,
|
||||
text: '泡泡玛特区域渠道分布（2026H1）',
|
||||
subtext: '左侧：线上渠道 | 右侧：线下渠道、批发及其他，单位：亿元',
|
||||
top: 18,
|
||||
},
|
||||
legend: {
|
||||
data: channels.map(name => ({ name, icon: 'rect' })), // 全部堆叠柱状图
|
||||
top: LAYOUT.legendTop,
|
||||
itemGap: 32,
|
||||
textStyle: { fontFamily: FONT, fontSize: 13 },
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { type: 'shadow' },
|
||||
textStyle: { fontFamily: FONT },
|
||||
formatter: (params) => {
|
||||
let result = `<b>${params[0].axisValue}</b><br/>`;
|
||||
params.forEach(p => {
|
||||
const value = Math.abs(p.value);
|
||||
result += `${p.marker}${p.seriesName}: ${value.toFixed(2)} 亿元<br/>`;
|
||||
});
|
||||
return result;
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: 100,
|
||||
right: 100,
|
||||
top: 145,
|
||||
bottom: 90,
|
||||
containLabel: false,
|
||||
},
|
||||
xAxis: {
|
||||
type: 'value',
|
||||
position: 'top',
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: { color: '#e8e8e8', width: 1 }
|
||||
},
|
||||
axisLine: { show: false },
|
||||
axisTick: { show: false },
|
||||
axisLabel: {
|
||||
formatter: (value) => Math.abs(value),
|
||||
fontFamily: FONT,
|
||||
fontSize: 12,
|
||||
color: '#8c8c8c',
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
data: regions,
|
||||
axisLine: { show: false },
|
||||
axisTick: { show: false },
|
||||
axisLabel: {
|
||||
fontFamily: FONT,
|
||||
fontSize: 13,
|
||||
color: '#333',
|
||||
fontWeight: '500',
|
||||
},
|
||||
inverse: false,
|
||||
},
|
||||
series: channels.map((channel, idx) => ({
|
||||
name: channel,
|
||||
type: 'bar',
|
||||
stack: channel === '线上渠道' ? 'left' : 'right',
|
||||
data: seriesData[idx],
|
||||
itemStyle: { color: channelColors[channel] },
|
||||
label: {
|
||||
show: true,
|
||||
position: channel === '线上渠道' ? 'left' : 'right',
|
||||
formatter: (params) => {
|
||||
const value = Math.abs(params.value);
|
||||
return value > 0 ? value.toFixed(1) : '';
|
||||
},
|
||||
fontFamily: FONT,
|
||||
fontSize: 11,
|
||||
color: '#333',
|
||||
},
|
||||
barWidth: 22,
|
||||
})),
|
||||
graphic: [
|
||||
...watermarks(width, height),
|
||||
footnote('数据来源：泡泡玛特财报 | @思考的Joey'),
|
||||
],
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,125 @@
|
||||
import {
|
||||
PALETTE, FONT, titleStyle, footnote, watermarks,
|
||||
LAYOUT, } from '../theme.js';
|
||||
|
||||
/**
|
||||
* 泡泡玛特区域渠道同比增速图（2026H1 vs 2025H1）
|
||||
* 垂直条形图，每个渠道使用统一颜色
|
||||
*/
|
||||
export function regionChannelYoyChart(rows, { width, height }) {
|
||||
// 按区域和渠道重组数据
|
||||
const regions = ['中国', '海外', '亚太', '美洲', '欧洲及其他'];
|
||||
const channels = ['线下渠道', '线上渠道', '批发及其他'];
|
||||
|
||||
// 构建数据映射
|
||||
const dataMap = {};
|
||||
rows.forEach(row => {
|
||||
const key = `${row.region}_${row.channel}`;
|
||||
dataMap[key] = row.yoy;
|
||||
});
|
||||
|
||||
// 为每个渠道构建数据系列
|
||||
const seriesData = channels.map(channel => {
|
||||
return regions.map(region => {
|
||||
const key = `${region}_${channel}`;
|
||||
return dataMap[key] || 0;
|
||||
});
|
||||
});
|
||||
|
||||
// 为每个渠道定义统一的颜色
|
||||
const channelColors = {
|
||||
'线下渠道': PALETTE.navy,
|
||||
'线上渠道': PALETTE.coral,
|
||||
'批发及其他': PALETTE.sage,
|
||||
};
|
||||
|
||||
return {
|
||||
backgroundColor: '#fff',
|
||||
title: {
|
||||
...titleStyle,
|
||||
text: '泡泡玛特区域渠道同比增速（2026H1 vs 2025H1）',
|
||||
subtext: '各区域渠道同比增速对比',
|
||||
top: 18,
|
||||
},
|
||||
legend: {
|
||||
data: channels.map(name => ({ name, icon: 'rect' })), // 全部柱状图
|
||||
top: LAYOUT.legendTop,
|
||||
itemGap: 32,
|
||||
textStyle: { fontFamily: FONT, fontSize: 13 },
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { type: 'shadow' },
|
||||
textStyle: { fontFamily: FONT },
|
||||
formatter: (params) => {
|
||||
let result = `<b>${params[0].axisValue}</b><br/>`;
|
||||
params.forEach(p => {
|
||||
const value = p.value;
|
||||
const sign = value >= 0 ? '+' : '';
|
||||
result += `${p.marker}${p.seriesName}: ${sign}${value.toFixed(1)}%<br/>`;
|
||||
});
|
||||
return result;
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: 80,
|
||||
right: 60,
|
||||
top: 145,
|
||||
bottom: 90,
|
||||
containLabel: false,
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: regions,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: { color: '#333', width: 2 }
|
||||
},
|
||||
axisTick: { show: false },
|
||||
axisLabel: {
|
||||
fontFamily: FONT,
|
||||
fontSize: 12,
|
||||
color: '#333',
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLine: { show: false },
|
||||
axisTick: { show: false },
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: { color: '#e8e8e8', width: 1 }
|
||||
},
|
||||
axisLabel: {
|
||||
formatter: '{value}%',
|
||||
fontFamily: FONT,
|
||||
fontSize: 12,
|
||||
color: '#8c8c8c',
|
||||
},
|
||||
},
|
||||
series: channels.map((channel, idx) => ({
|
||||
name: channel,
|
||||
type: 'bar',
|
||||
data: seriesData[idx],
|
||||
itemStyle: { color: channelColors[channel] },
|
||||
barWidth: 47,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'inside',
|
||||
formatter: (params) => {
|
||||
const value = params.value;
|
||||
const sign = value >= 0 ? '+' : '';
|
||||
return `${sign}${value.toFixed(1)}%`;
|
||||
},
|
||||
fontFamily: FONT,
|
||||
fontSize: 12,
|
||||
color: '#fff',
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
})),
|
||||
graphic: [
|
||||
...watermarks(width, height),
|
||||
footnote('数据来源：泡泡玛特财报（2026H1 vs 2025H1同比）| @思考的Joey'),
|
||||
],
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,139 @@
|
||||
import {
|
||||
PALETTE, FONT, titleStyle, footnote, watermarks,
|
||||
} from '../theme.js';
|
||||
|
||||
/**
|
||||
* 泡泡玛特利润流向桑基图（2026H1）
|
||||
* 从营业收入到非GAAP归母净利润的完整流程
|
||||
*/
|
||||
export function sankeyChart(rows, { width, height }) {
|
||||
// 从 CSV 构建桑基图的 links 数据
|
||||
const links = rows.map(row => ({
|
||||
source: row.source,
|
||||
target: row.target,
|
||||
value: row.value,
|
||||
}));
|
||||
|
||||
// 定义节点颜色
|
||||
const nodeColors = {
|
||||
'营业收入': PALETTE.navy,
|
||||
'营业成本': PALETTE.grey,
|
||||
'毛利': PALETTE.sage,
|
||||
'销售费用': PALETTE.orange,
|
||||
'管理费用': PALETTE.purple,
|
||||
'财务费用': PALETTE.brown,
|
||||
'营业利润': PALETTE.green,
|
||||
'投资收益': PALETTE.blue,
|
||||
'公允价值变动': PALETTE.blue,
|
||||
'其他收入': PALETTE.blue,
|
||||
'利润总额': PALETTE.sage,
|
||||
'所得税费用': PALETTE.grey,
|
||||
'净利润': PALETTE.green,
|
||||
'少数股东损益': PALETTE.grey,
|
||||
'归母净利润': PALETTE.coral,
|
||||
'非GAAP调整项': PALETTE.blue,
|
||||
'非GAAP归母净利润': PALETTE.red,
|
||||
};
|
||||
|
||||
return {
|
||||
backgroundColor: '#fff',
|
||||
title: {
|
||||
...titleStyle,
|
||||
text: '泡泡玛特利润流向分析（2026H1）',
|
||||
subtext: '从营业收入到非GAAP归母净利润的完整流程，单位：亿元',
|
||||
top: 18,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
triggerOn: 'mousemove',
|
||||
textStyle: { fontFamily: FONT, fontSize: 13 },
|
||||
formatter: (params) => {
|
||||
if (params.dataType === 'edge') {
|
||||
return `${params.data.source} → ${params.data.target}<br/><b>${params.data.value.toFixed(2)} 亿元</b>`;
|
||||
} else {
|
||||
return `<b>${params.name}</b><br/>总额: ${params.value.toFixed(2)} 亿元`;
|
||||
}
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'sankey',
|
||||
layout: 'none',
|
||||
emphasis: {
|
||||
focus: 'adjacency',
|
||||
},
|
||||
nodeAlign: 'left',
|
||||
layoutIterations: 0,
|
||||
nodeWidth: 26,
|
||||
nodeGap: 14,
|
||||
left: 120,
|
||||
right: 180,
|
||||
top: 110,
|
||||
bottom: 90,
|
||||
data: Object.keys(nodeColors).map(name => ({
|
||||
name,
|
||||
itemStyle: { color: nodeColors[name] },
|
||||
})),
|
||||
links,
|
||||
label: {
|
||||
color: PALETTE.ink,
|
||||
fontFamily: FONT,
|
||||
fontSize: 12,
|
||||
fontWeight: 'normal',
|
||||
formatter: (params) => {
|
||||
// 给每个节点标注名称和数值
|
||||
return `{name|${params.name}}\n{value|${params.value.toFixed(2)}亿}`;
|
||||
},
|
||||
rich: {
|
||||
name: {
|
||||
fontSize: 12,
|
||||
fontFamily: FONT,
|
||||
color: PALETTE.ink,
|
||||
},
|
||||
value: {
|
||||
fontSize: 11,
|
||||
fontFamily: FONT,
|
||||
color: PALETTE.grey,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
},
|
||||
},
|
||||
lineStyle: {
|
||||
color: 'gradient',
|
||||
curveness: 0.5,
|
||||
opacity: 0.3,
|
||||
},
|
||||
levels: [
|
||||
{
|
||||
depth: 0,
|
||||
label: { position: 'left' },
|
||||
},
|
||||
{
|
||||
depth: 1,
|
||||
label: { position: 'right' },
|
||||
},
|
||||
{
|
||||
depth: 2,
|
||||
label: { position: 'right' },
|
||||
},
|
||||
{
|
||||
depth: 3,
|
||||
label: { position: 'right' },
|
||||
},
|
||||
{
|
||||
depth: 4,
|
||||
label: { position: 'right' },
|
||||
},
|
||||
{
|
||||
depth: 5,
|
||||
label: { position: 'right' },
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
graphic: [
|
||||
...watermarks(width, height),
|
||||
footnote('数据来源：泡泡玛特财报 | @思考的Joey'),
|
||||
],
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,64 @@
|
||||
import { col } from '../csv.js';
|
||||
import {
|
||||
PALETTE, FONT, axisCommon, categoryAxis, titleStyle, legendStyle,
|
||||
lineSeries, footnote, watermarks, LAYOUT,
|
||||
} from '../theme.js';
|
||||
|
||||
/**
|
||||
* 图 3：毛利率 vs 非国际净利率，两条线的简版对照
|
||||
* 从 margin.csv 复用同一份数据，只挑两列
|
||||
*/
|
||||
export function twoLineChart(rows, { width, height }) {
|
||||
return {
|
||||
backgroundColor: '#fff',
|
||||
title: { ...titleStyle, text: '毛利率与非国际净利率（半年与年度）' },
|
||||
legend: {
|
||||
...legendStyle,
|
||||
top: LAYOUT.legendTop,
|
||||
data: ['毛利率', '非国际归母净利率'].map(name => ({
|
||||
name,
|
||||
icon: 'emptyCircle', // 全部折线图
|
||||
})),
|
||||
},
|
||||
grid: { left: 72, right: 48, top: LAYOUT.gridTop, bottom: 62 },
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
valueFormatter: (v) => `${v}%`,
|
||||
textStyle: { fontFamily: FONT },
|
||||
},
|
||||
xAxis: { ...categoryAxis, data: col(rows, 'period') },
|
||||
yAxis: {
|
||||
...axisCommon,
|
||||
type: 'value',
|
||||
name: '比率（%）',
|
||||
nameLocation: 'middle',
|
||||
nameGap: 46,
|
||||
nameTextStyle: { color: PALETTE.grey, fontSize: 13, fontFamily: FONT },
|
||||
min: -5,
|
||||
max: 80,
|
||||
interval: 25,
|
||||
axisLabel: { ...axisCommon.axisLabel, formatter: '{value}%' },
|
||||
},
|
||||
series: [
|
||||
lineSeries({
|
||||
name: '毛利率',
|
||||
data: col(rows, 'gross_margin'),
|
||||
color: PALETTE.navy,
|
||||
labelPosition: 'top',
|
||||
formatter: (p) => `${p.value}%`,
|
||||
width: 3.5,
|
||||
}),
|
||||
lineSeries({
|
||||
name: '非国际归母净利率',
|
||||
data: col(rows, 'non_gaap_net_margin'),
|
||||
color: PALETTE.coral,
|
||||
labelPosition: 'top',
|
||||
formatter: (p) => `${p.value}%`,
|
||||
}),
|
||||
],
|
||||
graphic: [
|
||||
...watermarks(width, height),
|
||||
footnote('示例数据 | @思考的Joey'),
|
||||
],
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
/**
|
||||
* 极简 CSV 解析：首行表头，逗号分隔，自动把数字列转成 number
|
||||
* 不处理引号内的逗号 —— 财报数据用不上，保持简单
|
||||
*/
|
||||
export function parseCSV(text) {
|
||||
const lines = text
|
||||
.trim()
|
||||
.split(/\r?\n/)
|
||||
.filter((l) => l.trim() && !l.trim().startsWith('#'));
|
||||
|
||||
const headers = lines[0].split(',').map((h) => h.trim());
|
||||
|
||||
return lines.slice(1).map((line) => {
|
||||
const cells = line.split(',').map((c) => c.trim());
|
||||
const row = {};
|
||||
headers.forEach((h, i) => {
|
||||
const raw = cells[i];
|
||||
const num = Number(raw);
|
||||
row[h] = raw !== '' && !Number.isNaN(num) ? num : raw;
|
||||
});
|
||||
return row;
|
||||
});
|
||||
}
|
||||
|
||||
export async function loadCSV(path) {
|
||||
const res = await fetch(path);
|
||||
if (!res.ok) throw new Error(`读取 ${path} 失败：${res.status}`);
|
||||
return parseCSV(await res.text());
|
||||
}
|
||||
|
||||
/** 取某一列 */
|
||||
export function col(rows, key) {
|
||||
return rows.map((r) => r[key]);
|
||||
}
|
||||
+99
@@ -0,0 +1,99 @@
|
||||
import { loadCSV } from './csv.js';
|
||||
import { inventoryChart } from './charts/inventory.js';
|
||||
import { marginChart } from './charts/margin.js';
|
||||
import { twoLineChart } from './charts/twoline.js';
|
||||
import { growthChart } from './charts/growth.js';
|
||||
import { fxChart } from './charts/fx.js';
|
||||
import { assetsChart } from './charts/ppmt_assets.js';
|
||||
import { profitChart } from './charts/ppmt_profit.js';
|
||||
import { ipChart } from './charts/ppmt_ip.js';
|
||||
import { categoryChart } from './charts/ppmt_category.js';
|
||||
import { sankeyChart } from './charts/ppmt_sankey.js';
|
||||
import { regionChannelYoyChart } from './charts/ppmt_region_yoy.js';
|
||||
import { ppmtGrowthChart } from './charts/ppmt_growth.js';
|
||||
import { ppmtMarginsChart } from './charts/ppmt_margins.js';
|
||||
import { ppmtBridgeChart } from './charts/ppmt_bridge.js';
|
||||
import { ppmtCoreProfitChart } from './charts/ppmt_core_profit.js';
|
||||
import { ppmtCoreMarginChart } from './charts/ppmt_core_margin.js';
|
||||
import { ppmtIpShareChart } from './charts/ppmt_ip_share.js';
|
||||
import { ppmtIpShareHistoryChart } from './charts/ppmt_ip_share_history.js';
|
||||
import { ppmtIpExMonstersChart } from './charts/ppmt_ip_ex_monsters.js';
|
||||
|
||||
/** 图表清单：加新图只需在这里加一行 */
|
||||
const CHARTS = [
|
||||
// 示例图表
|
||||
{ id: 'chart-inventory', csv: 'data/inventory.csv', build: inventoryChart, height: 620 },
|
||||
{ id: 'chart-margin', csv: 'data/margin.csv', build: marginChart, height: 620 },
|
||||
{ id: 'chart-twoline', csv: 'data/margin.csv', build: twoLineChart, height: 620 },
|
||||
{ id: 'chart-growth', csv: 'data/growth.csv', build: growthChart, height: 700 },
|
||||
{ id: 'chart-fx', csv: 'data/fx.csv', build: fxChart, height: 780 },
|
||||
// 泡泡玛特图表
|
||||
{ id: 'chart-ppmt-assets', csv: 'data/ppmt_assets.csv', build: assetsChart, height: 680 },
|
||||
{ id: 'chart-ppmt-profit', csv: 'data/ppmt_profit.csv', build: profitChart, height: 680 },
|
||||
{ id: 'chart-ppmt-ip', csv: 'data/ppmt_ip.csv', build: ipChart, height: 720 },
|
||||
{ id: 'chart-ppmt-category', csv: 'data/ppmt_category.csv', build: categoryChart, height: 680 },
|
||||
{ id: 'chart-ppmt-sankey', csv: 'data/ppmt_sankey_2026h1.csv', build: sankeyChart, height: 800 },
|
||||
{ id: 'chart-ppmt-region-yoy', csv: 'data/ppmt_region_channel_yoy.csv', build: regionChannelYoyChart, height: 620 },
|
||||
{ id: 'chart-ppmt-growth', csv: 'data/ppmt_growth.csv', build: ppmtGrowthChart, height: 700 },
|
||||
{ id: 'chart-ppmt-margins', csv: 'data/ppmt_margins.csv', build: ppmtMarginsChart, height: 680 },
|
||||
{ id: 'chart-ppmt-bridge', csv: 'data/ppmt_margin_bridge.csv', build: ppmtBridgeChart, height: 700 },
|
||||
{ id: 'chart-ppmt-core', csv: 'data/ppmt_core_profit.csv', build: ppmtCoreProfitChart, height: 720 },
|
||||
{ id: 'chart-ppmt-core-margin', csv: 'data/ppmt_core_margin.csv', build: ppmtCoreMarginChart, height: 680 },
|
||||
{ id: 'chart-ppmt-ip-share', csv: 'data/ppmt_ip_share_2026h1.csv', build: ppmtIpShareChart, height: 720 },
|
||||
{ id: 'chart-ppmt-ip-share-history', csv: 'data/ppmt_ip_share_history.csv', build: ppmtIpShareHistoryChart, height: 700 },
|
||||
{ id: 'chart-ppmt-ip-ex-monsters', csv: 'data/ppmt_ip_ex_monsters.csv', build: ppmtIpExMonstersChart, height: 700 },
|
||||
];
|
||||
|
||||
const instances = new Map();
|
||||
|
||||
async function render(spec) {
|
||||
const el = document.getElementById(spec.id);
|
||||
if (!el) return;
|
||||
|
||||
try {
|
||||
// 加时间戳绕过缓存，改完 CSV 刷新就能看到
|
||||
const rows = await loadCSV(`${spec.csv}?t=${Date.now()}`);
|
||||
const chart = instances.get(spec.id) || echarts.init(el, null, { renderer: 'canvas' });
|
||||
instances.set(spec.id, chart);
|
||||
|
||||
const { width, height } = el.getBoundingClientRect();
|
||||
chart.setOption(spec.build(rows, { width, height }), true);
|
||||
} catch (err) {
|
||||
el.innerHTML = `<div class="chart-error">${err.message}</div>`;
|
||||
console.error(spec.id, err);
|
||||
}
|
||||
}
|
||||
|
||||
async function renderAll() {
|
||||
await Promise.all(CHARTS.map(render));
|
||||
}
|
||||
|
||||
/** 导出当前图为 PNG，2 倍图，微信公众号里够清晰 */
|
||||
function exportPNG(id, filename) {
|
||||
const chart = instances.get(id);
|
||||
if (!chart) return;
|
||||
const url = chart.getDataURL({ type: 'png', pixelRatio: 2, backgroundColor: '#fff' });
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = `${filename}.png`;
|
||||
a.click();
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
renderAll();
|
||||
|
||||
document.getElementById('btn-reload').addEventListener('click', renderAll);
|
||||
|
||||
document.querySelectorAll('[data-export]').forEach((btn) => {
|
||||
btn.addEventListener('click', () => {
|
||||
exportPNG(btn.dataset.export, btn.dataset.filename || btn.dataset.export);
|
||||
});
|
||||
});
|
||||
|
||||
let timer;
|
||||
window.addEventListener('resize', () => {
|
||||
clearTimeout(timer);
|
||||
// resize 后水印数量要跟着画布变，所以整体重绘而不是 chart.resize()
|
||||
timer = setTimeout(renderAll, 200);
|
||||
});
|
||||
});
|
||||
+247
@@ -0,0 +1,247 @@
|
||||
/**
|
||||
* 方木风格主题 —— 统一的配色、字体、坐标轴、水印
|
||||
* 所有图表共用这一份配置，保证视觉一致性
|
||||
*/
|
||||
|
||||
export const WATERMARK_TEXT = '@思考的Joey';
|
||||
|
||||
// 字体名用单引号：SVG 渲染时字符串会被塞进 style="..." 属性，
|
||||
// 用双引号会提前闭合属性、生成非法 SVG（canvas 渲染看不出来，导出 SVG 时才炸）
|
||||
export const FONT = "'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif";
|
||||
|
||||
/** 调色板：低饱和、克制，接近财经媒体常用的莫兰迪系 */
|
||||
export const PALETTE = {
|
||||
brown: '#6b4a2b',
|
||||
sand: '#d5c7b4',
|
||||
coral: '#ec7b73',
|
||||
green: '#2f8a5b',
|
||||
orange: '#d98324',
|
||||
purple: '#9b4fa8',
|
||||
blue: '#3b6ea5',
|
||||
navy: '#1f4e79',
|
||||
red: '#b8342a',
|
||||
sage: '#8aab7e',
|
||||
ink: '#333333',
|
||||
grey: '#8c8c8c',
|
||||
gridLine: '#e8e8e8',
|
||||
axisLine: '#d0d0d0',
|
||||
};
|
||||
|
||||
/** 坐标轴通用样式：只留浅色横向网格，去掉轴线的存在感 */
|
||||
export const axisCommon = {
|
||||
axisLine: { show: false },
|
||||
axisTick: { show: false },
|
||||
axisLabel: {
|
||||
color: PALETTE.grey,
|
||||
fontSize: 13,
|
||||
fontFamily: FONT,
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: { color: PALETTE.gridLine, width: 1 },
|
||||
},
|
||||
};
|
||||
|
||||
/** X 轴：显示轴线，不显示网格 */
|
||||
export const categoryAxis = {
|
||||
type: 'category',
|
||||
boundaryGap: true,
|
||||
axisLine: { show: true, lineStyle: { color: PALETTE.axisLine } },
|
||||
axisTick: { show: false },
|
||||
axisLabel: {
|
||||
color: PALETTE.ink,
|
||||
fontSize: 14,
|
||||
fontFamily: FONT,
|
||||
margin: 14,
|
||||
},
|
||||
splitLine: { show: false },
|
||||
};
|
||||
|
||||
/**
|
||||
* 期间标签简写：2026H1 → 26H1，2026H2 → 26全年。
|
||||
* CSV 里保留四位年份（无歧义、便于核对），只在轴上简化显示。
|
||||
* 非 20xx 开头的标签（如"年初"）原样返回。
|
||||
*/
|
||||
export function shortPeriod(label) {
|
||||
return String(label)
|
||||
.replace(/^20(\d{2})H2$/, '$1全年') // H2 = 全年累计
|
||||
.replace(/^20(\d{2})/, '$1'); // 其余去掉世纪前缀
|
||||
}
|
||||
|
||||
/** X 轴（期间）：在 categoryAxis 基础上套用简写 */
|
||||
export const periodAxis = {
|
||||
...categoryAxis,
|
||||
axisLabel: {
|
||||
...categoryAxis.axisLabel,
|
||||
formatter: shortPeriod,
|
||||
},
|
||||
};
|
||||
|
||||
export const titleStyle = {
|
||||
left: 'center',
|
||||
top: 18,
|
||||
textStyle: {
|
||||
color: PALETTE.ink,
|
||||
fontSize: 19,
|
||||
fontWeight: 'bold',
|
||||
fontFamily: FONT,
|
||||
},
|
||||
subtextStyle: {
|
||||
color: PALETTE.grey,
|
||||
fontSize: 13,
|
||||
fontFamily: FONT,
|
||||
lineHeight: 20,
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* 标准布局常量
|
||||
* 经多图表调试验证的标题-图例-绘图区间距，确保视觉呼吸感一致
|
||||
*/
|
||||
export const LAYOUT = {
|
||||
titleTop: 18, // 标题顶部边距（已内置在 titleStyle 中）
|
||||
legendTop: 85, // 图例顶部边距（副标题到图例约 25px）
|
||||
gridTop: 145, // 绘图区顶部边距（图例到绘图区约 60px）
|
||||
};
|
||||
|
||||
export const legendStyle = {
|
||||
top: 62, // ⚠️ 已废弃：请改用 LAYOUT.legendTop 或 standardLegend()
|
||||
itemGap: 26,
|
||||
itemWidth: 18,
|
||||
// ❌ 删除 icon: 'roundRect'
|
||||
// 原因：它会覆盖 ECharts 按系列类型自动生成的图例样式（折线图的"短线+空心圆"）
|
||||
// 现在让每个图表按需设置，或使用 standardLegend() 获得正确默认值
|
||||
textStyle: {
|
||||
color: PALETTE.ink,
|
||||
fontSize: 14,
|
||||
fontFamily: FONT,
|
||||
},
|
||||
};
|
||||
|
||||
/** 折线标注：带白底描边，避免压在网格线上看不清 */
|
||||
export function labelStyle(color, position = 'top') {
|
||||
return {
|
||||
show: true,
|
||||
position,
|
||||
color,
|
||||
fontSize: 13,
|
||||
fontFamily: FONT,
|
||||
fontWeight: 500,
|
||||
distance: 8,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 标准图例配置
|
||||
* 不设置 icon，让 ECharts 按系列类型自动生成（折线→短线+空心圆，柱状→矩形）
|
||||
* 统一使用 LAYOUT.legendTop 保证间距一致
|
||||
*/
|
||||
export function standardLegend(data, options = {}) {
|
||||
return {
|
||||
top: LAYOUT.legendTop,
|
||||
itemGap: options.itemGap ?? 28,
|
||||
textStyle: {
|
||||
color: PALETTE.ink,
|
||||
fontSize: 14,
|
||||
fontFamily: FONT,
|
||||
},
|
||||
data,
|
||||
...options, // 允许覆盖任何字段
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 空心圆点折线系列 —— 标准配置
|
||||
* 白心 + 彩色边框，视觉统一（symbolSize: 9, borderWidth: 2.5）
|
||||
*/
|
||||
export function lineSeries({ name, data, color, labelPosition = 'top', formatter, width = 3 }) {
|
||||
return {
|
||||
name,
|
||||
type: 'line',
|
||||
data,
|
||||
smooth: false,
|
||||
symbol: 'circle',
|
||||
symbolSize: 9,
|
||||
itemStyle: {
|
||||
color: '#fff',
|
||||
borderColor: color,
|
||||
borderWidth: 2.5,
|
||||
},
|
||||
lineStyle: { color, width },
|
||||
emphasis: { focus: 'series' },
|
||||
label: {
|
||||
...labelStyle(color, labelPosition),
|
||||
formatter,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 柱状图系列标准配置
|
||||
* 强制显示所有标签（overflow: 'none'），避免小柱子标签被 ECharts 自动隐藏
|
||||
*/
|
||||
export function barSeries({ name, data, color, barWidth, formatter, ...rest }) {
|
||||
return {
|
||||
name,
|
||||
type: 'bar',
|
||||
data,
|
||||
barWidth,
|
||||
itemStyle: { color },
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
fontFamily: FONT,
|
||||
fontSize: 11,
|
||||
color: PALETTE.ink,
|
||||
formatter: formatter ?? ((p) => p.value),
|
||||
overflow: 'none', // 关键：强制显示所有标签
|
||||
},
|
||||
...rest,
|
||||
};
|
||||
}
|
||||
|
||||
/** 底部注释 */
|
||||
export function footnote(text) {
|
||||
return {
|
||||
type: 'text',
|
||||
left: 'center',
|
||||
bottom: 12,
|
||||
style: {
|
||||
text,
|
||||
fill: PALETTE.grey,
|
||||
fontSize: 12,
|
||||
fontFamily: FONT,
|
||||
lineHeight: 18,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 平铺水印。ECharts 没有原生水印，用 graphic 数组铺满画布。
|
||||
* 旋转 -20°，透明度压到 0.08，不干扰读数。
|
||||
*/
|
||||
export function watermarks(width, height, text = WATERMARK_TEXT) {
|
||||
const items = [];
|
||||
const stepX = 300;
|
||||
const stepY = 200;
|
||||
for (let x = -100; x < width + stepX; x += stepX) {
|
||||
for (let y = 40; y < height + stepY; y += stepY) {
|
||||
const offset = (Math.floor(y / stepY) % 2) * (stepX / 2);
|
||||
items.push({
|
||||
type: 'text',
|
||||
left: x + offset,
|
||||
top: y,
|
||||
silent: true,
|
||||
rotation: 0.35,
|
||||
style: {
|
||||
text,
|
||||
fill: 'rgba(120, 100, 80, 0.10)',
|
||||
fontSize: 20,
|
||||
fontWeight: 'bold',
|
||||
fontFamily: FONT,
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
return items;
|
||||
}
|
||||
Reference in New Issue
Block a user