老三步：
1、将统计页面放入templates/admin中
2、修改页面的调用路径
3、创建完成视图函数
4、前端的代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>新经资讯后台管理</title> 6 <link rel="stylesheet" type="text/css" href="../../static/admin/css/reset.css"> 7 <link rel="stylesheet" type="text/css" href="../../static/admin/css/main.css"> 8 <script type="text/javascript" src="../../static/admin/js/echarts.min.js"></script> 9 </head> 10 <body> 11 <div class="breadcrub"> 12 当前位置：用户管理>用户统计 13 </div> 14 <div class="spannels"> 15 <div class="spannel scolor01"> 16 <em>{{ context.total_count }}</em><span>人</span> 17 <b>用户总数</b> 18 </div> 19 <div class="spannel scolor02"> 20 <em>{{ context.month_count }}</em><span>人</span> 21 <b>用户月新增数</b> 22 </div> 23 <div class="spannel2 scolor03"> 24 <em>{{ context.day_count }}</em><span>人</span> 25 <b>用户日新增数</b> 26 </div> 27 </div> 28 29 <div class="pannel"> 30 <div id="chart_show" class="chart_show"></div> 31 </div> 32 <script> 33 var oChart = echarts.init(document.getElementById('chart_show')); 34 var chartopt = { 35 title:{ 36 text: '用户登录活跃数', 37 left: 'center', 38 top: '10' 39 }, 40 tooltip:{ 41 trigger: 'axis' 42 }, 43 legend: { 44 data:['active'], 45 top: '40' 46 }, 47 toolbox: { 48 show : true, 49 feature : { 50 mark : {show: true}, 51 dataView : {show: true, readOnly: false}, 52 magicType : {show: true, type: ['line','bar']}, 53 restore : {show: true}, 54 saveAsImage : {show: true} 55 } 56 }, 57 calculable : true, 58 xAxis : [ 59 { 60 name: '今天', 61 type : 'category', 62 boundaryGap : false, 63 data : ["08:15","09:15","10:15","11:15","12:15","13:15","14:15","15:15","16:15","17:15","18:15","19:15"] 64 } 65 ], 66 yAxis : [ 67 { 68 name: '活跃用户数量', 69 type : 'value' 70 } 71 ], 72 series : [ 73 { 74 name:'active', 75 type:'line', 76 smooth:true, 77 itemStyle: {normal: {areaStyle: {type: 'default'}, color: '#f80'}, lineStyle: {color: '#f80'}}, 78 data:[14951,14861,7186,15861,14951,14861,7186,14951,14861,7186,15861,14951] 79 }], 80 areaStyle:{ 81 normal:{ 82 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ 83 offset: 0, 84 color: 'rgba(255,136,0,0.39)' 85 }, { 86 offset: .34, 87 color: 'rgba(255,180,0,0.25)' 88 },{ 89 offset: 1, 90 color: 'rgba(255,222,0,0.00)' 91 }]) 92 93 } 94 } 95 96 }; 97 98 oChart.setOption(chartopt); 99 100 </script> 101 </body> 102 </html>
5、根据前端所需完成后台程序并传给前端
1 @admin_blue.route('/user_count') 2 def user_count(): 3 #总人数统计，先给个默认值为0（以防数据库查询不到 4 total_count = 0 5 try: 6 #从数据中获取is_admin值为0也就是为false的用户；.count()函数用于统计个数 7 total_count = User.query.filter(User.is_admin == False).count() 8 except Exception as e: 9 current_app.logger.error(e) 10 #本月新增人数统计 11 month_count = 0 12 #获取当前本地的时间 13 t = time.localtime() 14 #获取年月 15 month_begin_time = "%s-%02s-01"%(t.tm_year,t.tm_mon) 16 #用datatime包中的strptime进行时间的格式转化 17 month_begin_time_date = datetime.datetime.strptime(month_begin_time,"%Y-%m-%d") 18 try: 19 #从数据库中获取is_admin为false以及创建时间大于本月的0.00分的用户数据；count()统计个数 20 month_count = User.query.filter(User.is_admin ==False,User.create_time>month_begin_time_date).count() 21 except Exception as e: 22 current_app.logger.error(e) 23 #今日新增的人数 24 day_count = 0 25 day_begin_time = "%s-%02s-01" % (t.tm_year, t.tm_mon) 26 day_begin_time_date = datetime.datetime.strptime(day_begin_time, "%Y-%m-%d") 27 try: 28 #同上 29 day_count = User.query.filter(User.is_admin == False, User.create_time > month_begin_time_date).count() 30 except Exception as e: 31 current_app.logger.error(e) 32 #传递上下文 33 context = { 34 "total_count":total_count, 35 "month_count":month_count, 36 "day_count":day_count, 37 } 38 return render_template("admin/user_count.html",context=context)
