2025.3.4
首页 ▸ Dashboards ▸

仪表卡片

仪表卡片是一个基本的卡片，可以可视化显示传感器数据。

仪表卡片的截图 仪表卡片的截图。

针式模式下的仪表卡片截图 针式模式下的仪表卡片截图。

要将 仪表卡片 添加到您的用户界面：

  1. 在屏幕右上角，选择编辑 按钮。
    • 如果这是您第一次编辑仪表板，将会出现 编辑仪表板 对话框。
      • 通过编辑仪表板，您将接管此仪表板的控制。
      • 这意味着当新的仪表板元素可用时，它将不再自动更新。
      • 一旦您接管控制，就无法将此特定仪表板恢复为自动更新状态。但是，您可以创建一个新的默认仪表板。
      • 要继续，请在对话框中选择三点菜单 ，然后选择 接管控制。
  2. 添加卡片并自定义操作和功能 到您的仪表板。

所有此卡片的选项都可以通过用户界面进行配置。

YAML 配置

在你使用 YAML 模式或更喜欢在用户界面的代码编辑器中使用 YAML 时，可以使用以下 YAML 选项。

Configuration Variables

Looking for your configuration file?
type string Required

gauge

entity string Required

要显示的实体 ID。

name string (Optional, default: 实体名称)

仪表实体的名称。

unit string (Optional, default: 实体提供的计量单位)

数据的计量单位。

theme string (Optional)

用任何加载的主题覆盖该卡片使用的主题。有关主题的更多信息，请参阅 前端文档。

min integer (Optional, default: 0)

图表的最小值。

max integer (Optional, default: 100)

图表的最大值。

needle boolean (Optional, default: false)

以针表形式显示仪表。如果使用分段，需将其设置为 true。

severity map (Optional)

允许为不同数值设置颜色。

green integer Required

开始绿色的值。

yellow integer Required

开始黄色的值。

red integer Required

开始红色的值。

segments list (Optional)

颜色及其对应起始值的列表。分段将覆盖严重程度设置。针需设为 true。

from integer Required

开始颜色的值。

color string Required

段的颜色，可以是任何 CSS 颜色声明，如 “red”，”#0000FF” 或 “rgb(255, 120, 0)”。

label string (Optional)

段的标签。这将在数值旁边显示。

tap_action map (Optional)

在卡片点击时执行的操作。请参见 操作文档。

hold_action map (Optional)

在卡片点击并保持时执行的操作。请参见 操作文档。

double_tap_action map (Optional)

在卡片双击时执行的操作。请参见 操作文档。

示例

标题和单位：

type: gauge
name: CPU 使用率
unit: '%'
entity: sensor.cpu_usage

自定义标题和单位的仪表卡片截图 自定义标题和单位的仪表卡片截图。

定义严重程度映射：

type: gauge
name: 带严重程度
unit: '%'
entity: sensor.cpu_usage
severity:
  green: 0
  yellow: 45
  red: 85

多个分段：

带有多个彩色分段的仪表卡片截图 带有多个彩色分段的仪表卡片截图。 

type: gauge
entity: sensor.kitchen_humidity
needle: true
min: 20
max: 80
segments:
  - from: 0
    color: '#db4437'
  - from: 35
    color: '#ffa600'
  - from: 40
    color: '#43a047'
  - from: 60
    color: '#ffa600'
  - from: 65
    color: '#db4437'

可以使用 CSS 变量（而不是 CSS ‘#rrggbb’）作为默认仪表分段颜色：

  • var(--success-color) 用于绿色
  • var(--warning-color) 用于黄色
  • var(--error-color) 用于红色
  • var(--info-color) 用于蓝色

因此，上一个示例也可以定义为：

type: gauge
entity: sensor.kitchen_humidity
needle: true
min: 20
max: 80
segments:
  - from: 0
    color: var(--error-color)
  - from: 35
    color: var(--warning-color)
  - from: 40
    color: var(--success-color)
  - from: 60
    color: var(--warning-color)
  - from: 65
    color: var(--error-color)

相关主题