feat: 构建泡泡玛特相关图表

2026-08-23 21:23:41 +08:00
commit 3ae396776d
31 changed files with 3454 additions and 0 deletions
@@ -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'),
+    ],
+  };
+}