Echarts双Y轴优化

前面写过双Y轴的处理,方法并不好,项目中又使用到了,不能潦草完事。对双Y轴又做了优化处理,但是并不是最终想要的结果。
现在主要实现了双Y轴的均分,但是每份的刻度还是可以优化的。暂时不折腾了

效果图:


Echarts双Y轴优化_第1张图片
image.png

Echarts双Y轴优化_第2张图片
image.png

核心就是取数组中的最大值,最小值,然后进行均分,限制是均分5等份。
假如最大值不能被5整除,那就向上取值。
如何向上取,下面适配了,最多三位小数的数据。
比如:
数组中最大值0.4,则向上取值,为0.5,最大值0.6时,则向上取值为1
数组中最大值16,则向上取值,为20,最大值73时,则向上取值为75
数组中最大值135,则向上取值,为185,最大值826时,则向上取值为880

核心方法:

function getMaxMin (v) {
    v = v < 0 ? -v : v
    return v < 1 ? getDecimalValue(v) : getIntegerValue(v)
  }

小数时向上取整

  function getDecimalValue (v) {
    let result = 0
    if (v < 1 && v * 10 >= 1) {
      v = v * 10
      result = 5 - v % 5 + v
      result = result / 10
    }
    if (v * 10 < 1 && v * 100 >= 1) {
      v = v * 100
      result = 5 - v % 5 + v
      result = result / 100
    }
    if (v * 100 < 1 && v * 1000 >= 1) {
      v = v * 1000
      result = 5 - v % 5 + v
      result = result / 1000
    }
    return result
  }

正数时向上取整

  function getIntegerValue (v) {
    let result = 0
    result = 5 - v % 5 + v
    if ((String(parseInt(v)).length > 2)) {
      result = result + 5 * 10 ** (String(parseInt(v)).length - 2)
    }
    return result
  }

栗子:




    
    Title
    


你可能感兴趣的:(Echarts双Y轴优化)