数据统计卡片

Dcat Admin中内置了多种常用数据统计卡片，可以非常方便的与后端API交互，下面逐一介绍用法。

基础卡片

基础卡片(Dcat\Admin\Widgets\Metrics\Card)是一种默认不显示图表的卡片，也是数据卡片中最简单的一种。

数据统计卡片 - 图1

简单示例

基础卡片的使用可参考内置的App\Admin\Metrics\Examples\TotalUsers类。

  1. <?php
  3. namespace App\Admin\Metrics\Examples;
  5. use Dcat\Admin\Widgets\Metrics\Card;
  6. use Illuminate\Contracts\Support\Renderable;
  7. use Illuminate\Http\Request;
  9. class TotalUsers extends Card
  10. {
  11.     /**
  12.      * 卡片底部内容.
  13.      *
  14.      * @var string|Renderable|\Closure
  15.      */
  16.     protected $footer;
  18.     // 保存自定义参数
  19.     protected $data = [];
  21.     // 构造方法参数必须设置默认值
  22.     public function __construct(array $data = []) 
  23.     {
  24.         $this->data = [];
  26.         parent::__construct();
  27.     }
  29.     protected function init()
  30.     {
  31.         parent::init();
  33.         // 设置标题
  34.         $this->title('Total Users');
  35.         // 设置下拉菜单
  36.         $this->dropdown([
  37.             '7' => 'Last 7 Days',
  38.             '28' => 'Last 28 Days',
  39.             '30' => 'Last Month',
  40.             '365' => 'Last Year',
  41.         ]);
  42.     }
  44.     /**
  45.      * 处理请求.
  46.      *
  47.      * @param Request $request
  48.      *
  49.      * @return void
  50.      */
  51.     public function handle(Request $request)
  52.     {
  53.         // 获取外部传递的自定义参数
  54.         $key1 = $request->get('key1');
  56.         switch ($request->get('option')) {
  57.             case '365':
  58.                 $this->content(mt_rand(600, 1500));
  59.                 $this->down(mt_rand(1, 30));
  60.                 break;
  61.             case '30':
  62.                 $this->content(mt_rand(170, 250));
  63.                 $this->up(mt_rand(12, 50));
  64.                 break;
  65.             case '28':
  66.                 $this->content(mt_rand(155, 200));
  67.                 $this->up(mt_rand(5, 50));
  68.                 break;
  69.             case '7':
  70.             default:
  71.                 $this->content(143);
  72.                 $this->up(15);
  73.         }
  74.     }
  76.     // 传递自定义参数到 handle 方法
  77.     public function parameters() : array
  78.     {
  79.         return $this->data;
  80.     }
  82.     /**
  83.      * @param int $percent
  84.      *
  85.      * @return $this
  86.      */
  87.     public function up($percent)
  88.     {
  89.         return $this->footer(
  90.             "<i class=\"feather icon-trending-up text-success\"></i> {$percent}% Increase"
  91.         );
  92.     }
  94.     /**
  95.      * @param int $percent
  96.      *
  97.      * @return $this
  98.      */
  99.     public function down($percent)
  100.     {
  101.         return $this->footer(
  102.             "<i class=\"feather icon-trending-down text-danger\"></i> {$percent}% Decrease"
  103.         );
  104.     }
  106.     /**
  107.      * 设置卡片底部内容
  108.      *
  109.      * @param string|Renderable|\Closure $footer
  110.      *
  111.      * @return $this
  112.      */
  113.     public function footer($footer)
  114.     {
  115.         $this->footer = $footer;
  117.         return $this;
  118.     }
  120.     /**
  121.      * 渲染卡片内容.
  122.      *
  123.      * @return string
  124.      */
  125.     public function renderContent()
  126.     {
  127.         $content = parent::renderContent();
  129.         return <<<HTML
  130. <div class="d-flex justify-content-between align-items-center mt-1" style="margin-bottom: 2px">
  131.     <h2 class="ml-1 font-large-1">{$content}</h2>
  132. </div>
  133. <div class="ml-1 mt-1 font-weight-bold text-80">
  134.     {$this->renderFooter()}
  135. </div>
  136. HTML;
  137.     }
  139.     /**
  140.      * @return string
  141.      */
  142.     public function renderFooter()
  143.     {
  144.         return $this->toString($this->footer);
  145.     }
  146. }

