Files
vf_react/public/htmls/铜连接.html
2025-12-05 13:29:18 +08:00

480 lines
32 KiB
HTML
Raw Permalink 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>深度研报:铜连接 (Copper Connection)</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.10.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>
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
body {
font-family: 'Poppins', 'sans-serif';
background: #00000a;
background-image:
radial-gradient(circle at 15% 50%, rgba(120, 80, 220, 0.15), transparent 40%),
radial-gradient(circle at 85% 30%, rgba(30, 144, 255, 0.15), transparent 40%),
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="%23ffffff" fill-opacity="0.05"%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(18, 18, 30, 0.6);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
}
.glass-card:hover {
transform: translateY(-5px) scale(1.01);
box-shadow: 0 0 30px rgba(0, 191, 255, 0.2);
border-color: rgba(0, 191, 255, 0.3);
}
.bento-grid {
display: grid;
gap: 1.5rem;
grid-template-columns: repeat(12, 1fr);
}
/* Responsive Grid Layout */
.grid-col-span-12 { grid-column: span 12; }
.grid-col-span-8 { grid-column: span 12; }
.grid-col-span-7 { grid-column: span 12; }
.grid-col-span-6 { grid-column: span 12; }
.grid-col-span-5 { grid-column: span 12; }
.grid-col-span-4 { grid-column: span 12; }
@media (min-width: 1024px) {
.grid-col-span-8 { grid-column: span 8; }
.grid-col-span-7 { grid-column: span 7; }
.grid-col-span-6 { grid-column: span 6; }
.grid-col-span-5 { grid-column: span 5; }
.grid-col-span-4 { grid-column: span 4; }
}
.glow-border {
position: relative;
}
.glow-border::before {
content: '';
position: absolute;
top: -1px; left: -1px; right: -1px; bottom: -1px;
background: linear-gradient(135deg, rgba(0, 191, 255, 0.5), rgba(138, 43, 226, 0.5));
border-radius: inherit;
z-index: -1;
filter: blur(8px);
opacity: 0.7;
}
.text-glow {
text-shadow: 0 0 8px rgba(0, 191, 255, 0.6);
}
.text-glow-accent {
text-shadow: 0 0 8px rgba(255, 107, 107, 0.6);
}
.tab-active {
border-bottom-color: #00BFFF !important;
color: #00BFFF !important;
background: rgba(30, 144, 255, 0.1) !important;
}
</style>
</head>
<body class="text-gray-300 min-h-screen">
<div class="container mx-auto p-4 sm:p-6 lg:p-8">
<!-- Header Section -->
<header class="text-center py-12">
<h1 class="text-4xl md:text-6xl font-bold text-white text-glow tracking-wider">
铜连接 <span class="text-gray-400 font-light text-3xl md:text-5xl">Copper Connection</span>
</h1>
<p class="mt-4 text-lg md:text-xl text-gray-400 max-w-4xl mx-auto">
AI算力浪潮下的高速互联革命 | High-Speed Interconnect Revolution in the AI Compute Wave
</p>
</header>
<!-- Core Insight Section -->
<section class="mb-12">
<div class="glass-card rounded-3xl p-6 md:p-8 glow-border">
<h2 class="text-2xl font-bold mb-4 text-white text-glow">核心观点摘要 (Core Viewpoint Summary)</h2>
<p class="text-gray-300 leading-relaxed">
铜连接概念正处在从<strong class="text-cyan-400">主题叙事向基本面兑现过渡的关键拐点</strong>。其核心驱动力源于AI算力对<strong class="text-cyan-400">更高传输速率112G/224G</strong><strong class="text-cyan-400">更优成本功耗</strong>的极致追求,这一需求使铜缆在数据中心短距互联场景中成为光纤的优选替代。未来潜力巨大,但短期面临<strong class="text-amber-400">核心设备产能的刚性瓶颈</strong>,长期则需关注<strong class="text-rose-400">CPO共封装光学</strong>等替代技术的演进。
</p>
</div>
</section>
<!-- Bento Grid Layout -->
<main class="bento-grid">
<!-- Core Drivers -->
<div class="glass-card rounded-3xl p-6 grid-col-span-7">
<h3 class="text-xl font-semibold mb-4 text-white">核心驱动力 (Core Drivers)</h3>
<div class="space-y-4">
<div>
<h4 class="font-bold text-cyan-300">1. 技术迭代的必然选择</h4>
<p class="text-sm text-gray-400">当速率迈向112G/224G传统PCB板信号损耗和串扰问题严重。铜缆<strong class="text-white">Overpass飞线方案</strong>绕开PCB显著降低传输损耗成本仅为PCB的<strong class="text-white">1/6</strong>,且散热更优,成为当前技术和成本下的最优解。</p>
</div>
<div>
<h4 class="font-bold text-cyan-300">2. AI架构变革创造增量</h4>
<p class="text-sm text-gray-400">以英伟达<strong class="text-white">GB200</strong>为代表的新架构,将计算与交换单元集成于同一机柜,产生海量“柜内互联”需求,这是一个<strong class="text-white">纯增量市场</strong>。黄仁勋明确背书:“铜会延续很多很多年”,确立了其主流地位。</p>
</div>
<div>
<h4 class="font-bold text-cyan-300">3. 成本与功耗的经济账</h4>
<p class="text-sm text-gray-400">在3-7米的中短距离场景<strong class="text-white">AEC有源铜缆</strong>相较于光模块,成本仅为其<strong class="text-white">一半</strong>功耗显著降低对能耗和TCO敏感的大型数据中心极具吸引力。</p>
</div>
</div>
</div>
<!-- Market Size & Expectations -->
<div class="glass-card rounded-3xl p-6 grid-col-span-5">
<h3 class="text-xl font-semibold mb-4 text-white">市场规模与预期 (Market Size)</h3>
<div id="market-chart" class="w-full h-64"></div>
<p class="text-xs text-gray-500 mt-2 text-center">数据来源:综合研报及路演信息</p>
</div>
<!-- Industry Chain -->
<div class="glass-card rounded-3xl p-6 grid-col-span-12">
<h3 class="text-xl font-semibold mb-4 text-white">产业链全景图 (Industry Chain Panorama)</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="border-l-4 border-purple-500 pl-4">
<h4 class="font-bold text-purple-300">上游:核心壁垒</h4>
<ul class="list-disc list-inside text-sm text-gray-400 mt-2 space-y-1">
<li><strong class="text-white">关键设备 (最大瓶颈):</strong> 高速线缆发泡机 (奥地利<strong class="font-semibold">罗森泰</strong>)</li>
<li><strong class="text-white">关键原材料:</strong> 高端微导体 (精达股份-恒丰), 铜合金 (博威合金)</li>
</ul>
</div>
<div class="border-l-4 border-cyan-500 pl-4">
<h4 class="font-bold text-cyan-300">中游:技术与制造</h4>
<ul class="list-disc list-inside text-sm text-gray-400 mt-2 space-y-1">
<li><strong class="text-white">高速线缆/裸线:</strong> 沃尔核材, 神宇股份, 新亚电子</li>
<li><strong class="text-white">高速连接器:</strong> 华丰科技 (华为), 鼎通科技 (安费诺代工), 立讯精密</li>
<li><strong class="text-white">高速线缆组件 (AEC):</strong> 兆龙互连 (Credo), 博创科技, 新易盛</li>
</ul>
</div>
<div class="border-l-4 border-green-500 pl-4">
<h4 class="font-bold text-green-300">下游:需求方</h4>
<ul class="list-disc list-inside text-sm text-gray-400 mt-2 space-y-1">
<li><strong class="text-white">GPU厂商:</strong> 英伟达 (NVIDIA), AMD</li>
<li><strong class="text-white">国产算力:</strong> 华为 (昇腾), 浪潮, 曙光</li>
<li><strong class="text-white">云服务巨头 (ASIC):</strong> AWS, 谷歌, 微软, Meta</li>
</ul>
</div>
</div>
</div>
<!-- Analysis of Expectation Gaps -->
<div class="glass-card rounded-3xl p-6 grid-col-span-8">
<h3 class="text-xl font-semibold mb-4 text-white">预期差分析 (Analysis of Expectation Gaps)</h3>
<div class="space-y-3">
<div class="p-3 rounded-xl bg-green-500/10 border border-green-500/30">
<h4 class="font-bold text-green-300">【正向预期差】PCB替代风险证伪</h4>
<p class="text-sm text-gray-400">市场曾担忧PCB替代铜缆但路演证实因技术局限已被NVIDIA否定。GB200最终方案线缆长度反而<strong class="text-white">增加了20%-30%</strong>,价值量超预期提升。</p>
</div>
<div class="p-3 rounded-xl bg-amber-500/10 border border-amber-500/30">
<h4 class="font-bold text-amber-300">【负向预期差】产能瓶颈被低估</h4>
<p class="text-sm text-gray-400">研报描绘万亿市场,但路演揭示核心产能被<strong class="text-white">“卡脖子”</strong>——严重依赖奥地利<strong class="text-white">罗森泰发泡机</strong>采购周期6-12个月。短期行业可能<strong class="text-white">“有订单,无产能”</strong></p>
</div>
<div class="p-3 rounded-xl bg-blue-500/10 border border-blue-500/30">
<h4 class="font-bold text-blue-300">【结构性预期差】忽视结构分化</h4>
<p class="text-sm text-gray-400">市场易将概念笼统看待,但产业链壁垒差异巨大。技术壁垒最高的<strong class="text-white">高速背板连接器</strong>和产能最受限的<strong class="text-white">高速线缆</strong>拥有最深护城河。</p>
</div>
</div>
</div>
<!-- Catalysts & Future Path -->
<div class="glass-card rounded-3xl p-6 grid-col-span-4">
<h3 class="text-xl font-semibold mb-4 text-white">催化剂与未来路径</h3>
<div>
<h4 class="font-bold text-cyan-300">近期催化剂 (3-6个月)</h4>
<ul class="list-disc list-inside text-sm text-gray-400 mt-1 space-y-1">
<li>NVIDIA GB200大规模出货 (Q3-Q4)</li>
<li>核心供应商财报业绩兑现</li>
<li>北美云厂商ASIC集群订单落地</li>
</ul>
</div>
<div class="mt-4">
<h4 class="font-bold text-purple-300">长期发展路径</h4>
<ul class="list-disc list-inside text-sm text-gray-400 mt-1 space-y-1">
<li>速率升级112G -> 224G -> 448G</li>
<li>国产化深化:华为昇腾放量</li>
<li>技术竞争与CPO技术融合/竞争</li>
</ul>
</div>
</div>
<!-- Supporting Evidence Tabs -->
<div class="glass-card rounded-3xl p-6 grid-col-span-12" x-data="{ tab: 'news' }">
<div class="tabs tabs-bordered mb-4">
<a class="tab" :class="{ 'tab-active': tab === 'news' }" @click.prevent="tab = 'news'">新闻数据</a>
<a class="tab" :class="{ 'tab-active': tab === 'roadshow' }" @click.prevent="tab = 'roadshow'">路演纪要</a>
<a class="tab" :class="{ 'tab-active': tab === 'research' }" @click.prevent="tab = 'research'">研报精粹</a>
</div>
<div class="prose prose-invert max-w-none prose-sm text-gray-400 h-64 overflow-y-auto">
<div x-show="tab === 'news'">
<ul>
<li><strong>AI算力驱动:</strong> "在AI浪潮中铜互连因其低成本和低功耗优势在短距离连接中份额提升。"</li>
<li><strong>技术演进:</strong> 端口速率从56G向112G/224G演进沃尔核材近期实现224G铜缆突破。</li>
<li><strong>核心优势:</strong> 在短距场景下,高速铜连接相较光纤具有性价比、稳定性、功耗优势。</li>
<li><strong>NVIDIA GB200方案:</strong> 大量应用铜连接交换机内部连接采用铜缆而非之前的PCB-光模块-电缆连接。</li>
<li><strong>黄仁勋观点:</strong> "铜会延续很多很多年""未来会尽可能在机柜内部使用铜连接,硅光子技术为时尚早"。</li>
<li><strong>产业链动态:</strong> 安费诺爬坡时间紧短期供不应求。沃尔核材、神宇股份为安费诺代工厂商华丰科技跟华为兆龙互联是Credo供应商。</li>
<li><strong>新兴技术CPC/NPC:</strong> 将高速铜缆连接器直接集成在交换芯片封装内部彻底绕开PCB比CPO成本更低可能更快落地。</li>
</ul>
</div>
<div x-show="tab === 'roadshow'">
<ul>
<li><strong>非替代关系:</strong> 铜连接用于机柜内部电传输,光模块用于机柜外部网络连接,二者协同增长。</li>
<li><strong>GB200方案细节:</strong> 采用“线缆背板连接器”Overpass替代传统PCB成本降低6倍传输损耗更低散热更优。</li>
<li><strong>GB200改版影响:</strong> 传言取消Overpass线缆实际方案改为“线缆长度增加20%-30%”,需求不降反升。</li>
<li><strong>单机柜价值量:</strong> 安费诺方案约50万元GB200改版后上修至6-9万元。</li>
<li><strong>核心技术壁垒:</strong> 背板连接器(全球最难品类)、高速线缆“发泡工艺”。</li>
<li><strong>产能瓶颈:</strong> 高度依赖进口奥地利罗森泰Rosendahl发泡机全球产能有限是核心卡脖子问题。</li>
<li><strong>核心材料垄断:</strong> 高端微导体被恒峰股份(金达股份旗下)垄断。</li>
</ul>
</div>
<div x-show="tab === 'research'">
<ul>
<li><strong>AEC技术:</strong> 有源电缆通过Retimer芯片改善信号质量支持更长距离2.5-7米适合ASIC芯片短距互连场景。</li>
<li><strong>美股龙头验证:</strong> 铜连接行情源于美股CREDO全球AEC龙头优异财报验证AEC在AI客户放量。</li>
<li><strong>业绩兑现期:</strong> NVIDIA B系列上游供应链将于Q3/Q4进入产能爬升和供货期产业链进入业绩兑现期。</li>
<li><strong>未来挑战:</strong> 向448G演进时传输距离是最大挑战解决方案包括纯银中空线。</li>
<li><strong>长期技术竞争:</strong> 台积电CPO技术预计2025年下半年量产可能逐渐替代部分铜缆需求。</li>
<li><strong>成本优势:</strong> 在400G及以上速率铜连接相比光纤成本更低功耗更低。</li>
<li><strong>国产方案:</strong> 立讯技术、华丰科技等国产铜连接方案逐步起量,将带动整体产业链发展。</li>
</ul>
</div>
</div>
</div>
<!-- Potential Risks & Challenges -->
<div class="glass-card rounded-3xl p-6 grid-col-span-12">
<h3 class="text-xl font-semibold mb-4 text-white text-glow-accent">潜在风险与挑战 (Potential Risks & Challenges)</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 text-sm">
<div class="p-4 rounded-xl bg-rose-900/40 border border-rose-500/30">
<h4 class="font-bold text-rose-300">技术风险</h4>
<ul class="list-disc list-inside mt-2 space-y-1">
<li><strong class="text-white">长期替代风险:</strong> CPO是最大远期威胁台积电预计25年下半年量产。</li>
<li><strong class="text-white">高速率瓶颈:</strong> 448G速率下铜缆传输距离是巨大挑战存在研发不确定性。</li>
</ul>
</div>
<div class="p-4 rounded-xl bg-amber-900/40 border border-amber-500/30">
<h4 class="font-bold text-amber-300">商业化风险</h4>
<ul class="list-disc list-inside mt-2 space-y-1">
<li><strong class="text-white">产能不及预期 (最大短期风险):</strong> 罗森泰发泡机交付延迟将限制供给。</li>
<li><strong class="text-white">需求不及预期:</strong> AI发展放缓或软件算法创新降低算力需求。</li>
</ul>
</div>
<div class="p-4 rounded-xl bg-indigo-900/40 border border-indigo-500/30">
<h4 class="font-bold text-indigo-300">竞争与信息风险</h4>
<ul class="list-disc list-inside mt-2 space-y-1">
<li><strong class="text-white">竞争加剧:</strong> NVIDIA可能引入莫仕、泰科等备份供应商。</li>
<li><strong class="text-white">信息矛盾:</strong> 市场规模预测远大于实际产能;单机柜价值量估算区间较大。</li>
</ul>
</div>
</div>
</div>
<!-- Core Related Companies -->
<div class="glass-card rounded-3xl p-6 grid-col-span-12">
<h3 class="text-xl font-semibold mb-4 text-white">核心相关公司 (Core Related Companies)</h3>
<div class="overflow-x-auto">
<table class="table table-sm bg-transparent">
<thead>
<tr class="border-b border-gray-700">
<th class="bg-transparent text-white">股票名称</th>
<th class="bg-transparent text-white">股票代码</th>
<th class="bg-transparent text-white">关联逻辑</th>
</tr>
</thead>
<tbody>
<tr class="border-b border-gray-800 hover:bg-gray-800/50"><td>沃尔核材</td><td><a href="https://valuefrontier.cn/company?scode=002130" target="_blank" class="text-cyan-400 hover:underline">002130</a></td><td>高速通信线直供泰科、安费诺已布局产能224G产品领先。</td></tr>
<tr class="border-b border-gray-800 hover:bg-gray-800/50"><td>华丰科技</td><td><a href="https://valuefrontier.cn/company?scode=688629" target="_blank" class="text-cyan-400 hover:underline">688629</a></td><td>国产高速背板连接器龙头,深度绑定华为,已量产并募资扩产高速线模组。</td></tr>
<tr class="border-b border-gray-800 hover:bg-gray-800/50"><td>鼎通科技</td><td><a href="https://valuefrontier.cn/company?scode=688668" target="_blank" class="text-cyan-400 hover:underline">688668</a></td><td>为安费诺等提供高速背板及I/O连接器核心组件。</td></tr>
<tr class="border-b border-gray-800 hover:bg-gray-800/50"><td>兆龙互连</td><td><a href="https://valuefrontier.cn/company?scode=300913" target="_blank" class="text-cyan-400 hover:underline">300913</a></td><td>高速组件产品主要是DAC铜缆模块已成功开发800G产品绑定Credo。</td></tr>
<tr class="border-b border-gray-800 hover:bg-gray-800/50"><td>新亚电子</td><td><a href="https://valuefrontier.cn/company?scode=605277" target="_blank" class="text-cyan-400 hover:underline">605277</a></td><td>安费诺核心线材供应商224G高速线缆已送样PCIe 6.0已批量交付。</td></tr>
<tr class="border-b border-gray-800 hover:bg-gray-800/50"><td>瑞可达</td><td><a href="https://valuefrontier.cn/company?scode=688800" target="_blank" class="text-cyan-400 hover:underline">688800</a></td><td>提供高速铜缆连接组件解决方案,与旭创科技成立合资公司。</td></tr>
<tr class="border-b border-gray-800 hover:bg-gray-800/50"><td>神宇股份</td><td><a href="https://valuefrontier.cn/company?scode=300563" target="_blank" class="text-cyan-400 hover:underline">300563</a></td><td>安费诺代工厂商多款高速线缆在验证阶段有望切入GB200供应链。</td></tr>
<tr class="border-b border-gray-800 hover:bg-gray-800/50"><td>金信诺</td><td><a href="https://valuefrontier.cn/company?scode=300252" target="_blank" class="text-cyan-400 hover:underline">300252</a></td><td>高速业务主要为服务器内部连接产品AOC及DAC产品为外部连接配套。</td></tr>
<tr class="border-b border-gray-800 hover:bg-gray-800/50"><td>博创科技</td><td>N/A</td><td>发布应用于数据中心互联的800G高速有源铜缆(AEC)。</td></tr>
<tr class="border-b-0 hover:bg-gray-800/50"><td>胜蓝股份</td><td><a href="https://valuefrontier.cn/company?scode=300843" target="_blank" class="text-cyan-400 hover:underline">300843</a></td><td>研发生产铜缆高速连接器,高频高速产品供给浪潮、联想、曙光等。</td></tr>
</tbody>
</table>
</div>
</div>
<!-- Rise Analysis Section -->
<div class="glass-card rounded-3xl p-6 grid-col-span-12" x-data="{ open: null }">
<h3 class="text-xl font-semibold mb-4 text-white">近期涨幅异动分析 (Recent Rise Analysis)</h3>
<div class="space-y-4">
<div class="collapse collapse-plus bg-base-200/50 border border-gray-700">
<input type="radio" name="rise-accordion" />
<div class="collapse-title text-md font-medium">
<span class="text-green-400 font-bold mr-2">+10.02%</span> 新亚电子 (605277) - 224G高速铜缆通过安费诺验证催化
</div>
<div class="collapse-content text-sm text-gray-400">
<p><strong>核心催化:</strong> 互动平台确认224G高速线缆已向安费诺送样试用速率领先行业公司是安费诺核心线材供应商有望切入GB200的224G/448G外部线市场订单弹性大2024年高速数据线材收入同比+103%毛利率46%,基本面强劲。</p>
</div>
</div>
<div class="collapse collapse-plus bg-base-200/50 border border-gray-700">
<input type="radio" name="rise-accordion" />
<div class="collapse-title text-md font-medium">
<span class="text-green-400 font-bold mr-2">+6.06%</span> 神宇股份 (300563) - 铜缆高速连接概念板块整体带动
</div>
<div class="collapse-content text-sm text-gray-400">
<p><strong>核心原因:</strong> 上涨主要受铜缆高速连接概念板块整体走强带动,龙头沃尔核材、金信诺涨停,神宇股份呈现跟涨属性。投资者认为其走势弱于同板块龙头,缺乏自身基本面支撑,更多是短期资金轮动和概念炒作的结果。</p>
</div>
</div>
<div class="collapse collapse-plus bg-base-200/50 border border-gray-700">
<input type="radio" name="rise-accordion" />
<div class="collapse-title text-md font-medium">
<span class="text-green-400 font-bold mr-2">+20.01%</span> 凯旺科技 (301182) - 多重概念叠加
</div>
<div class="collapse-content text-sm text-gray-400">
<p><strong>核心原因:</strong> 涨停系多重利好叠加包括消费电子回暖、机器人概念与宇树科技合作以及铜缆高速连接技术应用。公司掌握铜缆高速连接技术且已规模化应用叠加一季度净利润同比大增153%,形成共振。</p>
</div>
</div>
</div>
</div>
</main>
<!-- Footer -->
<footer class="text-center py-8 mt-12">
<p class="text-sm text-gray-500">
北京价值前沿科技有限公司 AI投研agent“价小前投研” 进行投研呈现
</p>
<p class="text-xs text-gray-600 mt-1">
本报告为AI合成数据不构成任何投资建议投资需谨慎。
</p>
</footer>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
var chartDom = document.getElementById('market-chart');
var myChart = echarts.init(chartDom);
var option;
option = {
backgroundColor: 'transparent',
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
backgroundColor: 'rgba(20, 20, 40, 0.8)',
borderColor: '#00BFFF',
textStyle: {
color: '#E5E7EB'
}
},
legend: {
data: ['CAGR (复合年增长率)', '2025年市场规模'],
textStyle: {
color: '#9CA3AF'
},
top: 'top',
right: '10'
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value',
boundaryGap: [0, 0.01],
axisLine: { lineStyle: { color: 'rgba(255,255,255,0.2)' } },
splitLine: { lineStyle: { color: 'rgba(255,255,255,0.1)' } },
axisLabel: {
formatter: function(value) {
if (value >= 100) return value / 100 + '亿美元';
return value + '%';
}
}
},
yAxis: {
type: 'category',
data: ['DAC (无源铜缆)', 'AEC (有源铜缆)', 'GB200铜连接 (RMB)'],
axisLine: { lineStyle: { color: 'rgba(255,255,255,0.2)' } }
},
series: [
{
name: 'CAGR (复合年增长率)',
type: 'bar',
data: [25, 45, 0], // GB200 is a one-year projection, CAGR not applicable
itemStyle: {
color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
{ offset: 0, color: '#8A2BE2' },
{ offset: 1, color: '#4B0082' }
])
},
label: {
show: true,
position: 'right',
formatter: '{c}%',
color: '#fff'
}
},
{
name: '2025年市场规模',
type: 'bar',
data: [0, 525000000 / 100000000, 24500000000 / 1000000000], // Convert to Billion USD approx, RMB to Billion USD
itemStyle: {
color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
{ offset: 0, color: '#00BFFF' },
{ offset: 1, color: '#1E90FF' }
])
},
label: {
show: true,
position: 'right',
formatter: function(params) {
if (params.name === 'GB200铜连接 (RMB)') {
return '245亿元';
}
return (params.value * 100) + '百万美元'; // Display in million USD
},
color: '#fff'
}
}
]
};
// Adjusting data for display logic, converting values for the chart
// For AEC: $525 Million = 5.25 hundred million USD
option.series[1].data = [0, 5.25, 245];
option.xAxis.axisLabel.formatter = function(value) {
return value + '亿';
};
option.series[1].label.formatter = function(params) {
if (params.name === 'GB200铜连接 (RMB)') {
return '245亿元';
}
if (params.name === 'AEC (有源铜缆)') {
return '5.25亿美元';
}
return '';
};
myChart.setOption(option);
window.addEventListener('resize', myChart.resize);
});
</script>
</body>
</html>