@ued_fpi/data-visual/dist/es/ipes/src/common/Echarts.vue.mjs

<br /> <br /> <div style="text-align:center"> <b style="font-size:30px">@ued_fpi/data-visual</b> <p>基于Vite4+TypeScript的Vue3大屏组件库开发框架</p> <img style="display:inline" src="https://img.shields.io/npm/v/@ued_fpi/data-visual" />

import { defineComponent, ref, onMounted, onBeforeUnmount, watch, openBlock, createElementBlock, normalizeClass, normalizeStyle } from 'vue';
import { useThemeHook, replaceVarStrings } from '../../../utils.mjs';

const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "Echarts",
  props: {
    className: {
      type: String,
      default: ""
    },
    width: {
      type: String,
      default: "100%"
    },
    height: {
      type: String,
      default: "300px"
    },
    loading: {
      type: Boolean,
      default: true
    },
    fullOptions: {
      type: Object,
      default: () => ({}),
      required: true
    }
  },
  setup(__props) {
    const props = __props;
    const { isDark } = useThemeHook();
    const echartRef = ref(null);
    let myChart = null;
    const resizeHandler = () => {
      myChart.resize();
    };
    const debounce = (fun, delay) => {
      let timer;
      return function() {
        if (timer)
          clearTimeout(timer);
        timer = setTimeout(() => {
          fun();
        }, delay);
      };
    };
    const cancalDebounce = debounce(resizeHandler, 50);
    onMounted(() => {
      initChart();
    });
    onBeforeUnmount(() => {
      window.removeEventListener("resize", cancalDebounce);
      myChart.dispose();
    });
    watch(() => [props.fullOptions.options, props.loading, isDark.value], () => {
      if (!myChart)
        initChart();
      if (!myChart)
        return;
      if (!props.loading) {
        myChart.hideLoading();
        myChart.setOption(replaceVarStrings(props.fullOptions.options), true);
      }
    }, { deep: true });
    const initChart = () => {
      if (!echartRef.value || !window?.echarts)
        return;
      myChart = window.echarts.init(echartRef.value, { renderer: "svg" });
      myChart.showLoading({
        text: "",
        color: "#409eff",
        textColor: "#000",
        maskColor: "rgba(255, 255, 255, .95)",
        zlevel: 0,
        lineWidth: 2
      });
      if (!props.loading) {
        myChart.hideLoading();
        myChart.setOption(props.fullOptions.options, true);
      }
      window.addEventListener("resize", cancalDebounce);
    };
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", {
        ref_key: "echartRef",
        ref: echartRef,
        class: normalizeClass(__props.className),
        style: normalizeStyle({ height: __props.height, width: __props.width })
      }, null, 6);
    };
  }
});

export { _sfc_main as default };