Files
vf_react/public/htmls/宁德时代零碳“电网”概念.html
2025-12-05 13:29:18 +08:00

428 lines
32 KiB
HTML
Raw Permalink 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="dark">
<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', sans-serif;
background-color: #02040a;
color: #e0e0e0;
background-image:
radial-gradient(at 20% 25%, hsla(212, 80%, 30%, 0.3) 0px, transparent 50%),
radial-gradient(at 75% 15%, hsla(280, 75%, 40%, 0.25) 0px, transparent 50%),
radial-gradient(at 5% 80%, hsla(340, 70%, 50%, 0.2) 0px, transparent 50%),
radial-gradient(at 80% 90%, hsla(190, 80%, 50%, 0.25) 0px, transparent 50%);
}
.glass-card {
background: rgba(10, 12, 28, 0.4);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.08);
}
.glow-shadow {
box-shadow: 0 0 15px rgba(0, 225, 255, 0.1), 0 0 30px rgba(0, 225, 255, 0.05);
}
.bento-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
}
.section-title {
font-size: 2rem;
font-weight: 600;
letter-spacing: -0.025em;
background: linear-gradient(90deg, #a7f3d0, #67e8f9, #a5b4fc);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.sub-title {
font-size: 1.25rem;
font-weight: 500;
color: #93c5fd;
border-left: 3px solid #67e8f9;
padding-left: 0.75rem;
}
.table thead th {
background-color: rgba(30, 41, 59, 0.5);
color: #93c5fd;
}
.table tbody tr {
background-color: transparent;
}
.table tbody tr:hover {
background-color: rgba(255, 255, 255, 0.03);
}
.tab-lifted.tab-active {
background-color: rgba(10, 12, 28, 0.4) !important;
border-color: rgba(255, 255, 255, 0.08) !important;
border-bottom-color: transparent !important;
}
</style>
</head>
<body class="min-h-screen p-4 sm:p-8 md:p-12">
<div class="max-w-7xl mx-auto space-y-12">
<!-- Header -->
<header class="text-center space-y-4 py-8">
<h1 class="text-4xl md:text-6xl font-bold tracking-tighter" style="background: linear-gradient(90deg, #ffffff, #a5b4fc); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">
宁德时代零碳“电网”概念
</h1>
<p class="text-lg text-slate-400">深度行研报告</p>
<div class="pt-4 text-xs text-slate-500">
<p>由 北京价值前沿科技有限公司 AI投研agent“价小前投研” 进行投研呈现</p>
<p>本报告为AI合成数据投资需谨慎。</p>
</div>
</header>
<!-- Main Content -->
<main class="space-y-12">
<!-- Bento Grid for Key Info -->
<section class="bento-grid">
<div class="glass-card rounded-3xl p-6 col-span-1 md:col-span-2 row-span-2 space-y-4">
<h3 class="font-semibold text-xl text-cyan-300">概念核心:从电池制造商到能源科技巨头</h3>
<p class="text-slate-300">宁德时代的“零碳电网”概念是其核心战略宣言,旨在利用储能技术、成本控制和产业链整合的绝对优势,构建一个以电池为核心的“能源生产-存储-使用”闭环生态。此举标志着公司从全球第一的“电池制造商”向“综合能源科技巨头”的战略转型。</p>
<blockquote class="border-l-4 border-indigo-400 pl-4 text-slate-200 italic">
"宁德时代的目标是将自己重塑为绿色能源供应商...开发和管理“零碳”电网的业务可能比供应电动汽车电池大“十倍”。"
<footer class="text-xs text-slate-400 mt-2">— 创始人曾毓群 (新闻数据, 2024-11-13)</footer>
</blockquote>
</div>
<div class="glass-card rounded-3xl p-6">
<h3 class="font-semibold text-lg text-cyan-300">市场规模预期</h3>
<p class="text-4xl font-bold text-white">~3万亿<span class="text-lg font-normal text-slate-400"></span></p>
<p class="text-slate-400 text-sm mt-2">预计未来零碳电网业务规模</p>
<p class="text-xs text-slate-500 mt-1">(来源: 安科瑞路演, 2024-11-18)</p>
</div>
<div class="glass-card rounded-3xl p-6">
<h3 class="font-semibold text-lg text-cyan-300">全球储能地位</h3>
<p class="text-4xl font-bold text-white">36.5<span class="text-lg font-normal text-slate-400">%</span></p>
<p class="text-slate-400 text-sm mt-2">2024年全球储能电池市占率</p>
<p class="text-xs text-slate-500 mt-1">(来源: 研报数据)</p>
</div>
<div class="glass-card rounded-3xl p-6 col-span-1 md:col-span-2 space-y-4">
<h3 class="font-semibold text-lg text-cyan-300">核心技术与解决方案</h3>
<ul class="space-y-2 text-slate-300 list-disc list-inside">
<li><strong>源-网-荷-储一体化:</strong> 通过光储充平台,实现微电网的柔性控制。</li>
<li><strong>车网互动 (V2G):</strong> 允许电动车向电网反向售电,换电站成为“储能节点”。</li>
<li><strong>虚拟电厂 (VPP):</strong> 云平台作为“B2G的调度大脑”连接电网并响应调峰调频需求。</li>
<li><strong>电力电子 (PCS) 突破:</strong> 通过时代天元弥补电力电子短板,提供整体解决方案。</li>
</ul>
</div>
</section>
<!-- Concept Event Timeline -->
<section class="glass-card rounded-3xl p-6 md:p-8 glow-shadow">
<h2 class="sub-title mb-6">概念发展脉络</h2>
<div id="timeline-chart" style="width: 100%; height: 400px;"></div>
</section>
<!-- Detailed Insight Analysis -->
<section class="glass-card rounded-3xl p-6 md:p-8 glow-shadow space-y-8">
<h2 class="section-title text-center mb-8">深度洞察与逻辑剖析</h2>
<div>
<h3 class="sub-title mb-4">核心逻辑与市场认知</h3>
<div class="space-y-4 text-slate-300">
<p><strong>1. 核心驱动力:</strong>全球碳中和背景下,可再生能源的波动性催生了对储能的刚性需求。宁德时代凭借其技术、成本和规模优势,正将储能业务从“产品”升级为“电网级解决方案”,并通过提供“整体解决方案服务商”模式实现商业升维。</p>
<p><strong>2. 市场热度与情绪:</strong>市场对此概念关注度极高,情绪偏向乐观。曾毓群“大十倍”的言论、关联个股的涨停(如永福股份)均反映了资金的热烈追捧。市场普遍认同宁德时代具备实现此蓝图的实力。</p>
<p><strong>3. 预期差分析:</strong></p>
<ul class="list-disc list-inside pl-4 space-y-2">
<li><strong>能力鸿沟认知差:</strong>市场可能低估了宁德时代从“电池厂”向“系统集成商”转型的决心和执行力尤其是在电力电子PCS和电网调度软件方面的布局。</li>
<li><strong>实现路径差:</strong>宏大叙事背后是务实的落地路径——从“零碳工厂/园区”等“点”状示范,逐步推广到“零碳城市”的“面”,最终连接成“网”。市场可能对短期内出现大规模项目期望过高。</li>
<li><strong>换电站价值差:</strong>换电站作为“分布式储能节点”和虚拟电厂的巨大电网调节价值约33.6GWh)远未被市场充分认知和定价。</li>
</ul>
</div>
</div>
<div>
<h3 class="sub-title mb-4">关键催化剂与未来发展路径</h3>
<div class="grid md:grid-cols-2 gap-6 text-slate-300">
<div>
<h4 class="font-semibold text-blue-300 mb-2">近期催化剂 (未来3-6个月)</h4>
<ul class="list-decimal list-inside space-y-1">
<li>标志性“零碳城市”或GWh级“源网荷储”项目进入实质性建设。</li>
<li>2025年第二代钠离子电池发布若成本性能实现突破将加速商业化。</li>
<li>国家层面出台针对虚拟电厂(VPP)、车网互动(V2G)的商业化运营细则。</li>
</ul>
</div>
<div>
<h4 class="font-semibold text-blue-300 mb-2">长期发展路径</h4>
<ul class="list-decimal list-inside space-y-1">
<li><strong>阶段一 (当前-2026):</strong> 技术验证与场景深耕,打磨“光储充换”一体化方案。</li>
<li><strong>阶段二 (2026-2030):</strong> 规模化复制与网络构建,实现“能源网”与“交通网”初步融合。</li>
<li><strong>阶段三 (2030+):</strong> 生态主导与平台运营,转型为能源互联网平台运营商。</li>
</ul>
</div>
</div>
</div>
<div>
<h3 class="sub-title mb-4">潜在风险与挑战</h3>
<div class="space-y-2 text-slate-300">
<p><strong>技术风险:</strong>系统集成与软件调度能力是巨大考验,是宁德时代需持续加强的领域。</p>
<p><strong>商业化风险:</strong>盈利模式尚在探索V2G和虚拟电厂业务高度依赖电力市场价格机制和政策支持。</p>
<p><strong>政策与竞争风险:</strong>产业高度依赖政策扶持,同时面临电网公司、发电集团及华为等科技巨头的跨界竞争。</p>
</div>
</div>
<div>
<h3 class="sub-title mb-4">综合结论与投资启示</h3>
<div class="space-y-4 text-slate-300">
<p><strong>最终看法:</strong>该概念正处于从“主题炒作”向“基本面驱动”过渡的关键阶段。这是一个具备长期确定性的高成长赛道,但短期业绩兑现仍需时间和耐心。</p>
<p><strong>最具投资价值的细分环节:</strong></p>
<ol class="list-decimal list-inside space-y-2 pl-4">
<li><strong>核心枢纽 — 宁德时代本身:</strong>作为战略发起者和最大受益者,其价值重估空间最大。</li>
<li><strong>核心“补链”环节:</strong>为宁德时代提供其当前能力短板(如工程总包、核心电力电子设备)且已深度绑定的公司,如 <strong class="text-cyan-400">永福股份 (工程设计与EPC)</strong><strong class="text-cyan-400">科士达 (PCS)</strong>,具备较高的业绩弹性。</li>
</ol>
<p><strong>需重点跟踪的关键指标:</strong>宁德时代储能业务财报(出货量、毛利率)、关键合作伙伴的新增订单公告、以及关于储能容量电价、虚拟电厂等电力市场改革政策。</p>
</div>
</div>
</section>
<!-- Stock Data -->
<section class="space-y-8" x-data="{ tab: 'list1' }">
<h2 class="section-title text-center">产业链核心公司深度剖析</h2>
<div role="tablist" class="tabs tabs-lifted tabs-lg justify-center">
<a role="tab" class="tab" :class="{ 'tab-active': tab === 'list1' }" @click="tab = 'list1'">核心关联公司 (列表一)</a>
<a role="tab" class="tab" :class="{ 'tab-active': tab === 'list2' }" @click="tab = 'list2'">核心关联公司 (列表二)</a>
<a role="tab" class="tab" :class="{ 'tab-active': tab === 'rise' }" @click="tab = 'rise'">零碳概念涨幅分析</a>
</div>
<div x-show="tab === 'list1'" class="glass-card rounded-3xl p-4 md:p-6 overflow-x-auto">
<table class="table table-zebra w-full">
<thead>
<tr>
<th>股票名称</th>
<th>股票代码</th>
<th>关联逻辑</th>
</tr>
</thead>
<tbody>
<tr><td>宁德时代</td><td><a href='https://valuefrontier.cn/company?scode=300750' target='_blank' class='link link-hover text-cyan-400'>300750</a></td><td>打造零碳交通、零碳物流、零碳船舶、零碳工业、等多元化场景应用,共同构建氢能全场景、全生命周期零碳网络。</td></tr>
<tr><td>永福股份</td><td><a href='https://valuefrontier.cn/company?scode=300712' target='_blank' class='link link-hover text-cyan-400'>300712</a></td><td>与宁德时代签署了《股份转让协议》,关键设备上进行研制,可提供直流配电、零碳建筑等一站式整体解决方案。</td></tr>
<tr><td>科士达</td><td><a href='https://valuefrontier.cn/company?scode=002518' target='_blank' class='link link-hover text-cyan-400'>002518</a></td><td>公司与宁德时代合作,在零碳园区等典型应用场景的储能需求持续扩大。</td></tr>
<tr><td>华自科技</td><td><a href='https://valuefrontier.cn/company?scode=300490' target='_blank' class='link link-hover text-cyan-400'>300490</a></td><td>子公司精实机电主要为宁德时代提供覆盖化成、等后端生产环节的一站式自动化解决方案。助力客户构建零碳工厂。</td></tr>
<tr><td>星云股份</td><td><a href='https://valuefrontier.cn/company?scode=300648' target='_blank' class='link link-hover text-cyan-400'>300648</a></td><td>与宁德时代新能源,公司及合作伙伴共同推广的“光储充检智能超充站”“零碳园区”等产品属于工商业储能范畴。</td></tr>
<tr><td>白云电器</td><td><a href='https://valuefrontier.cn/company?scode=603861' target='_blank' class='link link-hover text-cyan-400'>603861</a></td><td>公司与宁德时代有业务上的合作,依靠人工智能控制优化能量流动,达到全系统“低碳”甚至“零碳”高效节能运转。</td></tr>
<tr><td>协鑫能科</td><td><a href='https://valuefrontier.cn/company?scode=002015' target='_blank' class='link link-hover text-cyan-400'>002015</a></td><td>与宁德时代合作,国家电力投资集团与协鑫能科“共建零碳产业园”“绿氢基地”。</td></tr>
<tr><td>上汽集团</td><td><a href='https://valuefrontier.cn/company?scode=600104' target='_blank' class='link link-hover text-cyan-400'>600104</a></td><td>旗下时代上汽宁德时代持股51%、上汽持股49%。上汽研发总院试制车间实现自身运营碳中和,同时获得零碳工厂认证。</td></tr>
<tr><td>中机认检</td><td><a href='https://valuefrontier.cn/company?scode=301508' target='_blank' class='link link-hover text-cyan-400'>301508</a></td><td>打造零碳检测园区。公司投资的上海启源芯动力是宁德时代重卡换电领域的战略合作伙伴。</td></tr>
<tr><td>中能电气</td><td><a href='https://valuefrontier.cn/company?scode=300062' target='_blank' class='link link-hover text-cyan-400'>300062</a></td><td>为宁德新能源提供电力设备销售等业务,子公司中标零碳电厂比亚迪光储+一体化单元项目。</td></tr>
<tr><td>富临运业</td><td><a href='https://valuefrontier.cn/company?scode=002357' target='_blank' class='link link-hover text-cyan-400'>002357</a></td><td>与宁德时代子公司合作,在打造“零碳景区”等方面开展全方位深度合作。</td></tr>
<tr><td>天原股份</td><td><a href='https://valuefrontier.cn/company?scode=002386' target='_blank' class='link link-hover text-cyan-400'>002386</a></td><td>三元正极材料主要供宁德时代。并建设宜宾新能源循环经济零碳示范产业园项目。</td></tr>
<tr><td>诺德股份</td><td><a href='https://valuefrontier.cn/company?scode=600110' target='_blank' class='link link-hover text-cyan-400'>600110</a></td><td>主营铜箔,是宁德时代长期稳定供应商。并建设光储能源电站零碳智慧产业园。</td></tr>
<tr><td>和胜股份</td><td><a href='https://valuefrontier.cn/company?scode=002824' target='_blank' class='link link-hover text-cyan-400'>002824</a></td><td>为宁德时代提供电池托盘等,规划导入光伏太阳能,最终实现“零碳产品”。</td></tr>
<tr><td>众业达</td><td><a href='https://valuefrontier.cn/company?scode=002441' target='_blank' class='link link-hover text-cyan-400'>002441</a></td><td>子公司为宁德时代提供相关电气元器件,携手共赴绿色零碳新程。</td></tr>
</tbody>
</table>
</div>
<div x-show="tab === 'list2'" class="glass-card rounded-3xl p-4 md:p-6 overflow-x-auto">
<table class="table table-zebra w-full">
<thead>
<tr>
<th>股票名称</th>
<th>股票代码</th>
<th>关联逻辑</th>
</tr>
</thead>
<tbody>
<tr><td>宁德时代</td><td><a href='https://valuefrontier.cn/company?scode=300750' target='_blank' class='link link-hover text-cyan-400'>300750</a></td><td>曾毓群:打造“零碳”电网,目标为大型数据中心甚至整座城市供电。</td></tr>
<tr><td>永福股份</td><td><a href='https://valuefrontier.cn/company?scode=300712' target='_blank' class='link link-hover text-cyan-400'>300712</a></td><td>宁德时代受让公司7.9998%股份。公司在关键设备上进行研制,可提供直流配电、交直流微网、零碳建筑等一站式整体解决方案。</td></tr>
<tr><td>科士达</td><td><a href='https://valuefrontier.cn/company?scode=002518' target='_blank' class='link link-hover text-cyan-400'>002518</a></td><td>与宁德时代合作成立储能合资公司。在零碳园区、港口岸电、光储直柔、微电网等典型应用场景的储能需求持续扩大。</td></tr>
<tr><td>华自科技</td><td><a href='https://valuefrontier.cn/company?scode=300490' target='_blank' class='link link-hover text-cyan-400'>300490</a></td><td>子公司为宁德时代提供后端生产环节一站式自动化解决方案。搭载系列新品可与储能/光伏/PCS系统接驳助力客户构建零碳工厂。</td></tr>
<tr><td>星云股份</td><td><a href='https://valuefrontier.cn/company?scode=300648' target='_blank' class='link link-hover text-cyan-400'>300648</a></td><td>宁德时代是公司的战略合作伙伴,双方在锂电池设备、锂电池测试服务、储能等多方面开展合作。</td></tr>
<tr><td>白云电器</td><td><a href='https://valuefrontier.cn/company?scode=603861' target='_blank' class='link link-hover text-cyan-400'>603861</a></td><td>为宁德时代提供中低压成套开关设备。研制新能源供电系统相关设备依靠AI控制优化能量流动达到“零碳”高效节能运转。</td></tr>
<tr><td>众业达</td><td><a href='https://valuefrontier.cn/company?scode=002441' target='_blank' class='link link-hover text-cyan-400'>002441</a></td><td>子公司为宁德时代提供相关电气元器件。天正电气携手众业达共赴绿色零碳新程,为行业客户产业升级赋能!</td></tr>
</tbody>
</table>
</div>
<div x-show="tab === 'rise'" class="glass-card rounded-3xl p-4 md:p-6 overflow-x-auto">
<table class="table table-zebra w-full">
<thead>
<tr>
<th>股票名称</th>
<th>股票代码</th>
<th>涨幅</th>
<th>日期</th>
<th>异动解析</th>
</tr>
</thead>
<tbody>
<tr><td>容百科技</td><td><a href='https://valuefrontier.cn/company?scode=688005' target='_blank' class='link link-hover text-cyan-400'>688005</a></td><td class="text-error font-bold">20.0%</td><td>2025-11-17</td><td>锁定“宁德时代钠电正极 60% 第一供应商”四年大单,远期现金流预期骤增。</td></tr>
<tr><td>豪森智能</td><td><a href='https://valuefrontier.cn/company?scode=688529' target='_blank' class='link link-hover text-cyan-400'>688529</a></td><td class="text-error font-bold">20.02%</td><td>2025-08-06</td><td>公告获得3.2亿元零碳PACK整线订单客户为某头部动力电池厂。</td></tr>
<tr><td>合肥城建</td><td><a href='https://valuefrontier.cn/company?scode=002208' target='_blank' class='link link-hover text-cyan-400'>002208</a></td><td class="text-error font-bold">10.04%</td><td>2025-07-08</td><td>三部门发文推进零碳园区建设,明确专项债、政策性银行信贷支持。</td></tr>
<tr><td>中电鑫龙</td><td><a href='https://valuefrontier.cn/company?scode=002298' target='_blank' class='link link-hover text-cyan-400'>002298</a></td><td class="text-error font-bold">10.05%</td><td>2025-08-26</td><td>“碳监测感知网络”列为全国碳市场基础设施,中标国家电网碳监测订单。</td></tr>
<tr><td>天宸股份</td><td><a href='https://valuefrontier.cn/company?scode=600620' target='_blank' class='link link-hover text-cyan-400'>600620</a></td><td class="text-error font-bold">10.0%</td><td>2025-07-17</td><td>与国家绿色发展基金签署100亿元零碳+固态电池产业基金协议,叠加上海零碳园区新政。</td></tr>
<tr><td>朗迪集团</td><td><a href='https://valuefrontier.cn/company?scode=603726' target='_blank' class='link link-hover text-cyan-400'>603726</a></td><td class="text-error font-bold">10.0%</td><td>2025-07-08</td><td>入选浙江首批零碳工厂,可获补贴及绿电交易补贴。</td></tr>
<tr><td>闽东电力</td><td><a href='https://valuefrontier.cn/company?scode=000993' target='_blank' class='link link-hover text-cyan-400'>000993</a></td><td class="text-error font-bold">10.0%</td><td>2025-11-10</td><td>宁德市政府成立“全域新型电力系统建设工作专班”,公司为市属国有电力企业牵头整合。</td></tr>
<tr><td>尚太科技</td><td><a href='https://valuefrontier.cn/company?scode=001301' target='_blank' class='link link-hover text-cyan-400'>001301</a></td><td class="text-error font-bold">10.0%</td><td>2025-09-30</td><td>与宁德时代签署《联合技术开发协议》,锁定快充负极优先采购权。</td></tr>
<tr><td>正泰电器</td><td><a href='https://valuefrontier.cn/company?scode=601877' target='_blank' class='link link-hover text-cyan-400'>601877</a></td><td class="text-error font-bold">10.0%</td><td>2025-11-06</td><td>国网框架招标技术规范直接引用正泰企业标准受益于AIDC数据中心直流化趋势。</td></tr>
<tr><td>金开新能</td><td><a href='https://valuefrontier.cn/company?scode=600821' target='_blank' class='link link-hover text-cyan-400'>600821</a></td><td class="text-error font-bold">9.94%</td><td>2025-07-09</td><td>“零碳园区”政策落地,要求园区新增负荷匹配高比例绿电,并鼓励“绿电+算力”一体化。</td></tr>
<tr><td>亚士创能</td><td><a href='https://valuefrontier.cn/company?scode=603378' target='_blank' class='link link-hover text-cyan-400'>603378</a></td><td class="text-error font-bold">9.94%</td><td>2025-10-27</td><td>公告与华为数字能源共建“零碳园区”并给出5年50亿元项目指引。</td></tr>
</tbody>
</table>
</div>
</section>
</main>
</div>
<script>
var chartDom = document.getElementById('timeline-chart');
var myChart = echarts.init(chartDom);
var option;
const data = [
{ name: '战略奠基: 合作与投资', value: ['2024-08-28', '2024-10-16'], itemStyle: { color: '#3b82f6' } },
{ name: '概念引爆: 曾毓群"十倍"论', value: ['2024-11-13', '2024-11-13'], itemStyle: { color: '#ec4899' } },
{ name: '深化落地: 多方合作', value: ['2025-01-05', '2025-09-22'], itemStyle: { color: '#10b981' } },
{ name: '实体运营: 成立时代零碳公司', value: ['2025-07-08', '2025-07-08'], itemStyle: { color: '#8b5cf6' } },
{ name: '未来预期: 运营碳中和&二代钠电', value: ['2025-12-31', '2025-12-31'], itemStyle: { color: '#f97316' } },
];
const events = [
{ name: '合作上港/上海城投', value: ['2024-08-28', 1] },
{ name: '投资碳中和基金', value: ['2024-09-09', 1] },
{ name: '提出"零碳新基建"', value: ['2024-09-27', 1] },
{ name: '设立香港研究院', value: ['2024-10-16', 1] },
{ name: '曾毓群采访', value: ['2024-11-13', 2] },
{ name: '合作海螺/DHL/兰州等', value: ['2025-05-15', 3] }, // Simplified date for plotting
{ name: '成立时代零碳', value: ['2025-07-08', 4] },
{ name: '核心运营碳中和目标', value: ['2025-12-31', 5] },
];
const categories = data.map(item => item.name);
function renderItem(params, api) {
var categoryIndex = api.value(0);
var start = api.coord([api.value(1), categoryIndex]);
var end = api.coord([api.value(2), categoryIndex]);
var height = api.size([0, 1])[1] * 0.6;
var rectShape = echarts.graphic.clipRectByRect(
{
x: start[0],
y: start[1] - height / 2,
width: end[0] - start[0],
height: height
},
{
x: params.coordSys.x,
y: params.coordSys.y,
width: params.coordSys.width,
height: params.coordSys.height
}
);
return (
rectShape && {
type: 'rect',
transition: ['shape'],
shape: rectShape,
style: api.style()
}
);
}
option = {
tooltip: {
trigger: 'item',
formatter: function (params) {
if (params.seriesType === 'custom') {
return params.marker + params.name + ': ' + params.value[1] + ' - ' + params.value[2];
}
if (params.seriesType === 'scatter') {
return params.marker + params.name;
}
},
backgroundColor: 'rgba(10, 12, 28, 0.8)',
borderColor: 'rgba(255, 255, 255, 0.1)',
textStyle: {
color: '#e0e0e0'
}
},
dataZoom: [
{
type: 'slider',
filterMode: 'weakFilter',
showDataShadow: false,
bottom: 20,
height: 10,
borderColor: 'transparent',
backgroundColor: 'rgba(255,255,255,0.05)',
fillerColor: 'rgba(0, 225, 255, 0.2)',
start: 0,
end: 100
},
{
type: 'inside',
filterMode: 'weakFilter'
}
],
grid: {
left: '10%',
right: '5%',
top: '5%',
bottom: '15%'
},
xAxis: {
type: 'time',
min: '2024-08-01',
max: '2026-01-31',
axisLine: { lineStyle: { color: 'rgba(255,255,255,0.2)' } },
axisLabel: { color: '#a0a0a0' }
},
yAxis: {
data: categories,
axisLine: { lineStyle: { color: 'rgba(255,255,255,0.2)' } },
axisLabel: { color: '#a0a0a0' }
},
series: [
{
type: 'custom',
renderItem: renderItem,
itemStyle: {
opacity: 0.8,
},
encode: {
x: [1, 2],
y: 0
},
data: data.map((item, index) => ({
name: item.name,
value: [index, item.value[0], item.value[1]],
itemStyle: item.itemStyle,
}))
},
{
type: 'scatter',
symbol: 'diamond',
symbolSize: 12,
data: events.map(event => ({
name: event.name,
value: [event.value[0], categories[event.value[1]-1]],
itemStyle: {
color: data[event.value[1]-1].itemStyle.color,
borderColor: '#fff',
borderWidth: 1
}
})),
zlevel: 2
}
]
};
myChart.setOption(option);
window.addEventListener('resize', myChart.resize);
</script>
</body>
</html>