ECharts | 改变 yAxis y轴的刻度

最新推荐文章于 2025-06-25 11:48:32 发布

Uching

最新推荐文章于 2025-06-25 11:48:32 发布

阅读量2.6w

点赞数 2

CC 4.0 BY-SA版权

分类专栏：数据可视化

本文链接：https://blog.youkuaiyun.com/Uching/article/details/77278647

数据可视化专栏收录该内容

0 篇文章

订阅专栏

本文介绍了如何在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