bug修改 修改echars

package.json

@@ -35,6 +35,7 @@
     "core-js": "3.25.3",
     "echarts": "^5.4.0",
     "element-china-area-data": "^5.0.2",
+    "element-resize-detector": "^1.2.4",
     "element-ui": "2.15.12",
     "file-saver": "2.0.5",
     "fuse.js": "6.4.3",
@@ -68,14 +69,14 @@
     "connect": "3.6.6",
     "eslint": "7.15.0",
     "eslint-plugin-vue": "7.2.0",
+    "husky": "^8.0.0",
     "lint-staged": "10.5.3",
     "runjs": "4.4.2",
     "sass": "1.32.13",
     "sass-loader": "10.1.1",
     "script-ext-html-webpack-plugin": "2.1.5",
     "svg-sprite-loader": "5.1.1",
-    "vue-template-compiler": "2.6.12",
-    "husky": "^8.0.0"
+    "vue-template-compiler": "2.6.12"
   },
   "engines": {
     "node": ">=8.9",

src/views/data-statistics/echars-components/china-map-bigger.vue

@@ -189,9 +189,13 @@ export default {
           // }
         ]
       })
-      window.addEventListener('resize', () => {
-        // 自动渲染echarts
-        mapChart.resize()
+      const elementResizeDetectorMaker = require('element-resize-detector')
+      const erd = elementResizeDetectorMaker()
+      erd.listenTo(this.$refs.mapChart, () => {
+        this.$nextTick(function() {
+          // 使echarts尺寸重置
+          mapChart.resize()
+        })
       })
     }
 

src/views/data-statistics/echars-components/china-map.vue

@@ -189,9 +189,13 @@ export default {
           // }
         ]
       })
-      window.addEventListener('resize', () => {
-        // 自动渲染echarts
-        mapChart.resize()
+      const elementResizeDetectorMaker = require('element-resize-detector')
+      const erd = elementResizeDetectorMaker()
+      erd.listenTo(this.$refs.mapChart, () => {
+        this.$nextTick(function() {
+          // 使echarts尺寸重置
+          mapChart.resize()
+        })
       })
     }
 

src/views/data-statistics/echars-components/columnarChart.vue

@@ -3,6 +3,7 @@
 </template>
 
 <script>
+
 export default {
   name: 'ColumnarChart',
   props: ['title', 'startColor', 'endColor', 'label', 'unit', 'xData', 'yData', 'name'],
@@ -127,6 +128,14 @@ export default {
           }
         ]
       })
+      const elementResizeDetectorMaker = require('element-resize-detector')
+      const erd = elementResizeDetectorMaker()
+      erd.listenTo(this.$refs.columnar, () => {
+        this.$nextTick(function() {
+          // 使echarts尺寸重置
+          mapChart.resize()
+        })
+      })
     }
   }
 }

src/views/data-statistics/echars-components/crosswiseColumnarChart.vue

@@ -107,6 +107,14 @@ export default {
           }
         ]
       })
+      const elementResizeDetectorMaker = require('element-resize-detector')
+      const erd = elementResizeDetectorMaker()
+      erd.listenTo(this.$refs.CrosswiseColumnar, () => {
+        this.$nextTick(function() {
+          // 使echarts尺寸重置
+          mapChart.resize()
+        })
+      })
     }
   }
 }

src/views/data-statistics/echars-components/crosswiseColumnarChartOneLine.vue

@@ -5,6 +5,7 @@
 </template>
 
 <script>
+
 export default {
   name: 'CrosswiseColumnarChartOneLine',
   props: ['title', 'yData', 'xData', 'unit'],
@@ -84,6 +85,14 @@ export default {
           }
         ]
       })
+      const elementResizeDetectorMaker = require('element-resize-detector')
+      const erd = elementResizeDetectorMaker()
+      erd.listenTo(this.$refs.CrosswiseColumnar, () => {
+        this.$nextTick(function() {
+          // 使echarts尺寸重置
+          mapChart.resize()
+        })
+      })
     }
   }
 }

src/views/data-statistics/echars-components/oneLineChart.vue

@@ -3,6 +3,7 @@
 </template>
 
 <script>
+
 export default {
   name: 'OneLineChart',
   props: {
@@ -124,8 +125,13 @@ export default {
           disabled: true
         }
       })
-      window.addEventListener('resize', function() {
-        mapChart.resize()
+      const elementResizeDetectorMaker = require('element-resize-detector')
+      const erd = elementResizeDetectorMaker()
+      erd.listenTo(this.$refs.towLine, () => {
+        this.$nextTick(function() {
+          // 使echarts尺寸重置
+          mapChart.resize()
+        })
       })
     }
   }

