From bd7e897e60e2b0233138df212e5e2eeab1f8e306 Mon Sep 17 00:00:00 2001
From: lukeyan <1727408482@qq.com>
Date: Mon, 21 Aug 2023 14:55:19 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9B=AD=E5=8C=BA=E8=BD=A6=E8=BE=86charts?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/publicMethod_lxy/esresize.js        | 105 ++++++++++++++++++
 .../compositeIndex/components/companyCar.vue  |  80 +++++++++----
 .../compositeIndex/components/companyNum.vue  |   6 +
 3 files changed, 172 insertions(+), 19 deletions(-)
 create mode 100644 src/utils/publicMethod_lxy/esresize.js

diff --git a/src/utils/publicMethod_lxy/esresize.js b/src/utils/publicMethod_lxy/esresize.js
new file mode 100644
index 0000000..89cab28
--- /dev/null
+++ b/src/utils/publicMethod_lxy/esresize.js
@@ -0,0 +1,105 @@
+var EleResize = {
+    _handleResize: function (e) {
+        var ele = e.target || e.srcElement
+        var trigger = ele.__resizeTrigger__
+        if (trigger) {
+            var handlers = trigger.__z_resizeListeners
+            if (handlers) {
+                var size = handlers.length
+                for (var i = 0; i < size; i++) {
+                var h = handlers[i]
+                var handler = h.handler
+                var context = h.context
+                handler.apply(context, [e])
+                }
+            }
+        }
+    },
+    _removeHandler: function (ele, handler, context) {
+        var handlers = ele.__z_resizeListeners
+        if (handlers) {
+            var size = handlers.length
+            for (var i = 0; i < size; i++) {
+                var h = handlers[i]
+                if (h.handler === handler && h.context === context) {
+                handlers.splice(i, 1)
+                return
+                }
+            }
+        }
+    },
+    _createResizeTrigger: function (ele) {
+        var obj = document.createElement('object')
+        obj.setAttribute('style',
+        'display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden;opacity: 0; pointer-events: none; z-index: -1;')
+        obj.onload = EleResize._handleObjectLoad
+        obj.type = 'text/html'
+        ele.appendChild(obj)
+        obj.data = 'about:blank'
+        return obj
+    },
+    _handleObjectLoad: function () {
+        this.contentDocument.defaultView.__resizeTrigger__ = this.__resizeElement__
+        this.contentDocument.defaultView.addEventListener('resize', EleResize._handleResize)
+    }
+}
+if (document.attachEvent) { // ie9-10
+    EleResize.on = function (ele, handler, context) {
+        var handlers = ele.__z_resizeListeners
+        if (!handlers) {
+        handlers = []
+        ele.__z_resizeListeners = handlers
+        ele.__resizeTrigger__ = ele
+        ele.attachEvent('onresize', EleResize._handleResize)
+        }
+        handlers.push({
+        handler: handler,
+        context: context
+        })
+    }
+    EleResize.off = function (ele, handler, context) {
+        var handlers = ele.__z_resizeListeners
+        if (handlers) {
+            EleResize._removeHandler(ele, handler, context)
+            if (handlers.length === 0) {
+                ele.detachEvent('onresize', EleResize._handleResize)
+                delete ele.__z_resizeListeners
+            }
+        }
+    }
+} else {
+    EleResize.on = function (ele, handler, context) {
+        var handlers = ele.__z_resizeListeners
+        if (!handlers) {
+            handlers = []
+            ele.__z_resizeListeners = handlers
+
+            if (getComputedStyle(ele, null).position === 'static') {
+                ele.style.position = 'relative'
+            }
+            var obj = EleResize._createResizeTrigger(ele)
+            ele.__resizeTrigger__ = obj
+            obj.__resizeElement__ = ele
+        }
+        handlers.push({
+            handler: handler,
+            context: context
+        })
+    }
+    EleResize.off = function (ele, handler, context) {
+        var handlers = ele.__z_resizeListeners
+        if (handlers) {
+            EleResize._removeHandler(ele, handler, context)
+            if (handlers.length === 0) {
+                var trigger = ele.__resizeTrigger__
+                if (trigger) {
+                    trigger.contentDocument.defaultView.removeEventListener('resize', EleResize._handleResize)
+                    ele.removeChild(trigger)
+                    delete ele.__resizeTrigger__
+                }
+                delete ele.__z_resizeListeners
+            }
+        }
+    }
+}
+export default EleResize
diff --git a/src/views/compositeIndex/components/companyCar.vue b/src/views/compositeIndex/components/companyCar.vue
index 1cc0511..c3dceb3 100644
--- a/src/views/compositeIndex/components/companyCar.vue
+++ b/src/views/compositeIndex/components/companyCar.vue
@@ -46,6 +46,7 @@
 <script>
 import { vehicleIn } from "@/api/safetyIndex";
 import * as echarts from "echarts";
