Files
vf_react/public/htmls/小红书概念股.html
2025-12-05 13:29:18 +08:00

534 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>
<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=Inter:wght@300;400;500;600;700&display=swap');
body {
font-family: 'Inter', sans-serif;
background-color: #010007;
background-image:
radial-gradient(at 27% 37%, hsla(215, 98%, 61%, 0.1) 0px, transparent 50%),
radial-gradient(at 97% 21%, hsla(125, 98%, 72%, 0.1) 0px, transparent 50%),
radial-gradient(at 52% 99%, hsla(355, 98%, 76%, 0.15) 0px, transparent 50%),
radial-gradient(at 10% 29%, hsla(256, 96%, 68%, 0.1) 0px, transparent 50%),
radial-gradient(at 97% 96%, hsla(38, 60%, 74%, 0.1) 0px, transparent 50%),
radial-gradient(at 33% 50%, hsla(222, 67%, 73%, 0.1) 0px, transparent 50%),
radial-gradient(at 79% 53%, hsla(343, 68%, 79%, 0.1) 0px, transparent 50%);
color: #E0E0E0;
}
.glass-card {
background: rgba(15, 15, 35, 0.4);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 1.5rem; /* 24px */
transition: all 0.3s ease;
}
.glass-card:hover {
border-color: rgba(0, 255, 255, 0.3);
box-shadow: 0 0 30px rgba(0, 255, 255, 0.1);
}
.glow-text-cyan {
text-shadow: 0 0 8px rgba(0, 255, 255, 0.7), 0 0 12px rgba(0, 255, 255, 0.5);
}
.glow-text-magenta {
text-shadow: 0 0 8px rgba(255, 0, 255, 0.7), 0 0 12px rgba(255, 0, 255, 0.5);
}
.glow-border {
position: relative;
}
.glow-border::before {
content: '';
position: absolute;
top: -1px; left: -1px;
width: calc(100% + 2px);
height: calc(100% + 2px);
border-radius: 1.5rem;
background: conic-gradient(from 180deg at 50% 50%, rgba(0, 255, 255, 0.7) 0deg, rgba(255, 0, 255, 0.7) 180deg, rgba(0, 255, 255, 0.7) 360deg);
z-index: -1;
animation: spin 4s linear infinite;
opacity: 0;
transition: opacity 0.3s ease;
}
.glass-card:hover .glow-border::before {
opacity: 1;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.bento-grid {
display: grid;
gap: 1.5rem;
grid-template-columns: repeat(1, 1fr);
}
@media (min-width: 1024px) {
.bento-grid {
grid-template-columns: repeat(6, 1fr);
}
.bento-span-2 { grid-column: span 2 / span 2; }
.bento-span-3 { grid-column: span 3 / span 3; }
.bento-span-4 { grid-column: span 4 / span 4; }
.bento-span-6 { grid-column: span 6 / span 6; }
}
h1, h2, h3 {
letter-spacing: -0.02em;
}
h1 {
font-size: 3.5rem;
font-weight: 700;
}
h2 {
font-size: 2.25rem;
font-weight: 600;
}
h3 {
font-size: 1.5rem;
font-weight: 500;
}
.table th, .table td {
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.table th {
color: #00E5FF;
}
</style>
</head>
<body class="min-h-screen p-4 sm:p-8">
<div class="max-w-7xl mx-auto space-y-8">
<!-- Header -->
<header class="text-center py-8">
<h1 class="text-cyan-400 glow-text-cyan">深度研报:小红书概念股</h1>
<p class="mt-4 text-gray-400 max-w-2xl mx-auto">
北京价值前沿科技有限公司 AI投研agent“价小前投研” 进行投研呈现本报告为AI合成数据投资需谨慎。
</p>
</header>
<!-- Bento Grid Summary -->
<section class="bento-grid">
<div class="glass-card p-6 bento-span-2 glow-border">
<h3 class="text-fuchsia-400 glow-text-magenta">核心事件催化剂</h3>
<p class="mt-4 text-gray-300">
2025年1月TikTok美国禁令生效预期引发大规模用户迁移小红书国际版RedNote流量激增在美、英等80余国登顶应用榜首被视为“TikTok难民”避风港引爆资本市场关注。
</p>
</div>
<div class="glass-card p-6 bento-span-2 glow-border">
<h3 class="text-fuchsia-400 glow-text-magenta">核心投资逻辑</h3>
<p class="mt-4 text-gray-300">
“泼天流量”与“商业化加速”的双重共振。海外流量价值重估打开全球化想象空间,国内已验证的“种草-拔草”商业闭环(广告+电商为流量变现提供坚实基础产业链价值外溢至A股核心服务商。
</p>
</div>
<div class="glass-card p-6 bento-span-2 glow-border">
<h3 class="text-fuchsia-400 glow-text-magenta">关键商业数据</h3>
<p class="mt-4 text-gray-300">
<span class="text-cyan-400 font-semibold">2023年</span>实现净利润5亿美元。<br>
<span class="text-cyan-400 font-semibold">2024年目标</span>广告流水300亿电商GMV 800亿。<br>
<span class="text-cyan-400 font-semibold">2025年预期</span>电商GMV目标2000-3000亿。
</p>
</div>
</section>
<!-- Insight Analysis Section -->
<section class="space-y-8">
<h2 class="text-center text-cyan-400 glow-text-cyan pt-8">概念深度洞察 (Insight)</h2>
<div class="glass-card p-8 space-y-6">
<h3 class="text-fuchsia-400 glow-text-magenta">0. 概念事件脉络</h3>
<ul class="list-disc list-inside space-y-3 text-gray-300">
<li><strong class="text-cyan-400">背景铺垫 (2023-2024):</strong> 小红书自身商业化加速,上线“市集”、推“买手橱窗”、与京东合作“红京计划”、获支付牌照,构建商业闭环。财务数据亮眼,为后续爆发奠定基础。</li>
<li><strong class="text-cyan-400">核心催化 (2025年1月14-18日):</strong> TikTok美国禁令临近海外用户涌入RedNote日下载量破百万引爆“TikTok Refugee”概念全球多国登顶榜首。</li>
<li><strong class="text-cyan-400">市场反应 (三阶段演变):</strong>
<ol class="list-decimal list-inside ml-6 mt-2 space-y-1">
<li><strong>情绪普涨 (1.14-1.16):</strong> 概念股集体涨停,壹网壹创、遥望科技等成龙头。</li>
<li><strong>分化回调 (1.17-1.22):</strong> 情绪降温,市场甄别“含金量”,前期龙头股剧烈调整。</li>
<li><strong>逻辑再发酵 (2.10-):</strong> 市场回归基本面关注点转向IPO传闻、短剧布局等深度绑定个股走出独立行情。</li>
</ol>
</li>
</ul>
</div>
<div class="glass-card p-8 space-y-6">
<h3 class="text-fuchsia-400 glow-text-magenta">1. 核心观点与逻辑分析</h3>
<p><strong class="text-cyan-400">核心观点摘要:</strong>“小红书概念股”已从事件驱动的普涨炒作过渡到基本面逻辑驱动的结构性分化阶段。未来潜力取决于小红书能否将海外新增流量有效变现以及A股相关公司与其业务绑定的深度和确定性。</p>
<div class="space-y-4 text-gray-300">
<h4 class="text-xl font-semibold text-white">三大核心驱动力:</h4>
<p><strong>1. 流量价值重估:</strong>短期由TikTok禁令驱动长期则打开了小红书从国内社区向全球化生活方式平台跃迁的想象空间。</p>
<p><strong>2. 商业化闭环验证:</strong>国内已验证的“种草”模式商业转化能力极强日均搜索近7亿次外溢成交额1.5万亿),海外流量为模式复制提供巨大潜力。</p>
<p><strong>3. 产业链价值外溢:</strong>小红书未上市其增长红利广告、代运营、技术支持必然外溢至产业链合作伙伴为A股公司提供明确业绩预期。</p>
</div>
<div class="space-y-4 text-gray-300">
<h4 class="text-xl font-semibold text-white">预期差分析:</h4>
<p><strong>1. 关联度的预期差:</strong>市场初期混淆“客户”与“核心服务商”。真相是:品牌入驻方(如爱慕股份)受益有限,而深度绑定的核心服务商(如<strong class="text-yellow-400">蓝色光标</strong><strong class="text-yellow-400">线上线下</strong>)才是红利主要分享者。</p>
<p><strong>2. 竞争格局的预期差:</strong>市场忽略了字节跳动旗下产品<strong class="text-red-400">Lemon8</strong>的直接竞争风险其可能分流TikTok迁移用户。</p>
<p><strong>3. 数据真实性的预期差:</strong>路演中关于财务数据存在多个矛盾版本,部分数据被分析师指为“严重虚高”,投资逻辑基石存在不确定性。</p>
</div>
</div>
<div class="lg:grid lg:grid-cols-2 lg:gap-8 space-y-8 lg:space-y-0">
<div class="glass-card p-8 space-y-6">
<h3 class="text-fuchsia-400 glow-text-magenta">2. 关键催化剂与发展路径</h3>
<div class="space-y-4">
<h4 class="text-xl font-semibold text-white">近期催化剂 (3-6个月)</h4>
<ul class="list-disc list-inside space-y-2 text-gray-300">
<li><strong>IPO进程</strong>任何关于上市地、估值、时间表的明确信息都是强力催化剂。</li>
<li><strong>海外商业化数据披露:</strong>官方首次公布RedNote的MAU、DAU及初步商业化数据。</li>
<li><strong>重大商业合作:</strong>类似“红京计划”级别的海外战略合作落地。</li>
</ul>
</div>
<div class="space-y-4">
<h4 class="text-xl font-semibold text-white">长期发展路径</h4>
<ul class="list-disc list-inside space-y-2 text-gray-300">
<li><strong>流量全球化 (当前-2026):</strong> 巩固海外用户基础。</li>
<li><strong>商业模式出海 (2026-2028):</strong> 复制国内“买手电商”模式。</li>
<li><strong>平台生态深化 (2028以后):</strong> 渗透至金融、汽车等高价值领域,成为全球化生活服务平台。</li>
</ul>
</div>
</div>
<div class="glass-card p-8 space-y-6">
<h3 class="text-fuchsia-400 glow-text-magenta">3. 潜在风险与挑战</h3>
<ul class="list-disc list-inside space-y-4 text-gray-300">
<li>
<strong class="text-red-400">商业化风险:</strong> 海外用户能否有效转化为商业价值存在不确定性,付费习惯、广告定价等均是挑战。
</li>
<li>
<strong class="text-red-400">政策与竞争风险:</strong> 核心催化剂源于美国政策存在变数。同时字节跳动旗下Lemon8是其在海外的直接且强大的竞争对手。
</li>
<li>
<strong class="text-red-400">信息交叉验证风险:</strong> 市场流传的财务数据存在矛盾和“虚高”可能,关联度被夸大,炒作退潮后风险将集中暴露。
</li>
</ul>
</div>
</div>
<div class="glass-card p-8 space-y-6">
<h3 class="text-fuchsia-400 glow-text-magenta">4. 综合结论与投资启示</h3>
<p class="text-gray-300">“小红书概念”已进入<strong class="text-cyan-400">基于基本面和逻辑确定性的精选个股阶段</strong>。投资机会在于寻找那些与小红书业务深度绑定、业绩兑现路径清晰、具有<strong class="text-yellow-400">“卖水者”</strong>属性的核心服务商,而非仅仅是平台上的“淘金者”(品牌方)。</p>
<div class="space-y-4">
<h4 class="text-xl font-semibold text-white">最具投资价值的细分环节:</h4>
<ul class="list-disc list-inside space-y-2 text-gray-300">
<li><strong>官方认证的营销服务商:</strong>最直接分享广告和电商增长红利的环节。确定性最高的是战略级伙伴,如<strong class="text-yellow-400">蓝色光标</strong></li>
<li><strong>不可或缺的技术/基础设施提供商:</strong>业务与平台运营基础和用户活跃度强相关,具备稀缺性和高绑定性,如<strong class="text-yellow-400">线上线下</strong>(小红书第一大客户)。</li>
</ul>
</div>
<div class="space-y-4">
<h4 class="text-xl font-semibold text-white">需重点跟踪验证的关键指标:</h4>
<ul class="list-disc list-inside space-y-2 text-gray-300">
<li>小红书官方披露的<strong class="text-cyan-400">海外市场用户及变现数据</strong></li>
<li>核心概念股财报中<strong class="text-cyan-400">来自小红书业务的收入规模、增速和利润率</strong></li>
<li>竞争对手<strong class="text-red-400">Lemon8</strong>的市场份额变化。</li>
<li>小红书<strong class="text-cyan-400">IPO</strong>的实质性进展。</li>
</ul>
</div>
</div>
</section>
<!-- Market Performance Chart -->
<section>
<h2 class="text-center text-cyan-400 glow-text-cyan pt-8">概念股市场表现 (2025年1月)</h2>
<div class="glass-card p-8 mt-4">
<div id="market-chart" style="width: 100%; height: 400px;"></div>
</div>
</section>
<!-- Supporting Data Tabs -->
<section x-data="{ tab: 'news' }">
<h2 class="text-center text-cyan-400 glow-text-cyan pt-8">原始情报数据分析</h2>
<div class="tabs tabs-boxed justify-center mt-4 bg-transparent">
<a class="tab tab-lg" :class="{'tab-active !bg-cyan-500 !text-black': tab === 'news'}" @click="tab = 'news'">新闻数据</a>
<a class="tab tab-lg" :class="{'tab-active !bg-cyan-500 !text-black': tab === 'roadshow'}" @click="tab = 'roadshow'">路演纪要</a>
<a class="tab tab-lg" :class="{'tab-active !bg-cyan-500 !text-black': tab === 'research'}" @click="tab = 'research'">研报精粹</a>
</div>
<div class="mt-6">
<!-- News Data -->
<div x-show="tab === 'news'" class="glass-card p-8 space-y-4">
<ul class="list-disc list-inside space-y-3 text-gray-300">
<li><strong>事件背景:</strong> 临近2025年1月19日TikTok禁令大量用户涌入小红书自称“TikTok Refugee”小红书登上美国App Store榜首。</li>
<li><strong>流量数据:</strong> 截止1月17日海外日下载量118.5万美国日下载量24.5万。</li>
<li><strong>市场表现 (上涨):</strong> 1月14-18日概念股持续走强壹网壹创、电声股份、遥望科技等多股涨停。狮头股份当周涨47%壹网壹创涨46%。</li>
<li><strong>市场表现 (调整):</strong> 1月17-22日概念股集体调整天下秀、狮头股份、遥望科技等出现跌停。</li>
<li><strong>核心关联公司:</strong> <strong class="text-yellow-400">蓝色光标</strong>被指为“最强小红书出海概念股”,是其核心代理商,并有资本合作。遥望科技、壹网壹创、天下秀等公司确认与小红书有关联。</li>
<li><strong>平台动态:</strong> 小红书上线“市集”强化电商,与京东达成“红京计划”,获取支付牌照,为商业化铺路。</li>
</ul>
</div>
<!-- Roadshow Data -->
<div x-show="tab === 'roadshow'" class="glass-card p-8 space-y-4">
<ul class="list-disc list-inside space-y-3 text-gray-300">
<li><strong>产业链核心:</strong> 小红书概念股主要围绕三大环节:<strong class="text-cyan-400">广告营销</strong><strong class="text-cyan-400">电商服务</strong><strong class="text-cyan-400">内容生态(MCN)</strong></li>
<li><strong>财务数据:</strong> 2023年预计净利润达5亿美元远超年初5000万美元目标。2024年电商GMV目标800亿2025年目标2000-3000亿。</li>
<li><strong>用户数据:</strong> 2024年Q4 DAU峰值1.32亿日均使用时长77分钟。国内月活超3.5亿,海外日活超千万。</li>
<li><strong>核心模式:</strong> 以“买手电商”为核心的差异化社区电商模式。“种草经济”中62%用户依赖搜索日均搜索量近7亿次接近百度的70%。</li>
<li><strong>点名标的 (广告代理):</strong> <strong class="text-yellow-400">引力传媒</strong> (2024Q2广告投放过亿)、<strong class="text-yellow-400">蓝色光标</strong> (蒲公英平台代理商)、<strong class="text-yellow-400">天下秀</strong> (蒲公英代理商)。</li>
<li><strong>点名标的 (MCN):</strong> <strong class="text-yellow-400">遥望科技</strong><strong class="text-yellow-400">姚记科技</strong> (旗下青藤文化为头部MCN),但有分析师质疑其主阵地非小红书,关联性存疑。</li>
</ul>
</div>
<!-- Research Report Data -->
<div x-show="tab === 'research'" class="glass-card p-8 space-y-4">
<ul class="list-disc list-inside space-y-3 text-gray-300">
<li><strong>四大变现方式:</strong> 广告变现 (品牌合作)、影响力变现 (个人IP)、产品变现 (开店/直播)、知识变现。</li>
<li><strong>商业化工具:</strong> 推出“口碑通”产品支持批量筛选优质UGC内容进行智能投放提升营销效率。</li>
<li><strong>行业影响力 (高价值领域):</strong>
<ul class="list-['-_'] list-inside ml-6 mt-2 space-y-1">
<li><strong>家生活:</strong> 成为行业“答案之书”决策周期由45天缩短至20天。</li>
<li><strong>汽车:</strong> 小米SU7发布引爆流量成女性用户购车决策重要参考。</li>
<li><strong>金融/医美/宠物:</strong> 在高客单价行业渗透力强,成为品牌营销关键平台。</li>
</ul>
</li>
<li><strong>营销效果验证:</strong> 案例显示小红书投放能高效带动其他电商平台GMV增长。海尔投放带动京东GMV增240% (ROI 10+)顾家家居ROI达42。</li>
<li><strong>核心价值总结:</strong> 清晰多元的商业化路径、在高价值消费领域的绝对影响力、经过验证的高效营销解决方案、庞大且高价值的用户资产。</li>
</ul>
</div>
</div>
</section>
<!-- Stock Table -->
<section>
<h2 class="text-center text-cyan-400 glow-text-cyan pt-8 pb-4">产业链核心标的一览</h2>
<div class="glass-card overflow-x-auto p-4 sm:p-8">
<table class="table table-zebra table-sm sm:table-md">
<thead>
<tr>
<th>股票名称</th>
<th>关联类型</th>
<th>核心关联原因</th>
</tr>
</thead>
<tbody>
<!-- 核心服务商 -->
<tr class="bg-fuchsia-900/20"><td colspan="3" class="font-bold text-fuchsia-400">核心服务商 (营销、运营与MCN)</td></tr>
<tr>
<td>元隆雅图 (002878)</td>
<td>推广运营</td>
<td>子公司谦玛网络拥有小红书整合营销和蒲公英代理商<strong class="text-cyan-400">双资质</strong></td>
</tr>
<tr>
<td>引力传媒 (603598)</td>
<td>推广运营</td>
<td>品牌、社交、电商营销服务主要依托字节、阿里、小红书等平台。</td>
</tr>
<tr>
<td>壹网壹创 (300792)</td>
<td>推广运营</td>
<td>设有<strong class="text-cyan-400">独立的小红书事业部</strong>,为合作品牌提供推广、运营服务。</td>
</tr>
<tr>
<td>果麦文化 (301052)</td>
<td>推广运营</td>
<td>身为小红书<strong class="text-cyan-400">MCN头部机构</strong>,与平台在多个领域展开深入合作。</td>
</tr>
<tr>
<td>天下秀 (600556)</td>
<td>推广运营</td>
<td>新媒体营销业务合作的KOL主要投放在抖音、微博、小红书等多个平台。</td>
</tr>
<tr>
<td>遥望科技 (002291)</td>
<td>推广运营</td>
<td>社交电商服务业务覆盖小红书等平台,以短视频和直播电商形式开展。</td>
</tr>
<tr>
<td>凯淳股份 (301001)</td>
<td>推广运营</td>
<td>为品牌方在天猫、小红书等主流渠道提供全方位的代运营服务。</td>
</tr>
<tr>
<td>宣亚国际 (300612)</td>
<td>推广运营</td>
<td>获“小红书2024年度商业化汽车行业代理商”授权服务车企客户。</td>
</tr>
<tr>
<td>因赛集团 (300781)</td>
<td>推广运营</td>
<td>子公司为小红书发布《家生活场景需求洞察白皮书》等行业报告。</td>
</tr>
<!-- 技术、数据与审核 -->
<tr class="bg-cyan-900/20"><td colspan="3" class="font-bold text-cyan-400">技术、数据与内容支持</td></tr>
<tr>
<td>每日互动 (300766)</td>
<td>数据与服务</td>
<td>与小红书在开发者服务和数据服务方面均有合作,用于<strong class="text-cyan-400">用户增长、流量商业化变现</strong>等场景。</td>
</tr>
<tr>
<td>汇洲智能 (002122)</td>
<td>内容审核</td>
<td>孙公司热热文化提供内容审核及数据标注服务2024上半年来自小红书的收入<strong class="text-cyan-400">新增明显</strong></td>
</tr>
<tr>
<td>光云科技 (688365)</td>
<td>技术支持</td>
<td><a href="https://valuefrontier.cn/company?scode=688365" target="_blank" class="link link-hover">快递助手、快麦ERP</a>等SaaS产品为小红书商家提供服务。</td>
</tr>
<tr>
<td>博彦科技 (002649)</td>
<td>技术支持</td>
<td><a href="https://valuefrontier.cn/company?scode=002649" target="_blank" class="link link-hover">提供IT技术支持服务</a>,招聘信息显示有负责小红书内容审核的人员。</td>
</tr>
<tr>
<td>首都在线 (300846)</td>
<td>技术支持</td>
<td><a href="https://valuefrontier.cn/company?scode=300846" target="_blank" class="link link-hover">为小红书提供算力支持</a></td>
</tr>
<tr>
<td>游族网络 (002174)</td>
<td>技术支持</td>
<td><a href="https://valuefrontier.cn/company?scode=002174" target="_blank" class="link link-hover">子公司为小红书提供SDK登陆服务</a></td>
</tr>
<!-- 关联度较低或待验证 -->
<tr class="bg-gray-800/20"><td colspan="3" class="font-bold text-gray-400">品牌入驻 (客户关系,受益有限)</td></tr>
<tr>
<td>狮头股份 (600539)</td>
<td>品牌入驻</td>
<td>旗下品牌已入驻小红书平台。</td>
</tr>
<tr>
<td>浪莎股份 (600137)</td>
<td>品牌入驻</td>
<td>旗下品牌已入驻小红书平台。</td>
</tr>
<tr>
<td>敷尔佳 (301371)</td>
<td>品牌入驻</td>
<td>旗下品牌已入驻小红书平台。</td>
</tr>
<tr>
<td>北汽蓝谷 (600733)</td>
<td>品牌入驻</td>
<td>旗下品牌已入驻小红书平台。</td>
</tr>
<tr>
<td>奥飞娱乐 (002292)</td>
<td>品牌入驻</td>
<td>旗下品牌已入驻小红书平台。</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3" class="text-xs text-gray-500 text-center pt-4">
注:上表仅列出部分代表性公司,品牌入驻类公司众多,关联度相对较弱,未全部列出。投资决策请以深度分析为准。
</td>
</tr>
</tfoot>
</table>
</div>
</section>
</div>
<script>
// ECharts initialization
var chartDom = document.getElementById('market-chart');
var myChart = echarts.init(chartDom, 'dark'); // Use 'dark' theme
var option;
option = {
backgroundColor: 'transparent',
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
formatter: function (params) {
let res = params[0].name + '<br/>';
params.forEach(item => {
let color = item.value > 0 ? '#059669' : '#DC2626';
res += item.marker + item.seriesName + ': <span style="color:'+ color +'; font-weight:bold;">' + item.value + '%</span><br/>';
});
return res;
}
},
legend: {
data: ['当周涨幅', '后续跌幅'],
textStyle: {
color: '#ccc'
}
},
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)'
}
},
},
yAxis: {
type: 'category',
data: ['狮头股份', '壹网壹创', '天下秀', '遥望科技', '引力传媒'],
axisLine: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.3)'
}
},
},
series: [
{
name: '当周涨幅',
type: 'bar',
data: [47.04, 46.39, 39.58, 34.23, 20], // 引力传媒涨停为20%
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: 'rgba(255, 0, 255, 0.5)' },
{ offset: 1, color: 'rgba(255, 0, 255, 1)' }
])
}
},
{
name: '后续跌幅',
type: 'bar',
data: [-30, -5, -20, -10, -10], // 估算跌停及跟跌幅度
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: 'rgba(0, 255, 255, 1)' },
{ offset: 1, color: 'rgba(0, 255, 255, 0.5)' }
])
}
}
]
};
option && myChart.setOption(option);
window.addEventListener('resize', myChart.resize);
</script>
</body>
</html>