add:数据统计

src/components/charts/category.vue

+<template>
+  <div ref="dom" class="charts chart-pie"></div>
+</template>
+
+<script>
+import echarts from 'echarts'
+import tdTheme from './theme.json'
+import { on, off } from '@/libs/tools'
+echarts.registerTheme('tdTheme', tdTheme)
+export default {
+  name: 'ChartPie',
+  props: {
+    value: Array,
+    text: String,
+    subtext: String
+  },
+  data () {
+    return {
+      dom: null
+    }
+  },
+  methods: {
+    resize () {
+      this.dom.resize()
+    }
+  },
+  mounted () {
+    this.$nextTick(() => {
+      let option ={
+      tooltip: {
+        trigger: "axis",
+        axisPointer: {
+          type: "cross",
+          label: {
+            backgroundColor: "#6a7985"
+          }
+        }
+      },
+      grid: {
+        top: "3%",
+        left: "1.2%",
+        right: "1%",
+        bottom: "3%",
+        containLabel: true
+      },
+      xAxis: [
+        {
+          type: "category",
+          boundaryGap: false,
+          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
+        }
+      ],
+      yAxis: [
+        {
+          type: "value"
+        }
+      ],
+      series: [
+        {
+          name: "游戏/视频",
+          type: "line",
+          stack: "总量",
+          areaStyle: {
+            normal: {
+              color: "#0C17A6"
+            }
+          },
+          data: [379, 268, 354, 269, 310, 478, 358]
+        }
+      ]
+    };
+      this.dom = echarts.init(this.$refs.dom, 'tdTheme')
+      this.dom.setOption(option)
+      on(window, 'resize', this.resize)
+    })
+  },
+  beforeDestroy () {
+    off(window, 'resize', this.resize)
+  }
+}
+</script>

src/components/charts/pie.vue

@@ -3,68 +3,103 @@
 </template>
 
 <script>
-import echarts from 'echarts'
-import tdTheme from './theme.json'
-import { on, off } from '@/libs/tools'
-echarts.registerTheme('tdTheme', tdTheme)
+import echarts from "echarts";
+import tdTheme from "./theme.json";
+import { on, off } from "@/libs/tools";
+echarts.registerTheme("tdTheme", tdTheme);
 export default {
-  name: 'ChartPie',
+  name: "ChartPie",
   props: {
     value: Array,
     text: String,
     subtext: String
   },
-  data () {
+  data() {
     return {
       dom: null
-    }
+    };
   },
   methods: {
-    resize () {
-      this.dom.resize()
+    resize() {
+      this.dom.resize();
     }
   },
-  mounted () {
+  mounted() {
     this.$nextTick(() => {
-      let legend = this.value.map(_ => _.name)
+     // let legend = this.value.map(_ => _.name);
       let option = {
-        title: {
-          text: this.text,
-          subtext: this.subtext,
-          x: 'center'
-        },
         tooltip: {
-          trigger: 'item',
-          formatter: '{a} <br/>{b} : {c} ({d}%)'
-        },
+          trigger: "item",
+          formatter: "{a} <br/>{b}: {c} ({d}%)"
+          /*formatter:function(val){   //让series 中的文字进行换行
+                 console.log(val);//查看val属性，可根据里边属性自定义内容
+                 var content = var['name'];
+                 return content;//返回可以含有html中标签
+             },*/ //自定义鼠标悬浮交互信息提示，鼠标放在饼状图上时触发事件
+        }, //提示框，鼠标悬浮交互时的信息提示
         legend: {
-          orient: 'vertical',
-          left: 'left',
-          data: legend
-        },
+          show: true,
+          orient: "vertical",
+          x: "right",
+          data: ["50%-学生", "25%-老师", "25%-家长"]
+        }, //图例属性，以饼状图为例，用来说明饼状图每个扇区，data与下边series中data相匹配
+        graphic: {
+          type: "text",
+          left: "center",
+          top: "center",
+          style: {
+            text: "用户统计\n" + "100", //使用“+”可以使每行文字居中
+            textAlign: "center",
+            font: "italic bolder 16px cursive",
+            fill: "#000",
+            width: 30,
+            height: 30
+          }
+        }, //此例饼状图为圆环中心文字显示属性，这是一个原生图形元素组件，功能很多
         series: [
           {
-            type: 'pie',
-            radius: '55%',
-            center: ['50%', '60%'],
-            data: this.value,
+            name: "用户统计", //tooltip提示框中显示内容
+            type: "pie", //图形类型，如饼状图，柱状图等
+            radius: ["35%", "65%"], //饼图的半径，数组的第一项是内半径，第二项是外半径。支持百分比，本例设置成环形图。具体可以看文档或改变其值试一试
+            //roseType:'area',是否显示成南丁格尔图，默认false
             itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                  textStyle: { color: "#3c4858", fontSize: "18" },
+                  formatter: function(val) {
+                    //让series 中的文字进行换行
+                    return val.name.split("-").join("\n");
+                  }
+                }, //饼图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。可以与itemStyle属性同级，具体看文档
+                labelLine: {
+                  show: true,
+                  lineStyle: { color: "#3c4858" }
+                } //线条颜色
+              }, //基本样式
               emphasis: {
                 shadowBlur: 10,
                 shadowOffsetX: 0,
-                shadowColor: 'rgba(0, 0, 0, 0.5)'
-              }
-            }
-          }
-        ]
-      }
-      this.dom = echarts.init(this.$refs.dom, 'tdTheme')
-      this.dom.setOption(option)
-      on(window, 'resize', this.resize)
-    })
+                shadowColor: "rgba(0, 0, 0, 0.5)", //鼠标放在区域边框颜色
+                textColor: "#000"
+              } //鼠标放在各个区域的样式
+            },
+            data: [
+              { value: 50, name: "50%-学生" },
+              { value: 25, name: "25%-老师" },
+              { value: 25, name: "25%-家长" }
+            ], //数据，数据中其他属性，查阅文档
+            color: ["#51CEC6", "#FFB703", "#5FA0FA"] //各个区域颜色
+          } //数组中一个{}元素，一个图，以此可以做出环形图
+        ] //系列列表
+      };
+      this.dom = echarts.init(this.$refs.dom, "tdTheme");
+      this.dom.setOption(option);
+      on(window, "resize", this.resize);
+    });
   },