基础卡片方法

初始化 (init)

init方法会在卡片构造方法中被调用，可用于卡片初始化操作。

  1. class MyCard extend Card
  2. {
  3.     protected function init()
  4.     {
  5.         parent::init();
  7.         // 你的初始化操作
  8.     }
  9. }

设置标题 (title)

通过title方法可以在卡片的左上角设置一个标题

  1. class MyCard extend Card
  2. {
  3.     protected function init()
  4.     {
  5.         parent::init();
  7.         $this->title('活跃用户');
  8.     }
  9. }

设置下拉菜单 (dropdown)

通过dropdown方法可以在卡片右上角设置一个下拉菜单按钮，此功能需要结合handle方法一起使用才有效果。

  1. class MyCard extend Card
  2. {
  3.     protected function init()
  4.     {
  5.         $this->dropdown([
  6.             '7' => 'Last 7 Days',
  7.             '28' => 'Last 28 Days',
  8.             '30' => 'Last Month',
  9.             '365' => 'Last Year',
  10.         ]);
  11.     }
  12. }

设置副标题 (subTitle)

通过subTitle方法可以在卡片的又上角设置一个副标题。

{tip} 此方法与dropdown方法会有冲突，如果设置过下拉菜单按钮，就不需要设置副标题。

  1. class MyCard extend Card
  2. {
  3.     protected function init()
  4.     {
  5.         parent::init();
  7.         $this->subTitle('最近30天');
  8.     }
  9. }

设置头部内容 (header)

通过header方法可以设置卡片头部内容，此方法接受一个参数，可以是string、Closure，也可以是模板视图(Illuminate\Contracts\Support\Renderable)。

{tip} 通过此方法设置的内容与title在同一个div容器内。

  1. class MyCard extend Card
  2. {
  3.     protected function init()
  4.     {
  5.         parent::init();
  7.         $this->header(
  8.             <<<HTML
  9.             <div>头部内容</div>        
  10. HTML            
  11.         );
  13.         // 也可以传闭包
  14.         $this->header(function () {
  15.             return ...;
  16.         });
  18.         // 也可以传视图
  19.         $this->header(view('...'));
  20.     }
  21. }

设置主体内容 (content)

通过content方法可以设置卡片的内容主体，此方法接受一个参数，可以是string、Closure，也可以是模板视图(Illuminate\Contracts\Support\Renderable)。

  1. class MyCard extend Card
  2. {
  3.     protected function init()
  4.     {
  5.         parent::init();
  7.         $this->withContent('自定义内容');
  8.     }
  10.     /**
  11.      * 卡片内容
  12.      *
  13.      * @param string $content
  14.      *
  15.      * @return $this
  16.      */
  17.     public function withContent($content)
  18.     {
  19.         return $this->content(
  20.             <<<HTML
  21. <div class="d-flex flex-column flex-wrap text-center">
  22.     <h1 class="font-large-2 mt-2 mb-0">{$content}</h1>
  23.     <small>Tickets</small>
  24. </div>
  25. HTML
  26.         );
  27.     }
  28. }

设置高度 (height)

通过height方法可以设置卡片的最小高度，默认165。

  1. protected function init()
  2. {
  3.     parent::init();
  5.     $this->height(200);
  6. }

传递自定义参数 (parameters)

通过 parameters 方法可以把参数传递到 handle 方法

  1. // 传递自定义参数到 handle 方法
  2. public function parameters() : array
  3. {
  4.     return [
  5.         'key1' => 'value1',
  7.         ...
  8.     ];
  9. }

