@ued_fpi/data-visual/dist/es/bmp/utils/echarts/BaseECharts.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, nextTick, onUnmounted, watch, openBlock, createElementBlock, normalizeStyle, createElementVNode } from 'vue';
import { useThemeHook, replaceVarStrings } from '../../../utils.mjs';
import echarts from './index.mjs';

const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "BaseECharts",
  props: {
    width: {
      type: String,
      default: "100%"
    },
    height: {
      type: String,
      default: "100%"
    },
    loading: {
      type: Boolean,
      default: false
    },
    options: {
      type: Object,
      default: null
    }
  },
  setup(__props) {
    const props = __props;
    const { isDark } = useThemeHook();
    const domRef = ref(null);
    const domBox = ref(null);
    let chartObj = null;
    let observer = null;
    onMounted(() => {
      if (!chartObj && domRef.value)
        chartObj = echarts.init(domRef.value);
      if (!chartObj)
        return;
      chartObj.showLoading({
        text: "",
        color: "#409eff",
        textColor: "#000",
        maskColor: "rgba(255, 255, 255, .95)",
        zlevel: 0,
        lineWidth: 2
      });
      if (!props.loading) {
        chartObj.hideLoading();
        drawOption();
      }
      if (props.options)
        drawOption();
      observer = new MutationObserver((mutationsList) => {
        for (const mutation of mutationsList)
          if (mutation.target === domBox.value)
            chartObj && chartObj.resize();
      });
      nextTick(() => {
        domBox.value && observer.observe(domBox.value, {
          attributes: true,
          childList: false,
          characterData: true,
          subtree: true
        });
      });
      setTimeout(() => {
        chartObj && chartObj.resize();
      }, 1e3);
    });
    onUnmounted(() => {
      if (chartObj) {
        chartObj.dispose();
        chartObj = null;
      }
      observer && observer.disconnect();
    });
    watch(
      () => props.options,
      () => {
        drawOption();
      }
    );
    watch(() => isDark.value, () => {
      drawOption();
    });
    const drawOption = () => {
      chartObj && chartObj.setOption(replaceVarStrings(props.options));
    };
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", {
        ref_key: "domBox",
        ref: domBox,
        style: normalizeStyle({ width: __props.width, height: __props.height })
      }, [
        createElementVNode("div", {
          ref_key: "domRef",
          ref: domRef,
          style: normalizeStyle({ width: __props.width, height: __props.height })
        }, null, 4)
      ], 4);
    };
  }
});

export { _sfc_main as default };