如何为ApexChart散点图重复坐标点添加固定偏移避免重叠？

DevOps 小满

2026-9-28

实现思路

你当前筛选重复项的方法无法获取单个重复点在同值分组内的顺序，没办法生成固定偏移。建议先对所有(x,y)相同的点做分组计数，再根据每个点在组内的索引计算固定偏移，仅需一次遍历即可完成处理，时间复杂度为O(n)。

完整实现代码

// 用于记录每个(x,y)分组的出现次数
const pointCountMap = new Map();
// 处理后的数据，不直接修改原数组避免污染
const processedChartData = AllItems.map(item => {
  // 生成同值分组的唯一标识
  const groupKey = `${item.x},${item.y}`;
  // 获取当前分组已处理的点数，初始为0
  const groupIndex = pointCountMap.get(groupKey) || 0;
  // 更新分组计数
  pointCountMap.set(groupKey, groupIndex + 1);

  let xOffset = 0;
  // 第1-3个重复点（组内索引1/2/3）依次加0.05
  if (groupIndex >= 1 && groupIndex <= 3) {
    xOffset = 0.05 * groupIndex;
  } 
  // 第4-6个重复点（组内索引4/5/6）依次减0.05
  else if (groupIndex >=4 && groupIndex <=6) {
    xOffset = -0.05 * (groupIndex - 3);
  }
  // 超过7个的重复点偏移为0，保留原始值

  // 返回处理后的新数据项
  return {
    ...item,
    x: Number(item.x) + xOffset
  }
})

处理完成后直接把processedChartData传入ApexChart即可，只要原数据的顺序不变，每个点的偏移量就固定，不会出现刷新后位置变动的问题。