Merge branch 'dev' into gh-pages
diff --git a/.gitignore b/.gitignore
index 8b72324..4c2dd93 100644
--- a/.gitignore
+++ b/.gitignore
@@ -15,4 +15,5 @@
 /public/data/option
 /public/data-gl/option
 
-tmp
\ No newline at end of file
+tmp
+.webm
\ No newline at end of file
diff --git a/README.md b/README.md
index 52891ef..b56d153 100644
--- a/README.md
+++ b/README.md
@@ -40,6 +40,19 @@
 
 describes the meta info of this example.
 
+If you want to record a video to show the animation when genering screenshot. Use `videoStart` and `videoEnd`:
+
+```js
+/*
+title: Bar Race
+titleCN: 动态排序柱状图
+category: bar
+difficulty: 5
+videoStart: 1000
+videoEnd: 6000
+*/
+```
+
 
 ## Some built-in features available in examples
 
diff --git a/package-lock.json b/package-lock.json
index e6b08a4..d6d682b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1672,7 +1672,7 @@
     },
     "array-find-index": {
       "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/array-find-index/-/array-find-index-1.0.2.tgz",
+      "resolved": "https://registry.npm.taobao.org/array-find-index/download/array-find-index-1.0.2.tgz",
       "integrity": "sha1-3wEKoSh+Fku9pvlyOwqWoexBh6E=",
       "dev": true
     },
@@ -2128,7 +2128,7 @@
     },
     "camelcase-keys": {
       "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-2.1.0.tgz",
+      "resolved": "https://registry.npm.taobao.org/camelcase-keys/download/camelcase-keys-2.1.0.tgz",
       "integrity": "sha1-MIvur/3ygRkFHvodkyITyRuPkuc=",
       "dev": true,
       "requires": {
@@ -2138,7 +2138,7 @@
       "dependencies": {
         "camelcase": {
           "version": "2.1.1",
-          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-2.1.1.tgz",
+          "resolved": "https://registry.npm.taobao.org/camelcase/download/camelcase-2.1.1.tgz",
           "integrity": "sha1-fB0W1nmhu+WcoCys7PsBHiAfWh8=",
           "dev": true
         }
@@ -2569,7 +2569,7 @@
     },
     "console-control-strings": {
       "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
+      "resolved": "https://registry.npm.taobao.org/console-control-strings/download/console-control-strings-1.1.0.tgz",
       "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=",
       "dev": true
     },
@@ -2626,7 +2626,7 @@
     },
     "core-util-is": {
       "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
+      "resolved": "https://registry.npm.taobao.org/core-util-is/download/core-util-is-1.0.2.tgz",
       "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=",
       "dev": true
     },
@@ -2764,7 +2764,7 @@
     },
     "currently-unhandled": {
       "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/currently-unhandled/-/currently-unhandled-0.4.1.tgz",
+      "resolved": "https://registry.npm.taobao.org/currently-unhandled/download/currently-unhandled-0.4.1.tgz",
       "integrity": "sha1-mI3zP+qxke95mmE2nddsF635V+o=",
       "dev": true,
       "requires": {
@@ -2946,7 +2946,7 @@
     },
     "delegates": {
       "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
+      "resolved": "https://registry.npm.taobao.org/delegates/download/delegates-1.0.0.tgz",
       "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=",
       "dev": true
     },
@@ -3203,12 +3203,6 @@
         "is-arrayish": "^0.2.1"
       }
     },
-    "esbuild": {
-      "version": "0.8.29",
-      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.8.29.tgz",
-      "integrity": "sha512-UDsEoeXuctVgG2hEts1Hwq2jYDGqV7nksEHEZaiCy2v+lXF5ButX4ErPAJAFi5ZNKKW+6Pom93pArV7hki6HnQ==",
-      "dev": true
-    },
     "escalade": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.0.2.tgz",
@@ -3217,7 +3211,7 @@
     },
     "escape-string-regexp": {
       "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+      "resolved": "https://registry.npm.taobao.org/escape-string-regexp/download/escape-string-regexp-1.0.5.tgz",
       "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
       "dev": true
     },
