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,452 @@
<!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>英伟达H20 概念深度投研</title>
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.10.1/dist/full.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.tailwindcss.com"></script>
<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>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
background: #0a0a0a;
color: #e0e0e0;
overflow-x: hidden;
position: relative;
}
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background-image:
radial-gradient(circle at 20% 20%, rgba(56, 189, 248, 0.15) 0%, transparent 40%),
radial-gradient(circle at 80% 70%, rgba(168, 85, 247, 0.15) 0%, transparent 40%);
animation: pulse-glow 15s infinite alternate;
}
@keyframes pulse-glow {
0% {
opacity: 0.8;
transform: scale(1);
}
100% {
opacity: 1;
transform: scale(1.05);
}
}
.glass-card {
background: rgba(17, 24, 39, 0.6);
backdrop-filter: blur(16px) saturate(180%);
-webkit-backdrop-filter: blur(16px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
}
.glass-card:hover {
transform: translateY(-5px);
box-shadow: 0 0 25px rgba(168, 85, 247, 0.2), 0 0 40px rgba(56, 189, 248, 0.2);
border-color: rgba(255, 255, 255, 0.2);
}
.bento-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 1.5rem;
}
.bento-grid > div {
min-height: 180px;
}
.bento-grid .bento-item-large {
grid-column: span 2 / span 2;
}
.bento-grid .bento-item-wide {
grid-column: span 2 / span 2;
}
.concept-title {
font-size: 3.5rem;
font-weight: 700;
background: linear-gradient(90deg, #a78bfa, #38bdf8);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0 0 20px rgba(168, 85, 247, 0.3);
}
.section-title {
font-size: 1.8rem;
font-weight: 600;
color: #f0f0f0;
border-left: 4px solid #a78bfa;
padding-left: 1rem;
margin-bottom: 1.5rem;
}
.table thead th {
background-color: rgba(255, 255, 255, 0.05);
color: #a78bfa;
border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}
.table tbody tr {
transition: background-color 0.2s ease;
}
.table tbody tr:hover {
background-color: rgba(255, 255, 255, 0.07);
}
.tab {
transition: all 0.3s ease;
}
.tabs-bordered .tab-active {
border-color: #a78bfa;
color: #a78bfa;
background-color: rgba(167, 139, 250, 0.1);
}
.collapse-title {
background-color: rgba(255, 255, 255, 0.05);
}
.collapse:focus-within .collapse-title, .collapse-open .collapse-title {
background-color: rgba(167, 139, 250, 0.1);
}
</style>
</head>
<body class="p-4 md:p-8">
<header class="text-center mb-12">
<h1 class="concept-title">英伟达 H20</h1>
<p class="mt-4 text-lg text-gray-400">一个地缘政治夹缝中的政策驱动型、过渡性AI算力概念</p>
<div class="mt-4 text-xs text-gray-500 glass-card inline-block p-2 rounded-lg">
<p>由 北京价值前沿科技有限公司 AI投研agent“价小前投研” 进行投研呈现</p>
<p>本报告为AI合成数据投资需谨慎。</p>
</div>
</header>
<main class="container mx-auto space-y-12">
<!-- Event Timeline Section -->
<section class="glass-card p-6 rounded-3xl">
<h2 class="section-title">概念事件发展脉络</h2>
<div id="timeline-chart" style="width: 100%; height: 400px;"></div>
</section>
<!-- Core Insight & Data Bento Grid Section -->
<section class="grid grid-cols-1 xl:grid-cols-3 gap-8">
<div class="xl:col-span-2 space-y-8">
<!-- Core View Section -->
<div class="glass-card p-6 rounded-3xl">
<h2 class="section-title">核心观点摘要</h2>
<p class="text-gray-300 leading-relaxed">
英伟达H20概念的核心并非技术突破而是一个在地缘政治夹缝中求生的**政策驱动型、过渡性**产品概念。其当前阶段的本质是市场围绕“**政策不确定性**”与“**算力稀缺性**”的博弈核心驱动力在于美国出口管制的松紧以及中国国产替代的进程。其未来潜力并非在于H20产品本身而在于它所代表的英伟达维持中国市场份额的战略意图以及为下一代合规产品如Blackwell架构衍生品铺路的角色。
</p>
</div>
<!-- Core Logic Section -->
<div x-data="{ open: false }" class="glass-card p-6 rounded-3xl">
<h2 class="section-title cursor-pointer" @click="open = !open">核心逻辑与市场认知分析</h2>
<div x-show="open" x-collapse.duration.500ms>
<div class="space-y-4 text-gray-300 mt-4">
<div>
<h3 class="font-semibold text-sky-300">核心驱动力</h3>
<ul class="list-disc pl-6 space-y-2 mt-2">
<li><strong class="text-purple-400">政策驱动:</strong> H20的诞生、被禁、解禁每一步都由中美政策博弈主导。其存在的唯一理由是在合规框架下提供算力政策变动直接影响其价值。</li>
<li><strong class="text-purple-400">生态锁定:</strong> 尽管性能被“阉割”H20依然运行在成熟的CUDA生态之上。对于深度依赖CUDA的中国客户切换生态的迁移成本巨大H20旨在以“次优”硬件维持客户对“最优”软件生态的依赖。</li>
<li><strong class="text-purple-400">算力缺口:</strong> 在中国AI大模型发展的背景下高端算力缺口巨大。H20一度是市场上能批量获得的、在集群互联方面仍有优势的合规芯片之一。</li>
</ul>
</div>
<div>
<h3 class="font-semibold text-sky-300">市场热度与情绪</h3>
<p>市场情绪极为波动呈典型“事件驱动”特征。在“获得海外先进算力”的乐观预期和“依赖海外算力存在风险国产替代势在必行”的谨慎预期之间反复摇摆。乐观期如2025/7/15解禁算力租赁/IDC板块大涨悲观期如2025/4/15被禁、7/31被审查则催生对“国产替代”的炒作。</p>
</div>
<div>
<h3 class="font-semibold text-sky-300">预期差分析</h3>
<ul class="list-disc pl-6 space-y-2 mt-2">
<li><strong class="text-purple-400">产品力预期差:</strong> 市场初期可能低估了其性能削弱的程度。研报指出其AI算力不足H100的15%集群效率仅75%H100为85%+),竞争力远低于预期。</li>
<li><strong class="text-purple-400">盈利能力预期差:</strong> H20毛利率约50%显著低于公司整体水平约70%),一度拖累财报,更多是“战略性占位”而非“利润奶牛”。</li>
<li><strong class="text-purple-400">产品生命周期预期差:</strong> 黄仁勋已明确表示Hopper架构特供版不会再有后续。H20是生命周期短暂的过渡产品市场长期焦点应转向其继任者Blackwell架构新品</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- Bento Grid -->
<div class="space-y-8">
<div class="glass-card p-6 rounded-3xl bento-item">
<h3 class="font-bold text-lg text-sky-300">财务影响</h3>
<p class="text-5xl font-bold mt-2">$55亿</p>
<p class="text-gray-400">因出口限制计提的库存及采购承诺费用。</p>
<p class="text-xl font-bold mt-2">$105亿</p>
<p class="text-gray-400">对应的订单缺口。</p>
</div>
<div class="glass-card p-6 rounded-3xl bento-item">
<h3 class="font-bold text-lg text-sky-300">性能规格</h3>
<ul class="list-disc pl-5 mt-2 space-y-1 text-gray-300">
<li><strong class="text-purple-400">算力:</strong> 148 TFLOPS (FP16)不足H100的15%</li>
<li><strong class="text-purple-400">互联:</strong> 900 GB/s NVLink保留集群优势</li>
<li><strong class="text-purple-400">内存:</strong> 96GB HBM3容量优于H100</li>
<li><strong class="text-purple-400">生态:</strong> 继承CUDA生态系统</li>
</ul>
</div>
</div>
</section>
<!-- Catalysts & Risks -->
<section class="grid grid-cols-1 lg:grid-cols-2 gap-8">
<div class="glass-card p-6 rounded-3xl">
<h2 class="section-title">关键催化剂与发展路径</h2>
<div class="space-y-4">
<div>
<h3 class="font-semibold text-sky-300">近期催化剂 (未来3-6个月)</h3>
<ul class="list-disc pl-6 space-y-2 mt-2 text-gray-300">
<li><strong>中国网信办安全审查结果:</strong>决定H20能否大规模铺开的“生死线”。</li>
<li><strong>英伟达新财季报告:</strong>验证H20实际出货量和盈利能力。</li>
<li><strong>Blackwell架构中国特供芯片发布</strong>市场焦点将迅速转移。</li>
<li><strong>头部云厂商(阿里、字节)订单:</strong>市场需求回暖的强心针。</li>
</ul>
</div>
<div>
<h3 class="font-semibold text-sky-300">长期发展路径</h3>
<ul class="list-disc pl-6 space-y-2 mt-2 text-gray-300">
<li><strong>短期 (至2025年底):</strong> 库存消化与市场渗透阶段,与华为昇腾正面竞争。</li>
<li><strong>中期 (2026年):</strong> 产品迭代与格局重塑阶段Blackwell架构新品是关键。</li>
<li><strong>长期 (2027年+):</strong> 生态竞争与国产化平衡阶段,竞争关键转向软件生态与供应链安全。</li>
</ul>
</div>
</div>
</div>
<div class="glass-card p-6 rounded-3xl">
<h2 class="section-title">潜在风险与挑战</h2>
<div class="space-y-4 text-gray-300">
<div>
<h3 class="font-semibold text-red-400">政策风险</h3>
<p>贯穿始终的最大风险。美国政策不可预测,中国网信办安全审查是悬顶之剑。</p>
</div>
<div>
<h3 class="font-semibold text-red-400">商业化与竞争风险</h3>
<p>性能不足价格一度高于性能更强的华为910B市场接受度面临挑战。国产替代加速是最大威胁。</p>
</div>
<div>
<h3 class="font-semibold text-red-400">技术风险</h3>
<p>CUDA生态壁垒可能被突破后续合规产品设计难度和性能取舍更大可能“难产”或缺乏竞争力。</p>
</div>
<div>
<h3 class="font-semibold text-red-400">信息交叉验证风险</h3>
<p>关于订单量与库存的传闻存在矛盾,反映了市场信息混乱,增加了判断真实需求的难度。</p>
</div>
</div>
</div>
</section>
<!-- Data Summaries Section -->
<section x-data="{ tab: 'news' }" class="glass-card p-6 rounded-3xl">
<div role="tablist" class="tabs tabs-bordered">
<a role="tab" class="tab text-lg" :class="{'tab-active': tab === 'news'}" @click.prevent="tab = 'news'">新闻数据摘要</a>
<a role="tab" class="tab text-lg" :class="{'tab-active': tab === 'roadshow'}" @click.prevent="tab = 'roadshow'">路演纪要精粹</a>
<a role="tab" class="tab text-lg" :class="{'tab-active': tab === 'research'}" @click.prevent="tab = 'research'">研报核心观点</a>
</div>
<div class="mt-6 text-gray-300 leading-relaxed">
<!-- News Tab -->
<div x-show="tab === 'news'">
<ul class="list-disc pl-6 space-y-3">
<li><strong>订单与需求:</strong> 市场传闻向台积电追加30万片订单但官方未确认。现有库存超30万片。腾讯下单数十亿元由DeepSeek需求驱动。阿里、字节仍处观望。</li>
<li><strong>出口管制演变:</strong> 2025年4月16日美国要求H20对华出口需许可证。2025年7月黄仁勋确认美政府承诺批准许可证恢复销售。美方官员称不希望中方实现国产替代。</li>
<li><strong>中方安全审查:</strong> 2025年7月31日国家网信办就“追踪定位”、“远程关闭”等后门风险约谈英伟达。</li>
<li><strong>性能与价格:</strong> 峰值算力148Tflops@FP16保留互连带宽优势和CUDA生态。价格曾上涨8卡服务器约110万元。</li>
<li><strong>后续产品:</strong> 黄仁勋称Hopper架构特供版不再有后续将推出基于Blackwell架构的合规芯片。</li>
</ul>
</div>
<!-- Roadshow Tab -->
<div x-show="tab === 'roadshow'">
<ul class="list-disc pl-6 space-y-3">
<li><strong>量产与出货预测:</strong> 2024年Q2量产。2024年出货量预测约50万片。</li>
<li><strong>财务影响:</strong> H20毛利率较低Q1集中出货时对公司整体毛利率造成短期压力。因出口管制无法履行的订单金额达80亿美元相关库存和审计费用55亿美元。</li>
<li><strong>产品定位:</strong> H20是Hopper架构衍生品无后续H20系列。RTX Pro Server被视为潜在替代方案。</li>
<li><strong>技术细节:</strong> 国内云厂商实测H20集群利用率约75%低于H100的85%以上。</li>
<li><strong>监管影响:</strong> 网信办审查若未通过,将改变大芯片市场份额,加速国产替代。</li>
</ul>
</div>
<!-- Research Tab -->
<div x-show="tab === 'research'">
<ul class="list-disc pl-6 space-y-3">
<li><strong>产品定位与特性:</strong> H100的“阉割版”算力仅为其六分之一但内存容量(96GB)和带宽(4.0TB/s)有优势。生产成本高于H100毛利约50%。</li>
<li><strong>政策时间线:</strong> 2025/04/15美国限制生效 -> 2025/07美国批准恢复销售。限制不仅针对H20还涵盖同等内存带宽产品堵住“漏洞”。</li>
<li><strong>市场与财务:</strong> 55亿美元库存减记对应约110万颗H20芯片。2024年贡献收入约120-150亿美元。因需求不佳价格一度下调至低于华为Ascend 910B。</li>
<li><strong>国产替代机遇:</strong> H20的波折被视为加速国产算力替代的关键窗口期华为昇腾等厂商有望承接市场份额。</li>
</ul>
</div>
</div>
</section>
<!-- Rise Analysis -->
<section class="glass-card p-6 rounded-3xl">
<h2 class="section-title">关键事件日涨幅分析</h2>
<div class="space-y-4">
<div class="collapse collapse-plus glass-card">
<input type="radio" name="rise-accordion" checked="checked" />
<div class="collapse-title text-xl font-medium">
2025-07-15: H20恢复销售事件
</div>
<div class="collapse-content">
<p class="text-gray-400 mb-4">英伟达CEO黄仁勋宣布美国已批准H20芯片销往中国直接引爆算力租赁、IDC等概念市场对“算力荒”缓解预期强烈。</p>
<ul class="list-disc pl-5 space-y-2">
<li><strong class="text-sky-300">润泽科技 (300442):</strong> <span class="text-green-400 font-semibold">+9.49%</span>。作为AIDC龙头直接受益于AI算力需求增长和云厂商资本开支回暖预期获多家机构集中推荐。</li>
<li><strong class="text-sky-300">科华数据 (002335):</strong> <span class="text-green-400 font-semibold">+6.95%</span>。兼具算力租赁和液冷服务器双重概念,业务与算力基础设施高度契合,受板块整体走强带动。</li>
<li><strong class="text-sky-300">光环新网 (300383):</strong> <span class="text-green-400 font-semibold">+7.33%</span>。除受益于H20解禁外公司内蒙能评即将下达的预期提供了额外的业绩增长空间。</li>
</ul>
</div>
</div>
<div class="collapse collapse-plus glass-card">
<input type="radio" name="rise-accordion" />
<div class="collapse-title text-xl font-medium">
2025-07-31: 网信办安全审查事件
</div>
<div class="collapse-content">
<p class="text-gray-400 mb-4">网信办通报英伟达H20芯片存在安全隐患并进行约谈市场对海外算力依赖的担忧加剧国产算力替代预期迅速升温。</p>
<ul class="list-disc pl-5 space-y-2">
<li><strong class="text-sky-300">川润股份 (002272):</strong> <span class="text-green-400 font-semibold">+9.98%</span>。作为华为昇腾AI服务器液冷核心配套商被视为国产算力替代逻辑的直接受益者资金迅速追捧。</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Industry Chain & Stock Table -->
<section class="glass-card p-6 rounded-3xl">
<h2 class="section-title">产业链图谱与核心公司</h2>
<div class="overflow-x-auto">
<table class="table table-zebra w-full">
<thead>
<tr>
<th>产业链环节</th>
<th>股票名称</th>
<th>股票代码</th>
<th>核心逻辑</th>
</tr>
</thead>
<tbody>
<!-- 代理分销 -->
<tr><td rowspan="5" class="font-bold align-middle bg-purple-900/30 text-purple-300">代理分销</td><td>弘信电子</td><td><a href="https://valuefrontier.cn/company?scode=300657" target="_blank" class="link link-hover text-sky-400">300657</a></td><td>子公司安联通是英伟达中国区精英级(Elite)合作伙伴。</td></tr>
<tr><td>神州数码</td><td><a href="https://valuefrontier.cn/company?scode=000034" target="_blank" class="link link-hover text-sky-400">000034</a></td><td>英伟达的分销合作伙伴。</td></tr>
<tr><td>中电港</td><td><a href="https://valuefrontier.cn/company?scode=001287" target="_blank" class="link link-hover text-sky-400">001287</a></td><td>英伟达在国内的授权分销商之一代理数据中心GPU。</td></tr>
<tr><td>鸿博股份</td><td><a href="https://valuefrontier.cn/company?scode=002229" target="_blank" class="link link-hover text-sky-400">002229</a></td><td>英伟达DGX系列AI服务器的用户和运营方。</td></tr>
<tr><td>先进数通</td><td><a href="https://valuefrontier.cn/company?scode=300541" target="_blank" class="link link-hover text-sky-400">300541</a></td><td>英伟达Solution Provider领域Elite级代理。</td></tr>
<!-- 英伟达服务器 -->
<tr><td rowspan="5" class="font-bold align-middle bg-sky-900/30 text-sky-300">英伟达服务器</td><td>工业富联</td><td><a href="https://valuefrontier.cn/company?scode=601138" target="_blank" class="link link-hover text-sky-400">601138</a></td><td>为客户开发并量产英伟达的H100及H800等高性能AI服务器。</td></tr>
<tr><td>华勤技术</td><td><a href="https://valuefrontier.cn/company?scode=603296" target="_blank" class="link link-hover text-sky-400">603296</a></td><td>量产出货最新的NV L20 GPU AI服务器产品。</td></tr>
<tr><td>浪潮信息</td><td><a href="https://valuefrontier.cn/company?scode=000977" target="_blank" class="link link-hover text-sky-400">000977</a></td><td>服务器系统架构、散热、电源等领域技术积累深厚。</td></tr>
<tr><td>航锦科技</td><td><a href="https://valuefrontier.cn/company?scode=000818" target="_blank" class="link link-hover text-sky-400">000818</a></td><td>元景系列H208U8卡Nvlink即将发布。</td></tr>
<tr><td>紫光股份</td><td><a href="https://valuefrontier.cn/company?scode=000938" target="_blank" class="link link-hover text-sky-400">000938</a></td><td>NVIDIA 数据中心GPU, DGX 系统等中国区总代理。</td></tr>
<!-- 供应商 -->
<tr><td rowspan="6" class="font-bold align-middle bg-teal-900/30 text-teal-300">核心供应商</td><td>胜宏科技</td><td><a href="https://valuefrontier.cn/company?scode=300476" target="_blank" class="link link-hover text-sky-400">300476</a></td><td>2023年PCB板产品切入英伟达的H系列AI加速卡。</td></tr>
<tr><td>东阳光</td><td><a href="https://valuefrontier.cn/company?scode=600673" target="_blank" class="link link-hover text-sky-400">600673</a></td><td>液冷散热,间接嵌入英伟达供应链生态。</td></tr>
<tr><td>铂科新材</td><td><a href="https://valuefrontier.cn/company?scode=300811" target="_blank" class="link link-hover text-sky-400">300811</a></td><td>通过客户合作为终端GPU厂商提供芯片电感产品。</td></tr>
<tr><td>麦格米特</td><td><a href="https://valuefrontier.cn/company?scode=002851" target="_blank" class="link link-hover text-sky-400">002851</a></td><td>服务器电源指定供应商参与GB200系统设计。</td></tr>
<tr><td>钧崴电子</td><td><a href="https://valuefrontier.cn/company?scode=301458" target="_blank" class="link link-hover text-sky-400">301458</a></td><td>电流感测精密电阻产品应用于英伟达GB300系列。</td></tr>
<tr><td>江海股份</td><td><a href="https://valuefrontier.cn/company?scode=002484" target="_blank" class="link link-hover text-sky-400">002484</a></td><td>电容器产品适配英伟达GB300芯片方案。</td></tr>
<!-- 算力中心 -->
<tr><td rowspan="2" class="font-bold align-middle bg-indigo-900/30 text-indigo-300">算力中心</td><td>鸿博股份</td><td><a href="https://valuefrontier.cn/company?scode=002229" target="_blank" class="link link-hover text-sky-400">002229</a></td><td>与英伟达等合作成立北京AI创新赋能中心。</td></tr>
<tr><td>润建股份</td><td><a href="https://valuefrontier.cn/company?scode=002929" target="_blank" class="link link-hover text-sky-400">002929</a></td><td>与英伟达合作伙伴安联通开展算力项目合作。</td></tr>
</tbody>
</table>
</div>
</section>
</main>
<footer class="text-center mt-12 py-4 text-xs text-gray-600">
<p>报告生成时间: <span id="generation-time"></span></p>
<p>北京价值前沿科技有限公司 | AI Agent "价小前投研"出品</p>
</footer>
<script>
document.getElementById('generation-time').textContent = new Date().toLocaleString();
// ECharts Timeline Initialization
var chartDom = document.getElementById('timeline-chart');
var myChart = echarts.init(chartDom, 'dark');
var option;
const data = [
{ value: [new Date('2024-01-22'), 0], name: '路演披露', detail: '首次披露H20量产计划、定位与性能预计Q2量产。' },
{ value: [new Date('2025-04-15'), 1], name: '管制升级', detail: '美国通知H20对华出口需许可证且“无限期”有效。' },
{ value: [new Date('2025-07-15'), 2], name: '政策转圜', detail: '黄仁勋确认美政府将批准许可证,恢复对华销售。' },
{ value: [new Date('2025-07-31'), 3], name: '中方审查', detail: '中国网信办就后门安全风险约谈英伟达。' }
];
option = {
backgroundColor: 'transparent',
tooltip: {
trigger: 'axis',
formatter: function (params) {
const item = data[params[0].dataIndex];
return `<strong>${item.name}</strong><br/>${echarts.format.formatTime('yyyy-MM-dd', item.value[0])}<br/>${item.detail}`;
}
},
grid: {
left: '10%',
right: '10%',
bottom: '15%',
top: '10%'
},
xAxis: {
type: 'time',
axisLine: { lineStyle: { color: '#8392A5' } }
},
yAxis: {
type: 'value',
show: false,
min: -1,
max: 4,
},
series: [{
name: '事件',
type: 'line',
symbol: 'circle',
symbolSize: 15,
lineStyle: {
color: '#a78bfa',
width: 2,
type: 'dashed'
},
itemStyle: {
borderWidth: 2,
borderColor: '#a78bfa',
color: '#38bdf8'
},
label: {
show: true,
position: 'top',
formatter: '{b}',
color: '#e0e0e0',
fontSize: 14,
},
data: data.map(item => ({
name: item.name,
value: item.value,
label: {
position: item.value[1] % 2 === 0 ? 'top' : 'bottom',
}
})),
}]
};
option && myChart.setOption(option);
window.addEventListener('resize', myChart.resize);
</script>
</body>
</html>