echarts甘特图之x轴为24小时，纵坐标为功率值

最新推荐文章于 2024-03-24 11:29:12 发布

前端~初学者

最新推荐文章于 2024-03-24 11:29:12 发布

阅读量882

点赞数 2

分类专栏： Echarts 文章标签： echarts 甘特图数学建模

本文链接：https://blog.csdn.net/DZQ1223/article/details/130879797

版权

Echarts 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

echarts甘特图之x轴为24小时，纵坐标为功率值

- 1、开发需求
- 2、代码

1、开发需求

在电力系统开发中，我们会遇到一天24小时不同策略来表示计划发电量的功率曲线，具体如下图。

在这里插入图片描述

2、代码

option = {
  tooltip: {
    trigger: 'axis'
  },
   grid: {
    top: '10%',
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  toolbox: {
    show: true,
    feature: {
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    splitLine: {
      show: true
    },
    axisLabel: {
      padding: [0, 0, 0, -20]    // 四个数字分别为上右下左与原位置距离
    },
    data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00','07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '24:00']
  },
  yAxis: {
    type: 'value',
    name: '单位(kW)',
    // scale: true,
    splitLine: {
      show: false
    },
    axisLabel: {
      formatter: '{value}',
      
    }
  },
  series: [
    {
      name: '',
      type: 'line',
      smooth: true,
      showSymbol: false,
      symbol: false,
      lineStyle: {
        normal: {
          width: 10
        }
      },
      markPoint: {
        data: [
          {
            name: '最大值',
            type: 'max',
            valueIndex: 0
          }
        ]
      },
      data: [300, 300, 300, 300, 300, 300, 300],
    },
    {
      name: '',
      type: 'line',
      smooth: true,
      showSymbol: false,
      symbol: false,
      lineStyle: {
        width: 10
      },
      markPoint: {
        data: [
          {
            name: '最大值',
            type: 'max',
            valueIndex: 0
          }
        ]
      },
      data: ['','','','','','', 500, 500, 500, 500, 500]
    },
    {
      name: '',
      type: 'line',
      smooth: true,
      showSymbol: false,
      symbol: false,
      lineStyle: {
        normal: {
          width: 10
        }
      },
      markPoint: {
        data: [
          {
            name: '最大值',
            type: 'max',
            valueIndex: 0
          }
        ]
      },
      data: ['','','','','','','', '', '','',-100, -100,-100, -100,-100]
    },
    {
      name: '',
      type: 'line',
      smooth: true,
      showSymbol: false,
      symbol: false,
      lineStyle: {
        normal: {
          width: 10
        }
      },
      markPoint: {
        data: [
          {
            name: '最大值',
            type: 'max',
            valueIndex: 0
          }
        ]
      },
      data: ['','','','','','','', '', '','','','','','','',200,200,200,200,200,200,200,200,200,200]
    }
  ]
};