给echarts图表添加警戒线

给echarts图表添加警戒线

在这里插入图片描述
主要代码:(设置预警线值,样式,文本)

 markLine : {
    
    
             symbol:"none",
            
           /*symbol:"none",               //去掉警戒线最后面的箭头
           label:{
    
    
               position:"end"   ,       //将警示值放在哪个位置,三个值“start”,"middle","end"  开始  中点 结束
            
            
           },*/
           data : [{
    
    
                
               silent:false,             //鼠标悬停事件  true没有,false有
               lineStyle:{
    
                   //警戒线的样式  ,虚实  颜色
                   type:"solid",
                   color:"red",
                   width:3,
               },
                   label:{
    
    
                   position:'end', //end对应的值显示在警戒线的后面,start显示在前面(y轴上)
                   formatter:"及格(150)"  //和y轴对应的数值
               },
               yAxis:200         // 警戒线的标注值,可以有多个yAxis,多条警示线   或者采用   {
    
    type : 'average', name: '平均值'},type值有  max  min  average,分为最大,最小,平均值
              
           },
           ]
         },  

全部代码:

option = {
    
    
    xAxis: {
    
    
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
    
    
        type: 'value'
    },
    series: [{
    
    
        data: [120, 200, 150, 80, 70, 110, 130],
        markLine : {
    
    
             symbol:"none",
            
           /*symbol:"none",               //去掉警戒线最后面的箭头
           label:{
    
    
               position:"end"   ,       //将警示值放在哪个位置,三个值“start”,"middle","end"  开始  中点 结束
            
            
           },*/
           data : [{
    
    
                
               silent:false,             //鼠标悬停事件  true没有,false有
               lineStyle:{
    
                   //警戒线的样式  ,虚实  颜色
                   type:"solid",
                   color:"red",
                   width:3,
               },
                   label:{
    
    
                   position:'end',
                //   formatter:"及格(150)"
               },
               yAxis:200         // 警戒线的标注值,可以有多个yAxis,多条警示线   或者采用   {
    
    type : 'average', name: '平均值'},type值有  max  min  average,分为最大,最小,平均值
              
           },
           ]
         },  
            
        type: 'bar',
        showBackground: true,
        backgroundStyle: {
    
    
            color: 'rgba(220, 220, 220, 0.8)'
        }
    }]
};

猜你喜欢

转载自blog.csdn.net/qq_42208679/article/details/105628571
今日推荐