409 lines
26 KiB
HTML
409 lines
26 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>
|
||
<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>
|
||
<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=Lexend:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||
<style>
|
||
body {
|
||
font-family: 'Lexend', sans-serif;
|
||
background-color: #0c0a09;
|
||
background-image:
|
||
radial-gradient(ellipse 25% 40% at 20% 20%, rgba(0, 153, 255, 0.15), transparent),
|
||
radial-gradient(ellipse 25% 40% at 80% 90%, rgba(255, 0, 153, 0.15), transparent);
|
||
background-attachment: fixed;
|
||
color: #e2e8f0;
|
||
}
|
||
.glass-card {
|
||
background: rgba(17, 24, 39, 0.6); /* bg-gray-900 with opacity */
|
||
backdrop-filter: blur(20px);
|
||
-webkit-backdrop-filter: blur(20px);
|
||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
border-radius: 1.5rem; /* 24px */
|
||
transition: all 0.3s ease;
|
||
}
|
||
.glass-card:hover {
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 0 30px rgba(0, 153, 255, 0.2), 0 0 40px rgba(255, 0, 153, 0.2);
|
||
border-color: rgba(255, 255, 255, 0.2);
|
||
}
|
||
.bento-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(12, 1fr);
|
||
gap: 1.5rem;
|
||
}
|
||
.bento-item {
|
||
grid-column: span 12;
|
||
}
|
||
@media (min-width: 1024px) {
|
||
.bento-item-span-4 { grid-column: span 4; }
|
||
.bento-item-span-6 { grid-column: span 6; }
|
||
.bento-item-span-8 { grid-column: span 8; }
|
||
.bento-item-span-12 { grid-column: span 12; }
|
||
}
|
||
.section-title {
|
||
font-size: 1.875rem; /* 30px */
|
||
font-weight: 600;
|
||
padding-bottom: 0.5rem;
|
||
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
|
||
margin-bottom: 1.5rem;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.section-title::before {
|
||
content: '';
|
||
display: inline-block;
|
||
width: 6px;
|
||
height: 30px;
|
||
background: linear-gradient(180deg, #0099ff, #ff0099);
|
||
border-radius: 3px;
|
||
margin-right: 0.75rem;
|
||
}
|
||
.stat-value {
|
||
color: #00e1ff;
|
||
}
|
||
.highlight-text {
|
||
color: #82f5ff;
|
||
font-weight: 600;
|
||
}
|
||
table.table.glass-table {
|
||
background: rgba(17, 24, 39, 0.6);
|
||
backdrop-filter: blur(20px);
|
||
-webkit-backdrop-filter: blur(20px);
|
||
border-radius: 1rem;
|
||
}
|
||
table.table.glass-table thead tr {
|
||
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
|
||
}
|
||
table.table.glass-table th {
|
||
background-color: transparent;
|
||
color: #9ca3af; /* text-gray-400 */
|
||
}
|
||
table.table.glass-table td {
|
||
background-color: transparent;
|
||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="min-h-screen p-4 sm:p-6 lg:p-8">
|
||
<div class="max-w-7xl mx-auto">
|
||
<!-- Header -->
|
||
<header class="text-center py-8">
|
||
<h1 class="text-4xl md:text-6xl font-bold tracking-tighter bg-clip-text text-transparent bg-gradient-to-br from-slate-200 to-slate-500 mb-2">
|
||
以伊冲突 - 天然气
|
||
</h1>
|
||
<p class="text-lg text-slate-400">地缘冲突下的全球能源供给深度解析</p>
|
||
</header>
|
||
|
||
<!-- Main Content -->
|
||
<main class="space-y-10">
|
||
<!-- Bento Grid -->
|
||
<div class="bento-grid">
|
||
<!-- Core Viewpoint -->
|
||
<div class="bento-item bento-item-span-12 lg:bento-item-span-8 glass-card p-6">
|
||
<h2 class="text-2xl font-semibold mb-4 text-slate-100">核心观点摘要</h2>
|
||
<p class="text-slate-300 leading-relaxed">
|
||
“以伊冲突-天然气”概念正处于由 <span class="highlight-text">地缘政治风险溢价驱动</span> 向 <span class="highlight-text">局部实质性供给中断验证</span> 的过渡阶段。其核心驱动力是市场对关键生产设施（伊朗南帕斯气田）和运输要道（霍尔木兹海峡）可能被 Disrupt 的强烈恐惧。当前市场情绪高度紧张，但存在显著的预期差——市场过度聚焦于低概率、高影响的“霍尔木兹封锁”黑天鹅事件，而可能低估了已经发生且影响深远的 <span class="highlight-text">区域供给再平衡</span>（如以色列停供埃及）和对 <span class="highlight-text">特定化工品供应链</span>（LPG、甲醇）的精准打击。
|
||
</p>
|
||
</div>
|
||
|
||
<!-- Key Stats -->
|
||
<div class="bento-item bento-item-span-12 lg:bento-item-span-4 grid grid-cols-2 grid-rows-2 gap-6">
|
||
<div class="glass-card p-4 flex flex-col justify-center items-center">
|
||
<div class="stat-title text-slate-400">霍尔木兹海峡</div>
|
||
<div class="stat-value text-3xl font-bold">20%</div>
|
||
<div class="stat-desc text-slate-500">全球LNG贸易量</div>
|
||
</div>
|
||
<div class="glass-card p-4 flex flex-col justify-center items-center">
|
||
<div class="stat-title text-slate-400">伊朗发电</div>
|
||
<div class="stat-value text-3xl font-bold">85%</div>
|
||
<div class="stat-desc text-slate-500">依赖天然气</div>
|
||
</div>
|
||
<div class="glass-card p-4 flex flex-col justify-center items-center">
|
||
<div class="stat-title text-slate-400">中国LPG进口</div>
|
||
<div class="stat-value text-3xl font-bold">27%</div>
|
||
<div class="stat-desc text-slate-500">源自伊朗</div>
|
||
</div>
|
||
<div class="glass-card p-4 flex flex-col justify-center items-center">
|
||
<div class="stat-title text-slate-400">以色列</div>
|
||
<div class="stat-value text-3xl font-bold text-red-400">已中断</div>
|
||
<div class="stat-desc text-slate-500">对埃及供气</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Event Timeline -->
|
||
<div class="bento-item bento-item-span-12 glass-card p-6">
|
||
<h2 class="text-2xl font-semibold mb-4 text-slate-100">核心事件演化路径</h2>
|
||
<div id="timeline-chart" class="h-96 w-full"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Deep Dive Analysis -->
|
||
<div class="glass-card p-6 lg:p-8">
|
||
<h2 class="section-title">概念逻辑与市场认知深度解析</h2>
|
||
<div class="space-y-6 text-slate-300">
|
||
<div>
|
||
<h3 class="text-xl font-semibold mb-2 text-slate-200">核心驱动力：供给侧冲击三级传导</h3>
|
||
<ul class="list-disc list-inside space-y-2 pl-2">
|
||
<li><strong class="highlight-text">直接生产中断:</strong> 冲突直接打击或出于防御目的关停关键气田。如以色列关停 <span class="font-bold">利维坦气田</span>（已发生），以及袭击伊朗 <span class="font-bold">南帕斯气田</span> 的潜在威胁（高风险）。</li>
|
||
<li><strong class="highlight-text">运输通道威胁:</strong> 伊朗威胁封锁 <span class="font-bold">霍尔木兹海峡</span>，该海峡是全球 20% LNG 海运贸易的咽喉，任何干扰都将引发全球性天然气贸易重构和价格飙升。</li>
|
||
<li><strong class="highlight-text">能源安全战略重估:</strong> 冲突暴露海上能源通道的脆弱性，倒逼中国等主要消费国加速寻求更安全的陆上能源通道（如俄罗斯<span class="font-bold">“西伯利亚力量2号”</span>管道），引发长期能源格局变迁。</li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<h3 class="text-xl font-semibold mb-2 text-slate-200">预期差分析：市场在交易什么？</h3>
|
||
<ul class="list-disc list-inside space-y-2 pl-2">
|
||
<li><strong class="text-sky-300">高估“黑天鹅”，低估“灰犀牛”:</strong> 市场焦点被“霍尔木兹封锁”吸引，但多位专家认为其概率低。而对已发生的“以色列断供埃及”及对中国化工品供应链的精准打击，其深度和持久性评估不足。</li>
|
||
<li><strong class="text-sky-300">混淆“油”与“气”的区域差异:</strong> 冲突期间美国NYMEX天然气期货 <span class="text-red-400">下跌6.47%</span>，而东北亚LNG到岸价 <span class="text-green-400">上涨1.67%</span>。这揭示了天然气市场影响的结构性和区域性，而非全球普涨。</li>
|
||
<li><strong class="text-sky-300">对中国能源战略的长期影响认知不足:</strong> 市场短期关注价格，但“中国重新考虑西伯利亚力量2号”是更深远的战略转向信号，其长期影响远超短期波动，尚未被市场充分定价。</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Catalysts & Risks -->
|
||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||
<div class="glass-card p-6">
|
||
<h2 class="section-title">关键催化剂与未来发展</h2>
|
||
<div class="space-y-4 text-slate-300">
|
||
<div>
|
||
<h4 class="font-semibold text-slate-200">近期催化剂 (3-6个月):</h4>
|
||
<ul class="list-decimal list-inside text-sm mt-2 space-y-1">
|
||
<li>霍尔木兹海峡的实际动态，伊朗是否兑现管制威胁。</li>
|
||
<li>埃及因断供进入国际现货市场采购LNG的规模与价格。</li>
|
||
<li>南帕斯气田受损程度的官方评估报告。</li>
|
||
<li>美欧对伊朗的制裁态度变化。</li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<h4 class="font-semibold text-slate-200">长期发展路径:</h4>
|
||
<ul class="list-decimal list-inside text-sm mt-2 space-y-1">
|
||
<li><span class="font-bold">短期:</span> 事件驱动，高波动性博弈。</li>
|
||
<li><span class="font-bold">中期:</span> 全球LNG贸易流向重塑，安全溢价提升。</li>
|
||
<li><span class="font-bold">长期:</span> 能源消费国推进进口多元化，陆上管道气战略地位空前提升。</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="glass-card p-6">
|
||
<h2 class="section-title">潜在风险与挑战</h2>
|
||
<div class="space-y-4 text-slate-300">
|
||
<ul class="list-disc list-inside space-y-2">
|
||
<li><strong class="text-red-400">地缘政治风险（双向）:</strong> 最大的催化剂也是最大的风险。冲突的迅速降温将导致风险溢价快速回落，瓦解概念逻辑。</li>
|
||
<li><strong class="text-red-400">商业化风险:</strong> 下游化工品价格暴涨可能导致需求萎缩，反噬价格。</li>
|
||
<li><strong class="text-red-400">政策与竞争风险:</strong> OPEC+或其他产气国可能宣布增产以平抑市场波动，对冲供给中断影响。</li>
|
||
<li><strong class="text-red-400">信息交叉验证风险:</strong> 市场对霍尔木兹封锁概率（高达54%）与专家观点（低概率）存在巨大分歧，表明市场定价包含大量主观情绪。</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Value Chain & Core Players -->
|
||
<div class="glass-card p-6 lg:p-8">
|
||
<h2 class="section-title">产业链与核心玩家深度剖析</h2>
|
||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||
<div>
|
||
<h3 class="text-xl font-semibold mb-4 text-slate-200">产业链图谱</h3>
|
||
<ul class="space-y-3">
|
||
<li class="flex items-start">
|
||
<span class="font-bold text-sky-400 w-24">上游 (生产):</span>
|
||
<span class="text-slate-300">拥有天然气资源和产量的公司。核心玩家: 中国石油, 中国石化, 中国海油, 新天然气。</span>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<span class="font-bold text-sky-400 w-24">中游 (运输):</span>
|
||
<span class="text-slate-300">从事LNG/LPG液化、接收站运营、贸易和管道运输。核心玩家: 新奥股份, 九丰能源, 东华能源(LPG), 久立特材(管道)。</span>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<span class="font-bold text-sky-400 w-24">下游 (燃气):</span>
|
||
<span class="text-slate-300">终端天然气销售的公用事业公司。逻辑误区：气价上涨是成本增加，顺价不畅则侵蚀利润。</span>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<span class="font-bold text-sky-400 w-24">设备与服务:</span>
|
||
<span class="text-slate-300">为油气开采提供技术服务。核心玩家: 中曼石油, 贝肯能源。</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<h3 class="text-xl font-semibold mb-4 text-slate-200">最具投资价值的细分环节</h3>
|
||
<div class="space-y-3 text-slate-300">
|
||
<p><strong class="highlight-text">1. LPG与甲醇产业链:</strong> 逻辑链条最完整，数据支撑最扎实。中国对伊朗LPG (27%进口) 和甲醇 (59%进口) 依赖度高。直接受益于供应缺口和价格上涨预期。</p>
|
||
<p><strong class="highlight-text">2. 国内上游勘探开发:</strong> 能源安全是长期主线。冲突加剧进口依赖担忧，国内拥有储备和开采能力的公司战略价值凸显。</p>
|
||
<p><strong class="highlight-text">3. 油气设备与服务:</strong> 地缘政治紧张局势刺激全球能源勘探开发投资，油服公司订单和景气度有望提升。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Market Validation -->
|
||
<div class="glass-card p-6 lg:p-8">
|
||
<h2 class="section-title">市场验证：涨停逻辑复盘</h2>
|
||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||
<div class="bg-gray-800/50 p-4 rounded-xl border border-white/10">
|
||
<h4 class="font-bold text-lg text-green-400">金牛化工 (600722) - <span class="text-sm">10.07%涨停</span></h4>
|
||
<p class="text-sm text-slate-300 mt-2"><strong>逻辑验证:</strong> 与研报中“伊朗甲醇装置停车、影响中国进口”的逻辑完全吻合。公司拥有20万吨甲醇产能，直接受益于甲醇价格上涨预期。</p>
|
||
</div>
|
||
<div class="bg-gray-800/50 p-4 rounded-xl border border-white/10">
|
||
<h4 class="font-bold text-lg text-green-400">山东墨龙 (002490) - <span class="text-sm">10.11%涨停</span></h4>
|
||
<p class="text-sm text-slate-300 mt-2"><strong>逻辑验证:</strong> 主营天然气开采设备，产品出口中东。中东冲突升级带来油气设施重建需求，公司与伊朗有长期业务往来。</p>
|
||
</div>
|
||
<div class="bg-gray-800/50 p-4 rounded-xl border border-white/10">
|
||
<h4 class="font-bold text-lg text-green-400">中曼石油 (603619) / 贝肯能源 (002828)</h4>
|
||
<p class="text-sm text-slate-300 mt-2"><strong>逻辑验证:</strong> 验证了“地缘冲突利好油服”逻辑。中东局势紧张推高油价上涨预期，刺激油气勘探开发资本开支，利好油服公司。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- Stock List -->
|
||
<div class="glass-card p-6 lg:p-8">
|
||
<h2 class="section-title">核心标的池</h2>
|
||
<div class="overflow-x-auto">
|
||
<table class="table glass-table w-full">
|
||
<thead>
|
||
<tr>
|
||
<th>股票名称</th>
|
||
<th>股票代码</th>
|
||
<th>核心逻辑</th>
|
||
<th>标签</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<!-- 上游气田 -->
|
||
<tr><td colspan="4" class="font-bold text-slate-300 bg-white/5">上游 - 气田资源</td></tr>
|
||
<tr><td>中国石油</td><td><a href="https://valuefrontier.cn/company?scode=601857" target="_blank" class="link link-hover text-sky-400">601857</a></td><td>国内天然气产量龙头，能源安全压舱石</td><td>气田</td></tr>
|
||
<tr><td>中国石化</td><td><a href="https://valuefrontier.cn/company?scode=600028" target="_blank" class="link link-hover text-sky-400">600028</a></td><td>国内天然气产量巨大，一体化优势</td><td>气田</td></tr>
|
||
<tr><td>中国海油</td><td><a href="https://valuefrontier.cn/company?scode=600938" target="_blank" class="link link-hover text-sky-400">600938</a></td><td>海上天然气开采主力，LNG接收站龙头</td><td>气田, LNG</td></tr>
|
||
<tr><td>新天然气</td><td><a href="https://valuefrontier.cn/company?scode=603393" target="_blank" class="link link-hover text-sky-400">603393</a></td><td>在新疆拥有巨大探明储量和预期资源量，国内潜力股</td><td>气田</td></tr>
|
||
<tr><td>首华燃气</td><td><a href="https://valuefrontier.cn/company?scode=300483" target="_blank" class="link link-hover text-sky-400">300483</a></td><td>拥有致密气与煤层气地质储量</td><td>气田</td></tr>
|
||
<!-- 中游LNG -->
|
||
<tr><td colspan="4" class="font-bold text-slate-300 bg-white/5">中游 - 液化天然气(LNG) & LPG</td></tr>
|
||
<tr><td>九丰能源</td><td><a href="https://valuefrontier.cn/company?scode=605090" target="_blank" class="link link-hover text-sky-400">605090</a></td><td>LNG营收占比44%，与国际LNG现货价格和贸易环境直接挂钩</td><td>液化天然气(LNG)</td></tr>
|
||
<tr><td>胜通能源</td><td><a href="https://valuefrontier.cn/company?scode=001331" target="_blank" class="link link-hover text-sky-400">001331</a></td><td>LNG营收占比高达98%，逻辑最纯粹的价格与贸易驱动型标的</td><td>液化天然气(LNG)</td></tr>
|
||
<tr><td>东华能源</td><td><a href="https://valuefrontier.cn/company?scode=002221" target="_blank" class="link link-hover text-sky-400">002221</a></td><td>液化石油气(LPG)营收占比42%，中国27%的LPG进口来自伊朗，逻辑链条最清晰</td><td>液化天然气(LNG)</td></tr>
|
||
<tr><td>新奥股份</td><td><a href="https://valuefrontier.cn/company?scode=600803" target="_blank" class="link link-hover text-sky-400">600803</a></td><td>天然气营收占比76%，综合性天然气龙头</td><td>液化天然气(LNG)</td></tr>
|
||
<!-- 管道 -->
|
||
<tr><td colspan="4" class="font-bold text-slate-300 bg-white/5">中游 - 燃气管道</td></tr>
|
||
<tr><td>久立特材</td><td><a href="https://valuefrontier.cn/company?scode=002318" target="_blank" class="link link-hover text-sky-400">002318</a></td><td>石化、天然气营收占比63%，高端管道材料龙头</td><td>燃气管道</td></tr>
|
||
<tr><td>常宝股份</td><td><a href="https://valuefrontier.cn/company?scode=002478" target="_blank" class="link link-hover text-sky-400">002478</a></td><td>油套管营收占比39%，受益于上游勘探开发景气度</td><td>燃气管道</td></tr>
|
||
<!-- 城市燃气 (作为逻辑对比) -->
|
||
<tr><td colspan="4" class="font-bold text-slate-300 bg-white/5">下游 - 城市燃气 (逻辑风险提示)</td></tr>
|
||
<tr><td>深圳燃气</td><td><a href="https://valuefrontier.cn/company?scode=601139" target="_blank" class="link link-hover text-sky-400">601139</a></td><td>区域性城燃公司，上游气价上涨为成本端压力</td><td>城市燃气</td></tr>
|
||
<tr><td>贵州燃气</td><td><a href="https://valuefrontier.cn/company?scode=600903" target="_blank" class="link link-hover text-sky-400">600903</a></td><td>区域性城燃公司，上游气价上涨为成本端压力</td><td>城市燃气</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
|
||
<!-- Footer -->
|
||
<footer class="text-center py-8 mt-10">
|
||
<p class="text-xs text-slate-500">
|
||
北京价值前沿科技有限公司 AI投研agent：“价小前投研” 进行投研呈现。
|
||
</p>
|
||
<p class="text-xs text-slate-600 mt-1">
|
||
本报告为AI合成数据，不构成任何投资建议，投资需谨慎。
|
||
</p>
|
||
</footer>
|
||
</div>
|
||
|
||
<script>
|
||
document.addEventListener('DOMContentLoaded', function () {
|
||
var chartDom = document.getElementById('timeline-chart');
|
||
var myChart = echarts.init(chartDom, 'dark');
|
||
var option;
|
||
|
||
const data = [
|
||
{ value: ['2025-06-13', 0], itemStyle: { color: '#5470c6' }, name: '市场关注冲突对油服投资影响' },
|
||
{ value: ['2025-06-15', 1], itemStyle: { color: '#91cc75' }, name: '天风能源首发报告，分析袭击南帕斯气田影响，精确打击化工品逻辑' },
|
||
{ value: ['2025-06-16', 2], itemStyle: { color: '#fac858' }, name: '金牛化工、山东墨龙涨停，市场交易下游化工品及设备逻辑' },
|
||
{ value: ['2025-06-17', 3], itemStyle: { color: '#ee6666' }, name: '关键转折：以色列关闭利维坦气田，对埃及供应中断，地缘风险转为供给事实' },
|
||
{ value: ['2025-06-23', 4], itemStyle: { color: '#fc8452' }, name: '市场焦点高度集中于霍尔木兹海峡，封锁概率评估从18%飙升至54%' },
|
||
{ value: ['2025-06-25', 5], itemStyle: { color: '#9a60b4' }, name: '长期战略影响显现，中国重新考虑“西伯利亚力量2号”管道项目' }
|
||
];
|
||
|
||
const eventNames = data.map(item => item.name);
|
||
|
||
option = {
|
||
backgroundColor: 'transparent',
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
formatter: function (params) {
|
||
return `${params[0].value[0]}:<br/>${eventNames[params[0].dataIndex]}`;
|
||
}
|
||
},
|
||
grid: {
|
||
left: '5%',
|
||
right: '5%',
|
||
bottom: '15%',
|
||
top: '5%',
|
||
containLabel: true
|
||
},
|
||
xAxis: {
|
||
type: 'time',
|
||
axisLine: { lineStyle: { color: 'rgba(255, 255, 255, 0.3)' } },
|
||
axisLabel: { color: '#9ca3af' }
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
max: 6,
|
||
axisLabel: { show: false },
|
||
splitLine: { show: false }
|
||
},
|
||
dataZoom: [{
|
||
type: 'inside',
|
||
start: 0,
|
||
end: 100
|
||
}, {
|
||
start: 0,
|
||
end: 100,
|
||
handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
|
||
handleSize: '80%',
|
||
handleStyle: {
|
||
color: '#fff',
|
||
shadowBlur: 3,
|
||
shadowColor: 'rgba(0, 0, 0, 0.6)',
|
||
shadowOffsetX: 2,
|
||
shadowOffsetY: 2
|
||
},
|
||
textStyle: { color: '#9ca3af' },
|
||
bottom: '5%'
|
||
}],
|
||
series: [{
|
||
type: 'line',
|
||
symbol: 'circle',
|
||
symbolSize: 15,
|
||
data: data.map(item => ({
|
||
value: item.value,
|
||
itemStyle: item.itemStyle
|
||
})),
|
||
label: {
|
||
show: true,
|
||
position: 'top',
|
||
formatter: function (params) {
|
||
return eventNames[params.dataIndex].split('，')[0];
|
||
},
|
||
color: '#e2e8f0',
|
||
fontSize: 10
|
||
},
|
||
lineStyle: {
|
||
color: 'rgba(255, 255, 255, 0.2)',
|
||
width: 2,
|
||
type: 'dashed'
|
||
}
|
||
}]
|
||
};
|
||
|
||
option && myChart.setOption(option);
|
||
window.addEventListener('resize', myChart.resize);
|
||
});
|
||
</script>
|
||
|
||
</body>
|
||
</html> |