一天内某广告出现次数及时间散点图echarts time配置项内容和展示

主要是为了把X轴做个漂漂亮亮的时间显示,以及提示框的内容格式化

配置项如下
      var data1 = [
    ["2016-08-09 00:05:22", "17"],
    ["2016-08-09 00:15:23", "34"],
    ["2016-08-09 01:35:23", "87"],
    ["2016-08-09 06:55:29", "25"],
    ["2016-08-09 06:55:30", "36"],
    ["2016-08-09 09:35:31", "65"],
    ["2016-08-09 06:07:52", "3"]
];
var data2 = [
    ["2016-08-09 10:05:22", "5"],
    ["2016-08-09 10:15:23", "25"],
    ["2016-08-09 11:35:23", "47"],
    ["2016-08-09 16:55:29", "74"],
    ["2016-08-09 16:55:30", "33"],
    ["2016-08-09 19:35:31", "45"],
    ["2016-08-09 16:07:52", "16"]
];
var date = '2016-08-09';
option = {
    legend: {
        data: ['广告1', '广告2'],
        left: 'center'
    },
    tooltip: {
        formatter: function(params) {
            return params.seriesName + '<br><span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + params.color + ';"></span>' + params.value[0].substring(11, params.value[0].length) + ',  ' + params.value[1] + '%';
        }
    },
    xAxis: [{
        type: 'time',
        min: date + ' ' + '00:00:00',
        max: date + ' ' + '23:59:59',
        splitNumber: 23,
        axisLabel: {
            formatter: function(value) {
                var date = new Date(value);
                var h = date.getHours();
                var m = date.getMinutes();
                h = h < 10 ? '0' + h : h;
                m = m === 0 ? m + '0' : m;
                var time = h + ':' + m;
                return time;
            }
        }
    }],
    yAxis: [{
        type: 'value',
        min: 0,
        max: 100,
        interval: 10
    }],
    series: [{
            name: '广告1',
            type: 'scatter',
            data: data1
        },
        {
            name: '广告2',
            type: 'scatter',
            data: data2
        }
    ]
};
    
截图如下