refactor: refactor demo

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>