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()); // 演示排名卡片 - 展示Ranking组件的使用方法,支持多种排名类型切换 $column->row(new DemoRanking()); }); }); } #[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()); }); }); } }