echarts拓撲圖(graph，力導向布局圖)

 

echarts連接：https://gallery.echartsjs.com/editor.html?c=xCLEj67T3H

講解：https://www.cnblogs.com/koala2016/archive/2016/12/01/6123003.html

代碼：

jsp：

<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script>
<div id="resourceShow" style="width:100%; height: 92%;"></div>

 

js1(比js2省去了node的遍歷添加屬性步驟)：

$(function () {
    getChart();
})

function getChart() {
        /*var nodes = [{
            name: '服務器',
        },
        {
            name: '存儲設備1',
            img: 'data-1547632686885-o5Rfi3tyk.png'
        },
        {
            name: '存儲設備2',
        },
        {
            name: '防火牆',
        },
        {
            name: '網絡設備1',
        },
        {
            name: '網絡設備2',
        }
    ]
    var links = [{
        source: '存儲設備2',
        target: '服務器',
        name: '數據傳輸'
    }, {
        source: '存儲設備1',
        target: '服務器',
        name: '數據傳輸'
    },
        {
            source: '服務器',
            target: '防火牆',
            name: '訪問'
        },
        {
            source: '防火牆',
            target: '網絡設備1',
            name: '訪問'
        },
        {
            source: '防火牆',
            target: '網絡設備2',
            name: '訪問'
        }
    ]*/
    //把點換成圖片在文件里搜索img
    var myChart = echarts.init(document.getElementById('resourceShow'));
    //數據1
    var nodes = new Array();
    var links = new Array();
    //數據2，可以比數據1多設置一些屬性
    var nodess = new Array();
    var linkss = new Array();
    var id = 0;                 //通過ID保證點不重復和連接關系
    var zones = new Array();    //區域的點ID
    var clusters = new Array(); //集群的點ID
    var hosts = new Array();    //宿主機的點ID
    //獲取區域，唯一
    $.ajax({
        url:"resource/getChartZoneData",
        dataType:"json",
        type:"POST",
        async: false,
        beforeSend:function(){
            // layerIndex = showMessage("配置中....",0, false);
        },
        success:function(data){
            data = eval(data.info);
            var itemStyle = {
                normal: {
                    color: '#09022C',
                }
            };
            nodes.push({"id":id,"name":data[0].name,"category":0,"symbol":"diamond",
                        "symbolSize":80,"type":"zone","itemStyle":itemStyle});
            zones.push(id);
            id = id + 1;
        },
        error:function(e){
            showAlert("對不起，獲取區域出錯了！");
            return;
        }
    });
    //獲取集群
    $.ajax({
        url:"resource/getChartClusterData",
        dataType:"json",
        type:"POST",
        async: false,
        beforeSend:function(){
            // layerIndex = showMessage("配置中....",0, false);
        },
        success:function(data) {
            if(!isEmpty(data.info)){
                data = eval(data.info);
                for (var i = 0; i < data.length; i++) {
                    var itemStyle = {
                        normal: {
                            color: '#040193',
                        }
                    };
                    nodes.push({"id":id,"name": data[i].name,"category":1,"symbol":"rect",
                                "symbolSize":50,"type":"cluster","itemStyle":itemStyle});
                    links.push({"source": zones[0], "target": id});
                    clusters.push(id);
                    id = id + 1;
                    //獲取宿主
                    $.ajax({
                        url: "resource/getChartHostData",
                        dataType: "json",
                        type: "POST",
                        data: {"paramsMap.clusterId": data[i].id},
                        async: false,
                        beforeSend: function () {
                            // layerIndex = showMessage("配置中....",0, false);
                        },
                        success: function (cdata) {
                            if (!isEmpty(cdata.info)) {
                                cdata = eval(cdata.info);
                                for (var j = 0; j < cdata.length; j++) {
                                    var itemStyle = {
                                        normal: {
                                            color: '#073CFE',
                                        }
                                    };
                                    nodes.push({"id":id,"name": cdata[j].name,"category":2,"symbol":"roundRect","symbolSize":40,"type":"host",
                                                "hostCpuCoreNum": cdata[j].hostCpuCoreNum,
                                                "hostCpuUsed": cdata[j].hostCpuUsed,
                                                "hostCpuLost": cdata[j].hostCpuLost,
                                                "hostRamSize": cdata[j].hostRamSize,"hostRamUsedSize": cdata[j].hostRamUsedSize,
                                                "hostRamAvailableSize": cdata[j].hostRamAvailableSize,"hostRamUsed": cdata[j].hostRamUsed,
                                                "hostDiskTotalCapacityKB": cdata[j].hostDiskTotalCapacityKB,"hostDiskUsedKB": cdata[j].hostDiskUsedKB,
                                                "hostDiskAvailableKB": cdata[j].hostDiskAvailableKB,"hostDiskUsed": cdata[j].hostDiskUsed,
                                                "roleName":cdata[j].roleName,"businessCnt":cdata[j].businessCnt,"itemStyle":itemStyle});
                                    links.push({"source": clusters[i], "target": id});
                                    hosts.push(id);
                                    id = id + 1;
                                    //獲取vm(雲主機)
                                    $.ajax({
                                        url: "resource/getChartVmData",
                                        dataType: "json",
                                        type: "POST",
                                        data: {"paramsMap.hostId": cdata[j].id},
                                        async: false,
                                        beforeSend: function () {
                                            // layerIndex = showMessage("配置中....",0, false);
                                        },
                                        success: function (vdata) {
                                            if (!isEmpty(vdata.info)) {
                                                vdata = eval(vdata.info);
                                                for (var k = 0; k < vdata.length; k++) {
                                                    var itemStyle = {
                                                        normal: {
                                                            color: '#0065C2',
                                                        }
                                                    };
                                                    nodes.push({"id":id,"name": vdata[k].name,"category":3,"symbol":"circle","symbolSize":30,"type":"vm",
                                                                "comment":vdata[k].comment,"systemType":vdata[k].systemType,
                                                                "applicationName":vdata[k].applicationName,
                                                                "vmCpuCoreNum":vdata[k].vmCpuCoreNum,"vmRam":vdata[k].vmRam,
                                                                "vmTotalDiskCapacity":vdata[k].vmTotalDiskCapacity,
                                                                "instanceName":vdata[k].instanceName,"state":vdata[k].state,"itemStyle":itemStyle});
                                                    links.push({"source": hosts[j], "target": id});
                                                    id = id + 1;
                                                }
                                            }
                                        },
                                        error: function (e) {
                                            showAlert("對不起，獲取雲主機出錯了！");
                                            return;
                                        }
                                    });
                                }
                            }
                        },
                        error: function (e) {
                            showAlert("對不起，獲取宿主機出錯了！");
                            return;
                        }
                    });
                }
            }
        },
        error:function(e){
            showAlert("對不起，獲取集群出錯了！");
            return;
        }
    });
    //線條配置
    for (var i = 0; i < links.length; i++) {
        var link = {
            source: links[i].source,
            target: links[i].target,
            label: {
                normal: {
                    show: false, //線條上是否有字
                    formatter: links[i].name
                }
            },
            lineStyle: {
                normal: {
                    //color: '#17FFF3'
                }
            }
        }
        linkss.push(link);
    }
    option = {
        //backgroundColor: '#000F1F',
        tooltip: {//彈窗
            trigger: 'item',
            formatter: function(params) {
                //根據值是否為空判斷是點還是線段
                if(!isEmpty(params.data.source)){//如果鼠標移動到線條

                }else{//如果鼠標移動到點
                    if(params.data.type == "zone"){
                        return params.data.name + "：<br>" + "&nbsp;&nbsp;&nbsp;&nbsp;" + "配置狀態：啟用";
                    }else if(params.data.type == "cluster"){
                        return params.data.name + "：<br>" + "&nbsp;&nbsp;&nbsp;&nbsp;" + "配置狀態：啟用";
                    }else if(params.data.type == "host"){
                        var msg = "";
                        msg += params.data.name + "：<br>" + "&nbsp;&nbsp;&nbsp;&nbsp;" + "配置狀態：啟用" + "<br>";
                        if(!isEmpty(params.data.roleName)){
                            msg += "&nbsp;&nbsp;&nbsp;&nbsp;" + "宿主角色：" + params.data.roleName + "<br>";
                        }
                        msg += "&nbsp;&nbsp;&nbsp;&nbsp;" + "業務數量：" + params.data.businessCnt + "<br>";
                        if(!isEmpty(params.data.hostCpuCoreNum)){
                            msg += "&nbsp;&nbsp;&nbsp;&nbsp;" + "CPU核心數：" + params.data.hostCpuCoreNum + "核<br>";
                        }
                        if(!isEmpty(params.data.hostRamSize)){
                            msg += "&nbsp;&nbsp;&nbsp;&nbsp;" + "內存總容量：" + (params.data.hostRamSize/1024/1024).toFixed(2) + "GB<br>";
                        }
                        if(!isEmpty(params.data.hostRamUsedSize)){
                            msg += "&nbsp;&nbsp;&nbsp;&nbsp;" + "內存已用量：" + (params.data.hostRamUsedSize/1024/1024).toFixed(2) + "GB<br>";
                        }
                        if(!isEmpty(params.data.hostRamAvailableSize)){
                            msg += "&nbsp;&nbsp;&nbsp;&nbsp;" + "內存可用量：" + (params.data.hostRamAvailableSize/1024/1024).toFixed(2) + "GB<br>";
                        }
                        if(!isEmpty(params.data.hostRamUsed)){
                            msg += "&nbsp;&nbsp;&nbsp;&nbsp;" + "內存占用百分比：" + (params.data.hostRamUsed*100).toFixed(2) + "%<br>";
                        }
                        if(!isEmpty(params.data.hostDiskTotalCapacityKB)){
                            msg += "&nbsp;&nbsp;&nbsp;&nbsp;" + "磁盤總容量：" + (params.data.hostDiskTotalCapacityKB/1024/1024).toFixed(2) + "GB<br>";
                        }
                        if(!isEmpty(params.data.hostDiskUsedKB)){
                            msg += "&nbsp;&nbsp;&nbsp;&nbsp;" + "磁盤已用量：" + (params.data.hostDiskUsedKB/1024/1024).toFixed(2) + "GB<br>";
                        }
                        if(!isEmpty(params.data.hostDiskAvailableKB)){
                            msg += "&nbsp;&nbsp;&nbsp;&nbsp;" + "硬盤可用量：" + (params.data.hostDiskAvailableKB/1024/1024).toFixed(2) + "GB<br>";
                        }
                        if(!isEmpty(params.data.hostDiskUsed)){
                            msg += "&nbsp;&nbsp;&nbsp;&nbsp;" + "硬盤可用量：" + (params.data.hostDiskAvailableKB/1024/1024).toFixed(2) + "GB<br>";
                        }
                        if(!isEmpty(params.data.hostDiskUsed)){
                            msg += "&nbsp;&nbsp;&nbsp;&nbsp;" + "磁盤占用百分比：" + (params.data.hostDiskUsed*100).toFixed(2) + "%<br>";
                        }
                        return msg;
                    }else if(params.data.type == "vm"){
                        var msg = "";
                        msg += params.data.name + "：<br>" + "&nbsp;&nbsp;&nbsp;&nbsp;" + "配置狀態：啟用" + "<br>";
                        if(!isEmpty(params.data.instanceName)){
                            msg += "&nbsp;&nbsp;&nbsp;&nbsp;" + "實例名稱：" + params.data.instanceName + "<br>";
                        }
                        if(!isEmpty(params.data.comment)){
                            msg += "&nbsp;&nbsp;&nbsp;&nbsp;" + "說明：" + params.data.comment + "<br>";
                        }
                        if(!isEmpty(params.data.applicationName)){
                            msg += "&nbsp;&nbsp;&nbsp;&nbsp;" + "歸屬應用：" + params.data.applicationName + "<br>";
                        }
                        if(!isEmpty(params.data.vmCpuCoreNum)){
                            msg += "&nbsp;&nbsp;&nbsp;&nbsp;" + "CPU核心數：" + params.data.vmCpuCoreNum + "核<br>";
                        }
                        if(!isEmpty(params.data.vmRam)){
                            msg += "&nbsp;&nbsp;&nbsp;&nbsp;" + "內存大小：" + (params.data.vmRam/1024/1024).toFixed(2) + "GB<br>";
                        }
                        if(!isEmpty(params.data.vmTotalDiskCapacity)){
                            msg += "&nbsp;&nbsp;&nbsp;&nbsp;" + "磁盤總容量：" + (params.data.vmTotalDiskCapacity/1024/1024).toFixed(2) + "GB<br>";
                        }
                        if(!isEmpty(params.data.systemType)){
                            msg += "&nbsp;&nbsp;&nbsp;&nbsp;" + "系統：" + params.data.systemType + "<br>";
                        }
                        if(!isEmpty(params.data.state)){
                            msg += "&nbsp;&nbsp;&nbsp;&nbsp;" + "電源狀態："  + params.data.state + "<br>";
                        }
                        return msg;
                    }

                }
            }
        },
        color:['#09022C',
            '#040193',
            '#073CFE',
            '#0065C2'],
        legend: { //=========小圖標，圖表控件
            data: [{
                    name: '區域',
                    icon: 'diamond' //'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
                    //icon:'image://./images/icon1.png'  //如果用圖片img，格式為'image://+icon文件地址'，其中image::后的//不能省略
                },
                {
                    name: '集群',
                    icon: 'rect'
                }, {
                    name: '宿主機',

                    icon: 'roundRect'
                }, {
                    name: '雲主機',
                    icon: 'circle'
                }
            ]
        },
        series : [ {//圖片配置
            type : 'graph', //關系圖
            //name : "拓撲圖", //系列名稱，用於tooltip的顯示，legend 的圖例篩選，在 setOption 更新數據和配置項時用於指定對應的系列。
            layout : 'force', //圖的布局，類型為力導圖，'circular' 采用環形布局，見示例 Les Miserables
            legendHoverLink : true,//是否啟用圖例 hover(懸停) 時的聯動高亮。
            hoverAnimation : true,//是否開啟鼠標懸停節點的顯示動畫
            coordinateSystem : null,//坐標系可選
            xAxisIndex : 0, //x軸坐標 有多種坐標系軸坐標選項
            yAxisIndex : 0, //y軸坐標
            force: {
                repulsion: 750,//相距距離
                edgeLength: [150, 200],
                layoutAnimation: true
            },
            /*force : { //力引導圖基本配置
                //initLayout: ,//力引導的初始化布局，默認使用xy軸的標點
                repulsion : 200,//節點之間的斥力因子。支持數組表達斥力范圍，值越大斥力越大。
                gravity : 0.03,//節點受到的向中心的引力因子。該值越大節點越往中心點靠攏。
                edgeLength :80,//邊的兩個節點之間的距離，這個距離也會受 repulsion。[10, 50] 。值越小則長度越長
                layoutAnimation : true
                //因為力引導布局會在多次迭代后才會穩定，這個參數決定是否顯示布局的迭代動畫，在瀏覽器端節點數據較多（>100）的時候不建議關閉，布局過程會造成瀏覽器假死。
            },*/
            roam : true,//是否開啟鼠標縮放和平移漫游。默認不開啟。如果只想要開啟縮放或者平移，可以設置成 'scale' 或者 'move'。設置成 true 為都開啟
            nodeScaleRatio : 0.6,//鼠標漫游縮放時節點的相應縮放比例，當設為0時節點不隨着鼠標的縮放而縮放
            draggable : true,//節點是否可拖拽，只在使用力引導布局的時候有用。
            focusNodeAdjacency : true,//是否在鼠標移到節點上的時候突出顯示節點以及節點的邊和鄰接節點。
            //symbol:'roundRect',//關系圖節點標記的圖形。ECharts 提供的標記類型包括 'circle'(圓形), 'rect'（矩形）, 'roundRect'（圓角矩形）, 'triangle'（三角形）, 'diamond'（菱形）, 'pin'（大頭針）, 'arrow'（箭頭）  也可以通過 'image://url' 設置為圖片，其中 url 為圖片的鏈接。'path:// 這種方式可以任意改變顏色並且抗鋸齒
            //symbolSize:10 ,//也可以用數組分開表示寬和高，例如 [20, 10] 如果需要每個數據的圖形大小不一樣，可以設置為如下格式的回調函數：(value: Array|number, params: Object) => number|Array
            //symbolRotate:,//關系圖節點標記的旋轉角度。注意在 markLine 中當 symbol 為 'arrow' 時會忽略 symbolRotate 強制設置為切線的角度。
            //symbolOffset:[0,0],//關系圖節點標記相對於原本位置的偏移。[0, '50%']
            edgeSymbol : [ 'none', 'arrow' ],//邊兩端的標記類型，可以是一個數組分別指定兩端，也可以是單個統一指定。默認不顯示標記，常見的可以設置為箭頭，如下：edgeSymbol: ['circle', 'arrow']
            symbolSize: 50,//圖形大小
            edgeSymbolSize : 10,//邊兩端的標記大小，可以是一個數組分別指定兩端，也可以是單個統一指定。
            itemStyle : {//===============圖形樣式，有 normal 和 emphasis 兩個狀態。normal 是圖形在默認狀態下的樣式；emphasis 是圖形在高亮狀態下的樣式，比如在鼠標懸浮或者圖例聯動高亮時。
                normal : { //默認樣式
                    label : {
                        show : true
                    },
                    //borderType : 'solid', //圖形描邊類型，默認為實線，支持 'solid'（實線）, 'dashed'(虛線), 'dotted'（點線）。
                    //borderColor : 'rgba(255,215,0,0.4)', //設置圖形邊框為淡金色,透明度為0.4
                    //borderWidth : 2, //圖形的描邊線寬。為 0 時無描邊。
                    // opacity : 1 // 圖形透明度。支持從 0 到 1 的數字，為 0 時不繪制該圖形。默認0.5

                },
                emphasis : {//高亮狀態

                }
            },
            lineStyle : { //==========關系邊的公用線條樣式。
                normal : {
                    color : '#31354B',
                    width : '1',
                    type : 'solid', //線的類型 'solid'（實線）'dashed'（虛線）'dotted'（點線）
                    curveness : 0, //線條的曲線程度，從0到1
                    opacity : 1
                    // 圖形透明度。支持從 0 到 1 的數字，為 0 時不繪制該圖形。默認0.5
                },
                emphasis : {//高亮狀態

                }
            },
            label : { //=============圖形上的文本標簽
                normal : {
                    show : true,//是否顯示標簽。
                    position : 'bottom',//標簽的位置。['50%', '50%'] [x,y]   'inside'
                    textStyle : { //標簽的字體樣式
                        color : '#2D2F3B', //字體顏色
                        fontStyle : 'normal',//文字字體的風格 'normal'標准 'italic'斜體 'oblique' 傾斜
                        fontWeight : 'bolder',//'normal'標准'bold'粗的'bolder'更粗的'lighter'更細的或100 | 200 | 300 | 400...
                        fontFamily : 'sans-serif', //文字的字體系列
                        fontSize : 12, //字體大小
                    }
                },
                emphasis : {//高亮狀態

                }
            },
            edgeLabel : {//==============線條的邊緣標簽
                normal : {
                    show : false
                },
                emphasis : {//高亮狀態

                }
            },
            //別名為nodes   name:影響圖形標簽顯示,value:影響選中后值得顯示,category:所在類目的index,symbol:類目節點標記圖形,symbolSize:10圖形大小
            //label:標簽樣式。
            //數據
            data : nodes,
            links : links,//edges是其別名代表節點間的關系數據。
            categories: [ //symbol name：用於和 legend 對應以及格式化 tooltip 的內容。 label有效
                {
                    name: '區域',
                    symbol: 'diamond',
                    label: { //標簽樣式
                    }
                }, {
                    name: '集群',
                    symbol: 'rect'
                }, {
                    name: '宿主機',
                    symbol: 'roundRect'
                }, {
                    name: '雲主機',
                    symbol: 'circle'
                }
            ]
        } ]
    };

    // 使用剛指定的配置項和數據顯示圖表。
    myChart.setOption(option);
}
//判斷字符是否為空的方法
function isEmpty(obj){
    if(typeof obj == "undefined" || obj == null || obj == ""){
        return true;
    }else{
        return false;
    }
}
//判斷數組是否有重復的
function in_array(stringToSearch, arrayToSearch) {
    for (s = 0; s < arrayToSearch.length; s++) {
        thisEntry = arrayToSearch[s].toString();
        if (thisEntry == stringToSearch) {
            return true;
        }
    }
    return false;
}

