echarts的markline警标线(一条/多条)的使用

echarts之markLine(可以设置特定阈值线(警戒线))

一条线写法

 
     series: [
    {
      name: 'Fake Data',
      type: 'line',
      showSymbol: false,
      data: data,
      markLine: {
      symbol: ['none', 'none'], // 去掉箭头
      label: {
        show: false,
        position: 'start',
        formatter: '{b}'
      },
      data: [
        {
          name: '阈值',
          yAxis: 200
        }
      ],
      lineStyle: {
         type:'solid',
         color: '#FF1D00',
         width: 1
      }
    } 
    }
    }
  ]

二、多条不同颜色markLine

  markLine: {
    symbol: 'none',
    label: {
        show: false,
        position: 'start',
        formatter: '{b}'
     },
    lineStyle:{
      type:'solid',
      color: '#FF1D00',
      width: 1
},
data: [
{yAxis: '40',lineStyle: {color: '#FF1D00'},label: {color: '#FF1D00',,fontSize:10}},
{yAxis: '25',lineStyle: {color: '#FF7804'},label: {color: '#FF7804',fontSize:10}}]
},

需求

要在echart图表中加两条最大值(红色)最小值线(绿色)

在这里插入图片描述

res的数据格式

在这里插入图片描述在这里插入图片描述

方案一:

是将最大值/最小值数据放到一个数组中,组成一条线,放到Echart图中

data(){
  return{
      maxHumidityData: [],
      minHumidityData: [],
      humSeriesData:[]
     }
}
 generterChartData(res) {
      const chartData = res.humitureList.content
      chartData.map((r) => {
  // 湿度最大值 最小值
      let humMaxItem = []
      let humMaxObj = {}
      humMaxItem.push(r.createDate, res.maxTemperature)
      humMaxObj.name = r.createDate
      humMaxObj.value = humMaxItem
      this.maxHumidityData.push(humMaxObj)
      // 最小值折线数据
      let humMinItem = []
      let hunMinObj = {}
      humMinItem.push(r.createDate, res.minTemperature)
      hunMinObj.name = r.createDate
      hunMinObj.value = humMinItem
      this.minHumidityData.push(hunMinObj)
   )}
    let maxHumSeries = {
        name: '',
        type: "line",
        data: this.maxHumidityData,
        showSymbol: false,
        itemStyle: {
          normal: { lineStyle: { color: '#ff0000' } },
        },
      };
      // 湿度最小值
      let minHumSeries = {
        name: '',
        type: "line",
        data: this.minHumidityData,
        showSymbol: false,
        itemStyle: {
          normal: { lineStyle: { color: '#008000' } },
        },
      };
}

方案二:

使用eharts自带的 markline警标线 (推荐该方法,简洁明了,节省代码)

 series: [
    {
      name: '湿度曲线',
      type: 'line',
      showSymbol: false,
      data: this.humSeriesData,
      markLine: {
            symbol: ['none', 'none'], // 去掉箭头
            label: {
              show: false,
              position: 'start',
              formatter: '{b}'
            },
            lineStyle: {
              type: 'solid',
              width: 2
            },
            data: [
               { 
                 yAxis: res.minTemperature, 
                 lineStyle: { color: '#008000' }, 
                 label: { color: '#008000' } 
                 },
               { 
                 yAxis: res.maxTemperature,
                 lineStyle: { color: '#ff0000' }, 
                 label: { color: '#ff0000' } 
                 }
            ]
          },
  ]
  • 2
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值