Files
vf_react/public/htmls/固态电池产业链.html
2025-12-05 13:29:18 +08:00

599 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="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=Orbitron:wght@400;500;700&display=swap" rel="stylesheet">
<style>
:root {
--glow-color-1: rgba(0, 191, 255, 0.3); /* DeepSkyBlue */
--glow-color-2: rgba(138, 43, 226, 0.3); /* BlueViolet */
--glow-color-3: rgba(255, 20, 147, 0.2); /* DeepPink */
}
body {
font-family: 'Inter', sans-serif;
background-color: #020011;
background-image:
radial-gradient(at 20% 20%, hsla(212, 100%, 50%, 0.1) 0px, transparent 50%),
radial-gradient(at 80% 20%, hsla(289, 100%, 50%, 0.1) 0px, transparent 50%),
radial-gradient(at 50% 80%, hsla(330, 100%, 50%, 0.1) 0px, transparent 50%);
color: #e0e0e0;
overflow-x: hidden;
}
.orbitron { font-family: 'Orbitron', sans-serif; }
.glass-card {
background: rgba(10, 10, 25, 0.4);
backdrop-filter: blur(16px) saturate(180%);
-webkit-backdrop-filter: blur(16px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 24px;
transition: all 0.3s ease;
}
.glass-card:hover {
box-shadow: 0 0 20px rgba(0, 191, 255, 0.2), 0 0 40px rgba(138, 43, 226, 0.1);
border-color: rgba(0, 191, 255, 0.3);
}
.bento-grid {
display: grid;
gap: 1.5rem;
grid-template-columns: repeat(12, 1fr);
grid-auto-rows: auto;
}
.bento-item {
grid-column: span 12;
}
@media (min-width: 1024px) {
.bento-item-col-6 { grid-column: span 6; }
.bento-item-col-8 { grid-column: span 8; }
.bento-item-col-4 { grid-column: span 4; }
.bento-item-col-12 { grid-column: span 12; }
}
.glow-text {
text-shadow: 0 0 8px var(--glow-color-1), 0 0 16px var(--glow-color-1);
}
.glow-subtitle {
text-shadow: 0 0 5px var(--glow-color-2);
}
.timeline-item::before {
content: '';
position: absolute;
left: -2px;
top: 20px;
bottom: -20px;
width: 4px;
background: linear-gradient(to bottom, transparent, #4f46e5, #9333ea, transparent);
border-radius: 2px;
}
.timeline-point {
position: absolute;
left: -12px;
top: 20px;
width: 24px;
height: 24px;
border-radius: 50%;
background-color: #020011;
border: 4px solid #4f46e5;
box-shadow: 0 0 15px #4f46e5;
z-index: 10;
}
.tab-active {
color: #67e8f9 !important;
border-color: #67e8f9 !important;
text-shadow: 0 0 5px #67e8f9;
}
</style>
</head>
<body class="p-4 sm:p-6 md:p-8">
<div class="fixed top-0 left-0 w-full h-full -z-10 overflow-hidden">
<div class="absolute top-[-20%] left-[-20%] w-[60vw] h-[60vw] rounded-full bg-[var(--glow-color-1)] filter blur-[150px]"></div>
<div class="absolute bottom-[-20%] right-[-20%] w-[50vw] h-[50vw] rounded-full bg-[var(--glow-color-2)] filter blur-[150px]"></div>
</div>
<div class="max-w-screen-2xl mx-auto space-y-8">
<!-- Header -->
<header class="text-center py-8">
<h1 class="orbitron text-4xl md:text-6xl font-bold glow-text bg-clip-text text-transparent bg-gradient-to-r from-cyan-300 via-purple-400 to-pink-400">
固态电池产业链深度研究
</h1>
<p class="mt-4 text-lg text-slate-300">产业化拐点已至,下一代电池技术革命</p>
<div class="mt-2 text-xs text-slate-500">
北京价值前沿科技有限公司 AI投研agent“价小前投研” 呈现 | 本报告为AI合成数据投资需谨慎
</div>
</header>
<!-- Main Content -->
<main class="bento-grid">
<!-- Insight Core View -->
<section class="bento-item bento-item-col-12 glass-card p-6 md:p-8">
<div class="flex items-center gap-4 mb-6">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-cyan-300 glow-text" fill="none" viewBox="0 0 24 24" stroke="currentColor"><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" /></svg>
<h2 class="orbitron text-2xl md:text-3xl font-bold text-slate-100 glow-subtitle">核心观点与市场洞察 (Insight)</h2>
</div>
<div class="space-y-6 text-slate-300 leading-relaxed">
<p class="text-lg bg-slate-800/50 p-4 rounded-xl border border-slate-700">
<strong>核心观点摘要:</strong> 固态电池正处于从实验室研发到产业化应用的“0到1”关键拐点。其核心驱动力源于下游应用对电池<strong>能量密度</strong><strong>安全性</strong>的终极追求,这已超越成本成为主机厂的首要诉求。尽管当前市场热度高涨,但产业正经历从<strong>半固态(氧化物路线为主)</strong><strong>全固态(硫化物路线为终极方向)</strong>的过渡,真正的商业化爆发仍面临<strong>成本</strong><strong>工艺</strong>两大核心瓶颈,产业链投资机会呈现显著的阶段性特征,<strong>设备环节</strong>确定性最高,率先受益。
</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="bg-slate-900/30 p-4 rounded-lg border border-slate-700">
<h4 class="font-bold text-cyan-300 mb-2">核心驱动力</h4>
<ul class="list-disc list-inside space-y-1 text-sm">
<li><strong>性能驱动取代成本驱动:</strong> 主机厂对超1000公里续航的刚性需求突破液态电池性能天花板。</li>
<li><strong>新兴场景刚需:</strong> 低空经济(eVTOL)、人形机器人等产业落地的最大技术壁垒,为早期高成本买单。</li>
<li><strong>国家级战略推动:</strong> 工信部60亿专项基金及明确的量产降本时间表注入产业化确定性。</li>
</ul>
</div>
<div class="bg-slate-900/30 p-4 rounded-lg border border-slate-700">
<h4 class="font-bold text-purple-300 mb-2">市场预期差分析</h4>
<ul class="list-disc list-inside space-y-1 text-sm">
<li><strong>“半固态”与“全固态”概念混淆:</strong> 市场普遍将已量产的氧化物路线半固态,等同于终极的硫化物路线全固态。</li>
<li><strong>成本与时间预期差:</strong> 硫化锂千万/吨级的成本与国家项目几十万/吨的目标存在巨大鸿沟,大规模普及时间点可能晚于预期。</li>
<li><strong>技术路线不确定性:</strong> 硫化物路线存在稳定性差、高压成型、核心专利被日韩掌握等重大工程化难题,市场可能低估其风险。</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Timeline & Key Catalysts -->
<section class="bento-item bento-item-col-12 lg:bento-item-col-8 glass-card p-6 md:p-8">
<div class="flex items-center gap-4 mb-6">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-cyan-300 glow-text" fill="none" viewBox="0 0 24 24" stroke="currentColor"><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" /></svg>
<h2 class="orbitron text-2xl md:text-3xl font-bold text-slate-100 glow-subtitle">产业化进程与关键催化剂</h2>
</div>
<div id="timeline-chart" class="w-full h-[400px]"></div>
</section>
<!-- Investment Insights -->
<section class="bento-item bento-item-col-12 lg:bento-item-col-4 glass-card p-6 md:p-8 flex flex-col">
<div class="flex items-center gap-4 mb-6">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-cyan-300 glow-text" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" /></svg>
<h2 class="orbitron text-2xl font-bold text-slate-100 glow-subtitle">投资启示</h2>
</div>
<div class="space-y-4 flex-grow flex flex-col justify-around text-slate-300">
<div class="p-4 rounded-lg bg-slate-900/50 border border-cyan-500/30">
<h4 class="font-bold text-cyan-300">设备环节 (确定性最高)</h4>
<p class="text-sm mt-1">单GWh投资额翻倍至4-6亿干法电极、叠片、等静压等设备是明确增量市场业绩兑现最早。</p>
</div>
<div class="p-4 rounded-lg bg-slate-900/50 border border-purple-500/30">
<h4 class="font-bold text-purple-300">核心材料 (弹性最大)</h4>
<p class="text-sm mt-1">关注具备技术壁垒和成本优势的硫化锂、硅碳负极、单壁碳纳米管,技术突破将带来爆发式增长。</p>
</div>
<div class="p-4 rounded-lg bg-slate-900/50 border border-pink-500/30">
<h4 class="font-bold text-pink-300">平台型公司 (风险平滑)</h4>
<p class="text-sm mt-1">如赣锋锂业、道氏技术等全产业链布局者,能平滑单一技术路线风险,享受产业协同优势。</p>
</div>
</div>
</section>
<!-- Industry Chain Map -->
<section class="bento-item bento-item-col-12 glass-card p-6 md:p-8">
<div class="flex items-center gap-4 mb-6">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-cyan-300 glow-text" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
<h2 class="orbitron text-2xl md:text-3xl font-bold text-slate-100 glow-subtitle">产业链全景图谱</h2>
</div>
<div id="industry-chain-treemap" class="w-full h-[500px]"></div>
</section>
<!-- Data Sources: News, Roadshow, Reports -->
<section class="bento-item bento-item-col-12 glass-card p-6 md:p-8" x-data="{ tab: 'news' }">
<div class="flex items-center gap-4 mb-6">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-cyan-300 glow-text" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8-4v0c0 2.21-3.582 4-8 4s-8-1.79-8-4v0z" /></svg>
<h2 class="orbitron text-2xl md:text-3xl font-bold text-slate-100 glow-subtitle">核心数据源摘要</h2>
</div>
<div class="tabs tabs-boxed bg-slate-900/50 justify-center">
<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-2 text-slate-300 text-sm">
<div x-show="tab === 'news'">
<div class="collapse collapse-plus bg-slate-800/50 border border-slate-700">
<input type="radio" name="news-accordion" checked="checked" />
<div class="collapse-title text-base font-medium text-cyan-300">产业整体趋势、节奏与时间线</div>
<div class="collapse-content">
<ul class="list-disc list-inside space-y-2">
<li><strong>发展阶段:</strong> 产业链雏形初现,进入中试关键期。当前均为半固态,下半年是产业化开启之年。</li>
<li><strong>驱动力:</strong> 国家多部门重点支持主机厂诉求从安全转向能量密度超1000公里续航</li>
<li><strong>关键节点:</strong> 25年底工信部项目中期审查 (硫化物抽检)26年要求建500吨级硫化物产线27年要求硫化物成本降至250万/吨。</li>
<li><strong>量产预期:</strong> 2026年广汽昊铂装车2027年小批量量产2035年全固态大规模量产。</li>
</ul>
</div>
</div>
<div class="collapse collapse-plus bg-slate-800/50 border border-slate-700">
<input type="radio" name="news-accordion" />
<div class="collapse-title text-base font-medium text-cyan-300">技术路线与工艺</div>
<div class="collapse-content">
<ul class="list-disc list-inside space-y-2">
<li><strong>主流路线:</strong> 2028年前氧化物为主流半固态过渡2030年后看好硫化物全固态主流。宁德时代主攻硫化物。</li>
<li><strong>关键工艺:</strong> 必须用干电极(目前湿法为主,干法半年后落地);高密度电池需预锂化技术。</li>
<li><strong>材料环节 (硫化物/硫化锂):</strong> 已具备吨级量产条件。成本是关键,硫化物现千万级/吨目标28-29年降至50万/吨;硫化锂现数百万/吨目标后续20万/吨。</li>
<li><strong>设备环节:</strong> 投资价值量大增半固态提升30%全固态翻倍约4-6亿/GWh。增量设备包括涂布机、辊压机、叠片机、等静压设备等。</li>
</ul>
</div>
</div>
</div>
<div x-show="tab === 'roadshow'">
<div class="collapse collapse-plus bg-slate-800/50 border border-slate-700">
<input type="radio" name="roadshow-accordion" checked="checked" />
<div class="collapse-title text-base font-medium text-purple-300">固态电解质核心信息</div>
<div class="collapse-content">
<ul class="list-disc list-inside space-y-2">
<li><strong>硫化物路线:</strong> 离子电导率最高,被视为主流方向。但空气/水稳定性差易产生H₂S剧毒气体与锂金属负极反应剧烈专利壁垒高日韩主导</li>
<li><strong>氧化物路线:</strong> 半固态主路线技术较成熟成本较低LLZO 25-30万/吨)。但电导率低,界面接触差。</li>
<li><strong>成本现状:</strong> 硫化锂Li₂S价格是核心瓶颈高达300-1000万/吨。初期电池成本可能高达3-4元/Wh。降本路径依赖规模化和新材料体系如Li₃PS₄Cl</li>
</ul>
</div>
</div>
<div class="collapse collapse-plus bg-slate-800/50 border border-slate-700">
<input type="radio" name="roadshow-accordion" />
<div class="collapse-title text-base font-medium text-purple-300">正负极与工艺设备</div>
<div class="collapse-content">
<ul class="list-disc list-inside space-y-2">
<li><strong>正极材料:</strong> 变化较小,沿用高镍/超高镍三元材料。长期方向为富锂锰基。</li>
<li><strong>负极材料:</strong> 半固态主要选择硅基/硅碳负极。全固态理想方案为锂金属负极,但锂枝晶问题仍未完全解决。</li>
<li><strong>核心工艺:</strong> 必须用干电极技术。硫化物路线需高压成型(依赖等静压设备),限制连续化生产。</li>
<li><strong>设备投资:</strong> 半固态约2.2-2.8亿/GWh全固态初期可能达4-6亿/GWh。等静压设备、干法设备是关键增量。</li>
</ul>
</div>
</div>
</div>
<div x-show="tab === 'report'">
<div class="collapse collapse-plus bg-slate-800/50 border border-slate-700">
<input type="radio" name="report-accordion" checked="checked" />
<div class="collapse-title text-base font-medium text-pink-300">产业化进程与标准</div>
<div class="collapse-content">
<ul class="list-disc list-inside space-y-2">
<li><strong>政策支持:</strong> 工信部与财政部牵头提供60亿元政府基础研发资金。</li>
<li><strong>标准确立:</strong> 2025年5月发布《全固态电池判定方法》团体标准首次明确全固态电池定义。</li>
<li><strong>产业化时间线:</strong> 半固态已进入商业化量产孚能科技GWh级出货。全固态预计2027年左右实现400Wh/kg量产目标。</li>
</ul>
</div>
</div>
<div class="collapse collapse-plus bg-slate-800/50 border border-slate-700">
<input type="radio" name="report-accordion" />
<div class="collapse-title text-base font-medium text-pink-300">核心材料与设备上市公司布局</div>
<div class="collapse-content">
<ul class="list-disc list-inside space-y-2">
<li><strong>硫化物电解质:</strong> 天赐材料(中试)、恩捷股份(百吨级中试线)、厦钨新能(吨级生产)等积极布局。</li>
<li><strong>负极材料:</strong> 硅碳负极为中短期主要增量(璞泰来、贝特瑞)。锂金属负极为终极选择(赣锋锂业全球最大产能)。</li>
<li><strong>导电剂:</strong> 固态电池中碳纳米管用量显著高于液态,利好天奈科技、道氏技术。</li>
<li><strong>生产设备:</strong> 需求大增利元亨硫化物整线、先导智能整线设备、海目星4亿订单、纳科诺尔干法设备等已获订单。</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- Stock Data -->
<section class="bento-item bento-item-col-12 glass-card p-6 md:p-8">
<div class="flex items-center gap-4 mb-6">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-cyan-300 glow-text" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /></svg>
<h2 class="orbitron text-2xl md:text-3xl font-bold text-slate-100 glow-subtitle">核心标的梳理</h2>
</div>
<div id="stock-tables-container" class="space-y-8">
<!-- Tables will be injected here by JavaScript -->
</div>
</section>
</main>
</div>
<script>
// ECharts for Timeline
const timelineChart = echarts.init(document.getElementById('timeline-chart'));
const timelineOption = {
tooltip: {
trigger: 'axis',
formatter: function (params) {
let res = `<strong class="text-cyan-300">${params[0].name}</strong><br/>`;
res += `<span class="text-slate-300">${params[0].data.event}</span>`;
return res;
},
backgroundColor: 'rgba(10, 10, 25, 0.8)',
borderColor: '#4A5568',
textStyle: {
color: '#E2E8F0'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
data: ['2023', '2024', '2025', '2026', '2027', '2030+'],
axisLine: { lineStyle: { color: '#4A5568' } },
axisLabel: { color: '#A0AEC0', fontFamily: 'Orbitron' },
},
yAxis: {
type: 'value',
name: '产业化阶段',
nameTextStyle: { color: '#A0AEC0' },
axisLine: { show: true, lineStyle: { color: '#4A5568' } },
splitLine: { lineStyle: { color: '#2D3748' } },
axisLabel: {
color: '#A0AEC0',
formatter: function(value) {
const labels = ['探索期', '元年', '加速期', '中试期', '验证期', '量产期', '普及期'];
return labels[value] || '';
}
}
},
series: [{
name: '产业进程',
type: 'line',
step: 'start',
data: [
{ value: 1, event: '半固态电池装车元年 (蔚来搭载卫蓝150kWh电池包)' },
{ value: 2, event: '产业化加速年 (智己L6搭载清陶半固态电池)' },
{ value: 3, event: '中试线落地与技术定型关键期 (工信部中期审查)' },
{ value: 4, event: '全固态小批量装车验证年 (广汽昊铂计划装车)' },
{ value: 5, event: '量产元年预期 (宁德/比亚迪/丰田等计划小批量生产)' },
{ value: 6, event: '规模化与成本下降阶段 (市场规模有望破100GWh)' }
],
smooth: false,
symbol: 'circle',
symbolSize: 10,
lineStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: '#67e8f9' },
{ offset: 1, color: '#d946ef' }
]),
width: 3,
shadowColor: 'rgba(0, 191, 255, 0.5)',
shadowBlur: 10
},
itemStyle: {
color: '#020011',
borderColor: '#67e8f9',
borderWidth: 2,
},
emphasis: {
itemStyle: {
borderColor: '#f472b6',
borderWidth: 3,
}
}
}]
};
timelineChart.setOption(timelineOption);
// ECharts for Industry Chain Treemap
const treemapChart = echarts.init(document.getElementById('industry-chain-treemap'));
const treemapData = [
{
name: '上游:原材料',
value: 25,
children: [
{ name: '电解质原料 (硫/锆/镧/LiTFSI)', value: 10 },
{ name: '正极原料 (高镍/富锂锰基)', value: 8 },
{ name: '负极原料 (硅粉/多孔碳/金属锂)', value: 7 },
]
},
{
name: '中游:核心材料、辅材与设备',
value: 45,
children: [
{ name: '固态电解质', value: 8 },
{ name: '正极材料', value: 5 },
{ name: '负极材料 (硅碳/锂金属)', value: 7 },
{ name: '关键辅材 (骨架膜/导电剂/铝塑膜/集流体)', value: 10 },
{ name: '核心设备 (干法/叠片/等静压/预锂化)', value: 15, itemStyle: { color: '#f43f5e' } }, // Highlight
]
},
{
name: '下游:电池制造与应用',
value: 30,
children: [
{ name: '电池厂商 (CATL/清陶/卫蓝等)', value: 15 },
{ name: '终端应用 (新能源车/低空经济/机器人/储能)', value: 15 },
]
}
];
const treemapOption = {
tooltip: {
formatter: '{b}: {c}%',
backgroundColor: 'rgba(10, 10, 25, 0.8)',
borderColor: '#4A5568',
textStyle: { color: '#E2E8F0' }
},
series: [{
type: 'treemap',
data: treemapData,
leafDepth: 1,
levels: [
{
itemStyle: {
borderColor: '#020011',
borderWidth: 4,
gapWidth: 4,
}
},
{
colorSaturation: [0.3, 0.6],
itemStyle: {
borderColorSaturation: 0.7,
gapWidth: 2,
borderWidth: 2
}
},
{
colorSaturation: [0.3, 0.5],
itemStyle: {
borderColorSaturation: 0.6,
gapWidth: 1
}
},
],
breadcrumb: { show: false },
label: {
show: true,
formatter: '{b}',
color: '#fff',
fontSize: 14,
fontFamily: 'Inter',
textShadowColor: 'rgba(0, 0, 0, 0.7)',
textShadowBlur: 3
},
itemStyle: {
color: '#1e293b', // Default color
},
emphasis: {
label: {
color: '#000'
},
itemStyle: {
borderColor: '#fff',
borderWidth: 2
}
},
}],
color: ['#0e7490', '#5b21b6', '#be185d', '#0f766e', '#a21caf', '#1d4ed8']
};
treemapChart.setOption(treemapOption);
window.addEventListener('resize', function() {
timelineChart.resize();
treemapChart.resize();
});
// Stock Data Processing and Rendering
const stockDataRaw = {{股票数据}};
function processStockData(rawData) {
const stockMap = new Map();
Object.values(rawData).forEach(source => {
if (source && typeof source === 'object' && !Array.isArray(source)) {
Object.values(source).forEach(imageList => {
if(Array.isArray(imageList)) {
imageList.forEach(stock => {
if (!stock.stock || !stock.reason) return;
const key = stock.stock_code || stock.stock;
if (!stockMap.has(key)) {
stockMap.set(key, {
name: stock.stock,
code: stock.stock_code,
reasons: new Set(),
tags: new Set(),
});
}
const entry = stockMap.get(key);
entry.reasons.add(stock.reason.trim());
let tagsToAdd = [];
if (typeof stock.其他标签 === 'string') {
tagsToAdd = stock.其他标签.split(/[,/ ]+/).map(t => t.trim()).filter(Boolean);
} else if (Array.isArray(stock.其他标签)) {
tagsToAdd = stock.其他标签.map(t => t.trim()).filter(Boolean);
} else if (typeof stock.其他标签 === 'object' && stock.其他标签 !== null) {
tagsToAdd = Object.values(stock.其他标签).map(t => String(t).trim()).filter(Boolean);
}
tagsToAdd.forEach(tag => entry.tags.add(tag));
});
}
});
}
});
const categories = {
'设备': { keywords: ['设备', '整线', '产线', '激光', '超声', '模具', '零部件', '搅拌', '辊压', '涂覆', '检测'], stocks: [] },
'电解质': { keywords: ['电解质', '硫化', '硫铁', '硫基', 'Li₂S', '氧化物', '锆', '镧', '锗', '聚合物', '卤化物', '添加剂', 'LiTFSI', 'LiFSI'], stocks: [] },
'负极': { keywords: ['负极', '硅碳', '硅氧', '硅基', '金属锂', '多孔碳', '包覆'], stocks: [] },
'正极': { keywords: ['正极', '前驱体', '锰基', '锰矿', '高镍'], stocks: [] },
'隔膜与辅材': { keywords: ['隔膜', '骨架膜', '陶瓷', '铝塑膜', '集流体', '铜箔', '导电剂', 'CNT', '碳纳米管', '粘结剂', '封装'], stocks: [] },
'电池及生态': { keywords: ['电池', '清陶', '卫蓝', '高能时代', '太蓝新能源', '车企', '广汽', '上汽', '比亚迪'], stocks: [] },
'其他': { keywords: [], stocks: [] }
};
stockMap.forEach(stock => {
const combinedInfo = `${stock.name} ${Array.from(stock.tags).join(' ')} ${Array.from(stock.reasons).join(' ')}`;
let assigned = false;
for (const cat in categories) {
if (cat !== '其他') {
for (const keyword of categories[cat].keywords) {
if (combinedInfo.includes(keyword)) {
categories[cat].stocks.push(stock);
assigned = true;
break;
}
}
}
if(assigned) break;
}
if (!assigned) {
categories['其他'].stocks.push(stock);
}
});
return categories;
}
function renderStockTables(categorizedData) {
const container = document.getElementById('stock-tables-container');
container.innerHTML = '';
for (const categoryName in categorizedData) {
const category = categorizedData[categoryName];
if (category.stocks.length === 0) continue;
const sectionHtml = `
<div class="overflow-x-auto">
<h3 class="orbitron text-xl font-semibold mb-4 text-cyan-200 glow-subtitle border-l-4 border-cyan-400 pl-4">${categoryName}</h3>
<table class="table table-sm table-zebra-zebra bg-transparent w-full">
<thead class="text-slate-300">
<tr>
<th class="bg-slate-800/50">股票名称</th>
<th class="bg-slate-800/50">核心逻辑</th>
<th class="bg-slate-800/50">产业链标签</th>
</tr>
</thead>
<tbody class="text-slate-400">
${category.stocks.map(stock => `
<tr>
<td class="font-semibold text-slate-200 whitespace-nowrap">
${stock.name}
${stock.code ? `<a href="https://valuefrontier.cn/company?scode=${stock.code}" target="_blank" class="text-xs text-slate-500 ml-2 hover:text-cyan-400">(${stock.code})</a>` : ''}
</td>
<td><ul class="list-disc list-inside">${Array.from(stock.reasons).map(r => `<li>${r}</li>`).join('')}</ul></td>
<td>
<div class="flex flex-wrap gap-2">
${Array.from(stock.tags).map(t => `<span class="badge badge-outline badge-info text-xs">${t}</span>`).join('')}
</div>
</td>
</tr>
`).join('')}
</tbody>
</table>
</div>
`;
container.innerHTML += sectionHtml;
}
}
const categorizedStocks = processStockData(stockDataRaw);
renderStockTables(categorizedStocks);
</script>
</body>
</html>