甘特图 及数据处理

效果如下。。。

 1、甘特图代码

option = {
      grid: {
        left: '1%',
        right: '5%',
        bottom: '3%',
        top: '1%',
        containLabel: true
      },
      xAxis: {
        type: 'value',
        position: 'top',
        interval: 2,   //以几位显示  
        max: 30,      //这里是x轴多少天  写个判断月份天数函数
        min: 0, //将data里最小时间的整点时间设为min,否则min会以data里面的min为开始进行整点递增
        axisLabel: {
          show: true,
          formatter: function (value, index) {
            return value ? value : '';
          }
        }
      },
      yAxis: {
        axisLine: {
          lineStyle: {
            color: 'rgba(0,0,0,0.1)',
          }
        },
        data: ['张三', '李四', '王五', '赵六'],
        axisLabel: {
          textStyle: {
            color: "rgba(0, 0, 0, 0.65)", //刻度颜色
            fontSize: 14  //刻度大小
          },
        }
      },
      series: [
        {
          type: 'custom',
          renderItem: function (params, api) {//开发者自定义的图形元素渲染逻辑，是通过书写 renderItem 函数实现的
            var categoryIndex = api.value(0);//这里使用 api.value(0) 取出当前 dataItem 中第一个维度的数值。
            var start = api.coord([api.value(1), categoryIndex]); // 这里使用 api.coord(...) 将数值在当前坐标系中转换成为屏幕上的点的像素值。
            var end = api.coord([api.value(2), categoryIndex]);
            // var height = api.size([0, 1])[1];
            var height = 20;
            return {
              type: 'rect',// 表示这个图形元素是矩形。还可以是 'circle', 'sector', 'polygon' 等等。
              shape: echarts.graphic.clipRectByRect({ // 矩形的位置和大小。
                x: start[0],
                y: start[1] - height / 2,
                width: end[0] - start[0],
                height: height
              }, { // 当前坐标系的包围盒。
                x: params.coordSys.x,
                y: params.coordSys.y,
                width: params.coordSys.width,
                height: params.coordSys.height
              }),
              style: api.style()
            };
          },
          encode: {
            x: [1, 2], // data 中『维度1』和『维度2』对应到 X 轴
            y: 0// data 中『维度0』对应到 Y 轴
          },
          itemStyle: {
            normal: {
              color: '#0A8BFF'
            }
          },
          data: [[0, 3, 5], [0, 3, 5], [0, 6, 10], [1, 2, 3], [1, 3, 4], [1, 6, 8], [1, 12, 20], [2, 3, 6], [2, 6, 8], [2, 12, 20]]
        }
      ]
    };

2、数据二维数组====>>[[0, 3, 5], [0, 3, 5], [0, 6, 10], [1, 2, 3], [1, 3, 4], [1, 6, 8], [1, 12, 20], [2, 3, 6], [2, 6, 8], [2, 12, 20]]的处理

后端给我的数据要求处理成这样

{
  "data": [
    {
      "id": "2074",
      "name": "裴志华",
      "data": [
        {
          "start": "2021-12-20 17:46:05",
          "end": "2021-12-22 11:42:21"
        },
        {
          "start": "2021-12-20 17:40:53",
          "end": "2021-12-20 17:41:33"
        },
        {
          "start": "2021-12-20 16:51:08",
          "end": "2021-12-20 17:40:18"
        },
        {
          "start": "2021-12-20 16:48:30",
          "end": "2021-12-20 16:51:35"
        },
        {
          "start": "2021-12-20 16:46:33",
          "end": "2021-12-20 16:48:07"
        },
        {
          "start": "2021-12-20 16:37:21",
          "end": "2021-12-20 16:45:22"
        },
        {
          "start": "2021-12-20 14:21:40",
          "end": "2021-12-20 15:23:56"
        },
        {
          "start": "2021-12-16 17:41:51",
          "end": "2021-12-16 17:44:09"
        }
      ]
    },
    {
      "id": "8163",
      "name": "徐宁3",
      "data": [
        {
          "start": "2021-12-20 17:45:19",
          "end": "2021-12-20 17:46:09"
        },
        {
          "start": "2021-12-16 17:13:59",
          "end": "2021-12-16 17:21:39"
        }
      ]
    }
  ],
  "statusCode": 200
}

处理数据代码

        let namelist = []     
        const newArr = []
        res.data.forEach((item, index) => {
          namelist.push((item.name).slice(0,5))     //名字太长的做处理
          if (item.data.length < 1) {               //某人若是没有数据给塞进去，方便后面遍历
              item.data[0] = {start: "2021-12-00", end: "2021-12-00"}
          }
          item.data.forEach(item1 => {
            let newArr1 = []
            newArr1.push(
              index,
              item1.start.split('-')[item1.start.split('-').length - 1],
              item1.end.split('-')[item1.start.split('-').length - 1]
            )
            let arr = newArr1.map(Number)
            if (arr[1]) {      //同一天开始结束的甘特图不显示，所以开始时间减一天
              arr[1] = arr[1]-1
            }         
            newArr.push(arr)
          })
       })
       console.log(newArr)
       
        dataList1 = namelist      //赋值全局变量  给option中的data
        dataList2 = newArr