Echarts双Y轴优化

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

效果图:


image.png

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
  }

栗子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="echarts.main.js"></script>
</head>
<body>
<div id="echart" style="width: 500px;height: 500px;"></div>
<script>

  // let arr = [0.004, 0.0012, 0.0011, -0.02, 0.001,0.005,-0.04,0.0089]
  // let arr = [0.04, 0.012, 0.011, -0.013, 0.01, 0.05, -0.06, 0.089]
  // let arr2 = [0.24, 0.12, 0.11, 0.13, 0.1,0.54,0.66,0.42,0.88,0.97]
  // let arr = [4.2, -3.5, 8.9, -9.7, 1.5, -0.25, 6, 10]
  // let arr2 = [4, 8, 3, 4, 1, 3, 2, 12, 24, 37, 55, 40, 55, 12, 45, 20, -0.5, -0.6, -0.8, -0.10, -0.24, -0.35, -0.41]
  // let arr = [-210, -158, 0, 48, 468, 125, 388, 56, 751, 849, 922]
  let arr = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 943.11, 1926.04, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 687.29, 1288.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 77.02, 22.57, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1953.49, 987.19]
  let arr2 = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 11.21, 1.75, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 8.17, 1.17, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3.94, 2.29, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 207.13, 51.25, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 137, 149]

  let max = Math.max.apply(null, arr)
  let min = Math.min.apply(null, arr)
  let rMax = getMaxMin(max)
  let rMin = min < 0 ? getMaxMin(min) : 0

  let max2 = Math.max.apply(null, arr2)
  let min2 = Math.min.apply(null, arr2)
  let rMax2 = getMaxMin(max2)
  let rMin2 = min < 0 ? getMaxMin(min2) : 0

  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
  }


  var myChart = echarts.init(document.getElementById('echart'))

  // 指定图表的配置项和数据
  var option = {
    title: {
      text: 'ECharts 入门示例'
    },
    tooltip: {},
    legend: {
      data: ['销量']
    },
    xAxis: {
      data: []
    },
    yAxis: [
      {
        min: -rMin,
        max: rMax,
        interval: (rMax + rMin) / 5
      },
      {
        min: -rMin2,
        max: rMax2,
        interval: (rMax2 + rMin2) / 5
      }
    ],
    series: [{
      name: '销量',
      type: 'bar',
      data: arr
    },
      {
        type: 'line',
        yAxisIndex: 1,
        data: arr2
      }
    ]
  }

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option)
</script>
</body>
</html>

推荐阅读更多精彩内容