文章目录
前言
年初回来公司计划做一个目标管理系统(类似禅道)用于后期项目、人员各自工作计划管理,其中有个需求项目阶段目标甘特图方式展示,起初对甘特图是啥都不太清楚,后了解到甘特图与燃尽图、鱼骨图为项目"三大图",其中甘特图一般可以直观的看到每个任务完成的进度时间、完成情况。抱着好奇找到如何实现甘特图呈现的方法,其中包括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里面的 就能渲染对应的数据。
总结
本篇文章就简单终结一下自己在项目中触及的一个小功能,也是第一次发布文章,写得不好的地方多多见谅,有不对的地方望大家能指出,或者有改进建议的地方也可以评论出来,共同进步,加油!!!