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