五店月度达成总览
同一把 0-120 万元的尺子上, 五家门店各占一行。区间带边界 60 / 90 对齐, 实测条与目标刻线可直接横向比大小。悬停或用 Tab 聚焦任一行, 会浮现该行达成率, 键盘与鼠标获得同样的信息。
门店月度销售额达成
2026 年 9 月 / 尺度 0-120 万元 / 区间边界 60 与 90单条放大: 子弹图的结构词汇
取第 2 行滨江天街店放大。一条子弹图只有三样东西: 底色区间带定调, 蓝色实测条定量, 黑色刻线定目标。没有任何一项依赖纯色彩传达, 每层都有文字直标。
放大对象: 第 2 行滨江天街店。实测条终点 88.2 与刻线 90 之间只差 1.8 万元, 条未及线, 即未达目标; 但实测条大部分落在达标区底色上, 定性结论是达标区间的后半段。定量看刻线, 定性看区间, 两层互不替代。
实测条: 唯一的定量通道, 从 0 起量, 宽度即数值, 五行并列时靠它比大小。
目标刻线: 黑色 3px 竖线, 两端顶出区间带, 与实测条终点直接对照。
区间带: 差 / 达标 / 优秀三段底色, 先回答落在哪一段, 再谈差多少。
直标与刻度: 名称 / 实测 / 目标全部直标, 刻度尺给换算基准, 色彩只是辅助。
子弹与仪表: 紧凑场景的取舍
同样是五个 KPI, 子弹图五行排完, 仪表却要吃掉约两倍纵向空间, 且原生不带区间带与目标刻线的对照。反过来, 单一 KPI 需要强调主角时, 仪表的表情感无可替代。
子弹图
优势场景同样五个 KPI / 五行排完, 纵向约 140px
- 多 KPI 并排: 一页 3-10 个指标逐行排布, 高度只有仪表阵列的几分之一。
- 三层信息同屏: 实测 / 目标 / 区间同时在场, 扫一眼即可排序与定位。
- 空间紧张: 看板侧栏与移动端也能保住刻度可读性。
仪表
让位场景同样五个 KPI / 纵向约 240px 起, 且区间信息缺失
- 单一 KPI 强调: 主角只有一个时, 半环的表情感比一行条更强。
- 无目标区间: 数据没有明确区间划分时, 仪表去掉区间也不残缺。
- 空间充裕: 高管概览页里, 仪表更适合当视觉锚点。
数据后备: 完整数值与状态摘要
图形之上的所有数值在此留档。屏幕阅读器与打印场景以此表为准, 表格与上方子弹阵列逐行对应。
| 门店 | 实测 (万元) | 目标 (万元) | 达成率 | 所处区间 | 状态 |
|---|---|---|---|---|---|
| 星澜广场店 | 96.4 | 92 | 104.8% | 优秀区 90-120 | 超额完成 |
| 滨江天街店 | 88.2 | 90 | 98.0% | 达标区 60-90 | 未达目标 |
| 云栖小镇店 | 71.5 | 85 | 84.1% | 达标区 60-90 | 未达目标 |
| 银泰城店 | 54.8 | 80 | 68.5% | 差区 0-60 | 未达标 |
| 老城南站店 | 83.9 | 78 | 107.6% | 达标区 60-90 | 超额完成 |
状态摘要: 五家门店合计实测 394.8 万元 / 合计目标 425 万元, 整体达成 92.9%; 其中 2 家超额完成 / 2 家落在达标区但未越过目标刻线 / 1 家落入差区, 达成率中位数 98.0%。注意: 落在达标区不等于未达目标, 老城南站实测 83.9 万元仍处达标区间, 却已越过 78 万元的目标刻线; 区间带负责定性, 目标刻线负责判定。
数据为演示样本; 推荐实现参考 D3.js / Plotly / 手写 SVG, 本页图形全部为手写 SVG 与 CSS, 未引入图表库。