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

597
public/htmls/宠物经济.html Normal file
View File

@@ -0,0 +1,597 @@
<!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>宠物经济 (Pet Economy) - AI 深度投研报告</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=Noto+Sans+SC:wght@300;400;500;700&display=swap');
body {
font-family: 'Noto Sans SC', sans-serif;
background-color: #020418;
background-image:
radial-gradient(ellipse at 30% 20%, rgba(41, 0, 112, 0.4) 0%, transparent 60%),
radial-gradient(ellipse at 70% 80%, rgba(0, 78, 140, 0.3) 0%, transparent 60%);
overflow-x: hidden;
color: #d1d5db; /* gray-300 */
}
.glass-card {
background: rgba(17, 24, 39, 0.3); /* gray-900 with alpha */
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(107, 114, 128, 0.2); /* gray-500 with alpha */
transition: all 0.3s ease;
}
.glass-card:hover {
background: rgba(31, 41, 55, 0.4); /* gray-800 with alpha */
border: 1px solid rgba(107, 114, 128, 0.4);
box-shadow: 0 0 40px rgba(0, 199, 255, 0.1);
}
.bento-grid {
display: grid;
gap: 1rem;
grid-template-columns: repeat(12, 1fr);
}
.grid-span-12 { grid-column: span 12; }
.grid-span-8 { grid-column: span 12; }
.grid-span-6 { grid-column: span 12; }
.grid-span-4 { grid-column: span 12; }
.grid-span-3 { grid-column: span 12; }
@media (min-width: 1024px) {
.grid-span-8 { grid-column: span 8; }
.grid-span-6 { grid-column: span 6; }
.grid-span-4 { grid-column: span 4; }
.grid-span-3 { grid-column: span 3; }
}
.highlight-text {
color: #2dd4bf; /* teal-400 */
}
.glow-border {
position: relative;
}
.glow-border::before {
content: '';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
z-index: -1;
margin: -1px;
border-radius: inherit;
background: conic-gradient(from 180deg at 50% 50%, #2dd4bf 0deg, #a78bfa 90deg, #f472b6 180deg, #2dd4bf 360deg);
filter: blur(15px);
opacity: 0.2;
transition: opacity 0.3s ease;
}
.glass-card:hover .glow-border::before {
opacity: 0.4;
}
h1, h2, h3 {
background: -webkit-linear-gradient(45deg, #a5b4fc, #60a5fa);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/* ECharts tooltip styling */
.echarts-tooltip {
background: rgba(17, 24, 39, 0.8) !important;
border: 1px solid rgba(107, 114, 128, 0.3) !important;
color: #d1d5db !important;
backdrop-filter: blur(10px);
border-radius: 0.5rem;
padding: 10px !important;
}
</style>
</head>
<body class="min-h-screen">
<div class="container mx-auto p-4 md:p-8">
<!-- Header -->
<header class="text-center mb-12">
<h1 class="text-4xl md:text-6xl font-bold tracking-tight">宠物经济</h1>
<p class="text-lg md:text-xl text-blue-300 mt-2">AI 深度投研报告</p>
<div class="mt-4 text-xs text-gray-500">
<p>由 北京价值前沿科技有限公司 AI投研agent：“价小前投研” 进行投研呈现</p>
<p>本报告为AI合成数据，不构成任何投资建议，投资需谨慎。</p>
</div>
</header>
<main class="space-y-8">
<!-- Section 1: Core Logic & Executive Summary -->
<section id="core-logic">
<div class="bento-grid">
<div class="grid-span-12 lg:grid-span-8 glass-card rounded-3xl p-6 glow-border">
<h2 class="text-2xl font-bold mb-4">核心观点与逻辑</h2>
<div class="prose prose-invert max-w-none prose-p:text-gray-300 prose-strong:text-teal-300">
<p>宠物经济正处在一个由<strong>情感需求</strong>驱动、<strong>国产品牌</strong>通过<strong>新渠道变革</strong>引领的“黄金十年”初期。其核心驱动力是宠物“拟人化”带来的消费升级和量价齐升，当前已从主题炒作阶段过渡到由头部企业业绩驱动的基本面行情阶段。</p>
<p>支撑概念的根本逻辑是<strong>“情感价值的商业变现”</strong>，具体可拆解为三大支柱：</p>
<ol>
<li><strong>需求端：情感依赖催生“拟人化”消费。</strong> 核心消费人群（90后、00后占比超60%）将宠物视为家庭成员，推动消费从“基础喂养”升级为“精致养宠”。</li>
<li><strong>供给端：国产品牌的“天时、地利、人和”。</strong> 贸易摩擦提供窗口期，国产品牌更懂中国消费者，并通过抓住抖音等兴趣电商红利实现“弯道超车”。</li>
<li><strong>产业格局：低渗透、低集中的蓝海市场。</strong> 中国养宠渗透率（超20%）远低于美日（70%/57%），食品行业CR5仅21.3%（vs. 海外60%+），为龙头企业提供了巨大的成长空间。</li>
</ol>
<p><strong>结论：</strong>宠物食品赛道的国货替代逻辑最为清晰，确定性最高。行业已进入“淘汰赛”初期，增长正快速向具备品牌力、产品力和渠道运营能力的头部国产品牌集中。</p>
</div>
</div>
<div class="grid-span-12 lg:grid-span-4 glass-card rounded-3xl p-6 space-y-4">
<h3 class="text-xl font-bold mb-2">关键数据速览</h3>
<div class="flex items-center justify-between p-3 bg-white/5 rounded-xl">
<span class="text-gray-400">2024年市场规模</span>
<span class="font-bold text-xl highlight-text">~3002亿元</span>
</div>
<div class="flex items-center justify-between p-3 bg-white/5 rounded-xl">
<span class="text-gray-400">预计2028年规模</span>
<span class="font-bold text-xl highlight-text">~11500亿元</span>
</div>
<div class="flex items-center justify-between p-3 bg-white/5 rounded-xl">
<span class="text-gray-400">行业3-5年增速</span>
<span class="font-bold text-xl highlight-text">10%+</span>
</div>
<div class="flex items-center justify-between p-3 bg-white/5 rounded-xl">
<span class="text-gray-400">食品赛道占比</span>
<span class="font-bold text-xl highlight-text">52.8%</span>
</div>
<div class="flex items-center justify-between p-3 bg-white/5 rounded-xl">
<span class="text-gray-400">00后宠主占比</span>
<span class="font-bold text-xl highlight-text">25.6% (持续攀升)</span>
</div>
</div>
</div>
</section>
<!-- Section 2: Market Deep Dive with Charts -->
<section id="market-deep-dive">
<div class="bento-grid">
<!-- Market Size Chart -->
<div class="grid-span-12 lg:grid-span-6 glass-card rounded-3xl p-6">
<h3 class="text-xl font-bold mb-4">市场规模与预测 (亿元)</h3>
<div id="market-size-chart" class="w-full h-72"></div>
</div>
<!-- Consumer Demographics Chart -->
<div class="grid-span-12 lg:grid-span-6 glass-card rounded-3xl p-6">
<h3 class="text-xl font-bold mb-4">宠主年龄结构 (2024)</h3>
<div id="consumer-demographics-chart" class="w-full h-72"></div>
</div>
<!-- Market Segmentation Chart -->
<div class="grid-span-12 lg:grid-span-4 glass-card rounded-3xl p-6">
<h3 class="text-xl font-bold mb-4">消费市场结构 (2024)</h3>
<div id="market-segmentation-chart" class="w-full h-72"></div>
</div>
<!-- Catalysts & Future Path -->
<div class="grid-span-12 lg:grid-span-8 glass-card rounded-3xl p-6">
<h3 class="text-xl font-bold mb-4">关键催化剂与未来发展路径</h3>
<div x-data="{ tab: 'catalysts' }" class="prose prose-invert max-w-none prose-p:text-gray-300">
<div class="tabs tabs-boxed bg-white/10 mb-4">
<a class="tab" :class="{ 'tab-active': tab === 'catalysts' }" @click.prevent="tab = 'catalysts'">近期催化剂</a>
<a class="tab" :class="{ 'tab-active': tab === 'path' }" @click.prevent="tab = 'path'">长期发展路径</a>
<a class="tab" :class="{ 'tab-active': tab === 'risks' }" @click.prevent="tab = 'risks'">潜在风险</a>
</div>
<div x-show="tab === 'catalysts'">
<ul class="list-disc pl-5 space-y-2">
<li><strong>电商大促数据验证:</strong> 618、双十一等节点，头部品牌能否维持超高增速。</li>
<li><strong>高端产品线放量:</strong> 乖宝旗下<code class="text-pink-400">弗列加特</code>等高端品牌销售进展，直接影响盈利能力。</li>
<li><strong>政策细则落地:</strong> 浙江、安徽等地支持政策的正式出台将提供实质性利好。</li>
<li><strong>医疗产品获批:</strong> 瑞普生物的猫三联、驱虫药等重磅产品上市，验证国产替代进程。</li>
</ul>
</div>
<div x-show="tab === 'path'">
<ul class="list-disc pl-5 space-y-2">
<li><strong>第一阶段 (当前-2027):</strong> 食品赛道格局优化，头部国产品牌份额提升 (CR5: 20% → 30-40%)。</li>
<li><strong>第二阶段 (2027-2030):</strong> 医疗与服务连锁化加速，宠物保险渗透率提升成为重要催化剂。</li>
<li><strong>第三阶段 (2030以后):</strong> 全产业链生态成熟，走向“产品+服务+体验”综合生态，新业态涌现。</li>
</ul>
</div>
<div x-show="tab === 'risks'">
<ul class="list-disc pl-5 space-y-2">
<li><strong>竞争加剧:</strong> 黄金赛道吸引大量玩家，价格战和营销战可能侵蚀利润。</li>
<li><strong>成本压力:</strong> 上游原材料价格波动直接影响毛利率。</li>
<li><strong>食品安全与监管:</strong> 任何安全事件都可能对品牌造成毁灭性打击，监管趋严增加合规成本。</li>
<li><strong>医疗赛道预期差:</strong> 研报看好但路演揭示盈利难的现实，短期爆发预期可能被证伪。</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- Section 3: Deeper Analysis (from Insight) -->
<section id="deeper-analysis">
<div class="glass-card rounded-3xl p-6 md:p-8">
<h2 class="text-2xl font-bold mb-6 text-center">产业链深度剖析与核心玩家</h2>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<!-- Upstream -->
<div class="p-4 bg-gray-800/30 rounded-2xl border border-gray-700/50">
<h3 class="font-bold text-lg text-cyan-300 mb-2">上游：原材料</h3>
<p class="text-sm text-gray-400">谷物、肉类、添加剂等。成本波动直接影响中游利润。</p>
<p class="text-sm mt-2"><strong>代表公司:</strong> <span class="font-semibold text-gray-200">索宝蛋白, 永安药业</span></p>
</div>
<!-- Midstream -->
<div class="p-4 bg-gray-800/30 rounded-2xl border border-purple-500/50 ring-2 ring-purple-500/20">
<h3 class="font-bold text-lg text-purple-300 mb-2">中游：产品制造与品牌</h3>
<p class="text-sm text-gray-400">核心赛道，国货崛起主战场。</p>
<ul class="text-sm mt-2 space-y-1">
<li><strong>食品:</strong> <span class="font-semibold text-gray-200">乖宝宠物(龙头), 中宠股份, 佩蒂股份</span></li>
<li><strong>医疗:</strong> <span class="font-semibold text-gray-200">瑞普生物, 中牧股份, 科前生物</span></li>
<li><strong>用品:</strong> <span class="font-semibold text-gray-200">源飞宠物, 依依股份, 天元宠物</span></li>
</ul>
</div>
<!-- Downstream -->
<div class="p-4 bg-gray-800/30 rounded-2xl border border-gray-700/50">
<h3 class="font-bold text-lg text-pink-300 mb-2">下游：销售与服务</h3>
<p class="text-sm text-gray-400">线上渠道为主（占比~66%），渠道变革是国货超车关键。</p>
<ul class="text-sm mt-2 space-y-1">
<li><strong>线上:</strong> <span class="font-semibold text-gray-200">电商平台 (淘系, 抖音), 狮头股份(分销)</span></li>
<li><strong>线下:</strong> <span class="font-semibold text-gray-200">宠物医院 (瑞派), 宠物店, 商超</span></li>
</ul>
</div>
</div>
<div class="mt-8 overflow-x-auto">
<h3 class="text-xl font-bold mb-4 text-center">核心玩家对比</h3>
<table class="table table-zebra-zebra w-full text-sm">
<thead class="bg-white/10">
<tr>
<th>公司</th>
<th>赛道定位</th>
<th>核心优势</th>
<th>业务验证</th>
<th>逻辑纯粹度</th>
</tr>
</thead>
<tbody>
<tr class="hover:bg-cyan-500/10">
<td class="font-bold text-white">乖宝宠物 (301498)</td>
<td>宠物食品绝对龙头</td>
<td>强大品牌矩阵 (麦富迪+弗列加特)、顶级线上运营能力</td>
<td>双十一市占率12%行业第一，业绩持续高增</td>
<td class="font-bold text-teal-300">极高</td>
</tr>
<tr class="hover:bg-cyan-500/10">
<td class="font-bold text-white">瑞普生物 (300119)</td>
<td>宠物医疗一体化平台</td>
<td>“产品+供应链+服务(瑞派)”生态闭环布局</td>
<td>自研猫三联打破垄断，增持瑞派强化渠道</td>
<td class="font-bold text-teal-300">高</td>
</tr>
<tr class="hover:bg-cyan-500/10">
<td class="font-bold text-white">中宠/佩蒂</td>
<td>宠物食品追赶者</td>
<td>全球供应链与制造能力，发力国内自主品牌</td>
<td>自有品牌增速较快，但品牌势能与乖宝有差距</td>
<td class="font-bold text-lime-400">较高</td>
</tr>
<tr class="hover:bg-cyan-500/10">
<td class="font-bold text-white">源飞宠物 (001222)</td>
<td>宠物用品细分龙头</td>
<td>牵引用具全球领先制造优势，与沃尔玛等大客户关系稳固</td>
<td>海外业务稳定，但国内自主品牌尚在起步阶段</td>
<td class="font-bold text-amber-400">中等</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<!-- Section 4: Thematic Stocks -->
<section id="thematic-stocks">
<div class="glass-card rounded-3xl p-6 md:p-8">
<h2 class="text-2xl font-bold mb-6 text-center">概念相关标的池</h2>
<!-- Core Stocks Table -->
<h3 class="text-xl font-semibold mb-4 text-sky-300">核心标的</h3>
<div class="overflow-x-auto">
<table class="table w-full">
<thead class="bg-white/10 text-base">
<tr>
<th>公司名称</th>
<th>股票代码</th>
<th>细分赛道</th>
<th>核心逻辑 / 业务亮点</th>
</tr>
</thead>
<tbody>
<!-- 宠物食品 -->
<tr class="bg-gray-800/20"><td colspan="4" class="font-bold text-lg text-purple-300">宠物食品</td></tr>
<tr class="hover:bg-purple-500/10">
<td>乖宝宠物</td>
<td><a href="https://valuefrontier.cn/company?scode=301498" target="_blank" class="link link-hover text-blue-400">301498</a></td>
<td>食品 (龙头)</td>
<td>A股收入第一，自有品牌“麦富迪”市占率居首，线上渠道运营能力顶级。</td>
</tr>
<tr class="hover:bg-purple-500/10">
<td>中宠股份</td>
<td><a href="https://valuefrontier.cn/company?scode=002891" target="_blank" class="link link-hover text-blue-400">002891</a></td>
<td>食品</td>
<td>A股收入第二，全球供应链布局，国内外产能持续扩张。</td>
</tr>
<tr class="hover:bg-purple-500/10">
<td>佩蒂股份</td>
<td><a href="https://valuefrontier.cn/company?scode=300673" target="_blank" class="link link-hover text-blue-400">300673</a></td>
<td>食品 / 用品</td>
<td>宠物咬胶市占率龙头，新西兰主粮项目是重要看点。</td>
</tr>
<tr class="hover:bg-purple-500/10">
<td>路斯股份</td>
<td><a href="https://valuefrontier.cn/company?scode=920419" target="_blank" class="link link-hover text-blue-400">920419</a></td>
<td>食品 (北交所)</td>
<td>宠物肉干产品为主，柬埔寨工厂持续扩张以拓展海外市场。</td>
</tr>
<tr class="hover:bg-purple-500/10">
<td>永安药业</td>
<td><a href="https://valuefrontier.cn/company?scode=002365" target="_blank" class="link link-hover text-blue-400">002365</a></td>
<td>上游原料</td>
<td>全球牛磺酸龙头（猫粮必需品），切入终端市场形成产业闭环。</td>
</tr>
<!-- 宠物医疗 -->
<tr class="bg-gray-800/20"><td colspan="4" class="font-bold text-lg text-teal-300">宠物医疗</td></tr>
<tr class="hover:bg-teal-500/10">
<td>瑞普生物</td>
<td><a href="https://valuefrontier.cn/company?scode=300119" target="_blank" class="link link-hover text-blue-400">300119</a></td>
<td>医疗 (龙头)</td>
<td>自研猫三联“瑞喵舒”打破垄断，深度绑定瑞派医院，“产品+服务”一体化。</td>
</tr>
<tr class="hover:bg-teal-500/10">
<td>中牧股份</td>
<td><a href="https://valuefrontier.cn/company?scode=600195" target="_blank" class="link link-hover text-blue-400">600195</a></td>
<td>医疗</td>
<td>拥有多款宠物疫苗、药品、保健品，产品线丰富。</td>
</tr>
<tr class="hover:bg-teal-500/10">
<td>科前生物</td>
<td><a href="https://valuefrontier.cn/company?scode=688526" target="_blank" class="link link-hover text-blue-400">688526</a></td>
<td>医疗</td>
<td>宠物GCP监督检查通过，猫三联疫苗进入临床申请阶段。</td>
</tr>
<tr class="hover:bg-teal-500/10">
<td>普莱柯</td>
<td><a href="https://valuefrontier.cn/company?scode=603566" target="_blank" class="link link-hover text-blue-400">603566</a></td>
<td>医疗</td>
<td>猫三联灭活疫苗面世，引领进口替代趋势。</td>
</tr>
<!-- 宠物用品 -->
<tr class="bg-gray-800/20"><td colspan="4" class="font-bold text-lg text-indigo-300">宠物用品</td></tr>
<tr class="hover:bg-indigo-500/10">
<td>源飞宠物</td>
<td><a href="https://valuefrontier.cn/company?scode=001222" target="_blank" class="link link-hover text-blue-400">001222</a></td>
<td>用品 (龙头)</td>
<td>宠物牵引用具全球龙头，与沃尔玛等巨头合作紧密。</td>
</tr>
<tr class="hover:bg-indigo-500/10">
<td>依依股份</td>
<td><a href="https://valuefrontier.cn/company?scode=001206" target="_blank" class="link link-hover text-blue-400">001206</a></td>
<td>用品 (龙头)</td>
<td>宠物卫生用品龙头，宠物垫出口份额超30%。</td>
</tr>
<tr class="hover:bg-indigo-500/10">
<td>天元宠物</td>
<td><a href="https://valuefrontier.cn/company?scode=301335" target="_blank" class="link link-hover text-blue-400">301335</a></td>
<td>用品 / 渠道</td>
<td>产品线广，并购供应链平台“它品”及电商服务商淘通科技，整合产业链。</td>
</tr>
</tbody>
</table>
</div>
<!-- Recent Movers Table -->
<h3 class="text-xl font-semibold mt-8 mb-4 text-amber-300">近期异动及关联标的</h3>
<div class="overflow-x-auto">
<table class="table w-full">
<thead class="bg-white/10 text-base">
<tr>
<th>公司名称</th>
<th>股票代码</th>
<th>异动日期</th>
<th>关联逻辑 / 驱动因素</th>
</tr>
</thead>
<tbody>
<tr class="hover:bg-amber-500/10">
<td>昂利康</td>
<td><a href="https://valuefrontier.cn/company?scode=002940" target="_blank" class="link link-hover text-blue-400">002940</a></td>
<td>2025-06-20</td>
<td>创新药政策利好 + 宠物经济双重驱动；设立动保科技子公司布局宠物药。</td>
</tr>
<tr class="hover:bg-amber-500/10">
<td>狮头股份</td>
<td><a href="https://valuefrontier.cn/company?scode=600539" target="_blank" class="link link-hover text-blue-400">600539</a></td>
<td>2025-08-25</td>
<td>政策红利直接受益标的；旗下昆汀科技为头部宠粮线上分销平台。</td>
</tr>
<tr class="hover:bg-amber-500/10">
<td>红豆股份</td>
<td><a href="https://valuefrontier.cn/company?scode=600400" target="_blank" class="link link-hover text-blue-400">600400</a></td>
<td>2025-08-18</td>
<td>控股股东布局宠物用品科技公司，引发市场对集团层面切入宠物赛道的预期。</td>
</tr>
<tr class="hover:bg-amber-500/10">
<td>仙乐健康</td>
<td><a href="https://valuefrontier.cn/company?scode=300791" target="_blank" class="link link-hover text-blue-400">300791</a></td>
<td>2025-06-12</td>
<td>申请“仙乐得宠”商标，市场预期其凭借保健品优势拓展宠物营养品线。</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
</main>
<footer class="text-center mt-12 py-6 border-t border-gray-800">
<p class="text-xs text-gray-500">免责声明：本报告由AI模型基于公开数据合成，所有内容仅供参考，不构成任何投资建议。</p>
<p class="text-xs text-gray-600 mt-1">© 2025 北京价值前沿科技有限公司. All Rights Reserved.</p>
</footer>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
const echartsTextStyle = {
color: '#d1d5db',
fontFamily: 'Noto Sans SC, sans-serif'
};
const echartsAxisLineStyle = { lineStyle: { color: 'rgba(107, 114, 128, 0.3)' } };
const echartsSplitLineStyle = { lineStyle: { color: 'rgba(107, 114, 128, 0.1)' } };
const echartsTooltipStyle = {
trigger: 'axis',
backgroundColor: 'rgba(17, 24, 39, 0.8)',
borderColor: 'rgba(107, 114, 128, 0.3)',
textStyle: { color: '#d1d5db' },
axisPointer: {
type: 'cross',
label: { backgroundColor: '#6a7985' }
},
formatter: function (params) {
let tooltipHtml = `<div class="echarts-tooltip">${params[0].name}<br/>`;
params.forEach(function (item) {
tooltipHtml += `${item.marker} ${item.seriesName}: <strong>${item.value}</strong> 亿元<br/>`;
});
tooltipHtml += '</div>';
return tooltipHtml;
}
};
// Chart 1: Market Size
const marketSizeChart = echarts.init(document.getElementById('market-size-chart'));
const marketSizeOptions = {
tooltip: echartsTooltipStyle,
grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
xAxis: {
type: 'category',
boundaryGap: false,
data: ['2015', '2024', '2027 (Est.)', '2028 (Est.)'],
axisLabel: echartsTextStyle,
axisLine: echartsAxisLineStyle,
},
yAxis: {
type: 'value',
axisLabel: { ...echartsTextStyle, formatter: '{value}' },
axisLine: echartsAxisLineStyle,
splitLine: echartsSplitLineStyle
},
series: [{
name: '市场规模',
type: 'line',
smooth: true,
symbol: 'none',
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(45, 212, 191, 0.5)'
}, {
offset: 1,
color: 'rgba(45, 212, 191, 0)'
}])
},
lineStyle: { color: '#2dd4bf' },
itemStyle: { color: '#2dd4bf' },
data: [404, 3002, 4042, 11500] // Note: 2015 data not available in source, using a placeholder. The earliest full figure is 2024.
}]
};
marketSizeChart.setOption(marketSizeOptions);
// Chart 2: Consumer Demographics
const consumerDemographicsChart = echarts.init(document.getElementById('consumer-demographics-chart'));
const consumerDemographicsOptions = {
tooltip: {
trigger: 'item',
backgroundColor: 'rgba(17, 24, 39, 0.8)',
borderColor: 'rgba(107, 114, 128, 0.3)',
textStyle: { color: '#d1d5db' }
},
legend: {
orient: 'vertical',
left: 'left',
textStyle: echartsTextStyle
},
series: [{
name: '宠主年龄结构',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '20',
fontWeight: 'bold',
formatter: '{b}\n{d}%',
...echartsTextStyle
}
},
labelLine: { show: false },
data: [
{ value: 41.2, name: '90后' },
{ value: 25.6, name: '00后' },
{ value: 25.5, name: '80后' },
{ value: 7.7, name: '70后及以前' } // (100 - 41.2 - 25.6 - 25.5)
],
color: ['#60a5fa', '#a78bfa', '#f472b6', '#4ade80']
}]
};
consumerDemographicsChart.setOption(consumerDemographicsOptions);
// Chart 3: Market Segmentation
const marketSegmentationChart = echarts.init(document.getElementById('market-segmentation-chart'));
const marketSegmentationOptions = {
tooltip: {
trigger: 'item',
backgroundColor: 'rgba(17, 24, 39, 0.8)',
borderColor: 'rgba(107, 114, 128, 0.3)',
textStyle: { color: '#d1d5db' }
},
legend: {
bottom: 0,
textStyle: echartsTextStyle
},
series: [{
name: '消费结构',
type: 'pie',
radius: '55%',
center: ['50%', '45%'],
data: [
{ value: 52.8, name: '食品' },
{ value: 28.0, name: '医疗' },
{ value: 12.4, name: '用品' },
{ value: 6.8, name: '服务' }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
color: ['#818cf8', '#2dd4bf', '#f87171', '#fbbf24']
}]
};
marketSegmentationChart.setOption(marketSegmentationOptions);
// Resize charts on window resize
window.addEventListener('resize', function () {
marketSizeChart.resize();
consumerDemographicsChart.resize();
marketSegmentationChart.resize();
});
});
</script>
</body>
</html>