435 lines
28 KiB
HTML
435 lines
28 KiB
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>
|
||
|
||
<!-- Tailwind CSS & DaisyUI -->
|
||
<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>
|
||
|
||
<!-- Alpine.js -->
|
||
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
||
|
||
<!-- ECharts -->
|
||
<script src="https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js"></script>
|
||
|
||
<!-- Google Fonts -->
|
||
<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=Inter:wght@300;400;500;600;700&family=Orbitron:wght@400;700&display=swap" rel="stylesheet">
|
||
|
||
<style>
|
||
body {
|
||
font-family: 'Inter', sans-serif;
|
||
background-color: #020414;
|
||
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: #E0E6F7;
|
||
}
|
||
|
||
.concept-title {
|
||
font-family: 'Orbitron', sans-serif;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.glass-card {
|
||
background: rgba(16, 19, 44, 0.4);
|
||
backdrop-filter: blur(16px);
|
||
-webkit-backdrop-filter: blur(16px);
|
||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.glass-card:hover {
|
||
border-color: rgba(0, 246, 255, 0.4);
|
||
box-shadow: 0 0 20px rgba(0, 246, 255, 0.1);
|
||
}
|
||
|
||
.glow-divider {
|
||
height: 1px;
|
||
background: linear-gradient(90deg, transparent, rgba(0, 246, 255, 0.5), transparent);
|
||
border: none;
|
||
}
|
||
|
||
.section-title {
|
||
font-family: 'Orbitron', sans-serif;
|
||
text-shadow: 0 0 8px rgba(0, 246, 255, 0.5);
|
||
}
|
||
|
||
.bento-grid {
|
||
display: grid;
|
||
gap: 1.5rem;
|
||
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
|
||
}
|
||
|
||
.bento-grid .bento-item {
|
||
grid-column: span 1;
|
||
}
|
||
|
||
@media (min-width: 1024px) {
|
||
.bento-grid {
|
||
grid-template-columns: repeat(6, 1fr);
|
||
}
|
||
.bento-item.col-span-lg-3 {
|
||
grid-column: span 3;
|
||
}
|
||
.bento-item.col-span-lg-2 {
|
||
grid-column: span 2;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body class="min-h-screen p-4 sm:p-8">
|
||
<div class="max-w-7xl mx-auto space-y-12">
|
||
<!-- Header -->
|
||
<header class="text-center space-y-4">
|
||
<h1 class="concept-title text-4xl sm:text-5xl md:text-6xl font-bold tracking-widest text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 via-blue-400 to-purple-500">
|
||
微信小店官方服务微信电商空间
|
||
</h1>
|
||
<h2 class="text-xl sm:text-2xl text-slate-300 tracking-wider">深度行研报告</h2>
|
||
<p class="text-xs text-slate-500 max-w-2xl mx-auto">
|
||
北京价值前沿科技有限公司 AI投研agent：“价小前投研” 进行投研呈现，本报告为AI合成数据，投资需谨慎。
|
||
</p>
|
||
</header>
|
||
|
||
<!-- Insight Section -->
|
||
<section id="insight" class="glass-card rounded-3xl p-6 md:p-8">
|
||
<h2 class="section-title text-2xl md:text-3xl mb-6 text-cyan-300">
|
||
<span class="inline-block mr-2">✧</span> 概念Insight
|
||
</h2>
|
||
<div class="space-y-8 text-slate-300 leading-relaxed">
|
||
<div>
|
||
<h3 class="font-semibold text-lg text-white mb-3">0. 概念事件</h3>
|
||
<div class="pl-4 border-l-2 border-cyan-500/50 space-y-4 text-sm">
|
||
<p><strong class="text-cyan-400">背景描述：</strong> 微信电商的探索由来已久，但此前生态内存在微信小商店、视频号小店等多个交易载体，定位分散。为统一电商入口、整合生态资源，腾讯于2024年下半年开始进行战略重构。微信小店被重新定位为“<strong class="text-white">微信全域的交易中心</strong>”，旨在成为承接所有微信场景流量的统一交易载体，目标是构建一个“<strong class="text-white">社交-内容-交易</strong>”一体化的电商闭环。</p>
|
||
<p><strong class="text-cyan-400">核心催化事件：“送礼物”功能（微信蓝包）的推出：</strong> 2024年12月中下旬，微信小店正式开启“送礼物”功能的灰度测试。该功能被市场普遍解读为复刻十年前“微信红包”社交裂变奇迹的关键一步，旨在通过微信强大的社交关系链，低门槛、高效率地培养用户的实物电商交易习惯，被视为微信电商发展的“<strong class="text-white">转折点</strong>”。</p>
|
||
</div>
|
||
</div>
|
||
|
||
<hr class="glow-divider"/>
|
||
|
||
<div>
|
||
<h3 class="font-semibold text-lg text-white mb-3">1. 核心观点摘要</h3>
|
||
<p class="pl-4 border-l-2 border-cyan-500/50 text-base">微信电商正从过去分散探索的“游击战”阶段，转向以“微信小店”为核心、生态全面协同的“阵地战”新阶段。其核心驱动力在于<strong class="text-white">通过“送礼物”这一具备病毒式社交裂变潜力的功能，激活微信沉睡的巨大私域流量池，重构“人货场”关系</strong>。未来潜力巨大，有望成为继阿里、拼多多、抖音之后的电商“第四极”，而生态服务商（尤其是SaaS和代运营）将是本轮红利中最先且确定性最高的受益环节。</p>
|
||
</div>
|
||
|
||
<hr class="glow-divider"/>
|
||
|
||
<div>
|
||
<h3 class="font-semibold text-lg text-white mb-3">2. 核心逻辑与市场认知分析</h3>
|
||
<ul class="list-none space-y-4 pl-4 text-sm">
|
||
<li class="relative pl-6 before:content-['✓'] before:absolute before:left-0 before:top-1 before:text-cyan-400"><strong class="text-cyan-400">核心驱动力：</strong> 支撑该概念的根本逻辑是<strong class="text-white">腾讯战略聚焦下的生态资源整合与社交关系变现</strong>。包括战略统一与顶层设计、社交裂变引擎“送礼物”功能、以及与视频号、公众号、搜一搜等全域生态的无缝联动。</li>
|
||
<li class="relative pl-6 before:content-['✓'] before:absolute before:left-0 before:top-1 before:text-cyan-400"><strong class="text-cyan-400">市场热度与情绪：</strong> 当前市场对该概念关注度极高，情绪<strong class="text-white">整体极度乐观</strong>。新闻、路演和研报密集涌现，均聚焦于“送礼物”功能的革命性意义，并频繁类比“微信红包”的成功。</li>
|
||
<li class="relative pl-6 before:content-['✓'] before:absolute before:left-0 before:top-1 before:text-cyan-400"><strong class="text-cyan-400">预期差分析（关键风险点）：</strong>
|
||
<ul class="list-disc pl-5 mt-2 space-y-1 text-slate-400">
|
||
<li><strong class="text-red-400">用户画像模糊性：</strong> 路演数据对核心用户群体的描述存在严重矛盾（“下沉中老年” vs “高线年轻人”），这可能导致对优势品类和市场天花板的误判。</li>
|
||
<li><strong class="text-yellow-400">GMV增长的可持续性：</strong> 节假日“送礼物”GMV表现亮眼，但能否转化为高频日常购物习惯仍待验证。</li>
|
||
<li><strong class="text-yellow-400">对腾讯“电商基因”的过度乐观：</strong> 市场可能低估了从流量平台到成熟电商平台所需克服的供应链、履约、客服等运营挑战。</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<hr class="glow-divider"/>
|
||
|
||
<div>
|
||
<h3 class="font-semibold text-lg text-white mb-3">3. 关键催化剂与未来发展路径</h3>
|
||
<div class="grid md:grid-cols-2 gap-6">
|
||
<div class="space-y-2">
|
||
<h4 class="font-medium text-cyan-400">近期催化剂 (未来3-6个月)</h4>
|
||
<ul class="list-disc pl-5 space-y-1 text-sm text-slate-400">
|
||
<li>春节前“送礼物”功能全面上线及GMV数据表现。</li>
|
||
<li>微信公开课对电商战略的官方详细解读。</li>
|
||
<li>首批标杆品牌入驻与成功案例的示范效应。</li>
|
||
<li>服务商激励政策细则落地。</li>
|
||
</ul>
|
||
</div>
|
||
<div class="space-y-2">
|
||
<h4 class="font-medium text-cyan-400">长期发展路径</h4>
|
||
<ul class="list-disc pl-5 space-y-1 text-sm text-slate-400">
|
||
<li><strong class="text-white">第一阶段 (当前-2025)：</strong> 用户习惯培养与商家生态构建期。</li>
|
||
<li><strong class="text-white">第二阶段 (2026-2027)：</strong> 多模式融合与生态深化期（发力货架电商）。</li>
|
||
<li><strong class="text-white">第三阶段 (2028-)：</strong> 商业化成熟与生态霸权期。</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<hr class="glow-divider"/>
|
||
|
||
<div>
|
||
<h3 class="font-semibold text-lg text-white mb-3">4. 产业链与核心公司深度剖析</h3>
|
||
<p class="mb-4 text-sm">产业链由上游<strong class="text-white">(品牌/商家)</strong>、中游<strong class="text-white">(腾讯平台)</strong>和下游<strong class="text-white">(生态服务商)</strong>构成。其中，SaaS和代运营服务商逻辑最纯粹，是典型的“卖铲人”。</p>
|
||
<div class="overflow-x-auto">
|
||
<table class="table table-sm">
|
||
<thead>
|
||
<tr class="text-cyan-300">
|
||
<th>核心玩家</th>
|
||
<th>类型</th>
|
||
<th>竞争优势 & 逻辑</th>
|
||
<th>潜在风险/验证点</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td class="font-bold">微盟 / 有赞</td>
|
||
<td>电商SaaS服务商</td>
|
||
<td>深度绑定微信生态的双寡头，提供一体化管理工具，受益路径最直接。</td>
|
||
<td>需警惕官方推出更多免费基础工具挤压收费空间。</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="font-bold">壹网壹创 / 青木科技</td>
|
||
<td>品牌代运营</td>
|
||
<td>拥有丰富品牌客户资源和运营经验，承接品牌方在新渠道的“试水”需求。</td>
|
||
<td>逻辑纯粹性稍弱，需关注微信渠道收入占比。</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="font-bold">天地在线 / 线上线下</td>
|
||
<td>官方认证服务商</td>
|
||
<td>侧重产业带招商和基础服务，是生态的毛细血管，受益确定。</td>
|
||
<td>体量和想象空间可能不及前两类。</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<hr class="glow-divider"/>
|
||
|
||
<div>
|
||
<h3 class="font-semibold text-lg text-white mb-3">5. 潜在风险与挑战</h3>
|
||
<ul class="list-disc pl-5 space-y-2 text-sm text-slate-400">
|
||
<li><strong class="text-red-400">商业化风险：</strong> 用户习惯培养失败是最大风险。若用户“只看不买”现象未改善，商业闭环无法成立。</li>
|
||
<li><strong class="text-yellow-400">竞争风险：</strong> 阿里、抖音、拼多多等成熟平台的防守反击策略。</li>
|
||
<li><strong class="text-yellow-400">监管风险：</strong> 社交电商和直播带货是监管关注的重点领域。</li>
|
||
<li><strong class="text-red-400">信息交叉验证风险：</strong> 路演数据中关于核心用户画像的描述存在<strong class="text-white">直接冲突</strong>，是当前最大的信息疑点。</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<hr class="glow-divider"/>
|
||
|
||
<div>
|
||
<h3 class="font-semibold text-lg text-white mb-3">6. 综合结论与投资启示</h3>
|
||
<div class="pl-4 border-l-2 border-cyan-500/50 space-y-3 text-sm">
|
||
<p><strong class="text-cyan-400">最终看法：</strong> 概念正处于<strong class="text-white">从主题炒作向基本面驱动过渡的关键阶段</strong>。未来1-2个季度是重要的观察窗口，需密切跟踪用户行为数据和商家生态健康度。</p>
|
||
<p><strong class="text-cyan-400">最具投资价值的细分环节：</strong> <strong class="text-white">电商SaaS及代运营服务商</strong>。典型的“卖水”逻辑，商业模式清晰，受益路径直接，确定性最高。</p>
|
||
<p><strong class="text-cyan-400">需重点跟踪的关键指标：</strong> 平台季度GMV、月活买家数(MAU)、客单价、复购率；“送礼物”功能渗透率；品牌商家入驻数量；服务商业绩数据（新增付费商家数、ARPU等）。</p>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Data Points Section -->
|
||
<section id="data-points">
|
||
<h2 class="section-title text-2xl md:text-3xl mb-6 text-cyan-300 text-center">
|
||
<span class="inline-block mr-2">✧</span> 核心数据支撑
|
||
</h2>
|
||
<div class="bento-grid">
|
||
<!-- News -->
|
||
<div class="glass-card rounded-3xl p-6 bento-item col-span-lg-3">
|
||
<h3 class="font-semibold text-lg text-white mb-4">新闻数据精炼</h3>
|
||
<ul class="space-y-3 text-sm text-slate-300 list-disc pl-5">
|
||
<li><strong class="text-cyan-400">核心动态：</strong> “送礼物”功能（微信蓝包）灰度测试，支持实物礼品以红包形式发送，24小时未接收自动退款。</li>
|
||
<li><strong class="text-cyan-400">官方定位：</strong> 微信小店是<strong class="text-white">承接交易的载体</strong>，联合小程序（私域运营）和服务号（粉丝沉淀）构成电商闭环。</li>
|
||
<li><strong class="text-cyan-400">生态联动：</strong> 与视频号、公众号、搜一搜、小程序、企业微信等<strong class="text-white">全生态组件打通</strong>，形成增长飞轮。</li>
|
||
<li><strong class="text-cyan-400">激励政策：</strong> 升级<strong class="text-white">私域激励计划</strong>，通过减免技术服务费或发放电商成长卡激励商家。</li>
|
||
<li><strong class="text-cyan-400">市场数据：</strong> 2024年GMV达<strong class="text-white">2880亿</strong>，是2023年（1500亿）的1.92倍。“送礼物”功能灰度期日均GMV超<strong class="text-white">1亿</strong>。</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- GMV Chart -->
|
||
<div class="glass-card rounded-3xl p-6 bento-item col-span-lg-3 min-h-[300px]" x-data="chartData()">
|
||
<h3 class="font-semibold text-lg text-white mb-4">微信电商GMV增长趋势 (亿元)</h3>
|
||
<div id="gmvChart" class="w-full h-64"></div>
|
||
</div>
|
||
|
||
<!-- Roadshows -->
|
||
<div class="glass-card rounded-3xl p-6 bento-item col-span-lg-2">
|
||
<h3 class="font-semibold text-lg text-white mb-4">路演纪要</h3>
|
||
<ul class="space-y-3 text-sm text-slate-300 list-disc pl-5">
|
||
<li><strong class="text-cyan-400">战略定位：</strong> 定位为“<strong class="text-white">未来3-5年微信最重要的产品</strong>”，是“微信全域的交易中心”。</li>
|
||
<li><strong class="text-cyan-400">“送礼物”细节：</strong> 接收方可灵活更换同价位商品款式，特别适配节日等熟人社交场景。</li>
|
||
<li><strong class="text-cyan-400">服务商生态：</strong> 战略明确提出“<strong class="text-white">充分借力行业服务商</strong>”，全面开放服务商管理平台，取消资质要求。</li>
|
||
<li><strong class="text-cyan-400">用户画像(矛盾)：</strong> 一说主力为<strong class="text-white">40-65岁中老年女性</strong>；另一说<strong class="text-white">高线城市用户超70%</strong>。</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- Research Reports -->
|
||
<div class="glass-card rounded-3xl p-6 bento-item col-span-lg-2">
|
||
<h3 class="font-semibold text-lg text-white mb-4">研报观点</h3>
|
||
<ul class="space-y-3 text-sm text-slate-300 list-disc pl-5">
|
||
<li><strong class="text-cyan-400">核心武器：</strong> 微信小店是腾讯电商的<strong class="text-white">基础设施</strong>，是重构“人货场”关系的核心武器。</li>
|
||
<li><strong class="text-cyan-400">业务模式创新：</strong> “小店+视频号=兴趣社交”、“小店+社群=信任裂变”、“小店+公众号=深度种草”。</li>
|
||
<li><strong class="text-cyan-400">商家扶持：</strong> 大幅降低准入门槛，推出<strong class="text-white">0保证金试运营</strong>、技术服务费减免等政策。</li>
|
||
<li><strong class="text-cyan-400">投资建议：</strong> 看好腾讯电商发展，服务商体系开放将赋能产业链，建议关注<strong class="text-white">微盟、有赞、壹网壹创</strong>等。</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Stock Table Section -->
|
||
<section id="stocks">
|
||
<h2 class="section-title text-2xl md:text-3xl mb-6 text-cyan-300 text-center">
|
||
<span class="inline-block mr-2">✧</span> 核心产业链与相关公司
|
||
</h2>
|
||
<div class="glass-card rounded-3xl p-4 sm:p-6 overflow-x-auto">
|
||
<table class="table w-full">
|
||
<thead>
|
||
<tr class="text-cyan-300 text-sm">
|
||
<th>股票名称</th>
|
||
<th>关联逻辑与原因</th>
|
||
<th>其他标签/动态</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<!-- SaaS Service Providers -->
|
||
<tr class="hover:bg-slate-800/50">
|
||
<td class="font-bold text-white">微盟集团</td>
|
||
<td>微信生态头部SaaS服务商，腾讯最大广告代理商之一，已全面打通微信小店，提供公私域一体化解决方案。</td>
|
||
<td class="text-xs text-slate-400">电商SaaS, 品牌代运营, 产业带服务, 招商培训</td>
|
||
</tr>
|
||
<tr class="hover:bg-slate-800/50">
|
||
<td class="font-bold text-white">中国有赞</td>
|
||
<td>微信生态SaaS双寡头之一，深耕私域运营，已打通微信小店并推出AI托管服务。</td>
|
||
<td class="text-xs text-slate-400">电商SaaS</td>
|
||
</tr>
|
||
<!-- Brand Operators -->
|
||
<tr class="hover:bg-slate-800/50">
|
||
<td class="font-bold text-white"><a href="https://valuefrontier.cn/company?scode=301110" target="_blank" class="link link-hover">青木科技 (301110)</a></td>
|
||
<td>知名品牌代运营商，涨停逻辑直接关联微信小店功能升级带来的电商服务商业务机会。代运营品牌ECCO、APM等已布局。</td>
|
||
<td class="text-xs text-slate-400">品牌运营, AI赋能</td>
|
||
</tr>
|
||
<tr class="hover:bg-slate-800/50">
|
||
<td class="font-bold text-white"><a href="https://valuefrontier.cn/company?scode=003010" target="_blank" class="link link-hover">若羽臣 (003010)</a></td>
|
||
<td>品牌代运营商，涨停逻辑包含微信小店等新渠道布局带来的增长预期。代运营的康王、艾惟诺已开通微信小店。</td>
|
||
<td class="text-xs text-slate-400">品牌运营, 跨境电商</td>
|
||
</tr>
|
||
<tr class="hover:bg-slate-800/50">
|
||
<td class="font-bold text-white"><a href="https://valuefrontier.cn/company?scode=300792" target="_blank" class="link link-hover">壹网壹创 (300792)</a></td>
|
||
<td>研报点名的核心受益品牌运营商之一，有望承接品牌客户在微信电商的运营需求。</td>
|
||
<td class="text-xs text-slate-400">品牌运营</td>
|
||
</tr>
|
||
<!-- Official Service Providers -->
|
||
<tr class="hover:bg-slate-800/50">
|
||
<td class="font-bold text-white"><a href="https://valuefrontier.cn/company?scode=002995" target="_blank" class="link link-hover">天地在线 (002995)</a></td>
|
||
<td>子公司“河北太古网络”是微信小店官方认证的产业带服务商，擅长服饰家居、食品生鲜等。</td>
|
||
<td class="text-xs text-slate-400">产业带服务</td>
|
||
</tr>
|
||
<tr class="hover:bg-slate-800/50">
|
||
<td class="font-bold text-white"><a href="https://valuefrontier.cn/company?scode=300959" target="_blank" class="link link-hover">线上线下 (300959)</a></td>
|
||
<td>旗下两家子公司均为微信小店官方服务商，提供产业带服务，覆盖食品生鲜、美妆等行业。</td>
|
||
<td class="text-xs text-slate-400">产业带服务</td>
|
||
</tr>
|
||
<tr class="hover:bg-slate-800/50">
|
||
<td class="font-bold text-white"><a href="https://valuefrontier.cn/company?scode=002291" target="_blank" class="link link-hover">遥望科技 (002291)</a></td>
|
||
<td>作为投资/孵化方，关联微信小店官方服务商“可真有文化”。</td>
|
||
<td class="text-xs text-slate-400">投资孵化</td>
|
||
</tr>
|
||
<!-- Other ecosystem players -->
|
||
<tr class="hover:bg-slate-800/50">
|
||
<td class="font-bold text-white"><a href="https://valuefrontier.cn/company?scode=300785" target="_blank" class="link link-hover">值得买 (300785)</a></td>
|
||
<td>通过“AI值得买”小程序接入腾讯混元大模型，并获得微信一级入口，重定价为“腾讯生态AI导购第一股”。</td>
|
||
<td class="text-xs text-slate-400">AI导购, 腾讯生态</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</section>
|
||
|
||
</div>
|
||
|
||
<script>
|
||
function chartData() {
|
||
return {
|
||
initChart() {
|
||
var chartDom = document.getElementById('gmvChart');
|
||
var myChart = echarts.init(chartDom);
|
||
var option;
|
||
|
||
option = {
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'shadow'
|
||
}
|
||
},
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '3%',
|
||
containLabel: true
|
||
},
|
||
xAxis: [{
|
||
type: 'category',
|
||
data: ['2023年', '2024年', '2025年 (预估)'],
|
||
axisTick: {
|
||
alignWithLabel: true
|
||
},
|
||
axisLabel: {
|
||
color: '#a0aec0'
|
||
}
|
||
}],
|
||
yAxis: [{
|
||
type: 'value',
|
||
axisLabel: {
|
||
color: '#a0aec0'
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
color: 'rgba(255, 255, 255, 0.1)'
|
||
}
|
||
}
|
||
}],
|
||
series: [{
|
||
name: 'GMV (亿元)',
|
||
type: 'bar',
|
||
barWidth: '60%',
|
||
data: [1500, 2880, 8640],
|
||
itemStyle: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{ offset: 0, color: '#00f6ff' },
|
||
{ offset: 1, color: '#5368ff' }
|
||
])
|
||
},
|
||
label: {
|
||
show: true,
|
||
position: 'top',
|
||
color: '#fff'
|
||
}
|
||
}]
|
||
};
|
||
|
||
myChart.setOption(option);
|
||
window.addEventListener('resize', () => myChart.resize());
|
||
},
|
||
|
||
mounted() {
|
||
this.initChart();
|
||
}
|
||
}
|
||
}
|
||
|
||
// This is a workaround for Alpine to initialize the chart correctly.
|
||
document.addEventListener('alpine:init', () => {
|
||
// Find the chart component and call its init function
|
||
let chartComponent = document.querySelector('[x-data="chartData()"]');
|
||
if(chartComponent) {
|
||
Alpine.element(chartComponent).__x.getUnwrappedDataForElement(chartComponent).initChart();
|
||
}
|
||
});
|
||
|
||
</script>
|
||
</body>
|
||
|
||
</html> |