# KPI 双色同柱对比仪表盘模式

## 设计原则

目标（Target）和达成（Actual）在同一个柱状图上展示，而非分开两根柱子。
灰底 = 目标金额，彩色填充 = 实际达成金额，柱顶标注达成%。

## 年度进度条

```javascript
var barW=Math.min(100,Math.max(2,Math.round(ay/at*100)));
html+='<div style="background:#e8eaed;border-radius:8px;height:24px;overflow:hidden">';
html+='<div style="background:'+color+';width:'+barW+'%;border-radius:8px">'
  +fmtW(ay)+' / '+fmtW(at)+'</div></div>';
```

## 月度目标vs达成同柱

```javascript
months.forEach(function(m,i){
  var a=monthly[m]||0, t=mt.targets[i]||0;
  var tH=Math.max(3,Math.round(t/maxVal*75));  // 目标高度
  var aH=Math.max(2,Math.round(a/maxVal*75));  // 达成高度
  var rate=Math.round(Math.min(100,t>0?a/t*100:0));
  
  html+='<div style="flex:1;text-align:center">';
  html+='<div style="font-size:9px">'+rate+'%</div>';  // 达成率标注
  html+='<div style="height:'+tH+'px;background:#e8eaed;position:relative">';  // 灰底=目标
  html+='<div style="background:'+color+';height:'+aH+'px;position:absolute;bottom:0"></div>';  // 彩色=实际
  html+='</div>';
  html+='</div>';
});
```

## 达成率颜色阈值

| 达成率 | 颜色 | 含义 |
|:--:|------|------|
| ≥80% | `var(--ok)` 绿 | 达标 |
| ≥50% | `var(--pri)` 蓝 | 正常 |
| ≥30% | `var(--warn)` 橙 | 关注 |
| <30% | `var(--bad)` 红 | 预警 |

## KPI数据确认优先级

用户确认 > 官方报告 > JSON聚合。年度目标（6950万/2650万/1350万/1300万）以用户原话为准，直接硬编码。

## 数据来源标注原则

- ERP导出 → 标注"ERP"
- MCP获取 → 标注"MCP"
- 不得混用或美化数据来源
- 用户原话："既然ERP导出数据的统计，你就照实和我反馈"