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()；赋值给不同的变量会出错；