echarts圖表x,y軸的設置


https://www.cnblogs.com/cjh-strive/p/11065005.html

xAxis屬性代表echarts圖表的x軸設置代碼如下

xAxis : [
{
type : 'category',
// type:坐標軸類型。
// [ default: 'category' ]
/*可選:
1.'value' 數值軸,適用於連續數據;
2.'category' 類目軸,適用於離散的類目數據,為該類型時必須通過 data 設置類目數據;
3.'time' 時間軸,適用於連續的時序數據,與數值軸相比時間軸帶有時間的格式化,在刻度計算上也有所不同,例如會根據跨度的范圍來決定使用月,星期,日還是小時范圍的刻度;
4.'log' 對數軸。適用於對數數據。*/
data : ['上海','北京'], //x軸下面的數據
axisTick: {
show: false, //是否顯示網狀線 默認為true
alignWithLabel: true
},
//用於設置x下面的字體
axisLabel:{
show:true, //這里的show用於設置是否顯示x軸下的字體 默認為true
       interval:0, //可以設置成 0 強制顯示所有標簽。如果設置為 1,表示『隔一個標簽顯示一個標簽』,如果值為 2,表示隔兩個標簽顯示一個標簽,以此類推。
  
       textStyle:{ //textStyle里面寫x軸下的字體的樣式
color:'#333',
fontSize:13
}
},
axisLine:{
show:true, //這里的show用於設置是否顯示x軸那一條線 默認為true
lineStyle:{ //lineStyle里面寫x軸那一條線的樣式
color:'#6FC6F3',
width:2, //軸線的粗細 我寫的是2 最小為0,值為0的時候線隱藏
}
}
},
]

yAxis屬性代表echarts圖表的y軸,樣式設置方式與x軸的方式是一樣,就是設置的屬性會有所差異

yAxis:[{
min:0, //y軸的最小值
max:100, //y軸最大值
interval:20, //值之間的間隔
//上面的三個值可以根據自己需求隨意設置 不設置時會根據圖中的值自動生成相應的值

type:'value',
/* type坐標軸類型:[ default: 'value' ]
    可選:1.'value' 數值軸,適用於連續數據。
    2.'category' 類目軸,適用於離散的類目數據,為該類型時必須通過 data 設置類目數據。
3.'time' 時間軸,適用於連續的時序數據,與數值軸相比時間軸帶有時間的格式化,在刻度計算上也有所不同,例如會根據跨度的范圍來決定使用月,星期,日還是小時范圍的刻度。
4.'log' 對數軸。適用於對數數據。*/
splitLine:{show:false}, //去除網狀線 默認為true
//用於設置y軸的字體
axisLabel:{
show:true, //這里的show用於設置是否顯示y軸下的字體 默認為true
textStyle:{ //textStyle里面寫y軸下的字體的樣式
color:'#333',
fontSize:13
}
},
//用於設置y軸的那一條線
axisLine:{
show:true, //這里的show用於設置是否顯示y軸那一條線 默認為true
lineStyle:{ //lineStyle里面寫y軸那一條線的樣式
color:'#6FC6F3',
width:2, //軸線的粗細 我寫的是2 最小為0,值為0的時候線隱藏
}
}
}]


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM