feat: 构建泡泡玛特相关图表
This commit is contained in:
Joey
+179
@@ -0,0 +1,179 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>财报图表 · Joey 谨制</title>
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<script src="https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<h1>财报图表</h1>
|
||||
<p>改 <code>data/*.csv</code> 后点「重新加载」即可更新</p>
|
||||
<button id="btn-reload">重新加载数据</button>
|
||||
</header>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-bar">
|
||||
<span class="src">data/inventory.csv</span>
|
||||
<button data-export="chart-inventory" data-filename="存货与周转天数">导出 PNG</button>
|
||||
</div>
|
||||
<div class="chart" id="chart-inventory" style="height:620px"></div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-bar">
|
||||
<span class="src">data/margin.csv</span>
|
||||
<button data-export="chart-margin" data-filename="利润率与费用率拆解">导出 PNG</button>
|
||||
</div>
|
||||
<div class="chart" id="chart-margin" style="height:620px"></div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-bar">
|
||||
<span class="src">data/margin.csv（毛利率 + 净利率两列）</span>
|
||||
<button data-export="chart-twoline" data-filename="毛利率与非国际净利率">导出 PNG</button>
|
||||
</div>
|
||||
<div class="chart" id="chart-twoline" style="height:620px"></div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-bar">
|
||||
<span class="src">data/growth.csv</span>
|
||||
<button data-export="chart-growth" data-filename="营收到利润的增速对比">导出 PNG</button>
|
||||
</div>
|
||||
<div class="chart" id="chart-growth" style="height:700px"></div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-bar">
|
||||
<span class="src">data/fx.csv</span>
|
||||
<button data-export="chart-fx" data-filename="人民币汇率两种口径">导出 PNG</button>
|
||||
</div>
|
||||
<div class="chart" id="chart-fx" style="height:780px"></div>
|
||||
</div>
|
||||
|
||||
<hr style="margin: 48px auto; max-width: 1180px; border: none; border-top: 2px solid #e0ddd5;">
|
||||
|
||||
<header style="margin-top: 32px;">
|
||||
<h1>📊 泡泡玛特财报分析</h1>
|
||||
<p>基于 <code>data/ppmt.xlsx</code> 自动生成</p>
|
||||
</header>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-bar">
|
||||
<span class="src">data/ppmt_assets.csv</span>
|
||||
<button data-export="chart-ppmt-assets" data-filename="泡泡玛特资产结构">导出 PNG</button>
|
||||
</div>
|
||||
<div class="chart" id="chart-ppmt-assets" style="height:680px"></div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-bar">
|
||||
<span class="src">data/ppmt_profit.csv</span>
|
||||
<button data-export="chart-ppmt-profit" data-filename="泡泡玛特盈利能力">导出 PNG</button>
|
||||
</div>
|
||||
<div class="chart" id="chart-ppmt-profit" style="height:680px"></div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-bar">
|
||||
<span class="src">data/ppmt_ip.csv</span>
|
||||
<button data-export="chart-ppmt-ip" data-filename="泡泡玛特IP收入趋势">导出 PNG</button>
|
||||
</div>
|
||||
<div class="chart" id="chart-ppmt-ip" style="height:720px"></div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-bar">
|
||||
<span class="src">data/ppmt_category.csv</span>
|
||||
<button data-export="chart-ppmt-category" data-filename="泡泡玛特品类结构">导出 PNG</button>
|
||||
</div>
|
||||
<div class="chart" id="chart-ppmt-category" style="height:680px"></div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-bar">
|
||||
<span class="src">data/ppmt_sankey_2026h1.csv</span>
|
||||
<button data-export="chart-ppmt-sankey" data-filename="泡泡玛特利润流向2026H1">导出 PNG</button>
|
||||
</div>
|
||||
<div class="chart" id="chart-ppmt-sankey" style="height:800px"></div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-bar">
|
||||
<span class="src">data/ppmt_region_channel_yoy.csv</span>
|
||||
<button data-export="chart-ppmt-region-yoy" data-filename="泡泡玛特区域渠道同比增速">导出 PNG</button>
|
||||
</div>
|
||||
<div class="chart" id="chart-ppmt-region-yoy" style="height:620px"></div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-bar">
|
||||
<span class="src">data/ppmt_growth.csv</span>
|
||||
<button data-export="chart-ppmt-growth" data-filename="泡泡玛特营收到利润增速对比">导出 PNG</button>
|
||||
</div>
|
||||
<div class="chart" id="chart-ppmt-growth" style="height:700px"></div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-bar">
|
||||
<span class="src">data/ppmt_margins.csv</span>
|
||||
<button data-export="chart-ppmt-margins" data-filename="泡泡玛特利润率与费用率拆解">导出 PNG</button>
|
||||
</div>
|
||||
<div class="chart" id="chart-ppmt-margins" style="height:680px"></div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-bar">
|
||||
<span class="src">data/ppmt_margin_bridge.csv</span>
|
||||
<button data-export="chart-ppmt-bridge" data-filename="泡泡玛特净利率同比拆解">导出 PNG</button>
|
||||
</div>
|
||||
<div class="chart" id="chart-ppmt-bridge" style="height:700px"></div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-bar">
|
||||
<span class="src">data/ppmt_core_profit.csv</span>
|
||||
<button data-export="chart-ppmt-core" data-filename="泡泡玛特核心利润及同比增速">导出 PNG</button>
|
||||
</div>
|
||||
<div class="chart" id="chart-ppmt-core" style="height:720px"></div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-bar">
|
||||
<span class="src">data/ppmt_core_margin.csv</span>
|
||||
<button data-export="chart-ppmt-core-margin" data-filename="泡泡玛特核心利润率">导出 PNG</button>
|
||||
</div>
|
||||
<div class="chart" id="chart-ppmt-core-margin" style="height:680px"></div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-bar">
|
||||
<span class="src">data/ppmt_ip_share_2026h1.csv</span>
|
||||
<button data-export="chart-ppmt-ip-share" data-filename="泡泡玛特IP收入占比2026H1">导出 PNG</button>
|
||||
</div>
|
||||
<div class="chart" id="chart-ppmt-ip-share" style="height:720px"></div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-bar">
|
||||
<span class="src">data/ppmt_ip_share_history.csv</span>
|
||||
<button data-export="chart-ppmt-ip-share-history" data-filename="泡泡玛特各IP半年收入占比">导出 PNG</button>
|
||||
</div>
|
||||
<div class="chart" id="chart-ppmt-ip-share-history" style="height:700px"></div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-bar">
|
||||
<span class="src">data/ppmt_ip_ex_monsters.csv</span>
|
||||
<button data-export="chart-ppmt-ip-ex-monsters" data-filename="泡泡玛特除MONSTERS外IP收入及同比">导出 PNG</button>
|
||||
</div>
|
||||
<div class="chart" id="chart-ppmt-ip-ex-monsters" style="height:700px"></div>
|
||||
</div>
|
||||
|
||||
<script type="module" src="js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user