@dfsj/echarts/dist/hooks/useECharts.js

专业的水文曲线组件或构造函数以及通用的echart二次封装图表

/**
 * 
 *     @dfsj/echarts： 专业的水文曲线组件或构造函数以及通用的echart二次封装图表
 *     版本: v3.7.0-alpha.4
 *     作者：yangbo <1747837358@qq.com>
 *     日期：2025-07-10 10:24:30
 *     
 *     
 */

import _defineProperty from '@babel/runtime/helpers/defineProperty';
import { computed, ref, watch, unref, nextTick } from 'vue';
import { useDebounceFn, tryOnUnmounted } from '@vueuse/core';
import { useTimeoutFn } from './useTimeout.js';
import { useEventListener } from './useEventListener.js';
import { useBreakpoint } from './useBreakpoint.js';
import '../lib/echarts.js';
import elementResizeDetectorMaker from 'element-resize-detector';
import '../plugins/Mark/markSeries.js';
import '../plugins/Mark/markView.js';
import '../plugins/Water/waterSeries.js';
import '../plugins/Water/waterView.js';
import { useEChartsThemes } from '../themes/useEChartsThemes.js';
import * as echarts from 'echarts/core';

function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function useECharts(elRef, theme) {
  var _useEChartsThemes = useEChartsThemes();
    _useEChartsThemes.setTheme;
    _useEChartsThemes.loadTheme;
    var globalTheme = _useEChartsThemes.theme;
  var erd = elementResizeDetectorMaker();
  var echartsTheme = computed(function () {
    return theme !== null && theme !== void 0 ? theme : globalTheme.value;
  });
  var chartInstance = null;
  var resizeFn = resize;
  var cacheOptions = ref({});
  var removeResizeFn = function removeResizeFn() {};
  resizeFn = useDebounceFn(resize, 200);
  var getOptions = computed(function () {
    if (echartsTheme.value !== 'dark') {
      return cacheOptions.value;
    }
    return _objectSpread({
      backgroundColor: 'transparent'
    }, cacheOptions.value);
  });
  function initCharts(t) {
    var el = unref(elRef);
    if (!el || !unref(el)) {
      return;
    }
    console.log('初始化', t);
    chartInstance = echarts.init(el, t);
    var _useEventListener = useEventListener({
        el: window,
        name: 'resize',
        listener: resizeFn
      }),
      removeEvent = _useEventListener.removeEvent;
    bindObserver();
    removeResizeFn = removeEvent;
    var _useBreakpoint = useBreakpoint(),
      widthRef = _useBreakpoint.widthRef,
      screenEnum = _useBreakpoint.screenEnum;
    if (unref(widthRef) <= screenEnum.MD || el.offsetHeight === 0) {
      useTimeoutFn(function () {
        resizeFn();
      }, 30);
    }
  }
  function setOptions(options) {
    var _unref;
    var clear = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
    cacheOptions.value = options;
    if (((_unref = unref(elRef)) === null || _unref === void 0 ? void 0 : _unref.offsetHeight) === 0) {
      useTimeoutFn(function () {
        setOptions(unref(getOptions));
      }, 30);
      return;
    }
    nextTick(function () {
      useTimeoutFn(function () {
        var _chartInstance, _chartInstance2;
        if (!chartInstance) {
          initCharts(echartsTheme.value);
          if (!chartInstance) return;
        }
        clear && ((_chartInstance = chartInstance) === null || _chartInstance === void 0 ? void 0 : _chartInstance.clear());
        (_chartInstance2 = chartInstance) === null || _chartInstance2 === void 0 || _chartInstance2.setOption(unref(getOptions));
      }, 30);
    });
  }
  function resize() {
    var _chartInstance3;
    (_chartInstance3 = chartInstance) === null || _chartInstance3 === void 0 || _chartInstance3.resize();
  }
  watch(function () {
    return echartsTheme.value;
  }, function (theme) {
    if (chartInstance) {
      chartInstance.dispose();
      initCharts(theme);
      setOptions(cacheOptions.value);
    }
  });
  tryOnUnmounted(function () {
    if (!chartInstance) return;
    removeResizeFn();
    chartInstance.dispose();
    chartInstance = null;
    unBindObserver();
    erd = null;
  });
  function getInstance() {
    if (!chartInstance) {
      initCharts(echartsTheme.value);
    }
    return chartInstance;
  }
  function bindObserver() {
    try {
      var _erd, _erd$listenTo;
      (_erd = erd) === null || _erd === void 0 || (_erd$listenTo = _erd.listenTo) === null || _erd$listenTo === void 0 || _erd$listenTo.call(_erd, elRef.value, observerHandle);
    } catch (e) {
      console.log({
        e: e
      });
    }
  }
  function unBindObserver() {
    try {
      var _erd2, _erd2$removeListener;
      (_erd2 = erd) === null || _erd2 === void 0 || (_erd2$removeListener = _erd2.removeListener) === null || _erd2$removeListener === void 0 || _erd2$removeListener.call(_erd2, elRef.value, observerHandle);
    } catch (e) {
      console.log({
        e: e
      });
    }
  }
  var prevWidth, prevHeight;
  function observerHandle(target) {
    var style = getComputedStyle(target);
    var currWidth = style.width,
      currHeight = style.height;
    if (prevHeight == currHeight && currWidth == prevWidth) {
      return;
    } else {
      prevWidth = currWidth;
      prevHeight = currHeight;
    }
    nextTick(function () {
      setTimeout(resize, 100);
    });
  }
  return {
    setOptions: setOptions,
    resize: resize,
    echarts: echarts,
    getInstance: getInstance,
    container: elRef
  };
}

export { useECharts };