调整样式

app/Admin/Components.php

@@ -97,6 +97,7 @@ class Components extends BaseRenderer {
     public function chartLineBarConfig($title = '', array $x , array $y){
         $yAxisData = [];
         $seriesData = [];
+        $color = [];
         if(!isset($y[0])){
             $_y = $y;
             $y = [0=>$_y];
@@ -104,11 +105,13 @@ class Components extends BaseRenderer {
         $i = 0;
         $tips = '{b0}';
         foreach($y as $item) {
+            //调色盘
+            $color[] = $item['color'];
             //tips
             $tips.= '<br/> {a'.$i.'}: {c'.$i.'}'.($item['unit'] ?? '');
             //纵坐标
             $yAxisData[] = [
-                'name'=>$item['name'].($item['unit'] ?? ''),
+                'name'=>($item['unit'] ?? ''),
                 'type' =>'value',
                 'axisTick' => true,
                 'alignTicks' => true,
@@ -119,7 +122,7 @@ class Components extends BaseRenderer {
                     ]
                 ],
                 'axisLabel'=> [
-                    'formatter'=>'{value} '.($item['unit'] ?? '')
+                    'formatter'=>'{value} '
                 ]
             ];
             //数据
@@ -143,6 +146,8 @@ class Components extends BaseRenderer {
                     ]);
                     break;
                 case 'bar':
+                    $_series = array_merge($_series, [
+                    ]);
                     break;
             }
             $seriesData[] = $_series;
@@ -150,6 +155,7 @@ class Components extends BaseRenderer {
         }
 
         return [
+            'color' =>  $color,
             'title' => [
                 'text' => $title,
             ],
@@ -172,6 +178,52 @@ class Components extends BaseRenderer {
             'series' => $seriesData
         ];
     }
+    
+    /**
+     * 散点图
+     */
+    public function chartScatterConfig($title = '', array $x , array $y, array $yData = null){
+        $yAxisData = [];
+        $seriesData = [];
+        $color = [];
+
+        if($yData){
+            $yAxisData = [
+                'type' =>'category',
+                // 'splitLine'=>[
+                //     'show'=>true,
+                //     'lineStyle'=>[
+                //         'type'=>'dashed'
+                //     ]
+                // ],
+                'axisTick' => [
+                    'alignWithLabel'=>true
+                ],
+                'data'=> $yData
+            ];
+        }
+        
+        $seriesData = $y;
+        
+        return [
+            'color' =>  $color,
+            'title' => [
+                'text' => $title,
+            ],
+            "tooltip" => [//提示
+                'trigger'=>'axis',//坐标轴触发
+                'axisPointer' => [
+                    'type' => 'cross'
+                ],
+            ],
+            'xAxis' => [
+                'type' => 'category',
+                'data' => $x,
+            ],
+            'yAxis' => $yAxisData,
+            'series' => $seriesData
+        ];
+    }
 
     /**
      * 生成饼状图config

app/Admin/bootstrap.php

@@ -1 +1,8 @@
 <?php
+use Slowlyo\OwlAdmin\Admin;
+
+Admin::styles([
+    '.cxd-Panel-heading { border-width: 0; background: #4080ffc7 !important; }',
+    // '.cxd-Panel {box-shadow: none; }',
+    '.cxd-Panel-title { color:white;font-size: 16px; }'
+]);

app/Services/Admin/DeviceService.php

@@ -142,9 +142,45 @@ class DeviceService extends BaseService
             $k++;
 
             //特殊字段，特殊统计图；
-            switch($field){
-                //点状图;-todo
-                //柱状图;-todo
+            switch($key){
+                //点状图;
+                case 'wind_direction':
+                    $yData = ['北风','东北风','东风','东南风','南风','西南风','西风','西北风'];
+                    $_chartCard = amisMake()->Card()->body(
+                        amisMake()->Chart()->config(
+                            Components::make()->chartScatterConfig($field['name'], $xKeys, 
+                                [
+                                    'name'=> $field['name'],
+                                    'type' => 'scatter',
+                                    'symbolSize' => 15,
+                                    'data' => array_map(function($item)use($yData){
+                                        return $yData[$item];
+                                    },$field['data']),
+                                    'color' => '#91CC75',
+                                ], $yData
+                            )
+                        )
+                    );
+                    break;
+                //柱状图;
+                case 'box_noise':
+                case 'pm10':
+                case 'pm25':
+                case 'box_co2':
+                    $_chartCard = amisMake()->Card()->body(
+                        amisMake()->Chart()->config(
+                            Components::make()->chartLineBarConfig($field['name'], $xKeys, [
+                                [
+                                    'name'=> $field['name'],
+                                    'type' => 'bar',
+                                    'data' => $field['data'],
+                                    'color' => '#91CC75',
+                                    'unit' => $field['unit']
+                                ]
+                            ])
+                        )
+                    );
+                    break;
                 default://折线图
                     $_chartCard = amisMake()->Card()->body(
                         amisMake()->Chart()->config(

resources/admin-views/src/typings/components.d.ts

@@ -0,0 +1,93 @@
+// generated by unplugin-vue-components
+// We suggest you to commit this file into source control
+// Read more: https://github.com/vuejs/core/pull/3399
+import '@vue/runtime-core'
+
+export {}
+
+declare module '@vue/runtime-core' {
+  export interface GlobalComponents {
+    AppLoading: typeof import('./../components/common/AppLoading.vue')['default']
+    BetterScroll: typeof import('./../components/custom/BetterScroll.vue')['default']
+    CountTo: typeof import('./../components/custom/CountTo.vue')['default']
+    DarkModeContainer: typeof import('./../components/common/DarkModeContainer.vue')['default']
+    DarkModeSwitch: typeof import('./../components/common/DarkModeSwitch.vue')['default']
+    ExceptionBase: typeof import('./../components/common/ExceptionBase.vue')['default']
+    GithubLink: typeof import('./../components/custom/GithubLink.vue')['default']
+    HoverContainer: typeof import('./../components/common/HoverContainer.vue')['default']
+    IconAntDesignCloseOutlined: typeof import('~icons/ant-design/close-outlined')['default']
+    IconAntDesignSettingOutlined: typeof import('~icons/ant-design/setting-outlined')['default']
+    'IconClarity:notificationLine': typeof import('~icons/clarity/notification-line')['default']
+    IconGridiconsFullscreen: typeof import('~icons/gridicons/fullscreen')['default']
+    IconGridiconsFullscreenExit: typeof import('~icons/gridicons/fullscreen-exit')['default']
+    IconIcBaselineDoNotDisturb: typeof import('~icons/ic/baseline-do-not-disturb')['default']
+    IconIcOutlineCheck: typeof import('~icons/ic/outline-check')['default']
+    IconIcRoundHdrAuto: typeof import('~icons/ic/round-hdr-auto')['default']
+    IconLineMdMenuFoldLeft: typeof import('~icons/line-md/menu-fold-left')['default']
+    IconLineMdMenuUnfoldLeft: typeof import('~icons/line-md/menu-unfold-left')['default']
+    IconLocalAvatar: typeof import('~icons/local/avatar')['default']
+    IconLocalEmptyData: typeof import('~icons/local/empty-data')['default']
+    IconLocalNetworkError: typeof import('~icons/local/network-error')['default']
+    IconLocalNoPermission: typeof import('~icons/local/no-permission')['default']
+    IconLocalNotFound: typeof import('~icons/local/not-found')['default']
+    IconLocalServiceError: typeof import('~icons/local/service-error')['default']
+    IconMdiMoonWaningCrescent: typeof import('~icons/mdi/moon-waning-crescent')['default']
+    IconMdiPin: typeof import('~icons/mdi/pin')['default']
+    IconMdiPinOff: typeof import('~icons/mdi/pin-off')['default']
+    IconMdiRefresh: typeof import('~icons/mdi/refresh')['default']
+    IconMdiWhiteBalanceSunny: typeof import('~icons/mdi/white-balance-sunny')['default']
+    IconPhCaretDoubleLeftBold: typeof import('~icons/ph/caret-double-left-bold')['default']
+    IconPhCaretDoubleRightBold: typeof import('~icons/ph/caret-double-right-bold')['default']
+    IconSelect: typeof import('./../components/custom/IconSelect.vue')['default']
+    LoadingEmptyWrapper: typeof import('./../components/business/LoadingEmptyWrapper.vue')['default']
+    LoginAgreement: typeof import('./../components/business/LoginAgreement.vue')['default']
+    NaiveProvider: typeof import('./../components/common/NaiveProvider.vue')['default']
+    NAvatar: typeof import('naive-ui')['NAvatar']
+    NBackTop: typeof import('naive-ui')['NBackTop']
+    NBadge: typeof import('naive-ui')['NBadge']
+    NBreadcrumb: typeof import('naive-ui')['NBreadcrumb']
+    NBreadcrumbItem: typeof import('naive-ui')['NBreadcrumbItem']
+    NButton: typeof import('naive-ui')['NButton']
+    NCard: typeof import('naive-ui')['NCard']
+    NCheckbox: typeof import('naive-ui')['NCheckbox']
+    NColorPicker: typeof import('naive-ui')['NColorPicker']
+    NConfigProvider: typeof import('naive-ui')['NConfigProvider']
+    NDialogProvider: typeof import('naive-ui')['NDialogProvider']
+    NDivider: typeof import('naive-ui')['NDivider']
+    NDrawer: typeof import('naive-ui')['NDrawer']
+    NDrawerContent: typeof import('naive-ui')['NDrawerContent']
+    NDropdown: typeof import('naive-ui')['NDropdown']
+    NEllipsis: typeof import('naive-ui')['NEllipsis']
+    NForm: typeof import('naive-ui')['NForm']
+    NFormItem: typeof import('naive-ui')['NFormItem']
+    NGradientText: typeof import('naive-ui')['NGradientText']
+    NGrid: typeof import('naive-ui')['NGrid']
+    NGridItem: typeof import('naive-ui')['NGridItem']
+    NImage: typeof import('naive-ui')['NImage']
+    NInput: typeof import('naive-ui')['NInput']
+    NInputNumber: typeof import('naive-ui')['NInputNumber']
+    NList: typeof import('naive-ui')['NList']
+    NListItem: typeof import('naive-ui')['NListItem']
+    NLoadingBarProvider: typeof import('naive-ui')['NLoadingBarProvider']
+    NMenu: typeof import('naive-ui')['NMenu']
+    NMessageProvider: typeof import('naive-ui')['NMessageProvider']
+    NModal: typeof import('naive-ui')['NModal']
+    NNotificationProvider: typeof import('naive-ui')['NNotificationProvider']
+    NPopover: typeof import('naive-ui')['NPopover']
+    NScrollbar: typeof import('naive-ui')['NScrollbar']
+    NSelect: typeof import('naive-ui')['NSelect']
+    NSpace: typeof import('naive-ui')['NSpace']
+    NSpin: typeof import('naive-ui')['NSpin']
+    NSwitch: typeof import('naive-ui')['NSwitch']
+    NTabPane: typeof import('naive-ui')['NTabPane']
+    NTabs: typeof import('naive-ui')['NTabs']
+    NTag: typeof import('naive-ui')['NTag']
+    NThing: typeof import('naive-ui')['NThing']
+    NTooltip: typeof import('naive-ui')['NTooltip']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+    SvgIcon: typeof import('./../components/custom/SvgIcon.vue')['default']
+    SystemLogo: typeof import('./../components/common/SystemLogo.vue')['default']
+    WebSiteLink: typeof import('./../components/custom/WebSiteLink.vue')['default']
+  }
+}