fastadmin和ECharts配合使用---用於統計1-12月份以圖表形式展示相關數據信息

前端頁面展示

<div class="container" style="width:100%;">
    <div class="row" style="border:1px solid #999999;background-color:#ffffff;">
        <!--切換條件-->
        <!--商戶選擇-->

        <div class="col-md-12" style="font-size:18px;">
            <div class="col-md-12" style="height:20px;"></div>
            <div class="col-md-12" style="height:20px;"></div>

            <div class="col-md-6" style="background-color:#bce8f1;">
                <div class="table-responsive">
                    <table class="table" id="table_list">
                        <thead>
                        <tr>
                            <th>分類</th>
                            <th>1月</th>
                            <th>2月</th>
                            <th>3月</th>
                            <th>4月</th>
                            <th>5月</th>
                            <th>6月</th>
                            <th>7月</th>
                            <th>8月</th>
                            <th>9月</th>
                            <th>10月</th>
                            <th>11月</th>
                            <th>12月</th>
                        </tr>
                        </thead>
                        <tbody >
                        <tr>
                            <td id="invite">邀約</td>
                        </tr>
                        <tr>
                            <td id="register">簽到</td>
                        </tr>
                        <tr>
                            <td id="order">成交</td>
                        </tr>

                        </tbody>
                    </table>
                </div>
            </div>
            <div class="col-md-2 " id="is_show2" >
                <label  class="col-sm-6 control-label">商戶選擇：</label>
                <div class="col-sm-6">
                    <select class="form-control" id="merchant" name="merchant" onchange="change()">
                        <option value="1">請選擇</option>
                        {volist name="merchantData" id="vo" }
                        <option value="{$key}">{$vo}</option>
                        {/volist}
                    </select>
                </div>
            </div>
            <div class="col-md-12" style="height:100px;"></div>
            <input type="hidden" name="jsonData" value='' id="jsonData">
            <div class="col-md-10" id="echart" style="height:500px;" >
                <!--放置圖表-->
            </div>

        </div>
    </div>
</div>

PHP部分（後端代碼）

<?php
/**
 * Created by PhpStorm.
 * User: Administrator
 * Date: 2018/8/16
 * Time: 15:33
 */

namespace app\admin\controller\report\customer;
use app\admin\model\Merchant;
use app\admin\model\CustomerInvite;
use app\common\controller\Backend;

class Customerothers extends Backend
{
    /**
     * 客戶分析---邀約/簽到/成交分析
     * @return string
     * @throws \Exception
     */
    public function index()
    {
        //商戶的下拉數據
        $merchantModel   = new Merchant();
        $merchantData    = $merchantModel->collectionMerchantTree();
        $this->assign('merchantData',$merchantData);
        return $this->view->fetch();
    }

    public function merchantAjax(){
        if($this->request->isAjax()){
            $m_id        = input('merchant','','intval');
            //1-12月的邀約記錄數
            $monthInvite = array();
            for($a=1;$a<=12;$a++){
                $monthInvite[$a] = CustomerInvite::statisticalMonth($a,$m_id);
            }
            //1-12月簽到記錄數
            $monthRegister = array();
            for($b=1;$b<=12;$b++) {
                $monthRegister[$b] = CustomerInvite::statisticalMonth($b,$m_id,true);
            }
            //1-12月成交記錄數
            $monthOrder = array();
            for($c=1;$c<=12;$c++) {
                $monthOrder[$c]    = CustomerInvite::statisticalMonth($c,$m_id,true,true);
            }
            if($monthInvite&&$monthRegister&&$monthOrder){
                $return_data['code']          = 200;
                $return_data['monthInvite']   = $monthInvite;
                $return_data['monthRegister'] = $monthRegister;
                $return_data['monthOrder']    = $monthOrder;
                echo json_encode(array('code'=>$return_data['code'],'monthInvite'=>$return_data['monthInvite'],'monthRegister'=>$return_data['monthRegister'],'monthOrder'=>$return_data['monthOrder']));die();
            }
        }else{
            $this->request->isAjax('請求錯誤！');
        }
    }
}

JS代碼


var EchartsModel;
define(['jquery', 'bootstrap', 'badmin', 'addtabs', 'table', 'echarts', 'echarts-theme', 'template'], function ($, undefined, Backend, Datatable, Table, Echarts, undefined, Template) {
    EchartsModel=Echarts;
});

