Parallel Coordinates Chart

import { ParallelSeriesOption } from 'echarts/types/src/chart/parallel/ParallelSeries';
import { ParallelCoordinateSystemOption } from 'echarts/types/src/coord/parallel/ParallelModel';

const option: ParallelSeriesOption = {
  type: 'parallel',
  coordinateSystem: 'parallel'
};

type ParallelSeriesDataValue = OptionDataValue[];  // [dim0, dim1, dim2, ...]

const data = [
  [12.99, 100, 82, 'Good'],     // Item 1: price, quantity, score, rating
  [9.99, 80, 77, 'Good'],       // Item 2
  [20.99, 120, 90, 'Excellent'] // Item 3
];

import * as echarts from 'echarts';

const option = {
  title: {
    text: 'Product Performance Analysis'
  },
  // Define the parallel coordinate system
  parallel: {
    left: '5%',
    right: '15%',
    bottom: '10%',
    top: '10%',
    layout: 'horizontal',
    parallelAxisDefault: {
      type: 'value',
      nameLocation: 'end',
      nameGap: 20,
      nameTextStyle: {
        fontSize: 12
      },
      axisLine: {
        lineStyle: {
          color: '#aaa'
        }
      },
      axisTick: {
        lineStyle: {
          color: '#777'
        }
      },
      splitLine: {
        show: false
      },
      axisLabel: {
        color: '#999'
      }
    }
  },
  // Define individual parallel axes
  parallelAxis: [
    { dim: 0, name: 'Price', type: 'value' },
    { dim: 1, name: 'Quantity', type: 'value' },
    { dim: 2, name: 'Score', type: 'value', min: 0, max: 100 },
    { 
      dim: 3, 
      name: 'Rating', 
      type: 'category',
      data: ['Poor', 'Fair', 'Good', 'Excellent']
    },
    { dim: 4, name: 'Satisfaction', type: 'value', min: 0, max: 10 }
  ],
  visualMap: {
    show: true,
    min: 0,
    max: 100,
    dimension: 2,  // Map color based on 'Score' dimension
    inRange: {
      color: ['#d94e5d', '#eac736', '#50a3ba']
    }
  },
  series: [
    {
      name: 'Products',
      type: 'parallel',
      lineStyle: {
        width: 2,
        opacity: 0.5
      },
      emphasis: {
        lineStyle: {
          width: 4,
          opacity: 1
        }
      },
      data: [
        [12.99, 100, 82, 'Good', 8.2],
        [9.99, 80, 77, 'Good', 7.5],
        [20.99, 120, 90, 'Excellent', 9.1],
        [15.50, 95, 85, 'Good', 8.5],
        [8.99, 60, 65, 'Fair', 6.8],
        [25.00, 150, 95, 'Excellent', 9.5]
      ]
    }
  ]
};

const chart = echarts.init(document.getElementById('main'));
chart.setOption(option);

interface ParallelCoordinateSystemOption {
  layout?: 'horizontal' | 'vertical';  // Default: 'horizontal'
  left?: number | string;              // Default: 80
  right?: number | string;             // Default: 80
  top?: number | string;               // Default: 60
  bottom?: number | string;            // Default: 60
  axisExpandable?: boolean;            // Default: false
  axisExpandCenter?: number;           // Default: null
  axisExpandCount?: number;            // Default: 0
  axisExpandWidth?: number;            // Default: 50
  axisExpandTriggerOn?: 'click' | 'mousemove';  // Default: 'click'
  parallelAxisDefault?: ParallelAxisOption;
}

parallel: {
  layout: 'horizontal',
  left: '10%',
  right: '10%',
  top: '15%',
  bottom: '10%',
  axisExpandable: true,
  axisExpandCenter: 15,
  axisExpandCount: 10,
  axisExpandWidth: 60,
  axisExpandTriggerOn: 'mousemove'
}

