JS之使用echarts畫出人際關係圖
阿新 • • 發佈:2019-02-19
首先在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; })() } ] }) }