@extends('statistics.module.layouts.content')

@push('meta')

@endpush

@push('css')

@endpush

@push('js')
    <script src="{{ theme_asset('app/js/echarts.common.min.js') }}"></script>

@endpush

@section('content')
    <div class="wide container person_basic_warp">
        @include('statistics.module.section.left_menu')
        <div class="cq_rt index_right">
            <div class="inside_timer">
                @include('statistics.module.section.timer')
            </div>
            <div class="person_basic_total">
                <div class="box-cell line">
                    <div class="line-one" style="padding-top:15px;">
                        <div>个人会员总数<span>{{$all_member_num}}</span></div>
                        <div>当前个人会员数量<span class="font-red">{{$current_member_num}}</span></div>
                    </div>

                </div>
                <div class="box-cell">
                    <div class="line-one" style="padding-top:15px;">
                        <div>简历总数<span>{{$resume_all_nums}}</span></div>
                        <div>当前简历数量<span class="font-red">{{$resume_current_nums}}</span></div>
                    </div>

                </div>
                 <div class="clear"></div>
            </div>
            <div class="char-box c1">
                <div class="char-title">学历分布</div>
                <div id="education" style="width: 100%;height: 275px;"></div>
            </div>
            <div class="char-box c2">
                <div class="char-title">年龄分布</div>
                <div id="age" style="width: 100%;height: 275px;"></div>
            </div>
            <div class="char-box c3">
                <div class="char-title">性别分布</div>
                <div id="gender" style="width: 100%;height: 275px;"></div>
            </div>
            <div class="char-box c4">
                <div class="char-title">户籍分布TOP10</div>
                <div id="census" style="width: 100%;height: 275px;"></div>
            </div>
            <div class="clear"></div>
        </div>
        <div class="clear"></div>
    </div>

@endsection


