feat: add options for autoresize

* add `throttle: number` to specify throttle delay (#419 #562)
* add `onResize: () => void` to specify a resize callback (#714)

Author: Justineo

README.md

@@ -225,9 +225,9 @@ Drop `<script>` inside your HTML file and access the component via `window.VueEC
 
 <!-- vue3Scripts:start -->
 ```html
-<script src="https://cdn.jsdelivr.net/npm/vue@3.2.47"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue@3.3.4"></script>
 <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
-<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.5.5"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.6.0"></script>
 ```
 <!-- vue3Scripts:end -->
 
@@ -247,7 +247,7 @@ app.component('v-chart', VueECharts)
 ```html
 <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
 <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
-<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.5.5"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.6.0"></script>
 ```
 <!-- vue2Scripts:end -->
 
@@ -290,9 +290,9 @@ See more examples [here](https://github.com/ecomfe/vue-echarts/tree/main/src/dem
 
   Group name to be used in chart [connection](https://echarts.apache.org/en/api.html#echarts.connect). See `echartsInstance.group` [here →](https://echarts.apache.org/en/api.html#echartsInstance.group)
 
-- `autoresize: boolean` (default: `false`)
+- `autoresize: boolean | { throttle?: number, onResize?: () => void }` (default: `false`)
 
-  Whether the chart should be resized automatically whenever its root is resized.
+  Whether the chart should be resized automatically whenever its root is resized. Use the options object to specify a custom throttle delay (in milliseconds) and/or an extra resize callback function.
 
 - `loading: boolean` (default: `false`)
 

README.zh-Hans.md

@@ -225,9 +225,9 @@ import "echarts";
 
 <!-- vue3Scripts:start -->
 ```html
-<script src="https://cdn.jsdelivr.net/npm/vue@3.2.47"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue@3.3.4"></script>
 <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
-<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.5.5"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.6.0"></script>
 ```
 <!-- vue3Scripts:end -->
 
@@ -247,7 +247,7 @@ app.component('v-chart', VueECharts)
 ```html
 <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
 <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
-<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.5.5"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.6.0"></script>
 ```
 <!-- vue2Scripts:end -->
 
@@ -290,9 +290,9 @@ Vue.component("v-chart", VueECharts);
 
   图表的分组，用于[联动](https://echarts.apache.org/zh/api.html#echarts.connect)。请参考 `echartsInstance.group`。[前往 →](https://echarts.apache.org/zh/api.html#echartsInstance.group)
 
-- `autoresize: boolean`（默认值`false`）
+- `autoresize: boolean | { throttle?: number, onResize?: () => void }`（默认值`false`）
 
-  图表在组件根元素尺寸变化时是否需要自动进行重绘。
+  图表在组件根元素尺寸变化时是否需要自动进行重绘。也可以传入一个选项对象来指定自定义的节流延迟和尺寸变化时的额外回调函数。
 
 - `loading: boolean`（默认值：`false`）
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-echarts",
-  "version": "6.5.5",
+  "version": "6.6.0",
   "description": "Vue.js component for Apache ECharts.",
   "author": "GU Yiling <[email protected]>",
   "scripts": {

pnpm-lock.yaml

@@ -8,7 +8,7 @@ const { readFile, writeFile } = fs.promises;
 const CDN_PREFIX = "https://cdn.jsdelivr.net/npm/";
 
 const DEP_VERSIONS = {
-  "vue@3": "3.2.47",
+  "vue@3": "3.3.4",
   "vue@2": "2.7.14",
   echarts: "5.4.2",
   [name]: version

scripts/docs.js

@@ -1,32 +1,48 @@
-import { Ref, watch } from "vue-demi";
+import { watch, type Ref, type PropType } from "vue-demi";
 import { throttle } from "echarts/core";
-import { addListener, removeListener, ResizeCallback } from "resize-detector";
-import { EChartsType } from "../types";
+import {
+  addListener,
+  removeListener,
+  type ResizeCallback
+} from "resize-detector";
+import { type EChartsType } from "../types";
+
+type AutoresizeProp =
+  | boolean
+  | {
+      throttle?: number;
+      onResize?: () => void;
+    };
 
 export function useAutoresize(
   chart: Ref<EChartsType | undefined>,
-  autoresize: Ref<boolean>,
+  autoresize: Ref<AutoresizeProp | undefined>,
   root: Ref<HTMLElement | undefined>
 ): void {
   let resizeListener: ResizeCallback | null = null;
 
   watch([root, chart, autoresize], ([root, chart, autoresize], _, cleanup) => {
     if (root && chart && autoresize) {
-      resizeListener = throttle(() => {
+      const autoresizeOptions = autoresize === true ? {} : autoresize;
+      const { throttle: wait = 100, onResize } = autoresizeOptions;
+
+      const callback = () => {
         chart.resize();
-      }, 100);
+        onResize?.();
+      };
 
+      resizeListener = wait ? throttle(callback, wait) : callback;
       addListener(root, resizeListener);
     }
 
     cleanup(() => {
-      if (resizeListener && root) {
+      if (root && resizeListener) {
         removeListener(root, resizeListener);
       }
     });
   });
 }
 
 export const autoresizeProps = {
-  autoresize: Boolean
+  autoresize: [Boolean, Object] as PropType<AutoresizeProp>
 };

src/composables/autoresize.ts

@@ -4,21 +4,20 @@ import {
   computed,
   watchEffect,
   type Ref,
-  type InjectionKey
+  type InjectionKey,
+  type PropType
 } from "vue-demi";
-import { EChartsType } from "../types";
+import type { EChartsType, LoadingOptions } from "../types";
 
 export const LOADING_OPTIONS_KEY =
   "ecLoadingOptions" as unknown as InjectionKey<
-    UnknownRecord | Ref<UnknownRecord>
+    LoadingOptions | Ref<LoadingOptions>
   >;
 
-type UnknownRecord = Record<string, unknown>;
-
 export function useLoading(
   chart: Ref<EChartsType | undefined>,
   loading: Ref<boolean>,
-  loadingOptions: Ref<UnknownRecord | undefined>
+  loadingOptions: Ref<LoadingOptions | undefined>
 ): void {
   const defaultLoadingOptions = inject(LOADING_OPTIONS_KEY, {});
   const realLoadingOptions = computed(() => ({
@@ -42,5 +41,5 @@ export function useLoading(
 
 export const loadingProps = {
   loading: Boolean,
-  loadingOptions: Object
+  loadingOptions: Object as PropType<LoadingOptions>
 };

src/composables/loading.ts

@@ -25,6 +25,21 @@ export type EventTarget = EChartsType | ZRenderType;
 type SetOptionType = EChartsType["setOption"];
 export type Option = Parameters<SetOptionType>[0];
 
+export type LoadingOptions = {
+  text?: string;
+  textColor?: string;
+  fontSize?: number | string;
+  fontWeight?: number | string;
+  fontStyle?: string;
+  fontFamily?: string;
+  maskColor?: string;
+  showSpinner?: boolean;
+  color?: string;
+  spinnerRadius?: number;
+  lineWidth?: number;
+  zlevel?: number;
+};
+
 type MouseEventName =
   | "click"
   | "dblclick"