计划员每天真正要处理的问题是：

这 240 件的偏差，是从哪一天开始失控的？

 预测曲线和实际曲线并排看，只能看到"差了很多"；把偏差按时间、特征、误差类型逐层拆开，才能定位"是节前效应没学到位，还是促销假设被推翻"。

这就是偏差分解（Bias Decomposition）要解决的问题。它的核心不是画一张好看的瀑布图，而是

把总偏差变成一组可归因、可排序、可下钻的组成部分

。本文将拆解三种偏差视角（时间累积、特征贡献、误差类型），给出 Waterfall 的完整实现、交互联动方案与性能取舍。

一、先统一口径：偏差是什么、单位是什么 

偏差的定义不统一，是预测平台最容易吵起来的地方。建议在团队内锁死两套并行口径：

：同一份偏差数据要服务三种推理。按绝对值排序得到"最需要处理的日期"，这是工单入口；分组聚合得到"哪个维度在系统性偏置"，这是模型改进方向；累积和则直接对应库存——

累积偏差就是库存水位相对计划净漂移了多少

，计划员比任何人都关心这条线。

数据契约建议后端一次算好、前端不再重算：

 是总偏差的符号化表达，正值=整体低估。

 是各因素对总偏差的贡献占比，可正可负，

三个 share 加总为 1 的约束必须校验

，否则前端会画出自相矛盾的图。

 把偏差拆成偏置与方差两部分，这是诊断"模型是不准还是不稳"的依据。

二、视图一：时间累积 Waterfall 

这是主视图。它把每一天的偏差按日期顺序铺开，累计到终点，一眼看出"偏差是慢慢攒出来的，还是某几天集中爆发"。

：框选触发范围筛选、点击某天触发单点归因，是两种不同语义的动作，

。框选用防抖（100ms），点击即时响应。累计净值线叠加在瀑布上是关键设计——它能回答"到第几天为止，库存已经偏了多少"。

export function DeviationWaterfall({ series, selectedRange }) {
  const slice = selectedRange
    ? series.filter(d => d.ds >= selectedRange[0] && d.ds <= selectedRange[1])
    : series

  // 按绝对偏差降序，让最严重的偏差排在前面
  const sorted = [...slice].sort((a, b) => Math.abs(b.deviation) - Math.abs(a.deviation))

  let acc = 0
  const maxAbs = Math.max(...sorted.map(d => Math.abs(d.deviation)))

  return (
    <div className="space-y-2">
      <div className="text-xs text-gray-500 flex justify-between">
        <span>区间累计偏差 {acc} 件</span>
        <span>日均偏差 {(acc / sorted.length).toFixed(1)} 件</span>
      </div>

      <div className="relative h-56 border-l border-b border-gray-300">
        {/* 零轴基准线 */}
        <div className="absolute inset-x-0 top-1/2 border-t border-dashed border-gray-300" />

        {sorted.map(d => {
          const positive = d.deviation >= 0
          const h = (Math.abs(d.deviation) / maxAbs) * 100
          acc += d.deviation
          return (
            <div key={d.ds} className="group flex items-center gap-1 text-[10px]">
              <span className="w-16 text-gray-500">{d.ds}</span>
              <div className="flex-1 relative h-6">
                <div className={`absolute ${positive ? 'bottom-1/2' : 'top-1/2'}
                     ${positive ? 'bg-emerald-400' : 'bg-rose-400'} opacity-80`}
                     style={{ height: `${h / 2}%`, width: '70%' }}>
                </div>
              </div>
              <span className="w-14 text-right tabular-nums">{d.deviation}</span>

              {/* 悬停浮层：关联 SHAP 与误差 */}
              <div className="hidden group-hover:block absolute z-10 left-20
                bg-gray-900 text-white text-xs p-2 rounded shadow-lg">
                <div>实际 {d.actual} / 预测 {d.yhat}</div>
                <div>相对偏差 {(d.relDev * 100).toFixed(1)}%</div>
              </div>
            </div>
          )
        })}
      </div>

      <div className="text-xs">累计净值 <span className={acc > 0 ? 'text-rose-600' : 'text-emerald-600'}>{acc}</span> 件</div>
    </div>
  )
}

：零轴用虚线画在正中，正负偏差分别向上向下延伸，

