echarts实现甘特图
效果如下图:y轴为餐桌编号,x轴为客人预订的时间:以8号餐桌为例,甘特数据为阴影部分,表示不同时间段客人用餐占用的时间。如果时间段有交集则说明有时间冲突,应做时间调整。vue 部分代码:<template><div id="gt-chart" ref="gt-chart"></div></div></template><script
·
效果如下图:y轴为餐桌编号,x轴为客人预订的时间:
以8号餐桌为例,甘特数据为阴影部分,表示不同时间段客人用餐占用的时间。如果时间段有交集则说明有时间冲突,应做时间调整。
vue 部分代码:
<template>
<div id="gt-chart" ref="gt-chart"></div>
</div>
</template>
<script>
//初始化柱状图
initChart () {
let chart = this.$echarts.init(document.getElementById('gt-chart'))
let data = new FormData()
let date = getCurrentDate()
data.append('date', date)
let yData = []
this.listAirptNoTime(data).then((res) => {
let series = []
yData = res.data.airptNos
let ganttMap = res.data.ganttMap
for (let key in ganttMap) {
if (key.startsWith('start')) {
let startData = ganttMap[key]
let endKey = 'end' + key.substring(5)
let endData = ganttMap[endKey]
series.push(
{
type: 'bar',
stack: 'start' + key.substring(5),
itemStyle: {
normal: {
color: 'rgba(0,0,0,0)'
}
},
data: startData
},
{
type: 'bar',
stack: 'start' + key.substring(5),
data: endData
}
)
}
}
let option = {
title: {
text: '餐桌甘特图',
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
formatter(params){
return null
}
},
xAxis: {
type: 'time',
},
yAxis: {
type: 'category',
data: yData
},
series: series
}
chart.setOption(option)
})
</script>
<style scoped>
#gt-chart {
padding: 0 0 0 0;
width: 100%;
height: 100%;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
</style>
java部分:
/**
* 获取占用时间甘特图数据
*
* @param date
* @return
*/
public ServiceResult<AirptNoGanttVO> listAirptNoTime(String date) {
String airportCode = AuthUtil.getCurrentUser().getAgencyCode();
//1.按照餐桌号分组
Map<String, List<FlightPairAO>> gateMap = gateConflictService.getGateMap(airportCode, date);
//2.排序
Iterator<Map.Entry<String, List<FlightPairAO>>> it = gateMap.entrySet().iterator();
Map<String, List<FlightPairVO>> newSortedMap = new HashMap<>();
while (it.hasNext()) {
Map.Entry<String, List<FlightPairAO>> entry = it.next();
List<FlightPairAO> flightPairList = entry.getValue();
List<FlightPairVO> sortList = gateConflictService.sortFlightPair(flightPairList);
newSortedMap.put(entry.getKey(), sortList);
}
//3.找出预订的餐桌最多的
Iterator<Map.Entry<String, List<FlightPairVO>>> newSortedMapIt = newSortedMap.entrySet().iterator();
List<String> airptNoList = new ArrayList<>();
int max = 0;
while (newSortedMapIt.hasNext()) {
Map.Entry<String, List<FlightPairVO>> entry = newSortedMapIt.next();
List<FlightPairVO> flightPairList = entry.getValue();
airptNoList.add(entry.getKey());
if (flightPairList.size() > max) {
max = flightPairList.size();
}
}
Map<String, List<String>> ganttMap = new LinkedHashMap();
if (max > 0) {
//4.最多的餐桌占用时间有几个就创建几个list,占用开始时间和占用结束时间分别存放在list
for (int i = 0; i < max; i++) {
List<String> startList = new ArrayList();
List<String> endList = new ArrayList();
if (!CollectionUtils.isEmpty(airptNoList)) {
for (String airptNo : airptNoList) {
List<FlightPairVO> list = newSortedMap.get(airptNo);
if (!CollectionUtils.isEmpty(list) && list.size() >= i + 1) {
FlightPairVO pairVO = list.get(i);
startList.add(pairVO.getStartTime());
endList.add(pairVO.getEndTime());
} else {
startList.add(null);
endList.add(null);
}
}
}
ganttMap.put("start_" + i, startList);
ganttMap.put("end_" + i, endList);
}
}
//5.将餐桌号数据和甘特图展示数据封装给前端展示
AirptNoGanttVO result = new AirptNoGanttVO();
String[] airptNos = airptNoList.toArray(new String[airptNoList.size()]);
result.setAirptNos(airptNos);
result.setGanttMap(ganttMap);
return ServiceResultHelper.genResultWithSuccess(result);
}
}
更多推荐
已为社区贡献10条内容
所有评论(0)