From aa22d332ed365501222533d70f478a60e8571151 Mon Sep 17 00:00:00 2001
From: Justineo <justice360@gmail.com>
Date: Sat, 5 Aug 2023 01:02:49 +0800
Subject: [PATCH] refactor: refactor demo

---
 .eslintrc.js                       |   3 +-
 src/demo/Demo.vue                  | 660 +++--------------------------
 src/demo/data/bar.js               |   3 +-
 src/demo/data/connect.js           |  16 +-
 src/demo/data/map.js               | 161 +++----
 src/demo/data/pie.js               |  79 ++--
 src/demo/data/polar.js             |  77 ++--
 src/demo/data/radar.ts             |  90 ++++
 src/demo/data/scatter.js           | 171 ++++----
 src/demo/examples/BarChart.vue     |  77 ++++
 src/demo/examples/ConnectChart.vue |  56 +++
 src/demo/examples/Example.vue      |  55 +++
 src/demo/examples/GeoChart.vue     |  62 +++
 src/demo/examples/LogoChart.vue    |  14 +
 src/demo/examples/ManualChart.vue  | 112 +++++
 src/demo/examples/PieChart.vue     |  82 ++++
 src/demo/examples/PolarChart.vue   |  45 ++
 src/demo/examples/RadarChart.vue   |  50 +++
 src/demo/examples/ScatterChart.vue |  23 +
 src/demo/jsconfig.json             |   3 +-
 src/demo/store.ts                  |  76 ----
 21 files changed, 991 insertions(+), 924 deletions(-)
 create mode 100644 src/demo/data/radar.ts
 create mode 100644 src/demo/examples/BarChart.vue
 create mode 100644 src/demo/examples/ConnectChart.vue
 create mode 100644 src/demo/examples/Example.vue
 create mode 100644 src/demo/examples/GeoChart.vue
 create mode 100644 src/demo/examples/LogoChart.vue
 create mode 100644 src/demo/examples/ManualChart.vue
 create mode 100644 src/demo/examples/PieChart.vue
 create mode 100644 src/demo/examples/PolarChart.vue
 create mode 100644 src/demo/examples/RadarChart.vue
 create mode 100644 src/demo/examples/ScatterChart.vue
 delete mode 100644 src/demo/store.ts

diff --git a/.eslintrc.js b/.eslintrc.js
index d2be431..8286197 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -10,7 +10,8 @@ module.exports = {
   },
   rules: {
     "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
-    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off"
+    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
+    "vue/multi-word-component-names": "off"
   },
   overrides: [
     {
diff --git a/src/demo/Demo.vue b/src/demo/Demo.vue
index 085b20c..a68975e 100644
--- a/src/demo/Demo.vue
+++ b/src/demo/Demo.vue
@@ -1,12 +1,7 @@
 <template>
   <main>
-    <v-chart
-      class="echarts"
-      id="logo"
-      :option="logo"
-      :init-options="initOptions"
-      autoresize
-    />
+    <logo-chart />
+
     <h1>
       <a href="https://github.com/ecomfe/vue-echarts">Vue-ECharts</a>
     </h1>
@@ -17,268 +12,14 @@
       >)
     </p>
 
-    <h2 id="bar">
-      <a href="#bar">
-        Bar chart
-        <small>(with async data &amp; custom theme)</small>
-      </a>
-      <button
-        :class="{
-          round: true,
-          expand: expand.bar
-        }"
-        @click="expand.bar = !expand.bar"
-        aria-label="toggle"
-      ></button>
-    </h2>
-    <section v-if="expand.bar">
-      <figure>
-        <v-chart
-          :option="bar"
-          :init-options="initOptions"
-          ref="bar"
-          theme="ovilia-green"
-          autoresize
-          :loading="barLoading"
-          :loadingOptions="barLoadingOptions"
-          @zr:click="handleZrClick"
-          @click="handleClick"
-        />
-      </figure>
-      <p v-if="seconds <= 0">
-        <small>Loaded.</small>
-      </p>
-      <p v-else>
-        <small>
-          Data coming in
-          <b>{{ seconds }}</b>
-          second{{ seconds > 1 ? "s" : "" }}...
-        </small>
-      </p>
-      <p>
-        <button @click="refresh" :disabled="seconds > 0">Refresh</button>
-      </p>
-    </section>
-
-    <h2 id="pie">
-      <a href="#pie">
-        Pie chart
-        <small>(with action dispatch)</small>
-      </a>
-      <button
-        :class="{
-          round: true,
-          expand: expand.pie
-        }"
-        @click="expand.pie = !expand.pie"
-        aria-label="toggle"
-      ></button>
-    </h2>
-    <section v-if="expand.pie">
-      <figure>
-        <v-chart
-          :option="pie"
-          :init-options="initOptions"
-          ref="pie"
-          autoresize
-        />
-      </figure>
-    </section>
-
-    <h2 id="polar">
-      <a href="#polar">
-        Polar plot
-        <small>(with built-in theme)</small>
-      </a>
-      <button
-        :class="{
-          round: true,
-          expand: expand.polar
-        }"
-        @click="expand.polar = !expand.polar"
-        aria-label="toggle"
-      ></button>
-    </h2>
-    <section v-if="expand.polar">
-      <figure :style="polarTheme === 'dark' ? 'background-color: #100c2a' : ''">
-        <v-chart
-          :option="polar"
-          :init-options="initOptions"
-          :theme="polarTheme"
-          autoresize
-        />
-      </figure>
-      <p>
-        Theme
-        <select v-model="polarTheme">
-          <option :value="null">Default</option>
-          <option value="dark">Dark</option>
-        </select>
-      </p>
-    </section>
-
-    <h2 id="scatter">
-      <a href="#scatter">
-        Scatter plot
-        <small>(with gradient)</small>
-      </a>
-      <button
-        :class="{
-          round: true,
-          expand: expand.scatter
-        }"
-        @click="expand.scatter = !expand.scatter"
-        aria-label="toggle"
-      ></button>
-    </h2>
-    <section v-if="expand.scatter">
-      <figure>
-        <v-chart :option="scatter" :init-options="initOptions" autoresize />
-      </figure>
-    </section>
-
-    <h2 id="map">
-      <a href="#map">
-        Map
-        <small>(with GeoJSON &amp; image converter)</small>
-      </a>
-      <button
-        :class="{
-          round: true,
-          expand: expand.map
-        }"
-        @click="expand.map = !expand.map"
-        aria-label="toggle"
-      ></button>
-    </h2>
-    <section v-if="expand.map">
-      <figure style="background-color: #404a59">
-        <v-chart
-          :option="map"
-          :init-options="initOptions"
-          ref="map"
-          autoresize
-        />
-      </figure>
-      <p>
-        <button @click="convert">Convert to image</button>
-      </p>
-    </section>
-
-    <h2 id="radar">
-      <a href="#radar">Radar chart <small>(with Pinia integration)</small></a>
-      <button
-        :class="{
-          round: true,
-          expand: expand.radar
-        }"
-        @click="expand.radar = !expand.radar"
-        aria-label="toggle"
-      ></button>
-    </h2>
-    <section v-if="expand.radar">
-      <figure>
-        <v-chart
-          :option="getRadarData(metricIndex)"
-          :init-options="initOptions"
-          autoresize
-        />
-      </figure>
-      <p>
-        <select v-model="metricIndex">
-          <option
-            v-for="(metric, index) in metrics"
-            :value="index"
-            :key="index"
-          >
-            {{ metric }}
-          </option>
-        </select>
-        <button
-          @click="increase(metricIndex, 1)"
-          :disabled="isMax(metricIndex)"
-        >
-          Increase
-        </button>
-        <button
-          @click="increase(metricIndex, -1)"
-          :disabled="isMin(metricIndex)"
-        >
-          Decrease
-        </button>
-      </p>
-    </section>
-
-    <h2 id="connect">
-      <a href="#connect">Connectable charts</a>
-      <button
-        :class="{
-          round: true,
-          expand: expand.connect
-        }"
-        @click="expand.connect = !expand.connect"
-        aria-label="toggle"
-      ></button>
-    </h2>
-    <section v-if="expand.connect">
-      <figure class="half">
-        <v-chart
-          :option="c1"
-          :init-options="initOptions"
-          group="radiance"
-          ref="c1"
-          autoresize
-        />
-      </figure>
-      <figure class="half">
-        <v-chart
-          :option="c2"
-          :init-options="initOptions"
-          group="radiance"
-          ref="c2"
-          autoresize
-        />
-      </figure>
-      <p>
-        <label>
-          <input type="checkbox" v-model="connected" />
-          Connected
-        </label>
-      </p>
-    </section>
-
-    <h2 id="flight">
-      <a href="#flight">Manual updates</a>
-      <button
-        :class="{
-          round: true,
-          expand: expand.flight
-        }"
-        @click="expand.flight = !expand.flight"
-        aria-label="toggle"
-      ></button>
-    </h2>
-    <section v-if="expand.flight">
-      <p>
-        <small>
-          You may use
-          <code>manual-update</code> prop for performance critical use cases.
-        </small>
-      </p>
-      <p>
-        <button :disabled="flightLoaded" @click="loadFlights">Load</button>
-      </p>
-      <figure style="background-color: #003">
-        <v-chart
-          ref="flight"
-          :init-options="initOptions"
-          :option="flight"
-          autoresize
-          :loading="flightLoading"
-          :loading-options="flightLoadingOptions"
-        />
-      </figure>
-    </section>
+    <bar-chart />
+    <pie-chart />
+    <polar-chart />
+    <scatter-chart />
+    <geo-chart />
+    <radar-chart />
+    <connect-chart />
+    <manual-chart />
 
     <footer>
       <a href="//github.com/Justineo">@Justineo</a>|
