甘特图

393 阅读8分钟
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>

</html>
<script>
    let list = {
        "code": "200",
        "data": {
            "datasList": [
                {
                    "nodeName": "node1",
                    "taskVer": 0,
                    "pjId": "",
                    "dtime": "2020-11-20 20:00:00",
                    "clusterId": 105,
                    "batchId": 1605873600002,
                    "duration": 15,
                    "clusterName": "ETL节点1集群",
                    "taskName": "test",
                    "beginTime": "2020-11-20 20:00:00",
                    "endTime": "2020-11-20 20:00:00",
                    "pjName": "",
                    "nodeId": 1,
                    "taskId": 129
                },
                {
                    "nodeName": "node1",
                    "taskVer": 0,
                    "pjId": "",
                    "dtime": "2020-11-20 19:00:00",
                    "clusterId": 105,
                    "batchId": 1605870000002,
                    "duration": 24,
                    "clusterName": "ETL节点1集群",
                    "taskName": "test",
                    "beginTime": "2020-11-20 19:00:00",
                    "endTime": "2020-11-20 19:00:00",
                    "pjName": "",
                    "nodeId": 1,
                    "taskId": 129
                },
                {
                    "nodeName": "node1",
                    "taskVer": 0,
                    "pjId": "",
                    "dtime": "2020-11-20 18:00:00",
                    "clusterId": 105,
                    "batchId": 1605866400003,
                    "duration": 20,
                    "clusterName": "ETL节点1集群",
                    "taskName": "test",
                    "beginTime": "2020-11-20 18:00:00",
                    "endTime": "2020-11-20 18:00:00",
                    "pjName": "",
                    "nodeId": 1,
                    "taskId": 129
                },
                {
                    "nodeName": "node1",
                    "taskVer": 0,
                    "pjId": "",
                    "dtime": "2020-11-20 17:00:00",
                    "clusterId": 105,
                    "batchId": 1605862800002,
                    "duration": 6,
                    "clusterName": "ETL节点1集群",
                    "taskName": "test",
                    "beginTime": "2020-11-20 17:00:00",
                    "endTime": "2020-11-20 17:00:00",
                    "pjName": "",
                    "nodeId": 1,
                    "taskId": 129
                },
                {
                    "nodeName": "node1",
                    "taskVer": 0,
                    "pjId": "",
                    "dtime": "2020-11-20 16:00:00",
                    "clusterId": 105,
                    "batchId": 1605859200002,
                    "duration": 24,
                    "clusterName": "ETL节点1集群",
                    "taskName": "test",
                    "beginTime": "2020-11-20 16:00:00",
                    "endTime": "2020-11-20 16:00:00",
                    "pjName": "",
                    "nodeId": 1,
                    "taskId": 129
                },
                {
                    "nodeName": "node1",
                    "taskVer": 0,
                    "pjId": "",
                    "dtime": "2020-11-20 15:00:00",
                    "clusterId": 105,
                    "batchId": 1605855600002,
                    "duration": 11,
                    "clusterName": "ETL节点1集群",
                    "taskName": "test",
                    "beginTime": "2020-11-20 15:00:00",
                    "endTime": "2020-11-20 15:00:00",
                    "pjName": "",
                    "nodeId": 1,
                    "taskId": 129
                },
                {
                    "nodeName": "node1",
                    "taskVer": 0,
                    "pjId": "",
                    "dtime": "2020-11-20 14:00:00",
                    "clusterId": 105,
                    "batchId": 1605852000002,
                    "duration": 14,
                    "clusterName": "ETL节点1集群",
                    "taskName": "test",
                    "beginTime": "2020-11-20 14:00:00",
                    "endTime": "2020-11-20 14:00:00",
                    "pjName": "",
                    "nodeId": 1,
                    "taskId": 129
                },
                {
                    "nodeName": "node1",
                    "taskVer": 0,
                    "pjId": "",
                    "dtime": "2020-11-20 13:00:00",
                    "clusterId": 105,
                    "batchId": 1605848400001,
                    "duration": 18,
                    "clusterName": "ETL节点1集群",
                    "taskName": "test",
                    "beginTime": "2020-11-20 13:00:00",
                    "endTime": "2020-11-20 13:00:00",
                    "pjName": "",
                    "nodeId": 1,
                    "taskId": 129
                },
                {
                    "nodeName": "node1",
                    "taskVer": 0,
                    "pjId": "",
                    "dtime": "2020-11-20 12:00:00",
                    "clusterId": 105,
                    "batchId": 1605844800002,
                    "duration": 4,
                    "clusterName": "ETL节点1集群",
                    "taskName": "test",
                    "beginTime": "2020-11-20 12:00:00",
                    "endTime": "2020-11-20 12:00:00",
                    "pjName": "",
                    "nodeId": 1,
                    "taskId": 129
                },
                {
                    "nodeName": "node1",
                    "taskVer": 0,
                    "pjId": "",
                    "dtime": "2020-11-20 11:00:00",
                    "clusterId": 105,
                    "batchId": 1605841200001,
                    "duration": 14,
                    "clusterName": "ETL节点1集群",
                    "taskName": "test",
                    "beginTime": "2020-11-20 11:00:00",
                    "endTime": "2020-11-20 11:00:00",
                    "pjName": "",
                    "nodeId": 1,
                    "taskId": 129
                },
                {
                    "nodeName": "node1",
                    "taskVer": 0,
                    "pjId": "",
                    "dtime": "2020-11-20 10:00:00",
                    "clusterId": 105,
                    "batchId": 1605837600003,
                    "duration": 7,
                    "clusterName": "ETL节点1集群",
                    "taskName": "test",
                    "beginTime": "2020-11-20 10:00:00",
                    "endTime": "2020-11-20 10:00:00",
                    "pjName": "",
                    "nodeId": 1,
                    "taskId": 129
                },
                {
                    "nodeName": "node1",
                    "taskVer": 0,
                    "pjId": "",
                    "dtime": "2020-11-20 09:00:00",
                    "clusterId": 105,
                    "batchId": 1605834000002,
                    "duration": 16,
                    "clusterName": "ETL节点1集群",
                    "taskName": "test",
                    "beginTime": "2020-11-20 09:00:00",
                    "endTime": "2020-11-20 09:00:00",
                    "pjName": "",
                    "nodeId": 1,
                    "taskId": 129
                },
                {
                    "nodeName": "node1",
                    "taskVer": 0,
                    "pjId": "",
                    "dtime": "2020-11-20 08:00:00",
                    "clusterId": 105,
                    "batchId": 1605830400003,
                    "duration": 9,
                    "clusterName": "ETL节点1集群",
                    "taskName": "test",
                    "beginTime": "2020-11-20 08:00:00",
                    "endTime": "2020-11-20 08:00:00",
                    "pjName": "",
                    "nodeId": 1,
                    "taskId": 129
                },
                {
                    "nodeName": "node1",
                    "taskVer": 0,
                    "pjId": "",
                    "dtime": "2020-11-20 07:00:00",
                    "clusterId": 105,
                    "batchId": 1605826800005,
                    "duration": 10,
                    "clusterName": "ETL节点1集群",
                    "taskName": "test",
                    "beginTime": "2020-11-20 07:00:00",
                    "endTime": "2020-11-20 07:00:00",
                    "pjName": "",
                    "nodeId": 1,
                    "taskId": 129
                },
                {
                    "nodeName": "node1",
                    "taskVer": 0,
                    "pjId": "",
                    "dtime": "2020-11-20 06:00:00",
                    "clusterId": 105,
                    "batchId": 1605823200002,
                    "duration": 9,
                    "clusterName": "ETL节点1集群",
                    "taskName": "test",
                    "beginTime": "2020-11-20 06:00:00",
                    "endTime": "2020-11-20 06:00:00",
                    "pjName": "",
                    "nodeId": 1,
                    "taskId": 129
                },
                {
                    "nodeName": "node1",
                    "taskVer": 0,
                    "pjId": "",
                    "dtime": "2020-11-20 05:00:00",
                    "clusterId": 105,
                    "batchId": 1605819600003,
                    "duration": 9,
                    "clusterName": "ETL节点1集群",
                    "taskName": "test",
                    "beginTime": "2020-11-20 05:00:00",
                    "endTime": "2020-11-20 05:00:00",
                    "pjName": "",
                    "nodeId": 1,
                    "taskId": 129
                },
                {
                    "nodeName": "node1",
                    "taskVer": 0,
                    "pjId": "",
                    "dtime": "2020-11-20 04:00:00",
                    "clusterId": 105,
                    "batchId": 1605816000003,
                    "duration": 7,
                    "clusterName": "ETL节点1集群",
                    "taskName": "test",
                    "beginTime": "2020-11-20 04:00:00",
                    "endTime": "2020-11-20 04:00:00",
                    "pjName": "",
                    "nodeId": 1,
                    "taskId": 129
                },
                {
                    "nodeName": "node1",
                    "taskVer": 0,
                    "pjId": "",
                    "dtime": "2020-11-20 03:00:00",
                    "clusterId": 105,
                    "batchId": 1605812400002,
                    "duration": 6,
                    "clusterName": "ETL节点1集群",
                    "taskName": "test",
                    "beginTime": "2020-11-20 03:00:00",
                    "endTime": "2020-11-20 03:00:00",
                    "pjName": "",
                    "nodeId": 1,
                    "taskId": 129
                },
                {
                    "nodeName": "node1",
                    "taskVer": 0,
                    "pjId": "",
                    "dtime": "2020-11-20 02:00:00",
                    "clusterId": 105,
                    "batchId": 1605808800016,
                    "duration": 10,
                    "clusterName": "ETL节点1集群",
                    "taskName": "test",
                    "beginTime": "2020-11-20 02:00:00",
                    "endTime": "2020-11-20 02:00:00",
                    "pjName": "",
                    "nodeId": 1,
                    "taskId": 129
                },
                {
                    "nodeName": "node1",
                    "taskVer": 0,
                    "pjId": "",
                    "dtime": "2020-11-20 01:00:00",
                    "clusterId": 105,
                    "batchId": 1605805200002,
                    "duration": 4,
                    "clusterName": "ETL节点1集群",
                    "taskName": "test",
                    "beginTime": "2020-11-20 01:00:00",
                    "endTime": "2020-11-20 01:00:00",
                    "pjName": "",
                    "nodeId": 1,
                    "taskId": 129
                },
                {
                    "nodeName": "node1",
                    "taskVer": 0,
                    "pjId": "",
                    "dtime": "2020-11-20 00:00:00",
                    "clusterId": 105,
                    "batchId": 1605801600002,
                    "duration": 13,
                    "clusterName": "ETL节点1集群",
                    "taskName": "test",
                    "beginTime": "2020-11-20 00:00:00",
                    "endTime": "2020-11-20 00:00:00",
                    "pjName": "",
                    "nodeId": 1,
                    "taskId": 129
                },
                {
                    "nodeName": "node2",
                    "taskVer": 0,
                    "pjId": "",
                    "dtime": "2020-11-20 20:00:00",
                    "clusterId": 105,
                    "batchId": 1605873600002,
                    "duration": 15,
                    "clusterName": "ETL节点1集群",
                    "taskName": "test2",
                    "beginTime": "2020-11-20 20:00:00",
                    "endTime": "2020-11-20 20:00:00",
                    "pjName": "",
                    "nodeId": 1,
                    "taskId": 129
                },
                {
                    "nodeName": "node2",
                    "taskVer": 0,
                    "pjId": "",
                    "dtime": "2020-11-20 19:00:00",
                    "clusterId": 105,
                    "batchId": 1605870000002,
                    "duration": 24,
                    "clusterName": "ETL节点1集群",
                    "taskName": "test2",
                    "beginTime": "2020-11-20 19:00:00",
                    "endTime": "2020-11-20 19:00:00",
                    "pjName": "",
                    "nodeId": 1,
                    "taskId": 129
                },
                {
                    "nodeName": "node2",
                    "taskVer": 0,
                    "pjId": "",
                    "dtime": "2020-11-20 18:00:00",
                    "clusterId": 105,
                    "batchId": 1605866400003,
                    "duration": 20,
                    "clusterName": "ETL节点1集群",
                    "taskName": "test2",
                    "beginTime": "2020-11-20 18:00:00",
                    "endTime": "2020-11-20 18:00:00",
                    "pjName": "",
                    "nodeId": 1,
                    "taskId": 129
                },
                {
                    "nodeName": "node2",
                    "taskVer": 0,
                    "pjId": "",
                    "dtime": "2020-11-20 17:00:00",
                    "clusterId": 105,
                    "batchId": 1605862800002,
                    "duration": 6,
                    "clusterName": "ETL节点1集群",
                    "taskName": "test2",
                    "beginTime": "2020-11-20 17:00:00",
                    "endTime": "2020-11-20 17:00:00",
                    "pjName": "",
                    "nodeId": 1,
                    "taskId": 129
                },
                {
                    "nodeName": "node2",
                    "taskVer": 0,
                    "pjId": "",
                    "dtime": "2020-11-20 16:00:00",
                    "clusterId": 105,
                    "batchId": 1605859200002,
                    "duration": 24,
                    "clusterName": "ETL节点1集群",
                    "taskName": "test2",
                    "beginTime": "2020-11-20 16:00:00",
                    "endTime": "2020-11-20 16:00:00",
                    "pjName": "",
                    "nodeId": 1,
                    "taskId": 129
                },
                {
                    "nodeName": "node2",
                    "taskVer": 0,
                    "pjId": "",
                    "dtime": "2020-11-20 15:00:00",
                    "clusterId": 105,
                    "batchId": 1605855600002,
                    "duration": 11,
                    "clusterName": "ETL节点1集群",
                    "taskName": "test2",
                    "beginTime": "2020-11-20 15:00:00",
                    "endTime": "2020-11-20 15:00:00",
                    "pjName": "",
                    "nodeId": 1,
                    "taskId": 129
                },
                {
                    "nodeName": "node2",
                    "taskVer": 0,
                    "pjId": "",
                    "dtime": "2020-11-20 14:00:00",
                    "clusterId": 105,
                    "batchId": 1605852000002,
                    "duration": 14,
                    "clusterName": "ETL节点1集群",
                    "taskName": "test2",
                    "beginTime": "2020-11-20 14:00:00",
                    "endTime": "2020-11-20 14:00:00",
                    "pjName": "",
                    "nodeId": 1,
                    "taskId": 129
                },
                {
                    "nodeName": "node2",
                    "taskVer": 0,
                    "pjId": "",
                    "dtime": "2020-11-20 13:00:00",
                    "clusterId": 105,
                    "batchId": 1605848400001,
                    "duration": 18,
                    "clusterName": "ETL节点1集群",
                    "taskName": "test2",
                    "beginTime": "2020-11-20 13:00:00",
                    "endTime": "2020-11-20 13:00:00",
                    "pjName": "",
                    "nodeId": 1,
                    "taskId": 129
                },
                {
                    "nodeName": "node2",
                    "taskVer": 0,
                    "pjId": "",
                    "dtime": "2020-11-20 12:00:00",
                    "clusterId": 105,
                    "batchId": 1605844800002,
                    "duration": 4,
                    "clusterName": "ETL节点1集群",
                    "taskName": "test2",
                    "beginTime": "2020-11-20 12:00:00",
                    "endTime": "2020-11-20 12:00:00",
                    "pjName": "",
                    "nodeId": 1,
                    "taskId": 129
                },
                {
                    "nodeName": "node2",
                    "taskVer": 0,
                    "pjId": "",
                    "dtime": "2020-11-20 11:00:00",
                    "clusterId": 105,
                    "batchId": 1605841200001,
                    "duration": 14,
                    "clusterName": "ETL节点1集群",
                    "taskName": "test2",
                    "beginTime": "2020-11-20 11:00:00",
                    "endTime": "2020-11-20 11:00:00",
                    "pjName": "",
                    "nodeId": 1,
                    "taskId": 129
                },
                {
                    "nodeName": "node2",
                    "taskVer": 0,
                    "pjId": "",
                    "dtime": "2020-11-20 10:00:00",
                    "clusterId": 105,
                    "batchId": 1605837600003,
                    "duration": 7,
                    "clusterName": "ETL节点1集群",
                    "taskName": "test2",
                    "beginTime": "2020-11-20 10:00:00",
                    "endTime": "2020-11-20 10:00:00",
                    "pjName": "",
                    "nodeId": 1,
                    "taskId": 129
                },
                {
                    "nodeName": "node2",
                    "taskVer": 0,
                    "pjId": "",
                    "dtime": "2020-11-20 09:00:00",
                    "clusterId": 105,
                    "batchId": 1605834000002,
                    "duration": 16,
                    "clusterName": "ETL节点1集群",
                    "taskName": "test2",
                    "beginTime": "2020-11-20 09:00:00",
                    "endTime": "2020-11-20 09:00:00",
                    "pjName": "",
                    "nodeId": 1,
                    "taskId": 129
                },
                {
                    "nodeName": "node2",
                    "taskVer": 0,
                    "pjId": "",
                    "dtime": "2020-11-20 08:00:00",
                    "clusterId": 105,
                    "batchId": 1605830400003,
                    "duration": 9,
                    "clusterName": "ETL节点1集群",
                    "taskName": "test2",
                    "beginTime": "2020-11-20 08:00:00",
                    "endTime": "2020-11-20 08:00:00",
                    "pjName": "",
                    "nodeId": 1,
                    "taskId": 129
                },
                {
                    "nodeName": "node2",
                    "taskVer": 0,
                    "pjId": "",
                    "dtime": "2020-11-20 07:00:00",
                    "clusterId": 105,
                    "batchId": 1605826800005,
                    "duration": 10,
                    "clusterName": "ETL节点1集群",
                    "taskName": "test2",
                    "beginTime": "2020-11-20 07:00:00",
                    "endTime": "2020-11-20 07:00:00",
                    "pjName": "",
                    "nodeId": 1,
                    "taskId": 129
                },
                {
                    "nodeName": "node2",
                    "taskVer": 0,
                    "pjId": "",
                    "dtime": "2020-11-20 06:00:00",
                    "clusterId": 105,
                    "batchId": 1605823200002,
                    "duration": 9,
                    "clusterName": "ETL节点1集群",
                    "taskName": "test2",
                    "beginTime": "2020-11-20 06:00:00",
                    "endTime": "2020-11-20 06:00:00",
                    "pjName": "",
                    "nodeId": 1,
                    "taskId": 129
                },
                {
                    "nodeName": "node2",
                    "taskVer": 0,
                    "pjId": "",
                    "dtime": "2020-11-20 05:00:00",
                    "clusterId": 105,
                    "batchId": 1605819600003,
                    "duration": 9,
                    "clusterName": "ETL节点1集群",
                    "taskName": "test2",
                    "beginTime": "2020-11-20 05:00:00",
                    "endTime": "2020-11-20 05:00:00",
                    "pjName": "",
                    "nodeId": 1,
                    "taskId": 129
                },
                {
                    "nodeName": "node2",
                    "taskVer": 0,
                    "pjId": "",
                    "dtime": "2020-11-20 04:00:00",
                    "clusterId": 105,
                    "batchId": 1605816000003,
                    "duration": 7,
                    "clusterName": "ETL节点1集群",
                    "taskName": "test2",
                    "beginTime": "2020-11-20 04:00:00",
                    "endTime": "2020-11-20 04:00:00",
                    "pjName": "",
                    "nodeId": 1,
                    "taskId": 129
                },
                {
                    "nodeName": "node2",
                    "taskVer": 0,
                    "pjId": "",
                    "dtime": "2020-11-20 03:00:00",
                    "clusterId": 105,
                    "batchId": 1605812400002,
                    "duration": 6,
                    "clusterName": "ETL节点1集群",
                    "taskName": "test2",
                    "beginTime": "2020-11-20 03:00:00",
                    "endTime": "2020-11-20 03:00:00",
                    "pjName": "",
                    "nodeId": 1,
                    "taskId": 129
                },
                {
                    "nodeName": "node2",
                    "taskVer": 0,
                    "pjId": "",
                    "dtime": "2020-11-20 02:00:00",
                    "clusterId": 105,
                    "batchId": 1605808800016,
                    "duration": 10,
                    "clusterName": "ETL节点1集群",
                    "taskName": "test2",
                    "beginTime": "2020-11-20 02:00:00",
                    "endTime": "2020-11-20 02:00:00",
                    "pjName": "",
                    "nodeId": 1,
                    "taskId": 129
                },
                {
                    "nodeName": "node2",
                    "taskVer": 0,
                    "pjId": "",
                    "dtime": "2020-11-20 01:00:00",
                    "clusterId": 105,
                    "batchId": 1605805200002,
                    "duration": 4,
                    "clusterName": "ETL节点1集群",
                    "taskName": "test2",
                    "beginTime": "2020-11-20 01:00:00",
                    "endTime": "2020-11-20 01:00:00",
                    "pjName": "",
                    "nodeId": 1,
                    "taskId": 129
                },
                {
                    "nodeName": "node2",
                    "taskVer": 0,
                    "pjId": "",
                    "dtime": "2020-11-20 00:00:00",
                    "clusterId": 105,
                    "batchId": 1605801600002,
                    "duration": 13,
                    "clusterName": "ETL节点1集群",
                    "taskName": "test2",
                    "beginTime": "2020-11-20 00:00:00",
                    "endTime": "2020-11-20 00:00:00",
                    "pjName": "",
                    "nodeId": 1,
                    "taskId": 129
                }
            ]
        },
        "message": "OK"
    }
    let dataList = {};
    forMatDate(list.data.datasList, dataList);
    console.log(dataList);
    function forMatDate(list, dataList) {
        for (let index = 0; index < list.length; index++) {
            const element = list[index];
            
            if (dataList.hasOwnProperty(element.taskName)) {
                let endTime = new Date(new Date(element.endTime).getTime() + (element.duration * 1000 * 60));
                dataList[element.taskName].beginTime.push(new Date(element.beginTime))
                dataList[element.taskName].endTime.push(new Date(endTime))
            } else {
                let endTime = new Date(new Date(element.endTime).getTime() + (element.duration * 1000 * 60));
                dataList[element.taskName] = {
                    beginTime: [new Date(element.beginTime)],
                    endTime: [new Date(endTime)],
                    nodeName : element.nodeName 
                };
            };
        };

    }
    var option = {
        backgroundColor: "#fff",
        title: {
            text: "临夏自治州2015年度治理工程项目工期",
            padding: 20,
            textStyle: {
                fontSize: 17,
                fontWeight: "bolder",
                color: "#333"
            },
            subtextStyle: {
                fontSize: 13,
                fontWeight: "bolder"
            }
        },
        legend: {
            data: Object.keys(dataList),
            align: "right",
            right: 80,
            top: 50
        },
        grid: {
            containLabel: true,
            show: false,
            right: 130,
            left: 40,
            bottom: 40,
            top: 90
        },
        xAxis: {
            type: "time",
            axisLabel: {
                "show": true,
                "interval": 0
            }
        },
        yAxis: {
            axisLabel: {
                show: true,
                interval: 0,
                formatter: function (value, index) {
                    var last = ""
                    var max = 5;
                    var len = value.length;
                    var hang = Math.ceil(len / max);
                    if (hang > 1) {
                        for (var i = 0; i < hang; i++) {
                            var start = i * max;
                            var end = start + max;
                            var temp = value.substring(start, end) + "\n";
                            last += temp; //凭借最终的字符串
                        }
                        return last;
                    } else {
                        return value;
                    }
                }
            },
            data: ["任务一", "任务二", "任务三"]
        },
        tooltip: {
            trigger: "axis",
            formatter: function (params) {
                var res = "";
                var name = "";
                var start0 = "";
                var start = "";
                var end0 = "";
                var end = "";
                for (var i in params) {
                    var k = i % 2;
                    if (!k) { //偶数
                        start0 = params[i].data;
                        console.log(start0)
                        start = start0.getFullYear() + "-" + (start0.getMonth() + 1) + "-" + start0.getDate();
                    }
                    if (k) { //奇数
                        name = params[i].seriesName;
                        end0 = params[i].data;
                        end = end0.getFullYear() + "-" + (end0.getMonth() + 1) + "-" + end0.getDate();
                        res += name + " : " + start + "~" + end + "</br>";

                    }
                }
                return res;
            }
        },
        series: []
    };

    var optObj = {
        name: "计划工期",
        type: "bar",
        stack: "总量0",
        itemStyle: {
            normal: {
                color: "red",
            }
        },
        zlevel: -1,
        z: 5,
        data: [new Date("2018-01-08")]
    };
    let opt = forMatOption();
    console.log(opt);
    function forMatOption() {
        let optArr = [];
        Object.keys(dataList).forEach((item, index) => {
            const element = dataList[item];
            if(optArr && optArr.length > 0 ){
                let i = 0;
                for (let index = 0; index < element.beginTime.length; index++) {
                    optArr[i].data.push(element.endTime[index]);
                    optArr[i+1].data.push(element.beginTime[index]);
                    i +=2;
                };    
            }else{
                for (let index = 0; index < element.beginTime.length; index++) {
                let beginTimeOpt = {
                    name: element.beginTime[index].toLocaleString().split(" ")[1],
                    type: "bar",
                    stack: index,
                    itemStyle: { normal: { color: "white" } },
                    zlevel: -1,
                    z: 5,
                    data: [element.beginTime[index]]
                };
                let endTimeOpt = {
                    name: element.endTime[index].toLocaleString().split(" ")[1],
                    type: "bar",
                    stack: index,
                    itemStyle: { normal: { color: "skyblue" } },
                    zlevel: -1,
                    z: 5,
                    data: [ element.endTime[index]]
                };
                optArr.push(endTimeOpt);
                optArr.push(beginTimeOpt);
                };
            }
        })
        return optArr
    }


    function forMatDate1() {
        for (let key in dataList) {
            dataList[key].forEach((item, index) => {
                if (index == 0) {
                    let yearDate = item.dtime.split(" ")[0];
                    let endTime = new Date(new Date(item.endTime).getTime() - (item.duration * 1000 * 60));
                    dataList[key + "beforList"] = [new Date(item.beginTime)];
                    // dataList.afterList = [ new Date(endTime).format("yyyy-MM-dd hh:mm:ss")];
                    dataList[key + "afterList"] = [new Date(endTime)];
                } else {
                    let endTime = new Date(new Date(item.endTime).getTime() - (item.duration * 1000 * 60));
                    dataList[key + "beforList"].push(new Date(item.beginTime));
                    // dataList.afterList.push(new Date(endTime).format("yyyy-MM-dd hh:mm:ss") );
                    dataList[key + "afterList"].push(endTime);

                }
            })
        }
    }

