Echarts的graph關係圖的節點圖片自定義及關係邊上的提示框內容自定義
阿新 • • 發佈:2019-02-01
基本上的效果圖就是這樣,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);
});
現在有個問題,就是這裡的關係邊能不能夠自己定義成為圖片,這個問題我還沒有找到解決方法,要是大家有什麼好的想法或者建議,希望也分享出來,衷心感謝,當然,如果大家對上面說的這個效果的實現有什麼建議,也希望能夠分享一下。