From 14db9d180fb1a1c4cb4a3e399996f1c9df2b0f15 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E7=BF=94=E5=AE=87-=E6=97=85=E7=AE=A1=E5=AE=B6?=
 <153298343@qq.com>
Date: Thu, 2 Jun 2022 14:39:02 +0800
Subject: [PATCH] up

---
 src/views/dashboard/index.vue                | 122 +++++------
 src/views/report/components/BarChart.vue     | 146 +++++++++++++
 src/views/report/components/LineChart.vue    | 143 +++++++++++++
 src/views/report/components/PanelGroup.vue   | 211 +++++++++++++++++++
 src/views/report/components/PieChart.vue     | 163 ++++++++++++++
 src/views/report/components/mixins/resize.js |  55 +++++
 src/views/report/visit/sexRpt.vue            |  25 ++-
 7 files changed, 799 insertions(+), 66 deletions(-)
 create mode 100644 src/views/report/components/BarChart.vue
 create mode 100644 src/views/report/components/LineChart.vue
 create mode 100644 src/views/report/components/PanelGroup.vue
 create mode 100644 src/views/report/components/PieChart.vue
 create mode 100644 src/views/report/components/mixins/resize.js

diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index 8bc4abf..a7ae403 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="dashboard-editor-container">
 
-    <panel-group  :countsData="countsData" />
+    <panel-group :countsData="countsData" />
     <el-row :gutter="32">
       <el-col :xs="24" :sm="24" :lg="12">
         <div class="chart-wrapper">
           <div class="chart-title">
-            <router-link to="/toolbox/warning">观众性别</router-link>
+            <router-link to="/report/visit/sexRpt">观众性别</router-link>
             <!-- <div>
               <el-tag @click="changeDate('warning',item.type,index)" :type="(item.checked?'success':'info')"
                 style="margin-right: 10px;cursor: pointer;" v-for="(item,index) in stat.warning.dateRange">
@@ -21,7 +21,7 @@
         <div class="chart-wrapper">
           <div class="chart-title">
             <router-link to="/toolbox/exception">观众年龄</router-link>
-           <!-- <div>
+            <!-- <div>
               <el-tag @click="changeDate('exception',item.type,index)" :type="(item.checked?'success':'info')"
                 style="margin-right: 10px;cursor: pointer;" v-for="(item,index) in stat.exception.dateRange">
                 {{item.name}}
@@ -30,27 +30,27 @@
           </div>
           <pie-chart :chartData="stat.exception" />
         </div>
-      </el-col>
-      <el-col :xs="24" :sm="24" :lg="8" v-if="false">
-        <div class="chart-wrapper">
-          <div class="chart-title">
-            <router-link to="/toolbox/exception">城市分布</router-link>
-           <!-- <div>
-              <el-tag @click="changeDate('exception',item.type,index)" :type="(item.checked?'success':'info')"
-                style="margin-right: 10px;cursor: pointer;" v-for="(item,index) in stat.exception.dateRange">
-                {{item.name}}
-              </el-tag>
-            </div> -->
-          </div>
-          <pie-chart :chartData="stat.times" />
-        </div>
       </el-col>
-      <el-col :xs="24" :sm="24" :lg="24">
-        <div class="chart-wrapper">
-          <div class="chart-title">
-            <router-link to="/toolbox/exception">团体与个人统计</router-link>
-          </div>
-          <line-chart :chartData="lineArr" />
+      <el-col :xs="24" :sm="24" :lg="8" v-if="false">
+        <div class="chart-wrapper">
+          <div class="chart-title">
+            <router-link to="/toolbox/exception">城市分布</router-link>
+            <!-- <div>
+              <el-tag @click="changeDate('exception',item.type,index)" :type="(item.checked?'success':'info')"
+                style="margin-right: 10px;cursor: pointer;" v-for="(item,index) in stat.exception.dateRange">
+                {{item.name}}
+              </el-tag>
+            </div> -->
+          </div>
+          <pie-chart :chartData="stat.times" />
+        </div>
+      </el-col>
+      <el-col :xs="24" :sm="24" :lg="24">
+        <div class="chart-wrapper">
+          <div class="chart-title">
+            <router-link to="/toolbox/exception">团体与个人统计</router-link>
+          </div>
+          <line-chart :chartData="lineArr" />
         </div>
 
       </el-col>
