---
order: 32
navTitle: 仪表盘
---
# 仪表板组件-仪表盘

仪表盘是模仿汽车速度表的一种图表，可以简单、直观地展示某个指标值所在的范围，比如用来反映预算完成率、收入增长率等比率性指标。

![仪表盘示例](./images/2019-07-02-19-50-47.png)

## 使用仪表盘组件{#start}

仪表盘组件的使用只需要一个度量作为指标，如销售数量。在**样式**>**表盘**>**刻度值**处可设置度量所在的数据区间。

**操作步骤**

![仪表盘-步骤](./images/2023-05-09-14-13-33.gif)

1. 双击或拖入【销售数量】到指标，并右键指标，选择**度量**>**平均值**
2. 在**样式**>**进度**处设置标签隐藏

## 属性介绍{#properties}

### 表盘{#axis}

表盘即指标所在坐标轴。在**样式**>**表盘**处可设置表盘的样式，包括表盘的半径、区间着色、刻度值、刻度线等内容。

![表盘](./images/2023-05-10-09-57-20.png)

- **布局**：可设置表盘半径、以及起始角度、结束角度、是否顺时针增长以及两端是否显示圆角等内容
  - **半径**：设置表盘半径，最大值为100%
  - **圆形**：**起始角度**与**结束角度**的快捷选项，根据选中值形成对应起始角度与结束角度。可选项包括满圆、半圆、多半圆、自定义。
  - **起始角度**：表盘的起始角度，最大值为360度。起始角度为0度指起始点从右侧水平开始
  - **结束角度**：表盘的结束角度，最大值为360度
  - **顺时针增长**：设置表盘数据是否顺时针增长，默认勾选，当该属性发生变化时，角度也会对应改变
  - **两端显示圆角**：设置表盘的两端是否显示圆角，默认不勾选
- **轴线**：可设置轴线的区间着色，以及轴线的宽度
  - **区间着色**：默认五个区间，颜色为所选色板的前五个颜色，可自行调整区间个数及颜色
  - **宽度**：设置轴线的宽度
- **轴标签**：即分割线的标签。可设置轴标签的显示隐藏、距轴线的距离、字体的大小颜色等样式
- **刻度值**：设置轴线的最大值与最小值
- **刻度线**：即轴线的刻度线，可设置刻度线的线条样式、长度、刻度数量以及刻度线与轴线的距离
- **分割线**：即轴线的分割线，可设置分割线的线条样式、长度、分割段数以及分割线与轴线的距离

### 进度{#progress}

进度是以进度条的形式在表盘上展现的指标数值。当显示时，会直接叠加在表盘上，如果只想保留进度，可调整表盘轴线的不透明度为0%，在**样式**>**进度**处可设置进度是否显示、进度的标签、进度的填充、边框阴影等内容。

![进度](./images/2023-05-10-09-59-11.png)

- **布局**：设置进度是否显示，以及进度两端是否显示圆角
- **标签**：设置进度标签的显示隐藏、字体的大小颜色等样式
- **填充**：设置进度条的填充色
- **边框**：设置进度条的边框
- **阴影**：设置进度条的阴影

### 指针{#pointer}

类似于时钟的指针，仪表盘的指针指向当前数值。在**样式**>**指针**处可设置指针的形状、长度、宽度、填充等样式。

![指针](./images/2023-05-10-10-04-25.png)

- **指针**：设置指针的形状、长度、宽度
  - **指针**：可选择形状为刀型针、线型针、水滴针、自定义或无。选择无即不显示指针
  - **长度**：设置指针的长度，最大值为100%
  - **宽度**：设置指针的宽度，最大值为100
- **填充**：设置指针的填充色
- **边框**：设置指针的边框
- **外阴影**：设置指针的外阴影

## 更多效果{#scenarios}

可以通过自定义表盘、进度、指针来实现不同效果的仪表盘。

| 多色仪表盘  | 渐变仪表盘 | 圆形仪表盘|
| -------- | -------- | -------- |
|![多色仪表盘](./images/2023-05-10-10-14-50.png)|![渐变仪表盘](./images/2023-05-10-10-15-25.png)|![圆形仪表盘](./images/2023-05-10-10-17-54.png)|

| 间隔仪表盘  | 自定义指针| 半圆占比图 |
| -------- | -------- | -------- |
|![间隔仪表盘](./images/2023-05-10-10-18-35.png)|![自定义指针](./images/2023-05-10-10-20-33.png)|![半圆占比图](./images/2023-05-09-16-45-37.png)|

