1

resources/views/admin/home.blade.php

@@ -15,6 +15,9 @@
             display: flex;
             flex-wrap: wrap;
         }
+        .static-container > .card1 {
+            margin-bottom: 20px;
+        }
         .static-container > .card1 + .card1 {
             margin-left: 20px;
         }
@@ -22,7 +25,7 @@
             flex-basis: 60%;
         }
         .static-container > .card1:nth-child(2) {
-            flex-basis: 40%;
+            flex-basis: calc(40% - 20px);
         }
         .card1 {
             background: #fff;
@@ -155,7 +158,13 @@
         .static2 .static2__item .static2__item--value {
             text-align: center;
         }
-
+        .card1-body:has(#pie-chart) {
+            height: calc(100% - 39px);
+        }
+        #pie-chart {
+            height: 100%;
+            width: 100%;
+        }
     </style>
 @endpush
 
@@ -226,7 +235,7 @@
                 </div>
             </div>
             <div class="card1-body">
-                1
+                <div id="#pie-chart"></div>
             </div>
         </div>
 
@@ -238,7 +247,7 @@
                 </div>
             </div>
             <div class="card1-body">
-                1
+                <div id="#"></div>
             </div>
         </div>
     </div>
@@ -250,3 +259,37 @@
     }
 
 </script>
+@push("footer")
+    <script src="/plugins/echarts/echarts.min.js"></script>
+    <script>
+        function initPieChart () {
+            var pieChart = document.querySelector("#pie-chart");
+            var option = {
+                title: {
+                    text: 'ECharts 入门示例'
+                },
+                tooltip: {},
+                legend: {
+                    data: ['销量']
+                },
+                xAxis: {
+                    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
+                },
+                yAxis: {},
+                series: [
+                    {
+                        name: '销量',
+                        type: 'bar',
+                        data: [5, 20, 36, 10, 10, 20]
+                    }
+                ]
+            };
+
+            // 使用刚指定的配置项和数据显示图表。
+            pieChart.setOption(option);
+        }
+        (function () {
+            initPieChart()
+        })()
+    </script>
+@endpush