首页添加图表展示

package-lock.json

@@ -2860,6 +2860,29 @@
         "jsbn": "0.1.1"
       }
     },
+    "echarts": {
+      "version": "4.2.0-rc.2",
+      "resolved": "https://registry.npmjs.org/echarts/-/echarts-4.2.0-rc.2.tgz",
+      "integrity": "sha512-5Y4Kyi4eNsRM9Cnl7Q8C6PFVjznBJv1VIiMm/VSQ9zyqeo+ce1695GqUd9v4zfVx+Ow1gnwMJX67h0FNvarScw==",
+      "requires": {
+        "zrender": "4.0.5"
+      }
+    },
+    "echarts-amap": {
+      "version": "1.0.0-rc.6",
+      "resolved": "https://registry.npmjs.org/echarts-amap/-/echarts-amap-1.0.0-rc.6.tgz",
+      "integrity": "sha1-V4KnTa7lLtRM4/j2JXdWF4PwnhY="
+    },
+    "echarts-liquidfill": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/echarts-liquidfill/-/echarts-liquidfill-2.0.3.tgz",
+      "integrity": "sha512-pnTkLQNsiCU07jBbgXxzseNjGKcntifDeSMMjSwWzsjT6OxFjplecBAwQc5ZOwZYZXoMimmrZb2W5b21uoDmJw=="
+    },
+    "echarts-wordcloud": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/echarts-wordcloud/-/echarts-wordcloud-1.1.3.tgz",
+      "integrity": "sha512-Et8D5xEAoYkidmHun+hEH+2lF9dhCt6D0JJ390vlr2r/1zwhhZAbcL01CEvG93QcMcJpSvSPK8vRiGkTbMHRxg=="
+    },
     "ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -6425,6 +6448,11 @@
       "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=",
       "dev": true
     },
+    "numerify": {
+      "version": "1.2.9",
+      "resolved": "https://registry.npmjs.org/numerify/-/numerify-1.2.9.tgz",
+      "integrity": "sha512-X4QzQiytV5ZN3TVLhzbtFzjTarUNnaa1pgNDFqt7u7Nqhxe7FvY2eYrGt4WYHlYXDqgtfC/n/a5nJ2y0LijV8w=="
+    },
     "oauth-sign": {
       "version": "0.8.2",
       "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.8.2.tgz",
@@ -11386,6 +11414,11 @@
       "integrity": "sha1-ihagXURWV6Oupe7MWxKk+lN5dyw=",
       "dev": true
     },
+    "utils-lite": {
+      "version": "0.1.10",
+      "resolved": "https://registry.npmjs.org/utils-lite/-/utils-lite-0.1.10.tgz",
+      "integrity": "sha512-jlHvdtI8MyWURF/3u+ufIjf1Cs5WjN6WZl9qO8dEkZsVjaI7X5YMUhaCFzkvB69ljt6fo4Dd7V/Oj2NJOFDFOQ=="
+    },
     "utils-merge": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
@@ -11398,6 +11431,18 @@
       "integrity": "sha512-jZnMwlb9Iku/O3smGWvZhauCf6cvvpKi4BKRiliS3cxnI+Gz9j5MEpTz2UFuXiKPJocb7gnsLHwiS05ige5BEA==",
       "dev": true
     },
+    "v-charts": {
+      "version": "1.19.0",
+      "resolved": "https://registry.npmjs.org/v-charts/-/v-charts-1.19.0.tgz",
+      "integrity": "sha512-vm2HBUmxAsXK0ivwce9LytcpqrItDA5JSPLYVxZXtiuoyhcn80XX1/3dPJd/1GqG1OYv3jfBo1s9ra4q8GowqA==",
+      "requires": {
+        "echarts-amap": "1.0.0-rc.6",
+        "echarts-liquidfill": "2.0.3",
+        "echarts-wordcloud": "1.1.3",
+        "numerify": "1.2.9",
+        "utils-lite": "0.1.10"
+      }
+    },
     "v-distpicker": {
       "version": "1.0.20",
       "resolved": "https://registry.npmjs.org/v-distpicker/-/v-distpicker-1.0.20.tgz",
@@ -12165,6 +12210,11 @@
           "dev": true
         }
       }
+    },
+    "zrender": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/zrender/-/zrender-4.0.5.tgz",
+      "integrity": "sha512-SintgipGEJPT9Sz2ABRoE4ZD7Yzy7oR7j7KP6H+C9FlbHWnLUfGVK7E8UV27pGwlxAMB0EsnrqhXx5XjAfv/KA=="
     }
   }
 }

