用Echarts的力嚮導圖視覺化資料
阿新 • • 發佈：2019-01-11
學習背景：做一個圖論的題目的時候需要將結果視覺化來直觀的看效果，所以使用Echarts來畫。感覺效果不錯。
Echarts下載地址：https://echarts.baidu.com/download.html
資料在另一個檔案中儲存，使用json儲存資料，這個方法可能不太好，我前端知道的不多，以後有更好的方法了再來更新。
資料格式：
1 nodes = '[{ "id" : 0, "name" : "Node 0", "category" : 0},{ "id" : 1, "name" : "Node 1", "category" : 0},{ "id" : 2, "name" : "Node 2", "category" : 0},{ "id" : 3, "name" : "Node 3", "category" : 0},{ "id" : 4, "name" : "Node 4", "category" : 0},{ "id" : 5, "name" : "Node 5", "category" : 0},{ "id" : 6, "name" : "Node 6", "category" : 0},{ "id" : 7, "name" : "Node 7", "category" : 1},{ "id" : 8, "name" : "Node 8", "category" : 1},{ "id" : 9, "name" : "Node 9", "category" : 1}]';2 links = '[{ "source" : 0, "target" : 1},{ "source" : 0, "target" : 8},{ "source" : 1, "target" : 5},{ "source" : 1, "target" : 8},{ "source" : 2, "target" : 5},{ "source" : 2, "target" : 8},{ "source" : 3, "target" : 7},{ "source" : 3, "target" : 9},{ "source" : 4, "target" : 6},{ "source" : 4, "target" : 7},{ "source" : 4, "target" : 9},{ "source" : 5, "target" : 8},{ "source" : 5, "target" : 9},{ "source" : 6, "target" : 9}]';
前端：
1 <!DOCTYPE html> 2 <html style="height: 100%"> 3 <head> 4 <meta charset="utf-8" /> 5 </head> 6 <body style="height: 100%; margin: 0;background: #cccccc;"> 7 <div id="container" style="height: 100%"></div> 8 <Viewscript src="js/echarts.js"></script> 9 <script type="text/javascript" src="before.json"></script> 10 <script type="text/javascript"> 11 var dom = document.getElementById("container"); 12 var myChart = echarts.init(dom); 13 var app = {}; 14 option = null; 15 app.title = '力引導佈局'; 16 myChart.showLoading(); 17 var nodes = JSON.parse(nodes); 18 var links = JSON.parse(links); 19 20 option = { 21 title: { 22 text: 'Minimun Dominating Set', //自己修改吧 23 top: 'top', 24 left: 'left' 25 }, 26 tooltip: {}, 27 animation: true, 28 legend: { orient: 'horizontal', x: 'right', y: 'top', data: ['非支配集', '支配集'] }, 29 series: [{ 30 type: 'graph', //string 預設必寫 31 id: "", // string 元件 ID。預設不指定。指定則可用於在 option 或者 API 中引用元件。 32 name: 'flyuz', //string系列名稱，用於tooltip的顯示，legend 的圖例篩選，在 setOption 更新資料和配置項時用於指定對應的系列。 33 legendHoverLink: true, //boolean是否啟用圖例 hover 時的聯動高亮。 34 layout: 'force', // string none不採用任何佈局，使用節點中提供的 x， y 作為節點的位置。 35 circular: { // Object 環形佈局相關配置 36 rotateLabel: false //boolean是否旋轉標籤，預設不旋轉 37 }, 38 force: { 39 repulsion: 100, 40 gravity: 0.1, // number [ default: 0.1 ] 節點受到的向中心的引力因子。該值越大節點越往中心點靠攏。 41 edgeLength: 30, 42 layoutAnimation: true 43 }, 44 roam: true, 45 draggable: true, //boolean [ default: false ] 節點是否可拖拽，只在使用力引導佈局的時候有用。 46 //這個重要 47 focusNodeAdjacency: true, // 重要！！！ boolean [ default: false ] 是否在滑鼠移到節點上的時候突出顯示節點以及節點的邊和鄰接節點。 48 symbol: "circle", //關係圖節點標記的圖形。 49 symbolSize: 10, 50 symbolRotate: undefined, //number 關係圖節點標記的旋轉角度。注意在 markLine 中當 symbol 為 'arrow' 時會忽略 symbolRotate 強制設定為切線的角度。 51 symbolOffset: [0, 0], 52 edgeSymbol: ['none', 'none'], 53 cursor: "none", // string [ default: 'pointer' ] 滑鼠懸浮時在圖形元素上時滑鼠的樣式是什麼。同 CSS 的 cursor。 54 categories : [ {name : '非支配集',itemStyle:{color:"#19BC52"}}, {name : '支配集', itemStyle:{color:"#ff715a"}} ], 55 data: nodes, 56 links: links, 57 label: { 58 normal: { 59 position: 'right' 60 } 61 } 62 } 63 ]}; 64 if (option && typeof option === "object") { 65 myChart.setOption(option, true); 66 myChart.hideLoading(); 67 } 68 myChart.on('click', function(params) { 69 console.log(params); 70 console.log("click"); 71 }); 72 </script> 73 </body> 74 </html>
效果是這個樣子的：
