<!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">
<!-- 使用IE8以上的渲染 -->
<!-- <meta name="renderer" content="webkit|ie-comp|ie-stand"> -->
<!-- 三個參數分別代表極速、兼容、標准模式，適用於360瀏覽器 -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>監控管理系統</title>
<script type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/include/jquery.min.js">
</script>
<script type="text/javascript" src="${pageContext.request.contextPath}/include/echarts.js">
</script> <!--導入的為ECharts3的js -->
</head>
<body>
<div style="padding:20px;width:100%;height:100%;">
<!-- 為 ECharts 准備一個具備大小（寬高）的 DOM -->
<div id="main" style="width: 1104px;height:464px;">
</div>
<div id='main_1' style="position: relative;height:15px;width: 100%;color:#A52A2A">節點關系提示區</div>
</div>
</body>
</html>
echarts 真正 代碼實現
// 基於准備好的dom，初始化ECharts實例
var myChart = echarts.init(document.getElementById('main'), 'macarons');
// 指定圖表的配置項和數據
var option = {
tooltip : {
show : true, //默認顯示
showContent:true, //是否顯示提示框浮層
trigger:'item',//觸發類型，默認數據項觸發
triggerOn:'click',//提示觸發條件，mousemove鼠標移至觸發，還有click點擊觸發
alwaysShowContent:false, //默認離開提示框區域隱藏，true為一直顯示
showDelay:0,//浮層顯示的延遲，單位為 ms，默認沒有延遲，也不建議設置。在 triggerOn 為 'mousemove' 時有效。
hideDelay:200,//浮層隱藏的延遲，單位為 ms，在 alwaysShowContent 為 true 的時候無效。
enterable:false,//鼠標是否可進入提示框浮層中，默認為false，如需詳情內交互，如添加鏈接，按鈕，可設置為 true。
position:'right',//提示框浮層的位置，默認不設置時位置會跟隨鼠標的位置。只在 trigger 為'item'的時候有效。
confine:false,//是否將 tooltip 框限制在圖表的區域內。外層的 dom 被設置為 'overflow: hidden'，或者移動端窄屏，導致 tooltip 超出外界被截斷時，此配置比較有用。
transitionDuration:0.4,//提示框浮層的移動動畫過渡時間，單位是 s，設置為 0 的時候會緊跟着鼠標移動。
formatter: function (params, ticket, callback) {
//判斷數據，提供相應的url。
var path="";
var node=params.data; //當前選中節點數據
var category=params.data.category; //選中節點圖例0負載 1中間件 2端口號 3數據庫 4用戶名
if(category==2){ //為jvm 虛擬機各類參數的路徑
path = "${ctx}/weblogic.do?host=" + node.host + "&port="
+ node.port + "&username=" + node.username
+ "&pwd=" + node.pwd; //准備訪問路徑
}else if(category==4){ //為jdbc 數據庫的路徑
path = "${ctx}/oracle.do?host=" + node.host + "&port="
+ node.port + "&username=" + node.username
+ "&pwd=" + node.pwd + "&instance="
+ node.instance; //准備訪問路徑
}
console.log(params);
$.ajax({
async : true,//設置異、同步加載
cache : false,//false就不會從瀏覽器緩存中加載請求信息了
type : 'post',
dataType : "json",
url : path,//請求的action路徑
success : function(data) { //請求成功后處理函數。
//加工返回后的數據
debugger;
if(category==2){ //當選擇端口號時
var res = 'jvm最大內存值:' + data.memoryMaxSize+'<br/>';
res+='jvm空閑內存值:'+data.memoryFreeSize+'<br/>';
res+='jvm內存使用率：'+data.memoryPer+'<br/>';
res+='空閑線程：'+data.ideThread+'<br/>';
res+='總線程：'+data.totalThread+'<br/>';
res+='每秒處理的線程數比率：'+data.throuhput+'<br/>';
callback(ticket,res);
}else if(category==4){//當選擇用戶名時
var res = '當前鏈接數：'+data.processCount+'<br/>';
res+='最大鏈接數：'+data.maxProcessCount+'<br/>';
callback(ticket,res);
}
},
error : function() {//請求失敗處理函數
$.messager.alert('警告', '請求失敗！', 'warning');
}
});
if(category==2||category==4){ //當選擇端口號與用戶名時提示加載
return "loading";
}else{ //其他情況顯示所屬圖例以及名稱
return myChart.getOption().series[params.seriesIndex].categories[params.data.category].name+":"+params.name;
}
}
},
legend : { //=========圖表控件
show : true,
data : [ {
name : '負載',
icon : 'rect'//'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
},
{
name : '中間件',
icon : 'roundRect'
}, {
name : '端口號',
icon : 'circle'
}, {
name : '數據庫',
icon : 'circle'
},{
name : '用戶名',
icon : 'roundRect'
} ]
},
series : [ {
type : 'graph', //關系圖
name : "監控管理系統", //系列名稱，用於tooltip的顯示，legend 的圖例篩選，在 setOption 更新數據和配置項時用於指定對應的系列。
layout : 'force', //圖的布局，類型為力導圖，'circular' 采用環形布局，見示例 Les Miserables
legendHoverLink : true,//是否啟用圖例 hover(懸停) 時的聯動高亮。
hoverAnimation : true,//是否開啟鼠標懸停節點的顯示動畫
coordinateSystem : null,//坐標系可選
xAxisIndex : 0, //x軸坐標 有多種坐標系軸坐標選項
yAxisIndex : 0, //y軸坐標
force : { //力引導圖基本配置
//initLayout: ,//力引導的初始化布局，默認使用xy軸的標點
repulsion : 100,//節點之間的斥力因子。支持數組表達斥力范圍，值越大斥力越大。
gravity : 0.03,//節點受到的向中心的引力因子。該值越大節點越往中心點靠攏。
edgeLength :80,//邊的兩個節點之間的距離，這個距離也會受 repulsion。[10, 50] 。值越小則長度越長
layoutAnimation : true
//因為力引導布局會在多次迭代后才會穩定，這個參數決定是否顯示布局的迭代動畫，在瀏覽器端節點數據較多（>100）的時候不建議關閉，布局過程會造成瀏覽器假死。
},
roam : true,//是否開啟鼠標縮放和平移漫游。默認不開啟。如果只想要開啟縮放或者平移，可以設置成 'scale' 或者 'move'。設置成 true 為都開啟
nodeScaleRatio : 0.6,//鼠標漫游縮放時節點的相應縮放比例，當設為0時節點不隨着鼠標的縮放而縮放
draggable : true,//節點是否可拖拽，只在使用力引導布局的時候有用。
focusNodeAdjacency : true,//是否在鼠標移到節點上的時候突出顯示節點以及節點的邊和鄰接節點。
//symbol:'roundRect',//關系圖節點標記的圖形。ECharts 提供的標記類型包括 'circle'(圓形), 'rect'（矩形）, 'roundRect'（圓角矩形）, 'triangle'（三角形）, 'diamond'（菱形）, 'pin'（大頭針）, 'arrow'（箭頭） 也可以通過 'image://url' 設置為圖片，其中 url 為圖片的鏈接。'path:// 這種方式可以任意改變顏色並且抗鋸齒
//symbolSize:10 ,//也可以用數組分開表示寬和高，例如 [20, 10] 如果需要每個數據的圖形大小不一樣，可以設置為如下格式的回調函數：(value: Array|number, params: Object) => number|Array
//symbolRotate:,//關系圖節點標記的旋轉角度。注意在 markLine 中當 symbol 為 'arrow' 時會忽略 symbolRotate 強制設置為切線的角度。
//symbolOffset:[0,0],//關系圖節點標記相對於原本位置的偏移。[0, '50%']
edgeSymbol : [ 'none', 'none' ],//邊兩端的標記類型，可以是一個數組分別指定兩端，也可以是單個統一指定。默認不顯示標記，常見的可以設置為箭頭，如下：edgeSymbol: ['circle', 'arrow']
edgeSymbolSize : 10,//邊兩端的標記大小，可以是一個數組分別指定兩端，也可以是單個統一指定。
itemStyle : {//===============圖形樣式，有 normal 和 emphasis 兩個狀態。normal 是圖形在默認狀態下的樣式；emphasis 是圖形在高亮狀態下的樣式，比如在鼠標懸浮或者圖例聯動高亮時。
normal : { //默認樣式
label : {
show : true
},
borderType : 'solid', //圖形描邊類型，默認為實線，支持 'solid'（實線）, 'dashed'(虛線), 'dotted'（點線）。
borderColor : 'rgba(255,215,0,0.4)', //設置圖形邊框為淡金色,透明度為0.4
borderWidth : 2, //圖形的描邊線寬。為 0 時無描邊。
opacity : 1
// 圖形透明度。支持從 0 到 1 的數字，為 0 時不繪制該圖形。默認0.5
},
emphasis : {//高亮狀態
}
},
lineStyle : { //==========關系邊的公用線條樣式。
normal : {
color : 'rgba(255,0,255,0.4)',
width : '3',
type : 'dotted', //線的類型 'solid'（實線）'dashed'（虛線）'dotted'（點線）
curveness : 0.3, //線條的曲線程度，從0到1
opacity : 1
// 圖形透明度。支持從 0 到 1 的數字，為 0 時不繪制該圖形。默認0.5
},
emphasis : {//高亮狀態
}
},
label : { //=============圖形上的文本標簽
normal : {
show : true,//是否顯示標簽。
position : 'inside',//標簽的位置。['50%', '50%'] [x,y]
textStyle : { //標簽的字體樣式
color : '#cde6c7', //字體顏色
fontStyle : 'normal',//文字字體的風格 'normal'標准 'italic'斜體 'oblique' 傾斜
fontWeight : 'bolder',//'normal'標准'bold'粗的'bolder'更粗的'lighter'更細的或100 | 200 | 300 | 400...
fontFamily : 'sans-serif', //文字的字體系列
fontSize : 12, //字體大小
}
},
emphasis : {//高亮狀態
}
},
edgeLabel : {//==============線條的邊緣標簽
normal : {
show : false
},
emphasis : {//高亮狀態
}
},
//別名為nodes name:影響圖形標簽顯示,value:影響選中后值得顯示,category:所在類目的index,symbol:類目節點標記圖形,symbolSize:10圖形大小
//label:標簽樣式。
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 對應以及格式化 tooltip 的內容。 label有效
{
name : '負載',
symbol : 'rect',
label : { //標簽樣式
}
}, {
name : '中間件',
symbol : 'rect'
}, {
name : '端口號',
symbol : 'roundRect'
}, {
name : '數據庫',
symbol : 'roundRect'
}, {
name : '用戶名',
symbol : 'roundRect'
} ],
links : [ //edges是其別名代表節點間的關系數據。
{
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
} ]
} ]
};
// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);
/*ECharts3 方法部分 開始*/
function appendPath(params){ //拼接節點關系並顯示在左下角，
var option = myChart.getOption();
var series = option.series[params.seriesIndex]; //獲取圖表
var nodesOption = series.data;//獲取所有數據
var links= series.links;//獲取所有連線
if(params.dataType=="node"){ //dataType可以是edge(線條)或node(數據)
var id=params.data.id;
var categoryName = series.categories[params.data.category].name;//獲取當前節點的圖例名稱
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;
}
//獲取父節點的圖例名稱並連接
str =series.categories[nodesOption[map[id]].category].name+":"+nodesOption[map[id]].name+"->" + str;
id = map[id] ;
}
return str;
}else if(params.dataType=="edge"){ //當鼠標停留在連線上時，暫不處理
return "";
}
}
function openOrFold(params) { //該事件會提示節點間關系
var str = appendPath(params);
document.getElementById("main_1").innerHTML = str;
return str;
}
//var ecConfig = echarts.config; echarts2的獲取事件方法，當前為echarts3
myChart.on('mouseover', openOrFold);
//'click'、'dblclick'、'mousedown'、'mousemove'、'mouseup'、'mouseover'、'mouseout'
/*ECharts3 方法部分 結束*/
/*ECharts3 結束*/
轉載於：http://www.cnblogs.com/koala2016/archive/2016/12/01/6123003.html