當同時在許多數值或類別軸上比較多變量數據點時，平行坐標圖是一種重要的視覺工具。與將坐標映射到垂直的水平和垂直軸不同，平行圖將所有維度並排放置為平行線。單個數據條目以連續的折線路徑呈現，並與每個軸相交，從而輕鬆識別多屬性群集、權衡、相關性和異常值——例如在馬力、重量、燃油效率、價格和安全等級之間比較汽車型號。
平行圖的機制
在 Apache ECharts 中，平行坐標圖依賴於一個專用的parallelAxis配置區塊，用於定義每個平行尺度（其軸索引、維度名稱和數據類型）。圖表系列設置type: 'parallel'並將多元素值陣列的每一行映射到對應的軸索引。
1. 基本設置
要構建一個基本的平行圖，請在parallelAxis陣列中定義您的維度，並在系列的data:
ECharts
Edit ECharts in VPasCode
option = {
parallelAxis: [
{ dim: 0, name: '價格（$）' },
{ dim: 1, name: '評分' },
{ dim: 2, name: '重量（kg）' },
{ dim: 3, name: '功率（HP）' }
],
series: [
{
type: 'parallel',
lineStyle: {
width: 2
},
data: [
[1299, 4.5, 1.2, 120],
[899, 4.0, 1.5, 95],
[1599, 4.8, 1.1, 150],
[499, 3.5, 2.0, 80],
[2100, 4.9, 0.9, 180]
]
}
]
};
進階結構技術
平行圖可與視覺顏色漸變或混合類別尺度結合，以評估不同產品類別之間的複雜權衡。
1. 各維度上的視覺映射顏色漸變
將visualMap元件與關鍵軸維度配對（例如，將線條顏色映射到性能評分），以立即突出顯示所有平行軸上的頂級表現者：
ECharts
Edit ECharts in VPasCode
option = {
parallelAxis: [
{ dim: 0, name: 'CPU 核心數' },
{ dim: 1, name: '記憶體 (GB)' },
{ dim: 2, name: '儲存空間 (TB)' },
{ dim: 3, name: '每月成本 ($)', min: 0, max: 200 }
],
visualMap: {
show: true,
type: 'continuous',
min: 0,
max: 200,
dimension: 3, // 根據維度索引 3（每月成本）來著色線路路徑
inRange: {
color: ['#91cc75', '#fac858', '#ee6666'] // 綠色（低成本）至紅色（高成本）
},
orient: 'horizontal',
top: '2%',
left: 'center'
},
parallel: {
top: '18%',
bottom: '10%'
},
series: [
{
type: 'parallel',
lineStyle: {
width: 3,
opacity: 0.8
},
data: [
[4, 8, 0.5, 25],
[8, 16, 1.0, 50],
[16, 32, 2.0, 110],
[32, 64, 4.0, 185],
[12, 24, 1.5, 80]
]
}
]
};
微調佈局與互動式過濾
增加平滑曲線與線條透明度，可防止密集且交錯的資料線路過度佔用使用者介面。
1. 平滑曲線路徑與低透明度線路
設定 smooth: true並降低線條透明度，使高密度資料重疊與群集自然可見：
ECharts
Edit ECharts in VPasCode
option = {
parallelAxis: [
{ dim: 0, name: '分數 A' },
{ dim: 1, name: '分數 B' },
{ dim: 2, name: '分數 C' },
{ dim: 3, name: '分數 D' },
{ dim: 4, name: '分數 E' }
],
parallel: {
left: '10%',
right: '10%',
bottom: '12%',
top: '12%'
},
series: [
{
type: 'parallel',
smooth: true, // 為獲得更清晰視覺效果，使線路路徑呈現曲線
lineStyle: {
color: '#5470c6',
width: 2,
opacity: 0.45
},
data: [
[85, 92, 78, 90, 88],
[70, 65, 80, 72, 75],
[95, 88, 92, 96, 94],
[60, 75, 68, 62, 70],
[88, 90, 85, 89, 91],
[78, 82, 74, 80, 83]
]
}
]
};
戰略性最佳實務
- 謹慎安排座標軸：將強相關或可直接比較的指標放置於相鄰的軸上，以便更容易察覺其關聯性與交叉趨勢。
- 高資料量時使用較低透明度： 當繪製數十條甚至數百條線路時，降低
lineStyle.opacity至0.2–0.5以便重疊的趨勢能自然形成較暗、高密度的帶狀區域。 - 啟用
smooth: true以處理複雜資料集： 為線路路徑施加微妙的曲率，可減少線路在快速連續穿越多個平行軸時產生的尖銳視覺角度。