siluzan-tso-cli 1.1.12 → 1.1.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +33 -29
- package/dist/index.js +2267 -1440
- package/dist/skill/SKILL.md +93 -34
- package/dist/skill/_meta.json +2 -2
- package/dist/skill/assets/campaign-create-template.json +96 -101
- package/dist/skill/references/account-analytics.md +64 -62
- package/dist/skill/references/accounts.md +130 -130
- package/dist/skill/references/clue.md +13 -13
- package/dist/skill/references/finance.md +62 -61
- package/dist/skill/references/forewarning.md +40 -39
- package/dist/skill/references/google-ads-rules/google-ads-account-audit.md +165 -161
- package/dist/skill/references/google-ads-rules/google-ads-audience-strategy.md +94 -85
- package/dist/skill/references/google-ads-rules/google-ads-campaign-optimization.md +97 -85
- package/dist/skill/references/google-ads-rules/google-ads-compliance.md +274 -272
- package/dist/skill/references/google-ads-rules/google-ads-conversion-architecture.md +97 -82
- package/dist/skill/references/google-ads-rules/google-ads-creative-optimization.md +143 -139
- package/dist/skill/references/google-ads-rules/google-ads-keyword-optimization.md +131 -128
- package/dist/skill/references/google-ads-rules/google-ads-keyword-strategy.md +175 -173
- package/dist/skill/references/google-ads-rules/google-ads-launch-plan-template.md +126 -123
- package/dist/skill/references/google-ads-rules/google-ads-pmax-guide.md +86 -73
- package/dist/skill/references/google-ads-rules/sensitive-industries.md +43 -8
- package/dist/skill/references/google-ads.md +201 -196
- package/dist/skill/references/open-account-by-media.md +23 -23
- package/dist/skill/references/open-account-google-ui.md +26 -26
- package/dist/skill/references/optimize.md +8 -8
- package/dist/skill/references/reporting.md +28 -28
- package/dist/skill/references/setup.md +10 -7
- package/dist/skill/references/tso-home.md +11 -11
- package/dist/skill/references/workflows.md +28 -26
- package/dist/skill/report-templates/README.md +22 -21
- package/dist/skill/report-templates/REPORT-WORKFLOW.md +9 -9
- package/dist/skill/report-templates/bing-period-report.md +11 -11
- package/dist/skill/report-templates/google-ads-diagnosis.md +86 -86
- package/dist/skill/report-templates/google-period-report.md +23 -23
- package/dist/skill/report-templates/report-template-academic.html +433 -341
- package/dist/skill/report-templates/report-template-dark.html +440 -257
- package/dist/skill/report-templates/report-template-formal.html +438 -288
- package/dist/skill/report-templates/report-template-mobile.html +456 -241
- package/dist/skill/report-templates/report-template-onepager.html +452 -240
- package/dist/skill/report-templates/report-template-print.html +355 -243
- package/dist/skill/report-templates/report-template.html +485 -392
- package/dist/skill/report-templates/tiktok-period-report.md +10 -10
- package/package.json +13 -13
- package/scripts/postinstall.mjs +3 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<!
|
|
1
|
+
<!doctype html>
|
|
2
2
|
<!--
|
|
3
3
|
siluzan-ads 报告 HTML 样式参考（供 AI / 脚本生成成品 HTML 时对齐版式）
|
|
4
4
|
|
|
@@ -30,419 +30,512 @@
|
|
|
30
30
|
如需离线使用，请将对应资源下载到本地并替换下方 <script>/<link> 的 src/href。
|
|
31
31
|
-->
|
|
32
32
|
<html lang="zh-CN">
|
|
33
|
-
<head>
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
33
|
+
<head>
|
|
34
|
+
<meta charset="UTF-8" />
|
|
35
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
36
|
+
<title>广告数据报告 — 商务风格版式参考</title>
|
|
37
|
+
<!-- Tailwind CSS（Play CDN）：布局与工具类 -->
|
|
38
|
+
<script src="https://cdn.tailwindcss.com"></script>
|
|
39
|
+
<script>
|
|
40
|
+
tailwind.config = {
|
|
41
|
+
theme: {
|
|
42
|
+
extend: {
|
|
43
|
+
colors: {
|
|
44
|
+
brand: {
|
|
45
|
+
50: "#eff6ff",
|
|
46
|
+
100: "#dbeafe",
|
|
47
|
+
500: "#3b82f6",
|
|
48
|
+
600: "#2563eb",
|
|
49
|
+
700: "#1d4ed8",
|
|
50
|
+
},
|
|
51
|
+
accent: { 500: "#f97316", 600: "#ea580c" },
|
|
52
|
+
},
|
|
53
|
+
fontFamily: {
|
|
54
|
+
sans: [
|
|
55
|
+
"ui-sans-serif",
|
|
56
|
+
"system-ui",
|
|
57
|
+
"Segoe UI",
|
|
58
|
+
"PingFang SC",
|
|
59
|
+
"Hiragino Sans GB",
|
|
60
|
+
"Microsoft YaHei",
|
|
61
|
+
"Helvetica Neue",
|
|
62
|
+
"Arial",
|
|
63
|
+
"sans-serif",
|
|
64
|
+
],
|
|
50
65
|
},
|
|
51
|
-
accent: { 500: '#f97316', 600: '#ea580c' },
|
|
52
|
-
},
|
|
53
|
-
fontFamily: {
|
|
54
|
-
sans: [
|
|
55
|
-
'ui-sans-serif', 'system-ui', 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB',
|
|
56
|
-
'Microsoft YaHei', 'Helvetica Neue', 'Arial', 'sans-serif',
|
|
57
|
-
],
|
|
58
66
|
},
|
|
59
67
|
},
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
<div class="flex flex-
|
|
88
|
-
<
|
|
89
|
-
<
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
68
|
+
};
|
|
69
|
+
</script>
|
|
70
|
+
<!-- Font Awesome 6：CDN 图标（solid + regular 常用） -->
|
|
71
|
+
<link
|
|
72
|
+
rel="stylesheet"
|
|
73
|
+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
|
|
74
|
+
crossorigin="anonymous"
|
|
75
|
+
referrerpolicy="no-referrer"
|
|
76
|
+
/>
|
|
77
|
+
<!-- ECharts 5：图表 -->
|
|
78
|
+
<script src="https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js"></script>
|
|
79
|
+
<style>
|
|
80
|
+
/* 打印时尽量白底；与 Tailwind Play CDN 并存 */
|
|
81
|
+
@media print {
|
|
82
|
+
body {
|
|
83
|
+
background: #fff !important;
|
|
84
|
+
}
|
|
85
|
+
.no-print {
|
|
86
|
+
display: none !important;
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
</style>
|
|
90
|
+
</head>
|
|
91
|
+
<body class="min-h-screen bg-slate-50 text-slate-800 antialiased">
|
|
92
|
+
<main class="mx-auto max-w-5xl px-4 py-8 sm:px-6 lg:px-8">
|
|
93
|
+
<!-- ========== 组件：报告页眉（对应 md 顶部「统计区间 / 账户」） ========== -->
|
|
94
|
+
<header class="mb-10 border-b-2 border-brand-600 pb-6">
|
|
95
|
+
<div class="flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between">
|
|
96
|
+
<div>
|
|
97
|
+
<p class="text-xs font-medium uppercase tracking-wider text-slate-500">
|
|
98
|
+
Siluzan · 投放分析
|
|
99
|
+
</p>
|
|
100
|
+
<h1 class="mt-1 text-2xl font-bold tracking-tight text-brand-700 sm:text-3xl">
|
|
101
|
+
<i class="fa-solid fa-chart-line mr-2 text-brand-600" aria-hidden="true"></i>
|
|
102
|
+
数据报告标题
|
|
103
|
+
</h1>
|
|
104
|
+
</div>
|
|
105
|
+
<div class="flex flex-wrap gap-2 text-sm text-slate-600">
|
|
106
|
+
<span
|
|
107
|
+
class="inline-flex items-center rounded-full bg-white px-3 py-1 shadow-sm ring-1 ring-slate-200"
|
|
108
|
+
>
|
|
109
|
+
<i class="fa-regular fa-building mr-2 text-slate-400" aria-hidden="true"></i>
|
|
110
|
+
账户：<strong id="accountName" class="font-semibold text-slate-800">示例账户</strong>
|
|
111
|
+
</span>
|
|
112
|
+
<span
|
|
113
|
+
class="inline-flex items-center rounded-full bg-white px-3 py-1 shadow-sm ring-1 ring-slate-200"
|
|
114
|
+
>
|
|
115
|
+
<i class="fa-regular fa-calendar mr-2 text-slate-400" aria-hidden="true"></i>
|
|
116
|
+
区间：<strong id="reportPeriod" class="font-semibold text-slate-800"
|
|
117
|
+
>2026-03-01 ~ 2026-03-07</strong
|
|
118
|
+
>
|
|
119
|
+
</span>
|
|
120
|
+
</div>
|
|
96
121
|
</div>
|
|
97
|
-
</
|
|
98
|
-
</header>
|
|
122
|
+
</header>
|
|
99
123
|
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
124
|
+
<!-- ========== 组件：规则/风险提示（Bing 日期、数据延迟等 md 中的「必读」） ========== -->
|
|
125
|
+
<aside
|
|
126
|
+
class="no-print mb-8 rounded-lg border-l-4 border-amber-400 bg-amber-50 p-4 text-sm text-amber-950 shadow-sm"
|
|
127
|
+
>
|
|
128
|
+
<p class="flex items-start gap-2 font-semibold">
|
|
129
|
+
<i class="fa-solid fa-triangle-exclamation mt-0.5 text-amber-500" aria-hidden="true"></i>
|
|
130
|
+
数据口径提示（示例）
|
|
131
|
+
</p>
|
|
132
|
+
<p class="mt-2 pl-7 text-amber-900/90">
|
|
133
|
+
若报告涉及 BingV2，统计区间不可包含今天或昨天；具体以接口与 CLI
|
|
134
|
+
说明为准。可将此类说明放在报告前部，避免误读。
|
|
135
|
+
</p>
|
|
136
|
+
</aside>
|
|
110
137
|
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
138
|
+
<!-- ========== 章节：执行摘要 — KPI 卡（周期报告 md §1 核心指标） ========== -->
|
|
139
|
+
<section class="mb-12" data-section-id="section-executive-summary">
|
|
140
|
+
<h2 class="mb-4 flex items-center text-lg font-bold text-brand-700">
|
|
141
|
+
<span
|
|
142
|
+
class="mr-2 flex h-8 w-8 items-center justify-center rounded-lg bg-brand-600 text-sm text-white"
|
|
143
|
+
>1</span
|
|
144
|
+
>
|
|
145
|
+
执行摘要 · 核心指标
|
|
146
|
+
</h2>
|
|
147
|
+
<p class="mb-4 text-sm text-slate-600">
|
|
148
|
+
适用于总览接口：消耗、展示、点击、转化、CTR、CPC、CPA 等；环比用徽章区分涨跌。
|
|
149
|
+
</p>
|
|
118
150
|
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
151
|
+
<div class="grid grid-cols-2 gap-3 lg:grid-cols-4">
|
|
152
|
+
<article class="rounded-xl border border-slate-200 bg-white p-4 shadow-sm">
|
|
153
|
+
<div class="flex items-center justify-between text-slate-500">
|
|
154
|
+
<span class="text-xs font-medium">消耗</span>
|
|
155
|
+
<i class="fa-solid fa-sack-dollar text-brand-500/80" aria-hidden="true"></i>
|
|
156
|
+
</div>
|
|
157
|
+
<p id="spendValue" class="mt-2 text-xl font-bold tabular-nums text-slate-900">
|
|
158
|
+
¥12,580
|
|
159
|
+
</p>
|
|
160
|
+
<p id="spendPct" class="mt-1 text-xs">
|
|
161
|
+
<span
|
|
162
|
+
class="inline-flex items-center rounded-md bg-emerald-50 px-1.5 py-0.5 font-medium text-emerald-700 ring-1 ring-inset ring-emerald-600/20"
|
|
163
|
+
>
|
|
164
|
+
<i class="fa-solid fa-arrow-trend-up mr-1" aria-hidden="true"></i>+8.2%
|
|
165
|
+
</span>
|
|
166
|
+
<span class="text-slate-400">环比</span>
|
|
167
|
+
</p>
|
|
168
|
+
</article>
|
|
169
|
+
<article class="rounded-xl border border-slate-200 bg-white p-4 shadow-sm">
|
|
170
|
+
<div class="flex items-center justify-between text-slate-500">
|
|
171
|
+
<span class="text-xs font-medium">展示</span>
|
|
172
|
+
<i class="fa-regular fa-eye text-slate-400" aria-hidden="true"></i>
|
|
173
|
+
</div>
|
|
174
|
+
<p id="impressionsValue" class="mt-2 text-xl font-bold tabular-nums text-slate-900">
|
|
175
|
+
1.24M
|
|
176
|
+
</p>
|
|
177
|
+
<p id="impressionsPct" class="mt-1 text-xs text-slate-500">
|
|
178
|
+
环比 <span class="font-medium text-rose-600">-2.1%</span>
|
|
179
|
+
</p>
|
|
180
|
+
</article>
|
|
181
|
+
<article class="rounded-xl border border-slate-200 bg-white p-4 shadow-sm">
|
|
182
|
+
<div class="flex items-center justify-between text-slate-500">
|
|
183
|
+
<span class="text-xs font-medium">点击</span>
|
|
184
|
+
<i class="fa-solid fa-computer-mouse text-slate-400" aria-hidden="true"></i>
|
|
185
|
+
</div>
|
|
186
|
+
<p id="clicksValue" class="mt-2 text-xl font-bold tabular-nums text-slate-900">
|
|
187
|
+
18,420
|
|
188
|
+
</p>
|
|
189
|
+
<p id="clicksPct" class="mt-1 text-xs text-slate-500">
|
|
190
|
+
CTR <span class="font-semibold text-slate-700">1.49%</span>
|
|
191
|
+
</p>
|
|
192
|
+
</article>
|
|
193
|
+
<article class="rounded-xl border border-slate-200 bg-white p-4 shadow-sm">
|
|
194
|
+
<div class="flex items-center justify-between text-slate-500">
|
|
195
|
+
<span class="text-xs font-medium">转化</span>
|
|
196
|
+
<i class="fa-solid fa-bullseye text-accent-500" aria-hidden="true"></i>
|
|
197
|
+
</div>
|
|
198
|
+
<p class="mt-2 text-xl font-bold tabular-nums text-slate-900">312</p>
|
|
199
|
+
<p class="mt-1 text-xs text-slate-500">
|
|
200
|
+
CPA <span class="font-semibold text-slate-700">¥40.3</span>
|
|
201
|
+
</p>
|
|
202
|
+
</article>
|
|
203
|
+
</div>
|
|
158
204
|
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
205
|
+
<!-- ECharts：趋势（多序列折线 = 消耗+点击等时序 JSON） -->
|
|
206
|
+
<div class="mt-6 rounded-xl border border-slate-200 bg-white p-4 shadow-sm">
|
|
207
|
+
<h3 class="mb-3 flex items-center text-sm font-semibold text-slate-700">
|
|
208
|
+
<i class="fa-solid fa-chart-area mr-2 text-brand-600" aria-hidden="true"></i>
|
|
209
|
+
关键指标趋势
|
|
210
|
+
</h3>
|
|
211
|
+
<div
|
|
212
|
+
id="trendChart"
|
|
213
|
+
class="h-72 w-full min-h-[240px]"
|
|
214
|
+
role="img"
|
|
215
|
+
aria-label="关键指标趋势图"
|
|
216
|
+
></div>
|
|
217
|
+
</div>
|
|
218
|
+
</section>
|
|
168
219
|
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
<
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
<
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
<
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
220
|
+
<!-- ========== 组件：漏斗/步骤表（诊断报告 md §3.1 数据概览） ========== -->
|
|
221
|
+
<section class="mb-12" data-section-id="section-kpi-funnel">
|
|
222
|
+
<h2 class="mb-4 flex items-center text-lg font-bold text-brand-700">
|
|
223
|
+
<span
|
|
224
|
+
class="mr-2 flex h-8 w-8 items-center justify-center rounded-lg bg-brand-600 text-sm text-white"
|
|
225
|
+
>2</span
|
|
226
|
+
>
|
|
227
|
+
漏斗式概览（表格 + 序号）
|
|
228
|
+
</h2>
|
|
229
|
+
<div class="overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm">
|
|
230
|
+
<table class="min-w-full divide-y divide-slate-200 text-sm">
|
|
231
|
+
<thead class="bg-slate-50">
|
|
232
|
+
<tr>
|
|
233
|
+
<th scope="col" class="px-4 py-3 text-left font-semibold text-slate-700">步骤</th>
|
|
234
|
+
<th scope="col" class="px-4 py-3 text-left font-semibold text-slate-700">指标</th>
|
|
235
|
+
<th scope="col" class="px-4 py-3 text-right font-semibold text-slate-700">数值</th>
|
|
236
|
+
<th scope="col" class="px-4 py-3 text-left font-semibold text-slate-700">附注</th>
|
|
237
|
+
</tr>
|
|
238
|
+
</thead>
|
|
239
|
+
<tbody class="divide-y divide-slate-100">
|
|
240
|
+
<tr class="hover:bg-slate-50/80">
|
|
241
|
+
<td class="px-4 py-3 font-medium text-brand-600">1</td>
|
|
242
|
+
<td class="px-4 py-3">消耗 (Cost)</td>
|
|
243
|
+
<td class="px-4 py-3 text-right tabular-nums font-semibold text-slate-900">
|
|
244
|
+
¥12,580
|
|
245
|
+
</td>
|
|
246
|
+
<td class="px-4 py-3 text-slate-500">—</td>
|
|
247
|
+
</tr>
|
|
248
|
+
<tr class="hover:bg-slate-50/80">
|
|
249
|
+
<td class="px-4 py-3 font-medium text-brand-600">2</td>
|
|
250
|
+
<td class="px-4 py-3">展示次数 (Impressions)</td>
|
|
251
|
+
<td class="px-4 py-3 text-right tabular-nums font-semibold text-slate-900">
|
|
252
|
+
1,240,000
|
|
253
|
+
</td>
|
|
254
|
+
<td class="px-4 py-3 text-slate-500">—</td>
|
|
255
|
+
</tr>
|
|
256
|
+
<tr class="hover:bg-slate-50/80">
|
|
257
|
+
<td class="px-4 py-3 font-medium text-brand-600">3</td>
|
|
258
|
+
<td class="px-4 py-3">点击次数 (Clicks)</td>
|
|
259
|
+
<td class="px-4 py-3 text-right tabular-nums font-semibold text-slate-900">
|
|
260
|
+
18,420
|
|
261
|
+
</td>
|
|
262
|
+
<td class="px-4 py-3 text-slate-500">CTR 1.49%</td>
|
|
263
|
+
</tr>
|
|
264
|
+
<tr class="hover:bg-slate-50/80">
|
|
265
|
+
<td class="px-4 py-3 font-medium text-brand-600">4</td>
|
|
266
|
+
<td class="px-4 py-3">转化次数 (Conversions)</td>
|
|
267
|
+
<td class="px-4 py-3 text-right tabular-nums font-semibold text-slate-900">312</td>
|
|
268
|
+
<td class="px-4 py-3 text-slate-500">CVR —</td>
|
|
269
|
+
</tr>
|
|
270
|
+
</tbody>
|
|
271
|
+
</table>
|
|
272
|
+
</div>
|
|
273
|
+
</section>
|
|
214
274
|
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
275
|
+
<!-- ========== 组件：结构统计宫格（诊断 §3.2） + 构成图（设备/地域占比） ========== -->
|
|
276
|
+
<section class="mb-12" data-section-id="section-structure-breakdown">
|
|
277
|
+
<h2 class="mb-4 flex items-center text-lg font-bold text-brand-700">
|
|
278
|
+
<span
|
|
279
|
+
class="mr-2 flex h-8 w-8 items-center justify-center rounded-lg bg-brand-600 text-sm text-white"
|
|
280
|
+
>3</span
|
|
281
|
+
>
|
|
282
|
+
账户结构 & 分布
|
|
283
|
+
</h2>
|
|
284
|
+
<div class="grid gap-6 lg:grid-cols-2">
|
|
285
|
+
<div class="grid grid-cols-2 gap-2 sm:grid-cols-3">
|
|
286
|
+
<div class="rounded-lg border border-slate-200 bg-white p-3 text-center shadow-sm">
|
|
287
|
+
<p class="text-2xl font-bold text-brand-700">42</p>
|
|
288
|
+
<p class="text-xs text-slate-500">有效系列</p>
|
|
289
|
+
</div>
|
|
290
|
+
<div class="rounded-lg border border-slate-200 bg-white p-3 text-center shadow-sm">
|
|
291
|
+
<p class="text-2xl font-bold text-brand-700">128</p>
|
|
292
|
+
<p class="text-xs text-slate-500">广告组</p>
|
|
293
|
+
</div>
|
|
294
|
+
<div class="rounded-lg border border-slate-200 bg-white p-3 text-center shadow-sm">
|
|
295
|
+
<p class="text-2xl font-bold text-brand-700">3.2k</p>
|
|
296
|
+
<p class="text-xs text-slate-500">关键字</p>
|
|
297
|
+
</div>
|
|
298
|
+
<div class="rounded-lg border border-slate-200 bg-white p-3 text-center shadow-sm">
|
|
299
|
+
<p class="text-2xl font-bold text-brand-700">860</p>
|
|
300
|
+
<p class="text-xs text-slate-500">广告</p>
|
|
301
|
+
</div>
|
|
302
|
+
<div class="rounded-lg border border-slate-200 bg-white p-3 text-center shadow-sm">
|
|
303
|
+
<p class="text-2xl font-bold text-brand-700">12</p>
|
|
304
|
+
<p class="text-xs text-slate-500">投放国家</p>
|
|
305
|
+
</div>
|
|
306
|
+
<div class="rounded-lg border border-slate-200 bg-white p-3 text-center shadow-sm">
|
|
307
|
+
<p class="text-2xl font-bold text-brand-700">24</p>
|
|
308
|
+
<p class="text-xs text-slate-500">附加链接</p>
|
|
309
|
+
</div>
|
|
226
310
|
</div>
|
|
227
|
-
<div class="rounded-
|
|
228
|
-
<
|
|
229
|
-
|
|
311
|
+
<div class="rounded-xl border border-slate-200 bg-white p-4 shadow-sm">
|
|
312
|
+
<h3 class="mb-2 text-sm font-semibold text-slate-700">
|
|
313
|
+
<i class="fa-solid fa-chart-pie mr-2 text-brand-600" aria-hidden="true"></i>
|
|
314
|
+
设备/品类构成（示例）
|
|
315
|
+
</h3>
|
|
316
|
+
<div id="breakdownChart" class="h-64 w-full" role="img" aria-label="构成饼图"></div>
|
|
230
317
|
</div>
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
318
|
+
</div>
|
|
319
|
+
</section>
|
|
320
|
+
|
|
321
|
+
<!-- ========== 组件：诊断 — 优势 / 不足（md §02） ========== -->
|
|
322
|
+
<section class="mb-12" data-section-id="section-diagnosis-pros-cons">
|
|
323
|
+
<h2 class="mb-4 flex items-center text-lg font-bold text-brand-700">
|
|
324
|
+
<span
|
|
325
|
+
class="mr-2 flex h-8 w-8 items-center justify-center rounded-lg bg-brand-600 text-sm text-white"
|
|
326
|
+
>4</span
|
|
327
|
+
>
|
|
328
|
+
诊断概览
|
|
329
|
+
</h2>
|
|
330
|
+
<div class="grid gap-4 md:grid-cols-2">
|
|
331
|
+
<div class="rounded-xl border border-emerald-200 bg-emerald-50/50 p-4">
|
|
332
|
+
<h3 class="mb-3 flex items-center text-sm font-bold text-emerald-800">
|
|
333
|
+
<i class="fa-solid fa-circle-check mr-2" aria-hidden="true"></i>
|
|
334
|
+
优势
|
|
335
|
+
</h3>
|
|
336
|
+
<ul class="space-y-2 text-sm text-emerald-950">
|
|
337
|
+
<li>
|
|
338
|
+
<strong class="font-semibold">消耗效率稳定</strong> — 近 7 日 CPA 低于账户均值。
|
|
339
|
+
</li>
|
|
340
|
+
<li>
|
|
341
|
+
<strong class="font-semibold">高意向词覆盖</strong> — 头部关键词 CVR 提升明显。
|
|
342
|
+
</li>
|
|
343
|
+
</ul>
|
|
242
344
|
</div>
|
|
243
|
-
<div class="rounded-
|
|
244
|
-
<
|
|
245
|
-
|
|
345
|
+
<div class="rounded-xl border border-amber-200 bg-amber-50/50 p-4">
|
|
346
|
+
<h3 class="mb-3 flex items-center text-sm font-bold text-amber-900">
|
|
347
|
+
<i class="fa-solid fa-circle-exclamation mr-2" aria-hidden="true"></i>
|
|
348
|
+
不足
|
|
349
|
+
</h3>
|
|
350
|
+
<ul class="space-y-2 text-sm text-amber-950">
|
|
351
|
+
<li>
|
|
352
|
+
<strong class="font-semibold">展示份额下滑</strong> — 部分系列受预算或出价限制。
|
|
353
|
+
</li>
|
|
354
|
+
<li><strong class="font-semibold">否词待补充</strong> — 搜索词报表存在低效流量。</li>
|
|
355
|
+
</ul>
|
|
246
356
|
</div>
|
|
247
357
|
</div>
|
|
248
|
-
|
|
249
|
-
<h3 class="mb-2 text-sm font-semibold text-slate-700">
|
|
250
|
-
<i class="fa-solid fa-chart-pie mr-2 text-brand-600" aria-hidden="true"></i>
|
|
251
|
-
设备/品类构成（示例）
|
|
252
|
-
</h3>
|
|
253
|
-
<div id="breakdownChart" class="h-64 w-full" role="img" aria-label="构成饼图"></div>
|
|
254
|
-
</div>
|
|
255
|
-
</div>
|
|
256
|
-
</section>
|
|
358
|
+
</section>
|
|
257
359
|
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
360
|
+
<!-- ========== 组件：密集数据表（系列/关键词/搜索词 + 横向滚动 + 粘顶表头） ========== -->
|
|
361
|
+
<section class="mb-12" data-section-id="section-data-table">
|
|
362
|
+
<h2 class="mb-4 flex items-center text-lg font-bold text-brand-700">
|
|
363
|
+
<span
|
|
364
|
+
class="mr-2 flex h-8 w-8 items-center justify-center rounded-lg bg-brand-600 text-sm text-white"
|
|
365
|
+
>5</span
|
|
366
|
+
>
|
|
367
|
+
明细表（广告结构 / 关键词）
|
|
368
|
+
</h2>
|
|
369
|
+
<div class="overflow-x-auto rounded-xl border border-slate-200 bg-white shadow-sm">
|
|
370
|
+
<table class="min-w-[640px] w-full divide-y divide-slate-200 text-left text-sm">
|
|
371
|
+
<thead class="sticky top-0 z-10 bg-slate-100 text-slate-700">
|
|
372
|
+
<tr>
|
|
373
|
+
<th scope="col" class="whitespace-nowrap px-4 py-3 font-semibold">系列</th>
|
|
374
|
+
<th scope="col" class="whitespace-nowrap px-4 py-3 font-semibold">花费</th>
|
|
375
|
+
<th scope="col" class="whitespace-nowrap px-4 py-3 font-semibold">点击</th>
|
|
376
|
+
<th scope="col" class="whitespace-nowrap px-4 py-3 font-semibold">转化</th>
|
|
377
|
+
<th scope="col" class="whitespace-nowrap px-4 py-3 font-semibold">CVR</th>
|
|
378
|
+
<th scope="col" class="whitespace-nowrap px-4 py-3 font-semibold">环比花费</th>
|
|
379
|
+
</tr>
|
|
380
|
+
</thead>
|
|
381
|
+
<tbody class="divide-y divide-slate-100">
|
|
382
|
+
<tr class="bg-white even:bg-slate-50/60">
|
|
383
|
+
<td class="whitespace-nowrap px-4 py-2.5 font-medium text-slate-900">品牌-搜索</td>
|
|
384
|
+
<td class="whitespace-nowrap px-4 py-2.5 tabular-nums">¥4,200</td>
|
|
385
|
+
<td class="whitespace-nowrap px-4 py-2.5 tabular-nums">2,100</td>
|
|
386
|
+
<td class="whitespace-nowrap px-4 py-2.5 tabular-nums">98</td>
|
|
387
|
+
<td class="whitespace-nowrap px-4 py-2.5 tabular-nums">4.7%</td>
|
|
388
|
+
<td class="whitespace-nowrap px-4 py-2.5">
|
|
389
|
+
<span class="text-emerald-600">+5%</span>
|
|
390
|
+
</td>
|
|
391
|
+
</tr>
|
|
392
|
+
<tr class="bg-white even:bg-slate-50/60">
|
|
393
|
+
<td class="whitespace-nowrap px-4 py-2.5 font-medium text-slate-900">通用-搜索</td>
|
|
394
|
+
<td class="whitespace-nowrap px-4 py-2.5 tabular-nums">¥8,380</td>
|
|
395
|
+
<td class="whitespace-nowrap px-4 py-2.5 tabular-nums">16,320</td>
|
|
396
|
+
<td class="whitespace-nowrap px-4 py-2.5 tabular-nums">214</td>
|
|
397
|
+
<td class="whitespace-nowrap px-4 py-2.5 tabular-nums">1.3%</td>
|
|
398
|
+
<td class="whitespace-nowrap px-4 py-2.5">
|
|
399
|
+
<span class="text-rose-600">-3%</span>
|
|
400
|
+
</td>
|
|
401
|
+
</tr>
|
|
402
|
+
</tbody>
|
|
403
|
+
</table>
|
|
274
404
|
</div>
|
|
275
|
-
<
|
|
276
|
-
<
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
</
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
<li><strong class="font-semibold">否词待补充</strong> — 搜索词报表存在低效流量。</li>
|
|
283
|
-
</ul>
|
|
284
|
-
</div>
|
|
285
|
-
</div>
|
|
286
|
-
</section>
|
|
287
|
-
|
|
288
|
-
<!-- ========== 组件：密集数据表（系列/关键词/搜索词 + 横向滚动 + 粘顶表头） ========== -->
|
|
289
|
-
<section class="mb-12" data-section-id="section-data-table">
|
|
290
|
-
<h2 class="mb-4 flex items-center text-lg font-bold text-brand-700">
|
|
291
|
-
<span class="mr-2 flex h-8 w-8 items-center justify-center rounded-lg bg-brand-600 text-sm text-white">5</span>
|
|
292
|
-
明细表（广告结构 / 关键词）
|
|
293
|
-
</h2>
|
|
294
|
-
<div class="overflow-x-auto rounded-xl border border-slate-200 bg-white shadow-sm">
|
|
295
|
-
<table class="min-w-[640px] w-full divide-y divide-slate-200 text-left text-sm">
|
|
296
|
-
<thead class="sticky top-0 z-10 bg-slate-100 text-slate-700">
|
|
297
|
-
<tr>
|
|
298
|
-
<th scope="col" class="whitespace-nowrap px-4 py-3 font-semibold">系列</th>
|
|
299
|
-
<th scope="col" class="whitespace-nowrap px-4 py-3 font-semibold">花费</th>
|
|
300
|
-
<th scope="col" class="whitespace-nowrap px-4 py-3 font-semibold">点击</th>
|
|
301
|
-
<th scope="col" class="whitespace-nowrap px-4 py-3 font-semibold">转化</th>
|
|
302
|
-
<th scope="col" class="whitespace-nowrap px-4 py-3 font-semibold">CVR</th>
|
|
303
|
-
<th scope="col" class="whitespace-nowrap px-4 py-3 font-semibold">环比花费</th>
|
|
304
|
-
</tr>
|
|
305
|
-
</thead>
|
|
306
|
-
<tbody class="divide-y divide-slate-100">
|
|
307
|
-
<tr class="bg-white even:bg-slate-50/60">
|
|
308
|
-
<td class="whitespace-nowrap px-4 py-2.5 font-medium text-slate-900">品牌-搜索</td>
|
|
309
|
-
<td class="whitespace-nowrap px-4 py-2.5 tabular-nums">¥4,200</td>
|
|
310
|
-
<td class="whitespace-nowrap px-4 py-2.5 tabular-nums">2,100</td>
|
|
311
|
-
<td class="whitespace-nowrap px-4 py-2.5 tabular-nums">98</td>
|
|
312
|
-
<td class="whitespace-nowrap px-4 py-2.5 tabular-nums">4.7%</td>
|
|
313
|
-
<td class="whitespace-nowrap px-4 py-2.5"><span class="text-emerald-600">+5%</span></td>
|
|
314
|
-
</tr>
|
|
315
|
-
<tr class="bg-white even:bg-slate-50/60">
|
|
316
|
-
<td class="whitespace-nowrap px-4 py-2.5 font-medium text-slate-900">通用-搜索</td>
|
|
317
|
-
<td class="whitespace-nowrap px-4 py-2.5 tabular-nums">¥8,380</td>
|
|
318
|
-
<td class="whitespace-nowrap px-4 py-2.5 tabular-nums">16,320</td>
|
|
319
|
-
<td class="whitespace-nowrap px-4 py-2.5 tabular-nums">214</td>
|
|
320
|
-
<td class="whitespace-nowrap px-4 py-2.5 tabular-nums">1.3%</td>
|
|
321
|
-
<td class="whitespace-nowrap px-4 py-2.5"><span class="text-rose-600">-3%</span></td>
|
|
322
|
-
</tr>
|
|
323
|
-
</tbody>
|
|
324
|
-
</table>
|
|
325
|
-
</div>
|
|
326
|
-
<p class="mt-2 text-xs text-slate-500">
|
|
327
|
-
<i class="fa-solid fa-table mr-1" aria-hidden="true"></i>
|
|
328
|
-
长表请保留 <code class="rounded bg-slate-200/60 px-1">overflow-x-auto</code>；数值列建议使用 <code class="rounded bg-slate-200/60 px-1">tabular-nums</code> 对齐。
|
|
329
|
-
</p>
|
|
330
|
-
</section>
|
|
405
|
+
<p class="mt-2 text-xs text-slate-500">
|
|
406
|
+
<i class="fa-solid fa-table mr-1" aria-hidden="true"></i>
|
|
407
|
+
长表请保留
|
|
408
|
+
<code class="rounded bg-slate-200/60 px-1">overflow-x-auto</code>；数值列建议使用
|
|
409
|
+
<code class="rounded bg-slate-200/60 px-1">tabular-nums</code> 对齐。
|
|
410
|
+
</p>
|
|
411
|
+
</section>
|
|
331
412
|
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
<
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
<
|
|
353
|
-
|
|
354
|
-
<
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
413
|
+
<!-- ========== 组件：对比基准表（诊断 §3.3） ========== -->
|
|
414
|
+
<section class="mb-12" data-section-id="section-benchmark">
|
|
415
|
+
<h2 class="mb-4 flex items-center text-lg font-bold text-brand-700">
|
|
416
|
+
<span
|
|
417
|
+
class="mr-2 flex h-8 w-8 items-center justify-center rounded-lg bg-brand-600 text-sm text-white"
|
|
418
|
+
>6</span
|
|
419
|
+
>
|
|
420
|
+
指标 vs 行业/健康标准
|
|
421
|
+
</h2>
|
|
422
|
+
<div class="overflow-x-auto rounded-xl border border-slate-200 bg-white shadow-sm">
|
|
423
|
+
<table class="min-w-full divide-y divide-slate-200 text-sm">
|
|
424
|
+
<thead class="bg-slate-50">
|
|
425
|
+
<tr>
|
|
426
|
+
<th class="px-4 py-3 text-left font-semibold text-slate-700">指标</th>
|
|
427
|
+
<th class="px-4 py-3 text-right font-semibold text-slate-700">数据</th>
|
|
428
|
+
<th class="px-4 py-3 text-right font-semibold text-slate-700">基准</th>
|
|
429
|
+
<th class="px-4 py-3 text-left font-semibold text-slate-700">状态</th>
|
|
430
|
+
</tr>
|
|
431
|
+
</thead>
|
|
432
|
+
<tbody class="divide-y divide-slate-100">
|
|
433
|
+
<tr>
|
|
434
|
+
<td class="px-4 py-3">CTR</td>
|
|
435
|
+
<td class="px-4 py-3 text-right tabular-nums font-medium">1.49%</td>
|
|
436
|
+
<td class="px-4 py-3 text-right tabular-nums text-slate-500">1.2%</td>
|
|
437
|
+
<td class="px-4 py-3">
|
|
438
|
+
<span
|
|
439
|
+
class="inline-flex items-center rounded-full bg-emerald-100 px-2 py-0.5 text-xs font-medium text-emerald-800"
|
|
440
|
+
>优于基准</span
|
|
441
|
+
>
|
|
442
|
+
</td>
|
|
443
|
+
</tr>
|
|
444
|
+
<tr>
|
|
445
|
+
<td class="px-4 py-3">CPA</td>
|
|
446
|
+
<td class="px-4 py-3 text-right tabular-nums font-medium">¥40.3</td>
|
|
447
|
+
<td class="px-4 py-3 text-right tabular-nums text-slate-500">¥45.0</td>
|
|
448
|
+
<td class="px-4 py-3">
|
|
449
|
+
<span
|
|
450
|
+
class="inline-flex items-center rounded-full bg-emerald-100 px-2 py-0.5 text-xs font-medium text-emerald-800"
|
|
451
|
+
>优于基准</span
|
|
452
|
+
>
|
|
453
|
+
</td>
|
|
454
|
+
</tr>
|
|
455
|
+
</tbody>
|
|
456
|
+
</table>
|
|
457
|
+
</div>
|
|
458
|
+
</section>
|
|
369
459
|
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
460
|
+
<!-- ========== 页脚说明 ========== -->
|
|
461
|
+
<footer class="border-t border-dashed border-slate-300 pt-6 text-xs text-slate-500">
|
|
462
|
+
<p class="flex items-start gap-2">
|
|
463
|
+
<i class="fa-regular fa-note-sticky mt-0.5" aria-hidden="true"></i>
|
|
464
|
+
<span>
|
|
465
|
+
本文件为<strong>商务风格</strong>版式参考（另见 academic / formal / dark / print /
|
|
466
|
+
onepager / mobile 等
|
|
467
|
+
<code class="rounded bg-slate-200/60 px-1">report-template-*.html</code>）。
|
|
468
|
+
技术栈：Tailwind + Font Awesome + ECharts；生成正式报告时请替换真实数据并与 md
|
|
469
|
+
纲要章节对齐。
|
|
470
|
+
</span>
|
|
471
|
+
</p>
|
|
472
|
+
</footer>
|
|
473
|
+
</main>
|
|
381
474
|
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
475
|
+
<script>
|
|
476
|
+
(function () {
|
|
477
|
+
var trendEl = document.getElementById("trendChart");
|
|
478
|
+
var pieEl = document.getElementById("breakdownChart");
|
|
479
|
+
if (!trendEl || !pieEl || typeof echarts === "undefined") return;
|
|
387
480
|
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
},
|
|
399
|
-
yAxis: { type: 'value', splitLine: { lineStyle: { type: 'dashed', color: '#e2e8f0' } } },
|
|
400
|
-
series: [
|
|
401
|
-
{
|
|
402
|
-
name: '消耗(百元)',
|
|
403
|
-
type: 'line',
|
|
404
|
-
smooth: 0.35,
|
|
405
|
-
areaStyle: { opacity: 0.12 },
|
|
406
|
-
data: [200, 250, 220, 300, 280, 320, 310],
|
|
481
|
+
var trendChart = echarts.init(trendEl, null, { renderer: "canvas" });
|
|
482
|
+
trendChart.setOption({
|
|
483
|
+
color: ["#2563eb", "#ea580c"],
|
|
484
|
+
tooltip: { trigger: "axis" },
|
|
485
|
+
legend: { data: ["消耗(百元)", "点击(百次)"], top: 0 },
|
|
486
|
+
grid: { left: "3%", right: "4%", bottom: "3%", top: 48, containLabel: true },
|
|
487
|
+
xAxis: {
|
|
488
|
+
type: "category",
|
|
489
|
+
boundaryGap: false,
|
|
490
|
+
data: ["1日", "2日", "3日", "4日", "5日", "6日", "7日"],
|
|
407
491
|
},
|
|
408
|
-
{
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
492
|
+
yAxis: { type: "value", splitLine: { lineStyle: { type: "dashed", color: "#e2e8f0" } } },
|
|
493
|
+
series: [
|
|
494
|
+
{
|
|
495
|
+
name: "消耗(百元)",
|
|
496
|
+
type: "line",
|
|
497
|
+
smooth: 0.35,
|
|
498
|
+
areaStyle: { opacity: 0.12 },
|
|
499
|
+
data: [200, 250, 220, 300, 280, 320, 310],
|
|
500
|
+
},
|
|
501
|
+
{
|
|
502
|
+
name: "点击(百次)",
|
|
503
|
+
type: "line",
|
|
504
|
+
smooth: 0.35,
|
|
505
|
+
areaStyle: { opacity: 0.1 },
|
|
506
|
+
data: [33, 48, 45, 60, 52, 68, 61],
|
|
507
|
+
},
|
|
508
|
+
],
|
|
509
|
+
});
|
|
417
510
|
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
511
|
+
var breakdownChart = echarts.init(pieEl, null, { renderer: "canvas" });
|
|
512
|
+
breakdownChart.setOption({
|
|
513
|
+
tooltip: { trigger: "item" },
|
|
514
|
+
legend: { orient: "vertical", left: "left", top: "middle" },
|
|
515
|
+
series: [
|
|
516
|
+
{
|
|
517
|
+
name: "设备",
|
|
518
|
+
type: "pie",
|
|
519
|
+
radius: ["42%", "68%"],
|
|
520
|
+
center: ["58%", "50%"],
|
|
521
|
+
avoidLabelOverlap: true,
|
|
522
|
+
itemStyle: { borderRadius: 4, borderColor: "#fff", borderWidth: 2 },
|
|
523
|
+
label: { formatter: "{b}\n{d}%" },
|
|
524
|
+
data: [
|
|
525
|
+
{ value: 52, name: "移动端" },
|
|
526
|
+
{ value: 35, name: "桌面" },
|
|
527
|
+
{ value: 13, name: "平板" },
|
|
528
|
+
],
|
|
529
|
+
},
|
|
530
|
+
],
|
|
531
|
+
});
|
|
439
532
|
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
</body>
|
|
533
|
+
function resize() {
|
|
534
|
+
trendChart.resize();
|
|
535
|
+
breakdownChart.resize();
|
|
536
|
+
}
|
|
537
|
+
window.addEventListener("resize", resize);
|
|
538
|
+
})();
|
|
539
|
+
</script>
|
|
540
|
+
</body>
|
|
448
541
|
</html>
|