Files
vf_react/public/htmls/海洋碳汇.html
2025-12-05 13:29:18 +08:00

538 lines
33 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.

<!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>