@@ -288,10 +29,6 @@
       <a href="//github.com/ecomfe/vue-echarts">View on GitHub</a>
     </footer>
 
-    <aside :class="{ modal: true, open }" @click="open = false">
-      <img v-if="img.src" :src="img.src" :width="img.width" />
-    </aside>
-
     <aside class="renderer">
       <button
         :class="{
@@ -313,327 +50,41 @@
   </main>
 </template>
 
-<script>
-/* eslint-disable no-console */
+<script setup>
+import { ref, watch, provide } from "vue";
 import qs from "qs";
-import VChart from "../ECharts";
-
-import {
-  use,
-  registerMap,
-  registerTheme,
-  connect,
-  disconnect
-} from "echarts/core";
-import {
-  BarChart,
-  LineChart,
-  PieChart,
-  MapChart,
-  RadarChart,
-  ScatterChart,
-  EffectScatterChart,
-  LinesChart
-} from "echarts/charts";
-import {
-  GridComponent,
-  PolarComponent,
-  GeoComponent,
-  TooltipComponent,
-  LegendComponent,
-  TitleComponent,
-  VisualMapComponent,
-  DatasetComponent,
-  ToolboxComponent,
-  DataZoomComponent
-} from "echarts/components";
+import { use } from "echarts/core";
 import { CanvasRenderer, SVGRenderer } from "echarts/renderers";
-import "echarts-liquidfill";
-import { mapState, mapActions } from "pinia";
-import logo from "./data/logo";
-import getBar from "./data/bar";
-import pie from "./data/pie";
-import polar from "./data/polar";
-import scatter from "./data/scatter";
-import map from "./data/map";
-import { c1, c2 } from "./data/connect";
-import { useScoreStore } from "./store";
+import { INIT_OPTIONS_KEY } from "../ECharts";
 
-// custom theme
-import theme from "./theme.json";
+import LogoChart from "./examples/LogoChart";
+import BarChart from "./examples/BarChart";
+import PieChart from "./examples/PieChart";
+import PolarChart from "./examples/PolarChart";
+import ScatterChart from "./examples/ScatterChart";
+import GeoChart from "./examples/GeoChart";
+import RadarChart from "./examples/RadarChart";
+import ConnectChart from "./examples/ConnectChart";
+import ManualChart from "./examples/ManualChart";
 
-// Map of China
-import chinaMap from "./china.json";
-import worldMap from "./world.json";
+use([CanvasRenderer, SVGRenderer]);
 
-use([
-  BarChart,
-  LineChart,
-  PieChart,
-  MapChart,
-  RadarChart,
-  ScatterChart,
-  EffectScatterChart,
-  LinesChart,
-  GridComponent,
-  PolarComponent,
-  GeoComponent,
-  TooltipComponent,
-  LegendComponent,
-  TitleComponent,
-  VisualMapComponent,
-  DatasetComponent,
-  CanvasRenderer,
-  SVGRenderer,
-  ToolboxComponent,
-  DataZoomComponent
-]);
+const options = qs.parse(location.search, { ignoreQueryPrefix: true });
+const initOptions = ref({
+  renderer: options.renderer || "canvas"
+});
 
-// registering map data
-registerMap("china", chinaMap);
-registerMap("world", worldMap);
+provide(INIT_OPTIONS_KEY, initOptions);
 
