perf: Update useApexCharts.ts (#139)

1、setOptions增加callback方法,返回chartInstance,以便于对图表进行再操作,例如调用updateOptions方法更新图表;
2、新增调用ApexCharts的updateOptions方法更新图表
This commit is contained in:
Pom
2020-12-21 08:06:51 -06:00
committed by GitHub
parent 877311f9df
commit 5eecec0312

View File

@@ -7,7 +7,7 @@ import ApexCharts from 'apexcharts';
export function useApexCharts(elRef: Ref<HTMLDivElement>) { export function useApexCharts(elRef: Ref<HTMLDivElement>) {
let chartInstance: Nullable<ApexCharts> = null; let chartInstance: Nullable<ApexCharts> = null;
function setOptions(options: any) { function setOptions(options: any, callback) {
nextTick(() => { nextTick(() => {
useTimeoutFn(() => { useTimeoutFn(() => {
const el = unref(elRef); const el = unref(elRef);
@@ -16,9 +16,38 @@ export function useApexCharts(elRef: Ref<HTMLDivElement>) {
chartInstance = new ApexCharts(el, options); chartInstance = new ApexCharts(el, options);
chartInstance && chartInstance.render(); chartInstance && chartInstance.render();
// setOptions增加callback方法返回chartInstance以便于对图表进行再操作例如调用updateOptions方法更新图表
callback && callback(chartInstance);
}, 30); }, 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(() => { tryOnUnmounted(() => {
if (!chartInstance) return; if (!chartInstance) return;
@@ -28,5 +57,6 @@ export function useApexCharts(elRef: Ref<HTMLDivElement>) {
return { return {
setOptions, setOptions,
updateOptions,
}; };
} }