echarts绘制甘特图

news2024/10/7 2:32:20

说在前面

项目上有需求，需要在大屏上展示进度甘特图，调研了DHTMLX和普加甘特图，效果都不是特别符合需求现状，查询了一些博客，决定使用echarts来绘制甘特图。

实现效果展示

在这里插入图片描述

实现思路分析

1、应该采用柱状图，且柱子横向分布

将data赋值给yAxis即可；

2、纵坐标应为进度图中的进度节点

正常赋值即可，注意顺序，可添加inverse: true,改变顺序，axisTick: { show: false } 去除刻度

3、甘特图数据量化

这里需要注意的是，对于进度计划中提出的开始、结束日期是不好量化的，所以这里要转换一下思路；
使用结束日期减去开始日期来计算天数，来表达某条任务持续的时间。

4、横坐标应展示日期

上面说了使用差值天数来标识任务持续时间，所以这里单纯设置日期的横坐标是无法对应的。
设置两个x轴，一个x轴是日期（x1），另外一个x轴type为value类型(x2)，可以理解为x2是真实的x轴，x1是虚假的x轴，但是我们要将x2进行隐藏，来达到模拟的效果；
当然，这两个轴的数据需要对应，下面会展开说。

5、对于一些前期未开工的数据处理

柱状图的数据是连续的，如果需要实现前面“镂空”的效果，则需要再次使用双x轴的视觉欺骗，使用纯透明的柱状图来填充前面缺失的部分；

部分技术实现代码

计算天数差值：

subDate(startDate, endDate) {
    let result = (endDate.getTime() - startDate.getTime()) / 3600000 / 24;
    return result
},

x轴的设置：
加入我们想展示甘特图从’2023-04-01’ - '2024-06-30’之间的数据，则x轴应为:

        let xAxisData = ['2023.04','2023.05','2023.06','2023.07','2023.08','2023.09','2023.10','2023.11','2023.12','2024.01','2024.02','2024.03','2024.04','2024.05','2024.06'];

 xAxis: [
    { // 真实的x轴，但是隐藏了
        min: 0,
        max: this.subDate(new Date('2023-04-01'), new Date('2024-06-30')) + 1,
        type: "value",
        axisLabel: { show: false },
        splitLine: { show: false },
    },{ // 虚假的x轴，展示出来
        type: "category",
        boundaryGap: true,
        data: xAxisData,
        axisTick: { show: false }, //刻度
        axisLine: { show: false },
        splitLine: {
        show: true,
    },
]

数据从0开始，到天数总数为止，比如2023年4月有30天，横轴总长就代表了30天，也代表了2023-04这个刻度。以此类推，表示日期的x轴对应的天数就等于数值的天数了，完成了数据的对应。

透明柱状图数据计算：

let minDate = new Date("2023-04-01");
touming.push(this.subDate(minDate, new Date(item.planBeginDate)))

开始日期为4.1号，比如任务a计划开始时间为4.15号，则距离y轴的距离就应该为 14，这部分就置为透明即可。
带颜色柱状图数据计算：

notSelectedData.push(
    this.subDate(
        new Date(item.planBeginDate),
        new Date(item.planEndDate)
    ) + 1
);

柱状图绘制：

let yanse = {
    normal: { barBorderColor: "rgba(0,0,0,0)", color: "rgba(0,0,0,0)" },
    emphasis: { barBorderColor: "rgba(0,0,0,0)", color: "rgba(0,0,0,0)" },
};
series: [
    {
        type: "bar",
        barWidth: 15,
        stack: "stackNotSelected", //叠加效果
        barGap: "-100%", //重叠效果
        itemStyle: transparentStyle,
        data: touming,
    },
    {
        type: "bar",
        barWidth: 15,
        stack: "stackNotSelected", //叠加效果
        barGap: "-100%", //重叠效果
        itemStyle: {
        normal: {
            color: "#49A7FF",
        },
        },
        data: yanse,
        label: {
            show: false,
        },
    }
],