admin_api/resources/views/admin/chart/dashboard.blade.php

@extends('base.base')
@section('base')
    <!-- 内容区域 -->
    <div class="main-panel">
        <div class="content-wrapper">
            <div class="page-header">
                <h3 class="page-title">
              <span class="page-title-icon bg-gradient-primary text-white mr-2">
                <i class="mdi mdi-home"></i>
              </span>
                    Dashboard
                </h3>
                {{--<nav aria-label="breadcrumb">--}}
                {{--<ul class="breadcrumb">--}}
                {{--<li class="breadcrumb-item active" aria-current="page">--}}
                {{--<span></span>Overview--}}
                {{--<i class="mdi mdi-alert-circle-outline icon-sm text-primary align-middle"></i>--}}
                {{--</li>--}}
                {{--</ul>--}}
                {{--</nav>--}}
            </div>
            <div class="row">
                <div class="col-md-3 stretch-card grid-margin">
                    <div class="card bg-gradient-danger card-img-holder text-white">
                        <div class="card-body">
                            <img src="/assets/images/dashboard/circle.svg" class="card-img-absolute" alt="circle-image"/>
                            <h4 class="font-weight-normal mb-3">{{ __('auto.咖啡总额') }}
                                <i class="mdi mdi-chart-line mdi-24px float-right"></i>
                            </h4>
                            <h2 class="mb-5">{{$recharge_total}}</h2>
                            <h6 class="card-text">{{ __('auto.茶叶总额：') }}{{$withdraw_total}}</h6>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 stretch-card grid-margin">
                    <div class="card bg-gradient-info card-img-holder text-white">
                        <div class="card-body">
                            <img src="/assets/images/dashboard/circle.svg" class="card-img-absolute" alt="circle-image"/>
                            <h4 class="font-weight-normal mb-3">{{ __('auto.注册用户') }}
                                <i class="mdi mdi-bookmark-outline mdi-24px float-right"></i>
                            </h4>
                            <h2 class="mb-5">{{$register_user_count}}</h2>
                            <h6 class="card-text">{{ __('auto.付费用户：') }}{{$recharge_user_count}}</h6>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 stretch-card grid-margin">
                    <div class="card bg-gradient-success card-img-holder text-white">
                        <div class="card-body">
                            <img src="/assets/images/dashboard/circle.svg" class="card-img-absolute" alt="circle-image"/>
                            <h4 class="font-weight-normal mb-3">{{ __('auto.总流水') }}
                                <i class="mdi mdi-diamond mdi-24px float-right"></i>
                            </h4>
                            <h2 class="mb-5">{{$flow_total}}</h2>
                            <h6 class="card-text">{{ __('auto.平台总输赢：') }}{{$win_lose_total}}</h6>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 stretch-card grid-margin">
                    <div class="card bg-gradient-warning card-img-holder text-white">
                        <div class="card-body">
                            <img src="/assets/images/dashboard/circle.svg" class="card-img-absolute" alt="circle-image"/>
                            <h4 class="font-weight-normal mb-3">{{ __('auto.总税收') }}
                                <i class="mdi mdi-details mdi-24px float-right"></i>
                            </h4>
                            <h2 class="mb-5">{{$revenue_total}}</h2>
                            <h6 class="card-text">{{ __('auto.累计茶叶金额：') }}{{$recovery_total}}</h6>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-7 grid-margin stretch-card">
                    <div class="card">
                        <div class="card-body">
                            <div class="clearfix">
                                <h4 class="card-title float-left">{{ __('auto.咖啡') }}</h4>
                                <div id="visit-sale-chart-legend" class="rounded-legend legend-horizontal legend-top-right float-right"></div>
                            </div>
                            <!--<canvas id="visit-sale-chart" class="mt-4"></canvas>-->
                            <div id="container" class="mt-4" style="height:500px;width:100%;"></div>
                        </div>
                    </div>
                </div>
                <div class="col-md-5 grid-margin stretch-card">
                    <div class="card">
                        <div class="card-body">
                            <h4 class="card-title">{{ __('auto.赠送彩金') }}</h4>
                            <!--<canvas id="traffic-chart"></canvas>-->
                            <div id="container2" style="height:500px;width:100%;"></div>
                            <div id="traffic-chart-legend" class="rounded-legend legend-vertical legend-bottom-left pt-4"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-7 grid-margin stretch-card">
                    <div class="card">
                        <div class="card-body">
                            <h4 class="card-title">{{ __('auto.首充礼包报表') }}</h4>
                            <div class="table-responsive">
                                <table class="table">
                                    <thead>
                                    <tr>
                                        <th>{{ __('auto.首冲礼包额外赠送总彩金：') }}466700.0</th>
                                        <th>{{ __('auto.所有首冲礼包购买成功率：') }}26.32%</th>
                                    </tr>
                                    </thead>
                                </table>
                                <table class="table">
                                    <thead>
                                    <tr>
                                        <th>{{ __('auto.礼包类型') }}</th>
                                        <th>{{ __('auto.支付金额') }}</th>
                                        <th>{{ __('auto.购买数量') }}</th>
                                        <th>{{ __('auto.购买率') }}</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr>
                                        <td>{{ __('auto.白银') }}</td>
                                        <td>123123</td>
                                        <td>123</td>
                                        <td>30%</td>
                                    </tr>
                                    <tr>
                                        <td>{{ __('auto.黄金') }}</td>
                                        <td>123123</td>
                                        <td>123</td>
                                        <td>30%</td>
                                    </tr>
                                    <tr>
                                        <td>{{ __('auto.钻石') }}</td>
                                        <td>123123</td>
                                        <td>123</td>
                                        <td>30%</td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-5 grid-margin stretch-card">
                    <div class="card">
                        <div class="card-body">
                            <h4 class="card-title">{{ __('auto.周卡购买报表') }}</h4>
                            <div class="table-responsive">
                                <table class="table">
                                    <thead>
                                    <tr>
                                        <th>{{ __('auto.周卡累计支付成功：') }}233800</th>
                                        <th>{{ __('auto.周卡累计未支付成功：') }}2868000</th>
                                        <th>{{ __('auto.周卡累计领取金额：') }}300740.00</th>
                                    </tr>
                                    </thead>
                                </table>
                                <table class="table">
                                    <thead>
                                    <tr>
                                        <th>{{ __('auto.周卡类型') }}</th>
                                        <th>{{ __('auto.购买数量') }}</th>
                                        <th>{{ __('auto.购买率') }}</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr>
                                        <td>VIP1</td>
                                        <td>123</td>
                                        <td>30%</td>
                                    </tr>
                                    <tr>
                                        <td>VIP2</td>
                                        <td>123</td>
                                        <td>30%</td>
                                    </tr>
                                    <tr>
                                        <td>VIP3</td>
                                        <td>123</td>
                                        <td>30%</td>
                                    </tr>
                                    <tr>
                                        <td>VIP4</td>
                                        <td>123</td>
                                        <td>30%</td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-7 grid-margin stretch-card">
                    <div class="card">
                        <div class="card-body">
                            <div class="clearfix">
                                <h4 class="card-title float-left">{{ __('auto.用户') }}</h4>
                                <div id="visit-sale-chart-legend" class="rounded-legend legend-horizontal legend-top-right float-right"></div>
                            </div>
                            <!--<canvas id="visit-sale-chart" class="mt-4"></canvas>-->
                            <div id="container3" class="mt-4" style="height:500px;width:100%;"></div>
                            <div class="table-responsive">
                                <table class="table">
                                    <thead>
                                    <tr>
                                        <td>{{ __('auto.休眠用户总数：') }}234</td>
                                        <td>{{ __('auto.流失用户总数：') }}23423</td>
                                    </tr>
                                    </thead>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-5 grid-margin stretch-card">
                    <div class="card">
                        <div class="card-body">
                            <h4 class="card-title">{{ __('auto.用户身上金额') }}</h4>
                            <!--<canvas id="traffic-chart"></canvas>-->
                            <div id="container4" style="height:500px;width:100%;"></div>
                            <div id="traffic-chart-legend" class="rounded-legend legend-vertical legend-bottom-left pt-4"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-7 grid-margin stretch-card">
                    <div class="card">
                        <div class="card-body">
                            <h4 class="card-title">{{ __('auto.不同渠道用户数') }}</h4>
                            <div class="table-responsive">
                                <table class="table">
                                    <thead>
                                    <tr>
                                        <th>{{ __('auto.渠道') }}</th>
                                        <th>{{ __('auto.人数') }}</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr>
                                        <td>{{ __('auto.新增IOS用户') }}</td>
                                        <td>123</td>
                                    </tr>
                                    <tr>
                                        <td>{{ __('auto.新增安卓用户') }}</td>
                                        <td>123</td>
                                    </tr>
                                    <tr>
                                        <td>{{ __('auto.游客人数') }}</td>
                                        <td>123</td>
                                    </tr>
                                    <tr>
                                        <td>{{ __('auto.手机账号人数') }}</td>
                                        <td>123</td>
                                    </tr>
                                    <tr>
                                        <td>Facebook{{ __('auto.人数') }}</td>
                                        <td>123</td>
                                    </tr>
                                    <tr>
                                        <td>{{ __('auto.谷歌试玩场会员人数') }}</td>
                                        <td>123</td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-5 grid-margin stretch-card">
                    <div class="card">
                        <div class="card-body">
                            <h4 class="card-title">{{ __('auto.不同渠道咖啡') }}</h4>
                            <div class="table-responsive">
                                <table class="table">
                                    <thead>
                                    <tr>
                                        <th>{{ __('auto.渠道') }}</th>
                                        <th>{{ __('auto.咖啡金额') }}</th>
                                        <th>{{ __('auto.咖啡人数') }}</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr>
                                        <td>IOS</td>
                                        <td>23423</td>
                                        <td>234</td>
                                    </tr>
                                    <tr>
                                        <td>{{ __('auto.安卓') }}</td>
                                        <td>23423</td>
                                        <td>234</td>
                                    </tr>
                                    <tr>
                                        <td>{{ __('auto.谷歌') }}</td>
                                        <td>1111</td>
                                        <td>2222</td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <div class="row">
                <div class="col-md-12 grid-margin stretch-card">
                    <div class="card">
                        <div class="card-body">
                            <h4 class="card-title">{{ __('auto.房间流水') }}</h4>
                            <div class="table-responsive">
                                <table class="table">
                                    <thead>
                                    <tr>
                                        <th>{{ __('auto.房间') }}</th>
                                        <th>{{ __('auto.房间流水') }}</th>
                                        <th>{{ __('auto.平台输赢') }}</th>
                                        <th>{{ __('auto.税收') }}</th>
                                        <th>{{ __('auto.游戏人数') }}</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr>
                                        <td>{{ __('auto.注册赠送：') }}</td>
                                        <td>{{ __('auto.签到赠送：') }}</td>
                                        <td>xx{{ __('auto.赠送：') }}</td>
                                        <td>11{{ __('auto.赠送：') }}</td>
                                        <td>22{{ __('auto.赠送：') }}</td>
                                    </tr>
                                    <tr>
                                        <td>{{ __('auto.总计') }}</td>
                                        <td>{{ __('auto.签到赠送') }}</td>
                                        <td>xx{{ __('auto.赠送：') }}</td>
                                        <td>11{{ __('auto.赠送：') }}</td>
                                        <td>22{{ __('auto.赠送：') }}</td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- partial:partials/_footer.html -->
        <footer class="footer">
            <div class="d-sm-flex justify-content-center justify-content-sm-between">
                <span class="text-muted text-center text-sm-left d-block d-sm-inline-block">Copyright © 2017-2018 <a href="http://www.yamecent.com/" target="_blank">Yamecent</a>. All rights reserved. </span>
            </div>
        </footer>
        <!-- partial -->
    </div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('container'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'ECharts {{ __('auto.入门示例') }}'
            },
            tooltip: {},
            legend: {
                data: ['{{ __('auto.销量') }}']
            },
            xAxis: {
                data: ['{{ __('auto.衬衫') }}', '{{ __('auto.羊毛衫') }}', '{{ __('auto.雪纺衫') }}', '{{ __('auto.裤子') }}', '{{ __('auto.高跟鞋') }}', '{{ __('auto.袜子') }}']
            },
            yAxis: {},
            series: [
                {
                    name: '{{ __('auto.销量') }}',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20]
                }
            ]
        };
        myChart.setOption(option);


        var myChart2 = echarts.init(document.getElementById('container2'));



        var option2 = {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                top: '5%',
                left: 'center'
            },
            series: [
                {
                    name: 'Access From',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '40',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        { value: 1048, name: 'Search Engine' },
                        { value: 735, name: 'Direct' },
                        { value: 580, name: 'Email' },
                        { value: 484, name: 'Union Ads' },
                        { value: 300, name: 'Video Ads' }
                    ]
                }
            ]
        };
        myChart2.setOption(option2);


        var myChart3 = echarts.init(document.getElementById('container3'));
        var option3 = {
            title: {
                text: 'Stacked Line'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: 'Email',
                    type: 'line',
                    stack: 'Total',
                    data: [120, 132, 101, 134, 90, 230, 210]
                },
                {
                    name: 'Union Ads',
                    type: 'line',
                    stack: 'Total',
                    data: [220, 182, 191, 234, 290, 330, 310]
                },
                {
                    name: 'Video Ads',
                    type: 'line',
                    stack: 'Total',
                    data: [150, 232, 201, 154, 190, 330, 410]
                },
                {
                    name: 'Direct',
                    type: 'line',
                    stack: 'Total',
                    data: [320, 332, 301, 334, 390, 330, 320]
                },
                {
                    name: 'Search Engine',
                    type: 'line',
                    stack: 'Total',
                    data: [820, 932, 901, 934, 1290, 1330, 1320]
                }
            ]
        };
        myChart3.setOption(option3);


        var myChart4 = echarts.init(document.getElementById('container4'));
        var option4 = {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                top: '5%',
                left: 'center'
            },
            series: [
                {
                    name: 'Access From',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '40',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        { value: 1048, name: 'Search Engine' },
                        { value: 735, name: 'Direct' },
                        { value: 580, name: 'Email' },
                        { value: 484, name: 'Union Ads' },
                        { value: 300, name: 'Video Ads' }
                    ]
                }
            ]
        };
        myChart4.setOption(option4);

    </script>
@endsection