From 73ac8490cbc359d62f3bd32d927094450d2f7f90 Mon Sep 17 00:00:00 2001
From: lSun <15893999301@qq.com>
Date: Mon, 23 Dec 2024 18:53:43 +0800
Subject: [PATCH] =?UTF-8?q?=E6=95=B0=E6=8D=AE=E7=9C=8B=E6=9D=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/dashboard/bottomTwo.vue | 228 +++++++++++++++---------------
 1 file changed, 117 insertions(+), 111 deletions(-)

diff --git a/src/views/dashboard/bottomTwo.vue b/src/views/dashboard/bottomTwo.vue
index 0ab2804..bc311ff 100644
--- a/src/views/dashboard/bottomTwo.vue
+++ b/src/views/dashboard/bottomTwo.vue
@@ -1,134 +1,140 @@
 <template>
-    <div class="content"> 
-        <div class="content-box">
-            <div class="title-box">
-                <div style="margin-left: 10px;font-size: 22px;font-weight: bold;">当月异常统计</div>
-            </div>
-            <div class="chart-box" @click="toggleDialog(12)">
-                <div id="barBox" style="width: 100%;height: 400px;"></div>
-            </div>
-        </div>
+  <div class="content">
+    <div class="content-box">
+      <div class="title-box">
+        <div style="margin-left: 10px;font-size: 22px;font-weight: bold;">当月异常统计</div>
+      </div>
+      <div class="chart-box" @click="toggleDialog(12)">
+        <div id="barBox" style="width: 100%;height: 400px;"></div>
+      </div>
     </div>
+  </div>
 </template>
 
 <script>
 import * as echarts from 'echarts';
+
 export default {
-    components: {
-        
+  components: {},
+  name: 'bottomTwo',
+  props: {
+    pageData: {
+      // required: true,
+      type: Object,
+      default: {
+        addressErrorNum: 0,
+        earlyNum: 0,
+        einErrorNum: 0,
+        lateNum: 0,
+        leaveNum: 0,
+        skippingNum: 0
+      }
     },
-    name: 'bottomTwo',
-    props: {
-        pageData: {
-            // required: true,
-            type: Object,
-            default:{
-                addressErrorNum:0,
-                earlyNum:0,
-                einErrorNum:0,
-                lateNum:0,
-                leaveNum:0,
-                skippingNum:0
-            }
-        },
-  
-    },
-    data() {
-        return {
-            pieCharts: null,
-            dateTime:"",
-            barYData:[22, 18, 11, 23, 29, 33]
-        }
-    },
-    watch: {
-        pageData: {
-            handler() {
-                this.getInitData()
-            },
-            immediate: true
-        }
-    },
-    created() {
+
+  },
+  data() {
+    return {
+      pieCharts: null,
+      dateTime: "",
+      barYData: [22, 18, 11, 23, 29, 33]
+    }
+  },
+  watch: {
+    pageData: {
+      handler() {
+        this.getInitData()
+      },
+      immediate: true
+    }
+  },
+  created() {
+
+  },
+  mounted() {
+    this.getInitData()
+  },
+  methods: {
+    getInitData() {
+      setTimeout(() => {
+        this.barYData = [Number(this.pageData.lateNum), Number(this.pageData.earlyNum), Number(this.pageData.skippingNum), Number(this.pageData.leaveNum), Number(this.pageData.addressErrorNum), Number(this.pageData.einErrorNum)]
+        console.log(this.barYData)
+        this.initChart()
+      }, 500)
 
     },
-    mounted() { 
-        this.getInitData()
+    initChart() {
+      this.pieCharts = echarts.init(document.getElementById('barBox'))
+      var option = {
+        grid: {
+          left: '5%',
+          right: '5%',
+          bottom: '5%',
+          top: '5%',
+          containLabel: true,
+        },
+        xAxis: {
+          data: ['迟到', '早退', '旷工', '请假', '打卡地异常', '出入异常']
+        },
+        yAxis: {},
+        series: [{
+          type: 'bar',
+          data: this.barYData,
+          itemStyle: {
+            color: "#157DF3"
+          },
+          label: {
+            show: true, // 显示标签
+            position: 'top', // 设置标签的位置在柱子的上方
+            formatter: '{c}' // 显示的数据格式，这里显示的是原始数值
+          }
+        }]
+      };
+      this.pieCharts.setOption(option)
+      // 监听柱状图的点击事件
+      this.pieCharts.on('click', function (params) {
+        // 控制台输出点击的数据的信息
+        console.log(params);
+        // 在这里添加你的点击事件逻辑
+        // 例如：弹窗显示点击的数据的详细信息
+        // alert('你点击的是：' + params.name);
+      });
+
     },
-    methods: {
-        getInitData(){
-            setTimeout(()=>{
-                this.barYData=[Number(this.pageData.lateNum),Number(this.pageData.earlyNum),Number(this.pageData.skippingNum),Number(this.pageData.leaveNum),Number(this.pageData.addressErrorNum),Number(this.pageData.einErrorNum)]
-                console.log(this.barYData)
-                this.initChart()
-            },500)
-            
-        },
-        initChart(){
-            this.pieCharts = echarts.init(document.getElementById('barBox'))
-            var option = {
-                grid: {
-                    left: '5%',
-                    right: '5%',
-                    bottom: '5%',
-                    top: '5%',
-                    containLabel: true,
-                },
-                xAxis: {
-                    data: ['迟到', '早退', '旷工', '请假', '打卡地异常', '出入异常']
-                },
-                yAxis: {},
-                series: [{
-                    type: 'bar',
-                    data:this.barYData,
-                    itemStyle:{
-                        color:"#157DF3"
-                    }
-                }]
-            };
-            this.pieCharts.setOption(option) 
-            // 监听柱状图的点击事件
-            this.pieCharts.on('click', function (params) {
-                // 控制台输出点击的数据的信息
-                console.log(params);
-                // 在这里添加你的点击事件逻辑
-                // 例如：弹窗显示点击的数据的详细信息
-                // alert('你点击的是：' + params.name);
-            });
-            
-        },
-        toggleDialog(v) {
-            this.$emit('openDialog', { order: v })
-        },
+    toggleDialog(v) {
+      this.$emit('openDialog', {order: v})
     },
+  },
 }
 </script>
 
 <style lang="scss" scoped>
-.content{
+.content {
+  width: 100%;
+  height: 100%;
+  // padding-top: 20px;
+  .content-box {
     width: 100%;
     height: 100%;
-    // padding-top: 20px;
-    .content-box{
-        width: 100%;
-        height: 100%;
-        padding: 10px;
-        background-color: #fff;
-        border-radius: 10px;
-    }
-    .title-box{
-        width: 100%;
-        height: 30px;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
+    padding: 10px;
+    background-color: #fff;
+    border-radius: 10px;
+  }
+
+  .title-box {
+    width: 100%;
+    height: 30px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+  }
+
+  .chart-box {
+    width: 100%;
+    height: 450px;
+  }
 
-    }
-    .chart-box{
-        width: 100%;
-        height: 450px;
-    }
 
-  
 }
 
 </style>