diff --git a/playground/app.vue b/playground/app.vue
index f41b2c1..7a89459 100644
--- a/playground/app.vue
+++ b/playground/app.vue
@@ -47,7 +47,9 @@ const themeOptions = [
 
   <div class="grid gap-y-4 justify-center py-15 text-align-center">
     <header>
-      <EChartsLogo class="mx-auto fill-green-5 dark:fill-brand" />
+      <!-- <EChartsLogo class="mx-auto fill-green-5 dark:fill-brand" /> -->
+      <ChartLogo class="!inline-flex !w-fit !h-fit" />
+
       <h1>
         <NuxtLink to="https://github.com/kingyue737/nuxt-echarts"
           >Nuxt ECharts</NuxtLink
diff --git a/playground/components/Chart/Logo.server.vue b/playground/components/Chart/Logo.server.vue
new file mode 100644
index 0000000..bcc9647
--- /dev/null
+++ b/playground/components/Chart/Logo.server.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import 'echarts-liquidfill'
+
+const option = {
+  backgroundColor: 'transparent',
+  series: [
+    {
+      type: 'liquidFill',
+      data: [0.75, 0.6, 0.55, 0.45],
+      amplitude: 10,
+      outline: {
+        show: false,
+      },
+      radius: '100%',
+      color: ['#4fc08d', '#44d64a', '#33c762', '#4acc80'],
+      backgroundStyle: {
+        color: 'transparent',
+      },
+      shape: `path://M12 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0zm-.792 5.307c2.192-.025 4.366 1.134 5.43 3.304.909 1.852.878 3.61-.098 5.645-.477.995-.487 1.06-.241 1.578.214.452.727.779 1.221.779.454 0 1.15-.586 1.252-1.054.1-.454-.193-1.118-.607-1.377a10.11 10.11 0 0 1-.393-.255c-.129-.1.42-.38.741-.38.687 0 1.247.526 1.375 1.29.055.333.134.422.44.502.859.222 1.297 1.451.755 2.116-.22.27-.23.271-.305.042-.267-.801-.666-1.12-1.403-1.12-.319 0-.572.128-1.098.556-1.006.82-1.866 1.303-2.907 1.632-1.276.384-2.752.478-4.086.156-2.162-.431-4.232-2.11-5.252-4.257C4.758 11.782 5.135 9 7.033 7.077a5.924 5.924 0 0 1 4.175-1.77Z`,
+      label: {
+        show: false,
+      },
+      itemStyle: {
+        shadowBlur: 12,
+        shadowColor: 'rgba(150, 150, 150, 0.5)',
+      },
+    },
+  ],
+}
+</script>
+
+<template>
+  <VChartServer :option="option" :init-options="{ height: 100, width: 100 }" />
+</template>
diff --git a/playground/package.json b/playground/package.json
index 817028b..28915cd 100644
--- a/playground/package.json
+++ b/playground/package.json
@@ -8,6 +8,7 @@
     "generate": "nuxi generate"
   },
   "dependencies": {
+    "echarts-liquidfill": "^3.1.0",
     "nuxt": "^3.11.2"
   },
   "devDependencies": {
diff --git a/playground/pnpm-lock.yaml b/playground/pnpm-lock.yaml
index 7ec2aed..4da7bf6 100644
--- a/playground/pnpm-lock.yaml
+++ b/playground/pnpm-lock.yaml
@@ -8,6 +8,9 @@ importers:
 
   .:
     dependencies:
+      echarts-liquidfill:
+        specifier: ^3.1.0
+        version: 3.1.0(echarts@5.5.0)
       nuxt:
         specifier: ^3.11.2
         version: 3.11.2(@opentelemetry/api@1.9.0)(@parcel/watcher@2.4.1)(@types/node@20.14.2)(@unocss/reset@0.60.4)(encoding@0.1.13)(floating-vue@5.2.2(@nuxt/kit@3.11.2(rollup@4.18.0))(vue@3.4.27))(ioredis@5.4.1)(rollup@4.18.0)(terser@5.31.1)(unocss@0.60.4(@unocss/webpack@0.60.4(rollup@4.18.0)(webpack@5.91.0))(postcss@8.4.38)(rollup@4.18.0)(vite@5.2.12(@types/node@20.14.2)(terser@5.31.1)))(vite@5.2.12(@types/node@20.14.2)(terser@5.31.1))
@@ -1733,6 +1736,14 @@ packages:
   eastasianwidth@0.2.0:
     resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
 
+  echarts-liquidfill@3.1.0:
+    resolution: {integrity: sha512-5Dlqs/jTsdTUAsd+K5LPLLTgrbbNORUSBQyk8PSy1Mg2zgHDWm83FmvA4s0ooNepCJojFYRITTQ4GU1UUSKYLw==}
+    peerDependencies:
+      echarts: ^5.0.1
+
+  echarts@5.5.0:
+    resolution: {integrity: sha512-rNYnNCzqDAPCr4m/fqyUFv7fD9qIsd50S6GDFgO1DxZhncCsNsG7IfUlAlvZe5oSEQxtsjnHiUuppzccry93Xw==}
+
   ee-first@1.1.1:
     resolution: {integrity: sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==}
 
@@ -3348,6 +3359,9 @@ packages:
   tr46@0.0.3:
     resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==}
 
+  tslib@2.3.0:
+    resolution: {integrity: sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==}
+
   tuf-js@2.2.1:
     resolution: {integrity: sha512-GwIJau9XaA8nLVbUXsN3IlFi7WmQ48gBUrl3FTkkL/XLu/POhBzfmX9hd33FNMX1qAsfl6ozO1iMmW9NC8YniA==}
     engines: {node: ^16.14.0 || >=18.0.0}
@@ -3766,6 +3780,9 @@ packages:
     resolution: {integrity: sha512-zK7YHHz4ZXpW89AHXUPbQVGKI7uvkd3hzusTdotCg1UxyaVtg0zFJSTfW/Dq5f7OBBVnq6cZIaC8Ti4hb6dtCA==}
     engines: {node: '>= 14'}
 
+  zrender@5.5.0:
+    resolution: {integrity: sha512-O3MilSi/9mwoovx77m6ROZM7sXShR/O/JIanvzTwjN3FORfLSr81PsUGd7jlaYOeds9d8tw82oP44+3YucVo+w==}
+
 snapshots:
 
   '@ampproject/remapping@2.3.0':
@@ -5869,6 +5886,15 @@ snapshots:
 
   eastasianwidth@0.2.0: {}
 
+  echarts-liquidfill@3.1.0(echarts@5.5.0):
+    dependencies:
+      echarts: 5.5.0
+
+  echarts@5.5.0:
+    dependencies:
+      tslib: 2.3.0
+      zrender: 5.5.0
+
   ee-first@1.1.1: {}
 
   electron-to-chromium@1.4.794: {}
@@ -7694,6 +7720,8 @@ snapshots:
 
   tr46@0.0.3: {}
 
+  tslib@2.3.0: {}
+
   tuf-js@2.2.1:
     dependencies:
       '@tufjs/models': 2.0.1
@@ -8153,3 +8181,7 @@ snapshots:
       archiver-utils: 5.0.2
       compress-commons: 6.0.2
       readable-stream: 4.5.2
+
+  zrender@5.5.0:
+    dependencies:
+      tslib: 2.3.0