甘特图 - 河畔的风

甘特图
let data = [
            {
                "list": [
                    
                    {
                        "colorNum":0,
                        "endTime":"2018-08-04 08:00:00",
                        'type': 'new',
                        "item":"item1",
                        "quantity":1960,
                        "startTime":"2018-08-02 8:00:00",
                    },
                    {
                        "colorNum":1,
                        "endTime":"2018-08-04 12:00:00",
                        "item":"item2",
                        'type': 'new',
                        "quantity":492,
                        "startTime":"2018-08-04 08:00:00",
                    },
                    {
                        "colorNum":2,
                        "endTime":"2018-08-04 18:00:00",
                        "item":"item3",
                        'type': 'new',
                        "quantity":20837,
                        "startTime":"2018-08-04 12:00:00",
                    },
                    {
                        "colorNum":3,
                        "endTime":"2018-08-05 12:00:00",
                        "item":"item4",
                        'type': 'new',
                        "quantity":3620,
                        "startTime":"2018-08-04 18:00:00",
                    },
                    {
                        "colorNum":0,
                        "endTime":"2018-08-05 24:00:00",
                        "item":"item5",
                        'type': 'new',
                        "quantity":7200,
                        "startTime":"2018-08-05 12:00:00",
                    },
                    {
                        "colorNum":0,
                        "endTime":"2018-08-04 16:00:00",
                        'type': 'old',
                        "item":"item1",
                        "quantity":1960,
                        "startTime":"2018-08-02 02:00:00",
                    },
                    {
                        "colorNum":1,
                        "endTime":"2018-08-05 12:00:00",
                        "item":"item2",
                        'type': 'old',
                        "quantity":492,
                        "startTime":"2018-08-04 16:00:00",
                    },
                    {
                        "colorNum":2,
                        "endTime":"2018-08-06 18:00:00",
                        "item":"item3",
                        'type': 'old',
                        "quantity":20837,
                        "startTime":"2018-08-05 12:00:00",
                    },
                    {
                        "colorNum":3,
                        "endTime":"2018-08-07 12:00:00",
                        "item":"item4",
                        'type': 'old',
                        "quantity":3620,
                        "startTime":"2018-08-06 18:00:00",
                    },
                    {
                        "colorNum":0,
                        "endTime":"2018-08-09 24:00:00",
                        "item":"item5",
                        'type': 'old',
                        "quantity":7200,
                        "startTime":"2018-08-07 12:00:00",
                    },
                ],
                "plant": "工厂1"
            },
            // {
            //     "list": [
            //         {
            //             "startTime": "2018-08-03 12:00:00",
            //             "endTime": "2018-08-04 12:00:00",
            //             "quantity": 20,
            //             'colorNum':0,
            //             'item':'item1',
            //             'type': 'new',
            //         },
            //         {
            //             "startTime": "2018-08-03 12:00:00",
            //             "endTime": "2018-08-04 12:00:00",
            //             "quantity": 20,
            //             'colorNum':0,
            //             'item':'item1',
            //             'type': 'old',
            //         }
            //     ],
            //     "plant": "工厂2"
            // },
            {
                "list": [
                    {
                        "startTime": "2018-08-04 12:00:00",
                        "endTime": "2018-08-06 00:00:00",
                        "quantity": 30,
                        'colorNum':0,
                        'item':'item1',
                        'type': 'new',
                    },
                    {
                        "startTime": "2018-08-06 08:00:00",
                        "endTime": "2018-08-06 12:00:00",
                        "quantity": 20,
                        'colorNum':1,
                        'item':'item2',
                        'type': 'new',
                    },
                    {
                        "startTime": "2018-08-06 14:00:00",
                        "endTime": "2018-08-08 12:00:00",
                        "quantity": 10,
                        'colorNum':2,
                        'item':'item3',
                        'type': 'new',
                    },
                    {
                        "startTime": "2018-08-08 20:00:00",
                        "endTime": "2018-08-10 12:00:00",
                        "quantity": 10,
                        'colorNum':3,
                        'item':'item4',
                        'type': 'new',
                    },
                    {
                        "startTime": "2018-08-04 12:00:00",
                        "endTime": "2018-08-06 00:00:00",
                        "quantity": 30,
                        'colorNum':0,
                        'item':'item1',
                        'type': 'old',
                    },
                    {
                        "startTime": "2018-08-06 08:00:00",
                        "endTime": "2018-08-06 12:00:00",
                        "quantity": 20,
                        'colorNum':1,
                        'item':'item2',
                        'type': 'old',
                    },
                    {
                        "startTime": "2018-08-06 14:00:00",
                        "endTime": "2018-08-08 12:00:00",
                        "quantity": 10,
                        'colorNum':2,
                        'item':'item3',
                        'type': 'old',
                    },
                    {
                        "startTime": "2018-08-08 20:00:00",
                        "endTime": "2018-08-10 12:00:00",
                        "quantity": 10,
                        'colorNum':3,
                        'item':'item4',
                        'type': 'old',
                    }
                ],
                "plant": "工厂3"
            },
            // {
            //     "list": [
            //         {
            //             "startTime": "2018-08-02 20:00:00",
            //             "endTime": "2018-08-03 12:00:00",
            //             "quantity": 20,
            //             'colorNum':1,
            //             'item':'item1',
            //         },
            //         {
            //             "startTime": "2018-08-03 20:00:00",
            //             "endTime": "2018-08-04 12:00:00",
            //             "quantity": 15,
            //             'colorNum':2,
            //             'item':'item2',
            //         },
            //         {
            //             "startTime": "2018-08-04 20:00:00",
            //             "endTime": "2018-08-05 12:00:00",
            //             "quantity": 15,
            //             'colorNum':3,
            //             'item':'item3',
            //         },
            //     ],
            //     "plant": "工厂4"
            // },
        ]
