-
Notifications
You must be signed in to change notification settings - Fork 1
/
main.html
264 lines (249 loc) · 9.13 KB
/
main.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
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
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>导航产品部（内部）日报系统登录</title>
<meta name="author" content="LeonYang" />
<link rel="stylesheet" type="text/css" href="css/style.css">
<!--[if lt IE 9]>
<script src="js/html5.js"></script>
<![endif]-->
<script src="js/jquery.js"></script>
<script src="js/jquery.mCustomScrollbar.concat.min.js"></script>
<script>
(function($) {
$(window).load(function() {
$("a[rel='load-content']").click(function(e) {
e.preventDefault();
var url = $(this).attr("href");
$.get(url, function(data) {
$(".content .mCSB_container").append(data); //load new content inside .mCSB_container
//scroll-to appended content
$(".content").mCustomScrollbar("scrollTo", "h2:last");
});
});
$(".content").delegate("a[href='top']", "click", function(e) {
e.preventDefault();
$(".content").mCustomScrollbar("scrollTo", $(this).attr("href"));
});
});
})(jQuery);
</script>
</head>
<body>
<!--header-->
<header>
<h1><img src="images/admin_logo.png" /></h1>
<ul class="rt_nav">
<li><a href="http://www.mycodes.net" target="_blank" class="website_icon">站点首页</a></li>
<li><a href="#" class="clear_icon">清除缓存</a></li>
<li><a href="#" class="admin_icon">LeonYang</a></li>
<li><a href="#" class="set_icon">账号设置</a></li>
<li><a href="login.html" class="quit_icon">安全退出</a></li>
</ul>
</header>
<!--aside nav-->
<!--aside nav-->
<aside class="lt_aside_nav content mCustomScrollbar">
<ul>
<li>
<dl>
<dt>项目管理</dt>
<!--当前链接则添加class:active-->
<dd><a href="product_list.html" class="active">项目查看</a></dd>
<dd><a href="product_detail.html">项目调整</a></dd>
<dd><a href="order_detail.html">人员划分</a></dd>
<dd><a href="order_detail.html">组织结构</a></dd>
</dl>
</li>
<li>
<dl>
<dt>动态发布</dt>
<dd><a href="user_list.html">个人博客</a></dd>
<dd><a href="user_detail.html">资料分享</a></dd>
<dd><a href="user_rank.html">发布日报</a></dd>
<dd><a href="user_list.html">发布收集</a></dd>
<dd><a href="user_detail.html">填写收集</a></dd>
</dl>
</li>
<li>
<dl>
<dt>项目众筹</dt>
<dd><a href="setting.html">技术众筹</a></dd>
<dd><a href="setting.html">工具众筹</a></dd>
<dd><a href="setting.html">资料众筹</a></dd>
<dd><a href="setting.html">团购众筹</a></dd>
<dd><a href="setting.html">活动众筹</a></dd>
</dl>
</li>
<li>
<dl>
<dt>设置</dt>
<dd><a href="express_list.html">个人资料</a></dd>
<dd><a href="pay_list.html">个人评价</a></dd>
</dl>
</li>
<li>
<p class="btm_infor">© LeonYang copyright</p>
</li>
</ul>
</aside>
<style>
.dataStatistic {
width: 400px;
height: 200px;
border: 1px solid #ccc;
margin: 0 auto;
margin: 10px;
overflow: hidden
}
#cylindrical {
width: 400px;
height: 200px;
margin-top: -15px
}
#line {
width: 400px;
height: 200px;
margin-top: -15px
}
#pie {
width: 400px;
height: 200px;
margin-top: -15px
}
</style>
<script src="js/amcharts.js" type="text/javascript"></script>
<script src="js/serial.js" type="text/javascript"></script>
<script src="js/pie.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(e) {
GetSerialChart();
MakeChart(json);
});
var json = [{
"name": "数据1",
"value": "35"
}, {
"name": "数据2",
"value": "60"
}, {
"name": "数据3",
"value": "22"
}, {
"name": "数据4",
"value": "65"
}, {
"name": "数据5",
"value": "35"
}, {
"name": "数据6",
"value": "22"
}, {
"name": "数据7",
"value": "43"
}, {
"name": "数据8",
"value": "55"
}]
//柱状图
function GetSerialChart() {
chart = new AmCharts.AmSerialChart();
chart.dataProvider = json;
//json数据的key
chart.categoryField = "name";
//不选择
chart.rotate = false;
//值越大柱状图面积越大
chart.depth3D = 20;
//柱子旋转角度角度
chart.angle = 30;
var mCtCategoryAxis = chart.categoryAxis;
mCtCategoryAxis.axisColor = "#efefef";
//背景颜色透明度
mCtCategoryAxis.fillAlpha = 0.5;
//背景边框线透明度
mCtCategoryAxis.gridAlpha = 0;
mCtCategoryAxis.fillColor = "#efefef";
var valueAxis = new AmCharts.ValueAxis();
//左边刻度线颜色
valueAxis.axisColor = "#ccc";
//标题
valueAxis.title = "3D柱状图Demo";
//刻度线透明度
valueAxis.gridAlpha = 0.2;
chart.addValueAxis(valueAxis);
var graph = new AmCharts.AmGraph();
graph.title = "value";
graph.valueField = "value";
graph.type = "column";
//鼠标移入提示信息
graph.balloonText = "测试数据[[category]] [[value]]";
//边框透明度
graph.lineAlpha = 0.3;
//填充颜色
graph.fillColors = "#b9121b";
graph.fillAlphas = 1;
chart.addGraph(graph);
// CURSOR
var chartCursor = new AmCharts.ChartCursor();
chartCursor.cursorAlpha = 0;
chartCursor.zoomable = false;
chartCursor.categoryBalloonEnabled = false;
chart.addChartCursor(chartCursor);
chart.creditsPosition = "top-right";
//显示在Main div中
chart.write("cylindrical");
}
//折线图
AmCharts.ready(function() {
var chart = new AmCharts.AmSerialChart();
chart.dataProvider = json;
chart.categoryField = "name";
chart.angle = 30;
chart.depth3D = 20;
//标题
//chart.addTitle("3D折线图Demo", 15);
var graph = new AmCharts.AmGraph();
chart.addGraph(graph);
graph.valueField = "value";
//背景颜色透明度
graph.fillAlphas = 0.3;
//类型
graph.type = "line";
//圆角
graph.bullet = "round";
//线颜色
graph.lineColor = "#8e3e1f";
//提示信息
graph.balloonText = "[[name]]: [[value]]";
var categoryAxis = chart.categoryAxis;
categoryAxis.autoGridCount = false;
categoryAxis.gridCount = json.length;
categoryAxis.gridPosition = "start";
chart.write("line");
});
//饼图
//根据json数据生成饼状图，并将饼状图显示到div中
function MakeChart(value) {
chartData = eval(value);
//饼状图
chart = new AmCharts.AmPieChart();
chart.dataProvider = chartData;
//标题数据
chart.titleField = "name";
//值数据
chart.valueField = "value";
//边框线颜色
chart.outlineColor = "#fff";
//边框线的透明度
chart.outlineAlpha = .8;
//边框线的狂宽度
chart.outlineThickness = 1;
chart.depth3D = 20;
chart.angle = 30;
chart.write("pie");
}
</script>
</body>
</html>