</script>

var option = {
    backgroundColor: "#fff",
    title: {
        text: "临夏自治州2015年度治理工程项目工期",
        padding: 10,
        textStyle: {
            fontSize: 12,
            fontWeight: "bolder",
            color: "#333"
        },
        subtextStyle: {
            fontSize: 12,
            fontWeight: "bolder"
        }
    },
    legend: {
        data: ["计划工期", "可行性研究阶段", "初步设计阶段", "施工图设计阶段", "项目实施阶段", "项目验收阶段"],
        align: "right",
        right: 80,
        top: 50
    },
    grid: {
        containLabel: true,
        show: false,
        right: 130,
        left: 40,
        bottom: 40,
        top: 90
    },
    
    xAxis: {
       type: "time",
        splitNumber: 24,
        axisLabel: {
            "show": true,
            "interval": 0,
            formatter: function (value) {
                return new Date(value).getHours();
            }
        },
    },
    yAxis: {
        axisLabel: {
            show: true,
            interval: 0,
            formatter: function(value, index) {
                var last = ""
                var max = 10;
                var len = value.length;
                var hang = Math.ceil(len / max);
                 
                    return last;
                
            }
        },
        data: ["标段一", "标段二"]
    },
    tooltip: {
        trigger: "axis",
        formatter: function(params) {
            var res = "";
            var name = "";
            var start0 = "";
            var start = "";
            var end0 = "";
            var end = "";
            for (var i in params) {
                var k = i % 2;
                if (!k) { //偶数
                    start0 = params[i].data;
                    console.log(start0)
                    start = start0.getFullYear() + "-" + (start0.getMonth() + 1) + "-" + start0.getDate();
                }
                if (k) { //奇数
                    name = params[i].seriesName;
                    end0 = params[i].data;
                    end = end0.getFullYear() + "-" + (end0.getMonth() + 1) + "-" + end0.getDate();
                    res += name + " : " + start + "~" + end + "</br>";

                }
            }
            return res;
        }
    },
    series: [
        {
    "name": "上午12:13:00",
    "type": "bar",
    "stack": "-1",
    "itemStyle": {
      "normal": {
        "color": "skyblue"
      }
    },
    "zlevel": -1,
    "z": 12,
    "data": [
      new Date("2020-11-20T16:15:00.000Z"),
      new Date("2020-11-20T16:15:00.000Z"),
    ]
  },
  {
    "name": "上午12:00:00",
    "type": "bar",
    "stack": "-1",
    "itemStyle": {
      "normal": {
        "color": "white"
      }
    },
    "zlevel": -1,
    "z": 12,
    "data": [
      new Date("2020-11-20T16:15:00.000Z"),
      new Date("2020-11-20T16:15:00.000Z"),
    ]
  },
  {
    "name": "下午8:15:00",
    "type": "bar",
    "stack": 22,
    "itemStyle": {
      "normal": {
        "color": "skyblue"
      }
    },
    "zlevel": -1,
    "z": 12,
    "data": [
      new Date("2020-11-20T12:15:00.000Z"),
      new Date("2020-11-20T12:15:00.000Z"),
    ]
  },
  {
    "name": "下午8:00:00",
    "type": "bar",
    "stack": 22,
    "itemStyle": {
      "normal": {
        "color": "white"
      }
    },
    "zlevel": -1,
    "z": 12,
    "data": [
      new Date("2020-11-20T12:00:00.000Z"),
      new Date("2020-11-20T12:00:00.000Z"),
    ]
  },
  {
    "name": "下午7:24:00",
    "type": "bar",
    "stack": 1,
    "itemStyle": {
      "normal": {
        "color": "skyblue"
      }
    },
    "zlevel": -1,
    "z": 12,
    "data": [
      new Date("2020-11-20T11:24:00.000Z"),
      new Date("2020-11-20T11:24:00.000Z")
    ]
  },
  {
    "name": "下午7:00:00",
    "type": "bar",
    "stack": 1,
    "itemStyle": {
      "normal": {
        "color": "white"
      }
    },
    "zlevel": -1,
    "z": 12,
    "data": [
      new Date("2020-11-20T11:00:00.000Z"),
      new Date("2020-11-20T11:00:00.000Z")
    ]
  },
  {
    "name": "下午6:20:00",
    "type": "bar",
    "stack": 2,
    "itemStyle": {
      "normal": {
        "color": "skyblue"
      }
    },
    "zlevel": -1,
    "z": 12,
    "data": [
      new Date("2020-11-20T10:20:00.000Z"),
      new Date("2020-11-20T10:20:00.000Z")
    ]
  },
  {
    "name": "下午6:00:00",
    "type": "bar",
    "stack": 2,
    "itemStyle": {
      "normal": {
        "color": "white"
      }
    },
    "zlevel": -1,
    "z": 12,
    "data": [
      new Date("2020-11-20T10:00:00.000Z"),
      new Date("2020-11-20T10:00:00.000Z")
    ]
  },
  {
    "name": "下午5:06:00",
    "type": "bar",
    "stack": 3,
    "itemStyle": {
      "normal": {
        "color": "skyblue"
      }
    },
    "zlevel": -1,
    "z": 12,
    "data": [
      new Date("2020-11-20T09:06:00.000Z"),
      new Date("2020-11-20T09:06:00.000Z")
    ]
  },
  {
    "name": "下午5:00:00",
    "type": "bar",
    "stack": 3,
    "itemStyle": {
      "normal": {
        "color": "white"
      }
    },
    "zlevel": -1,
    "z": 12,
    "data": [
      new Date("2020-11-20T09:00:00.000Z"),
      new Date("2020-11-20T09:00:00.000Z")
    ]
  },
  {
    "name": "下午4:24:00",
    "type": "bar",
    "stack": 4,
    "itemStyle": {
      "normal": {
        "color": "skyblue"
      }
    },
    "zlevel": -1,
    "z": 12,
    "data": [
      new Date("2020-11-20T08:24:00.000Z"),
      new Date("2020-11-20T08:24:00.000Z")
    ]
  },
  {
    "name": "下午4:00:00",
    "type": "bar",
    "stack": 4,
    "itemStyle": {
      "normal": {
        "color": "white"
      }
    },
    "zlevel": -1,
    "z": 12,
    "data": [
      new Date("2020-11-20T08:00:00.000Z"),
      new Date("2020-11-20T08:00:00.000Z")
    ]
  },
  {
    "name": "下午3:11:00",
    "type": "bar",
    "stack": 5,
    "itemStyle": {
      "normal": {
        "color": "skyblue"
      }
    },
    "zlevel": -1,
    "z": 12,
    "data": [
      new Date("2020-11-20T07:11:00.000Z"),
      new Date("2020-11-20T07:11:00.000Z")
    ]
  },
  {
    "name": "下午3:00:00",
    "type": "bar",
    "stack": 5,
    "itemStyle": {
      "normal": {
        "color": "white"
      }
    },
    "zlevel": -1,
    "z": 12,
    "data": [
      new Date("2020-11-20T07:00:00.000Z"),
      new Date("2020-11-20T07:00:00.000Z")
    ]
  },
  {
    "name": "下午2:14:00",
    "type": "bar",
    "stack": 6,
    "itemStyle": {
      "normal": {
        "color": "skyblue"
      }
    },
    "zlevel": -1,
    "z": 12,
    "data": [
      new Date("2020-11-20T06:14:00.000Z"),
      new Date("2020-11-20T06:14:00.000Z")
    ]
  },
  {
    "name": "下午2:00:00",
    "type": "bar",
    "stack": 6,
    "itemStyle": {
      "normal": {
        "color": "white"
      }
    },
    "zlevel": -1,
    "z": 12,
    "data": [
      new Date("2020-11-20T06:00:00.000Z"),
      new Date("2020-11-20T06:00:00.000Z")
    ]
  },
  {
    "name": "下午1:18:00",
    "type": "bar",
    "stack": 7,
    "itemStyle": {
      "normal": {
        "color": "skyblue"
      }
    },
    "zlevel": -1,
    "z": 12,
    "data": [
      new Date("2020-11-20T05:18:00.000Z"),
      new Date("2020-11-20T05:18:00.000Z")
    ]
  },
  {
    "name": "下午1:00:00",
    "type": "bar",
    "stack": 7,
    "itemStyle": {
      "normal": {
        "color": "white"
      }
    },
    "zlevel": -1,
    "z": 12,
    "data": [
      new Date("2020-11-20T05:00:00.000Z"),
      new Date("2020-11-20T05:00:00.000Z")
    ]
  },
  {
    "name": "下午12:04:00",
    "type": "bar",
    "stack": 8,
    "itemStyle": {
      "normal": {
        "color": "skyblue"
      }
    },
    "zlevel": -1,
    "z": 12,
    "data": [
      new Date("2020-11-20T04:04:00.000Z"),
      new Date("2020-11-20T04:04:00.000Z")
    ]
  },
  {
    "name": "下午12:00:00",
    "type": "bar",
    "stack": 8,
    "itemStyle": {
      "normal": {
        "color": "white"
      }
    },
    "zlevel": -1,
    "z": 12,
    "data": [
      new Date("2020-11-20T04:00:00.000Z"),
      new Date("2020-11-20T04:00:00.000Z")
    ]
  },
  {
    "name": "上午11:14:00",
    "type": "bar",
    "stack": 9,
    "itemStyle": {
      "normal": {
        "color": "skyblue"
      }
    },
    "zlevel": -1,
    "z": 12,
    "data": [
      new Date("2020-11-20T03:14:00.000Z"),
      new Date("2020-11-20T03:14:00.000Z")
    ]
  },
  {
    "name": "上午11:00:00",
    "type": "bar",
    "stack": 9,
    "itemStyle": {
      "normal": {
        "color": "white"
      }
    },
    "zlevel": -1,
    "z": 12,
    "data": [
      new Date("2020-11-20T03:00:00.000Z"),
      new Date("2020-11-20T03:00:00.000Z")
    ]
  },
  {
    "name": "上午10:07:00",
    "type": "bar",
    "stack": 10,
    "itemStyle": {
      "normal": {
        "color": "skyblue"
      }
    },
    "zlevel": -1,
    "z": 12,
    "data": [
      new Date("2020-11-20T02:07:00.000Z"),
      new Date("2020-11-20T02:07:00.000Z")
    ]
  },
  {
    "name": "上午10:00:00",
    "type": "bar",
    "stack": 10,
    "itemStyle": {
      "normal": {
        "color": "white"
      }
    },
    "zlevel": -1,
    "z": 12,
    "data": [
      new Date("2020-11-20T02:00:00.000Z"),
      new Date("2020-11-20T02:00:00.000Z")
    ]
  },
  {
    "name": "上午9:16:00",
    "type": "bar",
    "stack": 11,
    "itemStyle": {
      "normal": {
        "color": "skyblue"
      }
    },
    "zlevel": -1,
    "z": 12,
    "data": [
      new Date("2020-11-20T01:16:00.000Z"),
      new Date("2020-11-20T01:16:00.000Z")
    ]
  },
  {
    "name": "上午9:00:00",
    "type": "bar",
    "stack": 11,
    "itemStyle": {
      "normal": {
        "color": "white"
      }
    },
    "zlevel": -1,
    "z": 12,
    "data": [
      new Date("2020-11-20T01:00:00.000Z"),
      new Date("2020-11-20T01:00:00.000Z")
    ]
  },
  {
    "name": "上午8:09:00",
    "type": "bar",
    "stack": 12,
    "itemStyle": {
      "normal": {
        "color": "skyblue"
      }
    },
    "zlevel": -1,
    "z": 12,
    "data": [
      new Date("2020-11-20T00:09:00.000Z"),
      new Date("2020-11-20T00:09:00.000Z")
    ]
  },
  {
    "name": "上午8:00:00",
    "type": "bar",
    "stack": 12,
    "itemStyle": {
      "normal": {
        "color": "white"
      }
    },
    "zlevel": -1,
    "z": 12,
    "data": [
      new Date("2020-11-20T00:00:00.000Z"),
      new Date("2020-11-20T00:00:00.000Z")
    ]
  },
  {
    "name": "上午7:10:00",
    "type": "bar",
    "stack": 13,
    "itemStyle": {
      "normal": {
        "color": "skyblue"
      }
    },
    "zlevel": -1,
    "z": 12,
    "data": [
      new Date("2020-11-19T23:10:00.000Z"),
      new Date("2020-11-19T23:10:00.000Z")
    ]
  },
  {
    "name": "上午7:00:00",
    "type": "bar",
    "stack": 13,
    "itemStyle": {
      "normal": {
        "color": "white"
      }
    },
    "zlevel": -1,
    "z": 12,
    "data": [
      new Date("2020-11-19T23:00:00.000Z"),
      new Date("2020-11-19T23:00:00.000Z")
    ]
  },
  {
    "name": "上午6:09:00",
    "type": "bar",
    "stack": 14,
    "itemStyle": {
      "normal": {
        "color": "skyblue"
      }
    },
    "zlevel": -1,
    "z": 12,
    "data": [
      new Date("2020-11-19T22:09:00.000Z"),
      new Date("2020-11-19T22:09:00.000Z")
    ]
  },
  {
    "name": "上午6:00:00",
    "type": "bar",
    "stack": 14,
    "itemStyle": {
      "normal": {
        "color": "white"
      }
    },
    "zlevel": -1,
    "z": 12,
    "data": [
      new Date("2020-11-19T22:00:00.000Z"),
      new Date("2020-11-19T22:00:00.000Z")
    ]
  },
  {
    "name": "上午5:09:00",
    "type": "bar",
    "stack": 15,
    "itemStyle": {
      "normal": {
        "color": "skyblue"
      }
    },
    "zlevel": -1,
    "z": 12,
    "data": [
      new Date("2020-11-19T21:09:00.000Z"),
      new Date("2020-11-19T21:09:00.000Z")
    ]
  },
  {
    "name": "上午5:00:00",
    "type": "bar",
    "stack": 15,
    "itemStyle": {
      "normal": {
        "color": "white"
      }
    },
    "zlevel": -1,
    "z": 12,
    "data": [
      new Date("2020-11-19T21:00:00.000Z"),
      new Date("2020-11-19T21:00:00.000Z")
    ]
  },
  {
    "name": "上午4:07:00",
    "type": "bar",
    "stack": 16,
    "itemStyle": {
      "normal": {
        "color": "skyblue"
      }
    },
    "zlevel": -1,
    "z": 12,
    "data": [
      new Date("2020-11-19T20:07:00.000Z"),
      new Date("2020-11-19T20:07:00.000Z")
    ]
  },
  {
    "name": "上午4:00:00",
    "type": "bar",
    "stack": 16,
    "itemStyle": {
      "normal": {
        "color": "white"
      }
    },
    "zlevel": -1,
    "z": 12,
    "data": [
      new Date("2020-11-19T20:00:00.000Z"),
      new Date("2020-11-19T20:00:00.000Z")
    ]
  },
  {
    "name": "上午3:06:00",
    "type": "bar",
    "stack": 17,
    "itemStyle": {
      "normal": {
        "color": "skyblue"
      }
    },
    "zlevel": -1,
    "z": 12,
    "data": [
      new Date("2020-11-19T19:06:00.000Z"),
      new Date("2020-11-19T19:06:00.000Z")
    ]
  },
  {
    "name": "上午3:00:00",
    "type": "bar",
    "stack": 17,
    "itemStyle": {
      "normal": {
        "color": "white"
      }
    },
    "zlevel": -1,
    "z": 12,
    "data": [
      new Date("2020-11-19T19:00:00.000Z"),
      new Date("2020-11-19T19:00:00.000Z")
    ]
  },
  {
    "name": "上午2:10:00",
    "type": "bar",
    "stack": 18,
    "itemStyle": {
      "normal": {
        "color": "skyblue"
      }
    },
    "zlevel": -1,
    "z": 12,
    "data": [
      new Date("2020-11-19T18:10:00.000Z"),
      new Date("2020-11-19T18:10:00.000Z")
    ]
  },
  {
    "name": "上午2:00:00",
    "type": "bar",
    "stack": 18,
    "itemStyle": {
      "normal": {
        "color": "white"
      }
    },
    "zlevel": -1,
    "z": 12,
    "data": [
      new Date("2020-11-19T18:00:00.000Z"),
      new Date("2020-11-19T18:00:00.000Z")
    ]
  },
  {
    "name": "上午1:04:00",
    "type": "bar",
    "stack": 19,
    "itemStyle": {
      "normal": {
        "color": "skyblue"
      }
    },
    "zlevel": -1,
    "z": 12,
    "data": [
      new Date("2020-11-19T17:34:00.000Z"),
      new Date("2020-11-19T17:04:00.000Z")
    ]
  },
  {
    "name": "上午1:00:00",
    "type": "bar",
    "stack": 19,
    "itemStyle": {
      "normal": {
        "color": "white"
      }
    },
    "zlevel": -1,
    "z": 12,
    "data": [
      new Date("2020-11-19T17:00:00.000Z"),
      new Date("2020-11-19T17:00:00.000Z")
    ]
  },
  {
    "name": "上午12:13:00",
    "type": "bar",
    "stack": 20,
    "itemStyle": {
      "normal": {
        "color": "skyblue"
      }
    },
    "zlevel": -1,
    "z": 12,
    "data": [
      new Date("2020-11-19T19:10:00.000Z"),
      new Date("2020-11-19T16:13:00.000Z"),
    ]
  },
  {
    "name": "上午12:00:00",
    "type": "bar",
    "stack": 20,
    "itemStyle": {
      "normal": {
        "color": "white"
      }
    },
    "zlevel": -1,
    "z": 12,
    "data": [
      new Date("2020-11-19T16:00:00.000Z"),
      new Date("2020-11-19T16:00:00.000Z"),
    ]
  }
]
}