@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 company_recruitment_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="index_summary_two">
                <div class="box-cell line">
                    <div class="line-one">
                        <div>企业总数<span>{{$all_company_num}}</span></div>
                        <div>当前企业数量<span class="font-red">{{$current_company_num}}</span></div>
                    </div>
                </div>
                <div class="box-cell line">
                    <div class="line-one">
                        <div>职位总数<span>{{$all_jobs_num}}</span></div>
                        <div>当前职位数量<span class="font-red">{{$current_jobs_num}}</span></div>
                    </div>
                </div>
                <div class="box-cell">
                    <div class="line-one">
                        <div>招聘总人数<span>{{$all_job_amount}}</span></div>
                        <div>当前招聘人数<span class="font-red">{{$current_job_amount}}</span></div>
                    </div>
                </div>
                <div class="clear"></div>
            </div>


            <div class="char-box c4">
                <div class="char-title no-icon">行业需求TOP10</div>
                <div id="demand" style="width: 100%;height: 275px;"></div>
            </div>
            <div class="char-box c4">
                <div class="char-title no-icon">职业大类TOP10+工资</div>
                <div id="jobclassification1" style="width: 100%;height: 275px;"></div>
            </div>
            <div class="char-box c4">
                <div class="char-title no-icon">职业小类TOP10+工资</div>
                <div id="jobclassification2" style="width: 100%;height: 275px;"></div>
            </div>
            <div class="char-box c4">
                <div class="char-title no-icon">学历分布</div>
                <div id="education" style="width: 100%;height: 275px;"></div>
            </div>
            <div class="char-box c4" style="width:900px;">
                <div class="char-title no-icon">工作经验</div>
                <div id="experience" 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 =["#80a7d6","#bab6d3","#8ae0be","#fc766a","#f1d660","#d497df","#f88c8c","#f8b08c","#b2f88c","#8bc0df"];
        var genderColorList=["#4d8dff","#ff6992"]
        // 行业需求TOP10
        var chartData1 = [];
        var chartName1 = [];
        @if($trade_data)
            @foreach($trade_data as $k => $v)
            chartData1.push({value:"{{$v['num']}}",name:"{{$v['name']}}"});
            chartName1.push("{{$v['name']}}");
            @endforeach
        @endif
        var myChart1 = echarts.init(document.getElementById('demand'));
        myChart1.setOption({
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)"
            },
            legend: {
                //orient: 'vertical',
                textStyle:{
                    color:'#555555',
                    fontSize: 12,
                },
                left:10,
                top:5,
                bottom:5,
                itemWidth:15,
                itemHeight:8,
                data:chartName1
            },
            series: [
                {
                    name:'行业需求TOP10',
                    type:'pie',
                    radius: ['30%', '55%'],
                    center: ['50%', '70%'],
                    clockwise :true,
                    z:10,
                    itemStyle: {
                        normal: {
                            color: function(params) {
                                return colorList[params.dataIndex]
                            },
                        }
                    },
                    label: {
                        show:false
                    },
                    labelLine: {
                        normal: {
                            length: 20,
                            length2: 0,
                            lineStyle:{
                                width:2
                            }
                        }
                    },
                    data:chartData1
                }
            ]
        });


        // 职业大类TOP10+工资
        var chartData2 = [];
        var chartName2 = [];
        var chartData22 = [];
            @if($topclass_amount)
            @foreach($topclass_amount as $k=>$v)
            chartData2.push("{{$v}}");
            chartName2.push("{{$topclass_name[$k] or ''}}");
            chartData22.push("{{$topclass_wage[$k] or ''}}");
            @endforeach
        @endif
        var myChart2 = echarts.init(document.getElementById('jobclassification1'));
        myChart2.setOption({
            /*color: ['#ff5b82'],*/
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
                legend: {
                data: ['需求人数','平均工资']
            },
            grid: {
                top:'20',
                left: '5',
                right: '30',
                bottom: '10',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                show:false,
                boundaryGap: [0, 0.01]
            },
            yAxis: {
                type: 'category',
                inverse:true,   //是否反向坐标轴
                data: chartName2,
                axisLine:{
                    show:false  //是否显示坐标轴轴线
                },
                axisTick:{
                    show:false //是否显示坐标轴刻度
                }
            },
            series: [
                    {	name:'需求人数',
                        type: 'bar',
                        barMaxWidth: '12',
                        stack: '总量',
                        label: {
                            normal: {
                                show: false,
                                textStyle: {
                                    //color: '#000',
                                    fontSize: 12
                                },
                                //position: 'right',
                                formatter: function(data) {
//		                        return chartData2[data.dataIndex]+'元'
                                }
                            }
                        },
                        data: chartData2
                    },
                    {
                        name:'平均工资',
                        type: 'bar',
                        barMaxWidth: '12',
                        stack: '总量',
                        label: {
                            normal: {
                                show: true,
                                textStyle: {
                                    //color: '#000',
                                    fontSize: 12
                                },
                                position: 'right',
                                formatter: function(data) {
                                    return chartData22[data.dataIndex]+'元'
                                }
                            }
                        },
                        data: chartData22
                    }
            ]
        });
        // 职业小类TOP10+工资
        var chartData3  = [];
        var chartName3  = [];
        var chartData33 = [];
        @if($subclass_amount)
            @foreach($subclass_amount as $k=>$v)
            chartData3.push("{{$v}}");
            chartName3.push("{{$subclass_name[$k] or ''}}");
            chartData33.push("{{$subclass_wage[$k] or ''}}");
            @endforeach
        @endif
        var myChart3 = echarts.init(document.getElementById('jobclassification2'));
        myChart3.setOption({
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                data: ['需求人数','平均工资']
            },
            grid: {
                top:'20',
                left: '5',
                right: '30',
                bottom: '10',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                show:false,
                boundaryGap: [0, 0.01]
            },
            yAxis: {
                type: 'category',
                inverse:true,   //是否反向坐标轴
                data: chartName3,
                axisLine:{
                    show:false  //是否显示坐标轴轴线
                },
                axisTick:{
                    show:false //是否显示坐标轴刻度
                }
            },
            series: [
                {	name:'需求人数',
                    type: 'bar',
                    barMaxWidth: '12',
                    stack: '总量',
                    label: {
                        normal: {
                            show: false,
                            textStyle: {
                                fontSize: 12
                            },
                            formatter: function(data) {
//		                        return chartData2[data.dataIndex]+'元'
                            }
                        }
                    },
                    data: chartData3
                },
                {
                    name:'平均工资',
                    type: 'bar',
                    barMaxWidth: '12',
                    stack: '总量',
                    label: {
                        normal: {
                            show: true,
                            textStyle: {
                                fontSize: 12
                            },
                            position: 'right',
                            formatter: function(data) {
                                return chartData33[data.dataIndex]+'元'
                            }
                        }
                    },
                    data: chartData33
                }
            ]
        });

        var colors = ['#2da1f9','#f9629a','#0063ed','#ff9b19'];
        //学历分布
        var chartData4 = [];
        var chartName4 = [];
        @if($edu_data)
            @foreach($edu_data as $k=>$v)
                chartData4.push("{{$v}}");
                chartName4.push("{{$edu_names[$k] or ''}}");
            @endforeach
        @endif
        var myChart4 = echarts.init(document.getElementById('education'));
        myChart4.setOption({
            color:colors,
            tooltip: {
                trigger: 'axis',
                axisPointer: { // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            grid: {
                top: '20',
                left: '8',
                right: '8',
                bottom: '18',
                containLabel: true
            },
            xAxis: [{
                type: 'category',
                boundaryGap:true,
                axisTick:{
                    alignWithLabel:true
                },
                axisLabel:{
                    interval: 0, //坐标轴刻度标签的显示间隔 , 0 强制显示所有标签。
                    rotate:-45,  //刻度标签旋转的角度
                    margin:10,
                    textStyle: {
                        color: '#333333',
                        fontSize:10
                    }
                },
                data: chartName4
            }],
            yAxis: [{
                type: 'value',
                name: '',
                axisLabel: {
                    formatter: '{value}'
                }
            }],
            series: [{
                name:'职位数量',
                type: 'bar',
                barMaxWidth: '40',
                data: chartData4
            }]
        });
        //工作经验
        var chartData5 = [];
        var chartName5 = [];
        @if($exp_data)
            @foreach($exp_data as $k => $v)
                chartData5.push("{{$v}}");
                chartName5.push("{{$exp_names[$k]}}");
            @endforeach
        @endif
        var myChart5 = echarts.init(document.getElementById('experience'));
        myChart5.setOption({
            color:colors,
            tooltip: {
                trigger: 'axis',
                axisPointer: { // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            grid: {
                top: '20',
                left: '8',
                right: '8',
                bottom: '18',
                containLabel: true
            },
            xAxis: [{
                type: 'category',
                boundaryGap:true,
                axisTick:{
                    alignWithLabel:true
                },
                axisLabel:{
                    interval: 0, //坐标轴刻度标签的显示间隔 , 0 强制显示所有标签。
                    rotate:-45,  //刻度标签旋转的角度
                    margin:10,
                    textStyle: {
                        color: '#333333',
                        fontSize:10
                    }
                },
                data: chartName5
            }],
            yAxis: [{
                type: 'value',
                name: '',
                axisLabel: {
                    formatter: '{value}'
                }
            }],
            series: [{
                name:'职位数量',
                type: 'bar',
                barMaxWidth: '40',
                data: chartData5
            }]
        });
    </script>
@endsection