本文介紹Echarts 大規模散佈圖的圖表樣式和配置面板的功能。
圖表樣式
配置面板
搜尋配置：單擊配置面板右上方的搜尋配置，可在搜尋配置面板中輸入您需要搜尋的配置項名稱，快速定位到該配置項，系統支援模糊比對。詳情請參見搜尋資產配置。
- 圖表尺寸：包括組件的寬度和高度，單位為px。可單擊
表徵圖鎖定組件的寬高比，等比例修改組件的寬高。再次單擊進行解鎖，解鎖後寬高比不受限制。 - 圖表位置：包括組件的橫座標和縱座標，單位為px。橫座標為組件左上方距離頁面左邊界的像素距離，縱座標為組件左上方距離頁面上邊界的像素距離。
- 旋轉角度：以組件的中心為中心點，進行旋轉，單位為度（°）。
- 手動輸入角度值，控制組件的旋轉角度。
- 拖動
表徵圖內的黑點，控制組件的旋轉角度。 - 單擊
表徵圖，控制組件左右翻轉樣式。 - 單擊
表徵圖，控制組件上下翻轉樣式。
- 不透明度：取值範圍為0~1。為0時，圖表隱藏；為1時，圖表全部顯示。預設為1。
圖例：單擊右側的眼睛表徵圖顯示圖例樣式。
頂部：圖例與組件上側邊界的距離，預設為 auto。支援以下幾種輸入：
具體像素值，例如 20。
相對於容器高寬的百分比，例如 20%。
left，center 或 right，組件會根據相應的位置自動對齊。
右側：圖例與組件右側邊界的距離，預設為 auto。支援以下幾種輸入：
具體像素值，例如 20。
相對於容器高寬的百分比，例如 20%。
left，center 或 right，組件會根據相應的位置自動對齊。
底部：圖例與組件下側邊界的距離，預設為 auto。支援以下幾種輸入：
具體像素值，例如 20。
相對於容器高寬的百分比，例如 20%。
left，center 或 right，組件會根據相應的位置自動對齊。
寬度：手動輸入數值，調整圖例的寬度。預設值為auto，自適應圖例的寬度。
高度：手動輸入數值，調整圖例的高度，預設值為auto，自適應圖例的高度。
朝向：單擊下拉式清單，選擇圖例的布局朝向。
水平：圖例水平分布。
垂直：圖例垂直分布。
對齊：單擊下拉式清單，選擇圖例標記和文本的對齊。
自動：預設自動，根據組件的位置和朝向決定。
靠左對齊：當圖形在文字左邊時，為靠左對齊。
置中對齊：當圖例的圖形與文字重疊時，為置中對齊。
靠右對齊：當圖形在文字右邊時，為靠右對齊。
內邊距：單擊+或-號，或手動輸入數值，調整圖例內邊距，單位px，預設各方向內邊距為5。
元素間距：單擊+或-號，或手動輸入數值，調整圖例每項之間的距離。橫向布局時為水平間隔，縱向布局時為縱向間隔。
圖形寬度：單擊+或-號，或手動輸入數值，調整圖例標記的圖形寬度。
圖形高度：單擊+或-號，或手動輸入數值，調整圖例標記的圖形高度。
選擇模式：單擊右側的眼睛表徵圖顯示選擇模式。
關閉顏色：參考顏色選取器說明，修改圖例關閉時的顏色。僅在預覽或發佈頁面，單擊圖例元素時，可看到效果。
文本樣式
顏色：參考顏色選取器說明，修改圖例文本的顏色。
字型樣式：圖例文本的字型風格。
字型粗細：圖例文本的字型粗細。
字型：圖例文本的字型系列。
字型大小：單擊+或-號，或手動輸入數值，改變圖例字型的大小。
背景色：參考顏色選取器說明，修改圖例的背景顏色。
邊框色：參考顏色選取器說明，修改圖例的邊框顏色。
邊框粗細：單擊+或-號，或手動輸入數值，調整圖例邊框的粗細。
對齊：圖例的對齊，可選，預設為置中對齊。也可以為靠左對齊或靠右對齊。
網格：單擊右側的眼睛表徵圖顯示網格樣式。
左側：網格與組件左側邊界的距離，預設為 3%。支援以下幾種輸入：
具體像素值，例如 20。
相對於容器高寬的百分比，例如 20%。
left，center 或 right，組件會根據相應的位置自動對齊。
頂部：網格與組件上側邊界的距離，預設為 60。支援以下幾種輸入：
具體像素值，例如 20。
相對於容器高寬的百分比，例如 20%。
left，center 或 right，組件會根據相應的位置自動對齊。
右側：網格與組件右側邊界的距離，預設為 4%。支援以下幾種輸入：
具體像素值，例如 20。
相對於容器高寬的百分比，例如 20%。
left，center 或 right，組件會根據相應的位置自動對齊。
底部：網格與組件下側邊界的距離，預設為 3%。支援以下幾種輸入：
具體像素值，例如 20。
相對於容器高寬的百分比，例如 20%。
left，center 或 right，組件會根據相應的位置自動對齊。
寬度：網格的寬度，值預設值為 auto，寬度自適應。
高度：網格的高度，值預設值為 auto，高度自適應。
調適型配置：勾選後，柱狀圖進行調適型配置；去勾選，柱狀圖根據您配置的樣式進行布局。
背景色：參考顏色選取器說明，修改網格的背景顏色，預設透明。
邊框色：參考顏色選取器說明，修改網格的邊框顏色，預設透明。
邊框粗細：單擊+或-號，或手動輸入數值，調整網格邊框粗細。
x軸：單擊右側的眼睛表徵圖顯示x軸樣式。
位移：x軸相對於預設位置的位移，預設為0。
類型：座標軸類型，可選：
value：數值軸，適用於連續資料。
category：類目軸，適用於離散的類目資料，為該類型時必須在資料面板設定類目資料。
time：時間軸，適用於連續的時序資料，與數值軸相比時間軸帶有時間的格式化，在刻度計算上也有所不同，例如會根據跨度的範圍來決定使用月，星期，日還是小時範圍的刻度。
log： 對數軸，適用於對數資料。
名稱：自訂x軸名稱。
名稱位置：x軸名稱的位置，可選，包括起點、置中或終點，預設值為終點。
名稱樣式
顏色：參考顏色選取器說明，修改x軸名稱文本的顏色。
字型樣式：x軸名稱的字型風格。
字型粗細：x軸名稱的字型粗細。
字型：x軸名稱的字型系列。
字型大小：單擊+或-號，或手動輸入數值，修改x軸名稱的字型大小。
名稱間隔：單擊+或-號，或手動輸入數值，修改座標軸名稱與軸線之間的距離。
名稱旋轉：單擊+或-號，或手動輸入數值，修改座標軸名稱旋轉的角度值。
反向：勾選後，座標軸反向顯示；去勾選，座標軸正向顯示。
留白：勾選後，座標軸兩側留白；去勾選，座標軸兩側不留白。
最小值：座標軸刻度最小值，預設值為資料最小值，表示取資料在該軸上的最小值作為最小刻度。不設定時會自動計算最小值保證座標軸刻度的均勻分布。
最大值：座標軸刻度最大值，預設值為資料最大值，表示取資料在該軸上的最大值作為最大刻度。不設定時會自動計算最大值保證座標軸刻度的均勻分布。
自動調整：勾選後，座標刻度不會強制包含零刻度。只在數值軸中有效，設定了最大值和最小值後該配置項無效。
分割段數：單擊+或-號，或手動輸入數值，設定座標軸的分割段數。不設定時會自動計算最小值保證座標軸刻度的均勻分布。需要注意的是這個分割段數只是個預估值，最後實際顯示的段數會在這個基礎上根據分割後座標軸刻度顯示的易讀程度作調整。在類目軸中無效。
最小間隔大小：單擊+或-號，或手動輸入數值，設定座標軸最小間隔大小。例如可以設定成1保證座標軸分割刻度顯示成整數。只在數值軸或時間軸中有效。
對數軸底數：對數軸的底數，只在對數軸中有效。
靜態：勾選後，座標軸為靜態無法互動。
軸線：單擊右側的眼睛表徵圖顯示x軸軸線。
在零上：x 軸或者 y 軸的軸線是否在另一個軸的 0 刻度上，只有在另一個軸為數值軸且包含 0 刻度時有效。
軸線樣式
顏色：參考顏色選取器說明，修改x軸軸線的顏色。
寬度：單擊+或-號，或手動輸入數值，修改x軸軸線的寬度。
類型：x軸分割線軸線的類型。可選，包括實線和虛線。
透明度：單擊+或-號，或手動輸入數值，修改x軸軸線的透明度。範圍為 [0,1]。
刻度：單擊右側的眼睛表徵圖顯示x軸刻度。
和標籤對齊：勾選後，刻度標記和標籤對齊。類目軸中在勾選了留白後有效。
分割間隔：單擊+或-號，或手動輸入數值，修改座標軸刻度的顯示間隔，在類目軸中有效。
內部：勾選後，座標軸刻度朝內；去勾選，座標軸刻度朝外。
長度：單擊+或-號，或手動輸入數值，修改座標軸刻度的長度。
軸線樣式
顏色：參考顏色選取器說明，修改刻度標記的顏色。
寬度：單擊+或-號，或手動輸入數值，修改刻度標記的寬度。
類型：x軸分割線軸線的類型。可選，包括實線和虛線。
透明度：單擊+或-號，或手動輸入數值，修改刻度標記的透明度。範圍為 [0,1]。
刻度標籤：單擊右側的眼睛表徵圖顯示x軸刻度標籤。
分割間隔：座標軸刻度標籤的顯示間隔，在類目軸中有效，預設會採用標籤不重疊的策略間隔顯示標籤。可以設定成 0 強制顯示所有標籤。如果設定為 1，表示隔一個標籤顯示一個標籤，如果值為 2，表示隔兩個標籤顯示一個標籤，以此類推。
內部：勾選後，座標軸刻度標籤朝內；去勾選，座標軸刻度標籤朝外。
旋轉：刻度標籤旋轉的角度，在類目軸的類目標籤顯示不下的時候可以通過旋轉防止標籤之間重疊。旋轉的角度從 -90 度到 90 度。
外間距：刻度標籤與軸線之間的距離。
顯示最小標籤：勾選後，顯示最小的刻度標籤。預設自動判定，即如果標籤重疊，不會顯示最小的刻度標籤。
顯示最大標籤：勾選後，顯示最大的刻度標籤。預設自動判定，即如果標籤重疊，不會顯示最大的刻度標籤。
文本樣式
顏色：參考顏色選取器說明，修改座標軸刻度標籤的顏色。
字型樣式：座標軸刻度標籤文字的字型風格。
字型粗細：座標軸刻度標籤文字的字型粗細。
字型：座標軸刻度標籤文字的字型系列。
字型大小：座標軸刻度標籤文字的字型大小。
對齊：座標軸刻度標籤文字水平對齊，預設為自動，可選：
自動
靠左對齊
置中對齊
靠右對齊
對齊：可選，支援頂部對齊、置中對齊和底部對齊。
分割線：單擊右側的眼睛表徵圖顯示分割線。
分割間隔：單擊+或-號，或手動輸入數值，修改座標軸分隔線的顯示間隔，在類目軸中有效，預設會採用分割線不重疊的策略間隔顯示分割線。可以設定成 0 強制顯示所有分割線。如果設定為 1，表示隔一個分割線顯示一個分割線，如果值為 2，表示隔兩個分割線顯示一個分割線，以此類推。
軸線樣式
寬度：單擊+或-號，或手動輸入數值，修改x軸分割線的線寬。
類型：x軸分割線軸線的類型。可選，包括實線和虛線。
透明度：單擊+或-號，或手動輸入數值，修改x軸分割線的透明度，範圍為 [0,1]。
分割地區：單擊右側的眼睛表徵圖顯示分割地區。
分割間隔：單擊+或-號，或手動輸入數值，修改座標軸分隔地區的顯示間隔，在類目軸中有效，預設會採用分割地區不重疊的策略間隔顯示分割地區。可以設定成 0 強制顯示所有分割地區。如果設定為 1，表示隔一個分割地區顯示一個分割地區，如果值為 2，表示隔兩個分割地區顯示一個分割地區，以此類推。
地區樣式
透明度：單擊+或-號，或手動輸入數值，修改分割地區的透明度，範圍為 [0,1]。
y軸：請參考x軸樣式進行配置。
提示框：單擊右側的眼睛表徵圖顯示提示框。
系列：單擊右側的
或
表徵圖，添加或刪除一個條件樣式。 單擊
或
表徵圖配置多個條件樣式的排列樣式。單擊
表徵圖，即可複製當前選中的條件樣式配置並新增一個同樣配置的條件樣式。
名稱：自訂系列名稱，需要與資料中的s欄位值配合使用。
極座標索引：使用的極座標系的索引，預設為 0，在單個圖表執行個體中存在多個極座標系的時候有用。
geo索引：使用的地理座標系的索引，預設為 0，在單個圖表執行個體中存在多個地理座標系的時候有用。
calendarIndex：使用的日曆座標系的索引，預設為 0，在單個圖表執行個體中存在多個日曆座標系的時候有用。
懸浮動畫：勾選後，開啟滑鼠hover時的動畫效果。
圖例聯動高亮：勾選後，啟動圖例hover時的聯動高亮。
標記圖形：自訂標籤圖形，預設值為圓形。標記類型包括 無，圓形，矩形，圓角矩形，三角形，菱形， 針型和箭頭型 ，詳細請參考ECharts官網。
標記尺寸：單擊+或-號，或手動輸入數值，修改標記圖形的大小。
標記旋轉角度：單擊+或-號，或手動輸入數值，修改標記圖形的旋轉角度。
大規模最佳化：是否開啟巨量資料量最佳化，在資料圖形特別多而出現卡頓時候可以開啟。開啟後配合繪製最佳化閾值配置項，在資料量大於指定閾值的時候對繪製進行最佳化。但是最佳化後不能自訂設定單個資料項目的樣式。
繪製最佳化閾值：繪製最佳化的閾值，預設為2000。
標籤
元素樣式
普通項
重點項
靜態：勾選後，該系列不響應和觸發滑鼠事件。
動畫：勾選後，開啟動畫效果。
資料面板
配置欄位說明
欄位 | 說明 |
| 用於配置散佈圖中每個x軸的類目，即x軸的值。 |
| 用於配置散佈圖中每個點的值。 |
| （可選） 系列值，與樣式面板中的系列配置項配合使用。 |
配置項 | 說明 |
受控模式 | 開啟開關，資產初始化狀態下不請求資料，僅通過回調ID或藍圖編輯器配置的方法發起請求資料；關閉開關，可以使用自動更新請求資料。開關預設為關閉狀態。 |
自動更新請求 | 選中後可以設定動態輪詢，還可以手動輸入輪詢的時間頻次。取消選中後則不會自動更新，需要手動重新整理頁面，或通過藍圖編輯器和回調ID事件來觸發請求更新資料。 |
資料來源 | 單擊配置資料來源，可在設定資料來源面板中修改資料來源類型和資料查詢代碼、預覽資料來源返回結果以及查看資料響應結果，詳情請參見配置資產資料。 |
資料過濾器 | 資料過濾器提供資料結構轉換、篩選和一些簡單的計算功能。單擊添加過濾器，可在設定資料來源面板配置資料過濾器指令碼，詳情請參見過濾器使用說明。 |
資料響應結果 | 展示資料請求的響應結果。當資料來源發生改變時，可單擊右側的 |
表徵圖，即時查看資料響應結果。互動面板
互動說明
互動 | 說明 |
當點擊資料項目時 | 選中啟用，開啟組件互動功能。大規模散佈圖組件擁有互動配置，當單擊選中某個資料項目時拋出回調值，預設拋出資料中的x和y欄位。具體配置請參見如何配置數字翻牌器組件的回調ID。 |
當圖例點擊時 | 選中啟用，開啟組件互動功能。大規模散佈圖組件擁有互動配置，當單擊某個圖例時拋出回調值，預設拋出資料中的selected欄位。具體配置請參見如何配置數字翻牌器組件的回調ID。 |
藍圖編輯器互動配置
在畫布編輯器頁面，按右鍵組件，選擇匯出到藍圖編輯器。
單擊頁面左上方的
表徵圖。在藍圖編輯器配置頁面，單擊匯入節點欄內的大規模散佈圖組件，在畫布中可以看到如下圖所示的大規模散佈圖的藍圖編輯器配置參數。
事件
事件
說明
當資料介面請求完成時
資料介面請求返回並經過過濾器處理後拋出的事件，同時拋出處理後的JSON格式的資料。具體資料樣本請參見畫布編輯器中組件右側配置面板資料頁簽的資料響應結果地區。
當資料介面請求失敗時
資料介面請求失敗時（請求失敗的情況可能是：網路問題或介面報錯等）返回並經過過濾器處理後拋出的事件，同時拋出處理後的JSON格式的資料。具體資料樣本請參見畫布編輯器中組件右側配置面板資料頁簽的資料響應結果地區。
當點擊資料項目時
當單擊大規模散佈圖的點時拋出的事件，同時拋出該點對應的資料項目。
當圖例點擊時
當單擊大規模散佈圖的圖例時拋出的事件，同時拋出該圖例對應的資料項目。
動作
動作
說明
請求資料介面
重新請求服務端資料，上遊資料處理節點或圖層節點拋出的資料將作為參數。例如大規模散佈圖配置了API資料來源為
https://api.test，傳到請求資料介面動作的資料為{ id: '1'}，則最終請求介面為https://api.test?id=1。匯入資料介面
按組件繪製格式處理資料後，匯入組件，重新繪製。不需要重新請求服務端資料。具體資料樣本請參見畫布編輯器中組件右側配置面板資料頁簽的資料響應結果地區。
高亮顯示
動作傳入資料為object類型，參數包括
seriesName（系列名）、seriesIndex（系列索引）、dataIndex（資料索引）和name（資料名）。資料樣本：{ "seriesName": "", "seriesIndex": 1, "dataIndex": 1, "name": "" }取消高亮
動作傳入資料為object類型，參數包括
seriesName（系列名）、seriesIndex（系列索引）、dataIndex（資料索引）和name（資料名）。資料樣本：{ "seriesName": "", "seriesIndex": 1, "dataIndex": 1, "name": "" }顯示提示框
動作傳入資料為object類型，參數包括
dataindex（資料索引）、name（資料名）、x（橫座標位置）和y（縱座標位置）。資料樣本：{ "dataIndex": 1, "name": "", "x": 1, "y": 1 }隱藏提示框
隱藏提示框，不需要參數。
圖例控制
動作傳入資料為object類型，參數包括
type（圖例動作類型）和name（圖例名稱）。資料樣本：{ "type": "legendToggleSelect", "name": "" }更新群組件配置
動態更新組件的樣式配置。需要先在組件的配置面板中，單擊複製配置到剪貼簿，擷取組件配置資料。再根據需要在藍圖編輯器配置頁面的資料處理節點中更改對應樣式的欄位值。
顯示
顯示組件，參考資料樣本如下。
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" } }