---
title : Echarts 設置Y軸值間隔
tags: Echarts、Y軸值間隔
creat-date: 2022-10-12
update_date : 2022-10-12
---

---
## Echarts 設置Y軸值間隔
---

:::info
**問題：使用者需求，希望將圖表的Y軸「件數」的間隔，最小值設定為1。**
:::

### 一、方法

**(1) yAxis.splitNumber(number 預設值：5)**

坐標軸的分割段數，需要注意的是這個分割段數只是個預估值，最後實際顯示的段數會在這個基礎上根據分割後坐標軸刻度顯示的易讀程度作調整。

注意：該屬性在類目軸中無效。

**(2) yAxis.minInterval(number 預設值：0)**

自動計算的坐標軸最小間隔大小。

例如可以設置成1，保證坐標分割刻度顯示成整數。

{
    minInterval: 1
}

只在數值軸或時間軸中(type:'value' 或 'time')有效。

**(3) yAxis.maxInterval(number 自動計算的坐標軸最大間隔大小)**

例如，在時間軸(type:'time')可以設置成 3600*24*1000 保證坐標軸分割刻度最大為一天。

{
    maxInterval: 3600 * 24 * 1000
}

只在數值軸或時間軸中(type:'value' 或 'time')有效。

**(4) yAxis.interval(number 強制設置坐標軸分割間隔)**

因為 splitNumber 是預估的值，實際根據策略計算出來的刻度可能無法達到想要的效果，這時候可以使用 interval 配合 min、max 強制設定刻度劃分，一般不建議使用。

該屬性無法在類目軸中使用。在時間軸(type: 'time')中需要傳時間戳，在對數軸(type: 'log')中需要傳指數值。

### 二、實作：

**(1)設定 minInterval：1**

此設定只限於單一Y軸的值，若有一個以上的資料會無效。

**(2)設定 splitNumber：1**

數值若較大則正常，數值若小，則還是會出現小數。

**(3)設定 interval 動態產生 min 和 max 值**

計算最大值與間隔數值。

/// <summary>
/// 計算件數及經費分布-Y軸-「經費與件數」的間隔值、最大值
/// </summary>
/// <param name="dPriceIntervalH">Y軸-經費-間隔值</param>
/// <param name="dPriceMaxH">Y軸-經費-最大值</param>
/// <param name="nNumIntervalH">Y軸-件數-間隔值(預設值：1)</param>
/// <param name="nNumMaxH">Y軸-件數-最大值</param>
/// <param name="nMaxAmount">實際-總數值</param>
/// <param name="dPriceMax">實際-總經費值</param>
private void GenIntervalMaxValue(ref decimal dPriceIntervalH, ref decimal dPriceMaxH, ref int nNumIntervalH, ref int nNumMaxH, int nMaxAmount, decimal dPriceMax)
{
    if (nMaxAmount <= 7) {
        nNumMaxH = nMaxAmount;
        if (dPriceMax == 0) {
            dPriceMaxH = 0;
            dPriceIntervalH = 0;
        }
        else {
            int nAvgPrice = Convert.ToInt32(dPriceMax) / nMaxAmount;
            int nAvgPriceMod = nAvgPrice % 1000;
            dPriceIntervalH = nAvgPrice - nAvgPriceMod + 1000; // Y軸-經費-間隔值
            dPriceMaxH = dPriceIntervalH * nMaxAmount;         // Y軸-經費-最大值
        }
    }
    else {
        int nAvgNum = nMaxAmount / 6;
        int nAvgNumMod = nAvgNum % 10;
        nNumIntervalH = nAvgNum - nAvgNumMod + 10; // Y軸-件數-間隔值
        nNumMaxH = nNumIntervalH * 6;              // Y軸-件數-最大值

        int nAvgPrice = Convert.ToInt32(dPriceMax) / 6;
        int nAvgPriceMod = nAvgPrice % 1000;
        dPriceIntervalH = nAvgPrice - nAvgPriceMod + 1000; // Y軸-經費-間隔值
        dPriceMaxH = dPriceIntervalH * 6;                  // Y軸-經費-最大值
    }
}

將計算後的最大值與間隔值放入Y軸

yAxis: 
[
    {
        type: 'value',
        name: '經費 (千元)',
        position: 'right',
        alignTicks: true,
        axisLabel: {
            formatter: '{value}',
            textStyle:{
                fontSize:16,
                color: '#fff',
            }
        },
        axisLine: {
            lineStyle: {
                color: 'rgba(255,255,255,1)',
                backgroundColor: 'red'
            },
        },
        //minInterval: 1,
        //splitNumber: 1, 
        interval: priceInterval,
        min: 0,
        max: priceMax,
    },
    {
        type: 'value',
        name: '件數',
        position: 'left',
        alignTicks: true,
        axisLabel: {
            color: 'rgba(255,255,255,1)',
            textStyle:{
                fontSize:16
            }
        },
        axisLine: {
            lineStyle: {
                color: 'rgba(255,255,255,1)',
            }
        },
        //minInterval: 1,
        //splitNumber: 1,
        interval: numInterval,
        min: 0,
        max: numMax,
    },  
]

件數較少的結果

件數較多的結果

### 三、參考：
(1) http://jsrun.net/t/NkpKp