user_count.html 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102
  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>{{ data.total_count }}</em><span>人</span>
  17. <b>用户总数</b>
  18. </div>
  19. <div class="spannel scolor02">
  20. <em>{{ data.mon_count }}</em><span>人</span>
  21. <b>用户月新增数</b>
  22. </div>
  23. <div class="spannel2 scolor03">
  24. <em>{{ data.day_count }}</em><span>人</span>
  25. <b>用户日新增数</b>
  26. </div>
  27. </div>
  28. <div class="pannel">
  29. <div id="chart_show" class="chart_show"></div>
  30. </div>
  31. <script>
  32. var oChart = echarts.init(document.getElementById('chart_show'));
  33. var chartopt = {
  34. title: {
  35. text: '用户登录活跃数',
  36. left: 'center',
  37. top: '10'
  38. },
  39. tooltip: {
  40. trigger: 'axis'
  41. },
  42. legend: {
  43. data: ['active'],
  44. top: '40'
  45. },
  46. toolbox: {
  47. show: true,
  48. feature: {
  49. mark: {show: true},
  50. dataView: {show: true, readOnly: false},
  51. magicType: {show: true, type: ['line', 'bar']},
  52. restore: {show: true},
  53. saveAsImage: {show: true}
  54. }
  55. },
  56. calculable: true,
  57. xAxis: [
  58. {
  59. name: '今天',
  60. type: 'category',
  61. boundaryGap: false,
  62. data: {{ data.active_date | safe }}
  63. }
  64. ],
  65. yAxis: [
  66. {
  67. name: '活跃用户数量',
  68. type: 'value'
  69. }
  70. ],
  71. series: [
  72. {
  73. name: 'active',
  74. type: 'line',
  75. smooth: true,
  76. itemStyle: {normal: {areaStyle: {type: 'default'}, color: '#f80'}, lineStyle: {color: '#f80'}},
  77. data: {{ data.active_count }}
  78. }],
  79. areaStyle: {
  80. normal: {
  81. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  82. offset: 0,
  83. color: 'rgba(255,136,0,0.39)'
  84. }, {
  85. offset: .34,
  86. color: 'rgba(255,180,0,0.25)'
  87. }, {
  88. offset: 1,
  89. color: 'rgba(255,222,0,0.00)'
  90. }])
  91. }
  92. }
  93. };
  94. oChart.setOption(chartopt);
  95. </script>
  96. </body>
  97. </html>