Echarts?graph關(guān)系圖的使用入門級(jí)教程
更新時(shí)間：2024年01月20日 09:02:01 作者：愛(ài)寫代碼的派大星
近期需要使用echarts關(guān)系圖,這里給大家總結(jié)下,這篇文章主要給大家介紹了關(guān)于Echarts?graph關(guān)系圖使用的相關(guān)資料,文中給出了詳細(xì)的代碼介紹,需要的朋友可以參考下
今天我學(xué)習(xí)了如何使用echarts graph關(guān)系圖，效果如：
首先是給容器設(shè)置id，寬高
然后是
var graphTwoChart = echarts.init(document.getElementById('graph'));
graphTwoChart.setOption({
title: {
text: '當(dāng)前校企合作關(guān)系',
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",
// 是否開(kāi)啟鼠標(biāo)縮放和平移漫游。默認(rèn)不開(kāi)啟。如果只想要開(kāi)啟縮放或者平移，可以設(shè)置成 'scale' 或者 'move'。設(shè)置成 true 為都開(kāi)啟
roam: true,
// 是否在鼠標(biāo)移到節(jié)點(diǎn)上的時(shí)候突出顯示節(jié)點(diǎn)以及節(jié)點(diǎn)的邊和鄰接節(jié)點(diǎn)。[ default: false ]
focusNodeAdjacency: true,
// 力引導(dǎo)布局相關(guān)的配置項(xiàng)，力引導(dǎo)布局是模擬彈簧電荷模型在每?jī)蓚€(gè)節(jié)點(diǎn)之間添加一個(gè)斥力，每條邊的兩個(gè)節(jié)點(diǎn)之間添加一個(gè)引力，每次迭代節(jié)點(diǎn)會(huì)在各個(gè)斥力和引力的作用下移動(dòng)位置，多次迭代后節(jié)點(diǎn)會(huì)靜止在一個(gè)受力平衡的位置，達(dá)到整個(gè)模型的能量最小化。
force: {
// 力引導(dǎo)布局的結(jié)果有良好的對(duì)稱性和局部聚合性，也比較美觀。
// [ default: 50 ]節(jié)點(diǎn)之間的斥力因子(關(guān)系對(duì)象之間的距離)。支持設(shè)置成數(shù)組表達(dá)斥力的范圍，此時(shí)不同大小的值會(huì)線性映射到不同的斥力。值越大則斥力越大
repulsion: 200,
// [ default: 30 ]邊的兩個(gè)節(jié)點(diǎn)之間的距離(關(guān)系對(duì)象連接線兩端對(duì)象的距離,會(huì)根據(jù)關(guān)系對(duì)象值得大小來(lái)判斷距離的大小)，
edgeLength: [120, 100]
// 這個(gè)距離也會(huì)受 repulsion。支持設(shè)置成數(shù)組表達(dá)邊長(zhǎng)的范圍，此時(shí)不同大小的值會(huì)線性映射到不同的長(zhǎng)度。值越小則長(zhǎng)度越長(zhǎng)。如下示例:
// 值最大的邊長(zhǎng)度會(huì)趨向于 10，值最小的邊長(zhǎng)度會(huì)趨向于 50 edgeLength: [10, 50]
},
// 圖的布局。[ default: 'none' ]
layout: "force",
// 'none' 不采用任何布局，使用節(jié)點(diǎn)中提供的 x， y 作為節(jié)點(diǎn)的位置。
// 'circular' 采用環(huán)形布局;'force' 采用力引導(dǎo)布局.
// 標(biāo)記的圖形
symbol: 'circle',
// 關(guān)系邊的公用線條樣式。其中 lineStyle.color 支持設(shè)置為'source'或者'target'特殊值，此時(shí)邊會(huì)自動(dòng)取源節(jié)點(diǎn)或目標(biāo)節(jié)點(diǎn)的顏色作為自己的顏色。
normal: {
lineStyle: {
// 線的顏色[ default: '#aaa' ]
color: '#fff',
// 線寬[ default: 1 ]
width: 1,
// 線的類型[ default: solid實(shí)線 ] 'dashed'虛線 'dotted'
type: 'solid',
// 圖形透明度。支持從 0 到 1 的數(shù)字，為 0 時(shí)不繪制該圖形。[ default: 0.5 ]
opacity: 0.5,
// 邊的曲度，支持從 0 到 1 的值，值越大曲度越大。[ default: 0 ]
curveness: 0.5
}
},
// 關(guān)系對(duì)象上的標(biāo)簽
label: {
normal: {
// 是否顯示標(biāo)簽
show: true,
// 標(biāo)簽位置:'top''left''right''bottom''inside''insideLeft''insideRight''insideTop''insideBottom''insideTopLeft''insideBottomLeft''insideTopRight''insideBottomRight'
position: "inside",
// 文本樣式
textStyle: {
fontSize: 16,
color: 'white'
}
}
},
// 連接兩個(gè)關(guān)系對(duì)象的線上的標(biāo)簽
edgeLabel: {
normal: {
show: true,
textStyle: {
// fontSize: 14
},
// 標(biāo)簽內(nèi)容
formatter: function(param) {
return param.data.category;
}
}
},
data: [{
name: "總企業(yè)",
draggable: true, // 節(jié)點(diǎn)是否可拖拽，只在使用力引導(dǎo)布局的時(shí)候有用。
symbolSize: [80, 80], // 關(guān)系圖節(jié)點(diǎn)標(biāo)記的大小，可以設(shè)置成諸如 10 這樣單一的數(shù)字，也可以用數(shù)組分開(kāi)表示寬和高，例如 [20, 10] 表示標(biāo)記寬為20，高為10。
itemStyle: {
color: '#000' // 關(guān)系圖節(jié)點(diǎn)標(biāo)記的顏色
},
category: "企業(yè)分析" // 數(shù)據(jù)項(xiàng)所在類目的 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: "申報(bào)"
}, {
name: "企業(yè)4",
draggable: true,
symbolSize: [50, 50],
itemStyle: {
color: '#00ff00'
},
category: "產(chǎn)教融合"
}],
// 節(jié)點(diǎn)分類的類目，可選。如果節(jié)點(diǎn)有分類的話可以通過(guò) data[i].category 指定每個(gè)節(jié)點(diǎn)的類目，類目的樣式會(huì)被應(yīng)用到節(jié)點(diǎn)樣式上。圖例也可以基于categories名字展現(xiàn)和篩選。
categories: [{
// 類目名稱，用于和 legend 對(duì)應(yīng)以及格式化 tooltip 的內(nèi)容。
name: "企業(yè)分析"
}, {
name: "入駐"
}, {
name: "培育"
}, {
name: "申報(bào)"
}, {
name: "產(chǎn)教融合"
}],
// 節(jié)點(diǎn)間的關(guān)系數(shù)據(jù)
links: [{
target: "企業(yè)1",
source: "總企業(yè)",
// 關(guān)系對(duì)象連接線上的標(biāo)簽內(nèi)容
category: "入駐"
}, {
target: "企業(yè)2",
source: "總企業(yè)",
category: "培育"
}, {
target: "企業(yè)3",
source: "總企業(yè)",
category: "申報(bào)"
}, {
target: "企業(yè)4",
source: "總企業(yè)",
category: "產(chǎn)教融合"
}]
}]
});總結(jié)
到此這篇關(guān)于Echarts graph關(guān)系圖使用的文章就介紹到這了,更多相關(guān)Echarts graph關(guān)系圖內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
js get和post請(qǐng)求實(shí)現(xiàn)代碼解析
這篇文章主要介紹了js get和post實(shí)現(xiàn)代碼解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-02-02
這篇文章主要為大家詳細(xì)介紹了JavaScript中Promise類的使用方法，文中的示例代碼簡(jiǎn)潔易懂，對(duì)我們學(xué)習(xí)JavaScript有一定的幫助，需要的可以參考一下2023-05-05
JavaScript forEach方法用法示例實(shí)戰(zhàn)
本文將詳細(xì)介紹forEach方法的基本概念、用法、常見(jiàn)的應(yīng)用場(chǎng)景、與其他遍歷方法的對(duì)比,并提供實(shí)戰(zhàn)示例,幫助您全面掌握這一強(qiáng)大的工具,感興趣的朋友跟隨小編一起看看吧2025-06-06
JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)留言板功能
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)留言板功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-11-11
這篇文章主要介紹了ES6新特性之Object的變化,結(jié)合具體實(shí)例形式分析了ES6中Object對(duì)象定義與使用方法的變化,需要的朋友可以參考下2017-03-03
Js數(shù)組的操作push,pop,shift,unshift等方法詳細(xì)介紹
js中針對(duì)數(shù)組操作的方法還是比較多的，今天突然想到來(lái)總結(jié)一下，也算是溫故而知新吧。不過(guò)不會(huì)針對(duì)每個(gè)方法進(jìn)行講解，我只是選擇其中的一些來(lái)講,感興趣的朋友可以研究一下2012-12-12
這篇文章主要介紹了Object.keys?詭異特性示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
JavaScript offset實(shí)現(xiàn)鼠標(biāo)坐標(biāo)獲取和窗口內(nèi)模塊拖動(dòng)
在頁(yè)面開(kāi)發(fā)時(shí)我們少不了各種鼠標(biāo)交互動(dòng)作，那么JavaScript中如何實(shí)現(xiàn)鼠標(biāo)坐標(biāo)獲取和窗口內(nèi)模塊拖動(dòng)，本文就詳細(xì)的介紹一下，感興趣的可以了解一下2021-05-05
在一些瀏覽器里已經(jīng)可以使用web api調(diào)用攝像頭功能了,下面這篇文章主要給大家介紹了關(guān)于如何利用js給自己照相并修圖的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-05-05
這篇文章主要為大家詳細(xì)介紹了JavaScript canvas繪制漸變顏色的矩形，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-02-02