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
parent
commit
5eecec0312
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
  1. 32
      src/hooks/web/useApexCharts.ts

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

Loading…
Cancel
Save