★ FEATURED ARTICLE 前端UI组件【免费下载链接】rsuite A suite of React components .项目地址https://gitcode.com/gh_mirrors/rs/rsuite点击查看免费下载本文以 rsuite 的ProgressCircle组件为核心围绕sections属性展开讲解如何在一个环形进度条中绘制多段不同颜色的进度弧段。你将掌握sections的写法、百分比累加与上限截断规则、与缺口gapDegree/gapPosition的组合用法并通过阅读源码理解 SVG stroke-dasharray 分段绘制的底层原理从而在仪表盘、资源占用率、配额统计等场景中直接落地使用。什么是 ProgressCircle 的多段进度ProgressCircle是 rsuite 提供的环形进度条组件用于显示操作的环形进度见 英文文档 与 中文文档。普通的ProgressCircle只有一个进度色而sections属性自 6.0.0 版本起引入允许传入一个由{ percent, color }对象组成的数组将整条圆弧切分成多个颜色不同、百分比各异的段。典型场景包括磁盘/内存分区占用可视化不同区域用不同颜色区分任务分配占比统计如四个 25% 等分圆环健康度评分红/橙/蓝/绿多段表示不同等级。基础用法三段不同颜色的进度官方示例 sections.md 展示了最直接的多段用法import { ProgressCircle, HStack } from rsuite; const App () ( HStack spacing{24} ProgressCircle strokeWidth{8} w{100} strokeLinecapsquare sections{[ { percent: 30, color: #f7635c }, { percent: 40, color: #409af5 }, { percent: 20, color: #28a745 } ]} / /HStack ); ReactDOM.render(App /, document.getElementById(root));关键点说明sections数组中的每一项percent表示该段占整圆的百分比color为该段的描边颜色上述示例三个段的百分比之和为30 40 20 90因此整条弧只覆盖圆周的 90%剩余 10% 是背景trailw{100}设置圆的直径SVG 像素strokeWidth{8}设置线条粗细strokeLinecapsquare设置端点形状为方形。各段百分比会依次累加从源码 ProgressCircle.tsx 可以看到组件用useMemo计算总进度const totalPercent useMemo(() { if (!sections) return percent; return Math.min( 100, sections.reduce((acc, section) acc section.percent, 0) ); }, [percent, sections]);也就是说只要传入了sectionspercent属性就会被忽略总进度完全由各段百分比累加得出累加结果上限截断为 100即使各段之和超过 100例如两个 60%总进度也只显示 100%总进度会同步写入aria-valuenow并作为默认中心文字展示如显示 90%。组合缺口带 gapDegree 的多段仪表盘环形进度条常配合缺口使用形成表盘或仪表效果。第二个官方示例把sections与gapDegree、gapPosition组合绘制四个 25% 的等分弧段import { ProgressCircle, HStack } from rsuite; const App () ( HStack spacing{24} ProgressCircle strokeWidth{8} gapDegree{90} gapPositionbottom w{100} sections{[ { percent: 25, color: #f7635c }, { percent: 25, color: #f08800 }, { percent: 25, color: #409af5 }, { percent: 25, color: #28a745 } ]} / /HStack ); ReactDOM.render(App /, document.getElementById(root));这里gapDegree{90}表示留出 90° 的缺口有效绘制范围变为圆周的(360 - 90) / 360 75%gapPositionbottom决定缺口所在方位可选top | right | bottom | left默认top四个 25% 的段会在扣除缺口后的有效弧长上等分因此看起来像四等分的仪表刻度。完整的缺口演示还可见 gap.mdgapDegree取 0、90、180、270 时弧段的剩余长度依次减少gapPosition取 top/right/bottom/left 时缺口分别落在四个方位。多段绘制的底层实现原理1. 圆环路径的生成组件先通过 useProgressCirclePath.ts 生成统一的圆环 SVG path 与描边样式圆环半径radius 50 - strokeWidth / 2以 100×100 的 viewBox 为基准圆环周长len Math.PI * 2 * radius缺口弧长gapLength (gapDegree / 360) * lentrail背景样式strokeDasharray: len - gapLength px / len pxstrokeDashoffset: -gapLength/2 px即缺口对称地留在指定方位单段进度样式strokeDasharray: (totalPercent / 100) * (len - gapLength) px / len px同样以-gapLength/2起步。gapPosition通过切换起止点坐标x1/y1/x2/y2来决定缺口方位最终拼出M 50,50 m ... a ...的弧线路径串。2. 多段弧的分布算法真正负责多段渲染的是 ProgressCircleSections.tsx它遍历sections并计算每一段的样式const sectionLen Math.PI * 2 * (50 - strokeWidth / 2); const gapLength (gapDegree / 360) * sectionLen; const sectionPercent section.percent; const endPercent startPercent sectionPercent; const sectionStyle { stroke: section.color, strokeDasharray: ${(sectionPercent / 100) * (sectionLen - gapLength)}px ${sectionLen}px, strokeDashoffset: -${gapLength / 2 (startPercent / 100) * (sectionLen - gapLength)}px };可以观察到两个核心规则每段长度与它在缺口扣除后的有效弧长成正比第 N 段的 dasharray 长度由sectionPercent / 100乘以(sectionLen - gapLength)得出起点位置由前序段累加决定startPercent从 0 开始每渲染一段就累加该段的百分比因此各段首尾相接、互不重叠当累加总进度为 0 时描边宽度会被置为 0strokeWidth{totalPercent 0 ? 0 : strokeWidth}避免出现整圈残留的视觉问题。3. 渲染分支在 ProgressCircle.tsx 中是否传入sections决定渲染分支传入sections→ 渲染ProgressCircleSections为每个段输出一个独立的path未传入 → 渲染单一进度path样式由strokePathStyle统一给出。两者共用同一条pathString和同一个 viewBox因此多段与单段的圆环大小、缺口逻辑完全一致可以无缝切换。完整 Props 一览多段进度通常与以下属性组合使用来自 英文文档 Props 表属性类型(默认值)说明版本classPrefixstring(progress)组件 CSS 类的前缀gapDegreenumber(0)圆形进度条缺口角度可取值 0 ~ 360gapPositionright | top | bottom | left(top)圆形进度条缺口位置percentnumber(0)进度百分比传入sections时被忽略renderInfo(percent, status?) ReactNode自定义信息内容的渲染函数![][6.0.0]showInfoboolean(true)是否显示中心文字statussuccess | fail | active进度状态改变颜色并追加状态类名sections{ percent: number, color: string }[]多个具有不同颜色的进度段![][6.0.0]strokeColorstring线条颜色仅单段模式生效strokeLinecapround | square | butt(round)开放路径端点形状strokeWidthnumber(6)线条宽度trailColorstring背景轨道颜色trailWidthnumber(6)背景宽度与 sections 强相关的属性细节strokeLinecap决定每段的端点形状。round圆头、square方头、butt平头。多段模式下相邻段之间会因线帽产生视觉上的连接/分隔差异官方示例即采用square让段与段边界更清晰。参考 stroke-linecap.md。renderInfo多段模式下回调收到的percent是累加后的总百分比如 30402090status参数可配合状态切换图标。参考 render-info.md。showInfo设为false可隐藏中心文字仅保留弧段本身。参考 show-info.md。statusactive、success、fail三种状态会通过withPrefix追加rs-progress-circle-active/success/fail类名并触发对应主题色与动画样式。参考 status.md。strokeWidth / trailWidth默认strokeWidth6、trailWidthstrokeWidth粗细变化直接影响弧段的内外径表现。参考 stroke-width.md。测试验证多段行为有据可依仓库测试 ProgressCircleSections.spec.tsx 用 Vitest Testing Library 固化了以下行为可作为你使用时的行为契约渲染段数传入 2 个 section 时容器内出现 2 个.rs-progress-circle-stroke元素总百分比30% 40% 时aria-valuenow为70中心信息文本为70%颜色映射第一个 stroke 的stroke为红色、第二个为蓝色与sections传入顺序一致超 100 截断60% 60% 时总进度被钳制为100中心文本显示100%renderInfo 联动自定义渲染函数收到的是总进度70可输出Total: 70%这类文案缺口组合gapDegree{90}与gapPositionbottom共存时两个段依然正常渲染总进度不受影响。实践建议与注意事项确保percent之和的语义正确多段模式下总进度 各段之和上限 100设计数据时请保证段值之和在 0100 之间否则超出部分被截断、视觉上无法呈现缺口会均摊到各段设置gapDegree后每段可用的有效弧长都会按比例缩减段数越多每段越短注意在小尺寸圆环上的可读性善用w控制尺寸圆环以 100×100 的 viewBox 绘制w仅改变渲染宽度比例保持恒定便于在多尺寸场景下复用同一份数据无障碍属性已内置组件默认携带roleprogressbar、aria-valuemin0、aria-valuemax100与aria-valuenow{totalPercent}多段场景下无需额外补充 ARIA 即可被读屏器正确朗读总进度优先阅读官方演示源码完整的分段、缺口、状态、颜色、粗细、信息展示等示例均可在 docs/pages/components/progress-circle/fragments 目录下按文件查看动手组合这些属性能快速摸清视觉差异。赞分享前端UI组件【免费下载链接】rsuite A suite of React components .项目地址https://gitcode.com/gh_mirrors/rs/rsuite点击查看免费下载相关推荐gogcli gog drive comments 命令详解在终端中管理 Google Drive 文件评论gogcli gog drive comments 命令详解在终端中管理 Google Drive 文件评论 本篇文章聚焦 gogcliGoogle Wor前端UI组件Lenis平滑滚动完整指南3行代码实现60fps丝滑体验Lenis平滑滚动完整指南3行代码实现60fps丝滑体验 Lenis 是一个几 KB 的平滑滚动库让页面滚动不再一格一格地跳而是像丝一样滑过去。它不是前端UI组件ant-design-mobile ProgressCircle 组件完全指南环形进度条的 Props、CSS 变量与 rem 适配陷阱ant design mobile ProgressCircle 组件完全指南环形进度条的 Props、CSS 变量与 rem 适配陷阱 ProgressCiUI组件前端移动开发上一篇UltraData-RL-2609长上下文数据教程长文档多跳问答样本如何支撑128K推理下一篇源师兄活动信息平台是什么一文带你快速看懂科技赛事、文化节庆与行业展会的宝藏聚合地创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
阅读完成 · 觉得有帮助？
