需求如下：
数据回放的动画展现。
1.展现过程中可以暂停数据，查看数据点的详细信息。
2.可以往回拖
3.可以重新动态播放
4.轴是时间轴，变化的。
先上图图
然后是源代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>area pic</title>
<script src="js/esl.js"></script>
<script src="js/jquery-1.7.1.js"></script>
<script type="text/javascript">
require.config({
packages:[
{
name:'echarts',
location:'echarts-master/src',
main:'echarts'
},
{
name:'zrender',
location:'zrender-master/src',
main:'zrender'
}
]
});
//ajax获取后台数据，x轴的name从数据库中读取
function fetchXname(){
var arr=new Array();
$.ajax(
{
url:"./control/AjaxService.php?method=GetXaxisname",
dataType:"text",
success:function(data)
{
//调用函数获取值，转换成数组模式
var ss=eval（data);
for(var i=0;i<ss.length;i++)
{
arr.push(ss[i].name);
}
}
});
return arr;
}
function dataXRand(){
var dataarr=new Array();
$.ajax({
url:"./control/AjaxService.php?method=RandTest",
dataType:"text",
success:function(data)
{
var ss=eval（data);
for(var i=0;i<ss.length;i++)
{
dataarr.push(ss[i]);
// alert(dataarr[i]);
}
}
});
return dataarr;
}
function RandFloat(){
var floatdata;
$.ajax({
url:"./control/AjaxService.php?method=RandFloat",
dataType:"text",
success:function(data)
{
floatdata=eval（data);
// alert(floatdata);
}
});
return floatdata;
}
function RandANum(ec){
$.ajax({
url:"./control/AjaxService.php?method=RandANum",
dataType:"text",
success:function(data)
{
Rdata=eval（data);
myChart.addData([
[
0, // 系列索引
Rdata, // 新增数据
false, // 新增数据是否从队列头部插入
false, // 是否增加队列长度，false则自定删除原有数据，队头插入删队尾，队尾插入删队头
// axisData // 坐标轴标签
]
]);
}
});
}
option = {
title : {
text: '模拟数据回放功能',
subtext: '纯属虚构'
},
tooltip : {
trigger: 'axis'
},
legend: {
data:['攻击次数']
},
dataZoom : {
show : true,
realtime: true,
height:20,
backgroundColor: 'rgba(237,237,237,0.5)',
dataBackgroundColor: 'rgba(247,183,159,0.5)',
fillerColor: 'rgba(73,139,189,0.8)',
handleColor: 'rgba(128,43,16,0.8)',
start : 80,
end : 100
},
calculable : true,
xAxis : [
{
type : 'category',
boundaryGap : true,
data : (function(){
var now = new Date();
var res = [];
var len = 100;
while (len--) {
res.unshift(now.toLocaleTimeString().replace(/^\D*/,''));
now = new Date(now - 2000);
}
return res;
})()
}
],
yAxis : [
{
type : 'value',
scale: true,
precision:1,
power:1,
name : '次数',
boundaryGap: [0.2, 0.2],
splitArea : {show : true}
}
],
series : [
{
name:'攻击次数',
type:'line',
smooth:false,
itemStyle: {
normal: {
areaStyle: {
shadowColor : 'rgba(0,0,0,0.4)'
}
}
},
data:dataXRand()
}
],
calculable : false
};
var myChart;
var clickCount=0;
require(
[
'echarts',
'echarts/chart/line'
],
function(ec){
myChart=ec.init(document.getElementById('main'));
myChart.setOption(option);
var timeTicket;
clearInterval(timeTicket);
timeTicket = setInterval(function(){
RandANum(ec);
}, 2000);
//图表区域范围内点击，停止刷新数据
$(function(){
$("#main").each(function(){
$(this).click(function(event){
//如果鼠标在规划范围内
var div = $("#main");
var x=event.clientX;
var y=event.clientY;
var divx1 = $('#main').offset().left+80;
var divy1 = $('#main').offset().top+60;
var divx2=$('#main').offset().left-80+$('#main').width();
var divy2=$('#main').offset().top-60+$('#main').height();
if((x>divx1)&&(x<divx2)&&(y>divy1)&&(y<divy2) ){
clickCount+=1;
if(clickCount%2==1)
{
clearInterval(timeTicket);
}
else
{
timeTicket = setInterval(function(){
RandANum(ec);
}, 2000);
}
}
});
});
});
}
)
</script>
</head>
<body>
<div id="main" style="height:500px; border:1px solid #ccc; padding:10px;"></div>
</body>
</html>提示：出现的请求函数在之前的文章中php文件中有体现哦~
