体育馆移动端完善4

src/App.vue

@@ -2,9 +2,9 @@
   <router-view />
   <nav class="navbar">
     <!-- &nbsp;&nbsp; -->
-    <router-link class="narRouter" to="/ty" active-class='ative'>体育</router-link>
+    <router-link class="narRouter" to="/ty">体育</router-link>
-    <router-link class="narRouter" to="/" active-class='ative'>总览</router-link>
+    <router-link class="narRouter" to="/">总览</router-link>
-    <router-link class="narRouter" to="/wh" active-class='ative'>文化</router-link>
+    <router-link class="narRouter" to="/wh">文化</router-link>
   </nav>
 </template>
 
@@ -21,28 +21,52 @@
   z-index: 90;
 }
 
-/* .navbar a.router-link-exact-active {
+.navbar a.router-link-exact-active {
 
-  background-color: #2132fa;
+  /* background-color: #2132fa;
   padding-bottom: 10px;
+  background-image: linear-gradient(#2132fa, #1d37fb); */
+  width: 100px;
+  /* text-align: center; */
+  line-height: 44px;
+  /* background-color: #2132fa; */
   background-image: linear-gradient(#2132fa, #1d37fb);
-} */
+  background-repeat: no-repeat;
+  background-size: 50% 70%;
+  background-position: 50% 50%;
+  box-sizing: border-box;
+  padding: 0 0.9rem;
+
+}
 
 .navbar a {
   display: block;
   float: left;
-  width: 33.33%;
+  width: 33.33% !important;
   text-align: center;
   line-height: 44px;
   background-color: #0c2151;
 }
 
-.ative {
+/* .navbar .narRouter {
-  width: 100px !important;
+  display: block;
+  float: left;
+  width: 33.33% !important;
   text-align: center;
   line-height: 44px;
-  /* background-color: #2132fa; */
+  background-color: #0c2151;
+
+} */
+
+/* .navbar .ative {
+  width: 100px;
+  line-height: 44px;
   background-image: linear-gradient(#2132fa, #1d37fb);
-  /* background-size: 50% 50%; */
+  background-repeat: no-repeat;
-}
+  background-size: 50% 70%;
+  background-position: 50% 50%;
+  box-sizing: border-box;
+  padding: 0 0.9rem;
+
+} */
 </style>

src/views/HomeView.vue

@@ -61,12 +61,12 @@
           <li>
             <span>体育馆</span>
             <span>12%</span>
-            <span><img src="../assets/img/tyc_icon.png" /></span>
+            <span><img src="../assets/img/tyg_icon.png" /></span>
           </li>
           <li>
             <span>游泳场馆</span>
             <span>12%</span>
-            <span><img src="../assets/img/tyc_icon.png" /></span>
+            <span><img src="../assets/img/yyg_icon.png" /></span>
           </li>
         </ul>
       </div>
@@ -76,17 +76,17 @@
       <div class="cglist cgright">
         <ul>
           <li>
-            <span><img src="../assets/img/tyc_icon.png" /></span>
+            <span><img src="../assets/img/tsg_icon.png" /></span>
             <span>20%</span>
             <span>图书馆</span>
           </li>
           <li>
-            <span><img src="../assets/img/tyc_icon.png" /></span>
+            <span><img src="../assets/img/whg_icon.png" /></span>
             <span>12%</span>
             <span>文化馆</span>
           </li>
           <li>
-            <span><img src="../assets/img/tyc_icon.png" /></span>
+            <span><img src="../assets/img/bwg_icon.png" /></span>
             <span>12%</span>
             <span>博物馆</span>
           </li>
@@ -107,10 +107,12 @@
     <div class="pcgrs">
       <div class="pcgrs_title">各场馆实时进馆人数</div>
       <!-- 場館實時 -->
-      <div class="pcg_item"  v-for="item in ssjgNumDatas" :key="item.groupId">
+      <div class="pcg_item" v-for="item in ssjgNumDatas" :key="item.groupId">
         <span class="pcpos">体育场</span>
         <p class="pcval">{{ item.allEnter }}</p>
-        <span class="pcrate"  :class="[{pcrate2: parseInt(item.proportion) >= 80 && parseInt(item.proportion) < 90},{pcrate3: parseInt(item.proportion) >= 90 }]">{{ item.proportion }}</span>
+        <span class="pcrate"
+          :class="[{ pcrate2: parseInt(item.proportion) >= 80 && parseInt(item.proportion) < 90 }, { pcrate3: parseInt(item.proportion) >= 90 }]">{{
+            item.proportion }}</span>
       </div>
 
       <!-- <div class="pcg_item">
