當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

graph 关系图设置

發(fā)布時(shí)間：2025/3/14 编程问答 32 豆豆

生活随笔收集整理的這篇文章主要介紹了 graph 关系图设置小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=8">



<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>監(jiān)控管理系統(tǒng)</title>
<script type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="js/jquery-1.12.0.min.js">
</script>
<script type="text/javascript" src="js/echarts-4.js">
</script> 

</head>
<body>

<div style="padding:20px;width:100%;height:100%;">


<div id="main" style="width: 1104px;height:464px;">

</div>

<div id='main_1' style="position: relative;height:15px;width: 100%;color:#A52A2A">節(jié)點(diǎn)關(guān)系提示區(qū)</div>

</div>

<script>
// 基于準(zhǔn)備好的dom，初始化ECharts實(shí)例
var myChart = echarts.init(document.getElementById('main'), 'macarons');
// 指定圖表的配置項(xiàng)和數(shù)據(jù)
var option = {
tooltip : {
show : true, //默認(rèn)顯示
showContent:true, //是否顯示提示框浮層
trigger:'item',//觸發(fā)類型，默認(rèn)數(shù)據(jù)項(xiàng)觸發(fā)
triggerOn:'click',//提示觸發(fā)條件，mousemove鼠標(biāo)移至觸發(fā)，還有click點(diǎn)擊觸發(fā)
alwaysShowContent:false, //默認(rèn)離開提示框區(qū)域隱藏，true為一直顯示
showDelay:0,//浮層顯示的延遲，單位為 ms，默認(rèn)沒有延遲，也不建議設(shè)置。在 triggerOn 為 'mousemove' 時(shí)有效。
hideDelay:200,//浮層隱藏的延遲，單位為 ms，在 alwaysShowContent 為 true 的時(shí)候無效。
enterable:false,//鼠標(biāo)是否可進(jìn)入提示框浮層中，默認(rèn)為false，如需詳情內(nèi)交互，如添加鏈接，按鈕，可設(shè)置為 true。
position:'right',//提示框浮層的位置，默認(rèn)不設(shè)置時(shí)位置會(huì)跟隨鼠標(biāo)的位置。只在 trigger 為'item'的時(shí)候有效。
confine:false,//是否將 tooltip 框限制在圖表的區(qū)域內(nèi)。外層的 dom 被設(shè)置為 'overflow: hidden'，或者移動(dòng)端窄屏，導(dǎo)致 tooltip 超出外界被截?cái)鄷r(shí)，此配置比較有用。
transitionDuration:0.4,//提示框浮層的移動(dòng)動(dòng)畫過渡時(shí)間，單位是 s，設(shè)置為 0 的時(shí)候會(huì)緊跟著鼠標(biāo)移動(dòng)。
formatter: function (params, ticket, callback) {
//判斷數(shù)據(jù)，提供相應(yīng)的url。
var path="";
var node=params.data; //當(dāng)前選中節(jié)點(diǎn)數(shù)據(jù)
var category=params.data.category; //選中節(jié)點(diǎn)圖例0負(fù)載 1中間件 2端口號(hào) 3數(shù)據(jù)庫 4用戶名
if(category==2){ //為jvm 虛擬機(jī)各類參數(shù)的路徑
path = "${ctx}/weblogic.do?host=" + node.host + "&port="
+ node.port + "&username=" + node.username
+ "&pwd=" + node.pwd; //準(zhǔn)備訪問路徑
}else if(category==4){ //為jdbc 數(shù)據(jù)庫的路徑
path = "${ctx}/oracle.do?host=" + node.host + "&port="
+ node.port + "&username=" + node.username
+ "&pwd=" + node.pwd + "&instance="
+ node.instance; //準(zhǔn)備訪問路徑
}

console.log(params);
$.ajax({
async : true,//設(shè)置異、同步加載
cache : false,//false就不會(huì)從瀏覽器緩存中加載請(qǐng)求信息了
type : 'post',
dataType : "json",
url : path,//請(qǐng)求的action路徑
success : function(data) { //請(qǐng)求成功后處理函數(shù)。
//加工返回后的數(shù)據(jù)
debugger;
if(category==2){ //當(dāng)選擇端口號(hào)時(shí)
var res = 'jvm最大內(nèi)存值:' + data.memoryMaxSize+'<br/>';
res+='jvm空閑內(nèi)存值:'+data.memoryFreeSize+'<br/>';
res+='jvm內(nèi)存使用率：'+data.memoryPer+'<br/>';
res+='空閑線程：'+data.ideThread+'<br/>';
res+='總線程：'+data.totalThread+'<br/>';
res+='每秒處理的線程數(shù)比率：'+data.throuhput+'<br/>';
callback(ticket,res);
}else if(category==4){//當(dāng)選擇用戶名時(shí)
var res = '當(dāng)前鏈接數(shù)：'+data.processCount+'<br/>';
res+='最大鏈接數(shù)：'+data.maxProcessCount+'<br/>';
callback(ticket,res);
}

},
error : function() {//請(qǐng)求失敗處理函數(shù)
$.messager.alert('警告', '請(qǐng)求失敗！', 'warning');
}
});
if(category==2||category==4){ //當(dāng)選擇端口號(hào)與用戶名時(shí)提示加載
return "loading";
}else{ //其他情況顯示所屬圖例以及名稱
return myChart.getOption().series[params.seriesIndex].categories[params.data.category].name+":"+params.name;
}

}
},

legend : { //=========圖表控件
show : true,
data : [ {
name : '負(fù)載',

icon : 'rect'//'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'

},
{
name : '中間件',

icon : 'roundRect'
}, {
name : '端口號(hào)',

icon : 'circle'
}, {
name : '數(shù)據(jù)庫',

icon : 'circle'
},{
name : '用戶名',
icon : 'roundRect'
} ]
},
series : [ {
type : 'graph', //關(guān)系圖
name : "監(jiān)控管理系統(tǒng)", //系列名稱，用于tooltip的顯示，legend 的圖例篩選，在 setOption 更新數(shù)據(jù)和配置項(xiàng)時(shí)用于指定對(duì)應(yīng)的系列。
layout : 'force', //圖的布局，類型為力導(dǎo)圖，'circular' 采用環(huán)形布局，見示例 Les Miserables
legendHoverLink : true,//是否啟用圖例 hover(懸停) 時(shí)的聯(lián)動(dòng)高亮。
hoverAnimation : true,//是否開啟鼠標(biāo)懸停節(jié)點(diǎn)的顯示動(dòng)畫
coordinateSystem : null,//坐標(biāo)系可選
xAxisIndex : 0, //x軸坐標(biāo) 有多種坐標(biāo)系軸坐標(biāo)選項(xiàng)
yAxisIndex : 0, //y軸坐標(biāo)
force : { //力引導(dǎo)圖基本配置
//initLayout: ,//力引導(dǎo)的初始化布局，默認(rèn)使用xy軸的標(biāo)點(diǎn)
repulsion : 100,//節(jié)點(diǎn)之間的斥力因子。支持?jǐn)?shù)組表達(dá)斥力范圍，值越大斥力越大。
gravity : 0.03,//節(jié)點(diǎn)受到的向中心的引力因子。該值越大節(jié)點(diǎn)越往中心點(diǎn)靠攏。
edgeLength :80,//邊的兩個(gè)節(jié)點(diǎn)之間的距離，這個(gè)距離也會(huì)受 repulsion。[10, 50] 。值越小則長(zhǎng)度越長(zhǎng)
layoutAnimation : false
//因?yàn)榱σ龑?dǎo)布局會(huì)在多次迭代后才會(huì)穩(wěn)定，這個(gè)參數(shù)決定是否顯示布局的迭代動(dòng)畫，在瀏覽器端節(jié)點(diǎn)數(shù)據(jù)較多（>100）的時(shí)候不建議關(guān)閉，布局過程會(huì)造成瀏覽器假死。
},
roam : true,//是否開啟鼠標(biāo)縮放和平移漫游。默認(rèn)不開啟。如果只想要開啟縮放或者平移，可以設(shè)置成 'scale' 或者 'move'。設(shè)置成 true 為都開啟
nodeScaleRatio : 0.6,//鼠標(biāo)漫游縮放時(shí)節(jié)點(diǎn)的相應(yīng)縮放比例，當(dāng)設(shè)為0時(shí)節(jié)點(diǎn)不隨著鼠標(biāo)的縮放而縮放
draggable : true,//節(jié)點(diǎn)是否可拖拽，只在使用力引導(dǎo)布局的時(shí)候有用。
focusNodeAdjacency : true,//是否在鼠標(biāo)移到節(jié)點(diǎn)上的時(shí)候突出顯示節(jié)點(diǎn)以及節(jié)點(diǎn)的邊和鄰接節(jié)點(diǎn)。
//symbol:'roundRect',//關(guān)系圖節(jié)點(diǎn)標(biāo)記的圖形。ECharts 提供的標(biāo)記類型包括 'circle'(圓形), 'rect'（矩形）, 'roundRect'（圓角矩形）, 'triangle'（三角形）, 'diamond'（菱形）, 'pin'（大頭針）, 'arrow'（箭頭）也可以通過 'image://url' 設(shè)置為圖片，其中 url 為圖片的鏈接。'path:// 這種方式可以任意改變顏色并且抗鋸齒
//symbolSize:10 ,//也可以用數(shù)組分開表示寬和高，例如 [20, 10] 如果需要每個(gè)數(shù)據(jù)的圖形大小不一樣，可以設(shè)置為如下格式的回調(diào)函數(shù)：(value: Array|number, params: Object) => number|Array
//symbolRotate:,//關(guān)系圖節(jié)點(diǎn)標(biāo)記的旋轉(zhuǎn)角度。注意在 markLine 中當(dāng) symbol 為 'arrow' 時(shí)會(huì)忽略 symbolRotate 強(qiáng)制設(shè)置為切線的角度。
//symbolOffset:[0,0],//關(guān)系圖節(jié)點(diǎn)標(biāo)記相對(duì)于原本位置的偏移。[0, '50%']
edgeSymbol : [ 'none', 'none' ],//邊兩端的標(biāo)記類型，可以是一個(gè)數(shù)組分別指定兩端，也可以是單個(gè)統(tǒng)一指定。默認(rèn)不顯示標(biāo)記，常見的可以設(shè)置為箭頭，如下：edgeSymbol: ['circle', 'arrow']
edgeSymbolSize : 10,//邊兩端的標(biāo)記大小，可以是一個(gè)數(shù)組分別指定兩端，也可以是單個(gè)統(tǒng)一指定。
itemStyle : {//===============圖形樣式，有 normal 和 emphasis 兩個(gè)狀態(tài)。normal 是圖形在默認(rèn)狀態(tài)下的樣式；emphasis 是圖形在高亮狀態(tài)下的樣式，比如在鼠標(biāo)懸浮或者圖例聯(lián)動(dòng)高亮?xí)r。
normal : { //默認(rèn)樣式
label : {
show : true,

// 控制圓餅里的文字換行的代碼必須寫在label中
formatter: function(val) {
var strs = val.data.name.split(''); //字符串?dāng)?shù)組
// console.log( val.data.name)
var str = ''
for(var i = 0, s; s = strs[i++];) { //遍歷字符串?dāng)?shù)組
str += s;
if(!(i % 6)) str += '\n'; //按需要求余

}
return str
}

},
borderType : 'solid', //圖形描邊類型，默認(rèn)為實(shí)線，支持 'solid'（實(shí)線）, 'dashed'(虛線), 'dotted'（點(diǎn)線）。
borderColor : 'rgba(255,215,0,0.4)', //設(shè)置圖形邊框?yàn)榈鹕?透明度為0.4
borderWidth : 2, //圖形的描邊線寬。為 0 時(shí)無描邊。
opacity : 1,
whiteSpace: 'preWrap'
// 圖形透明度。支持從 0 到 1 的數(shù)字，為 0 時(shí)不繪制該圖形。默認(rèn)0.5

},
emphasis : {//高亮狀態(tài)

}
},
lineStyle : { //==========關(guān)系邊的公用線條樣式。
normal : {
color : 'rgba(255,0,255,0.4)',
width : '3',
type : 'dotted', //線的類型 'solid'（實(shí)線）'dashed'（虛線）'dotted'（點(diǎn)線）
curveness : 0.3, //線條的曲線程度，從0到1
opacity : 1
// 圖形透明度。支持從 0 到 1 的數(shù)字，為 0 時(shí)不繪制該圖形。默認(rèn)0.5
},
emphasis : {//高亮狀態(tài)

}
},
label : { //=============圖形上的文本標(biāo)簽
normal : {
show : true,//是否顯示標(biāo)簽。
position : 'inside',//標(biāo)簽的位置。['50%', '50%'] [x,y]
textStyle : { //標(biāo)簽的字體樣式
color : '#cde6c7', //字體顏色
fontStyle : 'normal',//文字字體的風(fēng)格 'normal'標(biāo)準(zhǔn) 'italic'斜體 'oblique' 傾斜
fontWeight : 'bolder',//'normal'標(biāo)準(zhǔn)'bold'粗的'bolder'更粗的'lighter'更細(xì)的或100 | 200 | 300 | 400...
fontFamily : 'sans-serif', //文字的字體系列
fontSize : 12, //字體大小
}
},
emphasis : {//高亮狀態(tài)

}
},
edgeLabel : {//==============線條的邊緣標(biāo)簽
normal : {
show : false
},
emphasis : {//高亮狀態(tài)

}
},
//別名為nodes name:影響圖形標(biāo)簽顯示,value:影響選中后值得顯示,category:所在類目的index,symbol:類目節(jié)點(diǎn)標(biāo)記圖形,symbolSize:10圖形大小
//label:標(biāo)簽樣式。
data : [ {
id : 0,
category : 0,
name : '101.133.8.88',
symbol : 'roundRect',
value : 20,
symbolSize : 80
}, {
id : 1,
category : 1,
name : '192.168.8.88',
symbol : 'rect',
value : 20,
symbolSize : 70
}, {
id : 2,
category : 2,
name : '7001',
symbol : 'circle',
value : 20,
symbolSize : 60,
yId:"jvm",
host:"192.168.6.37",
port:"7001",
username:"weblogic",
pwd:"weblogic1"
}, {
id : 3,
category : 2,
name : '7100',
symbol : 'circle',
value : 20,
symbolSize : 60
}, {
id : 4,
category : 1,
name : '102.12.33.23',
symbol : 'rect',
value : 20,
symbolSize : 70
}, {
id : 5,
category : 2,
name : '7001',
symbol : 'circle',
value : 20,
symbolSize : 60
}, {
id : 6,
category : 2,
name : '7100',
symbol : 'circle',
value : 20,
symbolSize : 60
}, {
id : 7,
category : 2,
name : '7001',
symbol : 'circle',
value : 20,
symbolSize : 60
}, {
id : 8,
category : 1,
name : '101.11.66.6',
symbol : 'rect',
value : 20,
symbolSize : 70
}, {
id : 9,
category : 2,
name : '7101',
symbol : 'circle',
value : 20,
symbolSize : 60
}, {
id : 10,
category : 2,
name : '7101',
symbol : 'circle',
value : 20,
symbolSize : 60
}, {
id : 11,
category : 2,
name : '7001',
symbol : 'circle',
value : 20,
symbolSize : 60
}, {
id : 12,
category : 2,
name : '7100',
symbol : 'circle',
value : 20,
symbolSize : 60
}, {
id : 13,
category : 3,
name : '192.168.44.44',
symbol : 'circle',
value : 20,
symbolSize : 70
}, {
id : 14,
category : 3,
name : '192.168.33.33',
symbol : 'circle',
value : 20,
symbolSize : 70
}, {
id : 15,
category : 3,
name : '192.168.22.22',
symbol : 'circle',
value : 20,
symbolSize : 70
}, {
id : 16,
category : 4,
name : '55555555555',
symbol : 'circle',
value : 20,
symbolSize : 70,
yId:"jdbc",
port:"1521",
host:"192.168.11.11",
username:"222222222",
pwd:"11111111",
instance:"orcl"
}],
categories : [ //symbol name：用于和 legend 對(duì)應(yīng)以及格式化 tooltip 的內(nèi)容。 label有效
{
name : '負(fù)載',
symbol : 'rect',
label : { //標(biāo)簽樣式
}
}, {
name : '中間件',
symbol : 'rect'
}, {
name : '端口號(hào)',
symbol : 'roundRect'
}, {
name : '數(shù)據(jù)庫',
symbol : 'roundRect'
}, {
name : '用戶名',
symbol : 'roundRect'
} ],
links : [ //edges是其別名代表節(jié)點(diǎn)間的關(guān)系數(shù)據(jù)。
{
source : 1,
target : 0
}, {
source : 4,
target : 0
}, {
source : 8,
target : 0
}, {
source : 2,
target : 1
}, {
source : 3,
target : 1
}, {
source : 5,
target : 4
}, {
source : 6,
target : 4
}, {
source : 7,
target : 4
}, {
source : 9,
target : 8
}, {
source : 10,
target : 8
}, {
source : 11,
target : 8
}, {
source : 12,
target : 8
}, {
source : 13,
target : 6
}, {
source : 14,
target : 6
}, {
source : 15,
target : 2
}, {
source : 16,
target : 15
} ]
} ]
};