@@ -3511,7 +3505,7 @@
     },
     "gauge": {
       "version": "2.7.4",
-      "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz",
+      "resolved": "https://registry.npm.taobao.org/gauge/download/gauge-2.7.4.tgz",
       "integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=",
       "dev": true,
       "requires": {
@@ -3548,7 +3542,7 @@
     },
     "get-stdin": {
       "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz",
+      "resolved": "https://registry.npm.taobao.org/get-stdin/download/get-stdin-4.0.1.tgz",
       "integrity": "sha1-uWjGsKBDhDJJAui/Gl3zJXmkUP4=",
       "dev": true
     },
@@ -3685,7 +3679,7 @@
     },
     "has-ansi": {
       "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz",
+      "resolved": "https://registry.npm.taobao.org/has-ansi/download/has-ansi-2.0.0.tgz",
       "integrity": "sha1-NPUEnOHs3ysGSa8+8k5F7TVBbZE=",
       "dev": true,
       "requires": {
@@ -3721,7 +3715,7 @@
     },
     "has-unicode": {
       "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
+      "resolved": "https://registry.npm.taobao.org/has-unicode/download/has-unicode-2.0.1.tgz",
       "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=",
       "dev": true
     },
@@ -3950,7 +3944,7 @@
     },
     "indent-string": {
       "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-2.1.0.tgz",
+      "resolved": "https://registry.npm.taobao.org/indent-string/download/indent-string-2.1.0.tgz",
       "integrity": "sha1-ji1INIdCEhtKghi3oTfppSBJ3IA=",
       "dev": true,
       "requires": {
@@ -4040,7 +4034,7 @@
     },
     "is-finite": {
       "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/is-finite/-/is-finite-1.0.2.tgz",
+      "resolved": "https://registry.npm.taobao.org/is-finite/download/is-finite-1.0.2.tgz",
       "integrity": "sha1-zGZ3aVYCvlUO8R6LSqYwU0K20Ko=",
       "dev": true,
       "requires": {
@@ -4115,7 +4109,7 @@
     },
     "isexe": {
       "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+      "resolved": "https://registry.npm.taobao.org/isexe/download/isexe-2.0.0.tgz",
       "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=",
       "dev": true
     },
@@ -4324,7 +4318,7 @@
     },
     "loud-rejection": {
       "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/loud-rejection/-/loud-rejection-1.6.0.tgz",
+      "resolved": "https://registry.npm.taobao.org/loud-rejection/download/loud-rejection-1.6.0.tgz",
       "integrity": "sha1-W0b4AUft7leIcPCG0Eghz5mOVR8=",
       "dev": true,
       "requires": {
@@ -4397,7 +4391,7 @@
     },
     "map-obj": {
       "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz",
+      "resolved": "https://registry.npm.taobao.org/map-obj/download/map-obj-1.0.1.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fmap-obj%2Fdownload%2Fmap-obj-1.0.1.tgz",
       "integrity": "sha1-2TPOuSBdgr3PSIb2dCvcK03qFG0=",
       "dev": true
     },
@@ -4409,7 +4403,7 @@
     },
     "meow": {
       "version": "3.7.0",
-      "resolved": "https://registry.npmjs.org/meow/-/meow-3.7.0.tgz",
+      "resolved": "https://registry.npm.taobao.org/meow/download/meow-3.7.0.tgz",
       "integrity": "sha1-cstmi0JSKCkKu/qFaJJYcwioAfs=",
       "dev": true,
       "requires": {
@@ -4563,7 +4557,7 @@
     },
     "minimist": {
       "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
+      "resolved": "https://registry.npm.taobao.org/minimist/download/minimist-1.2.0.tgz",
       "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
       "dev": true
     },
@@ -4755,7 +4749,7 @@
     },
     "object-assign": {
       "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "resolved": "https://registry.npm.taobao.org/object-assign/download/object-assign-4.1.1.tgz",
       "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
     },
     "object-keys": {
@@ -5362,7 +5356,7 @@
     },
     "pseudomap": {
       "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz",
+      "resolved": "https://registry.npm.taobao.org/pseudomap/download/pseudomap-1.0.2.tgz",
       "integrity": "sha1-8FKijacOYYkX7wqKw0wa5aaChrM=",
       "dev": true
     },
@@ -5467,7 +5461,7 @@
     },
     "redent": {
       "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/redent/-/redent-1.0.0.tgz",
+      "resolved": "https://registry.npm.taobao.org/redent/download/redent-1.0.0.tgz",
       "integrity": "sha1-z5Fqsf1fHxbfsggi3W7H9zDCr94=",
       "dev": true,
       "requires": {
@@ -5550,7 +5544,7 @@
     },
     "repeating": {
       "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/repeating/-/repeating-2.0.1.tgz",
+      "resolved": "https://registry.npm.taobao.org/repeating/download/repeating-2.0.1.tgz",
       "integrity": "sha1-UhTFOpJtNVJwdSf7q0FdvAjQbdo=",
       "dev": true,
       "requires": {
@@ -5804,9 +5798,37 @@
       "integrity": "sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM=",
       "dev": true
     },
+    "shelljs": {
+      "version": "0.8.4",
+      "resolved": "https://registry.npmjs.org/shelljs/-/shelljs-0.8.4.tgz",
+      "integrity": "sha512-7gk3UZ9kOfPLIAbslLzyWeGiEqx9e3rxwZM0KE6EL8GlGwjym9Mrlx5/p33bWTu9YG6vcS4MBxYZDHYr5lr8BQ==",
+      "dev": true,
+      "requires": {
+        "glob": "^7.0.0",
+        "interpret": "^1.0.0",
+        "rechoir": "^0.6.2"
+      },
+      "dependencies": {
+        "interpret": {
+          "version": "1.4.0",
+          "resolved": "https://registry.npmjs.org/interpret/-/interpret-1.4.0.tgz",
+          "integrity": "sha512-agE4QfB2Lkp9uICn7BAqoscw4SZP9kTE2hxiFI3jBPmXJfdqiahTbUuKGsMoN2GtqL9AxhYioAcVvgsb1HvRbA==",
+          "dev": true
+        },
+        "rechoir": {
+          "version": "0.6.2",
+          "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.6.2.tgz",
+          "integrity": "sha1-hSBLVNuoLVdC4oyWdW70OvUOM4Q=",
+          "dev": true,
+          "requires": {
+            "resolve": "^1.1.6"
+          }
+        }
+      }
+    },
     "signal-exit": {
       "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz",
+      "resolved": "https://registry.npm.taobao.org/signal-exit/download/signal-exit-3.0.2.tgz",
       "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=",
       "dev": true
     },
@@ -6081,7 +6103,7 @@
     },
     "strip-indent": {
       "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-1.0.1.tgz",
+      "resolved": "https://registry.npm.taobao.org/strip-indent/download/strip-indent-1.0.1.tgz",
       "integrity": "sha1-DHlipq3vp7vUrDZkYKY4VSrhoKI=",
       "dev": true,
       "requires": {
@@ -6433,7 +6455,7 @@
     },
     "trim-newlines": {
       "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/trim-newlines/-/trim-newlines-1.0.0.tgz",
+      "resolved": "https://registry.npm.taobao.org/trim-newlines/download/trim-newlines-1.0.0.tgz",
       "integrity": "sha1-WIeWa7WCpFA6QetST301ARgVphM=",
       "dev": true
     },
@@ -6468,7 +6490,7 @@
     },
     "tunnel-agent": {
       "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
+      "resolved": "https://registry.npm.taobao.org/tunnel-agent/download/tunnel-agent-0.6.0.tgz",
       "integrity": "sha1-J6XeoGs2sEoKmWZ3SykIaPD8QP0=",
       "dev": true,
       "requires": {
@@ -6557,7 +6579,7 @@
     },
     "util-deprecate": {
       "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "resolved": "https://registry.npm.taobao.org/util-deprecate/download/util-deprecate-1.0.2.tgz",
       "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
       "dev": true
     },
@@ -7052,7 +7074,7 @@
     },
     "yallist": {
       "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
+      "resolved": "https://registry.npm.taobao.org/yallist/download/yallist-2.1.2.tgz",
       "integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI=",
       "dev": true
     },
diff --git a/public/data-gl/animating-contour-on-globe.js b/public/data-gl/animating-contour-on-globe.js
index c6cbfed..aa2202f 100644
--- a/public/data-gl/animating-contour-on-globe.js
+++ b/public/data-gl/animating-contour-on-globe.js
@@ -2,6 +2,8 @@
 title: Animating Contour on Globe
 category: globe
 titleCN: Animating Contour on Globe
+videoStart: 2000
+videoEnd: 6000
 */
 
 
diff --git a/public/data-gl/flowGL-noise.js b/public/data-gl/flowGL-noise.js
index 5c9cc68..2d57e64 100644
--- a/public/data-gl/flowGL-noise.js
+++ b/public/data-gl/flowGL-noise.js
@@ -3,6 +3,8 @@
 category: flowGL
 titleCN: 直角坐标系上的向量场
 theme: dark
+videoStart: 2000
+videoEnd: 10000
 */
 
 $.getScript('https://cdn.jsdelivr.net/npm/simplex-noise@2.4.0/simplex-noise.js').done(function () {
diff --git a/public/data-gl/global-wind-visualization-2.js b/public/data-gl/global-wind-visualization-2.js
index 13c23a3..89e2e3a 100644
--- a/public/data-gl/global-wind-visualization-2.js
+++ b/public/data-gl/global-wind-visualization-2.js
@@ -3,6 +3,8 @@
 category: flowGL
 tags: bmap
 titleCN: Global Wind Visualization 2
+videoStart: 2000
+videoEnd: 10000
 */
 
 $.getJSON(ROOT_PATH + '/data-gl/asset/data/gfs.json', function(windData) {
@@ -34,6 +36,7 @@
             }
         }
         myChart.setOption({
+            backgroundColor: '#001122',
             visualMap: {
                 left: 'right',
                 min: minMag,
diff --git a/public/data-gl/global-wind-visualization.js b/public/data-gl/global-wind-visualization.js
index ef7b71e..9494961 100644
--- a/public/data-gl/global-wind-visualization.js
+++ b/public/data-gl/global-wind-visualization.js
@@ -3,6 +3,8 @@
 category: flowGL
 tags: bmap
 titleCN: Global wind visualization
+videoStart: 2000
+videoEnd: 10000
 */
 
 $.getJSON(ROOT_PATH + '/data-gl/asset/data/winds.json', function (windData) {
@@ -32,6 +34,7 @@
         }
     }
     myChart.setOption(option = {
+        backgroundColor: '#001122',
         visualMap: {
             left: 'right',
             min: minMag,
diff --git a/public/data-gl/globe-echarts-gl-hello-world.js b/public/data-gl/globe-echarts-gl-hello-world.js
index 7d42cfa..6ef4cb5 100644
--- a/public/data-gl/globe-echarts-gl-hello-world.js
+++ b/public/data-gl/globe-echarts-gl-hello-world.js
@@ -3,6 +3,8 @@
 category: globe
 titleCN: ECharts-GL Hello World
 scripts: 'https://cdn.jsdelivr.net/gh/ecomfe/echarts-gl/dist/echarts-gl.min.js'
+videoStart: 2000
+videoEnd: 6000
 */
 
 option = {
diff --git a/public/data-gl/globe-layers.js b/public/data-gl/globe-layers.js
index 6ec140d..ef3d0e5 100644
--- a/public/data-gl/globe-layers.js
+++ b/public/data-gl/globe-layers.js
@@ -2,6 +2,8 @@
 title: Globe Layers
 category: globe
 titleCN: Globe Layers
+videoStart: 2000
+videoEnd: 6000
 */
 
 option = {
diff --git a/public/data-gl/graphgl-gpu-layout.js b/public/data-gl/graphgl-gpu-layout.js
index fdb5390..e27ebbf 100644
--- a/public/data-gl/graphgl-gpu-layout.js
+++ b/public/data-gl/graphgl-gpu-layout.js
@@ -3,7 +3,8 @@
 category: graphGL
 theme: dark
 titleCN: GraphGL GPU Layout
-shotDelay: 5000
+videoStart: 0
+videoEnd: 10000
 shotWidth: 1280
 */
 
diff --git a/public/data-gl/lines3d-flights-gl.js b/public/data-gl/lines3d-flights-gl.js
index f9a419f..95644fb 100644
--- a/public/data-gl/lines3d-flights-gl.js
+++ b/public/data-gl/lines3d-flights-gl.js
@@ -2,6 +2,8 @@
 title: Flights GL
 category: lines3D
 titleCN: Flights GL
+videoStart: 2000
+videoEnd: 8000
 */
 
 var uploadedDataURL = ROOT_PATH + "/data-gl/asset/data/flights.json";
diff --git a/public/data-gl/thumb-dark/flowGL-noise.webp b/public/data-gl/thumb-dark/flowGL-noise.webp
index 1c01dac..8cdbebb 100644
--- a/public/data-gl/thumb-dark/flowGL-noise.webp
+++ b/public/data-gl/thumb-dark/flowGL-noise.webp
Binary files differ
diff --git a/public/data-gl/thumb-dark/global-wind-visualization-2.webp b/public/data-gl/thumb-dark/global-wind-visualization-2.webp
index c10d48e..a032e9a 100644
--- a/public/data-gl/thumb-dark/global-wind-visualization-2.webp
+++ b/public/data-gl/thumb-dark/global-wind-visualization-2.webp
Binary files differ
diff --git a/public/data-gl/thumb-dark/global-wind-visualization.webp b/public/data-gl/thumb-dark/global-wind-visualization.webp
index aa3787f..6bcbf59 100644
--- a/public/data-gl/thumb-dark/global-wind-visualization.webp
+++ b/public/data-gl/thumb-dark/global-wind-visualization.webp
Binary files differ
diff --git a/public/data-gl/thumb-dark/graphgl-gpu-layout.webp b/public/data-gl/thumb-dark/graphgl-gpu-layout.webp
index c5ac8b5..395fce4 100644
--- a/public/data-gl/thumb-dark/graphgl-gpu-layout.webp
+++ b/public/data-gl/thumb-dark/graphgl-gpu-layout.webp
Binary files differ
diff --git a/public/data-gl/thumb-dark/lines3d-flights-gl.webp b/public/data-gl/thumb-dark/lines3d-flights-gl.webp
index d239c74..fb32c90 100644
--- a/public/data-gl/thumb-dark/lines3d-flights-gl.webp
+++ b/public/data-gl/thumb-dark/lines3d-flights-gl.webp
Binary files differ
diff --git a/public/data-gl/thumb/animating-contour-on-globe.webp b/public/data-gl/thumb/animating-contour-on-globe.webp
index acfb85a..7babc45 100644
--- a/public/data-gl/thumb/animating-contour-on-globe.webp
+++ b/public/data-gl/thumb/animating-contour-on-globe.webp
Binary files differ
diff --git a/public/data-gl/thumb/global-wind-visualization-2.webp b/public/data-gl/thumb/global-wind-visualization-2.webp
index 5d06ac7..75c87fa 100644
--- a/public/data-gl/thumb/global-wind-visualization-2.webp
+++ b/public/data-gl/thumb/global-wind-visualization-2.webp
Binary files differ
diff --git a/public/data-gl/thumb/global-wind-visualization.webp b/public/data-gl/thumb/global-wind-visualization.webp
index 92aa7ee..06fc932 100644
--- a/public/data-gl/thumb/global-wind-visualization.webp
+++ b/public/data-gl/thumb/global-wind-visualization.webp
Binary files differ
diff --git a/public/data-gl/thumb/globe-echarts-gl-hello-world.webp b/public/data-gl/thumb/globe-echarts-gl-hello-world.webp
index 12c680f..dda8122 100644
--- a/public/data-gl/thumb/globe-echarts-gl-hello-world.webp
+++ b/public/data-gl/thumb/globe-echarts-gl-hello-world.webp
Binary files differ
diff --git a/public/data-gl/thumb/globe-layers.webp b/public/data-gl/thumb/globe-layers.webp
index 30fa381..dda30ab 100644
--- a/public/data-gl/thumb/globe-layers.webp
+++ b/public/data-gl/thumb/globe-layers.webp
Binary files differ
diff --git a/public/data-gl/thumb/lines3d-flights-gl.webp b/public/data-gl/thumb/lines3d-flights-gl.webp
index 1dce4b0..49af657 100644
--- a/public/data-gl/thumb/lines3d-flights-gl.webp
+++ b/public/data-gl/thumb/lines3d-flights-gl.webp
Binary files differ
diff --git a/public/data/custom-aggregate-scatter-bar.js b/public/data/archive/custom-aggregate-scatter-bar.js
similarity index 100%
rename from public/data/custom-aggregate-scatter-bar.js
rename to public/data/archive/custom-aggregate-scatter-bar.js
diff --git a/public/data/custom-aggregate-scatter-cluster.js b/public/data/archive/custom-aggregate-scatter-cluster.js
similarity index 100%
rename from public/data/custom-aggregate-scatter-cluster.js
rename to public/data/archive/custom-aggregate-scatter-cluster.js
diff --git a/public/data/custom-aggregate-scatter-pie.js b/public/data/archive/custom-aggregate-scatter-pie.js
similarity index 100%
rename from public/data/custom-aggregate-scatter-pie.js
rename to public/data/archive/custom-aggregate-scatter-pie.js
diff --git a/public/data/custom-one-to-one-morph.js b/public/data/archive/custom-one-to-one-morph.js
similarity index 100%
rename from public/data/custom-one-to-one-morph.js
rename to public/data/archive/custom-one-to-one-morph.js
diff --git a/public/data/custom-story-transition.js b/public/data/archive/custom-story-transition.js
similarity index 100%
rename from public/data/custom-story-transition.js
rename to public/data/archive/custom-story-transition.js
diff --git a/public/data/asset/data/echarts-package-size.json b/public/data/asset/data/echarts-package-size.json
new file mode 100644
index 0000000..30931c3
--- /dev/null
+++ b/public/data/asset/data/echarts-package-size.json
@@ -0,0 +1,3872 @@
+{
+  "name": "echarts",
+  "size": 3835461,
+  "children": [
+    {
+      "name": "action",
+      "size": 2307,
+      "children": [
+        {
+          "name": "action/roamHelper.ts",
+          "size": 2307,
+          "value": 2307
+        }
+      ],
+      "value": 2307
+    },
+    {
+      "name": "animation",
+      "size": 44515,
+      "children": [
+        {
+          "name": "animation/basicTrasition.ts",
+          "size": 11322,
+          "value": 11322
+        },
+        {
+          "name": "animation/morphTransitionHelper.ts",
+          "size": 8706,
+          "value": 8706
+        },
+        {
+          "name": "animation/universalTransition.ts",
+          "size": 24487,
+          "value": 24487
+        }
+      ],
+      "value": 44515
+    },
+    {
+      "name": "chart",
+      "size": 1059597,
+      "children": [
+        {
+          "name": "chart/bar",
+          "size": 90538,
+          "children": [
+            {
+              "name": "chart/bar/BarSeries.ts",
+              "size": 4489,
+              "value": 4489
+            },
+            {
+              "name": "chart/bar/BarView.ts",
+              "size": 41509,
+              "value": 41509
+            },
+            {
+              "name": "chart/bar/BaseBarSeries.ts",
+              "size": 3754,
+              "value": 3754
+            },
+            {
+              "name": "chart/bar/PictorialBarSeries.ts",
+              "size": 5194,
+              "value": 5194
+            },
+            {
+              "name": "chart/bar/PictorialBarView.ts",
+              "size": 31640,
+              "value": 31640
+            },
+            {
+              "name": "chart/bar/install.ts",
+              "size": 2627,
+              "value": 2627
+            },
+            {
+              "name": "chart/bar/installPictorialBar.ts",
+              "size": 1325,
+              "value": 1325
+            }
+          ],
+          "value": 90538
+        },
+        {
+          "name": "chart/bar.ts",
+          "size": 885,
+          "value": 885
+        },
+        {
+          "name": "chart/boxplot",
+          "size": 24408,
+          "children": [
+            {
+              "name": "chart/boxplot/BoxplotSeries.ts",
+              "size": 3891,
+              "value": 3891
+            },
+            {
+              "name": "chart/boxplot/BoxplotView.ts",
+              "size": 5968,
+              "value": 5968
+            },
+            {
+              "name": "chart/boxplot/boxplotLayout.ts",
+              "size": 6718,
+              "value": 6718
+            },
+            {
+              "name": "chart/boxplot/boxplotTransform.ts",
+              "size": 2073,
+              "value": 2073
+            },
+            {
+              "name": "chart/boxplot/boxplotVisual.ts",
+              "size": 1024,
+              "value": 1024
+            },
+            {
+              "name": "chart/boxplot/install.ts",
+              "size": 1411,
+              "value": 1411
+            },
+            {
+              "name": "chart/boxplot/prepareBoxplotData.ts",
+              "size": 3323,
+              "value": 3323
+            }
+          ],
+          "value": 24408
+        },
+        {
+          "name": "chart/boxplot.ts",
+          "size": 889,
+          "value": 889
+        },
+        {
+          "name": "chart/candlestick",
+          "size": 31115,
+          "children": [
+            {
+              "name": "chart/candlestick/CandlestickSeries.ts",
+              "size": 4548,
+              "value": 4548
+            },
+            {
+              "name": "chart/candlestick/CandlestickView.ts",
+              "size": 11680,
+              "value": 11680
+            },
+            {
+              "name": "chart/candlestick/candlestickLayout.ts",
+              "size": 9182,
+              "value": 9182
+            },
+            {
+              "name": "chart/candlestick/candlestickVisual.ts",
+              "size": 2990,
+              "value": 2990
+            },
+            {
+              "name": "chart/candlestick/install.ts",
+              "size": 1447,
+              "value": 1447
+            },
+            {
+              "name": "chart/candlestick/preprocessor.ts",
+              "size": 1268,
+              "value": 1268
+            }
+          ],
+          "value": 31115
+        },
+        {
+          "name": "chart/candlestick.ts",
+          "size": 891,
+          "value": 891
+        },
+        {
+          "name": "chart/custom",
+          "size": 87227,
+          "children": [
+            {
+              "name": "chart/custom/CustomSeries.ts",
+              "size": 12400,
+              "value": 12400
+            },
+            {
+              "name": "chart/custom/CustomView.ts",
+              "size": 60468,
+              "value": 60468
+            },
+            {
+              "name": "chart/custom/install.ts",
+              "size": 1129,
+              "value": 1129
+            },
+            {
+              "name": "chart/custom/prepare.ts",
+              "size": 13230,
+              "value": 13230
+            }
+          ],
+          "value": 87227
+        },
+        {
+          "name": "chart/custom.ts",
+          "size": 887,
+          "value": 887
+        },
+        {
+          "name": "chart/effectScatter",
+          "size": 8799,
+          "children": [
+            {
+              "name": "chart/effectScatter/EffectScatterSeries.ts",
+              "size": 4446,
+              "value": 4446
+            },
+            {
+              "name": "chart/effectScatter/EffectScatterView.ts",
+              "size": 3082,
+              "value": 3082
+            },
+            {
+              "name": "chart/effectScatter/install.ts",
+              "size": 1271,
+              "value": 1271
+            }
+          ],
+          "value": 8799
+        },
+        {
+          "name": "chart/effectScatter.ts",
+          "size": 893,
+          "value": 893
+        },
+        {
+          "name": "chart/funnel",
+          "size": 28181,
+          "children": [
+            {
+              "name": "chart/funnel/FunnelSeries.ts",
+              "size": 5960,
+              "value": 5960
+            },
+            {
+              "name": "chart/funnel/FunnelView.ts",
+              "size": 6781,
+              "value": 6781
+            },
+            {
+              "name": "chart/funnel/funnelLayout.ts",
+              "size": 14126,
+              "value": 14126
+            },
+            {
+              "name": "chart/funnel/install.ts",
+              "size": 1314,
+              "value": 1314
+            }
+          ],
+          "value": 28181
+        },
+        {
+          "name": "chart/funnel.ts",
+          "size": 886,
+          "value": 886
+        },
+        {
+          "name": "chart/gauge",
+          "size": 37230,
+          "children": [
+            {
+              "name": "chart/gauge/GaugeSeries.ts",
+              "size": 7859,
+              "value": 7859
+            },
+            {
+              "name": "chart/gauge/GaugeView.ts",
+              "size": 26107,
+              "value": 26107
+            },
+            {
+              "name": "chart/gauge/PointerPath.ts",
+              "size": 2151,
+              "value": 2151
+            },
+            {
+              "name": "chart/gauge/install.ts",
+              "size": 1113,
+              "value": 1113
+            }
+          ],
+          "value": 37230
+        },
+        {
+          "name": "chart/gauge.ts",
+          "size": 885,
+          "value": 885
+        },
+        {
+          "name": "chart/graph",
+          "size": 74973,
+          "children": [
+            {
+              "name": "chart/graph/GraphSeries.ts",
+              "size": 14275,
+              "value": 14275
+            },
+            {
+              "name": "chart/graph/GraphView.ts",
+              "size": 10843,
+              "value": 10843
+            },
+            {
+              "name": "chart/graph/adjustEdge.ts",
+              "size": 6122,
+              "value": 6122
+            },
+            {
+              "name": "chart/graph/categoryFilter.ts",
+              "size": 2191,
+              "value": 2191
+            },
+            {
+              "name": "chart/graph/categoryVisual.ts",
+              "size": 3546,
+              "value": 3546
+            },
+            {
+              "name": "chart/graph/circularLayout.ts",
+              "size": 1220,
+              "value": 1220
+            },
+            {
+              "name": "chart/graph/circularLayoutHelper.ts",
+              "size": 5653,
+              "value": 5653
+            },
+            {
+              "name": "chart/graph/createView.ts",
+              "size": 3700,
+              "value": 3700
+            },
+            {
+              "name": "chart/graph/edgeVisual.ts",
+              "size": 3507,
+              "value": 3507
+            },
+            {
+              "name": "chart/graph/forceHelper.ts",
+              "size": 7070,
+              "value": 7070
+            },
+            {
+              "name": "chart/graph/forceLayout.ts",
+              "size": 7295,
+              "value": 7295
+            },
+            {
+              "name": "chart/graph/graphHelper.ts",
+              "size": 1616,
+              "value": 1616
+            },
+            {
+              "name": "chart/graph/install.ts",
+              "size": 3086,
+              "value": 3086
+            },
+            {
+              "name": "chart/graph/simpleLayout.ts",
+              "size": 2582,
+              "value": 2582
+            },
+            {
+              "name": "chart/graph/simpleLayoutHelper.ts",
+              "size": 2267,
+              "value": 2267
+            }
+          ],
+          "value": 74973
+        },
+        {
+          "name": "chart/graph.ts",
+          "size": 886,
+          "value": 886
+        },
+        {
+          "name": "chart/heatmap",
+          "size": 24819,
+          "children": [
+            {
+              "name": "chart/heatmap/HeatmapLayer.ts",
+              "size": 6056,
+              "value": 6056
+            },
+            {
+              "name": "chart/heatmap/HeatmapSeries.ts",
+              "size": 3602,
+              "value": 3602
+            },
+            {
+              "name": "chart/heatmap/HeatmapView.ts",
+              "size": 14036,
+              "value": 14036
+            },
+            {
+              "name": "chart/heatmap/install.ts",
+              "size": 1125,
+              "value": 1125
+            }
+          ],
+          "value": 24819
+        },
+        {
+          "name": "chart/heatmap.ts",
+          "size": 888,
+          "value": 888
+        },
+        {
+          "name": "chart/helper",
+          "size": 133086,
+          "children": [
+            {
+              "name": "chart/helper/EffectLine.ts",
+              "size": 8279,
+              "value": 8279
+            },
+            {
+              "name": "chart/helper/EffectPolyline.ts",
+              "size": 3707,
+              "value": 3707
+            },
+            {
+              "name": "chart/helper/EffectSymbol.ts",
+              "size": 8513,
+              "value": 8513
+            },
+            {
+              "name": "chart/helper/LargeLineDraw.ts",
+              "size": 8490,
+              "value": 8490
+            },
+            {
+              "name": "chart/helper/LargeSymbolDraw.ts",
+              "size": 9624,
+              "value": 9624
+            },
+            {
+              "name": "chart/helper/Line.ts",
+              "size": 18271,
+              "value": 18271
+            },
+            {
+              "name": "chart/helper/LineDraw.ts",
+              "size": 7187,
+              "value": 7187
+            },
+            {
+              "name": "chart/helper/LinePath.ts",
+              "size": 2836,
+              "value": 2836
+            },
+            {
+              "name": "chart/helper/Polyline.ts",
+              "size": 3035,
+              "value": 3035
+            },
+            {
+              "name": "chart/helper/Symbol.ts",
+              "size": 13637,
+              "value": 13637
+            },
+            {
+              "name": "chart/helper/SymbolDraw.ts",
+              "size": 10007,
+              "value": 10007
+            },
+            {
+              "name": "chart/helper/createClipPathFromCoordSys.ts",
+              "size": 4784,
+              "value": 4784
+            },
+            {
+              "name": "chart/helper/createGraphFromNodeEdge.ts",
+              "size": 3956,
+              "value": 3956
+            },
+            {
+              "name": "chart/helper/createListFromArray.ts",
+              "size": 5728,
+              "value": 5728
+            },
+            {
+              "name": "chart/helper/createListSimply.ts",
+              "size": 1701,
+              "value": 1701
+            },
+            {
+              "name": "chart/helper/createRenderPlanner.ts",
+              "size": 2050,
+              "value": 2050
+            },
+            {
+              "name": "chart/helper/enableAriaDecalForTree.ts",
+              "size": 1578,
+              "value": 1578
+            },
+            {
+              "name": "chart/helper/labelHelper.ts",
+              "size": 2193,
+              "value": 2193
+            },
+            {
+              "name": "chart/helper/multipleGraphEdgeHelper.ts",
+              "size": 7494,
+              "value": 7494
+            },
+            {
+              "name": "chart/helper/pieHelper.ts",
+              "size": 1510,
+              "value": 1510
+            },
+            {
+              "name": "chart/helper/treeHelper.ts",
+              "size": 2724,
+              "value": 2724
+            },
+            {
+              "name": "chart/helper/whiskerBoxCommon.ts",
+              "size": 5782,
+              "value": 5782
+            }
+          ],
+          "value": 133086
+        },
+        {
+          "name": "chart/line",
+          "size": 78825,
+          "children": [
+            {
+              "name": "chart/line/LineSeries.ts",
+              "size": 7339,
+              "value": 7339
+            },
+            {
+              "name": "chart/line/LineView.ts",
+              "size": 46175,
+              "value": 46175
+            },
+            {
+              "name": "chart/line/helper.ts",
+              "size": 4127,
+              "value": 4127
+            },
+            {
+              "name": "chart/line/install.ts",
+              "size": 2049,
+              "value": 2049
+            },
+            {
+              "name": "chart/line/lineAnimationDiff.ts",
+              "size": 6738,
+              "value": 6738
+            },
+            {
+              "name": "chart/line/poly.ts",
+              "size": 12397,
+              "value": 12397
+            }
+          ],
+          "value": 78825
+        },
+        {
+          "name": "chart/line.ts",
+          "size": 884,
+          "value": 884
+        },
+        {
+          "name": "chart/lines",
+          "size": 28837,
+          "children": [
+            {
+              "name": "chart/lines/LinesSeries.ts",
+              "size": 12955,
+              "value": 12955
+            },
+            {
+              "name": "chart/lines/LinesView.ts",
+              "size": 7716,
+              "value": 7716
+            },
+            {
+              "name": "chart/lines/install.ts",
+              "size": 1281,
+              "value": 1281
+            },
+            {
+              "name": "chart/lines/linesLayout.ts",
+              "size": 4123,
+              "value": 4123
+            },
+            {
+              "name": "chart/lines/linesVisual.ts",
+              "size": 2762,
+              "value": 2762
+            }
+          ],
+          "value": 28837
+        },
+        {
+          "name": "chart/lines.ts",
+          "size": 886,
+          "value": 886
+        },
+        {
+          "name": "chart/map",
+          "size": 25765,
+          "children": [
+            {
+              "name": "chart/map/MapSeries.ts",
+              "size": 10347,
+              "value": 10347
+            },
+            {
+              "name": "chart/map/MapView.ts",
+              "size": 7234,
+              "value": 7234
+            },
+            {
+              "name": "chart/map/install.ts",
+              "size": 1568,
+              "value": 1568
+            },
+            {
+              "name": "chart/map/mapDataStatistic.ts",
+              "size": 3612,
+              "value": 3612
+            },
+            {
+              "name": "chart/map/mapSymbolLayout.ts",
+              "size": 3004,
+              "value": 3004
+            }
+          ],
+          "value": 25765
+        },
+        {
+          "name": "chart/map.ts",
+          "size": 883,
+          "value": 883
+        },
+        {
+          "name": "chart/parallel",
+          "size": 16811,
+          "children": [
+            {
+              "name": "chart/parallel/ParallelSeries.ts",
+              "size": 5234,
+              "value": 5234
+            },
+            {
+              "name": "chart/parallel/ParallelView.ts",
+              "size": 8006,
+              "value": 8006
+            },
+            {
+              "name": "chart/parallel/install.ts",
+              "size": 1385,
+              "value": 1385
+            },
+            {
+              "name": "chart/parallel/parallelVisual.ts",
+              "size": 2186,
+              "value": 2186
+            }
+          ],
+          "value": 16811
+        },
+        {
+          "name": "chart/parallel.ts",
+          "size": 888,
+          "value": 888
+        },
+        {
+          "name": "chart/pictorialBar.ts",
+          "size": 895,
+          "value": 895
+        },
+        {
+          "name": "chart/pie",
+          "size": 44655,
+          "children": [
+            {
+              "name": "chart/pie/PieSeries.ts",
+              "size": 9492,
+              "value": 9492
+            },
+            {
+              "name": "chart/pie/PieView.ts",
+              "size": 10737,
+              "value": 10737
+            },
+            {
+              "name": "chart/pie/install.ts",
+              "size": 1625,
+              "value": 1625
+            },
+            {
+              "name": "chart/pie/labelLayout.ts",
+              "size": 16039,
+              "value": 16039
+            },
+            {
+              "name": "chart/pie/pieLayout.ts",
+              "size": 6762,
+              "value": 6762
+            }
+          ],
+          "value": 44655
+        },
+        {
+          "name": "chart/pie.ts",
+          "size": 883,
+          "value": 883
+        },
+        {
+          "name": "chart/radar",
+          "size": 22389,
+          "children": [
+            {
+              "name": "chart/radar/RadarSeries.ts",
+              "size": 5383,
+              "value": 5383
+            },
+            {
+              "name": "chart/radar/RadarView.ts",
+              "size": 10797,
+              "value": 10797
+            },
+            {
+              "name": "chart/radar/backwardCompat.ts",
+              "size": 1940,
+              "value": 1940
+            },
+            {
+              "name": "chart/radar/install.ts",
+              "size": 1538,
+              "value": 1538
+            },
+            {
+              "name": "chart/radar/radarLayout.ts",
+              "size": 2731,
+              "value": 2731
+            }
+          ],
+          "value": 22389
+        },
+        {
+          "name": "chart/radar.ts",
+          "size": 885,
+          "value": 885
+        },
+        {
+          "name": "chart/sankey",
+          "size": 44323,
+          "children": [
+            {
+              "name": "chart/sankey/SankeySeries.ts",
+              "size": 9638,
+              "value": 9638
+            },
+            {
+              "name": "chart/sankey/SankeyView.ts",
+              "size": 11909,
+              "value": 11909
+            },
+            {
+              "name": "chart/sankey/install.ts",
+              "size": 2033,
+              "value": 2033
+            },
+            {
+              "name": "chart/sankey/sankeyLayout.ts",
+              "size": 18170,
+              "value": 18170
+            },
+            {
+              "name": "chart/sankey/sankeyVisual.ts",
+              "size": 2573,
+              "value": 2573
+            }
+          ],
+          "value": 44323
+        },
+        {
+          "name": "chart/sankey.ts",
+          "size": 886,
+          "value": 886
+        },
+        {
+          "name": "chart/scatter",
+          "size": 10739,
+          "children": [
+            {
+              "name": "chart/scatter/ScatterSeries.ts",
+              "size": 4719,
+              "value": 4719
+            },
+            {
+              "name": "chart/scatter/ScatterView.ts",
+              "size": 4618,
+              "value": 4618
+            },
+            {
+              "name": "chart/scatter/install.ts",
+              "size": 1402,
+              "value": 1402
+            }
+          ],
+          "value": 10739
+        },
+        {
+          "name": "chart/scatter.ts",
+          "size": 887,
+          "value": 887
+        },
+        {
+          "name": "chart/sunburst",
+          "size": 43908,
+          "children": [
+            {
+              "name": "chart/sunburst/SunburstPiece.ts",
+              "size": 10202,
+              "value": 10202
+            },
+            {
+              "name": "chart/sunburst/SunburstSeries.ts",
+              "size": 9448,
+              "value": 9448
+            },
+            {
+              "name": "chart/sunburst/SunburstView.ts",
+              "size": 8236,
+              "value": 8236
+            },
+            {
+              "name": "chart/sunburst/install.ts",
+              "size": 1596,
+              "value": 1596
+            },
+            {
+              "name": "chart/sunburst/sunburstAction.ts",
+              "size": 4014,
+              "value": 4014
+            },
+            {
+              "name": "chart/sunburst/sunburstLayout.ts",
+              "size": 7908,
+              "value": 7908
+            },
+            {
+              "name": "chart/sunburst/sunburstVisual.ts",
+              "size": 2504,
+              "value": 2504
+            }
+          ],
+          "value": 43908
+        },
+        {
+          "name": "chart/sunburst.ts",
+          "size": 888,
+          "value": 888
+        },
+        {
+          "name": "chart/themeRiver",
+          "size": 23557,
+          "children": [
+            {
+              "name": "chart/themeRiver/ThemeRiverSeries.ts",
+              "size": 10023,
+              "value": 10023
+            },
+            {
+              "name": "chart/themeRiver/ThemeRiverView.ts",
+              "size": 6867,
+              "value": 6867
+            },
+            {
+              "name": "chart/themeRiver/install.ts",
+              "size": 1355,
+              "value": 1355
+            },
+            {
+              "name": "chart/themeRiver/themeRiverLayout.ts",
+              "size": 5312,
+              "value": 5312
+            }
+          ],
+          "value": 23557
+        },
+        {
+          "name": "chart/themeRiver.ts",
+          "size": 890,
+          "value": 890
+        },
+        {
+          "name": "chart/tree",
+          "size": 58277,
+          "children": [
+            {
+              "name": "chart/tree/TreeSeries.ts",
+              "size": 8544,
+              "value": 8544
+            },
+            {
+              "name": "chart/tree/TreeView.ts",
+              "size": 25453,
+              "value": 25453
+            },
+            {
+              "name": "chart/tree/install.ts",
+              "size": 1352,
+              "value": 1352
+            },
+            {
+              "name": "chart/tree/layoutHelper.ts",
+              "size": 11766,
+              "value": 11766
+            },
+            {
+              "name": "chart/tree/traversalHelper.ts",
+              "size": 2085,
+              "value": 2085
+            },
+            {
+              "name": "chart/tree/treeAction.ts",
+              "size": 2758,
+              "value": 2758
+            },
+            {
+              "name": "chart/tree/treeLayout.ts",
+              "size": 4787,
+              "value": 4787
+            },
+            {
+              "name": "chart/tree/treeVisual.ts",
+              "size": 1532,
+              "value": 1532
+            }
+          ],
+          "value": 58277
+        },
+        {
+          "name": "chart/tree.ts",
+          "size": 884,
+          "value": 884
+        },
+        {
+          "name": "chart/treemap",
+          "size": 101619,
+          "children": [
+            {
+              "name": "chart/treemap/Breadcrumb.ts",
+              "size": 7862,
+              "value": 7862
+            },
+            {
+              "name": "chart/treemap/TreemapSeries.ts",
+              "size": 18371,
+              "value": 18371
+            },
+            {
+              "name": "chart/treemap/TreemapView.ts",
+              "size": 39544,
+              "value": 39544
+            },
+            {
+              "name": "chart/treemap/install.ts",
+              "size": 1400,
+              "value": 1400
+            },
+            {
+              "name": "chart/treemap/treemapAction.ts",
+              "size": 2938,
+              "value": 2938
+            },
+            {
+              "name": "chart/treemap/treemapLayout.ts",
+              "size": 22173,
+              "value": 22173
+            },
+            {
+              "name": "chart/treemap/treemapVisual.ts",
+              "size": 9331,
+              "value": 9331
+            }
+          ],
+          "value": 101619
+        },
+        {
+          "name": "chart/treemap.ts",
+          "size": 887,
+          "value": 887
+        }
+      ],
+      "value": 1059597
+    },
+    {
+      "name": "component",
+      "size": 1100395,
+      "children": [
+        {
+          "name": "component/aria",
+          "size": 2687,
+          "children": [
+            {
+              "name": "component/aria/install.ts",
+              "size": 1152,
+              "value": 1152
+            },
+            {
+              "name": "component/aria/preprocessor.ts",
+              "size": 1535,
+              "value": 1535
+            }
+          ],
+          "value": 2687
+        },
+        {
+          "name": "component/aria.ts",
+          "size": 884,
+          "value": 884
+        },
+        {
+          "name": "component/axis",
+          "size": 80026,
+          "children": [
+            {
+              "name": "component/axis/AngleAxisView.ts",
+              "size": 14332,
+              "value": 14332
+            },
+            {
+              "name": "component/axis/AxisBuilder.ts",
+              "size": 26066,
+              "value": 26066
+            },
+            {
+              "name": "component/axis/AxisView.ts",
+              "size": 3960,
+              "value": 3960
+            },
+            {
+              "name": "component/axis/CartesianAxisView.ts",
+              "size": 8399,
+              "value": 8399
+            },
+            {
+              "name": "component/axis/ParallelAxisView.ts",
+              "size": 7567,
+              "value": 7567
+            },
+            {
+              "name": "component/axis/RadiusAxisView.ts",
+              "size": 7861,
+              "value": 7861
+            },
+            {
+              "name": "component/axis/SingleAxisView.ts",
+              "size": 5187,
+              "value": 5187
+            },
+            {
+              "name": "component/axis/axisSplitHelper.ts",
+              "size": 4375,
+              "value": 4375
+            },
+            {
+              "name": "component/axis/parallelAxisAction.ts",
+              "size": 2279,
+              "value": 2279
+            }
+          ],
+          "value": 80026
+        },
+        {
+          "name": "component/axisPointer",
+          "size": 99148,
+          "children": [
+            {
+              "name": "component/axisPointer/AxisPointer.ts",
+              "size": 1491,
+              "value": 1491
+            },
+            {
+              "name": "component/axisPointer/AxisPointerModel.ts",
+              "size": 4442,
+              "value": 4442
+            },
+            {
+              "name": "component/axisPointer/AxisPointerView.ts",
+              "size": 2598,
+              "value": 2598
+            },
+            {
+              "name": "component/axisPointer/BaseAxisPointer.ts",
+              "size": 17229,
+              "value": 17229
+            },
+            {
+              "name": "component/axisPointer/CartesianAxisPointer.ts",
+              "size": 6283,
+              "value": 6283
+            },
+            {
+              "name": "component/axisPointer/PolarAxisPointer.ts",
+              "size": 6579,
+              "value": 6579
+            },
+            {
+              "name": "component/axisPointer/SingleAxisPointer.ts",
+              "size": 5990,
+              "value": 5990
+            },
+            {
+              "name": "component/axisPointer/axisTrigger.ts",
+              "size": 18648,
+              "value": 18648
+            },
+            {
+              "name": "component/axisPointer/findPointFromSeries.ts",
+              "size": 3490,
+              "value": 3490
+            },
+            {
+              "name": "component/axisPointer/globalListener.ts",
+              "size": 5144,
+              "value": 5144
+            },
+            {
+              "name": "component/axisPointer/install.ts",
+              "size": 3050,
+              "value": 3050
+            },
+            {
+              "name": "component/axisPointer/modelHelper.ts",
+              "size": 15289,
+              "value": 15289
+            },
+            {
+              "name": "component/axisPointer/viewHelper.ts",
+              "size": 8915,
+              "value": 8915
+            }
+          ],
+          "value": 99148
+        },
+        {
+          "name": "component/axisPointer.ts",
+          "size": 891,
+          "value": 891
+        },
+        {
+          "name": "component/brush",
+          "size": 37924,
+          "children": [
+            {
+              "name": "component/brush/BrushModel.ts",
+              "size": 8228,
+              "value": 8228
+            },
+            {
+              "name": "component/brush/BrushView.ts",
+              "size": 4239,
+              "value": 4239
+            },
+            {
+              "name": "component/brush/install.ts",
+              "size": 2960,
+              "value": 2960
+            },
+            {
+              "name": "component/brush/preprocessor.ts",
+              "size": 2767,
+              "value": 2767
+            },
+            {
+              "name": "component/brush/selector.ts",
+              "size": 6254,
+              "value": 6254
+            },
+            {
+              "name": "component/brush/visualEncoding.ts",
+              "size": 13476,
+              "value": 13476
+            }
+          ],
+          "value": 37924
+        },
+        {
+          "name": "component/brush.ts",
+          "size": 885,
+          "value": 885
+        },
+        {
+          "name": "component/calendar",
+          "size": 17456,
+          "children": [
+            {
+              "name": "component/calendar/CalendarView.ts",
+              "size": 16196,
+              "value": 16196
+            },
+            {
+              "name": "component/calendar/install.ts",
+              "size": 1260,
+              "value": 1260
+            }
+          ],
+          "value": 17456
+        },
+        {
+          "name": "component/calendar.ts",
+          "size": 888,
+          "value": 888
+        },
+        {
+          "name": "component/dataZoom",
+          "size": 133546,
+          "children": [
+            {
+              "name": "component/dataZoom/AxisProxy.ts",
+              "size": 17411,
+              "value": 17411
+            },
+            {
+              "name": "component/dataZoom/DataZoomModel.ts",
+              "size": 21669,
+              "value": 21669
+            },
+            {
+              "name": "component/dataZoom/DataZoomView.ts",
+              "size": 1411,
+              "value": 1411
+            },
+            {
+              "name": "component/dataZoom/InsideZoomModel.ts",
+              "size": 1923,
+              "value": 1923
+            },
+            {
+              "name": "component/dataZoom/InsideZoomView.ts",
+              "size": 10023,
+              "value": 10023
+            },
+            {
+              "name": "component/dataZoom/SelectZoomModel.ts",
+              "size": 1000,
+              "value": 1000
+            },
+            {
+              "name": "component/dataZoom/SelectZoomView.ts",
+              "size": 994,
+              "value": 994
+            },
+            {
+              "name": "component/dataZoom/SliderZoomModel.ts",
+              "size": 6001,
+              "value": 6001
+            },
+            {
+              "name": "component/dataZoom/SliderZoomView.ts",
+              "size": 36931,
+              "value": 36931
+            },
+            {
+              "name": "component/dataZoom/dataZoomAction.ts",
+              "size": 1553,
+              "value": 1553
+            },
+            {
+              "name": "component/dataZoom/dataZoomProcessor.ts",
+              "size": 5800,
+              "value": 5800
+            },
+            {
+              "name": "component/dataZoom/helper.ts",
+              "size": 7323,
+              "value": 7323
+            },
+            {
+              "name": "component/dataZoom/history.ts",
+              "size": 3585,
+              "value": 3585
+            },
+            {
+              "name": "component/dataZoom/install.ts",
+              "size": 1242,
+              "value": 1242
+            },
+            {
+              "name": "component/dataZoom/installCommon.ts",
+              "size": 1422,
+              "value": 1422
+            },
+            {
+              "name": "component/dataZoom/installDataZoomInside.ts",
+              "size": 1314,
+              "value": 1314
+            },
+            {
+              "name": "component/dataZoom/installDataZoomSelect.ts",
+              "size": 1214,
+              "value": 1214
+            },
+            {
+              "name": "component/dataZoom/installDataZoomSlider.ts",
+              "size": 1214,
+              "value": 1214
+            },
+            {
+              "name": "component/dataZoom/roams.ts",
+              "size": 11516,
+              "value": 11516
+            }
+          ],
+          "value": 133546
+        },
+        {
+          "name": "component/dataZoom.ts",
+          "size": 889,
+          "value": 889
+        },
+        {
+          "name": "component/dataZoomInside.ts",
+          "size": 902,
+          "value": 902
+        },
+        {
+          "name": "component/dataZoomSelect.ts",
+          "size": 992,
+          "value": 992
+        },
+        {
+          "name": "component/dataZoomSlider.ts",
+          "size": 903,
+          "value": 903
+        },
+        {
+          "name": "component/dataset",
+          "size": 3390,
+          "children": [
+            {
+              "name": "component/dataset/install.ts",
+              "size": 3390,
+              "value": 3390
+            }
+          ],
+          "value": 3390
+        },
+        {
+          "name": "component/dataset.ts",
+          "size": 887,
+          "value": 887
+        },
+        {
+          "name": "component/geo",
+          "size": 8403,
+          "children": [
+            {
+              "name": "component/geo/GeoView.ts",
+              "size": 3395,
+              "value": 3395
+            },
+            {
+              "name": "component/geo/install.ts",
+              "size": 5008,
+              "value": 5008
+            }
+          ],
+          "value": 8403
+        },
+        {
+          "name": "component/geo.ts",
+          "size": 885,
+          "value": 885
+        },
+        {
+          "name": "component/graphic",
+          "size": 27689,
+          "children": [
+            {
+              "name": "component/graphic/install.ts",
+              "size": 27689,
+              "value": 27689
+            }
+          ],
+          "value": 27689
+        },
+        {
+          "name": "component/graphic.ts",
+          "size": 887,
+          "value": 887
+        },
+        {
+          "name": "component/grid",
+          "size": 3988,
+          "children": [
+            {
+              "name": "component/grid/install.ts",
+              "size": 1119,
+              "value": 1119
+            },
+            {
+              "name": "component/grid/installSimple.ts",
+              "size": 2869,
+              "value": 2869
+            }
+          ],
+          "value": 3988
+        },
+        {
+          "name": "component/grid.ts",
+          "size": 885,
+          "value": 885
+        },
+        {
+          "name": "component/gridSimple.ts",
+          "size": 890,
+          "value": 890
+        },
+        {
+          "name": "component/helper",
+          "size": 113305,
+          "children": [
+            {
+              "name": "component/helper/BrushController.ts",
+              "size": 35862,
+              "value": 35862
+            },
+            {
+              "name": "component/helper/BrushTargetManager.ts",
+              "size": 19989,
+              "value": 19989
+            },
+            {
+              "name": "component/helper/MapDraw.ts",
+              "size": 31814,
+              "value": 31814
+            },
+            {
+              "name": "component/helper/RoamController.ts",
+              "size": 10950,
+              "value": 10950
+            },
+            {
+              "name": "component/helper/brushHelper.ts",
+              "size": 2232,
+              "value": 2232
+            },
+            {
+              "name": "component/helper/cursorHelper.ts",
+              "size": 1725,
+              "value": 1725
+            },
+            {
+              "name": "component/helper/interactionMutex.ts",
+              "size": 1670,
+              "value": 1670
+            },
+            {
+              "name": "component/helper/listComponent.ts",
+              "size": 2756,
+              "value": 2756
+            },
+            {
+              "name": "component/helper/roamHelper.ts",
+              "size": 2050,
+              "value": 2050
+            },
+            {
+              "name": "component/helper/sliderMove.ts",
+              "size": 4257,
+              "value": 4257
+            }
+          ],
+          "value": 113305
+        },
+        {
+          "name": "component/legend",
+          "size": 75921,
+          "children": [
+            {
+              "name": "component/legend/LegendModel.ts",
+              "size": 14508,
+              "value": 14508
+            },
+            {
+              "name": "component/legend/LegendView.ts",
+              "size": 26173,
+              "value": 26173
+            },
+            {
+              "name": "component/legend/ScrollableLegendModel.ts",
+              "size": 3847,
+              "value": 3847
+            },
+            {
+              "name": "component/legend/ScrollableLegendView.ts",
+              "size": 20132,
+              "value": 20132
+            },
+            {
+              "name": "component/legend/install.ts",
+              "size": 1135,
+              "value": 1135
+            },
+            {
+              "name": "component/legend/installLegendPlain.ts",
+              "size": 1434,
+              "value": 1434
+            },
+            {
+              "name": "component/legend/installLegendScroll.ts",
+              "size": 1393,
+              "value": 1393
+            },
+            {
+              "name": "component/legend/legendAction.ts",
+              "size": 4035,
+              "value": 4035
+            },
+            {
+              "name": "component/legend/legendFilter.ts",
+              "size": 1599,
+              "value": 1599
+            },
+            {
+              "name": "component/legend/scrollableLegendAction.ts",
+              "size": 1665,
+              "value": 1665
+            }
+          ],
+          "value": 75921
+        },
+        {
+          "name": "component/legend.ts",
+          "size": 947,
+          "value": 947
+        },
+        {
+          "name": "component/legendPlain.ts",
+          "size": 958,
+          "value": 958
+        },
+        {
+          "name": "component/legendScroll.ts",
+          "size": 939,
+          "value": 939
+        },
+        {
+          "name": "component/markArea.ts",
+          "size": 894,
+          "value": 894
+        },
+        {
+          "name": "component/markLine.ts",
+          "size": 894,
+          "value": 894
+        },
+        {
+          "name": "component/markPoint.ts",
+          "size": 937,
+          "value": 937
+        },
+        {
+          "name": "component/marker",
+          "size": 74821,
+          "children": [
+            {
+              "name": "component/marker/MarkAreaModel.ts",
+              "size": 3082,
+              "value": 3082
+            },
+            {
+              "name": "component/marker/MarkAreaView.ts",
+              "size": 15177,
+              "value": 15177
+            },
+            {
+              "name": "component/marker/MarkLineModel.ts",
+              "size": 3865,
+              "value": 3865
+            },
+            {
+              "name": "component/marker/MarkLineView.ts",
+              "size": 17059,
+              "value": 17059
+            },
+            {
+              "name": "component/marker/MarkPointModel.ts",
+              "size": 2690,
+              "value": 2690
+            },
+            {
+              "name": "component/marker/MarkPointView.ts",
+              "size": 7311,
+              "value": 7311
+            },
+            {
+              "name": "component/marker/MarkerModel.ts",
+              "size": 7620,
+              "value": 7620
+            },
+            {
+              "name": "component/marker/MarkerView.ts",
+              "size": 3120,
+              "value": 3120
+            },
+            {
+              "name": "component/marker/checkMarkerInSeries.ts",
+              "size": 1501,
+              "value": 1501
+            },
+            {
+              "name": "component/marker/installMarkArea.ts",
+              "size": 1414,
+              "value": 1414
+            },
+            {
+              "name": "component/marker/installMarkLine.ts",
+              "size": 1413,
+              "value": 1413
+            },
+            {
+              "name": "component/marker/installMarkPoint.ts",
+              "size": 1423,
+              "value": 1423
+            },
+            {
+              "name": "component/marker/markerHelper.ts",
+              "size": 9146,
+              "value": 9146
+            }
+          ],
+          "value": 74821
+        },
+        {
+          "name": "component/parallel",
+          "size": 7529,
+          "children": [
+            {
+              "name": "component/parallel/ParallelView.ts",
+              "size": 5251,
+              "value": 5251
+            },
+            {
+              "name": "component/parallel/install.ts",
+              "size": 2278,
+              "value": 2278
+            }
+          ],
+          "value": 7529
+        },
+        {
+          "name": "component/parallel.ts",
+          "size": 889,
+          "value": 889
+        },
+        {
+          "name": "component/polar",
+          "size": 2653,
+          "children": [
+            {
+              "name": "component/polar/install.ts",
+              "size": 2653,
+              "value": 2653
+            }
+          ],
+          "value": 2653
+        },
+        {
+          "name": "component/polar.ts",
+          "size": 885,
+          "value": 885
+        },
+        {
+          "name": "component/radar",
+          "size": 9763,
+          "children": [
+            {
+              "name": "component/radar/RadarView.ts",
+              "size": 8014,
+              "value": 8014
+            },
+            {
+              "name": "component/radar/install.ts",
+              "size": 1749,
+              "value": 1749
+            }
+          ],
+          "value": 9763
+        },
+        {
+          "name": "component/radar.ts",
+          "size": 886,
+          "value": 886
+        },
+        {
+          "name": "component/singleAxis",
+          "size": 1939,
+          "children": [
+            {
+              "name": "component/singleAxis/install.ts",
+              "size": 1939,
+              "value": 1939
+            }
+          ],
+          "value": 1939
+        },
+        {
+          "name": "component/singleAxis.ts",
+          "size": 890,
+          "value": 890
+        },
+        {
+          "name": "component/timeline",
+          "size": 54918,
+          "children": [
+            {
+              "name": "component/timeline/SliderTimelineModel.ts",
+              "size": 5956,
+              "value": 5956
+            },
+            {
+              "name": "component/timeline/SliderTimelineView.ts",
+              "size": 30481,
+              "value": 30481
+            },
+            {
+              "name": "component/timeline/TimelineAxis.ts",
+              "size": 1696,
+              "value": 1696
+            },
+            {
+              "name": "component/timeline/TimelineModel.ts",
+              "size": 8618,
+              "value": 8618
+            },
+            {
+              "name": "component/timeline/TimelineView.ts",
+              "size": 978,
+              "value": 978
+            },
+            {
+              "name": "component/timeline/install.ts",
+              "size": 1478,
+              "value": 1478
+            },
+            {
+              "name": "component/timeline/preprocessor.ts",
+              "size": 3026,
+              "value": 3026
+            },
+            {
+              "name": "component/timeline/timelineAction.ts",
+              "size": 2685,
+              "value": 2685
+            }
+          ],
+          "value": 54918
+        },
+        {
+          "name": "component/timeline.ts",
+          "size": 925,
+          "value": 925
+        },
+        {
+          "name": "component/title",
+          "size": 8511,
+          "children": [
+            {
+              "name": "component/title/install.ts",
+              "size": 8511,
+              "value": 8511
+            }
+          ],
+          "value": 8511
+        },
+        {
+          "name": "component/title.ts",
+          "size": 885,
+          "value": 885
+        },
+        {
+          "name": "component/toolbox",
+          "size": 77259,
+          "children": [
+            {
+              "name": "component/toolbox/ToolboxModel.ts",
+              "size": 3544,
+              "value": 3544
+            },
+            {
+              "name": "component/toolbox/ToolboxView.ts",
+              "size": 14463,
+              "value": 14463
+            },
+            {
+              "name": "component/toolbox/feature",
+              "size": 53725,
+              "children": [
+                {
+                  "name": "component/toolbox/feature/Brush.ts",
+                  "size": 6558,
+                  "value": 6558
+                },
+                {
+                  "name": "component/toolbox/feature/DataView.ts",
+                  "size": 17627,
+                  "value": 17627
+                },
+                {
+                  "name": "component/toolbox/feature/DataZoom.ts",
+                  "size": 12177,
+                  "value": 12177
+                },
+                {
+                  "name": "component/toolbox/feature/MagicType.ts",
+                  "size": 9202,
+                  "value": 9202
+                },
+                {
+                  "name": "component/toolbox/feature/Restore.ts",
+                  "size": 2184,
+                  "value": 2184
+                },
+                {
+                  "name": "component/toolbox/feature/SaveAsImage.ts",
+                  "size": 5977,
+                  "value": 5977
+                }
+              ],
+              "value": 53725
+            },
+            {
+              "name": "component/toolbox/featureManager.ts",
+              "size": 3745,
+              "value": 3745
+            },
+            {
+              "name": "component/toolbox/install.ts",
+              "size": 1782,
+              "value": 1782
+            }
+          ],
+          "value": 77259
+        },
+        {
+          "name": "component/toolbox.ts",
+          "size": 887,
+          "value": 887
+        },
+        {
+          "name": "component/tooltip",
+          "size": 103659,
+          "children": [
+            {
+              "name": "component/tooltip/TooltipHTMLContent.ts",
+              "size": 17954,
+              "value": 17954
+            },
+            {
+              "name": "component/tooltip/TooltipModel.ts",
+              "size": 5171,
+              "value": 5171
+            },
+            {
+              "name": "component/tooltip/TooltipRichContent.ts",
+              "size": 7836,
+              "value": 7836
+            },
+            {
+              "name": "component/tooltip/TooltipView.ts",
+              "size": 41776,
+              "value": 41776
+            },
+            {
+              "name": "component/tooltip/helper.ts",
+              "size": 2525,
+              "value": 2525
+            },
+            {
+              "name": "component/tooltip/install.ts",
+              "size": 1825,
+              "value": 1825
+            },
+            {
+              "name": "component/tooltip/seriesFormatTooltip.ts",
+              "size": 6035,
+              "value": 6035
+            },
+            {
+              "name": "component/tooltip/tooltipMarkup.ts",
+              "size": 20537,
+              "value": 20537
+            }
+          ],
+          "value": 103659
+        },
+        {
+          "name": "component/tooltip.ts",
+          "size": 887,
+          "value": 887
+        },
+        {
+          "name": "component/transform",
+          "size": 11994,
+          "children": [
+            {
+              "name": "component/transform/filterTransform.ts",
+              "size": 3787,
+              "value": 3787
+            },
+            {
+              "name": "component/transform/install.ts",
+              "size": 1129,
+              "value": 1129
+            },
+            {
+              "name": "component/transform/sortTransform.ts",
+              "size": 7078,
+              "value": 7078
+            }
+          ],
+          "value": 11994
+        },
+        {
+          "name": "component/transform.ts",
+          "size": 889,
+          "value": 889
+        },
+        {
+          "name": "component/visualMap",
+          "size": 115902,
+          "children": [
+            {
+              "name": "component/visualMap/ContinuousModel.ts",
+              "size": 10417,
+              "value": 10417
+            },
+            {
+              "name": "component/visualMap/ContinuousView.ts",
+              "size": 33304,
+              "value": 33304
+            },
+            {
+              "name": "component/visualMap/PiecewiseModel.ts",
+              "size": 20174,
+              "value": 20174
+            },
+            {
+              "name": "component/visualMap/PiecewiseView.ts",
+              "size": 8244,
+              "value": 8244
+            },
+            {
+              "name": "component/visualMap/VisualMapModel.ts",
+              "size": 19339,
+              "value": 19339
+            },
+            {
+              "name": "component/visualMap/VisualMapView.ts",
+              "size": 5532,
+              "value": 5532
+            },
+            {
+              "name": "component/visualMap/helper.ts",
+              "size": 3204,
+              "value": 3204
+            },
+            {
+              "name": "component/visualMap/install.ts",
+              "size": 1268,
+              "value": 1268
+            },
+            {
+              "name": "component/visualMap/installCommon.ts",
+              "size": 2407,
+              "value": 2407
+            },
+            {
+              "name": "component/visualMap/installVisualMapContinuous.ts",
+              "size": 1213,
+              "value": 1213
+            },
+            {
+              "name": "component/visualMap/installVisualMapPiecewise.ts",
+              "size": 1207,
+              "value": 1207
+            },
+            {
+              "name": "component/visualMap/preprocessor.ts",
+              "size": 1969,
+              "value": 1969
+            },
+            {
+              "name": "component/visualMap/typeDefaulter.ts",
+              "size": 1645,
+              "value": 1645
+            },
+            {
+              "name": "component/visualMap/visualEncoding.ts",
+              "size": 4633,
+              "value": 4633
+            },
+            {
+              "name": "component/visualMap/visualMapAction.ts",
+              "size": 1346,
+              "value": 1346
+            }
+          ],
+          "value": 115902
+        },
+        {
+          "name": "component/visualMap.ts",
+          "size": 889,
+          "value": 889
+        },
+        {
+          "name": "component/visualMapContinuous.ts",
+          "size": 908,
+          "value": 908
+        },
+        {
+          "name": "component/visualMapPiecewise.ts",
+          "size": 907,
+          "value": 907
+        }
+      ],
+      "value": 1100395
+    },
+    {
+      "name": "coord",
+      "size": 347267,
+      "children": [
+        {
+          "name": "coord/Axis.ts",
+          "size": 10739,
+          "value": 10739
+        },
+        {
+          "name": "coord/AxisBaseModel.ts",
+          "size": 1315,
+          "value": 1315
+        },
+        {
+          "name": "coord/CoordinateSystem.ts",
+          "size": 5980,
+          "value": 5980
+        },
+        {
+          "name": "coord/View.ts",
+          "size": 10106,
+          "value": 10106
+        },
+        {
+          "name": "coord/axisCommonTypes.ts",
+          "size": 7385,
+          "value": 7385
+        },
+        {
+          "name": "coord/axisDefault.ts",
+          "size": 4901,
+          "value": 4901
+        },
+        {
+          "name": "coord/axisHelper.ts",
+          "size": 15047,
+          "value": 15047
+        },
+        {
+          "name": "coord/axisModelCommonMixin.ts",
+          "size": 1479,
+          "value": 1479
+        },
+        {
+          "name": "coord/axisModelCreator.ts",
+          "size": 4611,
+          "value": 4611
+        },
+        {
+          "name": "coord/axisTickLabelBuilder.ts",
+          "size": 15664,
+          "value": 15664
+        },
+        {
+          "name": "coord/calendar",
+          "size": 25306,
+          "children": [
+            {
+              "name": "coord/calendar/Calendar.ts",
+              "size": 16219,
+              "value": 16219
+            },
+            {
+              "name": "coord/calendar/CalendarModel.ts",
+              "size": 7389,
+              "value": 7389
+            },
+            {
+              "name": "coord/calendar/prepareCustom.ts",
+              "size": 1698,
+              "value": 1698
+            }
+          ],
+          "value": 25306
+        },
+        {
+          "name": "coord/cartesian",
+          "size": 55677,
+          "children": [
+            {
+              "name": "coord/cartesian/Axis2D.ts",
+              "size": 3598,
+              "value": 3598
+            },
+            {
+              "name": "coord/cartesian/AxisModel.ts",
+              "size": 2365,
+              "value": 2365
+            },
+            {
+              "name": "coord/cartesian/Cartesian.ts",
+              "size": 2900,
+              "value": 2900
+            },
+            {
+              "name": "coord/cartesian/Cartesian2D.ts",
+              "size": 6469,
+              "value": 6469
+            },
+            {
+              "name": "coord/cartesian/Grid.ts",
+              "size": 20952,
+              "value": 20952
+            },
+            {
+              "name": "coord/cartesian/GridModel.ts",
+              "size": 2093,
+              "value": 2093
+            },
+            {
+              "name": "coord/cartesian/cartesianAxisHelper.ts",
+              "size": 4715,
+              "value": 4715
+            },
+            {
+              "name": "coord/cartesian/defaultAxisExtentFromData.ts",
+              "size": 10529,
+              "value": 10529
+            },
+            {
+              "name": "coord/cartesian/prepareCustom.ts",
+              "size": 2056,
+              "value": 2056
+            }
+          ],
+          "value": 55677
+        },
+        {
+          "name": "coord/geo",
+          "size": 74301,
+          "children": [
+            {
+              "name": "coord/geo/Geo.ts",
+              "size": 6598,
+              "value": 6598
+            },
+            {
+              "name": "coord/geo/GeoJSONResource.ts",
+              "size": 5590,
+              "value": 5590
+            },
+            {
+              "name": "coord/geo/GeoModel.ts",
+              "size": 8762,
+              "value": 8762
+            },
+            {
+              "name": "coord/geo/GeoSVGResource.ts",
+              "size": 14611,
+              "value": 14611
+            },
+            {
+              "name": "coord/geo/Region.ts",
+              "size": 7708,
+              "value": 7708
+            },
+            {
+              "name": "coord/geo/fix",
+              "size": 7069,
+              "children": [
+                {
+                  "name": "coord/geo/fix/diaoyuIsland.ts",
+                  "size": 1510,
+                  "value": 1510
+                },
+                {
+                  "name": "coord/geo/fix/geoCoord.ts",
+                  "size": 1371,
+                  "value": 1371
+                },
+                {
+                  "name": "coord/geo/fix/nanhai.ts",
+                  "size": 2706,
+                  "value": 2706
+                },
+                {
+                  "name": "coord/geo/fix/textCoord.ts",
+                  "size": 1482,
+                  "value": 1482
+                }
+              ],
+              "value": 7069
+            },
+            {
+              "name": "coord/geo/geoCreator.ts",
+              "size": 8364,
+              "value": 8364
+            },
+            {
+              "name": "coord/geo/geoSourceManager.ts",
+              "size": 4532,
+              "value": 4532
+            },
+            {
+              "name": "coord/geo/geoTypes.ts",
+              "size": 4145,
+              "value": 4145
+            },
+            {
+              "name": "coord/geo/parseGeoJson.ts",
+              "size": 4812,
+              "value": 4812
+            },
+            {
+              "name": "coord/geo/prepareCustom.ts",
+              "size": 2110,
+              "value": 2110
+            }
+          ],
+          "value": 74301
+        },
+        {
+          "name": "coord/parallel",
+          "size": 36731,
+          "children": [
+            {
+              "name": "coord/parallel/AxisModel.ts",
+              "size": 4949,
+              "value": 4949
+            },
+            {
+              "name": "coord/parallel/Parallel.ts",
+              "size": 19683,
+              "value": 19683
+            },
+            {
+              "name": "coord/parallel/ParallelAxis.ts",
+              "size": 1622,
+              "value": 1622
+            },
+            {
+              "name": "coord/parallel/ParallelModel.ts",
+              "size": 5725,
+              "value": 5725
+            },
+            {
+              "name": "coord/parallel/parallelCreator.ts",
+              "size": 2335,
+              "value": 2335
+            },
+            {
+              "name": "coord/parallel/parallelPreprocessor.ts",
+              "size": 2417,
+              "value": 2417
+            }
+          ],
+          "value": 36731
+        },
+        {
+          "name": "coord/polar",
+          "size": 27609,
+          "children": [
+            {
+              "name": "coord/polar/AngleAxis.ts",
+              "size": 4232,
+              "value": 4232
+            },
+            {
+              "name": "coord/polar/AxisModel.ts",
+              "size": 2777,
+              "value": 2777
+            },
+            {
+              "name": "coord/polar/Polar.ts",
+              "size": 7817,
+              "value": 7817
+            },
+            {
+              "name": "coord/polar/PolarModel.ts",
+              "size": 2057,
+              "value": 2057
+            },
+            {
+              "name": "coord/polar/RadiusAxis.ts",
+              "size": 1539,
+              "value": 1539
+            },
+            {
+              "name": "coord/polar/polarCreator.ts",
+              "size": 6577,
+              "value": 6577
+            },
+            {
+              "name": "coord/polar/prepareCustom.ts",
+              "size": 2610,
+              "value": 2610
+            }
+          ],
+          "value": 27609
+        },
+        {
+          "name": "coord/radar",
+          "size": 18756,
+          "children": [
+            {
+              "name": "coord/radar/IndicatorAxis.ts",
+              "size": 1335,
+              "value": 1335
+            },
+            {
+              "name": "coord/radar/Radar.ts",
+              "size": 10466,
+              "value": 10466
+            },
+            {
+              "name": "coord/radar/RadarModel.ts",
+              "size": 6955,
+              "value": 6955
+            }
+          ],
+          "value": 18756
+        },
+        {
+          "name": "coord/scaleRawExtentInfo.ts",
+          "size": 11853,
+          "value": 11853
+        },
+        {
+          "name": "coord/single",
+          "size": 19807,
+          "children": [
+            {
+              "name": "coord/single/AxisModel.ts",
+              "size": 3039,
+              "value": 3039
+            },
+            {
+              "name": "coord/single/Single.ts",
+              "size": 7563,
+              "value": 7563
+            },
+            {
+              "name": "coord/single/SingleAxis.ts",
+              "size": 2246,
+              "value": 2246
+            },
+            {
+              "name": "coord/single/prepareCustom.ts",
+              "size": 1875,
+              "value": 1875
+            },
+            {
+              "name": "coord/single/singleAxisHelper.ts",
+              "size": 2801,
+              "value": 2801
+            },
+            {
+              "name": "coord/single/singleCreator.ts",
+              "size": 2283,
+              "value": 2283
+            }
+          ],
+          "value": 19807
+        }
+      ],
+      "value": 347267
+    },
+    {
+      "name": "core",
+      "size": 158407,
+      "children": [
+        {
+          "name": "core/CoordinateSystem.ts",
+          "size": 2238,
+          "value": 2238
+        },
+        {
+          "name": "core/ExtensionAPI.ts",
+          "size": 2758,
+          "value": 2758
+        },
+        {
+          "name": "core/Scheduler.ts",
+          "size": 26263,
+          "value": 26263
+        },
+        {
+          "name": "core/echarts.ts",
+          "size": 105836,
+          "value": 105836
+        },
+        {
+          "name": "core/lifecycle.ts",
+          "size": 2905,
+          "value": 2905
+        },
+        {
+          "name": "core/locale.ts",
+          "size": 2757,
+          "value": 2757
+        },
+        {
+          "name": "core/task.ts",
+          "size": 15650,
+          "value": 15650
+        }
+      ],
+      "value": 158407
+    },
+    {
+      "name": "data",
+      "size": 257880,
+      "children": [
+        {
+          "name": "data/DataDiffer.ts",
+          "size": 11383,
+          "value": 11383
+        },
+        {
+          "name": "data/DataDimensionInfo.ts",
+          "size": 3819,
+          "value": 3819
+        },
+        {
+          "name": "data/Graph.ts",
+          "size": 13419,
+          "value": 13419
+        },
+        {
+          "name": "data/List.ts",
+          "size": 80255,
+          "value": 80255
+        },
+        {
+          "name": "data/OrdinalMeta.ts",
+          "size": 4280,
+          "value": 4280
+        },
+        {
+          "name": "data/Source.ts",
+          "size": 17104,
+          "value": 17104
+        },
+        {
+          "name": "data/Tree.ts",
+          "size": 13459,
+          "value": 13459
+        },
+        {
+          "name": "data/helper",
+          "size": 114161,
+          "children": [
+            {
+              "name": "data/helper/completeDimensions.ts",
+              "size": 13826,
+              "value": 13826
+            },
+            {
+              "name": "data/helper/createDimensions.ts",
+              "size": 3109,
+              "value": 3109
+            },
+            {
+              "name": "data/helper/dataProvider.ts",
+              "size": 17686,
+              "value": 17686
+            },
+            {
+              "name": "data/helper/dataStackHelper.ts",
+              "size": 6541,
+              "value": 6541
+            },
+            {
+              "name": "data/helper/dataValueHelper.ts",
+              "size": 9894,
+              "value": 9894
+            },
+            {
+              "name": "data/helper/dimensionHelper.ts",
+              "size": 6249,
+              "value": 6249
+            },
+            {
+              "name": "data/helper/linkList.ts",
+              "size": 5908,
+              "value": 5908
+            },
+            {
+              "name": "data/helper/sourceHelper.ts",
+              "size": 16203,
+              "value": 16203
+            },
+            {
+              "name": "data/helper/sourceManager.ts",
+              "size": 14546,
+              "value": 14546
+            },
+            {
+              "name": "data/helper/transform.ts",
+              "size": 20199,
+              "value": 20199
+            }
+          ],
+          "value": 114161
+        }
+      ],
+      "value": 257880
+    },
+    {
+      "name": "echarts.all.ts",
+      "size": 7676,
+      "value": 7676
+    },
+    {
+      "name": "echarts.blank.ts",
+      "size": 818,
+      "value": 818
+    },
+    {
+      "name": "echarts.common.ts",
+      "size": 2624,
+      "value": 2624
+    },
+    {
+      "name": "echarts.simple.ts",
+      "size": 1481,
+      "value": 1481
+    },
+    {
+      "name": "echarts.ts",
+      "size": 1727,
+      "value": 1727
+    },
+    {
+      "name": "export",
+      "size": 43462,
+      "children": [
+        {
+          "name": "export/all.ts",
+          "size": 905,
+          "value": 905
+        },
+        {
+          "name": "export/api",
+          "size": 9766,
+          "children": [
+            {
+              "name": "export/api/format.ts",
+              "size": 1004,
+              "value": 1004
+            },
+            {
+              "name": "export/api/graphic.ts",
+              "size": 1287,
+              "value": 1287
+            },
+            {
+              "name": "export/api/helper.ts",
+              "size": 4467,
+              "value": 4467
+            },
+            {
+              "name": "export/api/number.ts",
+              "size": 1147,
+              "value": 1147
+            },
+            {
+              "name": "export/api/time.ts",
+              "size": 886,
+              "value": 886
+            },
+            {
+              "name": "export/api/util.ts",
+              "size": 975,
+              "value": 975
+            }
+          ],
+          "value": 9766
+        },
+        {
+          "name": "export/api.ts",
+          "size": 3749,
+          "value": 3749
+        },
+        {
+          "name": "export/charts.ts",
+          "size": 4745,
+          "value": 4745
+        },
+        {
+          "name": "export/components.ts",
+          "size": 3847,
+          "value": 3847
+        },
+        {
+          "name": "export/core.ts",
+          "size": 4759,
+          "value": 4759
+        },
+        {
+          "name": "export/features.ts",
+          "size": 1022,
+          "value": 1022
+        },
+        {
+          "name": "export/option.ts",
+          "size": 13730,
+          "value": 13730
+        },
+        {
+          "name": "export/renderers.ts",
+          "size": 939,
+          "value": 939
+        }
+      ],
+      "value": 43462
+    },
+    {
+      "name": "extension.ts",
+      "size": 3976,
+      "value": 3976
+    },
+    {
+      "name": "global.d.ts",
+      "size": 824,
+      "value": 824
+    },
+    {
+      "name": "i18n",
+      "size": 40367,
+      "children": [
+        {
+          "name": "i18n/langCS.ts",
+          "size": 4517,
+          "value": 4517
+        },
+        {
+          "name": "i18n/langDE.ts",
+          "size": 4549,
+          "value": 4549
+        },
+        {
+          "name": "i18n/langEN.ts",
+          "size": 4381,
+          "value": 4381
+        },
+        {
+          "name": "i18n/langES.ts",
+          "size": 2543,
+          "value": 2543
+        },
+        {
+          "name": "i18n/langFI.ts",
+          "size": 2603,
+          "value": 2603
+        },
+        {
+          "name": "i18n/langFR.ts",
+          "size": 4556,
+          "value": 4556
+        },
+        {
+          "name": "i18n/langJA.ts",
+          "size": 4846,
+          "value": 4846
+        },
+        {
+          "name": "i18n/langSI.ts",
+          "size": 4565,
+          "value": 4565
+        },
+        {
+          "name": "i18n/langTH.ts",
+          "size": 3388,
+          "value": 3388
+        },
+        {
+          "name": "i18n/langZH.ts",
+          "size": 4419,
+          "value": 4419
+        }
+      ],
+      "value": 40367
+    },
+    {
+      "name": "label",
+      "size": 80551,
+      "children": [
+        {
+          "name": "label/LabelManager.ts",
+          "size": 20409,
+          "value": 20409
+        },
+        {
+          "name": "label/installLabelLayout.ts",
+          "size": 1185,
+          "value": 1185
+        },
+        {
+          "name": "label/labelGuideHelper.ts",
+          "size": 21067,
+          "value": 21067
+        },
+        {
+          "name": "label/labelLayoutHelper.ts",
+          "size": 11492,
+          "value": 11492
+        },
+        {
+          "name": "label/labelStyle.ts",
+          "size": 26398,
+          "value": 26398
+        }
+      ],
+      "value": 80551
+    },
+    {
+      "name": "layout",
+      "size": 38780,
+      "children": [
+        {
+          "name": "layout/barGrid.ts",
+          "size": 23261,
+          "value": 23261
+        },
+        {
+          "name": "layout/barPolar.ts",
+          "size": 11394,
+          "value": 11394
+        },
+        {
+          "name": "layout/points.ts",
+          "size": 4125,
+          "value": 4125
+        }
+      ],
+      "value": 38780
+    },
+    {
+      "name": "legacy",
+      "size": 6326,
+      "children": [
+        {
+          "name": "legacy/dataSelectAction.ts",
+          "size": 4747,
+          "value": 4747
+        },
+        {
+          "name": "legacy/getTextRect.ts",
+          "size": 1579,
+          "value": 1579
+        }
+      ],
+      "value": 6326
+    },
+    {
+      "name": "loading",
+      "size": 4935,
+      "children": [
+        {
+          "name": "loading/default.ts",
+          "size": 4935,
+          "value": 4935
+        }
+      ],
+      "value": 4935
+    },
+    {
+      "name": "model",
+      "size": 140931,
+      "children": [
+        {
+          "name": "model/Component.ts",
+          "size": 11309,
+          "value": 11309
+        },
+        {
+          "name": "model/Global.ts",
+          "size": 38114,
+          "value": 38114
+        },
+        {
+          "name": "model/Model.ts",
+          "size": 9975,
+          "value": 9975
+        },
+        {
+          "name": "model/OptionManager.ts",
+          "size": 18599,
+          "value": 18599
+        },
+        {
+          "name": "model/Series.ts",
+          "size": 24069,
+          "value": 24069
+        },
+        {
+          "name": "model/globalDefault.ts",
+          "size": 4656,
+          "value": 4656
+        },
+        {
+          "name": "model/internalComponentCreator.ts",
+          "size": 3007,
+          "value": 3007
+        },
+        {
+          "name": "model/mixin",
+          "size": 23864,
+          "children": [
+            {
+              "name": "model/mixin/areaStyle.ts",
+              "size": 1770,
+              "value": 1770
+            },
+            {
+              "name": "model/mixin/dataFormat.ts",
+              "size": 8562,
+              "value": 8562
+            },
+            {
+              "name": "model/mixin/itemStyle.ts",
+              "size": 2193,
+              "value": 2193
+            },
+            {
+              "name": "model/mixin/lineStyle.ts",
+              "size": 2023,
+              "value": 2023
+            },
+            {
+              "name": "model/mixin/makeStyleMapper.ts",
+              "size": 2035,
+              "value": 2035
+            },
+            {
+              "name": "model/mixin/palette.ts",
+              "size": 4309,
+              "value": 4309
+            },
+            {
+              "name": "model/mixin/textStyle.ts",
+              "size": 2972,
+              "value": 2972
+            }
+          ],
+          "value": 23864
+        },
+        {
+          "name": "model/referHelper.ts",
+          "size": 7338,
+          "value": 7338
+        }
+      ],
+      "value": 140931
+    },
+    {
+      "name": "preprocessor",
+      "size": 21470,
+      "children": [
+        {
+          "name": "preprocessor/backwardCompat.ts",
+          "size": 9187,
+          "value": 9187
+        },
+        {
+          "name": "preprocessor/helper",
+          "size": 12283,
+          "children": [
+            {
+              "name": "preprocessor/helper/compatStyle.ts",
+              "size": 12283,
+              "value": 12283
+            }
+          ],
+          "value": 12283
+        }
+      ],
+      "value": 21470
+    },
+    {
+      "name": "processor",
+      "size": 13789,
+      "children": [
+        {
+          "name": "processor/dataFilter.ts",
+          "size": 1742,
+          "value": 1742
+        },
+        {
+          "name": "processor/dataSample.ts",
+          "size": 4292,
+          "value": 4292
+        },
+        {
+          "name": "processor/dataStack.ts",
+          "size": 6276,
+          "value": 6276
+        },
+        {
+          "name": "processor/negativeDataFilter.ts",
+          "size": 1479,
+          "value": 1479
+        }
+      ],
+      "value": 13789
+    },
+    {
+      "name": "renderer",
+      "size": 2072,
+      "children": [
+        {
+          "name": "renderer/installCanvasRenderer.ts",
+          "size": 1042,
+          "value": 1042
+        },
+        {
+          "name": "renderer/installSVGRenderer.ts",
+          "size": 1030,
+          "value": 1030
+        }
+      ],
+      "value": 2072
+    },
+    {
+      "name": "scale",
+      "size": 56173,
+      "children": [
+        {
+          "name": "scale/Interval.ts",
+          "size": 9480,
+          "value": 9480
+        },
+        {
+          "name": "scale/Log.ts",
+          "size": 6383,
+          "value": 6383
+        },
+        {
+          "name": "scale/Ordinal.ts",
+          "size": 9362,
+          "value": 9362
+        },
+        {
+          "name": "scale/Scale.ts",
+          "size": 5235,
+          "value": 5235
+        },
+        {
+          "name": "scale/Time.ts",
+          "size": 22179,
+          "value": 22179
+        },
+        {
+          "name": "scale/helper.ts",
+          "size": 3534,
+          "value": 3534
+        }
+      ],
+      "value": 56173
+    },
+    {
+      "name": "theme",
+      "size": 6143,
+      "children": [
+        {
+          "name": "theme/dark.ts",
+          "size": 4867,
+          "value": 4867
+        },
+        {
+          "name": "theme/light.ts",
+          "size": 1276,
+          "value": 1276
+        }
+      ],
+      "value": 6143
+    },
+    {
+      "name": "util",
+      "size": 306511,
+      "children": [
+        {
+          "name": "util/ECEventProcessor.ts",
+          "size": 5900,
+          "value": 5900
+        },
+        {
+          "name": "util/KDTree.ts",
+          "size": 8723,
+          "value": 8723
+        },
+        {
+          "name": "util/animation.ts",
+          "size": 3488,
+          "value": 3488
+        },
+        {
+          "name": "util/clazz.ts",
+          "size": 12608,
+          "value": 12608
+        },
+        {
+          "name": "util/component.ts",
+          "size": 8501,
+          "value": 8501
+        },
+        {
+          "name": "util/conditionalExpression.ts",
+          "size": 14702,
+          "value": 14702
+        },
+        {
+          "name": "util/decal.ts",
+          "size": 14753,
+          "value": 14753
+        },
+        {
+          "name": "util/event.ts",
+          "size": 1223,
+          "value": 1223
+        },
+        {
+          "name": "util/format.ts",
+          "size": 10989,
+          "value": 10989
+        },
+        {
+          "name": "util/graphic.ts",
+          "size": 19902,
+          "value": 19902
+        },
+        {
+          "name": "util/innerStore.ts",
+          "size": 1939,
+          "value": 1939
+        },
+        {
+          "name": "util/layout.ts",
+          "size": 17818,
+          "value": 17818
+        },
+        {
+          "name": "util/log.ts",
+          "size": 4417,
+          "value": 4417
+        },
+        {
+          "name": "util/model.ts",
+          "size": 37198,
+          "value": 37198
+        },
+        {
+          "name": "util/number.ts",
+          "size": 19583,
+          "value": 19583
+        },
+        {
+          "name": "util/quickSelect.ts",
+          "size": 2920,
+          "value": 2920
+        },
+        {
+          "name": "util/shape",
+          "size": 2905,
+          "children": [
+            {
+              "name": "util/shape/sausage.ts",
+              "size": 2905,
+              "value": 2905
+            }
+          ],
+          "value": 2905
+        },
+        {
+          "name": "util/states.ts",
+          "size": 29540,
+          "value": 29540
+        },
+        {
+          "name": "util/styleCompat.ts",
+          "size": 11390,
+          "value": 11390
+        },
+        {
+          "name": "util/symbol.ts",
+          "size": 10302,
+          "value": 10302
+        },
+        {
+          "name": "util/throttle.ts",
+          "size": 5384,
+          "value": 5384
+        },
+        {
+          "name": "util/time.ts",
+          "size": 11356,
+          "value": 11356
+        },
+        {
+          "name": "util/types.ts",
+          "size": 49661,
+          "value": 49661
+        },
+        {
+          "name": "util/vendor.ts",
+          "size": 1309,
+          "value": 1309
+        }
+      ],
+      "value": 306511
+    },
+    {
+      "name": "view",
+      "size": 13542,
+      "children": [
+        {
+          "name": "view/Chart.ts",
+          "size": 9239,
+          "value": 9239
+        },
+        {
+          "name": "view/Component.ts",
+          "size": 4303,
+          "value": 4303
+        }
+      ],
+      "value": 13542
+    },
+    {
+      "name": "visual",
+      "size": 70915,
+      "children": [
+        {
+          "name": "visual/LegendVisualProvider.ts",
+          "size": 2598,
+          "value": 2598
+        },
+        {
+          "name": "visual/VisualMapping.ts",
+          "size": 24898,
+          "value": 24898
+        },
+        {
+          "name": "visual/aria.ts",
+          "size": 10732,
+          "value": 10732
+        },
+        {
+          "name": "visual/commonVisualTypes.ts",
+          "size": 1264,
+          "value": 1264
+        },
+        {
+          "name": "visual/decal.ts",
+          "size": 1774,
+          "value": 1774
+        },
+        {
+          "name": "visual/helper.ts",
+          "size": 3039,
+          "value": 3039
+        },
+        {
+          "name": "visual/style.ts",
+          "size": 9355,
+          "value": 9355
+        },
+        {
+          "name": "visual/symbol.ts",
+          "size": 6643,
+          "value": 6643
+        },
+        {
+          "name": "visual/visualDefault.ts",
+          "size": 2061,
+          "value": 2061
+        },
+        {
+          "name": "visual/visualSolution.ts",
+          "size": 8551,
+          "value": 8551
+        }
+      ],
+      "value": 70915
+    },
+    {
+      "name": "zrender",
+      "children": [
+        {
+          "name": "Element.ts",
+          "size": 62570,
+          "value": 62570
+        },
+        {
+          "name": "Handler.ts",
+          "size": 16369,
+          "value": 16369
+        },
+        {
+          "name": "PainterBase.ts",
+          "size": 1043,
+          "value": 1043
+        },
+        {
+          "name": "Storage.ts",
+          "size": 7345,
+          "value": 7345
+        },
+        {
+          "name": "animation",
+          "size": 51765,
+          "children": [
+            {
+              "name": "animation/Animation.ts",
+              "size": 5960,
+              "value": 5960
+            },
+            {
+              "name": "animation/Animator.ts",
+              "size": 33681,
+              "value": 33681
+            },
+            {
+              "name": "animation/Clip.ts",
+              "size": 3788,
+              "value": 3788
+            },
+            {
+              "name": "animation/easing.ts",
+              "size": 7646,
+              "value": 7646
+            },
+            {
+              "name": "animation/requestAnimationFrame.ts",
+              "size": 690,
+              "value": 690
+            }
+          ],
+          "value": 51765
+        },
+        {
+          "name": "canvas",
+          "size": 79635,
+          "children": [
+            {
+              "name": "canvas/Layer.ts",
+              "size": 17024,
+              "value": 17024
+            },
+            {
+              "name": "canvas/Painter.ts",
+              "size": 32574,
+              "value": 32574
+            },
+            {
+              "name": "canvas/canvas.ts",
+              "size": 113,
+              "value": 113
+            },
+            {
+              "name": "canvas/graphic.ts",
+              "size": 27228,
+              "value": 27228
+            },
+            {
+              "name": "canvas/helper.ts",
+              "size": 2696,
+              "value": 2696
+            }
+          ],
+          "value": 79635
+        },
+        {
+          "name": "config.ts",
+          "size": 800,
+          "value": 800
+        },
+        {
+          "name": "contain",
+          "size": 25900,
+          "children": [
+            {
+              "name": "contain/arc.ts",
+              "size": 1168,
+              "value": 1168
+            },
+            {
+              "name": "contain/cubic.ts",
+              "size": 838,
+              "value": 838
+            },
+            {
+              "name": "contain/line.ts",
+              "size": 981,
+              "value": 981
+            },
+            {
+              "name": "contain/path.ts",
+              "size": 12770,
+              "value": 12770
+            },
+            {
+              "name": "contain/polygon.ts",
+              "size": 722,
+              "value": 722
+            },
+            {
+              "name": "contain/quadratic.ts",
+              "size": 753,
+              "value": 753
+            },
+            {
+              "name": "contain/text.ts",
+              "size": 7844,
+              "value": 7844
+            },
+            {
+              "name": "contain/util.ts",
+              "size": 170,
+              "value": 170
+            },
+            {
+              "name": "contain/windingLine.ts",
+              "size": 654,
+              "value": 654
+            }
+          ],
+          "value": 25900
+        },
+        {
+          "name": "core",
+          "size": 182134,
+          "children": [
+            {
+              "name": "core/BoundingRect.ts",
+              "size": 7805,
+              "value": 7805
+            },
+            {
+              "name": "core/Eventful.ts",
+              "size": 9493,
+              "value": 9493
+            },
+            {
+              "name": "core/GestureMgr.ts",
+              "size": 3179,
+              "value": 3179
+            },
+            {
+              "name": "core/LRU.ts",
+              "size": 3498,
+              "value": 3498
+            },
+            {
+              "name": "core/OrientedBoundingRect.ts",
+              "size": 5917,
+              "value": 5917
+            },
+            {
+              "name": "core/PathProxy.ts",
+              "size": 36414,
+              "value": 36414
+            },
+            {
+              "name": "core/Point.ts",
+              "size": 4097,
+              "value": 4097
+            },
+            {
+              "name": "core/Transformable.ts",
+              "size": 9273,
+              "value": 9273
+            },
+            {
+              "name": "core/WeakMap.ts",
+              "size": 1216,
+              "value": 1216
+            },
+            {
+              "name": "core/arrayDiff.ts",
+              "size": 6082,
+              "value": 6082
+            },
+            {
+              "name": "core/bbox.ts",
+              "size": 5038,
+              "value": 5038
+            },
+            {
+              "name": "core/curve.ts",
+              "size": 12552,
+              "value": 12552
+            },
+            {
+              "name": "core/dom.ts",
+              "size": 5970,
+              "value": 5970
+            },
+            {
+              "name": "core/env.ts",
+              "size": 3281,
+              "value": 3281
+            },
+            {
+              "name": "core/event.ts",
+              "size": 12491,
+              "value": 12491
+            },
+            {
+              "name": "core/fourPointsTransform.ts",
+              "size": 3622,
+              "value": 3622
+            },
+            {
+              "name": "core/matrix.ts",
+              "size": 3136,
+              "value": 3136
+            },
+            {
+              "name": "core/timsort.ts",
+              "size": 17183,
+              "value": 17183
+            },
+            {
+              "name": "core/types.ts",
+              "size": 3240,
+              "value": 3240
+            },
+            {
+              "name": "core/util.ts",
+              "size": 24309,
+              "value": 24309
+            },
+            {
+              "name": "core/vector.ts",
+              "size": 4338,
+              "value": 4338
+            }
+          ],
+          "value": 182134
+        },
+        {
+          "name": "debug",
+          "size": 3492,
+          "children": [
+            {
+              "name": "debug/showDebugDirtyRect.ts",
+              "size": 3492,
+              "value": 3492
+            }
+          ],
+          "value": 3492
+        },
+        {
+          "name": "dom",
+          "size": 22220,
+          "children": [
+            {
+              "name": "dom/HandlerProxy.ts",
+              "size": 22220,
+              "value": 22220
+            }
+          ],
+          "value": 22220
+        },
+        {
+          "name": "export.ts",
+          "size": 3317,
+          "value": 3317
+        },
+        {
+          "name": "graphic",
+          "size": 169365,
+          "children": [
+            {
+              "name": "graphic/CompoundPath.ts",
+              "size": 1606,
+              "value": 1606
+            },
+            {
+              "name": "graphic/Displayable.ts",
+              "size": 19541,
+              "value": 19541
+            },
+            {
+              "name": "graphic/Gradient.ts",
+              "size": 754,
+              "value": 754
+            },
+            {
+              "name": "graphic/Group.ts",
+              "size": 7645,
+              "value": 7645
+            },
+            {
+              "name": "graphic/Image.ts",
+              "size": 3227,
+              "value": 3227
+            },
+            {
+              "name": "graphic/IncrementalDisplayable.ts",
+              "size": 4426,
+              "value": 4426
+            },
+            {
+              "name": "graphic/LinearGradient.ts",
+              "size": 1096,
+              "value": 1096
+            },
+            {
+              "name": "graphic/Path.ts",
+              "size": 21284,
+              "value": 21284
+            },
+            {
+              "name": "graphic/Pattern.ts",
+              "size": 1721,
+              "value": 1721
+            },
+            {
+              "name": "graphic/RadialGradient.ts",
+              "size": 1020,
+              "value": 1020
+            },
+            {
+              "name": "graphic/TSpan.ts",
+              "size": 2844,
+              "value": 2844
+            },
+            {
+              "name": "graphic/Text.ts",
+              "size": 33862,
+              "value": 33862
+            },
+            {
+              "name": "graphic/constants.ts",
+              "size": 168,
+              "value": 168
+            },
+            {
+              "name": "graphic/helper",
+              "size": 47692,
+              "children": [
+                {
+                  "name": "graphic/helper/dashStyle.ts",
+                  "size": 503,
+                  "value": 503
+                },
+                {
+                  "name": "graphic/helper/image.ts",
+                  "size": 2989,
+                  "value": 2989
+                },
+                {
+                  "name": "graphic/helper/parseText.ts",
+                  "size": 23755,
+                  "value": 23755
+                },
+                {
+                  "name": "graphic/helper/poly.ts",
+                  "size": 1510,
+                  "value": 1510
+                },
+                {
+                  "name": "graphic/helper/roundRect.ts",
+                  "size": 2138,
+                  "value": 2138
+                },
+                {
+                  "name": "graphic/helper/roundSector.ts",
+                  "size": 8730,
+                  "value": 8730
+                },
+                {
+                  "name": "graphic/helper/smoothBezier.ts",
+                  "size": 2607,
+                  "value": 2607
+                },
+                {
+                  "name": "graphic/helper/smoothSpline.ts",
+                  "size": 1599,
+                  "value": 1599
+                },
+                {
+                  "name": "graphic/helper/subPixelOptimize.ts",
+                  "size": 3861,
+                  "value": 3861
+                }
+              ],
+              "value": 47692
+            },
+            {
+              "name": "graphic/shape",
+              "size": 22479,
+              "children": [
+                {
+                  "name": "graphic/shape/Arc.ts",
+                  "size": 1122,
+                  "value": 1122
+                },
+                {
+                  "name": "graphic/shape/BezierCurve.ts",
+                  "size": 3363,
+                  "value": 3363
+                },
+                {
+                  "name": "graphic/shape/Circle.ts",
+                  "size": 1081,
+                  "value": 1081
+                },
+                {
+                  "name": "graphic/shape/Droplet.ts",
+                  "size": 1070,
+                  "value": 1070
+                },
+                {
+                  "name": "graphic/shape/Ellipse.ts",
+                  "size": 1222,
+                  "value": 1222
+                },
+                {
+                  "name": "graphic/shape/Heart.ts",
+                  "size": 950,
+                  "value": 950
+                },
+                {
+                  "name": "graphic/shape/Isogon.ts",
+                  "size": 1096,
+                  "value": 1096
+                },
+                {
+                  "name": "graphic/shape/Line.ts",
+                  "size": 1985,
+                  "value": 1985
+                },
+                {
+                  "name": "graphic/shape/Polygon.ts",
+                  "size": 811,
+                  "value": 811
+                },
+                {
+                  "name": "graphic/shape/Polyline.ts",
+                  "size": 1023,
+                  "value": 1023
+                },
+                {
+                  "name": "graphic/shape/Rect.ts",
+                  "size": 1927,
+                  "value": 1927
+                },
+                {
+                  "name": "graphic/shape/Ring.ts",
+                  "size": 781,
+                  "value": 781
+                },
+                {
+                  "name": "graphic/shape/Rose.ts",
+                  "size": 1484,
+                  "value": 1484
+                },
+                {
+                  "name": "graphic/shape/Sector.ts",
+                  "size": 889,
+                  "value": 889
+                },
+                {
+                  "name": "graphic/shape/Star.ts",
+                  "size": 1698,
+                  "value": 1698
+                },
+                {
+                  "name": "graphic/shape/Trochoid.ts",
+                  "size": 1977,
+                  "value": 1977
+                }
+              ],
+              "value": 22479
+            }
+          ],
+          "value": 169365
+        },
+        {
+          "name": "mixin",
+          "size": 3505,
+          "children": [
+            {
+              "name": "mixin/Draggable.ts",
+              "size": 3505,
+              "value": 3505
+            }
+          ],
+          "value": 3505
+        },
+        {
+          "name": "svg",
+          "size": 63006,
+          "children": [
+            {
+              "name": "svg/Painter.ts",
+              "size": 15932,
+              "value": 15932
+            },
+            {
+              "name": "svg/core.ts",
+              "size": 120,
+              "value": 120
+            },
+            {
+              "name": "svg/graphic.ts",
+              "size": 13503,
+              "value": 13503
+            },
+            {
+              "name": "svg/helper",
+              "size": 33341,
+              "children": [
+                {
+                  "name": "svg/helper/ClippathManager.ts",
+                  "size": 5600,
+                  "value": 5600
+                },
+                {
+                  "name": "svg/helper/Definable.ts",
+                  "size": 7152,
+                  "value": 7152
+                },
+                {
+                  "name": "svg/helper/GradientManager.ts",
+                  "size": 8044,
+                  "value": 8044
+                },
+                {
+                  "name": "svg/helper/PatternManager.ts",
+                  "size": 7269,
+                  "value": 7269
+                },
+                {
+                  "name": "svg/helper/ShadowManager.ts",
+                  "size": 5276,
+                  "value": 5276
+                }
+              ],
+              "value": 33341
+            },
+            {
+              "name": "svg/svg.ts",
+              "size": 110,
+              "value": 110
+            }
+          ],
+          "value": 63006
+        },
+        {
+          "name": "tool",
+          "size": 122091,
+          "children": [
+            {
+              "name": "tool/color.ts",
+              "size": 19085,
+              "value": 19085
+            },
+            {
+              "name": "tool/convertPath.ts",
+              "size": 8959,
+              "value": 8959
+            },
+            {
+              "name": "tool/dividePath.ts",
+              "size": 12704,
+              "value": 12704
+            },
+            {
+              "name": "tool/morphPath.ts",
+              "size": 28139,
+              "value": 28139
+            },
+            {
+              "name": "tool/parseSVG.ts",
+              "size": 33804,
+              "value": 33804
+            },
+            {
+              "name": "tool/parseXML.ts",
+              "size": 692,
+              "value": 692
+            },
+            {
+              "name": "tool/path.ts",
+              "size": 16023,
+              "value": 16023
+            },
+            {
+              "name": "tool/transformPath.ts",
+              "size": 2685,
+              "value": 2685
+            }
+          ],
+          "value": 122091
+        },
+        {
+          "name": "vml",
+          "size": 42681,
+          "children": [
+            {
+              "name": "vml/Painter.ts",
+              "size": 5103,
+              "value": 5103
+            },
+            {
+              "name": "vml/core.ts",
+              "size": 1242,
+              "value": 1242
+            },
+            {
+              "name": "vml/graphic.ts",
+              "size": 36190,
+              "value": 36190
+            },
+            {
+              "name": "vml/vml.ts",
+              "size": 146,
+              "value": 146
+            }
+          ],
+          "value": 42681
+        },
+        {
+          "name": "zrender.ts",
+          "size": 13102,
+          "value": 13102
+        }
+      ]
+    }
+  ],
+  "value": 3835461
+}
\ No newline at end of file
diff --git a/public/data/bar-drilldown.js b/public/data/bar-drilldown.js
new file mode 100644
index 0000000..8a95a53
--- /dev/null
+++ b/public/data/bar-drilldown.js
@@ -0,0 +1,99 @@
+/*
+title: Bar Chart Drilldown Animation.
+category: bar
+titleCN: 柱状图下钻动画
+difficulty: 5
+*/
+
+option = {
+    xAxis: {
+        data: ['Animals', 'Fruits', 'Cars']
+    },
+    yAxis: {},
+    dataGroupId: '',
+    animationDurationUpdate: 500,
+    series: {
+        type: 'bar',
+        id: 'sales',
+        data: [{
+            value: 5,
+            groupId: 'animals'
+        }, {
+            value: 2,
+            groupId: 'fruits'
+        }, {
+            value: 4,
+            groupId: 'cars'
+        }],
+        universalTransition: {
+            enabled: true,
+            divideShape: 'clone'
+        }
+    }
+};
+
+var drilldownData = [{
+    dataGroupId: 'animals',
+    data: [
+        ['Cats', 4],
+        ['Dogs', 2],
+        ['Cows', 1],
+        ['Sheep', 2],
+        ['Pigs', 1]
+    ]
+}, {
+    dataGroupId: 'fruits',
+    data: [
+        ['Apples', 4],
+        ['Oranges', 2]
+    ]
+}, {
+    dataGroupId: 'cars',
+    data: [
+        ['Toyota', 4],
+        ['Opel', 2],
+        ['Volkswagen', 2]
+    ]
+}];
+
+myChart.on('click', function (event) {
+    if (event.data) {
+        var subData = drilldownData.find(function (data) {
+            return data.dataGroupId === event.data.groupId;
+        });
+        if (!subData) {
+            return;
+        }
+        myChart.setOption({
+            xAxis: {
+                data: subData.data.map(function (item) {
+                    return item[0];
+                })
+            },
+            series: {
+                type: 'bar',
+                id: 'sales',
+                dataGroupId: subData.dataGroupId,
+                data: subData.data.map(function (item) {
+                    return item[1];
+                }),
+                universalTransition: {
+                    enabled: true,
+                    divideShape: 'clone'
+                }
+            },
+            graphic: [{
+                type: 'text',
+                left: 50,
+                top: 20,
+                style: {
+                    text: 'Back',
+                    fontSize: 18
+                },
+                onclick: function () {
+                    myChart.setOption(option);
+                }
+            }]
+        });
+    }
+});
\ No newline at end of file
diff --git a/public/data/bar-polar-label-radial.js b/public/data/bar-polar-label-radial.js
new file mode 100644
index 0000000..f5c9054
--- /dev/null
+++ b/public/data/bar-polar-label-radial.js
@@ -0,0 +1,30 @@
+option = {
+    title: [{
+        text: 'Radial Polar Bar Label Position (middle)'
+    }],
+    polar: {
+        radius: [30, '80%']
+    },
+    radiusAxis: {
+        max: 4,
+        startAngle: 75
+    },
+    angleAxis: {
+        type: 'category',
+        data: ['a', 'b', 'c', 'd'],
+        startAngle: 75
+    },
+    tooltip: {},
+    series: {
+        type: 'bar',
+        data: [2, 1.2, 2.4, 3.6],
+        coordinateSystem: 'polar',
+        label: {
+            show: true,
+            position: 'middle', // or 'start', 'insideStart', 'end', 'insideEnd'
+            formatter: '{b}: {c}',
+        }
+    },
+    backgroundColor: '#fff',
+    animation: 0
+};
diff --git a/public/data/bar-polar-label-tangential.js b/public/data/bar-polar-label-tangential.js
new file mode 100644
index 0000000..db37d3b
--- /dev/null
+++ b/public/data/bar-polar-label-tangential.js
@@ -0,0 +1,30 @@
+option = {
+    title: [{
+        text: 'Radial Polar Bar Label Position (middle)'
+    }],
+    polar: {
+        radius: [30, '80%']
+    },
+    angleAxis: {
+        max: 4,
+        startAngle: 75
+    },
+    radiusAxis: {
+        type: 'category',
+        data: ['a', 'b', 'c', 'd'],
+        startAngle: 75
+    },
+    tooltip: {},
+    series: {
+        type: 'bar',
+        data: [2, 1.2, 2.4, 3.6],
+        coordinateSystem: 'polar',
+        label: {
+            show: true,
+            position: 'middle', // or 'start', 'insideStart', 'end', 'insideEnd'
+            formatter: '{b}: {c}',
+        }
+    },
+    backgroundColor: '#fff',
+    animation: 0
+};
diff --git a/public/data/bar-race-country.js b/public/data/bar-race-country.js
index d748300..1dcc988 100644
--- a/public/data/bar-race-country.js
+++ b/public/data/bar-race-country.js
@@ -3,6 +3,8 @@
 titleCN: 动态排序柱状图 - 人均收入
 category: bar
 difficulty: 6
+videoStart: 1000
+videoEnd: 6000
 */
 
 
diff --git a/public/data/bar-race.js b/public/data/bar-race.js
index 241a15f..21f76bf 100644
--- a/public/data/bar-race.js
+++ b/public/data/bar-race.js
@@ -3,6 +3,8 @@
 titleCN: 动态排序柱状图
 category: bar
 difficulty: 5
+videoStart: 1000
+videoEnd: 6000
 */
 
 var data = [];
diff --git a/public/data/custom-gantt-flight.js b/public/data/custom-gantt-flight.js
index 7f2c469..df7cbc3 100644
--- a/public/data/custom-gantt-flight.js
+++ b/public/data/custom-gantt-flight.js
@@ -1,6 +1,6 @@
 /*
 title: Gantt Chart of Airport Flights
-category: 'custom, dataZoom, drag'
+category: custom, dataZoom, drag
 titleCN: 机场航班甘特图
 difficulty: 4
 */
diff --git a/public/data/custom-hexbin.js b/public/data/custom-hexbin.js
index 0052228..b34933d 100644
--- a/public/data/custom-hexbin.js
+++ b/public/data/custom-hexbin.js
@@ -1,6 +1,6 @@
 /*
 title: Hexagonal Binning
-category: 'custom, map'
+category: custom, map
 titleCN: 六边形分箱图(自定义系列)
 difficulty: 6
 */
diff --git a/public/data/gauge-clock.js b/public/data/gauge-clock.js
index f7ba17c..d1a25fd 100644
--- a/public/data/gauge-clock.js
+++ b/public/data/gauge-clock.js
@@ -1,9 +1,11 @@
 /*
-title: Clock Gauge
+title: Clock
 titleCN: 时钟仪表盘
 category: gauge
 shotWidth: 1000
 difficulty: 7
+videoStart: 2000
+videoEnd: 8000
 */
 
 option = {
diff --git a/public/data/gauge-ring.js b/public/data/gauge-ring.js
index 5c88cd8..fde38b8 100644
--- a/public/data/gauge-ring.js
+++ b/public/data/gauge-ring.js
@@ -3,6 +3,8 @@
 titleCN: 得分环
 category: gauge
 difficulty: 5
+videoStart: 1000
+videoEnd: 8000
 */
 
 option = {
@@ -48,6 +50,7 @@
                 offsetCenter: ['0%', '-30%']
             },
             detail: {
+                valueAnimation: true,
                 offsetCenter: ['0%', '-20%']
             }
         },
@@ -58,6 +61,7 @@
                 offsetCenter: ['0%', '0%']
             },
             detail: {
+                valueAnimation: true,
                 offsetCenter: ['0%', '10%']
             }
         },
@@ -68,6 +72,7 @@
                 offsetCenter: ['0%', '30%']
             },
             detail: {
+                valueAnimation: true,
                 offsetCenter: ['0%', '40%']
             }
         }
diff --git a/public/data/gauge-simple.js b/public/data/gauge-simple.js
index 0921e43..f438cd1 100644
--- a/public/data/gauge-simple.js
+++ b/public/data/gauge-simple.js
@@ -3,6 +3,8 @@
 titleCN: 带标签数字动画的基础仪表盘
 category: gauge
 difficulty: 1
+videoStart: 0
+videoEnd: 1000
 */
 
 option = {
diff --git a/public/data/gauge-temperature.js b/public/data/gauge-temperature.js
index ac8f74c..58f199c 100644
--- a/public/data/gauge-temperature.js
+++ b/public/data/gauge-temperature.js
@@ -3,6 +3,8 @@
 titleCN: 气温仪表盘
 category: gauge
 difficulty: 4
+videoStart: 2000
+videoEnd: 5000
 */
 
 option = {
diff --git a/public/data/line-race.js b/public/data/line-race.js
index 196ad4f..3125111 100644
--- a/public/data/line-race.js
+++ b/public/data/line-race.js
@@ -3,6 +3,8 @@
 category: line
 titleCN: 动态排序折线图
 difficulty: 5
+videoStart: 3000
+videoEnd: 8000
 */
 
 $.get(ROOT_PATH + '/data/asset/data/life-expectancy-table.json', function (_rawData) {
diff --git a/public/data/map-bar-morph.js b/public/data/map-bar-morph.js
new file mode 100644
index 0000000..5fc999c
--- /dev/null
+++ b/public/data/map-bar-morph.js
@@ -0,0 +1,147 @@
+/*
+title: Morphing between Map and Bar
+category: map, animation
+titleCN: 地图柱状图变形动画
+videoStart: 2000
+videoEnd: 6000
+*/
+
+myChart.showLoading();
+
+$.get(ROOT_PATH + '/data/asset/geo/USA.json', function (usaJson) {
+    myChart.hideLoading();
+
+    echarts.registerMap('USA', usaJson, {
+        Alaska: {              // 把阿拉斯加移到美国主大陆左下方
+            left: -131,
+            top: 25,
+            width: 15
+        },
+        Hawaii: {
+            left: -110,        // 夏威夷
+            top: 28,
+            width: 5
+        },
+        'Puerto Rico': {       // 波多黎各
+            left: -76,
+            top: 26,
+            width: 2
+        }
+    });
+
+
+    var data = [
+        {name: 'Alabama', value: 4822023},
+        {name: 'Alaska', value: 731449},
+        {name: 'Arizona', value: 6553255},
+        {name: 'Arkansas', value: 2949131},
+        {name: 'California', value: 38041430},
+        {name: 'Colorado', value: 5187582},
+        {name: 'Connecticut', value: 3590347},
+        {name: 'Delaware', value: 917092},
+        {name: 'District of Columbia', value: 632323},
+        {name: 'Florida', value: 19317568},
+        {name: 'Georgia', value: 9919945},
+        {name: 'Hawaii', value: 1392313},
+        {name: 'Idaho', value: 1595728},
+        {name: 'Illinois', value: 12875255},
+        {name: 'Indiana', value: 6537334},
+        {name: 'Iowa', value: 3074186},
+        {name: 'Kansas', value: 2885905},
+        {name: 'Kentucky', value: 4380415},
+        {name: 'Louisiana', value: 4601893},
+        {name: 'Maine', value: 1329192},
+        {name: 'Maryland', value: 5884563},
+        {name: 'Massachusetts', value: 6646144},
+        {name: 'Michigan', value: 9883360},
+        {name: 'Minnesota', value: 5379139},
+        {name: 'Mississippi', value: 2984926},
+        {name: 'Missouri', value: 6021988},
+        {name: 'Montana', value: 1005141},
+        {name: 'Nebraska', value: 1855525},
+        {name: 'Nevada', value: 2758931},
+        {name: 'New Hampshire', value: 1320718},
+        {name: 'New Jersey', value: 8864590},
+        {name: 'New Mexico', value: 2085538},
+        {name: 'New York', value: 19570261},
+        {name: 'North Carolina', value: 9752073},
+        {name: 'North Dakota', value: 699628},
+        {name: 'Ohio', value: 11544225},
+        {name: 'Oklahoma', value: 3814820},
+        {name: 'Oregon', value: 3899353},
+        {name: 'Pennsylvania', value: 12763536},
+        {name: 'Rhode Island', value: 1050292},
+        {name: 'South Carolina', value: 4723723},
+        {name: 'South Dakota', value: 833354},
+        {name: 'Tennessee', value: 6456243},
+        {name: 'Texas', value: 26059203},
+        {name: 'Utah', value: 2855287},
+        {name: 'Vermont', value: 626011},
+        {name: 'Virginia', value: 8185867},
+        {name: 'Washington', value: 6897012},
+        {name: 'West Virginia', value: 1855413},
+        {name: 'Wisconsin', value: 5726398},
+        {name: 'Wyoming', value: 576412},
+        {name: 'Puerto Rico', value: 3667084}
+    ];
+
+    data.sort(function (a, b) {
+        return a.value - b.value;
+    });
+
+    var mapOption = {
+        visualMap: {
+            left: 'right',
+            min: 500000,
+            max: 38000000,
+            inRange: {
+                color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
+            },
+            text: ['High', 'Low'],
+            calculable: true
+        },
+        series: [
+            {
+                id: 'population',
+                type: 'map',
+                roam: true,
+                map: 'USA',
+                animationDurationUpdate: 1000,
+                universalTransition: true,
+                data: data
+            }
+        ]
+    };
+
+    var barOption = {
+        xAxis: {
+            type: 'value'
+        },
+        yAxis: {
+            type: 'category',
+            axisLabel: {
+                rotate: 30
+            },
+            data: data.map(function (item) {
+                return item.name;
+            })
+        },
+        animationDurationUpdate: 1000,
+        series: {
+            type: 'bar',
+            id: 'population',
+            data: data.map(function (item) {
+                return item.value;
+            }),
+            universalTransition: true
+        }
+    };
+
+    var currentOption = mapOption;
+    myChart.setOption(mapOption);
+
+    setInterval(function () {
+        currentOption = currentOption === mapOption ? barOption : mapOption;
+        myChart.setOption(currentOption, true);
+    }, 2000);
+});
\ No newline at end of file
diff --git a/public/data/map-usa.js b/public/data/map-usa.js
index 1c0b125..c4e57a7 100644
--- a/public/data/map-usa.js
+++ b/public/data/map-usa.js
@@ -1,7 +1,7 @@
 /*
 title: USA Population Estimates (2012)
 category: map
-titleCN: USA Population Estimates (2012)
+titleCN: 2012 年美国人口统计
 */
 
 myChart.showLoading();
@@ -75,11 +75,7 @@
                         show: true
                     }
                 },
-                // 文本位置修正
-                textFixed: {
-                    Alaska: [20, -20]
-                },
-                data:[
+                data: [
                     {name: 'Alabama', value: 4822023},
                     {name: 'Alaska', value: 731449},
                     {name: 'Arizona', value: 6553255},
diff --git a/public/data/pictorialBar-bar-transition.js b/public/data/pictorialBar-bar-transition.js
new file mode 100644
index 0000000..45317cd
--- /dev/null
+++ b/public/data/pictorialBar-bar-transition.js
@@ -0,0 +1,144 @@
+/*
+title: Transition between pictorialBar and bar
+category: pictorialBar, animation
+titleCN: 象形主图变形为柱状图
+difficulty: 4
+videoStart: 2500
+videoEnd: 10000
+*/
+
+var pathSymbols = {
+    reindeer: 'path://M-22.788,24.521c2.08-0.986,3.611-3.905,4.984-5.892 c-2.686,2.782-5.047,5.884-9.102,7.312c-0.992,0.005-0.25-2.016,0.34-2.362l1.852-0.41c0.564-0.218,0.785-0.842,0.902-1.347 c2.133-0.727,4.91-4.129,6.031-6.194c1.748-0.7,4.443-0.679,5.734-2.293c1.176-1.468,0.393-3.992,1.215-6.557 c0.24-0.754,0.574-1.581,1.008-2.293c-0.611,0.011-1.348-0.061-1.959-0.608c-1.391-1.245-0.785-2.086-1.297-3.313 c1.684,0.744,2.5,2.584,4.426,2.586C-8.46,3.012-8.255,2.901-8.04,2.824c6.031-1.952,15.182-0.165,19.498-3.937 c1.15-3.933-1.24-9.846-1.229-9.938c0.008-0.062-1.314-0.004-1.803-0.258c-1.119-0.771-6.531-3.75-0.17-3.33 c0.314-0.045,0.943,0.259,1.439,0.435c-0.289-1.694-0.92-0.144-3.311-1.946c0,0-1.1-0.855-1.764-1.98 c-0.836-1.09-2.01-2.825-2.992-4.031c-1.523-2.476,1.367,0.709,1.816,1.108c1.768,1.704,1.844,3.281,3.232,3.983 c0.195,0.203,1.453,0.164,0.926-0.468c-0.525-0.632-1.367-1.278-1.775-2.341c-0.293-0.703-1.311-2.326-1.566-2.711 c-0.256-0.384-0.959-1.718-1.67-2.351c-1.047-1.187-0.268-0.902,0.521-0.07c0.789,0.834,1.537,1.821,1.672,2.023 c0.135,0.203,1.584,2.521,1.725,2.387c0.102-0.259-0.035-0.428-0.158-0.852c-0.125-0.423-0.912-2.032-0.961-2.083 c-0.357-0.852-0.566-1.908-0.598-3.333c0.4-2.375,0.648-2.486,0.549-0.705c0.014,1.143,0.031,2.215,0.602,3.247 c0.807,1.496,1.764,4.064,1.836,4.474c0.561,3.176,2.904,1.749,2.281-0.126c-0.068-0.446-0.109-2.014-0.287-2.862 c-0.18-0.849-0.219-1.688-0.113-3.056c0.066-1.389,0.232-2.055,0.277-2.299c0.285-1.023,0.4-1.088,0.408,0.135 c-0.059,0.399-0.131,1.687-0.125,2.655c0.064,0.642-0.043,1.768,0.172,2.486c0.654,1.928-0.027,3.496,1,3.514 c1.805-0.424,2.428-1.218,2.428-2.346c-0.086-0.704-0.121-0.843-0.031-1.193c0.221-0.568,0.359-0.67,0.312-0.076 c-0.055,0.287,0.031,0.533,0.082,0.794c0.264,1.197,0.912,0.114,1.283-0.782c0.15-0.238,0.539-2.154,0.545-2.522 c-0.023-0.617,0.285-0.645,0.309,0.01c0.064,0.422-0.248,2.646-0.205,2.334c-0.338,1.24-1.105,3.402-3.379,4.712 c-0.389,0.12-1.186,1.286-3.328,2.178c0,0,1.729,0.321,3.156,0.246c1.102-0.19,3.707-0.027,4.654,0.269 c1.752,0.494,1.531-0.053,4.084,0.164c2.26-0.4,2.154,2.391-1.496,3.68c-2.549,1.405-3.107,1.475-2.293,2.984 c3.484,7.906,2.865,13.183,2.193,16.466c2.41,0.271,5.732-0.62,7.301,0.725c0.506,0.333,0.648,1.866-0.457,2.86 c-4.105,2.745-9.283,7.022-13.904,7.662c-0.977-0.194,0.156-2.025,0.803-2.247l1.898-0.03c0.596-0.101,0.936-0.669,1.152-1.139 c3.16-0.404,5.045-3.775,8.246-4.818c-4.035-0.718-9.588,3.981-12.162,1.051c-5.043,1.423-11.449,1.84-15.895,1.111 c-3.105,2.687-7.934,4.021-12.115,5.866c-3.271,3.511-5.188,8.086-9.967,10.414c-0.986,0.119-0.48-1.974,0.066-2.385l1.795-0.618 C-22.995,25.682-22.849,25.035-22.788,24.521z',
+    plane: 'path://M1.112,32.559l2.998,1.205l-2.882,2.268l-2.215-0.012L1.112,32.559z M37.803,23.96 c0.158-0.838,0.5-1.509,0.961-1.904c-0.096-0.037-0.205-0.071-0.344-0.071c-0.777-0.005-2.068-0.009-3.047-0.009 c-0.633,0-1.217,0.066-1.754,0.18l2.199,1.804H37.803z M39.738,23.036c-0.111,0-0.377,0.325-0.537,0.924h1.076 C40.115,23.361,39.854,23.036,39.738,23.036z M39.934,39.867c-0.166,0-0.674,0.705-0.674,1.986s0.506,1.986,0.674,1.986 s0.672-0.705,0.672-1.986S40.102,39.867,39.934,39.867z M38.963,38.889c-0.098-0.038-0.209-0.07-0.348-0.073 c-0.082,0-0.174,0-0.268-0.001l-7.127,4.671c0.879,0.821,2.42,1.417,4.348,1.417c0.979,0,2.27-0.006,3.047-0.01 c0.139,0,0.25-0.034,0.348-0.072c-0.646-0.555-1.07-1.643-1.07-2.967C37.891,40.529,38.316,39.441,38.963,38.889z M32.713,23.96 l-12.37-10.116l-4.693-0.004c0,0,4,8.222,4.827,10.121H32.713z M59.311,32.374c-0.248,2.104-5.305,3.172-8.018,3.172H39.629 l-25.325,16.61L9.607,52.16c0,0,6.687-8.479,7.95-10.207c1.17-1.6,3.019-3.699,3.027-6.407h-2.138 c-5.839,0-13.816-3.789-18.472-5.583c-2.818-1.085-2.396-4.04-0.031-4.04h0.039l-3.299-11.371h3.617c0,0,4.352,5.696,5.846,7.5 c2,2.416,4.503,3.678,8.228,3.87h30.727c2.17,0,4.311,0.417,6.252,1.046c3.49,1.175,5.863,2.7,7.199,4.027 C59.145,31.584,59.352,32.025,59.311,32.374z M22.069,30.408c0-0.815-0.661-1.475-1.469-1.475c-0.812,0-1.471,0.66-1.471,1.475 s0.658,1.475,1.471,1.475C21.408,31.883,22.069,31.224,22.069,30.408z M27.06,30.408c0-0.815-0.656-1.478-1.466-1.478 c-0.812,0-1.471,0.662-1.471,1.478s0.658,1.477,1.471,1.477C26.404,31.885,27.06,31.224,27.06,30.408z M32.055,30.408 c0-0.815-0.66-1.475-1.469-1.475c-0.808,0-1.466,0.66-1.466,1.475s0.658,1.475,1.466,1.475 C31.398,31.883,32.055,31.224,32.055,30.408z M37.049,30.408c0-0.815-0.658-1.478-1.467-1.478c-0.812,0-1.469,0.662-1.469,1.478 s0.656,1.477,1.469,1.477C36.389,31.885,37.049,31.224,37.049,30.408z M42.039,30.408c0-0.815-0.656-1.478-1.465-1.478 c-0.811,0-1.469,0.662-1.469,1.478s0.658,1.477,1.469,1.477C41.383,31.885,42.039,31.224,42.039,30.408z M55.479,30.565 c-0.701-0.436-1.568-0.896-2.627-1.347c-0.613,0.289-1.551,0.476-2.73,0.476c-1.527,0-1.639,2.263,0.164,2.316 C52.389,32.074,54.627,31.373,55.479,30.565z',
+    train: 'path://M67.335,33.596L67.335,33.596c-0.002-1.39-1.153-3.183-3.328-4.218h-9.096v-2.07h5.371 c-4.939-2.07-11.199-4.141-14.89-4.141H19.72v12.421v5.176h38.373c4.033,0,8.457-1.035,9.142-5.176h-0.027 c0.076-0.367,0.129-0.751,0.129-1.165L67.335,33.596L67.335,33.596z M27.999,30.413h-3.105v-4.141h3.105V30.413z M35.245,30.413 h-3.104v-4.141h3.104V30.413z M42.491,30.413h-3.104v-4.141h3.104V30.413z M49.736,30.413h-3.104v-4.141h3.104V30.413z  M14.544,40.764c1.143,0,2.07-0.927,2.07-2.07V35.59V25.237c0-1.145-0.928-2.07-2.07-2.07H-9.265c-1.143,0-2.068,0.926-2.068,2.07 v10.351v3.105c0,1.144,0.926,2.07,2.068,2.07H14.544L14.544,40.764z M8.333,26.272h3.105v4.141H8.333V26.272z M1.087,26.272h3.105 v4.141H1.087V26.272z M-6.159,26.272h3.105v4.141h-3.105V26.272z M-9.265,41.798h69.352v1.035H-9.265V41.798z',
+    ship: 'path://M16.678,17.086h9.854l-2.703,5.912c5.596,2.428,11.155,5.575,16.711,8.607c3.387,1.847,6.967,3.75,10.541,5.375 v-6.16l-4.197-2.763v-5.318L33.064,12.197h-11.48L20.43,15.24h-4.533l-1.266,3.286l0.781,0.345L16.678,17.086z M49.6,31.84 l0.047,1.273L27.438,20.998l0.799-1.734L49.6,31.84z M33.031,15.1l12.889,8.82l0.027,0.769L32.551,16.1L33.031,15.1z M22.377,14.045 h9.846l-1.539,3.365l-2.287-1.498h1.371l0.721-1.352h-2.023l-0.553,1.037l-0.541-0.357h-0.34l0.359-0.684h-2.025l-0.361,0.684 h-3.473L22.377,14.045z M23.695,20.678l-0.004,0.004h0.004V20.678z M24.828,18.199h-2.031l-0.719,1.358h2.029L24.828,18.199z  M40.385,34.227c-12.85-7.009-25.729-14.667-38.971-12.527c1.26,8.809,9.08,16.201,8.213,24.328 c-0.553,4.062-3.111,0.828-3.303,7.137c15.799,0,32.379,0,48.166,0l0.066-4.195l1.477-7.23 C50.842,39.812,45.393,36.961,40.385,34.227z M13.99,35.954c-1.213,0-2.195-1.353-2.195-3.035c0-1.665,0.98-3.017,2.195-3.017 c1.219,0,2.195,1.352,2.195,3.017C16.186,34.604,15.213,35.954,13.99,35.954z M23.691,20.682h-2.02l-0.588,1.351h2.023 L23.691,20.682z M19.697,18.199l-0.721,1.358h2.025l0.727-1.358H19.697z',
+    car: 'path://M49.592,40.883c-0.053,0.354-0.139,0.697-0.268,0.963c-0.232,0.475-0.455,0.519-1.334,0.475 c-1.135-0.053-2.764,0-4.484,0.068c0,0.476,0.018,0.697,0.018,0.697c0.111,1.299,0.697,1.342,0.931,1.342h3.7 c0.326,0,0.628,0,0.861-0.154c0.301-0.196,0.43-0.772,0.543-1.78c0.017-0.146,0.025-0.336,0.033-0.56v-0.01 c0-0.068,0.008-0.154,0.008-0.25V41.58l0,0C49.6,41.348,49.6,41.09,49.592,40.883L49.592,40.883z M6.057,40.883 c0.053,0.354,0.137,0.697,0.268,0.963c0.23,0.475,0.455,0.519,1.334,0.475c1.137-0.053,2.762,0,4.484,0.068 c0,0.476-0.018,0.697-0.018,0.697c-0.111,1.299-0.697,1.342-0.93,1.342h-3.7c-0.328,0-0.602,0-0.861-0.154 c-0.309-0.18-0.43-0.772-0.541-1.78c-0.018-0.146-0.027-0.336-0.035-0.56v-0.01c0-0.068-0.008-0.154-0.008-0.25V41.58l0,0 C6.057,41.348,6.057,41.09,6.057,40.883L6.057,40.883z M49.867,32.766c0-2.642-0.344-5.224-0.482-5.507 c-0.104-0.207-0.766-0.749-2.271-1.773c-1.522-1.042-1.487-0.887-1.766-1.566c0.25-0.078,0.492-0.224,0.639-0.241 c0.326-0.034,0.345,0.274,1.023,0.274c0.68,0,2.152-0.18,2.453-0.48c0.301-0.303,0.396-0.405,0.396-0.672 c0-0.268-0.156-0.818-0.447-1.146c-0.293-0.327-1.541-0.49-2.273-0.585c-0.729-0.095-0.834,0-1.022,0.121 c-0.304,0.189-0.32,1.919-0.32,1.919l-0.713,0.018c-0.465-1.146-1.11-3.452-2.117-5.269c-1.103-1.979-2.256-2.599-2.737-2.754 c-0.474-0.146-0.904-0.249-4.131-0.576c-3.298-0.344-5.922-0.388-8.262-0.388c-2.342,0-4.967,0.052-8.264,0.388 c-3.229,0.336-3.66,0.43-4.133,0.576s-1.633,0.775-2.736,2.754c-1.006,1.816-1.652,4.123-2.117,5.269L9.87,23.109 c0,0-0.008-1.729-0.318-1.919c-0.189-0.121-0.293-0.225-1.023-0.121c-0.732,0.104-1.98,0.258-2.273,0.585 c-0.293,0.327-0.447,0.878-0.447,1.146c0,0.267,0.094,0.379,0.396,0.672c0.301,0.301,1.773,0.48,2.453,0.48 c0.68,0,0.697-0.309,1.023-0.274c0.146,0.018,0.396,0.163,0.637,0.241c-0.283,0.68-0.24,0.524-1.764,1.566 c-1.506,1.033-2.178,1.566-2.271,1.773c-0.139,0.283-0.482,2.865-0.482,5.508s0.189,5.02,0.189,5.86c0,0.354,0,0.976,0.076,1.565 c0.053,0.354,0.129,0.697,0.268,0.966c0.232,0.473,0.447,0.516,1.334,0.473c1.137-0.051,2.779,0,4.477,0.07 c1.135,0.043,2.297,0.086,3.33,0.11c2.582,0.051,1.826-0.379,2.928-0.36c1.102,0.016,5.447,0.196,9.424,0.196 c3.976,0,8.332-0.182,9.423-0.196c1.102-0.019,0.346,0.411,2.926,0.36c1.033-0.018,2.195-0.067,3.332-0.11 c1.695-0.062,3.348-0.121,4.477-0.07c0.886,0.043,1.103,0,1.332-0.473c0.132-0.269,0.218-0.611,0.269-0.966 c0.086-0.592,0.078-1.213,0.078-1.565C49.678,37.793,49.867,35.408,49.867,32.766L49.867,32.766z M13.219,19.735 c0.412-0.964,1.652-2.9,2.256-3.244c0.145-0.087,1.426-0.491,4.637-0.706c2.953-0.198,6.217-0.276,7.73-0.276 c1.513,0,4.777,0.078,7.729,0.276c3.201,0.215,4.502,0.611,4.639,0.706c0.775,0.533,1.842,2.28,2.256,3.244 c0.412,0.965,0.965,2.858,0.861,3.116c-0.104,0.258,0.104,0.388-1.291,0.275c-1.387-0.103-10.088-0.216-14.185-0.216 c-4.088,0-12.789,0.113-14.184,0.216c-1.395,0.104-1.188-0.018-1.291-0.275C12.254,22.593,12.805,20.708,13.219,19.735 L13.219,19.735z M16.385,30.511c-0.619,0.155-0.988,0.491-1.764,0.482c-0.775,0-2.867-0.353-3.314-0.371 c-0.447-0.017-0.842,0.302-1.076,0.362c-0.23,0.06-0.688-0.104-1.377-0.318c-0.688-0.216-1.092-0.155-1.316-1.094 c-0.232-0.93,0-2.264,0-2.264c1.488-0.068,2.928,0.069,5.621,0.826c2.693,0.758,4.191,2.213,4.191,2.213 S17.004,30.357,16.385,30.511L16.385,30.511z M36.629,37.293c-1.23,0.164-6.386,0.207-8.794,0.207c-2.412,0-7.566-0.051-8.799-0.207 c-1.256-0.164-2.891-1.67-1.764-2.865c1.523-1.627,1.24-1.576,4.701-2.023C24.967,32.018,27.239,32,27.834,32 c0.584,0,2.865,0.025,5.859,0.404c3.461,0.447,3.178,0.396,4.699,2.022C39.521,35.623,37.887,37.129,36.629,37.293L36.629,37.293z  M48.129,29.582c-0.232,0.93-0.629,0.878-1.318,1.093c-0.688,0.216-1.145,0.371-1.377,0.319c-0.231-0.053-0.627-0.371-1.074-0.361 c-0.448,0.018-2.539,0.37-3.313,0.37c-0.772,0-1.146-0.328-1.764-0.481c-0.621-0.154-0.966-0.154-0.966-0.154 s1.49-1.464,4.191-2.213c2.693-0.758,4.131-0.895,5.621-0.826C48.129,27.309,48.361,28.643,48.129,29.582L48.129,29.582z'
+};
+
+var labelSetting = {
+    show: true,
+    position: 'right',
+    offset: [10, 0],
+    textStyle: {
+        fontSize: 16
+    }
+};
+
+function makeOption(type, symbol) {
+    return {
+        title: {
+            text: 'Vehicles in X City'
+        },
+        legend: {
+            data: ['2015', '2016']
+        },
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                type: 'shadow'
+            }
+        },
+        grid: {
+            containLabel: true,
+            left: 20
+        },
+        yAxis: {
+            data: ['reindeer', 'ship', 'plane', 'train', 'car'],
+            inverse: true,
+            axisLine: {show: false},
+            axisTick: {show: false},
+            axisLabel: {
+                margin: 30,
+                fontSize: 14
+            },
+            axisPointer: {
+                label: {
+                    show: true,
+                    margin: 30
+                }
+            }
+        },
+        xAxis: {
+            splitLine: {show: false},
+            axisLabel: {show: false},
+            axisTick: {show: false},
+            axisLine: {show: false}
+        },
+        animationDurationUpdate: 500,
+        series: [{
+            name: '2015',
+            id: 'bar1',
+            type: type,
+            label: labelSetting,
+            symbolRepeat: true,
+            symbolSize: ['80%', '60%'],
+            barCategoryGap: '40%',
+            universalTransition: {
+                enabled: true,
+                delay: function (idx, total) {
+                    return (idx / total) * 1000;
+                }
+            },
+            data: [{
+                value: 157,
+                symbol: symbol || pathSymbols.reindeer
+            }, {
+                value: 21,
+                symbol: symbol || pathSymbols.ship
+            }, {
+                value: 66,
+                symbol: symbol || pathSymbols.plane
+            }, {
+                value: 78,
+                symbol: symbol || pathSymbols.train
+            }, {
+                value: 123,
+                symbol: symbol || pathSymbols.car
+            }]
+        }, {
+            name: '2016',
+            id: 'bar2',
+            type: type,
+            barGap: '10%',
+            label: labelSetting,
+            symbolRepeat: true,
+            symbolSize: ['80%', '60%'],
+            universalTransition: {
+                enabled: true,
+                delay: function (idx, total) {
+                    return (idx / total) * 1000;
+                }
+            },
+            data: [{
+                value: 184,
+                symbol: symbol || pathSymbols.reindeer
+            }, {
+                value: 29,
+                symbol: symbol || pathSymbols.ship
+            }, {
+                value: 73,
+                symbol: symbol || pathSymbols.plane
+            }, {
+                value: 91,
+                symbol: symbol || pathSymbols.train
+            }, {
+                value: 95,
+                symbol: symbol || pathSymbols.car
+            }]
+        }]
+    };
+}
+
+var options = [
+    makeOption('pictorialBar'),
+    makeOption('bar'),
+    makeOption('pictorialBar', 'diamond')
+];
+
+var optionIndex = 0;
+option = options[optionIndex];
+
+setInterval(function () {
+    optionIndex = (optionIndex + 1) % options.length;
+    myChart.setOption(options[optionIndex]);
+}, 2500);
\ No newline at end of file
diff --git a/public/data/pictorialBar-forest.js b/public/data/pictorialBar-forest.js
index 8b001a6..318cdfe 100644
--- a/public/data/pictorialBar-forest.js
+++ b/public/data/pictorialBar-forest.js
@@ -2,7 +2,8 @@
 title: Expansion of forest
 category: pictorialBar
 titleCN: 森林的增长
-shotDelay: 5000
+videoStart: 4000
+videoEnd: 10000
 */
 
 var treeDataURI = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAA2CAYAAADUOvnEAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA5tJREFUeNrcWE1oE0EUnp0kbWyUpCiNYEpCFSpIMdpLRTD15s2ePHixnj00N4/GoyfTg2fbiwdvvagHC1UQ66GQUIQKKgn1UAqSSFua38b3prPJZDs7s5ufKn0w7CaZ2W/fe9/73kyMRqNB3Nrj1zdn4RJ6du9T2u1a2iHYSxjP4d41oOHGQwAIwSUHIyh8/RA8XeiXh0kLGFoaXiTecw/hoTG4ZCSAaFkY0+BpsZceLtiAoV2FkepZSDk5EpppczBvpuuQCqx0YnkYcVVoqQYMyeCG+lFdaGkXeVOFNu4aEBalOBk6sbQrQF7gSdK5JXjuHXuYVIVyr0TZ0FjKDeCs6km7JYMUdrWAUVmZUBtmRnVPK+x6nIR2xomH06R35ggwJPeofWphr/W5UjPIxq8B2bKgE8C4HVHWvg+2gZjXj19PkdFztY7bk9TDCH/g6oafDPpaoMvZIRI5WyMB/0Hv++HkpTKE0kM+A+h20cPAfN4GuRyp9G+LMTW+z8rCLI8b46XO9zRcYZTde/j0AZm8WGb3Y2F9KLlE2nqYkjFLJAsDOl/lea0q55mqxXcL7YBc++bsCPMe8mUyU2ZIpnCoblca6TZA/ga2Co8PGg7UGUlEDd0ueptglbrRZLLE7poti6pCaWUo2pu1oaYI1CF9b9cCZPO3F8ikJQ/rPpQT5YETht26ss+uCIL2Y8vHwJGpA96GI5mjOlaKhowUy6BcNcgIhDviTGWCGFaqEuufWz4pgcbCh+w0gEOyOjTlTtYYlIWPYWKEsLDzOs+nhzaO1KEpd+MXpOoTUgKiNyhdy5aSMPNVqxtSsJFgza5EWA4zKtCJ2OGbLn0JSLu8+SL4G86p1Fpr7ABXdGFF/UTD4rfmFYFw4G9VAJ9SM3aF8l3yok4/J6IV9sDVb36ynmtJ2M5+CwxTYBdKNMBaocKGV2nYgkz6r+cHBP30MzAfi4Sy+BebSoPIOi8PW1PpCCvr/KOD4k9Zu0WSH0Y0+SxJ2awp/nlwKtcGyHOJ8vNHtRJzhPlsHr8MogtlVtwUU0tSM1x58upSKbfJnSKUR07GVMKkDNfXpzpv0RTHy3nZMVx5IOWdZIaPabGFvfpwpjnvfmJHXLaEvZUTseu/TeLc+xgAPhEAb/PbjO6PBaOTf6LQRh/dERde23zxLtOXbaKNhfq2L/1fAOPHDUhOpIf5485h7l+GNHHiSYPKE3Myz9sFxoJuAyazvwIMAItferha5LTqAAAAAElFTkSuQmCC';
diff --git a/public/data/pictorialBar-hill.js b/public/data/pictorialBar-hill.js
index dfe7373..956b04c 100644
--- a/public/data/pictorialBar-hill.js
+++ b/public/data/pictorialBar-hill.js
@@ -2,6 +2,8 @@
 title: Wish List and Mountain Height
 category: pictorialBar
 titleCN: 圣诞愿望清单和山峰高度
+videoStart: 0
+videoEnd: 2000
 */
 
 var paperDataURI = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJgAAAAyCAYAAACgRRKpAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAB6FJREFUeNrsnE9y2zYYxUmRkig7spVdpx3Hdqb7ZNeFO2PdoD1Cj9DeoEdKbmDPeNFNW7lu0y7tRZvsYqfjWhL/qPgggoIggABIQKQkwsOhE5sQCfzw3uNHJu5sNnOaZq29RttolwfAbxgwChO9nad//4C2C7S9Sfe3uzQobqNghdoJBdIw3R8qHnvNANcA1sBUGCaV9pYC7rYBbLvbgAFpaBgmWbujlO1NA9h2wQTbcdHOoih2ZujLa7WcFtoMtUsKuFEDWL3bkAHq2GTnT+OJkyTzsXRd1/G8FoYN9vBnQ+pGZ7f7BrDqYSLbq6IdxXGM96BKIlBgDP97mgj7aLXcDLa8fgqoGwFu1ABmvzwwLAuTTJmw/SFIfG/ZBmEMIwRiHCVOnCTSPkk/BDoD7YHJbvcNYOVgYmtNWo1cs0xJ8pQJDgXIfM9bscE4TrDyAWwETuEEpP0QSzWU365T0CpXtzoDdsJY3bmpjqfT0AlRKMfWhQBhFYkGLAwjpE6JIxsnAAz6YW0QjksQaBGGTq0fw/mt0kJvXQA7cezWmpYaqBJ73XmKREABQMAKARjZsOXZqU4/FvLbWgu9VQA24NzRGYEJJm6C1GmuJJ4w39C5Sj6x/H6IKiWxPHflwQv9wPEV5TeibgS4200DzGitSdX6VCZWR0nonAR98dQNgxInpey0BvnNeKHXJGDGYYLiJQwiqIjuHZ+uKsWpEsUYOHVAeOdm0k4rzm9vKYUbrRswY7UmcVYa48mR5SN2YgkoMlXCoHEmQ6cfAojni1VkAUmsrEplVddCfitU6FUFzDpMvDw1nkzFA5dz91dkYvP61MlJREV8waQWUSWRnVac35QeY/EAe83c0RmDCSzMRV+w2nlZhp1UyFNyJVpMaJ6VmlQ3HUBE9rdSpIUbhhJ2WnF+ExZ63U+f/v2h02mfeb7/JZp0a8rEK1ouVqeXu6LwhEZqA0eCuCyD6ExGngVmKpICJ5tUEbjFsmC+nRZRSsSC0UKv++7Pv676/f7ZQb/v7O/vm3p0wQ3sUEIoM/hsDpFNqKqV6t1R5ltgnJ6Xyt0kOT+RZelCQmcuVs1VrhGOC7qd0kIyV2N87j+7v938cUFXyQ8O+nh7hmBrt9vGVUz1mZ3nicsC7ISqTICqldLqFilaoEjddOxP5UamiJ3CubV9n+sKbH7rdHzu74rnE/UzW9QCASpmvC5XekOWiTdoQRA4z58PEGx7+PvSNRE0aHABbV+eiYjlTJ0oW5m+761M4txePWmox5ODVDTCdbIwF2Dysw4zqTzFxOc/TbjlC/p6ZbYM109/Bk+NuP3l2Cn+nDDhQtNKFwTdF3xm7sJLMmWSLmj4nel0+swdXd9coQ86k8EB3gw2enBwgKx0z8pdo4pqECv1Jbfe2lYqAJinmKoWmAexdilEougiOy1qe/P+UrubyfMlfPbT05MzHo/xHsHldLvde/fi8vKjM3MGQa/n9NDmuvIMBhOMrdRSbiOqAWqjEupVrVQFDFWAdS1fVpzVKal00WKHxaAyhi1XXpJYtrpZar/y8tXj4+MSUMuC1AGe7jBgURgOspPvBvMt6CrBto7cphrAdepjcXpnagpgnUCu+mA9FljRXq9bqmiKlSmZ5zhieUplJkqhYE+ajywYqRWOUSlYWQZzf/n1+qc4jr4KEYFAYRSF2YrrBkEGnGoznduKK5FefUwZ4Ja8rKJbBIV+QZVEi4LuC97776HFb8vqZEARmACkAPPRzVvMl+j3/fH8oCA9oWQOWhg603DqPNx/xAMKPwcb9f18hYITef/+g7XcRkJ9R6JEvFDPUwxsXchuiOXkATxf7TEuAMvKKnSIXla31bwF/eYpEhvIpUFc0+pIg3mnoaKszjk8PMQw+b7ev9VeKVOIPjicTtBkRXiAADQATvUh9Lpym+n6mJaVpiUBmZXy8lbRIJ7d0WlanQgogIlYXRGYqCLrBdkAsB/RN987Gu9kgY3CyUGA1Mlq68ptNupjOnd9vaCj/OhF/fVtJ81Mi2ymX+yOMqCgHwCIQAX7ElX7DKj9vWDpIXj2LPLm93ffoh3Z1vmPTa3nNtU7NNW3NvLKKnAMhPDSCyRVpUVRdVYYKAImXBsTwo0DtTKmvBOvEjbb9TZdK8X5TOEOkpQr3DSwF7E6+u6ubAOHgQVQEiZtoJQA48A2TGE7XidstnObqpUG3bZW3tSxOs7jlapbKaC0AWNgg1d4vqsCtnXkNtFbG2XqTjqPVypqdwxQtyY7L/xGa9Ww2c5txPZgeDptX/mY7E2CWbEgvulAGQOsTrDZzm1Cq8t/k2AngbICWJ1gs5Xbij5e2TWgrAPGwHaSggbAvariAovktjKPV3YdqLUCVjfYeLmt6JsEDVA1A6xusEFue/HiuM5Wt5FA1QKwusD28uXLBqhtB0wAG2znOwLYVgFVa8AY2AYUbN9sEWBbDdTGALYO2NYE2E4BtZGA2YLNEmA7DdTGA2YSttPT04nrut0GqAYwVdiGjsZrRkdHR3ftdlv3aQP9/zA0QO0KYBzgpO+0KQL2wCjUqMGmAUwJNgFgDVANYGZgQ4DdI8AGDVANYFba3/98+PqLzz+7ajCw1/4XYABXWBExzrUA+gAAAABJRU5ErkJggg==';
diff --git a/public/data/pie-parliament-transition.js b/public/data/pie-parliament-transition.js
new file mode 100644
index 0000000..220b128
--- /dev/null
+++ b/public/data/pie-parliament-transition.js
@@ -0,0 +1,141 @@
+/*
+title: Transition of Parliament and Pie Chart
+category: custom, animtion
+titleCN: 自定义议会图与饼图过渡动画
+difficulty: 10
+videoStart: 1000
+videoEnd: 6000
+*/
+
+var data = [
+    { value: 800, name: 'A' },
+    { value: 635, name: 'B' },
+    { value: 580, name: 'C' },
+    { value: 484, name: 'D' },
+    { value: 300, name: 'E' },
+    { value: 200, name: 'F' }
+];
+
+var defaultPalette = [
+    // '#51689b', '#ce5c5c', '#fbc357', '#8fbf8f', '#659d84', '#fb8e6a', '#c77288', '#786090', '#91c4c5', '#6890ba'
+    '#5470c6',
+    '#91cc75',
+    '#fac858',
+    '#ee6666',
+    '#73c0de',
+    '#3ba272',
+    '#fc8452',
+    '#9a60b4',
+    '#ea7ccc'
+];
+
+var radius = ['30%', '80%'];
+
+var pieOption = {
+    series: [{
+        type: 'pie',
+        id: 'distribution',
+        radius: radius,
+        label: {
+            show: false
+        },
+        universalTransition: true,
+        animationDurationUpdate: 1000,
+        data: data
+    }]
+};
+
+
+var parliamentOption = (function () {
+    var sum = data.reduce(function (sum, cur) {
+        return sum + cur.value;
+    }, 0);
+
+    var angles = [];
+    var startAngle = -Math.PI / 2;
+    var curAngle = startAngle;
+    data.forEach(function (item) {
+        angles.push(curAngle);
+        curAngle += (item.value / sum) * Math.PI * 2;
+    });
+    angles.push(startAngle + Math.PI * 2);
+    function parliamentLayout(startAngle, endAngle, totalAngle, r0, r1, size) {
+        var rowsCount = Math.ceil((r1 - r0) / size);
+        var points = [];
+
+        var r = r0;
+        for (var i = 0; i < rowsCount; i++) {
+            // Recalculate size
+            var totalRingSeatsNumber = Math.round((totalAngle * r) / size);
+            var newSize = (totalAngle * r) / totalRingSeatsNumber;
+            for (
+                var k = Math.floor((startAngle * r) / newSize) * newSize;
+                k < Math.floor((endAngle * r) / newSize) * newSize - 1e-6;
+                k += newSize
+            ) {
+                var angle = k / r;
+                var x = Math.cos(angle) * r;
+                var y = Math.sin(angle) * r;
+                points.push([x, y]);
+            }
+
+            r += size;
+        }
+
+        return points;
+    }
+    return {
+        series: {
+            type: 'custom',
+            id: 'distribution',
+            data: data,
+            coordinateSystem: undefined,
+            universalTransition: true,
+            animationDurationUpdate: 1000,
+            renderItem: function (params, api) {
+                var idx = params.dataIndex;
+                var viewSize = Math.min(api.getWidth(), api.getHeight());
+                var r0 = ((parseFloat(radius[0]) / 100) * viewSize) / 2;
+                var r1 = ((parseFloat(radius[1]) / 100) * viewSize) / 2;
+                var cx = api.getWidth() * 0.5;
+                var cy = api.getHeight() * 0.5;
+                var size = viewSize / 50;
+
+                var points = parliamentLayout(
+                    angles[idx],
+                    angles[idx + 1],
+                    Math.PI * 2,
+                    r0,
+                    r1,
+                    size + 3
+                );
+
+                return {
+                    type: 'group',
+                    children: points.map(function (pt) {
+                        return {
+                            type: 'circle',
+                            autoBatch: true,
+                            shape: {
+                                cx: cx + pt[0],
+                                cy: cy + pt[1],
+                                r: size / 2
+                            },
+                            style: {
+                                fill: defaultPalette[idx % defaultPalette.length]
+                            }
+                        };
+                    })
+                };
+            }
+        }
+    };
+})();
+
+
+var currentOption = option = pieOption;
+
+setInterval(function () {
+    currentOption = currentOption === pieOption ? parliamentOption : pieOption;
+    myChart.setOption(currentOption);
+}, 2000);
\ No newline at end of file
diff --git a/public/data/scatter-aggregate-bar.js b/public/data/scatter-aggregate-bar.js
new file mode 100644
index 0000000..ad77fd1
--- /dev/null
+++ b/public/data/scatter-aggregate-bar.js
@@ -0,0 +1,187 @@
+/*
+title: Aggregate Scatter to Bar
+category: scatter, animation
+titleCN: 散点图聚合为柱状图动画
+difficulty: 4
+videoStart: 2000
+videoEnd: 6000
+*/
+
+var femaleData = [[161.2, 51.6], [167.5, 59.0], [159.5, 49.2], [157.0, 63.0], [155.8, 53.6],
+    [170.0, 59.0], [159.1, 47.6], [166.0, 69.8], [176.2, 66.8], [160.2, 75.2],
+    [172.5, 55.2], [170.9, 54.2], [172.9, 62.5], [153.4, 42.0], [160.0, 50.0],
+    [147.2, 49.8], [168.2, 49.2], [175.0, 73.2], [157.0, 47.8], [167.6, 68.8],
+    [159.5, 50.6], [175.0, 82.5], [166.8, 57.2], [176.5, 87.8], [170.2, 72.8],
+    [174.0, 54.5], [173.0, 59.8], [179.9, 67.3], [170.5, 67.8], [160.0, 47.0],
+    [154.4, 46.2], [162.0, 55.0], [176.5, 83.0], [160.0, 54.4], [152.0, 45.8],
+    [162.1, 53.6], [170.0, 73.2], [160.2, 52.1], [161.3, 67.9], [166.4, 56.6],
+    [168.9, 62.3], [163.8, 58.5], [167.6, 54.5], [160.0, 50.2], [161.3, 60.3],
+    [167.6, 58.3], [165.1, 56.2], [160.0, 50.2], [170.0, 72.9], [157.5, 59.8],
+    [167.6, 61.0], [160.7, 69.1], [163.2, 55.9], [152.4, 46.5], [157.5, 54.3],
+    [168.3, 54.8], [180.3, 60.7], [165.5, 60.0], [165.0, 62.0], [164.5, 60.3],
+    [156.0, 52.7], [160.0, 74.3], [163.0, 62.0], [165.7, 73.1], [161.0, 80.0],
+    [162.0, 54.7], [166.0, 53.2], [174.0, 75.7], [172.7, 61.1], [167.6, 55.7],
+    [151.1, 48.7], [164.5, 52.3], [163.5, 50.0], [152.0, 59.3], [169.0, 62.5],
+    [164.0, 55.7], [161.2, 54.8], [155.0, 45.9], [170.0, 70.6], [176.2, 67.2],
+    [170.0, 69.4], [162.5, 58.2], [170.3, 64.8], [164.1, 71.6], [169.5, 52.8],
+    [163.2, 59.8], [154.5, 49.0], [159.8, 50.0], [173.2, 69.2], [170.0, 55.9],
+    [161.4, 63.4], [169.0, 58.2], [166.2, 58.6], [159.4, 45.7], [162.5, 52.2],
+    [159.0, 48.6], [162.8, 57.8], [159.0, 55.6], [179.8, 66.8], [162.9, 59.4],
+    [161.0, 53.6], [151.1, 73.2], [168.2, 53.4], [168.9, 69.0], [173.2, 58.4],
+    [171.8, 56.2], [178.0, 70.6], [164.3, 59.8], [163.0, 72.0], [168.5, 65.2],
+    [166.8, 56.6], [172.7, 105.2], [163.5, 51.8], [169.4, 63.4], [167.8, 59.0],
+    [159.5, 47.6], [167.6, 63.0], [161.2, 55.2], [160.0, 45.0], [163.2, 54.0],
+    [162.2, 50.2], [161.3, 60.2], [149.5, 44.8], [157.5, 58.8], [163.2, 56.4],
+    [172.7, 62.0], [155.0, 49.2], [156.5, 67.2], [164.0, 53.8], [160.9, 54.4],
+    [162.8, 58.0], [167.0, 59.8], [160.0, 54.8], [160.0, 43.2], [168.9, 60.5],
+    [158.2, 46.4], [156.0, 64.4], [160.0, 48.8], [167.1, 62.2], [158.0, 55.5],
+    [167.6, 57.8], [156.0, 54.6], [162.1, 59.2], [173.4, 52.7], [159.8, 53.2],
+    [170.5, 64.5], [159.2, 51.8], [157.5, 56.0], [161.3, 63.6], [162.6, 63.2],
+    [160.0, 59.5], [168.9, 56.8], [165.1, 64.1], [162.6, 50.0], [165.1, 72.3],
+    [166.4, 55.0], [160.0, 55.9], [152.4, 60.4], [170.2, 69.1], [162.6, 84.5],
+    [170.2, 55.9], [158.8, 55.5], [172.7, 69.5], [167.6, 76.4], [162.6, 61.4],
+    [167.6, 65.9], [156.2, 58.6], [175.2, 66.8], [172.1, 56.6], [162.6, 58.6],
+    [160.0, 55.9], [165.1, 59.1], [182.9, 81.8], [166.4, 70.7], [165.1, 56.8],
+    [177.8, 60.0], [165.1, 58.2], [175.3, 72.7], [154.9, 54.1], [158.8, 49.1],
+    [172.7, 75.9], [168.9, 55.0], [161.3, 57.3], [167.6, 55.0], [165.1, 65.5],
+    [175.3, 65.5], [157.5, 48.6], [163.8, 58.6], [167.6, 63.6], [165.1, 55.2],
+    [165.1, 62.7], [168.9, 56.6], [162.6, 53.9], [164.5, 63.2], [176.5, 73.6],
+    [168.9, 62.0], [175.3, 63.6], [159.4, 53.2], [160.0, 53.4], [170.2, 55.0],
+    [162.6, 70.5], [167.6, 54.5], [162.6, 54.5], [160.7, 55.9], [160.0, 59.0],
+    [157.5, 63.6], [162.6, 54.5], [152.4, 47.3], [170.2, 67.7], [165.1, 80.9],
+    [172.7, 70.5], [165.1, 60.9], [170.2, 63.6], [170.2, 54.5], [170.2, 59.1],
+    [161.3, 70.5], [167.6, 52.7], [167.6, 62.7], [165.1, 86.3], [162.6, 66.4],
+    [152.4, 67.3], [168.9, 63.0], [170.2, 73.6], [175.2, 62.3], [175.2, 57.7],
+    [160.0, 55.4], [165.1, 104.1], [174.0, 55.5], [170.2, 77.3], [160.0, 80.5],
+    [167.6, 64.5], [167.6, 72.3], [167.6, 61.4], [154.9, 58.2], [162.6, 81.8],
+    [175.3, 63.6], [171.4, 53.4], [157.5, 54.5], [165.1, 53.6], [160.0, 60.0],
+    [174.0, 73.6], [162.6, 61.4], [174.0, 55.5], [162.6, 63.6], [161.3, 60.9],
+    [156.2, 60.0], [149.9, 46.8], [169.5, 57.3], [160.0, 64.1], [175.3, 63.6],
+    [169.5, 67.3], [160.0, 75.5], [172.7, 68.2], [162.6, 61.4], [157.5, 76.8],
+    [176.5, 71.8], [164.4, 55.5], [160.7, 48.6], [174.0, 66.4], [163.8, 67.3]
+];
+var maleDeta = [[174.0, 65.6], [175.3, 71.8], [193.5, 80.7], [186.5, 72.6], [187.2, 78.8],
+    [181.5, 74.8], [184.0, 86.4], [184.5, 78.4], [175.0, 62.0], [184.0, 81.6],
+    [180.0, 76.6], [177.8, 83.6], [192.0, 90.0], [176.0, 74.6], [174.0, 71.0],
+    [184.0, 79.6], [192.7, 93.8], [171.5, 70.0], [173.0, 72.4], [176.0, 85.9],
+    [176.0, 78.8], [180.5, 77.8], [172.7, 66.2], [176.0, 86.4], [173.5, 81.8],
+    [178.0, 89.6], [180.3, 82.8], [180.3, 76.4], [164.5, 63.2], [173.0, 60.9],
+    [183.5, 74.8], [175.5, 70.0], [188.0, 72.4], [189.2, 84.1], [172.8, 69.1],
+    [170.0, 59.5], [182.0, 67.2], [170.0, 61.3], [177.8, 68.6], [184.2, 80.1],
+    [186.7, 87.8], [171.4, 84.7], [172.7, 73.4], [175.3, 72.1], [180.3, 82.6],
+    [182.9, 88.7], [188.0, 84.1], [177.2, 94.1], [172.1, 74.9], [167.0, 59.1],
+    [169.5, 75.6], [174.0, 86.2], [172.7, 75.3], [182.2, 87.1], [164.1, 55.2],
+    [163.0, 57.0], [171.5, 61.4], [184.2, 76.8], [174.0, 86.8], [174.0, 72.2],
+    [177.0, 71.6], [186.0, 84.8], [167.0, 68.2], [171.8, 66.1], [182.0, 72.0],
+    [167.0, 64.6], [177.8, 74.8], [164.5, 70.0], [192.0, 101.6], [175.5, 63.2],
+    [171.2, 79.1], [181.6, 78.9], [167.4, 67.7], [181.1, 66.0], [177.0, 68.2],
+    [174.5, 63.9], [177.5, 72.0], [170.5, 56.8], [182.4, 74.5], [197.1, 90.9],
+    [180.1, 93.0], [175.5, 80.9], [180.6, 72.7], [184.4, 68.0], [175.5, 70.9],
+    [180.6, 72.5], [177.0, 72.5], [177.1, 83.4], [181.6, 75.5], [176.5, 73.0],
+    [175.0, 70.2], [174.0, 73.4], [165.1, 70.5], [177.0, 68.9], [192.0, 102.3],
+    [176.5, 68.4], [169.4, 65.9], [182.1, 75.7], [179.8, 84.5], [175.3, 87.7],
+    [184.9, 86.4], [177.3, 73.2], [167.4, 53.9], [178.1, 72.0], [168.9, 55.5],
+    [157.2, 58.4], [180.3, 83.2], [170.2, 72.7], [177.8, 64.1], [172.7, 72.3],
+    [165.1, 65.0], [186.7, 86.4], [165.1, 65.0], [174.0, 88.6], [175.3, 84.1],
+    [185.4, 66.8], [177.8, 75.5], [180.3, 93.2], [180.3, 82.7], [177.8, 58.0],
+    [177.8, 79.5], [177.8, 78.6], [177.8, 71.8], [177.8, 116.4], [163.8, 72.2],
+    [188.0, 83.6], [198.1, 85.5], [175.3, 90.9], [166.4, 85.9], [190.5, 89.1],
+    [166.4, 75.0], [177.8, 77.7], [179.7, 86.4], [172.7, 90.9], [190.5, 73.6],
+    [185.4, 76.4], [168.9, 69.1], [167.6, 84.5], [175.3, 64.5], [170.2, 69.1],
+    [190.5, 108.6], [177.8, 86.4], [190.5, 80.9], [177.8, 87.7], [184.2, 94.5],
+    [176.5, 80.2], [177.8, 72.0], [180.3, 71.4], [171.4, 72.7], [172.7, 84.1],
+    [172.7, 76.8], [177.8, 63.6], [177.8, 80.9], [182.9, 80.9], [170.2, 85.5],
+    [167.6, 68.6], [175.3, 67.7], [165.1, 66.4], [185.4, 102.3], [181.6, 70.5],
+    [172.7, 95.9], [190.5, 84.1], [179.1, 87.3], [175.3, 71.8], [170.2, 65.9],
+    [193.0, 95.9], [171.4, 91.4], [177.8, 81.8], [177.8, 96.8], [167.6, 69.1],
+    [167.6, 82.7], [180.3, 75.5], [182.9, 79.5], [176.5, 73.6], [186.7, 91.8],
+    [188.0, 84.1], [188.0, 85.9], [177.8, 81.8], [174.0, 82.5], [177.8, 80.5],
+    [171.4, 70.0], [185.4, 81.8], [185.4, 84.1], [188.0, 90.5], [188.0, 91.4],
+    [182.9, 89.1], [176.5, 85.0], [175.3, 69.1], [175.3, 73.6], [188.0, 80.5],
+    [188.0, 82.7], [175.3, 86.4], [170.5, 67.7], [179.1, 92.7], [177.8, 93.6],
+    [175.3, 70.9], [182.9, 75.0], [170.8, 93.2], [188.0, 93.2], [180.3, 77.7],
+    [177.8, 61.4], [185.4, 94.1], [168.9, 75.0], [185.4, 83.6], [180.3, 85.5],
+    [174.0, 73.9], [167.6, 66.8], [182.9, 87.3], [160.0, 72.3], [180.3, 88.6],
+    [167.6, 75.5], [186.7, 101.4], [175.3, 91.1], [175.3, 67.3], [175.9, 77.7],
+    [175.3, 81.8], [179.1, 75.5], [181.6, 84.5], [177.8, 76.6], [182.9, 85.0],
+    [177.8, 102.5], [184.2, 77.3], [179.1, 71.8], [176.5, 87.9], [188.0, 94.3],
+    [174.0, 70.9], [167.6, 64.5], [170.2, 77.3], [167.6, 72.3], [188.0, 87.3],
+    [174.0, 80.0], [176.5, 82.3], [180.3, 73.6], [167.6, 74.1], [188.0, 85.9],
+    [180.3, 73.2], [167.6, 76.3], [183.0, 65.9], [183.0, 90.9], [179.1, 89.1],
+    [170.2, 62.3], [177.8, 82.7], [179.1, 79.1], [190.5, 98.2], [177.8, 84.1],
+    [180.3, 83.2], [180.3, 83.2]
+];
+
+function calculateAverage(data, dim) {
+    var total = 0;
+    for (var i = 0; i < data.length; i++) {
+        total += data[i][dim];
+    }
+    return total /= data.length;
+}
+
+
+var scatterOption = option = {
+    xAxis: {
+        scale: true
+    },
+    yAxis: {
+        scale: true
+    },
+    series: [{
+        type: 'scatter',
+        id: 'female',
+        dataGroupId: 'female',
+        universalTransition: {
+            enabled: true,
+            delay: function (idx, count) {
+                return Math.random() * 400;
+            }
+        },
+        data: femaleData
+    }, {
+        type: 'scatter',
+        id: 'male',
+        dataGroupId: 'male',
+        universalTransition: {
+            enabled: true,
+            delay: function (idx, count) {
+                return Math.random() * 400;
+            }
+        },
+        data: maleDeta
+    }]
+};
+
+var barOption = {
+    xAxis: {
+        type: 'category',
+        data: ['Female', 'Male']
+    },
+    yAxis: {},
+    series: [{
+        type: 'bar',
+        id: 'total',
+        data: [{
+            value: calculateAverage(maleDeta, 0),
+            groupId: 'male'
+        }, {
+            value: calculateAverage(femaleData, 0),
+            groupId: 'female'
+        }],
+        universalTransition: {
+            enabled: true,
+            seriesKey: ['female', 'male'],
+            delay: function (idx, count) {
+                return Math.random() * 400;
+            }
+        }
+    }]
+};
+
+var currentOption = scatterOption;
+
+setInterval(function () {
+    currentOption = currentOption === scatterOption ? barOption : scatterOption;
+    myChart.setOption(currentOption, true);
+}, 2000);
\ No newline at end of file
diff --git a/public/data/scatter-polynomial-regression.js b/public/data/scatter-polynomial-regression.js
index a3dc55f..d278f41 100644
--- a/public/data/scatter-polynomial-regression.js
+++ b/public/data/scatter-polynomial-regression.js
@@ -70,7 +70,7 @@
     series: [{
         name: 'scatter',
         type: 'scatter'
-        }, {
+    }, {
         name: 'line',
         type: 'line',
         smooth: true,
diff --git a/public/data/scatter-symbol-morph.js b/public/data/scatter-symbol-morph.js
new file mode 100644
index 0000000..c3006a5
--- /dev/null
+++ b/public/data/scatter-symbol-morph.js
@@ -0,0 +1,97 @@
+/*
+title: Symbol Shape Morph
+category: scatter
+titleCN: 散点图变形动画
+difficulty: 4
+videoStart: 1000
+videoEnd: 8000
+*/
+
+var xData = [];
+var yData = [];
+var data = [];
+for (var y = 0; y < 10; y++) {
+    yData.push(y);
+    for (var x = 0; x < 10; x++) {
+        data.push([
+            x, y, 10
+        ]);
+    }
+}
+for (var x = 0; x < 10; x++) {
+    xData.push(x);
+}
+
+var options = [{
+    grid: {
+        left: 0,
+        right: 0,
+        top: 0,
+        bottom: 0
+    },
+    xAxis: {
+        show: false,
+        type: 'category',
+        data: xData
+    },
+    yAxis: {
+        show: false,
+        type: 'category',
+        data: yData
+    },
+    series: [
+        {
+            type: 'scatter',
+            data: data,
+            symbol: 'roundRect',
+            universalTransition: true,
+            symbolSize: 50
+        }
+    ]
+},
+{
+    series: [{
+        type: 'scatter',
+        symbol: 'circle'
+    }]
+},
+
+{
+    series: [{
+        type: 'scatter',
+        symbol: 'diamond'
+    }]
+},
+
+{
+    series: [{
+        symbol: 'path://M23.6 2c-3.363 0-6.258 2.736-7.599 5.594-1.342-2.858-4.237-5.594-7.601-5.594-4.637 0-8.4 3.764-8.4 8.401 0 9.433 9.516 11.906 16.001 21.232 6.13-9.268 15.999-12.1 15.999-21.232 0-4.637-3.763-8.401-8.4-8.401z',
+    }]
+},
+
+{
+    series: [{
+        symbol: 'path://M16 0c-8.837 0-16 7.163-16 16s7.163 16 16 16 16-7.163 16-16-7.163-16-16-16zM22 8c1.105 0 2 1.343 2 3s-0.895 3-2 3-2-1.343-2-3 0.895-3 2-3zM10 8c1.105 0 2 1.343 2 3s-0.895 3-2 3-2-1.343-2-3 0.895-3 2-3zM16 28c-5.215 0-9.544-4.371-10-9.947 2.93 1.691 6.377 2.658 10 2.658s7.070-0.963 10-2.654c-0.455 5.576-4.785 9.942-10 9.942z',
+    }]
+},
+
+{
+    series: [{
+        symbol: 'path://M32 2c0-1.422-0.298-2.775-0.833-4-1.049 2.401-3.014 4.31-5.453 5.287-2.694-2.061-6.061-3.287-9.714-3.287s-7.021 1.226-9.714 3.287c-2.439-0.976-4.404-2.886-5.453-5.287-0.535 1.225-0.833 2.578-0.833 4 0 2.299 0.777 4.417 2.081 6.106-1.324 2.329-2.081 5.023-2.081 7.894 0 8.837 7.163 16 16 16s16-7.163 16-16c0-2.871-0.757-5.565-2.081-7.894 1.304-1.689 2.081-3.806 2.081-6.106zM18.003 11.891c0.064-1.483 1.413-2.467 2.55-3.036 1.086-0.543 2.16-0.814 2.205-0.826 0.536-0.134 1.079 0.192 1.213 0.728s-0.192 1.079-0.728 1.213c-0.551 0.139-1.204 0.379-1.779 0.667 0.333 0.357 0.537 0.836 0.537 1.363 0 1.105-0.895 2-2 2s-2-0.895-2-2c0-0.037 0.001-0.073 0.003-0.109zM8.030 8.758c0.134-0.536 0.677-0.862 1.213-0.728 0.045 0.011 1.119 0.283 2.205 0.826 1.137 0.569 2.486 1.553 2.55 3.036 0.002 0.036 0.003 0.072 0.003 0.109 0 1.105-0.895 2-2 2s-2-0.895-2-2c0-0.527 0.204-1.005 0.537-1.363-0.575-0.288-1.228-0.528-1.779-0.667-0.536-0.134-0.861-0.677-0.728-1.213zM16 26c-3.641 0-6.827-1.946-8.576-4.855l2.573-1.544c1.224 2.036 3.454 3.398 6.003 3.398s4.779-1.362 6.003-3.398l2.573 1.544c-1.749 2.908-4.935 4.855-8.576 4.855z',
+    }]
+},
+
+{
+    series: [{
+        symbol: 'path://M30.148 5.588c-2.934-3.42-7.288-5.588-12.148-5.588-8.837 0-16 7.163-16 16s7.163 16 16 16c4.86 0 9.213-2.167 12.148-5.588l-10.148-10.412 10.148-10.412zM22 3.769c1.232 0 2.231 0.999 2.231 2.231s-0.999 2.231-2.231 2.231-2.231-0.999-2.231-2.231c0-1.232 0.999-2.231 2.231-2.231z',
+    }]
+}];
+
+
+var optionIndex = 0;
+option = options[optionIndex];
+
+setInterval(function () {
+    optionIndex = (optionIndex + 1) % options.length;
+    myChart.setOption(options[optionIndex]);
+}, 1000);
\ No newline at end of file
diff --git a/public/data/treemap-sunburst-transition.js b/public/data/treemap-sunburst-transition.js
new file mode 100644
index 0000000..6e88c01
--- /dev/null
+++ b/public/data/treemap-sunburst-transition.js
@@ -0,0 +1,56 @@
+/*
+title: Transition between Treemap and Sunburst
+category: treemap
+titleCN: 矩形树图和旭日图的动画过渡
+difficulty: 4
+videoStart: 3000
+videoEnd: 9000
+*/
+
+$.getJSON(ROOT_PATH + '/data/asset/data/echarts-package-size.json', function (data) {
+    var treemapOption = {
+        series: [{
+            type: 'treemap',
+            id: 'echarts-package-size',
+            animationDurationUpdate: 1000,
+            roam: false,
+            nodeClick: undefined,
+            data: data.children,
+            universalTransition: true,
+            label: {
+                show: true
+            },
+            breadcrumb: {
+                show: false
+            }
+        }]
+    };
+
+    var sunburstOption = {
+        series: [{
+            type: 'sunburst',
+            id: 'echarts-package-size',
+            radius: ['20%', '90%'],
+            animationDurationUpdate: 1000,
+            nodeClick: undefined,
+            data: data.children,
+            universalTransition: true,
+            itemStyle: {
+                borderWidth: 1,
+                borderColor: 'rgba(255,255,255,.5)'
+            },
+            label: {
+                show: false
+            }
+        }]
+    };
+
+    var currentOption = treemapOption;
+
+    myChart.setOption(currentOption);
+
+    setInterval(function () {
+        currentOption = currentOption === treemapOption ? sunburstOption : treemapOption;
+        myChart.setOption(currentOption);
+    }, 3000);
+});
\ No newline at end of file
diff --git a/src/data/chart-list-data.js b/src/data/chart-list-data.js
index 41b952d..d28eb22 100644
--- a/src/data/chart-list-data.js
+++ b/src/data/chart-list-data.js
@@ -1612,10 +1612,30 @@
     "category": [
       "bar"
     ],
+    "id": "bar-polar-label-tangential",
+    "tags": [],
+    "title": "Tangential Polar Bar Label Position",
+    "titleCN": "极坐标系切向柱状图的标签位置",
+    "difficulty": 7
+  },
+  {
+    "category": [
+      "bar"
+    ],
+    "id": "bar-polar-label-radial",
+    "tags": [],
+    "title": "Radial Polar Bar Label Position",
+    "titleCN": "极坐标系径向柱状图的标签位置",
+    "difficulty": 7
+  },
+  {
+    "category": [
+      "bar"
+    ],
     "id": "bar-polar-stack",
     "tags": [],
-    "title": "Stacked Bar Chart on Polar",
-    "titleCN": "极坐标系下的堆叠柱状图",
+    "title": "Stacked Tangential Polar Bar",
+    "titleCN": "极坐标系切向堆积柱状图",
     "difficulty": 7
   },
   {
@@ -1624,8 +1644,8 @@
     ],
     "id": "bar-polar-stack-radial",
     "tags": [],
-    "title": "Stacked Bar Chart on Polar(Radial)",
-    "titleCN": "极坐标系下的堆叠柱状图",
+    "title": "Stacked Radial Polar Bar",
+    "titleCN": "极坐标系径向堆积柱状图",
     "difficulty": 7
   },
   {
diff --git a/tool/build-example.js b/tool/build-example.js
index 417634e..8b9a1aa 100644
--- a/tool/build-example.js
+++ b/tool/build-example.js
@@ -14,6 +14,7 @@
 const { compareImage } = require('../common/compareImage');
 const { runTasks } = require('../common/task');
 const nStatic = require('node-static');
+const shell = require('shelljs');
 
 function optionToJson(obj, prop) {
     let json = JSON.stringify(obj, function(key, value) {
@@ -62,6 +63,7 @@
 const DEFAULT_PAGE_WIDTH = 700;
 const DEFAULT_PAGE_RATIO = 0.75;
 const OUTPUT_IMAGE_WIDTH = 600;
+const OUTPUT_IMAGE_HEIGHT = OUTPUT_IMAGE_WIDTH * DEFAULT_PAGE_RATIO;
 
 const PORT = 3323;
 const BASE_URL = `http://localhost:${PORT}`;
@@ -86,17 +88,55 @@
     theme,
     rootDir,
     basename,
-    pageWidth,
-    screenshotDelay
+    // Shot parameters
+    { shotWidth, shotDelay, videoStart, videoEnd }
 ) {
     const thumbFolder = (theme !== 'default') ? ('thumb-' + theme) : 'thumb';
     const page = await browser.newPage();
+    const hasVideo = !isNaN(videoStart) && !isNaN(videoEnd) && +videoEnd > +videoStart;
+    const thumbDir = `${rootDir}public/${sourceFolder}/${thumbFolder}`;
+    const fileBase = `${thumbDir}/${basename}`;
+    const webmFile = `${fileBase}.webm`;
+
+    function checkDownloadFile() {
+        return new Promise(resolve => {
+            let timeout = 0
+            function check() {
+                if (fs.existsSync(webmFile)) {
+                    resolve();
+                    return;
+                }
+                timeout += 100;
+                if (timeout >= 20000 + +videoEnd) {
+                    console.error(fileBase + '.webm download timeout.');
+                    resolve();
+                    return;
+                }
+
+                setTimeout(check, 100);
+            }
+            setTimeout(check, 100);
+        });
+    }
+
+    let checkingDownload;
 
     await page.setViewport({
-        width: (pageWidth || DEFAULT_PAGE_WIDTH),
-        height: (pageWidth || DEFAULT_PAGE_WIDTH) * DEFAULT_PAGE_RATIO
+        width: (shotWidth || DEFAULT_PAGE_WIDTH),
+        height: (shotWidth || DEFAULT_PAGE_WIDTH) * DEFAULT_PAGE_RATIO
     });
-    const url = `${SCREENSHOT_PAGE_URL}?c=${basename}&s=${sourceFolder}&t=${theme}`;
+    let url = `${SCREENSHOT_PAGE_URL}?c=${basename}&t=${theme}&s=${sourceFolder}`;
+
+    if (hasVideo) {
+        url += `&start=${videoStart}&end=${videoEnd}`;
+        await page._client.send('Page.setDownloadBehavior', {
+            behavior: 'allow',
+            downloadPath: thumbDir
+        });
+
+        checkingDownload = checkDownloadFile();
+    }
+
     const resourceRootPath = `${BASE_URL}/public`;
     // console.log(url);
     await page.evaluateOnNewDocument(function (resourceRootPath) {
@@ -113,6 +153,7 @@
             console.log(chalk.gray(`PAGE LOG[${basename}]: ${text}`));
         }
     });
+
     console.log(`Generating ${theme} thumbs.....${basename}`);
     // https://stackoverflow.com/questions/46160929/puppeteer-wait-for-all-images-to-load-then-take-screenshot
     try {
@@ -127,9 +168,7 @@
             // Timeout
         }
         await waitTime(200);
-        await waitTime(screenshotDelay || 0);
-        const thumbDir = `${rootDir}public/${sourceFolder}/${thumbFolder}`;
-        const fileBase = `${thumbDir}/${basename}`;
+        await waitTime(shotDelay || 0);
         const filePathTmpRaw = `${fileBase}-tmp-raw.png`;
         const filePathTmp = `${fileBase}-tmp.png`;
         const filePath = `${fileBase}.png`;
@@ -155,9 +194,8 @@
             type: 'png'
         });
 
-
         await sharp(filePathTmpRaw)
-            .resize(OUTPUT_IMAGE_WIDTH, OUTPUT_IMAGE_WIDTH * DEFAULT_PAGE_RATIO)
+            .resize(OUTPUT_IMAGE_WIDTH, OUTPUT_IMAGE_HEIGHT)
             .toFile(filePathTmp);
 
         const {diffRatio} = await compareImage(filePath, filePathTmp, 0.1);
@@ -169,7 +207,9 @@
         else {
             console.log(diffRatio);
             fs.copyFileSync(filePathTmp, filePath);
-            await convertToWebP(filePath);
+            if (!hasVideo) {
+                await convertToWebP(filePath);
+            }
         }
 
         try {
@@ -179,6 +219,22 @@
 
         fs.unlinkSync(filePathTmpRaw);
         fs.unlinkSync(filePathTmp);
+
+        if (hasVideo) {
+            await checkingDownload;
+            // const ffmpeg = createFFmpeg({ log: true });
+            // await ffmpeg.load();
+            // ffmpeg.FS('writeFile', webmFile, await fetchFile(webmFile));
+            // await ffmpeg.run('-i', webmFile, '-f', 'webp', `${fileBase}.webp`);
+            // await fs.promises.writeFile('./test.mp4', ffmpeg.FS('readFile', `${fileBase}.webp`));
+            // ffmpeg.exit(0);
+            shell.exec(`ffmpeg -y -i ${fileBase}.webm -s ${OUTPUT_IMAGE_WIDTH}x${OUTPUT_IMAGE_HEIGHT} -f webp ${fileBase}.webp`);
+            try {
+                fs.unlinkSync(webmFile);
+            }
+            catch(e) {}
+        }
+
     }
     catch (e) {
         console.error(url);
@@ -286,8 +342,12 @@
                     theme,
                     rootDir,
                     basename,
-                    fmResult.data.shotWidth,
-                    fmResult.data.shotDelay
+                    {
+                        shotWidth: fmResult.data.shotWidth,
+                        shotDelay: fmResult.data.shotDelay,
+                        videoStart: fmResult.data.videoStart,
+                        videoEnd: fmResult.data.videoEnd,
+                    }
                 );
             }
         }
@@ -296,7 +356,7 @@
             await browser.close();
             throw new Error(e.toString());
         }
-    }, sourceFolder === 'data-gl' ? 2 : 16);
+    }, sourceFolder === 'data-gl' ? 2 : 4);
 
     if (BUILD_THUMBS) {
         server.close();
diff --git a/tool/screenshot.html b/tool/screenshot.html
index 44c9b5e..57b113a 100644
--- a/tool/screenshot.html
+++ b/tool/screenshot.html
@@ -6,7 +6,8 @@
     <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
     <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lodash@3.10.1/index.min.js"></script>
     <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/dat.gui@0.6.5/build/dat.gui.min.js"></script>
-    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.js"></script>
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-nightly/dist/echarts.js"></script>
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.js"></script>
     <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.0.0-alpha.2/map/js/china.js"></script>
     <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.0.0-alpha.2/map/js/world.js"></script>
     <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/extension/dataTool.js"></script>
@@ -39,26 +40,13 @@
     });
 
     var myChart = echarts.init(document.getElementById('viewport'), params.t || null);
-    // var _$oldSetOption = myChart.setOption;
-    // var _$finalOption;
-    // myChart.setOption = function (option, notMerge) {
-    //     if (!_$finalOption || notMerge === true || (notMerge && notMerge.notMerge)) {
-    //         _$finalOption = option;
-    //     }
-    //     else {
-    //         // TODO Should be same logic with echarts merge.
-    //         _$finalOption = echarts.util.merge(_$finalOption, option);
-    //     }
-
-    //     return _$oldSetOption.apply(this, arguments);
-    // }
     var _$getEChartsOption = function () {
         return myChart.getOption();
     }
     var app = {};
 </script>
 <script>
-    var myrng = new Math.seedrandom('echarts');
+    const myrng = new Math.seedrandom('echarts');
     Math.random = function () {
         return myrng();
     };
@@ -77,23 +65,24 @@
         });
     }
 
