echarts 结合ajax完成上下级关系图的绘制

这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.οnlοad=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">

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获取该节点的上下级数据并进行重绘。在重绘之前需要对节点数据进行去重工作。因为获取数据时我只需要管连线的数据就好了，因为节点数据可以从连线的左右进行获取，因此会有节点重复的问题。目前的想法就是这样的。。。那么具体操作就看代码的注释了，总体来说我感觉并没什么技术含量只是属于刚入行的练手和熟悉，因此大神什么的可以直接跳过了。。。笑，做完这个主管还没回来，，不知道接下来干嘛，先自己看看资料自己学习吧。

echarts 结合ajax完成上下级关系图的绘制相关推荐

转：ECharts图表组件之简单关系图：如何轻松实现另类站点地图且扩展节点属性实现点击节点页面跳转...
站点地图不外乎就是罗列一个网站的层次结构,提炼地讲就是一个关系结构图.那么我们如何巧用ECharts图表组件内的简单关系结构图来实现一个站点的地图结构呢?另外如何点击某个节点的时候实现页面跳转呢? 针 ...
echarts simple graph上下级关系图
1.需求: 现有功能不够清晰展示关系,修改为上下级关系,现有功能图如下: 修改后功能图如下: 2.话不多说上代码 gxt(src,dst,attacks){if(src.length<=1){t ...
echarts 3d饼图_echarts构建关系图，节点可收缩和展开，可添加点击事件
echarts下载及使用 ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Fir ...
数据可视化—复杂网络关系图的绘制
数据可视化的含义将抽象概念进行形象性表达,将抽象语言进行具象图形可视的过程. 以数据为工具,以可视化为手段,去达到描述真实,探索世界的目的. 以数据的视角,去看待世界. 数据可视化其实是一个处于不断 ...
用Anaconda实现社交网络关系图的绘制
1.下载<射雕英雄传>电子书,利用jieba图对其进行文本分析,制作高频词词云,并统计出场人物最多的50个人物. 2.为<射雕英雄传>中出场人数最多的50个人制作社交关系网络图
家谱等人物关系图的绘制
1. 使用 smartdraw 绘制图形展示请见:Genogram - What is a Genogram? 下载地址:Top reasons SmartDraw is perfect for ge ...
数据库 - 建模：实体关系图（ERD）
数据库 - 建模:实体关系图(ERD) 草拟实体及其关系的常用方法. 我们来看一个公司数据库的例子实体关系图实体关系模型,也称为实体关系(ER)图,是实体(将成为您的表)及其相互关系的图形表示. ...
关于flask入门教程-ajax+echarts实现关系图
关系图,从字面上可以看出,为关系的图形,既然为关系,那么就需要有点以及关系,用来表示点与点之间的联系.所以我们可以得出:关系图需要两个必要的元素,节点,关系,其中关系需要包含有联系的节点以及节点联系说 ...
关于echarts人物关系图，节点展现为图片
echarts示例中人物关系图中节点是原点或其他形状,但人物关系图中节点呈现为人物图像更为合适. 有些情况下,使用symbol: require('@/assets-')可以使用本地资源中的图片进行展 ...

echarts 结合ajax完成上下级关系图的绘制

echarts 结合ajax完成上下级关系图的绘制相关推荐

最新文章

热门文章