fix；调整统计图样式显示

src/views/peopleManages/taskStatistics/index.vue

@@ -2,10 +2,17 @@
     <div>
         <div class="jbd-title-cont"> 检测人员任务统计 </div>
         <div class="contain">
-            <el-date-picker v-model="monthValues" type="monthrange" align="right" unlink-panels range-separator="至"
-                start-placeholder="开始月份" end-placeholder="结束月份" :picker-options="pickerOptions">
-            </el-date-picker>
-            <div id="echart-line" :style="{ width: '100%', height: '100%' }"></div>
+            <div class="date">
+                统计时间:
+                <el-date-picker v-model="monthValues" type="monthrange" align="right" unlink-panels range-separator="至"
+                    start-placeholder="开始月份" end-placeholder="结束月份" :picker-options="pickerOptions"
+                    @change="changeDate">
+                </el-date-picker>
+            </div>
+            <div class="chart">
+                <div id="echart-line" :style="{ width: '100%', height: '100%', paddingRight: '10px' }"></div>
+            </div>
+
         </div>
 
         <el-dialog :visible.sync="dialogTableVisible">
@@ -84,41 +91,67 @@ export default {
                         type: 'shadow'
                     }
                 },
-                legend: {},
+                legend: {
+                    orient: 'vertical',
+                    right: '10',
+                    top: 'center'
+                },
                 grid: {
-                    left: '3%',
-                    right: '4%',
+                    left: '2%',
+                    right: '10%',
                     bottom: '3%',
                     containLabel: true
                 },
                 xAxis: {
                     type: 'value',
-                    boundaryGap: [0, 1]
+                    name: '任务数量(项)',
+                    boundaryGap: [0, 0]
                 },
                 yAxis: {
                     type: 'category',
+                    name: '检测人员',
                     data: []
                 },
                 series: [
                     {
                         name: '检测未完成数',
                         type: 'bar',
-                        data: []
+                        data: [],
+                        label: {
+                            show: true,
+                            position: 'right',
+                            valueAnimation: true
+                        }
                     },
                     {
                         name: '检测已完成数',
                         type: 'bar',
-                        data: []
+                        data: [],
+                        label: {
+                            show: true,
+                            position: 'right',
+                            valueAnimation: true
+                        }
                     },
                     {
                         name: '复核未完成数',
                         type: 'bar',
-                        data: []
+                        data: [],
+                        label: {
+                            show: true,
+                            position: 'right',
+                            valueAnimation: true
+                        }
                     },
                     {
                         name: '复核已完成数',
                         type: 'bar',
-                        data: []
+                        data: [],
+                        label: {
+                            show: true,
+                            position: 'right',
+                            valueAnimation: true
+                        }
                     }
                 ]
             },
@@ -159,29 +192,6 @@ export default {
             loading: false
         };
     },
-    watch: {
-        monthValues: {
-            handler: function (val, oldVal) {
-                // console.log("val1:", val[0].getFullYear() + '-' + (val[0].getMonth() + 1) + '-' + val[0].getDate())
-                // console.log("val2:", val[1].getFullYear() + '-' + (val[1].getMonth() + 1) + '-' + val[1].getDate())
-                this.startDate = val[0].getFullYear() + '-' + (val[0].getMonth() + 1) + '-' + val[0].getDate()
-                if (val[0] = val[1]) {
-                    let year = val[1].getFullYear()
-                    let month = val[1].getMonth() + 1
-                    // 这里传入的是整数时间，返回的是下个月的第一天，因为月份是0-11
-                    let nextMonthFirthDay = new Date(year, month, 1) // 下个月的第一天
-                    let oneDay = 1000 * 60 * 60 * 24 // 一天的时间毫秒数
-                    let endDay = new Date(nextMonthFirthDay - oneDay)
-                    let day = endDay.getDate() // 本月最后一天
-                    this.endDate = val[1].getFullYear() + '-' + (val[1].getMonth() + 1) + '-' + day
-                } else {
-                    this.endDate = val[1].getFullYear() + '-' + (val[1].getMonth() + 1) + '-' + val[1].getDate()
-                }
-                this.chartLoading()
-            },
-            immediate: true
-        },
-    },
     computed: {},
     methods: {
         initChart() {
@@ -341,6 +351,18 @@ export default {
                     this.formDataFiiter.push(this.formData[i])
                 }
             }
+        },
+        changeDate(value) {
+            let year = value[1].getFullYear()
+            let month = value[1].getMonth() + 1
+            // 这里传入的是整数时间，返回的是下个月的第一天，因为月份是0-11
+            let nextMonthFirthDay = new Date(year, month, 1) // 下个月的第一天
+            let oneDay = 1000 * 60 * 60 * 24 // 一天的时间毫秒数
+            let endDay = new Date(nextMonthFirthDay - oneDay)
+            let day = endDay.getDate() // 本月最后一天
+            this.endDate = value[1].getFullYear() + '-' + (value[1].getMonth() + 1) + '-' + day
+            this.startDate = value[0].getFullYear() + '-' + (value[0].getMonth() + 1) + '-' + value[0].getDate()
+            this.chartLoading()
         }
     },
     created() {
@@ -360,6 +382,21 @@ export default {
     border-left: 1px solid #dfdcdc;
 }
 
+.date {
+    text-align: right;
+    padding-right: 20px;
+}
+
+.chart {
+    width: 95%;
+    height: 800px;
+    // padding-right: 20px;
+}
+
+// #echart-line {
+//     margin-right: 10px;
+// }
+
 .jbd-title-cont {
     text-align: center;
     font-weight: bold;
@@ -378,6 +415,8 @@ export default {
     border: 1px solid rgb(241, 238, 238);
 }
 
+
+
 /deep/ .el-dialog {
     height: 700px;
     width: 80%;