首先在html中写一个壳子,通过ajax获取数据后再向壳子中注入数据即可
1、html代码如下:
<div class="strip_out">
<div class="strip" id="interpersonalRelationship"></div>
</div>
2、JS代码如下:
数据往哪组装呢:根据id
var interpersonalRelationship=echarts.init(document.getElementById("interpersonalRelationship"),"macarons");
interpersonalRelationship.showLoading(); //显示缓冲遮盖层
$.ajax({
url: path+"/web/api/index/getStudentRelationBysno",
type: "post",
data: {
sno:'${sno}',
accessToken:'${accessToken}'
},
success: function(msg){
if(msg.type=="success"){
interpersonalRelationshipResult(msg);
}else{
interpersonalRelationshipResult(msg);
}
}
});
function interpersonalRelationshipResult(result) {
interpersonalRelationship.hideLoading(); //隐藏遮盖层
interpersonalRelationship.setOption({
title: { text: '社交关系图' },
tooltip: {
formatter: function (x) {
return x.data.des;
}
},
toolbox: {
show: true,
feature: {
saveAsImage: { show: true }
}
},
series: [
{
type: 'graph',
layout: 'force',
symbolSize: 80,
roam: true,
edgeSymbol: ['circle', 'arrow'],
edgeSymbolSize: [4, 10],
edgeLabel: {
normal: {
textStyle: {
fontSize: 18
}
}
},
force: {
repulsion: 2500,
edgeLength: [10, 50]
},
draggable: true,
itemStyle: {
normal: {
color: '#4b565b'
}
},
lineStyle: {
normal: {
width: 2,
color: '#4b565b'
}
},
label: {
normal: {
show: true,
textStyle: {
}
}
},
data:
(function(){
var arr=[];
for(var i=0;i<result.data.length;i++){
if(i==result.data.length-1){
arr.push({
name:result.data[i].name1,
des:result.data[i].sno1,
symbolSize:result.data[i].indexCount+40,
itemStyle: {
normal: {
color: 'red'
}
}
});
}else{
arr.push({
name:result.data[i].name2,
des:result.data[i].sno2,
symbolSize:result.data[i].indexCount*5+30
});
}
}
return arr;
})(),
links:
(function(){
var arr=[];
for(var i=0;i<result.data.length-1;i++){
arr.push({
source:result.data[i].name1,
target:result.data[i].name2,
name:'同学',
des:result.data[i].indexCount+'次'
});
}
return arr;
})()
}
]
})
}