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

最新推荐文章于 2024-08-08 18:06:31 发布

杨同学*

最新推荐文章于 2024-08-08 18:06:31 发布

阅读量7k

点赞数 14

分类专栏： echarts 文章标签： echarts javascript ecmascript

本文链接：https://blog.csdn.net/m0_52539553/article/details/122220184

版权

echarts 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

本文介绍了如何使用Echarts在图表中设置警戒线，当数据低于或高于设定值时线段显示为红色。通过`markLine`属性设置警戒线，包括最大阈值和最小阈值的显示。同时，利用`visualMap`属性实现超出警戒线的数据部分以红色高亮显示，详细阐述了各配置项的用法和含义。

摘要由CSDN通过智能技术生成

在这里插入图片描述

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