From 6d2f9e8b43863a1c4e8367f7fd82f75a53a4dae4 Mon Sep 17 00:00:00 2001
From: niushuai233 <niushuai951101@gmail.com>
Date: Fri, 7 Jun 2024 17:57:02 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20:100:=20=E6=8A=98=E7=BA=BF=E5=9B=BE?=
 =?UTF-8?q?=E5=B8=83=E5=B1=80=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/main/resources/templates/index.ftl | 65 +++++++++++++++++++-------
 1 file changed, 49 insertions(+), 16 deletions(-)
diff --git a/src/main/resources/templates/index.ftl b/src/main/resources/templates/index.ftl
index ac2e25d..d3a26cf 100644
--- a/src/main/resources/templates/index.ftl
+++ b/src/main/resources/templates/index.ftl
@@ -19,51 +19,84 @@
             width: 85%;
         }
 
-        #main {
-            height: 400px;
-            width: 45%;
+        .charts {
+            height: 350px;
         }
     </style>
 </head>
 <body>
 
 <div class="container">
-    <div id="main"></div>
+    <div class="row">
+        <h2>Gas监控</h2>
+    </div>
+    <br/><br/><br/>
+    <div class="row">
+        <div class="col-xs-6 col-md-4">
+            <div id="main1" class="charts"></div>
+        </div>
+        <div class="col-xs-6 col-md-4">
+            <div id="main2" class="charts"></div>
+        </div>
+        <div class="col-xs-6 col-md-4">
+            <div id="main3" class="charts"></div>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-xs-9 col-md-6">
+            <div id="main4" class="charts"></div>
+        </div>
+        <div class="col-xs-9 col-md-6">
+            <div id="main5" class="charts"></div>
+        </div>
+    </div>
 </div>
 </body>
 <script>
 
     // 基于准备好的dom，初始化echarts实例
-    var myChart = echarts.init(document.getElementById('main'));
+    var myChart1 = echarts.init(document.getElementById('main1'));
+    var myChart2 = echarts.init(document.getElementById('main2'));
+    var myChart3 = echarts.init(document.getElementById('main3'));
+    var myChart4 = echarts.init(document.getElementById('main4'));
+    var myChart5 = echarts.init(document.getElementById('main5'));
 
     // 指定图表的配置项和数据
     var option = {
         title: {
-            text: ''
+            text: 'COMPLE'
         },
         tooltip: {},
-        legend: {
-            data: ['销量']
-        },
         xAxis: {
-            data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
+            type: 'category',
+            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+        },
+        yAxis: {
+            type: 'value'
         },
-        yAxis: {},
         series: [
             {
-                name: '销量',
-                type: 'bar',
-                data: [5, 20, 36, 10, 10, 20]
+                data: [820, 932, 901, 934, 1290, 1330, 1320],
+                type: 'line',
+                smooth: true
             }
         ]
     };
 
     // 使用刚指定的配置项和数据显示图表。
-    myChart.setOption(option);
+    myChart1.setOption(option);
+    myChart2.setOption(option);
+    myChart3.setOption(option);
+    myChart4.setOption(option);
+    myChart5.setOption(option);
 
     window.addEventListener('resize', function () {
         console.log(myChart);
-        myChart.resize();
+        myChart1.resize();
+        myChart2.resize();
+        myChart3.resize();
+        myChart4.resize();
+        myChart5.resize();
     });
 
     $(function () {
