1. 基础原理：用 CSS 绘制扇形图的核心思路
本篇文章聚焦于前端开发与数据可视化必备的技能之一，用 CSS 绘制扇形图案的实战方法。通过不依赖 Canvas 或 SVG，我们可以在网页上直观呈现数据比例，提升加载性能与兼容性。扇形图在数据可视化场景中非常常见，而 CSS 的能力正好覆盖了大多数简单到中等复杂度的扇形绘制需求。
核心思想是将数据的比例映射成角度，并利用 conic-gradient 将每个扇区的颜色与角度拼接在一起，从而实现一个完整的扇形圆盘。数据与角度的对应关系决定了图形的准确性与可读性。
1.1 数据映射与角度
在扇形图的实现中，角度单位通常为度，360 度对应整圆，100% 对应整圆的 360 度。把每个数据项的百分比乘以 3.6 就能得到该扇区的角度范围。数据的总和应等于 100，以确保扇区覆盖整圆。
为了便于维护，推荐用 CSS 变量来存放不同扇区的数值与颜色，这样就可以通过简单的变更实现动态更新。变量化的设计提升了可复用性与可维护性。
1.2 基本实现思路
最常见的做法是把扇区颜色和角度通过一个 背景渐变来实现，使用 conic-gradient 为背景层。通过把每个扇区的角度范围设置好，就可以得到一个合格的扇形图。
下面给出一个简易模板，演示如何把数据通过 CSS 变量映射到角度，无需绘制单独的图形元素，直接在圆形容器上渲染。
:root {--a: 40; /* 第一扇区数据占比（%） */--b: 25; /* 第二扇区数据占比（%） */--c: 35; /* 第三扇区数据占比（%） */
}
.pie {width: 260px;height: 260px;border-radius: 50%;background:conic-gradient(#4e79a7 0deg calc(var(--a) * 3.6deg),#f28e2c calc(var(--a) * 3.6deg) calc((var(--a) + var(--b)) * 3.6deg),#e15759 calc((var(--a) + var(--b)) * 3.6deg) 360deg);
}
2. 进阶技巧：实现圆环、阴影与交互
进入进阶阶段，我们不仅要绘制扇形，还要提供圆环效果、视觉层次和交互体验。圆环式扇形图在仪表盘场景中特别常见，可以通过在圆心留出空洞来实现，提升可读性与美观度。
此外，适度的动画和交互可以帮助用户更好地理解数据。渐进渲染与 悬停提示是常见的两种优化手段，能在不牺牲性能的前提下提升体验。
2.1 圆环（donut）效果的实现
要实现圆环，核心思路是在扇形圆盘的中心留下一个空洞。常用做法是在父容器中添加一个伪元素或内部圆形覆盖层来实现。伪元素 ::after 的使用简单高效，且对所有扇区都适用。
通过这样的设计，你可以把数据扇形变成更像仪表盘的圆环，并在中心区域放置文本或图例，提升信息密度与可读性。伪元素覆盖的方式在 CSS 中极具兼容性。
/* donut 通过伪元素实现中心空洞 */
.pie {position: relative;width: 260px; height: 260px; border-radius: 50%;background: conic-gradient(#4e79a7 0deg 146deg, #f28e2c 146deg 254deg, #e15759 254deg 360deg);
}
.pie::after {content: "";position: absolute;width: 52%;height: 52%;background: #fff; /* 与背景色匹配的空洞颜色，确保中间区域透明感 */top: 50%; left: 50%;transform: translate(-50%, -50%);border-radius: 50%;/* 如需圆环边缘更柔和可加入阴影或边框 */
}
2.2 动画与交互
通过为扇形图添加 CSS 过渡或 关键帧动画，可以实现从 0 到目标角度的渐进展开效果。这种渐进式渲染不仅能提升美观度，也能增强对数据变化的感知能力。
配合悬停提示与简要描述，用户在停留时可以看到各扇区的数值或百分比，提升可读性。交互提示是提升可用性的常用手段。
3. 响应式与无障碍：在不同设备上呈现扇形图
在不同设备和屏幕尺寸下保持清晰、平衡的视觉效果，是前端开发的常见挑战。通过 响应式尺寸、变量化设计和媒体查询，我们可以实现自适应大小的扇形图，同时保持数据可读性。
另外，作为数据可视化组件，无障碍设计也不可忽视。为屏幕阅读器提供描述信息、使用对比度友好的颜色方案，以及合适的标签，是实现普适性的重要环节。
3.1 响应式尺寸与可读性
为了在桌面与移动端都能保持良好显示，建议使用 CSS clamp()、百分比单位和视口单位的组合来控制扇形图尺寸。这样在不同分辨率下，扇区比例和圆盘大小都能自动调整。可读性与美观性并重是设计的核心目标。
通过将数据容器设为自适应容器，自适应宽高与圆盘比例保持一致，确保数据的可视化效果在各种设备上都稳定呈现。
3.2 无障碍设计要点
为扇形图提供可访问性支持，需要在 HTML 层面和样式层面共同努力。使用 aria-label、role="img" 等属性来描述数据含义，确保屏幕阅读器能正确传达信息。文本说明与图例的结合，是提升无障碍的有效方式。
另外，确保颜色对比度符合标准，并为各扇区提供清晰的颜色映射说明。明确的数据标签有助于所有用户快速理解数据结构。
3.3 兼容性与降级方案
并非所有浏览器都对 conic-gradient 等新特性有同等支持，因此需要规划降级方案。对于不支持的浏览器，可以提供备用的静态图像或简单的文本描述，确保核心数据仍然可获得。渐进增强思路在此非常重要。
下面给出一个简单的示例，展示如何在支持条件下应用 CSS 变量化与渐进增强，同时保持可访问性。降级方案确保广泛兼容性。
/* 响应式与降级示例 */
:root {--size: min(42vw, 320px);--a: 40; --b: 25; --c: 35;
}
.pie {width: var(--size);height: var(--size);border-radius: 50%;background: conic-gradient(#4e79a7 0deg calc(var(--a) * 3.6deg),#f28e2c calc(var(--a) * 3.6deg) calc((var(--a) + var(--b)) * 3.6deg),#e15759 calc((var(--a) + var(--b)) * 3.6deg) 360deg);
}
@media (max-width: 600px) {:root { --size: 70vw; }
}
