本文介紹Echarts 儀錶盤的圖表樣式和配置面板的功能。
圖表樣式
配置面板
搜尋配置：單擊配置面板右上方的搜尋配置，可在搜尋配置面板中輸入您需要搜尋的配置項名稱，快速定位到該配置項，系統支援模糊比對。詳情請參見搜尋資產配置。
- 圖表尺寸：包括組件的寬度和高度，單位為px。可單擊
表徵圖鎖定組件的寬高比，等比例修改組件的寬高。再次單擊進行解鎖，解鎖後寬高比不受限制。 - 圖表位置：包括組件的橫座標和縱座標，單位為px。橫座標為組件左上方距離頁面左邊界的像素距離，縱座標為組件左上方距離頁面上邊界的像素距離。
- 旋轉角度：以組件的中心為中心點，進行旋轉，單位為度（°）。
- 手動輸入角度值，控制組件的旋轉角度。
- 拖動
表徵圖內的黑點，控制組件的旋轉角度。 - 單擊
表徵圖，控制組件左右翻轉樣式。 - 單擊
表徵圖，控制組件上下翻轉樣式。
- 不透明度：取值範圍為0~1。為0時，圖表隱藏；為1時，圖表全部顯示。預設為1。
圖表：單擊+或-號，或手動輸入數值，調整儀錶盤的水平中心和垂直中心，單位為%。
提示框：單擊右側的眼睛表徵圖顯示提示框。
系列
名稱：設定儀錶盤的名稱。
半徑：設定儀錶盤的半徑，即相對於容器高寬中較小一項的百分比。
起始角度：單擊+或-號，或手動輸入數值，修改儀錶盤的起始角度。
終點角度：單擊+或-號，或手動輸入數值，修改儀錶盤的終點角度。
順時針：勾選中，儀錶盤按照順時針方向升序展示。
最小值：單擊+或-號，或手動輸入數值，修改儀錶盤的最小值。
最大值：單擊+或-號，或手動輸入數值，修改儀錶盤的最大值。
分割段數：單擊+或-號，或手動輸入數值，修改儀錶盤的分割段數。
靜態：勾選後，儀錶盤為靜態無法互動。
軸線
軸線樣式
軸線分段：單擊右側的
或
表徵圖，添加或刪除一個分段樣式。 單擊
或
表徵圖配置多個分段樣式的排列樣式。單擊
表徵圖，即可複製當前選中的分段樣式配置並新增一個同樣配置的分段樣式。位置：單擊+或-號，滑動或手動輸入數值，修改儀錶盤的分段顯示位置。
顏色：參考顏色選取器說明，修改分段的顏色。
寬度：單擊+或-號，或手動輸入數值，修改分段的寬度。
透明度：單擊+或-號，或手動輸入數值，修改分段的透明度。範圍為 [0,1]。
分割線：單擊右側的眼睛表徵圖顯示分割線。
長度：單擊+或-號，或手動輸入數值，修改分割線的長度。
軸線樣式
顏色：參考顏色選取器說明，修改分割線的顏色。
寬度：單擊+或-號，或手動輸入數值，修改分割線的線寬。
類型：分割線軸線的類型。可選，包括實線和虛線。
透明度：單擊+或-號，或手動輸入數值，修改分割線的透明度，範圍為 [0,1]。
刻度：單擊右側的眼睛表徵圖顯示刻度。
分割段數：單擊+或-號，或手動輸入數值，修改座標軸刻度的顯示間隔，在類目軸中有效。
長度：單擊+或-號，或手動輸入數值，修改座標軸刻度的長度。
軸線樣式
顏色：參考顏色選取器說明，修改刻度標記的顏色。
寬度：單擊+或-號，或手動輸入數值，修改刻度標記的寬度。
類型：刻度標記的類型。可選，包括實線和虛線。
透明度：單擊+或-號，或手動輸入數值，修改刻度標記的透明度。範圍為 [0,1]。
刻度標籤：單擊右側的眼睛表徵圖顯示刻度標籤。
距離：刻度標籤與軸線之間的距離。
文本樣式
顏色：參考顏色選取器說明，修改刻度標籤的顏色。
字型樣式：刻度標籤文字的字型風格。
字型粗細：刻度標籤文字的字型粗細。
字型：刻度標籤文字的字型系列。
字型大小：刻度標籤文字的字型大小。
儀錶盤指標：單擊右側的眼睛表徵圖顯示儀錶盤指標。
長度：設定儀錶盤指標的長度。
寬度：設定儀錶盤指標的寬度。
元素樣式
普通項
重點項
標題：單擊右側的眼睛表徵圖顯示標題。
水平位移：單擊+或-號，或手動輸入數值，修改標題的水平位移，範圍為[-200~200]。
垂直位移：單擊+或-號，或手動輸入數值，修改標題的垂直位移，範圍為[-200~200]。
文本樣式
顏色：參考顏色選取器說明，修改標題文本的顏色。
字型樣式：標題文本的字型風格。
字型粗細：標題文本的字型粗細。
字型：標題文本的字型系列。
字型大小：標題文本的字型大小。
詳情：單擊右側的眼睛表徵圖顯示標題。
單位：設定詳情資訊的單位。
寬度：單擊+或-號，或手動輸入數值，修改詳情的寬度。
高度：單擊+或-號，或手動輸入數值，修改詳情的高度。
水平位移：單擊+或-號，或手動輸入數值，修改詳情的水平位移，範圍為[-200~200]。
垂直位移：單擊+或-號，或手動輸入數值，修改詳情的垂直位移，範圍為[-200~200]。
背景色：參考顏色選取器說明，修改詳情的背景顏色，預設透明。
邊框粗細：單擊+或-號，或手動輸入數值，調整詳情邊框粗細。
邊框色：參考顏色選取器說明，修改詳情的邊框顏色，預設透明。
文本樣式
顏色：參考顏色選取器說明，修改詳情文本的顏色。
字型樣式：詳情文本的字型風格。
字型粗細：詳情文本的字型粗細。
字型：詳情文本的字型系列。
字型大小：詳情文本的字型大小。
動畫：勾選後，開啟動畫效果。
動畫閾值：單擊+或-號，或手動輸入數值，修改動畫的閾值，單位為毫秒。當單個系列顯示的圖形數量大於您設定的閾值後，系統會關閉動畫效果，防止組件崩潰。
動畫時間長度：單擊+或-號，或手動輸入數值，修改初始動畫的時間長度，單位為毫秒。
緩動效果：單擊下拉框，選擇資料更新動畫的緩動效果，預設為cubicOut。
資料面板
配置欄位說明
欄位 | 說明 |
| 用於配置儀錶盤中每部分的名稱。 |
| 用於配置儀錶盤中每部分的值。 |
互動面板
該組件沒有互動事件。
藍圖編輯器互動配置
在畫布編輯器頁面，按右鍵組件，選擇匯出到藍圖編輯器。
單擊頁面左上方的
表徵圖。在藍圖編輯器配置頁面，單擊匯入節點欄內的儀錶盤組件，在畫布中可以看到如下圖所示的儀錶盤的藍圖編輯器配置參數。
事件
事件
說明
當資料介面請求完成時
資料介面請求返回並經過過濾器處理後拋出的事件，同時拋出處理後的JSON格式的資料。具體資料樣本請參見畫布編輯器中組件右側配置面板資料頁簽的資料響應結果地區。
當資料介面請求失敗時
資料介面請求失敗時（請求失敗的情況可能是：網路問題或介面報錯等）返回並經過過濾器處理後拋出的事件，同時拋出處理後的JSON格式的資料。具體資料樣本請參見畫布編輯器中組件右側配置面板資料頁簽的資料響應結果地區。
動作
動作
說明
請求資料介面
重新請求服務端資料，上遊資料處理節點或圖層節點拋出的資料將作為參數。例如儀錶盤配置了API資料來源為
https://api.test，傳到請求資料介面動作的資料為{ id: '1'}，則最終請求介面為https://api.test?id=1。匯入資料介面
按組件繪製格式處理資料後，匯入組件，重新繪製。不需要重新請求服務端資料。具體資料樣本請參見畫布編輯器中組件右側配置面板資料頁簽的資料響應結果地區。
更新群組件配置
動態更新組件的樣式配置。需要先在組件的配置面板中，單擊複製配置到剪貼簿，擷取組件配置資料。再根據需要在藍圖編輯器配置頁面的資料處理節點中更改對應樣式的欄位值。
顯示
顯示組件，參考資料樣本如下。
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" } }