---
order: 33
navTitle: KPI
---
# 仪表板组件-KPI

KPI即关键绩效指标，通常用来展示一个或多个指标数据，如全国销售数量指标情况：

|单指标KPI|多指标KPI横向布局|多指标KPI纵向布局|
| ---- | ---- | ---- |
|![单指标](./images/2020-07-27-09-57-12.png)|![横向](./images/2020-07-28-09-46-49.png)|![纵向](./images/2020-07-28-09-45-54.png)|

示例地址：[单指标KPI](https://demo.succbi.com/v5/bi/kpi_1)

## 使用KPI组件{#start}

KPI的指标上至少取1个度量，如销售数量，销售金额等。

**操作步骤**

![示例](./images/2023-04-19-17-53-33.gif)

1. 双击或拖入度量【销售数量】到**指标**
2. 根据需求调整KPI的布局：切换到**样式**>**组件**>**布局**属性，设置如下属性
   - **标题位置**：下拉选择**左侧**
   - **指标对齐**：下拉选择**居左**
3. 设置KPI图标：设置**图标**位置为**左侧**，并选取一个图标，具体图标操作可参考[图标](../more/icon.md)
4. 设置KPI指标信息的单位：切换到**样式**>**指标**中，选择**销售数量**>**单位**，手动输入单位**件**
5. 如需多指标展示，可以在**数据**>**指标**再拖入其他指标

## 属性介绍{#properties}

### 布局{#layout}

布局是设置KPI组件的图标、指标标题、指标值和单位的位置和对齐方式。

![布局](./images/2023-04-19-17-42-53.png)

- **排列方向** ：2个以上指标时设置有效，用于设置多指标的排列方式，包括**纵向**、**横向**
- **标题位置** ：标题相对于指标显示位置，包括**上方**、**下方**、**左侧**、**右侧**，选择不同的标题位置，下方会生成不同的指标对齐方式
- **指标对齐**：用于控制指标值与指标标题的对齐方式。**指标对齐**的选项说明如下
  - **标题位置**选择**上方**、**下方**时，对齐方式可选择**居左**、**居中**和**居右**
  - **标题位置**选择**左侧**、**右侧**时，对齐方式可选择**默认**与**两端对齐**，默认即居左对齐
  - 2个以上指标**排列方式**为**横向**、标题位置为**左侧**、**右侧**时，不可设置该属性
- **值对齐** ：当**标题位置**选择**左侧**、**右侧** 激活此选项，控制值的对齐方式，包括**居左**、**居中**和**居右**，并且显示标题自动换行按钮，可以勾选激活此功能
- **整体对齐** ：图标、指标标题、指标值构成整体的横向对齐方式，包括**居左**、**居中**、**居右**

### 指标样式{#index-style}

标题、指标和单位的样式编辑。

![指标样式](./images/2023-04-19-17-39-41.png)

- **标题** ：编辑指标标题的字体、字号、颜色等样式，指标标题默认以指标自身的名称生成标题，也可手动编辑指标标题
- **值** ：编辑指标值的字体、字号、颜色等样式
- **单位** ：指标的单位，编辑指标单位的字体、字号、颜色等样式，单位缺少状态下是空值，可以根据指标的计量单位输入内容

## 更多效果{#scenarios}

可以通过指标的布局属性组合设置，实现不同的布局显示效果。

|横向布局|纵向布局|两端对齐
| ---- | ---- | ---- |
|![横向布局](./images/2020-07-28-09-46-49.png)|![纵向布局](./images/2020-07-28-09-45-54.png)|![两端对齐](./images/2023-04-19-17-38-18.png)|

**实现方式**

- 将双指标拖入到**指标**中
- 横向布局： **指标布局**选择**横向**，**标题位置**选择**下侧**，**对齐方式**选择**居左**
- 纵向布局： **指标布局**选择**纵向**，**标题位置**选择**左侧**，**值对齐**选择**居左**
- 两端对齐： **指标布局**选择**纵向**，**标题位置**选择**左侧**，**指标对齐**选择**两端对齐**