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

全网最新-VUE甘特图

2024-06-07 12:06:17 前端知识 前端哥 443 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基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

Jackson 反序列化失败，出现JSON: Unrecognized field

2024-06-13 21:06:48

高性能 Rust JSON 库 sonic-rs 优化实践

2024-06-13 21:06:41

labelme标签格式json转化成yolov8支持是数据集格式

2024-06-13 21:06:39

JWT（JSON Web Tokens）入门与Java实践

2024-06-13 21:06:39

1.10 Unity中的数据存储 JSON

2024-06-13 21:06:30

JSON 数据格式化方法

2024-06-13 21:06:26

常见的第三方依赖管理工具：Maven、Gradle、npm、Nuget……（什么是第三方依赖工具）

2024-06-13 21:06:26

【全网首出】npm run serve报错 Expression: thread_id_key != 0x7777

2024-06-13 21:06:20

vue3代码运行报错 No matching export in “node_modules/.pnpm/vue-demi@0.14.6_vue@3.2.47/node_modules/vue-dem

2024-06-13 21:06:20

npm install 出现 npm ERR! cb() never called! npm ERR! This is an error with npm itself.

2024-06-13 21:06:20

大家推荐的文章
1

成为优秀的TS体操高手 之 TS 类型体操前置知识储备

2024-06-10 11:06:351000
2

django改了html网页没有变化,,前端页面居然没有对应变化?!修改了css文件但是前端页面没有反应

2024-06-06 10:06:201000
3

html简单网页代码：基于html关爱空巢老人网页设计与实现

2024-06-04 10:06:181000
4

jquery实现注册表单验证（仅供参考）

2024-06-07 00:06:411000
5

基于Echarts的高校就业数据可视化管理系统设计与实现（计算机毕业设计源码81461）

2024-05-29 10:05:301000
6

VUE3 Vite Pinia TypeScript项目笔记

2024-05-20 14:05:191000
7

轻松掌握数据库中JSON数据提取：json_extract函数用法详解

2024-05-09 11:05:011000
8

HTML5(六)——Canvas 高级操作

2024-05-09 10:05:191000
9

UE4.27支持HTML5

2024-05-07 13:05:261000
10

前端vue项目使用Decimal.js做加减乘除求余运算

2024-04-23 21:04:401000

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

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

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

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

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