全网最新-VUE甘特图

已于 2024-04-16 17:34:33 修改
阅读量3.8k 收藏 19
点赞数 5
分类专栏： echarts vue 甘特图 文章标签： vue.js 甘特图 javascript echarts
于 2023-11-07 14:40:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43891314/article/details/134262847
版权
echarts 同时被 3 个专栏收录
1 篇文章 0 订阅
订阅专栏
vue
1 篇文章 0 订阅
订阅专栏
甘特图
1 篇文章 0 订阅
订阅专栏

echart-甘特图

例如：用最简单的代码实现甘特图需求

文章目录

前言

例：最近网上找了很多关于vue甘特图代码,发现都不能满足基本需求,或者很复杂,今天就给大家整理一下我最近项目用到的甘特图,简单易上手。

一、先看效果

在这里插入图片描述

二、使用步骤

1.关键代码(设置zlevel: -1,颜色跟背景颜色一样)

提示：这里用到dayjs进行时间转换

代码如下（示例）：

xAxis: {
    type: "time",
    position: "top", // x 轴位置
    //对标线
    splitLine: {
      show: true,
      lineStyle: {
        type: "dashed",
        color: "rgba(255, 255, 255, 0.2)",
      },
    },
    axisLabel: {
      show: true,
       color: "#fff",
      formatter: function (val) {
        return dayjs(val).format("YYYY-MM-DD");
      },
    },
  },
  yAxis: {
    inverse: true, // y 轴数据翻转，该操作是为了保证项目一放在最上面，项目七在最下面
    type: "category",
    axisLabel: {
      show: true,
       color: "rgba(255, 255, 255, 0.65)",
    },
    data: [],
  },
  series: [
    //隐藏条(存储开始时间)
    {
      name: "",
      type: "bar",
      stack: "duration",
      itemStyle: {
        color: "#041B23",//注意:这里颜色跟背景颜色一样才能做到隐藏效果
      },
      zlevel: -1, // zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面
      z: 9, // z值小的图形会被z值大的图形覆盖，z相比zlevel优先级更低，而且不会创建新的 Canvas
      data: [],
    },
    //展示条(存储结束时间)
    {
      name: "正常节点",
      type: "bar",
      stack: "duration",
      zlevel: -1,//必须设置
      itemStyle: {
        borderColor: "#041B23",//这里隐藏边框
        borderWidth: 2,
      },

      data: [],
    },
    {
      name: "关键节点",
      type: "bar",
      stack: "duration",
      zlevel: -1,//必须设置
      itemStyle: {
        borderColor: "#041B23",//这里隐藏边框
        borderWidth: 2,
      },

      data: [],
    },
    {
      name: "超期节点",
      type: "bar",
      stack: "duration",
      zlevel: -1,//必须设置
      itemStyle: {
        borderColor: "#041B23",//这里隐藏边框
        borderWidth: 2,
      },

      data: [],
    },

2.数据处理

代码如下（示例）：

1.后端返回的数据格式
{
  	 "Id": 23,
     "nodeName": "测试",
     "nodeType": "OVER",
     "startTime": "2023-11-16 00:00:00",
     "endTime": "2024-01-26 00:00:00",
 }...
2.处理数据(这里处理不同状态的数据展示)
 query(info).then((res) => {
        res.data.map((val) => {
          //存储y轴数据
          option.yAxis.data.push(val.nodeName);
          //存储开始时间(存在option.series[0]中)
          //开始时间统一设置时分秒为00:00:00(因为当数据为同一天时也可展示进度条)
          option.series[0].data.push(
            dayjs(val.startTime).format("YYYY-MM-DD 00:00:00")
          );
          //存储结束时间(存在option.series[1,2,3]中) 注:当类型判断不到时存储'0'
          //结束时间统一设置时分秒为23:59:59(因为当数据为同一天时也可展示进度条)
         //NORMAL 正常节点, IMPORTANT 关键节点,OVER超期节点
            if (val.nodeType == "NORMAL") {
              option.series[1].data.push(dayjs(val.endTime).format("YYYY-MM-DD 23:59:59"));
              option.series[2].data.push("0");
              option.series[3].data.push("0");
            } else if (val.nodeType == "IMPORTANT") {
              option.series[2].data.push(dayjs(val.endTime).format("YYYY-MM-DD 23:59:59"));
              option.series[1].data.push("0");
              option.series[3].data.push("0");
            } else if (val.nodeType == "OVER") {
              option.series[3].data.push(dayjs(val.endTime).format("YYYY-MM-DD 23:59:59"));
              option.series[2].data.push("0");
              option.series[1].data.push("0");
            }
        });
        console.log(option.series[0].data);
        console.log(option.series[1].data);
        console.log(option.series[2].data);
        console.log(option.series[3].data);
      });

打印打码如下

在这里插入图片描述

3.完整代码

代码如下（示例）：

<template>
  <div class="Echarts">
    <div class="chart" ref="chart"></div>
  </div>
</template>
<script>
import { init } from "echarts";
import dayjs from "dayjs";
const option = {
  color: [
    "rgba(2, 179, 253, 1)",
    "rgba(255, 57, 57, 1)",
    "rgba(253, 189, 1, 1)",
  ],
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
    },
    position: "top",
    backgroundColor: "rgba(19,62,76,0.3)",
    borderColor: "rgba(64, 213, 228, 1)",
    padding: [6, 13, 6, 13],
    textStyle: {
      color: "#262626",
      fontSize: 12,
    },
    extraCssText:
      "box-shadow: 0px 3px 5px 0px rgba(19,68,84,1), inset 0px 0px 9px 0px rgba(64,213,228,1);",
    // 提示框自定义(鼠标移入)
    formatter: function (res) {
      console.log(res);
      let info =
        '<span style="font-size: 12px;color: #fff;margin-bottom: 0px;">' +
        res[0].name +
        "</span>";
      let list = "";
      let name = `<span style="font-size: 12x;color:#fff;margin-right: 30px;">时间</span>`;
      let endTime = res[1].value != '0'?res[1].value:res[2].value != '0'?res[2].value:res[3].value != '0'?res[3].value:'--'
      let num = `<span style="font-size: 12px;color: #fff">${
        dayjs(res[0].value).format("YYYY-MM-DD") +
        "-" +
        dayjs(endTime).format("YYYY-MM-DD")
      }</span>`;
      list = `<p  style="margin: 4px 0;">${name + num}</p>`;
      let infoData = info + list;
      return infoData;
    },
  },
  legend: {
    data: ["正常节点", "关键节点", "超期节点"],
    right: 14,
    top: 4,
    itemWidth: 12,
    itemHeight: 12,
    textStyle: {
      color: "#E7F7FF",
    },
    
  },
  grid: {
    left: "6%",
    right: "5%",
    bottom: "0%",
    containLabel: true,
  },
  xAxis: {
    type: "time",
    position: "top", // x 轴位置
    //对标线
    splitLine: {
      show: true,
      lineStyle: {
        type: "dashed",
        color: "rgba(255, 255, 255, 0.2)",
      },
    },
    axisLabel: {
      show: true,
       color: "#fff",
      formatter: function (val) {
        return dayjs(val).format("YYYY-MM-DD");
      },
    },
  },
  yAxis: {
    inverse: true, // y 轴数据翻转，该操作是为了保证项目一放在最上面，项目四在最下面
    type: "category",
    axisLabel: {
      show: true,
       color: "rgba(255, 255, 255, 0.65)",
    },
    data: [],
  },
  series: [
    //隐藏条(存储开始时间)
    {
      name: "",
      type: "bar",
      stack: "duration",
      itemStyle: {
        color: "#041B23",
      },
      zlevel: -1, // zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面
      z: 9, // z值小的图形会被z值大的图形覆盖，z相比zlevel优先级更低，而且不会创建新的 Canvas
      data: [],
    },
    //展示条(存储结束时间)
    {
      name: "正常节点",
      type: "bar",
      stack: "duration",
      zlevel: -1,//必须设置
      itemStyle: {
        borderColor: "#041B23",
        borderWidth: 2,
      },

      data: [],
    },
    {
      name: "关键节点",
      type: "bar",
      stack: "duration",
      zlevel: -1,//必须设置
      itemStyle: {
        borderColor: "#041B23",
        borderWidth: 2,
      },

      data: [],
    },
    {
      name: "超期节点",
      type: "bar",
      stack: "duration",
      zlevel: -1,//必须设置
      itemStyle: {
        borderColor: "#041B23",
        borderWidth: 2,
      },

      data: [],
    },
  ],
};
export default {
  data() {
    return {
      chart: null,
    };
  },
  methods:{
 	 getInfo(){
	  	query(info).then((res) => {
	        res.data.map((val) => {
	          //存储y轴数据
	          option.yAxis.data.push(val.nodeName);
	          //存储开始时间(存在option.series[0]中)
	          //开始时间统一设置时分秒为00:00:00(因为当数据为同一天时也可展示进度条)
	          option.series[0].data.push(
	            dayjs(val.startTime).format("YYYY-MM-DD 00:00:00")
	          );
	          //存储结束时间(存在option.series[1,2,3]中) 注:当类型判断不到时存储'0'
	          //结束时间统一设置时分秒为23:59:59(因为当数据为同一天时也可展示进度条)
	         //NORMAL 正常节点, IMPORTANT 关键节点,OVER超期节点
	            if (val.nodeType == "NORMAL") {
	              option.series[1].data.push(dayjs(val.endTime).format("YYYY-MM-DD 23:59:59"));
	              option.series[2].data.push("0");
	              option.series[3].data.push("0");
	            } else if (val.nodeType == "IMPORTANT") {
	              option.series[2].data.push(dayjs(val.endTime).format("YYYY-MM-DD 23:59:59"));
	              option.series[1].data.push("0");
	              option.series[3].data.push("0");
	            } else if (val.nodeType == "OVER") {
	              option.series[3].data.push(dayjs(val.endTime).format("YYYY-MM-DD 23:59:59"));
	              option.series[2].data.push("0");
	              option.series[1].data.push("0");
	            }
	        });
	        console.log(option.series[0].data);
	        console.log(option.series[1].data);
	        console.log(option.series[2].data);
	        console.log(option.series[3].data);
	      });
	  },
	   created() {
		  this.getInfo();
 	  }
  }
}
</script>

