代碼示例:java
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] } ] };
效果圖:app
主要代碼:(設置預警線值,樣式,文本)code
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,分爲最大,最小,平均值 } ] }