Files
vf_react/public/htmls/中欧贸易.html
2025-12-05 13:29:18 +08:00

460 lines
32 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.

好的以下是根据您提供的全部数据和要求生成的“中欧贸易”概念深度研究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>
<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>
<style>
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@300;400;500;600;700&display=swap');
body {
font-family: 'Lexend', sans-serif;
background-color: #010008;
background-image:
radial-gradient(ellipse 20% 40% at 20% 20%, rgba(100, 10, 255, 0.15), transparent),
radial-gradient(ellipse 20% 40% at 80% 20%, rgba(0, 200, 255, 0.15), transparent),
radial-gradient(ellipse 30% 50% at 50% 90%, rgba(255, 0, 150, 0.1), transparent);
background-size: cover;
background-attachment: fixed;
color: #e0e0e0;
}
.glass-card {
background: rgba(10, 12, 43, 0.4);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 1.5rem;
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}
.glow-border {
position: relative;
}
.glow-border::before {
content: '';
position: absolute;
top: -1px;
left: -1px;
right: -1px;
bottom: -1px;
background: conic-gradient(from 180deg at 50% 50%, #00c2ff 0%, #ff00c7 50%, #00c2ff 100%);
z-index: -1;
filter: blur(20px);
border-radius: inherit;
opacity: 0.3;
}
.section-title {
font-size: 2.25rem;
font-weight: 700;
background: linear-gradient(90deg, #00d9ff, #ff00e5);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0 0 15px rgba(0, 217, 255, 0.3);
}
.sub-title {
font-size: 1.5rem;
font-weight: 600;
color: #93c5fd; /* A light blue for sub-titles */
padding-bottom: 0.5rem;
border-bottom: 1px solid rgba(147, 197, 253, 0.2);
margin-bottom: 1rem;
}
h3, h4 {
font-weight: 600;
color: #a5b4fc;
margin-top: 1.25rem;
margin-bottom: 0.5rem;
}
strong {
color: #f9a8d4;
}
.table thead th {
background-color: rgba(30, 41, 59, 0.5);
color: #e0e0e0;
font-weight: 600;
}
.table tbody tr {
border-color: rgba(255, 255, 255, 0.1);
}
.table tbody tr:hover {
background-color: rgba(30, 41, 59, 0.7);
}
.tab {
transition: all 0.3s ease;
}
.tab-active {
background-color: rgba(14, 165, 233, 0.2) !important;
color: #38bdf8 !important;
border-bottom: 2px solid #38bdf8 !important;
}
</style>
</head>
<body class="min-h-screen p-4 sm:p-8">
<div class="max-w-7xl mx-auto space-y-12">
<!-- Header Section -->
<header class="text-center p-8 space-y-4 glass-card glow-border">
<h1 class="text-4xl md:text-6xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-cyan-400 via-purple-400 to-pink-500 animate-pulse">
中欧贸易概念 深度研报
</h1>
<p class="text-lg text-gray-400">北京价值前沿科技有限公司 AI投研agent“价小前投研”</p>
<p class="text-sm text-gray-500">本报告为AI合成数据投资需谨慎。报告生成日期2025-10-24</p>
</header>
<!-- Concept Insight Section -->
<main class="space-y-8">
<div class="p-8 glass-card">
<h2 class="section-title mb-6">概念Insight中欧贸易</h2>
<div class="space-y-6 text-gray-300">
<div>
<h3 class="sub-title">核心观点摘要</h3>
<p>中欧贸易概念正处于 <strong>“合作与摩擦并存”</strong> 的深度博弈阶段,其核心驱动力源于双方在经济结构上的 <strong>高度互补性</strong> 与产业链的深度嵌合。未来潜力将取决于双方在新能源、数字经济等增量领域的合作模式创新,以及在地缘政治压力下有效管控贸易争端的能力,短期内 <strong>电动汽车关税谈判</strong> 的结果将成为市场情绪的关键拐点。</p>
</div>
<div>
<h3 class="sub-title">核心逻辑与市场认知分析</h3>
<h4>核心驱动力</h4>
<ul class="list-disc list-inside space-y-2 pl-4">
<li><strong>经济互补性 (根本逻辑):</strong> 这是支撑中欧贸易的基石。欧盟对华出口高端消费品(服饰、汽车),中国对欧出口机电产品、日化消费品和日益强大的“新三样”(电动车、锂电池、光伏)。这种“欧洲技术/品牌 + 中国制造/市场”的格局形成了难以轻易割裂的依赖关系。例如,宝马在华销量占比<strong>29%</strong>,博世在华营收占比<strong>20%</strong>以上。</li>
<li><strong>地缘政治制衡 (战略驱动):</strong> 在美国推行贸易保护主义和“对等关税”的背景下,欧盟存在与中国合作以<strong>避免沦为美国经济殖民地</strong>的内在动力。欧盟需要中国市场来平衡美国的影响力,这为中欧合作提供了战略空间。</li>
<li><strong>产业升级与成本优势 (市场驱动):</strong> 中国在新能源、数字经济等领域的快速崛起,对欧洲构成了“压力型机遇”。中国产品的成本优势(如绿色甲醇价格已降至<strong>5000-6000元/吨</strong>和技术领先迫使欧洲企业通过与中国企业合作如零跑与Stellantis模式来保持竞争力催生了资本绑定、技术换市场的新型合作模式。</li>
</ul>
<h4 class="mt-4">市场热度与情绪</h4>
<p>市场对中欧贸易概念保持<strong>高度关注,但情绪复杂且分化</strong>。乐观情绪集中在物流板块,如中欧班列运量<strong>同比增长22.9%</strong>。谨慎与担忧则笼罩在面临贸易壁垒的行业上,如欧盟对电动汽车的反补贴调查。对高层对话的解读也存在分歧,既被视为关系稳定的压舱石,又因部分对话取消而被看作关系恶化的信号。</p>
<h4 class="mt-4">预期差分析</h4>
<ul class="list-disc list-inside space-y-2 pl-4">
<li><strong>积极预期差:</strong> 市场可能<strong>低估了中欧产业链的深度绑定和韧性</strong>。商业利益的连接远比政治口号更牢固。市场可能过度关注关税,而忽略了<strong>本地化生产(如宁德时代在匈牙利建厂)</strong>这一规避风险的有效路径。</li>
<li><strong>消极预期差:</strong> 市场可能<strong>高估了通过对话解决核心结构性矛盾的可能性</strong>。双方在产业政策、政府补贴等方面的深层次分歧非短期谈判所能解决。欧盟“说一套做一套”的策略复杂性可能被市场忽略。</li>
</ul>
</div>
<div>
<h3 class="sub-title">关键催化剂与未来发展路径</h3>
<h4>近期催化剂 (未来3-6个月)</h4>
<ol class="list-decimal list-inside space-y-2 pl-4">
<li><strong>电动汽车反补贴关税谈判结果:</strong> 最核心的短期催化剂。<strong>10月4日</strong>的欧盟成员国投票是关键观察点。</li>
<li><strong>美国“对等关税”政策落地:</strong> 若美国对欧盟加征关税,可能迫使欧盟在经贸上向中国寻求平衡。</li>
<li><strong>欧洲经济复苏与降息效果:</strong> 欧洲已降息6轮<strong>150个基点</strong>),若电力基建、消费需求如期释放,将直接利好中国在<strong>海风、储能、变压器</strong>等领域的出口。</li>
</ol>
<h4 class="mt-4">长期发展路径</h4>
<ul class="list-none space-y-2 pl-4">
<li><strong>阶段一 (当前): 摩擦管控与模式探索期。</strong> “打打谈谈”,企业层面自发探索规避风险的新模式(海外建厂、股权合作)。</li>
<li><strong>阶段二: 规则重塑与标准对接期。</strong> 合作焦点转向规则和标准层面,如<strong>人工智能伦理治理、绿色认证体系互认</strong></li>
<li><strong>阶段三: 多元化战略合作期。</strong> 合作向第三方市场延伸,如<strong>中欧在非洲、中东的三方基建项目合作</strong></li>
</ul>
</div>
<div>
<h3 class="sub-title">潜在风险与挑战</h3>
<h4>政策与竞争风险 (核心风险)</h4>
<ul class="list-disc list-inside space-y-2 pl-4">
<li><strong>欧盟政策摇摆与执行风险:</strong> 欧盟内部利益不统一,可能导致政策执行力度和方向摇摆。</li>
<li><strong>贸易摩擦扩大化:</strong> 电动汽车争端若处理不当,可能蔓延至光伏、风电等其他领域。</li>
<li><strong>美欧关系变化:</strong> 若美欧贸易关系缓和,可能挤压中国在运输设备、机械等领域的份额。</li>
</ul>
<h4 class="mt-4">信息交叉验证风险</h4>
<p>需警惕<strong>言辞与行动的矛盾</strong>(欢迎投资 vs. 反补贴调查)、<strong>宏观数据与微观感受的矛盾</strong>(贸易额平稳 vs. 市场寒意)、以及对<strong>关系修复信号的过度解读</strong>(出口退税下调信号被证伪)。</p>
</div>
<div>
<h3 class="sub-title">综合结论与投资启示</h3>
<p>“中欧贸易”概念已进入<strong>基本面驱动与事件驱动并存的复杂阶段</strong>。风险管理和识别结构性机会的重要性远大于趋势性押注。</p>
<h4 class="mt-4">最具投资价值的细分环节</h4>
<ol class="list-decimal list-inside space-y-2 pl-4">
<li><strong>物流基础设施:</strong> 作为贸易的“卖水人”,逻辑最清晰,确定性相对最高。</li>
<li><strong>深度绑定的供应链环节:</strong> 为欧洲本土巨头供货的核心零部件和原材料供应商,是“去风险”背景下的避风港。</li>
<li><strong>“出海本地化”先行者:</strong> 积极在欧洲进行产能布局的企业,长期看是规避贸易壁垒、深度开拓欧洲市场的最有效路径。</li>
</ol>
</div>
</div>
</div>
</main>
<!-- Supporting Data & Charts -->
<section class="space-y-8">
<h2 class="section-title text-center">多维数据透视</h2>
<!-- ECharts Visualizations -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
<div class="glass-card p-6 min-h-[400px]">
<h3 class="sub-title">中欧芯片贸易2024年1-7月</h3>
<div id="chip-trade-chart" class="w-full h-80"></div>
</div>
<div class="glass-card p-6 min-h-[400px]">
<h3 class="sub-title">中欧农产品贸易2024年1-5月同比</h3>
<div id="agri-trade-chart" class="w-full h-80"></div>
</div>
</div>
<!-- Data Summaries with AlpineJS Tabs -->
<div x-data="{ tab: 'news' }" class="glass-card p-6">
<div class="tabs tabs-boxed bg-black/20">
<a class="tab" :class="{'tab-active': tab === 'news'}" @click.prevent="tab = 'news'">新闻数据摘要</a>
<a class="tab" :class="{'tab-active': tab === 'roadshow'}" @click.prevent="tab = 'roadshow'">路演核心观点</a>
<a class="tab" :class="{'tab-active': tab === 'report'}" @click.prevent="tab = 'report'">研报关键发现</a>
</div>
<div class="mt-6 space-y-4 text-gray-300">
<!-- News Summary -->
<div x-show="tab === 'news'" x-transition>
<ul class="list-disc list-inside space-y-2">
<li><strong>高层对话:</strong> 中欧高层保持沟通,讨论关税、反补贴案等核心议题。中方主张对话解决争端,欧方表态“无意脱钩”,但取消了高层经济对话,显示关系复杂性。</li>
<li><strong>贸易摩擦:</strong> 核心争端为<strong>电动汽车反补贴案</strong>双方已同意开展价格承诺谈判。此外中方对欧盟白兰地反倾销欧盟对华发起15起贸易救济调查摩擦呈多点散发态势。</li>
<li><strong>合作机遇:</strong> 在美国关税背景下,中欧合作机会或扩大。欧洲降息有望带来电力基建需求,利好中国<strong>海风、户储、智能电表、锂电</strong>产业链。</li>
<li><strong>物流强化:</strong> <strong>“中欧快航”</strong>海运直达航线首航航程仅26天主要运输锂电池等高附加值货物。<strong>中欧班列</strong>运量持续增长连云港前两月同比增22.9%),网络覆盖亚欧大陆。</li>
</ul>
</div>
<!-- Roadshow Summary -->
<div x-show="tab === 'roadshow'" x-transition>
<ul class="list-disc list-inside space-y-2">
<li><strong>核心逻辑:</strong> 中欧经贸关系根植于<strong>高度互补性</strong>。欧洲不愿沦为美国经济殖民地,需与中国合作避免技术垄断。</li>
<li><strong>政策转向:</strong> 欧盟政策转向<strong>“去风险”</strong>及“产能过剩威胁论”,聚焦光伏、电动车、关键矿产。欧洲议会右翼崛起可能放缓激进减排,转向经济安全。</li>
<li><strong>合作新模式:</strong> 面对贸易壁垒,出现<strong>股权投资绑定利益</strong>的新模式如零跑与Stellantis通过成立合资公司共享技术与市场规避贸易摩擦。</li>
<li><strong>风险与挑战:</strong> 欧盟内部政治分裂、财政扩张落地难。若美欧贸易关系缓和,可能挤压中国份额。中欧在价值观、地缘政治(新疆、台湾、中俄关系)上存在结构性矛盾。</li>
</ul>
</div>
<!-- Research Report Summary -->
<div x-show="tab === 'report'" x-transition>
<ul class="list-disc list-inside space-y-2">
<li><strong>贸易数据:</strong> 2023年中国对欧盟出口1.76万亿元,机电产品,特别是<strong>“新三样”</strong>电动车、锂电池、太阳能电池表现突出合计出口增长29.9%。</li>
<li><strong>合规与摩擦:</strong> 报告指中国在WTO框架下产业政策如《中国制造2025》、市场准入数字服务壁垒、知识产权保护等方面与欧盟存在摩擦是贸易争端的根源。</li>
<li><strong>行业分化:</strong> <strong>芯片贸易</strong>呈现逆差扩大2024年1-7月对欧出口-19.2%,从欧进口+19.2%)。<strong>乳品贸易</strong>进口额大幅下滑1-5月同比-34.0%)。<strong>粮食贸易</strong>以进口为主,法国是中国小麦、大麦重要供应方。</li>
<li><strong>宏观影响:</strong> 领导人通话显示德、法均愿加强经贸合作。美欧贸易摩擦紧张可能为中欧关系修复提供窗口期。</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Stock Data Section -->
<section class="space-y-8">
<h2 class="section-title text-center">核心关联标的</h2>
<div class="glass-card p-6">
<h3 class="sub-title">中欧贸易概念股</h3>
<div class="overflow-x-auto">
<table class="table w-full">
<thead>
<tr>
<th>股票名称</th>
<th>股票代码</th>
<th>核心逻辑</th>
<th>标签</th>
</tr>
</thead>
<tbody>
<!-- Group 1 -->
<tr><td colspan="4" class="font-bold text-lg text-info">物流与基建</td></tr>
<tr><td>连云港</td><td><a href="https://valuefrontier.cn/company?scode=601008" target="_blank" class="link link-hover">601008</a></td><td>亚欧大陆桥最东端港口</td><td>中欧贸易</td></tr>
<tr><td>天顺股份</td><td><a href="https://valuefrontier.cn/company?scode=002800" target="_blank" class="link link-hover">002800</a></td><td>中欧班列核心物流服务商,依托新疆口岸优势</td><td>中欧班列</td></tr>
<tr><td>铁龙物流</td><td><a href="https://valuefrontier.cn/company?scode=600125" target="_blank" class="link link-hover">600125</a></td><td>中欧班列集装箱堆场重要合作方</td><td>中欧班列</td></tr>
<tr><td>飞力达</td><td><a href="https://valuefrontier.cn/company?scode=300240" target="_blank" class="link link-hover">300240</a></td><td>运营“贵阳都拉营——莫斯科沃尔西诺”直发中欧班列</td><td>中欧班列</td></tr>
<tr><td>新赛股份</td><td><a href="https://valuefrontier.cn/company?scode=600540" target="_blank" class="link link-hover">600540</a></td><td>铁路专用线与精伊霍铁路接轨,面向中亚及欧洲的桥头堡</td><td>中欧贸易</td></tr>
<tr><td>国货航</td><td><a href="https://valuefrontier.cn/company?scode=001391" target="_blank" class="link link-hover">001391</a></td><td>主要从事航空货运、综合物流解决方案及航空货站业务</td><td>中欧贸易</td></tr>
<tr><td>国航远洋</td><td><a href="https://valuefrontier.cn/company?scode=920571" target="_blank" class="link link-hover">920571</a></td><td>外贸航线覆盖整个欧洲</td><td>中欧班列</td></tr>
<!-- Group 2 -->
<tr><td colspan="4" class="font-bold text-lg text-info pt-6">产业合作与出口 (汽车 & 航空)</td></tr>
<tr><td>比亚迪</td><td><a href="https://valuefrontier.cn/company?scode=002594" target="_blank" class="link link-hover">002594</a></td><td>位居中国纯电动车欧洲销量榜第三,多款车型出口欧洲</td><td>汽车合作, 出口</td></tr>
<tr><td>银轮股份</td><td><a href="https://valuefrontier.cn/company?scode=002126" target="_blank" class="link link-hover">002126</a></td><td>在波兰等地建立生产基地,产品销往欧洲市场</td><td>汽车合作, 出口</td></tr>
<tr><td>天保基建</td><td><a href="https://valuefrontier.cn/company?scode=000965" target="_blank" class="link link-hover">000965</a></td><td>持有空客总装公司股权承担A320机型总装</td><td>飞机合作, 出口</td></tr>
<tr><td>隆达股份</td><td><a href="https://valuefrontier.cn/company?scode=688231" target="_blank" class="link link-hover">688231</a></td><td>20%出口欧洲,与法国赛峰签有十年长约,供应高温合金产品</td><td>飞机合作, 出口</td></tr>
<tr><td>南山铝业</td><td><a href="https://valuefrontier.cn/company?scode=600219" target="_blank" class="link link-hover">600219</a></td><td>中国唯一通过空客铝合金挤压型材认证的供应商</td><td>飞机合作, 出口</td></tr>
<tr><td>炼石航空</td><td><a href="https://valuefrontier.cn/company?scode=000697" target="_blank" class="link link-hover">000697</a></td><td>子公司是欧洲最大的航空航天金属零件和组件的供应商之一</td><td>飞机合作, 出口</td></tr>
<!-- Group 3 -->
<tr><td colspan="4" class="font-bold text-lg text-info pt-6">贸易与零售</td></tr>
<tr><td>瑞茂通</td><td><a href="https://valuefrontier.cn/company?scode=600180" target="_blank" class="link link-hover">600180</a></td><td>加速大宗商品全球化布局,业务拓展至荷兰、波兰等国</td><td>中欧贸易</td></tr>
<tr><td>中百集团</td><td><a href="https://valuefrontier.cn/company?scode=000759" target="_blank" class="link link-hover">000759</a></td><td>采购“一带一路”沿线国家商品,包括德国啤酒、法国葡萄酒等</td><td>中欧贸易</td></tr>
<!-- Group 4 -->
<tr><td colspan="4" class="font-bold text-lg text-info pt-6">军工出口欧洲(潜在)</td></tr>
<tr><td>炼石航空</td><td><a href="https://valuefrontier.cn/company?scode=000697" target="_blank" class="link link-hover">000697</a></td><td>子公司是欧洲最大的航空航天金属零件和组件的供应商之一</td><td>军工出口欧洲</td></tr>
<tr><td>航新科技</td><td><a href="https://valuefrontier.cn/company?scode=300424" target="_blank" class="link link-hover">300424</a></td><td>航空维修业务,境外业务主要位于欧洲</td><td>军工出口欧洲</td></tr>
<tr><td>威海广泰</td><td><a href="https://valuefrontier.cn/company?scode=002111" target="_blank" class="link link-hover">002111</a></td><td>电动化空港设备全球领先,积极拓展欧洲市场</td><td>军工出口欧洲</td></tr>
</tbody>
</table>
</div>
</div>
<div class="glass-card p-6">
<h3 class="sub-title">涨幅异动分析</h3>
<div class="overflow-x-auto">
<table class="table 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=600798" target="_blank" class="link link-hover">600798</a></td>
<td>2025-09-23</td>
<td class="text-success">9.95%</td>
<td class="text-sm">“全球首条中欧北极集装箱快航”在宁波舟山港首发,公司自有冰级运力匹配,成为北极航道商业化第一受益标的。</td>
</tr>
<tr>
<td>华鹏飞</td>
<td><a href="https://valuefrontier.cn/company?scode=300350" target="_blank" class="link link-hover">300350</a></td>
<td>2025-09-23</td>
<td class="text-success">5.08%</td>
<td class="text-sm">波兰关闭口岸导致中欧班列受阻,公司专注的“跨里海通道+霍尔果斯枢纽”中线陆运路线完全规避冲突影响,有望充分受益于货物分流。</td>
</tr>
<tr>
<td>南 京 港</td>
<td><a href="https://valuefrontier.cn/company?scode=002040" target="_blank" class="link link-hover">002040</a></td>
<td>2025-09-24</td>
<td class="text-success">10.01%</td>
<td class="text-sm">波兰宣布重开波白铁路口岸,直接扭转了市场对公司四季度铁路联运箱量的悲观预期,作为长江下游唯一拥有始发站的港口,预期修复弹性最大。</td>
</tr>
<tr>
<td>宁波远洋</td>
<td><a href="https://valuefrontier.cn/company?scode=601022" target="_blank" class="link link-hover">601022</a></td>
<td>2025-09-23</td>
<td class="text-success">7.72%</td>
<td class="text-sm">受益于“中欧北极集装箱快航”正式通航,作为宁波本地航运企业,直接受益于新航线带来的业务增长点。</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<!-- Footer -->
<footer class="text-center text-xs text-gray-600 p-4">
<p>报告由价值前沿“价小前投研”AI Agent生成。所有内容仅供参考不构成任何投资建议。</p>
<p>&copy; 2025 北京价值前沿科技有限公司. All Rights Reserved.</p>
</footer>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
// ECharts Initialization
var chipChart = echarts.init(document.getElementById('chip-trade-chart'));
var agriChart = echarts.init(document.getElementById('agri-trade-chart'));
const chartOptionBase = {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow' },
backgroundColor: 'rgba(20, 20, 50, 0.8)',
borderColor: '#38bdf8',
textStyle: { color: '#e0e0e0' }
},
grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
xAxis: {
type: 'category',
data: [],
axisLine: { lineStyle: { color: 'rgba(255, 255, 255, 0.3)' } },
axisLabel: { color: '#a5b4fc' }
},
yAxis: {
type: 'value',
axisLine: { lineStyle: { color: 'rgba(255, 255, 255, 0.3)' } },
splitLine: { lineStyle: { color: 'rgba(255, 255, 255, 0.1)' } },
axisLabel: { color: '#a5b4fc' }
},
series: [],
textStyle: { fontFamily: 'Lexend' }
};
// Chip Trade Chart
const chipOption = {
...chartOptionBase,
xAxis: { ...chartOptionBase.xAxis, data: ['对欧盟出口', '从欧盟进口'] },
yAxis: {...chartOptionBase.yAxis, name: '金额 (亿美元)'},
series: [{
name: '贸易额',
type: 'bar',
barWidth: '60%',
data: [
{ value: 17.4, itemStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#ff00c7' }, { offset: 1, color: '#f9a8d4' }]) } },
{ value: 44.1, itemStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#00d9ff' }, { offset: 1, color: '#38bdf8' }]) } }
],
label: {
show: true,
position: 'top',
color: '#e0e0e0',
formatter: function(params) {
return params.name === '对欧盟出口' ? '{a|' + params.value + '}\n{b|同比-19.2%}' : '{a|' + params.value + '}\n{c|同比+19.2%}'
},
rich: {
a: { fontSize: 14, fontWeight: 'bold' },
b: { color: '#f87171', fontSize: 12 },
c: { color: '#4ade80', fontSize: 12 }
}
}
}]
};
chipChart.setOption(chipOption);
// Agri Trade Chart
const agriOption = {
...chartOptionBase,
tooltip: {
trigger: 'axis',
backgroundColor: 'rgba(20, 20, 50, 0.8)',
borderColor: '#38bdf8',
textStyle: { color: '#e0e0e0' },
formatter: '{b}: {c}%'
},
xAxis: { ...chartOptionBase.xAxis, data: ['婴幼儿奶粉', '鲜奶', '奶油', '粮食出口', '小麦进口', '大麦进口'], axisLabel: { interval: 0, rotate: 30 } },
yAxis: {...chartOptionBase.yAxis, name: '同比增长率 (%)'},
series: [{
name: '同比增长率',
type: 'bar',
data: [
{ value: -34.9, itemStyle: { color: '#f87171'} },
{ value: -9.3, itemStyle: { color: '#fb923c'} },
{ value: 4.6, itemStyle: { color: '#4ade80'} },
{ value: -14.8, itemStyle: { color: '#f87171'} },
{ value: 148.2, itemStyle: { color: '#4ade80'} },
{ value: -39.3, itemStyle: { color: '#f87171'} },
],
}]
};
agriChart.setOption(agriOption);
window.addEventListener('resize', function () {
chipChart.resize();
agriChart.resize();
});
});
</script>
</body>
</html>