refactor: improve import statements

Author: Justineo

src/ECharts.ts

@@ -13,11 +13,21 @@ import {
   nextTick,
   watchEffect,
   getCurrentInstance,
-  Vue2,
-  type PropType,
-  type InjectionKey
+  Vue2
 } from "vue-demi";
 import { init as initChart } from "echarts/core";
+
+import {
+  usePublicAPI,
+  useAutoresize,
+  autoresizeProps,
+  useLoading,
+  loadingProps
+} from "./composables";
+import { isOn, omitOn, unwrapInjected } from "./utils";
+import { register, TAG_NAME } from "./wc";
+
+import type { PropType, InjectionKey } from "vue-demi";
 import type {
   EChartsType,
   EventTarget,
@@ -30,15 +40,8 @@ import type {
   UpdateOptionsInjection,
   Emits
 } from "./types";
-import {
-  usePublicAPI,
-  useAutoresize,
-  autoresizeProps,
-  useLoading,
-  loadingProps
-} from "./composables";
-import { isOn, omitOn, unwrapInjected } from "./utils";
-import { register, TAG_NAME, type EChartsElement } from "./wc";
+import type { EChartsElement } from "./wc";
+
 import "./style.css";
 
 const __CSP__ = false;
@@ -75,7 +78,6 @@ export default defineComponent({
   inheritAttrs: false,
   setup(props, { attrs }) {
     const root = shallowRef<EChartsElement>();
-    const inner = shallowRef<HTMLElement>();
     const chart = shallowRef<EChartsType>();
     const manualOption = shallowRef<Option>();
     const defaultTheme = inject(THEME_KEY, null);
@@ -155,12 +157,12 @@ export default defineComponent({
     }
 
     function init(option?: Option) {
-      if (!inner.value) {
+      if (!root.value) {
         return;
       }
 
       const instance = (chart.value = initChart(
-        inner.value,
+        root.value,
         realTheme.value,
         realInitOptions.value
       ));
@@ -306,7 +308,7 @@ export default defineComponent({
 
     useLoading(chart, loading, loadingOptions);
 
-    useAutoresize(chart, autoresize, inner);
+    useAutoresize(chart, autoresize, root);
 
     onMounted(() => {
       init();
@@ -327,7 +329,6 @@ export default defineComponent({
     return {
       chart,
       root,
-      inner,
       setOption,
       nonEventAttrs,
       nativeListeners,
@@ -344,8 +345,6 @@ export default defineComponent({
     ) as any;
     attrs.ref = "root";
     attrs.class = attrs.class ? ["echarts"].concat(attrs.class) : "echarts";
-    return h(TAG_NAME, attrs, [
-      h("div", { ref: "inner", class: "vue-echarts-inner" })
-    ]);
+    return h(TAG_NAME, attrs);
   }
 });

src/composables/api.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { Ref } from "vue-demi";
-import { EChartsType } from "../types";
+import type { Ref } from "vue-demi";
+import type { EChartsType } from "../types";
 
 const METHOD_NAMES = [
   "getWidth",

src/composables/autoresize.ts

@@ -1,6 +1,8 @@
-import { watch, type Ref, type PropType } from "vue-demi";
+import { watch } from "vue-demi";
 import { throttle } from "echarts/core";
-import { type EChartsType } from "../types";
+
+import type { Ref, PropType } from "vue-demi";
+import type { EChartsType } from "../types";
 
 type AutoresizeProp =
   | boolean

src/composables/loading.ts

@@ -1,12 +1,7 @@
 import { unwrapInjected } from "../utils";
-import {
-  inject,
-  computed,
-  watchEffect,
-  type Ref,
-  type InjectionKey,
-  type PropType
-} from "vue-demi";
+import { inject, computed, watchEffect } from "vue-demi";
+
+import type { Ref, InjectionKey, PropType } from "vue-demi";
 import type { EChartsType, LoadingOptions } from "../types";
 
 export const LOADING_OPTIONS_KEY =

src/types.ts

@@ -1,6 +1,7 @@
 import { init } from "echarts/core";
+
 import type { SetOptionOpts, ECElementEvent, ElementEvent } from "echarts";
-import type { Ref } from "vue";
+import type { Ref } from "vue-demi";
 
 export type Injection<T> = T | null | Ref<T | null> | { value: T | null };
 

src/utils.ts

@@ -1,4 +1,5 @@
 import { unref, isRef } from "vue-demi";
+
 import type { Injection } from "./types";
 
 type Attrs = {