hebei-chengben-car/modules/car/views/wave/wave.php

<?php
use app\assets\CoreAsset;
use app\assets\PluginsAsset;
$asset = CoreAsset::register($this);
$assetsUrl = $asset->baseUrl;
$pluginsAsset = PluginsAsset::register($this);
$pluginsUrl = $pluginsAsset->baseUrl;
use yii\widgets\ActiveForm;
?>
<style>
    table tbody {
        display:block;
    }
    table thead, tbody tr {
        display:table;
        width:100%;
        table-layout:fixed;
        border:none;
    }

    table thead {
        width: calc( 100% - 20px )//core code
    }</style>
<?php $this->beginContent('@app/modules/admin/views/layouts/_datatable_start.php'); ?><?php $this->endContent(); ?>
<script src="<?php echo $assetsUrl;?>/libs/tableExport.jquery.plugin/libs/js-xlsx/xlsx.core.min.js"></script>
<script src="<?php echo $assetsUrl;?>/libs/tableExport.jquery.plugin/libs/FileSaver/FileSaver.min.js"></script>
<script src="<?php echo $assetsUrl;?>/libs/tableExport.jquery.plugin/tableExport.min.js"></script>
<div class="row ">
    <div class="col-12">
        <div class="card">
            <div class="card-body" style="padding:0 1.25rem;">
                <!-- 搜索表单 -->
                <div class="searchbox" style="margin-bottom: 0px;padding: 10px 0px 10px;border-bottom:none;"  >
                   <?php $form = ActiveForm::begin(['options' => ['id'=>'searchform','class' => 'row gy-2 gx-3 align-items-center'], 'enableClientValidation' => false]); ?>
                        <div class="col-sm-auto"><label class="col-form-label">年份</label></div>
                        <div class="col-sm-auto" >
                            <input type="text" name="year" id="year" class="form-control" value="<?php echo get_date(TIMESTAMP,'Y');?>">
                        </div>
                        <div class="col-sm-auto"><label class="col-form-label">月份</label></div>
                        <div class="col-sm-auto">
                            <select class="form-select" data-dselect-clearable="true" name="end_month" id="end_month">
                                <option value="">月份</option>
                                 <?php for($i=1;$i<=12;$i++){ ?>
                                    <option value="<?php echo $i;?>"  <?php if(date('m')==$i){?> selected <?php }?>><?php echo $i;?>月</option>
                                <?php }?>
                            </select>
                        </div>
                        <div class="col-sm-auto"><label class="col-form-label">地市</label></div>
                        <div class="col-sm-auto">
                            <?php echo  \app\common\widget\LinkmenuWidget::widget(['key_id'=>1,'name'=>'city','level'=>1,'emptyTxts'=>['地市'],'value'=>0,'selectClass'=>'form-select original ','blockClass'=>'','unitStyle'=>'min-width:120px;display:inline-block;margin-right:10px;']);?>
                        </div>

                        <div class="col-sm-auto">
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="datatype"  value="1"  checked>
                                <label class="form-check-label">月度</label>
                            </div>
                        </div>
                        <div class="col-sm-auto">
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="datatype"  value="2" >
                                <label class="form-check-label">累计</label>
                            </div>
                        </div>


                        <div class="col-sm-auto">
                            <button type="button" class="btn btn-light carbtn" onclick="doQuery()">查询</button>
                            <button type="button" class="btn btn-light carbtn" onclick="doExport()">导出</button>
                            <button type="button" class="btn btn-light carbtn" data-bs-toggle="modal" data-bs-target="#koujing" onclick="doKoujing()">口径描述</button>
                        </div>
                    <?php ActiveForm::end(); ?>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="card">
        <div class="card-body">
            <div class="row">
                <div id="chartbox" class="apex-charts" dir="ltr"></div>
            </div>
        </div>
    </div>
</div>


<div class="row">
    <div class="card">
        <div class="card-body">
            <div class="row" id="tablebox">

            </div>
        </div>
    </div>
</div>
<script src="<?php echo $assetsUrl;?>/libs/apexcharts/apexcharts.min.js"></script>
<script src="<?php echo $assetsUrl;?>/libs/datepicker/datepicker.js"></script>
<script src="<?php echo $assetsUrl;?>/libs/datepicker/i18n/datepicker.zh-CN.js"></script>
<link  href="<?php echo $assetsUrl;?>/libs/datepicker/datepicker.css" rel="stylesheet">
<script>
$(function(){
    //年份选择
    $('#year').datepicker({
        format: 'yyyy',
        autoclose: true,
        yearSuffix: '年'
    })
    //类型变化
    $("input[name='datatype']").change(function(){
        doQuery();
    })
    /*//年份变化
    $('#year').change(function(){
        doQuery();
    })
    //城市变化
    $('#city_1').change(function(){
        doQuery();
    })*/
})
</script>

