Echarts折线图多个图表的警戒线设置,超出标红显示、警戒线标签的样式

1,810 阅读1分钟

在这里插入图片描述

效果图:
在这里插入图片描述
项目需求:在警戒线之内的线段显示正常颜色,低于警戒线或者高于警戒线的线段显示红色。
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)
📢没了,结束了,是不是很简单呐,如有问题,欢迎留言。
📢如果此篇博文对您有帮助,还请动动小手点赞 👍 收藏 ⭐留言 📝呐~,谢谢 ~ ~