数据分析

application/admin/controller/Customer.php

@@ -65,17 +65,17 @@ class Customer extends Backend
         $payTypeList1 = [];
         foreach ($orderList as $k => $v) {
             if($v['pay_type'] == 1){
-                $v['pay_type'] = '企业网银支付';
+                $v['pay_type'] = '企业网银';
             }elseif ($v['pay_type'] == 2){
-                $v['pay_type'] = '微信支付';
+                $v['pay_type'] = '微信';
             }elseif ($v['pay_type'] == 3){
-                $v['pay_type'] = '支付宝支付';
+                $v['pay_type'] = '支付宝';
             }elseif ($v['pay_type'] == 4){
-                $v['pay_type'] = '银联支付';
+                $v['pay_type'] = '银联';
             }elseif ($v['pay_type'] == 5){
-                $v['pay_type'] = '代付支付';
+                $v['pay_type'] = '代付';
             }elseif ($v['pay_type'] == 6){
-                $v['pay_type'] = '线下支付支付';
+                $v['pay_type'] = '线下';
             }
             $rate = 0;
             if($payTotalCount > 0)$rate = round($v['nums']/$payTotalCount,2)*100;

application/admin/controller/GoodsData.php

@@ -0,0 +1,215 @@
+<?php
+
+namespace app\admin\controller;
+
+use app\admin\model\Admin;
+use app\admin\model\OrderInfo;
+use app\admin\model\Refund;
+use app\admin\model\User;
+use app\common\controller\Backend;
+use app\common\model\Attachment;
+use app\common\model\SysConfig;
+use fast\Date;
+use think\Db;
+
+/**
+ * 控制台
+ *
+ * @icon   fa fa-dashboard
+ * @remark 用于展示当前系统中的统计数据、统计报表及重要实时数据
+ */
+class GoodsData extends Backend
+{
+
+    /**
+     * 查看
+     */
+    public function index()
+    {
+        try {
+            \think\Db::execute("SET @@sql_mode='';");
+        } catch (\Exception $e) {
+
+        }
+        $postTime = input('startTime', '');
+        $where = [];
+        $map = [];
+        if ($postTime) {
+            $time = explode(' - ', $postTime);
+            $startTime = strtotime($time[0]);
+            $endTime = strtotime($time[1]);
+            $where['create_time'] = array('between', [$startTime, $endTime]);
+            $map['createtime'] = array('between', [$startTime, $endTime]);
+        }
+        //某一时间段各单品订单数量占比
+        $infoModel = new OrderInfo();
+        $orderIds = Db("Orders")->where($where)->where('status', 'in', '5,10,20,30')->column('id');
+        $goodsList = $infoModel
+            ->where($where)
+            ->where('order_id','in',$orderIds)
+            ->where('is_return_goods',0)
+            ->field('goods_id,goods_name, sum(amount_pay) AS amount_total')
+            ->group('goods_id')
+            ->select();
+        $goods = [];
+        $goodsSale = [];
+        $goodsGross = [];
+        $goodsGrossRate = [];
+        foreach ($goodsList as $v){
+            $v['nums'] =  $infoModel
+                ->where($where)
+                ->where('order_id','in',$orderIds)
+                ->where('goods_id',$v['goods_id'])
+                ->where('is_return_goods',0)
+                ->group('order_id')
+                ->count();
+            $goods[$v['goods_name']] = $v['nums'];
+            $goodsSale[$v['goods_name']] = $v['amount_total'];
+            $saleTotal =  $infoModel
+                ->where($where)
+                ->where('order_id','in',$orderIds)
+                ->where('goods_id',$v['goods_id'])
+                ->where('is_return_goods',0)
+                ->sum('amount');//某商品总销售额
+
+            $saleTotalNum =$infoModel
+                ->where($where)
+                ->where('order_id','in',$orderIds) ->where('is_return_goods',0)
+                ->where('goods_id',$v['goods_id'])->count();
+            $saleTotal = $saleTotal*$saleTotalNum;
+            $amountCostTotal =  $infoModel
+                ->where($where)
+                ->where('order_id','in',$orderIds)
+                ->where('is_return_goods',0)
+                ->where('goods_id',$v['goods_id'])->sum('amount_cost');//某商品总成本
+            $amountCostTotal = $amountCostTotal*$saleTotalNum;
+            $gross = bcsub($saleTotal, $amountCostTotal);//某商品毛利
+            $grossRate = 0;
+            if ($saleTotal > 0) $grossRate = round($gross / $saleTotal, 2) * 100;//某商品毛利率
+            $goodsGross[$v['goods_name']] = $gross;
+            $goodsGrossRate[$v['goods_name']] = $grossRate;
+        }
+
+        $payTotalCount = Db("Orders")->where($where)->where('status', 'in', '5,10,20,30')->count();
+
+//        foreach ($goodsList as $k => $v) {
+//            $rate = 0;
+//            if($payTotalCount > 0)$rate = round($v['nums']/$payTotalCount,2)*100;
+//            $rate = $rate.'%';
+//              $goods[$v['goods_name']] = $v['nums'];
+//            $goods[$v['goods_name']] = $rate;
+//        }
+
+        //平台所有商品退货率
+        $allRefund = Db('order_info_refund')->count();
+        $allRefundRate = 0;
+        if($payTotalCount > 0)$allRefundRate = round($allRefund/$payTotalCount,2)*100;
+        $allRefundRate = $allRefundRate.'%';
+
+        //单品退货率
+        $refundList = Refund::with('goods')
+            ->where($where)
+            ->field('goods_id, sum(num) AS nums')
+            ->group('goods_id')
+            ->select();
+        $refundRate = [];
+        foreach ($refundList as &$v){
+            $orderIds = OrderInfo::where('goods_id',$v['goods_id'])->column('order_id');
+            $orderIds = Db("Orders")->where($where)->where('status', 'in', '5,10,20,30')->where('id', 'in', $orderIds)->column('id');
+            $goodsNum = OrderInfo::where('order_id','in',$orderIds)->where('goods_id',$v['goods_id'])->sum('num');
+
+            $rate = 0;
+            if($goodsNum > 0)$rate = round($v['nums']/$goodsNum,2)*100;
+            $refundRate[$v['goods']['name']] = $rate;
+        }
+
+        //总销售额
+        $sale = Db('Orders')->where($where)->where('status', 'in', '5,10,20')->sum('amount_pay');
+        $refund = Db('OrderInfoRefund')->where($where)->where('refund_status', 20)->sum('amount');
+        $sale = bcsub($sale, $refund);
+
+
+        //毛利、毛利率
+        $install = Db('Orders')->where($where)->where('status', 'in', '5,10,20')->sum('amount_install');//总安装费
+        $orderIds = Db('Orders')->where($where)->where('status', 'in', '5,10,20')->column('id');
+        $cost = Db('OrderInfo')->where('order_id', 'in', $orderIds)->sum('amount_cost');//总成本
+        $gross_profit = bcsub($sale, $install);
+        $gross_profit = bcsub($gross_profit, $cost);
+        $gross_profit_margin = 0;
+        if ($sale > 0) $gross_profit_margin = round($gross_profit / $sale, 2) * 100;//毛利率
+        //销售金额排名
+        $list = OrderInfo
+            ::with(['goods'])
+            ->where($where)
+            ->where('is_return_goods',0)
+            ->where('order_id','in',$orderIds)
+            ->field('goods_id, sum(amount*num) AS total,sum(num) AS total_num')
+            ->group('goods_id')
+            ->order('total desc')->select();
+        $list = $list->toArray();
+        $saleMoney = [];
+        $saleNum = [];
+        foreach ($list as $v){
+            $saleMoney[$v['goods']['name']] = $v['total'];
+            $saleNum[$v['goods']['name']] = $v['total_num'];
+        }
+
+
+
+//        if ($this->request->isAjax()) {
+//            //如果发送的来源是Selectpage，则转发到Selectpage
+//            if ($this->request->request('keyField')) {
+//                return $this->selectpage();
+//            }
+//            $orderIds = Db("Orders")->where($where)->where('status', 'in', '5,10,20,30')->column('id');
+//            list($where, $sort, $order, $offset, $limit) = $this->buildparams();
+//            $this->model = new \app\admin\model\OrderInfo;
+//            $list = OrderInfo
+//                ::with(['goods'])
+//                ->where($where)
+//                ->where('is_return_goods',0)
+//                ->where('order_id','in',$orderIds)
+//                ->field('goods_id, sum(amount*num) AS total')
+//                ->group('goods_id')
+//                ->order('total desc')
+//                ->paginate($limit);
+//
+//
+//
+//            $result = array("total" => $list->total(), "rows" => $list->items());
+//
+//            return json($result);
+//        }
+
+
+        $this->view->assign([
+            'sale' => $sale,
+
+            'gross_profit' => $gross_profit,
+            'gross_profit_margin' => $gross_profit_margin,
+            'post_time' => $postTime,
+            'all_refund_rate'=>$allRefundRate
+
+        ]);
+
+
+        $this->assignconfig('goods_column', array_keys($goods));
+        $this->assignconfig('goods_data', array_values($goods));
+        $this->assignconfig('goods_sale_column', array_keys($goodsSale));
+        $this->assignconfig('goods_sale_data', array_values($goodsSale));
+        $this->assignconfig('goods_gross_column', array_keys($goodsGross));
+        $this->assignconfig('goods_gross_data', array_values($goodsGross));
+        $this->assignconfig('goods_gross_rate_column', array_keys($goodsGrossRate));
+        $this->assignconfig('goods_gross_rate_data', array_values($goodsGrossRate));
+        $this->assignconfig('refund_rate_column', array_keys($refundRate));
+        $this->assignconfig('refund_rate_data', array_values($refundRate));
+        $this->assignconfig('sale_money_column', array_keys($saleMoney));
+        $this->assignconfig('sale_money_data', array_values($saleMoney));
+        $this->assignconfig('sale_num_column', array_keys($saleNum));
+        $this->assignconfig('sale_num_data', array_values($saleNum));
+
+        return $this->view->fetch();
+    }
+
+
+}

application/admin/controller/Overview.php

@@ -94,6 +94,8 @@ class Overview extends Backend
         }
 
 
