523 lines
30 KiB
HTML
523 lines
30 KiB
HTML
<!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>
|
||
|
||
<!-- Tailwind CSS & DaisyUI -->
|
||
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.11.1/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 -->
|
||
<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=Inter:wght@300;400;500;600;700&family=Orbitron:wght@400;700&display=swap" rel="stylesheet">
|
||
|
||
<style>
|
||
body {
|
||
font-family: 'Inter', sans-serif;
|
||
background-color: #0a0a1a;
|
||
background-image:
|
||
radial-gradient(ellipse 200% 150% at 50% 0%, rgba(38, 70, 83, 0.2), transparent),
|
||
radial-gradient(circle at 10% 10%, rgba(76, 29, 149, 0.15), transparent),
|
||
radial-gradient(circle at 90% 80%, rgba(2, 48, 71, 0.2), transparent);
|
||
min-height: 100vh;
|
||
}
|
||
|
||
.glass-card {
|
||
background: rgba(10, 10, 30, 0.4);
|
||
backdrop-filter: blur(20px);
|
||
-webkit-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 20px rgba(0, 255, 255, 0.1);
|
||
}
|
||
|
||
.concept-title {
|
||
font-family: 'Orbitron', sans-serif;
|
||
text-shadow: 0 0 5px rgba(0, 255, 255, 0.7), 0 0 10px rgba(0, 255, 255, 0.5);
|
||
}
|
||
|
||
.neon-text {
|
||
color: #00e5ff;
|
||
text-shadow: 0 0 3px #00e5ff, 0 0 5px #00e5ff, 0 0 10px #00e5ff;
|
||
}
|
||
|
||
.bento-grid {
|
||
display: grid;
|
||
gap: 1rem;
|
||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||
}
|
||
|
||
.tab-lifted {
|
||
background-color: transparent !important;
|
||
}
|
||
|
||
.tab-active {
|
||
background-color: rgba(0, 229, 255, 0.1) !important;
|
||
border-color: #00e5ff !important;
|
||
color: #00e5ff !important;
|
||
}
|
||
|
||
table thead th {
|
||
background-color: rgba(0, 229, 255, 0.1);
|
||
color: #00e5ff;
|
||
font-weight: 600;
|
||
}
|
||
|
||
table tbody tr:hover {
|
||
background-color: rgba(0, 229, 255, 0.05);
|
||
}
|
||
|
||
.glow-divider {
|
||
height: 1px;
|
||
background: linear-gradient(90deg, transparent, #00e5ff, transparent);
|
||
border: none;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="text-gray-300">
|
||
<div class="container mx-auto p-4 md:p-8">
|
||
<!-- Header -->
|
||
<header class="text-center mb-12">
|
||
<h1 class="text-4xl md:text-6xl font-bold concept-title text-white">华为智能充电网络</h1>
|
||
<p class="mt-4 text-lg text-cyan-300 max-w-4xl mx-auto">一场以技术为矛、生态为盾的能源基础设施革命</p>
|
||
<p class="mt-2 text-xs text-gray-500">北京价值前沿科技有限公司 AI投研agent：“价小前投研” 进行投研呈现，本报告为AI合成数据，投资需谨慎。</p>
|
||
</header>
|
||
|
||
<!-- Insight Section -->
|
||
<section id="insight" class="mb-12">
|
||
<div class="glass-card rounded-3xl p-6 md:p-8">
|
||
<h2 class="text-3xl font-bold mb-6 text-white neon-text">概念Insight深度解析</h2>
|
||
|
||
<div class="space-y-8">
|
||
<!-- Core Viewpoint -->
|
||
<div>
|
||
<h3 class="text-xl font-semibold mb-4 text-cyan-300 border-l-4 border-cyan-300 pl-4">核心观点摘要</h3>
|
||
<p class="text-gray-300">华为智能充电网络不仅是对传统充电桩业务的升级，更是一场以<strong class="text-white">技术（全液冷、功率池化）为矛、生态（鸿蒙智行、光储充网）为盾</strong>的能源基础设施革命。当前，该概念正处于从技术验证、战略发布向<strong class="text-white">大规模网络建设与商业化落地</strong>过渡的关键拐点。其核心驱动力源于华为解决行业痛点的技术确定性与构建平台的强大号召力，未来潜力在于重塑车、桩、网关系，打造一个万亿级的能源互联网平台。</p>
|
||
</div>
|
||
|
||
<hr class="glow-divider my-8">
|
||
|
||
<!-- Core Logic -->
|
||
<div>
|
||
<h3 class="text-xl font-semibold mb-4 text-cyan-300 border-l-4 border-cyan-300 pl-4">核心逻辑与市场认知</h3>
|
||
<div class="bento-grid">
|
||
<div class="glass-card rounded-2xl p-6 space-y-3">
|
||
<h4 class="font-bold text-white">技术降维打击</h4>
|
||
<ul class="list-disc list-inside space-y-2 text-sm">
|
||
<li><strong class="text-cyan-400">全液冷架构:</strong> 故障率降低50%，寿命延长至15年，适应极端环境。</li>
|
||
<li><strong class="text-cyan-400">功率池化:</strong> 利用率提升30%，节省40%市电改造及20%电缆成本。</li>
|
||
<li><strong class="text-cyan-400">800V高压平台协同:</strong> 实现“5分钟充电超200公里”极致体验，形成“车+桩”闭环。</li>
|
||
</ul>
|
||
</div>
|
||
<div class="glass-card rounded-2xl p-6 space-y-3">
|
||
<h4 class="font-bold text-white">生态平台构建</h4>
|
||
<ul class="list-disc list-inside space-y-2 text-sm">
|
||
<li><strong class="text-cyan-400">战略高度:</strong> 目标超越乘用车，瞄准重卡电动化与兆瓦级充电。</li>
|
||
<li><strong class="text-cyan-400">“光储充”一体化:</strong> 缩短投资回报周期至4-5年，商业模式更优。</li>
|
||
<li><strong class="text-cyan-400">车网互动(V2G):</strong> 储备V2G技术，长远目标是将电动车变为分布式储能单元，打开能源交易空间。</li>
|
||
</ul>
|
||
</div>
|
||
<div class="glass-card rounded-2xl p-6 space-y-3 col-span-1 md:col-span-2">
|
||
<h4 class="font-bold text-white">预期差分析</h4>
|
||
<ul class="list-disc list-inside space-y-2 text-sm">
|
||
<li><strong class="text-white">建设模式复杂性:</strong> 市场可能低估与政府、国企合作模式的复杂性，<strong class="text-amber-400">10万桩</strong>目标推进速度可能比预期更复杂。</li>
|
||
<li><strong class="text-white">商业模式挑战:</strong> “光储充”模式盈利能力依赖高初始投资和稳定的峰谷电价差政策，存在不确定性。</li>
|
||
<li><strong class="text-white">生态护城河:</strong> 市场可能忽略基于ADN技术的“全面智能化”运营能力，其对长期运维成本的降低尚未被充分认知。</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<hr class="glow-divider my-8">
|
||
|
||
<!-- Catalysts and Development Path -->
|
||
<div class="grid md:grid-cols-2 gap-8">
|
||
<div>
|
||
<h3 class="text-xl font-semibold mb-4 text-cyan-300 border-l-4 border-cyan-300 pl-4">关键催化剂</h3>
|
||
<ul class="list-disc list-inside space-y-2">
|
||
<li><strong class="text-white">近期 (3-6个月):</strong>
|
||
<ul class="list-inside list-[circle] ml-4 text-sm">
|
||
<li>2024 Q3能否完成<strong class="text-amber-400">5万根</strong>超快充桩部署。</li>
|
||
<li>与大型央国企或重点省市的重大合作协议落地。</li>
|
||
<li>兆瓦级重卡充电与充电机器人量产商用进展。</li>
|
||
<li>国家层面针对全液冷、V2G的专项补贴或行业标准。</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<h3 class="text-xl font-semibold mb-4 text-cyan-300 border-l-4 border-cyan-300 pl-4">长期发展路径</h3>
|
||
<ul class="timeline timeline-compact timeline-vertical">
|
||
<li>
|
||
<div class="timeline-start timeline-box glass-card"><strong>第一阶段 (2024-2025):</strong> 网络基础设施建设期，完成10万桩初步覆盖，确立标杆。</div>
|
||
<hr class="bg-cyan-300"/>
|
||
</li>
|
||
<li>
|
||
<hr class="bg-cyan-300"/>
|
||
<div class="timeline-end timeline-box glass-card"><strong>第二阶段 (2025-2028):</strong> 生态运营与场景深化期，深化“光储充”运营，推动V2G商用，复制到重卡、园区。</div>
|
||
<hr class="bg-cyan-300"/>
|
||
</li>
|
||
<li>
|
||
<hr class="bg-cyan-300"/>
|
||
<div class="timeline-start timeline-box glass-card"><strong>第三阶段 (2028+):</strong> 能源互联网平台期，转型为虚拟电厂和能源互联网服务商。</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<hr class="glow-divider my-8">
|
||
|
||
<!-- Risk -->
|
||
<div>
|
||
<h3 class="text-xl font-semibold mb-4 text-red-400 border-l-4 border-red-400 pl-4">潜在风险与挑战</h3>
|
||
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-4 text-sm">
|
||
<div class="p-4 bg-red-900/20 border border-red-500/30 rounded-lg"><strong>技术风险:</strong> 大规模集群对电网冲击，充电机器人商用瓶颈。</div>
|
||
<div class="p-4 bg-red-900/20 border border-red-500/30 rounded-lg"><strong>商业化风险:</strong> 高昂的初始投资 (CAPEX)，盈利模式依赖电力市场政策。</div>
|
||
<div class="p-4 bg-red-900/20 border border-red-500/30 rounded-lg"><strong>竞争风险:</strong> 传统巨头与车企加速自建网络，行业进入洗牌期。</div>
|
||
<div class="p-4 bg-red-900/20 border border-red-500/30 rounded-lg md:col-span-3"><strong class="text-amber-300">信息交叉验证风险:</strong> 年底<strong class="text-white">10万桩</strong>的目标与当前披露数量存在巨大差距，极具挑战性，是主要潜在“爆雷点”。</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Data Section -->
|
||
<section id="data" class="mb-12">
|
||
<div x-data="{ tab: 'news' }" class="glass-card rounded-3xl p-6 md:p-8">
|
||
<h2 class="text-3xl font-bold mb-6 text-white neon-text">核心数据源整合</h2>
|
||
|
||
<div role="tablist" class="tabs tabs-lifted">
|
||
<a role="tab" class="tab" :class="{ 'tab-active': tab === 'news' }" @click.prevent="tab = 'news'">新闻数据</a>
|
||
<a role="tab" class="tab" :class="{ 'tab-active': tab === 'roadshow' }" @click.prevent="tab = 'roadshow'">路演纪要</a>
|
||
<a role="tab" class="tab" :class="{ 'tab-active': tab === 'research' }" @click.prevent="tab = 'research'">研报精粹</a>
|
||
<a role="tab" class="tab" :class="{ 'tab-active': tab === 'chart' }" @click.prevent="tab = 'chart'">建设计划</a>
|
||
</div>
|
||
|
||
<div class="pt-6">
|
||
<!-- News Tab -->
|
||
<div x-show="tab === 'news'" class="space-y-4">
|
||
<h4 class="text-lg font-semibold text-white">战略与发布</h4>
|
||
<ul class="list-disc list-inside text-sm space-y-1">
|
||
<li><strong>战略发布:</strong> 4月22日召开“2025华为智能电动&智能充电网络战略与新品发布会”。</li>
|
||
<li><strong>产业趋势判断:</strong> 发布“2025充电网络产业十大趋势”，预计2028年超充将成为全场景标配，覆盖超加油站。</li>
|
||
<li><strong>战略重点:</strong> 下一个重点是<strong class="text-cyan-400">重卡电动化</strong>，需要兆瓦级大功率充电。</li>
|
||
<li><strong>核心模式:</strong> 采用“光储充”智能化管理，利用微电网技术应对电网冲击。</li>
|
||
</ul>
|
||
<h4 class="text-lg font-semibold text-white">产品与技术</h4>
|
||
<ul class="list-disc list-inside text-sm space-y-1">
|
||
<li><strong>兆瓦级超充:</strong> 最大功率<strong class="text-amber-400">1.5MW</strong>，最大电流<strong class="text-amber-400">2400A</strong>，15分钟充满电动重卡。核心为<strong class="text-cyan-400">全液冷散热系统</strong>。</li>
|
||
<li><strong>充电机器人:</strong> 融合感知，实现全自动无人充电，将由鸿蒙智行尊界S800首发。</li>
|
||
</ul>
|
||
<h4 class="text-lg font-semibold text-white">网络部署规模</h4>
|
||
<ul class="list-disc list-inside text-sm space-y-1">
|
||
<li><strong>覆盖范围:</strong> 已在全国200+城市、21条主要高速干线部署。</li>
|
||
<li><strong>进度数据:</strong> 截至三季度，完成<strong class="text-amber-400">5万根</strong>超快充桩部署（占全国半数）。截至6月20日，鸿蒙智行网络接入1000座华为超充站。</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- Roadshow Tab -->
|
||
<div x-show="tab === 'roadshow'" class="space-y-4">
|
||
<h4 class="text-lg font-semibold text-white">网络建设目标</h4>
|
||
<p class="text-sm">计划在 <strong class="text-amber-400">2024年底建成10万+超充桩</strong>，覆盖340城及高速路。主要与<strong class="text-cyan-400">政府、国企</strong>合作。</p>
|
||
|
||
<h4 class="text-lg font-semibold text-white">核心技术</h4>
|
||
<ul class="list-disc list-inside text-sm space-y-1">
|
||
<li><strong>液冷超充:</strong> 两级架构+液冷技术，寿命长、效率高，已进入<strong class="text-cyan-400">放量</strong>阶段。</li>
|
||
<li><strong>800V高压平台:</strong> 采用碳化硅电驱，支持<strong class="text-amber-400">5分钟充电200+公里</strong>。</li>
|
||
<li><strong>车网互动 (V2G):</strong> 技术已有储备，充电桩已实现双向功能，为中长期布局。</li>
|
||
<li><strong>智能功率分配:</strong> 可将充电桩<strong class="text-amber-400">利用率提升30%</strong>。</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- Research Tab -->
|
||
<div x-show="tab === 'research'" class="space-y-4">
|
||
<h4 class="text-lg font-semibold text-white">充电网络十大趋势 (华为视角)</h4>
|
||
<ol class="list-decimal list-inside text-sm grid md:grid-cols-2 gap-x-8 gap-y-2">
|
||
<li>高质量发展</li>
|
||
<li><strong class="text-cyan-400">全面超充化</strong></li>
|
||
<li>极致体验</li>
|
||
<li>安全可信</li>
|
||
<li><strong class="text-cyan-400">车网互动 (V2G)</strong></li>
|
||
<li><strong class="text-cyan-400">功率池化</strong></li>
|
||
<li><strong class="text-cyan-400">全液冷架构</strong></li>
|
||
<li>慢充直流化</li>
|
||
<li>园区微电网</li>
|
||
<li><strong class="text-cyan-400">全面智能化</strong></li>
|
||
</ol>
|
||
<h4 class="text-lg font-semibold text-white mt-4">技术特点总结</h4>
|
||
<ul class="list-disc list-inside text-sm space-y-1">
|
||
<li><strong>全液冷超充解决方案:</strong> 实现“一秒一公里”，最大功率<strong class="text-amber-400">600KW</strong>，最大电流<strong class="text-amber-400">600A</strong>。</li>
|
||
<li><strong>潜在技术底座:</strong> 华为的自动驾驶网络(ADN)解决方案，可为充电网络提供“自配置、自修复、自优化”的智能运维能力。</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- Chart Tab -->
|
||
<div x-show="tab === 'chart'">
|
||
<div id="deploymentChart" style="width: 100%; height: 400px;"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Stock Table Section -->
|
||
<section id="stocks">
|
||
<div class="glass-card rounded-3xl p-6 md:p-8">
|
||
<h2 class="text-3xl font-bold mb-6 text-white neon-text">产业链核心公司梳理</h2>
|
||
|
||
<div class="overflow-x-auto">
|
||
<table class="table w-full">
|
||
<!-- head -->
|
||
<thead>
|
||
<tr>
|
||
<th>产业链环节</th>
|
||
<th>公司名称</th>
|
||
<th>股票代码</th>
|
||
<th>关联原因</th>
|
||
<th>其他标签</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<!-- 核心供应商 -->
|
||
<tr class="bg-cyan-900/20"><td colspan="5" class="font-bold text-white">核心供应商 & 生态伙伴 (Insight重点提及)</td></tr>
|
||
<tr>
|
||
<td>液冷充电枪/连接器</td>
|
||
<td>永贵电器</td>
|
||
<td><a href="https://valuefrontier.cn/company?scode=300351" target="_blank" class="link link-hover text-cyan-400">300351</a></td>
|
||
<td>大功率液冷充电枪供货华为 (多方信源验证)</td>
|
||
<td>充电设备</td>
|
||
</tr>
|
||
<tr>
|
||
<td>认证服务商</td>
|
||
<td>恒华科技</td>
|
||
<td><a href="https://valuefrontier.cn/company?scode=300365" target="_blank" class="link link-hover text-cyan-400">300365</a></td>
|
||
<td>华为CSP五钻(智能充电网络)认证服务商</td>
|
||
<td>充电服务</td>
|
||
</tr>
|
||
<tr>
|
||
<td>经销商</td>
|
||
<td>宝馨科技</td>
|
||
<td><a href="https://valuefrontier.cn/company?scode=002514" target="_blank" class="link link-hover text-cyan-400">002514</a></td>
|
||
<td>华为数字能源智能充电网络"钻石级经销商"</td>
|
||
<td>充电桩制造商</td>
|
||
</tr>
|
||
|
||
<!-- 充电设备 -->
|
||
<tr class="bg-gray-800/30"><td colspan="5" class="font-bold text-white">上游：充电桩设备</td></tr>
|
||
<tr>
|
||
<td>充电模块</td>
|
||
<td>盛弘股份</td>
|
||
<td><a href="https://valuefrontier.cn/company?scode=300693" target="_blank" class="link link-hover text-cyan-400">300693</a></td>
|
||
<td>充电模块</td>
|
||
<td>充电设备</td>
|
||
</tr>
|
||
<tr>
|
||
<td>充电模块</td>
|
||
<td>通合科技</td>
|
||
<td><a href="https://valuefrontier.cn/company?scode=300491" target="_blank" class="link link-hover text-cyan-400">300491</a></td>
|
||
<td>充电模块</td>
|
||
<td>充电设备</td>
|
||
</tr>
|
||
<tr>
|
||
<td>功率器件</td>
|
||
<td>南芯科技</td>
|
||
<td><a href="https://valuefrontier.cn/company?scode=688484" target="_blank" class="link link-hover text-cyan-400">688484</a></td>
|
||
<td>功率器件</td>
|
||
<td>充电设备</td>
|
||
</tr>
|
||
<tr>
|
||
<td>连接器</td>
|
||
<td>中航光电</td>
|
||
<td><a href="https://valuefrontier.cn/company?scode=002179" target="_blank" class="link link-hover text-cyan-400">002179</a></td>
|
||
<td>接触器、继电器、连接器</td>
|
||
<td>充电设备</td>
|
||
</tr>
|
||
|
||
<!-- 配电设备 -->
|
||
<tr class="bg-gray-800/30"><td colspan="5" class="font-bold text-white">中游：配电设备 & 制造商</td></tr>
|
||
<tr>
|
||
<td>直流充电桩</td>
|
||
<td>特锐德</td>
|
||
<td><a href="https://valuefrontier.cn/company?scode=300001" target="_blank" class="link link-hover text-cyan-400">300001</a></td>
|
||
<td>充电桩龙头，与华为有光储充放合作</td>
|
||
<td>充电桩制造商, 运营商</td>
|
||
</tr>
|
||
<tr>
|
||
<td>配电滤波</td>
|
||
<td>东方电子</td>
|
||
<td><a href="https://valuefrontier.cn/company?scode=000682" target="_blank" class="link link-hover text-cyan-400">000682</a></td>
|
||
<td>配电滤波、监控计费</td>
|
||
<td>配电设备, 管理设备</td>
|
||
</tr>
|
||
<tr>
|
||
<td>充电模块</td>
|
||
<td>国电南瑞</td>
|
||
<td><a href="https://valuefrontier.cn/company?scode=600406" target="_blank" class="link link-hover text-cyan-400">600406</a></td>
|
||
<td>充电模块、配电滤波、EPC</td>
|
||
<td>充电/配电设备</td>
|
||
</tr>
|
||
<tr>
|
||
<td>充电模块</td>
|
||
<td>许继电气</td>
|
||
<td><a href="https://valuefrontier.cn/company?scode=000400" target="_blank" class="link link-hover text-cyan-400">000400</a></td>
|
||
<td>充电模块、保护设备、EPC</td>
|
||
<td>充电/配电设备</td>
|
||
</tr>
|
||
|
||
<!-- 运营商 -->
|
||
<tr class="bg-gray-800/30"><td colspan="5" class="font-bold text-white">下游：运营商 & 服务商</td></tr>
|
||
<tr>
|
||
<td>运营商</td>
|
||
<td>特锐德</td>
|
||
<td><a href="https://valuefrontier.cn/company?scode=300001" target="_blank" class="link link-hover text-cyan-400">300001</a></td>
|
||
<td>运营商主导 (特来电)</td>
|
||
<td>充电桩运营商</td>
|
||
</tr>
|
||
<tr>
|
||
<td>运营商</td>
|
||
<td>星星充电</td>
|
||
<td>-</td>
|
||
<td>运营商主导 (未上市)</td>
|
||
<td>充电桩运营商</td>
|
||
</tr>
|
||
<tr>
|
||
<td>运营商</td>
|
||
<td>国家电网</td>
|
||
<td>-</td>
|
||
<td>运营商主导</td>
|
||
<td>充电桩运营商</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<footer class="text-center mt-12 text-xs text-gray-600">
|
||
<p>北京价值前沿科技有限公司 AI投研agent：“价小前投研” 进行投研呈现</p>
|
||
<p>本报告完全由AI基于公开数据合成，不构成任何投资建议，投资需谨慎。</p>
|
||
</footer>
|
||
|
||
</div>
|
||
|
||
<script>
|
||
document.addEventListener('alpine:init', () => {
|
||
Alpine.data('tabs', () => ({
|
||
tab: 'news',
|
||
}));
|
||
});
|
||
|
||
var chartDom = document.getElementById('deploymentChart');
|
||
var myChart = echarts.init(chartDom, 'dark');
|
||
var option;
|
||
|
||
option = {
|
||
backgroundColor: 'transparent',
|
||
title: {
|
||
text: '华为超充桩建设计划 (2024)',
|
||
subtext: '数据来源: 路演及新闻纪要',
|
||
left: 'center',
|
||
textStyle: {
|
||
color: '#e0e6f1'
|
||
}
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'shadow'
|
||
}
|
||
},
|
||
legend: {
|
||
data: ['阶段目标', '年底总目标'],
|
||
top: '10%',
|
||
textStyle: {
|
||
color: '#e0e6f1'
|
||
}
|
||
},
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '3%',
|
||
containLabel: true
|
||
},
|
||
xAxis: {
|
||
type: 'value',
|
||
boundaryGap: [0, 0.01],
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#4f5a7a'
|
||
}
|
||
},
|
||
},
|
||
yAxis: {
|
||
type: 'category',
|
||
data: ['目标进度'],
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#4f5a7a'
|
||
}
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
name: '阶段目标',
|
||
type: 'bar',
|
||
stack: 'total',
|
||
label: {
|
||
show: true,
|
||
formatter: '{c} 根 (Q3)'
|
||
},
|
||
emphasis: {
|
||
focus: 'series'
|
||
},
|
||
data: [50000],
|
||
itemStyle: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||
{ offset: 0, color: '#00c6ff' },
|
||
{ offset: 1, color: '#0072ff' }
|
||
])
|
||
}
|
||
},
|
||
{
|
||
name: '年底总目标',
|
||
type: 'bar',
|
||
stack: 'total',
|
||
label: {
|
||
show: true,
|
||
formatter: '+{c} 根 (Q4)'
|
||
},
|
||
emphasis: {
|
||
focus: 'series'
|
||
},
|
||
data: [50000], // 100000 (total) - 50000 (Q3)
|
||
itemStyle: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||
{ offset: 0, color: '#a8ff78' },
|
||
{ offset: 1, color: '#78ffd6' }
|
||
])
|
||
}
|
||
}
|
||
]
|
||
};
|
||
|
||
option && myChart.setOption(option);
|
||
|
||
window.addEventListener('resize', function() {
|
||
myChart.resize();
|
||
});
|
||
</script>
|
||
|
||
</body>
|
||
</html> |