堆积柱状图拖动dateZoom平移时bar的长度会缩小并且bar会超出坐标轴ECharts Gallery

20:11:45图表已生成
代码
Date.prototype.format = function () {
    var s = '';
    var mouth = (this.getMonth() + 1) >= 10 ? (this.getMonth() + 1) : ('0' + (this.getMonth() + 1));
    var day = this.getDate() >= 10 ? this.getDate() : ('0' + this.getDate());
    s += this.getFullYear() + '-'; // 获取年份。
    s += mouth + "-"; // 获取月份。
    s += day;   //获取日。
    return (s); //返回日期。
};

let ganttData = [{
        "solutionGantDetailVOS": [{
                "startDate": "2018-08-02",
                "endDate": "2018-08-05",
                "quantity": 20,
                'status': 0,
            },
            {
                "startDate": "2018-08-03",
                "endDate": "2018-08-06",
                "quantity": 15,
                'status': 0,
            }
        ],
        "item": "产品1",
        "plant": "工厂1"
    },
    {
        "solutionGantDetailVOS": [{
                "startDate": "2018-08-01",
                "endDate": "2018-08-05",
                "quantity": 20,
                'status': 0,
            },
            {
                "startDate": "2018-08-02",
                "endDate": "2018-08-05",
                "quantity": 20,
                'status': 1,
            }
        ],
        "item": "产品2",
        "plant": "工厂2"
    },
    {
        "solutionGantDetailVOS": [{
                "startDate": "2018-08-04",
                "endDate": "2018-08-08",
                "quantity": 30,
                'status': 0,
            },
            {
                "startDate": "2018-08-05",
                "endDate": "2018-08-09",
                "quantity": 20,
                'status': 1,
            },
            {
                "startDate": "2018-08-02",
                "endDate": "2018-08-06",
                "quantity": 10,
                'status': 1,
            },
            {
                "startDate": "2018-08-02",
                "endDate": "2018-08-06",
                "quantity": 30,
                'status': 0,
            },
            {
                "startDate": "2018-08-05",
                "endDate": "2018-08-09",
                "quantity": 20,
                'status': 1,
            },
            {
                "startDate": "2018-08-06",
                "endDate": "2018-08-12",
                "quantity": 10,
                'status': 1,
            }
        ],
        "item": "产品3",
        "plant": "工厂3"
    },
    {
        "solutionGantDetailVOS": [{
                "startDate": "2018-08-02",
                "endDate": "2018-08-07",
                "quantity": 20,
                'status': 0,
            },
            {
                "startDate": "2018-08-02",
                "endDate": "2018-08-07",
                "quantity": 15,
                'status': 1,
            }
        ],
        "item": "产品4",
        "plant": "工厂4"
    },
    {
        "solutionGantDetailVOS": [{
                "startDate": "2018-08-02",
                "endDate": "2018-08-12",
                "quantity": 20,
                'status': 0,
            },
            {
                "startDate": "2018-08-04",
                "endDate": "2018-08-14",
                "quantity": 15,
                'status': 0,
            }
        ],
        "item": "产品5",
        "plant": "工厂5"
    },
    {
        "solutionGantDetailVOS": [{
                "startDate": "2018-08-18",
                "endDate": "2018-08-25",
                "quantity": 20,
                'status': 0,
            },
            {
                "startDate": "2018-08-20",
                "endDate": "2018-08-25",
                "quantity": 20,
                'status': 1,
            }
        ],
        "item": "产品6",
        "plant": "工厂6"
    },
    {
        "solutionGantDetailVOS": [{
                "startDate": "2018-08-04",
                "endDate": "2018-08-14",
                "quantity": 30,
                'status': 0,
            },
            {
                "startDate": "2018-08-05",
                "endDate": "2018-08-15",
                "quantity": 20,
                'status': 1,
            },
            {
                "startDate": "2018-08-08",
                "endDate": "2018-08-18",
                "quantity": 10,
                'status': 1,
            },
        ],
        "item": "产品7",
        "plant": "工厂7"
    },
    {
        "solutionGantDetailVOS": [{
                "startDate": "2018-08-19",
                "endDate": "2018-08-29",
                "quantity": 20,
                'status': 0,
            },
            {
                "startDate": "2018-08-22",
                "endDate": "2018-09-02",
                "quantity": 15,
                'status': 1,
            }
        ],
        "item": "产品8",
        "plant": "工厂8"
    },
    {
        "solutionGantDetailVOS": [{
                "startDate": "2018-08-02",
                "endDate": "2018-08-12",
                "quantity": 20,
                'status': 0,
            },
            {
                "startDate": "2018-08-04",
                "endDate": "2018-08-14",
                "quantity": 15,
                'status': 0,
            }
        ],
        "item": "产品9",
        "plant": "工厂9"
    },
    {
        "solutionGantDetailVOS": [{
                "startDate": "2018-08-18",
                "endDate": "2018-08-25",
                "quantity": 20,
                'status': 0,
            },
            {
                "startDate": "2018-08-20",
                "endDate": "2018-08-25",
                "quantity": 20,
                'status': 1,
            }
        ],
        "item": "产品10",
        "plant": "工厂10"
    },
    {
        "solutionGantDetailVOS": [{
                "startDate": "2018-08-04",
                "endDate": "2018-08-14",
                "quantity": 30,
                'status': 0,
            },
            {
                "startDate": "2018-08-05",
                "endDate": "2018-08-15",
                "quantity": 20,
                'status': 1,
            },
            {
                "startDate": "2018-08-08",
                "endDate": "2018-08-18",
                "quantity": 10,
                'status': 1,
            },
        ],
        "item": "产品11",
        "plant": "工厂11"
    },
    {
        "solutionGantDetailVOS": [{
                "startDate": "2018-08-19",
                "endDate": "2018-08-29",
                "quantity": 20,
                'status': 0,
            },
            {
                "startDate": "2018-08-22",
                "endDate": "2018-09-02",
                "quantity": 15,
                'status': 1,
            }
        ],
        "item": "产品12",
        "plant": "工厂12"
    },
]
let start_ = "2018-08-01",
    end_ = "2018-09-20"; //自定义时间
