Skip to content

yangzai316/gant

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

23 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation


NPM version GitHub license

效果预览

1.png

2.png

简介

react 甘特图组件,支持子任务,背景色可配置,状态可配置

使用

# 下载依赖
npm install -S react-gant

# 引用使用
import gant from 'react-gant';

# 使用
<gant data={[]}></gant>

文档

属性

Name Type Description
data Array 数据源,详细结构见下
year Number
month Number
emptyText String 没有数据时的现显示文案
showTodaylable Boolean 是否显示【今天】的标识
legend Object 图例的配置,详细见下
nowTimeLine Object 是否显示当前时间线,详细见下
stateMap Object 数据状态显示的背景色和label配置,详细见下
mode String 视图展示样式,2种, 常规(normal)|紧凑(compact),效果可见下子属性描述
order Object 传入的data数据是否按照startTime排序,详细见下

子属性 legend

甘特图上方,图例显示设置

Name Type Description
show Boolean 是否显示
position String 位置:left|right,默认left

子属性 nowTimeLine

显示竖红线,显示当前时间时分,默认一分钟更新一次

Name Type Description
show Boolean 是否显示
duration Number 更新时间,毫秒,不可小于60000ms,默认60000

子属性 stateMap

对象类型,配置数据在视图显示背景色,目前支持6种状态,1个子任务,具体见下DOME

state backgroundColor default label default
waiting #C6D57E 等待
primary #A2D2FF 正常
success #61B15A 成功
warning #FFC93C 警告
error #FA1E0E 异常
closed #DDDDDD 关闭
subTask #7868e6 子任务

子属性 order

传入的data数据是否按照 startTime 排序设置,安排 startTime从小到大排序后的数据,在【紧凑】模式下,效果更好。内部排序需要时间和性能,酌情配置。

Name Type Description
well Boolean true|false,源数据是否已经为有序。已有序,内部不在做排序处理,节省性能
need Boolean true|false,是否需要内部排序处理。well配置为 false 时才有效,即:源数据本无序,是否需要做排序处理

子属性 mode

常规模式示意图

21.png

紧凑模式示意图(能一行显示的,就合并为一行显示)

22.png

事件

Name Type Description Params
onTaskClick Function 任务被点击 当前任务的详细数据
onTaskItemClick Function 子任务被点击 当前子任务的详细数据

核心属性 data

满足下面数据结构即可正确展示,注意每条任务数据 id 为必须的,作为 react 的 key 使用

[{
    title: "张三", // 每条数据展示于左侧的内容
    id: "x-1",    // 每条数据唯一的标识
    tasks: [      // 任务列表
      {
        title: "单向数据流和数据双向绑定的区别还有各自的优缺点", // 任务的概述
        startTime: 1635696000000, // 任务开始时间
        endTime: 1636559999000,   // 任务结束时间 
        id: "x-sub-2",            // 每条任务的唯一标识
        state: 'success',         // 任务的状态,5个,具体见文档
      },
      {
        title: "单向数据流和数据双向绑定的区别还有各自的优缺点",
        startTime: 1635696000000,
        endTime: 1636559999000,
        id: "x-sub-3",
        state: 'primary',
        subTasks: [              // 主任务下的子任务内容
          {
            title: "先说说我为什么要做这么一个东西吧。最大原因就是自己太懒了,其次就是,后台管理这个东西,来来去去就是那么几个东西,查询,Form表单,Table表格,弹窗之类的一些东西,加上一个增删改查的一些逻辑,反正我呆过两家公司的后管都是这些,我猜大伙家的后管也不离其中吧。做久了这类东西,就感觉写代码没什么意思,复制黏贴,复制黏贴,一开始太开心的,做着做着,就开始迷茫了",
            startTime: 1635696000000,
            endTime: 1635955199000,
            id: "0subc-1",
          },
          {
            title: "先说说我为什么要做这么一个东西吧。最大原因就是自己太懒了,其次就是,后台管理这个东西,来来去去就是那么几个东西,查询,Form表单,Table表格,弹窗之类的一些东西,加上一个增删改查的一些逻辑,反正我呆过两家公司的后管都是这些,我猜大伙家的后管也不离其中吧。做久了这类东西,就感觉写代码没什么意思,复制黏贴,复制黏贴,一开始太开心的,做着做着,就开始迷茫了",
            startTime: 1635955199000,
            endTime: 1636127999000,
            id: "0subc-2",
          },
          {
            title: "先说说我为什么要做这么一个东西吧。最大原因就是自己太懒了,其次就是,后台管理这个东西,来来去去就是那么几个东西,查询,Form表单,Table表格,弹窗之类的一些东西,加上一个增删改查的一些逻辑,反正我呆过两家公司的后管都是这些,我猜大伙家的后管也不离其中吧。做久了这类东西,就感觉写代码没什么意思,复制黏贴,复制黏贴,一开始太开心的,做着做着,就开始迷茫了",
            startTime: 1636127999000,
            endTime: 1636559999000,
            id: "0subc-3",
          },
          {
            title: "先说说我为什么要做这么一个东西吧。最大原因就是自己太懒了,其次就是,后台管理这个东西,来来去去就是那么几个东西,查询,Form表单,Table表格,弹窗之类的一些东西,加上一个增删改查的一些逻辑,反正我呆过两家公司的后管都是这些,我猜大伙家的后管也不离其中吧。做久了这类东西,就感觉写代码没什么意思,复制黏贴,复制黏贴,一开始太开心的,做着做着,就开始迷茫了",
            startTime: 1636127999000,
            endTime: 1636559999000,
            id: "0subc-4",
          },
        ],
      },  
    ]
  }]

DOME

import Gant from "gant";

const __STATEMAP = {
  waiting: {
    bgColor: '#C6D57E',
    label: '等待'
  },
  primary: {
    bgColor: '#A2D2FF',
    label: '正常'
  },
  success: {
    bgColor: '#61B15A',
    label: '成功'
  },
  warning: {
    bgColor: '#FFC93C',
    label: '警告'
  },
  error: {
    bgColor: '#FA1E0E',
    label: '异常'
  },
  closed: {
    bgColor: '#DDDDDD',
    label: '关闭'
  },
  subTask: {
    bgColor: '#7868e6',
    label: '子任务'
  },
};


const App = () => {

  return (
    <div style={{ height: "600px" }}>

      <Gant
        data={data} // 自行按照上述文档定义并传入
        year={2021}
        month={11}
        emptyText="没有数据啦..."
        onTaskClick={(data) => {
          console.log('任务被点击:', data);
        }}
        onTaskItemClick={(data) => {
          console.log('子任务被点击:', data);
        }}
        legend={{
          show: true,
          position: 'left'
        }}
        showTodaylable={true}
        nowTimeLine={{
          show: true,
          duration: 60000
        }}
        stateMap={__STATEMAP}
      ></Gant>
      
    </div>
  );
};

export default App;