模拟数据采集的流程，利用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({