From eef2b3b3cb1d5071e715b2cd33b5d9095370d981 Mon Sep 17 00:00:00 2001
From: "453530270@qq.com" <aa123456>
Date: Fri, 30 Jun 2023 14:37:14 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E8=BF=99=E7=BA=BF=E9=9D=A2?=
 =?UTF-8?q?=E7=A7=AF=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/TycView.vue | 218 +++++++++++++++++++++++++++++++++++++-----
 1 file changed, 196 insertions(+), 22 deletions(-)

diff --git a/src/views/TycView.vue b/src/views/TycView.vue
index a3993a6..1999e1b 100644
--- a/src/views/TycView.vue
+++ b/src/views/TycView.vue
@@ -12,20 +12,20 @@
       <div class="jgcon">
 
         <div class="jgitem">
-          <div class="jgimg"><img src="../assets/icon01.png"/></div>
+          <div class="jgimg"><img src="../assets/icon01.png" /></div>
           <span class="jgival">234,255</span>
           <span class="jgdesc">今日进馆人数</span>
         </div>
         <div class="jgitem">
-          <div class="jgimg"><img src="../assets/icon02.png"/></div>
+          <div class="jgimg"><img src="../assets/icon02.png" /></div>
           <span class="jgival">234,255</span>
           <span class="jgdesc">本月进馆人数</span>
         </div>
         <div class="jgitem">
-          <div class="jgimg"><img src="../assets/icon03.png"/></div>
+          <div class="jgimg"><img src="../assets/icon03.png" /></div>
           <span class="jgival">234,255</span>
           <span class="jgdesc">本年进馆人数</span>
-        </div>                
+        </div>
       </div>
     </div>
     <!-- 进馆人数统计 -->
@@ -33,8 +33,11 @@
       <div class="gcins_title">进馆人数统计</div>
       <div id="gcins_charts" style="height:16rem"></div>
     </div>
-    <!-- 人数状态 -->
-    <div class="incbox"></div>
+    <!-- 各场馆人数趋势 -->
+    <div class="gcgrs">
+      <div class="gcgrs_title">各场馆人数趋势</div>
+      <div id="gc_charts" class="gcgrs_charts"></div>
+    </div>
 
   </div>
 </template>
@@ -75,7 +78,8 @@
   font-size: 2.02rem;
   padding-top: 4.8rem;
 }
