eachats真时间轴

网上找了好多例子,都是用category来分段的假时间轴,并不是连续的一天二十四小时,所以在把echarts的文档前前后后来来回回反反复复的读了不知道多少遍之后,终于给弄出来了一天连续的二十四小时的时间轴,不容易,给自己鼓鼓掌(啪啪啪)。下直接上代码:

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", "15"],
["2016-08-09 10:15:23", "24"],
["2016-08-09 11:35:23", "37"],
["2016-08-09 16:55:29", "73"],
["2016-08-09 16:55:30", "56"],
["2016-08-09 19:35:31", "74"],
["2016-08-09 16:07:52", "97"]];
var date ='2016-08-09';
var myChart = echarts.init(document.getElementById('chart'));
myChart.setOption({
		legend: {
			data: ['name1','name2'],
			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:'name1',
	            type:'scatter',
	            data: data1
	        },
	        {
	            name:'name2',
	            type:'scatter',
	            data: data2
	        }
	    ]
	});

猜你喜欢

转载自blog.csdn.net/sijaycheng/article/details/82182932