雷達圖是常規圖表中的一種,支援自訂文本、圖形,支援多系列資料配置,能夠使用雷達圖直觀地展示多維度的類目資料對比情況。本文檔為您介紹基本雷達圖各配置項的含義,説明您快速準確地使用基本雷達圖元件。
基礎設置
width:組件在編輯器中的寬度
height:組件在編輯器中的高度
top:組件與編輯器頂部的距離
left:組件與編輯器左側的距離
雷達圖設置
指示器名稱
顯示/隱藏:是否展示指示器名稱
字型大小:指示器名稱的字體大小
顏色:指示器名稱的顏色,支持hex、rgb以及rgba格式的色值
字體粗細:指示器名稱字體的粗細
字體:指示器名稱的字體
背景顏色:指示器的背景顏色
上下內邊距:指示器的上下內邊距
左右內邊距:指示器的左右內邊距
軸線
顯示/隱藏:是否展示軸線
箭頭:軸線兩端的箭頭
軸線樣式
顏色:軸線的顏色,支持hex、rgb以及rgba格式的色值
粗細:軸線的粗細
樣式:軸線的樣式,可選實線、虛線
透明度:軸線的透明度
分割線
顯示/隱藏:是否展示分割線
分割線樣式
顏色:分割線的顏色,支持hex、rgb以及rgba格式的色值
粗細:分割線的粗細
樣式:分割線的樣式,可選實線、虛線
透明度:分割線的透明度
分割區域
顯示/隱藏:是否展示分割區域
分割區域樣式
間隔色1:奇數間隔區域顏色,支援hex、rgb以及rgba格式的色值
間隔色2:偶數間隔區域顏色,支援hex、rgb以及rgba格式的色值
透明度:分割區域的透明度
標題
顯示/隱藏:是否展示該圖表的標題
標題名稱:該圖表的標題的名稱
左邊距:標題離容器左側的距離
上邊距:標題離容器上側的距離
文本樣式
字型大小:標題的字體大小
顏色:標題的顏色,支持hex、rgb以及rgba格式的色值
字體:標題的字體
字體粗細:標題字體的粗細
提示框
顯示/隱藏:當滑鼠懸浮到圖表上的點時,是否展示其提示的資訊
觸發類型:如何觸發提示框的展示
格式:提示框的展示內容可支援自訂配置,其中{b}表示資料名、{c}表示資料值
背景顏色:提示框的背景顏色,支持hex、rgb以及rgba格式的色值
邊線顏色:提示框邊線的顏色,支持hex、rgb以及rgba格式的色值
邊線寬度:提示框邊線的寬度,單位px
內邊距:提示框的內邊距,例如:"5,5,5,5",代表上右下左邊距分別為5px、5px、5px、5px
圖例
顯示/隱藏:是否展示該表圖的圖例
左間距:圖例與容器左側的距離
頂間距:圖例與容器上側的距離
排列方向:圖例的排列方向,可選擇水準 or 垂直進行展示
圖例圖示:圖例的圖示,可選圓形、方形、三角形、菱形圖示進行展示
文本樣式
字型大小:圖例的字體大小
顏色:圖例的顏色,支持hex、rgb以及rgba格式的色值
字體:圖例的字體
字體粗細:圖例的字體粗細
資料數列
該配置項為一個陣列,可配置多個系列,編輯器將遍歷資料,使資料通過一個或多個系列配置迴圈渲染。若需要自訂某些資料為特定樣式則需要手動對資料進行排序
拐點標記
標記圖形:可選圓形、正方形、三角形、菱形、針形、箭頭
標記大小:標記圖形的大小
標記顏色:標記圖形的顏色,支援hex、rgb以及rgba格式的色值
標記透明度:標記圖形的透明度
標籤
顯示/隱藏:是否顯示標記圖形處的標籤
與標記的間距:標籤與標記圖形的間距
字型大小:標籤的字體大小
顏色:標籤的顏色,支持hex、rgb以及rgba格式的色值
字體:標籤的字體
字體粗細:標籤的字體粗細
高亮
開啟高亮:是否開啟高亮
標記顏色:高亮狀態下標記圖形的顏色,支援hex、rgb以及rgba格式的色值
標記透明度:高亮狀態下標記圖形的透明度
連接線
顏色:連接線的顏色,支持hex、rgb以及rgba格式的色值
線寬:連接線的寬度,單位px
樣式:連接線的樣式,可選實線、虛線
透明度:連接線的透明度
高亮
開啟高亮:是否開啟高亮
顏色:高亮狀態下連接線的顏色,支持hex、rgb以及rgba格式的色值
線寬:高亮狀態下連接線的寬度,單位px
樣式:高亮狀態下連接線的樣式,可選實線、虛線
透明度:高亮狀態下連接線的透明度
連接區域
顏色:連接區域的顏色,支援hex、rgb以及rgba格式的色值
透明度:連接區域的透明度
高亮
開啟高亮:是否開啟高亮
顏色:高亮狀態下連接區域的顏色,支援hex、rgb以及rgba格式的色值
透明度:高亮狀態下連接區域的透明度
return [{
indicator:[
{ name: '指標1',max: 100, min:0 },
{ name: '指標2',max: 100, min:0 },
{ name: '指標3',max: 100, min:0 },
{ name: '指標4',max: 100, min:0 },
{ name: '指標5',max: 100, min:0 },
{ name: '指標6',max: 100, min:0 }
],
data:[{
value: [ 50, 50, 50, 50, 50, 50],
name: '公司A',
}]
}]
indicator:指示器數據,用來指定雷達圖中的變數維度
name:指示器名稱
max:指示器的最大值
min:指示器的最小值
data:雷達圖數據集合
name:數據名稱
value:數據值
return [{
indicator:[
{ name: '語12文', max: 100, min:0 },
{ name: '數撒旦士大夫學', max: 100, min:0 },
{ name: '英語', max: 100, min:0 },
{ name: '物理', max: 100, min:0 },
{ name: '化學', max: 100, min:0 },
{ name: '生物', max: 100, min:0 }
],
data:[{
value: [ 70, 95, 60, 80, 30, 60],
name: '小王',
}]
}]