jucai/public/themes/default/views/statistics/app/person/job_anaysis.blade.php

@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_job_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 c3">
                <div class="char-title no-icon">职位大类TOP10</div>
                <div id="jobclassification1" style="width: 100%;height: 350px;"></div>
            </div>
            <div class="char-box c3">
                <div class="char-title no-icon">职位小类TOP10</div>
                <div id="jobclassification2" style="width: 100%;height: 350px;"></div>
            </div>
            <div class="char-box c3">
                <div class="char-title no-icon">按学历分布的薪资</div>
                <div id="salary" style="width: 100%;height: 285px;"></div>
            </div>

            <div class="char-box c3" style="height: 430px;">
                <div class="char-title no-icon">投递行业TOP10</div>
                <div id="apply" style="width: 100%;height: 385px;"></div>
            </div>


            <div class="clear"></div>
        </div>
        <div class="clear"></div>
    </div>

@endsection


@section('script')
    <script type="text/javascript">
        var colors = ['#2da1f9','#f9629a','#0063ed','#ec948a'];
        //职位大类TOP10
        var chartData1 = [];
        var chartName1 = [];
        @if($top_data)
            @foreach($top_data as $k => $v)
            chartData1.push('{{$v}}');
            chartName1.push("{{$top_name_data[$k] or ''}}");
            @endforeach
        @endif
        var myChart1 = echarts.init(document.getElementById('jobclassification1'));
        myChart1.setOption({
            color:colors,
            tooltip: {
                trigger: 'axis',
                axisPointer: { // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            grid: {
                top: '40',
                left: '40',
                right: '40',
                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
                    },
                    formatter: function(params, index) {
                        var splitNum=[6, 6, 8, 10]
                        var newParamsName = "";
                        var splitNumber = 7;
                        var paramsNameNumber = params && params.length;
                        if (paramsNameNumber && paramsNameNumber <= 4) {
                            splitNumber = splitNum[0] || 4;
                        } else if (paramsNameNumber >= 5 && paramsNameNumber <= 7) {
                            splitNumber = splitNum[1] || 4;
                        } else if (paramsNameNumber >= 8 && paramsNameNumber <= 9) {
                            splitNumber = splitNum[2] || 4;
                        } else if (paramsNameNumber >= 10 && paramsNameNumber <= 14) {
                            splitNumber = splitNum[3] || 5;
                        } else if (paramsNameNumber >= 15 && paramsNameNumber <= 16) {
                            splitNumber = splitNum[4] || 6;
                        } else if (paramsNameNumber >= 17 && paramsNameNumber <= 20) {
                            splitNumber = splitNum[5] || 6;
                        } else {
                            params = params && params.slice(0, 21);
                        }

                        var provideNumber = splitNumber; //一行显示几个字
                        var rowNumber = Math.ceil(paramsNameNumber / provideNumber) || 0;
                        if (paramsNameNumber > provideNumber) {
                            for (var p = 0; p < rowNumber; p++) {
                                var tempStr = "";
                                var start = p * provideNumber;
                                var end = start + provideNumber;
                                if (p == rowNumber - 1) {
                                    tempStr = params.substring(start, paramsNameNumber);
                                } else {
                                    tempStr = params.substring(start, end) + "\n";
                                }
                                newParamsName += tempStr;
                            }

                        } else {
                            newParamsName = params;
                        }


                        return newParamsName;
                    }
                },
                data: chartName1
            }],
            yAxis: [{
                type: 'value',
                name: '',
                axisLabel: {
                    formatter: '{value}'
                }
            }],
            series: [{
                type: 'bar',
                barMaxWidth: '40',
                data: chartData1
            }]
        });


        //职位小类TOP10
        var chartData2 = [];
        var chartName2 = [];
        @if($second_data)
            @foreach($second_data as $k => $v)
                chartData2.push('{{$v}}');
                chartName2.push("{{$second_name_data[$k] or ''}}");
            @endforeach
        @endif
        var myChart2 = echarts.init(document.getElementById('jobclassification2'));
        myChart2.setOption({
            color:colors[3],
            tooltip: {
                trigger: 'axis',
                axisPointer: { // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            grid: {
                top: '40',
                left: '40',
                right: '40',
                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: chartName2
            }],
            yAxis: [{
                type: 'value',
                name: '',
                axisLabel: {
                    formatter: '{value}'
                }
            }],
            series: [{
                type: 'bar',
                barMaxWidth: '40',
                data: chartData2
            }]
        });


        //按学历分布的薪资
        var chartData3 = [];
        var chartName3 = [];
        @if($wage_data)
            @foreach($wage_data as $k => $v)
            chartData3.push('{{$v}}');
            chartName3.push("{{$edu_data[$k] or ''}}");
            @endforeach
        @endif
        var colors1 = ["#ec948a","#eab374","#54b7ea","#61c5d0","#a9e0d4","#bddb89","#44d4b0","#99b5ff","#797bac","#8bc0df"];
        var myChart3 = echarts.init(document.getElementById('salary'));
        myChart3.setOption({
            color:'#ff5b82',
            tooltip: {
                trigger: 'axis',
                axisPointer: { // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            grid: {
                top: '40',
                left: '40',
                right: '40',
                bottom: '18',
                containLabel: true
            },
            xAxis: [{
                type: 'category',
                //show:false,
                boundaryGap:true,
                axisTick:{
                    alignWithLabel:true
                },
                axisLabel:{
                    interval: 0, //坐标轴刻度标签的显示间隔 , 0 强制显示所有标签。
                    rotate:-45,  //刻度标签旋转的角度
                    textStyle: {
                        color: '#333333',
                        fontSize:10
                    },

                },
                data: chartName3
            }],
            yAxis: [{
                type: 'value',
                name: '',
                min:0,
                splitNumber:6,
                minInterval:3000,
                axisLabel: {
                    formatter: '{value}元'
                }
            }],
            series: [{
                name:'薪资',
                type: 'bar',
                barMaxWidth: '40',
                label: {
                    normal: {
                        show: false,
                        textStyle: {
                            color: '#fff',
                            fontSize: 14
                        }
                    }
                },
                data: chartData3
            }]
        });

        //投递行业TOP10
        var chartData4 = [];
        var chartName4 = [];
        @if($apply_name)
            @foreach($apply_name as $k => $v)
            chartName4.push('{{$v}}');
            chartData4.push("{{$apply_data[$k] or ''}}");
            @endforeach
        @endif
        var myChart4 = echarts.init(document.getElementById('apply'));
        myChart4.setOption({
            color:'#eab374',
            tooltip: {
                trigger: 'axis',
                axisPointer: { // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            grid: {
                top: '40',
                left: '40',
                right: '40',
                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
            }]
        });
    </script>
@endsection