2020.03.07
关联图的实现，此图是echarts现成的图，其只需要传入json数组类型的数据集合，其会自动识别两个json数组中相同的key来进行关联，此图代码如下，其具体含义在注释中标注。 存在问题：传入的json数组长度过长时会无法显示，同时一个json数组中的key值不能相同，若相同 同样不能显示， 在传入约500条之后会显示的特别卡特别慢。
<div id="main" style=" 90%px;height:800px;background-color:white;"></div>
<%
request.setCharacterEncoding("UTF-8");
dao dao1 = new dao();
List<Proj> tecs = new ArrayList<>();
List<String> finish_dw = new ArrayList<>();
List<String> keyword = new ArrayList<>();
List<String> finish_per = new ArrayList<>();
tecs = dao1.getAllInfo();
finish_dw = dao1.getSingleInfo("finish_danwei");
keyword = dao1.getSingleInfo("keyword");
finish_per = dao1.getSingleInfo("finish_person");
out.println("tecs length:"+tecs.size());
out.println("finish_dw length:"+finish_dw.size());
out.println("keyword length:"+keyword.size());
out.println("finish_per length:"+finish_per.size());
/* request.setCharacterEncoding("UTF-8");
dao dao1 = new dao();
List<Proj> tecs = new ArrayList<>();
tecs = dao1.getAllInfo();
%>
<script type="text/javascript">
var myecharts = echarts.init(document.getElementById("main"));
option={
backgroundColor: '#ffffff', // 背景颜色
title: { // 图表标题
textStyle : { // 标题样式
color : '#000', // 标题字体颜色
fontSize : '30', // 标题字体大小
}
},
series: [{
type: "graph", // 系列类型:关系图
top: '10%', // 图表距离容器顶部的距离
roam: true, // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
focusNodeAdjacency: true, // 是否在鼠标移到节点上的时候突出显示节点以及节点的边和邻接节点。[ default: false ]
force: { // 力引导布局相关的配置项，力引导布局是模拟弹簧电荷模型在每两个节点之间添加一个斥力，每条边的两个节点之间添加一个引力，每次迭代节点会在各个斥力和引力的作用下移动位置，多次迭代后节点会静止在一个受力平衡的位置，达到整个模型的能量最小化。
// 力引导布局的结果有良好的对称性和局部聚合性，也比较美观。
repulsion: 1000, // [ default: 50 ]节点之间的斥力因子(关系对象之间的距离)。支持设置成数组表达斥力的范围，此时不同大小的值会线性映射到不同的斥力。值越大则斥力越大
edgeLength: [150, 100] // [ default: 30 ]边的两个节点之间的距离(关系对象连接线两端对象的距离,会根据关系对象值得大小来判断距离的大小)，
// 这个距离也会受 repulsion。支持设置成数组表达边长的范围，此时不同大小的值会线性映射到不同的长度。值越小则长度越长。如下示例:
// 值最大的边长度会趋向于 10，值最小的边长度会趋向于 50 edgeLength: [10, 50]
},
layout: "force", // 图的布局。[ default: 'none' ]
// 'none' 不采用任何布局，使用节点中提供的 x， y 作为节点的位置。
// 'circular' 采用环形布局;'force' 采用力引导布局.
symbol: 'circle',
lineStyle: { // 关系边的公用线条样式。其中 lineStyle.color 支持设置为'source'或者'target'特殊值，此时边会自动取源节点或目标节点的颜色作为自己的颜色。
normal: {
color: '#000', // 线的颜色[ default: '#aaa' ]
1, // 线宽[ default: 1 ]
type: 'solid', // 线的类型[ default: solid ] 'dashed' 'dotted'
opacity: 0.5, // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。[ default: 0.5 ]
curveness: 0 // 边的曲度，支持从 0 到 1 的值，值越大曲度越大。[ default: 0 ]
}
},
label: { // 关系对象上的标签
normal: {
show: true, // 是否显示标签
position: "inside", // 标签位置:'top''left''right''bottom''inside''insideLeft''insideRight''insideTop''insideBottom''insideTopLeft''insideBottomLeft''insideTopRight''insideBottomRight'
textStyle: { // 文本样式
fontSize: 16
}
}
},
edgeLabel: { // 连接两个关系对象的线上的标签
normal: {
show: true,
textStyle: {
fontSize: 14
},
formatter: function(param) { // 标签内容
return param.data.category;
}
}
},
data: [
<%
for (Proj tec:tecs)
{
%>
{
name: '<%=tec.getPro_name()%>',
draggable: true, // 节点是否可拖拽，只在使用力引导布局的时候有用。
symbolSize: [50,50], // 关系图节点标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10。
itemStyle: {
color: 'blue'
}
},
<%
}
%>
<%
for(String dw:finish_dw){
%>
{
name: '<%=dw%>',
draggable: true, // 节点是否可拖拽，只在使用力引导布局的时候有用。
symbolSize: [30,30], // 关系图节点标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10。
itemStyle: {
color: 'red'
}
},
<%
}
%>
<%
for(String kw:keyword){
%>
{
name: '<%=kw%>',
draggable: true, // 节点是否可拖拽，只在使用力引导布局的时候有用。
symbolSize: [30,30], // 关系图节点标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10。
itemStyle: {
color: 'yellow'
}
},
<%
}
%>
<%
for(String fp:finish_per){
%>
{
name: '<%=fp%>',
draggable: true, // 节点是否可拖拽，只在使用力引导布局的时候有用。
symbolSize: [30,30], // 关系图节点标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10。
itemStyle: {
color: 'black'
}
},
<%
}
%>
],
categories: [],
links: [
<%
for(Proj tec:tecs){
%>
{
source: '<%=tec.getPro_name()%>',
target: '<%=tec.getFinish_dw()%>',
category:'完成' //其通过传入的两个json数组，通过相同的完成人名来进行关联，并且所属关系为‘完成’
},
{
source: '<%=tec.getPro_name()%>',
target: '<%=tec.getFinish_per()%>',
category:'完成' //其通过传入的两个json数组，通过相同的完成人名来进行关联，并且所属关系为‘完成’
},
{
source: '<%=tec.getPro_name()%>',
target: '<%=tec.getKeyword()%>',
category:'描述' //其通过传入的两个json数组，通过相同的关键字来进行关联，并且所属关系为‘描述’
},
<%
}
%>
]
}],
};
myecharts.setOption(option);
</script>
</div><!-- /# row --> </div>