docs: improve demo

src/demo/Demo.vue

@@ -111,9 +111,7 @@ watch(codeOpen, open => {
     </aside>
 
     <aside class="codegen">
-      <button @click="openCodegen">
+      <button @click="openCodegen">✨ <code>import</code> Codegen</button>
-        ✨ <code>import</code> Codegen <span class="badge">beta</span>
-      </button>
     </aside>
 
     <code-gen v-model:open="codeOpen" :renderer="initOptions.renderer" />
@@ -447,15 +445,6 @@ select {
     align-items: center;
     padding: 0 4px;
     gap: 4px;
-
-    .badge {
-      display: block;
-      padding: 2px 3px;
-      font-size: 10px;
-      background: #36485e54;
-      color: #fff;
-      border-radius: 4px;
-    }
   }
 }
 

src/demo/data/connect.js

@@ -15,15 +15,16 @@ const c1 = {
     fontWeight: 300
   },
   legend: {
-    top: 20,
+    top: "3%",
     data: ["scatter"]
   },
   tooltip: {
     formatter: "{c}"
   },
   grid: {
-    top: "26%",
+    top: "30%",
-    bottom: "26%"
+    right: "18%",
+    bottom: "20%"
   },
   xAxis: {
     type: "value",
@@ -40,7 +41,8 @@ const c1 = {
   visualMap: [
     {
       realtime: false,
-      left: "right",
+      right: "2%",
+      bottom: "3%",
       selectedMode: "multiple",
       dimension: 2,
       selected: [],
@@ -67,15 +69,16 @@ const c2 = {
     fontWeight: 300
   },
   legend: {
-    top: 20,
+    top: "3%",
     data: ["scatter"]
   },
   tooltip: {
     formatter: "{c}"
   },
   grid: {
-    top: "26%",
+    top: "30%",
-    bottom: "26%"
+    right: "18%",
+    bottom: "20%"
   },
   xAxis: {
     type: "value",
@@ -91,7 +94,8 @@ const c2 = {
   },
   visualMap: [
     {
-      left: "right",
+      right: "2%",
+      bottom: "3%",
       selectedMode: "multiple",
       dimension: 2,
       selected: [],

src/demo/data/map.js

@@ -408,6 +408,7 @@ export default function getData() {
       text: "Air quality of major cities in China",
       subtext: "data from PM25.in",
       sublink: "http://www.pm25.in",
+      top: "5%",
       left: "center",
       textStyle: {
         color: "#fff"
@@ -418,9 +419,9 @@ export default function getData() {
     },
     legend: {
       orient: "vertical",
-      y: "bottom",
+      right: "5%",
-      x: "right",
+      bottom: "5%",
-      data: ["pm2.5"],
+      data: ["PM2.5"],
       textStyle: {
         color: "#fff"
       }
@@ -438,11 +439,13 @@ export default function getData() {
       itemStyle: {
         areaColor: "#323c48",
         borderColor: "#111"
-      }
+      },
+      top: "20%",
+      bottom: "7%"
     },
     series: [
       {
-        name: "pm2.5",
+        name: "PM2.5",
         type: "scatter",
         coordinateSystem: "geo",
         data: convertData(data),

src/demo/data/pie.js

@@ -6,6 +6,7 @@ export default function getData() {
     },
     title: {
       text: "Traffic Sources",
+      top: "5%",
       left: "center"
     },
     tooltip: {
@@ -14,7 +15,8 @@ export default function getData() {
     },
     legend: {
       orient: "vertical",
-      left: "left",
+      top: "5%",
+      left: "5%",
       data: ["Direct", "Email", "Ad Networks", "Video Ads", "Search Engines"]
     },
     series: [

src/demo/data/polar.js

@@ -13,13 +13,17 @@ export default function getData() {
       fontWeight: 300
     },
     title: {
-      text: "Dual Numeric Axis"
+      text: "Dual Numeric Axis",
+      top: "5%",
+      left: "5%"
     },
     legend: {
-      data: ["line"]
+      data: ["line"],
+      top: "6%"
     },
     polar: {
-      center: ["50%", "54%"]
+      radius: "65%",
+      center: ["50%", "56%"]
     },
     tooltip: {
       trigger: "axis",

src/demo/data/radar.ts

@@ -15,37 +15,17 @@ export const useScoreStore = defineStore("store", () => {
     return scores.value.map(({ name }) => name);
   });
 
-  const scoreRadar = computed(() => {
+  function getRadarData(activeIndex: number) {
     return {
       title: {
-        text: "Player Ability"
+        text: "Player Ability",
+        top: "5%",
+        left: "5%"
       },
       textStyle: {
         fontFamily: 'Inter, "Helvetica Neue", Arial, sans-serif',
         fontWeight: 300
       },
-      radar: {
-        indicator: scores.value.map(({ name, max }) => {
-          return { name, max };
-        })
-      },
-      series: [
-        {
-          name: "Value",
-          type: "radar",
-          data: [{ value: scores.value.map(({ value }) => value) }]
-        }
-      ]
-    };
-  });
-
-  function getRadarData(activeIndex: number) {
-    return {
-      animation: false,
-      title: {
-        text: "Player Ability"
-      },
-      tooltip: {},
       radar: {
         indicator: scores.value.map(({ name, max }, index) => {
           if (index === activeIndex) {
@@ -81,7 +61,6 @@ export const useScoreStore = defineStore("store", () => {
   return {
     scores,
     metrics,
-    scoreRadar,
     getRadarData,
     increase,
     isMax,

src/demo/data/scatter.js

@@ -47,15 +47,21 @@ const data = [
 
 export default function getData() {
   return {
+    grid: {
+      top: "25%"
+    },
     textStyle: {
       fontFamily: 'Inter, "Helvetica Neue", Arial, sans-serif',
       fontWeight: 300
     },
     title: {
-      text: "Life Expectancy vs. GDP by country"
+      text: "Life Expectancy vs. GDP by country",
+      top: "5%",
+      left: "5%"
     },
     legend: {
-      right: 10,
+      top: "6%",
+      right: "5%",
       data: ["1990", "2015"]
     },
     xAxis: {

src/demo/examples/ConnectChart.vue

@@ -46,10 +46,8 @@ watch(
     </template>
     <template #extra>
       <p class="actions">
-        <label>
+        <input id="connected-check" type="checkbox" v-model="connected" />
-          <input type="checkbox" v-model="connected" />
+        <label for="connected-check">Connected</label>
-          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,
+        top: "15%",
-        right: 0,
+        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 id="loading-check" type="checkbox" v-model="loading" />
-          <input type="checkbox" v-model="loading" />
+        <label for="loading-check">Loading</label>
-          Loading
-        </label>
       </p>
     </template>
   </v-example>