Data sorting methods

Data Sorting Methods

Data sorting is a fundamental operation in data processing. As a data visualization library, ECharts has built-in multiple sorting mechanisms. Sorting directly affects the display order of charts, especially in categorical charts like bar charts and line charts.

Basic Sorting Principles

Data sorting in ECharts is primarily implemented in two ways:

1. Pre-sorting the data source: Sorting is completed before the data is passed to the series.
2. Chart configuration sorting: The display order is controlled through series configuration options.

Pre-sorting example:

// Raw data
let rawData = [
  {name: 'C', value: 30},
  {name: 'A', value: 10},
  {name: 'B', value: 20}
];

// Sort by value in ascending order
rawData.sort((a, b) => a.value - b.value);

Built-in Sorting Configuration

ECharts' series configuration supports multiple sorting methods:

option = {
  xAxis: {
    type: 'category',
    data: ['A', 'B', 'C', 'D']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    data: [10, 20, 30, 15],
    type: 'bar',
    sort: 'ascending' // Optional values: 'ascending', 'descending', 'none'
  }]
};

Custom Sorting Functions

For complex sorting requirements, a custom sort function can be used:

series: [{
  type: 'pie',
  data: [
    {value: 335, name: 'A'},
    {value: 310, name: 'B'},
    {value: 234, name: 'C'}
  ],
  sort: function(a, b) {
    // Sort by name length
    return a.name.length - b.name.length;
  }
}]

Multi-Dimensional Sorting

For multi-dimensional data, more complex sorting logic is required:

let multiData = [
  {category: 'Fruits', name: 'Apple', sales: 100},
  {category: 'Fruits', name: 'Banana', sales: 80},
  {category: 'Vegetables', name: 'Carrot', sales: 60}
];

option = {
  dataset: {
    source: multiData.sort((a, b) => {
      // First sort by category, then by sales in descending order
      return a.category.localeCompare(b.category) || 
             b.sales - a.sales;
    })
  }
  // ...Other configurations
};

Dynamic Sorting Interaction

Implement dynamic sorting with ECharts' interaction API:

myChart.on('click', function(params) {
  const currentOption = myChart.getOption();
  const seriesData = currentOption.series[0].data;
  
  // Toggle sorting method
  const newData = [...seriesData].sort((a, b) => {
    return params.type === 'asc' ? a - b : b - a;
  });
  
  myChart.setOption({
    series: [{
      data: newData
    }]
  });
});

Performance Optimization Recommendations

For large datasets, consider the following:

1. Use Web Workers for background sorting.
2. Enable sort caching for fixed data.
3. Perform sorting on the server side when using pagination.

Web Worker example:

// main.js
const worker = new Worker('sort-worker.js');
worker.postMessage({data: largeDataSet});
worker.onmessage = function(e) {
  myChart.setOption({
    series: [{
      data: e.data.sortedResult
    }]
  });
};

// sort-worker.js
self.onmessage = function(e) {
  const sorted = e.data.data.sort(complexSortLogic);
  self.postMessage({sortedResult: sorted});
};

Special Chart Sorting Handling

Certain chart types have unique sorting requirements:

Radar Chart Sorting

option = {
  radar: {
    indicator: [
      {name: 'A', max: 100},
      {name: 'B', max: 100},
      {name: 'C', max: 100}
    ].sort((a, b) => a.name.localeCompare(b.name))
  }
  // ...Other configurations
};

Sunburst Chart Sorting

series: [{
  type: 'sunburst',
  data: sunburstData,
  sort: function(a, b) {
    // Sort by depth level and value
    return a.depth - b.depth || b.value - a.value;
  }
}]

Common Issue Solutions

1. Animation anomalies after sorting:

series: [{
  animationDurationUpdate: 1000,
  animationEasingUpdate: 'cubicInOut'
}]

2. Misaligned category axis labels:

xAxis: {
  axisLabel: {
    interval: 0,
    rotate: 30
  }
}

3. Inconsistent legend order:

legend: {
  data: legendData.sort(),
  selectedMode: 'single'
}

Advanced Sorting Scenarios

Time Series Sorting

const timeData = [
  {date: '2023-01-15', value: 20},
  {date: '2023-01-01', value: 10},
  {date: '2023-01-10', value: 15}
];

timeData.sort((a, b) => 
  new Date(a.date) - new Date(b.date)
);

Grouped Stacked Sorting

series: [{
  type: 'bar',
  stack: 'group1',
  data: groupData.sort(groupSortLogic)
}, {
  type: 'bar',
  stack: 'group1',
  data: groupData2.sort(groupSortLogic)
}]

Sorting and Visual Mapping

Sorting results affect visualMap displays:

visualMap: {
  type: 'continuous',
  min: 0,
  max: 100,
  inRange: {
    color: ['#50a3ba', '#eac736', '#d94e5d']
  },
  seriesIndex: 0
}