echart柱状图Y轴最小间隔问题,Y轴不显示小数
今天来说说echart 柱状图 Y轴的最小值、间隔问题。
最近项目中用到柱状图,数据量少的时候,Y轴会出现小数,但是我们产品小哥哥说不能出现小数,好了,那就开干!
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value',
},
series: [{
data: [0, 1, 0, 2, 0, 0, 0],
type: 'bar'
}]
};
设置最小刻度跟间隔不就可以实现了吗?
查阅官方文档,找到Y轴以下两个配置
1、yAxis.min :坐标轴刻度最小值。
2、yAxis.minInterval: 自动计算的坐标轴最小间隔大小。
于是我就给加上了这两个配置项,运行结果是Y轴确实是不出现小数了,但是发现问题没有!!,周二那条数量为1的柱子不见啦!
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value',
min:1,
minInterval:1,
},
series: [{
data: [0, 1, 0, 2, 0, 0, 0],
type: 'bar'
}]
};
认真看了下,Y轴不是从0开始,而是从1开始了,所以数量为1的柱子就“不见”了,删掉min配置,即可。
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value',
minInterval:1,
},
series: [{
data: [0, 1, 0, 2, 0, 0, 0],
type: 'bar'
}]
};
总结:yAxis. min是指Y轴最小刻度。不设置的时候会自动计算最小值,一般都是0。yAxis.minInterval是Y轴最小间隔,如我的需求中,设置为1就确保都是整数了。
第一次写文章,希望自己能够继续加油,一直坚持写下去。