Vue-Gantt-chart:使用Vue做数据控制的Gantt图表_vue-gantt-chart,vue-gantt资源-CSDN下载

共58个文件

js：25个

vue：12个

png：4个

gantt

Vue

需积分: 50 44 浏览量 2021-08-05 01:05:41 上传评论 1 收藏 1.57MB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

Vue-Gantt-chart-master.zip （58个子文件）

Vue-Gantt-chart-master

screenshot

page1.png 857KB

icon.png 27KB

vue.config.js 383B

package.json 2KB

.prettierignore 11B

tests

unit

timeLineUtils.spec.js 3KB

block.spec.js 3KB

help

help.vue 2KB

fakeData.js 2KB

.eslintrc.js 51B

dynamic-render.spec.js 2KB

timeLine.spec.js 4KB

gtUtils.spec.js 3KB

prettier.config.js 97B

LICENSE 1KB

dist

v-gantt-chart.umd.js 193KB

v-gantt-chart.common.js 193KB

v-gantt-chart.umd.min.js 68KB

src

index.js 428B

gantt.scss 3KB

main.js 642B

components

time-line

index.vue 6KB

dynamic-render.js 3KB

mark-line

current-time.vue 677B

index.vue 1KB

left-bar

index.vue 781B

blocks

index.vue 6KB

demo

mock

index.js 2KB

App.vue 8KB

components

test-markline.vue 774B

test-timeline.vue 329B

test.vue 3KB

test-left.vue 743B

gantt.vue 18KB

utils

tool.js 383B

throttle.js 814B

gtUtils.js 2KB

timeLineUtils.js 2KB

debounce.js 924B

.eslintrc.js 452B

.gitignore 238B

.browserslistrc 21B

demo

favicon.png 27KB

fonts

element-icons.732389de.ttf 55KB

element-icons.535877f5.woff 28KB

index.html 1KB

chunk-vendors.js 1.97MB

app.js 306KB

loading.css 1KB

normalize.css 6KB

public

favicon.png 27KB

index.html 956B

loading.css 1KB

normalize.css 6KB

README.md 17KB

yarn.lock 377KB

.eslintignore 18B

babel.config.js 206B

