Files
vf_react/public/htmls/西南水电.html
2025-12-05 13:29:18 +08:00

462 lines
31 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>AI In-depth Analysis: Southwest Hydropower Concept</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.10.2/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>
<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=Manrope:wght@300;400;500;700&family=Space+Grotesk:wght@400;500;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Manrope', sans-serif;
background-color: #05060B;
color: #E0E0E0;
overflow-x: hidden;
}
.font-title {
font-family: 'Space Grotesk', sans-serif;
}
.glass-card {
background: rgba(20, 20, 35, 0.45);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
}
.glass-card:hover {
border-color: rgba(0, 255, 255, 0.3);
box-shadow: 0 0 25px rgba(0, 255, 255, 0.1);
}
.bento-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 1.5rem;
}
.bento-item {
border-radius: 1.5rem; /* 极致圆角 */
padding: 1.5rem;
position: relative;
overflow: hidden;
}
.col-span-1 { grid-column: span 1 / span 1; }
.col-span-2 { grid-column: span 2 / span 2; }
.col-span-3 { grid-column: span 3 / span 3; }
.col-span-4 { grid-column: span 4 / span 4; }
.col-span-6 { grid-column: span 6 / span 6; }
.row-span-1 { grid-row: span 1 / span 1; }
.row-span-2 { grid-row: span 2 / span 2; }
@media (max-width: 1024px) {
.bento-grid { grid-template-columns: repeat(1, 1fr); }
.col-span-1, .col-span-2, .col-span-3, .col-span-4, .col-span-6 { grid-column: span 1 / span 1; }
}
.glow-effect::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 1.5rem;
padding: 1px;
background: linear-gradient(135deg, rgba(0, 255, 255, 0.3), rgba(170, 100, 255, 0.3));
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
z-index: -1;
opacity: 0.5;
}
.background-glow {
position: fixed;
width: 800px;
height: 800px;
border-radius: 50%;
background: radial-gradient(circle, rgba(29, 78, 216, 0.15) 0%, rgba(29, 78, 216, 0) 70%);
z-index: -1;
pointer-events: none;
}
.glow-1 { top: -20%; left: -15%; }
.glow-2 { bottom: -25%; right: -20%; background: radial-gradient(circle, rgba(147, 51, 234, 0.15) 0%, rgba(147, 51, 234, 0) 70%); }
.tab-lift {
transition: all 0.3s ease;
}
.tab-lift:hover {
transform: translateY(-2px);
background-color: rgba(255,255,255,0.1);
}
.table th, .table td {
background-color: transparent !important;
border-bottom-color: rgba(255, 255, 255, 0.1);
}
.table-container {
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 1.5rem;
padding: 1rem;
overflow: hidden;
background: rgba(20, 20, 35, 0.45);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
}
</style>
</head>
<body class="min-h-screen">
<div class="background-glow glow-1"></div>
<div class="background-glow glow-2"></div>
<div class="container mx-auto px-4 py-8 md:py-16">
<header class="text-center mb-16">
<h1 class="font-title text-4xl md:text-6xl font-bold tracking-tighter mb-4">
<span class="bg-clip-text text-transparent bg-gradient-to-r from-cyan-400 to-purple-500">西南水电</span>
<span class="text-gray-400"> / Southwest Hydropower</span>
</h1>
<p class="text-lg text-gray-400 max-w-3xl mx-auto">
北京价值前沿科技有限公司 AI投研agent“价小前投研” 呈现
</p>
<p class="text-sm text-gray-500 mt-2">本报告为AI合成数据投资需谨慎。</p>
</header>
<main class="space-y-12">
<!-- Insight Core View -->
<section class="bento-grid">
<div class="bento-item glass-card col-span-6 lg:col-span-4 row-span-2 flex flex-col justify-between">
<div>
<h2 class="font-title text-2xl font-bold mb-4 text-cyan-300">概念核心观点 / Core Insight</h2>
<p class="text-base text-gray-300 leading-relaxed">
“西南水电”概念本质上是一个由国家顶层能源战略驱动、以雅鲁藏布江下游超级工程为核心载体的**长周期、大体量**基建主题。当前,该概念正从**政策驱动的预期阶段**,逐步向**项目招标和前期工程启动的验证阶段**过渡,其核心投资逻辑在于超级工程对特定区域和特定环节带来的**高确定性、高弹性**的需求增量。
</p>
</div>
<div class="mt-8">
<div id="investmentSankey" style="width: 100%; height: 280px;"></div>
</div>
</div>
<div class="bento-item glass-card col-span-6 lg:col-span-2">
<h3 class="font-title text-xl font-bold mb-3 text-purple-300">核心驱动力 / Key Drivers</h3>
<ul class="space-y-3 text-sm text-gray-300">
<li class="flex items-start"><span class="text-cyan-400 mr-2 mt-1"></span><div><strong>国家能源安全与绿色转型:</strong> 2030年非化石能源消费比重达25%的国家战略目标。</div></li>
<li class="flex items-start"><span class="text-cyan-400 mr-2 mt-1"></span><div><strong>逆周期宏观调控:</strong> 超万亿级投资是拉动内需、稳定经济增长的有效工具。</div></li>
</ul>
</div>
<div class="bento-item glass-card col-span-6 lg:col-span-2">
<h3 class="font-title text-xl font-bold mb-3 text-amber-300">潜在风险与预期差 / Risks & Gaps</h3>
<ul class="space-y-3 text-sm text-gray-300">
<li class="flex items-start"><span class="text-amber-400 mr-2 mt-1"></span><div><strong>时间预期差:</strong> 市场预期“发力在即”但大规模开工或在2025年后。</div></li>
<li class="flex items-start"><span class="text-amber-400 mr-2 mt-1"></span><div><strong>需求规模预期差:</strong> 民爆需求量估算存在数量级差异,市场可能高估弹性。</div></li>
<li class="flex items-start"><span class="text-amber-400 mr-2 mt-1"></span><div><strong>项目延期风险:</strong> 地缘政治、环保、移民等因素可能影响项目进度。</div></li>
</ul>
</div>
</section>
<!-- Event Timeline and Project Details -->
<section class="bento-item glass-card col-span-6" x-data="{ tab: 'timeline' }">
<div role="tablist" class="tabs tabs-boxed bg-black/20 mb-6">
<a role="tab" class="tab tab-lift" :class="{ 'tab-active bg-cyan-600/50': tab === 'timeline' }" @click="tab = 'timeline'">事件脉络 & 催化剂</a>
<a role="tab" class="tab tab-lift" :class="{ 'tab-active bg-cyan-600/50': tab === 'project' }" @click="tab = 'project'">核心项目:雅鲁藏布江下游</a>
<a role="tab" class="tab tab-lift" :class="{ 'tab-active bg-cyan-600/50': tab === 'path' }" @click="tab = 'path'">未来发展路径</a>
</div>
<div x-show="tab === 'timeline'" class="space-y-4">
<h3 class="font-title text-xl font-bold mb-3 text-cyan-300">事件脉络 / Event Timeline</h3>
<ul class="timeline timeline-snap-icon max-md:timeline-compact timeline-vertical">
<li>
<div class="timeline-middle"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5 text-cyan-400"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.06 0l4.001-5.498z" clip-rule="evenodd" /></svg></div>
<div class="timeline-end md:timeline-start mb-10">
<time class="font-mono italic">~2024.08</time>
<div class="text-lg font-black">战略定调</div>
8月11日中央文件首次明确“加快西南水电等清洁能源基地建设”并点名“推动雅鲁藏布江下游水电规划建设”。
</div>
<hr class="bg-cyan-400/50"/>
</li>
<li>
<hr class="bg-cyan-400/50"/>
<div class="timeline-middle"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5 text-cyan-400"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.06 0l4.001-5.498z" clip-rule="evenodd" /></svg></div>
<div class="timeline-start md:timeline-end mb-10">
<time class="font-mono italic">2024.08中旬</time>
<div class="text-lg font-black">市场发酵</div>
券商路演密集召开聚焦雅下水电站万亿级投资规模产业链挖掘启动相关概念股大幅上涨近50%。
</div>
<hr class="bg-cyan-400/50"/>
</li>
<li>
<hr class="bg-cyan-400/50"/>
<div class="timeline-middle"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5 text-cyan-400"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.06 0l4.001-5.498z" clip-rule="evenodd" /></svg></div>
<div class="timeline-end md:timeline-start mb-10">
<time class="font-mono italic">2024.08下旬-11月</time>
<div class="text-lg font-black">预期深化</div>
路演澄清“冬季可施工”等预期差,华能、电建等环评招标加速,被视为项目进入实质性推进的关键催化剂。
</div>
</li>
</ul>
</div>
<div x-show="tab === 'project'" class="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
<div>
<h3 class="font-title text-2xl font-bold text-purple-300">雅鲁藏布江下游水电站 (墨脱)</h3>
<p class="text-gray-400 mt-2 mb-6">世界水能富集之最,国家能源安全的战略支点。</p>
<div class="space-y-4">
<div class="flex items-center">
<div class="stat-figure text-secondary"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block w-8 h-8 stroke-current text-purple-400"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg></div>
<div class="ml-4">
<div class="stat-title text-gray-400">装机容量</div>
<div class="stat-value text-3xl text-white">60 GW</div>
<div class="stat-desc text-gray-500">≈ 2.7倍 三峡工程</div>
</div>
</div>
<div class="flex items-center">
<div class="stat-figure text-secondary"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block w-8 h-8 stroke-current text-purple-400"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v.01"></path></svg></div>
<div class="ml-4">
<div class="stat-title text-gray-400">预计总投资</div>
<div class="stat-value text-3xl text-white">1.7 - 2 万亿</div>
<div class="stat-desc text-gray-500">史诗级基建投资</div>
</div>
</div>
<div class="flex items-center">
<div class="stat-figure text-secondary"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block w-8 h-8 stroke-current text-purple-400"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 18.657A8 8 0 016.343 7.343S7 9 9 10c0-2 .5-5 2.986-7C14 5 16.09 5.777 17.657 7.343A8 8 0 0117.657 18.657z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.879 16.121A3 3 0 1014.12 11.88l-4.242 4.242z"></path></svg></div>
<div class="ml-4">
<div class="stat-title text-gray-400">水泥需求</div>
<div class="stat-value text-3xl text-white">~5400万吨</div>
<div class="stat-desc text-gray-500">年均占西藏产量30%</div>
</div>
</div>
</div>
</div>
<div>
<div id="projectScaleChart" style="width: 100%; height: 400px;"></div>
</div>
</div>
<div x-show="tab === 'path'">
<h3 class="font-title text-xl font-bold mb-3 text-cyan-300">长期发展路径 / Long-term Development Path</h3>
<div id="developmentTimeline" style="width: 100%; height: 400px;"></div>
</div>
</section>
<!-- Industry Chain and Key Players -->
<section class="bento-grid">
<div class="bento-item glass-card col-span-6 lg:col-span-4">
<h3 class="font-title text-2xl font-bold mb-4 text-cyan-300">产业链深度剖析 / Industry Chain Analysis</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
<div class="bg-black/20 p-4 rounded-xl">
<h4 class="font-bold text-purple-300 mb-2">上游:原材料与设备</h4>
<ul class="space-y-1 text-gray-300 list-disc list-inside">
<li><strong>基础建材:</strong> 水泥、民爆、砂石骨料</li>
<li><strong>核心装备:</strong> TBM掘进机、缆索起重机</li>
<li><strong>特种材料:</strong> 减水剂、岩土工程服务</li>
</ul>
</div>
<div class="bg-black/20 p-4 rounded-xl">
<h4 class="font-bold text-purple-300 mb-2">中游:工程设计与建设</h4>
<ul class="space-y-1 text-gray-300 list-disc list-inside">
<li><strong>EPC总包:</strong> 中国电建、中国能建 (双寡头)</li>
<li><strong>专业设计施工:</strong> 勘察、设计、监理</li>
</ul>
</div>
<div class="bg-black/20 p-4 rounded-xl">
<h4 class="font-bold text-purple-300 mb-2">下游:发电与运营</h4>
<ul class="space-y-1 text-gray-300 list-disc list-inside">
<li><strong>水电运营商:</strong> 长江电力、华能水电等</li>
<li><strong>一体化开发:</strong> 水风光储一体化基地建设</li>
</ul>
</div>
</div>
</div>
<div class="bento-item glass-card col-span-6 lg:col-span-2">
<h3 class="font-title text-xl font-bold mb-3 text-cyan-300">最具投资价值环节</h3>
<ul class="space-y-3 text-sm">
<li><strong class="text-purple-300">高确定性:</strong> 特种工程装备(如TBM),技术壁垒高,订单能见度强。</li>
<li><strong class="text-purple-300">高弹性:</strong> 西藏本地建材(水泥/民爆),区位优势独特,需求爆发时业绩弹性最大。</li>
</ul>
</div>
</section>
<section class="bento-item glass-card col-span-6">
<h2 class="font-title text-2xl font-bold mb-6 text-cyan-300">核心玩家定位与对比 / Key Player Positioning</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="border border-white/10 p-4 rounded-2xl bg-black/20">
<h4 class="font-bold text-lg text-cyan-400">领导者 (确定性高)</h4>
<p class="text-sm text-gray-400 mb-2">确定性高,弹性低</p>
<p class="text-gray-300"><strong>中国电建、中国能建</strong>EPC双寡头分食最大份额订单。逻辑最硬但对总营收弹性有限约5%)。</p>
</div>
<div class="border border-white/10 p-4 rounded-2xl bg-black/20">
<h4 class="font-bold text-lg text-purple-400">纯粹受益者 (弹性高)</h4>
<p class="text-sm text-gray-400 mb-2">弹性高,风险高</p>
<p class="text-gray-300"><strong>高争民爆、西藏天路</strong>:西藏本地龙头,区位优势无人能及。逻辑最纯粹,但需警惕产能瓶颈和外部竞争。</p>
</div>
<div class="border border-white/10 p-4 rounded-2xl bg-black/20">
<h4 class="font-bold text-lg text-amber-400">细分龙头 (技术壁垒)</h4>
<p class="text-sm text-gray-400 mb-2">技术壁垒高</p>
<p class="text-gray-300"><strong>铁建重工、法兰泰克</strong>TBM、缆索起重机等领域具备技术和项目经验优势受益逻辑扎实但需验证产能。</p>
</div>
</div>
<div class="mt-6 p-4 rounded-2xl border border-red-500/30 bg-red-900/20">
<h4 class="font-bold text-lg text-red-300 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.21 3.03-1.742 3.03H4.42c-1.532 0-2.492-1.696-1.742-3.03l5.58-9.92zM10 13a1 1 0 110-2 1 1 0 010 2zm-1.75-5.25a.75.75 0 00-1.5 0v3.5a.75.75 0 001.5 0v-3.5z" clip-rule="evenodd" /></svg>证伪案例:苏博特</h4>
<p class="text-sm text-red-200/80 mt-2">研报列为核心标的但路演数据显示其林芝工厂产能仅3万吨规模太小无法匹配千万吨级水泥的庞大需求。这是典型的“故事”与“现实”的脱节。</p>
</div>
</section>
<!-- Associated Stocks Table -->
<section>
<h2 class="font-title text-3xl font-bold mb-8 text-center text-cyan-300">关联个股列表 / Associated Stocks</h2>
<div class="table-container">
<div class="overflow-x-auto">
<table class="table table-zebra w-full">
<thead>
<tr class="text-base text-gray-300">
<th>股票名称</th>
<th>股票代码</th>
<th>核心逻辑</th>
<th>标签</th>
</tr>
</thead>
<tbody>
<tr><td>西藏天路</td><td><a href="https://valuefrontier.cn/company?scode=600326" target="_blank" class="text-cyan-400 hover:underline">600326</a></td><td>西藏区域水泥龙头市占率近40%,直接受益于本地大规模基建。</td><td><span class="badge badge-error">涨停个股</span></td></tr>
<tr><td>保利联合</td><td><a href="https://valuefrontier.cn/company?scode=002037" target="_blank" class="text-cyan-400 hover:underline">002037</a></td><td>与高争民爆合资在西部建设民爆生产线,具备产能协同优势。</td><td><span class="badge badge-error">涨停个股</span></td></tr>
<tr><td>高争民爆</td><td><a href="https://valuefrontier.cn/company?scode=002827" target="_blank" class="text-cyan-400 hover:underline">002827</a></td><td>西藏唯一民爆上市公司,营销网络覆盖全区,区位优势最纯粹。</td><td><span class="badge badge-error">涨停个股</span></td></tr>
<tr><td>大宏立</td><td><a href="https://valuefrontier.cn/company?scode=300865" target="_blank" class="text-cyan-400 hover:underline">300865</a></td><td>长期深耕西南市场,为大型水电项目提供砂石骨料破碎筛分设备。</td><td><span class="badge badge-error">涨停个股</span></td></tr>
<tr><td>筑博设计</td><td><a href="https://valuefrontier.cn/company?scode=300564" target="_blank" class="text-cyan-400 hover:underline">300564</a></td><td>注册地为西藏拉萨,为西藏本地第一大建筑设计上市公司。</td><td><span class="badge badge-error">涨停个股</span></td></tr>
<tr><td>中岩大地</td><td><a href="https://valuefrontier.cn/company?scode=003001" target="_blank" class="text-cyan-400 hover:underline">003001</a></td><td>超深和水平旋喷技术领先,应用于大坝地基和隧洞围岩等岩土工程。</td><td><span class="badge badge-error">涨停个股</span></td></tr>
<tr><td>苏博特</td><td><a href="https://valuefrontier.cn/company?scode=603916" target="_blank" class="text-cyan-400 hover:underline">603916</a></td><td>减水剂龙头,与大型工程单位有战略合作,但西藏产能待验证。</td><td><span class="badge badge-error">涨停个股</span></td></tr>
<tr><td>法兰泰克</td><td><a href="https://valuefrontier.cn/company?scode=603966" target="_blank" class="text-cyan-400 hover:underline">603966</a></td><td>子公司为白鹤滩水电站供应所有缆索起重机,技术经验优势显著。</td><td><span class="badge badge-error">涨停个股</span></td></tr>
<tr><td>五新隧装</td><td><a href="https://valuefrontier.cn/company?scode=835174" target="_blank" class="text-cyan-400 hover:underline">835174</a></td><td>主营隧道施工智能装备,针对水利水电市场开发有针对性产品。</td><td><span class="badge badge-error">涨停个股</span></td></tr>
<tr><td>易普力</td><td><a href="https://valuefrontier.cn/company?scode=002096" target="_blank" class="text-cyan-400 hover:underline">002096</a></td><td>民爆一体化龙头,央企背景,已在西藏布局产能,是高争民爆的有力竞争者。</td><td><span class="badge badge-info">相关个股</span></td></tr>
</tbody>
</table>
</div>
</div>
</section>
</main>
<footer class="text-center mt-16">
<p class="text-sm text-gray-500">
本报告由北京价值前沿科技有限公司 AI投研agent“价小前投研”基于公开数据合成不构成任何投资建议。
</p>
<p class="text-sm text-gray-600">© 2024 ValueFrontier. All Rights Reserved.</p>
</footer>
</div>
<script>
// ECharts for Investment Sankey
var sankeyChart = echarts.init(document.getElementById('investmentSankey'));
var sankeyOption = {
tooltip: { trigger: 'item', triggerOn: 'mousemove' },
series: [{
type: 'sankey',
layout: 'none',
emphasis: { focus: 'adjacency' },
data: [
{ name: '总投资(>1.7万亿)' }, { name: '建筑工程' }, { name: '安装工程' },
{ name: '民爆' }, { name: '水泥' }, { name: '设备' }, { name: 'TBM' },
{ name: '其他' }
],
links: [
{ source: '总投资(>1.7万亿)', target: '建筑工程', value: 50 },
{ source: '总投资(>1.7万亿)', target: '安装工程', value: 30 },
{ source: '总投资(>1.7万亿)', target: '其他', value: 20 },
{ source: '建筑工程', target: '水泥', value: 25 },
{ source: '建筑工程', target: '民爆', value: 15 },
{ source: '安装工程', target: '设备', value: 20 },
{ source: '安装工程', target: 'TBM', value: 10 }
],
label: { color: '#fff' },
lineStyle: { color: 'gradient', curveness: 0.5 }
}],
textStyle: { fontFamily: 'Manrope' }
};
sankeyChart.setOption(sankeyOption);
// ECharts for Project Scale Comparison
var scaleChart = echarts.init(document.getElementById('projectScaleChart'));
var scaleOption = {
title: { text: '装机容量对比 (GW)', textStyle: { color: '#E0E0E0', fontFamily: 'Manrope' }, left: 'center' },
tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
xAxis: { type: 'value', boundaryGap: [0, 0.01], axisLabel: { color: '#ccc' } },
yAxis: { type: 'category', data: ['三峡工程', '白鹤滩', '雅鲁藏布江下游'], axisLabel: { color: '#ccc' } },
series: [{
name: '装机容量 (GW)',
type: 'bar',
data: [22.5, 16, 60],
itemStyle: {
color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
{ offset: 0, color: '#8A2BE2' },
{ offset: 1, color: '#4A00E0' }
])
}
}],
textStyle: { fontFamily: 'Manrope' }
};
scaleChart.setOption(scaleOption);
// ECharts for Development Timeline
var timelineChart = echarts.init(document.getElementById('developmentTimeline'));
var timelineOption = {
title: { text: '项目发展路径', textStyle: { color: '#E0E0E0', fontFamily: 'Manrope' }, left: 'center' },
tooltip: { trigger: 'axis', formatter: '{b}<br/>{c}' },
xAxis: { type: 'category', data: ['前期准备', '主体施工', '设备安装', '运营&一体化'], axisLabel: { color: '#ccc' }, axisTick: { alignWithLabel: true } },
yAxis: { type: 'value', show: false },
series: [{
data: [
{ value: 1, itemStyle: { color: '#00BFFF' } },
{ value: 2, itemStyle: { color: '#483D8B' } },
{ value: 3, itemStyle: { color: '#8A2BE2' } },
{ value: 4, itemStyle: { color: '#00CED1' } }
],
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 10,
lineStyle: { width: 3 },
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(72, 61, 139, 0.5)'
}, {
offset: 1,
color: 'rgba(72, 61, 139, 0)'
}])
},
label: {
show: true,
position: 'top',
formatter: function(params) {
const labels = {
'前期准备': '当前-2025\n民爆、隧道装备率先受益',
'主体施工': '2026-2035\n水泥、TBM需求达顶峰',
'设备安装': '2035-\n水轮机组交付高峰',
'运营&一体化': '投产后\n稳定现金流+新能源开发'
};
return labels[params.name];
},
color: '#fff',
backgroundColor: 'rgba(0,0,0,0.3)',
padding: [5, 10],
borderRadius: 5
}
}],
textStyle: { fontFamily: 'Manrope' }
};
timelineChart.setOption(timelineOption);
// Resize charts on window resize
window.addEventListener('resize', function() {
sankeyChart.resize();
scaleChart.resize();
timelineChart.resize();
});
</script>
</body>
</html>