Vue echarts绘制甘特图的示例代码

更新时间：2024年03月28日 09:21:32 作者：缘月叙文

甘特图是一种条状图,直观展示项目进展随时间的走势及联系,其中,项目时间由横轴表示,项目活动由纵轴表示,本文给大家介绍了Vue echarts绘制甘特图的实现方法,并有详细的代码示例供大家参考,需要的朋友可以参考下

什么是甘特图

甘特图（Gantt chart）又称为横道图、条状图(Bar chart)。其通过条状图来显示项目、进度和其他时间相关的系统进展的内在关系随着时间进展的情况。以提出者亨利·劳伦斯·甘特（Henry Laurence Gantt）先生的名字命名。

甘特图以图示通过活动列表和时间刻度表示出特定项目的顺序与持续时间。一条线条图，横轴表示时间，纵轴表示项目，线条表示期间计划和实际完成情况。直观表明计划何时进行，进展与要求的对比。便于管理者弄清项目的剩余任务，评估工作进度。

1、不同的颜色表示不同的阶段。

2、每一行表示一个任务。

3、任务与任务之间的黑色箭头表示任务之间的依赖关系，必需完成前面的才能完成后面的。

通过这一张甘特图，能一眼看出以下信息：

今天应该做什么任务
这个任务从什么时候开始，到什么时候结束
在某一段时间有哪些任务
应该先做哪些任务再做哪些任务
哪些任务可以同时做
这个任务是否被其他任务依赖，如果是，那么这个任务就不能推迟，必需按时完成或者提前完成，否则会影响后面的任务
大任务下面有哪些子任务
可以显示任务的里程碑是什么时候

使用场景

主要用于横坐标固定，比如一天24小时，这样就可以根据Y轴数据可正可负

速用示例版

可以直接将option 复制即可

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]
    }
  ]
};

润雨细无声版

<div ref="strategyDomRef"
 style="width: 800px;
        height: 600px;"
>

import * as echarts from 'echarts'

mounted() {
 let apiData = [
      {
        startTime: '00:00',
        endTime: '05:00',
        value: 200,
      },
      {
        startTime: '05:00',
        endTime: '12:00',
        value: 400,
      },
      {
        startTime: '12:00',
        endTime: '18:00',
        value: -200,
      },
      {
        startTime: '18:00',
        endTime: '20:00',
        value: 300,
      },
      {
        startTime: '20:00',
        endTime: '24:00',
        value: 500,
      },
    ]
    this.dealArr(apiData)
	this.echartsDraw()
},
methods:{
	//数据处理
	dealArr(apiData) {
      let YAxis = []
      apiData.forEach((element) => {
      let dealArr = new Array(
        element.endTime == '24:00' ? 25 : parseInt(element.endTime) + 1
      ).fill(Number(element.value))
      let yItem = {
        name: ' ',
        type: 'line',
        showSymbol: false,
        endLabel: {
          show: true,
          formatter: '{c}',
          position: 'start',
          fontSize: 12,
        },
        lineStyle: {
          width: 10,
          color: '#36CFC9',
        },
        data: dealArr.fill('', 0, parseInt(element.startTime)),
      }
      YAxis.push(yItem)
    })
    this.yAxis = YAxis
    },
    //图表绘制
	echartsDraw(){
	 let charts = echarts.init(this.$refs.strategyDomRef)
            let option = {
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {
            return '<br/> 功率 ： ' + params[0].value
          },
        },
        grid: {
          top: '10%',
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          splitLine: {
            // 网格线
            show: true,
            lineStyle: {
              //分割线
              color: '#C0C4CC',
              width: 1,
              type: 'dashed', //dotted：虚线 solid:实线
            },
          },
          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)',
          splitLine: {
            // 网格线
            show: true,
            lineStyle: {
              //分割线
              color: '#C0C4CC',
              width: 1,
              type: 'dashed', //dotted：虚线 solid:实线
            },
          },
          axisLabel: {
            formatter: '{value}',
          },
        },
        series: this.yAxis,
      }
      charts.setOption(option, true)
      //清空画布，防止缓存
      charts.clear()
      //使用刚指定的配置项和数据显示图表。
      charts.setOption(option, true)
      window.addEventListener('resize', function () {
        charts.resize()
      })
	}
}

到此这篇关于Vue echarts绘制甘特图的示例代码的文章就介绍到这了,更多相关Vue echarts甘特图内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue内置指令详解
指令是Vue模板中最常用的一项功能，它带有前缀v-，主要职责是当其表达式的值改变时，相应的将某些行为应用在 DOM 上。这篇文章主要介绍了vue内置指令详解,需要的朋友可以参考下
2018-04-04
如何使用vue3+uni-app封装音乐播放插件
UniApp是一个基于Vue.js开发的跨平台应用开发框架,它可以使用一套代码同时构建iOS、Android和Web应用,这篇文章主要给大家介绍了关于如何使用vue3+uni-app封装音乐播放插件的相关资料,需要的朋友可以参考下
2023-11-11
Vue使用VueUse构建一个支持暂停/重置的CountUp组件
本文介绍了如何利用 VueUse 的 useRafFn 从零构建一个功能更强大的 CountUp 组件,它不仅支持 vue-countup-v3 的全部特性,还额外提供了 pause、resume、reset 等命令式控制方法,感兴趣的小伙伴可以了解下
2026-04-04
利用Vue3+ElementUI树形菜单实现层次化用户界面
ElementUI是一个超棒的UI框架,它基于Vue.js提供了丰富的组件和样式,可以帮你快速构建出美观实用的登陆页面,这篇文章主要介绍了利用Vue3+ElementUI树形菜单实现层次化用户界面的相关资料,需要的朋友可以参考下
2026-04-04
从0到1搭建element后台框架优化篇(打包优化)
这篇文章主要介绍了从0到1搭建element后台框架优化篇(打包优化)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-05-05
Vue中vue-router路由使用示例详解
Vue Router是Vue提供的路由管理器,将组件与路由一一对应起来,这种对应关系就路由,这篇文章主要介绍了Vue中vue-router路由使用,需要的朋友可以参考下
2024-06-06
vue-路由精讲二级路由和三级路由的作用
这篇文章主要介绍了vue-路由精讲二级路由和三级路由的作用，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-08-08
vue组件的路由高亮问题解决方法
这篇文章主要给大家介绍了关于vue组件的路由高亮问题的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-05-05
在Vue中实现不刷新的iframe页面的方案
在Vue项目中,我们可能会遇到这样的需求：需要在应用中嵌入iframe页面,并且要求在路由切换的过程中,iframe的内容不会被刷新,本文将介绍如何解决这个问题,并给出具体的实现方案,需要的朋友可以参考下
2025-01-01
Vue利用mockjs编写假数据并应用的问题记录
这篇文章主要介绍了Vue利用mockjs编写假数据并应用,本文通过实例代码给大家详细讲解，对Vue mockjs数据相关知识感兴趣的朋友跟随小编一起看看吧
2022-12-12