跳到主要内容

仪表盘

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

一、基础仪表盘​

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
  }
]

四、半圆仪表盘​

1、效果展示​

  • 无指针样式

  • 有指针样式

2、添加仪表盘​

通过菜单路径：图表 → 仪表盘 → 半圆仪表盘 添加半圆仪表盘组件

3、仪表盘设置​

3.1 基础设置​

3.1.1 角度与指针配置​

配置仪表盘的基本显示参数，包括角度范围和指针显示。

  • 开始角度：180（默认值，单位：度）
    • 设置仪表盘起始角度，支持通过滑块或输入框调整
  • 结束角度：0（默认值，单位：度）
    • 设置仪表盘结束角度，支持通过滑块或输入框调整
  • 指针配置
    • 显示指针：控制是否显示仪表盘指针
      • 开启：显示指针指示当前数值，开启后可配置指针颜色及长度和粗细
      • 关闭：隐藏指针
3.1.2 数据配置​

配置仪表盘中心显示的数据信息，包括数值字段、前缀后缀、字体样式和位置偏移。

  • 显示数据：控制是否显示中心数值（默认开启）
  • 数值字段：数据源中对应的数值字段名，例如：used，与“4、数据格式”中返回的字段对应
  • 数值前缀：显示在数值前的文本，例如：已使用:，可自定义
  • 数值后缀：显示在数值后的文本，例如：辆，可自定义
  • 字体大小：例如：18px（根据需要自定义）
  • 字体颜色：默认颜色，支持自定义选择
  • 字体样式：正常（支持设置字体粗细、斜体等样式）
  • 水平偏移：调整数值的水平位置
  • 垂直偏移：调整数值的垂直位置
3.1.3 标题配置（总数配置）​

配置仪表盘标题区域的显示内容，通常用于显示总数或标题信息。

  • 显示标题：控制是否显示标题区域
  • 标题字段：数据源中对应的标题字段名，例如：total，与“4、数据格式”中返回的字段对应
  • 标题前缀：显示在标题值前的文本，例如：总人数:，可自定义
  • 标题后缀：显示在标题值后的文本，例如：人，可自定义
  • 字体大小：16px（根据需要自定义）
  • 字体颜色：默认颜色，支持自定义选择
  • 字体样式：正常（支持设置字体粗细、斜体等样式）
  • 水平偏移：调整标题的水平位置
  • 垂直偏移：调整标题的垂直位置

3.2 外部刻度​

配置仪表盘外部刻度线的显示样式和参数，包括刻度大小、数量、标签显示等。

  • 大小：设置外部刻度线的大小，支持通过滑块或输入框调整；例如：61（自定义即可，单位：px）
  • 刻度数量：设置外部刻度线的数量，支持通过滑块或输入框调整；例如 2
  • 显示标签：控制是否显示刻度标签
    • 开启：显示刻度标签文本
    • 关闭：隐藏刻度标签
  • 标签颜色：#FFFFFF（可自定义）
    • 设置刻度标签的文字颜色，支持颜色选择器自定义
  • 字体大小：12 px（可自定义）
    • 设置刻度标签的字体大小，支持通过滑块或输入框调整
  • 距离：-52（可自定义，单位：px）
    • 设置刻度标签与刻度线的距离，支持通过滑块或输入框调整
    • 负值表示向内偏移，正值表示向外偏移

3.3 外部进度条​

配置仪表盘最外层进度条的显示样式和参数

  • 示例颜色值：#2E76B9

3.4 内部小圆​

配置仪表盘内部小圆的显示样式和参数

  • 示例颜色值：#42A8FF66

3.5 内部阴影​

配置仪表盘内部阴影效果的显示样式和参数

  • 启用渐变色，渐变颜色从“#2E76B900” 到 “#42A8FFCC”

3.6 内部进度条​

配置仪表盘内部进度条的显示样式和参数

  • 示例颜色值：#2E76B9

4、数据格式​

[
  {
    "total": 800,
    "used": 500
  }
]