echartslearning/index.html at master · whuhzx/echartslearning · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Echartsleanring</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.header{
			width: 100%;
			height: 150px;
			background-color: #1B744B;
		}
		.container{
			width: 850px;
			margin: 20px auto 40px;
			overflow: hidden;
		}
		.box{
			position: relative;
			overflow: hidden;
			width: 245px;
			height: 175px;
			border: 1px solid #ccc;
			margin: 15px;
			float: left;
		}
		.box a img{
			width: 100%;
			height: 100%;
		}
		.note{
			position: absolute;
			bottom: -40px;
			width: 100%;
			height: 40px;
			line-height: 40px;
			text-align: center;
			background-color: #1B744B;
			font-family: "microsoft yahei", Arial;
			color: #fff;
			transition: bottom 0.3s;
			-moz-transition: bottom 0.3s;
			-webkit-transition: bottom 0.3s;
			-o-transition: bottom 0.3s;
		}
		.box:hover .note{
			bottom: 0;
		}
	</style>
</head>
<body>
	<div class="header">
	</div>
	<div class="container">
		<div class="box">
			<a href="./demo1.html" target="_blank"> <img src="./demoimg/demo1.jpg"></a>
			<div class="note">柱形图</div>
		</div>
		<div class="box">
			<a href="./demo2.html" target="_blank"> <img src="./demoimg/demo2.jpg"></a>
			<div class="note">柱形图</div>
		</div>
		<div class="box">
			<a href="./demo3.html" target="_blank"> <img src="./demoimg/demo3.jpg"></a>
			<div class="note">柱形图</div>
		</div>
		<div class="box">
			<a href="./demo4.html" target="_blank"> <img src="./demoimg/demo4.jpg"></a>
			<div class="note">堆积图</div>
		</div>
		<div class="box">
			<a href="./demo5.html" target="_blank"> <img src="./demoimg/demo5.jpg"></a>
			<div class="note">堆积图</div>
		</div>
		<div class="box">
			<a href="./demo6.html" target="_blank"> <img src="./demoimg/demo6.jpg"></a>
			<div class="note">环形图</div>
		</div>
		<div class="box">
			<a href="./demo7.html" target="_blank"> <img src="./demoimg/demo7.jpg"></a>
			<div class="note">散点图</div>
		</div>
		<div class="box">
			<a href="./demo8.html" target="_blank"> <img src="./demoimg/demo8.jpeg"></a>
			<div class="note">气泡图</div>
		</div>
		<div class="box">
			<a href="./demo9.html" target="_blank"> <img src="./demoimg/demo9.jpg"></a>
			<div class="note">雷达图</div>
		</div>
		<div class="box">
			<a href="./demo10.html" target="_blank" ><img src="./demoimg/demo10.jpg"></a>
			<div class="note">树图</div>
		</div>
		<div class="box">
			<a href="./demo11.html" target="_blank" ><img src="./demoimg/demo11.jpg"></a>
			<div class="note">地图</div>
		</div>
	</div>
</body>
</html>