拓撲圖（echarts）

引入的echarts文件是echarts2.0

function tuoFn() {
    $.ajax({
        url:url+'XX',
        type:'post',
        data:{
            groupids:groupids,
            auth:auth,
        },
        success:function (res) {
            // console.log(res.data)
            var newData=res.data;
            var arrji0=[];
            var arrji1=[];
            if(newData!=null){
                $.each(newData,function (k,v) {
                    if(JSON.stringify(v)=="{}"){
                        arrji0.push({"symbol":"image://./image/tuopu1.png","category":1,"name":k,"value":1});
                    }else{
                        $.each(v,function (t,n) {
                            if(n.length==0){
                                arrji0.push({"symbol":"image://./image/tuopu1.png","category":1,"name":k,"value":1});
                            }else{
                                arrji0.push({"symbol":"image://./image/tuopu2.png","category":1,"name":k,"value":1});
                            }
                            // 鏈接關係
                            for(var i=0;i<n.length;i++){
                                arrji0.push({"symbol":"image://./image/tuopu2.png","category":1,"name":n[i],"value":1});
                                arrji1.push({"source":k,"target":n[i]})
                            }
                        })
                    }
                });
            }
            // 基於準備好的dom，初始化echarts圖表
            var myChart = echarts.init(document.getElementById('main'));
            option = {
                tooltip : {
                    trigger: 'item',
                    // formatter: '{a} : {b}'
                    backgroundColor:'#48b0b7',
                    padding:[20,10,20,10],
                    formatter: function(datas) {
                        // var res = '<div style="font-size: 18px"><span>名稱:'+datas[1] + '</span><br/><span style="line-height:24px;">CPU:cdscdsc</span><span style="line-height:24px;">網絡流量:cdscdsc</span>' +
                        //     '<br/><span>硬盤:cdscdsc</span><span>內存:cdscdsc</span></div>';
                        var res = '<div style="font-size: 18px"><span>名稱:'+datas[1] + '</span>';
                        return res;
                    }
                },
                legend: {
                    x: 'left',
                    data:['','']
                },
                series : [
                    {
                        type:'force',
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true,
                                    textStyle: {
                                        color: '#333'
                                    }
                                },
                                nodeStyle : {
                                    brushType : 'both',
                                    borderColor : 'rgba(255,215,0,0.4)',
                                    borderWidth : 1
                                },
                            },
                            emphasis: {
                                linkStyle : {}
                            }
                        },
                        symbolSize:[70,30],
                        minRadius : 50,//頂點數據映射成圓半徑後的最小半徑
                        maxRadius : 25,//頂點數據映射成圓半徑後的最大半徑
                        gravity: 2.2,//向心力係數，係數越大則節點越往中心靠攏
                        scaling: 1.8,//佈局縮放係數，並不徹底精確, 效果跟佈局大小相似
                        roam: 'move',
                        // draggable:false,//	節點是否能被拖拽
                        nodes:arrji0,//全部所在的設備
                        links :arrji1,//鏈接關係
                    }
                ]
            },
                // 爲echarts對象加載數據
                myChart.setOption(option);
            window.onresize=myChart.resize;
        },error:function (err) {
            console.log(err)
        }
        
    })
    
}複製代碼