+    const isAnimated = !isNaN(params.start) && !isNaN(params.end) && +params.end > +params.start;
+
     echarts.registerPreprocessor(function (option) {
-        option.animation = false;
-        // option.textStyle = {
-        //     fontSize: 14
-        // };
-        if (option.series) {
-            if (!(option.series instanceof Array)) {
-                option.series = [option.series];
-            }
-            option.series.forEach(function (seriesOpt) {
-                if (seriesOpt.type === 'graph') {
-                    seriesOpt.force = seriesOpt.force || {};
-                    seriesOpt.force.layoutAnimation = false;
+        if (!isAnimated) {
+            option.animation = false;
+            if (option.series) {
+                if (!(option.series instanceof Array)) {
+                    option.series = [option.series];
                 }
-                seriesOpt.progressive = 1e5;
-                seriesOpt.animation = false;
-            });
+                option.series.forEach(function (seriesOpt) {
+                    if (seriesOpt.type === 'graph') {
+                        seriesOpt.force = seriesOpt.force || {};
+                        seriesOpt.force.layoutAnimation = false;
+                    }
+                    seriesOpt.progressive = 1e5;
+                    seriesOpt.animation = false;
+                });
+            }
         }
         addComponentPadding(option.title);
         addComponentPadding(option.legend);
@@ -106,18 +95,92 @@
             console.error('No ROOT_PATH specified. Use default ROOT_PATH "."');
             window.ROOT_PATH = '.';
         }
-        var sourceFolder = params.s || 'data';
-        var scriptTag = document.createElement('script');
+        const sourceFolder = params.s || 'data';
+        const scriptTag = document.createElement('script');
         scriptTag.async = false;
         scriptTag.src = `../public/${sourceFolder}/${params.c}.js`
         document.body.appendChild(scriptTag);
 
+        let videoRecorder;
         scriptTag.onload = function () {
+            if (isAnimated) {
+                videoRecorder = new VideoRecorder(myChart);
+                setTimeout(() => {
+                    videoRecorder.start();
+                }, +params.start);
+                setTimeout(() => {
+                    videoRecorder.stop();
+                }, +params.end);
+            }
+
             if (typeof option !== 'undefined' && option) {
                 myChart.setOption(option);
             }
         }
     }
+
+    function VideoRecorder(chart) {
+        this.start = startRecording;
+        this.stop = stopRecording;
+
+        var recorder = null;
+
+        var oldRefreshImmediately = chart.getZr().refreshImmediately;
+
+        function startRecording() {
+            // Normal resolution or high resolution?
+            var compositeCanvas = document.createElement('canvas');
+            var width = chart.getWidth();
+            var height = chart.getHeight();
+            compositeCanvas.width = width;
+            compositeCanvas.height = height;
+            var compositeCtx = compositeCanvas.getContext('2d');
+
+            chart.getZr().refreshImmediately = function () {
+                var ret = oldRefreshImmediately.apply(this, arguments);
+                var canvasList = chart.getDom().querySelectorAll('canvas');
+                compositeCtx.fillStyle = '#fff';
+                compositeCtx.fillRect(0, 0, width, height);
+                for (var i = 0; i < canvasList.length; i++) {
+                    compositeCtx.drawImage(canvasList[i], 0, 0, width, height);
+                }
+                return ret;
+            }
+
+            var stream = compositeCanvas.captureStream(25);
+            recorder = new MediaRecorder(stream, { mimeType: 'video/webm' });
+
+            var videoData = [];
+            recorder.ondataavailable = function (event) {
+                if (event.data && event.data.size) {
+                    videoData.push(event.data);
+                }
+            };
+
+            recorder.onstop = function () {
+                var url = URL.createObjectURL(new Blob(videoData, { type: 'video/webm' }));
+
+                var a = document.createElement('a');
+                a.href = url;
+                a.download = `${params.c}.webm`;
+                a.click();
+
+                setTimeout(function () {
+                    window.URL.revokeObjectURL(url);
+                }, 100);
+            };
+
+            recorder.start();
+        }
+
+        function stopRecording() {
+            if (recorder) {
+                chart.getZr().refreshImmediately = oldRefreshImmediately;
+                recorder.stop();
+            }
+        }
+    }
+
 </script>
 </body>
 </html>
\ No newline at end of file