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/29 08:26:24 UTC
[echarts-handbook] 01/01: Deploying to gh-pages from @ apache/echarts-handbook@6d28f4a271e7d20ef16655e7193e71d39e6d4932 🚀
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 2a61d2469aad9030ee0269dec2b62d093c26f2ce
Author: pissang <sh...@baidu.com>
AuthorDate: Thu Jul 29 08:26:14 2021 +0000
Deploying to gh-pages from @ apache/echarts-handbook@6d28f4a271e7d20ef16655e7193e71d39e6d4932 🚀
---
docs/.nojekyll | 0
docs/200.html | 13 +++
docs/README.md | 11 ++
docs/_nuxt/9b48058.js | 1 +
docs/_nuxt/LICENSES | 77 ++++++++++++
docs/_nuxt/content/db-ec8c9562.json | 1 +
docs/_nuxt/css/1c37eb7.css | 1 +
docs/_nuxt/css/5b0425f.css | 1 +
docs/_nuxt/css/992028c.css | 4 +
docs/_nuxt/css/ecc35e1.css | 1 +
docs/_nuxt/js/0fbda4ca7c8803086b76.js | 2 +
docs/_nuxt/js/3169fc79d6dd4f685415.js | 1 +
docs/_nuxt/js/5e2cbf163a319fa7cf5b.js | 2 +
docs/_nuxt/js/7efc75f867a22c00b961.js | 1 +
docs/_nuxt/js/b083971ffcfbf3989d05.js | 1 +
docs/_nuxt/js/b84b2939936a18a41fea.js | 1 +
docs/_nuxt/js/cf913ffd54e29d20df0c.js | 1 +
docs/_nuxt/js/f5e7518d240a121a2e4a.js | 2 +
.../1627547170/en/basics/download/payload.js | 1 +
.../static/1627547170/en/basics/download/state.js | 1 +
.../static/1627547170/en/basics/help/payload.js | 1 +
.../static/1627547170/en/basics/help/state.js | 1 +
.../static/1627547170/en/basics/import/payload.js | 1 +
.../static/1627547170/en/basics/import/state.js | 1 +
.../1627547170/en/basics/inspiration/payload.js | 1 +
.../1627547170/en/basics/inspiration/state.js | 1 +
.../1627547170/en/best-practice/aria/payload.js | 1 +
.../1627547170/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/1627547170/en/concepts/axis/payload.js | 1 +
.../static/1627547170/en/concepts/axis/state.js | 1 +
.../1627547170/en/concepts/chart-size/payload.js | 1 +
.../1627547170/en/concepts/chart-size/state.js | 1 +
.../en/concepts/data-transform/payload.js | 1 +
.../1627547170/en/concepts/data-transform/state.js | 1 +
.../1627547170/en/concepts/dataset/payload.js | 1 +
.../static/1627547170/en/concepts/dataset/state.js | 1 +
.../static/1627547170/en/concepts/event/payload.js | 1 +
.../static/1627547170/en/concepts/event/state.js | 1 +
.../1627547170/en/concepts/legend/payload.js | 1 +
.../static/1627547170/en/concepts/legend/state.js | 1 +
.../static/1627547170/en/concepts/style/payload.js | 1 +
.../static/1627547170/en/concepts/style/state.js | 1 +
.../1627547170/en/concepts/visual-map/payload.js | 1 +
.../1627547170/en/concepts/visual-map/state.js | 1 +
.../static/1627547170/en/get-started/payload.js | 1 +
.../static/1627547170/en/get-started/state.js | 1 +
.../1627547170/en/meta/edit-guide/payload.js | 1 +
.../static/1627547170/en/meta/edit-guide/state.js | 1 +
docs/_nuxt/static/1627547170/en/payload.js | 1 +
docs/_nuxt/static/1627547170/en/state.js | 1 +
docs/_nuxt/static/1627547170/manifest.js | 1 +
docs/_nuxt/static/1627547170/payload.js | 1 +
docs/_nuxt/static/1627547170/state.js | 1 +
.../1627547170/zh/basics/download/payload.js | 1 +
.../static/1627547170/zh/basics/download/state.js | 1 +
.../static/1627547170/zh/basics/help/payload.js | 1 +
.../static/1627547170/zh/basics/help/state.js | 1 +
.../static/1627547170/zh/basics/import/payload.js | 1 +
.../static/1627547170/zh/basics/import/state.js | 1 +
.../1627547170/zh/basics/inspiration/payload.js | 1 +
.../1627547170/zh/basics/inspiration/state.js | 1 +
.../1627547170/zh/best-practice/aria/payload.js | 1 +
.../1627547170/zh/best-practice/aria/state.js | 1 +
.../zh/best-practice/canvas-vs-svg/payload.js | 1 +
.../zh/best-practice/canvas-vs-svg/state.js | 1 +
.../static/1627547170/zh/concepts/axis/payload.js | 1 +
.../static/1627547170/zh/concepts/axis/state.js | 1 +
.../1627547170/zh/concepts/chart-size/payload.js | 1 +
.../1627547170/zh/concepts/chart-size/state.js | 1 +
.../zh/concepts/data-transform/payload.js | 1 +
.../1627547170/zh/concepts/data-transform/state.js | 1 +
.../1627547170/zh/concepts/dataset/payload.js | 1 +
.../static/1627547170/zh/concepts/dataset/state.js | 1 +
.../static/1627547170/zh/concepts/event/payload.js | 1 +
.../static/1627547170/zh/concepts/event/state.js | 1 +
.../1627547170/zh/concepts/legend/payload.js | 1 +
.../static/1627547170/zh/concepts/legend/state.js | 1 +
.../static/1627547170/zh/concepts/style/payload.js | 1 +
.../static/1627547170/zh/concepts/style/state.js | 1 +
.../1627547170/zh/concepts/visual-map/payload.js | 1 +
.../1627547170/zh/concepts/visual-map/state.js | 1 +
.../static/1627547170/zh/get-started/payload.js | 1 +
.../static/1627547170/zh/get-started/state.js | 1 +
.../1627547170/zh/meta/edit-guide/payload.js | 1 +
.../static/1627547170/zh/meta/edit-guide/state.js | 1 +
docs/_nuxt/static/1627547170/zh/payload.js | 1 +
docs/_nuxt/static/1627547170/zh/state.js | 1 +
docs/en/basics/download/index.html | 31 +++++
docs/en/basics/help/index.html | 36 ++++++
docs/en/basics/import/index.html | 29 +++++
docs/en/basics/inspiration/index.html | 18 +++
docs/en/best-practice/aria/index.html | 29 +++++
docs/en/best-practice/canvas-vs-svg/index.html | 39 +++++++
docs/en/concepts/axis/index.html | 39 +++++++
docs/en/concepts/chart-size/index.html | 42 +++++++
docs/en/concepts/data-transform/index.html | 129 +++++++++++++++++++++
docs/en/concepts/dataset/index.html | 127 ++++++++++++++++++++
docs/en/concepts/event/index.html | 59 ++++++++++
docs/en/concepts/legend/index.html | 32 +++++
docs/en/concepts/style/index.html | 49 ++++++++
docs/en/concepts/visual-map/index.html | 49 ++++++++
docs/en/get-started/index.html | 30 +++++
docs/en/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 | 13 +++
docs/zh/basics/download/index.html | 31 +++++
docs/zh/basics/help/index.html | 36 ++++++
docs/zh/basics/import/index.html | 29 +++++
docs/zh/basics/inspiration/index.html | 19 +++
docs/zh/best-practice/aria/index.html | 29 +++++
docs/zh/best-practice/canvas-vs-svg/index.html | 39 +++++++
docs/zh/concepts/axis/index.html | 39 +++++++
docs/zh/concepts/chart-size/index.html | 42 +++++++
docs/zh/concepts/data-transform/index.html | 129 +++++++++++++++++++++
docs/zh/concepts/dataset/index.html | 129 +++++++++++++++++++++
docs/zh/concepts/event/index.html | 58 +++++++++
docs/zh/concepts/legend/index.html | 32 +++++
docs/zh/concepts/style/index.html | 50 ++++++++
docs/zh/concepts/visual-map/index.html | 49 ++++++++
docs/zh/get-started/index.html | 30 +++++
docs/zh/index.html | 13 +++
docs/zh/meta/edit-guide/index.html | 108 +++++++++++++++++
175 files changed, 1926 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..2883440
--- /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="Apache 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/9 [...]
+ <link href="/echarts-handbook/_nuxt/css/992028c.css" rel="stylesheet"><link href="/echarts-handbook/_nuxt/css/5b0425f.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/9b48058.js"></script><script src="/echarts-handbook/_nuxt/js/f5e7518d240a121a2e4a.js"></script><script src="/echarts-handbook/_nuxt/js/0fbda4ca7c8803086b76.js"></script><script src="/echarts-handbook/_nuxt/js/3169fc79d6dd4f685415.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/9b48058.js b/docs/_nuxt/9b48058.js
new file mode 100644
index 0000000..22515e8
--- /dev/null
+++ b/docs/_nuxt/9b48058.js
@@ -0,0 +1 @@
+!function(e){function t(data){for(var t,n,o=data[0],l=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 l)Object.prototype.hasOwnProperty.call(l,t)&&(e[t]=l[t]);for(m&&m(data);h.length;)h.shift()();return f.push.apply(f,d||[]),r()}function r(){for(var e,i=0;i<f.length;i++){for(var t=f[i],r=!0,n=1;n<t.length;n++){var o=t[n];0!==c[o]&&(r=!1)}r&&(f.splice(i--,1),e=l(l.s=t[0]))}return e}var n={},o={4:0},c={4:0},f [...]
\ No newline at end of file
diff --git a/docs/_nuxt/LICENSES b/docs/_nuxt/LICENSES
new file mode 100644
index 0000000..4aeef6a
--- /dev/null
+++ b/docs/_nuxt/LICENSES
@@ -0,0 +1,77 @@
+/*!
+ * 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.
+ */
+
+
+/*!
+ * 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
+ */
diff --git a/docs/_nuxt/content/db-ec8c9562.json b/docs/_nuxt/content/db-ec8c9562.json
new file mode 100644
index 0000000..f96e925
--- /dev/null
+++ b/docs/_nuxt/content/db-ec8c9562.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":[{"id":"getting-apache-echarts","depth":2,"text":"Getting Apache ECharts"},{"id":"including-echarts","depth":2,"text":"Including ECharts"},{"id":"plotting-a-simple-chart","depth":2,"text":"Plotti [...]
\ 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/5b0425f.css b/docs/_nuxt/css/5b0425f.css
new file mode 100644
index 0000000..c8bcb52
--- /dev/null
+++ b/docs/_nuxt/css/5b0425f.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 .nav-link.nuxt-link-active{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-in [...]
\ 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/js/0fbda4ca7c8803086b76.js b/docs/_nuxt/js/0fbda4ca7c8803086b76.js
new file mode 100644
index 0000000..c30af57
--- /dev/null
+++ b/docs/_nuxt/js/0fbda4ca7c8803086b76.js
@@ -0,0 +1,2 @@
+/*! For license information please see ../LICENSES */
+(window.webpackJsonp=window.webpackJsonp||[]).push([[5],{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 P})),n.d(t,"i",(function(){return j})),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/3169fc79d6dd4f685415.js b/docs/_nuxt/js/3169fc79d6dd4f685415.js
new file mode 100644
index 0000000..03e843a
--- /dev/null
+++ b/docs/_nuxt/js/3169fc79d6dd4f685415.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[0],{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/js/5e2cbf163a319fa7cf5b.js b/docs/_nuxt/js/5e2cbf163a319fa7cf5b.js
new file mode 100644
index 0000000..926018a
--- /dev/null
+++ b/docs/_nuxt/js/5e2cbf163a319fa7cf5b.js
@@ -0,0 +1,2 @@
+/*! For license information please see ../LICENSES */
+(window.webpackJsonp=window.webpackJsonp||[]).push([[7],{206: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/7efc75f867a22c00b961.js b/docs/_nuxt/js/7efc75f867a22c00b961.js
new file mode 100644
index 0000000..797b708
--- /dev/null
+++ b/docs/_nuxt/js/7efc75f867a22c00b961.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[8],{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|debugge [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/b083971ffcfbf3989d05.js b/docs/_nuxt/js/b083971ffcfbf3989d05.js
new file mode 100644
index 0000000..a4a0194
--- /dev/null
+++ b/docs/_nuxt/js/b083971ffcfbf3989d05.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[6],{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/b84b2939936a18a41fea.js b/docs/_nuxt/js/b84b2939936a18a41fea.js
new file mode 100644
index 0000000..f17ac46
--- /dev/null
+++ b/docs/_nuxt/js/b84b2939936a18a41fea.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[2],{207: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){t.exports={}},217:function(t,n,e){t.exports={}},218:function(t,n,e){"use strict";e(207)},235:function(t,n,e){"use strict";e(214)},236:function(t,n,e){"use strict";e(215)},244:function(t,n,e){"use strict";e(216)},247:function(t,n,e){"use strict";e(217)},261:function(t,n,e){"use strict";e.r(n);var c=e(2),o=(e(20), [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/cf913ffd54e29d20df0c.js b/docs/_nuxt/js/cf913ffd54e29d20df0c.js
new file mode 100644
index 0000000..efb10a3
--- /dev/null
+++ b/docs/_nuxt/js/cf913ffd54e29d20df0c.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[3],{262:function(t,e,n){"use strict";n.r(e);var r=n(2),o=(n(20),n(0).default.extend({mounted:function(){this.$router.push("get-started")},asyncData:function(){return Object(r.a)(regeneratorRuntime.mark((function t(){return regeneratorRuntime.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:case"end":return t.stop()}}),t)})))()}})),c=n(8),component=Object(c.a)(o,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("di [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/f5e7518d240a121a2e4a.js b/docs/_nuxt/js/f5e7518d240a121a2e4a.js
new file mode 100644
index 0000000..f3ae63b
--- /dev/null
+++ b/docs/_nuxt/js/f5e7518d240a121a2e4a.js
@@ -0,0 +1,2 @@
+/*! For license information please see ../LICENSES */
+(window.webpackJsonp=window.webpackJsonp||[]).push([[1],[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/static/1627547170/en/basics/download/payload.js b/docs/_nuxt/static/1627547170/en/basics/download/payload.js
new file mode 100644
index 0000000..8170790
--- /dev/null
+++ b/docs/_nuxt/static/1627547170/en/basics/download/payload.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("/en/basics/download", (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){return {data:[{article:{slug:"download",toc:[{id:v,depth:2,text:w},{id:x,depth:k,text:r},{id:y,depth:k,text:s},{id:z,depth:k,text:t},{id:A,depth:k,text:u}],body:{type:"root",children:[{type:b,tag:"h1",props:{id:"get-apache-echarts"},children:[{type:b,tag:d,props:{href:"#get-apache-echarts",ariaHidden:e,tabIndex:f},children:[{type:b,tag:g,props:{className:[h,i]},children:[]}]},{typ [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1627547170/en/basics/download/state.js b/docs/_nuxt/static/1627547170/en/basics/download/state.js
new file mode 100644
index 0000000..3980cce
--- /dev/null
+++ b/docs/_nuxt/static/1627547170/en/basics/download/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\u002F1627547170",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:h,children:[{title:"获取 ECharts",dir:i},{title:"在项目中引入 ECharts",dir [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1627547170/en/basics/help/payload.js b/docs/_nuxt/static/1627547170/en/basics/help/payload.js
new file mode 100644
index 0000000..3650a16
--- /dev/null
+++ b/docs/_nuxt/static/1627547170/en/basics/help/payload.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("/en/basics/help", (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){return {data:[{article:{slug:"help",toc:[{id:r,depth:s,text:t},{id:u,depth:p,text:v},{id:w,depth:p,text:x},{id:y,depth:p,text:z},{id:A,depth:s,text:B}],body:{type:"root",children:[{type:b,tag:"h1",props:{id:"get-help"},children:[{type:b,tag:d,props:{href:"#get-help",ariaHidden:e,tabIndex:f},children:[{type:b,tag:g,props:{className:[h,i]},children:[]}]},{type:a,value:"Get Help"}] [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1627547170/en/basics/help/state.js b/docs/_nuxt/static/1627547170/en/basics/help/state.js
new file mode 100644
index 0000000..c41ef36
--- /dev/null
+++ b/docs/_nuxt/static/1627547170/en/basics/help/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\u002F1627547170",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:h,children:[{title:"获取 ECharts",dir:i},{title:"在项目中引入 ECharts",dir [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1627547170/en/basics/import/payload.js b/docs/_nuxt/static/1627547170/en/basics/import/payload.js
new file mode 100644
index 0000000..ece2062
--- /dev/null
+++ b/docs/_nuxt/static/1627547170/en/basics/import/payload.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("/en/basics/import", (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:"import",toc:[{id:r,depth:m,text:s},{id:t,depth:m,text:u},{id:v,depth:m,text:w},{id:x,depth:m,text:y}],body:{type:"root",children:[{type:b,tag:"h1",props:{id:"use-apache-echarts-with-bundler-and-npm"},children:[{type:b,tag:g,props:{ariaHidden:h,href:"#use-apache-echarts-with-bundler-and-npm",tabIndex:i},children:[{type:b,tag:j,props:{className:[k,l]},child [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1627547170/en/basics/import/state.js b/docs/_nuxt/static/1627547170/en/basics/import/state.js
new file mode 100644
index 0000000..9b747db
--- /dev/null
+++ b/docs/_nuxt/static/1627547170/en/basics/import/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\u002F1627547170",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:h,children:[{title:"获取 ECharts",dir:i},{title:"在项目中引入 ECharts",dir [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1627547170/en/basics/inspiration/payload.js b/docs/_nuxt/static/1627547170/en/basics/inspiration/payload.js
new file mode 100644
index 0000000..35a3eb1
--- /dev/null
+++ b/docs/_nuxt/static/1627547170/en/basics/inspiration/payload.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("/en/basics/inspiration", (function(a,b,c,d,e,f){return {data:[{article:{slug:"inspiration",toc:[],body:{type:"root",children:[{type:b,tag:"h1",props:{id:"get-inspired"},children:[{type:b,tag:d,props:{href:"#get-inspired",ariaHidden:"true",tabIndex:-1},children:[{type:b,tag:"span",props:{className:["icon","icon-link"]},children:[]}]},{type:a,value:"Get Inspired"}]},{type:a,value:c},{type:b,tag:"p",props:{},children:[{type:a,value:"The following list provides some ideas whe [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1627547170/en/basics/inspiration/state.js b/docs/_nuxt/static/1627547170/en/basics/inspiration/state.js
new file mode 100644
index 0000000..a1010fb
--- /dev/null
+++ b/docs/_nuxt/static/1627547170/en/basics/inspiration/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\u002F1627547170",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:h,children:[{title:"获取 ECharts",dir:i},{title:"在项目中引入 ECharts",dir [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1627547170/en/best-practice/aria/payload.js b/docs/_nuxt/static/1627547170/en/best-practice/aria/payload.js
new file mode 100644
index 0000000..bb6838f
--- /dev/null
+++ b/docs/_nuxt/static/1627547170/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/1627547170/en/best-practice/aria/state.js b/docs/_nuxt/static/1627547170/en/best-practice/aria/state.js
new file mode 100644
index 0000000..b3e3f4c
--- /dev/null
+++ b/docs/_nuxt/static/1627547170/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\u002F1627547170",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:h,children:[{title:"获取 ECharts",dir:i},{title:"在项目中引入 ECharts",dir [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1627547170/en/best-practice/canvas-vs-svg/payload.js b/docs/_nuxt/static/1627547170/en/best-practice/canvas-vs-svg/payload.js
new file mode 100644
index 0000000..2a30ea1
--- /dev/null
+++ b/docs/_nuxt/static/1627547170/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/1627547170/en/best-practice/canvas-vs-svg/state.js b/docs/_nuxt/static/1627547170/en/best-practice/canvas-vs-svg/state.js
new file mode 100644
index 0000000..9aee2dd
--- /dev/null
+++ b/docs/_nuxt/static/1627547170/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\u002F1627547170",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:h,children:[{title:"获取 ECharts",dir:i},{title:"在项目中引入 ECharts",dir [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1627547170/en/concepts/axis/payload.js b/docs/_nuxt/static/1627547170/en/concepts/axis/payload.js
new file mode 100644
index 0000000..0c0b807
--- /dev/null
+++ b/docs/_nuxt/static/1627547170/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){return {data:[{article:{slug:v,toc:[{id:w,depth:p,text:x},{id:y,depth:p,text:z},{id:A,depth:p,text:B},{id:C,depth:p,text:D},{id:E,depth:p,text:F}],body:{type:"root",children:[{type:b,tag:"h1",props:{id:v},children:[{type:b,tag:f,props:{href:"#axis",ariaHidden:k,tabIndex:l},children:[{type:b,tag:m,props:{className:[n,o]},children:[]}]},{type:a,value:"Axis"}]},{type:a,value: [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1627547170/en/concepts/axis/state.js b/docs/_nuxt/static/1627547170/en/concepts/axis/state.js
new file mode 100644
index 0000000..21a9bfc
--- /dev/null
+++ b/docs/_nuxt/static/1627547170/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\u002F1627547170",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:h,children:[{title:"获取 ECharts",dir:i},{title:"在项目中引入 ECharts",dir [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1627547170/en/concepts/chart-size/payload.js b/docs/_nuxt/static/1627547170/en/concepts/chart-size/payload.js
new file mode 100644
index 0000000..558d229
--- /dev/null
+++ b/docs/_nuxt/static/1627547170/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/1627547170/en/concepts/chart-size/state.js b/docs/_nuxt/static/1627547170/en/concepts/chart-size/state.js
new file mode 100644
index 0000000..f76af6d
--- /dev/null
+++ b/docs/_nuxt/static/1627547170/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\u002F1627547170",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:h,children:[{title:"获取 ECharts",dir:i},{title:"在项目中引入 ECharts",dir [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1627547170/en/concepts/data-transform/payload.js b/docs/_nuxt/static/1627547170/en/concepts/data-transform/payload.js
new file mode 100644
index 0000000..c829197
--- /dev/null
+++ b/docs/_nuxt/static/1627547170/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){return {data:[{article:{slug:K,toc:[{id:L,depth:z,text:M},{id:N,depth:z,text:O},{id:P,depth:z,text:Q},{id:R,depth:z,text:S},{id:T,depth:z,text:U}],body:{type:"root",children:[{type:b,tag:"h1",props:{id:K},children:[{type:b,tag:h,props:{href:"#data-transform",ariaHidden:r,tabInde [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1627547170/en/concepts/data-transform/state.js b/docs/_nuxt/static/1627547170/en/concepts/data-transform/state.js
new file mode 100644
index 0000000..46361fc
--- /dev/null
+++ b/docs/_nuxt/static/1627547170/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\u002F1627547170",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:h,children:[{title:"获取 ECharts",dir:i},{title:"在项目中引入 ECharts",dir [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1627547170/en/concepts/dataset/payload.js b/docs/_nuxt/static/1627547170/en/concepts/dataset/payload.js
new file mode 100644
index 0000000..409815d
--- /dev/null
+++ b/docs/_nuxt/static/1627547170/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,ax,ay,az){return {data:[{article:{slug:p,toc:[{id:R,depth:w,text:"Define data under series"},{id:S,depth:w,text:"Define data in dataset"},{id:T,depth:w,text:U},{id:V,depth:w,text:"Map Row or Column of dataset to series"},{id:W,depth:w,text:X},{id:Y,depth:w,text:Z},{ [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1627547170/en/concepts/dataset/state.js b/docs/_nuxt/static/1627547170/en/concepts/dataset/state.js
new file mode 100644
index 0000000..a90afd0
--- /dev/null
+++ b/docs/_nuxt/static/1627547170/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\u002F1627547170",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:h,children:[{title:"获取 ECharts",dir:i},{title:"在项目中引入 ECharts",dir [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1627547170/en/concepts/event/payload.js b/docs/_nuxt/static/1627547170/en/concepts/event/payload.js
new file mode 100644
index 0000000..6bd100d
--- /dev/null
+++ b/docs/_nuxt/static/1627547170/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/1627547170/en/concepts/event/state.js b/docs/_nuxt/static/1627547170/en/concepts/event/state.js
new file mode 100644
index 0000000..4d8d76f
--- /dev/null
+++ b/docs/_nuxt/static/1627547170/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\u002F1627547170",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:h,children:[{title:"获取 ECharts",dir:i},{title:"在项目中引入 ECharts",dir [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1627547170/en/concepts/legend/payload.js b/docs/_nuxt/static/1627547170/en/concepts/legend/payload.js
new file mode 100644
index 0000000..9b73d0b
--- /dev/null
+++ b/docs/_nuxt/static/1627547170/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){return {data:[{article:{slug:r,toc:[{id:s,depth:p,text:t},{id:u,depth:p,text:v},{id:w,depth:p,text:x},{id:y,depth:p,text:z}],body:{type:"root",children:[{type:b,tag:"h1",props:{id:r},children:[{type:b,tag:i,props:{ariaHidden:j,href:"#legend",tabIndex:k},children:[{type:b,tag:l,props:{className:[m,n]},children:[]}]},{type:a,value:"Legend"}]},{type:a,value:c},{type:b,tag:e,props:{},chil [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1627547170/en/concepts/legend/state.js b/docs/_nuxt/static/1627547170/en/concepts/legend/state.js
new file mode 100644
index 0000000..de1d10a
--- /dev/null
+++ b/docs/_nuxt/static/1627547170/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\u002F1627547170",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:h,children:[{title:"获取 ECharts",dir:i},{title:"在项目中引入 ECharts",dir [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1627547170/en/concepts/style/payload.js b/docs/_nuxt/static/1627547170/en/concepts/style/payload.js
new file mode 100644
index 0000000..bd3e40d
--- /dev/null
+++ b/docs/_nuxt/static/1627547170/en/concepts/style/payload.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("/en/concepts/style", (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:"style",toc:[{id:A,depth:u,text:y},{id:B,depth:u,text:z},{id:C,depth:u,text:D},{id:E,depth:u,text:F},{id:G,depth:u,text:H}],body:{type:"root",children:[{type:b,tag:"h1",props:{id:"overview-of-style-customization"},children:[{type:b,tag:d,props:{href:"#overview-of-style-customization",ariaHidden:n,tabIndex:o},children:[{type:b,tag:p [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1627547170/en/concepts/style/state.js b/docs/_nuxt/static/1627547170/en/concepts/style/state.js
new file mode 100644
index 0000000..b385670
--- /dev/null
+++ b/docs/_nuxt/static/1627547170/en/concepts/style/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\u002F1627547170",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:h,children:[{title:"获取 ECharts",dir:i},{title:"在项目中引入 ECharts",dir [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1627547170/en/concepts/visual-map/payload.js b/docs/_nuxt/static/1627547170/en/concepts/visual-map/payload.js
new file mode 100644
index 0000000..982bb09
--- /dev/null
+++ b/docs/_nuxt/static/1627547170/en/concepts/visual-map/payload.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("/en/concepts/visual-map", (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){return {data:[{article:{slug:"visual-map",toc:[{id:B,depth:y,text:C},{id:D,depth:y,text:E},{id:F,depth:y,text:G},{id:H,depth:I,text:J},{id:K,depth:I,text:L}],body:{type:"root",children:[{type:b,tag:"h1",props:{id:"visual-map-of-data"},children:[{type:b,tag:d,props:{href:"#visual-map-of-data",ariaHidden:l,tabIndex:m},children:[{type:b,tag:n,props:{cl [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1627547170/en/concepts/visual-map/state.js b/docs/_nuxt/static/1627547170/en/concepts/visual-map/state.js
new file mode 100644
index 0000000..10d7036
--- /dev/null
+++ b/docs/_nuxt/static/1627547170/en/concepts/visual-map/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\u002F1627547170",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:h,children:[{title:"获取 ECharts",dir:i},{title:"在项目中引入 ECharts",dir [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1627547170/en/get-started/payload.js b/docs/_nuxt/static/1627547170/en/get-started/payload.js
new file mode 100644
index 0000000..2e30db5
--- /dev/null
+++ b/docs/_nuxt/static/1627547170/en/get-started/payload.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("/en/get-started", (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){return {data:[{article:{slug:x,toc:[{id:y,depth:q,text:z},{id:A,depth:q,text:B},{id:C,depth:q,text:D}],body:{type:"root",children:[{type:b,tag:"h1",props:{id:x},children:[{type:b,tag:d,props:{href:"#get-started",ariaHidden:h,tabIndex:i},children:[{type:b,tag:j,props:{className:[k,l]},children:[]}]},{type:a,value:"Get Started"}]},{type:a,value:c},{type:b,tag:r,props:{id:y}, [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1627547170/en/get-started/state.js b/docs/_nuxt/static/1627547170/en/get-started/state.js
new file mode 100644
index 0000000..f1ca4b0
--- /dev/null
+++ b/docs/_nuxt/static/1627547170/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\u002F1627547170",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:h,children:[{title:"获取 ECharts",dir:i},{title:"在项目中引入 ECharts",dir [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1627547170/en/meta/edit-guide/payload.js b/docs/_nuxt/static/1627547170/en/meta/edit-guide/payload.js
new file mode 100644
index 0000000..96d62e9
--- /dev/null
+++ b/docs/_nuxt/static/1627547170/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/1627547170/en/meta/edit-guide/state.js b/docs/_nuxt/static/1627547170/en/meta/edit-guide/state.js
new file mode 100644
index 0000000..7bd8ddd
--- /dev/null
+++ b/docs/_nuxt/static/1627547170/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\u002F1627547170",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:h,children:[{title:"获取 ECharts",dir:i},{title:"在项目中引入 ECharts",dir [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1627547170/en/payload.js b/docs/_nuxt/static/1627547170/en/payload.js
new file mode 100644
index 0000000..3d69621
--- /dev/null
+++ b/docs/_nuxt/static/1627547170/en/payload.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("/en", {data:[{}],fetch:{},mutations:[]});
\ No newline at end of file
diff --git a/docs/_nuxt/static/1627547170/en/state.js b/docs/_nuxt/static/1627547170/en/state.js
new file mode 100644
index 0000000..d161a86
--- /dev/null
+++ b/docs/_nuxt/static/1627547170/en/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\u002F1627547170",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:h,children:[{title:"获取 ECharts",dir:i},{title:"在项目中引入 ECharts",dir [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1627547170/manifest.js b/docs/_nuxt/static/1627547170/manifest.js
new file mode 100644
index 0000000..1e082e1
--- /dev/null
+++ b/docs/_nuxt/static/1627547170/manifest.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("manifest.js", {routes:["\u002F","\u002Fzh","\u002Fen","\u002Fen\u002Fget-started","\u002Fzh\u002Fget-started","\u002Fen\u002Fbasics\u002Fdownload","\u002Fen\u002Fconcepts\u002Fchart-size","\u002Fen\u002Fbest-practice\u002Fcanvas-vs-svg","\u002Fen\u002Fmeta\u002Fedit-guide","\u002Fzh\u002Fbasics\u002Fdownload","\u002Fzh\u002Fbest-practice\u002Fcanvas-vs-svg","\u002Fzh\u002Fmeta\u002Fedit-guide","\u002Fen\u002Fbasics\u002Fimport","\u002Fen\u002Fbasics\u002Finspiration","\u0 [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1627547170/payload.js b/docs/_nuxt/static/1627547170/payload.js
new file mode 100644
index 0000000..e4122ae
--- /dev/null
+++ b/docs/_nuxt/static/1627547170/payload.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("/", {data:[{}],fetch:{},mutations:[]});
\ No newline at end of file
diff --git a/docs/_nuxt/static/1627547170/state.js b/docs/_nuxt/static/1627547170/state.js
new file mode 100644
index 0000000..feb2579
--- /dev/null
+++ b/docs/_nuxt/static/1627547170/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\u002F1627547170",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:h,children:[{title:"获取 ECharts",dir:i},{title:"在项目中引入 ECharts",dir [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1627547170/zh/basics/download/payload.js b/docs/_nuxt/static/1627547170/zh/basics/download/payload.js
new file mode 100644
index 0000000..4cfb3fb
--- /dev/null
+++ b/docs/_nuxt/static/1627547170/zh/basics/download/payload.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("/zh/basics/download", (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:"download",toc:[{id:l,depth:2,text:l},{id:w,depth:m,text:t},{id:x,depth:m,text:u},{id:y,depth:m,text:v},{id:k,depth:m,text:k}],body:{type:"root",children:[{type:b,tag:"h1",props:{id:"获取-apache-echarts"},children:[{type:b,tag:d,props:{href:"#%E8%8E%B7%E5%8F%96-apache-echarts",ariaHidden:e,tabIndex:f},children:[{type:b,tag:g,props:{className:[h,i]},childre [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1627547170/zh/basics/download/state.js b/docs/_nuxt/static/1627547170/zh/basics/download/state.js
new file mode 100644
index 0000000..7dfaa17
--- /dev/null
+++ b/docs/_nuxt/static/1627547170/zh/basics/download/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\u002F1627547170",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:h,children:[{title:"获取 ECharts",dir:i},{title:"在项目中引入 ECharts",dir [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1627547170/zh/basics/help/payload.js b/docs/_nuxt/static/1627547170/zh/basics/help/payload.js
new file mode 100644
index 0000000..63095da
--- /dev/null
+++ b/docs/_nuxt/static/1627547170/zh/basics/help/payload.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("/zh/basics/help", (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){return {data:[{article:{slug:"help",toc:[{id:p,depth:v,text:p},{id:q,depth:t,text:q},{id:r,depth:t,text:r},{id:w,depth:t,text:x},{id:s,depth:v,text:s}],body:{type:"root",children:[{type:b,tag:"h1",props:{id:y},children:[{type:b,tag:d,props:{href:"#%E5%AF%BB%E6%B1%82%E5%B8%AE%E5%8A%A9",ariaHidden:i,tabIndex:j},children:[{type:b,tag:k,props:{className:[l,m]},children:[]}]},{type:a [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1627547170/zh/basics/help/state.js b/docs/_nuxt/static/1627547170/zh/basics/help/state.js
new file mode 100644
index 0000000..61a4712
--- /dev/null
+++ b/docs/_nuxt/static/1627547170/zh/basics/help/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\u002F1627547170",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:h,children:[{title:"获取 ECharts",dir:i},{title:"在项目中引入 ECharts",dir [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1627547170/zh/basics/import/payload.js b/docs/_nuxt/static/1627547170/zh/basics/import/payload.js
new file mode 100644
index 0000000..7eafbfa
--- /dev/null
+++ b/docs/_nuxt/static/1627547170/zh/basics/import/payload.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("/zh/basics/import", (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:"import",toc:[{id:r,depth:m,text:s},{id:t,depth:m,text:u},{id:v,depth:m,text:w},{id:x,depth:m,text:y}],body:{type:"root",children:[{type:b,tag:"h1",props:{id:"在项目中引入-apache-echarts"},children:[{type:b,tag:g,props:{ariaHidden:h,href:"#%E5%9C%A8%E9%A1%B9%E7%9B%AE%E4%B8%AD%E5%BC%95%E5%85%A5-apache-echarts",tabIndex:i},children:[{type:b,tag:j,props:{className: [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1627547170/zh/basics/import/state.js b/docs/_nuxt/static/1627547170/zh/basics/import/state.js
new file mode 100644
index 0000000..f21e3f1
--- /dev/null
+++ b/docs/_nuxt/static/1627547170/zh/basics/import/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\u002F1627547170",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:h,children:[{title:"获取 ECharts",dir:i},{title:"在项目中引入 ECharts",dir [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1627547170/zh/basics/inspiration/payload.js b/docs/_nuxt/static/1627547170/zh/basics/inspiration/payload.js
new file mode 100644
index 0000000..cd087ee
--- /dev/null
+++ b/docs/_nuxt/static/1627547170/zh/basics/inspiration/payload.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("/zh/basics/inspiration", (function(a,b,c,d,e,f,g,h,i,j,k){return {data:[{article:{slug:"inspiration",toc:[],body:{type:"root",children:[{type:b,tag:"h1",props:{id:f},children:[{type:b,tag:d,props:{href:"#%E8%8E%B7%E5%8F%96%E7%81%B5%E6%84%9F",ariaHidden:"true",tabIndex:-1},children:[{type:b,tag:"span",props:{className:["icon","icon-link"]},children:[]}]},{type:a,value:f}]},{type:a,value:c},{type:b,tag:"p",props:{},children:[{type:a,value:"当你有“不知道图表应该设计成什么样”或者“不知道如何使用 EChar [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1627547170/zh/basics/inspiration/state.js b/docs/_nuxt/static/1627547170/zh/basics/inspiration/state.js
new file mode 100644
index 0000000..4f621f8
--- /dev/null
+++ b/docs/_nuxt/static/1627547170/zh/basics/inspiration/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\u002F1627547170",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:h,children:[{title:"获取 ECharts",dir:i},{title:"在项目中引入 ECharts",dir [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1627547170/zh/best-practice/aria/payload.js b/docs/_nuxt/static/1627547170/zh/best-practice/aria/payload.js
new file mode 100644
index 0000000..477363a
--- /dev/null
+++ b/docs/_nuxt/static/1627547170/zh/best-practice/aria/payload.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("/zh/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:l,depth:u,text:l},{id:m,depth:u,text:m}],body:{type:"root",children:[{type:b,tag:"h1",props:{id:v},children:[{type:b,tag:d,props:{href:"#%E6%97%A0%E9%9A%9C%E7%A2%8D%E8%AE%BF%E9%97%AE",ariaHidden:k,tabIndex:o},children:[{type:b,tag:p,props:{className:[q,r]},children:[]}]},{type:a,value:v}]},{type:a,value:c},{type:b,tag:e,props:{}, [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1627547170/zh/best-practice/aria/state.js b/docs/_nuxt/static/1627547170/zh/best-practice/aria/state.js
new file mode 100644
index 0000000..d5d07fd
--- /dev/null
+++ b/docs/_nuxt/static/1627547170/zh/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\u002F1627547170",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:h,children:[{title:"获取 ECharts",dir:i},{title:"在项目中引入 ECharts",dir [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1627547170/zh/best-practice/canvas-vs-svg/payload.js b/docs/_nuxt/static/1627547170/zh/best-practice/canvas-vs-svg/payload.js
new file mode 100644
index 0000000..7f92b7c
--- /dev/null
+++ b/docs/_nuxt/static/1627547170/zh/best-practice/canvas-vs-svg/payload.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("/zh/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){return {data:[{article:{slug:"canvas-vs-svg",toc:[{id:k,depth:x,text:k},{id:l,depth:x,text:l}],body:{type:"root",children:[{type:b,tag:"h1",props:{id:"使用-canvas-或者-svg-渲染"},children:[{type:b,tag:d,props:{href:"#%E4%BD%BF%E7%94%A8-canvas-%E6%88%96%E8%80%85-svg-%E6%B8%B2%E6%9F%93",ariaHidden:n,tabIndex:o},children:[{type:b,tag:p,props:{className:[q,r]},children:[]}]},{type:a,v [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1627547170/zh/best-practice/canvas-vs-svg/state.js b/docs/_nuxt/static/1627547170/zh/best-practice/canvas-vs-svg/state.js
new file mode 100644
index 0000000..c372910
--- /dev/null
+++ b/docs/_nuxt/static/1627547170/zh/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\u002F1627547170",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:h,children:[{title:"获取 ECharts",dir:i},{title:"在项目中引入 ECharts",dir [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1627547170/zh/concepts/axis/payload.js b/docs/_nuxt/static/1627547170/zh/concepts/axis/payload.js
new file mode 100644
index 0000000..88ff3c7
--- /dev/null
+++ b/docs/_nuxt/static/1627547170/zh/concepts/axis/payload.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("/zh/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){return {data:[{article:{slug:"axis",toc:[{id:A,depth:p,text:B},{id:v,depth:p,text:v},{id:w,depth:p,text:w},{id:x,depth:p,text:x},{id:y,depth:p,text:y}],body:{type:"root",children:[{type:b,tag:"h1",props:{id:C},children:[{type:b,tag:e,props:{href:"#%E5%9D%90%E6%A0%87%E8%BD%B4",ariaHidden:k,tabIndex:l},children:[{type:b,tag:m,props:{className:[n,o]},children:[]}]},{type:a,value:C}]} [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1627547170/zh/concepts/axis/state.js b/docs/_nuxt/static/1627547170/zh/concepts/axis/state.js
new file mode 100644
index 0000000..f12a4b3
--- /dev/null
+++ b/docs/_nuxt/static/1627547170/zh/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\u002F1627547170",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:h,children:[{title:"获取 ECharts",dir:i},{title:"在项目中引入 ECharts",dir [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1627547170/zh/concepts/chart-size/payload.js b/docs/_nuxt/static/1627547170/zh/concepts/chart-size/payload.js
new file mode 100644
index 0000000..b9614a5
--- /dev/null
+++ b/docs/_nuxt/static/1627547170/zh/concepts/chart-size/payload.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("/zh/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){return {data:[{article:{slug:"chart-size",toc:[{id:s,depth:E,text:s},{id:F,depth:q,text:G},{id:t,depth:q,text:t},{id:u,depth:E,text:u},{id:v,depth:q,text:v},{id:w,depth:q,text:w},{id:x,depth:q,text:x}],body:{type:"root",children:[{type:b,tag:"h1",props:{id:H},children:[{type:b,tag:d,props:{href:"#%E5%9B%BE%E8%A1%A8%E5%AE%B9%E5%99%A8%E5%8F%8A%E5%A4%A7%E5%B [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1627547170/zh/concepts/chart-size/state.js b/docs/_nuxt/static/1627547170/zh/concepts/chart-size/state.js
new file mode 100644
index 0000000..f2cd238
--- /dev/null
+++ b/docs/_nuxt/static/1627547170/zh/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\u002F1627547170",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:h,children:[{title:"获取 ECharts",dir:i},{title:"在项目中引入 ECharts",dir [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1627547170/zh/concepts/data-transform/payload.js b/docs/_nuxt/static/1627547170/zh/concepts/data-transform/payload.js
new file mode 100644
index 0000000..39c782d
--- /dev/null
+++ b/docs/_nuxt/static/1627547170/zh/concepts/data-transform/payload.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("/zh/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){return {data:[{article:{slug:"data-transform",toc:[{id:E,depth:C,text:E},{id:F,depth:C,text:F},{id:P,depth:C,text:Q},{id:R,depth:C,text:S},{id:G,depth:C,text:G}],body:{type:"root",children:[{type:b,tag:"h1",props:{id:"使用-transform-进行数据转换"},children:[{type:b,tag:h,props:{href:"#%E4%BD%BF% [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1627547170/zh/concepts/data-transform/state.js b/docs/_nuxt/static/1627547170/zh/concepts/data-transform/state.js
new file mode 100644
index 0000000..a710bf1
--- /dev/null
+++ b/docs/_nuxt/static/1627547170/zh/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\u002F1627547170",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:h,children:[{title:"获取 ECharts",dir:i},{title:"在项目中引入 ECharts",dir [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1627547170/zh/concepts/dataset/payload.js b/docs/_nuxt/static/1627547170/zh/concepts/dataset/payload.js
new file mode 100644
index 0000000..7f40ffd
--- /dev/null
+++ b/docs/_nuxt/static/1627547170/zh/concepts/dataset/payload.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("/zh/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){return {data:[{article:{slug:x,toc:[{id:I,depth:u,text:I},{id:J,depth:u,text:J},{id:K,depth:u,text:K},{id:V,depth:u,text:W},{id:X,depth:u,text:Y},{id:Z,depth:u,text:_},{id:$,depth:u,text:aa},{id:ab,depth:u,text:ac},{id:L,depth:u,text:L},{id:M,depth:u,text:M},{id:ad,depth [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1627547170/zh/concepts/dataset/state.js b/docs/_nuxt/static/1627547170/zh/concepts/dataset/state.js
new file mode 100644
index 0000000..deb1177
--- /dev/null
+++ b/docs/_nuxt/static/1627547170/zh/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\u002F1627547170",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:h,children:[{title:"获取 ECharts",dir:i},{title:"在项目中引入 ECharts",dir [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1627547170/zh/concepts/event/payload.js b/docs/_nuxt/static/1627547170/zh/concepts/event/payload.js
new file mode 100644
index 0000000..6276b3f
--- /dev/null
+++ b/docs/_nuxt/static/1627547170/zh/concepts/event/payload.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("/zh/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,P){return {data:[{article:{slug:"event",toc:[{id:r,depth:s,text:r},{id:t,depth:s,text:t},{id:A,depth:s,text:B},{id:C,depth:s,text:D}],body:{type:"root",children:[{type:b,tag:"h1",props:{id:E},children:[{type:b,tag:k,props:{href:"#%E4%BA%8B%E4%BB%B6%E4%B8%8E%E8%A1%8C%E4%B8%BA",ariaHidden:m,tabIndex:n},children:[{type:b,tag:o,props:{className:[p,q]},children:[]}] [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1627547170/zh/concepts/event/state.js b/docs/_nuxt/static/1627547170/zh/concepts/event/state.js
new file mode 100644
index 0000000..437d587
--- /dev/null
+++ b/docs/_nuxt/static/1627547170/zh/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\u002F1627547170",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:h,children:[{title:"获取 ECharts",dir:i},{title:"在项目中引入 ECharts",dir [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1627547170/zh/concepts/legend/payload.js b/docs/_nuxt/static/1627547170/zh/concepts/legend/payload.js
new file mode 100644
index 0000000..0aca853
--- /dev/null
+++ b/docs/_nuxt/static/1627547170/zh/concepts/legend/payload.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("/zh/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){return {data:[{article:{slug:"legend",toc:[{id:p,depth:q,text:p},{id:r,depth:q,text:r},{id:s,depth:q,text:s},{id:t,depth:q,text:t}],body:{type:"root",children:[{type:b,tag:"h1",props:{id:v},children:[{type:b,tag:i,props:{ariaHidden:j,href:"#%E5%9B%BE%E4%BE%8B",tabIndex:k},children:[{type:b,tag:l,props:{className:[m,n]},children:[]}]},{type:a,value:v}]},{type:a,value:c},{type:b,tag:e,props:{}, [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1627547170/zh/concepts/legend/state.js b/docs/_nuxt/static/1627547170/zh/concepts/legend/state.js
new file mode 100644
index 0000000..272e130
--- /dev/null
+++ b/docs/_nuxt/static/1627547170/zh/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\u002F1627547170",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:h,children:[{title:"获取 ECharts",dir:i},{title:"在项目中引入 ECharts",dir [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1627547170/zh/concepts/style/payload.js b/docs/_nuxt/static/1627547170/zh/concepts/style/payload.js
new file mode 100644
index 0000000..0f8a33a
--- /dev/null
+++ b/docs/_nuxt/static/1627547170/zh/concepts/style/payload.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("/zh/concepts/style", (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){return {data:[{article:{slug:"style",toc:[{id:B,depth:t,text:A},{id:u,depth:t,text:u},{id:C,depth:t,text:D},{id:w,depth:t,text:w},{id:E,depth:t,text:F}],body:{type:"root",children:[{type:b,tag:"h1",props:{id:"echarts-中的样式简介"},children:[{type:b,tag:d,props:{href:"#echarts-%E4%B8%AD%E7%9A%84%E6%A0%B7%E5%BC%8F%E7%AE%80%E4%BB%8B",ariaHidden:n,tabIndex:o},children:[{type:b,t [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1627547170/zh/concepts/style/state.js b/docs/_nuxt/static/1627547170/zh/concepts/style/state.js
new file mode 100644
index 0000000..759bb7c
--- /dev/null
+++ b/docs/_nuxt/static/1627547170/zh/concepts/style/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\u002F1627547170",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:h,children:[{title:"获取 ECharts",dir:i},{title:"在项目中引入 ECharts",dir [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1627547170/zh/concepts/visual-map/payload.js b/docs/_nuxt/static/1627547170/zh/concepts/visual-map/payload.js
new file mode 100644
index 0000000..e979074
--- /dev/null
+++ b/docs/_nuxt/static/1627547170/zh/concepts/visual-map/payload.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("/zh/concepts/visual-map", (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:"visual-map",toc:[{id:r,depth:z,text:r},{id:D,depth:z,text:A},{id:s,depth:z,text:s},{id:t,depth:E,text:t},{id:u,depth:E,text:u}],body:{type:"root",children:[{type:b,tag:"h1",props:{id:F},children:[{type:b,tag:d,props:{href:"#%E6%95%B0%E6%8D%AE%E7%9A%84%E8%A7%86%E8%A7%89%E6%98%A0%E5%B0%84",ariaHidden:k,tabIndex:l},children:[{type:b,t [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1627547170/zh/concepts/visual-map/state.js b/docs/_nuxt/static/1627547170/zh/concepts/visual-map/state.js
new file mode 100644
index 0000000..61b15f1
--- /dev/null
+++ b/docs/_nuxt/static/1627547170/zh/concepts/visual-map/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\u002F1627547170",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:h,children:[{title:"获取 ECharts",dir:i},{title:"在项目中引入 ECharts",dir [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1627547170/zh/get-started/payload.js b/docs/_nuxt/static/1627547170/zh/get-started/payload.js
new file mode 100644
index 0000000..29d97f9
--- /dev/null
+++ b/docs/_nuxt/static/1627547170/zh/get-started/payload.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("/zh/get-started", (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:"get-started",toc:[{id:y,depth:r,text:z},{id:A,depth:r,text:B},{id:h,depth:r,text:h}],body:{type:"root",children:[{type:b,tag:"h1",props:{id:C},children:[{type:b,tag:d,props:{href:"#%E5%BF%AB%E9%80%9F%E4%B8%8A%E6%89%8B",ariaHidden:i,tabIndex:j},children:[{type:b,tag:k,props:{className:[l,m]},children:[]}]},{type:a,value:C}]},{type:a,value:c},{type: [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1627547170/zh/get-started/state.js b/docs/_nuxt/static/1627547170/zh/get-started/state.js
new file mode 100644
index 0000000..b85c110
--- /dev/null
+++ b/docs/_nuxt/static/1627547170/zh/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\u002F1627547170",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:h,children:[{title:"获取 ECharts",dir:i},{title:"在项目中引入 ECharts",dir [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1627547170/zh/meta/edit-guide/payload.js b/docs/_nuxt/static/1627547170/zh/meta/edit-guide/payload.js
new file mode 100644
index 0000000..1578f2c
--- /dev/null
+++ b/docs/_nuxt/static/1627547170/zh/meta/edit-guide/payload.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("/zh/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){return {data:[{article:{slug:"edit-guide",toc:[{id:M,depth:q,text:N},{id:O,depth:q,text:P},{id:w,depth:q,text:w},{id:x,depth:q,text:x},{id:y,depth:t,text:y},{id:z,depth:t,text:z},{id:A,depth:t,text:A},{id:B,depth:t,text:B},{id:C,depth:t,text:C},{id:D,depth:q,text:D},{id:E,depth:t,text:E},{id:Q,depth:q,text:R},{id:F,depth:q,t [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1627547170/zh/meta/edit-guide/state.js b/docs/_nuxt/static/1627547170/zh/meta/edit-guide/state.js
new file mode 100644
index 0000000..e6416cc
--- /dev/null
+++ b/docs/_nuxt/static/1627547170/zh/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\u002F1627547170",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:h,children:[{title:"获取 ECharts",dir:i},{title:"在项目中引入 ECharts",dir [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1627547170/zh/payload.js b/docs/_nuxt/static/1627547170/zh/payload.js
new file mode 100644
index 0000000..4efbd7b
--- /dev/null
+++ b/docs/_nuxt/static/1627547170/zh/payload.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("/zh", {data:[{}],fetch:{},mutations:[]});
\ No newline at end of file
diff --git a/docs/_nuxt/static/1627547170/zh/state.js b/docs/_nuxt/static/1627547170/zh/state.js
new file mode 100644
index 0000000..b3be997
--- /dev/null
+++ b/docs/_nuxt/static/1627547170/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\u002F1627547170",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:h,children:[{title:"获取 ECharts",dir:i},{title:"在项目中引入 ECharts",dir [...]
\ No newline at end of file
diff --git a/docs/en/basics/download/index.html b/docs/en/basics/download/index.html
new file mode 100644
index 0000000..177d89b
--- /dev/null
+++ b/docs/en/basics/download/index.html
@@ -0,0 +1,31 @@
+<!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="Apache 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 [...]
+ </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>Apache ECharts offers a variety of installation options, so you can choose any of the following options depending on your project.</p>
+<ul>
+<li>Use From GitHub</li>
+<li>Use From npm</li>
+<li>Use From CDN</li>
+<li>Online Customization</li>
+</ul>
+<p>We'll go over each of these installation methods and the directory structure after download.</p>
+<h2 id="installation"><a href="#installation" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Installation</h2>
+<h3 id="use-from-github"><a href="#use-from-github" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Use From GitHub</h3>
+<p>You can find links to each version on the <a href="https://github.com/apache/echarts/releases" rel="nofollow noopener noreferrer" target="_blank">release</a> page of the <a href="https://github.com/apache/echarts" rel="nofollow noopener noreferrer" target="_blank">apache/echarts</a> project. Click on the Source code in Assets at the bottom of the download page, and unzip the <code>echarts.js</code> file in the <code>dist</code> directory to include the full ECharts functionality.</p>
+<h3 id="use-from-npm"><a href="#use-from-npm" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Use From npm</h3>
+<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" [...]
+<p>See <a href="en/basics/import">Introducing Apache ECharts in your project</a> for details.</p>
+<h3 id="use-from-cdn"><a href="#use-from-cdn" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Use From CDN</h3>
+<p>Recommend referencing <a href="https://www.jsdelivr.com/package/npm/echarts" rel="nofollow noopener noreferrer" target="_blank">echarts</a> from jsDelivr.</p>
+<h3 id="online-customization"><a href="#online-customization" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Online Customization</h3>
+<p>If you want to introduce only some modules to reduce package size, you can use the <a href="https://echarts.apache.org//builder.html" rel="nofollow noopener noreferrer" target="_blank">ECharts online customization</a> function.</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/basics/download#installation">Installation</a></li><li class="toc3"><a href="/echarts-handbook/en/basics/download#use- [...]
+ <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/basics/help/index.html b/docs/en/basics/help/index.html
new file mode 100644
index 0000000..9d4e675
--- /dev/null
+++ b/docs/en/basics/help/index.html
@@ -0,0 +1,36 @@
+<!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="Apache 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 [...]
+ </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="technical-problems"><a href="#technical-problems" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Technical Problems</h2>
+<h3 id="make-sure-that-existing-documentation-do-not-solve-your-problem"><a href="#make-sure-that-existing-documentation-do-not-solve-your-problem" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Make sure that existing documentation do not solve your problem</h3>
+<p>ECharts has a very large number of users, so it's likely that someone else has encountered and solved a problem you've had before. By looking at the documentation and using the search engine, you can help yourself to solve the problem in the first place without relying on the community for help.</p>
+<p>Therefore, before doing anything else, make sure that existing documentation and other resources do not solve your problem. Reources that can be helpful include:</p>
+<ul>
+<li><a href="https://echarts.apache.org//api.html" rel="nofollow noopener noreferrer" target="_blank">API</a></li>
+<li><a href="https://echarts.apache.org//option.html" rel="nofollow noopener noreferrer" target="_blank">Option Manual</a>: you can try to use the search function</li>
+<li>Articles in this handbook</li>
+<li><a href="https://echarts.apache.org//faq.html" rel="nofollow noopener noreferrer" target="_blank">FAQ</a></li>
+<li>Searching in <a href="https://github.com/apache/echarts/issues" rel="nofollow noopener noreferrer" target="_blank">GitHub issue</a></li>
+<li>Using the search engine</li>
+</ul>
+<h3 id="create-the-minimal-reproducible-demo"><a href="#create-the-minimal-reproducible-demo" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Create the Minimal Reproducible Demo</h3>
+<p>Create an example on <a href="https://codepen.io/Ovilia/pen/dyYWXWM" rel="nofollow noopener noreferrer" target="_blank">Codepen</a>, <a href="https://codesandbox.io/s/mystifying-bash-2uthz" rel="nofollow noopener noreferrer" target="_blank">Codesandbox</a>, which will make it easier for others to reproduce your problem.</p>
+<p>The example should reproduce your problem in the simplest way possible. Removing unnecessary code and data will allow those who help you to locate the problem more quickly, thus allowing your problem to be solved more quickly. See <a href="https://stackoverflow.com/help/minimal-reproducible-example" rel="nofollow noopener noreferrer" target="_blank">How to Create a Minimal, Reproducible Example</a> for a more detailed description.</p>
+<h3 id="determining-if-its-a-bug"><a href="#determining-if-its-a-bug" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Determining if It's a Bug</h3>
+<h4 id="report-a-bug-or-request-a-new-feature"><a href="#report-a-bug-or-request-a-new-feature" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Report a Bug or Request a New Feature</h4>
+<p>If it doesn't match the documentation or your intended result, it's probably a bug. If it's a bug, or you have a feature request, use the <a href="https://ecomfe.github.io/echarts-issue-helper/" rel="nofollow noopener noreferrer" target="_blank">issue template</a> to create a new issue and follow the prompts to describe it in detail.</p>
+<h4 id="how-to-questions"><a href="#how-to-questions" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>How-To Questions</h4>
+<p>If it's not a bug, but you don't know how to achieve something, try the <a href="https://stackoverflow.com">stackoverflow.com</a></p>
+<p>If you don't get an answer, you can also send an email to the email group <a href="mailto:dev@echarts.apache.org">dev@echarts.apache.org</a>. In order for more people to understand your question and to get help in future searches, it is highly recommended to send emails in English.</p>
+<h2 id="non-technical-questions"><a href="#non-technical-questions" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Non-technical questions</h2>
+<p>Other questions can be sent in English to the mail group <a href="mailto:dev@echarts.apache.org">dev@echarts.apache.org</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/basics/help#technical-problems">Technical Problems</a></li><li class="toc3"><a href="/echarts-handbook/en/basics/help#make-sure-that-existing-documentation-do-not-solve-your-problem">Make sure that existing documentation [...]
+ <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/basics/import/index.html b/docs/en/basics/import/index.html
new file mode 100644
index 0000000..f938cb8
--- /dev/null
+++ b/docs/en/basics/import/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="Apache 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 [...]
+ </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>If your development environment uses a package management tool like <code>npm</code> or <code>yarn</code> and builds with a packaging tool like Webpack, this article will describe how to get a minimal bundle of Apache ECharts<sup>TM</sup> via treeshaking.</p>
+<h2 id="npm-installation-of-echarts"><a aria-hidden="true" href="#npm-installation-of-echarts" tabindex="-1"><span class="icon icon-link"></span></a>NPM Installation of ECharts</h2>
+<p>You can install ECharts via npm using the following command</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-shell 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="introduce-echarts"><a aria-hidden="true" href="#introduce-echarts" tabindex="-1"><span class="icon icon-link"></span></a>Introduce ECharts</h2>
+<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="importing-required-charts-and-components-to-have-minimal-bundle"><a aria-hidden="true" href="#importing-required-charts-and-components-to-have-minimal-bundle" tabindex="-1"><span class="icon icon-link"></span></a>Importing Required Charts and Components to Have Minimal Bundle.</h2>
+<p>The above code will import all the charts and components in ECharts, but if you don't want to bring in all the components, you can use the tree-shakeable interface provided by ECharts to bundle the required components and get a minimal bundle.</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 that in order to keep the size of the package to a minimum, ECharts does not provide any renderer in tree-shakeable interface, so you need to choose to import <code>CanvasRenderer</code> or <code>SVGRenderer</code> as the renderer. The advantage of this is that if you only need to use the svg rendering mode, the bundle will not include the <code>CanvasRenderer</code> module, which is not needed.</p>
+</blockquote>
+<p>The "Full Code" tab on our sample editor page provides a very convenient way to generate a tree-shakable code. It will generate tree-shakable code based on the current option dynamically. You can use it directly in your project.</p>
+<h2 id="minimal-option-type-in-typescript"><a aria-hidden="true" href="#minimal-option-type-in-typescript" tabindex="-1"><span class="icon icon-link"></span></a>Minimal Option Type in TypeScript</h2>
+<p>For developers who are using TypeScript to develop ECharts, we provide a type interface to combine the minimal <code>EChartsOption</code> type. This stricter type can effectively help you check for missing components or charts.</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 [...]
+ <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/basics/inspiration/index.html b/docs/en/basics/inspiration/index.html
new file mode 100644
index 0000000..260dde9
--- /dev/null
+++ b/docs/en/basics/inspiration/index.html
@@ -0,0 +1,18 @@
+<!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="Apache 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 [...]
+ </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 following list provides some ideas when you have a question "I don't know how to design a chart" or "I don't know how to use Apache ECharts to achieve a certain effect".</p>
+<ul>
+<li><a href="https://echarts.apache.org//examples" rel="nofollow noopener noreferrer" target="_blank">Apache ECharts Official Examples</a></li>
+<li>"Applications - Common Charts" in this handbook</li>
+</ul></div> <div class="table-of-contents"><h4 class="toc-container-header">In This Page</h4> <ul></ul></div></div> <div class="post-contributors"><h3><span class="inline-block align-middle">本文贡献者</span> <a target="_blank" href="https://github.com/apache/echarts-handbook/tree/master/contents/en/basics/inspiration.md" title="编辑本文" class="inline-block align-middle text-sm"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-8 w-8 inline-bl [...]
+ <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/aria/index.html b/docs/en/best-practice/aria/index.html
new file mode 100644
index 0000000..f7e43f4
--- /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="Apache 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 [...]
+ </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..b9c16b3
--- /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="Apache 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 [...]
+ </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..c64df80
--- /dev/null
+++ b/docs/en/concepts/axis/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="Apache 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 [...]
+ </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>
+<p>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.</p>
+<p><img max-width="830" width="100%" height="100%" src="images/design/axis/charts_axis_img02.jpg">
+</p>
+<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 [...]
+<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 [...]
+<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 [...]
+<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 [...]
+<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>
+<div class="nuxt-content-highlight"><!----></div>
+<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..54937b3
--- /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="Apache 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 [...]
+ </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="en/get-started">Get Started</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 following c [...]
+<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="define-a-parent-container-in-html"><a href="#define-a-parent-container-in-html" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>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="specify-the-chart-size"><a href="#specify-the-chart-size" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>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="listen-to-the-container-size-to-change-the-chart-size"><a href="#listen-to-the-container-size-to-change-the-chart-size" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>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="state-a-specific-chart-size"><a href="#state-a-specific-chart-size" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>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="dispose-and-rebuild-of-the-container-node"><a href="#dispose-and-rebuild-of-the-container-node" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>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#define-a-parent-container-in-html">Define a Parent Container in HTML</a></li><li class="toc3"><a href="/echarts-handbook/en/concepts/chart-size#specify-the-chart-size">Specify the chart size</a></li><li class="toc [...]
+ <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..a72cdd2
--- /dev/null
+++ b/docs/en/concepts/data-transform/index.html
@@ -0,0 +1,129 @@
+<!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="Apache 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 [...]
+ </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="~https://echarts.apache.org/option.html##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>
+<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" 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="filter-transform"><a href="#filter-transform" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Filter Transform</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>
+<p>This is another example of filter transform:</p>
+<iframe width="100%" height="350" src="https://echarts.apache.org/examples/en/view.html?c=data-transform-filter"></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="100%" height="350" src="https://echarts.apache.org/examples/en/view.html?c=data-transform-sort-bar"></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="100%" height="350" src="https://echarts.apache.org/examples/en/view.html?c=doc-example/data-transform-multiple-sort-bar"></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#filter-transform">Filter Transform</a></li><li class="toc2"><a href="/ech [...]
+ <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..6d6c47b
--- /dev/null
+++ b/docs/en/concepts/dataset/index.html
@@ -0,0 +1,127 @@
+<!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="Apache 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 [...]
+ </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 manage 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>
+<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
+Easy to manage separately.</li>
+<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>
+<p>Or try to use the "array of classes" format:</p>
+<div class="nuxt-content-highlight"><!----></div>
+<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>
+<p>The effect of configuration is shown in <a href="https://echarts.apache.org/examples/en/editor.html?c=dataset-series-layout-by" 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" re [...]
+<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>
+<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" 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): + If there is category axis (axis.type = 'category'), map the first column(row) to the axis and each subsequent column(row) to each series. + If both axes is not the category, then map every two columns in one series to two axes.</li>
+<li>Without axis (such as Pie Chart): + 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>
+<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" 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>
+<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" 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" 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"><a href="/echar [...]
+ <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..af47b6b
--- /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="Apache 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 [...]
+ </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..7ff7e42
--- /dev/null
+++ b/docs/en/concepts/legend/index.html
@@ -0,0 +1,32 @@
+<!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="Apache 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 [...]
+ </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 is one of the key to understand the chart.</p>
+<h2 id="layout"><a aria-hidden="true" href="#layout" tabindex="-1"><span class="icon icon-link"></span></a>Layout</h2>
+<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>
+<div class="nuxt-content-highlight"><!----></div>
+<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 [...]
+<h2 id="style"><a aria-hidden="true" href="#style" tabindex="-1"><span class="icon icon-link"></span></a>Style</h2>
+<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 [...]
+<p>The color of legend has many ways to design. For different charts, the legend style can be different.</p>
+<img max-width="830" width="80%" height="80%" src="images/design/legend/charts_sign_img04.png">
+<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="interactive"><a aria-hidden="true" href="#interactive" 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 aria-hidden="true" href="#tips" tabindex="-1"><span class="icon icon-link"></span></a>Tips</h2>
+<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 [...]
+<p>While there is only one kind of data in the chart, use the chart title rather than the legend to explain it.</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">Style</a></li><li class="toc2"><a href="/echarts-handbook/en/concepts/legend#interactive">Interactive</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/style/index.html b/docs/en/concepts/style/index.html
new file mode 100644
index 0000000..f44ca26
--- /dev/null
+++ b/docs/en/concepts/style/index.html
@@ -0,0 +1,49 @@
+<!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="Apache 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 [...]
+ </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>This article provides an overview of the different approaches about Apache ECharts<sup>TM</sup> style customization. For example, how to config the color, size, shadow of the graphic elements and labels.</p>
+<blockquote>
+<p>The term "style" may not follow the convention of data visualization, but we use it in this article because it is popular and easy to understand.</p>
+</blockquote>
+<p>These approaches below will be introduced. The functionalities of them might be overlapped, but they are suitable for different scenarios.</p>
+<ul>
+<li>Theme</li>
+<li>Color Palette</li>
+<li>Customize style explicitly (itemStyle, lineStyle, areaStyle, label, ...)</li>
+<li>Visual encoding (visualMap component)</li>
+</ul>
+<h2 id="theme"><a href="#theme" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Theme</h2>
+<p>Setting a theme is the simplest way to change the color style. For example, in <a href="$%7BwebsitePath%7D/examples/en/index.html">Examples page</a>, we can switch to dark mode and see the result of a different theme.</p>
+<p>In our project, we can switch to dark theme 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>Other themes are not included by default, and need to load them ourselves if we want to use them. Themes can be visited and downloaded in the <a href="https://echarts.apache.org/en/theme-builder.html" rel="nofollow noopener noreferrer" target="_blank">theme builder</a>. Theme can also be created or edited in it. The downloaded theme can be used as follows:</p>
+<p>If a theme is downloaded as a JSON file, we should register it by ourselves, 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>If a theme is downloaded as a JS file, it will auto register itself:</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="color-palette"><a href="#color-palette" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Color Palette</h2>
+<p>Color palette can be given in option. They provide a group of colors, which will be auto picked by series and data. We can give a global palette, or exclusive pallette for certain series.</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="customize-style-explicitly-itemstyle-linestyle-areastyle-label-"><a href="#customize-style-explicitly-itemstyle-linestyle-areastyle-label-" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Customize Style Explicitly (itemStyle, lineStyle, areaStyle, label, ...)</h2>
+<p>It is a common way to set style explicitly. Throughout ECharts <a href="https://echarts.apache.org/option.html#" rel="nofollow noopener noreferrer" target="_blank">option</a>, style related options can be set in various place, including <a href="https://echarts.apache.org/option.html#series.itemStyle" rel="nofollow noopener noreferrer" target="_blank">itemStyle</a>, <a href="https://echarts.apache.org/option.html#series-line.lineStyle" rel="nofollow noopener noreferrer" target="_blank [...]
+<p>Generally speaking, all of the built-in components and series follow the naming convention like <code>itemStyle</code>, <code>lineStyle</code>, <code>areaStyle</code>, <code>label</code> etc, although they may occur in different place according to different series or components.</p>
+<p>In the following code we add shadow, gradient to bubble chart.</p>
+<div class="nuxt-content-highlight"><!----></div>
+<h2 id="style-of-emphasis-state"><a href="#style-of-emphasis-state" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Style of Emphasis State</h2>
+<p>When mouse hovering a graphic elements, usually the emphasis style will be displayed. By default, the emphasis style is auto generated by the normal style. However they can be specified by <a href="https://echarts.apache.org/option.html#series-bar.emphasis" rel="nofollow noopener noreferrer" target="_blank">emphasis</a> property. The options in <a href="https://echarts.apache.org/option.html#series-bar.emphasis" rel="nofollow noopener noreferrer" target="_blank">emphasis</a> is the sa [...]
+<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>Notice: Before ECharts4, the emphasis style should be written like this:</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 option format is still <strong>compatible</strong>, but not recommended. In fact, in most cases, users only set normal style, and use the default emphasis style. So since ECharts4, we support to write style without the "normal" term, which makes the option more simple and neat.</p>
+<h2 id="visual-encoding-by-visualmap-component"><a href="#visual-encoding-by-visualmap-component" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Visual Encoding by visualMap Component</h2>
+<p><a href="https://echarts.apache.org/option.html#visualMap" rel="nofollow noopener noreferrer" target="_blank">visualMap component</a> supports config the rule that mapping value to visual channel (color, size, ...). More details can be check in <a href="~Visual%20Map%20of%20Data">Visual Map of Data</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/style#theme">Theme</a></li><li c [...]
+ <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/visual-map/index.html b/docs/en/concepts/visual-map/index.html
new file mode 100644
index 0000000..2804e0d
--- /dev/null
+++ b/docs/en/concepts/visual-map/index.html
@@ -0,0 +1,49 @@
+<!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="Apache 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 [...]
+ </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>Data visualization is a procedure of mapping data into visual elements. This procedure can also be called visual coding, and visual elements can also be called visual channels.</p>
+<p>Every type of charts in Apache ECharts<sup>TM</sup> has this built-in mapping procedure. For example, line chart map data into <em>lines</em>, bar chart map data into <em>height</em>. Some more complicated charts, like <code>graph</code>, <code>themeRiver</code>, and <code>treemap</code> have their own built-in mapping.</p>
+<p>Besides, ECharts provides <a href="https://echarts.apache.org/option.html#visualMap" rel="nofollow noopener noreferrer" target="_blank">visualMap component</a> for general visual mapping. Visual elements allowed in <code>visualMap</code> component are:</p>
+<ul>
+<li><code>symbol</code>, <code>symbolSize</code></li>
+<li><code>color</code>, <code>opacity</code>, <code>colorAlpha</code>,</li>
+<li><code>colorLightness</code>, <code>colorSaturation</code>, <code>colorHue</code></li>
+</ul>
+<p>Next, we are going to introduce how to use <code>visualMap</code> component.</p>
+<h2 id="data-and-dimension"><a href="#data-and-dimension" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Data and Dimension</h2>
+<p>Data are usually stored in <a href="https://echarts.apache.org/option.html#series.data" rel="nofollow noopener noreferrer" target="_blank">series.data</a> in ECharts. Depending on chart types, like list, tree, graph, and so on, the form of data may vary somehow. But they have one common feature, that they are a collection of data items. Every data item contains data value, and other information if needed. Every data value can be a single value (one dimension) or an array (multiple dim [...]
+<p>For example, <a href="https://echarts.apache.org/option.html#series.data" rel="nofollow noopener noreferrer" target="_blank">series.data</a> is the most common form, which is a <code>list</code>, a common array:</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>Usually the first one or two dimensions are used for mapping. For example, map the first dimension to x axis, and the second dimension to y axis. If you want to represent more dimensions, <code>visualMap</code> is what you need. Most likely, <a href="https://echarts.apache.org/option.html#series-scatter" rel="nofollow noopener noreferrer" target="_blank">scatter charts</a> use radius to represent the third dimension.</p>
+<h2 id="the-visualmap-component"><a href="#the-visualmap-component" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>The visualMap Component</h2>
+<p>visualMap component defines the mapping from <em>which dimension of data</em> to <em>what visual elements</em>.</p>
+<p>The following two types of visualMap components are supported, identified with <a href="https://echarts.apache.org/option.html#visualMap.type" rel="nofollow noopener noreferrer" target="_blank">visualMap.type</a>.</p>
+<p>Its structure is defined 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 [...]
+<h2 id="continuous-and-piecewise-visual-mapping-components"><a href="#continuous-and-piecewise-visual-mapping-components" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Continuous and Piecewise Visual Mapping Components</h2>
+<p>The visual mapping component of ECharts is divided into continuous (<a href="https://echarts.apache.org/option.html#visualMap-continuous" rel="nofollow noopener noreferrer" target="_blank">visualMapContinuous</a>) and piecewise (<a href="https://echarts.apache.org/option.html#visualMap-piecewise" rel="nofollow noopener noreferrer" target="_blank">visualMapPiecewise</a>).</p>
+<p>Continuous means that the data dimension for visual mapping is a continuous value, while piecewise means that the data is divided into multiple segments or discrete data.</p>
+<h3 id="continuous-visual-mapping"><a href="#continuous-visual-mapping" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Continuous Visual Mapping</h3>
+<p>Continuous type visual mapping can determine the range of visual mapping by specifying the maximum and minimum values.</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>where <a href="https://echarts.apache.org/option.html#visualMap.inRange" rel="nofollow noopener noreferrer" target="_blank">visualMap.inRange</a> indicates the style used for data within the data mapping range; while <a href="https://echarts.apache.org/option.html#visualMap.outOfRange" rel="nofollow noopener noreferrer" target="_blank">visualMap.outOfRange</a> specifies the style for data outside the mapping range.</p>
+<p><a href="~visualMap.dimension">visualMap.dimension</a> specifies which dimension of the data will be visually mapped.</p>
+<h3 id="piecewise-visual-mapping"><a href="#piecewise-visual-mapping" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Piecewise Visual Mapping</h3>
+<p>The piecewise visual mapping component has three modes.</p>
+<ul>
+<li>Continuous data average segmentation: based on <a href="https://echarts.apache.org/option.html#visualMap-piecewise.splitNumber" rel="nofollow noopener noreferrer" target="_blank">visualMap-piecewise.splitNumber</a> to automatically split the data into pieces equally.</li>
+<li>Continuous data custom segmentation: define the range of each piece based on <a href="https://echarts.apache.org/option.html#visualMap-piecewise.pieces" rel="nofollow noopener noreferrer" target="_blank">visualMap-piecewise.pieces</a>.</li>
+<li>Discrete data (categorical data): categories are defined in <a href="https://echarts.apache.org/option.html#visualMap-piecewise.categories" rel="nofollow noopener noreferrer" target="_blank">visualMap-piecewise.categories</a>.</li>
+</ul>
+<p>To use segmented visual map, you need to set <code>type</code> to <code>'piecewise'</code> and choose one of the above three configuration items.</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/visual-map#data-and-dimension">Data and Dimension</a></li><li class="toc2"><a href="/echarts-handbook/en/concepts/visual-map#the-visualmap-component">The visualMap Component</a></li><li class [...]
+ <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..59a8105
--- /dev/null
+++ b/docs/en/get-started/index.html
@@ -0,0 +1,30 @@
+<!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="Apache 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 [...]
+ </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="getting-apache-echarts"><a href="#getting-apache-echarts" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Getting Apache ECharts</h2>
+<p>Apache ECharts supports several download methods, which are further explained in the next tutorial <a href="en/basics/download">Installation</a>. Here, we take the example of getting it from the <a href="https://www.jsdelivr.com/package/npm/echarts" rel="nofollow noopener noreferrer" target="_blank">jsDelivr</a> CDN and explain how to install it quickly.</p>
+<p>At <a href="https://www.jsdelivr.com/package/npm/echarts" rel="nofollow noopener noreferrer" target="_blank">https://www.jsdelivr.com/package/npm/echarts</a> select <code>dist/echarts.js</code>, click and save it as <code>echarts.js</code> file.</p>
+<blockquote>
+<p>More information about these files can be found in the next tutorial <a href="en/basics/download">Installation</a>.</p>
+</blockquote>
+<h2 id="including-echarts"><a href="#including-echarts" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Including ECharts</h2>
+<p>Create a new <code>index.html</code> file in the directory where you just saved <code>echarts.js</code>, with the following content:</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>When you open this <code>index.html</code>, you will see an empty page. But don't worry. Open the console and make sure that no error message is reported, then you can proceed to the next step.</p>
+<h2 id="plotting-a-simple-chart"><a href="#plotting-a-simple-chart" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Plotting a Simple Chart</h2>
+<p>Before drawing we need to prepare a DOM container for ECharts with a defined height and width. After the following code after the <code></head></code> tag introduced earlier.</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>Then you can initialize an echarts instance with the <a href="https://echarts.apache.org//api.html#echarts.init" rel="nofollow noopener noreferrer" target="_blank">echarts.init</a> method and set the echarts instance with [setOption](<a href="https://echarts.apache.org//api.html#" rel="nofollow noopener noreferrer" target="_blank">https://echarts.apache.org//api.html#</a> echartsInstance.setOption) method to generate a simple bar chart。 Here is the complete code.</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>And this is your first chart with Apache ECharts!</p>
+<iframe width="100%" height="350" src="https://echarts.apache.org/examples/en/view.html?c=doc-example/getting-started&reset=1&edit=1"></iframe></div> <div class="table-of-contents"><h4 class="toc-container-header">In This Page</h4> <ul><li class="toc2"><a href="/echarts-handbook/en/get-started#getting-apache-echarts">Getting Apache ECharts</a></li><li class="toc2"><a href="/echarts-handbook/en/get-started#including-echarts">Including ECharts</a></li><li class="toc2"><a href="/echarts-han [...]
+ <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/index.html b/docs/en/index.html
new file mode 100644
index 0000000..ec1b15d
--- /dev/null
+++ b/docs/en/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="Apache 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 [...]
+ </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..a4dd18e
--- /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="Apache 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 [...]
+ </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..29c1243
--- /dev/null
+++ b/docs/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="Apache 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 [...]
+ </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/zh/basics/download/index.html b/docs/zh/basics/download/index.html
new file mode 100644
index 0000000..0225029
--- /dev/null
+++ b/docs/zh/basics/download/index.html
@@ -0,0 +1,31 @@
+<!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="Apache 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 [...]
+ </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>Apache ECharts 提供了多种安装方式，你可以根据项目的实际情况选择以下任意一种方式安装。</p>
+<ul>
+<li>从 GitHub 获取</li>
+<li>从 npm 获取</li>
+<li>从 CDN 获取</li>
+<li>在线定制</li>
+</ul>
+<p>接下来我们将分别介绍这些安装方式，以及下载后的目录结构。</p>
+<h2 id="安装方式"><a href="#%E5%AE%89%E8%A3%85%E6%96%B9%E5%BC%8F" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>安装方式</h2>
+<h3 id="从-github-获取"><a href="#%E4%BB%8E-github-%E8%8E%B7%E5%8F%96" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>从 GitHub 获取</h3>
+<p><a href="https://github.com/apache/echarts" rel="nofollow noopener noreferrer" target="_blank">apache/echarts</a> 项目的 <a href="https://github.com/apache/echarts/releases" rel="nofollow noopener noreferrer" target="_blank">release</a> 页面可以找到各个版本的链接。点击下载页面下方 Assets 中的 Source code，解压后 <code>dist</code> 目录下的 <code>echarts.js</code> 即为包含完整 ECharts 功能的文件。</p>
+<h3 id="从-npm-获取"><a href="#%E4%BB%8E-npm-%E8%8E%B7%E5%8F%96" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>从 npm 获取</h3>
+<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" [...]
+<p>详见<a href="zh/basics/import">在项目中引入 Apache ECharts</a>。</p>
+<h3 id="从-cdn-获取"><a href="#%E4%BB%8E-cdn-%E8%8E%B7%E5%8F%96" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>从 CDN 获取</h3>
+<p>推荐从 jsDelivr 引用 <a href="https://www.jsdelivr.com/package/npm/echarts" rel="nofollow noopener noreferrer" target="_blank">echarts</a>。</p>
+<h3 id="在线定制"><a href="#%E5%9C%A8%E7%BA%BF%E5%AE%9A%E5%88%B6" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>在线定制</h3>
+<p>如果只想引入部分模块以减少包体积，可以使用 <a href="https://echarts.apache.org//builder.html" rel="nofollow noopener noreferrer" target="_blank">ECharts 在线定制</a>功能。</p></div> <div class="table-of-contents"><h4 class="toc-container-header">本页目录</h4> <ul><li class="toc2"><a href="/echarts-handbook/zh/basics/download#%E5%AE%89%E8%A3%85%E6%96%B9%E5%BC%8F">安装方式</a></li><li class="toc3"><a href="/echarts-handbook/zh/basics/download#%E4%BB%8E-github-%E8%8E%B7%E5%8F%96">从 GitHub 获取</a></li><li class="toc3"><a hre [...]
+ <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/basics/help/index.html b/docs/zh/basics/help/index.html
new file mode 100644
index 0000000..e2e5db5
--- /dev/null
+++ b/docs/zh/basics/help/index.html
@@ -0,0 +1,36 @@
+<!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="Apache 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 [...]
+ </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="技术问题"><a href="#%E6%8A%80%E6%9C%AF%E9%97%AE%E9%A2%98" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>技术问题</h2>
+<h3 id="确保现有文档等资料无法解决你的问题"><a href="#%E7%A1%AE%E4%BF%9D%E7%8E%B0%E6%9C%89%E6%96%87%E6%A1%A3%E7%AD%89%E8%B5%84%E6%96%99%E6%97%A0%E6%B3%95%E8%A7%A3%E5%86%B3%E4%BD%A0%E7%9A%84%E9%97%AE%E9%A2%98" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>确保现有文档等资料无法解决你的问题</h3>
+<p>ECharts 有非常大量的用户，所以你遇到过的问题，很可能别人在此之前也遇到并解决了。通过查看文档以及使用搜索引擎搜索关键字，可以帮助你自助地在第一时间解决问题，而不需要依赖社区的帮助。</p>
+<p>因此，在做其他操作前，请确保现有文档等资料无法解决你的问题。可以尝试查看或搜索的资料包括：</p>
+<ul>
+<li><a href="https://echarts.apache.org//api.html" rel="nofollow noopener noreferrer" target="_blank">API</a></li>
+<li><a href="https://echarts.apache.org//option.html" rel="nofollow noopener noreferrer" target="_blank">配置项手册</a>：可以尝试使用搜索功能</li>
+<li>本手册的文章</li>
+<li><a href="https://echarts.apache.org//faq.html" rel="nofollow noopener noreferrer" target="_blank">常见问题</a></li>
+<li>在 <a href="https://github.com/apache/echarts/issues" rel="nofollow noopener noreferrer" target="_blank">GitHub issue</a> 中搜索关键字</li>
+<li>使用搜索引擎搜索关键字</li>
+</ul>
+<h3 id="创建一个最简单可复现的例子"><a href="#%E5%88%9B%E5%BB%BA%E4%B8%80%E4%B8%AA%E6%9C%80%E7%AE%80%E5%8D%95%E5%8F%AF%E5%A4%8D%E7%8E%B0%E7%9A%84%E4%BE%8B%E5%AD%90" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>创建一个最简单可复现的例子</h3>
+<p>使用 <a href="https://codepen.io/Ovilia/pen/dyYWXWM" rel="nofollow noopener noreferrer" target="_blank">Codepen</a>、<a href="https://codesandbox.io/s/mystifying-bash-2uthz" rel="nofollow noopener noreferrer" target="_blank">Codesandbox</a> 或者 <a href="https://www.makeapie.com/" rel="nofollow noopener noreferrer" target="_blank">makeapie.com</a> 创建一个例子，这将使得他人更方便地复现你的问题。</p>
+<p>例子应尽可能以最简单的方式复现你的问题，去除不必要的配置项和数据，可以让帮助你的人更快速地定位问题，从而让你的问题更快得到解决。更详细的介绍请参见 <a href="https://stackoverflow.com/help/minimal-reproducible-example" rel="nofollow noopener noreferrer" target="_blank">How to create a Minimal, Reproducible Example</a>。</p>
+<h3 id="判断是否是-bug"><a href="#%E5%88%A4%E6%96%AD%E6%98%AF%E5%90%A6%E6%98%AF-bug" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>判断是否是 bug</h3>
+<h4 id="报告-bug-或请求新功能"><a href="#%E6%8A%A5%E5%91%8A-bug-%E6%88%96%E8%AF%B7%E6%B1%82%E6%96%B0%E5%8A%9F%E8%83%BD" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>报告 bug 或请求新功能</h4>
+<p>如果不符合文档描述或你的预期效果，这很有可能是 bug。如果是 bug，或者你有一个想请求实现的功能，请使用 <a href="https://ecomfe.github.io/echarts-issue-helper/" rel="nofollow noopener noreferrer" target="_blank">issue 模板</a> 中新建一个 issue 并按照提示详细描述。</p>
+<h4 id="咨询类问题"><a href="#%E5%92%A8%E8%AF%A2%E7%B1%BB%E9%97%AE%E9%A2%98" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>咨询类问题</h4>
+<p>如果不是 bug，而是不知道如何实现某种效果，可以尝试在 <a href="https://stackoverflow.com">stackoverflow.com</a>、<a href="https://www.oschina.net/question/tag/echarts">开源中国</a> 或 <a href="https://segmentfault.com/t/echarts">segmentfault.com</a> 等问答平台上提问。</p>
+<p>如果没能得到答复，也可以发送邮件至邮件组 <a href="mailto:dev@echarts.apache.org">dev@echarts.apache.org</a>。为了让更多人理解你的问题，并且在将来搜索的时候得到帮助，强烈建议使用英文发送邮件。</p>
+<h2 id="非技术类问题"><a href="#%E9%9D%9E%E6%8A%80%E6%9C%AF%E7%B1%BB%E9%97%AE%E9%A2%98" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>非技术类问题</h2>
+<p>其他问题可以发送英文邮件至邮件组 <a href="mailto:dev@echarts.apache.org">dev@echarts.apache.org</a>。</p></div> <div class="table-of-contents"><h4 class="toc-container-header">本页目录</h4> <ul><li class="toc2"><a href="/echarts-handbook/zh/basics/help#%E6%8A%80%E6%9C%AF%E9%97%AE%E9%A2%98">技术问题</a></li><li class="toc3"><a href="/echarts-handbook/zh/basics/help#%E7%A1%AE%E4%BF%9D%E7%8E%B0%E6%9C%89%E6%96%87%E6%A1%A3%E7%AD%89%E8%B5%84%E6%96%99%E6%97%A0%E6%B3%95%E8%A7%A3%E5%86%B3%E4%BD%A0%E7%9A%84%E9%97%AE%E9 [...]
+ <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/basics/import/index.html b/docs/zh/basics/import/index.html
new file mode 100644
index 0000000..c158712
--- /dev/null
+++ b/docs/zh/basics/import/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="Apache 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 [...]
+ </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>npm</code>或者<code>yarn</code>等包管理工具，并且使用 Webpack 等打包工具进行构建，本文将会介绍如何引入 Apache ECharts<sup>TM</sup> 并通过 treeshaking 特性只打包需要的模块。</p>
+<h2 id="npm-安装-echarts"><a aria-hidden="true" href="#npm-%E5%AE%89%E8%A3%85-echarts" tabindex="-1"><span class="icon icon-link"></span></a>NPM 安装 ECharts</h2>
+<p>你可以使用如下命令通过 npm 安装 ECharts</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-shell 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="引入-echarts"><a aria-hidden="true" href="#%E5%BC%95%E5%85%A5-echarts" tabindex="-1"><span class="icon icon-link"></span></a>引入 ECharts</h2>
+<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="按需引入-echarts-图表和组件"><a aria-hidden="true" href="#%E6%8C%89%E9%9C%80%E5%BC%95%E5%85%A5-echarts-%E5%9B%BE%E8%A1%A8%E5%92%8C%E7%BB%84%E4%BB%B6" tabindex="-1"><span class="icon icon-link"></span></a>按需引入 ECharts 图表和组件</h2>
+<p>上面的代码会引入所有 ECharts 中所有的图表和组件，但是假如你不想引入所有组件，也可以使用 ECharts 提供的按需引入的接口来打包必须的组件。</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>需要注意的是注意为了保证打包的体积是最小的，ECharts 按需引入的时候不再提供任何渲染器，所以需要选择引入<code>CanvasRenderer</code>或者<code>SVGRenderer</code>作为渲染器。这样的好处是假如你只需要使用 svg 渲染模式，打包的结果中就不会再包含无需使用的<code>CanvasRenderer</code>模块。</p>
+</blockquote>
+<p>我们在示例编辑页的“完整代码”标签提供了非常方便的生成按需引入代码的功能。这个功能会根据当前的配置项动态生成最小的按需引入的代码。你可以直接在你的项目中使用。</p>
+<h2 id="在-typescript-中按需引入"><a aria-hidden="true" href="#%E5%9C%A8-typescript-%E4%B8%AD%E6%8C%89%E9%9C%80%E5%BC%95%E5%85%A5" tabindex="-1"><span class="icon icon-link"></span></a>在 TypeScript 中按需引入</h2>
+<p>对于使用了 TypeScript 来开发 ECharts 的开发者，我们提供了类型接口来组合出最小的<code>EChartsOption</code>类型。这个更严格的类型可以有效帮助你检查出是否少加载了组件或者图表。</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 [...]
+ <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/basics/inspiration/index.html b/docs/zh/basics/inspiration/index.html
new file mode 100644
index 0000000..bffafaa
--- /dev/null
+++ b/docs/zh/basics/inspiration/index.html
@@ -0,0 +1,19 @@
+<!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="Apache 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 [...]
+ </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>当你有“不知道图表应该设计成什么样”或者“不知道如何使用 ECharts 实现某种效果”的疑问的时候，以下列表可以提供一些思路。</p>
+<ul>
+<li><a href="https://echarts.apache.org//examples" rel="nofollow noopener noreferrer" target="_blank">ECharts 官方实例</a></li>
+<li>本手册的“应用篇 - 常用图表类型”</li>
+<li><a href="https://www.makeapie.com/" rel="nofollow noopener noreferrer" target="_blank">makeapie.com</a> 社区用户的作品集</li>
+</ul></div> <div class="table-of-contents"><h4 class="toc-container-header">本页目录</h4> <ul></ul></div></div> <div class="post-contributors"><h3><span class="inline-block align-middle">本文贡献者</span> <a target="_blank" href="https://github.com/apache/echarts-handbook/tree/master/contents/zh/basics/inspiration.md" title="编辑本文" class="inline-block align-middle text-sm"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-8 w-8 inline-block alig [...]
+ <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/best-practice/aria/index.html b/docs/zh/best-practice/aria/index.html
new file mode 100644
index 0000000..09fa54d
--- /dev/null
+++ b/docs/zh/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="Apache 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 [...]
+ </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>W3C 制定了无障碍富互联网应用规范集（<a href="https://www.w3.org/WAI/intro/aria" rel="nofollow noopener noreferrer" target="_blank">WAI-ARIA</a>，the Accessible Rich Internet Applications Suite），致力于使得网页内容和网页应用能够被更多残障人士访问。ECharts 4.0 遵从这一规范，支持自动根据图表配置项智能生成描述，使得盲人可以在朗读设备的帮助下了解图表内容，让图表可以被更多人群访问。</p>
+<p>默认关闭，需要通过将 <a href="https://echarts.apache.org/option.html#aria.show" rel="nofollow noopener noreferrer" target="_blank">aria.show</a> 设置为 <code>true</code> 开启。开启后，会根据图表、数据、标题等情况，自动智能生成关于图表的描述，用户也可以通过配置项修改描述。</p>
+<p>对于配置项：</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/zh/view.html?c=doc-example/aria-pie"></iframe>
+<p>生成的图表 DOM 上，会有一个 <code>aria-label</code> 属性，在朗读设备的帮助下，盲人能够了解图表的内容。其值为：</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="整体修改描述"><a href="#%E6%95%B4%E4%BD%93%E4%BF%AE%E6%94%B9%E6%8F%8F%E8%BF%B0" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>整体修改描述</h2>
+<p>对于有些图表，默认生成的数据点的描述并不足以表现整体的信息。比如下图的散点图，默认生成的描述可以包含数据点的坐标值，但是知道几百几千个点的坐标并不能帮助我们有效地理解图表表达的信息。</p>
+<p>这时候，用户可以通过 <a href="https://echarts.apache.org/option.html#aria.description" rel="nofollow noopener noreferrer" target="_blank">aria.description</a> 配置项指定图表的整体描述。</p>
+<h2 id="定制模板描述"><a href="#%E5%AE%9A%E5%88%B6%E6%A8%A1%E6%9D%BF%E6%8F%8F%E8%BF%B0" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>定制模板描述</h2>
+<p>除了整体性修改描述之外，我们还提供了生成描述的模板，可以方便地进行细粒度的修改。</p>
+<p>生成描述的基本流程为，如果 <a href="https://echarts.apache.org/option.html#aria.show" rel="nofollow noopener noreferrer" target="_blank">aria.show</a> 设置为 <code>true</code>，则生成无障碍访问描述，否则不生成。如果定义了 <a href="https://echarts.apache.org/option.html#aria.description" rel="nofollow noopener noreferrer" target="_blank">aria.description</a>，则将其作为图表的完整描述，否则根据模板拼接生成描述。我们提供了默认的生成描述的算法，仅当生成的描述不太合适时，才需要修改这些模板，甚至使用 <code>aria.description</code> 完全覆盖。</p>
+<p>使用模板拼接时，先根据是否存在标题 <a href="https://echarts.apache.org/option.html#title.text" rel="nofollow noopener noreferrer" target="_blank">title.text</a> 决定使用 <a href="https://echarts.apache.org/option.html#aria.general.withTitle" rel="nofollow noopener noreferrer" target="_blank">aria.general.withTitle</a> 还是 <a href="https://echarts.apache.org/option.html#aria.general.withoutTitle" rel="nofollow noopener noreferrer" target="_blank">aria.general.withoutTitle</a> 作为整体性描述。其中，<code>aria.general.w [...]
+<p>拼接完标题之后，会依次拼接系列的描述（<a href="https://echarts.apache.org/option.html#aria.series" rel="nofollow noopener noreferrer" target="_blank">aria.series</a>），和每个系列的数据的描述（<a href="https://echarts.apache.org/option.html#aria.data" rel="nofollow noopener noreferrer" target="_blank">aria.data</a>）。同样，每个模板都有可能包括模板变量，用以替换实际的值。</p>
+<p>完整的描述生成流程请参见 <a href="https://echarts.apache.org/option.html#aria" rel="nofollow noopener noreferrer" target="_blank">ARIA 文档</a>。</p></div> <div class="table-of-contents"><h4 class="toc-container-header">本页目录</h4> <ul><li class="toc2"><a href="/echarts-handbook/zh/best-practice/aria#%E6%95%B4%E4%BD%93%E4%BF%AE%E6%94%B9%E6%8F%8F%E8%BF%B0">整体修改描述</a></li><li class="toc2"><a href="/echarts-handbook/zh/best-practice/aria#%E5%AE%9A%E5%88%B6%E6%A8%A1%E6%9D%BF%E6%8F%8F%E8%BF%B0">定制模板描述</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/zh/best-practice/canvas-vs-svg/index.html b/docs/zh/best-practice/canvas-vs-svg/index.html
new file mode 100644
index 0000000..a56dd16
--- /dev/null
+++ b/docs/zh/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="Apache 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 [...]
+ </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>浏览器端图表库大多会选择 SVG 或者 Canvas 进行渲染。对于绘制图表来说，这两种技术往往是可替换的，效果相近。但是在一些场景中，他们的表现和能力又有一定差异。于是，对它们的选择取舍，就成为了一个一直存在的不易有标准答案的话题。</p>
+<p>ECharts 从初始一直使用 Canvas 绘制图表。而 <a href="https://github.com/apache/echarts/releases" rel="nofollow noopener noreferrer" target="_blank">ECharts v4.0</a> 发布了 SVG 渲染器，从而提供了一种新的选择。只须在初始化一个图表实例时，设置 <a href="https://echarts.apache.org//api.html#echarts.init" rel="nofollow noopener noreferrer" target="_blank">renderer 参数</a> 为 <code>'canvas'</code> 或 <code>'svg'</code> 即可指定渲染器，比较方便。</p>
+<blockquote>
+<p>SVG 和 Canvas 这两种使用方式差异很大的技术，能够做到同时被透明支持，主要归功于 ECharts 底层库 <a href="https://github.com/ecomfe/zrender" rel="nofollow noopener noreferrer" target="_blank">ZRender</a> 的抽象和实现，形成可互换的 SVG 渲染器和 Canvas 渲染器。</p>
+</blockquote>
+<h2 id="选择哪种渲染器"><a href="#%E9%80%89%E6%8B%A9%E5%93%AA%E7%A7%8D%E6%B8%B2%E6%9F%93%E5%99%A8" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>选择哪种渲染器</h2>
+<p>一般来说，Canvas 更适合绘制图形元素数量较多（这一般是由数据量大导致）的图表（如热力图、地理坐标系或平行坐标系上的大规模线图或散点图等），也利于实现某些视觉 <a href="https://echarts.apache.org//examples/editor.html?c=lines-bmap-effect" rel="nofollow noopener noreferrer" target="_blank">特效</a>。但是，在不少场景中，SVG 具有重要的优势：它的内存占用更低（这对移动端尤其重要）、并且用户使用浏览器内置的缩放功能时不会模糊。</p>
+<p>选择哪种渲染器，我们可以根据软硬件环境、数据量、功能需求综合考虑。</p>
+<ul>
+<li>在软硬件环境较好，数据量不大的场景下，两种渲染器都可以适用，并不需要太多纠结。</li>
+<li>在环境较差，出现性能问题需要优化的场景下，可以通过试验来确定使用哪种渲染器。比如有这些经验：
+<ul>
+<li>在须要创建很多 ECharts 实例且浏览器易崩溃的情况下（可能是因为 Canvas 数量多导致内存占用超出手机承受能力），可以使用 SVG 渲染器来进行改善。大略得说，如果图表运行在低端安卓机，或者我们在使用一些特定图表如 <a href="https://ecomfe.github.io/echarts-liquidfill/example/" rel="nofollow noopener noreferrer" target="_blank">水球图</a> 等，SVG 渲染器可能效果更好。</li>
+<li>数据量较大（经验判断 > 1k）、较多交互时，建议选择 Canvas 渲染器。</li>
+</ul>
+</li>
+</ul>
+<p>我们强烈欢迎开发者们<a href="https://github.com/apache/echarts/issues/new" rel="nofollow noopener noreferrer" target="_blank">反馈</a>给我们使用的体验和场景，帮助我们更好的做优化。</p>
+<p>注：当前某些特殊的渲染依然需要依赖 Canvas：如<a href="https://echarts.apache.org/option.html#series-lines.effect" rel="nofollow noopener noreferrer" target="_blank">炫光尾迹特效</a>、<a href="https://echarts.apache.org//examples/editor.html?c=heatmap-bmap" rel="nofollow noopener noreferrer" target="_blank">带有混合效果的热力图</a>等。</p>
+<h2 id="如何使用渲染器"><a href="#%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8%E6%B8%B2%E6%9F%93%E5%99%A8" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>如何使用渲染器</h2>
+<p>如果是用如下的方式完整引入<code>echarts</code>，代码中已经包含了 SVG 渲染器和 Canvas 渲染器</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="zh/basics/import">在项目中引入 Apache ECharts</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>然后，我们就可以在代码中，初始化图表实例时，<a href="https://echarts.apache.org//api.html/api.html#echarts.init" rel="nofollow noopener noreferrer" target="_blank">传入参数</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 [...]
+ <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/concepts/axis/index.html b/docs/zh/concepts/axis/index.html
new file mode 100644
index 0000000..fa5f8c2
--- /dev/null
+++ b/docs/zh/concepts/axis/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="Apache 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 [...]
+ </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>直角坐标系中的 x/y 轴。</p>
+<h2 id="x-轴、y-轴"><a href="#x-%E8%BD%B4%E3%80%81y-%E8%BD%B4" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>x 轴、y 轴</h2>
+<p>x 轴和 y 轴都由轴线、刻度、刻度标签、轴标题四个部分组成。部分图表中还会有网格线来帮助查看和计算数据</p>
+<img max-width="830" width="100%" height="100%" src="images/design/axis/charts_axis_img02.jpg">
+
+<p>普通的二维数据坐标系都有 x 轴和 y 轴，通常情况下，x 轴显示在图表的底部，y 轴显示在左侧，一般配置如下：</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>x 轴常用来标示数据的维度，维度一般用来指数据的类别，是观察数据的角度，例如“销售时间” “销售地点” “产品名称”等。y 轴常常用来标示数据的数值，数值是用来具体考察某一类数据的数量值，也是我们需要分析的指标，例如“销售数量”和“销售金额”等。</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>当 x 轴（水平坐标轴）跨度很大，可以采用才区域缩放方式灵活显示数据内容。</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>在二维数据中，轴也可以有多个。ECharts 中一般情况下单个 grid 组件最多只能放两个 x/y 轴，多于两个 x/y 轴需要通过配置 <a href="https://echarts.apache.org/option.html#xAxis.offset" rel="nofollow noopener noreferrer" target="_blank">offset</a> 属性防止同个位置多个轴的重叠。两个 x 轴显示在上下，两个 y 轴显示在左右两侧。</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="轴线"><a href="#%E8%BD%B4%E7%BA%BF" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>轴线</h2>
+<p>ECharts 提供了轴线 <a href="https://echarts.apache.org/option.html#xAxis.axisLine" rel="nofollow noopener noreferrer" target="_blank">axisLine</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 [...]
+<h2 id="刻度"><a href="#%E5%88%BB%E5%BA%A6" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>刻度</h2>
+<p>ECharts 提供了轴线 <a href="https://echarts.apache.org/option.html#xAxis.axisTick" rel="nofollow noopener noreferrer" target="_blank">axisTick</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 [...]
+<h2 id="刻度标签"><a href="#%E5%88%BB%E5%BA%A6%E6%A0%87%E7%AD%BE" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>刻度标签</h2>
+<p>ECharts 提供了轴线 <a href="https://echarts.apache.org/option.html#xAxis.axisLabel" rel="nofollow noopener noreferrer" target="_blank">axisLabel</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 [...]
+<h2 id="示例"><a href="#%E7%A4%BA%E4%BE%8B" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>示例</h2>
+<p>图左侧的 y 轴代表东京月平均气温，右侧的 y 轴表示东京降水量，x 轴表示时间。两组 y 轴在一起，反映了平均气温和降水量间的趋势关系。</p>
+<div class="nuxt-content-highlight"><!----></div>
+<p>这里简要介绍了坐标轴相关的常用配置项及用法，更多关于坐标轴配置项及用法请移步<a href="https://echarts.apache.org/option.html#xAxis" rel="nofollow noopener noreferrer" target="_blank">官网</a>。</p></div> <div class="table-of-contents"><h4 class="toc-container-header">本页目录</h4> <ul><li class="toc2"><a href="/echarts-handbook/zh/concepts/axis#x-%E8%BD%B4%E3%80%81y-%E8%BD%B4">x 轴、y 轴</a></li><li class="toc2"><a href="/echarts-handbook/zh/concepts/axis#%E8%BD%B4%E7%BA%BF">轴线</a></li><li class="toc2"><a href="/echarts-handbook/zh/ [...]
+ <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/concepts/chart-size/index.html b/docs/zh/concepts/chart-size/index.html
new file mode 100644
index 0000000..0577ad4
--- /dev/null
+++ b/docs/zh/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="Apache 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 [...]
+ </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="zh/get-started">快速上手</a>中，我们介绍了初始化 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 文档</a>中详细介绍了参数的具体含义，建议理解后再阅读本文。</p>
+<p>下面，我们就常见的几种使用场景，介绍如何初始化一个图表以及改变其大小。</p>
+<h2 id="初始化"><a href="#%E5%88%9D%E5%A7%8B%E5%8C%96" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>初始化</h2>
+<h3 id="在-html-中定义有宽度和高度的父容器（推荐）"><a href="#%E5%9C%A8-html-%E4%B8%AD%E5%AE%9A%E4%B9%89%E6%9C%89%E5%AE%BD%E5%BA%A6%E5%92%8C%E9%AB%98%E5%BA%A6%E7%9A%84%E7%88%B6%E5%AE%B9%E5%99%A8%EF%BC%88%E6%8E%A8%E8%8D%90%EF%BC%89" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>在 HTML 中定义有宽度和高度的父容器（推荐）</h3>
+<p>通常来说，需要在 HTML 中先定义一个 <code><div></code> 节点，并且通过 CSS 使得该节点具有宽度和高度。初始化的时候，传入该节点，图表的大小默认即为该节点的大小，除非声明了 <code>opts.width</code> 或 <code>opts.height</code> 将其覆盖。</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>需要注意的是，使用这种方法在调用 <code>echarts.init</code> 时需保证容器已经有宽度和高度了。</p>
+<h3 id="指定图表的大小"><a href="#%E6%8C%87%E5%AE%9A%E5%9B%BE%E8%A1%A8%E7%9A%84%E5%A4%A7%E5%B0%8F" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>指定图表的大小</h3>
+<p>如果图表容器不存在宽度和高度，或者，你希望图表宽度和高度不等于容器大小，也可以在初始化的时候指定大小。</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="响应容器大小的变化"><a href="#%E5%93%8D%E5%BA%94%E5%AE%B9%E5%99%A8%E5%A4%A7%E5%B0%8F%E7%9A%84%E5%8F%98%E5%8C%96" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>响应容器大小的变化</h2>
+<h3 id="监听图表容器的大小并改变图表大小"><a href="#%E7%9B%91%E5%90%AC%E5%9B%BE%E8%A1%A8%E5%AE%B9%E5%99%A8%E7%9A%84%E5%A4%A7%E5%B0%8F%E5%B9%B6%E6%94%B9%E5%8F%98%E5%9B%BE%E8%A1%A8%E5%A4%A7%E5%B0%8F" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>监听图表容器的大小并改变图表大小</h3>
+<p>在有些场景下，我们希望当容器大小改变时，图表的大小也相应地改变。</p>
+<p>比如，图表容器是一个高度为 300px、宽度为页面 100% 的节点，你希望在浏览器宽度改变的时候，始终保持图表宽度是页面的 100%。</p>
+<p>这种情况下，可以监听页面的 <code>window.onresize</code> 事件获取浏览器大小改变的事件，然后调用 <a href="https://echarts.apache.org/api.html#echartsInstance.resize" rel="nofollow noopener noreferrer" target="_blank"><code>echartsInstance.resize</code></a> 改变图表的大小。</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="为图表设置特定的大小"><a href="#%E4%B8%BA%E5%9B%BE%E8%A1%A8%E8%AE%BE%E7%BD%AE%E7%89%B9%E5%AE%9A%E7%9A%84%E5%A4%A7%E5%B0%8F" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>为图表设置特定的大小</h3>
+<p>除了直接调用 <code>resize()</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 [...]
+<blockquote>
+<p><strong>小贴士：</strong> 阅读 API 文档的时候要留意接口的定义方式，这一接口有时会被误认为是 myCharts.resize(800, 400) 的形式，但其实不存在这样的调用方式。</p>
+</blockquote>
+<h3 id="容器节点被销毁以及被重建时"><a href="#%E5%AE%B9%E5%99%A8%E8%8A%82%E7%82%B9%E8%A2%AB%E9%94%80%E6%AF%81%E4%BB%A5%E5%8F%8A%E8%A2%AB%E9%87%8D%E5%BB%BA%E6%97%B6" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>容器节点被销毁以及被重建时</h3>
+<p>假设页面中存在多个标签页，每个标签页都包含一些图表。当选中一个标签页的时候，其他标签页的内容在 DOM 中被移除了。这样，当用户再选中这些标签页的时候，就会发现图表“不见”了。</p>
+<p>本质上，这是由于图表的容器节点被移除导致的。即使之后该节点被重新添加，图表所在的节点也已经不存在了。</p>
+<p>正确的做法是，在图表容器被销毁之后，调用 <a href="https://echarts.apache.org/api.html#echartsInstance.dispose" rel="nofollow noopener noreferrer" target="_blank"><code>echartsInstance.dispose</code></a> 销毁实例，在图表容器重新被添加后再次调用 <a href="https://echarts.apache.org//api.html#echarts.init" rel="nofollow noopener noreferrer" target="_blank">echarts.init</a> 初始化。</p>
+<blockquote>
+<p><strong>小贴士：</strong> 在容器节点被销毁时，总是应调用 <a href="https://echarts.apache.org/api.html#echartsInstance.dispose" rel="nofollow noopener noreferrer" target="_blank"><code>echartsInstance.dispose</code></a> 以销毁实例释放资源，避免内存泄漏。</p>
+</blockquote></div> <div class="table-of-contents"><h4 class="toc-container-header">本页目录</h4> <ul><li class="toc2"><a href="/echarts-handbook/zh/concepts/chart-size#%E5%88%9D%E5%A7%8B%E5%8C%96">初始化</a></li><li class="toc3"><a href="/echarts-handbook/zh/concepts/chart-size#%E5%9C%A8-html-%E4%B8%AD%E5%AE%9A%E4%B9%89%E6%9C%89%E5%AE%BD%E5%BA%A6%E5%92%8C%E9%AB%98%E5%BA%A6%E7%9A%84%E7%88%B6%E5%AE%B9%E5%99%A8%EF%BC%88%E6%8E%A8%E8%8D%90%EF%BC%89">在 HTML 中定义有宽度和高度的父容器（推荐）</a></li><li class="toc3" [...]
+ <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/concepts/data-transform/index.html b/docs/zh/concepts/data-transform/index.html
new file mode 100644
index 0000000..0c9a7f1
--- /dev/null
+++ b/docs/zh/concepts/data-transform/index.html
@@ -0,0 +1,129 @@
+<!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="Apache 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 [...]
+ </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>Apache ECharts<sup>TM</sup> 5 开始支持了“数据转换”（ data transform ）功能。在 echarts 中，“数据转换” 这个词指的是，给定一个已有的“数据集”（<a href="https://echarts.apache.org/option.html##dataset" rel="nofollow noopener noreferrer" target="_blank">dataset</a>）和一个“转换方法”（<a href="https://echarts.apache.org/option.html##dataset.transform" rel="nofollow noopener noreferrer" target="_blank">transform</a>），echarts 能生成一个新的“数据集”，然后可以使用这个新的“数据集”绘制图表。这些工作都可以声明式地完成。</p>
+<p>抽象地来说，数据转换是这样一种公式：<code>outData = f(inputData)</code>。<code>f</code> 是转换方法，例如：<code>filter</code>、<code>sort</code>、<code>regression</code>、<code>boxplot</code>、<code>cluster</code>、<code>aggregate</code>(todo) 等等。有了数据转换能力后，我们就至少可以做到这些事情：</p>
+<ul>
+<li>把数据分成多份用不同的饼图展现。</li>
+<li>进行一些数据统计运算，并展示结果。</li>
+<li>用某些数据可视化算法处理数据，并展示结果。</li>
+<li>数据排序。</li>
+<li>去除或直选择数据项。</li>
+<li>...</li>
+</ul>
+<h2 id="数据转换基础使用"><a href="#%E6%95%B0%E6%8D%AE%E8%BD%AC%E6%8D%A2%E5%9F%BA%E7%A1%80%E4%BD%BF%E7%94%A8" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>数据转换基础使用</h2>
+<p>在 echarts 中，数据转换是依托于数据集（<a href="https://echarts.apache.org/option.html##dataset" rel="nofollow noopener noreferrer" target="_blank">dataset</a>）来实现的. 我们可以设置 <a href="https://echarts.apache.org/option.html##dataset.transform" rel="nofollow noopener noreferrer" target="_blank">dataset.transform</a> 来表示，此 dataset 的数据，来自于此 transform 的结果。例如。</p>
+<p>下面是上述例子的效果，三个饼图分别显示了 2011、2012、2013 年的数据。</p>
+<div class="nuxt-content-highlight"><!----></div>
+<p>现在我们简单总结下，使用 transform 时的几个要点：</p>
+<ul>
+<li>在一个空的 dataset 中声明 <code>transform</code>, <code>fromDatasetIndex</code>/<code>fromDatasetId</code> 来表示我们要生成新的数据。</li>
+<li>系列引用这个 dataset 。</li>
+</ul>
+<h2 id="数据转换的进阶使用"><a href="#%E6%95%B0%E6%8D%AE%E8%BD%AC%E6%8D%A2%E7%9A%84%E8%BF%9B%E9%98%B6%E4%BD%BF%E7%94%A8" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>数据转换的进阶使用</h2>
+<h4 id="链式声明-transform"><a href="#%E9%93%BE%E5%BC%8F%E5%A3%B0%E6%98%8E-transform" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>链式声明 transform</h4>
+<p><code>transform</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 [...]
+<blockquote>
+<p>注意：理论上，任何 transform 都可能有多个输入或多个输出。但是，如果一个 transform 被链式声明，它只能获取前一个 transform 的第一个输出作为输入（第一个 transform 除外），以及它只能把自己的第一个输出给到后一个 transform （最后一个 transform 除外）。</p>
+</blockquote>
+<h4 id="一个-transform-输出多个-data"><a href="#%E4%B8%80%E4%B8%AA-transform-%E8%BE%93%E5%87%BA%E5%A4%9A%E4%B8%AA-data" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>一个 transform 输出多个 data</h4>
+<p>在大多数场景下，transform 只需输出一个 data 。但是也有一些场景，需要输出多个 data ，每个 data 可以被不同的 series 或者 dataset 所使用。</p>
+<p>例如，在内置的 "boxplot" transform 中，除了 boxplot 系列所需要的 data 外，离群点（ outlier ）也会被生成，并且可以用例如散点图系列显示出来。例如，<a href="https://echarts.apache.org/examples/zh/editor.html?c=boxplot-light-velocity" rel="nofollow noopener noreferrer" target="_blank">example</a>。</p>
+<p>我们提供配置 <a href="https://echarts.apache.org/option.html##dataset.fromTransformResult" rel="nofollow noopener noreferrer" target="_blank">dataset.fromTransformResult</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>另外，<a href="https://echarts.apache.org/option.html##dataset.fromTransformResult" rel="nofollow noopener noreferrer" target="_blank">dataset.fromTransformResult</a> 和 <a href="https://echarts.apache.org/option.html##dataset.transform" rel="nofollow noopener noreferrer" target="_blank">dataset.transform</a> 能同时出现在一个 dataset 中，这表示，这个 transform 的输入，是上游的结果中以 <code>fromTransformResult</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 [...]
+<h4 id="在开发环境中-debug"><a href="#%E5%9C%A8%E5%BC%80%E5%8F%91%E7%8E%AF%E5%A2%83%E4%B8%AD-debug" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>在开发环境中 debug</h4>
+<p>使用 transform 时，有时候我们会配不对，显示不出来结果，并且不知道哪里错了。所以，这里提供了一个配置项 <code>transform.print</code> 方便 debug 。这个配置项只在开发环境中生效。如下例：</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="数据转换器-filter"><a href="#%E6%95%B0%E6%8D%AE%E8%BD%AC%E6%8D%A2%E5%99%A8-filter" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>数据转换器 "filter"</h2>
+<p>echarts 内置提供了能起过滤作用的数据转换器。我们只需声明 <code>transform.type: "filter"</code>，以及给出数据筛选条件。如下例：</p>
+<div class="nuxt-content-highlight"><!----></div>
+<p>这是 filter 的另一个例子的效果：</p>
+<iframe width="100%" height="350" src="https://echarts.apache.org/examples/zh/view.html?c=data-transform-filter"></iframe>
+<p>在 "filter" transform 中，有这些要素：</p>
+<p><strong>关于维度（ dimension ）：</strong></p>
+<p><code>config.dimension</code> 指定了维度，能设成这样的值：</p>
+<ul>
+<li>设定成声明在 dataset 中的维度名，例如 <code>config: { dimension: 'Year', '=': 2011 }</code>。不过， dataset 中维度名的声明并非强制，所以我们也可以</li>
+<li>设定成 dataset 中的维度 index （index 值从 0 开始）例如 <code>config: { dimension: 3, '=': 2011 }</code>。</li>
+</ul>
+<p><strong>关于关系比较操作符：</strong></p>
+<p>关系操作符，可以设定这些：
+<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>。（小括号中的符号或名字，是别名，设置起来作用相同）。他们首先基本地能基于数值大小进行比较，然后也有些额外的功能特性：</p>
+<ul>
+<li>多个关系操作符能声明在一个 {} 中，例如 <code>{ dimension: 'Price', '>=': 20, '<': 30 }</code>。这表示“与”的关系，即，筛选出价格大于等于 20 小雨 30 的数据项。</li>
+<li>data 里的值，不仅可以是数值（ number ），也可以是“类数值的字符串”（“ numeric string ”）。“类数值的字符串”本身是一个字符串，但是可以被转换为字面所描述的数值，例如 <code>' 123 '</code>。转换过程中，空格（全角半角空格）和换行符都能被消除（ trim ）。</li>
+<li>如果我们需要对日期对象（JS <code>Date</code>）或者日期字符串（如 '2012-05-12'）进行比较，我们需要手动指定 <code>parser: 'time'</code>，例如 <code>config: { dimension: 3, lt: '2012-05-12', parser: 'time' }</code>。</li>
+<li>纯字符串比较也被支持，但是只能用在 <code>=</code> 或 <code>!=</code> 上。而 <code>></code>, <code>>=</code>, <code><</code>, <code><=</code> 并不支持纯字符串比较，也就是说，这四个操作符的右值，不能是字符串。</li>
+<li><code>reg</code> 操作符能提供正则表达式比较。例如， <code>{ dimension: 'Name', reg: /\s+Müller\s*$/ }</code> 能在 <code>'Name'</code> 维度上选出姓 <code>'Müller'</code> 的数据项。</li>
+</ul>
+<p><strong>关于逻辑比较：</strong></p>
+<p>我们也支持了逻辑比较操作符 <strong>与或非</strong>（ <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> 自然可以被嵌套，例如：</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>关于解析器（ parser ）：</strong></p>
+<p>还可以指定“解析器”（ parser ）来对值进行解析后再做比较。现在支持的解析器有：</p>
+<ul>
+<li><code>parser: 'time'</code>：把原始值解析成时间戳（ timestamp ）后再做比较。这个解析器的行为，和 <code>echarts.time.parse</code> 相同，即，当原始值为时间对象（ JS <code>Date</code> 实例），或者是时间戳，或者是描述时间的字符串（例如 <code>'2012-05-12 03:11:22'</code> ），都可以被解析为时间戳，然后就可以基于数值大小进行比较。如果原始数据是其他不可解析为时间戳的值，那么会被解析为 NaN。</li>
+<li><code>parser: 'trim'</code>：如果原始数据是字符串，则把字符串两端的空格（全角半角）和换行符去掉。如果不是字符串，还保持为原始数据。</li>
+<li><code>parser: 'number'</code>：强制把原始数据转成数值。如果不能转成有意义的数值，那么转成 <code>NaN</code>。在大多数场景下，我们并不需要这个解析器，因为按默认策略，“像数值的字符串”就会被转成数值。但是默认策略比较严格，这个解析器比较宽松，如果我们遇到含有尾缀的字符串（例如 <code>'33%'</code>, <code>12px</code>），我们需要手动指定 <code>parser: 'number'</code>，从而去掉尾缀转为数值才能比较。</li>
+</ul>
+<p>这个例子显示了如何使用 <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>形式化定义：</strong></p>
+<p>最后，我们给出，数据转换器 "filter" 的 config 的形式化定义：</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="数据转换器-sort"><a href="#%E6%95%B0%E6%8D%AE%E8%BD%AC%E6%8D%A2%E5%99%A8-sort" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>数据转换器 "sort"</h2>
+<p>"sort" 是另一个内置的数据转换器，用于排序数据。目前主要能用于在类目轴（ <code>axis.type: 'category'</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 [...]
+<iframe width="100%" height="350" src="https://echarts.apache.org/examples/zh/view.html?c=data-transform-sort-bar"></iframe>
+<p>数据转换器 "sort" 还有一些额外的功能：</p>
+<ul>
+<li>可以多重排序，多个维度一起排序。见下面的例子。</li>
+<li>排序规则是这样的：
+<ul>
+<li>默认按照数值大小排序。其中，“可转为数值的字符串”也被转换成数值，和其他数值一起按大小排序。</li>
+<li>对于其他“不能转为数值的字符串”，也能在它们之间按字符串进行排序。这个特性有助于这种场景：把相同标签的数据项排到一起，尤其是当多个维度共同排序时。见下面的例子。</li>
+<li>当“数值及可转为数值的字符串”和“不能转为数值的字符串”进行排序时，或者它们和“其他类型的值”进行比较时，它们本身是不知如何进行比较的。那么我们称呼“后者”为“incomparable”，并且可以设置 <code>incomparable: 'min' | 'max'</code> 来指定一个“incomparable”在这个比较中是最大还是最小，从而能使它们能产生比较结果。这个设定的用途，比如可以是，决定空值（例如 <code>null</code>, <code>undefined</code>, <code>NaN</code>, <code>''</code>, <code>'-'</code>）在排序的头还是尾。</li>
+</ul>
+</li>
+<li>过滤器 <code>filter: 'time' | 'trim' | 'number'</code> 可以被使用，和数据转换器 "filter" 中的情况一样。
+<ul>
+<li>如果要对时间进行排序（例如，值为 JS <code>Date</code> 实例或者时间字符串如 <code>'2012-03-12 11:13:54'</code>），我们需要声明 <code>parser: 'time'</code>。</li>
+<li>如果需要对有后缀的数值进行排序（如 <code>'33%'</code>, <code>'16px'</code>）我们需要声明 <code>parser: 'number'</code>。</li>
+</ul>
+</li>
+</ul>
+<p>这是一个“多维度排序”的例子。</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/zh/view.html?c=doc-example/data-transform-multiple-sort-bar"></iframe>
+<p>最后，我们给出数据转换器 "sort" 的 config 的形式化定义。</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="使用外部的数据转换器"><a href="#%E4%BD%BF%E7%94%A8%E5%A4%96%E9%83%A8%E7%9A%84%E6%95%B0%E6%8D%AE%E8%BD%AC%E6%8D%A2%E5%99%A8" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>使用外部的数据转换器</h2>
+<p>除了上述的内置的数据转换器外，我们也可以使用外部的数据转换器。外部数据转换器能提供或自己定制更丰富的功能。下面的例子中，我们使用第三方库 <a href="https://github.com/ecomfe/echarts-stat" rel="nofollow noopener noreferrer" target="_blank">ecStat</a> 提供的数据转换器。</p>
+<p>生成数据的回归线：</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>一些使用 echarts-stat 的例子：</p>
+<ul>
+<li><a href="https://echarts.apache.org/examples/zh/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/zh/editor.html?c=bar-histogram&edit=1&reset=1" rel="nofollow noopener noreferrer" target="_blank">直方图 (Histogram)</a></li>
+<li><a href="https://echarts.apache.org/examples/zh/editor.html?c=scatter-clustering&edit=1&reset=1" rel="nofollow noopener noreferrer" target="_blank">简单聚类 (Clustering)</a></li>
+<li><a href="https://echarts.apache.org/examples/zh/editor.html?c=scatter-linear-regression&edit=1&reset=1" rel="nofollow noopener noreferrer" target="_blank">线性回归线 (Linear Regression)</a></li>
+<li><a href="https://echarts.apache.org/examples/zh/editor.html?c=scatter-exponential-regression&edit=1&reset=1" rel="nofollow noopener noreferrer" target="_blank">指数回归线 (Exponential Regression)</a></li>
+<li><a href="https://echarts.apache.org/examples/zh/editor.html?c=scatter-logarithmic-regression&edit=1&reset=1" rel="nofollow noopener noreferrer" target="_blank">对数回归线 (Logarithmic Regression)</a></li>
+<li><a href="https://echarts.apache.org/examples/zh/editor.html?c=scatter-polynomial-regression&edit=1&reset=1" rel="nofollow noopener noreferrer" target="_blank">多项式回归线 (Polynomial Regression)</a></li>
+</ul></div> <div class="table-of-contents"><h4 class="toc-container-header">本页目录</h4> <ul><li class="toc2"><a href="/echarts-handbook/zh/concepts/data-transform#%E6%95%B0%E6%8D%AE%E8%BD%AC%E6%8D%A2%E5%9F%BA%E7%A1%80%E4%BD%BF%E7%94%A8">数据转换基础使用</a></li><li class="toc2"><a href="/echarts-handbook/zh/concepts/data-transform#%E6%95%B0%E6%8D%AE%E8%BD%AC%E6%8D%A2%E7%9A%84%E8%BF%9B%E9%98%B6%E4%BD%BF%E7%94%A8">数据转换的进阶使用</a></li><li class="toc2"><a href="/echarts-handbook/zh/concepts/data-transfo [...]
+ <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/concepts/dataset/index.html b/docs/zh/concepts/dataset/index.html
new file mode 100644
index 0000000..722df2d
--- /dev/null
+++ b/docs/zh/concepts/dataset/index.html
@@ -0,0 +1,129 @@
+<!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="Apache 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 [...]
+ </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>数据集</code>（<code>dataset</code>）是专门用来管理数据的组件。虽然每个系列都可以在 <code>series.data</code> 中设置数据，但是从 ECharts4 支持 <code>数据集</code> 开始，更推荐使用 <code>数据集</code> 来管理数据。因为这样，数据可以被多个组件复用，也方便进行 “数据和其他配置” 分离的配置风格。毕竟，在运行时，数据是最常改变的，而其他配置大多并不会改变。</p>
+<h2 id="在系列中设置数据"><a href="#%E5%9C%A8%E7%B3%BB%E5%88%97%E4%B8%AD%E8%AE%BE%E7%BD%AE%E6%95%B0%E6%8D%AE" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>在系列中设置数据</h2>
+<p>如果数据设置在 <code>系列</code>（<code>series</code>）中，例如：</p>
+<div class="nuxt-content-highlight"><!----></div>
+<p>这种方式的优点是，适于对一些特殊的数据结构（如“树”、“图”、超大数据）进行一定的数据类型定制。
+但是缺点是，常需要用户先处理数据，把数据分割设置到各个系列（和类目轴）中。此外，不利于多个系列共享一份数据，也不利于基于原始数据进行图表类型、系列的映射安排。</p>
+<h2 id="在数据集中设置数据"><a href="#%E5%9C%A8%E6%95%B0%E6%8D%AE%E9%9B%86%E4%B8%AD%E8%AE%BE%E7%BD%AE%E6%95%B0%E6%8D%AE" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>在数据集中设置数据</h2>
+<p>而数据设置在 <code>数据集</code>（<code>dataset</code>）中，会有这些好处：</p>
+<ul>
+<li>能够贴近数据可视化常见思维方式：（I）提供数据，（II）指定数据到视觉的映射，从而形成图表。</li>
+<li>数据和其他配置可以被分离开来。数据常变，其他配置常不变。分开易于分别管理。</li>
+<li>数据可以被多个系列或者组件复用，对于大数据量的场景，不必为每个系列创建一份数据。</li>
+<li>支持更多的数据的常用格式，例如二维数组、对象数组等，一定程度上避免使用者为了数据格式而进行转换。</li>
+</ul>
+<p>下面是一个最简单的 <code>dataset</code> 的例子：</p>
+<div class="nuxt-content-highlight"><!----></div>
+<p>或者也可以使用常见的“对象数组”的格式：</p>
+<div class="nuxt-content-highlight"><!----></div>
+<h2 id="数据到图形的映射"><a href="#%E6%95%B0%E6%8D%AE%E5%88%B0%E5%9B%BE%E5%BD%A2%E7%9A%84%E6%98%A0%E5%B0%84" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>数据到图形的映射</h2>
+<p>如上所述，数据可视化的一个常见思路是：（I）提供数据，（II）指定数据到视觉的映射。</p>
+<p>简而言之，可以进行这些映射的设定：</p>
+<ul>
+<li>指定 <code>数据集</code> 的列（column）还是行（row）映射为 <code>系列</code>（<code>series</code>）。这件事可以使用 <a href="https://echarts.apache.org/option.html##series.seriesLayoutBy" rel="nofollow noopener noreferrer" target="_blank">series.seriesLayoutBy</a> 属性来配置。默认是按照列（column）来映射。</li>
+<li>指定维度映射的规则：如何从 dataset 的维度（一个“维度”的意思是一行/列）映射到坐标轴（如 X、Y 轴）、提示框（tooltip）、标签（label）、图形元素大小颜色等（visualMap）。这件事可以使用 <a href="https://echarts.apache.org/option.html##series.encode" rel="nofollow noopener noreferrer" target="_blank">series.encode</a> 属性，以及 <a href="https://echarts.apache.org/option.html##visualMap" rel="nofollow noopener noreferrer" target="_blank">visualMap</a> 组件来配置（如果有需要映射颜色大小等视觉维度的话）。上面的例子中，没有给出这种映射配置，那么 ECharts 就按最常见的理解进行默认映射：X 坐标轴声明为类目轴，默认情况下会自动对应到 <code>dataset.source< [...]
+</ul>
+<p>下面详细解释这些映射的设定。</p>
+<h2 id="把数据集（-dataset-）的行或列映射为系列（series）"><a href="#%E6%8A%8A%E6%95%B0%E6%8D%AE%E9%9B%86%EF%BC%88-dataset-%EF%BC%89%E7%9A%84%E8%A1%8C%E6%88%96%E5%88%97%E6%98%A0%E5%B0%84%E4%B8%BA%E7%B3%BB%E5%88%97%EF%BC%88series%EF%BC%89" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>把数据集（ dataset ）的行或列映射为系列（series）</h2>
+<p>有了数据表之后，使用者可以灵活地配置：数据如何对应到轴和图形系列。</p>
+<p>用户可以使用 <code>seriesLayoutBy</code> 配置项，改变图表对于行列的理解。<code>seriesLayoutBy</code> 可取值：</p>
+<ul>
+<li>'column': 默认值。系列被安放到 <code>dataset</code> 的列上面。</li>
+<li>'row': 系列被安放到 <code>dataset</code> 的行上面。</li>
+</ul>
+<p>看这个例子：</p>
+<div class="nuxt-content-highlight"><!----></div>
+<h2 id="维度（-dimension-）"><a href="#%E7%BB%B4%E5%BA%A6%EF%BC%88-dimension-%EF%BC%89" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>维度（ dimension ）</h2>
+<p>常用图表所描述的数据大部分是“二维表”结构，上述的例子中，我们都使用二维数组来容纳二维表。现在，当我们把系列（ series ）对应到“列”的时候，那么每一列就称为一个“维度（ dimension ）”，而每一行称为数据项（ item ）。反之，如果我们把系列（ series ）对应到表行，那么每一行就是“维度（ dimension ）”，每一列就是数据项（ item ）。</p>
+<p>维度可以有单独的名字，便于在图表中显示。维度名（ dimension name ）可以在定义在 dataset 的第一行（或者第一列）。例如上面的例子中，<code>'score'</code>、<code>'amount'</code>、<code>'product'</code> 就是维度名。从第二行开始，才是正式的数据。<code>dataset.source</code> 中第一行（列）到底包含不包含维度名，ECharts 默认会自动探测。当然也可以设置 <code>dataset.sourceHeader: true</code> 显示声明第一行（列）就是维度，或者 <code>dataset.sourceHeader: false</code> 表明第一行（列）开始就直接是数据。</p>
+<p>维度的定义，也可以使用单独的 <code>dataset.dimensions</code> 或者 <code>series.dimensions</code> 来定义，这样可以同时指定维度名，和维度的类型（ dimension type ）：</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>大多数情况下，我们并不需要去设置维度类型，因为 ECharts 会自动尝试判断。但是如果不足够准确时，可以手动设置维度类型。</p>
+<p>维度类型（ dimension type ）可以取这些值：</p>
+<ul>
+<li><code>'number'</code>: 默认，表示普通数据。</li>
+<li><code>'ordinal'</code>: 对于类目、文本这些 string 类型的数据，如果需要能在数轴上使用，须是 'ordinal' 类型。ECharts 默认会试图自动判断这个类型。但是自动判断也可能不准确，所以使用者也可以手动强制指定。</li>
+<li><code>'time'</code>: 表示时间数据。设置成 <code>'time'</code> 则能支持自动解析数据成时间戳（timestamp），比如该维度的数据是 '2017-05-10'，会自动被解析。如果这个维度被用在时间数轴（<a href="https://echarts.apache.org/option.html##xAxis.type" rel="nofollow noopener noreferrer" target="_blank">axis.type</a> 为 <code>'time'</code>）上，那么会被自动设置为 <code>'time'</code> 类型。时间类型的支持参见 <a href="https://echarts.apache.org/option.html##series.data" rel="nofollow noopener noreferrer" target="_blank">data</a>。</li>
+<li><code>'float'</code>: 如果设置成 <code>'float'</code>，在存储时候会使用 <code>TypedArray</code>，对性能优化有好处。</li>
+<li><code>'int'</code>: 如果设置成 <code>'int'</code>，在存储时候会使用 <code>TypedArray</code>，对性能优化有好处。</li>
+</ul>
+<h2 id="数据到图形的映射（-seriesencode-）"><a href="#%E6%95%B0%E6%8D%AE%E5%88%B0%E5%9B%BE%E5%BD%A2%E7%9A%84%E6%98%A0%E5%B0%84%EF%BC%88-seriesencode-%EF%BC%89" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>数据到图形的映射（ series.encode ）</h2>
+<p>了解了维度的概念后，我们就可以使用 <a href="https://echarts.apache.org/option.html##series.encode" rel="nofollow noopener noreferrer" target="_blank">series.encode</a> 来做映射。总体是这样的感觉：</p>
+<div class="nuxt-content-highlight"><!----></div>
+<p><code>series.encode</code> 声明的基本结构如下。其中冒号左边是坐标系、标签等特定名称，如 <code>'x'</code>, <code>'y'</code>, <code>'tooltip'</code> 等，冒号右边是数据中的维度名（string 格式）或者维度的序号（number 格式，从 0 开始计数），可以指定一个或多个维度（使用数组）。通常情况下，下面各种信息不需要所有的都写，按需写即可。</p>
+<p>下面是 <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>这是个更丰富的 <code>series.encode</code> 的 <a href="https://echarts.apache.org/examples/zh/editor.html?c=dataset-encode1&edit=1&reset=1" rel="nofollow noopener noreferrer" target="_blank">示例</a> 。</p>
+<h2 id="默认的-seriesencode"><a href="#%E9%BB%98%E8%AE%A4%E7%9A%84-seriesencode" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>默认的 series.encode</h2>
+<p>值得一提的是，当 <code>series.encode</code> 并没有指定时，ECharts 针对最常见直角坐标系中的图表（折线图、柱状图、散点图、K 线图等）、饼图、漏斗图，会采用一些默认的映射规则。默认的映射规则比较简单，大体是：</p>
+<ul>
+<li>在坐标系中（如直角坐标系、极坐标系等）
+<ul>
+<li>如果有类目轴（axis.type 为 'category'），则将第一列（行）映射到这个轴上，后续每一列（行）对应一个系列。</li>
+<li>如果没有类目轴，假如坐标系有两个轴（例如直角坐标系的 X Y 轴），则每两列对应一个系列，这两列分别映射到这两个轴上。</li>
+</ul>
+</li>
+<li>如果没有坐标系（如饼图）
+<ul>
+<li>取第一列（行）为名字，第二列（行）为数值（如果只有一列，则取第一列为数值）。</li>
+</ul>
+</li>
+</ul>
+<p>默认的规则不能满足要求时，就可以自己来配置 <code>encode</code>，也并不复杂。这是一个 <a href="https://echarts.apache.org/examples/zh/editor.html?c=dataset-default&edit=1&reset=1" rel="nofollow noopener noreferrer" target="_blank">例子</a>。</p>
+<h2 id="几个常见的-seriesencode-设置方式举例"><a href="#%E5%87%A0%E4%B8%AA%E5%B8%B8%E8%A7%81%E7%9A%84-seriesencode-%E8%AE%BE%E7%BD%AE%E6%96%B9%E5%BC%8F%E4%B8%BE%E4%BE%8B" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>几个常见的 series.encode 设置方式举例</h2>
+<p>问：如何把第三列设置为 X 轴，第五列设置为 Y 轴？</p>
+<p>答：</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>问：如何把第三行设置为 X 轴，第五行设置为 Y 轴？</p>
+<p>答：</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>问：如何把第二列设置为标签？</p>
+<p>答：
+关于标签的显示 <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>问：如何让第 2 列和第 3 列显示在提示框（tooltip）中？</p>
+<p>答：</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>问：数据里没有维度名，那么怎么给出维度名？</p>
+<p>答：</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>问：如何把第三列映射为气泡图的点的大小？</p>
+<p>答：</p>
+<div class="nuxt-content-highlight"><!----></div>
+<p>问：encode 里指定了映射，但是不管用？</p>
+<p>答：可以查查有没有拼错，比如，维度名是：<code>'Life Expectancy'</code>，encode 中拼成了 <code>'Life Expectency'</code>。</p>
+<h2 id="视觉通道（颜色、尺寸等）的映射"><a href="#%E8%A7%86%E8%A7%89%E9%80%9A%E9%81%93%EF%BC%88%E9%A2%9C%E8%89%B2%E3%80%81%E5%B0%BA%E5%AF%B8%E7%AD%89%EF%BC%89%E7%9A%84%E6%98%A0%E5%B0%84" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>视觉通道（颜色、尺寸等）的映射</h2>
+<p>我们可以使用 <a href="https://echarts.apache.org/option.html##visualMap" rel="nofollow noopener noreferrer" target="_blank">visualMap</a> 组件进行视觉通道的映射。详见 <a href="https://echarts.apache.org/option.html##visualMap" rel="nofollow noopener noreferrer" target="_blank">visualMap</a> 文档的介绍。这是一个 <a href="https://echarts.apache.org/examples/zh/editor.html?c=dataset-encode0&edit=1&reset=1" rel="nofollow noopener noreferrer" target="_blank">示例</a>。</p>
+<h2 id="数据的各种格式"><a href="#%E6%95%B0%E6%8D%AE%E7%9A%84%E5%90%84%E7%A7%8D%E6%A0%BC%E5%BC%8F" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>数据的各种格式</h2>
+<p>多数常见图表中，数据适于用二维表的形式描述。广为使用的数据表格软件（如 MS Excel、Numbers）或者关系数据数据库都是二维表。他们的数据可以导出成 JSON 格式，输入到 <code>dataset.source</code> 中，在不少情况下可以免去一些数据处理的步骤。</p>
+<blockquote>
+<p>假如数据导出成 csv 文件，那么可以使用一些 csv 工具如 <a href="https://github.com/d3/d3-dsv" rel="nofollow noopener noreferrer" target="_blank">dsv</a> 或者 <a href="https://github.com/mholt/PapaParse" rel="nofollow noopener noreferrer" target="_blank">PapaParse</a> 将 csv 转成 JSON。</p>
+</blockquote>
+<p>在 JavaScript 常用的数据传输格式中，二维数组可以比较直观的存储二维表。前面的示例都是使用二维数组表示。</p>
+<p>除了二维数组以外，dataset 也支持例如下面 key-value 方式的数据格式，这类格式也非常常见。但是这类格式中，目前并不支持 <a href="https://echarts.apache.org/option.html##series.seriesLayoutBy" rel="nofollow noopener noreferrer" target="_blank">seriesLayoutBy</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 [...]
+<h2 id="多个-dataset-以及如何引用他们"><a href="#%E5%A4%9A%E4%B8%AA-dataset-%E4%BB%A5%E5%8F%8A%E5%A6%82%E4%BD%95%E5%BC%95%E7%94%A8%E4%BB%96%E4%BB%AC" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>多个 dataset 以及如何引用他们</h2>
+<p>可以同时定义多个 dataset。系列可以通过 <a href="https://echarts.apache.org/option.html##series.datasetIndex" rel="nofollow noopener noreferrer" target="_blank">series.datasetIndex</a> 来指定引用哪个 dataset。例如：</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="echarts-3-的数据设置方式（seriesdata）仍正常使用"><a href="#echarts-3-%E7%9A%84%E6%95%B0%E6%8D%AE%E8%AE%BE%E7%BD%AE%E6%96%B9%E5%BC%8F%EF%BC%88seriesdata%EF%BC%89%E4%BB%8D%E6%AD%A3%E5%B8%B8%E4%BD%BF%E7%94%A8" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>ECharts 3 的数据设置方式（series.data）仍正常使用</h2>
+<p>ECharts 4 之前一直以来的数据声明方式仍然被正常支持，如果系列已经声明了 <a href="https://echarts.apache.org/option.html##series.data" rel="nofollow noopener noreferrer" target="_blank">series.data</a>， 那么就会使用 <a href="https://echarts.apache.org/option.html##series.data" rel="nofollow noopener noreferrer" target="_blank">series.data</a> 而非 <code>dataset</code>。</p>
+<div class="nuxt-content-highlight"><!----></div>
+<p>其实，<a href="https://echarts.apache.org/option.html##series.data" rel="nofollow noopener noreferrer" target="_blank">series.data</a> 也是种会一直存在的重要设置方式。一些特殊的非 table 格式的图表，如 <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 href="https://echarts.apache.org/option.html##series-lines" rel=" [...]
+<h2 id="其他"><a href="#%E5%85%B6%E4%BB%96" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>其他</h2>
+<p>目前并非所有图表都支持 dataset。支持 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>。
+后续会有更多的图表进行支持。</p>
+<p>最后，给出这个 <a href="https://echarts.apache.org/examples/zh/editor.html?c=dataset-link&edit=1&reset=1" rel="nofollow noopener noreferrer" target="_blank">示例</a>，多个图表共享一个 <code>dataset</code>，并带有联动交互。</p></div> <div class="table-of-contents"><h4 class="toc-container-header">本页目录</h4> <ul><li class="toc2"><a href="/echarts-handbook/zh/concepts/dataset#%E5%9C%A8%E7%B3%BB%E5%88%97%E4%B8%AD%E8%AE%BE%E7%BD%AE%E6%95%B0%E6%8D%AE">在系列中设置数据</a></li><li class="toc2"><a href="/echarts-handbook/zh/con [...]
+ <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/concepts/event/index.html b/docs/zh/concepts/event/index.html
new file mode 100644
index 0000000..da26b6b
--- /dev/null
+++ b/docs/zh/concepts/event/index.html
@@ -0,0 +1,58 @@
+<!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="Apache 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 [...]
+ </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>在 Apache ECharts 的图表中用户的操作将会触发相应的事件。开发者可以监听这些事件，然后通过回调函数做相应的处理，比如跳转到一个地址，或者弹出对话框，或者做数据下钻等等。</p>
+<p>ECharts 中的事件名称对应 DOM 事件名称，均为小写的字符串，如下是一个绑定点击操作的示例。</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>在 ECharts 中事件分为两种类型，一种是用户鼠标操作点击，或者 hover 图表的图形时触发的事件，还有一种是用户在使用可以交互的组件后触发的行为事件，例如在切换图例开关时触发的 <a href="https://echarts.apache.org/api.html#events.legendselectchanged" rel="nofollow noopener noreferrer" target="_blank">'legendselectchanged'</a> 事件（这里需要注意切换图例开关是不会触发 <code>'legendselected'</code> 事件的），数据区域缩放时触发的 <a href="https://echarts.apache.org/api.html#events.legendselectchanged" rel="nofollow noopener noreferrer" target="_blank">'datazoom'</a> 事件等等。</p>
+<h2 id="鼠标事件的处理"><a href="#%E9%BC%A0%E6%A0%87%E4%BA%8B%E4%BB%B6%E7%9A%84%E5%A4%84%E7%90%86" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>鼠标事件的处理</h2>
+<p>ECharts 支持常规的鼠标事件类型，包括 <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> 事件。下面先来看一个简单的点击柱状图后打开相应的百度搜索页面的示例。</p>
+<div class="nuxt-content-highlight"><!----></div>
+<p>所有的鼠标事件包含参数 <code>params</code>，这是一个包含点击图形的数据信息的对象，如下格式：</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 [...]
+<p>如何区分鼠标点击到了哪里：</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> 只对指定的组件的图形元素的触发回调：</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> 可为 <code>string</code> 或者 <code>Object</code>。</p>
+<p>如果为 <code>string</code> 表示组件类型。格式可以是 'mainType' 或者 'mainType.subType'。例如：</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>Object</code>，可以包含以下一个或多个属性，每个属性都是可选的：</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 [...]
+<p>例如：</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>例如：</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>例如：</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>例如：</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>你可以在回调函数中获得这个对象中的数据名、系列名称后在自己的数据仓库中索引得到其它的信息后更新图表，显示浮层等等，如下示例代码：</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="组件交互的行为事件"><a href="#%E7%BB%84%E4%BB%B6%E4%BA%A4%E4%BA%92%E7%9A%84%E8%A1%8C%E4%B8%BA%E4%BA%8B%E4%BB%B6" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>组件交互的行为事件</h2>
+<p>在 ECharts 中基本上所有的组件交互行为都会触发相应的事件，常用的事件和事件对应参数在 <a href="https://echarts.apache.org//api.html#events" rel="nofollow noopener noreferrer" target="_blank">events</a> 文档中有列出。</p>
+<p>下面是监听一个图例开关的示例：</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="代码触发-echarts-中组件的行为"><a href="#%E4%BB%A3%E7%A0%81%E8%A7%A6%E5%8F%91-echarts-%E4%B8%AD%E7%BB%84%E4%BB%B6%E7%9A%84%E8%A1%8C%E4%B8%BA" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>代码触发 ECharts 中组件的行为</h2>
+<p>上面提到诸如 <code>'legendselectchanged'</code> 事件会由组件交互的行为触发，那除了用户的交互操作，有时候也会有需要在程序里调用方法触发图表的行为，诸如显示 tooltip，选中图例。</p>
+<p>在 ECharts 通过调用 <code>myChart.dispatchAction({ type: '' })</code> 触发图表行为，统一管理了所有动作，也可以方便地根据需要去记录用户的行为路径。</p>
+<p>常用的动作和动作对应参数在 <a href="https://echarts.apache.org//api.html#action" rel="nofollow noopener noreferrer" target="_blank">action</a> 文档中有列出。</p>
+<p>下面示例演示了如何通过 <code>dispatchAction</code> 去轮流高亮饼图的每个扇形。</p>
+<div class="nuxt-content-highlight"><!----></div>
+<h2 id="监听空白处的事件"><a href="#%E7%9B%91%E5%90%AC%E7%A9%BA%E7%99%BD%E5%A4%84%E7%9A%84%E4%BA%8B%E4%BB%B6" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>监听“空白处”的事件</h2>
+<p>有时候，开发者需要监听画布的“空白处”所触发的事件。比如，当需要在用户点击“空白处”的时候重置图表时。</p>
+<p>在讨论这个功能之前，我们需要先明确两种事件。zrender 事件和 echarts 事件。</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 事件与 echarts 事件不同。前者是当鼠标在任何地方都会被触发，而后者是只有当鼠标在图形元素上时才能被触发。事实上，echarts 事件是在 zrender 事件的基础上实现的，也就是说，当一个 zrender 事件在图形元素上被触发时，echarts 将触发一个 echarts 事件给开发者。</p>
+<p>有了 zrender 事件，我们就可以实现监听空白处的事件，具体如下：</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/zh/concepts/legend/index.html b/docs/zh/concepts/legend/index.html
new file mode 100644
index 0000000..0857a7f
--- /dev/null
+++ b/docs/zh/concepts/legend/index.html
@@ -0,0 +1,32 @@
+<!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="Apache 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 [...]
+ </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>图例是图表中对内容区元素的注释、用不同形状、颜色、文字等来标示不同数据列，通过点击对应数据列的标记，可以显示或隐藏该数据列。图例虽然不是图表中的主要信息、却是了解图表信息的钥匙。</p>
+<h2 id="布局"><a aria-hidden="true" href="#%E5%B8%83%E5%B1%80" tabindex="-1"><span class="icon icon-link"></span></a>布局</h2>
+<p>图例一般放在图表的右上角、也可以放在图表的底部、同一页面中的所有图例位置保持一致，可以横排对齐也可以纵排对齐。还要综合考虑整体的图表空间是适合哪种摆放方式。当图表纵向空间紧张或者内容区量过大的时候、建议摆放在图表的下方。下面是几种图例的摆放方式：</p>
+<div class="nuxt-content-highlight"><!----></div>
+<p>对于图例较多时，可以使用可滚动翻页的图例</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="样式"><a aria-hidden="true" href="#%E6%A0%B7%E5%BC%8F" tabindex="-1"><span class="icon icon-link"></span></a>样式</h2>
+<p>在深色系背景下、为了方便阅读，建议给图例加上半透明的浅色背景层，文字颜色设置为浅色。</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>图例的颜色标签有很多种设计方式、针对不同的图表、图例样式也会有所不同。</p>
+<img max-width="830" width="80%" height="80%" src="images/design/legend/charts_sign_img04.png">
+<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="交互"><a aria-hidden="true" href="#%E4%BA%A4%E4%BA%92" tabindex="-1"><span class="icon icon-link"></span></a>交互</h2>
+<p>根据场景需要，图例可支持交互操作，点击控制显示或隐藏对应的数据列；</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="图例注意事项"><a aria-hidden="true" href="#%E5%9B%BE%E4%BE%8B%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9" tabindex="-1"><span class="icon icon-link"></span></a>图例注意事项</h2>
+<p>图例要要注意视情况使用，有些双轴图包含了多种图表类型，不同类型的图例样式要有所区分。</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>当图表只有一种数据信息时，用图表标题说明数据信息即可。建议此时不要加上图例。</p></div> <div class="table-of-contents"><h4 class="toc-container-header">本页目录</h4> <ul><li class="toc2"><a href="/echarts-handbook/zh/concepts/legend#%E5%B8%83%E5%B1%80">布局</a></li><li class="toc2"><a href="/echarts-handbook/zh/concepts/legend#%E6%A0%B7%E5%BC%8F">样式</a></li><li class="toc2"><a href="/echarts-handbook/zh/concepts/legend#%E4%BA%A4%E4%BA%92">交互</a></li><li class="toc2"><a href="/echarts-handbook/zh/concepts/legend#%E5%9B%BE%E4%BE%8 [...]
+ <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/concepts/style/index.html b/docs/zh/concepts/style/index.html
new file mode 100644
index 0000000..2f0d0fa
--- /dev/null
+++ b/docs/zh/concepts/style/index.html
@@ -0,0 +1,50 @@
+<!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="Apache 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 [...]
+ </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>本文主要是大略概述，用哪些方法，可以在 Apache ECharts<sup>TM</sup> 中设置样式，改变图形元素或者文字的颜色、明暗、大小等。</p>
+<blockquote>
+<p>之所以用“样式”这种可能不很符合数据可视化思维的词，是因为，比较通俗易懂。</p>
+</blockquote>
+<p>本文介绍这几种方式，他们的功能范畴可能会有交叉（即同一种细节的效果可能可以用不同的方式实现），但是他们各有各的场景偏好。</p>
+<ul>
+<li>颜色主题（Theme）</li>
+<li>调色盘</li>
+<li>直接样式设置（itemStyle、lineStyle、areaStyle、label、...）</li>
+<li>视觉映射（visualMap）</li>
+</ul>
+<h2 id="颜色主题（theme）"><a href="#%E9%A2%9C%E8%89%B2%E4%B8%BB%E9%A2%98%EF%BC%88theme%EF%BC%89" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>颜色主题（Theme）</h2>
+<p>最简单的更改全局样式的方式，是直接采用颜色主题（theme）。例如，在 <a href="$%7BwebsitePath%7D/examples">示例集合</a> 中，可以通过切换深色模式，直接看到采用主题的效果。</p>
+<p>ECharts5 除了一贯的默认主题外，还内置了<code>'dark'</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>其他的主题，没有内置在 ECharts 中，需要自己加载。这些主题可以在 <a href="https://echarts.apache.org/theme-builder.html" rel="nofollow noopener noreferrer" target="_blank">主题编辑器</a> 里访问到。也可以使用这个主题编辑器，自己编辑主题。下载下来的主题可以这样使用：</p>
+<p>如果主题保存为 JSON 文件，那么可以自行加载和注册，例如：</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>如果保存为 UMD 格式的 JS 文件，那么支持了自注册，直接引入 JS 文件即可：</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="调色盘"><a href="#%E8%B0%83%E8%89%B2%E7%9B%98" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>调色盘</h2>
+<p>调色盘，可以在 option 中设置。它给定了一组颜色，图形、系列会自动从其中选择颜色。
+可以设置全局的调色盘，也可以设置系列自己专属的调色盘。</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="直接的样式设置-itemstyle-linestyle-areastyle-label-"><a href="#%E7%9B%B4%E6%8E%A5%E7%9A%84%E6%A0%B7%E5%BC%8F%E8%AE%BE%E7%BD%AE-itemstyle-linestyle-areastyle-label-" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>直接的样式设置 itemStyle, lineStyle, areaStyle, label, ...</h2>
+<p>直接的样式设置是比较常用设置方式。纵观 ECharts 的 <a href="https://echarts.apache.org/option.html#" rel="nofollow noopener noreferrer" target="_blank">option</a> 中，很多地方可以设置 <a href="https://echarts.apache.org/option.html#series-bar.itemStyle" rel="nofollow noopener noreferrer" target="_blank">itemStyle</a>、<a href="https://echarts.apache.org/option.html#series-line.lineStyle" rel="nofollow noopener noreferrer" target="_blank">lineStyle</a>、<a href="https://echarts.apache.org/option.html#series-line.areaS [...]
+<p>一般来说，ECharts 的各个系列和组件，都遵从这些命名习惯，虽然不同图表和组件中，<code>itemStyle</code>、<code>label</code> 等可能出现在不同的地方。</p>
+<p>在下面例子中我们给气泡图设置了阴影，渐变色等复杂的样式，你可以修改代码中的样式看修改后的效果：</p>
+<div class="nuxt-content-highlight"><!----></div>
+<h2 id="高亮的样式：emphasis"><a href="#%E9%AB%98%E4%BA%AE%E7%9A%84%E6%A0%B7%E5%BC%8F%EF%BC%9Aemphasis" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>高亮的样式：emphasis</h2>
+<p>在鼠标悬浮到图形元素上时，一般会出现高亮的样式。默认情况下，高亮的样式是根据普通样式自动生成的。但是高亮的样式也可以自己定义，主要是通过 <a href="https://echarts.apache.org/option.html#series-bar.emphasis" rel="nofollow noopener noreferrer" target="_blank">emphasis</a> 属性来定制。<a href="https://echarts.apache.org/option.html#series-bar.emphasis" rel="nofollow noopener noreferrer" target="_blank">emphsis</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>注意：在 ECharts4 以前，高亮和普通样式的写法，是这样的：</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>仍然被兼容</strong>，但是，不再推荐。事实上，多数情况下，使用者只会配置普通状态下的样式，而使用默认的高亮样式。所以在 ECharts4 中，支持不写 <code>normal</code> 的配置方法（即本文开头的那种写法），使得配置项更扁平简单。</p>
+<h2 id="通过-visualmap-组件设定样式"><a href="#%E9%80%9A%E8%BF%87-visualmap-%E7%BB%84%E4%BB%B6%E8%AE%BE%E5%AE%9A%E6%A0%B7%E5%BC%8F" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>通过 visualMap 组件设定样式</h2>
+<p><a href="https://echarts.apache.org/option.html#visualMap" rel="nofollow noopener noreferrer" target="_blank">visualMap 组件</a> 能指定数据到颜色、图形尺寸的映射规则，详见 <a href="zh/concepts/visual-map">数据的视觉映射</a>。</p></div> <div class="table-of-contents"><h4 class="toc-container-header">本页目录</h4> <ul><li class="toc2"><a href="/echarts-handbook/zh/concepts/style#%E9%A2%9C%E8%89%B2%E4%B8%BB%E9%A2%98%EF%BC%88theme%EF%BC%89">颜色主题（Theme）</a></li><li class="toc2"><a href="/echarts-handbook/zh/concepts/style#% [...]
+ <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/concepts/visual-map/index.html b/docs/zh/concepts/visual-map/index.html
new file mode 100644
index 0000000..dc4d4a5
--- /dev/null
+++ b/docs/zh/concepts/visual-map/index.html
@@ -0,0 +1,49 @@
+<!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="Apache 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 [...]
+ </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>数据可视化是数据到视觉元素的映射过程（这个过程也可称为视觉编码，视觉元素也可称为视觉通道）。</p>
+<p>ECharts 的每种图表本身就内置了这种映射过程，比如折线图把数据映射到“线”，柱状图把数据映射到“长度”。一些更复杂的图表，如关系图、事件河流图、树图也都会做出各自内置的映射。</p>
+<p>此外，ECharts 还提供了 <a href="https://echarts.apache.org/option.html#visualMap" rel="nofollow noopener noreferrer" target="_blank">visualMap 组件</a> 来提供通用的视觉映射。<code>visualMap</code> 组件中可以使用的视觉元素有：</p>
+<ul>
+<li>图形类别（symbol）、图形大小（symbolSize）</li>
+<li>颜色（color）、透明度（opacity）、颜色透明度（colorAlpha）、</li>
+<li>颜色明暗度（colorLightness）、颜色饱和度（colorSaturation）、色调（colorHue）</li>
+</ul>
+<p>下面对 <code>visualMap</code> 组件的使用方式进行简要的介绍。</p>
+<h2 id="数据和维度"><a href="#%E6%95%B0%E6%8D%AE%E5%92%8C%E7%BB%B4%E5%BA%A6" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>数据和维度</h2>
+<p>ECharts 中的数据，一般存放于 <a href="https://echarts.apache.org/option.html#series.data" rel="nofollow noopener noreferrer" target="_blank"><code>series.data</code></a> 中。根据图表类型不同，数据的具体形式也可能有些许差异。比如可能是“线性表“、“树“、“图“等。但他们都有个共性：都是“数据项（dataItem）“的集合。每个数据项含有“数据值（value）“和其他信息（如果需要的话）。每个数据值，可以是单一的数值（一维）或者一个数组（多维）。</p>
+<p>例如，<a href="https://echarts.apache.org/option.html#series.data" rel="nofollow noopener noreferrer" target="_blank">series.data</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 [...]
+<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>在图表中，往往默认把 value 的前一两个维度进行映射，比如取第一个维度映射到 x 轴，取第二个维度映射到 y 轴。如果想要把更多的维度展现出来，可以借助 <code>visualMap</code>。最常见的情况，<a href="https://echarts.apache.org/option.html#series-scatter" rel="nofollow noopener noreferrer" target="_blank">散点图（scatter）</a> 使用半径展现了第三个维度。</p>
+<h2 id="visualmap-组件"><a href="#visualmap-%E7%BB%84%E4%BB%B6" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>visualMap 组件</h2>
+<p>visualMap 组件定义了把数据的<em>哪个维度</em>映射到<em>什么视觉元素上</em>。</p>
+<p>现在提供如下两种类型的 visualMap 组件，通过 <a href="https://echarts.apache.org/option.html#visualMap.type" rel="nofollow noopener noreferrer" target="_blank">visualMap.type</a> 来区分。</p>
+<p>其定义结构例如：</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="连续型与分段型视觉映射组件"><a href="#%E8%BF%9E%E7%BB%AD%E5%9E%8B%E4%B8%8E%E5%88%86%E6%AE%B5%E5%9E%8B%E8%A7%86%E8%A7%89%E6%98%A0%E5%B0%84%E7%BB%84%E4%BB%B6" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>连续型与分段型视觉映射组件</h2>
+<p>ECharts 的视觉映射组件分为连续型（<a href="https://echarts.apache.org/option.html#visualMap-continuous" rel="nofollow noopener noreferrer" target="_blank">visualMapContinuous</a>）与分段型（<a href="https://echarts.apache.org/option.html#visualMap-piecewise" rel="nofollow noopener noreferrer" target="_blank">visualMapPiecewise</a>）。</p>
+<p>连续型的意思是，进行视觉映射的数据维度是连续的数值；而分段型则是数据被分成了多段或者是离散型的数据。</p>
+<h3 id="连续型视觉映射"><a href="#%E8%BF%9E%E7%BB%AD%E5%9E%8B%E8%A7%86%E8%A7%89%E6%98%A0%E5%B0%84" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>连续型视觉映射</h3>
+<p>连续型视觉映射通过指定最大值、最小值，就可以确定视觉映射的范围。</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/option.html#visualMap.inRange" rel="nofollow noopener noreferrer" target="_blank">visualMap.inRange</a> 表示在数据映射范围内的数据采用的样式；而 <a href="https://echarts.apache.org/option.html#visualMap.outOfRange" rel="nofollow noopener noreferrer" target="_blank">visualMap.outOfRange</a> 则指定了超出映射范围外的数据的样式。</p>
+<p><a href="~visualMap.dimension">visualMap.dimension</a> 则指定了将数据的哪个维度做视觉映射。</p>
+<h3 id="分段型视觉映射"><a href="#%E5%88%86%E6%AE%B5%E5%9E%8B%E8%A7%86%E8%A7%89%E6%98%A0%E5%B0%84" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>分段型视觉映射</h3>
+<p>分段型视觉映射组件有三种模式：</p>
+<ul>
+<li>连续型数据平均分段：依据 <a href="https://echarts.apache.org/option.html#visualMap-piecewise.splitNumber" rel="nofollow noopener noreferrer" target="_blank">visualMap-piecewise.splitNumber</a> 来自动平均分割成若干块。</li>
+<li>连续型数据自定义分段：依据 <a href="https://echarts.apache.org/option.html#visualMap-piecewise.pieces" rel="nofollow noopener noreferrer" target="_blank">visualMap-piecewise.pieces</a> 来定义每块范围。</li>
+<li>离散数据（类别性数据）：类别定义在 <a href="https://echarts.apache.org/option.html#visualMap-piecewise.categories" rel="nofollow noopener noreferrer" target="_blank">visualMap-piecewise.categories</a> 中。</li>
+</ul>
+<p>使用分段型视觉映射时，需要将 <code>type</code> 设为 <code>'piecewise'</code>，并且将上面的三个配置项选其一配置即可，其他配置项类似连续型视觉映射。</p></div> <div class="table-of-contents"><h4 class="toc-container-header">本页目录</h4> <ul><li class="toc2"><a href="/echarts-handbook/zh/concepts/visual-map#%E6%95%B0%E6%8D%AE%E5%92%8C%E7%BB%B4%E5%BA%A6">数据和维度</a></li><li class="toc2"><a href="/echarts-handbook/zh/concepts/visual-map#visualmap-%E7%BB%84%E4%BB%B6">visualMap 组件</a></li><li class="toc2"><a href="/echarts-handbook/zh/concepts/vis [...]
+ <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/get-started/index.html b/docs/zh/get-started/index.html
new file mode 100644
index 0000000..53da994
--- /dev/null
+++ b/docs/zh/get-started/index.html
@@ -0,0 +1,30 @@
+<!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="Apache 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 [...]
+ </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="获取-apache-echarts"><a href="#%E8%8E%B7%E5%8F%96-apache-echarts" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>获取 Apache ECharts</h2>
+<p>Apache ECharts 支持多种下载方式，可以在下一篇教程<a href="zh/basics/download">安装</a>中查看所有方式。这里，我们以从 <a href="https://www.jsdelivr.com/package/npm/echarts" rel="nofollow noopener noreferrer" target="_blank">jsDelivr</a> CDN 上获取为例，介绍如何快速安装。</p>
+<p>在 <a href="https://www.jsdelivr.com/package/npm/echarts" rel="nofollow noopener noreferrer" target="_blank">https://www.jsdelivr.com/package/npm/echarts</a> 选择 <code>dist/echarts.js</code>，点击并保存为 <code>echarts.js</code> 文件。</p>
+<blockquote>
+<p>关于这些文件的介绍，可以在下一篇教程<a href="zh/basics/download">安装</a>中了解更多信息。</p>
+</blockquote>
+<h2 id="引入-apache-echarts"><a href="#%E5%BC%95%E5%85%A5-apache-echarts" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>引入 Apache ECharts</h2>
+<p>在刚才保存 <code>echarts.js</code> 的目录新建一个 <code>index.html</code> 文件，内容如下：</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>打开这个 <code>index.html</code>，你会看到一片空白。但是不要担心，打开控制台确认没有报错信息，就可以进行下一步。</p>
+<h2 id="绘制一个简单的图表"><a href="#%E7%BB%98%E5%88%B6%E4%B8%80%E4%B8%AA%E7%AE%80%E5%8D%95%E7%9A%84%E5%9B%BE%E8%A1%A8" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>绘制一个简单的图表</h2>
+<p>在绘图前我们需要为 ECharts 准备一个定义了高宽的 DOM 容器。在刚才的例子 <code></head></code> 之后，添加：</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>然后就可以通过 <a href="https://echarts.apache.org//api.html#echarts.init" rel="nofollow noopener noreferrer" target="_blank">echarts.init</a> 方法初始化一个 echarts 实例并通过 <a href="https://echarts.apache.org//api.html#echartsInstance.setOption" rel="nofollow noopener noreferrer" target="_blank">setOption</a> 方法生成一个简单的柱状图，下面是完整代码。</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>这样你的第一个图表就诞生了！</p>
+<iframe width="100%" height="350" src="https://echarts.apache.org/examples/zh/view.html?c=doc-example/getting-started"></iframe></div> <div class="table-of-contents"><h4 class="toc-container-header">本页目录</h4> <ul><li class="toc2"><a href="/echarts-handbook/zh/get-started#%E8%8E%B7%E5%8F%96-apache-echarts">获取 Apache ECharts</a></li><li class="toc2"><a href="/echarts-handbook/zh/get-started#%E5%BC%95%E5%85%A5-apache-echarts">引入 Apache ECharts</a></li><li class="toc2"><a href="/echarts-hand [...]
+ <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..cfc0f96
--- /dev/null
+++ b/docs/zh/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="Apache 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 [...]
+ </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/zh/meta/edit-guide/index.html b/docs/zh/meta/edit-guide/index.html
new file mode 100644
index 0000000..a9e6694
--- /dev/null
+++ b/docs/zh/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="Apache 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 [...]
+ </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="新增一个-markdown-文件"><a href="#%E6%96%B0%E5%A2%9E%E4%B8%80%E4%B8%AA-markdown-%E6%96%87%E4%BB%B6" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>新增一个 markdown 文件</h2>
+<p>在 <code>contents/zh/</code>（中文文章）或 <code>contents/en/</code>（英文文章）目录下新增一个 markdown 文件，最多支持三级目录。将路径及标题信息更新在 <code>contents/zh/posts.yml</code> 或 <code>contents/en/posts.yml</code>。</p>
+<p>markdown 文件名称小写。</p>
+<h2 id="使用-prettier-来自动格式化代码"><a href="#%E4%BD%BF%E7%94%A8-prettier-%E6%9D%A5%E8%87%AA%E5%8A%A8%E6%A0%BC%E5%BC%8F%E5%8C%96%E4%BB%A3%E7%A0%81" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>使用 prettier 来自动格式化代码</h2>
+<p>在开始之前，我们推荐安装<code>prettier</code>的 <a href="https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode" rel="nofollow noopener noreferrer" target="_blank">VSCode 插件</a>，该插件可以在你保存的时候自动帮你格式化代码。</p>
+<p>如果你觉得自动的格式化破坏了你的代码块，你可以在在代码块外面加上下面代码阻止<code>prettier</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 [...]
+<p>如果你发现有的代码块并没有被格式化，请先检查该代码是否存在语法上的错误。</p>
+<h2 id="内置变量"><a href="#%E5%86%85%E7%BD%AE%E5%8F%98%E9%87%8F" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>内置变量</h2>
+<ul>
+<li><code>optionPath</code></li>
+<li><code>mainSitePath</code></li>
+<li><code>exampleViewPath</code></li>
+<li><code>exampleEditorPath</code></li>
+</ul>
+<p>使用方式:</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="引用代码"><a href="#%E5%BC%95%E7%94%A8%E4%BB%A3%E7%A0%81" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>引用代码</h2>
+<h3 id="基础使用"><a href="#%E5%9F%BA%E7%A1%80%E4%BD%BF%E7%94%A8" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>基础使用</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="代码推荐写法"><a href="#%E4%BB%A3%E7%A0%81%E6%8E%A8%E8%8D%90%E5%86%99%E6%B3%95" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>代码推荐写法</h3>
+<p>为了可以让工具帮助我们对代码进行格式化，我们应该尽量避免有语法问题的写法。</p>
+<p>比如注释 <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="实时预览和编辑"><a href="#%E5%AE%9E%E6%97%B6%E9%A2%84%E8%A7%88%E5%92%8C%E7%BC%96%E8%BE%91" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>实时预览和编辑</h3>
+<blockquote>
+<p>目前只支持对 Option 代码的预览</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="更多预览布局"><a href="#%E6%9B%B4%E5%A4%9A%E9%A2%84%E8%A7%88%E5%B8%83%E5%B1%80" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>更多预览布局</h3>
+<h4 id="左右"><a href="#%E5%B7%A6%E5%8F%B3" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>左右</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="右左"><a href="#%E5%8F%B3%E5%B7%A6" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>右左</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="下上"><a href="#%E4%B8%8B%E4%B8%8A" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>下上</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="高亮代码行以及添加文件名"><a href="#%E9%AB%98%E4%BA%AE%E4%BB%A3%E7%A0%81%E8%A1%8C%E4%BB%A5%E5%8F%8A%E6%B7%BB%E5%8A%A0%E6%96%87%E4%BB%B6%E5%90%8D" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>高亮代码行以及添加文件名</h3>
+<p>使用：</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>效果：</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="引用图片"><a href="#%E5%BC%95%E7%94%A8%E5%9B%BE%E7%89%87" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>引用图片</h2>
+<p>图片实际存放地址在 <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="设置图片高宽"><a href="#%E8%AE%BE%E7%BD%AE%E5%9B%BE%E7%89%87%E9%AB%98%E5%AE%BD" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>设置图片高宽</h3>
+<p>对于当前页面的临时样式，可以直接写 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="添加示例-iframe"><a href="#%E6%B7%BB%E5%8A%A0%E7%A4%BA%E4%BE%8B-iframe" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>添加示例 iframe</h2>
+<p><code>src</code>为 <a href="https://echarts.apache.org/examples/zh/editor.html?c=line-simple" rel="nofollow noopener noreferrer" target="_blank">https://echarts.apache.org/examples/zh/editor.html?c=line-simple</a> 地址中<code>?c=</code>后面这一串</p>
+<p>使用：</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>效果：
+<iframe width="100%" height="300" src="https://echarts.apache.org/examples/zh/view.html?c=doc-example/getting-started"></iframe></p>
+<h2 id="添加配置项链接"><a href="#%E6%B7%BB%E5%8A%A0%E9%85%8D%E7%BD%AE%E9%A1%B9%E9%93%BE%E6%8E%A5" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>添加配置项链接</h2>
+<p>使用：</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>效果:
+<a href="https://echarts.apache.org/option.html#series-bar.itemStyle.color" target="_blank">series-bar.itemStyle.color</a></p>
+<h2 id="更多组件使用"><a href="#%E6%9B%B4%E5%A4%9A%E7%BB%84%E4%BB%B6%E4%BD%BF%E7%94%A8" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>更多组件使用</h2>
+<p>文档支持使用全局注册的<code>markdown</code>组件，除了刚才介绍的<code>md-example</code>组件，还有下面几种组件</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>提示组件</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">本页目录</h4> <ul><li class="toc2"><a href="/echarts-handbook/zh/meta/edit-guide#%E6%96%B0%E5%A2%9E%E4%B8%80%E4%B8%AA-markdown-%E6%96%87%E4%BB%B6">新增一个 markdown 文件</a></li><li class="toc2"><a href="/echarts-handbook/zh/meta/edit-guide#%E4%BD%BF%E7%94%A8-prettier-%E6%9D%A5%E8%87%AA%E5%8A%A8%E6%A0%BC%E5%BC%8F%E5%8C%96%E4%BB%A3%E7%A0%81">使用 prettier 来自动格式化代码</a></li><li class="toc2"><a href="/echarts-handboo [...]
+ <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