2019/10/29 使用Echarts实现甘特图
使用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]
}
]
};
最后的效果图：
