氣泡圖
氣泡圖是通過散點圖組件的配置轉換而來，他能使用散點來展示數據的一種圖表，支援自訂x軸、y軸以及散點的樣式，支援多系列數據配置，適用於展示不同時間下離散數據的差異。本文檔為你介紹散點圖各配置項的含義，幫助你快速準確地使用散點圖組件。
配置
基礎設置
width：組件在編輯器中的寬度
height：組件在編輯器中的高度
top：組件與編輯器頂部的距離
left：組件與編輯器左側的距離
畫布間距
頂間距：該圖表與元件邊界頂部的距離，單位為px
右間距：該圖表與元件邊界右側的距離，單位為px
底間距：該圖表與元件邊界底部的距離，單位為px
左間距：該圖表與元件邊界左側的距離，單位為px
標題
顯示/隱藏：是否展示該圖表的標題
標題名稱：該圖表的標題的名稱
左邊距：標題離容器左側的距離
上邊距：標題離容器上側的距離
文本樣式
字型大小：標題的字體大小
顏色：標題的顏色，支持hex、rgb以及rgba格式的色值
字體：標題的字體
字體粗細：標題字體的粗細
提示框
顯示/隱藏：當滑鼠懸浮到圖表上的點時，是否展示其提示的資訊
觸發類型：如何觸發提示框的展示
格式：提示方塊的展示內容可支援自訂配置，其中{a}表示系列名稱，{c}表示數值陣列
背景顏色：提示框的背景顏色，支持hex、rgb以及rgba格式的色值
邊線顏色：提示框邊線的顏色，支持hex、rgb以及rgba格式的色值
邊線寬度：提示框邊線的寬度，單位px
內邊距：提示框的內邊距，例如："5,5,5,5"，代表上右下左邊距分別為5px、5px、5px、5px
圖例
顯示/隱藏：是否展示該表圖的圖例
左間距：圖例與容器左側的距離
頂間距：圖例與容器上側的距離
排列方向：圖例的排列方向，可選擇水準 or 垂直進行展示
圖例圖示：圖例的圖示，可選圓形、方形、三角形、菱形圖示進行展示
文本樣式
字型大小：圖例的字體大小
顏色：圖例的顏色，支持hex、rgb以及rgba格式的色值
字體：圖例的字體
字體粗細：圖例的字體粗細
X軸
顯示/隱藏：是否展示該圖表的x軸
坐標軸名稱
x軸名稱：x軸的名稱
x軸名稱位置：x軸的名稱位置，可選起點處、居中、終點處
軸線間距：x軸的名稱與軸線的距離
樣式
顏色：坐標軸名稱的顏色，支持hex、rgb以及rgba格式的色值
字體大小：坐標軸名稱的字體大小
字體粗細：坐標軸名稱的字體粗細
字體：坐標軸名稱的字體
軸線
顯示/隱藏：是否展示x軸的軸線
軸線樣式
顏色：軸線的顏色，支持hex、rgb以及rgba格式的色值
樣式：軸線可選實線 or 虛線進行展示
寬度：控制軸線的粗細，單位px
刻度值
顯示/隱藏：是否展示x軸的刻度值
字型大小：刻度值的字體大小
顏色：刻度值的顏色，支持hex、rgb以及rgba格式的色值
字體：刻度值的字體
字體粗細：刻度值字體的粗細
刻度線
顯示/隱藏：是否展示x軸上的刻度線
向內朝向：控制刻度線的朝向
對齊標籤：坐標軸刻度是否和標籤對齊
刻度線樣式
顏色：刻度線的顏色，支持hex、rgb以及rgba格式的色值
線寬：刻度線的線寬，單位px
格線
顯示/隱藏：是否展示圖表區域中的格線
格線樣式
顏色：格線的顏色，支持hex、rgb以及rgba格式的色值
樣式：格線的樣式，可選實線、虛線、點進行展示
線寬：格線的線寬，單位px
Y軸
y軸的配置與x軸基本類似，具體配置應用可參照x軸
顯示/隱藏：是否展示該圖表的y軸
坐標軸名稱
y軸名稱：y軸的名稱
y軸名稱位置：y軸的名稱位置，可選起點處、居中、終點處
軸線間距：y軸的名稱與軸線的距離
樣式
顏色：坐標軸名稱的顏色，支持hex、rgb以及rgba格式的色值
字體大小：坐標軸名稱的字體大小
字體粗細：坐標軸名稱的字體粗細
字體：坐標軸名稱的字體
軸線
顯示/隱藏：是否展示y軸的軸線
軸線樣式
顏色：軸線的顏色，支持hex、rgb以及rgba格式的色值
樣式：軸線可選實線 or 虛線進行展示
寬度：控制軸線的粗細，單位px
刻度值
顯示/隱藏：是否展示y軸的刻度值
字型大小：刻度值的字體大小
顏色：刻度值的顏色，支持hex、rgb以及rgba格式的色值
字體：刻度值的字體
字體粗細：刻度值字體的粗細
刻度線
顯示/隱藏：是否展示x軸上的刻度線
向內朝向：控制刻度線的朝向
格線
顯示/隱藏：是否展示圖表區域中的格線(按照x軸的刻度進行劃分)
格線樣式
顏色：格線的顏色，支持hex、rgb以及rgba格式的色值
樣式：格線的樣式，可選實線、虛線、點進行展示
線寬：格線的線寬，單位px
資料數列
該配置項為一個陣列，可配置多個系列，編輯器將遍歷資料，使資料通過一個或多個系列配置迴圈渲染。若需要自訂某些資料為特定樣式則需要手動對資料進行排序
- 系列名：通過系列名，可自訂圖例的名稱
- 圖形：散點展示的圖形，可選圓形、正方形、三角形、菱形、針形、箭頭
圖形大小：圖形的大小
圖形樣式
圖形顏色：圖形的顏色
邊線顏色：圖形的邊線顏色
邊線寬度：圖形邊線的寬度
陰影顏色：圖形陰影的顏色
陰影大小：圖形陰影的大小，陰影越大越模糊
透明度：圖形的透明度
高亮
開啟：開啟高亮後，滑鼠懸浮至散點時，會展示高亮的配置狀態
圖形顏色：圖形的顏色
邊線顏色：圖形的邊線顏色
邊線寬度：圖形邊線的寬度
陰影顏色：圖形陰影的顏色
陰影大小：圖形陰影的大小，陰影越大越模糊
透明度：圖形的透明度
數據
return [{
points: [[5, 175], [12, 200], [18, 125], [21, 190]],
},{
points: [[25, 220], [30, 285], [31, 150], [35, 230], [37, 190]],
},{
points: [[40, 275], [44, 375], [46, 290], [51, 190], [53, 230], [55, 325], [59, 390], [62, 290], [65, 330]],
}]
- points：每一組散點的座標
