本文介紹基本餅圖的圖表樣式和配置面板的功能。
圖表樣式
基本餅圖是餅圖的一種,支援通過極座標來確定圖表的大小,支援圖表外部的標籤展示,支援真實數值和百分比值的切換,支援自訂圖形樣式和多系列資料配置,能夠清晰智能地展示各類別的佔比情況。

配置面板
搜尋配置:單擊配置面板右上方的搜尋配置,可在搜尋配置面板中輸入您需要搜尋的配置項名稱,快速定位到該配置項,系統支援模糊比對。詳情請參見搜尋資產配置。
- 圖表尺寸:包括組件的寬度和高度,單位為px。可單擊
表徵圖鎖定組件的寬高比,等比例修改組件的寬高。再次單擊進行解鎖,解鎖後寬高比不受限制。 - 圖表位置:包括組件的橫座標和縱座標,單位為px。橫座標為組件左上方距離頁面左邊界的像素距離,縱座標為組件左上方距離頁面上邊界的像素距離。
- 旋轉角度:以組件的中心為中心點,進行旋轉,單位為度(°)。
- 手動輸入角度值,控制組件的旋轉角度。
- 拖動
表徵圖內的黑點,控制組件的旋轉角度。 - 單擊
表徵圖,控制組件左右翻轉樣式。 - 單擊
表徵圖,控制組件上下翻轉樣式。
- 不透明度:取值範圍為0~1。為0時,圖表隱藏;為1時,圖表全部顯示。預設為1。
圖表

自訂邊距:單擊
表徵圖控制自訂邊距的顯隱。餅圖地區與組件上下左右四個邊界之間的距離,單位預設px。餅圖樣式:餅圖的樣式。
參數
說明
描邊顏色
餅圖的描邊顏色。
描邊粗細
餅圖的描邊粗細值。
值標籤:餅圖內數值標籤的樣式,可單擊
表徵圖控制值標籤的顯隱。 參數
說明
位置
值標籤文本的顯示位置,可選內部、外部和蜘蛛布局。
文本樣式
值標籤文本的字型樣式、文字粗細、字型大小和顏色。
圖例:基本餅圖的圖例樣式,可單擊
表徵圖控製圖例的顯隱。 參數
說明
允許翻頁
開啟開關,圖例數量較多排列不下時可以允許翻頁顯;關閉開關,不允許翻頁。
布局
圖例相對於組件起始座標的位置,可選頂部居左、頂部置中、頂部居右、底部居左、底部置中和底部居右。
圖例標記
圖例標記的樣式,包括圖例的形狀樣式和圖例大小。
圖例文本
圖例文本樣式,包括圖例的字型樣式、文字粗細、字型大小和顏色。
座標軸:餅圖的徑向軸樣式。

半徑:餅圖的半徑值。
系列

資料數列:單擊右側的
或
表徵圖,添加或刪除一個資料數列。 單擊
或
表徵圖配置多個資料數列的排列樣式。單擊
表徵圖,即可複製當前選中資料數列配置內容並新增一個同樣配置的資料數列。 參數
說明
映射欄位
name欄位值:資料數列的欄位值,可自訂。為空白時,系統會將組件資料中的name欄位值作為數列欄位值進行顯示。如果不為空白,您需要保證資料返回的順序。
顯示名稱:資料數列的顯示名稱,可自訂。
顏色
此系列下餅圖的顏色。
映射類型:開啟開關,資料中包含系列name值時生效,可以通過映射欄位設定特定系列的顏色;關閉開關,關閉映射欄位配置項。
其它
提示框:在預覽或發佈頁面,滑鼠懸浮或單擊扇形時出現的提示框的樣式,單擊
表徵圖可開啟或關閉提示框。
參數
說明
文本樣式
提示框中文本的樣式,包括文字字型樣式、文字粗細、字型大小和顏色。
背景框樣式
提示框的背景框樣式。
背景色:提示框的背景顏色。
內邊距:提示框的內部邊距,單位為px。
邊框
邊框粗細:提示框邊框的粗細,單位為px。
邊框顏色:提示框的邊框顏色。
資料面板

