echarts的markline的使用 y軸預警線

代碼示例: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,分爲最大,最小,平均值
						 
							}
							]
                        }  
相關文章
相關標籤/搜索