基于Echarts的数据流向图

模拟数据采集的流程，利用echarts制作出动态的数据流向图：

界面：

   

   

   

   

   

 

 

后台取数据将数据转换成规定的格式：

public @ResponseBody String SearchData(){

Flow flow = new Flow() ;

List flowlist = service.SearchData() ;

String json = "["  ;

for(int i = 0 ; i < flowlist.size() ; i++){

flow = flowlist.get(i) ;

String source = flow.getSource() ;

String target = flow.getTarget() ;

json = json + "[{name:'" + source + "'}, {name:'" + target + "'}]," ;

}

json = json + "]" ;

System.out.println("json:"+json);

return json;

}

@RequestMapping("/SearchPoint")

@Transactional

//查找表名

public @ResponseBody String SearchPoint(){

Tab tab = new Tab() ;

List tablist = service.SearchPoint() ;

String json = "[" ;

for(int i = 0 ; i < tablist.size() ;i++){

tab = tablist.get(i) ;

String value = tab.getTab_code() ;

json = json + "{name:'" + value + "',value:'" + value + "'}," ;

}

json = json +  "]" ;

    System.out.println("json:"+json);

    return json ;

}

@RequestMapping("/DataPoint")

@Transactional

//查找坐标系

public @ResponseBody String DataPoint(){

Coordinate coor = new Coordinate() ;

List coorlist = service.DataPoint() ;

String json = "{" ;

for (int i = 0 ; i < coorlist.size() ; i++){

coor = coorlist.get(i) ;

String name = coor.getTab_name() ;

BigDecimal x = coor.getX() ; 

BigDecimal y = coor.getY() ;

json = json + "'" + name + "':["+ x +"," + y + "], ";

}

json = json + "}" ;

System.out.println("json:"+json);

    return json ;

}

数据库中就是取的所有的值，直接select * from tab 就可以了，在js中将数据换成调用函数，在函数中使用ajax获得后台数据，在后台取出所有数据后，根据格式要求，将格式转换一下就ok了！