Order Analytics

订单业务分析仪表盘技能

概述

将原始订单数据转化为交互式HTML分析报告，6个Tab完整覆盖趋势→对比→时段→用户→流量→运营方案，支持桌面和手机端。全程使用整月日均口径，不做半月/等长截取对比。

📎 完整案例：references/example-badminton.html — 星辰羽毛球馆，紫色主题，6Tab

---

第一步：确认输入与配置

开始前确认以下信息（已在对话中提供则直接使用）：

1.1 数据文件

• 格式：.xlsx（用 calamine 引擎）/ .csv
• 必须字段：订单日期、订单金额（或实收金额）、用户标识（手机号/用户ID）
• 可选字段：场地/商品/服务类型、时段、订单状态、优惠金额

1.2 配色方案（四选一）

A. 上传Logo图片 → 运行 scripts/extract_colors.py 提取主色
B. 提供HEX色值 → 如 #7B5EA7（主色）+ #5B8DD9（辅色）
C. 提供RGB色值 → 如 rgb(123,94,167)
D. 选择预设主题（见 references/color-themes.md）：
   1. 紫蓝（精品/运动）  2. 橙绿（活力/场馆）
   3. 深蓝（科技/金融）  4. 米棕（优雅/餐饮）  5. 深色（夜间/高端）

1.3 业务场景说明（影响 Tab5 内容）

• 是否已开通大众点评商户通？
  • 已开通 → Tab5 展示点评流量分析（渠道来源、转化漏斗、团购表现、评价口碑）
  • 未开通 → Tab5 展示开通调研分析（新客来源现状、开通收益测算）
• 是否有竞品信息？→ Tab6 运营方案末尾加竞品对比表

---

第二步：数据处理

完整规范见 references/data-processing.md

2.1 读取与字段识别

import pandas as pd
df = pd.read_excel(path, engine='calamine')  # 或 read_csv

FIELD_PATTERNS = {
    'date':    ['预订日期','下单时间','订单日期','日期','date','order_date'],
    'amount':  ['订单最终金额','实收金额','订单金额','金额','amount','price'],
    'user_id': ['手机号','用户ID','会员号','user_id','phone'],
    'item':    ['场地','商品','服务','项目','item','product'],
    'slot':    ['预订时段','时段','slot','time_slot'],
}

2.2 核心计算口径（⚠️ 关键原则）

所有月度对比一律使用整月日均，不得用绝对总场次比较不同天数的月份。

# 整月日均（排除节假日锁场期，如春节）
monthly = df_clean.groupby('month').agg(
    op_days=('date', lambda x: x.dt.date.nunique()),
    total_orders=('amount','count'),
    total_rev=('amount','sum'),
    active_users=('user_id','nunique'),
)
monthly['daily_orders'] = (monthly['total_orders'] / monthly['op_days']).round(1)
monthly['daily_rev']    = (monthly['total_rev']    / monthly['op_days']).round(0)

新老用户判断：

old_pool_months = sorted(df['month'].unique())[:3]  # 前3个月为老用户基准
old_pool = set(df[df['month'].isin(old_pool_months)]['user_id'])

新用户次月留存：

first_order = df.groupby('user_id')['date'].min()
for mo, next_mo in zip(months[:-1], months[1:]):
    new_this = {u for u in set(df[df['month']==mo]['user_id'])
                if u not in old_pool and first_order[u] >= pd.Timestamp(f'{mo}-01')}
    retained  = new_this & set(df[df['month']==next_mo]['user_id'])
    retention = len(retained) / len(new_this)

逐小时日均（整月，带 tooltip index mode）：

for mo in months:
    m = df_clean[df_clean['month']==mo]
    days = m['date'].dt.date.nunique()
    hourly[mo] = {h: round(len(m[m['hour']==h])/days, 2) for h in range(8,22)}

hchg = {h: round((hourly[last_mo][h]-hourly[ref_mo][h]) /
                  max(hourly[ref_mo][h],0.01)*100, 1)
        for h in range(8,22)}

---

第三步：配色主题

完整代码见 references/color-themes.md

3.1 预设主题速查

主题1 — 紫蓝（本技能示例主题）