let start_="2018-08-02 00:00:00", end_="2018-11-05 24:00:00"; //自定义时间
let seriesData = [];
let yAxisData_plant = []; //工厂名
let item1Data = [];
let item2Data = [];
let item3Data = [];
let item4Data = [];
let item5Data = [];

data.forEach((item, index) => {
    yAxisData_plant.push(item.plant);
    let bgColor;
    item.list.forEach((listItem, listIndex) => {
        switch (listItem.colorNum) {
            case 0:
                bgColor = 'rgba(0,187,255,1)';
                break;
            case 1:
                bgColor = 'rgba(80,227,194,1)';
                break;
            case 2:
                bgColor = 'rgba(255,115,115,1)';
                break;
            case 3:
                bgColor = 'rgba(255,207,107,1)';
                break;
            default:
                bgColor = 'rgba(0,187,255,1)'
        }
        let startTime = new Date(listItem.startTime).getTime();
        let endTime = new Date(listItem.endTime).getTime();
        switch (listItem.item) {
            case 'item1':
                item1Data.push({
                    name: listItem.item,
                    value: [
                        index,
                        startTime,
                        endTime,
                        listItem.quantity,
                        listItem.type
                    ],
                    itemStyle: {
                        normal: {
                            color: bgColor
                        }
                    }
                });
                 break;
            case 'item2':
                item2Data.push({
                    name: listItem.item,
                    value: [
                        index,
                        startTime,
                        endTime,
                        listItem.quantity,
                        listItem.type
                    ],
                    itemStyle: {
                        normal: {
                            color: bgColor
                        }
                    }
                });
                 break;
            case 'item3':
                item3Data.push({
                    name: listItem.item,
                    value: [
                        index,
                        startTime,
                        endTime,
                        listItem.quantity,
                        listItem.type
                    ],
                    itemStyle: {
                        normal: {
                            color: bgColor
                        }
                    }
                });
                 break;
            case 'item4':
                item4Data.push({
                    name: listItem.item,
                    value: [
                        index,
                        startTime,
                        endTime,
                        listItem.quantity,
                        listItem.type
                    ],
                    itemStyle: {
                        normal: {
                            color: bgColor
                        }
                    }
                });
                 break;
            case 'item5':
                item5Data.push({
                    name: listItem.item,
                    value: [
                        index,
                        startTime,
                        endTime,
                        listItem.quantity,
                        listItem.type
                    ],
                    itemStyle: {
                        normal: {
                            color: bgColor
                        }
                    }
                });
                break;
            
            default:
                // code
        }
        seriesData.push({
            name: listItem.item,
            value: [
                index,
                startTime,
                endTime,
                listItem.quantity,
                listItem.type
            ],
            itemStyle: {
                normal: {
                    color: bgColor
                }
            }
        });
    })

});


