echarts的markline的使用 y軸預警線


代碼示例:

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,分為最大,最小,平均值
						 
							}
							]
                        }  

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM