chore: 构建重命名

Yi.Bbs.Vue3/src/hooks/useEcharts.js

@@ -0,0 +1,50 @@
+import * as echarts from "echarts";
+import { onMounted, onUnmounted, watch } from "vue";
+import { debounce } from "@/utils/index";
+import _ from "lodash";
+
+// containerRef echarts实例   props 传入的值  baseOptions 图表初始化渲染
+export default function useEcharts(containerRef, emits, props, baseOptions) {
+  let chart = null;
+
+  onMounted(() => {
+    chart = echarts.init(containerRef.value);
+    init();
+    chart.on("click", function (param) {
+      emits("chart-click", param);
+    });
+    //自适应不同屏幕时改变图表尺寸
+    window.addEventListener("resize", cancalDebounce);
+  });
+  // 用于将echarts实例暴露出去使用
+  const getChart = () => chart;
+  onUnmounted(() => {
+    chart && chart.dispose();
+    window.removeEventListener("resize", cancalDebounce);
+  });
+
+  function init() {
+    let option = _.cloneDeep(baseOptions);
+    chart.setOption(option);
+    chart.setOption(props.option);
+  }
+
+  function resize() {
+    chart && chart.resize();
+  }
+
+  watch(
+    () => props.option,
+    (val) => {
+      chart && chart.setOption(val);
+    },
+    { deep: true }
+  );
+
+  const cancalDebounce = debounce(resize, 500);
+
+  return {
+    getChart,
+    resize,
+  };
+}