本文介紹泡泡圖的圖表樣式和配置面板的功能。
圖表樣式
泡泡圖是散佈圖的一種，與散佈圖相比，泡泡圖使用氣泡來展示資料，且可以自訂氣泡的大小，能夠直觀生動地展示多個時間下離散資料的差異。
配置面板
搜尋配置：單擊配置面板右上方的搜尋配置，可在搜尋配置面板中輸入您需要搜尋的配置項名稱，快速定位到該配置項，系統支援模糊比對。詳情請參見搜尋資產配置。
- 圖表尺寸：包括組件的寬度和高度，單位為px。可單擊
表徵圖鎖定組件的寬高比，等比例修改組件的寬高。再次單擊進行解鎖，解鎖後寬高比不受限制。 - 圖表位置：包括組件的橫座標和縱座標，單位為px。橫座標為組件左上方距離頁面左邊界的像素距離，縱座標為組件左上方距離頁面上邊界的像素距離。
- 旋轉角度：以組件的中心為中心點，進行旋轉，單位為度（°）。
- 手動輸入角度值，控制組件的旋轉角度。
- 拖動
表徵圖內的黑點，控制組件的旋轉角度。 - 單擊
表徵圖，控制組件左右翻轉樣式。 - 單擊
表徵圖，控制組件上下翻轉樣式。
- 不透明度：取值範圍為0~1。為0時，圖表隱藏；為1時，圖表全部顯示。預設為1。
全域樣式
字型：組件中所有文本的字型系列，預設為微軟雅黑。
邊距
頂部：泡泡圖與組件上邊界的距離，單位為px。
底部：泡泡圖與組件下邊界的距離，單位為px。
左側：泡泡圖與組件左側邊界的距離，單位為px。
右側：泡泡圖與組件右側邊界的距離，單位為px。
最多載入：資料載入限制，系統最多載入您輸入的資料記錄條數進行布局、繪製與計算，以保證可視化應用展示效果。
x軸：組件的x軸樣式，可單擊
表徵圖控制x軸的顯隱。
文本
顏色：x軸文本的顏色。
字型大小：x軸文本的字型大小，取值範圍為10~100。
字型粗細：x軸文本字型的粗細。
軸標籤：x軸的標籤樣式，可單擊
表徵圖控制標籤的顯隱。 說明資料格式與設定格式不統一會導致組件顯示異常。
資料種類：x軸標籤資料的類型，可選：
數值型：支援整數、浮點數等數實值型別的資料。
類目型：支援字元、字串等類目類型的資料。
時間型：時間類型的資料，需要配置資料格式。
資料格式：資料的顯示格式，僅對時間型的資料有效，請參照
%Y/%m/%d %H:%M:%S的格式進行配置。顯示格式：期望顯示的資料格式，僅對時間型和數值型的資料有效。時間請參照
%m/%d%Y%H:%M:%S，整數參照d，浮點參照.1f。最大值：x軸的最大值，支援自訂輸入。預設為auto，系統會根據資料最大值、最小值以及標籤數量自動計算匹配。
最小值：x軸的最小值，支援自訂輸入。預設為auto，系統會根據資料最大值、最小值以及標籤數量自動計算匹配。
單位：x軸單位。
數量：x軸標籤的數量。
角度：x軸標籤的角度，可選：水平、斜角、垂直。
軸線：軸線的顏色及顯示隱藏設定。
網路線：網格線的顏色及顯示隱藏設定。
y軸
配置與x軸類似，詳見x軸章節。
氣泡：配置氣泡的顯示大小。
按y軸映射
開啟時，氣泡半徑的最大最小值按資料中的y欄位的最大最小值對應。
關閉時，需自訂最小最大值的區間範圍來控制氣泡的大小。
最小值：氣泡的最小值。系統會使用資料中的r欄位值減去您設定的值，如果結果為負數則不顯示該氣泡，如果結果為正數則顯示該氣泡，且氣泡半徑為：（r值-最小值）/最大值*r值。
最大值：氣泡的最大值。系統會使用資料中的r欄位值減去最小值，如果結果為負數則不顯示該氣泡，如果結果為正數則顯示該氣泡，且氣泡半徑為：（r值-最小值）/最大值*r值。
圖例：圖表的圖例樣式，可單擊
表徵圖控製圖例的顯隱。
文本
字型大小：圖例文本的大小。
顏色：圖例文本的顏色。
字型粗細：圖例文本字型的粗細。
布局
間距
左右間距：相鄰圖例之間左右兩側的距離，僅當有多個系列時該配置項才有效。
上下間距：圖例與組件上下邊界的距離。
位置：圖例相對於組件起始座標的位置，可選。
提示框：在預覽或發佈頁面，滑鼠懸浮或單擊氣泡時出現的提示框的樣式。
觸發類型：提示框被觸發的目標類型，可選，包括資料項目和座標軸。
觸發動作：提示框被觸發的動作，可選，包括懸浮和點擊。
消失延遲時間：當不滿足觸發條件時，提示框就會消失，此配置項設定提示框消失前延遲的時間，單位為ms。
背景框樣式：提示框的背景框樣式。
背景色：提示框的背景顏色。
自訂背景框尺寸：提示框的寬度和高度，單位為px。
內邊距：提示框的內部邊距，單位為px。
水平位移量：提示框相對滑鼠箭頭位置的水平位移量，單位為px。
垂直位移量：提示框相對滑鼠箭頭位置的垂直位移量，單位為px。
邊框顏色：提示框的邊框顏色。
邊框粗細：提示框邊框的粗細，單位為px。
文本樣式：提示框中文本的樣式。
顏色：提示框文本的顏色。
字型：提示框文本的字型系列。
字型大小：提示框文本的大小。
字型粗細：提示框文本的字型粗細。
座標軸指標：當提示框的觸發類型為座標軸，且執行觸發動作時，展示的座標軸指標的樣式。
類型：座標軸指標的類型，目前只支援直線指標。
指示線樣式：指示線顏色、寬度和類型（類型可選，包括實線、虛線和點線）。
資料數列：單擊右側的
或
表徵圖，添加或刪除一個資料數列。 
系列名：資料數列的命名，可自訂。為空白時，系統會將組件資料中的s欄位值作為系列名進行顯示。如果不為空白，您需要保證資料返回的順序。
填充色：此系列下氣泡的填充顏色，可參見顏色選取器說明進行修改，支援顏色填充和漸層填充。
邊框色：此系列下氣泡的邊框顏色。
動畫：圖表的動畫效果樣式，可單擊
表徵圖開啟或關閉動畫效果。
初始動畫時間長度：組件第一次渲染動畫的時間長度，單位為ms。
緩動效果：動畫的緩動效果，系統提供多種常見的動畫緩動效果供您選擇。
更新動畫時間長度：組件資料更新時的動畫時間長度，單位為ms。
資料面板
x：每個氣泡的類目，即x軸的值。該欄位類型與格式須與配置項中x軸的標籤資料種類與格式保持一致。
y：每個氣泡的值，即y軸的值。
r：每個氣泡的半徑。
s：（可選）系列值，當配置項資料數列中系列名為空白時，使用該欄位值。
互動面板
選中啟用，開啟組件互動功能。當單擊泡泡圖的氣泡時，會觸發資料請求，拋出回調值，動態載入不同氣泡的資料。預設拋出資料中的x、y和s值，具體配置請參見如何配置數字翻牌器組件的回調ID。
藍圖編輯器互動配置
在畫布編輯器頁面，按右鍵組件，選擇匯出到藍圖編輯器。
單擊頁面左上方的
表徵圖。在藍圖編輯器配置頁面，單擊匯入節點欄內的泡泡圖組件，在畫布中可以看到如下圖所示的泡泡圖的藍圖編輯器配置參數。
事件
事件
說明
當泡泡圖介面請求完成時
資料介面請求返回並經過過濾器處理後拋出的事件，同時拋出處理後的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" } }