From c1289830c21f6ed61625189d27b831aee4473ecc Mon Sep 17 00:00:00 2001
From: guanpeng <huxin@123.com>
Date: Fri, 11 Jul 2025 22:40:31 +0800
Subject: [PATCH] =?UTF-8?q?=E7=B3=BB=E7=BB=9F=E6=95=B4=E4=BD=93=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD=E6=B5=8B=E8=AF=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/Echarts/index.vue          | 120 ++++++++++++++++++
 1 file changed, 120 insertions(+)
 create mode 100644 Dkl-vue3-ui-DP/src/components/Echarts/index.vue

diff --git a/Dkl-vue3-ui-DP/src/components/Echarts/index.vue b/Dkl-vue3-ui-DP/src/components/Echarts/index.vue
new file mode 100644
index 0000000..a82037b
--- /dev/null
+++ b/Dkl-vue3-ui-DP/src/components/Echarts/index.vue
@@ -0,0 +1,120 @@
+<template>
+  <div id="echarts" ref="chartRef" :style="echartsStyle" />
+</template>
+
+<script setup name="ECharts">
+import { ref, onMounted, onBeforeUnmount, watch, computed, markRaw, nextTick, onActivated } from "vue";
+import * as echarts from "echarts";
+import { useDebounceFn } from "@vueuse/core";
+import useAppStore from '@/store/modules/app'
+const appStore = useAppStore()
+
+const props = defineProps({
+  option: {
+    type: Object,
+    default: {},
+    required: true,
+  },
+  renderer: {
+    type: String,
+    default: "canvas" || "svg"
+  },
+  resize: {
+    type: Boolean,
+    default: true,
+  },
+  theme: {
+    type: Object || String,
+    default: "",
+  },
+  width: {
+    type: Number || String,
+    default: 0
+  },
+  height: {
+    type: Number || String,
+    default: 0
+  },
+  onClick: {
+    type: Function,
+    default: (event) => any,
+  },
+})
+
+const echartsStyle = computed(() => {
+  return props.width || props.height
+    ? { height: props.height + "px", width: props.width + "px" }
+    : { height: "100%", width: "100%" };
+});
+
+const chartRef = ref(null);
+const chartInstance = ref();
+
+const draw = () => {
+  if (chartInstance.value) {
+    chartInstance.value.setOption(props.option, { notMerge: true });
+  }
+};
+
+watch(props, () => {
+  draw();
+});
+
+const handleClick = (event) => props.onClick && props.onClick(event);
+
+const init = () => {
+  if (!chartRef.value) return;
+  chartInstance.value = echarts.getInstanceByDom(chartRef.value);
+
+  if (!chartInstance.value) {
+    chartInstance.value = markRaw(
+      echarts.init(chartRef.value, props.theme, {
+        renderer: props.renderer
+      })
+    );
+    chartInstance.value.on("click", handleClick);
+    draw();
+  }
+};
+
+const resize = () => {
+  if (chartInstance.value && props.resize) {
+    chartInstance.value.resize({ animation: { duration: 300 } });
+  }
+};
+
+const debouncedResize = useDebounceFn(resize, 300, { maxWait: 800 });
+
+
+// 左侧菜单收起/打开时，重置echarts的宽高
+const isCollapse = computed(() => !appStore.sidebar.opened);
+watch(
+  () => [isCollapse],
+  () => {
+    debouncedResize();
+  },
+  { deep: true }
+);
+
+onMounted(() => {
+  nextTick(() => init());
+  window.addEventListener("resize", debouncedResize);
+});
+
+onActivated(() => {
+  if (chartInstance.value) {
+    chartInstance.value.resize();
+  }
+});
+
+onBeforeUnmount(() => {
+  chartInstance.value?.dispose();
+  window.removeEventListener("resize", debouncedResize);
+});
+
+defineExpose({
+  getInstance: () => chartInstance.value,
+  resize,
+  draw
+});
+</script>