123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147 |
- <script src="{__SYSTEM_PATH__}/js/echarts/echarts.min.js"></script>
- <script src="{__SYSTEM_PATH__}/js/echarts/theme/walden.js"></script>
- <style type="text/css">
- .echarts-box {
- width: 97.5%;
- height: 100%;
- background: #fff;
- margin: 0 auto;
- }
- </style>
- <section class="content clearfix">
- <div class="echarts-box">
- <div class="layui-container">
- <div class="layui-row">
- <div class="layui-col-md6">
- <div id="echarts-1" style="width: 100%;height:500px; padding: 25px; padding-top: 50px;"></div>
- </div>
- <script type="text/javascript">
- var myChart = echarts.init(document.getElementById('echarts-1'),"walden");
- var option = {
- title: {
- text: '购买率 {$a}%',
- subtext: '会员未购买率',
- left: 'center'
- },
- tooltip: {
- trigger: 'item',
- formatter: '{a} <br/>{b} : {c} ({d}%)'
- },
- legend: {
- orient: 'vertical',
- left: 'left',
- data: ['会员总数', '购买过商品会员数', '未购买过商品会员数']
- },
- series: [
- {
- name: '会员统计',
- type: 'pie',
- radius: '55%',
- center: ['50%', '60%'],
- data: [
- {value: {$b}, name: '会员总数'},
- {value: {$d.count}, name: '购买过商品会员数'},
- {value: {$c}, name: '未购买过商品会员数'}
- ],
- emphasis: {
- itemStyle: {
- shadowBlur: 10,
- shadowOffsetX: 0,
- shadowColor: 'rgba(0, 0, 0, 0.5)'
- }
- }
- }
- ]
- };
- myChart.setOption(option);
- </script>
- <div class="layui-col-md6">
- <div id="echarts-2" style="width: 100%;height:500px; padding: 25px; padding-top: 50px;"></div>
- </div>
- <script type="text/javascript">
- var myChart = echarts.init(document.getElementById('echarts-2'),'walden');
- var option = {
- title: {
- text: '订单金额分布',
- subtext: '订单统计',
- left: 'center'
- },
- tooltip: {
- trigger: 'item',
- formatter: '{a} <br/>{b} : {c} ({d}%)'
- },
- legend: {
- orient: 'vertical',
- left: 'left',
- data: ['购物订单总额', '平均购物总额']
- },
- series: [
- {
- name: '统计',
- type: 'pie',
- radius: '55%',
- center: ['50%', '60%'],
- data: [
- {value: {$e}, name: '购物订单总额'},
- {value: {$f}, name: '平均购物总额'}
- ],
- emphasis: {
- itemStyle: {
- shadowBlur: 10,
- shadowOffsetX: 0,
- shadowColor: 'rgba(0, 0, 0, 0.5)'
- }
- }
- }
- ]
- };
- myChart.setOption(option);
- </script>
- </div>
- </div>
- <div class="layui-row">
- <div class="layui-col-md12">
- <div style="text-align: center; font-size: 18px;padding: 15px;">
- 会员购买排行
- </div>
- </div>
- <div class="layui-col-md12">
- <table class="layui-table">
- <colgroup>
- <col width="150">
- <col width="200">
- <col width="200">
- <col>
- </colgroup>
- <thead>
- <tr>
- <th>排行位置</th>
- <th>会员名称</th>
- <th>订单总数</th>
- <th>订单总额</th>
- </tr>
- </thead>
- <tbody>
- {volist name="g" id="vo"}
- <tr>
- <td>{$vo.p}</td>
- <td>{$vo.username}</td>
- <td>{$vo.count} 个订单</td>
- <td>{$vo.total}</td>
- </tr>
- {/volist}
- </tbody>
- </table>
- </div>
- </div>
- </div>
- </section>
|