fix: chart instance should always be initialized

Author: Justineo

CHANGELOG.md

@@ -1,3 +1,8 @@
+## 6.0.2
+
+* Make `notMerge` option still respect `update-options`.
+* The default behavior of `notMerge` now revert to checking if there is a reference change for the `option` prop.
+
 ## 6.0.1
 
 * Update should always be `notMerge: true`.

src/ECharts.ts

@@ -80,7 +80,7 @@ export default defineComponent({
     const { autoresize, manualUpdate, loading, loadingOptions } = toRefs(props);
 
     const realOption = computed(
-      () => manualOption.value || props.option || Object.create(null)
+      () => manualOption.value || props.option || null
     );
     const realTheme = computed(() => props.theme || unref(defaultTheme) || {});
     const realInitOptions = computed(
@@ -92,7 +92,7 @@ export default defineComponent({
     const nonEventAttrs = computed(() => omitOn(attrs));
 
     function init(option?: Option) {
-      if (chart.value || !root.value) {
+      if (!root.value) {
         return;
       }
 
@@ -141,7 +141,10 @@ export default defineComponent({
       }
 
       function commit() {
-        instance.setOption(option || realOption.value, realUpdateOptions.value);
+        const opt = option || realOption.value;
+        if (opt) {
+          instance.setOption(opt, realUpdateOptions.value);
+        }
       }
 
       if (autoresize.value) {
@@ -226,16 +229,14 @@ export default defineComponent({
       }
     });
 
-    const publicApi = usePublicAPI(chart, init);
+    const publicApi = usePublicAPI(chart);
 
     useLoading(chart, loading, loadingOptions);
 
     useAutoresize(chart, autoresize, root);
 
     onMounted(() => {
-      if (props.option) {
-        init();
-      }
+      init();
     });
 
     onUnmounted(cleanup);

src/composables/api.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { Ref } from "vue-demi";
-import { EChartsType, Option } from "../types";
+import { EChartsType } from "../types";
 
 const METHOD_NAMES = [
   "getWidth",
@@ -24,17 +24,12 @@ type MethodName = typeof METHOD_NAMES[number];
 type PublicMethods = Pick<EChartsType, MethodName>;
 
 export function usePublicAPI(
-  chart: Ref<EChartsType | undefined>,
-  init: (option?: Option) => void
+  chart: Ref<EChartsType | undefined>
 ): PublicMethods {
   function makePublicMethod<T extends MethodName>(
     name: T
   ): (...args: Parameters<EChartsType[T]>) => ReturnType<EChartsType[T]> {
     return (...args) => {
-      if (!chart.value) {
-        init();
-      }
-
       if (!chart.value) {
         throw new Error("ECharts is not initialized yet.");
       }

src/demo/Demo.vue

@@ -590,6 +590,9 @@ export default {
   },
   mounted() {
     this.startActions();
+  },
+  beforeUnmount() {
+    this.stopActions();
   }
 };
 </script>