From def0ad5bf50130e46f0d37c1f347bec98ee16085 Mon Sep 17 00:00:00 2001
From: Justineo <justice360@gmail.com>
Date: Wed, 24 Sep 2025 01:27:35 +0800
Subject: [PATCH] feat: revamp demo

---
 README.md                             |  13 +-
 README.zh-Hans.md                     |  13 +-
 demo/CodeGen.vue                      | 585 ++++++++++--------
 demo/Demo.vue                         | 819 ++++++++++++++++++--------
 demo/assets/Vue-ECharts.svg           |   3 -
 demo/components/MonacoCodeBlock.vue   |  46 ++
 demo/composables/useDemoDark.ts       |  10 +
 demo/composables/useOptionAnalysis.ts | 156 +++++
 demo/constants.ts                     |   7 +
 demo/data/{bar.js => bar.ts}          |  20 +-
 demo/data/connect.js                  | 121 ----
 demo/data/connect.ts                  |  78 +++
 demo/data/line.js                     |  56 --
 demo/data/line.ts                     |  38 ++
 demo/data/logo.js                     |  33 --
 demo/data/{map.js => map.ts}          |  68 ++-
 demo/data/{pie.js => pie.ts}          |  23 +-
 demo/data/{polar.js => polar.ts}      |  24 +-
 demo/data/radar.ts                    |  57 +-
 demo/data/{scatter.js => scatter.ts}  | 145 +++--
 demo/examples/BarChart.vue            |  78 +--
 demo/examples/ConnectChart.vue        |  38 +-
 demo/examples/Example.vue             | 127 ++--
 demo/examples/GeoChart.vue            |  61 +-
 demo/examples/GlChart.vue             | 141 +++--
 demo/examples/LineChart.vue           | 150 +++--
 demo/examples/LogoChart.vue           |  14 -
 demo/examples/ManualChart.vue         |  85 ++-
 demo/examples/PieChart.vue            |  63 +-
 demo/examples/PolarChart.vue          |  56 +-
 demo/examples/RadarChart.vue          |  21 +-
 demo/examples/ScatterChart.vue        |  20 +-
 demo/global.css                       | 142 +++++
 demo/index.html                       |   4 +-
 demo/services/monaco.ts               | 248 ++++++++
 demo/shims-echarts.d.ts               |   7 +
 demo/theme-dark.json                  | 389 ++++++++++++
 demo/tsconfig.json                    |   2 +-
 demo/utils/codegen.js                 | 498 ----------------
 demo/utils/codegen.ts                 | 618 +++++++++++++++++++
 demo/utils/dom.ts                     |  59 ++
 demo/utils/geo.ts                     |  16 +
 demo/workers/option.worker.ts         | 589 ++++++++++++++++++
 package.json                          |   5 +-
 pnpm-lock.yaml                        |  73 +--
 src/ECharts.ts                        |   4 +-
 tests/option.worker.test.ts           |  97 +++
 47 files changed, 4180 insertions(+), 1740 deletions(-)
 delete mode 100644 demo/assets/Vue-ECharts.svg
 create mode 100644 demo/components/MonacoCodeBlock.vue
 create mode 100644 demo/composables/useDemoDark.ts
 create mode 100644 demo/composables/useOptionAnalysis.ts
 create mode 100644 demo/constants.ts
 rename demo/data/{bar.js => bar.ts} (73%)
 delete mode 100644 demo/data/connect.js
 create mode 100644 demo/data/connect.ts
 delete mode 100644 demo/data/line.js
 create mode 100644 demo/data/line.ts
 delete mode 100644 demo/data/logo.js
 rename demo/data/{map.js => map.ts} (91%)
 rename demo/data/{pie.js => pie.ts} (68%)
 rename demo/data/{polar.js => polar.ts} (65%)
 rename demo/data/{scatter.js => scatter.ts} (57%)
 delete mode 100644 demo/examples/LogoChart.vue
 create mode 100644 demo/global.css
 create mode 100644 demo/services/monaco.ts
 create mode 100644 demo/shims-echarts.d.ts
 create mode 100644 demo/theme-dark.json
 delete mode 100644 demo/utils/codegen.js
 create mode 100644 demo/utils/codegen.ts
 create mode 100644 demo/utils/dom.ts
 create mode 100644 demo/utils/geo.ts
 create mode 100644 demo/workers/option.worker.ts
 create mode 100644 tests/option.worker.test.ts

diff --git a/README.md b/README.md
index 66c26c0..5123753 100644
--- a/README.md
+++ b/README.md
@@ -21,7 +21,7 @@ npm install echarts vue-echarts
 
 ```vue
 <template>
-  <v-chart class="chart" :option="option" />
+  <VChart class="chart" :option="option" />
 </template>
 
 <script setup>
@@ -128,7 +128,7 @@ Drop `<script>` inside your HTML file and access the component via `window.VueEC
 const app = Vue.createApp(...)
 
 // register globally (or you can do it locally)
-app.component('v-chart', VueECharts)
+app.component('VChart', VueECharts)
 ```
 
 </details>
@@ -154,7 +154,6 @@ See more examples [here](https://github.com/ecomfe/vue-echarts/tree/main/demo).
   ECharts' universal interface. Modifying this prop triggers Vue ECharts to compute an update plan and call `setOption`. Read more [here →](https://echarts.apache.org/en/option.html)
 
   #### Smart Update
-
   - If you supply `update-options` (via prop or injection), Vue ECharts forwards it directly to `setOption` and skips the planner.
   - Manual `setOption` calls (only available when `manual-update` is `true`) behave like native ECharts, honouring only the per-call override you pass in.
   - Otherwise, Vue ECharts analyses the change: removed objects become `null`, removed arrays become `[]` with `replaceMerge`, ID/anonymous deletions trigger `replaceMerge`, and risky changes fall back to `notMerge: true`.
@@ -193,7 +192,7 @@ You can bind events with Vue's `v-on` directive.
 
 ```vue
 <template>
-  <v-chart :option="option" @highlight="handleHighlight" />
+  <VChart :option="option" @highlight="handleHighlight" />
 </template>
 ```
 
@@ -254,7 +253,7 @@ As Vue ECharts binds events to the ECharts instance by default, there is some ca
 
 ```vue
 <template>
-  <v-chart @native:click="handleClick" />
+  <VChart @native:click="handleClick" />
 </template>
 ```
 
@@ -362,7 +361,7 @@ The slot props correspond to the first parameter of the callback function.
 
 ```vue
 <template>
-  <v-chart :option="chartOptions">
+  <VChart :option="chartOptions">
     <!-- Global `tooltip.formatter` -->
     <template #tooltip="params">
       <div v-for="(param, i) in params" :key="i">
@@ -395,7 +394,7 @@ The slot props correspond to the first parameter of the callback function.
         </tbody>
       </table>
     </template>
-  </v-chart>
+  </VChart>
 </template>
 ```
 
diff --git a/README.zh-Hans.md b/README.zh-Hans.md
index 8482342..30bcae9 100644
--- a/README.zh-Hans.md
+++ b/README.zh-Hans.md
@@ -21,7 +21,7 @@ npm install echarts vue-echarts
 
 ```vue
 <template>
-  <v-chart class="chart" :option="option" />
+  <VChart class="chart" :option="option" />
 </template>
 
 <script setup>
@@ -128,7 +128,7 @@ import "echarts";
 const app = Vue.createApp(...)
 
 // 全局注册组件（也可以使用局部注册）
-app.component('v-chart', VueECharts)
+app.component('VChart', VueECharts)
 ```
 
 </details>
@@ -154,7 +154,6 @@ app.component('v-chart', VueECharts)
   ECharts 的万能接口。修改这个 prop 会触发 ECharts 实例的 `setOption` 方法。查看[详情 →](https://echarts.apache.org/zh/option.html)
 
   #### 智能更新
-
   - 如果提供了 `update-options`（或通过 inject 注入），Vue ECharts 会直接把它传给 `setOption`，不会执行智能计划。
   - 手动调用 `setOption`（仅当 `manual-update` 为 `true` 时可用）与原生 ECharts 保持一致，只使用本次调用传入的参数。
   - 其他情况下，Vue ECharts 会分析差异：删除的对象写入 `null`，删除的数组写入 `[]` 并加入 `replaceMerge`，ID/匿名项减少时追加 `replaceMerge`，风险较高的变更会退回 `notMerge: true`。
@@ -193,7 +192,7 @@ app.component('v-chart', VueECharts)
 
 ```vue
 <template>
-  <v-chart :option="option" @highlight="handleHighlight" />
+  <VChart :option="option" @highlight="handleHighlight" />
 </template>
 ```
 
@@ -254,7 +253,7 @@ Vue ECharts 支持如下事件：
 
 ```vue
 <template>
-  <v-chart @native:click="handleClick" />
+  <VChart @native:click="handleClick" />
 </template>
 ```
 
@@ -362,7 +361,7 @@ Vue ECharts 允许你通过 Vue 插槽来定义 ECharts 配置中的 [`tooltip.f
 
 ```vue
 <template>
-  <v-chart :option="chartOptions">
+  <VChart :option="chartOptions">
     <!-- 全局 `tooltip.formatter` -->
     <template #tooltip="params">
       <div v-for="(param, i) in params" :key="i">
@@ -395,7 +394,7 @@ Vue ECharts 允许你通过 Vue 插槽来定义 ECharts 配置中的 [`tooltip.f
         </tbody>
       </table>
     </template>
