跳到主要内容

统计计数

统计计数组件以大字号展示一个由接口返回的数值指标，适合仪表盘中的关键指标展示。

概述​

将「统计计数」拖入画布后：

  1. 配置卡片标题。
  2. 选择一个「图表数据源」类型的平台接口，接口应返回一个可直接展示的数值（如计数、合计）。
  3. 设置小数位数与固定高度（可选）。

组件在用户态下会在卡片中央以醒目的大字号渲染接口返回值。未配置接口或接口无数据时，画布中显示占位提示、用户态显示加载骨架。

配置项​

配置项说明
图表标题指标卡片标题
数据源接口选择一个「图表数据源」类型的平台接口；必填
展示小数位数展示数值保留的小数位数，取值 0 ~ 4，默认 2
固定高度卡片内容区高度，取值 100 ~ 1000（px），可选

使用建议​

  1. 使用 数量查询 组件配置接口以返回计数结果最为直接。
  2. 多个统计计数可与 进度条、柱状图 组合成数据看板。

下一步​

属性明细​

以下内容面向技术实现与 AI 检索。组件的全部 meta 值均以字符串（string）形式存储。该组件的固定 uid 为 3fde95bd-7bee-4157-9971-9ab6ee6a6e2f，GetSidebarItemMeta() 默认不写入任何 meta（为空对象 {}）。

组件属性（meta）​

属性名类型含义取值/存储值
Titlestring指标卡片标题展示文本
MetaInterfaceIdstring数据源接口 ID，必填「图表数据源」标签接口的 GUID
DigitLengthstring(number)展示小数位数0 ~ 4，默认 2
FixHeightstring(number)卡片内容区高度（px）100 ~ 1000，未设置时按内容自适应

组件在渲染时向 POST /api/Biz/{MetaInterfaceId} 发起请求，并携带运行参数 metaPageId（来自 cmpParams）；接口返回的数值将直接作为大字号内容展示。

存储示例​

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

{
  "id": "8c4d3e5f-6a7b-4c8d-9e0f-2a3b4c5d6e7f",
  "uid": "5a0f3c1e-9b8d-4f6a-9c2e-7d1b4a8e6f3d",
  "dragType": "Row",
  "originalType": "Row",
  "widgetType": "Row",
  "widgetTypeName": "基础容器",
  "meta": {
    "ColumnSpace": "5"
  },
  "children": [
    {
      "id": "0a5b4c6f-1c7d-4f9a-8b3c-4d5e6f708192",
      "uid": "7b9a905e-83d4-452b-83c8-694a3e0935e3",
      "dragType": "Column",
      "originalType": "Column",
      "widgetType": "Column",
      "widgetTypeName": "布局列组件",
      "meta": {
        "LayoutType": "vertical",
        "Align": "default",
        "ItemSpace": "5"
      },
      "children": [
        {
          "id": "e4d5e6f7-0001-4a2b-8c3d-1234567890ab",
          "uid": "3fde95bd-7bee-4157-9971-9ab6ee6a6e2f",
          "dragType": "Widget",
          "originalType": "Widget",
          "widgetType": "Statistic",
          "widgetTypeName": "统计计数",
          "meta": {
            "Title": "客户总数",
            "MetaInterfaceId": "e5f6a7b8-c9d0-4e1f-2a3b-4c5d6e7f8091",
            "DigitLength": "2",
            "FixHeight": "200"
          },
          "children": []
        }
      ]
    }
  ]
}