Echarts X軸（xAxis）

 

ECharts
專欄收錄該內容

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)'
},
},
}