@@ -135,35 +135,35 @@
               type: "month",
               name: "本月"
             }]
-          },
-          times: {
-            radiusArr: "50%",
-            yArr: [{
-                value: 240,
-                name: '苏州'
-              },
-              {
-                value: 20,
-                name: '无锡'
-              },
-              {
-                value: 130,
-                name: '常州'
-              },
-              {
-                value: 120,
-                name: '泰州'
-              },
-              {
-                value: 120,
-                name: '宿迁'
-              }
-            ],
+          },
+          times: {
+            radiusArr: "50%",
+            yArr: [{
+                value: 240,
+                name: '苏州'
+              },
+              {
+                value: 20,
+                name: '无锡'
+              },
+              {
+                value: 130,
+                name: '常州'
+              },
+              {
+                value: 120,
+                name: '泰州'
+              },
+              {
+                value: 120,
+                name: '宿迁'
+              }
+            ],
           }
         },
         lineArr: {
-          xArr: ['05-22', '05-23', '05-24', '05-25', '05-26', '05-27', '05-28'],
-          legendArr:["团队预约人数","团队预约实际入场人数","个人预约人数","个人预约实际入场人数"],
+          xArr: ['05-22', '05-23', '05-24', '05-25', '05-26', '05-27', '05-28'],
+          legendArr: ["团队预约人数", "团队预约实际入场人数", "个人预约人数", "个人预约实际入场人数"],
           series: [{
               name: '团队预约人数',
               type: 'line',
@@ -181,24 +181,24 @@
               type: 'line',
               stack: 'Total',
               data: [150, 232, 201, 154, 190, 330, 210]
-            },
-            {
-              name: '个人预约实际入场人数',
-              type: 'line',
-              stack: 'Total',
-              data: [50, 132, 101, 104, 180, 230, 110]
+            },
+            {
+              name: '个人预约实际入场人数',
+              type: 'line',
+              stack: 'Total',
+              data: [50, 132, 101, 104, 180, 230, 110]
             }
           ]
         }
-      }
-      },
-      created: function() {
+      }
+    },
+    created: function() {
 
-        },
-        methods: {
+    },
+    methods: {
 
-        }
     }
