-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathstatistics_conversation.html
380 lines (324 loc) · 13 KB
/
statistics_conversation.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
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
<!DOCTYPE html>
<html>
<body>
<!-- header -->
<div class="include" data-include="header"></div>
<!-- end header -->
<section class='aside-section'>
<section class="hbox stretch">
<!-- .aside -->
<aside class="bg-Green lter aside hidden-print include" data-include="aside" id="nav"></aside>
<!-- /.aside -->
<section id="content">
<section class="hbox stretch">
<!-- 如果没有三级导航 这段代码注释-->
<!--<aside class="bg-green lter aside-sm hidden-print ybox" id="subNav">
<section class="vbox">
<div class="wrapper header"><span class="margin_lr"></span><span class="margin_lr border-left"> 消费管理</span>
</div>
<section class="scrollable">
<div class="slim-scroll">
<nav class="hidden-xs">
<ul class="nav">
<li>
<div class="aside-li-a active">
<a href="statistics_consume.html">消费统计</a>
</div>
</li>
</ul>
</nav>
</div>
</section>
</section>
</aside>-->
<aside>
<section class="vbox xbox">
<!-- 如果没有三级导航 这段代码注释-->
<!--<div class="head-box"><a href="#subNav" data-toggle="class:hide"> <i
class="fa fa-angle-left text"></i> <i class="fa fa-angle-right text-active"></i> </a>
</div>-->
<div class="wrapper header">
<span class="border-left"> 会话统计</span>
</div>
<section class="scrollable wrapper w-f">
<section class="panel panel-default pos-rlt clearfix ">
<input type="hidden" value="1" id="defaultapp" />
<ul id="myTab" class="nav nav-tabs">
<li class="active"><a data-toggle="tab" data-app="1">全部应用</a></li>
<li ><a data-toggle="tab" data-app="phone">应用二</a></li>
<li ><a data-toggle="tab" data-app="3">应用三</a></li>
<li ><a data-toggle="tab" data-app="4">应用四</a></li>
<li ><a data-toggle="tab" data-app="5">应用五</a></li>
</ul>
</section>
<section class="panel panel-default pos-rlt clearfix ">
<div class="row">
<div class="col-md-9">
<input type="radio" name="stime" value="month" class="selectdata" checked/>日统计
<input type="radio" name="stime" value="year" class="selectdata ml-15" />月统计
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<p class="font18">会话数/消费额统计</p>
</div>
</div>
<!--日统计-->
<div class="row monthform" >
<div class="col-md-12">
<input type="text" class="datepicker currentMonth form-control date_block monthstart" value="2016-07" data-time="2016-06-07" />
<button class="btn btn-primary finddatebtn" data-id="month" >查询</button>
<span class="tips-error monthtips"></span>
</div>
</div>
<!--月统计-->
<div class="row yearform" >
<div class="col-md-12">
<input type="text" class="datepicker form-control currentYear date_block yearstart" value="2016" data-time="2016" />
<button class="btn btn-primary finddatebtn " data-id="year" >查询</button>
<span class="tips-error yeartips"></span>
</div>
</div>
<div class="row">
<div class="col-md-12 scanvas" >
<!--统计列表-->
<div class="ecpanel" id="ecpanel" style=" height: 600px; "></div>
</div>
</div>
</section>
</section>
</section>
</aside>
</section>
<a href="#" class="hide nav-off-screen-block" data-toggle="class:nav-off-screen" data-target="#nav"></a>
</section>
</section>
</section>
<script>
</script>
<script src="js/app.v2.js"></script> <!-- Bootstrap --> <!-- App -->
<script src="js/charts/flot/jquery.flot.min.js" cache="false"></script>
<script src="js/bootbox.min.js"></script>
<script src="js/charts/flot/demo.js" cache="false"></script>
<script src="js/jquery.cookie.min.js"></script>
<script src="js/include.js"></script>
<script src="bower_components/bootstrapvalidator/dist/js/bootstrapValidator.min.js"></script>
<script type="text/javascript" src='./js/bootstrap-datepicker/js/bootstrap-datepicker.js'> </script>
<script type="text/javascript" src='./js/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js'> </script>
<!--统计插件-->
<script src="./js/echarts.min.js" ></script>
<!--统计插件主题-->
<script src="./js/echartstheme/wonderland.js" ></script>
<script>
$('input[name="stime"]').click(function(){
var v = $(this).val();
if(v=='year'){
$('.yearform').show();
$('.monthform').hide();
}else{
$('.monthform').show();
$('.yearform').hide();
}
initchart();
});
//查询
$('.finddatebtn').click(function(){
var id = $(this).attr('data-id');
var tipsclass = '.'+id+'tips';
$(tipsclass).html('');
var starttime = $('.'+id+'start').val();
if(starttime==''){
tips(tipsclass,'请先填写时间'); return;
}
initchart();
});
function tips(tipsclass,tips){
$(tipsclass).html(tips);
}
//应用
$('#myTab li a').click(function(){
var app = $(this).attr('data-app');
$('#defaultapp').val(app);
initchart();
});
//初始时间
function initialStartTime(id){
var starttime = $('.'+id+'start').val();
if(starttime==''){
starttime = $('.'+id+'start').attr('data-time');
}
return starttime;
}
//触发函数
/**
* starttime 时间
* endtime 对比时间
*/
function initchart(){
var type = 'year';
var app = $('#defaultapp').val();
var starttime = initialStartTime(type);
var endtime = '';
var param = {starttime:starttime,endtime:endtime,type:type,app:app};
//异步查询 返回json 数据
//消费额最大值
//会话次数最大值
//数据处理
if(type=='year'){
//注意 tdata 等于 seriesjson[name]
var tdata = new Array('2016年','2017年');
var seriesjson ="[{name:'2016年',type:'line',data:[120, 132, 101, 134, 90, 230, 210,120, 132, 101, 134, 90]},{name:'2017年',type:'line',data:[220, 182, 191, 234, 290, 330, 310]}]";
var seriesjson = eval('('+seriesjson+')');
}else{
//注意 tdata 等于 seriesjson[name]
var tdata = new Array('5月','6月');
var seriesjson ="[{name:'5月',type:'line',data:[120, 132, 101, 134, 90, 230, 210,120, 132, 101, 134, 90, 230, 210,120, 132, 101, 134, 90, 230, 210,120, 132, 101,4000]},{name:'6月',type:'line',data:[220, 182, 191, 234, 290, 330, 310]}]";
var seriesjson = eval('('+seriesjson+')');
}
charts(tdata,seriesjson,type);
}
var t = ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'];
var timeData = ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'];
var monthData = ['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日'];
//测试随机生成数据
function moneyDataMonth(){
var res = [];
var len = 31;
while (len--) {
res.push(Math.round(Math.random() * 1000));
}
return res;
}
//测试随机生成数据
function moneyDataYear(){
var res = [];
var len = 12;
while (len--) {
res.push(Math.round(Math.random() * 1000));
}
return res;
}
//测试随机生成数据
function meetDataMonth(){
var res = [];
var len = 0;
while (len < 31) {
res.push((Math.random()*10 + 5).toFixed(1) - 0);
len++;
}
return res;
}
//测试随机生成数据
function meetDataYear(){
var res = [];
var len = 0;
while (len < 12) {
res.push((Math.random()*10 + 5).toFixed(1) - 0);
len++;
}
return res;
}
/**
* 回调数据
* @param xd 消费数据
* @param yd 会话数据
*
*
* @param type 年月
*/
function charts(xd,yd){
var type = $('input[name="stime"]:checked').val();
var Xdata = monthData;
if(type=='year'){
Xdata = timeData;
var xd = moneyDataYear();
var yd = meetDataYear();
}else{
var xd = moneyDataMonth();
var yd = meetDataMonth();
}
var myChart = echarts.init(document.getElementById('ecpanel'),'wonderland');
option = {
title: {
text: '',
subtext: ''
},
tooltip: {
trigger: 'axis'
},
legend: {
data:['会话数', '消费额']
},
toolbox: {
show: true,
feature: {
dataView: {show: true, readOnly: false},
magicType: {show: true, type: ['line', 'bar']},
restore: {show: true},
saveAsImage: {show: true}
}
},
dataZoom: {
show: false,
start: 0,
end: 100
},
xAxis: [
{
type: 'category',
boundaryGap: true,
data : Xdata,
name: '日期',
},
],
yAxis: [
{
type: 'value',
scale: true,
name: '会话(次)',
max: 30,
min: 0,
nameGap:32,
nameTextStyle:{
color:'#999',
},
boundaryGap: [0.2,0.2]
},
{
type: 'value',
scale: true,
name: '消费额(元)',
max: 1200,
min: 0,
nameGap:32,
nameTextStyle:{
color:'#999',
},
boundaryGap: [0.2, 0.2]
}
],
series: [
{
name:'消费额',
type:'bar',
yAxisIndex: 1,
data:xd
},
{
name:'会话数',
type:'line',
data:yd
}
]
};
myChart.setOption(option);
}
//当浏览器大小变化时
$(window).resize(function () {
initchart()
});
</script>
<!--must-->
<script type="text/javascript" src='./js/statistics/conversation.js'> </script>
</body>
</html>