时间区域甘特图ECharts Gallery

20:11:45图表已生成
代码
var data = [];
let startTimeAll = new Date("2021-03-01 00:00:00").getTime();
let endTimeAll = new Date("2021-03-04 00:00:00").getTime();
var categories = ['A', 'B', 'C'];

var jsonData = [{
        "category": "A",
        "startTime": "2021-03-01 08:00:00",
        "endTime": "2021-03-01 18:00:00"
    }, {
        "category": "A",
        "startTime": "2021-03-02 10:00:00",
        "endTime": "2021-03-02 14:00:00"
    },
    {
        "category": "A",
        "startTime": "2021-03-03 10:00:00",
        "endTime": "2021-03-03 18:00:00"
    },
    {
        "category": "B",
        "startTime": "2021-03-01 08:00:00",
        "endTime": "2021-03-01 13:00:00"
    },
    {
        "category": "C",
        "startTime": "2021-03-01 08:00:00",
        "endTime": "2021-03-01 16:00:00"
    }, {
        "category": "C",
        "startTime": "2021-03-02 04:00:00",
        "endTime": "2021-03-02 19:00:00"
    }
]


function getXDate(time) {
    let year = time.getFullYear();
    let month = parseInt(time.getMonth()) + 1;
    let day = time.getDate();
    let hour = time.getHours();
    let minutes = time.getMinutes();
    let seconds = time.getSeconds();
    return year + '-' + month + '-' + day + ' ' + hour + ':' + minutes + ':' + seconds;
}


console.log(jsonData)
 

// Generate mock data
echarts.util.each(categories, function(category, index) {
    
    let cgory = categories[index]
     jsonData.forEach((item, index1) => {
        if(item.category == cgory){
            let inx = index
            var startTime = new Date(item.startTime).getTime();;
            let endTime = new Date(item.endTime).getTime();;
            var duration = endTime - startTime;
            data.push({
            name: '时长',
            value: [
                index,
                startTime,
                endTime,
                duration
            ],
            itemStyle: {
                normal: {
                    color: '#7b9ce1'
                }
            }
        });
        }
    })
});

console.log(data)

function renderItem(params, api) {
    var categoryIndex = api.value(0);
    var start = api.coord([api.value(1), categoryIndex]);
    var end = api.coord([api.value(2), categoryIndex]);
    var height = api.size([0, 1])[1] * 0.6;

    var rectShape = echarts.graphic.clipRectByRect({
        x: start[0],
        y: start[1] - height / 2,
        width: end[0] - start[0],
        height: height
    }, {
        x: params.coordSys.x,
        y: params.coordSys.y,
        width: params.coordSys.width,
        height: params.coordSys.height
    });

    return rectShape && {
        type: 'rect',
        shape: rectShape,
        style: api.style()
    };
}


option = {
    tooltip: {
        formatter: function(params) {
            return params.marker + params.name + ': ' + params.value[3] + ' ms';
        }
    },
    title: {
        text: 'Profile',
        left: 'center'
    },
    grid: {
        height: 300
    },
    xAxis: [{
        min: startTimeAll,
        max: endTimeAll,
        scale: true,
        axisLabel: {
            formatter: function(val) {
                let dateTime = new Date(val);
                return getXDate(dateTime);
            }
        }
    }, {
        data: ['2021-03-01', '2021-03-02','2021-03-03']
    }],
    yAxis: {
        data: categories
    },
    series: [{
        type: 'custom',
        renderItem: renderItem,
        itemStyle: {
            normal: {
                opacity: 0.8
            }
        },
        encode: {
            x: [1, 2],
            y: 0
        },
        data: data
    }]
};
作品使用的第三方脚本

数据管理

历史数据 0 条

代码修改记录

信息提示

保存作品