-  beforeDestroy () {
-    off(window, 'resize', this.resize)
+  beforeDestroy() {
+    off(window, "resize", this.resize);
   }
-}
+};
 </script>

src/router/routers.js

@@ -84,6 +84,17 @@ export default [
         component: () => import("@/view/signIn/photoReview.vue")
       },
       {
+        path: "/signIn/dataStatistics",
+        name: "dataStatistics",
+        meta: {
+          hideInMenu: false,
+          title: "数据统计",
+          notCache: true,
+          showbr: true
+        },
+        component: () => import("@/view/signIn/dataStatistics.vue")
+      },
+      {
         path: "/signIn/userAcDetail",
         meta: {
           title: "详情",

src/view/signIn/dataStatistics.vue

+<template>
+  <div class="detail">
+    <div class="pc-main">
+      <Tabs v-model="tab">
+        <TabPane label="浏览量统计" name="1"></TabPane>
+        <TabPane label="参与人数统计" name="2"></TabPane>
+        <TabPane label="分享人数统计" name="2"></TabPane>
+      </Tabs>
+      <div class="dateBox">
+        <DatePicker
+          :value="value2"
+          format="yyyy/MM/dd"
+          type="daterange"
+          placement="bottom-end"
+          placeholder="Select date"
+          style="width: 200px"
+        ></DatePicker>
+      </div>
+      <div style="height: 310px;" ref="dom"></div>
+      <Card shadow style="margin-top:30px">
+        <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>
+          <Col span="18">
+            <chart-pie style="height: 350px;" :value="pieData"></chart-pie
+          ></Col>
+          <Col span="6" style="padding-left:20px">col-12</Col>
+        </Row>
+      </Card>
+    </div>
+    <div class="btn">
+      <Button type="primary" @click="$router.go(-1)">返回</Button>
+    </div>
+  </div>
+</template>
+
+<script>
+import echarts from "echarts";
+import { ChartPie } from "_c/charts";
+import { on, off } from "@/libs/tools";
+export default {
+  name: "categories",
+  components: {
+    ChartPie
+  },
+  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",
+        axisPointer: {
+          type: "cross",
+          label: {
+            backgroundColor: "#6a7985"
+          }
+        }
+      },
+      grid: {
+        top: "3%",
+        left: "1.2%",
+        right: "1%",
+        bottom: "3%",
+        containLabel: true
+      },
+      xAxis: [
+        {
+          type: "category",
+          boundaryGap: false,
+          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
+        }
+      ],
+      yAxis: [
+        {
+          type: "value"
+        }
+      ],
+      series: [
+        {
+          name: "游戏/视频",
+          type: "line",
+          stack: "总量",
+          areaStyle: {
+            normal: {
+              color: "#0C17A6"
+            }
+          },
+          data: [379, 268, 354, 269, 310, 478, 358]
+        }
+      ]
+    };
+    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>