echarts中配置项splitNumber踩坑记录

splitNumber不按照设置的数目来显示怎么办?

项目问题记录

项目中有九宫格式九个柱状图显示,要求y轴显示三条分割线,两个分割间隔。使用同一个option,却展示了不同的效果。
配置项:

yAxis: {
    splitNumber:2
}

实例1:
数据为[0 , 261.69 , 290.51]
在这里插入图片描述
实例2:
数据为[0 , 869 , 728]
在这里插入图片描述
实例3:
数据为[0 , 39451, 39410]
在这里插入图片描述
同样设置y轴的splitNumber为2,有的分割了三个间隔,有的分割了两个间隔。

踩坑记录

合理使用boundaryGap\max

boundaryGap是坐标轴两端空白策略,数组内数值代表百分比

yAxis: {
    splitNumber:2,
    boundaryGap:[0,1] //boundaryGap是坐标轴两端空白策略,数组内数值代表百分比
}

效果图:
在这里插入图片描述但是不够美观,并且影响了其他的图 ,如下
在这里插入图片描述
结合max就可以达到想要的效果,但是只有整百的倍数才有用(可以只使用max,不使用boundaryGap)

yAxis: {
    splitNumber:2,
    max:39410,//300  
    //boundaryGap:[0,1] //boundaryGap是坐标轴两端空白策略,数组内数值代表百分比
}

在这里插入图片描述
在这里插入图片描述
但是这样每次我们都要判断一下数组的最大值,也是相当鸡肋,不过还好有现成的sort方法可以方便我们获取最大最小值。

实际效果

在这里插入图片描述
其实最主要的是了解echarts对于间隔处理原理,为何不能取中间值再上下取数?
找到更好的方法再来更新。

  • 3
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值