跳到主要内容

进度条

进度条组件以条形进度展示一个由接口返回的百分比数值，适合展示完成度、达成率等指标。

概述​

将「进度条」拖入画布后：

  1. 配置卡片标题。
  2. 选择一个「图表数据源」类型的平台接口，接口应返回 0 ~ 100 的百分比数值。
  3. 设置是否显示数值信息。

组件在用户态下按接口返回值绘制进度条，未配置接口或接口无数据时，画布中显示占位提示、用户态显示加载骨架。

配置项​

配置项说明
标题进度卡片标题
数据源接口选择一个「图表数据源」类型的平台接口；必填
是否显示数值开启后在进度条右侧显示百分比数值

使用建议​

  1. 接口返回值应控制在 0 ~ 100 之间；超出范围的数值将按组件的进度条规则处理。
  2. 与 统计计数 搭配，可在看板中同时展示绝对值与完成度。

下一步​

属性明细​

以下内容面向技术实现与 AI 检索。组件的全部 meta 值均以字符串（string）形式存储。该组件的固定 uid 为 0c7f36ea-10b6-4742-adcc-038e75b76fe2，GetSidebarItemMeta() 默认不写入任何 meta（为空对象 {}）。

组件属性（meta）​

属性名类型含义取值/存储值
Titlestring进度卡片标题展示文本
MetaInterfaceIdstring数据源接口 ID，必填「图表数据源」标签接口的 GUID
IconVisiblestring(boolean)是否显示数值true 显示 / false（默认）不显示

组件在渲染时向 POST /api/Biz/{MetaInterfaceId} 发起请求，并携带运行参数 metaPageId（来自 cmpParams）；接口返回值作为进度条的 percent，IconVisible 为 'true' 时显示百分比数值。

存储示例​

下图给出一个完整的 WidgetItem，进度条被放置在「基础容器（Row）→ 布局列（Column）」中：

{
  "id": "9d5e4f60-7b8c-4d9e-8f0a-3b4c5d6e7f80",
  "uid": "5a0f3c1e-9b8d-4f6a-9c2e-7d1b4a8e6f3d",
  "dragType": "Row",
  "originalType": "Row",
  "widgetType": "Row",
  "widgetTypeName": "基础容器",
  "meta": {
    "ColumnSpace": "5"
  },
  "children": [
    {
      "id": "1b6c5d70-2d8e-4a1b-9c4d-5e6f70819203",
      "uid": "7b9a905e-83d4-452b-83c8-694a3e0935e3",
      "dragType": "Column",
      "originalType": "Column",
      "widgetType": "Column",
      "widgetTypeName": "布局列组件",
      "meta": {
        "LayoutType": "vertical",
        "Align": "default",
        "ItemSpace": "5"
      },
      "children": [
        {
          "id": "f5e6f708-0001-4a2b-8c3d-1234567890ab",
          "uid": "0c7f36ea-10b6-4742-adcc-038e75b76fe2",
          "dragType": "Widget",
          "originalType": "Widget",
          "widgetType": "Progress",
          "widgetTypeName": "进度条",
          "meta": {
            "Title": "完成度",
            "MetaInterfaceId": "f6a7b8c9-d0e1-4f2a-3b4c-5d6e7f809102",
            "IconVisible": "true"
          },
          "children": []
        }
      ]
    }
  ]
}