修改充值视图标题显示

src/containers/Dashboard/CampusRank/CampusRank.vue

@@ -30,7 +30,9 @@
     <CampusRankChart
       :data="campusRankList"
       :changeCampusHandle="changeCampusHandle"
+      :updateCampusName="updateCampusName"
     />
+    <div class="SeviceRatio-title">{{areaName}}</div>
   </div>
 </template>
 
@@ -42,15 +44,16 @@ export default {
   name: 'CampusRank',
   components: { CampusRankChart },
   computed: {
-    ...mapGetters('Dashboard', ['campusRankList', 'filters']),
+    ...mapGetters('Dashboard', ['campusRankList', 'filters', 'areaName']),
   },
   methods: {
     ...mapActions('Dashboard', ['fetchConsumeList', 'updateCampusName']),
     changeCampusHandle(data) {
-      this.updateCampusName(data.areaName);
       this.fetchConsumeList({
         areaId: data.areaId,
         updatePercentList: true,
+      }).then(() => {
+        this.updateCampusName(data.areaName);
       });
     },
   },

src/containers/Dashboard/CampusRank/CampusRankChart.vue

@@ -22,9 +22,8 @@ export default {
   name: 'CampusRankChart',
   mixins: [chartMixin],
   props: {
-    changeCampusHandle: {
-      type: Function,
-    },
+    changeCampusHandle: { type: Function },
+    updateCampusName: { type: Function },
   },
   data() {
     let total = this.data.reduce((count, item) => count + item.count, 0);
@@ -81,7 +80,6 @@ export default {
         position: ['50%', '50%'],
         html: `<div style="color:#333;font-size: 20px;text-align: center;width: 4em;">
             <span class="CampusRank-percent">0.00</span>%<br>
-            <span class="CampusRank-areaName" style="font-size:16px;"></span>
           </div>`,
         alignX: 'middle',
         alignY: 'middle',
@@ -103,6 +101,7 @@ export default {
 
         this.chartGeom.setSelected(this.data[0]);
         this.changeSelected(this.data[0]);
+        this.updateCampusName(this.data[0].areaName);
         this.SelectedDataIndex = this.data[0];
       }
     },

src/containers/Dashboard/CustomerRecharge/chart.vue

@@ -142,7 +142,7 @@ export default {
         label: {
           offsetX: -80,
           htmlTemplate(text, item, index) {
-            return `<div style="width: 85px">${text}</div>`;
+            return `<div class="CustomerRechargeChart-areaTitle">${text}</div>`;
           },
         },
       });
@@ -272,5 +272,13 @@ export default {
     height: 300px;
     transform: translate(100%, -100%);
   }
+  .CustomerRechargeChart-areaTitle {
+    width: 85px;
+    height: 2em;
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+  }
 }
 </style>

src/containers/Dashboard/SeviceRatio/SeviceRatio.vue

@@ -41,5 +41,8 @@ export default {
   font-size: 16px;
   text-align: center;
   padding-bottom: 12px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
 </style>