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.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);
    }
}