未验证 提交 5eecec03 编写于 作者: P Pom 提交者: GitHub

perf: Update useApexCharts.ts (#139)

1、setOptions增加callback方法,返回chartInstance,以便于对图表进行再操作,例如调用updateOptions方法更新图表;
2、新增调用ApexCharts的updateOptions方法更新图表
上级 877311f9
......@@ -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,
};
}
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册