package.json

@@ -11,10 +11,12 @@
   },
   "dependencies": {
     "axios": "^0.18.0",
+    "echarts": "^4.2.0-rc.2",
     "element-ui": "^2.3.7",
     "js-cookie": "^2.2.0",
     "normalize.css": "^8.0.0",
     "nprogress": "^0.2.0",
+    "v-charts": "^1.19.0",
     "v-distpicker": "^1.0.20",
     "vue": "^2.5.2",
     "vue-router": "^3.0.1",

src/main.js

@@ -5,6 +5,7 @@ import 'normalize.css/normalize.css'// A modern alternative to CSS resets
 import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
 import locale from 'element-ui/lib/locale/lang/zh-CN' // lang i18n
+import VCharts from 'v-charts'
 
 import '@/styles/index.scss' // global css
 
@@ -16,6 +17,7 @@ import '@/icons' // icon
 import '@/permission' // permission control
 
 Vue.use(ElementUI, { locale })
+Vue.use(VCharts)
 
 Vue.config.productionTip = false
 

src/utils/date.js

@@ -1,5 +1,5 @@
 // date.js
-export function formatDate (date, fmt) {
+export function formatDate(date, fmt) {
   if (/(y+)/.test(fmt)) {
     fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
   }
@@ -19,6 +19,24 @@ export function formatDate (date, fmt) {
   return fmt;
 }
 
-function padLeftZero (str) {
+function padLeftZero(str) {
   return ('00' + str).substr(str.length);
 }
+
+export function str2Date(dateStr, separator) {
+  if (!separator) {
+    separator = "-";
+  }
+  let dateArr = dateStr.split(separator);
+  let year = parseInt(dateArr[0]);
+  let month;
+  //处理月份为04这样的情况
+  if (dateArr[1].indexOf("0") == 0) {
+    month = parseInt(dateArr[1].substring(1));
+  } else {
+    month = parseInt(dateArr[1]);
+  }
+  let day = parseInt(dateArr[2]);
+  let date = new Date(year, month - 1, day);
+  return date;
+}

src/views/home/index.vue

@@ -143,14 +143,176 @@
         </el-col>
       </el-row>
     </div>
+    <div class="statistics-layout">
+      <div class="layout-title">订单统计</div>
+      <el-row>
+        <el-col :span="4">
+          <div style="padding: 20px">
+            <div>
+              <div style="color: #909399;font-size: 14px">本月订单总数</div>
+              <div style="color: #606266;font-size: 24px;padding: 10px 0">10000</div>
+              <div>
+                <span class="color-success" style="font-size: 14px">+10%</span>
+                <span style="color: #C0C4CC;font-size: 14px">同比上月</span>
+              </div>
+            </div>
+            <div style="margin-top: 20px;">
+              <div style="color: #909399;font-size: 14px">本周订单总数</div>
+              <div style="color: #606266;font-size: 24px;padding: 10px 0">1000</div>
+              <div>
+                <span class="color-danger" style="font-size: 14px">-10%</span>
+                <span style="color: #C0C4CC;font-size: 14px">同比上周</span>
+              </div>
+            </div>
+            <div style="margin-top: 20px;">
+              <div style="color: #909399;font-size: 14px">本月销售总额</div>
+              <div style="color: #606266;font-size: 24px;padding: 10px 0">100000</div>
+              <div>
+                <span class="color-success" style="font-size: 14px">+10%</span>
+                <span style="color: #C0C4CC;font-size: 14px">同比上月</span>
+              </div>
+            </div>
+            <div style="margin-top: 20px;">
+              <div style="color: #909399;font-size: 14px">本周销售总额</div>
+              <div style="color: #606266;font-size: 24px;padding: 10px 0">50000</div>
+              <div>
+                <span class="color-danger" style="font-size: 14px">-10%</span>
+                <span style="color: #C0C4CC;font-size: 14px">同比上周</span>
+              </div>
+            </div>
+          </div>
+        </el-col>
+        <el-col :span="20">
+          <div style="padding: 10px;border-left:1px solid #DCDFE6">
+            <el-date-picker
+              style="float: right;z-index: 1"
+              size="small"
+              v-model="orderCountDate"
+              type="daterange"
+              align="right"
+              unlink-panels
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              @change="handleDateChange"
+              :picker-options="pickerOptions">
+            </el-date-picker>
+            <div>
+              <ve-line
+                :data="chartData"
+                :legend-visible="false"
+                :loading="loading"
+                :data-empty="dataEmpty"
+                :settings="chartSettings"></ve-line>
+            </div>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
   </div>
 </template>
 
 <script>
+  import {str2Date} from '@/utils/date';
+  const DATA_FROM_BACKEND = {
+    columns: ['date', 'orderCount','orderAmount'],
+    rows: [
+      {date: '2018-11-01', orderCount: 10, orderAmount: 1093},
+      {date: '2018-11-02', orderCount: 20, orderAmount: 2230},
+      {date: '2018-11-03', orderCount: 33, orderAmount: 3623},
+      {date: '2018-11-04', orderCount: 50, orderAmount: 6423},
+      {date: '2018-11-05', orderCount: 80, orderAmount: 8492},
+      {date: '2018-11-06', orderCount: 60, orderAmount: 6293},
+      {date: '2018-11-07', orderCount: 20, orderAmount: 2293},
+      {date: '2018-11-08', orderCount: 60, orderAmount: 6293},
+      {date: '2018-11-09', orderCount: 50, orderAmount: 5293},
+      {date: '2018-11-10', orderCount: 30, orderAmount: 3293},
+      {date: '2018-11-11', orderCount: 20, orderAmount: 2293},
+      {date: '2018-11-12', orderCount: 80, orderAmount: 8293},
+      {date: '2018-11-13', orderCount: 100, orderAmount: 10293},
+      {date: '2018-11-14', orderCount: 10, orderAmount: 1293},
+      {date: '2018-11-15', orderCount: 40, orderAmount: 4293}
+    ]
+  };
   export default {
     name: 'home',
     data() {
-      return {msg: '首页'}
+      return {
+        pickerOptions: {
+          shortcuts: [{
+            text: '最近一周',
+            onClick(picker) {
+              const end = new Date();
+              let start = new Date();
+              start.setFullYear(2018);
+              start.setMonth(10);
+              start.setDate(1);
+              end.setTime(start.getTime() + 3600 * 1000 * 24 * 7);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: '最近一月',
+            onClick(picker) {
+              const end = new Date();
+              let start = new Date();
+              start.setFullYear(2018);
+              start.setMonth(10);
+              start.setDate(1);
+              end.setTime(start.getTime() + 3600 * 1000 * 24 * 30);
+              picker.$emit('pick', [start, end]);
+            }
+          }]
+        },
+        orderCountDate: '',
+        chartSettings: {
+          xAxisType: 'time',
+          area:true,
+          axisSite: { right: ['orderAmount']},
+        labelMap: {'orderCount': '订单数量', 'orderAmount': '订单金额'}},
+        chartData: {
+          columns: [],
+          rows: []
+        },
+        loading: false,
+        dataEmpty: false
+      }
+    },
+    created(){
+      this.initOrderCountDate();
+      this.getData();
+    },
+    methods:{
+      handleDateChange(){
+        this.getData();
+      },
+      initOrderCountDate(){
+        let start = new Date();
+        start.setFullYear(2018);
+        start.setMonth(10);
+        start.setDate(1);
+        const end = new Date();
+        end.setTime(start.getTime() + 1000 * 60 * 60 * 24 * 7);
+        this.orderCountDate=[start,end];
+      },
+      getData(){
+        setTimeout(() => {
+          this.chartData = {
+            columns: ['date', 'orderCount','orderAmount'],
+            rows: []
+          };
+          for(let i=0;i<DATA_FROM_BACKEND.rows.length;i++){
+            let item=DATA_FROM_BACKEND.rows[i];
+            let currDate=str2Date(item.date);
+            let start=this.orderCountDate[0];
+            let end=this.orderCountDate[1];
+            if(currDate.getTime()>=start.getTime()&&currDate.getTime()<=end.getTime()){
+              this.chartData.rows.push(item);
+            }
+          }
+          this.dataEmpty = false;
+          this.loading = false
+        }, 1000)
+      }
     }
   }
 </script>
@@ -231,4 +393,9 @@
   .out-border {
     border: 1px solid #DCDFE6;
   }
+
+  .statistics-layout {
+    margin-top: 20px;
+    border: 1px solid #DCDFE6;
+  }
 </style>