数据统计卡片

resources/views/dashboard/title.blade.php

@@ -5,28 +5,32 @@
     }
 
     .links > a {
-        color: {{ \Dcat\Admin\Admin::color()->white50()  }};
         padding: 0 25px;
         font-size: 12px;
         font-weight: 600;
         letter-spacing: .1rem;
         text-decoration: none;
         text-transform: uppercase;
+        color: {{ Admin::color()->white50() }};
+    }
+
+    .dashborard h1 {
+        font-weight: 200;
+        font-size: 2.5rem;
     }
 </style>
 
-<div class="text-center">
-    <div class="avatar avatar-xl bg-primary shadow mt-0 mb-2">
-        <div class="avatar-content">
-            <i class="feather icon-award white font-large-1"></i>
-        </div>
-    </div>
-    <div class="text-center mb-1">
-        <h1 class="mb-2 text-white">Dcat Admin</h1>
-        <div class="links">
-            <a href="https://github.com/jqhph/dcat-admin" target="_blank">Github</a>
-            <a href="https://jqhph.github.io/dcat-admin/docs.html" id="doc-link" target="_blank">Documentation</a>
-            <a href="https://jqhph.github.io/dcat-admin/demo.html" id="demo-link" target="_blank">Demo</a>
+<div class="card" style="height: 176px;background: {{ Admin::color()->alpha('primary', 0.9) }}">
+    <div class="card-body">
+        <div class="text-center dashborard">
+            <div class="text-center mb-1">
+                <h1 class="mb-3 mt-2 white">Dcat Admin</h1>
+                <div class="links mb-2">
+                    <a href="https://github.com/jqhph/dcat-admin" target="_blank">Github</a>
+                    <a href="https://jqhph.github.io/dcat-admin/docs.html" id="doc-link" target="_blank">Documentation</a>
+                    <a href="https://jqhph.github.io/dcat-admin/demo.html" id="demo-link" target="_blank">Demo</a>
+                </div>
+            </div>
         </div>
     </div>
 </div>

src/Controllers/Dashboard.php

@@ -14,7 +14,7 @@ class Dashboard
      */
     public static function title()
     {
-        return Card::make(view('admin::dashboard.title'))->class('bg-primary-gradient', true);
+        return view('admin::dashboard.title');
     }
 
     public static function tab()

src/Widgets/Metrics/Card.php

@@ -7,6 +7,7 @@ use Dcat\Admin\Support\Helper;
 use Dcat\Admin\Widgets\ApexCharts\Chart;
 use Dcat\Admin\Traits\InteractsWithApi;
 use Dcat\Admin\Widgets\Widget;
+use Illuminate\Support\Arr;
 use Illuminate\Support\Str;
 
 class Card extends Widget
@@ -22,10 +23,10 @@ class Card extends Widget
      * @var array
      */
     protected $options = [
-        'icon' => null,
-        'title' => null,
-        'header' => null,
-        'content' => null,
+        'icon'     => null,
+        'title'    => null,
+        'header'   => null,
+        'content'  => null,
         'dropdown' => [],
     ];
 
@@ -67,7 +68,7 @@ class Card extends Widget
     }
 
     /**
-     * 初始化
+     * 初始化.
      */
     protected function init()
     {
@@ -76,7 +77,7 @@ class Card extends Widget
     }
 
     /**
-     * 图表默认配置
+     * 图表默认配置.
      *
      * @return array
      */
@@ -195,6 +196,23 @@ class Card extends Widget
         return $this->appendHtmlAttribute('style', "min-height:{$value};");
     }
 
+    /**
+     * 设置图表配置.
+     *
+     * @param string $key
+     * @param mixed $value
+     *
+     * @return $this
+     */
+    public function chartOption($key, $value)
+    {
+        Arr::set($this->chartOptions, $key, $value);
+
+        $this->useChart();
+
+        return $this;
+    }
+
     /**
      * 设置图表高度
      *

src/Widgets/Metrics/RadialBarCard.php

@@ -4,7 +4,6 @@ namespace Dcat\Admin\Widgets\Metrics;
 
 use Dcat\Admin\Admin;
 use Dcat\Admin\Support\Helper;
-use Dcat\Admin\Traits\InteractsWithApi;
 use Illuminate\Contracts\Support\Renderable;
 
 class RadialBarCard extends Card
@@ -26,6 +25,30 @@ class RadialBarCard extends Card
      */
     protected $chartHeight = 150;
 
+    /**
+     * 内容宽度.
+     *
+     * @var array
+     */
+    protected $contentWidth = [2, 10];
+
+    /**
+     * @var int
+     */
+    protected $chartMarginBottom = -10;
+
+    /**
+     * 初始化
+     */
+    public function init()
+    {
+        parent::init();
+
+        $this->useChart();
+
+        $this->chart->style("margin-bottom: {$this->chartMarginBottom}px;");
+    }
+
     /**
      * 图表默认配置.
      *
@@ -95,6 +118,21 @@ class RadialBarCard extends Card
         return $this;
     }
 
+    /**
+     * 设置内容宽度.
+     *
+     * @param int $left
+     * @param int $right
+     *
+     * @return $this
+     */
+    public function contentWidth(int $left, int $right)
+    {
+        $this->contentWidth = [$left, $right];
+
+        return $this;
+    }
+
     /**
      * @return string
      */
