分类

← View All Tools

进度环图

创建美观的圆形进度指示器，完美显示百分比、完成率和进度指标

进度值（0-100）。支持带标签的JSON数组、简单的标签:值对或仅数值

显示在图表上方的标题

每个进度环的像素大小

进度环描边的厚度

起始角度（-90=顶部，0=右侧，90=底部，180=左侧）

进度环的自定义颜色（逗号分隔的十六进制颜色）

进度动画的毫秒时长

图表容器的背景颜色

在每个圆环中心显示百分比值

在每个进度环下方显示标签

加载时动画显示进度环

关键信息

分类
Data Visualization
输入类型
textarea, text, number, select, color, checkbox
输出类型
html
样本覆盖
4
支持 API
Yes

概览

进度环图工具是一款高效的数据可视化助手，旨在帮助用户快速创建美观、直观的圆形进度指示器。无论是展示项目完成率、KPI 达成度还是任务进度，该工具都能通过简洁的配置，生成带有动态效果的圆环图表，让数据表达更具吸引力。

适用场景

  • •在演示文稿或报告中需要直观展示项目完成百分比时。
  • •在仪表盘页面中需要快速呈现多项任务的进度状态时。
  • •需要为网页或文档添加具有视觉吸引力的动态进度指示器时。

工作原理

  • •在进度数据区域输入百分比数值，支持 JSON 格式、标签对或纯数字输入。
  • •根据需求调整圆环大小、厚度、起始角度及配色方案等外观参数。
  • •勾选显示百分比或标签选项，并设置动画时长以增强视觉交互体验。
  • •点击生成按钮，即可获取美观的进度环图预览并应用于您的项目中。

使用场景

项目管理：实时跟踪多个子任务的完成进度。
销售业绩：直观展示销售目标达成百分比。
个人目标：记录健身、学习等计划的每日完成情况。

用户案例

1. 项目进度看板

项目经理
背景原因
需要向团队展示三个核心项目的当前进度，要求界面简洁且具有现代感。
解决问题
传统的表格数据不够直观，难以快速传达项目的完成状态。
如何使用
在进度数据中输入三个项目的名称及百分比，选择“渐变”配色方案，并开启显示百分比和标签功能。
示例配置
[{"label": "UI 设计", "value": 85}, {"label": "后端开发", "value": 60}, {"label": "测试验收", "value": 30}]
效果
生成了三个带有百分比标注的动态圆环，清晰展示了各阶段的进度差异。

2. 年度销售目标达成率

销售主管
背景原因
在季度总结会议上，需要展示不同区域的销售目标达成情况。
解决问题
需要一种能够快速对比不同区域业绩，且能一眼看出是否达标的图表。
如何使用
输入各区域的达成率数据，选择“成功（绿色调）”配色方案，并设置圆环厚度为 20 像素以增强视觉冲击力。
示例配置
华东区:92
华北区:78
华南区:85
效果
三个圆环清晰呈现了各区域的业绩表现，绿色调直观地传达了良好的完成状态。

用 Samples 测试

json
PDF示例
2026-02-01 到 2026-02-10 工具生成的PDF示例
preferred input family json
json
WebRTC 实时通信示例
全面的 WebRTC 示例，用于点对点音视频通信、数据通道、屏幕共享和信令服务器实现
preferred input family json
json
Grafana 高级应用示例
全面的 Grafana 示例，涵盖高级仪表板设计、告警配置、数据源集成和插件开发
preferred input family json
json
ELK Stack 日志分析示例
全面的 ELK Stack（Elasticsearch、Logstash、Kibana）示例，用于分布式系统中的日志聚合、处理和可视化
preferred input family json
json

相关专题

JsonGenerate工具专题
探索 33 个围绕 json 的 generate 工作流工具，快速找到相近能力。
JsonConvert工具专题
探索 100 个围绕 json 的 convert 工作流工具，快速找到相近能力。
Json 工具专题
探索 43 个围绕 json 的 utility 工作流工具，快速找到相近能力。
JsonFormat工具专题
探索 6 个围绕 json 的 format 工作流工具，快速找到相近能力。

常见问题

进度数据支持哪些格式？

支持 JSON 数组（如 [{'label': 'A', 'value': 75}]）、标签:数值对（如 Project A:75）或直接输入数值。

可以自定义圆环的颜色吗？

可以，您可以通过配色方案选择预设风格，或在自定义颜色框中输入逗号分隔的十六进制颜色代码。

圆环的起始角度如何设置？

起始角度以度数为单位，-90 表示顶部，0 表示右侧，90 表示底部，180 表示左侧。

生成的图表支持动画效果吗？

支持，您可以勾选“动画”选项，并自定义动画时长（毫秒），图表在加载时会自动呈现进度增长效果。

如何调整圆环的粗细？

通过“圆环厚度”选项，您可以设置 5 到 50 像素之间的数值来改变圆环的视觉宽度。

API 文档

请求端点

POST /zh/api/tools/progress-ring-chart

请求参数

参数名 类型 必填 描述
progressData textarea 是 进度值（0-100）。支持带标签的JSON数组、简单的标签:值对或仅数值
chartTitle text 否 显示在图表上方的标题
ringSize number 否 每个进度环的像素大小
ringThickness number 否 进度环描边的厚度
startAngle number 否 起始角度（-90=顶部，0=右侧，90=底部，180=左侧）
colorScheme select 否 -
customColors text 否 进度环的自定义颜色（逗号分隔的十六进制颜色）
animationDuration number 否 进度动画的毫秒时长
backgroundColor color 否 图表容器的背景颜色
showPercentage checkbox 否 在每个圆环中心显示百分比值
showLabel checkbox 否 在每个进度环下方显示标签
animated checkbox 否 加载时动画显示进度环

响应格式

{
  "result": "
Processed HTML content
",
  "error": "Error message (optional)",
  "message": "Notification message (optional)",
  "metadata": {
    "key": "value"
  }
}
HTML: HTML

AI MCP 文档

将此工具添加到您的 MCP 服务器配置中： 

{
  "mcpServers": {
    "elysiatools-progress-ring-chart": {
      "name": "progress-ring-chart",
      "description": "创建美观的圆形进度指示器，完美显示百分比、完成率和进度指标",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=progress-ring-chart",
      "command": "",
      "args": [],
      "env": {},
      "isActive": true,
      "type": "sse"
    }
  }
}

你可以串联多个工具，比如：`https://elysiatools.com/mcp/sse?toolId=png-to-webp,jpg-to-webp,gif-to-webp`，最多20个。

如果遇见问题，请联系我们：[email protected]