let dateLen = DateDiff(start_, end_); //自定义的时间长度
let x_ = getAll(start_, end_); //时间节点数组
let yAxisData_plant = [], //工厂名
    yAxisData_item = [], //产品名
    yAxisData = [];
let seriesData = [];
let ganttItemsLengthArr = [], //ganttItems长度数组
    ganttItemsLengthArrMax = 0,
    ganttItemsLengthArrMaxIndex = 0; // ganttItems长度数组最大值索引
ganttData.forEach((item, index) => {
    yAxisData_plant.push(item.plant);
    yAxisData_item.push(item.item);
    ganttItemsLengthArr.push(item.solutionGantDetailVOS.length);
    ganttItemsLengthArrMax = Math.max.apply(null, ganttItemsLengthArr);
    ganttItemsLengthArrMaxIndex = (ganttItemsLengthArr.indexOf(ganttItemsLengthArrMax));
});

recursion(ganttData, ganttItemsLengthArrMax);

ganttData[ganttItemsLengthArrMaxIndex].solutionGantDetailVOS.forEach((item, index) => {
    let seriesData1 = [],
        seriesData2 = [],
        bgColor = "rgba(0,235,255,.4)";
    ganttData.forEach((dataItem, dataIndex) => {
        bgColor = dataItem.solutionGantDetailVOS[index].status == 0 ? bgColor : dataItem.solutionGantDetailVOS[index].status == 1 ? (bgColor = 'rgba(255,115,115,.4)') : bgColor;
        seriesData1.push(DateDiff(start_, dataItem.solutionGantDetailVOS[index].startDate))
        seriesData2.push({
            value: DateDiff(dataItem.solutionGantDetailVOS[index].startDate, dataItem.solutionGantDetailVOS[index].endDate),
            quantity: dataItem.solutionGantDetailVOS[index].quantity,
            itemStyle: {
                normal: {
                    color: bgColor
                }
            },
        })
    });
    seriesData.push(
        {
        name: `计划时长（天）${index}`,
        type: 'bar',
        stack: `plan${index}`,
        barGap: 0,
        barWidth: 10,
        barCategoryGap: '50%',
        itemStyle: {
            normal: {
                barBorderColor: 'rgba(0,0,0,0)',
                color: 'rgba(0,0,0,0)'
            },
            emphasis: {
                barBorderColor: 'rgba(0,0,0,)',
                color: 'rgba(0,0,0,0)'
            }
        },
        data: seriesData1
    },
        {
        //每个项目 持续时间长度
        name: `计划时长（天）${index}`,
        type: 'bar',
        stack: `plan${index}`,
        barGap: 0,
        barWidth: 10,
        itemStyle: {
            normal: {
                label: {
                    show: true,
                    position: "insideLeft",
                    textStyle: {
                        fontSize: 10
                    },
                    formatter: function(obj) {
                        return obj.data.quantity;
                    }
                },
            }
        },
        data: seriesData2
    })
})
option = {
    backgroundColor: '#26263C',
    //animation: false,
    tooltip: {
        formatter: function(params) {
            var tar = params[1];
            return null;
        }
    },
    grid: {
        top: 48,
        left: 210,
        right: 11,
        bottom: 50,
    },
    dataZoom: [{
            show: true,
            type: 'slider',
            realtime: false,
            filterMode: 'none',
            xAxisIndex: 0,
            height: 10,
            bottom: 20,
            startValue: 0,
            endValue: 7,
            minValueSpan: 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
            },
            showDetail: false,
            borderColor: 'transparent',
            backgroundColor: '#D7F4FF',
            dataBackground: {
                lineStyle: {
                    width: 0
                },
                areaStyle: {
                    color: 'transparent'
                }
            },
            fillerColor: '#00EBFF'
        }, {
            type: "inside",
            show: true,
            xAxisIndex: 0,
            zoomOnMouseWheel: false,
        },
        {
            type: 'slider',
            yAxisIndex: [0, 1],
            width: 10,
            right: 0,
            top: 48,
            bottom: 50,
            startValue: 0,
            endValue: 2,
            borderColor: 'transparent',
            backgroundColor: '#26263C',
            fillerColor: '#8F8FB0',
            dataBackground: {
                lineStyle: {
                    width: 0
                },
                areaStyle: {
                    color: 'transparent'
                }
            },
            handleSize: 0,
            showDetail: false,
        }, {
            type: 'inside',
            yAxisIndex: [0, 1],
            zoomOnMouseWheel: false,
            moveOnMouseWheel: true,
            moveOnMouseMove: true,
            preventDefaultMouseMove: true
        }
    ],
    xAxis: {
        type: 'value',
        max: dateLen,
        position: 'top',
        axisLabel: {
            show: true,
            padding: [0, 0, 0, 60],
            textStyle: {
                color: '#ffffff'
            },
            interval: 0,
            margin: 15,
            fontSize: 14,
            formatter:function (value, index) {
                 return x_[value]
             }
        },
        axisLine: {
            show: false,
        },
        splitLine: {
            show: true,
            lineStyle: {
                color: 'rgba(233,233,233,0.1)'
            }
        },
        axisTick: {
            lineStyle: {
                color: '#fff'
            }
        }
    },
    yAxis: [{
        name: '工厂',
        nameLocation: 'start',
        boundaryGap: true,
        nameTextStyle: {
            color: '#fff',
            padding: [0, 0, 0, 60],
            fontSize: 14
        },
        position: 'left',
        offset: 110,
        axisLine: {
            onZero: false,
            show: false
        },
        axisTick: {
            length: 110,
            inside: true,
            lineStyle: {
                color: 'rgba(233,233,233,0.2)'
            }
        },
        axisLabel: {
            show: true,
            inside: true,
            color: '#ffffff',
            margin: 16,
            fontSize: 14,
        },
        splitLine: {
            show: true,
            lineStyle: {
                color: 'rgba(233,233,233,0.1)'
            }
        },
        inverse: true,
        data: yAxisData_plant,
        triggerEvent: true
    }, {
        name: '产品',
        nameLocation: 'start',
        boundaryGap: true,
        nameTextStyle: {
            color: '#fff',
            padding: [0, 0, 0, 100],
            fontSize: 14
        },
        position: 'left',
        offset: 210,
        axisLine: {
            onZero: false,
            show: false
        },
        axisTick: {
            length: 100,
            inside: true,
            lineStyle: {
                color: 'rgba(233,233,233,0.2)'
            }
        },
        axisLabel: {
            show: true,
            inside: true,
            color: '#ffffff',
            margin: 35,
            fontSize: 14
        },
        splitLine: {
            show: true,
            lineStyle: {
                color: 'rgba(233,233,233,0.1)'
            }
        },
        inverse: true,
        data: yAxisData_item,
        triggerEvent: true
    }, ],
    series: seriesData
}

