柱状图没有堆叠效果,黑色覆盖了红色
配置项如下
var date = new Date();
var Ymd = date.toLocaleDateString();
option = {
title: {
text: '工作时间图',
left: 10
},
tooltip: {
trigger: 'axis',
formatter: function(params) {
var res = params[0].name + "</br>"
var date0 = params[0].data;
var date1 = params[1].data;
date0 = date0.getHours() + ":" + (date0.getMinutes()) + ":" + date0.getSeconds();
date1 = date1.getHours() + ":" + (date1.getMinutes()) + ":" + date1.getSeconds();
res += params[0].seriesName + "~" + params[1].seriesName + ":</br>" + date0 + "~" + date1 + "</br>"
return res;
}
},
legend: {
data: ['开工时间1', '收工时间1']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'time',
min: Ymd + ' 00:00:00',
max: Ymd + ' 24:00:00',
interval: 1 * 60 * 60 * 1000,
axisLabel: {
formatter: function(v) {
var date = new Date(v);
return `${('0' + date.getHours()).slice(-2)}:${('0' + date.getMinutes()).slice(-2)}`;
}
},
// X轴 竖线坐标指示线
splitLine: {
show: true
}
},
yAxis: {
type: 'category',
data: [2432, 3624, 3634]
},
series: [{
name: '开工时间1',
type: 'bar',
stack: '24小时',
data: [
new Date("2019-04-16 08:17:47"),
new Date("2019-04-16 01:11:27"),
new Date("2019-04-16 02:23:09"),
]
},
{
name: '收工时间1',
type: 'bar',
stack: '24小时',
data: [
new Date("2019-04-16 22:35:21"),
new Date("2019-04-16 01:54:41"),
new Date("2019-04-16 03:18:40"),
]
},
]
};