update pay ui
This commit is contained in:
@@ -1,339 +1,485 @@
|
||||
好的,以下是根据您的要求生成的“长寿药NMN”概念深度行研HTML页面。
|
||||
|
||||
该页面采用了**Tailwind CSS**进行样式设计,**DaisyUI**提供组件支持,并引入了**Alpine.js**以备交互功能扩展,同时使用**ECharts**进行数据可视化,整体风格遵循您所描述的科幻FUI与艺术融合的设计理念。
|
||||
|
||||
|
||||
<!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, shrink-to-fit=no">
|
||||
<title>长寿药NMN概念分析</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet" />
|
||||
<!-- Font Awesome Icons -->
|
||||
<script src="https://kit.fontawesome.com/1d2b6c4f81.js" crossorigin="anonymous"></script>
|
||||
<!-- Tailwind CSS -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
|
||||
<!-- DaisyUI -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/daisyui@5/dist/full.min.css" rel="stylesheet" type="text/css" />
|
||||
<!-- Custom CSS -->
|
||||
<style>
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
|
||||
min-height: 100vh;
|
||||
}
|
||||
.gradient-text {
|
||||
background: linear-gradient(90deg, #4f46e5, #7c3aed);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
.card-shadow {
|
||||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
.insight-card {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
.table-container {
|
||||
overflow-x: auto;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.table-container {
|
||||
overflow-x: scroll;
|
||||
}
|
||||
}
|
||||
#particles-js {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
</style>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>长寿药NMN - 概念深度研报</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.x.x/dist/cdn.min.js"></script>
|
||||
|
||||
<!-- ECharts -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js"></script>
|
||||
|
||||
<!-- Google Fonts for futuristic feel -->
|
||||
<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=Orbitron:wght@400;700&family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--glow-color: rgba(0, 255, 255, 0.5);
|
||||
--glow-color-2: rgba(255, 0, 255, 0.5);
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Poppins', sans-serif;
|
||||
background-color: #0a0a1a;
|
||||
background-image:
|
||||
radial-gradient(circle at 10% 15%, rgba(100, 120, 255, 0.15) 0%, transparent 40%),
|
||||
radial-gradient(circle at 85% 80%, rgba(255, 100, 220, 0.15) 0%, transparent 40%),
|
||||
url('https://images.unsplash.com/photo-1534796636912-3b95b3ab5986?q=80&w=2071&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
|
||||
background-size: cover;
|
||||
background-attachment: fixed;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
.orbitron {
|
||||
font-family: 'Orbitron', sans-serif;
|
||||
}
|
||||
|
||||
.glass-card {
|
||||
background: rgba(15, 23, 42, 0.6);
|
||||
backdrop-filter: blur(16px) saturate(180%);
|
||||
-webkit-backdrop-filter: blur(16px) saturate(180%);
|
||||
border: 1px solid rgba(255, 255, 255, 0.125);
|
||||
border-radius: 1.5rem; /* 极致圆角 */
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.glass-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 0 20px rgba(0, 255, 255, 0.2), 0 0 30px rgba(255, 0, 255, 0.1);
|
||||
}
|
||||
|
||||
.bento-grid {
|
||||
display: grid;
|
||||
gap: 1.5rem;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
}
|
||||
|
||||
/* Responsive grid adjustments */
|
||||
.bento-item-1 { grid-column: span 12 / span 12; }
|
||||
.bento-item-2 { grid-column: span 12 / span 12; }
|
||||
.bento-item-3 { grid-column: span 12 / span 12; }
|
||||
.bento-item-4 { grid-column: span 12 / span 12; }
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.bento-item-1 { grid-column: span 8 / span 8; }
|
||||
.bento-item-2 { grid-column: span 4 / span 4; }
|
||||
.bento-item-3 { grid-column: span 4 / span 4; }
|
||||
.bento-item-4 { grid-column: span 8 / span 8; }
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-family: 'Orbitron', sans-serif;
|
||||
text-shadow: 0 0 8px var(--glow-color), 0 0 12px var(--glow-color-2);
|
||||
}
|
||||
|
||||
.highlight-text {
|
||||
color: #00ffff; /* Cyan */
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.caution-text {
|
||||
color: #ffeb3b; /* Yellow for caution */
|
||||
}
|
||||
|
||||
.risk-text {
|
||||
color: #ff8a80; /* Light red for risk */
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
}
|
||||
thead th {
|
||||
background-color: rgba(0, 255, 255, 0.1);
|
||||
color: #00ffff;
|
||||
font-family: 'Orbitron', sans-serif;
|
||||
}
|
||||
tbody tr {
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
tbody tr:nth-child(even) {
|
||||
background-color: rgba(255, 255, 255, 0.03);
|
||||
}
|
||||
tbody tr:hover {
|
||||
background-color: rgba(0, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="particles-js"></div>
|
||||
|
||||
<div class="container mx-auto px-4 py-8 max-w-6xl">
|
||||
<!-- 标题部分 -->
|
||||
<div class="text-center mb-10">
|
||||
<h1 class="text-4xl md:text-5xl font-bold mb-4 gradient-text">长寿药NMN概念分析</h1>
|
||||
<p class="text-gray-600 text-lg max-w-3xl mx-auto">NMN(β-烟酰胺单核苷酸)作为NAD+前体,在抗衰老领域展现出巨大潜力</p>
|
||||
</div>
|
||||
|
||||
<!-- 概念Insight部分 -->
|
||||
<div class="insight-card rounded-2xl p-6 mb-10 card-shadow">
|
||||
<div class="flex items-center mb-6">
|
||||
<div class="bg-indigo-100 p-3 rounded-full mr-4">
|
||||
<i class="fas fa-dna text-indigo-600 text-xl"></i>
|
||||
</div>
|
||||
<h2 class="text-2xl font-bold text-gray-800">概念Insight</h2>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4 text-gray-700">
|
||||
<div class="bg-blue-50 p-4 rounded-lg border-l-4 border-blue-500">
|
||||
<h3 class="font-semibold text-blue-800 mb-2">核心机制</h3>
|
||||
<p>NMN是维生素B3的衍生物,通过转运蛋白SIc12a8直接转化为NAD+。NAD+是细胞能量代谢和DNA修复的关键分子,随年龄增长而减少。补充NMN可提升细胞内NAD+水平,激活Sirtuins蛋白家族,促进线粒体功能,延缓衰老。</p>
|
||||
</div>
|
||||
<body class="min-h-screen p-4 sm:p-6 lg:p-8">
|
||||
<div class="max-w-7xl mx-auto space-y-8">
|
||||
|
||||
<div class="bg-purple-50 p-4 rounded-lg border-l-4 border-purple-500">
|
||||
<h3 class="font-semibold text-purple-800 mb-2">科学验证</h3>
|
||||
<p>大量动物模型和人体临床研究证实,NMN在抗衰老、改善代谢、保护器官功能等方面效果显著。临床研究表明,口服NMN在健康人群中安全,剂量范围为每天150-1250mg,未观察到显著有害影响。</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-green-50 p-4 rounded-lg border-l-4 border-green-500">
|
||||
<h3 class="font-semibold text-green-800 mb-2">市场前景</h3>
|
||||
<p>NMN作为高效的NAD+前体,具有广泛的应用前景,包括抗衰老保健品、医疗级NAD+补充剂、化妆品等。随着全球人口老龄化加剧和健康意识提升,NMN市场规模预计将持续增长。</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-yellow-50 p-4 rounded-lg border-l-4 border-yellow-500">
|
||||
<h3 class="font-semibold text-yellow-800 mb-2">最新动态</h3>
|
||||
<p>近期传闻卫健委最新食品添加剂受理名单中出现β-烟酰胺的身影,引发市场关注。若获批,将极大推动NMN在食品领域的应用,为相关企业带来新的增长点。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Header -->
|
||||
<header class="text-center p-6 glass-card">
|
||||
<h1 class="text-4xl md:text-6xl font-bold orbitron bg-clip-text text-transparent bg-gradient-to-r from-cyan-400 to-fuchsia-500 mb-2">
|
||||
长寿药NMN
|
||||
</h1>
|
||||
<h2 class="text-xl md:text-2xl text-slate-300">概念深度研报</h2>
|
||||
<p class="text-xs mt-4 text-slate-400">北京价值前沿科技有限公司 AI投研agent:“价小前投研” 进行投研呈现,本报告为AI合成数据,投资需谨慎。</p>
|
||||
</header>
|
||||
|
||||
<!-- 关联股票部分 -->
|
||||
<div class="insight-card rounded-2xl p-6 card-shadow">
|
||||
<div class="flex items-center mb-6">
|
||||
<div class="bg-green-100 p-3 rounded-full mr-4">
|
||||
<i class="fas fa-chart-line text-green-600 text-xl"></i>
|
||||
</div>
|
||||
<h2 class="text-2xl font-bold text-gray-800">关联股票分析</h2>
|
||||
</div>
|
||||
|
||||
<div class="table-container">
|
||||
<table class="min-w-full bg-white rounded-lg overflow-hidden">
|
||||
<thead class="bg-gray-50">
|
||||
<tr>
|
||||
<th class="py-3 px-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">股票名称</th>
|
||||
<th class="py-3 px-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">产业链环节</th>
|
||||
<th class="py-3 px-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">项目</th>
|
||||
<th class="py-3 px-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">原因</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-200">
|
||||
<tr class="hover:bg-gray-50">
|
||||
<td class="py-3 px-4 text-sm font-medium text-gray-900">金达威</td>
|
||||
<td class="py-3 px-4 text-sm text-gray-500">中游/品牌</td>
|
||||
<td class="py-3 px-4 text-sm text-gray-500">β-烟酰胺</td>
|
||||
<td class="py-3 px-4 text-sm text-gray-500">传闻卫健委最新食品添加剂受理名单中出现β-烟酰胺的身影</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-gray-50">
|
||||
<td class="py-3 px-4 text-sm font-medium text-gray-900">雅本化学</td>
|
||||
<td class="py-3 px-4 text-sm text-gray-500">中游/品牌</td>
|
||||
<td class="py-3 px-4 text-sm text-gray-500">中间体烟酰胺和烟酸</td>
|
||||
<td class="py-3 px-4 text-sm text-gray-500">传闻卫健委最新食品添加剂受理名单中出现β-烟酰胺的身影</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-gray-50">
|
||||
<td class="py-3 px-4 text-sm font-medium text-gray-900">西王食品</td>
|
||||
<td class="py-3 px-4 text-sm text-gray-500">中游/品牌</td>
|
||||
<td class="py-3 px-4 text-sm text-gray-500">β-烟酰胺</td>
|
||||
<td class="py-3 px-4 text-sm text-gray-500">传闻卫健委最新食品添加剂受理名单中出现β-烟酰胺的身影</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-gray-50">
|
||||
<td class="py-3 px-4 text-sm font-medium text-gray-900">友阿股份</td>
|
||||
<td class="py-3 px-4 text-sm text-gray-500">中游/品牌</td>
|
||||
<td class="py-3 px-4 text-sm text-gray-500">β-烟酰胺</td>
|
||||
<td class="py-3 px-4 text-sm text-gray-500">传闻卫健委最新食品添加剂受理名单中出现β-烟酰胺的身影</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-gray-50">
|
||||
<td class="py-3 px-4 text-sm font-medium text-gray-900">百合股份</td>
|
||||
<td class="py-3 px-4 text-sm text-gray-500">中游/品牌</td>
|
||||
<td class="py-3 px-4 text-sm text-gray-500">β-烟酰胺</td>
|
||||
<td class="py-3 px-4 text-sm text-gray-500">传闻卫健委最新食品添加剂受理名单中出现β-烟酰胺的身影</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-gray-50">
|
||||
<td class="py-3 px-4 text-sm font-medium text-gray-900">雅本化学</td>
|
||||
<td class="py-3 px-4 text-sm text-gray-500">上游原料环节</td>
|
||||
<td class="py-3 px-4 text-sm text-gray-500">中间体烟酰胺和烟酸</td>
|
||||
<td class="py-3 px-4 text-sm text-gray-500">生产β-烟酰胺相关中间体</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-gray-50">
|
||||
<td class="py-3 px-4 text-sm font-medium text-gray-900">兄弟科技</td>
|
||||
<td class="py-3 px-4 text-sm text-gray-500">上游原料环节</td>
|
||||
<td class="py-3 px-4 text-sm text-gray-500">中间体烟酰胺和烟酸</td>
|
||||
<td class="py-3 px-4 text-sm text-gray-500">生产β-烟酰胺相关中间体</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-gray-50">
|
||||
<td class="py-3 px-4 text-sm font-medium text-gray-900">尔康制药</td>
|
||||
<td class="py-3 px-4 text-sm text-gray-500">上游原料环节</td>
|
||||
<td class="py-3 px-4 text-sm text-gray-500">中间体烟酸</td>
|
||||
<td class="py-3 px-4 text-sm text-gray-500">生产β-烟酰胺相关中间体</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-gray-50">
|
||||
<td class="py-3 px-4 text-sm font-medium text-gray-900">金达威</td>
|
||||
<td class="py-3 px-4 text-sm text-gray-500">上游原料环节</td>
|
||||
<td class="py-3 px-4 text-sm text-gray-500">自用原料</td>
|
||||
<td class="py-3 px-4 text-sm text-gray-500">生产β-烟酰胺自用原料</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-gray-50">
|
||||
<td class="py-3 px-4 text-sm font-medium text-gray-900">众生药业</td>
|
||||
<td class="py-3 px-4 text-sm text-gray-500">上游原料环节</td>
|
||||
<td class="py-3 px-4 text-sm text-gray-500">β-烟酰胺单核苷酸</td>
|
||||
<td class="py-3 px-4 text-sm text-gray-500">生产β-烟酰胺相关原料</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-gray-50">
|
||||
<td class="py-3 px-4 text-sm font-medium text-gray-900">ST红太阳</td>
|
||||
<td class="py-3 px-4 text-sm text-gray-500">上游原料环节</td>
|
||||
<td class="py-3 px-4 text-sm text-gray-500">前体原料药</td>
|
||||
<td class="py-3 px-4 text-sm text-gray-500">生产β-烟酰胺前体原料药</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-gray-50">
|
||||
<td class="py-3 px-4 text-sm font-medium text-gray-900">拓新药业</td>
|
||||
<td class="py-3 px-4 text-sm text-gray-500">上游原料环节</td>
|
||||
<td class="py-3 px-4 text-sm text-gray-500">中间体</td>
|
||||
<td class="py-3 px-4 text-sm text-gray-500">生产β-烟酰胺中间体</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-gray-50">
|
||||
<td class="py-3 px-4 text-sm font-medium text-gray-900">丰原药业</td>
|
||||
<td class="py-3 px-4 text-sm text-gray-500">上游原料环节</td>
|
||||
<td class="py-3 px-4 text-sm text-gray-500">未公开承认</td>
|
||||
<td class="py-3 px-4 text-sm text-gray-500">传闻涉及β-烟酰胺原料供应</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-gray-50">
|
||||
<td class="py-3 px-4 text-sm font-medium text-gray-900">华润双鹤</td>
|
||||
<td class="py-3 px-4 text-sm text-gray-500">上游原料环节</td>
|
||||
<td class="py-3 px-4 text-sm text-gray-500">原料药</td>
|
||||
<td class="py-3 px-4 text-sm text-gray-500">生产β-烟酰胺原料药</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-gray-50">
|
||||
<td class="py-3 px-4 text-sm font-medium text-gray-900">双鹭药业</td>
|
||||
<td class="py-3 px-4 text-sm text-gray-500">上游原料环节</td>
|
||||
<td class="py-3 px-4 text-sm text-gray-500">自用原料</td>
|
||||
<td class="py-3 px-4 text-sm text-gray-500">生产β-烟酰胺自用原料</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-gray-50">
|
||||
<td class="py-3 px-4 text-sm font-medium text-gray-900">晨光生物</td>
|
||||
<td class="py-3 px-4 text-sm text-gray-500">经销/代工</td>
|
||||
<td class="py-3 px-4 text-sm text-gray-500">代工</td>
|
||||
<td class="py-3 px-4 text-sm text-gray-500">涉及β-烟酰胺代工生产</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-gray-50">
|
||||
<td class="py-3 px-4 text-sm font-medium text-gray-900">国药现代</td>
|
||||
<td class="py-3 px-4 text-sm text-gray-500">经销/代工</td>
|
||||
<td class="py-3 px-4 text-sm text-gray-500">孙公司经销</td>
|
||||
<td class="py-3 px-4 text-sm text-gray-500">孙公司涉及β-烟酰胺经销</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-gray-50">
|
||||
<td class="py-3 px-4 text-sm font-medium text-gray-900">溢多利</td>
|
||||
<td class="py-3 px-4 text-sm text-gray-500">经销/代工</td>
|
||||
<td class="py-3 px-4 text-sm text-gray-500">代工</td>
|
||||
<td class="py-3 px-4 text-sm text-gray-500">涉及β-烟酰胺代工生产</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-gray-50">
|
||||
<td class="py-3 px-4 text-sm font-medium text-gray-900">康惠制药</td>
|
||||
<td class="py-3 px-4 text-sm text-gray-500">在研</td>
|
||||
<td class="py-3 px-4 text-sm text-gray-500">生产技术</td>
|
||||
<td class="py-3 px-4 text-sm text-gray-500">研发β-烟酰胺生产技术</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-gray-50">
|
||||
<td class="py-3 px-4 text-sm font-medium text-gray-900">普利制药</td>
|
||||
<td class="py-3 px-4 text-sm text-gray-500">在研</td>
|
||||
<td class="py-3 px-4 text-sm text-gray-500">研发项目</td>
|
||||
<td class="py-3 px-4 text-sm text-gray-500">研发β-烟酰胺相关技术</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-gray-50">
|
||||
<td class="py-3 px-4 text-sm font-medium text-gray-900">特一药业</td>
|
||||
<td class="py-3 px-4 text-sm text-gray-500">在研</td>
|
||||
<td class="py-3 px-4 text-sm text-gray-500">研发项目</td>
|
||||
<td class="py-3 px-4 text-sm text-gray-500">研发β-烟酰胺相关技术</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-gray-50">
|
||||
<td class="py-3 px-4 text-sm font-medium text-gray-900">德展健康</td>
|
||||
<td class="py-3 px-4 text-sm text-gray-500">在研</td>
|
||||
<td class="py-3 px-4 text-sm text-gray-500">研发项目</td>
|
||||
<td class="py-3 px-4 text-sm text-gray-500">研发β-烟酰胺相关技术</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-gray-50">
|
||||
<td class="py-3 px-4 text-sm font-medium text-gray-900">诚志股份</td>
|
||||
<td class="py-3 px-4 text-sm text-gray-500">在研</td>
|
||||
<td class="py-3 px-4 text-sm text-gray-500">研发项目</td>
|
||||
<td class="py-3 px-4 text-sm text-gray-500">研发β-烟酰胺相关技术</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Core Insight Section -->
|
||||
<main class="space-y-8">
|
||||
|
||||
<!-- 0. Concept Event -->
|
||||
<section class="glass-card p-6">
|
||||
<h3 class="text-2xl section-title mb-4">概念引爆点:技术与政策共振</h3>
|
||||
<p class="text-slate-300 leading-relaxed">
|
||||
“长寿药NMN”概念的核心叙事围绕其作为NAD+前体,对抗衰老及相关疾病的巨大潜力。近期,一系列关键事件密集催化,形成了完整的市场逻辑链条。
|
||||
</p>
|
||||
<ul class="list-disc list-inside mt-4 space-y-2 text-slate-300">
|
||||
<li><span class="font-semibold text-cyan-400">技术突破 (2024.10):</span> 中国科学院宣布通过<span class="highlight-text">合成生物学</span>方法,实现NMN产量<span class="highlight-text">提升超100倍</span>。此举直指成本瓶颈,预示着规模化生产与大众化消费的可能。</li>
|
||||
<li><span class="font-semibold text-cyan-400">政策暖风 (2024.10):</span> 工信部将“生物制造”列为重点培育产业,国务院“一号文件”首次聚焦“银发经济”,为NMN的技术上游和需求下游提供了顶层设计支持。</li>
|
||||
<li><span class="font-semibold text-yellow-400">监管博弈 (传闻):</span> 市场传闻美国FDA转变立场,确认NMN的膳食补充剂合法身份。尽管此消息与路演数据存在矛盾,但极大提振了市场对商业化路径的乐观预期。</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<!-- 总结部分 -->
|
||||
<div class="insight-card rounded-2xl p-6 mt-10 card-shadow">
|
||||
<div class="flex items-center mb-6">
|
||||
<div class="bg-yellow-100 p-3 rounded-full mr-4">
|
||||
<i class="fas fa-lightbulb text-yellow-600 text-xl"></i>
|
||||
</div>
|
||||
<h2 class="text-2xl font-bold text-gray-800">投资观点</h2>
|
||||
</div>
|
||||
|
||||
<div class="bg-gradient-to-r from-blue-50 to-purple-50 p-6 rounded-xl">
|
||||
<h3 class="font-bold text-lg text-gray-800 mb-3">核心逻辑</h3>
|
||||
<p class="text-gray-700 mb-4">NMN作为NAD+前体,在抗衰老领域展现出显著的科学验证和巨大市场潜力。随着监管政策的逐步放开和技术的不断成熟,NMN产业链各环节的企业将迎来发展机遇。</p>
|
||||
<!-- 1. Core Viewpoint Summary -->
|
||||
<section class="glass-card p-6">
|
||||
<h3 class="text-2xl section-title mb-4">核心观点摘要</h3>
|
||||
<p class="text-slate-300 leading-relaxed">
|
||||
长寿药NMN概念正处在由“<span class="highlight-text">技术突破驱动成本下降</span>”与“<span class="caution-text">全球监管政策博弈</span>”共同定义的关键转折点。核心驱动力是合成生物学带来的颠覆性成本优化潜力,这使得商业化普及路径变得清晰。然而,短期发展严重依赖美中等关键市场的监管政策明朗化,当前市场乐观预期与严峻的监管现实(如竞品公司路演信息所示)之间存在<span class="risk-text font-semibold">显著的预期差</span>,构成了该概念最大的投资风险与机遇。
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<!-- Bento Grid for Detailed Analysis -->
|
||||
<div class="bento-grid">
|
||||
<!-- 核心驱动力 -->
|
||||
<div class="bento-item-1 glass-card p-6">
|
||||
<h4 class="text-xl section-title mb-4">核心驱动力与市场认知</h4>
|
||||
<ul class="space-y-3 text-slate-300">
|
||||
<li><strong>技术革命 → 成本下降预期:</strong> 中科院产量提升100倍的技术突破是本轮概念最硬的逻辑,解决了NMN高昂成本的核心痛点,打开了大众消费市场的想象空间。</li>
|
||||
<li><strong>“银发经济” → 需求确定性:</strong> 全球人口老龄化背景下,国务院“一号文件”为抗衰老产业提供了强大的需求侧政策背书。</li>
|
||||
<li><strong>产业政策 → “硬科技”加持:</strong> 工信部将“生物制造”列为战略性新兴产业,表明NMN不仅是消费概念,更符合国家科技战略方向。</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- 市场规模预测 -->
|
||||
<div class="bento-item-2 glass-card p-6 flex flex-col">
|
||||
<h4 class="text-xl section-title mb-4">全球市场规模预测</h4>
|
||||
<div id="market-chart" class="flex-grow min-h-[250px]"></div>
|
||||
</div>
|
||||
|
||||
<!-- 关键催化剂 -->
|
||||
<div class="bento-item-3 glass-card p-6">
|
||||
<h4 class="text-xl section-title mb-4">关键催化剂(未来)</h4>
|
||||
<ul class="space-y-3 text-slate-300 text-sm">
|
||||
<li><strong class="text-cyan-400">FDA最终裁决 (决定性):</strong> 预计<span class="highlight-text">2025年Q3</span>对NMN膳食补充剂地位的裁决,是影响全球市场的最关键变量。</li>
|
||||
<li><strong class="text-cyan-400">中国监管明确化:</strong> 国内针对NMN作为保健食品原料的管理办法,将决定其本土市场规模。</li>
|
||||
<li><strong class="text-cyan-400">产业化成本验证:</strong> 龙头公司财报中<span class="highlight-text">毛利率的显著提升</span>,将是验证技术突破商业价值的核心证据。</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- 预期差分析 -->
|
||||
<div class="bento-item-4 glass-card p-6">
|
||||
<h4 class="text-xl section-title mb-4">预期差分析:最大的潜在风险点</h4>
|
||||
<div class="alert bg-yellow-900/50 border-yellow-500 text-yellow-300">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /></svg>
|
||||
<span><strong>核心矛盾:</strong> 市场普遍认知与竞品公司(ChromaDex)路演揭示的现实存在巨大预期差。</span>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
|
||||
<div class="bg-slate-800/50 p-4 rounded-xl">
|
||||
<h5 class="font-bold text-green-400 mb-2">市场乐观认知 (基于新闻/研报)</h5>
|
||||
<p class="text-sm text-slate-300">技术成熟、功效明确,成本和监管两大障碍正被攻克,市场爆发在即。</p>
|
||||
</div>
|
||||
<div class="bg-slate-800/50 p-4 rounded-xl">
|
||||
<h5 class="font-bold text-red-400 mb-2">路演揭示的现实 (来自竞品)</h5>
|
||||
<p class="text-sm text-slate-300">FDA限制仍在持续且<span class="risk-text">预计维持禁令</span>;中国监管收紧导致<span class="risk-text">市场实际在萎缩</span>;行业充斥假货和违规销售。</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-sm mt-4 text-slate-400"><strong>结论:</strong>市场可能<span class="risk-text">严重低估了当前监管障碍的强度和持续时间</span>,将“解除禁令”的传闻过度线性外推。这是决定投资成败的核心认知差。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 4. Industry Chain & Core Companies -->
|
||||
<section class="glass-card p-6">
|
||||
<h3 class="text-2xl section-title mb-4">产业链图谱与核心公司剖析</h3>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 text-center">
|
||||
<div class="p-4 bg-slate-800/50 rounded-xl">
|
||||
<h4 class="font-bold text-lg text-cyan-400 orbitron">上游:原料与中间体</h4>
|
||||
<p class="text-sm mt-2">核心中间体(烟酰胺)、NMN原料生产。技术壁垒高,是“卖铲子”的环节。</p>
|
||||
<p class="text-xs mt-1 text-slate-400">代表: 兄弟科技, 雅本化学</p>
|
||||
</div>
|
||||
<div class="p-4 bg-slate-800/50 rounded-xl">
|
||||
<h4 class="font-bold text-lg text-fuchsia-400 orbitron">中游:品牌产品与代工</h4>
|
||||
<p class="text-sm mt-2">推出自有品牌终端产品,直接面向消费者,品牌和渠道是关键。</p>
|
||||
<p class="text-xs mt-1 text-slate-400">代表: 金达威, 百合股份</p>
|
||||
</div>
|
||||
<div class="p-4 bg-slate-800/50 rounded-xl">
|
||||
<h4 class="font-bold text-lg text-lime-400 orbitron">下游:经销与零售</h4>
|
||||
<p class="text-sm mt-2">负责产品分销,目前高度依赖线上跨境电商平台。</p>
|
||||
<p class="text-xs mt-1 text-slate-400">代表: 国药现代(孙公司)</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-6 space-y-4">
|
||||
<div class="p-4 border border-cyan-500/30 rounded-lg bg-cyan-900/20">
|
||||
<h5 class="font-bold text-cyan-300">金达威 (002626) - 产业链一体化领导者</h5>
|
||||
<p class="text-sm text-slate-300 mt-1"><strong>逻辑:</strong>布局最完整,掌握上游核心原料“生物酶催化”先进工艺,产能领先,并拥有自有品牌。最有可能承接最新技术突破,逻辑最纯粹。</p>
|
||||
</div>
|
||||
<div class="p-4 border border-yellow-500/30 rounded-lg bg-yellow-900/20">
|
||||
<h5 class="font-bold text-yellow-300">兄弟科技 (002562) - 上游弹性标的</h5>
|
||||
<p class="text-sm text-slate-300 mt-1"><strong>逻辑:</strong>上游关键中间体供应商,与“合成生物学”概念强绑定。当技术突破成焦点时,因叙事贴近性而具备高弹性。</p>
|
||||
</div>
|
||||
<div class="p-4 border border-fuchsia-500/30 rounded-lg bg-fuchsia-900/20">
|
||||
<h5 class="font-bold text-fuchsia-300">雅本化学 (300261) - 灵活的原料+品牌商</h5>
|
||||
<p class="text-sm text-slate-300 mt-1"><strong>逻辑:</strong>同时布局上游原料和中游品牌,业务模式灵活,股价在多轮行情中表现活跃。</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 5. Risks & Challenges -->
|
||||
<section class="glass-card p-6">
|
||||
<h3 class="text-2xl section-title mb-4">潜在风险与挑战</h3>
|
||||
<div class="space-y-4 text-slate-300">
|
||||
<div class="flex items-start space-x-3">
|
||||
<div class="w-12 h-12 flex-shrink-0 rounded-full bg-red-900/50 flex items-center justify-center border border-red-500/50">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /></svg>
|
||||
</div>
|
||||
<div>
|
||||
<h5 class="font-semibold text-red-400">监管风险 (最大风险)</h5>
|
||||
<p class="text-sm">美中监管机构对NMN的最终定性是悬顶之剑,是决定行业生死的<span class="font-bold">核心变量</span>。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start space-x-3">
|
||||
<div class="w-12 h-12 flex-shrink-0 rounded-full bg-yellow-900/50 flex items-center justify-center border border-yellow-500/50">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-yellow-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547a2 2 0 00-.547 1.806l.477 2.387a6 6 0 00.517 3.86l.158.318a6 6 0 00.517 3.86l2.387.477a2 2 0 001.806.547a2 2 0 00.547-1.806l-.477-2.387a6 6 0 00-.517-3.86l-.158-.318a6 6 0 00-.517-3.86l-2.387-.477a2 2 0 00-.547-1.806zM15 12a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
|
||||
</div>
|
||||
<div>
|
||||
<h5 class="font-semibold text-yellow-400">技术与替代风险</h5>
|
||||
<p class="text-sm">实验室突破到工业化量产存在不确定性。同时,市场已出现“<span class="font-semibold">麦角硫因</span>”等新抗衰老成分,存在被技术迭代颠覆的风险。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start space-x-3">
|
||||
<div class="w-12 h-12 flex-shrink-0 rounded-full bg-blue-900/50 flex items-center justify-center border border-blue-500/50">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z" /></svg>
|
||||
</div>
|
||||
<div>
|
||||
<h5 class="font-semibold text-blue-400">商业化与渠道风险</h5>
|
||||
<p class="text-sm">高价补充剂的市场接受度待验证,且目前高度依赖<span class="font-semibold">跨境电商</span>单一渠道,政策收紧将造成巨大打击。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 6. Investment Conclusion -->
|
||||
<section class="glass-card p-6">
|
||||
<h3 class="text-2xl section-title mb-4">综合结论与投资启示</h3>
|
||||
<p class="text-slate-300 leading-relaxed mb-4">
|
||||
NMN概念目前处于“<span class="highlight-text">基本面驱动萌芽</span>”与“<span class="caution-text">主题炒作</span>”并存的混合阶段。其底层拥有坚实的产业逻辑,但短期股价更多受政策预期、市场情绪等主题因素驱动。在关键监管政策落地前,投资该概念仍具有较高的博弈成分。
|
||||
</p>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="p-4 bg-slate-800/50 rounded-xl">
|
||||
<h5 class="font-semibold text-lime-400 mb-2">最具投资价值环节</h5>
|
||||
<ul class="list-disc list-inside text-sm text-slate-300 space-y-1">
|
||||
<li><strong>上游核心原料生产商:</strong>掌握先进低成本工艺的企业,是卖“铲子”的,逻辑最硬 (如金达威、兄弟科技)。</li>
|
||||
<li><strong>产业链一体化龙头:</strong>拥有“原料+品牌+技术”综合优势,能最快将技术优势转化为市场份额 (如金达威)。</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="p-4 bg-slate-800/50 rounded-xl">
|
||||
<h5 class="font-semibold text-amber-400 mb-2">需重点跟踪验证的关键指标</h5>
|
||||
<ul class="list-disc list-inside text-sm text-slate-300 space-y-1">
|
||||
<li><strong>监管信号:</strong>FDA最终裁决结果;中国官方文件指南。</li>
|
||||
<li><strong>成本指标:</strong>核心公司相关业务的<span class="font-bold">毛利率变化</span>。</li>
|
||||
<li><strong>销售数据:</strong>主流跨境电商平台的<span class="font-bold">销售额和增速</span>。</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Stock Table -->
|
||||
<section class="glass-card p-6">
|
||||
<h3 class="text-2xl section-title mb-4">“长寿药NMN”概念相关股票列表</h3>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full text-sm text-left text-slate-300">
|
||||
<thead class="text-xs uppercase">
|
||||
<tr>
|
||||
<th scope="col" class="px-6 py-3 rounded-l-lg">股票名称</th>
|
||||
<th scope="col" class="px-6 py-3">股票代码</th>
|
||||
<th scope="col" class="px-6 py-3">产业链环节</th>
|
||||
<th scope="col" class="px-6 py-3 rounded-r-lg">核心逻辑/原因</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<!-- Data will be populated here by a script or server -->
|
||||
<tr>
|
||||
<td class="px-6 py-4 font-medium whitespace-nowrap">金达威</td>
|
||||
<td class="px-6 py-4"><a href="https://valuefrontier.cn/company?scode=002626" target="_blank" class="text-cyan-400 hover:underline">002626</a></td>
|
||||
<td class="px-6 py-4">上游原料 / 中游品牌</td>
|
||||
<td class="px-6 py-4">产业链一体化龙头,掌握生物酶法核心工艺,自有品牌</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-6 py-4 font-medium whitespace-nowrap">兄弟科技</td>
|
||||
<td class="px-6 py-4"><a href="https://valuefrontier.cn/company?scode=002562" target="_blank" class="text-cyan-400 hover:underline">002562</a></td>
|
||||
<td class="px-6 py-4">上游原料环节</td>
|
||||
<td class="px-6 py-4">核心中间体烟酰胺和烟酸供应商,强关联合成生物学概念</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-6 py-4 font-medium whitespace-nowrap">雅本化学</td>
|
||||
<td class="px-6 py-4"><a href="https://valuefrontier.cn/company?scode=300261" target="_blank" class="text-cyan-400 hover:underline">300261</a></td>
|
||||
<td class="px-6 py-4">上游原料 / 中游品牌</td>
|
||||
<td class="px-6 py-4">同时布局原料与品牌,股价弹性高</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-6 py-4 font-medium whitespace-nowrap">百合股份</td>
|
||||
<td class="px-6 py-4"><a href="https://valuefrontier.cn/company?scode=603102" target="_blank" class="text-cyan-400 hover:underline">603102</a></td>
|
||||
<td class="px-6 py-4">中游/品牌</td>
|
||||
<td class="px-6 py-4">保健品品牌商,受益于市场扩容</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-6 py-4 font-medium whitespace-nowrap">众生药业</td>
|
||||
<td class="px-6 py-4"><a href="https://valuefrontier.cn/company?scode=002317" target="_blank" class="text-cyan-400 hover:underline">002317</a></td>
|
||||
<td class="px-6 py-4">上游原料环节</td>
|
||||
<td class="px-6 py-4">布局β-烟酰胺单核苷酸原料</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-6 py-4 font-medium whitespace-nowrap">尔康制药</td>
|
||||
<td class="px-6 py-4"><a href="https://valuefrontier.cn/company?scode=300267" target="_blank" class="text-cyan-400 hover:underline">300267</a></td>
|
||||
<td class="px-6 py-4">上游原料环节</td>
|
||||
<td class="px-6 py-4">中间体烟酸</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-6 py-4 font-medium whitespace-nowrap">德展健康</td>
|
||||
<td class="px-6 py-4"><a href="https://valuefrontier.cn/company?scode=000813" target="_blank" class="text-cyan-400 hover:underline">000813</a></td>
|
||||
<td class="px-6 py-4">在研</td>
|
||||
<td class="px-6 py-4">在研阶段,属于高风险高回报的“期权”型标的</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-6 py-4 font-medium whitespace-nowrap">特一药业</td>
|
||||
<td class="px-6 py-4"><a href="https://valuefrontier.cn/company?scode=002728" target="_blank" class="text-cyan-400 hover:underline">002728</a></td>
|
||||
<td class="px-6 py-4">在研</td>
|
||||
<td class="px-6 py-4">在研阶段,股价受未来成功预期驱动</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-6 py-4 font-medium whitespace-nowrap">晨光生物</td>
|
||||
<td class="px-6 py-4"><a href="https://valuefrontier.cn/company?scode=300138" target="_blank" class="text-cyan-400 hover:underline">300138</a></td>
|
||||
<td class="px-6 py-4">经销/代工</td>
|
||||
<td class="px-6 py-4">为其他品牌提供生产代工服务</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-6 py-4 font-medium whitespace-nowrap">国药现代</td>
|
||||
<td class="px-6 py-4"><a href="https://valuefrontier.cn/company?scode=600420" target="_blank" class="text-cyan-400 hover:underline">600420</a></td>
|
||||
<td class="px-6 py-4">经销/代工</td>
|
||||
<td class="px-6 py-4">孙公司负责产品经销</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<h3 class="font-bold text-lg text-gray-800 mb-3">关注重点</h3>
|
||||
<ul class="list-disc pl-5 text-gray-700 space-y-2">
|
||||
<li>上游原料供应商:关注具有技术优势和产能规模的企业</li>
|
||||
<li>中游品牌商:关注具有渠道优势和品牌影响力的企业</li>
|
||||
<li>研发型企业:关注在NMN生产技术和应用领域有突破的企业</li>
|
||||
<li>政策动态:关注NMN在食品、保健品等领域的监管政策变化</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Footer -->
|
||||
<footer class="text-center text-xs text-slate-500 py-4">
|
||||
<p>© 2025 北京价值前沿科技有限公司. All rights reserved.</p>
|
||||
<p>本报告由AI投研模型生成,内容仅供参考,不构成任何投资建议。投资有风险,入市需谨慎。</p>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
// ECharts Initialization
|
||||
var chartDom = document.getElementById('market-chart');
|
||||
var myChart = echarts.init(chartDom, 'dark'); // Use dark theme
|
||||
var option;
|
||||
|
||||
<!-- Scripts -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/tsparticles@3/tsparticles.bundle.min.js"></script>
|
||||
<script>
|
||||
// 粒子背景效果
|
||||
window.addEventListener('DOMContentLoaded', (event) => {
|
||||
tsParticles.load("particles-js", {
|
||||
background: {
|
||||
color: {
|
||||
value: "transparent",
|
||||
},
|
||||
// Data based on report: Start ~4.2B in 2024, end 8.9B in 2030, CAGR 13.3%
|
||||
const years = ['2024', '2025', '2026', '2027', '2028', '2029', '2030'];
|
||||
const values = [4.20, 4.76, 5.40, 6.12, 6.93, 7.85, 8.90];
|
||||
|
||||
option = {
|
||||
backgroundColor: 'transparent',
|
||||
title: {
|
||||
text: '全球NMN市场规模(亿美元)',
|
||||
left: 'center',
|
||||
textStyle: {
|
||||
color: '#e0e0e0',
|
||||
fontFamily: 'Poppins',
|
||||
fontSize: 14,
|
||||
}
|
||||
},
|
||||
fpsLimit: 60,
|
||||
particles: {
|
||||
color: {
|
||||
value: "#818cf8",
|
||||
},
|
||||
links: {
|
||||
color: "#a5b4fc",
|
||||
distance: 150,
|
||||
enable: true,
|
||||
opacity: 0.3,
|
||||
width: 1,
|
||||
},
|
||||
move: {
|
||||
direction: "none",
|
||||
enable: true,
|
||||
outModes: {
|
||||
default: "bounce",
|
||||
},
|
||||
random: false,
|
||||
speed: 1,
|
||||
straight: false,
|
||||
},
|
||||
number: {
|
||||
density: {
|
||||
enable: true,
|
||||
area: 800,
|
||||
},
|
||||
value: 60,
|
||||
},
|
||||
opacity: {
|
||||
value: 0.3,
|
||||
},
|
||||
shape: {
|
||||
type: "circle",
|
||||
},
|
||||
size: {
|
||||
value: { min: 1, max: 3 },
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
label: {
|
||||
backgroundColor: '#6a7985'
|
||||
}
|
||||
}
|
||||
},
|
||||
detectRetina: true,
|
||||
});
|
||||
});
|
||||
</script>
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [{
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: years,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(255,255,255,0.3)'
|
||||
}
|
||||
},
|
||||
}],
|
||||
yAxis: [{
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
formatter: '${value} B'
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(255,255,255,0.3)'
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(255,255,255,0.1)'
|
||||
}
|
||||
}
|
||||
}],
|
||||
series: [{
|
||||
name: '市场规模',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: '#00ffff' // Cyan
|
||||
},
|
||||
showSymbol: false,
|
||||
areaStyle: {
|
||||
opacity: 0.8,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||
offset: 0,
|
||||
color: 'rgba(0, 255, 255, 0.5)'
|
||||
}, {
|
||||
offset: 1,
|
||||
color: 'rgba(0, 255, 255, 0)'
|
||||
}])
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: values
|
||||
}]
|
||||
};
|
||||
|
||||
option && myChart.setOption(option);
|
||||
|
||||
// Resize chart with window
|
||||
window.addEventListener('resize', myChart.resize);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
</html>
|
||||
Reference in New Issue
Block a user