feat: add chart-bar to analysis page

lbwa · Sep 24, 2018 · 3af3224 · 3af3224
1 parent a9c200a
commit 3af3224
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 13 deletions.
diff --git a/mock/analysis.js b/mock/analysis.js
@@ -23,7 +23,7 @@ export const visitors = {
 
 export const payments = {
   total: 6560,
-  chart: [],
+  chart: visitorData, // simulate fake datasets
   rate: 0.6
 }
 

diff --git a/mock/chart.js b/mock/chart.js
@@ -2,12 +2,12 @@ import dayjs from 'dayjs'
 
 const visitorData = []
 const beginDay = new Date().getTime()
-const fakeDailyVisitor = [7, 5, 4, 2, 4, 7, 5, 6, 5, 9, 6, 3, 1, 5, 3, 6, 5]
+const fakeY = [7, 5, 4, 2, 4, 7, 5, 6, 5, 9, 6, 3, 1, 5, 3, 6, 5]
 
-for (let i = 0; i < fakeDailyVisitor.length; i++) {
+for (let i = 0; i < fakeY.length; i++) {
   visitorData.push({
     date: dayjs(new Date(beginDay + 1000 * 60 * 60 * 24 * i)).format('YYYY-MM-DD'),
-    visitors: fakeDailyVisitor[i]
+    visitors: fakeY[i]
   })
 }
 

diff --git a/src/components/ChartLine.js b/src/components/ChartLine.js
@@ -58,7 +58,7 @@ export default {
       // 需要在极其精确的 hover 状态下才能触发 dot 样式
       elements: {
         point: {
-          radius: 0,
+          radius: 1,
           hoverRadius: 4
         }
       },

diff --git a/src/view/Analysis/index.vue b/src/view/Analysis/index.vue
@@ -30,8 +30,8 @@
                 responsive: true,
                 maintainAspectRatio: false // 保持长宽比
               }"
-              :labels="visitorData.labels"
-              :datasets="visitorData.datasets"
+              :labels="visitorsData.labels"
+              :datasets="visitorsData.datasets"
             ></chart-line>
           </main>
         </chart-card>
@@ -44,7 +44,17 @@
           :footerTitle="'转化率'"
           :footerDetail="percentValue(payments.rate)"
         >
-          <main class="placeholder__layout">card body</main>
+          <main class="placeholder__layout">
+            <chart-bar
+              class="chart__layout"
+              :options="{
+                responsive: true,
+                maintainAspectRatio: false
+              }"
+              :labels="paymentsData.labels"
+              :datasets="paymentsData.datasets"
+            ></chart-bar>
+          </main>
         </chart-card>
       </el-col>
 
@@ -77,10 +87,11 @@
 <script>
 import ChartCard from 'COMPONENTS/ChartCard'
 import ChartLine from 'COMPONENTS/ChartLine'
+import ChartBar from 'COMPONENTS/ChartBar'
 import MiniProgress from 'COMPONENTS/MiniProgress'
 import Trend from 'COMPONENTS/Trend'
 import { mapState, mapActions } from 'vuex'
-import { formatVisitorData } from './utils'
+import { formatData } from './utils'
 import {
   formatPrice,
   decimalNumber
@@ -91,8 +102,11 @@ import { sales, visitors, payments, operations } from 'MOCK/analysis'
 
 export default {
   computed: {
-    visitorData () {
-      return formatVisitorData(this.visitors.chart)
+    visitorsData () {
+      return formatData(this.visitors.chart)
+    },
+    paymentsData () {
+      return formatData(this.payments.chart)
     },
     ...mapState([
       'sales',
@@ -137,6 +151,7 @@ export default {
     Trend,
     ChartCard,
     ChartLine,
+    ChartBar,
     MiniProgress
   }
 }

diff --git a/src/view/Analysis/utils.js b/src/view/Analysis/utils.js
@@ -1,7 +1,7 @@
-export function formatVisitorData (visitorsData) {
+export function formatData (set) {
   const labels = []
   const datasets = []
-  for (const daily of visitorsData) {
+  for (const daily of set) {
     labels.push(daily.date)
     datasets.push(daily.visitors)
   }