-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
68 lines (67 loc) · 3.25 KB
/
index.html
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
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="jquery-SearchBar/css/search-form.css">
<link rel="stylesheet" type="text/css" href="css/css3buttons.css">
<script src="http://cdn.bootcss.com/jquery/1.12.3/jquery.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
<script src="http://libs.baidu.com/html5shiv/3.7/html5shiv.min.js"></script>
<script src="layer/layer.js"></script>
<script src="graph.js"></script>
<script src="parallel.js"></script>
<script src="radar.js"></script>
</head>
<body style="height: 100%; margin: 0; background-color: #333">
<div ><button class="big pill button" onclick="showSelected()" ><span class="book icon"></span>Data</button></div>
<div id="block1" style="height: 105%; width: 65%; float: left;position: absolute; right: 560px;"></div>
<div id="block2" style="height: 57%; width: 42%; position: absolute; bottom: 320px; right: 1px;"></div>
<div id="block3" style="height: 40%; width: 40%; position: absolute; top: 450px; right: 1px"></div>
<script type="text/javascript">
var dom = document.getElementById("block1");
var myChart = echarts.init(dom);
function searchToggle(obj, evt) {
var container = $(obj).closest('.search-wrapper');
if (!container.hasClass('active')) {
container.addClass('active');
evt.preventDefault();
} else if (container.hasClass('active') && $(obj).closest('.input-holder').length == 0) {
container.removeClass('active');
// clear input
var flag = false;
if (container.find('.search-input').val().length > 0) {
flag = true;
}
container.find('.search-input').val('');
if (flag) {
getParallel(0);
}
} else {
value = $(obj).prev().val().trim();
var one = parseInt(value);
if (isNaN(one) || one < 10000 || one >= 20000) one = 0;
myChart.clear();
getParallel(one);
getRelation("block2", one);
getRadar("block3",one);
}
}
window.onload=function () {
getRelation("block2",0);
getRadar("block3",0);
getParallel(0);
}
</script>
<div class="search-wrapper" style="position: absolute; top: 70px;">
<div class="input-holder">
<input type="text" class="search-input"/>
<button class="search-icon" onclick="searchToggle(this, event);"><span></span></button>
</div>
<span class="close" onclick="searchToggle(this, event);"></span>
</div>
</body>
</html>