使用echarts画出人际关系图

版权声明：本文为博主原创文章，欢迎转载，转载请注明作者、原文超链接 ，博主地址：https://blog.csdn.net/qq_31122833。 https://blog.csdn.net/qq_31122833/article/details/82383823

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