@@ -114,10 +152,10 @@ class RadialBarCard extends Card
 <div class="card-content">
     <div class="card-body pt-0">
         <div class="row">
-            <div class="metric-content col-sm-2 col-12 d-flex flex-column flex-wrap text-center">
+            <div class="metric-content col-sm-{$this->contentWidth[0]} col-12 d-flex flex-column flex-wrap text-center">
                 {$content}
             </div>
-            <div class="col-sm-10 col-12 d-flex justify-content-center">
+            <div class="col-sm-{$this->contentWidth[1]} col-12 d-flex justify-content-center">
                 {$this->renderChart()}
             </div>
         </div>

src/Widgets/Metrics/RoundRadialBarCard.php

@@ -0,0 +1,126 @@
+<?php
+
+namespace Dcat\Admin\Widgets\Metrics;
+
+use Dcat\Admin\Admin;
+use Dcat\Admin\Support\Helper;
+use Dcat\Admin\Support\JavaScript;
+use Illuminate\Contracts\Support\Renderable;
+
+class RoundRadialBarCard extends RadialBarCard
+{
+    /**
+     * @var array
+     */
+    protected $options = [
+        'icon'     => null,
+        'title'    => null,
+        'header'   => null,
+        'content'  => null,
+        'footer'   => null,
+        'dropdown' => [],
+    ];
+
+    /**
+     * @var int
+     */
+    protected $chartHeight = 230;
+
+    /**
+     * 内容宽度.
+     *
+     * @var array
+     */
+    protected $contentWidth = [5, 7];
+
+    /**
+     * @var int
+     */
+    protected $chartMarginBottom = -40;
+
+    /**
+     * 图表默认配置.
+     *
+     * @return array
+     */
+    protected function defaultChartOptions()
+    {
+        $color = Admin::color();
+
+        $colors = [$color->primary(), $color->warning(), $color->danger()];
+
+        return [
+            'chart' => [
+                'type' => 'radialBar',
+            ],
+            'colors' => $colors,
+            'stroke' => [
+                'lineCap' => 'round',
+            ],
+            'plotOptions' => [
+                'radialBar' => [
+                    'size' => 115,
+                    'hollow' => [
+                        'size' => '20%',
+                    ],
+                    'track' => [
+                        'strokeWidth' => '100%',
+                        'margin' => 14,
+                    ],
+                    'dataLabels' => [
+                        'name' => [
+                            'fontSize' => '14px',
+                        ],
+                        'value' => [
+                            'fontSize' => '12px',
+                        ],
+                        'total' => [
+                            'show' => true,
+                        ],
+                    ],
+                ],
+            ],
+        ];
+    }
+
+    /**
+     * 设置圆圈宽度.
+     *
+     * @param int $size
+     *
+     * @return $this
+     */
+    public function radialBarSize(int $size)
+    {
+        return $this->chartOption('plotOptions.radialBar.size', $size);
+    }
+
+    /**
+     * 设置圆圈间距.
+     *
+     * @param int $margin
+     *
+     * @return $this
+     */
+    public function radialBarMargin(int $margin)
+    {
+        return $this->chartOption('plotOptions.radialBar.track.margin', $margin);
+    }
+
+    /**
+     * 设置图表统计总数信息
+     *
+     * @param string $label
+     * @param int $number
+     *
+     * @return $this
+     */
+    public function chartTotal(string $label, int $number)
+    {
+        return $this->chartOption('plotOptions.radialBar.dataLabels.total', [
+            'show'      => true,
+            'label'     => $label,
+            'formatter' => JavaScript::make("function () { return {$number}; }"),
+        ]);
+    }
+}

src/Widgets/Metrics/SparklineCard.php

@@ -2,11 +2,6 @@
 
 namespace Dcat\Admin\Widgets\Metrics;
 
-/**
- * 趋势图卡片
- *
- * @package Dcat\Admin\Widgets\Metrics
- */
 class SparklineCard extends Card
 {
     /**
@@ -55,7 +50,7 @@ class SparklineCard extends Card
         ],
         'stroke' => [
             'width' => 2.5,
-            'curve' => 'straight'
+            'curve' => 'smooth'
         ],
         'fill' => [
             'opacity' => 0.1,
@@ -70,8 +65,18 @@ class SparklineCard extends Card
     {
         parent::init();
 
-        // 初始化图表
-        $this->setUpChart();
+        // 使用图表s
+        $this->useChart();
+    }
+
+    /**
+     * 设置线条为直线.
+     *
+     * @return $this
+     */
+    public function chartStraight()
+    {
+        return $this->chartOption('stroke.curve', 'straight');
     }
 
     /**