配置欄位說明
欄位 | 說明 |
name | 各扇形的類目。 |
value | 各扇形的值,決定各扇形占整個餅圖的百分比。 |
互動面板
互動說明
互動事件 | 說明 |
當點擊資料項目時 | 選中啟用,開啟組件互動功能。當單擊基本餅圖的扇形時,會觸發資料請求,拋出回調值,動態載入不同扇形的資料。預設拋出資料中的name和value值,具體配置請參見如何配置數字翻牌器組件的回調ID。 |
當點擊圖例時 | 選中啟用,開啟組件互動功能。當單擊基本餅圖的扇形時,會觸發資料請求,拋出回調值,動態載入不同扇形的資料。預設拋出資料中的name值,具體配置請參見如何配置數字翻牌器組件的回調ID。 |
藍圖編輯器互動配置
- 在畫布編輯器頁面,按右鍵組件,選擇匯出到藍圖編輯器。
- 單擊頁面左上方的
表徵圖。 在藍圖編輯器配置頁面,單擊匯入節點欄內的基本餅圖組件,在畫布中可以看到如下圖所示的基本餅圖的藍圖編輯器配置參數。

事件
事件
說明
當基本餅圖介面請求完成時
資料介面請求返回並經過過濾器處理後拋出的事件,同時拋出處理後的JSON格式的資料。具體資料樣本請參見畫布編輯器中組件右側配置面板資料頁簽的資料響應結果地區。
當基本餅圖介面請求失敗時
資料介面請求失敗時(請求失敗的情況可能是:網路問題或介面報錯等)返回並經過過濾器處理後拋出的事件,同時拋出處理後的JSON格式的資料。具體資料樣本請參見畫布編輯器中組件右側配置面板資料頁簽的資料響應結果地區。
當點擊資料項目時
當選中基本餅圖的扇形時拋出的事件,同時拋出該扇形對應的資料項目。
當點擊圖例時
當選中基本餅圖的圖例時拋出的事件,同時拋出該圖例對應的資料項目。
動作
動作
說明
請求基本餅圖介面
重新請求服務端資料,上遊資料處理節點或圖層節點拋出的資料將作為參數。例如基本餅圖配置了API資料來源為
https://api.test,傳到請求基本餅圖介面動作的資料為{ id: '1'},則最終請求介面為https://api.test?id=1。匯入基本餅圖介面
按組件繪製格式處理資料後,匯入組件,重新繪製。不需要重新請求服務端資料。具體資料樣本請參見畫布編輯器中組件右側配置面板資料頁簽的資料響應結果地區。
高亮
高亮資料項目對應的元素,參考資料樣本如下。
return { "data": {}, "options": { "style": { "stroke": "#f00", "fill": "" }, "selectMode": "single", "cancelHighlightFirst": false } }取消高亮
取消資料項目對應元素的高亮,參考資料樣本如下。
return { "data": {}, "options": { "mode": "single" } }更新群組件配置
動態更新組件的樣式配置。需要先在組件的配置面板中,單擊複製配置到剪貼簿,擷取組件配置資料。再根據需要在藍圖編輯器配置頁面的資料處理節點中更改對應樣式的欄位值。
顯示
顯示組件,參考資料樣本如下。
return{ "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }隱藏
顯示組件,參考資料樣本如下。
return{ "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }切換顯隱狀態
切換組件顯示或者隱藏,參考資料樣本如下。
return { "animationIn": { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }, "animationOut": { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" } }移動
將組件移動到指定位置,參考資料樣本如下。
return{ // 移動方式。絕對位置:to,相對定位:by。預設值:to。 "positionType": "to", // 指定位置。x座標,y座標。 "attr": { "x": 0, "y": 0 }, // 動畫方式。 "animation": { "enable": false, // 動畫延時。 "animationDuration": 1000, // 動畫曲線。可選值為:linear|easeInOutQuad|easeInOutExpo。 "animationEasing": "linear" } }