本文介紹Echarts 弦圖的圖表樣式和配置面板的功能。
圖表樣式
樣式面板
搜尋配置：單擊樣式面板右上方的搜尋配置項表徵圖
，可在搜尋配置面板中輸入您需要搜尋的配置項名稱，快速定位到該配置項，系統支援模糊比對。詳情請參見搜尋配置項。尺寸：包括組件的寬度和高度，單位為px。
定位：包括組件的橫座標和縱座標，單位為px。橫座標為組件左上方距離頁面左邊界的像素距離，縱座標為組件左上方距離頁面上邊界的像素距離。
旋轉：以組件的中心為中心點，進行旋轉，單位為度（°）。
手動輸入角度值，控制組件的旋轉角度。
單擊
表徵圖，控制組件左右翻轉樣式。單擊
表徵圖，控制組件上下翻轉樣式。
不透明度：取值範圍為0~1。為0時，圖表隱藏；為1時，圖表全部顯示。預設為1。
圖表項目
左側：元素與組件左側邊界的距離。支援以下幾種輸入：
具體像素值，例如 20。
相對於容器高寬的百分比，例如 20%。
left，center 或 right，組件會根據相應的位置自動對齊。
頂部：元素與組件上側邊界的距離。支援以下幾種輸入：
具體像素值，例如 20。
相對於容器高寬的百分比，例如 20%。
left，center 或 right，組件會根據相應的位置自動對齊。
右側：元素與組件右側邊界的距離。支援以下幾種輸入：
具體像素值，例如 20。
相對於容器高寬的百分比，例如 20%。
left，center 或 right，組件會根據相應的位置自動對齊。
底部：元素與組件下側邊界的距離。支援以下幾種輸入：
具體像素值，例如 20。
相對於容器高寬的百分比，例如 20%。
left，center 或 right，組件會根據相應的位置自動對齊。
寬度：手動輸入數值，調整元素的寬度。預設值為auto，自適應元素的寬度。
高度：手動輸入數值，調整元素的高度，預設值為auto，自適應元素的高度。
靜態：勾選後，標籤為靜態無法互動。
圖例聯動：勾選後，啟動圖例hover時的聯動。
懸浮動畫：勾選後，開啟滑鼠hover時的動畫效果。
環形布局
旋轉標籤：勾選後，文字位於圖表項目外側。去勾選後，文字懸浮於圖表上方。
滑鼠縮放&平移漫遊：勾選後，開啟滑鼠縮放&平移漫遊功能。
節點懸浮：勾選後，開啟節點懸浮功能。
標記圖形：自訂標籤圖形，可選，預設值為circle。標記類型包括 circle，rect，roundRect，triangle，diamond， pin，arrow， none，也可以配置為圖片的URL或path，詳細請參考ECharts官網。
標記旋轉角度：單擊+或-號，或手動輸入數值，修改標記圖形的旋轉角度。
元素樣式
軸線樣式
標籤
邊標籤
圖例：單擊右側的眼睛表徵圖顯示圖例樣式。
頂部：圖例與組件上側邊界的距離，預設為 auto。支援以下幾種輸入：
具體像素值，例如 20。
相對於容器高寬的百分比，例如 20%。
left，center 或 right，組件會根據相應的位置自動對齊。
右側：圖例與組件右側邊界的距離，預設為 auto。支援以下幾種輸入：
具體像素值，例如 20。
相對於容器高寬的百分比，例如 20%。
left，center 或 right，組件會根據相應的位置自動對齊。
底部：圖例與組件下側邊界的距離，預設為 auto。支援以下幾種輸入：
具體像素值，例如 20。
相對於容器高寬的百分比，例如 20%。
left，center 或 right，組件會根據相應的位置自動對齊。
寬度：手動輸入數值，調整圖例的寬度。預設值為auto，自適應圖例的寬度。
高度：手動輸入數值，調整圖例的高度，預設值為auto，自適應圖例的高度。
朝向：單擊下拉式清單，選擇圖例的布局朝向。
水平：圖例水平分布。
垂直：圖例垂直分布。
對齊：單擊下拉式清單，選擇圖例標記和文本的對齊。
自動：預設自動，根據組件的位置和朝向決定。
靠左對齊：當圖形在文字左邊時，為靠左對齊。
置中對齊：當圖例的圖形與文字重疊時，為置中對齊。
靠右對齊：當圖形在文字右邊時，為靠右對齊。
內邊距：單擊+或-號，或手動輸入數值，調整圖例內邊距，單位px，預設各方向內邊距為5。
元素間距：單擊+或-號，或手動輸入數值，調整圖例每項之間的距離。橫向布局時為水平間隔，縱向布局時為縱向間隔。
圖形寬度：單擊+或-號，或手動輸入數值，調整圖例標記的圖形寬度。
圖形高度：單擊+或-號，或手動輸入數值，調整圖例標記的圖形高度。
關閉顏色：參考顏色選取器，修改圖例關閉時的顏色。僅在預覽或發佈頁面，單擊圖例元素時，可看到效果。
文本樣式
顏色：參考顏色選取器，修改圖例文本的顏色。
字型樣式：圖例文本的字型風格。
字型粗細：圖例文本的字型粗細。
字型：圖例文本的字型系列。
字型大小：單擊+或-號，或手動輸入數值，改變圖例字型的大小。
背景色：參考顏色選取器，修改圖例的背景顏色。
邊框色：參考顏色選取器，修改圖例的邊框顏色。
邊框粗細：單擊+或-號，或手動輸入數值，調整圖例邊框的粗細。
對齊：單擊下拉式清單，選擇圖例標記和組件的對齊。包括靠左對齊、置中對齊和靠右對齊，預設為置中對齊。
提示框：單擊右側的眼睛表徵圖顯示提示框。
系列：單擊右側的
或
表徵圖，添加或刪除一個條件樣式。 單擊
或
表徵圖配置多個條件樣式的排列樣式。單擊
表徵圖，即可複製當前選中的條件樣式配置並新增一個同樣配置的條件樣式。系列名：自訂系列名稱。
系列顏色：參考顏色選取器，修改系列的顏色。
資料來源面板
欄位 | 說明 |
| 用於配置弦圖中的節點資訊。 |
| 用於配置弦圖中的關聯線資訊。 |
資料項目配置 | 說明 |
資料來源 | 組件的資料來源中通過代碼編輯或可視化編輯展示了組件所包含的資料欄位。也可以修改資料類型，靈活配置組件資料。 |
資料對應 | 當您需要自訂圖表欄位配置時，可以在資料對應模組設定不同的欄位對應內容，將這些欄位對應到組件對應的欄位上。無需修改資料來源中的欄位，就可以實現資料的即時匹配。也可以單擊 |
過濾器 | 開啟過濾器，選擇已建立的資料過濾器或建立資料過濾器，並配置資料過濾器指令碼，實現資料的篩選功能。詳情請參見管理資料過濾器。 |
資料響應結果 | 即時展示了組件所使用的資料。當組件資料來源發生變化時，資料響應結果會對應展示最新的資料。如果系統反應延遲，您可以單擊右側的 |
禁止載入態 | 勾選複選框，在組件更新和預覽資料看板時，將看不到組件初始化時的載入內容，去勾選則相反。預設為去勾選狀態。 |
受控模式 | 勾選複選框，組件初始化狀態下不請求資料，僅通過全域變數或藍圖編輯器配置的方法發起請求資料；去勾選複選框，可以使用自動更新請求資料。預設為去勾選狀態。 |
自動更新請求 | 勾選複選框，可以手動輸入輪詢的時間頻次設定動態輪詢。清除後則不會自動更新，需要手動重新整理頁面，或通過藍圖編輯器和全域變數事件來觸發請求更新資料。 |
表徵圖對欄位分別樣式配置。
表徵圖，查看資料響應結果，也可以單擊右側的
表徵圖，擷取組件的最新資料。您也可以單擊查看樣本，查看當前組件的響應結果樣本。進階面板
互動 | 說明 |
當點擊資料項目時 | 開啟開關，開啟組件互動功能。當單擊選中某個資料項目時拋出回調值，預設拋出資料中的 |
當圖例點擊時 | 開啟開關，開啟組件互動功能。當單擊某個圖例時拋出回調值，預設拋出資料中的 |
藍圖互動
單擊頁面左上方的
表徵圖，進入藍圖頁面。在圖層節點頁簽下，添加當前組件至主畫布中。
查看藍圖配置參數。
事件
事件
說明
當資料介面請求完成時
資料介面請求返回並經過過濾器處理後拋出的事件，同時拋出處理後的JSON格式的資料。具體資料樣本請參見畫布編輯器中組件右側配置面板資料來源頁簽的資料響應結果地區。
當點擊資料項目時
當單擊弦圖的資料時拋出的事件，同時拋出對應的資料項目。
當圖例點擊時
當單擊弦圖的圖例時拋出的事件，同時拋出對應的資料項目。
動作
動作
說明
請求資料介面
重新請求服務端資料，上遊資料處理節點或圖層節點拋出的資料將作為參數。例如弦圖配置了API資料來源為
https://api.test，傳到請求資料介面動作的資料為{ id: '1'}，則最終請求介面為https://api.test?id=1。匯入資料介面
按組件繪製格式處理資料後，匯入組件，重新繪製。不需要重新請求服務端資料。具體資料樣本請參見畫布編輯器中組件右側配置面板資料來源頁簽的資料響應結果地區。
顯示提示框
動作傳入資料為object類型，參數包括
dataindex（資料索引）、name（資料名）、x（橫座標位置）和y（縱座標位置）。參考資料樣本{ "dataIndex": 1, "name": "", "x": 1, "y": 1 }隱藏提示框
隱藏提示框，不需要參數。
圖例控制
動作傳入資料為object類型，參數包括
type（圖例動作類型）和name（圖例名稱）。參考資料樣本{ "type": "",//圖例動作類型包括: legendSelect, legendUnSelect, legendToggleSelect "name": "" }移動
將組件移動到指定位置，參考資料樣本。
{ // 移動方式。絕對位置：to，相對定位：by。預設值：to。 "positionType": "to", // 指定位置。x座標，y座標。 "attr": { "x": 0, "y": 0 }, // 動畫方式。 "animation": { "enable": false, // 動畫延時。 "animationDuration": 1000, // 動畫曲線。可選值為：linear|easeInOutQuad|easeInOutExpo。 "animationEasing": "linear" } }切換顯隱
切換組件顯示或者隱藏，不需要參數。
顯示
顯示組件，參考資料樣本。
{ "animationType": "",//動畫方式，可選值：fade，不填無動畫。 "animationDuration": 1000,//動畫延遲，單位ms。 "animationEasing": ""//動畫曲線 }隱藏
隱藏組件，參考資料樣本。
{ "animationType": "",//動畫方式，可選值：fade，不填無動畫。 "animationDuration": 1000,//動畫延遲，單位ms。 "animationEasing": ""//動畫曲線 }更新群組件配置
動態更新組件的樣式配置。需要先在組件的樣式面板中，單擊複製配置到剪貼簿，擷取組件配置資料。再根據需要在藍圖編輯器配置頁面的資料處理節點中更改對應樣式的欄位值。