增加今日人流线图

src/components/zongLan/zongLan.vue

@@ -17,11 +17,7 @@
           </div>
         </div>
 
-        <div
+        <div class="tongjitu" id="homebar" style="height: 230px; width: 680px"></div>
-          class="tongjitu"
-          id="homebar"
-          style="height: 230px; width: 680px"
-        ></div>
 
         <div class="qushiBaifb">
           <div class="baifbLeft">
@@ -44,46 +40,24 @@
             </div>
             <div class="baiFbitem">
               <div style="font-size: 14px">体育馆</div>
-              <div
+              <div  style="  color: white; font-size: 18px; font-weight: bold; margin-left: 10%; " >
-                style="
-                  color: white;
-                  font-size: 18px;
-                  font-weight: bold;
-                  margin-left: 10%;
-                "
-              >
                 12%
               </div>
-              <img
+              <img style="width: 10%; height: 60%" src="../../assets/index/体育馆图例.png"/>
-                style="width: 10%; height: 60%"
-                src="../../assets/index/体育馆图例.png"
-              />
             </div>
             <div class="baiFbitem">
               <div style="font-size: 14px">游泳场馆</div>
               <div style="color: white; font-size: 18px; font-weight: bold">
                 12%
               </div>
-              <img
+              <img  style="width: 10%; height: 60%" src="../../assets/index/体育馆图例.png"
-                style="width: 10%; height: 60%"
-                src="../../assets/index/体育馆图例.png"
               />
             </div>
           </div>
           <div class="baiFbRight">
             <div class="baiFbitem">
-              <img
+              <img  style="width: 10%; height: 60%"  src="../../assets/index/体育场图例.png" />
-                style="width: 10%; height: 60%"
+              <div  style=" color: white;  font-size: 18px;  font-weight: bold; margin-right: 10%; " >
-                src="../../assets/index/体育场图例.png"
-              />
-              <div
-                style="
-                  color: white;
-                  font-size: 18px;
-                  font-weight: bold;
-                  margin-right: 10%;
-                "
-              >
                 20%
               </div>
               <div style="font-size: 14px">图书馆</div>
@@ -124,9 +98,10 @@
             </div>
           </div>
         </div>
-
+        <!-- 今日各场馆人数趋势 折线图 -->
         <div class="keliu keliuTu1">
           <div class="keliuTxt">今日各场馆人数趋势</div>
+          <div id="kl-line" style="width: 680px; height: 180px;"></div>
         </div>
       </div>
 
