我的u币样式修改

src/views/ucurrency/Index.vue

@@ -2,7 +2,6 @@
   <div class="u-currency">
     <div class="myubi">
       <div class="ubi-hear">
-
         <h6>我的U币:{{uinfo.uCurrency}}</h6><span class="pointer" @click="dialogVisible = true">U币规则
           <i class="el-icon-arrow-right"></i> </span>
         <el-button icon="el-icon-document" @click="exportRecord()">导出记录</el-button>
@@ -10,8 +9,11 @@
       <div style="max-height:600px;overflow-y:auto;padding-right:30px">
         <div class="Ubi-hist">
           <h6>U币历史记录</h6><span>（最多保留近7天的记录）</span>
+          <div v-show="isShowChart" >
             <div style="height:290px;min-width: 350px;" ref="chart"></div>
           </div>
+         
+        </div>
         <div v-if="uCoinRecord.length > 0">
           <div class="my-Recording" v-for="(day, index) in uCoinRecord" :key="index">
             <h3>{{day.dayNmae}}</h3>
@@ -22,7 +24,7 @@
             </div>
           </div>
         </div>
-        <div v-else class="home-no-list">
+        <div v-else class="home-no-list" style="margin-top:150px">
           <img class="img" style="width:76px;height:76px" :src="`${webBaseUrl}/images/homeWu/u-wu.png`" alt=""
             srcset="">
           <p class="text">最近7天你可能太忙了，快开始 努力获得U币吧</p>
@@ -209,6 +211,8 @@
     },
     data() {
       return {
+        chatData:[],
+        isShowChart:false,
         current: {
           percentage: 0
         },
@@ -295,6 +299,16 @@
       this.getRanking();
       this.getLevel();
     },
+    watch:{
+      isShowChart(val) {
+         if(val) {
+          this.initChat(this.chatData);
+         }
+      }
+    },
+    updated() {
+       this.chart.resize();
+    },
     methods: {
 
       handleCommand(e) {
@@ -456,13 +470,16 @@
               })
             }
             let chatData = [];
-
             for (let key in res.result.chatData) {
+              if(res.result.chatData[key] > 0) {
+                 this.isShowChart = true;
+              }
               chatData.push({
                 value: res.result.chatData[key],
                 name: this.getUType(key)
               })
             }
+            this.chatData = chatData;
             this.initChat(chatData);
           }
         })
@@ -479,14 +496,17 @@
 </script>
 <style lang="scss" scoped>
   .u-currency {
-    padding: 10px 18px;
+    padding: 10px 18px;
-     display: flex;
+     display: flex;
+     justify-content: space-between;      
+     overflow-x: auto;
   }
 
   .experience {
     font-size: 16px;
      min-width: 480px;
-     min-width: 480px;
+     font-weight: 600;
+     color: #333333;
   }
 
   .myubi {