elsemoney.html
5.7 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
141
142
143
144
145
146
147
148
<include file="public@header"/>
<meta charset="utf-8">
<!--<link rel="icon" href="https://static.jianshukeji.com/highcharts/images/favicon.ico">-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* css 代码 */
</style>
<script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
<!--<script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script>-->
<script src="__STATIC__/js/highcharts.js"></script>
</head>
<body>
<div class="wrap js-check-wrap" style="padding: 20px 20px 0px;">
<div class="well form-inline margin-top-20" >
时间:
<input type="text" class="form-control js-bootstrap-datetime start_time" name="start_time"
value="{$start_time|default=''}"
style="width: 140px;" autocomplete="off">-
<input type="text" class="form-control js-bootstrap-datetime end_time" name="end_time"
value="{$end_time|default=''}"
style="width: 140px;" autocomplete="off">
<input type="submit" class="btn btn-primary" value="搜索" onclick="getData()"/>
<span class="btn btn-danger" onclick="all()">清空</span>
</div>
</div>
<div id="container" style="min-width:400px;height:400px">
</div>
<!--<div id="container1" style="min-width:400px;height:400px"></div>-->
<script src="__STATIC__/js/admin.js"></script>
<script>
function all() {
var timeList=[];
var _user=[] ;
var _member=[] ;
var chart ;
var pie_user ;
var pie_all;
var pie_member ;
var start_time = $('.start_time').val();
var end_time = $('.end_time').val();
function GetDateStr(AddDayCount) {
var dd = new Date();
dd.setDate(dd.getDate()+AddDayCount);//获取AddDayCount天后的日期
var y = dd.getFullYear();
var m = dd.getMonth()+1;//获取当前月份的日期
var d = dd.getDate();
return y+"-"+m+"-"+d;
}
for(var i=-4;i<1;i++){
timeList.push(GetDateStr(i))
}
getData();
function getData(){
$.ajax({
type:"POST",
url:"{:url('portal/Statistics/findelse')}",
data:{
"time":timeList,
"start_time":start_time,
"end_time":end_time,
},
success:function (data) {
console.log(data)
_user = Object.assign([],data.data.user);
_member = Object.assign([],data.data.member);
pie_user = data.data.pie_user;
pie_member = data.data.pie_member;
pie_all = data.data.pie_member + data.data.pie_user;
// 图表
chart = Highcharts.chart('container', {
title: {
text: '透视卡统计图表'
},
xAxis: {
categories: timeList,
crosshair: true
},
plotOptions: {
column: {
pointPadding: 0,
borderWidth: 0
}
},
labels: {
items: [{
html: "即时数据/筛选结果(共"+pie_all+"元)",
style: {
left: '100px',
top: '18px',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
}
}]
},
tooltip :{
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.0f} 人</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
series: [{
type: 'column',
name: '用户',
data: _user
}, {
type: 'column',
name: '中介',
data: _member
}, {
type: 'pie',
name: '注册人数',
data: [{
name: '中介',
y: pie_member,
color: Highcharts.getOptions().colors[1] // Jane's color
}, {
name: '用户',
y: pie_user,
color: Highcharts.getOptions().colors[0] // John's color
}],
center: [100, 80],
size: 100,
showInLegend: false,
dataLabels: {
enabled: false
}
}]
});
},
error:function () {
alert("网络错误");
}
})
}
}
// 请求获取数据
all();
$('.btn').click(function () {
all();
})
</script>
</body>
</html>