417 lines
26 KiB
HTML
417 lines
26 KiB
HTML
直接生成HTML代码如下，您可以将其保存为`.html`文件并用浏览器打开。
|
||
|
||
|
||
<!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>
|
||
<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=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||
<style>
|
||
body {
|
||
font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
|
||
background-color: #0c0a18;
|
||
background-image:
|
||
radial-gradient(ellipse 20% 40% at 20% 20%, rgba(118, 7, 219, 0.2), transparent),
|
||
radial-gradient(ellipse 20% 40% at 80% 80%, rgba(7, 155, 219, 0.2), transparent);
|
||
background-attachment: fixed;
|
||
color: #e0e0e0;
|
||
overflow-x: hidden;
|
||
}
|
||
.glass-card {
|
||
background: rgba(26, 25, 46, 0.6);
|
||
backdrop-filter: blur(20px);
|
||
-webkit-backdrop-filter: blur(20px);
|
||
border-radius: 24px;
|
||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
transition: all 0.3s ease;
|
||
}
|
||
.glass-card:hover {
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
|
||
border-color: rgba(7, 155, 219, 0.3);
|
||
}
|
||
.glowing-text {
|
||
text-shadow: 0 0 8px rgba(59, 130, 246, 0.7);
|
||
}
|
||
.title-highlight {
|
||
background: -webkit-linear-gradient(45deg, #22d3ee, #a5b4fc, #f472b6);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
}
|
||
.bento-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||
gap: 1.5rem;
|
||
}
|
||
@media (min-width: 1024px) {
|
||
.bento-grid {
|
||
grid-template-columns: repeat(3, 1fr);
|
||
}
|
||
.grid-col-span-2 {
|
||
grid-column: span 2;
|
||
}
|
||
.grid-row-span-2 {
|
||
grid-row: span 2;
|
||
}
|
||
}
|
||
.tag-badge {
|
||
background-color: rgba(59, 130, 246, 0.1);
|
||
border: 1px solid rgba(59, 130, 246, 0.3);
|
||
color: #60a5fa;
|
||
padding: 4px 12px;
|
||
border-radius: 9999px;
|
||
font-size: 0.8rem;
|
||
font-weight: 500;
|
||
}
|
||
table.custom-table {
|
||
background: transparent;
|
||
}
|
||
table.custom-table thead tr {
|
||
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
|
||
}
|
||
table.custom-table th {
|
||
background: transparent;
|
||
color: #a5b4fc;
|
||
font-weight: 600;
|
||
letter-spacing: 0.05em;
|
||
}
|
||
table.custom-table tbody tr {
|
||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||
}
|
||
table.custom-table tbody tr:last-child {
|
||
border-bottom: none;
|
||
}
|
||
.light-orb {
|
||
position: fixed;
|
||
pointer-events: none;
|
||
z-index: -1;
|
||
width: 800px;
|
||
height: 800px;
|
||
border-radius: 50%;
|
||
background: radial-gradient(circle, rgba(7, 155, 219, 0.15) 0%, transparent 60%);
|
||
transition: transform 0.2s ease-out;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body x-data="{}" @mousemove="moveOrb($event)">
|
||
|
||
<div class="light-orb" id="light-orb"></div>
|
||
|
||
<div class="container mx-auto p-4 md:p-8">
|
||
|
||
<!-- Header -->
|
||
<header class="text-center py-12">
|
||
<h1 class="text-4xl md:text-6xl font-bold mb-4 glowing-text title-highlight">深度行研: 荒野求生</h1>
|
||
<p class="text-lg text-gray-400 max-w-3xl mx-auto">由现象级社会热点引爆，"体验经济"与"户外装备消费升级"在此交汇。</p>
|
||
<p class="text-xs text-gray-500 mt-6">北京价值前沿科技有限公司 AI投研agent：“价小前投研” 进行投研呈现。本报告为AI合成数据，投资需谨慎。</p>
|
||
</header>
|
||
|
||
<main class="space-y-12">
|
||
|
||
<!-- Core Insight Section -->
|
||
<section class="glass-card p-6 md:p-8">
|
||
<h2 class="text-2xl font-bold mb-4 glowing-text">核心观点摘要</h2>
|
||
<p class="text-gray-300 leading-relaxed">“荒野求生”概念本质上是**“体验经济”**与**“户外装备消费升级”**两大趋势的交汇点，由现象级社会热点事件所引爆。当前，该概念尚处于**事件驱动的主题炒作初期**，市场情绪高涨但认知较为宽泛。其未来潜力在于能否将一次性的流量热度，转化为可持续的商业模式和对专业级户外装备的长期需求。</p>
|
||
</section>
|
||
|
||
<!-- Bento Grid for Key Data Points -->
|
||
<section class="bento-grid">
|
||
<div class="glass-card p-6 grid-col-span-2">
|
||
<h3 class="font-bold text-xl mb-3 text-cyan-300">概念引爆点：张家界七星山赛事</h3>
|
||
<p class="text-gray-400 text-sm mb-4">2025年11月13日前后，“七星山·骆驼杯”国际级荒野求生挑战赛火爆全网，成为概念的核心催化剂。</p>
|
||
<div class="flex flex-wrap gap-4 text-center">
|
||
<div class="flex-1 min-w-[120px] bg-black/20 p-3 rounded-lg">
|
||
<div class="text-2xl font-bold text-cyan-400">>50亿</div>
|
||
<div class="text-xs text-gray-400">全网播放量</div>
|
||
</div>
|
||
<div class="flex-1 min-w-[120px] bg-black/20 p-3 rounded-lg">
|
||
<div class="text-2xl font-bold text-purple-400">贝尔点赞</div>
|
||
<div class="text-xs text-gray-400">国际IP加持</div>
|
||
</div>
|
||
<div class="flex-1 min-w-[120px] bg-black/20 p-3 rounded-lg">
|
||
<div class="text-2xl font-bold text-pink-400">板块异动</div>
|
||
<div class="text-xs text-gray-400">户外露营概念</div>
|
||
</div>
|
||
</div>
|
||
<p class="text-xs text-gray-500 mt-4 italic">新闻来源：财联社《户外露营概念午后异动》、20251113复盘</p>
|
||
</div>
|
||
|
||
<div class="glass-card p-6">
|
||
<h3 class="font-bold text-xl mb-3 text-purple-300">IP文化根基</h3>
|
||
<p class="text-gray-400 text-sm mb-4">长期的IP影响力培育了庞大的受众基础和文化认知，为概念从荧幕走向现实提供土壤。</p>
|
||
<ul class="space-y-2 text-sm">
|
||
<li class="flex items-start gap-2">
|
||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-purple-400 mt-0.5 shrink-0" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" /></svg>
|
||
<span>Netflix保留互动剧集<br><span class="font-semibold text-white">《兰维尔x贝尔 对战荒野》</span>和<span class="font-semibold text-white">《你的荒野求生》</span></span>
|
||
</li>
|
||
</ul>
|
||
<p class="text-xs text-gray-500 mt-4 italic">新闻来源：Netflix证实将下架几乎所有互动内容</p>
|
||
</div>
|
||
|
||
<div class="glass-card p-6 grid-row-span-2">
|
||
<h3 class="font-bold text-xl mb-3 text-pink-300">预期差分析</h3>
|
||
<p class="text-gray-400 text-sm mb-4">市场普遍认知与路演揭示的现实之间存在显著差异，这构成了投资机会与风险点。</p>
|
||
<div class="space-y-4">
|
||
<div>
|
||
<h4 class="font-semibold text-white">预期差一：景区受益的广度与深度</h4>
|
||
<p class="text-xs text-gray-300 mt-1">市场普遍认为张家界赛事利好整个区域文旅公司，但现实是...</p>
|
||
<div class="mt-2 p-3 bg-red-900/20 border border-red-500/30 rounded-lg text-sm">
|
||
<span class="font-bold text-red-300">祥源文旅(600576)路演：</span> "七星山热点对其核心资产是间接受益，<span class="underline">但尚未量化增量</span>。"
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<h4 class="font-semibold text-white">预期差二：户外装备的技术门槛</h4>
|
||
<p class="text-xs text-gray-300 mt-1">市场倾向于将所有户外概念股视为同质化受益者，但专业级装备存在极高壁垒。</p>
|
||
<div class="mt-2 p-3 bg-blue-900/20 border border-blue-500/30 rounded-lg text-sm">
|
||
<span class="font-bold text-blue-300">牧高笛(603908)路演：</span> 通过"荒野横断计划"采集极端环境一手数据，反哺产品迭代，形成<span class="underline">跨界品牌难以复制的“硬门槛”</span>。
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="glass-card p-6 grid-col-span-2">
|
||
<h3 class="font-bold text-xl mb-3 text-teal-300">11月13日市场反应</h3>
|
||
<p class="text-gray-400 text-sm mb-4">事件引爆当日，市场资金快速响应，相关概念股集体冲高。</p>
|
||
<div id="stock-chart" style="width: 100%; height: 250px;"></div>
|
||
</div>
|
||
|
||
</section>
|
||
|
||
<!-- Detailed Analysis Section -->
|
||
<section class="glass-card p-6 md:p-8 space-y-8">
|
||
<div>
|
||
<h2 class="text-2xl font-bold mb-4 glowing-text">概念核心逻辑与市场认知</h2>
|
||
<div class="grid md:grid-cols-3 gap-6">
|
||
<div class="bg-black/20 p-4 rounded-lg">
|
||
<h4 class="font-semibold text-lg text-cyan-300">需求端</h4>
|
||
<p class="text-sm text-gray-300 mt-2">满足都市人群挑战自我、回归自然的<span class="text-white">精神消费诉求</span>，并作为一种“社交货币”在社交媒体时代极具传播价值。</p>
|
||
</div>
|
||
<div class="bg-black/20 p-4 rounded-lg">
|
||
<h4 class="font-semibold text-lg text-purple-300">供给端</h4>
|
||
<p class="text-sm text-gray-300 mt-2">传统景区通过“赛事IP+自然风光”模式创新，将门票经济升级为<span class="text-white">IP经济和流量经济</span>。</p>
|
||
</div>
|
||
<div class="bg-black/20 p-4 rounded-lg">
|
||
<h4 class="font-semibold text-lg text-pink-300">产业基础</h4>
|
||
<p class="text-sm text-gray-300 mt-2">国内已拥有成熟的户外装备供应链，能为从大众到专业探险的全场景提供支持，为概念落地提供<span class="text-white">坚实的产业基础</span>。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<h2 class="text-2xl font-bold mb-4 glowing-text">产业链与核心公司剖析</h2>
|
||
<div class="overflow-x-auto">
|
||
<div class="flex space-x-4 p-2">
|
||
<!-- Upstream -->
|
||
<div class="flex-shrink-0 w-72 bg-black/20 p-4 rounded-lg">
|
||
<h4 class="font-semibold text-center text-cyan-300">上游：装备与技术</h4>
|
||
<ul class="mt-3 space-y-2 text-sm text-center">
|
||
<li><span class="tag-badge">专业装备</span> 牧高笛, 探路者, 万里马(猛犸象)</li>
|
||
<li><span class="tag-badge">大众装备</span> 浙江自然, 浙江正特/永强</li>
|
||
<li><span class="tag-badge">技术支持</span> 当虹科技 (赛事直播)</li>
|
||
</ul>
|
||
</div>
|
||
<!-- Midstream -->
|
||
<div class="flex-shrink-0 w-72 bg-black/20 p-4 rounded-lg">
|
||
<h4 class="font-semibold text-center text-purple-300">中游：赛事与内容</h4>
|
||
<ul class="mt-3 space-y-2 text-sm text-center">
|
||
<li><span class="tag-badge">赛事运营</span> 三夫户外</li>
|
||
<li><span class="tag-badge">内容传播</span> 各大视频与社交平台</li>
|
||
</ul>
|
||
</div>
|
||
<!-- Downstream -->
|
||
<div class="flex-shrink-0 w-72 bg-black/20 p-4 rounded-lg">
|
||
<h4 class="font-semibold text-center text-pink-300">下游：场景与消费</h4>
|
||
<ul class="mt-3 space-y-2 text-sm text-center">
|
||
<li><span class="tag-badge">核心场景</span> *ST张股 (七星山)</li>
|
||
<li><span class="tag-badge">潜在场景</span> 祥源文旅, 长白山</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<h2 class="text-2xl font-bold mb-4 glowing-text">潜在风险与挑战</h2>
|
||
<ul class="space-y-4 text-gray-300">
|
||
<li class="flex items-start gap-3">
|
||
<div class="bg-red-500/20 text-red-300 p-2 rounded-full mt-1"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.21 3.03-1.742 3.03H4.42c-1.532 0-2.492-1.696-1.742-3.03l5.58-9.92zM10 13a1 1 0 110-2 1 1 0 010 2zm-1-8a1 1 0 011-1h.01a1 1 0 110 2H10a1 1 0 01-1-1z" clip-rule="evenodd" /></svg></div>
|
||
<div>
|
||
<h4 class="font-semibold text-white">商业化风险</h4>
|
||
<p class="text-sm">赛事成功模式的可持续性和盈利模式有待检验。安全与环保问题是巨大挑战，如长白山路演提及的“雪地摩托因东北虎出没暂停运营”。</p>
|
||
</div>
|
||
</li>
|
||
<li class="flex items-start gap-3">
|
||
<div class="bg-yellow-500/20 text-yellow-300 p-2 rounded-full mt-1"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.21 3.03-1.742 3.03H4.42c-1.532 0-2.492-1.696-1.742-3.03l5.58-9.92zM10 13a1 1 0 110-2 1 1 0 010 2zm-1-8a1 1 0 011-1h.01a1 1 0 110 2H10a1 1 0 01-1-1z" clip-rule="evenodd" /></svg></div>
|
||
<div>
|
||
<h4 class="font-semibold text-white">市场风险</h4>
|
||
<p class="text-sm">热点退潮后股价可能大幅回调。市场易将“荒野求生”与普通“户外露营”混为一谈，导致部分关联度低的公司被过度炒作。</p>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div>
|
||
<h2 class="text-2xl font-bold mb-4 glowing-text">综合结论与投资启示</h2>
|
||
<div class="bg-gradient-to-r from-blue-900/30 to-purple-900/30 p-6 rounded-2xl border border-blue-500/30">
|
||
<p class="mb-4">"荒野求生"概念目前明确处于**主题炒作阶段**，但其背后反映了真实且长期的消费趋势变迁。短期看，市场博弈和情绪主导；中长期看，概念能否走向成熟，取决于产业链核心公司能否将流量转化为可持续的商业价值。</p>
|
||
<h4 class="font-semibold text-lg text-teal-300">最具投资价值的细分环节：</h4>
|
||
<p class="mt-2">**高科技、专业级的户外装备环节**是当前最具确定性和投资价值的方向。原因在于其**需求刚性**（安全需求持续升级）、**壁垒高**（核心技术难以复制）和**市场空间广**（受益于整个户外运动人口基数提升）。</p>
|
||
</div>
|
||
</div>
|
||
|
||
</section>
|
||
|
||
<!-- Stock Table -->
|
||
<section class="glass-card p-6 md:p-8">
|
||
<h2 class="text-2xl font-bold mb-6 glowing-text">相关概念股梳理</h2>
|
||
<div class="overflow-x-auto">
|
||
<table class="table custom-table w-full">
|
||
<thead>
|
||
<tr>
|
||
<th>股票名称</th>
|
||
<th>股票代码</th>
|
||
<th>核心逻辑</th>
|
||
<th>标签</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<!-- 户外装备 -->
|
||
<tr>
|
||
<td class="font-semibold text-white">牧高笛</td>
|
||
<td><a href="https://valuefrontier.cn/company?scode=603908" target="_blank" class="text-blue-400 hover:underline">603908</a></td>
|
||
<td class="text-sm text-gray-300">秉持“向野而生”精神，为露营和登山爱好者提供高性能产品，覆盖全场景户外需求。路演显示其通过“荒野横断计划”构筑技术壁垒。</td>
|
||
<td><span class="badge badge-info badge-outline">户外装备</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td class="font-semibold text-white">探路者</td>
|
||
<td><a href="https://valuefrontier.cn/company?scode=300005" target="_blank" class="text-blue-400 hover:underline">300005</a></td>
|
||
<td class="text-sm text-gray-300">连续17年为中国南（北）极考察队提供专业装备，曾支持《跟着贝尔去冒险》等顶尖户外真人秀。</td>
|
||
<td><span class="badge badge-info badge-outline">户外装备</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td class="font-semibold text-white">三夫户外</td>
|
||
<td><a href="https://valuefrontier.cn/company?scode=002780" target="_blank" class="text-blue-400 hover:underline">002780</a></td>
|
||
<td class="text-sm text-gray-300">主营业务为组织户外活动赛事和团建项目，与概念核心逻辑高度契合。</td>
|
||
<td><span class="badge badge-info badge-outline">户外装备</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td class="font-semibold text-white">浙江自然</td>
|
||
<td><a href="https://valuefrontier.cn/company?scode=605080" target="_blank" class="text-blue-400 hover:underline">605080</a></td>
|
||
<td class="text-sm text-gray-300">主要从事各类充气床垫、户外防水箱包、保温箱包等户外运动用品的研产销。</td>
|
||
<td><span class="badge badge-info badge-outline">户外装备</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td class="font-semibold text-white">浙江正特</td>
|
||
<td><a href="https://valuefrontier.cn/company?scode=001238" target="_blank" class="text-blue-400 hover:underline">001238</a></td>
|
||
<td class="text-sm text-gray-300">拥有遮阳制品、户外休闲家具两大产品系列，可用于营地搭建、遮阳避雨等场景。</td>
|
||
<td><span class="badge badge-info badge-outline">户外装备</span></td>
|
||
</tr>
|
||
<!-- 景区 -->
|
||
<tr>
|
||
<td class="font-semibold text-white">*ST张股</td>
|
||
<td><a href="https://valuefrontier.cn/company?scode=000430" target="_blank" class="text-blue-400 hover:underline">000430</a></td>
|
||
<td class="text-sm text-gray-300">张家界“七星山·骆驼杯”国际级荒野求生挑战赛的直接主办方，概念源头。</td>
|
||
<td><span class="badge badge-accent badge-outline">景区</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td class="font-semibold text-white">祥源文旅</td>
|
||
<td><a href="https://valuefrontier.cn/company?scode=600576" target="_blank" class="text-blue-400 hover:underline">600576</a></td>
|
||
<td class="text-sm text-gray-300">核心运营张家界黄龙洞、百龙天梯等资产，路演显示间接受益于赛事热点外溢。</td>
|
||
<td><span class="badge badge-accent badge-outline">景区</span></td>
|
||
</tr>
|
||
<!-- 技术支持 -->
|
||
<tr>
|
||
<td class="font-semibold text-white">当虹科技</td>
|
||
<td><a href="https://valuefrontier.cn/company?scode=688039" target="_blank" class="text-blue-400 hover:underline">688039</a></td>
|
||
<td class="text-sm text-gray-300">视频直播产品广泛应用于大型活动直播，可为赛事提供技术支持。</td>
|
||
<td><span class="badge badge-warning badge-outline">技术支持</span></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<!-- Footer -->
|
||
<footer class="text-center py-8">
|
||
<p class="text-xs text-gray-600">北京价值前沿科技有限公司 AI投研agent：“价小前投研” 进行投研呈现。<br>本报告基于公开数据AI合成，不构成任何投资建议，投资需谨慎。</p>
|
||
</footer>
|
||
|
||
</div>
|
||
|
||
<script>
|
||
// ECharts instance
|
||
const chartDom = document.getElementById('stock-chart');
|
||
const myChart = echarts.init(chartDom);
|
||
const option = {
|
||
backgroundColor: 'transparent',
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'shadow'
|
||
},
|
||
backgroundColor: 'rgba(26, 25, 46, 0.8)',
|
||
borderColor: 'rgba(255, 255, 255, 0.1)',
|
||
textStyle: {
|
||
color: '#e0e0e0'
|
||
}
|
||
},
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '3%',
|
||
containLabel: true
|
||
},
|
||
xAxis: {
|
||
type: 'value',
|
||
boundaryGap: [0, 0.01],
|
||
axisLabel: { color: '#888' },
|
||
splitLine: { show: true, lineStyle: { color: 'rgba(255, 255, 255, 0.1)' } }
|
||
},
|
||
yAxis: {
|
||
type: 'category',
|
||
data: ['万里马', '泰鹏智能'],
|
||
axisLabel: { color: '#ddd' }
|
||
},
|
||
series: [
|
||
{
|
||
name: '2025-11-13 涨幅',
|
||
type: 'bar',
|
||
data: [5.62, 11.8],
|
||
itemStyle: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||
{ offset: 0, color: '#22d3ee' },
|
||
{ offset: 1, color: '#3b82f6' }
|
||
]),
|
||
borderRadius: [0, 5, 5, 0]
|
||
},
|
||
label: {
|
||
show: true,
|
||
position: 'right',
|
||
formatter: '{c}%',
|
||
color: '#fff'
|
||
}
|
||
}
|
||
]
|
||
};
|
||
myChart.setOption(option);
|
||
window.addEventListener('resize', () => myChart.resize());
|
||
|
||
// Mouse move light orb effect
|
||
function moveOrb(event) {
|
||
const orb = document.getElementById('light-orb');
|
||
const x = event.clientX;
|
||
const y = event.clientY;
|
||
orb.style.transform = `translate(${x - 400}px, ${y - 400}px)`;
|
||
}
|
||
</script>
|
||
</body>
|
||
</html> |