全网最新-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",
 }...
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值