基本上的效果圖就是這樣，graph的每個node的圖片都可以自定義，graph有一個symbol屬性，可以自定義，這裡需要注意一下，symbol的images的格式“image://./images/node.png”最好是能夠寫絕對路徑，加上“//.”回到你的根目錄，之前一直在困惑為什麼我自定義的影象沒有顯示出來，好像就是這麼路徑的問題

這是基本的json資料格式

{"data": {
	"compute": [
				{
					"name": "db3", 
				},
				{

					"name": "db1", 
				}
	 ],
	"links": [
				{"flow": 1, "source": "zdata3", "target": "local"}, 
				{"flow": 5, "source": "zdata2", "target": "remote"},
				{"flow": 6, "source": "db3", "target": "switch-dfccbe"},
				{"flow": 9, "source": "zdata1", "target": "switch-dfccbe"},
				{"flow": 12, "source": "zdata2", "target": "switch-dfccbe"}, 
				{"flow": 87, "source": "db1", "target": "switch-dfccbe"}, 
				{"flow": 78, "source": "db1", "target": "switch-e67f1c"}, 
				{"flow": 123, "source": "zdata3", "target": "switch-dfccbe"}, 
				{"flow": 96, "source": "zdata1", "target": "switch-e67f1c"}
	], 
	"storage": [
				{name": "zdata3"}, 
				{"name": "zdata2"}, 
				{"name": "zdata1"}
	], 
	"switchs": [
				{"name": "local"}, 
				{"name": "remote"}, 
				{"name": "switch-dfccbe"}, 
				{"name": "switch-e67f1c"},
				{"name": "switch-dffdfgr"}, 
				{"name": "switch-e689frec"}
	]
	}
}
 

通過json方式請求到了資料，將其放進series裡面的data,和link

function analysis(data){  

for(var k = 0; k <data.switchs.length; k++){
    	var obj3 = {name:'',x:0,y:300,symbol:'',symbolSize: [90,38]};//switch
        obj3.name = data.switchs[k].name;
        obj3.x = 100*(k+1);
        obj3.symbol = 'image://./images/switch.png';
        end_obj3.push(obj3);
    };
 

 return end_obj3;  

｝

這是處理傳到series裡面的data的資料，之前一直push到end_obj3裡面的都是相同的資料，後來才發現，需要把 obj3定義在函式裡面，這樣，沒有次迴圈的時候才會是一個新的obj，這裡要細心，在這裡定義了obj的物件資料，因為你在通過ajax已經獲取到了json的所有的資料，所以analysis函式裡面傳的引數data就是返回的json，處理完你想要返回給series裡面的data的資料後，再處理series裡面的link，

function analysis_link(data){
var end_links = [];
for(var a = 0; a< data.length; a++){
    var links = {flow:0,source:'',target:''};
    links.flow = data[a].flow;
    links.source = data[a].source;
    links.target = data[a].target;
    end_links.push(links);
}
return end_links;
}
 

同上面一樣，將你想要在關係邊上顯示的資料（這裡是flow物件）全部返回到series的link裡面，最後，就是提示框顯示的問題了，提示框在節點處要顯示有關節點的資料，在關係邊的時候顯示關係邊的資料，所以你在tooltip這裡需要寫一個formatter函式

tooltip : {
                trigger: 'item',
                formatter:function(params){
                    if(params.data.flow){
                        return params.data.source + '到' + params.data.target + '的流量為'+ params.data.flow;
                    }
                    else{
                        return params.name;
                    }
                }
            },

這裡面formatter函式裡面的params是整個series裡面的資料，包括之前的link陣列，都在data這個陣列物件裡面，params就是一個物件陣列，所以在這裡要做個判斷，判斷好之後，就返回你先要顯示的資料格式。

這個是獲取json格式的ajax

 $.getJSON("graph.json").done(function(res){
      var myData = res.data;
      option.series[0].data =  analysis(myData);
      option.series[0].links = analysis_link(myData.links);
      graph_chart.setOption(option);
    });

現在有個問題，就是這裡的關係邊能不能夠自己定義成為圖片，這個問題我還沒有找到解決方法，要是大家有什麼好的想法或者建議，希望也分享出來，衷心感謝，當然，如果大家對上面說的這個效果的實現有什麼建議，也希望能夠分享一下。