update pay ui

This commit is contained in:
2025-12-05 13:29:18 +08:00
parent 20994cfb13
commit 48d9c76c5e
1008 changed files with 417880 additions and 486974 deletions

View File

@@ -0,0 +1,429 @@
<!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>深度研报 | 华为存储OceanStor</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=Noto+Sans+SC:wght@300;400;500;700&display=swap');
body {
font-family: 'Noto Sans SC', sans-serif;
background-color: #020010;
background-image:
radial-gradient(at 27% 37%, hsla(215, 98%, 61%, 0.1) 0px, transparent 50%),
radial-gradient(at 97% 21%, hsla(125, 98%, 72%, 0.1) 0px, transparent 50%),
radial-gradient(at 52% 99%, hsla(355, 98%, 76%, 0.15) 0px, transparent 50%),
radial-gradient(at 10% 29%, hsla(256, 96%, 68%, 0.1) 0px, transparent 50%),
radial-gradient(at 97% 96%, hsla(38, 60%, 74%, 0.1) 0px, transparent 50%),
radial-gradient(at 33% 50%, hsla(222, 67%, 73%, 0.1) 0px, transparent 50%),
radial-gradient(at 79% 53%, hsla(343, 68%, 79%, 0.1) 0px, transparent 50%);
color: #E0E0E0;
}
.glass-card {
background: rgba(15, 23, 42, 0.4); /* slate-900 with alpha */
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
}
.glass-card:hover {
border-color: rgba(74, 222, 128, 0.4); /* green-400 */
box-shadow: 0 0 20px rgba(74, 222, 128, 0.2);
}
.bento-grid {
display: grid;
gap: 1rem;
grid-template-columns: repeat(6, 1fr);
grid-auto-rows: auto;
}
.grid-item-2x2 { grid-column: span 2; grid-row: span 2; }
.grid-item-4x2 { grid-column: span 4; grid-row: span 2; }
.grid-item-3x1 { grid-column: span 3; grid-row: span 1; }
.grid-item-3x2 { grid-column: span 3; grid-row: span 2; }
.grid-item-6x1 { grid-column: span 6; }
.title-glow {
text-shadow: 0 0 8px rgba(255, 255, 255, 0.3), 0 0 12px rgba(74, 222, 128, 0.3);
}
.highlight-text {
color: #67e8f9; /* cyan-300 */
font-weight: bold;
}
.daisy-collapse-title {
font-size: 1.125rem;
font-weight: 500;
}
.daisy-table th, .daisy-table td {
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.daisy-table {
background: transparent;
}
.daisy-table tr:hover {
background-color: rgba(255, 255, 255, 0.05);
}
</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-6 glass-card rounded-3xl">
<h1 class="text-4xl sm:text-5xl font-bold title-glow">深度研报:华为存储 OceanStor</h1>
<p class="mt-4 text-sm text-gray-400">北京价值前沿科技有限公司 AI投研agent“价小前投研” 进行投研呈现</p>
<p class="text-xs text-gray-500 mt-1">本报告为AI合成数据投资需谨慎。</p>
</header>
<!-- Insight Section -->
<main x-data="{ activeTab: 'insight' }">
<div class="text-sm font-medium text-center text-gray-400 border-b border-gray-700 mb-8">
<ul class="flex flex-wrap -mb-px">
<li class="mr-2">
<a href="#" @click.prevent="activeTab = 'insight'" class="inline-block p-4 border-b-2 rounded-t-lg" :class="{ 'text-cyan-400 border-cyan-400': activeTab === 'insight', 'border-transparent hover:text-gray-300 hover:border-gray-500': activeTab !== 'insight' }">核心洞察 (Insight)</a>
</li>
<li class="mr-2">
<a href="#" @click.prevent="activeTab = 'data'" class="inline-block p-4 border-b-2 rounded-t-lg" :class="{ 'text-cyan-400 border-cyan-400': activeTab === 'data', 'border-transparent hover:text-gray-300 hover:border-gray-500': activeTab !== 'data' }">原始数据摘要</a>
</li>
</ul>
</div>
<!-- Insight Content -->
<div x-show="activeTab === 'insight'" class="space-y-8">
<div class="bento-grid">
<!-- Core View -->
<div class="glass-card rounded-3xl p-6 grid-item-4x2 flex flex-col justify-center">
<h2 class="text-2xl font-bold text-green-400 mb-4">核心观点摘要</h2>
<p class="text-base text-gray-300">
华为存储OceanStor概念正处于由<strong class="text-cyan-300">成熟业务 (Dorado全闪存) 提供基本盘</strong>,并由<strong class="text-fuchsia-400">颠覆性创新业务 (Arctic磁电存储) 打开全新增长空间</strong>的关键节点。其核心驱动力是<strong class="text-yellow-300">AI时代数据爆炸</strong><strong class="text-yellow-300">地缘政治下的国产化替代</strong>双轮驱动。当前市场已从对存量业务的价值重估,转向对增量业务产业链机会的深度挖掘,概念正由主题炒作向基本面验证过渡。
</p>
</div>
<!-- Catalyst -->
<div class="glass-card rounded-3xl p-6 grid-item-2x2">
<h2 class="text-xl font-bold text-green-400 mb-3">关键催化剂</h2>
<ul class="space-y-2 text-sm list-disc list-inside text-gray-300">
<li><span class="font-semibold text-cyan-300">近期:</span>
<ul class="pl-4 mt-1 space-y-1">
<li><strong>Arctic正式发布:</strong> 预期2025上半年, MWC大会是关键窗口。</li>
<li><strong>产业链合作官宣:</strong> 如斯迪克与华为合资传闻证实。</li>
<li><strong>首个标杆项目落地:</strong> 获得亿元级大单。</li>
</ul>
</li>
<li class="mt-2"><span class="font-semibold text-fuchsia-400">长期:</span>
<ul class="pl-4 mt-1 space-y-1">
<li><strong>市场导入期 (25-26):</strong> 国内核心客户突破。</li>
<li><strong>生态扩张期 (26-28):</strong> 通过华为云大规模推广。</li>
<li><strong>标准引领期 (28+):</strong> 挑战LTO磁带渗透海外。</li>
</ul>
</li>
</ul>
</div>
<!-- Core Logic -->
<div class="glass-card rounded-3xl p-6 grid-item-3x2">
<h2 class="text-xl font-bold text-green-400 mb-3">核心驱动逻辑</h2>
<div class="space-y-3 text-sm text-gray-300">
<div>
<h4 class="font-semibold text-cyan-300">1. AI驱动的数据范式变革</h4>
<p class="text-xs text-gray-400">Dorado满足AI训练<strong class="text-white">热数据</strong>需求Arctic解决海量<strong class="text-white">温冷数据</strong>归档难题。应对未来十年存储需求增长<strong class="highlight-text">500倍</strong>的预测。</p>
</div>
<div>
<h4 class="font-semibold text-cyan-300">2. 国产化替代的必然选择</h4>
<p class="text-xs text-gray-400">受制裁倒逼自研Arctic是保障国家信息安全和产业链韧性的战略举措具备极强政策确定性。</p>
</div>
<div>
<h4 class="font-semibold text-cyan-300">3. 颠覆性技术成本重构</h4>
<p class="text-xs text-gray-400">磁电技术(MED)宣称<strong class="highlight-text">功耗降低90%</strong> (vs HDD) 和 <strong class="highlight-text">TCO降低20%</strong> (vs 磁带),有望重塑千亿级温冷数据存储市场。</p>
</div>
</div>
</div>
<!-- Expectation Gap & Risks -->
<div class="glass-card rounded-3xl p-6 grid-item-3x2">
<h2 class="text-xl font-bold text-red-400 mb-3">预期差与潜在风险</h2>
<div class="space-y-3 text-sm text-gray-300">
<div>
<h4 class="font-semibold text-yellow-300">预期差分析</h4>
<ul class="list-disc list-inside text-xs text-gray-400 space-y-1 mt-1">
<li><strong>低估生态壁垒:</strong> 市场热衷硬件,忽视华为软硬一体的“存储军团”护城河。</li>
<li><strong>忽视产品组合拳:</strong> 焦点在Arctic但Dorado的稳健现金流是其研发推广的关键支撑。</li>
<li><strong>对商业化挑战乐观:</strong> 路演指出<strong class="text-red-400">异构环境支持不足</strong>,可能成为混合云推广的巨大阻力。</li>
</ul>
</div>
<div>
<h4 class="font-semibold text-red-400">潜在风险</h4>
<ul class="list-disc list-inside text-xs text-gray-400 space-y-1 mt-1">
<li><strong>技术风险:</strong> 新技术MED的量产良率、长期可靠性待验证。</li>
<li><strong>商业化风险:</strong> 初期成本控制、客户锁定担忧、生态成熟度。</li>
<li><strong>信息交叉验证风险:</strong> <strong class="text-red-400">斯迪克合作仍是传闻</strong>,市场存在抢跑博弈。</li>
</ul>
</div>
</div>
</div>
<!-- Investment Insights -->
<div class="glass-card rounded-3xl p-6 grid-item-6x1">
<h2 class="text-xl font-bold text-green-400 mb-3">综合结论与投资启示</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
<div class="border-l-2 border-fuchsia-400 pl-3">
<h4 class="font-bold text-fuchsia-400">高风险高收益环节</h4>
<p class="text-xs text-gray-400 mt-1"><strong>Arctic的上游核心材料与设备。</strong> 这是从0到1的环节一旦技术路线被验证且核心供应商地位确立如斯迪克传闻将迎来戴维斯双击。风险极高高度依赖信息验证。</p>
</div>
<div class="border-l-2 border-cyan-400 pl-3">
<h4 class="font-bold text-cyan-400">稳健增长环节</h4>
<p class="text-xs text-gray-400 mt-1"><strong>与华为深度绑定的软件与服务生态伙伴。</strong>(如创意信息、中亦科技)。随着华为存储装机量的提升,这些公司的业务会水涨船高,确定性更强。</p>
</div>
<div class="border-l-2 border-yellow-400 pl-3">
<h4 class="font-bold text-yellow-400">Beta收益环节</h4>
<p class="text-xs text-gray-400 mt-1"><strong>核心分销渠道商。</strong>(如银信科技)。直接受益于华为存储产品线的全面放量,分享行业增长的红利,风险与弹性相对均衡。</p>
</div>
</div>
</div>
</div>
<!-- ECharts Ecosystem Graph -->
<div class="glass-card rounded-3xl p-6">
<h2 class="text-2xl font-bold text-green-400 mb-4 text-center">华为存储OceanStor 产业链生态图谱</h2>
<div id="ecosystem-chart" style="width: 100%; height: 500px;"></div>
</div>
</div>
<!-- Raw Data Summary -->
<div x-show="activeTab === 'data'" class="space-y-6">
<!-- News -->
<div class="daisy-collapse daisy-collapse-arrow glass-card rounded-2xl">
<input type="checkbox" />
<div class="daisy-collapse-title text-xl font-medium text-cyan-300">新闻数据摘要</div>
<div class="daisy-collapse-content text-gray-300">
<div class="p-4 space-y-4">
<div class="border-l-2 border-cyan-400 pl-4">
<h4 class="font-bold text-lg">OceanStor Dorado 全闪存存储</h4>
<ul class="list-disc list-inside mt-2 space-y-1 text-sm">
<li><strong>新一代产品发布 (2024-09-20):</strong> 极致性能、极致韧性、AI-Ready。达成<strong class="highlight-text">亿级IOPS</strong>、0.03ms低时延性能提升3倍。可靠性达<strong class="highlight-text">99.99999%</strong></li>
<li><strong>生态兼容性认证 (2024-12-17):</strong> 与信雅达ECM平台完成互认证保障金融行业稳定运行。</li>
<li><strong>市场中标 (2025-03-05):</strong> <strong class="highlight-text">独家中标</strong>中国移动全闪存存储扩容集采需求数量2360个。</li>
</ul>
</div>
<div class="border-l-2 border-fuchsia-400 pl-4">
<h4 class="font-bold text-lg">OceanStor Arctic 磁电存储</h4>
<ul class="list-disc list-inside mt-2 space-y-1 text-sm">
<li><strong>技术背景:</strong> 因制裁无法获得最新硬盘技术自主研发档案级MED磁电盘技术。</li>
<li><strong>发布预期:</strong> <strong class="highlight-text">2025年上半年</strong>全球上市MWC 2025 (3月3日)为关键观察点。</li>
<li><strong>技术优势:</strong> 相比硬盘功耗<strong class="highlight-text">降低90%</strong>;相比磁带总连接成本<strong class="highlight-text">降低20%</strong>带宽为其2.5倍。</li>
</ul>
</div>
<div class="border-l-2 border-yellow-400 pl-4">
<h4 class="font-bold text-lg">战略与生态</h4>
<ul class="list-disc list-inside mt-2 space-y-1 text-sm">
<li><strong>总裁观点:</strong> AI加速存储全闪化存储可增强计算提升AI集群利用率30%。</li>
<li><strong>公司战略:</strong> 华为云组织架构调整,<strong class="highlight-text">“存储”被列为核心业务之一</strong></li>
<li><strong>合作伙伴:</strong> 提及银信科技、创意信息、同有科技、斯迪克(传闻)、中电兴发等。</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Roadshows -->
<div class="daisy-collapse daisy-collapse-arrow glass-card rounded-2xl">
<input type="checkbox" />
<div class="daisy-collapse-title text-xl font-medium text-cyan-300">路演数据摘要</div>
<div class="daisy-collapse-content text-gray-300">
<div class="p-4 space-y-3">
<p><strong>英方软件 (2024-06-20):</strong> 将华为列为竞争者直接提及OceanStor。指出其优势是品牌捆绑和存储复制能力劣势是<strong class="text-red-400">异构环境支持不足,无法跨品牌数据同步</strong>。同时提及海外通过华为等合作方拓展业务。</p>
<p><strong>国产存储市场分析 (2024-07-24):</strong> 直接点名OceanStor将其定位为<strong class="highlight-text">国产存储系统的代表之一</strong>,在推动国产化进程中扮演重要角色。</p>
<p><strong>佰维存储 (2024-03-09):</strong> 提及“东莞松山湖投资暗示合作”,市场普遍解读为可能指向华为,是重要的潜在合作信息。</p>
<p><strong>供应链信息:</strong> 多次路演提及华为是国内<strong class="highlight-text">高端存储芯片如HBM的重要采购方</strong>,其采购策略影响整个上游供应链。</p>
</div>
</div>
</div>
<!-- Research Reports -->
<div class="daisy-collapse daisy-collapse-arrow glass-card rounded-2xl">
<input type="checkbox" />
<div class="daisy-collapse-title text-xl font-medium text-cyan-300">研报数据摘要</div>
<div class="daisy-collapse-content text-gray-300">
<div class="p-4 space-y-3">
<p><strong>明确产品定位:</strong> 在单DC部署组件规格中明确将<strong class="highlight-text">OceanStor S系列和9000系列</strong>作为SAN和NAS存储的推荐选项。</p>
<p><strong>核心技术支撑:</strong> OceanStor的<strong class="highlight-text">HyperMirror技术</strong>被明确指出是支撑云平台主备容灾、数据复制的核心功能。</p>
<p><strong>性能对标:</strong> 在《EMS弹性内存存储技术白皮书》中直接引用<strong class="highlight-text">基于OceanStor Dorado的存储解决方案</strong>其性能可达千万级IOPS。</p>
<p><strong>战略协同:</strong> 报告分析了OceanStor与EMS弹性内存存储的结合可能可作为持久化存储层共同构成“计算-内存-存储”三层架构。</p>
<p><strong>生态适配:</strong> 提及佰维存储等公司的产品已适配<strong class="highlight-text">华为鲲鹏平台</strong>为OceanStor深化国产化生态提供了潜在协同价值。</p>
</div>
</div>
</div>
</div>
</main>
<!-- Stock Data Section -->
<section class="space-y-8">
<h2 class="text-3xl font-bold text-center title-glow">相关标的分析</h2>
<!-- Main Stock List -->
<div class="glass-card rounded-3xl p-4 sm:p-6">
<h3 class="text-xl font-bold text-green-400 mb-4">核心产业链公司</h3>
<div class="overflow-x-auto">
<table class="daisy-table w-full text-sm">
<thead>
<tr class="text-gray-300">
<th>股票名称</th>
<th>关联原因</th>
<th>标签</th>
</tr>
</thead>
<tbody>
<tr><td><a href="https://valuefrontier.cn/company?scode=301208" target="_blank" class="hover:text-cyan-300">中亦科技 (301208)</a></td><td>与华为在IT基础架构多领域深入合作包括OceanStor型号存储设备。</td><td><div class="badge badge-primary badge-outline">解决方案</div></td></tr>
<tr><td><a href="https://valuefrontier.cn/company?scode=300212" target="_blank" class="hover:text-cyan-300">易华录 (300212)</a></td><td>华为在Oceanstor分布式存储中集成公司蓝光存储推出华为全品牌分级方案。</td><td><div class="badge badge-primary badge-outline">解决方案</div></td></tr>
<tr><td><a href="#" class="hover:text-cyan-300">创意信息</a></td><td>“存算分离&多主架构”方案融合万里数据库+华为参天引擎+华为OceanStor闪存。</td><td><div class="badge badge-primary badge-outline">软件生态</div></td></tr>
<tr><td><a href="https://valuefrontier.cn/company?scode=300047" target="_blank" class="hover:text-cyan-300">天源迪科 (300047)</a></td><td>控股子公司金华威是华为政企业务总经销商之一代理OceanStor产品。</td><td><div class="badge badge-accent badge-outline">销售渠道</div></td></tr>
<tr><td><a href="https://valuefrontier.cn/company?scode=300231" target="_blank" class="hover:text-cyan-300">银信科技 (300231)</a></td><td>华为存储一级经销商IT和数通安全CSP 4钻服务商。</td><td><div class="badge badge-accent badge-outline">销售渠道</div></td></tr>
<tr><td><a href="https://valuefrontier.cn/company?scode=300302" target="_blank" class="hover:text-cyan-300">同有科技 (300302)</a></td><td>深耕存储行业,有磁电存储技术布局,参与大客户生态建设。</td><td><div class="badge badge-secondary badge-outline">上游技术</div></td></tr>
<tr><td><a href="https://valuefrontier.cn/company?scode=603986" target="_blank" class="hover:text-cyan-300">兆易创新 (603986)</a></td><td>华为存储相关上游芯片供应商。</td><td><div class="badge badge-secondary badge-outline">上游芯片</div></td></tr>
<tr><td><a href="https://valuefrontier.cn/company?scode=000034" target="_blank" class="hover:text-cyan-300">神州数码 (000034)</a></td><td>华为核心经销商,代理其存储产品。</td><td><div class="badge badge-accent badge-outline">销售渠道</div></td></tr>
<tr><td><a href="https://valuefrontier.cn/company?scode=603019" target="_blank" class="hover:text-cyan-300">中科曙光 (603019)</a></td><td>国内存储与服务器巨头,与华为存在竞合关系。</td><td><div class="badge badge-warning badge-outline">竞争/合作</div></td></tr>
</tbody>
</table>
</div>
</div>
<!-- Rise Analysis -->
<div class="glass-card rounded-3xl p-4 sm:p-6">
<h3 class="text-xl font-bold text-green-400 mb-4">近期市场异动及解读</h3>
<div class="overflow-x-auto">
<table class="daisy-table w-full text-sm">
<thead>
<tr class="text-gray-300">
<th>股票名称</th>
<th>日期</th>
<th>涨幅</th>
<th class="w-2/3">驱动逻辑解析</th>
</tr>
</thead>
<tbody>
<tr><td><a href="https://valuefrontier.cn/company?scode=300806" target="_blank" class="hover:text-cyan-300">斯迪克 (300806)</a></td><td>2025-08-12</td><td><span class="text-red-400 font-bold">11.47%</span></td><td class="text-xs whitespace-pre-line"><strong>核心驱动:</strong> 市场传闻与华为合资成立存储公司,各持一半股权,涉及前沿的<strong class="highlight-text">磁电存储技术</strong><br><strong>解读:</strong> 作为与Arctic核心技术直接绑定的传闻标的逻辑最纯粹弹性最大引爆上游材料环节的投资情绪。风险在于传闻尚未证实。</td></tr>
<tr><td><a href="https://valuefrontier.cn/company?scode=603683" target="_blank" class="hover:text-cyan-300">晶华新材 (603683)</a></td><td>2025-09-16</td><td><span class="text-red-400 font-bold">10.00%</span></td><td class="text-xs whitespace-pre-line"><strong>核心驱动:</strong> “斯迪克-华为磁存储”事件外溢,资金寻找产业链比价机会。<br><strong>解读:</strong> 公司布局超薄电子离型膜并送样华为供应链,被视为斯迪克同类材料的低位补涨标的。</td></tr>
<tr><td><a href="https://valuefrontier.cn/company?scode=001309" target="_blank" class="hover:text-cyan-300">德明利 (001309)</a></td><td>2025-10-27</td><td><span class="text-red-400 font-bold">10.00%</span></td><td class="text-xs whitespace-pre-line"><strong>核心驱动:</strong> 确认中标<strong class="highlight-text">华为12.6亿元UFS3.1主控芯片大单</strong><br><strong>解读:</strong> 证实华为在存储上游巨大的采购需求和对国产供应链的扶持力度,业绩确定性强。</td></tr>
<tr><td><a href="https://valuefrontier.cn/company?scode=688228" target="_blank" class="hover:text-cyan-300">开普云 (688228)</a></td><td>2025-08-26</td><td><span class="text-red-400 font-bold">20.00%</span></td><td class="text-xs whitespace-pre-line"><strong>核心驱动:</strong> 公告收购金泰克70%股权后者为华为核心SSD/内存模组供应商。<br><strong>解读:</strong> 通过外延并购切入华为存储供应链,带来业绩与估值双重重估。</td></tr>
<tr><td><a href="https://valuefrontier.cn/company?scode=688525" target="_blank" class="hover:text-cyan-300">佰维存储 (688525)</a></td><td>2025-09-22</td><td><span class="text-red-400 font-bold">5.64%</span></td><td class="text-xs whitespace-pre-line"><strong>核心驱动:</strong> 行业景气度提升,券商报告强调其“华为生态”概念。<br><strong>解读:</strong> 作为存储模组企业,直接受益于行业上行周期,华为生态是其独特竞争优势。</td></tr>
</tbody>
</table>
</div>
</div>
</section>
</div>
<script>
var chartDom = document.getElementById('ecosystem-chart');
var myChart = echarts.init(chartDom, 'dark');
var option;
const data = {
nodes: [
{ id: '0', name: '华为OceanStor', symbolSize: 80, category: 0, label: { fontSize: 16 } },
{ id: '1', name: 'OceanStor Dorado\n(全闪存)', symbolSize: 50, category: 1 },
{ id: '2', name: 'OceanStor Arctic\n(磁电存储)', symbolSize: 50, category: 1 },
{ id: '3', name: '创意信息', symbolSize: 40, category: 2 },
{ id: '4', name: '中亦科技', symbolSize: 40, category: 2 },
{ id: '5', name: '易华录', symbolSize: 40, category: 2 },
{ id: '6', name: '英方软件', symbolSize: 40, category: 2 },
{ id: '7', name: '银信科技', symbolSize: 40, category: 3 },
{ id: '8', name: '天源迪科', symbolSize: 40, category: 3 },
{ id: '9', name: '神州数码', symbolSize: 40, category: 3 },
{ id: '10', name: '斯迪克', symbolSize: 40, category: 4 },
{ id: '11', name: '同有科技', symbolSize: 40, category: 4 },
{ id: '12', name: '兆易创新', symbolSize: 40, category: 5 },
{ id: '13', name: '德明利', symbolSize: 40, category: 5 },
{ id: '14', name: '佰维存储', symbolSize: 40, category: 5 },
{ id: '15', name: '中国移动', symbolSize: 40, category: 6 },
{ id: '16', name: '信雅达', symbolSize: 40, category: 6 },
],
links: [
{ source: '0', target: '1', name: '产品线' },
{ source: '0', target: '2', name: '产品线' },
{ source: '1', target: '3', name: '深度融合' },
{ source: '0', target: '4', name: '合作' },
{ source: '0', target: '5', name: '集成' },
{ source: '0', target: '6', name: '竞合/合作' },
{ source: '0', target: '7', name: '一级经销商' },
{ source: '0', target: '8', name: '总经销商' },
{ source: '0', target: '9', name: '经销商' },
{ source: '2', target: '10', name: '潜在核心材料(传闻)' },
{ source: '2', target: '11', name: '技术布局' },
{ source: '0', target: '12', name: '上游芯片' },
{ source: '0', target: '13', name: '上游主控' },
{ source: '0', target: '14', name: '生态伙伴' },
{ source: '1', target: '15', name: '大客户' },
{ source: '1', target: '16', name: '生态认证' },
],
categories: [
{ name: '核心概念' },
{ name: '产品线' },
{ name: '软件/解决方案' },
{ name: '销售/服务渠道' },
{ name: '上游材料/技术' },
{ name: '上游芯片/模组' },
{ name: '下游客户/生态' },
]
};
option = {
backgroundColor: 'transparent',
tooltip: {},
legend: {
data: data.categories.map(a => a.name),
textStyle: { color: '#ccc' },
top: 'bottom',
left: 'center'
},
series: [{
type: 'graph',
layout: 'force',
data: data.nodes,
links: data.links,
categories: data.categories,
roam: true,
label: {
show: true,
position: 'right',
formatter: '{b}',
color: '#E0E0E0'
},
lineStyle: {
color: 'source',
curveness: 0.1
},
emphasis: {
focus: 'adjacency',
lineStyle: {
width: 5
}
},
force: {
repulsion: 200,
edgeLength: [50, 100]
},
color: ['#00aaff', '#00ffc3', '#f472b6', '#facc15', '#a78bfa', '#ff7f50', '#87cefa']
}]
};
myChart.setOption(option);
window.addEventListener('resize', myChart.resize);
</script>
</body>
</html>