console.log(item1Data,item2Data,item3Data)


renderItem11 =  function (params, api) {
                var categoryIndex = api.value(0);
                
                var type = api.value(4); 
                console.log(type)
                var start = api.coord([api.value(1), categoryIndex]);
                var end = api.coord([api.value(2), categoryIndex]);
                var height = api.size([0, 1])[1] * 0.6;
                var rectShape = echarts.graphic.clipRectByRect({
                    x: start[0],
                    y: start[1] - 10,
                    width: end[0] - start[0],
                    height: 20
                }, {
                    x: params.coordSys.x,
                    y: params.coordSys.y,
                    width: params.coordSys.width,
                    height: params.coordSys.height
                });
                console.log(rectShape)

                // return rectShape && {
                //     type: 'rect',
                //     shape: rectShape,
                //     style: api.style()
                // };
                
                return  rectShape && {
                    type: 'group',
                    position :type === 'new' ? [0,-20] : [0 ,20],
                    children: [ {
                        id:'1',
                        type: 'rect',
                        shape: rectShape,
                        style: api.style()
                    }, 
                    {
                         id:'2',
                        type: 'circle',
                        shape: 
                        {cx: start[0] , cy: start[1], r: 9.5},
                        style: api.style()
                    },
                    {
                         id:'3',
                        type: 'circle',
                        shape: 
                        {cx: end[0] , cy: start[1], r: 9.5},
                        style: api.style()
                    }
                    ]
                };

            },

