echarts line绘制机组开关状态折线图

敲代码无敌小奶龙

于 2024-03-12 15:52:00 发布

阅读量353

点赞数 3

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/qq_53986004/article/details/136654584

版权

本文介绍了如何使用Echarts库中的line类型实现设备开关状态的可视化，通过示例展示了如何配置X轴时间、Y轴数值以及两个泵的状态数据。

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

2024.3.12今天我学习了如何用echarts line实现设备开关状态的效果。

代码如下：

option = {
  xAxis: {
    type: 'time',
  },
  yAxis: {
    type: 'value',
    splitNumber:2,
    // axisLine: {
    //     show: true,
    //     lineStyle: {
    //       color:'#808080'
    //     }
    //   },
    axisLabel:{
      formatter:function(value){
        if(value===1){
          return '泵1'
        }else if(value===2){
          return '泵2'
        }
      }
    }
  },
  series: [
    {
      data: [
         ['2022-10-25 08:00',1], 
         ['2022-10-25 09:00',1],
         ['2022-10-25 10:00',null], 
         ['2022-10-25 11:00',1], 
         ['2022-10-25 12:00',1],
         ['2022-10-25 13:00',null],
         ['2022-10-25 14:00',1],
         ['2022-10-25 14:30',1],
         ['2022-10-25 15:00',null],
         ['2022-10-25 16:00',1]],
      type: 'line',
      symbol: 'none',
      name:'泵1'
    },
    {
      data: [
         ['2022-10-25 08:00',2], 
         ['2022-10-25 09:00',null],
         ['2022-10-25 10:00',2], 
         ['2022-10-25 11:00',2],
         ['2022-10-25 12:00',2],
         ['2022-10-25 13:00',null], 
         ['2022-10-25 14:00',2],
         ['2022-10-25 14:30',2], 
         ['2022-10-25 15:00',null],  
         ['2022-10-25 16:00',2]],
      type: 'line',
      symbol: 'none',
      name:'泵2'
      
    }
  ]
};