echarts实现甘特图

效果如下图：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.airptNoslet ganttMap = res.data.ganttMapfor (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，占用开始时间和占用结束时间分别存放在listfor (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);}
}

echarts实现甘特图相关推荐

echart 时间滚动_基于 ECharts 封装甘特图并实现自动滚屏
项目中需要用到甘特图组件,之前的图表一直基于 EChart 开发,但 EChart 本身没有甘特图组件,需要自行封装经过一番鏖战,终于完成了... 我在工程中参考 v-chart 封装了一套图表组件 ...
vue+echarts画甘特图
vue项目中添加echarts,只需要增加echarts依赖,然后在main.js中引入echarts就可以使用了. 1.npm install echarts --save 2.修改main.js ...
echarts gantt甘特图示例
甘特图(Gantt chart)又称为横道图.条状图(Bar chart).其通过条状图来显示项目.进度和其他时间相关的系统进展的内在关系随着时间进展的情况.以提出者亨利·劳伦斯·甘特(Henry L ...
Echarts之甘特图type: ‘custom‘参数详解
甘特图 const groupData = XEUtils.groupBy(data, "eqpName"); //分组后的数据 const yAxisData = Object. ...
html 绘制甘特图,echarts绘制甘特图
在setoption之后添加这段代码:window.addEventListener('resize', function () { myChart.resize(); }); 图表就能随着窗口大小, ...
echarts 柱状图甘特图
option = { title: { text: "一天分布", subtext: "纯属虚构", }, tooltip: { trigger: " ...
echarts实现甘特图（项目进度/任务进度）
1.先看效果图: 2.代码部分我只贴出来option部分,其余的都是一样的:也可参考官网地址: https://www.echartsjs.com/examples/zh/index.html#cha ...
Vue 中使用 Echarts 实现项目进度甘特图
Vue 中使用 Echarts 实现项目进度甘特图参考:echarts实现甘特图(项目进度/任务进度) 简易版 1. 项目中安装 echarts npm i echarts 2. 实现甘特图 < ...
ECharts画分类甘特图
项目最近做任务排产,需要绘画甘特图,并且每两份一组,做了一个JQuery快速做了POC,实现了大部分功能,后来持续开发,做到了划定当前时间,任务多了后固定左侧列和顶部坐标轴行等等. 分享博客的话就简单 ...

echarts实现甘特图

echarts实现甘特图相关推荐

最新文章

热门文章