diff --git a/common/changes/@visactor/lark-vchart/fix-dataZoom_2023-07-24-15-21.json b/common/changes/@visactor/lark-vchart/fix-dataZoom_2023-07-24-15-21.json
new file mode 100644
index 0000000000..6d5b0297ce
--- /dev/null
+++ b/common/changes/@visactor/lark-vchart/fix-dataZoom_2023-07-24-15-21.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@visactor/lark-vchart",
+      "comment": "fix(dataZoom): preview compute and theme config",
+      "type": "none"
+    }
+  ],
+  "packageName": "@visactor/lark-vchart"
+}
\ No newline at end of file
diff --git a/common/changes/@visactor/react-vchart/fix-dataZoom_2023-07-24-15-21.json b/common/changes/@visactor/react-vchart/fix-dataZoom_2023-07-24-15-21.json
new file mode 100644
index 0000000000..ac769a10e8
--- /dev/null
+++ b/common/changes/@visactor/react-vchart/fix-dataZoom_2023-07-24-15-21.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@visactor/react-vchart",
+      "comment": "fix(dataZoom): preview compute and theme config",
+      "type": "none"
+    }
+  ],
+  "packageName": "@visactor/react-vchart"
+}
\ No newline at end of file
diff --git a/common/changes/@visactor/taro-vchart/fix-dataZoom_2023-07-24-15-21.json b/common/changes/@visactor/taro-vchart/fix-dataZoom_2023-07-24-15-21.json
new file mode 100644
index 0000000000..fe81ce84f3
--- /dev/null
+++ b/common/changes/@visactor/taro-vchart/fix-dataZoom_2023-07-24-15-21.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@visactor/taro-vchart",
+      "comment": "fix(dataZoom): preview compute and theme config",
+      "type": "none"
+    }
+  ],
+  "packageName": "@visactor/taro-vchart"
+}
\ No newline at end of file
diff --git a/common/changes/@visactor/vchart/fix-dataZoom_2023-07-24-15-21.json b/common/changes/@visactor/vchart/fix-dataZoom_2023-07-24-15-21.json
new file mode 100644
index 0000000000..ab8df1dfa9
--- /dev/null
+++ b/common/changes/@visactor/vchart/fix-dataZoom_2023-07-24-15-21.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@visactor/vchart",
+      "comment": "fix(dataZoom): preview compute and theme config",
+      "type": "none"
+    }
+  ],
+  "packageName": "@visactor/vchart"
+}
\ No newline at end of file
diff --git a/common/config/rush/pnpm-config.json b/common/config/rush/pnpm-config.json
index adb9a79da0..037d908028 100644
--- a/common/config/rush/pnpm-config.json
+++ b/common/config/rush/pnpm-config.json
@@ -89,9 +89,8 @@
    * PNPM documentation: https://pnpm.io/package_json#pnpmoverrides
    */
   "globalOverrides": {
-    // "@visactor/vrender": "0.12.0",
-    // "@visactor/vrender-components": "0.13.2-alpha.2"
-    // "example2": "npm:@company/example2@^1.0.0"
+    // "@visactor/vrender": "0.13.3",
+    // "@visactor/vrender-components": "0.13.4-alpha.0"
   },
 
   /**
diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml
index d127b67e3d..eaa53c7b49 100644
--- a/common/config/rush/pnpm-lock.yaml
+++ b/common/config/rush/pnpm-lock.yaml
@@ -54,7 +54,8 @@ importers:
       '@types/react-is': ^17.0.3
       '@visactor/vchart': workspace:1.1.0-beta.9
       '@visactor/vgrammar': ~0.4.1
-      '@visactor/vrender': ~0.13.2
+      '@visactor/vrender': ~0.13.4
+      '@visactor/vrender-components': ~0.13.4
       '@visactor/vutils': ~0.13.3
       '@vitejs/plugin-react': 3.1.0
       eslint: ~8.18.0
@@ -75,7 +76,8 @@ importers:
     dependencies:
       '@visactor/vchart': link:../vchart
       '@visactor/vgrammar': 0.4.1
-      '@visactor/vrender': 0.13.3
+      '@visactor/vrender': 0.13.4
+      '@visactor/vrender-components': 0.13.4
       '@visactor/vutils': 0.13.3
       react-is: 18.2.0
     devDependencies:
@@ -85,7 +87,7 @@ importers:
       '@rollup/plugin-typescript': 11.1.0_3riap2emcx3rezd3j6fqob2ipq
       '@rushstack/eslint-patch': 1.1.4
       '@types/jest': 26.0.24
-      '@types/node': 20.4.4
+      '@types/node': 20.4.5
       '@types/offscreencanvas': 2019.6.4
       '@types/react': 18.2.16
       '@types/react-dom': 18.2.7
@@ -104,7 +106,7 @@ importers:
       ts-jest: 26.5.6_xuote2qreek47x2di7kesslrai
       tslib: 2.3.1
       typescript: 4.9.5
-      vite: 3.2.6_@types+node@20.4.4
+      vite: 3.2.6_@types+node@20.4.5
 
   ../../packages/taro-vchart:
     specifiers:
@@ -213,8 +215,8 @@ importers:
       '@visactor/vgrammar-util': ~0.4.1
       '@visactor/vgrammar-wordcloud': ~0.4.1
       '@visactor/vgrammar-wordcloud-shape': ~0.4.1
-      '@visactor/vrender': ~0.13.2
-      '@visactor/vrender-components': ~0.13.2
+      '@visactor/vrender': ~0.13.4
+      '@visactor/vrender-components': ~0.13.4
       '@visactor/vscale': ~0.13.3
       '@visactor/vutils': ~0.13.3
       canvas: 2.11.2
@@ -250,8 +252,8 @@ importers:
       '@visactor/vgrammar-util': 0.4.1
       '@visactor/vgrammar-wordcloud': 0.4.1
       '@visactor/vgrammar-wordcloud-shape': 0.4.1
-      '@visactor/vrender': 0.13.3
-      '@visactor/vrender-components': 0.13.3
+      '@visactor/vrender': 0.13.4
+      '@visactor/vrender-components': 0.13.4
       '@visactor/vscale': 0.13.3
       '@visactor/vutils': 0.13.3
     devDependencies:
@@ -262,7 +264,7 @@ importers:
       '@internal/ts-config': link:../../share/ts-config
       '@rushstack/eslint-patch': 1.1.4
       '@types/jest': 26.0.24
-      '@types/node': 20.4.4
+      '@types/node': 20.4.5
       '@types/offscreencanvas': 2019.6.4
       canvas: 2.11.2
       d3-array: 3.2.3
@@ -283,11 +285,11 @@ importers:
       rollup-plugin-node-polyfills: 0.2.1
       ts-jest: 26.5.6_xuote2qreek47x2di7kesslrai
       ts-loader: 8.0.2_typescript@4.9.5
-      ts-node: 10.9.0_f7m3oso53tushofr3lnovlz6ya
+      ts-node: 10.9.0_gamchj74f4cosewgiaiggc3fvy
       tslib: 2.3.1
       tslint: 5.12.1_typescript@4.9.5
       typescript: 4.9.5
-      vite: 3.2.6_@types+node@20.4.4
+      vite: 3.2.6_@types+node@20.4.5
 
   ../../share/eslint-config:
     specifiers:
@@ -446,7 +448,7 @@ importers:
       '@types/merge2': 1.4.0
       '@types/minimist': 1.2.2
       '@types/ms': 0.7.31
-      '@types/node': 20.4.4
+      '@types/node': 20.4.5
       '@types/semver': 7.3.12
       '@types/terser': 3.12.0
       '@types/through2': 2.0.38
@@ -454,7 +456,7 @@ importers:
       '@types/vinyl': 2.0.7
       '@types/yargs-parser': 21.0.0
       eslint: 8.18.0
-      ts-node: 10.9.0_f7m3oso53tushofr3lnovlz6ya
+      ts-node: 10.9.0_gamchj74f4cosewgiaiggc3fvy
       typescript: 4.9.5
       vitest: 0.30.1_less@4.1.3+terser@5.17.1
 
@@ -2054,7 +2056,7 @@ packages:
     engines: {node: '>= 10.14.2'}
     dependencies:
       '@jest/types': 26.6.2
-      '@types/node': 20.4.4
+      '@types/node': 20.4.5
       chalk: 4.1.2
       jest-message-util: 26.6.2
       jest-util: 26.6.2
@@ -2070,7 +2072,7 @@ packages:
       '@jest/test-result': 26.6.2
       '@jest/transform': 26.6.2
       '@jest/types': 26.6.2
-      '@types/node': 20.4.4
+      '@types/node': 20.4.5
       ansi-escapes: 4.3.2
       chalk: 4.1.2
       exit: 0.1.2
@@ -2110,7 +2112,7 @@ packages:
       '@jest/test-result': 26.6.2
       '@jest/transform': 26.6.2
       '@jest/types': 26.6.2
-      '@types/node': 20.4.4
+      '@types/node': 20.4.5
       ansi-escapes: 4.3.2
       chalk: 4.1.2
       exit: 0.1.2
@@ -2159,7 +2161,7 @@ packages:
     dependencies:
       '@jest/fake-timers': 26.6.2
       '@jest/types': 26.6.2
-      '@types/node': 20.4.4
+      '@types/node': 20.4.5
       jest-mock: 26.6.2
     dev: true
 
@@ -2178,7 +2180,7 @@ packages:
     dependencies:
       '@jest/types': 26.6.2
       '@sinonjs/fake-timers': 6.0.1
-      '@types/node': 20.4.4
+      '@types/node': 20.4.5
       jest-message-util: 26.6.2
       jest-mock: 26.6.2
       jest-util: 26.6.2
@@ -2209,9 +2211,9 @@ packages:
       graceful-fs: 4.2.11
       istanbul-lib-coverage: 3.2.0
       istanbul-lib-instrument: 4.0.3
-      istanbul-lib-report: 3.0.0
+      istanbul-lib-report: 3.0.1
       istanbul-lib-source-maps: 4.0.1
-      istanbul-reports: 3.1.5
+      istanbul-reports: 3.1.6
       jest-haste-map: 26.6.2
       jest-resolve: 26.6.2
       jest-util: 26.6.2
@@ -2372,7 +2374,7 @@ packages:
     dependencies:
       '@types/istanbul-lib-coverage': 2.0.4
       '@types/istanbul-reports': 3.0.1
-      '@types/node': 20.4.4
+      '@types/node': 20.4.5
       '@types/yargs': 15.0.15
       chalk: 4.1.2
     dev: true
@@ -3392,7 +3394,7 @@ packages:
   /@types/clean-css/4.2.6:
     resolution: {integrity: sha512-Ze1tf+LnGPmG6hBFMi0B4TEB0mhF7EiMM5oyjLDNPE9hxrPU0W+5+bHvO+eFPA+bt0iC1zkQMoU/iGdRVjcRbw==}
     dependencies:
-      '@types/node': 20.4.4
+      '@types/node': 20.4.5
       source-map: 0.6.1
     dev: true
 
@@ -3411,19 +3413,19 @@ packages:
   /@types/fs-extra/8.1.2:
     resolution: {integrity: sha512-SvSrYXfWSc7R4eqnOzbQF4TZmfpNSM9FrSWLU3EUnWBuyZqNBOrv1B1JA3byUDPUl9z4Ab3jeZG2eDdySlgNMg==}
     dependencies:
-      '@types/node': 20.4.4
+      '@types/node': 20.4.5
     dev: true
 
   /@types/fs-extra/9.0.13:
     resolution: {integrity: sha512-nEnwB++1u5lVDM2UI4c1+5R+FYaKfaAzS4OococimjVm3nQw3TuzH5UNsocrcTBbhnerblyHj4A49qXbIiZdpA==}
     dependencies:
-      '@types/node': 20.4.4
+      '@types/node': 20.4.5
     dev: true
 
   /@types/glob-stream/8.0.0:
     resolution: {integrity: sha512-fxTWwdQmX9LWSHD7ZLlv3BHR992mKcVcDnT/2v+l/QZZo7TfDdyasqlSYVzOnMGWhRbrWeWkbj/mgezFjKynhw==}
     dependencies:
-      '@types/node': 20.4.4
+      '@types/node': 20.4.5
       '@types/picomatch': 2.3.0
       '@types/streamx': 2.9.1
     dev: true
@@ -3431,26 +3433,26 @@ packages:
   /@types/glob-watcher/5.0.2:
     resolution: {integrity: sha512-MZeh2nIzibl/euv5UV0femkGzcKTSE4G2+zv48d6ymeitWwCx52+4X+FqzML9oH2mQnPs+N/JHp3CsBPj1x1Ug==}
     dependencies:
-      '@types/node': 20.4.4
+      '@types/node': 20.4.5
     dev: true
 
   /@types/glob/7.2.0:
     resolution: {integrity: sha512-ZUxbzKl0IfJILTS6t7ip5fQQM/J3TJYubDm3nMbgubNNYS62eXeUpoLUC8/7fJNiFYHTrGPQn7hspDUzIHX3UA==}
     dependencies:
       '@types/minimatch': 5.1.2
-      '@types/node': 20.4.4
+      '@types/node': 20.4.5
     dev: true
 
   /@types/graceful-fs/4.1.6:
     resolution: {integrity: sha512-Sig0SNORX9fdW+bQuTEovKj3uHcUL6LQKbCrrqb1X7J6/ReAbhCXRAhc+SMejhLELFj2QcyuxmUooZ4bt5ReSw==}
     dependencies:
-      '@types/node': 20.4.4
+      '@types/node': 20.4.5
     dev: true
 
   /@types/gulp-if/0.0.34:
     resolution: {integrity: sha512-r2A04hHDC+ZWMRAm+3q6/UeC3ggvl+TZm9P1+2umnp4q9bOlBmUQnR178Io3c0DkZPQAwup8VNtOvmvaWCpP5w==}
     dependencies:
-      '@types/node': 20.4.4
+      '@types/node': 20.4.5
       '@types/vinyl': 2.0.7
     dev: true
 
@@ -3464,7 +3466,7 @@ packages:
   /@types/gulp-sourcemaps/0.0.35:
     resolution: {integrity: sha512-vUBuizwA4CAV3Mke0DJYHQxyN4YOB1aAql284qAO7Et7fe0hmnPi/R9Fhu2UhxMuSxAwFktsJUOQk5dJHOU1eA==}
     dependencies:
-      '@types/node': 20.4.4
+      '@types/node': 20.4.5
       '@types/vinyl': 2.0.7
     dev: true
 
@@ -3536,7 +3538,7 @@ packages:
   /@types/merge2/1.4.0:
     resolution: {integrity: sha512-MRHDvln2ldZELrUC8n1PGaQzZ33aNh8uDcsGehREW0zR1Fr818a4/JTZjO9eloHPPxnpUp8fz/YFTRc5CWm7Xw==}
     dependencies:
-      '@types/node': 20.4.4
+      '@types/node': 20.4.5
     dev: true
 
   /@types/minimatch/3.0.5:
@@ -3563,8 +3565,8 @@ packages:
     resolution: {integrity: sha512-qjd88DrCxupx/kJD5yQgZdcYKZKSIGBVDIBE1/LTGcNm3d2Np/jxojkdePDdfnBHJc5W7vSMpbJ1aB7p/Py69A==}
     dev: true
 
-  /@types/node/20.4.4:
-    resolution: {integrity: sha512-CukZhumInROvLq3+b5gLev+vgpsIqC2D0deQr/yS1WnxvmYLlJXZpaQrQiseMY+6xusl79E04UjWoqyr+t1/Ew==}
+  /@types/node/20.4.5:
+    resolution: {integrity: sha512-rt40Nk13II9JwQBdeYqmbn2Q6IVTA5uPhvSO+JVqdXw/6/4glI6oR9ezty/A9Hg5u7JH4OmYmuQ+XvjKm0Datg==}
 
   /@types/normalize-package-data/2.4.1:
     resolution: {integrity: sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw==}
@@ -3622,7 +3624,7 @@ packages:
     resolution: {integrity: sha512-whjk1EDJPcAR2kYHRbFl/lKeeKYTi05A15K9bnLInCVroNDCtXce57xKdI0/rQaA3K+6q0eFyUBPmqfSndUZdQ==}
     dependencies:
       '@types/caseless': 0.12.2
-      '@types/node': 20.4.4
+      '@types/node': 20.4.5
       '@types/tough-cookie': 4.0.2
       form-data: 2.5.1
     dev: true
@@ -3656,7 +3658,7 @@ packages:
   /@types/streamx/2.9.1:
     resolution: {integrity: sha512-9bywzhouyedmci7WCIPFwJ8zASDnxt2gaVUy52X0p0Tt085IJSAEP0L6j4SSNeDMSLzpYu6cPz0GrJZ7kPJ6Bg==}
     dependencies:
-      '@types/node': 20.4.4
+      '@types/node': 20.4.5
     dev: true
 
   /@types/terser/3.12.0:
@@ -3669,7 +3671,7 @@ packages:
   /@types/through2/2.0.38:
     resolution: {integrity: sha512-YFu+nHmjxMurkH1BSzA0Z1WrKDAY8jUKPZctNQn7mc+/KKtp2XxnclHFXxdB1m7Iqnzb5aywgP8TMK283LezGQ==}
     dependencies:
-      '@types/node': 20.4.4
+      '@types/node': 20.4.5
     dev: true
 
   /@types/tough-cookie/4.0.2:
@@ -3683,7 +3685,7 @@ packages:
   /@types/undertaker/1.2.8:
     resolution: {integrity: sha512-gW3PRqCHYpo45XFQHJBhch7L6hytPsIe0QeLujlnFsjHPnXLhJcPdN6a9368d7aIQgH2I/dUTPFBlGeSNA3qOg==}
     dependencies:
-      '@types/node': 20.4.4
+      '@types/node': 20.4.5
       '@types/undertaker-registry': 1.0.1
       async-done: 1.3.2
     dev: true
@@ -3696,7 +3698,7 @@ packages:
     resolution: {integrity: sha512-ctNcmmzbMIKooXjRkyyUCOu2Z4AyqibL+RhXoF3pb7K7j+ezItnakmpm31LymkYHSIM5ey0tjIFzTvFOTSBCGw==}
     dependencies:
       '@types/glob-stream': 8.0.0
-      '@types/node': 20.4.4
+      '@types/node': 20.4.5
       '@types/vinyl': 2.0.7
     dev: true
 
@@ -3704,7 +3706,7 @@ packages:
     resolution: {integrity: sha512-4UqPv+2567NhMQuMLdKAyK4yzrfCqwaTt6bLhHEs8PFcxbHILsrxaY63n4wgE/BRLDWDQeI+WcTmkXKExh9hQg==}
     dependencies:
       '@types/expect': 1.20.4
-      '@types/node': 20.4.4
+      '@types/node': 20.4.5
 
   /@types/webpack-env/1.18.1:
     resolution: {integrity: sha512-D0HJET2/UY6k9L6y3f5BL+IDxZmPkYmPT4+qBrRdmRLYRuV0qNKizMgTvYxXZYn+36zjPeoDZAEYBCM6XB+gww==}
@@ -3960,7 +3962,7 @@ packages:
     dependencies:
       '@visactor/vgrammar': 0.4.1
       '@visactor/vgrammar-util': 0.4.1
-      '@visactor/vrender': 0.13.3
+      '@visactor/vrender': 0.13.4
       '@visactor/vutils': 0.13.3
     dev: false
 
@@ -3978,7 +3980,7 @@ packages:
     dependencies:
       '@visactor/vgrammar': 0.4.1
       '@visactor/vgrammar-util': 0.4.1
-      '@visactor/vrender': 0.13.3
+      '@visactor/vrender': 0.13.4
       '@visactor/vutils': 0.13.3
     dev: false
 
@@ -3993,7 +3995,7 @@ packages:
     dependencies:
       '@visactor/vgrammar': 0.4.1
       '@visactor/vgrammar-util': 0.4.1
-      '@visactor/vrender': 0.13.3
+      '@visactor/vrender': 0.13.4
       '@visactor/vscale': 0.13.3
       '@visactor/vutils': 0.13.3
     dev: false
@@ -4003,7 +4005,7 @@ packages:
     dependencies:
       '@visactor/vgrammar': 0.4.1
       '@visactor/vgrammar-util': 0.4.1
-      '@visactor/vrender': 0.13.3
+      '@visactor/vrender': 0.13.4
       '@visactor/vutils': 0.13.3
     dev: false
 
@@ -4012,23 +4014,23 @@ packages:
     dependencies:
       '@visactor/vgrammar-coordinate': 0.4.1
       '@visactor/vgrammar-util': 0.4.1
-      '@visactor/vrender': 0.13.3
-      '@visactor/vrender-components': 0.13.3
+      '@visactor/vrender': 0.13.4
+      '@visactor/vrender-components': 0.13.4
       '@visactor/vscale': 0.13.3
       '@visactor/vutils': 0.13.3
     dev: false
 
-  /@visactor/vrender-components/0.13.3:
-    resolution: {integrity: sha512-2IYpsMDpIkX6z0coloqtADzpyc9p8HIO65Gj394Iz18rmqD1Dt5T5MyNfB6YMbB3JD84vaWDDaCPv/oinCqZRQ==}
+  /@visactor/vrender-components/0.13.4:
+    resolution: {integrity: sha512-ymXcq0t3MENNQ2fXmiLNguiLHrs3VAnV5ZHVI2CezmPgxUtD23Gn4iq5h2QFRyyyL6AU3TJnWgVyFCB1h/lIQw==}
     dependencies:
-      '@visactor/vrender': 0.13.3
+      '@visactor/vrender': 0.13.4
       '@visactor/vscale': 0.13.3
       '@visactor/vutils': 0.13.3
       inversify: 6.0.1
     dev: false
 
-  /@visactor/vrender/0.13.3:
-    resolution: {integrity: sha512-E8I1y+4km2Um3K6jg63lvFsXv4p6hjTq0Tot4uwDBRHP5WcY8jOLJ3H9/aNLXqaw2x3fF19adWZp5ruNDGxAgg==}
+  /@visactor/vrender/0.13.4:
+    resolution: {integrity: sha512-L86lzobtkHA7wFX6MBaDtWldwOPsJiAJk/23JwWynQh5b1qX6Rb8PHCBQqtljs6oyD74GotMcTCApTcCZhZH+g==}
     dependencies:
       '@visactor/vutils': 0.13.3
       color-convert: 2.0.1
@@ -4061,7 +4063,7 @@ packages:
       '@babel/plugin-transform-react-jsx-source': 7.22.5_@babel+core@7.20.12
       magic-string: 0.27.0
       react-refresh: 0.14.0
-      vite: 3.2.6_@types+node@20.4.4
+      vite: 3.2.6_@types+node@20.4.5
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -5963,7 +5965,7 @@ packages:
     hasBin: true
     dependencies:
       caniuse-lite: 1.0.30001517
-      electron-to-chromium: 1.4.470
+      electron-to-chromium: 1.4.471
     dev: true
 
   /browserslist/4.21.9:
@@ -5972,7 +5974,7 @@ packages:
     hasBin: true
     dependencies:
       caniuse-lite: 1.0.30001517
-      electron-to-chromium: 1.4.470
+      electron-to-chromium: 1.4.471
       node-releases: 2.0.13
       update-browserslist-db: 1.0.11_browserslist@4.21.9
 
@@ -8059,8 +8061,8 @@ packages:
       jake: 10.8.7
     dev: true
 
-  /electron-to-chromium/1.4.470:
-    resolution: {integrity: sha512-zZM48Lmy2FKWgqyvsX9XK+J6FfP7aCDUFLmgooLJzA7v1agCs/sxSoBpTIwDLhmbhpx9yJIxj2INig/ncjJRqg==}
+  /electron-to-chromium/1.4.471:
+    resolution: {integrity: sha512-GpmGRC1vTl60w/k6YpQ18pSiqnmr0j3un//5TV1idPi6aheNfkT1Ye71tMEabWyNDO6sBMgAR+95Eb0eUUr1tA==}
 
   /electron/11.5.0:
     resolution: {integrity: sha512-WjNDd6lGpxyiNjE3LhnFCAk/D9GIj1rU3GSDealVShhkkkPR3Vh4q8ErXGDl1OAO/faomVa10KoFPUN/pLbNxg==}
@@ -10590,7 +10592,7 @@ packages:
     resolution: {integrity: sha512-SVSF7ikuWKhpAW4l4wapAqPPSToJoiNKsbDoUnRrSgwZHH7lH8pbPeQj1aOVYQrbZKhfSVBxVW+Py7vtulRktw==}
     engines: {node: '>=10'}
     dependencies:
-      '@types/node': 20.4.4
+      '@types/node': 20.4.5
       '@types/vinyl': 2.0.7
       istextorbinary: 3.3.0
       replacestream: 4.0.3
@@ -11982,12 +11984,12 @@ packages:
       - supports-color
     dev: true
 
-  /istanbul-lib-report/3.0.0:
-    resolution: {integrity: sha512-wcdi+uAKzfiGT2abPpKZ0hSU1rGQjUQnLvtY5MpQ7QCTahD3VODhcu4wcfY1YtkGaDD5yuydOLINXsfbus9ROw==}
-    engines: {node: '>=8'}
+  /istanbul-lib-report/3.0.1:
+    resolution: {integrity: sha512-GCfE1mtsHGOELCU8e/Z7YWzpmybrx/+dSTfLrvY8qRmaY6zXTKWn6WQIjaAFw069icm6GVMNkgu0NzI4iPZUNw==}
+    engines: {node: '>=10'}
     dependencies:
       istanbul-lib-coverage: 3.2.0
-      make-dir: 3.1.0
+      make-dir: 4.0.0
       supports-color: 7.2.0
     dev: true
 
@@ -12002,12 +12004,12 @@ packages:
       - supports-color
     dev: true
 
-  /istanbul-reports/3.1.5:
-    resolution: {integrity: sha512-nUsEMa9pBt/NOHqbcbeJEgqIlY/K7rVWUX6Lql2orY5e9roQOthbR3vtY4zzf2orPELg80fnxxk9zUyPlgwD1w==}
+  /istanbul-reports/3.1.6:
+    resolution: {integrity: sha512-TLgnMkKg3iTDsQ9PbPTdpfAK2DzjF9mqUG7RMgcQl8oFjad8ob4laGxv5XV5U9MAfx8D6tSJiUyuAwzLicaxlg==}
     engines: {node: '>=8'}
     dependencies:
       html-escaper: 2.0.2
-      istanbul-lib-report: 3.0.0
+      istanbul-lib-report: 3.0.1
     dev: true
 
   /istextorbinary/3.3.0:
@@ -12196,7 +12198,7 @@ packages:
       jest-validate: 26.6.2
       micromatch: 4.0.5
       pretty-format: 26.6.2
-      ts-node: 10.9.0_f7m3oso53tushofr3lnovlz6ya
+      ts-node: 10.9.0_gamchj74f4cosewgiaiggc3fvy
     transitivePeerDependencies:
       - bufferutil
       - canvas
@@ -12301,7 +12303,7 @@ packages:
       '@jest/environment': 26.6.2
       '@jest/fake-timers': 26.6.2
       '@jest/types': 26.6.2
-      '@types/node': 20.4.4
+      '@types/node': 20.4.5
       jest-mock: 26.6.2
       jest-util: 26.6.2
       jsdom: 16.7.0
@@ -12319,7 +12321,7 @@ packages:
       '@jest/environment': 26.6.2
       '@jest/fake-timers': 26.6.2
       '@jest/types': 26.6.2
-      '@types/node': 20.4.4
+      '@types/node': 20.4.5
       jest-mock: 26.6.2
       jest-util: 26.6.2
       jsdom: 16.7.0_canvas@2.11.2
@@ -12350,7 +12352,7 @@ packages:
       '@jest/environment': 26.6.2
       '@jest/fake-timers': 26.6.2
       '@jest/types': 26.6.2
-      '@types/node': 20.4.4
+      '@types/node': 20.4.5
       jest-mock: 26.6.2
       jest-util: 26.6.2
     dev: true
@@ -12390,7 +12392,7 @@ packages:
     dependencies:
       '@jest/types': 26.6.2
       '@types/graceful-fs': 4.1.6
-      '@types/node': 20.4.4
+      '@types/node': 20.4.5
       anymatch: 3.1.3
       fb-watchman: 2.0.2
       graceful-fs: 4.2.11
@@ -12438,7 +12440,7 @@ packages:
       '@jest/source-map': 26.6.2
       '@jest/test-result': 26.6.2
       '@jest/types': 26.6.2
-      '@types/node': 20.4.4
+      '@types/node': 20.4.5
       chalk: 4.1.2
       co: 4.6.0
       expect: 26.6.2
@@ -12468,7 +12470,7 @@ packages:
       '@jest/source-map': 26.6.2
       '@jest/test-result': 26.6.2
       '@jest/types': 26.6.2
-      '@types/node': 20.4.4
+      '@types/node': 20.4.5
       chalk: 4.1.2
       co: 4.6.0
       expect: 26.6.2
@@ -12566,7 +12568,7 @@ packages:
     engines: {node: '>= 10.14.2'}
     dependencies:
       '@jest/types': 26.6.2
-      '@types/node': 20.4.4
+      '@types/node': 20.4.5
     dev: true
 
   /jest-pnp-resolver/1.2.3_jest-resolve@24.9.0:
@@ -12672,7 +12674,7 @@ packages:
       '@jest/environment': 26.6.2
       '@jest/test-result': 26.6.2
       '@jest/types': 26.6.2
-      '@types/node': 20.4.4
+      '@types/node': 20.4.5
       chalk: 4.1.2
       emittery: 0.7.2
       exit: 0.1.2
@@ -12704,7 +12706,7 @@ packages:
       '@jest/environment': 26.6.2
       '@jest/test-result': 26.6.2
       '@jest/types': 26.6.2
-      '@types/node': 20.4.4
+      '@types/node': 20.4.5
       chalk: 4.1.2
       emittery: 0.7.2
       exit: 0.1.2
@@ -12849,7 +12851,7 @@ packages:
     resolution: {integrity: sha512-S5wqyz0DXnNJPd/xfIzZ5Xnp1HrJWBczg8mMfMpN78OJ5eDxXyf+Ygld9wX1DnUWbIbhM1YDY95NjR4CBXkb2g==}
     engines: {node: '>= 10.14.2'}
     dependencies:
-      '@types/node': 20.4.4
+      '@types/node': 20.4.5
       graceful-fs: 4.2.11
     dev: true
 
@@ -12917,7 +12919,7 @@ packages:
     engines: {node: '>= 10.14.2'}
     dependencies:
       '@jest/types': 26.6.2
-      '@types/node': 20.4.4
+      '@types/node': 20.4.5
       chalk: 4.1.2
       graceful-fs: 4.2.11
       is-ci: 2.0.0
@@ -12954,7 +12956,7 @@ packages:
     dependencies:
       '@jest/test-result': 26.6.2
       '@jest/types': 26.6.2
-      '@types/node': 20.4.4
+      '@types/node': 20.4.5
       ansi-escapes: 4.3.2
       chalk: 4.1.2
       jest-util: 26.6.2
@@ -12973,7 +12975,7 @@ packages:
     resolution: {integrity: sha512-KWYVV1c4i+jbMpaBC+U++4Va0cp8OisU185o73T1vo99hqi7w8tSJfUXYswwqqrjzwxa6KpRK54WhPvwf5w6PQ==}
     engines: {node: '>= 10.13.0'}
     dependencies:
-      '@types/node': 20.4.4
+      '@types/node': 20.4.5
       merge-stream: 2.0.0
       supports-color: 7.2.0
     dev: true
@@ -13846,6 +13848,13 @@ packages:
     dependencies:
       semver: 6.3.1
 
+  /make-dir/4.0.0:
+    resolution: {integrity: sha512-hXdUTZYIVOt1Ex//jAQi+wTZZpUpwBj/0QsOzqegb3rGMMeJiSEu5xLHnYfBrRV4RH2+OCSOO95Is/7x1WJ4bw==}
+    engines: {node: '>=10'}
+    dependencies:
+      semver: 7.5.4
+    dev: true
+
   /make-error/1.3.6:
     resolution: {integrity: sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==}
     dev: true
@@ -14054,7 +14063,7 @@ packages:
       decamelize: 1.2.0
       loud-rejection: 1.6.0
       map-obj: 1.0.1
-      minimist: 1.2.8
+      minimist: 1.2.5
       normalize-package-data: 2.5.0
       object-assign: 4.1.1
       read-pkg-up: 1.0.1
@@ -16362,7 +16371,7 @@ packages:
     dependencies:
       deep-extend: 0.6.0
       ini: 1.3.8
-      minimist: 1.2.8
+      minimist: 1.2.5
       strip-json-comments: 2.0.1
     dev: true
 
@@ -19105,7 +19114,7 @@ packages:
       typescript: 4.9.5
     dev: true
 
-  /ts-node/10.9.0_f7m3oso53tushofr3lnovlz6ya:
+  /ts-node/10.9.0_gamchj74f4cosewgiaiggc3fvy:
     resolution: {integrity: sha512-bunW18GUyaCSYRev4DPf4SQpom3pWH29wKl0sDk5zE7ze19RImEVhCW7K4v3hHKkUyfWotU08ToE2RS+Y49aug==}
     hasBin: true
     peerDependencies:
@@ -19124,7 +19133,7 @@ packages:
       '@tsconfig/node12': 1.0.11
       '@tsconfig/node14': 1.0.3
       '@tsconfig/node16': 1.0.4
-      '@types/node': 20.4.4
+      '@types/node': 20.4.5
       acorn: 8.10.0
       acorn-walk: 8.2.0
       arg: 4.1.3
@@ -19860,7 +19869,7 @@ packages:
       remove-trailing-separator: 1.1.0
       replace-ext: 1.0.1
 
-  /vite-node/0.30.1_xp5gls52nxtb52zcnq7yx3ryey:
+  /vite-node/0.30.1_c4rv5bqevikf6haxibcjp2765a:
     resolution: {integrity: sha512-vTikpU/J7e6LU/8iM3dzBo8ZhEiKZEKRznEMm+mJh95XhWaPrJQraT/QsT2NWmuEf+zgAoMe64PKT7hfZ1Njmg==}
     engines: {node: '>=v14.18.0'}
     hasBin: true
@@ -19870,7 +19879,7 @@ packages:
       mlly: 1.4.0
       pathe: 1.1.1
       picocolors: 1.0.0
-      vite: 3.2.6_xp5gls52nxtb52zcnq7yx3ryey
+      vite: 3.2.6_c4rv5bqevikf6haxibcjp2765a
     transitivePeerDependencies:
       - '@types/node'
       - less
@@ -19914,7 +19923,7 @@ packages:
       fsevents: 2.3.2
     dev: true
 
-  /vite/3.2.6_@types+node@20.4.4:
+  /vite/3.2.6_@types+node@20.4.5:
     resolution: {integrity: sha512-nTXTxYVvaQNLoW5BQ8PNNQ3lPia57gzsQU/Khv+JvzKPku8kNZL6NMUR/qwXhMG6E+g1idqEPanomJ+VZgixEg==}
     engines: {node: ^14.18.0 || >=16.0.0}
     hasBin: true
@@ -19939,7 +19948,7 @@ packages:
       terser:
         optional: true
     dependencies:
-      '@types/node': 20.4.4
+      '@types/node': 20.4.5
       esbuild: 0.15.18
       postcss: 8.4.21
       resolve: 1.22.2
@@ -19948,7 +19957,7 @@ packages:
       fsevents: 2.3.2
     dev: true
 
-  /vite/3.2.6_xp5gls52nxtb52zcnq7yx3ryey:
+  /vite/3.2.6_c4rv5bqevikf6haxibcjp2765a:
     resolution: {integrity: sha512-nTXTxYVvaQNLoW5BQ8PNNQ3lPia57gzsQU/Khv+JvzKPku8kNZL6NMUR/qwXhMG6E+g1idqEPanomJ+VZgixEg==}
     engines: {node: ^14.18.0 || >=16.0.0}
     hasBin: true
@@ -19973,7 +19982,7 @@ packages:
       terser:
         optional: true
     dependencies:
-      '@types/node': 20.4.4
+      '@types/node': 20.4.5
       esbuild: 0.15.18
       less: 4.1.3
       postcss: 8.4.21
@@ -20017,7 +20026,7 @@ packages:
     dependencies:
       '@types/chai': 4.3.5
       '@types/chai-subset': 1.3.3
-      '@types/node': 20.4.4
+      '@types/node': 20.4.5
       '@vitest/expect': 0.30.1
       '@vitest/runner': 0.30.1
       '@vitest/snapshot': 0.30.1
@@ -20038,8 +20047,8 @@ packages:
       strip-literal: 1.0.1
       tinybench: 2.5.0
       tinypool: 0.4.0
-      vite: 3.2.6_xp5gls52nxtb52zcnq7yx3ryey
-      vite-node: 0.30.1_xp5gls52nxtb52zcnq7yx3ryey
+      vite: 3.2.6_c4rv5bqevikf6haxibcjp2765a
+      vite-node: 0.30.1_c4rv5bqevikf6haxibcjp2765a
       why-is-node-running: 2.2.2
     transitivePeerDependencies:
       - less
diff --git a/packages/react-vchart/package.json b/packages/react-vchart/package.json
index 3b5c8d84fa..262f03ba89 100644
--- a/packages/react-vchart/package.json
+++ b/packages/react-vchart/package.json
@@ -31,7 +31,8 @@
     "@visactor/vchart": "workspace:1.1.0-beta.9",
     "@visactor/vutils": "~0.13.3",
     "@visactor/vgrammar": "~0.4.1",
-    "@visactor/vrender": "~0.13.2",
+    "@visactor/vrender": "~0.13.4",
+    "@visactor/vrender-components": "~0.13.4",
     "react-is": "^18.2.0"
   },
   "devDependencies": {
diff --git a/packages/vchart/package.json b/packages/vchart/package.json
index 4ac8c24ed2..b105d6ffbd 100644
--- a/packages/vchart/package.json
+++ b/packages/vchart/package.json
@@ -114,8 +114,8 @@
     "@visactor/vgrammar-hierarchy": "~0.4.1",
     "@visactor/vgrammar-sankey": "~0.4.1",
     "@visactor/vgrammar-util": "~0.4.1",
-    "@visactor/vrender": "~0.13.2",
-    "@visactor/vrender-components": "~0.13.2"
+    "@visactor/vrender": "~0.13.4",
+    "@visactor/vrender-components": "~0.13.4"
   },
   "publishConfig": {
     "access": "public",
diff --git a/packages/vchart/src/component/data-zoom/data-filter-base-component.ts b/packages/vchart/src/component/data-zoom/data-filter-base-component.ts
index 9757e01b91..9c694b5a7c 100644
--- a/packages/vchart/src/component/data-zoom/data-filter-base-component.ts
+++ b/packages/vchart/src/component/data-zoom/data-filter-base-component.ts
@@ -286,14 +286,8 @@ export abstract class DataFilterBaseComponent extends BaseComponent implements I
 
           const xFields = array(seriesSpec.xField);
           const yFields = array(seriesSpec.yField);
-          const xField =
-            s.coordinate === 'cartesian'
-              ? xFields[xFields.length - 1]
-              : seriesSpec.angleField ?? seriesSpec.categoryField;
-          const yField =
-            s.coordinate === 'cartesian'
-              ? yFields[yFields.length - 1]
-              : seriesSpec.radiusField ?? seriesSpec.valueField;
+          const xField = s.coordinate === 'cartesian' ? xFields[0] : seriesSpec.angleField ?? seriesSpec.categoryField;
+          const yField = s.coordinate === 'cartesian' ? yFields[0] : seriesSpec.radiusField ?? seriesSpec.valueField;
 
           originalStateFields[s.id] =
             s.type === 'link' ? 'from_xField' : stateAxisHelper === xAxisHelper ? xField : yField;
@@ -344,7 +338,7 @@ export abstract class DataFilterBaseComponent extends BaseComponent implements I
           },
           output: {
             stateField: this._stateField,
-            valueField: hasValidateValueField ? this._valueField : null
+            valueField: this._valueField
           }
         }
       },
diff --git a/packages/vchart/src/component/data-zoom/data-zoom/data-zoom.ts b/packages/vchart/src/component/data-zoom/data-zoom/data-zoom.ts
index 01a47ba6d6..cbecb02442 100644
--- a/packages/vchart/src/component/data-zoom/data-zoom/data-zoom.ts
+++ b/packages/vchart/src/component/data-zoom/data-zoom/data-zoom.ts
@@ -28,6 +28,8 @@ export class DataZoom extends DataFilterBaseComponent {
 
   protected _backgroundSize!: number;
   protected _middleHandlerSize!: number;
+  protected _startHandlerSize!: number;
+  protected _endHandlerSize!: number;
 
   static createComponent(spec: any, options: IComponentOption) {
     const compSpec = spec.dataZoom || options.defaultSpec;
@@ -76,6 +78,10 @@ export class DataZoom extends DataFilterBaseComponent {
         ? this._height - this._middleHandlerSize
         : this._width - this._middleHandlerSize;
     }
+    const startHandlerVisble = this._spec.startHandler.style.visible ?? true;
+    const endHandlerVisble = this._spec.endHandler.style.visible ?? true;
+    this._startHandlerSize = startHandlerVisble ? this._spec.startHandler.style.size : 0;
+    this._endHandlerSize = endHandlerVisble ? this._spec.endHandler.style.size : 0;
   }
 
   /** LifeCycle API**/
