建站
咨詢
售后
建站咨詢
新聞中心
這一章介紹了 ECharts singleAxis 組件的使用以及它的一些基本屬性。
singleAxis
singleAxis 是 ECharts 中的單軸。它可以被應(yīng)用到散點(diǎn)圖中展現(xiàn)一維數(shù)據(jù)，如下示例：
點(diǎn)擊編輯實(shí)例 》》
singleAxis.zlevel | number
[ default: 0 ]
設(shè)置所有單軸圖形的 zlevel 值。
zlevel用于 Canvas 分層，不同zlevel值的圖形會(huì)放置在不同的 Canvas 中，Canvas 分層是一種常見的優(yōu)化手段。我們可以把一些圖形變化頻繁（例如有動(dòng)畫）的組件設(shè)置成一個(gè)單獨(dú)的zlevel。需要注意的是過(guò)多的 Canvas 會(huì)引起內(nèi)存開銷的增大，在手機(jī)端上需要謹(jǐn)慎使用以防崩潰。
zlevel 大的 Canvas 會(huì)放在 zlevel 小的 Canvas 的上面。
singleAxis.z | number
[ default: 2 ]
singleAxis 組件的所有圖形的z值。控制圖形的前后順序。z值小的圖形會(huì)被z值大的圖形覆蓋。
z相比zlevel優(yōu)先級(jí)更低，而且不會(huì)創(chuàng)建新的 Canvas。
singleAxis.left | string, number
[ default: '5%' ]
singleAxis 組件離容器左側(cè)的距離。
left 的值可以是像 20 這樣的具體像素值，可以是像 '20%' 這樣相對(duì)于容器高寬的百分比，也可以是 'left', 'center', 'right'。
如果 left 的值為'left', 'center', 'right'，組件會(huì)根據(jù)相應(yīng)的位置自動(dòng)對(duì)齊。
singleAxis.top | string, number
[ default: '5%' ]
singleAxis 組件離容器上側(cè)的距離。
top 的值可以是像 20 這樣的具體像素值，可以是像 '20%' 這樣相對(duì)于容器高寬的百分比，也可以是 'top', 'middle', 'bottom'。
如果 top 的值為'top', 'middle', 'bottom'，組件會(huì)根據(jù)相應(yīng)的位置自動(dòng)對(duì)齊。
singleAxis.right | string, number
[ default: '5%' ]
singleAxis 組件離容器右側(cè)的距離。
right 的值可以是像 20 這樣的具體像素值，可以是像 '20%' 這樣相對(duì)于容器高寬的百分比。
singleAxis.bottom | string, number
[ default: '5%' ]
singleAxis 組件離容器下側(cè)的距離。
bottom 的值可以是像 20 這樣的具體像素值，可以是像 '20%' 這樣相對(duì)于容器高寬的百分比。
singleAxis.width | string, number
[ default: 'auto' ]
singleAxis 組件的寬度。默認(rèn)自適應(yīng)。
singleAxis.height | string, number
[ default: 'auto' ]
singleAxis 組件的高度。默認(rèn)自適應(yīng)。
singleAxis.orient | string
[ default: 'horizontal' ]
singleAxis 組件軸的朝向，默認(rèn)水平朝向，可以設(shè)置成 'vertical' 垂直朝向。
singleAxis.type | string
[ default: 'value' ]
坐標(biāo)軸類型。
可選：
- 'value' 數(shù)值軸，適用于連續(xù)數(shù)據(jù)。
- 'category' 類目軸，適用于離散的類目數(shù)據(jù)，為該類型時(shí)必須通過(guò) data 設(shè)置類目數(shù)據(jù)。
- 'time' 時(shí)間軸，適用于連續(xù)的時(shí)序數(shù)據(jù)，與數(shù)值軸相比時(shí)間軸帶有時(shí)間的格式化，在刻度計(jì)算上也有所不同，例如會(huì)根據(jù)跨度的范圍來(lái)決定使用月，星期，日還是小時(shí)范圍的刻度。
- 'log' 對(duì)數(shù)軸。適用于對(duì)數(shù)數(shù)據(jù)。
singleAxis.name | string
坐標(biāo)軸名稱。
singleAxis.nameLocation | string
[ default: 'end' ]
坐標(biāo)軸名稱顯示位置。
可選：
- 'start'
- 'middle' 或者 'center'
- 'end'
singleAxis.nameTextStyle | Object
坐標(biāo)軸名稱的文字樣式。
singleAxis.nameGap | number
[ default: 15 ]
坐標(biāo)軸名稱與軸線之間的距離。
singleAxis.nameRotate | number
[ default: null ]
坐標(biāo)軸名字旋轉(zhuǎn)，角度值。
singleAxis.inverse | boolean
[ default: false ]
是否是反向坐標(biāo)軸。ECharts 3 中新加。
singleAxis.boundaryGap | boolean, Array
坐標(biāo)軸兩邊留白策略，類目軸和非類目軸的設(shè)置和表現(xiàn)不一樣。
類目軸中 boundaryGap 可以配置為 true 和 false。默認(rèn)為 true，這時(shí)候刻度只是作為分隔線，標(biāo)簽和數(shù)據(jù)點(diǎn)都會(huì)在兩個(gè)刻度之間的帶(band)中間。
非類目軸，包括時(shí)間，數(shù)值，對(duì)數(shù)軸，boundaryGap是一個(gè)兩個(gè)值的數(shù)組，分別表示數(shù)據(jù)最小值和最大值的延伸范圍，可以直接設(shè)置數(shù)值或者相對(duì)的百分比，在設(shè)置 min 和 max 后無(wú)效。 示例：
boundaryGap: ['20%', '20%']singleAxis.min | number, string, function
[ default: null ]
坐標(biāo)軸刻度最小值。
可以設(shè)置成特殊值 'dataMin'，此時(shí)取數(shù)據(jù)在該軸上的最小值作為最小刻度。
不設(shè)置時(shí)會(huì)自動(dòng)計(jì)算最小值保證坐標(biāo)軸刻度的均勻分布。
在類目軸中，也可以設(shè)置為類目的序數(shù)（如類目軸 data: ['類A', '類B', '類C'] 中，序數(shù) 2 表示 '類C'。也可以設(shè)置為負(fù)數(shù)，如 -3）。
當(dāng)設(shè)置成 function 形式時(shí)，可以根據(jù)計(jì)算得出的數(shù)據(jù)最大最小值設(shè)定坐標(biāo)軸的最小值。如：
min: function(value) {
return value.min - 20;
}其中 value 是一個(gè)包含 min 和 max 的對(duì)象，分別表示數(shù)據(jù)的最大最小值，這個(gè)函數(shù)應(yīng)該返回坐標(biāo)軸的最小值。
singleAxis.max | number, string
[ default: null ]
坐標(biāo)軸刻度最大值。
可以設(shè)置成特殊值 'dataMax'，此時(shí)取數(shù)據(jù)在該軸上的最大值作為最大刻度。
不設(shè)置時(shí)會(huì)自動(dòng)計(jì)算最大值保證坐標(biāo)軸刻度的均勻分布。
在類目軸中，也可以設(shè)置為類目的序數(shù)（如類目軸 data: ['類A', '類B', '類C'] 中，序數(shù) 2 表示 '類C'。也可以設(shè)置為負(fù)數(shù)，如 -3）。
當(dāng)設(shè)置成 function 形式時(shí)，可以根據(jù)計(jì)算得出的數(shù)據(jù)最大最小值設(shè)定坐標(biāo)軸的最小值。如：
max: function(value) {
return value.max - 20;
}其中 value 是一個(gè)包含 min 和 max 的對(duì)象，分別表示數(shù)據(jù)的最大最小值，這個(gè)函數(shù)應(yīng)該返回坐標(biāo)軸的最大值。
singleAxis.scale | boolean
[ default: false ]
只在數(shù)值軸中（type: 'value'）有效。
是否是脫離 0 值比例。設(shè)置成 true 后坐標(biāo)刻度不會(huì)強(qiáng)制包含零刻度。在雙數(shù)值軸的散點(diǎn)圖中比較有用。
在設(shè)置 min 和 max 之后該配置項(xiàng)無(wú)效。
singleAxis.splitNumber | number
[ default: 5 ]
坐標(biāo)軸的分割段數(shù)，需要注意的是這個(gè)分割段數(shù)只是個(gè)預(yù)估值，最后實(shí)際顯示的段數(shù)會(huì)在這個(gè)基礎(chǔ)上根據(jù)分割后坐標(biāo)軸刻度顯示的易讀程度作調(diào)整。
在類目軸中無(wú)效。
singleAxis.minInterval | number
[ default: 0 ]
自動(dòng)計(jì)算的坐標(biāo)軸最小間隔大小。
例如可以設(shè)置成1保證坐標(biāo)軸分割刻度顯示成整數(shù)。
{
minInterval: 1
}只在數(shù)值軸或時(shí)間軸中（type: 'value' 或 'time'）有效。
singleAxis.maxInterval | number
自動(dòng)計(jì)算的坐標(biāo)軸最大間隔大小。
例如，在時(shí)間軸（（type: 'time'））可以設(shè)置成 3600 * 24 * 1000 保證坐標(biāo)軸分割刻度最大為一天。
{
maxInterval: 3600 * 24 * 1000
}只在數(shù)值軸或時(shí)間軸中（type: 'value' 或 'time'）有效。
singleAxis.interval | number
強(qiáng)制設(shè)置坐標(biāo)軸分割間隔。
因?yàn)?nbsp;splitNumber 是預(yù)估的值，實(shí)際根據(jù)策略計(jì)算出來(lái)的刻度可能無(wú)法達(dá)到想要的效果，這時(shí)候可以使用 interval 配合 min、max 強(qiáng)制設(shè)定刻度劃分，一般不建議使用。
無(wú)法在類目軸中使用。在時(shí)間軸（type: 'time'）中需要傳時(shí)間戳，在對(duì)數(shù)軸（type: 'log'）中需要傳指數(shù)值。
singleAxis.logBase | number
[ default: 10 ]
對(duì)數(shù)軸的底數(shù)，只在對(duì)數(shù)軸中（type: 'log'）有效。
singleAxis.silent | boolean
[ default: false ]
坐標(biāo)軸是否是靜態(tài)無(wú)法交互。
singleAxis.triggerEvent | boolean
[ default: false ]
坐標(biāo)軸的標(biāo)簽是否響應(yīng)和觸發(fā)鼠標(biāo)事件，默認(rèn)不響應(yīng)。
事件參數(shù)如下：
{
// 組件類型，xAxis, yAxis, radiusAxis, angleAxis
// 對(duì)應(yīng)組件類型都會(huì)有一個(gè)屬性表示組件的 index，例如 xAxis 就是 xAxisIndex
componentType: string,
// 未格式化過(guò)的刻度值, 點(diǎn)擊刻度標(biāo)簽有效
value:'',
// 坐標(biāo)軸名稱, 點(diǎn)擊坐標(biāo)軸名稱有效
name:''
}當(dāng)前名稱：創(chuàng)新互聯(lián)ECharts教程：EChartssingleAxis組件基本使用
文章鏈接：http://fisionsoft.com.cn/article/dpogjcd.html