console.log(seriesData)
option = {
        backgroundColor: '#26263C',
        tooltip: {
            show :true,
            type:'shadow',
            trigger:'axis',
            axisPointer: {
              shadowStyle: {
                color: "red"
              }
            },
            formatter: function (params) {
                console.log(params)
                return params.marker + params.name + '55';
            }
        },
        grid: [{
            top: 80,
            left: 300,
            bottom: 50,
            right:150,
            height:300,
        },
        {
            top: 80,
            left: 200,
            width: 100,
            bottom: 70,
            height:300,  
        },
        {
            top: 80,
            left: 150,
            width: 5,
            bottom: 70,
            height: 300,  
        },
        {
            top: 80,
            right:50,
            width: 5,
            bottom: 70,
            height: 300,  
        }
        ],
        dataZoom: [{
            show: true,
            type: '',
            filterMode: 'none',
            realtime: false,
            height: 10,
            top: 470,
            startValue:new Date(start_).getTime(),
            endValue:new Date(start_).getTime() + 3600 * 24 * 1000 * 7,
            minValueSpan: 3600 * 24 * 1000 * 7,
            handleIcon: 'path://path://M100, 100m -75, 0a75,75 0 1,0 150,0a75,75 0 1,0 -150,0',
            handleSize: '120%',
            handleStyle: {
                color: "#fff",
                shadowColor: 'rgba(0, 0, 0, 0.5)',
                shadowBlur: 4
            },
            textStyle: {
                color: "transparent"
            },
            borderColor: 'transparent',
            backgroundColor: '#D7F4FF',
            dataBackground: {
                lineStyle: {
                    width: 0
                },
                areaStyle: {
                    color: 'transparent'
                }
            },
            fillerColor: '#00EBFF',
            labelFormatter: ''
        },
        // {
        //     type: "inside",
        //     show: true,
        //     zoomOnMouseWheel: false,
        //     moveOnMouseWheel: true,
        //     moveOnMouseMove: true,
        //     preventDefaultMouseMove: true
        // }
        ],
        xAxis: [{
            type: 'time',
            min: new Date(start_).getTime(),
            max: new Date(end_).getTime(),
              gridIndex: 0,
            scale: true,
            position: 'bottom',
            splitNumber: 7,
            axisLabel: {
                show: true,
                textStyle: {color: '#ffffff'},
                interval: 0,
                margin: 15,
                fontSize: 14,
                formatter:function (value, index) {
                    console.log(value,index,'llll')
                    var date = new Date(value);
                    var texts = [date.getFullYear(),(date.getMonth() + 1), date.getDate()].join('/');
                    return texts;
                }
            },
            axisLine: {show: false,},
            splitLine: {
                show: true,
                lineStyle: {color: 'rgba(233,233,233,0.1)'}
            },
            axisTick: {
                lineStyle: {
                    color: '#fff'
                }
            },
        },
        {
            type: 'value',
            position: 'bottom',
            gridIndex: 1,
            inverse:false,
            scale:false,
            axisLine: {
                show: false,
                onZero: true,
                color: '#ffffff'
            },
            offset: 0,
            splitNumber: 3,
            axisLabel: {
                show: false,
                textStyle: {color: '#ffffff'},
                interval: 0,
                margin: 15,
                fontSize: 14,
            },
            splitLine: {
                show: false,
                // lineStyle: {color: 'red'}
            },
             axisTick: {
              show: false
            }
        },
        {
            type: 'value',
            position: 'bottom',
            gridIndex: 2,
            inverse:false,
            scale:false,
            axisLine: {
                show: false,
                onZero: true,
                color: '#ffffff'
            },
            offset: 0,
            splitNumber: 3,
            axisLabel: {
                show: false,
                textStyle: {color: '#ffffff'},
                interval: 0,
                margin: 15,
                fontSize: 14,
            },
            splitLine: {
                show: false,
                // lineStyle: {color: 'red'}
            },
             axisTick: {
              show: false
            }
        },
        {
            type: 'value',
            position: 'bottom',
            gridIndex: 3,
            inverse:false,
            scale:false,
            axisLine: {
                show: false,
                onZero: true,
                color: '#ffffff'
            },
            offset: 0,
            splitNumber: 3,
            axisLabel: {
                show: false,
                textStyle: {color: '#ffffff'},
                interval: 0,
                margin: 15,
                fontSize: 14,
            },
            splitLine: {
                show: false,
                // lineStyle: {color: 'red'}
            },
             axisTick: {
              show: false
            }
        }
        ],
        yAxis: [{
            gridIndex: 0,
            axisLine: {
                onZero: true,
                show: true,
            },
            axisLabel: {
                show: false,
                textStyle: {color: '#ffffff'},
                fontSize: 14
            },
            splitLine: {
                show: true,
                lineStyle: {color: 'rgba(233,233,233,0.1)'}
            },
            // inverse: true,
            data: yAxisData_plant
        },
        {
            splitLine: {
                show: false,
                lineStyle: {color: 'red'}
            },
            // position: 'right',
            gridIndex: 1,
            axisLabel: {
                show: true,
                textStyle: {color: '#ffffff'},
                interval: 0,
                margin: 15,
                fontSize: 24,
                formatter: function (value) {
                    return '{value|new}\n{value|old}';
                },
                rich: {
                    value: {
                        lineHeight: 40,
                        align: 'center',
                        fontSize: 14,
                    },
                }
            },
            
            
            data: ['工厂1','工厂3']
        },
        {
            splitLine: {
                show: false,
                lineStyle: {color: 'red'}
            },
            position: 'left',
            gridIndex: 2,
            name: '23',
            axisLabel: {
                show: true,
                textStyle: {color: '#ffffff'},
                interval: 0,
                margin: 15,
                fontSize: 14,
            },
            axisLine: {
                show: false,
            },
            
            data: ['工厂1','工厂3']
        },
        {
            splitLine: {
                show: false,
                lineStyle: {color: 'red'}
            },
            axisLine: {
                show: false,
            },
            name:"总量",
             nameTextStyle: {
              color: "rgba(255, 255, 255, 1)",
              align: "right",
              padding: [0, 18, 0, 0]
            },
            position: 'left',
            gridIndex: 3,
            axisLabel: {
                show: true,
                textStyle: {color: '#ffffff'},
                interval: 0,
                margin: 15,
                fontSize: 14,
            },
            
            
            data: ['1200','3100']
        }
        ],
        //  legend: {
        //     data: ['蒸发量', '降水量']
        // },
        legend: {
            show: true,
            // left: 'auto',
            top: 20,
            textStyle: {
              color: "rgba(244, 244, 244, 1)"
            },
            data: ['item0','item1','item2','item3','item4','item5'],
        },
        series: [{
            type: 'custom',
            name:'item1',
             xAxisIndex: 0,
            renderItem: renderItem11,
            zlevel:6,
            // animation:false,
            animationDuration:200,
            clip:true,
            encode: {
                x: [1, 2],
                y: 0
            },
            data: item1Data
        },
        {
            type: 'custom',
            xAxisIndex: 0,
            name:'item2',
            renderItem: renderItem11,
            z:5,
            animationDuration:200,
            // animation:false,
            clip:true,
            encode: {
                x: [1, 2],
                y: 0
            },
            data: item2Data
        },{
            type: 'custom',
            xAxisIndex: 0,
            name:'item3',
            renderItem: renderItem11,
            z:4,
            animationDuration:200,
            // animation:false,
            clip:true,
            encode: {
                x: [1, 2],
                y: 0
            },
            data: item3Data
        },{
            type: 'custom',
            xAxisIndex: 0,
            name:'item4',
            renderItem: renderItem11,
            z:3,
            animationDuration:200,
            // animation:false,
            clip:true,
            encode: {
                x: [1, 2],
                y: 0
            },
            data: item4Data
        },{
            type: 'custom',
            xAxisIndex: 0,
            name:'item5',
            renderItem: renderItem11,
            z:2,
            animationDuration:200,
            // animation:false,
            clip:true,
            encode: {
                x: [1, 2],
                y: 0
            },
            data: item5Data
        },
        {
            type: 'bar',
            xAxisIndex: 1,
            yAxisIndex: 1,
            name:'new',
            // renderItem: renderItem11,
            z:1,
            animationDuration:200,
            // animation:false,
            // clip:true,
            // encode: {
            //     x: [1, 2],
            //     y: 0
            // },
            barWidth: 20,
            barGap: '100%',
            itemStyle: {
              color: "rgba(37, 119, 170, 1)",
              barBorderRadius: [10, 0, 0, 10]
            },
            data: [-220,-152]
        },
        {
            type: 'bar',
            xAxisIndex: 1,
            yAxisIndex: 1,
            name:'old',
            // renderItem: renderItem11,
            z:1,
            animationDuration:200,
            // animation:false,
            // clip:true,
            // encode: {
            //     x: [1, 2],
            //     y: 0
            // },
            itemStyle: {
              color: "rgba(37, 119, 170, 1)",
              barBorderRadius: [10, 0, 0, 10]
            },
            barWidth: 20,
            data: [-220,-152]
        },
        ]
    }
posted on 2020-10-30 11:27 河畔的风阅读(106) 评论(0) 编辑收藏举报
刷新页面返回顶部
河畔的风

公告
