Parallel coordinate system (Parallel) implements

Implementation of Parallel Coordinates

Parallel coordinates are a powerful tool in ECharts for visualizing multidimensional data. They represent different dimensions through a set of parallel axes, with data points connected by polylines across the axes, making them ideal for analyzing high-dimensional data relationships.

Basic Configuration

The core configuration items for parallel coordinates are parallel and parallelAxis. A minimal configuration example is as follows:

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]  
    ]  
  }  
};  

Axis Configuration

parallelAxis supports a variety of configuration options:

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

Data Mapping and Styling

Data styles can be configured via 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'  
      }  
    },  
    // More data...  
  ]  
}  

Interactive Features

Parallel coordinates support rich interactions:

parallel: {  
  parallelAxisDefault: {  
    // Default configurations  
  },  
  axisExpandable: true,  
  axisExpandCenter: 15,  
  axisExpandCount: 4,  
  axisExpandWidth: 50  
}  

Real-World Example

A complete example showcasing car performance data:

option = {  
  parallelAxis: [  
    { dim: 0, name: 'Horsepower' },  
    { dim: 1, name: 'Torque (N·m)' },  
    { dim: 2, name: '0-100km/h Acceleration (s)' },  
    { dim: 3, name: 'Fuel Consumption (L/100km)' },  
    { dim: 4, name: 'Price (10k)' }  
  ],  
  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)'  
      }  
    }  
  }  
};  

Advanced Applications

Combining with other chart types for linked interactions:

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  
    }  
  ]  
};  

Performance Optimization

Strategies for handling large datasets:

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

Custom Visual Mapping

Implementing color mapping based on data:

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

Multi-Series Comparison

Displaying parallel coordinates for different categories:

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