vue3 自定义甘特图

最新推荐文章于 2025-07-04 07:35:04 发布

我在台湾做生意的时候

最新推荐文章于 2025-07-04 07:35:04 发布

阅读量922

点赞数 7

CC 4.0 BY-SA版权

文章标签：甘特图

本文链接：https://blog.youkuaiyun.com/weixin_37901601/article/details/139123613

业务需要做了一个自定义的甘特图，如图

已经发布到npm

安装

npm i ccui2048
//引入ccui2048和css 样式
import ccui2048 from "ccui2048";
import "../node_modules/ccui2048/style.css"

使用

<gante :list="state.list" header="甘特图2024"></gante>

参数

参数
gantClickSelf  点击list数据的事件回调 返回当前item
{
    list:[], //数据-格式如下
    header:'' //标题-，
    group[{
          name: "wjsc",
          color: "rgba(65, 59, 153, 1)",
          bacColor: "rgba(65, 59, 153, 0.15)",
    }], // 图例 -包含显示颜色和 进度条背景色


  xAxis: [{
          time: "DATE/TIME", 
          type: "header",
        },
        {
          time: "07:00",
        }
        {
          time: "08:00",
        },
        
        ] //x轴显示

        
  yAxis:[{ dataTime: "10-13",}.....] //x轴显示

}

  "10-14": {
    wjsc: [
      {
        id: 5,
        scheduleDate: "10-14",
        scheduleType: "wjsc",
        scheduleLocation: "场馆",
        scheduleStartTime: "2024-10-14 10:00:00",
        scheduleEndTime: "2024-10-14 12:00:00",
        scheduleRemark: "wpc第二日比赛",

      },
    ],
  },

list:{
  "10-14": {
    wjsc: [
      {
        id: 5,
        scheduleDate: "10-14",
        scheduleType: "wjsc",
        scheduleLocation: "场馆",
        scheduleStartTime: "2024-10-14 10:00:00",
        scheduleEndTime: "2024-10-14 12:00:00",
        scheduleSustainDuration: 2,
        scheduleRemark: "wpc第二日比赛",

      },
    ],
  },
  "10-13": {
    wpc: [
      {
        id: 1,
        scheduleDate: "10-13",
        scheduleType: "wpc",
        scheduleLocation: "场馆",
        scheduleStartTime: "2024-10-13 10:00:00",
        scheduleEndTime: "2024-10-13 12:00:00",
        scheduleSustainDuration: 2,
        scheduleRemark: "wpc比赛",

      },
      {
        id: 3,
        scheduleDate: "10-13",
        scheduleType: "wpc",
        scheduleLocation: "场馆",
        scheduleStartTime: "2024-10-13 18:00:00",
        scheduleEndTime: "2024-10-13 20:00:00",
        scheduleSustainDuration: 2,
        scheduleRemark: "WPC比赛",

      },
    ],
    wsc: [
      {
        id: 2,
        scheduleDate: "10-13",
        scheduleType: "wsc",
        scheduleLocation: "场馆",
        scheduleStartTime: "2024-10-13 15:00:00",
        scheduleEndTime: "2024-10-13 17:00:00",
        scheduleSustainDuration: 2,
        scheduleRemark: "wsc比赛",

      },
    ],
    activity: [
      {
        id: 4,
        scheduleDate: "10-13",
        scheduleType: "activity",
        scheduleLocation: "酒店",
        scheduleStartTime: "2024-10-13 08:00:00",
        scheduleEndTime: "2024-10-13 20:00:00",
        scheduleSustainDuration: 12,
        scheduleRemark: "接送服务",

      },
    ],
  },
 }
 
 x轴示例

 [
        {
          time: "DATE/TIME",
          type: "header",
        },
        {
          time: "07:00",
        },
        {
          time: "08:00",
        },
        {
          time: "09:00",
        },
        {
          time: "10:00",
        },
        {
          time: "11:00",
        },
        {
          time: "12:00",
        },
        {
          time: "13:00",
        },
        {
          time: "14:00",
        },
        {
          time: "15:00",
        },
        {
          time: "16:00",
        },
        {
          time: "17:00",
        },
        {
          time: "18:00",
        },
        {
          time: "19:00",
        },
        {
          time: "20:00",
        },
        {
          time: "21:00",
        },
      ]
 


y轴示例
 [
        {
          dataTime: "10-13",
        },
        {
          dataTime: "10-14",

        },
        {
          dataTime: "10-15",
        },
        {
          dataTime: "10-16",
        },
        {
          dataTime: "10-17",
        },
        {
          dataTime: "10-18",
        }]