| | |
| | | import { useTimeoutFn } from '@vueuse/core'; |
| | | import { tryOnUnmounted } from '/@/utils/helper/vueHelper'; |
| | | import { unref, Ref, nextTick } from 'vue'; |
| | | import type { EChartOption, ECharts } from 'echarts'; |
| | | import echarts from 'echarts'; |
| | | import { useDebounce } from '/@/hooks/core/useDebounce'; |
| | | 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 type { EChartOption, ECharts }; |
| | | export function useECharts( |
| | | elRef: Ref<HTMLDivElement>, |
| | | theme: 'light' | 'dark' | 'default' = 'light' |
| | | theme: 'light' | 'dark' | 'default' = 'default', |
| | | ) { |
| | | let chartInstance: Nullable<ECharts> = null; |
| | | 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({}) as Ref<EChartsOption>; |
| | | let removeResizeFn: Fn = () => {}; |
| | | |
| | | const [debounceResize] = useDebounce(resize, 200); |
| | | resizeFn = debounceResize; |
| | | resizeFn = useDebounceFn(resize, 200); |
| | | |
| | | function init() { |
| | | const getOptions = computed(() => { |
| | | if (getDarkMode.value !== 'dark') { |
| | | return cacheOptions.value as EChartsOption; |
| | | } |
| | | return { |
| | | backgroundColor: 'transparent', |
| | | ...cacheOptions.value, |
| | | } as EChartsOption; |
| | | }); |
| | | |
| | | function initCharts(t = theme) { |
| | | const el = unref(elRef); |
| | | |
| | | if (!el || !unref(el)) { |
| | | return; |
| | | } |
| | | chartInstance = echarts.init(el, theme); |
| | | |
| | | chartInstance = echarts.init(el, t); |
| | | const { removeEvent } = useEventListener({ |
| | | el: window, |
| | | name: 'resize', |
| | |
| | | }); |
| | | removeResizeFn = removeEvent; |
| | | const { widthRef, screenEnum } = useBreakpoint(); |
| | | if (unref(widthRef) <= screenEnum.MD) { |
| | | if (unref(widthRef) <= screenEnum.MD || el.offsetHeight === 0) { |
| | | useTimeoutFn(() => { |
| | | resizeFn(); |
| | | }, 30); |
| | | } |
| | | } |
| | | |
| | | function setOptions(options: any, clear = true) { |
| | | function setOptions(options: EChartsOption, clear = true) { |
| | | cacheOptions.value = options; |
| | | if (unref(elRef)?.offsetHeight === 0) { |
| | | useTimeoutFn(() => { |
| | | setOptions(unref(getOptions)); |
| | | }, 30); |
| | | return; |
| | | } |
| | | nextTick(() => { |
| | | useTimeoutFn(() => { |
| | | if (!chartInstance) { |
| | | init(); |
| | | initCharts(getDarkMode.value as 'default'); |
| | | |
| | | if (!chartInstance) return; |
| | | } |
| | | clear && chartInstance.clear(); |
| | | clear && chartInstance?.clear(); |
| | | |
| | | chartInstance && chartInstance.setOption(options); |
| | | chartInstance?.setOption(unref(getOptions)); |
| | | }, 30); |
| | | }); |
| | | } |
| | | |
| | | function resize() { |
| | | if (!chartInstance) return; |
| | | chartInstance.resize(); |
| | | chartInstance?.resize(); |
| | | } |
| | | |
| | | watch( |
| | | () => getDarkMode.value, |
| | | (theme) => { |
| | | if (chartInstance) { |
| | | chartInstance.dispose(); |
| | | initCharts(theme as 'default'); |
| | | setOptions(cacheOptions.value); |
| | | } |
| | | }, |
| | | ); |
| | | |
| | | tryOnUnmounted(() => { |
| | | if (!chartInstance) return; |
| | |
| | | chartInstance = null; |
| | | }); |
| | | |
| | | function getInstance(): echarts.ECharts | null { |
| | | if (!chartInstance) { |
| | | initCharts(getDarkMode.value as 'default'); |
| | | } |
| | | return chartInstance; |
| | | } |
| | | |
| | | return { |
| | | setOptions, |
| | | echarts, |
| | | resize, |
| | | echarts, |
| | | getInstance, |
| | | }; |
| | | } |