您的位置：首页 > 其它

echarts关系图异步加载数据

2017-08-24 08:45 351 查看

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文件（具体说明及下载地址详见上一篇博客）


<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 =
4000
[];

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、注意事项

[b]3.1 节点数据和节点数据都需要编号，节点数据系统默认编号从0开始，所以关系数据中的source和target需要减1；[/b]

3.2 option中数据已经规定好格式，不得随意修改，可以现在webData中修改后加载到option中；

3.3 同一个函数必须赋值给同一个变量，比如nodes=getNodes()；赋值给不同的变量会出错；

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航