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 節內容，調小正文字體字號。