平行坐标系(Parallel)实现

平行坐标系(Parallel)实现

平行坐标系是ECharts中用于展示多维数据的强大工具。它通过一组平行的坐标轴表示不同维度，数据项在各轴上对应位置用折线连接，适合分析高维数据关系。

基本配置

平行坐标系的核心配置项是parallel和parallelAxis。一个最简单的平行坐标系配置如下：

option = {
  parallelAxis: [
    { dim: 0, name: 'Price' },
    { dim: 1, name: 'Weight' },
    { dim: 2, name: 'Rating' }
  ],
  series: {
    type: 'parallel',
    data: [
      [12, 34, 5.6],
      [56, 78, 9.0],
      [90, 12, 3.4]
    ]
  }
};

坐标轴配置

parallelAxis支持丰富的配置选项：

parallelAxis: [
  {
    dim: 0,
    name: '温度(℃)',
    type: 'value',
    min: -20,
    max: 40,
    axisLine: {
      lineStyle: {
        color: '#FF4500'
      }
    },
    nameTextStyle: {
      color: '#FF4500'
    }
  },
  {
    dim: 1,
    name: '湿度(%)',
    inverse: true,
    nameLocation: 'end'
  }
]

数据映射与样式

可以通过parallel.series配置数据样式：

series: {
  type: 'parallel',
  lineStyle: {
    width: 1,
    opacity: 0.5
  },
  emphasis: {
    lineStyle: {
      width: 3,
      opacity: 1
    }
  },
  data: [
    {
      value: [12, 34, 5.6],
      lineStyle: {
        color: '#FF0000'
      }
    },
    // 更多数据...
  ]
}

交互功能

平行坐标系支持丰富的交互：

parallel: {
  parallelAxisDefault: {
    // 默认配置
  },
  axisExpandable: true,
  axisExpandCenter: 15,
  axisExpandCount: 4,
  axisExpandWidth: 50
}

真实案例

展示汽车性能数据的完整示例：

option = {
  parallelAxis: [
    { dim: 0, name: '马力' },
    { dim: 1, name: '扭矩(N·m)' },
    { dim: 2, name: '0-100km/h加速(s)' },
    { dim: 3, name: '油耗(L/100km)' },
    { dim: 4, name: '价格(万)' }
  ],
  series: {
    type: 'parallel',
    smooth: true,
    lineStyle: {
      width: 2
    },
    data: [
      [320, 400, 5.2, 8.5, 45],
      [280, 350, 6.0, 7.8, 38],
      [420, 500, 4.5, 9.2, 62]
    ],
    emphasis: {
      lineStyle: {
        width: 4,
        shadowBlur: 10,
        shadowColor: 'rgba(0,0,0,0.3)'
      }
    }
  }
};

高级应用

结合其他图表类型实现联动：

option = {
  parallel: {
    left: '5%',
    right: '13%',
    bottom: '10%',
    top: '5%'
  },
  grid: {
    right: '50%'
  },
  xAxis: {
    type: 'category',
    data: ['A', 'B', 'C']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      type: 'parallel',
      data: [...]
    },
    {
      type: 'bar',
      data: [...],
      xAxisIndex: 0,
      yAxisIndex: 0
    }
  ]
};

性能优化

处理大数据量时的优化策略：

series: {
  type: 'parallel',
  progressive: 1000,
  progressiveThreshold: 5000,
  data: largeDataSet,
  lineStyle: {
    opacity: 0.3
  },
  silent: true
}

自定义视觉映射

实现基于数据的颜色映射：

series: {
  type: 'parallel',
  data: [...],
  visualMap: {
    dimension: 2,
    inRange: {
      color: ['#50a3ba', '#eac736', '#d94e5d']
    },
    outOfRange: {
      color: ['#999']
    }
  }
}

多系列对比

展示不同类别数据的平行坐标系：

series: [
  {
    name: 'SUV',
    type: 'parallel',
    data: suvData,
    lineStyle: {
      color: '#FFA500'
    }
  },
  {
    name: '轿车',
    type: 'parallel',
    data: sedanData,
    lineStyle: {
      color: '#1E90FF'
    }
  }
]