跳到主要内容

仪表盘

仪表盘：用于集中展示关键指标、数据和信息，帮助用户快速了解系统、项目或业务的整体状态；以下是仪表盘的使用指南

一、基础仪表盘​

1、效果展示​

2、添加基础仪表盘​

3、样式设置​

  • 3.1 通用样式配置：(通用配置)
  • 3.2 仪表盘设置
    • 刻度值配置：支持配置刻度值的显示与否（即刻度线旁边的数字）、刻度线的颜色以及刻度值的字体大小

  • 刻度线配置：支持控制刻度线（蓝色部分）的显示与隐藏，并可设置刻度线的长度

  • 分割线配置：支持自定义分割线（橘黄色部分）的长度和颜色设置

  • 指标字号配置：支持配置字体大小（例如本示例7.6）

4、数据格式​

[
  {
    "min": 1,
    "max": 10,
    "label": "完成率",
    "value": 7.6
  }
]

二、多色仪表盘​

1、效果展示​

2、添加多色仪表盘​

3、样式设置​

  • 3.1 通用样式配置：(通用配置)
  • 3.2 仪表盘设置

    • 刻度值配置：与基础仪表盘属性一致，支持是否显示刻度值、刻度线的颜色、及刻度值的字体大小设置

    • 刻度线配置：与基础仪表盘属性一致，支持刻度线显示隐藏，刻度线的长度设置

    • 分割线配置：与基础仪表盘属性一致，支持分割线的长度和颜色配置

    • 指标字号配置：与基础仪表盘属性一致，支持字体大小配置

4、数据格式​

[
  {
    "name": "使用率",
    "value": 4
  }
]

三、渐变仪表盘​

1、效果展示​

2、添加渐变仪表盘​

3、样式设置​

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

  • 3.2 仪表盘设置

    • 仪表盘类型：支持经典模式和米轨模式

    • 粗度：当选择经典类型时，支持设置线条的粗细

    • 刻度值配置：支持控制刻度值的显示与否、刻度值的颜色以及字体大小的设置

    • 刻度线配置：支持刻度线的显示与否，刻度线的颜色设置

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

    • 指针配置：支持指针的颜色和粗度配置

4、数据格式​

[
  {
    "label": "使用率",
    "value": 4
  }
]