获取自定义参数

  1. public function handle(Request $request)
  2. {
  3.     // 获取自定义参数
  4.     $key1 = $request->get('key1');
  5. }

渲染内容 (renderContent)

为了保证内容的灵活和可扩展性，系统没有对卡片内容预设任何样式(即设置什么内容就只显示什么内容，没有预设布局或其他样式)， 通过renderContent方法即可以更改卡片默认的渲染方式。

以下的例子演示了renderContent方法的主要功能

  1. use Dcat\Admin\Support\Helper;
  3. class MyCard extend Card
  4. {
  5.     protected $footer;
  7.     protected function init()
  8.     {
  9.         parent::init();
  11.         // 设置卡片内容
  12.         $this->content(...);
  13.         // 设置卡片底部内容
  14.         $this->footer(...);
  15.     }
  17.     /**
  18.      * 增加此方法设置卡片底部内容
  19.      *
  20.      * @return $this
  21.      */
  22.     public function footer($footer)
  23.     {
  24.         $this->footer = $footer;
  26.         return $this;
  27.     }
  29.     /**
  30.      * 渲染底部内容
  31.      *
  32.      * @return $this
  33.      */
  34.     public function renderFooter()
  35.     {
  36.         return Helper::render($this->footer);
  37.     }
  39.     /**
  40.      * 渲染卡片内容
  41.      * 在这里即可加上卡片底部内容
  42.      *
  43.      * @return string
  44.      */
  45.     public function renderContent()
  46.     {
  47.         $content = parent::renderContent();
  48.         $footer = $this->renderFooter();
  50.         return <<<HTML
  51. <div class="card-content">
  52.     <div class="row">
  53.         {$content}
  54.     </div>
  55.     <div class="metric-footer">
  56.         {$footer}
  57.     </div>
  58. </div>
  59. HTML;      
  60.     }
  61. }

启用以及渲染图表

基本卡片默认是启用图表功能的，通过useChart方法可以启用图表功能，调用此方法之后会实例化一个图表类，然后保存在chart属性当中。

当图表启用之后，还需要在你的卡片内容中渲染图表，否则图表虽然被初始化了，但是仍无法显示。

  1. class MyCard extend Card
  2. {
  3.     protected function init()
  4.     {
  5.         parent::init();
  7.         // 启用图表
  8.         $this->useChart();
  9.     }
  11.     /**
  12.      * 渲染卡片内容
  13.      * 需要在这里加上渲染图表的代码
  14.      *
  15.      * @return string
  16.      */
  17.     public function renderContent()
  18.     {
  19.         // 通过 content 方法设置的内容
  20.         $content = parent::renderContent();
  22.         // 渲染图表
  23.         $chart = $this->renderChart();
  25.         return <<<HTML
  26.     <div class="my-chart">{$chart}</div>
  27.     {$content}    
  28. HTML           
  29.     }
  30. }

图表默认配置 (defaultChartOptions)

通过defaultChartOptions方法可以设置图表默认配置，此方法只有启用图表之后才有效。

{tip} 这里的图表配置同样支持设置可执行JS代码，详细用法请参考图表配置设置可执行JS代码。

  1. class MyCard extend Card
  2. {
  3.     protected function defaultChartOptions()
  4.     {
  5.         // 返回图表的配置
  6.         return [
  7.             ...
  8.         ];
  9.     }
  10. }

设置图表 (chart)

通过chart方法可以设置图表配置。

{tip} 这里的图表配置同样支持设置可执行JS代码，详细用法请参考图表配置设置可执行JS代码。

  1. class MyCard extend Card
  2. {
  3.     protected function init()
  4.     {
  5.         parent::init();
  7.         $this->chart([...]);
  8.     }
  9. }

设置图表配置 (chartOption)

通过chartOption方法可以设置图表配置，此方法一次只能设置一个参数，支持设置多维参数。

