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就确保都是整数了。

第一次写文章,希望自己能够继续加油,一直坚持写下去。

  • 12
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
根据引用\[1\]中的内容,你可以通过设置柱状图的stack属性来控制柱子的显示方式。如果你想要两个柱状图的柱子值相加显示为一个柱子,你可以将它们的stack属性设置为相同的值。此外,你还可以根据坐标轴刻度的大小来设置柱子之间的间距。例如,如果X轴的每个刻度是200000,你可以将柱子的data设置为\[25000, 25000, 25000, 25000, 25000, 25000, 25000, 25000, 25000\],这样柱子之间的间距就是0.125个X轴刻度的长度。 根据引用\[2\]中的内容,如果你想要Y轴从0开始显示,而不是从1开始,你可以删除min配置。这样,柱子数量为1的柱子就会显示出来。 根据引用\[3\]中的内容,如果你想要Y轴显示小数,你可以将yAxis的type设置为'value',而不是'minInterval:1'。 综上所述,你可以根据以上的方法来调整echarts柱状图Y轴间隔。 #### 引用[.reference_title] - *1* [如何让echarts中柱状图的柱子与坐标轴有一定的间距](https://blog.csdn.net/y_yyyym/article/details/103270446)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* *3* [echart柱状图Y轴最小间隔问题,Y轴显示小数](https://blog.csdn.net/weixin_42463849/article/details/107051292)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值