模拟数据采集的流程,利用echarts制作出动态的数据流向图:
界面:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>
<body>
<div id="mainMap" style="height:600px;border:1px solid #ccc;padding:10px;">
</div>
<div id="drag" style="height:200px;border:1px solid #ccc;padding:10px;">
</div>
</body>
<script src="js/echarts-plain-map.js"></script>
<script src="js/jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$( "#drag" ).draggable();
$( "#mainMap").droppable();
})
var nameArr = new Array();
var effect = {
show: true,
period: 10, // 运动周期,无单位,值越大越慢
color: '#fff',
shadowColor: 'rgba(220,220,220,0.8)',
shadowBlur : 1
};
//dataXRand查找数据流向
function dataXRand(){
var dataarr=new Array();
$.ajax({
url:"../do/tab/SearchData",
async:false,
dataType:"text",
success:function(data)
{
var ss=eval(data);
for(var i=0;i<ss.length;i++)
{
nameArr.push(ss[i][0].name)
dataarr.push(ss[i]);
}
}
});
return dataarr;
} ;
//查找表名
function pointXRand(){
var dataarr=new Array();
$.ajax({