@wocwin/t-ui-plus/lib/packages/components/chart/src/index.vue2.js

Page level components developed based on Element Plus.

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
var index$1 = require('../../../../node_modules/.pnpm/@vueuse_core@9.13.0_vue@3.4.21_typescript@5.8.3_/node_modules/@vueuse/core/index.js');
var index = require('../../utils/index.js');

const _hoisted_1 = ["id"];
var _sfc_main = /* @__PURE__ */ vue.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 } = vue.getCurrentInstance();
    const props = __props;
    const echartRef = vue.ref();
    const chart = vue.ref();
    const emits = __emit;
    const events = Object.entries(vue.useAttrs());
    const renderChart = () => {
      chart.value = vue.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 = index.toLine(key).substring(3);
          chart.value.on(on, (...args) => emits(on, ...args));
        }
      });
      index$1.useResizeObserver(echartRef.value, resizeChart);
    };
    const resizeChart = index.debounce(
      () => {
        var _a;
        (_a = chart.value) == null ? void 0 : _a.resize();
      },
      300,
      true
    );
    const setOption = index.debounce(
      async (data) => {
        if (!chart.value) return;
        chart.value.setOption(data, true, true);
        await vue.nextTick();
        resizeChart();
      },
      300,
      true
    );
    const formatEmpty = vue.computed(() => {
      if (typeof props.isEmpty === "function") {
        return props.isEmpty(props.options);
      }
      return props.isEmpty;
    });
    vue.watch(
      () => props.options,
      async (nw) => {
        await vue.nextTick();
        setOption(nw);
      },
      { deep: true }
    );
    vue.watch(
      () => props.theme,
      async () => {
        chart.value.dispose();
        renderChart();
      }
    );
    vue.onMounted(() => {
      renderChart();
    });
    vue.onBeforeUnmount(() => {
      chart.value.dispose();
      chart.value = null;
    });
    return (_ctx, _cache) => {
      const _component_el_empty = vue.resolveComponent("el-empty");
      return vue.openBlock(), vue.createElementBlock(
        "div",
        vue.mergeProps({ class: "t-chart" }, _ctx.$attrs),
        [
          vue.withDirectives(vue.createElementVNode("div", {
            class: "t-chart-container",
            id: _ctx.id,
            ref_key: "echartRef",
            ref: echartRef
          }, null, 8, _hoisted_1), [
            [vue.vShow, !formatEmpty.value]
          ]),
          formatEmpty.value ? vue.renderSlot(_ctx.$slots, "empty", { key: 0 }, () => [
            vue.createVNode(_component_el_empty, vue.mergeProps(_ctx.$attrs, { description: _ctx.description }), null, 16, ["description"])
          ]) : vue.createCommentVNode("v-if", true),
          vue.renderSlot(_ctx.$slots, "default")
        ],
        16
        /* FULL_PROPS */
      );
    };
  }
});

exports.default = _sfc_main;