Echarts在线免费图表

 
            	var base = +new Date(2018, 6, 05, 0);
	var oneDay = 600000;
	var date = [];
	var data = [];
	var data1 = [];
	for (var i = 0; i < 143; i++) {
	    var now = new Date(base += oneDay);
	    var hours = now.getHours();
	    var minutes = now.getMinutes()
	    date.push([(hours>9)?hours:'0'+hours, (minutes>9)?minutes:'0'+minutes].join(':'));
	    data.push(Math.floor(Math.random() * (1000 + 1 - 400) + 400));
	    data1.push(Math.floor(Math.random() * (1000 + 1 - 400) + 400));
	}
	date.unshift('00:00');
	data.unshift(500);
	data1.unshift(500);
	
	date.push('23:59');
	data.push(500);
	data1.push(500);
    
	option = {
	    tooltip: {
	        trigger: 'axis',
	        axisPointer: { // 坐标轴指示器，坐标轴触发有效
	            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
	        }
	    },
	    title: {
	        text: '2018-08-15 林俊杰演唱会订单统计',
	        x: 'center',
	        
	    },
	   // dataZoom: [{
	   //     start: 0,
	   //     end: 50,
	   //     zoomLock:true
	   // }],
	    legend: {
            data:['已支付订单','未支付订单'],
            top: '5%'
        },
	    grid: {
	        top: '11%',
	        left: '0%',
	        right: '0%',
	        bottom: '7%',
	        containLabel: true
	    },
	    toolbox: {
	        show: true,
	        feature: {
	            restore: {
	                show: true
	            },
	            magicType: {
	                show: true,
	                type: ['line', 'bar']
	            },
	            dataView: {readOnly: false},
                saveAsImage: {
                    pixelRatio: 3
                }
	        }
	    },
	    xAxis: [{
	        name: '日期',
	        type: 'category',
	        data: date,
	        axisLabel: {
                interval: 5,
                rotate: 60
            }
	    }],
	    yAxis: [{
	        name: '',
	        type: 'value'
	    }],
	    series: [{
	        name: '已支付订单',
	        type: 'bar',
	        barWidth: '60%',
	        data: data,
	        stack: '总量',
	        color: ['#009966']
	    },
	    {
	        name: '未支付订单',
	        type: 'bar',
	        barWidth: '60%',
	        data: data1,
	        stack: '总量',
	        color: ['#ff0000']
	    }]
	};