feat: chart layout in analysis tab

lbwa · Sep 24, 2018 · 7300d95 · 7300d95
1 parent 971cd13
commit 7300d95
Show file tree

Hide file tree

Showing 3 changed files with 85 additions and 18 deletions.
diff --git a/mock/chart.js b/mock/chart.js
@@ -15,7 +15,7 @@ const randomData = []
 for (let i = 0; i < 12; i++) {
   randomData.push({
     month: `${i + 1}月`,
-    totalSales: Math.floor(Math.random() * 1000) + 200
+    total: Math.floor(Math.random() * 1000) + 200
   })
 }
 

diff --git a/src/components/AnalysisTab.vue b/src/components/AnalysisTab.vue
@@ -1,12 +1,50 @@
 <template>
   <el-tabs class="analysis__tab" v-model="activeTab">
     <el-tab-pane label="销售量" name="totalSales">
-      <chart-bar
-        :labels="formatData.labels"
-        :datasets="formatData.datasets"
-      ></chart-bar>
+      <el-row>
+        <el-col
+          :xs="24" :sm="24" :md="12" :lg="18" :xl="18"
+          class="tab__chart"
+        >
+          <h4 class="chart__title">销售趋势</h4>
+          <chart-bar
+            class="chart__body"
+            :labels="formatData.labels"
+            :datasets="formatData.datasets"
+            :options="chartOptions"
+          ></chart-bar>
+        </el-col>
+        <el-col
+          :xs="24" :sm="24" :md="12" :lg="6" :xl="6"
+          class="tab__rank"
+        >
+          <h4 class="rank__title">门店销售额排名</h4>
+        </el-col>
+      </el-row>
+    </el-tab-pane>
+
+    <el-tab-pane label="访问量" name="totalVisitors">
+      <el-row>
+        <el-col
+          :xs="24" :sm="24" :md="12" :lg="16" :xl="16"
+          class="tab__chart"
+        >
+          <h4 class="chart__title">访问量趋势</h4>
+          <chart-bar
+            class="chart__body"
+            :labels="formatData.labels"
+            :datasets="formatData.datasets"
+            :options="chartOptions"
+          ></chart-bar>
+        </el-col>
+        <el-col
+          :xs="24" :sm="24" :md="12" :lg="8" :xl="8"
+          class="tab__rank"
+        >
+          <h4 class="rank__title">门店访问量排名</h4>
+        </el-col>
+      </el-row>
     </el-tab-pane>
-    <el-tab-pane label="访问量" name="totalVisitors">访问量</el-tab-pane>
   </el-tabs>
 </template>
 
@@ -24,7 +62,20 @@ export default {
 
   data () {
     return {
-      activeTab: 'totalSales'
+      activeTab: 'totalSales',
+      chartOptions: {
+        responsive: true,
+        maintainAspectRatio: false,
+        scales: {
+          xAxes: [{
+            display: true
+          }],
+          yAxes: [{
+            display: true
+          }]
+        }
+        // scaleShowLabels: false
+      }
     }
   },
 
@@ -35,7 +86,7 @@ export default {
       const chartData = [...this.chartData]
       for (const point of chartData) {
         labels.push(point.month)
-        datasets.push(point.totalSales)
+        datasets.push(point.total)
       }
       return {
         labels,
@@ -55,4 +106,19 @@ export default {
   &__tab
     padding: 16px
     background-color: white
+    font-size: 14px
+
+.chart__title, .rank__title
+  margin-top: 0
+  margin-bottom: 20px
+  color: rgba(0,0,0,.85)
+  font-weight: 500
+
+.chart
+  &__body
+    height: 290px
+
+/deep/ .el-tabs__header
+  margin-bottom: 24px
+
 </style>
diff --git a/src/view/Analysis/index.vue b/src/view/Analysis/index.vue
@@ -1,7 +1,7 @@
 <template>
   <el-main>
-    <el-row class="analysis__header__gutter" type="flex" :gutter="24">
-      <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
+    <el-row :gutter="24">
+      <el-col class="card__gutter__bottom" :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
         <chart-card
           cardHeader="销售总额"
           :cardTotal="formatPrice(sales.total)"
@@ -16,7 +16,7 @@
         </chart-card>
       </el-col>
 
-      <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
+      <el-col class="card__gutter__bottom" :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
         <chart-card
           cardHeader="访问量"
           :cardTotal="visitors.total"
@@ -37,7 +37,7 @@
         </chart-card>
       </el-col>
 
-      <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
+      <el-col class="card__gutter__bottom" :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
         <chart-card
           cardHeader="支付笔数"
           :cardTotal="payments.total"
@@ -58,7 +58,7 @@
         </chart-card>
       </el-col>
 
-      <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
+      <el-col class="card__gutter__bottom" :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
         <chart-card
           cardHeader="运营活动效果"
           :cardTotal="percentValue(operations.influence)"
@@ -209,12 +209,13 @@ export default {
   bottom: 0
   right: 0
 
-.card__footer__no-wrap
-  white-space: nowrap
-  overflow: hidden
+.card
+  &__footer__no-wrap
+    white-space: nowrap
+    overflow: hidden
 
-.analysis__header__gutter
-  margin-bottom: 24px
+  &__gutter__bottom
+    margin-bottom: 24px
 
 // reset
 /deep/ .el-progress-bar