{tip} 这里的图表配置同样支持设置可执行JS代码，详细用法请参考图表配置设置可执行JS代码。

  1. class MyCard extend Card
  2. {
  3.     protected function init()
  4.     {
  5.         parent::init();
  7.         $this->chartOption('stroke.curve', 'smooth');
  8.         $this->chartOption(
  9.             'plotOptions.radialBar.dataLabels.total.formatter',
  10.             // 这个值最后段代码会作为JS代码执行
  11.             JavaScript::make("function () { return {$number}; }")
  12.         );
  13.     }
  14. }

设置图表高度 (chartHeight)

通过chartHeight方法可以设置图表的高度，这个方法非常重要，经常需要结合height方法一起使用，调整卡片的整体高度。

  1. class MyCard extend Card
  2. {
  3.     protected function init()
  4.     {
  5.         parent::init();
  7.         $this->chartHeight(150);
  8.     }
  9. }

设置图表上间距 (chartMarginTop)

通过chartMarginTop方法可以设置图表与上级元素的间距，此方法接受一个int类型参数，可以传负数。

  1. class MyCard extend Card
  2. {
  3.     protected function init()
  4.     {
  5.         parent::init();
  7.         $this->chartMarginTop(-10);
  8.     }
  9. }

设置图表下间距 (chartMarginBottom)

通过chartMarginBottom方法可以设置图表与下级元素的间距，此方法接受一个int类型参数，可以传负数。

  1. class MyCard extend Card
  2. {
  3.     protected function init()
  4.     {
  5.         parent::init();
  7.         $this->chartMarginBottom(10);
  8.     }
  9. }

设置图表标签 (chartLabels)

通过chartLabels方法可以设置图表的标签(labels)配置。

  1. class MyCard extend Card
  2. {
  3.     protected function init()
  4.     {
  5.         parent::init();
  7.         $this->chartLabels('标签1');
  9.         // 也可以传递数组
  10.         $this->chartLabels(['标签1']);
  11.     }
  12. }

设置图表颜色 (chartColors)

通过chartColors方法可以设置图表的颜色(colors)配置。

  1. class MyCard extend Card
  2. {
  3.     protected function init()
  4.     {
  5.         parent::init();
  7.         $this->chartColors('#4f41a1');
  9.         // 也可以传递数组
  10.         $this->chartColors(['#4f41a1']);
  11.     }
  12. }

渲染图表 (renderChart)

通过renderChart方法可以渲染图表。

  1. class MyCard extend Card
  2. {
  3.     protected function init()
  4.     {
  5.         parent::init();
  7.         // 启用图表
  8.         $this->useChart();
  9.     }
  11.     /**
  12.      * 渲染卡片内容
  13.      * 需要在这里加上渲染图表的代码
  14.      *
  15.      * @return string
  16.      */
  17.     public function renderContent()
  18.     {
  19.         // 通过 content 方法设置的内容
  20.         $content = parent::renderContent();
  22.         // 渲染图表
  23.         $chart = $this->renderChart();
  25.         return <<<HTML
  26.     <div class="my-chart">{$chart}</div>
  27.     {$content}    
  28. HTML           
  29.     }
  30. }

线性趋势图卡片 (Line)

线性趋势图卡片(Dcat\Admin\Widgets\Metrics\Line)是一个附带了折线\曲线图的数据统计卡片，继承自基础卡片Dcat\Admin\Widgets\Metrics\Card。

数据统计卡片 - 图2

示例

