---
tagName: ai-portal.stat-with-mini-chart
displayName: WrappedAiPortalStatWithMiniChart
description: 带迷你折线图的统计数据展示构件，在统计数值旁边渲染一个迷你折线图。
category: ""
source: "@next-bricks/ai-portal"
---

# ai-portal.stat-with-mini-chart

> 带迷你折线图的统计数据展示构件，在统计数值旁边渲染一个迷你折线图。

## Props

| 属性      | 类型                       | 必填 | 默认值                 | 说明                                                |
| --------- | -------------------------- | ---- | ---------------------- | --------------------------------------------------- |
| label     | `string`                   | 否   | -                      | 统计指标标签名称                                    |
| value     | `string`                   | 否   | -                      | 统计数值文本                                        |
| size      | `"medium" \| "small"`      | 否   | `"medium"`             | 展示尺寸，medium 时图表高度为 92px，small 时为 55px |
| lineColor | `string`                   | 否   | `"var(--color-brand)"` | 折线颜色                                            |
| showArea  | `boolean`                  | 否   | -                      | 是否在折线下方显示渐变填充区域                      |
| min       | `number`                   | 否   | -                      | 指定 y 轴最小值，未指定时从数据中计算               |
| max       | `number`                   | 否   | -                      | 指定 y 轴最大值，未指定时从数据中计算               |
| xField    | `string`                   | 否   | `"0"`                  | x 轴字段名（数据中时间字段的 key）                  |
| yField    | `string`                   | 否   | `"1"`                  | y 轴字段名（数据中数值字段的 key）                  |
| data      | `Record<string, number>[]` | 否   | -                      | 图表数据源，每项为包含 xField 和 yField 字段的对象  |

## Examples

### 基础使用（medium 尺寸）

展示带标签、数值和迷你折线图的统计卡片，默认 medium 尺寸。

```yaml preview
brick: ai-portal.stat-with-mini-chart
properties:
  label: 请求数
  value: "563.5"
  xField: time
  yField: request_total
  lineColor: "#295DFF"
  data:
    - request_total: 642.2
      time: 1730597995.403
    - request_total: 621.3
      time: 1730599200
    - request_total: 600.2
      time: 1730601000
    - request_total: 601.9666666666667
      time: 1730602800
    - request_total: 592.4
      time: 1730604600
    - request_total: 567.8666666666667
      time: 1730606400
    - request_total: 651.3333333333334
      time: 1730608200
    - request_total: 571.9677419354839
      time: 1730610000
    - request_total: 550.2
      time: 1730611800
    - request_total: 563.5
      time: 1730683800
```

### Small 尺寸

small 尺寸时图表高度为 55px，标签和数值紧凑排列在图表左侧。

```yaml preview
brick: ai-portal.stat-with-mini-chart
properties:
  label: 请求数
  value: "563.5"
  size: small
  xField: time
  yField: request_total
  lineColor: "#295DFF"
  data:
    - request_total: 642.2
      time: 1730597995.403
    - request_total: 621.3
      time: 1730599200
    - request_total: 600.2
      time: 1730601000
    - request_total: 601.9666666666667
      time: 1730602800
    - request_total: 592.4
      time: 1730604600
    - request_total: 567.8666666666667
      time: 1730606400
    - request_total: 651.3333333333334
      time: 1730608200
    - request_total: 571.9677419354839
      time: 1730610000
    - request_total: 550.2
      time: 1730611800
    - request_total: 563.5
      time: 1730683800
```

### 带填充区域和 y 轴范围

开启 showArea 并指定 min/max 固定 y 轴范围。

```yaml preview
brick: ai-portal.stat-with-mini-chart
properties:
  label: CPU 使用率
  value: "78.5%"
  xField: time
  yField: cpu
  lineColor: "#FF6B6B"
  showArea: true
  min: 0
  max: 100
  data:
    - cpu: 65.2
      time: 1730597995
    - cpu: 72.1
      time: 1730599200
    - cpu: 78.5
      time: 1730601000
    - cpu: 80.3
      time: 1730602800
    - cpu: 75.6
      time: 1730604600
    - cpu: 70.2
      time: 1730606400
    - cpu: 78.5
      time: 1730608200
```