代碼示例:
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,分為最大,最小,平均值 } ] }