perf: Update useApexCharts.ts (#139)

1、setOptions增加callback方法，返回chartInstance，以便于对图表进行再操作，例如调用updateOptions方法更新图表； 2、新增调用ApexCharts的updateOptions方法更新图表

perf: Update useApexCharts.ts (#139)
1、setOptions增加callback方法，返回chartInstance，以便于对图表进行再操作，例如调用updateOptions方法更新图表； 2、新增调用ApexCharts的updateOptions方法更新图表
Pom · GitHub
1 parent 877311f9
Showing 1 changed file with 31 additions and 1 deletions
src/hooks/web/useApexCharts.ts
@@ -7,7 +7,7 @@ import ApexCharts from &#39;apexcharts&#39;;
 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&lt;HTMLDivElement&gt;) {
         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&lt;HTMLDivElement&gt;) {
  
   return {
     setOptions,
+    updateOptions,
   };
 }