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/06/04 12:17:17 UTC
[echarts-handbook] 01/01: Deploying to gh-pages from @ apache/echarts-handbook@fac688f1bf3e065fc90d72824feb84aa2b639ee4 🚀
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 7a48384f4ed9b8838d6e84a8f42e88d3a7adaa88
Author: pissang <sh...@baidu.com>
AuthorDate: Fri Jun 4 12:17:08 2021 +0000
Deploying to gh-pages from @ apache/echarts-handbook@fac688f1bf3e065fc90d72824feb84aa2b639ee4 🚀
---
docs/.nojekyll | 0
docs/200.html | 13 ++
docs/README.md | 11 ++
docs/_nuxt/7e05f0f.js | 1 +
docs/_nuxt/LICENSES | 77 ++++++++++++
docs/_nuxt/content/db-77dcccba.json | 1 +
docs/_nuxt/css/0ec91a5.css | 1 +
docs/_nuxt/css/1c37eb7.css | 1 +
docs/_nuxt/css/3883253.css | 1 +
docs/_nuxt/css/992028c.css | 4 +
docs/_nuxt/js/077a7ade5ffeb5d1b093.js | 2 +
docs/_nuxt/js/28b55ac964ecfb45fa94.js | 1 +
docs/_nuxt/js/641a87ee2a185a89bc75.js | 1 +
docs/_nuxt/js/6a3eaf09fbfb695ff461.js | 1 +
docs/_nuxt/js/83c16b72e84c2ff645c5.js | 2 +
docs/_nuxt/js/a78399fc7d59244290b7.js | 1 +
docs/_nuxt/js/c9aa5748ca0e869b1643.js | 1 +
docs/_nuxt/js/c9b64af237895789f2f8.js | 1 +
docs/_nuxt/js/d318837dd6c2ca5e56ea.js | 2 +
docs/_nuxt/js/e91b5c1469410df4d468.js | 1 +
docs/_nuxt/static/1622809025/manifest.js | 1 +
docs/_nuxt/static/1622809025/payload.js | 1 +
docs/_nuxt/static/1622809025/state.js | 1 +
.../chart-types/bar/bar-race/payload.js | 1 +
.../application/chart-types/bar/bar-race/state.js | 1 +
.../chart-types/bar/basic-bar/payload.js | 1 +
.../application/chart-types/bar/basic-bar/state.js | 1 +
.../chart-types/bar/polar-bar/payload.js | 1 +
.../application/chart-types/bar/polar-bar/state.js | 1 +
.../chart-types/bar/stacked-bar/payload.js | 1 +
.../chart-types/bar/stacked-bar/state.js | 1 +
.../chart-types/bar/visual-map/payload.js | 1 +
.../chart-types/bar/visual-map/state.js | 1 +
.../chart-types/bar/waterfall/payload.js | 1 +
.../application/chart-types/bar/waterfall/state.js | 1 +
.../chart-types/line/area-line/payload.js | 1 +
.../chart-types/line/area-line/state.js | 1 +
.../chart-types/line/basic-line/payload.js | 1 +
.../chart-types/line/basic-line/state.js | 1 +
.../chart-types/line/smooth-line/payload.js | 1 +
.../chart-types/line/smooth-line/state.js | 1 +
.../chart-types/line/stacked-line/payload.js | 1 +
.../chart-types/line/stacked-line/state.js | 1 +
.../chart-types/line/step-line/payload.js | 1 +
.../chart-types/line/step-line/state.js | 1 +
.../chart-types/pie/basic-pie/payload.js | 1 +
.../application/chart-types/pie/basic-pie/state.js | 1 +
.../zh/application/chart-types/pie/ring/payload.js | 1 +
.../zh/application/chart-types/pie/ring/state.js | 1 +
.../zh/application/chart-types/pie/rose/payload.js | 1 +
.../zh/application/chart-types/pie/rose/state.js | 1 +
.../chart-types/scatter/basic-scatter/payload.js | 1 +
.../chart-types/scatter/basic-scatter/state.js | 1 +
.../1622809025/zh/application/connect/payload.js | 1 +
.../1622809025/zh/application/connect/state.js | 1 +
.../cross-platform/baidu-app/payload.js | 1 +
.../application/cross-platform/baidu-app/state.js | 1 +
.../application/cross-platform/server/payload.js | 1 +
.../zh/application/cross-platform/server/state.js | 1 +
.../cross-platform/wechat-app/payload.js | 1 +
.../application/cross-platform/wechat-app/state.js | 1 +
.../zh/application/data/drilldown/payload.js | 1 +
.../zh/application/data/drilldown/state.js | 1 +
.../zh/application/data/dynamic-data/payload.js | 1 +
.../zh/application/data/dynamic-data/state.js | 1 +
.../1622809025/zh/application/mobile/payload.js | 1 +
.../1622809025/zh/application/mobile/state.js | 1 +
.../1622809025/zh/basics/download/payload.js | 1 +
.../static/1622809025/zh/basics/download/state.js | 1 +
.../static/1622809025/zh/basics/help/payload.js | 1 +
.../static/1622809025/zh/basics/help/state.js | 1 +
.../1622809025/zh/basics/inspiration/payload.js | 1 +
.../1622809025/zh/basics/inspiration/state.js | 1 +
.../1622809025/zh/basics/resource/payload.js | 1 +
.../static/1622809025/zh/basics/resource/state.js | 1 +
.../1622809025/zh/best-practice/aria/payload.js | 1 +
.../1622809025/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 +
.../chart-specificatio/bar/basic-bar/payload.js | 1 +
.../chart-specificatio/bar/basic-bar/state.js | 1 +
.../bar/bi-directional-bar/payload.js | 1 +
.../bar/bi-directional-bar/state.js | 1 +
.../chart-specificatio/bar/grouped-bar/payload.js | 1 +
.../chart-specificatio/bar/grouped-bar/state.js | 1 +
.../chart-specificatio/bar/stacked-bar/payload.js | 1 +
.../chart-specificatio/bar/stacked-bar/state.js | 1 +
.../chart-specificatio/funnel/payload.js | 1 +
.../chart-specificatio/funnel/state.js | 1 +
.../chart-specificatio/gauger/payload.js | 1 +
.../chart-specificatio/gauger/state.js | 1 +
.../chart-specificatio/line/area/payload.js | 1 +
.../chart-specificatio/line/area/state.js | 1 +
.../chart-specificatio/line/basic-line/payload.js | 1 +
.../chart-specificatio/line/basic-line/state.js | 1 +
.../line/stacked-area/payload.js | 1 +
.../chart-specificatio/line/stacked-area/state.js | 1 +
.../chart-specificatio/pie/basic-pie/payload.js | 1 +
.../chart-specificatio/pie/basic-pie/state.js | 1 +
.../chart-specificatio/radar/payload.js | 1 +
.../chart-specificatio/radar/state.js | 1 +
.../chart-specificatio/scatter/bubble/payload.js | 1 +
.../chart-specificatio/scatter/bubble/state.js | 1 +
.../chart-specificatio/scatter/scatter/payload.js | 1 +
.../chart-specificatio/scatter/scatter/state.js | 1 +
.../best-practice/design/color-enhance/payload.js | 1 +
.../zh/best-practice/design/color-enhance/state.js | 1 +
.../1622809025/zh/best-practice/mobile/payload.js | 1 +
.../1622809025/zh/best-practice/mobile/state.js | 1 +
.../static/1622809025/zh/concepts/axis/payload.js | 1 +
.../static/1622809025/zh/concepts/axis/state.js | 1 +
.../1622809025/zh/concepts/chart-size/payload.js | 1 +
.../1622809025/zh/concepts/chart-size/state.js | 1 +
.../1622809025/zh/concepts/coordinate/payload.js | 1 +
.../1622809025/zh/concepts/coordinate/state.js | 1 +
.../zh/concepts/data-transform/payload.js | 1 +
.../1622809025/zh/concepts/data-transform/state.js | 1 +
.../1622809025/zh/concepts/dataset/payload.js | 1 +
.../static/1622809025/zh/concepts/dataset/state.js | 1 +
.../static/1622809025/zh/concepts/event/payload.js | 1 +
.../static/1622809025/zh/concepts/event/state.js | 1 +
.../1622809025/zh/concepts/legend/payload.js | 1 +
.../static/1622809025/zh/concepts/legend/state.js | 1 +
.../1622809025/zh/concepts/options/payload.js | 1 +
.../static/1622809025/zh/concepts/options/state.js | 1 +
.../1622809025/zh/concepts/series/payload.js | 1 +
.../static/1622809025/zh/concepts/series/state.js | 1 +
.../1622809025/zh/concepts/tooltip/payload.js | 1 +
.../static/1622809025/zh/concepts/tooltip/state.js | 1 +
.../1622809025/zh/concepts/visual-map/payload.js | 1 +
.../1622809025/zh/concepts/visual-map/state.js | 1 +
.../static/1622809025/zh/get-started/payload.js | 1 +
.../static/1622809025/zh/get-started/state.js | 1 +
.../1622809025/zh/meta/get-started/payload.js | 1 +
.../static/1622809025/zh/meta/get-started/state.js | 1 +
docs/_nuxt/static/1622809025/zh/payload.js | 1 +
docs/_nuxt/static/1622809025/zh/state.js | 1 +
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/index.html | 15 +++
.../chart-types/bar/bar-race/index.html | 14 +++
.../chart-types/bar/basic-bar/index.html | 56 +++++++++
.../chart-types/bar/polar-bar/index.html | 13 ++
.../chart-types/bar/stacked-bar/index.html | 22 ++++
.../chart-types/bar/visual-map/index.html | 13 ++
.../chart-types/bar/waterfall/index.html | 13 ++
.../chart-types/line/area-line/index.html | 16 +++
.../chart-types/line/basic-line/index.html | 41 +++++++
.../chart-types/line/smooth-line/index.html | 15 +++
.../chart-types/line/stacked-line/index.html | 17 +++
.../chart-types/line/step-line/index.html | 19 +++
.../chart-types/pie/basic-pie/index.html | 27 +++++
.../zh/application/chart-types/pie/ring/index.html | 24 ++++
.../zh/application/chart-types/pie/rose/index.html | 16 +++
.../chart-types/scatter/basic-scatter/index.html | 39 ++++++
docs/zh/application/connect/index.html | 13 ++
.../cross-platform/baidu-app/index.html | 21 ++++
.../application/cross-platform/server/index.html | 22 ++++
.../cross-platform/wechat-app/index.html | 25 ++++
docs/zh/application/data/drilldown/index.html | 13 ++
docs/zh/application/data/dynamic-data/index.html | 32 +++++
docs/zh/application/mobile/index.html | 13 ++
docs/zh/basics/download/index.html | 44 +++++++
docs/zh/basics/help/index.html | 36 ++++++
docs/zh/basics/inspiration/index.html | 19 +++
docs/zh/basics/resource/index.html | 25 ++++
docs/zh/best-practice/aria/index.html | 30 +++++
docs/zh/best-practice/canvas-vs-svg/index.html | 42 +++++++
.../chart-specificatio/bar/basic-bar/index.html | 33 +++++
.../bar/bi-directional-bar/index.html | 28 +++++
.../chart-specificatio/bar/grouped-bar/index.html | 22 ++++
.../chart-specificatio/bar/stacked-bar/index.html | 23 ++++
.../chart-specificatio/funnel/index.html | 30 +++++
.../chart-specificatio/gauger/index.html | 21 ++++
.../chart-specificatio/line/area/index.html | 22 ++++
.../chart-specificatio/line/basic-line/index.html | 30 +++++
.../line/stacked-area/index.html | 40 +++++++
.../chart-specificatio/pie/basic-pie/index.html | 32 +++++
.../chart-specificatio/radar/index.html | 27 +++++
.../chart-specificatio/scatter/bubble/index.html | 26 ++++
.../chart-specificatio/scatter/scatter/index.html | 38 ++++++
.../best-practice/design/color-enhance/index.html | 40 +++++++
docs/zh/best-practice/mobile/index.html | 13 ++
docs/zh/concepts/axis/index.html | 41 +++++++
docs/zh/concepts/chart-size/index.html | 42 +++++++
docs/zh/concepts/coordinate/index.html | 13 ++
docs/zh/concepts/data-transform/index.html | 132 ++++++++++++++++++++
docs/zh/concepts/dataset/index.html | 133 +++++++++++++++++++++
docs/zh/concepts/event/index.html | 58 +++++++++
docs/zh/concepts/legend/index.html | 39 ++++++
docs/zh/concepts/options/index.html | 13 ++
docs/zh/concepts/series/index.html | 13 ++
docs/zh/concepts/tooltip/index.html | 13 ++
docs/zh/concepts/visual-map/index.html | 49 ++++++++
docs/zh/get-started/index.html | 30 +++++
docs/zh/index.html | 15 +++
docs/zh/meta/get-started/index.html | 108 +++++++++++++++++
225 files changed, 2059 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..ce37e37
--- /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>echarts-handbook</title><meta data-n-head="1" charset="utf-8"><meta data-n-head="1" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="1" data-hid="description" name="description" content="ECharts Handbook"><link data-n-head="1" rel="icon" type="image/x-icon" href="/favicon.ico"><base href="/echarts-handbook/"><link rel="preload" href="/echarts-handbook/_nuxt/7e05f0f.js" as="script"><link rel="preload" href="/echarts-handbook/_nuxt/js/83c16b72e [...]
+ <link href="/echarts-handbook/_nuxt/css/992028c.css" rel="stylesheet"><link href="/echarts-handbook/_nuxt/css/3883253.css" rel="stylesheet"></head>
+ <body>
+ <div id="__nuxt"><style>#nuxt-loading{background:#fff;visibility:hidden;opacity:0;position:absolute;left:0;right:0;top:0;bottom:0;display:flex;justify-content:center;align-items:center;flex-direction:column;animation:nuxtLoadingIn 10s ease;-webkit-animation:nuxtLoadingIn 10s ease;animation-fill-mode:forwards;overflow:hidden}@keyframes nuxtLoadingIn{0%{visibility:hidden;opacity:0}20%{visibility:visible;opacity:0}100%{visibility:visible;opacity:1}}@-webkit-keyframes nuxtLoadingIn{0 [...]
+ <script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
+ <script src="/echarts-handbook/_nuxt/7e05f0f.js"></script><script src="/echarts-handbook/_nuxt/js/83c16b72e84c2ff645c5.js"></script><script src="/echarts-handbook/_nuxt/js/d318837dd6c2ca5e56ea.js"></script><script src="/echarts-handbook/_nuxt/js/641a87ee2a185a89bc75.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/7e05f0f.js b/docs/_nuxt/7e05f0f.js
new file mode 100644
index 0000000..e6c46f2
--- /dev/null
+++ b/docs/_nuxt/7e05f0f.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={7:0},c={7:0},f [...]
\ No newline at end of file
diff --git a/docs/_nuxt/LICENSES b/docs/_nuxt/LICENSES
new file mode 100644
index 0000000..7ac5b1a
--- /dev/null
+++ b/docs/_nuxt/LICENSES
@@ -0,0 +1,77 @@
+/*!
+ * clipboard.js v2.0.8
+ * https://clipboardjs.com/
+ *
+ * Licensed MIT © Zeno Rocha
+ */
+
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+/**
+ * Prism: Lightweight, robust, elegant syntax highlighting
+ *
+ * @license MIT <https://opensource.org/licenses/MIT>
+ * @author Lea Verou <https://lea.verou.me>
+ * @namespace
+ * @public
+ */
+
+
+/*!
+ * vue-router v3.5.1
+ * (c) 2021 Evan You
+ * @license MIT
+ */
+
+/*!
+ * JavaScript Cookie v2.2.1
+ * https://github.com/js-cookie/js-cookie
+ *
+ * Copyright 2006, 2015 Klaus Hartl & Fagner Brack
+ * Released under the MIT license
+ */
+
+/*!
+ * Vue.js v2.6.12
+ * (c) 2014-2020 Evan You
+ * Released under the MIT License.
+ */
+
+/*!
+ * cookie
+ * Copyright(c) 2012-2014 Roman Shtylman
+ * Copyright(c) 2015 Douglas Christopher Wilson
+ * MIT Licensed
+ */
+
+/*!
+ * vuex v3.6.2
+ * (c) 2021 Evan You
+ * @license MIT
+ */
+
+
+/*!
+ * vue-client-only v2.0.0
+ * (c) 2019-present egoist <0x...@gmail.com>
+ * Released under the MIT License.
+ */
+
+/*!
+ * vue-no-ssr v1.1.1
+ * (c) 2018-present egoist <0x...@gmail.com>
+ * Released under the MIT License.
+ */
diff --git a/docs/_nuxt/content/db-77dcccba.json b/docs/_nuxt/content/db-77dcccba.json
new file mode 100644
index 0000000..ff49eff
--- /dev/null
+++ b/docs/_nuxt/content/db-77dcccba.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":"bar","toc":[],"body":{"type":"root","children":[]},"text":"","dir":"/en","path":"/en/bar","extension":".md","createdAt":"2021-06-04T12:15:42.470Z","updatedAt":"2021-06-04T12:15:42.470Z","meta":{"version":0,"revisio [...]
\ No newline at end of file
diff --git a/docs/_nuxt/css/0ec91a5.css b/docs/_nuxt/css/0ec91a5.css
new file mode 100644
index 0000000..112fc29
--- /dev/null
+++ b/docs/_nuxt/css/0ec91a5.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/css/1c37eb7.css b/docs/_nuxt/css/1c37eb7.css
new file mode 100644
index 0000000..193b900
--- /dev/null
+++ b/docs/_nuxt/css/1c37eb7.css
@@ -0,0 +1 @@
+.prism-editor-wrapper{width:100%;height:100%;display:flex;align-items:flex-start;overflow:auto;-o-tab-size:1.5em;tab-size:1.5em;-moz-tab-size:1.5em}@media (-ms-high-contrast:active),(-ms-high-contrast:none){.prism-editor-wrapper .prism-editor__textarea{color:transparent!important}.prism-editor-wrapper .prism-editor__textarea::-moz-selection{background-color:#accef7!important;color:transparent!important}.prism-editor-wrapper .prism-editor__textarea::selection{background-color:#accef7!impo [...]
\ No newline at end of file
diff --git a/docs/_nuxt/css/3883253.css b/docs/_nuxt/css/3883253.css
new file mode 100644
index 0000000..281be17
--- /dev/null
+++ b/docs/_nuxt/css/3883253.css
@@ -0,0 +1 @@
+.page-content .nav-item{cursor:pointer}.page-content .nav-item .nav-link{--tw-text-opacity:1;color:rgba(100,116,139,var(--tw-text-opacity))}.page-content .nav-item .title{padding:2px 6px}.page-content .nav-item.actived .nav-link{color:#5470c6}.page-content .nav-item .nav-link:hover>.title{background:#efefef;border-radius:3px}.page-content .nav-item .glyphicon{padding:5px;color:#ccc;cursor:pointer;transform:scale(.8);top:2px;left:-5px}.bd-sidebar{padding:10px;position:sticky;z-index:1000; [...]
\ No newline at end of file
diff --git a/docs/_nuxt/css/992028c.css b/docs/_nuxt/css/992028c.css
new file mode 100644
index 0000000..74cccc2
--- /dev/null
+++ b/docs/_nuxt/css/992028c.css
@@ -0,0 +1,4 @@
+.__nuxt-error-page{padding:1rem;background:#f7f8fb;color:#47494e;text-align:center;display:flex;justify-content:center;align-items:center;flex-direction:column;font-family:sans-serif;font-weight:100!important;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;position:absolute;top:0;left:0;right:0;bottom:0}.__nuxt-error-page .error{max-width:450px}.__nuxt-error-page .title{font-size:1.5rem;margin-top:15px;color:#47494e;margin-bottom:8px}.__nuxt-err [...]
+/*! tailwindcss v2.1.3 | MIT License | https://tailwindcss.com*/
+
+/*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */html{-moz-tab-size:4;-o-tab-size:4;tab-size:4;line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji}hr{height:0;color:inherit}abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monos [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/077a7ade5ffeb5d1b093.js b/docs/_nuxt/js/077a7ade5ffeb5d1b093.js
new file mode 100644
index 0000000..232ae6e
--- /dev/null
+++ b/docs/_nuxt/js/077a7ade5ffeb5d1b093.js
@@ -0,0 +1,2 @@
+/*! For license information please see ../LICENSES */
+(window.webpackJsonp=window.webpackJsonp||[]).push([[1],{202: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/28b55ac964ecfb45fa94.js b/docs/_nuxt/js/28b55ac964ecfb45fa94.js
new file mode 100644
index 0000000..157a6dc
--- /dev/null
+++ b/docs/_nuxt/js/28b55ac964ecfb45fa94.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[4],{260:function(t,e,n){"use strict";n.r(e);var r=n(2),c=(n(20),n(40),n(214),{components:{Contributors:n(215).a},asyncData:function(t){return Object(r.a)(regeneratorRuntime.mark((function e(){var n,r,c,article;return regeneratorRuntime.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return n=t.$content,r=t.params,c="en/".concat(r.post.replace(/_/g,"/")),e.next=4,n(c).fetch();case 4:return article=e.sent,e.abrupt("return",{article [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/641a87ee2a185a89bc75.js b/docs/_nuxt/js/641a87ee2a185a89bc75.js
new file mode 100644
index 0000000..5606e17
--- /dev/null
+++ b/docs/_nuxt/js/641a87ee2a185a89bc75.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[2],{105:function(t,e,r){"use strict";var l={gh:{routerBase:"/echarts-handbook",rootPath:"https://apache.github.io/echarts-handbook/",exampleViewPath:"https://echarts.apache.org/examples/zh/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/zh/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},asf:{routerBase:"/handbook",roo [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/6a3eaf09fbfb695ff461.js b/docs/_nuxt/js/6a3eaf09fbfb695ff461.js
new file mode 100644
index 0000000..170c26f
--- /dev/null
+++ b/docs/_nuxt/js/6a3eaf09fbfb695ff461.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[0],{203:function(t,n,e){t.exports={}},210:function(t,n,e){t.exports={}},211:function(t,n,e){t.exports={}},212:function(t,n,e){t.exports={}},213:function(t,n,e){t.exports={}},214:function(t,n,e){"use strict";var c=e(0),o=e(202),r=(e(152),e(105)),l=Object(o.c)({props:{width:{type:[String,Number],default:"100%"},height:{type:[String,Number],default:"350"},src:String},setup:function(t){return{fullSrc:Object(o.a)((function(){return r.a.exam [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/83c16b72e84c2ff645c5.js b/docs/_nuxt/js/83c16b72e84c2ff645c5.js
new file mode 100644
index 0000000..2dd749a
--- /dev/null
+++ b/docs/_nuxt/js/83c16b72e84c2ff645c5.js
@@ -0,0 +1,2 @@
+/*! For license information please see ../LICENSES */
+(window.webpackJsonp=window.webpackJsonp||[]).push([[3],[function(t,e,n){"use strict";n.r(e),function(t,n){var r=Object.freeze({});function o(t){return null==t}function c(t){return null!=t}function f(t){return!0===t}function l(t){return"string"==typeof t||"number"==typeof t||"symbol"==typeof t||"boolean"==typeof t}function h(t){return null!==t&&"object"==typeof t}var d=Object.prototype.toString;function v(t){return"[object Object]"===d.call(t)}function y(t){return"[object RegExp]"===d.ca [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/a78399fc7d59244290b7.js b/docs/_nuxt/js/a78399fc7d59244290b7.js
new file mode 100644
index 0000000..10a0a56
--- /dev/null
+++ b/docs/_nuxt/js/a78399fc7d59244290b7.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[6],{261:function(t,e,n){"use strict";n.r(e);var r=n(2),c=(n(20),n(214),{components:{Contributors:n(215).a},asyncData:function(t){return Object(r.a)(regeneratorRuntime.mark((function e(){var n,r,c,article;return regeneratorRuntime.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return n=t.$content,r=t.params,c="zh/".concat(r.pathMatch),e.next=4,n(c).fetch();case 4:return article=e.sent,e.abrupt("return",{article:article,postPath:c [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/c9aa5748ca0e869b1643.js b/docs/_nuxt/js/c9aa5748ca0e869b1643.js
new file mode 100644
index 0000000..ef325ff
--- /dev/null
+++ b/docs/_nuxt/js/c9aa5748ca0e869b1643.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[10],{257:function(e,t,r){"use strict";r.r(t);var n="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ_$",o=/[<>\b\f\n\r\t\0\u2028\u2029]/g,c=/^(?:do|if|in|for|int|let|new|try|var|byte|case|char|else|enum|goto|long|this|void|with|await|break|catch|class|const|final|float|short|super|throw|while|yield|delete|double|export|import|native|return|switch|throws|typeof|boolean|default|extends|finally|package|private|abstract|continue|debugg [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/c9b64af237895789f2f8.js b/docs/_nuxt/js/c9b64af237895789f2f8.js
new file mode 100644
index 0000000..61e7a77
--- /dev/null
+++ b/docs/_nuxt/js/c9b64af237895789f2f8.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[9],{246:function(e,t,n){var r=n(247),o=n(248),l=n(249),h=n(250),c=n(251);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/d318837dd6c2ca5e56ea.js b/docs/_nuxt/js/d318837dd6c2ca5e56ea.js
new file mode 100644
index 0000000..5b61215
--- /dev/null
+++ b/docs/_nuxt/js/d318837dd6c2ca5e56ea.js
@@ -0,0 +1,2 @@
+/*! For license information please see ../LICENSES */
+(window.webpackJsonp=window.webpackJsonp||[]).push([[8],{1:function(e,t,n){"use strict";n.d(t,"d",(function(){return _})),n.d(t,"l",(function(){return w})),n.d(t,"n",(function(){return x})),n.d(t,"m",(function(){return O})),n.d(t,"f",(function(){return k})),n.d(t,"b",(function(){return S})),n.d(t,"s",(function(){return C})),n.d(t,"h",(function(){return j})),n.d(t,"i",(function(){return P})),n.d(t,"e",(function(){return $})),n.d(t,"r",(function(){return L})),n.d(t,"k",(function(){return R [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/e91b5c1469410df4d468.js b/docs/_nuxt/js/e91b5c1469410df4d468.js
new file mode 100644
index 0000000..1cd5cf8
--- /dev/null
+++ b/docs/_nuxt/js/e91b5c1469410df4d468.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[5],{259:function(n,e,t){"use strict";t.r(e);var r=t(2),c=(t(20),{asyncData:function(){return Object(r.a)(regeneratorRuntime.mark((function n(){return regeneratorRuntime.wrap((function(n){for(;;)switch(n.prev=n.next){case 0:case"end":return n.stop()}}),n)})))()}}),o=t(8),component=Object(o.a)(c,(function(){var n=this,e=n.$createElement;return(n._self._c||e)("div",[n._v("\n this is index\n")])}),[],!1,null,null,null);e.default=component [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1622809025/manifest.js b/docs/_nuxt/static/1622809025/manifest.js
new file mode 100644
index 0000000..aad8321
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/manifest.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("manifest.js", {routes:["\u002F","\u002Fzh\u002Fbasics\u002Fdownload","\u002Fzh\u002Fapplication\u002Fcross-platform\u002Fbaidu-app","\u002Fzh\u002Fbest-practice\u002Fdesign\u002Fcolor-enhance","\u002Fzh\u002Fbest-practice\u002Fchart-specificatio\u002Fline\u002Fbasic-line","\u002Fzh\u002Fconcepts\u002Fchart-size","\u002Fzh\u002Fapplication\u002Fdata\u002Fdynamic-data","\u002Fzh\u002Fbest-practice\u002Fchart-specificatio\u002Fbar\u002Fbasic-bar","\u002Fzh\u002Fbest-practice [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1622809025/payload.js b/docs/_nuxt/static/1622809025/payload.js
new file mode 100644
index 0000000..e4122ae
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/payload.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("/", {data:[{}],fetch:{},mutations:[]});
\ No newline at end of file
diff --git a/docs/_nuxt/static/1622809025/state.js b/docs/_nuxt/static/1622809025/state.js
new file mode 100644
index 0000000..9f2bdde
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/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){return {staticAssetsBase:"\u002Fecharts-handbook\u002F_nuxt\u002Fstatic\u002F1622809025",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,locale:"zh",lang:{},menu:{},homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:"basics",children:[{title:"下载",dir:"download"},{title:"资源列表",dir:"resource"},{title:"获取灵感",dir:"inspiration"},{title:"寻求帮助",dir:"help" [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1622809025/zh/application/chart-types/bar/bar-race/payload.js b/docs/_nuxt/static/1622809025/zh/application/chart-types/bar/bar-race/payload.js
new file mode 100644
index 0000000..a070553
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/zh/application/chart-types/bar/bar-race/payload.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("/zh/application/chart-types/bar/bar-race", (function(a,b,c,d){return {data:[{article:{slug:"bar-race",toc:[],body:{type:"root",children:[{type:a,tag:"h1",props:{id:c},children:[{type:a,tag:"a",props:{ariaHidden:"true",href:"#%E5%8A%A8%E6%80%81%E6%8E%92%E5%BA%8F%E6%9F%B1%E7%8A%B6%E5%9B%BE",tabIndex:-1},children:[{type:a,tag:"span",props:{className:["icon","icon-link"]},children:[]}]},{type:b,value:c}]},{type:b,value:"\n"},{type:a,tag:"p",props:{},children:[{type:b,value:"动 [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1622809025/zh/application/chart-types/bar/bar-race/state.js b/docs/_nuxt/static/1622809025/zh/application/chart-types/bar/bar-race/state.js
new file mode 100644
index 0000000..bd67037
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/zh/application/chart-types/bar/bar-race/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){return {staticAssetsBase:"\u002Fecharts-handbook\u002F_nuxt\u002Fstatic\u002F1622809025",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,locale:"zh",lang:{},menu:{},homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:"basics",children:[{title:"下载",dir:"download"},{title:"资源列表",dir:"resource"},{title:"获取灵感",dir:"inspiration"},{title:"寻求帮助",dir:"help" [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1622809025/zh/application/chart-types/bar/basic-bar/payload.js b/docs/_nuxt/static/1622809025/zh/application/chart-types/bar/basic-bar/payload.js
new file mode 100644
index 0000000..8d972d3
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/zh/application/chart-types/bar/basic-bar/payload.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("/zh/application/chart-types/bar/basic-bar", (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){return {data:[{article:{slug:"basic-bar",toc:[{id:v,depth:H,text:v},{id:w,depth:H,text:w},{id:x,depth:H,text:x},{id:y,depth:z,text:y},{id:A,depth:z,text:A},{id:B,depth:z,text:B},{id:C,depth:z,text:C}],body:{type:"root",children:[{type:b,tag:"h1",props:{id:M},children:[{type:b,tag:e,props:{href:"#%E5%9F%BA%E6%9C%AC%E6%9F%B1%E7 [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1622809025/zh/application/chart-types/bar/basic-bar/state.js b/docs/_nuxt/static/1622809025/zh/application/chart-types/bar/basic-bar/state.js
new file mode 100644
index 0000000..cbffbba
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/zh/application/chart-types/bar/basic-bar/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){return {staticAssetsBase:"\u002Fecharts-handbook\u002F_nuxt\u002Fstatic\u002F1622809025",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,locale:"zh",lang:{},menu:{},homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:"basics",children:[{title:"下载",dir:"download"},{title:"资源列表",dir:"resource"},{title:"获取灵感",dir:"inspiration"},{title:"寻求帮助",dir:"help" [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1622809025/zh/application/chart-types/bar/polar-bar/payload.js b/docs/_nuxt/static/1622809025/zh/application/chart-types/bar/polar-bar/payload.js
new file mode 100644
index 0000000..cf70067
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/zh/application/chart-types/bar/polar-bar/payload.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("/zh/application/chart-types/bar/polar-bar", (function(a,b,c){return {data:[{article:{slug:"polar-bar",toc:[],body:{type:"root",children:[{type:a,tag:"h1",props:{id:b},children:[{type:a,tag:"a",props:{ariaHidden:"true",href:"#%E6%9E%81%E5%9D%90%E6%A0%87%E7%B3%BB%E6%9F%B1%E7%8A%B6%E5%9B%BE",tabIndex:-1},children:[{type:a,tag:"span",props:{className:["icon","icon-link"]},children:[]}]},{type:"text",value:b}]}]},dir:"\u002Fzh\u002Fapplication\u002Fchart-types\u002Fbar",path:" [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1622809025/zh/application/chart-types/bar/polar-bar/state.js b/docs/_nuxt/static/1622809025/zh/application/chart-types/bar/polar-bar/state.js
new file mode 100644
index 0000000..e32446f
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/zh/application/chart-types/bar/polar-bar/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){return {staticAssetsBase:"\u002Fecharts-handbook\u002F_nuxt\u002Fstatic\u002F1622809025",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,locale:"zh",lang:{},menu:{},homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:"basics",children:[{title:"下载",dir:"download"},{title:"资源列表",dir:"resource"},{title:"获取灵感",dir:"inspiration"},{title:"寻求帮助",dir:"help" [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1622809025/zh/application/chart-types/bar/stacked-bar/payload.js b/docs/_nuxt/static/1622809025/zh/application/chart-types/bar/stacked-bar/payload.js
new file mode 100644
index 0000000..bcfaf1b
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/zh/application/chart-types/bar/stacked-bar/payload.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("/zh/application/chart-types/bar/stacked-bar", (function(a,b,c,d,e,f,g,h,i,j){return {data:[{article:{slug:"stacked-bar",toc:[],body:{type:"root",children:[{type:b,tag:"h1",props:{id:g},children:[{type:b,tag:"a",props:{ariaHidden:"true",href:"#%E5%A0%86%E5%8F%A0%E6%9F%B1%E7%8A%B6%E5%9B%BE",tabIndex:-1},children:[{type:b,tag:"span",props:{className:["icon","icon-link"]},children:[]}]},{type:a,value:g}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"有时候，我们 [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1622809025/zh/application/chart-types/bar/stacked-bar/state.js b/docs/_nuxt/static/1622809025/zh/application/chart-types/bar/stacked-bar/state.js
new file mode 100644
index 0000000..a41c802
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/zh/application/chart-types/bar/stacked-bar/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){return {staticAssetsBase:"\u002Fecharts-handbook\u002F_nuxt\u002Fstatic\u002F1622809025",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,locale:"zh",lang:{},menu:{},homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:"basics",children:[{title:"下载",dir:"download"},{title:"资源列表",dir:"resource"},{title:"获取灵感",dir:"inspiration"},{title:"寻求帮助",dir:"help" [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1622809025/zh/application/chart-types/bar/visual-map/payload.js b/docs/_nuxt/static/1622809025/zh/application/chart-types/bar/visual-map/payload.js
new file mode 100644
index 0000000..99e97ba
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/zh/application/chart-types/bar/visual-map/payload.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("/zh/application/chart-types/bar/visual-map", (function(a){return {data:[{article:{slug:"visual-map",toc:[],body:{type:"root",children:[]},dir:"\u002Fzh\u002Fapplication\u002Fchart-types\u002Fbar",path:"\u002Fzh\u002Fapplication\u002Fchart-types\u002Fbar\u002Fvisual-map",extension:".md",createdAt:a,updatedAt:a},postPath:"zh\u002Fapplication\u002Fchart-types\u002Fbar\u002Fvisual-map"}],fetch:{},mutations:[]}}("2021-06-04T12:15:42.470Z")));
\ No newline at end of file
diff --git a/docs/_nuxt/static/1622809025/zh/application/chart-types/bar/visual-map/state.js b/docs/_nuxt/static/1622809025/zh/application/chart-types/bar/visual-map/state.js
new file mode 100644
index 0000000..c75090f
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/zh/application/chart-types/bar/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){return {staticAssetsBase:"\u002Fecharts-handbook\u002F_nuxt\u002Fstatic\u002F1622809025",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,locale:"zh",lang:{},menu:{},homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:"basics",children:[{title:"下载",dir:"download"},{title:"资源列表",dir:"resource"},{title:"获取灵感",dir:"inspiration"},{title:"寻求帮助",dir:"help" [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1622809025/zh/application/chart-types/bar/waterfall/payload.js b/docs/_nuxt/static/1622809025/zh/application/chart-types/bar/waterfall/payload.js
new file mode 100644
index 0000000..52933ec
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/zh/application/chart-types/bar/waterfall/payload.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("/zh/application/chart-types/bar/waterfall", (function(a){return {data:[{article:{slug:"waterfall",toc:[],body:{type:"root",children:[]},dir:"\u002Fzh\u002Fapplication\u002Fchart-types\u002Fbar",path:"\u002Fzh\u002Fapplication\u002Fchart-types\u002Fbar\u002Fwaterfall",extension:".md",createdAt:a,updatedAt:a},postPath:"zh\u002Fapplication\u002Fchart-types\u002Fbar\u002Fwaterfall"}],fetch:{},mutations:[]}}("2021-06-04T12:15:42.470Z")));
\ No newline at end of file
diff --git a/docs/_nuxt/static/1622809025/zh/application/chart-types/bar/waterfall/state.js b/docs/_nuxt/static/1622809025/zh/application/chart-types/bar/waterfall/state.js
new file mode 100644
index 0000000..511cdbe
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/zh/application/chart-types/bar/waterfall/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){return {staticAssetsBase:"\u002Fecharts-handbook\u002F_nuxt\u002Fstatic\u002F1622809025",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,locale:"zh",lang:{},menu:{},homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:"basics",children:[{title:"下载",dir:"download"},{title:"资源列表",dir:"resource"},{title:"获取灵感",dir:"inspiration"},{title:"寻求帮助",dir:"help" [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1622809025/zh/application/chart-types/line/area-line/payload.js b/docs/_nuxt/static/1622809025/zh/application/chart-types/line/area-line/payload.js
new file mode 100644
index 0000000..30f63ce
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/zh/application/chart-types/line/area-line/payload.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("/zh/application/chart-types/line/area-line", (function(a,b,c,d,e,f,g,h,i){return {data:[{article:{slug:"area-line",toc:[],body:{type:"root",children:[{type:b,tag:"h1",props:{id:e},children:[{type:b,tag:f,props:{href:"#%E5%8C%BA%E5%9F%9F%E9%9D%A2%E7%A7%AF%E6%8A%98%E7%BA%BF%E5%9B%BE",ariaHidden:"true",tabIndex:-1},children:[{type:b,tag:"span",props:{className:["icon","icon-link"]},children:[]}]},{type:a,value:e}]},{type:a,value:c},{type:b,tag:g,props:{},children:[{type:a,va [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1622809025/zh/application/chart-types/line/area-line/state.js b/docs/_nuxt/static/1622809025/zh/application/chart-types/line/area-line/state.js
new file mode 100644
index 0000000..993763f
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/zh/application/chart-types/line/area-line/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){return {staticAssetsBase:"\u002Fecharts-handbook\u002F_nuxt\u002Fstatic\u002F1622809025",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,locale:"zh",lang:{},menu:{},homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:"basics",children:[{title:"下载",dir:"download"},{title:"资源列表",dir:"resource"},{title:"获取灵感",dir:"inspiration"},{title:"寻求帮助",dir:"help" [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1622809025/zh/application/chart-types/line/basic-line/payload.js b/docs/_nuxt/static/1622809025/zh/application/chart-types/line/basic-line/payload.js
new file mode 100644
index 0000000..0b52199
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/zh/application/chart-types/line/basic-line/payload.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("/zh/application/chart-types/line/basic-line", (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){return {data:[{article:{slug:"basic-line",toc:[{id:s,depth:l,text:s},{id:t,depth:l,text:t},{id:u,depth:l,text:u},{id:v,depth:G,text:v},{id:w,depth:G,text:w},{id:x,depth:l,text:x},{id:y,depth:l,text:y}],body:{type:"root",children:[{type:b,tag:"h1",props:{id:H},children:[{type:b,tag:e,props:{href:"#%E5%9F%BA%E7%A1%80%E6%8A%98%E7%BA%BF%E5%9 [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1622809025/zh/application/chart-types/line/basic-line/state.js b/docs/_nuxt/static/1622809025/zh/application/chart-types/line/basic-line/state.js
new file mode 100644
index 0000000..9c99c05
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/zh/application/chart-types/line/basic-line/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){return {staticAssetsBase:"\u002Fecharts-handbook\u002F_nuxt\u002Fstatic\u002F1622809025",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,locale:"zh",lang:{},menu:{},homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:"basics",children:[{title:"下载",dir:"download"},{title:"资源列表",dir:"resource"},{title:"获取灵感",dir:"inspiration"},{title:"寻求帮助",dir:"help" [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1622809025/zh/application/chart-types/line/smooth-line/payload.js b/docs/_nuxt/static/1622809025/zh/application/chart-types/line/smooth-line/payload.js
new file mode 100644
index 0000000..c8c8e68
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/zh/application/chart-types/line/smooth-line/payload.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("/zh/application/chart-types/line/smooth-line", (function(a,b,c,d,e,f,g){return {data:[{article:{slug:"smooth-line",toc:[],body:{type:"root",children:[{type:b,tag:"h1",props:{id:c},children:[{type:b,tag:"a",props:{ariaHidden:d,href:"#%E5%B9%B3%E6%BB%91%E6%9B%B2%E7%BA%BF%E5%9B%BE",tabIndex:-1},children:[{type:b,tag:"span",props:{className:["icon","icon-link"]},children:[]}]},{type:a,value:c}]},{type:a,value:e},{type:b,tag:"p",props:{},children:[{type:a,value:"平滑曲线图也是折线图的一种变 [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1622809025/zh/application/chart-types/line/smooth-line/state.js b/docs/_nuxt/static/1622809025/zh/application/chart-types/line/smooth-line/state.js
new file mode 100644
index 0000000..d0f63fe
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/zh/application/chart-types/line/smooth-line/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){return {staticAssetsBase:"\u002Fecharts-handbook\u002F_nuxt\u002Fstatic\u002F1622809025",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,locale:"zh",lang:{},menu:{},homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:"basics",children:[{title:"下载",dir:"download"},{title:"资源列表",dir:"resource"},{title:"获取灵感",dir:"inspiration"},{title:"寻求帮助",dir:"help" [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1622809025/zh/application/chart-types/line/stacked-line/payload.js b/docs/_nuxt/static/1622809025/zh/application/chart-types/line/stacked-line/payload.js
new file mode 100644
index 0000000..d59ae9b
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/zh/application/chart-types/line/stacked-line/payload.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("/zh/application/chart-types/line/stacked-line", (function(a,b,c,d,e,f,g,h,i,j,k,l){return {data:[{article:{slug:"stacked-line",toc:[],body:{type:"root",children:[{type:b,tag:"h1",props:{id:d},children:[{type:b,tag:e,props:{href:"#%E5%A0%86%E5%8F%A0%E6%8A%98%E7%BA%BF%E5%9B%BE",ariaHidden:"true",tabIndex:-1},children:[{type:b,tag:"span",props:{className:["icon","icon-link"]},children:[]}]},{type:a,value:d}]},{type:a,value:c},{type:b,tag:f,props:{},children:[{type:a,value:"与 [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1622809025/zh/application/chart-types/line/stacked-line/state.js b/docs/_nuxt/static/1622809025/zh/application/chart-types/line/stacked-line/state.js
new file mode 100644
index 0000000..7c0282d
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/zh/application/chart-types/line/stacked-line/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){return {staticAssetsBase:"\u002Fecharts-handbook\u002F_nuxt\u002Fstatic\u002F1622809025",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,locale:"zh",lang:{},menu:{},homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:"basics",children:[{title:"下载",dir:"download"},{title:"资源列表",dir:"resource"},{title:"获取灵感",dir:"inspiration"},{title:"寻求帮助",dir:"help" [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1622809025/zh/application/chart-types/line/step-line/payload.js b/docs/_nuxt/static/1622809025/zh/application/chart-types/line/step-line/payload.js
new file mode 100644
index 0000000..c059f75
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/zh/application/chart-types/line/step-line/payload.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("/zh/application/chart-types/line/step-line", (function(a,b,c,d,e,f,g,h){return {data:[{article:{slug:"step-line",toc:[],body:{type:"root",children:[{type:b,tag:"h1",props:{id:f},children:[{type:b,tag:"a",props:{ariaHidden:"true",href:"#%E9%98%B6%E6%A2%AF%E7%BA%BF%E5%9B%BE",tabIndex:-1},children:[{type:b,tag:"span",props:{className:["icon","icon-link"]},children:[]}]},{type:a,value:f}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"阶梯线图又称方波图，它使用水平和垂直的线来连 [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1622809025/zh/application/chart-types/line/step-line/state.js b/docs/_nuxt/static/1622809025/zh/application/chart-types/line/step-line/state.js
new file mode 100644
index 0000000..c2336e3
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/zh/application/chart-types/line/step-line/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){return {staticAssetsBase:"\u002Fecharts-handbook\u002F_nuxt\u002Fstatic\u002F1622809025",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,locale:"zh",lang:{},menu:{},homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:"basics",children:[{title:"下载",dir:"download"},{title:"资源列表",dir:"resource"},{title:"获取灵感",dir:"inspiration"},{title:"寻求帮助",dir:"help" [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1622809025/zh/application/chart-types/pie/basic-pie/payload.js b/docs/_nuxt/static/1622809025/zh/application/chart-types/pie/basic-pie/payload.js
new file mode 100644
index 0000000..2792b3c
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/zh/application/chart-types/pie/basic-pie/payload.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("/zh/application/chart-types/pie/basic-pie", (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:"basic-pie",toc:[{id:l,depth:t,text:l},{id:m,depth:t,text:m},{id:n,depth:3,text:n},{id:z,depth:t,text:A}],body:{type:"root",children:[{type:b,tag:"h1",props:{id:B},children:[{type:b,tag:e,props:{href:"#%E5%9F%BA%E7%A1%80%E9%A5%BC%E5%9B%BE",ariaHidden:g,tabIndex:h},children:[{type:b,tag:i,props:{className:[j,k]},children:[]}] [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1622809025/zh/application/chart-types/pie/basic-pie/state.js b/docs/_nuxt/static/1622809025/zh/application/chart-types/pie/basic-pie/state.js
new file mode 100644
index 0000000..a2e586b
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/zh/application/chart-types/pie/basic-pie/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){return {staticAssetsBase:"\u002Fecharts-handbook\u002F_nuxt\u002Fstatic\u002F1622809025",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,locale:"zh",lang:{},menu:{},homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:"basics",children:[{title:"下载",dir:"download"},{title:"资源列表",dir:"resource"},{title:"获取灵感",dir:"inspiration"},{title:"寻求帮助",dir:"help" [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1622809025/zh/application/chart-types/pie/ring/payload.js b/docs/_nuxt/static/1622809025/zh/application/chart-types/pie/ring/payload.js
new file mode 100644
index 0000000..637ce58
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/zh/application/chart-types/pie/ring/payload.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("/zh/application/chart-types/pie/ring", (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:"ring",toc:[{id:f,depth:n,text:f},{id:g,depth:n,text:g}],body:{type:"root",children:[{type:b,tag:"h1",props:{id:o},children:[{type:b,tag:i,props:{ariaHidden:h,href:"#%E7%8E%AF%E5%BD%A2%E5%9B%BE",tabIndex:j},children:[{type:b,tag:k,props:{className:[l,m]},children:[]}]},{type:a,value:o}]},{type:a,value:c},{type:b,tag:d,props:{},children:[{type:a,va [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1622809025/zh/application/chart-types/pie/ring/state.js b/docs/_nuxt/static/1622809025/zh/application/chart-types/pie/ring/state.js
new file mode 100644
index 0000000..9df2cfc
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/zh/application/chart-types/pie/ring/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){return {staticAssetsBase:"\u002Fecharts-handbook\u002F_nuxt\u002Fstatic\u002F1622809025",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,locale:"zh",lang:{},menu:{},homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:"basics",children:[{title:"下载",dir:"download"},{title:"资源列表",dir:"resource"},{title:"获取灵感",dir:"inspiration"},{title:"寻求帮助",dir:"help" [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1622809025/zh/application/chart-types/pie/rose/payload.js b/docs/_nuxt/static/1622809025/zh/application/chart-types/pie/rose/payload.js
new file mode 100644
index 0000000..3903ecd
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/zh/application/chart-types/pie/rose/payload.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("/zh/application/chart-types/pie/rose", (function(a,b,c,d,e,f,g,h){return {data:[{article:{slug:"rose",toc:[],body:{type:"root",children:[{type:b,tag:"h1",props:{id:d},children:[{type:b,tag:e,props:{href:"#%E5%8D%97%E4%B8%81%E6%A0%BC%E5%B0%94%E5%9B%BE%EF%BC%88%E7%8E%AB%E7%91%B0%E5%9B%BE%EF%BC%89",ariaHidden:"true",tabIndex:-1},children:[{type:b,tag:"span",props:{className:["icon","icon-link"]},children:[]}]},{type:a,value:d}]},{type:a,value:c},{type:b,tag:f,props:{},childr [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1622809025/zh/application/chart-types/pie/rose/state.js b/docs/_nuxt/static/1622809025/zh/application/chart-types/pie/rose/state.js
new file mode 100644
index 0000000..71f2426
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/zh/application/chart-types/pie/rose/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){return {staticAssetsBase:"\u002Fecharts-handbook\u002F_nuxt\u002Fstatic\u002F1622809025",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,locale:"zh",lang:{},menu:{},homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:"basics",children:[{title:"下载",dir:"download"},{title:"资源列表",dir:"resource"},{title:"获取灵感",dir:"inspiration"},{title:"寻求帮助",dir:"help" [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1622809025/zh/application/chart-types/scatter/basic-scatter/payload.js b/docs/_nuxt/static/1622809025/zh/application/chart-types/scatter/basic-scatter/payload.js
new file mode 100644
index 0000000..4977db9
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/zh/application/chart-types/scatter/basic-scatter/payload.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("/zh/application/chart-types/scatter/basic-scatter", (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:"basic-scatter",toc:[{id:o,depth:x,text:o},{id:p,depth:x,text:p},{id:q,depth:x,text:q},{id:r,depth:A,text:r},{id:s,depth:A,text:s}],body:{type:"root",children:[{type:b,tag:"h1",props:{id:B},children:[{type:b,tag:f,props:{href:"#%E5%9F%BA%E7%A1%80%E6%95%A3%E7%82%B9%E5%9B%BE",ariaHidden:g,tabIndex:h},children:[{type:b, [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1622809025/zh/application/chart-types/scatter/basic-scatter/state.js b/docs/_nuxt/static/1622809025/zh/application/chart-types/scatter/basic-scatter/state.js
new file mode 100644
index 0000000..c9bcffc
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/zh/application/chart-types/scatter/basic-scatter/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){return {staticAssetsBase:"\u002Fecharts-handbook\u002F_nuxt\u002Fstatic\u002F1622809025",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,locale:"zh",lang:{},menu:{},homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:"basics",children:[{title:"下载",dir:"download"},{title:"资源列表",dir:"resource"},{title:"获取灵感",dir:"inspiration"},{title:"寻求帮助",dir:"help" [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1622809025/zh/application/connect/payload.js b/docs/_nuxt/static/1622809025/zh/application/connect/payload.js
new file mode 100644
index 0000000..77e61d2
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/zh/application/connect/payload.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("/zh/application/connect", (function(a){return {data:[{article:{slug:"connect",toc:[],body:{type:"root",children:[]},dir:"\u002Fzh\u002Fapplication",path:"\u002Fzh\u002Fapplication\u002Fconnect",extension:".md",createdAt:a,updatedAt:a},postPath:"zh\u002Fapplication\u002Fconnect"}],fetch:{},mutations:[]}}("2021-06-04T12:15:42.470Z")));
\ No newline at end of file
diff --git a/docs/_nuxt/static/1622809025/zh/application/connect/state.js b/docs/_nuxt/static/1622809025/zh/application/connect/state.js
new file mode 100644
index 0000000..23a3db3
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/zh/application/connect/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){return {staticAssetsBase:"\u002Fecharts-handbook\u002F_nuxt\u002Fstatic\u002F1622809025",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,locale:"zh",lang:{},menu:{},homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:"basics",children:[{title:"下载",dir:"download"},{title:"资源列表",dir:"resource"},{title:"获取灵感",dir:"inspiration"},{title:"寻求帮助",dir:"help" [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1622809025/zh/application/cross-platform/baidu-app/payload.js b/docs/_nuxt/static/1622809025/zh/application/cross-platform/baidu-app/payload.js
new file mode 100644
index 0000000..d25d2cd
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/zh/application/cross-platform/baidu-app/payload.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("/zh/application/cross-platform/baidu-app", (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v){return {data:[{article:{slug:"baidu-app",toc:[{id:j,depth:r,text:j},{id:k,depth:r,text:k}],body:{type:"root",children:[{type:b,tag:"h1",props:{id:"在百度智能小程序中使用-echarts"},children:[{type:b,tag:c,props:{href:"#%E5%9C%A8%E7%99%BE%E5%BA%A6%E6%99%BA%E8%83%BD%E5%B0%8F%E7%A8%8B%E5%BA%8F%E4%B8%AD%E4%BD%BF%E7%94%A8-echarts",ariaHidden:m,tabIndex:n},children:[{type:b,tag:o,props:{classN [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1622809025/zh/application/cross-platform/baidu-app/state.js b/docs/_nuxt/static/1622809025/zh/application/cross-platform/baidu-app/state.js
new file mode 100644
index 0000000..6bcd8e8
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/zh/application/cross-platform/baidu-app/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){return {staticAssetsBase:"\u002Fecharts-handbook\u002F_nuxt\u002Fstatic\u002F1622809025",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,locale:"zh",lang:{},menu:{},homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:"basics",children:[{title:"下载",dir:"download"},{title:"资源列表",dir:"resource"},{title:"获取灵感",dir:"inspiration"},{title:"寻求帮助",dir:"help" [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1622809025/zh/application/cross-platform/server/payload.js b/docs/_nuxt/static/1622809025/zh/application/cross-platform/server/payload.js
new file mode 100644
index 0000000..93661c7
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/zh/application/cross-platform/server/payload.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("/zh/application/cross-platform/server", (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p){return {data:[{article:{slug:"server",toc:[],body:{type:"root",children:[{type:b,tag:"h1",props:{id:"echarts-服务端渲染"},children:[{type:b,tag:c,props:{href:"#echarts-%E6%9C%8D%E5%8A%A1%E7%AB%AF%E6%B8%B2%E6%9F%93",ariaHidden:"true",tabIndex:-1},children:[{type:b,tag:"span",props:{className:["icon","icon-link"]},children:[]}]},{type:a,value:"ECharts 服务端渲染"}]},{type:a,value:h},{type:b,tag:k,props [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1622809025/zh/application/cross-platform/server/state.js b/docs/_nuxt/static/1622809025/zh/application/cross-platform/server/state.js
new file mode 100644
index 0000000..1b12f51
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/zh/application/cross-platform/server/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){return {staticAssetsBase:"\u002Fecharts-handbook\u002F_nuxt\u002Fstatic\u002F1622809025",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,locale:"zh",lang:{},menu:{},homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:"basics",children:[{title:"下载",dir:"download"},{title:"资源列表",dir:"resource"},{title:"获取灵感",dir:"inspiration"},{title:"寻求帮助",dir:"help" [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1622809025/zh/application/cross-platform/wechat-app/payload.js b/docs/_nuxt/static/1622809025/zh/application/cross-platform/wechat-app/payload.js
new file mode 100644
index 0000000..eba4062
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/zh/application/cross-platform/wechat-app/payload.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("/zh/application/cross-platform/wechat-app", (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){return {data:[{article:{slug:"wechat-app",toc:[{id:g,depth:s,text:g},{id:h,depth:s,text:h}],body:{type:"root",children:[{type:b,tag:"h1",props:{id:"在微信小程序中使用-echarts"},children:[{type:b,tag:d,props:{href:"#%E5%9C%A8%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E4%B8%AD%E4%BD%BF%E7%94%A8-echarts",ariaHidden:m,tabIndex:n},children:[{type:b,tag:o,props:{className:[p,q]},c [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1622809025/zh/application/cross-platform/wechat-app/state.js b/docs/_nuxt/static/1622809025/zh/application/cross-platform/wechat-app/state.js
new file mode 100644
index 0000000..74bef2d
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/zh/application/cross-platform/wechat-app/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){return {staticAssetsBase:"\u002Fecharts-handbook\u002F_nuxt\u002Fstatic\u002F1622809025",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,locale:"zh",lang:{},menu:{},homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:"basics",children:[{title:"下载",dir:"download"},{title:"资源列表",dir:"resource"},{title:"获取灵感",dir:"inspiration"},{title:"寻求帮助",dir:"help" [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1622809025/zh/application/data/drilldown/payload.js b/docs/_nuxt/static/1622809025/zh/application/data/drilldown/payload.js
new file mode 100644
index 0000000..84d114f
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/zh/application/data/drilldown/payload.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("/zh/application/data/drilldown", (function(a){return {data:[{article:{slug:"drilldown",toc:[],body:{type:"root",children:[]},dir:"\u002Fzh\u002Fapplication\u002Fdata",path:"\u002Fzh\u002Fapplication\u002Fdata\u002Fdrilldown",extension:".md",createdAt:a,updatedAt:a},postPath:"zh\u002Fapplication\u002Fdata\u002Fdrilldown"}],fetch:{},mutations:[]}}("2021-06-04T12:15:42.470Z")));
\ No newline at end of file
diff --git a/docs/_nuxt/static/1622809025/zh/application/data/drilldown/state.js b/docs/_nuxt/static/1622809025/zh/application/data/drilldown/state.js
new file mode 100644
index 0000000..6940e43
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/zh/application/data/drilldown/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){return {staticAssetsBase:"\u002Fecharts-handbook\u002F_nuxt\u002Fstatic\u002F1622809025",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,locale:"zh",lang:{},menu:{},homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:"basics",children:[{title:"下载",dir:"download"},{title:"资源列表",dir:"resource"},{title:"获取灵感",dir:"inspiration"},{title:"寻求帮助",dir:"help" [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1622809025/zh/application/data/dynamic-data/payload.js b/docs/_nuxt/static/1622809025/zh/application/data/dynamic-data/payload.js
new file mode 100644
index 0000000..18033cb
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/zh/application/data/dynamic-data/payload.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("/zh/application/data/dynamic-data", (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:"dynamic-data",toc:[{id:h,depth:p,text:h},{id:x,depth:p,text:y},{id:i,depth:p,text:i}],body:{type:"root",children:[{type:b,tag:"h1",props:{id:z},children:[{type:b,tag:e,props:{href:"#%E5%BC%82%E6%AD%A5%E6%95%B0%E6%8D%AE%E7%9A%84%E5%8A%A0%E8%BD%BD%E4%B8%8E%E5%8A%A8%E6%80%81%E6%9B%B4%E6%96%B0",ariaHidden:j,tabIndex:k},children:[{type:b,tag:l,pr [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1622809025/zh/application/data/dynamic-data/state.js b/docs/_nuxt/static/1622809025/zh/application/data/dynamic-data/state.js
new file mode 100644
index 0000000..80ded6d
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/zh/application/data/dynamic-data/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){return {staticAssetsBase:"\u002Fecharts-handbook\u002F_nuxt\u002Fstatic\u002F1622809025",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,locale:"zh",lang:{},menu:{},homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:"basics",children:[{title:"下载",dir:"download"},{title:"资源列表",dir:"resource"},{title:"获取灵感",dir:"inspiration"},{title:"寻求帮助",dir:"help" [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1622809025/zh/application/mobile/payload.js b/docs/_nuxt/static/1622809025/zh/application/mobile/payload.js
new file mode 100644
index 0000000..a65c19a
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/zh/application/mobile/payload.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("/zh/application/mobile", (function(a){return {data:[{article:{slug:"mobile",toc:[],body:{type:"root",children:[]},dir:"\u002Fzh\u002Fapplication",path:"\u002Fzh\u002Fapplication\u002Fmobile",extension:".md",createdAt:a,updatedAt:a},postPath:"zh\u002Fapplication\u002Fmobile"}],fetch:{},mutations:[]}}("2021-06-04T12:15:42.470Z")));
\ No newline at end of file
diff --git a/docs/_nuxt/static/1622809025/zh/application/mobile/state.js b/docs/_nuxt/static/1622809025/zh/application/mobile/state.js
new file mode 100644
index 0000000..a894739
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/zh/application/mobile/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){return {staticAssetsBase:"\u002Fecharts-handbook\u002F_nuxt\u002Fstatic\u002F1622809025",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,locale:"zh",lang:{},menu:{},homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:"basics",children:[{title:"下载",dir:"download"},{title:"资源列表",dir:"resource"},{title:"获取灵感",dir:"inspiration"},{title:"寻求帮助",dir:"help" [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1622809025/zh/basics/download/payload.js b/docs/_nuxt/static/1622809025/zh/basics/download/payload.js
new file mode 100644
index 0000000..3009004
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/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,D,E,F,G,H,I,J,K){return {data:[{article:{slug:"download",toc:[{id:u,depth:A,text:u},{id:q,depth:r,text:q},{id:B,depth:r,text:w},{id:C,depth:r,text:x},{id:D,depth:r,text:y},{id:s,depth:r,text:s},{id:v,depth:A,text:v}],body:{type:"root",children:[{type:b,tag:"h1",props:{id:E},children:[{type:b,tag:d,props:{href:"#%E4%B8%8B%E8%BD%BD",ariaHidden:l,tabIndex:m},children:[{type:b,tag:n,prop [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1622809025/zh/basics/download/state.js b/docs/_nuxt/static/1622809025/zh/basics/download/state.js
new file mode 100644
index 0000000..616b1ca
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/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){return {staticAssetsBase:"\u002Fecharts-handbook\u002F_nuxt\u002Fstatic\u002F1622809025",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,locale:"zh",lang:{},menu:{},homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:"basics",children:[{title:"下载",dir:"download"},{title:"资源列表",dir:"resource"},{title:"获取灵感",dir:"inspiration"},{title:"寻求帮助",dir:"help" [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1622809025/zh/basics/help/payload.js b/docs/_nuxt/static/1622809025/zh/basics/help/payload.js
new file mode 100644
index 0000000..b269d3e
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/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/1622809025/zh/basics/help/state.js b/docs/_nuxt/static/1622809025/zh/basics/help/state.js
new file mode 100644
index 0000000..d784d46
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/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){return {staticAssetsBase:"\u002Fecharts-handbook\u002F_nuxt\u002Fstatic\u002F1622809025",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,locale:"zh",lang:{},menu:{},homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:"basics",children:[{title:"下载",dir:"download"},{title:"资源列表",dir:"resource"},{title:"获取灵感",dir:"inspiration"},{title:"寻求帮助",dir:"help" [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1622809025/zh/basics/inspiration/payload.js b/docs/_nuxt/static/1622809025/zh/basics/inspiration/payload.js
new file mode 100644
index 0000000..f98ac9f
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/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/1622809025/zh/basics/inspiration/state.js b/docs/_nuxt/static/1622809025/zh/basics/inspiration/state.js
new file mode 100644
index 0000000..50b35c9
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/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){return {staticAssetsBase:"\u002Fecharts-handbook\u002F_nuxt\u002Fstatic\u002F1622809025",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,locale:"zh",lang:{},menu:{},homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:"basics",children:[{title:"下载",dir:"download"},{title:"资源列表",dir:"resource"},{title:"获取灵感",dir:"inspiration"},{title:"寻求帮助",dir:"help" [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1622809025/zh/basics/resource/payload.js b/docs/_nuxt/static/1622809025/zh/basics/resource/payload.js
new file mode 100644
index 0000000..c03db12
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/zh/basics/resource/payload.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("/zh/basics/resource", (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u){return {data:[{article:{slug:"resource",toc:[{id:j,depth:q,text:j},{id:k,depth:q,text:k}],body:{type:"root",children:[{type:a,tag:"h1",props:{id:r},children:[{type:a,tag:d,props:{href:"#%E8%B5%84%E6%BA%90%E5%88%97%E8%A1%A8",ariaHidden:l,tabIndex:m},children:[{type:a,tag:n,props:{className:[o,p]},children:[]}]},{type:b,value:r}]},{type:b,value:c},{type:a,tag:s,props:{id:j},children:[{type:a,tag:d,pr [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1622809025/zh/basics/resource/state.js b/docs/_nuxt/static/1622809025/zh/basics/resource/state.js
new file mode 100644
index 0000000..60b34d5
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/zh/basics/resource/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){return {staticAssetsBase:"\u002Fecharts-handbook\u002F_nuxt\u002Fstatic\u002F1622809025",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,locale:"zh",lang:{},menu:{},homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:"basics",children:[{title:"下载",dir:"download"},{title:"资源列表",dir:"resource"},{title:"获取灵感",dir:"inspiration"},{title:"寻求帮助",dir:"help" [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1622809025/zh/best-practice/aria/payload.js b/docs/_nuxt/static/1622809025/zh/best-practice/aria/payload.js
new file mode 100644
index 0000000..ba2b9a0
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/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/1622809025/zh/best-practice/aria/state.js b/docs/_nuxt/static/1622809025/zh/best-practice/aria/state.js
new file mode 100644
index 0000000..d937e3d
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/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){return {staticAssetsBase:"\u002Fecharts-handbook\u002F_nuxt\u002Fstatic\u002F1622809025",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,locale:"zh",lang:{},menu:{},homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:"basics",children:[{title:"下载",dir:"download"},{title:"资源列表",dir:"resource"},{title:"获取灵感",dir:"inspiration"},{title:"寻求帮助",dir:"help" [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1622809025/zh/best-practice/canvas-vs-svg/payload.js b/docs/_nuxt/static/1622809025/zh/best-practice/canvas-vs-svg/payload.js
new file mode 100644
index 0000000..0170584
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/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,B){return {data:[{article:{slug:"canvas-vs-svg",toc:[{id:k,depth:t,text:k},{id:l,depth:t,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 [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1622809025/zh/best-practice/canvas-vs-svg/state.js b/docs/_nuxt/static/1622809025/zh/best-practice/canvas-vs-svg/state.js
new file mode 100644
index 0000000..87bf7cb
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/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){return {staticAssetsBase:"\u002Fecharts-handbook\u002F_nuxt\u002Fstatic\u002F1622809025",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,locale:"zh",lang:{},menu:{},homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:"basics",children:[{title:"下载",dir:"download"},{title:"资源列表",dir:"resource"},{title:"获取灵感",dir:"inspiration"},{title:"寻求帮助",dir:"help" [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1622809025/zh/best-practice/chart-specificatio/bar/basic-bar/payload.js b/docs/_nuxt/static/1622809025/zh/best-practice/chart-specificatio/bar/basic-bar/payload.js
new file mode 100644
index 0000000..443abed
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/zh/best-practice/chart-specificatio/bar/basic-bar/payload.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("/zh/best-practice/chart-specificatio/bar/basic-bar", (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r){return {data:[{article:{slug:"basic-bar",toc:[{id:g,depth:2,text:g}],body:{type:"root",children:[{type:b,tag:"h1",props:{id:j},children:[{type:b,tag:k,props:{ariaHidden:l,href:"#%E5%9F%BA%E7%A1%80%E6%9F%B1%E7%8A%B6%E5%9B%BE",tabIndex:m},children:[{type:b,tag:n,props:{className:[o,p]},children:[]}]},{type:a,value:j}]},{type:a,value:c},{type:b,tag:d,props:{},children:[{type:a [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1622809025/zh/best-practice/chart-specificatio/bar/basic-bar/state.js b/docs/_nuxt/static/1622809025/zh/best-practice/chart-specificatio/bar/basic-bar/state.js
new file mode 100644
index 0000000..8a77f3f
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/zh/best-practice/chart-specificatio/bar/basic-bar/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){return {staticAssetsBase:"\u002Fecharts-handbook\u002F_nuxt\u002Fstatic\u002F1622809025",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,locale:"zh",lang:{},menu:{},homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:"basics",children:[{title:"下载",dir:"download"},{title:"资源列表",dir:"resource"},{title:"获取灵感",dir:"inspiration"},{title:"寻求帮助",dir:"help" [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1622809025/zh/best-practice/chart-specificatio/bar/bi-directional-bar/payload.js b/docs/_nuxt/static/1622809025/zh/best-practice/chart-specificatio/bar/bi-directional-bar/payload.js
new file mode 100644
index 0000000..d4e6e03
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/zh/best-practice/chart-specificatio/bar/bi-directional-bar/payload.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("/zh/best-practice/chart-specificatio/bar/bi-directional-bar", (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s){return {data:[{article:{slug:"bi-directional-bar",toc:[{id:g,depth:2,text:h}],body:{type:"root",children:[{type:b,tag:"h1",props:{id:i},children:[{type:b,tag:j,props:{ariaHidden:k,href:"#%E5%8F%8C%E5%90%91%E6%9F%B1%E7%8A%B6%E5%9B%BE",tabIndex:l},children:[{type:b,tag:m,props:{className:[n,o]},children:[]}]},{type:a,value:i}]},{type:a,value:c},{type:b,tag:d,props: [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1622809025/zh/best-practice/chart-specificatio/bar/bi-directional-bar/state.js b/docs/_nuxt/static/1622809025/zh/best-practice/chart-specificatio/bar/bi-directional-bar/state.js
new file mode 100644
index 0000000..c567e96
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/zh/best-practice/chart-specificatio/bar/bi-directional-bar/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){return {staticAssetsBase:"\u002Fecharts-handbook\u002F_nuxt\u002Fstatic\u002F1622809025",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,locale:"zh",lang:{},menu:{},homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:"basics",children:[{title:"下载",dir:"download"},{title:"资源列表",dir:"resource"},{title:"获取灵感",dir:"inspiration"},{title:"寻求帮助",dir:"help" [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1622809025/zh/best-practice/chart-specificatio/bar/grouped-bar/payload.js b/docs/_nuxt/static/1622809025/zh/best-practice/chart-specificatio/bar/grouped-bar/payload.js
new file mode 100644
index 0000000..39abb16
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/zh/best-practice/chart-specificatio/bar/grouped-bar/payload.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("/zh/best-practice/chart-specificatio/bar/grouped-bar", (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r){return {data:[{article:{slug:"grouped-bar",toc:[{id:e,depth:2,text:f}],body:{type:"root",children:[{type:b,tag:"h1",props:{id:g},children:[{type:b,tag:h,props:{ariaHidden:i,href:"#%E5%88%86%E7%BB%84%E6%9F%B1%E7%8A%B6%E5%9B%BE",tabIndex:j},children:[{type:b,tag:k,props:{className:[l,m]},children:[]}]},{type:a,value:g}]},{type:a,value:c},{type:b,tag:d,props:{},children:[{ty [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1622809025/zh/best-practice/chart-specificatio/bar/grouped-bar/state.js b/docs/_nuxt/static/1622809025/zh/best-practice/chart-specificatio/bar/grouped-bar/state.js
new file mode 100644
index 0000000..bb5d859
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/zh/best-practice/chart-specificatio/bar/grouped-bar/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){return {staticAssetsBase:"\u002Fecharts-handbook\u002F_nuxt\u002Fstatic\u002F1622809025",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,locale:"zh",lang:{},menu:{},homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:"basics",children:[{title:"下载",dir:"download"},{title:"资源列表",dir:"resource"},{title:"获取灵感",dir:"inspiration"},{title:"寻求帮助",dir:"help" [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1622809025/zh/best-practice/chart-specificatio/bar/stacked-bar/payload.js b/docs/_nuxt/static/1622809025/zh/best-practice/chart-specificatio/bar/stacked-bar/payload.js
new file mode 100644
index 0000000..ec83471
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/zh/best-practice/chart-specificatio/bar/stacked-bar/payload.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("/zh/best-practice/chart-specificatio/bar/stacked-bar", (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n){return {data:[{article:{slug:"stacked-bar",toc:[{id:e,depth:2,text:f}],body:{type:"root",children:[{type:b,tag:"h1",props:{id:g},children:[{type:b,tag:h,props:{ariaHidden:i,href:"#%E5%A0%86%E5%8F%A0%E6%9F%B1%E7%8A%B6%E5%9B%BE",tabIndex:j},children:[{type:b,tag:k,props:{className:[l,m]},children:[]}]},{type:a,value:g}]},{type:a,value:c},{type:b,tag:d,props:{},children:[{type:a,val [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1622809025/zh/best-practice/chart-specificatio/bar/stacked-bar/state.js b/docs/_nuxt/static/1622809025/zh/best-practice/chart-specificatio/bar/stacked-bar/state.js
new file mode 100644
index 0000000..a344c14
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/zh/best-practice/chart-specificatio/bar/stacked-bar/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){return {staticAssetsBase:"\u002Fecharts-handbook\u002F_nuxt\u002Fstatic\u002F1622809025",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,locale:"zh",lang:{},menu:{},homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:"basics",children:[{title:"下载",dir:"download"},{title:"资源列表",dir:"resource"},{title:"获取灵感",dir:"inspiration"},{title:"寻求帮助",dir:"help" [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1622809025/zh/best-practice/chart-specificatio/funnel/payload.js b/docs/_nuxt/static/1622809025/zh/best-practice/chart-specificatio/funnel/payload.js
new file mode 100644
index 0000000..89b8560
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/zh/best-practice/chart-specificatio/funnel/payload.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("/zh/best-practice/chart-specificatio/funnel", (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q){return {data:[{article:{slug:"funnel",toc:[{id:e,depth:2,text:e}],body:{type:"root",children:[{type:b,tag:"h1",props:{id:j},children:[{type:b,tag:k,props:{ariaHidden:l,href:"#%E6%BC%8F%E6%96%97%E5%9B%BE",tabIndex:m},children:[{type:b,tag:n,props:{className:[o,p]},children:[]}]},{type:a,value:j}]},{type:a,value:c},{type:b,tag:d,props:{},children:[{type:a,value:"漏斗图又叫倒三角图，漏斗图将数据呈现为几个阶 [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1622809025/zh/best-practice/chart-specificatio/funnel/state.js b/docs/_nuxt/static/1622809025/zh/best-practice/chart-specificatio/funnel/state.js
new file mode 100644
index 0000000..d42fe84
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/zh/best-practice/chart-specificatio/funnel/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){return {staticAssetsBase:"\u002Fecharts-handbook\u002F_nuxt\u002Fstatic\u002F1622809025",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,locale:"zh",lang:{},menu:{},homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:"basics",children:[{title:"下载",dir:"download"},{title:"资源列表",dir:"resource"},{title:"获取灵感",dir:"inspiration"},{title:"寻求帮助",dir:"help" [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1622809025/zh/best-practice/chart-specificatio/gauger/payload.js b/docs/_nuxt/static/1622809025/zh/best-practice/chart-specificatio/gauger/payload.js
new file mode 100644
index 0000000..2ded3b2
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/zh/best-practice/chart-specificatio/gauger/payload.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("/zh/best-practice/chart-specificatio/gauger", (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q){return {data:[{article:{slug:"gauger",toc:[{id:d,depth:2,text:d}],body:{type:"root",children:[{type:b,tag:"h1",props:{id:f},children:[{type:b,tag:g,props:{ariaHidden:h,href:"#%E4%BB%AA%E8%A1%A8%E7%9B%98",tabIndex:i},children:[{type:b,tag:j,props:{className:[k,l]},children:[]}]},{type:a,value:f}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"仪表盘也被称为拨号图表或速度表图。其显示类似 [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1622809025/zh/best-practice/chart-specificatio/gauger/state.js b/docs/_nuxt/static/1622809025/zh/best-practice/chart-specificatio/gauger/state.js
new file mode 100644
index 0000000..0f2f0cb
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/zh/best-practice/chart-specificatio/gauger/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){return {staticAssetsBase:"\u002Fecharts-handbook\u002F_nuxt\u002Fstatic\u002F1622809025",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,locale:"zh",lang:{},menu:{},homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:"basics",children:[{title:"下载",dir:"download"},{title:"资源列表",dir:"resource"},{title:"获取灵感",dir:"inspiration"},{title:"寻求帮助",dir:"help" [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1622809025/zh/best-practice/chart-specificatio/line/area/payload.js b/docs/_nuxt/static/1622809025/zh/best-practice/chart-specificatio/line/area/payload.js
new file mode 100644
index 0000000..8fd8ade
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/zh/best-practice/chart-specificatio/line/area/payload.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("/zh/best-practice/chart-specificatio/line/area", (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p){return {data:[{article:{slug:"area",toc:[{id:d,depth:2,text:d}],body:{type:"root",children:[{type:b,tag:"h1",props:{id:j},children:[{type:b,tag:k,props:{ariaHidden:l,href:"#%E5%8C%BA%E5%9F%9F%E9%9D%A2%E7%A7%AF%E6%8A%98%E7%BA%BF%E5%9B%BE",tabIndex:m},children:[{type:b,tag:n,props:{className:[o,p]},children:[]}]},{type:a,value:j}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{t [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1622809025/zh/best-practice/chart-specificatio/line/area/state.js b/docs/_nuxt/static/1622809025/zh/best-practice/chart-specificatio/line/area/state.js
new file mode 100644
index 0000000..7f0e0f6
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/zh/best-practice/chart-specificatio/line/area/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){return {staticAssetsBase:"\u002Fecharts-handbook\u002F_nuxt\u002Fstatic\u002F1622809025",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,locale:"zh",lang:{},menu:{},homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:"basics",children:[{title:"下载",dir:"download"},{title:"资源列表",dir:"resource"},{title:"获取灵感",dir:"inspiration"},{title:"寻求帮助",dir:"help" [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1622809025/zh/best-practice/chart-specificatio/line/basic-line/payload.js b/docs/_nuxt/static/1622809025/zh/best-practice/chart-specificatio/line/basic-line/payload.js
new file mode 100644
index 0000000..49b358a
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/zh/best-practice/chart-specificatio/line/basic-line/payload.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("/zh/best-practice/chart-specificatio/line/basic-line", (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q){return {data:[{article:{slug:"basic-line",toc:[{id:g,depth:2,text:g}],body:{type:"root",children:[{type:b,tag:"h1",props:{id:j},children:[{type:b,tag:k,props:{ariaHidden:l,href:"#%E5%9F%BA%E7%A1%80%E6%8A%98%E7%BA%BF%E5%9B%BE",tabIndex:m},children:[{type:b,tag:n,props:{className:[o,p]},children:[]}]},{type:a,value:j}]},{type:a,value:c},{type:b,tag:d,props:{},children:[{type: [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1622809025/zh/best-practice/chart-specificatio/line/basic-line/state.js b/docs/_nuxt/static/1622809025/zh/best-practice/chart-specificatio/line/basic-line/state.js
new file mode 100644
index 0000000..b7c9635
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/zh/best-practice/chart-specificatio/line/basic-line/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){return {staticAssetsBase:"\u002Fecharts-handbook\u002F_nuxt\u002Fstatic\u002F1622809025",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,locale:"zh",lang:{},menu:{},homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:"basics",children:[{title:"下载",dir:"download"},{title:"资源列表",dir:"resource"},{title:"获取灵感",dir:"inspiration"},{title:"寻求帮助",dir:"help" [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1622809025/zh/best-practice/chart-specificatio/line/stacked-area/payload.js b/docs/_nuxt/static/1622809025/zh/best-practice/chart-specificatio/line/stacked-area/payload.js
new file mode 100644
index 0000000..1790e30
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/zh/best-practice/chart-specificatio/line/stacked-area/payload.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("/zh/best-practice/chart-specificatio/line/stacked-area", (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:"stacked-area",toc:[{id:f,depth:2,text:f}],body:{type:"root",children:[{type:b,tag:"h1",props:{id:j},children:[{type:b,tag:k,props:{ariaHidden:l,href:"#%E5%A0%86%E5%8F%A0%E9%9D%A2%E7%A7%AF%E5%9B%BE",tabIndex:m},children:[{type:b,tag:n,props:{className:[o,p]},children:[]}]},{type:a,value:j}]},{type:a,value:c},{type:b,tag:d,props:{ [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1622809025/zh/best-practice/chart-specificatio/line/stacked-area/state.js b/docs/_nuxt/static/1622809025/zh/best-practice/chart-specificatio/line/stacked-area/state.js
new file mode 100644
index 0000000..c2b7a3e
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/zh/best-practice/chart-specificatio/line/stacked-area/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){return {staticAssetsBase:"\u002Fecharts-handbook\u002F_nuxt\u002Fstatic\u002F1622809025",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,locale:"zh",lang:{},menu:{},homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:"basics",children:[{title:"下载",dir:"download"},{title:"资源列表",dir:"resource"},{title:"获取灵感",dir:"inspiration"},{title:"寻求帮助",dir:"help" [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1622809025/zh/best-practice/chart-specificatio/pie/basic-pie/payload.js b/docs/_nuxt/static/1622809025/zh/best-practice/chart-specificatio/pie/basic-pie/payload.js
new file mode 100644
index 0000000..ad7965f
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/zh/best-practice/chart-specificatio/pie/basic-pie/payload.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("/zh/best-practice/chart-specificatio/pie/basic-pie", (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s){return {data:[{article:{slug:"basic-pie",toc:[{id:g,depth:2,text:g}],body:{type:"root",children:[{type:b,tag:"h1",props:{id:i},children:[{type:b,tag:j,props:{ariaHidden:k,href:"#%E9%A5%BC%E5%9B%BE",tabIndex:l},children:[{type:b,tag:m,props:{className:[n,o]},children:[]}]},{type:a,value:i}]},{type:a,value:c},{type:b,tag:d,props:{},children:[{type:a,value:"饼图主要用于展现不同类别数值相对于 [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1622809025/zh/best-practice/chart-specificatio/pie/basic-pie/state.js b/docs/_nuxt/static/1622809025/zh/best-practice/chart-specificatio/pie/basic-pie/state.js
new file mode 100644
index 0000000..65d2ca0
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/zh/best-practice/chart-specificatio/pie/basic-pie/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){return {staticAssetsBase:"\u002Fecharts-handbook\u002F_nuxt\u002Fstatic\u002F1622809025",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,locale:"zh",lang:{},menu:{},homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:"basics",children:[{title:"下载",dir:"download"},{title:"资源列表",dir:"resource"},{title:"获取灵感",dir:"inspiration"},{title:"寻求帮助",dir:"help" [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1622809025/zh/best-practice/chart-specificatio/radar/payload.js b/docs/_nuxt/static/1622809025/zh/best-practice/chart-specificatio/radar/payload.js
new file mode 100644
index 0000000..c02da18
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/zh/best-practice/chart-specificatio/radar/payload.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("/zh/best-practice/chart-specificatio/radar", (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q){return {data:[{article:{slug:"radar",toc:[{id:e,depth:2,text:e}],body:{type:"root",children:[{type:b,tag:"h1",props:{id:j},children:[{type:b,tag:k,props:{ariaHidden:l,href:"#%E9%9B%B7%E8%BE%BE%E5%9B%BE",tabIndex:m},children:[{type:b,tag:n,props:{className:[o,p]},children:[]}]},{type:a,value:j}]},{type:a,value:c},{type:b,tag:d,props:{},children:[{type:a,value:"雷达图（Radar Chart）又被叫做蜘蛛网图 [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1622809025/zh/best-practice/chart-specificatio/radar/state.js b/docs/_nuxt/static/1622809025/zh/best-practice/chart-specificatio/radar/state.js
new file mode 100644
index 0000000..e3af66a
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/zh/best-practice/chart-specificatio/radar/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){return {staticAssetsBase:"\u002Fecharts-handbook\u002F_nuxt\u002Fstatic\u002F1622809025",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,locale:"zh",lang:{},menu:{},homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:"basics",children:[{title:"下载",dir:"download"},{title:"资源列表",dir:"resource"},{title:"获取灵感",dir:"inspiration"},{title:"寻求帮助",dir:"help" [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1622809025/zh/best-practice/chart-specificatio/scatter/bubble/payload.js b/docs/_nuxt/static/1622809025/zh/best-practice/chart-specificatio/scatter/bubble/payload.js
new file mode 100644
index 0000000..73ddc19
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/zh/best-practice/chart-specificatio/scatter/bubble/payload.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("/zh/best-practice/chart-specificatio/scatter/bubble", (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q){return {data:[{article:{slug:"bubble",toc:[{id:d,depth:2,text:d}],body:{type:"root",children:[{type:b,tag:"h1",props:{id:j},children:[{type:b,tag:k,props:{ariaHidden:l,href:"#%E6%B0%94%E6%B3%A1%E5%9B%BE",tabIndex:m},children:[{type:b,tag:n,props:{className:[o,p]},children:[]}]},{type:a,value:j}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"气泡图是显示变量之间相关性的 [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1622809025/zh/best-practice/chart-specificatio/scatter/bubble/state.js b/docs/_nuxt/static/1622809025/zh/best-practice/chart-specificatio/scatter/bubble/state.js
new file mode 100644
index 0000000..244a448
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/zh/best-practice/chart-specificatio/scatter/bubble/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){return {staticAssetsBase:"\u002Fecharts-handbook\u002F_nuxt\u002Fstatic\u002F1622809025",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,locale:"zh",lang:{},menu:{},homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:"basics",children:[{title:"下载",dir:"download"},{title:"资源列表",dir:"resource"},{title:"获取灵感",dir:"inspiration"},{title:"寻求帮助",dir:"help" [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1622809025/zh/best-practice/chart-specificatio/scatter/scatter/payload.js b/docs/_nuxt/static/1622809025/zh/best-practice/chart-specificatio/scatter/scatter/payload.js
new file mode 100644
index 0000000..bfddc82
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/zh/best-practice/chart-specificatio/scatter/scatter/payload.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("/zh/best-practice/chart-specificatio/scatter/scatter", (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r){return {data:[{article:{slug:"scatter",toc:[{id:e,depth:2,text:e}],body:{type:"root",children:[{type:c,tag:"h1",props:{id:i},children:[{type:c,tag:j,props:{ariaHidden:k,href:"#%E6%95%A3%E7%82%B9%E5%9B%BE",tabIndex:l},children:[{type:c,tag:m,props:{className:[n,o]},children:[]}]},{type:a,value:i}]},{type:a,value:b},{type:c,tag:d,props:{},children:[{type:a,value:"散点图在直角坐标系显 [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1622809025/zh/best-practice/chart-specificatio/scatter/scatter/state.js b/docs/_nuxt/static/1622809025/zh/best-practice/chart-specificatio/scatter/scatter/state.js
new file mode 100644
index 0000000..062011c
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/zh/best-practice/chart-specificatio/scatter/scatter/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){return {staticAssetsBase:"\u002Fecharts-handbook\u002F_nuxt\u002Fstatic\u002F1622809025",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,locale:"zh",lang:{},menu:{},homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:"basics",children:[{title:"下载",dir:"download"},{title:"资源列表",dir:"resource"},{title:"获取灵感",dir:"inspiration"},{title:"寻求帮助",dir:"help" [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1622809025/zh/best-practice/design/color-enhance/payload.js b/docs/_nuxt/static/1622809025/zh/best-practice/design/color-enhance/payload.js
new file mode 100644
index 0000000..4790f73
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/zh/best-practice/design/color-enhance/payload.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("/zh/best-practice/design/color-enhance", (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w){return {data:[{article:{slug:"color-enhance",toc:[{id:m,depth:n,text:m},{id:o,depth:n,text:o},{id:p,depth:n,text:p},{id:q,depth:n,text:q}],body:{type:"root",children:[{type:b,tag:"h1",props:{id:t},children:[{type:b,tag:g,props:{ariaHidden:h,href:"#%E7%94%A8%E9%A2%9C%E8%89%B2%E5%A2%9E%E5%BC%BA%E5%8F%AF%E8%A7%86%E5%8C%96%E6%95%88%E6%9E%9C",tabIndex:i},children:[{type:b,tag:j,pr [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1622809025/zh/best-practice/design/color-enhance/state.js b/docs/_nuxt/static/1622809025/zh/best-practice/design/color-enhance/state.js
new file mode 100644
index 0000000..9178fbb
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/zh/best-practice/design/color-enhance/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){return {staticAssetsBase:"\u002Fecharts-handbook\u002F_nuxt\u002Fstatic\u002F1622809025",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,locale:"zh",lang:{},menu:{},homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:"basics",children:[{title:"下载",dir:"download"},{title:"资源列表",dir:"resource"},{title:"获取灵感",dir:"inspiration"},{title:"寻求帮助",dir:"help" [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1622809025/zh/best-practice/mobile/payload.js b/docs/_nuxt/static/1622809025/zh/best-practice/mobile/payload.js
new file mode 100644
index 0000000..3d9b59f
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/zh/best-practice/mobile/payload.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("/zh/best-practice/mobile", (function(a){return {data:[{article:{slug:"mobile",toc:[],body:{type:"root",children:[]},dir:"\u002Fzh\u002Fbest-practice",path:"\u002Fzh\u002Fbest-practice\u002Fmobile",extension:".md",createdAt:a,updatedAt:a},postPath:"zh\u002Fbest-practice\u002Fmobile"}],fetch:{},mutations:[]}}("2021-06-04T12:15:42.474Z")));
\ No newline at end of file
diff --git a/docs/_nuxt/static/1622809025/zh/best-practice/mobile/state.js b/docs/_nuxt/static/1622809025/zh/best-practice/mobile/state.js
new file mode 100644
index 0000000..43dfe8a
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/zh/best-practice/mobile/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){return {staticAssetsBase:"\u002Fecharts-handbook\u002F_nuxt\u002Fstatic\u002F1622809025",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,locale:"zh",lang:{},menu:{},homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:"basics",children:[{title:"下载",dir:"download"},{title:"资源列表",dir:"resource"},{title:"获取灵感",dir:"inspiration"},{title:"寻求帮助",dir:"help" [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1622809025/zh/concepts/axis/payload.js b/docs/_nuxt/static/1622809025/zh/concepts/axis/payload.js
new file mode 100644
index 0000000..73b41be
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/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,F){return {data:[{article:{slug:"axis",toc:[{id:B,depth:p,text:C},{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:D},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:D} [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1622809025/zh/concepts/axis/state.js b/docs/_nuxt/static/1622809025/zh/concepts/axis/state.js
new file mode 100644
index 0000000..8b08e59
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/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){return {staticAssetsBase:"\u002Fecharts-handbook\u002F_nuxt\u002Fstatic\u002F1622809025",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,locale:"zh",lang:{},menu:{},homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:"basics",children:[{title:"下载",dir:"download"},{title:"资源列表",dir:"resource"},{title:"获取灵感",dir:"inspiration"},{title:"寻求帮助",dir:"help" [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1622809025/zh/concepts/chart-size/payload.js b/docs/_nuxt/static/1622809025/zh/concepts/chart-size/payload.js
new file mode 100644
index 0000000..7d3e824
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/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/1622809025/zh/concepts/chart-size/state.js b/docs/_nuxt/static/1622809025/zh/concepts/chart-size/state.js
new file mode 100644
index 0000000..ff7032d
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/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){return {staticAssetsBase:"\u002Fecharts-handbook\u002F_nuxt\u002Fstatic\u002F1622809025",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,locale:"zh",lang:{},menu:{},homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:"basics",children:[{title:"下载",dir:"download"},{title:"资源列表",dir:"resource"},{title:"获取灵感",dir:"inspiration"},{title:"寻求帮助",dir:"help" [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1622809025/zh/concepts/coordinate/payload.js b/docs/_nuxt/static/1622809025/zh/concepts/coordinate/payload.js
new file mode 100644
index 0000000..f277406
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/zh/concepts/coordinate/payload.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("/zh/concepts/coordinate", (function(a){return {data:[{article:{slug:"coordinate",toc:[],body:{type:"root",children:[]},dir:"\u002Fzh\u002Fconcepts",path:"\u002Fzh\u002Fconcepts\u002Fcoordinate",extension:".md",createdAt:a,updatedAt:a},postPath:"zh\u002Fconcepts\u002Fcoordinate"}],fetch:{},mutations:[]}}("2021-06-04T12:15:42.474Z")));
\ No newline at end of file
diff --git a/docs/_nuxt/static/1622809025/zh/concepts/coordinate/state.js b/docs/_nuxt/static/1622809025/zh/concepts/coordinate/state.js
new file mode 100644
index 0000000..dc08fb3
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/zh/concepts/coordinate/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){return {staticAssetsBase:"\u002Fecharts-handbook\u002F_nuxt\u002Fstatic\u002F1622809025",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,locale:"zh",lang:{},menu:{},homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:"basics",children:[{title:"下载",dir:"download"},{title:"资源列表",dir:"resource"},{title:"获取灵感",dir:"inspiration"},{title:"寻求帮助",dir:"help" [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1622809025/zh/concepts/data-transform/payload.js b/docs/_nuxt/static/1622809025/zh/concepts/data-transform/payload.js
new file mode 100644
index 0000000..d9ff550
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/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){return {data:[{article:{slug:"data-transform",toc:[{id:E,depth:C,text:E},{id:F,depth:C,text:F},{id:Q,depth:C,text:R},{id:S,depth:C,text:T},{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%E7%94% [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1622809025/zh/concepts/data-transform/state.js b/docs/_nuxt/static/1622809025/zh/concepts/data-transform/state.js
new file mode 100644
index 0000000..560b924
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/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){return {staticAssetsBase:"\u002Fecharts-handbook\u002F_nuxt\u002Fstatic\u002F1622809025",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,locale:"zh",lang:{},menu:{},homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:"basics",children:[{title:"下载",dir:"download"},{title:"资源列表",dir:"resource"},{title:"获取灵感",dir:"inspiration"},{title:"寻求帮助",dir:"help" [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1622809025/zh/concepts/dataset/payload.js b/docs/_nuxt/static/1622809025/zh/concepts/dataset/payload.js
new file mode 100644
index 0000000..81faf0f
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/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){return {data:[{article:{slug:y,toc:[{id:G,depth:v,text:G},{id:H,depth:v,text:H},{id:I,depth:v,text:I},{id:T,depth:v,text:U},{id:V,depth:v,text:W},{id:X,depth:v,text:Y},{id:Z,depth:v,text:_},{id:$,depth:v,text:aa},{id:J,depth:v,text:J},{id:K,depth:v,text:K},{id:ab,depth:v,text: [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1622809025/zh/concepts/dataset/state.js b/docs/_nuxt/static/1622809025/zh/concepts/dataset/state.js
new file mode 100644
index 0000000..e694997
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/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){return {staticAssetsBase:"\u002Fecharts-handbook\u002F_nuxt\u002Fstatic\u002F1622809025",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,locale:"zh",lang:{},menu:{},homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:"basics",children:[{title:"下载",dir:"download"},{title:"资源列表",dir:"resource"},{title:"获取灵感",dir:"inspiration"},{title:"寻求帮助",dir:"help" [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1622809025/zh/concepts/event/payload.js b/docs/_nuxt/static/1622809025/zh/concepts/event/payload.js
new file mode 100644
index 0000000..1fee1ef
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/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,Q,R,S){return {data:[{article:{slug:"event",toc:[{id:r,depth:s,text:r},{id:t,depth:s,text:t},{id:C,depth:s,text:D},{id:E,depth:s,text:F}],body:{type:"root",children:[{type:b,tag:"h1",props:{id:G},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]},childre [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1622809025/zh/concepts/event/state.js b/docs/_nuxt/static/1622809025/zh/concepts/event/state.js
new file mode 100644
index 0000000..2a7c160
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/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){return {staticAssetsBase:"\u002Fecharts-handbook\u002F_nuxt\u002Fstatic\u002F1622809025",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,locale:"zh",lang:{},menu:{},homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:"basics",children:[{title:"下载",dir:"download"},{title:"资源列表",dir:"resource"},{title:"获取灵感",dir:"inspiration"},{title:"寻求帮助",dir:"help" [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1622809025/zh/concepts/legend/payload.js b/docs/_nuxt/static/1622809025/zh/concepts/legend/payload.js
new file mode 100644
index 0000000..8683701
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/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,y,z,A){return {data:[{article:{slug:"legend",toc:[{id:s,depth:q,text:s},{id:t,depth:q,text:t},{id:u,depth:q,text:u},{id:v,depth:q,text:v},{id:w,depth:q,text:w}],body:{type:"root",children:[{type:b,tag:"h1",props:{id:z},children:[{type:b,tag:f,props:{href:"#%E5%9B%BE%E4%BE%8B",ariaHidden:g,tabIndex:h},children:[{type:b,tag:i,props:{className:[j,k]},children:[]}]},{type:a,value:z}]},{type:a,valu [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1622809025/zh/concepts/legend/state.js b/docs/_nuxt/static/1622809025/zh/concepts/legend/state.js
new file mode 100644
index 0000000..206fe2d
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/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){return {staticAssetsBase:"\u002Fecharts-handbook\u002F_nuxt\u002Fstatic\u002F1622809025",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,locale:"zh",lang:{},menu:{},homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:"basics",children:[{title:"下载",dir:"download"},{title:"资源列表",dir:"resource"},{title:"获取灵感",dir:"inspiration"},{title:"寻求帮助",dir:"help" [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1622809025/zh/concepts/options/payload.js b/docs/_nuxt/static/1622809025/zh/concepts/options/payload.js
new file mode 100644
index 0000000..a2bd266
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/zh/concepts/options/payload.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("/zh/concepts/options", (function(a){return {data:[{article:{slug:"options",toc:[],body:{type:"root",children:[]},dir:"\u002Fzh\u002Fconcepts",path:"\u002Fzh\u002Fconcepts\u002Foptions",extension:".md",createdAt:a,updatedAt:a},postPath:"zh\u002Fconcepts\u002Foptions"}],fetch:{},mutations:[]}}("2021-06-04T12:15:42.474Z")));
\ No newline at end of file
diff --git a/docs/_nuxt/static/1622809025/zh/concepts/options/state.js b/docs/_nuxt/static/1622809025/zh/concepts/options/state.js
new file mode 100644
index 0000000..5618642
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/zh/concepts/options/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){return {staticAssetsBase:"\u002Fecharts-handbook\u002F_nuxt\u002Fstatic\u002F1622809025",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,locale:"zh",lang:{},menu:{},homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:"basics",children:[{title:"下载",dir:"download"},{title:"资源列表",dir:"resource"},{title:"获取灵感",dir:"inspiration"},{title:"寻求帮助",dir:"help" [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1622809025/zh/concepts/series/payload.js b/docs/_nuxt/static/1622809025/zh/concepts/series/payload.js
new file mode 100644
index 0000000..a1e0068
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/zh/concepts/series/payload.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("/zh/concepts/series", (function(a){return {data:[{article:{slug:"series",toc:[],body:{type:"root",children:[]},dir:"\u002Fzh\u002Fconcepts",path:"\u002Fzh\u002Fconcepts\u002Fseries",extension:".md",createdAt:a,updatedAt:a},postPath:"zh\u002Fconcepts\u002Fseries"}],fetch:{},mutations:[]}}("2021-06-04T12:15:42.474Z")));
\ No newline at end of file
diff --git a/docs/_nuxt/static/1622809025/zh/concepts/series/state.js b/docs/_nuxt/static/1622809025/zh/concepts/series/state.js
new file mode 100644
index 0000000..4060624
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/zh/concepts/series/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){return {staticAssetsBase:"\u002Fecharts-handbook\u002F_nuxt\u002Fstatic\u002F1622809025",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,locale:"zh",lang:{},menu:{},homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:"basics",children:[{title:"下载",dir:"download"},{title:"资源列表",dir:"resource"},{title:"获取灵感",dir:"inspiration"},{title:"寻求帮助",dir:"help" [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1622809025/zh/concepts/tooltip/payload.js b/docs/_nuxt/static/1622809025/zh/concepts/tooltip/payload.js
new file mode 100644
index 0000000..9477ad2
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/zh/concepts/tooltip/payload.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("/zh/concepts/tooltip", (function(a){return {data:[{article:{slug:"tooltip",toc:[],body:{type:"root",children:[]},dir:"\u002Fzh\u002Fconcepts",path:"\u002Fzh\u002Fconcepts\u002Ftooltip",extension:".md",createdAt:a,updatedAt:a},postPath:"zh\u002Fconcepts\u002Ftooltip"}],fetch:{},mutations:[]}}("2021-06-04T12:15:42.474Z")));
\ No newline at end of file
diff --git a/docs/_nuxt/static/1622809025/zh/concepts/tooltip/state.js b/docs/_nuxt/static/1622809025/zh/concepts/tooltip/state.js
new file mode 100644
index 0000000..c7924e2
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/zh/concepts/tooltip/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){return {staticAssetsBase:"\u002Fecharts-handbook\u002F_nuxt\u002Fstatic\u002F1622809025",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,locale:"zh",lang:{},menu:{},homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:"basics",children:[{title:"下载",dir:"download"},{title:"资源列表",dir:"resource"},{title:"获取灵感",dir:"inspiration"},{title:"寻求帮助",dir:"help" [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1622809025/zh/concepts/visual-map/payload.js b/docs/_nuxt/static/1622809025/zh/concepts/visual-map/payload.js
new file mode 100644
index 0000000..336071d
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/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/1622809025/zh/concepts/visual-map/state.js b/docs/_nuxt/static/1622809025/zh/concepts/visual-map/state.js
new file mode 100644
index 0000000..4c13fcb
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/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){return {staticAssetsBase:"\u002Fecharts-handbook\u002F_nuxt\u002Fstatic\u002F1622809025",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,locale:"zh",lang:{},menu:{},homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:"basics",children:[{title:"下载",dir:"download"},{title:"资源列表",dir:"resource"},{title:"获取灵感",dir:"inspiration"},{title:"寻求帮助",dir:"help" [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1622809025/zh/get-started/payload.js b/docs/_nuxt/static/1622809025/zh/get-started/payload.js
new file mode 100644
index 0000000..bd918a6
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/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/1622809025/zh/get-started/state.js b/docs/_nuxt/static/1622809025/zh/get-started/state.js
new file mode 100644
index 0000000..b580c30
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/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){return {staticAssetsBase:"\u002Fecharts-handbook\u002F_nuxt\u002Fstatic\u002F1622809025",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,locale:"zh",lang:{},menu:{},homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:"basics",children:[{title:"下载",dir:"download"},{title:"资源列表",dir:"resource"},{title:"获取灵感",dir:"inspiration"},{title:"寻求帮助",dir:"help" [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1622809025/zh/meta/get-started/payload.js b/docs/_nuxt/static/1622809025/zh/meta/get-started/payload.js
new file mode 100644
index 0000000..e8ec653
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/zh/meta/get-started/payload.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("/zh/meta/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,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,_,$,aa,ab,ac){return {data:[{article:{slug:"get-started",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 [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1622809025/zh/meta/get-started/state.js b/docs/_nuxt/static/1622809025/zh/meta/get-started/state.js
new file mode 100644
index 0000000..0c282d1
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/zh/meta/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){return {staticAssetsBase:"\u002Fecharts-handbook\u002F_nuxt\u002Fstatic\u002F1622809025",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,locale:"zh",lang:{},menu:{},homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:"basics",children:[{title:"下载",dir:"download"},{title:"资源列表",dir:"resource"},{title:"获取灵感",dir:"inspiration"},{title:"寻求帮助",dir:"help" [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1622809025/zh/payload.js b/docs/_nuxt/static/1622809025/zh/payload.js
new file mode 100644
index 0000000..4efbd7b
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/zh/payload.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("/zh", {data:[{}],fetch:{},mutations:[]});
\ No newline at end of file
diff --git a/docs/_nuxt/static/1622809025/zh/state.js b/docs/_nuxt/static/1622809025/zh/state.js
new file mode 100644
index 0000000..c9f21e1
--- /dev/null
+++ b/docs/_nuxt/static/1622809025/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){return {staticAssetsBase:"\u002Fecharts-handbook\u002F_nuxt\u002Fstatic\u002F1622809025",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,locale:"zh",lang:{},menu:{},homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:"basics",children:[{title:"下载",dir:"download"},{title:"资源列表",dir:"resource"},{title:"获取灵感",dir:"inspiration"},{title:"寻求帮助",dir:"help" [...]
\ No newline at end of file
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/index.html b/docs/index.html
new file mode 100644
index 0000000..318a901
--- /dev/null
+++ b/docs/index.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<html data-n-head-ssr>
+ <head>
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
+ <title>echarts-handbook</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="ECharts Handbook"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="/favicon.ico"><link rel="preload" href="/echarts-handbook/_nuxt/7e05f0f.js" as="script"><link rel="preload" href="/echarts-handbook/_nuxt/js/8 [...]
+ </head>
+ <body>
+ <div data-server-rendered="true" id="__nuxt"><!----><div id="__layout"><div><nav role="navigation" class="navbar navbar-default navbar-fixed-top"><div class="container-fluid"><div class="navbar-header"><button type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href [...]
+ this is index
+</div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script defer src="/echarts-handbook/_nuxt/static/1622809025/state.js"></script><script src="/echarts-handbook/_nuxt/7e05f0f.js" defer></script><script src="/echarts-handbook/_nuxt/js/e91b5c1469410df4d468.js" defer></script><script src="/echarts-handbook/_nuxt/js/83c16b72e84c2ff645c5.js" defer></script><script src="/echarts-handbook/_nuxt/js [...]
+ <script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
+ </body>
+</html>
diff --git a/docs/zh/application/chart-types/bar/bar-race/index.html b/docs/zh/application/chart-types/bar/bar-race/index.html
new file mode 100644
index 0000000..f31e125
--- /dev/null
+++ b/docs/zh/application/chart-types/bar/bar-race/index.html
@@ -0,0 +1,14 @@
+<!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>echarts-handbook</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="ECharts Handbook"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="/favicon.ico"><link rel="preload" href="/echarts-handbook/_nuxt/7e05f0f.js" as="script"><link rel="preload" href="/echarts-handbook/_nuxt/js/8 [...]
+ </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 5.0 新增的功能。</p></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/application/chart-types/bar/bar-race.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= [...]
+ <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/application/chart-types/bar/basic-bar/index.html b/docs/zh/application/chart-types/bar/basic-bar/index.html
new file mode 100644
index 0000000..f8da4f5
--- /dev/null
+++ b/docs/zh/application/chart-types/bar/basic-bar/index.html
@@ -0,0 +1,56 @@
+<!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>echarts-handbook</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="ECharts Handbook"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="/favicon.ico"><link rel="preload" href="/echarts-handbook/_nuxt/7e05f0f.js" as="script"><link rel="preload" href="/echarts-handbook/_nuxt/js/8 [...]
+ </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>设置柱状图的方式，是将 <code>series</code> 的 <code>name</code> 设为 <code>'bar'</code>。</p>
+<p><a href="https://echarts.apache.org/option.html#series-bar" rel="nofollow noopener noreferrer" target="_blank">[配置项手册]</a></p>
+<h2 id="最简单的柱状图"><a href="#%E6%9C%80%E7%AE%80%E5%8D%95%E7%9A%84%E6%9F%B1%E7%8A%B6%E5%9B%BE" 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-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>xAxis</code> 中指定对应的值；而纵坐标是数值型的，可以根据 <code>series</code> 中的 <code>data</code>，自动生成对应的坐标范围。</p>
+<h2 id="多系列的柱状图"><a href="#%E5%A4%9A%E7%B3%BB%E5%88%97%E7%9A%84%E6%9F%B1%E7%8A%B6%E5%9B%BE" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>多系列的柱状图</h2>
+<p>我们可以用一个系列表示一组相关的数据，如果需要实现多系列的柱状图，只需要在 <code>series</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 [...]
+<h2 id="柱状图样式设置"><a href="#%E6%9F%B1%E7%8A%B6%E5%9B%BE%E6%A0%B7%E5%BC%8F%E8%AE%BE%E7%BD%AE" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>柱状图样式设置</h2>
+<h3 id="柱条样式"><a href="#%E6%9F%B1%E6%9D%A1%E6%A0%B7%E5%BC%8F" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>柱条样式</h3>
+<p>柱条的样式可以通过 <a href="https://echarts.apache.org/option.html#series-bar.itemStyle" rel="nofollow noopener noreferrer" target="_blank"><code>series.itemStyle</code></a> 设置，包括：</p>
+<ul>
+<li>柱条的颜色（<code>color</code>）；</li>
+<li>柱条的描边颜色（<code>borderColor</code>）、宽度（<code>borderWidth</code>）、样式（<code>borderType</code>）；</li>
+<li>柱条圆角的半径（<code>barBorderRadius</code>）；</li>
+<li>柱条透明度（<code>opacity</code>）；</li>
+<li>阴影（<code>shadowBlur</code>、<code>shadowColor</code>、<code>shadowOffsetX</code>、<code>shadowOffsetY</code>）。</li>
+</ul>
+
+<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</code> 的<code>itemStyle</code>，设置了柱条的样式。完整的配置项及其用法请参见配置项手册 <a href="https://echarts.apache.org/option.html#series-bar.itemStyle" rel="nofollow noopener noreferrer" target="_blank"><code>series.itemStyle</code></a>。</p>
+<h3 id="柱条宽度和高度"><a href="#%E6%9F%B1%E6%9D%A1%E5%AE%BD%E5%BA%A6%E5%92%8C%E9%AB%98%E5%BA%A6" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>柱条宽度和高度</h3>
+<p>柱条宽度可以通过 <a href="https://echarts.apache.org/option.html##series-bar.barWidth" rel="nofollow noopener noreferrer" target="_blank"><code>barWidth</code></a> 设置。比如在下面的例子中，将 <code>barWidth</code> 设为 <code>'20%'</code>，表示每个柱条的宽度就是类目宽度的 20%。由于这个例子中，每个系列有 5 个数据，20% 的类目宽度也就是整个 x 轴宽度的 4%。</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#series-bar.barMaxWidth" rel="nofollow noopener noreferrer" target="_blank"><code>barMaxWidth</code></a> 限制柱条的最大宽度。对于一些特别小的数据，我们也可以为柱条指定最小高度 <a href="https://echarts.apache.org/option.html#series-bar.barMinHeight" rel="nofollow noopener noreferrer" target="_blank"><code>barMinHeight</code></a>，当数据对应的柱条高度小于该值时，柱条高度将采用这个最小高度。</p>
+<h3 id="柱条间距"><a href="#%E6%9F%B1%E6%9D%A1%E9%97%B4%E8%B7%9D" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>柱条间距</h3>
+<p>柱条间距分为两种，一种是不同系列在同一类目下的距离 <a href="https://echarts.apache.org/option.html#series-bar.barWidth" rel="nofollow noopener noreferrer" target="_blank"><code>barWidth</code></a>，另一种是类目与类目的距离 <a href="https://echarts.apache.org/option.html#series-bar.barCategoryGap" rel="nofollow noopener noreferrer" target="_blank"><code>barCategoryGap</code></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>在这个例子中，<code>barGap</code> 被设为 <code>'20%'</code>，这意味着每个类目（比如 <code>A</code>）下的两个柱子之间的距离，相对于柱条宽度的百分比。而 <code>barCategoryGap</code> 是 <code>'40%'</code>，意味着柱条每侧空余的距离，相对于柱条宽度的百分比。</p>
+<p>通常而言，设置 <code>barGap</code> 及 <code>barCategoryGap</code> 后，就不需要设置 <code>barWidth</code> 了，这时候的宽度会自动调整。如果有需要的话，可以设置 <code>barMaxWidth</code> 作为柱条宽度的上限，当图表宽度很大的时候，柱条宽度也不会太宽。</p>
+<blockquote>
+<p>在同一坐标系上，此属性会被多个柱状图系列共享。此属性应设置于此坐标系中最后一个柱状图系列上才会生效，并且是对此坐标系中所有柱状图系列生效。</p>
+</blockquote>
+<h3 id="为柱条添加背景色"><a href="#%E4%B8%BA%E6%9F%B1%E6%9D%A1%E6%B7%BB%E5%8A%A0%E8%83%8C%E6%99%AF%E8%89%B2" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>为柱条添加背景色</h3>
+<p>有时，我们希望能够为柱条添加背景色。从 ECharts 4.7.0 版本开始，这一功能可以简单地用 <a href="https://echarts.apache.org/option.html#series-bar.showBackground" rel="nofollow noopener noreferrer" target="_blank"><code>showBackground</code></a> 开启，并且可以通过 <a href="https://echarts.apache.org/option.html#series-bar.backgroundStyle" rel="nofollow noopener noreferrer" target="_blank"><code>backgroundStyle</code></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/application/chart-types/bar/polar-bar/index.html b/docs/zh/application/chart-types/bar/polar-bar/index.html
new file mode 100644
index 0000000..e0e12a5
--- /dev/null
+++ b/docs/zh/application/chart-types/bar/polar-bar/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>echarts-handbook</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="ECharts Handbook"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="/favicon.ico"><link rel="preload" href="/echarts-handbook/_nuxt/7e05f0f.js" as="script"><link rel="preload" href="/echarts-handbook/_nuxt/js/8 [...]
+ </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/application/chart-types/bar/stacked-bar/index.html b/docs/zh/application/chart-types/bar/stacked-bar/index.html
new file mode 100644
index 0000000..f82ea57
--- /dev/null
+++ b/docs/zh/application/chart-types/bar/stacked-bar/index.html
@@ -0,0 +1,22 @@
+<!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>echarts-handbook</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="ECharts Handbook"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="/favicon.ico"><link rel="preload" href="/echarts-handbook/_nuxt/7e05f0f.js" as="script"><link rel="preload" href="/echarts-handbook/_nuxt/js/8 [...]
+ </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>使用 EChart 实现堆积折线图的方法非常简单，只需要给一个系列的 <code>stack</code> 值设置一个字符串类型的值，这一个值表示该系列堆积的类别。也就是说，拥有同样 <code>stack</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>在这个例子中，第二个系列所在的位置是在第一个系列的位置的基础上，上升了第二个系列数值对应的高度。因此，从第二个系列的位置，就能看出这两者总和的变化趋势。</p>
+<blockquote>
+<p><code>stack</code> 的取值用来表明哪些系列将被堆积在一起，理论上只要取值相同即可，具体的取值并没有什么区别。但在实际的应用中，我们建议使用一些有意义的字符串方便阅读。</p>
+<p>比如，在一个统计男女人数的图中，有四个系列，“成年男性”和“男孩”系列需要进行堆积，“成年女性”和“女孩”系列需要堆积。这时，这两组的的 <code>stack</code> 值就建议分别设为 <code>'男'</code> 和 <code>'女'</code>。虽然使用 <code>'a'</code> 和 <code>'b'</code> 这样没有意义的字符串也能实现同样的效果，但是代码的可阅读性就差了。</p>
+</blockquote></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/application/chart-types/bar/stacked-bar.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" cla [...]
+ <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/application/chart-types/bar/visual-map/index.html b/docs/zh/application/chart-types/bar/visual-map/index.html
new file mode 100644
index 0000000..1b0237c
--- /dev/null
+++ b/docs/zh/application/chart-types/bar/visual-map/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>echarts-handbook</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="ECharts Handbook"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="/favicon.ico"><link rel="preload" href="/echarts-handbook/_nuxt/7e05f0f.js" as="script"><link rel="preload" href="/echarts-handbook/_nuxt/js/8 [...]
+ </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/application/chart-types/bar/waterfall/index.html b/docs/zh/application/chart-types/bar/waterfall/index.html
new file mode 100644
index 0000000..7d5baf0
--- /dev/null
+++ b/docs/zh/application/chart-types/bar/waterfall/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>echarts-handbook</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="ECharts Handbook"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="/favicon.ico"><link rel="preload" href="/echarts-handbook/_nuxt/7e05f0f.js" as="script"><link rel="preload" href="/echarts-handbook/_nuxt/js/8 [...]
+ </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/application/chart-types/line/area-line/index.html b/docs/zh/application/chart-types/line/area-line/index.html
new file mode 100644
index 0000000..bed2965
--- /dev/null
+++ b/docs/zh/application/chart-types/line/area-line/index.html
@@ -0,0 +1,16 @@
+<!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>echarts-handbook</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="ECharts Handbook"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="/favicon.ico"><link rel="preload" href="/echarts-handbook/_nuxt/7e05f0f.js" as="script"><link rel="preload" href="/echarts-handbook/_nuxt/js/8 [...]
+ </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>
+<div class="nuxt-content-highlight"><!----></div>
+<p>通过 <a href="https://echarts.apache.org/option.html#series-line.areaStyle" rel="nofollow noopener noreferrer" target="_blank"><code>areaStyle</code></a> 设置折线图的填充区域样式，将其设为为 <code>{}</code> 表示使用默认样式，即使用系列的颜色以半透明的方式填充区域。如果想指定特定的样式，可以通过设置 <code>areaStyle</code> 下的配置项覆盖，如第二个系列将填充区域的颜色设为不透明度为 0.5 的黄色。</p></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> [...]
+ <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/application/chart-types/line/basic-line/index.html b/docs/zh/application/chart-types/line/basic-line/index.html
new file mode 100644
index 0000000..b813735
--- /dev/null
+++ b/docs/zh/application/chart-types/line/basic-line/index.html
@@ -0,0 +1,41 @@
+<!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>echarts-handbook</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="ECharts Handbook"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="/favicon.ico"><link rel="preload" href="/echarts-handbook/_nuxt/7e05f0f.js" as="script"><link rel="preload" href="/echarts-handbook/_nuxt/js/8 [...]
+ </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 href="#%E6%9C%80%E7%AE%80%E5%8D%95%E7%9A%84%E6%8A%98%E7%BA%BF%E5%9B%BE" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>最简单的折线图</h2>
+<p>如果我们想建立一个横坐标是类目型（category）、纵坐标是数值型（value）的折线图，我们可以使用这样的方式：</p>
+<div class="nuxt-content-highlight"><!----></div>
+<p>在这个例子中，我们通过 <code>xAxis</code> 将横坐标设为类目型，并指定了对应的值；通过 <code>type</code> 将 <code>yAxis</code> 的类型设定为数值型。在 <code>series</code> 中，我们将系列类型设为 <code>line</code>，并且通过 <code>data</code> 指定了折线图三个点的取值。这样，就能得到一个最简单的折线图了。</p>
+<blockquote>
+<p>这里 <code>xAxis</code> 和 <code>yAxis</code> 的 <code>type</code> 属性都可以隐去不写。因为坐标轴的默认类型是数值型，而 <code>xAxis</code> 指定了类目型的 <code>data</code>，所以 <code>ECharts</code> 也能识别出这是类目型的坐标轴。为了让大家更容易理解，我们特意写了 <code>type</code>。在实际的应用中，如果是 <code>'value'</code> 类型，也可以省略不写。</p>
+</blockquote>
+<h2 id="笛卡尔坐标系中的折线图"><a href="#%E7%AC%9B%E5%8D%A1%E5%B0%94%E5%9D%90%E6%A0%87%E7%B3%BB%E4%B8%AD%E7%9A%84%E6%8A%98%E7%BA%BF%E5%9B%BE" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>笛卡尔坐标系中的折线图</h2>
+<p>如果我们希望折线图在横坐标和纵坐标上都是连续的，即在笛卡尔坐标系中，应该如何实现呢？答案也很简单，只要把 <code>series</code> 的 <code>data</code> 每个数据用一个包含两个元素的数组表示就行了。</p>
+<div class="nuxt-content-highlight"><!----></div>
+<h2 id="折线图样式设置"><a href="#%E6%8A%98%E7%BA%BF%E5%9B%BE%E6%A0%B7%E5%BC%8F%E8%AE%BE%E7%BD%AE" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>折线图样式设置</h2>
+<h3 id="折线的样式"><a href="#%E6%8A%98%E7%BA%BF%E7%9A%84%E6%A0%B7%E5%BC%8F" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>折线的样式</h3>
+<p>折线图中折线的样式可以通过 <code>lineStyle</code> 设置。可以为其指定颜色、线宽、折线类型、阴影、不透明度等等，具体的可以参考配置项手册 <a href="https://echarts.apache.org/option.html#series-line.lineStyle" rel="nofollow noopener noreferrer" target="_blank"><code>series.lineStyle</code></a> 了解。这里，我们以设置颜色（color）、线宽（width）和折线类型（type）为例说明。</p>
+<div class="nuxt-content-highlight"><!----></div>
+<p>这里设置折线宽度时，数据点描边的宽度是不会跟着改变的，而应该在数据点的配置项中另外设置。</p>
+<h3 id="数据点的样式"><a href="#%E6%95%B0%E6%8D%AE%E7%82%B9%E7%9A%84%E6%A0%B7%E5%BC%8F" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>数据点的样式</h3>
+<p>数据点的样式可以通过 <a href="https://echarts.apache.org/option.html#series-line.itemStyle" rel="nofollow noopener noreferrer" target="_blank"><code>series.itemStyle</code></a> 指定填充颜色（color）、描边颜色（borderColor）、描边宽度（borderWidth）、描边类型（borderType）、阴影（shadowColor）、不透明度（opacity）等。与折线样式的设置十分相似，这里不再展开说明。</p>
+<h2 id="在数据点处显示数值"><a href="#%E5%9C%A8%E6%95%B0%E6%8D%AE%E7%82%B9%E5%A4%84%E6%98%BE%E7%A4%BA%E6%95%B0%E5%80%BC" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>在数据点处显示数值</h2>
+<p>在系列中，这数据点的标签通过 <a href="https://echarts.apache.org/option.html#series-line.label" rel="nofollow noopener noreferrer" target="_blank"><code>series.label</code></a> 属性指定。如果将 <code>label</code> 下的 <code>show</code> 指定为<code>true</code>，则表示该数值默认时就显示；如果为 <code>false</code>，而 <a href="https://echarts.apache.org/option.html#series-line.emphasis.label.show" rel="nofollow noopener noreferrer" target="_blank"><code>series.emphasis.label.show</code></a> 为 <code>true</code>，则表示只有在鼠标移动到该数据时，才显示数值。</p>
+<div class="nuxt-content-highlight"><!----></div>
+<h2 id="空数据"><a href="#%E7%A9%BA%E6%95%B0%E6%8D%AE" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>空数据</h2>
+<p>在一个系列中，可能一个横坐标对应的取值是“空”的，将其设为 0 有时并不能满足我们的期望--空数据不应被其左右的数据连接。</p>
+<p>在 ECharts 中，我们使用字符串 <code>'-'</code> 表示空数据，这对其他系列的数据也是适用的。</p>
+<div class="nuxt-content-highlight"><!----></div>
+<blockquote>
+<p>注意区别这个例子中，“空”数据与取值为 0 的数据。</p>
+</blockquote></div> <div class="table-of-contents"><h4 class="toc-container-header">本页目录</h4> <ul><li class="toc2"><a href="/echarts-handbook/zh/application/chart-types/line/basic-line#%E6%9C%80%E7%AE%80%E5%8D%95%E7%9A%84%E6%8A%98%E7%BA%BF%E5%9B%BE">最简单的折线图</a></li><li class="toc2"><a href="/echarts-handbook/zh/application/chart-types/line/basic-line#%E7%AC%9B%E5%8D%A1%E5%B0%94%E5%9D%90%E6%A0%87%E7%B3%BB%E4%B8%AD%E7%9A%84%E6%8A%98%E7%BA%BF%E5%9B%BE">笛卡尔坐标系中的折线图</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/zh/application/chart-types/line/smooth-line/index.html b/docs/zh/application/chart-types/line/smooth-line/index.html
new file mode 100644
index 0000000..308d26c
--- /dev/null
+++ b/docs/zh/application/chart-types/line/smooth-line/index.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<html data-n-head-ssr>
+ <head>
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
+ <title>echarts-handbook</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="ECharts Handbook"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="/favicon.ico"><link rel="preload" href="/echarts-handbook/_nuxt/7e05f0f.js" as="script"><link rel="preload" href="/echarts-handbook/_nuxt/js/8 [...]
+ </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>smooth</code> 属性设置为 <code>true</code> 即可。</p>
+<div class="nuxt-content-highlight"><!----></div></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/application/chart-types/line/smooth-line.md" title="编辑本文" class="inline-block align-middle text-sm"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox= [...]
+ <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/application/chart-types/line/stacked-line/index.html b/docs/zh/application/chart-types/line/stacked-line/index.html
new file mode 100644
index 0000000..3d43a0a
--- /dev/null
+++ b/docs/zh/application/chart-types/line/stacked-line/index.html
@@ -0,0 +1,17 @@
+<!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>echarts-handbook</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="ECharts Handbook"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="/favicon.ico"><link rel="preload" href="/echarts-handbook/_nuxt/7e05f0f.js" as="script"><link rel="preload" href="/echarts-handbook/_nuxt/js/8 [...]
+ </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/application_chart-types_bar_stacked-bar">堆叠柱状图</a>类似，堆叠折线图也是用系列的 <code>stack</code> 设置哪些系列堆叠在一起。</p>
+<div class="nuxt-content-highlight"><!----></div>
+<p>但是不同的是，如果不加说明的话，我们很难判断出这是一个堆叠折线图，还是一个普通的折线图。所以，对于堆叠折线图而言，一般建议使用区域填充色以表明堆叠的情况。</p>
+<div class="nuxt-content-highlight"><!----></div></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/application/chart-types/line/stacked-line.md" title="编辑本文" class="inline-block align-middle text-sm"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox [...]
+ <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/application/chart-types/line/step-line/index.html b/docs/zh/application/chart-types/line/step-line/index.html
new file mode 100644
index 0000000..5068f0e
--- /dev/null
+++ b/docs/zh/application/chart-types/line/step-line/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>echarts-handbook</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="ECharts Handbook"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="/favicon.ico"><link rel="preload" href="/echarts-handbook/_nuxt/7e05f0f.js" as="script"><link rel="preload" href="/echarts-handbook/_nuxt/js/8 [...]
+ </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 中，系列的 <code>step</code> 属性用来表征阶梯线图的连接类型，它共有三种取值：<code>'start'</code>、<code>'middle'</code> 和 <code>'end'</code>，分别表示在当前点，当前点与下个点的中间点，下个点拐弯。</p>
+<div class="nuxt-content-highlight"><!----></div>
+<blockquote>
+<p>请注意这个例子中不同的 <code>step</code> 取值对应的数据点和连线的区别。</p>
+</blockquote></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/application/chart-types/line/step-line.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" clas [...]
+ <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/application/chart-types/pie/basic-pie/index.html b/docs/zh/application/chart-types/pie/basic-pie/index.html
new file mode 100644
index 0000000..dd461a8
--- /dev/null
+++ b/docs/zh/application/chart-types/pie/basic-pie/index.html
@@ -0,0 +1,27 @@
+<!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>echarts-handbook</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="ECharts Handbook"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="/favicon.ico"><link rel="preload" href="/echarts-handbook/_nuxt/7e05f0f.js" as="script"><link rel="preload" href="/echarts-handbook/_nuxt/js/8 [...]
+ </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 href="#%E6%9C%80%E7%AE%80%E5%8D%95%E7%9A%84%E9%A5%BC%E5%9B%BE" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>最简单的饼图</h2>
+<p>饼图的配置和折线图、柱状图略有不同，不再需要配置坐标轴，而是把数据名称和值都写在系列中。以下是一个最简单的饼图的例子。</p>
+<div class="nuxt-content-highlight"><!----></div>
+<p>需要注意的是，这里是 <code>value</code> 不需要是百分比数据，ECharts 会根据所有数据的 <code>value</code> ，按比例分配它们在饼图中对应的弧度。</p>
+<h2 id="饼图样式设置"><a href="#%E9%A5%BC%E5%9B%BE%E6%A0%B7%E5%BC%8F%E8%AE%BE%E7%BD%AE" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>饼图样式设置</h2>
+<h3 id="饼图的半径"><a href="#%E9%A5%BC%E5%9B%BE%E7%9A%84%E5%8D%8A%E5%BE%84" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>饼图的半径</h3>
+<p>饼图的半径可以通过 <a href="https://echarts.apache.org/option.html#series-pie.radius" rel="nofollow noopener noreferrer" target="_blank"><code>series.radius</code></a> 设置，可以是诸如 <code>'60%'</code> 这样相对的百分比字符串，或是 <code>200</code> 这样的绝对像素数值。当它是百分比字符串时，它是相对于容器宽高中较小的一条边的。也就是说，如果宽度大于高度，则百分比是相对于高度的，反之则反；当它是数值型时，它表示绝对的像素大小。</p>
+<div class="nuxt-content-highlight"><!----></div>
+<h2 id="如果数据和为-0，不显示饼图"><a href="#%E5%A6%82%E6%9E%9C%E6%95%B0%E6%8D%AE%E5%92%8C%E4%B8%BA-0%EF%BC%8C%E4%B8%8D%E6%98%BE%E7%A4%BA%E9%A5%BC%E5%9B%BE" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>如果数据和为 0，不显示饼图</h2>
+<p>在默认情况下，如果数据值和为 0，会显示平均分割的扇形。比如，如果有 4 个数据项，并且每个数据项都是 0，则每个扇形都是 90°。如果我们希望在这种情况下不显示任何扇形，可以将 <a href="https://echarts.apache.org/option.html#series-pie.stillShowZeroSum" rel="nofollow noopener noreferrer" target="_blank"><code>series.stillShowZeroSum</code></a> 设为 <code>false</code>。</p>
+<div class="nuxt-content-highlight"><!----></div>
+<p>如果希望扇形对应的标签也不显示，可以将 <a href="https://echarts.apache.org/option.html#series-pie.label.show" rel="nofollow noopener noreferrer" target="_blank"><code>series.label.show</code></a> 设为 <code>false</code>。</p>
+<div class="nuxt-content-highlight"><!----></div></div> <div class="table-of-contents"><h4 class="toc-container-header">本页目录</h4> <ul><li class="toc2"><a href="/echarts-handbook/zh/application/chart-types/pie/basic-pie#%E6%9C%80%E7%AE%80%E5%8D%95%E7%9A%84%E9%A5%BC%E5%9B%BE">最简单的饼图</a></li><li class="toc2"><a href="/echarts-handbook/zh/application/chart-types/pie/basic-pie#%E9%A5%BC%E5%9B%BE%E6%A0%B7%E5%BC%8F%E8%AE%BE%E7%BD%AE">饼图样式设置</a></li><li class="toc3"><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/application/chart-types/pie/ring/index.html b/docs/zh/application/chart-types/pie/ring/index.html
new file mode 100644
index 0000000..35a02bd
--- /dev/null
+++ b/docs/zh/application/chart-types/pie/ring/index.html
@@ -0,0 +1,24 @@
+<!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>echarts-handbook</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="ECharts Handbook"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="/favicon.ico"><link rel="preload" href="/echarts-handbook/_nuxt/7e05f0f.js" as="script"><link rel="preload" href="/echarts-handbook/_nuxt/js/8 [...]
+ </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%9F%BA%E7%A1%80%E7%8E%AF%E5%BD%A2%E5%9B%BE" tabindex="-1"><span class="icon icon-link"></span></a>基础环形图</h2>
+<p>在 ECharts 中，饼图的半径除了上一小节提到的，可以是一个数值或者字符串之外，还可以是一个包含两个元素的数组，每个元素可以为数值或字符串。当它是一个数组时，它的前一项表示内半径，后一项表示外半径，这样就形成了一个环形图。</p>
+<p>从这个角度上来说，可以认为饼图是一个内半径为 0 的环形图，也就是说，饼图是环形图的特例。</p>
+<div class="nuxt-content-highlight"><!----></div>
+<p>如果半径是数组，其中的两项也可以一项是数值，另一项是百分比形式的字符串。但是这样可能导致在某些分辨率下，内半径小于外半径。ECharts 会自动使用小的一项作为内半径，但是仍应小心这样可能会导致的非预期效果。</p>
+<h2 id="在环形图中间显示高亮扇形对应的文字"><a aria-hidden="true" href="#%E5%9C%A8%E7%8E%AF%E5%BD%A2%E5%9B%BE%E4%B8%AD%E9%97%B4%E6%98%BE%E7%A4%BA%E9%AB%98%E4%BA%AE%E6%89%87%E5%BD%A2%E5%AF%B9%E5%BA%94%E7%9A%84%E6%96%87%E5%AD%97" tabindex="-1"><span class="icon icon-link"></span></a>在环形图中间显示高亮扇形对应的文字</h2>
+<p>上面的例子展现了在环形图中间显示固定文字的例子，下面我们要介绍，如何在环形图中间显示鼠标高亮的扇形对应的文字。实现这一效果的思路是，利用系列的 <code>label</code>（默认用扇形颜色显示数据的 <code>name</code>），显示在环形图中间。在默认情况下不显示系列的 <code>label</code>，在高亮时显示。具体的代码如下：</p>
+<div class="nuxt-content-highlight"><!----></div>
+<p>其中，<code>avoidLabelOverlap</code> 是用来控制是否由 ECharts 调整标签位置以实现防止标签重叠。它的默认值是 <code>true</code>，而在这里，我们不希望标签位置调整到不是中间的位置，因此我们需要将其设为 <code>false</code>。</p>
+<p>这样，环形图中间会显示高亮数据的 <code>name</code> 值。</p></div> <div class="table-of-contents"><h4 class="toc-container-header">本页目录</h4> <ul><li class="toc2"><a href="/echarts-handbook/zh/application/chart-types/pie/ring#%E5%9F%BA%E7%A1%80%E7%8E%AF%E5%BD%A2%E5%9B%BE">基础环形图</a></li><li class="toc2"><a href="/echarts-handbook/zh/application/chart-types/pie/ring#%E5%9C%A8%E7%8E%AF%E5%BD%A2%E5%9B%BE%E4%B8%AD%E9%97%B4%E6%98%BE%E7%A4%BA%E9%AB%98%E4%BA%AE%E6%89%87%E5%BD%A2%E5%AF%B9%E5%BA%94%E7%9A%84%E6%96% [...]
+ <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/application/chart-types/pie/rose/index.html b/docs/zh/application/chart-types/pie/rose/index.html
new file mode 100644
index 0000000..d43a659
--- /dev/null
+++ b/docs/zh/application/chart-types/pie/rose/index.html
@@ -0,0 +1,16 @@
+<!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>echarts-handbook</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="ECharts Handbook"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="/favicon.ico"><link rel="preload" href="/echarts-handbook/_nuxt/7e05f0f.js" as="script"><link rel="preload" href="/echarts-handbook/_nuxt/js/8 [...]
+ </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 可以通过将饼图的 <a href="https://echarts.apache.org/option.html#series-pie.roseType" rel="nofollow noopener noreferrer" target="_blank"><code>series.roseType</code></a> 值设为 <code>'area'</code> 实现南丁格尔图，其他配置项和饼图是相同的。</p>
+<div class="nuxt-content-highlight"><!----></div></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/application/chart-types/pie/rose.md" title="编辑本文" class="inline-block align-middle text-sm"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 [...]
+ <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/application/chart-types/scatter/basic-scatter/index.html b/docs/zh/application/chart-types/scatter/basic-scatter/index.html
new file mode 100644
index 0000000..ba3b1d5
--- /dev/null
+++ b/docs/zh/application/chart-types/scatter/basic-scatter/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>echarts-handbook</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="ECharts Handbook"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="/favicon.ico"><link rel="preload" href="/echarts-handbook/_nuxt/7e05f0f.js" as="script"><link rel="preload" href="/echarts-handbook/_nuxt/js/8 [...]
+ </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="最简单的散点图"><a href="#%E6%9C%80%E7%AE%80%E5%8D%95%E7%9A%84%E6%95%A3%E7%82%B9%E5%9B%BE" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>最简单的散点图</h2>
+<p>下面是一个横坐标为类目轴、纵坐标为数值轴的最简单的散点图配置：</p>
+<div class="nuxt-content-highlight"><!----></div>
+<h2 id="笛卡尔坐标系下的散点图"><a href="#%E7%AC%9B%E5%8D%A1%E5%B0%94%E5%9D%90%E6%A0%87%E7%B3%BB%E4%B8%8B%E7%9A%84%E6%95%A3%E7%82%B9%E5%9B%BE" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>笛卡尔坐标系下的散点图</h2>
+<p>在上文的例子中，散点图的横坐标都是离散的类目轴，而纵坐标都是连续的数值轴。而对于散点图而言，另一种常见的场景是，两个坐标轴均为连续的数值轴，也就是笛卡尔坐标系。这时的系列形式略有不同，数据的横坐标和纵坐标一同写在 <code>data</code> 中，而非坐标轴中。</p>
+<div class="nuxt-content-highlight"><!----></div>
+<h2 id="散点图样式设置"><a href="#%E6%95%A3%E7%82%B9%E5%9B%BE%E6%A0%B7%E5%BC%8F%E8%AE%BE%E7%BD%AE" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>散点图样式设置</h2>
+<h3 id="图形的形状"><a href="#%E5%9B%BE%E5%BD%A2%E7%9A%84%E5%BD%A2%E7%8A%B6" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>图形的形状</h3>
+<p>图形（symbol）指的是散点图中数据“点”的形状。有三类图形可选，一种是 ECharts 内置形状，第二种是图片，第三种是 SVG 的路径。</p>
+<p>ECharts 内置形状包括：圆形、矩形、圆角矩形、三角形、菱形、大头针形、箭头形，分别对应<code>'circle'</code>、<code>'rect'</code>、<code>'roundRect'</code>、<code>'triangle'</code>、<code>'diamond'</code>、<code>'pin'</code>、<code>'arrow'</code>。使用内置形状时，只要将 <code>symbol</code> 属性指定为形状名称对应的字符串即可。</p>
+<p>如果想要将图形指定为任意的图片，以 <code>'image://'</code> 开头，后面跟图片的绝对或相对地址。形如：<code>'image://http://example.com/xxx.png'</code> 或 <code>'image://./xxx.png'</code>。</p>
+<p>除此之外，还支持 SVG 的路径作为矢量图形，将 <code>symbol</code> 设置为以 <code>'path://'</code> 开头的 SVG 路径即可。使用矢量图形的好处是，图片不会因为缩放而产生锯齿或模糊，并且通常而言比图片形式的文件大小更小。路径的查看方法为，打开一个 <code>SVG</code> 文件，找到形如 <code><path d="M… L…"></path></code> 的路径，将 <code>d</code> 的值添加在 <code>'path://'</code> 后即可。</p>
+<p>下面，我们展示一个将图形设置为矢量爱心形状的方式。</p>
+<p>首先，我们需要一个爱心的 SVG 文件，可以使用矢量编辑软件绘制，或者从网上下载到相关资源。其内容如下：</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-xml line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.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>在 ECharts 的 <code>symbol</code> 配置项中，我们使用 <code>d</code> 的值作为路径。</p>
+<div class="nuxt-content-highlight"><!----></div>
+<p>这样，就能得到爱心形状的图形作为点的形状了。</p>
+<h3 id="图形的大小"><a href="#%E5%9B%BE%E5%BD%A2%E7%9A%84%E5%A4%A7%E5%B0%8F" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>图形的大小</h3>
+<p>图形大小可以使用 <a href="https://echarts.apache.org/option.html#series-scatter.symbolSize" rel="nofollow noopener noreferrer" target="_blank"><code>series.symbolSize</code></a> 控制。它既可以是一个表示图形大小的像素值，也可以是一个包含两个 number 元素的数组，分别表示图形的宽和高。</p>
+<p>除此之外，它还可以是一个回调函数，其参数格式为：</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>
+<p>在下面的例子中，我们将散点图点的大小设置为与其数据值成正比。</p>
+<div class="nuxt-content-highlight"><!----></div></div> <div class="table-of-contents"><h4 class="toc-container-header">本页目录</h4> <ul><li class="toc2"><a href="/echarts-handbook/zh/application/chart-types/scatter/basic-scatter#%E6%9C%80%E7%AE%80%E5%8D%95%E7%9A%84%E6%95%A3%E7%82%B9%E5%9B%BE">最简单的散点图</a></li><li class="toc2"><a href="/echarts-handbook/zh/application/chart-types/scatter/basic-scatter#%E7%AC%9B%E5%8D%A1%E5%B0%94%E5%9D%90%E6%A0%87%E7%B3%BB%E4%B8%8B%E7%9A%84%E6%95%A3%E7%82%B9% [...]
+ <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/application/connect/index.html b/docs/zh/application/connect/index.html
new file mode 100644
index 0000000..a7366a9
--- /dev/null
+++ b/docs/zh/application/connect/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>echarts-handbook</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="ECharts Handbook"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="/favicon.ico"><link rel="preload" href="/echarts-handbook/_nuxt/7e05f0f.js" as="script"><link rel="preload" href="/echarts-handbook/_nuxt/js/8 [...]
+ </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/application/cross-platform/baidu-app/index.html b/docs/zh/application/cross-platform/baidu-app/index.html
new file mode 100644
index 0000000..e6a82f1
--- /dev/null
+++ b/docs/zh/application/cross-platform/baidu-app/index.html
@@ -0,0 +1,21 @@
+<!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>echarts-handbook</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="ECharts Handbook"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="/favicon.ico"><link rel="preload" href="/echarts-handbook/_nuxt/7e05f0f.js" as="script"><link rel="preload" href="/echarts-handbook/_nuxt/js/8 [...]
+ </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="http://smartprogram.baidu.com/docs/develop/framework/echarts/" rel="nofollow noopener noreferrer" target="_blank">ECharts 图表-beta</a> 以小程序动态库的形式提供了在百度智能小程序中使用 ECharts 的方式。</p>
+<p><a href="https://github.com/baidu-smart-app/baidu-smart-app-echarts-demo" rel="nofollow noopener noreferrer" target="_blank">aidu-smart-app-echarts-demo</a> 项目是使用该动态库的一个示例工程，可以作为参考，一般情况下不需要引入自己的项目。</p>
+<p>如有使用上的问题，可以在 <a href="https://github.com/baidu-smart-app/baidu-smart-app-echarts-demo/issues" rel="nofollow noopener noreferrer" target="_blank">baidu-smart-app-echarts-demo/issues</a> 中咨询。</p>
+<h2 id="使用方式"><a href="#%E4%BD%BF%E7%94%A8%E6%96%B9%E5%BC%8F" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>使用方式</h2>
+<p>参见百度智能小程序文档 <a href="http://smartprogram.baidu.com/docs/develop/framework/echarts/" rel="nofollow noopener noreferrer" target="_blank">ECharts 图表-beta</a>。</p>
+<h2 id="注意事项"><a href="#%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>注意事项</h2>
+<p>百度智能小程序上的 ECharts 以动态库的形式开放，因此开发者的使用方式与<a href="./zh/application_cross-platform_wechat-app">在微信小程序中使用 ECharts</a> 不太相同。尤其需要注意的是，前者需要在指定动态库名称的时候确定 ECharts 的版本号，而不能自行更换或使用自定义构建。这一点是由底层框架的技术实现决定的。具体来说，在指定百度智能小程序动态库名称的时候，需要通过 <code>provider</code> 指定动态库名称，具体参见<a href="http://smartprogram.baidu.com/docs/develop/framework/echarts/" rel="nofollow noopener noreferrer" target="_blank">文档</a>的「在项目中引用动态库」章节。</p>
+<p>请务必查看<a href="http://smartprogram.baidu.com/docs/develop/framework/echarts/" 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/application/cross-platform/baidu-app#%E4%BD%BF%E7%94%A8%E6%96%B9%E5%BC%8F">使用方式</a></li><li class="toc2"><a href="/echarts-handbook/zh/application/cross-platform/baidu-app#%E6%B3%A8%E6%84%8F%E4%BA%8B [...]
+ <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/application/cross-platform/server/index.html b/docs/zh/application/cross-platform/server/index.html
new file mode 100644
index 0000000..99ecc8c
--- /dev/null
+++ b/docs/zh/application/cross-platform/server/index.html
@@ -0,0 +1,22 @@
+<!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>echarts-handbook</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="ECharts Handbook"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="/favicon.ico"><link rel="preload" href="/echarts-handbook/_nuxt/7e05f0f.js" as="script"><link rel="preload" href="/echarts-handbook/_nuxt/js/8 [...]
+ </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 可以在服务端进行渲染。例如<a href="https://echarts.apache.org//examples/zh/index.html" rel="nofollow noopener noreferrer" target="_blank">官方示例</a>里的一个个小截图，就是在服务端预生成出来的。</p>
+<p>服务端渲染可以使用流行的 headless 环境，例如 <a href="https://github.com/GoogleChrome/puppeteer" rel="nofollow noopener noreferrer" target="_blank">puppeteer</a>、<a href="https://chromium.googlesource.com/chromium/src/+/lkgr/headless/README.md" rel="nofollow noopener noreferrer" target="_blank">headless chrome</a>、<a href="https://github.com/Automattic/node-canvas" rel="nofollow noopener noreferrer" target="_blank">node-canvas</a>、<a href="https://github.com/jsdom/jsdom" rel="nofollow noopener norefer [...]
+<p>这是一些社区贡献的 ECharts 服务端渲染方案：</p>
+<ul>
+<li><a href="https://github.com/hellosean1025/node-echarts" rel="nofollow noopener noreferrer" target="_blank">https://github.com/hellosean1025/node-echarts</a></li>
+<li><a href="https://github.com/chfw/echarts-scrappeteer" rel="nofollow noopener noreferrer" target="_blank">https://github.com/chfw/echarts-scrappeteer</a></li>
+<li><a href="https://github.com/chfw/pyecharts-snapshot/blob/master/pyecharts_snapshot/phantomjs/snapshot.js" rel="nofollow noopener noreferrer" target="_blank">https://github.com/chfw/pyecharts-snapshot/blob/master/pyecharts_snapshot/phantomjs/snapshot.js</a></li>
+<li><a href="https://gist.github.com/pissang/4c32ee30e35c91336af72b129a1a4a73" rel="nofollow noopener noreferrer" target="_blank">https://gist.github.com/pissang/4c32ee30e35c91336af72b129a1a4a73</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/application/cross-platform/server.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 in [...]
+ <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/application/cross-platform/wechat-app/index.html b/docs/zh/application/cross-platform/wechat-app/index.html
new file mode 100644
index 0000000..8e110d5
--- /dev/null
+++ b/docs/zh/application/cross-platform/wechat-app/index.html
@@ -0,0 +1,25 @@
+<!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>echarts-handbook</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="ECharts Handbook"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="/favicon.ico"><link rel="preload" href="/echarts-handbook/_nuxt/7e05f0f.js" as="script"><link rel="preload" href="/echarts-handbook/_nuxt/js/8 [...]
+ </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://github.com/ecomfe/echarts-for-weixin" rel="nofollow noopener noreferrer" target="_blank">echarts-for-weixin</a> 项目提供了一个小程序组件，用这种方式可以方便地使用 ECharts。</p>
+<h2 id="使用方式"><a href="#%E4%BD%BF%E7%94%A8%E6%96%B9%E5%BC%8F" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>使用方式</h2>
+<ol>
+<li>下载该项目</li>
+<li>如有必要，将 <code>ec-canvas</code> 目录下的 <code>echarts.js</code> 替换为最新版的 ECharts。如果希望减小包体积大小，可以使用<a href="https://echarts.apache.org//build.html" rel="nofollow noopener noreferrer" target="_blank">自定义构建</a>生成并替换 <code>echarts.js</code></li>
+<li><code>pages</code> 目录下是使用的示例文件，可以作为参考，或者删除不需要的页面。</li>
+</ol>
+<p>更详细的说明请参见 <a href="https://github.com/ecomfe/echarts-for-weixin" rel="nofollow noopener noreferrer" target="_blank">echarts-for-weixin</a> 项目。</p>
+<h2 id="注意事项"><a href="#%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>注意事项</h2>
+<p>最新版的 ECharts 微信小程序支持微信 Canvas 2d，当用户的基础库版本 >= 2.9.0 且没有设置 <code>force-use-old-canvas="true"</code> 的情况下，使用新的 Canvas 2d（默认）。</p>
+<p>使用新的 Canvas 2d 可以提升渲染性能，解决非同层渲染问题，强烈建议开启。</p>
+<p>更详细的说明请参见 <a href="https://github.com/ecomfe/echarts-for-weixin#canvas-2d-%E7%89%88%E6%9C%AC%E8%A6%81%E6%B1%82" rel="nofollow noopener noreferrer" target="_blank">Canvas 2d 版本要求</a>。</p></div> <div class="table-of-contents"><h4 class="toc-container-header">本页目录</h4> <ul><li class="toc2"><a href="/echarts-handbook/zh/application/cross-platform/wechat-app#%E4%BD%BF%E7%94%A8%E6%96%B9%E5%BC%8F">使用方式</a></li><li class="toc2"><a href="/echarts-handbook/zh/application/cross-platform/wechat-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/application/data/drilldown/index.html b/docs/zh/application/data/drilldown/index.html
new file mode 100644
index 0000000..4640741
--- /dev/null
+++ b/docs/zh/application/data/drilldown/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>echarts-handbook</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="ECharts Handbook"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="/favicon.ico"><link rel="preload" href="/echarts-handbook/_nuxt/7e05f0f.js" as="script"><link rel="preload" href="/echarts-handbook/_nuxt/js/8 [...]
+ </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/application/data/dynamic-data/index.html b/docs/zh/application/data/dynamic-data/index.html
new file mode 100644
index 0000000..f381ffe
--- /dev/null
+++ b/docs/zh/application/data/dynamic-data/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>echarts-handbook</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="ECharts Handbook"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="/favicon.ico"><link rel="preload" href="/echarts-handbook/_nuxt/7e05f0f.js" as="script"><link rel="preload" href="/echarts-handbook/_nuxt/js/8 [...]
+ </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="#%E5%BC%82%E6%AD%A5%E5%8A%A0%E8%BD%BD" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>异步加载</h2>
+<p><a href="~getting-started">入门示例</a>中的数据是在初始化后<code>setOption</code>中直接填入的，但是很多时候可能数据需要异步加载后再填入。<code>ECharts</code> 中实现异步数据的更新非常简单，在图表初始化后不管任何时候只要通过 jQuery 等工具异步获取数据后通过 <code>setOption</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>或者先设置完其它的样式，显示一个空的直角坐标轴，然后获取数据后填入数据。</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>
+<iframe width="100%" height="350" src="https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-async&edit=1"></iframe>
+<p>ECharts 中在更新数据的时候需要通过<code>name</code>属性对应到相应的系列，上面示例中如果<code>name</code>不存在也可以根据系列的顺序正常更新，但是更多时候推荐更新数据的时候加上系列的<code>name</code>数据。</p>
+<h2 id="loading-动画"><a href="#loading-%E5%8A%A8%E7%94%BB" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>loading 动画</h2>
+<p>如果数据加载时间较长，一个空的坐标轴放在画布上也会让用户觉得是不是产生 bug 了，因此需要一个 loading 的动画来提示用户数据正在加载。</p>
+<p>ECharts 默认有提供了一个简单的加载动画。只需要调用 <a href="api.html#echartsInstance.showLoading">showLoading</a> 方法显示。数据加载完成后再调用 <a href="api.html#echartsInstance.hideLoading">hideLoading</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>效果如下：</p>
+<iframe width="100%" height="350" src="https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-loading&edit=1"></iframe>
+<h2 id="数据的动态更新"><a href="#%E6%95%B0%E6%8D%AE%E7%9A%84%E5%8A%A8%E6%80%81%E6%9B%B4%E6%96%B0" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>数据的动态更新</h2>
+<p>ECharts 由数据驱动，数据的改变驱动图表展现的改变，因此动态数据的实现也变得异常简单。</p>
+<p>所有数据的更新都通过 <a href="~api.html#echartsInstance.setOption">setOption</a>实现，你只需要定时获取数据，<a href="~api.html#echartsInstance.setOption">setOption</a> 填入数据，而不用考虑数据到底产生了那些变化，ECharts 会找到两组数据之间的差异然后通过合适的动画去表现数据的变化。</p>
+<p>具体可以看下面示例：</p>
+<iframe width="100%" height="350" src="https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-dynamic-data&edit=1"></iframe></div> <div class="table-of-contents"><h4 class="toc-container-header">本页目录</h4> <ul><li class="toc2"><a href="/echarts-handbook/zh/application/data/dynamic-data#%E5%BC%82%E6%AD%A5%E5%8A%A0%E8%BD%BD">异步加载</a></li><li class="toc2"><a href="/echarts-handbook/zh/application/data/dynamic-data#loading-%E5%8A%A8%E7%94%BB">loading 动画</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/zh/application/mobile/index.html b/docs/zh/application/mobile/index.html
new file mode 100644
index 0000000..00e4850
--- /dev/null
+++ b/docs/zh/application/mobile/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>echarts-handbook</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="ECharts Handbook"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="/favicon.ico"><link rel="preload" href="/echarts-handbook/_nuxt/7e05f0f.js" as="script"><link rel="preload" href="/echarts-handbook/_nuxt/js/8 [...]
+ </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..b1b08c1
--- /dev/null
+++ b/docs/zh/basics/download/index.html
@@ -0,0 +1,44 @@
+<!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>echarts-handbook</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="ECharts Handbook"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="/favicon.ico"><link rel="preload" href="/echarts-handbook/_nuxt/7e05f0f.js" as="script"><link rel="preload" href="/echarts-handbook/_nuxt/js/8 [...]
+ </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>
+<ol>
+<li>从官网获取</li>
+<li>从 GitHub 获取</li>
+<li>从 npm 获取</li>
+<li>从 CDN 获取</li>
+<li>在线定制</li>
+</ol>
+<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="从官网获取"><a href="#%E4%BB%8E%E5%AE%98%E7%BD%91%E8%8E%B7%E5%8F%96" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>从官网获取</h3>
+<p><a href="https://echarts.apache.org/download.html" rel="nofollow noopener noreferrer" target="_blank">Apache ECharts 官网下载界面</a> 提供了镜像网站下载源码，并且核对签名的方式——这可以保证下载的代码与发布的代码一致。</p>
+<p>具体的方法参见<a href="https://echarts.apache.org//download.html" rel="nofollow noopener noreferrer" target="_blank">官网下载页面</a>。</p>
+<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="https://echarts.apache.org/tutorial.html#%E5%9C%A8%20webpack%20%E4%B8%AD%E4%BD%BF%E7%94%A8%20ECharts" rel="nofollow noopener noreferrer" target="_blank">在 webpack 中使用 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> 项目中找到 <code>dist/echarts.js</code>，下载到本地使用。</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>
+<h2 id="目录结构"><a href="#%E7%9B%AE%E5%BD%95%E7%BB%93%E6%9E%84" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>目录结构</h2>
+<p>下面介绍项目 <a href="https://github.com/apache/echarts/tree/master/dist" rel="nofollow noopener noreferrer" target="_blank"><code>dist</code></a> 目录下各个文件的意义：</p>
+<ul>
+<li><code>echarts.js</code>：包含了完整 ECharts 功能的代码，没有经过压缩；推荐调试时使用。</li>
+<li><code>echarts.min.js</code>：<code>echarts.js</code> 的压缩结果；推荐线上使用。</li>
+<li><code>echarts.simple.js</code>：包含折线图、柱状图、饼图的代码；推荐不需要其他系列类型的项目使用。</li>
+<li><code>echarts.common.js</code>：包含了常用组件和系列类型的代码，完整支持的内容参见 <a href="https://github.com/apache/echarts/blob/master/echarts.common.js" rel="nofollow noopener noreferrer" target="_blank">echarts.common.js</a></li>
+</ul>
+<p>带有 <code>-en</code> 的文件是对应的英文版本，带有 <code>.min</code> 的文件是对应的压缩版本。</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%E5%AE%98%E7%BD%91%E8%8E%B7%E5%8F%96">从官网获取</a></li><li class="toc3"><a href="/echarts-handbook/zh/basics/download#%E4%BB%8E-github-%E8%8E%B7%E5%8F%9 [...]
+ <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..16c0b00
--- /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>echarts-handbook</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="ECharts Handbook"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="/favicon.ico"><link rel="preload" href="/echarts-handbook/_nuxt/7e05f0f.js" as="script"><link rel="preload" href="/echarts-handbook/_nuxt/js/8 [...]
+ </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/inspiration/index.html b/docs/zh/basics/inspiration/index.html
new file mode 100644
index 0000000..09979d6
--- /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>echarts-handbook</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="ECharts Handbook"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="/favicon.ico"><link rel="preload" href="/echarts-handbook/_nuxt/7e05f0f.js" as="script"><link rel="preload" href="/echarts-handbook/_nuxt/js/8 [...]
+ </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/zh/index.html" 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/basics/resource/index.html b/docs/zh/basics/resource/index.html
new file mode 100644
index 0000000..fef20b2
--- /dev/null
+++ b/docs/zh/basics/resource/index.html
@@ -0,0 +1,25 @@
+<!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>echarts-handbook</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="ECharts Handbook"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="/favicon.ico"><link rel="preload" href="/echarts-handbook/_nuxt/7e05f0f.js" as="script"><link rel="preload" href="/echarts-handbook/_nuxt/js/8 [...]
+ </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="#%E5%AE%98%E6%96%B9" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>官方</h2>
+<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><a href="https://echarts.apache.org/examples/zh/index.html" rel="nofollow noopener noreferrer" target="_blank">官方实例</a></li>
+<li><a href="https://echarts.apache.org/cheat-sheet.html" rel="nofollow noopener noreferrer" target="_blank">术语速查手册</a></li>
+</ul>
+<h2 id="社区"><a href="#%E7%A4%BE%E5%8C%BA" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>社区</h2>
+<ul>
+<li><a href="https://gallery.echartsjs.com/" rel="nofollow noopener noreferrer" target="_blank">ECharts Gallery</a>：社区用户的作品集</li>
+<li><a href="https://github.com/ecomfe/awesome-echarts" rel="nofollow noopener noreferrer" target="_blank">awesome-echarts</a>：各种 ECharts 相关的资源，包括 AngularJS、Vue 等框架的支持，Java、Python、R 等语言的 ECharts 版本，ECharts VSCode 插件等工具</li>
+</ul></div> <div class="table-of-contents"><h4 class="toc-container-header">本页目录</h4> <ul><li class="toc2"><a href="/echarts-handbook/zh/basics/resource#%E5%AE%98%E6%96%B9">官方</a></li><li class="toc2"><a href="/echarts-handbook/zh/basics/resource#%E7%A4%BE%E5%8C%BA">社区</a></li></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/resource. [...]
+ <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..95d5d5a
--- /dev/null
+++ b/docs/zh/best-practice/aria/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>echarts-handbook</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="ECharts Handbook"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="/favicon.ico"><link rel="preload" href="/echarts-handbook/_nuxt/7e05f0f.js" as="script"><link rel="preload" href="/echarts-handbook/_nuxt/js/8 [...]
+ </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&reset=1&edit=1"></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><img alt="600xauto" src="~aria-example.png"></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..78fd27c
--- /dev/null
+++ b/docs/zh/best-practice/canvas-vs-svg/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>echarts-handbook</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="ECharts Handbook"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="/favicon.ico"><link rel="preload" href="/echarts-handbook/_nuxt/7e05f0f.js" as="script"><link rel="preload" href="/echarts-handbook/_nuxt/js/8 [...]
+ </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 绘制图表（除了对 IE8- 使用 VML）。而 <a href="https://github.com/apache/echarts/releases" rel="nofollow noopener noreferrer" target="_blank">ECharts v4.0</a> 发布了 SVG 渲染器，从而提供了一种新的选择。只须在初始化一个图表实例时，设置 <a href="http://echarts.baidu.com/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="examples/editor.html?c=lines-bmap-effect">特效</a>。但是，在不少场景中，SVG 具有重要的优势：它的内存占用更低（这对移动端尤其重要）、渲染性能略高、并且用户使用浏览器内置的缩放功能时不会模糊。</p>
+<p>选择哪种渲染器，我们可以根据软硬件环境、数据量、功能需求综合考虑。</p>
+<ul>
+<li>在软硬件环境较好，数据量不大的场景下（例如 PC 端做商务报表），两种渲染器都可以适用，并不需要太多纠结。</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>数据量很大、较多交互时，可以选用 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="option.html#series-lines.effect">炫光尾迹特效</a>、<a href="examples/editor.html?c=heatmap-bmap">带有混合效果的热力图</a>等，绝大部分功能 SVG 都是支持的。</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>ECharts 默认使用 Canvas 渲染。如果想使用 SVG 渲染，ECharts 代码中须包括有 SVG 渲染器模块。</p>
+<ul>
+<li>ECharts 的<a href="https://www.jsdelivr.com/package/npm/echarts" rel="nofollow noopener noreferrer" target="_blank">预构建文件</a> 中，<a href="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.common.min.js" rel="nofollow noopener noreferrer" target="_blank">常用版</a> 和 <a href="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js" rel="nofollow noopener noreferrer" target="_blank">完整版</a> 已经包含了 SVG 渲染器，可直接使用。而 <a href="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.simple.min.js" rel= [...]
+<li>如果<a href="builder.html">在线自定义构建 ECharts</a>，则需要勾上页面下方的 “SVG 渲染”。</li>
+<li>如果<a href="tutorial.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E6%9E%84%E5%BB%BA%20ECharts">线下自定义构建 ECharts</a>，则须引入 SVG 渲染器模块，即：</li>
+</ul>
+<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="api.html#echarts.init">传入参数</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/best-practice/chart-specificatio/bar/basic-bar/index.html b/docs/zh/best-practice/chart-specificatio/bar/basic-bar/index.html
new file mode 100644
index 0000000..487750b
--- /dev/null
+++ b/docs/zh/best-practice/chart-specificatio/bar/basic-bar/index.html
@@ -0,0 +1,33 @@
+<!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>echarts-handbook</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="ECharts Handbook"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="/favicon.ico"><link rel="preload" href="/echarts-handbook/_nuxt/7e05f0f.js" as="script"><link rel="preload" href="/echarts-handbook/_nuxt/js/8 [...]
+ </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>
+<iframe max-width="830" width="100%" height="400" src="https://gallery.echartsjs.com/view-lite.html?cid=xS18jqmX4f">
+</iframe>
+<p>纵向柱状图的柱是垂直方向的，横向柱状图的柱是水平方向的，又称条形图。条形图与横向柱状图表达数据的形式是一样的，不过，当图表的数据标签很长或者有超过 10 个项目进行比较时，横向柱状图会无法完全显示完标签，或者只能倾斜展示，影响美观。因此当数据标签过长时，选择用条形图可以获得更好的展示效果。</p>
+<iframe max-width="830" width="100%" height="400" src="https://gallery.echartsjs.com/view-lite.html?cid=xByXtUE7Vz">
+</iframe>
+<h2 id="柱状图的使用建议"><a aria-hidden="true" href="#%E6%9F%B1%E7%8A%B6%E5%9B%BE%E7%9A%84%E4%BD%BF%E7%94%A8%E5%BB%BA%E8%AE%AE" tabindex="-1"><span class="icon icon-link"></span></a>柱状图的使用建议</h2>
+<p>1、避免使用太多颜色，一般情况一个柱状图（条形图）表示一组相同的度量，所以建议使用相同的颜色或同一颜色的不同色调。如果需要强调某个数据时，可以使用对比色或者变化色调来突出显示有意义的数据点。</p>
+<iframe max-width="830" width="100%" height="400" src="https://gallery.echartsjs.com/view-lite.html?cid=xByYRlN7Ef">
+</iframe>
+<p>2、柱状图柱子间的宽度和间隙要适当。当柱子太窄时，用户的视觉可能会集中在两个柱中间的负空间，而这里是不承载任何数据的。合理的宽度和间隙应该是 单个柱子的宽度不小于柱间间隙的两倍。</p>
+<p>3、Y 轴数据应该从 0 基线开始，以恰当地反映数值。如果展示的是被截断的数据，那很可能会误导观众做出错误的判断。例如左侧图表显示出的数据结果是 2017 年收入是 2014 年收入的五倍，而实际上如右侧图表完整显示的数据表明 2017 年收入相对于 2014 年其实只提升了 25%。</p>
+<p><img max-width="830" width="100%" height="100%" src="/images/design/bar/bar03.jpg">
+</p>
+<p>4、对多个数据系列排序时，如果不涉及到日期等特定数据，最好能符合一定的逻辑用直观的方式引导用户更好地查看数据。可以通过升序或降序排布，例如按照数量从多到少来对数据进行排序，也可以按照字母顺序等来排布。总之，按照逻辑排序可以一定程度上引导人们更好地阅读数据。</p>
+<iframe max-width="830" width="100%" height="400" src="https://gallery.echartsjs.com/view-lite.html?cid=xHJhWhGm4M">
+</iframe>
+<p>5、一般情况下不建议使用三维柱状图，与三维饼图一样，对于数据传达不太精准，甚至还不得不猜测哪个才是数据的顶端。</p>
+<p><img max-width="830" width="100%" height="100%" src="/images/design/bar/bar04.jpg">
+</p></div> <div class="table-of-contents"><h4 class="toc-container-header">本页目录</h4> <ul><li class="toc2"><a href="/echarts-handbook/zh/best-practice/chart-specificatio/bar/basic-bar#%E6%9F%B1%E7%8A%B6%E5%9B%BE%E7%9A%84%E4%BD%BF%E7%94%A8%E5%BB%BA%E8%AE%AE">柱状图的使用建议</a></li></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/best-practice/chart- [...]
+ <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/chart-specificatio/bar/bi-directional-bar/index.html b/docs/zh/best-practice/chart-specificatio/bar/bi-directional-bar/index.html
new file mode 100644
index 0000000..1638904
--- /dev/null
+++ b/docs/zh/best-practice/chart-specificatio/bar/bi-directional-bar/index.html
@@ -0,0 +1,28 @@
+<!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>echarts-handbook</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="ECharts Handbook"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="/favicon.ico"><link rel="preload" href="/echarts-handbook/_nuxt/7e05f0f.js" as="script"><link rel="preload" href="/echarts-handbook/_nuxt/js/8 [...]
+ </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>双向柱状图一般用于正负两份相反数据的对比。例如一周内个人收入和支出的统计，其中收入为正数，支出为负数。使用双向柱状图可以很明确的对收入和支出做出对比，并能从单个系列中分析收入和支出的数值及波动。</p>
+<iframe max-width="830" width="100%" height="400" src="https://gallery.echartsjs.com/view-lite.html?cid=xS18jqmX4f">
+</iframe>
+<p>双向柱状图可分为垂直方向的双向柱状图（如上图）和水平方向的双向柱状图（又叫正负条形图，如下图），例如一个客户满意度的调查数据分析中，有正面评价和负面评价，这很适合用正负条形图，所有数据在中间对齐，正面的评价数据分布在右侧，负面的评价数据分布在左侧。</p>
+<iframe max-width="830" width="100%" height="400" src="https://gallery.echartsjs.com/view-lite.html?cid=xHJ1un374z">
+</iframe>
+<h2 id="双向柱状--图的使用建议"><a aria-hidden="true" href="#%E5%8F%8C%E5%90%91%E6%9F%B1%E7%8A%B6-%08-%E5%9B%BE%E7%9A%84%E4%BD%BF%E7%94%A8%E5%BB%BA%E8%AE%AE" tabindex="-1"><span class="icon icon-link"></span></a>双向柱状 图的使用建议</h2>
+<p>1、双向柱状图正向和负向的数据具有对比性，因此一般选用差值较大的具有对比性的颜色。</p>
+<p>2、永远不要在 0 基线的右边画负值的水平条行图或在 0 基线的上边画负值的柱子，以免和常识违背造成误解。</p>
+<p><img max-width="830" width="100%" height="100%" src="/images/design/bar/bi-directional-bar01.jpg">
+</p>
+<p>3、双向柱状图多用于展示含相反含义的数据，因此要避免不具有正负含义的数据使用而造成的误解。 如下图人口统计图表中使用双向柱状图，一侧绘制男性的数据，另一侧绘制女性的数据，只是单纯的两类不同数据的对比，并不存在负数。那么，此时将两个数据序列绘制成一个分组柱状图是更合适的。</p>
+<p><img max-width="830" width="100%" height="100%" src="/images/design/bar/bi-directional-bar02.jpg">
+</p></div> <div class="table-of-contents"><h4 class="toc-container-header">本页目录</h4> <ul><li class="toc2"><a href="/echarts-handbook/zh/best-practice/chart-specificatio/bar/bi-directional-bar#%E5%8F%8C%E5%90%91%E6%9F%B1%E7%8A%B6-%08-%E5%9B%BE%E7%9A%84%E4%BD%BF%E7%94%A8%E5%BB%BA%E8%AE%AE">双向柱状 图的使用建议</a></li></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/ma [...]
+ <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/chart-specificatio/bar/grouped-bar/index.html b/docs/zh/best-practice/chart-specificatio/bar/grouped-bar/index.html
new file mode 100644
index 0000000..1a57879
--- /dev/null
+++ b/docs/zh/best-practice/chart-specificatio/bar/grouped-bar/index.html
@@ -0,0 +1,22 @@
+<!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>echarts-handbook</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="ECharts Handbook"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="/favicon.ico"><link rel="preload" href="/echarts-handbook/_nuxt/7e05f0f.js" as="script"><link rel="preload" href="/echarts-handbook/_nuxt/js/8 [...]
+ </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>
+<iframe max-width="830" width="100%" height="400" src="https://gallery.echartsjs.com/view-lite.html?cid=xr13FAH54f&v=1">
+</iframe>
+<p>分组柱状图通常是用于将包含相同变量或类别的几个分组进行比较。像柱状图一样，每个柱的长度用于显示类别的数值，每个数据系列被分配一个单独的颜色或相同色系的不同饱和度，以区分它们，每组数据之间相互间隔并进行对比。</p>
+<iframe max-width="830" width="100%" height="400" src="https://gallery.echartsjs.com/view-lite.html?cid=xry8WsXdOW&v=3">
+</iframe>
+<h2 id="分组柱状--图的使用建议"><a aria-hidden="true" href="#%E5%88%86%E7%BB%84%E6%9F%B1%E7%8A%B6-%08-%E5%9B%BE%E7%9A%84%E4%BD%BF%E7%94%A8%E5%BB%BA%E8%AE%AE" tabindex="-1"><span class="icon icon-link"></span></a>分组柱状 图的使用建议</h2>
+<p>1、如果每个分组中的系列过多，数据的阅读难度就会越增加。因此，不建议每个分组中包含过多的系列。在系列较多时，可考虑使用堆叠柱状图。</p>
+<p>2、建议每两个分组之间的间距大于组内不同系列之间的间距，以免造成视觉上错误的归类和区分。</p></div> <div class="table-of-contents"><h4 class="toc-container-header">本页目录</h4> <ul><li class="toc2"><a href="/echarts-handbook/zh/best-practice/chart-specificatio/bar/grouped-bar#%E5%88%86%E7%BB%84%E6%9F%B1%E7%8A%B6-%08-%E5%9B%BE%E7%9A%84%E4%BD%BF%E7%94%A8%E5%BB%BA%E8%AE%AE">分组柱状 图的使用建议</a></li></ul></div></div> <div class="post-contributors"><h3><span class="inline-block align-middle">本文贡献者</span> <a target="_blank" href="https://gi [...]
+ <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/chart-specificatio/bar/stacked-bar/index.html b/docs/zh/best-practice/chart-specificatio/bar/stacked-bar/index.html
new file mode 100644
index 0000000..8a8d953
--- /dev/null
+++ b/docs/zh/best-practice/chart-specificatio/bar/stacked-bar/index.html
@@ -0,0 +1,23 @@
+<!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>echarts-handbook</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="ECharts Handbook"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="/favicon.ico"><link rel="preload" href="/echarts-handbook/_nuxt/7e05f0f.js" as="script"><link rel="preload" href="/echarts-handbook/_nuxt/js/8 [...]
+ </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>与饼图显示单个部分到整体的关系不同的是，堆叠柱状图可以显示多个部分到整体的关系。例如一个班级体育课选课的各项目人数统计，你可以用柱状图或饼图来展示。但是，当需要进一步区分男生和女生参与到不同项目中的人数分别是多少时，就需要把每个项目中包含的男生数和女生数都展示出来。如图选用堆叠柱状图，不仅能显示每个项目的总人数，还能展示出每个项目中的一部分与整体的关系。</p>
+<iframe max-width="830" width="100%" height="400" src="https://gallery.echartsjs.com/view-lite.html?cid=xBk7oUNwEz">
+</iframe>
+<h2 id="堆叠柱状--图的使用建议"><a aria-hidden="true" href="#%E5%A0%86%E5%8F%A0%E6%9F%B1%E7%8A%B6-%08-%E5%9B%BE%E7%9A%84%E4%BD%BF%E7%94%A8%E5%BB%BA%E8%AE%AE" tabindex="-1"><span class="icon icon-link"></span></a>堆叠柱状 图的使用建议</h2>
+<p>1、遵循基本的柱状图使用原则。为了使图表易于理解，请避免使用太多颜色，不要刻意展示被截断的数据误导读者。</p>
+<p>2、堆叠柱状图不适合用于对比不同分组内同个分类之间的数据大小。</p>
+<p>3、堆叠柱状图最好的展示效果是每个组只包含两到三个类别，最多不要超过 6 个，因为太多的数据系列会使数据的阅读和分辨变得非常困难。</p>
+<p>4、由于要分析部分数据在整体中的占比，因此要避免用堆叠柱状图展示包含负数的数据。</p>
+<p>5、大多数的堆叠柱状图都是垂直绘制的，但是如果你的数据标签特别长时，考虑更好地展示效果，可以选择使用水平堆叠的方式。</p></div> <div class="table-of-contents"><h4 class="toc-container-header">本页目录</h4> <ul><li class="toc2"><a href="/echarts-handbook/zh/best-practice/chart-specificatio/bar/stacked-bar#%E5%A0%86%E5%8F%A0%E6%9F%B1%E7%8A%B6-%08-%E5%9B%BE%E7%9A%84%E4%BD%BF%E7%94%A8%E5%BB%BA%E8%AE%AE">堆叠柱状 图的使用建议</a></li></ul></div></div> <div class="post-contributors"><h3><span class="inline-block align-middle">本文贡献者</span> <a target="_blank" hr [...]
+ <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/chart-specificatio/funnel/index.html b/docs/zh/best-practice/chart-specificatio/funnel/index.html
new file mode 100644
index 0000000..efa5858
--- /dev/null
+++ b/docs/zh/best-practice/chart-specificatio/funnel/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>echarts-handbook</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="ECharts Handbook"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="/favicon.ico"><link rel="preload" href="/echarts-handbook/_nuxt/7e05f0f.js" as="script"><link rel="preload" href="/echarts-handbook/_nuxt/js/8 [...]
+ </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>漏斗图又叫倒三角图，漏斗图将数据呈现为几个阶段，每个阶段的数据都是整体的一部分，从一个阶段到另一个阶段数据自上而下逐渐下降，所有阶段的占比总计 100％。与饼图一样，漏斗图呈现的也不是具体的数据，而是该数据相对于总数的占比、漏斗图不需要使用任何数据轴。</p>
+<p>漏斗图多用于显示简化的数据，可以用来单向分析业务各环节丢失或增加变化，也可用来直接表示某个环节与上一环节的差异。漏斗图对于确定组织的销售过程中可能存在的问题和瓶颈也很有用。</p>
+<iframe max-width="830" width="100%" height="400" src="https://gallery.echartsjs.com/view-lite.html?cid=xrJIQEN5NM">
+</iframe>
+<h2 id="漏斗图的使用建议"><a aria-hidden="true" href="#%E6%BC%8F%E6%96%97%E5%9B%BE%E7%9A%84%E4%BD%BF%E7%94%A8%E5%BB%BA%E8%AE%AE" tabindex="-1"><span class="icon icon-link"></span></a>漏斗图的使用建议</h2>
+<p>1、以电商网站数据为代表，漏斗图能直观地展现从最初展现网站到最终下订单购买这整个流程中的转化状况。它不仅能展示用户从看到网站到实现购买的最终转化率，还可以展示每个步骤的转化率，能够直观地展示和说明问题所在，进而能针对性地通过各阶段的转化分析去改善设计。</p>
+<p>如下图，「展现」「点击」「访问」三个环节基本并没有太大的流失，但是从「访问」到「咨询」环节数据明显减少，所以就可以重点分析为什么咨询量明显减少，例如是不是咨询的入口不够明显造成的。</p>
+<iframe max-width="830" width="100%" height="400" src="https://gallery.echartsjs.com/view-lite.html?cid=xHJIPHN9Nf">
+</iframe>
+<p>2、可以对两个基于统一事情前后的两份数据使用叠加两个漏斗图进行对比，例如下图通过预期值和实现值的对比，可以分析每一项实现情况和预期指标的偏差。</p>
+<iframe max-width="830" width="100%" height="400" src="https://gallery.echartsjs.com/view-lite.html?cid=xrydEwN94f">
+</iframe>
+<p>3、还可以用左右对比的漏斗图同时分析两个项目的转化情况。如下图可见项目 B 从「访问」到「咨询」环节的流失率明显大于项目 A。</p>
+<iframe max-width="830" width="100%" height="400" src="https://gallery.echartsjs.com/view-lite.html?cid=xrJfrjEc4z&v=1">
+</iframe>
+<p>4、漏斗图不是表示各个分类的占比情况，而是展示数据变化的一个逻辑流程，如果数据是无逻辑顺序的占比比较，建议使用饼图更合适。</p>
+<p>5、可以根据数据选择使用对比色或同一种颜色的色调渐变，从最暗到最浅来依照漏斗的尺寸排列。切记，不要添加许多图层和颜色造成漏斗图难以阅读。</p></div> <div class="table-of-contents"><h4 class="toc-container-header">本页目录</h4> <ul><li class="toc2"><a href="/echarts-handbook/zh/best-practice/chart-specificatio/funnel#%E6%BC%8F%E6%96%97%E5%9B%BE%E7%9A%84%E4%BD%BF%E7%94%A8%E5%BB%BA%E8%AE%AE">漏斗图的使用建议</a></li></ul></div></div> <div class="post-contributors"><h3><span class="inline-block align-middle">本文贡献者</span> <a target="_blank" href="https://github.com/apac [...]
+ <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/chart-specificatio/gauger/index.html b/docs/zh/best-practice/chart-specificatio/gauger/index.html
new file mode 100644
index 0000000..96eac87
--- /dev/null
+++ b/docs/zh/best-practice/chart-specificatio/gauger/index.html
@@ -0,0 +1,21 @@
+<!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>echarts-handbook</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="ECharts Handbook"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="/favicon.ico"><link rel="preload" href="/echarts-handbook/_nuxt/7e05f0f.js" as="script"><link rel="preload" href="/echarts-handbook/_nuxt/js/8 [...]
+ </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>
+<iframe max-width="830" width="100%" height="400" src="https://gallery.echartsjs.com/view-lite.html?cid=xH1vxib94f">
+</iframe>
+<h2 id="仪表盘的使用建议"><a aria-hidden="true" href="#%E4%BB%AA%E8%A1%A8%E7%9B%98%E7%9A%84%E4%BD%BF%E7%94%A8%E5%BB%BA%E8%AE%AE" tabindex="-1"><span class="icon icon-link"></span></a>仪表盘的使用建议</h2>
+<p>1、仪表盘非常适合在量化的情况下显示单一的价值和衡量标准，不适合用于比较不同变量或者趋势的分析。</p>
+<p>2、仪表盘上可以同时展示不同纬度的数据，但是为了避免指针的重叠影响数据的查看，并且基于常识，仪表盘的指针数量建议最多不要超过 3 根。如果确实有多个数据需要展示，建议可使用多个仪表盘。</p>
+<iframe max-width="830" width="100%" height="400" src="https://gallery.echartsjs.com/view-lite.html?cid=gauge-car">
+</iframe></div> <div class="table-of-contents"><h4 class="toc-container-header">本页目录</h4> <ul><li class="toc2"><a href="/echarts-handbook/zh/best-practice/chart-specificatio/gauger#%E4%BB%AA%E8%A1%A8%E7%9B%98%E7%9A%84%E4%BD%BF%E7%94%A8%E5%BB%BA%E8%AE%AE">仪表盘的使用建议</a></li></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/best-practice/chart-sp [...]
+ <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/chart-specificatio/line/area/index.html b/docs/zh/best-practice/chart-specificatio/line/area/index.html
new file mode 100644
index 0000000..4eb44ce
--- /dev/null
+++ b/docs/zh/best-practice/chart-specificatio/line/area/index.html
@@ -0,0 +1,22 @@
+<!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>echarts-handbook</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="ECharts Handbook"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="/favicon.ico"><link rel="preload" href="/echarts-handbook/_nuxt/7e05f0f.js" as="script"><link rel="preload" href="/echarts-handbook/_nuxt/js/8 [...]
+ </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 轴）之间填充颜色或者纹理，形成一个面表示数据体积。相对于折线而言，被填充的区域可以更好的引起人们对总值趋势的注意，所以面积图主要用于传达趋势的大小，而不是确切的单个数据值。</p>
+<iframe max-width="830" width="100%" height="400" src="https://gallery.echartsjs.com/view-lite.html?cid=area-simple"></iframe>
+<h2 id="面积图的使用建议"><a aria-hidden="true" href="#%E9%9D%A2%E7%A7%AF%E5%9B%BE%E7%9A%84%E4%BD%BF%E7%94%A8%E5%BB%BA%E8%AE%AE" tabindex="-1"><span class="icon icon-link"></span></a>面积图的使用建议</h2>
+<p>1、面积图要用填充区域来展示数据，当图表上有多个图层时，要尽量确保数据不要重叠。如果无法避免重叠，可以通过将颜色和透明度设置为适当的值，使重叠的数据图可以变得可读。</p>
+<iframe max-width="830" width="100%" height="400" src="https://gallery.echartsjs.com/view-lite.html?cid=xHJ-4tL84M"></iframe>
+<p>2、面积图适合用来展示二到三组数据，建议最多不要展示超过四组数据系列，否则就如下方错误示例，数据系列过多而导致无法辨识数据，因此要避免在需要比较多个类别和确切的数据值的情况下使用面积图。超过三个系列的非堆叠面积图表是很难阅读的。</p>
+<iframe max-width="830" width="100%" height="400" src="https://gallery.echartsjs.com/view-lite.html?cid=xHyNDxOo4M"></iframe>
+<p>3、当数据值相距很远时，区域是模糊不清的，此时 不太适合使用面积图展示。如下方错误示例虽然仔细分析能确定只展示了两个类别，乍一看，很可能会误以为图表上显示三种不同的颜色。</p>
+<iframe max-width="830" width="100%" height="400" src="https://gallery.echartsjs.com/view-lite.html?cid=xSkO64PIEG&v=1"></iframe></div> <div class="table-of-contents"><h4 class="toc-container-header">本页目录</h4> <ul><li class="toc2"><a href="/echarts-handbook/zh/best-practice/chart-specificatio/line/area#%E9%9D%A2%E7%A7%AF%E5%9B%BE%E7%9A%84%E4%BD%BF%E7%94%A8%E5%BB%BA%E8%AE%AE">面积图的使用建议</a></li></ul></div></div> <div class="post-contributors"><h3><span class="inline-block align-middle">本文贡献 [...]
+ <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/chart-specificatio/line/basic-line/index.html b/docs/zh/best-practice/chart-specificatio/line/basic-line/index.html
new file mode 100644
index 0000000..cbf7b44
--- /dev/null
+++ b/docs/zh/best-practice/chart-specificatio/line/basic-line/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>echarts-handbook</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="ECharts Handbook"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="/favicon.ico"><link rel="preload" href="/echarts-handbook/_nuxt/7e05f0f.js" as="script"><link rel="preload" href="/echarts-handbook/_nuxt/js/8 [...]
+ </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>
+<iframe max-width="830" width="100%" height="400" src="https://gallery.echartsjs.com/view-lite.html?cid=xB1kG1rLEG&v=1">
+</iframe>
+<p>折线图除了展示某个事情发展的趋势，还可以用来比较多个不同的数据序列。如下图，可以通过对比同时间段的三种商品的销量，分析哪一种商品的销量最好。</p>
+<iframe max-width="830" width="100%" height="400" src="https://gallery.echartsjs.com/view-lite.html?cid=xSkBiMSU4M&v=1">>
+ </iframe>
+<p>折线图是将数据点之间用线连接起来绘制成的图表。为了追求美观或特殊的效果，还可以如上图将点与点之间用曲线连接，这种图又叫曲线图或样条图样条。样条图与折线图用法相同，区别是数据点之间的连线使用曲线绘制。</p>
+<h2 id="折线图的使用建议"><a aria-hidden="true" href="#%E6%8A%98%E7%BA%BF%E5%9B%BE%E7%9A%84%E4%BD%BF%E7%94%A8%E5%BB%BA%E8%AE%AE" tabindex="-1"><span class="icon icon-link"></span></a>折线图的使用建议</h2>
+<p>1、使用实线绘制数据线，首先要保证能够的区分数据线和坐标轴线，并且要尽力要所有的数据清晰可识别。</p>
+<p>2、建议不要绘制 4 条以上的折线，如下图错误的示例，线都折叠在一起并且又没有明显的对比，整张图表就会混乱并难以阅读。</p>
+<iframe max-width="830" width="100%" height="400" src="https://gallery.echartsjs.com/view-lite.html?cid=xBJzdEItVz&v=1">
+</iframe>
+<p>3、不建议使用过多的装饰来区分图表，图例虽然可以帮助区分不同数据系列，但如下图使用过多种类的图例有时会让用户分心。</p>
+<iframe max-width="830" width="100%" height="400" src="https://gallery.echartsjs.com/view-lite.html?cid=xS1Tbdr8EG&v=1">
+</iframe>
+<p>4、展示折线图的数据时，要避免刻意的歪曲趋势。如下图，左图过于扁平化掩盖了想传达的信息，右图过于夸大趋势。要根据展示数据波动的参考单位，做有意义的波动分析。正确的数据高度是线约占 Y 轴高度的 2/3。</p>
+<p><img max-width="830" width="100%" height="100%" src="images/design/line/line01.jpg"></p></div> <div class="table-of-contents"><h4 class="toc-container-header">本页目录</h4> <ul><li class="toc2"><a href="/echarts-handbook/zh/best-practice/chart-specificatio/line/basic-line#%E6%8A%98%E7%BA%BF%E5%9B%BE%E7%9A%84%E4%BD%BF%E7%94%A8%E5%BB%BA%E8%AE%AE">折线图的使用建议</a></li></ul></div></div> <div class="post-contributors"><h3><span class="inline-block align-middle">本文贡献者</span> <a target="_blank" 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/best-practice/chart-specificatio/line/stacked-area/index.html b/docs/zh/best-practice/chart-specificatio/line/stacked-area/index.html
new file mode 100644
index 0000000..731d2e5
--- /dev/null
+++ b/docs/zh/best-practice/chart-specificatio/line/stacked-area/index.html
@@ -0,0 +1,40 @@
+<!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>echarts-handbook</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="ECharts Handbook"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="/favicon.ico"><link rel="preload" href="/echarts-handbook/_nuxt/7e05f0f.js" as="script"><link rel="preload" href="/echarts-handbook/_nuxt/js/8 [...]
+ </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>如果有多个数据系列，并想分析每个类别的部分到整体的关系，并展现部分量对于总量的贡献时，使用堆积面积图是非常合适的选择。例如下图显示某个销售员对总销售额的贡献。</p>
+<iframe max-width="830" width="100%" height="400" src="https://gallery.echartsjs.com/view-lite.html?cid=xHySthj74z">
+</iframe>
+<p>有两种不同的堆积面积图类型：</p>
+<ul>
+<li><b>传统的堆积面积图</b>：直接使用原始值堆叠，显示整个过程如何变化。</li>
+<li><b>百分比堆积面积图</b>：百分比堆积显示不同部分之间的关 系如何随时间而变化。其中累积的总数不重要，重要的是显示出类别分布在整体中的作用。</li>
+</ul>
+<iframe max-width="830" width="100%" height="400" src="https://gallery.echartsjs.com/view-lite.html?cid=xSyBN2i7Vf">
+</iframe>
+<h2 id="堆叠面积图的使用建议"><a aria-hidden="true" href="#%E5%A0%86%E5%8F%A0%E9%9D%A2%E7%A7%AF%E5%9B%BE%E7%9A%84%E4%BD%BF%E7%94%A8%E5%BB%BA%E8%AE%AE" tabindex="-1"><span class="icon icon-link"></span></a>堆叠面积图的使用建议</h2>
+<p>1、图表有重叠的数据时，类别数量越多，重叠越多，因此可见度越低。如果使用面积图（如下示例）时会因为系列的重叠而无法阅读。</p>
+<iframe max-width="830" width="100%" height="400" src="https://gallery.echartsjs.com/view-lite.html?cid=xHyNDxOo4M">
+</iframe>
+<p>那同样的数据，换成使用堆叠面积图展示，则相对更容易阅读。</p>
+<iframe max-width="830" width="100%" height="400" src="https://gallery.echartsjs.com/view-lite.html?cid=xSyBN2i7Vf">
+</iframe>
+<div class="article-look-outside">
+ <div class="article-look-inside" style="padding-bottom:50%">
+ <iframe class="article-look-content" src="https://gallery.echartsjs.com/view-lite.html?cid=xHyNDxOo4M">
+ </iframe>
+ </div>
+</div>
+<p>2、虽然多数据系列时堆叠面积图比面积图有更好的展示效果，但依然不建议堆叠面积图中包含过多数据系列，最好不要多于 7 个，以免数据难以辨识。</p>
+<p>3、堆积面积图要展示部分和整体之间的关系，所以不能用于包含负值的数据的展示。</p>
+<p>4、建议堆叠面积图中把变化量较大的数据放在上方，变化量较小的数据放在下方会获得更加的展示效果。</p></div> <div class="table-of-contents"><h4 class="toc-container-header">本页目录</h4> <ul><li class="toc2"><a href="/echarts-handbook/zh/best-practice/chart-specificatio/line/stacked-area#%E5%A0%86%E5%8F%A0%E9%9D%A2%E7%A7%AF%E5%9B%BE%E7%9A%84%E4%BD%BF%E7%94%A8%E5%BB%BA%E8%AE%AE">堆叠面积图的使用建议</a></li></ul></div></div> <div class="post-contributors"><h3><span class="inline-block align-middle">本文贡献者</span> <a target="_blank" href="https://githu [...]
+ <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/chart-specificatio/pie/basic-pie/index.html b/docs/zh/best-practice/chart-specificatio/pie/basic-pie/index.html
new file mode 100644
index 0000000..ba9f566
--- /dev/null
+++ b/docs/zh/best-practice/chart-specificatio/pie/basic-pie/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>echarts-handbook</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="ECharts Handbook"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="/favicon.ico"><link rel="preload" href="/echarts-handbook/_nuxt/7e05f0f.js" as="script"><link rel="preload" href="/echarts-handbook/_nuxt/js/8 [...]
+ </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>饼图主要用于展现不同类别数值相对于总数的占比情况。图中每个分块（扇区）的弧长表示该类别的占比大小，所有分块数据总和为 100%。</p>
+<iframe max-width="830" width="100%" height="400" src="https://gallery.echartsjs.com/view-lite.html?cid=xHySlBkIEM&v=1">
+</iframe>
+<p>虽然饼图能快速有效地展示数据的比例分布，并被广泛用于各个领域，但是饼图及其变形图表一直是比较受争议的图表。因此，我们在使用饼图及其变形图表时一定要谨慎并避免走进误区。</p>
+<h2 id="饼图的使用建议"><a aria-hidden="true" href="#%E9%A5%BC%E5%9B%BE%E7%9A%84%E4%BD%BF%E7%94%A8%E5%BB%BA%E8%AE%AE" tabindex="-1"><span class="icon icon-link"></span></a>饼图的使用建议</h2>
+<p>1、饼图适合用来展示单一维度数据的占比，要求其数值中没有零或负值，并确保各分块占比总和为 100%。</p>
+<p>2、我们很难比较一个分块过多的饼图的数据，建议尽量将饼图分块数量控制在五个以内。当数据类别较多时，可以把较小或不重要的数据合并成第五个分块，并命名为"其它"。如果各类别都必须全部展示，此时选择柱状图或堆积柱状图或许更合适。</p>
+<img max-width="830" width="100%" height="100%" src="images/design/pie/pie02.jpg">
+<p>3、饼图不适合被用于精确数据的比较，因此当各类别数据占比较接近时（如下左图），我们很难对比出每个类别占比的大小。此时建议选用柱状图或南丁格尔玫瑰图（如下右图）来获取更好的展示效果。</p>
+<img max-width="830" width="100%" height="100%" src="images/design/pie/pie03.jpg">
+<p>4、大多数人视觉习惯是按照顺时针和自上而下的顺序去观察。因此在绘制饼图时，建议从 12 点钟开始沿顺时针右边第一个分块绘制饼图最大的数据分块，有效的强调其重要性。</p>
+<p>其余的数据分块有两种建议，一种是按照数据大小依次顺时针排列，另一种是在 12 点钟的左边绘制第二大的分块，其余的分块按照逆时针排列，最小的分块放在底部。如下图所示。</p>
+<img max-width="830" width="100%" height="100%" src="images/design/pie/pie01.jpg">
+<p>按照数据大小区别顺序，不仅符合用户的视觉习惯，也更易于数据的识别和比较。当然基于这个原理，我们也可以把需要强调的最重要的部分（不一定是最大的部分）放在最突出重要的位置。</p>
+<p>5、可以添加一些装饰来强调饼图中的某一个数据。颜色、动效、样式、位置等元素都可以被用来突出显示一个扇区。请注意适度，有时太多的装饰会让用户理解数据时分心。</p>
+<iframe max-width="830" width="100%" height="400" src="https://gallery.echartsjs.com/view-lite.html?cid=xHySlBkIEM&v=1">
+</iframe>
+<p>6、三维的饼图歪曲了各分块相对于整体的比例关系，会造成错误及理解上的困扰。因此不建议使用 3D 饼图。</p>
+<img max-width="830" width="100%" height="100%" src="images/design/pie/pie04.jpg"></div> <div class="table-of-contents"><h4 class="toc-container-header">本页目录</h4> <ul><li class="toc2"><a href="/echarts-handbook/zh/best-practice/chart-specificatio/pie/basic-pie#%E9%A5%BC%E5%9B%BE%E7%9A%84%E4%BD%BF%E7%94%A8%E5%BB%BA%E8%AE%AE">饼图的使用建议</a></li></ul></div></div> <div class="post-contributors"><h3><span class="inline-block align-middle">本文贡献者</span> <a target="_blank" href="https://github.com/ [...]
+ <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/chart-specificatio/radar/index.html b/docs/zh/best-practice/chart-specificatio/radar/index.html
new file mode 100644
index 0000000..d16dd66
--- /dev/null
+++ b/docs/zh/best-practice/chart-specificatio/radar/index.html
@@ -0,0 +1,27 @@
+<!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>echarts-handbook</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="ECharts Handbook"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="/favicon.ico"><link rel="preload" href="/echarts-handbook/_nuxt/7e05f0f.js" as="script"><link rel="preload" href="/echarts-handbook/_nuxt/js/8 [...]
+ </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>雷达图（Radar Chart）又被叫做蜘蛛网图，适用于显示三个或更多的维度的变量。雷达图是以在同一点开始的轴上显示的三个或更多个变量的二维图表的形式来显示多元数据的方法，其中轴的相对位置和角度通常是无意义的。</p>
+<p>雷达图的每个变量都有一个从中心向外发射的轴线，所有的轴之间的夹角相等，同时每个轴有相同的刻度，将轴到轴的刻度用网格线链接作为辅助元素，连接每个变量在其各自的轴线的数据点成一条多边形。</p>
+<iframe max-width="830" width="100%" height="400" src="https://gallery.echartsjs.com/view-lite.html?cid=xH1-fnLcVG&v=1">
+</iframe>
+<p>雷达图对于查看哪些变量具有相似的值、变量之间是否有异常值都很有用。雷达图表也可用于查看哪些变量在数据集内得分较高或较低，因此非常适合显示性能（见下图）。同样，雷达图也常用于排名、评估、评论等数据的展示。</p>
+<iframe max-width="830" width="100%" height="400" src="https://gallery.echartsjs.com/view-lite.html?cid=xHJH93GqVf&v=1">
+</iframe>
+<p>如下图，某幼儿园上周资金流统计的示例中比较了预算和开销。参与比较的六个方面是食品、玩具、绘本、医疗、门票、服饰。每个变量都是通过 0 到 500 之间的金额来比较的。只有玩具一项的支出超出了预算，而服饰花费远低于预算，使用雷达图，哪些方面超出或不足变得一目了然了。</p>
+<iframe max-width="830" width="100%" height="400" src="https://gallery.echartsjs.com/view-lite.html?cid=xrk6EfmqVf">
+</iframe>
+<h2 id="雷达图的使用建议"><a aria-hidden="true" href="#%E9%9B%B7%E8%BE%BE%E5%9B%BE%E7%9A%84%E4%BD%BF%E7%94%A8%E5%BB%BA%E8%AE%AE" tabindex="-1"><span class="icon icon-link"></span></a>雷达图的使用建议</h2>
+<p>1、一个雷达图包含的多边形数量是有限的，如果有五个以上要评估的事物，无论是轮廓还是填充区域，都会产生覆盖和混乱，使得数据难以阅读。</p>
+<p>2、变量太多会产生太多的轴，也会使图表变得混乱，因此，要保持雷达图的简单并限制其变量数量。</p>
+<p>3、由于径向距离很难判断，所以虽然有网格线的参考，但是还是很难直观的比较图表内变量具体的值，如果需要的比较具体值话，建议使用线图。</p></div> <div class="table-of-contents"><h4 class="toc-container-header">本页目录</h4> <ul><li class="toc2"><a href="/echarts-handbook/zh/best-practice/chart-specificatio/radar#%E9%9B%B7%E8%BE%BE%E5%9B%BE%E7%9A%84%E4%BD%BF%E7%94%A8%E5%BB%BA%E8%AE%AE">雷达图的使用建议</a></li></ul></div></div> <div class="post-contributors"><h3><span class="inline-block align-middle">本文贡献者</span> <a target="_blank" href="https://github.com/apache/e [...]
+ <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/chart-specificatio/scatter/bubble/index.html b/docs/zh/best-practice/chart-specificatio/scatter/bubble/index.html
new file mode 100644
index 0000000..17d44bc
--- /dev/null
+++ b/docs/zh/best-practice/chart-specificatio/scatter/bubble/index.html
@@ -0,0 +1,26 @@
+<!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>echarts-handbook</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="ECharts Handbook"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="/favicon.ico"><link rel="preload" href="/echarts-handbook/_nuxt/7e05f0f.js" as="script"><link rel="preload" href="/echarts-handbook/_nuxt/js/8 [...]
+ </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>
+<iframe max-width="830" width="100%" height="400" src="https://gallery.echartsjs.com/view-lite.html?cid=xHkRpZuY4z&v=1">
+</iframe>
+<h2 id="气泡图的使用建议"><a aria-hidden="true" href="#%E6%B0%94%E6%B3%A1%E5%9B%BE%E7%9A%84%E4%BD%BF%E7%94%A8%E5%BB%BA%E8%AE%AE" tabindex="-1"><span class="icon icon-link"></span></a>气泡图的使用建议</h2>
+<p>1、当数据具有 3 个序列、特征及相关值，使用气泡图是一个不错的选择。如下图气泡的位置显示了代码提交的日期、具体的时间点，气泡的大小说明了提交的代码量。</p>
+<iframe max-width="830" width="100%" height="400" src="https://gallery.echartsjs.com/view-lite.html?cid=scatter-punchCard">
+</iframe>
+<p>2、我们还可以给气泡加入颜色编码。例如下图用不同的颜色将三个地区的空气数据分类标注，红色代表北京，黄色代表上海、蓝色代表广州，可以直观地对比分析三地的空气质量情况。</p>
+<iframe max-width="830" width="100%" height="400" src="https://gallery.echartsjs.com/view-lite.html?cid=xr1kK7LoEf&v=1">
+</iframe>
+<p>3、气泡图还经常用于和地图结合，其中 x 轴和 y 轴是经度和纬度的数据定位，气泡的大小可以表明该位置数量的多少。</p>
+<iframe max-width="830" width="100%" height="400" src="https://gallery.echartsjs.com/view-lite.html?cid=scatter-world-population">
+</iframe></div> <div class="table-of-contents"><h4 class="toc-container-header">本页目录</h4> <ul><li class="toc2"><a href="/echarts-handbook/zh/best-practice/chart-specificatio/scatter/bubble#%E6%B0%94%E6%B3%A1%E5%9B%BE%E7%9A%84%E4%BD%BF%E7%94%A8%E5%BB%BA%E8%AE%AE">气泡图的使用建议</a></li></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/best-practice/ [...]
+ <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/chart-specificatio/scatter/scatter/index.html b/docs/zh/best-practice/chart-specificatio/scatter/scatter/index.html
new file mode 100644
index 0000000..79a87e7
--- /dev/null
+++ b/docs/zh/best-practice/chart-specificatio/scatter/scatter/index.html
@@ -0,0 +1,38 @@
+<!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>echarts-handbook</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="ECharts Handbook"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="/favicon.ico"><link rel="preload" href="/echarts-handbook/_nuxt/7e05f0f.js" as="script"><link rel="preload" href="/echarts-handbook/_nuxt/js/8 [...]
+ </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>
+<iframe max-width="830" width="100%" height="400" src="https://gallery.echartsjs.com/view-lite.html?cid=xSkCyUwKNG&v=1">
+</iframe>
+<p>散点图会显示不同类型的相关性，相关性即变量之间的关系。通常有正相关、负相关、不相关三种相关性。</p>
+<ul>
+<li>
+<p>正相关：数据点从低 x、y 值的点到高 x、y 值，一个变量增加，另一个变量增加。</p>
+</li>
+<li>
+<p>负相关：数据点从高 x、y 值的点到低 x、y 值，一个变量增加，另一个变量减少。</p>
+</li>
+<li>
+<p>不相关：数据没有明显的方向性，一个变量变化对另一个没有影响。</p>
+</li>
+</ul>
+<p><img max-width="830" width="100%" height="100%" src="/images/design/scatter/scatter5.jpg">
+</p>
+<p>需要注意的是，散点图能够有效的说明两个变量之间的相关性，但是并不能有力地证明 其中存在因果关系。例如广告投放量和点击率是正相关的，但是不能说点击率高一定是因为广告投放量多造成的。但是，如果有明显的正相关性，就有足够的理由去增加投放量，然后再去观察数据。</p>
+<h2 id="散点图的使用建议"><a aria-hidden="true" href="#%E6%95%A3%E7%82%B9%E5%9B%BE%E7%9A%84%E4%BD%BF%E7%94%A8%E5%BB%BA%E8%AE%AE" tabindex="-1"><span class="icon icon-link"></span></a>散点图的使用建议</h2>
+<p>1、如果一个散点图没有显示变量之间的任何关系，那么或许该图表类型不是此数据的最佳选择。</p>
+<p>2、如果数据包含不同系列，可以给不同系列使用不同的颜色，例如蓝色代表男性，红色代表女性，并增加图例标注出蓝色代表的含义。可以区分了解男女不同性别身高和体重的分布状况。还可以分别添加每个系列平均值的辅助线，可以更好的理解数据的分布情况，如图中女生体重高于平均值的比低于平均值的少。</p>
+<iframe max-width="830" width="100%" height="400" src="https://gallery.echartsjs.com/view-lite.html?cid=xBy9E2oufM">
+</iframe>
+<p>在观察两个变量之间的关系时，趋势线是非常有用的，趋势线的形状走向解释了两个变量之间的关系类型，还可以用来预测未来的值。但需要注意的是趋势线最可只能使用两条，以免干扰正常的数据的阅读。</p>
+<p>3、散点图只有有足够多的数据点，并且数据之间有相关性时才能呈现很好的结果。如果一份数据只有极少的信息或者数据间没有相关性，那么绘制一个很空的散点图和不相关的散点图都是没有意义的。</p></div> <div class="table-of-contents"><h4 class="toc-container-header">本页目录</h4> <ul><li class="toc2"><a href="/echarts-handbook/zh/best-practice/chart-specificatio/scatter/scatter#%E6%95%A3%E7%82%B9%E5%9B%BE%E7%9A%84%E4%BD%BF%E7%94%A8%E5%BB%BA%E8%AE%AE">散点图的使用建议</a></li></ul></div></div> <div class="post-contributors"><h3><span class="inline-block align-middle">本文贡献者</span> <a target="_blank" [...]
+ <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/design/color-enhance/index.html b/docs/zh/best-practice/design/color-enhance/index.html
new file mode 100644
index 0000000..6fccbe8
--- /dev/null
+++ b/docs/zh/best-practice/design/color-enhance/index.html
@@ -0,0 +1,40 @@
+<!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>echarts-handbook</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="ECharts Handbook"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="/favicon.ico"><link rel="preload" href="/echarts-handbook/_nuxt/7e05f0f.js" as="script"><link rel="preload" href="/echarts-handbook/_nuxt/js/8 [...]
+ </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="#%E9%A2%9C%E8%89%B2%E7%9A%84%E6%83%85%E6%84%9F%E5%85%B1%E9%B8%A3" tabindex="-1"><span class="icon icon-link"></span></a>颜色的情感共鸣</h2>
+<p>颜色感知是一个复杂的物理和心理相互作用的结果。为了证明了人们感知到的色彩有冷与暖之分，日本色彩学家大智浩曾做过一个实验，将一个工作场地涂灰青色，另一个工作场地涂红橙色，两个工作场地的客观温度劳动强度相同，在灰青色工作场地工作的员工相对更容易感觉到冷。人们进一步研究发现，除了冷与暖的不同感受，色彩还有轻与重、远与近、活泼与忧郁等区分。所以，色彩之所以强大之处在于不同的色彩会使人的心理与生理产生不同的感受，从而引起情感反应和影响人们的情绪。</p>
+<p>在可视化的颜色选择上，如果我们选用的颜色与我们数据本身的特点以及想要传达的情绪吻合的话，就可以伴随着颜色的视觉传达而引起情感上的共鸣。</p>
+<p>例如某个甜品店各类甜品的销售占比，数据如下：</p>
+<img max-width="830" width="50%" height="100%" src="images/design/color/color01.png">
+<p>针对这份数据，下面两个相同样式的图表，我们采用了两种不同配色方案，对比来看很明显，右图的配色更适合用来展示甜品数据。</p>
+<img max-width="830" width="100%" height="100%" src="images/design/color/color02.png">
+<p>因为相较于蓝色、紫色而言，橙色、黄色、粉色、绿色都是有利于提升食欲的颜色，而且更容易使人们产生温暖、幸福的情感，而这种情感与吃甜品时人们产生的感觉是一致的。另一方面，甜品本身的面向用户大多数是儿童和女性，针对这部分用户，比较明快、可爱的图表颜色也是更好的选择。而左侧的图表的配色更适合用于展示某种商务、男性群体的数据，因为左图的配色更容易使人产生理性和冷静的情感。</p>
+<h2 id="颜色的语义共鸣"><a aria-hidden="true" href="#%E9%A2%9C%E8%89%B2%E7%9A%84%E8%AF%AD%E4%B9%89%E5%85%B1%E9%B8%A3" tabindex="-1"><span class="icon icon-link"></span></a>颜色的语义共鸣</h2>
+<p>不同的颜色可以帮助我们识别和区分不同的类别。我们已经习惯将颜色和各种事物或概念绑定在一起。当提到某些事物时我们经常会迅速的在心中匹配其对应的颜色，例如提到“云朵”会想到白色，“爱情”会想到粉红色。这些自然的、与语义一致的颜色被称为"语义共鸣色"。</p>
+<p>研究表明，对于有固定颜色的词，匹配其具有语义共鸣的颜色，能有效的加速认知过程，反之则会阻碍认知，这种有趣的现象称为"斯特鲁普效应"。我们可以做个的对比试验，分别在上图两行文字中找到“黄”字。这个过程中，第一行的“黄”可以被快速定位到，因为对应使用了黄色。而在第二行寻找的时候，可能有人最早定位到的会是“紫”字，因为此处“紫”字使用了黄色，这就阻碍了我们寻找的速度和准确性。</p>
+<img max-width="830" width="100%" height="100%" src="images/design/color/color03.png">
+<p>有效地利用语义共鸣色，即采用与数据本身意义一致的颜色，也可以提高可视化的认知效率。例如可以使用蓝色的来显示"海洋"的数据、使用黄色来显示“沙漠”的数据。</p>
+<p>视觉效果应该尽可能容易地解释，因此请尝试找到与观众的先入为主和文化联想相匹配的配色方案。如下示例中展示了猕猴桃、香蕉、橙子、草莓四种水果的销售数据，分别选择了与水果本身一致的颜色绿色、黄色、橙色、红色。这样，我们在辨别和记忆每个柱状所对应的水果时就轻而易举了。</p>
+<div class="nuxt-content-highlight"><!----></div>
+<h2 id="图表颜色要吻合常识"><a aria-hidden="true" href="#%E5%9B%BE%E8%A1%A8%E9%A2%9C%E8%89%B2%E8%A6%81%E5%90%BB%E5%90%88%E5%B8%B8%E8%AF%86" tabindex="-1"><span class="icon icon-link"></span></a>图表颜色要吻合常识</h2>
+<p>在数据可视化的过程中，颜色的使用与图表的数据、展示环境、受众人群、社会背景等因素直接相关，我们不可以把颜色作为独立的因素去设计。在开始选择可视化作品的颜色时，请先克制住自由创作的热情，查看一下这是否是一份特殊的数据，再去选择对的颜色。例如一个股票数据的图表中，红色和绿色都有独特的含义。所以可视化图表颜色的选择吻合认知的常识，可以帮助我们更好地理解和区分数据。</p>
+<iframe max-width="830" width="100%" height="400" src="https://gallery.echartsjs.com/view-lite.html?cid=xp1oqJoQqG">
+</iframe>
+<p>再例如查看天气温度。蓝色和红色易于理解，无需任何解释，并且易于区分。</p>
+<iframe max-width="830" width="100%" height="400" src="https://gallery.echartsjs.com/view-lite.html?cid=xIVoX5gZcT&v=1">
+</iframe>
+<h2 id="用颜色来区分数据"><a aria-hidden="true" href="#%E7%94%A8%E9%A2%9C%E8%89%B2%E6%9D%A5%E5%8C%BA%E5%88%86%E6%95%B0%E6%8D%AE" tabindex="-1"><span class="icon icon-link"></span></a>用颜色来区分数据</h2>
+<p>我们通常会使用折线图来分析趋势，但是有的时候有需要明确的知道某个数据是否在某个区间范围内，因此我们可以主动地去配置定义区域。例如我们设定 25%-75% 这个范围内为我们计划完成的销售额，那我们可以在这个定义区域的范围内，给每个区域设置成一个底色，这样就可以高效的识别出每个数据处于哪个区间范围内，未达到、达到、超额完成的值。</p>
+<p>所以，颜色可以被用来作为提高图表的可阅读性和有效工具。</p>
+<img max-width="830" width="80%" height="100%" src="images/design/color/color04.png"></div> <div class="table-of-contents"><h4 class="toc-container-header">本页目录</h4> <ul><li class="toc2"><a href="/echarts-handbook/zh/best-practice/design/color-enhance#%E9%A2%9C%E8%89%B2%E7%9A%84%E6%83%85%E6%84%9F%E5%85%B1%E9%B8%A3">颜色的情感共鸣</a></li><li class="toc2"><a href="/echarts-handbook/zh/best-practice/design/color-enhance#%E9%A2%9C%E8%89%B2%E7%9A%84%E8%AF%AD%E4%B9%89%E5%85%B1%E9%B8%A3">颜色的语义共鸣</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/mobile/index.html b/docs/zh/best-practice/mobile/index.html
new file mode 100644
index 0000000..ef65c05
--- /dev/null
+++ b/docs/zh/best-practice/mobile/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>echarts-handbook</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="ECharts Handbook"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="/favicon.ico"><link rel="preload" href="/echarts-handbook/_nuxt/7e05f0f.js" as="script"><link rel="preload" href="/echarts-handbook/_nuxt/js/8 [...]
+ </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/concepts/axis/index.html b/docs/zh/concepts/axis/index.html
new file mode 100644
index 0000000..02d7c0f
--- /dev/null
+++ b/docs/zh/concepts/axis/index.html
@@ -0,0 +1,41 @@
+<!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>echarts-handbook</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="ECharts Handbook"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="/favicon.ico"><link rel="preload" href="/echarts-handbook/_nuxt/7e05f0f.js" as="script"><link rel="preload" href="/echarts-handbook/_nuxt/js/8 [...]
+ </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>
+
+<iframe max-width="830" width="100%" height="400" src="https://gallery.echartsjs.com/view-lite.html?cid=xrJYBh__4z">
+</iframe>
+<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..d1ee161
--- /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>echarts-handbook</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="ECharts Handbook"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="/favicon.ico"><link rel="preload" href="/echarts-handbook/_nuxt/7e05f0f.js" as="script"><link rel="preload" href="/echarts-handbook/_nuxt/js/8 [...]
+ </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="./basics_configuration">快速上手</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%BA%E6%99%AF%E4%B8%80%EF%BC%9A%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="#%E5%9C%BA%E6%99%AF%E4%BA%8C%EF%BC%9A%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="#%E5%9C%BA%E6%99%AF%E4%B8%89%EF%BC%9A%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="#%E5%9C%BA%E6%99%AF%E5%9B%9B%EF%BC%9A%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%9C%BA%E6%99%AF%E4%BA%94%EF%BC%9A%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%BA%E6%99%AF%E4%B8%80%EF%BC%9A%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 中定 [...]
+ <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/coordinate/index.html b/docs/zh/concepts/coordinate/index.html
new file mode 100644
index 0000000..dd3cd6f
--- /dev/null
+++ b/docs/zh/concepts/coordinate/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>echarts-handbook</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="ECharts Handbook"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="/favicon.ico"><link rel="preload" href="/echarts-handbook/_nuxt/7e05f0f.js" as="script"><link rel="preload" href="/echarts-handbook/_nuxt/js/8 [...]
+ </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/concepts/data-transform/index.html b/docs/zh/concepts/data-transform/index.html
new file mode 100644
index 0000000..20dcd7e
--- /dev/null
+++ b/docs/zh/concepts/data-transform/index.html
@@ -0,0 +1,132 @@
+<!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>echarts-handbook</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="ECharts Handbook"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="/favicon.ico"><link rel="preload" href="/echarts-handbook/_nuxt/7e05f0f.js" as="script"><link rel="preload" href="/echarts-handbook/_nuxt/js/8 [...]
+ </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="~dataset">dataset</a>）来实现的. 我们可以设置 <a href="https://echarts.apache.org/option.html##dataset.transform" rel="nofollow noopener noreferrer" target="_blank">dataset.transform</a> 来表示，此 dataset 的数据，来自于此 transform 的结果。例如。</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>下面是上述例子的效果，三个饼图分别显示了 2011、2012、2013 年的数据。</p>
+<iframe width="100%" height="350" src="https://echarts.apache.org/examples/zh/view.html?c=data-transform-multiple-pie&reset=1&edit=1"></iframe>
+<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&edit=1&reset=1" 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 class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<br>
+<br>
+这是 filter 的另一个例子的效果：<br>
+<iframe width="100%" height="350" src="https://echarts.apache.org/examples/zh/view.html?c=data-transform-filter&reset=1&edit=1"></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&reset=1&edit=1"></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&reset=1&edit=1"></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..4606cb3
--- /dev/null
+++ b/docs/zh/concepts/dataset/index.html
@@ -0,0 +1,133 @@
+<!doctype html>
+<html data-n-head-ssr>
+ <head>
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
+ <title>echarts-handbook</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="ECharts Handbook"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="/favicon.ico"><link rel="preload" href="/echarts-handbook/_nuxt/7e05f0f.js" as="script"><link rel="preload" href="/echarts-handbook/_nuxt/js/8 [...]
+ </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 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>
+<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 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>
+<iframe width="100%" height="350" src="https://echarts.apache.org/examples/zh/view.html?c=dataset-simple0&edit=1&reset=1"></iframe>
+<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="#%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 class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<p><a href="https://echarts.apache.org/examples/zh/editor.html?c=dataset-series-layout-by&edit=1&reset=1" rel="nofollow noopener noreferrer" target="_blank">这个例子</a> 里给出了设置的效果。</p>
+<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 class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<p><a href="https://echarts.apache.org/examples/zh/editor.html?c=dataset-encode-simple0&edit=1&reset=1" rel="nofollow noopener noreferrer" target="_blank">这个例子</a> 里是上面设置的效果。</p>
+<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 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>问：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 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##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..7638e57
--- /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>echarts-handbook</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="ECharts Handbook"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="/favicon.ico"><link rel="preload" href="/echarts-handbook/_nuxt/7e05f0f.js" as="script"><link rel="preload" href="/echarts-handbook/_nuxt/js/8 [...]
+ </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>
+<p>从 ECharts 3 开始，事件名称对应 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 2 是通过 <code>myChart.component.tooltip.showTip</code> 这种形式调用相应的接口触发图表行为，入口很深，而且涉及到内部组件的组织。相对地，在 ECharts 3 里改为通过调用 <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>在讨论这个功能之前，我们需要先明确两种事件。<code>zrender 事件</code>和<code>echarts 事件</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>zrender 事件</code>与<code>echarts 事件</code>不同。前者是当鼠标在任何地方都会被触发，而后者是只有当鼠标在图形元素上时才能被触发。事实上，<code>echarts 事件</code> 是在 <code>zrender 事件</code> 的基础上实现的，也就是说，当一个 <code>zrender 事件</code> 在图形元素上被触发时，<code>echarts</code> 将触发一个 <code>echarts 事件</code> 给开发者。</p>
+<p>有了 <code>zrender事件</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 [...]
+ <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..08678a7
--- /dev/null
+++ b/docs/zh/concepts/legend/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>echarts-handbook</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="ECharts Handbook"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="/favicon.ico"><link rel="preload" href="/echarts-handbook/_nuxt/7e05f0f.js" as="script"><link rel="preload" href="/echarts-handbook/_nuxt/js/8 [...]
+ </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 href="#%E5%B8%83%E5%B1%80" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>布局</h2>
+<p>图例一般放在图表的右上角、也可以放在图表的底部、同一页面中的所有图例位置保持一致，可以横排对齐也可以纵排对齐。还要综合考虑整体的图表空间是适合哪种摆放方式。当图表纵向空间紧张或者内容区量过大的时候、建议摆放在图表的下方。下面是几种图例的摆放方式：</p>
+<img max-width="830" width="80%" height="80%" src="images/design/legend/charts_sign_img01.png">
+<img max-width="830" width="80%" height="80%" src="images/design/legend/charts_sign_img02.png">
+<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="#%E6%A0%B7%E5%BC%8F" 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-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 href="#%E4%BA%A4%E4%BA%92" 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-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%9B%BE%E4%BE%8B%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9" 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-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>
+<h2 id="示例"><a href="#%E7%A4%BA%E4%BE%8B" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>示例</h2>
+<iframe max-width="830" width="100%" height="400" src="https://gallery.echartsjs.com/preview.html?c=xkyleg0ydW&v=2">
+</iframe>
+<p>这里简要介绍了坐标轴相关的常用配置项及用法，更多关于坐标轴配置项及用法请移步<a href="https://echarts.apache.org/option.html#legend" 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/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/legen [...]
+ <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/options/index.html b/docs/zh/concepts/options/index.html
new file mode 100644
index 0000000..275019d
--- /dev/null
+++ b/docs/zh/concepts/options/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>echarts-handbook</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="ECharts Handbook"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="/favicon.ico"><link rel="preload" href="/echarts-handbook/_nuxt/7e05f0f.js" as="script"><link rel="preload" href="/echarts-handbook/_nuxt/js/8 [...]
+ </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/concepts/series/index.html b/docs/zh/concepts/series/index.html
new file mode 100644
index 0000000..f55df87
--- /dev/null
+++ b/docs/zh/concepts/series/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>echarts-handbook</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="ECharts Handbook"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="/favicon.ico"><link rel="preload" href="/echarts-handbook/_nuxt/7e05f0f.js" as="script"><link rel="preload" href="/echarts-handbook/_nuxt/js/8 [...]
+ </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/concepts/tooltip/index.html b/docs/zh/concepts/tooltip/index.html
new file mode 100644
index 0000000..ae52dc8
--- /dev/null
+++ b/docs/zh/concepts/tooltip/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>echarts-handbook</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="ECharts Handbook"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="/favicon.ico"><link rel="preload" href="/echarts-handbook/_nuxt/7e05f0f.js" as="script"><link rel="preload" href="/echarts-handbook/_nuxt/js/8 [...]
+ </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/concepts/visual-map/index.html b/docs/zh/concepts/visual-map/index.html
new file mode 100644
index 0000000..15ca6a1
--- /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>echarts-handbook</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="ECharts Handbook"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="/favicon.ico"><link rel="preload" href="/echarts-handbook/_nuxt/7e05f0f.js" as="script"><link rel="preload" href="/echarts-handbook/_nuxt/js/8 [...]
+ </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..139a134
--- /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>echarts-handbook</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="ECharts Handbook"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="/favicon.ico"><link rel="preload" href="/echarts-handbook/_nuxt/7e05f0f.js" as="script"><link rel="preload" href="/echarts-handbook/_nuxt/js/8 [...]
+ </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="获取-echarts"><a href="#%E8%8E%B7%E5%8F%96-echarts" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>获取 ECharts</h2>
+<p>ECharts 支持多种下载方式，可以在下一篇教程<a href="zh/basics_installation">安装</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_installation">安装</a>中了解更多信息。</p>
+</blockquote>
+<h2 id="引入-echarts"><a href="#%E5%BC%95%E5%85%A5-echarts" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>引入 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&reset=1&edit=1"></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-echarts">获取 ECharts</a></li><li class="toc2"><a href="/echarts-handbook/zh/get-started#%E5%BC%95%E5%85%A5-echarts">引入 ECharts</a></li><li class="toc2"><a href="/echarts-handbook/zh/get-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/index.html b/docs/zh/index.html
new file mode 100644
index 0000000..b2cdf29
--- /dev/null
+++ b/docs/zh/index.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<html data-n-head-ssr>
+ <head>
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
+ <title>echarts-handbook</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="ECharts Handbook"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="/favicon.ico"><link rel="preload" href="/echarts-handbook/_nuxt/7e05f0f.js" as="script"><link rel="preload" href="/echarts-handbook/_nuxt/js/8 [...]
+ </head>
+ <body>
+ <div data-server-rendered="true" id="__nuxt"><!----><div id="__layout"><div><nav role="navigation" class="navbar navbar-default navbar-fixed-top"><div class="container-fluid"><div class="navbar-header"><button type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href [...]
+ this is index
+</div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script defer src="/echarts-handbook/_nuxt/static/1622809025/zh/state.js"></script><script src="/echarts-handbook/_nuxt/7e05f0f.js" defer></script><script src="/echarts-handbook/_nuxt/js/e91b5c1469410df4d468.js" defer></script><script src="/echarts-handbook/_nuxt/js/83c16b72e84c2ff645c5.js" defer></script><script src="/echarts-handbook/_nuxt [...]
+ <script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
+ </body>
+</html>
diff --git a/docs/zh/meta/get-started/index.html b/docs/zh/meta/get-started/index.html
new file mode 100644
index 0000000..950aee2
--- /dev/null
+++ b/docs/zh/meta/get-started/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>echarts-handbook</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="ECharts Handbook"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="/favicon.ico"><link rel="preload" href="/echarts-handbook/_nuxt/7e05f0f.js" as="script"><link rel="preload" href="/echarts-handbook/_nuxt/js/8 [...]
+ </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.js</code> 或 <code>contents/en/posts.js</code>。</p>
+<p>markdown 文件名称小写，用 <code>-</code> 分割单词，不要用<code>_</code>分割。</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/tutorial-async"></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/get-started#%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/get-started#%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-handb [...]
+ <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