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,分为最大,最小,平均值 } ] }
致敬:2020年的自己
--------------------------------------------
即使不为了什么远大理想,为了好好生活,你也得努力奋斗啊,不然别说什么风花雪月了,柴米油盐也能让你一筹莫展。