:root{
  --bg:#F5F3FA; --s1:#FFFFFF; --s2:#EDE8F5; --bd:#D8D0EC;
  --c1:#7B5EA7; --c2:#5B8DD9; --c3:#9B7DC7; --c4:#A390C8;
  --red:#B04848; --t:#1A1525; --mu:#7A6E90; --mu2:#C8C0DC; --tx:#2D2640;
}
/* Hero */ background: linear-gradient(135deg,#5B3A8A,#6B4A9A,#4A3A7A);
/* Tab  */ background: #4A3080; border-bottom: 3px solid #35206A;
/* Chart colors: C1='#7B5EA7', C2='#5B8DD9', RED='#B04848', PUR='#A040A0' */

主题2 — 橙绿

:root{--bg:#F8F6F2;--s1:#FFFFFF;--s2:#F4F1EC;--bd:#E8E3DA;
  --c1:#4A7C59;--c2:#C97040;--c3:#D4884A;--c4:#5A8A6A;
  --red:#B04848;--t:#1A1A1A;--mu:#666666;--mu2:#CCCCCC;--tx:#333333}
/* Hero */ background:linear-gradient(135deg,#B8694A,#985234);
/* Tab  */ background:#4E7A62; border-bottom:3px solid #3A6550;

主题3–5 → 见 references/color-themes.md

---

第四步：HTML报告结构

完整CSS组件库 + JS配置见 references/html-template.md

4.1 六Tab标准结构

4.2 关键组件规范

Tab2 — 5列整月对比卡（用 auto-fit，不用固定4列）：

  <!-- 最早月：基准 -->
  ...
  ...
  ...
  <!-- 最新月：红/绿标注变化 -->

Tab3 — 时段折线 Tooltip（必须 mode:index）：

options: {
  interaction: { mode: 'index', intersect: false },
  plugins: {
    tooltip: {
      mode: 'index', intersect: false,
      callbacks: {
        title: items => `${items[0].label}  日均场次`,
        label: item  => `  ${item.dataset.label}：${item.raw} 场/日`
      }
    }
  }
}

Tab5已开通 — 转化漏斗：

  
    店铺浏览
    
      1,240
    
  
  <!-- width = 当层值 / 最大值 × 100% -->

热力图颜色（适配浅色主题）：

function heatmapColor(v) {
  if (v >= 15)  return 'rgba(60,120,80,.85)';
  if (v >= 0)   return 'rgba(80,140,100,.55)';
  if (v >= -20) return 'rgba(180,150,40,.60)';
  if (v >= -40) return 'rgba(180,80,50,.65)';
  return 'rgba(150,40,120,.75)';  // 重跌用品牌深色
}

所有网格用 auto-fit（手机天然折叠）：

.g2   { grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); }
.sps  { grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); }
/* 5列对比卡 */ grid-template-columns: repeat(auto-fit, minmax(130px,1fr));

@media(max-width:600px) 必须包含：

@media (max-width:600px) {
  .g2,.g3 { grid-template-columns:1fr; }
  .sps    { grid-template-columns:1fr; }
  .strip  { flex-direction:column; }
  .st     { min-width:100%; flex:none; }
  /* 图表高度 ≤ 200px */
}

4.3 表格和热力图必须滚动包裹

<!-- 表格 -->
  <!-- overflow-x:auto -->
  ...


<!-- 热力图 -->
  <!-- overflow-x:auto -->
  ...

---

第五步：运营方案（Tab6）

优先级框架（3+3卡片）

第一行:
  P0 🔥  本周 — 最紧急（通常：流失用户召回 / 时段分流对冲）
  P1 ⚡  2周  — 中优先（通常：新客留存链路 / 特定时段产品）
  P1 ⚡  2周  — 中优先（通常：平台流量优化）

第二行:
  P1b📊  1个月 — 场景专项（如：拼场机制 / 企业团建）
  P2 📈  长效  — 固定档位 / 月卡产品
  P2 📈  差异化 — 教练课 / 独家产品线

每张卡：优先级标签 + 标题（颜色跟随优先级）+ 行动要点（strong高亮数字）+ 标签组

价格三原则

1. 对冲竞品：下午/闲时次卡低于竞品同类 5–10%
2. 保护黄金时段：晚场保持折扣，竞品晚场通常更贵
3. 首单吸引：体验价低于竞品但高于边际成本

---

第六步：输出检查

import re

def verify(html):
    errors = []
    # Canvas vs JS 完整性
    canvas = set(re.findall(r'<canvas id="([^"]+)"', html))
    js_ref = set(re.findall(r"getElementById\('([^']+)'\)", html))
    orphan = js_ref - canvas - {'hm'}
    if orphan: errors.append(f"孤立JS引用: {orphan}")
    # 过时表述
    for bad in ['上半月', '等长15天', '等长时间段', '半月']:
        if bad in html: errors.append(f"过时表述: {bad}")
    # 移动端
    if '@media (max-width' not in html: errors.append("缺移动端@media")
    # 热力图包裹
    if 'id="hm"' in html:
        idx = html.find('id="hm"')
        if 'overflow-x:auto' not in html[max(0,idx-200):idx]:
            errors.append("热力图缺滚动包裹")
    return errors

---

参考文件