配置项如下
function GetTime( oldTime ){
let newTime = [];
oldTime.forEach((time)=>{
newTime.push( new Date(time).getTime());
})
return newTime;
}
function GetDuration( endTime, startTime ){
let duration = [];
endTime.forEach(( time, index )=>{
duration.push( time - startTime[index] );
})
return duration;
}
const startTime_plan = GetTime([
'2018/01/01',
'2018/02/01',
'2018/03/01',
'2018/04/01',
'2018/05/01'
]);
const endTime_plan = GetTime([
'2018/06/01',
'2018/07/01',
'2018/08/01',
'2018/09/01',
'2018/10/01'
]);
const startTime_actual = GetTime([
'2018/02/01',
'2018/03/01',
'2018/04/01',
'2018/05/01',
'2018/06/01'
]);
const endTime_actual = GetTime([
'2018/07/01',
'2018/08/01',
'2018/09/01',
'2018/10/01',
'2018/11/01'
]);
const startTime = new Date('2018/01/01').getTime();
const duration_plan = GetDuration( endTime_plan, startTime_plan );
const duration_actual = GetDuration( endTime_actual, startTime_actual );
function FormatTime(oldTime){
let newTime = [];
oldTime.forEach((time)=>{
newTime.push( time - startTime );
})
return newTime ;
}
option = {
legend:{
data:[ '计划时长', '实际时长' ]
},
tooltip: {
trigger: 'axis'
},
xAxis: [
{
type: 'value',
axisLabel: {
formatter: (value) => {
let tempValue = value + startTime;
let year = new Date(tempValue).getFullYear();
let month = new Date(tempValue).getMonth()+1;
let date = new Date(tempValue).getDate();
return year+'-'+month+'-'+date;
}
}
}
],
yAxis: [
{
type: 'category',
data: ['task1','task2','task3','task4','task5' ]
}
],
dataZoom: [ {
type: 'slider',
xAxisIndex: 0,
labelFormatter: (value) => {
let tempValue = value + startTime;
let year = new Date(tempValue).getFullYear();
let month = new Date(tempValue).getMonth()+1;
let date = new Date(tempValue).getDate();
return year+'-'+month+'-'+date;
}
}],
series: [
{
name:'计划开始时间',
type: 'bar',
stack: '计划',
data: FormatTime(startTime_plan)
},
{
name:'计划时长',
type: 'bar',
stack: '计划',
data: duration_plan
},
{
name:'计划结束时间',
type: 'bar',
data: FormatTime (endTime_plan)
},
{
name:'实际开始时间',
type: 'bar',
stack: '实际',
data: FormatTime (startTime_actual)
},
{
name:'实际时长',
type: 'bar',
stack: '实际',
data: duration_actual
},
{
name:'实际结束时间',
type: 'bar',
data: FormatTime (endTime_actual)
}
]
};