chore: improve demo

Author: Justineo

package.json

@@ -44,6 +44,7 @@
     "comment-mark": "^1.1.1",
     "core-js": "^3.32.0",
     "echarts": "^5.4.3",
+    "echarts-gl": "^2.0.9",
     "echarts-liquidfill": "^3.1.0",
     "eslint": "^7.32.0",
     "eslint-plugin-prettier": "^3.4.1",

pnpm-lock.yaml

@@ -19,6 +19,7 @@
     <geo-chart />
     <radar-chart />
     <connect-chart />
+    <gl-chart />
     <manual-chart />
 
     <footer>
@@ -65,6 +66,7 @@ import ScatterChart from "./examples/ScatterChart";
 import GeoChart from "./examples/GeoChart";
 import RadarChart from "./examples/RadarChart";
 import ConnectChart from "./examples/ConnectChart";
+import GlChart from "./examples/GlChart";
 import ManualChart from "./examples/ManualChart";
 
 use([CanvasRenderer, SVGRenderer]);
@@ -137,6 +139,7 @@ h2 {
     vertical-align: middle;
   }
 }
+
 .desc {
   margin-bottom: 3em;
   color: #7f8c8d;
@@ -158,6 +161,7 @@ p small {
 p {
   line-height: 1.5;
 }
+
 pre {
   display: inline-block;
   padding: 0.8em;
@@ -171,16 +175,6 @@ code {
   font-family: "Roboto Mono", Monaco, courier, monospace;
 }
 
-pre code {
-  font-size: 0.8em;
-}
-
-.attr {
-  color: #e96900;
-}
-.val {
-  color: #42b983;
-}
 footer {
   margin: 5em 0 3em;
   font-size: 0.5em;
@@ -200,16 +194,16 @@ footer {
     border-bottom: 3px solid #42b983;
   }
 }
+
 button,
 select {
   border: 1px solid #4fc08d;
-  border-radius: 2em;
+  border-radius: 0.5em;
   background-color: #fff;
   color: #42b983;
   cursor: pointer;
   font: inherit;
   padding: 0 0.5em;
-  transition: opacity 0.3s;
   transition: all 0.2s;
 
   &:focus {
@@ -228,33 +222,6 @@ select {
     opacity: 0.5;
     cursor: not-allowed;
   }
-
-  &.round {
-    width: 1.6em;
-    height: 1.6em;
-    position: relative;
-
-    &::before,
-    &::after {
-      content: "";
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      width: 9px;
-      height: 1px;
-      background-color: #42b983;
-    }
-
-    &::after {
-      width: 1px;
-      height: 9px;
-    }
-
-    &.expand::after {
-      display: none;
-    }
-  }
 }
 
 label {
@@ -276,7 +243,7 @@ button,
 label,
 select {
   font-size: 0.75em;
-  height: 2.4em;
+  height: 2em;
 }
 
 figure {
@@ -369,9 +336,9 @@ figure {
       flex: 1 0;
       margin: 0 0.5em;
       padding: 0;
-      line-height: 2.4em;
+      line-height: 2em;
       max-width: 40vw;
-      border-radius: 2px;
+      border-radius: 0.5em;
       font-size: 0.8em;
     }
 
@@ -384,6 +351,7 @@ figure {
       }
     }
   }
+
   figure {
     width: 100vw;
     margin: 1em auto;
@@ -399,18 +367,16 @@ figure {
     }
   }
 }
+
 .renderer {
   position: fixed;
   top: 10px;
   left: 10px;
   font-size: 16px;
-  text-align: center;
 
   button {
-    float: left;
     position: relative;
     width: 64px;
-    border-radius: 6px;
     border-color: #36485e;
     color: rgba(54, 72, 94, 0.8);
     font-weight: 500;

src/demo/Demo.vue

@@ -1,6 +1,4 @@
-/* eslint-disable */
-import logo from '../assets/Vue-ECharts.svg'
-/* eslint-enable */
+import logo from "../assets/Vue-ECharts.svg";
 
 const d = logo.match(/\bd="([^"]+)"/)[1];
 

src/demo/assets/starfield.jpg

@@ -37,7 +37,7 @@ watch(
 </script>
 
 <template>
-  <v-example id="connect" title="Connectable Charts" split>
+  <v-example id="connect" title="Connectable charts" split>
     <template #start>
       <v-chart :option="c1" group="radiance" autoresize />
     </template>

src/demo/assets/world.jpg

@@ -2,20 +2,10 @@
   <h2 :id="id">
     <a :href="`#${id}`">
       {{ title }}
-      <small v-if="desc"
-        ><slot v-if="$slots.desc" /><template v-else>{{
-          desc
-        }}</template></small
-      >
+      <small v-if="desc">{{ desc }}</small>
     </a>
-    <button
-      class="round"
-      :class="{ expand }"
-      @click="expand = !expand"
-      aria-label="toggle"
-    ></button>
   </h2>
-  <section v-if="expand">
+  <section>
     <figure v-if="!split">
       <slot />
     </figure>
@@ -31,25 +21,19 @@
   </section>
 </template>
 
-<script>
-export default {
-  name: "v-example",
-  props: {
-    id: {
-      type: String,
-      required: true
-    },
-    title: {
-      type: String,
-      required: true
-    },
-    desc: String,
-    split: Boolean
+<script setup>
+import { defineProps } from "vue";
+
+defineProps({
+  id: {
+    type: String,
+    required: true
+  },
+  title: {
+    type: String,
+    required: true
   },
-  data() {
-    return {
-      expand: true
-    };
-  }
-};
+  desc: String,
+  split: Boolean
+});
 </script>

src/demo/data/logo.js

@@ -0,0 +1,109 @@
+<script setup>
+import { use } from "echarts/core";
+import { Bar3DChart } from "echarts-gl/charts";
+import { VisualMapComponent } from "echarts/components";
+import { GlobeComponent } from "echarts-gl/components";
+import { shallowRef, onMounted } from "vue";
+import VChart from "../../ECharts";
+import VExample from "./Example";
+import world from "../assets/world.jpg";
+import starfield from "../assets/starfield.jpg";
+
+use([Bar3DChart, VisualMapComponent, GlobeComponent]);
+
+const option = shallowRef();
+const loading = shallowRef(true);
+
+const initOptions = {
+  renderer: "canvas"
+};
+
+const loadingOptions = {
+  text: "Loading...",
+  color: "#000",
+  textColor: "#fff",
+  maskColor: "transparent"
+};
+
+onMounted(() => {
+  import("../data/population.json").then(({ default: data }) => {
+    loading.value = false;
+
+    data = data
+      .filter(dataItem => dataItem[2] > 0)
+      .map(dataItem => [dataItem[0], dataItem[1], Math.sqrt(dataItem[2])]);
+
+    option.value = {
+      backgroundColor: "#000",
+      globe: {
+        baseTexture: world,
+        heightTexture: world,
+        shading: "lambert",
+        environment: starfield,
+        light: {
+          main: {
+            intensity: 2
+          }
+        },
+        viewControl: {
+          autoRotate: false
+        }
+      },
+      visualMap: {
+        max: 40,
+        calculable: true,
+        realtime: false,
+        inRange: {
+          colorLightness: [0.2, 0.9]
+        },
+        textStyle: {
+          color: "#fff"
+        },
+        controller: {
+          inRange: {
+            color: "orange"
+          }
+        },
+        outOfRange: {
+          colorAlpha: 0
+        }
+      },
+      series: [
+        {
+          type: "bar3D",
+          coordinateSystem: "globe",
+          data: data,
+          barSize: 0.6,
+          minHeight: 0.2,
+          silent: true,
+          itemStyle: {
+            color: "orange"
+          }
+        }
+      ]
+    };
+  });
+});
+</script>
+
+<template>
+  <v-example id="gl" title="GL charts" desc="(Globe & Bar3D)">
+    <v-chart
+      :option="option"
+      :init-options="initOptions"
+      autoresize
+      :loading="loading"
+      :loading-options="loadingOptions"
+      style="background-color: #000"
+    />
+    <template #extra>
+      <p>
+        You can use extension packs like
+        <a href="https://github.com/ecomfe/echarts-gl">ECharts-GL</a>.
+      </p>
+      <p>
+        <small>(You can only use the canvas renderer for GL charts.)</small>
+      </p>
+    </template>
+  </v-example>
+</template>