js刻度线计算

一个简单的刻度线计算

刻度只展示6~12格 刻度值 只能是 1 2 5 或的倍数 优先展示5及5的倍数，小于6时特殊处理 允许出现小数位。
例如 ：
最大值3，刻度为： 0，0.5，1，1.5，2，2.5，3
最大值6，刻度为： 0，1，2，3，4，5，6
最大值13，刻度为：0，2，4，6，8，10，12，14

// 获取刻度值列表
//JS 写法 可以自己转成vue和react

// 计算刻度
// 起始值必须小于结束值
// start 起始值 默认0
// end 结束值
// returns 刻度列表
// 刻度只展示6~12格  刻度值 只能是 1 2 5 或的倍数 优先展示5及5的倍数
function calcDegreeScaleChange (start = 0,end) {
  if (start >= end) {
    console.log('起始值必须小于结束值')
    return
  }

  const maxValue = end - start // 最大时间值
  let newStage = 0 // 刻度数量
  let newStageValue = 0 // 刻度值

  // 小于10
  if (maxValue <= 10) {
    const returnData = calcDigits(maxValue)
    newStage = returnData.baseCalcNum || 0
    newStageValue = returnData.baseCalcValue || 0
  }
  // 大于10
  else {
    // 向下取整
    const carry = Math.pow(10, Math.floor(Math.log10(maxValue)) - 1) || 1
    const returnData = calcCount(Math.ceil(maxValue / carry))
    newStage = returnData.baseCalcNum || 0
    newStageValue = (returnData.baseCalcValue && returnData.baseCalcValue * carry) || 0
  }

  const list = []
  for (let i = 0; i <= newStage; i++) {
    list.push(parseFloat((i * newStageValue).toFixed(10)))
  }
  return list
}

// 个位数时的处理
function calcDigits (maxValue) {
  let baseCalcNum = 0
  let baseCalcValue = 0
  // 大于5的情况
  if (maxValue > 5) {
    // 数字多少 刻度范围值就是多少
    baseCalcNum = maxValue
    baseCalcValue = 1
  } else {
    // 精度向下取一位
    const useValue = maxValue * 10
    const returnData = calcCount(Math.ceil(useValue))
    baseCalcNum = returnData.baseCalcNum || 0
    baseCalcValue = (returnData.baseCalcValue && returnData.baseCalcValue / 10) || 0
  }
  return {
    baseCalcNum: baseCalcNum,
    baseCalcValue: baseCalcValue,
  }
}

// 刻度计算
function calcCount (value) {
  let baseCalcNum = 0 // 刻度数量
  let baseCalcValue = 1 // 刻度值
  if (value < 13 && value >= 10) {
    return {
      baseCalcNum: value, // 刻度数量
      baseCalcValue: 1, // 刻度值
    }
  }
  // 刻度数量要大于五
  if (value / 5 > 5) {
    baseCalcNum = Math.ceil(value / 5)
    baseCalcValue = 5
  } else if (value / 2 > 5) {
    baseCalcNum = Math.ceil(value / 2)
    baseCalcValue = 2
  }
  if (baseCalcNum > 13) {
    const data = recursionDivision(baseCalcNum, baseCalcValue)
    baseCalcNum = data.baseCalcNum
    baseCalcValue = data.baseCalcValue
  }

  return {
    baseCalcNum: baseCalcNum, // 刻度数量
    baseCalcValue: baseCalcValue, // 刻度值
  }
}

// 递归除法
// currentValue: 需要递归的数据
// changeValue: 每次递归的除积
function recursionDivision (currentValue, changeValue) {
  let newValue = currentValue / 2
  if (String(newValue).indexOf('.') > 0) {
    // 向上取整
    newValue = Math.ceil(newValue)
  }

  if (newValue >= 6 || newValue <= 13) {
    return {
      baseCalcNum: newValue, // 刻度数量
      baseCalcValue: changeValue * 2, // 刻度值
    }
  } else {
    return recursionDivision(newValue, changeValue * 2)
  }
}

const resultData = calcDegreeScaleChange(13)
console.log(resultData) 
//  [0, 2, 4, 6, 8, 10, 12, 14]