echarts 结合ajax完成上下级关系图的绘制
2017-07-26 15:23
218 查看
这10天一直在做一个关于企业关系图的模块，一开始的时候用公司的框架，但是做出来的效果很low，当然因为一开始的时候只是想着在做的过程中学习公司的框架。后来主管推荐我用echarts来做，于是经过这1个星期把这个模块算是做的跟需求文档上要求的差不多了。在这里把过程记录一下。
代码中有更改，背景以及通过categories对节点分类，新代码放在github上了https://github.com/lvjan/work-question/
另在使用categories时发现在这里配置的配置项都能正常显示，但是就是symbolSize无法正确显示。只好在外面重新定义了。
因为我是直接在公司的项目上做的，而公司框架用的是xfire+spring,对于xfire我还不太了解，所以就先用最基础的jsp+servlet进行简单的实现。配置过程跳过，我就直接把代码粘贴出来好了。
JSP：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="pt/component/jQuery/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="echarts/echarts/dist/echarts3.0.js"></script>
<script type="text/javascript">
window.onload=function(){
var mycharts=echarts.init(document.getElementById("jieguo"));//获取需要进行应用echarts的对象
var Infodata=${Infodata};//获取初始查询出的数据
option = {//关系图的配置
title: {//标题组件，包含主标题和副标题
text: '高危企业关系图'
},
tooltip: {//提示框组件
},
animationDurationUpdate: 3,//动画时常
animationEasingUpdate: 'quinticInOut',//数据更新动画的缓动效果
series : [
{
type: 'graph',//系列类型：关系图
layout:'force',//采用力引导布局
roam: true,//开启鼠标缩放和平移
focusNodeAdjacency:true,//在鼠标移动到节点上时显示邻接节点和连线
force:{
initLayout:'circular',//初始化布局
repulsion:8000,//节点之间的斥力
edgeLength:[100,300],//边两边的节点的距离
gravity:0.1//引力因子
},
edgeSymbol: ['none', 'arrow'],//连线的类型
symbolSize:100,//节点大小
itemStyle:{//图形样式
normal:{
color:'#CD0000'
}
},
lineStyle: {//连线样式
normal: {
color:'#32CD32',
opacity: 0.9,//图形透明度
width: 1,//线宽
curveness: 0.233,//线的曲度
type:'dotted'//虚线
}
},
label: {
normal: {//文本标签
show: true,
textStyle: {
fontSize: 8,//字号
color:'#2E2E2E'
}
}
},
categories:[{
name:'0',
symbol:'pin',
itemStyle:{
normal:{
color:'#EE1289'
}
}
},{
name:'1',
symbol:'pin',
itemStyle:{
normal:{
color:'#DC143C'
}
}
}],
data:Infodata,//节点数据
links:[],//连线数据
symbol:'pin',//节点样式
symbolSize:100//节点大小
}
]
};
mycharts.setOption(option);//创建关系图
mycharts.on("dblclick",function choose(param){
var options=mycharts.getOption();
var selected =param.data;//获取被双击节点数据
var index=0;//节点索引
var first=options.series[0].data;//获取当前节点数据
var link=options.series[0].links;//获取当前节点之间连线
if(selected.jiedian>2|selected.jiedian<-2){//判断当触发时间的节点超过三级时提示并不做任何操作
alert("超过三级查询");
return;
}
for(i=0;i<first.length;i++){
if(first[i].id==selected.id){
index=i; //找出当前点击的节点的索引
}
}
$.ajax({
type:"post",
url:"getNextData",
data:{"name":param.name,"jiedian":selected.jiedian},
dataType:"text",
async:true,
success:function(result){
var jddata=result.split("%");//获取的结果
var linkdata=[];//节点连线数据
var newjddata=first;//新的节点数据
first[index].flag=false;
for(var num=0;num<jddata.length;num++){
var evaldata=eval(jddata[num]);//将结果字符串转换位json
if(evaldata==null) break;//如果结果字符串位null则跳过
linkdata=linkdata.concat(evaldata);//将结果集与原连线数据合并
for(var i=0;i<(evaldata).length;i++){//对节点数据进行去重
var j;
for(j=0;j<newjddata.length;j++){
if(evaldata[i].name==newjddata[j].name){
break;
}
}
if(j==first.length){
newjddata.push({"name":evaldata[i].name,"symbolSize":(20-evaldata[i]*2)^2*25,"jiedian":evaldata[i].jiedian});
}
}
}
mycharts.setOption(
{series:[{
data:newjddata,
links:link.concat(linkdata)
}]
}
);
}
});
}
);
}
</script>
</head>
<body>
<div>
<form action="getNextData" method="get">
<input type="text" id="chaxuntext" name="chaxuntext"/>
<input type="submit" id="search" value="查询"/>
</form>
</div>
<div id="jieguo" st
a725
yle="width:1000px;height:800px;">
</div>
</body>
</html>
servlet：
package form;
import java.io.IOException;
import java.io.PrintWriter;
import java.io.UnsupportedEncodingException;
import java.util.List;
import java.util.Map;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class Gaowei4 extends HttpServlet{
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
//get传过来的参数为查询按钮调用进来的
String name=new String(request.getParameter("chaxuntext").getBytes("iso-8859-1"),"UTF-8");
Object result=new Gaoweidb2().getData(name);
request.setAttribute("Infodata", result);
request.getRequestDispatcher("/gaowei2.jsp").forward(request, response);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
//post传递的参数为ajax调用进来的
response.setCharacterEncoding("UTF-8");
try {
request.setCharacterEncoding("UTF-8");
} catch (UnsupportedEncodingException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
String name=request.getParameter("name");
int jiedian=Integer.parseInt(request.getParameter("jiedian"));
String result=new Gaoweidb2().getNextData(name, jiedian);
PrintWriter out = response.getWriter();
out.write(result);
}
}
db层就不粘贴出来了，可能会泄露信息。无非是去数据库查结果并且转为json格式字符串。我反正用的阿里巴巴的fastjson。
完成的效果就是双击节点通过ajax获取该节点的上下级数据并进行重绘。在重绘之前需要对节点数据进行去重工作。因为获取数据时我只需要管连线的数据就好了，因为节点数据可以从连线的左右进行获取，因此会有节点重复的问题。目前的想法就是这样的。。。那么具体操作就看代码的注释了，总体来说我感觉并没什么技术含量只是属于刚入行的练手和熟悉，因此大神什么的可以直接跳过了。。。笑，做完这个主管还没回来，，不知道接下来干嘛，先自己看看资料自己学习吧 。
代码中有更改，背景以及通过categories对节点分类，新代码放在github上了https://github.com/lvjan/work-question/
另在使用categories时发现在这里配置的配置项都能正常显示，但是就是symbolSize无法正确显示。只好在外面重新定义了。
因为我是直接在公司的项目上做的，而公司框架用的是xfire+spring,对于xfire我还不太了解，所以就先用最基础的jsp+servlet进行简单的实现。配置过程跳过，我就直接把代码粘贴出来好了。
JSP：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="pt/component/jQuery/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="echarts/echarts/dist/echarts3.0.js"></script>
<script type="text/javascript">
window.onload=function(){
var mycharts=echarts.init(document.getElementById("jieguo"));//获取需要进行应用echarts的对象
var Infodata=${Infodata};//获取初始查询出的数据
option = {//关系图的配置
title: {//标题组件，包含主标题和副标题
text: '高危企业关系图'
},
tooltip: {//提示框组件
},
animationDurationUpdate: 3,//动画时常
animationEasingUpdate: 'quinticInOut',//数据更新动画的缓动效果
series : [
{
type: 'graph',//系列类型：关系图
layout:'force',//采用力引导布局
roam: true,//开启鼠标缩放和平移
focusNodeAdjacency:true,//在鼠标移动到节点上时显示邻接节点和连线
force:{
initLayout:'circular',//初始化布局
repulsion:8000,//节点之间的斥力
edgeLength:[100,300],//边两边的节点的距离
gravity:0.1//引力因子
},
edgeSymbol: ['none', 'arrow'],//连线的类型
symbolSize:100,//节点大小
itemStyle:{//图形样式
normal:{
color:'#CD0000'
}
},
lineStyle: {//连线样式
normal: {
color:'#32CD32',
opacity: 0.9,//图形透明度
width: 1,//线宽
curveness: 0.233,//线的曲度
type:'dotted'//虚线
}
},
label: {
normal: {//文本标签
show: true,
textStyle: {
fontSize: 8,//字号
color:'#2E2E2E'
}
}
},
categories:[{
name:'0',
symbol:'pin',
itemStyle:{
normal:{
color:'#EE1289'
}
}
},{
name:'1',
symbol:'pin',
itemStyle:{
normal:{
color:'#DC143C'
}
}
}],
data:Infodata,//节点数据
links:[],//连线数据
symbol:'pin',//节点样式
symbolSize:100//节点大小
}
]
};
mycharts.setOption(option);//创建关系图
mycharts.on("dblclick",function choose(param){
var options=mycharts.getOption();
var selected =param.data;//获取被双击节点数据
var index=0;//节点索引
var first=options.series[0].data;//获取当前节点数据
var link=options.series[0].links;//获取当前节点之间连线
if(selected.jiedian>2|selected.jiedian<-2){//判断当触发时间的节点超过三级时提示并不做任何操作
alert("超过三级查询");
return;
}
for(i=0;i<first.length;i++){
if(first[i].id==selected.id){
index=i; //找出当前点击的节点的索引
}
}
$.ajax({
type:"post",
url:"getNextData",
data:{"name":param.name,"jiedian":selected.jiedian},
dataType:"text",
async:true,
success:function(result){
var jddata=result.split("%");//获取的结果
var linkdata=[];//节点连线数据
var newjddata=first;//新的节点数据
first[index].flag=false;
for(var num=0;num<jddata.length;num++){
var evaldata=eval(jddata[num]);//将结果字符串转换位json
if(evaldata==null) break;//如果结果字符串位null则跳过
linkdata=linkdata.concat(evaldata);//将结果集与原连线数据合并
for(var i=0;i<(evaldata).length;i++){//对节点数据进行去重
var j;
for(j=0;j<newjddata.length;j++){
if(evaldata[i].name==newjddata[j].name){
break;
}
}
if(j==first.length){
newjddata.push({"name":evaldata[i].name,"symbolSize":(20-evaldata[i]*2)^2*25,"jiedian":evaldata[i].jiedian});
}
}
}
mycharts.setOption(
{series:[{
data:newjddata,
links:link.concat(linkdata)
}]
}
);
}
});
}
);
}
</script>
</head>
<body>
<div>
<form action="getNextData" method="get">
<input type="text" id="chaxuntext" name="chaxuntext"/>
<input type="submit" id="search" value="查询"/>
</form>
</div>
<div id="jieguo" st
a725
yle="width:1000px;height:800px;">
</div>
</body>
</html>
servlet：
package form;
import java.io.IOException;
import java.io.PrintWriter;
import java.io.UnsupportedEncodingException;
import java.util.List;
import java.util.Map;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class Gaowei4 extends HttpServlet{
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
//get传过来的参数为查询按钮调用进来的
String name=new String(request.getParameter("chaxuntext").getBytes("iso-8859-1"),"UTF-8");
Object result=new Gaoweidb2().getData(name);
request.setAttribute("Infodata", result);
request.getRequestDispatcher("/gaowei2.jsp").forward(request, response);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
//post传递的参数为ajax调用进来的
response.setCharacterEncoding("UTF-8");
try {
request.setCharacterEncoding("UTF-8");
} catch (UnsupportedEncodingException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
String name=request.getParameter("name");
int jiedian=Integer.parseInt(request.getParameter("jiedian"));
String result=new Gaoweidb2().getNextData(name, jiedian);
PrintWriter out = response.getWriter();
out.write(result);
}
}
db层就不粘贴出来了，可能会泄露信息。无非是去数据库查结果并且转为json格式字符串。我反正用的阿里巴巴的fastjson。
完成的效果就是双击节点通过ajax获取该节点的上下级数据并进行重绘。在重绘之前需要对节点数据进行去重工作。因为获取数据时我只需要管连线的数据就好了，因为节点数据可以从连线的左右进行获取，因此会有节点重复的问题。目前的想法就是这样的。。。那么具体操作就看代码的注释了，总体来说我感觉并没什么技术含量只是属于刚入行的练手和熟悉，因此大神什么的可以直接跳过了。。。笑，做完这个主管还没回来，，不知道接下来干嘛，先自己看看资料自己学习吧 。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- java和python结合项目,实现ajax+echarts显示端口占用数监控
- asp.net 非常简易的新闻发布系统，结合了ajax，json，Nvelocity模板引擎，只完成了一部分功能，非常适合新手看，我以前是学java方向的，刚接触.net，做的不好的别喷哈
- Echarts 3.19 .net<ajax+json>绘制柱状图 非静态
- Echarts结合百度地图绘制散点图，toolpit显示位置错位偏移问题解决
- 使用jQuery Autocomplete(自动完成)插件,结合ajax实现搜索框匹配
- echarts结合ajax动态获取数据库数据
- php+echarts+ajax完成一个简单的折线图
- 在B/S模式下结合AJAX和OWC动态绘制图表
- jquery-ui autocomplete 结合ajax实现自动完成搜索框匹配
- JQuery之autocomplete结合ajax实现自动完成功能
- 通过ajax动态加载echarts——简单关系网络实例
- .net 使用jQuery Autocomplete(自动完成)插件结合ajax
- 使用jQuery Autocomplete(自动完成)插件,结合ajax实现搜索框匹配
- JavaScript、Ajax与jQuery的关系
- 关于ajax与js结合后台调用的例子
- Jfinal框架下结合ajaxFileupload实现多文件上传
- Ajax基础应用入门02（结合javascript）
- 使用AJAX完成用户名是否存在异步校验
- 根据产品原型结合主流程抽取类，属性以及关系