add:早起打卡统计

src/router/routers.js

@@ -169,6 +169,18 @@ export default [
         component: () => import("@/view/clockEarly/photoReview.vue")
       },
       {
+        path: "/clockEarly/dataStatistics",
+        name: "clockEarlyDataStatistics",
+        meta: {
+          hideInMenu: false,
+          title: "数据统计",
+          icon: "md-grid",
+          notCache: true,
+          showbr: true
+        },
+        component: () => import("@/view/clockEarly/dataStatistics.vue")
+      },
+      {
         path: "/clockEarly/detail",
         meta: {
           title: "详情",

src/view/clockEarly/dataStatistics.vue

+<template>
+  <div class="detail">
+    <div class="pc-main">
+      <Card shadow>
+        <p slot="title">早起人数统计</p>
+        <div class="dateBox">
+          <DatePicker
+            :value="value2"
+            format="yyyy/MM/dd"
+            type="daterange"
+            placement="bottom-end"
+            placeholder="Select date"
+            style="width: 200px"
+          ></DatePicker>
+        </div>
+        <Row>
+             <div style="height: 310px;" ref="dom"></div>
+        </Row>
+      </Card>
+    </div>
+  </div>
+</template>
+
+<script>
+import echarts from "echarts";
+import { on, off } from "@/libs/tools";
+export default {
+  name: "categories",
+  components: {
+    
+  },
+  data() {
+    return {
+      pieData: [
+        { value: 335, name: "直接访问" },
+        { value: 310, name: "邮件营销" },
+        { value: 234, name: "联盟广告" },
+        { value: 135, name: "视频广告" },
+        { value: 1548, name: "搜索引擎" }
+      ],
+      dom: null,
+      tab: "1"
+    };
+  },
+  methods: {
+    resize() {
+      this.dom.resize();
+    }
+  },
+  mounted() {
+    const option = {
+    tooltip: {
+        trigger: 'axis'
+    },
+    grid: {
+        left: '3%',
+        right: '4%',
+        bottom: '3%',
+        containLabel: true
+    },
+    xAxis: {
+        type: 'category',
+        boundaryGap: false,
+        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
+    },
+    yAxis: {
+        type: 'value'
+    },
+    series: [
+        {
+            name: '邮件营销',
+            type: 'line',
+            stack: '总量',
+            data: [120, 132, 101, 134, 90, 230, 210]
+        },
+        {
+            name: '联盟广告',
+            type: 'line',
+            stack: '总量',
+            data: [220, 182, 191, 234, 290, 330, 310]
+        }
+    ]
+};
+    this.$nextTick(() => {
+      this.dom = echarts.init(this.$refs.dom);
+      console.log(this.dom);
+      this.dom.setOption(option);
+      on(window, "resize", this.resize);
+    });
+  },
+  beforeDestroy() {
+    off(window, "resize", this.resize);
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.pc-main {
+  padding: 20px;
+  //margin-top: 20px;
+  background-color: #fff;
+  .dateBox {
+    margin: 10px 0 20px 0;
+    text-align: right;
+  }
+}
+.btn {
+  text-align: right;
+  width: 80%;
+  position: fixed;
+  background-color: #fff;
+  bottom: 10px;
+  padding: 10px 30px;
+}
+</style>