### 多色仪表盘{#multicolour}

![多色仪表盘](./images/2023-05-10-10-14-50.png)

**实现方式**

1. 在**样式**>**表盘**>**轴线**设置合适的区间填充色
2. 在**样式**>**表盘**>**轴标签**处显示轴标签
3. 在**样式**>**进度**>**标签**处设置合适的标签颜色
4. 在**样式**>**指针**>**填充**处设置指针的填充颜色

| 表盘设置 | 进度设置| 指针设置  |
| -------- | -------- | -------- |
|![表盘](./images/2023-05-10-13-49-09.png)|![进度](./images/2023-05-10-10-52-29.png)|![指针](./images/2023-05-10-10-52-54.png)|

### 渐变仪表盘{#gradient}

![渐变仪表盘](./images/2023-05-10-10-15-25.png)

**实现方式**

1. 在**样式**>**表盘**>**轴线**设置一个区间，区间颜色为渐变色。根据需求设置合适的区间填充色
2. 在**样式**>**表盘**>**轴标签**处显示轴标签
3. 在**样式**>**指针**>**填充**处设置指针的填充颜色

| 表盘设置 | 指针设置  |
| -------- | -------- |
|![表盘](./images/2023-05-10-13-39-36.png)|![指针](./images/2023-05-10-13-40-20.png)|

### 圆形仪表盘{#circle}

![圆形仪表盘](./images/2023-05-10-10-17-54.png)

**实现方式**

1. 在**样式**>**表盘**>**布局**设置合适**起始角度**和**结束角度**，调整至目标形状
2. 在**样式**>**表盘**>**轴线**处设置对应的区间数以及填充色
3. 在**样式**>**表盘**>**轴标签**处显示轴标签
4. 在**样式**>**表盘**>**刻度值**处设置表盘的区间范围
5. 在**样式**>**指针**>**指针**处设置指针形状，**样式**>**指针**>**填充**处设置指针的填充颜色

| 表盘设置 | 指针设置  |
| -------- | -------- |
|![表盘设置](./images/2023-05-10-14-01-54.png)|![指针](./images/2023-05-10-14-03-14.png)|

### 间隔仪表盘{#interval}

![间隔仪表盘](./images/2023-05-10-10-18-35.png)

**实现方式**

1. 在**样式**>**表盘**>**轴线**设置区间数以及填充色
2. 在**样式**>**表盘**>**刻度线**处使用刻度线分割表盘
3. 在**样式**>**指针**>**填充**处设置指针的填充颜色

| 表盘设置 | 指针设置  |
| -------- | -------- |
|![表盘](./images/2023-05-10-14-26-10.png)|![指针](./images/2023-05-10-14-26-45.png)|

### 自定义指针{#custom}

![自定义指针](./images/2023-05-10-10-20-33.png)

**实现方式**

1. 在**样式**>**表盘**调整表盘样式，如在**轴线**处区间填充色，在**刻度线**处调整刻度线，在**分割线**处调整分割线
2. 在**样式**>**指针**>**指针**处设置自定义指针，选择图标库图标或者上传图标
3. 在**样式**>**指针**>**填充**处设置自定义指针的填充色

| 表盘设置 | 指针设置  |
| -------- | -------- |
|![表盘](./images/2023-05-10-14-49-53.png)|![指针](./images/2023-05-10-14-49-06.png)|

### 半圆占比图{#semicircle}

![半圆占比图](./images/2023-05-09-16-45-37.png)

**实现方式**

1. 在**样式**>**表盘**>**布局**>**圆形**设置表盘为半圆，根据需要勾选**两端显示圆角**
2. 在**样式**>**表盘**>**轴线**设置区间填充色为统一背景色
3. 在**样式**>**表盘**>**刻度线**处隐藏刻度线，在**样式**>**表盘**>**分割线**处隐藏分割线
4. 在**样式**>**进度**>**布局**处显示进度，根据需要勾选**两端显示圆角**
5. 在**样式**>**指针**>**指针**处设置指针为无

| 表盘设置 | 进度设置| 指针设置  |
| -------- | -------- | -------- |
|![表盘](./images/2023-05-09-16-50-33.png)|![指标](./images/2023-05-09-16-51-11.png)|![指针](./images/2023-05-09-16-51-46.png)|