ECharts圖表元件之關係圖
阿新 • • 發佈：2019-01-06
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Test</title> </head> <body> <div id="main" style="width: 850px; height: 500px"></div> <script src="http://echarts.baidu.com/build/dist/echarts.js"></script> <script type="text/javascript"> var dd = [ {id:0,category:0,name:'0',label:'蔡',symbolSize:40,ignore:false,flag:true}, {id:1,category:1,name:'1',label:'蔡海清',symbolSize:30,ignore:false,flag:true}, {id:2,category:1,name:'2',label:'蔡文瀾',symbolSize:30,ignore:false,flag:true}, {id:3,category:2,name:'3',label:'職員',symbolSize:30,ignore:false,flag:true}, {id:4,category:2,name:'4',label:'其他應付款職員',symbolSize:30,ignore:false,flag:true}, ] require.config({ paths : { echarts : 'http://echarts.baidu.com/build/dist' } }); require([ "echarts", "echarts/chart/force"], function(ec) { var myChart = ec.init(document.getElementById('main'), 'macarons'); var option = { tooltip : { show : false }, series : [ { type : 'force', name : "Force tree", itemStyle : { normal : { label : {show : true}, nodeStyle : { brushType : 'both', borderColor : 'rgba(255,215,0,0.4)', borderWidth : 1 } } }, nodes :dd, links : [ {source : 1,target : 0}, {source : 2,target : 0},{source : 3,target : 1},{source : 4,target : 2}, } ] }; myChart.setOption(option); var ecConfig = require('echarts/config'); function openOrFold(param) { var option = myChart.getOption(); var nodesOption = option.series[0].nodes; var linksOption = option.series[0].links; var data = param.data; var linksNodes = []; var categoryLength = option.series[0].categories.length; if (data.category == (categoryLength - 1)) { alert(data.label); } if (data != null && data != undefined) { if (data.flag) { for ( var m in linksOption) { if (linksOption[m].target == data.id) { linksNodes.push(linksOption[m].source); } } if (linksNodes != null && linksNodes != undefined) { for ( var p in linksNodes) { nodesOption[linksNodes[p]].ignore = false; nodesOption[linksNodes[p]].flag = true; } } nodesOption[data.id].flag = false; myChart.setOption(option); } else { for ( var m in linksOption) { if (linksOption[m].target == data.id) { linksNodes.push(linksOption[m].source); } if (linksNodes != null && linksNodes != undefined) { for ( var n in linksNodes) { if (linksOption[m].target == linksNodes[n]) { linksNodes.push(linksOption[m].source); } } } } if (linksNodes != null && linksNodes != undefined) { for ( var p in linksNodes) { nodesOption[linksNodes[p]].ignore = true; nodesOption[linksNodes[p]].flag = true; } } nodesOption[data.id].flag = true; myChart.setOption(option); } } } myChart.on(ecConfig.EVENT.CLICK, openOrFold); }); </script> </body> </html>
到這裡一個簡單的站點結構關係圖就完成了。從上面的程式碼中不難看出來，結構關係圖的重點就是兩大塊：
1）、nodes陣列
這個內主要是用於定義結構圖的所有節點，其中category是指當前節點屬於categories陣列內的哪一個分類。腳標從0開始；
name表示節點的名稱，value表示大小；
url是我自己擴充套件的節點屬性，用於存放當前節點對應的站點url地址。
2）、links陣列
這個主要是用於定義nodes內節點之間相互的關係，只要這裡建立關係後，展現出來的關係圖節點相互之間會產生一條連線線進行相互之間的連結。在設定這個陣列的時候需要注意一下幾點：
a、source：表示節點位於nodes陣列內的位置，腳標從0開始。這個數字的範圍必須是[0,nodes.length]；
b、target：表示連結的目標節點在nodes陣列內的位置，腳標從0開始。這個數字的範圍必須是[0,nodes.length]；
c、weight：表示當前節點的權重，權重越大距離目標節點的位置越近，也表示越親近。數字範圍不限制，數字越小距離目標節點越遠。