641 lines
39 KiB
HTML
641 lines
39 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>
|
||
<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>
|
||
<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=Roboto+Mono:wght@300;400;500&display=swap" rel="stylesheet">
|
||
<style>
|
||
body {
|
||
font-family: 'Inter', sans-serif;
|
||
background-color: #0a0910;
|
||
background-image:
|
||
radial-gradient(ellipse 200% 150% at 20% 0%, rgba(52, 21, 153, 0.3) 0%, transparent 50%),
|
||
radial-gradient(ellipse 200% 150% at 80% 100%, rgba(21, 128, 153, 0.3) 0%, transparent 50%);
|
||
background-attachment: fixed;
|
||
color: #e0e0e0;
|
||
}
|
||
.glass {
|
||
background: rgba(18, 18, 28, 0.6);
|
||
backdrop-filter: blur(20px);
|
||
-webkit-backdrop-filter: blur(20px);
|
||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
transition: all 0.3s ease;
|
||
}
|
||
.glass:hover {
|
||
background: rgba(22, 22, 32, 0.7);
|
||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||
box-shadow: 0 0 20px rgba(0, 255, 255, 0.1);
|
||
}
|
||
.bento-grid {
|
||
display: grid;
|
||
gap: 1rem;
|
||
grid-template-columns: repeat(12, 1fr);
|
||
}
|
||
.bento-item {
|
||
border-radius: 1.5rem;
|
||
padding: 1.5rem;
|
||
}
|
||
h1, h2, h3 {
|
||
font-family: 'Inter', sans-serif;
|
||
font-weight: 700;
|
||
}
|
||
.glow-text {
|
||
text-shadow: 0 0 8px rgba(0, 255, 255, 0.5);
|
||
}
|
||
.mono-font {
|
||
font-family: 'Roboto Mono', monospace;
|
||
}
|
||
.turrell-light {
|
||
position: absolute;
|
||
width: 500px;
|
||
height: 500px;
|
||
border-radius: 50%;
|
||
filter: blur(150px);
|
||
opacity: 0.2;
|
||
pointer-events: none;
|
||
}
|
||
.table thead th {
|
||
background-color: rgba(0, 255, 255, 0.05);
|
||
color: #00ffff;
|
||
border-bottom: 1px solid rgba(0, 255, 255, 0.3);
|
||
}
|
||
.table tbody tr {
|
||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||
}
|
||
.table tbody tr:hover {
|
||
background-color: rgba(0, 255, 255, 0.03);
|
||
}
|
||
.timeline {
|
||
position: relative;
|
||
padding-left: 2rem;
|
||
}
|
||
.timeline::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
bottom: 0;
|
||
width: 2px;
|
||
background: linear-gradient(to bottom, rgba(0, 255, 255, 0) 0%, rgba(0, 255, 255, 0.5) 50%, rgba(0, 255, 255, 0) 100%);
|
||
}
|
||
.timeline-item::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: -0.4rem;
|
||
top: 0.5rem;
|
||
width: 0.8rem;
|
||
height: 0.8rem;
|
||
border-radius: 50%;
|
||
background-color: #00ffff;
|
||
border: 2px solid #0a0910;
|
||
box-shadow: 0 0 10px rgba(0, 255, 255, 0.7);
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="min-h-screen">
|
||
<!-- Background Lights -->
|
||
<div class="turrell-light" style="top: -10%; left: -15%; background: #341599;"></div>
|
||
<div class="turrell-light" style="bottom: -10%; right: -15%; background: #158099;"></div>
|
||
|
||
<div class="container mx-auto p-4 md:p-8">
|
||
<header class="text-center mb-12">
|
||
<h1 class="text-4xl md:text-6xl font-bold mb-4 glow-text bg-clip-text text-transparent bg-gradient-to-r from-cyan-300 to-purple-400">
|
||
锂电池产业链 深度研究报告
|
||
</h1>
|
||
<p class="text-sm text-gray-400 mono-font">
|
||
北京价值前沿科技有限公司 AI投研agent：“价小前投研” | 本报告为AI合成数据，投资需谨慎。
|
||
</p>
|
||
</header>
|
||
|
||
<main class="space-y-8">
|
||
<!-- Bento Grid Start -->
|
||
<div class="bento-grid">
|
||
|
||
<!-- Core Insight -->
|
||
<section class="bento-item glass col-span-12 md:col-span-8 row-span-2">
|
||
<h2 class="text-2xl font-bold mb-4 text-cyan-300">核心观点摘要</h2>
|
||
<p class="text-gray-300 leading-relaxed">
|
||
锂电池产业链正从剧烈的周期性波动中走出，进入一个由<strong class="text-cyan-400">供需格局优化</strong>和<strong class="text-cyan-400">技术创新驱动</strong>的结构性增长新阶段。其核心驱动力已从单纯的产能扩张，转向<strong class="text-purple-400">储能需求爆发</strong>与<strong class="text-purple-400">全球电动化深化</strong>的双轮驱动。未来，产业链的投资价值将更多体现在具备全球竞争力的龙头企业、掌握下一代核心技术的创新者以及在激烈竞争中成功实现成本控制的细分环节领导者。行业已确认度过周期性底部，<strong class="text-green-400">正式进入由基本面驱动的结构性牛市。</strong>
|
||
</p>
|
||
<div class="divider before:bg-white/10 after:bg-white/10 my-6"></div>
|
||
<h3 class="text-lg font-semibold mb-3 text-cyan-300">最具投资价值的方向</h3>
|
||
<ul class="list-disc list-inside space-y-2 text-gray-400">
|
||
<li><strong class="text-gray-200">全球化龙头:</strong> 以宁德时代为代表，技术与全球化确定性最高。</li>
|
||
<li><strong class="text-gray-200">储能产业链:</strong> 未来增速最快的应用领域，关注深度绑定海外客户的企业。</li>
|
||
<li><strong class="text-gray-200">技术迭代受益者:</strong> 硅碳负极、固态电池材料等领域具备高增长潜力。</li>
|
||
<li><strong class="text-gray-200">格局优化辅材:</strong> 结构件等环节竞争格局稳定，盈利可预测性强。</li>
|
||
</ul>
|
||
</section>
|
||
|
||
<!-- Key Data Points -->
|
||
<section class="bento-item glass col-span-12 md:col-span-4">
|
||
<h2 class="text-2xl font-bold mb-4 text-cyan-300">行业关键数据</h2>
|
||
<div class="space-y-4">
|
||
<div class="flex justify-between items-center p-3 bg-white/5 rounded-lg">
|
||
<span class="text-gray-300">2024年总产量</span>
|
||
<span class="mono-font text-xl font-bold text-green-400">1170 GWh (+24%)</span>
|
||
</div>
|
||
<div class="flex justify-between items-center p-3 bg-white/5 rounded-lg">
|
||
<span class="text-gray-300">储能电池产量增速</span>
|
||
<span class="mono-font text-xl font-bold text-green-400">> 40%</span>
|
||
</div>
|
||
<div class="flex justify-between items-center p-3 bg-white/5 rounded-lg">
|
||
<span class="text-gray-300">LFP动力电池渗透率(9月)</span>
|
||
<span class="mono-font text-xl font-bold text-cyan-400">75.8%</span>
|
||
</div>
|
||
<div class="flex justify-between items-center p-3 bg-white/5 rounded-lg">
|
||
<span class="text-gray-300">7月出口金额</span>
|
||
<span class="mono-font text-xl font-bold text-green-400">381亿 (+6% YoY)</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- LFP Penetration Gauge -->
|
||
<section class="bento-item glass col-span-12 md:col-span-4">
|
||
<div id="lfp-gauge" class="w-full h-64"></div>
|
||
</section>
|
||
|
||
<!-- Timeline of Key Events -->
|
||
<section class="bento-item glass col-span-12 md:col-span-12">
|
||
<h2 class="text-2xl font-bold mb-6 text-cyan-300">周期演进：从阵痛到复苏</h2>
|
||
<div class="timeline">
|
||
<div class="relative mb-8 timeline-item">
|
||
<h3 class="font-semibold text-purple-400">2023年：行业阵痛期</h3>
|
||
<p class="text-sm text-gray-400">碳酸锂价格全年大幅下跌超46%，全产业链盈利承压。部分材料环节Q4出现亏损，行业价格战激烈。</p>
|
||
</div>
|
||
<div class="relative mb-8 timeline-item">
|
||
<h3 class="font-semibold text-orange-400">2024年Q1-Q3：触底与分化</h3>
|
||
<p class="text-sm text-gray-400">Q1被视为价格与盈利底部。龙头企业盈利企稳，隔膜等环节龙头开始主动收缩产能规划。7月出口金额年内首次转正，验证量的景气度。</p>
|
||
</div>
|
||
<div class="relative timeline-item">
|
||
<h3 class="font-semibold text-green-400">2024年Q4至今：复苏预期升温</h3>
|
||
<p class="text-sm text-gray-400">市场情绪显著回暖，板块指数大涨。产业链传来涨价消息，供需两旺格局显现。政策端发力打通运输堵点，保障供应链安全。</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Market Logic & Expectation Gaps -->
|
||
<section class="bento-item glass col-span-12 md:col-span-6">
|
||
<h2 class="text-2xl font-bold mb-4 text-cyan-300">核心逻辑与市场认知</h2>
|
||
<ul class="space-y-3 text-gray-300">
|
||
<li class="flex items-start">
|
||
<svg class="w-5 h-5 mr-2 mt-1 text-cyan-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
|
||
<span><strong class="text-white">需求结构变迁：</strong>储能成为与动力并驾齐驱的核心引擎，打开第二增长曲线。</span>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<svg class="w-5 h-5 mr-2 mt-1 text-cyan-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
|
||
<span><strong class="text-white">供给侧优化：</strong>行业从无序扩张走向理性，头部企业主动收缩产能规划，改善盈利预期。</span>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<svg class="w-5 h-5 mr-2 mt-1 text-cyan-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path></svg>
|
||
<span><strong class="text-white">技术路线确定性：</strong>磷酸铁锂(LFP)确立全球主流地位，同时固态电池、硅碳负极等前沿技术加速产业化。</span>
|
||
</li>
|
||
</ul>
|
||
</section>
|
||
<section class="bento-item glass col-span-12 md:col-span-6">
|
||
<h2 class="text-2xl font-bold mb-4 text-orange-400">预期差分析 (风险与机遇)</h2>
|
||
<ul class="space-y-3 text-gray-300">
|
||
<li class="flex items-start">
|
||
<svg class="w-5 h-5 mr-2 mt-1 text-orange-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
|
||
<span><strong class="text-white">宏大叙事 vs K型分化：</strong>行业回暖可能掩盖投资标的的盈利能力急剧分化，龙头与二三线企业差距拉大。</span>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<svg class="w-5 h-5 mr-2 mt-1 text-orange-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 4a2 2 0 114 0v1a1 1 0 001 1h3a1 1 0 011 1v3a1 1 0 01-1 1h-1a2 2 0 100 4h1a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1v-1a2 2 0 10-4 0v1a1 1 0 01-1 1H7a1 1 0 01-1-1v-3a1 1 0 00-1-1H4a2 2 0 110-4h1a1 1 0 001-1V7a1 1 0 011-1h3a1 1 0 001-1V4z"></path></svg>
|
||
<span><strong class="text-white">技术突破 vs 商业化落地：</strong>固态电池商业化预计在2026-2028年，当前成本是液态的2-3倍，存在巨大的时间与成本预期差。</span>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<svg class="w-5 h-5 mr-2 mt-1 text-orange-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
|
||
<span><strong class="text-white">价格上涨 vs 利润归属：</strong>涨价利润可能更多被供给格局好的中游材料环节截留，而非平均分配。</span>
|
||
</li>
|
||
</ul>
|
||
</section>
|
||
|
||
<!-- Charts Section -->
|
||
<section class="bento-item glass col-span-12 md:col-span-7">
|
||
<h2 class="text-2xl font-bold mb-4 text-cyan-300">全球动力电池市场格局 (2023)</h2>
|
||
<div id="market-share-pie" class="w-full h-96"></div>
|
||
</section>
|
||
<section class="bento-item glass col-span-12 md:col-span-5">
|
||
<h2 class="text-2xl font-bold mb-4 text-cyan-300">关键材料周度价格波动</h2>
|
||
<p class="text-xs text-gray-500 mb-2">数据来源：新闻数据(11月第5周)</p>
|
||
<div id="price-change-bar" class="w-full h-96"></div>
|
||
</section>
|
||
|
||
<!-- Catalysts and Development Path -->
|
||
<section class="bento-item glass col-span-12">
|
||
<h2 class="text-2xl font-bold mb-6 text-cyan-300">关键催化剂与未来发展路径</h2>
|
||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||
<!-- Near-term Catalysts -->
|
||
<div class="bg-white/5 p-4 rounded-xl">
|
||
<h3 class="font-semibold text-purple-400 text-lg mb-2">近期催化剂 (3-6个月)</h3>
|
||
<ul class="list-disc list-inside space-y-2 text-sm text-gray-400">
|
||
<li>2025年材料加工费谈判结果</li>
|
||
<li>欧盟《新电池法》关键节点临近</li>
|
||
<li>AI手机等下一代消费电子发布</li>
|
||
</ul>
|
||
</div>
|
||
<!-- Development Path Stage 1 -->
|
||
<div class="bg-white/5 p-4 rounded-xl">
|
||
<h3 class="font-semibold text-cyan-400 text-lg mb-2">第一阶段 (当前-2026)</h3>
|
||
<p class="text-sm text-gray-400">LFP全球化与技术微创新。中国企业从“B角”转向“主供A角”，快充、CTP、大圆柱等技术持续优化。</p>
|
||
</div>
|
||
<!-- Development Path Stage 2 -->
|
||
<div class="bg-white/5 p-4 rounded-xl">
|
||
<h3 class="font-semibold text-cyan-400 text-lg mb-2">第二阶段 (2026-2028)</h3>
|
||
<p class="text-sm text-gray-400">半固态/固态电池导入期。高端车型小批量应用，产业链重塑，固态电解质、硅碳负极成为主流。</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
</div>
|
||
<!-- Bento Grid End -->
|
||
|
||
<!-- Stock Table -->
|
||
<section x-data="{ tab: 'all' }" class="mt-12">
|
||
<h2 class="text-3xl font-bold text-center mb-8 glow-text bg-clip-text text-transparent bg-gradient-to-r from-cyan-300 to-purple-400">产业链核心标的</h2>
|
||
|
||
<div class="tabs tabs-boxed justify-center mb-6 bg-white/10">
|
||
<a class="tab" :class="{ 'tab-active': tab === 'all' }" @click.prevent="tab = 'all'">全景图</a>
|
||
<a class="tab" :class="{ 'tab-active': tab === 'upstream' }" @click.prevent="tab = 'upstream'">上游资源</a>
|
||
<a class="tab" :class="{ 'tab-active': tab === 'midstream' }" @click.prevent="tab = 'midstream'">中游材料与制造</a>
|
||
<a class="tab" :class="{ 'tab-active': tab === 'equipment' }" @click.prevent="tab = 'equipment'">核心设备</a>
|
||
</div>
|
||
|
||
<div class="overflow-x-auto glass rounded-2xl p-4">
|
||
<table class="table table-sm">
|
||
<thead>
|
||
<tr>
|
||
<th class="w-1/4">公司名称</th>
|
||
<th class="w-1/4">产业链环节</th>
|
||
<th class="w-1/2">核心逻辑 / 标签</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="stock-table-body">
|
||
<!-- JS will populate this -->
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
</div>
|
||
|
||
<script>
|
||
document.addEventListener('alpine:init', () => {
|
||
Alpine.data('stockData', () => ({
|
||
stocks: [],
|
||
filteredStocks: [],
|
||
tab: 'all',
|
||
|
||
init() {
|
||
// Raw stock data from provided JSON
|
||
const rawData = [
|
||
{"stock": "宁德时代", "reason": "动力电池", "其他标签": "装车量占比2023: 43.1%", "stock_code": "300750"},
|
||
{"stock": "比亚迪", "reason": "动力电池", "其他标签": "装车量占比2023: 27.2%", "stock_code": "002594"},
|
||
{"stock": "中创新航", "reason": "动力电池", "其他标签": "装车量占比2023: 8.5%"},
|
||
{"stock": "亿纬锂能", "reason": "动力电池", "其他标签": "装车量占比2023: 4.5%", "stock_code": "300014"},
|
||
{"stock": "国轩高科", "reason": "动力电池", "其他标签": "装车量占比2023: 4.1%", "stock_code": "002074"},
|
||
{"stock": "蜂巢能源", "reason": "动力电池", "其他标签": "装车量占比2023: 2.2%", "stock_code": "K1313"},
|
||
{"stock": "LG新能源", "reason": "动力电池", "其他标签": "装车量占比2023: 2.2%"},
|
||
{"stock": "欣旺达", "reason": "动力电池", "其他标签": "装车量占比2023: 2.1%", "stock_code": "300207"},
|
||
{"stock": "孚能科技", "reason": "动力电池", "其他标签": "装车量占比2023: 1.53%", "stock_code": "688567"},
|
||
{"stock": "瑞浦兰钧", "reason": "动力电池", "其他标签": "装车量占比2023: 1.3%"},
|
||
{"stock": "多氟多", "reason": "动力电池", "其他标签": "装车量占比2023: 0.55%", "stock_code": "002407"},
|
||
{"stock": "赣锋锂业", "reason": "锂矿-锂辉石提锂", "stock_code": "002460"},
|
||
{"stock": "天齐锂业", "reason": "锂矿-锂辉石提锂", "stock_code": "002466"},
|
||
{"stock": "天华新能", "reason": "锂矿-锂辉石提锂", "stock_code": "300390"},
|
||
{"stock": "融捷股份", "reason": "锂矿-锂辉石提锂", "stock_code": "002192"},
|
||
{"stock": "盛新锂能", "reason": "锂矿-锂辉石提锂", "stock_code": "002240"},
|
||
{"stock": "雅化集团", "reason": "锂矿-锂辉石提锂", "stock_code": "002497"},
|
||
{"stock": "中矿资源", "reason": "锂矿-锂辉石提锂", "stock_code": "002738"},
|
||
{"stock": "川能动力", "reason": "锂矿-锂辉石提锂", "stock_code": "000155"},
|
||
{"stock": "西藏矿业", "reason": "锂矿-盐湖提锂", "stock_code": "000762"},
|
||
{"stock": "藏格矿业", "reason": "锂矿-盐湖提锂", "stock_code": "000408"},
|
||
{"stock": "盐湖股份", "reason": "锂矿-盐湖提锂", "stock_code": "000792"},
|
||
{"stock": "西藏城投", "reason": "锂矿-盐湖提锂", "stock_code": "600773"},
|
||
{"stock": "西藏珠峰", "reason": "锂矿-盐湖提锂", "stock_code": "600338"},
|
||
{"stock": "科达制造", "reason": "锂矿-盐湖提锂", "stock_code": "600499"},
|
||
{"stock": "久吾高科", "reason": "锂矿-盐湖提锂", "stock_code": "300631"},
|
||
{"stock": "蓝晓科技", "reason": "锂矿-盐湖提锂", "stock_code": "300487"},
|
||
{"stock": "争光股份", "reason": "锂矿-盐湖提锂", "stock_code": "301092"},
|
||
{"stock": "唯赛勃", "reason": "锂矿-盐湖提锂", "stock_code": "688718"},
|
||
{"stock": "江特电机", "reason": "锂矿-云母提锂", "stock_code": "002176"},
|
||
{"stock": "永兴材料", "reason": "锂矿-云母提锂", "stock_code": "002756"},
|
||
{"stock": "威领股份", "reason": "锂矿-云母提锂", "stock_code": "002667"},
|
||
{"stock": "国轩高科", "reason": "锂矿-云母提锂", "stock_code": "002074"},
|
||
{"stock": "天赐材料", "reason": "正极材料-磷酸铁", "stock_code": "002709"},
|
||
{"stock": "湘潭电化", "reason": "正极材料-磷酸铁", "stock_code": "002125"},
|
||
{"stock": "万润新能", "reason": "正极材料-磷酸铁", "stock_code": "688275"},
|
||
{"stock": "龙佰集团", "reason": "正极材料-磷酸铁", "stock_code": "002601"},
|
||
{"stock": "云天化", "reason": "正极材料-磷酸铁", "stock_code": "600096"},
|
||
{"stock": "湖南裕能", "reason": "正极材料-磷酸铁锂", "其他标签": "市占率2023.10: 31%", "stock_code": "301358"},
|
||
{"stock": "德方纳米", "reason": "正极材料-磷酸铁锂", "其他标签": "市占率2023.10: 14.3%", "stock_code": "300769"},
|
||
{"stock": "万润新能", "reason": "正极材料-磷酸铁锂", "其他标签": "市占率2023.10: 9.4%", "stock_code": "688275"},
|
||
{"stock": "龙蟠科技", "reason": "正极材料-磷酸铁锂", "其他标签": "市占率2023.10: 7.1%", "stock_code": "603906"},
|
||
{"stock": "国轩高科", "reason": "正极材料-磷酸铁锂", "其他标签": "市占率2023.10: 4.7%", "stock_code": "002074"},
|
||
{"stock": "安达科技", "reason": "正极材料-磷酸铁锂", "其他标签": "市占率2023.10: 4% (北交所)", "stock_code": "920809"},
|
||
{"stock": "富临精工", "reason": "正极材料-磷酸铁锂", "其他标签": "市占率2023.10: 2.8%", "stock_code": "300432"},
|
||
{"stock": "丰元股份", "reason": "正极材料-磷酸铁锂", "stock_code": "002805"},
|
||
{"stock": "中伟股份", "reason": "正极材料-三元前驱", "其他标签": "市占率2022: 27%", "stock_code": "300919"},
|
||
{"stock": "华友钴业", "reason": "正极材料-三元前驱", "其他标签": "市占率2022: 12%", "stock_code": "603799"},
|
||
{"stock": "格林美", "reason": "正极材料-三元前驱", "其他标签": "市占率2022: 15%", "stock_code": "002340"},
|
||
{"stock": "容百科技", "reason": "正极材料-三元材料", "其他标签": "市占率2023.10: 17.3%", "stock_code": "688005"},
|
||
{"stock": "当升科技", "reason": "正极材料-三元材料", "其他标签": "市占率2023.10: 10.7%", "stock_code": "300073"},
|
||
{"stock": "长远锂科", "reason": "正极材料-三元材料", "其他标签": "市占率2023.10: 10%"},
|
||
{"stock": "贝特瑞", "reason": "正极材料-三元材料", "其他标签": "市占率2023.10: 7.4%", "stock_code": "920185"},
|
||
{"stock": "丰元股份", "reason": "正极材料-三元材料", "stock_code": "002805"},
|
||
{"stock": "厦门钨业", "reason": "正极材料-钴酸锂", "其他标签": "市占率2022: 39%", "stock_code": "600549"},
|
||
{"stock": "盟固利", "reason": "正极材料-钴酸锂", "其他标签": "市占率2022: 7%", "stock_code": "301487"},
|
||
{"stock": "科恒股份", "reason": "正极材料-钴酸锂", "其他标签": "市占率2022: 6%", "stock_code": "300340"},
|
||
{"stock": "巨化股份", "reason": "负极材料-PVDF", "stock_code": "600160"},
|
||
{"stock": "联创股份", "reason": "负极材料-PVDF"},
|
||
{"stock": "璞泰来", "reason": "负极材料-PVDF", "stock_code": "603659"},
|
||
{"stock": "贝特瑞", "reason": "负极材料", "其他标签": "市占率2023: 22.7%", "stock_code": "920185"},
|
||
{"stock": "杉杉股份", "reason": "负极材料", "其他标签": "市占率2023: 16.8%", "stock_code": "600884"},
|
||
{"stock": "中科电气", "reason": "负极材料", "stock_code": "300035"},
|
||
{"stock": "璞泰来", "reason": "负极材料", "stock_code": "603659"},
|
||
{"stock": "翔丰华", "reason": "负极材料", "stock_code": "300890"},
|
||
{"stock": "尚太科技", "reason": "负极材料", "stock_code": "001301"},
|
||
{"stock": "信德新材", "reason": "负极材料-包覆材料", "stock_code": "301349"},
|
||
{"stock": "天赐材料", "reason": "电解液-六氟磷酸锂", "其他标签": "2023年市占率: 36%", "stock_code": "002709"},
|
||
{"stock": "多氟多", "reason": "电解液-六氟磷酸锂", "其他标签": "2023年市占率: 16%", "stock_code": "002407"},
|
||
{"stock": "天际股份", "reason": "电解液-六氟磷酸锂", "stock_code": "002759"},
|
||
{"stock": "永太科技", "reason": "电解液-六氟磷酸锂", "stock_code": "002326"},
|
||
{"stock": "多氟多", "reason": "电解液-双氟磺酰亚胺锂盐", "stock_code": "002407"},
|
||
{"stock": "天赐材料", "reason": "电解液-双氟磺酰亚胺锂盐", "stock_code": "002709"},
|
||
{"stock": "新宙邦", "reason": "电解液-双氟磺酰亚胺锂盐", "stock_code": "300037"},
|
||
{"stock": "永太科技", "reason": "电解液-双氟磺酰亚胺锂盐", "stock_code": "002326"},
|
||
{"stock": "康鹏科技", "reason": "电解液-双氟磺酰亚胺锂盐", "stock_code": "688602"},
|
||
{"stock": "中欣氟材", "reason": "电解液-双氟磺酰亚胺锂盐", "stock_code": "002915"},
|
||
{"stock": "海科新源", "reason": "电解液-电解液溶剂", "stock_code": "301292"},
|
||
{"stock": "丰山集团", "reason": "电解液-电解液溶剂", "stock_code": "603810"},
|
||
{"stock": "新宙邦", "reason": "电解液-电解液溶剂", "stock_code": "300037"},
|
||
{"stock": "胜华新材", "reason": "电解液-电解液溶剂"},
|
||
{"stock": "奥克股份", "reason": "电解液-电解液溶剂", "stock_code": "300082"},
|
||
{"stock": "华盛锂电", "reason": "电解液-电解液添加剂", "stock_code": "688353"},
|
||
{"stock": "永太科技", "reason": "电解液-电解液添加剂", "stock_code": "002326"},
|
||
{"stock": "新宙邦", "reason": "电解液-电解液添加剂", "stock_code": "300037"},
|
||
{"stock": "恩捷股份", "reason": "隔膜", "其他标签": "2022市占率: 38%", "stock_code": "002812"},
|
||
{"stock": "星源材质", "reason": "隔膜", "其他标签": "2022市占率: 12.9%", "stock_code": "300568"},
|
||
{"stock": "中材科技", "reason": "隔膜", "其他标签": "2022市占率: 8.5%", "stock_code": "002080"},
|
||
{"stock": "沧州明珠", "reason": "隔膜", "stock_code": "002108"},
|
||
{"stock": "璞泰来", "reason": "隔膜", "stock_code": "603659"},
|
||
{"stock": "万顺新材", "reason": "铝箔", "stock_code": "300057"},
|
||
{"stock": "鼎盛新材", "reason": "铝箔"},
|
||
{"stock": "神火股份", "reason": "铝箔", "stock_code": "000933"},
|
||
{"stock": "云铝股份", "reason": "铝箔", "stock_code": "000807"},
|
||
{"stock": "东阳光", "reason": "铝箔", "stock_code": "600673"},
|
||
{"stock": "南山铝业", "reason": "铝箔", "stock_code": "600219"},
|
||
{"stock": "诺德股份", "reason": "铜箔", "stock_code": "600110"},
|
||
{"stock": "嘉元科技", "reason": "铜箔", "stock_code": "688388"},
|
||
{"stock": "中一科技", "reason": "铜箔", "stock_code": "301150"},
|
||
{"stock": "铜冠铜箔", "reason": "铜箔", "stock_code": "301217"},
|
||
{"stock": "超华科技", "reason": "铜箔"},
|
||
{"stock": "科达利", "reason": "结构件", "其他标签": "龙头", "stock_code": "002850"},
|
||
{"stock": "震裕科技", "reason": "结构件", "stock_code": "300953"},
|
||
{"stock": "星光股份", "reason": "设备"},
|
||
{"stock": "震裕科技", "reason": "设备", "stock_code": "300953"},
|
||
{"stock": "璞泰来", "reason": "设备", "stock_code": "603659"},
|
||
{"stock": "先导智能", "reason": "设备", "stock_code": "300450"},
|
||
{"stock": "赢合科技", "reason": "设备", "stock_code": "300457"},
|
||
{"stock": "科恒股份", "reason": "设备", "stock_code": "300340"},
|
||
{"stock": "东威科技", "reason": "设备", "stock_code": "688700"},
|
||
{"stock": "骄成超声", "reason": "设备", "stock_code": "688392"},
|
||
{"stock": "道森股份", "reason": "设备"},
|
||
{"stock": "联赢激光", "reason": "设备", "stock_code": "688518"},
|
||
{"stock": "德新科技", "reason": "设备", "stock_code": "603032"},
|
||
{"stock": "利元亨", "reason": "设备", "stock_code": "688499"},
|
||
{"stock": "海目星", "reason": "设备", "stock_code": "688559"}
|
||
];
|
||
|
||
this.stocks = rawData.map(stock => {
|
||
let category = 'midstream'; // Default
|
||
const reason = stock.reason.toLowerCase();
|
||
if (reason.includes('锂矿')) {
|
||
category = 'upstream';
|
||
} else if (reason.includes('设备')) {
|
||
category = 'equipment';
|
||
}
|
||
return { ...stock, category };
|
||
});
|
||
|
||
this.$watch('tab', (newTab) => {
|
||
this.renderTable(newTab);
|
||
});
|
||
|
||
this.renderTable(this.tab);
|
||
},
|
||
|
||
renderTable(tab) {
|
||
const tableBody = document.getElementById('stock-table-body');
|
||
tableBody.innerHTML = '';
|
||
|
||
const stocksToRender = tab === 'all'
|
||
? this.stocks
|
||
: this.stocks.filter(s => s.category === tab);
|
||
|
||
stocksToRender.forEach(stock => {
|
||
const row = document.createElement('tr');
|
||
const stockName = stock.stock_code
|
||
? `<a href="https://valuefrontier.cn/company?scode=${stock.stock_code}" target="_blank" class="text-cyan-400 hover:text-cyan-200 hover:underline">${stock.stock} ${stock.stock_code ? `(${stock.stock_code})` : ''}</a>`
|
||
: `${stock.stock} ${stock.stock_code ? `(${stock.stock_code})` : ''}`;
|
||
|
||
row.innerHTML = `
|
||
<td class="font-semibold">${stockName}</td>
|
||
<td>${stock.reason}</td>
|
||
<td>${stock['其他标签'] || 'N/A'}</td>
|
||
`;
|
||
tableBody.appendChild(row);
|
||
});
|
||
}
|
||
}));
|
||
});
|
||
</script>
|
||
|
||
|
||
<script type="text/javascript">
|
||
// Initialize ECharts instances
|
||
var lfpGauge = echarts.init(document.getElementById('lfp-gauge'));
|
||
var marketSharePie = echarts.init(document.getElementById('market-share-pie'));
|
||
var priceChangeBar = echarts.init(document.getElementById('price-change-bar'));
|
||
|
||
// LFP Gauge Chart Option
|
||
var lfpGaugeOption = {
|
||
series: [{
|
||
type: 'gauge',
|
||
center: ['50%', '60%'],
|
||
startAngle: 200,
|
||
endAngle: -20,
|
||
min: 0,
|
||
max: 100,
|
||
splitNumber: 10,
|
||
itemStyle: {
|
||
color: '#00ffff',
|
||
shadowColor: 'rgba(0, 255, 255, 0.45)',
|
||
shadowBlur: 10,
|
||
shadowOffsetX: 2,
|
||
shadowOffsetY: 2
|
||
},
|
||
progress: {
|
||
show: true,
|
||
roundCap: true,
|
||
width: 18
|
||
},
|
||
pointer: {
|
||
icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.4038,616.194078 2092.44859,617.312956 L2096.346,717.352 L2096.346,717.352 L2092.73926,728.70621 C2092.4038,729.589246 2091.48372,730.13499 2090.36389,730.13499 L2090.36389,730.13499 C2089.24407,730.13499 2088.32398,729.589246 2087.98852,728.70621 L2084.38179,717.352 L2084.38179,717.352 L2088.2792,617.312956 C2088.32398,616.194078 2089.24407,615.30999 2090.36389,615.30999 Z',
|
||
length: '75%',
|
||
width: 16,
|
||
offsetCenter: [0, '5%']
|
||
},
|
||
axisLine: {
|
||
roundCap: true,
|
||
lineStyle: {
|
||
width: 18,
|
||
color: [[1, new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||
{ offset: 0, color: '#9158F1' },
|
||
{ offset: 0.5, color: '#3272F4' },
|
||
{ offset: 1, color: '#00ffff' }
|
||
])]]
|
||
}
|
||
},
|
||
axisTick: { show: false },
|
||
splitLine: { show: false },
|
||
axisLabel: { show: false },
|
||
anchor: { show: false },
|
||
title: {
|
||
show: true,
|
||
offsetCenter: [0, '20%'],
|
||
fontSize: 16,
|
||
color: '#ccc'
|
||
},
|
||
detail: {
|
||
valueAnimation: true,
|
||
fontSize: 40,
|
||
offsetCenter: [0, '-10%'],
|
||
formatter: '{value}%',
|
||
color: '#fff',
|
||
fontFamily: 'Roboto Mono'
|
||
},
|
||
data: [{
|
||
value: 75.8,
|
||
name: 'LFP动力电池渗透率'
|
||
}]
|
||
}]
|
||
};
|
||
|
||
// Market Share Pie Chart Option
|
||
var marketSharePieOption = {
|
||
tooltip: {
|
||
trigger: 'item',
|
||
formatter: '{b} : {c}%'
|
||
},
|
||
legend: {
|
||
orient: 'vertical',
|
||
left: 'left',
|
||
textStyle: { color: '#ccc' }
|
||
},
|
||
series: [{
|
||
name: '市场份额',
|
||
type: 'pie',
|
||
radius: ['40%', '70%'],
|
||
avoidLabelOverlap: false,
|
||
itemStyle: {
|
||
borderRadius: 10,
|
||
borderColor: '#0a0910',
|
||
borderWidth: 2
|
||
},
|
||
label: {
|
||
show: false,
|
||
position: 'center'
|
||
},
|
||
emphasis: {
|
||
label: {
|
||
show: true,
|
||
fontSize: '20',
|
||
fontWeight: 'bold',
|
||
color: '#fff',
|
||
formatter: '{b}\n{d}%'
|
||
}
|
||
},
|
||
labelLine: { show: false },
|
||
data: [
|
||
{ value: 43.1, name: '宁德时代' },
|
||
{ value: 27.2, name: '比亚迪' },
|
||
{ value: 8.5, name: '中创新航' },
|
||
{ value: 4.5, name: '亿纬锂能' },
|
||
{ value: 4.1, name: '国轩高科' },
|
||
{ value: 12.6, name: '其他' } // Sum of others
|
||
],
|
||
color: ['#00ffff', '#3272F4', '#55CFDE', '#9158F1', '#E154A8', '#666']
|
||
}]
|
||
};
|
||
|
||
// Price Change Bar Chart Option
|
||
var priceChangeBarOption = {
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: { type: 'shadow' }
|
||
},
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '3%',
|
||
containLabel: true
|
||
},
|
||
xAxis: {
|
||
type: 'value',
|
||
boundaryGap: [0, 0.01],
|
||
axisLine: { lineStyle: { color: 'rgba(255,255,255,0.3)' } },
|
||
splitLine: { lineStyle: { color: 'rgba(255,255,255,0.1)' } },
|
||
axisLabel: { formatter: '{value}%' }
|
||
},
|
||
yAxis: {
|
||
type: 'category',
|
||
data: ['碳酸锂', '电解液(LFP)', 'PVDF(粉料)', 'EC', 'DMC', 'EMC'],
|
||
axisLine: { lineStyle: { color: 'rgba(255,255,255,0.3)' } },
|
||
axisLabel: {
|
||
color: '#ccc',
|
||
interval: 0
|
||
}
|
||
},
|
||
series: [{
|
||
name: '周度涨跌幅',
|
||
type: 'bar',
|
||
data: [
|
||
{ value: -4.59, itemStyle: { color: '#ff4d4f' } },
|
||
{ value: 3.70, itemStyle: { color: '#00ffff' } },
|
||
{ value: 26.32, itemStyle: { color: '#00ff87' } },
|
||
{ value: 13.46, itemStyle: { color: '#00ff87' } },
|
||
{ value: 8.11, itemStyle: { color: '#00ff87' } },
|
||
{ value: 3.87, itemStyle: { color: '#00ffff' } }
|
||
],
|
||
label: {
|
||
show: true,
|
||
position: 'right',
|
||
formatter: '{c}%',
|
||
color: '#fff'
|
||
}
|
||
}]
|
||
};
|
||
|
||
lfpGauge.setOption(lfpGaugeOption);
|
||
marketSharePie.setOption(marketSharePieOption);
|
||
priceChangeBar.setOption(priceChangeBarOption);
|
||
|
||
window.addEventListener('resize', function () {
|
||
lfpGauge.resize();
|
||
marketSharePie.resize();
|
||
priceChangeBar.resize();
|
||
});
|
||
</script>
|
||
|
||
|
||
</body>
|
||
</html> |