DATA VISUALIZATION
仪表盘Gauge
半圆刻度盘 + 一根指向当前值的弧线，像汽车仪表一样报告"状态好不好"。
效果预览
73健康分 · 良好
适合用在哪
健康分、完成度、容量水位、系统状态面板。
容易踩的坑
- 红黄绿分段只靠颜色传达状态，必须同时显示「健康/警告/危险」文字。
- 指针动画每次数据刷新都从 0 重新转起，实时监控面板上看起来像在闪烁。
- 刻度标签挤在弧外侧，小于 160px 宽时文字相互重叠，应减少刻度数量。
设计提示词 · Prompt
仪表盘（Gauge）：SVG 半圆弧——底层浅灰轨道弧（stroke-linecap:round）、上层值弧用 stroke-dasharray 控制比例，末端一个圆点帽。中心大号数值 + 下方小标签。分段色阶：低段红、中段黄、高段绿（或单色渐进），配合"健康/警告/危险"语义。刻度刻在弧外侧，max 值标注在两端。半圆角度固定 180°（或 240° 更像真仪表）。数值动画从 0 转到当前值（dashoffset 过渡 1.2s）。仪表盘表达"离满值还有多远"，占比表达"组成部分"——别用错场景。
Gauge: an SVG semicircular arc — a light gray track arc underneath (stroke-linecap:round), a value arc on top whose proportion is controlled with stroke-dasharray, and a dot cap at the end. A large value in the center + a small label below. Segmented color scale: red for the low segment, yellow for middle, green for high (or a single progressive color), matching "healthy/warning/danger" semantics. Ticks go outside the arc, with the max value labeled at both ends. Fix the semicircle angle at 180° (or 240° to look more like a real gauge). The value animates from 0 to the current value (dashoffset transition 1.2s). A gauge expresses "how far from full", while a share chart expresses "component parts" — don't mix up the use cases.
常见搭配
同一页面里经常和「仪表盘」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-gauge">
<svg viewBox="0 0 130 74" width="130" height="74">
<path d="M12,68 A53,53 0 0,1 118,68" fill="none" stroke="#e9eaef" stroke-width="11" stroke-linecap="round"/>
<path d="M12,68 A53,53 0 0,1 118,68" fill="none" stroke="#10b981" stroke-width="11" stroke-linecap="round" stroke-dasharray="167 167" stroke-dashoffset="45"/>
</svg>
<div class="d-gauge__val">73<small>健康分 · 良好</small></div>
</div>