src/views/data-statistics/echars-components/pileUpChart.vue

@@ -3,6 +3,7 @@
 </template>
 
 <script>
+
 export default {
   name: 'PileUpChart',
   props: ['yData1', 'yData2', 'yData3'],
@@ -104,6 +105,15 @@ export default {
           }
         ]
       })
+
+      const elementResizeDetectorMaker = require('element-resize-detector')
+      const erd = elementResizeDetectorMaker()
+      erd.listenTo(this.$refs.pileUp, () => {
+        this.$nextTick(function() {
+          // 使echarts尺寸重置
+          mapChart.resize()
+        })
+      })
     }
   }
 }

src/views/data-statistics/echars-components/radar-chart-for-hospital.vue

@@ -126,6 +126,15 @@ export default {
           }
         ]
       })
+
+      const elementResizeDetectorMaker = require('element-resize-detector')
+      const erd = elementResizeDetectorMaker()
+      erd.listenTo(this.$refs.radarMap, () => {
+        this.$nextTick(function() {
+          // 使echarts尺寸重置
+          mapChart.resize()
+        })
+      })
     }
   }
 }

src/views/data-statistics/echars-components/radar-chart-for-petowner-hospital.vue

@@ -120,6 +120,15 @@ export default {
           }
         ]
       })
+
+      const elementResizeDetectorMaker = require('element-resize-detector')
+      const erd = elementResizeDetectorMaker()
+      erd.listenTo(this.$refs.radarMap, () => {
+        this.$nextTick(function() {
+          // 使echarts尺寸重置
+          mapChart.resize()
+        })
+      })
     },
     formatMax(max) {
       const temp = max % 5

src/views/data-statistics/echars-components/radar-chart-for-petowner-platfrom.vue

@@ -5,6 +5,7 @@
 </template>
 
 <script>
+
 export default {
   name: 'RadarChartForPetOwnerPlatform',
   props: ['yData1', 'yData2', 'max'],
@@ -121,6 +122,15 @@ export default {
           }
         ]
       })
+
+      const elementResizeDetectorMaker = require('element-resize-detector')
+      const erd = elementResizeDetectorMaker()
+      erd.listenTo(this.$refs.radarMap, () => {
+        this.$nextTick(function() {
+          // 使echarts尺寸重置
+          mapChart.resize()
+        })
+      })
     },
     formatMax(max) {
       const temp = max % 5

src/views/data-statistics/echars-components/radar-chart-one-line-bigger.vue

@@ -98,6 +98,14 @@ export default {
           }
         ]
       })
+      const elementResizeDetectorMaker = require('element-resize-detector')
+      const erd = elementResizeDetectorMaker()
+      erd.listenTo(this.$refs.radarMap, () => {
+        this.$nextTick(function() {
+          // 使echarts尺寸重置
+          mapChart.resize()
+        })
+      })
     }
   }
 }

src/views/data-statistics/echars-components/radar-chart-one-linel.vue

@@ -5,6 +5,7 @@
 </template>
 
 <script>
+
 export default {
   name: 'RadarChartOneLine',
   props: ['title', 'yData', 'name', 'indicator', 'lineStartColor', 'lineEndColor', 'areaStartColor', 'areaEndColor'],
@@ -98,6 +99,14 @@ export default {
           }
         ]
       })
+      const elementResizeDetectorMaker = require('element-resize-detector')
+      const erd = elementResizeDetectorMaker()
+      erd.listenTo(this.$refs.radarMap, () => {
+        this.$nextTick(function() {
+          // 使echarts尺寸重置
+          mapChart.resize()
+        })
+      })
     }
   }
 }

src/views/data-statistics/echars-components/twoLineChart.vue

@@ -166,8 +166,14 @@ export default {
           disabled: true
         }
       })
-      window.addEventListener('resize', function() {
-        mapChart.resize()
+
+      const elementResizeDetectorMaker = require('element-resize-detector')
+      const erd = elementResizeDetectorMaker()
+      erd.listenTo(this.$refs.towLine, () => {
+        this.$nextTick(function() {
+          // 使echarts尺寸重置
+          mapChart.resize()
+        })
       })
     }
   }

src/views/data-statistics/echars-components/twoLineChartYNoUnit.vue

@@ -96,8 +96,8 @@ export default {
           x: 'center',
           y: 'top',
           data: [
-            _this.yData1.label + '(' + _this.yData1.unit + ')',
-            _this.yData2.label + '(' + _this.yData2.unit + ')'
+            _this.yData2.label + '(' + _this.yData2.unit + ')',
+            _this.yData1.label + '(' + _this.yData1.unit + ')'
           ]
         },
         // 悬浮框样式