-// registering custom theme
-registerTheme("ovilia-green", theme);
-
-export default {
-  name: "vue-echarts-demo",
-  components: {
-    VChart
-  },
-  data() {
-    const options = qs.parse(location.search, { ignoreQueryPrefix: true });
-    return {
-      options,
-      logo,
-      bar: getBar(),
-      pie,
-      polar,
-      scatter,
-      map,
-      c1,
-      c2,
-      expand: {
-        bar: true,
-        pie: true,
-        polar: true,
-        scatter: true,
-        map: true,
-        radar: true,
-        connect: true,
-        flight: true
-      },
-      initOptions: {
-        renderer: options.renderer || "canvas"
-      },
-      polarTheme: "dark",
-      seconds: -1,
-      asyncCount: false,
-      connected: true,
-      metricIndex: 0,
-      open: false,
-      img: {},
-      barLoading: false,
-      barLoadingOptions: {
-        text: "Loading…",
-        color: "#4ea397",
-        maskColor: "rgba(255, 255, 255, 0.4)"
-      },
-      flight: null,
-      flightLoaded: false,
-      flightLoading: false,
-      flightLoadingOptions: {
-        text: "",
-        color: "#c23531",
-        textColor: "rgba(255, 255, 255, 0.5)",
-        maskColor: "#003",
-        zlevel: 0
-      }
-    };
-  },
-  computed: {
-    autoresize() {
-      return { throttle: 200, onResize: this.handleResize };
-    },
-    ...mapState(useScoreStore, ["scores"]),
-    metrics() {
-      return this.scores.map(({ name }) => name);
-    }
-  },
-  methods: {
-    handleClick(...args) {
-      console.log("click from echarts", ...args);
-    },
-    handleZrClick(...args) {
-      console.log("click from zrender", ...args);
-    },
-    handleResize() {
-      console.log("resize");
-    },
-    refresh() {
-      // simulating async data from server
-      this.seconds = 3;
-      this.barLoading = true;
-      const timer = setInterval(() => {
-        this.seconds--;
-        if (this.seconds === 0) {
-          clearTimeout(timer);
-          this.barLoading = false;
-          this.bar = getBar();
-        }
-      }, 1000);
-    },
-    toggleRenderer() {
-      if (this.initOptions.renderer === "canvas") {
-        this.initOptions.renderer = "svg";
-      } else {
-        this.initOptions.renderer = "canvas";
-      }
-    },
-    convert() {
-      const map = this.$refs.map;
-      this.img = {
-        src: map.getDataURL({
-          pixelRatio: window.devicePixelRatio || 1
-        }),
-        width: map.getWidth(),
-        height: map.getHeight()
-      };
-      this.open = true;
-    },
-    loadFlights() {
-      this.flightLoaded = true;
-      this.flightLoading = true;
-
-      import("./data/flight.json").then(({ default: data }) => {
-        this.flightLoading = false;
-
-        function getAirportCoord(idx) {
-          return [data.airports[idx][3], data.airports[idx][4]];
-        }
-        const routes = data.routes.map(airline => {
-          return [getAirportCoord(airline[1]), getAirportCoord(airline[2])];
-        });
-
-        this.flight = {
-          textStyle: {
-            fontFamily: 'Inter, "Helvetica Neue", Arial, sans-serif'
-          },
-          title: {
-            text: "World Flights",
-            left: "center",
-            textStyle: {
-              color: "#eee"
-            }
-          },
-          backgroundColor: "#003",
-          tooltip: {
-            formatter(param) {
-              const route = data.routes[param.dataIndex];
-              return (
-                data.airports[route[1]][1] + " > " + data.airports[route[2]][1]
-              );
-            }
-          },
-          geo: {
-            map: "world",
-            left: 0,
-            right: 0,
-            silent: true,
-            itemStyle: {
-              borderColor: "#003",
-              color: "#005"
-            }
-          },
-          series: [
-            {
-              type: "lines",
-              coordinateSystem: "geo",
-              data: routes,
-              large: true,
-              largeThreshold: 100,
-              lineStyle: {
-                opacity: 0.05,
-                width: 0.5,
-                curveness: 0.3
-              },
-              blendMode: "lighter"
-            }
-          ]
-        };
-      });
-    },
-    startActions() {
-      let dataIndex = -1;
-      const pie = this.$refs.pie;
-
-      if (!pie) {
-        return;
-      }
-
-      const dataLen = pie.option.series[0].data.length;
-
-      this.actionTimer = setInterval(() => {
-        pie.dispatchAction({
-          type: "downplay",
-          seriesIndex: 0,
-          dataIndex
-        });
-        dataIndex = (dataIndex + 1) % dataLen;
-        pie.dispatchAction({
-          type: "highlight",
-          seriesIndex: 0,
-          dataIndex
-        });
-        // 显示 tooltip
-        pie.dispatchAction({
-          type: "showTip",
-          seriesIndex: 0,
-          dataIndex
-        });
-      }, 1000);
-    },
-    stopActions() {
-      clearInterval(this.actionTimer);
-    },
-    ...mapActions(useScoreStore, ["getRadarData", "increase", "isMax", "isMin"])
-  },
-  watch: {
-    connected: {
-      handler(value) {
-        if (value) {
-          connect("radiance");
-        } else {
-          disconnect("radiance");
-        }
-      },
-      immediate: true
-    },
-    "initOptions.renderer"(value) {
-      this.options.renderer = value === "svg" ? value : undefined;
-      let query = qs.stringify(this.options);
-      query = query ? "?" + query : "";
-      history.pushState(
-        {},
-        document.title,
-        `${location.origin}${location.pathname}${query}${location.hash}`
-      );
-    },
-    "expand.pie"(value) {
-      if (value) {
-        this.$nextTick(this.startActions);
-      } else {
-        this.stopActions();
-      }
-    }
-  },
-  mounted() {
-    this.startActions();
-  },
-  beforeUnmount() {
-    this.stopActions();
-  }
-};
+watch(initOptions.value, value => {
+  let query = qs.stringify(value);
+  query = query ? "?" + query : "";
+  history.pushState(
+    {},
+    document.title,
+    `${location.origin}${location.pathname}${query}${location.hash}`
+  );
+});
 </script>
 
 <style lang="postcss">
