echarts官網講解的異步加載數據過於簡略，在此結合具體項目，說明echarts如何與ajax結合實現異步加載數據，下面爲顯示echarts動態關係圖的jsp代碼，我將進行分段解析：
1、html之head
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html style="height: 100%" lang="zh">
<head>
<meta charset="utf-8">
<title>echarts動態關係圖顯示</title>
在裏面引入js文件（具體說明及下載地址詳見上一篇博客）
<!-- 引入 echarts.js -->
<script type="text/javascript" src="${pageContext.request.contextPath }/assets/js/echart/jquery.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/assets/js/echart/echarts.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/assets/js/echart/dataTool.js"></script>
</head>
2.html之body
2.1 給echarts準備一個容器dom：
<body style="height: 100%; margin: 0">
<div id="main" style="height: 100%"></div>
<script type="text/javascript">
//基於準備好的dom，初始化echarts實例
var dom = document.getElementById("main");
var myChart = echarts.init(dom);
或者合併代碼：var myChart = echarts.init(document.getElementById('main'));
2.2 利用ajax加載已經從數據庫查詢出來的節點數據nodes並編號（本例中有關係的兩列數據爲id和name，均爲字符串類型）：
var idnodes={};//給nodes編號
var count=1;
var getNodes = function(){
var resultnodes = [];
var tempnodes = {};
$.ajax({
url: '發送請求的地址', //（基本地址/controller名/方法名）
dataType: "json", //服務器返回的數據類型
type: "post", //http請求方法
async: false, //ture爲異步加載數據，false爲同步加載數據，默認爲ture
success : function(data){ //請求成功後的回調函數
for(var x in data){ //循環取出節點名稱並編號
if(!idnodes[data[x].id]){
tempnodes = {name:data[x].id, value:data[x].value, category:data[x].category};
resultnodes.push(tempnodes);
idfault[data[x].id]=count++;
} if(!idnodes[data[x].name]){
tempnodes = {name:data[x].name, value:data[x].value, category:data[x].category}；
resultnodes.push(tempnodes);
idnodes[data[x].name]=count++;
}
}
},
});
return resultnodes;
};
2.3 利用ajax加載已經從數據庫查詢出來的節點之間的關係數據links：
var nodes= getNodes();//使用節點數據中的編號
var getLinks = function(){
var resultlinks = [];
var templinks = {};
$.ajax({
url: '發送請求的地址', //（基本地址/controller名/方法名）
dataType: "json",
type: "post",
async: false,
success : function(data){
for(var x in data){
templinks = {source:idnodes[data[x].id]-1, target:idnodes[data[x].name]-1}; //結合節點編號循環設置每條關係線的起點和終點
resultlinks.push(templinks);
}
},
});
return resultlinks;
};
2.4 echarts設置數據和配置項
var webData = {
"type": "force",
"categories": [//關係網類別，可以寫多組
{
"name": "",//關係網名稱
"keyword": {},
"base": ""
}
],
"nodes": nodes, //根據2.2取節點數據
"links": getLinks() //根據2.3取節點之間的關係數據
};
option = {
legend: {
data: []//此處的數據必須和關係網類別中name相對應
},
series: [{
type: 'graph', //系列圖標類型，用於展現節點以及節點之間的關係數據
layout: 'force', //圖的佈局 ，如果是force,則爲力引導佈局
animation: false,//動畫效果
label: { //圖形上的文本信息，可以說明圖形的一些數據信息，比如值，名稱等
normal: {
show:true,
position: 'right'
}
},
lineStyle: { //關係邊的公用線條樣式
normal: {
color: 'source', //關係邊自動取源節點或目標節點的顏色作爲自己的顏色
curveness: 0.3 //關係邊採用曲線連接，曲線弧度爲0.3
}
},
draggable: true, //圖形元素是否可以被拖拽
data: webkitDep.nodes.map(function (node, idx) {
node.id = idx;
return node;
}),
edges: webData.links,//節點數據和關係數據
roam: true,//是否開啓鼠標縮放和平移漫遊
categories: webData.categories, //節點分類的類目，類目的樣式會應用到屬於該類的節點上，圖例可以基於類目名字展示和篩選
force: {
edgeLength: webData.distance,//連線的長度
repulsion: 100 //子節點之間的間距
},
}]
};
myChart.setOption(option); ////更新數據和配置項
</script>
</body>
</html>
3、注意事項
3.1 節點數據和節點數據都需要編號，節點數據系統默認編號從0開始，所以關係數據中的source和target需要減1；
3.2 option中數據已經規定好格式，不得隨意修改，可以現在webData中修改後加載到option中；
3.3 同一個函數必須賦值給同一個變量，比如nodes=getNodes()；賦值給不同的變量會出錯；