@extends('admin/layout')
@section('header_extend')
    <style>
        .btn-info {
            padding: 0 10px !important;
            line-height: 25px !important;
            border: none !important;
            margin: 0 !important;
        }

        .float-e-margins .btn {

        }

        .singles-boxs .lis-boxs {
            display: block;
            width: 100%;
            background: #fff;
            border-radius: 6px;
            overflow: hidden;
        }

        .singles-boxs .titles-boxs {
            display: block;
            width: 100%;
            background: #2a94e0;
            padding: 0 9%;
        }

        .singles-boxs .titles-boxs img {
            margin-right: 8px;
        }

        .singles-boxs .titles-a {
            display: block;
            width: 100%;
            position: relative;
        }

        .singles-boxs .times {
            display: block;
            line-height: 22px;
            background: #fff;
            padding: 0 8px;
            border-radius: 4px;
            position: absolute;
            right: 0;
            top: 10px;
        }
    </style>
@endsection
@section('content')
    <style>
        .singles-boxs {
            font-family: 微软雅黑;
        }

        .singles-boxs * {
            font-family: 微软雅黑;
        }

        .singles-boxs .lis-boxs {
            display: block;
            width: 100%;
            background: #fff;
            border-radius: 6px;
            overflow: hidden;
            margin-bottom: 25px;
        }

        .singles-boxs .titles-boxs {
            display: block;
            width: 100%;
            background: #2a94e0;
            padding: 0 9%;
        }

        .singles-boxs .titles-boxs img {
            margin-right: 6px;
        }

        .singles-boxs .titles-a {
            display: block;
            width: 100%;
            position: relative;
            color: #fff;
            font-size: 14px;
            line-height: 24px;
            padding: 10px 0;
            white-space: nowrap;
        }

        .singles-boxs .lis-boxs.active {
            background: none;
        }

        .singles-boxs .lis-boxs.active .titles-boxs {
            padding: 15px 8%;
            border-radius: 6px;
        }

        .singles-boxs .lis-boxs .titles-boxs .span {
            font-size: 20px;
            color: #fff;
            line-height: 24px;
            position: absolute;
            right: 18px;
            top: 10px;
        }

        .singles-boxs .lis-boxs.active .titles-boxs + .titles-boxs {
            margin-top: 5px;
        }

        .singles-boxs .boxs {
            padding: 0px 0px 12px;
            overflow: hidden;
        }

        .singles-boxs .times {
            display: block;
            line-height: 22px;
            background: #fff;
            padding: 0 8px;
            border-radius: 4px;
            position: absolute;
            right: 0;
            top: 10px;
            color: #2a94e0;
            font-size: 14px;
        }

        .singles-boxs .times.ons {
            font-size: 12px;
            padding: 0 4px;
        }

        .singles-boxs .numbers {
            font-size: 20px;
            line-height: 34px;
            text-align: center;
            color: #2a93e0;
            margin-top: 8px;
        }

        .singles-boxs .numbers .n-span {
            display: inline-block;
            font-size: 12px;
            color: #2a93e0;
            line-height: 16px;
            vertical-align: top;
            margin-top: 11px;
            margin-left: -7px;
        }

        .singles-boxs .lists {
            display: block;
            width: 100%;
            padding: 0 15%;
            overflow: hidden;
        }

        .singles-boxs .lists.active {
            margin-top: 8px;
            padding: 3px 15%;
        }

        .singles-boxs .lists.active .lists-lefts {
            color: #2a93e0;
        }

        .singles-boxs .lists.active .lists-rights {
            color: #2a93e0;
            background: none;
        }

        .singles-boxs .lists-lefts {
            float: left;
            font-size: 14px;
            color: #646464;
            line-height: 28px;
        }

        .singles-boxs .lists-rights {
            float: right;
            font-size: 14px;
            color: #f21919;
            line-height: 28px;
            padding-right: 15px;
            background: url(/img/kzt-top-img.png) no-repeat right 8px;
        }

        .singles-boxs .lists-rights.ons {
            color: #00b91a;
            background: url(/img/kzt-down-img.png) no-repeat right 8px;
        }

        .singles-boxs .lists-rights.onss {
            background: none;
        }

        @media (max-width: 1680px) {
            .singles-boxs .col-sm-2 {
                width: 25%;
            }
        }

        @media (max-width: 1024px) {
            .singles-boxs .col-sm-2 {
                width: 33.3333%;
            }
        }

        @media (max-width: 768px) {
            .singles-boxs .col-sm-2 {
                width: 50%;
                float: left;
            }
        }

        @media (max-width: 640px) {
            .singles-boxs .col-sm-2 {
                width: 100%;
            }
        }
    </style>
    <body class="gray-bg">
    @php
        $last1M=date('n',strtotime('first day of -1 month'));
        $last2M=date('n',strtotime('first day of -2 month'));
        $last3M=date('n',strtotime('first day of -3 month'));
    @endphp
    <div class="wrapper wrapper-content">
        <div class="singles-boxs">
            <div class="row">
                <div class="col-sm-3">
                    <div class="lis-boxs">
                        <div class="titles-boxs">
                            <div class="titles-a">
                                <img src="/img/kzt-img-01.png" alt="">
                                竞价项目个数
                                <button class="times" style="border:none" onclick="units.details(0,'竞价项目个数')">
                                    总数 : {{$totalPpc}}
                                </button>
                            </div>
                        </div>
                        <div class="col-sm-16">

                            <div class="ibox float-e-margins">
                                <div class="ibox-title" style="border-style: none">
                                    <h5>三个月内竞价项目个数</h5>
                                </div>
                                <div class="ibox-content">
                                    <div id="ppcDiff" style="width: 100%;height: 300px;"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-3">
                    <div class="lis-boxs">
                        <div class="titles-boxs">
                            <div class="titles-a">
                                <img src="/img/kzt-img-02.png" alt="">
                                已投放个数
                                <button class="times" style="border:none" onclick="units.details(1,'已投放个数')">
                                        总数 :{{$totalRedPpc}}
                                    </button>
                            </div>
                        </div>
                        <div class="col-sm-16">
                            <div class="ibox float-e-margins">
                                <div class="ibox-title" style="border-style: none">
                                    <h5>三个月内已投放个数</h5>
                                </div>
                                <div class="ibox-content">
                                    <div id="redPpcDiff" style="width: 100%;height: 300px;"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-3">
                    <div class="lis-boxs">
                        <div class="titles-boxs">
                            <div class="titles-a">
                                <img src="/img/kzt-img-02.png" alt="">
                                待投放个数
                                <button class="times" style="border:none" onclick="units.details(2,'待投放个数')">
                                        总数 :{{$totalGrayPpc}}
                                    </button>
                            </div>
                        </div>
                        <div class="col-sm-16">
                            <div class="ibox float-e-margins">
                                <div class="ibox-title" style="border-style: none">
                                    <h5>三个月内待投放个数</h5>
                                </div>
                                <div class="ibox-content">
                                    <div id="grayPpcDiff" style="width: 100%;height: 300px;"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-3">
                    <div class="lis-boxs">
                        <div class="titles-boxs">
                            <div class="titles-a">
                                <img src="/img/kzt-img-02.png" alt="">
                                已暂停个数
                                <button class="times" style="border:none" onclick="units.details(3,'已暂停个数')">
                                        总数 :{{$totalLineRedPpc}}
                                    </button>
                            </div>
                        </div>
                        <div class="col-sm-16">
                            <div class="ibox float-e-margins">
                                <div class="ibox-title" style="border-style: none">
                                    <h5>三个月内已经暂停个数</h5>
                                </div>
                                <div class="ibox-content">
                                    <div id="lineRedPpcDiff" style="width: 100%;height: 300px;"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>


                <div class="col-sm-3">
                    <div class="lis-boxs">
                        <div class="titles-boxs">
                            <div class="titles-a">
                                <img src="/img/kzt-img-02.png" alt="">
                                已续费个数
                                <button class="times" style="border:none" onclick="units.details(4,'已续费个数')">
                                    总数 :{{$totalRenewalNum}}
                                </button>
                            </div>
                        </div>
                        <div class="col-sm-16">
                            <div class="ibox float-e-margins">
                                <div class="ibox-title" style="border-style: none">
                                    <h5>三个月内已续费个数</h5>
                                </div>
                                <div class="ibox-content">
                                    <div id="renewalNumDiff" style="width: 100%;height: 300px;"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>


                <div class="col-sm-3">
                    <div class="lis-boxs">
                        <div class="titles-boxs">
                            <div class="titles-a">
                                <img src="/img/kzt-img-02.png" alt="">
                                续费率
                                <span class="times">
                                        {{$totalRenewalRate}}
                                    </span>
                            </div>
                        </div>
                        <div class="col-sm-16">
                            <div class="ibox float-e-margins">
                                <div class="ibox-title" style="border-style: none">
                                    <h5>三个月内续费率</h5>
                                </div>
                                <div class="ibox-content">
                                    <div id="renewalRateDiff" style="width: 100%;height: 300px;"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>


                <div class="col-sm-3">
                    <div class="lis-boxs">
                        <div class="titles-boxs">
                            <div class="titles-a">
                                <img src="/img/kzt-img-02.png" alt="">
                                竞价金额
                                <span class="times">
                                        总数 :{{$totalTotalFee}}
                                    </span>
                            </div>
                        </div>
                        <div class="col-sm-16">
                            <div class="ibox float-e-margins">
                                <div class="ibox-title" style="border-style: none">
                                    <h5>三个月内总费用</h5>
                                </div>
                                <div class="ibox-content">
                                    <div id="totalFeeDiff" style="width: 100%;height: 300px;"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-sm-3">
                    <div class="lis-boxs">
                        <div class="titles-boxs">
                            <div class="titles-a">
                                <img src="/img/kzt-img-02.png" alt="">
                                续费金额
                                <span class="times">
                                        总数 : {{$totalAvgScore}}
                                    </span>
                            </div>
                        </div>
                        <div class="col-sm-16">
                            <div class="ibox float-e-margins">
                                <div class="ibox-title" style="border-style: none">
                                    <h5>三个月内续费金额</h5>
                                </div>
                                <div class="ibox-content">
                                    <div id="avgScoreDiff" style="width: 100%;height: 300px;"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div class="row">
            <div class="col-sm-6">
                <div class="ibox float-e-margins">
                    <div class="ibox-title" style="border-style: none">
                        <h5>项目类型饼图</h5>
                    </div>
                    <div class="ibox-content">
                        <div id="siteStatusPie" style="width: 100%;height: 300px;"></div>
                    </div>
                </div>
            </div>

            <div class="col-sm-6">

                <div class="ibox float-e-margins">
                    <div class="ibox-title" style="border-style: none">
                        <h5>项目类型趋势图</h5>
                    </div>
                    <div class="ibox-content">
                        <div id="siteStatus" style="width: 100%;height: 300px;"></div>
                    </div>
                </div>
            </div>

        </div>
    </div>
    </body>
