echarts 实战 : 恼人的间隔问题

Posted 2020-11-22 foxcharon

使用 echarts 的时候，可能我们需要这个图表的间隔是固定的。比如 3个 4个 5个。

（注意计算间隔数量的时候是不算 x轴 本身的。）

这个问题看似简单，其实有点麻烦。

yAxis.splitNumber number
[ default: 5 ]
坐标轴的分割段数，需要注意的是这个分割段数只是个预估值，最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整。

在类目轴中无效。

 

但其实这个设置可能并不管用。

因为 echarts 会根据你喂给她的数据自动判断应该有几个刻度，很多时候，你设置了3个，她却给你整了5个。

 

那么就只能自己设置 interval 和 max 了。

yAxis.max number, string
[ default: null ]
坐标轴刻度最大值。

可以设置成特殊值 ‘dataMax‘，此时取数据在该轴上的最大值作为最大刻度。

max 直接这样也是可以的，但是要考虑到除不尽时刻度线不是整数的问题，所以还是自己算吧。

 

  getYInterval = (arr, settingData) => {
    const returnError = () => {
      return {
        interval:undefined,
        max:undefined
      }
    }

    let max = 0
    let interval = 0
    const standand = settingData.yInterval ? settingData.yInterval : 3

    if (!arr) {
      return returnError()
    }

    try {

      arr.forEach(item => {
        if (!item.data) {
          throw new Error()
        }
        item.data.forEach(child => {
          max = Math.max(max, child)
        })
      })

    } catch (e) {
      return returnError()
    }
    
    interval = max / standand

    if (interval !== parseInt(interval)) {
      interval = Math.ceil(interval)
      max = interval * standand
    }

    return {
      interval,
      max
    }
  }

几个要点。

• 用 try catch 和 判断 防止 前端框架（react）报错。
• 刻度数量 standand 有默认的，也可以传进去。
• 如果遇到除不尽的情况，就通过向上取整的方式重新设置 interval 和 max 。

然后在渲染时使用这个方法。

// ...
    let yInterval
    let yMax
    if (settingData.xyType === "x") {
      const obj = this.getYInterval(normalData.sData, settingData)
      yInterval = obj.interval
      yMax = obj.max
    }
// ...
      yAxisExtraData = {
        axisLabel:{
          show:true,
          textStyle:{
            color:‘rgba(9,178,215,1)‘,
            fontSize:16
          }
        },
        axisLine:{
          show:false,
          lineStyle:{
            color:‘rgba(9,178,215,1)‘,
          }
        },
        splitLine: {
          lineStyle:{
            color: ‘rgba(45,57,75,1)‘
          }
        },
        axisTick:{
          show:false
        },
        splitNumber:3,
        minInterval:1,
        interval:yInterval,
        max:yMax
      }

 

以上。