parallel平行坐标系组件完全指南

📋 概述

**parallel（平行坐标系组件）**是用于配置平行坐标系布局和样式的核心组件。它与parallelAxis配合，定义平行坐标系的容器、维度排列方式、交互行为等，是高维数据可视化的基础。

核心价值

• 高维展示：在二维平面展示4+维度数据
• 布局控制：精确控制平行轴的位置和间距
• 交互刷选：支持区域刷选和数据过滤
• 视觉优化：自定义线条样式和颜色映射

---

🎯 核心概念

1. 基础parallel配置

option = {
  parallel: {
    left: '5%',
    right: '13%',
    bottom: '10%',
    top: '15%',
    parallelAxisDefault: {
      type: 'value'
    }
  },
  
  parallelAxis: [
    { dim: 0, name: '维度1' },
    { dim: 1, name: '维度2' },
    { dim: 2, name: '维度3' }
  ],
  
  series: [{
    type: 'parallel',
    data: multiDimData
  }]
};

---

🔧 详细配置项

完整parallel配置

option = {
  parallel: {
    // === 位置和尺寸 ===
    left: '5%',
    right: '13%',
    top: '15%',
    bottom: '10%',
    width: 'auto', // 或固定宽度
    height: 'auto',
    
    // === 布局方向 ===
    layout: 'horizontal', // 'horizontal' | 'vertical'
    
    // === 轴间距 ===
    axisExpandable: false, // 是否可展开
    axisExpandCenter: null,
    axisExpandCount: 0,
    axisExpandWidth: 50,
    axisExpandRate: 17,
    axisExpandDebounce: 50,
    
    // === 默认轴配置 ===
    parallelAxisDefault: {
      type: 'value', // 'value' | 'category' | 'log'
      name: '',
      nameLocation: 'end',
      nameGap: 20,
      nameRotate: 0,
      
      // 轴线样式
      axisLine: {
        show: true,
        lineStyle: {
          color: '#888',
          width: 2
        }
      },
      
      // 刻度
      axisTick: {
        show: true,
        alignWithLabel: true
      },
      
      // 标签
      axisLabel: {
        show: true,
        color: '#333',
        fontSize: 11,
        rotate: 0
      },
      
      // 分割线
      splitLine: {
        show: true,
        lineStyle: {
          color: '#eee',
          width: 1
        }
      }
    },
    
    // === 选中模式 ===
    selectedMode: 'multiple', // 'single' | 'multiple' | false
    
    // === 刷选样式 ===
    areaSelectStyle: {
      width: 20,
      borderWidth: 1,
      borderColor: '#5470c6',
      color: '#5470c6',
      opacity: 0.3
    }
  }
};

---

💡 实战案例

案例1：学生成绩多维分析

const dimensions = ['语文', '数学', '英语', '物理', '化学'];

option = {
  title: {
    text: '学生成绩多维对比',
    left: 'center'
  },
  
  tooltip: {
    formatter: function(obj) {
      let html = `<strong>${obj.name}</strong><br/>`;
      obj.value.forEach((val, i) => {
        html += `${dimensions[i]}: ${val}<br/>`;
      });
      return html;
    }
  },
  
  parallel: {
    left: '5%',
    right: '10%',
    bottom: '10%',
    top: '15%',
    parallelAxisDefault: {
      type: 'value',
      nameTextStyle: {
        fontSize: 12,
        fontWeight: 'bold'
      }
    }
  },
  
  parallelAxis: dimensions.map((dim, i) => ({
    dim: i,
    name: dim,
    max: 100,
    min: 0
  })),
  
  series: [{
    type: 'parallel',
    lineStyle: {
      width: 2,
      opacity: 0.5
    },
    emphasis: {
      lineStyle: {
        width: 4,
        opacity: 1
      }
    },
    data: [
      { value: [85, 90, 78, 92, 88], name: '张三' },
      { value: [92, 88, 95, 85, 90], name: '李四' },
      { value: [78, 95, 85, 92, 80], name: '王五' }
    ]
  }]
};

---

⚠️ 常见问题

问题1：轴线太密集

解决：

parallel: {
  left: '3%',   // 减小左右边距
  right: '3%',
  parallelAxisDefault: {
    nameGap: 15  // 减小名称间距
  }
}

问题2：线条混乱

解决：

series: [{
  type: 'parallel',
  lineStyle: {
    opacity: 0.2 // 降低透明度
  },
  emphasis: {
    lineStyle: {
      opacity: 1
    }
  }
}]

---

🎯 最佳实践

1. 维度排序

// 将相关性强的维度放在一起
parallelAxis: [
  { dim: 0, name: '输入1' },
  { dim: 1, name: '输入2' },
  { dim: 2, name: '输出1' },
  { dim: 3, name: '输出2' }
]

2. 颜色编码

visualMap: {
  dimension: 0,
  inRange: {
    color: ['#313695', '#4575b4', '#fee090', '#d73027']
  }
}

---

📊 性能指标

数据量	渲染时间	建议
<100条	15ms	无限制
100-500条	40ms	正常
>500条	100ms	降低opacity

---

🔗 相关链接

• 平行坐标系图表.md)
• visualMap视觉映射

---

💎 总结

parallel组件核心价值：

• ✅ 高维数据可视化
• ✅ 灵活的布局控制
• ✅ 区域刷选交互
• ✅ 与visualMap集成

掌握parallel，让多维分析更清晰！📐

平行坐标系数据对比

{
  "title": {
    "text": "汽车性能对比",
    "left": "center"
  },
  "tooltip": {
    "trigger": "item"
  },
  "parallelAxis": [
    {
      "dim": 0,
      "name": "价格(万)",
      "min": 10,
      "max": 50
    },
    {
      "dim": 1,
      "name": "油耗(L)",
      "min": 5,
      "max": 15
    },
    {
      "dim": 2,
      "name": "功率(kW)",
      "min": 80,
      "max": 200
    },
    {
      "dim": 3,
      "name": "扭矩(N·m)",
      "min": 150,
      "max": 400
    }
  ],
  "parallel": {
    "left": "5%",
    "right": "5%",
    "bottom": "10%",
    "top": "15%"
  },
  "series": [
    {
      "type": "parallel",
      "lineStyle": {
        "width": 2
      },
      "data": [
        [
          15,
          6.5,
          110,
          200
        ],
        [
          25,
          8,
          150,
          300
        ],
        [
          35,
          10.5,
          180,
          350
        ],
        [
          20,
          7.5,
          130,
          250
        ]
      ]
    }
  ]
}