-.tyclogo .tydesc{
+
+.tyclogo .tydesc {
   height: 2rem;
   line-height: 2rem;
   font-size: 1.03rem;
@@ -83,13 +87,15 @@
   padding-right: 1.06rem;
   color: #999;
 }
+
 /* 总计进馆 */
-.jgbox{
+.jgbox {
   margin-top: 1.02rem;
   width: 100%;
   height: 12rem;
 }
-.jgbox .jg_title{
+
+.jgbox .jg_title {
   background-image: url('../assets/ty_jg_bg.png');
   background-repeat: no-repeat;
   background-size: 100% 100%;
@@ -98,34 +104,41 @@
   height: 2.06rem;
   line-height: 2.06rem;
 }
-.jgbox .jgcon{
+
+.jgbox .jgcon {
   width: 100%;
   height: 7rem;
   padding-top: 2rem;
 }
-.jgbox .jgcon .jgitem{
+
+.jgbox .jgcon .jgitem {
   width: 30%;
   margin-left: 3%;
   float: left;
 }
-.jgbox .jgcon .jgitem .jgimg{
+
+.jgbox .jgcon .jgitem .jgimg {
   margin-left: auto;
   margin-right: auto;
   text-align: center;
 }
-.jgbox .jgcon .jgitem span{
+
+.jgbox .jgcon .jgitem span {
   display: block;
   text-align: center;
   height: 1.8rem;
   line-height: 1.8rem;
 }
-.jgbox .jgcon .jgitem .jgival{
+
+.jgbox .jgcon .jgitem .jgival {
   font-size: 1.06rem;
 }
-.jgbox .jgcon .jgitem .jgdesc{
+
+.jgbox .jgcon .jgitem .jgdesc {
   color: #666;
   font-size: 0.8rem;
 }
+
 /* 进馆人数统计 */
 .gcins {
   margin-top: 1.6rem;
@@ -135,18 +148,31 @@
   background-image: url("../assets/tyc_tbg.png");
   background-position: 0 0;
   background-repeat: no-repeat;
-  background-size: 100%;
+  background-size: 100% 100%;
   height: 1.8rem;
   line-height: 1.8rem;
   padding-left: 2.02rem;
 }
 
-/* 进馆人数 */
-.incbox{
-  margin-top: 1.2rem;
-  background: url("../assets/tyc_bhd.png") no-repeat 0 center;
-  background-size: 100%;
-  height: 8rem;
+/* 各场馆人数趋势 */
+.gcgrs {
+    margin-top: 1.06rem;
+}
+
+.gcgrs .gcgrs_title {
+    background-image: url("../assets/wh_tbg.png");
+    background-position: 0 0;
+    background-repeat: no-repeat;
+    background-size: 100%;
+    height: 1.8rem;
+    line-height: 1.8rem;
+    padding-left: 2.02rem;
+}
+
+.gcgrs .gcgrs_charts {
+    margin-top: 2rem;
+    width: 100%;
+    height: 17rem;
 }
 </style>
 <script>
@@ -159,7 +185,10 @@ export default {
     }
   },
   mounted() {
+    // 进馆人数统计
     this.cgsf_line()
+    // 各场馆人数趋势
+    this.cg_line()
   },
   methods: {
     // 山峰图
@@ -292,6 +321,151 @@ export default {
 
       option && myChart.setOption(option);
     },
+    // 场馆人流趋势
+    cg_line(){
+      var chartDom = document.getElementById("gc_charts");
+            var myChart = echarts.init(chartDom);
+
+            var option
+            var xData = ['09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00',];
+            var color = ['#FF99CC', '#6666FF', '#FF6600', '#7049f0', '#fa704d', '#01babc',]
+            var name = ['体育场', '体育馆', '游泳场馆']
+            var data = [
+                [137, 34, 135, 161, 74, 152, 110, 100, 150],
+                [174, 137, 135, 34, 152, 135, 140, 160, 100],
+                [134, 74, 137, 135, 161, 137, 300, 220, 250],
+            ]
+
+            var series = [];
+            for (var i = 0; i < 6; i++) {
+                series.push({
+                    name: name[i],
+                    type: "line",
+                    symbolSize: 3,//标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10[ default: 4 ]
+                    symbol: 'circle',//标记的图形。ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
+                    smooth: true, //是否平滑曲线显示
+                    showSymbol: false, //是否显示 symbol, 如果 false 则只有在 tooltip hover 的时候显示
+                    areaStyle: {
+                        normal: {
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                                offset: 0,
+                                color: color[i]
+                            }, {
+                                offset: 0.8,
+                                color: 'rgba(255,255,255,0)'
+                            }], false),
+                            // shadowColor: 'rgba(255,255,255, 0.1)',
+                            shadowBlur: 10,
+                            opacity: 0.3,
+                        }
+                    },
+                    itemStyle: {
+                        normal: {
+                            color: color[i],
+                            lineStyle: {
+                                width: 1,
+                                type: 'solid' //'dotted'虚线 'solid'实线
+                            },
+                            borderColor: color[i], //图形的描边颜色。支持的格式同 color
+                            borderWidth: 8,//描边线宽。为 0 时无描边。[ default: 0 ] 
+                            barBorderRadius: 0,
+                            label: {
+                                show: false,
+                            },
+                            opacity: 0.5,
+                        }
+                    },
+                    data: data[i],
+
+                })
+            }
+            option = {
+                // backgroundColor: "#141f56",
+                legend: {
+                    bottom: 20,
+                    itemGap: 15,
+                    itemWidth: 15,
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: '14'
+                    },
+                    data: name
+                },
+                title: {
+                    // text: "负面言论分领域趋势",
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: '22',
+                        fontWeight: 'normal',
+                    },
+                    subtextStyle: {
+                        color: '#90979c',
+                        fontSize: '16',
+
+                    },
+                },
+                grid: {
+                    borderWidth: 0,
+                    top: 240,
+                    bottom: 240,
+                    textStyle: {
+                        color: "#fff"
+                    }
+                },
+                xAxis: [{
+                    type: "category",
+                    axisLine: {
+                        show: false,
+                    },
+                    splitLine: {
+                        show: false,
+                    },
+                    boundaryGap: false, //坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样
+                    axisTick: {
+                        show: false
+                    },
+                    splitArea: {
+                        show: false
+                    },
+                    axisLabel: {
+                        inside: false,
+                        textStyle: {
+                            color: '#FFFFFF',
+                            fontWeight: 'normal',
+                            fontSize: '12',
+                        },
+                    },
+                    data: xData,
+                }],
+                yAxis: {
+                    type: 'value',
+                    axisTick: {
+                        show: false
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    splitLine: {
+                        show: true,
+                        lineStyle: {
+                            color: '#32346c ',
+                        }
+                    },
+                    axisLabel: {
+                        textStyle: {
+                            color: '#0095FF',
+                            fontWeight: 'normal',
+                            fontSize: '12',
+                        },
+                        formatter: '{value}',
+                    },
+                },
+                series: series,
+            }
+
+            option && myChart.setOption(option);
+    },
+
   },
 }
 </script>
\ No newline at end of file