js代码

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/prefixfree.min.js"></script>
<script src="js/jquery-PlayBar.min.js"></script>
<script src="js/echarts.min.js"></script>
<script src="js/jquery-echarts.min.js"></script>
<script type="text/javascript">

var data = [];
$(document).ready(function(){
	
	for (var i = 0; i < 1000; i++) {
	    data.push(randomData());
	}

	console.debug(data);

	$.playBar.addBar($('.test'),data.length*1000);//第一个参数是需要显示播放器的容器，第二个参数为时间，单位毫秒
	$.playBar.changeBarColor("#72dfff");//设置进度条颜色

	$.playChart.addChart("echarts",data);

	//点击暂停，再点击播放
	$("#controlBtn").click(function(){
		if($(this).hasClass("pause")){
			pausePlayer();
		}else if($(this).hasClass("play")){
			startPlayer();
		}
	});
	
	//点击停止按钮，时间清零
	$("#stopBtn").click(function(){
		stopPlayer();
		//clearTimeout(t);
		$.playBar.addBar($('.test'),data.length*1000);//第一个参数是需要显示播放器的容器，第二个参数为时间，单位毫秒
		$("#controlBtn").addClass("play").removeClass("pause");

	});
	
})

function startPlayer(){
	//开启进度条
	$("#controlBtn").addClass("pause").removeClass("play");
	$.playBar.Begin();
	
    //开启echarts
    $.playChart.Begin();	
}

function pausePlayer(){
	//暂停进度条
	$("#controlBtn").addClass("play").removeClass("pause");
	$.playBar.Pause();
    //暂停echarts
    $.playChart.Pause();
}

//停止播放
function stopPlayer(){
	$.playBar.Stop();
	$.playChart.Stop();
}

var now = +new Date(1997, 9, 3);
var oneDay = 24 * 3600 * 1000;
var value = Math.random() * 1000;
function randomData() {
    now = new Date(+now + oneDay);
    value = value + Math.random() * 21 - 10;
    return {
        name: now.toString(),
        value: [
            [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),
            Math.round(value)
        ]
    }
}

</script>