体育馆PC端问题处理3

src/views/cultrue/index.vue

@@ -457,6 +457,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 = [];
@@ -492,13 +497,79 @@ export default {
           top: '2%',
           bottom: -15,
           right: -48,
-          left: 30,
+          left: 40,
           containLabel: true
         },
         xAxis: {
           show: false
         },
         yAxis: [{
+          triggerEvent: true,
+          show: true,
+          // inverse: true,
+          // data: getArrByKey(data, 'name'),
+          data: [
+            'Lend', 'Still', 'Accreditation'
+            // '../assets/img/wh_right1.png','../assets/img/wh_right1.png','../assets/img/wh_right1.png'
+          ],
+          axisLine: {
+            show: false
+          },
+          splitLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+          axisLabel: {
+            // show: false,
+            // interval: 0,
+            // color: '#fff',
+            // align: 'left',
+            // margin: 80,
+            fontSize: 12,
+            verticalAlign: 'bottom',
+            // margin: [10, 0, 0, 0],
+            // 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: 40,
+                align: 'center',
+                backgroundColor: {
+                  image: libraryIcons.Accreditation
+                }
+              },
+              Still: {
+                height: 40,
+                align: 'center',
+                backgroundColor: {
+                  image: libraryIcons.Still
+                }
+              },
+              Accreditation: {
+                height: 40,
+                align: 'center',
+                backgroundColor: {
+                  image: libraryIcons.Lend
+                }
+              }
+            }
+          },
+        },
+        {
           triggerEvent: true,
           show: true,
           // inverse: true,
@@ -522,11 +593,6 @@ export default {
             formatter: function (value) {
               return '{title|' + value + '}'
             },
-            rich: {
-              title: {
-                width: 165
-              }
-            }
           },
         }, {
           triggerEvent: true,

src/views/index.vue

@@ -1112,10 +1112,11 @@ export default {
 .centerbox .tygpic {
   clear: both;
   width: 100%;
+  text-align: center;
 }
 
 .centerbox .tygpic img {
-  height: 360px;
+  height: 4.5rem;
   margin: 12% auto;
 }
 

src/views/ty/index.vue

@@ -150,7 +150,7 @@
           </div>
           <!-- 各场馆人流趋势 -->
           <div class="pcgrliu">
-            <span class="pcg_title">各场馆人流趋势</span>
+            <span class="pcg_title2">各场馆人流趋势</span>
             <div id="pcgchart2" style="width: 100%; height: 290px"></div>
           </div>
           <!-- <div class="item"></div> -->
@@ -1673,6 +1673,17 @@ export default {
         color: #fff;
         font-size: 16px;
       }
+      .pcg_title2 {
+        display: block;
+        height: 0.78rem;
+        line-height: 0.58rem;
+        background: url('../../assets/ty/右2-1.png') no-repeat;
+        background-size: 100% 100%;
+        background-position: 0 center;
+        padding-left: 0.98rem;
+        color: #fff;
+        font-size: 16px;
+      }
     }
 
   }