hebei-chengben-car/modules/car/views/wave/wave8.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;
?>

<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 class="form-control" type="month" name="date" value="<?php echo get_date(TIMESTAMP,'Y-m');?>" >
                        </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'=>'row','unitStyle'=>'min-width:120px;']);?>
                        </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" >导出</button>
                            <button type="button" class="btn btn-light carbtn" >口径描述</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">
                <img src="https://files.axshare.com/gsc/CT62PZ/01/5e/29/015e29c2a2ba434aa5392ca357b17a94/images/2-%E6%B3%A2%E5%8A%A8%E5%88%86%E6%9E%90/u27.png?pageId=e3eaa4f3-65f7-4430-aa6d-8e3a8758ea2f">
            </div>
        </div>
    </div>
</div>


<script src="<?php echo $assetsUrl;?>/libs/apexcharts/apexcharts.min.js"></script>
<script>
var chart = null;
function doQuery()
{
        //月度
        var options1 = {
            chart: {
                height: 250,
                type: "line",
                zoom: {
                    enabled: !1
                },
                toolbar: {
                    show: !1
                }
            },
            colors: ["#556ee6", "#34c38f"],
            dataLabels: {
                enabled: !1
            },
            stroke: {
                width: [2, 2],
                curve: "straight"
            },
            series: [{
                name: "2023",
                data: [26, 24, 32, 36, 33, 31, 33, 26, 24, 32, 36, 33]
            }, {
                name: "2022",
                data: [14, 11, 16, 12, 17, 13, 12, 14, 11, 16, 12, 17]
            }],
            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: "单位（公里）"
                },
            }

        }
        //累计
        var options2 = {
            chart: {
                height: 250,
                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: [23, 11, 22, 27, 13, 22, 37, 21, 44, 22, 30]
            },{
                name: "去年同期",
                type: "column",
                data: [23, 11, 22, 27, 13, 22, 37, 21, 44, 22, 30]
            }, {
                name: "本年占收比",
                type: "line",
                data: [44, 55, 41, 67, 22, 43, 21, 41, 56, 27, 43]
            }],
            fill: {
                opacity: [0.8, 0.8, 0.8],
                gradient: {
                    inverseColors: !1,
                    shade: "light",
                    type: "vertical",
                    opacityFrom: .85,
                    opacityTo: .55,
                    stops: [0, 100, 100, 100]
                }
            },
            labels: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
            markers: {
                size: 3
            },
            yaxis: {
                axisBorder: {
                    show: !1
                },
                axisTicks: {
                    show: !1
                },
                labels: {
                  show: !1,
                },
            },
            tooltip: {
                shared: !0,
                intersect: !1,
                y: [{
                    title: {
                        formatter: function(e) {
                            return e + '（万元）'
                        }
                    },

                }, {
                    title: {
                        formatter: function(e) {
                            return e+ '（万元）'
                        }
                    }
                }, {
                    title: {
                        formatter: function(e) {
                            return e+ '（%）'
                        }
                    }
                }]
            },
            grid: {
                borderColor: "#f1f1f1"
            }
        };
        if(chart!=null)
        {
            chart.updateOptions(options2);
        }
        else
        {
            chart = new ApexCharts(document.querySelector("#chartbox"), options1);
            chart.render();
        }

}
doQuery();
</script>