当同时在多个数值或类别轴上比较多变量数据点时，平行坐标图是一种必不可少的视觉工具。与将坐标映射到垂直的横轴和纵轴不同，平行图将所有维度并排排列为平行线。单个数据条目以连续的折线路径形式呈现，穿过每个轴，从而便于识别多属性聚类、权衡关系、相关性以及异常值——例如在马力、重量、燃油效率、价格和安全评级等方面比较汽车型号。
平行坐标图的原理
在 Apache ECharts 中，平行坐标图依赖于一个专用的parallelAxis配置块，用于定义每个平行尺度（其轴索引、维度名称和数据类型）。图表系列设置type: 'parallel'并将多元素值数组的每一行映射到相应的轴索引。
1. 基础设置
要构建一个基本的平行坐标图，需在parallelAxis数组中定义你的维度，并在系列的data:
ECharts
Edit ECharts in VPasCode
option = {
parallelAxis: [
{ dim: 0, name: '价格（美元）' },
{ dim: 1, name: '评分' },
{ dim: 2, name: '重量（千克）' },
{ dim: 3, name: '功率（马力）' }
],
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用于复杂数据集： 在线条快速穿过多个平行轴时，对路径施加微妙的弯曲，可减少尖锐的视觉角度。