Files
vf_react/public/htmls/第十五届全运会.html
2025-12-05 13:29:18 +08:00

533 lines
31 KiB
HTML
Raw Permalink 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.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: #010007;
overflow-x: hidden;
color: #E0E0E0;
}
.gradient-bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background: radial-gradient(circle at 10% 20%, rgba(13, 11, 40, 0.8), transparent 50%),
radial-gradient(circle at 80% 90%, rgba(30, 27, 75, 0.8), transparent 50%),
radial-gradient(circle at 50% 50%, rgba(10, 8, 25, 1), transparent 70%);
animation: move-glow 20s ease-in-out infinite alternate;
}
@keyframes move-glow {
from {
transform: translate(0, 0) scale(1);
}
to {
transform: translate(10vw, -10vh) scale(1.2);
}
}
.glass-card {
background: rgba(18, 18, 28, 0.5);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.08);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.glass-card:before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle at center, rgba(127, 86, 217, 0.1) 0%, rgba(127, 86, 217, 0) 40%);
transform: scale(0);
transition: transform 0.8s ease;
pointer-events: none;
}
.glass-card:hover:before {
transform: scale(1);
}
.bento-grid {
display: grid;
gap: 1.5rem;
grid-template-columns: repeat(12, 1fr);
grid-auto-rows: minmax(100px, auto);
}
.grid-item-1 { grid-column: span 12; grid-row: span 2; md:grid-column: span 8; }
.grid-item-2 { grid-column: span 12; grid-row: span 2; md:grid-column: span 4; }
.grid-item-3 { grid-column: span 12; grid-row: span 1; md:grid-column: span 4; }
.grid-item-4 { grid-column: span 12; grid-row: span 2; md:grid-column: span 8; }
.grid-item-5 { grid-column: span 12; grid-row: span 1; md:grid-column: span 6; }
.grid-item-6 { grid-column: span 12; grid-row: span 1; md:grid-column: span 6; }
.highlight-text {
color: #8A63D2;
font-weight: bold;
}
.section-title {
font-size: 1.75rem;
font-weight: 700;
padding-bottom: 1rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
margin-bottom: 1.5rem;
position: relative;
}
.section-title::after {
content: '';
position: absolute;
left: 0;
bottom: -1px;
width: 80px;
height: 2px;
background: linear-gradient(90deg, #8A63D2, transparent);
}
.tabs .tab {
color: rgba(255, 255, 255, 0.6);
}
.tabs .tab-active {
color: #FFFFFF;
font-weight: 600;
border-color: #8A63D2;
}
.table th, .table td {
border-color: rgba(255, 255, 255, 0.1);
}
.table th {
background-color: rgba(255, 255, 255, 0.05);
color: #E0E0E0;
}
</style>
</head>
<body class="min-h-screen">
<div class="gradient-bg"></div>
<div class="container mx-auto p-4 md:p-8">
<!-- Header -->
<header class="text-center py-8 md:py-12">
<h1 class="text-4xl md:text-6xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-cyan-400 mb-4">
第十五届全运会
</h1>
<p class="text-xl md:text-2xl text-gray-300 tracking-wider">国家战略下的湾区共振:体育、科技与资本的交响</p>
<div class="mt-6 text-xs text-gray-500">
<p>由 北京价值前沿科技有限公司 AI投研agent“价小前投研” 进行投研呈现</p>
<p>本报告为AI合成数据投资需谨慎。</p>
</div>
</header>
<!-- Bento Grid Layout -->
<main class="bento-grid">
<!-- Insight Core View -->
<div class="glass-card rounded-3xl p-6 md:p-8 grid-item-1">
<h2 class="text-2xl font-bold mb-4 text-white">核心观点摘要</h2>
<p class="text-gray-300 leading-relaxed">
第十五届全运会概念,其本质是 <strong class="text-purple-300">以国家级体育盛会为载体,深度催化粤港澳大湾区一体化进程和区域消费潜力的主题性投资机会</strong>。当前,该概念正处于从事件预期驱动向基本面验证过渡的关键阶段,其核心驱动力源自 <strong class="highlight-text">政策支持、区域经济增量和科技展示</strong> 三大支柱。未来潜力不仅在于赛事期间的短期爆发,更在于其对大湾区文体旅产业的长期结构性提升。
</p>
<div class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-4 text-center">
<div class="p-4 bg-black bg-opacity-20 rounded-xl">
<p class="text-sm text-gray-400">驱动力 I</p>
<p class="text-lg font-semibold text-white">国家战略级政策</p>
</div>
<div class="p-4 bg-black bg-opacity-20 rounded-xl">
<p class="text-sm text-gray-400">驱动力 II</p>
<p class="text-lg font-semibold text-white">超1500亿经济增量</p>
</div>
<div class="p-4 bg-black bg-opacity-20 rounded-xl">
<p class="text-sm text-gray-400">驱动力 III</p>
<p class="text-lg font-semibold text-white">新质生产力展示</p>
</div>
</div>
</div>
<!-- Key Timeline -->
<div class="glass-card rounded-3xl p-6 md:p-8 grid-item-2">
<h2 class="text-2xl font-bold mb-4 text-white">关键时间轴 & 催化剂</h2>
<ul class="steps steps-vertical">
<li class="step step-primary" data-content="●">
<div class="text-left ml-2">
<p class="font-bold">2025.11.02</p>
<p class="text-sm text-gray-400">火炬传递启动,科技元素亮相</p>
</div>
</li>
<li class="step step-primary" data-content="▲">
<div class="text-left ml-2">
<p class="font-bold">2025.11.09</p>
<p class="text-sm text-gray-400">全运会正式开幕,概念热度顶峰</p>
</div>
</li>
<li class="step" data-content="■">
<div class="text-left ml-2">
<p class="font-bold">2025.11.21</p>
<p class="text-sm text-gray-400">赛事闭幕,焦点转向长期效应</p>
</div>
</li>
<li class="step" data-content="!">
<div class="text-left ml-2">
<p class="font-bold">2025 Q4</p>
<p class="text-sm text-gray-400">财报验证,业绩兑现关键期</p>
</div>
</li>
</ul>
</div>
<!-- Tech Innovation -->
<div class="glass-card rounded-3xl p-6 grid-item-3">
<h3 class="font-bold text-white mb-2">科技驱动:新质生产力首秀</h3>
<p class="text-sm text-gray-400">
首次引入无人驾驶车(小马智行)与人形机器人(“夸父”)参与火炬传递,是全运会作为大湾区科技实力展示窗口的关键叙事。
</p>
</div>
<!-- Economic Impact -->
<div class="glass-card rounded-3xl p-6 md:p-8 grid-item-4">
<h2 class="text-2xl font-bold mb-4 text-white">经济影响与消费热潮</h2>
<div class="flex flex-col md:flex-row gap-4">
<div class="flex-1 space-y-3">
<div class="stat bg-transparent p-0">
<div class="stat-title text-gray-400">预计经济增量</div>
<div class="stat-value text-purple-300">超1500亿元</div>
<div class="stat-desc">国家级盛事带动区域经济</div>
</div>
<div class="stat bg-transparent p-0">
<div class="stat-title text-gray-400">广东省配套消费季</div>
<div class="stat-value text-cyan-300">35亿元</div>
<div class="stat-desc">覆盖文旅、餐饮、零售</div>
</div>
</div>
<div class="flex-1 min-h-[200px]" id="hotel-chart"></div>
</div>
</div>
<!-- Market Sentiment -->
<div class="glass-card rounded-3xl p-6 grid-item-5">
<h3 class="font-bold text-white mb-2">市场热度与情绪</h3>
<p class="text-sm text-gray-300">
呈现“上热下冷”:市场端(路演、媒体)热度高,研究端(正式研报)覆盖不足,表明当前更多是 <strong class="text-green-400">事件驱动的短线交易逻辑</strong>。情绪以乐观为主,但也夹杂非理性概念蔓延。
</p>
</div>
<!-- Potential Risks -->
<div class="glass-card rounded-3xl p-6 grid-item-6">
<h3 class="font-bold text-white mb-2">潜在风险与挑战</h3>
<p class="text-sm text-gray-300">
商业化风险最高:需警惕 <strong class="text-red-400">经济增量不及预期</strong> 及赛事结束后 <strong class="text-red-400">“利好出尽是利空”</strong> 的回调风险。地方财政压力也可能制约实际投入。
</p>
</div>
</main>
<!-- Detailed Analysis Section -->
<section class="mt-8 md:mt-12" x-data="{ tab: 'logic' }">
<h2 class="section-title">深度解析</h2>
<div class="tabs tabs-bordered mb-6">
<a class="tab tab-lg" :class="{ 'tab-active': tab === 'logic' }" @click="tab = 'logic'">核心逻辑与市场认知</a>
<a class="tab tab-lg" :class="{ 'tab-active': tab === 'chain' }" @click="tab = 'chain'">产业链与核心公司</a>
<a class="tab tab-lg" :class="{ 'tab-active': tab === 'expect' }" @click="tab = 'expect'">预期差分析</a>
</div>
<div class="glass-card rounded-3xl p-6 md:p-8 min-h-[300px]">
<!-- Tab 1: Core Logic -->
<div x-show="tab === 'logic'" x-transition>
<h3 class="text-xl font-bold mb-4 text-white">驱动力深度剖析</h3>
<ul class="space-y-4">
<li>
<strong class="text-purple-300">1. 政策驱动 (国家战略级):</strong> 根本驱动力源于服务“粤港澳大湾区”一体化发展的国家战略,获得的资源倾斜、政策支持远超普通体育赛事。
</li>
<li>
<strong class="text-cyan-300">2. 经济驱动 (增量消费与投资):</strong> <span class="highlight-text">1500亿元</span> 经济增量预期为市场提供了清晰的“业绩锚”。从场馆建设 (广电运通中标 <span class="font-mono">1.25亿元</span>)、赛事运营,到文旅消费 (岭南控股业务预期增长 <span class="font-mono">60%-90%</span>) 和品牌赞助 (安踏保障超 <span class="font-mono">7万人</span>),形成了完整的商业闭环。
</li>
<li>
<strong class="text-green-300">3. 科技驱动 (新质生产力展示):</strong> 无人车与机器人的参与,与“十五五”规划重点方向——人工智能、智能机器人等“新质生产力”不谋而合,提升了概念的叙事广度和深度。
</li>
</ul>
</div>
<!-- Tab 2: Industry Chain -->
<div x-show="tab === 'chain'" x-transition>
<h3 class="text-xl font-bold mb-4 text-white">核心玩家对比</h3>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="border border-purple-500/30 p-4 rounded-xl bg-black bg-opacity-20">
<h4 class="font-bold text-lg text-purple-300">领导者 & 逻辑最纯粹者</h4>
<p class="mt-2"><strong class="text-white">粤传媒 (002181.SZ):</strong> 逻辑硬核,“垄断”官方转播、广告、文创,<span class="font-mono">318.04%</span> 的利润增长已部分验证变现能力。</p>
<p class="mt-2"><strong class="text-white">岭南控股 (000524.SZ):</strong> 区域旅游龙头,直接受益于人流爆发,业务逻辑清晰。官方票务、酒店和旅游线路形成协同效应。</p>
</div>
<div class="border border-cyan-500/30 p-4 rounded-xl bg-black bg-opacity-20">
<h4 class="font-bold text-lg text-cyan-300">追赶者 & 弹性最大者</h4>
<p class="mt-2"><strong class="text-white">元隆雅图 (002878.SZ):</strong> 特许商品运营商,业务弹性极大。吉祥物“线下断货”是基本面强化的典型案例,具备“爆款”潜力。</p>
<p class="mt-2"><strong class="text-white">珠江股份 (600684.SH):</strong> 逻辑更具持续性,不仅受益于赛事期间,更着眼于“后全运时代”的场馆长期运营价值重估。</p>
</div>
<div class="border border-yellow-500/30 p-4 rounded-xl bg-black bg-opacity-20">
<h4 class="font-bold text-lg text-yellow-300">潜在证伪点</h4>
<p class="mt-2"><strong class="text-white">锋尚文化:</strong> 路演中多次提及竞标全运会项目 (预估1-2亿元),但最终关联公司名单中未出现,可能意味着竞标失败或项目进展不及预期,是潜在风险点。</p>
</div>
</div>
</div>
<!-- Tab 3: Expectation Gap -->
<div x-show="tab === 'expect'" x-transition>
<h3 class="text-xl font-bold mb-4 text-white">三大预期差分析</h3>
<ul class="space-y-4">
<li>
<p><strong class="text-white">1. 商业变现预期差:</strong> 市场可能低估了头部公司通过“垄断”或“独家”授权实现超额收益的能力。如 <strong class="highlight-text">粤传媒</strong> 的垄断地位和 <strong class="highlight-text">元隆雅图</strong> IP变现能力可能远超市场初步预期。</p>
</li>
<li>
<p><strong class="text-white">2. 宏观风险预期差:</strong> 市场对1500亿经济增量充满期待但可能忽略了地方政府债务压力、基建投资增速放缓等宏观制约因素构成潜在的“利好落空”风险。</p>
</li>
<li>
<p><strong class="text-white">3. 科技叙事预期差:</strong> 市场看到了无人车、机器人的“秀”,但未深入思考其对相关产业链的实际订单转化。目前象征意义大于商业意义,能否转化为实质性订单存在不确定性。</p>
</li>
</ul>
</div>
</div>
</section>
<!-- Rise Analysis -->
<section class="mt-8 md:mt-12">
<h2 class="section-title">涨幅异动深度剖析</h2>
<div class="space-y-4">
<div x-data="{ open: false }" class="glass-card rounded-2xl">
<button @click="open = !open" class="w-full text-left p-4 flex justify-between items-center">
<span class="text-lg font-semibold text-white">粤传媒 (002181) - “全运会”垄断预期的核心引爆</span>
<svg class="w-6 h-6 transition-transform" :class="{'rotate-180': open}" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /></svg>
</button>
<div x-show="open" x-collapse class="p-4 pt-0 text-gray-300">
<p><strong>核心驱动:</strong> 市场接收到“公司垄断全运会官方转播、广告投放及文创运营”的强烈利好信号叠加“上半年净利激增318.04%”的业绩佐证,构成教科书式的事件驱动行情。</p>
<p class="mt-2"><strong>辅助因素:</strong> “AI+传媒”的行业暖风和“粤港澳大湾区”的政策东风,共同构成了助推合力。</p>
<p class="mt-2 text-red-400 text-sm"><strong>风险提示:</strong> “垄断”细节待确认,事件驱动热度过后可能出现“利好出尽是利空”的回调风险。</p>
</div>
</div>
<div x-data="{ open: false }" class="glass-card rounded-2xl">
<button @click="open = !open" class="w-full text-left p-4 flex justify-between items-center">
<span class="text-lg font-semibold text-white">元隆雅图 (002878) - 从预期到断货的业绩弹性</span>
<button class="btn btn-xs btn-outline btn-success">弹性最大</button>
</button>
<div x-show="open" x-collapse class="p-4 pt-0 text-gray-300">
<p><strong>核心驱动:</strong> 全运会吉祥物“线下断货”信息经社交媒体验证触发市场对公司追加生产订单的强烈预期进而预期2025Q4单季净利有望翻倍引发资金抢筹。</p>
<p class="mt-2"><strong>逻辑链条:</strong> “独家授权” → “产品热销” → “追加订单” → “业绩兑现”。这是一个从概念到基本面强化的完美闭环。</p>
</div>
</div>
<div x-data="{ open: false }" class="glass-card rounded-2xl">
<button @click="open = !open" class="w-full text-left p-4 flex justify-between items-center">
<span class="text-lg font-semibold text-white">香江控股 (600162) / 富临运业 (002357) - 概念外溢与资金炒作</span>
</button>
<div x-show="open" x-collapse class="p-4 pt-0 text-gray-300">
<p><strong>香江控股:</strong> 资金将其视为“大湾区地产弹性标的”,博弈全运会带来的客流、短租与消费外溢。叠加“深中通道车流破纪录”等区域催化,属于典型的区域主题炒作。</p>
<p class="mt-2"><strong>富临运业:</strong> 主营地在四川,其上涨是典型的“概念蔓延”。资金逻辑是:全运会利好整个“大出行”行业,富临运业作为客运概念股被动受益,本质是投机资金利用其“冷门、低市值”特征进行的短期攻击。</p>
</div>
</div>
</div>
</section>
<!-- Stock List -->
<section class="mt-8 md:mt-12">
<h2 class="section-title">核心产业链及相关标的</h2>
<div class="overflow-x-auto glass-card rounded-3xl p-4">
<table class="table table-zebra w-full">
<thead>
<tr>
<th>股票名称</th>
<th>代码</th>
<th>核心逻辑 / 关联性</th>
<th>产业链环节</th>
</tr>
</thead>
<tbody>
<!-- 传媒 -->
<tr>
<td class="font-bold">粤传媒</td>
<td><a href="https://valuefrontier.cn/company?scode=002181" target="_blank" class="link link-hover text-purple-300">002181</a></td>
<td>【垄断地位】垄断全运会官方转播、广告及文创运营,下属媒体进行宣传报道。</td>
<td><div class="badge badge-secondary">传媒</div></td>
</tr>
<tr>
<td>新媒股份</td>
<td><a href="https://valuefrontier.cn/company?scode=300770" target="_blank" class="link link-hover">300770</a></td>
<td>实控人为广东广播电视台广东IPTV聚焦体育赛事播出。</td>
<td><div class="badge badge-secondary">传媒</div></td>
</tr>
<!-- 赛事运营 -->
<tr>
<td class="font-bold">中体产业</td>
<td><a href="https://valuefrontier.cn/company?scode=600158" target="_blank" class="link link-hover text-purple-300">600158</a></td>
<td>【官方合作】为广东赛区市场开发运营合作企业,负责市场开发、票务、特许销售及部分赛事运营。</td>
<td><div class="badge badge-primary">赛事运营</div></td>
</tr>
<tr>
<td>珠江股份</td>
<td><a href="https://valuefrontier.cn/company?scode=600684" target="_blank" class="link link-hover">600684</a></td>
<td>成员企业中标十五运会台山赛区赛事组织与运行服务项目,运营广州、汕头全运场馆。</td>
<td><div class="badge badge-primary">赛事运营</div></td>
</tr>
<!-- 器材相关 -->
<tr>
<td>舒华体育</td>
<td><a href="https://valuefrontier.cn/company?scode=605299" target="_blank" class="link link-hover">605299</a></td>
<td>中标广东省奥体中心赛前热身区体能训练器材采购项目。</td>
<td><div class="badge badge-accent">器材相关</div></td>
</tr>
<tr>
<td>金陵体育</td>
<td><a href="https://valuefrontier.cn/company?scode=300651" target="_blank" class="link link-hover">300651</a></td>
<td>为全运会举重比赛资格赛提供计时记分系统。</td>
<td><div class="badge badge-accent">器材相关</div></td>
</tr>
<!-- 工程建设 -->
<tr>
<td>广电运通</td>
<td><a href="https://valuefrontier.cn/company?scode=002152" target="_blank" class="link link-hover">002152</a></td>
<td>中标奥体中心、天河体育中心升级改造及智能化工程中标价1.25亿元。</td>
<td><div class="badge badge-info">工程建设</div></td>
</tr>
<tr>
<td>广田集团</td>
<td><a href="https://valuefrontier.cn/company?scode=002482" target="_blank" class="link link-hover">002482</a></td>
<td>中标龙岗赛区场馆维修改造工程项目。</td>
<td><div class="badge badge-info">工程建设</div></td>
</tr>
<tr>
<td>普邦股份</td>
<td><a href="https://valuefrontier.cn/company?scode=002663" target="_blank" class="link link-hover">002663</a></td>
<td>参与与赛事环境提升相关的项目建设(机场绿化、园博会等)。</td>
<td><div class="badge badge-info">工程建设</div></td>
</tr>
<!-- 消费旅游 -->
<tr>
<td class="font-bold">岭南控股</td>
<td><a href="https://valuefrontier.cn/company?scode=000524" target="_blank" class="link link-hover text-purple-300">000524</a></td>
<td>【核心受益】官方票务代理(广之旅)、酒店特许零售,打造多款主题旅游套餐及“体育+”产品矩阵。</td>
<td><div class="badge badge-warning">消费旅游</div></td>
</tr>
<tr>
<td>广百股份</td>
<td><a href="https://valuefrontier.cn/company?scode=002187" target="_blank" class="link link-hover">002187</a></td>
<td>旗下商场打造“运动+消费”主题区域,承接赛事流量。</td>
<td><div class="badge badge-warning">消费旅游</div></td>
</tr>
<tr>
<td>广州酒家</td>
<td><a href="https://valuefrontier.cn/company?scode=603043" target="_blank" class="link link-hover">603043</a></td>
<td>推出《食在广州·迎十五运金牌菜谱》,强化品牌文化。</td>
<td><div class="badge badge-warning">消费旅游</div></td>
</tr>
<tr>
<td>珠免集团</td>
<td><a href="https://valuefrontier.cn/company?scode=600185" target="_blank" class="link link-hover">600185</a></td>
<td>大湾区免税龙头,受益于游客数量增加。</td>
<td><div class="badge badge-warning">消费旅游</div></td>
</tr>
<!-- 其他 -->
<tr>
<td>广汽集团</td>
<td><a href="https://valuefrontier.cn/company?scode=601238" target="_blank" class="link link-hover">601238</a></td>
<td>作为“汽车类合作伙伴”,为赛事提供用车保障服务。</td>
<td><div class="badge badge-neutral">用车保障</div></td>
</tr>
</tbody>
</table>
</div>
</section>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
var chartDom = document.getElementById('hotel-chart');
var myChart = echarts.init(chartDom, 'dark');
var option;
option = {
backgroundColor: 'transparent',
title: {
text: '部分赛区城市酒店预订热度同比增幅',
left: 'center',
textStyle: {
color: '#E0E0E0',
fontSize: 14,
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
formatter: '{b}: {c}%'
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value',
boundaryGap: [0, 0.01],
axisLabel: {
color: '#A0A0A0',
formatter: '{value}%'
},
splitLine: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.1)'
}
}
},
yAxis: {
type: 'category',
data: ['江门', '佛山', '深圳', '清远', '惠州'],
axisLabel: {
color: '#A0A0A0'
}
},
series: [
{
name: '酒店预订热度增幅',
type: 'bar',
data: [60, 60, 60, 100, 100],
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: '#8360c3' },
{ offset: 1, color: '#2ebf91' }
])
},
label: {
show: true,
position: 'right',
formatter: '{c}%',
color: '#fff'
}
}
]
};
option && myChart.setOption(option);
window.addEventListener('resize', myChart.resize);
});
</script>
</body>
</html>