<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>