@@ -113,16 +113,16 @@ export default {
             const color2 = _this.yData2.line_color
             return `<div>
                 <div>${axis[0].name}</div>
+                <div style="display: flex">
+                    <div style="background-color: ${color2};width: 10px;height: 10px;margin-top: 7px;margin-right:5px;border-radius: 10px"></div>
+                    <span>${label2}(${unit2})</span>
+                    <span style="margin-left: 5px;color: ${color2}">${axis[1].value}</span>
+                </div>
                 <div style="display: flex">
                     <div style="background-color: ${color1};width: 10px;height: 10px;margin-top: 7px;margin-right:5px;border-radius: 10px"></div>
                     <span>${label1}(${unit1})</span>
                     <span style="margin-left: 5px;color: ${color1}">${moneyFormat(axis[0].value)}</span>
                 </div>
-                <div style="display: flex">
-                    <div style="background-color: ${color2};width: 10px;height: 10px;margin-top: 7px;margin-right:5px;border-radius: 10px"></div>
-                    <span>${label2}(${unit2})</span>
-                    <span style="margin-left: 5px;color: ${color2}">${axis[1].value}</span>
-              </div>
             </div>`
           }
         },
@@ -170,6 +170,14 @@ export default {
           disabled: true
         }
       })
+      const elementResizeDetectorMaker = require('element-resize-detector')
+      const erd = elementResizeDetectorMaker()
+      erd.listenTo(this.$refs.towLineNoUnit, () => {
+        this.$nextTick(function() {
+          // 使echarts尺寸重置
+          mapChart.resize()
+        })
+      })
     }
   }
 }

src/views/data-statistics/pet-data-statistics/pet-data-statistics.vue

@@ -10,7 +10,7 @@
             </div>
             <el-row :gutter="14">
               <el-col :span="6">
-                <div class="pet_info_statistics pet_info_statistics_register_owner">
+                <div class="pet_info_statistics pet_info_statistics_register_owner" :style="{backgroundImage: 'url(' + require('../../../assets/data_statistics/chongzhutongji_img_chongzhu.png') + ')'}">
                   <div style="display: flex;">
                     <div class="numberColor">{{ formatNum(customerStatistics.registerOwnerNum || 0) }}</div>
                     <div class="fontColor">人</div>
@@ -24,7 +24,7 @@
                 </div>
               </el-col>
               <el-col :span="6">
-                <div class="pet_info_statistics pet_info_statistics_yifuwucz">
+                <div class="pet_info_statistics pet_info_statistics_yifuwucz" :style="{backgroundImage: 'url(' + require('../../../assets/data_statistics/chongzhutongji_img_yifuwu.png') + ')'}">
                   <div style="display: flex;">
                     <div class="numberColor">{{ formatNum(customerStatistics.serviceOwnerNum || 0) }}</div>
                     <div class="fontColor">人</div>
@@ -38,7 +38,7 @@
                 </div>
               </el-col>
               <el-col :span="6">
-                <div class="pet_info_statistics pet_info_statistics_register_pet">
+                <div class="pet_info_statistics pet_info_statistics_register_pet" :style="{backgroundImage: 'url(' + require('../../../assets/data_statistics/chongzhutongji_img_zhucechongzhu.png') + ')'}">
                   <div style="display: flex;">
                     <div class="numberColor">{{ formatNum(customerStatistics.registerPetNum || 0) }}</div>
                     <div class="fontColor">只</div>
@@ -52,7 +52,7 @@
                 </div>
               </el-col>
               <el-col :span="6">
-                <div class="pet_info_statistics pet_info_statistics_yifuwucw">
+                <div class="pet_info_statistics pet_info_statistics_yifuwucw" :style="{backgroundImage: 'url(' + require('../../../assets/data_statistics/chongzhutongji_imgfuwuchongzhu.png') + ')'}">
                   <div style="display: flex;">
                     <div class="numberColor">{{ formatNum(customerStatistics.servicePetNum || 0) }}</div>
                     <div class="fontColor">只</div>
@@ -318,7 +318,7 @@
             </div>
             <el-row :gutter="14">
               <el-col :span="6">
-                <div class="pet_info_statistics pet_info_statistics_register_owner">
+                <div class="pet_info_statistics pet_info_statistics_register_owner" :style="{backgroundImage: 'url(' + require('../../../assets/data_statistics/chongzhutongji_img_chongzhu.png') + ')'}">
                   <div style="display: flex;">
                     <div class="numberColor">{{ formatNum(customerStatistics.customersNum || 0) }}</div>
                     <div class="fontColor">人</div>
