体育馆移动端完善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;
@@ -236,23 +244,23 @@
 
 /* 各场馆人数趋势 */
 .gcgrs {
-    margin-top: 1.06rem;
+  margin-top: 1.06rem;
 }
 
 .gcgrs .gcgrs_title {
-    background-image: url("../assets/img/wh_tbg.png");
+  background-image: url("../assets/img/wh_tbg.png");
-    background-position: 0 0;
+  background-position: 0 0;
-    background-repeat: no-repeat;
+  background-repeat: no-repeat;
-    background-size: 100% 100%;
+  background-size: 100% 100%;
-    height: 1.8rem;
+  height: 1.8rem;
-    line-height: 1.4rem;
+  line-height: 1.4rem;
-    padding-left: 2.02rem;
+  padding-left: 2.02rem;
 }
 
 .gcgrs .gcgrs_charts {
-    margin-top: 2rem;
+  margin-top: 2rem;
-    width: 100%;
+  width: 100%;
-    height: 19rem;
+  height: 19rem;
 }
 </style>
 <script>
@@ -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,149 +418,162 @@ export default {
       option && myChart.setOption(option);
     },
     // 场馆人流趋势
-    cg_line(){
+    cg_line() {
       var chartDom = document.getElementById("gc_charts");
-            var myChart = echarts.init(chartDom);
+      var myChart = echarts.init(chartDom);
-
+
-            var option
+      var option
-            var xData = ['09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00',];
+      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 color = ['#FF99CC', '#6666FF', '#FF6600', '#7049f0', '#fa704d', '#01babc',]
-            var name = ['体育场', '体育馆', '游泳场馆']
+      var name = ['体育场', '体育馆', '游泳场馆']
-            var data = [
+      var data = [
-                [137, 34, 135, 161, 74, 152, 110, 100, 150],
+        [137, 34, 135, 161, 74, 152, 110, 100, 150],
-                [174, 137, 135, 34, 152, 135, 140, 160, 100],
+        [174, 137, 135, 34, 152, 135, 140, 160, 100],
-                [134, 74, 137, 135, 161, 137, 300, 220, 250],
+        [134, 74, 137, 135, 161, 137, 300, 220, 250],
-            ]
+      ]
-
+
-            var series = [];
+      var series = [];
-            for (var i = 0; i < 6; i++) {
+      for (var i = 0; i < 6; i++) {
-                series.push({
+        series.push({
-                    name: name[i],
+          name: name[i],
-                    type: "line",
+          type: "line",
-                    symbolSize: 3,//标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10[ default: 4 ]
+          symbolSize: 3,//标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10[ default: 4 ]
-                    symbol: 'circle',//标记的图形。ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
+          symbol: 'circle',//标记的图形。ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
-                    smooth: true, //是否平滑曲线显示
+          smooth: true, //是否平滑曲线显示
-                    showSymbol: false, //是否显示 symbol, 如果 false 则只有在 tooltip hover 的时候显示
+          showSymbol: false, //是否显示 symbol, 如果 false 则只有在 tooltip hover 的时候显示
-                    areaStyle: {
+          areaStyle: {
-                        normal: {
+            normal: {
-                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-                                offset: 0,
+                offset: 0,
-                                color: color[i]
+                color: color[i]
-                            }, {
+              }, {
-                                offset: 0.8,
+                offset: 0.8,
-                                color: 'rgba(255,255,255,0)'
+                color: 'rgba(255,255,255,0)'
-                            }], false),
+              }], false),
-                            // shadowColor: 'rgba(255,255,255, 0.1)',
+              // shadowColor: 'rgba(255,255,255, 0.1)',
-                            shadowBlur: 10,
+              shadowBlur: 10,
-                            opacity: 0.3,
+              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",
+          itemStyle: {
-                legend: {
+            normal: {
-                    bottom: 0,
+              color: color[i],
-                    right:20,
+              lineStyle: {
-                    itemGap: 15,
+                width: 1,
-                    itemWidth: 15,
+                type: 'solid' //'dotted'虚线 'solid'实线
-                    textStyle: {
+              },
-                        color: '#fff',
+              borderColor: color[i], //图形的描边颜色。支持的格式同 color
-                        fontSize: '14'
+              borderWidth: 8,//描边线宽。为 0 时无描边。[ default: 0 ] 
-                    },
+              barBorderRadius: 0,
-                    data: name
+              label: {
-                },
+                show: false,
-                title: {
+              },
-                    // text: "负面言论分领域趋势",
+              opacity: 0.5,
-                    textStyle: {
+            }
-                        color: '#fff',
+          },
-                        fontSize: '22',
+          data: data[i],
-                        fontWeight: 'normal',
+
-                    },
+        })
-                    subtextStyle: {
+      }
-                        color: '#90979c',
+      option = {
-                        fontSize: '16',
+        // backgroundColor: "#141f56",
-
+        legend: {
-                    },
+          bottom: 0,
-                },
+          right: 20,
-                grid: {
+          itemGap: 15,
-                    borderWidth: 0,
+          itemWidth: 15,
-                    top: 240,
+          textStyle: {
-                    bottom: 240,
+            color: '#fff',
-                    textStyle: {
+            fontSize: '14'
-                        color: "#fff"
+          },
-                    }
+          data: name
-                },
+        },
-                xAxis: [{
+        title: {
-                    type: "category",
+          // text: "负面言论分领域趋势",
-                    axisLine: {
+          textStyle: {
-                        show: false,
+            color: '#fff',
-                    },
+            fontSize: '22',
-                    splitLine: {
+            fontWeight: 'normal',
-                        show: false,
+          },
-                    },
+          subtextStyle: {
-                    boundaryGap: false, //坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样
+            color: '#90979c',
-                    axisTick: {
+            fontSize: '16',
-                        show: false
+
-                    },
+          },
-                    splitArea: {
+        },
-                        show: false
+        tooltip: {
-                    },
+          trigger: "axis",
-                    axisLabel: {
+          axisPointer: { // 坐标轴指示器，坐标轴触发有效
-                        inside: false,
+            type: 'line', // 默认为直线，可选为：'line' | 'shadow'
-                        textStyle: {
+            lineStyle: {
-                            color: '#FFFFFF',
+              color: '#57617B'
-                            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,
             }
+          },
+          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,
+          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);
+      option && myChart.setOption(option);
     },
 
   },

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,