-  </v-chart>
+  </VChart>
 </template>
 ```
 
diff --git a/demo/CodeGen.vue b/demo/CodeGen.vue
index 3793bd9..40475eb 100644
--- a/demo/CodeGen.vue
+++ b/demo/CodeGen.vue
@@ -1,92 +1,33 @@
-<script setup>
+<script setup lang="ts">
 import {
   ref,
   computed,
   watch,
-  onBeforeUnmount,
   onMounted,
+  onBeforeUnmount,
   nextTick,
 } from "vue";
-import { useLocalStorage } from "@vueuse/core";
-import "highlight.js/styles/github.css";
-import hljs from "highlight.js/lib/core";
-import javascript from "highlight.js/lib/languages/javascript";
-import typescript from "highlight.js/lib/languages/typescript";
-import hljsVuePlugin from "@highlightjs/vue-plugin";
-import { initialize, transform } from "esbuild-wasm";
-import wasmURL from "esbuild-wasm/esbuild.wasm?url";
+import { useLocalStorage, useTimeoutFn } from "@vueuse/core";
 import { track } from "@vercel/analytics";
 
-import { getImportsFromOption } from "./utils/codegen";
+import {
+  getImportsFromOption,
+  type Quote,
+  type PublicCodegenOptions,
+} from "./utils/codegen";
+import {
+  createOptionEditor,
+  createCodeViewer,
+  type OptionEditor,
+  type CodeViewer,
+} from "./services/monaco";
+import {
+  useOptionAnalysis,
+  type AnalyzerIssue,
+} from "./composables/useOptionAnalysis";
+import { useDemoDark } from "./composables/useDemoDark";
 
-hljs.registerLanguage("javascript", javascript);
-hljs.registerLanguage("typescript", typescript);
-const CodeHighlight = hljsVuePlugin.component;
-
-const codegenOptions = useLocalStorage("ve.codegenOptions", {
-  indent: "  ",
-  quote: "'",
-  multiline: false,
-  maxLen: 80,
-  semi: false,
-  includeType: false,
-});
-
-const props = defineProps({ open: Boolean, renderer: String });
-const emit = defineEmits(["update:open"]);
-
-const dialog = ref(null);
-let clickFrom = null;
-
-function onMousedown(e) {
-  clickFrom = e.target;
-}
-
-function closeFromOutside() {
-  if (dialog.value?.contains(clickFrom)) {
-    return;
-  }
-  close();
-}
-
-function close() {
-  emit("update:open", false);
-}
-
-const renderer = ref(props.renderer);
-const source = ref(null);
-watch(
-  () => props.open,
-  async (val) => {
-    if (val) {
-      renderer.value = props.renderer;
-    }
-
-    await nextTick();
-
-    if (initializing.value) {
-      return;
-    }
-    source.value?.focus();
-  },
-);
-
-const copied = ref(false);
-const initializing = ref(true);
-const optionCode = ref("");
-const transformedCode = ref("");
-const transformErrors = ref([]);
-
-onMounted(async () => {
-  // prevent multiple initializations during HMR
-  if (!window.__esbuildInitialized) {
-    await initialize({ wasmURL });
-    window.__esbuildInitialized = true;
-  }
-
-  initializing.value = false;
-
-  optionCode.value = `{
+const DEFAULT_OPTION = `{
   title: {
     text: 'Referer of a Website',
     subtext: 'Fake Data',
@@ -122,94 +63,281 @@ onMounted(async () => {
   ]
 }`;
 
-  await nextTick();
-
-  source.value?.focus();
-});
-
-watch(optionCode, async (val) => {
-  try {
-    transformedCode.value = await transform(`(${val})`, { loader: "ts" });
-    transformErrors.value = [];
-  } catch (e) {
-    transformErrors.value = e.errors;
-  }
-});
-
-function formatError(errors) {
-  return errors
-    .map(({ text, location: { lineText, line, column, length } }) => {
-      const digit = Math.ceil(Math.log10(line)) || 1;
-      lineText = line === 1 ? lineText.slice(1) : lineText;
-      lineText =
-        line === optionCode.value.split("\n").length
-          ? lineText.slice(0, -1)
-          : lineText;
-      column = line === 1 ? column - 1 : column;
-
-      return `/* ${text} */
-
-// ${line} | ${lineText}
-// ${" ".repeat(digit)} | ${" ".repeat(column)}${"~".repeat(length)}
-`;
-    })
-    .join("\n\n");
+interface CodegenPreferences {
+  indent: string;
+  quote: Quote;
+  multiline: boolean;
+  maxLen: number;
+  semi: boolean;
+  includeType: boolean;
+  renderer: Renderer;
 }
 
-const importCode = computed(() => {
-  if (optionCode.value.trim() === "") {
-    return "// Paste your option code first";
-  }
+const codegenOptions = useLocalStorage<CodegenPreferences>(
+  "ve.codegenOptions",
+  {
+    indent: "  ",
+    quote: "'",
+    multiline: false,
+    maxLen: 80,
+    semi: false,
+    includeType: false,
+    renderer: "canvas",
+  } satisfies CodegenPreferences,
+);
 
-  if (transformErrors.value.length) {
-    return formatError(transformErrors.value);
-  }
+const props = defineProps<{ open: boolean; renderer: string }>();
+const emit = defineEmits<{ "update:open": [boolean] }>();
 
-  try {
-    return getImportsFromOption(eval(transformedCode.value.code), {
-      renderer: renderer.value,
-      ...codegenOptions.value,
-    });
-  } catch (e) {
-    return `/* Invalid ECharts option */
+const {
+  code: sourceCode,
+  state: analysisState,
+  updateSource,
+  dispose: disposeAnalysis,
+} = useOptionAnalysis(DEFAULT_OPTION);
 
-// ${e.message}
-`;
-  }
+const dialog = ref<HTMLElement | null>(null);
+let clickFrom: Node | null = null;
+
+const editorEl = ref<HTMLElement | null>(null);
+const outputEl = ref<HTMLElement | null>(null);
+let optionEditor: OptionEditor | null = null;
+let importViewer: CodeViewer | null = null;
+let suppressNextEditorEvent = false;
+const initializing = ref<boolean>(true);
+const showAnalyzingOverlay = ref(false);
+const { start: scheduleAnalyzingOverlay, stop: cancelAnalyzingOverlay } =
+  useTimeoutFn(() => {
+    showAnalyzingOverlay.value = true;
+  }, 180);
+
+type Renderer = "canvas" | "svg";
+
+const renderer = ref<Renderer>(props.renderer === "svg" ? "svg" : "canvas");
+codegenOptions.value.renderer = renderer.value;
+
+const isDark = useDemoDark();
+const monacoTheme = computed(() => (isDark.value ? "vs-dark" : "vs"));
+
+watch(
+  () => props.renderer,
+  (value) => {
+    if (props.open) {
+      renderer.value = value === "svg" ? "svg" : "canvas";
+    }
+  },
+);
+
+watch(renderer, (value) => {
+  codegenOptions.value.renderer = value;
 });
 
-watch(importCode, () => {
-  copied.value = false;
-});
+function onMousedown(event: MouseEvent) {
+  clickFrom = event.target instanceof Node ? event.target : null;
+}
 
-// copy message
-const messageOpen = ref(false);
-let messageTimer;
-
-function trackCopy(from) {
-  if (copied.value) {
-    // only track copy after modifications
+function closeFromOutside() {
+  const target = clickFrom;
+  if (target && dialog.value?.contains(target)) {
     return;
   }
+  close();
+}
 
+function close() {
+  emit("update:open", false);
+}
+
+const copied = ref(false);
+const messageOpen = ref(false);
+const { start: scheduleMessageClose, stop: cancelMessageClose } = useTimeoutFn(
+  () => {
+    messageOpen.value = false;
+  },
+  2018,
+);
+
+function trackCopy(from: "button" | "system") {
+  if (copied.value) {
+    return;
+  }
   copied.value = true;
   track("copy-code", { from });
 }
 
-function copy() {
-  trackCopy("button");
-  clearTimeout(messageTimer);
-
-  navigator.clipboard.writeText(importCode.value);
-  messageOpen.value = true;
-
-  messageTimer = setTimeout(() => {
-    messageOpen.value = false;
-  }, 2018);
+function formatIssues(issues: readonly AnalyzerIssue[]) {
+  if (!issues.length) {
+    return "";
+  }
+  return issues
+    .map((issue) => {
+      const lines = [`/* ${issue.message} */`];
+      if (issue.hint) {
+        lines.push(`// Hint: ${issue.hint}`);
+      }
+      if (issue.range) {
+        const pointer = `${issue.range.startLineNumber}:${issue.range.startColumn}`;
+        lines.push(`// ${pointer}`);
+      }
+      return lines.join("\n");
+    })
+    .join("\n\n");
 }
 
+const hasErrors = computed<boolean>(() => analysisState.hasBlockingIssue);
+
+const isBusy = computed<boolean>(
+  () => initializing.value || showAnalyzingOverlay.value,
+);
+
+const importCode = computed(() => {
+  const raw = sourceCode.value.trim();
+  if (!raw) {
+    return "// Paste your option code first";
+  }
+
+  if (hasErrors.value) {
+    const blockingIssues = analysisState.issues.filter(
+      (issue) => issue.severity === "error",
+    );
+    return formatIssues(blockingIssues);
+  }
+
+  if (!analysisState.option) {
+    return "// Option analysis did not produce a result";
+  }
+
+  try {
+    const preferences = codegenOptions.value;
+    const config: PublicCodegenOptions = {
+      indent: preferences.indent,
+      quote: preferences.quote,
+      multiline: preferences.multiline,
+      maxLen: preferences.maxLen,
+      semi: preferences.semi,
+      includeType: preferences.includeType,
+      renderer: renderer.value,
+    };
+    return getImportsFromOption(analysisState.option, config);
+  } catch (error) {
+    const message =
+      error instanceof Error ? error.message : String(error ?? "Unknown error");
+    return `/* Invalid ECharts option */\n\n// ${message}`;
+  }
+});
+
+watch(importCode, (value) => {
+  importViewer?.setValue(value);
+  copied.value = false;
+});
+
+function copy() {
+  if (!navigator.clipboard) {
+    return;
+  }
+  trackCopy("button");
+  navigator.clipboard.writeText(importCode.value);
+  messageOpen.value = true;
+  cancelMessageClose();
+  scheduleMessageClose();
+}
+
+onMounted(async () => {
+  await nextTick();
+  if (editorEl.value) {
+    optionEditor = createOptionEditor(editorEl.value, {
+      initialCode: sourceCode.value,
+      theme: monacoTheme.value,
+      onChange(value) {
+        if (suppressNextEditorEvent) {
+          return;
+        }
+        updateSource(value);
+      },
+    });
+    optionEditor.setMarkers(analysisState.diagnostics);
+  }
+  if (outputEl.value) {
+    importViewer = createCodeViewer(outputEl.value, {
+      initialCode: importCode.value,
+      language: codegenOptions.value.includeType ? "typescript" : "javascript",
+      theme: monacoTheme.value,
+    });
+  }
+  initializing.value = false;
+});
+
+watch(monacoTheme, (theme) => {
+  optionEditor?.setTheme(theme);
+  importViewer?.setTheme(theme);
+});
+
+watch(
+  () => codegenOptions.value.includeType,
+  (includeType) => {
+    importViewer?.setLanguage(includeType ? "typescript" : "javascript");
+    importViewer?.setValue(importCode.value);
+  },
+);
+
+watch(
+  () => analysisState.status,
+  (status) => {
+    if (status === "analyzing" && !initializing.value) {
+      scheduleAnalyzingOverlay();
+      return;
+    }
+    cancelAnalyzingOverlay();
+    showAnalyzingOverlay.value = false;
+  },
+  { immediate: true },
+);
+
+watch(
+  () => props.open,
+  async (value) => {
+    if (value) {
+      renderer.value = props.renderer === "svg" ? "svg" : "canvas";
+      await nextTick();
+      optionEditor?.editor.focus();
+      optionEditor?.editor.layout();
+      importViewer?.editor.layout();
+    }
+  },
+);
+
+watch(
+  () => analysisState.diagnostics,
+  (diagnostics) => {
+    optionEditor?.setMarkers(diagnostics);
+  },
+  { deep: true },
+);
+
+watch(sourceCode, (value) => {
+  if (!optionEditor) {
+    return;
+  }
+  const current = optionEditor.getValue();
+  if (current === value) {
+    return;
+  }
+  try {
+    suppressNextEditorEvent = true;
+    optionEditor.setValue(value);
+  } finally {
+    suppressNextEditorEvent = false;
+  }
+});
+
 onBeforeUnmount(() => {
-  clearTimeout(messageTimer);
+  cancelMessageClose();
+  cancelAnalyzingOverlay();
+  optionEditor?.dispose();
+  optionEditor = null;
+  importViewer?.dispose();
+  importViewer = null;
+  disposeAnalysis();
 });
 </script>
 
@@ -221,8 +349,14 @@ onBeforeUnmount(() => {
     @click="closeFromOutside"
     @keydown.esc="close"
   >
-    <section class="dialog" ref="dialog">
-      <h2>✨ <code>import</code> code generator</h2>
+    <section
+      ref="dialog"
+      class="dialog"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="codegen-title"
+    >
+      <h2 id="codegen-title">Generate import code</h2>
       <section class="options">
         <label>
           Renderer
@@ -233,64 +367,59 @@ onBeforeUnmount(() => {
         </label>
         <label>
           TypeScript
-          <input type="checkbox" v-model="codegenOptions.includeType" />
+          <input v-model="codegenOptions.includeType" type="checkbox" />
         </label>
         <label>
           Multiline
-          <input type="checkbox" v-model="codegenOptions.multiline" />
+          <input v-model="codegenOptions.multiline" type="checkbox" />
         </label>
         <label>
           Semi
-          <input type="checkbox" v-model="codegenOptions.semi" />
+          <input v-model="codegenOptions.semi" type="checkbox" />
         </label>
         <label>
           Quote
           <select v-model="codegenOptions.quote">
-            <option value="'">single</option>
-            <option value='"'>double</option>
+            <option value="'">Single</option>
+            <option value='"'>Double</option>
           </select>
         </label>
         <label>
           Indent
           <select v-model="codegenOptions.indent">
-            <option value="  ">2</option>
-            <option value="    ">4</option>
+            <option value="  ">2 spaces</option>
+            <option value="    ">4 spaces</option>
             <option value="	">Tab</option>
           </select>
         </label>
         <label>
           Max length
           <input
+            v-model.number="codegenOptions.maxLen"
             type="number"
             step="10"
-            v-model.number="codegenOptions.maxLen"
           />
         </label>
       </section>
       <section class="code">
-        <textarea
-          ref="source"
+        <div
+          ref="editorEl"
           class="option-code"
-          v-model="optionCode"
-          :placeholder="
-            initializing
-              ? 'Initializing...'
-              : 'Paste your option code (TS/JS literal) here...'
-          "
-          :disabled="initializing"
-          autofocus
-          spellcheck="false"
-        ></textarea>
-        <div class="import-code" @copy="trackCopy('system')">
-          <code-highlight
-            :language="codegenOptions.includeType ? 'typescript' : 'javascript'"
-            :code="importCode"
-          />
-        </div>
+          aria-label="ECharts option (TS/JS literal)"
+          :aria-busy="isBusy"
+        ></div>
+        <div
+          ref="outputEl"
+          class="import-code"
+          role="textbox"
+          aria-label="Generated import code"
+          aria-readonly="true"
+          @copy="trackCopy('system')"
+        ></div>
         <button
           class="copy"
+          :disabled="analysisState.hasBlockingIssue"
           @click="copy"
-          :disabled="importCode.startsWith('/*') || importCode.startsWith('//')"
         >
           Copy
         </button>
@@ -298,37 +427,31 @@ onBeforeUnmount(() => {
     </section>
   </aside>
 
-  <aside class="message" :class="{ open: messageOpen }">
+  <aside
+    class="message"
+    :class="{ open: messageOpen }"
+    role="status"
+    aria-live="polite"
+  >
     Copied to clipboard
   </aside>
 </template>
 
 <style>
-input::-webkit-outer-spin-button,
-input::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-/* Works for Firefox */
-input[type="number"] {
-  appearance: textfield;
-}
-
-input[type="text"],
-input[type="number"] {
-  cursor: text;
-}
-
 .dialog {
   display: flex;
   flex-direction: column;
   width: 80vw;
   height: 90vh;
-  border-radius: 6px;
+  border-radius: var(--r-l);
   overflow: hidden;
-  background-color: #fff;
-  box-shadow: 0 0 45px rgba(0, 0, 0, 0.2);
+  background-color: var(--surface);
+  border: 1px solid var(--border);
+  box-shadow: var(--shadow);
+}
+
+.dialog h2 {
+  margin-top: 2rem;
 }
 
 .options {
@@ -337,22 +460,23 @@ input[type="number"] {
   align-items: stretch;
   gap: 16px;
   padding: 16px;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  border-bottom: 1px solid var(--border);
 
   label {
     display: flex;
     align-items: center;
-    gap: 4px;
-  }
-
-  input,
-  button,
-  select {
-    height: 2.4em;
+    gap: 6px;
+    color: var(--muted);
   }
 
   input[type="number"] {
-    width: 60px;
+    width: 54px;
+  }
+
+  input[type="checkbox"] {
+    width: 1rem;
+    height: 1rem;
+    accent-color: var(--accent);
   }
 }
 
@@ -360,6 +484,7 @@ input[type="number"] {
   position: relative;
   display: flex;
   justify-content: center;
+  text-align: left;
   align-items: stretch;
   flex-grow: 1;
   min-height: 0;
@@ -370,33 +495,19 @@ input[type="number"] {
     flex: 0 0 50%;
     margin: 0;
     border: none;
-    line-height: 1.2;
-    font-size: 13px;
-    overflow: auto;
   }
 
-  .import-code {
-    border-left: 1px solid rgba(0, 0, 0, 0.1);
-
-    pre {
-      display: block;
-      width: 100%;
-      height: 100%;
-      margin: 0;
-      padding: 0;
-      background: #fff;
-      box-shadow: none;
-    }
-
-    code {
-      height: 100%;
-    }
-  }
-
-  .option-code {
-    padding: 1em;
-    outline: none;
-    resize: none;
+  .option-code[aria-busy="true"]::after {
+    content: "Analyzing...";
+    position: absolute;
+    inset: 0;
+    display: grid;
+    place-items: center;
+    background: var(--surface);
+    color: var(--muted);
+    font-size: 0.85rem;
+    pointer-events: none;
+    z-index: 1;
   }
 }
 
@@ -404,6 +515,8 @@ input[type="number"] {
   position: absolute;
   right: 10px;
   top: 10px;
+  border-radius: var(--r-m);
+  border: 1px solid var(--border);
 }
 
 .message {
@@ -412,12 +525,12 @@ input[type="number"] {
   bottom: 2rem;
   left: 50%;
   padding: 0.5rem 0.75rem;
-  background-color: rgba(45, 52, 64, 0.98);
-  box-shadow: 0 4px 16px rgba(45, 52, 64, 0.6);
-  color: #fff;
+  background-color: var(--text);
+  box-shadow: var(--shadow);
+  color: var(--surface);
   font-size: 0.875rem;
   transform: translate(-50%, 200%);
-  border-radius: 4px;
+  border-radius: var(--r-s);
   opacity: 0;
   transition:
     transform 0.2s,
diff --git a/demo/Demo.vue b/demo/Demo.vue
index 86112e2..989dfdb 100644
--- a/demo/Demo.vue
+++ b/demo/Demo.vue
@@ -1,12 +1,14 @@
-<script setup>
+<script setup lang="ts">
 import { provide, computed, ref, watch } from "vue";
-import { useUrlSearchParams } from "@vueuse/core";
-import { use } from "echarts/core";
+import { useScrollLock, useUrlSearchParams } from "@vueuse/core";
+import { use, registerTheme } from "echarts/core";
 import { CanvasRenderer, SVGRenderer } from "echarts/renderers";
-import { INIT_OPTIONS_KEY } from "../src/ECharts";
 import { track } from "@vercel/analytics";
+import darkTheme from "echarts/lib/theme/dark.js";
+
+import { INIT_OPTIONS_KEY, THEME_KEY } from "../src/ECharts";
+import type { InitOptions } from "../src/types";
 
-import LogoChart from "./examples/LogoChart.vue";
 import BarChart from "./examples/BarChart.vue";
 import LineChart from "./examples/LineChart.vue";
 import PieChart from "./examples/PieChart.vue";
@@ -19,104 +21,189 @@ import GlChart from "./examples/GlChart.vue";
 import ManualChart from "./examples/ManualChart.vue";
 
 import CodeGen from "./CodeGen.vue";
+import { useDemoDark } from "./composables/useDemoDark";
+import {
+  getScrollLockTarget,
+  getScrollbarWidth,
+  isClient,
+  setHash,
+} from "./utils/dom";
+
+type Renderer = "canvas" | "svg";
 
 use([CanvasRenderer, SVGRenderer]);
 
-const params = useUrlSearchParams();
-const initOptions = computed(() => ({
-  renderer: params.renderer || "canvas",
+registerTheme("dark", darkTheme);
+
+const isDark = useDemoDark();
+
+const params = useUrlSearchParams<{ renderer?: Renderer }>();
+
+const selectedRenderer = computed<Renderer>(() =>
+  params.renderer === "svg" ? "svg" : "canvas",
+);
+
+const initOptions = computed<InitOptions>(() => ({
+  renderer: selectedRenderer.value,
 }));
 
+const theme = computed(() => (isDark.value ? "dark" : undefined));
+
 provide(INIT_OPTIONS_KEY, initOptions);
+provide(THEME_KEY, theme);
 
-const codeOpen = ref(location.hash === "#codegen");
+const lockTarget = ref<HTMLElement | null>(getScrollLockTarget());
+const docRoot = isClient ? document.documentElement : null;
 
-if (codeOpen.value) {
-  track("codegen", { from: "link" });
-}
+const scrollLock = isClient ? useScrollLock(lockTarget, false) : ref(false);
 
-function openCodegen() {
-  codeOpen.value = true;
-  track("codegen", { from: "click" });
-}
+const initialCodegenOpen = isClient && window.location.hash === "#codegen";
+const codeOpen = ref(initialCodegenOpen);
 
-watch(codeOpen, (open) => {
-  if (open) {
-    location.hash = "#codegen";
-  } else {
-    location.hash = "";
+const trackCodegen = (source: "link" | "click"): void => {
+  if (isClient) {
+    track("codegen", { from: source });
   }
-});
+};
+
+if (initialCodegenOpen) {
+  trackCodegen("link");
+}
+
+function openCodegen(): void {
+  codeOpen.value = true;
+  trackCodegen("click");
+}
+
+const applyCodegenState = (open: boolean): void => {
+  if (isClient) {
+    if (docRoot) {
+      docRoot.style.paddingRight = open ? `${getScrollbarWidth()}px` : "";
+    }
+    scrollLock.value = open;
+  }
+  setHash(open ? "#codegen" : "");
+};
+
+watch(codeOpen, applyCodegenState, { immediate: true });
 </script>
 
 <template>
   <main>
-    <logo-chart />
+    <img id="logo" src="/favicon.svg" alt="Vue ECharts" />
 
     <h1>
       <a href="https://github.com/ecomfe/vue-echarts">Vue ECharts</a>
     </h1>
-    <p class="desc">
-      Vue.js component for Apache ECharts™. (<a
-        href="https://github.com/ecomfe/vue-echarts#readme"
-        >docs</a
-      >)
-    </p>
-
-    <h2 class="sep">Examples</h2>
+    <p class="desc">Vue.js component for Apache ECharts™.</p>
     <p>
-      <small
-        >See
-        <a href="https://echarts.apache.org/examples/en/index.html"
-          >echarts.apache.org/examples</a
-        >
-        for all examples.</small
-      >
+      <a href="https://npmjs.com/package/vue-echarts"
+        ><img alt="npm version" src="https://img.shields.io/npm/v/vue-echarts"
+      /></a>
+      <a href="https://codecov.io/gh/ecomfe/vue-echarts"
+        ><img
+          alt="test coverage"
+          src="https://img.shields.io/codecov/c/github/ecomfe/vue-echarts"
+      /></a>
     </p>
 
-    <bar-chart />
-    <line-chart />
-    <pie-chart />
-    <polar-chart />
-    <scatter-chart />
-    <geo-chart />
-    <radar-chart />
-    <connect-chart />
-    <gl-chart />
-    <manual-chart />
+    <section class="examples-head" aria-label="Examples">
+      <a
+        class="examples-deco"
+        href="https://echarts.apache.org/examples/en/index.html"
+        target="_blank"
+        rel="noopener"
+        aria-label="All examples"
+        title="All examples"
+      >
+        <span class="rule" aria-hidden="true"></span>
+        <span class="dot" aria-hidden="true"></span>
+        <span class="dot" aria-hidden="true"></span>
+        <span class="dot" aria-hidden="true"></span>
+        <span class="rule" aria-hidden="true"></span>
+      </a>
+    </section>
 
-    <footer>
-      <a href="//github.com/Justineo">@Justineo</a>|
-      <a href="//github.com/ecomfe/vue-echarts/blob/master/LICENSE"
-        >MIT License</a
-      >|
-      <a href="//github.com/ecomfe/vue-echarts">View on GitHub</a>
+    <BarChart />
+    <LineChart />
+    <PieChart />
+    <PolarChart />
+    <ScatterChart />
+    <GeoChart />
+    <RadarChart />
+    <ConnectChart />
+    <GlChart />
+    <ManualChart />
+
+    <footer class="site-footer" aria-label="Footer">
+      <small class="footer-links">
+        <a href="//github.com/ecomfe/vue-echarts/blob/master/LICENSE">MIT</a>
+        <span aria-hidden="true">·</span>
+        <a href="//github.com/ecomfe/vue-echarts">GitHub</a>
+      </small>
     </footer>
 
-    <aside class="renderer">
-      <button
-        :class="{
-          active: initOptions.renderer === 'canvas',
-        }"
-        @click="params.renderer = 'canvas'"
+    <div class="toolbar" role="toolbar" aria-label="Controls">
+      <div
+        :class="[
+          'toggle',
+          'renderer-toggle',
+          initOptions.renderer === 'svg' ? 'right-active' : 'left-active',
+        ]"
+        role="group"
+        aria-label="Renderer"
       >
-        Canvas
-      </button>
-      <button
-        :class="{
-          active: initOptions.renderer === 'svg',
-        }"
-        @click="params.renderer = 'svg'"
+        <div class="indicator" aria-hidden="true"></div>
+        <button
+          :class="{ active: initOptions.renderer === 'canvas' }"
+          :aria-pressed="initOptions.renderer === 'canvas'"
+          type="button"
+          @click="params.renderer = 'canvas'"
+        >
+          Canvas
+        </button>
+        <button
+          :class="{ active: initOptions.renderer === 'svg' }"
+          :aria-pressed="initOptions.renderer === 'svg'"
+          type="button"
+          @click="params.renderer = 'svg'"
+        >
+          SVG
+        </button>
+      </div>
+      <div
+        :class="[
+          'toggle',
+          'theme-toggle',
+          isDark ? 'right-active' : 'left-active',
+        ]"
+        role="group"
+        aria-label="Theme"
       >
-        SVG
+        <div class="indicator" aria-hidden="true"></div>
+        <button
+          :class="{ active: !isDark }"
+          :aria-pressed="!isDark"
+          type="button"
+          @click="isDark = false"
+        >
+          Light
+        </button>
+        <button
+          :class="{ active: isDark }"
+          :aria-pressed="isDark"
+          type="button"
+          @click="isDark = true"
+        >
+          Dark
+        </button>
+      </div>
+      <button class="codegen" type="button" @click="openCodegen">
+        Generate code
       </button>
-    </aside>
+    </div>
 
-    <aside class="codegen">
-      <button @click="openCodegen">✨ <code>import</code> Codegen</button>
-    </aside>
-
-    <code-gen v-model:open="codeOpen" :renderer="initOptions.renderer" />
+    <CodeGen v-model:open="codeOpen" :renderer="selectedRenderer" />
   </main>
 </template>
 
@@ -125,6 +212,7 @@ watch(codeOpen, (open) => {
 *::before,
 *::after {
   box-sizing: border-box;
+  scrollbar-width: thin;
 }
 
 html {
@@ -133,82 +221,56 @@ html {
 
 body {
   margin: 0;
-  padding: 3em 0 0;
-  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
-  font-weight: 300;
-  color: #666;
+  padding: 56px 0 0;
+  font-family: var(--font-sans);
+  color: var(--muted);
+  background: var(--bg);
   text-align: center;
 }
 
 a {
-  color: inherit;
+  color: var(--link);
   text-decoration: none;
-  box-shadow: 0 1px 0 0 #42b983;
-  transition: box-shadow 0.2s;
+  transition: color 0.2s ease;
 
   &:hover {
-    box-shadow: 0 2px 0 0 #42b983;
+    color: var(--accent-strong);
   }
 }
 
 h1 {
-  margin-bottom: 1em;
-  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
+  margin-bottom: 1rem;
+  font-family: var(--font-sans);
 }
 
 h2 {
-  margin-top: 1em;
-  margin-bottom: 1em;
-}
-
-.sep {
-  margin-top: 6em;
-  margin-bottom: 1.8em;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 12px;
-  font-size: 1.25em;
-  color: #7f8c8d;
-  opacity: 0.6;
-
-  &::before,
-  &::after {
-    content: "";
-    display: block;
-    width: 48px;
-    border-bottom: 1px dotted currentColor;
-  }
+  margin-top: 1rem;
+  margin-bottom: 1rem;
 }
 
 h3 {
-  margin-top: 2em;
-  padding-top: 1em;
-  font-size: 1.2em;
-
-  small {
-    font-weight: 300;
-    opacity: 0.7;
-  }
+  margin-top: 2rem;
+  padding-top: 1rem;
+  font-size: 1.2rem;
 
   button {
-    margin-left: 1em;
+    margin-left: 1rem;
     vertical-align: middle;
   }
 }
 
 .desc {
-  margin-bottom: 3em;
-  color: #7f8c8d;
+  margin-bottom: 3rem;
+  color: var(--muted);
 
   a {
-    color: #42b983;
+    color: var(--accent);
   }
 }
 
 p small {
-  font-size: 0.8em;
-  color: #7f8c8d;
+  font-size: 0.8rem;
+  color: var(--muted);
 }
 
 p {
@@ -218,99 +280,384 @@ p {
   button + select,
   select + button,
   select + select {
-    margin-left: 0.5em;
+    margin-left: 0.5rem;
   }
 }
 
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+input[type="number"] {
+  appearance: textfield;
+}
+
+input[type="text"],
+input[type="number"] {
+  cursor: text;
+}
+
 pre {
   display: inline-block;
-  padding: 0.8em;
-  background-color: #f9f9f9;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.125);
+  padding: 0.8rem 1rem;
+  background-color: var(--surface-2);
+  border: 1px solid var(--border);
+  border-radius: var(--r-s);
   text-align: left;
 }
 pre,
 code,
 textarea {
-  font-family:
-    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono",
-    monospace;
+  font-family: var(--font-mono);
 }
 
-footer {
-  margin: 5em 0 3em;
-  font-size: 0.5em;
-  vertical-align: middle;
+.examples-head {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  margin: 3.5rem 0 1.6rem;
+  color: var(--muted);
+}
+.examples-head .examples-deco {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  color: inherit;
+  text-decoration: none;
+}
+.examples-head .examples-deco .rule {
+  display: inline-block;
+  width: 64px;
+  max-width: 20vw;
+  height: 1px;
+  background: currentColor;
+  opacity: 0.35;
+}
+.examples-head .examples-deco .dot {
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  background: currentColor;
+  opacity: 0.6;
+  display: inline-block;
+}
 
-  a {
-    display: inline-block;
-    margin: 0 5px;
-    color: #7f8c8d;
-    font-size: 2em;
+.toolbar {
+  position: fixed;
+  top: 16px;
+  left: 16px;
+  z-index: 1000;
+  display: inline-flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 12px;
+  border-radius: var(--r-l);
+  border: 1px solid var(--border);
+  background: color-mix(in srgb, var(--surface) 50%, transparent);
+  backdrop-filter: blur(14px);
+  -webkit-backdrop-filter: blur(14px);
+  white-space: nowrap;
+}
+
+.toggle {
+  position: relative;
+  display: inline-flex;
+  align-items: stretch;
+  gap: 0;
+  padding: 2px;
+  border: 1px solid var(--border);
+  border-radius: var(--r-m);
+  background: var(--surface);
+  height: 2.25rem;
+  flex-shrink: 0;
+  overflow: hidden;
+}
+
+.toggle .indicator {
+  position: absolute;
+  top: 3px;
+  bottom: 3px;
+  left: 3px;
+  width: calc(50% - 3px);
+  border-radius: calc(var(--r-m) - 3px);
+  background: color-mix(in srgb, var(--accent) 18%, var(--surface) 82%);
+  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+.toggle.right-active .indicator {
+  transform: translateX(100%);
+}
+
+.toggle.left-active .indicator {
+  transform: translateX(0);
+}
+
+.toggle button {
+  position: relative;
+  z-index: 1;
+  flex: 1;
+  border: none;
+  background: none;
+  color: var(--muted);
+  font-size: 0.875rem;
+  font-weight: 500;
+  transition: color 0.2s ease;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 var(--space-3);
+  height: auto;
+  min-width: 0;
+}
+
+.toggle button.active {
+  color: var(--heading);
+}
+
+.toggle button:hover,
+.toggle button:active {
+  background: none;
+}
+
+.toggle button:hover,
+.toggle button:focus-visible {
+  color: var(--text);
+}
+
+.toggle button:focus-visible {
+  outline: none;
+  box-shadow: none;
+}
+
+.toggle button.active:focus-visible {
+  box-shadow: var(--focus);
+  border-radius: calc(var(--r-m) - 3px);
+}
+
+.codegen {
+  font-weight: 500;
+  padding: 0 1rem;
+}
+
+.codegen:hover {
+  color: var(--heading);
+}
+
+@media (max-width: 640px) {
+  body {
+    padding-bottom: 96px;
+  }
+
+  .examples-head .examples-deco {
+    gap: 8px;
+  }
+  .examples-head .examples-deco .rule {
+    width: 36px;
+  }
+
+  .toolbar {
+    top: auto;
+    bottom: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    gap: 8px;
+    padding: 6px 10px;
+    border-radius: var(--r-m);
+  }
+
+  .toggle {
+    border-radius: var(--r-m);
+  }
+
+  .toggle button {
+    font-size: 0.8rem;
+  }
+
+  .toggle .indicator {
+    top: 2px;
+    bottom: 2px;
+    left: 2px;
+    width: calc(50% - 2px);
+    border-radius: calc(var(--r-m) - 4px);
+  }
+
+  .codegen {
+    display: none;
+  }
+
+  .fig > .echarts {
+    border-right: none !important;
+    border-left: none !important;
+    border-radius: 0 !important;
+  }
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.fig > .echarts {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--r-l);
+  box-shadow: none;
+}
+
+.sep {
+  opacity: 0.8;
+}
+.sep::before,
+.sep::after {
+  border-bottom-style: solid;
+  border-bottom-color: color-mix(in srgb, var(--border) 70%, transparent);
+}
+
+.dialog {
+  background: var(--surface);
+  border: 1px solid var(--border);
+}
+
+.message {
+  background: var(--text);
+  color: var(--surface);
+  border: 1px solid color-mix(in srgb, var(--text) 20%, transparent);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation: none !important;
+    transition: none !important;
   }
 }
 
 h1,
 h2,
 h3 {
-  color: #2c3e50;
+  color: var(--heading);
   font-weight: 400;
   a,
   a:hover {
     text-decoration: none;
     box-shadow: none;
+    color: inherit;
   }
 }
 
 button,
 select,
-input {
-  border: 1px solid #4fc08d;
-  border-radius: 0.5em;
-  background-color: #fff;
-  color: #42b983;
-  cursor: pointer;
+input:not([type="checkbox"]):not([type="radio"]) {
   font: inherit;
-  padding: 0 0.5em;
-  transition: all 0.2s;
+  font-size: 0.9rem;
+  color: var(--heading);
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--r-m);
+  padding: 0 0.75rem;
+  height: 2.25rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  line-height: 1.2;
+}
 
-  &:focus {
-    outline: none;
-  }
+button {
+  cursor: pointer;
+  font-weight: 500;
+}
 
-  &:focus-visible {
-    box-shadow: 0 0 1px #4fc08d;
-  }
+select {
+  cursor: pointer;
+}
 
-  &:active {
-    background: rgba(79, 192, 141, 0.2);
-  }
+button:hover,
+select:hover {
+  background: var(--surface-2);
+}
 
-  &[disabled] {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
+button:active {
+  background: color-mix(in srgb, var(--surface-2) 70%, var(--surface) 30%);
+}
+
+button:focus-visible,
+select:focus-visible,
+input:not([type="checkbox"]):not([type="radio"]):focus-visible {
+  outline: none;
+  box-shadow: var(--focus);
+}
+
+button[disabled],
+button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  background: var(--surface);
+  color: var(--muted);
+}
+
+button[disabled]:hover,
+button:disabled:hover {
+  background: var(--surface);
+  color: var(--muted);
 }
 
 label {
   display: inline-flex;
   align-items: center;
-  justify-content: center;
+  justify-content: flex-start;
 }
 
-button,
-input,
-label,
-select {
-  font-size: 0.75em;
-  height: 2em;
+x-vue-echarts {
+  text-align: left;
 }
 
 #logo {
   display: inline-flex;
-  width: 128px;
-  height: 128px;
-  pointer-events: none;
+  width: 108px;
+  height: 108px;
+  margin-top: 36px;
+  margin-bottom: 12px;
+  transform-origin: 50% 50%;
+  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
+  will-change: transform, box-shadow;
+  border-radius: 50%;
+}
+
+#logo:hover {
+  transform: translateY(-2px) scale(1.045) rotate(-3deg);
+  animation: logo-pulse 1400ms ease-out infinite;
+}
+
+@keyframes logo-pulse {
+  0% {
+    box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 36%, transparent);
+  }
+  70% {
+    box-shadow: 0 0 0 12px color-mix(in srgb, var(--accent) 0%, transparent);
+  }
+  100% {
+    box-shadow: 0 0 0 0 transparent;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  #logo {
+    transition: none;
+  }
+  #logo:hover {
+    transform: none;
+    animation: none;
+  }
 }
 
 .modal {
@@ -320,7 +667,7 @@ select {
   right: 0;
   bottom: 0;
   left: 0;
-  background-color: rgba(0, 0, 0, 0.2);
+  background-color: rgba(2, 6, 23, 0.35);
   z-index: 2147483646;
 
   &.open {
@@ -331,28 +678,18 @@ select {
 
   img {
     position: absolute;
-    background-color: #404a59;
+    background-color: var(--surface);
     max-width: 80vw;
-    border: 2px solid #fff;
-    border-radius: 3px;
-    box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
+    border: 1px solid var(--border);
+    border-radius: var(--r-s);
+    box-shadow: var(--shadow);
   }
 }
 
 @media (max-width: 980px) {
   p {
     select {
-      text-indent: calc(50% - 1em);
-    }
-
-    select,
-    label {
-      border: 1px solid #4fc08d;
-      border-radius: 2em;
-      background-color: #fff;
-      color: #42b983;
-      cursor: pointer;
-      transition: opacity 0.3s;
+      text-indent: calc(50% - 1rem);
     }
 
     button,
@@ -360,95 +697,57 @@ select {
     select,
     label {
       flex: 1 0;
-      margin: 0 0.5em;
-      padding: 0;
-      line-height: 2em;
+      margin: 0 0.5rem;
       max-width: 40vw;
-      border-radius: 0.5em;
-      font-size: 0.8em;
+      font-size: 0.8rem;
     }
 
     input[type="checkbox"] {
       display: none;
 
       &:checked + label {
-        background: #42b983;
-        color: #fff;
+        background: color-mix(in srgb, var(--accent) 30%, var(--surface) 70%);
+        border-color: color-mix(in srgb, var(--accent) 45%, var(--border) 55%);
+        color: var(--surface);
+      }
+
+      & + label {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0 0.75rem;
+        height: 2.25rem;
+        border: 1px solid var(--border);
+        border-radius: var(--r-m);
+        background: var(--surface);
+        transition:
+          background-color 0.15s ease,
+          color 0.15s ease,
+          border-color 0.15s ease;
       }
     }
   }
 }
 
-.actions {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 8px;
-}
-
-.renderer,
-.codegen {
-  button {
-    position: relative;
-    border-color: #36485e;
-    color: rgba(54, 72, 94, 0.8);
-    font-weight: 500;
-
-    &:focus-visible {
-      box-shadow: 0 0 1px #36485e;
-    }
-
-    &:active {
-      background: rgba(54, 72, 94, 0.2);
-    }
-  }
-}
-
-.renderer {
-  position: fixed;
-  top: 10px;
-  left: 10px;
-  font-size: 16px;
-
-  button {
-    width: 64px;
-
-    &.active {
-      z-index: 1;
-      background-color: #36485e;
-      color: #fff;
-    }
-
-    &:first-child {
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-    }
-
-    &:last-child {
-      left: -1px;
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
-    }
-  }
-}
-
-.codegen {
-  display: flex;
-  position: fixed;
-  top: 10px;
-  left: 146px;
-
-  button {
-    display: flex;
-    align-items: center;
-    padding: 0 4px;
-    gap: 4px;
-  }
-}
-
 @media (max-width: 480px) {
-  .codegen {
-    display: none;
+  body .codegen {
+    display: none !important;
   }
 }
+
+.site-footer {
+  margin: 4rem 0 1.25rem;
+  text-align: center;
+  color: var(--muted);
+}
+.site-footer a {
+  color: inherit;
+  text-decoration: none;
+}
+.site-footer .footer-links {
+  font-size: 0.85em;
+  display: inline-flex;
+  gap: 0.5rem;
+  align-items: center;
+}
 </style>
diff --git a/demo/assets/Vue-ECharts.svg b/demo/assets/Vue-ECharts.svg
deleted file mode 100644
index f5de0c5..0000000
--- a/demo/assets/Vue-ECharts.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 465 750">
-  <path fill="currentColor" d="M367.855,428.202c-3.674-1.385-7.452-1.966-11.146-1.794c0.659-2.922,0.844-5.85,0.58-8.719 c-0.937-10.407-7.663-19.864-18.063-23.834c-10.697-4.043-22.298-1.168-29.902,6.403c3.015,0.026,6.074,0.594,9.035,1.728 c13.626,5.151,20.465,20.379,15.32,34.004c-1.905,5.02-5.177,9.115-9.22,12.05c-6.951,4.992-16.19,6.536-24.777,3.271 c-13.625-5.137-20.471-20.371-15.32-34.004c0.673-1.768,1.523-3.423,2.526-4.992h-0.014c0,0,0,0,0,0.014 c4.386-6.853,8.145-14.279,11.146-22.187c23.294-61.505-7.689-130.278-69.215-153.579c-61.532-23.293-130.279,7.69-153.579,69.202 c-6.371,16.785-8.679,34.097-7.426,50.901c0.026,0.554,0.079,1.121,0.132,1.688c4.973,57.107,41.767,109.148,98.945,130.793 c58.162,22.008,121.303,6.529,162.839-34.465c7.103-6.893,17.826-9.444,27.679-5.719c11.858,4.491,18.565,16.6,16.719,28.643 c4.438-3.126,8.033-7.564,10.117-13.045C389.751,449.992,382.411,433.709,367.855,428.202z"/>
-</svg>
diff --git a/demo/components/MonacoCodeBlock.vue b/demo/components/MonacoCodeBlock.vue
new file mode 100644
index 0000000..aa4b340
--- /dev/null
+++ b/demo/components/MonacoCodeBlock.vue
@@ -0,0 +1,46 @@
+<template>
+  <!-- eslint-disable-next-line vue/no-v-html -->
+  <pre class="code-block" v-html="html"></pre>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref, watch } from "vue";
+import { monaco } from "../services/monaco";
+import { useDemoDark } from "../composables/useDemoDark";
+
+interface Props {
+  code: string;
+  language: "javascript" | "typescript";
+}
+
+const props = defineProps<Props>();
+const html = ref("");
+const isDark = useDemoDark();
+
+async function colorize() {
+  const theme = isDark.value ? "vs-dark" : "vs";
+  monaco.editor.setTheme(theme);
+  html.value = await monaco.editor.colorize(props.code, props.language, {
+    tabSize: 2,
+  });
+}
+
+onMounted(colorize);
+watch(() => props.code, colorize);
+watch(() => props.language, colorize);
+watch(isDark, colorize);
+</script>
+
+<style scoped>
+.code-block {
+  margin: 0;
+  padding: 12px;
+  font-size: 13px;
+  line-height: 1.4;
+  overflow: auto;
+  background: var(--surface);
+  color: var(--text);
+  font-family:
+    "Fira Code", "Fira Mono", Menlo, Consolas, "Liberation Mono", monospace;
+}
+</style>
diff --git a/demo/composables/useDemoDark.ts b/demo/composables/useDemoDark.ts
new file mode 100644
index 0000000..13b0285
--- /dev/null
+++ b/demo/composables/useDemoDark.ts
@@ -0,0 +1,10 @@
+import { useDark } from "@vueuse/core";
+
+export function useDemoDark() {
+  return useDark({
+    storageKey: "vue-echarts-demo-theme",
+    valueLight: "light",
+    valueDark: "dark",
+    disableTransition: false,
+  });
+}
diff --git a/demo/composables/useOptionAnalysis.ts b/demo/composables/useOptionAnalysis.ts
new file mode 100644
index 0000000..ec18099
--- /dev/null
+++ b/demo/composables/useOptionAnalysis.ts
@@ -0,0 +1,156 @@
+import { onBeforeUnmount, reactive, ref, watch } from "vue";
+import type { Ref } from "vue";
+import type { MonacoMarkerLike, MonacoSeverity } from "../services/monaco";
+import OptionWorker from "../workers/option.worker?worker";
+
+export interface AnalyzerDiagnostic extends MonacoMarkerLike {
+  severity: MonacoSeverity;
+}
+
+export interface AnalyzerIssueRange {
+  startLineNumber: number;
+  startColumn: number;
+  endLineNumber: number;
+  endColumn: number;
+}
+
+export type AnalyzerIssueKind = "syntax" | "runtime" | "format";
+
+export interface AnalyzerIssue {
+  kind: AnalyzerIssueKind;
+  severity: MonacoSeverity;
+  message: string;
+  hint?: string;
+  range?: AnalyzerIssueRange;
+}
+
+interface WorkerMessage {
+  id: number;
+  strategy: "expression" | "module";
+  diagnostics: AnalyzerDiagnostic[];
+  issues: AnalyzerIssue[];
+  output?: string;
+  option?: unknown;
+  runtimeError?: string;
+}
+
+interface WorkerRequest {
+  id: number;
+  code: string;
+}
+
+type AnalyzerStatus = "idle" | "analyzing" | "ready" | "error";
+
+export interface OptionAnalysisState {
+  status: AnalyzerStatus;
+  strategy: "expression" | "module";
+  diagnostics: AnalyzerDiagnostic[];
+  issues: AnalyzerIssue[];
+  runtimeError: string | null;
+  option: unknown;
+  output: string | null;
+  hasBlockingIssue: boolean;
+}
+
+export interface UseOptionAnalysisResult {
+  code: Ref<string>;
+  state: OptionAnalysisState;
+  updateSource(code: string): void;
+  dispose(): void;
+}
+
+const ANALYZE_DELAY = 120;
+
+export function useOptionAnalysis(
+  initialCode: string,
+): UseOptionAnalysisResult {
+  const isBrowser = typeof window !== "undefined";
+  const worker = isBrowser ? new OptionWorker() : null;
+  const code = ref(initialCode);
+  const state = reactive<OptionAnalysisState>({
+    status: "idle",
+    strategy: "expression",
+    diagnostics: [],
+    issues: [],
+    runtimeError: null,
+    option: null,
+    output: null,
+    hasBlockingIssue: false,
+  });
+
+  let requestId = 0;
+  let latestRequest = 0;
+  let timer: number | null = null;
+
+  const postWork = (source: string) => {
+    if (!worker || !isBrowser) {
+      return;
+    }
+    if (timer !== null) {
+      window.clearTimeout(timer);
+    }
+    timer = window.setTimeout(() => {
+      state.status = "analyzing";
+      state.issues = [];
+      state.hasBlockingIssue = false;
+      state.runtimeError = null;
+      requestId += 1;
+      latestRequest = requestId;
+      const payload: WorkerRequest = { id: requestId, code: source };
+      worker.postMessage(payload);
+    }, ANALYZE_DELAY);
+  };
+
+  const handleMessage = (event: MessageEvent<WorkerMessage>) => {
+    const { id, diagnostics, issues, option, output, runtimeError, strategy } =
+      event.data;
+    if (id !== latestRequest) {
+      return;
+    }
+
+    state.strategy = strategy;
+    state.diagnostics = diagnostics;
+    state.issues = issues;
+    state.hasBlockingIssue = issues.some((item) => item.severity === "error");
+    state.output = output ?? null;
+    state.option = state.hasBlockingIssue ? null : (option ?? null);
+    state.runtimeError = runtimeError ?? null;
+    state.status = state.hasBlockingIssue ? "error" : "ready";
+  };
+
+  if (worker) {
+    worker.addEventListener("message", handleMessage);
+  }
+
+  const stop = () => {
+    if (timer !== null) {
+      window.clearTimeout(timer);
+      timer = null;
+    }
+    if (worker) {
+      worker.removeEventListener("message", handleMessage);
+      worker.terminate();
+    }
+  };
+
+  onBeforeUnmount(stop);
+
+  if (worker && isBrowser) {
+    watch(
+      code,
+      (value) => {
+        postWork(value);
+      },
+      { immediate: true },
+    );
+  }
+
+  return {
+    code,
+    state,
+    updateSource(next) {
+      code.value = next;
+    },
+    dispose: stop,
+  };
+}
diff --git a/demo/constants.ts b/demo/constants.ts
new file mode 100644
index 0000000..0b6b274
--- /dev/null
+++ b/demo/constants.ts
@@ -0,0 +1,7 @@
+export const DEMO_FONT_FAMILY =
+  'Manrope, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"';
+
+export const DEMO_TEXT_STYLE: { fontFamily: string; fontWeight: number } = {
+  fontFamily: DEMO_FONT_FAMILY,
+  fontWeight: 400,
+};
diff --git a/demo/data/bar.js b/demo/data/bar.ts
similarity index 73%
rename from demo/data/bar.js
rename to demo/data/bar.ts
index d3f6b2b..51d49ac 100644
--- a/demo/data/bar.js
+++ b/demo/data/bar.ts
@@ -1,13 +1,13 @@
-function random() {
+import type { Option } from "../../src/types";
+import { DEMO_TEXT_STYLE } from "../constants";
+
+function random(): number {
   return Math.round(300 + Math.random() * 700) / 10;
 }
 
-export default function getData() {
-  return {
-    textStyle: {
-      fontFamily: 'Inter, "Helvetica Neue", Arial, sans-serif',
-      fontWeight: 300,
-    },
+export default function getData(): Option {
+  const option = {
+    textStyle: { ...DEMO_TEXT_STYLE },
     dataset: {
       dimensions: ["Product", "2015", "2016", "2017"],
       source: [
@@ -39,8 +39,8 @@ export default function getData() {
     },
     xAxis: { type: "category" },
     yAxis: {},
-    // Declare several bar series, each will be mapped
-    // to a column of dataset.source by default.
     series: [{ type: "bar" }, { type: "bar" }, { type: "bar" }],
-  };
+  } satisfies Option;
+
+  return option;
 }
diff --git a/demo/data/connect.js b/demo/data/connect.js
deleted file mode 100644
index abf53b6..0000000
--- a/demo/data/connect.js
+++ /dev/null
@@ -1,121 +0,0 @@
-const data1 = [];
-const symbolCount = 6;
-for (let i = 0; i < 16; i++) {
-  data1.push([
-    Math.random() * 5,
-    Math.random() * 4,
-    Math.random() * 12,
-    Math.round(Math.random() * (symbolCount - 1)),
-  ]);
-}
-
-const c1 = {
-  textStyle: {
-    fontFamily: 'Inter, "Helvetica Neue", Arial, sans-serif',
-    fontWeight: 300,
-  },
-  legend: {
-    top: "3%",
-    data: ["scatter"],
-  },
-  tooltip: {
-    formatter: "{c}",
-  },
-  grid: {
-    top: "30%",
-    right: "18%",
-    bottom: "20%",
-  },
-  xAxis: {
-    type: "value",
-    splitLine: {
-      show: false,
-    },
-  },
-  yAxis: {
-    type: "value",
-    splitLine: {
-      show: false,
-    },
-  },
-  visualMap: [
-    {
-      realtime: false,
-      right: "2%",
-      bottom: "3%",
-      selectedMode: "multiple",
-      dimension: 2,
-      selected: [],
-      min: 0,
-      max: 18,
-      precision: 0,
-      splitNumber: 0,
-      calculable: true,
-    },
-  ],
-  series: [
-    {
-      name: "scatter",
-      type: "scatter",
-      symbolSize: 30,
-      data: data1,
-    },
-  ],
-};
-
-const c2 = {
-  textStyle: {
-    fontFamily: 'Inter, "Helvetica Neue", Arial, sans-serif',
-    fontWeight: 300,
-  },
-  legend: {
-    top: "3%",
-    data: ["scatter"],
-  },
-  tooltip: {
-    formatter: "{c}",
-  },
-  grid: {
-    top: "30%",
-    right: "18%",
-    bottom: "20%",
-  },
-  xAxis: {
-    type: "value",
-    splitLine: {
-      show: false,
-    },
-  },
-  yAxis: {
-    type: "value",
-    splitLine: {
-      show: false,
-    },
-  },
-  visualMap: [
-    {
-      right: "2%",
-      bottom: "3%",
-      selectedMode: "multiple",
-      dimension: 2,
-      selected: [],
-      min: 0,
-      max: 18,
-      precision: 0,
-      splitNumber: 0,
-      calculable: true,
-    },
-  ],
-  series: [
-    {
-      name: "scatter",
-      type: "scatter",
-      symbolSize: 30,
-      data: data1,
-    },
-  ],
-};
-
-export default function getData() {
-  return [c1, c2];
-}
diff --git a/demo/data/connect.ts b/demo/data/connect.ts
new file mode 100644
index 0000000..50415c9
--- /dev/null
+++ b/demo/data/connect.ts
@@ -0,0 +1,78 @@
+import type { Option } from "../../src/types";
+import { DEMO_TEXT_STYLE } from "../constants";
+
+const POINT_COUNT = 16;
+const SYMBOL_COUNT = 6;
+
+function createScatterData(): Array<[number, number, number, number]> {
+  return Array.from({ length: POINT_COUNT }, () => [
+    Math.random() * 5,
+    Math.random() * 4,
+    Math.random() * 12,
+    Math.round(Math.random() * (SYMBOL_COUNT - 1)),
+  ]);
+}
+
+const BASE_DATA = createScatterData();
+
+function createOption(data: Array<[number, number, number, number]>): Option {
+  return {
+    textStyle: { ...DEMO_TEXT_STYLE },
+    legend: {
+      top: "3%",
+      data: ["scatter"],
+    },
+    tooltip: {
+      formatter: "{c}",
+    },
+    grid: {
+      top: "30%",
+      right: "18%",
+      bottom: "20%",
+    },
+    xAxis: {
+      type: "value",
+      splitLine: {
+        show: false,
+      },
+    },
+    yAxis: {
+      type: "value",
+      splitLine: {
+        show: false,
+      },
+    },
+    visualMap: [
+      {
+        realtime: false,
+        right: "2%",
+        bottom: "3%",
+        selectedMode: "multiple",
+        dimension: 2,
+        selected: [],
+        min: 0,
+        max: 18,
+        precision: 0,
+        splitNumber: 0,
+        calculable: true,
+      },
+    ],
+    series: [
+      {
+        name: "scatter",
+        type: "scatter",
+        symbolSize: 30,
+        data,
+      },
+    ],
+  } satisfies Option;
+}
+
+export default function getData(): [Option, Option] {
+  const options: [Option, Option] = [
+    createOption(BASE_DATA),
+    createOption(BASE_DATA),
+  ];
+
+  return options;
+}
diff --git a/demo/data/line.js b/demo/data/line.js
deleted file mode 100644
index 35f1601..0000000
--- a/demo/data/line.js
+++ /dev/null
@@ -1,56 +0,0 @@
-export default function getData() {
-  return {
-    textStyle: {
-      fontFamily: 'Inter, "Helvetica Neue", Arial, sans-serif',
-      fontWeight: 300,
-    },
-    legend: { top: 20 },
-    tooltip: {
-      trigger: "axis",
-    },
-    dataset: {
-      source: [
-        ["product", "2012", "2013", "2014", "2015", "2016", "2017"],
-        ["Milk Tea", 56.5, 82.1, 88.7, 70.1, 53.4, 85.1],
-        ["Matcha Latte", 51.1, 51.4, 55.1, 53.3, 73.8, 68.7],
-        ["Cheese Cocoa", 40.1, 62.2, 69.5, 36.4, 45.2, 32.5],
-        ["Walnut Brownie", 25.2, 37.1, 41.2, 18, 33.9, 49.1],
-      ],
-    },
-    xAxis: {
-      type: "category",
-      triggerEvent: true,
-      tooltip: { show: true, formatter: "" },
-    },
-    yAxis: {
-      triggerEvent: true,
-      tooltip: { show: true, formatter: "" },
-    },
-    series: [
-      {
-        type: "line",
-        smooth: true,
-        seriesLayoutBy: "row",
-        emphasis: { focus: "series" },
-      },
-      {
-        type: "line",
-        smooth: true,
-        seriesLayoutBy: "row",
-        emphasis: { focus: "series" },
-      },
-      {
-        type: "line",
-        smooth: true,
-        seriesLayoutBy: "row",
-        emphasis: { focus: "series" },
-      },
-      {
-        type: "line",
-        smooth: true,
-        seriesLayoutBy: "row",
-        emphasis: { focus: "series" },
-      },
-    ],
-  };
-}
diff --git a/demo/data/line.ts b/demo/data/line.ts
new file mode 100644
index 0000000..1310891
--- /dev/null
+++ b/demo/data/line.ts
@@ -0,0 +1,38 @@
+import type { Option } from "../../src/types";
+import { DEMO_TEXT_STYLE } from "../constants";
+
+export default function getData(): Option {
+  const option = {
+    textStyle: { ...DEMO_TEXT_STYLE },
+    legend: { top: 20 },
+    tooltip: {
+      trigger: "axis",
+    },
+    dataset: {
+      source: [
+        ["product", "2012", "2013", "2014", "2015", "2016", "2017"],
+        ["Milk Tea", 56.5, 82.1, 88.7, 70.1, 53.4, 85.1],
+        ["Matcha Latte", 51.1, 51.4, 55.1, 53.3, 73.8, 68.7],
+        ["Cheese Cocoa", 40.1, 62.2, 69.5, 36.4, 45.2, 32.5],
+        ["Walnut Brownie", 25.2, 37.1, 41.2, 18, 33.9, 49.1],
+      ],
+    },
+    xAxis: {
+      type: "category",
+      triggerEvent: true,
+      tooltip: { show: true },
+    },
+    yAxis: {
+      triggerEvent: true,
+      tooltip: { show: true },
+    },
+    series: Array.from({ length: 4 }, () => ({
+      type: "line",
+      smooth: true,
+      seriesLayoutBy: "row" as const,
+      emphasis: { focus: "series" as const },
+    })),
+  } satisfies Option;
+
+  return option;
+}
diff --git a/demo/data/logo.js b/demo/data/logo.js
deleted file mode 100644
index 017578b..0000000
--- a/demo/data/logo.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import logo from "../assets/Vue-ECharts.svg?raw";
-
-const d = logo.match(/\bd="([^"]+)"/)[1];
-
-export default {
-  series: [
-    {
-      type: "liquidFill",
-      data: [0.7, 0.6, 0.55, 0.45],
-      amplitude: 6,
-      outline: {
-        show: false,
-      },
-      radius: "60%",
-      color: ["#4fc08d", "#44d64a", "#33c762", "#4acc80"],
-      backgroundStyle: {
-        color: "#fff",
-        borderColor: "#2c3e50",
-        borderWidth: 1,
-      },
-      shape: `path://${d}`,
-      label: {
-        formatter() {
-          return "";
-        },
-      },
-      itemStyle: {
-        shadowBlur: 12,
-        shadowColor: "rgba(0, 0, 0, 0.25)",
-      },
-    },
-  ],
-};
diff --git a/demo/data/map.js b/demo/data/map.ts
similarity index 91%
rename from demo/data/map.js
rename to demo/data/map.ts
index 66f2e9f..c8b2621 100644
--- a/demo/data/map.js
+++ b/demo/data/map.ts
@@ -1,4 +1,14 @@
-const data = [
+import type { Option } from "../../src/types";
+import { DEMO_TEXT_STYLE } from "../constants";
+
+interface CityDatum {
+  name: string;
+  value: number;
+}
+
+type ScatterPoint = { name: string; value: [number, number, number] };
+
+const cityData: CityDatum[] = [
   { name: "海门", value: 9 },
   { name: "鄂尔多斯", value: 12 },
   { name: "招远", value: 12 },
@@ -190,7 +200,7 @@ const data = [
   { name: "武汉", value: 273 },
   { name: "大庆", value: 279 },
 ];
-const geoCoordMap = {
+const geoCoordMap: Record<string, [number, number]> = {
   海门: [121.15, 31.89],
   鄂尔多斯: [109.781327, 39.608266],
   招远: [120.38, 37.35],
@@ -383,26 +393,28 @@ const geoCoordMap = {
   大庆: [125.03, 46.58],
 };
 
-function convertData(data) {
-  const res = [];
-  for (let i = 0; i < data.length; i++) {
-    const geoCoord = geoCoordMap[data[i].name];
-    if (geoCoord) {
-      res.push({
-        name: data[i].name,
-        value: geoCoord.concat(data[i].value),
-      });
+function convertData(list: CityDatum[]): ScatterPoint[] {
+  const points: ScatterPoint[] = [];
+  for (const item of list) {
+    const geoCoord = geoCoordMap[item.name];
+    if (!geoCoord) {
+      continue;
     }
+    points.push({
+      name: item.name,
+      value: [geoCoord[0], geoCoord[1], item.value],
+    });
   }
-  return res;
+  return points;
 }
 
-export default function getData() {
-  return {
-    textStyle: {
-      fontFamily: 'Inter, "Helvetica Neue", Arial, sans-serif',
-      fontWeight: 300,
-    },
+export default function getData(): Option {
+  const sortedTopFive = [...cityData]
+    .sort((a, b) => b.value - a.value)
+    .slice(0, 6);
+
+  const option = {
+    textStyle: { ...DEMO_TEXT_STYLE },
     backgroundColor: "#404a59",
     title: {
       text: "Air quality of major cities in China",
@@ -448,11 +460,11 @@ export default function getData() {
         name: "PM2.5",
         type: "scatter",
         coordinateSystem: "geo",
-        data: convertData(data),
-        symbolSize: (val) => val[2] / 10,
+        data: convertData(cityData),
+        symbolSize: (val: [number, number, number]) => val[2] / 10,
         tooltip: {
-          formatter: function (val) {
-            return val.name + ": " + val.value[2];
+          formatter(value: ScatterPoint) {
+            return `${value.name}: ${value.value[2]}`;
           },
         },
         itemStyle: {
@@ -463,8 +475,8 @@ export default function getData() {
         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,
+        data: convertData(sortedTopFive),
+        symbolSize: (val: [number, number, number]) => val[2] / 10,
         showEffectOn: "render",
         rippleEffect: {
           brushType: "stroke",
@@ -473,8 +485,8 @@ export default function getData() {
           scale: true,
         },
         tooltip: {
-          formatter: function (val) {
-            return val.name + ": " + val.value[2];
+          formatter(value: ScatterPoint) {
+            return `${value.name}: ${value.value[2]}`;
           },
         },
         label: {
@@ -490,5 +502,7 @@ export default function getData() {
         zlevel: 1,
       },
     ],
-  };
+  } satisfies Option;
+
+  return option;
 }
diff --git a/demo/data/pie.js b/demo/data/pie.ts
similarity index 68%
rename from demo/data/pie.js
rename to demo/data/pie.ts
index a0088d3..dae04a4 100644
--- a/demo/data/pie.js
+++ b/demo/data/pie.ts
@@ -1,9 +1,9 @@
-export default function getData() {
-  return {
-    textStyle: {
-      fontFamily: 'Inter, "Helvetica Neue", Arial, sans-serif',
-      fontWeight: 300,
-    },
+import type { Option } from "../../src/types";
+import { DEMO_TEXT_STYLE } from "../constants";
+
+export default function getData(): Option {
+  const option = {
+    textStyle: { ...DEMO_TEXT_STYLE },
     title: {
       text: "Traffic Sources",
       top: "5%",
@@ -32,14 +32,9 @@ export default function getData() {
           { value: 135, name: "Video Ads" },
           { value: 1548, name: "Search Engines" },
         ],
-        emphasis: {
-          itemStyle: {
-            shadowBlur: 10,
-            shadowOffsetX: 0,
-            shadowColor: "rgba(0, 0, 0, 0.5)",
-          },
-        },
       },
     ],
-  };
+  } satisfies Option;
+
+  return option;
 }
diff --git a/demo/data/polar.js b/demo/data/polar.ts
similarity index 65%
rename from demo/data/polar.js
rename to demo/data/polar.ts
index 2cd6ec1..abc7f98 100644
--- a/demo/data/polar.js
+++ b/demo/data/polar.ts
@@ -1,17 +1,17 @@
-const data = [];
+import type { Option } from "../../src/types";
+import { DEMO_TEXT_STYLE } from "../constants";
 
-for (let i = 0; i <= 360; i++) {
+const points: Array<[number, number]> = [];
+
+for (let i = 0; i <= 360; i += 1) {
   const t = (i / 180) * Math.PI;
   const r = Math.sin(2 * t) * Math.cos(2 * t);
-  data.push([r, i]);
+  points.push([r, i]);
 }
 
-export default function getData() {
-  return {
-    textStyle: {
-      fontFamily: 'Inter, "Helvetica Neue", Arial, sans-serif',
-      fontWeight: 300,
-    },
+export default function getData(): Option {
+  const option = {
+    textStyle: { ...DEMO_TEXT_STYLE },
     title: {
       text: "Dual Numeric Axis",
       top: "5%",
@@ -44,9 +44,11 @@ export default function getData() {
         name: "line",
         type: "line",
         showSymbol: false,
-        data: data,
+        data: points,
       },
     ],
     animationDuration: 2000,
-  };
+  } satisfies Option;
+
+  return option;
 }
diff --git a/demo/data/radar.ts b/demo/data/radar.ts
index 6cd8bea..972729b 100644
--- a/demo/data/radar.ts
+++ b/demo/data/radar.ts
@@ -1,8 +1,16 @@
 import { ref, computed } from "vue";
 import { defineStore } from "pinia";
+import type { Option } from "../../src/types";
+import { DEMO_TEXT_STYLE } from "../constants";
+
+interface Score {
+  name: string;
+  max: number;
+  value: number;
+}
 
 export const useScoreStore = defineStore("store", () => {
-  const scores = ref([
+  const scores = ref<Score[]>([
     { name: "Attack", max: 20, value: 19 },
     { name: "Defense", max: 20, value: 9 },
     { name: "Speed", max: 20, value: 18 },
@@ -11,29 +19,23 @@ export const useScoreStore = defineStore("store", () => {
     { name: "Agility", max: 20, value: 20 },
   ]);
 
-  const metrics = computed(() => {
-    return scores.value.map(({ name }) => name);
-  });
+  const metrics = computed(() => scores.value.map(({ name }) => name));
 
-  function getRadarData(activeIndex: number) {
-    return {
+  function getRadarData(activeIndex: number): Option {
+    const option = {
       title: {
         text: "Player Ability",
         top: "5%",
         left: "5%",
       },
-      textStyle: {
-        fontFamily: 'Inter, "Helvetica Neue", Arial, sans-serif',
-        fontWeight: 300,
-      },
+      textStyle: { ...DEMO_TEXT_STYLE },
       radar: {
         splitNumber: 4,
-        indicator: scores.value.map(({ name, max }, index) => {
-          if (index === activeIndex) {
-            return { name, max, color: "goldenrod" };
-          }
-          return { name, max };
-        }),
+        indicator: scores.value.map(({ name, max }, index) =>
+          index === activeIndex
+            ? { name, max, color: "goldenrod" }
+            : { name, max },
+        ),
       },
       series: [
         {
@@ -42,21 +44,28 @@ export const useScoreStore = defineStore("store", () => {
           data: [{ value: scores.value.map(({ value }) => value) }],
         },
       ],
-    };
+    } satisfies Option;
+
+    return option;
   }
 
-  function increase(index: number, amount: number) {
+  function increase(index: number, amount: number): void {
     const metric = scores.value[index];
-    metric.value = Math.max(Math.min(metric.value + amount, metric.max), 0);
+    if (!metric) {
+      return;
+    }
+    const next = Math.max(Math.min(metric.value + amount, metric.max), 0);
+    metric.value = next;
   }
 
-  function isMax(index: number) {
-    const { value, max } = scores.value[index];
-    return value === max;
+  function isMax(index: number): boolean {
+    const metric = scores.value[index];
+    return metric ? metric.value === metric.max : false;
   }
 
-  function isMin(index: number) {
-    return scores.value[index].value === 0;
+  function isMin(index: number): boolean {
+    const metric = scores.value[index];
+    return metric ? metric.value === 0 : false;
   }
 
   return {
diff --git a/demo/data/scatter.js b/demo/data/scatter.ts
similarity index 57%
rename from demo/data/scatter.js
rename to demo/data/scatter.ts
index b82dfd9..d5260cb 100644
--- a/demo/data/scatter.js
+++ b/demo/data/scatter.ts
@@ -1,7 +1,35 @@
 import { graphic } from "echarts/core";
+import type { Option } from "../../src/types";
+import { DEMO_TEXT_STYLE } from "../constants";
 
-const data = [
-  [
+type ScatterDatum = [number, number, number, string, number];
+
+type ScatterDataset = ScatterDatum[];
+
+type SeriesColor = {
+  shadowColor: string;
+  gradient: graphic.RadialGradient;
+};
+
+const SERIES_CONFIG: Record<string, SeriesColor> = {
+  "1990": {
+    shadowColor: "rgba(120, 36, 50, 0.5)",
+    gradient: new graphic.RadialGradient(0.4, 0.3, 1, [
+      { offset: 0, color: "rgb(251, 118, 123)" },
+      { offset: 1, color: "rgb(204, 46, 72)" },
+    ]),
+  },
+  "2015": {
+    shadowColor: "rgba(25, 100, 150, 0.5)",
+    gradient: new graphic.RadialGradient(0.4, 0.3, 1, [
+      { offset: 0, color: "rgb(129, 227, 238)" },
+      { offset: 1, color: "rgb(25, 183, 207)" },
+    ]),
+  },
+};
+
+const dataset: Record<string, ScatterDataset> = {
+  "1990": [
     [28604, 77, 17096869, "Australia", 1990],
     [31163, 77.4, 27662440, "Canada", 1990],
     [1516, 68, 1154605773, "China", 1990],
@@ -22,7 +50,7 @@ const data = [
     [26424, 75.7, 57110117, "United Kingdom", 1990],
     [37062, 75.4, 252847810, "United States", 1990],
   ],
-  [
+  "2015": [
     [44056, 81.8, 23968973, "Australia", 2015],
     [43294, 81.7, 35939927, "Canada", 2015],
     [13334, 76.9, 1376048943, "China", 2015],
@@ -43,17 +71,41 @@ const data = [
     [38225, 81.4, 64715810, "United Kingdom", 2015],
     [53354, 79.1, 321773631, "United States", 2015],
   ],
-];
+};
 
-export default function getData() {
-  return {
+export default function getData(): Option {
+  const series = Object.entries(dataset).map(([year, data]) => {
+    const colors = SERIES_CONFIG[year];
+    return {
+      name: year,
+      data,
+      type: "scatter" as const,
+      symbolSize(value: ScatterDatum) {
+        return Math.sqrt(value[2]) / 5e2;
+      },
+      emphasis: {
+        label: {
+          show: true,
+          formatter({ data: datum }: { data: ScatterDatum }) {
+            return datum[3];
+          },
+          position: "top",
+        },
+      },
+      itemStyle: {
+        shadowBlur: 10,
+        shadowColor: colors.shadowColor,
+        shadowOffsetY: 5,
+        color: colors.gradient,
+      },
+    };
+  });
+
+  const option = {
     grid: {
       top: "25%",
     },
-    textStyle: {
-      fontFamily: 'Inter, "Helvetica Neue", Arial, sans-serif',
-      fontWeight: 300,
-    },
+    textStyle: { ...DEMO_TEXT_STYLE },
     title: {
       text: "Life Expectancy vs. GDP by country",
       top: "5%",
@@ -62,7 +114,7 @@ export default function getData() {
     legend: {
       top: "6%",
       right: "5%",
-      data: ["1990", "2015"],
+      data: Object.keys(dataset),
     },
     xAxis: {
       splitLine: {
@@ -79,71 +131,8 @@ export default function getData() {
       },
       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",
-          },
-        },
-        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)",
-            },
-          ]),
-        },
-      },
-      {
-        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)",
-            },
-          ]),
-        },
-      },
-    ],
-  };
+    series,
+  } satisfies Option;
+
+  return option;
 }
diff --git a/demo/examples/BarChart.vue b/demo/examples/BarChart.vue
index 8fd42ab..7c93c00 100644
--- a/demo/examples/BarChart.vue
+++ b/demo/examples/BarChart.vue
@@ -1,62 +1,70 @@
-<script setup>
+<script setup lang="ts">
 import { use, registerTheme } from "echarts/core";
 import { BarChart } from "echarts/charts";
 import { GridComponent, DatasetComponent } from "echarts/components";
-import { shallowRef, onBeforeUnmount } from "vue";
+import { shallowRef, computed } from "vue";
+import { useIntervalFn } from "@vueuse/core";
+import type { LoadingOptions } from "../../src/types";
 import VChart from "../../src/ECharts";
 import VExample from "./Example.vue";
 import getData from "../data/bar";
 import theme from "../theme.json";
+import darkTheme from "../theme-dark.json";
+import { useDemoDark } from "../composables/useDemoDark";
 
 use([BarChart, DatasetComponent, GridComponent]);
 registerTheme("ovilia-green", theme);
+registerTheme("ovilia-green-dark", darkTheme);
 
 const seconds = shallowRef(0);
 const loading = shallowRef(false);
-const loadingOptions = {
-  text: "Loading…",
-  color: "#4ea397",
-  maskColor: "rgba(255, 255, 255, 0.4)",
-};
+const isDark = useDemoDark();
+const loadingOptions = computed(
+  () =>
+    ({
+      text: "Loading…",
+      textColor: isDark.value ? "#e5e7eb" : "#111827",
+      color: "#42b883",
+      maskColor: isDark.value
+        ? "rgba(0, 0, 0, 0.45)"
+        : "rgba(255, 255, 255, 0.5)",
+    }) satisfies LoadingOptions,
+);
 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();
-  }
-}
+const { pause, resume } = useIntervalFn(
+  () => {
+    if (seconds.value <= 0) {
+      pause();
+      return;
+    }
+    seconds.value -= 1;
+    if (seconds.value === 0) {
+      loading.value = false;
+      option.value = getData();
+      pause();
+    }
+  },
+  1000,
+  { immediate: false },
+);
 
 function refresh() {
-  // simulating async data from server
   seconds.value = 3;
   loading.value = true;
-
-  timer = setInterval(tick, 1000);
+  pause();
+  resume();
 }
 </script>
 
 <template>
-  <v-example
-    id="bar"
-    title="Bar chart"
-    desc="(with async data &amp; custom theme)"
-  >
-    <v-chart
+  <VExample id="bar" title="Bar chart" desc="async data · custom theme">
+    <VChart
       :option="option"
-      theme="ovilia-green"
       autoresize
+      :theme="isDark ? 'ovilia-green-dark' : 'ovilia-green'"
       :loading="loading"
-      :loadingOptions="loadingOptions"
+      :loading-options="loadingOptions"
     />
     <template #extra>
       <p v-if="seconds <= 0">
@@ -70,8 +78,8 @@ function refresh() {
         </small>
       </p>
       <p class="actions">
-        <button @click="refresh" :disabled="seconds > 0">Refresh</button>
+        <button :disabled="seconds > 0" @click="refresh">Refresh</button>
       </p>
     </template>
-  </v-example>
+  </VExample>
 </template>
diff --git a/demo/examples/ConnectChart.vue b/demo/examples/ConnectChart.vue
index 14b8f36..a7c9893 100644
--- a/demo/examples/ConnectChart.vue
+++ b/demo/examples/ConnectChart.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import { use, connect, disconnect } from "echarts/core";
 import { ScatterChart } from "echarts/charts";
 import {
@@ -7,7 +7,8 @@ import {
   VisualMapComponent,
   TooltipComponent,
 } from "echarts/components";
-import { shallowRef, watch } from "vue";
+import { shallowRef, watchEffect } from "vue";
+import type { Option } from "../../src/types";
 import VChart from "../../src/ECharts";
 import VExample from "./Example.vue";
 import getData from "../data/connect";
@@ -20,35 +21,36 @@ use([
   TooltipComponent,
 ]);
 
-const [c1, c2] = getData().map(shallowRef);
+const [firstOption, secondOption] = getData();
+const c1 = shallowRef<Option>(firstOption);
+const c2 = shallowRef<Option>(secondOption);
 const connected = shallowRef(true);
 
-watch(
-  connected,
-  (value) => {
-    if (value) {
-      connect("radiance");
-    } else {
+watchEffect((onCleanup) => {
+  if (connected.value) {
+    connect("radiance");
+    onCleanup(() => {
       disconnect("radiance");
-    }
-  },
-  { immediate: true },
-);
+    });
+    return;
+  }
+  disconnect("radiance");
+});
 </script>
 
 <template>
-  <v-example id="connect" title="Connectable charts" split>
+  <VExample id="connect" title="Connectable charts" split>
     <template #start>
-      <v-chart :option="c1" group="radiance" autoresize />
+      <VChart :option="c1" group="radiance" autoresize />
     </template>
     <template #end>
-      <v-chart :option="c2" group="radiance" autoresize />
+      <VChart :option="c2" group="radiance" autoresize />
     </template>
     <template #extra>
       <p class="actions">
-        <input id="connected-check" type="checkbox" v-model="connected" />
+        <input id="connected-check" v-model="connected" type="checkbox" />
         <label for="connected-check">Connected</label>
       </p>
     </template>
-  </v-example>
+  </VExample>
 </template>
diff --git a/demo/examples/Example.vue b/demo/examples/Example.vue
index 3e36779..f6ad5c3 100644
--- a/demo/examples/Example.vue
+++ b/demo/examples/Example.vue
@@ -1,15 +1,49 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+interface ExampleProps {
+  id: string;
+  title: string;
+  desc?: string | string[];
+  split?: boolean;
+}
+
+const props = defineProps<ExampleProps>();
+
+const badges = computed<string[]>(() => {
+  const { desc } = props;
+  if (!desc) {
+    return [];
+  }
+  if (Array.isArray(desc)) {
+    return desc.map((value) => value.trim()).filter(Boolean);
+  }
+
+  let text = desc.trim();
+  const wrapped = text.match(/^\s*\((.*)\)\s*$/);
+  if (wrapped) {
+    text = wrapped[1];
+  }
+
+  return text
+    .split(/\s*·\s*|\s*,\s*|\s*&\s*|\s+and\s+/i)
+    .map((part) => part.trim())
+    .filter(Boolean);
+});
+</script>
+
 <template>
   <h3 :id="id">
-    <a :href="`#${id}`">
-      {{ title }}
-      <small v-if="desc">{{ desc }}</small>
-    </a>
+    <a :href="`#${id}`">{{ title }}</a>
   </h3>
+  <div v-if="badges.length" class="badges">
+    <span v-for="(b, i) in badges" :key="i" class="badge">{{ b }}</span>
+  </div>
   <section>
-    <figure class="fig hero" v-if="!split">
+    <figure v-if="!split" class="fig hero">
       <slot />
     </figure>
-    <div class="split" v-else>
+    <div v-else class="split">
       <figure class="fig half">
         <slot name="start" />
       </figure>
@@ -21,38 +55,57 @@
   </section>
 </template>
 
-<script setup>
-defineProps({
-  id: {
-    type: String,
-    required: true,
-  },
-  title: {
-    type: String,
-    required: true,
-  },
-  desc: String,
-  split: Boolean,
-});
-</script>
-
 <style>
 .fig {
   display: flex;
   justify-content: center;
   width: fit-content;
-  margin: 2em auto;
+  margin: 2rem auto;
 
-  > .echarts {
-    width: calc(60vw + 4em);
+  & > .echarts {
+    width: min(calc(64vw + 4rem), 980px);
     height: 360px;
-    max-width: 720px;
-    border: 1px solid rgba(0, 0, 0, 0.1);
-    border-radius: 8px;
-    box-shadow: 0 0 45px rgba(0, 0, 0, 0.2);
+    max-width: 980px;
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: var(--r-l);
+    box-shadow: none;
   }
 }
 
+.badges {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 0.5rem;
+}
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 0.26rem 0.72rem;
+  font-weight: 500;
+  font-size: 0.78rem;
+  line-height: 1;
+  color: var(--text);
+  background: color-mix(in srgb, var(--accent) 8%, var(--surface-2) 70%);
+  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border) 60%);
+  border-radius: 999px;
+  white-space: nowrap;
+}
+
+.badge::before {
+  content: "#";
+  display: inline-block;
+  font-weight: 700;
+  font-size: 0.95rem;
+  line-height: 1;
+  color: var(--accent);
+}
+
 .split {
   display: flex;
   justify-content: center;
@@ -63,15 +116,23 @@ defineProps({
   }
 }
 
+.actions {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  margin-top: 0.5rem;
+}
+
 @media (max-width: 980px) {
   .fig {
-    width: 100vw;
-    margin: 1em auto;
+    width: 100%;
+    margin: 1rem auto;
 
     .echarts {
       width: 100%;
       min-width: 0;
-      height: 60vw;
+      height: 64vw;
       border: none;
       border-radius: 0;
       box-shadow: none;
@@ -82,8 +143,8 @@ defineProps({
 @media (min-width: 980px) {
   .fig.half {
     .echarts {
-      width: 28vw;
-      min-width: 240px;
+      width: 32vw;
+      min-width: 280px;
       height: 180px;
     }
 
diff --git a/demo/examples/GeoChart.vue b/demo/examples/GeoChart.vue
index 9c1c63a..8211b42 100644
--- a/demo/examples/GeoChart.vue
+++ b/demo/examples/GeoChart.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import { use, registerMap } from "echarts/core";
 import { ScatterChart, EffectScatterChart } from "echarts/charts";
 import {
@@ -12,6 +12,7 @@ import VChart from "../../src/ECharts";
 import VExample from "./Example.vue";
 import getData from "../data/map";
 import chinaMap from "../data/china.json";
+import { isGeoJSONSource } from "../utils/geo";
 
 use([
   ScatterChart,
@@ -22,29 +23,42 @@ use([
   TooltipComponent,
 ]);
 
-registerMap("china", chinaMap);
+const chinaGeoJSON = isGeoJSONSource(chinaMap) ? chinaMap : null;
+
+if (chinaGeoJSON) {
+  registerMap("china", chinaGeoJSON);
+}
+
+type ChartInstance = InstanceType<typeof VChart>;
+
+interface Snapshot {
+  src: string;
+  width: number;
+  height: number;
+}
 
 const option = shallowRef(getData());
-const map = shallowRef(null);
-const open = shallowRef(false);
+const map = shallowRef<ChartInstance | null>(null);
+const isModalOpen = shallowRef(false);
+const snapshot = shallowRef<Snapshot | null>(null);
 
-let img = null;
-
-function convert() {
-  img = {
-    src: map.value.getDataURL({
-      pixelRatio: window.devicePixelRatio || 1,
-    }),
-    width: map.value.getWidth(),
-    height: map.value.getHeight(),
+function convert(): void {
+  const chart = map.value;
+  if (!chart) {
+    return;
+  }
+  snapshot.value = {
+    src: chart.getDataURL({ pixelRatio: window.devicePixelRatio || 1 }),
+    width: chart.getWidth(),
+    height: chart.getHeight(),
   };
-  open.value = true;
+  isModalOpen.value = true;
 }
 </script>
 
 <template>
-  <v-example id="map" title="Map" desc="(with GeoJSON & image converter)">
-    <v-chart
+  <VExample id="map" title="Map" desc="GeoJSON · image converter">
+    <VChart
       ref="map"
       :option="option"
       autoresize
@@ -54,9 +68,18 @@ function convert() {
       <p class="actions">
         <button @click="convert">Convert to image</button>
       </p>
-      <aside class="modal" :class="{ open }" @click="open = false">
-        <img v-if="img" v-bind="img" />
+      <aside
+        class="modal"
+        :class="{ open: isModalOpen }"
+        @click="isModalOpen = false"
+      >
+        <img
+          v-if="snapshot"
+          :src="snapshot.src"
+          :width="snapshot.width"
+          :height="snapshot.height"
+        />
       </aside>
     </template>
-  </v-example>
+  </VExample>
 </template>
diff --git a/demo/examples/GlChart.vue b/demo/examples/GlChart.vue
index 81b26db..86716b8 100644
--- a/demo/examples/GlChart.vue
+++ b/demo/examples/GlChart.vue
@@ -1,96 +1,121 @@
-<script setup>
+<script setup lang="ts">
 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 type { InitOptions, LoadingOptions, Option } from "../../src/types";
 import VChart from "../../src/ECharts";
 import VExample from "./Example.vue";
 import world from "../assets/world.jpg";
 import starfield from "../assets/starfield.jpg";
+import { DEMO_TEXT_STYLE } from "../constants";
 
 use([Bar3DChart, VisualMapComponent, GlobeComponent]);
 
-const option = shallowRef();
+type GlobeDatum = [number, number, number];
+
+function isGlobeData(value: unknown): value is GlobeDatum[] {
+  return (
+    Array.isArray(value) &&
+    value.every(
+      (entry) =>
+        Array.isArray(entry) &&
+        entry.length === 3 &&
+        typeof entry[0] === "number" &&
+        typeof entry[1] === "number" &&
+        typeof entry[2] === "number",
+    )
+  );
+}
+
+const option = shallowRef<Option | undefined>(undefined);
 const loading = shallowRef(true);
 
-const initOptions = {
+const initOptions: InitOptions = {
   renderer: "canvas",
 };
 
-const loadingOptions = {
+const loadingOptions: LoadingOptions = {
   text: "Loading...",
   color: "#000",
   textColor: "#fff",
   maskColor: "transparent",
 };
 
-onMounted(() => {
-  import("../data/population.json").then(({ default: data }) => {
+onMounted(async () => {
+  const module = await import("../data/population.json");
+  const population = module.default;
+
+  if (!isGlobeData(population)) {
     loading.value = false;
+    return;
+  }
 
-    data = data
-      .filter((dataItem) => dataItem[2] > 0)
-      .map((dataItem) => [dataItem[0], dataItem[1], Math.sqrt(dataItem[2])]);
+  const processed = population
+    .filter(([, , amount]) => amount > 0)
+    .map(([lon, lat, amount]): GlobeDatum => [lon, lat, Math.sqrt(amount)]);
 
-    option.value = {
-      backgroundColor: "#000",
-      globe: {
-        baseTexture: world,
-        heightTexture: world,
-        shading: "lambert",
-        environment: starfield,
-        light: {
-          main: {
-            intensity: 2,
-          },
-        },
-        viewControl: {
-          autoRotate: false,
+  option.value = {
+    textStyle: { ...DEMO_TEXT_STYLE },
+    backgroundColor: "#000",
+    globe: {
+      baseTexture: world,
+      heightTexture: world,
+      shading: "lambert",
+      environment: starfield,
+      light: {
+        main: {
+          intensity: 2,
         },
       },
-      visualMap: {
-        bottom: "3%",
-        left: "3%",
-        max: 40,
-        calculable: true,
-        realtime: false,
+      viewControl: {
+        autoRotate: false,
+      },
+    },
+    visualMap: {
+      bottom: "3%",
+      left: "3%",
+      max: 40,
+      calculable: true,
+      realtime: false,
+      inRange: {
+        colorLightness: [0.2, 0.9],
+      },
+      textStyle: {
+        color: "#fff",
+      },
+      controller: {
         inRange: {
-          colorLightness: [0.2, 0.9],
-        },
-        textStyle: {
-          color: "#fff",
-        },
-        controller: {
-          inRange: {
-            color: "orange",
-          },
-        },
-        outOfRange: {
-          colorAlpha: 0,
+          color: "orange",
         },
       },
-      series: [
-        {
-          type: "bar3D",
-          coordinateSystem: "globe",
-          data: data,
-          barSize: 0.6,
-          minHeight: 0.2,
-          silent: true,
-          itemStyle: {
-            color: "orange",
-          },
+      outOfRange: {
+        colorAlpha: 0,
+      },
+    },
+    series: [
+      {
+        type: "bar3D",
+        coordinateSystem: "globe",
+        data: processed,
+        barSize: 0.6,
+        minHeight: 0.2,
+        silent: true,
+        itemStyle: {
+          color: "orange",
         },
-      ],
-    };
-  });
+      },
+    ],
+  } satisfies Option;
+
+  loading.value = false;
 });
 </script>
 
 <template>
-  <v-example id="gl" title="GL charts" desc="(Globe & Bar3D)">
-    <v-chart
+  <VExample id="gl" title="GL charts" desc="Globe · Bar3D">
+    <VChart
       :option="option"
       :init-options="initOptions"
       autoresize
@@ -107,5 +132,5 @@ onMounted(() => {
         <small>(You can only use the canvas renderer for GL charts.)</small>
       </p>
     </template>
-  </v-example>
+  </VExample>
 </template>
diff --git a/demo/examples/LineChart.vue b/demo/examples/LineChart.vue
index 30173d4..9b9539e 100644
--- a/demo/examples/LineChart.vue
+++ b/demo/examples/LineChart.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import { use } from "echarts/core";
 import { LineChart, PieChart } from "echarts/charts";
 import {
@@ -8,10 +8,12 @@ import {
   TooltipComponent,
   ToolboxComponent,
 } from "echarts/components";
-import { shallowRef } from "vue";
+import { shallowRef, ref } from "vue";
+import type { Option } from "../../src/types";
 import VChart from "../../src/ECharts";
 import VExample from "./Example.vue";
 import getData from "../data/line";
+import { DEMO_FONT_FAMILY } from "../constants";
 
 use([
   DatasetComponent,
@@ -23,81 +25,159 @@ use([
   PieChart,
 ]);
 
-const option = shallowRef(getData());
-const axis = shallowRef("xAxis");
+const option = shallowRef<Option>(getData());
+const axis = ref<"xAxis" | "yAxis">("xAxis");
 
-function getPieOption(params) {
-  const option = {
-    dataset: { source: [params[0].dimensionNames, params[0].data] },
+function isStringOrNumber(value: unknown): value is string | number {
+  return typeof value === "string" || typeof value === "number";
+}
+
+function isDataRow(value: unknown): value is (string | number)[] {
+  return Array.isArray(value) && value.every(isStringOrNumber);
+}
+
+type TooltipParams = unknown;
+
+interface TooltipDatumLike {
+  dimensionNames?: unknown;
+  data?: unknown;
+  name?: unknown;
+}
+
+function firstTooltipDatum(
+  params: TooltipParams,
+): TooltipDatumLike | undefined {
+  if (Array.isArray(params)) {
+    const [first] = params;
+    return first as TooltipDatumLike | undefined;
+  }
+  if (params && typeof params === "object" && "data" in params) {
+    return params as TooltipDatumLike;
+  }
+  return undefined;
+}
+
+function getPieOption(params: TooltipParams): Option {
+  const datum = firstTooltipDatum(params);
+  if (
+    !datum ||
+    !Array.isArray(datum.dimensionNames) ||
+    !isDataRow(datum.data)
+  ) {
+    return { series: [] } satisfies Option;
+  }
+
+  const dimensionNames = datum.dimensionNames.map((value) => String(value));
+  const dataRow = datum.data;
+
+  return {
+    textStyle: {
+      fontFamily: DEMO_FONT_FAMILY,
+      fontWeight: 400,
+    },
+    dataset: { source: [dimensionNames, dataRow] },
     series: [
       {
         type: "pie",
         radius: ["60%", "100%"],
         seriesLayoutBy: "row",
         itemStyle: {
-          borderRadius: 5,
-          borderColor: "#fff",
-          borderWidth: 2,
+          borderRadius: 4,
         },
         label: {
           position: "center",
-          formatter: params[0].name,
-          fontFamily: 'Inter, "Helvetica Neue", Arial, sans-serif',
-          fontWeight: 300,
+          formatter: datum.name ?? "",
+          fontFamily: DEMO_FONT_FAMILY,
+          fontWeight: 600,
         },
       },
     ],
-  };
-  return option;
+  } satisfies Option;
+}
+
+function getAxisLabel(params: TooltipParams): string {
+  if (Array.isArray(params)) {
+    const [first] = params;
+    if (first && typeof first === "object" && "name" in first) {
+      return String((first as { name?: unknown }).name ?? "");
+    }
+    return "";
+  }
+  if (params && typeof params === "object" && "name" in params) {
+    return String((params as { name?: unknown }).name ?? "");
+  }
+  return "";
+}
+
+function getDatasetRows(option: Option): Array<string | number>[] {
+  const rawDataset = option.dataset;
+  if (!Array.isArray(rawDataset) || rawDataset.length === 0) {
+    return [];
+  }
+
+  const firstDataset = rawDataset[0] as { source?: unknown };
+  const { source } = firstDataset;
+  if (!Array.isArray(source) || source.length === 0) {
+    return [];
+  }
+
+  if (!source.every(isDataRow)) {
+    return [];
+  }
+
+  return source as Array<string | number>[];
 }
 </script>
 
 <template>
-  <v-example
-    id="line"
-    title="Line chart"
-    desc="(with tooltip and dataView slots)"
-  >
-    <v-chart :option="option" autoresize>
+  <VExample id="line" title="Line chart" desc="tooltip · dataView">
+    <VChart :option="option" autoresize>
       <template #tooltip="params">
-        <v-chart
+        <VChart
           :style="{ width: '100px', height: '100px' }"
-          :option="getPieOption(params)"
-          autoresize
+          :option="{ ...getPieOption(params), backgroundColor: 'transparent' }"
         />
       </template>
       <template #[`tooltip-${axis}`]="params">
         {{ axis === "xAxis" ? "Year" : "Value" }}:
-        <b>{{ params.name }}</b>
+        <b>{{ getAxisLabel(params) }}</b>
       </template>
-      <template #dataView="option">
-        <table style="margin: 20px auto">
+      <template #dataView="chartOption">
+        <table
+          v-if="getDatasetRows(chartOption).length"
+          style="margin: 20px auto"
+        >
           <thead>
             <tr>
-              <th v-for="(t, i) in option.dataset[0].source[0]" :key="i">
+              <th v-for="(t, i) in getDatasetRows(chartOption)[0]" :key="i">
                 {{ t }}
               </th>
             </tr>
           </thead>
           <tbody>
-            <tr v-for="(row, i) in option.dataset[0].source.slice(1)" :key="i">
+            <tr
+              v-for="(row, rowIndex) in getDatasetRows(chartOption).slice(1)"
+              :key="rowIndex"
+            >
               <th>{{ row[0] }}</th>
-              <td v-for="(v, i) in row.slice(1)" :key="i">{{ v }}</td>
+              <td v-for="(value, cellIndex) in row.slice(1)" :key="cellIndex">
+                {{ value }}
+              </td>
             </tr>
           </tbody>
         </table>
       </template>
-    </v-chart>
+    </VChart>
     <template #extra>
       <p class="actions">
-        Custom tooltip on
+        Tooltip axis
         <select v-model="axis">
-          <option value="xAxis">X Axis</option>
-          <option value="yAxis">Y Axis</option>
+          <option value="xAxis">X axis</option>
+          <option value="yAxis">Y axis</option>
         </select>
       </p>
     </template>
-  </v-example>
+  </VExample>
 </template>
 
 <style scoped>
diff --git a/demo/examples/LogoChart.vue b/demo/examples/LogoChart.vue
deleted file mode 100644
index 8c0ff77..0000000
--- a/demo/examples/LogoChart.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<script setup>
-import { registerTheme } from "echarts/core";
-
-import "echarts-liquidfill";
-import VChart from "../../src/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/demo/examples/ManualChart.vue b/demo/examples/ManualChart.vue
index a9a9565..24a4ba0 100644
--- a/demo/examples/ManualChart.vue
+++ b/demo/examples/ManualChart.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import { use, registerMap } from "echarts/core";
 import { LinesChart } from "echarts/charts";
 import {
@@ -7,18 +7,42 @@ import {
   TooltipComponent,
 } from "echarts/components";
 import { shallowRef } from "vue";
+import type { InitOptions, LoadingOptions, Option } from "../../src/types";
 import VChart from "../../src/ECharts";
 import VExample from "./Example.vue";
 import worldMap from "../data/world.json";
+import { DEMO_TEXT_STYLE } from "../constants";
+import { isGeoJSONSource } from "../utils/geo";
 
 use([LinesChart, GeoComponent, TitleComponent, TooltipComponent]);
-registerMap("world", worldMap);
 
-const chart = shallowRef(null);
+const worldGeoJSON = isGeoJSONSource(worldMap) ? worldMap : null;
+
+if (worldGeoJSON) {
+  registerMap("world", worldGeoJSON);
+}
+
+type ChartInstance = InstanceType<typeof VChart>;
+
+interface FlightDataset {
+  airports: Array<[string, string, string, number, number]>;
+  routes: Array<[number, number, number, number]>;
+}
+
+function isFlightDataset(value: unknown): value is FlightDataset {
+  return (
+    typeof value === "object" &&
+    value !== null &&
+    Array.isArray((value as Record<string, unknown>).airports) &&
+    Array.isArray((value as Record<string, unknown>).routes)
+  );
+}
+
+const chart = shallowRef<ChartInstance | null>(null);
 const loading = shallowRef(false);
 const loaded = shallowRef(false);
 
-const loadingOptions = {
+const loadingOptions: LoadingOptions = {
   text: "",
   color: "#c23531",
   textColor: "rgba(255, 255, 255, 0.5)",
@@ -26,24 +50,36 @@ const loadingOptions = {
   zlevel: 0,
 };
 
-function load() {
+const initOptions: InitOptions = {
+  renderer: "canvas",
+};
+
+function load(): void {
   loaded.value = true;
   loading.value = true;
 
-  import("../data/flight.json").then(({ default: data }) => {
+  import("../data/flight.json").then(({ default: rawData }) => {
+    if (!isFlightDataset(rawData)) {
+      loading.value = false;
+      return;
+    }
+
     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])];
+    const getAirportCoord = (index: number): [number, number] => [
+      rawData.airports[index][3],
+      rawData.airports[index][4],
+    ];
+
+    type Route = [[number, number], [number, number]];
+    const routes = rawData.routes.map<Route>(([, from, to]) => {
+      const fromCoord = getAirportCoord(from);
+      const toCoord = getAirportCoord(to);
+      return [fromCoord, toCoord];
     });
 
-    chart.value.setOption({
-      textStyle: {
-        fontFamily: 'Inter, "Helvetica Neue", Arial, sans-serif',
-      },
+    chart.value?.setOption({
+      textStyle: { ...DEMO_TEXT_STYLE },
       title: {
         text: "World Flights",
         top: "5%",
@@ -54,11 +90,11 @@ function load() {
       },
       backgroundColor: "#003",
       tooltip: {
-        formatter(param) {
-          const route = data.routes[param.dataIndex];
-          return (
-            data.airports[route[1]][1] + " > " + data.airports[route[2]][1]
-          );
+        formatter({ dataIndex }: { dataIndex: number }) {
+          const route = rawData.routes[dataIndex];
+          const fromName = rawData.airports[route[1]][1];
+          const toName = rawData.airports[route[2]][1];
+          return `${fromName} > ${toName}`;
         },
       },
       geo: {
@@ -86,18 +122,19 @@ function load() {
           blendMode: "lighter",
         },
       ],
-    });
+    } satisfies Option);
   });
 }
 </script>
 
 <template>
-  <v-example id="manual" title="Manual updates">
-    <v-chart
+  <VExample id="manual" title="Manual updates">
+    <VChart
       ref="chart"
       autoresize
       :loading="loading"
       :loading-options="loadingOptions"
+      :init-options="initOptions"
       style="background-color: #003"
       manual-update
     />
@@ -110,5 +147,5 @@ function load() {
         <button :disabled="loaded" @click="load">Load</button>
       </p>
     </template>
-  </v-example>
+  </VExample>
 </template>
diff --git a/demo/examples/PieChart.vue b/demo/examples/PieChart.vue
index 183d3fc..22f1ce2 100644
--- a/demo/examples/PieChart.vue
+++ b/demo/examples/PieChart.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import { use } from "echarts/core";
 import { PieChart } from "echarts/charts";
 import {
@@ -8,6 +8,8 @@ import {
   TooltipComponent,
 } from "echarts/components";
 import { shallowRef, onMounted, onUnmounted } from "vue";
+import type { Option } from "../../src/types";
+import type { PieSeriesOption } from "echarts/charts";
 import VChart from "../../src/ECharts";
 import VExample from "./Example.vue";
 import getData from "../data/pie";
@@ -20,10 +22,27 @@ use([
   TooltipComponent,
 ]);
 
-const option = shallowRef(getData());
-const pie = shallowRef(null);
+type ChartInstance = InstanceType<typeof VChart>;
 
-let timer = null;
+const option = shallowRef<Option>(getData());
+const pie = shallowRef<ChartInstance | null>(null);
+
+let timer: number | undefined;
+
+function getPieSeries(option: Option | undefined): PieSeriesOption | null {
+  if (!option) {
+    return null;
+  }
+  const series = option.series;
+  const firstSeries = Array.isArray(series) ? series[0] : series;
+  if (!firstSeries || typeof firstSeries !== "object") {
+    return null;
+  }
+  if ((firstSeries as PieSeriesOption).type === "pie") {
+    return firstSeries as PieSeriesOption;
+  }
+  return null;
+}
 
 onMounted(() => {
   startActions();
@@ -33,10 +52,12 @@ onUnmounted(() => {
   stopActions();
 });
 
-function startActions() {
+function startActions(): void {
   let dataIndex = -1;
 
-  const dataLen = option.value?.series?.[0]?.data?.length || 0;
+  const series = getPieSeries(option.value);
+  const data = Array.isArray(series?.data) ? series.data : [];
+  const dataLen = data.length;
 
   if (!pie.value || dataLen === 0) {
     return;
@@ -44,25 +65,28 @@ function startActions() {
 
   clearInterval(timer);
 
-  timer = setInterval(() => {
-    if (!pie.value) {
-      clearInterval(timer);
-
+  timer = window.setInterval(() => {
+    const chart = pie.value;
+    if (!chart) {
+      if (timer !== undefined) {
+        clearInterval(timer);
+        timer = undefined;
+      }
       return;
     }
 
-    pie.value.dispatchAction({
+    chart.dispatchAction({
       type: "downplay",
       seriesIndex: 0,
       dataIndex,
     });
     dataIndex = (dataIndex + 1) % dataLen;
-    pie.value.dispatchAction({
+    chart.dispatchAction({
       type: "highlight",
       seriesIndex: 0,
       dataIndex,
     });
-    pie.value.dispatchAction({
+    chart.dispatchAction({
       type: "showTip",
       seriesIndex: 0,
       dataIndex,
@@ -70,13 +94,16 @@ function startActions() {
   }, 1000);
 }
 
-function stopActions() {
-  clearInterval(timer);
+function stopActions(): void {
+  if (timer !== undefined) {
+    clearInterval(timer);
+    timer = undefined;
+  }
 }
 </script>
 
 <template>
-  <v-example id="pie" title="Pie chart" desc="(with action dispatch)">
-    <v-chart ref="pie" :option="option" autoresize />
-  </v-example>
+  <VExample id="pie" title="Pie chart" desc="action dispatch">
+    <VChart ref="pie" :option="option" autoresize />
+  </VExample>
 </template>
diff --git a/demo/examples/PolarChart.vue b/demo/examples/PolarChart.vue
index 1737aaa..3567fde 100644
--- a/demo/examples/PolarChart.vue
+++ b/demo/examples/PolarChart.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import { use } from "echarts/core";
 import { LineChart } from "echarts/charts";
 import {
@@ -7,10 +7,12 @@ import {
   LegendComponent,
   TooltipComponent,
 } from "echarts/components";
-import { computed, shallowRef } from "vue";
+import { computed, shallowRef, watch } from "vue";
+import type { LoadingOptions, Option, Theme } from "../../src/types";
 import VChart from "../../src/ECharts";
 import VExample from "./Example.vue";
 import getData from "../data/polar";
+import { useDemoDark } from "../composables/useDemoDark";
 
 use([
   LineChart,
@@ -20,47 +22,61 @@ use([
   TooltipComponent,
 ]);
 
-const option = shallowRef(getData());
-const theme = shallowRef("dark");
+const isDark = useDemoDark();
+const themeSelection = shallowRef<"dark" | "default">(
+  isDark.value ? "dark" : "default",
+);
+const option = shallowRef<Option>(getData());
 const loading = shallowRef(false);
-const loadingOptions = computed(() =>
-  theme.value === "dark"
+
+const theme = computed<Theme | undefined>(() =>
+  themeSelection.value === "dark" ? "dark" : undefined,
+);
+
+const loadingOptions = computed<LoadingOptions | undefined>(() =>
+  themeSelection.value === "dark"
     ? {
         color: "#fff",
         textColor: "#fff",
         maskColor: "rgba(0, 0, 0, 0.7)",
       }
-    : null,
+    : undefined,
 );
-const style = computed(() => {
-  return theme.value === "dark"
-    ? loading.value
-      ? "background-color: #05040d"
-      : "background-color: #100c2a"
-    : "";
+
+const chartStyle = computed(() => {
+  if (themeSelection.value !== "dark") {
+    return "";
+  }
+  return loading.value
+    ? "background-color: #05040d"
+    : "background-color: #100c2a";
+});
+
+watch(isDark, (value) => {
+  themeSelection.value = value ? "dark" : "default";
 });
 </script>
 
 <template>
-  <v-example id="polar" title="Polar plot" desc="(with built-in theme)">
-    <v-chart
+  <VExample id="polar" title="Polar plot" desc="built-in theme">
+    <VChart
       :option="option"
       autoresize
       :loading="loading"
       :loading-options="loadingOptions"
       :theme="theme"
-      :style="style"
+      :style="chartStyle"
     />
     <template #extra>
       <p class="actions">
         Theme
-        <select v-model="theme">
-          <option :value="null">Default</option>
+        <select v-model="themeSelection">
+          <option value="default">Default</option>
           <option value="dark">Dark</option>
         </select>
-        <input id="loading-check" type="checkbox" v-model="loading" />
+        <input id="loading-check" v-model="loading" type="checkbox" />
         <label for="loading-check">Loading</label>
       </p>
     </template>
-  </v-example>
+  </VExample>
 </template>
diff --git a/demo/examples/RadarChart.vue b/demo/examples/RadarChart.vue
index d93b307..42bb98e 100644
--- a/demo/examples/RadarChart.vue
+++ b/demo/examples/RadarChart.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import { use } from "echarts/core";
 import { RadarChart } from "echarts/charts";
 import {
@@ -6,7 +6,7 @@ import {
   TitleComponent,
   TooltipComponent,
 } from "echarts/components";
-import { shallowRef } from "vue";
+import { computed, shallowRef } from "vue";
 import VChart from "../../src/ECharts";
 import VExample from "./Example.vue";
 import { useScoreStore } from "../data/radar";
@@ -14,37 +14,38 @@ import { useScoreStore } from "../data/radar";
 use([RadarChart, PolarComponent, TitleComponent, TooltipComponent]);
 
 const { metrics, getRadarData, increase, isMax, isMin } = useScoreStore();
-
 const metricIndex = shallowRef(0);
+
+const option = computed(() => getRadarData(metricIndex.value));
 </script>
 
 <template>
-  <v-example id="radar" title="Radar chart" desc="(with Pinia integration)">
-    <v-chart :option="getRadarData(metricIndex)" autoresize />
+  <VExample id="radar" title="Radar chart" desc="Pinia integration">
+    <VChart :option="option" autoresize />
     <template #extra>
       <p class="actions">
-        <select v-model="metricIndex">
+        <select v-model.number="metricIndex">
           <option
             v-for="(metric, index) in metrics"
-            :value="index"
             :key="index"
+            :value="index"
           >
             {{ metric }}
           </option>
         </select>
         <button
-          @click="increase(metricIndex, 1)"
           :disabled="isMax(metricIndex)"
+          @click="increase(metricIndex, 1)"
         >
           Increase
         </button>
         <button
-          @click="increase(metricIndex, -1)"
           :disabled="isMin(metricIndex)"
+          @click="increase(metricIndex, -1)"
         >
           Decrease
         </button>
       </p>
     </template>
-  </v-example>
+  </VExample>
 </template>
diff --git a/demo/examples/ScatterChart.vue b/demo/examples/ScatterChart.vue
index 473cc9b..b37aa07 100644
--- a/demo/examples/ScatterChart.vue
+++ b/demo/examples/ScatterChart.vue
@@ -1,23 +1,31 @@
-<script setup>
+<script setup lang="ts">
 import { use } from "echarts/core";
 import { ScatterChart } from "echarts/charts";
 import {
   GridComponent,
   TitleComponent,
   LegendComponent,
+  TooltipComponent,
 } from "echarts/components";
 import { shallowRef } from "vue";
+import type { Option } from "../../src/types";
 import VChart from "../../src/ECharts";
 import VExample from "./Example.vue";
 import getData from "../data/scatter";
 
-use([ScatterChart, GridComponent, TitleComponent, LegendComponent]);
+use([
+  ScatterChart,
+  GridComponent,
+  TitleComponent,
+  LegendComponent,
+  TooltipComponent,
+]);
 
-const option = shallowRef(getData());
+const option = shallowRef<Option>(getData());
 </script>
 
 <template>
-  <v-example id="scatter" title="Scatter plot" desc="(with gradient)">
-    <v-chart :option="option" autoresize />
-  </v-example>
+  <VExample id="scatter" title="Scatter plot" desc="gradient">
+    <VChart :option="option" autoresize />
+  </VExample>
 </template>
diff --git a/demo/global.css b/demo/global.css
new file mode 100644
index 0000000..a0efc55
--- /dev/null
+++ b/demo/global.css
@@ -0,0 +1,142 @@
+/* Design tokens */
+:root {
+  /* Neutral palette */
+  --bg-light: #fafafa;
+  --surface-light: #ffffff;
+  --surface-2-light: #f5f5f5;
+  --border-light: #e6e6e6;
+  --text-light: #111827;
+  --muted-light: #6b7280;
+  --muted-2-light: #9ca3af;
+  --heading-light: #1f2937;
+
+  /* Accent (Vue green) */
+  --link-light: #42b883;
+  --accent-light: #42b883;
+  --accent-strong-light: #2a9f6b;
+  --ring-light: rgba(17, 24, 39, 0.2);
+
+  /* Code */
+  --code-bg-light: #0b1020;
+  --code-fg-light: #e2e8f0;
+
+  /* Shadow */
+  --shadow-light: 0 1px 3px rgba(0, 0, 0, 0.06);
+
+  /* Dark palette */
+  --bg-dark: #0b1220;
+  --surface-dark: #0f172a;
+  --surface-2-dark: #0b1220;
+  --border-dark: #1f2937;
+  --text-dark: #e5e7eb;
+  --muted-dark: #9ca3af;
+  --muted-2-dark: #6b7280;
+  --heading-dark: #f3f4f6;
+  --link-dark: #42d39a;
+  --accent-dark: #42d39a;
+  --accent-strong-dark: #3bc28d;
+  --ring-dark: rgba(229, 231, 235, 0.25);
+  --shadow-dark: 0 1px 2px rgba(0, 0, 0, 0.35);
+  --code-bg-dark: #0b1020;
+  --code-fg-dark: #e2e8f0;
+
+  /* Active tokens default to light */
+  --bg: var(--bg-light);
+  --surface: var(--surface-light);
+  --surface-2: var(--surface-2-light);
+  --border: var(--border-light);
+  --text: var(--text-light);
+  --muted: var(--muted-light);
+  --muted-2: var(--muted-2-light);
+  --heading: var(--heading-light);
+  --link: var(--link-light);
+  --accent: var(--accent-light);
+  --accent-strong: var(--accent-strong-light);
+  --ring: var(--ring-light);
+  --shadow: var(--shadow-light);
+  --code-bg: var(--code-bg-light);
+  --code-fg: var(--code-fg-light);
+
+  /* Focus */
+  --focus: 0 0 0 2px var(--ring);
+
+  /* Radius & spacing (8px scale) */
+  --r-s: 4px;
+  --r-m: 8px;
+  --r-l: 12px;
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-6: 24px;
+  --space-8: 32px;
+
+  /* Fonts */
+  --font-sans:
+    Manrope, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial,
+    "Apple Color Emoji", "Segoe UI Emoji";
+  --font-mono:
+    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono",
+    monospace;
+
+  color-scheme: light;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not(.light) {
+    color-scheme: dark;
+    --bg: var(--bg-dark);
+    --surface: var(--surface-dark);
+    --surface-2: var(--surface-2-dark);
+    --border: var(--border-dark);
+    --text: var(--text-dark);
+    --muted: var(--muted-dark);
+    --muted-2: var(--muted-2-dark);
+    --heading: var(--heading-dark);
+    --link: var(--link-dark);
+    --accent: var(--accent-dark);
+    --accent-strong: var(--accent-strong-dark);
+    --ring: var(--ring-dark);
+    --shadow: var(--shadow-dark);
+    --code-bg: var(--code-bg-dark);
+    --code-fg: var(--code-fg-dark);
+  }
+}
+
+html.dark {
+  color-scheme: dark;
+  --bg: var(--bg-dark);
+  --surface: var(--surface-dark);
+  --surface-2: var(--surface-2-dark);
+  --border: var(--border-dark);
+  --text: var(--text-dark);
+  --muted: var(--muted-dark);
+  --muted-2: var(--muted-2-dark);
+  --heading: var(--heading-dark);
+  --link: var(--link-dark);
+  --accent: var(--accent-dark);
+  --accent-strong: var(--accent-strong-dark);
+  --ring: var(--ring-dark);
+  --shadow: var(--shadow-dark);
+  --code-bg: var(--code-bg-dark);
+  --code-fg: var(--code-fg-dark);
+}
+
+html.light {
+  color-scheme: light;
+  --bg: var(--bg-light);
+  --surface: var(--surface-light);
+  --surface-2: var(--surface-2-light);
+  --border: var(--border-light);
+  --text: var(--text-light);
+  --muted: var(--muted-light);
+  --muted-2: var(--muted-2-light);
+  --heading: var(--heading-light);
+  --link: var(--link-light);
+  --accent: var(--accent-light);
+  --accent-strong: var(--accent-strong-light);
+  --ring: var(--ring-light);
+  --shadow: var(--shadow-light);
+  --code-bg: var(--code-bg-light);
+  --code-fg: var(--code-fg-light);
+}
diff --git a/demo/index.html b/demo/index.html
index ee175cb..8082777 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -7,9 +7,11 @@
     <link rel="icon" href="/favicon.ico" />
     <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
     <link
-      href="https://fonts.googleapis.com/css?family=Inter:300,500;display=swap"
+      href="https://fonts.googleapis.com/css2?family=Manrope:wght@300;500&display=swap"
       rel="stylesheet"
     />
+
+    <link rel="stylesheet" href="/global.css" />
     <title>Vue ECharts: Vue.js component for Apache ECharts™.</title>
   </head>
   <body>
diff --git a/demo/services/monaco.ts b/demo/services/monaco.ts
new file mode 100644
index 0000000..0b52715
--- /dev/null
+++ b/demo/services/monaco.ts
@@ -0,0 +1,248 @@
+import * as monaco from "monaco-editor/esm/vs/editor/editor.api";
+import "monaco-editor/esm/vs/basic-languages/javascript/javascript.contribution";
+import "monaco-editor/esm/vs/basic-languages/typescript/typescript.contribution";
+import "monaco-editor/esm/vs/language/json/monaco.contribution";
+import "monaco-editor/esm/vs/language/typescript/monaco.contribution";
+import editorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker";
+import tsWorker from "monaco-editor/esm/vs/language/typescript/ts.worker?worker";
+import jsonWorker from "monaco-editor/esm/vs/language/json/json.worker?worker";
+
+const globalWithMonaco = globalThis as typeof globalThis & {
+  MonacoEnvironment?: {
+    getWorker: (moduleId: string, label: string) => Worker;
+  };
+};
+
+if (!globalWithMonaco.MonacoEnvironment) {
+  globalWithMonaco.MonacoEnvironment = {
+    getWorker(_: string, label: string) {
+      if (label === "json") {
+        return new jsonWorker();
+      }
+      if (label === "typescript" || label === "javascript") {
+        return new tsWorker();
+      }
+      return new editorWorker();
+    },
+  };
+}
+
+const diagnosticsOptions: monaco.languages.typescript.DiagnosticsOptions = {
+  noSemanticValidation: true,
+  noSyntaxValidation: true,
+  noSuggestionDiagnostics: true,
+};
+
+monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions(
+  diagnosticsOptions,
+);
+monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions(
+  diagnosticsOptions,
+);
+monaco.languages.typescript.javascriptDefaults.setEagerModelSync(true);
+monaco.languages.typescript.typescriptDefaults.setEagerModelSync(true);
+
+export type MonacoSeverity = "error" | "warning" | "info" | "hint";
+
+export interface MonacoMarkerLike {
+  startLineNumber: number;
+  startColumn: number;
+  endLineNumber: number;
+  endColumn: number;
+  message: string;
+  code?: string;
+  source?: string;
+  severity?: MonacoSeverity;
+}
+
+const SEVERITY_MAP: Record<MonacoSeverity, monaco.MarkerSeverity> = {
+  error: monaco.MarkerSeverity.Error,
+  warning: monaco.MarkerSeverity.Warning,
+  info: monaco.MarkerSeverity.Info,
+  hint: monaco.MarkerSeverity.Hint,
+};
+
+export interface OptionEditor {
+  editor: monaco.editor.IStandaloneCodeEditor;
+  getValue(): string;
+  setValue(value: string): void;
+  setMarkers(markers: readonly MonacoMarkerLike[]): void;
+  setTheme(theme: string): void;
+  dispose(): void;
+}
+
+export interface CodeViewer {
+  editor: monaco.editor.IStandaloneCodeEditor;
+  setValue(value: string): void;
+  setTheme(theme: string): void;
+  setLanguage(language: string): void;
+  dispose(): void;
+}
+
+export interface CreateOptionEditorOptions {
+  initialCode: string;
+  language?: string;
+  onChange?: (code: string) => void;
+  theme?: string;
+}
+
+export interface CreateCodeViewerOptions {
+  initialCode: string;
+  language?: string;
+  theme?: string;
+}
+
+const MARKER_OWNER = "ve-codegen-option";
+
+export function createOptionEditor(
+  container: HTMLElement,
+  {
+    initialCode,
+    language = "typescript",
+    onChange,
+    theme = "vs",
+  }: CreateOptionEditorOptions,
+): OptionEditor {
+  monaco.editor.setTheme(theme);
+
+  const editor = monaco.editor.create(container, {
+    value: initialCode,
+    language,
+    automaticLayout: true,
+    scrollBeyondLastLine: false,
+    minimap: { enabled: false },
+    fontSize: 13,
+    lineHeight: 20,
+    tabSize: 2,
+    insertSpaces: true,
+    wordWrap: "on",
+  });
+
+  const disposables: monaco.IDisposable[] = [];
+
+  if (onChange) {
+    disposables.push(
+      editor.onDidChangeModelContent(() => {
+        const model = editor.getModel();
+        if (!model) {
+          return;
+        }
+        onChange(model.getValue());
+      }),
+    );
+  }
+
+  function getValue() {
+    return editor.getValue();
+  }
+
+  function setValue(value: string) {
+    const model = editor.getModel();
+    if (!model) {
+      return;
+    }
+    if (model.getValue() !== value) {
+      model.setValue(value);
+    }
+  }
+
+  function setMarkers(markers: readonly MonacoMarkerLike[]) {
+    const model = editor.getModel();
+    if (!model) {
+      return;
+    }
+    const mapped = markers.map((marker) => ({
+      ...marker,
+      severity: marker.severity
+        ? SEVERITY_MAP[marker.severity]
+        : monaco.MarkerSeverity.Error,
+    }));
+    monaco.editor.setModelMarkers(model, MARKER_OWNER, mapped);
+  }
+
+  function dispose() {
+    disposables.forEach((item) => item.dispose());
+    disposables.length = 0;
+    const model = editor.getModel();
+    if (model) {
+      monaco.editor.setModelMarkers(model, MARKER_OWNER, []);
+    }
+    editor.dispose();
+  }
+
+  function setTheme(nextTheme: string) {
+    monaco.editor.setTheme(nextTheme);
+  }
+
+  return {
+    editor,
+    getValue,
+    setValue,
+    setMarkers,
+    setTheme,
+    dispose,
+  };
+}
+
+export function createCodeViewer(
+  container: HTMLElement,
+  {
+    initialCode,
+    language = "javascript",
+    theme = "vs",
+  }: CreateCodeViewerOptions,
+): CodeViewer {
+  monaco.editor.setTheme(theme);
+
+  const editor = monaco.editor.create(container, {
+    value: initialCode,
+    language,
+    automaticLayout: true,
+    scrollBeyondLastLine: false,
+    minimap: { enabled: false },
+    fontSize: 13,
+    lineHeight: 20,
+    tabSize: 2,
+    insertSpaces: true,
+    wordWrap: "on",
+    readOnly: true,
+    renderLineHighlight: "none",
+  });
+
+  function setValue(value: string) {
+    const model = editor.getModel();
+    if (!model) {
+      return;
+    }
+    if (model.getValue() !== value) {
+      model.setValue(value);
+    }
+  }
+
+  function setTheme(nextTheme: string) {
+    monaco.editor.setTheme(nextTheme);
+  }
+
+  function setLanguage(nextLanguage: string) {
+    const model = editor.getModel();
+    if (!model) {
+      return;
+    }
+    monaco.editor.setModelLanguage(model, nextLanguage);
+  }
+
+  function dispose() {
+    editor.dispose();
+  }
+
+  return {
+    editor,
+    setValue,
+    setTheme,
+    setLanguage,
+    dispose,
+  };
+}
+
+export { monaco };
+export type MonacoNamespace = typeof monaco;
diff --git a/demo/shims-echarts.d.ts b/demo/shims-echarts.d.ts
new file mode 100644
index 0000000..0d6e559
--- /dev/null
+++ b/demo/shims-echarts.d.ts
@@ -0,0 +1,7 @@
+declare module "echarts/lib/theme/dark.js" {
+  const theme: Record<string, unknown>;
+  export default theme;
+}
+
+declare module "echarts-gl/charts";
+declare module "echarts-gl/components";
diff --git a/demo/theme-dark.json b/demo/theme-dark.json
new file mode 100644
index 0000000..071e204
--- /dev/null
+++ b/demo/theme-dark.json
@@ -0,0 +1,389 @@
+{
+  "color": ["#57e8d2", "#42d39a", "#7bd9a5"],
+  "backgroundColor": "rgba(0,0,0,0)",
+  "textStyle": {
+    "color": "#e5e7eb"
+  },
+  "title": {
+    "textStyle": {
+      "color": "#f3f4f6"
+    },
+    "subtextStyle": {
+      "color": "#9ca3af"
+    }
+  },
+  "line": {
+    "itemStyle": {
+      "borderWidth": "2"
+    },
+    "lineStyle": {
+      "width": "3"
+    },
+    "symbolSize": "10",
+    "symbol": "emptyCircle",
+    "smooth": true
+  },
+  "radar": {
+    "itemStyle": {
+      "borderWidth": "2"
+    },
+    "lineStyle": {
+      "width": "3"
+    },
+    "symbolSize": "10",
+    "symbol": "emptyCircle",
+    "smooth": true
+  },
+  "bar": {
+    "itemStyle": {
+      "barBorderWidth": "0",
+      "barBorderColor": "#1f2937"
+    },
+    "emphasis": {
+      "itemStyle": {
+        "barBorderWidth": "0",
+        "barBorderColor": "#1f2937"
+      }
+    }
+  },
+  "pie": {
+    "itemStyle": {
+      "borderWidth": "0",
+      "borderColor": "#1f2937"
+    },
+    "emphasis": {
+      "itemStyle": {
+        "borderWidth": "0",
+        "borderColor": "#1f2937"
+      }
+    }
+  },
+  "scatter": {
+    "itemStyle": {
+      "borderWidth": "0",
+      "borderColor": "#1f2937"
+    },
+    "emphasis": {
+      "itemStyle": {
+        "borderWidth": "0",
+        "borderColor": "#1f2937"
+      }
+    }
+  },
+  "boxplot": {
+    "itemStyle": {
+      "borderWidth": "0",
+      "borderColor": "#1f2937"
+    },
+    "emphasis": {
+      "itemStyle": {
+        "borderWidth": "0",
+        "borderColor": "#1f2937"
+      }
+    }
+  },
+  "parallel": {
+    "itemStyle": {
+      "borderWidth": "0",
+      "borderColor": "#1f2937"
+    },
+    "emphasis": {
+      "itemStyle": {
+        "borderWidth": "0",
+        "borderColor": "#1f2937"
+      }
+    }
+  },
+  "sankey": {
+    "itemStyle": {
+      "borderWidth": "0",
+      "borderColor": "#1f2937"
+    },
+    "emphasis": {
+      "itemStyle": {
+        "borderWidth": "0",
+        "borderColor": "#1f2937"
+      }
+    }
+  },
+  "funnel": {
+    "itemStyle": {
+      "borderWidth": "0",
+      "borderColor": "#1f2937"
+    },
+    "emphasis": {
+      "itemStyle": {
+        "borderWidth": "0",
+        "borderColor": "#1f2937"
+      }
+    }
+  },
+  "gauge": {
+    "itemStyle": {
+      "borderWidth": "0",
+      "borderColor": "#1f2937"
+    },
+    "emphasis": {
+      "itemStyle": {
+        "borderWidth": "0",
+        "borderColor": "#1f2937"
+      }
+    }
+  },
+  "candlestick": {
+    "itemStyle": {
+      "color": "#57e8d2",
+      "color0": "#111827",
+      "borderColor": "#57e8d2",
+      "borderColor0": "#42d39a",
+      "borderWidth": 1
+    }
+  },
+  "graph": {
+    "itemStyle": {
+      "borderWidth": "0",
+      "borderColor": "#1f2937"
+    },
+    "lineStyle": {
+      "width": 1,
+      "color": "#94a3b8"
+    },
+    "symbolSize": "10",
+    "symbol": "emptyCircle",
+    "smooth": true,
+    "color": ["#57e8d2", "#42d39a", "#7bd9a5"],
+    "label": {
+      "color": "#e5e7eb"
+    }
+  },
+  "map": {
+    "itemStyle": {
+      "areaColor": "#1f2937",
+      "borderColor": "#334155",
+      "borderWidth": "0.5"
+    },
+    "emphasis": {
+      "itemStyle": {
+        "areaColor": "rgba(87, 232, 210, 0.25)",
+        "borderColor": "#42d39a",
+        "borderWidth": "0.5"
+      },
+      "label": {
+        "color": "#57e8d2"
+      }
+    },
+    "label": {
+      "color": "#e5e7eb"
+    }
+  },
+  "geo": {
+    "itemStyle": {
+      "areaColor": "#1f2937",
+      "borderColor": "#334155",
+      "borderWidth": "0.5"
+    },
+    "emphasis": {
+      "itemStyle": {
+        "areaColor": "rgba(87, 232, 210, 0.25)",
+        "borderColor": "#42d39a",
+        "borderWidth": "0.5"
+      },
+      "label": {
+        "color": "#57e8d2"
+      }
+    },
+    "label": {
+      "color": "#e5e7eb"
+    }
+  },
+  "categoryAxis": {
+    "axisLine": {
+      "show": true,
+      "lineStyle": {
+        "color": "#475569"
+      }
+    },
+    "axisTick": {
+      "show": false,
+      "lineStyle": {
+        "color": "#475569"
+      }
+    },
+    "axisLabel": {
+      "show": true,
+      "color": "#cbd5f5"
+    },
+    "splitLine": {
+      "show": true,
+      "lineStyle": {
+        "color": ["#334155"]
+      }
+    },
+    "splitArea": {
+      "show": false
+    }
+  },
+  "valueAxis": {
+    "axisLine": {
+      "show": true,
+      "lineStyle": {
+        "color": "#475569"
+      }
+    },
+    "axisTick": {
+      "show": false,
+      "lineStyle": {
+        "color": "#475569"
+      }
+    },
+    "axisLabel": {
+      "show": true,
+      "color": "#cbd5f5"
+    },
+    "splitLine": {
+      "show": true,
+      "lineStyle": {
+        "color": ["#334155"]
+      }
+    },
+    "splitArea": {
+      "show": false
+    }
+  },
+  "logAxis": {
+    "axisLine": {
+      "show": true,
+      "lineStyle": {
+        "color": "#475569"
+      }
+    },
+    "axisTick": {
+      "show": false,
+      "lineStyle": {
+        "color": "#475569"
+      }
+    },
+    "axisLabel": {
+      "show": true,
+      "color": "#cbd5f5"
+    },
+    "splitLine": {
+      "show": true,
+      "lineStyle": {
+        "color": ["#334155"]
+      }
+    },
+    "splitArea": {
+      "show": false
+    }
+  },
+  "timeAxis": {
+    "axisLine": {
+      "show": true,
+      "lineStyle": {
+        "color": "#475569"
+      }
+    },
+    "axisTick": {
+      "show": false,
+      "lineStyle": {
+        "color": "#475569"
+      }
+    },
+    "axisLabel": {
+      "show": true,
+      "color": "#cbd5f5"
+    },
+    "splitLine": {
+      "show": true,
+      "lineStyle": {
+        "color": ["#334155"]
+      }
+    },
+    "splitArea": {
+      "show": false
+    }
+  },
+  "toolbox": {
+    "iconStyle": {
+      "borderColor": "#94a3b8"
+    },
+    "emphasis": {
+      "iconStyle": {
+        "borderColor": "#f3f4f6"
+      }
+    }
+  },
+  "legend": {
+    "textStyle": {
+      "color": "#cbd5f5"
+    }
+  },
+  "tooltip": {
+    "backgroundColor": "rgba(15, 23, 42, 0.94)",
+    "borderColor": "#3f4c66",
+    "textStyle": {
+      "color": "#e5e7eb"
+    },
+    "axisPointer": {
+      "lineStyle": {
+        "color": "#94a3b8",
+        "width": 1
+      },
+      "crossStyle": {
+        "color": "#94a3b8",
+        "width": 1
+      }
+    }
+  },
+  "timeline": {
+    "lineStyle": {
+      "color": "#22c3aa",
+      "width": 1
+    },
+    "itemStyle": {
+      "color": "#22c3aa",
+      "borderWidth": "1"
+    },
+    "emphasis": {
+      "itemStyle": {
+        "color": "#57e8d2"
+      }
+    },
+    "controlStyle": {
+      "color": "#22c3aa",
+      "borderColor": "#22c3aa",
+      "borderWidth": "0"
+    },
+    "checkpointStyle": {
+      "color": "#42d39a",
+      "borderColor": "rgba(87, 232, 210, 0.25)"
+    },
+    "label": {
+      "color": "#22c3aa"
+    }
+  },
+  "visualMap": {
+    "color": ["#57e8d2", "#42d39a", "rgba(123,217,165,0.2)"]
+  },
+  "dataZoom": {
+    "backgroundColor": "#1f2937",
+    "dataBackgroundColor": "#111827",
+    "fillerColor": "rgba(87, 232, 210, 0.2)",
+    "handleColor": "#94a3b8",
+    "handleSize": "100%",
+    "textStyle": {
+      "color": "#cbd5f5"
+    }
+  },
+  "markPoint": {
+    "label": {
+      "color": "#111827",
+      "emphasis": {
+        "textStyle": {
+          "color": "#111827"
+        }
+      }
+    }
+  }
+}
diff --git a/demo/tsconfig.json b/demo/tsconfig.json
index 68edade..d20388e 100644
--- a/demo/tsconfig.json
+++ b/demo/tsconfig.json
@@ -1,6 +1,6 @@
 {
   "extends": "@vue/tsconfig/tsconfig.dom.json",
-  "include": ["./**/*", "./**/*.vue"],
+  "include": ["./**/*.ts", "./**/*.vue"],
   "compilerOptions": {
     "types": ["vite/client"],
     "allowJs": true,
diff --git a/demo/utils/codegen.js b/demo/utils/codegen.js
deleted file mode 100644
index ce61bfd..0000000
--- a/demo/utils/codegen.js
+++ /dev/null
@@ -1,498 +0,0 @@
-// Modified from https://github.com/apache/echarts-examples/blob/b644ced5325ea2522cb11606df54eae69bba3a3a/common/buildCode.js
-// See license at `./LICENSE`.
-
-const COMPONENTS_MAP = {
-  grid: "GridComponent",
-  polar: "PolarComponent",
-  geo: "GeoComponent",
-  singleAxis: "SingleAxisComponent",
-  parallel: "ParallelComponent",
-  calendar: "CalendarComponent",
-  matrix: "MatrixComponent",
-  graphic: "GraphicComponent",
-  toolbox: "ToolboxComponent",
-  tooltip: "TooltipComponent",
-  axisPointer: "AxisPointerComponent",
-  brush: "BrushComponent",
-  title: "TitleComponent",
-  timeline: "TimelineComponent",
-  markPoint: "MarkPointComponent",
-  markLine: "MarkLineComponent",
-  markArea: "MarkAreaComponent",
-  legend: "LegendComponent",
-  dataZoom: "DataZoomComponent",
-  visualMap: "VisualMapComponent",
-  thumbnail: "ThumbnailComponent",
-  aria: "AriaComponent",
-  dataset: "DatasetComponent",
-
-  // Dependencies
-  xAxis: "GridComponent",
-  yAxis: "GridComponent",
-  angleAxis: "PolarComponent",
-  radiusAxis: "PolarComponent",
-};
-
-const CHARTS_MAP = {
-  line: "LineChart",
-  bar: "BarChart",
-  pie: "PieChart",
-  scatter: "ScatterChart",
-  radar: "RadarChart",
-  map: "MapChart",
-  tree: "TreeChart",
-  treemap: "TreemapChart",
-  graph: "GraphChart",
-  chord: "ChordChart",
-  gauge: "GaugeChart",
-  funnel: "FunnelChart",
-  parallel: "ParallelChart",
-  sankey: "SankeyChart",
-  boxplot: "BoxplotChart",
-  candlestick: "CandlestickChart",
-  effectScatter: "EffectScatterChart",
-  lines: "LinesChart",
-  heatmap: "HeatmapChart",
-  pictorialBar: "PictorialBarChart",
-  themeRiver: "ThemeRiverChart",
-  sunburst: "SunburstChart",
-  custom: "CustomChart",
-};
-
-const COMPONENTS_GL_MAP = {
-  grid3D: "Grid3DComponent",
-  geo3D: "Geo3DComponent",
-  globe: "GlobeComponent",
-  mapbox3D: "Mapbox3DComponent",
-  maptalks3D: "Maptalks3DComponent",
-
-  // Dependencies
-  xAxis3D: "Grid3DComponent",
-  yAxis3D: "Grid3DComponent",
-  zAxis3D: "Grid3DComponent",
-};
-
-const CHARTS_GL_MAP = {
-  bar3D: "Bar3DChart",
-  line3D: "Line3DChart",
-  scatter3D: "Scatter3DChart",
-  lines3D: "Lines3DChart",
-  polygons3D: "Polygons3DChart",
-  surface: "SurfaceChart",
-  map3D: "Map3DChart",
-
-  scatterGL: "ScatterGLChart",
-  graphGL: "GraphGLChart",
-  flowGL: "FlowGLChart",
-  linesGL: "LinesGLChart",
-};
-
-const FEATURES = [
-  "UniversalTransition",
-  "LabelLayout",
-  "AxisBreak",
-  // "LegacyGridContainLabel",
-  "ScatterJitter",
-];
-const RENDERERS_MAP = {
-  canvas: "CanvasRenderer",
-  svg: "SVGRenderer",
-};
-
-const EXTENSIONS_MAP = {
-  bmap: "bmap/bmap",
-  // PENDING: There seem no examples that use dataTool
-  // dataTool: 'dataTool'
-};
-
-// Component that will be injected automatically in preprocessor
-// These should be excluded util find they were used explicitly.
-const MARKERS = ["markLine", "markArea", "markPoint"];
-const INJECTED_COMPONENTS = [
-  ...MARKERS,
-  "grid",
-  "axisPointer",
-  "aria", // TODO aria
-];
-
-// Component that was dependent.
-const DEPENDENT_COMPONENTS = [
-  "xAxis",
-  "yAxis",
-  "angleAxis",
-  "radiusAxis",
-  "xAxis3D",
-  "yAxis3D",
-  "zAxis3D",
-];
-
-function createReverseMap(map) {
-  const reverseMap = {};
-  Object.keys(map).forEach((key) => {
-    // Exclude dependencies.
-    if (DEPENDENT_COMPONENTS.includes(key)) {
-      return;
-    }
-    reverseMap[map[key]] = key;
-  });
-
-  return reverseMap;
-}
-
-const COMPONENTS_MAP_REVERSE = createReverseMap(COMPONENTS_MAP);
-const CHARTS_MAP_REVERSE = createReverseMap(CHARTS_MAP);
-const COMPONENTS_GL_MAP_REVERSE = createReverseMap(COMPONENTS_GL_MAP);
-const CHARTS_GL_MAP_REVERSE = createReverseMap(CHARTS_GL_MAP);
-
-function collectDeps(option) {
-  let deps = [];
-  if (option.options) {
-    // TODO getOption() doesn't have baseOption and options.
-    option.options.forEach((opt) => {
-      deps = deps.concat(collectDeps(opt));
-    });
-
-    if (option.baseOption) {
-      deps = deps.concat(collectDeps(option.baseOption));
-    }
-
-    // Remove duplicates
-    return Array.from(new Set(deps));
-  }
-
-  Object.keys(option).forEach((key) => {
-    if (INJECTED_COMPONENTS.includes(key)) {
-      return;
-    }
-    let val = option[key];
-
-    if (Array.isArray(val) && !val.length) {
-      return;
-    }
-
-    if (COMPONENTS_MAP[key]) {
-      deps.push(COMPONENTS_MAP[key]);
-    }
-    if (COMPONENTS_GL_MAP[key]) {
-      deps.push(COMPONENTS_GL_MAP[key]);
-    }
-    if (EXTENSIONS_MAP[key]) {
-      deps.push(key);
-    }
-  });
-
-  const series = Array.isArray(option.series) ? option.series : [option.series];
-  let hasScatterSeries = false;
-  series.forEach((seriesOpt) => {
-    if (seriesOpt.type === "scatter") {
-      hasScatterSeries = true;
-    }
-    if (CHARTS_MAP[seriesOpt.type]) {
-      deps.push(CHARTS_MAP[seriesOpt.type]);
-    }
-    if (CHARTS_GL_MAP[seriesOpt.type]) {
-      deps.push(CHARTS_GL_MAP[seriesOpt.type]);
-    }
-    if (seriesOpt.type === "map") {
-      // Needs geo component when using map
-      deps.push(COMPONENTS_MAP.geo);
-    }
-    if (seriesOpt.coordinateSystem === "bmap") {
-      deps.push("bmap");
-    }
-    MARKERS.forEach((markerType) => {
-      if (seriesOpt[markerType]) {
-        deps.push(COMPONENTS_MAP[markerType]);
-      }
-    });
-    // Features
-    if (seriesOpt.labelLayout) {
-      deps.push("LabelLayout");
-    }
-    if (seriesOpt.universalTransition) {
-      deps.push("UniversalTransition");
-    }
-  });
-
-  Object.keys(option).forEach((key) => {
-    if (key.endsWith("Axis")) {
-      const val = option[key];
-      for (const axisOption of Array.isArray(val) ? val : [val]) {
-        if (hasScatterSeries && +axisOption.jitter > 0) {
-          deps.push("ScatterJitter");
-        }
-        if (axisOption.breaks && axisOption.breaks.length > 0) {
-          deps.push("AxisBreak");
-        }
-      }
-    }
-  });
-
-  // Dataset transform
-  if (option.dataset && Array.isArray(option.dataset)) {
-    option.dataset.forEach((dataset) => {
-      if (dataset.transform) {
-        deps.push("TransformComponent");
-      }
-    });
-  }
-
-  // Remove duplicates
-  return Array.from(new Set(deps));
-}
-
-function buildMinimalBundleCode(
-  deps,
-  {
-    includeType,
-    semi = false,
-    quote = "'",
-    multiline = false,
-    indent = "  ",
-    maxLen = 80,
-  },
-) {
-  const options = {
-    semi,
-    quote,
-    multiline,
-    indent,
-    maxLen,
-  };
-
-  const chartsImports = [];
-  const componentsImports = [];
-  const chartsGLImports = [];
-  const componentsGLImports = [];
-  const featuresImports = [];
-  const renderersImports = [];
-  const extensionImports = [];
-
-  deps.forEach((dep) => {
-    if (dep.endsWith("Renderer")) {
-      renderersImports.push(dep);
-    } else if (CHARTS_MAP_REVERSE[dep]) {
-      chartsImports.push(dep);
-      if (includeType) {
-        chartsImports.push(dep.replace(/Chart$/, "SeriesOption"));
-      }
-    } else if (COMPONENTS_MAP_REVERSE[dep]) {
-      componentsImports.push(dep);
-      if (includeType) {
-        componentsImports.push(dep.replace(/Component$/, "ComponentOption"));
-      }
-    } else if (dep === "TransformComponent") {
-      // TransformComponent don't have individual option type.
-      // TODO will put in to an config if there are other similar components
-      componentsImports.push(dep);
-    } else if (CHARTS_GL_MAP_REVERSE[dep]) {
-      chartsGLImports.push(dep);
-    } else if (COMPONENTS_GL_MAP_REVERSE[dep]) {
-      componentsGLImports.push(dep);
-    } else if (FEATURES.includes(dep)) {
-      featuresImports.push(dep);
-    } else if (EXTENSIONS_MAP[dep]) {
-      extensionImports.push(dep);
-    }
-  });
-
-  const allImports = [
-    ...componentsImports,
-    ...chartsImports,
-    ...componentsGLImports,
-    ...chartsGLImports,
-    ...renderersImports,
-    ...featuresImports,
-  ];
-
-  const ECOptionTypeCode = typeItems(
-    allImports.filter((a) => a.endsWith("Option")),
-    options,
-  );
-
-  const importSources = [
-    [chartsImports, "echarts/charts"],
-    [componentsImports, "echarts/components"],
-    [featuresImports, "echarts/features"],
-    [renderersImports, "echarts/renderers"],
-    [chartsGLImports, "echarts-gl/charts"],
-    [componentsGLImports, "echarts-gl/components"],
-  ].filter((a) => a[0].length > 0);
-  const importStatements = importSources.map(([imports, mod]) =>
-    importItems(
-      imports.filter((a) => !a.endsWith("Option")),
-      mod,
-      options,
-    ),
-  );
-
-  const semiStr = semi ? ";" : "";
-
-  getExtensionDeps(extensionImports, includeType).forEach((ext) => {
-    importStatements.push(`import ${quote}${ext}${quote}${semiStr}`);
-  });
-
-  if (includeType) {
-    importStatements.push(
-      `import type { ComposeOption } from ${quote}echarts/core${quote}${semiStr}`,
-    );
-    const importTypeStatements = importSources
-      .map(([imports, mod]) =>
-        importItems(
-          imports.filter((a) => a.endsWith("Option")),
-          mod,
-          { ...options, type: true },
-        ),
-      )
-      .filter(Boolean);
-    importStatements.push(...importTypeStatements);
-  }
-
-  return `import { use } from ${quote}echarts/core${quote}${semiStr}
-${importStatements.join("\n")}
-
-${useItems(
-  allImports.filter((a) => !a.endsWith("Option")),
-  options,
-)}
-${includeType ? `\n${ECOptionTypeCode}` : ""}
-`;
-}
-function getExtensionDeps(deps, ts) {
-  return deps
-    .filter((dep) => EXTENSIONS_MAP[dep])
-    .map(
-      (dep) => `echarts/extension${ts ? "-src" : ""}/${EXTENSIONS_MAP[dep]}`,
-    );
-}
-
-/** import */
-function importItems(items, module, options) {
-  if (items.length === 0) {
-    return "";
-  }
-
-  const { multiline, maxLen } = options;
-
-  if (multiline) {
-    return importMultiLine(items, module, options);
-  }
-
-  const singleLine = importSingleLine(items, module, options);
-  if (singleLine.length <= maxLen) {
-    return singleLine;
-  }
-
-  return importMultiLine(items, module, options);
-}
-
-// import { foo, bar } from 'module'
-function importSingleLine(items, module, { type, semi, quote }) {
-  const typeStr = type ? "type " : "";
-  const semiStr = semi ? ";" : "";
-
-  return `import ${typeStr}{ ${items.join(
-    ", ",
-  )} } from ${quote}${module}${quote}${semiStr}`;
-}
-
-// import {
-//   foo,
-//   bar
-// } from 'module'
-function importMultiLine(items, module, { type, indent, semi, quote }) {
-  const typeStr = type ? "type " : "";
-  const semiStr = semi ? ";" : "";
-
-  return `import ${typeStr}{
-${items.map((item) => `${indent}${item}`).join(",\n")}
-} from ${quote}${module}${quote}${semiStr}`;
-}
-
-/** use */
-function useItems(items, options) {
-  if (items.length === 0) {
-    return "";
-  }
-
-  const { multiline, maxLen } = options;
-
-  if (multiline) {
-    return useMultiLine(items, options);
-  }
-
-  const singleLine = useSingleLine(items, options);
-  if (singleLine.length <= maxLen) {
-    return singleLine;
-  }
-
-  return useMultiLine(items, options);
-}
-
-// use([foo, bar])
-function useSingleLine(items, { semi }) {
-  const semiStr = semi ? ";" : "";
-
-  return `use([${items.join(`, `)}])${semiStr}`;
-}
-
-// use([
-//   foo,
-//   bar
-// ])
-function useMultiLine(items, { indent, semi }) {
-  const semiStr = semi ? ";" : "";
-
-  return `use([
-${items.map((item) => `${indent}${item}`).join(`,\n`)}
-])${semiStr}`;
-}
-
-/** type */
-function typeItems(items, options) {
-  const { multiline, maxLen } = options;
-
-  if (items.length === 0) {
-    return "";
-  }
-
-  if (multiline) {
-    return typeMultiLine(items, options);
-  }
-
-  const singleLine = typeSingleLine(items, options);
-  if (singleLine.length <= maxLen) {
-    return singleLine;
-  }
-
-  return typeMultiLine(items, options);
-}
-
-// type EChartsOption = ComposeOption<FooOption | BarOption>
-function typeSingleLine(items, { semi }) {
-  const semiStr = semi ? ";" : "";
-
-  return `type EChartsOption = ComposeOption<${items.join(` | `)}>${semiStr}`;
-}
-
-// type EChartsOption = ComposeOption<
-//   | FooOption
-//   | BarOption
-// >
-function typeMultiLine(items, { indent, semi }) {
-  const semiStr = semi ? ";" : "";
-
-  return `type EChartsOption = ComposeOption<
-${items.map((item) => `${indent}| ${item}`).join("\n")}
->${semiStr}`;
-}
-
-export function getImportsFromOption(
-  option,
-  { renderer = "canvas", ...options },
-) {
-  return buildMinimalBundleCode(
-    [...collectDeps(option), RENDERERS_MAP[renderer]],
-    options,
-  );
-}
diff --git a/demo/utils/codegen.ts b/demo/utils/codegen.ts
new file mode 100644
index 0000000..1a84cf8
--- /dev/null
+++ b/demo/utils/codegen.ts
@@ -0,0 +1,618 @@
+// Modified from https://github.com/apache/echarts-examples/blob/b644ced5325ea2522cb11606df54eae69bba3a3a/common/buildCode.js
+// See license at `./LICENSE`.
+
+type PlainObject = Record<string, unknown>;
+
+export type Quote = "'" | '"';
+
+interface FormatterOptions {
+  includeType?: boolean;
+  semi?: boolean;
+  quote?: Quote;
+  multiline?: boolean;
+  indent?: string;
+  maxLen?: number;
+  type?: boolean;
+}
+
+type FormatterOptionsWithDefaults = Required<
+  Omit<FormatterOptions, "type" | "includeType">
+> &
+  Pick<FormatterOptions, "type" | "includeType">;
+
+function isPlainObject(value: unknown): value is PlainObject {
+  return typeof value === "object" && value !== null;
+}
+
+const COMPONENTS_MAP: Record<string, string> = {
+  grid: "GridComponent",
+  polar: "PolarComponent",
+  geo: "GeoComponent",
+  singleAxis: "SingleAxisComponent",
+  parallel: "ParallelComponent",
+  calendar: "CalendarComponent",
+  matrix: "MatrixComponent",
+  graphic: "GraphicComponent",
+  toolbox: "ToolboxComponent",
+  tooltip: "TooltipComponent",
+  axisPointer: "AxisPointerComponent",
+  brush: "BrushComponent",
+  title: "TitleComponent",
+  timeline: "TimelineComponent",
+  markPoint: "MarkPointComponent",
+  markLine: "MarkLineComponent",
+  markArea: "MarkAreaComponent",
+  legend: "LegendComponent",
+  dataZoom: "DataZoomComponent",
+  visualMap: "VisualMapComponent",
+  thumbnail: "ThumbnailComponent",
+  aria: "AriaComponent",
+  dataset: "DatasetComponent",
+
+  // Dependencies
+  xAxis: "GridComponent",
+  yAxis: "GridComponent",
+  angleAxis: "PolarComponent",
+  radiusAxis: "PolarComponent",
+};
+
+const CHARTS_MAP: Record<string, string> = {
+  line: "LineChart",
+  bar: "BarChart",
+  pie: "PieChart",
+  scatter: "ScatterChart",
+  radar: "RadarChart",
+  map: "MapChart",
+  tree: "TreeChart",
+  treemap: "TreemapChart",
+  graph: "GraphChart",
+  chord: "ChordChart",
+  gauge: "GaugeChart",
+  funnel: "FunnelChart",
+  parallel: "ParallelChart",
+  sankey: "SankeyChart",
+  boxplot: "BoxplotChart",
+  candlestick: "CandlestickChart",
+  effectScatter: "EffectScatterChart",
+  lines: "LinesChart",
+  heatmap: "HeatmapChart",
+  pictorialBar: "PictorialBarChart",
+  themeRiver: "ThemeRiverChart",
+  sunburst: "SunburstChart",
+  custom: "CustomChart",
+};
+
+const COMPONENTS_GL_MAP: Record<string, string> = {
+  grid3D: "Grid3DComponent",
+  geo3D: "Geo3DComponent",
+  globe: "GlobeComponent",
+  mapbox3D: "Mapbox3DComponent",
+  maptalks3D: "Maptalks3DComponent",
+
+  // Dependencies
+  xAxis3D: "Grid3DComponent",
+  yAxis3D: "Grid3DComponent",
+  zAxis3D: "Grid3DComponent",
+};
+
+const CHARTS_GL_MAP: Record<string, string> = {
+  bar3D: "Bar3DChart",
+  line3D: "Line3DChart",
+  scatter3D: "Scatter3DChart",
+  lines3D: "Lines3DChart",
+  polygons3D: "Polygons3DChart",
+  surface: "SurfaceChart",
+  map3D: "Map3DChart",
+
+  scatterGL: "ScatterGLChart",
+  graphGL: "GraphGLChart",
+  flowGL: "FlowGLChart",
+  linesGL: "LinesGLChart",
+};
+
+const FEATURES: string[] = [
+  "UniversalTransition",
+  "LabelLayout",
+  "AxisBreak",
+  // "LegacyGridContainLabel",
+  "ScatterJitter",
+];
+const RENDERERS_MAP: Record<string, string> = {
+  canvas: "CanvasRenderer",
+  svg: "SVGRenderer",
+};
+
+const EXTENSIONS_MAP: Record<string, string> = {
+  bmap: "bmap/bmap",
+  // PENDING: There seem no examples that use dataTool
+  // dataTool: 'dataTool'
+};
+
+// Component that will be injected automatically in preprocessor
+// These should be excluded util find they were used explicitly.
+const MARKERS: string[] = ["markLine", "markArea", "markPoint"];
+const INJECTED_COMPONENTS: string[] = [
+  ...MARKERS,
+  "grid",
+  "axisPointer",
+  "aria", // TODO aria
+];
+
+// Component that was dependent.
+const DEPENDENT_COMPONENTS: string[] = [
+  "xAxis",
+  "yAxis",
+  "angleAxis",
+  "radiusAxis",
+  "xAxis3D",
+  "yAxis3D",
+  "zAxis3D",
+];
+
+function createReverseMap(map: Record<string, string>): Record<string, string> {
+  const reverseMap: Record<string, string> = {};
+  Object.keys(map).forEach((key) => {
+    // Exclude dependencies.
+    if (DEPENDENT_COMPONENTS.includes(key)) {
+      return;
+    }
+    reverseMap[map[key]] = key;
+  });
+
+  return reverseMap;
+}
+
+const COMPONENTS_MAP_REVERSE = createReverseMap(COMPONENTS_MAP);
+const CHARTS_MAP_REVERSE = createReverseMap(CHARTS_MAP);
+const COMPONENTS_GL_MAP_REVERSE = createReverseMap(COMPONENTS_GL_MAP);
+const CHARTS_GL_MAP_REVERSE = createReverseMap(CHARTS_GL_MAP);
+
+type DependencyList = string[];
+
+type OptionLike = PlainObject & {
+  options?: unknown;
+  baseOption?: unknown;
+  series?: unknown;
+  dataset?: unknown;
+};
+
+type SeriesOptionLike = PlainObject & {
+  type?: unknown;
+  coordinateSystem?: unknown;
+  labelLayout?: unknown;
+  universalTransition?: unknown;
+};
+
+function isOptionLike(value: unknown): value is OptionLike {
+  return isPlainObject(value);
+}
+
+function isSeriesOptionLike(value: unknown): value is SeriesOptionLike {
+  return isPlainObject(value);
+}
+
+function toOptionLike(value: unknown): OptionLike | null {
+  return isOptionLike(value) ? value : null;
+}
+
+function toSeriesList(value: unknown): SeriesOptionLike[] {
+  const list: SeriesOptionLike[] = [];
+  if (Array.isArray(value)) {
+    value.forEach((item) => {
+      if (isSeriesOptionLike(item)) {
+        list.push(item);
+      }
+    });
+  } else if (isSeriesOptionLike(value)) {
+    list.push(value);
+  }
+  return list;
+}
+
+function collectDeps(option: unknown): DependencyList {
+  const deps: DependencyList = [];
+  const optionObject = toOptionLike(option);
+  if (!optionObject) {
+    return deps;
+  }
+
+  const nestedOptions = optionObject.options;
+  if (Array.isArray(nestedOptions)) {
+    // TODO getOption() doesn't have baseOption and options.
+    nestedOptions.forEach((opt) => {
+      deps.push(...collectDeps(opt));
+    });
+  }
+
+  if (optionObject.baseOption) {
+    deps.push(...collectDeps(optionObject.baseOption));
+  }
+
+  if (deps.length === 0) {
+    Object.keys(optionObject).forEach((key) => {
+      if (INJECTED_COMPONENTS.includes(key)) {
+        return;
+      }
+      const value = optionObject[key];
+
+      if (Array.isArray(value) && value.length === 0) {
+        return;
+      }
+
+      if (COMPONENTS_MAP[key]) {
+        deps.push(COMPONENTS_MAP[key]);
+      }
+      if (COMPONENTS_GL_MAP[key]) {
+        deps.push(COMPONENTS_GL_MAP[key]);
+      }
+      if (EXTENSIONS_MAP[key]) {
+        deps.push(key);
+      }
+    });
+
+    const seriesList = toSeriesList(optionObject.series);
+    let hasScatterSeries = false;
+    seriesList.forEach((seriesOpt) => {
+      const type = typeof seriesOpt.type === "string" ? seriesOpt.type : "";
+      if (type === "scatter") {
+        hasScatterSeries = true;
+      }
+      if (CHARTS_MAP[type]) {
+        deps.push(CHARTS_MAP[type]);
+      }
+      if (CHARTS_GL_MAP[type]) {
+        deps.push(CHARTS_GL_MAP[type]);
+      }
+      if (type === "map") {
+        deps.push(COMPONENTS_MAP.geo);
+      }
+      if (seriesOpt.coordinateSystem === "bmap") {
+        deps.push("bmap");
+      }
+      MARKERS.forEach((markerType) => {
+        if (isPlainObject(seriesOpt[markerType])) {
+          deps.push(COMPONENTS_MAP[markerType]);
+        }
+      });
+      if (seriesOpt.labelLayout) {
+        deps.push("LabelLayout");
+      }
+      if (seriesOpt.universalTransition) {
+        deps.push("UniversalTransition");
+      }
+    });
+
+    Object.keys(optionObject).forEach((key) => {
+      if (!key.endsWith("Axis")) {
+        return;
+      }
+      const value = optionObject[key];
+      const axes = Array.isArray(value) ? value : [value];
+      axes.forEach((axisOption) => {
+        if (!isPlainObject(axisOption)) {
+          return;
+        }
+        if (hasScatterSeries && Number(axisOption.jitter) > 0) {
+          deps.push("ScatterJitter");
+        }
+        const breaks = axisOption.breaks;
+        if (Array.isArray(breaks) && breaks.length > 0) {
+          deps.push("AxisBreak");
+        }
+      });
+    });
+
+    const dataset = optionObject.dataset;
+    if (Array.isArray(dataset)) {
+      dataset.forEach((item) => {
+        if (isPlainObject(item) && item.transform) {
+          deps.push("TransformComponent");
+        }
+      });
+    }
+  }
+
+  return Array.from(new Set(deps));
+}
+
+function withDefaults(options: FormatterOptions): FormatterOptionsWithDefaults {
+  return {
+    semi: options.semi ?? false,
+    quote: options.quote ?? "'",
+    multiline: options.multiline ?? false,
+    indent: options.indent ?? "  ",
+    maxLen: options.maxLen ?? 80,
+    includeType: options.includeType,
+    type: options.type,
+  };
+}
+
+function buildMinimalBundleCode(
+  deps: string[],
+  optionsInput: FormatterOptions,
+): string {
+  const options = withDefaults(optionsInput);
+
+  const chartsImports: string[] = [];
+  const componentsImports: string[] = [];
+  const chartsGLImports: string[] = [];
+  const componentsGLImports: string[] = [];
+  const featuresImports: string[] = [];
+  const renderersImports: string[] = [];
+  const extensionImports: string[] = [];
+
+  deps.forEach((dep) => {
+    if (dep.endsWith("Renderer")) {
+      renderersImports.push(dep);
+    } else if (CHARTS_MAP_REVERSE[dep]) {
+      chartsImports.push(dep);
+      if (options.includeType) {
+        chartsImports.push(dep.replace(/Chart$/, "SeriesOption"));
+      }
+    } else if (COMPONENTS_MAP_REVERSE[dep]) {
+      componentsImports.push(dep);
+      if (options.includeType) {
+        componentsImports.push(dep.replace(/Component$/, "ComponentOption"));
+      }
+    } else if (dep === "TransformComponent") {
+      // TransformComponent don't have individual option type.
+      // TODO will put in to an config if there are other similar components
+      componentsImports.push(dep);
+    } else if (CHARTS_GL_MAP_REVERSE[dep]) {
+      chartsGLImports.push(dep);
+    } else if (COMPONENTS_GL_MAP_REVERSE[dep]) {
+      componentsGLImports.push(dep);
+    } else if (FEATURES.includes(dep)) {
+      featuresImports.push(dep);
+    } else if (EXTENSIONS_MAP[dep]) {
+      extensionImports.push(dep);
+    }
+  });
+
+  const allImports = [
+    ...componentsImports,
+    ...chartsImports,
+    ...componentsGLImports,
+    ...chartsGLImports,
+    ...renderersImports,
+    ...featuresImports,
+  ];
+
+  const ECOptionTypeCode = typeItems(
+    allImports.filter((a) => a.endsWith("Option")),
+    options,
+  );
+
+  const importSources: Array<[string[], string]> = [];
+  if (chartsImports.length) {
+    importSources.push([chartsImports, "echarts/charts"]);
+  }
+  if (componentsImports.length) {
+    importSources.push([componentsImports, "echarts/components"]);
+  }
+  if (featuresImports.length) {
+    importSources.push([featuresImports, "echarts/features"]);
+  }
+  if (renderersImports.length) {
+    importSources.push([renderersImports, "echarts/renderers"]);
+  }
+  if (chartsGLImports.length) {
+    importSources.push([chartsGLImports, "echarts-gl/charts"]);
+  }
+  if (componentsGLImports.length) {
+    importSources.push([componentsGLImports, "echarts-gl/components"]);
+  }
+  const importStatements = importSources.map(([imports, mod]) =>
+    importItems(
+      imports.filter((a) => !a.endsWith("Option")),
+      mod,
+      options,
+    ),
+  );
+
+  const semiStr = options.semi ? ";" : "";
+
+  getExtensionDeps(extensionImports, options.includeType).forEach((ext) => {
+    importStatements.push(
+      `import ${options.quote}${ext}${options.quote}${semiStr}`,
+    );
+  });
+
+  if (options.includeType) {
+    importStatements.push(
+      `import type { ComposeOption } from ${options.quote}echarts/core${options.quote}${semiStr}`,
+    );
+    const importTypeStatements = importSources
+      .map(([imports, mod]) => {
+        const typeImports = imports.filter((item) => item.endsWith("Option"));
+        return typeImports.length > 0
+          ? importItems(typeImports, mod, { ...options, type: true })
+          : "";
+      })
+      .filter((statement): statement is string => statement.length > 0);
+    importStatements.push(...importTypeStatements);
+  }
+
+  return `import { use } from ${options.quote}echarts/core${options.quote}${semiStr}
+${importStatements.join("\n")}
+
+${useItems(
+  allImports.filter((a) => !a.endsWith("Option")),
+  options,
+)}
+${options.includeType ? `\n${ECOptionTypeCode}` : ""}
+`;
+}
+function getExtensionDeps(deps: string[], includeTypes?: boolean): string[] {
+  return deps
+    .filter((dep) => EXTENSIONS_MAP[dep])
+    .map(
+      (dep) =>
+        `echarts/extension${includeTypes ? "-src" : ""}/${EXTENSIONS_MAP[dep]}`,
+    );
+}
+
+/** import */
+function importItems(
+  items: string[],
+  module: string,
+  options: FormatterOptionsWithDefaults,
+): string {
+  if (items.length === 0) {
+    return "";
+  }
+
+  const { multiline, maxLen } = options;
+
+  if (multiline) {
+    return importMultiLine(items, module, options);
+  }
+
+  const singleLine = importSingleLine(items, module, options);
+  if (singleLine.length <= maxLen) {
+    return singleLine;
+  }
+
+  return importMultiLine(items, module, options);
+}
+
+// import { foo, bar } from 'module'
+function importSingleLine(
+  items: string[],
+  module: string,
+  { type, semi, quote }: FormatterOptionsWithDefaults,
+): string {
+  const typeStr = type ? "type " : "";
+  const semiStr = semi ? ";" : "";
+
+  return `import ${typeStr}{ ${items.join(
+    ", ",
+  )} } from ${quote}${module}${quote}${semiStr}`;
+}
+
+// import {
+//   foo,
+//   bar
+// } from 'module'
+function importMultiLine(
+  items: string[],
+  module: string,
+  { type, indent, semi, quote }: FormatterOptionsWithDefaults,
+): string {
+  const typeStr = type ? "type " : "";
+  const semiStr = semi ? ";" : "";
+
+  return `import ${typeStr}{
+${items.map((item) => `${indent}${item}`).join(",\n")}
+} from ${quote}${module}${quote}${semiStr}`;
+}
+
+/** use */
+function useItems(
+  items: string[],
+  options: FormatterOptionsWithDefaults,
+): string {
+  if (items.length === 0) {
+    return "";
+  }
+
+  const { multiline, maxLen } = options;
+
+  if (multiline) {
+    return useMultiLine(items, options);
+  }
+
+  const singleLine = useSingleLine(items, options);
+  if (singleLine.length <= maxLen) {
+    return singleLine;
+  }
+
+  return useMultiLine(items, options);
+}
+
+// use([foo, bar])
+function useSingleLine(
+  items: string[],
+  { semi }: FormatterOptionsWithDefaults,
+): string {
+  const semiStr = semi ? ";" : "";
+
+  return `use([${items.join(`, `)}])${semiStr}`;
+}
+
+// use([
+//   foo,
+//   bar
+// ])
+function useMultiLine(
+  items: string[],
+  { indent, semi }: FormatterOptionsWithDefaults,
+): string {
+  const semiStr = semi ? ";" : "";
+
+  return `use([
+${items.map((item) => `${indent}${item}`).join(`,\n`)}
+])${semiStr}`;
+}
+
+/** type */
+function typeItems(
+  items: string[],
+  options: FormatterOptionsWithDefaults,
+): string {
+  const { multiline, maxLen } = options;
+
+  if (items.length === 0) {
+    return "";
+  }
+
+  if (multiline) {
+    return typeMultiLine(items, options);
+  }
+
+  const singleLine = typeSingleLine(items, options);
+  if (singleLine.length <= maxLen) {
+    return singleLine;
+  }
+
+  return typeMultiLine(items, options);
+}
+
+// type EChartsOption = ComposeOption<FooOption | BarOption>
+function typeSingleLine(
+  items: string[],
+  { semi }: FormatterOptionsWithDefaults,
+): string {
+  const semiStr = semi ? ";" : "";
+
+  return `type EChartsOption = ComposeOption<${items.join(` | `)}>${semiStr}`;
+}
+
+// type EChartsOption = ComposeOption<
+//   | FooOption
+//   | BarOption
+// >
+function typeMultiLine(
+  items: string[],
+  { indent, semi }: FormatterOptionsWithDefaults,
+): string {
+  const semiStr = semi ? ";" : "";
+
+  return `type EChartsOption = ComposeOption<
+${items.map((item) => `${indent}| ${item}`).join("\n")}
+>${semiStr}`;
+}
+
+export interface PublicCodegenOptions extends FormatterOptions {
+  renderer?: keyof typeof RENDERERS_MAP;
+}
+
+export function getImportsFromOption(
+  option: unknown,
+  { renderer = "canvas", ...options }: PublicCodegenOptions = {},
+): string {
+  return buildMinimalBundleCode(
+    [...collectDeps(option), RENDERERS_MAP[renderer]],
+    options,
+  );
+}
diff --git a/demo/utils/dom.ts b/demo/utils/dom.ts
new file mode 100644
index 0000000..a4b4711
--- /dev/null
+++ b/demo/utils/dom.ts
@@ -0,0 +1,59 @@
+export const isClient = typeof window !== "undefined";
+
+let cachedScrollbarWidth: number | null = null;
+
+export function getScrollLockTarget(): HTMLElement | null {
+  return isClient ? document.body : null;
+}
+
+export function setHash(hash: string): void {
+  if (!isClient) {
+    return;
+  }
+  const value = hash ? (hash.startsWith("#") ? hash : `#${hash}`) : "";
+  if (window.location.hash === value) {
+    return;
+  }
+  const { pathname, search } = window.location;
+  window.history.replaceState(null, "", `${pathname}${search}${value}`);
+}
+
+export function getScrollbarWidth(): number {
+  if (!isClient) {
+    return 0;
+  }
+  if (cachedScrollbarWidth !== null) {
+    return cachedScrollbarWidth;
+  }
+
+  const root = document.documentElement;
+  const direct = Math.abs(window.innerWidth - root.clientWidth);
+  if (direct > 0) {
+    cachedScrollbarWidth = direct;
+    return cachedScrollbarWidth;
+  }
+
+  const probe = document.createElement("div");
+  Object.assign(probe.style, {
+    position: "absolute",
+    top: "-9999px",
+    width: "100px",
+    height: "100px",
+    overflow: "scroll",
+    visibility: "hidden",
+    pointerEvents: "none",
+  });
+
+  const rootScrollbarWidth =
+    getComputedStyle(root).getPropertyValue("scrollbar-width");
+  if (rootScrollbarWidth) {
+    probe.style.setProperty("scrollbar-width", rootScrollbarWidth);
+  }
+
+  root.appendChild(probe);
+  const width = probe.offsetWidth - probe.clientWidth;
+  root.removeChild(probe);
+
+  cachedScrollbarWidth = width;
+  return cachedScrollbarWidth;
+}
diff --git a/demo/utils/geo.ts b/demo/utils/geo.ts
new file mode 100644
index 0000000..6211ca0
--- /dev/null
+++ b/demo/utils/geo.ts
@@ -0,0 +1,16 @@
+import type { registerMap } from "echarts/core";
+
+type GeoJSONInput = Parameters<typeof registerMap>[1];
+
+type FeatureCollectionLike = { type?: unknown };
+
+export function isGeoJSONSource(value: unknown): value is GeoJSONInput {
+  if (typeof value === "string") {
+    return true;
+  }
+  if (value && typeof value === "object" && "type" in value) {
+    const type = (value as FeatureCollectionLike).type;
+    return type === "FeatureCollection";
+  }
+  return false;
+}
diff --git a/demo/workers/option.worker.ts b/demo/workers/option.worker.ts
new file mode 100644
index 0000000..b05ec80
--- /dev/null
+++ b/demo/workers/option.worker.ts
@@ -0,0 +1,589 @@
+import * as ts from "typescript";
+
+class ExternalImportError extends Error {
+  constructor(readonly request?: string) {
+    super();
+    this.name = "ExternalImportError";
+  }
+}
+
+interface AnalyzeRequest {
+  id: number;
+  code: string;
+}
+
+type DiagnosticSeverity = "error" | "warning" | "info" | "hint";
+
+interface AnalyzeDiagnostic {
+  message: string;
+  startLineNumber: number;
+  startColumn: number;
+  endLineNumber: number;
+  endColumn: number;
+  severity: DiagnosticSeverity;
+  code?: string;
+  source?: string;
+}
+
+interface AnalyzeResponse {
+  id: number;
+  strategy: StrategyName;
+  diagnostics: AnalyzeDiagnostic[];
+  issues: AnalysisIssue[];
+  output?: string;
+  option?: unknown;
+  runtimeError?: string | null;
+}
+
+type StrategyName = "expression" | "module";
+
+type IssueKind = "syntax" | "runtime" | "format";
+
+interface IssueRange {
+  startLineNumber: number;
+  startColumn: number;
+  endLineNumber: number;
+  endColumn: number;
+}
+
+interface AnalysisIssue {
+  kind: IssueKind;
+  severity: DiagnosticSeverity;
+  message: string;
+  hint?: string;
+  range?: IssueRange;
+}
+
+interface StrategySpec {
+  name: StrategyName;
+  prefix: string;
+  suffix: string;
+  enabled: (code: string) => boolean;
+}
+
+const STRATEGIES: StrategySpec[] = [
+  {
+    name: "expression",
+    prefix: "const __ve_option__ = (\n",
+    suffix: "\n);\nexport default __ve_option__;\n",
+    enabled(code) {
+      return !/^\s*export\s+/m.test(code);
+    },
+  },
+  {
+    name: "module",
+    prefix: "",
+    suffix: "",
+    enabled() {
+      return true;
+    },
+  },
+];
+
+const compilerOptions: ts.CompilerOptions = {
+  allowJs: true,
+  esModuleInterop: true,
+  forceConsistentCasingInFileNames: true,
+  isolatedModules: true,
+  lib: ["es2020", "dom"],
+  module: ts.ModuleKind.CommonJS,
+  moduleResolution: ts.ModuleResolutionKind.Node10,
+  preserveConstEnums: true,
+  skipLibCheck: true,
+  strict: false,
+  target: ts.ScriptTarget.ES2020,
+};
+
+const severityMap: Record<ts.DiagnosticCategory, DiagnosticSeverity> = {
+  [ts.DiagnosticCategory.Warning]: "warning",
+  [ts.DiagnosticCategory.Error]: "error",
+  [ts.DiagnosticCategory.Message]: "info",
+  [ts.DiagnosticCategory.Suggestion]: "hint",
+};
+
+function countLines(value: string) {
+  const parts = value.split("\n");
+  const lines = parts.length - 1;
+  const lastLineLength = parts[parts.length - 1]?.length ?? 0;
+  return { lines, lastLineLength };
+}
+
+function sanitizeDiagnosticMessage(message: string): string {
+  return message
+    .replace(/__ve_option__/g, "option")
+    .replace(/module\.exports/g, "export")
+    .replace(/__ve_option__\.([a-zA-Z_$][\w$]*)/g, "option.$1");
+}
+
+interface ConvertedDiagnostics {
+  diagnostics: AnalyzeDiagnostic[];
+  issues: AnalysisIssue[];
+}
+
+function convertDiagnostics(
+  sourceFile: ts.SourceFile,
+  diagnostics: readonly ts.Diagnostic[] | undefined,
+  strategy: StrategySpec,
+): ConvertedDiagnostics {
+  if (!diagnostics?.length) {
+    return { diagnostics: [], issues: [] };
+  }
+
+  const prefixInfo = countLines(strategy.prefix);
+  const suffixInfo = countLines(strategy.suffix);
+  const lastLineIndex = sourceFile.getLineAndCharacterOfPosition(
+    sourceFile.text.length,
+  ).line;
+  const results: AnalyzeDiagnostic[] = [];
+  const issues: AnalysisIssue[] = [];
+
+  diagnostics.forEach((diagnostic) => {
+    const file = diagnostic.file ?? sourceFile;
+    if (typeof diagnostic.start !== "number") {
+      const message = sanitizeDiagnosticMessage(
+        ts.flattenDiagnosticMessageText(diagnostic.messageText, "\n"),
+      );
+      const mapped: AnalyzeDiagnostic = {
+        message,
+        startLineNumber: 1,
+        startColumn: 1,
+        endLineNumber: 1,
+        endColumn: 1,
+        severity: severityMap[diagnostic.category] ?? "error",
+        code:
+          typeof diagnostic.code === "number"
+            ? String(diagnostic.code)
+            : undefined,
+        source: diagnostic.source,
+      };
+      results.push(mapped);
+      if (mapped.severity === "error") {
+        issues.push({
+          kind: "syntax",
+          severity: "error",
+          message,
+          range: {
+            startLineNumber: 1,
+            startColumn: 1,
+            endLineNumber: 1,
+            endColumn: 1,
+          },
+        });
+      }
+      return;
+    }
+
+    const startOffset = diagnostic.start;
+    const endOffset = startOffset + (diagnostic.length ?? 0);
+    const start = file.getLineAndCharacterOfPosition(startOffset);
+    const end = file.getLineAndCharacterOfPosition(endOffset);
+
+    if (start.line < prefixInfo.lines) {
+      return;
+    }
+    if (end.line > lastLineIndex - suffixInfo.lines) {
+      return;
+    }
+
+    const toUserLine = (line: number) => line - prefixInfo.lines + 1;
+    const toUserColumn = (line: number, column: number) => {
+      if (line === prefixInfo.lines) {
+        const offset = prefixInfo.lastLineLength;
+        const adjusted = column - offset;
+        return Math.max(1, adjusted + 1);
+      }
+      return column + 1;
+    };
+
+    const startLineNumber = toUserLine(start.line);
+    const endLineNumber = toUserLine(end.line);
+
+    if (startLineNumber < 1 || endLineNumber < startLineNumber) {
+      return;
+    }
+
+    const startColumn = toUserColumn(start.line, start.character);
+    const endColumn = toUserColumn(end.line, end.character);
+
+    const message = sanitizeDiagnosticMessage(
+      ts.flattenDiagnosticMessageText(diagnostic.messageText, "\n"),
+    );
+    const mapped: AnalyzeDiagnostic = {
+      message,
+      startLineNumber,
+      startColumn,
+      endLineNumber,
+      endColumn,
+      severity: severityMap[diagnostic.category] ?? "error",
+      code:
+        typeof diagnostic.code === "number"
+          ? String(diagnostic.code)
+          : undefined,
+      source: diagnostic.source,
+    };
+    results.push(mapped);
+    if (mapped.severity === "error") {
+      issues.push({
+        kind: "syntax",
+        severity: "error",
+        message,
+        range: {
+          startLineNumber,
+          startColumn,
+          endLineNumber,
+          endColumn,
+        },
+      });
+    }
+  });
+
+  return { diagnostics: results, issues };
+}
+
+async function evaluateModule(js: string) {
+  try {
+    const exports: Record<string, unknown> = {};
+    const module = { exports } as { exports: Record<string, unknown> };
+    const requireShim = (request?: string) => {
+      throw new ExternalImportError(request);
+    };
+
+    const fn = new Function("exports", "module", "require", js) as (
+      exports: Record<string, unknown>,
+      module: { exports: Record<string, unknown> },
+      require: () => unknown,
+    ) => void;
+    fn(exports, module, requireShim);
+
+    const candidate = module.exports?.default ?? module.exports;
+    if (
+      candidate &&
+      typeof (candidate as Promise<unknown>).then === "function"
+    ) {
+      try {
+        const value = await (candidate as Promise<unknown>);
+        return { value } as const;
+      } catch (error) {
+        return { error } as const;
+      }
+    }
+    return { value: candidate } as const;
+  } catch (error) {
+    return { error } as const;
+  }
+}
+
+function cloneSerializable(value: unknown) {
+  try {
+    if (typeof structuredClone === "function") {
+      return { result: structuredClone(value), error: null };
+    }
+  } catch (error) {
+    return {
+      result: null,
+      error: error instanceof Error ? error.message : String(error ?? ""),
+    } as const;
+  }
+
+  try {
+    return {
+      result: JSON.parse(JSON.stringify(value)) as unknown,
+      error: null,
+    } as const;
+  } catch (error) {
+    return {
+      result: null,
+      error: error instanceof Error ? error.message : String(error ?? ""),
+    } as const;
+  }
+}
+
+function buildFallback(sourceFile: ts.SourceFile): string {
+  if (!sourceFile.statements.length) {
+    return "";
+  }
+  const last = sourceFile.statements[sourceFile.statements.length - 1];
+  if (!ts.isVariableStatement(last)) {
+    return "";
+  }
+  const names: string[] = [];
+  last.declarationList.declarations.forEach((declaration) => {
+    if (ts.isIdentifier(declaration.name)) {
+      names.push(declaration.name.text);
+    }
+  });
+  if (!names.length) {
+    return "";
+  }
+  const guards = names
+    .map(
+      (name) => `  if (typeof ${name} !== "undefined") {
+    module.exports = { default: ${name} };
+  }
+`,
+    )
+    .join("\n");
+  return `if (typeof module !== "undefined" && module && module.exports && Object.keys(module.exports).length === 0) {
+${guards}}
+`;
+}
+
+async function analyze(code: string): Promise<Omit<AnalyzeResponse, "id">> {
+  const candidates = STRATEGIES.filter((strategy) =>
+    strategy.enabled(code),
+  ).map((strategy) => {
+    const baseWrapped = `${strategy.prefix}${code}${strategy.suffix}`;
+    const baseSourceFile = ts.createSourceFile(
+      "ve-option.ts",
+      baseWrapped,
+      ts.ScriptTarget.ES2020,
+      true,
+      ts.ScriptKind.TSX,
+    );
+
+    const fallback = buildFallback(baseSourceFile);
+    const wrapped = fallback ? `${baseWrapped}\n${fallback}` : baseWrapped;
+    const sourceFile = fallback
+      ? ts.createSourceFile(
+          "ve-option.ts",
+          wrapped,
+          ts.ScriptTarget.ES2020,
+          true,
+          ts.ScriptKind.TSX,
+        )
+      : baseSourceFile;
+
+    const result = ts.transpileModule(wrapped, {
+      compilerOptions,
+      reportDiagnostics: true,
+      fileName: sourceFile.fileName,
+    });
+
+    const { diagnostics, issues: syntaxIssues } = convertDiagnostics(
+      sourceFile,
+      result.diagnostics,
+      strategy,
+    );
+
+    const errorCount = syntaxIssues.length;
+
+    return {
+      strategy,
+      wrapped,
+      diagnostics,
+      syntaxIssues,
+      errorCount,
+      output: result.outputText,
+    };
+  });
+
+  if (!candidates.length) {
+    return {
+      strategy: "module",
+      diagnostics: [],
+      issues: [
+        {
+          kind: "runtime",
+          severity: "error",
+          message:
+            "Option analyzer could not find a parsing strategy for this code.",
+          hint: "Ensure the option is a valid JavaScript/TypeScript expression or module export.",
+        },
+      ],
+      runtimeError:
+        "Option analyzer could not find a parsing strategy for this code.",
+    };
+  }
+
+  candidates.sort((a, b) => a.errorCount - b.errorCount);
+  const winner = candidates[0];
+  const issues: AnalysisIssue[] = [...winner.syntaxIssues];
+
+  if (winner.errorCount > 0 || !winner.output) {
+    return {
+      strategy: winner.strategy.name,
+      diagnostics: winner.diagnostics,
+      issues,
+    };
+  }
+
+  const { value, error } = await evaluateModule(winner.output);
+
+  if (error) {
+    const runtimeIssue = normalizeRuntimeIssue(error);
+    issues.push(runtimeIssue);
+    return {
+      strategy: winner.strategy.name,
+      diagnostics: winner.diagnostics,
+      issues,
+      output: winner.output,
+      runtimeError: runtimeIssue.message,
+    };
+  }
+
+  const validation = validateOptionExport(value);
+  if (!validation.ok) {
+    issues.push(validation.issue);
+    return {
+      strategy: winner.strategy.name,
+      diagnostics: winner.diagnostics,
+      issues,
+      output: winner.output,
+      runtimeError: validation.issue.message,
+    };
+  }
+
+  const { result: clonedValue, error: cloneError } = cloneSerializable(
+    validation.value,
+  );
+  if (cloneError) {
+    const serializationIssue = normalizeSerializationIssue(cloneError);
+    issues.push(serializationIssue);
+    return {
+      strategy: winner.strategy.name,
+      diagnostics: winner.diagnostics,
+      issues,
+      output: winner.output,
+      runtimeError: serializationIssue.message,
+    };
+  }
+
+  return {
+    strategy: winner.strategy.name,
+    diagnostics: winner.diagnostics,
+    issues,
+    output: winner.output,
+    option: clonedValue,
+    runtimeError: null,
+  };
+}
+
+self.onmessage = async (event: MessageEvent<AnalyzeRequest>) => {
+  const { id, code } = event.data;
+  const response = await analyze(code);
+  (self as unknown as Worker).postMessage({
+    id,
+    ...response,
+  } satisfies AnalyzeResponse);
+};
+
+function normalizeRuntimeIssue(error: unknown): AnalysisIssue {
+  if (error instanceof ExternalImportError) {
+    const source = error.request;
+    return {
+      kind: "runtime",
+      severity: "error",
+      message: source
+        ? `Imports from "${source}" can't be resolved in this editor.`
+        : "Imports that reference other files can't be resolved in this editor.",
+      hint: "Inline the referenced values directly inside the option snippet before generating imports.",
+    };
+  }
+
+  const message = toUserFacingMessage(error);
+  if (/Dynamic require/i.test(message)) {
+    return {
+      kind: "runtime",
+      severity: "error",
+      message:
+        "Imports that reference other files can't be resolved in this editor.",
+      hint: "Inline the referenced values directly inside the option snippet before generating imports.",
+    };
+  }
+  return {
+    kind: "runtime",
+    severity: "error",
+    message,
+  };
+}
+
+function normalizeSerializationIssue(detail: string): AnalysisIssue {
+  const message =
+    "The exported option includes values that cannot be serialized (e.g. functions or DOM nodes).";
+  return {
+    kind: "format",
+    severity: "error",
+    message,
+    hint: detail,
+  };
+}
+
+function toUserFacingMessage(error: unknown): string {
+  if (error instanceof Error) {
+    return error.message;
+  }
+  if (typeof error === "string") {
+    return error;
+  }
+  return "The option module threw an unknown error.";
+}
+
+function validateOptionExport(
+  value: unknown,
+):
+  | { ok: true; value: Record<string, unknown> }
+  | { ok: false; issue: AnalysisIssue } {
+  if (value === null || value === undefined) {
+    return {
+      ok: false,
+      issue: createMissingExportIssue(),
+    };
+  }
+
+  if (typeof value !== "object" || Array.isArray(value)) {
+    return {
+      ok: false,
+      issue: createInvalidExportIssue(value),
+    };
+  }
+
+  return {
+    ok: true,
+    value: value as Record<string, unknown>,
+  };
+}
+
+function createMissingExportIssue(): AnalysisIssue {
+  return {
+    kind: "format",
+    severity: "error",
+    message:
+      "No ECharts option export was found. Export your option object as the default value.",
+    hint: "Use `export default { ... }` or assign the option to the last declared variable.",
+  };
+}
+
+function createInvalidExportIssue(value: unknown): AnalysisIssue {
+  const type = typeof value;
+  const base: AnalysisIssue = {
+    kind: "format",
+    severity: "error",
+    message: "The default export must be an ECharts option object.",
+  };
+
+  if (type === "function") {
+    return {
+      ...base,
+      hint: "Call the function and export its return value instead of the function itself.",
+    };
+  }
+
+  if (type !== "object") {
+    return {
+      ...base,
+      hint: `Received a ${type}. Export an object with fields such as series or xAxis instead.`,
+    };
+  }
+
+  if (Array.isArray(value)) {
+    return {
+      ...base,
+      hint: "Arrays are not valid options. Wrap your data in an object with option properties.",
+    };
+  }
+
+  return base;
+}
+
+export { analyze };
+export type { AnalysisIssue, IssueKind, IssueRange };
diff --git a/package.json b/package.json
index f3a4cab..7a279bf 100644
--- a/package.json
+++ b/package.json
@@ -44,7 +44,6 @@
     "vue": "^3.3.0"
   },
   "devDependencies": {
-    "@highlightjs/vue-plugin": "^2.1.0",
     "@types/node": "^22.17.1",
     "@typescript-eslint/utils": "^8.39.1",
     "@vercel/analytics": "^1.5.0",
@@ -59,12 +58,10 @@
     "comment-mark": "^2.0.1",
     "echarts": "^6.0.0",
     "echarts-gl": "^2.0.9",
-    "echarts-liquidfill": "^3.1.0",
-    "esbuild-wasm": "^0.25.9",
     "eslint": "^9.33.0",
     "eslint-plugin-vue": "^10.4.0",
-    "highlight.js": "^11.11.1",
     "jiti": "^2.5.1",
+    "monaco-editor": "^0.53.0",
     "pinia": "^3.0.3",
     "playwright": "^1.55.0",
     "postcss-nested": "^7.0.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index aee27b5..f54cd01 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -11,9 +11,6 @@ importers:
 
   .:
     devDependencies:
-      '@highlightjs/vue-plugin':
-        specifier: ^2.1.0
-        version: 2.1.0(highlight.js@11.11.1)(vue@3.5.21(typescript@5.9.2))
       '@types/node':
         specifier: ^22.17.1
         version: 22.18.6
@@ -56,24 +53,18 @@ importers:
       echarts-gl:
         specifier: ^2.0.9
         version: 2.0.9(echarts@6.0.0)
-      echarts-liquidfill:
-        specifier: ^3.1.0
-        version: 3.1.0(echarts@6.0.0)
-      esbuild-wasm:
-        specifier: ^0.25.9
-        version: 0.25.10
       eslint:
         specifier: ^9.33.0
         version: 9.36.0(jiti@2.5.1)
       eslint-plugin-vue:
         specifier: ^10.4.0
         version: 10.4.0(@typescript-eslint/parser@8.39.1(eslint@9.36.0(jiti@2.5.1))(typescript@5.9.2))(eslint@9.36.0(jiti@2.5.1))(vue-eslint-parser@10.2.0(eslint@9.36.0(jiti@2.5.1)))
-      highlight.js:
-        specifier: ^11.11.1
-        version: 11.11.1
       jiti:
         specifier: ^2.5.1
         version: 2.5.1
+      monaco-editor:
+        specifier: ^0.53.0
+        version: 0.53.0
       pinia:
         specifier: ^3.0.3
         version: 3.0.3(typescript@5.9.2)(vue@3.5.21(typescript@5.9.2))
@@ -208,12 +199,6 @@ packages:
   '@emnapi/wasi-threads@1.1.0':
     resolution: {integrity: sha512-WI0DdZ8xFSbgMjR1sFsKABJ/C5OnRrjT06JXbZKexJGrDuPTzZdDYfFlsgcCXCyf+suG5QU2e/y1Wo2V/OapLQ==}
 
-  '@eslint-community/eslint-utils@4.7.0':
-    resolution: {integrity: sha512-dyybb3AcajC7uha6CvhdVRJqaKyn7w2YKqKyAN37NKYgZT36w+iRb0Dymmc5qEJ549c/S31cMMSFd75bteCpCw==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    peerDependencies:
-      eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
-
   '@eslint-community/eslint-utils@4.9.0':
     resolution: {integrity: sha512-ayVFHdtZ+hsq1t2Dy24wCmGXGe4q9Gu3smhLYALJrr473ZH27MsnSL+LKUlimp4BWJqMDMLmPpx/Q9R3OAlL4g==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -252,12 +237,6 @@ packages:
     resolution: {integrity: sha512-Z5kJ+wU3oA7MMIqVR9tyZRtjYPr4OC004Q4Rw7pgOKUOKkJfZ3O24nz3WYfGRpMDNmcOi3TwQOmgm7B7Tpii0w==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@highlightjs/vue-plugin@2.1.0':
-    resolution: {integrity: sha512-E+bmk4ncca+hBEYRV2a+1aIzIV0VSY/e5ArjpuSN9IO7wBJrzUE2u4ESCwrbQD7sAy+jWQjkV5qCCWgc+pu7CQ==}
-    peerDependencies:
-      highlight.js: ^11.0.1
-      vue: ^3
-
   '@humanfs/core@0.19.1':
     resolution: {integrity: sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==}
     engines: {node: '>=18.18.0'}
@@ -557,6 +536,9 @@ packages:
   '@types/node@22.18.6':
     resolution: {integrity: sha512-r8uszLPpeIWbNKtvWRt/DbVi5zbqZyj1PTmhRMqBMvDnaz1QpmSKujUtJLrqGZeoM8v72MfYggDceY4K1itzWQ==}
 
+  '@types/trusted-types@1.0.6':
+    resolution: {integrity: sha512-230RC8sFeHoT6sSUlRO6a8cAnclO06eeiq1QDfiv2FGCLWFvvERWgwIQD4FWqD9A69BN7Lzee4OXwoMVnnsWDw==}
+
   '@types/web-bluetooth@0.0.21':
     resolution: {integrity: sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA==}
 
@@ -1114,11 +1096,6 @@ packages:
     peerDependencies:
       echarts: ^5.1.2
 
-  echarts-liquidfill@3.1.0:
-    resolution: {integrity: sha512-5Dlqs/jTsdTUAsd+K5LPLLTgrbbNORUSBQyk8PSy1Mg2zgHDWm83FmvA4s0ooNepCJojFYRITTQ4GU1UUSKYLw==}
-    peerDependencies:
-      echarts: ^5.0.1
-
   echarts@6.0.0:
     resolution: {integrity: sha512-Tte/grDQRiETQP4xz3iZWSvoHrkCQtwqd6hs+mifXcjrCuo2iKWbajFObuLJVBlDIJlOzgQPd1hsaKt/3+OMkQ==}
 
@@ -1148,11 +1125,6 @@ packages:
   es-module-lexer@1.7.0:
     resolution: {integrity: sha512-jEQoCwk8hyb2AZziIOLhDqpm5+2ww5uIE6lkO/6jcOCusfk6LhMHpXXfBLXTZ7Ydyt0j4VoUQv6uGNYbdW+kBA==}
 
-  esbuild-wasm@0.25.10:
-    resolution: {integrity: sha512-IyyfrTA2iiOh/uhlaJj0aUDgW42lFhr29ZeKouVNOz/8mLyuqWbEuVst+B4RBH18pb3AcOHnaOgyskAbsVOe3A==}
-    engines: {node: '>=18'}
-    hasBin: true
-
   escalade@3.2.0:
     resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==}
     engines: {node: '>=6'}
@@ -1350,10 +1322,6 @@ packages:
     resolution: {integrity: sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==}
     hasBin: true
 
-  highlight.js@11.11.1:
-    resolution: {integrity: sha512-Xwwo44whKBVCYoliBQwaPvtd/2tYFkRQtXDWj1nackaV2JPXx3L0+Jvd8/qCJ2p+ML0/XVkJ2q+Mr+UVdpJK5w==}
-    engines: {node: '>=12.0.0'}
-
   hookable@5.5.3:
     resolution: {integrity: sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==}
 
@@ -1623,6 +1591,9 @@ packages:
   mitt@3.0.1:
     resolution: {integrity: sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==}
 
+  monaco-editor@0.53.0:
+    resolution: {integrity: sha512-0WNThgC6CMWNXXBxTbaYYcunj08iB5rnx4/G56UOPeL9UVIUGGHA1GR0EWIh9Ebabj7NpCRawQ5b0hfN1jQmYQ==}
+
   mri@1.2.0:
     resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==}
     engines: {node: '>=4'}
@@ -2429,11 +2400,6 @@ snapshots:
       tslib: 2.8.1
     optional: true
 
-  '@eslint-community/eslint-utils@4.7.0(eslint@9.36.0(jiti@2.5.1))':
-    dependencies:
-      eslint: 9.36.0(jiti@2.5.1)
-      eslint-visitor-keys: 3.4.3
-
   '@eslint-community/eslint-utils@4.9.0(eslint@9.36.0(jiti@2.5.1))':
     dependencies:
       eslint: 9.36.0(jiti@2.5.1)
@@ -2478,11 +2444,6 @@ snapshots:
       '@eslint/core': 0.15.2
       levn: 0.4.1
 
-  '@highlightjs/vue-plugin@2.1.0(highlight.js@11.11.1)(vue@3.5.21(typescript@5.9.2))':
-    dependencies:
-      highlight.js: 11.11.1
-      vue: 3.5.21(typescript@5.9.2)
-
   '@humanfs/core@0.19.1': {}
 
   '@humanfs/node@0.16.7':
@@ -2701,6 +2662,8 @@ snapshots:
     dependencies:
       undici-types: 6.21.0
 
+  '@types/trusted-types@1.0.6': {}
+
   '@types/web-bluetooth@0.0.21': {}
 
   '@typescript-eslint/eslint-plugin@8.39.1(@typescript-eslint/parser@8.39.1(eslint@9.36.0(jiti@2.5.1))(typescript@5.9.2))(eslint@9.36.0(jiti@2.5.1))(typescript@5.9.2)':
@@ -3337,10 +3300,6 @@ snapshots:
       echarts: 6.0.0
       zrender: 5.6.1
 
-  echarts-liquidfill@3.1.0(echarts@6.0.0):
-    dependencies:
-      echarts: 6.0.0
-
   echarts@6.0.0:
     dependencies:
       tslib: 2.3.0
@@ -3366,8 +3325,6 @@ snapshots:
 
   es-module-lexer@1.7.0: {}
 
-  esbuild-wasm@0.25.10: {}
-
   escalade@3.2.0: {}
 
   escape-string-regexp@4.0.0: {}
@@ -3387,7 +3344,7 @@ snapshots:
 
   eslint-plugin-vue@10.4.0(@typescript-eslint/parser@8.39.1(eslint@9.36.0(jiti@2.5.1))(typescript@5.9.2))(eslint@9.36.0(jiti@2.5.1))(vue-eslint-parser@10.2.0(eslint@9.36.0(jiti@2.5.1))):
     dependencies:
-      '@eslint-community/eslint-utils': 4.7.0(eslint@9.36.0(jiti@2.5.1))
+      '@eslint-community/eslint-utils': 4.9.0(eslint@9.36.0(jiti@2.5.1))
       eslint: 9.36.0(jiti@2.5.1)
       natural-compare: 1.4.0
       nth-check: 2.1.1
@@ -3574,8 +3531,6 @@ snapshots:
 
   he@1.2.0: {}
 
-  highlight.js@11.11.1: {}
-
   hookable@5.5.3: {}
 
   html-encoding-sniffer@4.0.0:
@@ -3835,6 +3790,10 @@ snapshots:
 
   mitt@3.0.1: {}
 
+  monaco-editor@0.53.0:
+    dependencies:
+      '@types/trusted-types': 1.0.6
+
   mri@1.2.0: {}
 
   mrmime@2.0.1: {}
diff --git a/src/ECharts.ts b/src/ECharts.ts
index d99c520..7af763a 100644
--- a/src/ECharts.ts
+++ b/src/ECharts.ts
@@ -56,7 +56,8 @@ export const UPDATE_OPTIONS_KEY: InjectionKey<UpdateOptionsInjection> =
 export { LOADING_OPTIONS_KEY } from "./composables";
 
 export default defineComponent({
-  name: "echarts",
+  name: "Echarts",
+  inheritAttrs: false,
   props: {
     option: Object as PropType<Option>,
     theme: {
@@ -71,7 +72,6 @@ export default defineComponent({
   },
   emits: {} as unknown as Emits,
   slots: Object as SlotsTypes,
-  inheritAttrs: false,
   setup(props, { attrs, expose, slots }) {
     const root = shallowRef<EChartsElement>();
     const chart = shallowRef<EChartsType>();
diff --git a/tests/option.worker.test.ts b/tests/option.worker.test.ts
new file mode 100644
index 0000000..7f533fc
--- /dev/null
+++ b/tests/option.worker.test.ts
@@ -0,0 +1,97 @@
+import { afterAll, beforeAll, describe, expect, it, vi } from "vitest";
+
+type AnalyzeResult = {
+  issues: Array<{
+    kind: string;
+    severity: string;
+    message: string;
+    hint?: string;
+  }>;
+  option?: unknown;
+};
+type AnalyzeFn = (code: string) => Promise<AnalyzeResult>;
+
+describe("option worker issues", () => {
+  let originalSelf: unknown;
+  let analyze: AnalyzeFn;
+
+  beforeAll(async () => {
+    originalSelf = (globalThis as Record<string, unknown>).self;
+    const workerStub = {
+      postMessage: vi.fn(),
+    } as unknown as Worker;
+    (globalThis as Record<string, unknown>).self = workerStub;
+
+    const module = await import("../demo/workers/option.worker");
+    analyze = module.analyze;
+  });
+
+  afterAll(() => {
+    if (typeof originalSelf === "undefined") {
+      delete (globalThis as Record<string, unknown>).self;
+    } else {
+      (globalThis as Record<string, unknown>).self = originalSelf;
+    }
+  });
+
+  it("reports syntax issues without exposing internals", async () => {
+    const result = await analyze(
+      "const option = { foo: 'bar';\nexport default option;",
+    );
+
+    expect(result.issues).not.toHaveLength(0);
+    const issue = result.issues[0];
+    expect(issue.kind).toBe("syntax");
+    expect(issue.severity).toBe("error");
+    expect(issue.message).not.toContain("__ve_option__");
+    expect(issue.message).not.toContain("module.exports");
+  });
+
+  it("captures runtime failures with user-friendly messages", async () => {
+    const result = await analyze(
+      "export default (() => { throw new Error('boom'); })();",
+    );
+
+    const runtimeIssue = result.issues.find((item) => item.kind === "runtime");
+    expect(runtimeIssue).toBeDefined();
+    expect(runtimeIssue?.message ?? "").toContain("boom");
+    expect(result.option).toBeUndefined();
+  });
+
+  it("flags non-serializable option exports", async () => {
+    const result = await analyze("export default { label: () => 'hi' };");
+
+    const formatIssue = result.issues.find((item) => item.kind === "format");
+    expect(formatIssue).toBeDefined();
+    expect(formatIssue?.message ?? "").toContain("cannot be serialized");
+    expect(result.option).toBeUndefined();
+  });
+
+  it("guides users when external imports cannot be resolved", async () => {
+    const result = await analyze(
+      "import data from './data';\nexport default { data };",
+    );
+
+    const runtimeIssue = result.issues.find((item) => item.kind === "runtime");
+    expect(runtimeIssue).toBeDefined();
+    expect(runtimeIssue?.message ?? "").toContain(
+      'Imports from "./data" can\'t be resolved',
+    );
+    expect(runtimeIssue?.hint ?? "").toContain("Inline the referenced values");
+    expect(result.option).toBeUndefined();
+  });
+
+  it("reports when the default export is a function instead of an option object", async () => {
+    const result = await analyze("export default function getData() {}");
+
+    const formatIssue = result.issues.find((item) => item.kind === "format");
+    expect(formatIssue).toBeDefined();
+    expect(formatIssue?.message).toBe(
+      "The default export must be an ECharts option object.",
+    );
+    expect(formatIssue?.hint ?? "").toContain(
+      "Call the function and export its return value",
+    );
+    expect(result.option).toBeUndefined();
+  });
+});