---
name: bullet-chart
description: "目标达成子弹图生成器。绘制横向子弹图对比实际达成与序时目标，支持多维度筛选（行业/团队/指标）。当用户要求画子弹图、目标达成图、进度达成可视化时触发。输出自包含HTML。"
version: 1.0.0
---

# 目标达成子弹图

## 概述
生成自包含 HTML 子弹图，用于展示业务指标的实际达成 vs 序时目标 vs 月目标。支持双 Tab 切换：维度视角（选行业×团队看所有指标）和指标视角（选指标看所有团队×行业组合）。

## 视觉规格

### 整体布局
- 每行一个指标/组合，flex 布局：左侧名称(56px) + 中间子弹图(flex:1) + 右侧摘要(150px)
- 行间距：8px padding + 1px #eee 分隔线
- 4 字指标名（如"新签年费"）拆两行每行 2 字；3 字名（"总收入"）和外文名（"CPS"）保持单行

### 子弹条（Track + Fill）
- Track：28px 高，#f0f0f0 背景，6px 圆角，1px #e0e0e0 边框
- Fill：宽度 = actual/monthly × 100%，蓝色系填充（#5b9bd5 ~ #a8ddf2 渐变色阶）
- Fill 内白色居中文字：`达成值 (达成率%)`，12px bold 白色 + text-shadow 确保可读
- 窄条处理：actualPct < 15% 时文字改为深色(#1a1a2e)溢出到条右侧

### 序时目标虚线
- 红色虚线 #e05555，2.5px，从 track 上方延伸到下方（top:2px, height:44px）
- 虚线上方显示序时目标数值（红色 #c0392b，10.5px bold，居中于虚线位置）
- 位置 = (序时目标 / 月目标) × 100%

### Gap 标签
- 位于蓝色条右边缘和序时目标虚线之间，居中
- 正值（达成超序时）：绿色文字 #16a34a + 浅绿背景 rgba(232,245,233,0.9)
- 负值（未达序时）：红色文字 #dc2626 + 浅红背景 rgba(254,226,226,0.9)
- 10.5px bold，3px 圆角，格式：正数前加 `+`，如 `+476` 或 `-179`

### 右侧摘要（3 行）
1. `月目标` + 数值（整数）
2. `累计达成` + 数值（整数）
3. `累计达成率` + badge（达成值/月目标 × 100%，色彩见下）

### 达成率色彩规则
| 条件 | 颜色 | 背景 |
|------|------|------|
| ≥ 阈值高 | #16a34a | #e8f5e9 |
| ≥ 阈值低 | #d97706 | #fef3c7 |
| < 阈值低 | #dc2626 | #fee2e2 |

序时达成率阈值：100%/80%；累计达成率阈值：50%/35%（可按需调整）

## 序时目标计算
```
序时目标 = 月目标 × 已过天数 / 当月总天数
```
所有数值取整（Math.round）。

## 数据结构
```javascript
// 维度视角：key = "行业|团队"，value = [[actual, monthly] × N 个指标]
const RAW = { 'all|all': [[4821,11643], ...], ... };

// 指标视角：每个指标一个数组，包含所有团队×行业组合
const DATA = [ [[actual,monthly], [actual,monthly], ...], ... ];
```

## 边界处理
- monthly ≤ 0 时灰显整行（opacity:0.35），显示"目标为 0"
- actual 为 0 时正常渲染（显示为 0%）

## 筛选器样式
- 自定义 select：13px，6px 圆角，SVG 下拉箭头，focus 时蓝色边框 + shadow
- Tab 切换：14px bold，active 状态底部 2.5px #4A90D9 蓝色指示条

## 参考文件
最终样式参考：`/Users/huangwenwu/Desktop/工作/2026/周报数据AI/子弹图.html`
