diff --git a/src/hooks/web/useApexCharts.ts b/src/hooks/web/useApexCharts.ts index d9d717c7daf..575baf5af10 100644 --- a/src/hooks/web/useApexCharts.ts +++ b/src/hooks/web/useApexCharts.ts @@ -7,7 +7,7 @@ import ApexCharts from 'apexcharts'; export function useApexCharts(elRef: Ref) { let chartInstance: Nullable = null; - function setOptions(options: any) { + function setOptions(options: any, callback) { nextTick(() => { useTimeoutFn(() => { const el = unref(elRef); @@ -16,9 +16,38 @@ export function useApexCharts(elRef: Ref) { chartInstance = new ApexCharts(el, options); chartInstance && chartInstance.render(); + + // setOptions增加callback方法,返回chartInstance,以便于对图表进行再操作,例如调用updateOptions方法更新图表 + callback && callback(chartInstance); + }, 30); }); } + + // 新增调用ApexCharts的updateOptions方法更新图表 + function updateOptions( + chartInstance: Nullable, + options, + redraw = false, + animate = true, + updateSyncedCharts = true, + overwriteInitialConfig = true, + callback) { + nextTick(() => { + useTimeoutFn(() => { + + chartInstance && chartInstance.updateOptions( + options, + redraw, + animate, + updateSyncedCharts, + overwriteInitialConfig); + + callback && callback(chartInstance); + + }, 30); + }); + } tryOnUnmounted(() => { if (!chartInstance) return; @@ -28,5 +57,6 @@ export function useApexCharts(elRef: Ref) { return { setOptions, + updateOptions, }; }