update pay ui
This commit is contained in:
@@ -1,554 +1,448 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<html lang="zh-CN" data-theme="night">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>利基型存储DDR4行业分析</title>
|
||||
<!-- Bootstrap 5 CSS -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<!-- Font Awesome -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
<!-- Chart.js -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||
<title>深度行研 | 利基型存储DDR4</title>
|
||||
|
||||
<!-- Tailwind CSS & DaisyUI -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.10.2/dist/full.min.css" rel="stylesheet" type="text/css" />
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
|
||||
<!-- Alpine.js -->
|
||||
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.0/dist/cdn.min.js"></script>
|
||||
|
||||
<!-- ECharts -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js"></script>
|
||||
|
||||
<!-- Google Fonts -->
|
||||
<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=Inter:wght@300;400;500;600;700&family=Roboto+Mono:wght@400;700&display=swap" rel="stylesheet">
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--primary-color: #3b82f6;
|
||||
--secondary-color: #64748b;
|
||||
--accent-color: #f59e0b;
|
||||
--light-bg: #f8fafc;
|
||||
--dark-text: #1e293b;
|
||||
--glow-color: rgba(0, 255, 255, 0.7);
|
||||
--glow-spread: 8px;
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
color: var(--dark-text);
|
||||
background-color: var(--light-bg);
|
||||
font-family: 'Inter', sans-serif;
|
||||
background-color: #020010;
|
||||
background-image:
|
||||
radial-gradient(circle at 15% 15%, rgba(10, 88, 202, 0.3) 0%, transparent 30%),
|
||||
radial-gradient(circle at 85% 75%, rgba(138, 43, 226, 0.2) 0%, transparent 40%);
|
||||
background-attachment: fixed;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
.glass-card {
|
||||
background: rgba(10, 10, 30, 0.5);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.hero-section {
|
||||
background: linear-gradient(135deg, #1e3a8a, #3b82f6);
|
||||
color: white;
|
||||
padding: 3rem 0;
|
||||
border-radius: 0 0 1rem 1rem;
|
||||
.glass-card:hover {
|
||||
border-color: rgba(0, 255, 255, 0.3);
|
||||
box-shadow: 0 0 20px rgba(0, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.card {
|
||||
border: none;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
margin-bottom: 1.5rem;
|
||||
|
||||
.glow-text {
|
||||
color: #fff;
|
||||
text-shadow:
|
||||
0 0 5px rgba(255, 255, 255, 0.8),
|
||||
0 0 10px var(--glow-color),
|
||||
0 0 15px var(--glow-color);
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
|
||||
|
||||
.bento-grid {
|
||||
display: grid;
|
||||
gap: 1.5rem;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
}
|
||||
|
||||
.table-responsive {
|
||||
border-radius: 0.5rem;
|
||||
|
||||
.bento-item {
|
||||
border-radius: 1.5rem;
|
||||
padding: 1.5rem;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.table {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.table thead th {
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
border: none;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
font-size: 0.8rem;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.table tbody tr:nth-of-type(odd) {
|
||||
background-color: rgba(248, 250, 252, 0.5);
|
||||
}
|
||||
|
||||
.table tbody tr:hover {
|
||||
background-color: rgba(59, 130, 246, 0.1);
|
||||
}
|
||||
|
||||
.badge {
|
||||
font-weight: 500;
|
||||
padding: 0.4em 0.8em;
|
||||
}
|
||||
|
||||
.badge-product {
|
||||
background-color: #3b82f6;
|
||||
}
|
||||
|
||||
.badge-agent {
|
||||
background-color: #8b5cf6;
|
||||
}
|
||||
|
||||
.badge-chip {
|
||||
background-color: #ec4899;
|
||||
}
|
||||
|
||||
.badge-package {
|
||||
background-color: #10b981;
|
||||
}
|
||||
|
||||
.revenue-cell {
|
||||
font-weight: 600;
|
||||
color: #059669;
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
position: relative;
|
||||
height: 300px;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
position: relative;
|
||||
margin-bottom: 2rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.section-title:after {
|
||||
.bento-item::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 60px;
|
||||
height: 3px;
|
||||
background-color: var(--primary-color);
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255, 255, 255, 0.05), transparent 40%);
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.info-card {
|
||||
border-left: 4px solid var(--primary-color);
|
||||
padding-left: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
|
||||
.bento-item:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.stock-highlight {
|
||||
background-color: rgba(59, 130, 246, 0.1);
|
||||
border-radius: 0.25rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
|
||||
.timeline {
|
||||
position: relative;
|
||||
padding-left: 2rem;
|
||||
border-left: 2px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
.timeline-item {
|
||||
position: relative;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
.timeline-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.timeline-dot {
|
||||
position: absolute;
|
||||
left: -2.5rem;
|
||||
top: 0.25rem;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
border-radius: 50%;
|
||||
background-color: var(--glow-color);
|
||||
box-shadow: 0 0 10px var(--glow-color);
|
||||
}
|
||||
.timeline-date {
|
||||
font-family: 'Roboto Mono', monospace;
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.table thead th {
|
||||
background-color: rgba(10, 10, 30, 0.7);
|
||||
color: #00ffff;
|
||||
font-weight: 600;
|
||||
border-bottom: 2px solid rgba(0, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
footer {
|
||||
background-color: #1e293b;
|
||||
color: white;
|
||||
padding: 2rem 0;
|
||||
margin-top: 3rem;
|
||||
|
||||
.table tbody tr {
|
||||
background-color: transparent;
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.hero-section {
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
.table {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.table thead th {
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
.table tbody tr:hover {
|
||||
background-color: rgba(0, 255, 255, 0.05);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Navigation -->
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="#">
|
||||
<i class="fas fa-microchip me-2"></i>存储芯片分析
|
||||
</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarNav">
|
||||
<ul class="navbar-nav ms-auto">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="#overview">行业概览</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#stocks">股票数据</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#analysis">数据分析</a>
|
||||
</li>
|
||||
<body x-data="{}"
|
||||
@mousemove.window="
|
||||
let items = document.querySelectorAll('.bento-item');
|
||||
items.forEach(item => {
|
||||
const rect = item.getBoundingClientRect();
|
||||
item.style.setProperty('--mouse-x', `${event.clientX - rect.left}px`);
|
||||
item.style.setProperty('--mouse-y', `${event.clientY - rect.top}py`);
|
||||
})
|
||||
">
|
||||
|
||||
<div class="container mx-auto p-4 md:p-8 max-w-screen-2xl">
|
||||
|
||||
<!-- Header -->
|
||||
<header class="text-center mb-12">
|
||||
<h1 class="text-4xl md:text-6xl font-bold glow-text mb-4">深度行研:利基型存储DDR4</h1>
|
||||
<p class="text-sm text-gray-400">北京价值前沿科技有限公司 AI投研agent:“价小前投研” 进行投研呈现</p>
|
||||
<p class="text-xs text-gray-500 mt-2">免责声明:本报告由AI基于多源数据合成,旨在提供研究参考,不构成任何投资建议,投资需谨慎。</p>
|
||||
</header>
|
||||
|
||||
<!-- Insight & Analysis Section -->
|
||||
<main class="bento-grid">
|
||||
|
||||
<!-- Core Viewpoint -->
|
||||
<div class="bento-item glass-card col-span-12 lg:col-span-7">
|
||||
<h2 class="text-2xl font-bold mb-4 glow-text">核心观点摘要</h2>
|
||||
<p class="text-gray-300 leading-relaxed">
|
||||
利基型存储DDR4概念的核心逻辑并非自身需求的爆发式增长,而是由AI驱动高端存储(HBM/DDR5)需求激增,引发国际原厂战略性产能退出,从而制造了一场剧烈的、阶段性的<strong class="text-cyan-300">供给侧危机</strong>。这场危机与下游应用短期内的<strong class="text-cyan-300">需求刚性</strong>形成错配,催生了DDR4价格的超级周期,为拥有低成本库存的模组厂和具备承接能力的国产设计厂商带来了显著的业绩弹性窗口。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Core Logic -->
|
||||
<div class="bento-item glass-card col-span-12 lg:col-span-5">
|
||||
<h2 class="text-2xl font-bold mb-4 glow-text">核心驱动力</h2>
|
||||
<p class="text-gray-300 leading-relaxed">
|
||||
本质是<strong class="text-cyan-300">“产能挤出效应”</strong>。高端AI需求挤出低端DDR4供给,而低端需求短期无法迁移(切换周期约9-12个月),形成剧烈供需缺口。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Event Timeline & Price Chart -->
|
||||
<div class="bento-item glass-card col-span-12 lg:col-span-8">
|
||||
<h2 class="text-2xl font-bold mb-6 glow-text">概念事件与价格爆发</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="timeline">
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-dot"></div>
|
||||
<p class="timeline-date">~2024 Q3</p>
|
||||
<h3 class="font-semibold text-lg">转折前夜</h3>
|
||||
<p class="text-sm text-gray-400">DDR4产能过剩,原厂降价冲击,国内厂商价格承压。</p>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-dot" style="--glow-color: rgba(255, 165, 0, 0.7);"></div>
|
||||
<p class="timeline-date">2024 Q4 - 2025 Q1</p>
|
||||
<h3 class="font-semibold text-lg text-orange-300">战略转向</h3>
|
||||
<p class="text-sm text-gray-400">AI驱动HBM/DDR5需求爆发,国际原厂(三星/海力士/美光)宣布逐步退出DDR4产能。</p>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-dot" style="--glow-color: rgba(255, 0, 0, 0.7);"></div>
|
||||
<p class="timeline-date">2025 Q2 至今</p>
|
||||
<h3 class="font-semibold text-lg text-red-400">供需失衡</h3>
|
||||
<p class="text-sm text-gray-400">供应急剧收缩,价格飙升,出现高于DDR5的“价格倒挂”现象。</p>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-dot" style="--glow-color: rgba(0, 255, 0, 0.7);"></div>
|
||||
<p class="timeline-date">2025 H2 以后</p>
|
||||
<h3 class="font-semibold text-lg text-green-400">国产替代</h3>
|
||||
<p class="text-sm text-gray-400">原厂退出创造结构性机遇,兆易创新等国内厂商加速承接市场份额。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-semibold text-lg mb-2 text-center">DDR4 8Gb 现货价格飙升 (2025 Q2)</h3>
|
||||
<div id="priceChart" style="width: 100%; height: 280px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Catalysts -->
|
||||
<div class="bento-item glass-card col-span-12 lg:col-span-4">
|
||||
<h2 class="text-2xl font-bold mb-4 glow-text">关键催化剂</h2>
|
||||
<ul class="space-y-3 list-disc list-inside text-gray-300">
|
||||
<li><strong class="text-cyan-400">业绩验证:</strong>相关公司Q3/Q4财报毛利率和利润大幅改善。</li>
|
||||
<li><strong class="text-cyan-400">价格数据:</strong>合约价涨幅持续超预期。</li>
|
||||
<li><strong class="text-cyan-400">原厂动作:</strong>三星/美光等发布更多产线关停或转产公告。</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section class="hero-section">
|
||||
<div class="container">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-lg-8">
|
||||
<h1 class="display-5 fw-bold mb-3">利基型存储DDR4行业分析</h1>
|
||||
<p class="lead mb-4">深入解析DDR4存储芯片产业链,挖掘投资机会与行业趋势</p>
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
<span class="badge bg-light text-dark">存储芯片</span>
|
||||
<span class="badge bg-light text-dark">DDR4</span>
|
||||
<span class="badge bg-light text-dark">半导体</span>
|
||||
<span class="badge bg-light text-dark">国产替代</span>
|
||||
<!-- Industry Chain -->
|
||||
<div class="bento-item glass-card col-span-12">
|
||||
<h2 class="text-2xl font-bold mb-4 glow-text">产业链与核心公司剖析</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 text-center">
|
||||
<div>
|
||||
<h3 class="font-semibold text-lg border-b border-cyan-500 pb-2 mb-3 text-cyan-300">上游:核心零部件</h3>
|
||||
<p><strong>DRAM晶圆:</strong> 三星/海力士(退出中)</p>
|
||||
<p><strong>内存接口芯片:</strong> <span class="font-mono bg-gray-700 px-2 py-1 rounded">澜起科技</span></p>
|
||||
<p><strong>SPD芯片 (EEPROM):</strong> <span class="font-mono bg-gray-700 px-2 py-1 rounded">聚辰股份</span></p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-semibold text-lg border-b border-purple-500 pb-2 mb-3 text-purple-300">中游:概念核心</h3>
|
||||
<p><strong>Fabless设计:</strong> <span class="font-mono bg-gray-700 px-2 py-1 rounded">兆易创新</span>, <span class="font-mono bg-gray-700 px-2 py-1 rounded">北京君正</span></p>
|
||||
<p><strong>存储模组:</strong> <span class="font-mono bg-gray-700 px-2 py-1 rounded">江波龙</span>, <span class="font-mono bg-gray-700 px-2 py-1 rounded">佰维存储</span></p>
|
||||
<p><strong>封测服务:</strong> <span class="font-mono bg-gray-700 px-2 py-1 rounded">深科技</span>, <span class="font-mono bg-gray-700 px-2 py-1 rounded">太极实业</span></p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-semibold text-lg border-b border-green-500 pb-2 mb-3 text-green-300">下游:分销与应用</h3>
|
||||
<p><strong>代理分销:</strong> <span class="font-mono bg-gray-700 px-2 py-1 rounded">香农芯创</span></p>
|
||||
<p><strong>终端应用:</strong> PC, 服务器, 消费电子, 通信, 工控, 汽车等</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 text-center">
|
||||
<i class="fas fa-memory" style="font-size: 8rem; opacity: 0.7;"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="container my-5">
|
||||
<!-- Overview Section -->
|
||||
<section id="overview" class="mb-5">
|
||||
<h2 class="section-title">行业概览</h2>
|
||||
<div class="row">
|
||||
<div class="col-lg-8">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">利基型存储DDR4市场现状</h5>
|
||||
<p class="card-text">
|
||||
DDR4作为当前主流的内存技术标准,在利基市场(如消费电子、工业控制、物联网等领域)仍具有广泛应用。随着原厂产能调整和国产化进程加速,国内企业在DDR4领域持续发力,从产品设计、制造到封测形成完整产业链。
|
||||
</p>
|
||||
<div class="info-card">
|
||||
<h6>核心趋势</h6>
|
||||
<ul>
|
||||
<li>原厂产能向DDR5转移,利基型DDR4市场供给结构性变化</li>
|
||||
<li>国内厂商加速DDR4产品研发与量产,国产替代空间广阔</li>
|
||||
<li>消费级、企业级DDR4产品需求稳定,嵌入式市场持续增长</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Risks -->
|
||||
<div class="bento-item glass-card col-span-12 lg:col-span-6">
|
||||
<h2 class="text-2xl font-bold mb-4 glow-text">潜在风险与挑战</h2>
|
||||
<ul class="space-y-3 list-disc list-inside text-gray-300">
|
||||
<li><strong class="text-red-400">需求崩塌风险:</strong> 高价格倒逼下游加速向DDR5迁移,缩短景气周期。</li>
|
||||
<li><strong class="text-red-400">库存风险:</strong> 对模组厂而言,价格拐点出现将面临库存减值损失。</li>
|
||||
<li><strong class="text-red-400">竞争格局变化:</strong> 其他二线厂商扩产或原厂策略反复,可能缓解供应紧张。</li>
|
||||
<li><strong class="text-red-400">市场突变风险:</strong> 存储市场景气度变化极快,当前的超级景气也可能被新变量迅速逆转。</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Conclusion -->
|
||||
<div class="bento-item glass-card col-span-12 lg:col-span-6">
|
||||
<h2 class="text-2xl font-bold mb-4 glow-text">综合结论与投资启示</h2>
|
||||
<p class="mb-4 text-gray-300">
|
||||
利基型DDR4概念已进入<strong class="text-cyan-300">基本面驱动阶段</strong>,具备典型的“高弹性、短周期”特征。投资窗口由结构性、阶段性的供给冲击创造,其持续性高度依赖于下游需求向DDR5迁移的速度。
|
||||
</p>
|
||||
<div class="space-y-2">
|
||||
<p><strong class="text-green-400">逻辑最硬环节:</strong> 国内利基型DRAM设计厂商 (如 <strong class="text-white">兆易创新</strong>),承接长期市场份额。</p>
|
||||
<p><strong class="text-yellow-400">短期弹性最大环节:</strong> 存储模组厂商 (如 <strong class="text-white">江波龙、佰维存储</strong>),受益于库存价值重估。</p>
|
||||
</div>
|
||||
<div class="col-lg-4">
|
||||
<div class="card h-100">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">产业链分布</h5>
|
||||
<div class="chart-container">
|
||||
<canvas id="categoryChart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
<!-- Supporting Data Section -->
|
||||
<section class="mt-12" x-data="{ openTab: 'news' }">
|
||||
<h2 class="text-3xl font-bold text-center mb-8 glow-text">底层数据支撑</h2>
|
||||
|
||||
<div class="tabs tabs-boxed justify-center glass-card max-w-lg mx-auto mb-6">
|
||||
<a class="tab tab-lg" :class="{ 'tab-active !text-cyan-300': openTab === 'news' }" @click.prevent="openTab = 'news'">新闻数据</a>
|
||||
<a class="tab tab-lg" :class="{ 'tab-active !text-cyan-300': openTab === 'roadshow' }" @click.prevent="openTab = 'roadshow'">路演纪要</a>
|
||||
<a class="tab tab-lg" :class="{ 'tab-active !text-cyan-300': openTab === 'research' }" @click.prevent="openTab = 'research'">研报观点</a>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4">
|
||||
<!-- News Data -->
|
||||
<div x-show="openTab === 'news'" class="glass-card p-6 rounded-2xl animate-fade-in">
|
||||
<h3 class="text-xl font-bold mb-4 text-cyan-300">新闻数据摘要</h3>
|
||||
<ul class="space-y-3 list-disc list-inside text-gray-300">
|
||||
<li><strong>核心事件:</strong> AI驱动高端存储需求激增,三星/SK海力士/美光等原厂将产能转向HBM/DDR5,并计划停产或减产DDR4。</li>
|
||||
<li><strong>价格动态:</strong> 自2025年Q2起,DDR4价格迅猛上涨。部分型号DDR4价格一月内涨近50%,Q2累计涨幅达156%。9月DDR4 16G/8G环比上升41.3%/30.6%。</li>
|
||||
<li><strong>价格倒挂:</strong> 部分DDR4报价已高于高规格的DDR5。例如,DDR4 16Gb报价8.2美元,高于DDR5 16Gb的5.90美元。</li>
|
||||
<li><strong>涨价原因:</strong> 核心原因是原厂产能转移。次要原因是下游因长尾需求紧急建库,加剧供应短缺。</li>
|
||||
<li><strong>国产机遇:</strong> 国际大厂的战略调整为国内存储厂商(如兆易创新、北京君正、东芯股份)创造了结构性市场机遇,有望持续提升份额。</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Roadshow Data -->
|
||||
<div x-show="openTab === 'roadshow'" class="glass-card p-6 rounded-2xl animate-fade-in">
|
||||
<h3 class="text-xl font-bold mb-4 text-cyan-300">路演纪要精选</h3>
|
||||
<ul class="space-y-3 list-disc list-inside text-gray-300">
|
||||
<li><strong>供给收缩:</strong> 海外原厂2025 Q1起正式退出DDR4产能,预计2026年基本无新货。长鑫存储也计划于2025 H2后退出自有品牌DDR4业务,需求转由兆易创新代销或代工。</li>
|
||||
<li><strong>需求刚性:</strong> 下游70%存量设计无法立即切换DDR5,切换周期长达9–12个月,导致DDR4阶段性供需错配。电视、机顶盒、网通、汽车需求刚性。</li>
|
||||
<li><strong>价格指引 (25Q4合约价环比):</strong> 服务器DDR4: +30-40%;手机LPDDR4: +30%以上;PC DDR4: +20-30%。</li>
|
||||
<li><strong>业绩弹性:</strong> 国内模组厂及DDR4利基型设计厂(兆易创新等)因前期低价库存和价格传导顺畅,在24Q4-25Q1具备显著业绩弹性。兆易创新Q2毛利率已从个位数提升至20%+。</li>
|
||||
<li><strong>拐点观察:</strong> 2025 Q4后的价格拐点,取决于“DDR4需求下滑速度 vs 供给退出速度”。</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Research Report Data -->
|
||||
<div x-show="openTab === 'research'" class="glass-card p-6 rounded-2xl animate-fade-in">
|
||||
<h3 class="text-xl font-bold mb-4 text-cyan-300">研报核心观点</h3>
|
||||
<ul class="space-y-3 list-disc list-inside text-gray-300">
|
||||
<li><strong>价格趋势:</strong> 利基型DRAM价格在23Q3触底后持续反弹。TrendForce预测2025下半年DDR4市场将持续供不应求,价格强势上涨。</li>
|
||||
<li><strong>原厂计划:</strong> 三星/SK海力士/美光计划于2025下半年终止DDR3/DDR4生产,最后出货时间约在2026年初,EOL通知主要针对Server与PC客户。</li>
|
||||
<li><strong>产能切换原因:</strong> HBM、DDR5等高端产品利润率明显更高,是原厂转移产能的核心驱动力。</li>
|
||||
<li><strong>国产机遇:</strong> 随着原厂退出,国内厂商如长鑫存储、华邦电、南亚科有望迎来转单机遇。研报建议关注兆易创新、北京君正、江波龙、佰维存储等。</li>
|
||||
<li><strong>应用领域:</strong> DDR4仍广泛用于数据中心、PC、机顶盒、电视、网络通信、智慧家庭、国产化平台等场景。</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Stocks Data Section -->
|
||||
<section id="stocks" class="mb-5">
|
||||
<h2 class="section-title">股票数据</h2>
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||||
<h5 class="card-title mb-0">利基型存储DDR4相关企业</h5>
|
||||
<div class="d-flex gap-2">
|
||||
<span class="badge badge-product">产品</span>
|
||||
<span class="badge badge-agent">代理</span>
|
||||
<span class="badge badge-chip">内存接口芯片</span>
|
||||
<span class="badge badge-package">封测</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>股票名称</th>
|
||||
<th>分类</th>
|
||||
<th>营收相关</th>
|
||||
<th>DDR4相关</th>
|
||||
<th>信源</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><span class="stock-highlight">江波龙</span></td>
|
||||
<td><span class="badge badge-product">产品</span></td>
|
||||
<td class="revenue-cell">2024年存储营收174.64亿元</td>
|
||||
<td>公司恢复了部分DDR4的测试和制造产能,能较好满足客户对于DDR4的需求</td>
|
||||
<td>互动</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="stock-highlight">佰维存储</span></td>
|
||||
<td><span class="badge badge-product">产品</span></td>
|
||||
<td class="revenue-cell">2024年存储产品营收63.41亿元</td>
|
||||
<td>公司企业级DDR4 RDIMM内存条产品,最高支持3,200MT/s数据传输速率,容量支持16GB、32GB</td>
|
||||
<td>半年报</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="stock-highlight">兆易创新</span></td>
|
||||
<td><span class="badge badge-product">产品</span></td>
|
||||
<td class="revenue-cell">2024年存储芯片51.94亿元</td>
|
||||
<td>DDR4产品在已有4Gb容量产品基础上,进一步实现了8Gb容量产品的量产出货</td>
|
||||
<td>年报</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="stock-highlight">德明利</span></td>
|
||||
<td><span class="badge badge-product">产品</span></td>
|
||||
<td class="revenue-cell">2024年存储营收47.73亿元</td>
|
||||
<td>公司消费级DDR4内存模组产品已经实现量产出货</td>
|
||||
<td>互动</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="stock-highlight">北京君正</span></td>
|
||||
<td><span class="badge badge-product">产品</span></td>
|
||||
<td class="revenue-cell">2024年存储芯片营收25.89亿元</td>
|
||||
<td>公司正在用更加先进的工艺制程,完善DDR4和LPDDR4产品线</td>
|
||||
<td>互动/调研</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="stock-highlight">大为股份</span></td>
|
||||
<td><span class="badge badge-product">产品</span></td>
|
||||
<td class="revenue-cell">2024年半导体存储器8.77亿元</td>
|
||||
<td>大为创芯的DDR4以及LPDDR4X是嵌入式市场的主流方案</td>
|
||||
<td>互动</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="stock-highlight">东芯股份</span></td>
|
||||
<td><span class="badge badge-product">产品</span></td>
|
||||
<td class="revenue-cell">2024年存储相关营收6.38亿元</td>
|
||||
<td>公司设计研发的LPDDR4x产品已进入量产阶段</td>
|
||||
<td>年报</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="stock-highlight">朗科科技</span></td>
|
||||
<td><span class="badge badge-product">产品</span></td>
|
||||
<td class="revenue-cell">2024年闪存相关收入4.65亿元</td>
|
||||
<td>内存产品涵盖DDR4/DDR5不同产品规格</td>
|
||||
<td>半年报</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="stock-highlight">恒烁股份</span></td>
|
||||
<td><span class="badge badge-product">产品</span></td>
|
||||
<td class="revenue-cell">2024年存储芯片3.26亿元</td>
|
||||
<td>公司新建易失性存储产品,第一款搭载国内主流DRAM原厂晶圆颗粒的DDR4产品将在2025年量产发布</td>
|
||||
<td>公告</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="stock-highlight">成都华微</span></td>
|
||||
<td><span class="badge badge-product">产品</span></td>
|
||||
<td>——</td>
|
||||
<td>已成功研制 DDR4达到供货阶段</td>
|
||||
<td>公告</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="stock-highlight">香农芯创</span></td>
|
||||
<td><span class="badge badge-agent">代理</span></td>
|
||||
<td>——</td>
|
||||
<td>代理销售的存储产品包括DDR4</td>
|
||||
<td>互动</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="stock-highlight">澜起科技</span></td>
|
||||
<td><span class="badge badge-chip">内存接口芯片</span></td>
|
||||
<td>全球三大内存接口芯片厂商之一,DDR4世代逐步成为行业领跑者</td>
|
||||
<td>——</td>
|
||||
<td>调研</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="stock-highlight">深科技</span></td>
|
||||
<td><span class="badge badge-package">封测</span></td>
|
||||
<td class="revenue-cell">2024年存储业务营收35.22亿元</td>
|
||||
<td>公司主要从事高端存储芯片的封装与测试,产品包括DDR4/LPDDR4</td>
|
||||
<td>年报</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="stock-highlight">太极实业</span></td>
|
||||
<td><span class="badge badge-package">封测</span></td>
|
||||
<td class="revenue-cell">2024年半导体营收43.16亿元</td>
|
||||
<td>子公司太极半导体投资约1.09亿元扩充DDR4/LPDDR4封测产能</td>
|
||||
<td>年报</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Analysis Section -->
|
||||
<section id="analysis" class="mb-5">
|
||||
<h2 class="section-title">数据分析</h2>
|
||||
<div class="row">
|
||||
<div class="col-lg-6 mb-4">
|
||||
<div class="card h-100">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">营收分布(亿元)</h5>
|
||||
<div class="chart-container">
|
||||
<canvas id="revenueChart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 mb-4">
|
||||
<div class="card h-100">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">行业洞察</h5>
|
||||
<div class="info-card">
|
||||
<h6>产品类企业主导市场</h6>
|
||||
<p>在14家相关企业中,10家为产品类企业,占比71.4%,显示DDR4产品研发与制造是产业链核心环节。</p>
|
||||
</div>
|
||||
<div class="info-card">
|
||||
<h6>头部企业优势明显</h6>
|
||||
<p>江波龙以174.64亿元存储营收位居首位,佰维存储、兆易创新分别以63.41亿元、51.94亿元紧随其后,形成第一梯队。</p>
|
||||
</div>
|
||||
<div class="info-card">
|
||||
<h6>国产替代加速推进</h6>
|
||||
<p>多家企业已实现DDR4产品量产,如兆易创新8Gb容量DDR4产品、德明利消费级DDR4内存模组等,国产化进程明显加快。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">投资价值分析</h5>
|
||||
<div class="row">
|
||||
<div class="col-md-4 mb-3">
|
||||
<div class="card bg-light border-0">
|
||||
<div class="card-body text-center">
|
||||
<i class="fas fa-chart-line text-primary" style="font-size: 2.5rem;"></i>
|
||||
<h6 class="mt-2">市场空间</h6>
|
||||
<p class="mb-0">利基型DDR4市场在消费电子、工业控制等领域需求稳定,国产替代空间广阔</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 mb-3">
|
||||
<div class="card bg-light border-0">
|
||||
<div class="card-body text-center">
|
||||
<i class="fas fa-microchip text-success" style="font-size: 2.5rem;"></i>
|
||||
<h6 class="mt-2">技术壁垒</h6>
|
||||
<p class="mb-0">DDR4技术成熟,但高端产品仍有较高技术门槛,国内企业持续突破</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 mb-3">
|
||||
<div class="card bg-light border-0">
|
||||
<div class="card-body text-center">
|
||||
<i class="fas fa-industry text-warning" style="font-size: 2.5rem;"></i>
|
||||
<h6 class="mt-2">产业链协同</h6>
|
||||
<p class="mb-0">从设计、制造到封测,国内DDR4产业链逐步完善,协同效应增强</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Stock Table Section -->
|
||||
<section class="mt-16">
|
||||
<h2 class="text-3xl font-bold text-center mb-8 glow-text">核心标的池分析</h2>
|
||||
<div class="overflow-x-auto glass-card p-4 rounded-2xl">
|
||||
<table class="table table-zebra w-full">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>股票名称</th>
|
||||
<th>股票代码</th>
|
||||
<th>核心逻辑</th>
|
||||
<th>标签</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<!-- Data from JSON will be populated here -->
|
||||
<tr><td>兆易创新</td><td><a href="https://valuefrontier.cn/company?scode=603986" target="_blank" class="link link-hover text-cyan-400">603986</a></td><td>国内利基型DRAM设计龙头,DDR4 8Gb产品已量产出货,直接承接原厂退出市场份额。</td><td class="font-mono">产品设计</td></tr>
|
||||
<tr><td>江波龙</td><td><a href="https://valuefrontier.cn/company?scode=301308" target="_blank" class="link link-hover text-cyan-400">301308</a></td><td>模组厂商,恢复DDR4测试制造产能,受益于低价库存价值重估,业绩弹性大。</td><td class="font-mono">存储模组</td></tr>
|
||||
<tr><td>佰维存储</td><td><a href="https://valuefrontier.cn/company?scode=688525" target="_blank" class="link link-hover text-cyan-400">688525</a></td><td>企业级DDR4 RDIMM产品布局完善,支持高达3200MT/s,受益于涨价周期。</td><td class="font-mono">存储模组</td></tr>
|
||||
<tr><td>北京君正</td><td><a href="https://valuefrontier.cn/company?scode=300223" target="_blank" class="link link-hover text-cyan-400">300223</a></td><td>采用先进工艺制程,完善DDR4和LPDDR4产品线,布局利基型市场。</td><td class="font-mono">产品设计</td></tr>
|
||||
<tr><td>澜起科技</td><td><a href="https://valuefrontier.cn/company?scode=688008" target="_blank" class="link link-hover text-cyan-400">688008</a></td><td>全球三大内存接口芯片厂商之一,DDR4世代行业领跑者,是产业链关键环节。</td><td class="font-mono">内存接口芯片</td></tr>
|
||||
<tr><td>深科技</td><td><a href="https://valuefrontier.cn/company?scode=000021" target="_blank" class="link link-hover text-cyan-400">000021</a></td><td>从事高端存储芯片封测,产品覆盖DDR4/LPDDR4,受益于行业景气度提升。</td><td class="font-mono">封测</td></tr>
|
||||
<tr><td>太极实业</td><td><a href="https://valuefrontier.cn/company?scode=600667" target="_blank" class="link link-hover text-cyan-400">600667</a></td><td>子公司太极半导体扩充DDR4/LPDDR4封测产能,直接受益于DDR4需求。</td><td class="font-mono">封测</td></tr>
|
||||
<tr><td>聚辰股份</td><td><a href="https://valuefrontier.cn/company?scode=688123" target="_blank" class="link link-hover text-cyan-400">688123</a></td><td>服务器SPD业务将伴随DDR5加速渗透而增长,间接受益于DDR4向DDR5的技术迭代浪潮。</td><td class="font-mono">涨幅异动分析</td></tr>
|
||||
<tr><td>德明利</td><td><a href="https://valuefrontier.cn/company?scode=001309" target="_blank" class="link link-hover text-cyan-400">001309</a></td><td>消费级DDR4内存模组产品已实现量产出货。</td><td class="font-mono">存储模组</td></tr>
|
||||
<tr><td>东芯股份</td><td><a href="https://valuefrontier.cn/company?scode=688110" target="_blank" class="link link-hover text-cyan-400">688110</a></td><td>设计研发的LPDDR4x产品已进入量产阶段。</td><td class="font-mono">产品设计</td></tr>
|
||||
<tr><td>朗科科技</td><td><a href="https://valuefrontier.cn/company?scode=300042" target="_blank" class="link link-hover text-cyan-400">300042</a></td><td>内存产品线涵盖DDR4/DDR5不同产品规格。</td><td class="font-mono">存储模组</td></tr>
|
||||
<tr><td>香农芯创</td><td><a href="https://valuefrontier.cn/company?scode=300475" target="_blank" class="link link-hover text-cyan-400">300475</a></td><td>代理销售的存储产品包括DDR4。</td><td class="font-mono">代理分销</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<h5>关于本分析</h5>
|
||||
<p>本报告基于公开市场数据整理,旨在提供利基型存储DDR4行业参考信息,不构成投资建议。</p>
|
||||
</div>
|
||||
<div class="col-md-6 text-md-end">
|
||||
<h5>数据来源</h5>
|
||||
<p>公司年报、半年报、互动平台回复、公告等公开信息</p>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="my-4 bg-secondary">
|
||||
<div class="text-center">
|
||||
<p class="mb-0">© 2023 存储芯片分析平台. 保留所有权利.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
var chartDom = document.getElementById('priceChart');
|
||||
var myChart = echarts.init(chartDom);
|
||||
var option;
|
||||
|
||||
<!-- Bootstrap 5 JS Bundle with Popper -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
|
||||
|
||||
<!-- Chart.js Scripts -->
|
||||
<script>
|
||||
// Category Distribution Chart
|
||||
const categoryCtx = document.getElementById('categoryChart').getContext('2d');
|
||||
const categoryChart = new Chart(categoryCtx, {
|
||||
type: 'doughnut',
|
||||
data: {
|
||||
labels: ['产品', '封测', '代理', '内存接口芯片'],
|
||||
datasets: [{
|
||||
data: [10, 2, 1, 1],
|
||||
backgroundColor: [
|
||||
'#3b82f6',
|
||||
'#10b981',
|
||||
'#8b5cf6',
|
||||
'#ec4899'
|
||||
],
|
||||
borderWidth: 0
|
||||
}]
|
||||
option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
formatter: '价格: ${c} USD',
|
||||
backgroundColor: 'rgba(0, 255, 255, 0.2)',
|
||||
borderColor: 'rgba(0, 255, 255, 0.5)',
|
||||
textStyle: {
|
||||
color: '#E0E0E0'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['2025-05-30', '2025-06-17'],
|
||||
axisLine: { lineStyle: { color: 'rgba(255, 255, 255, 0.3)' } },
|
||||
axisLabel: { color: '#9ca3af' }
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
min: 2.5,
|
||||
axisLabel: {
|
||||
formatter: '${value}',
|
||||
color: '#9ca3af'
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
position: 'bottom',
|
||||
labels: {
|
||||
font: {
|
||||
size: 12
|
||||
},
|
||||
padding: 15
|
||||
}
|
||||
}
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(255, 255, 255, 0.1)'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Revenue Distribution Chart
|
||||
const revenueCtx = document.getElementById('revenueChart').getContext('2d');
|
||||
const revenueChart = new Chart(revenueCtx, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: ['江波龙', '佰维存储', '兆易创新', '德明利', '北京君正', '太极实业', '深科技', '大为股份', '东芯股份', '朗科科技', '恒烁股份'],
|
||||
datasets: [{
|
||||
label: '2024年营收(亿元)',
|
||||
data: [174.64, 63.41, 51.94, 47.73, 25.89, 43.16, 35.22, 8.77, 6.38, 4.65, 3.26],
|
||||
backgroundColor: '#3b82f6',
|
||||
borderColor: '#3b82f6',
|
||||
borderWidth: 1
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
title: {
|
||||
display: true,
|
||||
text: '营收(亿元)'
|
||||
}
|
||||
},
|
||||
x: {
|
||||
ticks: {
|
||||
maxRotation: 45,
|
||||
minRotation: 45
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'DDR4 8Gb (1Gx8) 3200',
|
||||
type: 'line',
|
||||
symbol: 'circle',
|
||||
symbolSize: 8,
|
||||
itemStyle: {
|
||||
color: '#ff0000'
|
||||
},
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false
|
||||
}
|
||||
lineStyle: {
|
||||
color: '#ff0000',
|
||||
width: 3,
|
||||
shadowColor: 'rgba(255, 0, 0, 0.5)',
|
||||
shadowBlur: 10
|
||||
},
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||
offset: 0,
|
||||
color: 'rgba(255, 0, 0, 0.5)'
|
||||
}, {
|
||||
offset: 1,
|
||||
color: 'rgba(255, 0, 0, 0)'
|
||||
}])
|
||||
},
|
||||
data: [2.73, 4.18],
|
||||
markPoint: {
|
||||
data: [
|
||||
{ type: 'max', name: '最高价' }
|
||||
],
|
||||
label: { color: '#fff' },
|
||||
itemStyle: { color: '#ff4d4d' }
|
||||
},
|
||||
markLine: {
|
||||
data: [{
|
||||
name: 'Q2累计涨幅156%',
|
||||
lineStyle: { color: '#ff4d4d' },
|
||||
label: {
|
||||
position: 'insideEndTop',
|
||||
formatter: 'Q2累计涨幅156%',
|
||||
color: '#ff4d4d'
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
});
|
||||
]
|
||||
};
|
||||
|
||||
option && myChart.setOption(option);
|
||||
|
||||
window.addEventListener('resize', () => {
|
||||
myChart.resize();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
// Smooth scroll for navigation links
|
||||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||
anchor.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
document.querySelector(this.getAttribute('href')).scrollIntoView({
|
||||
behavior: 'smooth'
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
Reference in New Issue
Block a user