@@ -332,7 +332,7 @@
                 </div>
               </el-col>
               <el-col :span="6">
-                <div class="pet_info_statistics pet_info_statistics_yifuwucz">
+                <div class="pet_info_statistics pet_info_statistics_yifuwucz" :style="{backgroundImage: 'url(' + require('../../../assets/data_statistics/chongzhutongji_img_yifuwu.png') + ')'}">
                   <div style="display: flex;">
                     <div class="numberColor">{{ formatNum(customerStatistics.membersNum || 0) }}</div>
                     <div class="fontColor">人</div>
@@ -346,7 +346,7 @@
                 </div>
               </el-col>
               <el-col :span="6">
-                <div class="pet_info_statistics pet_info_statistics_register_pet">
+                <div class="pet_info_statistics pet_info_statistics_register_pet" :style="{backgroundImage: 'url(' + require('../../../assets/data_statistics/chongzhutongji_img_zhucechongzhu.png') + ')'}">
                   <div style="display: flex;">
                     <div class="numberColor">{{ formatNum(customerStatistics.servicePetNum || 0) }}</div>
                     <div class="fontColor">只</div>
@@ -360,7 +360,7 @@
                 </div>
               </el-col>
               <el-col :span="6">
-                <div class="pet_info_statistics pet_info_statistics_vipBalance">
+                <div class="pet_info_statistics pet_info_statistics_vipBalance" :style="{backgroundImage: 'url(' + require('../../../assets/data_statistics/chongzhutongji_img_kayue.png') + ')'}">
                   <div style="display: flex;">
                     <div class="numberColor">{{ formatNum(customerStatistics.memberAmount || 0) }}</div>
                     <div class="fontColor">元</div>
@@ -892,7 +892,6 @@ export default {
   //padding-right: 16px;
 }
 .pet_info_statistics_register_owner {
-  background-image: url("../../../assets/data_statistics/chongzhutongji_img_chongzhu.png");
   background-size: 100% 103px;
   .numberColor {
     font-size: 24px;
@@ -925,7 +924,6 @@ export default {
   }
 }
 .pet_info_statistics_yifuwucz {
-  background-image: url("../../../assets/data_statistics/chongzhutongji_img_yifuwu.png");
   background-size: 100% 103px;
   .numberColor {
     font-size: 24px;
@@ -958,7 +956,6 @@ export default {
   }
 }
 .pet_info_statistics_register_pet {
-  background-image: url("../../../assets/data_statistics/chongzhutongji_img_zhucechongzhu.png");
   background-size: 100% 103px;
   .numberColor {
     font-size: 24px;
@@ -991,7 +988,6 @@ export default {
   }
 }
 .pet_info_statistics_yifuwucw {
-  background-image: url("../../../assets/data_statistics/chongzhutongji_imgfuwuchongzhu.png");
   background-size: 100% 103px;
   .numberColor {
     font-size: 24px;
@@ -1024,7 +1020,6 @@ export default {
   }
 }
 .pet_info_statistics_vipBalance {
-  background-image: url("../../../assets/data_statistics/chongzhutongji_img_kayue.png");
   background-size: 100% 103px;
   .numberColor {
     font-size: 24px;

src/views/data-statistics/service-statistics/service-statistics.vue

@@ -53,7 +53,7 @@
                     </div>
                   </el-col>
                   <el-col :span="6">
-                    <div class="service_info_statistics service_info_statistics_income">
+                    <div class="service_info_statistics service_info_statistics_income" :style="{backgroundImage: 'url(' + require('../../../assets/data_statistics/yewu_mg_shouyi.png') + ')'}">
                       <div style="display: flex;">
                         <div class="numberColor">{{ formatNum(businessInformation.appointmentsAmount || 0) }}</div>
                         <div class="fontColor">元</div>
@@ -883,7 +883,7 @@ export default {
             this.yData1.data = res.data.appointmentStatus.appointmentYear.map(obj => { return obj.payAmount })
             this.yData2.data = res.data.appointmentStatus.appointmentYear.map(obj => { return obj.number })
             this.yData1Month.data = res.data.appointmentStatus.appointmentMonth.map(obj => { return obj.payAmount })
-            this.yData2Month.data = res.data.appointmentStatus.appointmentMonth.map(obj => { return obj.regNumber })
+            this.yData2Month.data = res.data.appointmentStatus.appointmentMonth.map(obj => { return obj.number })
           }
           this.mapData = res.data.regionalDistribution || []
           this.orderRank = res.data.appointmentCount || []
@@ -1458,6 +1458,6 @@ export default {
   height: 468px;
 }
 .mapDiv {
-  height: 685px;
+  height: 674px;
 }
 </style>