2019/10/29 使用Echarts实现甘特图

最新推荐文章于 2024-08-15 11:02:12 发布

strawberry233

最新推荐文章于 2024-08-15 11:02:12 发布

阅读量1.3k

点赞数

分类专栏：学习记录

本文链接：https://blog.csdn.net/strawberry233/article/details/102803297

版权

学习记录专栏收录该内容

10 篇文章 0 订阅

订阅专栏

使用Echarts实现甘特图

主要实现功能是：展示车间调度过程中，工件排列

直接上代码：

app.title = '堆叠条形图';

var ma = 4;
var job = 10;
var i = 0;
var C1 = [15, 26, 75, 106];
var S1 = [0, 15, 26, 75];
option = {
    title: {
        text: '计划甘特图',
        left: '45%',
        top: '5%'
    },
    legend: {
        bottom: '10%',
        data: ['工件1', '工件2', '工件3', '工件4', '工件5', '工件6', '工件7', '工件8', '工件9', '工件10']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '20%',
        top: '15%',
        containLabel: true
    },
    xAxis: {
        type: 'value',
        maxInterval: 20,
        splitLine: {
            show: false
        }, //去除网格线
        name: '时间'
    },
    yAxis: {
        type: 'category',
        data: ['机器1', '机器2', '机器3', '机器4'],
        name: '机器编号'
    },
    series: [{
            name: '工件3开始时刻',
            type: 'bar',
            stack: '总量',
            itemStyle: {
                normal: {
                    color: 'rgba(0,0,0,0)'
                }
            },
            data: [0, 15, 26, 75]
        }, {
            name: '工件3',
            type: 'bar',
            stack: '总量',

            data: [15, 11, 49, 31]
        }, {
            name: '工件9开始时刻',
            type: 'bar',
            stack: '总量',
            itemStyle: {
                normal: {
                    color: 'rgba(0,0,0,0)'
                }
            },
            data: [2, 18, 8, 34]
        }, {
            name: '工件9',
            type: 'bar',
            stack: '总量',

            data: [27, 5, 57, 49]
        }, {
            name: '工件8开始时刻',
            type: 'bar',
            stack: '总量',
            itemStyle: {
                normal: {
                    color: 'rgba(0,0,0,0)'
                }
            },

            data: [1, 34, 8, 9]
        }, {
            name: '工件8',
            type: 'bar',
            stack: '总量',

            data: [38, 60, 23, 59]
        }, {
            name: '工件6开始时刻',
            type: 'bar',
            stack: '总量',
            itemStyle: {
                normal: {
                    color: 'rgba(0,0,0,0)'
                }
            },

            data: [1, 8, 50, 9]
        }, {
            name: '工件6',
            type: 'bar',
            stack: '总量',

            data: [36, 70, 45, 91]
        }, {
            name: '工件10开始时刻',
            type: 'bar',
            stack: '总量',
            itemStyle: {
                normal: {
                    color: 'rgba(0,0,0,0)'
                }
            },

            data: [8, 5, 16, 9]
        }, {
            name: '工件10',
            type: 'bar',
            stack: '总量',

            data: [87, 56, 64, 85]
        }, {
            name: '工件5开始时刻',
            type: 'bar',
            stack: '总量',
            itemStyle: {
                normal: {
                    color: 'rgba(0,0,0,0)'
                }
            },

            data: [5, 15, 7, 5]
        }, {
            name: '工件5',
            type: 'bar',
            stack: '总量',

            data: [77, 56, 89, 78]
        }, {
            name: '工件1开始时刻',
            type: 'bar',
            stack: '总量',
            itemStyle: {
                normal: {
                    color: 'rgba(0,0,0,0)'
                }
            },

            data: [7, 5, 5, 1]
        }, {
            name: '工件1',
            type: 'bar',
            stack: '总量',

            data: [54, 79, 16, 66]
        }, {
            name: '工件4开始时刻',
            type: 'bar',
            stack: '总量',
            itemStyle: {
                normal: {
                    color: 'rgba(0,0,0,0)'
                }
            },

            data: [7, 9, 82, 1]
        }, {
            name: '工件4',
            type: 'bar',
            stack: '总量',

            data: [71, 99, 15, 68]
        }, {
            name: '工件2开始时刻',
            type: 'bar',
            stack: '总量',
            itemStyle: {
                normal: {
                    color: 'rgba(0,0,0,0)'
                }
            },

            data: [1, 3, 2, 5]
        }, {
            name: '工件2',
            type: 'bar',
            stack: '总量',

            data: [83, 3, 89, 58]
        }, {
            name: '工件7开始时刻',
            type: 'bar',
            stack: '总量',
            itemStyle: {
                normal: {
                    color: 'rgba(0,0,0,0)'
                }
            },

            data: [7, 29, 28, 6]
        }, {
            name: '工件7',
            type: 'bar',
            stack: '总量',

            data: [53, 99, 60, 13]
        }
   ]
};