@@ -174,6 +176,11 @@ export default {
       ssjgNumDatas: []
     }
   },
+  // created() {
+  //   this.$nextTick(() => {
+  //     this.cgchart()
+  //   });
+  // },
   mounted() {
     this.showorders()
     this.cgrs_line()
@@ -262,7 +269,7 @@ export default {
             color: '#FFFFFF',
             fontSize: 10,
             interval: 0,
-            rotate:45,
+            rotate: 45,
             // show: true,
             // inside:false
           },
@@ -425,12 +432,14 @@ export default {
     // 圆饼图
     cgchart() {
       var chartDom = document.getElementById('cgchart');
+
+      chartDom.removeAttribute('_echarts_instance_');
       var myChart = echarts.init(chartDom);
       var option;
 
       option = {
 
-        color: [ "#F2A0CE","#0780e2","#FF6504", "#01FE00","#00FFFF","#fdff00"],
+        color: ["#F2A0CE", "#0780e2", "#FF6504", "#01FE00", "#00FFFF", "#fdff00"],
 
         series: [
           {
@@ -764,7 +773,7 @@ export default {
   width: 100%;
   background-image: url("../assets/img/gymbox_bg.png");
   background-repeat: no-repeat;
-  background-size: 100%;
+  background-size: 100% 100%;
   background-position: 0 0;
   padding-top: 2.26rem;
   height: 20rem;
@@ -775,7 +784,7 @@ export default {
   margin-left: auto;
   margin-right: auto;
   padding-top: 0rem;
-  height: 12.68rem;
+  /* height: 12.68rem; */
   width: 100%;
 }
 
@@ -783,19 +792,19 @@ export default {
   width: 90%;
   margin-left: auto;
   margin-right: auto;
-  margin-top: 1rem;
+  /* margin-top: 1rem; */
   display: block;
-  padding-top: 0.2rem;
+  /* padding-top: 0.2rem; */
   height: 16rem;
 }
 
 .gymbox .gymnum {
   width: 100%;
-  margin: 0.6rem auto;
+  /* margin: 0.6rem auto; */
   text-align: center;
   height: 3rem;
   position: absolute;
-  bottom: 0.66rem;
+  bottom: 2rem;
   /* padding-top: 0.7rem; */
 }
 
@@ -821,7 +830,7 @@ export default {
   width: 100%;
   height: 4rem;
   line-height: 1.2;
-  margin-top: 2.6rem;
+  margin-top: 0.6rem;
 }
 
 .numbox .numicon {
@@ -866,7 +875,7 @@ export default {
 
 /** 客流趋势 */
 .klqs {
-  margin-top: 3rem;
+  margin-top: 2rem;
   background-image: url("../assets/img/klqs_bg.png");
   background-repeat: no-repeat;
   background-size: 100%;
@@ -1035,22 +1044,25 @@ export default {
 .pcgrs .pcg_item {
   margin-top: 0.4rem;
   background-image: url("../assets/img/pcg_bg.png");
+  background-size: 100% 100%;
   background-repeat: no-repeat;
-  height: 12rem;
+  /* height: 12rem; */
   width: 48%;
   float: left;
   margin-left: 2%;
   position: relative;
+  margin-bottom: 1.6rem;
 }
 
 .pcgrs .pcg_item .pcpos {
   text-align: right;
   font-size: 0.68rem;
   display: block;
-  width: 3.5rem;
+  /* width: 3.5rem; */
   text-align: left;
   float: right;
   margin-top: 1.6rem;
+  margin-right: 1.1rem;
   /* padding-right: 0.9rem; */
 }
 
@@ -1074,17 +1086,17 @@ export default {
 } */
 
 .pcgrs .pcg_item .pcrate {
-  width: 30%;
+  width: 32%;
   height: 3.4rem;
-  line-height: 3.3rem;
+  line-height: 3.4rem;
   display: block;
   float: left;
   font-size: 0.46rem;
   margin-top: 3.78rem;
   text-align: center;
   position: absolute;
-  bottom: 3.45rem;
+  bottom: 0.4rem;
-  right: 1.33rem;
+  right: 0.63rem;
   background-image: url('../assets/img/安静.png');
   background-size: 100% 100%;
   background-position: 100% 100%;

src/views/TycView.vue

@@ -30,7 +30,7 @@
     </div>
     <!-- 进馆人数统计 -->
     <div class="gcins">
-      <div class="gcins_title">进馆人数统计</div>
+      <div class="gcins_title">24小时总进馆人流趋势</div>
       <div id="gcins_charts" style="height:16rem"></div>
     </div>
     <!-- 各场馆人次占比 -->
@@ -91,12 +91,12 @@
 }
 
 .tyclogo .tyname {
-  height: 3rem;
+  height: 2.5rem;
-  line-height: 3rem;
+  line-height: 2.5rem;
   text-align: right;
-  padding-right: 6.06rem;
+  padding-right: 7.3rem;
-  font-size: 2.02rem;
+  font-size: 1.7rem;
-  padding-top: 4.8rem;
+  padding-top: 6.8rem;
 }
 
 .tyclogo .tydesc {
@@ -105,7 +105,7 @@
   font-size: 1.03rem;
   text-align: right;
   padding-right: 1.06rem;
-  color: #999;
+  color: #fff;
 }
 
 /* 总计进馆 */
@@ -232,7 +232,7 @@
   background-position: 0 0;
   background-repeat: no-repeat;
   background-size: 100% 100%;
-  font-size: 0.6rem;
+  font-size: 0.8rem;
   width: 5rem;
   height: 2rem;
   margin-top: 0.42rem;
@@ -544,6 +544,7 @@ export default {
           },
           axisLabel: {
             inside: false,
+            interval: 0,
             textStyle: {
               color: '#FFFFFF',
               fontWeight: 'normal',

src/views/WhView.vue

@@ -233,9 +233,9 @@
     background-image: url("../assets/img/tyc_tbg.png");
     background-position: 0 0;
     background-repeat: no-repeat;
-    background-size: 100%;
+    background-size: 100% 100%;
-    height: 2.4rem;
+    height: 2.2rem;
-    line-height: 1.9rem;
+    line-height: 2.2rem;
     padding-left: 2.02rem;
 }
 
@@ -276,9 +276,9 @@
 }
 
 .tsgbox .tsgc_charts {
-    margin-top: 2rem;
+    /* margin-top: 2rem; */
     width: 100%;
-    height: 16rem;
+    height: 10rem;
 }
 </style>
 <script>
@@ -460,7 +460,7 @@ export default {
             ]
 
             var series = [];
-            for (var i = 0; i < 6; i++) {
+            for (var i = 0; i < 3; i++) {
                 series.push({
                     name: name[i],
                     type: "line",
@@ -506,7 +506,7 @@ export default {
                 // backgroundColor: "#141f56",
                 legend: {
                     top: 0,
-                    right:30,
+                    right: 30,
                     itemGap: 15,
                     itemWidth: 20,
                     itemHeight: 20,
@@ -572,6 +572,7 @@ export default {
                     },
                     axisLabel: {
                         inside: false,
+                        interval: 0,
                         textStyle: {
                             color: '#FFFFFF',
                             fontWeight: 'normal',
@@ -627,6 +628,11 @@ export default {
                 value: 323,
             },
             ];
+            var libraryIcons = {
+                'Lend': '/img/wh_right1.png',
+                'Still': '/img/wh_right2.png',
+                'Accreditation': '/img/wh_right3.png'
+            };
             var getArrByKey = (data, k) => {
                 let key = k || "value";
                 let res = [];
@@ -650,68 +656,156 @@ export default {
 
             console.log(getSymbolData(data));
             option = {
+                // legend: {
+                //     orient: 'vertical',
+                //     top: 0,
+                //     right: 0,
+                //     itemGap: 15,
+                //     itemWidth: 20,
+                //     itemHeight: 20,
+                //     textStyle: {
+                //         color: '#fff',
+                //         fontSize: '14'
+                //     },
+                //     data: [
+                //         { icon: 'image://img/tyc_icon.png' },
+                //         { icon: 'image://img/tyg_icon.png' },
+                //         { icon: 'image://img/yyg_icon.png' },
+                //     ]
+                // },
                 grid: {
-                    top: '2%',
+                    show: false,
-                    bottom: -15,
-                    right: 30,
                     left: 30,
-                    containLabel: true
+                    right: -45,
+                    top: 25,//拉伸距离顶部高度
+                    bottom: 0,//拉伸距离底部高度
+                    containLabel: true,
                 },
                 xAxis: {
                     show: false
                 },
-                yAxis: [{
+                yAxis: [
-                    triggerEvent: true,
+                    {
-                    show: true,
+                        triggerEvent: true,
-                    // inverse: true,
+                        show: true,
-                    data: getArrByKey(data, 'name'),
+                        // inverse: true,
-                    axisLine: {
+                        // data: getArrByKey(data, 'name'),
-                        show: false
+                        data: [
-                    },
+                            'Lend', 'Still', 'Accreditation'
-                    splitLine: {
+                            // '../assets/img/wh_right1.png','../assets/img/wh_right1.png','../assets/img/wh_right1.png'
-                        show: false
+                        ],
-                    },
+                        // max:80,
-                    axisTick: {
+                        axisLine: {
-                        show: false
+                            show: false
-                    },
-                    axisLabel: {
-                        show: false,
-                        interval: 0,
-                        color: '#fff',
-                        align: 'left',
-                        margin: 80,
-                        fontSize: 12,
-                        formatter: function (value) {
-                            return '{title|' + value + '}'
                         },
+                        splitLine: {
+                            show: false
+                        },
+                        axisTick: {
+                            show: false
+                        },
+                        axisLabel: {
+                            // show: false,
+                            type: 'category',
+                            inverse: true, //true正序false倒序
+                            // interval: 0,
+                            // color: '#fff',
+                            // align: 'left',
+                            // margin: 0,
+                            fontSize: 12,
+                            verticalAlign: 'bottom',
+                            // formatter: function (value) {
+                            //     return '{title|' + value + '}'
+                            // },
+                            formatter: function (value) {
+                                //return '{' + value + '| }\n{value|' + value + '}';
+                                return '{' + value + '|}'; //只显示图片icon
+                            },
+
+                            rich: {
+                                // title: {
+                                //     width: 165
+                                // },
+                                value: {
+                                    lineHeight: 30,
+                                    align: 'center'
+                                },
+                                Lend: {
+                                    height: 30,
+                                    align: 'center',
+                                    backgroundColor: {
+                                        image: libraryIcons.Accreditation
+                                    }
+                                },
+                                Still: {
+                                    height: 30,
+                                    align: 'center',
+                                    backgroundColor: {
+                                        image: libraryIcons.Still
+                                    }
+                                },
+                                Accreditation: {
+                                    height: 30,
+                                    align: 'center',
+                                    backgroundColor: {
+                                        image: libraryIcons.Lend
+                                    }
+                                }
+                            }
+                        }
                     },
-                }, {
+                    {
-                    triggerEvent: true,
+                        triggerEvent: true,
-                    show: true,
+                        show: true,
-                    // inverse: true,
+                        // inverse: true,
-                    data: getArrByKey(data, 'name'),
+                        data: getArrByKey(data, 'name'),
-                    axisLine: {
+                        axisLine: {
-                        show: false
+                            show: false
-                    },
-                    splitLine: {
-                        show: false
-                    },
-                    axisTick: {
-                        show: false
-                    },
-                    axisLabel: {
-                        interval: 0,
-                        shadowOffsetX: '-20px',
-                        color: '#fff',
-                        align: 'right',
-                        verticalAlign: 'bottom',
-                        lineHeight: 42,
-                        fontSize: 14,
-                        formatter: function (value, index) {
-                            return data[index].value + ' 册 '
                         },
-                    }
+                        splitLine: {
-                }],
+                            show: false
+                        },
+                        axisTick: {
+                            show: false
+                        },
+                        axisLabel: {
+                            show: false,
+                            interval: 0,
+                            color: '#fff',
+                            align: 'left',
+                            // margin: 80,
+                            fontSize: 12,
+                            formatter: function (value) {
+                                return '{title|' + value + '}'
+                            },
+                        },
+                    }, {
+                        triggerEvent: true,
+                        show: true,
+                        // inverse: true,
+                        data: getArrByKey(data, 'name'),
+                        axisLine: {
+                            show: false
+                        },
+                        splitLine: {
+                            show: false
+                        },
+                        axisTick: {
+                            show: false
+                        },
+                        axisLabel: {
+                            interval: 0,
+                            shadowOffsetX: '-20px',
+                            color: '#fff',
+                            align: 'right',
+                            verticalAlign: 'bottom',
+                            lineHeight: 42,
+                            fontSize: 14,
+                            formatter: function (value, index) {
+                                return data[index].value + ' 册 '
+                            },
+                        }
+                    }],
                 series: [{
                     name: 'XXX',
                     type: 'pictorialBar',
@@ -733,6 +827,7 @@ export default {
                     yAxisIndex: 0,
                     data: data,
                     barWidth: 10,
+                    barGap:20,
                     // align: left,
                     itemStyle: {
                         normal: {