Files
vf_react/public/htmls/蜜雪冰城.html
2025-12-05 13:29:18 +08:00

446 lines
31 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="zh-CN" data-theme="night">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>蜜雪冰城 (MIXUE) - 概念深度研究</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.11.1/dist/full.min.css" rel="stylesheet" type="text/css" />
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Inter', sans-serif;
background-color: #020010;
background-image:
radial-gradient(circle at 10% 10%, rgba(58, 10, 194, 0.2) 0%, transparent 30%),
radial-gradient(circle at 90% 80%, rgba(10, 194, 185, 0.2) 0%, transparent 30%),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%230b052e' fill-opacity='0.4'%3E%3Cpath d='M0 38.59l2.83-2.83 1.41 1.41L1.41 40H0v-1.41zM0 1.4l2.83 2.83 1.41-1.41L1.41 0H0v1.41zM38.59 40l-2.83-2.83 1.41-1.41L40 38.59V40h-1.41zM40 1.41l-2.83 2.83-1.41-1.41L38.59 0H40v1.41zM20 18.6l2.83-2.83 1.41 1.41L21.41 20l2.83 2.83-1.41 1.41L20 21.41l-2.83 2.83-1.41-1.41L18.59 20l-2.83-2.83 1.41-1.41L20 18.59z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.glass-card {
background: rgba(15, 12, 41, 0.4);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-radius: 2rem;
border: 1px solid rgba(255, 255, 255, 0.05);
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
transition: all 0.3s ease;
}
.glass-card:hover {
transform: translateY(-5px);
box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.2);
border-color: rgba(255, 255, 255, 0.15);
}
.fui-title {
font-family: 'Space Grotesk', sans-serif;
text-shadow: 0 0 10px rgba(100, 255, 218, 0.7), 0 0 20px rgba(100, 255, 218, 0.5);
}
.fui-header {
font-family: 'Space Grotesk', sans-serif;
letter-spacing: 0.05em;
}
.glow-divider {
height: 1px;
background: linear-gradient(90deg, transparent, rgba(100, 255, 218, 0.5), transparent);
}
.bento-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 1.5rem;
}
.bento-item {
grid-column: span 3;
min-height: 300px;
}
.bento-item-2 { grid-column: span 2; }
.bento-item-4 { grid-column: span 4; }
.bento-item-6 { grid-column: span 6; }
@media (max-width: 1024px) {
.bento-item, .bento-item-2, .bento-item-4, .bento-item-6 {
grid-column: span 6;
}
}
.timeline::before {
content: '';
position: absolute;
left: 5px;
top: 0;
bottom: 0;
width: 2px;
background: linear-gradient(to bottom, rgba(79, 70, 229, 0) 0%, rgba(79, 70, 229, 0.8) 20%, rgba(79, 70, 229, 0.8) 80%, rgba(79, 70, 229, 0) 100%);
}
.timeline-dot {
position: absolute;
left: 0;
top: 0.5rem;
width: 12px;
height: 12px;
border-radius: 50%;
background-color: #64ffda;
box-shadow: 0 0 8px #64ffda;
}
</style>
</head>
<body class="text-gray-300 min-h-screen p-4 sm:p-8">
<div class="max-w-7xl mx-auto space-y-8">
<!-- Header -->
<header class="text-center py-8">
<h1 class="text-4xl md:text-6xl font-bold text-white fui-title">蜜雪冰城 (MIXUE)</h1>
<h2 class="text-2xl md:text-3xl font-light text-cyan-300 mt-2 fui-header">概念深度研究报告</h2>
<p class="mt-6 max-w-3xl mx-auto text-sm text-gray-400">
由 北京价值前沿科技有限公司 AI投研agent“价小前投研” 进行投研呈现。本报告为AI合成数据不构成任何投资建议投资需谨慎。
</p>
</header>
<!-- Bento Grid for Key Metrics -->
<section class="bento-grid">
<div class="glass-card p-6 bento-item bento-item-2">
<h3 class="fui-header text-xl text-white mb-4">全球门店网络</h3>
<div id="store-growth-chart" style="width: 100%; height: 260px;"></div>
</div>
<div class="glass-card p-6 bento-item bento-item-2">
<h3 class="fui-header text-xl text-white mb-4">核心财务表现</h3>
<div id="financials-chart" style="width: 100%; height: 260px;"></div>
</div>
<div class="glass-card p-6 bento-item bento-item-2">
<h3 class="fui-header text-xl text-white mb-4">国内市场渗透</h3>
<div id="market-dist-chart" style="width: 100%; height: 260px;"></div>
</div>
</section>
<!-- Core Insight Section -->
<main class="space-y-8">
<div class="glass-card p-8">
<h2 class="text-2xl md:text-3xl font-bold text-white fui-header mb-6">0. 概念事件:香港上市里程碑</h2>
<div class="glow-divider mb-6"></div>
<p class="mb-6 leading-relaxed">蜜雪冰城概念的核心催化事件是其于 <strong class="text-cyan-300 font-semibold">2025年3月3日</strong> 在香港联合交易所主板的成功上市(股票代码:<strong class="text-cyan-300 font-semibold">2097.HK</strong>)。这一事件不仅是公司发展的重要里程碑,也将其独特的商业模式和庞大的市场规模全面呈现在资本市场面前,引发了市场的高度关注和深度研究。</p>
<div class="relative timeline pl-8">
<div class="relative pb-6">
<div class="timeline-dot"></div>
<p class="font-semibold text-white">2025年1月1日: <span class="font-normal text-gray-300">公司更新港股招股书,上市进程加速。</span></p>
</div>
<div class="relative pb-6">
<div class="timeline-dot"></div>
<p class="font-semibold text-white">2025年2月14日: <span class="font-normal text-gray-300">通过香港联交所上市聆讯,披露核心经营数据与战略。</span></p>
</div>
<div class="relative pb-6">
<div class="timeline-dot"></div>
<p class="font-semibold text-white">2025年2月21日-26日: <span class="font-normal text-gray-300">正式公开招股,发行价定为 <strong class="text-cyan-300">202.5港元</strong>。市场反应热烈,公开发售超额认购逾 <strong class="text-cyan-300">3449倍</strong>,成为港股新“冻资王”。</span></p>
</div>
<div class="relative">
<div class="timeline-dot"></div>
<p class="font-semibold text-white">2025年3月3日: <span class="font-normal text-gray-300">正式挂牌上市。开盘价 <strong class="text-cyan-300">262.00港元</strong>,较发行价上涨 <strong class="text-cyan-300">29.38%</strong>,市值突破千亿港元。</span></p>
</div>
</div>
</div>
<div class="glass-card p-8">
<h2 class="text-2xl md:text-3xl font-bold text-white fui-header mb-6">1. 核心观点摘要</h2>
<div class="glow-divider mb-6"></div>
<p class="text-lg leading-relaxed bg-black/20 p-6 rounded-2xl border border-white/10">
蜜雪冰城概念的核心是 <strong class="text-cyan-300">一个以极致供应链效率为基石、通过高性价比产品和加盟模式主导下沉市场的消费巨头</strong>。当前,公司正处于 <strong class="text-cyan-300">由国内高速扩张向“第二曲线”(幸运咖、海外市场)延伸的关键转型阶段</strong>。其未来的增长潜力不再仅仅依赖于国内门店数量的线性增加,而更多取决于其核心供应链能力能否成功赋能新品牌和新市场,从而实现平台的跨品类、跨地域复制。
</p>
</div>
<div x-data="{ tab: 'flywheel' }" class="glass-card p-8">
<h2 class="text-2xl md:text-3xl font-bold text-white fui-header mb-6">2. 核心逻辑与市场认知分析</h2>
<div class="glow-divider mb-6"></div>
<div class="tabs tabs-boxed bg-black/30 mb-6">
<a class="tab" :class="{'tab-active text-cyan-300': tab === 'flywheel'}" @click="tab = 'flywheel'">“性价比”飞轮</a>
<a class="tab" :class="{'tab-active text-cyan-300': tab === 'sentiment'}" @click="tab = 'sentiment'">市场热度与情绪</a>
<a class="tab" :class="{'tab-active text-cyan-300': tab === 'gap'}" @click="tab = 'gap'">预期差分析</a>
</div>
<div x-show="tab === 'flywheel'" class="space-y-4 leading-relaxed">
<h3 class="text-xl font-semibold text-white">核心驱动力:垂直整合供应链驱动的“极致性价比”飞轮</h3>
<p>蜜雪冰城并非一家简单的餐饮连锁公司,而是一家<strong class="text-indigo-300">以供应链为核心壁垒的零售基础设施公司</strong>。其商业模式的根基在于对成本的极致控制,这并非通过牺牲品质,而是通过全产业链的垂直整合实现的。</p>
<ul class="list-disc list-inside space-y-2 pl-4">
<li><strong class="text-white">上游自产:</strong> 自建五大生产基地核心原料自产率极高研报称核心食材100%自产采购成本较行业平均水平低10%-20%。</li>
<li><strong class="text-white">中游自建仓配:</strong> 拥有行业规模最大的自主运营仓储和物流体系冷链覆盖率达97%,大幅降低物流成本。</li>
<li><strong class="text-white">飞轮效应:</strong> 成本优势支撑了<strong class="text-cyan-300">2-8元</strong>的极低价格带。低价吸引海量消费者2024年出杯量约90亿杯规模化效应再摊薄成本形成“<strong class="text-indigo-300">成本领先 → 价格优势 → 规模扩张 → 成本再降低</strong>”的商业飞轮。加盟商因此获得可观利润门店利润率约18%+和短回本周期11-15个月驱动网络爆炸式增长。</li>
</ul>
</div>
<div x-show="tab === 'sentiment'" class="space-y-4 leading-relaxed">
<h3 class="text-xl font-semibold text-white">市场热度与情绪:高度乐观,但逐步回归理性</h3>
<p>上市初期的市场情绪是<strong class="text-indigo-300">极度乐观乃至狂热的</strong>。超过3000倍的认购倍数、千亿市值的首日表现都反映了市场对其商业模式的高度认可。</p>
<p>随着时间的推移市场情绪正逐步从对“IPO概念”的炒作转向对其<strong class="text-cyan-300">基本面和增长持续性的理性审视</strong>。研报开始更深入地探讨海外风险、竞争加剧以及幸运咖的成长路径,显示出市场关注点正在深化。</p>
</div>
<div x-show="tab === 'gap'" class="space-y-4 leading-relaxed">
<h3 class="text-xl font-semibold text-white">预期差分析:海外扩张的“光环”与“现实”</h3>
<p>市场的普遍认知是将“海外扩张”视为巨大增长引擎。然而,潜在的预期差在于:</p>
<ul class="list-disc list-inside space-y-2 pl-4">
<li><strong class="text-white">扩张节奏与质量的矛盾:</strong> 宏大的叙事是“开拓全球”,但<strong class="text-amber-300">2025年H1财报数据显示海外门店净关闭162家</strong>,与市场预期的高速扩张形成鲜明对比。这表明海外扩张并非一帆风顺,公司已转向注重经营质量。</li>
<li><strong class="text-white">加盟商盈利能力的压力:</strong> 国内门店回本周期已从<strong class="text-cyan-300">11个月</strong>延长至<strong class="text-amber-300">18-20个月</strong>。虽然仍优于行业,但盈利压力的增加是市场可能未充分定价的风险。</li>
<li><strong class="text-white">供应商关系的“误读”:</strong> 信息交叉验证显示,部分所谓的“关联股”逻辑并不坚实。例如,<strong class="text-amber-300">熊猫乳品</strong>明确表示没有直接供货,<strong class="text-amber-300">宏辉果蔬</strong>的柠檬供应占比不到1%。</li>
</ul>
</div>
</div>
<div class="bento-grid">
<div class="glass-card p-8 bento-item bento-item-6 md:bento-item-3">
<h2 class="text-2xl font-bold text-white fui-header mb-6">3. 关键催化剂与发展路径</h2>
<div class="glow-divider mb-6"></div>
<h3 class="text-lg font-semibold text-white mb-2">近期催化剂 (未来3-6个月)</h3>
<ul class="list-decimal list-inside space-y-2 mb-4">
<li><strong class="text-cyan-300">幸运咖盈利能力验证:</strong> 财报披露其单店模型改善将证明模式“可复制性”。</li>
<li><strong class="text-cyan-300">海外市场策略成效:</strong> 调整后海外业务利润率和GMV能否回升及美洲等新市场开拓进展。</li>
<li><strong class="text-cyan-300">国内乡镇渗透率数据:</strong> 验证国内市场天花板是否依然高远。</li>
</ul>
<h3 class="text-lg font-semibold text-white mb-2">长期发展路径</h3>
<ul class="list-decimal list-inside space-y-2">
<li><strong class="text-white">国内深耕 (1-2年):</strong> 完成乡镇市场覆盖冲击5.5万-7万家门店上限。</li>
<li><strong class="text-white">多品牌矩阵 (2-3年):</strong> 幸运咖成为龙头,孵化或收购其他平价餐饮品类。</li>
<li><strong class="text-white">全球化平台 (3-5年+):</strong> 完成东南亚供应链本地化,逐步演变为全球性的餐饮供应链平台。</li>
</ul>
</div>
<div class="glass-card p-8 bento-item bento-item-6 md:bento-item-3">
<h2 class="text-2xl font-bold text-white fui-header mb-6">5. 潜在风险与挑战</h2>
<div class="glow-divider mb-6"></div>
<ul class="space-y-3">
<li><strong class="text-amber-300">运营管理风险:</strong> 超5万家加盟店的服务标准、产品质量和食品安全是巨大考验。</li>
<li><strong class="text-amber-300">商业化风险:</strong> 国内市场天花板临近,门店加密可能稀释单店盈利;海外本地化失败;幸运咖培育不及预期。</li>
<li><strong class="text-amber-300">政策与竞争风险:</strong> 食品安全是行业“达摩克利斯之剑”;行业价格战可能加剧,侵蚀利润空间。</li>
<li><strong class="text-amber-300">信息交叉验证风险:</strong> 海外扩张数据、供应商关系、加盟商回报周期等存在矛盾点,需审慎甄别。</li>
</ul>
</div>
</div>
<div class="glass-card p-8">
<h2 class="text-2xl md:text-3xl font-bold text-white fui-header mb-6">4. 产业链与核心公司深度剖析</h2>
<div class="glow-divider mb-6"></div>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<div class="bg-black/20 p-6 rounded-2xl border border-white/10">
<h3 class="text-xl font-semibold text-white mb-3">上游 (供应商)</h3>
<ul class="list-disc list-inside space-y-1 text-sm">
<li><strong class="text-cyan-300">核心设备:</strong> 东贝集团 (冰淇淋机), 冰山冷热 (陈列柜)</li>
<li><strong class="text-cyan-300">核心原料:</strong> 一致魔芋, 佳禾食品 (粉末油脂), 中粮科技 (糖浆)</li>
<li><strong class="text-cyan-300">包装材料:</strong> 紫江企业 (纸杯), 道恩股份 (塑料袋)</li>
</ul>
</div>
<div class="bg-black/20 p-6 rounded-2xl border border-white/10">
<h3 class="text-xl font-semibold text-white mb-3">中游 (蜜雪冰城主体)</h3>
<p class="text-sm">负责品牌运营、IP打造、产品研发、供应链管理 (自产+采购)、仓储物流、加盟商管理。</p>
</div>
<div class="bg-black/20 p-6 rounded-2xl border border-white/10">
<h3 class="text-xl font-semibold text-white mb-3">下游 (加盟商与终端)</h3>
<p class="text-sm">遍布全球的5万多家加盟门店直接面向终端消费者。数字化合作方包括飞书、用友网络等。</p>
</div>
</div>
<div class="mt-6">
<h3 class="text-xl font-semibold text-white mb-3">核心玩家对比与逻辑纯粹度分析</h3>
<ul class="space-y-3">
<li><strong class="text-green-400">领导者/逻辑最纯粹: 东贝集团 (601956)</strong> - 核心生产设备主要供应商,蜜雪冰城每次开店都直接对应其设备需求,受益确定性最高。</li>
<li><strong class="text-blue-400">重要参与者: 一致魔芋 (920273), 佳禾食品 (605300)</strong> - 核心食品原料供应商,业务增长与蜜雪出杯量紧密相关,但需关注蜜雪自产率提升的替代风险。</li>
<li><strong class="text-yellow-400">追赶者/逻辑待验证: 紫江企业, 道恩股份</strong> - 包装材料供应商,但新闻指出“业务规模不大”,业绩弹性可能有限。</li>
<li><strong class="text-red-400">逻辑较弱/情绪驱动: 太湖雪, 雪浪环境</strong> - 涨幅分析报告明确指出上涨与基本面无关,纯粹是市场资金基于名称的联想炒作,属伪概念股,风险极高。</li>
</ul>
</div>
</div>
<div class="glass-card p-8">
<h2 class="text-2xl md:text-3xl font-bold text-white fui-header mb-6">6. 综合结论与投资启示</h2>
<div class="glow-divider mb-6"></div>
<div class="space-y-6">
<div>
<h3 class="text-lg font-semibold text-white mb-2">综合结论</h3>
<p>蜜雪冰城概念已走过纯粹的“主题炒作”阶段,进入<strong class="text-indigo-300">由核心基本面驱动,并伴随对新增长曲线预期的价值发现阶段</strong>。其核心护城河——强大的供应链体系——坚不可摧。未来的超额收益将取决于其能否成功应对国内市场饱和度提升的挑战,以及在<strong class="text-cyan-300">幸运咖和海外市场</strong>这两个关键战场上证明其模式的可复制性。</p>
</div>
<div>
<h3 class="text-lg font-semibold text-white mb-2">最具投资价值的细分环节</h3>
<ol class="list-decimal list-inside space-y-2">
<li><strong class="text-white">蜜雪冰城本身:</strong> 作为平台型公司,其价值在于供应链的复用能力。</li>
<li><strong class="text-white">上游核心、排他性供应商:</strong> 尤其是<strong class="text-cyan-300">核心设备供应商(如东贝集团)</strong>,订单与开店计划直接挂钩,业绩确定性强,不易被“自产”替代。</li>
</ol>
</div>
<div>
<h3 class="text-lg font-semibold text-white mb-2">需重点跟踪和验证的关键指标</h3>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
<div class="bg-black/20 p-3 rounded-xl text-center"><p>同店销售增长率 (SSSG)</p></div>
<div class="bg-black/20 p-3 rounded-xl text-center"><p>幸运咖单店盈利模型</p></div>
<div class="bg-black/20 p-3 rounded-xl text-center"><p>海外门店净增及利润率</p></div>
<div class="bg-black/20 p-3 rounded-xl text-center"><p>加盟商申请数与关店率</p></div>
</div>
</div>
</div>
</div>
<!-- Stock Data Table -->
<div class="glass-card p-8">
<h2 class="text-2xl md:text-3xl font-bold text-white fui-header mb-6">核心关联股票池</h2>
<div class="glow-divider mb-6"></div>
<div class="overflow-x-auto">
<table class="table table-zebra-zebra bg-transparent">
<thead class="text-white text-base fui-header">
<tr>
<th>股票名称</th>
<th>股票代码</th>
<th>关联原因</th>
<th>其他标签</th>
</tr>
</thead>
<tbody>
<tr class="hover:bg-white/10">
<td>东贝集团</td>
<td><a href="https://valuefrontier.cn/company?scode=601956" target="_blank" class="text-cyan-300 hover:underline">601956</a></td>
<td>子公司东贝制冷是蜜雪冰城的主要供应商,主要供货产品有冰淇淋机、制冰机等</td>
<td><span class="badge badge-accent badge-outline">核心供应商</span></td>
</tr>
<tr class="hover:bg-white/10">
<td>一致魔芋</td>
<td><a href="https://valuefrontier.cn/company?scode=920273" target="_blank" class="text-cyan-300 hover:underline">920273</a></td>
<td>在蜜雪冰城的供应链中占据重要地位</td>
<td><span class="badge badge-accent badge-outline">核心原料</span></td>
</tr>
<tr class="hover:bg-white/10">
<td>佳禾食品</td>
<td><a href="https://valuefrontier.cn/company?scode=605300" target="_blank" class="text-cyan-300 hover:underline">605300</a></td>
<td>粉末油脂下游客户包括蜜雪冰城</td>
<td><span class="badge badge-info badge-outline">原料供应商</span></td>
</tr>
<tr class="hover:bg-white/10">
<td>冰山冷热</td>
<td><a href="https://valuefrontier.cn/company?scode=000530" target="_blank" class="text-cyan-300 hover:underline">000530</a></td>
<td>联营公司生产的超市陈列柜主要客户包括蜜雪冰城</td>
<td><span class="badge badge-info badge-outline">设备供应商</span></td>
</tr>
<tr class="hover:bg-white/10">
<td>好想你</td>
<td><a href="https://valuefrontier.cn/company?scode=002582" target="_blank" class="text-cyan-300 hover:underline">002582</a></td>
<td>公司通过深圳龙珠股权投资基金间接投资蜜雪冰城</td>
<td><span class="badge badge-primary badge-outline">间接投资</span></td>
</tr>
<tr class="hover:bg-white/10">
<td>紫江企业</td>
<td><a href="https://valuefrontier.cn/company?scode=600210" target="_blank" class="text-cyan-300 hover:underline">600210</a></td>
<td>为蜜雪冰城提供纸杯等产品,但业务规模不大</td>
<td><span class="badge badge-secondary badge-outline">包装材料</span></td>
</tr>
<tr class="hover:bg-white/10">
<td>道恩股份</td>
<td><a href="https://valuefrontier.cn/company?scode=002838" target="_blank" class="text-cyan-300 hover:underline">002838</a></td>
<td>子公司为其供应可降解塑料手提袋</td>
<td><span class="badge badge-secondary badge-outline">包装材料</span></td>
</tr>
<tr class="hover:bg-white/10">
<td>用友网络</td>
<td><a href="https://valuefrontier.cn/company?scode=600588" target="_blank" class="text-cyan-300 hover:underline">600588</a></td>
<td>品牌合作可能为ERP系统供应商</td>
<td><span class="badge badge-ghost badge-outline">数字化合作</span></td>
</tr>
</tbody>
</table>
</div>
</div>
</main>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
const chartTextColor = '#a6adbb';
const chartLineColor = '#2dd4bf';
const chartAxisLineColor = 'rgba(255, 255, 255, 0.2)';
// Store Growth Chart
var storeGrowthChart = echarts.init(document.getElementById('store-growth-chart'));
var storeGrowthOption = {
tooltip: { trigger: 'axis', backgroundColor: 'rgba(0,0,0,0.7)', borderColor: '#374151', textStyle: { color: '#e5e7eb' } },
grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
xAxis: {
type: 'category',
boundaryGap: false,
data: ['2024-09', '2024-12', '2025-08', '2025-11'],
axisLine: { lineStyle: { color: chartAxisLineColor } },
axisLabel: { color: chartTextColor }
},
yAxis: {
type: 'value',
axisLabel: { formatter: '{value} 家', color: chartTextColor },
splitLine: { lineStyle: { color: chartAxisLineColor, type: 'dashed' } },
},
series: [{
name: '全球门店数',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 8,
itemStyle: { color: chartLineColor },
lineStyle: { color: chartLineColor, width: 3, shadowColor: 'rgba(45, 212, 191, 0.5)', shadowBlur: 10 },
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0, color: 'rgba(45, 212, 191, 0.3)'
}, {
offset: 1, color: 'rgba(45, 212, 191, 0)'
}])
},
data: [45302, 46479, 53014, 53014] // Assuming Nov data is same as Aug for trend
}]
};
storeGrowthChart.setOption(storeGrowthOption);
// Financials Chart
var financialsChart = echarts.init(document.getElementById('financials-chart'));
var financialsOption = {
tooltip: { trigger: 'axis', backgroundColor: 'rgba(0,0,0,0.7)', borderColor: '#374151', textStyle: { color: '#e5e7eb' } },
legend: { data: ['营业收入', '净利润'], textStyle: { color: chartTextColor } },
grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
xAxis: {
type: 'category',
data: ['2022', '2023', '2024 (9M)'],
axisLine: { lineStyle: { color: chartAxisLineColor } },
axisLabel: { color: chartTextColor }
},
yAxis: {
type: 'value',
axisLabel: { formatter: '{value} 亿', color: chartTextColor },
splitLine: { lineStyle: { color: chartAxisLineColor, type: 'dashed' } }
},
series: [
{ name: '营业收入', type: 'bar', barWidth: '30%', itemStyle: { color: '#60a5fa', borderRadius: [4, 4, 0, 0] }, data: [136, 203, 187] },
{ name: '净利润', type: 'bar', barWidth: '30%', itemStyle: { color: '#f87171', borderRadius: [4, 4, 0, 0] }, data: [20, 32, 35] }
]
};
financialsChart.setOption(financialsOption);
// Market Distribution Chart
var marketDistChart = echarts.init(document.getElementById('market-dist-chart'));
var marketDistOption = {
tooltip: { trigger: 'item', backgroundColor: 'rgba(0,0,0,0.7)', borderColor: '#374151', textStyle: { color: '#e5e7eb' } },
legend: { orient: 'vertical', left: 'left', textStyle: { color: chartTextColor } },
series: [{
name: '门店分布',
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: { show: false, position: 'center' },
emphasis: { label: { show: true, fontSize: '20', fontWeight: 'bold', color: '#fff' } },
labelLine: { show: false },
data: [
{ value: 57.6, name: '三线及以下', itemStyle: { color: '#34d399' } },
{ value: 19.1, name: '二线城市', itemStyle: { color: '#60a5fa' } },
{ value: 18.4, name: '新一线城市', itemStyle: { color: '#f472b6' } },
{ value: 4.9, name: '一线城市', itemStyle: { color: '#fbbf24' } }
]
}]
};
marketDistChart.setOption(marketDistOption);
window.addEventListener('resize', function() {
storeGrowthChart.resize();
financialsChart.resize();
marketDistChart.resize();
});
});
</script>
</body>
</html>