@wocwin/t-ui-plus/es/packages/components/chart/src/index.vue2.mjs

Page level components developed based on Element Plus.

import { defineComponent, getCurrentInstance, ref, useAttrs, markRaw, nextTick, computed, watch, onMounted, onBeforeUnmount, resolveComponent, createElementBlock, openBlock, mergeProps, withDirectives, renderSlot, createCommentVNode, createElementVNode, vShow, createVNode } from 'vue';
import { useResizeObserver } from '../../../../node_modules/.pnpm/@vueuse_core@9.13.0_vue@3.4.21_typescript@5.8.3_/node_modules/@vueuse/core/index.mjs';
import { debounce, toLine } from '../../utils/index.mjs';

const _hoisted_1 = ["id"];
var _sfc_main = /* @__PURE__ */ defineComponent({
  ...{
    name: "TChart"
  },
  __name: "index",
  props: {
    options: { default: () => ({}) },
    id: { default: () => Math.random().toString(36).substring(2, 8) },
    theme: { default: "" },
    isEmpty: { type: [Boolean, Function], default: false },
    description: { default: "\u6682\u65E0\u6570\u636E" }
  },
  setup(__props, { emit: __emit }) {
    const { proxy } = getCurrentInstance();
    const props = __props;
    const echartRef = ref();
    const chart = ref();
    const emits = __emit;
    const events = Object.entries(useAttrs());
    const renderChart = () => {
      chart.value = markRaw(proxy.$echarts.init(echartRef.value, props.theme));
      setOption(props.options);
      emits("chart", chart.value);
      events.forEach(([key, value]) => {
        if (key.startsWith("on") && !key.startsWith("onChart")) {
          const on = toLine(key).substring(3);
          chart.value.on(on, (...args) => emits(on, ...args));
        }
      });
      useResizeObserver(echartRef.value, resizeChart);
    };
    const resizeChart = debounce(
      () => {
        var _a;
        (_a = chart.value) == null ? void 0 : _a.resize();
      },
      300,
      true
    );
    const setOption = debounce(
      async (data) => {
        if (!chart.value) return;
        chart.value.setOption(data, true, true);
        await nextTick();
        resizeChart();
      },
      300,
      true
    );
    const formatEmpty = computed(() => {
      if (typeof props.isEmpty === "function") {
        return props.isEmpty(props.options);
      }
      return props.isEmpty;
    });
    watch(
      () => props.options,
      async (nw) => {
        await nextTick();
        setOption(nw);
      },
      { deep: true }
    );
    watch(
      () => props.theme,
      async () => {
        chart.value.dispose();
        renderChart();
      }
    );
    onMounted(() => {
      renderChart();
    });
    onBeforeUnmount(() => {
      chart.value.dispose();
      chart.value = null;
    });
    return (_ctx, _cache) => {
      const _component_el_empty = resolveComponent("el-empty");
      return openBlock(), createElementBlock(
        "div",
        mergeProps({ class: "t-chart" }, _ctx.$attrs),
        [
          withDirectives(createElementVNode("div", {
            class: "t-chart-container",
            id: _ctx.id,
            ref_key: "echartRef",
            ref: echartRef
          }, null, 8, _hoisted_1), [
            [vShow, !formatEmpty.value]
          ]),
          formatEmpty.value ? renderSlot(_ctx.$slots, "empty", { key: 0 }, () => [
            createVNode(_component_el_empty, mergeProps(_ctx.$attrs, { description: _ctx.description }), null, 16, ["description"])
          ]) : createCommentVNode("v-if", true),
          renderSlot(_ctx.$slots, "default")
        ],
        16
        /* FULL_PROPS */
      );
    };
  }
});

export { _sfc_main as default };