echarts 實戰 : 惱人的間隔問題

使用 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
      }

 

以上。