Browse Source

统计卡片高度设置功能调整

jqh 5 years ago
parent
commit
e0568ff251

+ 7 - 1
src/Widgets/Metrics/BarChartCard.php

@@ -14,16 +14,22 @@ class BarChartCard extends RadialBarChartCard
     protected $contentWidth = [4, 8];
 
     /**
+     * 图表高度.
+     *
      * @var int
      */
-    protected $chartHeight = 200;
+    protected $chartHeight = 180;
 
     /**
+     * 图表下间距.
+     *
      * @var int
      */
     protected $chartMarginBottom = 0;
 
     /**
+     * 图表位置是否靠右.
+     *
      * @var bool
      */
     protected $chartPullRight = true;

+ 34 - 4
src/Widgets/Metrics/Card.php

@@ -32,16 +32,29 @@ class Card extends Widget
     ];
 
     /**
+     * 图标主题色.
+     *
      * @var string
      */
     protected $style = 'primary';
 
     /**
+     * 卡片高度.
+     *
+     * @var int|string
+     */
+    protected $height = null;
+
+    /**
+     * 图表高度.
+     *
      * @var int
      */
     protected $chartHeight = 70;
 
     /**
+     * 图表配置.
+     *
      * @var array
      */
     protected $chartOptions = [];
@@ -204,11 +217,9 @@ class Card extends Widget
      */
     public function height($value)
     {
-        if (is_numeric($value)) {
-            $value .= 'px';
-        }
+        $this->height = $value;
 
-        return $this->appendHtmlAttribute('style', "min-height:{$value};");
+        return $this;
     }
 
     /**
@@ -403,12 +414,29 @@ JS;
         return $this->chart ? $this->chart->render() : '';
     }
 
+    /**
+     * 设置卡片高度.
+     */
+    protected function setUpCardHeight()
+    {
+        if (! $height = $this->height) {
+            return;
+        }
+
+        if (is_numeric($height)) {
+            $height .= 'px';
+        }
+
+        $this->appendHtmlAttribute('style', "min-height:{$height};");
+    }
+
     /**
      * @return string
      */
     public function render()
     {
         $this->setUpChart();
+        $this->setUpCardHeight();
 
         $this->script = $this->script();
 
@@ -416,6 +444,8 @@ JS;
         $this->variables['header'] = $this->renderHeader();
         $this->variables['content'] = $this->renderContent();
 
+
+
         return parent::render();
     }
 

+ 12 - 1
src/Widgets/Metrics/RadialBarChartCard.php

@@ -21,6 +21,15 @@ class RadialBarChartCard extends Card
     ];
 
     /**
+     * 卡片高度.
+     *
+     * @var int
+     */
+    protected $height = 250;
+
+    /**
+     * 图表高度.
+     *
      * @var int
      */
     protected $chartHeight = 150;
@@ -33,12 +42,14 @@ class RadialBarChartCard extends Card
     protected $contentWidth = [2, 10];
 
     /**
+     * 图表下间距.
+     *
      * @var int
      */
     protected $chartMarginBottom = -10;
 
     /**
-     * 图表位置靠右.
+     * 图表位置是否靠右.
      *
      * @var bool
      */

+ 15 - 2
src/Widgets/Metrics/RoundChartCard.php

@@ -20,6 +20,15 @@ class RoundChartCard extends RadialBarChartCard
     ];
 
     /**
+     * 卡片高度.
+     *
+     * @var int
+     */
+    protected $height = 250;
+
+    /**
+     * 图表高度.
+     *
      * @var int
      */
     protected $chartHeight = 230;
@@ -32,6 +41,8 @@ class RoundChartCard extends RadialBarChartCard
     protected $contentWidth = [5, 7];
 
     /**
+     * 图表下间距.
+     *
      * @var int
      */
     protected $chartMarginBottom = -40;
@@ -57,20 +68,22 @@ class RoundChartCard extends RadialBarChartCard
             ],
             'plotOptions' => [
                 'radialBar' => [
-                    'size' => 115,
+                    'size' => 100,
                     'hollow' => [
                         'size' => '20%',
                     ],
                     'track' => [
                         'strokeWidth' => '100%',
-                        'margin' => 14,
+                        'margin' => 13,
                     ],
                     'dataLabels' => [
                         'name' => [
                             'fontSize' => '14px',
+                            'offsetY' => -2,
                         ],
                         'value' => [
                             'fontSize' => '12px',
+                            'offsetY' => 4,
                         ],
                         'total' => [
                             'show' => true,

+ 2 - 0
src/Widgets/Metrics/SingleRoundChartCard.php

@@ -7,6 +7,8 @@ use Dcat\Admin\Admin;
 class SingleRoundChartCard extends RoundChartCard
 {
     /**
+     * 图表下间距.
+     *
      * @var int
      */
     protected $chartMarginBottom = 0;