//切換商戶獲取ajax
function change(){
    var merchant   = $('#merchant').val();     //門店的mid值
    $.ajax({
        url:"/admin/report/customer/customerothers/merchantAjax",
        type:"POST",
        dataType:'json',
        data : {merchant:merchant},
        async:false,
        success:function(e){
            if(e.code==200){
                //邀約
                $('#invite').siblings().remove();
                var html ='';
                for (var i in e.monthInvite){
                    html +="<td style='color:#3f5fbf;text-align: center'>"+ e.monthInvite[i]  +"</td>";
                }
                $('#invite').after(html);

                //簽到
                $('#register').siblings().remove();
                var html1 ='';
                for (var j in e.monthRegister){
                    html1 +="<td style=' color:#3f5fbf;text-align: center'>"+ e.monthRegister[j]  +"</td>";
                }
                $('#register').after(html1);

                //成交
                $('#order').siblings().remove();
                var html2 ='';
                for (var q in e.monthOrder){
                    html2 +="<td style='color:#3f5fbf;text-align: center'>"+ e.monthOrder[q]  +"</td>";
                }
                $('#order').after(html2);


                $data = e.data;
                var inviteArr   = [];
                var registerArr = [];
                var orderArr    = [];

                for(var ii=1;ii<=12;ii++) {
                    inviteArr[ii-1]   = e.monthInvite[ii];
                    registerArr[ii-1] = e.monthRegister[ii];
                    orderArr[ii-1]    = e.monthOrder[ii];
                }
                var myChart = EchartsModel.init(document.getElementById('echart'));
                //測試
                var posList = [
                    'left', 'right', 'top', 'bottom',
                    'inside',
                    'insideTop', 'insideLeft', 'insideRight', 'insideBottom',
                    'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'
                ];
                //configParameters部分
                myChart.configParameters = {
                    rotate: {
                        min: -90,
                        max: 90
                    },
                    align: {
                        options: {
                            left: 'left',
                            center: 'center',
                            right: 'right'
                        }
                    },
                    verticalAlign: {
                        options: {
                            top: 'top',
                            middle: 'middle',
                            bottom: 'bottom'
                        }
                    },
                    position: {
                        options: EchartsModel.util.reduce(posList, function (map, pos) {
                            map[pos] = pos;
                            return map;
                        }, {})
                    },
                    distance: {
                        min: 0,
                        max: 100
                    }
                };
                //config部分
                myChart.config = {
                    rotate: 90,
                    align: 'left',
                    verticalAlign: 'middle',
                    position: 'insideBottom',
                    distance: 15,
                    onChange: function () {
                        var labelOption = {
                            normal: {
                                rotate: myChart.config.rotate,
                                align: myChart.config.align,
                                verticalAlign: myChart.config.verticalAlign,
                                position: myChart.config.position,
                                distance: myChart.config.distance
                            }
                        };
                        myChart.setOption({
                            series: [{
                                label: labelOption
                            }, {
                                label: labelOption
                            }, {
                                label: labelOption
                            }, {
                                label: labelOption
                            }]
                        });
                    }
                };
                //labelOption部分
                var labelOption = {
                    normal: {
                        show: true,
                        position: myChart.config.position,
                        distance: myChart.config.distance,
                        align: myChart.config.align,
                        verticalAlign: myChart.config.verticalAlign,
                        rotate: myChart.config.rotate,
                        formatter: '{c}  {name|{a}}',
                        fontSize: 16,
                        rich: {
                            name: {
                                textBorderColor: '#eee'
                            }
                        }
                    }
                };
                //option部分
                option = {
                    color: ['#003366', '#006699', '#4cabce'],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    legend: {
                        data: ['邀約', '簽到', '成交']
                    },
                    toolbox: {
                        show: true,
                        orient: 'vertical',
                        left: 'right',
                        top: 'center',
                        feature: {
                            mark: {show: true},
                            dataView: {show: true, readOnly: false},
                            magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                            restore: {show: true},
                            saveAsImage: {show: true}
                        }
                    },
                    calculable: true,
                    xAxis: [
                        {
                            type: 'category',
                            axisTick: {show: false},
                            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: '邀約',
                            type: 'bar',
                            barGap: 0,
                            label: labelOption,
                            data: inviteArr
                        },
                        {
                            name: '簽到',
                            type: 'bar',
                            label: labelOption,
                            data: registerArr
                        },
                        {
                            name: '成交',
                            type: 'bar',
                            label: labelOption,
                            data: orderArr
                        }

                    ]
                };
                // 使用剛指定的配置項和數據顯示圖表。
                myChart.setOption(option);

            }
        }
    })
}