Files
vf_react/public/htmls/长寿药NMN.html
2025-12-05 13:29:18 +08:00

485 lines
30 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

好的以下是根据您的要求生成的“长寿药NMN”概念深度行研HTML页面。
该页面采用了**Tailwind CSS**进行样式设计,**DaisyUI**提供组件支持,并引入了**Alpine.js**以备交互功能扩展,同时使用**ECharts**进行数据可视化整体风格遵循您所描述的科幻FUI与艺术融合的设计理念。
<!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>长寿药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 class="min-h-screen p-4 sm:p-6 lg:p-8">
<div class="max-w-7xl mx-auto space-y-8">
<!-- 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>
<!-- 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>
<!-- 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>
<!-- Footer -->
<footer class="text-center text-xs text-slate-500 py-4">
<p>© 2025 北京价值前沿科技有限公司. All rights reserved.</p>
<p>本报告由AI投研模型生成内容仅供参考不构成任何投资建议。投资有风险入市需谨慎。</p>
</footer>
</div>
<script>
// ECharts Initialization
var chartDom = document.getElementById('market-chart');
var myChart = echarts.init(chartDom, 'dark'); // Use dark theme
var option;
// 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,
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
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>