快速开始

安装

Vue项目可用，使用插件需要提前安装Vue.js

npm i h-gantt

引用

页面引用

在当前页面写入

import hGantt from 'h-gantt' Vue.use(hGantt)//需引入Vue

或

components: { hGantt },

全局引用

在main.js中写入

import hGantt from 'h-gantt' Vue.use(hGantt)

HTML

数据格式

title:'任务标题',

quantity:10, //甘特图展示数据分段数

list:[{ title:'测试功能一', //单条数据标题 start:'2020-01-03',//数据起始时间 length:5 //持续时长（天） }

文档

介绍

项目中需要一个查看进度的图表，看了一些现有的甘特图，大多功能都比较复杂，样式有些陈旧，数据格式比较繁琐。所以做了一个比较简单的甘特图查看功能，如果有什么需求大家可以提出，后续会酌情更新。

文档地址

暂无

| 参数 | 说明 | 类型 | 默认值 | | ---- | ---- | ---- | ---- | | title | 甘特图表的标题 | string | '' | | quantity | 区间个数 | number | 10 | | list | 图表数据 | array | [] | | list->title | 数据标题 | string | -- | | list->start | 数据开始时间 | string(yyyy-mm-dd)或其它时间格式 | -- | | list->length | 数据持续时长（天） | number | -- |