寒假学习记录12_关系图学习

把对关系图的学习做如下记录。

首先准备好echarts.js文件，由于我之前有个项目使用到了关系图所以直接拿来用了，放在了项目里。

然后就可以在jsp文件里写关系图的相关代码了，代码如下：

<script type="text/javascript">
var tbSecond = echarts.init(document.getElementById("tbSecond"));
option={
backgroundColor: '#ffffff', 
title: { 
textStyle : { 
color : '#000', 
fontSize : '30', 
}
},

series: [{
type: "graph", 
top: '10%',
roam: true,
focusNodeAdjacency: true, 
force: {
repulsion: 1000, 
edgeLength: [150, 100] 
},
layout: "force",
symbol: 'circle',
lineStyle: { 
normal: {
color: '#000',
width: 1, 
type: 'solid', 
opacity: 0.5, 
curveness: 0 
}
},
label: { 
normal: {
show: true, 
position: "inside", 
textStyle: {
fontSize: 16
}
}
},
edgeLabel: { 
normal: {
show: true,
textStyle: {
fontSize: 14
},
formatter: function(param) { 
return param.data.category;
}
}
},
data: [
<%
for (Title title:titles)
{
%>
{
name: '<%=title.getTitle()%>',
draggable: true, 
symbolSize: [50,50], 
itemStyle: {
color: 'green'
}
},
<%
}
%>

<%
for(Explain explain:explains){
%>
{
name: '<%=explain.getWords()%>',
draggable: true, 
symbolSize: [30,30], 
itemStyle: {
color: 'orange'
}
},
<%
}
%>

],

categories: [],

links: [
<%
for(Title title:titles){
List<Relation> relations=loadDaoImpl.loadrelation(title);
for(Relation relation:relations){
%>
{
source: '<%=relation.getTitle()%>',
target: '<%=relation.getWord()%>',
category:'出自'
},
<%
}
}
%>
]
}],
};
tbSecond.setOption(option);
</script>

设置好样式后在data和link的对应位置调用访问数据库的方法就可以将数据库里的信息用关系图表示出来了。

有一点要注意的是data里面每一块的name彼此间不能一样。出现相同的话，关系图就会展示失败。

解决办法可参考https://blog.csdn.net/qq_36072384/article/details/85063355

如果使用的是在name中添加id来解决问题，那么link中也要使用id建立联系。