Files
vf_react/public/htmls/有色金属.html
2025-12-05 13:29:18 +08:00

535 lines
36 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="dark">
<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=Orbitron:wght@400;700&family=Roboto:wght@300;400;700&display=swap');
body {
font-family: 'Roboto', sans-serif;
background-color: #020011;
color: #E0E0E0;
overflow-x: hidden;
}
.font-orbitron {
font-family: 'Orbitron', sans-serif;
}
.glass-card {
background: rgba(15, 23, 42, 0.6); /* slate-900 with opacity */
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(56, 189, 248, 0.2); /* sky-400 with opacity */
border-radius: 1.5rem; /* rounded-3xl */
transition: all 0.3s ease;
}
.glass-card:hover {
border-color: rgba(56, 189, 248, 0.5);
box-shadow: 0 0 25px rgba(56, 189, 248, 0.15);
}
.bento-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-auto-rows: minmax(100px, auto);
gap: 1rem;
}
.bento-item {
grid-column: span 6; /* Default span */
}
@media (min-width: 1024px) {
.bento-item-col-2 { grid-column: span 2; }
.bento-item-col-3 { grid-column: span 3; }
.bento-item-col-4 { grid-column: span 4; }
.bento-item-row-2 { grid-row: span 2; }
}
.glow-text {
text-shadow: 0 0 8px rgba(56, 189, 248, 0.6), 0 0 12px rgba(56, 189, 248, 0.4);
}
.glow-border {
border-color: rgba(56, 189, 248, 0.2);
box-shadow: 0 0 15px rgba(56, 189, 248, 0.1);
}
.background-glow {
position: fixed;
top: 50%;
left: 50%;
width: 80vw;
height: 80vh;
max-width: 1200px;
max-height: 1200px;
transform: translate(-50%, -50%);
background: radial-gradient(circle, rgba(29, 78, 216, 0.15) 0%, rgba(2, 0, 17, 0) 60%);
z-index: -1;
pointer-events: none;
animation: pulse 10s infinite ease-in-out;
}
@keyframes pulse {
0% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
50% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
100% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
}
.tabs .tab {
transition: all 0.3s ease;
opacity: 0.6;
}
.tabs .tab-active {
opacity: 1;
color: #38bdf8; /* sky-400 */
border-color: #38bdf8;
background-color: rgba(56, 189, 248, 0.1);
}
.table thead th {
background-color: rgba(56, 189, 248, 0.1);
color: #e5e7eb;
}
.table tbody tr:hover {
background-color: rgba(56, 189, 248, 0.08);
}
</style>
</head>
<body class="min-h-screen p-4 sm:p-6 lg:p-8">
<div class="background-glow"></div>
<div class="max-w-7xl mx-auto space-y-8" x-data="{ activeTab: 'insight' }">
<!-- Header -->
<header class="text-center space-y-2">
<h1 class="font-orbitron text-4xl sm:text-5xl md:text-6xl font-bold glow-text text-sky-300">
有色金属
</h1>
<p class="text-lg text-slate-400">深度行业分析报告</p>
</header>
<!-- Main Content -->
<main class="space-y-8">
<!-- Core Insight Summary -->
<section class="glass-card p-6 md:p-8">
<h2 class="font-orbitron text-2xl font-bold text-sky-400 mb-4 border-b border-sky-400/20 pb-2">核心观点摘要</h2>
<p class="text-slate-300 text-lg leading-relaxed">
有色金属概念正处于一轮由 <strong class="text-amber-300">宏观流动性(降息预期)</strong><strong class="text-amber-300">基本面(供需错配)</strong> 共同驱动的强周期上行阶段。其核心驱动力已从早期的估值修复,深化为 <strong class="text-teal-300">供给侧的长期资本开支不足</strong><strong class="text-teal-300">需求侧的结构性升级新能源、AI</strong> 之间的深刻矛盾。未来,该概念的潜力将取决于新需求的兑现程度和行业在绿色、再生方向上的转型效率。
</p>
</section>
<!-- Bento Grid Layout -->
<div class="bento-grid">
<div class="bento-item bento-item-col-4 bento-item-row-2 glass-card p-6 flex flex-col">
<h3 class="font-orbitron text-xl font-bold text-sky-400 mb-4">核心驱动力分析</h3>
<div class="space-y-4 text-slate-300 flex-grow">
<div>
<h4 class="font-bold text-sky-300">1. 供给端刚性约束 (核心基石)</h4>
<p class="text-sm">路演与研报交叉验证铜矿资本开支长期不足TC/RC费用已跌至个位数甚至负值倒逼冶炼厂减产。中国有色金属工业协会更于2025年11月明确表态“严格限制新增铜冶炼产能”从政策层面固化供给纪律。</p>
</div>
<div>
<h4 class="font-bold text-sky-300">2. 需求端结构性重塑</h4>
<p class="text-sm">需求由传统房地产转向多元化、高端化。铜需求增量来自新能源车(35%)、电网(25%)及AI数据中心铝需求由光伏、新能源车接棒锡因AI算力拉动焊料需求迎来系统性提升。需求结构与全球科技、能源转型深度绑定韧性更强。</p>
</div>
<div>
<h4 class="font-bold text-sky-300">3. 宏观金融属性催化</h4>
<p class="text-sm">美联储降息周期预期是引爆行情的重要催化剂。美元走弱、实际利率下行利好所有以美元计价的大宗商品。黄金价格强势多次提及突破2700美元/盎司)也为整个板块营造了牛市氛围。</p>
</div>
<div>
<h4 class="font-bold text-sky-300">4. 政策与地缘政治溢价</h4>
<p class="text-sm">全球供应链重构和地缘冲突升级,使“资源自主可控”等战略资源价值被重估。稀土、钨、钼等小金属因此获得溢价。</p>
</div>
</div>
</div>
<div class="bento-item bento-item-col-2 glass-card p-6 flex flex-col">
<h3 class="font-orbitron text-xl font-bold text-sky-400 mb-4">市场热度与情绪</h3>
<div class="text-slate-300 flex-grow flex flex-col justify-between">
<div>
<p class="mb-4">市场热度极高,情绪整体<strong class="text-red-400">高度乐观</strong></p>
<blockquote class="border-l-4 border-red-400/50 pl-4 text-sm italic">
“截至2025年10月13日收盘中证申万有色金属指数已较年初上涨85%,多只个股上演翻倍行情。”
<cite class="block text-right text-slate-400 text-xs mt-1">— 新闻数据</cite>
</blockquote>
</div>
<div id="growthChart" class="w-full h-48 mt-4"></div>
</div>
</div>
<div class="bento-item bento-item-col-2 glass-card p-6">
<h3 class="font-orbitron text-xl font-bold text-sky-400 mb-4">关键催化剂</h3>
<ul class="space-y-3 list-disc list-inside text-slate-300">
<li><strong class="text-amber-300">美联储首次降息落地:</strong> 打开大宗商品金融属性空间。</li>
<li><strong class="text-amber-300">中国稳增长政策效果显现:</strong> 《有色金属行业稳增长工作方案》效果验证。</li>
<li><strong class="text-amber-300">行业“反内卷”细则出台:</strong> 协会表态后若出台具体减产措施将刺激市场。</li>
</ul>
</div>
<div class="bento-item bento-item-col-4 bento-item-row-2 glass-card p-6">
<h3 class="font-orbitron text-xl font-bold text-sky-400 mb-4">预期差与潜在风险</h3>
<div class="space-y-4 text-slate-300">
<div>
<h4 class="font-bold text-yellow-300">预期差分析</h4>
<ul class="space-y-2 text-sm mt-2">
<li><strong>铜减产预期 vs 现实:</strong> 市场交易大规模减产,但长协订单和硫酸副产品盈利使实际减产不及预期。铜价上涨动力或更多来自需求拉动和矿端紧缺。</li>
<li><strong>锂反转时点:</strong> 市场共识锂价近底部但对反转时点存在分歧2025年中 vs 2025年底市场可能对反转速度过于乐观。</li>
<li><strong>铝股息率逻辑:</strong> 市场对铝企认知正从周期股转向高股息、类公用事业股,此逻辑尚未被所有投资者充分认知。</li>
</ul>
</div>
<div class="divider before:bg-sky-400/20 after:bg-sky-400/20"></div>
<div>
<h4 class="font-bold text-red-400">潜在风险与挑战</h4>
<ul class="space-y-2 text-sm mt-2">
<li><strong>全球经济衰退:</strong> 所有路演共同提示的最大风险,将系统性压制工业金属需求。</li>
<li><strong>美联储政策超预期:</strong> 若超预期加息或推迟降息,将严重打压金属金融属性。</li>
<li><strong>资源国政策风险:</strong> 印尼等国出口政策变化将影响全球供给和国内成本。</li>
<li><strong>“反内卷”政策执行不及预期:</strong> 若产能调控流于形式,行业可能重回恶性竞争。</li>
</ul>
</div>
</div>
</div>
<div class="bento-item bento-item-col-2 glass-card p-6 flex flex-col">
<h3 class="font-orbitron text-xl font-bold text-sky-400 mb-4">长期发展路径</h3>
<ol class="space-y-3 list-decimal list-inside text-slate-300 flex-grow">
<li>
<strong>绿色化与低碳化 (2025-2027):</strong>
<p class="text-xs pl-4 text-slate-400">碳足迹数据库上线,拥有绿电冶炼能力的企业将构建长期成本与合规优势。</p>
</li>
<li>
<strong>再生金属体系成熟 (2025-2030):</strong>
<p class="text-xs pl-4 text-slate-400">再生金属产量占比持续提升,缓解资源瓶颈,催生回收龙头。</p>
</li>
<li>
<strong>新材料转型与全球资源布局 (长期):</strong>
<p class="text-xs pl-4 text-slate-400">龙头企业向全球化矿业巨头和新材料供应商转型,布局高端稀土、固态电池材料等。</p>
</li>
</ol>
</div>
</div>
<!-- Industry Chain Analysis -->
<section class="glass-card p-6 md:p-8">
<h2 class="font-orbitron text-2xl font-bold text-sky-400 mb-4 border-b border-sky-400/20 pb-2">产业链与核心公司深度剖析</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 text-sm">
<!-- Upstream -->
<div class="border border-sky-400/20 p-4 rounded-xl">
<h4 class="font-bold text-lg text-sky-300 mb-2">上游:资源开采 (利润弹性最大)</h4>
<p class="text-slate-400 mb-3">拥有矿山资源的公司,直接受益于金属价格上涨。</p>
<ul class="space-y-1">
<li><strong>综合性矿企:</strong> 紫金矿业 (铜/金/锂), 洛阳钼业 (铜/钴/钼)</li>
<li><strong>细分品种:</strong> 山东黄金 (金), 中国铝业 (铝土矿), 天齐锂业 (锂), 北方稀土 (稀土)</li>
</ul>
</div>
<!-- Midstream -->
<div class="border border-sky-400/20 p-4 rounded-xl">
<h4 class="font-bold text-lg text-sky-300 mb-2">中游:冶炼与加工</h4>
<p class="text-slate-400 mb-3">将矿石加工成金属产品,受加工费(TC/RC)和能源成本影响。</p>
<ul class="space-y-1">
<li><strong>冶炼:</strong> 江西铜业, 铜陵有色 (铜), 云铝股份, 神火股份 (铝)</li>
<li><strong>再生:</strong> 格林美 (钴/镍回收), 怡球资源 (再生铝)</li>
</ul>
</div>
<!-- Downstream -->
<div class="border border-sky-400/20 p-4 rounded-xl">
<h4 class="font-bold text-lg text-sky-300 mb-2">下游:应用与贸易</h4>
<p class="text-slate-400 mb-3">终端消费领域及提供物流、交易服务的企业。</p>
<ul class="space-y-1">
<li><strong>深加工:</strong> 南山铝业 (铝材)</li>
<li><strong>贸易与服务:</strong> 炬申股份 (仓储物流), 找钢集团 (电商平台)</li>
<li><strong>终端消费 (关联):</strong> 周大生, 老凤祥 (黄金珠宝)</li>
</ul>
</div>
</div>
<div class="divider before:bg-sky-400/20 after:bg-sky-400/20 my-6">核心玩家对比</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 text-sm">
<div class="bg-slate-800/50 p-4 rounded-lg border border-slate-700">
<h5 class="font-bold text-teal-300">领导者 - 紫金矿业</h5>
<p class="text-xs text-slate-400 mt-1">“成长型全球矿业巨头”铜金双轮驱动产量年增10%,估值相对海外同行偏低,机构持仓首选。</p>
</div>
<div class="bg-slate-800/50 p-4 rounded-lg border border-slate-700">
<h5 class="font-bold text-blue-300">稳健价值者 - 中国宏桥/云铝股份</h5>
<p class="text-xs text-slate-400 mt-1">“成本优势+高分红”的铝业龙头,氧化铝自给率高/绿电成本优势,市场按股息率逻辑估值。</p>
</div>
<div class="bg-slate-800/50 p-4 rounded-lg border border-slate-700">
<h5 class="font-bold text-amber-300">周期弹性者 - 天齐锂业/赣锋锂业</h5>
<p class="text-xs text-slate-400 mt-1">“周期反转”核心标的,拥有优质锂矿资源,股价已反映悲观预期,具备高赔率属性但反转时点不确定。</p>
</div>
<div class="bg-slate-800/50 p-4 rounded-lg border border-slate-700">
<h5 class="font-bold text-fuchsia-300">战略稀缺者 - 北方稀土/广晟有色</h5>
<p class="text-xs text-slate-400 mt-1">“科技情绪+战略资源”双轮驱动,交易主线更多是“稀土换芯片”等情绪周期,具备独特稀缺性溢价。</p>
</div>
</div>
</section>
<!-- Data Tabs -->
<section class="glass-card p-6 md:p-8" x-data="{ dataTab: 'news' }">
<div role="tablist" class="tabs tabs-bordered">
<a role="tab" class="tab" :class="{'tab-active': dataTab === 'news'}" @click="dataTab = 'news'">新闻数据</a>
<a role="tab" class="tab" :class="{'tab-active': dataTab === 'roadshow'}" @click="dataTab = 'roadshow'">路演纪要</a>
<a role="tab" class="tab" :class="{'tab-active': dataTab === 'research'}" @click="dataTab = 'research'">研报精粹</a>
</div>
<div class="mt-6 space-y-4 text-slate-300 text-sm leading-relaxed">
<!-- News Content -->
<div x-show="dataTab === 'news'">
<div class="collapse collapse-plus bg-slate-800/50">
<input type="radio" name="news-accordion" checked="checked" />
<div class="collapse-title text-base font-medium text-sky-300">行业总体运行情况与展望</div>
<div class="collapse-content">
<ul class="list-disc pl-5 space-y-2">
<li><strong>2025H1运行情况:</strong> 工业增加值同比增长<strong class="text-green-400">7.6%</strong>较工业平均增速高1.2个百分点,行业展现强劲韧性。</li>
<li><strong>2024全年预判:</strong> 增加值增速约6%固定资产投资增速超10%,铜、铝价格高位波动,锂价低位运行。</li>
<li><strong>2024全年实际数据:</strong> 规模以上有色企业工业增加值同比增长<strong class="text-green-400">8.9%</strong>,超预期。</li>
<li><strong>面临挑战:</strong> 资源保障、产能过剩、管控两用物项进出口等。协会强调强化行业自律,防止“内卷式”恶性竞争。</li>
</ul>
</div>
</div>
<div class="collapse collapse-plus bg-slate-800/50">
<input type="radio" name="news-accordion" />
<div class="collapse-title text-base font-medium text-sky-300">细分品种市场动态</div>
<div class="collapse-content">
<ul class="list-disc pl-5 space-y-2">
<li><strong>铜:</strong> 将严格限制新增铜冶炼产能反对零或负TC/RCs。矿端紧缺现实延续铜价回调有限。</li>
<li><strong>铝:</strong> 电解铝盈利持续修复行业平均吨盈利在1300-1700元区间波动。市场开始交易股息率逻辑。</li>
<li><strong>锂:</strong> 价格在底部区间波动,行业去库存压力较大。部分锂盐厂持续减停产。</li>
<li><strong>贵金属 (黄金):</strong> 美联储降息预期、避险情绪及央行购金支撑金价沪金强势突破前高重回2700美元/盎司点位。</li>
</ul>
</div>
</div>
<div class="collapse collapse-plus bg-slate-800/50">
<input type="radio" name="news-accordion" />
<div class="collapse-title text-base font-medium text-sky-300">政策法规与产业发展</div>
<div class="collapse-content">
<ul class="list-disc pl-5 space-y-2">
<li><strong>环保与可持续发展:</strong> 有色金属行业碳足迹数据库正式上线,首个电解铝碳足迹国家标准发布,行业绿色转型迈出重要一步。</li>
<li><strong>再生有色金属:</strong> 预计2025年底产量将首次突破2000万吨成为破解资源和环境瓶颈的重要途径。</li>
</ul>
</div>
</div>
</div>
<!-- Roadshow Content -->
<div x-show="dataTab === 'roadshow'" x-cloak>
<div class="collapse collapse-plus bg-slate-800/50">
<input type="radio" name="roadshow-accordion" checked="checked" />
<div class="collapse-title text-base font-medium text-sky-300">核心行情逻辑 (财通有色)</div>
<div class="collapse-content">
<ul class="list-disc pl-5 space-y-2">
<li><strong>美元走弱 & 货币宽松:</strong> 美联储9月启动降息周期利好美元计价金属。</li>
<li><strong>避险需求:</strong> 地缘冲突升级,资金将大宗商品视为抗通胀、避险资产。</li>
<li><strong>供需缺口:</strong> 出口限制、关税政策导致供给收缩;新能源+AI拉动新需求。</li>
<li><strong>战略资源重估:</strong> 稀土、钨、钼、锡等因稀缺性与军工/高科技需求获溢价。</li>
<li><strong>个股观点:</strong> 紫金矿业2025E净利≈500亿PE仅10x估值洼地。</li>
</ul>
</div>
</div>
<div class="collapse collapse-plus bg-slate-800/50">
<input type="radio" name="roadshow-accordion" />
<div class="collapse-title text-base font-medium text-sky-300">各金属品种展望 (海通有色)</div>
<div class="collapse-content">
<ul class="list-disc pl-5 space-y-2">
<li><strong>黄金:</strong> 央行购金加速,地缘政治动荡,估值处于低位,回调是布局机会。</li>
<li><strong>铜:</strong> 供应约束明确 (TC/RC预计20美元/吨),需求亮点强劲 (美国数据中心、电网改造年增速15-20%),上涨潜力大。</li>
<li><strong>铝:</strong> 国内产能受限,需求由光伏、新能源车拉动,库存去化良好,高股息标的受关注 (神火股份)。</li>
<li><strong>锂:</strong> 周期底部,锂价跌破成本线 (约7万元/吨)澳洲锂矿可能减产预计拐点在2025年底至2026年。</li>
</ul>
</div>
</div>
</div>
<!-- Research Content -->
<div x-show="dataTab === 'research'" x-cloak>
<div class="collapse collapse-plus bg-slate-800/50">
<input type="radio" name="research-accordion" checked="checked" />
<div class="collapse-title text-base font-medium text-sky-300">2023年行业经济运行报告</div>
<div class="collapse-content">
<ul class="list-disc pl-5 space-y-2">
<li><strong>工业增加值:</strong> 2023年规模以上有色金属工业增加值比上年增长<strong class="text-green-400">7.4%</strong></li>
<li><strong>固定资产投资:</strong> 增长<strong class="text-green-400">17.3%</strong>,增速创近十年新高,其中矿采选业投资增长<strong class="text-green-400">42.7%</strong></li>
<li><strong>企业效益:</strong> 实现利润总额增长<strong class="text-green-400">23.2%</strong>,主要受铜、铝、钨钼、金银贵金属行业拉动。</li>
<li><strong>消费结构:</strong> 新能源汽车、光伏、风电成为拉动消费主要增长极。</li>
</ul>
</div>
</div>
<div class="collapse collapse-plus bg-slate-800/50">
<input type="radio" name="research-accordion" />
<div class="collapse-title text-base font-medium text-sky-300">锡市场展望 (华锡有色研报)</div>
<div class="collapse-content">
<ul class="list-disc pl-5 space-y-2">
<li><strong>需求端:</strong> 受益于<strong class="text-teal-300">光伏焊带+AI算力需求</strong>拉动,锡焊料需求加速,带动整体锡需求迎来系统性提升。</li>
<li><strong>供需预测:</strong> 全球锡需求有望从2023年的36万吨提升至2027年的44万吨 (CAGR 5.2%)。预计2024-2027年全球持续处于供需缺口状态驱动锡价中枢上移。</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- Stock Data -->
<section class="glass-card p-6 md:p-8" x-data="stockData">
<h2 class="font-orbitron text-2xl font-bold text-sky-400 mb-4 border-b border-sky-400/20 pb-2">相关概念股</h2>
<!-- Table 1 -->
<h3 class="font-orbitron text-lg font-bold text-sky-300 mt-6 mb-3">有色金属 (240407)</h3>
<div class="overflow-x-auto">
<table class="table table-sm">
<thead>
<tr>
<th>股票名称</th>
<th>股票代码</th>
<th>核心逻辑</th>
<th>标签</th>
</tr>
</thead>
<tbody>
<template x-for="stock in stocks1" :key="stock.stock + stock.reason">
<tr>
<td x-text="stock.stock"></td>
<td>
<a x-show="stock.stock_code" :href="'https://valuefrontier.cn/company?scode=' + stock.stock_code" target="_blank" class="text-sky-400 hover:text-sky-300 transition" x-text="stock.stock_code"></a>
</td>
<td x-text="stock.reason"></td>
<td>
<div class="flex flex-wrap gap-1">
<template x-for="tag in stock['其他标签'].split(', ')" :key="tag">
<div class="badge badge-outline badge-info text-xs" x-text="tag"
:class="{ 'badge-error': tag.includes('涨幅'), 'badge-warning': tag.includes('回收') }"></div>
</template>
</div>
</td>
</tr>
</template>
</tbody>
</table>
</div>
<!-- Table 2 -->
<h3 class="font-orbitron text-lg font-bold text-sky-300 mt-8 mb-3">有色金属 (250307)</h3>
<div class="overflow-x-auto">
<table class="table table-sm">
<thead>
<tr>
<th>股票名称</th>
<th>股票代码</th>
<th>核心逻辑</th>
<th>标签</th>
</tr>
</thead>
<tbody>
<template x-for="stock in stocks2" :key="stock.stock + stock.reason">
<tr>
<td x-text="stock.stock"></td>
<td>
<a x-show="stock.stock_code" :href="'https://valuefrontier.cn/company?scode=' + stock.stock_code" target="_blank" class="text-sky-400 hover:text-sky-300 transition" x-text="stock.stock_code"></a>
</td>
<td x-text="stock.reason" class="text-xs"></td>
<td>
<div class="badge badge-outline badge-accent text-xs" x-text="stock['其他标签']"></div>
</td>
</tr>
</template>
</tbody>
</table>
</div>
</section>
</main>
<!-- Footer -->
<footer class="text-center text-xs text-slate-500 py-6">
<p>北京价值前沿科技有限公司 AI投研agent“价小前投研” 进行投研呈现</p>
<p>本报告为AI合成数据投资需谨慎。</p>
</footer>
</div>
<script>
// ECharts instance
var chartDom = document.getElementById('growthChart');
var myChart = echarts.init(chartDom);
var option = {
tooltip: {
trigger: 'axis',
backgroundColor: 'rgba(15, 23, 42, 0.8)',
borderColor: 'rgba(56, 189, 248, 0.5)',
textStyle: { color: '#E0E0E0' }
},
grid: { top: '20%', right: '5%', bottom: '15%', left: '15%' },
xAxis: {
type: 'category',
data: ['2024 (预判)', '2024 (实际)', '2025 H1'],
axisLine: { lineStyle: { color: 'rgba(255, 255, 255, 0.3)' } },
axisLabel: { color: '#9ca3af' }
},
yAxis: {
type: 'value',
name: '增加值增速 (%)',
nameTextStyle: { color: '#9ca3af', fontSize: 10 },
axisLabel: { color: '#9ca3af' },
splitLine: { lineStyle: { color: 'rgba(255, 255, 255, 0.1)', type: 'dashed' } }
},
series: [{
data: [6.0, 8.9, 7.6],
type: 'bar',
barWidth: '40%',
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(56, 189, 248, 0.8)' },
{ offset: 1, color: 'rgba(29, 78, 216, 0.5)' }
]),
borderRadius: [4, 4, 0, 0]
},
label: { show: true, position: 'top', color: '#e5e7eb', formatter: '{c}%' }
}]
};
myChart.setOption(option);
window.addEventListener('resize', () => myChart.resize());
// Alpine.js data
document.addEventListener('alpine:init', () => {
Alpine.data('stockData', () => ({
stocks1: [
{"stock": "紫金矿业", "reason": "黄金白银-黄金", "其他标签": "黄金白银, 黄金", "stock_code": "601899"},
{"stock": "山东黄金", "reason": "黄金白银-黄金", "其他标签": "黄金白银, 黄金", "stock_code": "600547"},
{"stock": "洛阳钼业", "reason": "铜-铜矿", "其他标签": "铜, 铜矿", "stock_code": "603993"},
{"stock": "江西铜业", "reason": "铜-铜矿", "其他标签": "铜, 铜矿", "stock_code": "600362"},
{"stock": "中国铝业", "reason": "铝-铝矿", "其他标签": "铝, 铝矿", "stock_code": "601600"},
{"stock": "云铝股份", "reason": "铝-电解铝", "其他标签": "铝, 电解铝", "stock_code": "000807"},
{"stock": "神火股份", "reason": "铝-电解铝", "其他标签": "铝, 电解铝, 涨幅>10%", "stock_code": "000933"},
{"stock": "华友钴业", "reason": "小金属-钴", "其他标签": "小金属, 钴", "stock_code": "603799"},
{"stock": "北方铜业", "reason": "铜-铜矿", "其他标签": "铜, 铜矿, 涨幅>10%", "stock_code": "000737"},
{"stock": "飞南资源", "reason": "铜-铜矿(回收利用)", "其他标签": "铜, 铜矿, 回收利用, 涨幅>10%", "stock_code": "301500"},
{"stock": "怡球资源", "reason": "铝-再生铝", "其他标签": "铝, 再生铝", "stock_code": "601388"},
{"stock": "厦门钨业", "reason": "小金属-钨", "其他标签": "小金属, 钨", "stock_code": "600549"},
{"stock": "金钼股份", "reason": "小金属-钼", "其他标签": "小金属, 钼", "stock_code": "601958"},
{"stock": "锡业股份", "reason": "小金属-锡", "其他标签": "小金属, 锡", "stock_code": "000960"},
{"stock": "华钰矿业", "reason": "小金属-锑", "其他标签": "小金属, 锑", "stock_code": "601020"},
{"stock": "驰宏锌锗", "reason": "小金属-锗", "其他标签": "小金属, 锗", "stock_code": "600497"}
],
stocks2: [
{"stock": "华钰矿业", "reason": "前三季度锑精矿收入占营收10.99%。公司国内控制铅、锌、铜、锑、银资源储量超过300万金属吨收购塔铝金业50%股权可控锑资源量达到47万金属吨", "其他标签": "锑", "stock_code": "601020"},
{"stock": "湖南黄金", "reason": "锑产品产量为3.1124万吨今年计划生产3.6万吨,子公司中南锑钨有少量氧化锑出口销售", "其他标签": "锑", "stock_code": "002155"},
{"stock": "华锡有色", "reason": "公司高峰矿保有资源锑金属量18.69万吨", "其他标签": "锑", "stock_code": "600301"},
{"stock": "金瑞矿业", "reason": "大风山锶矿资源已探明保有储量约为1500万吨,目前在国内属大中型锶矿", "其他标签": "锶", "stock_code": "600714"},
{"stock": "云南锗业", "reason": "拥有完整产业链的锗行业上市公司,锗产品产销量全国第一", "其他标签": "锗", "stock_code": "002428"},
{"stock": "驰宏锌锗", "reason": "2024年前三季度公司完成锗产品含锗产量51.18吨", "其他标签": "锗", "stock_code": "600497"},
{"stock": "锡业股份", "reason": "截至2023年12月31日,公司铟金属保有资源储量4945吨", "其他标签": "铟", "stock_code": "000960"},
{"stock": "株冶集团", "reason": "目前公司的铟产品产能约60吨/年", "其他标签": "铟", "stock_code": "600961"},
{"stock": "高能环境", "reason": "全资子公司靖远高能可对铋进行分离和提取,提炼为精铋。目前是国内最大的精铋生产商", "其他标签": "铋", "stock_code": "603588"}
]
}));
});
</script>
</body>
</html>