Browse Source

fix(hooks): 修改useEcharts getInstance无法获取

main
xingyuv 2 years ago
parent
commit
4c2b3abbac
  1. 38
      src/hooks/web/useECharts.ts

38
src/hooks/web/useECharts.ts

@ -12,7 +12,6 @@ import { useMenuSetting } from '@/hooks/setting/useMenuSetting'
export function useECharts(elRef: Ref<HTMLDivElement>, theme: 'light' | 'dark' | 'default' = 'default') { export function useECharts(elRef: Ref<HTMLDivElement>, theme: 'light' | 'dark' | 'default' = 'default') {
const { getDarkMode: getSysDarkMode } = useRootSetting() const { getDarkMode: getSysDarkMode } = useRootSetting()
const { getCollapsed } = useMenuSetting() const { getCollapsed } = useMenuSetting()
const getDarkMode = computed(() => { const getDarkMode = computed(() => {
@ -58,23 +57,26 @@ export function useECharts(elRef: Ref<HTMLDivElement>, theme: 'light' | 'dark' |
function setOptions(options: EChartsOption, clear = true) { function setOptions(options: EChartsOption, clear = true) {
cacheOptions.value = options cacheOptions.value = options
if (unref(elRef)?.offsetHeight === 0) { return new Promise((resolve) => {
useTimeoutFn(() => { if (unref(elRef)?.offsetHeight === 0) {
setOptions(unref(getOptions)) useTimeoutFn(() => {
}, 30) setOptions(unref(getOptions))
return resolve(null)
} }, 30)
nextTick(() => { }
useTimeoutFn(() => { nextTick(() => {
if (!chartInstance) { useTimeoutFn(() => {
initCharts(getDarkMode.value as 'default') if (!chartInstance) {
initCharts(getDarkMode.value as 'default')
if (!chartInstance) return
} if (!chartInstance) return
clear && chartInstance?.clear() }
clear && chartInstance?.clear()
chartInstance?.setOption(unref(getOptions))
}, 30) chartInstance?.setOption(unref(getOptions))
resolve(null)
}, 30)
})
}) })
} }