echarts 实战 : 恼人的间隔问题

2019-11-17 10:01:09 阅读：274 来源： 互联网

标签：实战 settingData max interval 恼人 yInterval let 刻度 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
      }

以上。

标签：实战,settingData,max,interval,恼人,yInterval,let,刻度,echarts
来源： https://www.cnblogs.com/foxcharon/p/11875444.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

echarts 实战 : 恼人的间隔问题