KPI指标卡

1.1 版本说明

1.2 应用场景

KPI 指标卡为直观展示 KPI 数值的组件，可直接显示所选字段的数值，比如展示销售额、毛利、毛利率等指标数值。效果如下图所示：

1.3 数据要求

KPI 指标卡的数据要求如下表所示：

1.4 图表特点

• 优点：适合突出显示重要指标。

• 缺点：仅能展示文本。

2.1 创建组件

1）点击「仪表板」，选择「新建仪表板」，点击「确定」。如下图所示：

2）点击「添加组件」，选择「功能数据>销售DEMO」下的「合同事实表」，点击「确定」。如下图所示：

3）将「合同金额」字段拖入指标中。如下图所示：

注：拖入的「指标」，指标值不能为空，否则KPI指标卡不生效。

4）在图表类型下选择「KPI指标卡」。如下图所示：

2.2 设置文本格式

1）点击「文本」栏，点击内容格式右下角的「编辑」按钮。如下图所示：

2）富文本编辑器提供自动样式，同时也支持自定义样式，可以为文字设置字体、字号、对齐等效果。

选中富文本编辑框中的字段，对其设置样式后，点击右下角「确定」按钮即可。如下图所示：

注：文本对齐功能是 5.1.10 版本新加的功能，之前版本的文本都是默认居中样式。

3）若仅需要修改指标卡显示的字段名称，对于 5.1.12 及之后版本，直接修改文本栏字段名即可，例如需要修改指标卡文本字段「合同金额」为「合同总金额」，则只需要修改「文本栏」内「合同金额」字段为「合同总金额」即可。如下图所示：

除了上述文本的格式，还可在图形属性中设置更多的样式属性，具体情况可参见：图形属性

还可以设置组件的图例、网格线、背景、自适应显示等等，详情参见：图表组件样式 

2.3 效果预览

2.3.1 PC 端

效果如下图所示：

2.3.2 移动端

App 及 HTML5 端效果如下图所示：

若需要切换指标卡显示字段，则直接拖走原有字段，并拖入需要选择的字段即可，例如需要切换「合同金额」字段为「购买数量」。如下图所示：

注：5.1.12 之前的版本，拖走字段后指标卡字段名仍保留，需要手动进入文本栏编辑界面修改。

1）在本文示例基础上，将指标字段「合同金额」拖入到颜色栏中，将「合同类型」字段拖入横轴中。如下图所示：

注：「颜色」栏中拖入字段后，之前在「文本」处设置的颜色将失效。

2）点击「文本」栏，点击内容格式右下角的「编辑」按钮，将文本字体大小调到 30 。如下图所示：

3）点击「颜色」栏，设置颜色区间。如下图所示：

4）点击「组件样式>图例」，取消勾选「显示全部图例」按钮。如下图所示：

5）最终效果如下图所示：

5.1 指标卡内容显示不全

进入仪表板编辑或者预览界面，图表如下图所示：

可以通过三种方式解决问题：调整组件自适应显示、调大组件显示界面、调小文本字体字号

5.1.1 调整自适应显示为整体适应

在「组件样式>自适应显示」中，设置为「整体适应」，文本内容即会随着组件在仪表板中大小，自动调整。如下图所示：

5.1.2 调大组件显示界面

1）在仪表板预览界面点击「编辑仪表板」，进入编辑界面。如下图所示：

2）选中指标卡组件，向外侧拖动组件边框，拉大组件显示界面，调整到合适大小。如下图所示：

5.1.3 调小文本字体字号

参考本文 2.2.2 节内容，调小文本字体字号。