echarts Y轴0刻度对齐,减少上下空白,有两根y轴的情况

1,075 阅读1分钟

需求

  • 使用echarts, 左右两根y轴,需要保证一定有0刻度,且左右两边的y轴0刻度在同一水平线上
  • 上下留白地方不能多【重点】

image.png

思路

根据两根线的数据,计算出理想对应的max, min, 保证两根线正负的比例对应 保证 Math.abs(min1) : Math.abs(max1) = Math.abs(min2) : Math.abs(max2)

核心代码

注意

  1. 只支持两根y轴, 两根线
/**
 * 提供两条轴的数据, 获取 y轴 的 min1 max1 interval ,保证 y轴0刻度 在同一条线上
 * @param {*} dataListArr 所有轴对应的数据 arr, 只支持两根轴
 * @param {*} { } isEqualZero 是否保持y轴0刻度在一条线上
 */
export function getMinMaxOf2YAxis(
  dataListArr = [],
  { isEqualZero = true, splitNumber = 5 } = {}
) {
  // 先排序 计算出初步的 最大值最小值
  const ret = dataListArr.map((dataList) => {
    const ret = {
      min: 0,
      max: 0,
      interval: 0,
    }

    if (Array.isArray(dataList) && dataList.length > 0) {
      const dataListSorted = arrSortAsc(dataList)
      ret.min = dataListSorted[0]
      ret.max = dataListSorted[dataListSorted.length - 1]
    }

    return ret
  })

  if (ret.length !== 2) {
    return ret
  }

  if (!isEqualZero) {
    return ret
  }

  // 根据9中情况,分别处理, 目前仅仅处理两根轴线的情况
  const [{ min: min1, max: max1 }, { min: min2, max: max2 }] = ret
  const min1Abs = Math.abs(min1)
  const max1Abs = Math.abs(max1)
  const min2Abs = Math.abs(min2)
  const max2Abs = Math.abs(max2)

  if (
    (min1 <= 0 && max1 <= 0 && min2 >= 0 && max2 >= 0) ||
    (min1 >= 0 && max1 >= 0 && min2 <= 0 && max2 <= 0)
  ) {
    // 3 4
    const axis1AbsMax = min1Abs > max1Abs ? min1Abs : max1Abs
    ret[0].max = axis1AbsMax
    ret[0].min = -axis1AbsMax

    const axis2AbsMax = min2Abs > max2Abs ? min2Abs : max2Abs
    ret[1].max = axis2AbsMax
    ret[1].min = -axis2AbsMax
  } else if (min1 >= 0 && max1 >= 0 && min2 >= 0 && max2 >= 0) {
    // 1
    ret[0].min = 0
    ret[1].min = 0
  } else if (min1 <= 0 && max1 <= 0 && min2 <= 0 && max2 <= 0) {
    // 2
    ret[0].max = 0
    ret[1].max = 0
  } else if (min1 <= 0 && max1 >= 0 && min2 >= 0 && max2 >= 0) {
    // 5
    ret[1].min = -(min1Abs * max2Abs / max1Abs).toFixed(2)
  } else if (min1 <= 0 && max1 >= 0 && min2 <= 0 && max2 <= 0) {
    // 6
    ret[1].max = +(max1Abs * min2Abs / min1Abs).toFixed(2)
  } else if (min1 >= 0 && max1 >= 0 && min2 <= 0 && max2 >= 0) {
    // 7
    ret[0].min = -(max1Abs * min2Abs / max2Abs).toFixed(2)
  } else if (min1 <= 0 && max1 <= 0 && min2 <= 0 && max2 >= 0) {
    // 8
    ret[0].max = +(min1Abs * max2Abs / min2Abs).toFixed(2)
  } else if (min1 <= 0 && max1 >= 0 && min2 <= 0 && max2 >= 0) {
    // 9
    ret[1].min = -(min1Abs * max2Abs / max1Abs).toFixed(2)
  }

  // 默认 value保留两位小数
  ret.forEach(line => {
    line.min = +Number(line.min).toFixed(2)
    line.max = +Number(line.max).toFixed(2)
  })

  return ret
}

export function arrSortAsc(dataList = []) {
  return dataList.sort((a, b) => {
    if (a > b) {
      return 1
    } else if (a < b) {
      return -1
    } else {
      return 0
    }
  })
}