@@ -677,6 +128,10 @@ h2 {
   padding-top: 1em;
   font-size: 1.2em;
 
+  small {
+    font-weight: 300;
+  }
+
   button {
     margin-left: 1em;
     vertical-align: middle;
@@ -828,17 +283,14 @@ figure {
   display: inline-block;
   position: relative;
   margin: 2em auto;
-  border: 1px solid rgba(0, 0, 0, 0.1);
-  border-radius: 8px;
-  box-shadow: 0 0 45px rgba(0, 0, 0, 0.2);
-  padding: 1.5em 2em;
-  min-width: calc(40vw + 4em);
 
   .echarts {
-    width: 100%;
-    width: 40vw;
-    min-width: 400px;
-    height: 300px;
+    height: 360px;
+    min-width: calc(40vw + 4em);
+    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);
   }
 }
 
@@ -878,17 +330,15 @@ figure {
 
 @media (min-width: 980px) {
   figure.half {
-    padding: 1em 1.5em;
-    min-width: calc(240px + 3em);
-
     .echarts {
       width: 28vw;
       min-width: 240px;
+      padding: 1em 1.5em;
       height: 180px;
     }
 
-    &:not(:last-child) {
-      margin-right: 15px;
+    & + & {
+      margin-left: 30px;
     }
   }
 }
@@ -937,15 +387,15 @@ figure {
   figure {
     width: 100vw;
     margin: 1em auto;
-    padding: 1em 0;
-    border: none;
-    border-radius: 0;
-    box-shadow: none;
 
     .echarts {
       width: 100%;
       min-width: 0;
       height: 75vw;
+      padding: 1em 0;
+      border: none;
+      border-radius: 0;
+      box-shadow: none;
     }
   }
 }
diff --git a/src/demo/data/bar.js b/src/demo/data/bar.js
index 39a3aff..c655802 100644
--- a/src/demo/data/bar.js
+++ b/src/demo/data/bar.js
@@ -5,7 +5,8 @@ function random() {
 export default function getData() {
   return {
     textStyle: {
-      fontFamily: 'Inter, "Helvetica Neue", Arial, sans-serif'
+      fontFamily: 'Inter, "Helvetica Neue", Arial, sans-serif',
+      fontWeight: 300
     },
     dataset: {
       dimensions: ["Product", "2015", "2016", "2017"],
diff --git a/src/demo/data/connect.js b/src/demo/data/connect.js
index dc0d730..4070281 100644
--- a/src/demo/data/connect.js
+++ b/src/demo/data/connect.js
@@ -9,7 +9,11 @@ for (let i = 0; i < 16; i++) {
   ]);
 }
 
-export const c1 = {
+const c1 = {
+  textStyle: {
+    fontFamily: 'Inter, "Helvetica Neue", Arial, sans-serif',
+    fontWeight: 300
+  },
   legend: {
     top: 20,
     data: ["scatter"]
@@ -57,7 +61,11 @@ export const c1 = {
   ]
 };
 
-export const c2 = {
+const c2 = {
+  textStyle: {
+    fontFamily: 'Inter, "Helvetica Neue", Arial, sans-serif',
+    fontWeight: 300
+  },
   legend: {
     top: 20,
     data: ["scatter"]
@@ -103,3 +111,7 @@ export const c2 = {
     }
   ]
 };
+
+export default function getData() {
+  return [c1, c2];
+}
diff --git a/src/demo/data/map.js b/src/demo/data/map.js
index 6336cb0..cce632f 100644
--- a/src/demo/data/map.js
+++ b/src/demo/data/map.js
@@ -397,92 +397,95 @@ function convertData(data) {
   return res;
 }
 
-export default {
-  textStyle: {
-    fontFamily: 'Inter, "Helvetica Neue", Arial, sans-serif'
-  },
-  backgroundColor: "#404a59",
-  title: {
-    text: "Air quality of major cities in China",
-    subtext: "data from PM25.in",
-    sublink: "http://www.pm25.in",
-    left: "center",
+export default function getData() {
+  return {
     textStyle: {
-      color: "#fff"
-    }
-  },
-  tooltip: {
-    trigger: "item"
-  },
-  legend: {
-    orient: "vertical",
-    y: "bottom",
-    x: "right",
-    data: ["pm2.5"],
-    textStyle: {
-      color: "#fff"
-    }
-  },
-  geo: {
-    map: "china",
-    emphasis: {
-      label: {
-        show: false
-      },
-      itemStyle: {
-        areaColor: "#2a333d"
+      fontFamily: 'Inter, "Helvetica Neue", Arial, sans-serif',
+      fontWeight: 300
+    },
+    backgroundColor: "#404a59",
+    title: {
+      text: "Air quality of major cities in China",
+      subtext: "data from PM25.in",
+      sublink: "http://www.pm25.in",
+      left: "center",
+      textStyle: {
+        color: "#fff"
       }
     },
-    itemStyle: {
-      areaColor: "#323c48",
-      borderColor: "#111"
-    }
-  },
-  series: [
-    {
-      name: "pm2.5",
-      type: "scatter",
-      coordinateSystem: "geo",
-      data: convertData(data),
-      symbolSize: val => val[2] / 10,
-      tooltip: {
-        formatter: function (val) {
-          return val.name + ": " + val.value[2];
-        }
-      },
-      itemStyle: {
-        color: "#ddb926"
+    tooltip: {
+      trigger: "item"
+    },
+    legend: {
+      orient: "vertical",
+      y: "bottom",
+      x: "right",
+      data: ["pm2.5"],
+      textStyle: {
+        color: "#fff"
       }
     },
-    {
-      name: "Top 5",
-      type: "effectScatter",
-      coordinateSystem: "geo",
-      data: convertData(data.sort((a, b) => b.value - a.value).slice(0, 6)),
-      symbolSize: val => val[2] / 10,
-      showEffectOn: "render",
-      rippleEffect: {
-        brushType: "stroke"
-      },
+    geo: {
+      map: "china",
       emphasis: {
-        scale: true
-      },
-      tooltip: {
-        formatter: function (val) {
-          return val.name + ": " + val.value[2];
+        label: {
+          show: false
+        },
+        itemStyle: {
+          areaColor: "#2a333d"
         }
       },
-      label: {
-        formatter: "{b}",
-        position: "right",
-        show: true
-      },
       itemStyle: {
-        color: "#f4e925",
-        shadowBlur: 10,
-        shadowColor: "#333"
+        areaColor: "#323c48",
+        borderColor: "#111"
+      }
+    },
+    series: [
+      {
+        name: "pm2.5",
+        type: "scatter",
+        coordinateSystem: "geo",
+        data: convertData(data),
+        symbolSize: val => val[2] / 10,
+        tooltip: {
+          formatter: function (val) {
+            return val.name + ": " + val.value[2];
+          }
+        },
+        itemStyle: {
+          color: "#ddb926"
+        }
       },
-      zlevel: 1
-    }
-  ]
-};
+      {
+        name: "Top 5",
+        type: "effectScatter",
+        coordinateSystem: "geo",
+        data: convertData(data.sort((a, b) => b.value - a.value).slice(0, 6)),
+        symbolSize: val => val[2] / 10,
+        showEffectOn: "render",
+        rippleEffect: {
+          brushType: "stroke"
+        },
+        emphasis: {
+          scale: true
+        },
+        tooltip: {
+          formatter: function (val) {
+            return val.name + ": " + val.value[2];
+          }
+        },
+        label: {
+          formatter: "{b}",
+          position: "right",
+          show: true
+        },
+        itemStyle: {
+          color: "#f4e925",
+          shadowBlur: 10,
+          shadowColor: "#333"
+        },
+        zlevel: 1
+      }
+    ]
+  };
+}
diff --git a/src/demo/data/pie.js b/src/demo/data/pie.js
index 2cfdd35..3c5020b 100644
--- a/src/demo/data/pie.js
+++ b/src/demo/data/pie.js
@@ -1,40 +1,43 @@
-export default {
-  textStyle: {
-    fontFamily: 'Inter, "Helvetica Neue", Arial, sans-serif'
-  },
-  title: {
-    text: "Traffic Sources",
-    left: "center"
-  },
-  tooltip: {
-    trigger: "item",
-    formatter: "{a} <br/>{b} : {c} ({d}%)"
-  },
-  legend: {
-    orient: "vertical",
-    left: "left",
-    data: ["Direct", "Email", "Ad Networks", "Video Ads", "Search Engines"]
-  },
-  series: [
-    {
-      name: "Traffic Sources",
-      type: "pie",
-      radius: "55%",
-      center: ["50%", "60%"],
-      data: [
-        { value: 335, name: "Direct" },
-        { value: 310, name: "Email" },
-        { value: 234, name: "Ad Networks" },
-        { value: 135, name: "Video Ads" },
-        { value: 1548, name: "Search Engines" }
-      ],
-      emphasis: {
-        itemStyle: {
-          shadowBlur: 10,
-          shadowOffsetX: 0,
-          shadowColor: "rgba(0, 0, 0, 0.5)"
+export default function getData() {
+  return {
+    textStyle: {
+      fontFamily: 'Inter, "Helvetica Neue", Arial, sans-serif',
+      fontWeight: 300
+    },
+    title: {
+      text: "Traffic Sources",
+      left: "center"
+    },
+    tooltip: {
+      trigger: "item",
+      formatter: "{a} <br/>{b} : {c} ({d}%)"
+    },
+    legend: {
+      orient: "vertical",
+      left: "left",
+      data: ["Direct", "Email", "Ad Networks", "Video Ads", "Search Engines"]
+    },
+    series: [
+      {
+        name: "Traffic Sources",
+        type: "pie",
+        radius: "55%",
+        center: ["50%", "60%"],
+        data: [
+          { value: 335, name: "Direct" },
+          { value: 310, name: "Email" },
+          { value: 234, name: "Ad Networks" },
+          { value: 135, name: "Video Ads" },
+          { value: 1548, name: "Search Engines" }
+        ],
+        emphasis: {
+          itemStyle: {
+            shadowBlur: 10,
+            shadowOffsetX: 0,
+            shadowColor: "rgba(0, 0, 0, 0.5)"
+          }
         }
       }
-    }
-  ]
-};
+    ]
+  };
+}
diff --git a/src/demo/data/polar.js b/src/demo/data/polar.js
index c5bd32c..be773e0 100644
--- a/src/demo/data/polar.js
+++ b/src/demo/data/polar.js
@@ -6,40 +6,43 @@ for (let i = 0; i <= 360; i++) {
   data.push([r, i]);
 }
 
-export default {
-  textStyle: {
-    fontFamily: 'Inter, "Helvetica Neue", Arial, sans-serif'
-  },
-  title: {
-    text: "Dual Numeric Axis"
-  },
-  legend: {
-    data: ["line"]
-  },
-  polar: {
-    center: ["50%", "54%"]
-  },
-  tooltip: {
-    trigger: "axis",
-    axisPointer: {
-      type: "cross"
-    }
-  },
-  angleAxis: {
-    type: "value",
-    startAngle: 0
-  },
-  radiusAxis: {
-    min: 0
-  },
-  series: [
-    {
-      coordinateSystem: "polar",
-      name: "line",
-      type: "line",
-      showSymbol: false,
-      data: data
-    }
-  ],
-  animationDuration: 2000
-};
+export default function getData() {
+  return {
+    textStyle: {
+      fontFamily: 'Inter, "Helvetica Neue", Arial, sans-serif',
+      fontWeight: 300
+    },
+    title: {
+      text: "Dual Numeric Axis"
+    },
+    legend: {
+      data: ["line"]
+    },
+    polar: {
+      center: ["50%", "54%"]
+    },
+    tooltip: {
+      trigger: "axis",
+      axisPointer: {
+        type: "cross"
+      }
+    },
+    angleAxis: {
+      type: "value",
+      startAngle: 0
+    },
+    radiusAxis: {
+      min: 0
+    },
+    series: [
+      {
+        coordinateSystem: "polar",
+        name: "line",
+        type: "line",
+        showSymbol: false,
+        data: data
+      }
+    ],
+    animationDuration: 2000
+  };
+}
diff --git a/src/demo/data/radar.ts b/src/demo/data/radar.ts
new file mode 100644
index 0000000..9056bf2
--- /dev/null
+++ b/src/demo/data/radar.ts
@@ -0,0 +1,90 @@
+import { ref, computed } from "vue";
+import { defineStore } from "pinia";
+
+export const useScoreStore = defineStore("store", () => {
+  const scores = ref([
+    { name: "Attack", max: 20, value: 19 },
+    { name: "Defense", max: 20, value: 9 },
+    { name: "Speed", max: 20, value: 18 },
+    { name: "Strength", max: 20, value: 16 },
+    { name: "Endurance", max: 20, value: 16 },
+    { name: "Agility", max: 20, value: 20 }
+  ]);
+
+  const metrics = computed(() => {
+    return scores.value.map(({ name }) => name);
+  });
+
+  const scoreRadar = computed(() => {
+    return {
+      title: {
+        text: "Player Ability"
+      },
+      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) {
+            return { name, max, color: "goldenrod" };
+          }
+          return { name, max };
+        })
+      },
+      series: [
+        {
+          name: "Value",
+          type: "radar",
+          data: [{ value: scores.value.map(({ value }) => value) }]
+        }
+      ]
+    };
+  }
+
+  function increase(index: number, amount: number) {
+    const metric = scores.value[index];
+    metric.value = Math.max(Math.min(metric.value + amount, metric.max), 0);
+  }
+
+  function isMax(index: number) {
+    const { value, max } = scores.value[index];
+    return value === max;
+  }
+
+  function isMin(index: number) {
+    return scores.value[index].value === 0;
+  }
+
+  return {
+    scores,
+    metrics,
+    scoreRadar,
+    getRadarData,
+    increase,
+    isMax,
+    isMin
+  };
+});
diff --git a/src/demo/data/scatter.js b/src/demo/data/scatter.js
index b4b7935..79df4c5 100644
--- a/src/demo/data/scatter.js
+++ b/src/demo/data/scatter.js
@@ -45,96 +45,99 @@ const data = [
   ]
 ];
 
-export default {
-  textStyle: {
-    fontFamily: 'Inter, "Helvetica Neue", Arial, sans-serif'
-  },
-  title: {
-    text: "Life Expectancy vs. GDP by country"
-  },
-  legend: {
-    right: 10,
-    data: ["1990", "2015"]
-  },
-  xAxis: {
-    splitLine: {
-      lineStyle: {
-        type: "dashed"
-      }
-    }
-  },
-  yAxis: {
-    splitLine: {
-      lineStyle: {
-        type: "dashed"
+export default function getData() {
+  return {
+    textStyle: {
+      fontFamily: 'Inter, "Helvetica Neue", Arial, sans-serif',
+      fontWeight: 300
+    },
+    title: {
+      text: "Life Expectancy vs. GDP by country"
+    },
+    legend: {
+      right: 10,
+      data: ["1990", "2015"]
+    },
+    xAxis: {
+      splitLine: {
+        lineStyle: {
+          type: "dashed"
+        }
       }
     },
-    scale: true
-  },
-  series: [
-    {
-      name: "1990",
-      data: data[0],
-      type: "scatter",
-      symbolSize(data) {
-        return Math.sqrt(data[2]) / 5e2;
-      },
-      emphasis: {
-        label: {
-          show: true,
-          formatter({ data }) {
-            return data[3];
-          },
-          position: "top"
+    yAxis: {
+      splitLine: {
+        lineStyle: {
+          type: "dashed"
         }
       },
-      itemStyle: {
-        shadowBlur: 10,
-        shadowColor: "rgba(120, 36, 50, 0.5)",
-        shadowOffsetY: 5,
-        color: new graphic.RadialGradient(0.4, 0.3, 1, [
-          {
-            offset: 0,
-            color: "rgb(251, 118, 123)"
-          },
-          {
-            offset: 1,
-            color: "rgb(204, 46, 72)"
-          }
-        ])
-      }
+      scale: true
     },
-    {
-      name: "2015",
-      data: data[1],
-      type: "scatter",
-      symbolSize(data) {
-        return Math.sqrt(data[2]) / 5e2;
-      },
-      emphasis: {
-        label: {
-          show: true,
-          formatter({ data }) {
-            return data[3];
-          },
-          position: "top"
+    series: [
+      {
+        name: "1990",
+        data: data[0],
+        type: "scatter",
+        symbolSize(data) {
+          return Math.sqrt(data[2]) / 5e2;
+        },
+        emphasis: {
+          label: {
+            show: true,
+            formatter({ data }) {
+              return data[3];
+            },
+            position: "top"
+          }
+        },
+        itemStyle: {
+          shadowBlur: 10,
+          shadowColor: "rgba(120, 36, 50, 0.5)",
+          shadowOffsetY: 5,
+          color: new graphic.RadialGradient(0.4, 0.3, 1, [
+            {
+              offset: 0,
+              color: "rgb(251, 118, 123)"
+            },
+            {
+              offset: 1,
+              color: "rgb(204, 46, 72)"
+            }
+          ])
         }
       },
-      itemStyle: {
-        shadowBlur: 10,
-        shadowColor: "rgba(25, 100, 150, 0.5)",
-        shadowOffsetY: 5,
-        color: new graphic.RadialGradient(0.4, 0.3, 1, [
-          {
-            offset: 0,
-            color: "rgb(129, 227, 238)"
-          },
-          {
-            offset: 1,
-            color: "rgb(25, 183, 207)"
+      {
+        name: "2015",
+        data: data[1],
+        type: "scatter",
+        symbolSize(data) {
+          return Math.sqrt(data[2]) / 5e2;
+        },
+        emphasis: {
+          label: {
+            show: true,
+            formatter({ data }) {
+              return data[3];
+            },
+            position: "top"
           }
-        ])
+        },
+        itemStyle: {
+          shadowBlur: 10,
+          shadowColor: "rgba(25, 100, 150, 0.5)",
+          shadowOffsetY: 5,
+          color: new graphic.RadialGradient(0.4, 0.3, 1, [
+            {
+              offset: 0,
+              color: "rgb(129, 227, 238)"
+            },
+            {
+              offset: 1,
+              color: "rgb(25, 183, 207)"
+            }
+          ])
+        }
       }
-    }
-  ]
-};
+    ]
+  };
+}
diff --git a/src/demo/examples/BarChart.vue b/src/demo/examples/BarChart.vue
new file mode 100644
index 0000000..310d066
--- /dev/null
+++ b/src/demo/examples/BarChart.vue
@@ -0,0 +1,77 @@
+<script setup>
+import { use, registerTheme } from "echarts/core";
+import { BarChart } from "echarts/charts";
+import { GridComponent, DatasetComponent } from "echarts/components";
+import { shallowRef, onBeforeUnmount } from "vue";
+import VChart from "../../ECharts";
+import VExample from "./Example";
+import getData from "../data/bar";
+import theme from "../theme.json";
+
+use([BarChart, DatasetComponent, GridComponent]);
+registerTheme("ovilia-green", theme);
+
+const seconds = shallowRef(0);
+const loading = shallowRef(false);
+const loadingOptions = {
+  text: "Loading…",
+  color: "#4ea397",
+  maskColor: "rgba(255, 255, 255, 0.4)"
+};
+const option = shallowRef(getData());
+
+let timer = null;
+
+onBeforeUnmount(() => {
+  clearInterval(timer);
+});
+
+function tick() {
+  seconds.value--;
+
+  if (seconds.value === 0) {
+    clearInterval(timer);
+    loading.value = false;
+    option.value = getData();
+  }
+}
+
+function refresh() {
+  // simulating async data from server
+  seconds.value = 3;
+  loading.value = true;
+
+  timer = setInterval(tick, 1000);
+}
+</script>
+
+<template>
+  <v-example
+    id="bar"
+    title="Bar chart"
+    desc="(with async data &amp; custom theme)"
+  >
+    <v-chart
+      :option="option"
+      theme="ovilia-green"
+      autoresize
+      :loading="loading"
+      :loadingOptions="loadingOptions"
+    />
+    <template #extra>
+      <p v-if="seconds <= 0">
+        <small>Loaded.</small>
+      </p>
+      <p v-else>
+        <small>
+          Data coming in
+          <b>{{ seconds }}</b>
+          second{{ seconds > 1 ? "s" : "" }}...
+        </small>
+      </p>
+      <p>
+        <button @click="refresh" :disabled="seconds > 0">Refresh</button>
+      </p>
+    </template>
+  </v-example>
+</template>
diff --git a/src/demo/examples/ConnectChart.vue b/src/demo/examples/ConnectChart.vue
new file mode 100644
index 0000000..7520122
--- /dev/null
+++ b/src/demo/examples/ConnectChart.vue
@@ -0,0 +1,56 @@
+<script setup>
+import { use, connect, disconnect } from "echarts/core";
+import { ScatterChart } from "echarts/charts";
+import {
+  GridComponent,
+  TitleComponent,
+  VisualMapComponent,
+  TooltipComponent
+} from "echarts/components";
+import { shallowRef, watch } from "vue";
+import VChart from "../../ECharts";
+import VExample from "./Example";
+import getData from "../data/connect";
+
+use([
+  ScatterChart,
+  GridComponent,
+  TitleComponent,
+  VisualMapComponent,
+  TooltipComponent
+]);
+
+const [c1, c2] = getData().map(shallowRef);
+const connected = shallowRef(true);
+
+watch(
+  connected,
+  value => {
+    if (value) {
+      connect("radiance");
+    } else {
+      disconnect("radiance");
+    }
+  },
+  { immediate: true }
+);
+</script>
+
+<template>
+  <v-example id="connect" title="Connectable Charts" split>
+    <template #start>
+      <v-chart :option="c1" group="radiance" autoresize />
+    </template>
+    <template #end>
+      <v-chart :option="c2" group="radiance" autoresize />
+    </template>
+    <template #extra>
+      <p>
+        <label>
+          <input type="checkbox" v-model="connected" />
+          Connected
+        </label>
+      </p>
+    </template>
+  </v-example>
+</template>
diff --git a/src/demo/examples/Example.vue b/src/demo/examples/Example.vue
new file mode 100644
index 0000000..1e9a88f
--- /dev/null
+++ b/src/demo/examples/Example.vue
@@ -0,0 +1,55 @@
+<template>
+  <h2 :id="id">
+    <a :href="`#${id}`">
+      {{ title }}
+      <small v-if="desc"
+        ><slot v-if="$slots.desc" /><template v-else>{{
+          desc
+        }}</template></small
+      >
+    </a>
+    <button
+      class="round"
+      :class="{ expand }"
+      @click="expand = !expand"
+      aria-label="toggle"
+    ></button>
+  </h2>
+  <section v-if="expand">
+    <figure v-if="!split">
+      <slot />
+    </figure>
+    <template v-else>
+      <figure class="half">
+        <slot name="start" />
+      </figure>
+      <figure class="half">
+        <slot name="end" />
+      </figure>
+    </template>
+    <slot name="extra" />
+  </section>
+</template>
+
+<script>
+export default {
+  name: "v-example",
+  props: {
+    id: {
+      type: String,
+      required: true
+    },
+    title: {
+      type: String,
+      required: true
+    },
+    desc: String,
+    split: Boolean
+  },
+  data() {
+    return {
+      expand: true
+    };
+  }
+};
+</script>
diff --git a/src/demo/examples/GeoChart.vue b/src/demo/examples/GeoChart.vue
new file mode 100644
index 0000000..9096928
--- /dev/null
+++ b/src/demo/examples/GeoChart.vue
@@ -0,0 +1,62 @@
+<script setup>
+import { use, registerMap } from "echarts/core";
+import { ScatterChart, EffectScatterChart } from "echarts/charts";
+import {
+  GeoComponent,
+  TitleComponent,
+  LegendComponent,
+  TooltipComponent
+} from "echarts/components";
+import { shallowRef } from "vue";
+import VChart from "../../ECharts";
+import VExample from "./Example";
+import getData from "../data/map";
+import chinaMap from "../china.json";
+
+use([
+  ScatterChart,
+  EffectScatterChart,
+  GeoComponent,
+  TitleComponent,
+  LegendComponent,
+  TooltipComponent
+]);
+
+registerMap("china", chinaMap);
+
+const option = shallowRef(getData());
+const map = shallowRef(null);
+const open = shallowRef(false);
+
+let img = null;
+
+function convert() {
+  img = {
+    src: map.value.getDataURL({
+      pixelRatio: window.devicePixelRatio || 1
+    }),
+    width: map.value.getWidth(),
+    height: map.value.getHeight()
+  };
+  open.value = true;
+}
+</script>
+
+<template>
+  <v-example id="map" title="Map" desc="(with GeoJSON & image converter)">
+    <v-chart
+      ref="map"
+      :option="option"
+      autoresize
+      style="background-color: #404a59"
+    />
+    <template #extra>
+      <p>
+        <button @click="convert">Convert to image</button>
+      </p>
+      <aside class="modal" :class="{ open }" @click="open = false">
+        <img v-if="img" v-bind="img" />
+      </aside>
+    </template>
+  </v-example>
+</template>
diff --git a/src/demo/examples/LogoChart.vue b/src/demo/examples/LogoChart.vue
new file mode 100644
index 0000000..c698223
--- /dev/null
+++ b/src/demo/examples/LogoChart.vue
@@ -0,0 +1,14 @@
+<script setup>
+import { registerTheme } from "echarts/core";
+
+import "echarts-liquidfill";
+import VChart from "../../ECharts";
+import theme from "../theme.json";
+import logo from "../data/logo";
+
+registerTheme("ovilia-green", theme);
+</script>
+
+<template>
+  <v-chart id="logo" :option="logo" />
+</template>
diff --git a/src/demo/examples/ManualChart.vue b/src/demo/examples/ManualChart.vue
new file mode 100644
index 0000000..0698d7b
--- /dev/null
+++ b/src/demo/examples/ManualChart.vue
@@ -0,0 +1,112 @@
+<script setup>
+import { use, registerMap } from "echarts/core";
+import { LinesChart } from "echarts/charts";
+import {
+  GeoComponent,
+  TitleComponent,
+  TooltipComponent
+} from "echarts/components";
+import { shallowRef } from "vue";
+import VChart from "../../ECharts";
+import VExample from "./Example";
+import worldMap from "../world.json";
+
+use([LinesChart, GeoComponent, TitleComponent, TooltipComponent]);
+registerMap("world", worldMap);
+
+const chart = shallowRef(null);
+const loading = shallowRef(false);
+const loaded = shallowRef(false);
+
+const loadingOptions = {
+  text: "",
+  color: "#c23531",
+  textColor: "rgba(255, 255, 255, 0.5)",
+  maskColor: "#003",
+  zlevel: 0
+};
+
+function load() {
+  loaded.value = true;
+  loading.value = true;
+
+  import("../data/flight.json").then(({ default: data }) => {
+    loading.value = false;
+
+    function getAirportCoord(idx) {
+      return [data.airports[idx][3], data.airports[idx][4]];
+    }
+    const routes = data.routes.map(airline => {
+      return [getAirportCoord(airline[1]), getAirportCoord(airline[2])];
+    });
+
+    chart.value.setOption({
+      textStyle: {
+        fontFamily: 'Inter, "Helvetica Neue", Arial, sans-serif'
+      },
+      title: {
+        text: "World Flights",
+        left: "center",
+        textStyle: {
+          color: "#eee"
+        }
+      },
+      backgroundColor: "#003",
+      tooltip: {
+        formatter(param) {
+          const route = data.routes[param.dataIndex];
+          return (
+            data.airports[route[1]][1] + " > " + data.airports[route[2]][1]
+          );
+        }
+      },
+      geo: {
+        map: "world",
+        left: 0,
+        right: 0,
+        silent: true,
+        itemStyle: {
+          borderColor: "#003",
+          color: "#005"
+        }
+      },
+      series: [
+        {
+          type: "lines",
+          coordinateSystem: "geo",
+          data: routes,
+          large: true,
+          largeThreshold: 100,
+          lineStyle: {
+            opacity: 0.05,
+            width: 0.5,
+            curveness: 0.3
+          },
+          blendMode: "lighter"
+        }
+      ]
+    });
+  });
+}
+</script>
+
+<template>
+  <v-example id="manual" title="Manual updates">
+    <v-chart
+      ref="chart"
+      autoresize
+      :loading="loading"
+      :loading-options="loadingOptions"
+      style="background-color: #003"
+    />
+    <template #desc
+      >You may use <code>manual-update</code> prop for performance critical use
+      cases.</template
+    >
+    <template #extra>
+      <p>
+        <button :disabled="loaded" @click="load">Load</button>
+      </p>
+    </template>
+  </v-example>
+</template>
diff --git a/src/demo/examples/PieChart.vue b/src/demo/examples/PieChart.vue
new file mode 100644
index 0000000..172bdde
--- /dev/null
+++ b/src/demo/examples/PieChart.vue
@@ -0,0 +1,82 @@
+<script setup>
+import { use } from "echarts/core";
+import { PieChart } from "echarts/charts";
+import {
+  PolarComponent,
+  TitleComponent,
+  LegendComponent,
+  TooltipComponent
+} from "echarts/components";
+import { shallowRef, onMounted } from "vue";
+import VChart from "../../ECharts";
+import VExample from "./Example";
+import getData from "../data/pie";
+
+use([
+  PieChart,
+  PolarComponent,
+  TitleComponent,
+  LegendComponent,
+  TooltipComponent
+]);
+
+const option = shallowRef(getData());
+const pie = shallowRef(null);
+
+let timer = null;
+
+onMounted(() => {
+  startActions();
+
+  return () => {
+    stopActions();
+  };
+});
+
+function startActions() {
+  let dataIndex = -1;
+
+  const dataLen = option.value?.series?.[0]?.data?.length || 0;
+
+  if (!pie.value || dataLen === 0) {
+    return;
+  }
+
+  clearInterval(timer);
+
+  timer = setInterval(() => {
+    if (!pie.value) {
+      clearInterval(timer);
+
+      return;
+    }
+
+    pie.value.dispatchAction({
+      type: "downplay",
+      seriesIndex: 0,
+      dataIndex
+    });
+    dataIndex = (dataIndex + 1) % dataLen;
+    pie.value.dispatchAction({
+      type: "highlight",
+      seriesIndex: 0,
+      dataIndex
+    });
+    pie.value.dispatchAction({
+      type: "showTip",
+      seriesIndex: 0,
+      dataIndex
+    });
+  }, 1000);
+}
+
+function stopActions() {
+  clearInterval(timer);
+}
+</script>
+
+<template>
+  <v-example id="pie" title="Pie chart" desc="(with action dispatch)">
+    <v-chart ref="pie" :option="option" autoresize />
+  </v-example>
+</template>
diff --git a/src/demo/examples/PolarChart.vue b/src/demo/examples/PolarChart.vue
new file mode 100644
index 0000000..e57affb
--- /dev/null
+++ b/src/demo/examples/PolarChart.vue
@@ -0,0 +1,45 @@
+<script setup>
+import { use } from "echarts/core";
+import { LineChart } from "echarts/charts";
+import {
+  PolarComponent,
+  TitleComponent,
+  LegendComponent,
+  TooltipComponent
+} from "echarts/components";
+import { shallowRef } from "vue";
+import VChart from "../../ECharts";
+import VExample from "./Example";
+import getData from "../data/polar";
+
+use([
+  LineChart,
+  PolarComponent,
+  TitleComponent,
+  LegendComponent,
+  TooltipComponent
+]);
+
+const option = shallowRef(getData());
+const theme = shallowRef("dark");
+</script>
+
+<template>
+  <v-example id="polar" title="Polar plot" desc="(with built-in theme)">
+    <v-chart
+      :option="option"
+      autoresize
+      :theme="theme"
+      :style="theme === 'dark' ? 'background-color: #100c2a' : ''"
+    />
+    <template #extra>
+      <p>
+        Theme
+        <select v-model="theme">
+          <option :value="null">Default</option>
+          <option value="dark">Dark</option>
+        </select>
+      </p>
+    </template>
+  </v-example>
+</template>
diff --git a/src/demo/examples/RadarChart.vue b/src/demo/examples/RadarChart.vue
new file mode 100644
index 0000000..f71d9dc
--- /dev/null
+++ b/src/demo/examples/RadarChart.vue
@@ -0,0 +1,50 @@
+<script setup>
+import { use } from "echarts/core";
+import { RadarChart } from "echarts/charts";
+import {
+  PolarComponent,
+  TitleComponent,
+  TooltipComponent
+} from "echarts/components";
+import { shallowRef } from "vue";
+import VChart from "../../ECharts";
+import VExample from "./Example";
+import { useScoreStore } from "../data/radar";
+
+use([RadarChart, PolarComponent, TitleComponent, TooltipComponent]);
+
+const { metrics, getRadarData, increase, isMax, isMin } = useScoreStore();
+
+const metricIndex = shallowRef(0);
+</script>
+
+<template>
+  <v-example id="radar" title="Radar chart" desc="(with Pinia integration)">
+    <v-chart :option="getRadarData(metricIndex)" autoresize />
+    <template #extra>
+      <p>
+        <select v-model="metricIndex">
+          <option
+            v-for="(metric, index) in metrics"
+            :value="index"
+            :key="index"
+          >
+            {{ metric }}
+          </option>
+        </select>
+        <button
+          @click="increase(metricIndex, 1)"
+          :disabled="isMax(metricIndex)"
+        >
+          Increase
+        </button>
+        <button
+          @click="increase(metricIndex, -1)"
+          :disabled="isMin(metricIndex)"
+        >
+          Decrease
+        </button>
+      </p>
+    </template>
+  </v-example>
+</template>
diff --git a/src/demo/examples/ScatterChart.vue b/src/demo/examples/ScatterChart.vue
new file mode 100644
index 0000000..9e90d28
--- /dev/null
+++ b/src/demo/examples/ScatterChart.vue
@@ -0,0 +1,23 @@
+<script setup>
+import { use } from "echarts/core";
+import { ScatterChart } from "echarts/charts";
+import {
+  GridComponent,
+  TitleComponent,
+  LegendComponent
+} from "echarts/components";
+import { shallowRef } from "vue";
+import VChart from "../../ECharts";
+import VExample from "./Example";
+import getData from "../data/scatter";
+
+use([ScatterChart, GridComponent, TitleComponent, LegendComponent]);
+
+const option = shallowRef(getData());
+</script>
+
+<template>
+  <v-example id="scatter" title="Scatter plot" desc="(with gradient)">
+    <v-chart :option="option" autoresize />
+  </v-example>
+</template>
diff --git a/src/demo/jsconfig.json b/src/demo/jsconfig.json
index 8b9cf52..44d74d6 100644
--- a/src/demo/jsconfig.json
+++ b/src/demo/jsconfig.json
@@ -1,5 +1,6 @@
 {
   "files": [
-    "./Demo.vue"
+    "./Demo.vue",
+    "./examples/RadarChart.vue"
   ],
 }
diff --git a/src/demo/store.ts b/src/demo/store.ts
deleted file mode 100644
index a7ff3d8..0000000
--- a/src/demo/store.ts
+++ /dev/null
@@ -1,76 +0,0 @@
-import { defineStore } from "pinia";
-
-export const useScoreStore = defineStore("score", {
-  state: () => {
-    return {
-      scores: [
-        { name: "Attack", max: 20, value: 19 },
-        { name: "Defense", max: 20, value: 9 },
-        { name: "Speed", max: 20, value: 18 },
-        { name: "Strength", max: 20, value: 16 },
-        { name: "Endurance", max: 20, value: 16 },
-        { name: "Agility", max: 20, value: 20 }
-      ],
-      index: 0
-    };
-  },
-  getters: {
-    scoreRadar({ scores }) {
-      return {
-        title: {
-          text: "Player Ability"
-        },
-        tooltip: {},
-        radar: {
-          indicator: scores.map(({ name, max }) => {
-            return { name, max };
-          })
-        },
-        series: [
-          {
-            name: "Value",
-            type: "radar",
-            data: [{ value: scores.map(({ value }) => value) }]
-          }
-        ]
-      };
-    }
-  },
-  actions: {
-    getRadarData(activeIndex: number) {
-      return {
-        animation: false,
-        title: {
-          text: "Player Ability"
-        },
-        tooltip: {},
-        radar: {
-          indicator: this.scores.map(({ name, max }, index) => {
-            if (index === activeIndex) {
-              return { name, max, color: "goldenrod" };
-            }
-            return { name, max };
-          })
-        },
-        series: [
-          {
-            name: "Value",
-            type: "radar",
-            data: [{ value: this.scores.map(({ value }) => value) }]
-          }
-        ]
-      };
-    },
-    increase(index: number, amount: number) {
-      const metric = this.scores[index];
-      metric.value = Math.max(Math.min(metric.value + amount, metric.max), 0);
-    },
-    isMax(index: number) {
-      const { value, max } = this.scores[index];
-      return value === max;
-    },
-    isMin(index: number) {
-      return this.scores[index].value === 0;
-    }
-  }
-});