418 lines
28 KiB
HTML
418 lines
28 KiB
HTML
<!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=Poppins:wght@300;400;500;600;700&display=swap');
|
||
|
||
body {
|
||
font-family: 'Poppins', sans-serif;
|
||
background-color: #000010;
|
||
color: #E0E0E0;
|
||
}
|
||
|
||
.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(255, 255, 255, 0.1);
|
||
border-radius: 1.5rem; /* rounded-3xl */
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.glass-card:hover {
|
||
background: rgba(30, 41, 59, 0.7); /* slate-800 with opacity */
|
||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||
transform: translateY(-5px);
|
||
}
|
||
|
||
.glow-text {
|
||
color: #f0f0f0;
|
||
text-shadow: 0 0 8px rgba(0, 255, 255, 0.7), 0 0 16px rgba(0, 255, 255, 0.5);
|
||
}
|
||
|
||
.title-text {
|
||
color: #ffffff;
|
||
text-shadow: 0 0 10px rgba(74, 222, 128, 0.8), 0 0 20px rgba(74, 222, 128, 0.6);
|
||
}
|
||
|
||
.highlight-text {
|
||
color: #67e8f9; /* cyan-300 */
|
||
}
|
||
|
||
.accent-text {
|
||
color: #a78bfa; /* violet-400 */
|
||
}
|
||
|
||
.bento-grid {
|
||
display: grid;
|
||
gap: 1.5rem;
|
||
grid-template-columns: repeat(12, 1fr);
|
||
}
|
||
|
||
.bento-item {
|
||
grid-column: span 12;
|
||
}
|
||
|
||
@media (min-width: 768px) {
|
||
.bento-item-span-4 { grid-column: span 4; }
|
||
.bento-item-span-6 { grid-column: span 6; }
|
||
.bento-item-span-8 { grid-column: span 8; }
|
||
.bento-item-span-12 { grid-column: span 12; }
|
||
}
|
||
|
||
.deep-space-bg {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
z-index: -1;
|
||
background: #000010;
|
||
background-image:
|
||
radial-gradient(ellipse at 20% 80%, rgba(147, 51, 234, 0.15) 0%, transparent 50%),
|
||
radial-gradient(ellipse at 80% 10%, rgba(37, 99, 235, 0.15) 0%, transparent 50%),
|
||
radial-gradient(ellipse at 50% 50%, rgba(22, 163, 74, 0.1) 0%, transparent 50%);
|
||
}
|
||
|
||
.table thead th {
|
||
background-color: rgba(30, 41, 59, 0.8);
|
||
color: #94a3b8; /* slate-400 */
|
||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||
}
|
||
|
||
.table tbody tr {
|
||
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
||
}
|
||
|
||
.table tbody tr:hover {
|
||
background-color: rgba(51, 65, 85, 0.5);
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="min-h-screen">
|
||
<div class="deep-space-bg"></div>
|
||
|
||
<div class="container mx-auto p-4 md:p-8">
|
||
<!-- Header -->
|
||
<header class="text-center mb-12">
|
||
<h1 class="text-4xl md:text-6xl font-bold glow-text mb-2">模拟厂商弹性测算</h1>
|
||
<p class="text-slate-400">Deep Dive Research Report</p>
|
||
<div class="mt-4 text-xs text-slate-500">
|
||
由 北京价值前沿科技有限公司 AI投研agent：“价小前投研” 进行投研呈现<br>
|
||
本报告为AI合成数据，投资需谨慎
|
||
</div>
|
||
</header>
|
||
|
||
<!-- Section 1: Concept Insight -->
|
||
<section id="insight" class="mb-16">
|
||
<div class="glass-card p-6 md:p-8">
|
||
<h2 class="text-2xl md:text-3xl font-bold title-text mb-6 border-l-4 border-green-400 pl-4">概念洞察：国产替代的量化博弈</h2>
|
||
|
||
<div class="space-y-8 text-slate-300 leading-relaxed">
|
||
<div>
|
||
<h3 class="font-semibold text-lg text-cyan-300 mb-3">核心观点摘要</h3>
|
||
<p>“模拟厂商弹性测算”概念本质上是<strong class="font-semibold text-white">一个由地缘政治驱动、以量化模型为核心的国产替代主题投资框架</strong>。当前，该概念已走过纯粹的事件驱动阶段，进入了<strong class="font-semibold text-white">基于模型的预期博弈与基本面验证的过渡期</strong>。其核心驱动力源于政策强制打开的高端市场空间，未来潜力则完全取决于国内厂商在<strong class="font-semibold text-violet-400">工业与汽车电子</strong>这两个“深水区”的技术突破与客户认证的实际落地速度。</p>
|
||
</div>
|
||
|
||
<div>
|
||
<h3 class="font-semibold text-lg text-cyan-300 mb-3">概念形成与演进</h3>
|
||
<div class="relative pl-6 border-l-2 border-slate-700">
|
||
<div class="mb-6">
|
||
<div class="absolute w-4 h-4 bg-cyan-400 rounded-full -left-2 mt-1.5 border-4 border-slate-900"></div>
|
||
<p class="font-semibold text-slate-200">长期背景 (2018-2024)</p>
|
||
<p class="text-sm">中美科技摩擦持续，半导体国产替代成共识。但在高端模拟芯片领域，TI、ADI等美厂主导，国内厂商处于追赶阶段。</p>
|
||
</div>
|
||
<div class="mb-6">
|
||
<div class="absolute w-4 h-4 bg-cyan-400 rounded-full -left-2 mt-1.5 border-4 border-slate-900"></div>
|
||
<p class="font-semibold text-slate-200">催化剂酝酿 (2025.03 - 2025.04初)</p>
|
||
<p class="text-sm">市场传闻关税或反倾销调查，开始讨论美系厂商在中国<strong class="text-white">约800亿人民币</strong>的理论可替代市场与<strong class="text-white">50亿美元</strong>的中国区收入冲击。</p>
|
||
</div>
|
||
<div class="mb-6">
|
||
<div class="absolute w-4 h-4 bg-green-400 rounded-full -left-2 mt-1.5 border-4 border-slate-900"></div>
|
||
<p class="font-semibold text-slate-200">概念形成与量化 (2025.04.11 - 2025.04.17)</p>
|
||
<p class="text-sm">卖方分析师发布详细测算方法论：测算美系龙头让出的<strong class="text-white">260亿人民币</strong>市场，再按国内厂商现有份额“切分蛋糕”，得出各公司弹性倍数。概念通过“一张图”等形式迅速传播，引爆市场。</p>
|
||
</div>
|
||
<div>
|
||
<div class="absolute w-4 h-4 bg-cyan-400 rounded-full -left-2 mt-1.5 border-4 border-slate-900"></div>
|
||
<p class="font-semibold text-slate-200">深化与扩散 (2025.05至今)</p>
|
||
<p class="text-sm">市场围绕该框架持续讨论，研报将“关税博弈”纳入核心驱动因素，逻辑从热点沉淀为机构研究框架。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<h3 class="font-semibold text-lg text-cyan-300 mb-3">核心逻辑与预期差</h3>
|
||
<ul class="space-y-4">
|
||
<li class="flex items-start">
|
||
<svg class="w-6 h-6 text-green-400 mr-3 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>
|
||
<div><strong class="text-white">核心驱动力：政策驱动的“市场重划”。</strong> 外部政策冲击强制为国内厂商创造了高端市场的准入机会，尤其是在工业（87亿）和汽车（105亿）领域。</div>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<svg class="w-6 h-6 text-yellow-400 mr-3 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 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path></svg>
|
||
<div><strong class="text-white">预期差1：能力与机会的错配。</strong> 模型假设国内厂商能无缝承接高端份额，但现实中汽车和高端工业存在漫长的验证周期，市场可能高估了份额转移的速度。</div>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<svg class="w-6 h-6 text-yellow-400 mr-3 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 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path></svg>
|
||
<div><strong class="text-white">预期差2：收入与利润的鸿沟。</strong> 利润弹性测算基于2021年牛市峰值净利率，与当前价格战、高库存（187天）的行业现实严重脱节，存在高估利润弹性的风险。</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div>
|
||
<h3 class="font-semibold text-lg text-cyan-300 mb-3">未来发展路径与催化剂</h3>
|
||
<p>未来股价的核心驱动力将从“讲故事”转向“看报表”。需重点跟踪和验证的关键指标包括：<strong class="text-white">① 分部收入增速</strong> (特别是汽车和工业业务)、<strong class="text-white">② 毛利率拐点</strong>、<strong class="text-white">③ 合同负债/预收账款</strong>、以及 <strong class="text-white">④ 关键客户突破公告</strong>。</p>
|
||
</div>
|
||
|
||
<div>
|
||
<h3 class="font-semibold text-lg text-cyan-300 mb-3">潜在风险与挑战</h3>
|
||
<p>技术壁垒、商业化认证周期、利润侵蚀、政策变数和国际竞争是主要风险。此外，各信源对可替代市场规模估算（260亿至800亿）差异巨大，利润率假设过于乐观，以及关键标的（如雅创电子）数据缺失，都构成了信息交叉验证的风险。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Section 2: Evidence & Methodology -->
|
||
<section id="evidence" class="mb-16">
|
||
<h2 class="text-2xl md:text-3xl font-bold title-text mb-8 text-center">核心数据与测算框架</h2>
|
||
<div class="bento-grid">
|
||
<!-- Calculation Methodology -->
|
||
<div class="bento-item bento-item-span-12 md:bento-item-span-8 glass-card p-6">
|
||
<h3 class="font-semibold text-lg text-cyan-300 mb-3">弹性测算核心逻辑 (源自新闻)</h3>
|
||
<blockquote class="border-l-4 border-slate-600 pl-4 text-slate-400 italic space-y-2 text-sm">
|
||
<p>"梳理美国模拟龙头(TI/ADI等)中国区营收(<strong class="text-slate-200 not-italic">约570亿</strong>)，算出受影响的海外产能对应营收(<strong class="text-slate-200 not-italic">约260亿</strong>)。"</p>
|
||
<p>"这260亿市场由国产公司承接，相当于在现有约200亿营收基础上<strong class="text-slate-200 not-italic">翻一番</strong>。"</p>
|
||
<p>"测算逻辑是以<strong class="text-slate-200 not-italic">现有厂商的细分领域份额</strong>，去分海外让出来的蛋糕。例如纳芯微车规占比高，则在出让的105亿车规市场中，有望也占到<strong class="text-slate-200 not-italic">同样比例(40%)</strong>。"</p>
|
||
<p>"最后将各领域潜在市场加总，再除以厂商原来营收，去算<strong class="text-slate-200 not-italic">弹性倍数</strong>。"</p>
|
||
</blockquote>
|
||
<p class="text-xs text-slate-500 mt-3">来源: 【东吴电子陈海进】如何测算反制关税对模拟芯片影响？ (2025-04-13)</p>
|
||
</div>
|
||
<!-- Market Size -->
|
||
<div class="bento-item bento-item-span-12 md:bento-item-span-4 glass-card p-6 flex flex-col justify-center">
|
||
<h3 class="font-semibold text-lg text-cyan-300 mb-3">市场替代空间 (亿 RMB)</h3>
|
||
<div class="space-y-3">
|
||
<div class="flex justify-between items-baseline">
|
||
<span class="text-slate-400">可替代总市场</span>
|
||
<span class="text-3xl font-bold text-white">260</span>
|
||
</div>
|
||
<div class="flex justify-between items-baseline">
|
||
<span class="text-slate-400">汽车领域</span>
|
||
<span class="text-2xl font-semibold accent-text">105</span>
|
||
</div>
|
||
<div class="flex justify-between items-baseline">
|
||
<span class="text-slate-400">工业领域</span>
|
||
<span class="text-2xl font-semibold accent-text">87</span>
|
||
</div>
|
||
<div class="flex justify-between items-baseline">
|
||
<span class="text-slate-400">消费领域</span>
|
||
<span class="text-2xl font-semibold accent-text">43</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Elasticity Numbers -->
|
||
<div class="bento-item bento-item-span-12 md:bento-item-span-6 glass-card p-6">
|
||
<h3 class="font-semibold text-lg text-cyan-300 mb-3">收入/利润弹性测算 (源自路演)</h3>
|
||
<p class="text-slate-400 text-sm mb-4">关税政策落地后，国产厂商潜在增长倍数：</p>
|
||
<div class="grid grid-cols-2 gap-4 text-center">
|
||
<div>
|
||
<p class="text-sm text-slate-500">纳芯微 (收入弹性)</p>
|
||
<p class="text-4xl font-bold text-white">300%</p>
|
||
</div>
|
||
<div>
|
||
<p class="text-sm text-slate-500">思瑞浦 (利润弹性)</p>
|
||
<p class="text-4xl font-bold accent-text">900%</p>
|
||
</div>
|
||
<div>
|
||
<p class="text-sm text-slate-500">雅创电子 (收入弹性)</p>
|
||
<p class="text-4xl font-bold text-white">400%+ </p>
|
||
</div>
|
||
<div>
|
||
<p class="text-sm text-slate-500">圣邦股份 (利润弹性)</p>
|
||
<p class="text-4xl font-bold accent-text">450%</p>
|
||
</div>
|
||
</div>
|
||
<p class="text-xs text-slate-500 mt-3">注意：利润弹性基于2021Q2牛市净利率，存在高估风险。</p>
|
||
</div>
|
||
<!-- Research Report Summary -->
|
||
<div class="bento-item bento-item-span-12 md:bento-item-span-6 glass-card p-6">
|
||
<h3 class="font-semibold text-lg text-cyan-300 mb-3">研报观点：思瑞浦 (3PEAK)</h3>
|
||
<ul class="space-y-2 text-sm text-slate-300">
|
||
<li class="flex items-start">
|
||
<span class="text-green-400 mr-2">▶</span> <div><strong class="text-white">核心驱动：</strong>关税博弈升级，美系芯片成本攀升，国产替代加速。</div>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<span class="text-green-400 mr-2">▶</span> <div><strong class="text-white">业务扩张：</strong>并购创芯微，补齐电池管理芯片，形成信号链+电源+电池管理平台。</div>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<span class="text-green-400 mr-2">▶</span> <div><strong class="text-white">财务预测：</strong>预计2025年营收增速<strong class="highlight-text">+45.3%</strong>，归母净利润由-1.95亿<strong class="highlight-text">扭亏为盈至1.26亿</strong>。</div>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<span class="text-green-400 mr-2">▶</span> <div><strong class="text-white">弹性来源：</strong>量(替代份额)+价(竞争力)+成本优化+产品矩阵完善。</div>
|
||
</li>
|
||
</ul>
|
||
<p class="text-xs text-slate-500 mt-3">来源: 研报 (2025-04-17)</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Section 3: Quantitative Analysis Chart -->
|
||
<section id="chart-section" class="mb-16">
|
||
<h2 class="text-2xl md:text-3xl font-bold title-text mb-8 text-center">核心厂商收入弹性对比</h2>
|
||
<div class="glass-card p-4 md:p-6">
|
||
<div id="elasticity-chart" style="width: 100%; height: 500px;"></div>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
<!-- Section 4: Stock Table -->
|
||
<section id="stock-list">
|
||
<h2 class="text-2xl md:text-3xl font-bold title-text mb-8 text-center">关联个股及弹性测算数据</h2>
|
||
<div class="glass-card overflow-x-auto">
|
||
<table class="table w-full text-sm">
|
||
<thead>
|
||
<tr>
|
||
<th>股票名称</th>
|
||
<th>总收入(亿)</th>
|
||
<th>汽车+工业占比</th>
|
||
<th>总营收增量(亿)</th>
|
||
<th class="text-cyan-300">收入弹性</th>
|
||
<th>核心逻辑/备注</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<!-- Data will be populated by JS -->
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<p class="text-xs text-slate-500 mt-4 text-center">数据来源: 股票数据 - 模拟厂商弹性测算(250914)</p>
|
||
</section>
|
||
|
||
<footer class="text-center mt-16 text-xs text-slate-600">
|
||
<p>免责声明：本报告由AI生成，所有信息仅供研究参考，不构成任何投资建议。</p>
|
||
<p>市场有风险，投资需谨慎。</p>
|
||
<p>© 2024 北京价值前沿科技有限公司. All Rights Reserved.</p>
|
||
</footer>
|
||
|
||
</div>
|
||
|
||
<script>
|
||
document.addEventListener('DOMContentLoaded', function () {
|
||
// Stock data
|
||
const stockData = {
|
||
"纳芯微": { "stock_code": "688052", "总收入(亿人民币)": 19.6, "汽车+工业占比": "87.0%", "总营收增量": 27.24, "收入弹性": "138.97%", "reason": "国内模拟厂商，受益于反倾销带来的潜在市场增量。备注：三年单车价值量达到3000元。" },
|
||
"思瑞浦": { "stock_code": "688536", "总收入(亿人民币)": 12.2, "汽车+工业占比": "80.0%", "总营收增量": 15.83, "收入弹性": "129.78%", "reason": "国内模拟厂商，受益于反倾销带来的潜在市场增量。备注：通信25%-30%。" },
|
||
"圣邦股份": { "stock_code": "300661", "总收入(亿人民币)": 26.16, "汽车+工业占比": "54.0%", "总营收增量": 25.02, "收入弹性": "95.64%", "reason": "国内模拟厂商，受益于反倾销带来的潜在市场增量。备注：汽车预计未来3-5年提高到10%。" },
|
||
"杰华特": { "stock_code": "688141", "总收入(亿人民币)": 16.86, "汽车+工业占比": "50.0%", "总营收增量": 15.24, "收入弹性": "90.39%", "reason": "国内模拟厂商，受益于反倾销带来的潜在市场增量。备注：计算10-15%，通信30%。" },
|
||
"艾为电子": { "stock_code": "688798", "总收入(亿人民币)": 29.33, "汽车+工业占比": "35.0%", "总营收增量": 20.73, "收入弹性": "70.69%", "reason": "国内模拟厂商，受益于反倾销带来的潜在市场增量。备注：工业包括AIOT等泛工业，纯工业为工业占比的40%。" },
|
||
"晶丰明源": { "stock_code": "688368", "总收入(亿人民币)": 15.04, "汽车+工业占比": "31.0%", "总营收增量": 9.84, "收入弹性": "65.44%", "reason": "国内模拟厂商，受益于反倾销带来的潜在市场增量。备注：电机驱动和高性能计算都计入工业。" },
|
||
"帝奥微": { "stock_code": "688381", "总收入(亿人民币)": 5.26, "汽车+工业占比": "28.8%", "总营收增量": 3.29, "收入弹性": "62.55%", "reason": "国内模拟厂商，受益于反倾销带来的潜在市场增量。备注：将公共安防计入工业。" },
|
||
"芯海科技": { "stock_code": "688595", "总收入(亿人民币)": 7.02, "汽车+工业占比": "25.0%", "总营收增量": 4.04, "收入弹性": "57.56%", "reason": "国内模拟厂商，受益于反倾销带来的潜在市场增量。备注：车规MCU BMS。" },
|
||
"芯朋微": { "stock_code": "688508", "总收入(亿人民币)": 9.65, "汽车+工业占比": "17.0%", "总营收增量": 4.54, "收入弹性": "47.05%", "reason": "国内模拟厂商，受益于反倾销带来的潜在市场增量。备注：重点布局光储充算等新工业领域。" },
|
||
"力芯微": { "stock_code": "688601", "总收入(亿人民币)": 7.87, "汽车+工业占比": "17.0%", "总营收增量": 3.71, "收入弹性": "47.05%", "reason": "国内模拟厂商，受益于反倾销带来的潜在市场增量。" },
|
||
"南芯科技": { "stock_code": "688484", "总收入(亿人民币)": 25.67, "汽车+工业占比": "16.0%", "总营收增量": 11.74, "收入弹性": "45.74%", "reason": "国内模拟厂商，受益于反倾销带来的潜在市场增量。备注：智慧能源计入工业。" },
|
||
"希荻微": { "stock_code": "688173", "总收入(亿人民币)": 5.45, "汽车+工业占比": "5.0%", "总营收增量": 1.71, "收入弹性": "31.29%", "reason": "国内模拟厂商，受益于反倾销带来的潜在市场增量。备注：主要以消费电子为主。" },
|
||
"美芯晟": { "stock_code": "688458", "总收入(亿人民币)": 4.04, "汽车+工业占比": "0.0%", "总营收增量": 1.0, "收入弹性": "24.73%", "reason": "国内模拟厂商，受益于反倾销带来的潜在市场增量。备注：光学传感进入扫地机器人。" }
|
||
};
|
||
|
||
// Populate table
|
||
const tableBody = document.querySelector('#stock-list tbody');
|
||
Object.entries(stockData).forEach(([name, data]) => {
|
||
const row = document.createElement('tr');
|
||
row.innerHTML = `
|
||
<td class="font-semibold text-white">
|
||
<a href="https://valuefrontier.cn/company?scode=${data.stock_code}" target="_blank" class="hover:text-cyan-300 transition-colors">
|
||
${name} <span class="text-slate-500 text-xs">${data.stock_code}</span>
|
||
</a>
|
||
</td>
|
||
<td>${data['总收入(亿人民币)']}</td>
|
||
<td>
|
||
<div class="radial-progress bg-slate-700 text-cyan-400 border-4 border-slate-700" style="--value:${parseFloat(data['汽车+工业占比'])}; --size:3rem; --thickness: 4px;" role="progressbar">${data['汽车+工业占比']}</div>
|
||
</td>
|
||
<td>${data['总营收增量']}</td>
|
||
<td class="font-bold text-lg text-cyan-300">${data['收入弹性']}</td>
|
||
<td class="text-slate-400">${data.reason}</td>
|
||
`;
|
||
tableBody.appendChild(row);
|
||
});
|
||
|
||
// ECharts initialization
|
||
var myChart = echarts.init(document.getElementById('elasticity-chart'));
|
||
|
||
const chartData = Object.entries(stockData)
|
||
.map(([name, data]) => ({
|
||
name: name,
|
||
value: parseFloat(data['收入弹性'])
|
||
}))
|
||
.sort((a, b) => b.value - a.value);
|
||
|
||
var option = {
|
||
backgroundColor: 'transparent',
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: { type: 'shadow' },
|
||
backgroundColor: 'rgba(15, 23, 42, 0.8)',
|
||
borderColor: 'rgba(255, 255, 255, 0.1)',
|
||
textStyle: { color: '#E0E0E0' },
|
||
formatter: '{b}: <strong style="color:#67e8f9;">{c}%</strong>'
|
||
},
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '3%',
|
||
containLabel: true
|
||
},
|
||
xAxis: {
|
||
type: 'value',
|
||
boundaryGap: [0, 0.01],
|
||
axisLabel: { color: '#94a3b8', formatter: '{value}%' },
|
||
splitLine: { lineStyle: { color: 'rgba(255, 255, 255, 0.1)' } }
|
||
},
|
||
yAxis: {
|
||
type: 'category',
|
||
data: chartData.map(item => item.name).reverse(),
|
||
axisLabel: { color: '#E0E0E0' }
|
||
},
|
||
series: [
|
||
{
|
||
name: '收入弹性',
|
||
type: 'bar',
|
||
data: chartData.map(item => item.value).reverse(),
|
||
itemStyle: {
|
||
color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
|
||
{ offset: 0, color: '#22d3ee' }, // cyan-400
|
||
{ offset: 1, color: '#06b6d4' } // cyan-500
|
||
]),
|
||
borderRadius: [0, 5, 5, 0],
|
||
},
|
||
emphasis: {
|
||
itemStyle: {
|
||
color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
|
||
{ offset: 0, color: '#67e8f9' }, // cyan-300
|
||
{ offset: 1, color: '#22d3ee' } // cyan-400
|
||
]),
|
||
}
|
||
},
|
||
label: {
|
||
show: true,
|
||
position: 'right',
|
||
formatter: '{c}%',
|
||
color: '#E0E0E0'
|
||
}
|
||
}
|
||
]
|
||
};
|
||
myChart.setOption(option);
|
||
|
||
window.addEventListener('resize', function(){
|
||
myChart.resize();
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |