<!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">
<!-- Use IE8+ rendering-->
<!-- <meta name="renderer" content="webkit|ie-comp|ie -stand"> -->
<!-- The three parameters represent extreme speed, compatibility, standard mode, suitable for 360 browsers -->
<meta http-equiv="Content-Type" content="text/html; charset =utf-8">
<title>Monitoring Management System</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> <!--导入的为ECharts3的js -->
</head>
<body>
<div style="padding:20px;width:100%;height:100%;">
<!-- Prepare a DOM with size (width and height) for ECharts -->
<div id="main" style=" width: 1104px;height:464px;">
</div>
<div id='main_1' style="position: relative;height:15px;width: 100%;color:#A52A2A">Node relationship prompt area</div >
</div>
<script>
// Based on the prepared dom, initialize the ECharts instance
var myChart = echarts.init(document.getElementById('main'), 'macarons');
// Specify the configuration items and data of the chart
var option = {
tooltip : {
show : true, //
showContent:true by default, //whether to display the prompt box floating layer
trigger:'item',//Trigger type, the default data item triggers
triggerOn:'click',//Prompts the trigger condition, mousemove is moved to trigger, and click is triggered
alwaysShowContent:false, //The default is to leave the prompt box area to hide, true is to always display
showDelay:0,//The delay of the floating layer display, the unit is ms, there is no delay by default, and it is not recommended to set it. Valid when triggerOn is 'mousemove'.
hideDelay:200,//The delay of the floating layer hiding, the unit is ms, it is invalid when alwaysShowContent is true.
enterable:false,//Whether the mouse can enter the floating layer of the prompt box, the default is false, if you need to interact in the details, such as adding links and buttons, you can set it to true.
position:'right',//The position of the prompt box floating layer, the position will follow the position of the mouse if it is not set by default. Only valid when trigger is 'item'.
confine:false,//Whether to limit the tooltip box to the area of the chart. This configuration is useful when the outer dom is set to 'overflow: hidden', or when the mobile screen is narrow, causing the tooltip to be truncated beyond the outside world.
transitionDuration:0.4,//The transition time of the moving animation of the floating layer of the prompt box, the unit is s, when it is set to 0, it will follow the mouse movement.
formatter: function (params, ticket, callback) {
// Judge the data and provide the corresponding url.
var path="";
var node=params.data; //The currently selected node data
var category=params.data.category; //The selected node legend 0 load 1 middleware 2 port number 3 database 4 username
if(category==2){ // Path
= "${ctx}/weblogic.do?host=" + node.host + "&port="
+ node.port + "&username=" + node.username
+ "&pwd= path for various parameters of jvm virtual machine " + node.pwd; //Prepare access path
}else if(category==4){ //Path
= "${ctx}/oracle.do?host=" + node.host + "&port ="
+ node.port + "&username=" + node.username
+ "&pwd=" + node.pwd + "&instance="
+ node.instance; //Prepare to access the path
}
console.log(params);
$.ajax({
async : true,//Set different and synchronous loading
cache : false,//false will not load request information from browser cache
type : 'post',
dataType : "json",
url : path,//request action path
success : function(data) { //processing function after successful request.
//processing returned data
debugger;
if(category==2){ //when When selecting the port number,
var res = 'jvm maximum memory value:' + data.memoryMaxSize+'<br/>';
res+='jvm free memory value:'+data.memoryFreeSize+'<br/>';
res+='jvm memory usage: '+data.memoryPer+'<br/>';
res+='idle threads:'+data.ideThread+'<br/>';
res+='total threads:'+data.totalThread+' <br/>';
res+='The ratio of threads processed per second:'+data.throuhput+'<br/>';
callback(ticket,res);
}else if(category==4){//When selected
var res = 'Current number of links: '+data.processCount+'<br/>'; res
+='Maximum number of links: '+data.maxProcessCount+'<br/>';
callback(ticket,res);
}
},
error : function() {//Request failure handling function
$.messager.alert('Warning', 'Request failed!', 'warning');
}
});
if(category==2||category==4){ //Prompt when selecting port number and username Loading
return "loading";
}else{ //In other cases, display the legend and name
return myChart.getOption().series[params.seriesIndex].categories[params.data.category].name+":"+params.name;
}
}
},
legend : { //==========Chart control
show : true,
data : [ {
name : 'load',
icon : 'rect'//'circle', 'rect', ' roundRect', 'triangle', 'diamond', 'pin', 'arrow'
},
{
name : 'middleware',
icon : 'roundRect'
}, {
name : 'port number',
icon : 'circle'
}, {
name : 'database',
icon : 'circle'
},{
name : ' Username',
icon : 'roundRect'
} ]
},
series : [ {
type : 'graph', //relation graph
name : "Monitoring and Management System", //series name, used for tooltip display, legend filtering for legend , which is used to specify the corresponding series when setOption updates data and configuration items.
layout : 'force', //The layout of the graph, the type is force map, 'circular' adopts a circular layout, see the example Les Miserables
legendHoverLink : true,//Whether to enable the linkage highlighting when the legend hovers (hover).
hoverAnimation : true,//Whether to enable the display animation of the mouse hover node
coordinateSystem : null,//The coordinate system is optional
xAxisIndex : 0, //The x-axis coordinate has multiple coordinate system axis coordinate options
yAxisIndex : 0, //y-axis Coordinate
force : { //Basic configuration of the force guide graph
//initLayout: ,//The initial layout of the force guide, the punctuation of the xy axis is used by default
repulsion: 100,//The repulsion factor between nodes. Arrays are supported to express the range of repulsion, and the larger the value, the greater the repulsion.
gravity : 0.03,//The gravitational factor towards the center of the node. The larger the value, the closer the node is to the center point.
edgeLength: 80,//The distance between the two nodes of the edge, this distance will also be affected by repulsion. [10, 50] . The smaller the value, the longer the length
layoutAnimation : false
//Because the force-guided layout will be stable after multiple iterations, this parameter determines whether to display the iterative animation of the layout. It is not recommended to close it when there are many node data (>100) on the browser side. The layout process will cause the browser to suspended animation.
},
roam : true,//Whether to enable mouse zoom and pan roaming. Not enabled by default. If you only want to enable zoom or pan, you can set it to 'scale' or 'move'. Set to true to enable
nodeScaleRatio: 0.6,//The corresponding scaling ratio of the node when the mouse roams and zooms, when set to 0, the node does not scale with the zoom of the mouse.
Draggable: true,//Whether the node can be dragged, only in use Useful when force guiding the layout.
focusNodeAdjacency : true,//Whether to highlight the node and its edges and adjacent nodes when the mouse moves over the node.
//symbol:'roundRect',//The graph marked by the graph node. Mark types provided by ECharts include 'circle' (circle), 'rect' (rectangle), 'roundRect' (rounded rectangle), 'triangle' (triangle), 'diamond' (diamond), 'pin' (pin) , 'arrow' (arrow) can also be set to an image via 'image://url', where url is the link to the image. 'path:// This method can change the color arbitrarily and antialiasing
//symbolSize:10 ,//Arrays can also be used to represent width and height separately, for example [20, 10] If you need different graphics sizes for each data, you can set it as a callback function in the following format: (value: Array|number , params: Object) => number|Array
//symbolRotate:,//The rotation angle of the node marker in the relationship graph. Note that in markLine when symbol is 'arrow', symbolRotate is ignored and forced to the angle of the tangent.
//symbolOffset:[0,0],//The offset of the graph node marker relative to the original position. [0, '50%']
edgeSymbol : [ 'none', 'none' ],//The marker type at both ends of the edge, which can be an array to specify both ends respectively, or a single unified specification. Markers are not displayed by default. Common ones can be set to arrows, as follows: edgeSymbol: ['circle', 'arrow']
edgeSymbolSize : 10,//The size of the markers at both ends of the edge, which can be an array to specify both ends respectively, or a single unified designation.
itemStyle : {//==============Graphic style, with two states of normal and emphasis. normal is the style of the graph in the default state; emphasis is the style of the graph in the highlighted state, such as when the mouse is hovered or the legend is highlighted.
normal : { //Default style
label :
},
borderType : 'solid', //Graphic stroke type, the default is solid line, supports 'solid' (solid line), 'dashed' (dotted line), 'dotted' (dotted line).
borderColor : 'rgba(255,215,0,0.4)', //Set the graphic border to light gold and the transparency to 0.4
borderWidth : 2, //The stroke width of the graphic. When 0, there is no stroke.
opacity : 1
// Graphics transparency. Numbers from 0 to 1 are supported, at 0 the graph is not drawn. Default 0.5
},
emphasis : {//highlighted state
}
},
lineStyle : { //==========Common line style for relation edges.
normal : {
color : 'rgba(255,0,255,0.4)',
width : '3',
type : 'dotted',
curveness : 0.3, // The curve degree of the line, from 0 to 1
opacity : 1
// Graphic transparency. Numbers from 0 to 1 are supported, at 0 the graph is not drawn. Default 0.5
},
emphasis : {//highlighted state
}
},
label : { //==============Text label on the graphic
normal : {
show : true,//whether to display the label .
position : 'inside',//The position of the label. ['50%', '50%'] [x,y]
textStyle : { //label font style
color : '#cde6c7', //font color
fontStyle : 'normal',//text font style 'normal' 'standard 'italic' italic 'oblique' oblique
fontWeight : 'bolder',//'normal' standard 'bold' thicker 'bolder' thicker 'lighter' thinner or 100 | 200 | 300 | 400...
fontFamily : 'sans-serif', // The font family of the text
fontSize : 12, //font size
}
},
emphasis : {//highlighted state
}
},
edgeLabel : {//============== The edge label of the
line : {
show : false
},
emphasis : {//Highlight status
}
},
//Aliased as nodes name: Affects the display of graphic labels, value: Affects worthy display after selection, category: index of the category, symbol: category Node marker graph, symbolSize: 10 graph size
//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: used to correspond to legend and format the content of the tooltip. label is valid
{
name : 'load',
symbol : 'rect',
label : { //label style
}
}, {
name : 'middleware',
symbol : 'rect'
},
symbol : 'roundRect'
}, {
name : 'database',
symbol : 'roundRect'
}, {
name : 'username',
symbol : 'roundRect'
} ],
links : [ //edges are aliases representing nodes relational data.
{
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
} ]
} ]
};
// Display the chart using the config and data just specified.
myChart.setOption(option);
/*ECharts3 method section starts*/
function appendPath(params){ //Splicing the node relationship and displaying it in the lower left corner,
var option = myChart.getOption();
var series = option.series[params.seriesIndex]; //Get the chart
var nodesOption = series.data;/ /Get all data
var links= series.links;//Get all connections
if(params.dataType=="node"){ //dataType can be edge(line) or node(data)
var id=params.data. id;
var categoryName = series.categories[params.data.category].name;//Get the legend name of the current node
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;
}
//Get the legend name of the parent node and connect
str =series.categories[nodesOption[map[id]].category].name+":" +nodesOption[map[id]].name+"->" + str;
id = map[id] ;
}
return str;
}else if(params.dataType=="edge"){ //When the mouse stays on the connection
Return "";
}
} function openOrFold
(params) { //This event will prompt the relationship between nodes
var str = appendPath(params);
document.getElementById("main_1").innerHTML = str;
return str ;
}
//var ecConfig = echarts.config; Get event method of echarts2, currently echarts3
myChart.on('mouseover', openOrFold);
//'click', 'dblclick', 'mousedown', 'mousemove', 'mouseup' , 'mouseover', 'mouseout'
/*ECharts3 method section end*/
/*ECharts3 end*/
</script>
</body>
</html>
graph graph settings
Guess you like
Origin http://43.154.161.224:23101/article/api/json?id=324967592&siteId=291194637
Recommended
Ranking