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/24 08:55:31 UTC
[echarts-handbook] 01/01: Deploying to gh-pages from @ apache/echarts-handbook@4bfaa9d0387d75494b8d139375fcd01d2251fabc 🚀
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 9e9c4a1fa05d89c7a2cd1d758ebb10952de5bccc
Author: pissang <sh...@baidu.com>
AuthorDate: Sat Jul 24 08:55:18 2021 +0000
Deploying to gh-pages from @ apache/echarts-handbook@4bfaa9d0387d75494b8d139375fcd01d2251fabc 🚀
---
docs/.nojekyll | 0
docs/200.html | 13 +++
docs/README.md | 11 ++
docs/_nuxt/954fda3.js | 1 +
docs/_nuxt/LICENSES | 77 ++++++++++++
docs/_nuxt/content/db-96169433.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/03856525ab568079735f.js | 2 +
docs/_nuxt/js/227a326587012a0180cb.js | 1 +
docs/_nuxt/js/3c08457ca17807c1ba33.js | 1 +
docs/_nuxt/js/4b6ba5ecc0c117490f4c.js | 2 +
docs/_nuxt/js/576415a1baabca9122a3.js | 1 +
docs/_nuxt/js/5bbc04459a97c3582266.js | 1 +
docs/_nuxt/js/5f39294fb36cb7440d77.js | 2 +
docs/_nuxt/js/61451f10d21696db8bb6.js | 1 +
docs/_nuxt/js/c88caa0eb12c7c76ce8d.js | 1 +
docs/_nuxt/js/d32a2b78a9dfaca8a440.js | 1 +
.../static/1627116914/en/basics/help/payload.js | 1 +
.../static/1627116914/en/basics/help/state.js | 1 +
.../static/1627116914/en/basics/import/payload.js | 1 +
.../static/1627116914/en/basics/import/state.js | 1 +
.../1627116914/en/basics/inspiration/payload.js | 1 +
.../1627116914/en/basics/inspiration/state.js | 1 +
.../1627116914/en/best-practice/aria/payload.js | 1 +
.../1627116914/en/best-practice/aria/state.js | 1 +
.../en/best-practice/canvas-vs-svg/payload.js | 1 +
.../en/best-practice/canvas-vs-svg/state.js | 1 +
.../static/1627116914/en/concepts/axis/payload.js | 1 +
.../static/1627116914/en/concepts/axis/state.js | 1 +
.../1627116914/en/concepts/chart-size/payload.js | 1 +
.../1627116914/en/concepts/chart-size/state.js | 1 +
.../en/concepts/data-transform/payload.js | 1 +
.../1627116914/en/concepts/data-transform/state.js | 1 +
.../1627116914/en/concepts/dataset/payload.js | 1 +
.../static/1627116914/en/concepts/dataset/state.js | 1 +
.../static/1627116914/en/concepts/event/payload.js | 1 +
.../static/1627116914/en/concepts/event/state.js | 1 +
.../1627116914/en/concepts/legend/payload.js | 1 +
.../static/1627116914/en/concepts/legend/state.js | 1 +
.../static/1627116914/en/concepts/style/payload.js | 1 +
.../static/1627116914/en/concepts/style/state.js | 1 +
.../1627116914/en/concepts/visual-map/payload.js | 1 +
.../1627116914/en/concepts/visual-map/state.js | 1 +
.../static/1627116914/en/get-started/payload.js | 1 +
.../static/1627116914/en/get-started/state.js | 1 +
.../1627116914/en/meta/edit-guide/payload.js | 1 +
.../static/1627116914/en/meta/edit-guide/state.js | 1 +
docs/_nuxt/static/1627116914/manifest.js | 1 +
docs/_nuxt/static/1627116914/payload.js | 1 +
docs/_nuxt/static/1627116914/state.js | 1 +
docs/_nuxt/static/1627116914/zh/payload.js | 1 +
docs/_nuxt/static/1627116914/zh/state.js | 1 +
docs/en/basics/help/index.html | 36 ++++++
docs/en/basics/import/index.html | 29 +++++
docs/en/basics/inspiration/index.html | 18 +++
docs/en/best-practice/aria/index.html | 29 +++++
docs/en/best-practice/canvas-vs-svg/index.html | 39 +++++++
docs/en/concepts/axis/index.html | 41 +++++++
docs/en/concepts/chart-size/index.html | 42 +++++++
docs/en/concepts/data-transform/index.html | 129 +++++++++++++++++++++
docs/en/concepts/dataset/index.html | 127 ++++++++++++++++++++
docs/en/concepts/event/index.html | 59 ++++++++++
docs/en/concepts/legend/index.html | 32 +++++
docs/en/concepts/style/index.html | 49 ++++++++
docs/en/concepts/visual-map/index.html | 49 ++++++++
docs/en/get-started/index.html | 30 +++++
docs/en/meta/edit-guide/index.html | 108 +++++++++++++++++
docs/favicon.ico | Bin 0 -> 1393 bytes
docs/images/demo.png | Bin 0 -> 25960 bytes
docs/images/design/axis/charts_axis_img01.jpg | Bin 0 -> 52533 bytes
docs/images/design/axis/charts_axis_img02.jpg | Bin 0 -> 108274 bytes
docs/images/design/axis/charts_axis_img02.png | Bin 0 -> 48183 bytes
docs/images/design/axis/charts_axis_img04.png | Bin 0 -> 35306 bytes
docs/images/design/axis/charts_axis_img05.png | Bin 0 -> 127743 bytes
docs/images/design/axis/charts_axis_img07.png | Bin 0 -> 35872 bytes
docs/images/design/axis/charts_axis_img10.png | Bin 0 -> 101322 bytes
docs/images/design/axis/charts_axis_img12.png | Bin 0 -> 121293 bytes
docs/images/design/bar/bar01.jpg | Bin 0 -> 84318 bytes
docs/images/design/bar/bar02.jpg | Bin 0 -> 75564 bytes
docs/images/design/bar/bar03.jpg | Bin 0 -> 91679 bytes
docs/images/design/bar/bar04.jpg | Bin 0 -> 70479 bytes
.../bi-directional-bar/bi-directional-bar01.jpg | Bin 0 -> 75564 bytes
.../bi-directional-bar/bi-directional-bar02.jpg | Bin 0 -> 86140 bytes
docs/images/design/color/color01.png | Bin 0 -> 46913 bytes
docs/images/design/color/color02.png | Bin 0 -> 801126 bytes
docs/images/design/color/color03.png | Bin 0 -> 24856 bytes
docs/images/design/color/color04.png | Bin 0 -> 71418 bytes
docs/images/design/legend/charts_sign_img01.png | Bin 0 -> 57372 bytes
docs/images/design/legend/charts_sign_img02.png | Bin 0 -> 35627 bytes
docs/images/design/legend/charts_sign_img03.png | Bin 0 -> 33294 bytes
docs/images/design/legend/charts_sign_img04.png | Bin 0 -> 18736 bytes
docs/images/design/line/line01.jpg | Bin 0 -> 89525 bytes
docs/images/design/pie/pie01.jpg | Bin 0 -> 176305 bytes
docs/images/design/pie/pie02.jpg | Bin 0 -> 167844 bytes
docs/images/design/pie/pie03.jpg | Bin 0 -> 141965 bytes
docs/images/design/pie/pie04.jpg | Bin 0 -> 76093 bytes
docs/images/design/scatter/scatter5.jpg | Bin 0 -> 99795 bytes
docs/images/feature-v5/dashboard-pointer.png | Bin 0 -> 238230 bytes
docs/images/feature-v5/dataZoom.png | Bin 0 -> 14459 bytes
docs/images/feature-v5/dirty-rect.gif | Bin 0 -> 1618036 bytes
docs/images/feature-v5/dirty-rect.png | Bin 0 -> 802179 bytes
docs/images/feature-v5/echarts-5-en.png | Bin 0 -> 24363 bytes
docs/images/feature-v5/echarts-5.png | Bin 0 -> 24106 bytes
docs/images/feature-v5/gauge-pointer.png | Bin 0 -> 238230 bytes
docs/images/feature-v5/new-theme-dark.png | Bin 0 -> 101643 bytes
docs/images/feature-v5/new-theme-light.png | Bin 0 -> 99276 bytes
docs/images/feature-v5/new-tooltip-2 copy.png | Bin 0 -> 52109 bytes
docs/images/feature-v5/new-tooltip-2.png | Bin 0 -> 173904 bytes
docs/images/feature-v5/new-tooltip.png | Bin 0 -> 26152 bytes
docs/images/feature-v5/new-tooltip2.png | Bin 0 -> 52109 bytes
docs/images/feature-v5/pie-label copy.png | Bin 0 -> 56479 bytes
docs/images/feature-v5/pie-label-2.png | Bin 0 -> 53964 bytes
docs/images/feature-v5/pie-label.png | Bin 0 -> 56479 bytes
docs/images/feature-v5/theme-color.png | Bin 0 -> 543699 bytes
docs/images/feature-v5/time-axis-2.png | Bin 0 -> 55882 bytes
docs/images/feature-v5/time-axis.png | Bin 0 -> 69868 bytes
docs/images/feature-v5/time-axis2.png | Bin 0 -> 55620 bytes
docs/images/feature-v5/timeline.png | Bin 0 -> 23411 bytes
docs/index.html | 15 +++
docs/zh/index.html | 15 +++
123 files changed, 1005 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..d4178c5
--- /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/954fda3. [...]
+ <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/954fda3.js"></script><script src="/echarts-handbook/_nuxt/js/4b6ba5ecc0c117490f4c.js"></script><script src="/echarts-handbook/_nuxt/js/5f39294fb36cb7440d77.js"></script><script src="/echarts-handbook/_nuxt/js/d32a2b78a9dfaca8a440.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/954fda3.js b/docs/_nuxt/954fda3.js
new file mode 100644
index 0000000..b65df99
--- /dev/null
+++ b/docs/_nuxt/954fda3.js
@@ -0,0 +1 @@
+!function(e){function t(data){for(var t,n,o=data[0],f=data[1],d=data[2],i=0,h=[];i<o.length;i++)n=o[i],Object.prototype.hasOwnProperty.call(c,n)&&c[n]&&h.push(c[n][0]),c[n]=0;for(t in f)Object.prototype.hasOwnProperty.call(f,t)&&(e[t]=f[t]);for(m&&m(data);h.length;)h.shift()();return l.push.apply(l,d||[]),r()}function r(){for(var e,i=0;i<l.length;i++){for(var t=l[i],r=!0,n=1;n<t.length;n++){var o=t[n];0!==c[o]&&(r=!1)}r&&(l.splice(i--,1),e=f(f.s=t[0]))}return e}var n={},o={7:0},c={7:0},l [...]
\ No newline at end of file
diff --git a/docs/_nuxt/LICENSES b/docs/_nuxt/LICENSES
new file mode 100644
index 0000000..7ac5b1a
--- /dev/null
+++ b/docs/_nuxt/LICENSES
@@ -0,0 +1,77 @@
+/*!
+ * clipboard.js v2.0.8
+ * https://clipboardjs.com/
+ *
+ * Licensed MIT © Zeno Rocha
+ */
+
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+/**
+ * Prism: Lightweight, robust, elegant syntax highlighting
+ *
+ * @license MIT <https://opensource.org/licenses/MIT>
+ * @author Lea Verou <https://lea.verou.me>
+ * @namespace
+ * @public
+ */
+
+
+/*!
+ * vue-router v3.5.1
+ * (c) 2021 Evan You
+ * @license MIT
+ */
+
+/*!
+ * JavaScript Cookie v2.2.1
+ * https://github.com/js-cookie/js-cookie
+ *
+ * Copyright 2006, 2015 Klaus Hartl & Fagner Brack
+ * Released under the MIT license
+ */
+
+/*!
+ * Vue.js v2.6.12
+ * (c) 2014-2020 Evan You
+ * Released under the MIT License.
+ */
+
+/*!
+ * cookie
+ * Copyright(c) 2012-2014 Roman Shtylman
+ * Copyright(c) 2015 Douglas Christopher Wilson
+ * MIT Licensed
+ */
+
+/*!
+ * vuex v3.6.2
+ * (c) 2021 Evan You
+ * @license MIT
+ */
+
+
+/*!
+ * vue-client-only v2.0.0
+ * (c) 2019-present egoist <0x...@gmail.com>
+ * Released under the MIT License.
+ */
+
+/*!
+ * vue-no-ssr v1.1.1
+ * (c) 2018-present egoist <0x...@gmail.com>
+ * Released under the MIT License.
+ */
diff --git a/docs/_nuxt/content/db-96169433.json b/docs/_nuxt/content/db-96169433.json
new file mode 100644
index 0000000..917833a
--- /dev/null
+++ b/docs/_nuxt/content/db-96169433.json
@@ -0,0 +1 @@
+{"_env":"NODEJS","_serializationMethod":"normal","_autosave":false,"_autosaveInterval":5000,"_collections":[{"name":"items","unindexedSortComparator":"js","defaultLokiOperatorPackage":"js","_dynamicViews":[],"uniqueNames":[],"transforms":{},"rangedIndexes":{},"_data":[{"slug":"get-started","toc":[{"id":"getting-apache-echarts","depth":2,"text":"Getting Apache ECharts"},{"id":"including-echarts","depth":2,"text":"Including ECharts"},{"id":"plotting-a-simple-chart","depth":2,"text":"Plotti [...]
\ No newline at end of file
diff --git a/docs/_nuxt/css/1c37eb7.css b/docs/_nuxt/css/1c37eb7.css
new file mode 100644
index 0000000..193b900
--- /dev/null
+++ b/docs/_nuxt/css/1c37eb7.css
@@ -0,0 +1 @@
+.prism-editor-wrapper{width:100%;height:100%;display:flex;align-items:flex-start;overflow:auto;-o-tab-size:1.5em;tab-size:1.5em;-moz-tab-size:1.5em}@media (-ms-high-contrast:active),(-ms-high-contrast:none){.prism-editor-wrapper .prism-editor__textarea{color:transparent!important}.prism-editor-wrapper .prism-editor__textarea::-moz-selection{background-color:#accef7!important;color:transparent!important}.prism-editor-wrapper .prism-editor__textarea::selection{background-color:#accef7!impo [...]
\ No newline at end of file
diff --git a/docs/_nuxt/css/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/03856525ab568079735f.js b/docs/_nuxt/js/03856525ab568079735f.js
new file mode 100644
index 0000000..d4c93d6
--- /dev/null
+++ b/docs/_nuxt/js/03856525ab568079735f.js
@@ -0,0 +1,2 @@
+/*! For license information please see ../LICENSES */
+(window.webpackJsonp=window.webpackJsonp||[]).push([[1],{204:function(e,t,n){"use strict";n.d(t,"a",(function(){return we})),n.d(t,"c",(function(){return Ce})),n.d(t,"d",(function(){return fe})),n.d(t,"e",(function(){return de})),n.d(t,"f",(function(){return V})),n.d(t,"g",(function(){return ee})),n.d(t,"h",(function(){return _e}));var r=n(0);function o(e){return"function"==typeof e&&/native code/.test(e.toString())}var l="undefined"!=typeof Symbol&&o(Symbol)&&"undefined"!=typeof Reflect [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/227a326587012a0180cb.js b/docs/_nuxt/js/227a326587012a0180cb.js
new file mode 100644
index 0000000..03dfba2
--- /dev/null
+++ b/docs/_nuxt/js/227a326587012a0180cb.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[6],{263:function(t,e,n){"use strict";n.r(e);var r=n(2),c=(n(20),n(0)),o=(n(216),n(217)),l=c.default.extend({components:{Contributors:o.a},mounted:function(){this.$store.commit("setLocale","zh")},asyncData:function(t){return Object(r.a)(regeneratorRuntime.mark((function e(){var n,r,c,article;return regeneratorRuntime.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return n=t.$content,r=t.params,c="zh/".concat(r.pathMatch),e.next=4 [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/3c08457ca17807c1ba33.js b/docs/_nuxt/js/3c08457ca17807c1ba33.js
new file mode 100644
index 0000000..c29eff5
--- /dev/null
+++ b/docs/_nuxt/js/3c08457ca17807c1ba33.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[10],{259:function(e,t,r){"use strict";r.r(t);var n="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ_$",o=/[<>\b\f\n\r\t\0\u2028\u2029]/g,c=/^(?:do|if|in|for|int|let|new|try|var|byte|case|char|else|enum|goto|long|this|void|with|await|break|catch|class|const|final|float|short|super|throw|while|yield|delete|double|export|import|native|return|switch|throws|typeof|boolean|default|extends|finally|package|private|abstract|continue|debugg [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/4b6ba5ecc0c117490f4c.js b/docs/_nuxt/js/4b6ba5ecc0c117490f4c.js
new file mode 100644
index 0000000..250254c
--- /dev/null
+++ b/docs/_nuxt/js/4b6ba5ecc0c117490f4c.js
@@ -0,0 +1,2 @@
+/*! For license information please see ../LICENSES */
+(window.webpackJsonp=window.webpackJsonp||[]).push([[3],[function(t,e,n){"use strict";n.r(e),function(t,n){var r=Object.freeze({});function o(t){return null==t}function c(t){return null!=t}function f(t){return!0===t}function l(t){return"string"==typeof t||"number"==typeof t||"symbol"==typeof t||"boolean"==typeof t}function h(t){return null!==t&&"object"==typeof t}var d=Object.prototype.toString;function v(t){return"[object Object]"===d.call(t)}function y(t){return"[object RegExp]"===d.ca [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/576415a1baabca9122a3.js b/docs/_nuxt/js/576415a1baabca9122a3.js
new file mode 100644
index 0000000..e74a847
--- /dev/null
+++ b/docs/_nuxt/js/576415a1baabca9122a3.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[0],{205:function(t,n,e){t.exports={}},212:function(t,n,e){t.exports={}},213:function(t,n,e){t.exports={}},214:function(t,n,e){t.exports={}},215:function(t,n,e){t.exports={}},216:function(t,n,e){"use strict";var c=e(0),o=e(204),r=(e(154),e(40),e(105)),l=Object(o.c)({props:{width:{type:[String,Number],default:"100%"},height:{type:[String,Number],default:"350"},src:String},setup:function(t,n){return{fullSrc:Object(o.a)((function(){return [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/5bbc04459a97c3582266.js b/docs/_nuxt/js/5bbc04459a97c3582266.js
new file mode 100644
index 0000000..9a817a1
--- /dev/null
+++ b/docs/_nuxt/js/5bbc04459a97c3582266.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[5],{261:function(n,e,t){"use strict";t.r(e);var r=t(2),c=(t(20),{asyncData:function(){return Object(r.a)(regeneratorRuntime.mark((function n(){return regeneratorRuntime.wrap((function(n){for(;;)switch(n.prev=n.next){case 0:case"end":return n.stop()}}),n)})))()}}),o=t(8),component=Object(o.a)(c,(function(){var n=this,e=n.$createElement;return(n._self._c||e)("div",[n._v("\n this is index\n")])}),[],!1,null,null,null);e.default=component [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/5f39294fb36cb7440d77.js b/docs/_nuxt/js/5f39294fb36cb7440d77.js
new file mode 100644
index 0000000..833d4de
--- /dev/null
+++ b/docs/_nuxt/js/5f39294fb36cb7440d77.js
@@ -0,0 +1,2 @@
+/*! For license information please see ../LICENSES */
+(window.webpackJsonp=window.webpackJsonp||[]).push([[8],{1:function(e,t,n){"use strict";n.d(t,"d",(function(){return _})),n.d(t,"l",(function(){return w})),n.d(t,"n",(function(){return x})),n.d(t,"m",(function(){return O})),n.d(t,"f",(function(){return k})),n.d(t,"b",(function(){return S})),n.d(t,"s",(function(){return C})),n.d(t,"h",(function(){return j})),n.d(t,"i",(function(){return P})),n.d(t,"e",(function(){return $})),n.d(t,"r",(function(){return L})),n.d(t,"k",(function(){return R [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/61451f10d21696db8bb6.js b/docs/_nuxt/js/61451f10d21696db8bb6.js
new file mode 100644
index 0000000..f1cb55e
--- /dev/null
+++ b/docs/_nuxt/js/61451f10d21696db8bb6.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[9],{248:function(e,t,n){var r=n(249),o=n(250),l=n(251),h=n(252),c=n(253);function d(e,t){var n="undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(!n){if(Array.isArray(e)||(n=function(e,t){if(!e)return;if("string"==typeof e)return f(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(e);if("Arguments"===n||/^(?:Ui|I)nt(?:8| [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/c88caa0eb12c7c76ce8d.js b/docs/_nuxt/js/c88caa0eb12c7c76ce8d.js
new file mode 100644
index 0000000..b071e4a
--- /dev/null
+++ b/docs/_nuxt/js/c88caa0eb12c7c76ce8d.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[4],{262:function(t,e,n){"use strict";n.r(e);var r=n(2),c=(n(20),n(0)),o=(n(216),n(217)),l=c.default.extend({components:{Contributors:o.a},mounted:function(){this.$store.commit("setLocale","en")},asyncData:function(t){return Object(r.a)(regeneratorRuntime.mark((function e(){var n,r,c,article;return regeneratorRuntime.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return n=t.$content,r=t.params,c="en/".concat(r.pathMatch),e.next=4 [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/d32a2b78a9dfaca8a440.js b/docs/_nuxt/js/d32a2b78a9dfaca8a440.js
new file mode 100644
index 0000000..f7c83f4
--- /dev/null
+++ b/docs/_nuxt/js/d32a2b78a9dfaca8a440.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[2],{105:function(t,e,r){"use strict";var l={gh:{routerBase:"/echarts-handbook",rootPath:"https://apache.github.io/echarts-handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},asf:{routerBase:"/han [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1627116914/en/basics/help/payload.js b/docs/_nuxt/static/1627116914/en/basics/help/payload.js
new file mode 100644
index 0000000..99328ba
--- /dev/null
+++ b/docs/_nuxt/static/1627116914/en/basics/help/payload.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("/en/basics/help", (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G){return {data:[{article:{slug:"help",toc:[{id:r,depth:s,text:t},{id:u,depth:p,text:v},{id:w,depth:p,text:x},{id:y,depth:p,text:z},{id:A,depth:s,text:B}],body:{type:"root",children:[{type:b,tag:"h1",props:{id:"get-help"},children:[{type:b,tag:d,props:{href:"#get-help",ariaHidden:e,tabIndex:f},children:[{type:b,tag:g,props:{className:[h,i]},children:[]}]},{type:a,value:"Get Help"}] [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1627116914/en/basics/help/state.js b/docs/_nuxt/static/1627116914/en/basics/help/state.js
new file mode 100644
index 0000000..a3b6b59
--- /dev/null
+++ b/docs/_nuxt/static/1627116914/en/basics/help/state.js
@@ -0,0 +1 @@
+window.__NUXT__=(function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,_,$,aa,ab,ac,ad,ae,af,ag,ah,ai,aj,ak,al){return {staticAssetsBase:"\u002Fecharts-handbook\u002F_nuxt\u002Fstatic\u002F1627116914",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,locale:"en",lang:{},menu:{},homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:h,children:[{title:"获取 ECharts",dir:i} [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1627116914/en/basics/import/payload.js b/docs/_nuxt/static/1627116914/en/basics/import/payload.js
new file mode 100644
index 0000000..14df38b
--- /dev/null
+++ b/docs/_nuxt/static/1627116914/en/basics/import/payload.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("/en/basics/import", (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C){return {data:[{article:{slug:"import",toc:[{id:r,depth:m,text:s},{id:t,depth:m,text:u},{id:v,depth:m,text:w},{id:x,depth:m,text:y}],body:{type:"root",children:[{type:b,tag:"h1",props:{id:"use-apache-echarts-with-bundler-and-npm"},children:[{type:b,tag:g,props:{ariaHidden:h,href:"#use-apache-echarts-with-bundler-and-npm",tabIndex:i},children:[{type:b,tag:j,props:{className:[k,l]},child [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1627116914/en/basics/import/state.js b/docs/_nuxt/static/1627116914/en/basics/import/state.js
new file mode 100644
index 0000000..521a989
--- /dev/null
+++ b/docs/_nuxt/static/1627116914/en/basics/import/state.js
@@ -0,0 +1 @@
+window.__NUXT__=(function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,_,$,aa,ab,ac,ad,ae,af,ag,ah,ai,aj,ak,al){return {staticAssetsBase:"\u002Fecharts-handbook\u002F_nuxt\u002Fstatic\u002F1627116914",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,locale:"en",lang:{},menu:{},homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:h,children:[{title:"获取 ECharts",dir:i} [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1627116914/en/basics/inspiration/payload.js b/docs/_nuxt/static/1627116914/en/basics/inspiration/payload.js
new file mode 100644
index 0000000..7d532b1
--- /dev/null
+++ b/docs/_nuxt/static/1627116914/en/basics/inspiration/payload.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("/en/basics/inspiration", (function(a,b,c,d,e,f){return {data:[{article:{slug:"inspiration",toc:[],body:{type:"root",children:[{type:b,tag:"h1",props:{id:"get-inspired"},children:[{type:b,tag:d,props:{href:"#get-inspired",ariaHidden:"true",tabIndex:-1},children:[{type:b,tag:"span",props:{className:["icon","icon-link"]},children:[]}]},{type:a,value:"Get Inspired"}]},{type:a,value:c},{type:b,tag:"p",props:{},children:[{type:a,value:"The following list provides some ideas whe [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1627116914/en/basics/inspiration/state.js b/docs/_nuxt/static/1627116914/en/basics/inspiration/state.js
new file mode 100644
index 0000000..d421436
--- /dev/null
+++ b/docs/_nuxt/static/1627116914/en/basics/inspiration/state.js
@@ -0,0 +1 @@
+window.__NUXT__=(function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,_,$,aa,ab,ac,ad,ae,af,ag,ah,ai,aj,ak,al){return {staticAssetsBase:"\u002Fecharts-handbook\u002F_nuxt\u002Fstatic\u002F1627116914",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,locale:"en",lang:{},menu:{},homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:h,children:[{title:"获取 ECharts",dir:i} [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1627116914/en/best-practice/aria/payload.js b/docs/_nuxt/static/1627116914/en/best-practice/aria/payload.js
new file mode 100644
index 0000000..d953e08
--- /dev/null
+++ b/docs/_nuxt/static/1627116914/en/best-practice/aria/payload.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("/en/best-practice/aria", (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F){return {data:[{article:{slug:"aria",toc:[{id:s,depth:t,text:u},{id:v,depth:t,text:w}],body:{type:"root",children:[{type:b,tag:"h1",props:{id:"web-accessibility"},children:[{type:b,tag:d,props:{href:"#web-accessibility",ariaHidden:k,tabIndex:m},children:[{type:b,tag:n,props:{className:[o,p]},children:[]}]},{type:a,value:"Web Accessibility"}]},{type:a,value:c},{type:b,tag:e,p [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1627116914/en/best-practice/aria/state.js b/docs/_nuxt/static/1627116914/en/best-practice/aria/state.js
new file mode 100644
index 0000000..75a034b
--- /dev/null
+++ b/docs/_nuxt/static/1627116914/en/best-practice/aria/state.js
@@ -0,0 +1 @@
+window.__NUXT__=(function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,_,$,aa,ab,ac,ad,ae,af,ag,ah,ai,aj,ak,al){return {staticAssetsBase:"\u002Fecharts-handbook\u002F_nuxt\u002Fstatic\u002F1627116914",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,locale:"en",lang:{},menu:{},homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:h,children:[{title:"获取 ECharts",dir:i} [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1627116914/en/best-practice/canvas-vs-svg/payload.js b/docs/_nuxt/static/1627116914/en/best-practice/canvas-vs-svg/payload.js
new file mode 100644
index 0000000..1172198
--- /dev/null
+++ b/docs/_nuxt/static/1627116914/en/best-practice/canvas-vs-svg/payload.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("/en/best-practice/canvas-vs-svg", (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C){return {data:[{article:{slug:"canvas-vs-svg",toc:[{id:v,depth:w,text:x},{id:y,depth:w,text:z}],body:{type:"root",children:[{type:b,tag:"h1",props:{id:"render-with-svg-or-canvas"},children:[{type:b,tag:d,props:{href:"#render-with-svg-or-canvas",ariaHidden:l,tabIndex:m},children:[{type:b,tag:n,props:{className:[o,p]},children:[]}]},{type:a,value:"Render with SVG or Canvas" [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1627116914/en/best-practice/canvas-vs-svg/state.js b/docs/_nuxt/static/1627116914/en/best-practice/canvas-vs-svg/state.js
new file mode 100644
index 0000000..4ec048c
--- /dev/null
+++ b/docs/_nuxt/static/1627116914/en/best-practice/canvas-vs-svg/state.js
@@ -0,0 +1 @@
+window.__NUXT__=(function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,_,$,aa,ab,ac,ad,ae,af,ag,ah,ai,aj,ak,al){return {staticAssetsBase:"\u002Fecharts-handbook\u002F_nuxt\u002Fstatic\u002F1627116914",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,locale:"en",lang:{},menu:{},homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:h,children:[{title:"获取 ECharts",dir:i} [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1627116914/en/concepts/axis/payload.js b/docs/_nuxt/static/1627116914/en/concepts/axis/payload.js
new file mode 100644
index 0000000..96aa5d4
--- /dev/null
+++ b/docs/_nuxt/static/1627116914/en/concepts/axis/payload.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("/en/concepts/axis", (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I){return {data:[{article:{slug:v,toc:[{id:w,depth:p,text:x},{id:y,depth:p,text:z},{id:A,depth:p,text:B},{id:C,depth:p,text:D},{id:E,depth:p,text:F}],body:{type:"root",children:[{type:b,tag:"h1",props:{id:v},children:[{type:b,tag:e,props:{href:"#axis",ariaHidden:k,tabIndex:l},children:[{type:b,tag:m,props:{className:[n,o]},children:[]}]},{type:a,value:"Axis"}]},{type:a,value: [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1627116914/en/concepts/axis/state.js b/docs/_nuxt/static/1627116914/en/concepts/axis/state.js
new file mode 100644
index 0000000..f4e311f
--- /dev/null
+++ b/docs/_nuxt/static/1627116914/en/concepts/axis/state.js
@@ -0,0 +1 @@
+window.__NUXT__=(function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,_,$,aa,ab,ac,ad,ae,af,ag,ah,ai,aj,ak,al){return {staticAssetsBase:"\u002Fecharts-handbook\u002F_nuxt\u002Fstatic\u002F1627116914",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,locale:"en",lang:{},menu:{},homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:h,children:[{title:"获取 ECharts",dir:i} [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1627116914/en/concepts/chart-size/payload.js b/docs/_nuxt/static/1627116914/en/concepts/chart-size/payload.js
new file mode 100644
index 0000000..81e26a6
--- /dev/null
+++ b/docs/_nuxt/static/1627116914/en/concepts/chart-size/payload.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("/en/concepts/chart-size", (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S){return {data:[{article:{slug:"chart-size",toc:[{id:y,depth:z,text:A},{id:B,depth:q,text:C},{id:D,depth:q,text:E},{id:F,depth:z,text:G},{id:H,depth:q,text:I},{id:J,depth:q,text:K},{id:L,depth:q,text:M}],body:{type:"root",children:[{type:b,tag:"h1",props:{id:"chart-container-and-size"},children:[{type:b,tag:d,props:{href:"#chart-container-and-size", [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1627116914/en/concepts/chart-size/state.js b/docs/_nuxt/static/1627116914/en/concepts/chart-size/state.js
new file mode 100644
index 0000000..0f8d27a
--- /dev/null
+++ b/docs/_nuxt/static/1627116914/en/concepts/chart-size/state.js
@@ -0,0 +1 @@
+window.__NUXT__=(function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,_,$,aa,ab,ac,ad,ae,af,ag,ah,ai,aj,ak,al){return {staticAssetsBase:"\u002Fecharts-handbook\u002F_nuxt\u002Fstatic\u002F1627116914",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,locale:"en",lang:{},menu:{},homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:h,children:[{title:"获取 ECharts",dir:i} [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1627116914/en/concepts/data-transform/payload.js b/docs/_nuxt/static/1627116914/en/concepts/data-transform/payload.js
new file mode 100644
index 0000000..e2d31e0
--- /dev/null
+++ b/docs/_nuxt/static/1627116914/en/concepts/data-transform/payload.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("/en/concepts/data-transform", (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,_,$,aa,ab,ac,ad,ae,af,ag,ah,ai,aj,ak,al,am,an,ao,ap){return {data:[{article:{slug:K,toc:[{id:L,depth:z,text:M},{id:N,depth:z,text:O},{id:P,depth:z,text:Q},{id:R,depth:z,text:S},{id:T,depth:z,text:U}],body:{type:"root",children:[{type:b,tag:"h1",props:{id:K},children:[{type:b,tag:h,props:{href:"#data-transform",ariaHidden:r,tabInde [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1627116914/en/concepts/data-transform/state.js b/docs/_nuxt/static/1627116914/en/concepts/data-transform/state.js
new file mode 100644
index 0000000..e0e94ce
--- /dev/null
+++ b/docs/_nuxt/static/1627116914/en/concepts/data-transform/state.js
@@ -0,0 +1 @@
+window.__NUXT__=(function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,_,$,aa,ab,ac,ad,ae,af,ag,ah,ai,aj,ak,al){return {staticAssetsBase:"\u002Fecharts-handbook\u002F_nuxt\u002Fstatic\u002F1627116914",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,locale:"en",lang:{},menu:{},homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:h,children:[{title:"获取 ECharts",dir:i} [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1627116914/en/concepts/dataset/payload.js b/docs/_nuxt/static/1627116914/en/concepts/dataset/payload.js
new file mode 100644
index 0000000..5409e9e
--- /dev/null
+++ b/docs/_nuxt/static/1627116914/en/concepts/dataset/payload.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("/en/concepts/dataset", (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,_,$,aa,ab,ac,ad,ae,af,ag,ah,ai,aj,ak,al,am,an,ao,ap,aq,ar,as,at,au,av,aw,ax,ay,az){return {data:[{article:{slug:p,toc:[{id:R,depth:w,text:"Define data under series"},{id:S,depth:w,text:"Define data in dataset"},{id:T,depth:w,text:U},{id:V,depth:w,text:"Map Row or Column of dataset to series"},{id:W,depth:w,text:X},{id:Y,depth:w,text:Z},{ [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1627116914/en/concepts/dataset/state.js b/docs/_nuxt/static/1627116914/en/concepts/dataset/state.js
new file mode 100644
index 0000000..97d8057
--- /dev/null
+++ b/docs/_nuxt/static/1627116914/en/concepts/dataset/state.js
@@ -0,0 +1 @@
+window.__NUXT__=(function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,_,$,aa,ab,ac,ad,ae,af,ag,ah,ai,aj,ak,al){return {staticAssetsBase:"\u002Fecharts-handbook\u002F_nuxt\u002Fstatic\u002F1627116914",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,locale:"en",lang:{},menu:{},homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:h,children:[{title:"获取 ECharts",dir:i} [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1627116914/en/concepts/event/payload.js b/docs/_nuxt/static/1627116914/en/concepts/event/payload.js
new file mode 100644
index 0000000..3d71142
--- /dev/null
+++ b/docs/_nuxt/static/1627116914/en/concepts/event/payload.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("/en/concepts/event", (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O){return {data:[{article:{slug:"event",toc:[{id:A,depth:r,text:B},{id:C,depth:r,text:D},{id:E,depth:r,text:F},{id:G,depth:r,text:H}],body:{type:"root",children:[{type:b,tag:"h1",props:{id:"event-and-action"},children:[{type:b,tag:k,props:{href:"#event-and-action",ariaHidden:m,tabIndex:n},children:[{type:b,tag:o,props:{className:[p,q]},children:[]}]},{type:a,valu [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1627116914/en/concepts/event/state.js b/docs/_nuxt/static/1627116914/en/concepts/event/state.js
new file mode 100644
index 0000000..256295f
--- /dev/null
+++ b/docs/_nuxt/static/1627116914/en/concepts/event/state.js
@@ -0,0 +1 @@
+window.__NUXT__=(function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,_,$,aa,ab,ac,ad,ae,af,ag,ah,ai,aj,ak,al){return {staticAssetsBase:"\u002Fecharts-handbook\u002F_nuxt\u002Fstatic\u002F1627116914",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,locale:"en",lang:{},menu:{},homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:h,children:[{title:"获取 ECharts",dir:i} [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1627116914/en/concepts/legend/payload.js b/docs/_nuxt/static/1627116914/en/concepts/legend/payload.js
new file mode 100644
index 0000000..b6bb165
--- /dev/null
+++ b/docs/_nuxt/static/1627116914/en/concepts/legend/payload.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("/en/concepts/legend", (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B){return {data:[{article:{slug:r,toc:[{id:s,depth:p,text:t},{id:u,depth:p,text:v},{id:w,depth:p,text:x},{id:y,depth:p,text:z}],body:{type:"root",children:[{type:b,tag:"h1",props:{id:r},children:[{type:b,tag:i,props:{ariaHidden:j,href:"#legend",tabIndex:k},children:[{type:b,tag:l,props:{className:[m,n]},children:[]}]},{type:a,value:"Legend"}]},{type:a,value:c},{type:b,tag:e,props:{},chil [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1627116914/en/concepts/legend/state.js b/docs/_nuxt/static/1627116914/en/concepts/legend/state.js
new file mode 100644
index 0000000..ca2a97a
--- /dev/null
+++ b/docs/_nuxt/static/1627116914/en/concepts/legend/state.js
@@ -0,0 +1 @@
+window.__NUXT__=(function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,_,$,aa,ab,ac,ad,ae,af,ag,ah,ai,aj,ak,al){return {staticAssetsBase:"\u002Fecharts-handbook\u002F_nuxt\u002Fstatic\u002F1627116914",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,locale:"en",lang:{},menu:{},homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:h,children:[{title:"获取 ECharts",dir:i} [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1627116914/en/concepts/style/payload.js b/docs/_nuxt/static/1627116914/en/concepts/style/payload.js
new file mode 100644
index 0000000..2a68194
--- /dev/null
+++ b/docs/_nuxt/static/1627116914/en/concepts/style/payload.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("/en/concepts/style", (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O){return {data:[{article:{slug:"style",toc:[{id:A,depth:u,text:y},{id:B,depth:u,text:z},{id:C,depth:u,text:D},{id:E,depth:u,text:F},{id:G,depth:u,text:H}],body:{type:"root",children:[{type:b,tag:"h1",props:{id:"overview-of-style-customization"},children:[{type:b,tag:d,props:{href:"#overview-of-style-customization",ariaHidden:n,tabIndex:o},children:[{type:b,tag:p [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1627116914/en/concepts/style/state.js b/docs/_nuxt/static/1627116914/en/concepts/style/state.js
new file mode 100644
index 0000000..d89d6f4
--- /dev/null
+++ b/docs/_nuxt/static/1627116914/en/concepts/style/state.js
@@ -0,0 +1 @@
+window.__NUXT__=(function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,_,$,aa,ab,ac,ad,ae,af,ag,ah,ai,aj,ak,al){return {staticAssetsBase:"\u002Fecharts-handbook\u002F_nuxt\u002Fstatic\u002F1627116914",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,locale:"en",lang:{},menu:{},homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:h,children:[{title:"获取 ECharts",dir:i} [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1627116914/en/concepts/visual-map/payload.js b/docs/_nuxt/static/1627116914/en/concepts/visual-map/payload.js
new file mode 100644
index 0000000..8937fad
--- /dev/null
+++ b/docs/_nuxt/static/1627116914/en/concepts/visual-map/payload.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("/en/concepts/visual-map", (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R){return {data:[{article:{slug:"visual-map",toc:[{id:B,depth:y,text:C},{id:D,depth:y,text:E},{id:F,depth:y,text:G},{id:H,depth:I,text:J},{id:K,depth:I,text:L}],body:{type:"root",children:[{type:b,tag:"h1",props:{id:"visual-map-of-data"},children:[{type:b,tag:d,props:{href:"#visual-map-of-data",ariaHidden:l,tabIndex:m},children:[{type:b,tag:n,props:{cl [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1627116914/en/concepts/visual-map/state.js b/docs/_nuxt/static/1627116914/en/concepts/visual-map/state.js
new file mode 100644
index 0000000..dfe8944
--- /dev/null
+++ b/docs/_nuxt/static/1627116914/en/concepts/visual-map/state.js
@@ -0,0 +1 @@
+window.__NUXT__=(function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,_,$,aa,ab,ac,ad,ae,af,ag,ah,ai,aj,ak,al){return {staticAssetsBase:"\u002Fecharts-handbook\u002F_nuxt\u002Fstatic\u002F1627116914",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,locale:"en",lang:{},menu:{},homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:h,children:[{title:"获取 ECharts",dir:i} [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1627116914/en/get-started/payload.js b/docs/_nuxt/static/1627116914/en/get-started/payload.js
new file mode 100644
index 0000000..572ef8f
--- /dev/null
+++ b/docs/_nuxt/static/1627116914/en/get-started/payload.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("/en/get-started", (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J){return {data:[{article:{slug:x,toc:[{id:y,depth:q,text:z},{id:A,depth:q,text:B},{id:C,depth:q,text:D}],body:{type:"root",children:[{type:b,tag:"h1",props:{id:x},children:[{type:b,tag:d,props:{href:"#get-started",ariaHidden:h,tabIndex:i},children:[{type:b,tag:j,props:{className:[k,l]},children:[]}]},{type:a,value:"Get Started"}]},{type:a,value:c},{type:b,tag:r,props:{id:y}, [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1627116914/en/get-started/state.js b/docs/_nuxt/static/1627116914/en/get-started/state.js
new file mode 100644
index 0000000..1e05e15
--- /dev/null
+++ b/docs/_nuxt/static/1627116914/en/get-started/state.js
@@ -0,0 +1 @@
+window.__NUXT__=(function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,_,$,aa,ab,ac,ad,ae,af,ag,ah,ai,aj,ak,al){return {staticAssetsBase:"\u002Fecharts-handbook\u002F_nuxt\u002Fstatic\u002F1627116914",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,locale:"en",lang:{},menu:{},homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:h,children:[{title:"获取 ECharts",dir:i} [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1627116914/en/meta/edit-guide/payload.js b/docs/_nuxt/static/1627116914/en/meta/edit-guide/payload.js
new file mode 100644
index 0000000..bcdc8c2
--- /dev/null
+++ b/docs/_nuxt/static/1627116914/en/meta/edit-guide/payload.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("/en/meta/edit-guide", (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,_,$,aa,ab,ac,ad,ae,af,ag,ah,ai,aj,ak){return {data:[{article:{slug:"edit-guide",toc:[{id:A,depth:q,text:B},{id:C,depth:q,text:D},{id:E,depth:q,text:F},{id:G,depth:q,text:H},{id:I,depth:t,text:J},{id:K,depth:t,text:L},{id:M,depth:t,text:N},{id:O,depth:t,text:P},{id:Q,depth:t,text:R},{id:S,depth:q,text:T},{id:U,depth:t,text:V},{id:W,depth:q [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1627116914/en/meta/edit-guide/state.js b/docs/_nuxt/static/1627116914/en/meta/edit-guide/state.js
new file mode 100644
index 0000000..49d0eab
--- /dev/null
+++ b/docs/_nuxt/static/1627116914/en/meta/edit-guide/state.js
@@ -0,0 +1 @@
+window.__NUXT__=(function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,_,$,aa,ab,ac,ad,ae,af,ag,ah,ai,aj,ak,al){return {staticAssetsBase:"\u002Fecharts-handbook\u002F_nuxt\u002Fstatic\u002F1627116914",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,locale:"en",lang:{},menu:{},homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:h,children:[{title:"获取 ECharts",dir:i} [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1627116914/manifest.js b/docs/_nuxt/static/1627116914/manifest.js
new file mode 100644
index 0000000..a191cba
--- /dev/null
+++ b/docs/_nuxt/static/1627116914/manifest.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("manifest.js", {routes:["\u002F","\u002Fzh","\u002Fen\u002Fconcepts\u002Fchart-size","\u002Fen\u002Fbasics\u002Fhelp","\u002Fen\u002Fbest-practice\u002Fcanvas-vs-svg","\u002Fen\u002Fmeta\u002Fedit-guide","\u002Fen\u002Fget-started","\u002Fen\u002Fbasics\u002Finspiration","\u002Fen\u002Fconcepts\u002Fstyle","\u002Fen\u002Fconcepts\u002Fdataset","\u002Fen\u002Fconcepts\u002Fdata-transform","\u002Fen\u002Fconcepts\u002Faxis","\u002Fen\u002Fconcepts\u002Fvisual-map","\u002Fen\ [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1627116914/payload.js b/docs/_nuxt/static/1627116914/payload.js
new file mode 100644
index 0000000..e4122ae
--- /dev/null
+++ b/docs/_nuxt/static/1627116914/payload.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("/", {data:[{}],fetch:{},mutations:[]});
\ No newline at end of file
diff --git a/docs/_nuxt/static/1627116914/state.js b/docs/_nuxt/static/1627116914/state.js
new file mode 100644
index 0000000..cc85b9f
--- /dev/null
+++ b/docs/_nuxt/static/1627116914/state.js
@@ -0,0 +1 @@
+window.__NUXT__=(function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,_,$,aa,ab,ac,ad,ae,af,ag,ah,ai,aj,ak,al){return {staticAssetsBase:"\u002Fecharts-handbook\u002F_nuxt\u002Fstatic\u002F1627116914",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,locale:"en",lang:{},menu:{},homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:h,children:[{title:"获取 ECharts",dir:i} [...]
\ No newline at end of file
diff --git a/docs/_nuxt/static/1627116914/zh/payload.js b/docs/_nuxt/static/1627116914/zh/payload.js
new file mode 100644
index 0000000..4efbd7b
--- /dev/null
+++ b/docs/_nuxt/static/1627116914/zh/payload.js
@@ -0,0 +1 @@
+__NUXT_JSONP__("/zh", {data:[{}],fetch:{},mutations:[]});
\ No newline at end of file
diff --git a/docs/_nuxt/static/1627116914/zh/state.js b/docs/_nuxt/static/1627116914/zh/state.js
new file mode 100644
index 0000000..d9dccf0
--- /dev/null
+++ b/docs/_nuxt/static/1627116914/zh/state.js
@@ -0,0 +1 @@
+window.__NUXT__=(function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,_,$,aa,ab,ac,ad,ae,af,ag,ah,ai,aj,ak,al){return {staticAssetsBase:"\u002Fecharts-handbook\u002F_nuxt\u002Fstatic\u002F1627116914",layout:"default",error:e,state:{filled:b,docVersion:f,ghVersion:f,visibleAffix:b,locale:"en",lang:{},menu:{},homepage:{},adBlocked:b,focusMode:b,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:h,children:[{title:"获取 ECharts",dir:i} [...]
\ No newline at end of file
diff --git a/docs/en/basics/help/index.html b/docs/en/basics/help/index.html
new file mode 100644
index 0000000..4c7b507
--- /dev/null
+++ b/docs/en/basics/help/index.html
@@ -0,0 +1,36 @@
+<!doctype html>
+<html data-n-head-ssr>
+ <head>
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="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="technical-problems"><a href="#technical-problems" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Technical Problems</h2>
+<h3 id="make-sure-that-existing-documentation-do-not-solve-your-problem"><a href="#make-sure-that-existing-documentation-do-not-solve-your-problem" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Make sure that existing documentation do not solve your problem</h3>
+<p>ECharts has a very large number of users, so it's likely that someone else has encountered and solved a problem you've had before. By looking at the documentation and using the search engine, you can help yourself to solve the problem in the first place without relying on the community for help.</p>
+<p>Therefore, before doing anything else, make sure that existing documentation and other resources do not solve your problem. Reources that can be helpful include:</p>
+<ul>
+<li><a href="https://echarts.apache.org//api.html" rel="nofollow noopener noreferrer" target="_blank">API</a></li>
+<li><a href="https://echarts.apache.org//option.html" rel="nofollow noopener noreferrer" target="_blank">Option Manual</a>: you can try to use the search function</li>
+<li>Articles in this handbook</li>
+<li><a href="https://echarts.apache.org//faq.html" rel="nofollow noopener noreferrer" target="_blank">FAQ</a></li>
+<li>Searching in <a href="https://github.com/apache/echarts/issues" rel="nofollow noopener noreferrer" target="_blank">GitHub issue</a></li>
+<li>Using the search engine</li>
+</ul>
+<h3 id="create-the-minimal-reproducible-demo"><a href="#create-the-minimal-reproducible-demo" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Create the Minimal Reproducible Demo</h3>
+<p>Create an example on <a href="https://codepen.io/Ovilia/pen/dyYWXWM" rel="nofollow noopener noreferrer" target="_blank">Codepen</a>, <a href="https://codesandbox.io/s/mystifying-bash-2uthz" rel="nofollow noopener noreferrer" target="_blank">Codesandbox</a>, which will make it easier for others to reproduce your problem.</p>
+<p>The example should reproduce your problem in the simplest way possible. Removing unnecessary code and data will allow those who help you to locate the problem more quickly, thus allowing your problem to be solved more quickly. See <a href="https://stackoverflow.com/help/minimal-reproducible-example" rel="nofollow noopener noreferrer" target="_blank">How to Create a Minimal, Reproducible Example</a> for a more detailed description.</p>
+<h3 id="determining-if-its-a-bug"><a href="#determining-if-its-a-bug" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Determining if It's a Bug</h3>
+<h4 id="report-a-bug-or-request-a-new-feature"><a href="#report-a-bug-or-request-a-new-feature" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Report a Bug or Request a New Feature</h4>
+<p>If it doesn't match the documentation or your intended result, it's probably a bug. If it's a bug, or you have a feature request, use the <a href="https://ecomfe.github.io/echarts-issue-helper/" rel="nofollow noopener noreferrer" target="_blank">issue template</a> to create a new issue and follow the prompts to describe it in detail.</p>
+<h4 id="how-to-questions"><a href="#how-to-questions" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>How-To Questions</h4>
+<p>If it's not a bug, but you don't know how to achieve something, try the <a href="https://stackoverflow.com">stackoverflow.com</a></p>
+<p>If you don't get an answer, you can also send an email to the email group <a href="mailto:dev@echarts.apache.org">dev@echarts.apache.org</a>. In order for more people to understand your question and to get help in future searches, it is highly recommended to send emails in English.</p>
+<h2 id="non-technical-questions"><a href="#non-technical-questions" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Non-technical questions</h2>
+<p>Other questions can be sent in English to the mail group <a href="mailto:dev@echarts.apache.org">dev@echarts.apache.org</a>.</p></div> <div class="table-of-contents"><h4 class="toc-container-header">In this Page</h4> <ul><li class="toc2"><a href="/echarts-handbook/en/basics/help#technical-problems">Technical Problems</a></li><li class="toc3"><a href="/echarts-handbook/en/basics/help#make-sure-that-existing-documentation-do-not-solve-your-problem">Make sure that existing documentation [...]
+ <script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
+ </body>
+</html>
diff --git a/docs/en/basics/import/index.html b/docs/en/basics/import/index.html
new file mode 100644
index 0000000..d637b67
--- /dev/null
+++ b/docs/en/basics/import/index.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<html data-n-head-ssr>
+ <head>
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="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>If your development environment uses a package management tool like <code>npm</code> or <code>yarn</code> and builds with a packaging tool like Webpack, this article will describe how to get a minimal bundle of Apache ECharts<sup>TM</sup> via treeshaking.</p>
+<h2 id="npm-installation-of-echarts"><a aria-hidden="true" href="#npm-installation-of-echarts" tabindex="-1"><span class="icon icon-link"></span></a>NPM installation of ECharts</h2>
+<p>You can install ECharts via npm using the following command</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-shell line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round [...]
+<h2 id="introduce-echarts"><a aria-hidden="true" href="#introduce-echarts" tabindex="-1"><span class="icon icon-link"></span></a>Introduce ECharts</h2>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<h2 id="importing-required-charts-and-components-to-have-minimal-bundle"><a aria-hidden="true" href="#importing-required-charts-and-components-to-have-minimal-bundle" tabindex="-1"><span class="icon icon-link"></span></a>Importing required charts and components to have minimal bundle.</h2>
+<p>The above code will import all the charts and components in ECharts, but if you don't want to bring in all the components, you can use the tree-shakeable interface provided by ECharts to bundle the required components and get a minimal bundle.</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<blockquote>
+<p>Note that in order to keep the size of the package to a minimum, ECharts does not provide any renderer in tree-shakeable interface, so you need to choose to import <code>CanvasRenderer</code> or <code>SVGRenderer</code> as the renderer. The advantage of this is that if you only need to use the svg rendering mode, the bundle will not include the <code>CanvasRenderer</code> module, which is not needed.</p>
+</blockquote>
+<p>The "Full Code" tab on our sample editor page provides a very convenient way to generate a tree-shakable code. It will generate tree-shakable code based on the current option dynamically. You can use it directly in your project.</p>
+<h2 id="minimal-option-type-in-typescript"><a aria-hidden="true" href="#minimal-option-type-in-typescript" tabindex="-1"><span class="icon icon-link"></span></a>Minimal Option Type in TypeScript</h2>
+<p>For developers who are using TypeScript to develop ECharts, we provide a type interface to combine the minimal <code>EChartsOption</code> type. This stricter type can effectively help you check for missing components or charts.</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-ts line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+ <script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
+ </body>
+</html>
diff --git a/docs/en/basics/inspiration/index.html b/docs/en/basics/inspiration/index.html
new file mode 100644
index 0000000..50f561b
--- /dev/null
+++ b/docs/en/basics/inspiration/index.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<html data-n-head-ssr>
+ <head>
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="ECharts Handbook"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/echarts-handbook/_nuxt/ [...]
+ </head>
+ <body>
+ <div data-server-rendered="true" id="__nuxt"><!----><div id="__layout"><div><nav role="navigation" class="navbar navbar-default navbar-fixed-top"><div class="container-fluid"><div class="navbar-header"><button type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href [...]
+<p>The following list provides some ideas when you have a question "I don't know how to design a chart" or "I don't know how to use Apache ECharts to achieve a certain effect".</p>
+<ul>
+<li><a href="https://echarts.apache.org//examples" rel="nofollow noopener noreferrer" target="_blank">Apache ECharts Official Examples</a></li>
+<li>"Applications - Common Charts" in this handbook</li>
+</ul></div> <div class="table-of-contents"><h4 class="toc-container-header">In this Page</h4> <ul></ul></div></div> <div class="post-contributors"><h3><span class="inline-block align-middle">本文贡献者</span> <a target="_blank" href="https://github.com/apache/echarts-handbook/tree/master/contents/en/basics/inspiration.md" title="编辑本文" class="inline-block align-middle text-sm"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-8 w-8 inline-bl [...]
+ <script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
+ </body>
+</html>
diff --git a/docs/en/best-practice/aria/index.html b/docs/en/best-practice/aria/index.html
new file mode 100644
index 0000000..657475a
--- /dev/null
+++ b/docs/en/best-practice/aria/index.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<html data-n-head-ssr>
+ <head>
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="ECharts Handbook"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/echarts-handbook/_nuxt/ [...]
+ </head>
+ <body>
+ <div data-server-rendered="true" id="__nuxt"><!----><div id="__layout"><div><nav role="navigation" class="navbar navbar-default navbar-fixed-top"><div class="container-fluid"><div class="navbar-header"><button type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href [...]
+<p><a href="https://www.w3.org/WAI/intro/aria" rel="nofollow noopener noreferrer" target="_blank">WAI-ARIA</a>, the Accessible Rich Internet Applications Suite developed by W3C, defines a way to make Web content and Web applications more accessible to people with disabilities. ECharts 4.0 complied with the specification, support generating description based on the chart configuration intelligently, to allows blind people to understand the content of the chart with the help of reading dev [...]
+<p>The Accessibility function was turn off by default, turn it on by define the value of <a href="https://echarts.apache.org/option.html#aria.show" rel="nofollow noopener noreferrer" target="_blank">aria.show</a> as <code>true</code>. ECharts will automatically generate a description of the chart according to the title, chart, data, etc.. Users can also change the description through the configuration item.</p>
+<p>About the configuration item:</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<iframe width="100%" height="350" src="https://echarts.apache.org/examples/en/view.html?c=doc-example/aria-pie"></iframe>
+<p>There will be an <code>area-label</code> attribute on the Chart DOM. With the help of the reading device, blind people can understand by hearing the following message:</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-text line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" [...]
+<h2 id="overall-description-modification"><a href="#overall-description-modification" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Overall Description Modification</h2>
+<p>For some charts, the default item description cannot show the info of the whole chart. In the following scatter chart, the description generated by default can include all the items, however, hearing info of hundreds of items has no helps to understand the information the chart represented.</p>
+<p>Under this circumstance, user can define the overall description by <a href="https://echarts.apache.org/option.html#aria.description" rel="nofollow noopener noreferrer" target="_blank">aria.description</a> configuration item.</p>
+<h2 id="customize-template-description"><a href="#customize-template-description" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Customize Template Description</h2>
+<p>Except for the overall description modify, we also provide the template of generating the description. You can easily modify the description in fine-grain level.</p>
+<p>The basic process to generate a description: If <a href="https://echarts.apache.org/option.html#aria.show" rel="nofollow noopener noreferrer" target="_blank">aria.show</a> is <code>true</code>, then generate the ARIA description (otherwise, no.). If <a href="https://echarts.apache.org/option.html#aria.description" rel="nofollow noopener noreferrer" target="_blank">aria.description</a> was defined, use it as the overall description (otherwise, use the default to generate the descriptio [...]
+<p>While using the template to generate, firstly make sure whether the title <a href="https://echarts.apache.org/option.html#title.text" rel="nofollow noopener noreferrer" target="_blank">title.text</a> exist to decide to use <a href="https://echarts.apache.org/option.html#aria.general.withTitle" rel="nofollow noopener noreferrer" target="_blank">aria.general.withTitle</a> or <a href="https://echarts.apache.org/option.html#aria.general.withoutTitle" rel="nofollow noopener noreferrer" tar [...]
+<p>After generating the title, ECharts will splice the description of the series and data after the title part. Every part of the template can include template variables, to be replaced by the actual value in the chart.</p>
+<p>The complete process of generating description, please check: <a href="https://echarts.apache.org/option.html#aria" rel="nofollow noopener noreferrer" target="_blank">ARIA Document</a>.</p></div> <div class="table-of-contents"><h4 class="toc-container-header">In this Page</h4> <ul><li class="toc2"><a href="/echarts-handbook/en/best-practice/aria#overall-description-modification">Overall Description Modification</a></li><li class="toc2"><a href="/echarts-handbook/en/best-practice/aria# [...]
+ <script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
+ </body>
+</html>
diff --git a/docs/en/best-practice/canvas-vs-svg/index.html b/docs/en/best-practice/canvas-vs-svg/index.html
new file mode 100644
index 0000000..cb220da
--- /dev/null
+++ b/docs/en/best-practice/canvas-vs-svg/index.html
@@ -0,0 +1,39 @@
+<!doctype html>
+<html data-n-head-ssr>
+ <head>
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="ECharts Handbook"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/echarts-handbook/_nuxt/ [...]
+ </head>
+ <body>
+ <div data-server-rendered="true" id="__nuxt"><!----><div id="__layout"><div><nav role="navigation" class="navbar navbar-default navbar-fixed-top"><div class="container-fluid"><div class="navbar-header"><button type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href [...]
+<p>Most of the browser-side chart libraries are using SVG or Canvas as their underlying render because they are interchangeable. However, they show notable differences in some specific scenarios and cases. As a result, it is hard to find a standard choice between them.</p>
+<p>Canvas has been used as the renderer (VML for IE8-) of ECharts from the beginning. Since <a href="https://github.com/apache/echarts/releases" rel="nofollow noopener noreferrer" target="_blank">ECharts v4.0</a> was released, ECharts provided the SVG render as an additional option. You can specify the <a href="http://echarts.baidu.com/api.html#echarts.init" rel="nofollow noopener noreferrer" target="_blank">renderer parameter</a> as <code>'canvas'</code> or <code>'svg'</code> while init [...]
+<blockquote>
+<p>SVG and Canvas have a significant difference in use. The simultaneous transparent support in ECharts between SVG and Canvas is because of the abstraction and implementation of the underlying library <a href="https://github.com/ecomfe/zrender" rel="nofollow noopener noreferrer" target="_blank">ZRender</a>. It formed an interchangeable SVG renderer and Canvas renderer.</p>
+</blockquote>
+<h2 id="how-to-choose-a-renderer"><a href="#how-to-choose-a-renderer" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>How to Choose a Renderer?</h2>
+<p>Generally, Canvas is more suitable for charts with a large number of elements (heat map, large-scale line or scatter plot in geo or parallel coordinates, etc.), and with visual <a href="https://echarts.apache.org//examples/editor.html?c=lines-bmap-effect" rel="nofollow noopener noreferrer" target="_blank">effect</a>. However, SVG has an important advantage: It has less memory usage (which is important for mobile devices), no blur when using the browser zoom.</p>
+<p>The choice of renderer can be based on a combination of hardware and software environment, data volume and functional requirements.</p>
+<ul>
+<li>In scenarios where the hardware and software environment is good and the amount of data is not too large, both renderers will work and there is not much need to agonise over them.</li>
+<li>In scenarios where the environment is poor and performance issues arise that require optimisation, experimentation can be used to determine which renderer to use. For example, there are these experiences.
+<ul>
+<li>In situations where many instances of ECharts have to be created and the browser is prone to crashing (probably because the number of Canvas is causing the memory footprint to exceed the phone's capacity), the SVG renderer can be used to make improvements. Roughly speaking, the SVG renderer may work better if the chart is running on a low-end Android, or if we are using specific charts such as the <a href="https://ecomfe.github.io/echarts-liquidfill/example/" rel="nofollow noopener n [...]
+<li>For larger amounts of data (>1k is an experience value), canvas renderer is always recommended.</li>
+</ul>
+</li>
+</ul>
+<p>We strongly welcome <a href="https://github.com/apache/echarts/issues/new" rel="nofollow noopener noreferrer" target="_blank">feedback</a> from developers on their experiences and scenarios to help us make better optimizations.</p>
+<p>Note: Currently, some special rendering still relies on Canvas: e.g. <a href="https://echarts.apache.org/option.html#series-lines.effect" rel="nofollow noopener noreferrer" target="_blank">trail effect</a>, <a href="https://echarts.apache.org//examples/editor.html?c=heatmap-bmap" rel="nofollow noopener noreferrer" target="_blank">heatmap with blending effect</a>, etc.</p>
+<h2 id="how-to-use-the-renderer"><a href="#how-to-use-the-renderer" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>How to Use the Renderer</h2>
+<p>If <code>echarts</code> is fully imported in the following way, the code already contains an SVG renderer and a Canvas renderer</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<p>If you are using treeshakable import as described in <a href="en/basics/import">Introducing Apache ECharts in your project</a>, you will need to import the required renderers manually</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<p>Then, we can <a href="https://echarts.apache.org//api.html/api.html#echarts.init" rel="nofollow noopener noreferrer" target="_blank">pass in the parameter</a> when initializing the chart instance in code to select the renderer.</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+ <script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
+ </body>
+</html>
diff --git a/docs/en/concepts/axis/index.html b/docs/en/concepts/axis/index.html
new file mode 100644
index 0000000..bf7a372
--- /dev/null
+++ b/docs/en/concepts/axis/index.html
@@ -0,0 +1,41 @@
+<!doctype html>
+<html data-n-head-ssr>
+ <head>
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="ECharts Handbook"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/echarts-handbook/_nuxt/ [...]
+ </head>
+ <body>
+ <div data-server-rendered="true" id="__nuxt"><!----><div id="__layout"><div><nav role="navigation" class="navbar navbar-default navbar-fixed-top"><div class="container-fluid"><div class="navbar-header"><button type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href [...]
+<p>The x/y-axis in the Cartesian coordinate system.</p>
+<h2 id="x-axis-y-axis"><a href="#x-axis-y-axis" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>x-axis, y-axis</h2>
+<ol>
+<li>Both x-axis and y-axis included axis line, tick, label and title. Some chart will use the grid to assist the data viewing and calculating.</li>
+</ol>
+<p><img max-width="830" width="100%" height="100%" src="/images/design/axis/charts_axis_img02.jpg">
+</p>
+<p>A normal 2D coordinate system has x-axis and y-axis. X-axis located at the bottom while y-axis at the left side in common. The Config is shown below:</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<p>The x-axis is usually used to declare the number of categories which was also called the aspects of observing the data: "Sales Time", "Sales Location" and "product name", etc.. The y-axis usually used to indicate the numerical value of categories. These data are used to examine the quantitative value of a certain type of data or some indicator you need to analyze, such as "Sales Quantity" and "Sales Price".</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<p>When x-axis has a large span, we can use the zoom method to display part of the data in the chart.</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<p>In two-dimensional data, there can be more than two axes. There are usually two x or y axes at the same time in ECharts. You can change the config <a href="https://echarts.apache.org/option.html#xAxis.offset" rel="nofollow noopener noreferrer" target="_blank">offset</a> to avoid overlaps of axes at the same place. X-axes can be displayed at the top and bottom, y-axes at left and right.</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<h2 id="axis-line"><a href="#axis-line" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Axis Line</h2>
+<p>ECharts provide the config of <a href="https://echarts.apache.org/option.html#xAxis.axisLine" rel="nofollow noopener noreferrer" target="_blank">axisLine</a>. You can change the setting according to the demand, such as the arrow on two sides and the style of axes.</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<h2 id="tick"><a href="#tick" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Tick</h2>
+<p>ECharts provide the config <a href="https://echarts.apache.org/option.html#xAxis.axisTick" rel="nofollow noopener noreferrer" target="_blank">axisTick</a>. You can change the setting according to the demand, such as the length of ticks, and the style of ticks.</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<h2 id="label"><a href="#label" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Label</h2>
+<p>ECharts provide the config <a href="https://echarts.apache.org/option.html#xAxis.axisLabel" rel="nofollow noopener noreferrer" target="_blank">axisLabel</a>. You can change the setting according to the demand, such as the text alignment and the customized label content.</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<h2 id="example"><a href="#example" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Example</h2>
+<p>The y-axis on the left side represents the monthly average temperature in Tokyo, the y-axis on the right side represents the precipitation of Tokyo. The x-axis represents the time. It reflects the trend and relation between the average temperature and precipitation.</p>
+<div class="nuxt-content-highlight"><!----></div>
+<p>These are the concise intro of the usage of axis config. Check more details at: <a href="https://echarts.apache.org/option.html#xAxis" rel="nofollow noopener noreferrer" target="_blank">Official Website</a>.</p></div> <div class="table-of-contents"><h4 class="toc-container-header">In this Page</h4> <ul><li class="toc2"><a href="/echarts-handbook/en/concepts/axis#x-axis-y-axis">x-axis, y-axis</a></li><li class="toc2"><a href="/echarts-handbook/en/concepts/axis#axis-line">Axis Line</a>< [...]
+ <script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
+ </body>
+</html>
diff --git a/docs/en/concepts/chart-size/index.html b/docs/en/concepts/chart-size/index.html
new file mode 100644
index 0000000..2ab604f
--- /dev/null
+++ b/docs/en/concepts/chart-size/index.html
@@ -0,0 +1,42 @@
+<!doctype html>
+<html data-n-head-ssr>
+ <head>
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="ECharts Handbook"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/echarts-handbook/_nuxt/ [...]
+ </head>
+ <body>
+ <div data-server-rendered="true" id="__nuxt"><!----><div id="__layout"><div><nav role="navigation" class="navbar navbar-default navbar-fixed-top"><div class="container-fluid"><div class="navbar-header"><button type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href [...]
+<p>In <a href="en/get-started">Get Started</a>, we introduced the API to initialize the ECharts <a href="https://echarts.apache.org//api.html#echarts.init" rel="nofollow noopener noreferrer" target="_blank"><code>echarts.init</code></a>. <a href="https://echarts.apache.org//api.html#echarts.init" rel="nofollow noopener noreferrer" target="_blank">API Document</a> has introduced the specific meaning of each parameters. Please read and understand the document before reading the following c [...]
+<p>Refer to several common usage scenarios, here is the example to initialize a chart and change the size.</p>
+<h2 id="initialization"><a href="#initialization" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Initialization</h2>
+<h3 id="define-a-parent-container-in-html"><a href="#define-a-parent-container-in-html" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Define a parent container in HTML</h3>
+<p>In general, you need to define a <code><div></code> node and use the CSS to change the width and height. While initializing, import the chart into the node. Without declaring <code>opts.width</code> or <code>opts.height</code>, the size of the chart will default to the size of the node.</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-html line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" [...]
+<p>To be noticed, before calling <code>echarts.init</code>, you need to make sure the container already has width and height.</p>
+<h3 id="specify-the-chart-size"><a href="#specify-the-chart-size" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Specify the chart size</h3>
+<p>If the height and width of the container do not exist, or you wish the chart size not equal to the container, you can initialize the size at the beginning.</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-html line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" [...]
+<h2 id="reactive-of-the-container-size"><a href="#reactive-of-the-container-size" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Reactive of the Container Size</h2>
+<h3 id="listen-to-the-container-size-to-change-the-chart-size"><a href="#listen-to-the-container-size-to-change-the-chart-size" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Listen to the container size to change the chart size</h3>
+<p>In some cases, we want to accordingly change the chart size while the size of containers changed.</p>
+<p>For instance, the container has a height of 300px and a width of 100% site width. If you are willing to change the site width while stable the chart width as 100% of it, try the following method.</p>
+<p>You can listen to <code>window.onresize</code> of the site to catch the event that the browser is resized. Then use <a href="https://echarts.apache.org/api.html#echartsInstance.resize" rel="nofollow noopener noreferrer" target="_blank"><code>echartsInstance.resize</code></a> to resize the chart.</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-html line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" [...]
+<h3 id="state-a-specific-chart-size"><a href="#state-a-specific-chart-size" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>State a specific chart size</h3>
+<p>Except for calling <code>resize()</code> without parameters, you can state the height and width to implement the chart size different from the size of the container.</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<blockquote>
+<p>**Tips: ** Pay attention to how the API defined while reading the file. <code>resize()</code> API was sometimes mistaken for the form like <code>myCharts.resize(800, 400)</code> which do not exist.</p>
+</blockquote>
+<h3 id="dispose-and-rebuild-of-the-container-node"><a href="#dispose-and-rebuild-of-the-container-node" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Dispose and rebuild of the container node</h3>
+<p>We assume that there exist several bookmark pages and each page contained some charts. In this case, the content in other pages will be removed in DOM when select one page. The user will not find the chart after reselecting these pages.</p>
+<p>Essentially, this is because the container node of the charts was removed. Even if the node is added again later, the node where the graph is located no longer exists.</p>
+<p>The correct way is, call <a href="https://echarts.apache.org/api.html#echartsInstance.dispose" rel="nofollow noopener noreferrer" target="_blank"><code>echartsInstance.dispose</code></a> to dispose the instance after the container was disposed, and call <a href="https://echarts.apache.org//api.html#echarts.init" rel="nofollow noopener noreferrer" target="_blank">echarts.init</a> to initialize after the container was added again.</p>
+<blockquote>
+<p>**Tips: ** Call <a href="https://echarts.apache.org/api.html#echartsInstance.dispose" rel="nofollow noopener noreferrer" target="_blank"><code>echartsInstance.dispose</code></a> to release resources while disposing the node to avoid memory leaks.</p>
+</blockquote></div> <div class="table-of-contents"><h4 class="toc-container-header">In this Page</h4> <ul><li class="toc2"><a href="/echarts-handbook/en/concepts/chart-size#initialization">Initialization</a></li><li class="toc3"><a href="/echarts-handbook/en/concepts/chart-size#define-a-parent-container-in-html">Define a parent container in HTML</a></li><li class="toc3"><a href="/echarts-handbook/en/concepts/chart-size#specify-the-chart-size">Specify the chart size</a></li><li class="toc [...]
+ <script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
+ </body>
+</html>
diff --git a/docs/en/concepts/data-transform/index.html b/docs/en/concepts/data-transform/index.html
new file mode 100644
index 0000000..2c33c0b
--- /dev/null
+++ b/docs/en/concepts/data-transform/index.html
@@ -0,0 +1,129 @@
+<!doctype html>
+<html data-n-head-ssr>
+ <head>
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="ECharts Handbook"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/echarts-handbook/_nuxt/ [...]
+ </head>
+ <body>
+ <div data-server-rendered="true" id="__nuxt"><!----><div id="__layout"><div><nav role="navigation" class="navbar navbar-default navbar-fixed-top"><div class="container-fluid"><div class="navbar-header"><button type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href [...]
+<p><code>Data transform</code> has been supported since Apache ECharts<sup>TM</sup> 5. In echarts, the term <code>data transform</code> means that generate new data from user provided source data and transform functions. both This feature is enable users to process data in declarative way, and provides users some common "transform functions" to make that kind of tasks "out-of-the-box". (For consistency in the context, the noun form of the word we keep using the "transform" rather than "t [...]
+<p>The abstract formula of data transform is: <code>outData = f(inputData)</code>, where the transform function <code>f</code> can be like <code>filter</code>, <code>sort</code>, <code>regression</code>, <code>boxplot</code>, <code>cluster</code>, <code>aggregate</code>(todo) ...
+With the help of those transform methods, users can be implements the features like:</p>
+<ul>
+<li>Partition data into multiple series.</li>
+<li>Make some statistics and visualize the result.</li>
+<li>Adapt some visualization algorithms to data and display the result.</li>
+<li>Sort data.</li>
+<li>Remove or choose some kind of empty or special datums.</li>
+<li>...</li>
+</ul>
+<h2 id="get-started-to-data-transform"><a href="#get-started-to-data-transform" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Get started to data transform</h2>
+<p>In echarts, data transform is implemented based on the concept of <a href="~https://echarts.apache.org/option.html##dataset">dataset</a>. A <a href="https://echarts.apache.org/option.html##dataset.transform" rel="nofollow noopener noreferrer" target="_blank">dataset.transform</a> can be configured in a dataset instance to indicate that this dataset is to be generated from this <code>transform</code>. For example:</p>
+<div class="nuxt-content-highlight"><!----></div>
+<p>Let's summarize the key points of using data transform:</p>
+<ul>
+<li>Generate new data from existing declared data via the declaration of <code>transform</code>, <code>fromDatasetIndex</code>/<code>fromDatasetId</code> in some blank dataset.</li>
+<li>Series references these datasets to show the result.</li>
+</ul>
+<h2 id="advanced-usage"><a href="#advanced-usage" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Advanced usage</h2>
+<h4 id="piped-transform"><a href="#piped-transform" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Piped transform</h4>
+<p>There is a syntactic sugar that pipe transforms like:</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<blockquote>
+<p>Note: theoretically any type of transform is able to have multiple input data and multiple output data. But when a transform is piped, it is only able to take one input (except it is the first transform of the pipe) and product one output (except it is the last transform of the pipe).</p>
+</blockquote>
+<h4 id="output-multiple-data"><a href="#output-multiple-data" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Output multiple data</h4>
+<p>In most cases, transform functions only need to produce one data. But there is indeed scenarios that a transform function needs to produce multiple data, each of whom might be used by different series.</p>
+<p>For example, in the built-in boxplot transform, besides boxplot data produced, the outlier data are also produced, which can be used in a scatter series. See the <a href="https://echarts.apache.org/examples/en/editor.html?c=boxplot-light-velocity" rel="nofollow noopener noreferrer" target="_blank">example</a>.</p>
+<p>We use prop <a href="https://echarts.apache.org/option.html##dataset.fromTransformResult" rel="nofollow noopener noreferrer" target="_blank">dataset.fromTransformResult</a> to satisfy this requirement. For example:</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<p>What more, <a href="https://echarts.apache.org/option.html##dataset.fromTransformResult" rel="nofollow noopener noreferrer" target="_blank">dataset.fromTransformResult</a> and <a href="https://echarts.apache.org/option.html##dataset.transform" rel="nofollow noopener noreferrer" target="_blank">dataset.transform</a> can both appear in one dataset, which means that the input of the transform is from retrieved from the upstream result specified by <code>fromTransformResult</code>. For ex [...]
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<h4 id="debug-in-develop-environment"><a href="#debug-in-develop-environment" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Debug in develop environment</h4>
+<p>When using data transform, we might run into the trouble that the final chart do not display correctly but we do not know where the config is wrong. There is a property <code>transform.print</code> might help in such case. (<code>transform.print</code> is only available in dev environment).</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<h2 id="the-transform-filter"><a href="#the-transform-filter" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>The transform "filter"</h2>
+<p>Transform type "filter" is a built-in transform that provide data filter according to specified conditions. The basic option is like:</p>
+<div class="nuxt-content-highlight"><!----></div>
+<p>This is another example of filter transform:</p>
+<iframe width="100%" height="350" src="https://echarts.apache.org/examples/en/view.html?c=data-transform-filter"></iframe>
+<p><strong>About dimension:</strong></p>
+<p>The <code>config.dimension</code> can be:</p>
+<ul>
+<li>Dimension name declared in dataset, like <code>config: { dimension: 'Year', '=': 2011 }</code>. Dimension name declaration is not mandatory.</li>
+<li>Dimension index (start from 0), like <code>config: { dimension: 3, '=': 2011 }</code>.</li>
+</ul>
+<p><strong>About relational operator:</strong></p>
+<p>The relational operator can be:
+<code>></code>(<code>gt</code>), <code>>=</code>(<code>gte</code>), <code><</code>(<code>lt</code>), <code><=</code>(<code>lte</code>), <code>=</code>(<code>eq</code>), <code>!=</code>(<code>ne</code>, <code><></code>), <code>reg</code>. (The name in the parentheses are aliases). They follows the common semantics.
+Besides the common number comparison, there is some extra features:</p>
+<ul>
+<li>Multiple operators are able to appear in one {} item like <code>{ dimension: 'Price', '>=': 20, '<': 30 }</code>, which means logical "and" (Price >= 20 and Price < 30).</li>
+<li>The data value can be "numeric string". Numeric string is a string that can be converted to number. Like ' 123 '. White spaces and line breaks will be auto trimmed in the conversion.</li>
+<li>If we need to compare "JS <code>Date</code> instance" or date string (like '2012-05-12'), we need to specify <code>parser: 'time'</code> manually, like <code>config: { dimension: 3, lt: '2012-05-12', parser: 'time' }</code>.</li>
+<li>Pure string comparison is supported but can only be used in <code>=</code>, <code>!=</code>. <code>></code>, <code>>=</code>, <code><</code>, <code><=</code> do not support pure string comparison (the "right value" of the four operators can not be a "string").</li>
+<li>The operator <code>reg</code> can be used to make regular expression test. Like using <code>{ dimension: 'Name', reg: /\s+Müller\s*$/ }</code> to select all data items that the "Name" dimension contains family name Müller.</li>
+</ul>
+<p><strong>About logical relationship:</strong></p>
+<p>Sometimes we also need to express logical relationship ( <code>and</code> / <code>or</code> / <code>not</code> ):</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<p><code>and</code>/<code>or</code>/<code>not</code> can be nested like:</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<p><strong>About parser:</strong></p>
+<p>Some "parser" can be specified when make value comparison. At present only supported:</p>
+<ul>
+<li><code>parser: 'time'</code>: Parse the value to date time before comparing. The parser rule is the same as <code>echarts.time.parse</code>, where JS <code>Date</code> instance, timestamp number (in millisecond) and time string (like <code>'2012-05-12 03:11:22'</code>) are supported to be parse to timestamp number, while other value will be parsed to <code>NaN</code>.</li>
+<li><code>parser: 'trim'</code>: Trim the string before making comparison. For non-string, return the original value.</li>
+<li><code>parser: 'number'</code>: Force to convert the value to number before making comparison. If not possible to be converted to a meaningful number, converted to <code>NaN</code>. In most cases it is not necessary, because by default the value will be auto converted to number if possible before making comparison. But the default conversion is strict while this parser provide a loose strategy. If we meet the case that number string with unit suffix (like <code>'33%'</code>, <code>12p [...]
+</ul>
+<p>This is an example to show the <code>parser: 'time'</code>:</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<p><strong>Formally definition:</strong></p>
+<p>Finally, we give the formally definition of the filter transform config here:</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-ts line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<h2 id="the-transform-sort"><a href="#the-transform-sort" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>The transform "sort"</h2>
+<p>Another built-in transform is "sort".</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<iframe width="100%" height="350" src="https://echarts.apache.org/examples/en/view.html?c=data-transform-sort-bar"></iframe>
+<p>Some extra features about "sort transform":</p>
+<ul>
+<li>Order by multiple dimensions is supported. See examples below.</li>
+<li>The sort rule:
+<ul>
+<li>By default "numeric" (that is, number and numeric-string like <code>' 123 '</code>) are able to sorted by numeric order.</li>
+<li>Otherwise "non-numeric-string" are also able to be ordered among themselves. This might help to the case like grouping data items with the same tag, especially when multiple dimensions participated in the sort (See example below).</li>
+<li>When "numeric" is compared with "non-numeric-string", or either of them is compared with other types of value, they are not comparable. So we call the latter one as "incomparable" and treat it as "min value" or "max value" according to the prop <code>incomparable: 'min' | 'max'</code>. This feature usually helps to decide whether to put the empty values (like <code>null</code>, <code>undefined</code>, <code>NaN</code>, <code>''</code>, <code>'-'</code>) or other illegal values to the [...]
+</ul>
+</li>
+<li><code>filter: 'time' | 'trim' | 'number'</code> can be used, the same as "filter transform".
+<ul>
+<li>If intending to sort time values (JS <code>Date</code> instance or time string like <code>'2012-03-12 11:13:54'</code>), <code>parser: 'time'</code> should be specified. Like <code>config: { dimension: 'date', order: 'desc', parser: 'time' }</code></li>
+<li>If intending to sort values with unit suffix (like <code>'33%'</code>, <code>'16px'</code>), need to use <code>parser: 'number'</code>.</li>
+</ul>
+</li>
+</ul>
+<p>See an example of multiple order:</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<iframe width="100%" height="350" src="https://echarts.apache.org/examples/en/view.html?c=doc-example/data-transform-multiple-sort-bar"></iframe>
+<p>Finally, we give the formally definition of the sort transform config here:</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-ts line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<h2 id="use-external-transforms"><a href="#use-external-transforms" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Use external transforms</h2>
+<p>Besides built-in transforms (like 'filter', 'sort'), we can also use external transforms to provide more powerful functionalities. Here we use a third-party library <a href="https://github.com/ecomfe/echarts-stat" rel="nofollow noopener noreferrer" target="_blank">ecStat</a> as an example:</p>
+<p>This case show how to make a regression line via ecStat:</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<p>Examples with echarts-stat:</p>
+<ul>
+<li><a href="https://echarts.apache.org/examples/en/editor.html?c=data-transform-aggregate&edit=1&reset=1" rel="nofollow noopener noreferrer" target="_blank">Aggregate</a></li>
+<li><a href="https://echarts.apache.org/examples/en/editor.html?c=bar-histogram&edit=1&reset=1" rel="nofollow noopener noreferrer" target="_blank">Bar histogram</a></li>
+<li><a href="https://echarts.apache.org/examples/en/editor.html?c=scatter-clustering&edit=1&reset=1" rel="nofollow noopener noreferrer" target="_blank">Scatter clustering</a></li>
+<li><a href="https://echarts.apache.org/examples/en/editor.html?c=scatter-linear-regression&edit=1&reset=1" rel="nofollow noopener noreferrer" target="_blank">Scatter linear regression</a></li>
+<li><a href="https://echarts.apache.org/examples/en/editor.html?c=scatter-exponential-regression&edit=1&reset=1" rel="nofollow noopener noreferrer" target="_blank">Scatter exponential regression</a></li>
+<li><a href="https://echarts.apache.org/examples/en/editor.html?c=scatter-logarithmic-regression&edit=1&reset=1" rel="nofollow noopener noreferrer" target="_blank">Scatter logarithmic regression</a></li>
+<li><a href="https://echarts.apache.org/examples/en/editor.html?c=scatter-polynomial-regression&edit=1&reset=1" rel="nofollow noopener noreferrer" target="_blank">Scatter polynomial regression</a></li>
+</ul></div> <div class="table-of-contents"><h4 class="toc-container-header">In this Page</h4> <ul><li class="toc2"><a href="/echarts-handbook/en/concepts/data-transform#get-started-to-data-transform">Get started to data transform</a></li><li class="toc2"><a href="/echarts-handbook/en/concepts/data-transform#advanced-usage">Advanced usage</a></li><li class="toc2"><a href="/echarts-handbook/en/concepts/data-transform#the-transform-filter">The transform "filter"</a></li><li class="toc2"><a [...]
+ <script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
+ </body>
+</html>
diff --git a/docs/en/concepts/dataset/index.html b/docs/en/concepts/dataset/index.html
new file mode 100644
index 0000000..af4bd0c
--- /dev/null
+++ b/docs/en/concepts/dataset/index.html
@@ -0,0 +1,127 @@
+<!doctype html>
+<html data-n-head-ssr>
+ <head>
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="ECharts Handbook"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/echarts-handbook/_nuxt/ [...]
+ </head>
+ <body>
+ <div data-server-rendered="true" id="__nuxt"><!----><div id="__layout"><div><nav role="navigation" class="navbar navbar-default navbar-fixed-top"><div class="container-fluid"><div class="navbar-header"><button type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href [...]
+<p><code>dataset</code> is a component dedicated to manage data. Although you can set the data in <code>series.data</code> for every series, we recommend you use the <code>dataset</code> to manage the data since ECharts 4 so that the data can be reused by multiple components and convenient for the separation of "data and configs". After all, data is the most common part to be changed while other configurations will mostly not change at runtime.</p>
+<h2 id="define-data-under-series"><a href="#define-data-under-series" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Define <code>data</code> under <code>series</code></h2>
+<p>If data is defined under <code>series</code>, for example:</p>
+<div class="nuxt-content-highlight"><!----></div>
+<p>Define <code>data</code> under <code>series</code> is suitable for customization for some special data structures such as "tree", "graph" and large data.
+However, it is not conducive to the data sharing for multiple series as well as mapping arrangement of chart types and series based on the original data. The other disadvantage is that programmers always need to divide the data in separate series (and categories) first.</p>
+<h2 id="define-data-in-dataset"><a href="#define-data-in-dataset" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Define <code>data</code> in <code>dataset</code></h2>
+<p>Here are the advantages if you define <code>data</code> in <code>dataset</code>:</p>
+<ul>
+<li>Follow the ideas of data visualization: (I) Provide the data, (II)Mapping from data to visual to become a chart.</li>
+<li>Divide data from other configurations. The data often change but others not. It is
+Easy to manage separately.</li>
+<li>Data can be reused by several series or component, you don't need to create copies of a large amount of data for every series.</li>
+<li>Support more common data format, such as a 2D array, array of classes, etc., to avoid users from converting for data format to a certain extent.</li>
+</ul>
+<p>Here is a simple <code>dataset</code> example:</p>
+<div class="nuxt-content-highlight"><!----></div>
+<p>Or try to use the "array of classes" format:</p>
+<div class="nuxt-content-highlight"><!----></div>
+<h2 id="map-from-data-to-chart"><a href="#map-from-data-to-chart" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Map from Data to Chart</h2>
+<p>The ideas of data visualization: (I) Provide the data, (II)Mapping from data to visual to become a chart.</p>
+<p>In short, you can set these configs of mapping:</p>
+<ul>
+<li>Specify 'column' or 'row' of <code>dataset</code> to map the <code>series</code>. You can use <a href="https://echarts.apache.org/option.html##series.seriesLayoutBy" rel="nofollow noopener noreferrer" target="_blank">series.seriesLayoutBy</a> to configure it. The default is to map according to the column.</li>
+<li>Rule of specifying dimension mapping: how to mapping from dimensions of 'dataset' to <code>axis</code>, <code>tooltip</code>, <code>label</code> and <code>visualMap</code>. To configure the mapping, please use <a href="https://echarts.apache.org/option.html##series.encode" rel="nofollow noopener noreferrer" target="_blank">series.encode</a> and <a href="https://echarts.apache.org/option.html##visualMap" rel="nofollow noopener noreferrer" target="_blank">visualMap</a>. The previous ca [...]
+</ul>
+<p>The details of the configuration are shown below:</p>
+<h2 id="map-row-or-column-of-dataset-to-series"><a href="#map-row-or-column-of-dataset-to-series" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Map Row or Column of <code>dataset</code> to <code>series</code></h2>
+<p>After having the dataset, you can configure flexibly: how the data map to the axis and graph series.</p>
+<p>You can use <code>seriesLayoutBy</code> to change the understanding of row and column of the chart. <code>seriesLayoutBy</code> can be:</p>
+<ul>
+<li>'column': Default, the series are placed above the column of <code>dataset</code>.</li>
+<li>'row': The series is placed above the row of <code>dataset</code>.</li>
+</ul>
+<p>Check this case:</p>
+<div class="nuxt-content-highlight"><!----></div>
+<p>The effect of configuration is shown in <a href="https://echarts.apache.org/examples/en/editor.html?c=dataset-series-layout-by" rel="nofollow noopener noreferrer" target="_blank">this case</a>.</p>
+<h2 id="dimension"><a href="#dimension" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Dimension</h2>
+<p>Most of the data described in commonly used charts is a "two-dimensional table" structure, in the previous case, we use a 2D array to contain a two-dimensional table. Now, when we map a series to a column, that column was called a "dimension" and each row was called "item", vice versa.</p>
+<p>The dimension can have their name to display in the chart. Dimension name can be defined in the first column (row). In the previous case, <code>'score'</code>, <code>'amount'</code>, <code>'product'</code> are the name of dimensions. The actual data locate from the second row. ECharts will automatically check if the first column (row) contained dimension name in <code>dataset.source</code>. You can also use <code>dataset.sourceHeader: true</code> to declare that the first column (row) [...]
+<p>Try to use single <code>dataset.dimensions</code> or some <code>series.dimensions</code> to define the dimensions, therefore you can specify the name and type together.</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<p>In most cases, you don't need to define the dimension type because the ECharts will automatically judge it. If the judgment is inaccurate, you can define it manually.</p>
+<p>Dimension type can be the following values:</p>
+<ul>
+<li><code>'number'</code>: Default, normal data.</li>
+<li><code>'ordinal'</code>: String types data like categories, text can be used on the axis only with the dimension type 'ordinal'. ECharts will try to judge this type automatically but might be inaccurate, so you can specify manually.</li>
+<li><code>'time'</code>: To represent time data, ECharts can automatically analyze data as timestamp if the dimension type is defined as <code>'time'</code>. For instance, ECharts will auto-analyze if the data of this dimension is '2017-05-10'<code>. If the dimension is used as time axis ([axis.type](https://echarts.apache.org/option.html##xAxis.type) =</code>'time'<code>), the dimension type will also be</code>'time'`. See <a href="https://echarts.apache.org/option.html##series.data" re [...]
+<li><code>'float'</code>: Use <code>TypedArray</code> to optimize the performance in <code>'float'</code> dimension.</li>
+<li><code>'int'</code>: Use <code>TypedArray</code> to optimize the performance in <code>'int'</code> dimension.</li>
+</ul>
+<h2 id="map-from-data-to-charts-seriesencode"><a href="#map-from-data-to-charts-seriesencode" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Map from Data to Charts (series.encode)</h2>
+<p>After understand the concept of dimension, you can use <a href="https://echarts.apache.org/option.html##series.encode" rel="nofollow noopener noreferrer" target="_blank">series.encode</a> to make a mapping:</p>
+<div class="nuxt-content-highlight"><!----></div>
+<p>The basic structure of <code>series.encode</code> declaration:</p>
+<ul>
+<li>To the left of the colon: Specific name of axis or label.</li>
+<li>To the right of the colon: Dimension name (string) or number(int, count from 0), to specify one or several dimensions (using array).</li>
+</ul>
+<p>Generally, the following info is not necessary to be defined. Fill in as needed.</p>
+<p>Attribute suggested by <code>series.encode</code></p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<p>This is a richer <a href="https://echarts.apache.org/examples/en/editor.html?c=dataset-encode1" rel="nofollow noopener noreferrer" target="_blank">example</a> of <code>series.encode</code>.</p>
+<h2 id="default-seriesencode"><a href="#default-seriesencode" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Default series.encode</h2>
+<p>It is worth mentioning that ECharts will use some default mapping rules for some general charts (line, bar, scatter, candlestick, etc.) if <code>series.encode</code> is not specified. The default rule is:</p>
+<ul>
+<li>In coordinate system (eg. Cartesian, Polar): + If there is category axis (axis.type = 'category'), map the first column(row) to the axis and each subsequent column(row) to each series. + If both axes is not the category, then map every two columns in one series to two axes.</li>
+<li>Without axis (such as Pie Chart): + Use the first column(row) as the name, second column(row) as value. ECharts will not set the name if there is only one column(row).</li>
+</ul>
+<p>While the default rule cannot fulfill the requirements, you can configure <code>encode</code> by yourself, which is not complicate. Here is an <a href="https://echarts.apache.org/examples/en/editor.html?c=dataset-default" rel="nofollow noopener noreferrer" target="_blank">example</a>.</p>
+<h2 id="some-normal-settings-of-seriesencode"><a href="#some-normal-settings-of-seriesencode" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Some Normal Settings of series.encode</h2>
+<p>Q: How to set the 3rd column as x-axis, 5th column as y-axis?</p>
+<p>A:</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<p>Q: How to set the 3rd row as x-axis, 5th row as y-axis?</p>
+<p>A:</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<p>Q: How to set the 2nd column as a label?</p>
+<p>A:
+We now support to trace value from specific dimension for <a href="https://echarts.apache.org/option.html##series.label.formatter" rel="nofollow noopener noreferrer" target="_blank">label.formatter</a>:</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<p>Q: How to show the 2nd and 3rd column in the tooltip?</p>
+<p>A:</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<p>Q: How to define the dimension name if is not included in the dataset?</p>
+<p>A:</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<p>Q: How to map the 3rd column to the size of the scatter chart?</p>
+<p>A:</p>
+<div class="nuxt-content-highlight"><!----></div>
+<p>Q: I specified a mapping in encode, why it is not worked?</p>
+<p>A: Check your spelling, such as misspell the dimension name <code>'Life Expectancy'</code> to <code>'Life Expectency'</code> in encode.</p>
+<h2 id="visual-channel-mapping"><a href="#visual-channel-mapping" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Visual Channel Mapping</h2>
+<p>We can map visual channel by using <a href="https://echarts.apache.org/option.html##visualMap" rel="nofollow noopener noreferrer" target="_blank">visualMap</a>. Check details in the <a href="https://echarts.apache.org/option.html##visualMap" rel="nofollow noopener noreferrer" target="_blank">visualMap</a> document. Here is an <a href="https://echarts.apache.org/examples/en/editor.html?c=dataset-encode0" rel="nofollow noopener noreferrer" target="_blank">example</a>.</p>
+<h2 id="formats-of-charts"><a href="#formats-of-charts" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Formats of Charts</h2>
+<p>In most of the normal chart, the data is suitable to be described in the form of a two-dimensional table. That well-known software like 'MS Excel' and 'Numbers' all uses a two-dimensional table. Their data can be exported to JSON format and input to <code>dataset.source</code> and avoid some steps of data processing.</p>
+<blockquote>
+<p>You can switch .csv file to JSON using tools like <a href="https://github.com/d3/d3-dsv" rel="nofollow noopener noreferrer" target="_blank">dsv</a> or <a href="https://github.com/mholt/PapaParse" rel="nofollow noopener noreferrer" target="_blank">PapaParse</a>.</p>
+</blockquote>
+<p>As the example shown behind, in the data transmission of JavaScript, the two-dimensional data can be stored directly by two-dimensional array.</p>
+<p>Expect from the two-dimensional array, the dataset also supports using key-value which is also a common way. However, we don't support <a href="https://echarts.apache.org/option.html##series.seriesLayoutBy" rel="nofollow noopener noreferrer" target="_blank">seriesLayoutBy</a> in this format right now.</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<h2 id="how-to-reference-several-datasets"><a href="#how-to-reference-several-datasets" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>How to Reference Several Datasets</h2>
+<p>ECharts support to define several datasets at the same moment. Series can assign the one to reference by <a href="https://echarts.apache.org/option.html##series.datasetIndex" rel="nofollow noopener noreferrer" target="_blank">series.datasetIndex</a>. For example:</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<h2 id="seriesdata-in-echarts-3"><a href="#seriesdata-in-echarts-3" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>series.data in ECharts 3</h2>
+<p>ECharts 4 still support the data declaration way in ECharts 3. If the series has already declared the <a href="https://echarts.apache.org/option.html##series.data" rel="nofollow noopener noreferrer" target="_blank">series.data</a>, then use <a href="https://echarts.apache.org/option.html##series.data" rel="nofollow noopener noreferrer" target="_blank">series.data</a> but not <code>dataset</code>.</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<p>In fact, <a href="https://echarts.apache.org/option.html##series.data" rel="nofollow noopener noreferrer" target="_blank">series.data</a> is an important setting method which will always exist. Some special non-table format chart like <a href="https://echarts.apache.org/option.html##series-treemap" rel="nofollow noopener noreferrer" target="_blank">treemap</a>, <a href="https://echarts.apache.org/option.html##series-graph" rel="nofollow noopener noreferrer" target="_blank">graph</a> a [...]
+<h2 id="others"><a href="#others" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Others</h2>
+<p>The following charts now support dataset:
+<code>line</code>, <code>bar</code>, <code>pie</code>, <code>scatter</code>, <code>effectScatter</code>, <code>parallel</code>, <code>candlestick</code>, <code>map</code>, <code>funnel</code>, <code>custom</code>.
+ECharts will support more charts in the future.</p>
+<p>In the end, here is an <a href="https://echarts.apache.org/examples/en/editor.html?c=dataset-link" rel="nofollow noopener noreferrer" target="_blank">example</a> of several charts shared one <code>dataset</code> with linkage interaction.</p></div> <div class="table-of-contents"><h4 class="toc-container-header">In this Page</h4> <ul><li class="toc2"><a href="/echarts-handbook/en/concepts/dataset#define-data-under-series">Define data under series</a></li><li class="toc2"><a href="/echar [...]
+ <script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
+ </body>
+</html>
diff --git a/docs/en/concepts/event/index.html b/docs/en/concepts/event/index.html
new file mode 100644
index 0000000..d31c9bb
--- /dev/null
+++ b/docs/en/concepts/event/index.html
@@ -0,0 +1,59 @@
+<!doctype html>
+<html data-n-head-ssr>
+ <head>
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="ECharts Handbook"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/echarts-handbook/_nuxt/ [...]
+ </head>
+ <body>
+ <div data-server-rendered="true" id="__nuxt"><!----><div id="__layout"><div><nav role="navigation" class="navbar navbar-default navbar-fixed-top"><div class="container-fluid"><div class="navbar-header"><button type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href [...]
+<p>Users can trigger corresponding events by their operation. The developer can handle the callback function by listening to these events, such as jump to a new website, pop-up a dialog box, or drill down the data.</p>
+<p>The name of the event and the DOM event is both lowercase string. Here is an example of binding listening to <code>click</code> event.</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<p>There are two kinds of event in ECharts, one happened when the user clicks the mouse or hover the elements in charts, the other happened while the user triggered some interactive actions. Such as <a href="https://echarts.apache.org/api.html#events.legendselectchanged" rel="nofollow noopener noreferrer" target="_blank">'legendselectchanged'</a> triggered while changing the legend selected (please notice that <code>legendselected</code> won't be triggered in this situation), <a href="ht [...]
+<h2 id="handling-the-mouse-events"><a href="#handling-the-mouse-events" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Handling the Mouse Events</h2>
+<p>ECharts support general mouse events: <code>'click'</code>, <code>'dblclick'</code>, <code>'mousedown'</code>, <code>'mousemove'</code>, <code>'mouseup'</code>, <code>'mouseover'</code>, <code>'mouseout'</code>, <code>'globalout'</code>, <code>'contextmenu'</code>. This is an example of opening the search result page after clicking the bar chart.</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<p>All mouse events included <code>params</code> which contained the data of the object.</p>
+<p>Format:</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<p>Identify where the mouse clicked.</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<p>Use <code>query</code> to trigger callback of the specified component:</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<p><code>query</code> can be <code>string</code> or <code>Object</code>.</p>
+<p>If it is <code>string</code>, the format can be <code>mainType</code> or <code>mainType.subType</code>, such as:</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<p>If it is <code>Object</code>, <code>query</code> can include more than one attribute:</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<p>Such as:</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<p>For example:</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<p>For example:</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<p>For example:</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<p>You can display a popup, update the charts using the query result from your database by the data name or series name in the callback function. Here is an example:</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<h2 id="event-of-component-interaction"><a href="#event-of-component-interaction" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Event of Component Interaction</h2>
+<p>All Component Interaction in ECharts will trigger a corresponding event. Normal events and parameters are listed in the <a href="https://echarts.apache.org//api.html#events" rel="nofollow noopener noreferrer" target="_blank">events</a> document.</p>
+<p>Here is an example of listening to legend event:</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<h2 id="writing-code-to-trigger-component-action-manually"><a href="#writing-code-to-trigger-component-action-manually" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Writing Code to Trigger Component Action Manually</h2>
+<p>You can trigger events such as <code>'legendselectchanged'</code> not only by the user but also with code manually. It can be used to display the tooltip, select the legend.</p>
+<p>In ECharts <code>myChart.dispatchAction({ type: '' })</code> is used to trigger the behavior. This manages all actions and can record the behaviors conveniently.</p>
+<p>Commonly used behavior and corresponding parameters are listed in <a href="https://echarts.apache.org//api.html#action" rel="nofollow noopener noreferrer" target="_blank">action</a>.</p>
+<p>The following example shows how to highlight each sector one by one in the pie chart using <code>dispatchAction</code>.</p>
+<div class="nuxt-content-highlight"><!----></div>
+<h2 id="listen-to-events-on-the-blank-area"><a href="#listen-to-events-on-the-blank-area" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Listen to Events on the Blank Area</h2>
+<p>Sometimes developers need to listen to the events that are triggered from the blank of the canvas. For example, need to reset the chart when users click on the blank area.</p>
+<p>Before we talk about this feature, we need to clarify two kinds of events: zrender events and echarts events.</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<p>zrender events are different from echarts events. The former one are triggered when mouse/pointer is at everywhere, while the latter one can only be triggered when mouse/pointer is at the graphic elements. In fact, echarts events are implemented based on zrender events, that is, when a zrender events is triggered at a graphic element, echarts will trigger a echarts event.</p>
+<p>Having zrender events, we can implement listen to events from the blank as follows:</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+ <script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
+ </body>
+</html>
diff --git a/docs/en/concepts/legend/index.html b/docs/en/concepts/legend/index.html
new file mode 100644
index 0000000..5f4eac3
--- /dev/null
+++ b/docs/en/concepts/legend/index.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<html data-n-head-ssr>
+ <head>
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="ECharts Handbook"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/echarts-handbook/_nuxt/ [...]
+ </head>
+ <body>
+ <div data-server-rendered="true" id="__nuxt"><!----><div id="__layout"><div><nav role="navigation" class="navbar navbar-default navbar-fixed-top"><div class="container-fluid"><div class="navbar-header"><button type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href [...]
+<p>Legends are used to annotate the content in the chart using different colors, shapes and texts to indicate different categories. By clicking the legends, the user can show or hide the corresponding categories. Legend is one of the key to understand the chart.</p>
+<h2 id="layout"><a aria-hidden="true" href="#layout" tabindex="-1"><span class="icon icon-link"></span></a>Layout</h2>
+<p>Legend is always placed at the upper right corner of the chart. All legends in the same page need to be consistent, align horizontally or vertically by considering the layout of the overall chart space. When the chart have little vertical space or the content area is crowded, it is also a good choice to put legent on the bottom of the chart. Here are some layouts of the legend:</p>
+<div class="nuxt-content-highlight"><!----></div>
+<p>Use scrollable control if there are many legends.</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<h2 id="style"><a aria-hidden="true" href="#style" tabindex="-1"><span class="icon icon-link"></span></a>Style</h2>
+<p>For dark color background, use a light color for the background layer and text while changing the background to translucent.</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<p>The color of legend has many ways to design. For different charts, the legend style can be different.</p>
+<img max-width="830" width="80%" height="80%" src="/images/design/legend/charts_sign_img04.png">
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<h2 id="interactive"><a aria-hidden="true" href="#interactive" tabindex="-1"><span class="icon icon-link"></span></a>Interactive</h2>
+<p>Depend on the environmental demand, the legend can support interactive operation. Click the legend to show or hide corresponding categories:</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<h2 id="tips"><a aria-hidden="true" href="#tips" tabindex="-1"><span class="icon icon-link"></span></a>Tips</h2>
+<p>The legend should be used according to the situation. Some dual-axis charts include multiple chart types. Different kinds of legend stypes should be distinguished.</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<p>While there is only one kind of data in the chart, use the chart title rather than the legend to explain it.</p></div> <div class="table-of-contents"><h4 class="toc-container-header">In this Page</h4> <ul><li class="toc2"><a href="/echarts-handbook/en/concepts/legend#layout">Layout</a></li><li class="toc2"><a href="/echarts-handbook/en/concepts/legend#style">Style</a></li><li class="toc2"><a href="/echarts-handbook/en/concepts/legend#interactive">Interactive</a></li><li class="toc2">< [...]
+ <script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
+ </body>
+</html>
diff --git a/docs/en/concepts/style/index.html b/docs/en/concepts/style/index.html
new file mode 100644
index 0000000..efd6be0
--- /dev/null
+++ b/docs/en/concepts/style/index.html
@@ -0,0 +1,49 @@
+<!doctype html>
+<html data-n-head-ssr>
+ <head>
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="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>This article provides an overview of the different approaches about Apache ECharts<sup>TM</sup> style customization. For example, how to config the color, size, shadow of the graphic elements and labels.</p>
+<blockquote>
+<p>The term "style" may not follow the convention of data visualization, but we use it in this article because it is popular and easy to understand.</p>
+</blockquote>
+<p>These approaches below will be introduced. The functionalities of them might be overlapped, but they are suitable for different scenarios.</p>
+<ul>
+<li>Theme</li>
+<li>Color Palette</li>
+<li>Customize style explicitly (itemStyle, lineStyle, areaStyle, label, ...)</li>
+<li>Visual encoding (visualMap component)</li>
+</ul>
+<h2 id="theme"><a href="#theme" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Theme</h2>
+<p>Setting a theme is the simplest way to change the color style. For example, in <a href="$%7BwebsitePath%7D/examples/en/index.html">Examples page</a>, we can switch to dark mode and see the result of a different theme.</p>
+<p>In our project, we can switch to dark theme like:</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<p>Other themes are not included by default, and need to load them ourselves if we want to use them. Themes can be visited and downloaded in the <a href="https://echarts.apache.org/en/theme-builder.html" rel="nofollow noopener noreferrer" target="_blank">theme builder</a>. Theme can also be created or edited in it. The downloaded theme can be used as follows:</p>
+<p>If a theme is downloaded as a JSON file, we should register it by ourselves, for example:</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<p>If a theme is downloaded as a JS file, it will auto register itself:</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<h2 id="color-palette"><a href="#color-palette" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Color Palette</h2>
+<p>Color palette can be given in option. They provide a group of colors, which will be auto picked by series and data. We can give a global palette, or exclusive pallette for certain series.</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<h2 id="customize-style-explicitly-itemstyle-linestyle-areastyle-label-"><a href="#customize-style-explicitly-itemstyle-linestyle-areastyle-label-" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Customize Style Explicitly (itemStyle, lineStyle, areaStyle, label, ...)</h2>
+<p>It is a common way to set style explicitly. Throughout ECharts <a href="https://echarts.apache.org/option.html#" rel="nofollow noopener noreferrer" target="_blank">option</a>, style related options can be set in various place, including <a href="https://echarts.apache.org/option.html#series.itemStyle" rel="nofollow noopener noreferrer" target="_blank">itemStyle</a>, <a href="https://echarts.apache.org/option.html#series-line.lineStyle" rel="nofollow noopener noreferrer" target="_blank [...]
+<p>Generally speaking, all of the built-in components and series follow the naming convention like <code>itemStyle</code>, <code>lineStyle</code>, <code>areaStyle</code>, <code>label</code> etc, although they may occur in different place according to different series or components.</p>
+<p>In the following code we add shadow, gradient to bubble chart.</p>
+<div class="nuxt-content-highlight"><!----></div>
+<h2 id="style-of-emphasis-state"><a href="#style-of-emphasis-state" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Style of Emphasis State</h2>
+<p>When mouse hovering a graphic elements, usually the emphasis style will be displayed. By default, the emphasis style is auto generated by the normal style. However they can be specified by <a href="https://echarts.apache.org/option.html#series-bar.emphasis" rel="nofollow noopener noreferrer" target="_blank">emphasis</a> property. The options in <a href="https://echarts.apache.org/option.html#series-bar.emphasis" rel="nofollow noopener noreferrer" target="_blank">emphasis</a> is the sa [...]
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<p>Notice: Before ECharts4, the emphasis style should be written like this:</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<p>The option format is still <strong>compatible</strong>, but not recommended. In fact, in most cases, users only set normal style, and use the default emphasis style. So since ECharts4, we support to write style without the "normal" term, which makes the option more simple and neat.</p>
+<h2 id="visual-encoding-by-visualmap-component"><a href="#visual-encoding-by-visualmap-component" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Visual Encoding by visualMap Component</h2>
+<p><a href="https://echarts.apache.org/option.html#visualMap" rel="nofollow noopener noreferrer" target="_blank">visualMap component</a> supports config the rule that mapping value to visual channel (color, size, ...). More details can be check in <a href="~Visual%20Map%20of%20Data">Visual Map of Data</a>.</p></div> <div class="table-of-contents"><h4 class="toc-container-header">In this Page</h4> <ul><li class="toc2"><a href="/echarts-handbook/en/concepts/style#theme">Theme</a></li><li c [...]
+ <script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
+ </body>
+</html>
diff --git a/docs/en/concepts/visual-map/index.html b/docs/en/concepts/visual-map/index.html
new file mode 100644
index 0000000..5f34e14
--- /dev/null
+++ b/docs/en/concepts/visual-map/index.html
@@ -0,0 +1,49 @@
+<!doctype html>
+<html data-n-head-ssr>
+ <head>
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="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>Data visualization is a procedure of mapping data into visual elements. This procedure can also be called visual coding, and visual elements can also be called visual channels.</p>
+<p>Every type of charts in Apache ECharts<sup>TM</sup> has this built-in mapping procedure. For example, line chart map data into <em>lines</em>, bar chart map data into <em>height</em>. Some more complicated charts, like <code>graph</code>, <code>themeRiver</code>, and <code>treemap</code> have their own built-in mapping.</p>
+<p>Besides, ECharts provides <a href="https://echarts.apache.org/option.html#visualMap" rel="nofollow noopener noreferrer" target="_blank">visualMap component</a> for general visual mapping. Visual elements allowed in <code>visualMap</code> component are:</p>
+<ul>
+<li><code>symbol</code>, <code>symbolSize</code></li>
+<li><code>color</code>, <code>opacity</code>, <code>colorAlpha</code>,</li>
+<li><code>colorLightness</code>, <code>colorSaturation</code>, <code>colorHue</code></li>
+</ul>
+<p>Next, we are going to introduce how to use <code>visualMap</code> component.</p>
+<h2 id="data-and-dimension"><a href="#data-and-dimension" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Data and Dimension</h2>
+<p>Data are usually stored in <a href="https://echarts.apache.org/option.html#series.data" rel="nofollow noopener noreferrer" target="_blank">series.data</a> in ECharts. Depending on chart types, like list, tree, graph, and so on, the form of data may vary somehow. But they have one common feature, that they are a collection of data items. Every data item contains data value, and other information if needed. Every data value can be a single value (one dimension) or an array (multiple dim [...]
+<p>For example, <a href="https://echarts.apache.org/option.html#series.data" rel="nofollow noopener noreferrer" target="_blank">series.data</a> is the most common form, which is a <code>list</code>, a common array:</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<p>Usually the first one or two dimensions are used for mapping. For example, map the first dimension to x axis, and the second dimension to y axis. If you want to represent more dimensions, <code>visualMap</code> is what you need. Most likely, <a href="https://echarts.apache.org/option.html#series-scatter" rel="nofollow noopener noreferrer" target="_blank">scatter charts</a> use radius to represent the third dimension.</p>
+<h2 id="the-visualmap-component"><a href="#the-visualmap-component" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>The visualMap Component</h2>
+<p>visualMap component defines the mapping from <em>which dimension of data</em> to <em>what visual elements</em>.</p>
+<p>The following two types of visualMap components are supported, identified with <a href="https://echarts.apache.org/option.html#visualMap.type" rel="nofollow noopener noreferrer" target="_blank">visualMap.type</a>.</p>
+<p>Its structure is defined as:</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<h2 id="continuous-and-piecewise-visual-mapping-components"><a href="#continuous-and-piecewise-visual-mapping-components" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Continuous and Piecewise Visual Mapping Components</h2>
+<p>The visual mapping component of ECharts is divided into continuous (<a href="https://echarts.apache.org/option.html#visualMap-continuous" rel="nofollow noopener noreferrer" target="_blank">visualMapContinuous</a>) and piecewise (<a href="https://echarts.apache.org/option.html#visualMap-piecewise" rel="nofollow noopener noreferrer" target="_blank">visualMapPiecewise</a>).</p>
+<p>Continuous means that the data dimension for visual mapping is a continuous value, while piecewise means that the data is divided into multiple segments or discrete data.</p>
+<h3 id="continuous-visual-mapping"><a href="#continuous-visual-mapping" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Continuous Visual Mapping</h3>
+<p>Continuous type visual mapping can determine the range of visual mapping by specifying the maximum and minimum values.</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<p>where <a href="https://echarts.apache.org/option.html#visualMap.inRange" rel="nofollow noopener noreferrer" target="_blank">visualMap.inRange</a> indicates the style used for data within the data mapping range; while <a href="https://echarts.apache.org/option.html#visualMap.outOfRange" rel="nofollow noopener noreferrer" target="_blank">visualMap.outOfRange</a> specifies the style for data outside the mapping range.</p>
+<p><a href="~visualMap.dimension">visualMap.dimension</a> specifies which dimension of the data will be visually mapped.</p>
+<h3 id="piecewise-visual-mapping"><a href="#piecewise-visual-mapping" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Piecewise Visual Mapping</h3>
+<p>The piecewise visual mapping component has three modes.</p>
+<ul>
+<li>Continuous data average segmentation: based on <a href="https://echarts.apache.org/option.html#visualMap-piecewise.splitNumber" rel="nofollow noopener noreferrer" target="_blank">visualMap-piecewise.splitNumber</a> to automatically split the data into pieces equally.</li>
+<li>Continuous data custom segmentation: define the range of each piece based on <a href="https://echarts.apache.org/option.html#visualMap-piecewise.pieces" rel="nofollow noopener noreferrer" target="_blank">visualMap-piecewise.pieces</a>.</li>
+<li>Discrete data (categorical data): categories are defined in <a href="https://echarts.apache.org/option.html#visualMap-piecewise.categories" rel="nofollow noopener noreferrer" target="_blank">visualMap-piecewise.categories</a>.</li>
+</ul>
+<p>To use segmented visual map, you need to set <code>type</code> to <code>'piecewise'</code> and choose one of the above three configuration items.</p></div> <div class="table-of-contents"><h4 class="toc-container-header">In this Page</h4> <ul><li class="toc2"><a href="/echarts-handbook/en/concepts/visual-map#data-and-dimension">Data and Dimension</a></li><li class="toc2"><a href="/echarts-handbook/en/concepts/visual-map#the-visualmap-component">The visualMap Component</a></li><li class [...]
+ <script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
+ </body>
+</html>
diff --git a/docs/en/get-started/index.html b/docs/en/get-started/index.html
new file mode 100644
index 0000000..461a136
--- /dev/null
+++ b/docs/en/get-started/index.html
@@ -0,0 +1,30 @@
+<!doctype html>
+<html data-n-head-ssr>
+ <head>
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="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="getting-apache-echarts"><a href="#getting-apache-echarts" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Getting Apache ECharts</h2>
+<p>Apache ECharts supports several download methods, which are further explained in the next tutorial <a href="en/basics/download">Installation</a>. Here, we take the example of getting it from the <a href="https://www.jsdelivr.com/package/npm/echarts" rel="nofollow noopener noreferrer" target="_blank">jsDelivr</a> CDN and explain how to install it quickly.</p>
+<p>At <a href="https://www.jsdelivr.com/package/npm/echarts" rel="nofollow noopener noreferrer" target="_blank">https://www.jsdelivr.com/package/npm/echarts</a> select <code>dist/echarts.js</code>, click and save it as <code>echarts.js</code> file.</p>
+<blockquote>
+<p>More information about these files can be found in the next tutorial <a href="en/basics/download">Installation</a>.</p>
+</blockquote>
+<h2 id="including-echarts"><a href="#including-echarts" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Including ECharts</h2>
+<p>Create a new <code>index.html</code> file in the directory where you just saved <code>echarts.js</code>, with the following content:</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-html line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" [...]
+<p>When you open this <code>index.html</code>, you will see an empty page. But don't worry. Open the console and make sure that no error message is reported, then you can proceed to the next step.</p>
+<h2 id="plotting-a-simple-chart"><a href="#plotting-a-simple-chart" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Plotting a Simple Chart</h2>
+<p>Before drawing we need to prepare a DOM container for ECharts with a defined height and width. After the following code after the <code></head></code> tag introduced earlier.</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-html line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" [...]
+<p>Then you can initialize an echarts instance with the <a href="https://echarts.apache.org//api.html#echarts.init" rel="nofollow noopener noreferrer" target="_blank">echarts.init</a> method and set the echarts instance with [setOption](<a href="https://echarts.apache.org//api.html#" rel="nofollow noopener noreferrer" target="_blank">https://echarts.apache.org//api.html#</a> echartsInstance.setOption) method to generate a simple bar chart。 Here is the complete code.</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-html line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" [...]
+<p>And this is your first chart with Apache ECharts!</p>
+<iframe width="100%" height="350" src="https://echarts.apache.org/examples/en/view.html?c=doc-example/getting-started&reset=1&edit=1"></iframe></div> <div class="table-of-contents"><h4 class="toc-container-header">In this Page</h4> <ul><li class="toc2"><a href="/echarts-handbook/en/get-started#getting-apache-echarts">Getting Apache ECharts</a></li><li class="toc2"><a href="/echarts-handbook/en/get-started#including-echarts">Including ECharts</a></li><li class="toc2"><a href="/echarts-han [...]
+ <script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
+ </body>
+</html>
diff --git a/docs/en/meta/edit-guide/index.html b/docs/en/meta/edit-guide/index.html
new file mode 100644
index 0000000..c3a519b
--- /dev/null
+++ b/docs/en/meta/edit-guide/index.html
@@ -0,0 +1,108 @@
+<!doctype html>
+<html data-n-head-ssr>
+ <head>
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="ECharts Handbook"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/echarts-handbook/_nuxt/ [...]
+ </head>
+ <body>
+ <div data-server-rendered="true" id="__nuxt"><!----><div id="__layout"><div><nav role="navigation" class="navbar navbar-default navbar-fixed-top"><div class="container-fluid"><div class="navbar-header"><button type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href [...]
+<h2 id="adding-a-markdown-file"><a href="#adding-a-markdown-file" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Adding a Markdown File</h2>
+<p>Add a markdown file to the <code>contents/zh/</code> (Chinese posts) or <code>contents/en/</code> (English posts) directories, up to three levels. Update the path and title information in <code>contents/zh/posts.yml</code> or <code>contents/en/posts.yml</code>.</p>
+<p>Lowercase markdown file names.</p>
+<h2 id="using-prettier-to-automatically-format-code"><a href="#using-prettier-to-automatically-format-code" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Using Prettier to Automatically Format Code</h2>
+<p>Before you start, we recommend installing the <a href="https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode" rel="nofollow noopener noreferrer" target="_blank">prettier VSCode plugin</a>, which will automatically format the code for you when you save it.</p>
+<p>If you feel that the automatic formatting is breaking your code block, you can add the following comment to prevent <code>prettier</code> from formatting the code inside the block</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="ro [...]
+<p>If you find blocks of code that are not formatted, check first for syntax errors in the code.</p>
+<h2 id="built-in-variables"><a href="#built-in-variables" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Built-in Variables</h2>
+<ul>
+<li><code>optionPath</code></li>
+<li><code>mainSitePath</code></li>
+<li><code>exampleViewPath</code></li>
+<li><code>exampleEditorPath</code></li>
+</ul>
+<p>Usage:</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-text line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" [...]
+<h2 id="embedding-code"><a href="#embedding-code" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Embedding Code</h2>
+<h3 id="basic-usage"><a href="#basic-usage" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Basic Usage</h3>
+
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="ro [...]
+
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<h3 id="recommended-way-of-writing-code"><a href="#recommended-way-of-writing-code" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Recommended Way of Writing Code</h3>
+<p>In order to allow the tool to help us format the code, we should try to avoid syntactically problematic writing styles.</p>
+<p>For example, the comment <code>...</code></p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" s [...]
+<h3 id="live-preview-and-editing"><a href="#live-preview-and-editing" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Live Preview and Editing</h3>
+<blockquote>
+<p>Currently only preview of Option code is supported</p>
+</blockquote>
+
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="ro [...]
+
+<div class="nuxt-content-highlight"><!----></div>
+<h3 id="more-preview-layouts"><a href="#more-preview-layouts" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>More Preview Layouts</h3>
+<h4 id="left-to-right"><a href="#left-to-right" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Left to Right</h4>
+
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="ro [...]
+
+<div class="nuxt-content-highlight"><!----></div>
+<h4 id="right-to-left"><a href="#right-to-left" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Right to left</h4>
+
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="ro [...]
+
+<div class="nuxt-content-highlight"><!----></div>
+<h4 id="down-to-up"><a href="#down-to-up" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Down to Up</h4>
+
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="ro [...]
+
+<div class="nuxt-content-highlight"><!----></div>
+<h3 id="highlighting-lines-of-code-and-adding-filenames"><a href="#highlighting-lines-of-code-and-adding-filenames" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Highlighting Lines of Code and Adding Filenames</h3>
+<p>Use.</p>
+
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="ro [...]
+
+<p>Effects.</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <span class="filename">option.js</span> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657c [...]
+<h2 id="embedding-images"><a href="#embedding-images" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Embedding Images</h2>
+<p>Source images are stored under <code>static/images/</code>.</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="ro [...]
+<h3 id="set-the-image-height-and-width"><a href="#set-the-image-height-and-width" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Set the Image Height and Width</h3>
+<p>For the temporary style of the current page, you can just write html.</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="ro [...]
+<h2 id="add-example-iframe"><a href="#add-example-iframe" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Add Example Iframe</h2>
+<p><code>src</code> is the string after <code>?c=</code> in the <a href="https://echarts.apache.org/examples/en/editor.html?c=line-simple" rel="nofollow noopener noreferrer" target="_blank">https://echarts.apache.org/examples/en/editor.html?c=line-simple</a> address</p>
+<p>Use:</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="ro [...]
+<p>Result:
+<iframe width="100%" height="300" src="https://echarts.apache.org/examples/en/view.html?c=doc-example/getting-started"></iframe></p>
+<h2 id="add-link-to-option-item"><a href="#add-link-to-option-item" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Add Link to Option Item</h2>
+<p>Use:</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="ro [...]
+<p>Result:
+<a href="https://echarts.apache.org/option.html#series-bar.itemStyle.color" target="_blank">series-bar.itemStyle.color</a></p>
+<h2 id="more-component-usage"><a href="#more-component-usage" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>More Component Usage</h2>
+<p>The documentation supports the use of globally registered <code>markdown</code> components. In addition to the <code>md-example</code> component just described, the following components are also available</p>
+<h3 id="md-alert"><a href="#md-alert" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>md-alert</h3>
+<p>Prompt components</p>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="ro [...]
+<blockquote class="md-alert md-alert-info" data-v-a47f983e><p data-v-a47f983e>
+This is an info alert.
+</p></blockquote>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="ro [...]
+<blockquote class="md-alert md-alert-success" data-v-a47f983e><p data-v-a47f983e>
+This is a success alert.
+</p></blockquote>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="ro [...]
+<blockquote class="md-alert md-alert-warning" data-v-a47f983e><p data-v-a47f983e>
+This is a warning alert.
+</p></blockquote>
+<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="ro [...]
+<blockquote class="md-alert md-alert-danger" data-v-a47f983e><p data-v-a47f983e>
+This is a danger alert.
+</p></blockquote></div> <div class="table-of-contents"><h4 class="toc-container-header">In this Page</h4> <ul><li class="toc2"><a href="/echarts-handbook/en/meta/edit-guide#adding-a-markdown-file">Adding a Markdown File</a></li><li class="toc2"><a href="/echarts-handbook/en/meta/edit-guide#using-prettier-to-automatically-format-code">Using Prettier to Automatically Format Code</a></li><li class="toc2"><a href="/echarts-handbook/en/meta/edit-guide#built-in-variables">Built-in Variables</a [...]
+ <script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
+ </body>
+</html>
diff --git a/docs/favicon.ico b/docs/favicon.ico
new file mode 100644
index 0000000..3632d0c
Binary files /dev/null and b/docs/favicon.ico differ
diff --git a/docs/images/demo.png b/docs/images/demo.png
new file mode 100644
index 0000000..478f548
Binary files /dev/null and b/docs/images/demo.png differ
diff --git a/docs/images/design/axis/charts_axis_img01.jpg b/docs/images/design/axis/charts_axis_img01.jpg
new file mode 100644
index 0000000..b2ceeae
Binary files /dev/null and b/docs/images/design/axis/charts_axis_img01.jpg differ
diff --git a/docs/images/design/axis/charts_axis_img02.jpg b/docs/images/design/axis/charts_axis_img02.jpg
new file mode 100644
index 0000000..1c605cd
Binary files /dev/null and b/docs/images/design/axis/charts_axis_img02.jpg differ
diff --git a/docs/images/design/axis/charts_axis_img02.png b/docs/images/design/axis/charts_axis_img02.png
new file mode 100644
index 0000000..bbb445f
Binary files /dev/null and b/docs/images/design/axis/charts_axis_img02.png differ
diff --git a/docs/images/design/axis/charts_axis_img04.png b/docs/images/design/axis/charts_axis_img04.png
new file mode 100644
index 0000000..35711b9
Binary files /dev/null and b/docs/images/design/axis/charts_axis_img04.png differ
diff --git a/docs/images/design/axis/charts_axis_img05.png b/docs/images/design/axis/charts_axis_img05.png
new file mode 100644
index 0000000..5bd9f05
Binary files /dev/null and b/docs/images/design/axis/charts_axis_img05.png differ
diff --git a/docs/images/design/axis/charts_axis_img07.png b/docs/images/design/axis/charts_axis_img07.png
new file mode 100644
index 0000000..70f9669
Binary files /dev/null and b/docs/images/design/axis/charts_axis_img07.png differ
diff --git a/docs/images/design/axis/charts_axis_img10.png b/docs/images/design/axis/charts_axis_img10.png
new file mode 100644
index 0000000..e4b2ae0
Binary files /dev/null and b/docs/images/design/axis/charts_axis_img10.png differ
diff --git a/docs/images/design/axis/charts_axis_img12.png b/docs/images/design/axis/charts_axis_img12.png
new file mode 100644
index 0000000..1142294
Binary files /dev/null and b/docs/images/design/axis/charts_axis_img12.png differ
diff --git a/docs/images/design/bar/bar01.jpg b/docs/images/design/bar/bar01.jpg
new file mode 100644
index 0000000..3e569f7
Binary files /dev/null and b/docs/images/design/bar/bar01.jpg differ
diff --git a/docs/images/design/bar/bar02.jpg b/docs/images/design/bar/bar02.jpg
new file mode 100644
index 0000000..392e310
Binary files /dev/null and b/docs/images/design/bar/bar02.jpg differ
diff --git a/docs/images/design/bar/bar03.jpg b/docs/images/design/bar/bar03.jpg
new file mode 100644
index 0000000..1799fad
Binary files /dev/null and b/docs/images/design/bar/bar03.jpg differ
diff --git a/docs/images/design/bar/bar04.jpg b/docs/images/design/bar/bar04.jpg
new file mode 100644
index 0000000..1e310ab
Binary files /dev/null and b/docs/images/design/bar/bar04.jpg differ
diff --git a/docs/images/design/bi-directional-bar/bi-directional-bar01.jpg b/docs/images/design/bi-directional-bar/bi-directional-bar01.jpg
new file mode 100755
index 0000000..392e310
Binary files /dev/null and b/docs/images/design/bi-directional-bar/bi-directional-bar01.jpg differ
diff --git a/docs/images/design/bi-directional-bar/bi-directional-bar02.jpg b/docs/images/design/bi-directional-bar/bi-directional-bar02.jpg
new file mode 100755
index 0000000..2c17514
Binary files /dev/null and b/docs/images/design/bi-directional-bar/bi-directional-bar02.jpg differ
diff --git a/docs/images/design/color/color01.png b/docs/images/design/color/color01.png
new file mode 100644
index 0000000..35ac64d
Binary files /dev/null and b/docs/images/design/color/color01.png differ
diff --git a/docs/images/design/color/color02.png b/docs/images/design/color/color02.png
new file mode 100644
index 0000000..6398403
Binary files /dev/null and b/docs/images/design/color/color02.png differ
diff --git a/docs/images/design/color/color03.png b/docs/images/design/color/color03.png
new file mode 100644
index 0000000..9afa664
Binary files /dev/null and b/docs/images/design/color/color03.png differ
diff --git a/docs/images/design/color/color04.png b/docs/images/design/color/color04.png
new file mode 100644
index 0000000..63939e0
Binary files /dev/null and b/docs/images/design/color/color04.png differ
diff --git a/docs/images/design/legend/charts_sign_img01.png b/docs/images/design/legend/charts_sign_img01.png
new file mode 100644
index 0000000..223a64b
Binary files /dev/null and b/docs/images/design/legend/charts_sign_img01.png differ
diff --git a/docs/images/design/legend/charts_sign_img02.png b/docs/images/design/legend/charts_sign_img02.png
new file mode 100644
index 0000000..419a2ca
Binary files /dev/null and b/docs/images/design/legend/charts_sign_img02.png differ
diff --git a/docs/images/design/legend/charts_sign_img03.png b/docs/images/design/legend/charts_sign_img03.png
new file mode 100644
index 0000000..9afd241
Binary files /dev/null and b/docs/images/design/legend/charts_sign_img03.png differ
diff --git a/docs/images/design/legend/charts_sign_img04.png b/docs/images/design/legend/charts_sign_img04.png
new file mode 100644
index 0000000..1f5b910
Binary files /dev/null and b/docs/images/design/legend/charts_sign_img04.png differ
diff --git a/docs/images/design/line/line01.jpg b/docs/images/design/line/line01.jpg
new file mode 100644
index 0000000..dff5cfd
Binary files /dev/null and b/docs/images/design/line/line01.jpg differ
diff --git a/docs/images/design/pie/pie01.jpg b/docs/images/design/pie/pie01.jpg
new file mode 100644
index 0000000..375a0fb
Binary files /dev/null and b/docs/images/design/pie/pie01.jpg differ
diff --git a/docs/images/design/pie/pie02.jpg b/docs/images/design/pie/pie02.jpg
new file mode 100644
index 0000000..828577a
Binary files /dev/null and b/docs/images/design/pie/pie02.jpg differ
diff --git a/docs/images/design/pie/pie03.jpg b/docs/images/design/pie/pie03.jpg
new file mode 100644
index 0000000..c519208
Binary files /dev/null and b/docs/images/design/pie/pie03.jpg differ
diff --git a/docs/images/design/pie/pie04.jpg b/docs/images/design/pie/pie04.jpg
new file mode 100644
index 0000000..1980e34
Binary files /dev/null and b/docs/images/design/pie/pie04.jpg differ
diff --git a/docs/images/design/scatter/scatter5.jpg b/docs/images/design/scatter/scatter5.jpg
new file mode 100755
index 0000000..c077463
Binary files /dev/null and b/docs/images/design/scatter/scatter5.jpg differ
diff --git a/docs/images/feature-v5/dashboard-pointer.png b/docs/images/feature-v5/dashboard-pointer.png
new file mode 100644
index 0000000..2dabc8f
Binary files /dev/null and b/docs/images/feature-v5/dashboard-pointer.png differ
diff --git a/docs/images/feature-v5/dataZoom.png b/docs/images/feature-v5/dataZoom.png
new file mode 100644
index 0000000..296963d
Binary files /dev/null and b/docs/images/feature-v5/dataZoom.png differ
diff --git a/docs/images/feature-v5/dirty-rect.gif b/docs/images/feature-v5/dirty-rect.gif
new file mode 100644
index 0000000..8b0467a
Binary files /dev/null and b/docs/images/feature-v5/dirty-rect.gif differ
diff --git a/docs/images/feature-v5/dirty-rect.png b/docs/images/feature-v5/dirty-rect.png
new file mode 100644
index 0000000..c7ee56d
Binary files /dev/null and b/docs/images/feature-v5/dirty-rect.png differ
diff --git a/docs/images/feature-v5/echarts-5-en.png b/docs/images/feature-v5/echarts-5-en.png
new file mode 100644
index 0000000..120ce9c
Binary files /dev/null and b/docs/images/feature-v5/echarts-5-en.png differ
diff --git a/docs/images/feature-v5/echarts-5.png b/docs/images/feature-v5/echarts-5.png
new file mode 100644
index 0000000..666d43b
Binary files /dev/null and b/docs/images/feature-v5/echarts-5.png differ
diff --git a/docs/images/feature-v5/gauge-pointer.png b/docs/images/feature-v5/gauge-pointer.png
new file mode 100644
index 0000000..2dabc8f
Binary files /dev/null and b/docs/images/feature-v5/gauge-pointer.png differ
diff --git a/docs/images/feature-v5/new-theme-dark.png b/docs/images/feature-v5/new-theme-dark.png
new file mode 100644
index 0000000..727a942
Binary files /dev/null and b/docs/images/feature-v5/new-theme-dark.png differ
diff --git a/docs/images/feature-v5/new-theme-light.png b/docs/images/feature-v5/new-theme-light.png
new file mode 100644
index 0000000..a18e2ac
Binary files /dev/null and b/docs/images/feature-v5/new-theme-light.png differ
diff --git a/docs/images/feature-v5/new-tooltip-2 copy.png b/docs/images/feature-v5/new-tooltip-2 copy.png
new file mode 100644
index 0000000..52d3418
Binary files /dev/null and b/docs/images/feature-v5/new-tooltip-2 copy.png differ
diff --git a/docs/images/feature-v5/new-tooltip-2.png b/docs/images/feature-v5/new-tooltip-2.png
new file mode 100644
index 0000000..be34cc1
Binary files /dev/null and b/docs/images/feature-v5/new-tooltip-2.png differ
diff --git a/docs/images/feature-v5/new-tooltip.png b/docs/images/feature-v5/new-tooltip.png
new file mode 100644
index 0000000..56ad865
Binary files /dev/null and b/docs/images/feature-v5/new-tooltip.png differ
diff --git a/docs/images/feature-v5/new-tooltip2.png b/docs/images/feature-v5/new-tooltip2.png
new file mode 100644
index 0000000..52d3418
Binary files /dev/null and b/docs/images/feature-v5/new-tooltip2.png differ
diff --git a/docs/images/feature-v5/pie-label copy.png b/docs/images/feature-v5/pie-label copy.png
new file mode 100644
index 0000000..aee3315
Binary files /dev/null and b/docs/images/feature-v5/pie-label copy.png differ
diff --git a/docs/images/feature-v5/pie-label-2.png b/docs/images/feature-v5/pie-label-2.png
new file mode 100644
index 0000000..8c427b9
Binary files /dev/null and b/docs/images/feature-v5/pie-label-2.png differ
diff --git a/docs/images/feature-v5/pie-label.png b/docs/images/feature-v5/pie-label.png
new file mode 100644
index 0000000..aee3315
Binary files /dev/null and b/docs/images/feature-v5/pie-label.png differ
diff --git a/docs/images/feature-v5/theme-color.png b/docs/images/feature-v5/theme-color.png
new file mode 100644
index 0000000..636c868
Binary files /dev/null and b/docs/images/feature-v5/theme-color.png differ
diff --git a/docs/images/feature-v5/time-axis-2.png b/docs/images/feature-v5/time-axis-2.png
new file mode 100644
index 0000000..8bce19f
Binary files /dev/null and b/docs/images/feature-v5/time-axis-2.png differ
diff --git a/docs/images/feature-v5/time-axis.png b/docs/images/feature-v5/time-axis.png
new file mode 100644
index 0000000..00b7b00
Binary files /dev/null and b/docs/images/feature-v5/time-axis.png differ
diff --git a/docs/images/feature-v5/time-axis2.png b/docs/images/feature-v5/time-axis2.png
new file mode 100644
index 0000000..d89e441
Binary files /dev/null and b/docs/images/feature-v5/time-axis2.png differ
diff --git a/docs/images/feature-v5/timeline.png b/docs/images/feature-v5/timeline.png
new file mode 100644
index 0000000..e38150d
Binary files /dev/null and b/docs/images/feature-v5/timeline.png differ
diff --git a/docs/index.html b/docs/index.html
new file mode 100644
index 0000000..dcbd414
--- /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/1627116914/state.js"></script><script src="/echarts-handbook/_nuxt/954fda3.js" defer></script><script src="/echarts-handbook/_nuxt/js/5bbc04459a97c3582266.js" defer></script><script src="/echarts-handbook/_nuxt/js/4b6ba5ecc0c117490f4c.js" defer></script><script src="/echarts-handbook/_nuxt/js [...]
+ <script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
+ </body>
+</html>
diff --git a/docs/zh/index.html b/docs/zh/index.html
new file mode 100644
index 0000000..c37b971
--- /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/1627116914/zh/state.js"></script><script src="/echarts-handbook/_nuxt/954fda3.js" defer></script><script src="/echarts-handbook/_nuxt/js/5bbc04459a97c3582266.js" defer></script><script src="/echarts-handbook/_nuxt/js/4b6ba5ecc0c117490f4c.js" defer></script><script src="/echarts-handbook/_nuxt [...]
+ <script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
+ </body>
+</html>
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org