跳到主要内容

进度图

进度图：是一种用于可视化展示任务、项目或流程的进展情况的图表或图形工具；以下是进度图的使用指南

一、 基础进度图​

1、效果展示​

2、添加基础进度图​

3、样式设置​

  • 3.1 通用样式配置：(通用配置)

  • 3.2 进度设置

    • 目标颜色：表示任务未完成时的进度颜色
    • 进度颜色：表示任务完成时的进度颜色
    • 宽度：进度条的宽度
    • 边距：进度条内边距（距边框上下左右的距离）

    • 标题配置：可设置字体颜色、字体大小以及标题的显示位置属性，例如本示例中的“满意度”。

    • 数值配置：可设置字体颜色、字体大小、数值显示位置属性配置，如本示例“50%”

    • 横向偏移：数值距右侧的边距

4、数据格式​

[
  {
    "name": "满意度",
    "value": 50
  }
]

二、水波图​

1、效果展示​

2、添加水波图​

3、样式设置​

  • 3.1 通用样式配置：(通用配置)
  • 3.2 水波图设置
  • 类型：水波图展示的风格，包含圆形、菱形、方形、三角、心形、五星
  • 颜色：水波纹的颜色
  • 个数：水波纹的个数

  • 长度：水波纹的长度

  • 外框配置：支持外框的颜色设置、外框宽度（本示例9）、间距（外框的内边距）、及边框颜色透明度

  • 文本的配置：支持字体颜色和字体大小的配置（如本示例25%）

4、数据格式​

[
  {
    "value": 25
  }
]

三、列表进度图​

1. 行样式​

配置进度条之间的行高度，边距等

2. 进度条配置​

2.1 进度条颜色配置​

配置进度条颜色、高度等

2.2 边框设置​

配置边框是否显示、颜色及大小等

2.3 超出阈值颜色设置​

配置超出阈值的进度条显示样式

3. 数据映射​

配置数据源字段与组件显示字段的映射关系，将数据中的字段映射到对应的显示位置。

  • 进度字段：映射数据源中的进度值字段，对应数据格式中的进度值字段

    • 例如：value
    • 用于显示当前进度值，例如：50、75等
    • 该字段的值将用于计算进度条的显示比例

  • 总数类型：设置总数的来源方式

    • 来自字段：总数来自数据源中的某个字段
      • 选择此选项后，会显示"总数字段"输入框
      • 总数字段：映射数据源中的总数字段，对应数据格式中的总数字段
        • 例如：total
        • 用于显示总数值，例如：100、200等
        • 进度条的比例 = 进度字段值 / 总数字段值
    • 固定值：总数是一个固定的数值
      • 选择此选项后，可设置一个固定的总数值
      • 进度条的比例 = 进度字段值 / 固定总数值

提示：数据映射中的字段名需要与数据格式中返回的字段名保持一致，才能正确显示数据。例如，数据中有 value 字段，则进度字段应设置为 value。

4. 左侧配置​

左侧数据样式设置

5. 中间配置​

中间数据样式设置

6. 右侧配置​

右侧数据样式设置

7. 滚动动画​

进度条滚动样式设置

四、圆形进度图​

1. 文本配置​

2.数据配置​

3.进度条配置​

4.外圆配置​

最外层边框配置

5.内圆配置​

内圆边框配置