+import EleResize from "@/utils/publicMethod_lxy/esresize";
 export default {
   name: "CompanyCar",
   data() {
@@ -81,11 +82,31 @@ export default {
       vehicleIn(params).then((res) => {
         this.out_car_num = res.total;
       });
+    },
+     // 获取当月前7天数组
+    get_day(day) {
+      let myDate = new Date(); //获取今天日期
+      myDate.setDate(myDate.getDate() - (day - 1)); //setDate() 方法用于设置一个月的某一天。
+      let dateArray = [];
+      let dateTemp;
+      let flag = 1;
+      for (let i = 1; i < day; i++) {
+        dateTemp = myDate.getDate() + "日";
+        dateArray.push(dateTemp);
+        myDate.setDate(myDate.getDate() + flag);
+      }
+      dateArray.push(myDate.getDate() + "日");
+      return dateArray;
     },
     init_chart() {
       let car_chart = document.getElementById("car_chart");
+      let resize_div = document.getElementById("car_chart");
       let myChart = echarts.init(car_chart);
-      const colors = ["#5470C6", "#EE6666", "#6633f0","#ECDE3D","#7df9ca"];
+      // echarts表自适应
+      EleResize.on(resize_div, () => {
+        myChart.resize();
+      });
+      const colors = ["#5470C6", "#EE6666", "#6633f0", "#ECDE3D", "#7df9ca"];
       let option = {
         color: colors,
         tooltip: {
@@ -94,9 +115,36 @@ export default {
             type: "cross",
           },
         },
-        legend: {},
+        legend: {
+          data: [
+            {
+              name: "今日进园区",
+              textStyle: {
+                color: "#fff",
+              },
+            },
+            {
+              name: "今日出园区",
+              textStyle: {
+                color: "#fff",
+              },
+            },
+            {
+              name: "上月进园区",
+              textStyle: {
+                color: "#fff",
+              },
+            },
+            {
+              name: "上月出园区",
+              textStyle: {
+                color: "#fff",
+              },
+            },
+          ],
+        },
         grid: {
-          top: "20%",
+          top: "30%",
           left: "15%",
           right: "10%",
           bottom: "12%",
@@ -117,7 +165,6 @@ export default {
               label: {
                 formatter: function (params) {
                   return (
-                    "Precipitation  " +
                     params.value +
                     (params.seriesData.length
                       ? ":" + params.seriesData[0].data
@@ -127,7 +174,7 @@ export default {
               },
             },
             // prettier-ignore
-            data: ['2016-1', '2016-2', '2016-3', '2016-4', '2016-5', '2016-6', '2016-7', '2016-8', '2016-9', '2016-10', '2016-11', '2016-12'],
+            data: this.get_day(7),
           },
           {
             type: "category",
@@ -144,7 +191,6 @@ export default {
               label: {
                 formatter: function (params) {
                   return (
-                    "Precipitation  " +
                     params.value +
                     (params.seriesData.length
                       ? ":" + params.seriesData[0].data
@@ -171,7 +217,7 @@ export default {
         ],
         series: [
           {
-            name: "",
+            name: "今日进园区",
             type: "line",
             xAxisIndex: 1,
             smooth: true,
@@ -179,43 +225,38 @@ export default {
               focus: "series",
             },
             data: [
-              2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0,
-              2.3,
+              2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 
             ],
           },
           {
-            name: "",
+            name: "今日出园区",
             type: "line",
             xAxisIndex: 1,
             smooth: true,
             emphasis: {
               focus: "series",
             },
-            data: [2.6, 5.9, 9.0, 26, 27, 70.7, 175.6, 170, 80, 18.8, 6.0, 2.3],
+            data: [2.6, 5.9, 9.0, 26, 27, 70.7, 175.6, ],
           },
           {
-            name: "",
+            name: "上月进园区",
             type: "line",
             smooth: true,
             emphasis: {
               focus: "series",
             },
             data: [
-              3.9, 5.9, 11.1, 18.7, 48.3, 69.2, 231.6, 46.6, 55.4, 18.4, 10.3,
-              0.7,
+              3.9, 5.9, 11.1, 18.7, 48.3, 69.2, 231.6, 
             ],
           },
           {
-            name: "",
+            name: "上月出园区",
             type: "line",
             smooth: true,
             emphasis: {
               focus: "series",
             },
-            data: [
-              3.9, 5.9, 22, 34, 48.3, 69.2, 123, 46.6, 22.9, 10, 4,
-              0.7,
-            ],
+            data: [3.9, 5.9, 22, 34, 48.3, 69.2, 123, ],
           },
         ],
       };
@@ -384,6 +425,7 @@ export default {
   }
   .car_chart {
     margin-left: 1vw;
+    margin-top: 1vh;
     width: 22vw;
     height: 18vh;
   }
diff --git a/src/views/compositeIndex/components/companyNum.vue b/src/views/compositeIndex/components/companyNum.vue
index b2e5200..36f645b 100644
--- a/src/views/compositeIndex/components/companyNum.vue
+++ b/src/views/compositeIndex/components/companyNum.vue
@@ -53,6 +53,7 @@
 </template>
 <script>
 import { statisticsAlarm, statisticsDanger } from "@/api/safetyIndex";
+import EleResize from "@/utils/publicMethod_lxy/esresize";
 import * as echarts from "echarts";
 export default {
   name: "CompanyNum",
@@ -112,7 +113,12 @@ export default {
         .map((item) => item.companyTypeSum)
         .slice(0, 4);
       let danger_charts = document.getElementById("company_danger_charts");
+      let resize_div = document.getElementById("company_danger_charts");
       let myChart = echarts.init(danger_charts);
+      // echarts表自适应
+      EleResize.on(resize_div, () => {
+        myChart.resize();
+      });
       let option = {
         grid: {
           top: "15%",
-- 
2.36.3