DATA VISUALIZATION
环形图Donut Chart
一圈分色的圆环中心放总数，占比关系 + 汇总数字一图两得。
效果预览
52%
自然搜索 52%
社交媒体 26%
直接访问 14%
其他 8%
适合用在哪
流量来源、预算分配、市场份额、仪表盘指标。
容易踩的坑
- conic-gradient 纯 CSS 实现无法单独悬停某一段，交互需求出现时只能整体重写。
- 相邻段只靠色相区分且明度接近，灰度打印或色弱用户完全无法辨认。
- 图例百分比相加因四舍五入不等于 100%，用户会质疑数据准确性。
设计提示词 · Prompt
环形图（Donut Chart）：CSS conic-gradient 一行实现——background:conic-gradient(色A 0 52%, 色B 52% 78%, …)，中心用同底色圆形盖出孔（孔径 55-65%），中心放大号总数或核心百分比。配色 3-5 段、按占比从深到浅同色系排布，最后一段用中性灰。旁边配图例（色块 + 名称 + 百分比）。进阶版每段之间留 2px 白缝（用 conic-gradient 里的白色间隔段）。分段超过 6 个改用横向条形图——圆环塞不下那么多颜色。
Donut Chart: implemented in one line with CSS conic-gradient — background:conic-gradient(colorA 0 52%, colorB 52% 78%, …), with a circle of the same background color covering the center to make the hole (hole diameter 55-65%), and a large total or key percentage in the center. Use 3-5 segments, arranged from dark to light within one color family by share, with the last segment in neutral gray. Add a legend beside it (color swatch + name + percentage). Advanced version: leave a 2px white gap between segments (using white spacer segments inside the conic-gradient). With more than 6 segments, switch to a horizontal bar chart — a ring can't fit that many colors.
常见搭配
同一页面里经常和「环形图」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-donutwrap">
<div class="d-donut"><b>52%</b></div>
<div class="d-donut__legend">
<span><i style="background:#4f46e5"></i>自然搜索 52%</span>
<span><i style="background:#c026d3"></i>社交媒体 26%</span>
<span><i style="background:#f59e0b"></i>直接访问 14%</span>
<span><i style="background:#e9eaef"></i>其他 8%</span>
</div>
</div>