當同時評估多個定性或定量指標上的複雜績效輪廓時，雷達圖（或稱蜘蛛網圖）是一種理想的可視化工具。透過將多個特徵尺度沿著從中心點發出的徑向軸線排列，雷達圖可呈現多維度比較為明顯的多邊形形狀。這使得它們非常適合用於技能評估、供應商評估評分卡、產品功能基準或球員績效輪廓。
雷達圖的運作原理
在 Apache ECharts 中，雷達圖依賴於專用的雷達設定區塊來定義徑向軸線，稱為指標鍵。系列物件設定type: 'radar'，並對應到每個已宣告指標尺度的數值陣列。
1. 基本設定
要建立基本的雷達圖，請在雷達.指標內定義您的維度門檻，並在系列資料中傳遞數值陣列：
ECharts
Edit ECharts in VPasCode
option = {
tooltip: {
trigger: 'item'
},
legend: {
data: ['分配預算', '實際支出']
},
radar: {
indicator: [
{ name: '銷售', max: 6500 },
{ name: '行政', max: 16000 },
{ name: '資訊科技', max: 30000 },
{ name: '客戶支援', max: 38000 },
{ name: '開發', max: 52000 },
{ name: '行銷', max: 25000 }
]
},
series: [
{
name: '預算對比支出',
type: 'radar',
data: [
{
value: [4200, 3000, 20000, 35000, 50000, 18000],
name: '分配預算'
},
{
value: [5000, 14000, 28000, 26000, 42000, 21000],
name: '實際支出'
}
]
}
]
};
進階結構技術
雷達圖可透過填滿區域的多邊形、圓形網格形狀或獨特的色彩主題來美化，以使輪廓重疊部分更易於閱讀。
1. 使用自訂網格形狀的多邊形區域填滿
將背景網格從多邊形切換為圓形，並套用透明區域填滿，可突顯每個指標輪廓的整體輪廓：
ECharts
Edit ECharts in VPasCode
option = {
tooltip: {
trigger: 'item'
},
legend: {
top: '5%',
data: ['型號 A', '型號 B']
},
radar: {
shape: 'circle', // 圓形背景網格
indicator: [
{ name: '電池壽命', max: 100 },
{ name: '處理效能', max: 100 },
{ name: '製造品質', max: 100 },
{ name: '顯示品質', max: 100 },
{ name: '相機', max: 100 },
{ name: '價值', max: 100 }
]
},
series: [
{
type: 'radar',
data: [
{
value: [80, 90, 70, 85, 95, 60],
name: '型號 A',
areaStyle: {
color: 'rgba(84, 112, 198, 0.4)'
}
},
{
value: [95, 70, 85, 90, 75, 90],
name: '型號 B',
areaStyle: {
color: 'rgba(145, 204, 117, 0.4)'
}
}
]
}
]
};
微調佈局與樣式
調整指示器文字顏色、分割線和符號大小，可防止多軸網絡線過度佔據數據。
1. 自訂網絡格線與標籤格式
設定軸線、分割區域和外側標籤的樣式，以在深色或淺色介面上保持清晰的視覺對比度：
ECharts
Edit ECharts in VPasCode
option = {
radar: {
indicator: [
{ name: '易用性', max: 10 },
{ name: '效能', max: 10 },
{ name: '安全性', max: 10 },
{ name: '可擴展性', max: 10 },
{ name: '成本效益', max: 10 }
],
axisName: {
color: '#333',
fontSize: 13,
fontWeight: 'bold'
},
splitArea: {
areaStyle: {
color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.1)']
}
},
splitLine: {
lineStyle: {
color: '#ccc'
}
}
},
series: [
{
type: 'radar',
symbolSize: 8,
lineStyle: {
width: 3
},
data: [
{
value: [8.5, 9.0, 7.5, 8.0, 9.5],
name: '平台評分',
itemStyle: {
color: '#5470c6'
},
areaStyle: {
color: 'rgba(84, 112, 198, 0.3)'
}
}
]
}
]
};
戰略最佳實務
- 統一軸尺度：盡可能確保所有指標使用標準化尺度範圍（例如 0 到 100 或 1 到 10），使外側多邊形區域能反映均衡的比較。
- 保持系列重疊數量低：每張圖表的雷達比較形狀限制在 2 或 3 個。重疊 4 個或更多填滿的多邊形會使單一形狀邊界難以辨識。
- 使用低透明度區域填充： 始終使用透明填充（透明度約 0.2–0.4），以確保底層網格線和交叉輪廓在頂層之下仍可見。