体育馆移动端完善2

src/views/HomeView.vue

@@ -260,9 +260,11 @@ export default {
         xAxis: {
           axisLabel: {
             color: '#FFFFFF',
-            fontSize: 12,
+            fontSize: 10,
             interval: 0,
-            // show: false,
+            rotate:45,
+            // show: true,
+            // inside:false
           },
           axisTick: {
             lineStyle: {
@@ -281,8 +283,8 @@ export default {
             },
             show: true,
           },
-          data: this.kltdata,
+          // data: this.kltdata,
-          //data: ['09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '20:00', '21:00', '22:00'],
+          data: ['09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '20:00', '21:00', '22:00'],
           type: 'category',
         },
         yAxis: {
@@ -399,6 +401,21 @@ export default {
             }
           },
         ],
+        tooltip: {
+          show: "true",
+          trigger: 'item',
+          backgroundColor: 'rgba(0,0,0,0.7)', // 背景
+          padding: [8, 10], //内边距
+          textStyle: {
+            color: '#fff'
+          },
+          extraCssText: 'box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);', //添加阴影
+          formatter: function (params) {
+            if (params.seriesName != "") {
+              return params.name + ' : 有 ' + params.value + ' 人';
+            }
+          },
+        },
 
       };
 
@@ -520,7 +537,19 @@ export default {
         })
       }
       option = {
-
+        tooltip: {
+          trigger: "axis",
+          axisPointer: { // 坐标轴指示器，坐标轴触发有效
+            type: 'line', // 默认为直线，可选为：'line' | 'shadow'
+            lineStyle: {
+              color: '#57617B'
+            }
+          },
+          formatter: '{b}<br />{a0}: {c0}<br />{a1}: {c1}<br />{a2}: {c2}<br />{a3}: {c3}<br />{a4}: {c4}<br />{a5}: {c5}',
+          backgroundColor: 'rgba(0,0,0,0.7)', // 背景
+          padding: [8, 10], //内边距
+          extraCssText: 'box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);', //添加阴影
+        },
         grid: {
           borderWidth: 0,
           top: 160,
@@ -849,8 +878,9 @@ export default {
 }
 
 .klqs .klbtn {
-  float: left;
+  float: right;
   margin-left: 1.06rem;
+  margin-right: 1rem;
 }
 
 .klqs .klbtn span {
@@ -964,7 +994,7 @@ export default {
 }
 
 .today_rs .tdrs_title {
-  background-image: url("../assets/img/klqs_bg.png");
+  background-image: url("../assets/img/left_t3_bg.png");
   background-repeat: no-repeat;
   background-size: 100% 100%;
   background-position: 0 0;
@@ -984,7 +1014,7 @@ export default {
 }
 
 .pcgrs .pcgrs_title {
-  background-image: url("../assets/img/klqs_bg.png");
+  background-image: url("../assets/img/left_t2_bg.png");
   background-repeat: no-repeat;
   background-size: 100%;
   height: 3.8rem;
@@ -1023,7 +1053,8 @@ export default {
   width: 69%;
   display: block;
   float: left;
-  text-align: center;
+  text-align: left;
+  margin-left: 2rem;
 }
 
 /* .pcgrs .pcg_item:nth-child(6) .pcval {
@@ -1036,8 +1067,8 @@ export default {
 } */
 
 .pcgrs .pcg_item .pcrate {
-  width: 32%;
+  width: 30%;
-  height: 3.3rem;
+  height: 3.4rem;
   line-height: 3.3rem;
   display: block;
   float: left;
@@ -1045,8 +1076,8 @@ export default {
   margin-top: 3.78rem;
   text-align: center;
   position: absolute;
-  bottom: 3.5rem;
+  bottom: 3.45rem;
-  right: 0.8rem;
+  right: 1.33rem;
   background-image: url('../assets/img/安静.png');
   background-size: 100% 100%;
   background-position: 100% 100%;

src/views/TycView.vue

@@ -173,13 +173,15 @@
   line-height: 1.8rem;
   padding-left: 2.02rem;
 }
+
 /* 各场馆人次占比 */
-.pcgrbox{
+.pcgrbox {
   margin-top: 1.6rem;
   padding-bottom: 4rem;
   height: 8rem;
 }
-.pcgrbox .pcb_title{
+
+.pcgrbox .pcb_title {
   background-image: url("../assets/img/tyc_tbg.png");
   background-position: 0 0;
   background-repeat: no-repeat;
@@ -188,11 +190,13 @@
   line-height: 1.8rem;
   padding-left: 2.02rem;
 }
-.pcgrbox .pcbcon{
+
+.pcgrbox .pcbcon {
   width: 100%;
   margin-top: 2rem;
 }
-.pcgrbox .pcbcon .pcbitem{
+
+.pcgrbox .pcbcon .pcbitem {
   width: 30%;
   height: 5rem;
   float: left;
@@ -202,13 +206,16 @@
             background-position: 100%, 100%;
             background-repeat: no-repeat; */
 }
-.pcgrbox .pcbcon .pcbitem div{
+
+.pcgrbox .pcbcon .pcbitem div {
   float: left;
 }
-.pcgrbox .pcbcon .pcbitem div:first{
+
+.pcgrbox .pcbcon .pcbitem div:first {
   margin-left: 0;
 }
-.pcgrbox .pcbcon .pcbitem .pcbval{
+
+.pcgrbox .pcbcon .pcbitem .pcbval {
   height: 5rem;
   width: 5rem;
   background-image: url('../assets/img/ty_pcb_val.png');
@@ -219,7 +226,8 @@
   line-height: 5rem;
   text-align: center;
 }
-.pcgrbox .pcbcon .pcbitem .pcbdesc{
+
+.pcgrbox .pcbcon .pcbitem .pcbdesc {
   background-image: url('../assets/img/ty_pcb_desc.png');
   background-position: 0 0;
   background-repeat: no-repeat;
@@ -278,7 +286,15 @@ export default {
       var option;
 
       option = {
-
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          },
+          formatter: function (params) {
+            return params[0].name + "</br>" + params[0].value
+          }
+        },
         grid: {
           left: '3%',
           right: '3%',
@@ -402,7 +418,7 @@ export default {
       option && myChart.setOption(option);
     },
     // 场馆人流趋势
-    cg_line(){
+    cg_line() {
       var chartDom = document.getElementById("gc_charts");
       var myChart = echarts.init(chartDom);
 
@@ -463,7 +479,7 @@ export default {
         // backgroundColor: "#141f56",
         legend: {
           bottom: 0,
-                    right:20,
+          right: 20,
           itemGap: 15,
           itemWidth: 15,
           textStyle: {
@@ -485,6 +501,19 @@ export default {
 
           },
         },
+        tooltip: {
+          trigger: "axis",
+          axisPointer: { // 坐标轴指示器，坐标轴触发有效
+            type: 'line', // 默认为直线，可选为：'line' | 'shadow'
+            lineStyle: {
+              color: '#57617B'
+            }
+          },
+          formatter: '{b}<br />{a0}: {c0}<br />{a1}: {c1}<br />{a2}: {c2}',
+          backgroundColor: 'rgba(0,0,0,0.7)', // 背景
+          padding: [8, 10], //内边距
+          extraCssText: 'box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);', //添加阴影
+        },
         grid: {
           borderWidth: 0,
           top: 240,

src/views/WhView.vue

@@ -312,7 +312,15 @@ export default {
             var option;
 
             option = {
-
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                        type: 'shadow'
+                    },
+                    formatter: function (params) {
+                        return params[0].name + "</br>" + params[0].value
+                    }
+                },
                 grid: {
                     left: '3%',
                     right: '3%',
@@ -519,6 +527,19 @@ export default {
 
                     },
                 },
+                tooltip: {
+                    trigger: "axis",
+                    axisPointer: { // 坐标轴指示器，坐标轴触发有效
+                        type: 'line', // 默认为直线，可选为：'line' | 'shadow'
+                        lineStyle: {
+                            color: '#57617B'
+                        }
+                    },
+                    formatter: '{b}<br />{a0}: {c0}<br />{a1}: {c1}<br />{a2}: {c2}',
+                    backgroundColor: 'rgba(0,0,0,0.7)', // 背景
+                    padding: [8, 10], //内边距
+                    extraCssText: 'box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);', //添加阴影
+                },
                 grid: {
                     borderWidth: 0,
                     top: 240,