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