天天看點

Echarts X軸(xAxis)

xAxis: {
show: true, // 是否顯示 x 軸
position: 'top', // x 軸的位置('top','bottom') 
type: 'category', // 坐标軸類型
nameRotate: 10, // 坐标軸名字旋轉,角度值
inverse: false, // 是否是反向坐标軸
boundaryGap: ['20%', '20%'], // 坐标軸兩邊留白政策
splitNumber: 5, // 坐标軸的分割段數(預估值)
axisLine: {
show: true, // 是否顯示坐标軸軸線
symbol: ['none', 'arrow'], // 軸線兩端箭頭,兩個值,none表示沒有箭頭,arrow表示有箭頭
symbolSize: [10, 15], // 軸線兩端箭頭大小,數值一表示寬度,數值二表示高度
lineStyle: {
color: '#333', // 坐标軸線線的顔色
width: '5', // 坐标軸線線寬
type: 'solid', // 坐标軸線線的類型('solid',實線類型;'dashed',虛線類型;'dotted',點狀類型)
},
},
axisTick: {
show: true, // 是否顯示坐标軸刻度
inside: true, // 坐标軸刻度是否朝内,預設朝外
length: 5, // 坐标軸刻度的長度
lineStyle: {
color: '#FFF', // 刻度線的顔色
width: 10, // 坐标軸刻度線寬
type: 'solid', // 坐标軸線線的類型('solid',實線類型;'dashed',虛線類型;'dotted',點狀類型)
},
},
axisLabel: {
show: true, // 是否顯示刻度标簽
interval: '0', // 坐标軸刻度标簽的顯示間隔,在類目軸中有效.0顯示所有
inside: true, // 刻度标簽是否朝内,預設朝外
rotate: 90, // 刻度标簽旋轉的角度,在類目軸的類目标簽顯示不下的時候可以通過旋轉防止标簽之間重疊;旋轉的角度從 -90 度到 90 度
margin: 10, // 刻度标簽與軸線之間的距離
// formatter 刻度标簽的内容格式器,支援字元串模闆和回調函數兩種形式
color: '#FFF', // 刻度标簽文字的顔色
fontStyle: 'normal', // 文字字型的風格('normal',無樣式;'italic',斜體;'oblique',傾斜字型) 
fontWeight: 'normal', // 文字字型的粗細('normal',無樣式;'bold',加粗;'bolder',加粗的基礎上再加粗;'lighter',變細;數字定義粗細也可以,取值範圍100至700)
fontSize: '20', // 文字字型大小
align: 'left', // 文字水準對齊方式,預設自動('left','center','right')
verticalAlign: 'left', // 文字垂直對齊方式,預設自動('top','middle','bottom'
lineHeight: '50', // 行高 )
backgroundColor: 'red', // 文字塊背景色,例:'#123234', 'red', 'rgba(0,23,11,0.3)'
},
splitLine: {
show: true, // 是否顯示分隔線。預設數值軸顯示,類目軸不顯示
interval: '0', // 坐标軸刻度标簽的顯示間隔,在類目軸中有效.0顯示所有
color: ['#ccc'], // 分隔線顔色,可以設定成單個顔色,也可以設定成顔色數組,分隔線會按數組中顔色的順序依次循環設定顔色
width: 3, // 分隔線線寬
type: 'solid', // 坐标軸線線的類型('solid',實線類型;'dashed',虛線類型;'dotted',點狀類型)
},
splitArea: {
show: true, // 是否顯示分隔區域
interval: '0', // 坐标軸刻度标簽的顯示間隔,在類目軸中有效.0顯示所有
areaStyle: {
color: ['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)'], // 分隔區域顔色。分隔區域會按數組中顔色的順序依次循環設定顔色。預設是一個深淺的間隔色
opacity: 1, // 圖形透明度。支援從 0 到 1 的數字,為 0 時不繪制該圖形
},
},
data: {
textStyle: {
color: '#FFF', // 文字的顔色
fontStyle: 'normal', // 文字字型的風格('normal',無樣式;'italic',斜體;'oblique',傾斜字型) 
fontWeight: 'normal', // 文字字型的粗細('normal',無樣式;'bold',加粗;'bolder',加粗的基礎上再加粗;'lighter',變細;數字定義粗細也可以,取值範圍100至700)
fontSize: '20', // 文字字型大小
align: 'left', // 文字水準對齊方式,預設自動('left','center','right')
verticalAlign: 'left', // 文字垂直對齊方式,預設自動('top','middle','bottom'
lineHeight: '50', // 行高 )
backgroundColor: 'red', // 文字塊背景色,例:'#123234', 'red', 'rgba(0,23,11,0.3)'
},
},
}