【echart】折线图设置多条不同颜色的图表标线，并动态设置y轴最大值；取消折线图标记点

米老鼠的摩托车日记

已于 2023-12-01 15:56:35 修改

阅读量741

点赞数

分类专栏： echarts 文章标签：前端 css echarts vue

于 2023-12-01 15:10:23 首次发布

本文链接：https://blog.csdn.net/weixin_41747256/article/details/134735341

版权

echarts 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

最终图表的样式

代码如下：

        series: [
         
          {
            name: item.monitorCnName,
            data: hisDataList,
            lineStyle:{
              color:'rgb(80, 189, 255)'
            },
            type: 'line',
            showSymbol: false,//取消折线上的标点
            smooth:true,//折线变得丝滑
            markLine:{
              lineStyle:{
                color:'rgb(247, 172, 69)',
                cap:'round',
              },
              
              data:[
                {
                  name:'最大值',
                  yAxis:maxValueNew,//第一条标线的值
                  lineStyle:{
                    color:'rgb(238, 102, 102)',//第一条标线的颜色
                  },
                  label:{
                    color:'rgb(238, 102, 102)',//第一条标线的名称颜色
                    formatter:'最大值'//第一条标线的名称
                }
                },
                {
                  name:'最小值',
                  yAxis:minValueNew,
                  lineStyle:{
                    color:'rgb(145, 204, 117)',
                  },
                  label:{
                    color:'rgb(145, 204, 117)',
                    formatter:'最小值'
                }
                },
                {
                  name:'最适值',
                  yAxis:suitableValueNew,
                  lineStyle:{
                    color:'rgb(250, 200, 88)',
                  },
                  label:{
                    color:'rgb(250, 200, 88)',
                    formatter:'最适值'
                }
                }
              ]
            }
          },
        ],

因为如果标线大于最大值，这条标线会不显示，所以y轴需要动态设置

        yAxis: [{
          type: 'value',
          name: item.unit,
          splitLine: {
            //去除网格线
            show: false,
          },
          max:function(value){//动态设置y轴最大值，与标线值做比较
            if(value.max>maxValueNew){
              return Math.ceil(value.max)
            }else{
              return Math.ceil(maxValueNew)
            }
          },
          axisLine: {
            //y轴线的颜色以及宽度
            show: true,
            lineStyle: {
              color: '#FFFFFF',
              width: 1,
              type: 'solid',
            },
          },
          
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(255,255,255,0.3)',
            },
          },
          // splitNumber: 5,
        }],