feat: revamp demo

demo/examples/BarChart.vue

@@ -1,62 +1,70 @@
-<script setup>
+<script setup lang="ts">
 import { use, registerTheme } from "echarts/core";
 import { BarChart } from "echarts/charts";
 import { GridComponent, DatasetComponent } from "echarts/components";
-import { shallowRef, onBeforeUnmount } from "vue";
+import { shallowRef, computed } from "vue";
+import { useIntervalFn } from "@vueuse/core";
+import type { LoadingOptions } from "../../src/types";
 import VChart from "../../src/ECharts";
 import VExample from "./Example.vue";
 import getData from "../data/bar";
 import theme from "../theme.json";
+import darkTheme from "../theme-dark.json";
+import { useDemoDark } from "../composables/useDemoDark";
 
 use([BarChart, DatasetComponent, GridComponent]);
 registerTheme("ovilia-green", theme);
+registerTheme("ovilia-green-dark", darkTheme);
 
 const seconds = shallowRef(0);
 const loading = shallowRef(false);
-const loadingOptions = {
-  text: "Loading…",
-  color: "#4ea397",
-  maskColor: "rgba(255, 255, 255, 0.4)",
-};
+const isDark = useDemoDark();
+const loadingOptions = computed(
+  () =>
+    ({
+      text: "Loading…",
+      textColor: isDark.value ? "#e5e7eb" : "#111827",
+      color: "#42b883",
+      maskColor: isDark.value
+        ? "rgba(0, 0, 0, 0.45)"
+        : "rgba(255, 255, 255, 0.5)",
+    }) satisfies LoadingOptions,
+);
 const option = shallowRef(getData());
 
-let timer = null;
-
-onBeforeUnmount(() => {
-  clearInterval(timer);
-});
-
-function tick() {
-  seconds.value--;
-
-  if (seconds.value === 0) {
-    clearInterval(timer);
-    loading.value = false;
-    option.value = getData();
-  }
-}
+const { pause, resume } = useIntervalFn(
+  () => {
+    if (seconds.value <= 0) {
+      pause();
+      return;
+    }
+    seconds.value -= 1;
+    if (seconds.value === 0) {
+      loading.value = false;
+      option.value = getData();
+      pause();
+    }
+  },
+  1000,
+  { immediate: false },
+);
 
 function refresh() {
-  // simulating async data from server
   seconds.value = 3;
   loading.value = true;
-
-  timer = setInterval(tick, 1000);
+  pause();
+  resume();
 }
 </script>
 
 <template>
-  <v-example
-    id="bar"
-    title="Bar chart"
-    desc="(with async data &amp; custom theme)"
-  >
-    <v-chart
+  <VExample id="bar" title="Bar chart" desc="async data · custom theme">
+    <VChart
       :option="option"
-      theme="ovilia-green"
       autoresize
+      :theme="isDark ? 'ovilia-green-dark' : 'ovilia-green'"
       :loading="loading"
-      :loadingOptions="loadingOptions"
+      :loading-options="loadingOptions"
     />
     <template #extra>
       <p v-if="seconds <= 0">
@@ -70,8 +78,8 @@ function refresh() {
         </small>
       </p>
       <p class="actions">
-        <button @click="refresh" :disabled="seconds > 0">Refresh</button>
+        <button :disabled="seconds > 0" @click="refresh">Refresh</button>
       </p>
     </template>
-  </v-example>
+  </VExample>
 </template>