大致封装echart-config

app/Admin/Components.php

@@ -84,4 +84,95 @@ class Components extends BaseRenderer {
             ->name($name)->label($label)
             ->options(Keyword::getByParentKey($typeKey)->pluck('name', 'id')->toArray());
     }
+
+    /**
+     * 生成统计图config
+     * 折线图或者柱状图
+     */
+    public function chartLineBarConfig($title = '', array $x , array $y){
+        $yAxisData = [];
+        $seriesData = [];
+        if(!isset($y[0])){
+            $_y = $y;
+            $y = [0=>$_y];
+        }
+        $i = 0;
+        $tips = '{b0}';
+        foreach($y as $item) {
+            //tips
+            $tips.= '<br/> {a'.$i.'}: {c'.$i.'}'.($item['unit'] ?? '');
+            //纵坐标
+            $yAxisData[] = [
+                'name'=>$item['name'].($item['unit'] ?? ''),
+                'type' =>'value',
+                'axisTick' => true,
+                'alignTicks' => true,
+                'axisLine' => [
+                    'show' => true,
+                    'lineStyle' => [
+                        'color' => $item['color'] ?? ''
+                    ]
+                ],
+                'axisLabel'=> [
+                    'formatter'=>'{value} '.($item['unit'] ?? '')
+                ]
+            ];
+            //数据
+            $_series = [
+                'name' => $item['name'] ?? '',
+                'data' => $item['data'] ?? [],
+                'type' => $item['type'] ?? 'line',
+                'yAxisIndex' => $i,
+            ];
+            switch($item['type']){
+                case 'line':
+                    $_series = array_merge($_series, [
+                        'smooth'=> true,
+                        'symbol'=> 'none',
+                        'lineStyle' => [
+                            'color' => $item['color'] ?? ''
+                        ],
+                        'areaStyle' => [
+                            'color' => $item['color'] ?? ''
+                        ],
+                    ]);
+                    break;
+                case 'bar':
+                    break;
+            }
+            $seriesData[] = $_series;
+            $i++;
+        }
+
+        return [
+            'title' => [
+                'text' => $title,
+            ],
+            "tooltip" => [//提示
+                'trigger'=>'axis',//坐标轴触发
+                'axisPointer' => [
+                    'type' => 'cross'
+                ],
+                // 'formatter' => $tips
+            ],
+            'grid' => [
+                'left' => '8%',
+                'right' => '8%',
+            ],
+            'xAxis' => [
+                'type' => 'category',
+                'data' => $x,
+            ],
+            'yAxis' => $yAxisData,
+            'series' => $seriesData
+        ];
+    }
+
+    /**
+     * 生成饼状图config
+     * -todo
+     */
+    public function chartPieConfig(){
+        return ;
+    }
 }

app/Admin/Controllers/CropPlantController.php

@@ -67,7 +67,7 @@ class CropPlantController extends AdminController
                         ])->target('plant_harvest_chart'),
                     ]),
                     amisMake()->Card()->className('m-r')->body(
-                        amisMake()->Chart()->name('plant_harvest_chart')->api(admin_url('crop-plant-harveste-chart?plant_id=${id}&start_at=${start_at}&end_at=${end_at}'))
+                        amisMake()->Chart()->name('plant_harvest_chart')->api(admin_url('crop-plant-harveste-chart?plant_id=${id}&start_at=${start_at}&end_at=${end_at}'))->debug(true),
                     ),
                 ]),
             ])
@@ -144,43 +144,21 @@ class CropPlantController extends AdminController
 
     private function plantHarvestChartConfig(array $times, array $areas, array $outputs)
     {
-        return [
-            'title' => [
-                'text' => '种植情况',
+        return Components::make()->chartLineBarConfig('种植情况', $times, [
+            [
+                'name'=> '种植面积',
+                'type' => 'line',
+                'data' => $areas,
+                'color' => '#91CC75',
+                'unit' => 'm²'
             ],
-            "tooltip" => [
-                'trigger'=>'axis'
-            ],
-            'xAxis' => [
-                'type' => 'category',
-                'boundaryGap' => false,
-                'data' => $times,
-            ],
-            'yAxis' => [
-                'type' =>'value'
-            ],
-            'grid' => [
-                'left' => '8%',
-                'right' => '8%',
-            ],
-            'series' => [
-                [
-                    'name' => '面积',
-                    'data' => $areas,
-                    'type' => 'line',
-                    'smooth'=> true,
-                    'symbol'=> 'none',
-                    'areaStyle' => [],
-                ],
-                [
-                    'name' => '产量',
-                    'data' => $outputs,
-                    'type' => 'line',
-                    'smooth'=> true,
-                    'symbol'=> 'none',
-                    'areaStyle' => [],
-                ]
+            [
+                'name'=> '产量',
+                'type'=>'bar',
+                'data'=> $outputs,
+                'color' => '#5470C6',
+                'unit' => 'kg'
             ]
-        ];
+        ]);
     }
 }