可参考内置的App\Admin\Metrics\Examples\NewUsers类。

  1. <?php
  3. namespace App\Admin\Metrics\Examples;
  5. use Dcat\Admin\Widgets\Metrics\Line;
  6. use Illuminate\Http\Request;
  8. class NewUsers extends Line
  9. {
  10.     /**
  11.      * @var string
  12.      */
  13.     protected $label = 'New Users';
  15.     /**
  16.      * 初始化卡片内容
  17.      *
  18.      * @return void
  19.      */
  20.     protected function init()
  21.     {
  22.         parent::init();
  24.         $this->title($this->label);
  25.         $this->dropdown([
  26.             '7' => 'Last 7 Days',
  27.             '28' => 'Last 28 Days',
  28.             '30' => 'Last Month',
  29.             '365' => 'Last Year',
  30.         ]);
  31.     }
  33.     /**
  34.      * 处理请求
  35.      *
  36.      * @param Request $request
  37.      *
  38.      * @return mixed|void
  39.      */
  40.     public function handle(Request $request)
  41.     {
  42.         $generator = function ($len, $min = 10, $max = 300) {
  43.             for ($i = 0; $i <= $len; $i++) {
  44.                 yield mt_rand($min, $max);
  45.             }
  46.         };
  48.         switch ($request->get('option')) {
  49.             case '365':
  50.                 // 卡片内容
  51.                 $this->withContent(mt_rand(1000, 5000).'k');
  52.                 // 图表数据
  53.                 $this->withChart(collect($generator(30))->toArray());
  54.                 // 直线
  55.                 break;
  56.             case '30':
  57.                 // 卡片内容
  58.                 $this->withContent(mt_rand(400, 1000).'k');
  59.                 // 图表数据
  60.                 $this->withChart(collect($generator(30))->toArray());
  61.                 // 直线
  62.                 break;
  63.             case '28':
  64.                 // 卡片内容
  65.                 $this->withContent(mt_rand(400, 1000).'k');
  66.                 // 图表数据
  67.                 $this->withChart(collect($generator(28))->toArray());
  68.                 // 直线
  69.                 break;
  70.             case '7':
  71.             default:
  72.                 // 卡片内容
  73.                 $this->withContent('89.2k');
  74.                 // 图表数据
  75.                 $this->withChart([28, 40, 36, 52, 38, 60, 55,]);
  76.         }
  77.     }
  79.     /**
  80.      * 设置图表数据.
  81.      *
  82.      * @param array $data
  83.      *
  84.      * @return $this
  85.      */
  86.     public function withChart(array $data)
  87.     {
  88.         return $this->chart([
  89.             'series' => [
  90.                 [
  91.                     'name' => $this->label,
  92.                     'data' => $data,
  93.                 ],
  94.             ],
  95.         ]);
  96.     }
  98.     /**
  99.      * 设置卡片内容.
  100.      *
  101.      * @param string $content
  102.      *
  103.      * @return $this
  104.      */
  105.     public function withContent($content)
  106.     {
  107.         return $this->content(
  108.             <<<HTML
  109. <div class="d-flex justify-content-between align-items-center mt-1" style="margin-bottom: 2px">
  110.     <h2 class="ml-1 font-large-1">{$content}</h2>
  111.     <span class="mb-0 mr-1 text-80">{$this->label}</span>
  112. </div>
  113. HTML
  114.         );
  115.     }
  116. }

方法

设置线条为直线 (chartStraight)

  1. use Dcat\Admin\Widgets\Metrics\Line;
  3. class MyCard extend Line
  4. {
  5.     protected function init()
  6.     {
  7.         parent::init();
  9.         $this->chartStraight();
  10.     }
  11. }

设置线条为曲线 (chartSmooth)

默认显示的是曲线。

  1. use Dcat\Admin\Widgets\Metrics\Line;
  3. class MyCard extend Line
  4. {
  5.     protected function init()
  6.     {
  7.         parent::init();
  9.         $this->chartSmooth();
  10.     }
  11. }

圆环图卡片 (Donut)

圆环图卡片(Dcat\Admin\Widgets\Metrics\Donut)是一个附带了圆环图的数据统计卡片，继承自基础卡片Dcat\Admin\Widgets\Metrics\Card。

数据统计卡片 - 图3

示例

