百分比刻度槽型儀表盤

1.1 版本

1.2 應用場景

百分比刻度槽型儀表盤是一個不完整的圓環，展示某一項的佔比情況，有類別、百分比、數值等指標資料。

利用百分比刻度槽型儀表盤，可以直覺地表現出指標與達成資料的達成率，可以展示銷售完成率、產品合格率等，也可以作為一個進度百分比展示。

它跟 百分比圓環儀表盤 的差別在於圓環採用了刻度槽樣式。效果如下圖所示：

1.3 圖表特點

優點：直覺的表現出資料範圍與大小，某個指標的進度和完成情況，主要用於進度或佔比的展現。

缺點：不能直覺的展示資料趨勢變化，不適用多種資料對比分析。

2.1 型別

以儲存格元素或懸浮元素插入儀表盤後，可在右邊屬性面板的型別設定項下，選擇百分比刻度槽型儀表盤，如下圖所示：

2.2 資料

基礎資料設定項詳細介紹可以參見文檔：圖表資料

分類名：百分比對應的分類名稱。

指標值：百分比計算時分子的一部分，要配合坐標軸下的最小值形成分子。

目標值：百分比計算時分母的一部分，要配合坐標軸下的最小值形成分母。

注：百分比計算公式：（指標值-最小值）/（目標值-最小值），最小值指的是坐標軸處設定的最小值，詳情參見下面樣式的說明。

2.3 樣式

百分比刻度槽型儀表盤樣式設計的詳細介紹可以參見文檔：圖表樣式

2.3.1 系列

百分比刻度槽型儀表盤的「樣式>系列」設定項跟基礎樣式有所不同，單獨介紹：

1）顏色：

• 配色風格預設為「純色」，顏色劃分預設為「分類」，儀表盤不同分類根據配色方案顯示顏色。

• 配色風格為「純色」，顏色劃分選擇「值」時，需設定「刻度和配色」：儀表盤根據刻度值顯示儀表盤圓環的顏色，預設自動，取配色方案中前三種顏色，分別適配刻度 0~1/3，1/3~2/3，2/3~1 的區間色；選擇自訂時，可設定值屬於某個範圍顯示某個顏色。

• 配色風格為「漸變色」時，每個分類儀表盤的顏色顯示相同的漸變效果。

2）佈局/樣式

• 方向：資料集中有多個分類，前端展示時會出現多個儀表盤，此時可以改變這些儀表盤的排列方向。

• 指標：指標是指進度條最前端的圓形圖示顏色，預設為透明。

• 刻度槽：可設定圓環的刻度槽背景顏色，預設為淺灰。

• 半徑設定：控制百分比刻度槽型儀表盤的大小，分為自動和固定兩種型別。

• 滑槽佔比：改變百分比刻度槽區域的佔比。

2.3.2 標籤

百分比刻度槽型儀表盤的「樣式>標籤」設定項跟基礎樣式有所不同，簡單介紹：

• 百分比標籤和值標籤下的字號選擇「自動」時，字體大小會根據儀表盤大小自動調整。

• 百分比標籤下的顏色選擇「自動」時，百分比標籤的顏色會跟隨系列色顯示。

• 「值標籤」支援顯示「目標值」，預設不勾選。

2.3.3 坐標軸

百分比刻度槽型儀表盤的「樣式>坐標軸」設定項跟基礎樣式有所不同，簡單介紹：

• 自訂最小值：勾選後可以自訂最小值，預設不勾選。

• 最小值：該值跟形成分子和分母有關係，百分比計算公式：（指標值-最小值）/（目標值-最小值）。

注：只能設定最小值，無最大值。

2.4 特效

百分比刻度槽型儀表盤特效設定的詳細介紹可以參見文檔：圖表特效 。

注：百分比刻度槽型儀表盤的特效設定項下沒有條件顯示。

3.1 報表設計

3.1.1 資料準備

建立決策報表，建立資料庫查詢 ds1，SQL 查詢語句為：

select 類別名稱,sum(庫存量)as 庫存量 from 產品,類別

where 產品.類別ID=類別.類別ID and 類別名稱="飲料"

3.1.2 組件設計

將百分比刻度槽型儀表盤拖拽到 body 組件中，調整位置，如下圖所示：

3.1.3 資料綁定

資料來源為「資料集資料」，選擇資料集 ds1，分類名為「類別名稱」，指標值為「庫存量」，目標值選擇「自訂」設定為 500。如下圖所示：

3.1.4 樣式設計

根據實際需要設定樣式，這裏設定了標題、標籤顯示「目標值」，系列「指標」為白色。如下圖所示：

3.2 效果預覽

3.2.1 PC 端

儲存範本，點選「PC 端預覽」，效果如下圖所示：

3.2.2 行動端

App 端和 HTML5 端均支援，效果如下圖所示：

點選下載範本：百分比刻度槽型儀表盤.frm