// 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。
myChart.setOption(option);

/*ECharts3 方法部分開始*/
function appendPath(params){ //拼接節(jié)點(diǎn)關(guān)系并顯示在左下角，
var option = myChart.getOption();
var series = option.series[params.seriesIndex]; //獲取圖表
var nodesOption = series.data;//獲取所有數(shù)據(jù)
var links= series.links;//獲取所有連線
if(params.dataType=="node"){ //dataType可以是edge(線條)或node(數(shù)據(jù))
var id=params.data.id;
var categoryName = series.categories[params.data.category].name;//獲取當(dāng)前節(jié)點(diǎn)的圖例名稱
var str=categoryName+":"+nodesOption[id].name;
var i = 0;
var map = {};
for( i = 0 ; i < links.length; i++){
map[links[i].source] = links[i].target;
}

while(true){
if(map[id] == undefined){
break;
}
//獲取父節(jié)點(diǎn)的圖例名稱并連接
str =series.categories[nodesOption[map[id]].category].name+":"+nodesOption[map[id]].name+"->" + str;
id = map[id] ;
}
return str;
}else if(params.dataType=="edge"){ //當(dāng)鼠標(biāo)停留在連線上時(shí)，暫不處理
return "";
}
}

function openOrFold(params) { //該事件會(huì)提示節(jié)點(diǎn)間關(guān)系
var str = appendPath(params);
document.getElementById("main_1").innerHTML = str;
return str;
}
//var ecConfig = echarts.config; echarts2的獲取事件方法，當(dāng)前為echarts3
myChart.on('mouseover', openOrFold);
//'click'、'dblclick'、'mousedown'、'mousemove'、'mouseup'、'mouseover'、'mouseout'
/*ECharts3 方法部分結(jié)束*/

/*ECharts3 結(jié)束*/
</script>
</body>
</html>

轉(zhuǎn)載于:https://www.cnblogs.com/yaomengli/p/8963575.html

總結(jié)

以上是生活随笔為你收集整理的graph 关系图设置的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

关系
Graph

上一篇：怎么看待腾讯元宝对信息传播的影响？
下一篇：全选checkbox只能执行一次的问题

编程问答

graph 关系图 设置

總結(jié)

graph 关系图设置