{template '_header'}


<div class="page-header">当前位置： <span class="text-primary">会员概述</span> </div>
<div class="row">
    <div class="col-sm-4">
    <div class="ibox float-e-margins" style="border: 1px solid #e7eaec">
        <div class="ibox-title">
            <!--<span class="label label-success pull-right">月</span>-->
            <h5>今日新增会员</h5>
        </div>
        <div class="ibox-content">
            <h1 class="no-margins today-count">--</h1>
            <div class="stat-percent font-bold text-success"><span class="today-rate">--</span>%<i class="fa fa-level-up"></i>
            </div>
            <small>新增会员</small>
        </div>
    </div>
</div>

    <div class="col-sm-4">
        <div class="ibox float-e-margins" style="border: 1px solid #e7eaec">
            <div class="ibox-title">
                <!--<span class="label label-success pull-right">月</span>-->
                <h5>昨日新增会员</h5>
            </div>
            <div class="ibox-content">
                <h1 class="no-margins yesterday-count">--</h1>
                <div class="stat-percent font-bold text-info"><span class="yesterday-rate">--</span>% <i class="fa fa-level-up"></i>
                </div>
                <small>新增会员</small>
            </div>
        </div>
    </div>

    <div class="col-sm-4">
        <div class="ibox float-e-margins" style="border: 1px solid #e7eaec">
            <div class="ibox-title">
                <!--<span class="label label-info pull-right">全年</span>-->
                <h5>过去七天新增会员</h5>
            </div>
            <div class="ibox-content">
                <h1 class="no-margins seven-count">--</h1>
                <div class="stat-percent font-bold text-warning"><span class="seven-rate">--</span>%<i class="fa fa-level-up"></i>
                </div>
                <small>新增会员</small>
            </div>
        </div>
    </div>

    <div class="col-sm-6">
        <div class="ibox float-e-margins" style="border: 1px solid #e7eaec">
            <div class="ibox-title">
                <h5>会员性别分布</h5>
            </div>
            <div class="ibox-content">
                <div class="echarts" id="echarts-pie-chart" style="display: none"></div>

                <div class="spiner-example" id="echarts-pie-chart-loading">
                    <div class="sk-spinner sk-spinner-wave">
                        <div class="sk-rect1"></div>
                        <div class="sk-rect2"></div>
                        <div class="sk-rect3"></div>
                        <div class="sk-rect4"></div>
                        <div class="sk-rect5"></div>
                    </div>
                </div>

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

    <div class="col-sm-6">
        <div class="ibox float-e-margins" style="border: 1px solid #e7eaec">
            <div class="ibox-title">
                <h5>会员等级分布</h5>
            </div>
            <div class="ibox-content">
                <div class="echarts" id="echarts-pie-chart1" style="display: none"></div>

                <div class="spiner-example" id="echarts-pie-chart1-loading">
                    <div class="sk-spinner sk-spinner-wave">
                        <div class="sk-rect1"></div>
                        <div class="sk-rect2"></div>
                        <div class="sk-rect3"></div>
                        <div class="sk-rect4"></div>
                        <div class="sk-rect5"></div>
                    </div>
                </div>

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

        <div class="col-sm-12">
            <div class="ibox float-e-margins" style="border: 1px solid #e7eaec">
                <div class="ibox-title">
                    <h5>会员区域分布</h5>
                </div>
                <div class="ibox-content">
                    <div style="height:600px;display: none" id="echarts-map-chart" class="echarts" ></div>

                    <div class="spiner-example" id="echarts-map-chart-loading">
                        <div class="sk-spinner sk-spinner-wave">
                            <div class="sk-rect1"></div>
                            <div class="sk-rect2"></div>
                            <div class="sk-rect3"></div>
                            <div class="sk-rect4"></div>
                            <div class="sk-rect5"></div>
                        </div>
                    </div>

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

