chore: refine demo

Author: Justineo

src/demo/Demo.vue

@@ -247,13 +247,15 @@ select {
 }
 
 figure {
-  display: inline-block;
-  position: relative;
+  display: flex;
+  justify-content: center;
+  width: fit-content;
   margin: 2em auto;
 
   .echarts {
+    width: calc(60vw + 4em);
     height: 360px;
-    min-width: calc(40vw + 4em);
+    max-width: 720px;
     padding: 1.5em 2em;
     border: 1px solid rgba(0, 0, 0, 0.1);
     border-radius: 8px;
@@ -312,9 +314,6 @@ figure {
 
 @media (max-width: 980px) {
   p {
-    display: flex;
-    justify-content: center;
-
     select {
       text-indent: calc(50% - 1em);
     }
@@ -352,14 +351,19 @@ figure {
     }
   }
 
+  .actions {
+    display: flex;
+    justify-content: center;
+  }
+
   figure {
     width: 100vw;
     margin: 1em auto;
 
     .echarts {
       width: 100%;
       min-width: 0;
-      height: 75vw;
+      height: 60vw;
       padding: 1em 0;
       border: none;
       border-radius: 0;

src/demo/examples/BarChart.vue

@@ -69,7 +69,7 @@ function refresh() {
           second{{ seconds > 1 ? "s" : "" }}...
         </small>
       </p>
-      <p>
+      <p class="actions">
         <button @click="refresh" :disabled="seconds > 0">Refresh</button>
       </p>
     </template>

src/demo/examples/ConnectChart.vue

@@ -45,7 +45,7 @@ watch(
       <v-chart :option="c2" group="radiance" autoresize />
     </template>
     <template #extra>
-      <p>
+      <p class="actions">
         <label>
           <input type="checkbox" v-model="connected" />
           Connected

src/demo/examples/GeoChart.vue

@@ -51,7 +51,7 @@ function convert() {
       style="background-color: #404a59"
     />
     <template #extra>
-      <p>
+      <p class="actions">
         <button @click="convert">Convert to image</button>
       </p>
       <aside class="modal" :class="{ open }" @click="open = false">

src/demo/examples/ManualChart.vue

@@ -105,7 +105,7 @@ function load() {
         You may use the <code>manual-update</code> prop for performance critical
         use cases.
       </p>
-      <p>
+      <p class="actions">
         <button :disabled="loaded" @click="load">Load</button>
       </p>
     </template>

src/demo/examples/PolarChart.vue

@@ -33,7 +33,7 @@ const theme = shallowRef("dark");
       :style="theme === 'dark' ? 'background-color: #100c2a' : ''"
     />
     <template #extra>
-      <p>
+      <p class="actions">
         Theme
         <select v-model="theme">
           <option :value="null">Default</option>

src/demo/examples/RadarChart.vue

@@ -22,7 +22,7 @@ const metricIndex = shallowRef(0);
   <v-example id="radar" title="Radar chart" desc="(with Pinia integration)">
     <v-chart :option="getRadarData(metricIndex)" autoresize />
     <template #extra>
-      <p>
+      <p class="actions">
         <select v-model="metricIndex">
           <option
             v-for="(metric, index) in metrics"