vue-gantt-chart's Introduction

Gantt Chart -Javascript - Vue

一个特殊的业务轮子

Demo

预览

Feature

宽高可变自适应
拖拽功能
右击自定义事件
首行粘性

Screenshot

Install

npm

npm i vue-gantt-chart --save

yarn

yarn add vue-gantt-chart

Include plugin in your main.js file.

import GanttChart from 'vue-gantt-chart'
import 'vue-gantt-chart/lib/vue-gantt-chart.css';
Vue.use(GanttChart)

Use

Template

<template>
    <GanttChart
        :gantt-data="GanttData"
        :gantt-current-time="GanttCurrentTime"
        :first-line-stick="firstLineStick"
        :time-section="GanttTime"
        :chart-max-height="ChartHeight"
        :float-view-render-fn="floatRender"
        @rightClick.native="handleRightClick"
    >
        <template #side-box="{item}">
          <!--侧边栏组件-->
          <SideComponent :side-info="item" />
        </template>
        <template #container-box="{item}">
          <!--内容栏组件-->
          <ContentComponent :content-info="item" />
        </template>
    </GanttChart>
</template>

API

Attributes

param	required	type	default	describe
timeSection	√	`Array`		甘特图的时间区间 `['2021/02/21', '2021/02/24']`
gantt-data	√	`Array`		甘特图的数据来源 `[]`
gantt-current-time	X	`Number`	`new Date().getTime()`	甘特图时间轴渲染的当前时间
first-line-stick	X	`Boolean`	`true`	首行是否粘性
chartMaxHeight	X	`Number`	`500`	甘特图内容最大高度
show-header	X	`Boolean`	`true`	是否渲染表头
header-data	X	`Array`	`['日期', '时间']`	表头标题
floatViewRenderFn	X	`Function`	`() => { return (info) => info }`	Tip渲染函数

gantt-data

gantt-data需要满足特殊的数据格式才能被正常的渲染，外层对象渲染为甘特条需要childArray属性用于承载甘特块,内层对象渲染为甘特块,需要start、end用于计算偏移的像素

[
  {
    //整行的甘特块具有的属性
    "childArray":[// 渲染在甘特块上的甘特条
                    {
                      // 甘特条具有的属性
                      "start":"2021/02/26 07:08",// 甘特条渲染的起始时间
                      "end":"2021/02/26 08:44"// 甘特条渲染的结束时间
                    }
                  ]
  }
]

floatViewRenderFn

floatViewRenderFn作为渲染函数用于渲染甘特块的部分数据到甘特块的Tip上.

(info) => `<div>${info.start}</div><div>${info.end}</div>`

Event

param	describe
rightClick	甘特块右击会触发事件，抛出自定义事件对象，甘特块的数据被包含在`event.detail`中

Scoped Slot

<template #side-box="{item}">
  <SideComponent :side-info="item" />
</template>
<template #container-box="{item}">
  <ContentComponent :content-info="item" />
</template>

name	describe
#side-box	具名插槽，传递自定义数据项的内容，参数为 { item }
#container-box	具名插槽，传递自定义数据项的内容，参数为 { item }

反馈缺陷 Bug

- **Version**: 
- **Mini Showcase Repository**:
- **Error Message**:

提交新需求 Feature Request

背景

描述你希望解决的问题的现状
你希望获得的功能的设计和实现

开源协议

MIT

vue-gantt-chart's People

Contributors

Stargazers

Watchers

vue-gantt-chart's Issues

如何在vue3.0 使用

如何在vue3.x 版本中使用
vue-gantt-chart.umd.min.js 中报错 Uncaught TypeError: Cannot read property 'extend' of undefined

在jeecg boot前端项目中引用不成功

` error in ./node_modules/vxe-table/lib/style.css

Syntax Error: Error: PostCSS plugin autoprefixer requires PostCSS 8.
Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users

@ ./node_modules/vxe-table/lib/style.css 4:14-134 15:3-20:5 16:22-142
@ ./src/main.js
@ multi (webpack)-dev-server/client?https://10.17.195.77:3000/sockjs-node (webpack)/hot/dev-server.js ./src/main.js`

根据npm的安装命令成功后，也在main.js配置全局，在标签引用的时候发现不行。
但使用原官方的标签渲染成功渲染出表头

xihaoshangdi / vue-gantt-chart Goto Github PK