Files
vf_react/public/htmls/315晚会.html
2025-12-05 13:29:18 +08:00

458 lines
30 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>315晚会 - 概念深度研究</title>
<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>
<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: #020617;
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.1) 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: #e2e8f0;
}
.glass-card {
background: rgba(23, 27, 52, 0.25);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 1.5rem;
transition: all 0.3s ease;
}
.glass-card:hover {
border-color: rgba(0, 255, 255, 0.3);
box-shadow: 0 0 25px rgba(0, 255, 255, 0.1);
}
.bento-grid {
display: grid;
gap: 1.5rem;
grid-template-columns: repeat(12, 1fr);
}
.grid-item {
grid-column: span 12;
}
@media (min-width: 1024px) {
.grid-item-col-6 { grid-column: span 6; }
.grid-item-col-4 { grid-column: span 4; }
.grid-item-col-8 { grid-column: span 8; }
.grid-item-col-12 { grid-column: span 12; }
}
.glow-divider {
height: 1px;
border: 0;
background: linear-gradient(90deg, transparent, rgba(0, 255, 255, 0.5), transparent);
margin: 1.5rem 0;
}
.tag-badge {
background-color: rgba(56, 189, 248, 0.1);
color: #7dd3fc;
border: 1px solid rgba(56, 189, 248, 0.3);
}
</style>
</head>
<body class="min-h-screen p-4 sm:p-6 lg:p-8">
<div class="max-w-7xl mx-auto space-y-8">
<!-- Header -->
<header class="text-center py-8">
<h1 class="text-4xl lg:text-6xl font-bold tracking-tight bg-clip-text text-transparent bg-gradient-to-br from-slate-200 to-cyan-400">
概念分析315晚会
</h1>
<p class="mt-4 text-lg text-slate-400 max-w-3xl mx-auto">
一个由政策与媒体监督驱动的年度性行业“净化器”,引发短期市场情绪冲击与长期产业结构优化。
</p>
</header>
<!-- Bento Grid Layout -->
<main class="bento-grid">
<!-- Core Insight -->
<div class="grid-item grid-item-col-8 glass-card p-6 lg:p-8 row-span-2">
<h2 class="text-2xl font-bold text-cyan-300 mb-4">核心观点与市场认知</h2>
<p class="text-slate-300 leading-relaxed">
“315晚会”概念的本质是一个由政策与媒体监督驱动的、年度性的行业“净化器”。其核心驱动力在于通过曝光“劣币”来为“良币”腾出市场空间从而引发短期的市场情绪冲击和长期的产业结构优化。当前市场对该概念的反应模式已日趋成熟从最初的恐慌性抛售转向更为理性的“惩罚劣迹、奖励合规、布局替代”的结构性交易策略。
</p>
<hr class="glow-divider">
<div class="space-y-4">
<div>
<h3 class="font-semibold text-slate-100">核心驱动力:强制性行业出清</h3>
<ul class="list-disc list-inside text-slate-400 mt-2 space-y-1">
<li><strong class="text-slate-300">惩罚机制:</strong> 通过曝光违法违规行为,直接打击相关企业的声誉、销售和市值,增加其违规成本。</li>
<li><strong class="text-slate-300">替代效应:</strong> 消费者转向更值得信赖的品牌,为合规头部企业带来市场份额提升预期。路演纪要明确指出:“短期情绪扰动后,行业将加速出清劣质产能,优质企业市场份额提升。”</li>
<li><strong class="text-slate-300">衍生需求:</strong> 企业对第三方检测认证、网络安全防护、供应链溯源等服务的需求阶段性提升。</li>
</ul>
</div>
<div>
<h3 class="font-semibold text-slate-100">市场情绪:脉冲式热度与动态演变</h3>
<p class="text-slate-400 mt-2">
热度呈典型脉冲式特征集中在3月15日前后爆发。情绪高度分化且动态演变从晚会当晚的<span class="text-red-400">恐慌规避</span>,到事件发酵后的<span class="text-green-400">理性分析与机会挖掘</span>。路演纪要中分析师已在讨论“捞底机会”并参考历史案例如2014年荧光剂事件后3-6个月回暖判断修复周期。
</p>
</div>
</div>
</div>
<!-- Key Stats & Timeline -->
<div class="grid-item grid-item-col-4 glass-card p-6 lg:p-8">
<h2 class="text-2xl font-bold text-cyan-300 mb-4">核心时间轴</h2>
<ul class="timeline timeline-vertical">
<li>
<div class="timeline-start timeline-box">晚会前 (2-3月初)</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 timeline-box bg-slate-700/50">市场预热,家居等行业借势大促。研报开始预判高风险领域。</div>
<hr class="bg-cyan-400"/>
</li>
<li>
<hr class="bg-cyan-400"/>
<div class="timeline-start timeline-box">晚会当晚 (3.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 timeline-box bg-slate-700/50">直播曝光,舆情达顶峰。</div>
<hr class="bg-cyan-400"/>
</li>
<li>
<hr class="bg-cyan-400"/>
<div class="timeline-start timeline-box">次日及短期 (3.16-3.20)</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 timeline-box bg-slate-700/50">市场迅速反应,关联股大跌,监管介入,公司密集回应。</div>
<hr class="bg-cyan-400"/>
</li>
<li>
<hr class="bg-cyan-400"/>
<div class="timeline-start timeline-box">中长期 (1-3月后)</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 timeline-box bg-slate-700/50">情绪平复,股价分化。行业加速出清,利好头部合规企业。</div>
</li>
</ul>
</div>
<!-- Expectation Gap -->
<div class="grid-item grid-item-col-4 glass-card p-6 lg:p-8 bg-gradient-to-br from-indigo-900/30 to-purple-900/30">
<h2 class="text-2xl font-bold text-purple-300 mb-4">预期差被商业化的“315”</h2>
<p class="text-slate-300 leading-relaxed">
市场普遍认知集中在晚会的惩罚性上,但忽略了其在某些领域的<strong class="text-white">商业营销价值</strong>。多家路演数据显示索菲亚、顾家、慕思等家居企业将“315活动”视为上半年最重要的销售冲刺节点投入重金并设定明确销售目标。
</p>
<ul class="mt-4 space-y-2 text-slate-400">
<li><span class="font-semibold text-purple-300">索菲亚经销商:</span> 315目标为签订7000万元订单。</li>
<li><span class="font-semibold text-purple-300">成都顾家经销商:</span> 315期间零售目标4000万元。</li>
<li><span class="font-semibold text-purple-300">福建慕斯经销商:</span> 315期间销售额同比增速目标10%-12%。</li>
</ul>
<p class="mt-4 text-sm text-slate-500 italic">这揭示了“315”概念被商业化的另一面是市场认知的一个重要补充。</p>
</div>
<!-- 2025 Gala Recap -->
<div class="grid-item grid-item-col-12 glass-card p-6 lg:p-8" x-data="{ openTab: 1 }">
<h2 class="text-2xl font-bold text-cyan-300 mb-4">2025年315晚会复盘</h2>
<div class="tabs tabs-boxed bg-slate-800/50">
<a class="tab" :class="{'tab-active': openTab === 1}" @click.prevent="openTab = 1">晚会概览</a>
<a class="tab" :class="{'tab-active': openTab === 2}" @click.prevent="openTab = 2">曝光案例</a>
<a class="tab" :class="{'tab-active': openTab === 3}" @click.prevent="openTab = 3">市场反应与后续</a>
</div>
<div x-show="openTab === 1" class="mt-6 space-y-4">
<div class="stats stats-vertical lg:stats-horizontal shadow bg-transparent w-full">
<div class="stat">
<div class="stat-title text-slate-400">晚会主题</div>
<div class="stat-value text-xl text-slate-200">共铸诚信 提振消费</div>
<div class="stat-desc">中央广播电视总台第35届</div>
</div>
<div class="stat">
<div class="stat-title text-slate-400">关注领域</div>
<div class="stat-value text-xl text-slate-200">四大安全</div>
<div class="stat-desc">食品、公共、金融、数字经济</div>
</div>
<div class="stat">
<div class="stat-title text-slate-400">总导演爆料</div>
<div class="stat-value text-xl text-slate-200">三大方向</div>
<div class="stat-desc">非法添加、数据盗取、金融骗局</div>
</div>
</div>
</div>
<div x-show="openTab === 2" class="mt-6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="p-4 rounded-xl bg-slate-800/50">
<h4 class="font-bold text-red-400">翻新卫生巾/纸尿裤</h4>
<p class="text-sm text-slate-400 mt-1">梁山希希纸制品有限公司被点名涉及自由点、嫚熙、Babycare等品牌关联。</p>
</div>
<div class="p-4 rounded-xl bg-slate-800/50">
<h4 class="font-bold text-red-400">一次性内裤不灭菌</h4>
<p class="text-sm text-slate-400 mt-1">多家企业徒手制作,不消毒。涉及浪莎、初医生等品牌关联。</p>
</div>
<div class="p-4 rounded-xl bg-slate-800/50">
<h4 class="font-bold text-red-400">维修刺客</h4>
<p class="text-sm text-slate-400 mt-1">啄木鸟家庭维修被点名只开水龙头收费100元。</p>
</div>
<div class="p-4 rounded-xl bg-slate-800/50">
<h4 class="font-bold text-red-400">保水虾仁</h4>
<p class="text-sm text-slate-400 mt-1">磷酸盐超标包冰增重“1斤虾仁7两冰”。</p>
</div>
<div class="p-4 rounded-xl bg-slate-800/50">
<h4 class="font-bold text-red-400">电子签高利贷</h4>
<p class="text-sm text-slate-400 mt-1">借贷宝、人人信平台被点名,利用电子签设“砍头息”陷阱。</p>
</div>
<div class="p-4 rounded-xl bg-slate-800/50">
<h4 class="font-bold text-red-400">信息黑洞窃取隐私</h4>
<p class="text-sm text-slate-400 mt-1">“火眼云”等大数据获客软件被曝光,土巴兔被指非法获取用户信息。</p>
</div>
<!-- Add more cases as needed -->
</div>
<div x-show="openTab === 3" class="mt-6 grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<h4 class="font-semibold text-slate-100">股市直接反应</h4>
<ul class="list-disc list-inside text-slate-400 mt-2 space-y-1">
<li><strong class="text-red-400">百亚股份 (003006):</strong> 跌停</li>
<li><strong class="text-red-400">稳健医疗 (300888):</strong> 大幅低开</li>
<li><strong class="text-red-400">浪莎股份 (600137):</strong> 大幅低开</li>
<li><strong class="text-red-400">国联水产 (300094):</strong> 股价受冲击</li>
</ul>
</div>
<div>
<h4 class="font-semibold text-slate-100">监管雷霆行动</h4>
<ul class="list-disc list-inside text-slate-400 mt-2 space-y-1">
<li>市场监管总局、工信部连夜部署彻查。</li>
<li>河南、山东、广东等地迅速查封涉事企业,控制负责人。</li>
<li>上交所、深交所向相关上市公司发出监管函或关注函。</li>
</ul>
</div>
</div>
</div>
<!-- Chart Section -->
<div class="grid-item grid-item-col-6 glass-card p-6 lg:p-8">
<h2 class="text-2xl font-bold text-cyan-300 mb-4">舆情传播分析 (历史数据)</h2>
<div id="sentiment-chart" style="width: 100%; height: 300px;"></div>
</div>
<div class="grid-item grid-item-col-6 glass-card p-6 lg:p-8">
<h2 class="text-2xl font-bold text-cyan-300 mb-4">传播平台分布 (历史数据)</h2>
<div id="platform-chart" style="width: 100%; height: 300px;"></div>
</div>
<!-- Catalysts & Future Path -->
<div class="grid-item grid-item-col-7 glass-card p-6 lg:p-8">
<h2 class="text-2xl font-bold text-cyan-300 mb-4">关键催化剂与未来发展路径</h2>
<div class="space-y-4">
<div>
<h3 class="font-semibold text-slate-100">近期催化剂 (未来3-6个月)</h3>
<ul class="list-disc list-inside text-slate-400 mt-2 space-y-1">
<li><strong class="text-slate-300">监管处罚落地:</strong> 明确事件责任方和严重程度。</li>
<li><strong class="text-slate-300">行业标准修订:</strong> 可能推动卫生用品、预制菜等国标更新,利好技术领先企业。</li>
<li><strong class="text-slate-300">上市公司财报验证:</strong> 验证事件对受损及受益公司销售额的实际影响。</li>
</ul>
</div>
<div>
<h3 class="font-semibold text-slate-100">长期发展路径:向新领域拓展</h3>
<p class="text-slate-400 mt-2">
研报指出315晚会曝光领域已从传统消费向金融、互联网、科技等领域拓展。
</p>
<ul class="list-disc list-inside text-slate-400 mt-2 space-y-1">
<li><strong class="text-slate-300">短期 (1-2年):</strong> 仍将聚焦数字经济(数据隐私、算法歧视)、金融安全、公共安全和食品安全。</li>
<li><strong class="text-slate-300">中长期 (3-5年):</strong> 可能拓展至AI伦理、基因检测、智能汽车数据安全、新型医疗服务陷阱等更前沿复杂的领域。</li>
</ul>
</div>
</div>
</div>
<!-- Investment Insights -->
<div class="grid-item grid-item-col-5 glass-card p-6 lg:p-8">
<h2 class="text-2xl font-bold text-cyan-300 mb-4">投资启示与风险</h2>
<div class="space-y-4">
<div>
<h3 class="font-semibold text-green-400">最具投资价值的细分环节</h3>
<ol class="list-decimal list-inside text-slate-400 mt-2 space-y-2">
<li><strong class="text-slate-200">“卖铲人”——检测与安全服务:</strong> 逻辑最清晰、风险最低的方向。无论是产品质量还是数据安全问题,都将催生对华测检测、安恒信息等服务商的需求。</li>
<li><strong class="text-slate-200">被“错杀”的行业龙头:</strong> 在受波及行业中,寻找因市场恐慌下跌,但自身品控严格、品牌力强的头部公司。它们具备较高的修复弹性和份额提升潜力。</li>
</ol>
</div>
<hr class="glow-divider">
<div>
<h3 class="font-semibold text-red-400">潜在风险与挑战</h3>
<ul class="list-disc list-inside text-slate-400 mt-2 space-y-1">
<li><strong class="text-slate-300">需求持续性:</strong> 事件带来的订单增长可能是一次性“应急采购”,能否转化为长期合作关系是考验。</li>
<li><strong class="text-slate-300">曝光不可预测性:</strong> 主题投资押注难度大,单一公司受益程度可能不及预期。</li>
<li><strong class="text-slate-300">“错杀”风险:</strong> 市场存在行业性、无差别错杀,如国联水产公告自证清白但股价依然承压。</li>
</ul>
</div>
</div>
</div>
<!-- Stock List -->
<div class="grid-item grid-item-col-12 glass-card p-6 lg:p-8">
<h2 class="text-2xl font-bold text-cyan-300 mb-4">核心关联标的</h2>
<div class="overflow-x-auto">
<table class="table w-full">
<thead class="text-slate-300">
<tr>
<th>股票名称</th>
<th>股票代码</th>
<th>核心逻辑</th>
<th>标签</th>
</tr>
</thead>
<tbody>
<tr class="hover:bg-slate-700/50">
<td class="font-semibold">百亚股份</td>
<td><a href="https://valuefrontier.cn/company?scode=003006" target="_blank" class="link link-hover text-cyan-400">003006</a></td>
<td class="text-sm text-slate-400">旗下“自由点”品牌,产品可追溯生产源头,事件后有望受益于行业集中度提升。</td>
<td><span class="tag-badge badge badge-outline">卫生巾</span></td>
</tr>
<tr class="hover:bg-slate-700/50">
<td class="font-semibold">稳健医疗</td>
<td><a href="https://valuefrontier.cn/company?scode=300888" target="_blank" class="link link-hover text-cyan-400">300888</a></td>
<td class="text-sm text-slate-400">全棉时代旗下“奈丝公主”卫生巾获医护级认证,品牌形象高端,品控严格。</td>
<td><span class="tag-badge badge badge-outline">卫生巾</span></td>
</tr>
<tr class="hover:bg-slate-700/50">
<td class="font-semibold">华测检测</td>
<td><a href="https://valuefrontier.cn/company?scode=300012" target="_blank" class="link link-hover text-cyan-400">300012</a></td>
<td class="text-sm text-slate-400">第三方检测龙头,质量安全事件后市场对检测需求提升,直接受益。</td>
<td><span class="tag-badge badge badge-outline" style="background-color: rgba(52, 211, 153, 0.1); color: #6ee7b7; border-color: rgba(52, 211, 153, 0.3);">食品安全追溯</span></td>
</tr>
<tr class="hover:bg-slate-700/50">
<td class="font-semibold">谱尼测试</td>
<td><a href="https://valuefrontier.cn/company?scode=300887" target="_blank" class="link link-hover text-cyan-400">300887</a></td>
<td class="text-sm text-slate-400">具有专业食品安全实验室,可承担食品中多种物质检测任务。</td>
<td><span class="tag-badge badge badge-outline" style="background-color: rgba(52, 211, 153, 0.1); color: #6ee7b7; border-color: rgba(52, 211, 153, 0.3);">食品安全追溯</span></td>
</tr>
<tr class="hover:bg-slate-700/50">
<td class="font-semibold">安恒信息</td>
<td><a href="https://valuefrontier.cn/company?scode=688023" target="_blank" class="link link-hover text-cyan-400">688023</a></td>
<td class="text-sm text-slate-400">网络安全龙头,曝光“信息黑洞”后,企业对数据安全、隐私合规的需求显著增加。</td>
<td><span class="tag-badge badge badge-outline" style="background-color: rgba(167, 139, 250, 0.1); color: #c4b5fd; border-color: rgba(167, 139, 250, 0.3);">隐私安全</span></td>
</tr>
<tr class="hover:bg-slate-700/50">
<td class="font-semibold">深信服</td>
<td><a href="https://valuefrontier.cn/company?scode=300454" target="_blank" class="link link-hover text-cyan-400">300454</a></td>
<td class="text-sm text-slate-400">中国规模最大、创新能力最强的应用层网络设备供应商之一,数据安全产品线完备。</td>
<td><span class="tag-badge badge badge-outline" style="background-color: rgba(167, 139, 250, 0.1); color: #c4b5fd; border-color: rgba(167, 139, 250, 0.3);">隐私安全</span></td>
</tr>
<tr class="hover:bg-slate-700/50">
<td class="font-semibold">信息发展</td>
<td><a href="https://valuefrontier.cn/company?scode=300469" target="_blank" class="link link-hover text-cyan-400">300469</a></td>
<td class="text-sm text-slate-400">参与25个商务部肉菜流通追溯试点城市建设在食品安全溯源领域经验丰富。</td>
<td><span class="tag-badge badge badge-outline" style="background-color: rgba(52, 211, 153, 0.1); color: #6ee7b7; border-color: rgba(52, 211, 153, 0.3);">食品安全追溯</span></td>
</tr>
</tbody>
</table>
</div>
</div>
</main>
<!-- Footer -->
<footer class="text-center py-8 text-slate-500 text-sm">
<p>北京价值前沿科技有限公司 AI投研agent“价小前投研” 进行投研呈现</p>
<p>本报告为AI合成数据投资需谨慎。</p>
</footer>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
// ECharts for Sentiment Trend
var sentimentChartDom = document.getElementById('sentiment-chart');
var sentimentChart = echarts.init(sentimentChartDom);
var sentimentOption = {
tooltip: {
trigger: 'axis',
backgroundColor: 'rgba(23, 27, 52, 0.8)',
borderColor: 'rgba(0, 255, 255, 0.5)',
textStyle: { color: '#e2e8f0' }
},
grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
xAxis: {
type: 'category',
boundaryGap: false,
data: ['3-14', '3-15 20:00', '3-15 22:00', '3-16', '3-17', '3-18'],
axisLine: { lineStyle: { color: 'rgba(255, 255, 255, 0.2)' } }
},
yAxis: {
type: 'value',
name: '舆情声量',
splitLine: { lineStyle: { color: 'rgba(255, 255, 255, 0.1)' } },
axisLine: { lineStyle: { color: 'rgba(255, 255, 255, 0.2)' } }
},
series: [{
name: '声量',
type: 'line',
smooth: true,
data: [5000, 15000, 23566, 18000, 12000, 8000],
itemStyle: { color: '#22d3ee' },
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(34, 211, 238, 0.5)'
}, {
offset: 1,
color: 'rgba(34, 211, 238, 0)'
}])
}
}]
};
sentimentChart.setOption(sentimentOption);
// ECharts for Platform Distribution
var platformChartDom = document.getElementById('platform-chart');
var platformChart = echarts.init(platformChartDom);
var platformOption = {
tooltip: {
trigger: 'item',
backgroundColor: 'rgba(23, 27, 52, 0.8)',
borderColor: 'rgba(0, 255, 255, 0.5)',
textStyle: { color: '#e2e8f0' }
},
legend: {
orient: 'vertical',
left: 'left',
textStyle: { color: '#e2e8f0' }
},
series: [{
name: '传播平台',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
label: { show: false, position: 'center' },
emphasis: {
label: { show: true, fontSize: '20', fontWeight: 'bold' }
},
labelLine: { show: false },
data: [
{ value: 42, name: '视频平台' },
{ value: 34, name: '客户端' },
{ value: 14, name: '微博' },
{ value: 10, name: '其他' }
],
color: ['#06b6d4', '#4f46e5', '#db2777', '#64748b']
}]
};
platformChart.setOption(platformOption);
window.addEventListener('resize', function() {
sentimentChart.resize();
platformChart.resize();
});
});
</script>
</body>
</html>