|
|
|
@ -2,6 +2,8 @@ import type { EChartsOption } from 'echarts'; |
|
|
|
|
|
|
|
import type { Ref } from 'vue'; |
|
|
|
|
|
|
|
import type { Nullable } from '@vben/types'; |
|
|
|
|
|
|
|
import type EchartsUI from './echarts-ui.vue'; |
|
|
|
|
|
|
|
import { computed, nextTick, watch } from 'vue'; |
|
|
|
@ -50,7 +52,10 @@ function useEcharts(chartRef: Ref<EchartsUIType>) { |
|
|
|
return chartInstance; |
|
|
|
}; |
|
|
|
|
|
|
|
const renderEcharts = (options: EChartsOption, clear = true) => { |
|
|
|
const renderEcharts = ( |
|
|
|
options: EChartsOption, |
|
|
|
clear = true, |
|
|
|
): Promise<Nullable<echarts.ECharts>> => { |
|
|
|
cacheOptions = options; |
|
|
|
const currentOptions = { |
|
|
|
...options, |
|
|
|
@ -58,9 +63,8 @@ function useEcharts(chartRef: Ref<EchartsUIType>) { |
|
|
|
}; |
|
|
|
return new Promise((resolve) => { |
|
|
|
if (chartRef.value?.offsetHeight === 0) { |
|
|
|
useTimeoutFn(() => { |
|
|
|
renderEcharts(currentOptions); |
|
|
|
resolve(null); |
|
|
|
useTimeoutFn(async () => { |
|
|
|
resolve(await renderEcharts(currentOptions)); |
|
|
|
}, 30); |
|
|
|
return; |
|
|
|
} |
|
|
|
@ -72,7 +76,7 @@ function useEcharts(chartRef: Ref<EchartsUIType>) { |
|
|
|
} |
|
|
|
clear && chartInstance?.clear(); |
|
|
|
chartInstance?.setOption(currentOptions); |
|
|
|
resolve(null); |
|
|
|
resolve(chartInstance); |
|
|
|
}, 30); |
|
|
|
}); |
|
|
|
}); |
|
|
|
@ -109,7 +113,7 @@ function useEcharts(chartRef: Ref<EchartsUIType>) { |
|
|
|
return { |
|
|
|
renderEcharts, |
|
|
|
resize, |
|
|
|
chartInstance, |
|
|
|
getChartInstance: () => chartInstance, |
|
|
|
}; |
|
|
|
} |
|
|
|
|
|
|
|
|