@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_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="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 c1">
                <div class="char-title no-icon">公司性质</div>
                <div id="nature" style="width: 100%;height: 275px;"></div>
            </div>
            <div class="char-box c2">
                <div class="char-title no-icon">公司规模</div>
                <div id="scale" style="width: 100%;height: 275px;"></div>
            </div>
            <div class="char-box c3" style="height:435px;">
                <div class="char-title no-icon">按行业分布企业数</div>
                <div id="industry" 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','#ff9b19'];
        //公司性质
        var chartData1 = [];
        var chartName1 = [];
        @if($nature_data)
            @foreach($nature_data as $k=>$v)
            chartData1.push("{{$v}}");
            chartName1.push("{{$nature_names[$k] or ''}}");
            @endforeach
        @endif
        var myChart1 = echarts.init(document.getElementById('nature'));
        myChart1.setOption({
            color:colors,
            tooltip: {
                trigger: 'axis',
                axisPointer: { // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            grid: {
                top: '20',
                left: '20',
                right: '20',
                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: chartName1
            }],
            yAxis: [{
                type: 'value',
                name: '',
                axisLabel: {
                    formatter: '{value}'
                }
            }],
            series: [{
                type: 'bar',
                barMaxWidth: '40',
                data: chartData1
            }]
        });


        //公司规模
        var chartData2 = [];
        var chartName2 = [];
        @if($scale_data)
            @foreach($scale_data as $k=>$v)
            chartData2.push("{{$v}}");
            chartName2.push("{{$scale_names[$k] or ''}}");
            @endforeach
        @endif

        var myChart2 = echarts.init(document.getElementById('scale'));
        myChart2.setOption({
            color:colors,
            tooltip: {
                trigger: 'axis',
                axisPointer: { // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            grid: {
                top: '20',
                left: '20',
                right: '20',
                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($trade_data)
            @foreach($trade_data as $k=>$v)
            chartData3.push("{{$v}}");
            chartName3.push("{{$trade_names[$k] or ''}}");
            @endforeach
        @endif

        var myChart3 = echarts.init(document.getElementById('industry'));
        myChart3.setOption({
            color:'#ff5b82',
            tooltip: {
                trigger: 'axis',
                axisPointer: { // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            grid: {
                top: '20',
                left: '20',
                right: '20',
                bottom: '10',
                containLabel: true
            },
            xAxis: [{
                type: 'category',
                boundaryGap:true,
                axisTick:{
                    alignWithLabel:true
                },
                axisLabel:{
                    interval: 0, //坐标轴刻度标签的显示间隔 , 0 强制显示所有标签。
                    rotate:-90,  //刻度标签旋转的角度】
                    margin:10,
                    textStyle: {
                        color: '#333333',
                        fontSize:10
                    }
                },
                data:chartName3
            }],
            yAxis: [{
                type: 'value',
                name: '',
                axisLabel: {
                    formatter: '{value}'
                }
            }],
            series: [{
                type: 'bar',
                barMaxWidth: '40',
                data: chartData3
            }]
        });
    </script>
@endsection