# Layout: `progress_bars` — 进度条/评分页 > 幻灯片尺寸: 13.333 × 7.5 英寸 | 边距: 0.6 英寸 | 内容宽: 12.133 英寸 --- ## 用途 评分展示、指标达标率、能力雷达平铺版、投资组合配置完成度、各资产类别评级。 --- ## ASCII 线框图 ### 变体 A：单列进度条（5-8 行） ``` ┌─────────────────────────────────────────────────────────────┐ │ [标题] y=0.25 │ │ ▬▬ (accent 装饰线) y=0.90 │ │ │ │ 权益资产 ████████████████████░░░░░░░░░░ 80% │ │ [进度条背景(浅色)] │ │ │ │ 固定收益 █████████████░░░░░░░░░░░░░░░░░░ 52% │ │ │ │ 另类资产 ████████░░░░░░░░░░░░░░░░░░░░░░░ 32% │ │ │ │ 海外资产 ████████████████░░░░░░░░░░░░░░░ 64% │ │ │ │ 货币市场 ██████░░░░░░░░░░░░░░░░░░░░░░░░░ 24% │ │ │ └─────────────────────────────────────────────────────────────┘ ``` ### 变体 B：带目标值的进度条（显示目标线） ``` │ 权益资产 ████████████████████░░░░│░░░░░ 80% / 目标 90%│ │ ↑ 目标线（垂直虚线） ``` ### 变体 C：双列进度条（6-10 行，每列3-5行） ``` │ [左列标题] │ [右列标题] │ │ 指标一 ████░░░ 75% │ 指标A ████████░░ 80% │ │ 指标二 ██░░░░ 40% │ 指标B █████████░ 90% │ │ 指标三 ███████░ 70% │ 指标C ████░░░░░ 42% │ ``` --- ## 精确坐标标注 ### 变体 A（单列，5-8 行） **固定元素** | 元素 | x | y | w | h | 字号 | 颜色 | 对齐 | |------|---|---|---|---|------|------|------| | 页面标题 | 0.60 | 0.25 | 12.133 | 0.60 | title_size-2 | text_dark | 左 | | 装饰线 | 0.60 | 0.90 | 2.00 | 0.04 | — | accent | — | **行高计算** ``` list_start_y = 1.20 available_h = 5.80 # 7.5 - 1.20 - 0.50(bottom) row_h = available_h / N N=5: row_h = 1.16" N=6: row_h = 0.97" N=7: row_h = 0.83" N=8: row_h = 0.73"（最密，仍可读） ``` **单行结构（以 row_y 为行顶部）** | 元素 | x | y（相对 row_y） | w | h | 字号 | 颜色 | 对齐 | |------|---|----------------|---|---|------|------|------| | 标签文字 | 0.60 | +0.15 | 2.80 | 0.40 | body_size | text_dark | 左 | | 进度条背景（轨道） | 3.50 | +0.20 | 7.80 | 0.30 | — | secondary | — | | 进度条填充 | 3.50 | +0.20 | 7.80 × (value/max) | 0.30 | — | primary | — | | 数值文字 | 11.45 | +0.15 | 1.28 | 0.40 | body_size | text_dark | 右 | > **进度条圆角**: radius=0.05"（轨道和填充均为圆角矩形） > **填充颜色规则**: > - 默认: `primary` > - value/max >= 0.8（优秀）: `positive`（绿） > - value/max <= 0.3（危险）: `negative`（红） > - 可通过 `item.color` 强制指定颜色变量名 **目标线（变体 B）**: ``` target_x = 3.50 + 7.80 * (target/max) add_rect(slide, target_x-0.01, row_y+0.15, 0.02, 0.40, fill=theme["accent"]) # 目标值文字 add_text(slide, f"目标:{target_fmt}", x=target_x-0.40, y=row_y+0.57, w=0.80, h=0.25, font_size=theme["caption_size"]-1, color=theme["accent"], align="center") ``` **可选副标注**（进度条下方小字）: ``` x=3.50, y=row_y+0.52, w=7.80, h=0.28 font_size=caption_size-1, color=text_muted 示例: "较上季度 +5.2 个百分点" ``` ### 变体 C（双列） ``` col_gap = 0.60 col_w = (12.133 - col_gap) / 2 = 5.767" 左列: x_left = 0.60 右列: x_right = 0.60 + 5.767 + 0.60 = 6.967 每列标签宽: 1.80" 进度条宽: 5.767 - 1.80 - 1.00 = 2.967" 数值宽: 1.00" ``` --- ## 数据接口 ```python data = { "title": str, # 页面标题 "subtitle": str, # 可选，如 "投资组合达标情况（满分100）" "variant": "single" | "target" | "double", # 布局变体，默认 "single" "max_value": float, # 统一最大值（如 100），默认 100 "unit": str, # 可选，数值单位（如 "%", "分"），显示在数值旁 "items": [ { "label": str, # 行标签（10字以内） "value": float, # 当前值 "max_value": float, # 可选，覆盖全局 max_value "target": float, # 可选，目标值（变体 B 专用） "value_fmt": str, # 可选，自定义数值显示文字（如 "80分"） "note": str, # 可选，进度条下方小注 "color": str, # 可选，强制指定填充颜色（主题变量名） }, ... # 最多 8 行（单列）/ 10 行（双列） ], # 双列变体时（variant="double"）： "left_items": [...], # 左列数据 "right_items": [...], # 右列数据 "left_title": str, # 可选，左列分组标题 "right_title": str, # 可选，右列分组标题 } ``` --- ## 实现伪代码 ```python def layout_progress_bars(slide, data, theme): m = theme["margin"] sw, sh = 13.333, 7.5 cw = sw - 2 * m set_slide_bg(slide, theme["bg_light"]) add_text(slide, data["title"], x=m, y=0.25, w=cw, h=0.60, font_size=theme["title_size"]-2, color=theme["text_dark"], bold=True, font_name=theme["header_font"]) add_rect(slide, m, 0.90, 2.0, 0.04, fill=theme["accent"]) items = data["items"] N = len(items) global_max = data.get("max_value", 100) list_y = 1.20 row_h = max(0.73, (sh - list_y - 0.50) / N) bar_x = 3.50 bar_total_w = 7.80 bar_h = 0.30 bar_radius = 0.05 for i, item in enumerate(items): ry = list_y + i * row_h max_v = item.get("max_value", global_max) ratio = min(max(item["value"] / max_v, 0), 1) # 颜色选择 if item.get("color"): fill_color = theme[item["color"]] elif ratio >= 0.8: fill_color = theme["positive"] elif ratio <= 0.3: fill_color = theme["negative"] else: fill_color = theme["primary"] # 标签 add_text(slide, item["label"], x=m, y=ry+0.15, w=2.80, h=0.40, font_size=theme["body_size"], color=theme["text_dark"], font_name=theme["body_font"]) # 轨道背景 add_rounded_rect(slide, bar_x, ry+0.20, bar_total_w, bar_h, fill=theme["secondary"], radius=bar_radius) # 填充（仅当 ratio > 0） if ratio > 0: add_rounded_rect(slide, bar_x, ry+0.20, bar_total_w*ratio, bar_h, fill=fill_color, radius=bar_radius) # 目标线 if item.get("target") and data.get("variant") == "target": t_ratio = min(item["target"] / max_v, 1) t_x = bar_x + bar_total_w * t_ratio add_rect(slide, t_x-0.01, ry+0.12, 0.02, 0.46, fill=theme["accent"]) # 数值 val_text = item.get("value_fmt", f"{item['value']:.0f}{data.get('unit','%')}") add_text(slide, val_text, x=11.45, y=ry+0.15, w=1.28, h=0.40, font_size=theme["body_size"], color=theme["text_dark"], bold=True, align="right", font_name=theme["body_font"]) # 小注 if item.get("note"): add_text(slide, item["note"], x=bar_x, y=ry+0.52, w=bar_total_w, h=0.28, font_size=theme["caption_size"]-1, color=theme["text_muted"], font_name=theme["body_font"]) ``` --- ## 设计要点 1. **进度条高度** 固定 0.30 英寸（够粗，清晰可见），不随行数缩放 2. **标签宽度** 固定 2.80 英寸，给进度条留足 7.80 英寸空间 3. **颜色自动映射**: ≥80% 绿，≤30% 红，中间默认 `primary`，使进度条直观传达状态 4. **圆角** 0.05 英寸，轨道和填充同半径，视觉一致 5. **目标线** 用 `accent` 色细竖线，明显但不抢主体 6. **最多8行**（单列时），超过时用双列变体 --- ## 测试数据示例 ```python data = { "title": "投资组合各类资产配置达标率", "subtitle": "目标配比达成情况（截至2024年12月）", "max_value": 100, "unit": "%", "variant": "target", "items": [ {"label": "国内权益", "value": 82, "target": 85, "note": "较目标低 3 个百分点"}, {"label": "境外权益", "value": 45, "target": 40, "note": "较目标高 5 个百分点，需减仓"}, {"label": "利率债", "value": 78, "target": 75}, {"label": "信用债", "value": 31, "target": 40, "note": "受信用资质收紧影响", "color": "negative"}, {"label": "REITs", "value": 60, "target": 60}, {"label": "海外债券", "value": 25, "target": 30}, ], } ```