可参考内置的App\Admin\Metrics\Examples\NewDevices类。

  1. <?php
  3. namespace App\Admin\Metrics\Examples;
  5. use Dcat\Admin\Admin;
  6. use Dcat\Admin\Widgets\Metrics\Donut;
  8. class NewDevices extends Donut
  9. {
  10.     protected $labels = ['Desktop', 'Mobile'];
  12.     /**
  13.      * 初始化卡片内容
  14.      */
  15.     protected function init()
  16.     {
  17.         parent::init();
  19.         $color = Admin::color();
  20.         $colors = [$color->primary(), $color->alpha('blue2', 0.5)];
  22.         $this->title('New Devices');
  23.         $this->subTitle('Last 30 days');
  24.         $this->chartLabels($this->labels);
  25.         // 设置图表颜色
  26.         $this->chartColors($colors);
  27.     }
  29.     /**
  30.      * 渲染模板
  31.      *
  32.      * @return string
  33.      */
  34.     public function render()
  35.     {
  36.         $this->fill();
  38.         return parent::render();
  39.     }
  41.     /**
  42.      * 写入数据.
  43.      *
  44.      * @return void
  45.      */
  46.     public function fill()
  47.     {
  48.         $this->withContent(44.9, 28.6);
  50.         // 图表数据
  51.         $this->withChart([44.9, 28.6]);
  52.     }
  54.     /**
  55.      * 设置图表数据.
  56.      *
  57.      * @param array $data
  58.      *
  59.      * @return $this
  60.      */
  61.     public function withChart(array $data)
  62.     {
  63.         return $this->chart([
  64.             'series' => $data
  65.         ]);
  66.     }
  68.     /**
  69.      * 设置卡片头部内容.
  70.      *
  71.      * @param mixed $desktop
  72.      * @param mixed $mobile
  73.      *
  74.      * @return $this
  75.      */
  76.     protected function withContent($desktop, $mobile)
  77.     {
  78.         $blue = Admin::color()->alpha('blue2', 0.5);
  80.         $style = 'margin-bottom: 8px';
  81.         $labelWidth = 120;
  83.         return $this->content(
  84.             <<<HTML
  85. <div class="d-flex pl-1 pr-1 pt-1" style="{$style}">
  86.     <div style="width: {$labelWidth}px">
  87.         <i class="fa fa-circle text-primary"></i> {$this->labels[0]}
  88.     </div>
  89.     <div>{$desktop}</div>
  90. </div>
  91. <div class="d-flex pl-1 pr-1" style="{$style}">
  92.     <div style="width: {$labelWidth}px">
  93.         <i class="fa fa-circle" style="color: $blue"></i> {$this->labels[1]}
  94.     </div>
  95.     <div>{$mobile}</div>
  96. </div>
  97. HTML
  98.         );
  99.     }
  100. }

方法

设置内容宽度 (contentWidth)

通过contentWidth方法可以设置文本内容以及图表内容的宽度，默认为[6, 6]。

{tip} 这里的宽度是一个1-12之间的一个值。

  1. use Dcat\Admin\Widgets\Metrics\Line;
  3. class MyCard extend Line
  4. {
  5.     protected function init()
  6.     {
  7.         parent::init();
  9.         $this->contentWidth(4, 8);
  10.     }
  11. }

柱状图卡片 (Bar)

柱状图卡片(Dcat\Admin\Widgets\Metrics\Bar)是一个附带了柱状图的数据统计卡片，继承自基础卡片Dcat\Admin\Widgets\Metrics\Card。

数据统计卡片 - 图4

示例