<p align="center"><img src="https://raw.githubusercontent.com/w1301625107/vue-gantt-chart/master/screenshot/icon.png" alt="logo" width="180"></p> <h1 align="center">vue-gantt-chart</h1> <p align="center">基于 Vue 实现的 gantt-like 图表 ,用于排班展示</p> <p align="center"></p> [![npm](https://img.shields.io/npm/v/v-gantt-chart.svg)](https://www.npmjs.com/package/v-gantt-chart) [![total](https://img.shields.io/npm/dt/v-gantt-chart.svg)](https://img.shields.io/npm/dt/v-gantt-chart.svg) ![](https://img.shields.io/badge/license-MIT-000000.svg) [![HitCount](http://hits.dwyl.io/w1301625107/Vue-Gantt-chart.svg)](http://hits.dwyl.io/w1301625107/Vue-Gantt-chart) [![v-gantt-chart](https://nodei.co/npm/v-gantt-chart.png)](https://npmjs.org/package/v-gantt-chart) ## [React版本](https://github.com/w1301625107/React-Gantt-chart) ## [Demo预览地址](https://w1301625107.github.io/Vue-Gantt-chart/demo/index.html) ## Catalog - [Feature](#feature) - [Screenshot](#screenshot) - [Install](#install) - [Use](#use) - [template code](#template-code) - [script code](#script-code) - [data](#data) - [Slot](#slot) - [block 容器块slot 有 __`两种`__ 需要注意](#block-容器块slot-有-__两种__-需要注意) - [⭐️ `customGenerateBlocks` 为 `false`（默认值）的情况](#⭐️-customgenerateblocks-为-false默认值-的情况) - [⭐️ `customGenerateBlocks` 为 `true` 的情况](#⭐️-customgenerateblocks-为-true-的情况) - [left 行名slot](#left-行名slot) - [markline 时间标记线slot](#markline-时间标记线slot) - [timeline 行名slot](#timeline-时间轴slot) - [title 标题slot](#title-标题slot) - [API](#api) - [Param](#param) - [Method](#method) - [Event](#event) - [Run Demo](#run-demo) - [Caution](#caution) - [Update](#update) - [License](#license) ## Feature - 虚拟列表，快速渲染可视区域，支持大量数据渲染 - 可变时间轴，1 分钟，2 分钟，3 分钟，4 分钟~~~到一天 - 可变单元格 - 标记线 - 支持自定义描述和容器块 ## Screenshot ![](screenshot/page1.png) ## Install ### npm 安装 ```bash npm i v-gantt-chart --save ``` Include plugin in your `main.js` file. ```js import Vue from 'vue' import vGanttChart from 'v-gantt-chart'; Vue.use(vGanttChart); ``` ### 使用链接引入 ```html <script src="https://unpkg.com/v-gantt-chart/dist/v-gantt-chart.umd.min.js"></script> ``` ```html <body> <div id="app"> <v-gantt-chart></v-gantt-chart> </div> </body>  <script src="https://unpkg.com/vue/dist/vue.js"></script>  <script src="./v-gantt-chart.js"></script> <script> new Vue({ el: '#app', }) </script> </html> ``` ## Use ### template code ```html <template> <v-gantt-chart :startTime="startTime" :endTime="endTime" :datas="datas"> <template v-slot:block="{data,item}">  <Test :data="data" :item="item"></Test> </template> <template v-slot:left="{data}">  <TestLeft :data="data"></TestLeft> </template> <template v-slot:title>  hola </template> </v-gantt-chart> </template> ``` ### script code ```js import Test from "./test.vue"; //你自己的gantt条容器 import TestLeft from "./test-left.vue"; //你自己的行名称组件 import { mockDatas } from "@src/mock/index.js"; //伪造的数据 import dayjs from "dayjs" //时间库 export default { name: "App", components: { Test, TestLeft }, data() { return { startTime: dayjs().toString(),//时间轴开始时间 endTime: dayjs() .add(2, "d") .add(2, "h") .add(5, "s").toString(), //时间结束时间 datas: mockDatas(100), // gantt数据 }; }, }; ``` ### data 在**默认情况**下（即`customGenerateBlocks`为`false`）的渲染的数据需要**特殊格式** ，目前要求数组中每一个值均为对象，且有`gtAarry`对象数组这个属性(默认取`gtArray`，也可以通过`arrayKeys`属性自定义需要渲染的数组) 数组中每一个对象需有两个属性，`start`和`end`(不提供的情况，偏移与宽度将为0)，数值需为合法的时间字符串.例如 ```js [ { id:'test', //非必须 gtArray:[ //默认的需要渲染的数组 { name:'test', //非必须 start:'2019-01-11 18:18:18', end:'2019-01-11 18:18:18' } ]， customKey:[ //自定义的需要渲染的数组 { id:'test', //非必须 start:'2019-01-11 18:18:18', end:'2019-01-11 18:18:18' } ] } ] ``` ## Slot ```js // 假设你传入的数据为 [ { id:'arrayOne', name:'sala', gtArray:[ { name:'itemOne', start:'2019-01-11 18:18:18', end:'2019-01-11 18:18:18' // ...其他属性 } ]， //...其他属性 } //... 其他数组数据 ] ``` ### block 容器块slot 有 __`两种`__ 需要注意 #### ⭐️ `customGenerateBlocks` 为 `false`（默认值）的情况 ```html <template v-slot:block="{data,item}">  <Test :data="data" :item="item"></Test> </template> ``` `data` 为 gantt图表中每一行的所有数据如下 ```js { id:'arrayOne', name:'sala', gtArray:[{...}]， //... } ``` `item` 为 gantt图表中一个小方块对数据如下 ```js { name:'itemOne', start:'2019-01-11 18:18:18', end:'2019-01-11 18:18:18' //... } ``` #### ⭐️ `customGenerateBlocks` 为 `true` 的情况此时`arrayKeys`，`itemkey`将不再次生效，如何渲染，渲染什么，将由你自己决定，下方是一个例子 ```html <template v-slot:block="{data, getPositonOffset, getWidthAbout2Times, isInRenderingTimeRange, startTimeOfRenderArea, isAcrossRenderingTimeRange, endTimeOfRenderArea}"> <div class="myBlockContainer" v-for="item in data.gtArray" v-if="isInRenderingTimeRange(item.start)||isAcrossRenderingTimeRange(item.start,item.end) ||isInRenderingTimeRange(item.end)" :key="item.id" :style="{position:'absolute', left:getPositonOffset(item.start)+'px', width:getWidthAbout2Times(item.start,item.end)+'px'}"> <Test :data="data" :item="item"></Test> </div> </template> ``` `data` 为gantt图表中每一行的所有数据 ```js { id:'test', name:'sala', gtArray:[{...}]， //... } ``` 除了data，还会提供以下属性和函数供调用 `startTimeOfRenderArea` 为当前渲染范围的时间轴开始时间的毫秒数 `endTimeOfRenderArea` 为当前渲染范围的时间轴结束时间的毫秒数 `getPositonOffset(time:string):number ` 定位函数，根据给定字符串形式的时间生成相对时间轴起点的的偏移值 `getWidthAbout2Times(start:string,end:string):number` 为宽度计算函数，根据给定字符串形式的时间计算两个时间差的宽度值 `isInRenderingTimeRange(time:string):boolean` 判定给定的时间是否在屏幕显示的时间轴范围之内 `isAcrossRenderingTimeRange(timeStart,timeEnd):boolean` 判定给定的时间是否跨越了屏幕显示的时间轴范围之内 ### left 行名slot ```html <template v-slot:left="{data}">  <TestLeft :data="data"></TestLeft> </template> ``` `data` 为 gantt图表中每一行的所有数据 ```js { id:'test', name:'sala', gtArray:[{...}]， //... } ``` ### timeline 时间轴slot ```html <template v-slot:timeline="{day , getTimeScales}">  <

评论收藏

内容反馈