优化系统布局

src/components/Echarts/Gauge.vue

@@ -1,99 +1,90 @@
 <template>
-  <div :class="className" :style="{height:height,width:width}" />
+  <div ref="chartRef" :class="className" :style="{ height: height, width: width }" />
 </template>
 
-<script>
-import * as echarts from "echarts";
+<script setup>
+import * as echarts from 'echarts'
 
 // import("echarts/theme/macarons"); // echarts theme
-import { debounce } from "@/utils";
+// import { debounce } from '@/utils'
+import { useDebounceFn } from '@vueuse/core'
 
-export default {
-  props: {
-    name: {
-      type: String,
-      default: "业务指标",
-    },
-    min: {
-      type: [Object, Number],
-      default: 0,
-    },
-    max: {
-      type: [Object, Number],
-      default: 0,
-    },
-    data: {
-      type: Array,
-      default: () => [
-        {
-          value: "",
-          name: "占比",
-        },
-      ],
-    },
-    className: {
-      type: String,
-      default: "chart",
-    },
-    width: {
-      type: String,
-      default: "100%",
-    },
-    height: {
-      type: String,
-      default: "300px",
-    },
-  },
-  data() {
-    return {
-      chart: null,
-    };
-  },
-  mounted() {
-    this.initChart();
-    this.__resizeHandler = debounce(() => {
-      if (this.chart) {
-        this.chart.resize();
-      }
-    }, 100);
-    window.addEventListener("resize", this.__resizeHandler);
-  },
-  beforeDestroy() {
-    if (!this.chart) {
-      return;
-    }
-    window.removeEventListener("resize", this.__resizeHandler);
-    this.chart.dispose();
-    this.chart = null;
-  },
-  methods: {
-    initChart() {
-      this.chart = echarts.init(this.$el, "macarons");
+const { proxy } = getCurrentInstance()
 
-      this.chart.setOption({
-        tooltip: {
-          formatter: "{a} <br/>{b} : {c}",
-        },
-        // toolbox: {
-        //   feature: {
-        //     restore: {},
-        //     saveAsImage: {},
-        //   },
-        // },
-        series: [
-          {
-            name: this.name,
-            type: "gauge",
-            min: this.min,
-            max: this.max,
-            detail: {
-              formatter: "{value}%",
-            },
-            data: this.data,
-          },
-        ],
-      });
-    },
+const props = defineProps({
+  name: {
+    type: String,
+    default: '',
   },
-};
+  min: {
+    type: [Object, Number],
+    default: 0,
+  },
+  max: {
+    type: [Object, Number],
+    default: 0,
+  },
+  data: {
+    type: Array,
+    default: () => [
+      {
+        value: '',
+        name: '占比',
+      },
+    ],
+  },
+  className: {
+    type: String,
+    default: 'chart',
+  },
+  width: {
+    type: String,
+    default: '100%',
+  },
+  height: {
+    type: String,
+    default: '300px',
+  },
+})
+let chart = null
+const chartRef = ref()
+
+//重绘图表函数
+const resizeHandler = () => {
+  chart.resize()
+}
+function initChart() {
+  chart = echarts.init(proxy.$refs.chartRef, 'macarons')
+
+  chart.setOption({
+    tooltip: {
+      formatter: '{a} <br/>{b} : {c}',
+    },
+    series: [
+      {
+        name: props.name,
+        type: 'gauge',
+        min: props.min,
+        max: props.max,
+        detail: {
+          formatter: '{value}%',
+        },
+        data: props.data,
+      },
+    ],
+  })
+}
+const debouncedFn = useDebounceFn(() => {
+  // do something
+	resizeHandler()
+}, 500)
+
+document.addEventListener('resize', debouncedFn)
+
+onMounted(() => {
+  initChart()
+})
+onBeforeUnmount(() => {
+	window.removeEventListener('resize', debouncedFn)
+})
 </script>