总结

这样简单代码实现甘特图就完成了,比起网上其他甘特图真是简单易上手,如果能解决你的问题还希望点点小红心加关注哦~

Baer_
关注
专栏目录
Vue 甘特图
ChickenBro_的博客
10-12 2万+
vue做甘特图，先大致介绍下核心功能： （1）横轴、纵轴拖拽； （2）自定义监听点击事件（双击、右键等）（3）任务之间显示父子层级关系；（4）左侧列表信息，右侧时间轴表示任务；（5）每个任务可以订制样式，并且可以动态修改样式；（6）自定义时间粒度显示（小时、天、星期、月、年）；（7）支持大批量数据渲染；（8）支持同行多节点渲染；（9）支持选中，以及批量选中；（9）优秀的扩展性，支持第三方插件。等等还有其他的一些功能。这里先看一下效果图： 　　接下来会介绍用什么实现的，...
vue2实现可拖拽甘特图（结合element-ui的gantt图）
11-07
接到公司需求，要做一个可拖拽的甘特图来实现排期需求，官方的插件要付费还没有中文的官方文档可以看，就去找了各种开源的demo来看，功能上都不是很齐全，于是总结了很多demo，合在一起组成了一版较为完整的满足需求的甘特图。 1.拖拽 拖拽功能是甘特图的主要功能，该demo实现了甘特图时间块上、下、左、右拖拽功能。 2.排序 拖拽后时间块进行排序，计算重叠区域大小确定插入位置。 3.时间选择 结合element-ui的日期时间选择器来确定时间轴。 4.搜索 搜索已存在的时间块，并定位到相应位置。 5.新建排期任务 使用element-ui的弹框以及表单 新建成功的排期列表添加到排期任务中。 6.右键菜单 右击时间块，可以进行查看、删除、修改等操作。 7.撤回 每删除或移动时间块后，增加一条操作记录，点击撤回可撤回当前操作。 8.批量操作 在批量操作后点击保存，才向后端存储数据。
前端Vue2自制甘特图组件源码
03-15
根据该https://blog.csdn.net/PorkCanteen/article/details/128075399的文章，修改为vue版本的甘特图源码，增加实际业务的多段显示，更贴合工作日常需要
Vue Gantt 图表安装与配置完全指南
gitblog_07850的博客
09-13 368
Vue Gantt 图表安装与配置完全指南 Vue-Gantt-chart 使用Vue做数据控制的Gantt图表 项目地址: https://gitcode.com/gh_mirrors/vu/Vue-Gantt-chart ...
甘特弹性：甘特图[javascript甘特图，甘特组件，vue甘特图，vue甘特图，响应式甘特图，项目经理，vue项目]
02-04
甘特弹性-Javascript甘特图（可编辑，响应式） 适用于vue，jquery，vanilla js和其他框架的Javascript Gantt Chart 项目已作为下一个主要版本移至 甘特弹性 是vue组件，但可以在其他框架中使用，甚至可以与jQuery一起使用（vue是一种弹性轻量级的框架）。 安装 npm install --save gantt-elastic或从github /克隆仓库下载zip 并且如果您想要默认标题 npm install --save gantt-elastic-header 用法 <!DOCTYPE html > < html charset ="
vue制作甘特图项目源码
06-08
本项目主要面向需要使用vue来实现甘特图需求的开发者，项目实现了节点的拖拽，并用导航线连接各个节点，实现甘特图进度动态更改，导航线可以随着节点的拖拽动态变换位置，并可以新增、删除和修改任务 本项目只提供了vue前端实现，并没有与后台连接，可以根据需要自行开发后台服务端。 详细介绍请参看：https://blog.csdn.net/leonMary/article/details/125183053
基于vue的甘特图，可上下拖拽
05-14
基于vue实现甘特图实现上下拖拽，达到排班的要求，之前困于没有好的方案，在我研究两周后最终实现甘特图的拖拽效果
vue 实现项目进度甘特图
chensi_07的博客
04-26 6132
实现以1天、7天、30天为周期（周期根据筛选条件选择），展示每个项目不同里程碑任务进度。以上就是实现甘特图的全部过程，欢迎大佬们指教。有需要的小伙伴也可以直接引入插件，自己修改。引入插件（我是全局引入的）
vue中利用dhtmlx-gantt实现甘特图
zh626678的博客
02-29 3347
在vue中使用dhtmlxGantt实现甘特图
vue实现甘特图
热门推荐
weixin_41463944的博客
03-16 1万+
1、引入依赖 npm install dhtmlx-gantt@6.3.7 2、组件代码 <template> <div class="app-container"> <div ref="gantt" class="left-container" /> </div> </template> <script> import gantt from 'dhtmlx-gantt' // 引入模块 //import 'd
Vue-Gantt-chart:使用Vue做数据控制的Gantt图表
08-05
vue-gantt-chart 基于 Vue 实现的 gantt-like 图表 ,用于排班展示 Catalog template code script code data Slot block 容器块slot 有 两种 需要注意 :star: customGenerateBlocks 为 false（默认值） 的情况 :star: customGenerateBlocks 为 true 的情况 left 行名slot markline 时间标记线slot timeline 行名slot title 标题slot API Param Method Event Run Demo Caution Update License Feature 虚拟列表，快速渲染可视区域，支持大量数据渲染 可变时间轴，1 分钟，2 分钟，3 分钟，4 分钟~~~到一天 可变单元格 标记线 支持自定义描述和容器块 Screen
vue-ganttastic:Vue.js的简单易用的甘特图组件
05-28
Vue-ganttastic Vue.js的简单易用的甘特图组件 主页 安装 您可以使用npm在项目中安装和使用Vue-Ganttastic： npm install vue-ganttastic 是Vue-Ganttastic的对等依赖项。 为了使Vue-Ganttastic正常工作，您需要在项目中安装它： npm install moment 基本用法 导入组件GGanttChart和GGanttRow 。 在模板中使用g-gantt-chart ，将所需的图表开始和图表结束时间传递为​​props（ chart-start和chart-end ），然后将g-gantt-row添加到默认模板槽。 使用bars props将包含bar对象的数组传递到每一行，同时使用props bar-start和bar-end在bar对象中指定代表bar开始和bar结束时间的属性的名称。 有
基于Vue实现的ganttlike图表用于排班展示
08-09
基于 Vue 实现的 gantt-like 图表 ,用于排班展示
Vue整合甘特图（横道图、Gantt）实例
Hello World
07-19 9192
Vue整合甘特图（横道图、Gantt）实例 引入相应的模块： cnpm install gantt-elastic --save cnpm install gantt-elastic-header --save cnpm install dayjs --save Vue代码部分： 总结 每天一个提升小技巧！！！ 代码如下（示例）： data = pd.read_csv( 'https://labfile.oss.aliyuncs.com/courses/1283/adult.data.cs
VUE使用echarts编写甘特图（组件）
qq_45847565的博客
09-10 612
VUE使用echarts编写甘特图（组件）
Vue项目的甘特图组件：dhtmlx-gantt使用教程和实现效果展示
最新发布
Yy55gc25112的博客
10-12 1524
公司的甘特图需求，研究了几个组件后，选择使用 dhtmlx-gantt 进行实现，dhtmlx-gantt使用其实是偏简单的，文档虽然是英文，但配合翻译也是可以看懂的，下面将公司需求的代码实现粘贴出来，并简单介绍一下使用方法，希望对你有帮助。下面讲一下 dhtmlx-gantt 的一些配置项，也可以说是我用到的配置项，更多的就要参考官方文档了。需求是不需要bar连线的，所以将bar连线注释掉了，连线也是可以有的。如果你的页面能展示出来基本样式，那么就成功啦，咱们继续下一步。然后在css内定义样式就好啦。
【vue库应用】 - 甘特图 dhtmlx-gantt
star_3344的博客
07-05 4274
甘特图是一种项目管理工具，以直观的方式显示项目的时间轴和任务计划。 dhtmlx-gantt库是一个用于创建交互式和可自定义甘特图的js库。本文对该库进行简单应用，包括安装、引用、初始化及配置
前端vue实现甘特图
xiaofiy的博客
03-18 9776
前端实现甘特图
vue甘特图 app
09-28
vue甘特图 app是一个使用Vue.js框架实现的甘特图应用程序。它可以通过引用DHTMLX Gantt Chart插件来实现甘特图的功能。该插件提供了节点拖拽、任务进度动态更改、导航线的动态变换位置等功能。如果您需要在Vue项目中使用甘特图，可以参考如下教程和示例代码： 1. 首先，您需要安装DHTMLX Gantt Chart插件。您可以在GitHub上找到该插件的文档和源代码：https://github.com/DHTMLX/gantt 2. 接下来，您可以参考以下教程和示例来了解如何将dhtmlxGantt与Vue.js框架集成： - "How To Use dhtmlxGantt with Vue.js Framework - Tutorial and Demo"：这篇教程提供了逐步指导，帮助您在Vue.js中集成dhtmlxGantt，并包含了示例代码。您可以在以下链接找到该教程和示例代码：https://dhtmlx.com/blog/use-dhtmlxgantt-vue-js-framework-demo/ 通过参考以上资源，您可以开始使用Vue.js框架来创建具有甘特图功能的应用程序。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值