初始版本，目前线上可用

frontEnd/src/components/baseEcharts/baseEcharts.vue

@@ -0,0 +1,52 @@
+<template>
+  <div ref="echartDom" style="width: 100%; height: 100%"></div>
+</template>
+
+<script lang="ts" setup>
+import * as echarts from "echarts";
+import { ref, onMounted, onBeforeUnmount, nextTick } from "vue";
+let echartDom = ref(<HTMLElement | null>null);
+let emits = defineEmits(["update"]);
+let props = defineProps({
+  option: {
+    type: Object,
+    default: () => {
+      return {
+        title: {
+          text: "ECharts 入门示例",
+        },
+        tooltip: {},
+        xAxis: {
+          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
+        },
+        yAxis: {},
+        series: [
+          {
+            name: "销量",
+            type: "bar",
+            data: [5, 20, 36, 10, 10, 20],
+          },
+        ],
+      };
+    },
+  },
+});
+function echartResize() {
+  let chartInstance = echarts.getInstanceByDom(echartDom.value as HTMLElement);
+  chartInstance?.resize();
+}
+let resizeObserver = new ResizeObserver(() => {
+  echartResize();
+});
+onMounted(() => {
+  let chartInstance = echarts.init(echartDom.value);
+  chartInstance.setOption(props.option);
+
+  resizeObserver.observe(echartDom.value as HTMLElement);
+});
+
+onBeforeUnmount(() => {
+  resizeObserver.disconnect();
+});
+</script>
+<style lang="scss" scoped></style>