Files
vf_react/public/htmls/AI电商跨境电商.html
2025-12-05 13:29:18 +08:00

542 lines
33 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>AI电商跨境电商 - 深度投研报告</title>
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.10.2/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>
<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=Space+Grotesk:wght@400;500;700&display=swap" rel="stylesheet">
<style>
:root {
--glow-color: #00ffff;
--glow-color-alt: #ff00ff;
}
body {
font-family: 'Inter', 'Helvetica Neue', 'Arial', sans-serif;
background-color: #020010;
background-image:
radial-gradient(at 20% 20%, hsla(212, 90%, 50%, 0.1) 0px, transparent 50%),
radial-gradient(at 80% 20%, hsla(288, 80%, 50%, 0.1) 0px, transparent 50%),
radial-gradient(at 20% 80%, hsla(180, 90%, 50%, 0.15) 0px, transparent 50%),
radial-gradient(at 80% 80%, hsla(340, 85%, 60%, 0.1) 0px, transparent 50%);
color: #e0e0e0;
}
.glass-card {
background: rgba(15, 23, 42, 0.4);
-webkit-backdrop-filter: blur(16px);
backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
}
.glass-card:hover {
background: rgba(15, 23, 42, 0.6);
border-color: rgba(0, 255, 255, 0.5);
transform: translateY(-4px);
box-shadow: 0 0 20px rgba(0, 255, 255, 0.2);
}
.glow-text {
text-shadow:
0 0 5px var(--glow-color),
0 0 10px var(--glow-color),
0 0 20px var(--glow-color);
}
.glow-text-alt {
text-shadow:
0 0 5px var(--glow-color-alt),
0 0 10px var(--glow-color-alt),
0 0 20px var(--glow-color-alt);
}
.section-title {
font-family: 'Space Grotesk', sans-serif;
font-weight: 700;
}
.bento-grid {
display: grid;
gap: 1.5rem;
grid-template-columns: repeat(12, 1fr);
grid-auto-rows: auto;
}
.bento-item {
border-radius: 1.5rem;
padding: 1.5rem;
position: relative;
overflow: hidden;
}
/* DaisyUI Table Customization */
.table {
background-color: transparent;
}
.table thead th, .table th {
background-color: rgba(0, 255, 255, 0.05);
color: #00ffff;
font-family: 'Space Grotesk', sans-serif;
}
.table tbody tr:hover {
background-color: rgba(255, 255, 255, 0.05);
}
/* Accordion Customization */
.collapse-title {
background-color: rgba(255, 255, 255, 0.05) !important;
border-radius: 1rem !important;
}
.collapse-content {
background-color: rgba(10, 10, 20, 0.3) !important;
}
.collapse:not(.collapse-close) .collapse-title {
background-color: rgba(0, 255, 255, 0.1) !important;
}
.prose h3 {
color: #93c5fd;
}
.prose ul > li::before {
background-color: #00ffff;
}
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #020010;
}
::-webkit-scrollbar-thumb {
background-color: rgba(0, 255, 255, 0.3);
border-radius: 10px;
border: 2px solid #020010;
}
</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 section-title glow-text text-cyan-300">AI电商 x 跨境电商</h1>
<p class="mt-4 text-xl text-slate-300">深度投研报告</p>
<p class="mt-2 text-xs text-slate-500 tracking-widest">
北京价值前沿科技有限公司 AI投研agent“价小前投研” 呈现 | 本报告为AI合成数据投资需谨慎。
</p>
</header>
<!-- Insight Section -->
<main>
<section id="insight" class="mb-16">
<div class="bento-grid">
<!-- 核心观点摘要 -->
<div class="bento-item glass-card col-span-12 lg:col-span-12">
<h2 class="section-title text-2xl mb-4 text-fuchsia-400 glow-text-alt">核心观点摘要</h2>
<p class="text-slate-300 leading-relaxed">
“AI电商跨境电商”正从一个前沿的技术叙事迅速演变为应对行业剧变的“必选项”。其核心驱动力在于 <strong>AI技术带来的“降本增效”与“模式重塑”能力</strong>,恰好对冲了当前跨境电商领域面临的 <strong>政策收紧、竞争加剧和成本上涨</strong> 三重压力。该概念已越过纯粹的主题炒作阶段,进入 <strong>应用落地与基本面验证的关键时期</strong>未来潜力在于AI能否从赋能单一环节走向重构整个产业链条。
</p>
</div>
<!-- 概念事件 -->
<div class="bento-item glass-card col-span-12 lg:col-span-7">
<h2 class="section-title text-2xl mb-4 text-cyan-300 glow-text">概念进化史</h2>
<ul class="space-y-4 timeline timeline-vertical">
<li>
<div class="timeline-start timeline-box"><strong>技术奠基期 (2023-2024年初)</strong><br>以ChatGPT为代表的生成式AI技术突破初步在行业内渗透。截至23年底已有72%的跨境卖家使用过AI工具。</div>
<hr class="bg-cyan-500"/>
</li>
<li>
<hr class="bg-cyan-500"/>
<div class="timeline-end timeline-box"><strong>产业应用期 (2024年至今)</strong><br>平台(亚马逊/阿里)规模化部署AI功能企业(吉宏/焦点/1688)纷纷推出或深化AI应用如“遨虾”、“ChatGiiKin-6B”、“AI麦可”等。</div>
<hr class="bg-cyan-500"/>
</li>
<li>
<hr class="bg-cyan-500"/>
<div class="timeline-start timeline-box"><strong>政策催化与风险暴露期 (2024年9月至今)</strong><br>美国“小额豁免”政策收紧,倒逼行业模式转型;中国各级政府密集出台支持政策,形成对冲。</div>
<hr class="bg-cyan-500"/>
</li>
<li>
<hr class="bg-cyan-500"/>
<div class="timeline-end timeline-box"><strong>市场验证与股价反应 (2025年)</strong><br>吉宏股份、天下秀等公司因AI应用落地及业绩兑现股价获得市场正反馈概念进入基本面验证阶段。</div>
</li>
</ul>
</div>
<!-- 核心驱动力 -->
<div class="bento-item glass-card col-span-12 lg:col-span-5">
<h2 class="section-title text-2xl mb-4 text-cyan-300 glow-text">核心驱动力</h2>
<div class="space-y-4 prose max-w-none prose-invert prose-p:text-slate-300">
<div class="p-4 rounded-lg bg-slate-800/50 border border-slate-700">
<h4 class="font-bold text-cyan-400">1. 技术驱动的效率革命</h4>
<p>AI已贯穿前端(营销获客)、中端(运营决策)和后端(供应链)全链路,实现从“降本增效”到“流程再造”的深化。</p>
</div>
<div class="p-4 rounded-lg bg-slate-800/50 border border-slate-700">
<h4 class="font-bold text-cyan-400">2. 政策驱动的模式转型</h4>
<p>美国“小额豁免”政策调整倒逼行业从“小包直邮”转向更考验精细化运营的“海外仓+半托管”模式而这恰是AI可深度赋能的领域。</p>
</div>
<div class="p-4 rounded-lg bg-slate-800/50 border border-slate-700">
<h4 class="font-bold text-cyan-400">3. 竞争驱动的军备竞赛</h4>
<p>Temu、TikTok Shop等新兴平台利用算法推荐形成降维打击迫使平台方和卖家投入AI提升运营效率和用户体验成为生存关键。</p>
</div>
</div>
</div>
<!-- 预期差分析 -->
<div class="bento-item glass-card col-span-12 lg:col-span-8">
<h2 class="section-title text-2xl mb-4 text-fuchsia-400 glow-text-alt">预期差分析</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="p-4 rounded-lg bg-fuchsia-950/20 border border-fuchsia-700/50">
<h4 class="font-bold text-fuchsia-300">市场共识</h4>
<p class="text-sm text-slate-300 mt-2">AI在营销内容生成、客服等前端环节的应用价值已成为市场共识效果直观、易实现。</p>
</div>
<div class="p-4 rounded-lg bg-fuchsia-950/20 border border-fuchsia-700/50">
<h4 class="font-bold text-fuchsia-300">潜在预期差 ①:后端供应链赋能</h4>
<p class="text-sm text-slate-300 mt-2">市场可能低估AI在库存预测、供应链协同等后端环节的颠覆性潜力这才是决定卖家利润和现金流生命线的核心。</p>
</div>
<div class="p-4 rounded-lg bg-fuchsia-950/20 border border-fuchsia-700/50">
<h4 class="font-bold text-fuchsia-300">潜在预期差 ②“AI+合规”价值</h4>
<p class="text-sm text-slate-300 mt-2">随着欧美监管趋严能够提供自动化合规审查、风险预警的AI解决方案将成为刚需其商业价值巨大但目前关注较少。</p>
</div>
<div class="p-4 rounded-lg bg-fuchsia-950/20 border border-fuchsia-700/50">
<h4 class="font-bold text-fuchsia-300">潜在预期差 ③政策与AI的绑定关系</h4>
<p class="text-sm text-slate-300 mt-2">市场将政策调整主要解读为利空但忽略了其强制性地将行业推向更适合AI发挥作用的“半托管+海外仓”模式系统性提升了AI的长期渗透率。</p>
</div>
</div>
</div>
<!-- 未来发展路径 -->
<div class="bento-item glass-card col-span-12 lg:col-span-4">
<h2 class="section-title text-2xl mb-4 text-cyan-300 glow-text">未来发展路径</h2>
<ul class="steps steps-vertical">
<li class="step step-primary">
<span class="text-left"><strong>工具化应用 (当前)</strong><br><small>使用通用AI工具完成单一任务提升“点”上效率。</small></span>
</li>
<li class="step step-primary">
<span class="text-left"><strong>流程化集成 (1-2年内)</strong><br><small>AI与ERP/CRM等系统深度集成优化“线”上流程。</small></span>
</li>
<li class="step">
<span class="text-left"><strong>智能化决策 (2-3年内)</strong><br><small>AI Agent普及自主完成复杂决策任务。</small></span>
</li>
<li class="step">
<span class="text-left"><strong>全链路重构 (3-5年后)</strong><br><small>AI打通C端到B端实现C2B柔性制造终极改造行业。</small></span>
</li>
</ul>
</div>
<!-- 产业链图谱 -->
<div class="bento-item glass-card col-span-12">
<h2 class="section-title text-2xl mb-6 text-cyan-300 glow-text">产业链图谱</h2>
<div class="flex flex-col md:flex-row items-center justify-between space-y-8 md:space-y-0 md:space-x-4 text-center">
<!-- 上游 -->
<div class="flex flex-col items-center">
<div class="p-4 rounded-xl border-2 border-dashed border-cyan-500 w-64">
<h4 class="font-bold text-cyan-300">上游</h4>
<p class="text-sm">AI技术与营销服务</p>
</div>
<div class="mt-4 space-y-2 text-xs text-slate-400">
<p>AI模型提供商 (微软, 谷歌)</p>
<p>AI营销服务商 (易点天下, 蓝色光标)</p>
</div>
</div>
<div class="text-4xl text-cyan-500 hidden md:block"></div>
<div class="text-4xl text-cyan-500 md:hidden"></div>
<!-- 中游 -->
<div class="flex flex-col items-center">
<div class="p-4 rounded-xl border-2 border-dashed border-cyan-500 w-64">
<h4 class="font-bold text-cyan-300">中游</h4>
<p class="text-sm">电商平台与SaaS工具</p>
</div>
<div class="mt-4 space-y-2 text-xs text-slate-400">
<p>集成AI的电商平台 (亚马逊, TikTok)</p>
<p>AI原生SaaS工具 (焦点科技, 值得买)</p>
</div>
</div>
<div class="text-4xl text-cyan-500 hidden md:block"></div>
<div class="text-4xl text-cyan-500 md:hidden"></div>
<!-- 下游 -->
<div class="flex flex-col items-center">
<div class="p-4 rounded-xl border-2 border-dashed border-cyan-500 w-64">
<h4 class="font-bold text-cyan-300">下游</h4>
<p class="text-sm">跨境电商品牌与卖家</p>
</div>
<div class="mt-4 space-y-2 text-xs text-slate-400">
<p>深度应用AI的卖家 (吉宏股份, 华凯易佰)</p>
<p>合规化运营品牌 (安克创新)</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Supporting Data Section -->
<section id="supporting-data" class="mb-16">
<h2 class="section-title text-3xl mb-8 text-center text-cyan-300 glow-text">多维数据透视</h2>
<div class="space-y-4">
<!-- 新闻数据 -->
<div class="collapse collapse-arrow glass-card">
<input type="checkbox" />
<div class="collapse-title text-xl font-medium section-title">新闻数据精粹</div>
<div class="collapse-content p-4">
<div class="prose max-w-none prose-invert prose-p:my-2">
<h3>AI赋能趋势明确</h3>
<ul>
<li><strong>核心作用:</strong>人工智能正重新构建跨境电商的系统模块,从市场洞察、客服到用户体验,推动中国商品走向世界。</li>
<li><strong>价值创造:</strong>AI正从“降本增效”走向“流程再造”和“全方位赋能”推动行业高质量发展。</li>
</ul>
<h3>AI产品与应用案例</h3>
<ul>
<li><strong>1688“遨虾”</strong>全球首个跨境电商AI智能体预计2025年11月上线。</li>
<li><strong>吉宏股份“ChatGiiKin-6B”</strong>自主研发电商垂类模型,极大提升【选品决策】效率,带动收入回暖。</li>
<li><strong>焦点科技“AI麦可” & “Sourcing AI”</strong>AI Agent在B2B电商领域的深度应用会员数已超11000位渗透率持续提升。</li>
</ul>
<h3>政策与监管动态</h3>
<ul>
<li><strong>美国“小额豁免”政策调整:</strong>白宫拟议规则遏制Shein、Temu等利用政策规避关税。直接导致直邮模式订单量骤降60%-70%,倒逼行业向海外仓模式转型。</li>
<li><strong>中国各级政府支持:</strong>海关总署、商务部及地方政府密集出台支持政策,如取消海外仓备案、推广退货试点、支持智慧物流平台建设,形成强力对冲。</li>
</ul>
</div>
</div>
</div>
<!-- 路演数据 -->
<div class="collapse collapse-arrow glass-card">
<input type="checkbox" />
<div class="collapse-title text-xl font-medium section-title">路演核心洞察</div>
<div class="collapse-content p-4">
<div class="prose max-w-none prose-invert prose-p:my-2">
<h3>AI技术应用深化</h3>
<ul>
<li><strong>全链条赋能:</strong>AI技术已应用于选品、设计、营销全链条核心目标是提升效率、降低库存风险。</li>
<li><strong>预测模型是关键:</strong>专家强调AI预测模型对优化库存的重要性目标误差率降至10%以下,是提升利润的核心。</li>
<li><strong>平台级应用:</strong>亚马逊提供AI工具辅助报关平台算法推荐成为TikTok等内容电商的核心竞争力。</li>
</ul>
<h3>平台竞争与模式演变</h3>
<ul>
<li><strong>新兴平台崛起:</strong>TikTok Shop目标GMV 500亿美元和Temu目标GMV 600亿美元正以全托管/半托管模式冲击亚马逊。</li>
<li><strong>半托管模式成为趋势:</strong>为应对政策风险和提升履约效率Temu等平台大力推动半托管模式这对卖家的海外仓布局和本土化运营能力提出更高要求。</li>
<li><strong>亚马逊的应对:</strong>通过降低佣金、推出低价商店、探索半托管模式等方式,应对低价平台的冲击。</li>
</ul>
<h3>产业链机遇</h3>
<ul>
<li><strong>海外仓需求爆发:</strong>半托管模式兴起推动海外仓需求年增速超60%,利好乐歌股份等物流服务商。</li>
<li><strong>技术服务商价值凸显:</strong>SaaS工具ERP、AI客服、AI选品工具SellerMotor成为卖家的核心竞争力。</li>
</ul>
</div>
</div>
</div>
<!-- 研报数据 -->
<div class="collapse collapse-arrow glass-card" x-data="{ open: false, chartInitialized: false }" @click="if (open && !chartInitialized) { initChart(); chartInitialized = true; }">
<input type="checkbox" x-model="open" />
<div class="collapse-title text-xl font-medium section-title">研报关键发现</div>
<div class="collapse-content p-4">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
<div class="prose max-w-none prose-invert prose-p:my-2">
<h3>AI工具普及率高</h3>
<ul>
<li><strong>使用率:</strong>截至2023年底<strong>72%</strong>的跨境卖家已使用AI工具辅助运营其中独立站卖家使用率高达<strong>85%</strong></li>
<li><strong>效果认可:</strong><strong>71%</strong>的受访卖家认为AI工具的提效作用非常明显。</li>
<li><strong>人才需求:</strong>熟练使用ChatGPT已成为跨境运营岗位的常规任职要求。</li>
</ul>
<h3>核心应用场景</h3>
<ul>
<li><strong>营销内容生成:</strong>最广泛的应用领域,占比高达<strong>44%</strong></li>
<li><strong>Listing优化</strong>阿里国际站通过AI优化的产品海外搜索量提升<strong>37%</strong>。亚马逊也开始用AI自动生成合规商品要点。</li>
<li><strong>客户服务:</strong>TikTok Shop黑五期间AI驱动的在线聊天服务使用量同比增长<strong>31%</strong></li>
</ul>
<h3>平台级AI集成加速</h3>
<ul>
<li><strong>亚马逊:</strong>推出生成式AI功能卖家仅需提供关键词即可创建完整的商品详情。</li>
<li><strong>阿里巴巴国际站:</strong>AI外贸产品推出数月即有<strong>1.2万家</strong>外贸企业订购使用。</li>
<li><strong>TikTok Shop</strong>核心是“全域兴趣电商”,即<strong>AI驱动的个性化推荐算法</strong></li>
</ul>
</div>
<div>
<h3 class="text-lg font-bold text-center text-cyan-300 mb-2">跨境卖家常用AI工具分布</h3>
<div id="aiToolsChart" class="w-full h-80"></div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Stock Data Section -->
<section id="stock-data" class="mb-8">
<h2 class="section-title text-3xl mb-8 text-center text-cyan-300 glow-text">核心标的池</h2>
<!-- 相关概念股 -->
<div class="mb-12 glass-card rounded-3xl p-6">
<h3 class="section-title text-2xl mb-4 text-fuchsia-400 glow-text-alt">相关概念股</h3>
<div class="overflow-x-auto">
<table class="table w-full">
<thead>
<tr>
<th>股票</th>
<th>代码</th>
<th>核心逻辑</th>
<th>其他标签</th>
</tr>
</thead>
<tbody>
<tr>
<td>易点天下</td>
<td><a href="https://valuefrontier.cn/company?scode=301171" target="_blank" class="link link-hover text-cyan-400">301171</a></td>
<td>出海智能营销龙头通过KreadoAI平台和智能系统优化广告服务受益于AI赋能的出海营销需求。</td>
<td><div class="badge badge-accent">AI营销</div></td>
</tr>
<tr>
<td>蓝色光标</td>
<td><a href="https://valuefrontier.cn/company?scode=300058" target="_blank" class="link link-hover text-cyan-400">300058</a></td>
<td>出海营销龙头与微软、谷歌等合作发展营销行业模型构建AI时代营销应用数据底座。</td>
<td><div class="badge badge-accent">AI营销</div></td>
</tr>
<tr>
<td>汇量科技</td>
<td>-</td>
<td>TargetROAS智能出价功能贡献收入持续上涨24H1流水超Mintegral总流水60%,业绩加速向上。</td>
<td><div class="badge badge-accent">AI营销</div></td>
</tr>
<tr>
<td>焦点科技</td>
<td><a href="https://valuefrontier.cn/company?scode=002315" target="_blank" class="link link-hover text-cyan-400">002315</a></td>
<td>发布AIAgent类产品“门道”AI麦可4.0升级将AI技术拓宽至跨境电商全产业链。</td>
<td><div class="badge badge-primary">AI电商</div></td>
</tr>
<tr>
<td>值得买</td>
<td><a href="https://valuefrontier.cn/company?scode=300785" target="_blank" class="link link-hover text-cyan-400">300785</a></td>
<td>“双11”期间AI精选推荐GMV占比78.5%AI购物助手“小值”服务量环比提升40%。</td>
<td><div class="badge badge-primary">AI电商</div></td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- 涨幅异动分析 -->
<div class="glass-card rounded-3xl p-6">
<h3 class="section-title text-2xl mb-4 text-fuchsia-400 glow-text-alt">涨幅异动分析</h3>
<div class="overflow-x-auto">
<table class="table w-full">
<thead>
<tr>
<th>股票</th>
<th>代码</th>
<th>异动日期</th>
<th>涨幅</th>
<th class="w-1/2">核心驱动与解析</th>
</tr>
</thead>
<tbody>
<tr>
<td>吉宏股份</td>
<td><a href="https://valuefrontier.cn/company?scode=002803" target="_blank" class="link link-hover text-cyan-400">002803</a></td>
<td>2025-09-26</td>
<td><span class="text-error font-bold">9.98%</span></td>
<td><strong>核心结论:</strong> 业绩预增(前三季净利+55%-65%)叠加AI提效+跨境旺季流量补贴业绩与题材共振触发涨停。Giikin 3.0系统接入大模型投放ROI环比提升20%以上,形成“逻辑-业绩-股价”闭环验证。</td>
</tr>
<tr>
<td>天下秀</td>
<td><a href="https://valuefrontier.cn/company?scode=600556" target="_blank" class="link link-hover text-cyan-400">600556</a></td>
<td>2025-11-03</td>
<td><span class="text-error font-bold">9.98%</span></td>
<td><strong>核心结论:</strong> “红鼻子”AI营销模型海外授权(5年保底2.7亿美元)+国内首批生成式AI备案+跨境电商AI工具税收政策三箭齐发海外大单兑现AI货币化路径机构抢筹顶一字板。</td>
</tr>
<tr>
<td>星徽股份</td>
<td><a href="https://valuefrontier.cn/company?scode=300464" target="_blank" class="link link-hover text-cyan-400">300464</a></td>
<td>2025-09-30</td>
<td><span class="text-error font-bold">20.00%</span></td>
<td><strong>核心结论:</strong> 重大资产重组复牌+四季度AI耳机/取暖爆款放量双主线共振。TaoTronics全球首发AI同传耳机切中AI终端热点资金抢筹跨境旺季估值切换。</td>
</tr>
<tr>
<td>露笑科技</td>
<td><a href="https://valuefrontier.cn/company?scode=002617" target="_blank" class="link link-hover text-cyan-400">002617</a></td>
<td>2025-09-17</td>
<td><span class="text-error font-bold">9.97%</span></td>
<td><strong>核心结论:</strong> 公告与开普勒机器人及头部跨境电商战略合作力争销售百万台家庭具身AI服务机器人。成为A股稀缺“人形机器人海外渠道”标的属于远期愿景驱动的主题炒作。</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
</main>
</div>
<script>
function initChart() {
var chartDom = document.getElementById('aiToolsChart');
var myChart = echarts.init(chartDom);
var option;
option = {
tooltip: {
trigger: 'item',
formatter: '{b}: {d}%',
backgroundColor: 'rgba(0, 0, 0, 0.7)',
borderColor: '#0ff',
textStyle: {
color: '#fff'
}
},
legend: {
top: '5%',
left: 'center',
textStyle: {
color: '#ccc'
}
},
series: [
{
name: 'AI工具使用分布',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: 'rgba(2,0,16,1)',
borderWidth: 2
},
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: 20,
fontWeight: 'bold',
color: '#fff'
}
},
labelLine: {
show: false
},
data: [
{ value: 55, name: 'OpenAI (ChatGPT)' },
{ value: 13, name: 'Grammarly AI' },
{ value: 7, name: 'Bing AI' },
{ value: 25, name: '其他' }
],
color: ['#00ffff', '#ff00ff', '#f0f', '#8A2BE2', '#4169E1']
}
],
backgroundColor: 'transparent'
};
option && myChart.setOption(option);
window.addEventListener('resize', myChart.resize);
}
</script>
</body>
</html>