vf/vf_react
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update pay ui

Browse Source
This commit is contained in:
zzlgreat
2025-12-05 13:29:18 +08:00
parent 20994cfb13
commit 48d9c76c5e
1008 changed files with 417880 additions and 486974 deletions
Download Patch File Download Diff File Expand all files Collapse all files

538
public/htmls/海洋碳汇.html Normal file
View File

@@ -0,0 +1,538 @@
<!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>海洋碳汇 - 深度研究报告</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.10.1/dist/full.min.css" rel="stylesheet" type="text/css" />
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
body {
font-family: 'Inter', 'Noto Sans SC', sans-serif;
background-color: #020617; /* slate-950 */
background-image:
radial-gradient(at 27% 37%, hsla(215, 98%, 61%, 0.1) 0px, transparent 50%),
radial-gradient(at 97% 21%, hsla(175, 98%, 61%, 0.1) 0px, transparent 50%),
radial-gradient(at 52% 99%, hsla(355, 98%, 61%, 0.1) 0px, transparent 50%),
radial-gradient(at 10% 29%, hsla(256, 96%, 68%, 0.1) 0px, transparent 50%),
radial-gradient(at 97% 96%, hsla(38, 60%, 74%, 0.1) 0px, transparent 50%),
radial-gradient(at 33% 50%, hsla(222, 67%, 73%, 0.1) 0px, transparent 50%),
radial-gradient(at 79% 53%, hsla(343, 68%, 79%, 0.1) 0px, transparent 50%);
color: #e2e8f0; /* slate-200 */
}
.glass-card {
background: rgba(15, 23, 42, 0.3); /* slate-900 with opacity */
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-radius: 24px;
border: 1px solid rgba(56, 189, 248, 0.15); /* sky-400 with opacity */
transition: all 0.3s ease;
}
.glass-card:hover {
transform: translateY(-5px);
box-shadow: 0 0 40px rgba(56, 189, 248, 0.1), 0 0 15px rgba(56, 189, 248, 0.1);
border-color: rgba(56, 189, 248, 0.3);
}
.bento-grid {
display: grid;
gap: 1.5rem;
grid-template-columns: repeat(12, 1fr);
}
.grid-item {
grid-column: span 12;
}
@media (min-width: 1024px) {
.grid-item-span-4 { grid-column: span 4; }
.grid-item-span-5 { grid-column: span 5; }
.grid-item-span-6 { grid-column: span 6; }
.grid-item-span-7 { grid-column: span 7; }
.grid-item-span-8 { grid-column: span 8; }
.grid-item-span-12 { grid-column: span 12; }
}
.glow-text {
text-shadow: 0 0 8px rgba(56, 189, 248, 0.5);
}
.section-title {
font-size: 1.5rem;
font-weight: 600;
color: #f8fafc; /* slate-50 */
padding-bottom: 0.75rem;
border-bottom: 1px solid rgba(56, 189, 248, 0.2);
margin-bottom: 1.5rem;
display: flex;
align-items: center;
}
.section-title::before {
content: '';
display: inline-block;
width: 4px;
height: 24px;
background-color: #38bdf8; /* sky-400 */
margin-right: 0.75rem;
border-radius: 2px;
box-shadow: 0 0 8px rgba(56, 189, 248, 0.7);
}
.styled-table {
border-collapse: separate;
border-spacing: 0;
width: 100%;
}
.styled-table thead th {
background-color: rgba(30, 41, 59, 0.5);
color: #38bdf8;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.styled-table tbody tr {
background-color: rgba(15, 23, 42, 0.2);
transition: background-color 0.2s ease-in-out;
}
.styled-table tbody tr:hover {
background-color: rgba(30, 41, 59, 0.6);
}
.styled-table td, .styled-table th {
padding: 1rem 1.25rem;
border-bottom: 1px solid rgba(56, 189, 248, 0.15);
}
.styled-table th:first-child { border-top-left-radius: 12px; }
.styled-table th:last-child { border-top-right-radius: 12px; }
.styled-table tr:last-child td:first-child { border-bottom-left-radius: 12px; }
.styled-table tr:last-child td:last-child { border-bottom-right-radius: 12px; }
.styled-table tr:last-child td { border-bottom: none; }
.highlight-stock {
color: #f472b6; /* pink-400 */
font-weight: 600;
}
</style>
</head>
<body class="min-h-screen p-4 sm:p-6 lg:p-8">
<div class="max-w-screen-2xl mx-auto">
<!-- Header -->
<header class="text-center mb-12">
<h1 class="text-4xl sm:text-5xl lg:text-6xl font-bold tracking-tighter text-slate-50 glow-text mb-4">
海洋碳汇 (Blue Carbon)
</h1>
<p class="text-lg text-slate-400 max-w-3xl mx-auto">
北京价值前沿科技有限公司 AI投研agent：“价小前投研” 呈现。本报告为AI合成数据，投资需谨慎。
</p>
</header>
<!-- Main Content Grid -->
<main class="bento-grid">
<!-- Core Viewpoint -->
<section class="grid-item grid-item-span-12 glass-card p-8">
<h2 class="section-title">核心观点摘要</h2>
<p class="text-slate-300 text-lg leading-relaxed">
海洋碳汇是国家“双碳”战略背景下，从陆地（绿碳）向海洋（蓝碳）延伸的必然选择。当前，该概念正处于<span class="text-sky-300 font-semibold">政策密集催化、标准与方法学加速构建的“0到1”导入期</span>。其核心驱动力是顶层的政策意志与CCER市场扩容预期，未来潜力巨大，但短期内面临方法学缺失、商业模式不清晰的技术和商业化瓶颈。
</p>
</section>
<!-- Concept Event Timeline -->
<section class="grid-item grid-item-span-12 lg:grid-item-span-7 glass-card p-8">
<h2 class="section-title">概念发展关键事件轴</h2>
<div id="timeline-chart" class="w-full h-[500px]"></div>
</section>
<!-- Key Catalysts -->
<section class="grid-item grid-item-span-12 lg:grid-item-span-5 glass-card p-8">
<h2 class="section-title">关键催化剂 & 发展路径</h2>
<div class="space-y-6">
<div>
<h3 class="font-semibold text-sky-300 mb-2">近期催化剂 (未来3-6个月)</h3>
<ul class="list-disc list-inside text-slate-300 space-y-2">
<li><span class="font-bold text-pink-400">CCER海洋碳汇方法学发布：</span>引爆板块的最核心、最直接催化剂。</li>
<li><span class="font-bold">ISO/NP 25283-1国际标准发布：</span>提升中国话语权，为国际交易背书。</li>
<li><span class="font-bold">首单国家级方法学项目成交：</span>形成强烈的市场示范效应。</li>
</ul>
</div>
<div>
<h3 class="font-semibold text-sky-300 mb-2">长期发展路径</h3>
<ol class="relative border-l border-sky-600/30 ml-2">
<li class="mb-6 ml-6">
<span class="absolute flex items-center justify-center w-4 h-4 bg-sky-500 rounded-full -left-2 ring-4 ring-sky-900/50"></span>
<h4 class="font-medium text-slate-100">阶段一 (当前-2027)</h4>
<p class="text-sm text-slate-400">标准确立与试点示范</p>
</li>
<li class="mb-6 ml-6">
<span class="absolute flex items-center justify-center w-4 h-4 bg-sky-500 rounded-full -left-2 ring-4 ring-sky-900/50"></span>
<h4 class="font-medium text-slate-100">阶段二 (2027-2030)</h4>
<p class="text-sm text-slate-400">市场化交易与规模扩张</p>
</li>
<li class="ml-6">
<span class="absolute flex items-center justify-center w-4 h-4 bg-sky-500 rounded-full -left-2 ring-4 ring-sky-900/50"></span>
<h4 class="font-medium text-slate-100">阶段三 (2030+)</h4>
<p class="text-sm text-slate-400">多元化与生态价值整合</p>
</li>
</ol>
</div>
</div>
</section>
<!-- Core Logic & Market Perception -->
<section class="grid-item grid-item-span-12 lg:grid-item-span-8 glass-card p-8">
<h2 class="section-title">核心逻辑与市场认知分析</h2>
<div class="space-y-6 text-slate-300 leading-relaxed">
<div>
<h3 class="font-semibold text-sky-300 mb-2">核心驱动力：政策与市场的双轮驱动</h3>
<p>该概念的根本驱动力是 <span class="font-bold text-slate-100">“政策驱动 + 市场机制预期”</span>。从中央会议“探索海洋碳汇核算”的顶层定调，到《国家标准化发展纲要》推动碳市场衔接，政策路径清晰。而CCER重启并预期扩容，则提供了从“生态价值”到“经济价值”转换的核心商业化出口。</p>
<blockquote class="mt-4 p-4 border-l-4 border-sky-500/50 bg-slate-800/50 rounded-r-lg">
<p class="italic text-slate-400">新闻援引: 中信证券研报指出，“生态环境部将常态化...开展方法学遴选工作，...<strong class="text-sky-300">海洋碳汇</strong>...等项目未来或有望入选CCER方法学”。</p>
</blockquote>
</div>
<div>
<h3 class="font-semibold text-sky-300 mb-2">预期差分析：热度与现实的温差</h3>
<ul class="space-y-3">
<li><strong class="text-slate-100">“规划宏大”与“落地滞后”：</strong> 市场对商业化变现的速度可能过于乐观。方法学缺失是当前最关键的瓶颈。
<blockquote class="mt-2 p-3 text-sm border-l-2 border-pink-500/50 bg-slate-800/50 rounded-r-md">
<p class="italic text-slate-400">路演情报: 广发轻工路演纪要提及“海洋、草原碳汇签约但待方法学出台”，...开发进度可能滞后。</p>
</blockquote>
</li>
<li><strong class="text-slate-100">“概念热度”与“资金流向”：</strong> 市场交易现实是，资金优先选择逻辑相似、路径更清晰的<span class="text-green-400">林业碳汇</span>作为“碳汇概念”的代理进行交易。海洋碳汇概念虽热，但尚未成为资金主攻阵地。</li>
<li><strong class="text-slate-100">“概念边界模糊”：</strong> 市场可能将许多弱相关的公司纳入概念范畴，存在“概念泛化”风险，需仔细甄别业务直接相关性。</li>
</ul>
</div>
</div>
</section>
<!-- Potential Risks & Challenges -->
<section class="grid-item grid-item-span-12 lg:grid-item-span-4 glass-card p-8">
<h2 class="section-title">潜在风险与挑战</h2>
<ul class="space-y-4 text-slate-300">
<li class="flex items-start">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-red-400 mr-3 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" 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>
<h4 class="font-semibold text-slate-100">技术风险</h4>
<p class="text-slate-400 text-sm">碳汇计量(MRV)的准确性、成本和可扩展性是最大技术瓶颈。</p>
</div>
</li>
<li class="flex items-start">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-amber-400 mr-3 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
<div>
<h4 class="font-semibold text-slate-100">商业化风险</h4>
<p class="text-slate-400 text-sm">方法学出台时间不确定性是当前最大风险，项目经济性待验证。</p>
</div>
</li>
<li class="flex items-start">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-purple-400 mr-3 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" /></svg>
<div>
<h4 class="font-semibold text-slate-100">政策与竞争风险</h4>
<p class="text-slate-400 text-sm">高度依赖政策驱动，未来政策变动是根本性冲击。优质海洋资源竞争可能加剧。</p>
</div>
</li>
</ul>
</section>
<!-- Industry Chain & Core Companies -->
<section class="grid-item grid-item-span-12 glass-card p-8">
<h2 class="section-title">产业链与核心公司深度剖析</h2>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<!-- Upstream -->
<div class="border border-sky-500/20 p-6 rounded-2xl bg-slate-900/20">
<h3 class="font-bold text-lg text-sky-300 mb-3">上游：技术与装备</h3>
<p class="text-sm text-slate-400 mb-4">提供碳汇计量(MRV)、监测评估、增汇修复等技术与设备。</p>
<div class="space-y-2">
<div class="badge badge-outline border-cyan-400 text-cyan-400">监测核算(MRV)</div>
<div class="badge badge-outline border-cyan-400 text-cyan-400">增汇技术</div>
</div>
<p class="mt-3 font-semibold text-slate-200">代表公司：雪迪龙, 招标股份, 正和生态</p>
</div>
<!-- Midstream -->
<div class="border border-pink-500/20 p-6 rounded-2xl bg-slate-900/20">
<h3 class="font-bold text-lg text-pink-300 mb-3">中游：碳汇资产开发与运营</h3>
<p class="text-sm text-slate-400 mb-4">通过渔业养殖、海洋牧场、生态系统修复等方式直接开发和运营碳汇资产。</p>
<div class="space-y-2">
<div class="badge badge-outline border-fuchsia-400 text-fuchsia-400">渔业/牧业碳汇</div>
<div class="badge badge-outline border-fuchsia-400 text-fuchsia-400">生态系统碳汇</div>
</div>
<p class="mt-3 font-semibold text-slate-200">代表公司：獐子岛, 东方海洋, 岳阳林纸</p>
</div>
<!-- Downstream -->
<div class="border border-amber-500/20 p-6 rounded-2xl bg-slate-900/20">
<h3 class="font-bold text-lg text-amber-300 mb-3">下游：碳汇交易与服务</h3>
<p class="text-sm text-slate-400 mb-4">进行碳汇项目的开发、申报、交易、资产管理和数字化整合。</p>
<div class="space-y-2">
<div class="badge badge-outline border-yellow-400 text-yellow-400">碳资产管理</div>
<div class="badge badge-outline border-yellow-400 text-yellow-400">数字化平台</div>
</div>
<p class="mt-3 font-semibold text-slate-200">代表公司：岳阳林纸 (诚通碳汇), 深水海纳</p>
</div>
</div>
<div class="mt-8">
<h3 class="font-semibold text-lg text-slate-100 mb-4">核心玩家对比</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
<div class="bg-slate-800/50 p-4 rounded-xl">
<p class="font-bold text-sky-300">领导者 (战略前瞻): 岳阳林纸</p>
<p class="text-slate-400 mt-1">从成熟林业碳汇降维打击，战略布局最广，但海洋业务待落地。</p>
</div>
<div class="bg-slate-800/50 p-4 rounded-xl">
<p class="font-bold text-pink-300">逻辑最纯粹者 (业务直接): 水产养殖公司</p>
<p class="text-slate-400 mt-1">天然碳汇资产所有者，存量资产可快速转化，高度依赖政策和碳价。</p>
</div>
<div class="bg-slate-800/50 p-4 rounded-xl">
<p class="font-bold text-cyan-300">“卖铲人” (技术赋能): 雪迪龙 / 招标股份</p>
<p class="text-slate-400 mt-1">技术服务方，确定性高，业绩弹性取决于行业整体发展速度。</p>
</div>
</div>
</div>
</section>
<!-- Conclusion & Investment Insights -->
<section class="grid-item grid-item-span-12 glass-card p-8">
<h2 class="section-title">综合结论与投资启示</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div>
<h3 class="font-semibold text-lg text-slate-100 mb-3">最终看法</h3>
<p class="text-slate-300 leading-relaxed">
海洋碳汇概念目前明确处于<span class="text-sky-300 font-semibold">政策驱动下的主题炒作阶段</span>，远未进入基本面驱动阶段。这是一个典型的“0到1”型投资主题，核心在于博弈政策落地和商业模式突破。长期价值毋庸置疑，但短期内“故事”成分大于“业绩”。
</p>
</div>
<div>
<h3 class="font-semibold text-lg text-slate-100 mb-3">最具投资价值的细分环节</h3>
<ul class="space-y-3">
<li class="p-4 bg-slate-800/50 rounded-xl">
<p class="font-medium text-sky-300">短期 (事件驱动型): 上游监测核算(MRV)</p>
<p class="text-sm text-slate-400">产业链“基础设施”，确定性最高。相关公司如雪迪龙、招标股份。</p>
</li>
<li class="p-4 bg-slate-800/50 rounded-xl">
<p class="font-medium text-pink-300">中期 (资产价值重估型): 中游水产养殖公司</p>
<p class="text-sm text-slate-400">存量资产价值面临重估，具备较高业绩弹性。如东方海洋、国联水产。</p>
</li>
</ul>
</div>
</div>
<div class="mt-8 border-t border-sky-500/20 pt-6">
<h3 class="font-semibold text-lg text-slate-100 mb-3">需重点跟踪和验证的关键指标</h3>
<div class="flex flex-wrap gap-4">
<div class="flex-1 min-w-[280px] p-4 bg-slate-900/40 rounded-xl border border-slate-700/50">
<p class="font-medium text-slate-200">1. 政策指标</p>
<p class="text-sm text-slate-400">生态环境部官网关于CCER新增海洋相关方法学的公示。</p>
</div>
<div class="flex-1 min-w-[280px] p-4 bg-slate-900/40 rounded-xl border border-slate-700/50">
<p class="font-medium text-slate-200">2. 市场指标</p>
<p class="text-sm text-slate-400">首批海洋碳汇CCER项目的挂牌价格和成交量。</p>
</div>
<div class="flex-1 min-w-[280px] p-4 bg-slate-900/40 rounded-xl border border-slate-700/50">
<p class="font-medium text-slate-200">3. 公司指标</p>
<p class="text-sm text-slate-400">相关公司财报中首次出现“碳汇收入”科目或重大项目投资公告。</p>
</div>
</div>
</div>
</section>
<!-- Stock List Table -->
<section class="grid-item grid-item-span-12 glass-card p-8">
<h2 class="section-title">相关概念股梳理</h2>
<div class="overflow-x-auto">
<table class="styled-table">
<thead>
<tr>
<th>股票名称</th>
<th>股票代码</th>
<th>核心逻辑</th>
<th>消息来源</th>
</tr>
</thead>
<tbody>
<tr class="highlight-stock">
<td>雪迪龙</td>
<td><a href="https://valuefrontier.cn/company?scode=002658" target="_blank" class="hover:text-sky-300">002658</a></td>
<td>子公司中计碳汇联合招商轮船等研发船舶碳排放在线计量监测系统。</td>
<td><div class="badge badge-info badge-outline">机构调研</div></td>
</tr>
<tr class="highlight-stock">
<td>獐子岛</td>
<td><a href="https://valuefrontier.cn/company?scode=002069" target="_blank" class="hover:text-sky-300">002069</a></td>
<td>参与承办“海洋贝类养殖生态系统碳汇核算方法”论证会，积极探索海洋碳汇。</td>
<td><div class="badge badge-info badge-outline">公司互动</div></td>
</tr>
<tr class="highlight-stock">
<td>东方海洋</td>
<td><a href="https://valuefrontier.cn/company?scode=002086" target="_blank" class="hover:text-sky-300">002086</a></td>
<td>5万亩牧场若实施多营养层次养殖，预计年固碳量可达2万吨。</td>
<td><div class="badge badge-primary badge-outline">公开资料</div></td>
</tr>
<tr>
<td>海兰信</td>
<td><a href="https://valuefrontier.cn/company?scode=300065" target="_blank" class="hover:text-sky-300">300065</a></td>
<td>海底智能计算中心可能为海洋科研、气候监测提供大数据计算分析能力。</td>
<td><div class="badge badge-primary badge-outline">公开资料</div></td>
</tr>
<tr>
<td>凯美特气</td>
<td><a href="https://valuefrontier.cn/company?scode=002549" target="_blank" class="hover:text-sky-300">002549</a></td>
<td>与湖南大学合作开展二氧化碳捕集、封存等研究，或适用于海洋固碳场景。</td>
<td><div class="badge badge-primary badge-outline">公开资料</div></td>
</tr>
<tr>
<td>清新环境</td>
<td><a href="https://valuefrontier.cn/company?scode=002573" target="_blank" class="hover:text-sky-300">002573</a></td>
<td>具备碳捕集及利用技术，可延伸至船舶废气处理。</td>
<td><div class="badge badge-primary badge-outline">公开资料</div></td>
</tr>
<tr>
<td>深水海纳</td>
<td><a href="https://valuefrontier.cn/company?scode=300961" target="_blank" class="hover:text-sky-300">300961</a></td>
<td>打造零碳操作系统，以数字化手段整合节能、减排、碳汇等碳中和措施。</td>
<td><div class="badge badge-success badge-outline">公司公告</div></td>
</tr>
<tr>
<td>国联水产</td>
<td><a href="https://valuefrontier.cn/company?scode=300094" target="_blank" class="hover:text-sky-300">300094</a></td>
<td>深圳首单渔业碳汇交易成交，公司位于湛江，每吨生蚝养殖可固碳约0.3吨。</td>
<td><div class="badge badge-primary badge-outline">公开资料</div></td>
</tr>
<tr>
<td>岳阳林纸</td>
<td><a href="https://valuefrontier.cn/company?scode=600963" target="_blank" class="hover:text-sky-300">600963</a></td>
<td>致力于森林碳汇、海洋碳汇、农田碳汇等方法学的开发合作模式探索。</td>
<td><div class="badge badge-info badge-outline">公司互动</div></td>
</tr>
<tr>
<td>招标股份</td>
<td><a href="https://valuefrontier.cn/company?scode=301136" target="_blank" class="hover:text-sky-300">301136</a></td>
<td>研发投入构建渔业碳汇监测与评估方法体系，巩固智慧海洋领先地位。</td>
<td><div class="badge badge-success badge-outline">公司公告</div></td>
</tr>
<tr>
<td>正和生态</td>
<td><a href="https://valuefrontier.cn/company?scode=605069" target="_blank" class="hover:text-sky-300">605069</a></td>
<td>受邀在全国海洋碳汇联盟会议上分享基于自然的解决方案(NbS)实践经验。</td>
<td><div class="badge badge-success badge-outline">公司公告</div></td>
</tr>
<tr>
<td>中信重工</td>
<td><a href="https://valuefrontier.cn/company?scode=601608" target="_blank" class="hover:text-sky-300">601608</a></td>
<td>表示将与客户携手，共同打造“海洋碳汇+生态碳汇”的双向特色发展路径。</td>
<td><div class="badge badge-primary badge-outline">公开资料</div></td>
</tr>
</tbody>
</table>
</div>
</section>
</main>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
var chartDom = document.getElementById('timeline-chart');
var myChart = echarts.init(chartDom);
var option;
const data = [
{ name: '顶层战略定调', value: [1, 1], detail: '中央财经委员会会议首次提出“探索开展海洋碳汇核算”。' },
{ name: '国际标准启动', value: [2, 1], detail: '全球首个海洋碳中和国际标准提案项目(ISO/NP 25283-1)启动，中国机构主导。' },
{ name: '国内方法学预期', value: [3, -1], detail: 'CCER预期扩容，海洋碳汇被明确列为未来有望入选的领域。' },
{ name: '地方政府先行', value: [4, -1], detail: '上海、海口等地方出台具体蓝碳经济发展规划与行动方案。' },
{ name: '企业实践探索', value: [5, 1], detail: '转转集团启动海草床修复；岳阳林纸、獐子岛等已开始布局。' },
{ name: '首批交易落地', value: [6, -1], detail: '国联水产等相关区域已实现地方性渔业碳汇交易。' }
];
option = {
tooltip: {
trigger: 'item',
formatter: function (params) {
return `<strong>${params.name}</strong><br/>${params.data.detail}`;
},
backgroundColor: 'rgba(15, 23, 42, 0.8)',
borderColor: '#38bdf8',
textStyle: {
color: '#e2e8f0'
}
},
grid: {
left: '5%',
right: '5%',
top: '10%',
bottom: '10%'
},
xAxis: {
type: 'value',
show: false,
min: 0,
max: 7
},
yAxis: {
type: 'value',
show: false,
min: -2,
max: 2,
},
series: [
{
type: 'scatter',
data: data,
symbolSize: 20,
itemStyle: {
color: '#38bdf8',
shadowColor: 'rgba(56, 189, 248, 0.8)',
shadowBlur: 10
},
label: {
show: true,
position: function(params) {
return params.value[1] > 0 ? 'top' : 'bottom';
},
formatter: '{b}',
color: '#f8fafc',
fontSize: 14,
backgroundColor: 'rgba(30, 41, 59, 0.5)',
padding: [5, 10],
borderRadius: 5
},
zlevel: 2
},
{
type: 'lines',
data: [{
coords: [[0.5, 0], [6.5, 0]]
}],
lineStyle: {
width: 2,
color: 'rgba(56, 189, 248, 0.3)'
},
silent: true,
zlevel: 1
},
{
type: 'lines',
coordinateSystem: 'cartesian2d',
zlevel: 1,
effect: {
show: true,
trailLength: 0.1,
symbol: 'arrow',
symbolSize: 8,
color: '#38bdf8'
},
lineStyle: {
width: 0, // hide line
curveness: 0
},
data: [{coords: [[0.5, 0], [6.5, 0]]}]
}
]
};
myChart.setOption(option);
window.addEventListener('resize', myChart.resize);
});
</script>
</body>
</html>