Echarts在线免费图表

 
            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"),
            ]
        },
    ]
};