today_trends.blade.php 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189
  1. @extends('layouts.base')
  2. @section('title', '会员统计')
  3. @section('content')
  4. <div class="rightlist">
  5. @include('layouts.tabs')
  6. <div class='panel panel-default form-horizontal form'>
  7. <div class='panel-body'>
  8. <div id="todayTrends" style="width: 95%;height:300px;float: left;"></div>
  9. </div>
  10. </div>
  11. <div class='panel panel-default form-horizontal form'>
  12. <div class='panel-heading'>订单动态明细</div>
  13. <div class='panel-body'>
  14. <div class="form-group">
  15. <label class="col-xs-12 col-sm-3 col-md-2 control-label">
  16. <span style="font-size: 22px;">订单相关</span>
  17. </label>
  18. <div class="col-sm-9 col-xs-12">
  19. <table class="table table-hover">
  20. <thead>
  21. <tr>
  22. <th>下单总数</th>
  23. <th>下单总金额</th>
  24. <th>支付总数</th>
  25. <th>支付总金额</th>
  26. <th>支付转化率</th>
  27. <th>运费总额</th>
  28. </tr>
  29. </thead>
  30. <tbody>
  31. <tr>
  32. <th>122</th>
  33. <th>121</th>
  34. <th>31</th>
  35. <th>1231</th>
  36. <th>123</th>
  37. <th>123</th>
  38. </tr>
  39. </table>
  40. </div>
  41. </div>
  42. <div class="form-group">
  43. <label class="col-xs-12 col-sm-3 col-md-2 control-label">
  44. <span style="font-size: 22px;">支付方式</span>
  45. </label>
  46. <div class="col-sm-9 col-xs-12">
  47. <table class="table table-hover">
  48. <thead>
  49. <tr>
  50. <th>余额支付</th>
  51. <th>微信支付</th>
  52. <th>支付宝支付</th>
  53. </tr>
  54. </thead>
  55. <tbody>
  56. <tr>
  57. <th>34535</th>
  58. <th>5345</th>
  59. <th>3453</th>
  60. </tr>
  61. </table>
  62. </div>
  63. </div>
  64. <div class="form-group">
  65. <label class="col-xs-12 col-sm-3 col-md-2 control-label">
  66. <span style="font-size: 22px;">订单折扣</span>
  67. </label>
  68. <div class="col-sm-9 col-xs-12">
  69. <table class="table table-hover">
  70. <thead>
  71. <tr>
  72. <th>积分抵扣</th>
  73. <th>爱心值抵扣</th>
  74. <th>会员折扣金额</th>
  75. <th>优惠总金额</th>
  76. </tr>
  77. </thead>
  78. <tbody>
  79. <tr>
  80. <th>3453</th>
  81. <th>453</th>
  82. <th>3453</th>
  83. <th>345</th>
  84. </tr>
  85. </table>
  86. </div>
  87. </div>
  88. </div>
  89. </div>
  90. </div>
  91. <script type="text/javascript">
  92. //会员性别统计
  93. var todayTrends = echarts.init(document.getElementById('todayTrends'));
  94. charts_data = {!! $charts_data !!};
  95. today_option = {
  96. //backgroundColor: '#394056',
  97. title: {
  98. text: '订单动态'
  99. },
  100. tooltip: {
  101. trigger: 'axis'
  102. },
  103. toolbox: {
  104. feature: {
  105. saveAsImage: {show: true}
  106. }
  107. },
  108. legend: {
  109. data: ['今日下单数量', '今日支付订单', '今日完成订单']
  110. },
  111. xAxis: [{
  112. type: 'category',
  113. boundaryGap: true,
  114. axisLine: {
  115. lineStyle: {
  116. color: '#57617B'
  117. }
  118. },
  119. data: ['0:00', '2:00', '4:00', '6:00', '8:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00']
  120. }],
  121. yAxis: [{
  122. type: 'value',
  123. //name: '数量',
  124. axisLine: {
  125. show: false
  126. }
  127. }],
  128. series: [
  129. {
  130. name: '今日下单数量',
  131. type: 'line',
  132. data: charts_data.created_order
  133. }, {
  134. name: '今日支付订单',
  135. type: 'line',
  136. data: charts_data.pay_order
  137. },
  138. {
  139. name: '今日完成订单',
  140. type: 'line',
  141. data: charts_data.received_order
  142. }]
  143. };
  144. todayTrends.setOption(today_option);
  145. </script>
  146. @endsection