Echarts?graph關系圖的使用入門級教程
更新時間:2024年01月20日 09:02:01 作者:愛寫代碼的派大星
近期需要使用echarts關系圖,這里給大家總結下,這篇文章主要給大家介紹了關于Echarts?graph關系圖使用的相關資料,文中給出了詳細的代碼介紹,需要的朋友可以參考下
今天我學習了如何使用echarts graph關系圖,效果如:
首先是給容器設置id,寬高
然后是
var graphTwoChart = echarts.init(document.getElementById('graph')); graphTwoChart.setOption({ title: { text: '當前校企合作關系', textStyle: { color: 'white', }, left: "30px", top: "20px" }, tooltip: { show: true }, legend: { show: false, }, xAxis: { show: false }, yAxis: { show: false }, grid: { top: '80px' }, series: [{ type: "graph", // 是否開啟鼠標縮放和平移漫游。默認不開啟。如果只想要開啟縮放或者平移,可以設置成 'scale' 或者 'move'。設置成 true 為都開啟 roam: true, // 是否在鼠標移到節(jié)點上的時候突出顯示節(jié)點以及節(jié)點的邊和鄰接節(jié)點。[ default: false ] focusNodeAdjacency: true, // 力引導布局相關的配置項,力引導布局是模擬彈簧電荷模型在每兩個節(jié)點之間添加一個斥力,每條邊的兩個節(jié)點之間添加一個引力,每次迭代節(jié)點會在各個斥力和引力的作用下移動位置,多次迭代后節(jié)點會靜止在一個受力平衡的位置,達到整個模型的能量最小化。 force: { // 力引導布局的結果有良好的對稱性和局部聚合性,也比較美觀。 // [ default: 50 ]節(jié)點之間的斥力因子(關系對象之間的距離)。支持設置成數(shù)組表達斥力的范圍,此時不同大小的值會線性映射到不同的斥力。值越大則斥力越大 repulsion: 200, // [ default: 30 ]邊的兩個節(jié)點之間的距離(關系對象連接線兩端對象的距離,會根據(jù)關系對象值得大小來判斷距離的大小), edgeLength: [120, 100] // 這個距離也會受 repulsion。支持設置成數(shù)組表達邊長的范圍,此時不同大小的值會線性映射到不同的長度。值越小則長度越長。如下示例: // 值最大的邊長度會趨向于 10,值最小的邊長度會趨向于 50 edgeLength: [10, 50] }, // 圖的布局。[ default: 'none' ] layout: "force", // 'none' 不采用任何布局,使用節(jié)點中提供的 x, y 作為節(jié)點的位置。 // 'circular' 采用環(huán)形布局;'force' 采用力引導布局. // 標記的圖形 symbol: 'circle', // 關系邊的公用線條樣式。其中 lineStyle.color 支持設置為'source'或者'target'特殊值,此時邊會自動取源節(jié)點或目標節(jié)點的顏色作為自己的顏色。 normal: { lineStyle: { // 線的顏色[ default: '#aaa' ] color: '#fff', // 線寬[ default: 1 ] width: 1, // 線的類型[ default: solid實線 ] 'dashed'虛線 'dotted' type: 'solid', // 圖形透明度。支持從 0 到 1 的數(shù)字,為 0 時不繪制該圖形。[ default: 0.5 ] opacity: 0.5, // 邊的曲度,支持從 0 到 1 的值,值越大曲度越大。[ default: 0 ] curveness: 0.5 } }, // 關系對象上的標簽 label: { normal: { // 是否顯示標簽 show: true, // 標簽位置:'top''left''right''bottom''inside''insideLeft''insideRight''insideTop''insideBottom''insideTopLeft''insideBottomLeft''insideTopRight''insideBottomRight' position: "inside", // 文本樣式 textStyle: { fontSize: 16, color: 'white' } } }, // 連接兩個關系對象的線上的標簽 edgeLabel: { normal: { show: true, textStyle: { // fontSize: 14 }, // 標簽內(nèi)容 formatter: function(param) { return param.data.category; } } }, data: [{ name: "總企業(yè)", draggable: true, // 節(jié)點是否可拖拽,只在使用力引導布局的時候有用。 symbolSize: [80, 80], // 關系圖節(jié)點標記的大小,可以設置成諸如 10 這樣單一的數(shù)字,也可以用數(shù)組分開表示寬和高,例如 [20, 10] 表示標記寬為20,高為10。 itemStyle: { color: '#000' // 關系圖節(jié)點標記的顏色 }, category: "企業(yè)分析" // 數(shù)據(jù)項所在類目的 index。 }, { name: "企業(yè)1", draggable: true, symbolSize: [50, 50], itemStyle: { color: '#0000ff' }, category: "入駐" }, { name: "企業(yè)2", draggable: true, symbolSize: [50, 50], itemStyle: { color: 'skyblue' }, category: "培育" }, { name: "企業(yè)3", draggable: true, symbolSize: [50, 50], itemStyle: { color: '#ff0000' }, category: "申報" }, { name: "企業(yè)4", draggable: true, symbolSize: [50, 50], itemStyle: { color: '#00ff00' }, category: "產(chǎn)教融合" }], // 節(jié)點分類的類目,可選。如果節(jié)點有分類的話可以通過 data[i].category 指定每個節(jié)點的類目,類目的樣式會被應用到節(jié)點樣式上。圖例也可以基于categories名字展現(xiàn)和篩選。 categories: [{ // 類目名稱,用于和 legend 對應以及格式化 tooltip 的內(nèi)容。 name: "企業(yè)分析" }, { name: "入駐" }, { name: "培育" }, { name: "申報" }, { name: "產(chǎn)教融合" }], // 節(jié)點間的關系數(shù)據(jù) links: [{ target: "企業(yè)1", source: "總企業(yè)", // 關系對象連接線上的標簽內(nèi)容 category: "入駐" }, { target: "企業(yè)2", source: "總企業(yè)", category: "培育" }, { target: "企業(yè)3", source: "總企業(yè)", category: "申報" }, { target: "企業(yè)4", source: "總企業(yè)", category: "產(chǎn)教融合" }] }] });
總結
到此這篇關于Echarts graph關系圖使用的文章就介紹到這了,更多相關Echarts graph關系圖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
您可能感興趣的文章:
相關文章
使用JavaScript獲取Django模板指定鍵值數(shù)據(jù)
這篇文章主要介紹了使用JavaScript獲取Django模板指定鍵值數(shù)據(jù),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-05-05JavaScript表格隔行變色和Tab標簽頁特效示例【附jQuery版】
這篇文章主要介紹了JavaScript表格隔行變色和Tab標簽頁特效,結合實例形式分析了javascript元素遍歷、事件響應相關操作技巧,并附帶jQuery對應實現(xiàn)代碼供大家參考,需要的朋友可以參考下2019-07-07