EchartsY轴刻度自适应,解决数据变化较小且值过大问题

当折线图数据变化较小,数据值普遍较大时会出现这种情况,看起来很不美观

(比较啰嗦,可以直接拉到底看最终代码)

 解决方案很容易想到,给Y轴设置最大值最小值,这样:

yAxis:{
  min: (value) => {
    return value.min
  },
  max: (value) => {
    return value.max
  }
}

 但是这种情况会出现Y轴刻度这样:

 考虑这种情况,我们可以对返回值取整,看起来好看一些,这样:

yAxis:{
  // 考虑数据都是千位,百位起最小值向上下取整,最大值向上取整
  min: (value) => {
    return Math.floor(value.min / 100) * 100; 
  },
  max: (value) => {
    return Math.ceil(value.max / 100) * 100;
  }
}

效果:

 最终方案,当数据位数不固定时,可以这样做:

yAxis:{
  min: (value) => {
    let num = 10 ** (value.min.toString().length - 2)
    return Math.floor(value.min / num) * num;
  },
  max: (value) => {
    let num = 10 ** (value.max.toString().length - 2)
    return Math.ceil(value.max / num) * num;
  }
}

 

评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值