数据排序方法

数据排序是数据处理中的基础操作，能够帮助用户更高效地分析和理解数据。在ECharts中，排序功能常用于优化图表展示效果，比如柱状图的升序/降序排列、饼图的占比排序等。以下是几种常见的数据排序方法及其在ECharts中的实现方式。

基于数值的简单排序

最简单的排序方式是根据数值大小对数据进行升序或降序排列。例如，在柱状图中，可以通过Array.prototype.sort()方法对数据排序：

const rawData = [
  { name: 'A', value: 30 },
  { name: 'B', value: 20 },
  { name: 'C', value: 50 }
];

// 升序排列
const ascendingData = [...rawData].sort((a, b) => a.value - b.value);

// 降序排列
const descendingData = [...rawData].sort((a, b) => b.value - a.value);

在ECharts中，可以直接将排序后的数据传入series.data：

option = {
  xAxis: { type: 'category', data: descendingData.map(item => item.name) },
  yAxis: { type: 'value' },
  series: [{ type: 'bar', data: descendingData.map(item => item.value) }]
};

多字段复合排序

当数据包含多个字段时，可能需要按优先级排序。例如，先按销售额降序，再按利润升序：

const salesData = [
  { product: 'X', sales: 200, profit: 40 },
  { product: 'Y', sales: 200, profit: 30 },
  { product: 'Z', sales: 150, profit: 50 }
];

const sortedData = salesData.sort((a, b) => {
  if (a.sales !== b.sales) return b.sales - a.sales; // 第一优先级：销售额降序
  return a.profit - b.profit; // 第二优先级：利润升序
});

自定义排序规则

某些场景需要非数值型排序，比如按星期、月份或自定义枚举值。此时需定义排序映射关系：

const weekOrder = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
const weekData = [
  { day: '周三', value: 70 },
  { day: '周一', value: 50 },
  { day: '周六', value: 90 }
];

const sortedWeekData = weekData.sort(
  (a, b) => weekOrder.indexOf(a.day) - weekOrder.indexOf(b.day)
);

在ECharts中实现带中文月份排序的折线图：

option = {
  xAxis: {
    type: 'category',
    data: sortedWeekData.map(item => item.day),
    axisLabel: { interval: 0 }
  },
  series: [{ type: 'line', data: sortedWeekData.map(item => item.value) }]
};

分组排序

对于分组柱状图，可能需要每组内部单独排序。例如按地区分组后对产品销量排序：

const groupData = [
  { region: 'North', product: 'P1', sales: 300 },
  { region: 'North', product: 'P2', sales: 450 },
  { region: 'South', product: 'P1', sales: 280 },
  { region: 'South', product: 'P2', sales: 600 }
];

// 按地区分组后每组按销量降序
const grouped = {};
groupData.forEach(item => {
  if (!grouped[item.region]) grouped[item.region] = [];
  grouped[item.region].push(item);
});

Object.keys(grouped).forEach(region => {
  grouped[region].sort((a, b) => b.sales - a.sales);
});

动态交互排序

通过ECharts的dispatchAction实现点击表头排序：

let isAscending = false;
chart.on('click', { seriesIndex: 0 }, () => {
  const currentData = chart.getOption().series[0].data;
  const sorted = [...currentData].sort((a, b) => 
    isAscending ? a - b : b - a
  );
  chart.setOption({ series: [{ data: sorted }] });
  isAscending = !isAscending;
});

大数据量分页排序

当数据量较大时，建议结合分页和懒加载：

function sortAndPaginate(data, pageSize, pageIndex, sortField, isDesc) {
  const sorted = [...data].sort((a, b) => 
    isDesc ? b[sortField] - a[sortField] : a[sortField] - b[sortField]
  );
  return sorted.slice(pageIndex * pageSize, (pageIndex + 1) * pageSize);
}

时间序列的特殊处理

处理时间数据时需先转换为时间戳再排序：

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

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

在折线图中使用时间轴时：

option = {
  xAxis: {
    type: 'time',
    data: sortedTimeData.map(item => item.date)
  },
  series: [{ 
    type: 'line',
    data: sortedTimeData.map(item => [item.date, item.value]) 
  }]
};

性能优化建议

对于超过10万条数据的场景：

1. 使用Web Worker进行后台排序
2. 采用增量渲染策略
3. 对浮点数使用TypedArray加速排序

// 使用Float64Array优化数值排序
const largeData = new Float64Array(100000).map(() => Math.random());
const sortedArray = largeData.slice().sort();