Files
vf_react/public/htmls/叠层钙钛矿.html
2025-12-05 13:29:18 +08:00

460 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>深度行研报告:叠层钙钛矿</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: #020418;
background-image:
radial-gradient(ellipse 20% 40% at 20% 20%, rgba(100, 100, 255, 0.2), transparent),
radial-gradient(ellipse 20% 40% at 80% 80%, rgba(255, 100, 200, 0.2), transparent);
background-attachment: fixed;
color: #e0e6f0;
}
.glass-card {
background: rgba(15, 23, 42, 0.5);
backdrop-filter: blur(16px) saturate(180%);
-webkit-backdrop-filter: blur(16px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.125);
border-radius: 1.5rem; /* 极致圆角 */
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}
.glow-text {
text-shadow: 0 0 8px rgba(59, 130, 246, 0.8), 0 0 20px rgba(139, 92, 246, 0.5);
}
.glow-border {
border: 1px solid;
border-image-slice: 1;
border-image-source: linear-gradient(to right, #3b82f6, #8b5cf6, #ec4899);
}
.bento-grid {
display: grid;
gap: 1.5rem;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.bento-item {
transition: all 0.3s ease;
}
.bento-item:hover {
transform: translateY(-5px) scale(1.02);
box-shadow: 0 10px 40px 0 rgba(0, 0, 0, 0.5);
}
.timeline {
position: relative;
padding-left: 2.5rem;
}
.timeline::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 2px;
background-image: linear-gradient(to bottom, #3b82f6, #8b5cf6, #ec4899);
}
.timeline-item {
position: relative;
margin-bottom: 2rem;
}
.timeline-item::before {
content: '';
position: absolute;
left: -2.5rem;
top: 0.25rem;
width: 1rem;
height: 1rem;
border-radius: 50%;
background-color: #8b5cf6;
border: 3px solid #020418;
box-shadow: 0 0 10px #8b5cf6;
}
</style>
</head>
<body class="min-h-screen p-4 sm:p-8">
<div class="max-w-7xl mx-auto space-y-8">
<!-- Header -->
<header class="text-center p-8 glass-card">
<h1 class="text-4xl md:text-6xl font-bold glow-text bg-clip-text text-transparent bg-gradient-to-r from-blue-400 via-purple-400 to-pink-400">
叠层钙钛矿
</h1>
<p class="mt-4 text-xl text-slate-300">深度行研报告</p>
<p class="mt-2 text-xs text-slate-500">
北京价值前沿科技有限公司 AI投研agent“价小前投研” 进行投研呈现 | 本报告为AI合成数据投资需谨慎。
</p>
</header>
<!-- Insight Section -->
<main class="space-y-8">
<!-- Core Viewpoint Summary -->
<section class="glass-card p-6">
<h2 class="text-2xl font-bold glow-text mb-6">1. 核心观点摘要</h2>
<div class="text-slate-300 space-y-4">
<p>叠层钙钛矿正处在<strong class="text-cyan-400">从实验室走向规模化量产的产业化初期</strong>,其核心驱动力在于<strong class="text-cyan-400">突破现有晶硅电池的效率极限29.4%),以实现光伏发电成本的根本性下降</strong></p>
<p>当前,以“四端叠层”为代表的过渡性方案正率先实现商业化应用,而长期潜力更大的“两端叠层”技术仍在攻关,整个产业即将迎来由示范线转向量产线的关键拐点。</p>
</div>
</section>
<!-- Bento Grid Highlights -->
<section class="bento-grid">
<div class="glass-card p-6 bento-item md:col-span-2">
<h3 class="font-bold text-lg text-fuchsia-400 glow-text mb-2">核心驱动力:效率驱动的代际替代</h3>
<p class="text-slate-400">叠层电池理论效率高达 <span class="text-2xl font-bold text-white">44%</span>,远超晶硅极限 <span class="text-2xl font-bold text-white">29.4%</span>。更高的效率直接降低度电成本LCOE是驱动技术变革的根本力量。</p>
</div>
<div class="glass-card p-6 bento-item">
<h3 class="font-bold text-lg text-fuchsia-400 glow-text mb-2">产业化节点</h3>
<p class="text-slate-400"><span class="font-bold text-white">2025年</span>被视为GW级产线落地和百MW级出货的关键年份。</p>
</div>
<div class="glass-card p-6 bento-item">
<h3 class="font-bold text-lg text-fuchsia-400 glow-text mb-2">关键风险</h3>
<p class="text-slate-400">稳定性与寿命能否达到 <span class="font-bold text-white">25年</span> 行业标准,是钙钛矿技术的“阿喀琉斯之踵”。</p>
</div>
<div class="glass-card p-6 bento-item md:col-span-2">
<h3 class="font-bold text-lg text-fuchsia-400 glow-text mb-2">技术路线</h3>
<p class="text-slate-400"><strong class="text-white">四端叠层(4T)</strong>:工艺相对简单,是短期商业化主流。<br><strong class="text-white">两端叠层(2T)</strong>:效率潜力更大,成本更低,是长期目标,但技术挑战巨大。</p>
</div>
<div class="glass-card p-6 bento-item">
<h3 class="font-bold text-lg text-fuchsia-400 glow-text mb-2">投资价值环节</h3>
<p class="text-slate-400">设备商作为“卖铲人”,业绩确定性最高,将率先受益于行业资本开支周期。</p>
</div>
</section>
<!-- Efficiency Evolution Chart -->
<section class="glass-card p-6">
<h2 class="text-2xl font-bold glow-text mb-6">效率进化史:实验室记录与产业化目标</h2>
<div id="efficiencyChart" style="width: 100%; height: 400px;"></div>
</section>
<!-- Concept Logic & Market Cognition -->
<section class="glass-card p-6" x-data="{ open: false }">
<h2 class="text-2xl font-bold glow-text mb-4 cursor-pointer" @click="open = !open">2. 概念的核心逻辑与市场认知分析 <span x-text="open ? '(-)' : '(+)'"></span></h2>
<div class="prose max-w-none prose-invert prose-p:text-slate-300 prose-strong:text-cyan-400 prose-headings:text-slate-100 space-y-4" x-show="open" x-collapse>
<h4>核心驱动力:效率驱动的代际替代</h4>
<ol>
<li><strong>物理极限突破</strong>当前主流的N型晶硅电池TOPCon, HJT效率已逼近其理论极限29.4%。而钙钛矿与晶硅结合的叠层电池理论效率高达44%打开了全新的效率提升空间。研报指出叠层电池效率7年提升10.3个百分点远超同期晶硅的0.8个百分点。</li>
<li><strong>经济价值驱动</strong>更高的转换效率将直接降低电站的土地、支架、线缆等BOS成本最终降低度电成本LCOE。路演信息指出当叠层效率达到28%+且成本可控时,将颠覆晶硅的主导地位。</li>
<li><strong>政策与资本双重加持</strong>:工信部等国家部委的政策明确支持,以及宁德时代、京东方等产业资本的跨界布局,共同验证了该技术路线的战略重要性。</li>
</ol>
<h4>市场热度与情绪</h4>
<p>市场对叠层钙钛矿概念表现出极高的热度和普遍的乐观情绪。效率纪录被频繁刷新的新闻、券商“下一代主流技术”的高度评价,以及二级市场上任何实质性利好都能迅速点燃情绪,反映出市场的狂热。</p>
<h4>预期差分析:风险与机遇</h4>
<ul>
<li><strong>实验室效率 vs. 量产组件效率</strong>市场普遍关注的是实验室小面积电池33.9%的惊人效率但当前即将量产的大面积组件效率目标普遍在26%-27%。这近7个百分点的差距背后是巨大的产业化挑战。</li>
<li><strong>四端4T方案 vs. 两端2T方案</strong>:市场可能模糊了两种技术路线的区别。当前能够快速商业化的是工艺相对简单的四端机械叠层方案。而效率更高、成本潜力更大的两端一体化叠层方案仍面临诸多技术瓶颈。</li>
<li><strong>寿命与稳定性问题</strong>对效率的关注远超对寿命的讨论。而寿命需达20-25年、良率、稳定性是商业化的核心挑战是市场认知中最容易被忽略的关键风险点。</li>
</ul>
</div>
</section>
<!-- Key Catalysts & Future Path -->
<section class="glass-card p-6">
<h2 class="text-2xl font-bold glow-text mb-6">3. 关键催化剂与未来发展路径</h2>
<div class="grid md:grid-cols-2 gap-8">
<div>
<h3 class="text-lg font-semibold text-blue-400 mb-4">近期催化剂 (未来3-6个月)</h3>
<ul class="list-disc list-inside space-y-2 text-slate-300">
<li><strong>GW级产线投产与数据验证</strong>:协鑫光电(2025 Q2)与宁德时代(2025 Q1)的GW级产线其量产效率、良率和成本数据将成为行业风向标。</li>
<li><strong>头部晶硅厂商的中试线突破</strong>:通威、隆基等对“两端叠层”技术的验证结果,将影响行业对终极技术路线的信心。</li>
<li><strong>标志性订单或补贴政策落地</strong>:大额合同或进入补贴目录是验证商业模式闭环的最直接催化剂。</li>
</ul>
</div>
<div>
<h3 class="text-lg font-semibold text-purple-400 mb-4">长期发展路径</h3>
<ol class="list-decimal list-inside space-y-2 text-slate-300">
<li><strong>近期 (2024-2025)</strong>: 四端叠层商业化元年实现百MW级出货效率稳定在26%-27%。</li>
<li><strong>中期 (2026-2028)</strong>: 四端叠层进入GW级规模化生产。两端叠层技术在中试线取得关键突破。</li>
<li><strong>远期 (2028以后)</strong>: 两端叠层技术成熟并成为市场主流,最终可能向“全钙钛矿叠层”演进。</li>
</ol>
</div>
</div>
</section>
<!-- Industry Chain Analysis -->
<section class="glass-card p-6">
<h2 class="text-2xl font-bold glow-text mb-6">4. 产业链与核心公司深度剖析</h2>
<div class="grid md:grid-cols-3 gap-6">
<div class="p-4 bg-slate-900/50 rounded-lg">
<h4 class="font-bold text-pink-400">上游:设备与材料</h4>
<p class="text-sm text-slate-400"><strong>核心设备:</strong> 迈为股份, 捷佳伟创 (整线); 奥来德, 微导纳米 (镀膜); 德龙激光 (激光)。<br><strong>核心材料:</strong> 赛伍技术 (光转膜); 奥来德, 万润股份 (载流子材料)。</p>
</div>
<div class="p-4 bg-slate-900/50 rounded-lg">
<h4 class="font-bold text-pink-400">中游:电池与组件</h4>
<p class="text-sm text-slate-400"><strong>钙钛矿先锋:</strong> 协鑫光电, 极电光能, 纤纳光电。<br><strong>晶硅巨头:</strong> 隆基绿能, 通威股份, 晶科能源。<br><strong>跨界布局者:</strong> 宁德时代, 京东方。</p>
</div>
<div class="p-4 bg-slate-900/50 rounded-lg">
<h4 class="font-bold text-pink-400">下游:电站应用</h4>
<p class="text-sm text-slate-400">光伏电站开发与运营商,如华能新能源等,是新技术的最终买家和验证者。</p>
</div>
</div>
<div class="mt-6">
<h4 class="font-bold text-lg text-cyan-300 mb-3">核心玩家对比</h4>
<ul class="space-y-3 text-slate-300">
<li><strong>领导者 (产业化先锋) - 协鑫光电</strong>: 逻辑最纯粹,专注于钙钛矿技术,在四端叠层大面积组件的产业化进度上明确领先。</li>
<li><strong>追赶者 (技术储备雄厚) - 隆基绿能、通威股份</strong>: 晶硅龙头,拥有最强研发实力和资金优势,手握效率世界纪录,是长期最有力的竞争者。</li>
<li><strong>设备龙头 (行业风向标) - 捷佳伟创、迈为股份</strong>: 具备叠层整线设备供应能力,其订单情况是判断产业投资热度的“金丝雀”。</li>
<li><strong>潜力股 (差异化逻辑) - 京东方</strong>: 独特的“OLED技术协同”逻辑可将在显示领域积累的技术和供应链快速复用。</li>
</ul>
</div>
</section>
<!-- Key Events Timeline -->
<section class="glass-card p-6">
<h2 class="text-2xl font-bold glow-text mb-6">0. 关键事件时间轴</h2>
<div class="timeline">
<div class="timeline-item">
<p class="font-bold text-blue-300">2018-2020</p>
<p class="text-slate-300">牛津光伏连续刷新小面积叠层电池效率纪录 (27.3% → 29.5%)。</p>
</div>
<div class="timeline-item">
<p class="font-bold text-blue-300">2023年11月</p>
<p class="text-slate-300">隆基绿能自主研发晶硅-钙钛矿叠层电池效率达到 <strong class="text-white">33.9%</strong>,创造新世界纪录。</p>
</div>
<div class="timeline-item">
<p class="font-bold text-blue-300">2024年4月</p>
<p class="text-slate-300">协鑫光电在1.7m²大尺寸叠层组件上实现 <strong class="text-white">26.36%</strong> 效率,商业化进展显著。</p>
</div>
<div class="timeline-item">
<p class="font-bold text-blue-300">2024年11月29日</p>
<p class="text-slate-300">纤纳光电向三峡能源项目出货500kW叠层组件被视为全球首次商业化应用。</p>
</div>
<div class="timeline-item">
<p class="font-bold text-blue-300">2025年 Q1/Q2</p>
<p class="text-slate-300">宁德时代、协鑫光电等关键玩家的GW级产线进入实质性落地阶段产业化加速。</p>
</div>
<div class="timeline-item">
<p class="font-bold text-blue-300">2026年</p>
<p class="text-slate-300">被路演专家视为叠层钙钛矿技术的关键放量年。</p>
</div>
</div>
</section>
<!-- Raw Data Sections -->
<div class="space-y-4">
<div class="collapse collapse-plus glass-card">
<input type="checkbox" />
<div class="collapse-title text-xl font-medium glow-text">原始数据摘要:新闻</div>
<div class="collapse-content prose max-w-none prose-invert prose-p:text-slate-400 prose-strong:text-white">
<p><strong>技术突破</strong>: 多家机构刷新效率记录最高达34.78% (通威)。新加坡国立大学研制出耐热叠层电池65℃下运行1200小时性能不变。天合光能在210mm工业级尺寸上效率首破31%。</p>
<p><strong>产业化</strong>: 叠层路线被认为是下一代主流晶硅大厂倾向此路线。GW级产线逐步落地组件面积和效率显著提升。SNEC展会反馈叠层路线认可度高态度积极。</p>
<p><strong>配套材料</strong>: 光转膜(福斯特、赛伍技术)已实现小批量交付,用于提升组件效率和稳定性。</p>
<p><strong>政策支持</strong>: 工信部、河南省等国家及地方政策明确聚焦和推动叠层光伏技术发展。</p>
</div>
</div>
<div class="collapse collapse-plus glass-card">
<input type="checkbox" />
<div class="collapse-title text-xl font-medium glow-text">原始数据摘要:路演</div>
<div class="collapse-content prose max-w-none prose-invert prose-p:text-slate-400 prose-strong:text-white">
<p><strong>效率共识</strong>: 实验室效率普遍突破33% (隆基33.9%)量产组件目标26%-27%。</p>
<p><strong>技术路线</strong>: <strong>四端叠层</strong>是短期主流和过渡方案 (协鑫已规划500MW产线)<strong>两端叠层</strong>是长期目标,效率潜力大但工艺挑战多 (如绒面镀膜、窄带隙材料稳定性)。</p>
<p><strong>关键玩家</strong>: 协鑫、隆基、通威、极电光能布局深入;宁德时代、京东方跨界推进;捷佳伟创等设备商已具备整线能力。</p>
<p><strong>时间节点</strong>: 2025年为GW级产线落地和百MW级出货关键年2026年可能成为大规模放量转折点。</p>
<p><strong>核心挑战</strong>: 量产良率、寿命认证、成本控制、设备瓶颈是主要障碍。</p>
</div>
</div>
<div class="collapse collapse-plus glass-card">
<input type="checkbox" />
<div class="collapse-title text-xl font-medium glow-text">原始数据摘要:研报</div>
<div class="collapse-content prose max-w-none prose-invert prose-p:text-slate-400 prose-strong:text-white">
<p><strong>必要性</strong>: 晶硅组件价格走低,单节钙钛矿性价比逻辑难兑现,叠层成为更可行的路线,与晶硅呈现代际差异。</p>
<p><strong>技术特点</strong>: HJT与钙钛矿低温工艺适配性更高工艺路线更相融。蒸镀工艺在叠层生产中不可或缺。</p>
<p><strong>商业化突破</strong>: 纤纳光电已实现全球首次四端子叠层组件商业化出货(500kW)。</p>
<p><strong>产业链</strong>: 晶硅头部、钙钛矿初创、跨界龙头纷纷布局。设备端迈为、捷佳和材料端奥来德、万润均有公司卡位。与OLED产业在技术、设备、材料上有较强协同效应如京东方</p>
</div>
</div>
</div>
<!-- Stock Tables -->
<section class="space-y-8">
<div class="glass-card p-6">
<h2 class="text-2xl font-bold glow-text mb-6">关联个股:产业链核心标的</h2>
<div class="overflow-x-auto">
<table class="table table-sm">
<thead class="text-base text-slate-200">
<tr>
<th>股票名称</th>
<th>股票代码</th>
<th>核心逻辑</th>
<th>标签</th>
</tr>
</thead>
<tbody>
<tr class="hover:bg-slate-700/50"><td>迈为股份</td><td><a href="https://valuefrontier.cn/company?scode=300751" target="_blank" class="link link-hover text-blue-400">300751</a></td><td>提供钙钛矿叠层电池生产设备整线、ALD设备等。拟投资21亿元用于相关设备生产。</td><td>整线设备供应商</td></tr>
<tr class="hover:bg-slate-700/50"><td>捷佳伟创</td><td><a href="https://valuefrontier.cn/company?scode=300724" target="_blank" class="link link-hover text-blue-400">300724</a></td><td>提供钙钛矿及叠层电池整线设备2025年中标头部企业钙钛矿项目PVD、RPD订单。</td><td>整线设备供应商</td></tr>
<tr class="hover:bg-slate-700/50"><td>京山轻机</td><td><a href="https://valuefrontier.cn/company?scode=000821" target="_blank" class="link link-hover text-blue-400">000821</a></td><td>提供单结及叠层设备整体解决方案已向头部厂商交付首台GW级溅镀设备。</td><td>整线设备供应商</td></tr>
<tr class="hover:bg-slate-700/50"><td>奥来德</td><td><a href="https://valuefrontier.cn/company?scode=688378" target="_blank" class="link link-hover text-blue-400">688378</a></td><td>提供钙钛矿蒸镀设备,设备性能指标达到客户要求。</td><td>镀膜设备供应商</td></tr>
<tr class="hover:bg-slate-700/50"><td>微导纳米</td><td><a href="https://valuefrontier.cn/company?scode=688147" target="_blank" class="link link-hover text-blue-400">688147</a></td><td>覆盖MW级整线主要工艺设备ALD设备获多家客户重复订单。</td><td>镀膜设备供应商</td></tr>
<tr class="hover:bg-slate-700/50"><td>德龙激光</td><td><a href="https://valuefrontier.cn/company?scode=688170" target="_blank" class="link link-hover text-blue-400">688170</a></td><td>提供P0-P4激光设备2023年获得大客户GW级产线部分订单。</td><td>激光设备</td></tr>
<tr class="hover:bg-slate-700/50"><td>大族激光</td><td><a href="https://valuefrontier.cn/company?scode=002008" target="_blank" class="link link-hover text-blue-400">002008</a></td><td>提供激光刻划设备,市占率领先,与协鑫光电等头部客户合作。</td><td>激光设备</td></tr>
<tr class="hover:bg-slate-700/50"><td>杰普特</td><td><a href="https://valuefrontier.cn/company?scode=688025" target="_blank" class="link link-hover text-blue-400">688025</a></td><td>提供激光模切设备配合客户落地GW级产线。</td><td>激光设备</td></tr>
<tr class="hover:bg-slate-700/50"><td>赛伍技术</td><td><a href="https://valuefrontier.cn/company?scode=603212" target="_blank" class="link link-hover text-blue-400">603212</a></td><td>开发适用于叠层钙钛矿的光转膜产品。</td><td>其它</td></tr>
<tr class="hover:bg-slate-700/50"><td>皇氏集团</td><td><a href="https://valuefrontier.cn/company?scode=002329" target="_blank" class="link link-hover text-blue-400">002329</a></td><td>子公司深圳黑晶光电专注于高效叠层太阳能电池研发。</td><td>其它</td></tr>
</tbody>
</table>
</div>
</div>
<div class="glass-card p-6">
<h2 class="text-2xl font-bold glow-text mb-6">涨幅异动分析:市场催化剂案例</h2>
<div class="overflow-x-auto">
<table class="table table-sm">
<thead class="text-base text-slate-200">
<tr>
<th>股票名称</th>
<th>股票代码</th>
<th>异动日期</th>
<th>核心结论与驱动因素</th>
</tr>
</thead>
<tbody>
<tr class="hover:bg-slate-700/50"><td>宝馨科技</td><td><a href="https://valuefrontier.cn/company?scode=002514" target="_blank" class="link link-hover text-blue-400">002514</a></td><td>2025-09-03</td><td class="whitespace-pre-wrap">公告与华能新能源签订52亿元HJT-钙钛矿叠层组件框架合同,叠加补贴新政,资金集中攻击政策主线。</td></tr>
<tr class="hover:bg-slate-700/50"><td>国晟科技</td><td><a href="https://valuefrontier.cn/company?scode=603778" target="_blank" class="link link-hover text-blue-400">603778</a></td><td>2025-07-09</td><td class="whitespace-pre-wrap">能源局首次将钙钛矿叠层组件纳入分布式光伏补贴目录同晚公司公告投建5GW中试线政策与订单共振。</td></tr>
<tr class="hover:bg-slate-700/50"><td>金辰股份</td><td><a href="https://valuefrontier.cn/company?scode=603396" target="_blank" class="link link-hover text-blue-400">603396</a></td><td>2025-11-10</td><td class="whitespace-pre-wrap">COP29将“HJT+钙钛矿叠层1000 GW”写入国际公约公司作为具备HJT整线+叠层中试能力的设备商,订单弹性最大。</td></tr>
<tr class="hover:bg-slate-700/50"><td>金浦钛业</td><td><a href="https://valuefrontier.cn/company?scode=000545" target="_blank" class="link link-hover text-blue-400">000545</a></td><td>2025-09-01</td><td class="whitespace-pre-wrap">因名称与“钙钛矿”关联,在板块热度爆发时,成为典型的题材炒作标的,并非基于基本面。</td></tr>
</tbody>
</table>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="text-center text-xs text-slate-600 py-8">
<p>免责声明本报告由AI投研模型生成所有内容仅供参考不构成任何投资建议。市场有风险投资需谨慎。</p>
<p>© 2024 北京价值前沿科技有限公司. All Rights Reserved.</p>
</footer>
</div>
<script>
// ECharts Initialization
var chartDom = document.getElementById('efficiencyChart');
var myChart = echarts.init(chartDom);
var option;
const data = [
['2018-01-01', 27.3], ['2020-01-01', 29.5], ['2022-07-01', 31.3],
['2022-12-01', 32.5], ['2023-04-01', 33.2], ['2023-11-01', 33.9],
['2024-04-01', 26.36, true], // Flag for component efficiency
['2025-01-01', 27.0, true] // Flag for component efficiency target
];
const seriesDataLab = data.filter(item => !item[2]).map(item => [item[0], item[1]]);
const seriesDataComponent = data.filter(item => item[2]).map(item => [item[0], item[1]]);
option = {
backgroundColor: 'transparent',
tooltip: {
trigger: 'axis',
formatter: function (params) {
let result = params[0].axisValueLabel + '<br/>';
params.forEach(function (item) {
result += item.marker + ' ' + item.seriesName + ': ' + item.value[1] + '%<br/>';
});
return result;
},
backgroundColor: 'rgba(15, 23, 42, 0.8)',
borderColor: '#8b5cf6',
textStyle: {
color: '#e0e6f0'
}
},
legend: {
data: ['实验室效率 (小面积)', '商业组件效率 (大面积)'],
textStyle: {
color: '#e0e6f0'
},
top: '5%'
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'time',
splitLine: { show: false },
axisLine: { lineStyle: { color: 'rgba(255, 255, 255, 0.3)' } },
axisLabel: { color: '#a0aec0' }
},
yAxis: {
type: 'value',
name: '转换效率 (%)',
min: 25,
max: 35,
axisLabel: { formatter: '{value} %', color: '#a0aec0' },
splitLine: { lineStyle: { color: 'rgba(255, 255, 255, 0.1)', type: 'dashed' } },
axisLine: { show: true, lineStyle: { color: 'rgba(255, 255, 255, 0.3)' } }
},
series: [
{
name: '实验室效率 (小面积)',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 8,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#8b5cf6' }, { offset: 1, color: '#3b82f6' }
])
},
lineStyle: {
width: 3,
shadowColor: 'rgba(139, 92, 246, 0.5)',
shadowBlur: 10
},
data: seriesDataLab
},
{
name: '商业组件效率 (大面积)',
type: 'line',
smooth: true,
symbol: 'rect',
symbolSize: 8,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#10b981' }, { offset: 1, color: '#6ee7b7' }
])
},
lineStyle: {
width: 3,
type: 'dashed',
shadowColor: 'rgba(16, 185, 129, 0.5)',
shadowBlur: 10
},
data: seriesDataComponent
}
]
};
option && myChart.setOption(option);
window.addEventListener('resize', myChart.resize);
</script>
</body>
</html>