说在前面
项目上有需求,需要在大屏上展示进度甘特图,调研了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,
},
}
],
说到最后
本文介绍了使用echarts实现甘特图效果的实现思路分析以及部分技术方案,有兴趣的各位可以动手实践。