kknongchang_2506/app/Module/Admin/AdminControllers/MetricsController.php

<?php

namespace App\Module\Admin\AdminControllers;


use App\Http\Controllers\Controller;
use Dcat\Admin\Http\Controllers\Dashboard;
use Dcat\Admin\Layout\Column;
use Dcat\Admin\Layout\Content;
use Dcat\Admin\Layout\Row;
use Spatie\RouteAttributes\Attributes\Get;
use UCore\DcatAdmin\AdminController;
use UCore\DcatAdmin\Metrics\Examples\Link;
use UCore\DcatAdmin\Metrics\Examples\NewDevices;
use UCore\DcatAdmin\Metrics\Examples\Number;
use UCore\DcatAdmin\Metrics\Examples\Number1;
use UCore\DcatAdmin\Metrics\Examples\NumberS;
use UCore\DcatAdmin\Metrics\Examples\NumberS2;
use UCore\DcatAdmin\Metrics\Examples\ProductOrders;
use UCore\DcatAdmin\Metrics\Examples\Sessions;
use UCore\DcatAdmin\Metrics\Examples\Tickets;
use UCore\DcatAdmin\Metrics\Examples\TotalUsers;
use UCore\DcatAdmin\Metrics\Examples\TreeMap;
use UCore\DcatAdmin\Metrics\User\NewUsers;

/**
 * 图表演示
 */
class MetricsController extends AdminController
{
    #[Get('admin/metrics')]
    public function index(Content $content)
    {
        return $content
            ->header('图表演示')
            ->description('图表演示...')
            ->body(function (Row $row) {
                $row->column(6, function (Column $column) {
                    // 仪表板标题
                    $column->row(Dashboard::title());

                    // 环形图 + 4个数字统计 - 展示环形进度图和底部统计数据
                    $column->row(new Tickets());

//                    $column->row(new TreeMap());// TreeMap是坏的

                    // 多数字统计卡片（横向排列）- 显示多个数值指标，如数额、交易额等
                    $column->row(new NumberS2());

                    // 折线图卡片 - 展示新用户趋势，支持时间范围选择
                    $column->row( new \UCore\DcatAdmin\Metrics\Examples\NewUsers());

                });

                $row->column(6, function (Column $column) {
                    $column->row(function (Row $row) {

                        // 链接卡片 - 跳转到演示页面
                        $row->column(12,new Link('HomeDemo',admin_url('/demo_full')));

                        // 新用户折线图 - 显示用户增长趋势，带时间筛选
                        $row->column(6, new NewUsers());

                        // 设备类型圆环图 - 展示桌面端和移动端用户比例
                        $row->column(6, new NewDevices());

                        // 总用户数统计卡片 - 显示主数字和变化趋势
                        $row->column(6, new TotalUsers());

                        // 多行数字统计卡片（纵向排列）- 显示多个数值指标
                        $row->column('6',NumberS::make());

                        // 简单数字卡片 - 仅显示标题和一个数字
                        $row->column(6,Number1::make());

                        // 数字卡片 - 显示标题和数字，字体较大
                        $row->column(6,Number::make());

                    });

                    // 平均在线统计 - 大号数值 + 趋势 + 柱状图
                    $column->row(new Sessions());

                    // 订单比例图 - 左侧三个数值，右侧三环比例图，展示各状态订单分布
                    $column->row(new ProductOrders());
                });
            });
    }

     #[Get('admin/metrics2')]
    public function metrics2(Content $content)
    {
        return $content
            ->header('图表演示')
            ->description('图表演示...')
            ->body(function (Row $row) {
                $row->column(6, function (Column $column) {

                    // 多线折线图 - 展示多条数据线的趋势对比，支持时间范围选择
                    // 适用于对比不同指标或不同时期的数据变化趋势
                    $column->row( new \UCore\DcatAdmin\Metrics\Examples\NewUsersDou());

                });


            });
    }
}