refactor: rename options to option to align with ECharts itself

- removed built-in styles
- use ECharts' built-in throttle
- generate bundled .d.ts, hack three methods for now
- loadingOptions can be any object type

src/composables/api.ts

@@ -1,11 +1,10 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { Ref } from "vue";
-import { EChartsType, OptionType } from "@/types";
+import { Ref } from "vue-demi";
+import { EChartsType, OptionType } from "../types";
 
 const METHOD_NAMES = [
   "getWidth",
   "getHeight",
-  "getDom",
   "getOption",
   "resize",
   "dispatchAction",
@@ -24,7 +23,7 @@ type PublicMethods = Pick<EChartsType, MethodName>;
 
 export function usePublicAPI(
   chart: Ref<EChartsType | undefined>,
-  init: (options?: OptionType) => void
+  init: (option?: OptionType) => void
 ) {
   function makePublicMethod<T extends MethodName>(
     name: T
@@ -41,6 +40,12 @@ export function usePublicAPI(
     };
   }
 
+  function makeAnyMethod<T extends MethodName>(
+    name: T
+  ): (...args: any[]) => ReturnType<EChartsType[T]> {
+    return makePublicMethod(name) as any;
+  }
+
   function makePublicMethods(): PublicMethods {
     const methods = Object.create(null);
     METHOD_NAMES.forEach(name => {
@@ -50,5 +55,10 @@ export function usePublicAPI(
     return methods as PublicMethods;
   }
 
-  return makePublicMethods();
+  return {
+    ...makePublicMethods(),
+    dispatchAction: makeAnyMethod("dispatchAction"),
+    getDataURL: makeAnyMethod("getDataURL"),
+    getConnectedDataURL: makeAnyMethod("getConnectedDataURL")
+  };
 }

src/composables/autoresize.ts

@@ -1,12 +1,13 @@
-import { Ref, watch } from "vue";
+import { Ref, watch } from "vue-demi";
+import { throttle } from "echarts/core";
 import { addListener, removeListener, ResizeCallback } from "resize-detector";
-import { EChartsType, OptionsType } from "@/types";
+import { EChartsType, OptionType } from "../types";
 
 export function useAutoresize(
   chart: Ref<EChartsType | undefined>,
   autoresize: Ref<boolean>,
   root: Ref<HTMLElement | undefined>,
-  options: Ref<OptionsType>
+  option: Ref<OptionType>
 ): void {
   let resizeListener: ResizeCallback | null = null;
   let lastArea = 0;
@@ -22,16 +23,16 @@ export function useAutoresize(
   watch([root, chart, autoresize], ([root, chart, autoresize], _, cleanup) => {
     if (root && chart && autoresize) {
       lastArea = getArea();
-      resizeListener = () => {
+      resizeListener = throttle(() => {
         if (lastArea === 0) {
           chart.setOption(Object.create(null), true);
           chart.resize();
-          chart.setOption(options.value, true);
+          chart.setOption(option.value, true);
         } else {
           chart.resize();
         }
         lastArea = getArea();
-      };
+      }, 100);
 
       addListener(root, resizeListener);
     }

src/composables/loading.ts

@@ -1,25 +1,10 @@
-import { Ref, PropType, watchEffect } from "vue";
-import { EChartsType } from "@/types";
-
-export interface LoadingOptions {
-  text?: string;
-  color?: string;
-  textColor?: string;
-  maskColor?: string;
-  zlevel?: number;
-  fontSize?: number;
-  showSpinner?: boolean;
-  spinnerRadius?: number;
-  lineWidth?: number;
-  fontWeight?: string | number;
-  fontStyle?: string;
-  fontFamily?: string;
-}
+import { Ref, watchEffect } from "vue-demi";
+import { EChartsType } from "../types";
 
 export function useLoading(
   chart: Ref<EChartsType | undefined>,
   loading: Ref<boolean>,
-  loadingOptions?: Ref<LoadingOptions | undefined>
+  loadingOptions?: Ref<object | undefined>
 ): void {
   watchEffect(() => {
     const instance = chart.value;
@@ -37,5 +22,5 @@ export function useLoading(
 
 export const loadingProps = {
   loading: Boolean,
-  loadingOptions: Object as PropType<LoadingOptions>
+  loadingOptions: Object
 };