。柱高按区间内最大绝对偏差做归一，保证最严重的那几天永远是满高，视觉权重正确。悬停浮层把 SHAP 归因和误差口径关联起来，避免用户在两张图之间来回对照。

 累加器在渲染末尾输出累计净值，直接对应库存漂移。

三、视图二：分解条形图（特征贡献 vs 误差类型） 

瀑布讲"什么时候"，分解图讲"为什么"。前者找日期，后者找维度，两者是同一份偏差数据的两个投影。

：两种分解回答不同的问题。特征贡献告诉你"促销强度贡献了 61% 的正偏差"，对应动作是

；误差类型告诉你"方差占 240 件"，对应动作是

不区分这两类，整改方向一定选错。

export function FeatureBiasBreakdown({ byFeature }) {
  const sorted = [...byFeature].sort((a, b) => Math.abs(b.share) - Math.abs(a.share))
  const maxShare = Math.max(...sorted.map(d => Math.abs(d.share)))

  return (
    <ul className="space-y-1.5">
      {sorted.map(d => {
        const positive = d.share >= 0
        return (
          <li key={d.f} className="flex items-center gap-2 group">
            <span className="w-28 text-xs text-right text-gray-600 truncate">{d.f}</span>
            <div className="flex-1 relative h-5 bg-gray-100 rounded">
              <div className={`absolute top-0 bottom-0
                ${positive ? 'right-1/2 bg-rose-400' : 'left-1/2 bg-emerald-400'}`}
                   style={{ width: `${(Math.abs(d.share) / maxShare) * 50}%` }} />
              <span className="absolute inset-0 flex items-center justify-center
                text-[10px] opacity-0 group-hover:opacity-100">
                {d.contribution} 件 / {Math.round(d.share * 100)}%
              </span>
            </div>
          </li>
        )
      })}
    </ul>
  )
}

：正负贡献从中间向两侧延伸，视觉上是"围绕零轴对称展开"的双向条形图。

，因为左右各有半轴，这样最极端的项也不会溢出。悬停显示贡献件数与占比两种口径，件数用于补货判断、占比用于横向对比。

误差类型的堆叠方案则不同，它必须展示"偏置与方差各自多大"：

export function ErrorTypeBreakdown({ byErrorType }) {
  const bias = byErrorType.find(t => t.type === 'bias')?.value ?? 0
  const variance = byErrorType.find(t => t.type === 'variance')?.value ?? 0
  const total = bias + variance || 1

  return (
    <div className="space-y-2">
      <div className="flex h-6 rounded overflow-hidden text-[10px] text-white">
        <div className="bg-rose-500 flex items-center justify-center"
             style={{ width: `${(bias / total) * 100}%` }}>
          {Math.round(bias / total * 100)}% 偏置
        </div>
        <div className="bg-amber-500 flex items-center justify-center"
             style={{ width: `${(variance / total) * 100}%` }}>
          {Math.round(variance / total * 100)}% 方差
        </div>
      </div>
      <div className="text-xs text-gray-500">
        {bias > variance
          ? '偏置主导：模型系统性偏离，优先校正基线或加特征'
          : '方差主导：模型不稳定，优先集成或扩充样本'}
      </div>
    </div>
  )
}

：堆叠条的宽度即占比，文案随主导类型动态切换——

视图必须给出结论，而不是只给数据

。这是偏差分解与单纯图表的本质区别：每张图都要回答"所以呢"。

四、视图三：对比双线 + 区间覆盖 

预测值与实际值并排，看似简单，其实有三个必须处理的细节：

历史与未来要区分线型，区间带是否覆盖实际值要可视化，区间外点位要主动标红。

：柱状代表实际值、折线代表预测值，是双线对比的经典编码。

，是因为实际是"已发生的量"、预测是"估计的量"，两种本体应编码为两种视觉通道。图中 11 月实际远高于预测，就是典型的区间外异常点，前端应自动标红并加入异常清单。

