Files
vf_react/public/htmls/汽车零部件 企业应收账款周转天数.html
2025-12-05 13:29:18 +08:00

481 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.

<!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>
<!-- Tailwind CSS & DaisyUI -->
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.10.1/dist/full.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.tailwindcss.com"></script>
<!-- Alpine.js -->
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<!-- ECharts -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js"></script>
<!-- Google Fonts -->
<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;700&family=Orbitron:wght@400;700&display=swap" rel="stylesheet">
<style>
:root {
--glow-color-primary: rgba(0, 225, 255, 0.75);
--glow-color-secondary: rgba(192, 72, 255, 0.6);
--bg-color-start: #0a0514;
--bg-color-end: #000000;
--card-bg: rgba(15, 23, 42, 0.5); /* slate-900 with opacity */
--card-border: rgba(56, 189, 248, 0.2); /* sky-400 with opacity */
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Inter', sans-serif;
background-color: var(--bg-color-end);
color: #e0e0e0;
overflow-x: hidden;
}
.orbitron {
font-family: 'Orbitron', sans-serif;
}
#bg-canvas {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background-image:
radial-gradient(ellipse 80% 80% at 20% 20%, rgba(55, 65, 81, 0.3), transparent),
radial-gradient(ellipse 60% 60% at 80% 75%, rgba(37, 99, 235, 0.2), transparent);
animation: pulse-bg 20s infinite ease-in-out;
}
@keyframes pulse-bg {
0% { background-position: 0% 50%, 0% 50%; }
50% { background-position: 100% 50%, 100% 50%; }
100% { background-position: 0% 50%, 0% 50%; }
}
.glass-card {
background-color: var(--card-bg);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-radius: 2rem;
border: 1px solid var(--card-border);
box-shadow: 0 0 40px rgba(0, 225, 255, 0.1), 0 0 60px rgba(192, 72, 255, 0.05);
transition: all 0.3s ease;
}
.glass-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 50px rgba(0, 225, 255, 0.15), 0 0 80px rgba(192, 72, 255, 0.1);
}
.glow-text {
text-shadow: 0 0 8px var(--glow-color-primary), 0 0 10px var(--glow-color-primary);
}
.bento-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
}
.bento-item {
grid-column: span 1;
}
.bento-item-large {
grid-column: span 2;
}
@media (max-width: 768px) {
.bento-item-large {
grid-column: span 1;
}
}
.section-header::before {
content: ':: ';
color: #00e1ff;
}
.tab-active {
color: #fff !important;
background-color: rgba(0, 225, 255, 0.1) !important;
border-bottom: 2px solid #00e1ff !important;
text-shadow: 0 0 5px #00e1ff;
}
.table thead th {
background-color: rgba(0, 225, 255, 0.05);
color: #00e1ff;
border-bottom: 1px solid rgba(0, 225, 255, 0.3);
}
.table tbody tr {
border-bottom-color: rgba(56, 189, 248, 0.1);
}
.table tbody tr:hover {
background-color: rgba(56, 189, 248, 0.08);
}
.disclaimer {
background: linear-gradient(90deg, rgba(192, 72, 255, 0.2), rgba(0, 225, 255, 0.2));
padding: 0.5rem 1rem;
border-radius: 9999px;
font-size: 0.8rem;
border: 1px solid rgba(255, 255, 255, 0.1);
}
</style>
</head>
<body class="min-h-screen">
<div id="bg-canvas"></div>
<div class="container mx-auto px-4 py-8 md:py-16">
<!-- Header -->
<header class="text-center mb-16 animate-fade-in-down">
<h1 class="orbitron text-4xl md:text-6xl font-bold text-white glow-text mb-4">
汽车零部件企业应收账款周转天数
</h1>
<p class="text-xl text-sky-300 mb-6">深度投研报告</p>
<div class="flex justify-center">
<p class="disclaimer text-slate-300">
北京价值前沿科技有限公司 AI投研agent“价小前投研” 进行投研呈现本报告为AI合成数据投资需谨慎。
</p>
</div>
</header>
<!-- Insight Section -->
<section id="insight" class="mb-16">
<div class="glass-card p-6 md:p-10">
<h2 class="orbitron section-header text-3xl font-bold text-sky-300 mb-8">概念洞察 (Insight)</h2>
<div class="space-y-12">
<div>
<h3 class="text-2xl font-bold text-white mb-4">核心观点摘要</h3>
<p class="text-slate-300 leading-relaxed text-lg p-6 bg-slate-900/50 rounded-2xl border border-slate-700">
“汽车零部件企业应收账款周转天数”概念的核心是一场由<strong class="text-cyan-300">政策驱动的、针对行业系统性顽疾的预期修复</strong>。其根本驱动力在于行业协会与政府主导的“60天账期”倡议旨在扭转因主机厂激烈内卷而导致的供应链现金流恶化局面。当前该概念已走过最初的事件催化阶段市场正在从“普惠”的乐观预期转向对企业个体执行效果和受益程度进行分化定价的关键时期未来潜力在于挖掘那些<strong class="text-purple-300">“高周转天数、核心客户为履约能力强的主机厂、自身议价能力弱”</strong>的企业所蕴含的巨大现金流改善价值。
</p>
</div>
<div class="bento-grid">
<div class="glass-card p-6 bento-item bento-item-large">
<h3 class="text-xl font-bold text-white mb-4">概念事件演进</h3>
<ul class="timeline timeline-vertical">
<li>
<div class="timeline-start timeline-box">第一阶段:压力累积期 (2024年初至9月前)</div>
<div class="timeline-middle">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5 text-red-500"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm.75-13a.75.75 0 00-1.5 0v5c0 .414.336.75.75.75h4a.75.75 0 000-1.5h-3.25V5z" clip-rule="evenodd" /></svg>
</div>
<div class="timeline-end p-4 bg-red-900/20 rounded-box border border-red-500/30">
<p class="text-sm">新能源车“价格战”传导压力零部件企业应收账款周期拉长Q2行业周转天数同比增加3.6天。</p>
</div>
<hr class="bg-red-500"/>
</li>
<li>
<hr class="bg-cyan-500"/>
<div class="timeline-start timeline-box">第二阶段:政策介入期 (2024年9月15日)</div>
<div class="timeline-middle">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5 text-cyan-400"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd" /></svg>
</div>
<div class="timeline-end p-4 bg-cyan-900/20 rounded-box border border-cyan-500/30">
<p class="text-sm">中汽协发布“支付账期最长不超60天”倡议获工信部支持和17家重点车企响应引爆市场。</p>
</div>
<hr class="bg-cyan-500"/>
</li>
<li>
<hr class="bg-purple-500"/>
<div class="timeline-start timeline-box">第三阶段:预期发酵期 (2024年9月15日至今)</div>
<div class="timeline-middle">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5 text-purple-400"><path d="M10 3.75a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5a.75.75 0 01.75-.75zM10 8.75a.75.75 0 01.75.75v.008a.75.75 0 01-1.5 0V9.5A.75.75 0 0110 8.75z" /><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.25 13.5a.75.75 0 01.75-.75h.008a.75.75 0 010 1.5H10a.75.75 0 01-.75-.75zM8 10a2 2 0 114 0 2 2 0 01-4 0z" clip-rule="evenodd" /></svg>
</div>
<div class="timeline-end p-4 bg-purple-900/20 rounded-box border border-purple-500/30">
<p class="text-sm">市场形成“政策改善现金流”核心逻辑,从主题炒作转向基本面验证,寻找最受益标的。</p>
</div>
</li>
</ul>
</div>
<div class="glass-card p-6 bento-item">
<h3 class="text-xl font-bold text-white mb-4">核心驱动力</h3>
<ul class="space-y-3 list-disc list-inside text-slate-300">
<li><strong class="text-cyan-400">政策强力介入:</strong> 17家主流车企集体承诺赋予倡议强约束力。</li>
<li><strong class="text-cyan-400">基本面修复逻辑:</strong> 账期缩短带来“一次性现金流释放”和“持续性利润增厚”双重利好。</li>
<li><strong class="text-cyan-400">行业健康发展诉求:</strong> 维护产业链长期竞争力,为政策持续性提供保障。</li>
</ul>
</div>
<div class="glass-card p-6 bento-item">
<h3 class="text-xl font-bold text-white mb-4">关键催化剂 (未来3-6个月)</h3>
<ul class="space-y-3 list-disc list-inside text-slate-300">
<li><strong class="text-purple-400">Q3/Q4财报发布:</strong> 验证倡议落地效果的第一个试金石。</li>
<li><strong class="text-purple-400">监管或协会跟进:</strong> 发布落实情况通报或将“倡议”升级为“规范”。</li>
<li><strong class="text-purple-400">更多车企公开承诺:</strong> 扩大政策覆盖面,强化市场信心。</li>
</ul>
</div>
</div>
<div>
<h3 class="text-2xl font-bold text-white mb-4">潜在风险与挑战</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="p-4 bg-yellow-900/20 rounded-2xl border border-yellow-500/30">
<h4 class="font-bold text-yellow-300 mb-2">商业化风险 (执行风险)</h4>
<p class="text-sm text-slate-300">“倡议”不具法律强制性,未来“价格战”中主机厂履约意愿和能力存疑。</p>
</div>
<div class="p-4 bg-orange-900/20 rounded-2xl border border-orange-500/30">
<h4 class="font-bold text-orange-300 mb-2">政策与竞争风险</h4>
<p class="text-sm text-slate-300">政策执行分化,或强势主机厂通过压价转嫁成本,零部件企业利润空间仍未改善。</p>
</div>
<div class="p-4 bg-red-900/20 rounded-2xl border border-red-500/30">
<h4 class="font-bold text-red-300 mb-2">信息交叉验证风险</h4>
<p class="text-sm text-slate-300">市场可能过度price-in利好忽略执行复杂性。行业Q2仍在恶化改善并非易事。</p>
</div>
</div>
</div>
<div>
<h3 class="text-2xl font-bold text-white mb-4">投资启示</h3>
<div class="p-6 bg-slate-900/50 rounded-2xl border border-slate-700 space-y-4">
<p><strong class="text-sky-300">阶段判断:</strong> 概念正处于从“事件驱动的主题炒作”向“基本面驱动的业绩验证”过渡的关键阶段。下一阶段将是基于财报数据的去伪存真和个股分化行情。</p>
<p><strong class="text-sky-300">最具投资价值的方向:</strong></p>
<ul class="list-decimal list-inside ml-4 space-y-2 text-slate-300">
<li><strong class="text-white">“困境反转”型:</strong> 寻找 <span class="text-purple-300">应收账款周转天数高 + 应付账款周转天数短 + 核心客户为17家承诺车企</span> 的公司。</li>
<li><strong class="text-white">“价值重估”型:</strong> 寻找本身质地优良,但因行业回款问题被压制估值的细分龙头。</li>
</ul>
<p><strong class="text-sky-300">需重点跟踪的关键指标:</strong></p>
<ul class="list-decimal list-inside ml-4 space-y-2 text-slate-300">
<li><strong class="text-white">财务指标:</strong> 应收账款周转天数(季度变化),经营活动现金流净额/净利润比值。</li>
<li><strong class="text-white">行业动态:</strong> 主机厂履约情况,后续政策跟进,价格条款变化。</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- Data Deep Dive Section -->
<section id="data-dive" class="mb-16" x-data="{ tab: 'news' }">
<div class="glass-card p-6 md:p-10">
<h2 class="orbitron section-header text-3xl font-bold text-sky-300 mb-8">多维数据源分析</h2>
<div role="tablist" class="tabs tabs-boxed bg-slate-900/50 mb-6">
<a role="tab" class="tab tab-lg" :class="{ 'tab-active': tab === 'news' }" @click.prevent="tab = 'news'">新闻数据</a>
<a role="tab" class="tab tab-lg" :class="{ 'tab-active': tab === 'roadshow' }" @click.prevent="tab = 'roadshow'">路演数据</a>
<a role="tab" class="tab tab-lg" :class="{ 'tab-active': tab === 'research' }" @click.prevent="tab = 'research'">研报数据</a>
</div>
<!-- News Panel -->
<div x-show="tab === 'news'" class="space-y-6">
<h3 class="text-xl font-bold text-white">核心倡议内容支付账期最长不超60天</h3>
<blockquote class="border-l-4 border-cyan-400 pl-4 italic text-slate-300">
"中国汽车工业协会就‘整车企业供应商账款支付规范’发出倡议...倡议内容包括在支付与结算环节整车企业支付账期自供应商交货并通过整车企业验收合格之日起计算最长不超过60个自然日。"
</blockquote>
<h3 class="text-xl font-bold text-white">行业现状与问题</h3>
<blockquote class="border-l-4 border-yellow-400 pl-4 italic text-slate-300">
"汽车供应链上下游企业中,有相当比例的公司都面临着价格与账期的双重挤压...应收账款规模增加、周期拉长成为重要特征。车企庞大的应付账款规模和沉淀资金,使供应链上的公司现金流紧绷。"
</blockquote>
<h3 class="text-xl font-bold text-white">各方积极响应</h3>
<p class="text-slate-300">一汽、东风、比亚迪、理想、蔚来、小鹏和小米汽车等17家重点整车企业均表示积极落实倡议。工信部表示支持将推动构建“整车—零部件”协作共赢发展生态。</p>
<h3 class="text-xl font-bold text-white">市场反应</h3>
<blockquote class="border-l-4 border-green-400 pl-4 italic text-slate-300">
"【汽车零部件板块持续拉升 近十家成分股涨停】...消息面上9月15日中国汽车工业协会发布《汽车整车企业供应商账款支付规范倡议》。"
</blockquote>
</div>
<!-- Roadshow Panel -->
<div x-show="tab === 'roadshow'" class="space-y-6">
<h3 class="text-xl font-bold text-white">行业整体趋势 (截至2024年Q2)</h3>
<div class="stats stats-vertical lg:stats-horizontal shadow bg-slate-900/50 w-full">
<div class="stat">
<div class="stat-title text-slate-400">应收账款周转天数 (同比)</div>
<div class="stat-value text-red-400">+3.6 天</div>
<div class="stat-desc">与去年同期比,回款压力增加</div>
</div>
<div class="stat">
<div class="stat-title text-slate-400">应收账款周转天数 (环比)</div>
<div class="stat-value text-green-400">-3.5 天</div>
<div class="stat-desc">相较于Q1情况有所改善</div>
</div>
</div>
<p class="text-slate-400 text-sm">数据来源国联汽车2024年中报业绩综述覆盖194家零部件企业。</p>
<h3 class="text-xl font-bold text-white">个别公司表现:分化显著</h3>
<ul class="list-disc list-inside space-y-3 text-slate-300">
<li>某零部件公司(“国投股份”代指): 应收账款周转天数从2023年的 <strong class="text-yellow-300">150+ 天降至 100 天</strong>,客户回款改善明显。</li>
<li>怡合达: 2025年Q1应收账款周转天数 <strong class="text-green-300">减少 11.11 天</strong>,运营效率改善。</li>
</ul>
<p class="text-slate-200">结论:虽然行业整体同比承压,但环比已现改善迹象,且部分优质公司在应收账款管理上已取得显著成效。</p>
</div>
<!-- Research Panel -->
<div x-show="tab === 'research'" class="space-y-6">
<h3 class="text-xl font-bold text-white">研报核心观点 (2024年2-4月)</h3>
<p class="text-slate-300">在“60天账期”倡议提出前多家券商研报已高度关注应收账款问题并将其列为核心风险。主要观点如下</p>
<ul class="list-disc list-inside space-y-3 text-slate-300">
<li><strong class="text-red-400">风险提示:</strong> 若企业应收账款周转天数持续恶化(如整车厂回款延迟),可能进一步压制零部件板块的估值修复空间。</li>
<li><strong class="text-yellow-400">潜在影响:</strong> 汽车以旧换新等政策虽能拉动营收,但需关注回款周期是否同步改善,避免应收账款被动延长。</li>
<li><strong class="text-green-400">投资建议:</strong> 建议优先选择<strong class="text-white">应收账款周转天数较短、现金流稳定的公司</strong>,以降低坏账风险。</li>
<li><strong class="text-blue-400">交叉印证:</strong> 特斯拉销量下滑原因提及“红海危机导致零部件运力短缺”,反映了行业经营环境变化对供应链支付节奏的潜在影响。</li>
</ul>
<p class="text-slate-400 text-sm">注:早期研报多为定性分析和风险预警,缺少具体周转天数数据,但为后续政策出台的必要性提供了背景印证。</p>
</div>
</div>
</section>
<!-- Visualization Section -->
<section id="visualization" class="mb-16">
<div class="glass-card p-6 md:p-10">
<h2 class="orbitron section-header text-3xl font-bold text-sky-300 mb-8">相关企业应收账款周转天数对比</h2>
<div id="echarts-main" class="w-full h-[500px]"></div>
</div>
</section>
<!-- Core Companies Table Section -->
<section id="companies">
<div class="glass-card p-6 md:p-10">
<h2 class="orbitron section-header text-3xl font-bold text-sky-300 mb-8">核心相关企业数据列表</h2>
<div class="overflow-x-auto">
<table class="table table-zebra w-full">
<thead>
<tr>
<th>排名</th>
<th>股票名称</th>
<th>应收账款周转天数</th>
<th>应付账款周转天数</th>
<th>2024营业收入(亿元)</th>
<th>状态</th>
</tr>
</thead>
<tbody id="stock-table-body">
<!-- Data will be populated by JavaScript -->
</tbody>
</table>
</div>
</div>
</section>
</div>
<script>
const stockData = [
{"stock":"美晨科技","reason":"汽车零部件企业,图表按应收账款周转天数排序","其他标签":{"2024营业收入(亿元)":17.79,"应收账款及应收票据周转天数":268,"应付账款周转天数":420,"状态":"制图/更新时涨幅>10%"}},
{"stock":"湖南天雁","reason":"汽车零部件企业,图表按应收账款周转天数排序","其他标签":{"2024营业收入(亿元)":4.32,"应收账款及应收票据周转天数":239,"应付账款周转天数":209},"stock_code":"600698"},
{"stock":"朗博科技","reason":"汽车零部件企业,图表按应收账款周转天数排序","其他标签":{"2024营业收入(亿元)":2.31,"应收账款及应收票据周转天数":236,"应付账款周转天数":49,"状态":"制图/更新时涨幅>10%"},"stock_code":"603655"},
{"stock":"合力科技","reason":"汽车零部件企业,图表按应收账款周转天数排序","其他标签":{"2024营业收入(亿元)":5.85,"应收账款及应收票据周转天数":235,"应付账款周转天数":97,"状态":"制图/更新时涨幅>10%"},"stock_code":"603917"},
{"stock":"同心传动","reason":"汽车零部件企业,图表按应收账款周转天数排序","其他标签":{"2024营业收入(亿元)":1.33,"应收账款及应收票据周转天数":230,"应付账款周转天数":89,"状态":"制图/更新时涨幅>10%"},"stock_code":"920454"},
{"stock":"兆丰股份","reason":"汽车零部件企业,图表按应收账款周转天数排序","其他标签":{"2024营业收入(亿元)":6.65,"应收账款及应收票据周转天数":222,"应付账款周转天数":201},"stock_code":"300695"},
{"stock":"威帝股份","reason":"汽车零部件企业,图表按应收账款周转天数排序","其他标签":{"2024营业收入(亿元)":0.65,"应收账款及应收票据周转天数":213,"应付账款周转天数":296},"stock_code":"603023"},
{"stock":"无锡振华","reason":"汽车零部件企业,图表按应收账款周转天数排序","其他标签":{"2024营业收入(亿元)":25.3,"应收账款及应收票据周转天数":213,"应付账款周转天数":265},"stock_code":"605319"},
{"stock":"远东传动","reason":"汽车零部件企业,图表按应收账款周转天数排序","其他标签":{"2024营业收入(亿元)":12.76,"应收账款及应收票据周转天数":209,"应付账款周转天数":87},"stock_code":"002406"},
{"stock":"光庭信息","reason":"汽车零部件企业,图表按应收账款周转天数排序","其他标签":{"2024营业收入(亿元)":6.07,"应收账款及应收票据周转天数":208,"应付账款周转天数":52},"stock_code":"301221"},
{"stock":"亚通精工","reason":"汽车零部件企业,图表按应收账款周转天数排序","其他标签":{"2024营业收入(亿元)":17.45,"应收账款及应收票据周转天数":207,"应付账款周转天数":109},"stock_code":"603190"},
{"stock":"奥福科技","reason":"汽车零部件企业,图表按应收账款周转天数排序","其他标签":{"2024营业收入(亿元)":2.84,"应收账款及应收票据周转天数":206,"应付账款周转天数":62},"stock_code":"688021"},
{"stock":"通达电气","reason":"汽车零部件企业,图表按应收账款周转天数排序","其他标签":{"2024营业收入(亿元)":6.65,"应收账款及应收票据周转天数":192,"应付账款周转天数":121,"状态":"制图/更新时涨幅>10%"},"stock_code":"603390"},
{"stock":"鑫宏业","reason":"汽车零部件企业,图表按应收账款周转天数排序","其他标签":{"2024营业收入(亿元)":26.47,"应收账款及应收票据周转天数":188,"应付账款周转天数":45},"stock_code":"301310"},
{"stock":"贵航股份","reason":"汽车零部件企业,图表按应收账款周转天数排序","其他标签":{"2024营业收入(亿元)":23.8,"应收账款及应收票据周转天数":187,"应付账款周转天数":109},"stock_code":"600523"},
{"stock":"浙江华远","reason":"汽车零部件企业,图表按应收账款周转天数排序","其他标签":{"2024营业收入(亿元)":6.81,"应收账款及应收票据周转天数":186,"应付账款周转天数":126},"stock_code":"301535"},
{"stock":"宁波方正","reason":"汽车零部件企业,图表按应收账款周转天数排序","其他标签":{"2024营业收入(亿元)":9.69,"应收账款及应收票据周转天数":186,"应付账款周转天数":124},"stock_code":"300998"},
{"stock":"凯龙高科","reason":"汽车零部件企业,图表按应收账款周转天数排序","其他标签":{"2024营业收入(亿元)":5.78,"应收账款及应收票据周转天数":181,"应付账款周转天数":164},"stock_code":"300912"},
{"stock":"开特股份","reason":"汽车零部件企业,图表按应收账款周转天数排序","其他标签":{"2024营业收入(亿元)":8.26,"应收账款及应收票据周转天数":181,"应付账款周转天数":107},"stock_code":"920978"},
{"stock":"天润工业","reason":"汽车零部件企业,图表按应收账款周转天数排序","其他标签":{"2024营业收入(亿元)":36.16,"应收账款及应收票据周转天数":179,"应付账款周转天数":80},"stock_code":"002283"}
];
// ECharts Initialization
document.addEventListener('DOMContentLoaded', function () {
const chartDom = document.getElementById('echarts-main');
const myChart = echarts.init(chartDom);
const chartData = stockData.slice(0, 15).reverse(); // show top 15 for better visualization
const option = {
backgroundColor: 'transparent',
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow' },
backgroundColor: 'rgba(0, 20, 40, 0.8)',
borderColor: '#00e1ff',
textStyle: { color: '#fff' }
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value',
boundaryGap: [0, 0.01],
axisLabel: { color: '#a0aec0' },
splitLine: { lineStyle: { color: 'rgba(255, 255, 255, 0.1)' } }
},
yAxis: {
type: 'category',
data: chartData.map(item => item.stock),
axisLabel: { color: '#cbd5e0', fontSize: 12 }
},
series: [
{
name: '应收账款周转天数',
type: 'bar',
data: chartData.map(item => item.其他标签['应收账款及应收票据周转天数']),
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: '#833ab4' },
{ offset: 0.5, color: '#fd1d1d' },
{ offset: 1, color: '#fcb045' }
])
},
emphasis: {
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: '#a855f7' },
{ offset: 0.5, color: '#ef4444' },
{ offset: 1, color: '#f59e0b' }
])
}
}
}
]
};
myChart.setOption(option);
window.addEventListener('resize', myChart.resize);
// Populate Table
const tableBody = document.getElementById('stock-table-body');
let tableHtml = '';
stockData.forEach((item, index) => {
const tags = item.其他标签;
const stockName = item.stock_code
? `<a href="https://valuefrontier.cn/company?scode=${item.stock_code}" target="_blank" class="link link-hover text-sky-400">${item.stock} (${item.stock_code})</a>`
: `${item.stock}`;
const statusHtml = tags.状态 === '制图/更新时涨幅>10%'
? `<span class="inline-flex items-center gap-2"><div class="badge badge-error badge-xs animate-pulse"></div> 活跃</span>`
: '-';
tableHtml += `
<tr>
<th>${index + 1}</th>
<td>${stockName}</td>
<td><span class="font-bold text-lg text-red-400">${tags['应收账款及应收票据周转天数']}</span> 天</td>
<td><span class="font-bold text-lg text-yellow-400">${tags['应付账款周转天数']}</span> 天</td>
<td>${tags['2024营业收入(亿元)']}</td>
<td>${statusHtml}</td>
</tr>
`;
});
tableBody.innerHTML = tableHtml;
});
</script>
</body>
</html>