# 进度环图 创建美观的圆形进度指示器，完美显示百分比、完成率和进度指标 > 标准页面: https://elysiatools.com/zh/tools/progress-ring-chart - **分类:** Data Visualization - **关键词:** 进度环, 圆形进度, 百分比, 圆环图, 进度指示器, 完成率, 圆形仪表 ## 概述 进度环图工具是一款高效的数据可视化助手，旨在帮助用户快速创建美观、直观的圆形进度指示器。无论是展示项目完成率、KPI 达成度还是任务进度，该工具都能通过简洁的配置，生成带有动态效果的圆环图表，让数据表达更具吸引力。 ## 输入项 - **进度数据** (textarea): 进度值（0-100）。支持带标签的JSON数组、简单的标签:值对或仅数值 - **图表标题** (text): 显示在图表上方的标题 - **圆环大小** (number): 每个进度环的像素大小 - **圆环厚度** (number): 进度环描边的厚度 - **起始角度** (number): 起始角度（-90=顶部，0=右侧，90=底部，180=左侧） - **配色方案** (select): 选择配色方案 - **自定义颜色** (text): 进度环的自定义颜色（逗号分隔的十六进制颜色） - **动画时长** (number): 进度动画的毫秒时长 - **背景颜色** (color): 图表容器的背景颜色 - **显示百分比** (checkbox): 在每个圆环中心显示百分比值 - **显示标签** (checkbox): 在每个进度环下方显示标签 - **动画** (checkbox): 加载时动画显示进度环 ## 适用场景 - 在演示文稿或报告中需要直观展示项目完成百分比时。 - 在仪表盘页面中需要快速呈现多项任务的进度状态时。 - 需要为网页或文档添加具有视觉吸引力的动态进度指示器时。 ## 工作原理 - 在进度数据区域输入百分比数值，支持 JSON 格式、标签对或纯数字输入。 - 根据需求调整圆环大小、厚度、起始角度及配色方案等外观参数。 - 勾选显示百分比或标签选项，并设置动画时长以增强视觉交互体验。 - 点击生成按钮，即可获取美观的进度环图预览并应用于您的项目中。 ## 使用案例 - 项目管理：实时跟踪多个子任务的完成进度。 - 销售业绩：直观展示销售目标达成百分比。 - 个人目标：记录健身、学习等计划的每日完成情况。 ## 常见问题 ### 进度数据支持哪些格式？ 支持 JSON 数组（如 [{'label': 'A', 'value': 75}]）、标签:数值对（如 Project A:75）或直接输入数值。 ### 可以自定义圆环的颜色吗？ 可以，您可以通过配色方案选择预设风格，或在自定义颜色框中输入逗号分隔的十六进制颜色代码。 ### 圆环的起始角度如何设置？ 起始角度以度数为单位，-90 表示顶部，0 表示右侧，90 表示底部，180 表示左侧。 ### 生成的图表支持动画效果吗？ 支持，您可以勾选“动画”选项，并自定义动画时长（毫秒），图表在加载时会自动呈现进度增长效果。 ### 如何调整圆环的粗细？ 通过“圆环厚度”选项，您可以设置 5 到 50 像素之间的数值来改变圆环的视觉宽度。 ## 相关工具 - [评分星级图](https://elysiatools.com/zh/tools/rating-star-chart): 创建美观的星级评分可视化，用于产品评分、服务评价和用户反馈分析 - [玫瑰图生成器](https://elysiatools.com/zh/tools/rose-chart): 生成美丽的南丁格尔玫瑰图（鸡冠花图）来通过角度和面积可视化数据，非常适合比较分析和历史数据展示 - [主题河流图生成器](https://elysiatools.com/zh/tools/stream-graph-generator): 生成美观的主题河流图，支持时间序列数据、流动动画和基线变化 - [时间轴生成器](https://elysiatools.com/zh/tools/timeline-generator): 从事件数据生成美观且交互式的时间轴，支持多种布局和样式 - [对比条形图生成器](https://elysiatools.com/zh/tools/comparison-bar-chart): 生成背对背条形图，用于正负值对比展示，非常适合数据集对比分析 - [Data URI 生成器](https://elysiatools.com/zh/tools/data-uri-generator): 将文件转换为 Data URI（Base64 或百分号编码），用于直接在 HTML、CSS 或 Markdown 中内联图片、字体等资源 - [环形图生成器](https://elysiatools.com/zh/tools/donut-chart-generator): 从数据生成可自定义的环形图（甜甜圈图），具有中央空间，非常适合显示比例数据 - [漏斗图生成器](https://elysiatools.com/zh/tools/funnel-chart-generator): 从数据生成可自定义的漏斗图，非常适合显示转化率、销售管道和流程 ## 示例 - [Grafana 高级应用示例](https://elysiatools.com/zh/samples/grafana-samples): 全面的 Grafana 示例，涵盖高级仪表板设计、告警配置、数据源集成和插件开发 - [二维码示例](https://elysiatools.com/zh/samples/qrcode-samples): 用于测试二维码读取和生成工具的示例二维码图像 - [D3.js 数据可视化示例](https://elysiatools.com/zh/samples/d3js-data-visualization): 全面的D3.js数据可视化示例，包括图表、地图、动画和交互式可视化 - [Rome JavaScript 工具链示例](https://elysiatools.com/zh/samples/rome): Rome JavaScript 工具链示例，包括配置、代码检查、格式化、打包和项目管理 ## 相关内容 - [图表与图示生成器](https://elysiatools.com/zh/hubs/chart-diagram-generators): 根据数据结构选择图表，清晰表达比较、分布、层级、关系、进度和时间安排。