Files
vf_react/public/htmls/折叠屏.html
2025-12-05 13:29:18 +08:00

474 lines
33 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>折叠屏 - 深度行业研究报告</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.10.2/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>
<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap');
body {
font-family: 'Noto Sans SC', sans-serif;
background-color: #0c0a18;
background-image:
radial-gradient(ellipse at 30% 20%, rgba(100, 116, 222, 0.2) 0%, transparent 60%),
radial-gradient(ellipse at 70% 80%, rgba(192, 38, 211, 0.15) 0%, transparent 60%);
background-attachment: fixed;
}
.glass-card {
background: rgba(23, 22, 48, 0.5);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
}
.glass-card:hover {
background: rgba(30, 29, 60, 0.6);
border: 1px solid rgba(255, 255, 255, 0.2);
transform: translateY(-4px);
box-shadow: 0 0 30px rgba(128, 90, 213, 0.2);
}
.bento-grid {
display: grid;
gap: 1.5rem;
grid-template-columns: repeat(12, 1fr);
grid-auto-rows: minmax(100px, auto);
}
.bento-item {
grid-column: span 12;
}
@media (min-width: 1024px) {
.bento-item-span-4 { grid-column: span 4; }
.bento-item-span-5 { grid-column: span 5; }
.bento-item-span-6 { grid-column: span 6; }
.bento-item-span-7 { grid-column: span 7; }
.bento-item-span-8 { grid-column: span 8; }
.bento-item-span-12 { grid-column: span 12; }
}
.gradient-text {
background: linear-gradient(90deg, #818cf8, #d946ef);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.glow-border {
position: relative;
}
.glow-border::before {
content: '';
position: absolute;
inset: 0;
border-radius: 1.5rem;
padding: 1px;
background: linear-gradient(45deg, rgba(139, 92, 246, 0.5), rgba(217, 70, 239, 0.5));
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
.subtle-glow {
text-shadow: 0 0 8px rgba(192, 132, 252, 0.3);
}
</style>
</head>
<body class="text-gray-300 min-h-screen">
<div class="container mx-auto p-4 lg:p-8">
<!-- Header -->
<header class="text-center mb-12">
<h1 class="text-4xl lg:text-6xl font-bold gradient-text tracking-wider">折叠屏 概念深度解析</h1>
<p class="mt-4 text-gray-400 max-w-3xl mx-auto">
北京价值前沿科技有限公司 AI投研agent“价小前投研”进行投研呈现。本报告为AI合成数据投资需谨慎。
</p>
</header>
<main class="space-y-12">
<!-- 核心观点摘要 -->
<section class="bento-item bento-item-span-12 glass-card rounded-3xl p-8 glow-border">
<h2 class="text-2xl font-bold mb-4 text-violet-300 subtle-glow">核心观点摘要</h2>
<p class="text-lg text-gray-300 leading-relaxed">
折叠屏正处在由<strong class="text-cyan-400">技术创新驱动</strong><strong class="text-cyan-400">商业化普及过渡</strong>的关键阶段。其核心驱动力源于华为以“三折叠”形态开辟的全新高端市场以及苹果预期在2026年入局所带来的巨大产业链重塑机遇。当前市场已从单纯的主题炒作进入<strong class="text-fuchsia-400">业绩兑现与预期博弈并存</strong>的阶段,投资价值正沿着产业链从终端品牌向上游核心增量部件(特别是<strong class="text-amber-400">铰链</strong><strong class="text-amber-400">UTG</strong>)传导和深化。
</p>
</section>
<!-- Bento Grid -->
<section class="bento-grid">
<!-- 概念事件时间轴 -->
<div class="bento-item lg:bento-item-span-7 glass-card rounded-3xl p-6 flex flex-col">
<h3 class="text-xl font-bold mb-4 text-violet-300 subtle-glow">概念演进:从探索到爆发</h3>
<ul class="space-y-4 text-sm text-gray-400 flex-grow">
<li class="flex items-start">
<svg class="w-4 h-4 mr-3 mt-1 text-cyan-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
<div><strong class="text-gray-200">市场背景 (2023-):</strong> 手机换机周期延长至52个月折叠屏成少数增长亮点。华为以37.4%份额领跑中国市场。</div>
</li>
<li class="flex items-start">
<svg class="w-4 h-4 mr-3 mt-1 text-cyan-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
<div><strong class="text-gray-200">技术突破 (2024.03):</strong> 华为三折叠屏专利公布,预示下一代产品形态。</div>
</li>
<li class="flex items-start">
<svg class="w-4 h-4 mr-3 mt-1 text-cyan-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
<div><strong class="text-gray-200">格局变化 (2024 Q1):</strong> 华为全球出货量首超三星市占率达40%,成为全球第一。</div>
</li>
<li class="flex items-start">
<svg class="w-4 h-4 mr-3 mt-1 text-cyan-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
<div><strong class="text-gray-200">里程碑事件 (2024.09.10):</strong> 华为发布全球首款三折屏手机Mate XT10.2英寸大屏起售价19999元预约超500万。</div>
</li>
<li class="flex items-start">
<svg class="w-4 h-4 mr-3 mt-1 text-red-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
<div><strong class="text-red-300">未来引爆点 (2026年预期):</strong> 苹果将发布首款折叠iPhone预计首年出货量达1000-1500万部被视为引爆产业链的确定性趋势。</div>
</li>
</ul>
</div>
<!-- 市场规模与预测 -->
<div class="bento-item lg:bento-item-span-5 glass-card rounded-3xl p-6 flex flex-col">
<h3 class="text-xl font-bold mb-4 text-violet-300 subtle-glow">市场规模与预测</h3>
<div id="shipment-chart" class="w-full h-64 lg:h-full flex-grow"></div>
</div>
<!-- 核心驱动力 -->
<div class="bento-item lg:bento-item-span-4 glass-card rounded-3xl p-6">
<h3 class="text-xl font-bold mb-4 text-violet-300 subtle-glow">核心驱动力</h3>
<ul class="space-y-3 text-sm">
<li><strong class="text-cyan-400">场景革命:</strong> 华为Mate XT 10.2英寸大屏,从“电子玩具”向“生产力工具”转变。</li>
<li><strong class="text-cyan-400">成本下降:</strong> 国产化替代凯盛UTG和良率提升华为nova Flip下探至5000元价位。</li>
<li><strong class="text-cyan-400">巨头入局:</strong> 苹果2026年入局预期带来千万级增量重塑供应链。</li>
</ul>
</div>
<!-- 预期差分析 -->
<div class="bento-item lg:bento-item-span-4 glass-card rounded-3xl p-6">
<h3 class="text-xl font-bold mb-4 text-violet-300 subtle-glow">预期差分析</h3>
<ul class="space-y-3 text-sm">
<li><strong class="text-amber-400">盈利分化:</strong> 华为毛利高达80-100%荣耀约50%其他安卓品牌低于30%。投资华为链>其他。</li>
<li><strong class="text-amber-400">出货量预测矛盾:</strong> 华为三折叠备货量80万 vs 10万24年总出货1000万 vs 500万+,存在过度乐观风险。</li>
<li><strong class="text-amber-400">苹果技术路线:</strong> 或采用更复杂的“多级多连杆”铰链,成本更高(~$110),对精密制造和新材料要求远超安卓。</li>
</ul>
</div>
<!-- 市场竞争格局 -->
<div class="bento-item lg:bento-item-span-4 glass-card rounded-3xl p-6 flex flex-col">
<h3 class="text-xl font-bold mb-4 text-violet-300 subtle-glow">市场竞争格局 (中国)</h3>
<div id="market-share-chart" class="w-full h-48 lg:h-full flex-grow"></div>
</div>
</section>
<!-- 产业链与核心公司深度剖析 -->
<section x-data="{ tab: 'chain' }" class="glass-card rounded-3xl p-8">
<div class="flex border-b border-white/10 mb-6">
<button @click="tab = 'chain'" :class="{ 'border-violet-400 text-violet-300': tab === 'chain', 'border-transparent text-gray-400': tab !== 'chain' }" class="py-2 px-4 border-b-2 font-medium transition-colors">产业链图谱与核心玩家</button>
<button @click="tab = 'path'" :class="{ 'border-violet-400 text-violet-300': tab === 'path', 'border-transparent text-gray-400': tab !== 'path' }" class="py-2 px-4 border-b-2 font-medium transition-colors">未来发展路径</button>
<button @click="tab = 'risks'" :class="{ 'border-violet-400 text-violet-300': tab === 'risks', 'border-transparent text-gray-400': tab !== 'risks' }" class="py-2 px-4 border-b-2 font-medium transition-colors">潜在风险与挑战</button>
</div>
<div x-show="tab === 'chain'" class="space-y-6">
<div>
<h4 class="font-bold text-lg mb-2 text-cyan-300">产业链图谱</h4>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 text-sm">
<div class="bg-black/20 p-4 rounded-xl">
<h5 class="font-semibold text-gray-200 mb-2">上游:核心材料与零部件</h5>
<p><strong class="text-gray-300">盖板材料:</strong> UTG (凯盛科技), CPI (国风新材)</p>
<p><strong class="text-gray-300">柔性面板:</strong> 京东方, 维信诺</p>
<p><strong class="text-gray-300">铰链系统:</strong> MIM件 (东睦股份, 精研科技), 液态金属 (宜安科技)</p>
<p><strong class="text-gray-300">电池:</strong> 高能量密度电池 (珠海冠宇)</p>
</div>
<div class="bg-black/20 p-4 rounded-xl">
<h5 class="font-semibold text-gray-200 mb-2">中游:模组组装与设备</h5>
<p><strong class="text-gray-300">铰链组装:</strong> 东睦股份, 精研科技</p>
<p><strong class="text-gray-300">设备:</strong> 贴合设备 (联得装备), 焊接设备 (联赢激光)</p>
</div>
<div class="bg-black/20 p-4 rounded-xl">
<h5 class="font-semibold text-gray-200 mb-2">下游:终端品牌</h5>
<p><strong class="text-gray-300">当前领导者:</strong> 华为</p>
<p><strong class="text-gray-300">全球巨头:</strong> 三星, 荣耀, 小米</p>
<p><strong class="text-gray-300">未来颠覆者 (预期):</strong> 苹果</p>
</div>
</div>
</div>
<div>
<h4 class="font-bold text-lg mb-2 text-cyan-300">核心玩家对比</h4>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 text-sm">
<div class="border border-violet-500/30 p-4 rounded-lg">
<h5 class="font-bold text-violet-300">领导者 (华为链)</h5>
<p><strong class="text-gray-200">东睦股份:</strong> 华为MIM核心供应商铰链模组一体化能力强消费电子业务收入同比+101.11%,高增长逻辑验证。</p>
</div>
<div class="border border-fuchsia-500/30 p-4 rounded-lg">
<h5 class="font-bold text-fuchsia-300">追赶者 (泛安卓链)</h5>
<p><strong class="text-gray-200">精研科技:</strong> 客户覆盖三星、小米等MIM技术深厚在行业整体增长中分羹但面临利润压缩风险。</p>
</div>
<div class="border border-amber-500/30 p-4 rounded-lg">
<h5 class="font-bold text-amber-300">潜力颠覆者 (苹果链预期)</h5>
<p><strong class="text-gray-200">联得装备:</strong> 苹果折叠屏UTG贴合设备“独供”预期逻辑纯粹业绩弹性巨大。</p>
</div>
<div class="border border-green-500/30 p-4 rounded-lg">
<h5 class="font-bold text-green-300">国产替代核心</h5>
<p><strong class="text-gray-200">凯盛科技:</strong> 国内唯一UTG“全国产化产业链”企业打破海外垄断成本优势明显成长空间广阔。</p>
</div>
</div>
</div>
</div>
<div x-show="tab === 'path'" class="prose prose-invert max-w-none prose-p:text-gray-300 prose-strong:text-cyan-400">
<ol>
<li><strong>第一阶段 (当前-2025年): 安卓系创新深化期。</strong>
<p>由华为引领的三折叠、卷轴屏等新形态探索将持续,同时竞争将驱动价格下探,市场渗透率稳步提升。此阶段的核心是验证国产供应链的技术实力和成本控制能力。</p>
</li>
<li><strong>第二阶段 (2026-2027年): 苹果入局引爆期。</strong>
<p>苹果的加入将带来行业规模的跃迁全球出货量有望冲击1亿台大关。产业链将围绕苹果的技术标准进行重构具备核心技术、稳定良率和规模化生产能力的厂商将迎来黄金发展期。</p>
</li>
<li><strong>第三阶段 (2028年以后): 全形态成熟普及期。</strong>
<p>折叠技术将从手机拓展至平板、PC等更多终端成本大幅降低折叠屏有望成为主流电子消费品的标准形态之一。届时竞争焦点将从硬件创新转向软件生态和应用场景的完善。</p>
</li>
</ol>
</div>
<div x-show="tab === 'risks'" class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<h4 class="font-bold text-lg mb-2 text-red-300">技术风险</h4>
<ul class="list-disc list-inside space-y-2 text-gray-400">
<li><strong class="text-gray-200">耐用性瓶颈:</strong> 三折叠对屏幕和铰链的力学性能、抗疲劳性提出指数级增长的要求,折痕与失灵风险仍是核心挑战。</li>
<li><strong class="text-gray-200">良率与成本:</strong> UTG良率(70%-84%)直接影响成本,更复杂的三折叠屏和苹果高标准铰链,初期良率爬坡存在不确定性。</li>
</ul>
</div>
<div>
<h4 class="font-bold text-lg mb-2 text-red-300">商业化与竞争风险</h4>
<ul class="list-disc list-inside space-y-2 text-gray-400">
<li><strong class="text-gray-200">高昂售价:</strong> 华为Mate XT近2万元的售价仍是小众产品大规模普及需价格下探至5000-8000元区间考验降本能力。</li>
<li><strong class="text-gray-200">软件生态适配:</strong> 大部分APP对折叠屏适配不完善影响用户体验可能制约购买意愿。</li>
<li><strong class="text-gray-200">K型分化:</strong> 市场竞争加剧,除华为外,部分安卓厂商出货量不足百万,增收不增利,其供应链风险高。</li>
</ul>
</div>
</div>
</section>
<!-- 明星个股异动分析 -->
<section>
<h2 class="text-2xl font-bold mb-6 text-center gradient-text">明星个股异动追踪</h2>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
<div class="glass-card rounded-3xl p-6 glow-border">
<div class="flex items-center mb-4">
<h3 class="text-xl font-bold text-amber-300">联得装备 (300545)</h3>
<span class="ml-auto text-sm bg-amber-500/20 text-amber-300 px-3 py-1 rounded-full">苹果链预期</span>
</div>
<p class="text-sm text-gray-400 mb-2"><strong>核心逻辑:</strong> 被研报指认为“苹果折叠屏UTG贴合设备独供”且苹果2026年出货预期上修至1500万部直接催化股价。</p>
<p class="text-sm text-gray-400"><strong>叠加因素:</strong> 公司在三折屏供应链已形成订单,并在固态电池、半导体设备领域有布局,多重热门概念傍身,业绩弹性预期强。</p>
</div>
<div class="glass-card rounded-3xl p-6 glow-border">
<div class="flex items-center mb-4">
<h3 class="text-xl font-bold text-violet-300">昀冢科技 (688260)</h3>
<span class="ml-auto text-sm bg-violet-500/20 text-violet-300 px-3 py-1 rounded-full">订单落地</span>
</div>
<p class="text-sm text-gray-400 mb-2"><strong>核心逻辑:</strong> 公告获国内头部厂商折叠屏Hinge模组定点生命周期采购额≥9.2亿元,强力验证了铰链环节的高景气度和价值量。</p>
<p class="text-sm text-gray-400"><strong>叠加因素:</strong> 工信部政策明确Hinge设备投资补贴公司是国内唯一通过华为可靠性测试的MIM供应商订单、政策、资金形成共振。</p>
</div>
</div>
</section>
<!-- 股票列表 -->
<section>
<h2 class="text-2xl font-bold mb-6 text-center gradient-text">相关产业链公司梳理</h2>
<div class="overflow-x-auto glass-card rounded-3xl p-1">
<table class="table table-zebra-zebra w-full text-sm">
<thead class="text-gray-200">
<tr class="border-b border-white/20">
<th class="p-4 bg-transparent">股票名称</th>
<th class="p-4 bg-transparent">产业链环节</th>
<th class="p-4 bg-transparent">核心逻辑 / 业务</th>
</tr>
</thead>
<tbody>
<tr class="border-b border-white/10"><td colspan="3" class="font-bold p-2 bg-slate-800/50 text-cyan-300">盖板玻璃</td></tr>
<tr class="border-b border-white/10 hover:bg-white/5 transition-colors">
<td class="p-4"><a href="https://valuefrontier.cn/company?scode=600552" target="_blank" class="font-bold hover:text-cyan-400">凯盛科技 (600552)</a></td>
<td class="p-4"><span class="badge badge-outline border-cyan-400 text-cyan-400">UTG</span></td>
<td class="p-4">国内唯一覆盖“高强玻璃-极薄薄化-高精度后加工”的全国产化UTG产业链国产替代核心。</td>
</tr>
<tr class="border-b border-white/10 hover:bg-white/5 transition-colors">
<td class="p-4"><a href="https://valuefrontier.cn/company?scode=300088" target="_blank" class="font-bold hover:text-cyan-400">长信科技 (300088)</a></td>
<td class="p-4"><span class="badge badge-outline border-cyan-400 text-cyan-400">UTG</span></td>
<td class="p-4">UTG领域技术储备充分为OPPO Find N3 Flip独供UTG产品。</td>
</tr>
<tr class="border-b border-white/10 hover:bg-white/5 transition-colors">
<td class="p-4"><a href="https://valuefrontier.cn/company?scode=300433" target="_blank" class="font-bold hover:text-cyan-400">蓝思科技 (300433)</a></td>
<td class="p-4"><span class="badge badge-outline border-cyan-400 text-cyan-400">UTG</span></td>
<td class="p-4">提供UTG玻璃、CPI薄膜及金属组件预期切入苹果折叠屏供应链。</td>
</tr>
<tr class="border-b border-white/10 hover:bg-white/5 transition-colors">
<td class="p-4"><a href="https://valuefrontier.cn/company?scode=688323" target="_blank" class="font-bold hover:text-cyan-400">瑞华泰 (688323)</a></td>
<td class="p-4"><span class="badge badge-outline border-sky-400 text-sky-400">CPI</span></td>
<td class="p-4">合作研发用于折叠屏盖板的CPI薄膜已完成项目结题并获发明专利。</td>
</tr>
<tr class="border-b border-white/10"><td colspan="3" class="font-bold p-2 bg-slate-800/50 text-violet-300">铰链</td></tr>
<tr class="border-b border-white/10 hover:bg-white/5 transition-colors">
<td class="p-4"><a href="https://valuefrontier.cn/company?scode=600114" target="_blank" class="font-bold hover:text-violet-400">东睦股份 (600114)</a></td>
<td class="p-4"><span class="badge badge-outline border-violet-400 text-violet-400">MIM / 液态金属</span></td>
<td class="p-4">华为MIM核心供应商软磁龙头具备铰链组装产线深度受益华为放量。</td>
</tr>
<tr class="border-b border-white/10 hover:bg-white/5 transition-colors">
<td class="p-4"><a href="https://valuefrontier.cn/company?scode=300709" target="_blank" class="font-bold hover:text-violet-400">精研科技 (300709)</a></td>
<td class="p-4"><span class="badge badge-outline border-violet-400 text-violet-400">MIM</span></td>
<td class="p-4">MIM工艺龙头具备零部件到铰链组装一体化能力客户覆盖H、荣耀、OV、小米。</td>
</tr>
<tr class="border-b border-white/10 hover:bg-white/5 transition-colors">
<td class="p-4"><a href="https://valuefrontier.cn/company?scode=300328" target="_blank" class="font-bold hover:text-violet-400">宜安科技 (300328)</a></td>
<td class="p-4"><span class="badge badge-outline border-purple-400 text-purple-400">液态金属</span></td>
<td class="p-4">液态金属产品已在折叠手机铰链上批量应用,为多家知名终端供货。</td>
</tr>
<tr class="border-b border-white/10 hover:bg-white/5 transition-colors">
<td class="p-4"><a href="https://valuefrontier.cn/company?scode=300521" target="_blank" class="font-bold hover:text-violet-400">爱司凯 (300521)</a></td>
<td class="p-4"><span class="badge badge-outline border-fuchsia-400 text-fuchsia-400">3D打印 / 轴盖</span></td>
<td class="p-4">荣耀Magic V2轴盖采用钛合金3D打印工艺公司致力于扩大3D金属打印业务。</td>
</tr>
<tr class="border-b border-white/10"><td colspan="3" class="font-bold p-2 bg-slate-800/50 text-amber-300">显示屏 & 材料</td></tr>
<tr class="border-b border-white/10 hover:bg-white/5 transition-colors">
<td class="p-4">京东方</td>
<td class="p-4"><span class="badge badge-outline border-amber-400 text-amber-400">柔性AMOLED</span></td>
<td class="p-4">国内面板龙头为华为等头部品牌供应柔性OLED屏幕。</td>
</tr>
<tr class="border-b border-white/10 hover:bg-white/5 transition-colors">
<td class="p-4"><a href="https://valuefrontier.cn/company?scode=002387" target="_blank" class="font-bold hover:text-amber-400">维信诺 (002387)</a></td>
<td class="p-4"><span class="badge badge-outline border-amber-400 text-amber-400">柔性AMOLED</span></td>
<td class="p-4">国内主要柔性OLED供应商为荣耀、小米等品牌供货。</td>
</tr>
<tr class="border-b border-white/10 hover:bg-white/5 transition-colors">
<td class="p-4"><a href="https://valuefrontier.cn/company?scode=301387" target="_blank" class="font-bold hover:text-amber-400">光大同创 (301387)</a></td>
<td class="p-4"><span class="badge badge-outline border-orange-400 text-orange-400">碳纤维</span></td>
<td class="p-4">碳纤维相关产品获部分折叠屏客户认可,用于轻量化结构件。</td>
</tr>
</tbody>
</table>
</div>
</section>
</main>
<footer class="text-center mt-16 text-xs text-gray-500">
<p>&copy; 2024 北京价值前沿科技有限公司. All Rights Reserved.</p>
<p>本报告由AI投研模型生成所有数据和分析仅供参考不构成任何投资建议。市场有风险投资需谨慎。</p>
</footer>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
// Shipment Chart
var shipmentChartDom = document.getElementById('shipment-chart');
var shipmentChart = echarts.init(shipmentChartDom, 'dark');
var shipmentOption = {
backgroundColor: 'transparent',
tooltip: {
trigger: 'axis',
axisPointer: { type: 'cross', label: { backgroundColor: '#6a7985' } }
},
legend: {
data: ['中国出货量', '全球出货量'],
textStyle: { color: '#ccc' }
},
grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
xAxis: {
type: 'category',
boundaryGap: false,
data: ['2022', '2023', '2024(E)', '2025(E)', '2027(E)'],
axisLine: { lineStyle: { color: 'rgba(255,255,255,0.2)' } }
},
yAxis: {
type: 'value',
axisLabel: { formatter: '{value}万部' },
axisLine: { lineStyle: { color: 'rgba(255,255,255,0.2)' } },
splitLine: { lineStyle: { color: 'rgba(255,255,255,0.1)' } }
},
series: [
{
name: '中国出货量',
type: 'line',
stack: '总量',
smooth: true,
lineStyle: { width: 2 },
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0, color: 'rgba(139, 92, 246, 0.5)'
}, {
offset: 1, color: 'rgba(139, 92, 246, 0.1)'
}])
},
emphasis: { focus: 'series' },
data: [null, 701, 1000, 1700, null],
itemStyle: { color: '#8B5CF6' }
},
{
name: '全球出货量',
type: 'line',
stack: '总量',
smooth: true,
lineStyle: { width: 2 },
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0, color: 'rgba(34, 211, 238, 0.5)'
}, {
offset: 1, color: 'rgba(34, 211, 238, 0.1)'
}])
},
emphasis: { focus: 'series' },
data: [1310, 2100, 2500, 5500, 10000],
itemStyle: { color: '#22D3EE' }
}
]
};
shipmentChart.setOption(shipmentOption);
// Market Share Chart
var marketShareChartDom = document.getElementById('market-share-chart');
var marketShareChart = echarts.init(marketShareChartDom, 'dark');
var marketShareOption = {
backgroundColor: 'transparent',
tooltip: { trigger: 'item' },
legend: {
orient: 'vertical',
left: 'left',
textStyle: { color: '#ccc' }
},
series: [
{
name: '中国市场份额 (2024 H1)',
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: { show: false, position: 'center' },
emphasis: {
label: { show: true, fontSize: '20', fontWeight: 'bold' }
},
labelLine: { show: false },
data: [
{ value: 43, name: '华为' },
{ value: 18, name: '荣耀' },
{ value: 12, name: '三星' },
{ value: 27, name: '其他' }
],
color: ['#8B5CF6', '#d946ef', '#22D3EE', '#4A5568']
}
]
};
marketShareChart.setOption(marketShareOption);
window.addEventListener('resize', function() {
shipmentChart.resize();
marketShareChart.resize();
});
});
</script>
</body>
</html>