@@ -95,17 +101,18 @@ export class DataZoom extends DataFilterBaseComponent {
   }
 
   protected _updateScaleRange() {
+    const handlerSize = (this._startHandlerSize + this._endHandlerSize) / 2;
     if (!this._stateScale || !this._valueScale) {
       return;
     }
     if (this._isHorizontal) {
-      this._stateScale.range([0, this._computeWidth()]);
+      this._stateScale.range([0, this._computeWidth() - handlerSize]);
       this._valueScale.range([this._computeHeight() - this._middleHandlerSize, 0]);
     } else if (this.layoutOrient === 'left') {
-      this._stateScale.range([0, this._computeHeight()]);
+      this._stateScale.range([0, this._computeHeight() - handlerSize]);
       this._valueScale.range([this._computeWidth() - this._middleHandlerSize, 0]);
     } else {
-      this._stateScale.range([0, this._computeHeight()]);
+      this._stateScale.range([0, this._computeHeight() - handlerSize]);
       this._valueScale.range([0, this._computeWidth() - this._middleHandlerSize]);
     }
 
@@ -155,35 +162,38 @@ export class DataZoom extends DataFilterBaseComponent {
     if (this._isHorizontal) {
       return this._backgroundSize + this._middleHandlerSize;
     }
-    return this.getLayoutRect().height;
+    return this.getLayoutRect().height - (this._startHandlerSize + this._endHandlerSize) / 2;
   }
 
   protected _dataToPositionX = (datum: Datum): number => {
     const offsetLeft = this._orient === 'left' ? this._middleHandlerSize : 0;
+    const offsetHandler = this._isHorizontal ? this._startHandlerSize / 2 : 0;
     const xScale = this._isHorizontal ? this._stateScale : this._valueScale;
-
-    return xScale.scale(datum[this._stateField]) + this.getLayoutStartPoint().x + offsetLeft;
+    return xScale.scale(datum[this._stateField]) + this.getLayoutStartPoint().x + offsetLeft + offsetHandler;
   };
 
   protected _dataToPositionX2 = (datum: Datum): number => {
     const offsetLeft = this._orient === 'left' ? this._middleHandlerSize : 0;
+    const offsetHandler = this._isHorizontal ? this._startHandlerSize / 2 : 0;
     const xScale = this._isHorizontal ? this._stateScale : this._valueScale;
     const min = xScale.domain()[0];
-    return xScale.scale(min) + this.getLayoutStartPoint().x + offsetLeft;
+    return xScale.scale(min) + this.getLayoutStartPoint().x + offsetLeft + offsetHandler;
   };
 
   protected _dataToPositionY = (datum: Datum): number => {
     const offsetTop = this._isHorizontal ? this._middleHandlerSize : 0;
+    const offsetHandler = this._isHorizontal ? 0 : this._startHandlerSize / 2;
     const yScale = this._isHorizontal ? this._valueScale : this._stateScale;
 
-    return yScale.scale(datum[this._valueField]) + this.getLayoutStartPoint().y + offsetTop;
+    return yScale.scale(datum[this._valueField]) + this.getLayoutStartPoint().y + offsetTop + offsetHandler;
   };
 
   protected _dataToPositionY2 = (datum: Datum): number => {
     const offsetTop = this._isHorizontal ? this._middleHandlerSize : 0;
+    const offsetHandler = this._isHorizontal ? 0 : this._startHandlerSize / 2;
     const yScale = this._isHorizontal ? this._valueScale : this._stateScale;
     const min = yScale.domain()[0];
-    return yScale.scale(min) + this.getLayoutStartPoint().y + offsetTop;
+    return yScale.scale(min) + this.getLayoutStartPoint().y + offsetTop + offsetHandler;
   };
 
   protected _createOrUpdateComponent() {
diff --git a/packages/vchart/src/component/data-zoom/util.ts b/packages/vchart/src/component/data-zoom/util.ts
index d0e0cf9a73..1068c6aec4 100644
--- a/packages/vchart/src/component/data-zoom/util.ts
+++ b/packages/vchart/src/component/data-zoom/util.ts
@@ -66,8 +66,9 @@ export const dataFilterComputeDomain = (data: Array<any>, op: IDataFilterCompute
             resultObj[d[state]] = 0;
           }
           if (!isNil(valueFields[i])) {
-            // 传进来的d[yFields[i]]可能是string
-            resultObj[d[state]] += parseFloat(d[valueFields[i]]);
+            // 传进来的d[yFields[i]]可能是stringnumber
+            // 传进来的d[yFields[i]]可能是普通的字符串，这时计数按1计算（其实相当于计算数据条数）
+            resultObj[d[state]] += isNaN(parseFloat(d[valueFields[i]])) ? 1 : parseFloat(d[valueFields[i]]);
           }
         }
       });
diff --git a/packages/vchart/src/theme/buildin-theme/light/component/data-zoom.ts b/packages/vchart/src/theme/buildin-theme/light/component/data-zoom.ts
index d98a3b873a..d82139f62d 100644
--- a/packages/vchart/src/theme/buildin-theme/light/component/data-zoom.ts
+++ b/packages/vchart/src/theme/buildin-theme/light/component/data-zoom.ts
@@ -3,9 +3,9 @@ import type { IDataZoomTheme } from '../../../../component/data-zoom';
 export const dataZoom: IDataZoomTheme = {
   showDetail: 'auto',
   middleHandler: {
-    visible: false,
+    visible: true,
     background: {
-      size: 5,
+      size: 6,
       style: {
         // fill: 'white',
         stroke: '#D1D5DA',
@@ -14,7 +14,7 @@ export const dataZoom: IDataZoomTheme = {
     },
     icon: {
       style: {
-        size: 8,
+        size: 4,
         fill: 'white',
         stroke: '#D1D5DA',
         symbolType: