 模型上线不是终点，数据漂移、促销突袭、供应链扰动都在让预测悄悄变坏。如果准确率只在一周一次的复盘会上出现，等发现时损失已经发生了。

。WMAPE 和 MAPE 口径不同、适用场景不同，前端的职责是让两者实时可得、口径可见、趋势可查、告警可触达。本文将拆解指标公式与陷阱、流式计算实现、趋势可视化、口径切换与分层下钻，以及性能边界。

一、先厘清：WMAPE 与 MAPE 不是一回事 

这是整个模块的地基。两个指标看着只差一个 W，实际含义、行为和对零销量的处理完全不同。

MAPE 是逐点相对误差的平均，WMAPE 是总量误差相对总量

。当某天实际销量为 0 而预测为 5 时，MAPE 该项趋于无穷，整条指标直接失效；WMAPE 的分母是所有实际值之和，天然规避零除。

零销量普遍存在的品类（长尾 SKU）只能用 WMAPE

数据契约建议把两者都下发，并附上口径说明和样本量：

。否则计划员看到 MAPE 0.142 会以为是全量口径，实际它只算了 82 天——两个数字不可比。

 是区间覆盖率，与 WMAPE 并称"准确度的两条腿"：WMAPE 讲中心趋势、coverage 讲不确定性。

 提供趋势数据，驱动下文的折线图。

二、计算实现：增量聚合与流式更新 

一旦要做"任意时间窗下的实时值"，就必须支持增量计算

，否则每拖动一次滑块就全量重算，万级数据直接卡死。

import { sum } from 'd3-array'

// 单次全量计算：适用于首屏与小规模序列
export function computeAccuracy(series) {
  const valid = series.filter(d => d.actual != null)
  const n = valid.length
  if (!n) return { wmape: null, mape: null, mapeValidCount: 0, mapeExcluded: 0 }

  let absErrSum = 0
  let actualSum = 0
  let absRelErrSum = 0
  let mapeValidCount = 0
  let mapeExcluded = 0

  for (const d of valid) {
    const absErr = Math.abs(d.actual - d.yhat)
    absErrSum += absErr
    actualSum += d.actual

    if (d.actual === 0) {
      mapeExcluded += 1          // 零销量不纳入 MAPE，避免除零
    } else {
      absRelErrSum += absErr / Math.abs(d.actual)
      mapeValidCount += 1
    }
  }

  return {
    wmape: actualSum > 0 ? absErrSum / actualSum : null,
    mape: mapeValidCount > 0 ? absRelErrSum / mapeValidCount : null,
    mapeValidCount,
    mapeExcluded,
    sampleDays: n,
  }
}

：一次遍历同时算完两个指标，是 O(n) 的最优写法。

零销量在循环内分支计数而不参与累加

 是真实分母。返回 null 而非 0 很重要——null 表示"无法计算"，0 会被误解为"完美预测"。

// 增量聚合器：时间窗滑动时只更新差值部分
export class AccuracyAggregator {
  constructor(series) {
    this.series = series
    this.prefix = new Map()   // 前缀和，下标 i 处存 [absErrSum, actualSum, relSum, relCount, zeroCount]
    this._buildPrefix()
  }

  _buildPrefix() {
    let a = 0, s = 0, r = 0, rc = 0, z = 0
    this.series.forEach((d, i) => {
      if (d.actual != null) {
        a += Math.abs(d.actual - d.yhat)
        s += d.actual
        if (d.actual === 0) z += 1
        else { r += Math.abs(d.actual - d.yhat) / Math.abs(d.actual); rc += 1 }
      }
      this.prefix.set(i, [a, s, r, rc, z])
    })
  }

  // 区间 [l, r] 的准确率，O(1) 查询
  query(l, r) {
    const at = i => this.prefix.get(i) || [0, 0, 0, 0, 0]
    const [a1, s1, rel1, rc1, z1] = at(r)
    const [a0, s0, rel0, rc0, z0] = l > 0 ? at(l - 1) : [0, 0, 0, 0, 0]
    const absErr = a1 - a0
    const actual = s1 - s0
    const relSum = rel1 - rel0
    const rc = rc1 - rc0
    const zc = z1 - z0

    return {
      wmape: actual > 0 ? absErr / actual : null,
      mape: rc > 0 ? relSum / rc : null,
      mapeValidCount: rc,
      mapeExcluded: zc,
      sampleDays: r - l + 1,
    }
  }
}

