代碼示例:
app.title = '坐標軸刻度與標簽對齊';
option = {
color: ['#3398DB'],
tooltip : {
trigger: 'axis',
axisPointer : { // 坐標軸指示器,坐標軸觸發有效
type : 'shadow' // 默認為直線,可選為:'line' | 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis : [
{
type : 'category',
data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisTick: {
alignWithLabel: true
}
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'直接訪問',
type:'bar',
barWidth: '60%',
data:[10, 52, 200, 334, 390, 330, 220]
}
]
};
效果圖:

主要代碼:(設置預警線值,樣式,文本)
markLine : {
symbol:"none",
/*symbol:"none", //去掉警戒線最后面的箭頭
label:{
position:"end" , //將警示值放在哪個位置,三個值“start”,"middle","end" 開始 中點 結束
},*/
data : [{
silent:false, //鼠標懸停事件 true沒有,false有
lineStyle:{ //警戒線的樣式 ,虛實 顏色
type:"solid",
color:"#3398DB",
},
label:{
position:'end',
formatter:"及格(150)"
},
yAxis:150 // 警戒線的標注值,可以有多個yAxis,多條警示線 或者采用 {type : 'average', name: '平均值'},type值有 max min average,分為最大,最小,平均值
},
{
silent:false, //鼠標懸停事件 true沒有,false有
lineStyle:{ //警戒線的樣式 ,虛實 顏色
type:"solid",
color:"#FA3934",
},
label:{
position:'end',
formatter:"優秀(350)",
fontSize:'8'
},
yAxis:350 // 警戒線的標注值,可以有多個yAxis,多條警示線 或者采用 {type : 'average', name: '平均值'},type值有 max min average,分為最大,最小,平均值
}
]
}
