echarts可视化之起点归零+左右0轴对齐

自领导从竞品看到起点归零功能开始 基本每个折线图都有这个需求 还会两个不同指标放在左右轴对比查看的需求 因此整理一份出来留档（思路）

参考

1. 默认状态

2. 具体需求

1. 拖动时间轴 起点始终归零 计算策略：每条线+1 之后， 拖动时间轴范围内的数据除以该范围的起点，再-1， 即可实现拖动时间轴起点归零
2. 左右轴要求 0 轴严格对齐 便于参照

3. 代码实现

3.1. 起点归零

既然给了策略，那就是一个算法实现的问题了。首先触发条件是拖动时间轴 那自然在 echarts 的dataZoom 方法里去实现 。

3.1.1. 第一步拿到最新时间范围的起始点下标 (s,e)

 echartsInstance.on("dataZoom", () => {
  let xAxis = echartsInstance.getModel().option.dataZoom[0];
  let s = xAxis.startValue;
  let e = xAxis.endValue;
  operateData(s, e);
});

3.1.2. 根据（s,e）重新赋值

// 简化版
const operateData = (arr: any[], s?: number, e?: number) => {
  // arr 即为需要起点归零的项
  const sIdx = s ?? 0;
  const eIdx = e ?? arr.length - 1;
  for (let i = s; i < eIdx; i++) {
    const el = arr[i];
    arr[i] = (el / arr[sIdx] - 1).toFixed(2);
  }
};
// 处理完后重新setOption

3.2. 0 轴对齐

3.2.1. 根据两组数据计算出最大最小值

const maintainScale = (originData: any) => {
  const res: any = {};
  // 1.计算每个Y轴的最大值和最小值
  originData.forEach((item: any) => {
    const yAxisIndex = item.yAxisIndex;
    const values = item.temp.map((value: any) => {
      return value;
    }); // 确保转换为整数
    if (!res[yAxisIndex]) {
      res[yAxisIndex] = {
        max: Math.max(...values),
        min: Math.min(...values),
      };
    } else {
      res[yAxisIndex].max = Math.max(res[yAxisIndex].max, ...values);
      res[yAxisIndex].min = Math.min(res[yAxisIndex].min, ...values);
    }
  });
  // 2.如果只有一个Y轴或没有Y轴，不需要调整
  if (Object.keys(res).length !== 2) {
    return false;
  }
  // 3.获取两个Y轴的最大值和最小值
  const max1 = res[0].max || 1;
  const min1 = res[0].min || 0;
  const max2 = res[1].max || 1;
  const min2 = res[1].min || 0;
  // 4.如果两个Y轴的最小值都不小于零，不需要调整
  if (min1 >= 0 && min2 >= 0) {
    return false;
  }
  // 5.计算两个Y轴数据范围的比例
  const ratio = (max1 - min1) / (max2 - min2);
  const minMax: any = {};
  if (max1 < max2 * ratio) {
    minMax.y1Max = max2 * ratio;
    minMax.y2Max = max2;
  } else {
    minMax.y1Max = max1;
    minMax.y2Max = max1 / ratio;
  }

  if (min1 < min2 * ratio) {
    minMax.y1Min = min1;
    minMax.y2Min = min1 / ratio;
  } else {
    minMax.y1Min = min2 * ratio;
    minMax.y2Min = min2;
  }

  // 6.扩展数据范围，避免数据点紧贴 Y 轴
  function gap(value: any) {
    return value * 1.05;
  }
  minMax.y1Min = gap(minMax.y1Min);
  minMax.y2Min = gap(minMax.y2Min);
  minMax.y1Max = gap(minMax.y1Max);
  minMax.y2Max = gap(minMax.y2Max);

  return minMax;
};

3.2.2. 赋值重新渲染

const scaleNum = maintainScale(transformedData);
// 如果scaleNum不存在即用默认最大最小值
tempObj = {
  ...tempObj,
  yAxis: [
    {
      ...options.yAxis[0],
      max: (value: any) => {
        const { max } = value;
        return scaleNum ? scaleNum.y1Max : max;
      },
      min: (value: any) => {
        const { min } = value;
        return scaleNum ? scaleNum.y1Min : min;
      },
    },
    {
      ...options.yAxis[1],
      max: (value: any) => {
        const { max } = value;
        return scaleNum ? scaleNum.y2Max : max;
      },
      min: (value: any) => {
        const { min } = value;
        return scaleNum ? scaleNum.y2Min : min;
      },
    },
  ],
};
// 更新图表数据
chartInstance?.current?.setOption(tempObj);

4. 效果