按需引入，v-charts

kiisoo-ic-ui/src/iview.js

@@ -10,9 +10,14 @@ import {
     Input,
     Layout,
     Menu,
+    MenuItem,
     Sider,
     Submenu,
-    Table
+    Table,
+    Row,
+    Col,
+    Select,
+    Option,
 } from "view-design";
 import 'view-design/dist/styles/iview.css';
 
@@ -27,7 +32,12 @@ Vue.component('Layout', Layout);
 Vue.component('Sider', Sider);
 Vue.component('Avatar', Avatar);
 Vue.component('Menu', Menu);
+Vue.component('MenuItem', MenuItem);
 Vue.component('Submenu', Submenu);
 Vue.component('Content', Content);
 Vue.component('Breadcrumb', Breadcrumb);
 Vue.component('BreadcrumbItem', BreadcrumbItem);
+Vue.component('Row', Row);
+Vue.component('Col', Col);
+Vue.component('Select', Select);
+Vue.component('Option', Option);

kiisoo-ic-ui/src/main.js

@@ -6,6 +6,7 @@ import moment from 'moment'
 import axios from 'axios';
 import QS from 'qs';
 import './iview';
+import './vcharts'
 
 Vue.prototype.$axios = axios;
 Vue.prototype.$qs = QS;

kiisoo-ic-ui/src/pages/CustomerData.vue

@@ -1,12 +1,30 @@
 <template>
   <div>
-<!--    <Row :gutter="32">-->
+    <Row :gutter="32">
-<!--      <Col span="32">-->
+      <Col span="32">
-<!--        <row>-->
+        <row>
+          <row style="height: 90px;background: #f7f8fa;border: 1px solid #E8ECF2;line-height: 90px">
+            <span style="margin-left: 48px">区域选择</span>
+            <Select filterable placeholder="请选择区域" v-model="regionId" class="left-15" style="width:190px" size="small">
+              <Option v-for="item in regionList" :value="item.id" :key="item.id">{{ item.name }}</Option>
+            </Select>
+            <span class="left-15">店铺选择</span>
+            <Select filterable placeholder="请选择店铺" v-model="shopId" class="left-15" style="width:190px" size="small">
+              <Option v-for="item in shopList" :value="item.id" :key="item.id">{{ item.name }}</Option>
+            </Select>
+            <span class="left-15">导购选择</span>
+            <Select filterable placeholder="请选择导购" v-model="sellerId" class="left-15" style="width:190px" size="small">
+              <Option v-for="item in sellerList" :value="item.id" :key="item.id">{{ item.name }}</Option>
+            </Select>
+            <Button type="primary" style="width: 70px;margin-left: 20px" @click="searchCustomerDataBtnClick" size="small">查询</Button>
 
-<!--        </row>-->
+          </row>
-<!--      </Col>-->
+          <row>
-<!--    </Row>-->
+            <ve-histogram :data="chartData"></ve-histogram>
+          </row>
+        </row>
+      </Col>
+    </Row>
   </div>
 </template>
 <script>
@@ -14,14 +32,32 @@
     export default {
         data() {
             return {
-
+              regionId: null,
-
+              regionList: [{"id":1,"name":"一区"},{"id":2,"name":"二大区"}],
+              shopId: null,
+              shopList: [{"id":1,"name":"一区"},{"id":2,"name":"二大区"}],
+              sellerId: null,
+              sellerList: [{"id":1,"name":"一区"},{"id":2,"name":"二大区"}],
+              chartData: {
+                columns: ['日期', '访问用户', '下单用户', '下单率'],
+                rows: [
+                  { '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
+                  { '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
+                  { '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
+                  { '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
+                  { '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
+                  { '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
+                ]
+              },
             }
         },
         mounted: function () {
 
         },
         methods: {
+          searchCustomerDataBtnClick: function () {
+
+          },
 
           // /**商品mainList*/
           // getMainList: function(){
@@ -37,5 +73,8 @@
 </script>
 <style scoped>
 
+  .left-15{
+    margin-left: 15px;
+  }
 
 </style>

kiisoo-ic-ui/src/pages/Home.vue

@@ -81,7 +81,7 @@ export default {
   methods: {
     onSelectLister (val) {
       switch (val) {
-        case "客户数据":break;
+        case "客户数据":this.$router.push("/customer/data");break;
         default:break;
       }
     },

kiisoo-ic-ui/src/vcharts.js

@@ -0,0 +1,5 @@
+import Vue from 'vue';
+import VeHistogram from 'v-charts/lib/histogram.common'
+
+//柱状图
+Vue.component('VeHistogram', VeHistogram);