全网最新-VUE甘特图

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",
 }...