：前缀和把区间查询从 O(n) 降到 O(1)，是滑动时间窗能 60fps 响应的关键。

 用区间右端点减左端点前一位置，是前缀和的标准用法。

构建阶段一次 O(n)，之后任意窗都 O(1)

，代价是 O(n) 内存——90 天窗口完全无感，全量历史可改用分段前缀和压缩。

三、趋势可视化：口径切换与基带图 

准确率指标必须配趋势，单点数字没有意义。但切换 WMAPE/MAPE 时，量级和含义都变，视图必须同步重绘而非复用刻度。

：WMAPE 稳定且永不为零，适合用

基带图（带目标区间的水平带状图）

，一眼看出"在不在目标内"；MAPE 波动大、有剔除，适合折线图并配文字说明。

两种口径用两种视觉编码，不能共用一套刻度配置

，否则刻度失真会让趋势被误读。

import { scaleLinear } from 'd3'

const TARGET = { wmape: 0.15, mape: 0.18 }
const WARN   = { wmape: 0.22, mape: 0.28 }

export function AccuracyTrend({ history, metric }) {
  const data = history.map(d => ({ ds: d.ds, v: d[metric] }))
  const last = data[data.length - 1]?.v
  const target = TARGET[metric]
  const warn = WARN[metric]

  return (
    <div className="space-y-2">
      <div className="flex items-baseline gap-3">
        <span className="text-3xl font-semibold tabular-nums">
          {(last * 100).toFixed(1)}%
        </span>
        <span className="text-xs text-gray-500">
          {metric === 'wmape' ? 'WMAPE（加权平均）' : 'MAPE（含零销量剔除）'}
        </span>
      </div>

      <div className="relative h-32 border-l border-b border-gray-300">
        {/* 目标带：绿色安全区 */}
        <Band y0={0} y1={target} color="rgba(16,185,129,0.10)" />
        {/* 告警带：橙色风险区 */}
        <Band y0={target} y1={warn} color="rgba(245,158,11,0.12)" />
        {/* 危险区 */}
        <Band y0={warn} y1={0.4} color="rgba(239,68,68,0.10)" />

        <Line data={data} />
        <Marker value={last} target={target} />
      </div>

      <Legend metric={metric} />
    </div>
  )
}

：三段色带把"好/中/差"直接画进坐标系，

不需要用户读数字就能判断状态

。数字负责精确、色带负责直觉，两者互补。切换 

 从配置表读取，保证口径与阈值同步，不会出现"WMAPE 用 MAPE 阈值"的低级错误。

：图中曲线在 W4 突破目标线，这就是趋势图的核心价值——

单点 18% 看不出问题，连续上升的趋势才是告警信号

。告警应该针对"连续 N 期恶化"而非单点超阈，否则噪声会触发大量误报。

告警是准确率追踪唯一会"打扰人"的环节，规则必须克制且可配置。

：三态状态机比单阈值更可靠。

连续 3 期恶化才进 watching，避免单点抖动触发；突破告警线才真正打扰人

。恢复必须由人或新的达标数据确认，避免"刚好卡回线下"被误判为已修复。

export function evaluateAlert(history, metric, rules) {
  const series = history.map(d => d[metric]).filter(v => v != null)
  const last = series.slice(-rules.window)          // 默认最近 3 期
  const prev = series.slice(-rules.window - 1, -1)

  const worsening = last.length >= 2 &&
    last.every((v, i) => i === 0 || v >= last[i - 1])
  const breached = last[last.length - 1] > rules.threshold

  return {
    level: breached ? 'alert' : worsening ? 'watch' : 'healthy',
    last: last[last.length - 1],
    delta: last[last.length - 1] - prev[prev.length - 1],
    message: breached
      ? `${metric.toUpperCase()} 已突破阈值 ${(rules.threshold * 100).toFixed(0)}%`
      : worsening
      ? `连续 ${last.length} 期恶化，需关注`
      : '指标处于目标带内',
  }
}

只要出现一期回落就不算连续恶化

 给出恶化速度，比绝对值更能说明问题（从 15% 涨到 18% 比从 20% 涨到 21% 严重得多）。三态 

五、分层下钻：问题到底出在哪个层级 

准确率是一个汇总数，但问题永远藏在某一层。没有下钻，指标只是个数字看板。

