jucai/public/themes/default/views/statistics/app/demand/trade.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 demand_warp resume_processing">
        @include('statistics.module.section.left_menu')
        <div class="cq_rt index_right">
            <div class="inside_timer">
                @include('statistics.module.section.timer')
            </div>
            <div class="char-box">
                <div class="char-title no-icon">按行业分组的需求人数<input type="button" class="export_excel" value="导出为excel"/></div>
                <div id="trend" style="width: 100%;height: 500px;"></div>
            </div>
            <div class="detail-info">
                <div class="table_title">详细数据</div>
                <table border="0" cellpadding="0" cellspacing="0">
                    <tr>
                        <th colspan="3" text-aligin="center">{{$date_aprams['start_year']}}年{{$date_aprams['start_month']}}月到{{$date_aprams['end_year']}}年{{$date_aprams['end_month']}}月数据</th>
                    </tr>
                    <tr>
                        <th style="width: 200px;">行业</th>
                        <th style="width: 500px;">需求人数</th>
                        <th style="width: 200px;">所占比重</th>
                    </tr>
                    @foreach($table_data as $k=>$v)
                        <tr>
                            <td>{{$v['name']}}</td>
                            <td>{{$v['job_amount']}}</td>
                            <td>{{$v['rate'].'%'}}</td>
                        </tr>
                    @endforeach
                    <tr>
                        <td>合计</td>
                        <td>{{$total_amount}}</td>
                        <td>{{$total_amount>0?sprintf("%.4f", (int)$total_amount/(int)$total_amount)*100:0.00}}%</td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="clear"></div>
    </div>
@endsection


@section('script')
    <script type="text/javascript">
        var chartName1 = [];
        var chartData1 = [];
        @foreach($table_data as $k=>$v)
        chartName1.push("{{$v['name']}}");
        chartData1.push("{{$v['job_amount']}}");
        @endforeach
        var colors1 = ['#2da1f9'];
        var myChart3 = echarts.init(document.getElementById('trend'));
        myChart3.setOption({
            color:colors1,
            tooltip: {
                trigger: 'axis',
                axisPointer: { // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            grid: {
                top: '45',
                left: '10',
                right: '25',
                bottom: '18',
                containLabel: true
            },
            xAxis: [{
                boundaryGap:true,
                axisTick:{
                    alignWithLabel:true
                },
                axisLabel:{
                    interval: 0, //坐标轴刻度标签的显示间隔 , 0 强制显示所有标签。
                    rotate:-45,  //刻度标签旋转的角度
                    margin:15,
                    textStyle: {
                        color: '#333333',
                        fontSize:10
                    },
                    /*formatter: function(params, index) {
                        var splitNum=[5, 5, 5, 8]
                        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: [{
            }],
            series: [{
                name:'需求人数',
                type: 'bar',
                barMaxWidth: '40',
                barGap: 0,
                data: chartData1
            }]
        });

        $('.export_excel').click(function(){
            window.location.href="{{route('statistics.demand.trade',['isExcel'=>1])}}";
        });
    </script>
@endsection