时长数据堆叠时使用 dataZoom 显示错乱的问题ECharts Gallery

20:11:45图表已生成
代码
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)
        }
        
    ]
};
作品使用的第三方脚本

数据管理

历史数据 0 条

代码修改记录

信息提示

保存作品
