菜单 搜索
首页 前端知识 全网最新-VUE甘特图

全网最新-VUE甘特图

2024-06-07 12:06:17 前端知识 前端哥 454 656 我要收藏

echart-甘特图

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

文章目录

  • echart-甘特图
  • 前言
  • 一、先看效果
  • 二、使用步骤
    • 1.关键代码(设置zlevel: -1,颜色跟背景颜色一样)
    • 2.数据处理
    • 3.完整代码
  • 总结

前言

例：最近网上找了很多关于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>

总结

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

转载请注明出处或者链接地址：https://www.qianduange.cn//article/11280.html
标签
甘特图
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac

2024-08-27 09:08:17

前端提高篇（102）：jQuery高级方法callbacks、deferred

2024-05-09 11:05:34

解决npm install 报错 “npm err code 1“

2024-06-06 10:06:47

【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED

2024-04-22 09:04:34

vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack

2024-03-29 15:03:20

npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.

2024-04-20 17:04:38

JQuery中的load()、$

2024-05-10 08:05:15

《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)

2024-10-30 21:10:12

基于Java SpringBoot Vue HTML5药店管理系统(源码 LW 调试文档 讲解等)/药店管理软件/药店进销存系统/药店库存管理系统/药店销售系统/药品管理系统/药店收银系统

2024-11-10 09:11:04

基于Java SpringBoot Vue HTML5宠物健康顾问系统(源码 LW 调试文档 讲解等)/宠物健康/顾问系统/宠物护理/宠物医疗/宠物保健/宠物咨询/宠物医生/宠物健康管理/宠物健康服务

2024-11-10 09:11:50

大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

CSS常用属性（文本属性）

2024-11-04 09:11:111000
3

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
4

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
5

vue使用datav echarts

2024-09-06 00:09:381000
6

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
7

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
8

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
9

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
10

npm的使用

2024-08-18 00:08:131000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！