关键信息
- 分类
- 图表与可视化
- 输入类型
- 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分布式追踪示例
使用 Jaeger、OpenTelemetry 和其他现代可观测性工具的综合分布式追踪示例，适用于微服务架构
preferred input family json
ELK Stack 日志分析示例
全面的 ELK Stack（Elasticsearch、Logstash、Kibana）示例，用于分布式系统中的日志聚合、处理和可视化
preferred input family json
AWS EventBridge 示例
AWS EventBridge 示例，包括事件总线、规则、目标、模式注册表、自定义事件和跨账户事件路由，适用于无服务器事件驱动架构
preferred input family json
Grafana 高级应用示例
全面的 Grafana 示例，涵盖高级仪表板设计、告警配置、数据源集成和插件开发
preferred input family json
相关专题
JSON Schema、Mock 数据与 API 夹具生成工具
围绕JSON Schema 生成、Mock 负载构建与 API 夹具准备整理的一组工具。
JSON 交换与格式翻译工具
在一个专题里比较 JSON 与 CSV、YAML、TOML、GraphQL、XML、Markdown、Excel、BSON、EDN 等结构化格式之间的转换工具。
JSON 检查、对比与转换工具
把 JSON 格式化、差异对比、路径检查、Schema 校验、合并、转换和导出工具集中到一个专题中，适合 API 与数据处理流程。
JSON 格式化、对比与规范化工具
在一个专题中比较 JSON 格式化、差异对比、日志审查、配置比较和数据规范化工具，适合需要让 JSON 更易读、更易审查的流程。
常见问题
进度数据支持哪些格式？
支持 JSON 数组（如 [{'label': 'A', 'value': 75}]）、标签:数值对（如 Project A:75）或直接输入数值。
可以自定义圆环的颜色吗？
可以，您可以通过配色方案选择预设风格，或在自定义颜色框中输入逗号分隔的十六进制颜色代码。
圆环的起始角度如何设置？
起始角度以度数为单位，-90 表示顶部，0 表示右侧，90 表示底部，180 表示左侧。
生成的图表支持动画效果吗？
支持，您可以勾选“动画”选项，并自定义动画时长（毫秒），图表在加载时会自动呈现进度增长效果。
如何调整圆环的粗细？
通过“圆环厚度”选项，您可以设置 5 到 50 像素之间的数值来改变圆环的视觉宽度。