echarts y轴5等分，zoom滚动可视区域最近5等分最大值

笔者在一个echarts可视化项目中，Y轴5等分需求时，困扰了很久，网上大多数案例都是初始计算出最大值 maxValue，interval = maxValue/5

这样会有一个问题，在有滚动条的场景时，可视区域数据的最大值并不是初始所有数据的最大值。

yAxis.max 这个属性可选参数

格式：number、string、Function

这里需要用到

max: function(val) {
这里的val是返回的可视区域的最小值、最大值
}

这里最难点在于不设置interval的情况下，取得能与echarts所兼容的等分最大值
获取所为的这个最大值代码如下

function getMaxValue(val) {
  const len = String(val).length
  const logVal = Math.pow(10, len)
  let maxValue = logVal
  if (Number(val) === Math.pow(10, len - 1)) {
    maxValue = logVal
  } else {
    for (let i = 3; i >= 1; i--) {
      if (val <= logVal * i / 4) {
        maxValue = logVal * i / 4
      }
    }
  }
  return maxValue
}

1、根据 value 长度取得可能的最大值，以10为底，字符长度次方。如225， maxValue = Math.pow(10, 3) // 1000
2、判断1、10、100、1000、10000…情况时，最大值就是自己本身
3、非以上情况，判断最大值的 3/4、2/4、1/4时，value 是否比这个值小，则是该值，目的取的与value最接近又能在echarts 5等分的最大值

计算过程：225
225 !== 1000 // 1000
225 <= 750 // 750
225 <= 500 // 500
225 <= 250 // 250

示例代码

let base = +new Date(1988, 9, 3);
let oneDay = 24 * 3600 * 1000;
let data = [[base, Math.random() * 300]];
for (let i = 1; i < 20000; i++) {
  let now = new Date((base += oneDay));
  data.push([+now, Math.round((Math.random() - 0.5) * 20 + data[i - 1][1])]);
}

function getMaxValue(val) {
  const len = String(val).length
  const logVal = Math.pow(10, len)
  let maxValue = logVal
  if (String(val) === Math.pow(10, len - 1)) {
    maxValue = logVal
  } else {
    for (let i = 3; i >= 1; i--) {
      if (val <= logVal * i / 4) {
        maxValue = logVal * i / 4
      }
    }
  }
  
  return maxValue
}

option = {
  tooltip: {
    trigger: 'axis',
    position: function (pt) {
      return [pt[0], '10%'];
    }
  },
  title: {
    left: 'center',
    text: 'Large Ara Chart'
  },
  toolbox: {
    feature: {
      dataZoom: {
        yAxisIndex: 'none'
      },
      restore: {},
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'time',
    boundaryGap: false
  },
  yAxis: {
    type: 'value',
    boundaryGap: [0, '100%'],
    min: 0,
    max: function(value) {
      return getMaxValue(value.max)
    }
  },
  dataZoom: [
    {
      type: 'inside',
      start: 0,
      end: 20
    },
    {
      start: 0,
      end: 20
    }
  ],
  series: [
    {
      name: 'Fake Data',
      type: 'line',
      smooth: true,
      symbol: 'none',
      areaStyle: {},
      data: data
    }
  ]
};