@ued_fpi/data-visual/dist/lib/bmp/utils/echarts/BaseECharts.vue.js

<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" />

'use strict';

Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });

const vue = require('vue');
const utils = require('../../../utils.js');
const index = require('./index.js');

const _sfc_main = /* @__PURE__ */ vue.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 } = utils.useThemeHook();
    const domRef = vue.ref(null);
    const domBox = vue.ref(null);
    let chartObj = null;
    let observer = null;
    vue.onMounted(() => {
      if (!chartObj && domRef.value)
        chartObj = index.default.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();
      });
      vue.nextTick(() => {
        domBox.value && observer.observe(domBox.value, {
          attributes: true,
          childList: false,
          characterData: true,
          subtree: true
        });
      });
      setTimeout(() => {
        chartObj && chartObj.resize();
      }, 1e3);
    });
    vue.onUnmounted(() => {
      if (chartObj) {
        chartObj.dispose();
        chartObj = null;
      }
      observer && observer.disconnect();
    });
    vue.watch(
      () => props.options,
      () => {
        drawOption();
      }
    );
    vue.watch(() => isDark.value, () => {
      drawOption();
    });
    const drawOption = () => {
      chartObj && chartObj.setOption(utils.replaceVarStrings(props.options));
    };
    return (_ctx, _cache) => {
      return vue.openBlock(), vue.createElementBlock("div", {
        ref_key: "domBox",
        ref: domBox,
        style: vue.normalizeStyle({ width: __props.width, height: __props.height })
      }, [
        vue.createElementVNode("div", {
          ref_key: "domRef",
          ref: domRef,
          style: vue.normalizeStyle({ width: __props.width, height: __props.height })
        }, null, 4)
      ], 4);
    };
  }
});

exports.default = _sfc_main;