首先在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;})()}]}) }

?

總結

以上是生活随笔為你收集整理的JS之使用Echarts画出人际关系图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。