Browse Source
perf: Update useApexCharts.ts (#139)
1、setOptions增加callback方法,返回chartInstance,以便于对图表进行再操作,例如调用updateOptions方法更新图表;
2、新增调用ApexCharts的updateOptions方法更新图表
pull/282/head
Pom
6 years ago
committed by
GitHub
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with
31 additions and
1 deletions
-
src/hooks/web/useApexCharts.ts
|
|
|
@ -7,7 +7,7 @@ import ApexCharts from 'apexcharts'; |
|
|
|
export function useApexCharts(elRef: Ref<HTMLDivElement>) { |
|
|
|
let chartInstance: Nullable<ApexCharts> = 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<HTMLDivElement>) { |
|
|
|
chartInstance = new ApexCharts(el, options); |
|
|
|
|
|
|
|
chartInstance && chartInstance.render(); |
|
|
|
|
|
|
|
// setOptions增加callback方法,返回chartInstance,以便于对图表进行再操作,例如调用updateOptions方法更新图表
|
|
|
|
callback && callback(chartInstance); |
|
|
|
|
|
|
|
}, 30); |
|
|
|
}); |
|
|
|
} |
|
|
|
|
|
|
|
// 新增调用ApexCharts的updateOptions方法更新图表
|
|
|
|
function updateOptions( |
|
|
|
chartInstance: Nullable<ApexCharts>, |
|
|
|
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<HTMLDivElement>) { |
|
|
|
|
|
|
|
return { |
|
|
|
setOptions, |
|
|
|
updateOptions, |
|
|
|
}; |
|
|
|
} |
|
|
|
|