@section('script')
    <script type="text/javascript">
        var colorList =["#ec948a","#54b7ea","#eab374","#61c5d0","#bddb89","#99b5ff","#797bac","#a9e0d4","#61c5d0","#8bc0df"];
        var genderColorList=["#4d8dff","#ff6992"]
        // 学历分布
        var chartData1 = [];
        @if($edu_data)
            @foreach($edu_data as $k=>$v)
            chartData1.push({value:"{{$v['value']}}", name:"{{$v['name']}}"});
            @endforeach
        @endif

        var chartName1 = [];
        @if ($edu_names)
            @foreach($edu_names as $k=>$v)
            chartName1.push("{{$v}}");
            @endforeach
        @endif
        var myChart1 = echarts.init(document.getElementById('education'));
        myChart1.setOption({
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                textStyle:{
                    color:'#555555',
                    fontSize: 12,
                },
                left:10,
                top:15,
                itemWidth:15,
                itemHeight:8,
                data:chartName1
            },
            series: [
                {
                    name:'学历分布',
                    type:'pie',
                    radius: ['50%', '75%'],
                    center: ['60%', '50%'],
                    clockwise :true,
                    z:10,
                    itemStyle: {
                        normal: {
                            color: function(params) {
                                // build a color map as your need.
                                return colorList[params.dataIndex]
                            },
                        }
                    },
                    label: {
                        show:false
                        /*normal: {
                              formatter:'{b}: {d}%'
                        }*/
                    },
                    labelLine: {
                        normal: {
                            length: 20,
                            length2: 0,
                            lineStyle:{
                                width:2
                            }
                        }
                    },
                    data:chartData1
                },
                {
                    name:'学历分布',
                    type:'pie',
                    radius: ['20%', '30%'],
                    center: ['60%', '50%'],
                    z:10,
                    itemStyle: {
                        normal: {
                            color: function(params) {
                                return colorList[params.dataIndex]
                            },
                        }
                    },
                    label:{
                        show:false
                    },
                    data:chartData1
                }
            ]
        });

        // 年龄分布
        var chartData2 = [];
        var chartName2 = [];
        @if ($age_names)
            @foreach($age_names as $k=>$v)
                chartData2.push({value:"{{$age_data[$k]}}", name:"{{$v}}"});
                chartName2.push("{{$v}}");
            @endforeach
        @endif
        var myChart2 = echarts.init(document.getElementById('age'));
        myChart2.setOption({
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                textStyle:{
                    color:'#555555',
                    fontSize: 12,
                },
                left:10,
                top:15,
                itemWidth:15,
                itemHeight:8,
                data:chartName2
            },
            series: [
                {
                    name:'年龄分布',
                    type:'pie',
                    radius: ['50%', '75%'],
                    center: ['60%', '50%'],
                    clockwise :true,
                    z:10,
                    itemStyle: {
                        normal: {
                            color: function(params) {
                                return colorList[params.dataIndex]
                            },
                        }
                    },
                    label: {
                        show:false
                        /*normal: {
                              formatter:'{b}: {d}%'
                        }*/
                    },
                    labelLine: {
                        normal: {
                            length: 20,
                            length2: 0,
                            lineStyle:{
                                width:2
                            }
                        }
                    },
                    data:chartData2
                },
                {
                    name:'年龄分布',
                    type:'pie',
                    radius: ['20%', '30%'],
                    center: ['60%', '50%'],
                    z:10,
                    itemStyle: {
                        normal: {
                            color: function(params) {
                                return colorList[params.dataIndex]
                            },
                        }
                    },
                    label:{
                        show:false
                    },
                    data:chartData2
                }
            ]
        });
        // 性别分布
        var chartData3 = [];
        @if($sex_data)
            @foreach($sex_data as $k=>$v)
                chartData3.push({value:"{{$v['value']}}", name:"{{$v['name']}}"});
            @endforeach
        @endif
        var chartName3 = [];
        @if ($sex_names)
            @foreach($sex_names as $k=>$v)
                chartName3.push("{{$v}}");
            @endforeach
        @endif

        var myChart3 = echarts.init(document.getElementById('gender'));
        myChart3.setOption({
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                textStyle:{
                    color:'#555555',
                    fontSize: 12,
                },
                left:10,
                top:15,
                itemWidth:15,
                itemHeight:8,
                data:chartName3
            },
            series: [
                {
                    name:'性别分布',
                    type:'pie',
                    radius: ['50%', '75%'],
                    center: ['60%', '50%'],
                    clockwise :true,
                    z:10,
                    itemStyle: {
                        normal: {
                            color: function(params) {
                                return genderColorList[params.dataIndex]
                            },
                        }
                    },
                    label: {
                        show:false
                        /*normal: {
                              formatter:'{b}: {d}%'
                        }*/
                    },
                    labelLine: {
                        normal: {
                            length: 20,
                            length2: 0,
                            lineStyle:{
                                width:2
                            }
                        }
                    },
                    data:chartData3
                }
            ]
        });
        // 户籍分布TOP10
        var chartData4 = [];
        @if($address_data)
            @foreach($address_data as $k=>$v)
            chartData4.push("{{$v}}");
            @endforeach
        @endif
        var chartName4 = [];
        @if ($address_names)
            @foreach($address_names as $k=>$v)
        chartName4.push("{{$v}}");
            @endforeach
        @endif


        var myChart4 = echarts.init(document.getElementById('census'));
        myChart4.setOption({
            color: ['#3398DB'],
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                top:'10',
                left: '20',
                right: '20',
                bottom: '10',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                show:false,
                boundaryGap: [0, 0.01]
            },
            yAxis: {
                type: 'category',
                inverse:true,   //是否反向坐标轴
                data: chartName4,
                axisLine:{
                    show:false  //是否显示坐标轴轴线
                },
                axisTick:{
                    show:false //是否显示坐标轴刻度
                }
            },
            series: [
                {
                    type: 'bar',
                    barMaxWidth: '15',
                    label: {
                        normal: {
                            show: true,
                            textStyle: {
                                color: '#000',
                                fontSize: 14
                            },
                            position: 'right',
                            formatter: function(data) {
                                return chartData4[data.dataIndex]
                            }
                        }
                    },
                    data: chartData4
                }
            ]
        });
    </script>
@endsection