vf/vf_react
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update pay ui

Browse Source
This commit is contained in:
zzlgreat
2025-12-05 13:29:18 +08:00
parent 20994cfb13
commit 48d9c76c5e
1008 changed files with 417880 additions and 486974 deletions
Download Patch File Download Diff File Expand all files Collapse all files

584
public/htmls/磁电存储.html Normal file
View File

@@ -0,0 +1,584 @@
<!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>深度行研 | 磁电存储 (Magnetoelectric Storage)</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="//unpkg.com/alpinejs" defer></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=Orbitron:wght@400;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap');
body {
font-family: 'Noto Sans SC', sans-serif;
background-color: #00000a;
color: #E0E0E0;
overflow-x: hidden;
}
.font-orbitron {
font-family: 'Orbitron', sans-serif;
}
.glass-card {
background: rgba(15, 23, 42, 0.4); /* slate-900 with opacity */
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(56, 189, 248, 0.15); /* sky-400 with opacity */
border-radius: 1.5rem; /* rounded-3xl */
box-shadow: 0 0 40px rgba(56, 189, 248, 0.1);
}
.bento-grid {
display: grid;
gap: 1.5rem;
grid-template-columns: repeat(12, 1fr);
}
.bento-item {
grid-column: span 12;
}
@media (min-width: 768px) {
.md\:col-span-4 { grid-column: span 4; }
.md\:col-span-6 { grid-column: span 6; }
.md\:col-span-8 { grid-column: span 8; }
.md\:col-span-12 { grid-column: span 12; }
.md\:row-span-2 { grid-row: span 2; }
}
.glow-bg {
position: fixed;
top: 50%;
left: 50%;
width: 800px;
height: 800px;
transform: translate(-50%, -50%);
background: radial-gradient(circle, rgba(29, 78, 216, 0.15) 0%, rgba(29, 78, 216, 0) 60%);
z-index: -1;
animation: pulse-glow 15s infinite alternate;
}
.glow-bg-2 {
position: fixed;
top: 10%;
left: 10%;
width: 600px;
height: 600px;
transform: translate(-50%, -50%);
background: radial-gradient(circle, rgba(132, 204, 22, 0.1) 0%, rgba(132, 204, 22, 0) 70%);
z-index: -2;
animation: pulse-glow-2 20s infinite alternate;
}
.glow-bg-3 {
position: fixed;
bottom: -20%;
right: -10%;
width: 700px;
height: 700px;
transform: translate(-50%, -50%);
background: radial-gradient(circle, rgba(192, 38, 211, 0.1) 0%, rgba(192, 38, 211, 0) 70%);
z-index: -2;
animation: pulse-glow-3 18s infinite alternate;
}
@keyframes pulse-glow {
from { transform: translate(-50%, -50%) scale(0.8); opacity: 0.7; }
to { transform: translate(-45%, -55%) scale(1.2); opacity: 1; }
}
@keyframes pulse-glow-2 {
from { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
to { transform: translate(-60%, -40%) scale(1.3); opacity: 1; }
}
@keyframes pulse-glow-3 {
from { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
to { transform: translate(-40%, -60%) scale(0.9); opacity: 0.7; }
}
.section-title {
@apply text-3xl md:text-4xl font-orbitron font-bold text-sky-300 mb-8 border-l-4 border-sky-400 pl-4 relative;
}
.section-title::after {
content: '';
position: absolute;
left: 0;
bottom: -8px;
width: 50px;
height: 2px;
background: linear-gradient(90deg, #38bdf8, transparent);
}
.table thead th {
background-color: rgba(56, 189, 248, 0.1);
color: #bae6fd; /* sky-200 */
border-bottom: 1px solid rgba(56, 189, 248, 0.2);
}
.table tbody tr {
border-bottom: 1px solid rgba(56, 189, 248, 0.1);
transition: background-color 0.3s ease;
}
.table tbody tr:hover {
background-color: rgba(56, 189, 248, 0.05);
}
</style>
</head>
<body class="antialiased min-h-screen">
<div class="glow-bg"></div>
<div class="glow-bg-2"></div>
<div class="glow-bg-3"></div>
<main class="relative container mx-auto px-4 py-12 md:py-20 z-10">
<!-- Header Section -->
<header class="text-center mb-20">
<h1 class="font-orbitron text-4xl md:text-6xl font-bold tracking-widest text-transparent bg-clip-text bg-gradient-to-r from-sky-300 via-cyan-300 to-lime-300 animate-text">
磁电存储 (MED)
</h1>
<p class="mt-4 text-xl text-slate-300">DEEP DIVE INDUSTRY RESEARCH</p>
<div class="mt-6 text-xs text-slate-500 tracking-wider">
北京价值前沿科技有限公司 AI投研agent：“价小前投研” | 本报告为AI合成数据，投资需谨慎。
</div>
</header>
<!-- Core Insight Summary Section -->
<section class="mb-20">
<div class="bento-grid">
<div class="bento-item md:col-span-12 glass-card p-8">
<h2 class="font-orbitron text-2xl font-bold text-lime-300 mb-4">核心观点摘要</h2>
<p class="text-slate-300 text-lg leading-relaxed">
磁电存储是一个由单一产业巨头（华为）主导的、旨在实现“弯道超车”的颠覆性存储技术概念。当前，该概念处于从 <strong class="text-cyan-300">0到1的产业孵化初期</strong>，其核心驱动力是 <strong class="text-cyan-300">技术突破与国产替代的双重叙事</strong>。虽然市场对其千亿级替代空间抱有极高热情，但技术成熟度、产业链完整度和商业化落地仍存在巨大不确定性，使其现阶段的投资属性更偏向于 <strong class="text-red-400">主题驱动而非基本面驱动</strong>。
</p>
</div>
</div>
</section>
<!-- Core Logic & Market Perception -->
<section class="mb-20">
<h2 class="section-title">概念的核心逻辑与市场认知</h2>
<div class="bento-grid">
<!-- Core Drivers -->
<div class="bento-item md:col-span-4 glass-card p-6 flex flex-col">
<h3 class="font-orbitron text-xl font-bold text-sky-300 mb-3">核心驱动力</h3>
<ul class="space-y-4 text-slate-300 list-disc list-inside">
<li><strong class="text-white">技术代差优势:</strong> 基于磁电耦合效应，理论能耗比HDD低90%，提供“冷存成本、温存效果”的最优解。</li>
<li><strong class="text-white">国产替代战略:</strong> 意在开辟新赛道，绕开被美系厂商垄断的HDD市场，建立自主可控的存储生态。</li>
<li><strong class="text-white">商业模式创新:</strong> 华为与核心材料商斯迪克成立合资公司，深度绑定产业链关键环节，意图快速催熟产品。</li>
</ul>
</div>
<!-- Expectation Gap -->
<div class="bento-item md:col-span-8 glass-card p-6 md:row-span-2 flex flex-col justify-between">
<div>
<h3 class="font-orbitron text-xl font-bold text-amber-300 mb-3">关键预期差：宏大叙事 vs. 产业寂静</h3>
<p class="text-slate-300 mb-4">
新闻、研报描绘了一个颠覆千亿市场的宏伟蓝图。然而，在多场主流存储厂商的路演中，对此技术路径 <strong class="text-red-400">几乎毫无涉及</strong>。这揭示了当前市场的热烈预期与产业界的实际跟进之间存在巨大鸿沟。
</p>
<blockquote class="border-l-4 border-amber-400 pl-4 text-slate-400 italic">
“12场路演数据中，仅1场提及‘磁电’技术，且应用场景是<strong class="text-amber-300">机器人触觉传感器</strong>，而非数据存储。这暗示该技术要么是华为的绝密武器，要么其产业影响力远未扩散，仍是一个‘孤岛式’的创新。”
</blockquote>
</div>
<div class="mt-6 p-4 rounded-xl bg-slate-900/50 border border-slate-700">
<p class="font-bold text-white mb-2">风险信号：概念泛化与信息误读</p>
<ul class="text-slate-400 text-sm list-disc list-inside space-y-1">
<li>市场将“磁光电融合存储”与华为的“磁电存储”混淆，导致概念股范畴扩大。</li>
<li>部分公司（如佰维存储）股价上涨由传统存储周期驱动，却被市场情绪错误关联，多份研报已明确澄清。</li>
<li>市场过度关注理论优势（如无限寿命），而低估了工程现实（如<strong class="text-red-400">良率瓶颈</strong>）。</li>
</ul>
</div>
</div>
<!-- Technology & Market Position -->
<div class="bento-item md:col-span-4 glass-card p-6 flex flex-col">
<h3 class="font-orbitron text-xl font-bold text-lime-300 mb-3">技术定位：温冷数据最优解</h3>
<p class="text-slate-300 mb-4">
华为提出“SSD+MED”双层存储架构，旨在以冷存的成本实现温存的效果，首要目标是替代传统机械硬盘（HDD）。
</p>
<div id="power-consumption-chart" style="width: 100%; height: 200px;"></div>
</div>
</div>
</section>
<!-- Key Events & Timeline -->
<section class="mb-20">
<h2 class="section-title">关键事件与发展路径</h2>
<div class="glass-card p-6 md:p-8">
<div id="timeline-chart" style="width: 100%; height: 400px;"></div>
<div class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-6 text-center">
<div class="p-4 bg-slate-900/50 rounded-xl border border-slate-700">
<h4 class="font-bold text-sky-300">阶段一 (2025-2026)</h4>
<p class="text-sm text-slate-400 mt-1">产品导入与标杆客户验证，验证TCO优势。</p>
</div>
<div class="p-4 bg-slate-900/50 rounded-xl border border-slate-700">
<h4 class="font-bold text-sky-300">阶段二 (2026-2028)</h4>
<p class="text-sm text-slate-400 mt-1">生态扩展与标准建立，吸引更多厂商加入。</p>
</div>
<div class="p-4 bg-slate-900/50 rounded-xl border border-slate-700">
<h4 class="font-bold text-sky-300">阶段三 (2028+)</h4>
<p class="text-sm text-slate-400 mt-1">规模化替代与市场渗透，挑战千亿市场空间。</p>
</div>
</div>
</div>
</section>
<!-- Industry Chain Section -->
<section class="mb-20">
<h2 class="section-title">产业链全景剖析</h2>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8 items-start">
<!-- Upstream -->
<div class="glass-card p-6">
<h3 class="font-orbitron text-xl font-bold text-lime-300 mb-4 text-center">上游：核心材料与设备</h3>
<div class="space-y-4">
<div class="p-4 rounded-lg bg-slate-900/50">
<p class="font-bold text-white">磁介质/涂布 (核心环节)</p>
<p class="text-slate-400 text-sm">斯迪克 (宣称独家供应，价值占比60%)</p>
</div>
<div class="p-4 rounded-lg bg-slate-900/50">
<p class="font-bold text-white">设备</p>
<p class="text-slate-400 text-sm">信宇人 (配合研发涂布工艺与设备)</p>
</div>
<div class="p-4 rounded-lg bg-slate-900/50">
<p class="font-bold text-white">相关材料</p>
<p class="text-slate-400 text-sm">晶华新材 (被视为补涨标的)</p>
</div>
</div>
</div>
<!-- Midstream -->
<div class="glass-card p-6">
<h3 class="font-orbitron text-xl font-bold text-sky-300 mb-4 text-center">中游：产品与系统集成</h3>
<div class="space-y-4">
<div class="p-4 rounded-lg bg-slate-900/50">
<p class="font-bold text-white">技术主导与产品定义</p>
<p class="text-slate-400 text-sm">华为 (OceanStor Arctic, AI SSD)</p>
</div>
<div class="p-4 rounded-lg bg-slate-900/50">
<p class="font-bold text-white">芯片</p>
<p class="text-slate-400 text-sm">智迪科技 (关联度待验证)</p>
</div>
</div>
</div>
<!-- Downstream -->
<div class="glass-card p-6">
<h3 class="font-orbitron text-xl font-bold text-fuchsia-300 mb-4 text-center">下游：应用与渠道</h3>
<div class="space-y-4">
<div class="p-4 rounded-lg bg-slate-900/50">
<p class="font-bold text-white">最终用户</p>
<p class="text-slate-400 text-sm">数据中心、云计算厂商、AI算力中心</p>
</div>
<div class="p-4 rounded-lg bg-slate-900/50">
<p class="font-bold text-white">渠道/经销商</p>
<p class="text-slate-400 text-sm">天源迪科、银信科技 (华为代理)</p>
</div>
</div>
</div>
</div>
</section>
<!-- Key Players & Risks -->
<section class="mb-20" x-data="{ tab: 'players' }">
<div class="flex border-b border-slate-700 mb-8">
<button @click="tab = 'players'" :class="{'border-sky-400 text-sky-300': tab === 'players', 'border-transparent text-slate-400': tab !== 'players'}" class="px-6 py-3 font-bold border-b-2 transition">核心玩家对比</button>
<button @click="tab = 'risks'" :class="{'border-sky-400 text-sky-300': tab === 'risks', 'border-transparent text-slate-400': tab !== 'risks'}" class="px-6 py-3 font-bold border-b-2 transition">潜在风险与挑战</button>
</div>
<!-- Key Players Content -->
<div x-show="tab === 'players'" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="glass-card p-6 border-t-4 border-cyan-400">
<h4 class="font-orbitron text-lg font-bold text-cyan-300">领导者：华为</h4>
<p class="text-sm text-slate-300 mt-2">产业核心，定义了技术路线、产品形态和商业模式。所有关联公司的价值都高度依赖于其战略成功。</p>
</div>
<div class="glass-card p-6 border-t-4 border-lime-400">
<h4 class="font-orbitron text-lg font-bold text-lime-300">最纯粹标的：斯迪克</h4>
<p class="text-sm text-slate-300 mt-2">逻辑最纯粹，价值与华为强绑定，卡位核心材料环节，弹性最大。但高度依赖华为，且面临“良率”瓶颈。</p>
</div>
<div class="glass-card p-6 border-t-4 border-amber-400">
<h4 class="font-orbitron text-lg font-bold text-amber-300">关联者：中电兴发等</h4>
<p class="text-sm text-slate-300 mt-2">在“磁光电融合存储”领域已有布局，与华为MED关系更多是“概念共振”，而非直接产业链上下游。</p>
</div>
<div class="glass-card p-6 border-t-4 border-red-500">
<h4 class="font-orbitron text-lg font-bold text-red-400">被误读标的：佰维存储</h4>
<p class="text-sm text-slate-300 mt-2">核心驱动力是传统存储周期，与磁电存储技术路线无关。是市场情绪驱动下的错误认知。</p>
</div>
</div>
<!-- Risks Content -->
<div x-show="tab === 'risks'" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="glass-card p-6">
<h4 class="font-orbitron text-lg font-bold text-red-400">技术风险</h4>
<ul class="mt-2 list-disc list-inside space-y-2 text-slate-300 text-sm">
<li><strong class="text-white">量产瓶颈：</strong> 核心工艺“良率”是最大障碍，直接影响成本和上市进度。</li>
<li><strong class="text-white">性能稳定性：</strong> 实验室性能能否在数据中心大规模、长周期稳定运行尚待检验。</li>
</ul>
</div>
<div class="glass-card p-6">
<h4 class="font-orbitron text-lg font-bold text-amber-400">商业化风险</h4>
<ul class="mt-2 list-disc list-inside space-y-2 text-slate-300 text-sm">
<li><strong class="text-white">单一供应商风险：</strong> 高度依赖华为的单极化产业结构，客户可能因担心供应商锁定而持谨慎态度。</li>
<li><strong class="text-white">成本与TCO：</strong> 宣称的“TCO降低20%”能否兑现是商业化成功的关键。</li>
</ul>
</div>
<div class="glass-card p-6">
<h4 class="font-orbitron text-lg font-bold text-yellow-400">竞争与信息风险</h4>
<ul class="mt-2 list-disc list-inside space-y-2 text-slate-300 text-sm">
<li><strong class="text-white">传统技术迭代：</strong> HDD技术仍在进步，MED需建立足够宽的护城河。</li>
<li><strong class="text-white">信息不对称：</strong> 新闻热度与产业冷清形成鲜明对比，信息主要由利益相关方主导，风险极高。</li>
</ul>
</div>
</div>
</section>
<!-- Conclusion & Investment Advice -->
<section class="mb-20">
<h2 class="section-title">综合结论与投资启示</h2>
<div class="glass-card p-8">
<p class="text-lg text-slate-300 mb-6">
磁电存储正处于一个典型的 <strong class="text-sky-300">主题炒作与产业孵化并存的早期阶段</strong>。其背后有坚实的产业逻辑（国产替代）和技术愿景（性能突破），但实现路径充满挑战。当前投资该概念，本质上是对华为战略执行力和其定义的新技术路径能否成功的 <strong class="text-lime-300">“信仰投票”</strong>，基本面支撑尚显薄弱。
</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="p-4 rounded-xl bg-slate-900/50 border border-slate-700">
<h4 class="font-bold text-white mb-2">最具投资价值环节</h4>
<p class="text-sm text-slate-400">
当前阶段，最具弹性和逻辑纯粹性的是上游核心、且具有排他性的材料/工艺供应商，即 <strong class="text-lime-300">斯迪克</strong>。其与华为深度绑定的关系成为分享技术红利的最直接标的，但风险也高度集中。
</p>
</div>
<div class="p-4 rounded-xl bg-slate-900/50 border border-slate-700">
<h4 class="font-bold text-white mb-2">需重点跟踪的关键指标</h4>
<ul class="text-sm text-slate-400 list-disc list-inside space-y-1">
<li><strong class="text-sky-300">产品侧(华为):</strong> OceanStor Arctic最终性能、定价及首批订单。</li>
<li><strong class="text-lime-300">技术侧(斯迪克):</strong> 纳米级涂布工艺的良率提升情况。</li>
<li><strong class="text-amber-300">市场侧:</strong> 是否有其他云厂商开始评估或测试该技术。</li>
<li><strong class="text-green-300">财务侧:</strong> 相关业务何时开始贡献营收和利润。</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Stock Data Section -->
<section>
<h2 class="section-title">核心公司与股票数据</h2>
<div class="glass-card p-6 md:p-8">
<h3 class="font-orbitron text-2xl text-sky-300 mb-6">相关概念股列表</h3>
<div class="overflow-x-auto">
<table class="table w-full text-sm">
<thead>
<tr>
<th class="w-1/4">股票名称</th>
<th class="w-1/4">股票代码</th>
<th class="w-1/2">关联原因</th>
</tr>
</thead>
<tbody>
<tr>
<td>中电兴发</td>
<td>002298</td>
<td>公司曾定增20亿，拟用于面向云计算和大数据的自主可控磁光电存储项目等。</td>
</tr>
<tr>
<td>宁波建工</td>
<td><a href="https://valuefrontier.cn/company?scode=601789" target="_blank" class="text-sky-400 hover:underline">601789</a></td>
<td>公司持有中经云32.73%股权，中经云是全球光磁电混合存储先行者。</td>
</tr>
<tr>
<td>智迪科技</td>
<td><a href="https://valuefrontier.cn/company?scode=301503" target="_blank" class="text-sky-400 hover:underline">301503</a></td>
<td>磁电存储芯片主要用于数据的存储和读取。</td>
</tr>
<tr>
<td>易华录</td>
<td><a href="https://valuefrontier.cn/company?scode=300212" target="_blank" class="text-sky-400 hover:underline">300212</a></td>
<td>超级智能存储系统是融合光磁电存储介质的分布式存储系统。</td>
</tr>
<tr>
<td>宁波韵升</td>
<td><a href="https://valuefrontier.cn/company?scode=600366" target="_blank" class="text-sky-400 hover:underline">600366</a></td>
<td>公司产品包含大容量光盘、磁盘驱动器及其部件，磁电产品及配套件的研制、开发、制造。</td>
</tr>
<tr>
<td>信息发展</td>
<td><a href="https://valuefrontier.cn/company?scode=300469" target="_blank" class="text-sky-400 hover:underline">300469</a></td>
<td>光典海量电子档案安全保存一体机采用磁光电存储融合设计。</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="glass-card p-6 md:p-8 mt-12">
<h3 class="font-orbitron text-2xl text-lime-300 mb-6">涨幅异动深度分析</h3>
<div class="space-y-8">
<!-- Sideke -->
<div class="p-6 rounded-2xl bg-slate-900/50 border border-lime-500/30">
<div class="flex flex-col md:flex-row justify-between md:items-center mb-3">
<h4 class="text-xl font-bold text-lime-300">斯迪克 (300806)</h4>
<div class="text-sm text-slate-400 mt-2 md:mt-0">
<span class="font-bold text-white">2025-09-11</span>
<span class="ml-4 px-3 py-1 rounded-full bg-green-500/20 text-green-300 font-bold">上涨 7.95%</span>
</div>
</div>
<p class="text-sm text-slate-300"><strong class="text-white">核心驱动：</strong>磁电存储概念爆发，与华为合作预期强烈。市场传闻公司独家负责华为磁电存储核心涂布环节，价值量占比超60%。叠加存储芯片行业整体涨价潮，形成市场共振。</p>
</div>
<!-- Jinghua -->
<div class="p-6 rounded-2xl bg-slate-900/50 border border-sky-500/30">
<div class="flex flex-col md:flex-row justify-between md:items-center mb-3">
<h4 class="text-xl font-bold text-sky-300">晶华新材 (603683)</h4>
<div class="text-sm text-slate-400 mt-2 md:mt-0">
<span class="font-bold text-white">2025-09-16</span>
<span class="ml-4 px-3 py-1 rounded-full bg-green-500/20 text-green-300 font-bold">上涨 10.0%</span>
</div>
</div>
<p class="text-sm text-slate-300"><strong class="text-white">核心驱动：</strong>作为斯迪克的补涨标的。华为磁存储事件引爆了对“国产纳米级高洁净离型膜”赛道的关注。公司布局的超薄电子离型膜已送样华为供应链验证，被市场视为斯迪克的同类国产替代选择。</p>
</div>
<!-- Biwin -->
<div class="p-6 rounded-2xl bg-slate-900/50 border border-red-500/30">
<div class="flex flex-col md:flex-row justify-between md:items-center mb-3">
<h4 class="text-xl font-bold text-red-400">佰维存储 (688525) - [注意：逻辑非相关]</h4>
<div class="text-sm text-slate-400 mt-2 md:mt-0">
<span class="font-bold text-white">2025-09-29</span>
<span class="ml-4 px-3 py-1 rounded-full bg-green-500/20 text-green-300 font-bold">上涨 5.85%</span>
</div>
</div>
<p class="text-sm text-slate-300"><strong class="text-white">核心驱动：</strong>其上涨与磁电存储概念 <strong class="text-red-400">无关</strong>。主要受益于传统存储行业（DRAM/NAND）进入上升大周期，价格持续上涨，AI驱动需求爆发，以及公司自身在AI穿戴设备、自研主控芯片等领域的布局和业绩改善。</p>
</div>
</div>
</div>
</section>
</main>
<script>
// ECharts for Power Consumption
var powerChart = echarts.init(document.getElementById('power-consumption-chart'));
var powerOption = {
backgroundColor: 'transparent',
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow' }
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value',
boundaryGap: [0, 0.01],
axisLabel: { color: '#9ca3af' },
splitLine: { show: false }
},
yAxis: {
type: 'category',
data: ['HDD (传统硬盘)', 'MED (磁电存储)'],
axisLabel: { color: '#e5e7eb' }
},
series: [
{
name: '相对功耗',
type: 'bar',
data: [100, 10],
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: '#84cc16' },
{ offset: 1, color: '#a3e635' }
])
},
label: {
show: true,
position: 'right',
formatter: '{c}%',
color: '#f0f9ff'
}
}
],
title: {
text: '能耗对比 (HDD vs MED)',
textStyle: { color: '#cbd5e1', fontSize: 14, fontWeight: 'normal' },
left: 'center',
top: 5
}
};
powerChart.setOption(powerOption);
// ECharts for Timeline
var timelineChart = echarts.init(document.getElementById('timeline-chart'));
var timelineOption = {
backgroundColor: 'transparent',
tooltip: {
trigger: 'axis',
formatter: function (params) {
const param = params[0];
return `<strong>${param.name}</strong><br/>事件: ${param.value[2]}`;
}
},
grid: {
left: '5%',
right: '5%',
bottom: '10%',
top: '5%'
},
xAxis: {
type: 'time',
axisLine: { lineStyle: { color: '#475569' } },
axisLabel: { color: '#9ca3af' },
splitLine: { show: false }
},
yAxis: {
type: 'value',
show: false,
max: 1
},
series: [{
name: '关键事件',
type: 'scatter',
symbolSize: 15,
data: [
['2024-02-26', 0.5, 'MWC 2024: 华为首次公开展示磁电存储技术'],
['2025-09-11', 0.5, '市场传闻华为与斯迪克合作，引爆概念'],
['2025-09-18', 0.5, '预期: 华为全联接大会展示更多细节'],
['2025-11-19', 0.5, '预期: 数据存储产业大会'],
['2025-12-04', 0.5, '华为哈勃入股斯迪克子公司，合作落地'],
['2025-05-15', 0.5, '预期: OceanStor Arctic 正式发布 (H1)'],
['2025-06-01', 0.5, '预期: AI SSD 实现量产']
],
label: {
show: true,
position: 'bottom',
formatter: '{b}',
color: '#e0f2fe',
fontSize: 12,
formatter: function (params) {
const eventDate = new Date(params.name);
const month = eventDate.getMonth() + 1;
const day = eventDate.getDate();
const year = eventDate.getFullYear();
if (year > 2024) {
return `预期 ${year}.${month}`;
}
return `${year}.${month}`;
}
},
itemStyle: {
color: '#38bdf8'
},
emphasis: {
itemStyle: {
color: '#a3e635',
borderColor: '#a3e635',
borderWidth: 3,
shadowBlur: 10,
shadowColor: '#a3e635'
}
}
}]
};
timelineChart.setOption(timelineOption);
window.addEventListener('resize', function() {
powerChart.resize();
timelineChart.resize();
});
</script>
</body>
</html>