利用gantt-elastic 实现简易项目甘特图

文章目录

• 前言 
• 一、Gannt-elastic是什么？
• 二、使用步骤
  • 1.安装依赖
  • 2.代码中使用
• 总结

---

前言

年初回来公司计划做一个目标管理系统（类似禅道）用于后期项目、人员各自工作计划管理，其中有个需求项目阶段目标甘特图方式展示，起初对甘特图是啥都不太清楚，后了解到甘特图与燃尽图、鱼骨图为项目"三大图"，其中甘特图一般可以直观的看到每个任务完成的进度时间、完成情况。抱着好奇找到如何实现甘特图呈现的方法，其中包括Highcharts、Gantt-elastic等，下面和大家分享下我这边如何通过Gantt-elastic实现的，新手小白，望写的不对的地方大家及时指出。

一、Gannt-elastic是什么？

Gannt-elastic是一个基于Vue.js开发的前端框架，对于这个解释不是很够清晰，反正就是说基于Vue使用这个可以展示甘特图来着 上一个做完成的大概样式👇

二、使用步骤

1.安装依赖

代码如下（示例）：

npm install --save gantt-elastic

2.代码中使用

 1、options是配置        2、tasks是图左侧信息的设置 

options配置如下👇

tasks配置如下👇

tasks里面数据比较灵活，具体根据需求需要从后台拿数据渲染就好，其中type这一字段必定要写，不然右边进度条不显示，options里面taskList中value的值 对应到tasks里面的 就能渲染对应的数据。

总结

本篇文章就简单终结一下自己在项目中触及的一个小功能，也是第一次发布文章，写得不好的地方多多见谅，有不对的地方望大家能指出，或者有改进建议的地方也可以评论出来，共同进步，加油！！！