vf/vf_react
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update pay ui

Browse Source
This commit is contained in:
zzlgreat
2025-12-05 13:29:18 +08:00
parent 20994cfb13
commit 48d9c76c5e
1008 changed files with 417880 additions and 486974 deletions
Download Patch File Download Diff File Expand all files Collapse all files

444
public/htmls/融券余额.html Normal file
View File

@@ -0,0 +1,444 @@
<!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.10.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>
<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap');
body {
font-family: 'Noto Sans SC', sans-serif;
background-color: #010416;
color: #d1d5db;
overflow-x: hidden;
position: relative;
}
.glass-card {
background: rgba(15, 23, 42, 0.4); /* slate-900 with opacity */
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(56, 189, 248, 0.1); /* sky-400 with opacity */
border-radius: 1.5rem; /* rounded-3xl */
transition: all 0.3s ease;
}
.glass-card:hover {
box-shadow: 0 0 30px rgba(56, 189, 248, 0.2);
border-color: rgba(56, 189, 248, 0.3);
}
.glow-text {
text-shadow: 0 0 8px rgba(56, 189, 248, 0.6);
}
.glow-border {
border-color: rgba(56, 189, 248, 0.2);
}
.bento-grid {
display: grid;
grid-gap: 1rem;
grid-template-columns: repeat(12, 1fr);
}
/* Background decorative elements inspired by James Turrell */
.turrell-light-1 {
position: absolute;
top: -20%;
left: -15%;
width: 800px;
height: 800px;
background: radial-gradient(circle, rgba(59, 130, 246, 0.15) 0%, rgba(59, 130, 246, 0) 60%);
z-index: 0;
pointer-events: none;
}
.turrell-light-2 {
position: absolute;
bottom: -30%;
right: -20%;
width: 1000px;
height: 1000px;
background: radial-gradient(circle, rgba(168, 85, 247, 0.1) 0%, rgba(168, 85, 247, 0) 70%);
z-index: 0;
pointer-events: none;
}
.timeline .timeline-item::before {
background-color: #38bdf8;
}
</style>
</head>
<body class="min-h-screen">
<div class="turrell-light-1"></div>
<div class="turrell-light-2"></div>
<div class="relative z-10 p-4 sm:p-6 lg:p-12 max-w-screen-2xl mx-auto">
<!-- Header -->
<header class="text-center mb-16 animate-fade-in-down">
<h1 class="text-4xl sm:text-5xl lg:text-6xl font-bold text-sky-300 glow-text tracking-wider">融券余额</h1>
<p class="mt-4 text-xl text-slate-400">深度研究报告</p>
<p class="mt-2 text-sm text-slate-500">北京价值前沿科技有限公司 AI投研agent：“价小前投研”</p>
</header>
<!-- Insight Section -->
<section class="mb-16">
<h2 class="text-3xl font-bold text-sky-400 mb-8 text-center glow-text">概念穿透分析 (Insight)</h2>
<div class="bento-grid">
<!-- Core Viewpoint -->
<div class="glass-card p-6 col-span-12 lg:col-span-8 animate-fade-in">
<h3 class="font-bold text-xl text-sky-300 mb-3">核心观点</h3>
<p class="text-slate-300 leading-relaxed">
“融券余额”已从一个反映市场多空博弈的动态指标，转变为一个体现<strong class="text-amber-400">强监管政策下市场结构性重塑的静态结果</strong>。当前，A股市场做空机制在总量层面已名存实亡，其核心驱动力是监管层为稳定市场而采取的逆周期调节。未来的关键看点并非余额的数值变化，而是这一“做空真空”状态对市场<strong class="text-amber-400">定价效率、波动性及微观交易行为</strong>的深远影响。
</p>
</div>
<!-- Core Logic -->
<div class="glass-card p-6 col-span-12 lg:col-span-4 animate-fade-in" style="animation-delay: 100ms;">
<h3 class="font-bold text-xl text-sky-300 mb-3">核心驱动力</h3>
<p class="text-slate-400 text-sm">政策驱动的强制性“去杠杆”与“去工具化”</p>
<ul class="mt-3 list-disc list-inside text-slate-300 space-y-2 text-sm">
<li><strong class="text-red-400">券源供给端：</strong>暂停并清零转融券业务，从源头切断最大券源供给。</li>
<li><strong class="text-red-400">交易成本端：</strong>保证金比例提至100%以上，大幅增加融券成本与难度。</li>
</ul>
</div>
<!-- Timeline -->
<div class="glass-card p-6 col-span-12 animate-fade-in" style="animation-delay: 200ms;">
<h3 class="font-bold text-xl text-sky-300 mb-6">核心事件时间轴</h3>
<ul class="timeline timeline-snap-icon max-md:timeline-compact timeline-vertical">
<li>
<div class="timeline-middle text-sky-400"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5"><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 md:text-end mb-10">
<time class="font-mono italic text-slate-400">2024.01.29</time>
<div class="text-lg font-black text-slate-200">暂停限售股出借</div>
<p class="text-slate-300">监管层全面暂停限售股出借，切断部分重要券源。</p>
</div>
<hr class="bg-sky-400"/>
</li>
<li>
<hr class="bg-sky-400"/><div class="timeline-middle text-sky-400"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5"><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-start mb-10">
<time class="font-mono italic text-slate-400">2024.07.10</time>
<div class="text-lg font-black text-slate-200">暂停转融券业务</div>
<p class="text-slate-300">监管宣布暂停转融券业务，要求存量9月30日前了结，成为规模萎缩的关键催化剂。</p>
</div>
<hr class="bg-sky-400"/>
</li>
<li>
<hr class="bg-sky-400"/><div class="timeline-middle text-sky-400"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5"><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 md:text-end mb-10">
<time class="font-mono italic text-slate-400">2024.07.22</time>
<div class="text-lg font-black text-slate-200">提高保证金比例</div>
<p class="text-slate-300">融券卖出保证金比例大幅提高至不低于100%，私募不低于120%。</p>
</div>
<hr class="bg-sky-400"/>
</li>
<li>
<hr class="bg-sky-400"/><div class="timeline-middle text-sky-400"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5"><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-start mb-10">
<time class="font-mono italic text-slate-400">2024.09.27</time>
<div class="text-lg font-black text-rose-400">转融券余额历史性清零</div>
<p class="text-slate-300">标志着通过转融通机制向市场提供券源的通道被彻底关闭。</p>
</div>
<hr/>
</li>
</ul>
</div>
<!-- Chart Section -->
<div class="glass-card p-6 col-span-12 lg:col-span-7 animate-fade-in" style="animation-delay: 300ms;">
<h3 class="font-bold text-xl text-sky-300 mb-3">融券余额趋势 (亿元)</h3>
<p class="text-sm text-slate-400 mb-4">数据显示，自2024年初以来，融券余额在监管政策影响下呈断崖式下跌。</p>
<div id="balanceChart" style="width: 100%; height: 400px;"></div>
</div>
<!-- Data Highlights -->
<div class="glass-card p-6 col-span-12 lg:col-span-5 animate-fade-in" style="animation-delay: 400ms;">
<h3 class="font-bold text-xl text-sky-300 mb-4">关键数据速览</h3>
<div class="space-y-4">
<div class="p-4 bg-slate-900/50 rounded-xl border border-slate-700">
<div class="stat-title text-slate-400">年初至今降幅</div>
<div class="stat-value text-red-400 text-4xl font-mono">>85%</div>
<div class="stat-desc text-slate-500">从年初超700亿元降至百亿水平</div>
</div>
<div class="p-4 bg-slate-900/50 rounded-xl border border-slate-700">
<div class="stat-title text-slate-400">较历史峰值降幅</div>
<div class="stat-value text-red-400 text-4xl font-mono">>90%</div>
<div class="stat-desc text-slate-500">市场卖空力量显著萎缩</div>
</div>
<div class="p-4 bg-slate-900/50 rounded-xl border border-slate-700">
<div class="stat-title text-slate-400">占A股流通市值比例</div>
<div class="stat-value text-sky-300 text-4xl font-mono">~0.01%</div>
<div class="stat-desc text-slate-500">较年初缩水超10倍，总量影响有限</div>
</div>
</div>
</div>
<!-- Expectation Analysis -->
<div class="glass-card p-6 col-span-12 animate-fade-in" style="animation-delay: 500ms;">
<h3 class="font-bold text-xl text-sky-300 mb-3">预期差分析：宏观钝化 vs 微观锐化</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-4">
<div>
<h4 class="font-semibold text-lg text-slate-200">市场共识 (宏观影响钝化)</h4>
<p class="mt-2 text-slate-300">融券余额占A股流通市值比例已降至0.01%，对市场的整体直接冲击“较小”。专家普遍认为此举有助于稳定市场情绪。</p>
</div>
<div class="border-t md:border-t-0 md:border-l border-sky-400/20 pt-4 md:pt-0 md:pl-6">
<h4 class="font-semibold text-lg text-rose-400">潜在预期差 (微观影响锐化)</h4>
<ul class="mt-2 list-disc list-inside text-slate-300 space-y-2">
<li><strong class="text-amber-400">信号价值放大：</strong>在券源稀缺背景下，任何新增融券行为可能蕴含更强的基本面看空逻辑。路演数据显示“融券余额变化率”因子依然有效。</li>
<li><strong class="text-amber-400">个股冲击巨大：</strong>融券机制的微小变动足以在个股层面引发“空头回补”或“筹码逼空”行情，市场可能低估了这种非线性冲击。</li>
</ul>
</div>
</div>
</div>
<!-- Risks -->
<div class="glass-card p-6 col-span-12 animate-fade-in" style="animation-delay: 600ms;">
<h3 class="font-bold text-xl text-red-400 mb-3">潜在风险与挑战</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div>
<h4 class="font-semibold text-lg text-slate-200">市场机制风险 (最核心)</h4>
<ul class="mt-2 text-slate-400 text-sm list-disc list-inside space-y-1">
<li><strong>定价效率降低:</strong> 缺乏有效做空机制，可能导致股价对负面信息反应滞后，增加泡沫风险。</li>
<li><strong>风险管理工具缺失:</strong> 机构缺少对冲工具，可能在市场下行时采取一致性抛售，反而加剧波动。</li>
</ul>
</div>
<div>
<h4 class="font-semibold text-lg text-slate-200">政策风险</h4>
<ul class="mt-2 text-slate-400 text-sm list-disc list-inside space-y-1">
<li><strong>政策长期化:</strong> 若严格限制成为常态，将对A股市场机构化、国际化进程构成挑战。</li>
<li><strong>政策突变:</strong> 若未来突然放开，可能导致被压抑的做空需求集中释放，造成短期冲击。</li>
</ul>
</div>
<div>
<h4 class="font-semibold text-lg text-slate-200">信息交叉验证风险</h4>
<ul class="mt-2 text-slate-400 text-sm list-disc list-inside space-y-1">
<li><strong>宏观 vs 微观影响矛盾:</strong> 普遍认为“影响小”，但个股案例和因子分析表明微观影响巨大。</li>
<li><strong>数据源冲突:</strong> 部分路演和新闻数据存在时间错误或内容矛盾，需审慎评估。</li>
</ul>
</div>
</div>
</div>
<!-- Investment Implications -->
<div class="glass-card p-6 col-span-12 animate-fade-in" style="animation-delay: 700ms;">
<h3 class="font-bold text-xl text-emerald-400 mb-3">综合结论与投资启示</h3>
<p class="text-slate-300 mb-4">当前市场处于一个政策驱动的<strong class="text-amber-400">“准做空失效”</strong>阶段。这并非主题炒作，而是一次深刻的<strong class="text-amber-400">市场生态变革</strong>。分析的价值已从总量判断转向微观挖掘。</p>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="p-4 bg-slate-900/50 rounded-xl border border-emerald-500/30">
<h4 class="font-semibold text-lg text-emerald-300">最具价值的方向</h4>
<ul class="mt-2 text-slate-300 text-sm list-decimal list-inside space-y-1">
<li><strong>“空头敞口”挖掘：</strong>跟踪少数仍有较高融券余额的个股，可能是发现高估风险或行业拐点的“金矿”。</li>
<li><strong>事件驱动策略：</strong>关注两融规则的任何微小变动，可能触发非对称交易机会。</li>
<li><strong>替代性对冲研究：</strong>研究股指期货/期权等工具，判断对冲需求是否外溢。</li>
</ul>
</div>
<div class="p-4 bg-slate-900/50 rounded-xl border border-sky-500/30">
<h4 class="font-semibold text-lg text-sky-300">需重点跟踪的指标</h4>
<ul class="mt-2 text-slate-300 text-sm list-decimal list-inside space-y-1">
<li><strong>高融券个股名单与行业集中度：</strong>验证空头火力焦点是否转移。</li>
<li><strong>高融券个股的业绩兑现度：</strong>判断做空方逻辑是否被证伪。</li>
<li><strong>股指期货/期权的基差与持仓：</strong>观察空头力量是否在衍生品市场集结。</li>
</ul>
</div>
<div class="p-4 bg-slate-900/50 rounded-xl border border-fuchsia-500/30">
<h4 class="font-semibold text-lg text-fuchsia-300">被融券个股画像</h4>
<p class="text-sm text-slate-300 mt-2">高度集中于<strong class="text-amber-400">半导体、新能源电池、生物医药、自动化设备</strong>等领域，普遍具备“高估值、高预期、强周期/技术迭代快”的特点。</p>
</div>
</div>
</div>
</div>
</section>
<!-- Stock Data Section -->
<section>
<h2 class="text-3xl font-bold text-sky-400 mb-8 text-center glow-text">数据结论：高融券余额个股分析</h2>
<div class="glass-card p-6 mb-8 animate-fade-in-up">
<h3 class="font-bold text-xl text-sky-300 mb-4">融券余额占流通市值比例较高个股 (截至24.07.10)</h3>
<p class="text-sm text-slate-400 mb-4">
数据显示，空头力量高度集中于特定行业，尤其是具备“三高”（高估值、高预期、高成长性）特征的科技与新兴产业。例如，<strong class="text-amber-400">铜冠铜箔</strong>（电池材料）位居榜首，可能反映了市场对新能源产业链部分环节产能过剩的担忧；而<strong class="text-amber-400">纳芯微、芯源微</strong>等半导体公司也榜上有名，体现了对该行业高估值和强周期性的博弈。
</p>
<div class="overflow-x-auto">
<table class="table table-sm w-full">
<thead>
<tr class="text-sky-300 border-b border-sky-800">
<th>排名</th>
<th>股票名称</th>
<th>股票代码</th>
<th>所属行业</th>
<th>融券余额(亿元)</th>
<th>占流通市值(%)</th>
</tr>
</thead>
<tbody>
<tr class="border-b border-slate-800 hover:bg-slate-800/50"><td>1</td><td>铜冠铜箔</td><td><a href="https://valuefrontier.cn/company?scode=301217" target="_blank" class="link link-hover">301217</a></td><td>电池</td><td>0.80</td><td class="text-red-400 font-semibold">3.01</td></tr>
<tr class="border-b border-slate-800 hover:bg-slate-800/50"><td>2</td><td>迈赫股份</td><td><a href="https://valuefrontier.cn/company?scode=301199" target="_blank" class="link link-hover">301199</a></td><td>自动化设备</td><td>0.23</td><td class="text-red-400 font-semibold">2.05</td></tr>
<tr class="border-b border-slate-800 hover:bg-slate-800/50"><td>3</td><td>英力股份</td><td><a href="https://valuefrontier.cn/company?scode=300956" target="_blank" class="link link-hover">300956</a></td><td>消费电子</td><td>0.22</td><td class="text-red-400 font-semibold">1.33</td></tr>
<tr class="border-b border-slate-800 hover:bg-slate-800/50"><td>4</td><td>纳芯微</td><td><a href="https://valuefrontier.cn/company?scode=688052" target="_blank" class="link link-hover">688052</a></td><td>半导体</td><td>0.73</td><td>0.88</td></tr>
<tr class="border-b border-slate-800 hover:bg-slate-800/50"><td>5</td><td>派能科技</td><td><a href="https://valuefrontier.cn/company?scode=688063" target="_blank" class="link link-hover">688063</a></td><td>电池</td><td>0.44</td><td>0.50</td></tr>
<tr class="border-b border-slate-800 hover:bg-slate-800/50"><td>6</td><td>燕麦科技</td><td><a href="https://valuefrontier.cn/company?scode=688312" target="_blank" class="link link-hover">688312</a></td><td>专用设备</td><td>0.16</td><td>0.50</td></tr>
<tr class="border-b border-slate-800 hover:bg-slate-800/50"><td>7</td><td>德方纳米</td><td><a href="https://valuefrontier.cn/company?scode=300769" target="_blank" class="link link-hover">300769</a></td><td>电池</td><td>0.37</td><td>0.56</td></tr>
<tr class="border-b border-slate-800 hover:bg-slate-800/50"><td>8</td><td>芯源微</td><td><a href="https://valuefrontier.cn/company?scode=688037" target="_blank" class="link link-hover">688037</a></td><td>半导体</td><td>0.55</td><td>0.48</td></tr>
<tr class="border-b border-slate-800 hover:bg-slate-800/50"><td>...</td><td>...</td><td>...</td><td>...</td><td>...</td><td>...</td></tr>
</tbody>
</table>
</div>
</div>
<div class="glass-card p-6 animate-fade-in-up" style="animation-delay: 200ms;">
<h3 class="font-bold text-xl text-sky-300 mb-4">涨幅异动与融券关联个股分析</h3>
<p class="text-sm text-slate-400 mb-4">
融券余额的变化对个股股价有直接且剧烈的影响。例如，<strong class="text-amber-400">键邦股份</strong>因“融券几乎清零”引发技术性空头回补而涨停；而<strong class="text-amber-400">金安国纪</strong>则因交易所调整导致“融券通道关闭”，引发了纯粹的筹码逼空行情。这证明了在当前市场生态下，融券机制的微观变动是重要的事件驱动交易信号。
</p>
<div class="overflow-x-auto">
<table class="table table-sm w-full">
<thead>
<tr class="text-sky-300 border-b border-sky-800">
<th>股票名称</th>
<th>股票代码</th>
<th>异动日期</th>
<th>涨跌幅</th>
<th>核心关联原因</th>
</tr>
</thead>
<tbody>
<tr class="border-b border-slate-800 hover:bg-slate-800/50">
<td>键邦股份</td>
<td><a href="https://valuefrontier.cn/company?scode=603285" target="_blank" class="link link-hover">603285</a></td>
<td>2025-09-04</td>
<td class="text-green-400">+9.99%</td>
<td class="text-amber-400">“两融余额降至地量+融券几乎清零”引发技术性空头回补。</td>
</tr>
<tr class="border-b border-slate-800 hover:bg-slate-800/50">
<td>金安国纪</td>
<td><a href="https://valuefrontier.cn/company?scode=002636" target="_blank" class="link link-hover">002636</a></td>
<td>2025-11-10</td>
<td class="text-green-400">+10.02%</td>
<td class="text-amber-400">两融折算率降为0，“融资盘封顶+融券通道关闭”引发纯筹码逼空。</td>
</tr>
<tr class="border-b border-slate-800 hover:bg-slate-800/50">
<td>七 匹 狼</td>
<td><a href="https://valuefrontier.cn/company?scode=002029" target="_blank" class="link link-hover">002029</a></td>
<td>2025-10-20</td>
<td class="text-green-400">+10.06%</td>
<td class="text-amber-400">融资余额创近一年新高，触发短线资金博弈。</td>
</tr>
<tr class="border-b border-slate-800 hover:bg-slate-800/50">
<td>迪生力</td>
<td><a href="https://valuefrontier.cn/company?scode=603335" target="_blank" class="link link-hover">603335</a></td>
<td>2025-09-26</td>
<td class="text-green-400">+10.09%</td>
<td class="text-amber-400">融资余额创历史新高被量化策略捕捉，引发程序化资金点火。</td>
</tr>
<tr class="border-b border-slate-800 hover:bg-slate-800/50">
<td>顺灏股份</td>
<td><a href="https://valuefrontier.cn/company?scode=002565" target="_blank" class="link link-hover">002565</a></td>
<td>2025-07-02</td>
<td class="text-green-400">+5.85%</td>
<td class="text-amber-400">融资余额创历史新高，杠杆资金大量入场。</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<!-- Footer -->
<footer class="text-center mt-16 pt-8 border-t border-slate-800">
<p class="text-xs text-slate-500">本报告由北京价值前沿科技有限公司 AI投研agent：“价小前投研” 合成呈现。</p>
<p class="text-xs text-slate-600 mt-1">数据来源：公开新闻、券商路演、研究报告及市场数据。本报告为AI合成数据，仅供参考，不构成任何投资建议，投资需谨慎。</p>
</footer>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
var chartDom = document.getElementById('balanceChart');
var myChart = echarts.init(chartDom);
var option;
// Data extracted from news
const data = [
{ date: '2024-01-01', value: 715.97 }, // 年初数据
{ date: '2024-07-22', value: 279.02 },
{ date: '2024-08-02', value: 212.00 },
{ date: '2024-08-19', value: 137.00 },
{ date: '2024-08-30', value: 113.95 },
{ date: '2024-09-06', value: 106.44 },
{ date: '2024-10-16', value: 90.68 },
{ date: '2024-12-10', value: 105.95 }
];
option = {
backgroundColor: 'transparent',
tooltip: {
trigger: 'axis',
backgroundColor: 'rgba(15, 23, 42, 0.8)',
borderColor: '#0ea5e9',
textStyle: {
color: '#e2e8f0'
},
formatter: function (params) {
return `${params[0].axisValueLabel}<br/>融券余额: ${params[0].value} 亿元`;
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'time',
boundaryGap: false,
axisLine: { lineStyle: { color: '#475569' } },
axisLabel: { color: '#94a3b8' }
},
yAxis: {
type: 'value',
name: '亿元',
nameTextStyle: {
color: '#94a3b8'
},
axisLine: { show: true, lineStyle: { color: '#475569' } },
axisLabel: { color: '#94a3b8' },
splitLine: { lineStyle: { color: '#1e293b' } }
},
series: [{
name: '融券余额',
type: 'line',
smooth: true,
symbol: 'none',
data: data.map(item => [item.date, item.value]),
itemStyle: {
color: '#38bdf8'
},
lineStyle: {
width: 3,
color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [{
offset: 0, color: '#a855f7' // purple-500
}, {
offset: 1, color: '#38bdf8' // sky-500
}]
},
shadowColor: 'rgba(56, 189, 248, 0.5)',
shadowBlur: 10
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(56, 189, 248, 0.3)'
}, {
offset: 1,
color: 'rgba(56, 189, 248, 0)'
}])
}
}]
};
option && myChart.setOption(option);
window.addEventListener('resize', myChart.resize);
});
</script>
</body>
</html>