export function ForecastActualChart({ series, onSelect }) {
  const actuals = series.filter(d => d.actual != null)
  const forecasts = series

  return (
    <div className="relative">
      <div className="flex h-64 items-end gap-1">
        {actuals.map(d => {
          const outside = d.actual > d.yhatUpper || d.actual < d.yhatLower
          const h = (d.actual / 2600) * 100
          return (
            <button key={d.ds} onClick={() => onSelect(d)}
              className={`group relative flex-1 ${outside ? 'bg-rose-500' : 'bg-gray-700'}`}
              style={{ height: `${h}%` }}
              title={d.ds}>
              {outside && (
                <span className="absolute -top-4 left-1/2 -translate-x-1/2
                  text-rose-500 text-xs">●</span>
              )}
            </button>
          )
        })}
      </div>

      {/* 预测折线叠加 */}
      <svg className="absolute inset-0 w-full h-full pointer-events-none">
        <polyline
          points={forecasts.map((d, i) => {
            const x = (i / (forecasts.length - 1)) * 100
            const y = 100 - (d.yhat / 2600) * 100
            return `${x},${y}`
          }).join(' ')}
          fill="none" stroke="#6366f1" strokeWidth="2" strokeDasharray="6 3" />
      </svg>
    </div>
  )
}

 判定是异常检测的第一道闸门，直接复用上一章的标注入口。柱顶的红色圆点是"区间外"的强信号，计划员扫一眼就能定位异常日。

SVG 折线用绝对定位叠在柱图上、并设为 

，保证柱子的点击事件不被遮挡。预测期（无实际值）不渲染柱子，自然形成视觉空白，暗示"此处尚未发生"。

五、交互联动：从日期到归因的闭环 

三个视图必须共享同一个筛选状态，才能构成可推理的工作台：

：框选是筛选、点击是查询，两种动作语义不同，绝不能用同一套状态。

（100ms 防抖），否则每帧都重算分箱会拖死主线程；

，不应触发全局重算。最终落到 

 是整张工作台的价值所在：把"发现了什么偏差"翻译成"该做什么动作"。

// 按选定范围聚合偏差分解
export function aggregateByRange(series, range, groupKey) {
  const slice = range
    ? series.filter(d => d.ds >= range[0] && d.ds <= range[1])
    : series

  const groups = new Map()
  slice.forEach(d => {
    const key = groupKey(d)
    if (!groups.has(key)) groups.set(key, { key, sum: 0, count: 0, absSum: 0 })
    const g = groups.get(key)
    g.sum += d.deviation
    g.absSum += Math.abs(d.deviation)
    g.count += 1
  })

  return [...groups.values()]
    .map(g => ({ ...g, avg: g.sum / g.count, share: g.sum / slice.reduce((a, b) => a + b.deviation, 0) }))
    .sort((a, b) => Math.abs(b.sum) - Math.abs(a.sum))
}

 是可注入的分组函数（按周、按月、按品类、按特征），

这让同一套聚合逻辑复用四种维度

，是减少代码重复的关键。分母用 

 实时算总偏差，避免缓存值失效导致 

 失真。返回结果按绝对偏差降序，保证视图始终从最严重处读起。

偏差分解不是给预测加一张图表，而是把"不准"这件事拆成可处理的工单。本文给出了三条互相咬合的推理路径：

时间瀑布图回答偏差是何时累积的，特征贡献图回答它从哪个维度来，误差类型分解则判断该重训还是该降方差。

计划员每天真正要处理的问题是：这 240 件的偏差，是从哪一天开始失控的？ 预测曲线和实际曲线并排看，只能看到"差了很多"；把偏差按时间、特征、误差类型逐层拆开，才能定位"是节前效应没学到位，还是促销假设被推翻"。

AI 预测可视化平台 | 预测 vs 实际对比分析：Waterfall Chart 与偏差分解

前端开发

人工智能

前端

开发工具

偏差分解将总偏差拆解为时间累积、特征贡献与误差类型三个维度，通过瀑布图定位失控起始日，特征图区分促销、价格、节假日贡献，误差图判断偏置主导还是方差主导。三视图联动支持框选筛选与点击归因，20k点位以上需服务端预计算，最终输出可归因、可排序、可下钻的偏差诊断工单。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

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

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

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

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

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

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

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

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

AI 预测可视化平台 | 预测 vs 实际对比分析：Waterfall Chart 与偏差分解

AI 预测可视化平台 | 预测 vs 实际对比分析：Waterfall Chart 与偏差分解

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