ECharts | 改变 yAxis y轴的刻度

本文介绍了如何在ECharts中改变yAxis的刻度,强调splitNumber属性为预估值,实际显示会根据易读性调整。通过示例展示了设置splitNumber为3以减少刻度密度,同时指出在类目轴中此属性无效。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

先来个最简单的柱形图例子

<!--柱形图-->
<div class="net_line_charts" id="bar" style="height: 215px;width: 560px;"></div>
 /**
     * 柱形图
     */
    var myChart = echarts.init(document.getElementById('bar'));
    var option = {
//        提示
        tooltip: {
            show: true
        },
        xAxis: [
            {
                type: 'category',
                axisLabel: {
                    formatter: '{value}'
                },
                data: ["1月", "2月", "3月", "4月", "5月", "6月"]
            }
        ],
        yAxis: [
            {
                type: 'value',
            }
        ],
//        数据系列
        series: [
            {
                "type": "bar",
                "data": [120, 40, 90, 110, 48, 50],
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: '#76ddf3'
                        }, {
                            offset: 1,
                            color: '#2989cc'
                        }]),
                    }
                }
            }
        ]
    };

    // 为echarts对象加载数据
    myChart.setOption(option);

代码实现的效果:
默认刻度分段
yAxis.splitNumber默认为5,看了效果图,可能会有人说,图中明明就是6段,为什么你说默认是5段呢。
我们看看官方文档:

坐标轴的分割段数,需要注意的是这个分割段数只是个预估值,最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整。

这个分割段数只是个预估值,实际显示并不一定按照 default:5。

上图我觉得纵坐标刻度太密了,所以将 splitNumber设成3

yAxis: [
            {
                type: 'value',
                splitNumber:3
            }
        ],

改变纵坐标刻度
需要注意的是yAxis.splitNumber在类目轴中无效,分割段数是个预估值,并不严格按照设定的yAxis.splitNumber显示

参考资料:ECharts yAxis.splitNumber

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值