@@ -291,6 +266,8 @@ export default {
   mounted() {
     // 首页线图
     this.home_bar();
+    // 折线图
+    this.line_zone();
   },
   methods: {
     clickItme(val) {
@@ -309,37 +286,48 @@ export default {
       option = {
         xAxis: {
           type: "category",
-          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun","0c","90","10"],
+          data: [
+            "Mon",
+            "Tue",
+            "Wed",
+            "Thu",
+            "Fri",
+            "Sat",
+            "Sun",
+            "0c",
+            "90",
+            "10",
+          ],
         },
         yAxis: {
           type: "value",
           //网格线
-          splitLine:{
+          splitLine: {
-            lineStyle:{
+            lineStyle: {
-              type:"soild",
+              type: "soild",
-              color:'#2F00FF'
+              color: "#2F00FF",
-            }
+            },
-          }
+          },
         },
         series: [
           {
-            data: [120, 200, 150, 80, 70, 110, 130,630,530,460],
+            data: [120, 200, 150, 80, 70, 110, 130, 630, 530, 460],
             type: "bar",
             showBackground: true,
             // 设置顶部圆形
-            symbolSize:function(d){
+            symbolSize: function (d) {
-              console.log(d)
+              console.log(d);
-              return d>0?[10,barWidth]:[0,0]
+              return d > 0 ? [10, barWidth] : [0, 0];
             },
-            symbolPosition:'end',
+            symbolPosition: "end",
 
             // symbolPosition:'end',
             // 背景颜色
             backgroundStyle: {
-              symbolPosition:'end',
+              symbolPosition: "end",
-              symbolSize:[20,20],
+              symbolSize: [20, 20],
-              symbolOffset:[0,"-20%"],
+              symbolOffset: [0, "-20%"],
-              opacity:0.75,
+              opacity: 0.75,
               //color: 'rgba(180, 180, 180, 0.2)'
               color: {
                 type: "linear",
@@ -363,21 +351,21 @@ export default {
                   {
                     offset: 1,
                     color: "#2F00FF", // 0% 处的颜色
-                  }
+                  },
                 ],
                 global: false, // 缺省为 false
               },
             },
 
-           //
+            //
-          //  itemStyle:{
+            //  itemStyle:{
             //  normal:{
             //   barBorderRadius:[2,2,0,0]
             //  }
             //symbolOffset:[14,14],
-             //borderRadius:[15,15,0,0]
+            //borderRadius:[15,15,0,0]
-          //  },
+            //  },
-            
+
             // 条柱颜色
             color: {
               type: "linear",
@@ -391,10 +379,12 @@ export default {
                   color: "#00B4FF", // 0% 处的颜色
                 },
                 {
-                  offset:0.6,color:"#2f00ff"
+                  offset: 0.6,
+                  color: "#2f00ff",
                 },
                 {
-                  offset:0.8,color:"#2f00ff",
+                  offset: 0.8,
+                  color: "#2f00ff",
                 },
                 {
                   offset: 1,
@@ -409,6 +399,71 @@ export default {
 
       option && myChart.setOption(option);
     },
+
+    // 大面积折线图
+    line_zone() {
+      var chartDom = document.getElementById("kl-line");
+      var myChart = echarts.init(chartDom);
+      var option;
+
+      let base = +new Date(2022, 9, 3);
+      let oneDay = 24 * 3600 * 1000;
+      let date = [];
+      let data = [Math.random() * 300];
+      for (let i = 1; i < 20000; i++) {
+        var now = new Date((base += oneDay));
+        date.push(
+          [now.getFullYear(), now.getMonth() + 1, now.getDate()].join("/")
+        );
+        data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
+      }
+      option = {
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: date,
+        },
+        yAxis: {
+          type: "value",
+          boundaryGap: [0, "100%"],
+          //网格线
+          splitLine: {
+            lineStyle: {
+              type: "soild",
+              color: "#2F00FF",
+            },
+          },
+
+        },
+
+        series: [
+          {
+            name: "Fake Data",
+            type: "line",
+            symbol: "none",
+            sampling: "lttb",
+            itemStyle: {
+              color: "rgb(255, 170, 131)",
+            },
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgba(255, 158, 68,0.6)",
+                },
+                {
+                  offset: 1,
+                  color: "rgb(255, 70, 131,0.6)",
+                },
+              ]),
+            },
+            data: data,
+          },
+        ],
+      };
+
+      option && myChart.setOption(option);
+    },
   },
 };
 </script>
@@ -428,19 +483,19 @@ export default {
     .keliu {
       width: 100%;
       height: 8vh;
-      background-image: url(../../assets/index/左1标题.png);
+      background-image: url(../../assets/index/left_t1_bg.png);
       background-repeat: no-repeat;
       background-size: 100% 100%;
       position: relative;
       .keliuTxt {
-        position: absolute;
+        color: #fff;
-        left: 28%;
-        top: 25%;
-        color: white;
         font-size: 18px;
         color: #b5b7c5;
         font-weight: bold;
+        line-height: 8vh;
+        padding-left: 22%;
       }
+      // 年月日按钮
       .keliuBtn {
         width: 20%;
         height: 50%;
@@ -474,7 +529,7 @@ export default {
       }
     }
     .keliuTu1 {
-      background-image: url("../../assets/index/左2标题.png");
+      background-image: url("../../assets/index/left_t2_bg.png");
     }
     .tongjitu {
       width: 100%;