可参考内置的App\Admin\Metrics\Examples\NewDevices类。

  1. <?php
  3. namespace App\Admin\Metrics\Examples;
  5. use Dcat\Admin\Admin;
  6. use Dcat\Admin\Widgets\Metrics\Bar;
  7. use Illuminate\Http\Request;
  9. class Sessions extends Bar
  10. {
  11.     /**
  12.      * 初始化卡片内容
  13.      */
  14.     public function init()
  15.     {
  16.         parent::init();
  18.         $color = Admin::color();
  20.         $dark35 = $color->dark35();
  22.         // 卡片内容宽度
  23.         $this->contentWidth(5, 7);
  24.         // 标题
  25.         $this->title('Avg Sessions');
  26.         // 设置下拉选项
  27.         $this->dropdown([
  28.             '7' => 'Last 7 Days',
  29.             '28' => 'Last 28 Days',
  30.             '30' => 'Last Month',
  31.             '365' => 'Last Year',
  32.         ]);
  33.         // 设置图表颜色
  34.         $this->chartColors([
  35.             $dark35,
  36.             $dark35,
  37.             $color->primary(),
  38.             $dark35,
  39.             $dark35,
  40.             $dark35
  41.         ]);
  42.     }
  44.     /**
  45.      * 处理请求
  46.      *
  47.      * @param Request $request
  48.      *
  49.      * @return mixed|void
  50.      */
  51.     public function handle(Request $request)
  52.     {
  53.         switch ($request->get('option')) {
  54.             case '7':
  55.             default:
  56.                 // 卡片内容
  57.                 $this->withContent('2.7k', '+5.2%');
  59.                 // 图表数据
  60.                 $this->withChart([
  61.                     [
  62.                         'name' => 'Sessions',
  63.                         'data' => [75, 125, 225, 175, 125, 75, 25],
  64.                     ],
  65.                 ]);
  66.         }
  67.     }
  69.     /**
  70.      * 设置图表数据.
  71.      *
  72.      * @param array $data
  73.      *
  74.      * @return $this
  75.      */
  76.     public function withChart(array $data)
  77.     {
  78.         return $this->chart([
  79.             'series' => $data,
  80.         ]);
  81.     }
  83.     /**
  84.      * 设置卡片内容.
  85.      *
  86.      * @param string $title
  87.      * @param string $value
  88.      * @param string $style
  89.      *
  90.      * @return $this
  91.      */
  92.     public function withContent($title, $value, $style = 'success')
  93.     {
  94.         // 根据选项显示
  95.         $label = strtolower(
  96.             $this->dropdown[request()->option] ?? 'last 7 days'
  97.         );
  99.         $minHeight = '183px';
  101.         return $this->content(
  102.             <<<HTML
  103. <div class="d-flex p-1 flex-column justify-content-between" style="padding-top: 0;width: 100%;height: 100%;min-height: {$minHeight}">
  104.     <div class="text-left">
  105.         <h1 class="font-large-2 mt-2 mb-0">{$title}</h1>
  106.         <h5 class="font-medium-2" style="margin-top: 10px;">
  107.             <span class="text-{$style}">{$value} </span>
  108.             <span>vs {$label}</span>
  109.         </h5>
  110.     </div>
  112.     <a href="#" class="btn btn-primary shadow waves-effect waves-light">View Details <i class="feather icon-chevrons-right"></i></a>
  113. </div>
  114. HTML
  115.         );
  116.     }
  117. }

多环形图卡片 (Round)

柱状图卡片(Dcat\Admin\Widgets\Metrics\Round)是一个附带了多环形图的数据统计卡片，继承自基础卡片Dcat\Admin\Widgets\Metrics\Card。

数据统计卡片 - 图5

示例

具体示例与上述卡片的示例大同小异，具体可参考内置的App\Admin\Metrics\Examples\ProductOrders类，这里不再贴出。

更多内置卡片

系统还内置了Dcat\Admin\Widgets\Metrics\RadialBar、Dcat\Admin\Widgets\Metrics\SingleRound等卡片，由于用法与上述卡片雷同，这里不再重复贴出代码。

点击我查看所有内置卡片在线演示

自定义图表卡片

如需自定义卡片，可参考上述内置图表的代码。