图表尺寸自适应

package-lock.json

@@ -13,6 +13,7 @@
         "axios": "^1.2.6",
         "echarts": "^5.4.1",
         "echarts-liquidfill": "^3.1.0",
+        "element-resize-detector": "^1.2.4",
         "moment": "^2.29.4",
         "pinia": "^2.0.16",
         "qs": "^6.11.0",
@@ -1298,6 +1299,11 @@
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
       "dev": true
     },
+    "node_modules/batch-processor": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/batch-processor/-/batch-processor-1.0.0.tgz",
+      "integrity": "sha512-xoLQD8gmmR32MeuBHgH0Tzd5PuSZx71ZsbhVxOCRbgktZEPe4SQy7s9Z50uPp0F/f7iw2XmkHN2xkgbMfckMDA=="
+    },
     "node_modules/binary-extensions": {
       "version": "2.2.0",
       "resolved": "https://registry.npmmirror.com/binary-extensions/-/binary-extensions-2.2.0.tgz",
@@ -1843,6 +1849,14 @@
       "dev": true,
       "peer": true
     },
+    "node_modules/element-resize-detector": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmmirror.com/element-resize-detector/-/element-resize-detector-1.2.4.tgz",
+      "integrity": "sha512-Fl5Ftk6WwXE0wqCgNoseKWndjzZlDCwuPTcoVZfCP9R3EHQF8qUtr3YUPNETegRBOKqQKPW3n4kiIWngGi8tKg==",
+      "dependencies": {
+        "batch-processor": "1.0.0"
+      }
+    },
     "node_modules/emoji-regex": {
       "version": "8.0.0",
       "resolved": "https://registry.npmmirror.com/emoji-regex/-/emoji-regex-8.0.0.tgz",
@@ -7468,6 +7482,11 @@
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
       "dev": true
     },
+    "batch-processor": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/batch-processor/-/batch-processor-1.0.0.tgz",
+      "integrity": "sha512-xoLQD8gmmR32MeuBHgH0Tzd5PuSZx71ZsbhVxOCRbgktZEPe4SQy7s9Z50uPp0F/f7iw2XmkHN2xkgbMfckMDA=="
+    },
     "binary-extensions": {
       "version": "2.2.0",
       "resolved": "https://registry.npmmirror.com/binary-extensions/-/binary-extensions-2.2.0.tgz",
@@ -7922,6 +7941,14 @@
       "dev": true,
       "peer": true
     },
