問題
一個折線圖中有多條折線。由于折線之間數(shù)值范圍相差較大(折線A范圍[0-50],折線B范圍[10000-20000]……),如果用單Y軸來表示,折線的變化趨勢不明顯。
解決方案
1、最開始想到的是多Y軸方式,每個折線對應(yīng)一個Y軸
var option = {
……
yAxis : [
{
name : "A",
type : 'value',
scale : false,
show : true,
splitLine:{
show:true
},
position : 'left',
},
{
name : "B",
type : 'value',
scale : true,
show : false,
splitLine:{
show:false
},
position : 'right',
},
{
name : "C",
type : 'value',
scale : true,
show : false,
splitLine:{
show:false
},
offset: 50,
position : 'left'
},
……
],
series : [
{
name:'A',
type:'line',
yAxisIndex:0,
data:AArr,
},
{
name:'B',
type:'line',
yAxisIndex:1,
data:BArr,
},
{
name:'C',
type:'line',
yAxisIndex:2,
data:CArr,
},
……
]
};
-
position坐標(biāo)軸類型,橫軸默認(rèn)為類目型'bottom',縱軸默認(rèn)為數(shù)值型'left',可選為:'bottom' | 'top' | 'left' | 'right' -
offsetY 軸相對于默認(rèn)位置的偏移,在相同的 position 上有多個 Y 軸的時候有用。 -
yAxisIndex當(dāng)不指定時默認(rèn)控制所有縱向類目,可通過數(shù)組指定多個需要控制的縱向類目坐標(biāo)軸Index,僅一個時可直接為數(shù)字。第一個Y軸yAxisIndex為0
這樣就可以將多個折線對應(yīng)多個Y軸。但當(dāng)Y軸過多時(實際使用時有6條曲線),會顯得頁面太復(fù)雜。
2、在方案1的基礎(chǔ)上不顯示Y軸,只顯示折線變化趨勢
var option = {
……
yAxis : [
{
name : "A",
type : 'value',
scale : false,
show : false,
splitLine:{
show:false
},
position : 'left',
},
……
],
……
};
-
show置為false不展示
每個Y軸都這樣隱藏后,Y軸不再展示,界面只展示折線的變化趨勢。但這樣無法通過Y軸得到每條折線的大概范圍,只能去選擇折線的最高點(diǎn)與最低點(diǎn)來判斷,也不夠直接。
3、每次只展示一條折線
var option = {
legend: {
x : 'center',
borderWidth : '1',
data:YDescrib,
selectedMode: 'single',
},
calculable : true,
xAxis : [
{
type : 'category',
boundaryGap : false,
data : xScale
}
],
yAxis : [
{
type : 'value',
scale : true,
show : true,
splitLine:{
show:true
},
},
],
series : [
{
name:'A',
type:'line',
data:AArr,
},
{
name:'B',
type:'line',
data:BArr,
},
{
name:'C',
type:'line',
data:CArr,
},
……
]
};
selectedMode[ default: true ] 圖例選擇的模式,控制是否可以通過點(diǎn)擊圖例改變系列的顯示狀態(tài)。默認(rèn)開啟圖例選擇,可以設(shè)成 false 關(guān)閉。除此之外也可以設(shè)成 'single' 或者 'multiple' 使用單選或者多選模式。yAxis
scale[ default: false ] 是否是脫離 0 值比例。設(shè)置成 true
后坐標(biāo)刻度不會強(qiáng)制包含零刻度。在雙數(shù)值軸的散點(diǎn)圖中比較有用。在設(shè)置 min 和 max 之后該配置項無效。
通過設(shè)置為single與scale:true后,對Y軸進(jìn)行復(fù)用,并每次只展示一條折線,這樣能夠較好的展示每個折線的變化趨勢與大致范圍,不過一次看不了多個折線的……