+
+
         $this->view->assign([
             'sale'       => $sale,
             'sale_num'       => $saleNum,
@@ -104,7 +106,6 @@ class Overview extends Backend
             'post_time'=>$postTime
 
         ]);
-        dump( array_keys($payTypeList));
         $this->assignconfig('type_column', array_keys($payTypeList));
         $this->assignconfig('type_data', array_values($payTypeList));
         $this->assignconfig('type_column1', array_keys($payTypeList1));

application/admin/model/OrderInfo.php

@@ -7,4 +7,7 @@ use think\Model;
 
 class OrderInfo extends \app\common\model\OrderInfo
 {
+    public function goods(){
+        return $this->belongsTo(Goods::class,'goods_id');
+    }
 }

application/admin/model/Refund.php

@@ -15,4 +15,7 @@ class Refund Extends \app\common\model\Refund
     public function user(){
         return $this->belongsTo(User::class)->setEagerlyType(0);
     }
+    public function goods(){
+        return $this->belongsTo(Goods::class)->setEagerlyType(0);
+    }
 }

application/admin/view/customer/index.html

@@ -235,7 +235,7 @@
                 </div>
                 <div class="row">
                     <div class="col-lg-6">
-                        <div id="echart" class="btn-refresh" style="height:500px;width:60%;"></div>
+                        <div id="echart" class="btn-refresh" style="height:500px;width:70%;"></div>
                     </div>
                     <div class="col-lg-6">
                     <div style="text-align: center"><h3>成交额排名</h3></div>

