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