：下钻是"从指标到动作"的最短路径。

仓库和品类用于定位范围，SKU 排序用于定位个案

——两者互补。下方统一汇入模型组的排查流程，保证告警不会烂在通知里。

export function DrillDownTable({ groups, onSelect }) {
  const rows = groups
    .map(g => ({ ...g, delta: g.wmape - g.baselineWmape }))
    .sort((a, b) => b.delta - a.delta)

  return (
    <table className="w-full text-sm">
      <thead>
        <tr className="text-left text-gray-500 text-xs">
          <th>维度</th><th>样本量</th>
          <th className="text-right">WMAPE</th>
          <th className="text-right">较基线</th>
        </tr>
      </thead>
      <tbody>
        {rows.map(r => (
          <tr key={r.key} className="border-t hover:bg-gray-50 cursor-pointer"
              onClick={() => onSelect(r)}>
            <td>{r.key}</td>
            <td className="text-gray-400">{r.sampleDays} 天</td>
            <td className="text-right tabular-nums">{(r.wmape * 100).toFixed(1)}%</td>
            <td className={`text-right tabular-nums ${r.delta > 0 ? 'text-rose-600' : 'text-emerald-600'}`}>
              {r.delta > 0 ? '+' : ''}{(r.delta * 100).toFixed(1)}pp
            </td>
          </tr>
        ))}
      </tbody>
    </table>
  )
}

 降序保证"最差的最靠前"，这与用户意图一致。

WMAPE 从 12% 到 15% 是涨了 3 个百分点，不是涨了 3%

（实际是涨了 25%）。这一处细节是准确率模块专业度的分水岭。

口径切换看似是下拉框，实际要处理单位、阈值、说明文案三套配置的联动：

export function MetricSwitcher({ metric, onChange, excluded }) {
  return (
    <div className="inline-flex rounded border p-0.5 text-sm">
      {['wmape', 'mape'].map(m => (
        <button key={m}
          onClick={() => onChange(m)}
          className={`px-3 py-1 rounded ${metric === m ? 'bg-indigo-600 text-white' : 'text-gray-600'}`}>
          {m.toUpperCase()}
        </button>
      ))}
      {metric === 'mape' && excluded > 0 && (
        <span className="self-center text-xs text-amber-600 ml-2">
          已剔除 {excluded} 天零销量数据
        </span>
      )}
    </div>
  )
}

 提示只在 MAPE 下显示，且带琥珀色警示——

提示不抢注意力，但存在感足够

。这是"口径可见"原则的具体落地。

：百万点单次全量要 700ms，会卡住主线程。

实时数据流必须走 Worker 做增量更新

，前端只消费聚合结果。日常交互场景下，前缀和方案把区间查询压到常数级，滑动时间窗毫无压力。

准确率追踪不是把 WMAPE 画成一个数字，而是构建一个

算得对、算得快、看得懂、叫得醒

的监控体系。本文给出了一条完整链路：

分清 WMAPE 与 MAPE 的口径差异和零销量处理，是可信度的前提；前缀和把区间查询降到 O(1)，让时间窗滑动实时可得；目标带与告警规则把数字翻译成状态，且只对连续恶化与越界真正打扰人；分层下钻把汇总指标落实到仓库、品类与具体 SKU。

一个日常的问题：准确率今天是多少？ 模型上线不是终点，数据漂移、促销突袭、供应链扰动都在让预测悄悄变坏。如果准确率只在一周一次的复盘会上出现，等发现时损失已经发生了。

AI 预测可视化平台 | 预测准确率追踪：WMAPE/MAPE 实时计算与展示

前端开发

前端

准确率追踪需区分WMAPE与MAPE口径，零销量场景必须用WMAPE，MAPE需显式剔除并披露件数。前缀和实现O(1)区间查询，支持任意时间窗实时计算。趋势图用三段色带直观呈现状态，告警针对连续3期恶化而非单点超阈，避免误报。分层下钻定位问题至仓库、品类与SKU，指标变化报百分点而非百分比，确保口径严谨。

数据流

2026上云采购 | AI焕新·智启新局

oceanus

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

AI 预测可视化平台 | 预测准确率追踪：WMAPE/MAPE 实时计算与展示

AI 预测可视化平台 | 预测准确率追踪：WMAPE/MAPE 实时计算与展示

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