feat: revamp demo

demo/examples/GeoChart.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import { use, registerMap } from "echarts/core";
 import { ScatterChart, EffectScatterChart } from "echarts/charts";
 import {
@@ -12,6 +12,7 @@ import VChart from "../../src/ECharts";
 import VExample from "./Example.vue";
 import getData from "../data/map";
 import chinaMap from "../data/china.json";
+import { isGeoJSONSource } from "../utils/geo";
 
 use([
   ScatterChart,
@@ -22,29 +23,42 @@ use([
   TooltipComponent,
 ]);
 
-registerMap("china", chinaMap);
+const chinaGeoJSON = isGeoJSONSource(chinaMap) ? chinaMap : null;
+
+if (chinaGeoJSON) {
+  registerMap("china", chinaGeoJSON);
+}
+
+type ChartInstance = InstanceType<typeof VChart>;
+
+interface Snapshot {
+  src: string;
+  width: number;
+  height: number;
+}
 
 const option = shallowRef(getData());
-const map = shallowRef(null);
-const open = shallowRef(false);
+const map = shallowRef<ChartInstance | null>(null);
+const isModalOpen = shallowRef(false);
+const snapshot = shallowRef<Snapshot | null>(null);
 
-let img = null;
-
-function convert() {
-  img = {
-    src: map.value.getDataURL({
-      pixelRatio: window.devicePixelRatio || 1,
-    }),
-    width: map.value.getWidth(),
-    height: map.value.getHeight(),
+function convert(): void {
+  const chart = map.value;
+  if (!chart) {
+    return;
+  }
+  snapshot.value = {
+    src: chart.getDataURL({ pixelRatio: window.devicePixelRatio || 1 }),
+    width: chart.getWidth(),
+    height: chart.getHeight(),
   };
-  open.value = true;
+  isModalOpen.value = true;
 }
 </script>
 
 <template>
-  <v-example id="map" title="Map" desc="(with GeoJSON & image converter)">
-    <v-chart
+  <VExample id="map" title="Map" desc="GeoJSON · image converter">
+    <VChart
       ref="map"
       :option="option"
       autoresize
@@ -54,9 +68,18 @@ function convert() {
       <p class="actions">
         <button @click="convert">Convert to image</button>
       </p>
-      <aside class="modal" :class="{ open }" @click="open = false">
-        <img v-if="img" v-bind="img" />
+      <aside
+        class="modal"
+        :class="{ open: isModalOpen }"
+        @click="isModalOpen = false"
+      >
+        <img
+          v-if="snapshot"
+          :src="snapshot.src"
+          :width="snapshot.width"
+          :height="snapshot.height"
+        />
       </aside>
     </template>
-  </v-example>
+  </VExample>
 </template>