fix: adaptive width problem during chart component initialization;🐛

修复：图表组件初始化时自适应宽度问题；

src/components/card/ChartCard.vue

@@ -1,5 +1,5 @@
 <template>
-  <a-card :body-style="{padding: '20px 24px 8px'}" :bordered="false">
+  <a-card :loading="loading" :body-style="{padding: '20px 24px 8px'}" :bordered="false">
     <div class="chart-card-header">
       <div class="meta">
         <span class="chart-card-title">{{title}}</span>
@@ -23,7 +23,7 @@
 <script>
 export default {
   name: 'ChartCard',
-  props: ['title', 'total']
+  props: ['title', 'total', 'loading']
 }
 </script>
 

src/components/chart/Bar.vue

@@ -1,12 +1,14 @@
 <template>
-  <div >
+  <div class="bar">
     <h4>{{title}}</h4>
-    <v-chart :force-fit="true" height="251" :data="data">
+    <div class="chart">
+      <v-chart :force-fit="true" height="312" :data="data" :padding="[24, 0, 0, 0]">
         <v-tooltip />
         <v-axis />
         <v-bar position="x*y"/>
       </v-chart>
     </div>
+  </div>
 </template>
 
 <script>
@@ -48,6 +50,10 @@ export default {
 }
 </script>
 
-<style scoped>
+<style scoped lang="less">
-
+  .bar{
+    position: relative;
+    .chart{
+    }
+  }
 </style>

src/pages/dashboard/analysis/Analysis.vue

@@ -2,7 +2,7 @@
   <div class="analysis">
     <a-row :gutter="[24, 24]">
       <a-col :sm="24" :md="12" :xl="6">
-        <chart-card :title="$t('totalSales')" total="￥ 189,345">
+        <chart-card :loading="loading" :title="$t('totalSales')" total="￥ 189,345">
           <a-tooltip :title="$t('introduce')" slot="action">
             <a-icon type="info-circle-o" />
           </a-tooltip>
@@ -14,7 +14,7 @@
         </chart-card>
       </a-col>
       <a-col :sm="24" :md="12" :xl="6">
-        <chart-card :title="$t('visits')" total="￥ 189,345">
+        <chart-card :loading="loading" :title="$t('visits')" total="￥ 189,345">
           <a-tooltip :title="$t('introduce')" slot="action">
             <a-icon type="info-circle-o" />
           </a-tooltip>
@@ -25,7 +25,7 @@
         </chart-card>
       </a-col>
       <a-col :sm="24" :md="12" :xl="6">
-        <chart-card :title="$t('payments')" total="￥ 189,345">
+        <chart-card :loading="loading" :title="$t('payments')" total="￥ 189,345">
           <a-tooltip :title="$t('introduce')" slot="action">
             <a-icon type="info-circle-o" />
           </a-tooltip>
@@ -36,7 +36,7 @@
         </chart-card>
       </a-col>
       <a-col :sm="24" :md="12" :xl="6">
-        <chart-card :title="$t('operating')" total="73%">
+        <chart-card :loading="loading" :title="$t('operating')" total="73%">
           <a-tooltip :title="$t('introduce')" slot="action">
             <a-icon type="info-circle-o" />
           </a-tooltip>
@@ -50,7 +50,7 @@
         </chart-card>
       </a-col>
     </a-row>
-    <a-card style="margin-top: 24px" :bordered="false" :body-style="{padding: '24px'}">
+    <a-card :loading="loading" style="margin-top: 24px" :bordered="false" :body-style="{padding: '24px'}">
       <div class="salesCard">
         <a-tabs default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
           <div class="extra-wrap" slot="tabBarExtraContent">
@@ -85,12 +85,12 @@
     </a-card>
     <a-row style="margin: 0 -12px">
       <a-col style="padding: 0 12px" :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
-        <a-card :bordered="false" style="margin-top: 24px" :title="$t('search')">
+        <a-card :loading="loading" :bordered="false" style="margin-top: 24px" :title="$t('search')">
           <hot-search />
         </a-card>
       </a-col>
       <a-col style="padding: 0 12px" :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
-        <a-card :bordered="false" style="margin-top: 24px;" :title="$t('proportion')">
+        <a-card :loading="loading" :bordered="false" style="margin-top: 24px;" :title="$t('proportion')">
           <sales-data />
           <a-radio-group slot="extra" style="margin: -12px 0">
             <a-radio-button value="a">{{$t('all')}}</a-radio-button>
@@ -128,9 +128,13 @@ export default {
   i18n: require('./i18n'),
   data () {
     return {
-      rankList
+      rankList,
+      loading: true
     }
   },
+  created() {
+    setTimeout(() => this.loading = !this.loading, 500)
+  },
   components: {Trend, SalesData, HotSearch, RankingList, Bar, MiniProgress, MiniBar, MiniArea, ChartCard}
 }
 </script>

src/pages/dashboard/workplace/WorkPlace.vue

@@ -55,7 +55,7 @@
               <a-button size="small" type="primary" ghost icon="plus">{{$t('add')}}</a-button>
             </div>
           </a-card>
-          <a-card :title="`XX ${$t('degree')}`" style="margin-bottom: 24px" :bordered="false" :body-style="{padding: 0}">
+          <a-card :loading="loading" :title="`XX ${$t('degree')}`" style="margin-bottom: 24px" :bordered="false" :body-style="{padding: 0}">
             <div style="min-height: 400px;">
               <radar />
             </div>
@@ -93,7 +93,7 @@ export default {
       projects: [],
       loading: true,
       activities: [],
-      teams: []
+      teams: [],
     }
   },
   created() {