<?php $this->beginContent('@app/modules/admin/views/layouts/_datatable_end.php'); ?><?php $this->endContent(); ?>
<script>
var chart = null;
var data_url = '<?php echo Yii::$app->controller->createRealUrl(['car/wave/index','type'=>$type]);?>';
function doQuery()
{
   var datatype = $("input[name='datatype']:checked").val();
   var year = $('#year').val();
   var city = $('#city').val();
   var end_month = $('#end_month').val();
   layer.msg('请求中，请稍候...', { icon: 16 ,shade: 0.5,time:100000 });
   var data = {year:year,datatype:datatype,city:city,end_month:end_month};
    $.get(data_url,data,function(result) {
        layer.closeAll();
        if(datatype==1)
        {
            var options = {
                chart: {
                    height: 200,
                    type: "line",
                    zoom: {
                        enabled: !1
                    },
                    toolbar: {
                        show: !1
                    }
                },
                colors: ["#556ee6", "#34c38f"],
                dataLabels: {
                    enabled: !1
                },
                stroke: {
                    width: [2, 2],
                    curve: "straight"
                },
                series: [{
                    name: result.year,
                    data: result.line1
                }, {
                    name: result.lastyear,
                    data: result.line2
                }],
                grid: {
                    row: {
                        colors: ["transparent", "transparent"],
                        opacity: .2
                    },
                    borderColor: "#f1f1f1"
                },
                markers: {
                    style: "inverted",
                    size: 3
                },
                xaxis: {
                    categories: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
                },
                yaxis: {
                    title: {
                        text: "单位（"+result.unit+"）"
                    },
                }
            }

        }
        if(datatype==2)
        {

            var options = {
                chart: {
                    height: 200,
                    type: "line",
                    stacked: !1,
                    toolbar: {
                        show: !1
                    }
                },
                stroke: {
                    width: [2,2,2],
                    curve: "straight"
                },
                plotOptions: {
                    bar: {
                        columnWidth: "40%"
                    }
                },
                colors:["#34c38f", "#cf5a5a", "#50a5f1"],
                series: [{
                    name: "本年累计",
                    type: "column",
                    data: result.line1
                },{
                    name: "去年同期",
                    type: "column",
                    data: result.line2
                }, {
                    name: "同比增幅",
                    type: "line",
                    data: result.line3
                }],
                fill: {
                    opacity: [0.8, 0.8, 0.8],
                    gradient: {
                        inverseColors: !1,
                        shade: "light",
                        type: "vertical",
                        opacityFrom: .85,
                        opacityTo: .55
                    }
                },
                labels: result.cityOptions,
                markers: {
                    size: 3
                },
                /*xaxis: {
                    type: "datetime"
                },
                yaxis: {
                    title: {
                        text: "Points"
                    }
                },*/
                yaxis: {
                    axisBorder: {
                        show: !1
                    },
                    axisTicks: {
                        show: !1
                    },
                    labels: {
                        show: !1,
                    },
                },
                tooltip: {
                    shared: !0,
                    intersect: !1,
                    y: [{
                        title: {
                            formatter: function(e) {
                                return e+ '（'+result.unit+'）'
                            }
                        },

                    }, {
                        title: {
                            formatter: function(e) {
                                return e+ '（'+result.unit+'）'
                            }
                        }
                    }, {
                        title: {
                            formatter: function(e) {
                                return e+ '（%）'
                            }
                        }
                    }]
                },
                grid: {
                    borderColor: "#f1f1f1"
                }
            };

        }
        $('#tablebox').html(result.table);

        $(document).on("click", ".treegrid-expanded", function(){
            var id = $(this).data('id');
            $(".treegrid-parent-"+id).hide();
            $(this).removeClass('treegrid-expanded').addClass('treegrid-collapsed');
            $(this).find(".treegrid-expander-expanded").removeClass('treegrid-expander-expanded').addClass('treegrid-expander-collapsed');
            //二级信息控制
            $(".treegrid-parent-"+id).each(function(){
                var tempId = $(this).data('id');
                $(".treegrid-parent-"+tempId).hide();
                $(this).removeClass('treegrid-expanded').addClass('treegrid-collapsed');
            })
        })

        $(document).on("click", ".treegrid-collapsed", function(){
            var id = $(this).data('id');
            $(".treegrid-parent-"+id).show();
            $(this).removeClass('treegrid-collapsed').addClass('treegrid-expanded');
            $(this).find(".treegrid-expander-collapsed").removeClass('treegrid-expander-collapsed').addClass('treegrid-expander-expanded');
        })
        $("body").css("overflow-y","hidden");

        if(chart!=null)
        {
            chart.updateOptions(options);
        }
        else
        {
            chart = new ApexCharts(document.querySelector("#chartbox"), options);
            chart.render();
        }


    })
}
doQuery();



function doKoujing()
{
    $('#koujing_content').html('<?php echo $koujing;?>');
}
</script>