echarts纵坐标动态分段

在开发echarts的柱状图时，默认情况下echarts会自动计算Y轴的最大值跟最小值，再自动计算分为几段，整个过程不用我们计算，但是有时候可能不太满意echarts自动计算结果，想让Y轴固定分为几段，这个时候就需要自定义计算结果，其实echarts也是支持的，通过在yAxis某个数组中添加 interval以及max和min字段就可以达到这种效果。但是这个间隔跟最大值和最小值需要自己计算。

以下自动计算规则供参考：

// 取数组（如图表数据的最大和最小值）目的:Y轴刻度调整(可以被5或者5结尾的小数整除)
export function arrMaxMin (list, flag) {
  let valArr = list
  let splitNum = 1 // 分段数
  let max = Math.max.apply(null, valArr) || 0 // 最大值
  let min = Math.min.apply(null, valArr) || 0 // 最小值
  let diff = max - min // 差值
  let ilog = Math.round(Math.log10((diff || 3) / 3)) - 1 // 差值区间
  let fixNum = 5 * (Math.pow(10, ilog)) // 调整值
  let interval
  for (let i = 1; i <= 10000; i++) {
    if (fixNum * i * splitNum > diff) {
      interval = fixNum * i
      break
    }
  }
  let minLast
  let maxLast
  // 计算出minLast、maxLast,计算出的minLast<=min(包含min),maxLast>=max(包含max),并且minLast,maxLast都能被5或者5结尾的小数整除
  if (min >= 0) { 
    // 最小值大于等于零 例如 min = 0.0016 interval = 0.0015 则 minLast 0.0016-|0.0016|%0.0015 = 0.0015
    minLast = min - Math.abs(min) % interval
  } else { 
    // 最小值小于零 例如 min = -0.0016 interval = 0.0015 则 minLast = -0.0016+|0.0016|%0.0015 -0.0015 = 0.0030
    minLast = min + Math.abs(min) % interval - interval
  }
  // 判断是否包含最大值,不包含则加一刻度
  if (minLast + 1 * interval >= max) { 
    maxLast = minLast + 1 * interval 
  } else {
    maxLast = minLast + 2 * interval 
  }

  if (flag === 'max') {
      return maxLast
  } else if (flag === 'min') {
      return minLast
  } else if (flag === 'interval') {
    return interval
  }
  return '--'
}

本文章由javascript技术分享原创和收集