//递归补全ganttItems
function recursion(data, max) {
    data.forEach((item, index) => {
        if (item.solutionGantDetailVOS.length < max) {
            item.solutionGantDetailVOS.push({
                "startDate": '',
                "endDate": '',
                "quantity": '',
                'status': 0,
            })
            recursion(data, max)
        }
    })
}
//计算两个日期相差天数
function DateDiff(sDate1, sDate2) { //sDate1和sDate2是2006-12-18格式
    var dateSpan,
        tempDate,
        iDays;
    sDate1 = Date.parse(sDate1);
    sDate2 = Date.parse(sDate2);
    dateSpan = sDate2 - sDate1;
    dateSpan = Math.abs(dateSpan);
    iDays = Math.floor(dateSpan / (24 * 3600 * 1000));
    return iDays
};

function getAll(begin, end) {
    let return_ = [];
    let ab = begin.split("-");
    let ae = end.split("-");
    let db = new Date();
    db.setUTCFullYear(ab[0], ab[1] - 1, ab[2]);
    let de = new Date();
    de.setUTCFullYear(ae[0],
        ae[1] - 1, ae[2]);
    let unixDb = db.getTime();
    let unixDe = de.getTime();
    for (let k = unixDb; k <= unixDe;) {
        return_.push((new Date(parseInt(k))).format());
        k = k + 24 * 60 * 60 * 1000;
    }
    return return_;
}
作品使用的第三方脚本

数据管理

历史数据 0 条

代码修改记录

信息提示

保存作品
