ECharts | 改变 yAxis y轴的刻度

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Uching/article/details/77278647

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

<!--柱形图-->
<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