ECharts singleAxis組件基本使用

這一章介紹了 ECharts singleAxis 組件的使用以及它的一些基本屬性。

singleAxis

singleAxis 是 ECharts 中的單軸。它可以被應用到散點圖中展現一維數據，如下示例：

點擊編輯實例 》》

singleAxis.zlevel   |   number

[ default: 0 ]

設置所有單軸圖形的 zlevel 值。

zlevel用于 Canvas 分層，不同zlevel值的圖形會放置在不同的 Canvas 中，Canvas 分層是一種常見的優(yōu)化手段。我們可以把一些圖形變化頻繁（例如有動畫）的組件設置成一個單獨的zlevel。需要注意的是過多的 Canvas 會引起內存開銷的增大，在手機端上需要謹慎使用以防崩潰。

zlevel 大的 Canvas 會放在 zlevel 小的 Canvas 的上面。

singleAxis.z   |   number

[ default: 2 ]

singleAxis 組件的所有圖形的z值?？刂茍D形的前后順序。z值小的圖形會被z值大的圖形覆蓋。

z相比zlevel優(yōu)先級更低，而且不會創(chuàng)建新的 Canvas。

singleAxis.left   |   string, number

[ default: '5%' ]

singleAxis 組件離容器左側的距離。

left 的值可以是像 20 這樣的具體像素值，可以是像 '20%' 這樣相對于容器高寬的百分比，也可以是 'left', 'center', 'right'。

如果 left 的值為'left', 'center', 'right'，組件會根據相應的位置自動對齊。

singleAxis.top   |   string, number

[ default: '5%' ]

singleAxis 組件離容器上側的距離。

top 的值可以是像 20 這樣的具體像素值，可以是像 '20%' 這樣相對于容器高寬的百分比，也可以是 'top', 'middle', 'bottom'。

如果 top 的值為'top', 'middle', 'bottom'，組件會根據相應的位置自動對齊。

singleAxis.right   |   string, number

[ default: '5%' ]

singleAxis 組件離容器右側的距離。

right 的值可以是像 20 這樣的具體像素值，可以是像 '20%' 這樣相對于容器高寬的百分比。

singleAxis.bottom   |   string, number

[ default: '5%' ]

singleAxis 組件離容器下側的距離。

bottom 的值可以是像 20 這樣的具體像素值，可以是像 '20%' 這樣相對于容器高寬的百分比。

singleAxis.width   |   string, number

[ default: 'auto' ]

singleAxis 組件的寬度。默認自適應。

singleAxis.height   |   string, number

[ default: 'auto' ]

singleAxis 組件的高度。默認自適應。

singleAxis.orient   |   string

[ default: 'horizontal' ]

singleAxis 組件軸的朝向，默認水平朝向，可以設置成 'vertical' 垂直朝向。

singleAxis.type   |   string

[ default: 'value' ]

坐標軸類型。

可選：

• 'value' 數值軸，適用于連續(xù)數據。
• 'category' 類目軸，適用于離散的類目數據，為該類型時必須通過 data 設置類目數據。
• 'time' 時間軸，適用于連續(xù)的時序數據，與數值軸相比時間軸帶有時間的格式化，在刻度計算上也有所不同，例如會根據跨度的范圍來決定使用月，星期，日還是小時范圍的刻度。
• 'log' 對數軸。適用于對數數據。

singleAxis.name   |   string

坐標軸名稱。

singleAxis.nameLocation   |   string

[ default: 'end' ]

坐標軸名稱顯示位置。

可選：

• 'start'
• 'middle' 或者 'center'
• 'end'

singleAxis.nameTextStyle   |   Object

坐標軸名稱的文字樣式。

singleAxis.nameGap   |   number

[ default: 15 ]

坐標軸名稱與軸線之間的距離。

singleAxis.nameRotate   |   number

[ default: null ]

坐標軸名字旋轉，角度值。

singleAxis.inverse   |   boolean

[ default: false ]

是否是反向坐標軸。ECharts 3 中新加。

singleAxis.boundaryGap   |   boolean, Array

坐標軸兩邊留白策略，類目軸和非類目軸的設置和表現不一樣。

類目軸中 boundaryGap 可以配置為 true 和 false。默認為 true，這時候刻度只是作為分隔線，標簽和數據點都會在兩個刻度之間的帶(band)中間。

非類目軸，包括時間，數值，對數軸，boundaryGap是一個兩個值的數組，分別表示數據最小值和最大值的延伸范圍，可以直接設置數值或者相對的百分比，在設置 min 和 max 后無效。 示例：

boundaryGap: ['20%', '20%']

singleAxis.min   |   number, string, function

[ default: null ]

坐標軸刻度最小值。

可以設置成特殊值 'dataMin'，此時取數據在該軸上的最小值作為最小刻度。

不設置時會自動計算最小值保證坐標軸刻度的均勻分布。

在類目軸中，也可以設置為類目的序數（如類目軸 data: ['類A', '類B', '類C'] 中，序數 2 表示 '類C'。也可以設置為負數，如 -3）。

當設置成 function 形式時，可以根據計算得出的數據最大最小值設定坐標軸的最小值。如：

min: function(value) {
    return value.min - 20;
}

其中 value 是一個包含 min 和 max 的對象，分別表示數據的最大最小值，這個函數應該返回坐標軸的最小值。

singleAxis.max   |   number, string

[ default: null ]

坐標軸刻度最大值。

可以設置成特殊值 'dataMax'，此時取數據在該軸上的最大值作為最大刻度。

不設置時會自動計算最大值保證坐標軸刻度的均勻分布。

在類目軸中，也可以設置為類目的序數（如類目軸 data: ['類A', '類B', '類C'] 中，序數 2 表示 '類C'。也可以設置為負數，如 -3）。

當設置成 function 形式時，可以根據計算得出的數據最大最小值設定坐標軸的最小值。如：

max: function(value) {
    return value.max - 20;
}

其中 value 是一個包含 min 和 max 的對象，分別表示數據的最大最小值，這個函數應該返回坐標軸的最大值。

singleAxis.scale   |   boolean

[ default: false ]

只在數值軸中（type: 'value'）有效。

是否是脫離 0 值比例。設置成 true 后坐標刻度不會強制包含零刻度。在雙數值軸的散點圖中比較有用。

在設置 min 和 max 之后該配置項無效。

singleAxis.splitNumber   |   number

[ default: 5 ]

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

在類目軸中無效。

singleAxis.minInterval   |   number

[ default: 0 ]

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

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

{
    minInterval: 1
}

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

singleAxis.maxInterval   |   number

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

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

{
    maxInterval: 3600 * 24 * 1000
}

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

singleAxis.interval   |   number

強制設置坐標軸分割間隔。

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

無法在類目軸中使用。在時間軸（type: 'time'）中需要傳時間戳，在對數軸（type: 'log'）中需要傳指數值。

singleAxis.logBase   |   number

[ default: 10 ]

對數軸的底數，只在對數軸中（type: 'log'）有效。

singleAxis.silent   |   boolean

[ default: false ]

坐標軸是否是靜態(tài)無法交互。

singleAxis.triggerEvent   |   boolean

[ default: false ]

坐標軸的標簽是否響應和觸發(fā)鼠標事件，默認不響應。

事件參數如下：

{
    // 組件類型，xAxis, yAxis, radiusAxis, angleAxis
    // 對應組件類型都會有一個屬性表示組件的 index，例如 xAxis 就是 xAxisIndex
    componentType: string,
    // 未格式化過的刻度值, 點擊刻度標簽有效
    value:'',
    // 坐標軸名稱, 點擊坐標軸名稱有效
    name:''
}