效果图:
项目需求:在警戒线之内的线段显示正常颜色,低于警戒线或者高于警戒线的线段显示红色。
1,警戒线。
其实就是markLine属性。
series: [{
markLine:{
data:[
{
yAxis:100,
label:{
padding: [0, 0, 0, -75],
position: "end",
formatter:(e)=>{
return "最大阈值:"+e.value
}
}
},
{
yAxis: 60,//警戒值
label:{
padding: [0, 0, 0, -75],//警戒线标签名距离警戒线的位置
position: "end",//警戒线标签的定位,还有minddle等字段。
formatter:(e)=>{//自定义警戒线标签名
return "最小阈值:"+e.value
}
}
},
],
silent: false,//鼠标移入警戒线,警戒线会变粗,false不变,true变
symbol:false,
lineStyle: {//警戒线的样式,颜色,宽度,类型
color: 'red',
type: 'dashed',//还有实线,
width: 1
},
}
}],
2,超出警戒线标红显示
就是visualMap这个属性,和series并列的,同级。
visualMap:{
pieces:[
{
lte:60,
color:"red"
},
{
gt:60,
lte:100,
color:"#5470c6"
},
{
gt:100,
color:"red"
},
],
left:"center",//标签距离左边的距离,还可以用left。center等字段
top: "25",//标签距离顶部距离。还可以用top。middle等字段
orient: "horizontal",//标签排列方式,水平和垂直
show:false,//标签是否显示
},
lt(小于,little than)
gt(大于,greater than)
lte(小于等于 lettle than or equals)
gte(大于等于,greater than or equals)
📢没了,结束了,是不是很简单呐,如有问题,欢迎留言。
📢如果此篇博文对您有帮助,还请动动小手点赞 👍 收藏 ⭐留言 📝呐~,谢谢 ~ ~