chore: update demo

src/demo/Demo.vue

@@ -297,7 +297,7 @@ input {
 }
 
 label {
-  display: flex;
+  display: inline-flex;
   align-items: center;
   justify-content: center;
 }
@@ -381,11 +381,13 @@ select {
       }
     }
   }
+}
 
 .actions {
   display: flex;
   justify-content: center;
-  }
+  align-items: center;
+  gap: 8px;
 }
 
 .renderer,

src/demo/examples/PolarChart.vue

@@ -7,7 +7,7 @@ import {
   LegendComponent,
   TooltipComponent
 } from "echarts/components";
-import { shallowRef } from "vue";
+import { computed, shallowRef } from "vue";
 import VChart from "../../ECharts";
 import VExample from "./Example";
 import getData from "../data/polar";
@@ -22,6 +22,23 @@ use([
 
 const option = shallowRef(getData());
 const theme = shallowRef("dark");
+const loading = shallowRef(false);
+const loadingOptions = computed(() =>
+  theme.value === "dark"
+    ? {
+        color: "#fff",
+        textColor: "#fff",
+        maskColor: "rgba(0, 0, 0, 0.7)"
+      }
+    : null
+);
+const style = computed(() => {
+  return theme.value === "dark"
+    ? loading.value
+      ? "background-color: #05040d"
+      : "background-color: #100c2a"
+    : "";
+});
 </script>
 
 <template>
@@ -29,8 +46,10 @@ const theme = shallowRef("dark");
     <v-chart
       :option="option"
       autoresize
+      :loading="loading"
+      :loading-options="loadingOptions"
       :theme="theme"
-      :style="theme === 'dark' ? 'background-color: #100c2a' : ''"
+      :style="style"
     />
     <template #extra>
       <p class="actions">
@@ -39,6 +58,10 @@ const theme = shallowRef("dark");
           <option :value="null">Default</option>
           <option value="dark">Dark</option>
         </select>
+        <label>
+          <input type="checkbox" v-model="loading" />
+          Loading
+        </label>
       </p>
     </template>
   </v-example>