---
order: 36
navTitle: 水位图
---
# 仪表板组件-水位图

水位图类似KPI，常用来展示一个指标数据。如销售完成情况：

|圆形图标水位图|圆形水位图|菱形指标水位图|
| ---- | ---- | ---- |
|![圆形](./images/2020-07-31-17-34-51.png)|![圆形无](./images/2020-08-05-11-51-46.png)|![菱形](./images/2020-08-05-11-56-12.png)|

示例地址：[水位图](https://demo.succbi.com/v5/bi/water-percent)

## 使用水位图组件{#start}

水位图的**指标**上取一个度量，如完成率等。

**操作步骤**

![操作](./images/2023-04-19-10-29-00.gif)

1. 设置指标：双击或拖入度量【完成率】到**指标**
2. 选择形状：在**样式**>**系列**>**布局**中进行设置，默认为**圆形**，可以选择其他形状，具体样式可参考[布局](#layout)
3. 设置波浪颜色：在**样式**>**系列**>**填充**中对两层波浪进行自定义颜色设置
4. 如需设置图标，可将**更多**>**图标**拖入到水位图，具体可参考[图标](../more/icon.md)

## 属性介绍{#properties}

水位图提供了容器的设置选项，包含：

- [布局](#layout)
- [标签](#label)
- [波浪](#wave)
- [边框](#border)

### 布局{#layout}

水位图可以设置目标值、显示形状、水位图在组件内的填充半径以及内部距离

![布局](./images/2023-04-19-11-55-00.png)

- **目标值** ：设置水位图撑满时需要达到的目标值
- **形状** ：水位图的显示形状，可设置如下样式

|圆形|正方形|圆角正方形|菱形|针形|箭头|撑满容器|
| ---- | ---- | ---- | ---- | ---- | ---- | ---- | ---- | ---- |
|![圆形](./images/2020-07-31-17-34-51.png)|![正方形](./images/2020-08-03-10-59-30.png)|![圆角正方形](./images/2020-08-03-11-00-53.png)|![菱形](./images/2020-08-03-11-03-38.png)|![针形](./images/2020-08-03-11-05-43.png)|![箭头](./images/2020-08-03-11-08-07.png)|![撑满容器](./images/2020-08-03-11-10-23.png)|

- **半径** ：设置水位图在组件内的填充半径
- **内部距离** ：设置水位图中内边框和外边框的距离

### 标签{#label}

水位图可以设置是否显示标签，并且可以通过**浸入颜色**控制当水位浸没标签时显示颜色

![标签](./images/2023-04-19-11-14-00.png)

### 波浪{#wave}

水位图提供两层波浪，且可以分别设置每层波浪的颜色。提供了波动特效设置，默认是选中状态，如果不需要可以勾选取消波动特效

![波浪颜色](./images/2023-04-19-11-09-00.png)

- **波浪1颜色**：顶层波浪颜色，可以设置纯色和渐变色
- **波浪2颜色**：底层波浪颜色，可以设置纯色和渐变色
- **背景填充**：最底层背景颜色设置
- **波动**：勾选后启用波动动效

### 边框{#border}

水位图的最外层包含了外边框和内边框，且可以分别设置内外边框的线条样式、颜色和线条的粗细

![边框](./images/2023-04-19-11-16-00.png)

- **外边框**：设置水位图外边框的线条样式、颜色和粗细
- **内边框**：设置水位图内边框的线条样式、颜色和粗细