You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by gi...@apache.org on 2021/07/21 06:26:37 UTC
[echarts-handbook] 01/01: Deploying to gh-pages from @ apache/echarts-handbook@96323589a78501b55394d2207062865ade7b5d80 🚀
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 eefe7108bf86640af53e919f269fe6cb68c2225f
Author: pissang <sh...@baidu.com>
AuthorDate: Wed Jul 21 06:26:26 2021 +0000
Deploying to gh-pages from @ apache/echarts-handbook@96323589a78501b55394d2207062865ade7b5d80 🚀
---
docs/.nojekyll | 0
docs/200.html | 13 ++
docs/README.md | 11 ++
docs/_nuxt/8966669.js | 1 +
docs/_nuxt/LICENSES | 77 ++++++++++++
docs/_nuxt/content/db-b05df5b5.json | 1 +
docs/_nuxt/css/1c37eb7.css | 1 +
docs/_nuxt/css/3883253.css | 1 +
docs/_nuxt/css/992028c.css | 4 +
docs/_nuxt/css/ecc35e1.css | 1 +
docs/_nuxt/js/040420a6452b8b7e0581.js | 1 +
docs/_nuxt/js/3c05fe16c5aef529de04.js | 1 +
docs/_nuxt/js/4e1d6e22b61114e5daf3.js | 1 +
docs/_nuxt/js/55fb2f738a4136fa6592.js | 1 +
docs/_nuxt/js/7105ede7a7829bd80eb5.js | 1 +
docs/_nuxt/js/7d75436a2b3703480899.js | 1 +
docs/_nuxt/js/8fdd088535c90da68b9f.js | 2 +
docs/_nuxt/js/a54892415bea609919c5.js | 1 +
docs/_nuxt/js/c09d8d4747d3dcbf43fd.js | 2 +
docs/_nuxt/js/e207ecd53819d2e6f044.js | 2 +
docs/_nuxt/static/1626848782/manifest.js | 1 +
docs/_nuxt/static/1626848782/payload.js | 1 +
docs/_nuxt/static/1626848782/state.js | 1 +
.../1626848782/zh/basics/download/payload.js | 1 +
.../static/1626848782/zh/basics/download/state.js | 1 +
.../static/1626848782/zh/basics/help/payload.js | 1 +
.../static/1626848782/zh/basics/help/state.js | 1 +
.../static/1626848782/zh/basics/import/payload.js | 1 +
.../static/1626848782/zh/basics/import/state.js | 1 +
.../1626848782/zh/basics/inspiration/payload.js | 1 +
.../1626848782/zh/basics/inspiration/state.js | 1 +
.../1626848782/zh/best-practice/aria/payload.js | 1 +
.../1626848782/zh/best-practice/aria/state.js | 1 +
.../zh/best-practice/canvas-vs-svg/payload.js | 1 +
.../zh/best-practice/canvas-vs-svg/state.js | 1 +
.../static/1626848782/zh/concepts/axis/payload.js | 1 +
.../static/1626848782/zh/concepts/axis/state.js | 1 +
.../1626848782/zh/concepts/chart-size/payload.js | 1 +
.../1626848782/zh/concepts/chart-size/state.js | 1 +
.../zh/concepts/data-transform/payload.js | 1 +
.../1626848782/zh/concepts/data-transform/state.js | 1 +
.../1626848782/zh/concepts/dataset/payload.js | 1 +
.../static/1626848782/zh/concepts/dataset/state.js | 1 +
.../static/1626848782/zh/concepts/event/payload.js | 1 +
.../static/1626848782/zh/concepts/event/state.js | 1 +
.../1626848782/zh/concepts/legend/payload.js | 1 +
.../static/1626848782/zh/concepts/legend/state.js | 1 +
.../static/1626848782/zh/concepts/style/payload.js | 1 +
.../static/1626848782/zh/concepts/style/state.js | 1 +
.../1626848782/zh/concepts/visual-map/payload.js | 1 +
.../1626848782/zh/concepts/visual-map/state.js | 1 +
.../static/1626848782/zh/get-started/payload.js | 1 +
.../static/1626848782/zh/get-started/state.js | 1 +
.../1626848782/zh/meta/get-started/payload.js | 1 +
.../static/1626848782/zh/meta/get-started/state.js | 1 +
docs/_nuxt/static/1626848782/zh/payload.js | 1 +
docs/_nuxt/static/1626848782/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/images/feature-v5/dashboard-pointer.png | Bin 0 -> 238230 bytes
docs/images/feature-v5/dataZoom.png | Bin 0 -> 14459 bytes
docs/images/feature-v5/dirty-rect.gif | Bin 0 -> 1618036 bytes
docs/images/feature-v5/dirty-rect.png | Bin 0 -> 802179 bytes
docs/images/feature-v5/echarts-5-en.png | Bin 0 -> 24363 bytes
docs/images/feature-v5/echarts-5.png | Bin 0 -> 24106 bytes
docs/images/feature-v5/gauge-pointer.png | Bin 0 -> 238230 bytes
docs/images/feature-v5/new-theme-dark.png | Bin 0 -> 101643 bytes
docs/images/feature-v5/new-theme-light.png | Bin 0 -> 99276 bytes
docs/images/feature-v5/new-tooltip-2 copy.png | Bin 0 -> 52109 bytes
docs/images/feature-v5/new-tooltip-2.png | Bin 0 -> 173904 bytes
docs/images/feature-v5/new-tooltip.png | Bin 0 -> 26152 bytes
docs/images/feature-v5/new-tooltip2.png | Bin 0 -> 52109 bytes
docs/images/feature-v5/pie-label copy.png | Bin 0 -> 56479 bytes
docs/images/feature-v5/pie-label-2.png | Bin 0 -> 53964 bytes
docs/images/feature-v5/pie-label.png | Bin 0 -> 56479 bytes
docs/images/feature-v5/theme-color.png | Bin 0 -> 543699 bytes
docs/images/feature-v5/time-axis-2.png | Bin 0 -> 55882 bytes
docs/images/feature-v5/time-axis.png | Bin 0 -> 69868 bytes
docs/images/feature-v5/time-axis2.png | Bin 0 -> 55620 bytes
docs/images/feature-v5/timeline.png | Bin 0 -> 23411 bytes
docs/index.html | 15 +++
docs/zh/basics/download/index.html | 31 +++++
docs/zh/basics/help/index.html | 36 ++++++
docs/zh/basics/import/index.html | 29 +++++
docs/zh/basics/inspiration/index.html | 19 +++
docs/zh/best-practice/aria/index.html | 30 +++++
docs/zh/best-practice/canvas-vs-svg/index.html | 39 ++++++
docs/zh/concepts/axis/index.html | 39 ++++++
docs/zh/concepts/chart-size/index.html | 42 +++++++
docs/zh/concepts/data-transform/index.html | 131 +++++++++++++++++++++
docs/zh/concepts/dataset/index.html | 130 ++++++++++++++++++++
docs/zh/concepts/event/index.html | 58 +++++++++
docs/zh/concepts/legend/index.html | 35 ++++++
docs/zh/concepts/style/index.html | 52 ++++++++
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 +++++++++++++++++
126 files changed, 1048 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..602ac6f
--- /dev/null
+++ b/docs/200.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html>
+ <head>
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="1" charset="utf-8"><meta data-n-head="1" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="1" data-hid="description" name="description" content="ECharts Handbook"><link data-n-head="1" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><base href="/echarts-handbook/"><link rel="preload" href="/echarts-handbook/_nuxt/8966669. [...]
+ <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/8966669.js"></script><script src="/echarts-handbook/_nuxt/js/e207ecd53819d2e6f044.js"></script><script src="/echarts-handbook/_nuxt/js/c09d8d4747d3dcbf43fd.js"></script><script src="/echarts-handbook/_nuxt/js/55fb2f738a4136fa6592.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/8966669.js b/docs/_nuxt/8966669.js
new file mode 100644
index 0000000..4d57651
--- /dev/null
+++ b/docs/_nuxt/8966669.js
@@ -0,0 +1 @@
+!function(e){function t(data){for(var t,n,o=data[0],d=data[1],f=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 d)Object.prototype.hasOwnProperty.call(d,t)&&(e[t]=d[t]);for(m&&m(data);h.length;)h.shift()();return l.push.apply(l,f||[]),r()}function r(){for(var e,i=0;i<l.length;i++){for(var t=l[i],r=!0,n=1;n<t.length;n++){var o=t[n];0!==c[o]&&(r=!1)}r&&(l.splice(i--,1),e=d(d.s=t[0]))}return e}var n={},o={7:0},c={7:0},l [...]
\ No newline at end of file
diff --git a/docs/_nuxt/LICENSES b/docs/_nuxt/LICENSES
new file mode 100644
index 0000000..19ad328
--- /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-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.
+ */
+
+
+/*!
+ * vue-router v3.5.1
+ * (c) 2021 Evan You
+ * @license MIT
+ */
+
+/*!
+ * JavaScript Cookie v2.2.1
+ * https://github.com/js-cookie/js-cookie
+ *
+ * Copyright 2006, 2015 Klaus Hartl & Fagner Brack
+ * Released under the MIT license
+ */
+
+/*!
+ * Vue.js v2.6.12
+ * (c) 2014-2020 Evan You
+ * Released under the MIT License.
+ */
+
+/*!
+ * cookie
+ * Copyright(c) 2012-2014 Roman Shtylman
+ * Copyright(c) 2015 Douglas Christopher Wilson
+ * MIT Licensed
+ */
+
+/*!
+ * vuex v3.6.2
+ * (c) 2021 Evan You
+ * @license MIT
+ */
diff --git a/docs/_nuxt/content/db-b05df5b5.json b/docs/_nuxt/content/db-b05df5b5.json
new file mode 100644
index 0000000..8ee283b
--- /dev/null
+++ b/docs/_nuxt/content/db-b05df5b5.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-07-21T06:24:40.567Z","updatedAt":"2021-07-21T06:24:40.567Z","meta":{"version":0,"revisio [...]
\ No newline at end of file
diff --git a/docs/_nuxt/css/1c37eb7.css b/docs/_nuxt/css/1c37eb7.css
new file mode 100644
index 0000000..193b900
--- /dev/null
+++ b/docs/_nuxt/css/1c37eb7.css
@@ -0,0 +1 @@
+.prism-editor-wrapper{width:100%;height:100%;display:flex;align-items:flex-start;overflow:auto;-o-tab-size:1.5em;tab-size:1.5em;-moz-tab-size:1.5em}@media (-ms-high-contrast:active),(-ms-high-contrast:none){.prism-editor-wrapper .prism-editor__textarea{color:transparent!important}.prism-editor-wrapper .prism-editor__textarea::-moz-selection{background-color:#accef7!important;color:transparent!important}.prism-editor-wrapper .prism-editor__textarea::selection{background-color:#accef7!impo [...]
\ No newline at end of file
diff --git a/docs/_nuxt/css/3883253.css b/docs/_nuxt/css/3883253.css
new file mode 100644
index 0000000..281be17
--- /dev/null
+++ b/docs/_nuxt/css/3883253.css
@@ -0,0 +1 @@
+.page-content .nav-item{cursor:pointer}.page-content .nav-item .nav-link{--tw-text-opacity:1;color:rgba(100,116,139,var(--tw-text-opacity))}.page-content .nav-item .title{padding:2px 6px}.page-content .nav-item.actived .nav-link{color:#5470c6}.page-content .nav-item .nav-link:hover>.title{background:#efefef;border-radius:3px}.page-content .nav-item .glyphicon{padding:5px;color:#ccc;cursor:pointer;transform:scale(.8);top:2px;left:-5px}.bd-sidebar{padding:10px;position:sticky;z-index:1000; [...]
\ No newline at end of file
diff --git a/docs/_nuxt/css/992028c.css b/docs/_nuxt/css/992028c.css
new file mode 100644
index 0000000..74cccc2
--- /dev/null
+++ b/docs/_nuxt/css/992028c.css
@@ -0,0 +1,4 @@
+.__nuxt-error-page{padding:1rem;background:#f7f8fb;color:#47494e;text-align:center;display:flex;justify-content:center;align-items:center;flex-direction:column;font-family:sans-serif;font-weight:100!important;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;position:absolute;top:0;left:0;right:0;bottom:0}.__nuxt-error-page .error{max-width:450px}.__nuxt-error-page .title{font-size:1.5rem;margin-top:15px;color:#47494e;margin-bottom:8px}.__nuxt-err [...]
+/*! tailwindcss v2.1.3 | MIT License | https://tailwindcss.com*/
+
+/*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */html{-moz-tab-size:4;-o-tab-size:4;tab-size:4;line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji}hr{height:0;color:inherit}abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monos [...]
\ No newline at end of file
diff --git a/docs/_nuxt/css/ecc35e1.css b/docs/_nuxt/css/ecc35e1.css
new file mode 100644
index 0000000..03262c0
--- /dev/null
+++ b/docs/_nuxt/css/ecc35e1.css
@@ -0,0 +1 @@
+.md-alert[data-v-a47f983e]{border-radius:.5rem;border-left-width:4px}.md-alert-info[data-v-a47f983e]{--tw-bg-opacity:1;background-color:rgba(219,234,254,var(--tw-bg-opacity));--tw-border-opacity:1;border-color:rgba(96,165,250,var(--tw-border-opacity))}.md-alert-info code[data-v-a47f983e]{--tw-bg-opacity:1;background-color:rgba(191,219,254,var(--tw-bg-opacity));border-width:0;--tw-shadow:0 0 transparent;box-shadow:var(--tw-ring-offset-shadow,0 0 transparent),var(--tw-ring-shadow,0 0 trans [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/040420a6452b8b7e0581.js b/docs/_nuxt/js/040420a6452b8b7e0581.js
new file mode 100644
index 0000000..723c0c8
--- /dev/null
+++ b/docs/_nuxt/js/040420a6452b8b7e0581.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[10],{258: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/3c05fe16c5aef529de04.js b/docs/_nuxt/js/3c05fe16c5aef529de04.js
new file mode 100644
index 0000000..accd78e
--- /dev/null
+++ b/docs/_nuxt/js/3c05fe16c5aef529de04.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[0],{204: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){t.exports={}},215:function(t,n,e){"use strict";var c=e(0),o=e(203),r=(e(153),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/4e1d6e22b61114e5daf3.js b/docs/_nuxt/js/4e1d6e22b61114e5daf3.js
new file mode 100644
index 0000000..c188537
--- /dev/null
+++ b/docs/_nuxt/js/4e1d6e22b61114e5daf3.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[5],{260:function(n,e,t){"use strict";t.r(e);var r=t(2),c=(t(20),{asyncData:function(){return Object(r.a)(regeneratorRuntime.mark((function n(){return regeneratorRuntime.wrap((function(n){for(;;)switch(n.prev=n.next){case 0:case"end":return n.stop()}}),n)})))()}}),o=t(8),component=Object(o.a)(c,(function(){var n=this,e=n.$createElement;return(n._self._c||e)("div",[n._v("\n this is index\n")])}),[],!1,null,null,null);e.default=component [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/55fb2f738a4136fa6592.js b/docs/_nuxt/js/55fb2f738a4136fa6592.js
new file mode 100644
index 0000000..8de14a7
--- /dev/null
+++ b/docs/_nuxt/js/55fb2f738a4136fa6592.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/7105ede7a7829bd80eb5.js b/docs/_nuxt/js/7105ede7a7829bd80eb5.js
new file mode 100644
index 0000000..5e575a0
--- /dev/null
+++ b/docs/_nuxt/js/7105ede7a7829bd80eb5.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[4],{261:function(t,e,n){"use strict";n.r(e);var r=n(2),c=(n(20),n(215),{components:{Contributors:n(216).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.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/7d75436a2b3703480899.js b/docs/_nuxt/js/7d75436a2b3703480899.js
new file mode 100644
index 0000000..30f96b1
--- /dev/null
+++ b/docs/_nuxt/js/7d75436a2b3703480899.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[9],{247:function(e,t,n){var r=n(248),o=n(249),l=n(250),h=n(251),c=n(252);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/8fdd088535c90da68b9f.js b/docs/_nuxt/js/8fdd088535c90da68b9f.js
new file mode 100644
index 0000000..ee42ad2
--- /dev/null
+++ b/docs/_nuxt/js/8fdd088535c90da68b9f.js
@@ -0,0 +1,2 @@
+/*! For license information please see ../LICENSES */
+(window.webpackJsonp=window.webpackJsonp||[]).push([[1],{203: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/a54892415bea609919c5.js b/docs/_nuxt/js/a54892415bea609919c5.js
new file mode 100644
index 0000000..22fe617
--- /dev/null
+++ b/docs/_nuxt/js/a54892415bea609919c5.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[6],{262:function(t,e,n){"use strict";n.r(e);var r=n(2),c=(n(20),n(215),{components:{Contributors:n(216).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/c09d8d4747d3dcbf43fd.js b/docs/_nuxt/js/c09d8d4747d3dcbf43fd.js
new file mode 100644
index 0000000..b4e0fa9
--- /dev/null
+++ b/docs/_nuxt/js/c09d8d4747d3dcbf43fd.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/e207ecd53819d2e6f044.js b/docs/_nuxt/js/e207ecd53819d2e6f044.js
new file mode 100644
index 0000000..55cddac
--- /dev/null
+++ b/docs/_nuxt/js/e207ecd53819d2e6f044.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/static/1626848782/manifest.js b/docs/_nuxt/static/1626848782/manifest.js
new file mode 100644
index 0000000..1c56d29
--- /dev/null
+++ b/docs/_nuxt/static/1626848782/manifest.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("manifest.js", {routes:["\u002F","\u002Fzh","\u002Fzh\u002Fget-started","\u002Fzh\u002Fbasics\u002Fdownload","\u002Fzh\u002Fconcepts\u002Fchart-size","\u002Fzh\u002Fmeta\u002Fget-started","\u002Fzh\u002Fbest-practice\u002Fcanvas-vs-svg","\u002Fzh\u002Fbasics\u002Fimport","\u002Fzh\u002Fbasics\u002Fhelp","\u002Fzh\u002Fbasics\u002Finspiration","\u002Fzh\u002Fconcepts\u002Fstyle","\u002Fzh\u002Fconcepts\u002Fdataset","\u002Fzh\u002Fconcepts\u002Fdata-transform","\u002Fzh\u00 [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1626848782/payload.js b/docs/_nuxt/static/1626848782/payload.js
new file mode 100644
index 0000000..e4122ae
--- /dev/null
+++ b/docs/_nuxt/static/1626848782/payload.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("/", {data:[{}],fetch:{},mutations:[]});
\ No newline at end of file
diff --git a/docs/_nuxt/static/1626848782/state.js b/docs/_nuxt/static/1626848782/state.js
new file mode 100644
index 0000000..724c383
--- /dev/null
+++ b/docs/_nuxt/static/1626848782/state.js
@@ -0,0 +1 @@
+window.__NUXT__=(function(a,b,c,d,e,f,g,h){return {staticAssetsBase:"\u002Fecharts-handbook\u002F_nuxt\u002Fstatic\u002F1626848782",layout:"default",error:c,state:{filled:b,docVersion:d,ghVersion:d,visibleAffix:b,locale:"zh",lang:{},menu:{},homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:e},{title:"入门篇",dir:"basics",children:[{title:"获取 ECharts",dir:"download"},{title:"在项目中引入 ECharts",dir:"import"},{title:"资源列表",dir:"resource",draft:a},{title:"获取灵感",dir:"inspiration"},{t [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1626848782/zh/basics/download/payload.js b/docs/_nuxt/static/1626848782/zh/basics/download/payload.js
new file mode 100644
index 0000000..0d85bbe
--- /dev/null
+++ b/docs/_nuxt/static/1626848782/zh/basics/download/payload.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("/zh/basics/download", (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C){return {data:[{article:{slug:"download",toc:[{id:l,depth:2,text:l},{id:w,depth:m,text:t},{id:x,depth:m,text:u},{id:y,depth:m,text:v},{id:k,depth:m,text:k}],body:{type:"root",children:[{type:b,tag:"h1",props:{id:"获取-apache-echarts"},children:[{type:b,tag:d,props:{href:"#%E8%8E%B7%E5%8F%96-apache-echarts",ariaHidden:e,tabIndex:f},children:[{type:b,tag:g,props:{className:[h,i]},childre [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1626848782/zh/basics/download/state.js b/docs/_nuxt/static/1626848782/zh/basics/download/state.js
new file mode 100644
index 0000000..6d6b629
--- /dev/null
+++ b/docs/_nuxt/static/1626848782/zh/basics/download/state.js
@@ -0,0 +1 @@
+window.__NUXT__=(function(a,b,c,d,e,f,g,h){return {staticAssetsBase:"\u002Fecharts-handbook\u002F_nuxt\u002Fstatic\u002F1626848782",layout:"default",error:c,state:{filled:b,docVersion:d,ghVersion:d,visibleAffix:b,locale:"zh",lang:{},menu:{},homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:e},{title:"入门篇",dir:"basics",children:[{title:"获取 ECharts",dir:"download"},{title:"在项目中引入 ECharts",dir:"import"},{title:"资源列表",dir:"resource",draft:a},{title:"获取灵感",dir:"inspiration"},{t [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1626848782/zh/basics/help/payload.js b/docs/_nuxt/static/1626848782/zh/basics/help/payload.js
new file mode 100644
index 0000000..b0f9ee1
--- /dev/null
+++ b/docs/_nuxt/static/1626848782/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/1626848782/zh/basics/help/state.js b/docs/_nuxt/static/1626848782/zh/basics/help/state.js
new file mode 100644
index 0000000..1a698d9
--- /dev/null
+++ b/docs/_nuxt/static/1626848782/zh/basics/help/state.js
@@ -0,0 +1 @@
+window.__NUXT__=(function(a,b,c,d,e,f,g,h){return {staticAssetsBase:"\u002Fecharts-handbook\u002F_nuxt\u002Fstatic\u002F1626848782",layout:"default",error:c,state:{filled:b,docVersion:d,ghVersion:d,visibleAffix:b,locale:"zh",lang:{},menu:{},homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:e},{title:"入门篇",dir:"basics",children:[{title:"获取 ECharts",dir:"download"},{title:"在项目中引入 ECharts",dir:"import"},{title:"资源列表",dir:"resource",draft:a},{title:"获取灵感",dir:"inspiration"},{t [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1626848782/zh/basics/import/payload.js b/docs/_nuxt/static/1626848782/zh/basics/import/payload.js
new file mode 100644
index 0000000..2a597f1
--- /dev/null
+++ b/docs/_nuxt/static/1626848782/zh/basics/import/payload.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("/zh/basics/import", (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C){return {data:[{article:{slug:"import",toc:[{id:r,depth:m,text:s},{id:t,depth:m,text:u},{id:v,depth:m,text:w},{id:x,depth:m,text:y}],body:{type:"root",children:[{type:b,tag:"h1",props:{id:"在项目中引入-apache-echarts"},children:[{type:b,tag:g,props:{ariaHidden:h,href:"#%E5%9C%A8%E9%A1%B9%E7%9B%AE%E4%B8%AD%E5%BC%95%E5%85%A5-apache-echarts",tabIndex:i},children:[{type:b,tag:j,props:{className: [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1626848782/zh/basics/import/state.js b/docs/_nuxt/static/1626848782/zh/basics/import/state.js
new file mode 100644
index 0000000..6972ea2
--- /dev/null
+++ b/docs/_nuxt/static/1626848782/zh/basics/import/state.js
@@ -0,0 +1 @@
+window.__NUXT__=(function(a,b,c,d,e,f,g,h){return {staticAssetsBase:"\u002Fecharts-handbook\u002F_nuxt\u002Fstatic\u002F1626848782",layout:"default",error:c,state:{filled:b,docVersion:d,ghVersion:d,visibleAffix:b,locale:"zh",lang:{},menu:{},homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:e},{title:"入门篇",dir:"basics",children:[{title:"获取 ECharts",dir:"download"},{title:"在项目中引入 ECharts",dir:"import"},{title:"资源列表",dir:"resource",draft:a},{title:"获取灵感",dir:"inspiration"},{t [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1626848782/zh/basics/inspiration/payload.js b/docs/_nuxt/static/1626848782/zh/basics/inspiration/payload.js
new file mode 100644
index 0000000..4145838
--- /dev/null
+++ b/docs/_nuxt/static/1626848782/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/1626848782/zh/basics/inspiration/state.js b/docs/_nuxt/static/1626848782/zh/basics/inspiration/state.js
new file mode 100644
index 0000000..9115228
--- /dev/null
+++ b/docs/_nuxt/static/1626848782/zh/basics/inspiration/state.js
@@ -0,0 +1 @@
+window.__NUXT__=(function(a,b,c,d,e,f,g,h){return {staticAssetsBase:"\u002Fecharts-handbook\u002F_nuxt\u002Fstatic\u002F1626848782",layout:"default",error:c,state:{filled:b,docVersion:d,ghVersion:d,visibleAffix:b,locale:"zh",lang:{},menu:{},homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:e},{title:"入门篇",dir:"basics",children:[{title:"获取 ECharts",dir:"download"},{title:"在项目中引入 ECharts",dir:"import"},{title:"资源列表",dir:"resource",draft:a},{title:"获取灵感",dir:"inspiration"},{t [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1626848782/zh/best-practice/aria/payload.js b/docs/_nuxt/static/1626848782/zh/best-practice/aria/payload.js
new file mode 100644
index 0000000..d4f61d4
--- /dev/null
+++ b/docs/_nuxt/static/1626848782/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/1626848782/zh/best-practice/aria/state.js b/docs/_nuxt/static/1626848782/zh/best-practice/aria/state.js
new file mode 100644
index 0000000..7870435
--- /dev/null
+++ b/docs/_nuxt/static/1626848782/zh/best-practice/aria/state.js
@@ -0,0 +1 @@
+window.__NUXT__=(function(a,b,c,d,e,f,g,h){return {staticAssetsBase:"\u002Fecharts-handbook\u002F_nuxt\u002Fstatic\u002F1626848782",layout:"default",error:c,state:{filled:b,docVersion:d,ghVersion:d,visibleAffix:b,locale:"zh",lang:{},menu:{},homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:e},{title:"入门篇",dir:"basics",children:[{title:"获取 ECharts",dir:"download"},{title:"在项目中引入 ECharts",dir:"import"},{title:"资源列表",dir:"resource",draft:a},{title:"获取灵感",dir:"inspiration"},{t [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1626848782/zh/best-practice/canvas-vs-svg/payload.js b/docs/_nuxt/static/1626848782/zh/best-practice/canvas-vs-svg/payload.js
new file mode 100644
index 0000000..4e62116
--- /dev/null
+++ b/docs/_nuxt/static/1626848782/zh/best-practice/canvas-vs-svg/payload.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("/zh/best-practice/canvas-vs-svg", (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A){return {data:[{article:{slug:"canvas-vs-svg",toc:[{id:k,depth:x,text:k},{id:l,depth:x,text:l}],body:{type:"root",children:[{type:b,tag:"h1",props:{id:"使用-canvas-或者-svg-渲染"},children:[{type:b,tag:d,props:{href:"#%E4%BD%BF%E7%94%A8-canvas-%E6%88%96%E8%80%85-svg-%E6%B8%B2%E6%9F%93",ariaHidden:n,tabIndex:o},children:[{type:b,tag:p,props:{className:[q,r]},children:[]}]},{type:a,v [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1626848782/zh/best-practice/canvas-vs-svg/state.js b/docs/_nuxt/static/1626848782/zh/best-practice/canvas-vs-svg/state.js
new file mode 100644
index 0000000..e63394b
--- /dev/null
+++ b/docs/_nuxt/static/1626848782/zh/best-practice/canvas-vs-svg/state.js
@@ -0,0 +1 @@
+window.__NUXT__=(function(a,b,c,d,e,f,g,h){return {staticAssetsBase:"\u002Fecharts-handbook\u002F_nuxt\u002Fstatic\u002F1626848782",layout:"default",error:c,state:{filled:b,docVersion:d,ghVersion:d,visibleAffix:b,locale:"zh",lang:{},menu:{},homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:e},{title:"入门篇",dir:"basics",children:[{title:"获取 ECharts",dir:"download"},{title:"在项目中引入 ECharts",dir:"import"},{title:"资源列表",dir:"resource",draft:a},{title:"获取灵感",dir:"inspiration"},{t [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1626848782/zh/concepts/axis/payload.js b/docs/_nuxt/static/1626848782/zh/concepts/axis/payload.js
new file mode 100644
index 0000000..3e67fc3
--- /dev/null
+++ b/docs/_nuxt/static/1626848782/zh/concepts/axis/payload.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("/zh/concepts/axis", (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E){return {data:[{article:{slug:"axis",toc:[{id:A,depth:p,text:B},{id:v,depth:p,text:v},{id:w,depth:p,text:w},{id:x,depth:p,text:x},{id:y,depth:p,text:y}],body:{type:"root",children:[{type:b,tag:"h1",props:{id:C},children:[{type:b,tag:e,props:{href:"#%E5%9D%90%E6%A0%87%E8%BD%B4",ariaHidden:k,tabIndex:l},children:[{type:b,tag:m,props:{className:[n,o]},children:[]}]},{type:a,value:C}]} [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1626848782/zh/concepts/axis/state.js b/docs/_nuxt/static/1626848782/zh/concepts/axis/state.js
new file mode 100644
index 0000000..acdac85
--- /dev/null
+++ b/docs/_nuxt/static/1626848782/zh/concepts/axis/state.js
@@ -0,0 +1 @@
+window.__NUXT__=(function(a,b,c,d,e,f,g,h){return {staticAssetsBase:"\u002Fecharts-handbook\u002F_nuxt\u002Fstatic\u002F1626848782",layout:"default",error:c,state:{filled:b,docVersion:d,ghVersion:d,visibleAffix:b,locale:"zh",lang:{},menu:{},homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:e},{title:"入门篇",dir:"basics",children:[{title:"获取 ECharts",dir:"download"},{title:"在项目中引入 ECharts",dir:"import"},{title:"资源列表",dir:"resource",draft:a},{title:"获取灵感",dir:"inspiration"},{t [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1626848782/zh/concepts/chart-size/payload.js b/docs/_nuxt/static/1626848782/zh/concepts/chart-size/payload.js
new file mode 100644
index 0000000..5c00750
--- /dev/null
+++ b/docs/_nuxt/static/1626848782/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/1626848782/zh/concepts/chart-size/state.js b/docs/_nuxt/static/1626848782/zh/concepts/chart-size/state.js
new file mode 100644
index 0000000..f937bbe
--- /dev/null
+++ b/docs/_nuxt/static/1626848782/zh/concepts/chart-size/state.js
@@ -0,0 +1 @@
+window.__NUXT__=(function(a,b,c,d,e,f,g,h){return {staticAssetsBase:"\u002Fecharts-handbook\u002F_nuxt\u002Fstatic\u002F1626848782",layout:"default",error:c,state:{filled:b,docVersion:d,ghVersion:d,visibleAffix:b,locale:"zh",lang:{},menu:{},homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:e},{title:"入门篇",dir:"basics",children:[{title:"获取 ECharts",dir:"download"},{title:"在项目中引入 ECharts",dir:"import"},{title:"资源列表",dir:"resource",draft:a},{title:"获取灵感",dir:"inspiration"},{t [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1626848782/zh/concepts/data-transform/payload.js b/docs/_nuxt/static/1626848782/zh/concepts/data-transform/payload.js
new file mode 100644
index 0000000..46baf1d
--- /dev/null
+++ b/docs/_nuxt/static/1626848782/zh/concepts/data-transform/payload.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("/zh/concepts/data-transform", (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,_,$,aa,ab,ac,ad,ae,af,ag,ah,ai,aj,ak,al,am){return {data:[{article:{slug:"data-transform",toc:[{id:E,depth:C,text:E},{id:F,depth:C,text:F},{id: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% [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1626848782/zh/concepts/data-transform/state.js b/docs/_nuxt/static/1626848782/zh/concepts/data-transform/state.js
new file mode 100644
index 0000000..f1a429f
--- /dev/null
+++ b/docs/_nuxt/static/1626848782/zh/concepts/data-transform/state.js
@@ -0,0 +1 @@
+window.__NUXT__=(function(a,b,c,d,e,f,g,h){return {staticAssetsBase:"\u002Fecharts-handbook\u002F_nuxt\u002Fstatic\u002F1626848782",layout:"default",error:c,state:{filled:b,docVersion:d,ghVersion:d,visibleAffix:b,locale:"zh",lang:{},menu:{},homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:e},{title:"入门篇",dir:"basics",children:[{title:"获取 ECharts",dir:"download"},{title:"在项目中引入 ECharts",dir:"import"},{title:"资源列表",dir:"resource",draft:a},{title:"获取灵感",dir:"inspiration"},{t [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1626848782/zh/concepts/dataset/payload.js b/docs/_nuxt/static/1626848782/zh/concepts/dataset/payload.js
new file mode 100644
index 0000000..7f22e86
--- /dev/null
+++ b/docs/_nuxt/static/1626848782/zh/concepts/dataset/payload.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("/zh/concepts/dataset", (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,_,$,aa,ab,ac,ad,ae,af,ag,ah,ai,aj,ak,al,am,an,ao,ap,aq,ar,as,at){return {data:[{article:{slug:y,toc:[{id:I,depth:u,text:I},{id:J,depth:u,text:J},{id:K,depth:u,text:K},{id:V,depth:u,text:W},{id:X,depth:u,text:Y},{id:Z,depth:u,text:_},{id:$,depth:u,text:aa},{id:ab,depth:u,text:ac},{id:L,depth:u,text:L},{id:M,depth:u,text:M},{id:ad,depth:u, [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1626848782/zh/concepts/dataset/state.js b/docs/_nuxt/static/1626848782/zh/concepts/dataset/state.js
new file mode 100644
index 0000000..a2e7ea7
--- /dev/null
+++ b/docs/_nuxt/static/1626848782/zh/concepts/dataset/state.js
@@ -0,0 +1 @@
+window.__NUXT__=(function(a,b,c,d,e,f,g,h){return {staticAssetsBase:"\u002Fecharts-handbook\u002F_nuxt\u002Fstatic\u002F1626848782",layout:"default",error:c,state:{filled:b,docVersion:d,ghVersion:d,visibleAffix:b,locale:"zh",lang:{},menu:{},homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:e},{title:"入门篇",dir:"basics",children:[{title:"获取 ECharts",dir:"download"},{title:"在项目中引入 ECharts",dir:"import"},{title:"资源列表",dir:"resource",draft:a},{title:"获取灵感",dir:"inspiration"},{t [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1626848782/zh/concepts/event/payload.js b/docs/_nuxt/static/1626848782/zh/concepts/event/payload.js
new file mode 100644
index 0000000..684613e
--- /dev/null
+++ b/docs/_nuxt/static/1626848782/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/1626848782/zh/concepts/event/state.js b/docs/_nuxt/static/1626848782/zh/concepts/event/state.js
new file mode 100644
index 0000000..cb1f34c
--- /dev/null
+++ b/docs/_nuxt/static/1626848782/zh/concepts/event/state.js
@@ -0,0 +1 @@
+window.__NUXT__=(function(a,b,c,d,e,f,g,h){return {staticAssetsBase:"\u002Fecharts-handbook\u002F_nuxt\u002Fstatic\u002F1626848782",layout:"default",error:c,state:{filled:b,docVersion:d,ghVersion:d,visibleAffix:b,locale:"zh",lang:{},menu:{},homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:e},{title:"入门篇",dir:"basics",children:[{title:"获取 ECharts",dir:"download"},{title:"在项目中引入 ECharts",dir:"import"},{title:"资源列表",dir:"resource",draft:a},{title:"获取灵感",dir:"inspiration"},{t [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1626848782/zh/concepts/legend/payload.js b/docs/_nuxt/static/1626848782/zh/concepts/legend/payload.js
new file mode 100644
index 0000000..6bb1b95
--- /dev/null
+++ b/docs/_nuxt/static/1626848782/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){return {data:[{article:{slug:"legend",toc:[{id:q,depth:r,text:q},{id:s,depth:r,text:s},{id:t,depth:r,text:t},{id:u,depth:r,text:u}],body:{type:"root",children:[{type:b,tag:"h1",props:{id:y},children:[{type:b,tag:k,props:{ariaHidden:l,href:"#%E5%9B%BE%E4%BE%8B",tabIndex:m},children:[{type:b,tag:n,props:{className:[o,p]},children:[]}]},{type:a,value:y}]},{type:a,value:c},{type:b,tag:e,props [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1626848782/zh/concepts/legend/state.js b/docs/_nuxt/static/1626848782/zh/concepts/legend/state.js
new file mode 100644
index 0000000..c41182c
--- /dev/null
+++ b/docs/_nuxt/static/1626848782/zh/concepts/legend/state.js
@@ -0,0 +1 @@
+window.__NUXT__=(function(a,b,c,d,e,f,g,h){return {staticAssetsBase:"\u002Fecharts-handbook\u002F_nuxt\u002Fstatic\u002F1626848782",layout:"default",error:c,state:{filled:b,docVersion:d,ghVersion:d,visibleAffix:b,locale:"zh",lang:{},menu:{},homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:e},{title:"入门篇",dir:"basics",children:[{title:"获取 ECharts",dir:"download"},{title:"在项目中引入 ECharts",dir:"import"},{title:"资源列表",dir:"resource",draft:a},{title:"获取灵感",dir:"inspiration"},{t [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1626848782/zh/concepts/style/payload.js b/docs/_nuxt/static/1626848782/zh/concepts/style/payload.js
new file mode 100644
index 0000000..e06d124
--- /dev/null
+++ b/docs/_nuxt/static/1626848782/zh/concepts/style/payload.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("/zh/concepts/style", (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J){return {data:[{article:{slug:"style",toc:[{id:B,depth:t,text:A},{id:u,depth:t,text:u},{id:C,depth:t,text:D},{id:x,depth:t,text:x},{id:E,depth:t,text:F}],body:{type:"root",children:[{type:b,tag:"h1",props:{id:"echarts-中的样式简介"},children:[{type:b,tag:d,props:{href:"#echarts-%E4%B8%AD%E7%9A%84%E6%A0%B7%E5%BC%8F%E7%AE%80%E4%BB%8B",ariaHidden:o,tabIndex:p},children:[{type:b,t [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1626848782/zh/concepts/style/state.js b/docs/_nuxt/static/1626848782/zh/concepts/style/state.js
new file mode 100644
index 0000000..5d34df3
--- /dev/null
+++ b/docs/_nuxt/static/1626848782/zh/concepts/style/state.js
@@ -0,0 +1 @@
+window.__NUXT__=(function(a,b,c,d,e,f,g,h){return {staticAssetsBase:"\u002Fecharts-handbook\u002F_nuxt\u002Fstatic\u002F1626848782",layout:"default",error:c,state:{filled:b,docVersion:d,ghVersion:d,visibleAffix:b,locale:"zh",lang:{},menu:{},homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:e},{title:"入门篇",dir:"basics",children:[{title:"获取 ECharts",dir:"download"},{title:"在项目中引入 ECharts",dir:"import"},{title:"资源列表",dir:"resource",draft:a},{title:"获取灵感",dir:"inspiration"},{t [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1626848782/zh/concepts/visual-map/payload.js b/docs/_nuxt/static/1626848782/zh/concepts/visual-map/payload.js
new file mode 100644
index 0000000..36ea2c1
--- /dev/null
+++ b/docs/_nuxt/static/1626848782/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/1626848782/zh/concepts/visual-map/state.js b/docs/_nuxt/static/1626848782/zh/concepts/visual-map/state.js
new file mode 100644
index 0000000..31af822
--- /dev/null
+++ b/docs/_nuxt/static/1626848782/zh/concepts/visual-map/state.js
@@ -0,0 +1 @@
+window.__NUXT__=(function(a,b,c,d,e,f,g,h){return {staticAssetsBase:"\u002Fecharts-handbook\u002F_nuxt\u002Fstatic\u002F1626848782",layout:"default",error:c,state:{filled:b,docVersion:d,ghVersion:d,visibleAffix:b,locale:"zh",lang:{},menu:{},homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:e},{title:"入门篇",dir:"basics",children:[{title:"获取 ECharts",dir:"download"},{title:"在项目中引入 ECharts",dir:"import"},{title:"资源列表",dir:"resource",draft:a},{title:"获取灵感",dir:"inspiration"},{t [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1626848782/zh/get-started/payload.js b/docs/_nuxt/static/1626848782/zh/get-started/payload.js
new file mode 100644
index 0000000..d6b8434
--- /dev/null
+++ b/docs/_nuxt/static/1626848782/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/1626848782/zh/get-started/state.js b/docs/_nuxt/static/1626848782/zh/get-started/state.js
new file mode 100644
index 0000000..2349c52
--- /dev/null
+++ b/docs/_nuxt/static/1626848782/zh/get-started/state.js
@@ -0,0 +1 @@
+window.__NUXT__=(function(a,b,c,d,e,f,g,h){return {staticAssetsBase:"\u002Fecharts-handbook\u002F_nuxt\u002Fstatic\u002F1626848782",layout:"default",error:c,state:{filled:b,docVersion:d,ghVersion:d,visibleAffix:b,locale:"zh",lang:{},menu:{},homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:e},{title:"入门篇",dir:"basics",children:[{title:"获取 ECharts",dir:"download"},{title:"在项目中引入 ECharts",dir:"import"},{title:"资源列表",dir:"resource",draft:a},{title:"获取灵感",dir:"inspiration"},{t [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1626848782/zh/meta/get-started/payload.js b/docs/_nuxt/static/1626848782/zh/meta/get-started/payload.js
new file mode 100644
index 0000000..e87eeb8
--- /dev/null
+++ b/docs/_nuxt/static/1626848782/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/1626848782/zh/meta/get-started/state.js b/docs/_nuxt/static/1626848782/zh/meta/get-started/state.js
new file mode 100644
index 0000000..0511404
--- /dev/null
+++ b/docs/_nuxt/static/1626848782/zh/meta/get-started/state.js
@@ -0,0 +1 @@
+window.__NUXT__=(function(a,b,c,d,e,f,g,h){return {staticAssetsBase:"\u002Fecharts-handbook\u002F_nuxt\u002Fstatic\u002F1626848782",layout:"default",error:c,state:{filled:b,docVersion:d,ghVersion:d,visibleAffix:b,locale:"zh",lang:{},menu:{},homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:e},{title:"入门篇",dir:"basics",children:[{title:"获取 ECharts",dir:"download"},{title:"在项目中引入 ECharts",dir:"import"},{title:"资源列表",dir:"resource",draft:a},{title:"获取灵感",dir:"inspiration"},{t [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1626848782/zh/payload.js b/docs/_nuxt/static/1626848782/zh/payload.js
new file mode 100644
index 0000000..4efbd7b
--- /dev/null
+++ b/docs/_nuxt/static/1626848782/zh/payload.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("/zh", {data:[{}],fetch:{},mutations:[]});
\ No newline at end of file
diff --git a/docs/_nuxt/static/1626848782/zh/state.js b/docs/_nuxt/static/1626848782/zh/state.js
new file mode 100644
index 0000000..faf518f
--- /dev/null
+++ b/docs/_nuxt/static/1626848782/zh/state.js
@@ -0,0 +1 @@
+window.__NUXT__=(function(a,b,c,d,e,f,g,h){return {staticAssetsBase:"\u002Fecharts-handbook\u002F_nuxt\u002Fstatic\u002F1626848782",layout:"default",error:c,state:{filled:b,docVersion:d,ghVersion:d,visibleAffix:b,locale:"zh",lang:{},menu:{},homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:e},{title:"入门篇",dir:"basics",children:[{title:"获取 ECharts",dir:"download"},{title:"在项目中引入 ECharts",dir:"import"},{title:"资源列表",dir:"resource",draft:a},{title:"获取灵感",dir:"inspiration"},{t [...]
\ 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/images/feature-v5/dashboard-pointer.png b/docs/images/feature-v5/dashboard-pointer.png
new file mode 100644
index 0000000..2dabc8f
Binary files /dev/null and b/docs/images/feature-v5/dashboard-pointer.png differ
diff --git a/docs/images/feature-v5/dataZoom.png b/docs/images/feature-v5/dataZoom.png
new file mode 100644
index 0000000..296963d
Binary files /dev/null and b/docs/images/feature-v5/dataZoom.png differ
diff --git a/docs/images/feature-v5/dirty-rect.gif b/docs/images/feature-v5/dirty-rect.gif
new file mode 100644
index 0000000..8b0467a
Binary files /dev/null and b/docs/images/feature-v5/dirty-rect.gif differ
diff --git a/docs/images/feature-v5/dirty-rect.png b/docs/images/feature-v5/dirty-rect.png
new file mode 100644
index 0000000..c7ee56d
Binary files /dev/null and b/docs/images/feature-v5/dirty-rect.png differ
diff --git a/docs/images/feature-v5/echarts-5-en.png b/docs/images/feature-v5/echarts-5-en.png
new file mode 100644
index 0000000..120ce9c
Binary files /dev/null and b/docs/images/feature-v5/echarts-5-en.png differ
diff --git a/docs/images/feature-v5/echarts-5.png b/docs/images/feature-v5/echarts-5.png
new file mode 100644
index 0000000..666d43b
Binary files /dev/null and b/docs/images/feature-v5/echarts-5.png differ
diff --git a/docs/images/feature-v5/gauge-pointer.png b/docs/images/feature-v5/gauge-pointer.png
new file mode 100644
index 0000000..2dabc8f
Binary files /dev/null and b/docs/images/feature-v5/gauge-pointer.png differ
diff --git a/docs/images/feature-v5/new-theme-dark.png b/docs/images/feature-v5/new-theme-dark.png
new file mode 100644
index 0000000..727a942
Binary files /dev/null and b/docs/images/feature-v5/new-theme-dark.png differ
diff --git a/docs/images/feature-v5/new-theme-light.png b/docs/images/feature-v5/new-theme-light.png
new file mode 100644
index 0000000..a18e2ac
Binary files /dev/null and b/docs/images/feature-v5/new-theme-light.png differ
diff --git a/docs/images/feature-v5/new-tooltip-2 copy.png b/docs/images/feature-v5/new-tooltip-2 copy.png
new file mode 100644
index 0000000..52d3418
Binary files /dev/null and b/docs/images/feature-v5/new-tooltip-2 copy.png differ
diff --git a/docs/images/feature-v5/new-tooltip-2.png b/docs/images/feature-v5/new-tooltip-2.png
new file mode 100644
index 0000000..be34cc1
Binary files /dev/null and b/docs/images/feature-v5/new-tooltip-2.png differ
diff --git a/docs/images/feature-v5/new-tooltip.png b/docs/images/feature-v5/new-tooltip.png
new file mode 100644
index 0000000..56ad865
Binary files /dev/null and b/docs/images/feature-v5/new-tooltip.png differ
diff --git a/docs/images/feature-v5/new-tooltip2.png b/docs/images/feature-v5/new-tooltip2.png
new file mode 100644
index 0000000..52d3418
Binary files /dev/null and b/docs/images/feature-v5/new-tooltip2.png differ
diff --git a/docs/images/feature-v5/pie-label copy.png b/docs/images/feature-v5/pie-label copy.png
new file mode 100644
index 0000000..aee3315
Binary files /dev/null and b/docs/images/feature-v5/pie-label copy.png differ
diff --git a/docs/images/feature-v5/pie-label-2.png b/docs/images/feature-v5/pie-label-2.png
new file mode 100644
index 0000000..8c427b9
Binary files /dev/null and b/docs/images/feature-v5/pie-label-2.png differ
diff --git a/docs/images/feature-v5/pie-label.png b/docs/images/feature-v5/pie-label.png
new file mode 100644
index 0000000..aee3315
Binary files /dev/null and b/docs/images/feature-v5/pie-label.png differ
diff --git a/docs/images/feature-v5/theme-color.png b/docs/images/feature-v5/theme-color.png
new file mode 100644
index 0000000..636c868
Binary files /dev/null and b/docs/images/feature-v5/theme-color.png differ
diff --git a/docs/images/feature-v5/time-axis-2.png b/docs/images/feature-v5/time-axis-2.png
new file mode 100644
index 0000000..8bce19f
Binary files /dev/null and b/docs/images/feature-v5/time-axis-2.png differ
diff --git a/docs/images/feature-v5/time-axis.png b/docs/images/feature-v5/time-axis.png
new file mode 100644
index 0000000..00b7b00
Binary files /dev/null and b/docs/images/feature-v5/time-axis.png differ
diff --git a/docs/images/feature-v5/time-axis2.png b/docs/images/feature-v5/time-axis2.png
new file mode 100644
index 0000000..d89e441
Binary files /dev/null and b/docs/images/feature-v5/time-axis2.png differ
diff --git a/docs/images/feature-v5/timeline.png b/docs/images/feature-v5/timeline.png
new file mode 100644
index 0000000..e38150d
Binary files /dev/null and b/docs/images/feature-v5/timeline.png differ
diff --git a/docs/index.html b/docs/index.html
new file mode 100644
index 0000000..4ca6049
--- /dev/null
+++ b/docs/index.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<html data-n-head-ssr>
+ <head>
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="ECharts Handbook"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/echarts-handbook/_nuxt/ [...]
+ </head>
+ <body>
+ <div data-server-rendered="true" id="__nuxt"><!----><div id="__layout"><div><nav role="navigation" class="navbar navbar-default navbar-fixed-top"><div class="container-fluid"><div class="navbar-header"><button type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href [...]
+ this is index
+</div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script defer src="/echarts-handbook/_nuxt/static/1626848782/state.js"></script><script src="/echarts-handbook/_nuxt/8966669.js" defer></script><script src="/echarts-handbook/_nuxt/js/4e1d6e22b61114e5daf3.js" defer></script><script src="/echarts-handbook/_nuxt/js/e207ecd53819d2e6f044.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/basics/download/index.html b/docs/zh/basics/download/index.html
new file mode 100644
index 0000000..a23f29d
--- /dev/null
+++ b/docs/zh/basics/download/index.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<html data-n-head-ssr>
+ <head>
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="ECharts Handbook"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/echarts-handbook/_nuxt/ [...]
+ </head>
+ <body>
+ <div data-server-rendered="true" id="__nuxt"><!----><div id="__layout"><div><nav role="navigation" class="navbar navbar-default navbar-fixed-top"><div class="container-fluid"><div class="navbar-header"><button type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href [...]
+<p>Apache ECharts 提供了多种安装方式，你可以根据项目的实际情况选择以下任意一种方式安装。</p>
+<ul>
+<li>从 GitHub 获取</li>
+<li>从 npm 获取</li>
+<li>从 CDN 获取</li>
+<li>在线定制</li>
+</ul>
+<p>接下来我们将分别介绍这些安装方式，以及下载后的目录结构。</p>
+<h2 id="安装方式"><a href="#%E5%AE%89%E8%A3%85%E6%96%B9%E5%BC%8F" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>安装方式</h2>
+<h3 id="从-github-获取"><a href="#%E4%BB%8E-github-%E8%8E%B7%E5%8F%96" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>从 GitHub 获取</h3>
+<p><a href="https://github.com/apache/echarts" rel="nofollow noopener noreferrer" target="_blank">apache/echarts</a> 项目的 <a href="https://github.com/apache/echarts/releases" rel="nofollow noopener noreferrer" target="_blank">release</a> 页面可以找到各个版本的链接。点击下载页面下方 Assets 中的 Source code，解压后 <code>dist</code> 目录下的 <code>echarts.js</code> 即为包含完整 ECharts 功能的文件。</p>
+<h3 id="从-npm-获取"><a href="#%E4%BB%8E-npm-%E8%8E%B7%E5%8F%96" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>从 npm 获取</h3>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-text line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" [...]
+<p>详见<a href="zh/basics/import">在项目中引入 Apache ECharts</a>。</p>
+<h3 id="从-cdn-获取"><a href="#%E4%BB%8E-cdn-%E8%8E%B7%E5%8F%96" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>从 CDN 获取</h3>
+<p>推荐从 jsDelivr 引用 <a href="https://www.jsdelivr.com/package/npm/echarts" rel="nofollow noopener noreferrer" target="_blank">echarts</a>。</p>
+<h3 id="在线定制"><a href="#%E5%9C%A8%E7%BA%BF%E5%AE%9A%E5%88%B6" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>在线定制</h3>
+<p>如果只想引入部分模块以减少包体积，可以使用 <a href="https://echarts.apache.org//builder.html" rel="nofollow noopener noreferrer" target="_blank">ECharts 在线定制</a>功能。</p></div> <div class="table-of-contents"><h4 class="toc-container-header">本页目录</h4> <ul><li class="toc2"><a href="/echarts-handbook/zh/basics/download#%E5%AE%89%E8%A3%85%E6%96%B9%E5%BC%8F">安装方式</a></li><li class="toc3"><a href="/echarts-handbook/zh/basics/download#%E4%BB%8E-github-%E8%8E%B7%E5%8F%96">从 GitHub 获取</a></li><li class="toc3"><a hre [...]
+ <script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
+ </body>
+</html>
diff --git a/docs/zh/basics/help/index.html b/docs/zh/basics/help/index.html
new file mode 100644
index 0000000..a0b7858
--- /dev/null
+++ b/docs/zh/basics/help/index.html
@@ -0,0 +1,36 @@
+<!doctype html>
+<html data-n-head-ssr>
+ <head>
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="ECharts Handbook"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/echarts-handbook/_nuxt/ [...]
+ </head>
+ <body>
+ <div data-server-rendered="true" id="__nuxt"><!----><div id="__layout"><div><nav role="navigation" class="navbar navbar-default navbar-fixed-top"><div class="container-fluid"><div class="navbar-header"><button type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href [...]
+<h2 id="技术问题"><a href="#%E6%8A%80%E6%9C%AF%E9%97%AE%E9%A2%98" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>技术问题</h2>
+<h3 id="确保现有文档等资料无法解决你的问题"><a href="#%E7%A1%AE%E4%BF%9D%E7%8E%B0%E6%9C%89%E6%96%87%E6%A1%A3%E7%AD%89%E8%B5%84%E6%96%99%E6%97%A0%E6%B3%95%E8%A7%A3%E5%86%B3%E4%BD%A0%E7%9A%84%E9%97%AE%E9%A2%98" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>确保现有文档等资料无法解决你的问题</h3>
+<p>ECharts 有非常大量的用户，所以你遇到过的问题，很可能别人在此之前也遇到并解决了。通过查看文档以及使用搜索引擎搜索关键字，可以帮助你自助地在第一时间解决问题，而不需要依赖社区的帮助。</p>
+<p>因此，在做其他操作前，请确保现有文档等资料无法解决你的问题。可以尝试查看或搜索的资料包括：</p>
+<ul>
+<li><a href="https://echarts.apache.org//api.html" rel="nofollow noopener noreferrer" target="_blank">API</a></li>
+<li><a href="https://echarts.apache.org//option.html" rel="nofollow noopener noreferrer" target="_blank">配置项手册</a>：可以尝试使用搜索功能</li>
+<li>本手册的文章</li>
+<li><a href="https://echarts.apache.org//faq.html" rel="nofollow noopener noreferrer" target="_blank">常见问题</a></li>
+<li>在 <a href="https://github.com/apache/echarts/issues" rel="nofollow noopener noreferrer" target="_blank">GitHub issue</a> 中搜索关键字</li>
+<li>使用搜索引擎搜索关键字</li>
+</ul>
+<h3 id="创建一个最简单可复现的例子"><a href="#%E5%88%9B%E5%BB%BA%E4%B8%80%E4%B8%AA%E6%9C%80%E7%AE%80%E5%8D%95%E5%8F%AF%E5%A4%8D%E7%8E%B0%E7%9A%84%E4%BE%8B%E5%AD%90" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>创建一个最简单可复现的例子</h3>
+<p>使用 <a href="https://codepen.io/Ovilia/pen/dyYWXWM" rel="nofollow noopener noreferrer" target="_blank">Codepen</a>、<a href="https://codesandbox.io/s/mystifying-bash-2uthz" rel="nofollow noopener noreferrer" target="_blank">Codesandbox</a> 或者 <a href="https://www.makeapie.com/" rel="nofollow noopener noreferrer" target="_blank">makeapie.com</a> 创建一个例子，这将使得他人更方便地复现你的问题。</p>
+<p>例子应尽可能以最简单的方式复现你的问题，去除不必要的配置项和数据，可以让帮助你的人更快速地定位问题，从而让你的问题更快得到解决。更详细的介绍请参见 <a href="https://stackoverflow.com/help/minimal-reproducible-example" rel="nofollow noopener noreferrer" target="_blank">How to create a Minimal, Reproducible Example</a>。</p>
+<h3 id="判断是否是-bug"><a href="#%E5%88%A4%E6%96%AD%E6%98%AF%E5%90%A6%E6%98%AF-bug" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>判断是否是 bug</h3>
+<h4 id="报告-bug-或请求新功能"><a href="#%E6%8A%A5%E5%91%8A-bug-%E6%88%96%E8%AF%B7%E6%B1%82%E6%96%B0%E5%8A%9F%E8%83%BD" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>报告 bug 或请求新功能</h4>
+<p>如果不符合文档描述或你的预期效果，这很有可能是 bug。如果是 bug，或者你有一个想请求实现的功能，请使用 <a href="https://ecomfe.github.io/echarts-issue-helper/" rel="nofollow noopener noreferrer" target="_blank">issue 模板</a> 中新建一个 issue 并按照提示详细描述。</p>
+<h4 id="咨询类问题"><a href="#%E5%92%A8%E8%AF%A2%E7%B1%BB%E9%97%AE%E9%A2%98" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>咨询类问题</h4>
+<p>如果不是 bug，而是不知道如何实现某种效果，可以尝试在 <a href="https://stackoverflow.com">stackoverflow.com</a>、<a href="https://www.oschina.net/question/tag/echarts">开源中国</a> 或 <a href="https://segmentfault.com/t/echarts">segmentfault.com</a> 等问答平台上提问。</p>
+<p>如果没能得到答复，也可以发送邮件至邮件组 <a href="mailto:dev@echarts.apache.org">dev@echarts.apache.org</a>。为了让更多人理解你的问题，并且在将来搜索的时候得到帮助，强烈建议使用英文发送邮件。</p>
+<h2 id="非技术类问题"><a href="#%E9%9D%9E%E6%8A%80%E6%9C%AF%E7%B1%BB%E9%97%AE%E9%A2%98" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>非技术类问题</h2>
+<p>其他问题可以发送英文邮件至邮件组 <a href="mailto:dev@echarts.apache.org">dev@echarts.apache.org</a>。</p></div> <div class="table-of-contents"><h4 class="toc-container-header">本页目录</h4> <ul><li class="toc2"><a href="/echarts-handbook/zh/basics/help#%E6%8A%80%E6%9C%AF%E9%97%AE%E9%A2%98">技术问题</a></li><li class="toc3"><a href="/echarts-handbook/zh/basics/help#%E7%A1%AE%E4%BF%9D%E7%8E%B0%E6%9C%89%E6%96%87%E6%A1%A3%E7%AD%89%E8%B5%84%E6%96%99%E6%97%A0%E6%B3%95%E8%A7%A3%E5%86%B3%E4%BD%A0%E7%9A%84%E9%97%AE%E9 [...]
+ <script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
+ </body>
+</html>
diff --git a/docs/zh/basics/import/index.html b/docs/zh/basics/import/index.html
new file mode 100644
index 0000000..62c3cb9
--- /dev/null
+++ b/docs/zh/basics/import/index.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<html data-n-head-ssr>
+ <head>
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="ECharts Handbook"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/echarts-handbook/_nuxt/ [...]
+ </head>
+ <body>
+ <div data-server-rendered="true" id="__nuxt"><!----><div id="__layout"><div><nav role="navigation" class="navbar navbar-default navbar-fixed-top"><div class="container-fluid"><div class="navbar-header"><button type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href [...]
+<p>假如你的开发环境使用了<code>npm</code>或者<code>yarn</code>等包管理工具，并且使用 Webpack 等打包工具进行构建，本文将会介绍如何引入 Apache ECharts<sup>TM</sup> 并通过 treeshaking 特性只打包需要的模块。</p>
+<h2 id="npm-安装-echarts"><a aria-hidden="true" href="#npm-%E5%AE%89%E8%A3%85-echarts" tabindex="-1"><span class="icon icon-link"></span></a>NPM 安装 ECharts</h2>
+<p>你可以使用如下命令通过 npm 安装 ECharts</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-shell line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round [...]
+<h2 id="引入-echarts"><a aria-hidden="true" href="#%E5%BC%95%E5%85%A5-echarts" tabindex="-1"><span class="icon icon-link"></span></a>引入 ECharts</h2>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<h2 id="按需引入-echarts-图表和组件"><a aria-hidden="true" href="#%E6%8C%89%E9%9C%80%E5%BC%95%E5%85%A5-echarts-%E5%9B%BE%E8%A1%A8%E5%92%8C%E7%BB%84%E4%BB%B6" tabindex="-1"><span class="icon icon-link"></span></a>按需引入 ECharts 图表和组件</h2>
+<p>上面的代码会引入所有 ECharts 中所有的图表和组件，但是假如你不想引入所有组件，也可以使用 ECharts 提供的按需引入的接口来打包必须的组件。</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<blockquote>
+<p>需要注意的是注意为了保证打包的体积是最小的，ECharts 按需引入的时候不再提供任何渲染器，所以需要选择引入<code>CanvasRenderer</code>或者<code>SVGRenderer</code>作为渲染器。这样的好处是假如你只需要使用 svg 渲染模式，打包的结果中就不会再包含无需使用的<code>CanvasRenderer</code>模块。</p>
+</blockquote>
+<p>我们在示例编辑页的“完整代码”标签提供了非常方便的生成按需引入代码的功能。这个功能会根据当前的配置项动态生成最小的按需引入的代码。你可以直接在你的项目中使用。</p>
+<h2 id="在-typescript-中按需引入"><a aria-hidden="true" href="#%E5%9C%A8-typescript-%E4%B8%AD%E6%8C%89%E9%9C%80%E5%BC%95%E5%85%A5" tabindex="-1"><span class="icon icon-link"></span></a>在 TypeScript 中按需引入</h2>
+<p>对于使用了 TypeScript 来开发 ECharts 的开发者，我们提供了类型接口来组合出最小的<code>EChartsOption</code>类型。这个更严格的类型可以有效帮助你检查出是否少加载了组件或者图表。</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-ts line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+ <script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
+ </body>
+</html>
diff --git a/docs/zh/basics/inspiration/index.html b/docs/zh/basics/inspiration/index.html
new file mode 100644
index 0000000..d7342e1
--- /dev/null
+++ b/docs/zh/basics/inspiration/index.html
@@ -0,0 +1,19 @@
+<!doctype html>
+<html data-n-head-ssr>
+ <head>
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="ECharts Handbook"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/echarts-handbook/_nuxt/ [...]
+ </head>
+ <body>
+ <div data-server-rendered="true" id="__nuxt"><!----><div id="__layout"><div><nav role="navigation" class="navbar navbar-default navbar-fixed-top"><div class="container-fluid"><div class="navbar-header"><button type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href [...]
+<p>当你有“不知道图表应该设计成什么样”或者“不知道如何使用 ECharts 实现某种效果”的疑问的时候，以下列表可以提供一些思路。</p>
+<ul>
+<li><a href="https://echarts.apache.org//examples" rel="nofollow noopener noreferrer" target="_blank">ECharts 官方实例</a></li>
+<li>本手册的“应用篇 - 常用图表类型”</li>
+<li><a href="https://www.makeapie.com/" rel="nofollow noopener noreferrer" target="_blank">makeapie.com</a> 社区用户的作品集</li>
+</ul></div> <div class="table-of-contents"><h4 class="toc-container-header">本页目录</h4> <ul></ul></div></div> <div class="post-contributors"><h3><span class="inline-block align-middle">本文贡献者</span> <a target="_blank" href="https://github.com/apache/echarts-handbook/tree/master/contents/zh/basics/inspiration.md" title="编辑本文" class="inline-block align-middle text-sm"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-8 w-8 inline-block alig [...]
+ <script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
+ </body>
+</html>
diff --git a/docs/zh/best-practice/aria/index.html b/docs/zh/best-practice/aria/index.html
new file mode 100644
index 0000000..2ea8c48
--- /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>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="ECharts Handbook"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/echarts-handbook/_nuxt/ [...]
+ </head>
+ <body>
+ <div data-server-rendered="true" id="__nuxt"><!----><div id="__layout"><div><nav role="navigation" class="navbar navbar-default navbar-fixed-top"><div class="container-fluid"><div class="navbar-header"><button type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href [...]
+<p>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..414cfc6
--- /dev/null
+++ b/docs/zh/best-practice/canvas-vs-svg/index.html
@@ -0,0 +1,39 @@
+<!doctype html>
+<html data-n-head-ssr>
+ <head>
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="ECharts Handbook"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/echarts-handbook/_nuxt/ [...]
+ </head>
+ <body>
+ <div data-server-rendered="true" id="__nuxt"><!----><div id="__layout"><div><nav role="navigation" class="navbar navbar-default navbar-fixed-top"><div class="container-fluid"><div class="navbar-header"><button type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href [...]
+<p>浏览器端图表库大多会选择 SVG 或者 Canvas 进行渲染。对于绘制图表来说，这两种技术往往是可替换的，效果相近。但是在一些场景中，他们的表现和能力又有一定差异。于是，对它们的选择取舍，就成为了一个一直存在的不易有标准答案的话题。</p>
+<p>ECharts 从初始一直使用 Canvas 绘制图表。而 <a href="https://github.com/apache/echarts/releases" rel="nofollow noopener noreferrer" target="_blank">ECharts v4.0</a> 发布了 SVG 渲染器，从而提供了一种新的选择。只须在初始化一个图表实例时，设置 <a href="https://echarts.apache.org//api.html#echarts.init" rel="nofollow noopener noreferrer" target="_blank">renderer 参数</a> 为 <code>'canvas'</code> 或 <code>'svg'</code> 即可指定渲染器，比较方便。</p>
+<blockquote>
+<p>SVG 和 Canvas 这两种使用方式差异很大的技术，能够做到同时被透明支持，主要归功于 ECharts 底层库 <a href="https://github.com/ecomfe/zrender" rel="nofollow noopener noreferrer" target="_blank">ZRender</a> 的抽象和实现，形成可互换的 SVG 渲染器和 Canvas 渲染器。</p>
+</blockquote>
+<h2 id="选择哪种渲染器"><a href="#%E9%80%89%E6%8B%A9%E5%93%AA%E7%A7%8D%E6%B8%B2%E6%9F%93%E5%99%A8" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>选择哪种渲染器</h2>
+<p>一般来说，Canvas 更适合绘制图形元素数量较多（这一般是由数据量大导致）的图表（如热力图、地理坐标系或平行坐标系上的大规模线图或散点图等），也利于实现某些视觉 <a href="https://echarts.apache.org//examples/editor.html?c=lines-bmap-effect" rel="nofollow noopener noreferrer" target="_blank">特效</a>。但是，在不少场景中，SVG 具有重要的优势：它的内存占用更低（这对移动端尤其重要）、并且用户使用浏览器内置的缩放功能时不会模糊。</p>
+<p>选择哪种渲染器，我们可以根据软硬件环境、数据量、功能需求综合考虑。</p>
+<ul>
+<li>在软硬件环境较好，数据量不大的场景下，两种渲染器都可以适用，并不需要太多纠结。</li>
+<li>在环境较差，出现性能问题需要优化的场景下，可以通过试验来确定使用哪种渲染器。比如有这些经验：
+<ul>
+<li>在须要创建很多 ECharts 实例且浏览器易崩溃的情况下（可能是因为 Canvas 数量多导致内存占用超出手机承受能力），可以使用 SVG 渲染器来进行改善。大略得说，如果图表运行在低端安卓机，或者我们在使用一些特定图表如 <a href="https://ecomfe.github.io/echarts-liquidfill/example/" rel="nofollow noopener noreferrer" target="_blank">水球图</a> 等，SVG 渲染器可能效果更好。</li>
+<li>数据量较大（经验判断 > 1k）、较多交互时，建议选择 Canvas 渲染器。</li>
+</ul>
+</li>
+</ul>
+<p>我们强烈欢迎开发者们<a href="https://github.com/apache/echarts/issues/new" rel="nofollow noopener noreferrer" target="_blank">反馈</a>给我们使用的体验和场景，帮助我们更好的做优化。</p>
+<p>注：当前某些特殊的渲染依然需要依赖 Canvas：如<a href="https://echarts.apache.org/option.html#series-lines.effect" rel="nofollow noopener noreferrer" target="_blank">炫光尾迹特效</a>、<a href="examples/editor.html?c=heatmap-bmap">带有混合效果的热力图</a>等。</p>
+<h2 id="如何使用渲染器"><a href="#%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8%E6%B8%B2%E6%9F%93%E5%99%A8" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>如何使用渲染器</h2>
+<p>如果是用如下的方式完整引入<code>echarts</code>，代码中已经包含了 SVG 渲染器和 Canvas 渲染器</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<p>如果你是按照 <a href="zh/basics/import">在项目中引入 Apache ECharts</a> 一文中的介绍使用按需引入，则需要手动引入需要的渲染器</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<p>然后，我们就可以在代码中，初始化图表实例时，<a href="https://echarts.apache.org//api.html/api.html#echarts.init" rel="nofollow noopener noreferrer" target="_blank">传入参数</a> 选择渲染器类型：</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+ <script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
+ </body>
+</html>
diff --git a/docs/zh/concepts/axis/index.html b/docs/zh/concepts/axis/index.html
new file mode 100644
index 0000000..7c72772
--- /dev/null
+++ b/docs/zh/concepts/axis/index.html
@@ -0,0 +1,39 @@
+<!doctype html>
+<html data-n-head-ssr>
+ <head>
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="ECharts Handbook"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/echarts-handbook/_nuxt/ [...]
+ </head>
+ <body>
+ <div data-server-rendered="true" id="__nuxt"><!----><div id="__layout"><div><nav role="navigation" class="navbar navbar-default navbar-fixed-top"><div class="container-fluid"><div class="navbar-header"><button type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href [...]
+<p>直角坐标系中的 x/y 轴。</p>
+<h2 id="x-轴、y-轴"><a href="#x-%E8%BD%B4%E3%80%81y-%E8%BD%B4" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>x 轴、y 轴</h2>
+<p>x 轴和 y 轴都由轴线、刻度、刻度标签、轴标题四个部分组成。部分图表中还会有网格线来帮助查看和计算数据</p>
+<img max-width="830" width="100%" height="100%" src="images/design/axis/charts_axis_img02.jpg">
+
+<p>普通的二维数据坐标系都有 x 轴和 y 轴，通常情况下，x 轴显示在图表的底部，y 轴显示在左侧，一般配置如下：</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<p>x 轴常用来标示数据的维度，维度一般用来指数据的类别，是观察数据的角度，例如“销售时间” “销售地点” “产品名称”等。y 轴常常用来标示数据的数值，数值是用来具体考察某一类数据的数量值，也是我们需要分析的指标，例如“销售数量”和“销售金额”等。</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<p>当 x 轴（水平坐标轴）跨度很大，可以采用才区域缩放方式灵活显示数据内容。</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<p>在二维数据中，轴也可以有多个。ECharts 中一般情况下单个 grid 组件最多只能放两个 x/y 轴，多于两个 x/y 轴需要通过配置 <a href="https://echarts.apache.org/option.html#xAxis.offset" rel="nofollow noopener noreferrer" target="_blank">offset</a> 属性防止同个位置多个轴的重叠。两个 x 轴显示在上下，两个 y 轴显示在左右两侧。</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<h2 id="轴线"><a href="#%E8%BD%B4%E7%BA%BF" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>轴线</h2>
+<p>ECharts 提供了轴线 <a href="https://echarts.apache.org/option.html#xAxis.axisLine" rel="nofollow noopener noreferrer" target="_blank">axisLine</a> 相关的配置，我们可以根据实际情况调整，例如轴线两端的箭头，轴线的样式等。</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<h2 id="刻度"><a href="#%E5%88%BB%E5%BA%A6" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>刻度</h2>
+<p>ECharts 提供了轴线 <a href="https://echarts.apache.org/option.html#xAxis.axisTick" rel="nofollow noopener noreferrer" target="_blank">axisTick</a> 相关的配置，我们可以根据实际情况调整，例如刻度线的长度，样式等。</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<h2 id="刻度标签"><a href="#%E5%88%BB%E5%BA%A6%E6%A0%87%E7%AD%BE" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>刻度标签</h2>
+<p>ECharts 提供了轴线 <a href="https://echarts.apache.org/option.html#xAxis.axisLabel" rel="nofollow noopener noreferrer" target="_blank">axisLabel</a> 相关的配置，我们可以根据实际情况调整，例如文字对齐方式，自定义刻度标签内容等。</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<h2 id="示例"><a href="#%E7%A4%BA%E4%BE%8B" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>示例</h2>
+<p>图左侧的 y 轴代表东京月平均气温，右侧的 y 轴表示东京降水量，x 轴表示时间。两组 y 轴在一起，反映了平均气温和降水量间的趋势关系。</p>
+<div class="nuxt-content-highlight"><!----></div>
+<p>这里简要介绍了坐标轴相关的常用配置项及用法，更多关于坐标轴配置项及用法请移步<a href="https://echarts.apache.org/option.html#xAxis" rel="nofollow noopener noreferrer" target="_blank">官网</a>。</p></div> <div class="table-of-contents"><h4 class="toc-container-header">本页目录</h4> <ul><li class="toc2"><a href="/echarts-handbook/zh/concepts/axis#x-%E8%BD%B4%E3%80%81y-%E8%BD%B4">x 轴、y 轴</a></li><li class="toc2"><a href="/echarts-handbook/zh/concepts/axis#%E8%BD%B4%E7%BA%BF">轴线</a></li><li class="toc2"><a href="/echarts-handbook/zh/ [...]
+ <script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
+ </body>
+</html>
diff --git a/docs/zh/concepts/chart-size/index.html b/docs/zh/concepts/chart-size/index.html
new file mode 100644
index 0000000..db76afb
--- /dev/null
+++ b/docs/zh/concepts/chart-size/index.html
@@ -0,0 +1,42 @@
+<!doctype html>
+<html data-n-head-ssr>
+ <head>
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="ECharts Handbook"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/echarts-handbook/_nuxt/ [...]
+ </head>
+ <body>
+ <div data-server-rendered="true" id="__nuxt"><!----><div id="__layout"><div><nav role="navigation" class="navbar navbar-default navbar-fixed-top"><div class="container-fluid"><div class="navbar-header"><button type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href [...]
+<p>在<a href="zh/get-started">快速上手</a>中，我们介绍了初始化 ECharts 的接口 <a href="https://echarts.apache.org//api.html#echarts.init" rel="nofollow noopener noreferrer" target="_blank"><code>echarts.init</code></a>。<a href="https://echarts.apache.org//api.html#echarts.init" rel="nofollow noopener noreferrer" target="_blank">API 文档</a>中详细介绍了参数的具体含义，建议理解后再阅读本文。</p>
+<p>下面，我们就常见的几种使用场景，介绍如何初始化一个图表以及改变其大小。</p>
+<h2 id="初始化"><a href="#%E5%88%9D%E5%A7%8B%E5%8C%96" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>初始化</h2>
+<h3 id="场景一：在-html-中定义有宽度和高度的父容器（推荐）"><a href="#%E5%9C%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/data-transform/index.html b/docs/zh/concepts/data-transform/index.html
new file mode 100644
index 0000000..34838cb
--- /dev/null
+++ b/docs/zh/concepts/data-transform/index.html
@@ -0,0 +1,131 @@
+<!doctype html>
+<html data-n-head-ssr>
+ <head>
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="ECharts Handbook"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/echarts-handbook/_nuxt/ [...]
+ </head>
+ <body>
+ <div data-server-rendered="true" id="__nuxt"><!----><div id="__layout"><div><nav role="navigation" class="navbar navbar-default navbar-fixed-top"><div class="container-fluid"><div class="navbar-header"><button type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href [...]
+<p>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>
+<p>下面是上述例子的效果，三个饼图分别显示了 2011、2012、2013 年的数据。</p>
+<div class="nuxt-content-highlight"><!----></div>
+<p>现在我们简单总结下，使用 transform 时的几个要点：</p>
+<ul>
+<li>在一个空的 dataset 中声明 <code>transform</code>, <code>fromDatasetIndex</code>/<code>fromDatasetId</code> 来表示我们要生成新的数据。</li>
+<li>系列引用这个 dataset 。</li>
+</ul>
+<h2 id="数据转换的进阶使用"><a href="#%E6%95%B0%E6%8D%AE%E8%BD%AC%E6%8D%A2%E7%9A%84%E8%BF%9B%E9%98%B6%E4%BD%BF%E7%94%A8" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>数据转换的进阶使用</h2>
+<h4 id="链式声明-transform"><a href="#%E9%93%BE%E5%BC%8F%E5%A3%B0%E6%98%8E-transform" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>链式声明 transform</h4>
+<p><code>transform</code> 可以被链式声明，这是一个语法糖。</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<blockquote>
+<p>注意：理论上，任何 transform 都可能有多个输入或多个输出。但是，如果一个 transform 被链式声明，它只能获取前一个 transform 的第一个输出作为输入（第一个 transform 除外），以及它只能把自己的第一个输出给到后一个 transform （最后一个 transform 除外）。</p>
+</blockquote>
+<h4 id="一个-transform-输出多个-data"><a href="#%E4%B8%80%E4%B8%AA-transform-%E8%BE%93%E5%87%BA%E5%A4%9A%E4%B8%AA-data" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>一个 transform 输出多个 data</h4>
+<p>在大多数场景下，transform 只需输出一个 data 。但是也有一些场景，需要输出多个 data ，每个 data 可以被不同的 series 或者 dataset 所使用。</p>
+<p>例如，在内置的 "boxplot" transform 中，除了 boxplot 系列所需要的 data 外，离群点（ outlier ）也会被生成，并且可以用例如散点图系列显示出来。例如，<a href="https://echarts.apache.org/examples/zh/editor.html?c=boxplot-light-velocity&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>
+<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..ae4c8be
--- /dev/null
+++ b/docs/zh/concepts/dataset/index.html
@@ -0,0 +1,130 @@
+<!doctype html>
+<html data-n-head-ssr>
+ <head>
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="ECharts Handbook"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/echarts-handbook/_nuxt/ [...]
+ </head>
+ <body>
+ <div data-server-rendered="true" id="__nuxt"><!----><div id="__layout"><div><nav role="navigation" class="navbar navbar-default navbar-fixed-top"><div class="container-fluid"><div class="navbar-header"><button type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href [...]
+<p><code>数据集</code>（<code>dataset</code>）是专门用来管理数据的组件。虽然每个系列都可以在 <code>series.data</code> 中设置数据，但是从 ECharts4 支持 <code>数据集</code> 开始，更推荐使用 <code>数据集</code> 来管理数据。因为这样，数据可以被多个组件复用，也方便进行 “数据和其他配置” 分离的配置风格。毕竟，在运行时，数据是最常改变的，而其他配置大多并不会改变。</p>
+<h2 id="在系列中设置数据"><a href="#%E5%9C%A8%E7%B3%BB%E5%88%97%E4%B8%AD%E8%AE%BE%E7%BD%AE%E6%95%B0%E6%8D%AE" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>在系列中设置数据</h2>
+<p>如果数据设置在 <code>系列</code>（<code>series</code>）中，例如：</p>
+<div class="nuxt-content-highlight"><!----></div>
+<p>这种方式的优点是，适于对一些特殊的数据结构（如“树”、“图”、超大数据）进行一定的数据类型定制。
+但是缺点是，常需要用户先处理数据，把数据分割设置到各个系列（和类目轴）中。此外，不利于多个系列共享一份数据，也不利于基于原始数据进行图表类型、系列的映射安排。</p>
+<h2 id="在数据集中设置数据"><a href="#%E5%9C%A8%E6%95%B0%E6%8D%AE%E9%9B%86%E4%B8%AD%E8%AE%BE%E7%BD%AE%E6%95%B0%E6%8D%AE" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>在数据集中设置数据</h2>
+<p>而数据设置在 <code>数据集</code>（<code>dataset</code>）中，会有这些好处：</p>
+<ul>
+<li>能够贴近数据可视化常见思维方式：（I）提供数据，（II）指定数据到视觉的映射，从而形成图表。</li>
+<li>数据和其他配置可以被分离开来。数据常变，其他配置常不变。分开易于分别管理。</li>
+<li>数据可以被多个系列或者组件复用，对于大数据量的场景，不必为每个系列创建一份数据。</li>
+<li>支持更多的数据的常用格式，例如二维数组、对象数组等，一定程度上避免使用者为了数据格式而进行转换。</li>
+</ul>
+<p>下面是一个最简单的 <code>dataset</code> 的例子：</p>
+<div class="nuxt-content-highlight"><!----></div>
+<p>或者也可以使用常见的“对象数组”的格式：</p>
+<div class="nuxt-content-highlight"><!----></div>
+<h2 id="数据到图形的映射"><a href="#%E6%95%B0%E6%8D%AE%E5%88%B0%E5%9B%BE%E5%BD%A2%E7%9A%84%E6%98%A0%E5%B0%84" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>数据到图形的映射</h2>
+<p>如上所述，数据可视化的一个常见思路是：（I）提供数据，（II）指定数据到视觉的映射。</p>
+<p>简而言之，可以进行这些映射的设定：</p>
+<ul>
+<li>指定 <code>数据集</code> 的列（column）还是行（row）映射为 <code>系列</code>（<code>series</code>）。这件事可以使用 <a href="https://echarts.apache.org/option.html##series.seriesLayoutBy" rel="nofollow noopener noreferrer" target="_blank">series.seriesLayoutBy</a> 属性来配置。默认是按照列（column）来映射。</li>
+<li>指定维度映射的规则：如何从 dataset 的维度（一个“维度”的意思是一行/列）映射到坐标轴（如 X、Y 轴）、提示框（tooltip）、标签（label）、图形元素大小颜色等（visualMap）。这件事可以使用 <a href="https://echarts.apache.org/option.html##series.encode" rel="nofollow noopener noreferrer" target="_blank">series.encode</a> 属性，以及 <a href="https://echarts.apache.org/option.html##visualMap" rel="nofollow noopener noreferrer" target="_blank">visualMap</a> 组件来配置（如果有需要映射颜色大小等视觉维度的话）。上面的例子中，没有给出这种映射配置，那么 ECharts 就按最常见的理解进行默认映射：X 坐标轴声明为类目轴，默认情况下会自动对应到 <code>dataset.source< [...]
+</ul>
+<p>下面详细解释这些映射的设定。</p>
+<h2 id="把数据集（-dataset-）的行或列映射为系列（series）"><a href="#%E6%8A%8A%E6%95%B0%E6%8D%AE%E9%9B%86%EF%BC%88-dataset-%EF%BC%89%E7%9A%84%E8%A1%8C%E6%88%96%E5%88%97%E6%98%A0%E5%B0%84%E4%B8%BA%E7%B3%BB%E5%88%97%EF%BC%88series%EF%BC%89" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>把数据集（ dataset ）的行或列映射为系列（series）</h2>
+<p>有了数据表之后，使用者可以灵活地配置：数据如何对应到轴和图形系列。</p>
+<p>用户可以使用 <code>seriesLayoutBy</code> 配置项，改变图表对于行列的理解。<code>seriesLayoutBy</code> 可取值：</p>
+<ul>
+<li>'column': 默认值。系列被安放到 <code>dataset</code> 的列上面。</li>
+<li>'row': 系列被安放到 <code>dataset</code> 的行上面。</li>
+</ul>
+<p>看这个例子：</p>
+<div class="nuxt-content-highlight"><!----></div>
+<h2 id="维度（-dimension-）"><a href="#%E7%BB%B4%E5%BA%A6%EF%BC%88-dimension-%EF%BC%89" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>维度（ dimension ）</h2>
+<p>常用图表所描述的数据大部分是“二维表”结构，上述的例子中，我们都使用二维数组来容纳二维表。现在，当我们把系列（ series ）对应到“列”的时候，那么每一列就称为一个“维度（ dimension ）”，而每一行称为数据项（ item ）。反之，如果我们把系列（ series ）对应到表行，那么每一行就是“维度（ dimension ）”，每一列就是数据项（ item ）。</p>
+<p>维度可以有单独的名字，便于在图表中显示。维度名（ dimension name ）可以在定义在 dataset 的第一行（或者第一列）。例如上面的例子中，<code>'score'</code>、<code>'amount'</code>、<code>'product'</code> 就是维度名。从第二行开始，才是正式的数据。<code>dataset.source</code> 中第一行（列）到底包含不包含维度名，ECharts 默认会自动探测。当然也可以设置 <code>dataset.sourceHeader: true</code> 显示声明第一行（列）就是维度，或者 <code>dataset.sourceHeader: false</code> 表明第一行（列）开始就直接是数据。</p>
+<p>维度的定义，也可以使用单独的 <code>dataset.dimensions</code> 或者 <code>series.dimensions</code> 来定义，这样可以同时指定维度名，和维度的类型（ dimension type ）：</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<p>大多数情况下，我们并不需要去设置维度类型，因为 ECharts 会自动尝试判断。但是如果不足够准确时，可以手动设置维度类型。</p>
+<p>维度类型（ dimension type ）可以取这些值：</p>
+<ul>
+<li><code>'number'</code>: 默认，表示普通数据。</li>
+<li><code>'ordinal'</code>: 对于类目、文本这些 string 类型的数据，如果需要能在数轴上使用，须是 'ordinal' 类型。ECharts 默认会试图自动判断这个类型。但是自动判断也可能不准确，所以使用者也可以手动强制指定。</li>
+<li><code>'time'</code>: 表示时间数据。设置成 <code>'time'</code> 则能支持自动解析数据成时间戳（timestamp），比如该维度的数据是 '2017-05-10'，会自动被解析。如果这个维度被用在时间数轴（<a href="https://echarts.apache.org/option.html##xAxis.type" rel="nofollow noopener noreferrer" target="_blank">axis.type</a> 为 <code>'time'</code>）上，那么会被自动设置为 <code>'time'</code> 类型。时间类型的支持参见 <a href="https://echarts.apache.org/option.html##series.data" rel="nofollow noopener noreferrer" target="_blank">data</a>。</li>
+<li><code>'float'</code>: 如果设置成 <code>'float'</code>，在存储时候会使用 <code>TypedArray</code>，对性能优化有好处。</li>
+<li><code>'int'</code>: 如果设置成 <code>'int'</code>，在存储时候会使用 <code>TypedArray</code>，对性能优化有好处。</li>
+</ul>
+<h2 id="数据到图形的映射（-seriesencode-）"><a href="#%E6%95%B0%E6%8D%AE%E5%88%B0%E5%9B%BE%E5%BD%A2%E7%9A%84%E6%98%A0%E5%B0%84%EF%BC%88-seriesencode-%EF%BC%89" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>数据到图形的映射（ series.encode ）</h2>
+<p>了解了维度的概念后，我们就可以使用 <a href="https://echarts.apache.org/option.html##series.encode" rel="nofollow noopener noreferrer" target="_blank">series.encode</a> 来做映射。总体是这样的感觉：</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/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>
+<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..5109d78
--- /dev/null
+++ b/docs/zh/concepts/event/index.html
@@ -0,0 +1,58 @@
+<!doctype html>
+<html data-n-head-ssr>
+ <head>
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="ECharts Handbook"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/echarts-handbook/_nuxt/ [...]
+ </head>
+ <body>
+ <div data-server-rendered="true" id="__nuxt"><!----><div id="__layout"><div><nav role="navigation" class="navbar navbar-default navbar-fixed-top"><div class="container-fluid"><div class="navbar-header"><button type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href [...]
+<p>在 Apache ECharts 的图表中用户的操作将会触发相应的事件。开发者可以监听这些事件，然后通过回调函数做相应的处理，比如跳转到一个地址，或者弹出对话框，或者做数据下钻等等。</p>
+<p>ECharts 中的事件名称对应 DOM 事件名称，均为小写的字符串，如下是一个绑定点击操作的示例。</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<p>在 ECharts 中事件分为两种类型，一种是用户鼠标操作点击，或者 hover 图表的图形时触发的事件，还有一种是用户在使用可以交互的组件后触发的行为事件，例如在切换图例开关时触发的 <a href="https://echarts.apache.org/api.html#events.legendselectchanged" rel="nofollow noopener noreferrer" target="_blank">'legendselectchanged'</a> 事件（这里需要注意切换图例开关是不会触发 <code>'legendselected'</code> 事件的），数据区域缩放时触发的 <a href="https://echarts.apache.org/api.html#events.legendselectchanged" rel="nofollow noopener noreferrer" target="_blank">'datazoom'</a> 事件等等。</p>
+<h2 id="鼠标事件的处理"><a href="#%E9%BC%A0%E6%A0%87%E4%BA%8B%E4%BB%B6%E7%9A%84%E5%A4%84%E7%90%86" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>鼠标事件的处理</h2>
+<p>ECharts 支持常规的鼠标事件类型，包括 <code>'click'</code>、 <code>'dblclick'</code>、 <code>'mousedown'</code>、 <code>'mousemove'</code>、 <code>'mouseup'</code>、 <code>'mouseover'</code>、 <code>'mouseout'</code>、 <code>'globalout'</code>、 <code>'contextmenu'</code> 事件。下面先来看一个简单的点击柱状图后打开相应的百度搜索页面的示例。</p>
+<div class="nuxt-content-highlight"><!----></div>
+<p>所有的鼠标事件包含参数 <code>params</code>，这是一个包含点击图形的数据信息的对象，如下格式：</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-ts line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<p>如何区分鼠标点击到了哪里：</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<p>使用 <code>query</code> 只对指定的组件的图形元素的触发回调：</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<p><code>query</code> 可为 <code>string</code> 或者 <code>Object</code>。</p>
+<p>如果为 <code>string</code> 表示组件类型。格式可以是 'mainType' 或者 'mainType.subType'。例如：</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<p>如果为 <code>Object</code>，可以包含以下一个或多个属性，每个属性都是可选的：</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-ts line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<p>例如：</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<p>例如：</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<p>例如：</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<p>例如：</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<p>你可以在回调函数中获得这个对象中的数据名、系列名称后在自己的数据仓库中索引得到其它的信息后更新图表，显示浮层等等，如下示例代码：</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<h2 id="组件交互的行为事件"><a href="#%E7%BB%84%E4%BB%B6%E4%BA%A4%E4%BA%92%E7%9A%84%E8%A1%8C%E4%B8%BA%E4%BA%8B%E4%BB%B6" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>组件交互的行为事件</h2>
+<p>在 ECharts 中基本上所有的组件交互行为都会触发相应的事件，常用的事件和事件对应参数在 <a href="https://echarts.apache.org//api.html#events" rel="nofollow noopener noreferrer" target="_blank">events</a> 文档中有列出。</p>
+<p>下面是监听一个图例开关的示例：</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<h2 id="代码触发-echarts-中组件的行为"><a href="#%E4%BB%A3%E7%A0%81%E8%A7%A6%E5%8F%91-echarts-%E4%B8%AD%E7%BB%84%E4%BB%B6%E7%9A%84%E8%A1%8C%E4%B8%BA" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>代码触发 ECharts 中组件的行为</h2>
+<p>上面提到诸如 <code>'legendselectchanged'</code> 事件会由组件交互的行为触发，那除了用户的交互操作，有时候也会有需要在程序里调用方法触发图表的行为，诸如显示 tooltip，选中图例。</p>
+<p>在 ECharts 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..5f16fba
--- /dev/null
+++ b/docs/zh/concepts/legend/index.html
@@ -0,0 +1,35 @@
+<!doctype html>
+<html data-n-head-ssr>
+ <head>
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="ECharts Handbook"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/echarts-handbook/_nuxt/ [...]
+ </head>
+ <body>
+ <div data-server-rendered="true" id="__nuxt"><!----><div id="__layout"><div><nav role="navigation" class="navbar navbar-default navbar-fixed-top"><div class="container-fluid"><div class="navbar-header"><button type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href [...]
+<p>图例是图表中对内容区元素的注释、用不同形状、颜色、文字等来标示不同数据列，通过点击对应数据列的标记，可以显示或隐藏该数据列。图例虽然不是图表中的主要信息、却是了解图表信息的钥匙。</p>
+<h2 id="布局"><a aria-hidden="true" href="#%E5%B8%83%E5%B1%80" tabindex="-1"><span class="icon icon-link"></span></a>布局</h2>
+<p>图例一般放在图表的右上角、也可以放在图表的底部、同一页面中的所有图例位置保持一致，可以横排对齐也可以纵排对齐。还要综合考虑整体的图表空间是适合哪种摆放方式。当图表纵向空间紧张或者内容区量过大的时候、建议摆放在图表的下方。下面是几种图例的摆放方式：</p>
+<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 aria-hidden="true" href="#%E6%A0%B7%E5%BC%8F" tabindex="-1"><span class="icon icon-link"></span></a>样式</h2>
+<p>在深色系背景下、为了方便阅读，建议给图例加上半透明的浅色背景层，文字颜色设置为浅色。</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<p>图例的颜色标签有很多种设计方式、针对不同的图表、图例样式也会有所不同。</p>
+<img max-width="830" width="80%" height="80%" src="images/design/legend/charts_sign_img04.png">
+
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<h2 id="交互"><a aria-hidden="true" href="#%E4%BA%A4%E4%BA%92" tabindex="-1"><span class="icon icon-link"></span></a>交互</h2>
+<p>根据场景需要，图例可支持交互操作，点击控制显示或隐藏对应的数据列；</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<h2 id="图例注意事项"><a aria-hidden="true" href="#%E5%9B%BE%E4%BE%8B%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9" tabindex="-1"><span class="icon icon-link"></span></a>图例注意事项</h2>
+<p>图例要要注意视情况使用，有些双轴图包含了多种图表类型，不同类型的图例样式要有所区分。</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<p>当图表只有一种数据信息时，用图表标题说明数据信息即可。建议此时不要加上图例。</p></div> <div class="table-of-contents"><h4 class="toc-container-header">本页目录</h4> <ul><li class="toc2"><a href="/echarts-handbook/zh/concepts/legend#%E5%B8%83%E5%B1%80">布局</a></li><li class="toc2"><a href="/echarts-handbook/zh/concepts/legend#%E6%A0%B7%E5%BC%8F">样式</a></li><li class="toc2"><a href="/echarts-handbook/zh/concepts/legend#%E4%BA%A4%E4%BA%92">交互</a></li><li class="toc2"><a href="/echarts-handbook/zh/concepts/legend#%E5%9B%BE%E4%BE%8 [...]
+ <script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
+ </body>
+</html>
diff --git a/docs/zh/concepts/style/index.html b/docs/zh/concepts/style/index.html
new file mode 100644
index 0000000..dc41c96
--- /dev/null
+++ b/docs/zh/concepts/style/index.html
@@ -0,0 +1,52 @@
+<!doctype html>
+<html data-n-head-ssr>
+ <head>
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="ECharts Handbook"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/echarts-handbook/_nuxt/ [...]
+ </head>
+ <body>
+ <div data-server-rendered="true" id="__nuxt"><!----><div id="__layout"><div><nav role="navigation" class="navbar navbar-default navbar-fixed-top"><div class="container-fluid"><div class="navbar-header"><button type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href [...]
+<p>本文主要是大略概述，用哪些方法，可以在 Apache ECharts<sup>TM</sup> 中设置样式，改变图形元素或者文字的颜色、明暗、大小等。</p>
+<blockquote>
+<p>之所以用“样式”这种可能不很符合数据可视化思维的词，是因为，比较通俗易懂。</p>
+</blockquote>
+<p>本文介绍这几种方式，他们的功能范畴可能会有交叉（即同一种细节的效果可能可以用不同的方式实现），但是他们各有各的场景偏好。</p>
+<ul>
+<li>颜色主题（Theme）</li>
+<li>调色盘</li>
+<li>直接样式设置（itemStyle、lineStyle、areaStyle、label、...）</li>
+<li>视觉映射（visualMap）</li>
+</ul>
+<h2 id="颜色主题（theme）"><a href="#%E9%A2%9C%E8%89%B2%E4%B8%BB%E9%A2%98%EF%BC%88theme%EF%BC%89" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>颜色主题（Theme）</h2>
+<p>最简单的更改全局样式的方式，是直接采用颜色主题（theme）。例如，在 <a href="$%7BwebsitePath%7D/examples">示例集合</a> 中，可以选择 “Theme”，直接看到采用主题的效果。</p>
+<p>ECharts4 开始，除了一贯的默认主题外，新内置了两套主题，分别为 <code>'light'</code> 和 <code>'dark'</code>。可以这么来使用它们：</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<p>或者</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<p>其他的主题，没有内置在 ECharts 中，需要自己加载。这些主题可以在 <a href="https://echarts.apache.org/theme-builder.html" rel="nofollow noopener noreferrer" target="_blank">主题编辑器</a> 里访问到。也可以使用这个主题编辑器，自己编辑主题。下载下来的主题可以这样使用：</p>
+<p>如果主题保存为 JSON 文件，那么可以自行加载和注册，例如：</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<p>如果保存为 UMD 格式的 JS 文件，那么支持了自注册，直接引入 JS 文件即可：</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<h2 id="调色盘"><a href="#%E8%B0%83%E8%89%B2%E7%9B%98" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>调色盘</h2>
+<p>调色盘，可以在 option 中设置。它给定了一组颜色，图形、系列会自动从其中选择颜色。
+可以设置全局的调色盘，也可以设置系列自己专属的调色盘。</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<h2 id="直接的样式设置-itemstyle-linestyle-areastyle-label-"><a href="#%E7%9B%B4%E6%8E%A5%E7%9A%84%E6%A0%B7%E5%BC%8F%E8%AE%BE%E7%BD%AE-itemstyle-linestyle-areastyle-label-" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>直接的样式设置 itemStyle, lineStyle, areaStyle, label, ...</h2>
+<p>直接的样式设置是比较常用设置方式。纵观 ECharts 的 <a href="https://echarts.apache.org/option.html#" rel="nofollow noopener noreferrer" target="_blank">option</a> 中，很多地方可以设置 <a href="https://echarts.apache.org/option.html##series-bar.itemStyle" rel="nofollow noopener noreferrer" target="_blank">itemStyle</a>、<a href="https://echarts.apache.org/option.html##series-line.lineStyle" rel="nofollow noopener noreferrer" target="_blank">lineStyle</a>、<a href="https://echarts.apache.org/option.html##series-line.ar [...]
+<p>一般来说，ECharts 的各个系列和组件，都遵从这些命名习惯，虽然不同图表和组件中，<code>itemStyle</code>、<code>label</code> 等可能出现在不同的地方。</p>
+<p>在下面例子中我们给气泡图设置了阴影，渐变色等复杂的样式，你可以修改代码中的样式看修改后的效果：</p>
+<div class="nuxt-content-highlight"><!----></div>
+<h2 id="高亮的样式：emphasis"><a href="#%E9%AB%98%E4%BA%AE%E7%9A%84%E6%A0%B7%E5%BC%8F%EF%BC%9Aemphasis" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>高亮的样式：emphasis</h2>
+<p>在鼠标悬浮到图形元素上时，一般会出现高亮的样式。默认情况下，高亮的样式是根据普通样式自动生成的。但是高亮的样式也可以自己定义，主要是通过 <a href="https://echarts.apache.org/option.html##series-bar.emphasis" rel="nofollow noopener noreferrer" target="_blank">emphasis</a> 属性来定制。<a href="https://echarts.apache.org/option.html##series-bar.emphasis" rel="nofollow noopener noreferrer" target="_blank">emphsis</a> 中的结构，和普通样式的结构相同，例如：</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<p>注意：在 ECharts4 以前，高亮和普通样式的写法，是这样的：</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<p>这种写法 <strong>仍然被兼容</strong>，但是，不再推荐。事实上，多数情况下，使用者只会配置普通状态下的样式，而使用默认的高亮样式。所以在 ECharts4 中，支持不写 <code>normal</code> 的配置方法（即本文开头的那种写法），使得配置项更扁平简单。</p>
+<h2 id="通过-visualmap-组件设定样式"><a href="#%E9%80%9A%E8%BF%87-visualmap-%E7%BB%84%E4%BB%B6%E8%AE%BE%E5%AE%9A%E6%A0%B7%E5%BC%8F" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>通过 visualMap 组件设定样式</h2>
+<p><a href="https://echarts.apache.org/option.html##visualMap" rel="nofollow noopener noreferrer" target="_blank">visualMap 组件</a> 能指定数据到颜色、图形尺寸的映射规则，详见 <a href="zh/concepts/visual-map">数据的视觉映射</a>。</p></div> <div class="table-of-contents"><h4 class="toc-container-header">本页目录</h4> <ul><li class="toc2"><a href="/echarts-handbook/zh/concepts/style#%E9%A2%9C%E8%89%B2%E4%B8%BB%E9%A2%98%EF%BC%88theme%EF%BC%89">颜色主题（Theme）</a></li><li class="toc2"><a href="/echarts-handbook/zh/concepts/style# [...]
+ <script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
+ </body>
+</html>
diff --git a/docs/zh/concepts/visual-map/index.html b/docs/zh/concepts/visual-map/index.html
new file mode 100644
index 0000000..b308809
--- /dev/null
+++ b/docs/zh/concepts/visual-map/index.html
@@ -0,0 +1,49 @@
+<!doctype html>
+<html data-n-head-ssr>
+ <head>
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="ECharts Handbook"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/echarts-handbook/_nuxt/ [...]
+ </head>
+ <body>
+ <div data-server-rendered="true" id="__nuxt"><!----><div id="__layout"><div><nav role="navigation" class="navbar navbar-default navbar-fixed-top"><div class="container-fluid"><div class="navbar-header"><button type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href [...]
+<p>数据可视化是数据到视觉元素的映射过程（这个过程也可称为视觉编码，视觉元素也可称为视觉通道）。</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..54f8ec2
--- /dev/null
+++ b/docs/zh/get-started/index.html
@@ -0,0 +1,30 @@
+<!doctype html>
+<html data-n-head-ssr>
+ <head>
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="ECharts Handbook"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/echarts-handbook/_nuxt/ [...]
+ </head>
+ <body>
+ <div data-server-rendered="true" id="__nuxt"><!----><div id="__layout"><div><nav role="navigation" class="navbar navbar-default navbar-fixed-top"><div class="container-fluid"><div class="navbar-header"><button type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href [...]
+<h2 id="获取-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/download">安装</a>中查看所有方式。这里，我们以从 <a href="https://www.jsdelivr.com/package/npm/echarts" rel="nofollow noopener noreferrer" target="_blank">jsDelivr</a> CDN 上获取为例，介绍如何快速安装。</p>
+<p>在 <a href="https://www.jsdelivr.com/package/npm/echarts" rel="nofollow noopener noreferrer" target="_blank">https://www.jsdelivr.com/package/npm/echarts</a> 选择 <code>dist/echarts.js</code>，点击并保存为 <code>echarts.js</code> 文件。</p>
+<blockquote>
+<p>关于这些文件的介绍，可以在下一篇教程<a href="zh/basics/download">安装</a>中了解更多信息。</p>
+</blockquote>
+<h2 id="引入-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..18959dd
--- /dev/null
+++ b/docs/zh/index.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<html data-n-head-ssr>
+ <head>
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="ECharts Handbook"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/echarts-handbook/_nuxt/ [...]
+ </head>
+ <body>
+ <div data-server-rendered="true" id="__nuxt"><!----><div id="__layout"><div><nav role="navigation" class="navbar navbar-default navbar-fixed-top"><div class="container-fluid"><div class="navbar-header"><button type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href [...]
+ this is index
+</div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script defer src="/echarts-handbook/_nuxt/static/1626848782/zh/state.js"></script><script src="/echarts-handbook/_nuxt/8966669.js" defer></script><script src="/echarts-handbook/_nuxt/js/4e1d6e22b61114e5daf3.js" defer></script><script src="/echarts-handbook/_nuxt/js/e207ecd53819d2e6f044.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..b232b05
--- /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>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="ECharts Handbook"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/echarts-handbook/_nuxt/ [...]
+ </head>
+ <body>
+ <div data-server-rendered="true" id="__nuxt"><!----><div id="__layout"><div><nav role="navigation" class="navbar navbar-default navbar-fixed-top"><div class="container-fluid"><div class="navbar-header"><button type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href [...]
+<h2 id="新增一个-markdown-文件"><a href="#%E6%96%B0%E5%A2%9E%E4%B8%80%E4%B8%AA-markdown-%E6%96%87%E4%BB%B6" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>新增一个 markdown 文件</h2>
+<p>在 <code>contents/zh/</code>（中文文章）或 <code>contents/en/</code>（英文文章）目录下新增一个 markdown 文件，最多支持三级目录。将路径及标题信息更新在 <code>contents/zh/posts.yml</code> 或 <code>contents/en/posts.yml</code>。</p>
+<p>markdown 文件名称小写，用 <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