echarts的markline的使用 y轴预警线

时间:2019-10-09
本文章向大家介绍echarts的markline的使用 y轴预警线,主要包括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,分为最大,最小,平均值
						 
							}
							]
                        }  

 

原文地址:https://www.cnblogs.com/zhukaixin/p/11641652.html