百分比圓環儀表盤

1.1 版本

1.2 應用場景

「百分比圓環儀表盤」是一個完整的圓環，用來展示某一項在整個圓環的佔比情況，包含類別、百分比、數值等指標資料。

利用百分比圓環儀表盤，可以直覺地展示某一項佔總量的佔比、完成率以及達成率之類的資料。效果如下圖所示：

1.3 圖表特點

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

缺點：只能一個維度，指標資料也不宜過多，展示資訊有限。

2.1 類型

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

2.2 資料

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

• 分類名：百分比對應的分類名稱，前端展示時顯示在中間滑槽區域。
  

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

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

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

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 插入圖表

合併一片儲存格區域，被選儲存格後點選上方工具欄插入圖表按鈕，插入一個百分比圓環儀表盤。如下圖所示：

3.1.3 資料綁定

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

3.1.4 樣式設計

可根據實際需要設定儀表盤樣式，這裏設定儀表盤的「標題」，「標籤」和「特效」。

1）勾選「標題可見」，修改正文為"百分比圓環儀表盤"。

2）勾選「使用標籤」，「值標籤」勾選分類名、目標值和指標值。

3）特效「工具欄」內容全部取消勾選。

如下圖所示：

3.2 效果預覽

3.2.1 PC 端

儲存範本，點選「分頁預覽」，效果參考 1.2 應用場景圖片。

3.2.2 行動端

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

已完成範本可參見：%FR_HOME%webappswebrootWEB-INF eportletsdocChartDashboard百分比圓環儀表盤範本.cpt

點選下載範本：百分比圓環儀表盤模板.cpt