1. 程式人生 > >ECharts | 改變 yAxis y軸的刻度

ECharts | 改變 yAxis y軸的刻度

先來個最簡單的柱形圖例子

<!--柱形圖-->
<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顯示