application/admin/view/goods_data/index.html

@@ -0,0 +1,332 @@
+<style type="text/css">
+    .sm-st {
+        background: #fff;
+        padding: 20px;
+        -webkit-border-radius: 3px;
+        -moz-border-radius: 3px;
+        border-radius: 3px;
+        margin-bottom: 20px;
+    }
+
+    .sm-st-icon {
+        width: 60px;
+        height: 60px;
+        display: inline-block;
+        line-height: 60px;
+        text-align: center;
+        font-size: 30px;
+        background: #eee;
+        -webkit-border-radius: 5px;
+        -moz-border-radius: 5px;
+        border-radius: 5px;
+        float: left;
+        margin-right: 10px;
+        color: #fff;
+    }
+
+    .sm-st-info {
+        padding-top: 2px;
+    }
+
+    .sm-st-info span {
+        display: block;
+        font-size: 24px;
+        font-weight: 600;
+    }
+
+    .orange {
+        background: #fa8564 !important;
+    }
+
+    .tar {
+        background: #45cf95 !important;
+    }
+
+    .sm-st .green {
+        background: #86ba41 !important;
+    }
+
+    .pink {
+        background: #AC75F0 !important;
+    }
+
+    .yellow-b {
+        background: #fdd752 !important;
+    }
+
+    .stat-elem {
+
+        background-color: #fff;
+        padding: 18px;
+        border-radius: 40px;
+
+    }
+
+    .stat-info {
+        text-align: center;
+        background-color: #fff;
+        border-radius: 5px;
+        margin-top: -5px;
+        padding: 8px;
+        -webkit-box-shadow: 0 1px 0px rgba(0, 0, 0, 0.05);
+        box-shadow: 0 1px 0px rgba(0, 0, 0, 0.05);
+        font-style: italic;
+    }
+
+    .stat-icon {
+        text-align: center;
+        margin-bottom: 5px;
+    }
+
+    .st-red {
+        background-color: #F05050;
+    }
+
+    .st-green {
+        background-color: #27C24C;
+    }
+
+    .st-violet {
+        background-color: #7266ba;
+    }
+
+    .st-blue {
+        background-color: #23b7e5;
+    }
+
+    .stats .stat-icon {
+        color: #28bb9c;
+        display: inline-block;
+        font-size: 26px;
+        text-align: center;
+        vertical-align: middle;
+        width: 50px;
+        float: left;
+    }
+
+    .stat {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: inline-block;
+    }
+
+    .stat .value {
+        font-size: 20px;
+        line-height: 24px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        font-weight: 500;
+    }
+
+    .stat .name {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        margin: 5px 0;
+    }
+
+    .stat.lg .value {
+        font-size: 26px;
+        line-height: 28px;
+    }
+
+    .stat-col {
+        margin:0 0 10px 0;
+    }
+    .stat.lg .name {
+        font-size: 16px;
+    }
+
+    .stat-col .progress {
+        height: 2px;
+    }
+
+    .stat-col .progress-bar {
+        line-height: 2px;
+        height: 2px;
+    }
+
+    .item {
+        padding: 30px 0;
+    }
+
+
+    #statistics .panel {
+        min-height: 150px;
+    }
+
+    #statistics .panel h5 {
+        font-size: 14px;
+    }
+</style>
+<div class="panel panel-default panel-intro">
+
+    <div class="panel-body">
+
+
+        <form class="form-horizontal form-commonsearch nice-validator n-default n-bootstrap" novalidate="" method="post"
+              action="" id="form">
+            <div class="row">
+                <div class="row">
+                    <div class="form-group">
+                        <label for="createtime" class="control-label col-xs-2" style="width: 6%">日期</label>
+                        <div class="col-xs-5" style="width: 20%">
+                            <input type="hidden" class="form-control operate" name="createtime-operate"
+                                   data-name="createtime" value="RANGE" readonly="">
+                            <input type="text" class="form-control datetimerange" name="startTime" value="{$post_time}"
+                                   id="start_time" data-index="12" onfocus="getdaterangepicker(form)"
+                                   autocomplete="off" style="width: 100%">
+                        </div>
+                        <div class="col-xs-5">
+                            <button type="submit" class="btn btn-success" formnovalidate="">提交</button>
+                            <button type="reset" class="btn btn-default">重置</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </form>
+
+
+    </div>
+
+
+</div>
+
+<div class="panel panel-default panel-intro">
+
+    <div class="panel-body">
+        <div id="myTabContent" class="tab-content">
+            <div class="tab-pane fade active in" id="one">
+
+                <div class="row">
+
+                        <div class="col-sm-3 col-xs-6" style="width: 33%">
+                            <div class="sm-st clearfix">
+                                <span class="sm-st-icon st-blue"><i class="fa fa-rocket"></i></span>
+                                <div class="sm-st-info">
+                                    <span>{$all_refund_rate}</span>
+                                    退货率
+                                </div>
+                            </div>
+                        </div>
+
+                    <div class="col-sm-3 col-xs-6" style="width: 33%">
+                        <div class="sm-st clearfix">
+                            <span class="sm-st-icon st-blue"><i class="fa fa-rocket"></i></span>
+                            <div class="sm-st-info">
+                                <span>{$gross_profit}</span>
+                                毛利
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-sm-3 col-xs-6" style="width: 33%">
+                        <div class="sm-st clearfix">
+                            <span class="sm-st-icon st-green"><i class="fa fa-rmb"></i></span>
+                            <div class="sm-st-info">
+                                <span>{$gross_profit_margin}%</span>
+                                毛利率
+                            </div>
+                        </div>
+                    </div>
+
+
+
+                </div>
+
+                <div class="row">
+                    <div class="col-lg-6">
+                        <div id="echart" class="btn-refresh" style="height:300px;width:50%;"></div>
+                    </div>
+                    <div class="col-lg-6">
+                        <div id="echart1" class="btn-refresh" style="height:300px;width:80%;"></div>
+                    </div>
+                    <div class="col-lg-6">
+                        <div id="echart2" class="btn-refresh" style="height:300px;width:80%;"></div>
+                    </div>
+                    <div class="col-lg-6">
+                        <div id="echart3" class="btn-refresh" style="height:300px;width:80%;"></div>
+                    </div>
+                    <div class="col-lg-6">
+                        <div id="echart4" class="btn-refresh" style="height:300px;width:80%;"></div>
+                    </div>
+                    <div class="col-lg-6">
+                        <div id="echart5" class="btn-refresh" style="height:300px;width:80%;"></div>
+                    </div>
+                    <div class="col-lg-6">
+                        <div id="echart6" class="btn-refresh" style="height:300px;width:80%;"></div>
+                    </div>
+                    <div class="col-lg-6">
+                        <div id="echart7" class="btn-refresh" style="height:300px;width:80%;"></div>
+                    </div>
+                    <div class="col-lg-6">
+                        <div id="echart8" class="btn-refresh" style="height:300px;width:80%;"></div>
+                    </div>
+
+                </div>
+
+
+
+
+            </div>
+
+            <div class="tab-pane fade" id="two">
+                <div class="row">
+                    <div class="col-xs-12">
+                        {:__('Custom zone')}
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
+<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
+<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css"/>
+<script>
+    $('input[name="dates"]').daterangepicker();
+
+    function getdaterangepicker(form) {
+        //绑定日期时间元素事件
+        if ($(".datetimerange", form).size() > 0) {
+            require(['bootstrap-daterangepicker'], function () {
+                var ranges = {};
+                ranges[__('Today')] = [Moment().startOf('day'), Moment().endOf('day')];
+                ranges[__('Yesterday')] = [Moment().subtract(1, 'days').startOf('day'), Moment().subtract(1, 'days').endOf('day')];
+                ranges[__('Last 7 Days')] = [Moment().subtract(6, 'days').startOf('day'), Moment().endOf('day')];
+                ranges[__('Last 30 Days')] = [Moment().subtract(29, 'days').startOf('day'), Moment().endOf('day')];
+                ranges[__('This Month')] = [Moment().startOf('month'), Moment().endOf('month')];
+                ranges[__('Last Month')] = [Moment().subtract(1, 'month').startOf('month'), Moment().subtract(1, 'month').endOf('month')];
+                var options = {
+                    timePicker: false,
+                    autoUpdateInput: false,
+                    timePickerSeconds: true,
+                    timePicker24Hour: true,
+                    autoApply: true,
+                    locale: {
+                        format: 'YYYY-MM-DD HH:mm:ss',
+                        customRangeLabel: __("Custom Range"),
+                        applyLabel: __("Apply"),
+                        cancelLabel: __("Clear"),
+                    },
+                    ranges: ranges,
+                };
+                var origincallback = function (start, end) {
+                    $(this.element).val(start.format(this.locale.format) + " - " + end.format(this.locale.format));
+                    $(this.element).trigger('blur');
+                };
+                $(".datetimerange", form).each(function () {
+                    var callback = typeof $(this).data('callback') == 'function' ? $(this).data('callback') : origincallback;
+                    $(this).on('apply.daterangepicker', function (ev, picker) {
+                        callback.call(picker, picker.startDate, picker.endDate);
+                    });
+                    $(this).on('cancel.daterangepicker', function (ev, picker) {
+                        $(this).val('').trigger('blur');
+                    });
+                    $(this).daterangepicker($.extend(true, options, $(this).data()), callback);
+                });
+            });
+        }
+    }
+</script>