<script>
    myrequire(['echarts'], function () {
        $(function () {
            $.ajax({
                type: "GET",
                url: "{php echo webUrl('member/ajaxall')}",
                dataType: "json",
                success: function (json) {
                    var pieChart = echarts.init(document.getElementById("echarts-pie-chart"));
                    var pieoption = {
                        title: {
                            text: '男女会员分布',
                            subtext: '',
                            x: 'center'
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: "{a} <br/>{b} : {c} ({d}%)"
                        },
                        legend: {
                            orient: 'vertical',
                            x: 'right',
                            data: ['男', '女', '未知']
                        },
                        calculable: true,
                        series: [
                            {
                                name: '男女分布',
                                type: 'pie',
                                radius: '55%',
                                center: ['50%', '60%'],
                                data: [
                                    {value: json.ajaxmembergender[1], name: '男'},
                                    {value: json.ajaxmembergender[2], name: '女'},
                                    {value: json.ajaxmembergender[0], name: '未知'}
                                ]
                            }
                        ]
                    };
                    $("#echarts-pie-chart-loading").hide()
                    $("#echarts-pie-chart").show();
                    pieChart.setOption(pieoption);
                    pieChart.resize();

                    var pieChart1 = echarts.init(document.getElementById("echarts-pie-chart1"));
                    var pieoption1 = {
                        title: {
                            text: '会员等级分布',
                            subtext: '',
                            x: 'center'
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: "{a} <br/>{b} : {c} ({d}%)"
                        },
                        legend: {
                            orient: 'vertical',
                            x: 'right',
                            data: json.ajaxmemberlevel.name
                        },
                        calculable: true,
                        series: [
                            {
                                name: '等级分布',
                                type: 'pie',
                                radius: '55%',
                                center: ['40%', '60%'],
                                data: json.ajaxmemberlevel.data
                            }
                        ]
                    };
                    $("#echarts-pie-chart1-loading").hide();
                    $("#echarts-pie-chart1").show();
                    pieChart1.setOption(pieoption1);
                    pieChart1.resize();

                    var mapChart = echarts.init(document.getElementById("echarts-map-chart"));
                    var mapoption = {
                        title: {
                            text: '会员分布区域',
                            subtext: '',
                            x: 'center'
                        },
                        tooltip: {
                            trigger: 'item'
                        },
                        legend: {
                            orient: 'vertical',
                            x: 'left',
                            data: ['会员分布区域']
                        },
                        dataRange: {
                            min: 0,
                            max: 100,
                            x: 'left',
                            y: 'bottom',
                            text: ['人数'],           // 文本，默认为数值文本
                            calculable: true
                        },
                        toolbox: {
                            show: true,
                            orient: 'vertical',
                            x: 'right',
                            y: 'center',
                            feature: {
                                mark: {show: true},
                                dataView: {show: true, readOnly: true},
                                restore: {show: true},
                                saveAsImage: {show: true}
                            }
                        },
                        roamController: {
                            show: false,
                            x: 'right',
                            mapTypeControl: {
                                'china': true
                            }
                        },
                        series: [
                            {
                                name: '会员分布区域',
                                type: 'map',
                                mapType: 'china',
                                roam: false,
                                itemStyle: {
                                    normal: {label: {show: true}},
                                    emphasis: {label: {show: true}}
                                },
                                data: json.ajaxprovince
                            }
                        ]
                    };
                    $("#echarts-map-chart-loading").hide();
                    $("#echarts-map-chart").show();
                    mapChart.setOption(mapoption);
                    mapChart.resize();

                    $(".today-count").text(json.ajaxnewmember0.count);
                    $(".today-rate").text(json.ajaxnewmember0.rate);

                    $(".yesterday-count").text(json.ajaxnewmember1.count);
                    $(".yesterday-rate").text(json.ajaxnewmember1.rate);

                    $(".seven-count").text(json.ajaxnewmember7.count);
                    $(".seven-rate").text(json.ajaxnewmember7.rate);
                }
            });
        });
    });
</script>
{template '_footer'}