+    "element-resize-detector": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmmirror.com/element-resize-detector/-/element-resize-detector-1.2.4.tgz",
+      "integrity": "sha512-Fl5Ftk6WwXE0wqCgNoseKWndjzZlDCwuPTcoVZfCP9R3EHQF8qUtr3YUPNETegRBOKqQKPW3n4kiIWngGi8tKg==",
+      "requires": {
+        "batch-processor": "1.0.0"
+      }
+    },
     "emoji-regex": {
       "version": "8.0.0",
       "resolved": "https://registry.npmmirror.com/emoji-regex/-/emoji-regex-8.0.0.tgz",

package.json

@@ -13,6 +13,7 @@
     "axios": "^1.2.6",
     "echarts": "^5.4.1",
     "echarts-liquidfill": "^3.1.0",
+    "element-resize-detector": "^1.2.4",
     "moment": "^2.29.4",
     "pinia": "^2.0.16",
     "qs": "^6.11.0",

src/components/business/analysis/all/businessEnergyChart.vue

@@ -186,6 +186,7 @@ export default {
     init() {
       let chart = this.$echarts.init(this.$refs.myChart)
       this.chart = chart;
+      this.$util.chartsResize(this.chart);
       chart.setOption(this.option)
       this.getData()
     },

src/components/business/analysis/all/businessEnergyDistributeChart.vue

@@ -66,6 +66,7 @@ export default {
     init() {
       let chart = this.$echarts.init(this.$refs.myChart);
       this.chart = chart;
+      this.$util.chartsResize(this.chart);
       this.getData()
     },
     getData() {

src/components/business/analysis/cold/BusinessColdChart.vue

@@ -104,6 +104,7 @@ export default {
     init() {
       let chart = this.$echarts.init(this.$refs.myChart)
       this.chart = chart;
+      this.$util.chartsResize(this.chart);
       chart.setOption(this.option)
       this.getData()
     },

src/components/business/analysis/electric/BusinessElectricChart.vue

@@ -150,6 +150,7 @@ export default {
     init() {
       let chart = this.$echarts.init(this.$refs.myChart)
       this.chart = chart;
+      this.$util.chartsResize(this.chart);
       chart.setOption(this.option)
       this.getData()
     },

src/components/business/analysis/electric/BusinessElectricDistributeChart.vue

@@ -47,6 +47,7 @@ export default {
     initChart() {
       let chart = this.$echarts.init(this.$refs.myChart)
       this.chart = chart;
+      this.$util.chartsResize(this.chart);
       chart.setOption(this.option)
       this.getData();
     },

src/components/business/analysis/hot/BusinessHotChart.vue

@@ -85,6 +85,7 @@ export default {
     init() {
       let chart = this.$echarts.init(this.$refs.myChart)
       this.chart = chart;
+      this.$util.chartsResize(this.chart);
       chart.setOption(this.option)
       this.getData()
     },

src/components/business/analysis/hot/BusinessHotDistributeChart.vue

@@ -48,6 +48,7 @@ export default {
     initChart() {
       let chart = this.$echarts.init(this.$refs.myChart)
       this.chart = chart;
+      this.$util.chartsResize(this.chart);
       this.getData()
     },
     getData() {

src/components/business/analysis/pv/BusinessPvChart.vue

@@ -102,6 +102,7 @@ export default {
     init() {
       let chart = this.$echarts.init(this.$refs.myChart)
       this.chart = chart;
+      this.$util.chartsResize(this.chart);
       chart.setOption(this.option)
       this.getData()
     },

src/components/business/analysis/pv/BusinessPvMoneyChart.vue

@@ -126,6 +126,7 @@ export default {
     init() {
       let chart = this.$echarts.init(this.$refs.myChart)
       this.chart = chart;
+      this.$util.chartsResize(this.chart);
       chart.setOption(this.option)
       this.getData()
     },

src/components/business/analysis/water/BusinessWaterChart.vue

@@ -125,6 +125,7 @@ export default {
     init() {
       let chart = this.$echarts.init(this.$refs.myChart)
       this.chart = chart;
+      this.$util.chartsResize(this.chart);
       chart.setOption(this.option)
       this.getData()
     },

src/components/business/analysis/water/BusinessWaterDistributeChart.vue

@@ -47,6 +47,7 @@ export default {
     initChart() {
       let chart = this.$echarts.init(this.$refs.myChart)
       this.chart = chart;
+      this.$util.chartsResize(this.chart);
       chart.setOption(this.option)
       this.getData()
     },

src/components/business/asset/charts/assetMoneyRepairChart.vue

@@ -60,6 +60,7 @@ export default {
     initChart() {
       let chart = this.$echarts.init(this.$refs.myChart)
       this.chart = chart;
+      this.$util.chartsResize(this.chart);
       chart.setOption(this.option);
       this.getData()
     },

src/components/business/asset/charts/assetRankChart.vue

@@ -182,6 +182,7 @@ export default {
     init() {
       let chart = this.$echarts.init(this.$refs.myChart);
       this.chart = chart;
+      this.$util.chartsResize(this.chart);
       //chart.setOption(this.option)
       this.getData()
     },

src/components/business/space/charts/spaceCostChart.vue

@@ -127,6 +127,7 @@ export default {
     init() {
       let chart = this.$echarts.init(this.$refs.myChart)
       this.chart = chart;
+      this.$util.chartsResize(this.chart);
       chart.setOption(this.option)
       this.getData()
     },

src/components/common/coreData.vue

@@ -18,6 +18,10 @@ export default {
   },
   mounted() {
     this.resize();
+    let app = this;
+    this.$util.erd.listenTo(document.getElementsByClassName("coreData"), function () {
+      app.resize()
+    })
   },
   methods: {
     requireImg,

src/components/dashboard/more/carbonOverviewChart.vue

@@ -85,6 +85,7 @@ export default {
     init() {
       let chart = this.$echarts.init(this.$refs.myChart);
       this.chart = chart;
+      this.$util.chartsResize(this.chart);
       chart.setOption(this.options);
       this.getData();
     },

src/components/dashboard/more/pv/pvPowerProfitChart.vue

@@ -50,6 +50,7 @@ export default {
     initChart() {
       let chart = this.$echarts.init(this.$refs.myChart)
       this.chart = chart;
+      this.$util.chartsResize(this.chart);
       chart.setOption(this.option)
     },
     getData() {

src/components/dashboard/more/pv/pvPowerSummaryChart.vue

@@ -106,6 +106,7 @@ export default {
     initChart() {
       let chart = this.$echarts.init(this.$refs.myChart)
       this.chart = chart;
+      this.$util.chartsResize(this.chart);
       chart.setOption(this.option)
     },
     getData() {

src/components/dashboard/portrait/cold/coldTrendChart.vue

@@ -125,6 +125,7 @@ export default {
     initChart() {
       let chart = this.$echarts.init(this.$refs.myChart)
       this.chart = chart;
+      this.$util.chartsResize(this.chart);
       chart.setOption(this.option)
       this.getData();
     },

src/components/dashboard/portrait/electricity/electricityDistributionChart.vue

@@ -47,6 +47,7 @@ export default {
     initChart() {
       let chart = this.$echarts.init(this.$refs.myChart)
       this.chart = chart;
+      this.$util.chartsResize(this.chart);
       chart.setOption(this.option);
       this.getData();
     },

src/components/dashboard/portrait/electricity/electricityUseChart.vue

@@ -106,6 +106,7 @@ export default {
     initChart() {
       let chart = this.$echarts.init(this.$refs.myChart)
       this.chart = chart;
+      this.$util.chartsResize(this.chart);
       chart.setOption(this.option)
       this.getData()
     },

src/components/dashboard/portrait/hot/hotTrendChart.vue

@@ -125,6 +125,7 @@ export default {
     initChart() {
       let chart = this.$echarts.init(this.$refs.myChart)
       this.chart = chart;
+      this.$util.chartsResize(this.chart);
       chart.setOption(this.option)
       this.getData();
     },

src/components/dashboard/portrait/money/investYearChart.vue

@@ -95,6 +95,7 @@ export default {
     init() {
       let chart = this.$echarts.init(this.$refs.myChart);
       this.chart = chart;
+      this.$util.chartsResize(this.chart);
       chart.setOption(this.option);
       this.getData();
     },

src/components/dashboard/portrait/person/personTrendChart.vue

@@ -158,6 +158,7 @@ export default {
     initChart() {
       let chart = this.$echarts.init(this.$refs.myChart)
       this.chart = chart;
+      this.$util.chartsResize(this.chart);
       chart.setOption(this.option)
       for (let i = 0; i < 5; i++) {
         setTimeout(function () {

src/components/dashboard/portrait/restaurant/restaurantTrendChart.vue

@@ -154,6 +154,7 @@ export default {
     initChart() {
       let chart = this.$echarts.init(this.$refs.myChart)
       this.chart = chart;
+      this.$util.chartsResize(this.chart);
       chart.setOption(this.option);
       this.getData();
     },

src/components/dashboard/portrait/supermarket/supermarketTrendChart.vue

@@ -158,6 +158,7 @@ export default {
     initChart() {
       let chart = this.$echarts.init(this.$refs.myChart)
       this.chart = chart;
+      this.$util.chartsResize(this.chart);
       chart.setOption(this.option);
       this.getData()
     },

src/components/dashboard/portrait/water/waterDistributionChart.vue

@@ -46,6 +46,7 @@ export default {
     initChart() {
       let chart = this.$echarts.init(this.$refs.myChart)
       this.chart = chart;
+      this.$util.chartsResize(this.chart);
       chart.setOption(this.option)
       this.getData()
     },

src/components/dashboard/portrait/water/waterUseChart.vue

@@ -106,6 +106,7 @@ export default {
     initChart() {
       let chart = this.$echarts.init(this.$refs.myChart)
       this.chart = chart;
+      this.$util.chartsResize(this.chart);
       chart.setOption(this.option);
       this.getData();
     },

src/components/doubleCarbon/PV/charts/carbonPvEmissionChart.vue

@@ -188,6 +188,7 @@ export default {
     initChart() {
       let chart = this.$echarts.init(this.$refs.myChart)
       this.chart = chart;
+      this.$util.chartsResize(this.chart);
       chart.setOption(this.option)
       this.getData()
     },

src/components/doubleCarbon/PV/charts/carbonPvQuotaChart.vue

@@ -81,6 +81,7 @@ export default {
     init() {
       let chart = this.$echarts.init(this.$refs.myChart)
       this.chart = chart;
+      this.$util.chartsResize(this.chart);
       chart.setOption(this.option)
       this.getData()
     },

src/components/doubleCarbon/car/charts/carbonCarEmissionChart.vue

@@ -187,6 +187,7 @@ export default {
     initChart() {
       let chart = this.$echarts.init(this.$refs.myChart)
       this.chart = chart;
+      this.$util.chartsResize(this.chart);
       chart.setOption(this.option)
       this.getData()
     },

src/components/doubleCarbon/car/charts/carbonCarQuotaChart.vue

@@ -80,6 +80,7 @@ export default {
     init() {
       let chart = this.$echarts.init(this.$refs.myChart)
       this.chart = chart;
+      this.$util.chartsResize(this.chart);
       chart.setOption(this.option)
       this.getData()
     },

src/components/doubleCarbon/overview/charts/carbonEmissionChart.vue

@@ -1,5 +1,4 @@
 <script>
-import apiCarbonCar from "@/api/carbon/apiCarbonCar";
 import apiCarbonOverview from "@/api/carbon/apiCarbonOverview";
 
 export default {
@@ -189,6 +188,7 @@ export default {
     init() {
       let chart = this.$echarts.init(this.$refs.myChart)
       this.chart = chart;
+      this.$util.chartsResize(this.chart);
       chart.setOption(this.option)
       this.getData()
     },
@@ -203,7 +203,7 @@ export default {
 </script>
 
 <template>
-  <div id="personTrendChart" style="width: 100%" :style="{height: height+'px'}" ref="myChart" ></div>
+  <div class="myChart" style="width: 100%" :style="{height: height+'px'}" ref="myChart" ></div>
 </template>
 
 <style lang="less" scoped>

src/components/doubleCarbon/overview/charts/carbonQuotaChart.vue

@@ -90,6 +90,7 @@ export default {
     init() {
       let chart = this.$echarts.init(this.$refs.myChart)
       this.chart = chart;
+      this.$util.chartsResize(this.chart);
       chart.setOption(this.option)
       this.getData()
     },

src/components/doubleCarbon/print/charts/carbonPrintEmissionChart.vue

@@ -188,6 +188,7 @@ export default {
     initChart() {
       let chart = this.$echarts.init(this.$refs.myChart)
       this.chart = chart;
+      this.$util.chartsResize(this.chart);
       chart.setOption(this.option)
       this.getData()
     },

src/components/doubleCarbon/print/charts/carbonPrintQuotaChart.vue

@@ -80,6 +80,7 @@ export default {
     init() {
       let chart = this.$echarts.init(this.$refs.myChart)
       this.chart = chart;
+      this.$util.chartsResize(this.chart);
       chart.setOption(this.option)
       this.getData()
     },

src/components/life/healthyHome/components/lifeHealthyHomeChart.vue

@@ -108,6 +108,7 @@ export default {
     init() {
       let chart = this.$echarts.init(this.$refs.myChart)
       this.chart = chart;
+      this.$util.chartsResize(this.chart);
       chart.setOption(this.option)
       this.getData()
     },

src/components/life/parking/components/lifeParkConsumeChart.vue

@@ -51,6 +51,7 @@ export default {
     init() {
       let chart = this.$echarts.init(this.$refs.myChart)
       this.chart = chart;
+      this.$util.chartsResize(this.chart);
       chart.setOption(this.option);
       this.getData()
     },

src/components/life/parking/components/lifeParkTrendChart.vue

@@ -139,6 +139,7 @@ export default {
     init() {
       let chart = this.$echarts.init(this.$refs.myChart)
       this.chart = chart;
+      this.$util.chartsResize(this.chart);
       chart.setOption(this.option)
       this.getData()
     },

src/components/life/parking/components/lifeParkUnNormalChart.vue

@@ -56,6 +56,7 @@ export default {
     init() {
       let chart = this.$echarts.init(this.$refs.myChart)
       this.chart = chart;
+      this.$util.chartsResize(this.chart);
       chart.setOption(this.option);
       this.getData()
     },

src/components/life/restaurant/components/LifeRestPayChart.vue

@@ -57,6 +57,7 @@ export default {
     initChart() {
       let chart = this.$echarts.init(this.$refs.myChart)
       this.chart = chart;
+      this.$util.chartsResize(this.chart);
       chart.setOption(this.option);
       this.$store.loadingStore().loadingWithApi(this.getData())
     },

src/components/life/restaurant/components/LifeRestProfitChart.vue

@@ -56,6 +56,7 @@ export default {
     initChart() {
       let chart = this.$echarts.init(this.$refs.myChart)
       this.chart = chart;
+      this.$util.chartsResize(this.chart);
       chart.setOption(this.option);
       this.$store.loadingStore().loadingWithApi(this.getData())
     },

src/components/life/restaurant/components/lifeRestConsumeChart.vue

@@ -179,6 +179,7 @@ export default {
     initChart() {
       let chart = this.$echarts.init(this.$refs.myChart)
       this.chart = chart;
+      this.$util.chartsResize(this.chart);
       chart.setOption(this.option)
       this.$store.loadingStore().loadingWithApi(this.getData())
     },

src/components/life/restaurant/components/lifeRestEatChart.vue

@@ -150,6 +150,7 @@ export default {
     init() {
       let chart = this.$echarts.init(this.$refs.myChart)
       this.chart = chart;
+      this.$util.chartsResize(this.chart);
       chart.setOption(this.option)
       this.$store.loadingStore().loadingWithApi(this.getData())
     },

src/components/life/supermarket/components/lifeSupermarketAnalysisChart.vue

@@ -180,6 +180,7 @@ export default {
     init() {
       let chart = this.$echarts.init(this.$refs.myChart)
       this.chart = chart;
+      this.$util.chartsResize(this.chart);
       chart.setOption(this.option)
       this.getData()
     },

src/components/security/alarm/manage/securityAlarmManageCategory.vue

@@ -78,6 +78,7 @@ export default {
     init() {
       let chart = this.$echarts.init(this.$refs.myChart)
       this.chart = chart;
+      this.$util.chartsResize(this.chart);
       chart.setOption(this.option)
       this.getData()
     },

src/components/security/alarm/manage/securityAlarmManageDistribute.vue

@@ -46,6 +46,7 @@ export default {
     initChart() {
       let chart = this.$echarts.init(this.$refs.myChart)
       this.chart = chart;
+      this.$util.chartsResize(this.chart);
       this.getData();
     },
     getData() {

src/components/security/alarm/manage/securityAlarmManageOnlineTrend.vue

@@ -129,6 +129,7 @@ export default {
     init() {
       let chart = this.$echarts.init(this.$refs.myChart)
       this.chart = chart;
+      this.$util.chartsResize(this.chart);
       chart.setOption(this.option)
       this.getData()
     },

src/components/security/alarm/manage/securityAlarmManageTrend.vue

@@ -120,6 +120,7 @@ export default {
     init() {
       let chart = this.$echarts.init(this.$refs.myChart)
       this.chart = chart;
+      this.$util.chartsResize(this.chart);
       chart.setOption(this.option)
       this.getData()
     },

src/components/security/person/components/securityPersonExistChart.vue

@@ -101,6 +101,7 @@ export default {
     init() {
       let chart = this.$echarts.init(this.$refs.myChart)
       this.chart = chart;
+      this.$util.chartsResize(this.chart);
       chart.setOption(this.option)
       this.getData()
     },

src/components/security/person/components/securityPersonGuestChart.vue

@@ -109,6 +109,7 @@ export default {
     init() {
       let chart = this.$echarts.init(this.$refs.myChart)
       this.chart = chart;
+      this.$util.chartsResize(this.chart);
       chart.setOption(this.option)
       this.getData()
     },

src/components/work/bus/component/workBusChart.vue

@@ -112,6 +112,7 @@ export default {
     init() {
       let chart = this.$echarts.init(this.$refs.myChart)
       this.chart = chart;
+      this.$util.chartsResize(this.chart);
       chart.setOption(this.option)
       this.getData()
     },

src/components/work/bus/component/workBusTrend.vue

@@ -106,6 +106,7 @@ export default {
     init() {
       let chart = this.$echarts.init(this.$refs.myChart)
       this.chart = chart;
+      this.$util.chartsResize(this.chart);
       chart.setOption(this.option)
       this.getData()
     },

src/components/work/meeting/component/workMeetingCostTrend.vue

@@ -238,6 +238,7 @@ export default {
     init() {
       let chart = this.$echarts.init(this.$refs.myChart)
       this.chart = chart;
+      this.$util.chartsResize(this.chart);
       chart.setOption(this.option)
       this.getData()
     },

src/components/work/print/component/workPrintChart.vue

@@ -124,6 +124,7 @@ export default {
     init() {
       let chart = this.$echarts.init(this.$refs.myChart)
       this.chart = chart;
+      this.$util.chartsResize(this.chart);
       chart.setOption(this.option)
       this.getData()
     },

src/components/work/print/component/workPrintTrend.vue

@@ -106,6 +106,7 @@ export default {
     init() {
       let chart = this.$echarts.init(this.$refs.myChart)
       this.chart = chart;
+      this.$util.chartsResize(this.chart);
       chart.setOption(this.option)
       this.getData()
     },

src/utils/index.js

@@ -2,6 +2,7 @@ import { requireImg } from '@/utils/requireImg'
 import dateUtil from "@/utils/dateUtil";
 import dataUtil from "@/utils/dataUtil";
 import Stores from "@/stores";
+import elementResize from "element-resize-detector";
 
 // 顺序执行多个异步方法
 const syncPromise = function () {
@@ -48,10 +49,20 @@ function myPromise(promiseList) {
   )
 }
 
+const erd = elementResize();
+
+const chartsResize = function (obj) {
+  erd.listenTo(document.getElementsByClassName("home"), function (el) {
+    obj.resize();
+  })
+}
+
 export default {
   asyncPromise,
   syncPromise,
   requireImg,
   dateUtil,
   dataUtil,
+  erd,
+  chartsResize,
 }