系统整体功能测试

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>