+  }
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/report/components/BarChart.vue b/src/views/report/components/BarChart.vue
new file mode 100644
index 0000000..199f14c
--- /dev/null
+++ b/src/views/report/components/BarChart.vue
@@ -0,0 +1,146 @@
+<template>
+  <div :class="className" :style="{height:height,width:width}" />
+
+</template>
+
+<script>
+  import echarts from 'echarts'
+  require('echarts/theme/macarons') // echarts theme
+  import resize from './mixins/resize'
+
+  const animationDuration = 6000
+
+  export default {
+    mixins: [resize],
+    props: {
+      className: {
+        type: String,
+        default: 'chart'
+      },
+      width: {
+        type: String,
+        default: '100%'
+      },
+      height: {
+        type: String,
+        default: '500px'
+      },
+      chartData: {
+        type: Object
+      }
+    },
+    data() {
+      return {
+        chart: null
+      }
+    },
+    mounted() {
+      this.$nextTick(() => {
+        this.initChart()
+      })
+    },
+    watch: {
+      chartData: {
+        deep: true,
+        handler(val) {
+          this.setOptions(val)
+        }
+      }
+    },
+    beforeDestroy() {
+      if (!this.chart) {
+        return
+      }
+      this.chart.dispose()
+      this.chart = null
+    },
+    methods: {
+      initChart() {
+        this.chart = echarts.init(this.$el, 'macarons');
+        this.setOptions(this.chartData);
+      },
+      setOptions(chartdata) {
+        console.log(chartdata.xArr)
+        this.chart.setOption({
+          dataZoom: [
+            //给x轴设置滚动条
+            {
+              startValue: 0,
+              endValue: 6, // 显示条数
+              type: 'slider',
+              show: true,
+              xAxisIndex: [0],
+              handleSize: 0, //滑动条的 左右2个滑动条的大小
+              height: 8, //组件高度
+              left: 50, //左边的距离
+              right: 40, //右边的距离
+              bottom: 26, //右边的距离
+              handleColor: '#EFEFEF', //h滑动图标的颜色
+              handleStyle: {
+                borderColor: '#409EFF',
+                borderWidth: '1',
+                shadowBlur: 2,
+                background: '#EFEFEF',
+                shadowColor: '#EFEFEF'
+              },
+              fillerColor: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
+                  //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
+                  //给第一个设置0，第四个设置1，就是垂直渐变
+                  offset: 0,
+                  color: '#409EFF'
+                },
+                {
+                  offset: 1,
+                  color: '#409EFF'
+                }
+              ]),
+              backgroundColor: '#EFEFEF', //两边未选中的滑动条区域的颜色
+              showDataShadow: false, //是否显示数据阴影 默认auto
+              showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
+              handleIcon: 'M-292,322.2c-3.2,0-6.4-0.6-9.3-1.9c-2.9-1.2-5.4-2.9-7.6-5.1s-3.9-4.8-5.1-7.6c-1.3-3-1.9-6.1-1.9-9.3c0-3.2,0.6-6.4,1.9-9.3c1.2-2.9,2.9-5.4,5.1-7.6s4.8-3.9,7.6-5.1c3-1.3,6.1-1.9,9.3-1.9c3.2,0,6.4,0.6,9.3,1.9c2.9,1.2,5.4,2.9,7.6,5.1s3.9,4.8,5.1,7.6c1.3,3,1.9,6.1,1.9,9.3c0,3.2-0.6,6.4-1.9,9.3c-1.2,2.9-2.9,5.4-5.1,7.6s-4.8,3.9-7.6,5.1C-285.6,321.5-288.8,322.2-292,322.2z',
+              filterMode: 'filter'
+            }
+            //下面这个属性是里面拖到
+            //   {
+            //     type: 'inside',
+            //     show: true,
+            //     xAxisIndex: [0],
+            //     start: 0, //默认为1
+            //     end: 50,
+            //   },
+          ],
+          grid: {
+            top: 10,
+            left: '2%',
+            right: '2%',
+            bottom: '3%',
+            containLabel: true
+          },
+          xAxis: [{
+            type: 'category',
+            data: chartdata.xArr,
+            axisTick: {
+              alignWithLabel: true
+            }
+          }],
+          yAxis: [{
+            type: 'value',
+            minInterval: 1,
+            axisTick: {
+              show: false
+            }
+          }],
+          series: [{
+            name: '数据',
+            type: 'bar',
+            stack: 'vistors',
+            barWidth: '60%',
+            data: chartdata.yArr,
+            animationDuration
+          }]
+        })
+
+      }
+    }
+  }
+</script>
diff --git a/src/views/report/components/LineChart.vue b/src/views/report/components/LineChart.vue
new file mode 100644
index 0000000..73ffc34
--- /dev/null
+++ b/src/views/report/components/LineChart.vue
@@ -0,0 +1,143 @@
+<template>
+  <div :class="className" :style="{height:height,width:width}" />
+
+</template>
+
+<script>
+  import echarts from 'echarts'
+  require('echarts/theme/macarons') // echarts theme
+  import resize from './mixins/resize'
+
+  const animationDuration = 6000
+
+  export default {
+    mixins: [resize],
+    props: {
+      className: {
+        type: String,
+        default: 'chart'
+      },
+      width: {
+        type: String,
+        default: '100%'
+      },
+      height: {
+        type: String,
+        default: '400px'
+      },
+      chartData: {
+        type: Object
+      }
+    },
+    data() {
+      return {
+        chart: null
+      }
+    },
+    mounted() {
+      this.$nextTick(() => {
+        this.initChart()
+      })
+    },
+    watch: {
+      chartData: {
+        deep: true,
+        handler(val) {
+          this.setOptions(val)
+        }
+      }
+    },
+    beforeDestroy() {
+      if (!this.chart) {
+        return
+      }
+      this.chart.dispose()
+      this.chart = null
+    },
+    methods: {
+      initChart() {
+        this.chart = echarts.init(this.$el, 'macarons');
+        this.setOptions(this.chartData);
+      },
+      setOptions(chartdata) {
+        console.log(chartdata.xArr)
+        this.chart.setOption({
+          dataZoom: [
+            //给x轴设置滚动条
+            // {
+            //   startValue: 0,
+            //   endValue: 6, // 显示条数
+            //   type: 'slider',
+            //   show: true,
+            //   xAxisIndex: [0],
+            //  // handleSize: 0, //滑动条的 左右2个滑动条的大小
+            //   height: 8, //组件高度
+            //   left: 50, //左边的距离
+            //   right: 40, //右边的距离
+            //   bottom: 26, //右边的距离
+            //   handleColor: '#EFEFEF', //h滑动图标的颜色
+            //   handleStyle: {
+            //     borderColor: '#409EFF',
+            //     borderWidth: '1',
+            //     shadowBlur: 2,
+            //     background: '#EFEFEF',
+            //     shadowColor: '#EFEFEF'
+            //   },
+            //   fillerColor: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
+            //       //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
+            //       //给第一个设置0，第四个设置1，就是垂直渐变
+            //       offset: 0,
+            //       color: '#409EFF'
+            //     },
+            //     {
+            //       offset: 1,
+            //       color: '#409EFF'
+            //     }
+            //   ]),
+            //   backgroundColor: '#EFEFEF', //两边未选中的滑动条区域的颜色
+            //   showDataShadow: false, //是否显示数据阴影 默认auto
+            //   showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
+            //   handleIcon: 'M-292,322.2c-3.2,0-6.4-0.6-9.3-1.9c-2.9-1.2-5.4-2.9-7.6-5.1s-3.9-4.8-5.1-7.6c-1.3-3-1.9-6.1-1.9-9.3c0-3.2,0.6-6.4,1.9-9.3c1.2-2.9,2.9-5.4,5.1-7.6s4.8-3.9,7.6-5.1c3-1.3,6.1-1.9,9.3-1.9c3.2,0,6.4,0.6,9.3,1.9c2.9,1.2,5.4,2.9,7.6,5.1s3.9,4.8,5.1,7.6c1.3,3,1.9,6.1,1.9,9.3c0,3.2-0.6,6.4-1.9,9.3c-1.2,2.9-2.9,5.4-5.1,7.6s-4.8,3.9-7.6,5.1C-285.6,321.5-288.8,322.2-292,322.2z',
+            //   filterMode: 'filter'
+            // }
+            //下面这个属性是里面拖到
+            //   {
+            //     type: 'inside',
+            //     show: true,
+            //     xAxisIndex: [0],
+            //     start: 0, //默认为1
+            //     end: 50,
+            //   },
+          ],
+          legendArr:[],
+          legend: {
+            orient: 'horizontal',
+            bottom: '3%',
+            data:chartdata.legendArr
+          },
+            tooltip: {
+              trigger: 'axis'
+            },
+            backgroundColor:"#fff",
+          grid: {
+            top: '3%',
+            left: '2%',
+            right: '2%',
+            bottom: '12%',
+            containLabel: true
+          },
+          xAxis: [{
+            type: 'category',
+            data: chartdata.xArr,
+          }],
+          yAxis: [{
+            type: 'value',
+            minInterval: 1,
+          }],
+          series: chartdata.series
+        })
+
+      }
+    }
+  }
+</script>
diff --git a/src/views/report/components/PanelGroup.vue b/src/views/report/components/PanelGroup.vue
new file mode 100644
index 0000000..53d3bb3
--- /dev/null
+++ b/src/views/report/components/PanelGroup.vue
@@ -0,0 +1,211 @@
+<template>
+  <el-row :gutter="40" class="panel-group">
+    <el-col :xs="12" :sm="12" :lg="5" class="card-panel-col" style="background: #FDC830;  /* fallback for old browsers */
+background: -webkit-linear-gradient(to right, #F37335, #FDC830);  /* Chrome 10-25, Safari 5.1-6 */
+background: linear-gradient(to right, #F37335, #FDC830); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */">
+      <div class="card-panel">
+        <div class="card-panel-icon-wrapper icon-people">
+          <svg-icon icon-class="peoples" class-name="card-panel-icon" />
+        </div>
+        <div class="card-panel-description">
+          <div class="card-panel-text" style="font-family: '微软雅黑'">
+            234
+          </div>
+          <div class="card-panel-text" style="color: #fff;font-size:16px">
+            预约参观总人次
+          </div>
+        </div>
+      </div>
+    </el-col>
+    <el-col :xs="12" :sm="12" :lg="5" class="card-panel-col" style="background: #FFB75E;  /* fallback for old browsers */
+background: -webkit-linear-gradient(to right, #ED8F03, #FFB75E);  /* Chrome 10-25, Safari 5.1-6 */
+background: linear-gradient(to right, #ED8F03, #FFB75E); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */">
+      <div class="card-panel" style="background-color: transparent;" @click="handleRoute('box')">
+        <div class="card-panel-icon-wrapper icon-message">
+          <svg-icon icon-class="user-group" class-name="card-panel-icon" />
+        </div>
+        <div class="card-panel-description">
+          <div class="card-panel-text" style="font-family: '微软雅黑'">
+            204
+          </div>
+          <div class="card-panel-text" style="color: #fff;font-size:16px">
+            入场参观总人次
+          </div>
+          <!-- <count-to :start-val="0" :end-val="countsData.client_count" :duration="3000" class="card-panel-num" /> -->
+        </div>
+      </div>
+    </el-col>
+    <el-col :xs="12" :sm="12" :lg="5" class="card-panel-col" style="background: #ffe259;  /* fallback for old browsers */
+background: -webkit-linear-gradient(to right, #ffa751, #ffe259);  /* Chrome 10-25, Safari 5.1-6 */
+background: linear-gradient(to right, #ffa751, #ffe259); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */">
+      <div class="card-panel" @click="handleRoute('tool')">
+        <div class="card-panel-icon-wrapper icon-money">
+          <svg-icon icon-class="peoples" class-name="card-panel-icon" />
+        </div>
+        <div class="card-panel-description">
+          <div class="card-panel-text" style="font-family: '微软雅黑'">
+            305
+          </div>
+          <div class="card-panel-text" style="color: #fff;font-size:16px">
+            预约活动总人次
+          </div>
+          <!-- <count-to :start-val="0" :end-val="countsData.tool_count" :duration="3200" class="card-panel-num" /> -->
+        </div>
+      </div>
+    </el-col>
+    <el-col :xs="12" :sm="12" :lg="5" class="card-panel-col" style="background: #fe8c00;  /* fallback for old browsers */
+background: -webkit-linear-gradient(to right, #f83600, #fe8c00);  /* Chrome 10-25, Safari 5.1-6 */
+background: linear-gradient(to right, #f83600, #fe8c00); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */">
+      <div class="card-panel" @click="handleRoute('user')">
+        <div class="card-panel-icon-wrapper icon-shopping">
+          <svg-icon icon-class="user-group" class-name="card-panel-icon" />
+        </div>
+        <div class="card-panel-description">
+          <div class="card-panel-text" style="font-family: '微软雅黑'">
+            267
+          </div>
+          <div class="card-panel-text" style="color: #fff;font-size:16px">
+            参与活动总人次
+          </div>
+          <!-- <count-to :start-val="0" :end-val="countsData.user_count" :duration="3600" class="card-panel-num" /> -->
+        </div>
+
+      </div>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+  import CountTo from 'vue-count-to'
+
+  export default {
+    props: {
+      countsData: {
+        type: Object
+      }
+    },
+    components: {
+      CountTo
+    },
+    methods: {
+      handleRoute(type) {
+        this.$emit('handleRoute', type)
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .panel-group {
+    // margin-top: 18px;
+    margin-left: -2% !important;
+    margin-right: -3% !important;
+
+    .card-panel-col {
+      // margin:0 2%;
+      margin: 0 2%;
+      margin-bottom: 32px;
+    }
+
+    .card-panel {
+      height: 130px;
+      cursor: pointer;
+      font-size: 12px;
+      position: relative;
+      overflow: hidden;
+      color: #666;
+      text-align: center;
+      // background: #fff;
+      // box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+      // border-color: rgba(0, 0, 0, .05);
+
+      &:hover {
+        .card-panel-icon-wrapper {
+          color: #fff;
+        }
+
+        // .icon-people {
+        //   background: #40c9c6;
+        // }
+
+        // .icon-message {
+        //   background: #36a3f7;
+        // }
+
+        // .icon-money {
+        //   background: #f4516c;
+        // }
+
+        // .icon-shopping {
+        //   background: #34bfa3
+        // }
+      }
+
+      .icon-people {
+        color: #fff;
+      }
+
+      .icon-message {
+        color: #fff;
+      }
+
+      .icon-money {
+        color: #fff;
+      }
+
+      .icon-shopping {
+        color: #fff
+      }
+
+      .card-panel-icon-wrapper {
+        float: right;
+        margin: 22px 0 0 14px;
+        padding: 16px;
+        transition: all 0.38s ease-out;
+        border-radius: 6px;
+      }
+
+      .card-panel-icon {
+        float: left;
+        font-size: 42px;
+      }
+
+      .card-panel-description {
+        // float: right;
+        font-weight: bold;
+        margin: 33px 0;
+
+        .card-panel-text {
+          line-height: 25px;
+          color: rgb(255, 255, 255);
+          font-size: 28px;
+          margin-bottom: 12px;
+
+        }
+
+        .card-panel-num {
+          font-size: 20px;
+        }
+      }
+    }
+  }
+
+  @media (max-width:550px) {
+    .card-panel-description {
+      display: none;
+    }
+
+    .card-panel-icon-wrapper {
+      float: none !important;
+      width: 100%;
+      height: 100%;
+      margin: 0 !important;
+
+      .svg-icon {
+        display: block;
+        margin: 14px auto !important;
+        float: none !important;
+      }
+    }
+  }
+</style>
diff --git a/src/views/report/components/PieChart.vue b/src/views/report/components/PieChart.vue
new file mode 100644
index 0000000..3979b90
--- /dev/null
+++ b/src/views/report/components/PieChart.vue
@@ -0,0 +1,163 @@
+<template>
+  <div :class="className" :style="{height:height,width:width}" />
+
+</template>
+
+<script>
+  import echarts from 'echarts'
+  require('echarts/theme/macarons') // echarts theme
+  import resize from './mixins/resize'
+
+  const animationDuration = 6000
+
+  export default {
+    mixins: [resize],
+    props: {
+      className: {
+        type: String,
+        default: 'chart'
+      },
+      width: {
+        type: String,
+        default: '100%'
+      },
+      height: {
+        type: String,
+        default: '300px'
+      },
+      chartData: {
+        type: Object
+      }
+    },
+    data() {
+      return {
+        chart: null
+      }
+    },
+    mounted() {
+      this.$nextTick(() => {
+        this.initChart()
+      })
+    },
+    watch: {
+      chartData: {
+        deep: true,
+        handler(val) {
+          this.setOptions(val)
+        }
+      }
+    },
+    beforeDestroy() {
+      if (!this.chart) {
+        return
+      }
+      this.chart.dispose()
+      this.chart = null
+    },
+    methods: {
+      initChart() {
+        this.chart = echarts.init(this.$el, 'macarons');
+        this.setOptions(this.chartData);
+      },
+      setOptions(chartdata) {
+        console.log(chartdata.xArr)
+        this.chart.setOption({
+          dataZoom: [
+            //给x轴设置滚动条
+            // {
+            //   startValue: 0,
+            //   endValue: 6, // 显示条数
+            //   type: 'slider',
+            //   show: true,
+            //   xAxisIndex: [0],
+            //  // handleSize: 0, //滑动条的 左右2个滑动条的大小
+            //   height: 8, //组件高度
+            //   left: 50, //左边的距离
+            //   right: 40, //右边的距离
+            //   bottom: 26, //右边的距离
+            //   handleColor: '#EFEFEF', //h滑动图标的颜色
+            //   handleStyle: {
+            //     borderColor: '#409EFF',
+            //     borderWidth: '1',
+            //     shadowBlur: 2,
+            //     background: '#EFEFEF',
+            //     shadowColor: '#EFEFEF'
+            //   },
+            //   fillerColor: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
+            //       //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
+            //       //给第一个设置0，第四个设置1，就是垂直渐变
+            //       offset: 0,
+            //       color: '#409EFF'
+            //     },
+            //     {
+            //       offset: 1,
+            //       color: '#409EFF'
+            //     }
+            //   ]),
+            //   backgroundColor: '#EFEFEF', //两边未选中的滑动条区域的颜色
+            //   showDataShadow: false, //是否显示数据阴影 默认auto
+            //   showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
+            //   handleIcon: 'M-292,322.2c-3.2,0-6.4-0.6-9.3-1.9c-2.9-1.2-5.4-2.9-7.6-5.1s-3.9-4.8-5.1-7.6c-1.3-3-1.9-6.1-1.9-9.3c0-3.2,0.6-6.4,1.9-9.3c1.2-2.9,2.9-5.4,5.1-7.6s4.8-3.9,7.6-5.1c3-1.3,6.1-1.9,9.3-1.9c3.2,0,6.4,0.6,9.3,1.9c2.9,1.2,5.4,2.9,7.6,5.1s3.9,4.8,5.1,7.6c1.3,3,1.9,6.1,1.9,9.3c0,3.2-0.6,6.4-1.9,9.3c-1.2,2.9-2.9,5.4-5.1,7.6s-4.8,3.9-7.6,5.1C-285.6,321.5-288.8,322.2-292,322.2z',
+            //   filterMode: 'filter'
+            // }
+            //下面这个属性是里面拖到
+            //   {
+            //     type: 'inside',
+            //     show: true,
+            //     xAxisIndex: [0],
+            //     start: 0, //默认为1
+            //     end: 50,
+            //   },
+          ],
+          legend: {
+            orient: 'horizontal',
+            bottom: '4%',
+          },
+          tooltip: {
+            trigger: 'item',
+            formatter: "{a} <br/>{b} : {c} ({d}%)"
+          },
+          grid: {
+            top: 0,
+            left: '2%',
+            right: '2%',
+            bottom: '3%',
+            containLabel: true
+          },
+          xAxis: [{
+            type: 'category',
+            data: chartdata.xArr,
+            axisLine: {
+                show: false  //不显示坐标轴轴线
+            },
+            axisTick: {
+                show: false  //不显示坐标轴刻度
+            },
+          }],
+          yAxis: [{
+            type: 'value',
+            minInterval: 1,
+            axisLine: {
+                show: false  //不显示坐标轴轴线
+            },
+            axisTick: {
+                show: false  //不显示坐标轴刻度
+            },
+          }],
+          radiusArr:[],
+          series: [{
+            name: '数据',
+            type: 'pie',
+            stack: 'vistors',
+            barWidth: '60%',
+            radius: chartdata.radiusArr,
+            center: ['50%', '45%'],
+            data: chartdata.yArr,
+            animationDuration
+          }]
+        })
+
+      }
+    }
+  }
+</script>
diff --git a/src/views/report/components/mixins/resize.js b/src/views/report/components/mixins/resize.js
new file mode 100644
index 0000000..234953b
--- /dev/null
+++ b/src/views/report/components/mixins/resize.js
@@ -0,0 +1,55 @@
+import { debounce } from '@/utils'
+
+export default {
+  data() {
+    return {
+      $_sidebarElm: null,
+      $_resizeHandler: null
+    }
+  },
+  mounted() {
+    this.$_resizeHandler = debounce(() => {
+      if (this.chart) {
+        this.chart.resize()
+      }
+    }, 100)
+    this.$_initResizeEvent()
+    this.$_initSidebarResizeEvent()
+  },
+  beforeDestroy() {
+    this.$_destroyResizeEvent()
+    this.$_destroySidebarResizeEvent()
+  },
+  // to fixed bug when cached by keep-alive
+  // https://github.com/PanJiaChen/vue-element-admin/issues/2116
+  activated() {
+    this.$_initResizeEvent()
+    this.$_initSidebarResizeEvent()
+  },
+  deactivated() {
+    this.$_destroyResizeEvent()
+    this.$_destroySidebarResizeEvent()
+  },
+  methods: {
+    // use $_ for mixins properties
+    // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
+    $_initResizeEvent() {
+      window.addEventListener('resize', this.$_resizeHandler)
+    },
+    $_destroyResizeEvent() {
+      window.removeEventListener('resize', this.$_resizeHandler)
+    },
+    $_sidebarResizeHandler(e) {
+      if (e.propertyName === 'width') {
+        this.$_resizeHandler()
+      }
+    },
+    $_initSidebarResizeEvent() {
+      this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
+      this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
+    },
+    $_destroySidebarResizeEvent() {
+      this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
+    }
+  }
+}
diff --git a/src/views/report/visit/sexRpt.vue b/src/views/report/visit/sexRpt.vue
index d40d829..b2050fb 100644
--- a/src/views/report/visit/sexRpt.vue
+++ b/src/views/report/visit/sexRpt.vue
@@ -31,6 +31,7 @@
         </el-table>
       </div>
       <div v-else>
+        <pie-chart :chartData="rptData" />
       </div>
     </div>
 
@@ -38,12 +39,14 @@
 </template>
 <script>
   import LxHeader from "@/components/LxHeader/index.vue";
+  import PieChart from './components/PieChart'
   import {
     sexRpt
   } from "@/api/report/visit.js";
   export default {
     components: {
-      LxHeader
+      LxHeader,
+      PieChart
     },
     created() {
       this.initLoad()
@@ -55,12 +58,16 @@
         showData: false,
         searchFields: {},
         tableData: [],
-        tableHeight: 0
+        tableHeight: 0,
+        rptData: {
+          yArr: [],
+          radiusArr: "50%"
+        }
       }
     },
-    methods: {
-      viewPart(){
-        this.showData=false;
+    methods: {
+      viewPart() {
+        this.showData = false;
       },
       initLoad() {
         var that = this;
@@ -73,10 +80,18 @@
       },
       load() {
         this.showData = true;
+        var arr = [];
         sexRpt().then((res) => {
           for (var m of res) {
             m.per = (m.use_total / (m.plan_total == 0 ? 1 : m.plan_total)) * 100 + "%"
+
+            arr.push({
+              name: m.sex_name,
+              value: m.plan_total
+            })
           }
+
+          this.rptData.yArr = arr;
           this.tableData = res;
         }).catch((res) => {})
       }