@endsection

@section('footer')

    {{--echarts--}}
    <script src="{{asset('js/plugins/echarts/echarts.min.js')}}"></script>
    <script src="{{asset('js/plugins/wonderland/wonderland.js?v=1.3')}}"></script>

    <script>
      /*  var units = {
            details: function (type) {
                // console.log(11)
                layer.open({
                    type: 2,
                    content: ['/admin/bid/site-list/' + type],
                    area: ['100%', '80%'],
                    title: '详情'
                });
            },
        };*/

        var units = {
            details: function (type, title) {
                tips.page('/admin/bid/site-list/'+type, title);
            },
        };


        //项目情况饼图
        var siteStatusPieChart = echarts.init(document.getElementById('siteStatusPie'),'wonderland');
        var siteStatusPieData = JSON.parse('{!! json_encode($ppcPie['hybrid']) !!}');
        var siteStatusPieName = JSON.parse('{!! json_encode($ppcPie['xAxis']) !!}');

        var siteStatusPieOption = {
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: siteStatusPieName
            },
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: siteStatusPieData,
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };

        siteStatusPieChart.setOption(siteStatusPieOption);


        // 项目情况折线图
        var siteStatusLineChart = echarts.init(document.getElementById('siteStatus'),'wonderland');
        var siteStatusLineXAxis = JSON.parse('{!! json_encode($feeLine['xAxis']) !!}');
        var siteStatusLineYAix = JSON.parse('{!! json_encode($feeLine['yAxis']) !!}');
        var siteStatusLineOption = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    crossStyle: {
                        color: '#999'
                    }
                }
            },
            /*            toolbox: {
                            feature: {
                                dataView: {show: true, readOnly: false},
                                magicType: {show: true, type: ['bar', 'pie']},
                                restore: {show: true},
                                saveAsImage: {show: true}
                            }
                        },*/
            legend: {
                data: ['充值金额']
            },
            xAxis: [
                {
                    type: 'category',
                    data: siteStatusLineXAxis,
                    axisPointer: {
                        type: 'shadow'
                    },
                    splitLine: {
                        show: false
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: '',
                    min: 0,
                    axisLabel: {
                        formatter: '{value}'
                    },
                    axisLine: {
                        show: false //隐藏Y轴
                    }
                }
            ],
            series: [
                {
                    name: '充值金额',
                    type: 'line',
                    data: siteStatusLineYAix
                }
            ]
        };
        siteStatusLineChart.setOption(siteStatusLineOption);


        // 项目情况折线图
        var ppcDiffLineChart = echarts.init(document.getElementById('ppcDiff'),'wonderland');
        var ppcDiffLineXAxis = JSON.parse('{!! json_encode($ppcDiff['xAxis']) !!}');
        var ppcDiffLineYAix = JSON.parse('{!! json_encode($ppcDiff['yAxis']) !!}');
        var ppcDiffLineOption = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    crossStyle: {
                        color: '#999'
                    }
                }
            },
            /*            toolbox: {
                            feature: {
                                dataView: {show: true, readOnly: false},
                                magicType: {show: true, type: ['bar', 'pie']},
                                restore: {show: true},
                                saveAsImage: {show: true}
                            }
                        },*/
            legend: {
                data: ['项目数']
            },
            xAxis: [
                {
                    type: 'category',
                    data: ppcDiffLineXAxis,
                    axisPointer: {
                        type: 'shadow'
                    },
                    splitLine: {
                        show: false
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: '',
                    min: 0,
                    axisLabel: {
                        formatter: '{value}'
                    },
                    axisLine: {
                        show: false //隐藏Y轴
                    }
                }
            ],
            series: [
                {
                    name: '项目数',
                    type: 'line',
                    data: ppcDiffLineYAix
                }
            ]
        };
        ppcDiffLineChart.setOption(ppcDiffLineOption);


        // 项目情况折线图
        var redPpcDiffLineChart = echarts.init(document.getElementById('redPpcDiff'),'wonderland');
        var redPpcDiffLineXAxis = JSON.parse('{!! json_encode($redPpcDiff['xAxis']) !!}');
        var redPpcDiffLineYAix = JSON.parse('{!! json_encode($redPpcDiff['yAxis']) !!}');
        var redPpcDiffLineOption = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    crossStyle: {
                        color: '#999'
                    }
                }
            },
            /*            toolbox: {
                            feature: {
                                dataView: {show: true, readOnly: false},
                                magicType: {show: true, type: ['bar', 'pie']},
                                restore: {show: true},
                                saveAsImage: {show: true}
                            }
                        },*/
            legend: {
                data: ['投放数']
            },
            xAxis: [
                {
                    type: 'category',
                    data: redPpcDiffLineXAxis,
                    axisPointer: {
                        type: 'shadow'
                    },
                    splitLine: {
                        show: false
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: '',
                    min: 0,
                    axisLabel: {
                        formatter: '{value}'
                    },
                    axisLine: {
                        show: false //隐藏Y轴
                    }
                }
            ],
            series: [
                {
                    name: '投放数',
                    type: 'line',
                    data: redPpcDiffLineYAix
                }
            ]
        };
        redPpcDiffLineChart.setOption(redPpcDiffLineOption);


        // 项目情况折线图
        var grayPpcDiffLineChart = echarts.init(document.getElementById('grayPpcDiff'),'wonderland');
        var grayPpcDiffLineXAxis = JSON.parse('{!! json_encode($grayPpcDiff['xAxis']) !!}');
        var grayPpcDiffLineYAix = JSON.parse('{!! json_encode($grayPpcDiff['yAxis']) !!}');
        var grayPpcDiffLineOption = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    crossStyle: {
                        color: '#999'
                    }
                }
            },
            /*            toolbox: {
                            feature: {
                                dataView: {show: true, readOnly: false},
                                magicType: {show: true, type: ['bar', 'pie']},
                                restore: {show: true},
                                saveAsImage: {show: true}
                            }
                        },*/
            legend: {
                data: ['待投放数']
            },
            xAxis: [
                {
                    type: 'category',
                    data: grayPpcDiffLineXAxis,
                    axisPointer: {
                        type: 'shadow'
                    },
                    splitLine: {
                        show: false
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: '',
                    min: 0,
                    axisLabel: {
                        formatter: '{value}'
                    },
                    axisLine: {
                        show: false //隐藏Y轴
                    }
                }
            ],
            series: [
                {
                    name: '待投放数',
                    type: 'line',
                    data: grayPpcDiffLineYAix
                }
            ]
        };
        grayPpcDiffLineChart.setOption(grayPpcDiffLineOption);


        // 项目情况折线图
        var lineRedPpcDiffLineChart = echarts.init(document.getElementById('lineRedPpcDiff'),'wonderland');
        var lineRedPpcDiffLineXAxis = JSON.parse('{!! json_encode($lineRedPpcDiff['xAxis']) !!}');
        var lineRedPpcDiffLineYAix = JSON.parse('{!! json_encode($lineRedPpcDiff['yAxis']) !!}');
        var lineRedPpcDiffLineOption = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    crossStyle: {
                        color: '#999'
                    }
                }
            },
            /*            toolbox: {
                            feature: {
                                dataView: {show: true, readOnly: false},
                                magicType: {show: true, type: ['bar', 'pie']},
                                restore: {show: true},
                                saveAsImage: {show: true}
                            }
                        },*/
            legend: {
                data: ['项目暂停数']
            },
            xAxis: [
                {
                    type: 'category',
                    data: lineRedPpcDiffLineXAxis,
                    axisPointer: {
                        type: 'shadow'
                    },
                    splitLine: {
                        show: false
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: '',
                    min: 0,
                    axisLabel: {
                        formatter: '{value}'
                    },
                    axisLine: {
                        show: false //隐藏Y轴
                    }
                }
            ],
            series: [
                {
                    name: '项目暂停数',
                    type: 'line',
                    data: lineRedPpcDiffLineYAix
                }
            ]
        };
        lineRedPpcDiffLineChart.setOption(lineRedPpcDiffLineOption);


        // 项目情况折线图
        var renewalNumDiffLineChart = echarts.init(document.getElementById('renewalNumDiff'),'wonderland');
        var renewalNumDiffLineXAxis = JSON.parse('{!! json_encode($renewalNumDiff['xAxis']) !!}');
        var renewalNumDiffLineYAix = JSON.parse('{!! json_encode($renewalNumDiff['yAxis']) !!}');
        var renewalNumDiffLineOption = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    crossStyle: {
                        color: '#999'
                    }
                }
            },
            /*          toolbox: {
                          feature: {
                              dataView: {show: true, readOnly: false},
                              magicType: {show: true, type: ['bar', 'pie']},
                              restore: {show: true},
                              saveAsImage: {show: true}
                          }
                      },*/
            legend: {
                data: ['续费项目个数']
            },
            xAxis: [
                {
                    type: 'category',
                    data: renewalNumDiffLineXAxis,
                    axisPointer: {
                        type: 'shadow'
                    },
                    splitLine: {
                        show: false
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: '',
                    min: 0,
                    axisLabel: {
                        formatter: '{value}'
                    },
                    axisLine: {
                        show: false //隐藏Y轴
                    }
                }
            ],
            series: [
                {
                    name: '续费项目个数',
                    type: 'line',
                    data: renewalNumDiffLineYAix
                }
            ]
        };
        renewalNumDiffLineChart.setOption(renewalNumDiffLineOption);

        // 项目情况折线图
        var renewalRateDiffLineChart = echarts.init(document.getElementById('renewalRateDiff'),'wonderland');
        var renewalRateDiffLineXAxis = JSON.parse('{!! json_encode($renewalRateDiff['xAxis']) !!}');
        var renewalRateDiffLineYAix = JSON.parse('{!! json_encode($renewalRateDiff['yAxis']) !!}');
        var renewalRateDiffLineOption = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    crossStyle: {
                        color: '#999'
                    }
                }
            },
            /*            toolbox: {
                            feature: {
                                dataView: {show: true, readOnly: false},
                                magicType: {show: true, type: ['bar', 'pie']},
                                restore: {show: true},
                                saveAsImage: {show: true}
                            }
                        },*/
            legend: {
                data: ['续费率']
            },
            xAxis: [
                {
                    type: 'category',
                    data: renewalRateDiffLineXAxis,
                    axisPointer: {
                        type: 'shadow'
                    },
                    splitLine: {
                        show: false
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: '',
                    min: 0,
                    axisLabel: {
                        formatter: '{value}'
                    },
                    axisLine: {
                        show: false //隐藏Y轴
                    }
                }
            ],
            series: [
                {
                    name: '续费率',
                    type: 'line',
                    data: renewalRateDiffLineYAix
                }
            ]
        };
        renewalRateDiffLineChart.setOption(renewalRateDiffLineOption);


        // 项目情况折线图
        var totalFeeDiffLineChart = echarts.init(document.getElementById('totalFeeDiff'),'wonderland');
        var totalFeeDiffLineXAxis = JSON.parse('{!! json_encode($totalFeeDiff['xAxis']) !!}');
        var totalFeeDiffLineYAix = JSON.parse('{!! json_encode($totalFeeDiff['yAxis']) !!}');
        var totalFeeDiffLineOption = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    crossStyle: {
                        color: '#999'
                    }
                }
            },
            /*            toolbox: {
                            feature: {
                                dataView: {show: true, readOnly: false},
                                magicType: {show: true, type: ['bar', 'pie']},
                                restore: {show: true},
                                saveAsImage: {show: true}
                            }
                        },*/
            legend: {
                data: ['费用']
            },
            xAxis: [
                {
                    type: 'category',
                    data: totalFeeDiffLineXAxis,
                    axisPointer: {
                        type: 'shadow'
                    },
                    splitLine: {
                        show: false
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: '',
                    min: 0,
                    axisLabel: {
                        formatter: '{value}'
                    },
                    axisLine: {
                        show: false //隐藏Y轴
                    }
                }
            ],
            series: [
                {
                    name: '费用',
                    type: 'line',
                    data: totalFeeDiffLineYAix
                }
            ]
        };
        totalFeeDiffLineChart.setOption(totalFeeDiffLineOption);

        // 项目情况折线图
        var avgScoreDiffLineChart = echarts.init(document.getElementById('avgScoreDiff'),'wonderland');
        var avgScoreDiffLineXAxis = JSON.parse('{!! json_encode($avgScoreDiff['xAxis']) !!}');
        var avgScoreDiffLineYAix = JSON.parse('{!! json_encode($avgScoreDiff['yAxis']) !!}');
        var avgScoreDiffLineOption = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    crossStyle: {
                        color: '#999'
                    }
                }
            },
            /*          toolbox: {
                          feature: {
                              dataView: {show: true, readOnly: false},
                              magicType: {show: true, type: ['bar', 'pie']},
                              restore: {show: true},
                              saveAsImage: {show: true}
                          }
                      },*/
            legend: {
                data: ['续费金额']
            },
            xAxis: [
                {
                    type: 'category',
                    data: avgScoreDiffLineXAxis,
                    axisPointer: {
                        type: 'shadow'
                    },
                    splitLine: {
                        show: false
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: '',
                    min: 0,
                    axisLabel: {
                        formatter: '{value}'
                    },
                    axisLine: {
                        show: false //隐藏Y轴
                    }
                }
            ],
            series: [
                {
                    name: '续费金额',
                    type: 'line',
                    data: avgScoreDiffLineYAix
                }
            ]
        };
        avgScoreDiffLineChart.setOption(avgScoreDiffLineOption);

    </script>
@endsection