public/assets/js/backend/customer.js

@@ -39,6 +39,11 @@ define(['jquery', 'bootstrap', 'backend', 'addtabs', 'table', 'echarts', 'echart
 
             // 指定图表的配置项和数据
             var option = {
+                title: {
+                    text: '各支付方式订单数',
+
+                    left: 'center'
+                },
                 xAxis: {
                     type: 'category',
                     data: Config.type_column
@@ -46,16 +51,28 @@ define(['jquery', 'bootstrap', 'backend', 'addtabs', 'table', 'echarts', 'echart
                 yAxis: {
                     type: 'value'
                 },
-
+                tooltip: {
+                    trigger: 'item'
+                },
                 series: [
                     {
 
                         data: Config.type_data,
                         type: 'bar',
                         showBackground: true,
-                        backgroundStyle: {
-                            color: 'rgba(180, 180, 180, 0.2)'
-                        }
+                        itemStyle: {
+                            normal: {
+                                color: function(params) {
+                                    // build a color map as your need.
+                                    var colorList = [
+                                        '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
+                                        '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
+                                        '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
+                                    ];
+                                    return colorList[params.dataIndex]
+                                }
+                            }
+                        },
                     }
                 ]
             };

public/assets/js/backend/goods_data.js

@@ -0,0 +1,401 @@
+define(['jquery', 'bootstrap', 'backend', 'addtabs', 'table', 'echarts', 'echarts-theme', 'template'], function ($, undefined, Backend, Datatable, Table, Echarts, undefined, Template) {
+
+    var Controller = {
+        index: function () {
+
+
+
+
+            // 基于准备好的dom，初始化echarts实例
+            var myChart = Echarts.init(document.getElementById('echart'), 'walden');
+            var myChart1 = Echarts.init(document.getElementById('echart1'), 'walden');
+            var myChart2 = Echarts.init(document.getElementById('echart2'), 'walden');
+            var myChart3 = Echarts.init(document.getElementById('echart3'), 'walden');
+            var myChart4 = Echarts.init(document.getElementById('echart4'), 'walden');
+            var myChart5 = Echarts.init(document.getElementById('echart5'), 'walden');
+            var myChart6 = Echarts.init(document.getElementById('echart6'), 'walden');
+            var myChart7 = Echarts.init(document.getElementById('echart7'), 'walden');
+            var myChart8 = Echarts.init(document.getElementById('echart8'), 'walden');
+
+            var option = {
+                title: {
+                    text: '单品订单数量占比',
+
+                    left: 'center'
+                },
+                tooltip: {
+                    trigger: 'item'
+                },
+                legend: {
+                    orient: 'vertical',
+                    left: 'left'
+                },
+                normal: {
+                    label: {
+                        show: true,
+
+                        formatter: '{d}%',
+                    },
+                },
+
+
+                series: [{
+                    name: '',
+                    type: 'pie', // 设置图表类型为饼图
+                    radius: '55%', // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
+                    color: ['#37A2DA', '#32C5E9'],
+                    label: {
+                        normal: {
+                            show: true,
+                            formatter: '{b}: {c}({d}%)'
+                        }
+                    },
+                    data: (function () {
+                        var arrNum = [];
+                        var testd = Config.goods_data;
+                        var teste = Config.goods_column;
+                        for (var i = 0; i < testd.length; i++) {
+                            arrNum.push({"value": testd[i], "name": teste[i]});
+                        }
+                        return arrNum;
+                    })(),
+                }]
+
+
+            };
+
+            var option1 = {
+                title: {
+                    text: '单品销售额占比',
+
+                    left: 'center'
+                },
+                tooltip: {
+                    trigger: 'item'
+                },
+                legend: {
+                    orient: 'vertical',
+                    left: 'left'
+                },
+                series: [{
+                    name: '',
+                    type: 'pie', // 设置图表类型为饼图
+                    radius: '55%', // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
+                    color: ['#37A2DA', '#32C5E9'],
+                    label: {
+                        normal: {
+                            show: true,
+                            formatter: '{b}: {c}({d}%)'
+                        }
+                    },
+                    data: (function () {
+                        var arrNum = [];
+                        var testd = Config.goods_sale_data;
+                        var teste = Config.goods_sale_column;
+                        for (var i = 0; i < testd.length; i++) {
+                            arrNum.push({"value": testd[i], "name": teste[i]});
+                        }
+                        return arrNum;
+                    })(),
+                }]
+
+            };
+
+            var option2 = {
+                title: {
+                    text: '单品订单数量',
+
+                    left: 'center'
+                },
+                xAxis: {
+                    type: 'category',
+                    data: Config.goods_column
+                },
+                yAxis: {
+                    type: 'value'
+                },
+                tooltip: {
+                    trigger: 'item'
+                },
+                series: [
+                    {
+
+                        data: Config.goods_data,
+                        type: 'bar',
+                        showBackground: true,
+                        itemStyle: {
+                            normal: {
+                                color: function(params) {
+                                    // build a color map as your need.
+                                    var colorList = [
+                                        '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
+                                        '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
+                                        '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
+                                    ];
+                                    return colorList[params.dataIndex]
+                                }
+                            }
+                        },
+                    }
+                ]
+            };
+            var option3 = {
+                title: {
+                    text: '单品销售额',
+
+                    left: 'center'
+                },
+                xAxis: {
+                    type: 'category',
+                    data: Config.goods_sale_column
+                },
+                yAxis: {
+                    type: 'value'
+                },
+                tooltip: {
+                    trigger: 'item'
+                },
+                series: [
+                    {
+
+                        data: Config.goods_sale_data,
+                        type: 'bar',
+                        showBackground: true,
+                        itemStyle: {
+                            normal: {
+                                color: function(params) {
+                                    // build a color map as your need.
+                                    var colorList = [
+                                        '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
+                                        '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
+                                        '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
+                                    ];
+                                    return colorList[params.dataIndex]
+                                }
+                            }
+                        },
+                    }
+                ]
+            };
+            var option4 = {
+                title: {
+                    text: '单品毛利',
+
+                    left: 'center'
+                },
+                xAxis: {
+                    type: 'category',
+                    data: Config.goods_gross_column
+                },
+                yAxis: {
+                    type: 'value'
+                },
+                tooltip: {
+                    trigger: 'item'
+                },
+                series: [
+                    {
+
+                        data: Config.goods_gross_data,
+                        type: 'bar',
+                        showBackground: true,
+                        itemStyle: {
+                            normal: {
+                                color: function(params) {
+                                    // build a color map as your need.
+                                    var colorList = [
+                                        '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
+                                        '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
+                                        '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
+                                    ];
+                                    return colorList[params.dataIndex]
+                                }
+                            }
+                        },
+                    }
+                ]
+            };
+            var option5 = {
+                title: {
+                    text: '单品毛利率',
+
+                    left: 'center'
+                },
+                xAxis: {
+                    type: 'category',
+                    data: Config.goods_gross_rate_column
+                },
+                yAxis: {
+                    type: 'value'
+                },
+                tooltip: {
+                    trigger: 'item',
+                    formatter:'{c}%'　　　　//这是关键，在需要的地方加上就行了
+                },
+
+
+                series: [
+                    {
+                        name: 'ECharts例子个数统计',
+                        type: 'bar',
+                        itemStyle: {
+                            normal: {
+                                color: function(params) {
+                                    // build a color map as your need.
+                                    var colorList = [
+                                        '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
+                                        '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
+                                        '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
+                                    ];
+                                    return colorList[params.dataIndex]
+                                },
+                                label: {
+                                    show: true,
+                                    position: 'top',
+                                    formatter: '{b}\n{c}%'　　　　//这是关键，在需要的地方加上就行了
+                                }
+                            }
+                        },
+                        data: Config.goods_gross_rate_data,
+                    }
+                ]
+
+
+            };
+            var option6 = {
+                title: {
+                    text: '单品退货率',
+                    left: 'center'
+                },
+                xAxis: {
+                    type: 'category',
+                    data: Config.refund_rate_column
+                },
+                yAxis: {
+                    type: 'value'
+                },
+                tooltip: {
+                    trigger: 'item',
+                    formatter:'{c}%'　　　　//这是关键，在需要的地方加上就行了
+                },
+                series: [
+                    {
+                        name: 'ECharts例子个数统计',
+                        type: 'bar',
+                        itemStyle: {
+                            normal: {
+                                color: function(params) {
+                                    // build a color map as your need.
+                                    var colorList = [
+                                        '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
+                                        '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
+                                        '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
+                                    ];
+                                    return colorList[params.dataIndex]
+                                },
+                                label: {
+                                    show: true,
+                                    position: 'top',
+                                    formatter: '{b}\n{c}%'　　　　//这是关键，在需要的地方加上就行了
+                                }
+                            }
+                        },
+                        data: Config.refund_rate_data,
+                    }
+                ]
+            };
+            var option7 = {
+                title: {
+                    text: '单品销售金额排名',
+
+                    left: 'center'
+                },
+                xAxis: {
+                    type: 'category',
+                    data: Config.sale_money_column
+                },
+                yAxis: {
+                    type: 'value'
+                },
+                tooltip: {
+                    trigger: 'item'
+                },
+                series: [
+                    {
+
+                        data: Config.sale_money_data,
+                        type: 'bar',
+                        showBackground: true,
+                        itemStyle: {
+                            normal: {
+                                color: function(params) {
+                                    // build a color map as your need.
+                                    var colorList = [
+                                        '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
+                                        '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
+                                        '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
+                                    ];
+                                    return colorList[params.dataIndex]
+                                }
+                            }
+                        },
+                    }
+                ]
+            };
+            var option8 = {
+                title: {
+                    text: '单品销售数量排名',
+
+                    left: 'center'
+                },
+                xAxis: {
+                    type: 'category',
+                    data: Config.sale_num_column
+                },
+                yAxis: {
+                    type: 'value'
+                },
+                tooltip: {
+                    trigger: 'item'
+                },
+                series: [
+                    {
+
+                        data: Config.sale_num_data,
+                        type: 'bar',
+                        showBackground: true,
+                        itemStyle: {
+                            normal: {
+                                color: function(params) {
+                                    // build a color map as your need.
+                                    var colorList = [
+                                        '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
+                                        '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
+                                        '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
+                                    ];
+                                    return colorList[params.dataIndex]
+                                }
+                            }
+                        },
+                    }
+                ]
+            };
+
+
+            // 使用刚指定的配置项和数据显示图表。
+            myChart.setOption(option);
+            myChart1.setOption(option1);
+            myChart2.setOption(option2);
+            myChart3.setOption(option3);
+            myChart4.setOption(option4);
+            myChart5.setOption(option5);
+            myChart6.setOption(option6);
+            myChart7.setOption(option7);
+            myChart8.setOption(option8);
+
+        }
+
+    };
+
+    return Controller;
+});

public/assets/js/backend/overview.js

@@ -9,6 +9,11 @@ define(['jquery', 'bootstrap', 'backend', 'addtabs', 'table', 'echarts', 'echart
 
             // 指定图表的配置项和数据
             var option = {
+                title: {
+                    text: '各支付方式订单数',
+
+                    left: 'center'
+                },
                 xAxis: {
                     type: 'category',
                     data: Config.type_column
@@ -16,16 +21,28 @@ define(['jquery', 'bootstrap', 'backend', 'addtabs', 'table', 'echarts', 'echart
                 yAxis: {
                     type: 'value'
                 },
-
+                tooltip: {
+                    trigger: 'item'
+                },
                 series: [
                     {
 
                         data: Config.type_data,
                         type: 'bar',
                         showBackground: true,
-                        backgroundStyle: {
-                            color: 'rgba(180, 180, 180, 0.2)'
-                        }
+                        itemStyle: {
+                            normal: {
+                                color: function(params) {
+                                    // build a color map as your need.
+                                    var colorList = [
+                                        '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
+                                        '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
+                                        '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
+                                    ];
+                                    return colorList[params.dataIndex]
+                                }
+                            }
+                        },
                     }
                 ]
             };
@@ -43,27 +60,27 @@ define(['jquery', 'bootstrap', 'backend', 'addtabs', 'table', 'echarts', 'echart
                     orient: 'vertical',
                     left: 'left'
                 },
-                series: [
-                    {
-                        type: 'pie',
-                        radius: '50%',
-                        data: [
-                            { value: Config.type_data[0], name: Config.type_column[0] },
-                            { value: Config.type_data[1], name: Config.type_column[1]},
-                            { value: Config.type_data[2], name: Config.type_column[2]},
-                            { value: Config.type_data[3], name: Config.type_column[3]},
-                            { value: Config.type_data[4], name: Config.type_column[4]},
-                            { value: Config.type_data[5], name: Config.type_column[5]}
-                        ],
-                        emphasis: {
-                            itemStyle: {
-                                shadowBlur: 10,
-                                shadowOffsetX: 0,
-                                shadowColor: 'rgba(0, 0, 0, 0.5)'
-                            }
+                series: [{
+                    name: '',
+                    type: 'pie', // 设置图表类型为饼图
+                    radius: '55%', // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
+                    color: ['#37A2DA', '#32C5E9'],
+                    label: {
+                        normal: {
+                            show: true,
+                            formatter: '{b}: {c}({d}%)'
                         }
-                    }
-                ]
+                    },
+                    data: [
+                        { value: Config.type_data[0], name: Config.type_column[0] },
+                        { value: Config.type_data[1], name: Config.type_column[1]},
+                        { value: Config.type_data[2], name: Config.type_column[2]},
+                        { value: Config.type_data[3], name: Config.type_column[3]},
+                        { value: Config.type_data[4], name: Config.type_column[4]},
+                        { value: Config.type_data[5], name: Config.type_column[5]}
+                    ],
+                }]
+
             };