index.php 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147
  1. <script src="{__SYSTEM_PATH__}/js/echarts/echarts.min.js"></script>
  2. <script src="{__SYSTEM_PATH__}/js/echarts/theme/walden.js"></script>
  3. <style type="text/css">
  4. .echarts-box {
  5. width: 97.5%;
  6. height: 100%;
  7. background: #fff;
  8. margin: 0 auto;
  9. }
  10. </style>
  11. <section class="content clearfix">
  12. <div class="echarts-box">
  13. <div class="layui-container">
  14. <div class="layui-row">
  15. <div class="layui-col-md6">
  16. <div id="echarts-1" style="width: 100%;height:500px; padding: 25px; padding-top: 50px;"></div>
  17. </div>
  18. <script type="text/javascript">
  19. var myChart = echarts.init(document.getElementById('echarts-1'),"walden");
  20. var option = {
  21. title: {
  22. text: '购买率 {$a}%',
  23. subtext: '会员未购买率',
  24. left: 'center'
  25. },
  26. tooltip: {
  27. trigger: 'item',
  28. formatter: '{a} <br/>{b} : {c} ({d}%)'
  29. },
  30. legend: {
  31. orient: 'vertical',
  32. left: 'left',
  33. data: ['会员总数', '购买过商品会员数', '未购买过商品会员数']
  34. },
  35. series: [
  36. {
  37. name: '会员统计',
  38. type: 'pie',
  39. radius: '55%',
  40. center: ['50%', '60%'],
  41. data: [
  42. {value: {$b}, name: '会员总数'},
  43. {value: {$d.count}, name: '购买过商品会员数'},
  44. {value: {$c}, name: '未购买过商品会员数'}
  45. ],
  46. emphasis: {
  47. itemStyle: {
  48. shadowBlur: 10,
  49. shadowOffsetX: 0,
  50. shadowColor: 'rgba(0, 0, 0, 0.5)'
  51. }
  52. }
  53. }
  54. ]
  55. };
  56. myChart.setOption(option);
  57. </script>
  58. <div class="layui-col-md6">
  59. <div id="echarts-2" style="width: 100%;height:500px; padding: 25px; padding-top: 50px;"></div>
  60. </div>
  61. <script type="text/javascript">
  62. var myChart = echarts.init(document.getElementById('echarts-2'),'walden');
  63. var option = {
  64. title: {
  65. text: '订单金额分布',
  66. subtext: '订单统计',
  67. left: 'center'
  68. },
  69. tooltip: {
  70. trigger: 'item',
  71. formatter: '{a} <br/>{b} : {c} ({d}%)'
  72. },
  73. legend: {
  74. orient: 'vertical',
  75. left: 'left',
  76. data: ['购物订单总额', '平均购物总额']
  77. },
  78. series: [
  79. {
  80. name: '统计',
  81. type: 'pie',
  82. radius: '55%',
  83. center: ['50%', '60%'],
  84. data: [
  85. {value: {$e}, name: '购物订单总额'},
  86. {value: {$f}, name: '平均购物总额'}
  87. ],
  88. emphasis: {
  89. itemStyle: {
  90. shadowBlur: 10,
  91. shadowOffsetX: 0,
  92. shadowColor: 'rgba(0, 0, 0, 0.5)'
  93. }
  94. }
  95. }
  96. ]
  97. };
  98. myChart.setOption(option);
  99. </script>
  100. </div>
  101. </div>
  102. <div class="layui-row">
  103. <div class="layui-col-md12">
  104. <div style="text-align: center; font-size: 18px;padding: 15px;">
  105. 会员购买排行
  106. </div>
  107. </div>
  108. <div class="layui-col-md12">
  109. <table class="layui-table">
  110. <colgroup>
  111. <col width="150">
  112. <col width="200">
  113. <col width="200">
  114. <col>
  115. </colgroup>
  116. <thead>
  117. <tr>
  118. <th>排行位置</th>
  119. <th>会员名称</th>
  120. <th>订单总数</th>
  121. <th>订单总额</th>
  122. </tr>
  123. </thead>
  124. <tbody>
  125. {volist name="g" id="vo"}
  126. <tr>
  127. <td>{$vo.p}</td>
  128. <td>{$vo.username}</td>
  129. <td>{$vo.count} 个订单</td>
  130. <td>{$vo.total}</td>
  131. </tr>
  132. {/volist}
  133. </tbody>
  134. </table>
  135. </div>
  136. </div>
  137. </div>
  138. </section>