docs: improve demo

src/demo/examples/ConnectChart.vue

@@ -46,10 +46,8 @@ watch(
     </template>
     <template #extra>
       <p class="actions">
-        <label>
-          <input type="checkbox" v-model="connected" />
-          Connected
-        </label>
+        <input id="connected-check" type="checkbox" v-model="connected" />
+        <label for="connected-check">Connected</label>
       </p>
     </template>
   </v-example>

src/demo/examples/Example.vue

@@ -49,7 +49,6 @@ defineProps({
     width: calc(60vw + 4em);
     height: 360px;
     max-width: 720px;
-    padding: 1.5em 2em;
     border: 1px solid rgba(0, 0, 0, 0.1);
     border-radius: 8px;
     box-shadow: 0 0 45px rgba(0, 0, 0, 0.2);
@@ -75,7 +74,6 @@ defineProps({
       width: 100%;
       min-width: 0;
       height: 60vw;
-      padding: 1em 0;
       border: none;
       border-radius: 0;
       box-shadow: none;
@@ -88,7 +86,6 @@ defineProps({
     .echarts {
       width: 28vw;
       min-width: 240px;
-      padding: 1em 1.5em;
       height: 180px;
     }
 

src/demo/examples/GlChart.vue

@@ -50,6 +50,8 @@ onMounted(() => {
         }
       },
       visualMap: {
+        bottom: "3%",
+        left: "3%",
         max: 40,
         calculable: true,
         realtime: false,

src/demo/examples/ManualChart.vue

@@ -46,6 +46,7 @@ function load() {
       },
       title: {
         text: "World Flights",
+        top: "5%",
         left: "center",
         textStyle: {
           color: "#eee"
@@ -62,8 +63,10 @@ function load() {
       },
       geo: {
         map: "world",
-        left: 0,
-        right: 0,
+        top: "15%",
+        right: "5%",
+        bottom: "5%",
+        left: "5%",
         silent: true,
         itemStyle: {
           borderColor: "#003",

src/demo/examples/PolarChart.vue

@@ -58,10 +58,8 @@ const style = computed(() => {
           <option :value="null">Default</option>
           <option value="dark">Dark</option>
         </select>
-        <label>
-          <input type="checkbox" v-model="loading" />
-          Loading
-        </label>
+        <input id="loading-check" type="checkbox" v-model="loading" />
+        <label for="loading-check">Loading</label>
       </p>
     </template>
   </v-example>