应该是至少半年了，从18年年底到现在接触的项目基本都是图谱项目，图谱项目就是尽可能的用图的形式来展示数据，所以关于echarts这个东西，也算是接触的不少了，早就想记录一些工作中关于echarts遇到的问题和 笔记，方便自己也方便大家，时间问题拖到现在，所以就赶紧写一写吧。
这个博客主要记录一个比较完整的关系网络图，如果同学你也是在做这种图就可以继续往下看吧，如果不是需要这样的，也可以看一些属性啊记录，希望对大家也有所帮助；
先来一张效果图
这个图呢就是中间一个点 ，扩散出去，扩散出去的每个点可以继续扩散；示例数据如下：
var myGraphData = [
{ "parentNode":"张三", "childNodes":["小明", "小华", "小杰", "小婷"]},
{ "parentNode":"小明", "childNodes":[ "小王", "小赵", "小钱" ] },
{ "parentNode":"小华", "childNodes":[ "小孙", "小李"] },
{ "parentNode":"小华", "childNodes":[ "小周"] },
{ "parentNode":"小杰", "childNodes":[ "小吴", "小郑" ] },
{ "parentNode":"小婷", "childNodes":[ "小谢" ] },
{ "parentNode":"小婷", "childNodes":[ "小潘" ] },
//数据格式是这样的,parentNode是souce出发点，childNodes就是parentNode所扩散出的点,也就是目标点也叫子节点；只要把数据造成这样就ok直接使用了；
];实际后台数据如下：后台没有按规则来进行返回，所以就在页面中处理了；from是 出发点id+name，to是目标点id+name；
开始代码
html页面
<div id="personKeywordsYearListGraphDiv"
style="width: 100%; height: 500px">
</div>js画图代码
function doPersonAnalyseNetwork(resData){
var dataPre = resData.noeds;
//判断数据是否存在,如果不存在则将div直接隐藏
if(null ==dataPre || "" == dataPre || dataPre.length == 0 ){
$("#hezuoPersonTuDiv").hide();
return false;
}
var chart = document.getElementById('personKeywordsYearListGraphDiv');
chart.removeAttribute("_echarts_instance_");//加上这句表示情况重复数据,二次加载清空原始数据
myChart = echarts.init(chart);
myChart.showLoading({
text: '数据正在努力加载...',
textStyle: { fontSize : 30 , color: '#444' },
effectOption: {backgroundColor: 'rgba(0, 0, 0, 0)'}
});
if (dataPre.length === 0){}
//alert('暂未检索到该科研人员的合作网络，请稍候再试。');
else {
var arrr = [];
//数据格式：
// var myGraphData = [
// { "parentNode":"张三", "childNodes":["小明", "小华", "小杰", "小婷","小妍","小飞"]},
// { "parentNode":"小明", "childNodes":[ "小王", "小赵", "小钱" ] },
// { "parentNode":"小华", "childNodes":[ "小孙", "小李", "小周" ] },
// ];
//创建dataNodes来存放数据
var dataNodes = {};
dataNodes.parentNode = {};
dataNodes.childNodes = [];
dataNodes.childNodesId = [];
//当前用户的name
var personName =resData.personInfo.personName;
dataNodes.parentNode = personName;
for (var n = 0; n < dataPre.length; n++) {
if (dataPre[n].group == 0){
//group为0的是当前直接关系的节点
dataNodes.childNodes.push(dataPre[n].to.split('-')[1]);
//存放name和id的信息,中间用“-”进行分割；
dataNodes.childNodesId.push(dataPre[n].from.split('-')[0]+"-"+dataPre[n].to.split('-')[0]);
}
}
//以上代码为当前用户节点和直接关系节点的数据
arrr.push(dataNodes);
dataNodes = {};
dataNodes.parentNode = {};
dataNodes.childNodes = [];
dataNodes.childNodesId = [];
for (var n = 0; n < dataPre.length; n++) {
//开始处理group为1的数据，表示间接关系
if (dataPre[n].group == 1){
dataNodes.parentNode = dataPre[n].from.split('-')[1];
//因数据有重复性,id又不可重复,所以此处采用循环中的n+name+id的方式来保证唯一 使用的时候在来进行分割获取
//这里保存的target目标的name和id
dataNodes.childNodes.push(n+"-"+dataPre[n].to.split('-')[1]+"-"+dataPre[n].to.split('-')[0]);
//本行代码与上行代码意思一直,重复是为了直接将当前的source和taeget的id进行保存,方便使用
dataNodes.childNodesId.push(dataPre[n].from.split('-')[0]+"-"+dataPre[n].to.split('-')[0]);
arrr.push(dataNodes);
dataNodes = {};
dataNodes.parentNode = {};
dataNodes.childNodes = [];
dataNodes.childNodesId = [];
}
}
var myGraphData =arrr;
var listdata = [];
var linksdata = [];
var nodes =[{
"nodename":personName,
"nodelevel":0,
"parentnode":0,
"nodeId":"",
}];
for(var i=0; i < myGraphData.length; i++){
getNodes(myGraphData[i].parentNode,myGraphData[i].childNodes,myGraphData[i].childNodesId,nodes);
//创建source和target 的信息
setLinkData( myGraphData[i].childNodes, myGraphData[i].parentNode,myGraphData[i].childNodesId, linksdata);
}
setNodeData(nodes,listdata);
var levels = 0;
var legend_data = [];
var series_categories = [];
var temp = ["","直接关系","间接关系"];//第一个为空,空的原因请看下方的for循环，这个是在初始化图例
for(var i=0; i < nodes.length; i++){
levels = Math.max(levels, nodes[i].nodelevel);
}
for(var i=0; i<=levels; i++){
legend_data.push({
name : i===0?'中心点':temp[i],
icon : 'rect'
});
series_categories.push({
name : i===0?'中心点':temp[i],
symbol : 'rect'
});
}
option = {
title: {
text: personName+"人员合作网络",
top: "top",
left: "left",
textStyle: {
color: '#292421'
}
},
tooltip: {
formatter: '{b}'
},
backgroundColor: '#FFFFFF',
legend: {
show : true,
data : legend_data,
textStyle: {
color: '#292421'
},
type: 'scroll',
orient: 'vertical',
left: 'left',
top: '40px'
},
toolbox: {
show: true,
feature: {
saveAsImage: {show: true} //支持下载的按钮
}
},
animationDuration: 0,
animationEasingUpdate: 'quinticInOut',
series: [{
color: [
'#fc0','#36c' ,'#FF8C69'
],
name: '关系图',
type: 'graph',
layout: 'force',
force: {
repulsion: 300,
gravity: 0.1,
edgeLength: 15,
layoutAnimation: true,
},
data: listdata,
links: linksdata,
categories: series_categories,
roam: true,
label: {
normal: {
show: true,
position: 'bottom',
formatter:function(param){
return param.data.trueName; //自定义节点的显示名称,默认是name
},
fontSize: 10,
fontStyle: '600',
}
},
lineStyle: {
normal: {
opacity: 0.9,
width: 0.5,
curveness: 0
}
}
}]
};
myChart.setOption(option, true);
myChart.hideLoading();
myChart.on('click', function (params) {
var nodeId1, nodeId2;
if(params.dataType === 'edge'){ //edge表示点击的是线
//在link中已经保存好source和target 包括target的id和targetId的id
nodeId1 = params.data.source;
if (params.data.target.split("-").length > 2){
nodeId2 = params.data.target.split("-")[1];
} else {
nodeId2 = params.data.target;
}
var targetId = params.data.targetId;
var personCodeNumOne = personIDThis;
var queryJson = {
"queryStr":nodeId1 + '-' + nodeId2,
"queryStrCode":personCodeNumOne + '-' + targetId,
"coNum":2,
"pageNum":0,
"pageSize":5,
"queryType":"person"
};
$('#textDiv').html('<h5>' + nodeId1 + ' 与 ' + nodeId2 + ' 的合作情况：' + '</h5>');
getAllCData(queryJson);
$('#cooRDiv').css('display', 'block');
}
else if(params.dataType === 'node'){//node表示点击的是节点
if(params.data.group != '0'){
var win = window.open( "/baseQuery/personDetail/" + params.data.trueId );
if ( win == null )
window.alert( "请不要启用弹出式窗口拦截" );
}
}
});
//获取group为0的信息,表示直接与中间点合作的人员
var groupFirst = [];
for (var c = 1; c < dataPre.length; c++) {
if (dataPre[c].group == 0){
groupFirst.push(dataPre[c]);
}
}
var cooNum = groupFirst.length;
var analyseResultContent = '<div class="row"><div class="col-md-12">';
if (groupFirst.length === 1) {
analyseResultContent += '<p><span style="font-size: larger; color: #2e6da4">' + $('#personName').val().split('，')[0] + '</span> 和任何科研人员都没有过合作。</p>';
}
else {
var maxPersonName = '';
var maxPersonNum = 0;
for (var m = 0; m < cooNum; m++) {
if (groupFirst[m].count >= maxPersonNum) {
maxPersonName = groupFirst[m].to.split("-")[1];
maxPersonNum = groupFirst[m].count;
}
}
var minPersonName = '';
var minPersonNum = 1;
for (m = 0; m < cooNum; m++) {
if (groupFirst[m].count <= minPersonNum) {
minPersonName = groupFirst[m].to.split("-")[1];
minPersonNum = groupFirst[m].count;
}
}
analyseResultContent += '<p><span style="font-size: larger; color: #2e6da4">' + personName + '</span> 与 <span style="font-size: larger; color: #ac2925">' + cooNum + '</span> 个科研人员有合作关系；';
analyseResultContent += '与 <span style="font-size: larger; color: #843534">' + maxPersonName + '</span> 关系最为紧密，合作关系数量为 <span style="font-size: larger; color: #ac2925">' + maxPersonNum + '</span>；';
analyseResultContent += '与 <span style="font-size: larger; color: #02c66c">' + minPersonName + '</span> 关系最为稀疏，合作关系数量为 <span style="font-size: larger; color: #ac2925">' + minPersonNum + '</span>；</p>';
analyseResultContent += '<p>鼠标放在节点上可查看该人员参与分析的科研人员数量，放在连线上可查看两个人员的关系数量值。</p>';
}
analyseResultContent += '</div></div>';
$('#personNetworkAnalyseContent').html(analyseResultContent);
}
}好了，所有代码就是如上
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
