@ued_fpi/data-visual/dist/lib/ipes/src/common/Echarts.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 _sfc_main = /* @__PURE__ */ vue.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 } = utils.useThemeHook();
    const echartRef = vue.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);
    vue.onMounted(() => {
      initChart();
    });
    vue.onBeforeUnmount(() => {
      window.removeEventListener("resize", cancalDebounce);
      myChart.dispose();
    });
    vue.watch(() => [props.fullOptions.options, props.loading, isDark.value], () => {
      if (!myChart)
        initChart();
      if (!myChart)
        return;
      if (!props.loading) {
        myChart.hideLoading();
        myChart.setOption(utils.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 vue.openBlock(), vue.createElementBlock("div", {
        ref_key: "echartRef",
        ref: echartRef,
        class: vue.normalizeClass(__props.className),
        style: vue.normalizeStyle({ height: __props.height, width: __props.width })
      }, null, 6);
    };
  }
});

exports.default = _sfc_main;