echarts combat: interval annoying problem

Use echarts time, we may need to chart this interval is fixed. Example 3 4 5.

(Note that the number of intervals is calculated when the x-axis itself is not.)

The question sounds simple, but a bit of trouble.

Number yAxis.splitNumber 
[ default :. 5 ] 
the number of divided segments of the axis, to be noted that the number of divided sections is only an estimate , the number of segments for the degree readability last actually displayed on this basis will be divided according to the axis scale display Adjustment. 

Invalid category axis.

But in fact this setting may not be effective.

Because echarts according to your data is automatically fed her judgment should have several scale, many times, you set the three, she gave you the whole five.

Then you can only set your own interval and the max.

Number yAxis.max, String 
[ default : null ] 
axis scale maximum. 

You may be provided to the special value 'dataMax', this time taking the maximum value of the data as the largest scale of the shaft .

max direct this is possible, but taking into account the time of the issue will not divide the line is not an integer, we still do the math.

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

A few key points.

Analyzing and preventing try catch with the front end frame (REACT) error.
There are number of tick standand default, you can also pass into it.
If you encounter a case where not divide, and re max interval provided by rounding up manner.

Then use this method when rendering.

// ...
    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
      }

the above.

echarts combat: interval annoying problem

Guess you like