模擬數據採集的流程，利用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({
url:"../do/tab/SearchPoint",
});
return dataarr;
}
function itemStyle(idx) {
return {
normal: {
color:'#fff',
borderWidth:1,
borderColor:['rgba(30,144,255,1)','lime'][idx],
lineStyle: {
type: 'solid',
shadowColor : ['rgba(30,255,255,1)','lime'][idx], //默認透明
shadowBlur: 10,
shadowOffsetX: 0,
shadowOffsetY: 0
}
}
}
};
option = {
backgroundColor: '#1b1b1b',
color: ['rgba(30,144,255,1)','lime'],
title : {
text: '數據流向',
subtext:'數據來自數據庫',
sublink: '',
x:'center',
textStyle : {
color: '#fff'
}
},
tooltip : {
trigger: 'item',
formatter: function(v) {
return v[1].replace(':', ' > ');
}
},
toolbox: {
show : true,
orient : 'vertical',
x: 'right',
y: 'center',
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
restore : {show: true},
saveAsImage : {show: true}
}
},
series : [
{
type: 'map',
roam: true,
hoverable: false,
itemStyle:{
normal:{
borderColor:'#1b1b1b',
borderWidth:0,
areaStyle:{
color: '#1b1b1b'
}
}
},
data:[],
markLine : {
symbol: ['circle', 'circle'], //點的形狀
symbolSize : 3, //調整點的大小
effect : effect,
itemStyle : itemStyle(0),
smooth:true,
data:dataXRand(),
} ,
markPoint : {
itemStyle : {
normal:{
color:'red'
}
},
data : pointXRand()
},
geoCoord: geoCoord()
}
]
};
var myChart2 = echarts.init(document.getElementById('mainMap'));
myChart2.setOption(option);
</script>
</html>
後臺取數據將數據轉換成規定的格式：
public @ResponseBody String SearchData(){
Flow flow = new Flow() ;
List<Flow> 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<Tab> 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<Coordinate> 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了！