新聞中心
ECharts 中設置 parallel 坐標軸的方法有兩種,分別是使用 parallel 坐標軸組件(parallelAxis)和 parallelAxisDefault。后一種方法我們已經講解過來,本節(jié)介紹如何使用 parallelAxis 組件設置平行坐標系的坐標軸。

創(chuàng)新互聯建站是一家集網站建設,德保企業(yè)網站建設,德保品牌網站建設,網站定制,德保網站建設報價,網絡營銷,網絡優(yōu)化,德保網站推廣為一體的創(chuàng)新建站企業(yè),幫助傳統企業(yè)提升企業(yè)形象加強企業(yè)競爭力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯網需求。同時我們時刻保持專業(yè)、時尚、前沿,時刻以成就客戶成長自我,堅持不斷學習、思考、沉淀、凈化自己,讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網站。
parallelAxis.dim | number
設置 parallel 坐標軸的維度序號。
例如 series-parallel.data 中有如下數據:
[
[1, 55, 9, 56, 0.46, 18, 6, '良'],
[2, 25, 11, 21, 0.65, 34, 9, '優(yōu)'],
[3, 56, 7, 63, 0.3, 14, 5, '良'],
[4, 33, 7, 29, 0.33, 16, 6, '優(yōu)'],
{ // 數據項也可以是 Object,從而里面能含有對線條的特殊設置。
value: [5, 42, 24, 44, 0.76, 40, 16, '優(yōu)']
lineStyle: {...},
}
...
]數據中,每一行是一個『數據項』,每一列屬于一個『維度』。(例如上面數據每一列的含義分別是:『日期』,『AQI指數』, 『PM2.5』, 『PM10』, 『一氧化碳值』, 『二氧化氮值』, 『二氧化硫值』)。
dim 定義了數據的哪個維度(即哪個『列』)會對應到此坐標軸上。
從 0 開始計數。例如,假設坐標軸的 dim 為 1,則表示數據中的第二列會對應到此坐標軸上。
parallelAxis.parallelIndex | number
[ default: 0 ]
用于定義『坐標軸』對應到哪個『坐標系』中。
比如有如下配置:
myChart.setOption({
parallel: [
{...}, // 第一個平行坐標系
{...} // 第二個平行坐標系
],
parallelAxis: [
{parallelIndex: 1, ...}, // 第一個坐標軸,對應到第二個平行坐標系
{parallelIndex: 0, ...}, // 第二個坐標軸,對應到第一個平行坐標系
{parallelIndex: 1, ...}, // 第三個坐標軸,對應到第二個平行坐標系
{parallelIndex: 0, ...} // 第四個坐標軸,對應到第一個平行坐標系
],
...
});只有一個平行坐標系時可不用設置,自動取默認值 0。
parallelAxis.realtime | boolean
[ default: true ]
是否坐標軸刷選的時候,實時刷新視圖。如果設為 false,則在刷選動作結束時候,才刷新視圖。
大數據量時,建議設置成 false,從而避免卡頓。
parallelAxis.type | string
[ default: value ]
設定 parallel 坐標軸的類型。
可選:
- 'value' 數值軸,適用于連續(xù)數據。
- 'category' 類目軸,適用于離散的類目數據,為該類型時必須通過 data 設置類目數據。
- 'time' 時間軸,適用于連續(xù)的時序數據,與數值軸相比時間軸帶有時間的格式化,在刻度計算上也有所不同,例如會根據跨度的范圍來決定使用月,星期,日還是小時范圍的刻度。
- 'log' 對數軸。適用于對數數據。
parallelAxis.name | string
設置 parallel 坐標軸名稱。
parallelAxis.nameLocation | string
[ default: 'end' ]
設置 parallel 坐標軸名稱顯示位置。
可選:
- 'start'
- 'middle' 或者 'center'
- 'end'
parallelAxis.nameTextStyle | Object
設置 parallel 坐標軸名稱的文字樣式。
parallelAxis.nameGap | number
[ default: 15 ]
設置 parallel 坐標軸名稱與軸線之間的距離。
parallelAxis.nameRotate | number
[ default: null ]
設置 parallel 坐標軸名字旋轉,角度值。
parallelAxis.inverse | boolean
[ default: false ]
是否是反向坐標軸。這個屬性是 ECharts 3 中新加的。
parallelAxis.boundaryGap | boolean, Array
坐標軸兩邊留白策略,類目軸和非類目軸的設置和表現不一樣。
類目軸中 boundaryGap 可以配置為 true 和 false。默認為 true,這時候刻度只是作為分隔線,標簽和數據點都會在兩個刻度之間的帶(band)中間。
非類目軸,包括時間,數值,對數軸,boundaryGap是一個兩個值的數組,分別表示數據最小值和最大值的延伸范圍,可以直接設置數值或者相對的百分比,在設置 min 和 max 后無效。 示例:
boundaryGap: ['20%', '20%']parallelAxis.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 的對象,分別表示數據的最大最小值,這個函數應該返回坐標軸的最小值。
parallelAxis.max | number, string
[ default: null ]
坐標軸刻度最大值。
可以設置成特殊值 'dataMax',此時取數據在該軸上的最大值作為最大刻度。
不設置時會自動計算最大值保證坐標軸刻度的均勻分布。
在類目軸中,也可以設置為類目的序數(如類目軸 data: ['類A', '類B', '類C'] 中,序數 2 表示 '類C'。也可以設置為負數,如 -3)。
當設置成 function 形式時,可以根據計算得出的數據最大最小值設定坐標軸的最小值。如:
max: function(value) {
return value.max - 20;
}其中 value 是一個包含 min 和 max 的對象,分別表示數據的最大最小值,這個函數應該返回坐標軸的最大值。
parallelAxis.scale | boolean
[ default: false ]
只在數值軸中(type: 'value')有效。
是否是脫離 0 值比例。設置成 true 后坐標刻度不會強制包含零刻度。在雙數值軸的散點圖中比較有用。
在設置 min 和 max 之后該配置項無效。
parallelAxis.splitNumber | number
[ default: 5 ]
坐標軸的分割段數,需要注意的是這個分割段數只是個預估值,最后實際顯示的段數會在這個基礎上根據分割后坐標軸刻度顯示的易讀程度作調整。
在類目軸中無效。
parallelAxis.minInterval | number
[ default: 0 ]
自動計算的坐標軸最小間隔大小。
例如可以設置成1保證坐標軸分割刻度顯示成整數。
{
minInterval: 1
}只在數值軸或時間軸中(type: 'value' 或 'time')有效。
parallelAxis.maxInterval | number
自動計算的坐標軸最大間隔大小。
例如,在時間軸((type: 'time'))可以設置成 3600 * 24 * 1000 保證坐標軸分割刻度最大為一天。
{
maxInterval: 3600 * 24 * 1000
}只在數值軸或時間軸中(type: 'value' 或 'time')有效。
parallelAxis.interval | number
強制設置坐標軸分割間隔。
因為 splitNumber 是預估的值,實際根據策略計算出來的刻度可能無法達到想要的效果,這時候可以使用 interval 配合 min、max 強制設定刻度劃分,一般不建議使用。
無法在類目軸中使用。在時間軸(type: 'time')中需要傳時間戳,在對數軸(type: 'log')中需要傳指數值。
parallelAxis.logBase | number
[ default: 10 ]
對數軸的底數,只在對數軸中(type: 'log')有效。
parallelAxis.silent | boolean
[ default: false ]
坐標軸是否是靜態(tài)無法交互。
parallelAxis.triggerEvent | boolean
[ default: false ]
坐標軸的標簽是否響應和觸發(fā)鼠標事件,默認不響應。
事件參數如下:
{
// 組件類型,xAxis, yAxis, radiusAxis, angleAxis
// 對應組件類型都會有一個屬性表示組件的 index,例如 xAxis 就是 xAxisIndex
componentType: string,
// 未格式化過的刻度值, 點擊刻度標簽有效
value: '',
// 坐標軸名稱, 點擊坐標軸名稱有效
name: ''
} 網站欄目:創(chuàng)新互聯ECharts教程:parallel坐標軸組件的使用
文章起源:http://www.dlmjj.cn/article/dpgedoj.html


咨詢
建站咨詢
