重构为js

src/components/chart/index.vue

@@ -1,42 +1,45 @@
-<script lang="ts" setup>
-import { onBeforeUnmount, onMounted, ref, watch } from "vue";
+<script setup>
+import { nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue";
 import * as echarts from "echarts";
-import { EChartsOption } from "echarts";
-
-let chart: echarts.ECharts | null = null;
-
-const chartRef = ref<HTMLElement | undefined>();
-
+let chart = null;
+let resizeObserver = null;
+const chartRef = ref();
 const props = defineProps({
   option: {
-    type: Object as () => EChartsOption | {},
-    required: true,
-  },
+    type: Object,
+    required: true
+  }
 });
-
-function applyOption(option?: EChartsOption | Record<string, never>) {
+function applyOption(option) {
   if (!chart || !option) {
     return;
   }
-
   chart.clear();
   chart.setOption(option);
 }
-
 onMounted(() => {
   chart = echarts.init(chartRef.value, "t-theme");
   applyOption(props.option);
+  resizeObserver = new ResizeObserver(() => {
+    chart?.resize();
+  });
+  resizeObserver.observe(chartRef.value);
+  nextTick(() => {
+    chart?.resize();
+  });
 });
-
 watch(
   () => props.option,
   (value) => {
     applyOption(value);
   },
-  { deep: true },
+  { deep: true }
 );
-
 onBeforeUnmount(() => {
+  if (resizeObserver) {
+    resizeObserver.disconnect();
+    resizeObserver = null;
+  }
   if (chart) {
     chart.dispose();
     chart = null;