hostTopo.jsp
4 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<%@page language="java" contentType="text/html;charset=utf-8" %>
<%@ page import="com.ui.contants.ProjectConstant"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<jsp:include page="/jsp/common/include.jsp" flush="true"/>
<script>
var contextPath = '<%=basePath %>';
</script>
<title>YOHO!运维</title>
</head>
<body>
<!-- 头部 -->
<div id="head">
</div>
<!-- 右侧具体内容 -->
<div id="content">
<div id="breadcrumb">
<a href="#" title="Go to Home" class="tip-bottom"><i
class="icon-home"></i> Home</a> <a href="#" class="current">主机拓扑图</a>
</div>
<div class="container-fluid">
<div class="widget-box">
<div class="widget-title">
<h5>主机管理-主机拓扑图</h5>
</div>
<div class="widget-content nopadding">
<div id="hostTopoDiv" class="input-group"
style="height: 600px;width: 1000px;margin-left: 50px">
</div>
</div>
</div>
</div>
</div>
</body>
<script src="<%=basePath %>script/common/genarate_left_panel.js?v=<%=ProjectConstant.MENU_VERSION %>"></script>
<script>
$("#li_host").addClass("active open");
$("#li_hostTopo").addClass("active");
</script>
<script>
var theme = {
// 默认色板
color: [
'#68a54a',
'#408829',
'#a9cba2',
'#86b379',
'#397b29',
'#8abb6f',
'#759c6a',
'#bfd3b7'
]};
var dataOptionList=${echartDataList};
var option = {
title: {
text: '主机topo-'+"前台"
},
tooltip: {
show:false,
//trigger:'item',
//enterable:true,
formatter:function(){
return "b<br/>a : c分<input type='checkbox'/>";
}
},
animationDurationUpdate: 1500,
animationEasingUpdate: 'quinticInOut',
series : [
{
silent:false,//图形是否不响应和触发鼠标事件
legendHoverLink:false,
hoverAnimation:false,
focusNodeAdjacency:false,
//left:0,
top:50,
type: 'graph',
layout: 'none',
symbolSize:50,
label: {
normal: {
show: true
}
},
symbol:'roundRect',
edgeSymbol: ['roundRect', 'arrow'],
edgeSymbolSize: [4, 10],
edgeLabel: {
normal: {
textStyle: {
fontSize: 20
}
}
},
//data:d1,
data:dataOptionList,
links: [],
lineStyle: {
normal: {
opacity: 0.9,
width: 2
}
}
}
]
};
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('hostTopoDiv'),theme);
// var myChart = echarts.init(document.getElementById('hostTopoDiv'));
$(function () {
//更新曲线图
myChart.setOption(option);
myChart.on("click", function (param){
alert(param.dataIndex+':'+option.series[0].data[param.dataIndex].name+":"+option.series[0].data[param.dataIndex].itemStyle.normal.color);
option.series[0].data[param.dataIndex].itemStyle.normal['color']="#ff5e52";
myChart.setOption(option,true);//重绘
});
});
</script>