update pay ui
This commit is contained in:
422
public/htmls/以伊冲突-航运.html
Normal file
422
public/htmls/以伊冲突-航运.html
Normal file
@@ -0,0 +1,422 @@
|
||||
<!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.11.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=Noto+Sans+SC:wght@300;400;500;700&display=swap');
|
||||
|
||||
body {
|
||||
font-family: 'Noto Sans SC', sans-serif;
|
||||
background-color: #02040a;
|
||||
background-image:
|
||||
radial-gradient(circle at 15% 50%, rgba(10, 89, 150, 0.2), transparent 40%),
|
||||
radial-gradient(circle at 85% 30%, rgba(100, 21, 153, 0.2), transparent 40%),
|
||||
radial-gradient(circle at 50% 90%, rgba(30, 90, 120, 0.15), transparent 50%);
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.glass-card {
|
||||
background: rgba(15, 23, 42, 0.6);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 2rem;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.glass-card:hover {
|
||||
transform: translateY(-5px) scale(1.01);
|
||||
box-shadow: 0 0 30px rgba(0, 191, 255, 0.3), 0 0 15px rgba(138, 43, 226, 0.2);
|
||||
border-color: rgba(0, 191, 255, 0.4);
|
||||
}
|
||||
|
||||
.bento-grid {
|
||||
display: grid;
|
||||
gap: 1.5rem;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
grid-auto-rows: minmax(100px, auto);
|
||||
}
|
||||
|
||||
.grid-item-main { grid-column: 1 / -1; md:grid-column: 1 / 8; }
|
||||
.grid-item-timeline { grid-column: 1 / -1; md:grid-column: 8 / -1; }
|
||||
.grid-item-summary { grid-column: 1 / -1; md:grid-column: 1 / 5; }
|
||||
.grid-item-risks { grid-column: 1 / -1; md:grid-column: 5 / 9; }
|
||||
.grid-item-chain { grid-column: 1 / -1; md:grid-column: 9 / -1; }
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.grid-item-main { grid-column: 1 / span 7; grid-row: 1 / span 2; }
|
||||
.grid-item-timeline { grid-column: 8 / span 5; grid-row: 1 / span 1; }
|
||||
.grid-item-summary { grid-column: 8 / span 5; grid-row: 2 / span 1; }
|
||||
.grid-item-risks { grid-column: 1 / span 6; }
|
||||
.grid-item-chain { grid-column: 7 / span 6; }
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 500;
|
||||
color: #c9d1d9;
|
||||
padding-bottom: 0.75rem;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
|
||||
margin-bottom: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.section-title::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 4px;
|
||||
height: 24px;
|
||||
background-color: #22d3ee;
|
||||
margin-right: 0.75rem;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 0 8px rgba(34, 211, 238, 0.7);
|
||||
}
|
||||
|
||||
.highlight {
|
||||
color: #67e8f9;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.table thead th {
|
||||
background-color: rgba(30, 41, 59, 0.8);
|
||||
color: #9ca3af;
|
||||
font-weight: 500;
|
||||
border-bottom: 2px solid rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.table tbody tr {
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.table tbody tr:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 1.5rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.prose-custom {
|
||||
color: #9ca3af;
|
||||
}
|
||||
.prose-custom h3 {
|
||||
color: #e5e7eb;
|
||||
font-weight: 500;
|
||||
}
|
||||
.prose-custom ul > li::before {
|
||||
background-color: #22d3ee;
|
||||
}
|
||||
|
||||
.disclaimer {
|
||||
text-align: center;
|
||||
font-size: 0.8rem;
|
||||
color: #6b7280;
|
||||
padding: 1rem;
|
||||
border: 1px dashed rgba(107, 114, 128, 0.5);
|
||||
background: rgba(107, 114, 128, 0.1);
|
||||
border-radius: 1rem;
|
||||
margin: 0 auto 2rem auto;
|
||||
max-width: 800px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="min-h-screen p-4 sm:p-6 md:p-8">
|
||||
<div class="max-w-screen-2xl mx-auto">
|
||||
|
||||
<header class="text-center mb-12">
|
||||
<h1 class="text-4xl md:text-5xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-purple-500 mb-2">
|
||||
以伊冲突-航运
|
||||
</h1>
|
||||
<p class="text-lg text-slate-400">深度行研报告</p>
|
||||
<div class="mt-8">
|
||||
<p class="disclaimer">
|
||||
北京价值前沿科技有限公司 AI投研agent：“价小前投研” 进行投研呈现，本报告为AI合成数据，投资需谨慎。
|
||||
</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="bento-grid">
|
||||
<!-- Main Insight Card -->
|
||||
<div class="glass-card p-6 md:p-8 grid-item-main">
|
||||
<h2 class="section-title">概念核心Insight</h2>
|
||||
<div class="prose prose-custom max-w-none space-y-4">
|
||||
<h3>0. 概念事件</h3>
|
||||
<p>该概念的核心是围绕以色列与伊朗之间地缘政治冲突的急剧升级及其对全球海运，特别是关键能源通道——<span class="highlight">霍尔木兹海峡</span>构成的潜在威胁。冲突的演变直接影响航运安全、运输成本和全球供应链的稳定性。</p>
|
||||
|
||||
<h3>1. 核心观点摘要</h3>
|
||||
<p>“以伊冲突-航运”是一个典型的、由地缘政治突发事件驱动的<span class="highlight">交易型主题</span>。其核心逻辑在于霍尔木兹海峡潜在的供应中断风险，这直接转化为航运市场，尤其是油运板块的<span class="highlight">风险溢价和运价弹性</span>。目前，该概念已走过情绪最激烈的阶段，正进入高位博弈期，市场焦点将从“是否封锁”转向“冲突的烈度与持续性”。</p>
|
||||
|
||||
<h3>2. 核心逻辑与市场认知分析</h3>
|
||||
<p>根本驱动力是<span class="highlight">地缘政治风险导致的物理性供应链中断威胁</span>。逻辑链条为：冲突升级 → 威胁霍尔木兹海峡（全球约<span class="highlight">34%</span>石油出口）→ 运力供给收缩（直接封锁或间接绕行、保费飙升）→ <span class="highlight">运价飙升</span>。路演数据显示，VLCC中东-中国航线TCE一周内从<span class="highlight">2.2万美元/天</span>涨至<span class="highlight">5.8万美元/天</span>（涨幅154%），充分验证此逻辑。</p>
|
||||
|
||||
<h3>3. 预期差分析</h3>
|
||||
<ul>
|
||||
<li><strong>封锁意图 vs 恐慌定价：</strong>市场短期对“封锁”进行充分定价，但分析认为全面封锁概率低，更可能的是“间歇式封闭”或“与胡塞协同袭扰”形成“双海峡危机”，这对运价中枢有长期抬升作用。</li>
|
||||
<li><strong>被忽视的受益方：</strong>市场忽视了陆路运输价值（如天顺股份涨停），以及冲突倒逼的全球能源贸易格局长期重构（如中国增加俄罗斯能源采购）。</li>
|
||||
<li><strong>影响广度的预期差：</strong>影响已从油运蔓延至集运（发往中东集装箱运费<span class="highlight">上涨50%</span>），并可能波及LNG、LPG等。</li>
|
||||
</ul>
|
||||
|
||||
<h3>4. 关键催化剂与未来发展路径</h3>
|
||||
<p><strong>近期催化剂：</strong>停火协议执行情况、伊朗对海峡的具体行动、美国军事动向、航运保险费率变动。
|
||||
<br><strong>长期路径：</strong>
|
||||
<br>1) <strong>航运业：</strong>高运价刺激船东加速<span class="highlight">老旧油轮更替</span>（至2029年船龄超21年占比达34%），利好造船周期。
|
||||
<br>2) <strong>供应链：</strong>能源进口路线<span class="highlight">多元化</span>成为各国战略重点，永久改变全球贸易流向。
|
||||
<br>3) <strong>地缘政治：</strong>航运风险可能<span class="highlight">长期化、常态化</span>，系统性抬高运价中枢。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Timeline Chart Card -->
|
||||
<div class="glass-card p-6 grid-item-timeline">
|
||||
<h3 class="section-title !text-xl !border-0 !p-0 !mb-4">关键事件时间轴</h3>
|
||||
<div id="timeline-chart" class="w-full h-80"></div>
|
||||
</div>
|
||||
|
||||
<!-- Key Data Summary Card -->
|
||||
<div class="glass-card p-6 grid-item-summary flex flex-col justify-center">
|
||||
<h3 class="section-title !text-xl !border-0 !p-0 !mb-4">核心数据摘要</h3>
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center justify-between p-3 bg-slate-800/50 rounded-xl">
|
||||
<span class="text-slate-300">VLCC中东航线TCE周涨幅</span>
|
||||
<span class="text-2xl font-bold text-cyan-300">+154%</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between p-3 bg-slate-800/50 rounded-xl">
|
||||
<span class="text-slate-300">中东集装箱运费涨幅</span>
|
||||
<span class="text-2xl font-bold text-cyan-300">~50%</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between p-3 bg-slate-800/50 rounded-xl">
|
||||
<span class="text-slate-300">海峡关闭市场隐含概率</span>
|
||||
<span class="text-2xl font-bold text-purple-400">18% → 54%</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between p-3 bg-slate-800/50 rounded-xl">
|
||||
<span class="text-slate-300">霍尔木兹海峡石油出口占比</span>
|
||||
<span class="text-2xl font-bold text-cyan-300">~34%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Risks Card -->
|
||||
<div class="glass-card p-6 grid-item-risks">
|
||||
<h3 class="section-title">潜在风险与挑战</h3>
|
||||
<div class="prose prose-custom max-w-none text-sm">
|
||||
<ul>
|
||||
<li><strong>地缘政治风险（双向）</strong>：冲突迅速缓和或解决（如6月25日停火协议）将导致风险溢价快速消退，是最大的下行风险。</li>
|
||||
<li><strong>商业化风险（需求侧）</strong>：油价若飙升至100-150美元/桶，将抑制全球经济活动，导致石油需求萎缩，反噬航运需求。</li>
|
||||
<li><strong>行业周期风险</strong>：市场担忧2026年船舶交付量增加会逆转供需关系，地缘溢价无法改变长期供需格局。</li>
|
||||
<li><strong>信息交叉验证风险</strong>：分析师理性判断（封锁概率小）与市场情绪化交易（隐含概率高达54%）存在巨大鸿沟，股价短期波动更多由后者驱动。</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Industry Chain Card -->
|
||||
<div class="glass-card p-6 grid-item-chain">
|
||||
<h3 class="section-title">产业链与投资环节</h3>
|
||||
<div class="prose prose-custom max-w-none text-sm">
|
||||
<p><strong>核心受益环节：</strong><span class="highlight">油品运输（油轮）</span>。逻辑最直接、运价弹性最大、数据验证最充分。</p>
|
||||
<p><strong>次核心受益环节：</strong><span class="highlight">集装箱运输</span>。在全球景气周期上获得额外的中东航线风险溢价。</p>
|
||||
<p><strong>长期受益视角：</strong><span class="highlight">船舶制造业</span>。高运价若持续，将刺激船东加速更新船队，带来长期订单。</p>
|
||||
<p><strong>需重点跟踪指标：</strong>VLCC运价指数、地缘政治新闻、霍尔木兹海峡通行数据、战争风险保险附加费。</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- Detailed Source Data -->
|
||||
<div x-data="{ openTab: '' }" class="my-12 space-y-4">
|
||||
<div class="glass-card">
|
||||
<div @click="openTab = (openTab === 'news' ? '' : 'news')" class="p-4 cursor-pointer flex justify-between items-center">
|
||||
<h3 class="text-lg font-medium text-slate-200">新闻数据深度挖掘</h3>
|
||||
<svg :class="{'rotate-180': openTab === 'news'}" class="w-6 h-6 text-slate-400 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
|
||||
</div>
|
||||
<div x-show="openTab === 'news'" x-collapse class="p-6 pt-0 prose prose-custom max-w-none">
|
||||
<h4>一、 总体影响</h4>
|
||||
<p>以伊冲突直接冲击航运市场，造成市场扰动，推动风险溢价上行。中东局势持续紧张，不断重构全球航运贸易格局。运输风险溢价因电磁干扰、油轮相撞等事件持续提升。</p>
|
||||
<h4>二、 霍尔木兹海峡</h4>
|
||||
<p>作为全球能源运输生命线，承担全球约34%石油出口和20%的LNG运输。伊朗威胁封锁海峡，可能采取间歇式封闭或与胡塞武装协同形成“双海峡危机”，这将导致全球供应链成本大幅抬升。尽管有分析认为全面封锁概率小，但已有船只选择避开，海运费用预期上涨。最新消息显示“停火协议保障了运输畅通”，为局势带来转机。</p>
|
||||
<h4>三、 油运市场</h4>
|
||||
<p>地缘冲突升级带动油运景气度上行，运价出现快速、大幅上涨。VLCC运价从2万美元/天飙升至接近6万美元/天，中东航线运价跳涨。油轮绕航拉长运距，导致有效运力折损，进一步支撑运价中枢。</p>
|
||||
<h4>四、 集运市场</h4>
|
||||
<p>影响外溢至集运，中国发往中东的货柜运费涨幅约50%。红海航行风险提升，船东绕行或持续，边际改善供需格局。</p>
|
||||
<h4>五、 造船业</h4>
|
||||
<p>全球油轮船队严重老化（至2029年超21年船龄占比达34%），亟待更替。油运运价上涨有望刺激船东加速船队更新节奏，利好本轮造船周期。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="glass-card">
|
||||
<div @click="openTab = (openTab === 'roadshow' ? '' : 'roadshow')" class="p-4 cursor-pointer flex justify-between items-center">
|
||||
<h3 class="text-lg font-medium text-slate-200">路演纪要核心提炼</h3>
|
||||
<svg :class="{'rotate-180': openTab === 'roadshow'}" class="w-6 h-6 text-slate-400 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
|
||||
</div>
|
||||
<div x-show="openTab === 'roadshow'" x-collapse class="p-6 pt-0 prose prose-custom max-w-none">
|
||||
<h4>一、 直接影响：运价剧烈波动</h4>
|
||||
<p>地缘风险显著升级，导致油价飙升及航运运价短期剧烈波动。油运WS运价指数单日暴涨23.6%。VLCC中东至中国运价从22,000美元/天涨至58,000美元/天（涨幅154%）。油运股为核心受益标的。</p>
|
||||
<h4>二、 核心风险点：霍尔木兹海峡</h4>
|
||||
<p>该海峡占全球石油出口30%-40%，封锁将引发短期能源短缺。市场对伊朗关闭海峡的概率预期从18%升至54%。专家认为伊朗可能避免全面封锁，但市场情绪无法证伪，支撑股价阶段性上行。</p>
|
||||
<h4>三、 投资策略</h4>
|
||||
<p>短期受地缘冲突驱动，油运股或迎上涨，地缘政治风险升级为航运股提供高赔率机会。中期（2026年）因船舶交付量增加，市场担忧供需恶化压制股价。推荐标的顺序为：海南张轮船（弹性高）＞中海能源（专业油运）＞招商轮船（多元业务）。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="glass-card">
|
||||
<div @click="openTab = (openTab === 'research' ? '' : 'research')" class="p-4 cursor-pointer flex justify-between items-center">
|
||||
<h3 class="text-lg font-medium text-slate-200">研报观点综述</h3>
|
||||
<svg :class="{'rotate-180': openTab === 'research'}" class="w-6 h-6 text-slate-400 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
|
||||
</div>
|
||||
<div x-show="openTab === 'research'" x-collapse class="p-6 pt-0 prose prose-custom max-w-none">
|
||||
<h4>一、 关键通道风险</h4>
|
||||
<p>霍尔木兹海峡是全球石油运输的咽喉要道，若冲突波及，原油供给将面临压力。苏伊士运河、地中海及红海的航运安全同样受到威胁。美军航母部署地中海加剧地区紧张。</p>
|
||||
<h4>二、 综合影响</h4>
|
||||
<p>冲突可能影响原油出口国港口运营和航运安全。航运成本（保险成本、燃料成本）将上升。全球供应链面临中断风险，若冲突外溢，全球航运将面临保费飙升、航线中断等风险。</p>
|
||||
<h4>三、 对特定市场影响</h4>
|
||||
<p><strong>油运：</strong>霍尔木兹海峡的风险对原油价格形成支撑。<strong>集运：</strong>地缘冲突在情绪端对集运期货带来较强支撑，但现实与预期仍有分歧，市场波动或放大。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Stock Tables -->
|
||||
<section class="mt-16">
|
||||
<h2 class="section-title text-2xl mb-8">相关概念股一览</h2>
|
||||
|
||||
<div class="mb-12">
|
||||
<h3 class="text-xl font-semibold text-slate-300 mb-4">核心概念股</h3>
|
||||
<div class="table-container">
|
||||
<table class="table table-fixed w-full">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="w-1/6">股票名称</th>
|
||||
<th class="w-1/6">股票代码</th>
|
||||
<th class="w-2/4">核心逻辑</th>
|
||||
<th class="w-1/6">关联标签</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>招商南油</td><td><a href="https://valuefrontier.cn/company?scode=601975" target="_blank" class="link link-hover text-cyan-400">601975</a></td><td>2024年油运合计56.17亿元，占营收86.74%；原油船舶21艘、成品油船舶30艘</td><td><div class="badge badge-primary badge-outline">油品</div></td></tr>
|
||||
<tr><td>中远海能</td><td><a href="https://valuefrontier.cn/company?scode=600026" target="_blank" class="link link-hover text-cyan-400">600026</a></td><td>2024年油运合计155.52亿元，占营收77.18%；内贸油运55%以上市场份额</td><td><div class="badge badge-primary badge-outline">油品</div></td></tr>
|
||||
<tr><td>招商轮船</td><td><a href="https://valuefrontier.cn/company?scode=601872" target="_blank" class="link link-hover text-cyan-400">601872</a></td><td>2024年油运合计92.06亿元，占营收35.68%；52艘VLCC油轮(全球运营)及5艘aframax油轮；权益艘数保持多年世界第一</td><td><div class="badge badge-primary badge-outline">油品</div></td></tr>
|
||||
<tr><td>中远海控</td><td><a href="https://valuefrontier.cn/company?scode=601919" target="_blank" class="link link-hover text-cyan-400">601919</a></td><td>2024年集装箱航运业务2259.71亿元，占营收96.63%</td><td><div class="badge badge-accent badge-outline">集装箱</div></td></tr>
|
||||
<tr><td>兴通股份</td><td><a href="https://valuefrontier.cn/company?scode=603209" target="_blank" class="link link-hover text-cyan-400">603209</a></td><td>2024年化学品运输11.64亿元，占营收76.86%；油运2.89亿元，占营收19.11%</td><td><div class="badge badge-secondary badge-outline">化学品</div> <div class="badge badge-primary badge-outline">油品</div></td></tr>
|
||||
<tr><td>盛航股份</td><td><a href="https://valuefrontier.cn/company?scode=001205" target="_blank" class="link link-hover text-cyan-400">001205</a></td><td>2024年化学品运输12.52亿元，占营收83.49%；油运1.87亿元，占营收12.48%</td><td><div class="badge badge-secondary badge-outline">化学品</div> <div class="badge badge-primary badge-outline">油品</div></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="text-xl font-semibold text-slate-300 mb-4">涨幅异动分析</h3>
|
||||
<div class="table-container">
|
||||
<table class="table table-fixed w-full">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="w-1/6">股票名称</th>
|
||||
<th class="w-1/6">股票代码</th>
|
||||
<th class="w-1/6">异动日期/涨幅</th>
|
||||
<th class="w-3/6">原因解析</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>凤凰航运</td><td><a href="https://valuefrontier.cn/company?scode=000520" target="_blank" class="link link-hover text-cyan-400">000520</a></td><td>2025-06-17 / <span class="text-red-400 font-semibold">+10.06%</span></td><td class="text-sm">主要受地缘政治紧张(以伊冲突)和行业景气度提升(运费暴涨)双重驱动，叠加公司自身重组预期等多重利好因素共振。</td></tr>
|
||||
<tr><td>锦江航运</td><td><a href="https://valuefrontier.cn/company?scode=601083" target="_blank" class="link link-hover text-cyan-400">601083</a></td><td>2025-06-23 / <span class="text-red-400 font-semibold">+6.06%</span></td><td class="text-sm">航运板块整体走强，地缘政治事件引发市场对航运通道及运费波动的关注，叠加出口集装箱运价指数上涨支撑。</td></tr>
|
||||
<tr><td>天顺股份</td><td><a href="https://valuefrontier.cn/company?scode=002800" target="_blank" class="link link-hover text-cyan-400">002800</a></td><td>2025-06-20 / <span class="text-red-400 font-semibold">+9.99%</span></td><td class="text-sm">受益于中亚贸易发展及一带一路建设，霍尔木兹海峡局势紧张凸显了其陆路运输的战略价值。</td></tr>
|
||||
<tr><td>连云港</td><td><a href="https://valuefrontier.cn/company?scode=601008" target="_blank" class="link link-hover text-cyan-400">601008</a></td><td>2025-06-23 / <span class="text-red-400 font-semibold">+10.06%</span></td><td class="text-sm">港口航运板块集体大涨带动。伊朗考虑关闭霍尔木兹海峡引发航运紧张，作为重要港口企业直接受益。</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
var chartDom = document.getElementById('timeline-chart');
|
||||
var myChart = echarts.init(chartDom, 'dark');
|
||||
var option;
|
||||
|
||||
const data = [
|
||||
{ date: '2025-06-13', event: '冲突引爆点', description: '以色列空袭伊朗核设施，引爆航运危机。' },
|
||||
{ date: '2025-06-17', event: '市场发酵期', description: '冲突升级，油运WS指数日涨23.6%，船只开始避险。' },
|
||||
{ date: '2025-06-23', event: '危机高潮期', description: '伊朗议会批准关闭海峡提案，VLCC运价周涨100%。' },
|
||||
{ date: '2025-06-24', event: '影响外溢期', description: '影响蔓延至集运，中东货柜运费上涨50%。' },
|
||||
{ date: '2025-06-25', event: '局势缓和信号', description: '出现停火协议，为市场带来不确定性。' }
|
||||
];
|
||||
|
||||
option = {
|
||||
backgroundColor: 'transparent',
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
formatter: function (params) {
|
||||
const item = data[params[0].dataIndex];
|
||||
return `<strong>${item.date} - ${item.event}</strong><br/>${item.description}`;
|
||||
},
|
||||
backgroundColor: 'rgba(20, 30, 50, 0.85)',
|
||||
borderColor: '#22d3ee',
|
||||
textStyle: { color: '#e5e7eb' }
|
||||
},
|
||||
grid: { left: '3%', right: '4%', bottom: '3%', top: '15%', containLabel: true },
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: data.map(item => item.date),
|
||||
axisLine: { lineStyle: { color: 'rgba(255, 255, 255, 0.3)' } },
|
||||
axisLabel: { color: '#9ca3af' }
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
min: 0,
|
||||
max: 100,
|
||||
splitLine: { lineStyle: { color: 'rgba(255, 255, 255, 0.1)', type: 'dashed' } },
|
||||
axisLabel: { show: false },
|
||||
},
|
||||
series: [{
|
||||
name: '事件',
|
||||
type: 'line',
|
||||
symbol: 'circle',
|
||||
symbolSize: 12,
|
||||
data: [20, 45, 80, 70, 50],
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
color: '#22d3ee',
|
||||
width: 3,
|
||||
shadowColor: 'rgba(34, 211, 238, 0.5)',
|
||||
shadowBlur: 10
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#22d3ee',
|
||||
borderColor: '#02040a',
|
||||
borderWidth: 2
|
||||
},
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||
offset: 0,
|
||||
color: 'rgba(34, 211, 238, 0.3)'
|
||||
}, {
|
||||
offset: 1,
|
||||
color: 'rgba(34, 211, 238, 0)'
|
||||
}])
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
formatter: function(params) {
|
||||
return data[params.dataIndex].event;
|
||||
},
|
||||
color: '#e5e7eb',
|
||||
fontSize: 12,
|
||||
backgroundColor: 'rgba(30, 41, 59, 0.7)',
|
||||
padding: [4, 8],
|
||||
borderRadius: 4
|
||||
}
|
||||
}]
|
||||
};
|
||||
|
||||
option && myChart.setOption(option);
|
||||
window.addEventListener('resize', myChart.resize);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user