interface ParallelAxisOption extends AxisBaseOption {
  dim?: number | number[];        // Dimension index: 0, 1, 2, ...
  parallelIndex?: number;         // Index of parallel coordinate system
  areaSelectStyle?: {
    width?: number;
    borderWidth?: number;
    borderColor?: ZRColor;
    color?: ZRColor;
    opacity?: number;
  };
  realtime?: boolean;            // Realtime update when selecting
}

parallelAxis: [
  {
    dim: 0,
    name: 'Price',
    type: 'value',
    min: 0,
    max: 100,
    areaSelectStyle: {
      width: 20,
      borderWidth: 1,
      borderColor: 'rgba(160,197,232)',
      color: 'rgba(160,197,232)',
      opacity: 0.3
    },
    realtime: true
  },
  {
    dim: 1,
    name: 'Category',
    type: 'category',
    data: ['A', 'B', 'C', 'D']
  }
]

{
  type: 'parallel',
  coordinateSystem: 'parallel',
  parallelIndex: 0,              // Which parallel coordinate to use
  z: 2,
  
  // Line styling
  lineStyle: {
    width: 1,
    opacity: 0.45,
    type: 'solid'
  },
  
  // Label configuration
  label: {
    show: false
  },
  
  // Interactive opacity
  inactiveOpacity: 0.05,         // Opacity of unselected lines
  activeOpacity: 1,              // Opacity of selected lines
  
  // Progressive rendering
  progressive: 500,
  
  // Line smoothing
  smooth: false,                 // true | false | number (0-1)
  
  // Animation
  animationEasing: 'linear'
}

lineStyle?: LineStyleOption;

series: [{
  type: 'parallel',
  lineStyle: {
    width: 2,
    opacity: 0.6,
    type: 'solid',     // 'solid' | 'dashed' | 'dotted'
    color: '#5470c6'   // Can also be a callback function
  }
}]

smooth?: boolean | number;  // false | true | 0-1

smooth: true        // Smooth curves
smooth: false       // Straight lines
smooth: 0.3         // Custom smoothness (0 = straight, 1 = very smooth)

inactiveOpacity?: number;  // Default: 0.05
activeOpacity?: number;    // Default: 1

series: [{
  type: 'parallel',
  inactiveOpacity: 0.1,   // Dim unselected lines
  activeOpacity: 0.9      // Highlight selected lines
}]

interface ParallelSeriesDataItemOption {
  value?: ParallelSeriesDataValue;  // [dim0, dim1, dim2, ...]
  lineStyle?: LineStyleOption;
  label?: SeriesLabelOption;
}

series: [{
  type: 'parallel',
  data: [
    {
      value: [12.99, 100, 82, 'Good'],
      lineStyle: {
        color: '#c23531',
        width: 3
      }
    },
    [9.99, 80, 77, 'Good'],  // Simple array format
  ]
}]

emphasis: {
  label: {
    show: false
  }
}

emphasis: {
  lineStyle: {
    width: 4,
    opacity: 1,
    shadowBlur: 10,
    shadowColor: 'rgba(0,0,0,0.3)'
  },
  label: {
    show: true,
    position: 'top'
  }
}

parallelAxis: [{
  dim: 0,
  realtime: true  // Update immediately while dragging
}]

parallel: {
  axisExpandable: true,
  axisExpandCenter: 15,        // Center axis index
  axisExpandCount: 10,         // Number of expanded axes
  axisExpandWidth: 60,         // Width of expanded axes
  axisExpandTriggerOn: 'click' // 'click' | 'mousemove'
}

series: [{
  type: 'parallel',
  encode: {
    dim0: 'price',
    dim1: 'quantity',
    dim2: 'score'
  },
  data: [
    { price: 12.99, quantity: 100, score: 82 }
  ]
}]

// In your event handler
const activeIndices = series.getRawIndicesByActiveState('active');
const inactiveIndices = series.getRawIndicesByActiveState('inactive');

static dependencies = ['parallel'];