js2:

$(function () {
    getChart();
})

function getChart() {
        /*var nodes = [{
            name: '服務器',
        },
        {
            name: '存儲設備1',
            img: 'data-1547632686885-o5Rfi3tyk.png'
        },
        {
            name: '存儲設備2',
        },
        {
            name: '防火牆',
        },
        {
            name: '網絡設備1',
        },
        {
            name: '網絡設備2',
        }
    ]
    var links = [{
        source: '存儲設備2',
        target: '服務器',
        name: '數據傳輸'
    }, {
        source: '存儲設備1',
        target: '服務器',
        name: '數據傳輸'
    },
        {
            source: '服務器',
            target: '防火牆',
            name: '訪問'
        },
        {
            source: '防火牆',
            target: '網絡設備1',
            name: '訪問'
        },
        {
            source: '防火牆',
            target: '網絡設備2',
            name: '訪問'
        }
    ]*/
    //把點換成圖片在文件里搜索img
    var myChart = echarts.init(document.getElementById('resourceShow'));
    //數據1
    var nodes = new Array();
    var links = new Array();
    //數據2，可以比數據1多設置一些屬性
    var nodess = new Array();
    var linkss = new Array();
    var id = 0;                 //通過ID保證點不重復和連接關系
    var zones = new Array();    //區域的點ID
    var clusters = new Array(); //集群的點ID
    var hosts = new Array();    //宿主機的點ID
    //獲取區域，唯一
    $.ajax({
        url:"resource/getChartZoneData",
        dataType:"json",
        type:"POST",
        async: false,
        beforeSend:function(){
            // layerIndex = showMessage("配置中....",0, false);
        },
        success:function(data){
            data = eval(data.info);
            var itemStyle = {
                normal: {
                    color: '#09022C',
                }
            };
            nodes.push({"id":id,"name":data[0].name,"category":0,"symbol":"diamond",
                        "symbolSize":80,"type":"zone","itemStyle":itemStyle});
            zones.push(id);
            id = id + 1;
        },
        error:function(e){
            showAlert("對不起，獲取區域出錯了！");
            return;
        }
    });
    //獲取集群
    $.ajax({
        url:"resource/getChartClusterData",
        dataType:"json",
        type:"POST",
        async: false,
        beforeSend:function(){
            // layerIndex = showMessage("配置中....",0, false);
        },
        success:function(data) {
            if(!isEmpty(data.info)){
                data = eval(data.info);
                for (var i = 0; i < data.length; i++) {
                    var itemStyle = {
                        normal: {
                            color: '#040193',
                        }
                    };
                    nodes.push({"id":id,"name": data[i].name,"category":1,"symbol":"rect",
                                "symbolSize":50,"type":"cluster","itemStyle":itemStyle});
                    links.push({"source": zones[0], "target": id});
                    clusters.push(id);
                    id = id + 1;
                    //獲取宿主
                    $.ajax({
                        url: "resource/getChartHostData",
                        dataType: "json",
                        type: "POST",
                        data: {"paramsMap.clusterId": data[i].id},
                        async: false,
                        beforeSend: function () {
                            // layerIndex = showMessage("配置中....",0, false);
                        },
                        success: function (cdata) {
                            if (!isEmpty(cdata.info)) {
                                cdata = eval(cdata.info);
                                for (var j = 0; j < cdata.length; j++) {
                                    var itemStyle = {
                                        normal: {
                                            color: '#073CFE',
                                        }
                                    };
                                    nodes.push({"id":id,"name": cdata[j].name,"category":2,"symbol":"roundRect","symbolSize":40,"type":"host",
                                                "hostCpuCoreNum": cdata[j].hostCpuCoreNum,
                                                "hostCpuUsed": cdata[j].hostCpuUsed,
                                                "hostCpuLost": cdata[j].hostCpuLost,
                                                "hostRamSize": cdata[j].hostRamSize,"hostRamUsedSize": cdata[j].hostRamUsedSize,
                                                "hostRamAvailableSize": cdata[j].hostRamAvailableSize,"hostRamUsed": cdata[j].hostRamUsed,
                                                "hostDiskTotalCapacityKB": cdata[j].hostDiskTotalCapacityKB,"hostDiskUsedKB": cdata[j].hostDiskUsedKB,
                                                "hostDiskAvailableKB": cdata[j].hostDiskAvailableKB,"hostDiskUsed": cdata[j].hostDiskUsed,
                                                "roleName":cdata[j].roleName,"businessCnt":cdata[j].businessCnt,"itemStyle":itemStyle});
                                    links.push({"source": clusters[i], "target": id});
                                    hosts.push(id);
                                    id = id + 1;
                                    //獲取vm(雲主機)
                                    $.ajax({
                                        url: "resource/getChartVmData",
                                        dataType: "json",
                                        type: "POST",
                                        data: {"paramsMap.hostId": cdata[j].id},
                                        async: false,
                                        beforeSend: function () {
                                            // layerIndex = showMessage("配置中....",0, false);
                                        },
                                        success: function (vdata) {
                                            if (!isEmpty(vdata.info)) {
                                                vdata = eval(vdata.info);
                                                for (var k = 0; k < vdata.length; k++) {
                                                    var itemStyle = {
                                                        normal: {
                                                            color: '#0065C2',
                                                        }
                                                    };
                                                    nodes.push({"id":id,"name": vdata[k].name,"category":3,"symbol":"circle","symbolSize":30,"type":"vm",
                                                                "comment":vdata[k].comment,"systemType":vdata[k].systemType,
                                                                "applicationName":vdata[k].applicationName,
                                                                "vmCpuCoreNum":vdata[k].vmCpuCoreNum,"vmRam":vdata[k].vmRam,
                                                                "vmTotalDiskCapacity":vdata[k].vmTotalDiskCapacity,
                                                                "instanceName":vdata[k].instanceName,"state":vdata[k].state,"itemStyle":itemStyle});
                                                    links.push({"source": hosts[j], "target": id});
                                                    id = id + 1;
                                                }
                                            }
                                        },
                                        error: function (e) {
                                            showAlert("對不起，獲取雲主機出錯了！");
                                            return;
                                        }
                                    });
                                }
                            }
                        },
                        error: function (e) {
                            showAlert("對不起，獲取宿主機出錯了！");
                            return;
                        }
                    });
                }
            }
        },
        error:function(e){
            showAlert("對不起，獲取集群出錯了！");
            return;
        }
    });
    //節點配置    多了itemStyle屬性，可以在上面加入，請看js1
    for (var j = 0; j < nodes.length; j++) {
        if(nodes[j].type == "host"){
            var node = {
                id: nodes[j].id,
                name: nodes[j].name,
                category:nodes[j].category,
                symbol:nodes[j].symbol,
                //symbol: 'image://./images/' + nodes[j].img,//圖片路徑
                symbolSize:nodes[j].symbolSize,
                type: nodes[j].type,
                //cpu
                hostCpuCoreNum: nodes[j].hostCpuCoreNum,
                hostCpuUsed: nodes[j].hostCpuUsed,
                hostCpuLost: nodes[j].hostCpuLost,
                //內存
                hostRamSize: nodes[j].hostRamSize,
                hostRamUsedSize: nodes[j].hostRamUsedSize,
                hostRamAvailableSize: nodes[j].hostRamAvailableSize,
                hostRamUsed: nodes[j].hostRamUsed,
                //磁盤
                hostDiskTotalCapacityKB: nodes[j].hostDiskTotalCapacityKB,
                hostDiskUsedKB: nodes[j].hostDiskUsedKB,
                hostDiskAvailableKB: nodes[j].hostDiskAvailableKB,
                hostDiskUsed: nodes[j].hostDiskUsed,
                roleName: nodes[j].roleName,
                businessCnt: nodes[j].businessCnt,
                itemStyle: {
                    normal: {
                        //color: '#12b5d0',
                    }
                }
            }
        }else if(nodes[j].type == "vm"){
            var node = {
                id: nodes[j].id,
                name: nodes[j].name,
                category:nodes[j].category,
                symbol:nodes[j].symbol,
                //symbol: 'image://./images/' + nodes[j].img,//圖片路徑
                symbolSize:nodes[j].symbolSize,
                type: nodes[j].type,
                comment: nodes[j].comment,
                applicationName: nodes[j].applicationName,
                vmCpuCoreNum: nodes[j].vmCpuCoreNum,
                vmRam: nodes[j].vmRam,
                vmTotalDiskCapacity: nodes[j].vmTotalDiskCapacity,
                systemType: nodes[j].systemType,
                instanceName: nodes[j].instanceName,
                state: nodes[j].state,
                itemStyle: {
                    normal: {
                        //color: '#12b5d0',
                    }
                }
            }
        }else{
            var node = {
                id: nodes[j].id,
                name: nodes[j].name,
                category:nodes[j].category,
                symbol:nodes[j].symbol,
                //symbol: 'image://./images/' + nodes[j].img,//圖片路徑
                symbolSize:nodes[j].symbolSize,
                type: nodes[j].type,
                itemStyle: {
                    normal: {
                        //color: '#12b5d0',
                    }
                }
            }
        }
        nodess.push(node);
    }
    //線條配置
    for (var i = 0; i < links.length; i++) {
        var link = {
            source: links[i].source,
            target: links[i].target,
            label: {
                normal: {
                    show: false, //線條上是否有字
                    formatter: links[i].name
                }
            },
            lineStyle: {
                normal: {
                    //color: '#17FFF3'
                }
            }
        }
        linkss.push(link);
    }
    option = {
        //backgroundColor: '#000F1F',
        tooltip: {//彈窗
            trigger: 'item',
            formatter: function(params) {
                //根據值是否為空判斷是點還是線段
                if(!isEmpty(params.data.source)){//如果鼠標移動到線條
                    return params.name;
                }else{//如果鼠標移動到點
                    if(params.data.type == "zone"){
                        return params.data.name + "：<br>" + "&nbsp;&nbsp;&nbsp;&nbsp;" + "配置狀態：啟用";
                    }else if(params.data.type == "cluster"){
                        return params.data.name + "：<br>" + "&nbsp;&nbsp;&nbsp;&nbsp;" + "配置狀態：啟用";
                    }else if(params.data.type == "host"){
                        var msg = "";
                        msg += params.data.name + "：<br>" + "&nbsp;&nbsp;&nbsp;&nbsp;" + "配置狀態：啟用" + "<br>";
                        if(!isEmpty(params.data.roleName)){
                            msg += "&nbsp;&nbsp;&nbsp;&nbsp;" + "宿主角色：" + params.data.roleName + "<br>";
                        }
                        msg += "&nbsp;&nbsp;&nbsp;&nbsp;" + "業務數量：" + params.data.businessCnt + "<br>";
                        if(!isEmpty(params.data.hostCpuCoreNum)){
                            msg += "&nbsp;&nbsp;&nbsp;&nbsp;" + "CPU核心數：" + params.data.hostCpuCoreNum + "核<br>";
                        }
                        if(!isEmpty(params.data.hostRamSize)){
                            msg += "&nbsp;&nbsp;&nbsp;&nbsp;" + "內存總容量：" + (params.data.hostRamSize/1024/1024).toFixed(2) + "GB<br>";
                        }
                        if(!isEmpty(params.data.hostRamUsedSize)){
                            msg += "&nbsp;&nbsp;&nbsp;&nbsp;" + "內存已用量：" + (params.data.hostRamUsedSize/1024/1024).toFixed(2) + "GB<br>";
                        }
                        if(!isEmpty(params.data.hostRamAvailableSize)){
                            msg += "&nbsp;&nbsp;&nbsp;&nbsp;" + "內存可用量：" + (params.data.hostRamAvailableSize/1024/1024).toFixed(2) + "GB<br>";
                        }
                        if(!isEmpty(params.data.hostRamUsed)){
                            msg += "&nbsp;&nbsp;&nbsp;&nbsp;" + "內存占用百分比：" + (params.data.hostRamUsed*100).toFixed(2) + "%<br>";
                        }
                        if(!isEmpty(params.data.hostDiskTotalCapacityKB)){
                            msg += "&nbsp;&nbsp;&nbsp;&nbsp;" + "磁盤總容量：" + (params.data.hostDiskTotalCapacityKB/1024/1024).toFixed(2) + "GB<br>";
                        }
                        if(!isEmpty(params.data.hostDiskUsedKB)){
                            msg += "&nbsp;&nbsp;&nbsp;&nbsp;" + "磁盤已用量：" + (params.data.hostDiskUsedKB/1024/1024).toFixed(2) + "GB<br>";
                        }
                        if(!isEmpty(params.data.hostDiskAvailableKB)){
                            msg += "&nbsp;&nbsp;&nbsp;&nbsp;" + "硬盤可用量：" + (params.data.hostDiskAvailableKB/1024/1024).toFixed(2) + "GB<br>";
                        }
                        if(!isEmpty(params.data.hostDiskUsed)){
                            msg += "&nbsp;&nbsp;&nbsp;&nbsp;" + "硬盤可用量：" + (params.data.hostDiskAvailableKB/1024/1024).toFixed(2) + "GB<br>";
                        }
                        if(!isEmpty(params.data.hostDiskUsed)){
                            msg += "&nbsp;&nbsp;&nbsp;&nbsp;" + "磁盤占用百分比：" + (params.data.hostDiskUsed*100).toFixed(2) + "%<br>";
                        }
                        return msg;
                    }else if(params.data.type == "vm"){
                        var msg = "";
                        msg += params.data.name + "：<br>" + "&nbsp;&nbsp;&nbsp;&nbsp;" + "配置狀態：啟用" + "<br>";
                        if(!isEmpty(params.data.instanceName)){
                            msg += "&nbsp;&nbsp;&nbsp;&nbsp;" + "實例名稱：" + params.data.instanceName + "<br>";
                        }
                        if(!isEmpty(params.data.comment)){
                            msg += "&nbsp;&nbsp;&nbsp;&nbsp;" + "說明：" + params.data.comment + "<br>";
                        }
                        if(!isEmpty(params.data.applicationName)){
                            msg += "&nbsp;&nbsp;&nbsp;&nbsp;" + "歸屬應用：" + params.data.applicationName + "<br>";
                        }
                        if(!isEmpty(params.data.vmCpuCoreNum)){
                            msg += "&nbsp;&nbsp;&nbsp;&nbsp;" + "CPU核心數：" + params.data.vmCpuCoreNum + "核<br>";
                        }
                        if(!isEmpty(params.data.vmRam)){
                            msg += "&nbsp;&nbsp;&nbsp;&nbsp;" + "內存大小：" + (params.data.vmRam/1024/1024).toFixed(2) + "GB<br>";
                        }
                        if(!isEmpty(params.data.vmTotalDiskCapacity)){
                            msg += "&nbsp;&nbsp;&nbsp;&nbsp;" + "磁盤總容量：" + (params.data.vmTotalDiskCapacity/1024/1024).toFixed(2) + "GB<br>";
                        }
                        if(!isEmpty(params.data.systemType)){
                            msg += "&nbsp;&nbsp;&nbsp;&nbsp;" + "系統：" + params.data.systemType + "<br>";
                        }
                        if(!isEmpty(params.data.state)){
                            msg += "&nbsp;&nbsp;&nbsp;&nbsp;" + "電源狀態："  + params.data.state + "<br>";
                        }
                        return msg;
                    }

                }
            }
        },
        legend: { //=========小圖標，圖表控件
            show: true,
            data: [{
                    name: '區域',
                    icon: 'diamond' //'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
                    //icon:'image://./images/icon1.png'  //如果用圖片img，格式為'image://+icon文件地址'，其中image::后的//不能省略
                },
                {
                    name: '集群',
                    icon: 'rect'
                }, {
                    name: '宿主機',

                    icon: 'roundRect'
                }, {
                    name: '雲主機',
                    icon: 'circle'
                }
            ]
        },
        series : [ {//圖片配置
            type : 'graph', //關系圖
            //name : "拓撲圖", //系列名稱，用於tooltip的顯示，legend 的圖例篩選，在 setOption 更新數據和配置項時用於指定對應的系列。
            layout : 'force', //圖的布局，類型為力導圖，'circular' 采用環形布局，見示例 Les Miserables
            legendHoverLink : true,//是否啟用圖例 hover(懸停) 時的聯動高亮。
            hoverAnimation : true,//是否開啟鼠標懸停節點的顯示動畫
            coordinateSystem : null,//坐標系可選
            xAxisIndex : 0, //x軸坐標 有多種坐標系軸坐標選項
            yAxisIndex : 0, //y軸坐標
            force: {
                repulsion: 750,//相距距離
                edgeLength: [150, 200],
                layoutAnimation: true
            },
            /*force : { //力引導圖基本配置
                //initLayout: ,//力引導的初始化布局，默認使用xy軸的標點
                repulsion : 200,//節點之間的斥力因子。支持數組表達斥力范圍，值越大斥力越大。
                gravity : 0.03,//節點受到的向中心的引力因子。該值越大節點越往中心點靠攏。
                edgeLength :80,//邊的兩個節點之間的距離，這個距離也會受 repulsion。[10, 50] 。值越小則長度越長
                layoutAnimation : true
                //因為力引導布局會在多次迭代后才會穩定，這個參數決定是否顯示布局的迭代動畫，在瀏覽器端節點數據較多（>100）的時候不建議關閉，布局過程會造成瀏覽器假死。
            },*/
            roam : true,//是否開啟鼠標縮放和平移漫游。默認不開啟。如果只想要開啟縮放或者平移，可以設置成 'scale' 或者 'move'。設置成 true 為都開啟
            nodeScaleRatio : 0.6,//鼠標漫游縮放時節點的相應縮放比例，當設為0時節點不隨着鼠標的縮放而縮放
            draggable : true,//節點是否可拖拽，只在使用力引導布局的時候有用。
            focusNodeAdjacency : true,//是否在鼠標移到節點上的時候突出顯示節點以及節點的邊和鄰接節點。
            //symbol:'roundRect',//關系圖節點標記的圖形。ECharts 提供的標記類型包括 'circle'(圓形), 'rect'（矩形）, 'roundRect'（圓角矩形）, 'triangle'（三角形）, 'diamond'（菱形）, 'pin'（大頭針）, 'arrow'（箭頭）  也可以通過 'image://url' 設置為圖片，其中 url 為圖片的鏈接。'path:// 這種方式可以任意改變顏色並且抗鋸齒
            //symbolSize:10 ,//也可以用數組分開表示寬和高，例如 [20, 10] 如果需要每個數據的圖形大小不一樣，可以設置為如下格式的回調函數：(value: Array|number, params: Object) => number|Array
            //symbolRotate:,//關系圖節點標記的旋轉角度。注意在 markLine 中當 symbol 為 'arrow' 時會忽略 symbolRotate 強制設置為切線的角度。
            //symbolOffset:[0,0],//關系圖節點標記相對於原本位置的偏移。[0, '50%']
            edgeSymbol : [ 'none', 'arrow' ],//邊兩端的標記類型，可以是一個數組分別指定兩端，也可以是單個統一指定。默認不顯示標記，常見的可以設置為箭頭，如下：edgeSymbol: ['circle', 'arrow']
            symbolSize: 50,//圖形大小
            edgeSymbolSize : 10,//邊兩端的標記大小，可以是一個數組分別指定兩端，也可以是單個統一指定。
            itemStyle : {//===============圖形樣式，有 normal 和 emphasis 兩個狀態。normal 是圖形在默認狀態下的樣式；emphasis 是圖形在高亮狀態下的樣式，比如在鼠標懸浮或者圖例聯動高亮時。
                normal : { //默認樣式
                    label : {
                        show : true
                    },
                    //borderType : 'solid', //圖形描邊類型，默認為實線，支持 'solid'（實線）, 'dashed'(虛線), 'dotted'（點線）。
                    //borderColor : 'rgba(255,215,0,0.4)', //設置圖形邊框為淡金色,透明度為0.4
                    //borderWidth : 2, //圖形的描邊線寬。為 0 時無描邊。
                    // opacity : 1 // 圖形透明度。支持從 0 到 1 的數字，為 0 時不繪制該圖形。默認0.5

                },
                emphasis : {//高亮狀態

                }
            },
            lineStyle : { //==========關系邊的公用線條樣式。
                normal : {
                    color : '#31354B',
                    width : '1',
                    type : 'solid', //線的類型 'solid'（實線）'dashed'（虛線）'dotted'（點線）
                    curveness : 0, //線條的曲線程度，從0到1
                    opacity : 1
                    // 圖形透明度。支持從 0 到 1 的數字，為 0 時不繪制該圖形。默認0.5
                },
                emphasis : {//高亮狀態

                }
            },
            label : { //=============圖形上的文本標簽
                normal : {
                    show : true,//是否顯示標簽。
                    position : 'bottom',//標簽的位置。['50%', '50%'] [x,y]   'inside'
                    textStyle : { //標簽的字體樣式
                        color : '#2D2F3B', //字體顏色
                        fontStyle : 'normal',//文字字體的風格 'normal'標准 'italic'斜體 'oblique' 傾斜
                        fontWeight : 'bolder',//'normal'標准'bold'粗的'bolder'更粗的'lighter'更細的或100 | 200 | 300 | 400...
                        fontFamily : 'sans-serif', //文字的字體系列
                        fontSize : 12, //字體大小
                    }
                },
                emphasis : {//高亮狀態

                }
            },
            edgeLabel : {//==============線條的邊緣標簽
                normal : {
                    show : false
                },
                emphasis : {//高亮狀態

                }
            },
            //別名為nodes   name:影響圖形標簽顯示,value:影響選中后值得顯示,category:所在類目的index,symbol:類目節點標記圖形,symbolSize:10圖形大小
            //label:標簽樣式。
            //數據
            data : nodess,
            links : linkss,//edges是其別名代表節點間的關系數據。
            categories: [ //symbol name：用於和 legend 對應以及格式化 tooltip 的內容。 label有效
                {
                    name: '區域',
                    symbol: 'diamond',
                    label: { //標簽樣式
                    }
                }, {
                    name: '集群',
                    symbol: 'rect'
                }, {
                    name: '宿主機',
                    symbol: 'roundRect'
                }, {
                    name: '雲主機',
                    symbol: 'circle'
                }
            ]
        } ]
    };

    // 使用剛指定的配置項和數據顯示圖表。
    myChart.setOption(option);
}
//判斷字符是否為空的方法
function isEmpty(obj){
    if(typeof obj == "undefined" || obj == null || obj == ""){
        return true;
    }else{
        return false;
    }
}
//判斷數組是否有重復的
function in_array(stringToSearch, arrayToSearch) {
    for (s = 0; s < arrayToSearch.length; s++) {
        thisEntry = arrayToSearch[s].toString();
        if (thisEntry == stringToSearch) {
            return true;
        }
    }
    return false;
}