|
|
|
|
@ -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,
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|