vben
2021-08-24 56a966cfbf8db5b29a42185f0f25a0e800c30dbb
src/hooks/web/useECharts.ts
@@ -1,36 +1,38 @@
import type { EChartsOption } from 'echarts';
import type { Ref } from 'vue';
import { useTimeoutFn } from '/@/hooks/core/useTimeout';
import { tryOnUnmounted } from '@vueuse/core';
import { unref, nextTick, watch, computed, ref } from 'vue';
import { useDebounceFn } from '@vueuse/core';
import { useEventListener } from '/@/hooks/event/useEventListener';
import { useBreakpoint } from '/@/hooks/event/useBreakpoint';
import echarts from '/@/utils/lib/echarts';
import { useRootSetting } from '/@/hooks/setting/useRootSetting';
export function useECharts(
  elRef: Ref<HTMLDivElement>,
  theme: 'light' | 'dark' | 'default' = 'light'
  theme: 'light' | 'dark' | 'default' = 'default',
) {
  const { getDarkMode } = useRootSetting();
  const { getDarkMode: getSysDarkMode } = useRootSetting();
  const getDarkMode = computed(() => {
    return theme === 'default' ? getSysDarkMode.value : theme;
  });
  let chartInstance: echarts.ECharts | null = null;
  let resizeFn: Fn = resize;
  const cacheOptions = ref<EChartsOption>({});
  const cacheOptions = ref({}) as Ref<EChartsOption>;
  let removeResizeFn: Fn = () => {};
  resizeFn = useDebounceFn(resize, 200);
  const getOptions = computed((): EChartsOption => {
  const getOptions = computed(() => {
    if (getDarkMode.value !== 'dark') {
      return cacheOptions.value;
      return cacheOptions.value as EChartsOption;
    }
    return {
      backgroundColor: 'transparent',
      ...cacheOptions.value,
    };
    } as EChartsOption;
  });
  function initCharts(t = theme) {
@@ -88,7 +90,7 @@
        initCharts(theme as 'default');
        setOptions(cacheOptions.value);
      }
    }
    },
  );
  tryOnUnmounted(() => {