You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by gi...@apache.org on 2021/07/21 12:25:45 UTC
[echarts-handbook] 01/01: Deploying to gh-pages from @ apache/echarts-handbook@712ad66885fbada59d0a1227664e6a2d414f0663 π
This is an automated email from the ASF dual-hosted git repository.
github-bot pushed a commit to branch gh-pages
in repository https://gitbox.apache.org/repos/asf/echarts-handbook.git
commit 10827d0380813606e791326607a58f3cd426ca55
Author: pissang <sh...@baidu.com>
AuthorDate: Wed Jul 21 12:25:32 2021 +0000
Deploying to gh-pages from @ apache/echarts-handbook@712ad66885fbada59d0a1227664e6a2d414f0663 π
---
docs/.nojekyll | 0
docs/200.html | 13 ++
docs/README.md | 11 ++
docs/_nuxt/LICENSES | 77 +++++++++++
docs/_nuxt/content/db-478abf80.json | 1 +
docs/_nuxt/css/1c37eb7.css | 1 +
docs/_nuxt/css/3883253.css | 1 +
docs/_nuxt/css/992028c.css | 4 +
docs/_nuxt/css/ecc35e1.css | 1 +
docs/_nuxt/d555ade.js | 1 +
docs/_nuxt/js/03856525ab568079735f.js | 2 +
docs/_nuxt/js/227a326587012a0180cb.js | 1 +
docs/_nuxt/js/36a706f43e83c550e01c.js | 1 +
docs/_nuxt/js/3c08457ca17807c1ba33.js | 1 +
docs/_nuxt/js/4b6ba5ecc0c117490f4c.js | 2 +
docs/_nuxt/js/5bbc04459a97c3582266.js | 1 +
docs/_nuxt/js/5f39294fb36cb7440d77.js | 2 +
docs/_nuxt/js/c88caa0eb12c7c76ce8d.js | 1 +
docs/_nuxt/js/f7582a0d6cf24ff5b8fe.js | 1 +
docs/_nuxt/js/f8156cdb730617900368.js | 1 +
.../1626870329/en/best-practice/aria/payload.js | 1 +
.../1626870329/en/best-practice/aria/state.js | 1 +
.../en/best-practice/canvas-vs-svg/payload.js | 1 +
.../en/best-practice/canvas-vs-svg/state.js | 1 +
.../static/1626870329/en/concepts/axis/payload.js | 1 +
.../static/1626870329/en/concepts/axis/state.js | 1 +
.../1626870329/en/concepts/chart-size/payload.js | 1 +
.../1626870329/en/concepts/chart-size/state.js | 1 +
.../en/concepts/data-transform/payload.js | 1 +
.../1626870329/en/concepts/data-transform/state.js | 1 +
.../1626870329/en/concepts/dataset/payload.js | 1 +
.../static/1626870329/en/concepts/dataset/state.js | 1 +
.../static/1626870329/en/concepts/event/payload.js | 1 +
.../static/1626870329/en/concepts/event/state.js | 1 +
.../1626870329/en/concepts/legend/payload.js | 1 +
.../static/1626870329/en/concepts/legend/state.js | 1 +
.../static/1626870329/en/get-started/payload.js | 1 +
.../static/1626870329/en/get-started/state.js | 1 +
.../1626870329/en/meta/edit-guide/payload.js | 1 +
.../static/1626870329/en/meta/edit-guide/state.js | 1 +
docs/_nuxt/static/1626870329/manifest.js | 1 +
docs/_nuxt/static/1626870329/payload.js | 1 +
docs/_nuxt/static/1626870329/state.js | 1 +
docs/_nuxt/static/1626870329/zh/payload.js | 1 +
docs/_nuxt/static/1626870329/zh/state.js | 1 +
docs/en/best-practice/aria/index.html | 29 +++++
docs/en/best-practice/canvas-vs-svg/index.html | 39 ++++++
docs/en/concepts/axis/index.html | 53 ++++++++
docs/en/concepts/chart-size/index.html | 42 ++++++
docs/en/concepts/data-transform/index.html | 133 +++++++++++++++++++
docs/en/concepts/dataset/index.html | 141 +++++++++++++++++++++
docs/en/concepts/event/index.html | 59 +++++++++
docs/en/concepts/legend/index.html | 59 +++++++++
docs/en/get-started/index.html | 13 ++
docs/en/meta/edit-guide/index.html | 108 ++++++++++++++++
docs/favicon.ico | Bin 0 -> 1393 bytes
docs/images/demo.png | Bin 0 -> 25960 bytes
docs/images/design/axis/charts_axis_img01.jpg | Bin 0 -> 52533 bytes
docs/images/design/axis/charts_axis_img02.jpg | Bin 0 -> 108274 bytes
docs/images/design/axis/charts_axis_img02.png | Bin 0 -> 48183 bytes
docs/images/design/axis/charts_axis_img04.png | Bin 0 -> 35306 bytes
docs/images/design/axis/charts_axis_img05.png | Bin 0 -> 127743 bytes
docs/images/design/axis/charts_axis_img07.png | Bin 0 -> 35872 bytes
docs/images/design/axis/charts_axis_img10.png | Bin 0 -> 101322 bytes
docs/images/design/axis/charts_axis_img12.png | Bin 0 -> 121293 bytes
docs/images/design/bar/bar01.jpg | Bin 0 -> 84318 bytes
docs/images/design/bar/bar02.jpg | Bin 0 -> 75564 bytes
docs/images/design/bar/bar03.jpg | Bin 0 -> 91679 bytes
docs/images/design/bar/bar04.jpg | Bin 0 -> 70479 bytes
.../bi-directional-bar/bi-directional-bar01.jpg | Bin 0 -> 75564 bytes
.../bi-directional-bar/bi-directional-bar02.jpg | Bin 0 -> 86140 bytes
docs/images/design/color/color01.png | Bin 0 -> 46913 bytes
docs/images/design/color/color02.png | Bin 0 -> 801126 bytes
docs/images/design/color/color03.png | Bin 0 -> 24856 bytes
docs/images/design/color/color04.png | Bin 0 -> 71418 bytes
docs/images/design/legend/charts_sign_img01.png | Bin 0 -> 57372 bytes
docs/images/design/legend/charts_sign_img02.png | Bin 0 -> 35627 bytes
docs/images/design/legend/charts_sign_img03.png | Bin 0 -> 33294 bytes
docs/images/design/legend/charts_sign_img04.png | Bin 0 -> 18736 bytes
docs/images/design/line/line01.jpg | Bin 0 -> 89525 bytes
docs/images/design/pie/pie01.jpg | Bin 0 -> 176305 bytes
docs/images/design/pie/pie02.jpg | Bin 0 -> 167844 bytes
docs/images/design/pie/pie03.jpg | Bin 0 -> 141965 bytes
docs/images/design/pie/pie04.jpg | Bin 0 -> 76093 bytes
docs/images/design/scatter/scatter5.jpg | Bin 0 -> 99795 bytes
docs/images/feature-v5/dashboard-pointer.png | Bin 0 -> 238230 bytes
docs/images/feature-v5/dataZoom.png | Bin 0 -> 14459 bytes
docs/images/feature-v5/dirty-rect.gif | Bin 0 -> 1618036 bytes
docs/images/feature-v5/dirty-rect.png | Bin 0 -> 802179 bytes
docs/images/feature-v5/echarts-5-en.png | Bin 0 -> 24363 bytes
docs/images/feature-v5/echarts-5.png | Bin 0 -> 24106 bytes
docs/images/feature-v5/gauge-pointer.png | Bin 0 -> 238230 bytes
docs/images/feature-v5/new-theme-dark.png | Bin 0 -> 101643 bytes
docs/images/feature-v5/new-theme-light.png | Bin 0 -> 99276 bytes
docs/images/feature-v5/new-tooltip-2 copy.png | Bin 0 -> 52109 bytes
docs/images/feature-v5/new-tooltip-2.png | Bin 0 -> 173904 bytes
docs/images/feature-v5/new-tooltip.png | Bin 0 -> 26152 bytes
docs/images/feature-v5/new-tooltip2.png | Bin 0 -> 52109 bytes
docs/images/feature-v5/pie-label copy.png | Bin 0 -> 56479 bytes
docs/images/feature-v5/pie-label-2.png | Bin 0 -> 53964 bytes
docs/images/feature-v5/pie-label.png | Bin 0 -> 56479 bytes
docs/images/feature-v5/theme-color.png | Bin 0 -> 543699 bytes
docs/images/feature-v5/time-axis-2.png | Bin 0 -> 55882 bytes
docs/images/feature-v5/time-axis.png | Bin 0 -> 69868 bytes
docs/images/feature-v5/time-axis2.png | Bin 0 -> 55620 bytes
docs/images/feature-v5/timeline.png | Bin 0 -> 23411 bytes
docs/index.html | 15 +++
docs/zh/index.html | 15 +++
108 files changed, 854 insertions(+)
diff --git a/docs/.nojekyll b/docs/.nojekyll
new file mode 100644
index 0000000..e69de29
diff --git a/docs/200.html b/docs/200.html
new file mode 100644
index 0000000..7240db8
--- /dev/null
+++ b/docs/200.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html>
+ <head>
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="1" charset="utf-8"><meta data-n-head="1" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="1" data-hid="description" name="description" content="ECharts Handbook"><link data-n-head="1" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><base href="/echarts-handbook/"><link rel="preload" href="/echarts-handbook/_nuxt/d555ade. [...]
+ <link href="/echarts-handbook/_nuxt/css/992028c.css" rel="stylesheet"><link href="/echarts-handbook/_nuxt/css/3883253.css" rel="stylesheet"></head>
+ <body>
+ <div id="__nuxt"><style>#nuxt-loading{background:#fff;visibility:hidden;opacity:0;position:absolute;left:0;right:0;top:0;bottom:0;display:flex;justify-content:center;align-items:center;flex-direction:column;animation:nuxtLoadingIn 10s ease;-webkit-animation:nuxtLoadingIn 10s ease;animation-fill-mode:forwards;overflow:hidden}@keyframes nuxtLoadingIn{0%{visibility:hidden;opacity:0}20%{visibility:visible;opacity:0}100%{visibility:visible;opacity:1}}@-webkit-keyframes nuxtLoadingIn{0 [...]
+ <script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
+ <script src="/echarts-handbook/_nuxt/d555ade.js"></script><script src="/echarts-handbook/_nuxt/js/4b6ba5ecc0c117490f4c.js"></script><script src="/echarts-handbook/_nuxt/js/5f39294fb36cb7440d77.js"></script><script src="/echarts-handbook/_nuxt/js/f8156cdb730617900368.js"></script></body>
+</html>
diff --git a/docs/README.md b/docs/README.md
new file mode 100644
index 0000000..cf00435
--- /dev/null
+++ b/docs/README.md
@@ -0,0 +1,11 @@
+# STATIC
+
+**This directory is not required, you can delete it if you don't want to use it.**
+
+This directory contains your static files.
+Each file inside this directory is mapped to `/`.
+Thus you'd want to delete this README.md before deploying to production.
+
+Example: `/static/robots.txt` is mapped as `/robots.txt`.
+
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#static).
diff --git a/docs/_nuxt/LICENSES b/docs/_nuxt/LICENSES
new file mode 100644
index 0000000..7ac5b1a
--- /dev/null
+++ b/docs/_nuxt/LICENSES
@@ -0,0 +1,77 @@
+/*!
+ * clipboard.js v2.0.8
+ * https://clipboardjs.com/
+ *
+ * Licensed MIT Β© Zeno Rocha
+ */
+
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+/**
+ * Prism: Lightweight, robust, elegant syntax highlighting
+ *
+ * @license MIT <https://opensource.org/licenses/MIT>
+ * @author Lea Verou <https://lea.verou.me>
+ * @namespace
+ * @public
+ */
+
+
+/*!
+ * vue-router v3.5.1
+ * (c) 2021 Evan You
+ * @license MIT
+ */
+
+/*!
+ * JavaScript Cookie v2.2.1
+ * https://github.com/js-cookie/js-cookie
+ *
+ * Copyright 2006, 2015 Klaus Hartl & Fagner Brack
+ * Released under the MIT license
+ */
+
+/*!
+ * Vue.js v2.6.12
+ * (c) 2014-2020 Evan You
+ * Released under the MIT License.
+ */
+
+/*!
+ * cookie
+ * Copyright(c) 2012-2014 Roman Shtylman
+ * Copyright(c) 2015 Douglas Christopher Wilson
+ * MIT Licensed
+ */
+
+/*!
+ * vuex v3.6.2
+ * (c) 2021 Evan You
+ * @license MIT
+ */
+
+
+/*!
+ * vue-client-only v2.0.0
+ * (c) 2019-present egoist <0x...@gmail.com>
+ * Released under the MIT License.
+ */
+
+/*!
+ * vue-no-ssr v1.1.1
+ * (c) 2018-present egoist <0x...@gmail.com>
+ * Released under the MIT License.
+ */
diff --git a/docs/_nuxt/content/db-478abf80.json b/docs/_nuxt/content/db-478abf80.json
new file mode 100644
index 0000000..7d73aad
--- /dev/null
+++ b/docs/_nuxt/content/db-478abf80.json
@@ -0,0 +1 @@
+{"_env":"NODEJS","_serializationMethod":"normal","_autosave":false,"_autosaveInterval":5000,"_collections":[{"name":"items","unindexedSortComparator":"js","defaultLokiOperatorPackage":"js","_dynamicViews":[],"uniqueNames":[],"transforms":{},"rangedIndexes":{},"_data":[{"slug":"get-started","toc":[],"body":{"type":"root","children":[]},"text":"","dir":"/en","path":"/en/get-started","extension":".md","createdAt":"2021-07-21T12:24:12.726Z","updatedAt":"2021-07-21T12:24:12.726Z","meta":{"ver [...]
\ No newline at end of file
diff --git a/docs/_nuxt/css/1c37eb7.css b/docs/_nuxt/css/1c37eb7.css
new file mode 100644
index 0000000..193b900
--- /dev/null
+++ b/docs/_nuxt/css/1c37eb7.css
@@ -0,0 +1 @@
+.prism-editor-wrapper{width:100%;height:100%;display:flex;align-items:flex-start;overflow:auto;-o-tab-size:1.5em;tab-size:1.5em;-moz-tab-size:1.5em}@media (-ms-high-contrast:active),(-ms-high-contrast:none){.prism-editor-wrapper .prism-editor__textarea{color:transparent!important}.prism-editor-wrapper .prism-editor__textarea::-moz-selection{background-color:#accef7!important;color:transparent!important}.prism-editor-wrapper .prism-editor__textarea::selection{background-color:#accef7!impo [...]
\ No newline at end of file
diff --git a/docs/_nuxt/css/3883253.css b/docs/_nuxt/css/3883253.css
new file mode 100644
index 0000000..281be17
--- /dev/null
+++ b/docs/_nuxt/css/3883253.css
@@ -0,0 +1 @@
+.page-content .nav-item{cursor:pointer}.page-content .nav-item .nav-link{--tw-text-opacity:1;color:rgba(100,116,139,var(--tw-text-opacity))}.page-content .nav-item .title{padding:2px 6px}.page-content .nav-item.actived .nav-link{color:#5470c6}.page-content .nav-item .nav-link:hover>.title{background:#efefef;border-radius:3px}.page-content .nav-item .glyphicon{padding:5px;color:#ccc;cursor:pointer;transform:scale(.8);top:2px;left:-5px}.bd-sidebar{padding:10px;position:sticky;z-index:1000; [...]
\ No newline at end of file
diff --git a/docs/_nuxt/css/992028c.css b/docs/_nuxt/css/992028c.css
new file mode 100644
index 0000000..74cccc2
--- /dev/null
+++ b/docs/_nuxt/css/992028c.css
@@ -0,0 +1,4 @@
+.__nuxt-error-page{padding:1rem;background:#f7f8fb;color:#47494e;text-align:center;display:flex;justify-content:center;align-items:center;flex-direction:column;font-family:sans-serif;font-weight:100!important;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;position:absolute;top:0;left:0;right:0;bottom:0}.__nuxt-error-page .error{max-width:450px}.__nuxt-error-page .title{font-size:1.5rem;margin-top:15px;color:#47494e;margin-bottom:8px}.__nuxt-err [...]
+/*! tailwindcss v2.1.3 | MIT License | https://tailwindcss.com*/
+
+/*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */html{-moz-tab-size:4;-o-tab-size:4;tab-size:4;line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji}hr{height:0;color:inherit}abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monos [...]
\ No newline at end of file
diff --git a/docs/_nuxt/css/ecc35e1.css b/docs/_nuxt/css/ecc35e1.css
new file mode 100644
index 0000000..03262c0
--- /dev/null
+++ b/docs/_nuxt/css/ecc35e1.css
@@ -0,0 +1 @@
+.md-alert[data-v-a47f983e]{border-radius:.5rem;border-left-width:4px}.md-alert-info[data-v-a47f983e]{--tw-bg-opacity:1;background-color:rgba(219,234,254,var(--tw-bg-opacity));--tw-border-opacity:1;border-color:rgba(96,165,250,var(--tw-border-opacity))}.md-alert-info code[data-v-a47f983e]{--tw-bg-opacity:1;background-color:rgba(191,219,254,var(--tw-bg-opacity));border-width:0;--tw-shadow:0 0 transparent;box-shadow:var(--tw-ring-offset-shadow,0 0 transparent),var(--tw-ring-shadow,0 0 trans [...]
\ No newline at end of file
diff --git a/docs/_nuxt/d555ade.js b/docs/_nuxt/d555ade.js
new file mode 100644
index 0000000..51f34ef
--- /dev/null
+++ b/docs/_nuxt/d555ade.js
@@ -0,0 +1 @@
+!function(e){function t(data){for(var t,n,o=data[0],f=data[1],d=data[2],i=0,h=[];i<o.length;i++)n=o[i],Object.prototype.hasOwnProperty.call(c,n)&&c[n]&&h.push(c[n][0]),c[n]=0;for(t in f)Object.prototype.hasOwnProperty.call(f,t)&&(e[t]=f[t]);for(m&&m(data);h.length;)h.shift()();return l.push.apply(l,d||[]),r()}function r(){for(var e,i=0;i<l.length;i++){for(var t=l[i],r=!0,n=1;n<t.length;n++){var o=t[n];0!==c[o]&&(r=!1)}r&&(l.splice(i--,1),e=f(f.s=t[0]))}return e}var n={},o={7:0},c={7:0},l [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/03856525ab568079735f.js b/docs/_nuxt/js/03856525ab568079735f.js
new file mode 100644
index 0000000..d4c93d6
--- /dev/null
+++ b/docs/_nuxt/js/03856525ab568079735f.js
@@ -0,0 +1,2 @@
+/*! For license information please see ../LICENSES */
+(window.webpackJsonp=window.webpackJsonp||[]).push([[1],{204:function(e,t,n){"use strict";n.d(t,"a",(function(){return we})),n.d(t,"c",(function(){return Ce})),n.d(t,"d",(function(){return fe})),n.d(t,"e",(function(){return de})),n.d(t,"f",(function(){return V})),n.d(t,"g",(function(){return ee})),n.d(t,"h",(function(){return _e}));var r=n(0);function o(e){return"function"==typeof e&&/native code/.test(e.toString())}var l="undefined"!=typeof Symbol&&o(Symbol)&&"undefined"!=typeof Reflect [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/227a326587012a0180cb.js b/docs/_nuxt/js/227a326587012a0180cb.js
new file mode 100644
index 0000000..03dfba2
--- /dev/null
+++ b/docs/_nuxt/js/227a326587012a0180cb.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[6],{263:function(t,e,n){"use strict";n.r(e);var r=n(2),c=(n(20),n(0)),o=(n(216),n(217)),l=c.default.extend({components:{Contributors:o.a},mounted:function(){this.$store.commit("setLocale","zh")},asyncData:function(t){return Object(r.a)(regeneratorRuntime.mark((function e(){var n,r,c,article;return regeneratorRuntime.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return n=t.$content,r=t.params,c="zh/".concat(r.pathMatch),e.next=4 [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/36a706f43e83c550e01c.js b/docs/_nuxt/js/36a706f43e83c550e01c.js
new file mode 100644
index 0000000..ad30b92
--- /dev/null
+++ b/docs/_nuxt/js/36a706f43e83c550e01c.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[0],{205:function(t,n,e){t.exports={}},212:function(t,n,e){t.exports={}},213:function(t,n,e){t.exports={}},214:function(t,n,e){t.exports={}},215:function(t,n,e){t.exports={}},216:function(t,n,e){"use strict";var c=e(0),o=e(204),r=(e(154),e(40),e(105)),l=Object(o.c)({props:{width:{type:[String,Number],default:"100%"},height:{type:[String,Number],default:"350"},src:String},setup:function(t,n){return{fullSrc:Object(o.a)((function(){return [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/3c08457ca17807c1ba33.js b/docs/_nuxt/js/3c08457ca17807c1ba33.js
new file mode 100644
index 0000000..c29eff5
--- /dev/null
+++ b/docs/_nuxt/js/3c08457ca17807c1ba33.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[10],{259:function(e,t,r){"use strict";r.r(t);var n="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ_$",o=/[<>\b\f\n\r\t\0\u2028\u2029]/g,c=/^(?:do|if|in|for|int|let|new|try|var|byte|case|char|else|enum|goto|long|this|void|with|await|break|catch|class|const|final|float|short|super|throw|while|yield|delete|double|export|import|native|return|switch|throws|typeof|boolean|default|extends|finally|package|private|abstract|continue|debugg [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/4b6ba5ecc0c117490f4c.js b/docs/_nuxt/js/4b6ba5ecc0c117490f4c.js
new file mode 100644
index 0000000..250254c
--- /dev/null
+++ b/docs/_nuxt/js/4b6ba5ecc0c117490f4c.js
@@ -0,0 +1,2 @@
+/*! For license information please see ../LICENSES */
+(window.webpackJsonp=window.webpackJsonp||[]).push([[3],[function(t,e,n){"use strict";n.r(e),function(t,n){var r=Object.freeze({});function o(t){return null==t}function c(t){return null!=t}function f(t){return!0===t}function l(t){return"string"==typeof t||"number"==typeof t||"symbol"==typeof t||"boolean"==typeof t}function h(t){return null!==t&&"object"==typeof t}var d=Object.prototype.toString;function v(t){return"[object Object]"===d.call(t)}function y(t){return"[object RegExp]"===d.ca [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/5bbc04459a97c3582266.js b/docs/_nuxt/js/5bbc04459a97c3582266.js
new file mode 100644
index 0000000..9a817a1
--- /dev/null
+++ b/docs/_nuxt/js/5bbc04459a97c3582266.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[5],{261:function(n,e,t){"use strict";t.r(e);var r=t(2),c=(t(20),{asyncData:function(){return Object(r.a)(regeneratorRuntime.mark((function n(){return regeneratorRuntime.wrap((function(n){for(;;)switch(n.prev=n.next){case 0:case"end":return n.stop()}}),n)})))()}}),o=t(8),component=Object(o.a)(c,(function(){var n=this,e=n.$createElement;return(n._self._c||e)("div",[n._v("\n this is index\n")])}),[],!1,null,null,null);e.default=component [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/5f39294fb36cb7440d77.js b/docs/_nuxt/js/5f39294fb36cb7440d77.js
new file mode 100644
index 0000000..833d4de
--- /dev/null
+++ b/docs/_nuxt/js/5f39294fb36cb7440d77.js
@@ -0,0 +1,2 @@
+/*! For license information please see ../LICENSES */
+(window.webpackJsonp=window.webpackJsonp||[]).push([[8],{1:function(e,t,n){"use strict";n.d(t,"d",(function(){return _})),n.d(t,"l",(function(){return w})),n.d(t,"n",(function(){return x})),n.d(t,"m",(function(){return O})),n.d(t,"f",(function(){return k})),n.d(t,"b",(function(){return S})),n.d(t,"s",(function(){return C})),n.d(t,"h",(function(){return j})),n.d(t,"i",(function(){return P})),n.d(t,"e",(function(){return $})),n.d(t,"r",(function(){return L})),n.d(t,"k",(function(){return R [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/c88caa0eb12c7c76ce8d.js b/docs/_nuxt/js/c88caa0eb12c7c76ce8d.js
new file mode 100644
index 0000000..b071e4a
--- /dev/null
+++ b/docs/_nuxt/js/c88caa0eb12c7c76ce8d.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[4],{262:function(t,e,n){"use strict";n.r(e);var r=n(2),c=(n(20),n(0)),o=(n(216),n(217)),l=c.default.extend({components:{Contributors:o.a},mounted:function(){this.$store.commit("setLocale","en")},asyncData:function(t){return Object(r.a)(regeneratorRuntime.mark((function e(){var n,r,c,article;return regeneratorRuntime.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return n=t.$content,r=t.params,c="en/".concat(r.pathMatch),e.next=4 [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/f7582a0d6cf24ff5b8fe.js b/docs/_nuxt/js/f7582a0d6cf24ff5b8fe.js
new file mode 100644
index 0000000..f004413
--- /dev/null
+++ b/docs/_nuxt/js/f7582a0d6cf24ff5b8fe.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[9],{248:function(e,t,n){var r=n(249),o=n(250),l=n(251),h=n(252),c=n(253);function d(e,t){var n="undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(!n){if(Array.isArray(e)||(n=function(e,t){if(!e)return;if("string"==typeof e)return f(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(e);if("Arguments"===n||/^(?:Ui|I)nt(?:8| [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/f8156cdb730617900368.js b/docs/_nuxt/js/f8156cdb730617900368.js
new file mode 100644
index 0000000..aded919
--- /dev/null
+++ b/docs/_nuxt/js/f8156cdb730617900368.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[2],{105:function(t,e,r){"use strict";var l={gh:{routerBase:"/echarts-handbook",rootPath:"https://apache.github.io/echarts-handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},asf:{routerBase:"/han [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1626870329/en/best-practice/aria/payload.js b/docs/_nuxt/static/1626870329/en/best-practice/aria/payload.js
new file mode 100644
index 0000000..b8db4c1
--- /dev/null
+++ b/docs/_nuxt/static/1626870329/en/best-practice/aria/payload.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("/en/best-practice/aria", (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F){return {data:[{article:{slug:"aria",toc:[{id:s,depth:t,text:u},{id:v,depth:t,text:w}],body:{type:"root",children:[{type:b,tag:"h1",props:{id:"web-accessibility"},children:[{type:b,tag:d,props:{href:"#web-accessibility",ariaHidden:k,tabIndex:m},children:[{type:b,tag:n,props:{className:[o,p]},children:[]}]},{type:a,value:"Web Accessibility"}]},{type:a,value:c},{type:b,tag:e,p [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1626870329/en/best-practice/aria/state.js b/docs/_nuxt/static/1626870329/en/best-practice/aria/state.js
new file mode 100644
index 0000000..171ad15
--- /dev/null
+++ b/docs/_nuxt/static/1626870329/en/best-practice/aria/state.js
@@ -0,0 +1 @@
+window.__NUXT__=(function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,_,$,aa,ab,ac,ad,ae,af,ag,ah,ai,aj,ak,al){return {staticAssetsBase:"\u002Fecharts-handbook\u002F_nuxt\u002Fstatic\u002F1626870329",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,locale:"en",lang:{},menu:{},homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"εΏ«ιδΈζ",dir:g},{title:"ε
₯ι¨η―",dir:h,children:[{title:"θ·ε ECharts",dir:i} [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1626870329/en/best-practice/canvas-vs-svg/payload.js b/docs/_nuxt/static/1626870329/en/best-practice/canvas-vs-svg/payload.js
new file mode 100644
index 0000000..d1c0529
--- /dev/null
+++ b/docs/_nuxt/static/1626870329/en/best-practice/canvas-vs-svg/payload.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("/en/best-practice/canvas-vs-svg", (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C){return {data:[{article:{slug:"canvas-vs-svg",toc:[{id:v,depth:w,text:x},{id:y,depth:w,text:z}],body:{type:"root",children:[{type:b,tag:"h1",props:{id:"render-with-svg-or-canvas"},children:[{type:b,tag:d,props:{href:"#render-with-svg-or-canvas",ariaHidden:l,tabIndex:m},children:[{type:b,tag:n,props:{className:[o,p]},children:[]}]},{type:a,value:"Render with SVG or Canvas" [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1626870329/en/best-practice/canvas-vs-svg/state.js b/docs/_nuxt/static/1626870329/en/best-practice/canvas-vs-svg/state.js
new file mode 100644
index 0000000..c5877fe
--- /dev/null
+++ b/docs/_nuxt/static/1626870329/en/best-practice/canvas-vs-svg/state.js
@@ -0,0 +1 @@
+window.__NUXT__=(function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,_,$,aa,ab,ac,ad,ae,af,ag,ah,ai,aj,ak,al){return {staticAssetsBase:"\u002Fecharts-handbook\u002F_nuxt\u002Fstatic\u002F1626870329",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,locale:"en",lang:{},menu:{},homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"εΏ«ιδΈζ",dir:g},{title:"ε
₯ι¨η―",dir:h,children:[{title:"θ·ε ECharts",dir:i} [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1626870329/en/concepts/axis/payload.js b/docs/_nuxt/static/1626870329/en/concepts/axis/payload.js
new file mode 100644
index 0000000..82235ce
--- /dev/null
+++ b/docs/_nuxt/static/1626870329/en/concepts/axis/payload.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("/en/concepts/axis", (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L){return {data:[{article:{slug:x,toc:[{id:y,depth:k,text:z},{id:A,depth:k,text:B},{id:C,depth:k,text:D},{id:E,depth:k,text:F},{id:G,depth:k,text:H}],body:{type:"root",children:[{type:b,tag:"h1",props:{id:x},children:[{type:b,tag:e,props:{href:"#axis",ariaHidden:l,tabIndex:m},children:[{type:b,tag:n,props:{className:[o,p]},children:[]}]},{type:a,value:"Axis"}]},{type:a, [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1626870329/en/concepts/axis/state.js b/docs/_nuxt/static/1626870329/en/concepts/axis/state.js
new file mode 100644
index 0000000..afe0119
--- /dev/null
+++ b/docs/_nuxt/static/1626870329/en/concepts/axis/state.js
@@ -0,0 +1 @@
+window.__NUXT__=(function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,_,$,aa,ab,ac,ad,ae,af,ag,ah,ai,aj,ak,al){return {staticAssetsBase:"\u002Fecharts-handbook\u002F_nuxt\u002Fstatic\u002F1626870329",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,locale:"en",lang:{},menu:{},homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"εΏ«ιδΈζ",dir:g},{title:"ε
₯ι¨η―",dir:h,children:[{title:"θ·ε ECharts",dir:i} [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1626870329/en/concepts/chart-size/payload.js b/docs/_nuxt/static/1626870329/en/concepts/chart-size/payload.js
new file mode 100644
index 0000000..8dabea6
--- /dev/null
+++ b/docs/_nuxt/static/1626870329/en/concepts/chart-size/payload.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("/en/concepts/chart-size", (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S){return {data:[{article:{slug:"chart-size",toc:[{id:y,depth:z,text:A},{id:B,depth:q,text:C},{id:D,depth:q,text:E},{id:F,depth:z,text:G},{id:H,depth:q,text:I},{id:J,depth:q,text:K},{id:L,depth:q,text:M}],body:{type:"root",children:[{type:b,tag:"h1",props:{id:"chart-container-and-size"},children:[{type:b,tag:d,props:{href:"#chart-container-and-size", [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1626870329/en/concepts/chart-size/state.js b/docs/_nuxt/static/1626870329/en/concepts/chart-size/state.js
new file mode 100644
index 0000000..52cac9b
--- /dev/null
+++ b/docs/_nuxt/static/1626870329/en/concepts/chart-size/state.js
@@ -0,0 +1 @@
+window.__NUXT__=(function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,_,$,aa,ab,ac,ad,ae,af,ag,ah,ai,aj,ak,al){return {staticAssetsBase:"\u002Fecharts-handbook\u002F_nuxt\u002Fstatic\u002F1626870329",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,locale:"en",lang:{},menu:{},homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"εΏ«ιδΈζ",dir:g},{title:"ε
₯ι¨η―",dir:h,children:[{title:"θ·ε ECharts",dir:i} [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1626870329/en/concepts/data-transform/payload.js b/docs/_nuxt/static/1626870329/en/concepts/data-transform/payload.js
new file mode 100644
index 0000000..24b3c8b
--- /dev/null
+++ b/docs/_nuxt/static/1626870329/en/concepts/data-transform/payload.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("/en/concepts/data-transform", (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,_,$,aa,ab,ac,ad,ae,af,ag,ah,ai,aj,ak,al,am,an,ao,ap,aq){return {data:[{article:{slug:N,toc:[{id:O,depth:z,text:P},{id:Q,depth:z,text:R},{id:S,depth:z,text:T},{id:U,depth:z,text:V},{id:W,depth:z,text:X}],body:{type:"root",children:[{type:b,tag:"h1",props:{id:N},children:[{type:b,tag:h,props:{href:"#data-transform",ariaHidden:r,tabI [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1626870329/en/concepts/data-transform/state.js b/docs/_nuxt/static/1626870329/en/concepts/data-transform/state.js
new file mode 100644
index 0000000..34866fb
--- /dev/null
+++ b/docs/_nuxt/static/1626870329/en/concepts/data-transform/state.js
@@ -0,0 +1 @@
+window.__NUXT__=(function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,_,$,aa,ab,ac,ad,ae,af,ag,ah,ai,aj,ak,al){return {staticAssetsBase:"\u002Fecharts-handbook\u002F_nuxt\u002Fstatic\u002F1626870329",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,locale:"en",lang:{},menu:{},homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"εΏ«ιδΈζ",dir:g},{title:"ε
₯ι¨η―",dir:h,children:[{title:"θ·ε ECharts",dir:i} [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1626870329/en/concepts/dataset/payload.js b/docs/_nuxt/static/1626870329/en/concepts/dataset/payload.js
new file mode 100644
index 0000000..9a5cd27
--- /dev/null
+++ b/docs/_nuxt/static/1626870329/en/concepts/dataset/payload.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("/en/concepts/dataset", (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,_,$,aa,ab,ac,ad,ae,af,ag,ah,ai,aj,ak,al,am,an,ao,ap,aq,ar,as,at,au,av,aw){return {data:[{article:{slug:q,toc:[{id:P,depth:x,text:"Define data under series"},{id:Q,depth:x,text:"Define data in dataset"},{id:R,depth:x,text:S},{id:T,depth:x,text:"Map Row or Column of dataset to series"},{id:U,depth:x,text:V},{id:W,depth:x,text:X},{id:Y,dept [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1626870329/en/concepts/dataset/state.js b/docs/_nuxt/static/1626870329/en/concepts/dataset/state.js
new file mode 100644
index 0000000..207e4bc
--- /dev/null
+++ b/docs/_nuxt/static/1626870329/en/concepts/dataset/state.js
@@ -0,0 +1 @@
+window.__NUXT__=(function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,_,$,aa,ab,ac,ad,ae,af,ag,ah,ai,aj,ak,al){return {staticAssetsBase:"\u002Fecharts-handbook\u002F_nuxt\u002Fstatic\u002F1626870329",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,locale:"en",lang:{},menu:{},homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"εΏ«ιδΈζ",dir:g},{title:"ε
₯ι¨η―",dir:h,children:[{title:"θ·ε ECharts",dir:i} [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1626870329/en/concepts/event/payload.js b/docs/_nuxt/static/1626870329/en/concepts/event/payload.js
new file mode 100644
index 0000000..4bb3b05
--- /dev/null
+++ b/docs/_nuxt/static/1626870329/en/concepts/event/payload.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("/en/concepts/event", (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O){return {data:[{article:{slug:"event",toc:[{id:A,depth:r,text:B},{id:C,depth:r,text:D},{id:E,depth:r,text:F},{id:G,depth:r,text:H}],body:{type:"root",children:[{type:b,tag:"h1",props:{id:"event-and-action"},children:[{type:b,tag:k,props:{href:"#event-and-action",ariaHidden:m,tabIndex:n},children:[{type:b,tag:o,props:{className:[p,q]},children:[]}]},{type:a,valu [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1626870329/en/concepts/event/state.js b/docs/_nuxt/static/1626870329/en/concepts/event/state.js
new file mode 100644
index 0000000..773bac5
--- /dev/null
+++ b/docs/_nuxt/static/1626870329/en/concepts/event/state.js
@@ -0,0 +1 @@
+window.__NUXT__=(function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,_,$,aa,ab,ac,ad,ae,af,ag,ah,ai,aj,ak,al){return {staticAssetsBase:"\u002Fecharts-handbook\u002F_nuxt\u002Fstatic\u002F1626870329",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,locale:"en",lang:{},menu:{},homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"εΏ«ιδΈζ",dir:g},{title:"ε
₯ι¨η―",dir:h,children:[{title:"θ·ε ECharts",dir:i} [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1626870329/en/concepts/legend/payload.js b/docs/_nuxt/static/1626870329/en/concepts/legend/payload.js
new file mode 100644
index 0000000..1be49ab
--- /dev/null
+++ b/docs/_nuxt/static/1626870329/en/concepts/legend/payload.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("/en/concepts/legend", (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H){return {data:[{article:{slug:w,toc:[{id:x,depth:r,text:y},{id:z,depth:r,text:A},{id:B,depth:r,text:C},{id:D,depth:r,text:E},{id:F,depth:r,text:G}],body:{type:"root",children:[{type:b,tag:"h1",props:{id:w},children:[{type:b,tag:f,props:{href:"#legend",ariaHidden:g,tabIndex:h},children:[{type:b,tag:i,props:{className:[j,k]},children:[]}]},{type:a,value:"Legend"}]},{type:a,va [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1626870329/en/concepts/legend/state.js b/docs/_nuxt/static/1626870329/en/concepts/legend/state.js
new file mode 100644
index 0000000..b4b91b0
--- /dev/null
+++ b/docs/_nuxt/static/1626870329/en/concepts/legend/state.js
@@ -0,0 +1 @@
+window.__NUXT__=(function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,_,$,aa,ab,ac,ad,ae,af,ag,ah,ai,aj,ak,al){return {staticAssetsBase:"\u002Fecharts-handbook\u002F_nuxt\u002Fstatic\u002F1626870329",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,locale:"en",lang:{},menu:{},homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"εΏ«ιδΈζ",dir:g},{title:"ε
₯ι¨η―",dir:h,children:[{title:"θ·ε ECharts",dir:i} [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1626870329/en/get-started/payload.js b/docs/_nuxt/static/1626870329/en/get-started/payload.js
new file mode 100644
index 0000000..69d7aeb
--- /dev/null
+++ b/docs/_nuxt/static/1626870329/en/get-started/payload.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("/en/get-started", (function(a){return {data:[{article:{slug:"get-started",toc:[],body:{type:"root",children:[]},dir:"\u002Fen",path:"\u002Fen\u002Fget-started",extension:".md",createdAt:a,updatedAt:a},postPath:"en\u002Fget-started"}],fetch:{},mutations:[]}}("2021-07-21T12:24:12.726Z")));
\ No newline at end of file
diff --git a/docs/_nuxt/static/1626870329/en/get-started/state.js b/docs/_nuxt/static/1626870329/en/get-started/state.js
new file mode 100644
index 0000000..0390571
--- /dev/null
+++ b/docs/_nuxt/static/1626870329/en/get-started/state.js
@@ -0,0 +1 @@
+window.__NUXT__=(function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,_,$,aa,ab,ac,ad,ae,af,ag,ah,ai,aj,ak,al){return {staticAssetsBase:"\u002Fecharts-handbook\u002F_nuxt\u002Fstatic\u002F1626870329",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,locale:"en",lang:{},menu:{},homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"εΏ«ιδΈζ",dir:g},{title:"ε
₯ι¨η―",dir:h,children:[{title:"θ·ε ECharts",dir:i} [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1626870329/en/meta/edit-guide/payload.js b/docs/_nuxt/static/1626870329/en/meta/edit-guide/payload.js
new file mode 100644
index 0000000..01fbf14
--- /dev/null
+++ b/docs/_nuxt/static/1626870329/en/meta/edit-guide/payload.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("/en/meta/edit-guide", (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,_,$,aa,ab,ac,ad,ae,af,ag,ah,ai,aj,ak){return {data:[{article:{slug:"edit-guide",toc:[{id:A,depth:q,text:B},{id:C,depth:q,text:D},{id:E,depth:q,text:F},{id:G,depth:q,text:H},{id:I,depth:t,text:J},{id:K,depth:t,text:L},{id:M,depth:t,text:N},{id:O,depth:t,text:P},{id:Q,depth:t,text:R},{id:S,depth:q,text:T},{id:U,depth:t,text:V},{id:W,depth:q [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1626870329/en/meta/edit-guide/state.js b/docs/_nuxt/static/1626870329/en/meta/edit-guide/state.js
new file mode 100644
index 0000000..9037114
--- /dev/null
+++ b/docs/_nuxt/static/1626870329/en/meta/edit-guide/state.js
@@ -0,0 +1 @@
+window.__NUXT__=(function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,_,$,aa,ab,ac,ad,ae,af,ag,ah,ai,aj,ak,al){return {staticAssetsBase:"\u002Fecharts-handbook\u002F_nuxt\u002Fstatic\u002F1626870329",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,locale:"en",lang:{},menu:{},homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"εΏ«ιδΈζ",dir:g},{title:"ε
₯ι¨η―",dir:h,children:[{title:"θ·ε ECharts",dir:i} [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1626870329/manifest.js b/docs/_nuxt/static/1626870329/manifest.js
new file mode 100644
index 0000000..3eec33d
--- /dev/null
+++ b/docs/_nuxt/static/1626870329/manifest.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("manifest.js", {routes:["\u002F","\u002Fzh","\u002Fen\u002Fget-started","\u002Fen\u002Fconcepts\u002Faxis","\u002Fen\u002Fbest-practice\u002Fcanvas-vs-svg","\u002Fen\u002Fmeta\u002Fedit-guide","\u002Fen\u002Fconcepts\u002Flegend","\u002Fen\u002Fconcepts\u002Fevent","\u002Fen\u002Fbest-practice\u002Faria","\u002Fen\u002Fconcepts\u002Fchart-size","\u002Fen\u002Fconcepts\u002Fdataset","\u002Fen\u002Fconcepts\u002Fdata-transform"]})
\ No newline at end of file
diff --git a/docs/_nuxt/static/1626870329/payload.js b/docs/_nuxt/static/1626870329/payload.js
new file mode 100644
index 0000000..e4122ae
--- /dev/null
+++ b/docs/_nuxt/static/1626870329/payload.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("/", {data:[{}],fetch:{},mutations:[]});
\ No newline at end of file
diff --git a/docs/_nuxt/static/1626870329/state.js b/docs/_nuxt/static/1626870329/state.js
new file mode 100644
index 0000000..1f0fa37
--- /dev/null
+++ b/docs/_nuxt/static/1626870329/state.js
@@ -0,0 +1 @@
+window.__NUXT__=(function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,_,$,aa,ab,ac,ad,ae,af,ag,ah,ai,aj,ak,al){return {staticAssetsBase:"\u002Fecharts-handbook\u002F_nuxt\u002Fstatic\u002F1626870329",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,locale:"en",lang:{},menu:{},homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"εΏ«ιδΈζ",dir:g},{title:"ε
₯ι¨η―",dir:h,children:[{title:"θ·ε ECharts",dir:i} [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1626870329/zh/payload.js b/docs/_nuxt/static/1626870329/zh/payload.js
new file mode 100644
index 0000000..4efbd7b
--- /dev/null
+++ b/docs/_nuxt/static/1626870329/zh/payload.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("/zh", {data:[{}],fetch:{},mutations:[]});
\ No newline at end of file
diff --git a/docs/_nuxt/static/1626870329/zh/state.js b/docs/_nuxt/static/1626870329/zh/state.js
new file mode 100644
index 0000000..2905907
--- /dev/null
+++ b/docs/_nuxt/static/1626870329/zh/state.js
@@ -0,0 +1 @@
+window.__NUXT__=(function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,_,$,aa,ab,ac,ad,ae,af,ag,ah,ai,aj,ak,al){return {staticAssetsBase:"\u002Fecharts-handbook\u002F_nuxt\u002Fstatic\u002F1626870329",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,locale:"en",lang:{},menu:{},homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"εΏ«ιδΈζ",dir:g},{title:"ε
₯ι¨η―",dir:h,children:[{title:"θ·ε ECharts",dir:i} [...]
\ No newline at end of file
diff --git a/docs/en/best-practice/aria/index.html b/docs/en/best-practice/aria/index.html
new file mode 100644
index 0000000..5c117aa
--- /dev/null
+++ b/docs/en/best-practice/aria/index.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<html data-n-head-ssr>
+ <head>
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="ECharts Handbook"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/echarts-handbook/_nuxt/ [...]
+ </head>
+ <body>
+ <div data-server-rendered="true" id="__nuxt"><!----><div id="__layout"><div><nav role="navigation" class="navbar navbar-default navbar-fixed-top"><div class="container-fluid"><div class="navbar-header"><button type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href [...]
+<p><a href="https://www.w3.org/WAI/intro/aria" rel="nofollow noopener noreferrer" target="_blank">WAI-ARIA</a>, the Accessible Rich Internet Applications Suite developed by W3C, defines a way to make Web content and Web applications more accessible to people with disabilities. ECharts 4.0 complied with the specification, support generating description based on the chart configuration intelligently, to allows blind people to understand the content of the chart with the help of reading dev [...]
+<p>The Accessibility function was turn off by default, turn it on by define the value of <a href="https://echarts.apache.org/option.html#aria.show" rel="nofollow noopener noreferrer" target="_blank">aria.show</a> as <code>true</code>. ECharts will automatically generate a description of the chart according to the title, chart, data, etc.. Users can also change the description through the configuration item.</p>
+<p>About the configuration item:</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<iframe width="100%" height="350" src="https://echarts.apache.org/examples/en/view.html?c=doc-example/aria-pie"></iframe>
+<p>There will be an <code>area-label</code> attribute on the Chart DOM. With the help of the reading device, blind people can understand by hearing the following message:</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-text line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" [...]
+<h2 id="overall-description-modification"><a href="#overall-description-modification" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Overall Description Modification</h2>
+<p>For some charts, the default item description cannot show the info of the whole chart. In the following scatter chart, the description generated by default can include all the items, however, hearing info of hundreds of items has no helps to understand the information the chart represented.</p>
+<p>Under this circumstance, user can define the overall description by <a href="https://echarts.apache.org/option.html#aria.description" rel="nofollow noopener noreferrer" target="_blank">aria.description</a> configuration item.</p>
+<h2 id="customize-template-description"><a href="#customize-template-description" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Customize Template Description</h2>
+<p>Except for the overall description modify, we also provide the template of generating the description. You can easily modify the description in fine-grain level.</p>
+<p>The basic process to generate a description: If <a href="https://echarts.apache.org/option.html#aria.show" rel="nofollow noopener noreferrer" target="_blank">aria.show</a> is <code>true</code>, then generate the ARIA description (otherwise, no.). If <a href="https://echarts.apache.org/option.html#aria.description" rel="nofollow noopener noreferrer" target="_blank">aria.description</a> was defined, use it as the overall description (otherwise, use the default to generate the descriptio [...]
+<p>While using the template to generate, firstly make sure whether the title <a href="https://echarts.apache.org/option.html#title.text" rel="nofollow noopener noreferrer" target="_blank">title.text</a> exist to decide to use <a href="https://echarts.apache.org/option.html#aria.general.withTitle" rel="nofollow noopener noreferrer" target="_blank">aria.general.withTitle</a> or <a href="https://echarts.apache.org/option.html#aria.general.withoutTitle" rel="nofollow noopener noreferrer" tar [...]
+<p>After generating the title, ECharts will splice the description of the series and data after the title part. Every part of the template can include template variables, to be replaced by the actual value in the chart.</p>
+<p>The complete process of generating description, please check: <a href="https://echarts.apache.org/option.html#aria" rel="nofollow noopener noreferrer" target="_blank">ARIA Document</a>.</p></div> <div class="table-of-contents"><h4 class="toc-container-header">In this Page</h4> <ul><li class="toc2"><a href="/echarts-handbook/en/best-practice/aria#overall-description-modification">Overall Description Modification</a></li><li class="toc2"><a href="/echarts-handbook/en/best-practice/aria# [...]
+ <script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
+ </body>
+</html>
diff --git a/docs/en/best-practice/canvas-vs-svg/index.html b/docs/en/best-practice/canvas-vs-svg/index.html
new file mode 100644
index 0000000..fc27ba9
--- /dev/null
+++ b/docs/en/best-practice/canvas-vs-svg/index.html
@@ -0,0 +1,39 @@
+<!doctype html>
+<html data-n-head-ssr>
+ <head>
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="ECharts Handbook"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/echarts-handbook/_nuxt/ [...]
+ </head>
+ <body>
+ <div data-server-rendered="true" id="__nuxt"><!----><div id="__layout"><div><nav role="navigation" class="navbar navbar-default navbar-fixed-top"><div class="container-fluid"><div class="navbar-header"><button type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href [...]
+<p>Most of the browser-side chart libraries are using SVG or Canvas as their underlying render because they are interchangeable. However, they show notable differences in some specific scenarios and cases. As a result, it is hard to find a standard choice between them.</p>
+<p>Canvas has been used as the renderer (VML for IE8-) of ECharts from the beginning. Since <a href="https://github.com/apache/echarts/releases" rel="nofollow noopener noreferrer" target="_blank">ECharts v4.0</a> was released, ECharts provided the SVG render as an additional option. You can specify the <a href="http://echarts.baidu.com/api.html#echarts.init" rel="nofollow noopener noreferrer" target="_blank">renderer parameter</a> as <code>'canvas'</code> or <code>'svg'</code> while init [...]
+<blockquote>
+<p>SVG and Canvas have a significant difference in use. The simultaneous transparent support in ECharts between SVG and Canvas is because of the abstraction and implementation of the underlying library <a href="https://github.com/ecomfe/zrender" rel="nofollow noopener noreferrer" target="_blank">ZRender</a>. It formed an interchangeable SVG renderer and Canvas renderer.</p>
+</blockquote>
+<h2 id="how-to-choose-a-renderer"><a href="#how-to-choose-a-renderer" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>How to Choose a Renderer?</h2>
+<p>Generally, Canvas is more suitable for charts with a large number of elements (heat map, large-scale line or scatter plot in geo or parallel coordinates, etc.), and with visual <a href="https://echarts.apache.org//examples/editor.html?c=lines-bmap-effect" rel="nofollow noopener noreferrer" target="_blank">effect</a>. However, SVG has an important advantage: It has less memory usage (which is important for mobile devices), no blur when using the browser zoom.</p>
+<p>The choice of renderer can be based on a combination of hardware and software environment, data volume and functional requirements.</p>
+<ul>
+<li>In scenarios where the hardware and software environment is good and the amount of data is not too large, both renderers will work and there is not much need to agonise over them.</li>
+<li>In scenarios where the environment is poor and performance issues arise that require optimisation, experimentation can be used to determine which renderer to use. For example, there are these experiences.
+<ul>
+<li>In situations where many instances of ECharts have to be created and the browser is prone to crashing (probably because the number of Canvas is causing the memory footprint to exceed the phone's capacity), the SVG renderer can be used to make improvements. Roughly speaking, the SVG renderer may work better if the chart is running on a low-end Android, or if we are using specific charts such as the <a href="https://ecomfe.github.io/echarts-liquidfill/example/" rel="nofollow noopener n [...]
+<li>For larger amounts of data (>1k is an experience value), canvas renderer is always recommended.</li>
+</ul>
+</li>
+</ul>
+<p>We strongly welcome <a href="https://github.com/apache/echarts/issues/new" rel="nofollow noopener noreferrer" target="_blank">feedback</a> from developers on their experiences and scenarios to help us make better optimizations.</p>
+<p>Note: Currently, some special rendering still relies on Canvas: e.g. <a href="https://echarts.apache.org/option.html#series-lines.effect" rel="nofollow noopener noreferrer" target="_blank">trail effect</a>, <a href="https://echarts.apache.org//examples/editor.html?c=heatmap-bmap" rel="nofollow noopener noreferrer" target="_blank">heatmap with blending effect</a>, etc.</p>
+<h2 id="how-to-use-the-renderer"><a href="#how-to-use-the-renderer" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>How to Use the Renderer</h2>
+<p>If <code>echarts</code> is fully imported in the following way, the code already contains an SVG renderer and a Canvas renderer</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<p>If you are using treeshakable import as described in <a href="en/basics/import">Introducing Apache ECharts in your project</a>, you will need to import the required renderers manually</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<p>Then, we can <a href="https://echarts.apache.org//api.html/api.html#echarts.init" rel="nofollow noopener noreferrer" target="_blank">pass in the parameter</a> when initializing the chart instance in code to select the renderer.</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+ <script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
+ </body>
+</html>
diff --git a/docs/en/concepts/axis/index.html b/docs/en/concepts/axis/index.html
new file mode 100644
index 0000000..f45ebe8
--- /dev/null
+++ b/docs/en/concepts/axis/index.html
@@ -0,0 +1,53 @@
+<!doctype html>
+<html data-n-head-ssr>
+ <head>
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="ECharts Handbook"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/echarts-handbook/_nuxt/ [...]
+ </head>
+ <body>
+ <div data-server-rendered="true" id="__nuxt"><!----><div id="__layout"><div><nav role="navigation" class="navbar navbar-default navbar-fixed-top"><div class="container-fluid"><div class="navbar-header"><button type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href [...]
+<p>The x/y-axis in the Cartesian coordinate system.</p>
+<h2 id="x-axis-y-axis"><a href="#x-axis-y-axis" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>x-axis, y-axis</h2>
+<ol>
+<li>Both x-axis and y-axis included axis line, tick, label and title. Some chart will use the grid to assist the data viewing and calculating.</li>
+</ol>
+<p><img max-width="830" width="100%" height="100%" src="/images/design/axis/charts_axis_img02.jpg">
+</p>
+<ol start="2">
+<li>
+<p>A normal 2D coordinate system has x-axis and y-axis. X-axis located at the bottom while y-axis at the left side in common. The Config is shown below:</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+</li>
+<li>
+<p>The x-axis is usually used to declare the number of categories which was also called the aspects of observing the data: "Sales Time", "Sales Location" and "product name", etc.. The y-axis usually used to indicate the numerical value of categories. These data are used to examine the quantitative value of a certain type of data or some indicator you need to analyze, such as "Sales Quantity" and "Sales Price".</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+</li>
+<li>
+<p>When x-axis has a large span, we can use the zoom method to display part of the data in the chart.</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+</li>
+<li>
+<p>In two-dimensional data, there can be more than two axes. There are usually two x or y axes at the same time in ECharts. You can change the config <a href="https://echarts.apache.org/option.html#xAxis.offset" rel="nofollow noopener noreferrer" target="_blank">offset</a> to avoid overlaps of axes at the same place. X-axes can be displayed at the top and bottom, y-axes at left and right.</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+</li>
+</ol>
+<h2 id="axis-line"><a href="#axis-line" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Axis Line</h2>
+<p>ECharts provide the config of <a href="https://echarts.apache.org/option.html#xAxis.axisLine" rel="nofollow noopener noreferrer" target="_blank">axisLine</a>. You can change the setting according to the demand, such as the arrow on two sides and the style of axes.</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<h2 id="tick"><a href="#tick" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Tick</h2>
+<p>ECharts provide the config <a href="https://echarts.apache.org/option.html#xAxis.axisTick" rel="nofollow noopener noreferrer" target="_blank">axisTick</a>. You can change the setting according to the demand, such as the length of ticks, and the style of ticks.</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<h2 id="label"><a href="#label" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Label</h2>
+<p>ECharts provide the config <a href="https://echarts.apache.org/option.html#xAxis.axisLabel" rel="nofollow noopener noreferrer" target="_blank">axisLabel</a>. You can change the setting according to the demand, such as the text alignment and the customized label content.</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<h2 id="example"><a href="#example" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Example</h2>
+<p>The y-axis on the left side represents the monthly average temperature in Tokyo, the y-axis on the right side represents the precipitation of Tokyo. The x-axis represents the time. It reflects the trend and relation between the average temperature and precipitation.</p>
+
+<iframe max-width="830" width="100%" height="400" src="https://gallery.echartsjs.com/view-lite.html?cid=xrJYBh__4z">
+</iframe>
+<p>These are the concise intro of the usage of axis config. Check more details at: <a href="https://echarts.apache.org/option.html#xAxis" rel="nofollow noopener noreferrer" target="_blank">Official Website</a>.</p></div> <div class="table-of-contents"><h4 class="toc-container-header">In this Page</h4> <ul><li class="toc2"><a href="/echarts-handbook/en/concepts/axis#x-axis-y-axis">x-axis, y-axis</a></li><li class="toc2"><a href="/echarts-handbook/en/concepts/axis#axis-line">Axis Line</a>< [...]
+ <script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
+ </body>
+</html>
diff --git a/docs/en/concepts/chart-size/index.html b/docs/en/concepts/chart-size/index.html
new file mode 100644
index 0000000..a7ffba9
--- /dev/null
+++ b/docs/en/concepts/chart-size/index.html
@@ -0,0 +1,42 @@
+<!doctype html>
+<html data-n-head-ssr>
+ <head>
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="ECharts Handbook"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/echarts-handbook/_nuxt/ [...]
+ </head>
+ <body>
+ <div data-server-rendered="true" id="__nuxt"><!----><div id="__layout"><div><nav role="navigation" class="navbar navbar-default navbar-fixed-top"><div class="container-fluid"><div class="navbar-header"><button type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href [...]
+<p>In <a href="./basics_configuration">quick-start</a>, we introduced the API to initialize the ECharts <a href="https://echarts.apache.org//api.html#echarts.init" rel="nofollow noopener noreferrer" target="_blank"><code>echarts.init</code></a>. <a href="https://echarts.apache.org//api.html#echarts.init" rel="nofollow noopener noreferrer" target="_blank">API Document</a> has introduced the specific meaning of each parameters. Please read and understand the document before reading the fol [...]
+<p>Refer to several common usage scenarios, here is the example to initialize a chart and change the size.</p>
+<h2 id="initialization"><a href="#initialization" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Initialization</h2>
+<h3 id="scene-1-define-a-parent-container-in-html"><a href="#scene-1-define-a-parent-container-in-html" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Scene 1: Define a parent container in HTML</h3>
+<p>In general, you need to define a <code><div></code> node and use the CSS to change the width and height. While initializing, import the chart into the node. Without declaring <code>opts.width</code> or <code>opts.height</code>, the size of the chart will default to the size of the node.</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-html line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" [...]
+<p>To be noticed, before calling <code>echarts.init</code>, you need to make sure the container already has width and height.</p>
+<h3 id="scene-2-specify-the-chart-size"><a href="#scene-2-specify-the-chart-size" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Scene 2: Specify the chart size</h3>
+<p>If the height and width of the container do not exist, or you wish the chart size not equal to the container, you can initialize the size at the beginning.</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-html line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" [...]
+<h2 id="reactive-of-the-container-size"><a href="#reactive-of-the-container-size" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Reactive of the Container Size</h2>
+<h3 id="scene-3-listen-to-the-container-size-to-change-the-chart-size"><a href="#scene-3-listen-to-the-container-size-to-change-the-chart-size" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Scene 3: Listen to the container size to change the chart size</h3>
+<p>In some cases, we want to accordingly change the chart size while the size of containers changed.</p>
+<p>For instance, the container has a height of 300px and a width of 100% site width. If you are willing to change the site width while stable the chart width as 100% of it, try the following method.</p>
+<p>You can listen to <code>window.onresize</code> of the site to catch the event that the browser is resized. Then use <a href="https://echarts.apache.org/api.html#echartsInstance.resize" rel="nofollow noopener noreferrer" target="_blank"><code>echartsInstance.resize</code></a> to resize the chart.</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-html line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" [...]
+<h3 id="scene-4-state-a-specific-chart-size"><a href="#scene-4-state-a-specific-chart-size" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Scene 4: State a specific chart size</h3>
+<p>Except for calling <code>resize()</code> without parameters, you can state the height and width to implement the chart size different from the size of the container.</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<blockquote>
+<p>**Tips: ** Pay attention to how the API defined while reading the file. <code>resize()</code> API was sometimes mistaken for the form like <code>myCharts.resize(800, 400)</code> which do not exist.</p>
+</blockquote>
+<h3 id="scene-5-dispose-and-rebuild-of-the-container-node"><a href="#scene-5-dispose-and-rebuild-of-the-container-node" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Scene 5: Dispose and rebuild of the container node</h3>
+<p>We assume that there exist several bookmark pages and each page contained some charts. In this case, the content in other pages will be removed in DOM when select one page. The user will not find the chart after reselecting these pages.</p>
+<p>Essentially, this is because the container node of the charts was removed. Even if the node is added again later, the node where the graph is located no longer exists.</p>
+<p>The correct way is, call <a href="https://echarts.apache.org/api.html#echartsInstance.dispose" rel="nofollow noopener noreferrer" target="_blank"><code>echartsInstance.dispose</code></a> to dispose the instance after the container was disposed, and call <a href="https://echarts.apache.org//api.html#echarts.init" rel="nofollow noopener noreferrer" target="_blank">echarts.init</a> to initialize after the container was added again.</p>
+<blockquote>
+<p>**Tips: ** Call <a href="https://echarts.apache.org/api.html#echartsInstance.dispose" rel="nofollow noopener noreferrer" target="_blank"><code>echartsInstance.dispose</code></a> to release resources while disposing the node to avoid memory leaks.</p>
+</blockquote></div> <div class="table-of-contents"><h4 class="toc-container-header">In this Page</h4> <ul><li class="toc2"><a href="/echarts-handbook/en/concepts/chart-size#initialization">Initialization</a></li><li class="toc3"><a href="/echarts-handbook/en/concepts/chart-size#scene-1-define-a-parent-container-in-html">Scene 1: Define a parent container in HTML</a></li><li class="toc3"><a href="/echarts-handbook/en/concepts/chart-size#scene-2-specify-the-chart-size">Scene 2: Specify the [...]
+ <script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
+ </body>
+</html>
diff --git a/docs/en/concepts/data-transform/index.html b/docs/en/concepts/data-transform/index.html
new file mode 100644
index 0000000..50ad72f
--- /dev/null
+++ b/docs/en/concepts/data-transform/index.html
@@ -0,0 +1,133 @@
+<!doctype html>
+<html data-n-head-ssr>
+ <head>
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="ECharts Handbook"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/echarts-handbook/_nuxt/ [...]
+ </head>
+ <body>
+ <div data-server-rendered="true" id="__nuxt"><!----><div id="__layout"><div><nav role="navigation" class="navbar navbar-default navbar-fixed-top"><div class="container-fluid"><div class="navbar-header"><button type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href [...]
+<p><code>Data transform</code> has been supported since Apache ECharts<sup>TM</sup> 5. In echarts, the term <code>data transform</code> means that generate new data from user provided source data and transform functions. both This feature is enable users to process data in declarative way, and provides users some common "transform functions" to make that kind of tasks "out-of-the-box". (For consistency in the context, the noun form of the word we keep using the "transform" rather than "t [...]
+<p>The abstract formula of data transform is: <code>outData = f(inputData)</code>, where the transform function <code>f</code> can be like <code>filter</code>, <code>sort</code>, <code>regression</code>, <code>boxplot</code>, <code>cluster</code>, <code>aggregate</code>(todo) ...
+With the help of those transform methods, users can be implements the features like:</p>
+<ul>
+<li>Partition data into multiple series.</li>
+<li>Make some statistics and visualize the result.</li>
+<li>Adapt some visualization algorithms to data and display the result.</li>
+<li>Sort data.</li>
+<li>Remove or choose some kind of empty or special datums.</li>
+<li>...</li>
+</ul>
+<h2 id="get-started-to-data-transform"><a href="#get-started-to-data-transform" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Get started to data transform</h2>
+<p>In echarts, data transform is implemented based on the concept of <a href="~dataset">dataset</a>. A <a href="https://echarts.apache.org/option.html##dataset.transform" rel="nofollow noopener noreferrer" target="_blank">dataset.transform</a> can be configured in a dataset instance to indicate that this dataset is to be generated from this <code>transform</code>. For example:</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<p>The case shows how we get three pies, representing the data from 2011, 2012, 2013.</p>
+<iframe width="800" height="300" src="https://echarts.apache.org/examples/en/view.html?c=data-transform-multiple-pie&reset=1&edit=1"></iframe>
+<p>Let's summarize the key points of using data transform:</p>
+<ul>
+<li>Generate new data from existing declared data via the declaration of <code>transform</code>, <code>fromDatasetIndex</code>/<code>fromDatasetId</code> in some blank dataset.</li>
+<li>Series references these datasets to show the result.</li>
+</ul>
+<h2 id="advanced-usage"><a href="#advanced-usage" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Advanced usage</h2>
+<h4 id="piped-transform"><a href="#piped-transform" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Piped transform</h4>
+<p>There is a syntactic sugar that pipe transforms like:</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<blockquote>
+<p>Note: theoretically any type of transform is able to have multiple input data and multiple output data. But when a transform is piped, it is only able to take one input (except it is the first transform of the pipe) and product one output (except it is the last transform of the pipe).</p>
+</blockquote>
+<h4 id="output-multiple-data"><a href="#output-multiple-data" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Output multiple data</h4>
+<p>In most cases, transform functions only need to produce one data. But there is indeed scenarios that a transform function needs to produce multiple data, each of whom might be used by different series.</p>
+<p>For example, in the built-in boxplot transform, besides boxplot data produced, the outlier data are also produced, which can be used in a scatter series. See the <a href="https://echarts.apache.org/examples/en/editor.html?c=boxplot-light-velocity&edit=1&reset=1" rel="nofollow noopener noreferrer" target="_blank">example</a>.</p>
+<p>We use prop <a href="https://echarts.apache.org/option.html##dataset.fromTransformResult" rel="nofollow noopener noreferrer" target="_blank">dataset.fromTransformResult</a> to satisfy this requirement. For example:</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<p>What more, <a href="https://echarts.apache.org/option.html##dataset.fromTransformResult" rel="nofollow noopener noreferrer" target="_blank">dataset.fromTransformResult</a> and <a href="https://echarts.apache.org/option.html##dataset.transform" rel="nofollow noopener noreferrer" target="_blank">dataset.transform</a> can both appear in one dataset, which means that the input of the transform is from retrieved from the upstream result specified by <code>fromTransformResult</code>. For ex [...]
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<h4 id="debug-in-develop-environment"><a href="#debug-in-develop-environment" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Debug in develop environment</h4>
+<p>When using data transform, we might run into the trouble that the final chart do not display correctly but we do not know where the config is wrong. There is a property <code>transform.print</code> might help in such case. (<code>transform.print</code> is only available in dev environment).</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<h2 id="the-transform-filter"><a href="#the-transform-filter" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>The transform "filter"</h2>
+<p>Transform type "filter" is a built-in transform that provide data filter according to specified conditions. The basic option is like:</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<br>
+<br>
+This is another example of filter transform: <br>
+<iframe width="600" height="350" src="https://echarts.apache.org/examples/en/view.html?c=data-transform-filter&reset=1&edit=1"></iframe>
+<p><strong>About dimension:</strong></p>
+<p>The <code>config.dimension</code> can be:</p>
+<ul>
+<li>Dimension name declared in dataset, like <code>config: { dimension: 'Year', '=': 2011 }</code>. Dimension name declaration is not mandatory.</li>
+<li>Dimension index (start from 0), like <code>config: { dimension: 3, '=': 2011 }</code>.</li>
+</ul>
+<p><strong>About relational operator:</strong></p>
+<p>The relational operator can be:
+<code>></code>(<code>gt</code>), <code>>=</code>(<code>gte</code>), <code><</code>(<code>lt</code>), <code><=</code>(<code>lte</code>), <code>=</code>(<code>eq</code>), <code>!=</code>(<code>ne</code>, <code><></code>), <code>reg</code>. (The name in the parentheses are aliases). They follows the common semantics.
+Besides the common number comparison, there is some extra features:</p>
+<ul>
+<li>Multiple operators are able to appear in one {} item like <code>{ dimension: 'Price', '>=': 20, '<': 30 }</code>, which means logical "and" (Price >= 20 and Price < 30).</li>
+<li>The data value can be "numeric string". Numeric string is a string that can be converted to number. Like ' 123 '. White spaces and line breaks will be auto trimmed in the conversion.</li>
+<li>If we need to compare "JS <code>Date</code> instance" or date string (like '2012-05-12'), we need to specify <code>parser: 'time'</code> manually, like <code>config: { dimension: 3, lt: '2012-05-12', parser: 'time' }</code>.</li>
+<li>Pure string comparison is supported but can only be used in <code>=</code>, <code>!=</code>. <code>></code>, <code>>=</code>, <code><</code>, <code><=</code> do not support pure string comparison (the "right value" of the four operators can not be a "string").</li>
+<li>The operator <code>reg</code> can be used to make regular expression test. Like using <code>{ dimension: 'Name', reg: /\s+MΓΌller\s*$/ }</code> to select all data items that the "Name" dimension contains family name MΓΌller.</li>
+</ul>
+<p><strong>About logical relationship:</strong></p>
+<p>Sometimes we also need to express logical relationship ( <code>and</code> / <code>or</code> / <code>not</code> ):</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<p><code>and</code>/<code>or</code>/<code>not</code> can be nested like:</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<p><strong>About parser:</strong></p>
+<p>Some "parser" can be specified when make value comparison. At present only supported:</p>
+<ul>
+<li><code>parser: 'time'</code>: Parse the value to date time before comparing. The parser rule is the same as <code>echarts.time.parse</code>, where JS <code>Date</code> instance, timestamp number (in millisecond) and time string (like <code>'2012-05-12 03:11:22'</code>) are supported to be parse to timestamp number, while other value will be parsed to <code>NaN</code>.</li>
+<li><code>parser: 'trim'</code>: Trim the string before making comparison. For non-string, return the original value.</li>
+<li><code>parser: 'number'</code>: Force to convert the value to number before making comparison. If not possible to be converted to a meaningful number, converted to <code>NaN</code>. In most cases it is not necessary, because by default the value will be auto converted to number if possible before making comparison. But the default conversion is strict while this parser provide a loose strategy. If we meet the case that number string with unit suffix (like <code>'33%'</code>, <code>12p [...]
+</ul>
+<p>This is an example to show the <code>parser: 'time'</code>:</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<p><strong>Formally definition:</strong></p>
+<p>Finally, we give the formally definition of the filter transform config here:</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-ts line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<h2 id="the-transform-sort"><a href="#the-transform-sort" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>The transform "sort"</h2>
+<p>Another built-in transform is "sort".</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<iframe width="600" height="350" src="https://echarts.apache.org/examples/en/view.html?c=data-transform-sort-bar&reset=1&edit=1"></iframe>
+<p>Some extra features about "sort transform":</p>
+<ul>
+<li>Order by multiple dimensions is supported. See examples below.</li>
+<li>The sort rule:
+<ul>
+<li>By default "numeric" (that is, number and numeric-string like <code>' 123 '</code>) are able to sorted by numeric order.</li>
+<li>Otherwise "non-numeric-string" are also able to be ordered among themselves. This might help to the case like grouping data items with the same tag, especially when multiple dimensions participated in the sort (See example below).</li>
+<li>When "numeric" is compared with "non-numeric-string", or either of them is compared with other types of value, they are not comparable. So we call the latter one as "incomparable" and treat it as "min value" or "max value" according to the prop <code>incomparable: 'min' | 'max'</code>. This feature usually helps to decide whether to put the empty values (like <code>null</code>, <code>undefined</code>, <code>NaN</code>, <code>''</code>, <code>'-'</code>) or other illegal values to the [...]
+</ul>
+</li>
+<li><code>filter: 'time' | 'trim' | 'number'</code> can be used, the same as "filter transform".
+<ul>
+<li>If intending to sort time values (JS <code>Date</code> instance or time string like <code>'2012-03-12 11:13:54'</code>), <code>parser: 'time'</code> should be specified. Like <code>config: { dimension: 'date', order: 'desc', parser: 'time' }</code></li>
+<li>If intending to sort values with unit suffix (like <code>'33%'</code>, <code>'16px'</code>), need to use <code>parser: 'number'</code>.</li>
+</ul>
+</li>
+</ul>
+<p>See an example of multiple order:</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<iframe width="600" height="350" src="https://echarts.apache.org/examples/en/view.html?c=doc-example/data-transform-multiple-sort-bar&reset=1&edit=1"></iframe>
+<p>Finally, we give the formally definition of the sort transform config here:</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-ts line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<h2 id="use-external-transforms"><a href="#use-external-transforms" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Use external transforms</h2>
+<p>Besides built-in transforms (like 'filter', 'sort'), we can also use external transforms to provide more powerful functionalities. Here we use a third-party library <a href="https://github.com/ecomfe/echarts-stat" rel="nofollow noopener noreferrer" target="_blank">ecStat</a> as an example:</p>
+<p>This case show how to make a regression line via ecStat:</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<p>Examples with echarts-stat:</p>
+<ul>
+<li><a href="https://echarts.apache.org/examples/en/editor.html?c=data-transform-aggregate&edit=1&reset=1" rel="nofollow noopener noreferrer" target="_blank">Aggregate</a></li>
+<li><a href="https://echarts.apache.org/examples/en/editor.html?c=bar-histogram&edit=1&reset=1" rel="nofollow noopener noreferrer" target="_blank">Bar histogram</a></li>
+<li><a href="https://echarts.apache.org/examples/en/editor.html?c=scatter-clustering&edit=1&reset=1" rel="nofollow noopener noreferrer" target="_blank">Scatter clustering</a></li>
+<li><a href="https://echarts.apache.org/examples/en/editor.html?c=scatter-linear-regression&edit=1&reset=1" rel="nofollow noopener noreferrer" target="_blank">Scatter linear regression</a></li>
+<li><a href="https://echarts.apache.org/examples/en/editor.html?c=scatter-exponential-regression&edit=1&reset=1" rel="nofollow noopener noreferrer" target="_blank">Scatter exponential regression</a></li>
+<li><a href="https://echarts.apache.org/examples/en/editor.html?c=scatter-logarithmic-regression&edit=1&reset=1" rel="nofollow noopener noreferrer" target="_blank">Scatter logarithmic regression</a></li>
+<li><a href="https://echarts.apache.org/examples/en/editor.html?c=scatter-polynomial-regression&edit=1&reset=1" rel="nofollow noopener noreferrer" target="_blank">Scatter polynomial regression</a></li>
+</ul></div> <div class="table-of-contents"><h4 class="toc-container-header">In this Page</h4> <ul><li class="toc2"><a href="/echarts-handbook/en/concepts/data-transform#get-started-to-data-transform">Get started to data transform</a></li><li class="toc2"><a href="/echarts-handbook/en/concepts/data-transform#advanced-usage">Advanced usage</a></li><li class="toc2"><a href="/echarts-handbook/en/concepts/data-transform#the-transform-filter">The transform "filter"</a></li><li class="toc2"><a [...]
+ <script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
+ </body>
+</html>
diff --git a/docs/en/concepts/dataset/index.html b/docs/en/concepts/dataset/index.html
new file mode 100644
index 0000000..20e2e65
--- /dev/null
+++ b/docs/en/concepts/dataset/index.html
@@ -0,0 +1,141 @@
+<!doctype html>
+<html data-n-head-ssr>
+ <head>
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="ECharts Handbook"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/echarts-handbook/_nuxt/ [...]
+ </head>
+ <body>
+ <div data-server-rendered="true" id="__nuxt"><!----><div id="__layout"><div><nav role="navigation" class="navbar navbar-default navbar-fixed-top"><div class="container-fluid"><div class="navbar-header"><button type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href [...]
+<p><code>dataset</code> is a component dedicated to managing data. Although you can set the data in <code>series.data</code> for every series, we recommend you use the <code>dataset</code> to manage the data since ECharts 4 so that the data can be reused by multiple components and convenient for the separation of "data and configs". After all, data is the most common part to be changed while other configurations will mostly not change at runtime.</p>
+<h2 id="define-data-under-series"><a href="#define-data-under-series" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Define <code>data</code> under <code>series</code></h2>
+<p>If data is defined under <code>series</code>, for example:</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<p>Define <code>data</code> under <code>series</code> is suitable for customization for some special data structures such as "tree", "graph" and large data.
+However, it is not conducive to the data sharing for multiple series as well as mapping arrangement of chart types and series based on the original data. The other disadvantage is that programmers always need to divide the data in separate series (and categories) first.</p>
+<h2 id="define-data-in-dataset"><a href="#define-data-in-dataset" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Define <code>data</code> in <code>dataset</code></h2>
+<p>Here are the advantages if you define <code>data</code> in <code>dataset</code>:</p>
+<ul>
+<li>Follow the ideas of data visualization: (I) Provide the data, (II)Mapping from data to visual to become a chart.</li>
+<li>Divide data from other configurations. The data often change but others not. It is</li>
+</ul>
+<p>Easy to manage separately.</p>
+<ul>
+<li>Data can be reused by several series or component, you don't need to create copies of a large amount of data for every series.</li>
+<li>Support more common data format, such as a 2D array, array of classes, etc., to avoid users from converting for data format to a certain extent.</li>
+</ul>
+<p>Here is a simple <code>dataset</code> example:</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<p>The effect is as follows:</p>
+<iframe width="600" height="300" src="https://echarts.apache.org/examples/en/view.html?c=dataset-simple0&edit=1&reset=1"></iframe>
+<p>Or try to use the "array of classes" format:</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<h2 id="map-from-data-to-chart"><a href="#map-from-data-to-chart" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Map from Data to Chart</h2>
+<p>The ideas of data visualization: (I) Provide the data, (II)Mapping from data to visual to become a chart.</p>
+<p>In short, you can set these configs of mapping:</p>
+<ul>
+<li>Specify 'column' or 'row' of <code>dataset</code> to map the <code>series</code>. You can use <a href="https://echarts.apache.org/option.html##series.seriesLayoutBy" rel="nofollow noopener noreferrer" target="_blank">series.seriesLayoutBy</a> to configure it. The default is to map according to the column.</li>
+<li>Rule of specifying dimension mapping: how to mapping from dimensions of 'dataset' to <code>axis</code>, <code>tooltip</code>, <code>label</code> and <code>visualMap</code>. To configure the mapping, please use <a href="https://echarts.apache.org/option.html##series.encode" rel="nofollow noopener noreferrer" target="_blank">series.encode</a> and <a href="https://echarts.apache.org/option.html##visualMap" rel="nofollow noopener noreferrer" target="_blank">visualMap</a>. The previous ca [...]
+</ul>
+<p>The details of the configuration are shown below:</p>
+<h2 id="map-row-or-column-of-dataset-to-series"><a href="#map-row-or-column-of-dataset-to-series" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Map Row or Column of <code>dataset</code> to <code>series</code></h2>
+<p>After having the dataset, you can configure flexibly: how the data map to the axis and graph series.</p>
+<p>You can use <code>seriesLayoutBy</code> to change the understanding of row and column of the chart. <code>seriesLayoutBy</code> can be:</p>
+<ul>
+<li>'column': Default, the series are placed above the column of <code>dataset</code>.</li>
+<li>'row': The series is placed above the row of <code>dataset</code>.</li>
+</ul>
+<p>Check this case:</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<p>The effect of configuration is shown in <a href="https://echarts.apache.org/examples/en/editor.html?c=dataset-series-layout-by&edit=1&reset=1" rel="nofollow noopener noreferrer" target="_blank">this case</a>.</p>
+<h2 id="dimension"><a href="#dimension" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Dimension</h2>
+<p>Most of the data described in commonly used charts is a "two-dimensional table" structure, in the previous case, we use a 2D array to contain a two-dimensional table. Now, when we map a series to a column, that column was called a "dimension" and each row was called "item", vice versa.</p>
+<p>The dimension can have their name to display in the chart. Dimension name can be defined in the first column (row). In the previous case, <code>'score'</code>, <code>'amount'</code>, <code>'product'</code> are the name of dimensions. The actual data locate from the second row. ECharts will automatically check if the first column (row) contained dimension name in <code>dataset.source</code>. You can also use <code>dataset.sourceHeader: true</code> to declare that the first column (row) [...]
+<p>Try to use single <code>dataset.dimensions</code> or some <code>series.dimensions</code> to define the dimensions, therefore you can specify the name and type together.</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<p>In most cases, you don't need to define the dimension type because the ECharts will automatically judge it. If the judgment is inaccurate, you can define it manually.</p>
+<p>Dimension type can be the following values:</p>
+<ul>
+<li><code>'number'</code>: Default, normal data.</li>
+<li><code>'ordinal'</code>: String types data like categories, text can be used on the axis only with the dimension type 'ordinal'. ECharts will try to judge this type automatically but might be inaccurate, so you can specify manually.</li>
+<li><code>'time'</code>: To represent time data, ECharts can automatically analyze data as timestamp if the dimension type is defined as <code>'time'</code>. For instance, ECharts will auto-analyze if the data of this dimension is '2017-05-10'<code>. If the dimension is used as time axis ([axis.type](https://echarts.apache.org/option.html##xAxis.type) = </code>'time'<code>), the dimension type will also be </code>'time'`. See <a href="https://echarts.apache.org/option.html##series.data" [...]
+<li><code>'float'</code>: Use <code>TypedArray</code> to optimize the performance in <code>'float'</code> dimension.</li>
+<li><code>'int'</code>: Use <code>TypedArray</code> to optimize the performance in <code>'int'</code> dimension.</li>
+</ul>
+<h2 id="map-from-data-to-charts-seriesencode"><a href="#map-from-data-to-charts-seriesencode" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Map from Data to Charts (series.encode)</h2>
+<p>After understand the concept of dimension, you can use <a href="https://echarts.apache.org/option.html##series.encode" rel="nofollow noopener noreferrer" target="_blank">series.encode</a> to make a mapping:</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<p><a href="https://echarts.apache.org/examples/en/editor.html?c=dataset-encode-simple0&edit=1&reset=1" rel="nofollow noopener noreferrer" target="_blank">Here</a> shows the effect of this example.</p>
+<p>The basic structure of <code>series.encode</code> declaration:</p>
+<ul>
+<li>To the left of the colon: Specific name of axis or label.</li>
+<li>To the right of the colon: Dimension name (string) or number(int, count from 0), to specify one or several dimensions (using array).</li>
+</ul>
+<p>Generally, the following info is not necessary to be defined. Fill in as needed.</p>
+<p>Attribute suggested by <code>series.encode</code></p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<p>This is a richer <a href="https://echarts.apache.org/examples/en/editor.html?c=dataset-encode1&edit=1&reset=1" rel="nofollow noopener noreferrer" target="_blank">example</a> of <code>series.encode</code>.</p>
+<h2 id="default-seriesencode"><a href="#default-seriesencode" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Default series.encode</h2>
+<p>It is worth mentioning that ECharts will use some default mapping rules for some general charts (line, bar, scatter, candlestick, etc.) if <code>series.encode</code> is not specified. The default rule is:</p>
+<ul>
+<li>In coordinate system (eg. Cartesian, Polar):
+<ul>
+<li>If there is category axis (axis.type = 'category'), map the first column(row) to the axis and each subsequent column(row) to each series.</li>
+<li>If both axes is not the category, then map every two columns in one series to two axes.</li>
+</ul>
+</li>
+<li>Without axis (such as Pie Chart):
+<ul>
+<li>Use the first column(row) as the name, second column(row) as value. ECharts will not set the name if there is only one column(row).</li>
+</ul>
+</li>
+</ul>
+<p>While the default rule cannot fulfill the requirements, you can configure <code>encode</code> by yourself, which is not complicate. Here is an <a href="https://echarts.apache.org/examples/en/editor.html?c=dataset-default&edit=1&reset=1" rel="nofollow noopener noreferrer" target="_blank">example</a>.</p>
+<h2 id="some-normal-settings-of-seriesencode"><a href="#some-normal-settings-of-seriesencode" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Some Normal Settings of series.encode</h2>
+<p>Q: How to set the 3rd column as x-axis, 5th column as y-axis?</p>
+<p>A:</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<p>Q: How to set the 3rd row as x-axis, 5th row as y-axis?</p>
+<p>A:</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<p>Q: How to set the 2nd column as a label?</p>
+<p>A:
+We now support to trace value from specific dimension for <a href="https://echarts.apache.org/option.html##series.label.formatter" rel="nofollow noopener noreferrer" target="_blank">label.formatter</a>:</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<p>Q: How to show the 2nd and 3rd column in the tooltip?</p>
+<p>A:</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<p>Q: How to define the dimension name if is not included in the dataset?</p>
+<p>A:</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<p>Q: How to map the 3rd column to the size of the scatter chart?</p>
+<p>A:</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<p>Q: I specified a mapping in encode, why it is not worked?</p>
+<p>A: Check your spelling, such as misspell the dimension name <code>'Life Expectancy'</code> to <code>'Life Expectency'</code> in encode.</p>
+<h2 id="visual-channel-mapping"><a href="#visual-channel-mapping" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Visual Channel Mapping</h2>
+<p>We can map visual channel by using <a href="https://echarts.apache.org/option.html##visualMap" rel="nofollow noopener noreferrer" target="_blank">visualMap</a>. Check details in the <a href="https://echarts.apache.org/option.html##visualMap" rel="nofollow noopener noreferrer" target="_blank">visualMap</a> document. Here is an <a href="https://echarts.apache.org/examples/en/editor.html?c=dataset-encode0&edit=1&reset=1" rel="nofollow noopener noreferrer" target="_blank">example</a>.</p>
+<h2 id="formats-of-charts"><a href="#formats-of-charts" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Formats of Charts</h2>
+<p>In most of the normal chart, the data is suitable to be described in the form of a two-dimensional table. That well-known software like 'MS Excel' and 'Numbers' all uses a two-dimensional table. Their data can be exported to JSON format and input to <code>dataset.source</code> and avoid some steps of data processing.</p>
+<blockquote>
+<p>You can switch .csv file to JSON using tools like <a href="https://github.com/d3/d3-dsv" rel="nofollow noopener noreferrer" target="_blank">dsv</a> or <a href="https://github.com/mholt/PapaParse" rel="nofollow noopener noreferrer" target="_blank">PapaParse</a>.</p>
+</blockquote>
+<p>As the example shown behind, in the data transmission of JavaScript, the two-dimensional data can be stored directly by two-dimensional array.</p>
+<p>Expect from the two-dimensional array, the dataset also supports using key-value which is also a common way. However, we don't support <a href="https://echarts.apache.org/option.html##series.seriesLayoutBy" rel="nofollow noopener noreferrer" target="_blank">seriesLayoutBy</a> in this format right now.</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<h2 id="how-to-reference-several-datasets"><a href="#how-to-reference-several-datasets" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>How to Reference Several Datasets</h2>
+<p>ECharts support to define several datasets at the same moment. Series can assign the one to reference by <a href="https://echarts.apache.org/option.html##series.datasetIndex" rel="nofollow noopener noreferrer" target="_blank">series.datasetIndex</a>. For example:</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<h2 id="seriesdata-in-echarts-3"><a href="#seriesdata-in-echarts-3" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>series.data in ECharts 3</h2>
+<p>ECharts 4 still support the data declaration way in ECharts 3. If the series has already declared the <a href="https://echarts.apache.org/option.html##series.data" rel="nofollow noopener noreferrer" target="_blank">series.data</a>, then use <a href="https://echarts.apache.org/option.html##series.data" rel="nofollow noopener noreferrer" target="_blank">series.data</a> but not <code>dataset</code>.</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<p>In fact, <a href="https://echarts.apache.org/option.html##series.data" rel="nofollow noopener noreferrer" target="_blank">series.data</a> is an important setting method which will always exist. Some special non-table format chart like <a href="https://echarts.apache.org/option.html##series-treemap" rel="nofollow noopener noreferrer" target="_blank">treemap</a>, <a href="https://echarts.apache.org/option.html##series-graph" rel="nofollow noopener noreferrer" target="_blank">graph</a> a [...]
+<h2 id="others"><a href="#others" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Others</h2>
+<p>The following charts now support dataset:
+<code>line</code>, <code>bar</code>, <code>pie</code>, <code>scatter</code>, <code>effectScatter</code>, <code>parallel</code>, <code>candlestick</code>, <code>map</code>, <code>funnel</code>, <code>custom</code>.
+ECharts will support more charts in the future.</p>
+<p>In the end, here is an <a href="https://echarts.apache.org/examples/en/editor.html?c=dataset-link&edit=1&reset=1" rel="nofollow noopener noreferrer" target="_blank">example</a> of several charts shared one <code>dataset</code> with linkage interaction.</p></div> <div class="table-of-contents"><h4 class="toc-container-header">In this Page</h4> <ul><li class="toc2"><a href="/echarts-handbook/en/concepts/dataset#define-data-under-series">Define data under series</a></li><li class="toc2"> [...]
+ <script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
+ </body>
+</html>
diff --git a/docs/en/concepts/event/index.html b/docs/en/concepts/event/index.html
new file mode 100644
index 0000000..94a14cb
--- /dev/null
+++ b/docs/en/concepts/event/index.html
@@ -0,0 +1,59 @@
+<!doctype html>
+<html data-n-head-ssr>
+ <head>
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="ECharts Handbook"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/echarts-handbook/_nuxt/ [...]
+ </head>
+ <body>
+ <div data-server-rendered="true" id="__nuxt"><!----><div id="__layout"><div><nav role="navigation" class="navbar navbar-default navbar-fixed-top"><div class="container-fluid"><div class="navbar-header"><button type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href [...]
+<p>Users can trigger corresponding events by their operation. The developer can handle the callback function by listening to these events, such as jump to a new website, pop-up a dialog box, or drill down the data.</p>
+<p>The name of the event and the DOM event is both lowercase string. Here is an example of binding listening to <code>click</code> event.</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<p>There are two kinds of event in ECharts, one happened when the user clicks the mouse or hover the elements in charts, the other happened while the user triggered some interactive actions. Such as <a href="https://echarts.apache.org/api.html#events.legendselectchanged" rel="nofollow noopener noreferrer" target="_blank">'legendselectchanged'</a> triggered while changing the legend selected (please notice that <code>legendselected</code> won't be triggered in this situation), <a href="ht [...]
+<h2 id="handling-the-mouse-events"><a href="#handling-the-mouse-events" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Handling the Mouse Events</h2>
+<p>ECharts support general mouse events: <code>'click'</code>, <code>'dblclick'</code>, <code>'mousedown'</code>, <code>'mousemove'</code>, <code>'mouseup'</code>, <code>'mouseover'</code>, <code>'mouseout'</code>, <code>'globalout'</code>, <code>'contextmenu'</code>. This is an example of opening the search result page after clicking the bar chart.</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<p>All mouse events included <code>params</code> which contained the data of the object.</p>
+<p>Format:</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<p>Identify where the mouse clicked.</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<p>Use <code>query</code> to trigger callback of the specified component:</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<p><code>query</code> can be <code>string</code> or <code>Object</code>.</p>
+<p>If it is <code>string</code>, the format can be <code>mainType</code> or <code>mainType.subType</code>, such as:</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<p>If it is <code>Object</code>, <code>query</code> can include more than one attribute:</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<p>Such as:</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<p>For example:</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<p>For example:</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<p>For example:</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<p>You can display a popup, update the charts using the query result from your database by the data name or series name in the callback function. Here is an example:</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<h2 id="event-of-component-interaction"><a href="#event-of-component-interaction" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Event of Component Interaction</h2>
+<p>All Component Interaction in ECharts will trigger a corresponding event. Normal events and parameters are listed in the <a href="https://echarts.apache.org//api.html#events" rel="nofollow noopener noreferrer" target="_blank">events</a> document.</p>
+<p>Here is an example of listening to legend event:</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<h2 id="writing-code-to-trigger-component-action-manually"><a href="#writing-code-to-trigger-component-action-manually" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Writing Code to Trigger Component Action Manually</h2>
+<p>You can trigger events such as <code>'legendselectchanged'</code> not only by the user but also with code manually. It can be used to display the tooltip, select the legend.</p>
+<p>In ECharts <code>myChart.dispatchAction({ type: '' })</code> is used to trigger the behavior. This manages all actions and can record the behaviors conveniently.</p>
+<p>Commonly used behavior and corresponding parameters are listed in <a href="https://echarts.apache.org//api.html#action" rel="nofollow noopener noreferrer" target="_blank">action</a>.</p>
+<p>The following example shows how to highlight each sector one by one in the pie chart using <code>dispatchAction</code>.</p>
+<div class="nuxt-content-highlight"><!----></div>
+<h2 id="listen-to-events-on-the-blank-area"><a href="#listen-to-events-on-the-blank-area" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Listen to Events on the Blank Area</h2>
+<p>Sometimes developers need to listen to the events that are triggered from the blank of the canvas. For example, need to reset the chart when users click on the blank area.</p>
+<p>Before we talk about this feature, we need to clarify two kinds of events: zrender events and echarts events.</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<p>zrender events are different from echarts events. The former one are triggered when mouse/pointer is at everywhere, while the latter one can only be triggered when mouse/pointer is at the graphic elements. In fact, echarts events are implemented based on zrender events, that is, when a zrender events is triggered at a graphic element, echarts will trigger a echarts event.</p>
+<p>Having zrender events, we can implement listen to events from the blank as follows:</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+ <script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
+ </body>
+</html>
diff --git a/docs/en/concepts/legend/index.html b/docs/en/concepts/legend/index.html
new file mode 100644
index 0000000..6f23bae
--- /dev/null
+++ b/docs/en/concepts/legend/index.html
@@ -0,0 +1,59 @@
+<!doctype html>
+<html data-n-head-ssr>
+ <head>
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="ECharts Handbook"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/echarts-handbook/_nuxt/ [...]
+ </head>
+ <body>
+ <div data-server-rendered="true" id="__nuxt"><!----><div id="__layout"><div><nav role="navigation" class="navbar navbar-default navbar-fixed-top"><div class="container-fluid"><div class="navbar-header"><button type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href [...]
+<p>Legends are used to annotate the content in the chart using different colors, shapes and texts to indicate different categories. By clicking the legends, the user can show or hide the corresponding categories. Legend does not include the main info but is the key to understand the chart.</p>
+<h2 id="layout"><a href="#layout" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Layout</h2>
+<ol>
+<li>
+<p>Legend is always placed at the upper right corner of the chart. All legends in the same page need to be consistent, align horizontally or vertically by considering the layout of the overall chart space. When the chart have little vertical space or the content area is crowded, it is also a good choice to put legent on the bottom of the chart. Here are some layouts of the legend:</p>
+<p><img max-width="830" width="80%" height="80%" src="/images/design/legend/charts_sign_img01.png">
+
+<img max-width="830" width="80%" height="80%" src="/images/design/legend/charts_sign_img02.png">
+</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+</li>
+<li>
+<p>Use scrollable control if there are many legends.</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+</li>
+</ol>
+<h2 id="style"><a href="#style" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Style</h2>
+<ol>
+<li>
+<p>For dark color background, use a light color for the background layer and text while changing the background to translucent.</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+</li>
+<li>
+<p>The color of legend has many ways to design. For different charts, the legend style can be different.</p>
+<p><img max-width="830" width="80%" height="80%" src="/images/design/legend/charts_sign_img04.png">
+</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+</li>
+</ol>
+<h2 id="interactive"><a href="#interactive" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Interactive</h2>
+<p>Depend on the environmental demand, the legend can support interactive operation. Click the legend to show or hide corresponding categories:</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<h2 id="tips"><a href="#tips" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Tips</h2>
+<ol>
+<li>
+<p>The legend should be used according to the situation. Some dual-axis charts include multiple chart types. Different kinds of legend stypes should be distinguished.</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+</li>
+<li>
+<p>While there is only one kind of data in the chart, use the chart title rather than the legend to explain it.</p>
+</li>
+</ol>
+<h2 id="example"><a href="#example" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Example</h2>
+<iframe max-width="830" width="100%" height="400" src="https://gallery.echartsjs.com/preview.html?c=xkyleg0ydW&v=2">
+</iframe>
+<p>This document briefly introduced the common config about the legend. For more configuration item, please check our <a href="https://echarts.apache.org/option.html#legend" rel="nofollow noopener noreferrer" target="_blank">website</a>.</p></div> <div class="table-of-contents"><h4 class="toc-container-header">In this Page</h4> <ul><li class="toc2"><a href="/echarts-handbook/en/concepts/legend#layout">Layout</a></li><li class="toc2"><a href="/echarts-handbook/en/concepts/legend#style">St [...]
+ <script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
+ </body>
+</html>
diff --git a/docs/en/get-started/index.html b/docs/en/get-started/index.html
new file mode 100644
index 0000000..83dc896
--- /dev/null
+++ b/docs/en/get-started/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html data-n-head-ssr>
+ <head>
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="ECharts Handbook"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/echarts-handbook/_nuxt/ [...]
+ </head>
+ <body>
+ <div data-server-rendered="true" id="__nuxt"><!----><div id="__layout"><div><nav role="navigation" class="navbar navbar-default navbar-fixed-top"><div class="container-fluid"><div class="navbar-header"><button type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href [...]
+ <script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
+ </body>
+</html>
diff --git a/docs/en/meta/edit-guide/index.html b/docs/en/meta/edit-guide/index.html
new file mode 100644
index 0000000..b2fab2c
--- /dev/null
+++ b/docs/en/meta/edit-guide/index.html
@@ -0,0 +1,108 @@
+<!doctype html>
+<html data-n-head-ssr>
+ <head>
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="ECharts Handbook"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/echarts-handbook/_nuxt/ [...]
+ </head>
+ <body>
+ <div data-server-rendered="true" id="__nuxt"><!----><div id="__layout"><div><nav role="navigation" class="navbar navbar-default navbar-fixed-top"><div class="container-fluid"><div class="navbar-header"><button type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href [...]
+<h2 id="adding-a-markdown-file"><a href="#adding-a-markdown-file" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Adding a Markdown File</h2>
+<p>Add a markdown file to the <code>contents/zh/</code> (Chinese posts) or <code>contents/en/</code> (English posts) directories, up to three levels. Update the path and title information in <code>contents/zh/posts.yml</code> or <code>contents/en/posts.yml</code>.</p>
+<p>Lowercase markdown file names.</p>
+<h2 id="using-prettier-to-automatically-format-code"><a href="#using-prettier-to-automatically-format-code" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Using Prettier to Automatically Format Code</h2>
+<p>Before you start, we recommend installing the <a href="https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode" rel="nofollow noopener noreferrer" target="_blank">prettier VSCode plugin</a>, which will automatically format the code for you when you save it.</p>
+<p>If you feel that the automatic formatting is breaking your code block, you can add the following comment to prevent <code>prettier</code> from formatting the code inside the block</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="ro [...]
+<p>If you find blocks of code that are not formatted, check first for syntax errors in the code.</p>
+<h2 id="built-in-variables"><a href="#built-in-variables" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Built-in Variables</h2>
+<ul>
+<li><code>optionPath</code></li>
+<li><code>mainSitePath</code></li>
+<li><code>exampleViewPath</code></li>
+<li><code>exampleEditorPath</code></li>
+</ul>
+<p>Usage:</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-text line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" [...]
+<h2 id="embedding-code"><a href="#embedding-code" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Embedding Code</h2>
+<h3 id="basic-usage"><a href="#basic-usage" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Basic Usage</h3>
+
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="ro [...]
+
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<h3 id="recommended-way-of-writing-code"><a href="#recommended-way-of-writing-code" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Recommended Way of Writing Code</h3>
+<p>In order to allow the tool to help us format the code, we should try to avoid syntactically problematic writing styles.</p>
+<p>For example, the comment <code>...</code></p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<h3 id="live-preview-and-editing"><a href="#live-preview-and-editing" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Live Preview and Editing</h3>
+<blockquote>
+<p>Currently only preview of Option code is supported</p>
+</blockquote>
+
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="ro [...]
+
+<div class="nuxt-content-highlight"><!----></div>
+<h3 id="more-preview-layouts"><a href="#more-preview-layouts" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>More Preview Layouts</h3>
+<h4 id="left-to-right"><a href="#left-to-right" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Left to Right</h4>
+
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="ro [...]
+
+<div class="nuxt-content-highlight"><!----></div>
+<h4 id="right-to-left"><a href="#right-to-left" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Right to left</h4>
+
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="ro [...]
+
+<div class="nuxt-content-highlight"><!----></div>
+<h4 id="down-to-up"><a href="#down-to-up" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Down to Up</h4>
+
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="ro [...]
+
+<div class="nuxt-content-highlight"><!----></div>
+<h3 id="highlighting-lines-of-code-and-adding-filenames"><a href="#highlighting-lines-of-code-and-adding-filenames" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Highlighting Lines of Code and Adding Filenames</h3>
+<p>Use.</p>
+
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="ro [...]
+
+<p>Effects.</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <span class="filename">option.js</span> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657c [...]
+<h2 id="embedding-images"><a href="#embedding-images" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Embedding Images</h2>
+<p>Source images are stored under <code>static/images/</code>.</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="ro [...]
+<h3 id="set-the-image-height-and-width"><a href="#set-the-image-height-and-width" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Set the Image Height and Width</h3>
+<p>For the temporary style of the current page, you can just write html.</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="ro [...]
+<h2 id="add-example-iframe"><a href="#add-example-iframe" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Add Example Iframe</h2>
+<p><code>src</code> is the string after <code>?c=</code> in the <a href="https://echarts.apache.org/examples/en/editor.html?c=line-simple" rel="nofollow noopener noreferrer" target="_blank">https://echarts.apache.org/examples/en/editor.html?c=line-simple</a> address</p>
+<p>Use:</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="ro [...]
+<p>Result:
+<iframe width="100%" height="300" src="https://echarts.apache.org/examples/en/view.html?c=doc-example/getting-started"></iframe></p>
+<h2 id="add-link-to-option-item"><a href="#add-link-to-option-item" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Add Link to Option Item</h2>
+<p>Use:</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="ro [...]
+<p>Result:
+<a href="https://echarts.apache.org/option.html#series-bar.itemStyle.color" target="_blank">series-bar.itemStyle.color</a></p>
+<h2 id="more-component-usage"><a href="#more-component-usage" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>More Component Usage</h2>
+<p>The documentation supports the use of globally registered <code>markdown</code> components. In addition to the <code>md-example</code> component just described, the following components are also available</p>
+<h3 id="md-alert"><a href="#md-alert" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>md-alert</h3>
+<p>Prompt components</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="ro [...]
+<blockquote class="md-alert md-alert-info" data-v-a47f983e><p data-v-a47f983e>
+This is an info alert.
+</p></blockquote>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="ro [...]
+<blockquote class="md-alert md-alert-success" data-v-a47f983e><p data-v-a47f983e>
+This is a success alert.
+</p></blockquote>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="ro [...]
+<blockquote class="md-alert md-alert-warning" data-v-a47f983e><p data-v-a47f983e>
+This is a warning alert.
+</p></blockquote>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="ro [...]
+<blockquote class="md-alert md-alert-danger" data-v-a47f983e><p data-v-a47f983e>
+This is a danger alert.
+</p></blockquote></div> <div class="table-of-contents"><h4 class="toc-container-header">In this Page</h4> <ul><li class="toc2"><a href="/echarts-handbook/en/meta/edit-guide#adding-a-markdown-file">Adding a Markdown File</a></li><li class="toc2"><a href="/echarts-handbook/en/meta/edit-guide#using-prettier-to-automatically-format-code">Using Prettier to Automatically Format Code</a></li><li class="toc2"><a href="/echarts-handbook/en/meta/edit-guide#built-in-variables">Built-in Variables</a [...]
+ <script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
+ </body>
+</html>
diff --git a/docs/favicon.ico b/docs/favicon.ico
new file mode 100644
index 0000000..3632d0c
Binary files /dev/null and b/docs/favicon.ico differ
diff --git a/docs/images/demo.png b/docs/images/demo.png
new file mode 100644
index 0000000..478f548
Binary files /dev/null and b/docs/images/demo.png differ
diff --git a/docs/images/design/axis/charts_axis_img01.jpg b/docs/images/design/axis/charts_axis_img01.jpg
new file mode 100644
index 0000000..b2ceeae
Binary files /dev/null and b/docs/images/design/axis/charts_axis_img01.jpg differ
diff --git a/docs/images/design/axis/charts_axis_img02.jpg b/docs/images/design/axis/charts_axis_img02.jpg
new file mode 100644
index 0000000..1c605cd
Binary files /dev/null and b/docs/images/design/axis/charts_axis_img02.jpg differ
diff --git a/docs/images/design/axis/charts_axis_img02.png b/docs/images/design/axis/charts_axis_img02.png
new file mode 100644
index 0000000..bbb445f
Binary files /dev/null and b/docs/images/design/axis/charts_axis_img02.png differ
diff --git a/docs/images/design/axis/charts_axis_img04.png b/docs/images/design/axis/charts_axis_img04.png
new file mode 100644
index 0000000..35711b9
Binary files /dev/null and b/docs/images/design/axis/charts_axis_img04.png differ
diff --git a/docs/images/design/axis/charts_axis_img05.png b/docs/images/design/axis/charts_axis_img05.png
new file mode 100644
index 0000000..5bd9f05
Binary files /dev/null and b/docs/images/design/axis/charts_axis_img05.png differ
diff --git a/docs/images/design/axis/charts_axis_img07.png b/docs/images/design/axis/charts_axis_img07.png
new file mode 100644
index 0000000..70f9669
Binary files /dev/null and b/docs/images/design/axis/charts_axis_img07.png differ
diff --git a/docs/images/design/axis/charts_axis_img10.png b/docs/images/design/axis/charts_axis_img10.png
new file mode 100644
index 0000000..e4b2ae0
Binary files /dev/null and b/docs/images/design/axis/charts_axis_img10.png differ
diff --git a/docs/images/design/axis/charts_axis_img12.png b/docs/images/design/axis/charts_axis_img12.png
new file mode 100644
index 0000000..1142294
Binary files /dev/null and b/docs/images/design/axis/charts_axis_img12.png differ
diff --git a/docs/images/design/bar/bar01.jpg b/docs/images/design/bar/bar01.jpg
new file mode 100644
index 0000000..3e569f7
Binary files /dev/null and b/docs/images/design/bar/bar01.jpg differ
diff --git a/docs/images/design/bar/bar02.jpg b/docs/images/design/bar/bar02.jpg
new file mode 100644
index 0000000..392e310
Binary files /dev/null and b/docs/images/design/bar/bar02.jpg differ
diff --git a/docs/images/design/bar/bar03.jpg b/docs/images/design/bar/bar03.jpg
new file mode 100644
index 0000000..1799fad
Binary files /dev/null and b/docs/images/design/bar/bar03.jpg differ
diff --git a/docs/images/design/bar/bar04.jpg b/docs/images/design/bar/bar04.jpg
new file mode 100644
index 0000000..1e310ab
Binary files /dev/null and b/docs/images/design/bar/bar04.jpg differ
diff --git a/docs/images/design/bi-directional-bar/bi-directional-bar01.jpg b/docs/images/design/bi-directional-bar/bi-directional-bar01.jpg
new file mode 100755
index 0000000..392e310
Binary files /dev/null and b/docs/images/design/bi-directional-bar/bi-directional-bar01.jpg differ
diff --git a/docs/images/design/bi-directional-bar/bi-directional-bar02.jpg b/docs/images/design/bi-directional-bar/bi-directional-bar02.jpg
new file mode 100755
index 0000000..2c17514
Binary files /dev/null and b/docs/images/design/bi-directional-bar/bi-directional-bar02.jpg differ
diff --git a/docs/images/design/color/color01.png b/docs/images/design/color/color01.png
new file mode 100644
index 0000000..35ac64d
Binary files /dev/null and b/docs/images/design/color/color01.png differ
diff --git a/docs/images/design/color/color02.png b/docs/images/design/color/color02.png
new file mode 100644
index 0000000..6398403
Binary files /dev/null and b/docs/images/design/color/color02.png differ
diff --git a/docs/images/design/color/color03.png b/docs/images/design/color/color03.png
new file mode 100644
index 0000000..9afa664
Binary files /dev/null and b/docs/images/design/color/color03.png differ
diff --git a/docs/images/design/color/color04.png b/docs/images/design/color/color04.png
new file mode 100644
index 0000000..63939e0
Binary files /dev/null and b/docs/images/design/color/color04.png differ
diff --git a/docs/images/design/legend/charts_sign_img01.png b/docs/images/design/legend/charts_sign_img01.png
new file mode 100644
index 0000000..223a64b
Binary files /dev/null and b/docs/images/design/legend/charts_sign_img01.png differ
diff --git a/docs/images/design/legend/charts_sign_img02.png b/docs/images/design/legend/charts_sign_img02.png
new file mode 100644
index 0000000..419a2ca
Binary files /dev/null and b/docs/images/design/legend/charts_sign_img02.png differ
diff --git a/docs/images/design/legend/charts_sign_img03.png b/docs/images/design/legend/charts_sign_img03.png
new file mode 100644
index 0000000..9afd241
Binary files /dev/null and b/docs/images/design/legend/charts_sign_img03.png differ
diff --git a/docs/images/design/legend/charts_sign_img04.png b/docs/images/design/legend/charts_sign_img04.png
new file mode 100644
index 0000000..1f5b910
Binary files /dev/null and b/docs/images/design/legend/charts_sign_img04.png differ
diff --git a/docs/images/design/line/line01.jpg b/docs/images/design/line/line01.jpg
new file mode 100644
index 0000000..dff5cfd
Binary files /dev/null and b/docs/images/design/line/line01.jpg differ
diff --git a/docs/images/design/pie/pie01.jpg b/docs/images/design/pie/pie01.jpg
new file mode 100644
index 0000000..375a0fb
Binary files /dev/null and b/docs/images/design/pie/pie01.jpg differ
diff --git a/docs/images/design/pie/pie02.jpg b/docs/images/design/pie/pie02.jpg
new file mode 100644
index 0000000..828577a
Binary files /dev/null and b/docs/images/design/pie/pie02.jpg differ
diff --git a/docs/images/design/pie/pie03.jpg b/docs/images/design/pie/pie03.jpg
new file mode 100644
index 0000000..c519208
Binary files /dev/null and b/docs/images/design/pie/pie03.jpg differ
diff --git a/docs/images/design/pie/pie04.jpg b/docs/images/design/pie/pie04.jpg
new file mode 100644
index 0000000..1980e34
Binary files /dev/null and b/docs/images/design/pie/pie04.jpg differ
diff --git a/docs/images/design/scatter/scatter5.jpg b/docs/images/design/scatter/scatter5.jpg
new file mode 100755
index 0000000..c077463
Binary files /dev/null and b/docs/images/design/scatter/scatter5.jpg differ
diff --git a/docs/images/feature-v5/dashboard-pointer.png b/docs/images/feature-v5/dashboard-pointer.png
new file mode 100644
index 0000000..2dabc8f
Binary files /dev/null and b/docs/images/feature-v5/dashboard-pointer.png differ
diff --git a/docs/images/feature-v5/dataZoom.png b/docs/images/feature-v5/dataZoom.png
new file mode 100644
index 0000000..296963d
Binary files /dev/null and b/docs/images/feature-v5/dataZoom.png differ
diff --git a/docs/images/feature-v5/dirty-rect.gif b/docs/images/feature-v5/dirty-rect.gif
new file mode 100644
index 0000000..8b0467a
Binary files /dev/null and b/docs/images/feature-v5/dirty-rect.gif differ
diff --git a/docs/images/feature-v5/dirty-rect.png b/docs/images/feature-v5/dirty-rect.png
new file mode 100644
index 0000000..c7ee56d
Binary files /dev/null and b/docs/images/feature-v5/dirty-rect.png differ
diff --git a/docs/images/feature-v5/echarts-5-en.png b/docs/images/feature-v5/echarts-5-en.png
new file mode 100644
index 0000000..120ce9c
Binary files /dev/null and b/docs/images/feature-v5/echarts-5-en.png differ
diff --git a/docs/images/feature-v5/echarts-5.png b/docs/images/feature-v5/echarts-5.png
new file mode 100644
index 0000000..666d43b
Binary files /dev/null and b/docs/images/feature-v5/echarts-5.png differ
diff --git a/docs/images/feature-v5/gauge-pointer.png b/docs/images/feature-v5/gauge-pointer.png
new file mode 100644
index 0000000..2dabc8f
Binary files /dev/null and b/docs/images/feature-v5/gauge-pointer.png differ
diff --git a/docs/images/feature-v5/new-theme-dark.png b/docs/images/feature-v5/new-theme-dark.png
new file mode 100644
index 0000000..727a942
Binary files /dev/null and b/docs/images/feature-v5/new-theme-dark.png differ
diff --git a/docs/images/feature-v5/new-theme-light.png b/docs/images/feature-v5/new-theme-light.png
new file mode 100644
index 0000000..a18e2ac
Binary files /dev/null and b/docs/images/feature-v5/new-theme-light.png differ
diff --git a/docs/images/feature-v5/new-tooltip-2 copy.png b/docs/images/feature-v5/new-tooltip-2 copy.png
new file mode 100644
index 0000000..52d3418
Binary files /dev/null and b/docs/images/feature-v5/new-tooltip-2 copy.png differ
diff --git a/docs/images/feature-v5/new-tooltip-2.png b/docs/images/feature-v5/new-tooltip-2.png
new file mode 100644
index 0000000..be34cc1
Binary files /dev/null and b/docs/images/feature-v5/new-tooltip-2.png differ
diff --git a/docs/images/feature-v5/new-tooltip.png b/docs/images/feature-v5/new-tooltip.png
new file mode 100644
index 0000000..56ad865
Binary files /dev/null and b/docs/images/feature-v5/new-tooltip.png differ
diff --git a/docs/images/feature-v5/new-tooltip2.png b/docs/images/feature-v5/new-tooltip2.png
new file mode 100644
index 0000000..52d3418
Binary files /dev/null and b/docs/images/feature-v5/new-tooltip2.png differ
diff --git a/docs/images/feature-v5/pie-label copy.png b/docs/images/feature-v5/pie-label copy.png
new file mode 100644
index 0000000..aee3315
Binary files /dev/null and b/docs/images/feature-v5/pie-label copy.png differ
diff --git a/docs/images/feature-v5/pie-label-2.png b/docs/images/feature-v5/pie-label-2.png
new file mode 100644
index 0000000..8c427b9
Binary files /dev/null and b/docs/images/feature-v5/pie-label-2.png differ
diff --git a/docs/images/feature-v5/pie-label.png b/docs/images/feature-v5/pie-label.png
new file mode 100644
index 0000000..aee3315
Binary files /dev/null and b/docs/images/feature-v5/pie-label.png differ
diff --git a/docs/images/feature-v5/theme-color.png b/docs/images/feature-v5/theme-color.png
new file mode 100644
index 0000000..636c868
Binary files /dev/null and b/docs/images/feature-v5/theme-color.png differ
diff --git a/docs/images/feature-v5/time-axis-2.png b/docs/images/feature-v5/time-axis-2.png
new file mode 100644
index 0000000..8bce19f
Binary files /dev/null and b/docs/images/feature-v5/time-axis-2.png differ
diff --git a/docs/images/feature-v5/time-axis.png b/docs/images/feature-v5/time-axis.png
new file mode 100644
index 0000000..00b7b00
Binary files /dev/null and b/docs/images/feature-v5/time-axis.png differ
diff --git a/docs/images/feature-v5/time-axis2.png b/docs/images/feature-v5/time-axis2.png
new file mode 100644
index 0000000..d89e441
Binary files /dev/null and b/docs/images/feature-v5/time-axis2.png differ
diff --git a/docs/images/feature-v5/timeline.png b/docs/images/feature-v5/timeline.png
new file mode 100644
index 0000000..e38150d
Binary files /dev/null and b/docs/images/feature-v5/timeline.png differ
diff --git a/docs/index.html b/docs/index.html
new file mode 100644
index 0000000..7136549
--- /dev/null
+++ b/docs/index.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<html data-n-head-ssr>
+ <head>
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="ECharts Handbook"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/echarts-handbook/_nuxt/ [...]
+ </head>
+ <body>
+ <div data-server-rendered="true" id="__nuxt"><!----><div id="__layout"><div><nav role="navigation" class="navbar navbar-default navbar-fixed-top"><div class="container-fluid"><div class="navbar-header"><button type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href [...]
+ this is index
+</div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script defer src="/echarts-handbook/_nuxt/static/1626870329/state.js"></script><script src="/echarts-handbook/_nuxt/d555ade.js" defer></script><script src="/echarts-handbook/_nuxt/js/5bbc04459a97c3582266.js" defer></script><script src="/echarts-handbook/_nuxt/js/4b6ba5ecc0c117490f4c.js" defer></script><script src="/echarts-handbook/_nuxt/js [...]
+ <script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
+ </body>
+</html>
diff --git a/docs/zh/index.html b/docs/zh/index.html
new file mode 100644
index 0000000..0bce447
--- /dev/null
+++ b/docs/zh/index.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<html data-n-head-ssr>
+ <head>
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="ECharts Handbook"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/echarts-handbook/_nuxt/ [...]
+ </head>
+ <body>
+ <div data-server-rendered="true" id="__nuxt"><!----><div id="__layout"><div><nav role="navigation" class="navbar navbar-default navbar-fixed-top"><div class="container-fluid"><div class="navbar-header"><button type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href [...]
+ this is index
+</div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script defer src="/echarts-handbook/_nuxt/static/1626870329/zh/state.js"></script><script src="/echarts-handbook/_nuxt/d555ade.js" defer></script><script src="/echarts-handbook/_nuxt/js/5bbc04459a97c3582266.js" defer></script><script src="/echarts-handbook/_nuxt/js/4b6ba5ecc0c117490f4c.js" defer></script><script src="/echarts-handbook/_nuxt [...]
+ <script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
+ </body>
+</html>
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org