代码 :https://www.makeapie.com/editor.html?c=xryzwi7fVl
let result = [];
for (let i = data.length - 1; i >= 0; i--) {
result.push(data[i]);
}
data = result;
option = {
tooltip: {
trigger: 'axis',
formatter: function(params) {
var res = params[0].name + "</br>";
var date0 = params[0].data;
var date1 = params[1].data;
date0 = date0.getFullYear() + "-" + (date0.getMonth() + 1) + "-" + date0.getDate();
date1 = date1.getFullYear() + "-" + (date1.getMonth() + 1) + "-" + date1.getDate();
res += params[0].seriesName + "~" + params[1].seriesName + ":</br>" + date0 + "~" + date1 + "</br>";
console.log(params[0]);
return res;
}
// formatter: '{b}: {c}<br/>{b1}: {c1}'
},
legend: {
y: 'bottom',
data: ['计划时间', '实际时间'] //修改的地方1
},
xAxis: {
type: 'time'
},
yAxis: {
data: ['任务一', '任务二', '任务三', '任务四', '任务五', '任务六', '任务七']
},
series: [{
name: '计划开始时间',
type: 'bar',
stack: 'test1',
itemStyle: {
normal: {
color: 'rgba(0,0,0,0)'
}
},
data: [
new Date("2015/09/2"),
new Date("2015/09/15"),
new Date("2015/09/15"),
new Date("2015/10/03"),
new Date("2015/10/04"),
new Date("2015/10/05"),
new Date("2015/10/06")
]
},
{
name: '计划时间',
type: 'bar',
stack: 'test1',
//修改地方2
itemStyle: {
normal: {
color: '#F98563'
}
},
data: [
new Date("2015/09/12"),
new Date("2015/09/20"),
new Date("2015/09/25"),
new Date("2015/10/05"),
new Date("2015/10/07"),
new Date("2015/10/09"),
new Date("2015/10/12")
]
},
{
name: '实际开始时间',
type: 'bar',
stack: 'test2',
itemStyle: {
normal: {
color: 'rgba(0,0,0,0)'
}
},
data: [
new Date("2015/8/12"),
new Date("2015/09/15"),
new Date("2015/09/15"),
new Date("2015/10/03"),
new Date("2015/10/04"),
new Date("2015/10/05"),
new Date("2015/10/06")
]
},
{
name: '实际时间',
type: 'bar',
stack: 'test2',
//修改地方3
itemStyle: {
normal: {
color: '#A2E068'
}
},
data: [
new Date("2015/11/1"),
new Date("2015/09/20"),
new Date("2015/09/27"),
new Date("2015/10/11"),
new Date("2015/10/16"),
new Date("2015/10/18"),
new Date("2015/10/17")
]
}
]
};