数据统计卡片
<h1>数据统计卡片</h1>
<p><code>Dcat Admin</code>中内置了多种常用数据统计卡片，可以非常方便的与后端API交互，下面逐一介绍用法。</p>
<h2>基础卡片</h2>
<p>基础卡片(<code>Dcat\Admin\Widgets\Metrics\Card</code>)是一种默认不显示图表的卡片，也是数据卡片中最简单的一种。</p>
<p><a href="{{public}}/assets/img/screenshots/total-users.png" target="_blank">
<img src="{{public}}/assets/img/screenshots/total-users.png" style="box-shadow:0 1px 6px 1px rgba(0, 0, 0, 0.12)" width="100%" >
</a></p>
<h3>简单示例</h3>
<p>基础卡片的使用可参考内置的<code>App\Admin\Metrics\Examples\TotalUsers</code>类。</p>
<pre><code class="language-php">&lt;?php
namespace App\Admin\Metrics\Examples;
use Dcat\Admin\Widgets\Metrics\Card;
use Illuminate\Contracts\Support\Renderable;
use Illuminate\Http\Request;
class TotalUsers extends Card
{
/**
* 卡片底部内容.
*
* @var string|Renderable|\Closure
*/
protected $footer;
// 保存自定义参数
protected $data = [];
// 构造方法参数必须设置默认值
public function __construct(array $data = [])
{
$this-&gt;data = [];
parent::__construct();
}
protected function init()
{
parent::init();
// 设置标题
$this-&gt;title('Total Users');
// 设置下拉菜单
$this-&gt;dropdown([
'7' =&gt; 'Last 7 Days',
'28' =&gt; 'Last 28 Days',
'30' =&gt; 'Last Month',
'365' =&gt; 'Last Year',
]);
}
/**
* 处理请求.
*
* @param Request $request
*
* @return void
*/
public function handle(Request $request)
{
// 获取外部传递的自定义参数
$key1 = $request-&gt;get('key1');
switch ($request-&gt;get('option')) {
case '365':
$this-&gt;content(mt_rand(600, 1500));
$this-&gt;down(mt_rand(1, 30));
break;
case '30':
$this-&gt;content(mt_rand(170, 250));
$this-&gt;up(mt_rand(12, 50));
break;
case '28':
$this-&gt;content(mt_rand(155, 200));
$this-&gt;up(mt_rand(5, 50));
break;
case '7':
default:
$this-&gt;content(143);
$this-&gt;up(15);
}
}
// 传递自定义参数到 handle 方法
public function parameters() : array
{
return $this-&gt;data;
}
/**
* @param int $percent
*
* @return $this
*/
public function up($percent)
{
return $this-&gt;footer(
&quot;&lt;i class=\&quot;feather icon-trending-up text-success\&quot;&gt;&lt;/i&gt; {$percent}% Increase&quot;
);
}
/**
* @param int $percent
*
* @return $this
*/
public function down($percent)
{
return $this-&gt;footer(
&quot;&lt;i class=\&quot;feather icon-trending-down text-danger\&quot;&gt;&lt;/i&gt; {$percent}% Decrease&quot;
);
}
/**
* 设置卡片底部内容
*
* @param string|Renderable|\Closure $footer
*
* @return $this
*/
public function footer($footer)
{
$this-&gt;footer = $footer;
return $this;
}
/**
* 渲染卡片内容.
*
* @return string
*/
public function renderContent()
{
$content = parent::renderContent();
return &lt;&lt;&lt;HTML
&lt;div class=&quot;d-flex justify-content-between align-items-center mt-1&quot; style=&quot;margin-bottom: 2px&quot;&gt;
&lt;h2 class=&quot;ml-1 font-large-1&quot;&gt;{$content}&lt;/h2&gt;
&lt;/div&gt;
&lt;div class=&quot;ml-1 mt-1 font-weight-bold text-80&quot;&gt;
{$this-&gt;renderFooter()}
&lt;/div&gt;
HTML;
}
/**
* @return string
*/
public function renderFooter()
{
return $this-&gt;toString($this-&gt;footer);
}
}</code></pre>
<h3>基础卡片方法</h3>
<h4>初始化 (init)</h4>
<p><code>init</code>方法会在卡片构造方法中被调用，可用于卡片初始化操作。</p>
<pre><code class="language-php">class MyCard extend Card
{
protected function init()
{
parent::init();
// 你的初始化操作
}
}</code></pre>
<h4>设置标题 (title)</h4>
<p>通过<code>title</code>方法可以在卡片的左上角设置一个标题</p>
<pre><code class="language-php">class MyCard extend Card
{
protected function init()
{
parent::init();
$this-&gt;title('活跃用户');
}
}</code></pre>
<h4>设置下拉菜单 (dropdown)</h4>
<p>通过<code>dropdown</code>方法可以在卡片右上角设置一个下拉菜单按钮，此功能需要结合<code>handle</code>方法一起使用才有效果。</p>
<pre><code class="language-php">class MyCard extend Card
{
protected function init()
{
$this-&gt;dropdown([
'7' =&gt; 'Last 7 Days',
'28' =&gt; 'Last 28 Days',
'30' =&gt; 'Last Month',
'365' =&gt; 'Last Year',
]);
}
}</code></pre>
<h4>设置副标题 (subTitle)</h4>
<p>通过<code>subTitle</code>方法可以在卡片的又上角设置一个副标题。</p>
<p>> {tip} 此方法与<code>dropdown</code>方法会有冲突，如果设置过下拉菜单按钮，就不需要设置副标题。</p>
<pre><code class="language-php">class MyCard extend Card
{
protected function init()
{
parent::init();
$this-&gt;subTitle('最近30天');
}
}</code></pre>
<h4>设置头部内容 (header)</h4>
<p>通过<code>header</code>方法可以设置卡片头部内容，此方法接受一个参数，可以是<code>string</code>、<code>Closure</code>，也可以是模板视图(<code>Illuminate\Contracts\Support\Renderable</code>)。</p>
<p>> {tip} 通过此方法设置的内容与<code>title</code>在同一个<code>div</code>容器内。</p>
<pre><code class="language-php">class MyCard extend Card
{
protected function init()
{
parent::init();
$this-&gt;header(
&lt;&lt;&lt;HTML
&lt;div&gt;头部内容&lt;/div&gt;
HTML
);
// 也可以传闭包
$this-&gt;header(function () {
return ...;
});
// 也可以传视图
$this-&gt;header(view('...'));
}
}</code></pre>
<h4>设置主体内容 (content)</h4>
<p>通过<code>content</code>方法可以设置卡片的内容主体，此方法接受一个参数，可以是<code>string</code>、<code>Closure</code>，也可以是模板视图(<code>Illuminate\Contracts\Support\Renderable</code>)。</p>
<pre><code class="language-php">class MyCard extend Card
{
protected function init()
{
parent::init();
$this-&gt;withContent('自定义内容');
}
/**
* 卡片内容
*
* @param string $content
*
* @return $this
*/
public function withContent($content)
{
return $this-&gt;content(
&lt;&lt;&lt;HTML
&lt;div class=&quot;d-flex flex-column flex-wrap text-center&quot;&gt;
&lt;h1 class=&quot;font-large-2 mt-2 mb-0&quot;&gt;{$content}&lt;/h1&gt;
&lt;small&gt;Tickets&lt;/small&gt;
&lt;/div&gt;
HTML
);
}
}</code></pre>
<h4>设置高度 (height)</h4>
<p>通过<code>height</code>方法可以设置卡片的最小高度，默认<code>165</code>。</p>
<pre><code class="language-php">protected function init()
{
parent::init();
$this-&gt;height(200);
}</code></pre>
<h4>传递自定义参数 (parameters)</h4>
<p>通过 <code>parameters</code> 方法可以把参数传递到 <code>handle</code> 方法</p>
<pre><code class="language-php">// 传递自定义参数到 handle 方法
public function parameters() : array
{
return [
'key1' =&gt; 'value1',
...
];
}</code></pre>
<p>获取自定义参数</p>
<pre><code class="language-php">public function handle(Request $request)
{
// 获取自定义参数
$key1 = $request-&gt;get('key1');
}</code></pre>
<h4>渲染内容 (renderContent)</h4>
<p>为了保证内容的灵活和可扩展性，系统没有对卡片内容预设任何样式(即设置什么内容就只显示什么内容，没有预设布局或其他样式)，
通过<code>renderContent</code>方法即可以更改卡片默认的渲染方式。</p>
<p>以下的例子演示了<code>renderContent</code>方法的主要功能</p>
<pre><code class="language-php">use Dcat\Admin\Support\Helper;
class MyCard extend Card
{
protected $footer;
protected function init()
{
parent::init();
// 设置卡片内容
$this-&gt;content(...);
// 设置卡片底部内容
$this-&gt;footer(...);
}
/**
* 增加此方法设置卡片底部内容
*
* @return $this
*/
public function footer($footer)
{
$this-&gt;footer = $footer;
return $this;
}
/**
* 渲染底部内容
*
* @return $this
*/
public function renderFooter()
{
return Helper::render($this-&gt;footer);
}
/**
* 渲染卡片内容
* 在这里即可加上卡片底部内容
*
* @return string
*/
public function renderContent()
{
$content = parent::renderContent();
$footer = $this-&gt;renderFooter();
return &lt;&lt;&lt;HTML
&lt;div class=&quot;card-content&quot;&gt;
&lt;div class=&quot;row&quot;&gt;
{$content}
&lt;/div&gt;
&lt;div class=&quot;metric-footer&quot;&gt;
{$footer}
&lt;/div&gt;
&lt;/div&gt;
HTML;
}
}</code></pre>
<h4>启用以及渲染图表</h4>
<p>基本卡片默认是启用图表功能的，通过<code>useChart</code>方法可以启用图表功能，调用此方法之后会实例化一个图表类，然后保存在<code>chart</code>属性当中。</p>
<p>当图表启用之后，还需要在你的卡片内容中渲染图表，否则图表虽然被初始化了，但是仍无法显示。</p>
<pre><code class="language-php">class MyCard extend Card
{
protected function init()
{
parent::init();
// 启用图表
$this-&gt;useChart();
}
/**
* 渲染卡片内容
* 需要在这里加上渲染图表的代码
*
* @return string
*/
public function renderContent()
{
// 通过 content 方法设置的内容
$content = parent::renderContent();
// 渲染图表
$chart = $this-&gt;renderChart();
return &lt;&lt;&lt;HTML
&lt;div class=&quot;my-chart&quot;&gt;{$chart}&lt;/div&gt;
{$content}
HTML
}
}</code></pre>
<h4>图表默认配置 (defaultChartOptions)</h4>
<p>通过<code>defaultChartOptions</code>方法可以设置图表默认配置，此方法只有启用图表之后才有效。</p>
<p>> {tip} 这里的图表配置同样支持设置可执行<code>JS</code>代码，详细用法请参考<a href="widgets-charts.md#js">图表配置设置可执行JS代码</a>。</p>
<pre><code class="language-php">class MyCard extend Card
{
protected function defaultChartOptions()
{
// 返回图表的配置
return [
...
];
}
}</code></pre>
<h4>设置图表 (chart)</h4>
<p>通过<code>chart</code>方法可以设置图表配置。</p>
<p>> {tip} 这里的图表配置同样支持设置可执行<code>JS</code>代码，详细用法请参考<a href="widgets-charts.md#js">图表配置设置可执行JS代码</a>。</p>
<pre><code class="language-php">class MyCard extend Card
{
protected function init()
{
parent::init();
$this-&gt;chart([...]);
}
}</code></pre>
<h4>设置图表配置 (chartOption)</h4>
<p>通过<code>chartOption</code>方法可以设置图表配置，此方法一次只能设置一个参数，支持设置多维参数。</p>
<p>> {tip} 这里的图表配置同样支持设置可执行<code>JS</code>代码，详细用法请参考<a href="widgets-charts.md#js">图表配置设置可执行JS代码</a>。</p>
<pre><code class="language-php">class MyCard extend Card
{
protected function init()
{
parent::init();
$this-&gt;chartOption('stroke.curve', 'smooth');
$this-&gt;chartOption(
'plotOptions.radialBar.dataLabels.total.formatter',
// 这个值最后段代码会作为JS代码执行
JavaScript::make(&quot;function () { return {$number}; }&quot;)
);
}
}</code></pre>
<h4>设置图表高度 (chartHeight)</h4>
<p>通过<code>chartHeight</code>方法可以设置图表的高度，这个方法非常重要，经常需要结合<code>height</code>方法一起使用，调整卡片的整体高度。</p>
<pre><code class="language-php">class MyCard extend Card
{
protected function init()
{
parent::init();
$this-&gt;chartHeight(150);
}
}</code></pre>
<h4>设置图表上间距 (chartMarginTop)</h4>
<p>通过<code>chartMarginTop</code>方法可以设置图表与上级元素的间距，此方法接受一个<code>int</code>类型参数，可以传<code>负数</code>。</p>
<pre><code class="language-php">class MyCard extend Card
{
protected function init()
{
parent::init();
$this-&gt;chartMarginTop(-10);
}
}</code></pre>
<h4>设置图表下间距 (chartMarginBottom)</h4>
<p>通过<code>chartMarginBottom</code>方法可以设置图表与下级元素的间距，此方法接受一个<code>int</code>类型参数，可以传<code>负数</code>。</p>
<pre><code class="language-php">class MyCard extend Card
{
protected function init()
{
parent::init();
$this-&gt;chartMarginBottom(10);
}
}</code></pre>
<h4>设置图表标签 (chartLabels)</h4>
<p>通过<code>chartLabels</code>方法可以设置图表的标签(<code>labels</code>)配置。</p>
<pre><code class="language-php">class MyCard extend Card
{
protected function init()
{
parent::init();
$this-&gt;chartLabels('标签1');
// 也可以传递数组
$this-&gt;chartLabels(['标签1']);
}
}</code></pre>
<h4>设置图表颜色 (chartColors)</h4>
<p>通过<code>chartColors</code>方法可以设置图表的颜色(<code>colors</code>)配置。</p>
<pre><code class="language-php">class MyCard extend Card
{
protected function init()
{
parent::init();
$this-&gt;chartColors('#4f41a1');
// 也可以传递数组
$this-&gt;chartColors(['#4f41a1']);
}
}</code></pre>
<h4>渲染图表 (renderChart)</h4>
<p>通过<code>renderChart</code>方法可以渲染图表。</p>
<pre><code class="language-php">class MyCard extend Card
{
protected function init()
{
parent::init();
// 启用图表
$this-&gt;useChart();
}
/**
* 渲染卡片内容
* 需要在这里加上渲染图表的代码
*
* @return string
*/
public function renderContent()
{
// 通过 content 方法设置的内容
$content = parent::renderContent();
// 渲染图表
$chart = $this-&gt;renderChart();
return &lt;&lt;&lt;HTML
&lt;div class=&quot;my-chart&quot;&gt;{$chart}&lt;/div&gt;
{$content}
HTML
}
}</code></pre>
<h2>线性趋势图卡片 (Line)</h2>
<p>线性趋势图卡片(<code>Dcat\Admin\Widgets\Metrics\Line</code>)是一个附带了折线\曲线图的数据统计卡片，继承自基础卡片<code>Dcat\Admin\Widgets\Metrics\Card</code>。</p>
<p><a href="{{public}}/assets/img/screenshots/card-line.png" target="_blank">
<img src="{{public}}/assets/img/screenshots/card-line.png" style="box-shadow:0 1px 6px 1px rgba(0, 0, 0, 0.12)" width="100%" >
</a></p>
<h3>示例</h3>
<p>可参考内置的<code>App\Admin\Metrics\Examples\NewUsers</code>类。</p>
<pre><code class="language-php">&lt;?php
namespace App\Admin\Metrics\Examples;
use Dcat\Admin\Widgets\Metrics\Line;
use Illuminate\Http\Request;
class NewUsers extends Line
{
/**
* @var string
*/
protected $label = 'New Users';
/**
* 初始化卡片内容
*
* @return void
*/
protected function init()
{
parent::init();
$this-&gt;title($this-&gt;label);
$this-&gt;dropdown([
'7' =&gt; 'Last 7 Days',
'28' =&gt; 'Last 28 Days',
'30' =&gt; 'Last Month',
'365' =&gt; 'Last Year',
]);
}
/**
* 处理请求
*
* @param Request $request
*
* @return mixed|void
*/
public function handle(Request $request)
{
$generator = function ($len, $min = 10, $max = 300) {
for ($i = 0; $i &lt;= $len; $i++) {
yield mt_rand($min, $max);
}
};
switch ($request-&gt;get('option')) {
case '365':
// 卡片内容
$this-&gt;withContent(mt_rand(1000, 5000).'k');
// 图表数据
$this-&gt;withChart(collect($generator(30))-&gt;toArray());
// 直线
break;
case '30':
// 卡片内容
$this-&gt;withContent(mt_rand(400, 1000).'k');
// 图表数据
$this-&gt;withChart(collect($generator(30))-&gt;toArray());
// 直线
break;
case '28':
// 卡片内容
$this-&gt;withContent(mt_rand(400, 1000).'k');
// 图表数据
$this-&gt;withChart(collect($generator(28))-&gt;toArray());
// 直线
break;
case '7':
default:
// 卡片内容
$this-&gt;withContent('89.2k');
// 图表数据
$this-&gt;withChart([28, 40, 36, 52, 38, 60, 55,]);
}
}
/**
* 设置图表数据.
*
* @param array $data
*
* @return $this
*/
public function withChart(array $data)
{
return $this-&gt;chart([
'series' =&gt; [
[
'name' =&gt; $this-&gt;label,
'data' =&gt; $data,
],
],
]);
}
/**
* 设置卡片内容.
*
* @param string $content
*
* @return $this
*/
public function withContent($content)
{
return $this-&gt;content(
&lt;&lt;&lt;HTML
&lt;div class=&quot;d-flex justify-content-between align-items-center mt-1&quot; style=&quot;margin-bottom: 2px&quot;&gt;
&lt;h2 class=&quot;ml-1 font-large-1&quot;&gt;{$content}&lt;/h2&gt;
&lt;span class=&quot;mb-0 mr-1 text-80&quot;&gt;{$this-&gt;label}&lt;/span&gt;
&lt;/div&gt;
HTML
);
}
}</code></pre>
<h3>方法</h3>
<h4>设置线条为直线 (chartStraight)</h4>
<pre><code class="language-php">use Dcat\Admin\Widgets\Metrics\Line;
class MyCard extend Line
{
protected function init()
{
parent::init();
$this-&gt;chartStraight();
}
}</code></pre>
<h4>设置线条为曲线 (chartSmooth)</h4>
<p>默认显示的是曲线。</p>
<pre><code class="language-php">use Dcat\Admin\Widgets\Metrics\Line;
class MyCard extend Line
{
protected function init()
{
parent::init();
$this-&gt;chartSmooth();
}
}</code></pre>
<h2>圆环图卡片 (Donut)</h2>
<p>圆环图卡片(<code>Dcat\Admin\Widgets\Metrics\Donut</code>)是一个附带了圆环图的数据统计卡片，继承自基础卡片<code>Dcat\Admin\Widgets\Metrics\Card</code>。</p>
<p><a href="{{public}}/assets/img/screenshots/card-donut.png" target="_blank">
<img src="{{public}}/assets/img/screenshots/card-donut.png" style="box-shadow:0 1px 6px 1px rgba(0, 0, 0, 0.12)" width="100%" >
</a></p>
<h3>示例</h3>
<p>可参考内置的<code>App\Admin\Metrics\Examples\NewDevices</code>类。</p>
<pre><code class="language-php">&lt;?php
namespace App\Admin\Metrics\Examples;
use Dcat\Admin\Admin;
use Dcat\Admin\Widgets\Metrics\Donut;
class NewDevices extends Donut
{
protected $labels = ['Desktop', 'Mobile'];
/**
* 初始化卡片内容
*/
protected function init()
{
parent::init();
$color = Admin::color();
$colors = [$color-&gt;primary(), $color-&gt;alpha('blue2', 0.5)];
$this-&gt;title('New Devices');
$this-&gt;subTitle('Last 30 days');
$this-&gt;chartLabels($this-&gt;labels);
// 设置图表颜色
$this-&gt;chartColors($colors);
}
/**
* 渲染模板
*
* @return string
*/
public function render()
{
$this-&gt;fill();
return parent::render();
}
/**
* 写入数据.
*
* @return void
*/
public function fill()
{
$this-&gt;withContent(44.9, 28.6);
// 图表数据
$this-&gt;withChart([44.9, 28.6]);
}
/**
* 设置图表数据.
*
* @param array $data
*
* @return $this
*/
public function withChart(array $data)
{
return $this-&gt;chart([
'series' =&gt; $data
]);
}
/**
* 设置卡片头部内容.
*
* @param mixed $desktop
* @param mixed $mobile
*
* @return $this
*/
protected function withContent($desktop, $mobile)
{
$blue = Admin::color()-&gt;alpha('blue2', 0.5);
$style = 'margin-bottom: 8px';
$labelWidth = 120;
return $this-&gt;content(
&lt;&lt;&lt;HTML
&lt;div class=&quot;d-flex pl-1 pr-1 pt-1&quot; style=&quot;{$style}&quot;&gt;
&lt;div style=&quot;width: {$labelWidth}px&quot;&gt;
&lt;i class=&quot;fa fa-circle text-primary&quot;&gt;&lt;/i&gt; {$this-&gt;labels[0]}
&lt;/div&gt;
&lt;div&gt;{$desktop}&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;d-flex pl-1 pr-1&quot; style=&quot;{$style}&quot;&gt;
&lt;div style=&quot;width: {$labelWidth}px&quot;&gt;
&lt;i class=&quot;fa fa-circle&quot; style=&quot;color: $blue&quot;&gt;&lt;/i&gt; {$this-&gt;labels[1]}
&lt;/div&gt;
&lt;div&gt;{$mobile}&lt;/div&gt;
&lt;/div&gt;
HTML
);
}
}</code></pre>
<h3>方法</h3>
<h4>设置内容宽度 (contentWidth)</h4>
<p>通过<code>contentWidth</code>方法可以设置文本内容以及图表内容的宽度，默认为<code>[6, 6]</code>。</p>
<p>> {tip} 这里的宽度是一个<code>1-12</code>之间的一个值。</p>
<pre><code class="language-php">use Dcat\Admin\Widgets\Metrics\Line;
class MyCard extend Line
{
protected function init()
{
parent::init();
$this-&gt;contentWidth(4, 8);
}
}</code></pre>
<h2>柱状图卡片 (Bar)</h2>
<p>柱状图卡片(<code>Dcat\Admin\Widgets\Metrics\Bar</code>)是一个附带了柱状图的数据统计卡片，继承自基础卡片<code>Dcat\Admin\Widgets\Metrics\Card</code>。</p>
<p><a href="{{public}}/assets/img/screenshots/card-bar.png" target="_blank">
<img src="{{public}}/assets/img/screenshots/card-bar.png" style="box-shadow:0 1px 6px 1px rgba(0, 0, 0, 0.12)" width="100%" >
</a></p>
<h3>示例</h3>
<p>可参考内置的<code>App\Admin\Metrics\Examples\NewDevices</code>类。</p>
<pre><code class="language-php">&lt;?php
namespace App\Admin\Metrics\Examples;
use Dcat\Admin\Admin;
use Dcat\Admin\Widgets\Metrics\Bar;
use Illuminate\Http\Request;
class Sessions extends Bar
{
/**
* 初始化卡片内容
*/
public function init()
{
parent::init();
$color = Admin::color();
$dark35 = $color-&gt;dark35();
// 卡片内容宽度
$this-&gt;contentWidth(5, 7);
// 标题
$this-&gt;title('Avg Sessions');
// 设置下拉选项
$this-&gt;dropdown([
'7' =&gt; 'Last 7 Days',
'28' =&gt; 'Last 28 Days',
'30' =&gt; 'Last Month',
'365' =&gt; 'Last Year',
]);
// 设置图表颜色
$this-&gt;chartColors([
$dark35,
$dark35,
$color-&gt;primary(),
$dark35,
$dark35,
$dark35
]);
}
/**
* 处理请求
*
* @param Request $request
*
* @return mixed|void
*/
public function handle(Request $request)
{
switch ($request-&gt;get('option')) {
case '7':
default:
// 卡片内容
$this-&gt;withContent('2.7k', '+5.2%');
// 图表数据
$this-&gt;withChart([
[
'name' =&gt; 'Sessions',
'data' =&gt; [75, 125, 225, 175, 125, 75, 25],
],
]);
}
}
/**
* 设置图表数据.
*
* @param array $data
*
* @return $this
*/
public function withChart(array $data)
{
return $this-&gt;chart([
'series' =&gt; $data,
]);
}
/**
* 设置卡片内容.
*
* @param string $title
* @param string $value
* @param string $style
*
* @return $this
*/
public function withContent($title, $value, $style = 'success')
{
// 根据选项显示
$label = strtolower(
$this-&gt;dropdown[request()-&gt;option] ?? 'last 7 days'
);
$minHeight = '183px';
return $this-&gt;content(
&lt;&lt;&lt;HTML
&lt;div class=&quot;d-flex p-1 flex-column justify-content-between&quot; style=&quot;padding-top: 0;width: 100%;height: 100%;min-height: {$minHeight}&quot;&gt;
&lt;div class=&quot;text-left&quot;&gt;
&lt;h1 class=&quot;font-large-2 mt-2 mb-0&quot;&gt;{$title}&lt;/h1&gt;
&lt;h5 class=&quot;font-medium-2&quot; style=&quot;margin-top: 10px;&quot;&gt;
&lt;span class=&quot;text-{$style}&quot;&gt;{$value} &lt;/span&gt;
&lt;span&gt;vs {$label}&lt;/span&gt;
&lt;/h5&gt;
&lt;/div&gt;
&lt;a href=&quot;#&quot; class=&quot;btn btn-primary shadow waves-effect waves-light&quot;&gt;View Details &lt;i class=&quot;feather icon-chevrons-right&quot;&gt;&lt;/i&gt;&lt;/a&gt;
&lt;/div&gt;
HTML
);
}
}</code></pre>
<h2>多环形图卡片 (Round)</h2>
<p>柱状图卡片(<code>Dcat\Admin\Widgets\Metrics\Round</code>)是一个附带了多环形图的数据统计卡片，继承自基础卡片<code>Dcat\Admin\Widgets\Metrics\Card</code>。</p>
<p><a href="{{public}}/assets/img/screenshots/card-ra.png" target="_blank">
<img src="{{public}}/assets/img/screenshots/card-ra.png" style="box-shadow:0 1px 6px 1px rgba(0, 0, 0, 0.12)" width="100%" >
</a></p>
<h3>示例</h3>
<p>具体示例与上述卡片的示例大同小异，具体可参考内置的<code>App\Admin\Metrics\Examples\ProductOrders</code>类，这里不再贴出。</p>
<h2>更多内置卡片</h2>
<p>系统还内置了<code>Dcat\Admin\Widgets\Metrics\RadialBar</code>、<code>Dcat\Admin\Widgets\Metrics\SingleRound</code>等卡片，由于用法与上述卡片雷同，这里不再重复贴出代码。</p>
<p><a href="http://103.39.211.179:8080/admin/components/metric-cards">点击我查看所有内置卡片在线演示</a></p>
<h2>自定义图表卡片</h2>
<p>如需自定义卡片，可参考上述内置图表的代码。</p>