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/10/19 04:47:33 UTC
[echarts-handbook] 01/01: Deploying to gh-pages from @ apache/echarts-handbook@49e16c7de4f4804c9ce0409f2719d3ed4e10032d 🚀
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 25de0742c9fb33df6597e7fa00073feb67bb73b2
Author: plainheart <yh...@all-my-life.cn>
AuthorDate: Tue Oct 19 04:47:05 2021 +0000
Deploying to gh-pages from @ apache/echarts-handbook@49e16c7de4f4804c9ce0409f2719d3ed4e10032d 🚀
---
docs/.nojekyll | 0
docs/200.html | 17 +
docs/README.md | 11 +
docs/_nuxt/LICENSES | 85 +++
docs/_nuxt/bb27107.js | 1 +
docs/_nuxt/css/1c37eb7.css | 1 +
docs/_nuxt/css/79036f1.css | 1 +
docs/_nuxt/css/d725484.css | 3 +
docs/_nuxt/css/d80653b.css | 1 +
docs/_nuxt/js/08435746bb3f8ba825bd.js | 2 +
docs/_nuxt/js/085ff989b504d0d92d78.js | 1 +
docs/_nuxt/js/08f2b6a6c1138d018d6f.js | 1 +
docs/_nuxt/js/095c79bda125cb04e097.js | 1 +
docs/_nuxt/js/0b3cdf54824fe834d9a9.js | 1 +
docs/_nuxt/js/0ef99a568f448c513d20.js | 1 +
docs/_nuxt/js/1315ac68ca7fd80b9e35.js | 1 +
docs/_nuxt/js/14cb3aa5104f37726269.js | 1 +
docs/_nuxt/js/15f09df001c4174615ba.js | 1 +
docs/_nuxt/js/176331c04836b8b84c4d.js | 1 +
docs/_nuxt/js/179f8bf7f4b4d044ec1f.js | 1 +
docs/_nuxt/js/1950fbb761bda94af687.js | 1 +
docs/_nuxt/js/1adf8710e2b91fe47be2.js | 1 +
docs/_nuxt/js/1d09f9fd1cffe7d4a317.js | 1 +
docs/_nuxt/js/1f920b728680adf1bc5d.js | 1 +
docs/_nuxt/js/219c77c9f002a9ce870b.js | 1 +
docs/_nuxt/js/221b6d3b4153b0b64b3d.js | 1 +
docs/_nuxt/js/236e22a239457041090b.js | 1 +
docs/_nuxt/js/2c7fc8019255365a4a71.js | 1 +
docs/_nuxt/js/2ca968bfd7bafb97f3d0.js | 1 +
docs/_nuxt/js/2eadf6c16f489156b5d7.js | 1 +
docs/_nuxt/js/317868f85a2f179fda34.js | 1 +
docs/_nuxt/js/34f43fefbe1d937d09c2.js | 1 +
docs/_nuxt/js/363599daff079b21cb90.js | 1 +
docs/_nuxt/js/38e7d89f4d102c348ab7.js | 1 +
docs/_nuxt/js/3b661750e41eb989e6b8.js | 1 +
docs/_nuxt/js/4207fd6502bce2fe0e71.js | 1 +
docs/_nuxt/js/43f8eb763f73f4ab9018.js | 1 +
docs/_nuxt/js/4726cacd35f432090085.js | 1 +
docs/_nuxt/js/487a63005f08ce1c1b9d.js | 1 +
docs/_nuxt/js/4b842183a23f54b7ffc5.js | 1 +
docs/_nuxt/js/4c8c42c0a69f8cae5a98.js | 1 +
docs/_nuxt/js/4d2b887abddeac30cd76.js | 1 +
docs/_nuxt/js/4d9298a62789643a332e.js | 1 +
docs/_nuxt/js/4d99f73482ece951d69c.js | 1 +
docs/_nuxt/js/51b2fea076d43f1ffabc.js | 1 +
docs/_nuxt/js/544b49a4b95f35a33c32.js | 1 +
docs/_nuxt/js/564adab584e3a1dea6b1.js | 1 +
docs/_nuxt/js/56779b093f84cf5b218f.js | 1 +
docs/_nuxt/js/56d1035feffff39d160f.js | 1 +
docs/_nuxt/js/57cc43b2b4830ed4c7a8.js | 1 +
docs/_nuxt/js/5c4e4f54aa7e6b7c452c.js | 1 +
docs/_nuxt/js/5cbbc9b2bbce87ff971a.js | 1 +
docs/_nuxt/js/5e04b39a60ff021dedc7.js | 1 +
docs/_nuxt/js/5f283182c4cfa82d45fb.js | 1 +
docs/_nuxt/js/5f8f3adf196ff450b27d.js | 1 +
docs/_nuxt/js/60ea121fe6d12e50e71b.js | 1 +
docs/_nuxt/js/62e9e94f51fcadb8c5fe.js | 1 +
docs/_nuxt/js/65f2e52c78e92f9b19e0.js | 1 +
docs/_nuxt/js/67177488d4625997eff6.js | 1 +
docs/_nuxt/js/673c4ed3b97a04b343be.js | 1 +
docs/_nuxt/js/6aac60f585a306304a63.js | 1 +
docs/_nuxt/js/7081069603a1429170da.js | 1 +
docs/_nuxt/js/70b7bb2a8acc87ac395f.js | 1 +
docs/_nuxt/js/70d817cd00d197aa7288.js | 1 +
docs/_nuxt/js/7294835b13291a6e4aec.js | 1 +
docs/_nuxt/js/72d0593e53b8a5dc1e2b.js | 1 +
docs/_nuxt/js/75b629822f727a79f6b7.js | 1 +
docs/_nuxt/js/76453ddd9d5c1dc04efb.js | 1 +
docs/_nuxt/js/786d4c826164981c3345.js | 1 +
docs/_nuxt/js/78d7524e4634a619f1ec.js | 1 +
docs/_nuxt/js/7a8b45c270f4eb8a4221.js | 1 +
docs/_nuxt/js/7be2520855c4af391f2b.js | 1 +
docs/_nuxt/js/7bf91108c3f87e83badf.js | 1 +
docs/_nuxt/js/7c55caf9c0b887f6f923.js | 1 +
docs/_nuxt/js/7d570de6e66a34236198.js | 1 +
docs/_nuxt/js/7e66f93f0999fe6c1337.js | 1 +
docs/_nuxt/js/7f30910e5d88b8f89d8a.js | 1 +
docs/_nuxt/js/811af0140715cd166af1.js | 1 +
docs/_nuxt/js/81e776c79b39e6174c44.js | 1 +
docs/_nuxt/js/87176580e664767aac13.js | 1 +
docs/_nuxt/js/87ee27d0dbb3329810d7.js | 1 +
docs/_nuxt/js/8f32e40e824ab935439d.js | 1 +
docs/_nuxt/js/8f75656ffe38b958df70.js | 1 +
docs/_nuxt/js/90d8c259403cc2b28bed.js | 1 +
docs/_nuxt/js/921d7bcd80bc1b6261e0.js | 1 +
docs/_nuxt/js/924bdf422a65bffeadbe.js | 1 +
docs/_nuxt/js/9a290f3a651e16ccacf0.js | 1 +
docs/_nuxt/js/9d9dec90be1f0f41b2d2.js | 1 +
docs/_nuxt/js/9efce8a5c7f638f28225.js | 1 +
docs/_nuxt/js/9fccc9e4ae291b0d6e44.js | 1 +
docs/_nuxt/js/a0d901b415da8e86775e.js | 2 +
docs/_nuxt/js/a5db32c5ac1f20389636.js | 1 +
docs/_nuxt/js/a6fddc27f11596c149f1.js | 1 +
docs/_nuxt/js/a82ec7151a8524a7410d.js | 1 +
docs/_nuxt/js/a8538eba3f241a324560.js | 2 +
docs/_nuxt/js/ab18b1df75a56aaf65f9.js | 1 +
docs/_nuxt/js/adff98946848424af6be.js | 1 +
docs/_nuxt/js/af5a647409dafc200aa2.js | 1 +
docs/_nuxt/js/b126c4d13efda3a500eb.js | 1 +
docs/_nuxt/js/b317cfa684d7d117b776.js | 1 +
docs/_nuxt/js/b66855952f3a4278ff26.js | 1 +
docs/_nuxt/js/b88e11700f3f21434e5c.js | 1 +
docs/_nuxt/js/baee98106e7990307f27.js | 1 +
docs/_nuxt/js/bdd7734f062fbd20c13c.js | 1 +
docs/_nuxt/js/c0208ae5582dd60676f2.js | 1 +
docs/_nuxt/js/c1b8dd303f98eed9f546.js | 1 +
docs/_nuxt/js/c45726f40449696b44e1.js | 1 +
docs/_nuxt/js/c5d4e63cc1137cb65a2a.js | 1 +
docs/_nuxt/js/c86858accdc63ea5924c.js | 1 +
docs/_nuxt/js/ca5a68e597339d9fe4ce.js | 1 +
docs/_nuxt/js/ca7b7a4ca6e695d6034f.js | 1 +
docs/_nuxt/js/cbe82648aedc4f9a120c.js | 1 +
docs/_nuxt/js/ce166bfe7d2bb2baf841.js | 1 +
docs/_nuxt/js/d07a3bda0c106bf5e048.js | 1 +
docs/_nuxt/js/d102d828969a4f67bd92.js | 1 +
docs/_nuxt/js/d1ecca7f648bd2acc4c9.js | 1 +
docs/_nuxt/js/d60af0f1d93626be040e.js | 1 +
docs/_nuxt/js/d8bb474fd0ab5b06b0dd.js | 1 +
docs/_nuxt/js/d98f238fcc283f222711.js | 1 +
docs/_nuxt/js/d9ae1847003efbc40617.js | 1 +
docs/_nuxt/js/db0e35482386339f1402.js | 1 +
docs/_nuxt/js/ddea68ea12171940b47d.js | 1 +
docs/_nuxt/js/e07cf56d4536a8ea6683.js | 1 +
docs/_nuxt/js/eba07e8d9f5c5213982f.js | 1 +
docs/_nuxt/js/ec312af66d0bf5a5805d.js | 1 +
docs/_nuxt/js/ecd372711c508a2f7d89.js | 1 +
docs/_nuxt/js/ef74990218d38720625c.js | 1 +
docs/_nuxt/js/f07f18c8fd0d20152f05.js | 1 +
docs/_nuxt/js/f26ae8b1ac0f1f34e047.js | 1 +
docs/_nuxt/js/f79944fc11900e6499b3.js | 1 +
docs/_nuxt/js/f7a078db5c96656ebd36.js | 1 +
docs/_nuxt/js/f9d64c1e62249634040b.js | 1 +
docs/_nuxt/js/fc3e1f080456fb1efd45.js | 1 +
docs/_nuxt/js/fe78798ce71de8c07853.js | 1 +
docs/_nuxt/js/ff31f4f10ce2c0d5f0a3.js | 1 +
docs/_nuxt/js/ff7fc48fdeb7a3abf378.js | 1 +
docs/en/basics/download/index.html | 17 +
docs/en/basics/help/index.html | 17 +
docs/en/basics/import/index.html | 121 ++++
docs/en/basics/inspiration/index.html | 17 +
docs/en/basics/release-note/5-2-0/index.html | 606 ++++++++++++++++++
docs/en/basics/release-note/v5-feature/index.html | 21 +
.../release-note/v5-upgrade-guide/index.html | 90 +++
docs/en/best-practices/aria/index.html | 39 ++
docs/en/best-practices/canvas-vs-svg/index.html | 28 +
docs/en/concepts/axis/index.html | 290 +++++++++
docs/en/concepts/chart-size/index.html | 45 ++
docs/en/concepts/data-transform/index.html | 614 ++++++++++++++++++
docs/en/concepts/dataset/index.html | 485 +++++++++++++++
docs/en/concepts/event/index.html | 325 ++++++++++
docs/en/concepts/legend/index.html | 128 ++++
docs/en/concepts/style/index.html | 456 ++++++++++++++
docs/en/concepts/visual-map/index.html | 83 +++
docs/en/get-started/index.html | 68 ++
docs/en/how-to/chart-types/bar/bar-race/index.html | 129 ++++
.../en/how-to/chart-types/bar/basic-bar/index.html | 200 ++++++
.../how-to/chart-types/bar/stacked-bar/index.html | 51 ++
.../en/how-to/chart-types/bar/waterfall/index.html | 179 ++++++
.../how-to/chart-types/line/area-line/index.html | 57 ++
.../how-to/chart-types/line/basic-line/index.html | 165 +++++
.../how-to/chart-types/line/smooth-line/index.html | 41 ++
.../chart-types/line/stacked-line/index.html | 89 +++
.../how-to/chart-types/line/step-line/index.html | 75 +++
.../en/how-to/chart-types/pie/basic-pie/index.html | 177 ++++++
docs/en/how-to/chart-types/pie/doughnut/index.html | 143 +++++
docs/en/how-to/chart-types/pie/rose/index.html | 75 +++
.../chart-types/scatter/basic-scatter/index.html | 128 ++++
docs/en/how-to/cross-platform/server/index.html | 17 +
docs/en/how-to/data/dynamic-data/index.html | 85 +++
docs/en/how-to/interaction/drag/index.html | 221 +++++++
docs/en/how-to/label/rich-text/index.html | 683 ++++++++++++++++++++
docs/en/index.html | 17 +
docs/en/meta/edit-guide/index.html | 157 +++++
docs/favicon.ico | Bin 0 -> 1393 bytes
docs/images/5-2-0/group-transition-2.gif | Bin 0 -> 1821177 bytes
docs/images/5-2-0/group-transition.gif | Bin 0 -> 1039853 bytes
docs/images/5-2-0/polar-bar-label.jpg | Bin 0 -> 131245 bytes
docs/images/5-2-0/universal-transition-2.gif | Bin 0 -> 1960797 bytes
docs/images/5-2-0/universal-transition-3.gif | Bin 0 -> 3802824 bytes
docs/images/5-2-0/universal-transition.gif | Bin 0 -> 2524435 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 | 17 +
docs/zh/basics/download/index.html | 17 +
docs/zh/basics/help/index.html | 17 +
docs/zh/basics/import/index.html | 120 ++++
docs/zh/basics/inspiration/index.html | 17 +
docs/zh/basics/release-note/5-2-0/index.html | 595 ++++++++++++++++++
docs/zh/basics/release-note/v5-feature/index.html | 21 +
.../release-note/v5-upgrade-guide/index.html | 90 +++
docs/zh/best-practices/aria/index.html | 39 ++
docs/zh/best-practices/canvas-vs-svg/index.html | 28 +
docs/zh/concepts/axis/index.html | 285 +++++++++
docs/zh/concepts/chart-size/index.html | 45 ++
docs/zh/concepts/data-transform/index.html | 600 ++++++++++++++++++
docs/zh/concepts/dataset/index.html | 504 +++++++++++++++
docs/zh/concepts/event/index.html | 337 ++++++++++
docs/zh/concepts/legend/index.html | 128 ++++
docs/zh/concepts/style/index.html | 460 ++++++++++++++
docs/zh/concepts/visual-map/index.html | 83 +++
docs/zh/get-started/index.html | 68 ++
docs/zh/how-to/chart-types/bar/bar-race/index.html | 123 ++++
.../zh/how-to/chart-types/bar/basic-bar/index.html | 207 +++++++
.../how-to/chart-types/bar/stacked-bar/index.html | 51 ++
.../zh/how-to/chart-types/bar/waterfall/index.html | 179 ++++++
.../how-to/chart-types/line/area-line/index.html | 57 ++
.../how-to/chart-types/line/basic-line/index.html | 165 +++++
.../how-to/chart-types/line/smooth-line/index.html | 41 ++
.../chart-types/line/stacked-line/index.html | 89 +++
.../how-to/chart-types/line/step-line/index.html | 73 +++
.../zh/how-to/chart-types/pie/basic-pie/index.html | 189 ++++++
docs/zh/how-to/chart-types/pie/doughnut/index.html | 143 +++++
docs/zh/how-to/chart-types/pie/rose/index.html | 75 +++
.../chart-types/scatter/basic-scatter/index.html | 128 ++++
docs/zh/how-to/cross-platform/baidu-app/index.html | 17 +
docs/zh/how-to/cross-platform/server/index.html | 17 +
.../zh/how-to/cross-platform/wechat-app/index.html | 17 +
docs/zh/how-to/data/dynamic-data/index.html | 85 +++
docs/zh/how-to/interaction/drag/index.html | 212 +++++++
docs/zh/how-to/label/rich-text/index.html | 690 +++++++++++++++++++++
docs/zh/index.html | 17 +
docs/zh/meta/edit-guide/index.html | 187 ++++++
270 files changed, 12622 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..d56fd88
--- /dev/null
+++ b/docs/200.html
@@ -0,0 +1,17 @@
+<!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">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="1" charset="utf-8"><meta data-n-head="1" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="1" data-hid="description" name="description" content="Apache ECharts Handbook"><link data-n-head="1" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><base href="/echarts-handbook/"><link rel="preload" href="/echarts-handbook/_nuxt/bb271 [...]
+ <link href="/echarts-handbook/_nuxt/css/d725484.css" rel="stylesheet"><link href="/echarts-handbook/_nuxt/css/d80653b.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%{vi [...]
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
+ <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 type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+ <script>var _hmt=_hmt||[];!function(){var e=document.createElement("script");e.src="https://hm.baidu.com/hm.js?54b918eee37cb8a7045f0fd0f0b24395";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)}()</script>
+ <script src="/echarts-handbook/_nuxt/bb27107.js"></script><script src="/echarts-handbook/_nuxt/js/a0d901b415da8e86775e.js"></script><script src="/echarts-handbook/_nuxt/js/08435746bb3f8ba825bd.js"></script><script src="/echarts-handbook/_nuxt/js/76453ddd9d5c1dc04efb.js"></script></body>
+</html>
diff --git a/docs/README.md b/docs/README.md
new file mode 100644
index 0000000..cf00435
--- /dev/null
+++ b/docs/README.md
@@ -0,0 +1,11 @@
+# STATIC
+
+**This directory is not required, you can delete it if you don't want to use it.**
+
+This directory contains your static files.
+Each file inside this directory is mapped to `/`.
+Thus you'd want to delete this README.md before deploying to production.
+
+Example: `/static/robots.txt` is mapped as `/robots.txt`.
+
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#static).
diff --git a/docs/_nuxt/LICENSES b/docs/_nuxt/LICENSES
new file mode 100644
index 0000000..78763c0
--- /dev/null
+++ b/docs/_nuxt/LICENSES
@@ -0,0 +1,85 @@
+/*!
+ * vue-client-only v2.0.0
+ * (c) 2019-present egoist <0x...@gmail.com>
+ * Released under the MIT License.
+ */
+
+/*!
+ * vue-i18n v8.24.4
+ * (c) 2021 kazuya kawaguchi
+ * Released under the MIT License.
+ */
+
+/*!
+ * vue-no-ssr v1.1.1
+ * (c) 2018-present egoist <0x...@gmail.com>
+ * Released under the MIT License.
+ */
+
+
+/*!
+ * vue-router v3.5.1
+ * (c) 2021 Evan You
+ * @license MIT
+ */
+
+/*!
+ * JavaScript Cookie v2.2.1
+ * https://github.com/js-cookie/js-cookie
+ *
+ * Copyright 2006, 2015 Klaus Hartl & Fagner Brack
+ * Released under the MIT license
+ */
+
+/*!
+ * Vue.js v2.6.12
+ * (c) 2014-2020 Evan You
+ * Released under the MIT License.
+ */
+
+/*!
+ * cookie
+ * Copyright(c) 2012-2014 Roman Shtylman
+ * Copyright(c) 2015 Douglas Christopher Wilson
+ * MIT Licensed
+ */
+
+/*!
+ * vuex v3.6.2
+ * (c) 2021 Evan You
+ * @license MIT
+ */
+
+
+/*!
+ * 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.
+***************************************************************************** */
+
+/*! https://mths.be/punycode v1.4.1 by @mathias */
+
+/**
+ * Prism: Lightweight, robust, elegant syntax highlighting
+ *
+ * @license MIT <https://opensource.org/licenses/MIT>
+ * @author Lea Verou <https://lea.verou.me>
+ * @namespace
+ * @public
+ */
diff --git a/docs/_nuxt/bb27107.js b/docs/_nuxt/bb27107.js
new file mode 100644
index 0000000..59f401b
--- /dev/null
+++ b/docs/_nuxt/bb27107.js
@@ -0,0 +1 @@
+!function(e){function f(data){for(var f,d,t=data[0],o=data[1],l=data[2],i=0,h=[];i<t.length;i++)d=t[i],Object.prototype.hasOwnProperty.call(r,d)&&r[d]&&h.push(r[d][0]),r[d]=0;for(f in o)Object.prototype.hasOwnProperty.call(o,f)&&(e[f]=o[f]);for(m&&m(data);h.length;)h.shift()();return n.push.apply(n,l||[]),c()}function c(){for(var e,i=0;i<n.length;i++){for(var f=n[i],c=!0,d=1;d<f.length;d++){var t=f[d];0!==r[t]&&(c=!1)}c&&(n.splice(i--,1),e=o(o.s=f[0]))}return e}var d={},t={4:0},r={4:0},n [...]
\ 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/79036f1.css b/docs/_nuxt/css/79036f1.css
new file mode 100644
index 0000000..5c824c4
--- /dev/null
+++ b/docs/_nuxt/css/79036f1.css
@@ -0,0 +1 @@
+.md-alert[data-v-a47f983e]{border-radius:.5rem;border-left-width:4px}.md-alert-info[data-v-a47f983e]{--tw-bg-opacity:1;background-color:rgba(219,234,254,var(--tw-bg-opacity));--tw-border-opacity:1;border-color:rgba(96,165,250,var(--tw-border-opacity))}.md-alert-info code[data-v-a47f983e]{--tw-bg-opacity:1;background-color:rgba(191,219,254,var(--tw-bg-opacity));border-width:0;--tw-shadow:0 0 transparent;box-shadow:var(--tw-ring-offset-shadow,0 0 transparent),var(--tw-ring-shadow,0 0 trans [...]
\ No newline at end of file
diff --git a/docs/_nuxt/css/d725484.css b/docs/_nuxt/css/d725484.css
new file mode 100644
index 0000000..d22c096
--- /dev/null
+++ b/docs/_nuxt/css/d725484.css
@@ -0,0 +1,3 @@
+/*! 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/d80653b.css b/docs/_nuxt/css/d80653b.css
new file mode 100644
index 0000000..ffca5e7
--- /dev/null
+++ b/docs/_nuxt/css/d80653b.css
@@ -0,0 +1 @@
+.__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 [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/08435746bb3f8ba825bd.js b/docs/_nuxt/js/08435746bb3f8ba825bd.js
new file mode 100644
index 0000000..a7c4fdd
--- /dev/null
+++ b/docs/_nuxt/js/08435746bb3f8ba825bd.js
@@ -0,0 +1,2 @@
+/*! For license information please see ../LICENSES */
+(window.webpackJsonp=window.webpackJsonp||[]).push([[5],{101:function(t,e,n){"use strict";var r=["compactDisplay","currency","currencyDisplay","currencySign","localeMatcher","notation","numberingSystem","signDisplay","style","unit","unitDisplay","useGrouping","minimumIntegerDigits","minimumFractionDigits","maximumFractionDigits","minimumSignificantDigits","maximumSignificantDigits"];function o(t,e){"undefined"!=typeof console&&(console.warn("[vue-i18n] "+t),e&&console.warn(e.stack))}var [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/085ff989b504d0d92d78.js b/docs/_nuxt/js/085ff989b504d0d92d78.js
new file mode 100644
index 0000000..d6e0e64
--- /dev/null
+++ b/docs/_nuxt/js/085ff989b504d0d92d78.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[54],{348:function(e,n,t){"use strict";t.r(n),n.default="# Step Line Chart\n\nThe normal line chart connects two points by straight line directly, while the step line chart, also known as square wave chart, uses only horizontal and vertical lines to connect the nearby items together. Compared with the normal line chart, the step line chart significantly shows the sudden changes of analyzed data.\n\nIn ECharts, `step` is used to characte [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/08f2b6a6c1138d018d6f.js b/docs/_nuxt/js/08f2b6a6c1138d018d6f.js
new file mode 100644
index 0000000..2c15f33
--- /dev/null
+++ b/docs/_nuxt/js/08f2b6a6c1138d018d6f.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[10],{304:function(n,e,t){"use strict";t.r(e),e.default="# Use Apache ECharts with bundler and NPM\n\nIf your development environment uses a package management tool like `npm` or `yarn` 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.\n\n## Install ECharts via NPM\n\nYou can install ECharts via npm using the following command\n\n```shell [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/095c79bda125cb04e097.js b/docs/_nuxt/js/095c79bda125cb04e097.js
new file mode 100644
index 0000000..624c7e3
--- /dev/null
+++ b/docs/_nuxt/js/095c79bda125cb04e097.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[21],{315:function(e,t,r){"use strict";r.r(t),t.default='# Grouped Bar Chart\n\nA grouped bar chart is also called the gathered bar chart. When more than two data series placed one by one on the same axis, the chart will be grouped bar chart. It is equivalent to a basic bar chart combined with two or more charts.\n\n<iframe max-width="830" width="100%" height="400" \nsrc="https://gallery.echartsjs.com/view-lite.html?cid=xr13FAH54f&v=1"> [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/0b3cdf54824fe834d9a9.js b/docs/_nuxt/js/0b3cdf54824fe834d9a9.js
new file mode 100644
index 0000000..fd3f2f9
--- /dev/null
+++ b/docs/_nuxt/js/0b3cdf54824fe834d9a9.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[16],{310:function(e,n,r){"use strict";r.r(n),n.default="# Render with SVG or Canvas\n\nMost 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.\n\nCanvas has been used as the renderer (VML for IE8-) of ECharts from the beginning. [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/0ef99a568f448c513d20.js b/docs/_nuxt/js/0ef99a568f448c513d20.js
new file mode 100644
index 0000000..54bf05d
--- /dev/null
+++ b/docs/_nuxt/js/0ef99a568f448c513d20.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[44],{338:function(t,e,n){"use strict";n.r(e),e.default="# Get Started\n\n## Getting Apache ECharts\n\nApache ECharts supports several download methods, which are further explained in the next tutorial [Installation](${lang}/basics/download). Here, we take the example of getting it from the [jsDelivr](https://www.jsdelivr.com/package/npm/echarts) CDN and explain how to install it quickly.\n\nAt [https://www.jsdelivr.com/package/npm/echa [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/1315ac68ca7fd80b9e35.js b/docs/_nuxt/js/1315ac68ca7fd80b9e35.js
new file mode 100644
index 0000000..86e4b69
--- /dev/null
+++ b/docs/_nuxt/js/1315ac68ca7fd80b9e35.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[119],{413:function(t,h,e){"use strict";e.r(h),h.default="# ECharts 服务端渲染\n\nECharts 可以在服务端进行渲染。例如[官方示例](${mainSitePath}/examples)里的一个个小截图，就是在服务端预生成出来的。\n\n服务端渲染可以使用流行的 headless 环境，例如 [puppeteer](https://github.com/GoogleChrome/puppeteer)、[headless chrome](https://chromium.googlesource.com/chromium/src/+/lkgr/headless/README.md)、[node-canvas](https://github.com/Automattic/node-canvas)、[jsdom](https://github.com/jsdom/jsdom)、[PhantomJS]( [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/14cb3aa5104f37726269.js b/docs/_nuxt/js/14cb3aa5104f37726269.js
new file mode 100644
index 0000000..1e4504d
--- /dev/null
+++ b/docs/_nuxt/js/14cb3aa5104f37726269.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[29],{323:function(e,t,r){"use strict";r.r(t),t.default='# Radar Chart\n\nRadar Chart is suitable for display the data with more than three dimensions. The radar chart has more than two axes starting from the same point. The relative position and angle of the axis are usually meaningless. \n\nEvery variable in the radar chart match one axis that starting from the center. Axes have the same scale index and included angle. Connect the sca [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/15f09df001c4174615ba.js b/docs/_nuxt/js/15f09df001c4174615ba.js
new file mode 100644
index 0000000..2c917e7
--- /dev/null
+++ b/docs/_nuxt/js/15f09df001c4174615ba.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[56],{350:function(e,n,t){"use strict";t.r(n),n.default="# Doughnut Chart\n\nDoughnut charts are also used to show the proportion of values compared with the total. Different from the pie chart, the blank in the middle of the chart can be used to provide some extra info. It makes a doughnut chart commonly used chart type.\n\n## Basic Doughnut Chart\n\nIn ECharts, the radius of the pie chart could also be an array with 2 elements. Every [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/176331c04836b8b84c4d.js b/docs/_nuxt/js/176331c04836b8b84c4d.js
new file mode 100644
index 0000000..2047da0
--- /dev/null
+++ b/docs/_nuxt/js/176331c04836b8b84c4d.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[71],{365:function(e,n,t){"use strict";t.r(n),n.default="# Apache ECharts 5 升级指南\n\n本指南面向那些希望将 echarts 4.x（以下简称 `v4`）升级到 echarts 5.x（以下简称 `v5`）的用户。大家可以在 [ECharts 5 新特性](${lang}/basics/release-note/v5-feature) 中了解这次`v5`带来了哪些值得升级的新特性。在绝大多数情况下，开发者用不着为这个升级做什么额外的事，因为 echarts 一直尽可能地保持 API 的稳定和向后兼容。但是，`v5` 仍然带来了一些非兼容改动，需要特别关注。此外，在一些情况下，`v5` 提供了更好的 API 用来取代之前的 API，这些被取代的 API 将不再被推荐使用（当然，我们尽量兼容了这些改动）。我们会在这篇文档里尽量详尽得解释这些改动。\n\n## 非兼容性改变\n\n### 默认主 [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/179f8bf7f4b4d044ec1f.js b/docs/_nuxt/js/179f8bf7f4b4d044ec1f.js
new file mode 100644
index 0000000..6fb7b44
--- /dev/null
+++ b/docs/_nuxt/js/179f8bf7f4b4d044ec1f.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[110],{404:function(n,t,e){"use strict";e.r(t),t.default="# 平滑曲线图\n\n平滑曲线图也是折线图的一种变形，这种更柔和的样式也是一种不错的视觉选择。使用时，只需要将折线图系列的 `smooth` 属性设置为 `true` 即可。\n\n```js live\noption = {\n xAxis: {\n data: ['A', 'B', 'C', 'D', 'E']\n },\n yAxis: {},\n series: [\n {\n data: [10, 22, 28, 23, 19],\n type: 'line',\n smooth: true\n }\n ]\n};\n```\n"}}]);
\ No newline at end of file
diff --git a/docs/_nuxt/js/1950fbb761bda94af687.js b/docs/_nuxt/js/1950fbb761bda94af687.js
new file mode 100644
index 0000000..74c6da1
--- /dev/null
+++ b/docs/_nuxt/js/1950fbb761bda94af687.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[95],{389:function(n,e,t){"use strict";t.r(e),e.default="# 事件与行为\n\n在 Apache ECharts 的图表中用户的操作将会触发相应的事件。开发者可以监听这些事件，然后通过回调函数做相应的处理，比如跳转到一个地址，或者弹出对话框，或者做数据下钻等等。\n\nECharts 中的事件名称对应 DOM 事件名称，均为小写的字符串，如下是一个绑定点击操作的示例。\n\n```js\nmyChart.on('click', function(params) {\n // 控制台打印数据的名称\n console.log(params.name);\n});\n```\n\n在 ECharts 中事件分为两种类型，一种是用户鼠标操作点击，或者 hover 图表的图形时触发的事件，还有一种是用户在使用可以交互的组件后触发的行为事件，例如在切换图例开关时触发的 ['legendselectchanged']($ [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/1adf8710e2b91fe47be2.js b/docs/_nuxt/js/1adf8710e2b91fe47be2.js
new file mode 100644
index 0000000..84e64d7
--- /dev/null
+++ b/docs/_nuxt/js/1adf8710e2b91fe47be2.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[79],{373:function(n,t,e){"use strict";e.r(t),t.default='# 分组柱状图\n\n分组柱状图也被称为聚集柱状图。当两个或多个数据序列并排显示并在同一轴上的类别下分组时，将使用分组柱状图。相当于包含带有两个或更多图表的简单的条形图。\n\n<iframe max-width="830" width="100%" height="400"\nsrc="https://gallery.echartsjs.com/view-lite.html?cid=xr13FAH54f&v=1">\n</iframe>\n\n分组柱状图通常是用于将包含相同变量或类别的几个分组进行比较。像柱状图一样，每个柱的长度用于显示类别的数值，每个数据系列被分配一个单独的颜色或相同色系的不同饱和度，以区分它们，每组数据之间相互间隔并进行对比。\n\n<iframe max-width="830" width="100%" height="400"\n [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/1d09f9fd1cffe7d4a317.js b/docs/_nuxt/js/1d09f9fd1cffe7d4a317.js
new file mode 100644
index 0000000..da0b671
--- /dev/null
+++ b/docs/_nuxt/js/1d09f9fd1cffe7d4a317.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[106],{400:function(n,t,c){"use strict";c.r(t),t.default="# 堆叠柱状图\n\n有时候，我们不仅希望知道不同系列各自的数值，还希望知道它们之和的变化，这时候通常使用堆积柱状图图来表现。顾名思义，堆积柱状图就是一个系列的数值“堆积”在另一个系列上，因而从他们的高度总和就能表达总量的变化。\n\n使用 EChart 实现堆积折线图的方法非常简单，只需要给一个系列的 `stack` 值设置一个字符串类型的值，这一个值表示该系列堆积的类别。也就是说，拥有同样 `stack` 值的系列将堆积在一组。\n\n```js live\noption = {\n xAxis: {\n data: ['A', 'B', 'C', 'D', 'E']\n },\n yAxis: {},\n series: [\n {\n data: [10, 22, 28, 43, 49],\n type: [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/1f920b728680adf1bc5d.js b/docs/_nuxt/js/1f920b728680adf1bc5d.js
new file mode 100644
index 0000000..f16cd03
--- /dev/null
+++ b/docs/_nuxt/js/1f920b728680adf1bc5d.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[121],{415:function(n,w,o){"use strict";o.r(w),w.default=""}}]);
\ No newline at end of file
diff --git a/docs/_nuxt/js/219c77c9f002a9ce870b.js b/docs/_nuxt/js/219c77c9f002a9ce870b.js
new file mode 100644
index 0000000..5b9a7cd
--- /dev/null
+++ b/docs/_nuxt/js/219c77c9f002a9ce870b.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[22],{316:function(e,t,r){"use strict";r.r(t),t.default='# Stacked Bar Chart\n\nThe stacked bar chart is an extension of the bar chart. The difference is that the data in the bar chart is placed parallel while stacked together in the stacked bar chart. You can use a stacked bar chart to reflect the total amount of each category, as well as the proportional relationship of each data compared with the category. Therefore, it is very suita [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/221b6d3b4153b0b64b3d.js b/docs/_nuxt/js/221b6d3b4153b0b64b3d.js
new file mode 100644
index 0000000..7283c04
--- /dev/null
+++ b/docs/_nuxt/js/221b6d3b4153b0b64b3d.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[111],{405:function(n,t,e){"use strict";e.r(t),t.default="# 堆叠折线图\n\n与[堆叠柱状图](./zh/application/chart-types/bar/stacked-bar)类似，堆叠折线图也是用系列的 `stack` 设置哪些系列堆叠在一起。\n\n```js live\noption = {\n xAxis: {\n data: ['A', 'B', 'C', 'D', 'E']\n },\n yAxis: {},\n series: [\n {\n data: [10, 22, 28, 43, 49],\n type: 'line',\n stack: 'x'\n },\n {\n data: [5, 4, 3, 5, 10],\n type: 'line',\n stack: 'x'\n }\ [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/236e22a239457041090b.js b/docs/_nuxt/js/236e22a239457041090b.js
new file mode 100644
index 0000000..1a9a007
--- /dev/null
+++ b/docs/_nuxt/js/236e22a239457041090b.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[73],{367:function(n,e,t){"use strict";t.r(e),e.default="# 无障碍访问\n\nW3C 制定了无障碍富互联网应用规范集（[WAI-ARIA](https://www.w3.org/WAI/intro/aria)，the Accessible Rich Internet Applications Suite），致力于使得网页内容和网页应用能够被更多残障人士访问。\n\nApache ECharts 4 遵从这一规范，支持自动根据图表配置项智能生成描述，使得盲人可以在朗读设备的帮助下了解图表内容，让图表可以被更多人群访问。Apache ECharts 5 新增了贴花功能，让图表数据除了可以用颜色区分之外，还能用贴花图案区分，提供了更好的无障碍访问体验。\n\n无障碍访问功能默认关闭，需要通过将 [aria.show](${optionPath}aria.show) 设置为 `true` 开启。\n\n## 图表描述\ [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/2c7fc8019255365a4a71.js b/docs/_nuxt/js/2c7fc8019255365a4a71.js
new file mode 100644
index 0000000..ae9924c
--- /dev/null
+++ b/docs/_nuxt/js/2c7fc8019255365a4a71.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[86],{380:function(n,e,t){"use strict";t.r(e),e.default='# 饼图\n\n饼图主要用于展现不同类别数值相对于总数的占比情况。图中每个分块（扇区）的弧长表示该类别的占比大小，所有分块数据总和为 100%。\n\n<iframe max-width="830" width="100%" height="400"\nsrc="https://gallery.echartsjs.com/view-lite.html?cid=xHySlBkIEM&v=1">\n</iframe>\n\n虽然饼图能快速有效地展示数据的比例分布，并被广泛用于各个领域，但是饼图及其变形图表一直是比较受争议的图表。因此，我们在使用饼图及其变形图表时一定要谨慎并避免走进误区。\n\n## 饼图的使用建议\n\n1、饼图适合用来展示单一维度数据的占比，要求其数值中没有零或负值，并确保各分块占比总和为 100%。\n\n2、我们很难比较一个分块过多的饼 [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/2ca968bfd7bafb97f3d0.js b/docs/_nuxt/js/2ca968bfd7bafb97f3d0.js
new file mode 100644
index 0000000..d201f69
--- /dev/null
+++ b/docs/_nuxt/js/2ca968bfd7bafb97f3d0.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[53],{347:function(n,e,t){"use strict";t.r(e),e.default="# Stacked Line Chart\n\nSimilar to the [Stacked Bar Chart](${lang}/application/chart-types/bar/stacked-bar), Stacked Line Chart use the `'stack'` in `series` to decide which series should be stacked together.\n\n```js live\noption = {\n xAxis: {\n data: ['A', 'B', 'C', 'D', 'E']\n },\n yAxis: {},\n series: [\n {\n data: [10, 22, 28, 43, 49],\n type: 'line',\n [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/2eadf6c16f489156b5d7.js b/docs/_nuxt/js/2eadf6c16f489156b5d7.js
new file mode 100644
index 0000000..2c1546e
--- /dev/null
+++ b/docs/_nuxt/js/2eadf6c16f489156b5d7.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[80],{374:function(n,t,e){"use strict";e.r(t),t.default='# 堆叠柱状图\n\n堆叠柱状图是柱状图的扩展。但区别在于，柱状图的数据值为并行排列，堆叠柱图则是一个个叠加起来的。它可以展示每一个分类的总量，以及该分类包含的每个小分类的大小及占比。因此，非常适合处理部分与整体的关系。\n\n与饼图显示单个部分到整体的关系不同的是，堆叠柱状图可以显示多个部分到整体的关系。例如一个班级体育课选课的各项目人数统计，你可以用柱状图或饼图来展示。但是，当需要进一步区分男生和女生参与到不同项目中的人数分别是多少时，就需要把每个项目中包含的男生数和女生数都展示出来。如图选用堆叠柱状图，不仅能显示每个项目的总人数，还能展示出每个项目中的一部分与整体的关系。\n\n<iframe max-width="830" widt
h="100%" height="400"\n src="https://gallery.echartsjs.com/ [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/317868f85a2f179fda34.js b/docs/_nuxt/js/317868f85a2f179fda34.js
new file mode 100644
index 0000000..e5e71d0
--- /dev/null
+++ b/docs/_nuxt/js/317868f85a2f179fda34.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[40],{334:function(n,w,o){"use strict";o.r(w),w.default=""}}]);
\ No newline at end of file
diff --git a/docs/_nuxt/js/34f43fefbe1d937d09c2.js b/docs/_nuxt/js/34f43fefbe1d937d09c2.js
new file mode 100644
index 0000000..200b14c
--- /dev/null
+++ b/docs/_nuxt/js/34f43fefbe1d937d09c2.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[52],{346:function(n,e,t){"use strict";t.r(e),e.default="# Smooth Line Chart\n\nThe smooth line chart is also a variant of the basic line graph. It is a better choice for you to perform a comfort visual experience. While using the ECharts, you only need to change the `smooth` to `true` to achieve this effect.\n\n```js live\noption = {\n xAxis: {\n data: ['A', 'B', 'C', 'D', 'E']\n },\n yAxis: {},\n series: [\n {\n data: [ [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/363599daff079b21cb90.js b/docs/_nuxt/js/363599daff079b21cb90.js
new file mode 100644
index 0000000..9703914
--- /dev/null
+++ b/docs/_nuxt/js/363599daff079b21cb90.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[107],{401:function(n,t,e){"use strict";e.r(t),t.default="# 阶梯瀑布图\n\nApache ECharts 中并没有单独的瀑布图类型，但是我们可以使用堆叠的柱状图模拟该效果。\n\n假设数据数组中的值是表示对前一个值的增减：\n\n```js\nvar data = [900, 345, 393, -108, -154, 135, 178, 286, -119, -361, -203];\n```\n\n也就是第一个数据是 `900`，第二个数据 `345` 表示的是在 `900` 的基础上增加了 `345`……将这个数据展示为阶梯瀑布图时，我们可以使用三个系列：第一个是不可交互的透明系列，用来实现“悬空”的柱状图效果；第二个系列用来表示正数；第二个系列用来表示负数。\n\n```js live\nvar data = [900, 345, 393, -108, -154, 135, 178, 286, -1 [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/38e7d89f4d102c348ab7.js b/docs/_nuxt/js/38e7d89f4d102c348ab7.js
new file mode 100644
index 0000000..fb267b0
--- /dev/null
+++ b/docs/_nuxt/js/38e7d89f4d102c348ab7.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[68],{362:function(n,e,t){"use strict";t.r(e),e.default="# 获取灵感\n\n当你有“不知道图表应该设计成什么样”或者“不知道如何使用 ECharts 实现某种效果”的疑问的时候，以下列表可以提供一些思路。\n\n- [ECharts 官方实例](${mainSitePath}/examples)\n- 本手册的“应用篇 - 常用图表类型”\n- [makeapie.com](https://www.makeapie.com/) 社区用户的作品集\n"}}]);
\ No newline at end of file
diff --git a/docs/_nuxt/js/3b661750e41eb989e6b8.js b/docs/_nuxt/js/3b661750e41eb989e6b8.js
new file mode 100644
index 0000000..a7d091e
--- /dev/null
+++ b/docs/_nuxt/js/3b661750e41eb989e6b8.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[38],{332:function(n,e,t){"use strict";t.r(e),e.default="# Legend\n\nLegends 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.\n\n## Layout\n\nLegend is always placed at the upper right corner of the chart. All legends in the same page ne [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/4207fd6502bce2fe0e71.js b/docs/_nuxt/js/4207fd6502bce2fe0e71.js
new file mode 100644
index 0000000..0b72177
--- /dev/null
+++ b/docs/_nuxt/js/4207fd6502bce2fe0e71.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[70],{364:function(n,e,t){"use strict";t.r(e),e.default='# Apache ECharts 5 新特性\n\n数据可视化在过去的几年中得到了长足的发展。开发者对于可视化产品的期待不再是简单的图表创建工具，而在交互、性能、数据处理等方面有了更高级的需求。\n\nApache ECharts 始终致力于让开发者以更方便的方式创造灵活丰富的可视化作品。在最新推出的 Apache ECharts 5，我们着力加强了图表的叙事能力，让开发者可以以更简单的方式，讲述数据背后的故事。\n\n<img data-src="images/feature-v5/echarts-5.png" width="800px" />\n\n“表·达”是 Apache ECharts 5 的核心，通过五大模块、十五项特性的全面升级，围绕可视化作品的叙事表达能力，让图“表”更能传“达”数据背后的故事，帮助开发者更轻松地创造满足各种场景需求的可视化 [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/43f8eb763f73f4ab9018.js b/docs/_nuxt/js/43f8eb763f73f4ab9018.js
new file mode 100644
index 0000000..8b27185
--- /dev/null
+++ b/docs/_nuxt/js/43f8eb763f73f4ab9018.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[101],{395:function(n,e,t){"use strict";t.r(e),e.default="# 数据的视觉映射\n\n数据可视化是数据到视觉元素的映射过程（这个过程也可称为视觉编码，视觉元素也可称为视觉通道）。\n\nECharts 的每种图表本身就内置了这种映射过程，比如折线图把数据映射到“线”，柱状图把数据映射到“长度”。一些更复杂的图表，如关系图、事件河流图、树图也都会做出各自内置的映射。\n\n此外，ECharts 还提供了 [visualMap 组件](${optionPath}visualMap) 来提供通用的视觉映射。`visualMap` 组件中可以使用的视觉元素有：\n\n- 图形类别（symbol）、图形大小（symbolSize）\n- 颜色（color）、透明度（opacity）、颜色透明度（colorAlpha）、\n- 颜色明暗度（colorLightness）、颜色饱和度（colorSaturation）、色调（c [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/4726cacd35f432090085.js b/docs/_nuxt/js/4726cacd35f432090085.js
new file mode 100644
index 0000000..8fb8d76
--- /dev/null
+++ b/docs/_nuxt/js/4726cacd35f432090085.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[11],{305:function(e,o,n){"use strict";n.r(o),o.default='# Get Inspired\n\nThe 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".\n\n- [Apache ECharts Official Examples](${mainSitePath}/examples)\n- "How To Guides - Common Charts" in this handbook\n'}}]);
\ No newline at end of file
diff --git a/docs/_nuxt/js/487a63005f08ce1c1b9d.js b/docs/_nuxt/js/487a63005f08ce1c1b9d.js
new file mode 100644
index 0000000..8127118
--- /dev/null
+++ b/docs/_nuxt/js/487a63005f08ce1c1b9d.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[93],{387:function(n,e,t){"use strict";t.r(e),e.default="# 使用 transform 进行数据转换\n\nApache ECharts<sup>TM</sup> 5 开始支持了“数据转换”（ data transform ）功能。在 echarts 中，“数据转换” 这个词指的是，给定一个已有的“数据集”（[dataset](${optionPath}#dataset)）和一个“转换方法”（[transform](${optionPath}#dataset.transform)），echarts 能生成一个新的“数据集”，然后可以使用这个新的“数据集”绘制图表。这些工作都可以声明式地完成。\n\n抽象地来说，数据转换是这样一种公式：`outData = f(inputData)`。`f` 是转换方法，例如：`filter`、`sort`、`regression`、`boxplot`、`cluster`、`agg [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/4b842183a23f54b7ffc5.js b/docs/_nuxt/js/4b842183a23f54b7ffc5.js
new file mode 100644
index 0000000..2d6736e
--- /dev/null
+++ b/docs/_nuxt/js/4b842183a23f54b7ffc5.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[97],{391:function(n,w,o){"use strict";o.r(w),w.default=""}}]);
\ No newline at end of file
diff --git a/docs/_nuxt/js/4c8c42c0a69f8cae5a98.js b/docs/_nuxt/js/4c8c42c0a69f8cae5a98.js
new file mode 100644
index 0000000..b02ab37
--- /dev/null
+++ b/docs/_nuxt/js/4c8c42c0a69f8cae5a98.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[85],{379:function(n,t,e){"use strict";e.r(t),t.default='# 堆叠面积图\n\n堆积面积图是一种特殊的面积图，可以用来比较在一个区间内的多个变量。堆叠面积图和面积图的区别在于，堆叠面积图每个数据系列的起点都是基于前一个数据系列绘制的，也就是每度量一行就要填满行与行之间的区域。\n\n如果有多个数据系列，并想分析每个类别的部分到整体的关系，并展现部分量对于总量的贡献时，使用堆积面积图是非常合适的选择。例如下图显示某个销售员对总销售额的贡献。\n\n<iframe max-width="830" width="100%" height="400"\nsrc="https://gallery.echartsjs.com/view-lite.html?cid=xHySthj74z">\n</iframe>\n\n有两种不同的堆积面积图类型：\n\n- <b>传统的堆积面积图</b>：直接使用原始值堆叠，显示整个过程如何变 [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/4d2b887abddeac30cd76.js b/docs/_nuxt/js/4d2b887abddeac30cd76.js
new file mode 100644
index 0000000..2430b93
--- /dev/null
+++ b/docs/_nuxt/js/4d2b887abddeac30cd76.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[58],{352:function(e,n,t){"use strict";t.r(n),n.default="# Basic Scatter Chart\n\nScatter Chart, a frequently used chart type, was constructed with several \"points\". These points sometimes represent the position of the value in the coordinate system (cartesian coordinate system, geo coordinate system, etc.), sometimes the size and color of items can be mapped to the value, represent high-dimensional data.\n\n## Simple Example\n\nThe f [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/4d9298a62789643a332e.js b/docs/_nuxt/js/4d9298a62789643a332e.js
new file mode 100644
index 0000000..90ae815
--- /dev/null
+++ b/docs/_nuxt/js/4d9298a62789643a332e.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[26],{320:function(e,t,n){"use strict";n.r(t),t.default='# Basic Line Chart.\n\nThe line chart is basically used to show the phase trend over time. The line chart is pretty useful to display a continuous 2D dataset like the fluctuation in the number of website visitors or sales prices.\n\n<iframe max-width="830" width="100%" height="400"\nsrc="https://gallery.echartsjs.com/view-lite.html?cid=xB1kG1rLEG&v=1">\n</iframe>\n\nExcept for dis [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/4d99f73482ece951d69c.js b/docs/_nuxt/js/4d99f73482ece951d69c.js
new file mode 100644
index 0000000..387d1af
--- /dev/null
+++ b/docs/_nuxt/js/4d99f73482ece951d69c.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[69],{363:function(n,t,e){"use strict";e.r(t),t.default="# Apache ECharts 5.2.0 介绍\n\n## 全局过渡动画\n\n在 Apache ECharts 中我们一直把自然流畅的过渡动画作为一个重要特性。通过避免数据带来的突变，不仅仅可以改善视觉效果，更为表达数据的关联和演变提供了可能。因此，在 5.2.0 中，我们进一步将过渡动画从表现系列内部数据的变化，泛化到全局能力。接下来，我们会看到这种**全局过渡动画 Universal Transition**是如何为图表增加表现力和叙事能力的。\n\n在之前的版本中，过渡动画有一定的局限性：只能用于相同类型的图形的位置、尺寸、形状，而且只能作用在相同类型的系列上。比如，下面例子就是通过饼图中扇区形状的变化反映了数据分布的变化：\n\n```js live {layout: 'lr'}\nfunction makeRandomData() {\n [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/51b2fea076d43f1ffabc.js b/docs/_nuxt/js/51b2fea076d43f1ffabc.js
new file mode 100644
index 0000000..5b2e018
--- /dev/null
+++ b/docs/_nuxt/js/51b2fea076d43f1ffabc.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[72],{366:function(t,e,n){"use strict";n.r(e),e.default="# 资源列表\n\n## 官方\n\n- [API](${mainSitePath}api.html)\n- [配置项手册](${mainSitePath}option.html)\n- [官方实例](${mainSitePath}examples/zh/index.html)\n- [术语速查手册](${mainSitePath}cheat-sheet.html)\n\n## 社区\n\n- [MakeAPie](https://www.makeapie.com)：社区用户的作品集\n- [awesome-echarts](https://github.com/ecomfe/awesome-echarts)：各种 ECharts 相关的资源，包括 AngularJS、Vue 等框架的支持，Java、Python、R 等语言的 ECharts 版本，ECh [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/544b49a4b95f35a33c32.js b/docs/_nuxt/js/544b49a4b95f35a33c32.js
new file mode 100644
index 0000000..034663a
--- /dev/null
+++ b/docs/_nuxt/js/544b49a4b95f35a33c32.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[115],{409:function(n,e,o){"use strict";o.r(e),e.default="# 南丁格尔图（玫瑰图）\n\n南丁格尔图又称玫瑰图，通常用弧度相同但半径不同的扇形表示各个类目。\n\nECharts 可以通过将饼图的 [`series.roseType`](${optionPath}series-pie.roseType) 值设为 `'area'` 实现南丁格尔图，其他配置项和饼图是相同的。\n\n```js live\noption = {\n series: [\n {\n type: 'pie',\n data: [\n {\n value: 100,\n name: 'A'\n },\n {\n value: 200,\n name: 'B'\n },\n [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/564adab584e3a1dea6b1.js b/docs/_nuxt/js/564adab584e3a1dea6b1.js
new file mode 100644
index 0000000..52048c4
--- /dev/null
+++ b/docs/_nuxt/js/564adab584e3a1dea6b1.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[114],{408:function(n,e,l){"use strict";l.r(e),e.default="# 圆环图\n\n圆环图同样可以用来表示数据占总体的比例，相比于饼图，它中间空余的部分可以用来显示一些额外的文字等信息，因而也是一种常用的图表类型。\n\n## 基础圆环图\n\n在 ECharts 中，饼图的半径除了上一小节提到的，可以是一个数值或者字符串之外，还可以是一个包含两个元素的数组，每个元素可以为数值或字符串。当它是一个数组时，它的前一项表示内半径，后一项表示外半径，这样就形成了一个圆环图。\n\n从这个角度上来说，可以认为饼图是一个内半径为 0 的圆环图，也就是说，饼图是圆环图的特例。\n\n```js live\noption = {\n title: {\n text: '圆环图的例子',\n left: 'center',\n top: 'center'\n },\n series: [\n {\n [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/56779b093f84cf5b218f.js b/docs/_nuxt/js/56779b093f84cf5b218f.js
new file mode 100644
index 0000000..73e8ca6
--- /dev/null
+++ b/docs/_nuxt/js/56779b093f84cf5b218f.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[55],{349:function(e,n,t){"use strict";t.r(n),n.default="# Basic Pie Chart\n\nPie charts are mainly used to show the proportion of several categories compared with the total. The radians represent the proportion of each category.\n\n## Simple Example\n\nThe config of the pie chart is not completely the same as the line chart and bar chart. There is no need to configure the axis. The name and value of data need to be defined in the serie [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/56d1035feffff39d160f.js b/docs/_nuxt/js/56d1035feffff39d160f.js
new file mode 100644
index 0000000..586cd38
--- /dev/null
+++ b/docs/_nuxt/js/56d1035feffff39d160f.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[104],{398:function(n,e,t){"use strict";t.r(e),e.default="# 基本柱状图\n\n柱状图（或称条形图）是一种通过柱形的长度来表现数据大小的一种常用图表类型。\n\n设置柱状图的方式，是将 `series` 的 `type` 设为 `'bar'`。\n\n[[配置项手册]](${optionPath}series-bar)\n\n## 最简单的柱状图\n\n最简单的柱状图可以这样设置：\n\n```js live\noption = {\n xAxis: {\n data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']\n },\n yAxis: {},\n series: [\n {\n type: 'bar',\n data: [23, 24, 18, 25, 27, 28, 25]\n }\n ]\n};\n [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/57cc43b2b4830ed4c7a8.js b/docs/_nuxt/js/57cc43b2b4830ed4c7a8.js
new file mode 100644
index 0000000..a67b2b3
--- /dev/null
+++ b/docs/_nuxt/js/57cc43b2b4830ed4c7a8.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[98],{392:function(n,w,o){"use strict";o.r(w),w.default=""}}]);
\ No newline at end of file
diff --git a/docs/_nuxt/js/5c4e4f54aa7e6b7c452c.js b/docs/_nuxt/js/5c4e4f54aa7e6b7c452c.js
new file mode 100644
index 0000000..8298cbb
--- /dev/null
+++ b/docs/_nuxt/js/5c4e4f54aa7e6b7c452c.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[117],{411:function(n,w,o){"use strict";o.r(w),w.default=""}}]);
\ No newline at end of file
diff --git a/docs/_nuxt/js/5cbbc9b2bbce87ff971a.js b/docs/_nuxt/js/5cbbc9b2bbce87ff971a.js
new file mode 100644
index 0000000..88f10bb
--- /dev/null
+++ b/docs/_nuxt/js/5cbbc9b2bbce87ff971a.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[48],{342:function(e,t,n){"use strict";n.r(t),t.default="# Stacked Bar Chart\n\nSometimes, we hope to not only figure series separately but also the trend of the sum. It's a good choice to implement it by using the stacked bar chart. As the name suggests, in the stacked bar chart, data in the same category will be stacked up in one column. The overall height of the bar explained the change of total.\n\nThere is a simple way to implement [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/5e04b39a60ff021dedc7.js b/docs/_nuxt/js/5e04b39a60ff021dedc7.js
new file mode 100644
index 0000000..745e7ac
--- /dev/null
+++ b/docs/_nuxt/js/5e04b39a60ff021dedc7.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[96],{390:function(n,e,t){"use strict";t.r(e),e.default="# 图例\n\n图例是图表中对内容区元素的注释、用不同形状、颜色、文字等来标示不同数据列，通过点击对应数据列的标记，可以显示或隐藏该数据列。图例虽然不是图表中的主要信息、却是了解图表信息的钥匙。\n\n## 布局\n\n图例一般放在图表的右上角、也可以放在图表的底部、同一页面中的所有图例位置保持一致，可以横排对齐也可以纵排对齐。还要综合考虑整体的图表空间是适合哪种摆放方式。当图表纵向空间紧张或者内容区量过大的时候、建议摆放在图表的下方。下面是几种图例的摆放方式：\n\n```js live\noption = {\n legend: {\n // Try 'horizontal'\n orient: 'vertical',\n right: 10,\n top: 'center'\n },\n dataset: {\n [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/5f283182c4cfa82d45fb.js b/docs/_nuxt/js/5f283182c4cfa82d45fb.js
new file mode 100644
index 0000000..0f4d3d1
--- /dev/null
+++ b/docs/_nuxt/js/5f283182c4cfa82d45fb.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[25],{319:function(e,t,r){"use strict";r.r(t),t.default='# Area Line Chart\n\bThe area line chart is similar to the basic line chart. They both described the trend of data over time. The difference is that the fill color and texture of the area line chart created a surface that represents the data volume. For a line chart, the filling area can draw attention for users to the trend of the total value. Therefore, the area line chart is mo [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/5f8f3adf196ff450b27d.js b/docs/_nuxt/js/5f8f3adf196ff450b27d.js
new file mode 100644
index 0000000..080dfa6
--- /dev/null
+++ b/docs/_nuxt/js/5f8f3adf196ff450b27d.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[43],{337:function(e,n,t){"use strict";t.r(n),n.default="# Visual Map of Data\n\nData 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.\n\nEvery type of charts in Apache ECharts<sup>TM</sup> has this built-in mapping procedure. For example, line chart map data into _lines_, bar chart map data into _height_. Some more [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/60ea121fe6d12e50e71b.js b/docs/_nuxt/js/60ea121fe6d12e50e71b.js
new file mode 100644
index 0000000..26a98f9
--- /dev/null
+++ b/docs/_nuxt/js/60ea121fe6d12e50e71b.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[122],{416:function(n,t,e){"use strict";e.r(t),t.default="# 异步数据的加载与动态更新\n\n## 异步加载\n\n[入门示例](${lang}/get-started)中的数据是在初始化后`setOption`中直接填入的，但是很多时候可能数据需要异步加载后再填入。`ECharts` 中实现异步数据的更新非常简单，在图表初始化后不管任何时候只要通过 jQuery 等工具异步获取数据后通过 `setOption` 填入数据和配置项就行。\n\n```js\nvar myChart = echarts.init(document.getElementById('main'));\n\n$.get('data.json').done(function(data) {\n // data 的结构:\n // {\n // categories: [\"衬衫\",\"羊毛衫\",\"雪纺衫\",\"裤子\ [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/62e9e94f51fcadb8c5fe.js b/docs/_nuxt/js/62e9e94f51fcadb8c5fe.js
new file mode 100644
index 0000000..a01208b
--- /dev/null
+++ b/docs/_nuxt/js/62e9e94f51fcadb8c5fe.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[102],{396:function(n,t,e){"use strict";e.r(t),t.default="# 快速上手\n\n## 获取 Apache ECharts\n\nApache ECharts 支持多种下载方式，可以在下一篇教程[安装](${lang}/basics/download)中查看所有方式。这里，我们以从 [jsDelivr](https://www.jsdelivr.com/package/npm/echarts) CDN 上获取为例，介绍如何快速安装。\n\n在 [https://www.jsdelivr.com/package/npm/echarts](https://www.jsdelivr.com/package/npm/echarts) 选择 `dist/echarts.js`，点击并保存为 `echarts.js` 文件。\n\n> 关于这些文件的介绍，可以在下一篇教程[安装](${lang}/basics/download [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/65f2e52c78e92f9b19e0.js b/docs/_nuxt/js/65f2e52c78e92f9b19e0.js
new file mode 100644
index 0000000..7e01a97
--- /dev/null
+++ b/docs/_nuxt/js/65f2e52c78e92f9b19e0.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[33],{327:function(e,t,n){"use strict";n.r(t),t.default='# Chart Container and Size\n\nIn [Get Started](${lang}/get-started), we introduced the API to initialize the ECharts [`echarts.init`](${mainSitePath}/api.html#echarts.init). [API Document](${mainSitePath}/api.html#echarts.init) has introduced the specific meaning of each parameters. Please read and understand the document before reading the following content.\n\nRefer to several c [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/67177488d4625997eff6.js b/docs/_nuxt/js/67177488d4625997eff6.js
new file mode 100644
index 0000000..42943c2
--- /dev/null
+++ b/docs/_nuxt/js/67177488d4625997eff6.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[120],{414:function(n,e,t){"use strict";t.r(e),e.default='# 在微信小程序中使用 ECharts\n\n[echarts-for-weixin](https://github.com/ecomfe/echarts-for-weixin) 项目提供了一个小程序组件，用这种方式可以方便地使用 ECharts。\n\n## 使用方式\n\n1. 下载该项目\n2. 如有必要，将 `ec-canvas` 目录下的 `echarts.js` 替换为最新版的 ECharts。如果希望减小包体积大小，可以使用[自定义构建](${mainSitePath}/build.html)生成并替换 `echarts.js`\n3. `pages` 目录下是使用的示例文件，可以作为参考，或者删除不需要的页面。\n\n更详细的说明请参见 [echarts-for-weixin](https://github.com/ecomfe/echa [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/673c4ed3b97a04b343be.js b/docs/_nuxt/js/673c4ed3b97a04b343be.js
new file mode 100644
index 0000000..c66f112
--- /dev/null
+++ b/docs/_nuxt/js/673c4ed3b97a04b343be.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[37],{331:function(e,n,t){"use strict";t.r(n),n.default="# Event and Action\n\nUsers 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.\n\nThe name of the event and the DOM event is both lowercase string. Here is an example of binding listening to `click` event.\n\n```js\nmyChart.on(' [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/6aac60f585a306304a63.js b/docs/_nuxt/js/6aac60f585a306304a63.js
new file mode 100644
index 0000000..4887320
--- /dev/null
+++ b/docs/_nuxt/js/6aac60f585a306304a63.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[46],{340:function(e,n,t){"use strict";t.r(n),n.default="# Basic Bar Chart\n\nBar Chart, is a chart that presents the comparisons among discrete data. The length of the bars is proportionally related to the categorical data.\n\nTo set the bar chart, you need to set the `type` of `series` as `'bar'`.\n\n[[Option]](${optionPath}series-bar)\n\n## Simple Example\n\nLet's begin with a basic bar chart:\n\n```js\n/*\nlive\n\n*/\noption = {\n [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/7081069603a1429170da.js b/docs/_nuxt/js/7081069603a1429170da.js
new file mode 100644
index 0000000..be13b27
--- /dev/null
+++ b/docs/_nuxt/js/7081069603a1429170da.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[76],{370:function(n,w,o){"use strict";o.r(w),w.default=""}}]);
\ No newline at end of file
diff --git a/docs/_nuxt/js/70b7bb2a8acc87ac395f.js b/docs/_nuxt/js/70b7bb2a8acc87ac395f.js
new file mode 100644
index 0000000..e8df920
--- /dev/null
+++ b/docs/_nuxt/js/70b7bb2a8acc87ac395f.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[13],{307:function(e,t,n){"use strict";n.r(t),t.default='# New features in ECharts 5\n\nData visualization has come a long way in the last few years. Developers no longer expect visualization products to be simple chart creation tools, but have more advanced needs in terms of interaction, performance, data processing, and more.\n\nApache ECharts has always been committed to making it easier for developers to create flexible and rich vis [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/70d817cd00d197aa7288.js b/docs/_nuxt/js/70d817cd00d197aa7288.js
new file mode 100644
index 0000000..f3da9f4
--- /dev/null
+++ b/docs/_nuxt/js/70d817cd00d197aa7288.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[31],{325:function(e,t,n){"use strict";n.r(t),t.default='# Scatter Chart\n\nThe scatter chart shows the relation between the two variables. Data is embodied as a collection of points, which is appropriate to compare a large number of data without considering the time. The scatter chart can identify the relevant and relation of two variables thus find some trend. The scatter chart is also workable to find outliers or to understand data d [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/7294835b13291a6e4aec.js b/docs/_nuxt/js/7294835b13291a6e4aec.js
new file mode 100644
index 0000000..2eff280
--- /dev/null
+++ b/docs/_nuxt/js/7294835b13291a6e4aec.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[75],{369:function(n,t,e){"use strict";e.r(t),t.default="# 用颜色增强可视化效果\n\n在数据可视化所有的视觉通道中，色彩作为视觉的第一感知因素，对数据进行的视觉编码和传达是很有效的。如果使用得当，颜色可以非常有效地增强可视化效果。接下来，我们来看看具体有哪些使用颜色来增强可视化效果的的技巧和方法。\n\n## 颜色的情感共鸣\n\n颜色感知是一个复杂的物理和心理相互作用的结果。为了证明了人们感知到的色彩有冷与暖之分，日本色彩学家大智浩曾做过一个实验，将一个工作场地涂灰青色，另一个工作场地涂红橙色，两个工作场地的客观温度劳动强度相同，在灰青色工作场地工作的员工相对更容易感觉到冷。人们进一步研究发现，除了冷与暖的不同感受，色彩还有轻与重、远与近、活泼与忧郁等区分。�
��以，色彩之所以强大之处在于不同的色彩会使人的心理与生理产生不同的感受，从而引起情感反应和影响人们的情绪。\n\n在可视化的颜色选择上，如果我们选用的颜 [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/72d0593e53b8a5dc1e2b.js b/docs/_nuxt/js/72d0593e53b8a5dc1e2b.js
new file mode 100644
index 0000000..f3915f5
--- /dev/null
+++ b/docs/_nuxt/js/72d0593e53b8a5dc1e2b.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[20],{314:function(e,t,n){"use strict";n.r(t),t.default='Bi-directional bar charts are mostly used to show values that included in two opposite meaning categories. One axis shows the name of categories being compared, while the other axis represents the scale value. As an example, Using a bi-directional bar chart to analyze the personal income (positive number) and outcome (negative number) in a week, you can easily find the value and f [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/75b629822f727a79f6b7.js b/docs/_nuxt/js/75b629822f727a79f6b7.js
new file mode 100644
index 0000000..e5600a8
--- /dev/null
+++ b/docs/_nuxt/js/75b629822f727a79f6b7.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[67],{361:function(n,t,e){"use strict";e.r(t),t.default="# 在项目中引入 Apache ECharts\n\n假如你的开发环境使用了`npm`或者`yarn`等包管理工具，并且使用 Webpack 等打包工具进行构建，本文将会介绍如何引入 Apache ECharts<sup>TM</sup> 并通过 treeshaking 特性只打包需要的模块。\n\n## NPM 安装 ECharts\n\n你可以使用如下命令通过 npm 安装 ECharts\n\n```shell\nnpm install echarts --save\n```\n\n## 引入 ECharts\n\n```js\nimport * as echarts from 'echarts';\n\n// 基于准备好的dom，初始化echarts实例\nvar myChart = echarts.init(document.getElement [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/76453ddd9d5c1dc04efb.js b/docs/_nuxt/js/76453ddd9d5c1dc04efb.js
new file mode 100644
index 0000000..8aa0694
--- /dev/null
+++ b/docs/_nuxt/js/76453ddd9d5c1dc04efb.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[0],{1:function(t,e,r){"use strict";r.d(e,"k",(function(){return y})),r.d(e,"m",(function(){return _})),r.d(e,"l",(function(){return C})),r.d(e,"e",(function(){return k})),r.d(e,"b",(function(){return O})),r.d(e,"s",(function(){return $})),r.d(e,"g",(function(){return j})),r.d(e,"h",(function(){return P})),r.d(e,"d",(function(){return E})),r.d(e,"r",(function(){return S})),r.d(e,"j",(function(){return R})),r.d(e,"t",(function(){return A [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/786d4c826164981c3345.js b/docs/_nuxt/js/786d4c826164981c3345.js
new file mode 100644
index 0000000..affd4ae
--- /dev/null
+++ b/docs/_nuxt/js/786d4c826164981c3345.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[19],{313:function(e,t,n){"use strict";n.r(t),t.default='# Basic Bar Chart\n\nBar Chart is a chart that presents the comparisons among discrete data. The length of the bars is proportional related to the categorical data.\n\n<iframe max-width="830" width="100%" height="400"\nsrc="https://gallery.echartsjs.com/view-lite.html?cid=xS18jqmX4f">\n</iframe>\n\nWhile the label of the series is long, or there are more than 10 categories in one [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/78d7524e4634a619f1ec.js b/docs/_nuxt/js/78d7524e4634a619f1ec.js
new file mode 100644
index 0000000..5685f90
--- /dev/null
+++ b/docs/_nuxt/js/78d7524e4634a619f1ec.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[81],{375:function(n,t,e){"use strict";e.r(t),t.default='# 漏斗图\n\n漏斗图又叫倒三角图，漏斗图将数据呈现为几个阶段，每个阶段的数据都是整体的一部分，从一个阶段到另一个阶段数据自上而下逐渐下降，所有阶段的占比总计 100％。与饼图一样，漏斗图呈现的也不是具体的数据，而是该数据相对于总数的占比、漏斗图不需要使用任何数据轴。\n\n漏斗图多用于显示简化的数据，可以用来单向分析业务各环节丢失或增加变化，也可用来直接表示某个环节与上一环节的差异。漏斗图对于确定组织的销售过程中可能存在的问题和瓶颈也很有用。\n\n<iframe max-width="830" width="100%" height="400"\nsrc="https://gallery.echartsjs.com/view-lite.html?cid=xrJIQEN5NM">\n</iframe>\n\n## 漏斗图的使用建议\n\n1、以电商网站 [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/7a8b45c270f4eb8a4221.js b/docs/_nuxt/js/7a8b45c270f4eb8a4221.js
new file mode 100644
index 0000000..b33938a
--- /dev/null
+++ b/docs/_nuxt/js/7a8b45c270f4eb8a4221.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[2],{192:function(t,e,n){t.exports={}},199:function(t,e,n){t.exports={}},200:function(t,e,n){t.exports={}},201:function(t,e,n){t.exports={}},210:function(t,e,n){t.exports={}},213:function(t,e,n){"use strict";n(192)},230:function(t,e,n){"use strict";n(199)},231:function(t,e,n){"use strict";n(200)},239:function(t,e,n){"use strict";n(201)},299:function(t,e,n){"use strict";n(210)},301:function(t,e,n){var map={"./en/basics/download.md":[302, [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/7be2520855c4af391f2b.js b/docs/_nuxt/js/7be2520855c4af391f2b.js
new file mode 100644
index 0000000..c8bfede
--- /dev/null
+++ b/docs/_nuxt/js/7be2520855c4af391f2b.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[127],{421:function(n,o,e){"use strict";e.r(o),o.default="# 写作风格规范\n\n本文的主要目的是为了统一该项目的写作风格。\n\n语法主要参照[中文技术文档的写作规范](https://github.com/ruanyf/document-style-guide)。请在写作前先阅读一遍该语法。\n\n## 重点\n\n> 段落的句子语气要使用陈述和肯定语气，避免使用感叹语气。\n\n> 句子内部的并列词，应该用全角顿号(、) 分隔，而不用逗号，即使并列词是英语也是如此。\n>\n> 错误：我最欣赏的科技公司有 Google, Facebook, 腾讯, 阿里和百度等。\n>\n> 正确：我最欣赏的科技公司有 Google、Facebook、腾讯、阿里和百度等。\n\n## 其他注意事项\n\n除了上述规范之外，还需要注意：\n\n- 写作时，应尽可能使用正式的书面语言，避免较为随意的个人博客风格。\n"}}]);
\ No newline at end of file
diff --git a/docs/_nuxt/js/7bf91108c3f87e83badf.js b/docs/_nuxt/js/7bf91108c3f87e83badf.js
new file mode 100644
index 0000000..b3f2941
--- /dev/null
+++ b/docs/_nuxt/js/7bf91108c3f87e83badf.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[84],{378:function(n,t,e){"use strict";e.r(t),t.default='# 基础折线图\n\n折线图主要用来展示数据相随着时间推移的趋势或变化。折线图非常适合用于展示一个连续的二维数据，如某网站访问人数或商品销量价格的波动。\n\n<iframe max-width="830" width="100%" height="400"\nsrc="https://gallery.echartsjs.com/view-lite.html?cid=xB1kG1rLEG&v=1">\n</iframe>\n\n折线图除了展示某个事情发展的趋势，还可以用来比较多个不同的数据序列。如下图，可以通过对比同时间段的三种商品的销量，分析哪一种商品的销量最好。\n\n<iframe max-width="830" width="100%" height="400"\n src="https://gallery.echartsjs.com/view-l [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/7c55caf9c0b887f6f923.js b/docs/_nuxt/js/7c55caf9c0b887f6f923.js
new file mode 100644
index 0000000..8fd3298
--- /dev/null
+++ b/docs/_nuxt/js/7c55caf9c0b887f6f923.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[57],{351:function(n,e,t){"use strict";t.r(e),e.default="# Rose Chart（Nightingale Chart）\n\nRose Chart, which was also called the nightingale chart, usually indicates categories by sector of the same radius but different radius.\n\nECharts can implement Rose Chart by defining [`series.roseType`](${optionPath}series-pie.roseType) of pie chart to `'area'`. All other configs are the same as a basic pie chart.\n\n```js live\noption = {\n s [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/7d570de6e66a34236198.js b/docs/_nuxt/js/7d570de6e66a34236198.js
new file mode 100644
index 0000000..7b1716c
--- /dev/null
+++ b/docs/_nuxt/js/7d570de6e66a34236198.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[109],{403:function(n,e,t){"use strict";t.r(e),e.default="# 基础折线图\n\n柱状图（或称条形图）是一种通过柱形的长度来表现数据大小的一种常用图表类型。\n\n## 最简单的折线图\n\n如果我们想建立一个横坐标是类目型（category）、纵坐标是数值型（value）的折线图，我们可以使用这样的方式：\n\n```js live\noption = {\n xAxis: {\n type: 'category',\n data: ['A', 'B', 'C']\n },\n yAxis: {\n type: 'value'\n },\n series: [\n {\n data: [120, 200, 150],\n type: 'line'\n }\n ]\n};\n```\n\n在这个例子中，我们通过 `xAxis` 将横坐标设为类目型，并指 [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/7e66f93f0999fe6c1337.js b/docs/_nuxt/js/7e66f93f0999fe6c1337.js
new file mode 100644
index 0000000..2b719a2
--- /dev/null
+++ b/docs/_nuxt/js/7e66f93f0999fe6c1337.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[27],{321:function(e,t,r){"use strict";r.r(t),t.default='# Stacked Area Chart\nThe stacked area chart is a special kind of area chart. It is used to compare several data series in the same interval. The main difference between the area chart and stacked area chart is that the base of every series is over the previous one. Therefore, every time a line is measured, the area between the lines will be filled with color.\n\nIf there are seve [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/7f30910e5d88b8f89d8a.js b/docs/_nuxt/js/7f30910e5d88b8f89d8a.js
new file mode 100644
index 0000000..b05e8ca
--- /dev/null
+++ b/docs/_nuxt/js/7f30910e5d88b8f89d8a.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[41],{335:function(n,e,t){"use strict";t.r(e),e.default="# Overview of Style Customization\n\nThis 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.\n\n> 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 u [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/811af0140715cd166af1.js b/docs/_nuxt/js/811af0140715cd166af1.js
new file mode 100644
index 0000000..c531d67
--- /dev/null
+++ b/docs/_nuxt/js/811af0140715cd166af1.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[87],{381:function(n,t,e){"use strict";e.r(t),t.default='# 雷达图\n\n雷达图（Radar Chart）又被叫做蜘蛛网图，适用于显示三个或更多的维度的变量。雷达图是以在同一点开始的轴上显示的三个或更多个变量的二维图表的形式来显示多元数据的方法，其中轴的相对位置和角度通常是无意义的。\n\n\n雷达图的每个变量都有一个从中心向外发射的轴线，所有的轴之间的夹角相等，同时每个轴有相同的刻度，将轴到轴的刻度用网格线链接作为辅助元素，连接每个变量在其各自的轴线的数据点成一条多边形。\n\n<iframe max-width="830" width="100%" height="400" \nsrc="https://gallery.echartsjs.com/view-lite.html?cid=xH1-fnLcVG&v=1">\n</iframe>\n\n雷达图对于查看哪些变量具有相似的值、变量之间是否有异常值都很有 [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/81e776c79b39e6174c44.js b/docs/_nuxt/js/81e776c79b39e6174c44.js
new file mode 100644
index 0000000..92f077f
--- /dev/null
+++ b/docs/_nuxt/js/81e776c79b39e6174c44.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[8],{302:function(n,e,t){"use strict";t.r(e),e.default="# Get Apache ECharts\n\nApache ECharts offers a variety of installation options, so you can choose any of the following options depending on your project.\n\n- Use From GitHub\n- Use From npm\n- Use From CDN\n- Online Customization\n\nWe'll go over each of these installation methods and the directory structure after download.\n\n## Installation\n\n### Use From npm\n\n```sh\nnpm ins [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/87176580e664767aac13.js b/docs/_nuxt/js/87176580e664767aac13.js
new file mode 100644
index 0000000..ca41c24
--- /dev/null
+++ b/docs/_nuxt/js/87176580e664767aac13.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[15],{309:function(e,t,n){"use strict";n.r(t),t.default="# Web Accessibility\n\n[WAI-ARIA](https://www.w3.org/WAI/intro/aria), 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.\n\nECharts 4.0 complied with the specification, support generating description based on the chart configuration intelligently, to allows people wit [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/87ee27d0dbb3329810d7.js b/docs/_nuxt/js/87ee27d0dbb3329810d7.js
new file mode 100644
index 0000000..d83c2dd
--- /dev/null
+++ b/docs/_nuxt/js/87ee27d0dbb3329810d7.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[39],{333:function(n,w,o){"use strict";o.r(w),w.default=""}}]);
\ No newline at end of file
diff --git a/docs/_nuxt/js/8f32e40e824ab935439d.js b/docs/_nuxt/js/8f32e40e824ab935439d.js
new file mode 100644
index 0000000..9321383
--- /dev/null
+++ b/docs/_nuxt/js/8f32e40e824ab935439d.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[9],{303:function(e,o,t){"use strict";t.r(o),o.default="# Get Help\n\n## Technical Problems\n\n### Make sure that existing documentation do not solve your problem\n\nECharts 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 t [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/8f75656ffe38b958df70.js b/docs/_nuxt/js/8f75656ffe38b958df70.js
new file mode 100644
index 0000000..e7289bd
--- /dev/null
+++ b/docs/_nuxt/js/8f75656ffe38b958df70.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[59],{353:function(e,t,o){"use strict";o.r(t),t.default="# Server Side Rendering\n\nApache ECharts<sup>TM</sup> can be rendered at server-side. For example, the thumbnails in the [official examples page](https://echarts.apache.org/examples/en/index.html) are generated at a server.\n\nCommonly used headless tool is required, for example, [puppeteer](https://github.com/GoogleChrome/puppeteer), [headless chrome](https://chromium.googlesour [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/90d8c259403cc2b28bed.js b/docs/_nuxt/js/90d8c259403cc2b28bed.js
new file mode 100644
index 0000000..05d6ece
--- /dev/null
+++ b/docs/_nuxt/js/90d8c259403cc2b28bed.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[61],{355:function(n,e,t){"use strict";t.r(e),e.default="# Asynchronous Data Loading and Dynamic Update\n\n## Asynchronous Loading\n\nData in [Getting Started Example](${lang}/get-started) is directly updated by using `setOption`. But in many cases, data need to be filled by asynchronous loading frequently. `ECharts` can implement asynchronous loading in a simple way. You can get data asynchronously through a function such as jQuery and [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/921d7bcd80bc1b6261e0.js b/docs/_nuxt/js/921d7bcd80bc1b6261e0.js
new file mode 100644
index 0000000..1b05c8d
--- /dev/null
+++ b/docs/_nuxt/js/921d7bcd80bc1b6261e0.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[12],{306:function(e,t,n){"use strict";n.r(t),t.default="# What's New in Apache ECharts 5.2.0\n\n## Universal Transition\n\nNatural and smooth transition animations have been an important feature in Apache ECharts. By avoiding abrupt changes from data update, it not only improves the visual effect, but also provides the possibility to express the association and evolution of data. Therefore, in 5.2.0, we have further enhanced this anima [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/924bdf422a65bffeadbe.js b/docs/_nuxt/js/924bdf422a65bffeadbe.js
new file mode 100644
index 0000000..ae9c1ee
--- /dev/null
+++ b/docs/_nuxt/js/924bdf422a65bffeadbe.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[62],{356:function(e,n,t){"use strict";t.r(n),n.default="# An Example: Implement Dragging\n\nThis is a tiny example, introducing how to implement dragging of graphic elements in Apache ECharts<sup>TM</sup>. From this example, we will see how to make an application with rich intractivity based on echarts API.\n\n<md-example src=\"line-draggable\" height=\"400\"></md-example>\n\nThis example mainly implements that dragging points of a cur [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/9a290f3a651e16ccacf0.js b/docs/_nuxt/js/9a290f3a651e16ccacf0.js
new file mode 100644
index 0000000..420bd59
--- /dev/null
+++ b/docs/_nuxt/js/9a290f3a651e16ccacf0.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[65],{359:function(n,t,e){"use strict";e.r(t),t.default="# 获取 Apache ECharts\n\nApache ECharts 提供了多种安装方式，你可以根据项目的实际情况选择以下任意一种方式安装。\n\n- 从 GitHub 获取\n- 从 npm 获取\n- 从 CDN 获取\n- 在线定制\n\n接下来我们将分别介绍这些安装方式，以及下载后的目录结构。\n\n## 安装方式\n\n### 从 npm 获取\n\n```sh\nnpm install echarts --save\n```\n\n详见[在项目中引入 Apache ECharts](${lang}/basics/import)。\n\n### 从 CDN 获取\n\n推荐从 jsDelivr 引用 [echarts](https://www.jsdelivr.com/package/npm/echarts)。\n\n### 从 GitHu [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/9d9dec90be1f0f41b2d2.js b/docs/_nuxt/js/9d9dec90be1f0f41b2d2.js
new file mode 100644
index 0000000..3669d58
--- /dev/null
+++ b/docs/_nuxt/js/9d9dec90be1f0f41b2d2.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[36],{330:function(e,n,t){"use strict";t.r(n),n.default="# Dataset\n\n`dataset` is a component dedicated to manage data. Although you can set the data in `series.data` for every series, we recommend you use the `dataset` 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 confi [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/9efce8a5c7f638f28225.js b/docs/_nuxt/js/9efce8a5c7f638f28225.js
new file mode 100644
index 0000000..43eb48f
--- /dev/null
+++ b/docs/_nuxt/js/9efce8a5c7f638f28225.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[126],{420:function(n,e,t){"use strict";t.r(e),e.default="# 文档编辑指南\n\n## 新增一个 markdown 文件\n\n在 `contents/zh/`（中文文章）或 `contents/en/`（英文文章）目录下新增一个 markdown 文件，最多支持三级目录。将路径及标题信息更新在 `contents/zh/posts.yml` 或 `contents/en/posts.yml`。\n\nmarkdown 文件名称小写。\n\n## 使用 prettier 来自动格式化代码\n\n在开始之前，我们推荐安装`prettier`的 [VSCode 插件](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)，该插件可以在你保存的时候自动帮你格式化代码。\n\n如果你觉得自动的格式化破坏了你的代码块，你可以 [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/9fccc9e4ae291b0d6e44.js b/docs/_nuxt/js/9fccc9e4ae291b0d6e44.js
new file mode 100644
index 0000000..d173a90
--- /dev/null
+++ b/docs/_nuxt/js/9fccc9e4ae291b0d6e44.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[77],{371:function(n,t,h){"use strict";h.r(t),t.default='# 基础柱状图\n\n柱状图是最常见的图表类型，通过使用水平或垂直方向 \b 柱子的高度来显示不同类别的数值，其中柱状图的一个轴显示比较的类别，而另一个轴代表对应的数值。\n\n<iframe max-width="830" width="100%" height="400"\nsrc="https://gallery.echartsjs.com/view-lite.html?cid=xS18jqmX4f">\n</iframe>\n\n纵向柱状图的柱是垂直方向的，横向柱状图的柱是水平方向的，又称条形图。条形图与横向柱状图表达数据的形式是一样的，不过，当图表的数据标签很长或者有超过 10 个项目进行比较时，横向柱状图会无法完全显示完标签，或者只能倾斜展示，影响美观。因此当数据标签过长时，选择用条形图可以获得更好的展示效果。\n\n<iframe max-w [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/a0d901b415da8e86775e.js b/docs/_nuxt/js/a0d901b415da8e86775e.js
new file mode 100644
index 0000000..fa0af38
--- /dev/null
+++ b/docs/_nuxt/js/a0d901b415da8e86775e.js
@@ -0,0 +1,2 @@
+/*! For license information please see ../LICENSES */
+(window.webpackJsonp=window.webpackJsonp||[]).push([[1],[function(t,e,n){t.exports=n(168)},,function(t,e,n){"use strict";function r(t,e,n,r,o,c,f){try{var l=t[c](f),d=l.value}catch(t){return void n(t)}l.done?e(d):Promise.resolve(d).then(r,o)}function o(t){return function(){var e=this,n=arguments;return new Promise((function(o,c){var f=t.apply(e,n);function l(t){r(f,o,c,l,d,"next",t)}function d(t){r(f,o,c,l,d,"throw",t)}l(void 0)}))}}n.d(e,"a",(function(){return o}))},function(t,e,n){"use [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/a5db32c5ac1f20389636.js b/docs/_nuxt/js/a5db32c5ac1f20389636.js
new file mode 100644
index 0000000..40218e6
--- /dev/null
+++ b/docs/_nuxt/js/a5db32c5ac1f20389636.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[112],{406:function(n,e,t){"use strict";t.r(e),e.default="# 阶梯线图\n\n阶梯线图又称方波图，它使用水平和垂直的线来连接两个数据点，而普通折线图则直接将两个点连接起来。阶梯线图能够很好地表达数据的突变。\n\n在 ECharts 中，系列的 `step` 属性用来表征阶梯线图的连接类型，它共有三种取值：`'start'`、`'middle'` 和 `'end'`，分别表示在当前点，当前点与下个点的中间点，下个点拐弯。\n\n```js live\noption = {\n xAxis: {\n type: 'category',\n data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']\n },\n yAxis: {\n type: 'value'\n },\n series: [\n {\n name: [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/a6fddc27f11596c149f1.js b/docs/_nuxt/js/a6fddc27f11596c149f1.js
new file mode 100644
index 0000000..112e819
--- /dev/null
+++ b/docs/_nuxt/js/a6fddc27f11596c149f1.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[82],{376:function(n,t,e){"use strict";e.r(t),t.default='# 仪表盘\n\n仪表盘也被称为拨号图表或速度表图。其显示类似于拨号/速度计上的读数的数据，是一种拟物化的展示形式。仪表盘的颜色可以用来划分指示值的类别，使用刻度标示数据，指针指示维度，指针角度表示数值。\n\n<iframe max-width="830" width="100%" height="400"\nsrc="https://gallery.echartsjs.com/view-lite.html?cid=xH1vxib94f">\n</iframe>\n\n## 仪表盘的使用建议\n\n1、仪表盘非常适合在量化的情况下显示单一的价值和衡量标准，不适合用于比较不同变量或者趋势的分析。\n\n2、仪表盘上可以同时展示不同纬度的数据，但是为了避免指针的重叠影响数据的查看，并且基于常识，仪表盘的指针数量建议最多不要超过 3 根。如果确实有多个数据需要 [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/a82ec7151a8524a7410d.js b/docs/_nuxt/js/a82ec7151a8524a7410d.js
new file mode 100644
index 0000000..8099cf2
--- /dev/null
+++ b/docs/_nuxt/js/a82ec7151a8524a7410d.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[42],{336:function(n,w,o){"use strict";o.r(w),w.default=""}}]);
\ No newline at end of file
diff --git a/docs/_nuxt/js/a8538eba3f241a324560.js b/docs/_nuxt/js/a8538eba3f241a324560.js
new file mode 100644
index 0000000..55c57dd
--- /dev/null
+++ b/docs/_nuxt/js/a8538eba3f241a324560.js
@@ -0,0 +1,2 @@
+/*! For license information please see ../LICENSES */
+(window.webpackJsonp=window.webpackJsonp||[]).push([[6],Array(186).concat([function(e,t,r){"use strict";var n=Object.prototype.hasOwnProperty;function o(object,e){return n.call(object,e)}function c(e){return!(e>=55296&&e<=57343)&&(!(e>=64976&&e<=65007)&&(65535!=(65535&e)&&65534!=(65535&e)&&(!(e>=0&&e<=8)&&(11!==e&&(!(e>=14&&e<=31)&&(!(e>=127&&e<=159)&&!(e>1114111)))))))}function l(e){if(e>65535){var t=55296+((e-=65536)>>10),r=56320+(1023&e);return String.fromCharCode(t,r)}return String.f [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/ab18b1df75a56aaf65f9.js b/docs/_nuxt/js/ab18b1df75a56aaf65f9.js
new file mode 100644
index 0000000..6a7eb04
--- /dev/null
+++ b/docs/_nuxt/js/ab18b1df75a56aaf65f9.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[78],{372:function(n,t,e){"use strict";e.r(t),t.default='# 双向柱状图\n\n双向柱状图多用于展示包含相反含义的数据的对比。其中图表的一个轴显示正在比较的类别，而另一轴代表对应的刻度值。\n\n双向柱状图一般用于正负两份相反数据的对比。例如一周内个人收入和支出的统计，其中收入为正数，支出为负数。使用双向柱状图可以很明确的对收入和支出做出对比，并能从单个系列中分析收入和支出的数值及波动。\n\n<iframe max-width="830" width="100%" height="400"\nsrc="https://gallery.echartsjs.com/view-lite.html?cid=xS18jqmX4f">\n</iframe>\n\n双向柱状图可分为垂直方向的双向柱状图（如上图）和水平方向的双向柱状图（又叫正负条形图，如下图），例如一个客户满意度的调查数据分析中，有正面评价和负面评价，这很适合 [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/adff98946848424af6be.js b/docs/_nuxt/js/adff98946848424af6be.js
new file mode 100644
index 0000000..e389dc8
--- /dev/null
+++ b/docs/_nuxt/js/adff98946848424af6be.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[91],{385:function(n,t,e){"use strict";e.r(t),t.default='# 图表容器及大小\n\n在[快速上手](${lang}/get-started)中，我们介绍了初始化 ECharts 的接口 [`echarts.init`](${mainSitePath}/api.html#echarts.init)。[API 文档](${mainSitePath}/api.html#echarts.init)中详细介绍了参数的具体含义，建议理解后再阅读本文。\n\n下面，我们就常见的几种使用场景，介绍如何初始化一个图表以及改变其大小。\n\n## 初始化\n\n### 在 HTML 中定义有宽度和高度的父容器（推荐）\n\n通常来说，需要在 HTML 中先定义一个 `<div>` 节点，并且通过 CSS 使得该节点具有宽度和高度。初始化的时候，传入该节点，图表的大小默认即为该节点的大小，除非声明了 `opts.width` 或 `o [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/af5a647409dafc200aa2.js b/docs/_nuxt/js/af5a647409dafc200aa2.js
new file mode 100644
index 0000000..96e2f62
--- /dev/null
+++ b/docs/_nuxt/js/af5a647409dafc200aa2.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[123],{417:function(n,t,e){"use strict";e.r(t),t.default="# 拖拽的实现\n\n本篇通过介绍一个实现拖拽的小例子来介绍如何在 Apache ECharts<sup>TM</sup> 中实现复杂的交互。\n\n<md-example src=\"line-draggable\" height=\"400\"></md-example>\n\n这个例子主要做到了这样一件事，用鼠标可以拖拽曲线的点，从而改变曲线的形状。例子很简单，但是有了这个基础我们还可以做更多的事情，比如在图中进行可视化得编辑。所以我们从这个简单的例子开始。\n\necharts 本身没有提供封装好的“拖拽改变图表”这样比较业务定制的功能。但是这个功能开发者可以通过 API 扩展实现。\n\n## 实现基本的拖拽功能\n\n在这个例子中，基础的图表是一个 [折线图 (series-line)](${optionPath}series-line)。参 [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/b126c4d13efda3a500eb.js b/docs/_nuxt/js/b126c4d13efda3a500eb.js
new file mode 100644
index 0000000..a9ccf6e
--- /dev/null
+++ b/docs/_nuxt/js/b126c4d13efda3a500eb.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[92],{386:function(n,w,o){"use strict";o.r(w),w.default=""}}]);
\ No newline at end of file
diff --git a/docs/_nuxt/js/b317cfa684d7d117b776.js b/docs/_nuxt/js/b317cfa684d7d117b776.js
new file mode 100644
index 0000000..a80eb75
--- /dev/null
+++ b/docs/_nuxt/js/b317cfa684d7d117b776.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[18],{312:function(n,w,o){"use strict";o.r(w),w.default=""}}]);
\ No newline at end of file
diff --git a/docs/_nuxt/js/b66855952f3a4278ff26.js b/docs/_nuxt/js/b66855952f3a4278ff26.js
new file mode 100644
index 0000000..75e3c53
--- /dev/null
+++ b/docs/_nuxt/js/b66855952f3a4278ff26.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[14],{308:function(e,t,n){"use strict";n.r(t),t.default="# Apache ECharts 5 Upgrade Guide\n\nThis guide is for those who want to upgrade from echarts 4.x (hereafter `v4`) to echarts 5.x (hereafter `v5`). You can find out what new features `v5` brings that are worth upgrading in [New Features in ECharts 5](${lang}/basics/release-note/v5-feature). In most cases, developers won't need to do anything extra for this upgrade, as echarts has a [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/b88e11700f3f21434e5c.js b/docs/_nuxt/js/b88e11700f3f21434e5c.js
new file mode 100644
index 0000000..793b9ff
--- /dev/null
+++ b/docs/_nuxt/js/b88e11700f3f21434e5c.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[47],{341:function(n,o,t){"use strict";t.r(o),o.default="# Bar Chart in Polar Coordinate System\n\n"}}]);
\ No newline at end of file
diff --git a/docs/_nuxt/js/baee98106e7990307f27.js b/docs/_nuxt/js/baee98106e7990307f27.js
new file mode 100644
index 0000000..84c0ee8
--- /dev/null
+++ b/docs/_nuxt/js/baee98106e7990307f27.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[49],{343:function(n,e,t){"use strict";t.r(e),e.default="# Waterfall\n\nThere is no waterfall series in Apache ECharts, but we can simulate the effect using a stacked bar chart.\n\nAssuming that the values in the data array represent an increase or decrease from the previous value.\n\n```js\nvar data = [900, 345, 393, -108, -154, 135, 178, 286, -119, -361, -203];\n```\n\nThat is, the first data is `900` and the second data `345` represe [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/bdd7734f062fbd20c13c.js b/docs/_nuxt/js/bdd7734f062fbd20c13c.js
new file mode 100644
index 0000000..9183ca7
--- /dev/null
+++ b/docs/_nuxt/js/bdd7734f062fbd20c13c.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[100],{394:function(n,w,o){"use strict";o.r(w),w.default=""}}]);
\ No newline at end of file
diff --git a/docs/_nuxt/js/c0208ae5582dd60676f2.js b/docs/_nuxt/js/c0208ae5582dd60676f2.js
new file mode 100644
index 0000000..c2f7768
--- /dev/null
+++ b/docs/_nuxt/js/c0208ae5582dd60676f2.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[124],{418:function(n,e,o){"use strict";o.r(e),e.default="# 富文本标签\n\nApache ECharts<sup>TM</sup> 中的文本标签从 v3.7 开始支持富文本模式，能够：\n\n- 定制文本块整体的样式（如背景、边框、阴影等）、位置、旋转等。\n- 对文本块中个别片段定义样式（如颜色、字体、高宽、背景、阴影等）、对齐方式等。\n- 在文本中使用图片做小图标或者背景。\n- 特定组合以上的规则，可以做出简单表格、分割线等效果。\n\n开始下面的介绍之前，先说明一下下面会使用的两个名词的含义：\n\n- 文本块（Text Block）：文本标签块整体。\n- 文本片段（Text fragment）：文本标签块中的部分文本。\n\n如下图示例：\n\n<md-example src=\"doc-example/text-block-fragment\" width=\"400\" height=\" [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/c1b8dd303f98eed9f546.js b/docs/_nuxt/js/c1b8dd303f98eed9f546.js
new file mode 100644
index 0000000..b1e07a6
--- /dev/null
+++ b/docs/_nuxt/js/c1b8dd303f98eed9f546.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[32],{326:function(n,e,t){"use strict";t.r(e),e.default="# Axis\n\nThe x/y-axis in the Cartesian coordinate system.\n\n## x-axis, y-axis\n\nBoth 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.\n\n<img max-width=\"830\" width=\"100%\" height=\"100%\"\nsrc=\"images/design/axis/charts_axis_img02.jpg\">\n</img>\n\nA normal 2D coordinate system has x-axis a [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/c45726f40449696b44e1.js b/docs/_nuxt/js/c45726f40449696b44e1.js
new file mode 100644
index 0000000..6194afe
--- /dev/null
+++ b/docs/_nuxt/js/c45726f40449696b44e1.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[50],{344:function(e,t,n){"use strict";n.r(t),t.default="# Area Chart\n\nThe area chart fills the space between the line and axis with the background color, to express the data by the size of the area. Compared with the normal line chart, the area chart has more intuitive visual effects. It is especially suitable for the scenario with a few series.\n\n```js live\noption = {\n xAxis: {\n data: ['A', 'B', 'C', 'D', 'E']\n },\n yAxis [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/c5d4e63cc1137cb65a2a.js b/docs/_nuxt/js/c5d4e63cc1137cb65a2a.js
new file mode 100644
index 0000000..8a17037
--- /dev/null
+++ b/docs/_nuxt/js/c5d4e63cc1137cb65a2a.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[90],{384:function(n,e,t){"use strict";t.r(e),e.default="# 坐标轴\n\n直角坐标系中的 x/y 轴。\n\n## x 轴、y 轴\n\nx 轴和 y 轴都由轴线、刻度、刻度标签、轴标题四个部分组成。部分图表中还会有网格线来帮助查看和计算数据\n\n<img max-width=\"830\" width=\"100%\" height=\"100%\" src=\"images/design/axis/charts_axis_img02.jpg\">\n</img>\n\n普通的二维数据坐标系都有 x 轴和 y 轴，通常情况下，x 轴显示在图表的底部，y 轴显示在左侧，一般配置如下：\n\n```js\noption = {\n xAxis: {\n // ...\n },\n yAxis: {\n // ...\n }\n};\n```\n\nx 轴常用来标示数据的维度，维度一般用来指数 [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/c86858accdc63ea5924c.js b/docs/_nuxt/js/c86858accdc63ea5924c.js
new file mode 100644
index 0000000..3a06534
--- /dev/null
+++ b/docs/_nuxt/js/c86858accdc63ea5924c.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[35],{329:function(e,n,t){"use strict";t.r(n),n.default="# Data Transform\n\n`Data transform` has been supported since Apache ECharts<sup>TM</sup> 5. In echarts, the term `data transform` 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-bo [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/ca5a68e597339d9fe4ce.js b/docs/_nuxt/js/ca5a68e597339d9fe4ce.js
new file mode 100644
index 0000000..fdfd096
--- /dev/null
+++ b/docs/_nuxt/js/ca5a68e597339d9fe4ce.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[17],{311:function(e,t,o){"use strict";o.r(t),t.default='# Leveraging Color to Enhance Data Visualization\n\nIn all the visual pathways in the data visualization, color is the first-way visual perception. Doing visual encoding and communication is an effective way. If used properly, color can sufficiently improve the visualization. In the following, we will look at some specific ideas to improve the visualization.\n\n## Sympathetic Resp [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/ca7b7a4ca6e695d6034f.js b/docs/_nuxt/js/ca7b7a4ca6e695d6034f.js
new file mode 100644
index 0000000..fb469a7
--- /dev/null
+++ b/docs/_nuxt/js/ca7b7a4ca6e695d6034f.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[103],{397:function(n,t,e){"use strict";e.r(t),t.default="# 动态排序柱状图\n\n## 基本设置\n\n动态排序柱状图是一种展示随时间变化的数据排名变化的图表，从 ECharts 5 开始内置支持。\n\n> 动态排序柱状图通常是横向的柱条，如果想要采用纵向的柱条，只要把本教程中的 X 轴和 Y 轴相反设置即可。\n\n1. `yAxis.realtimeSort` 设为 `true`，表示开启 Y 轴的动态排序效果\n2. `yAxis.inverse` 设为 `true`，表示 Y 轴从下往上是从小到大的排列\n3. `yAxis.animationDuration` 建议设为 `300`，表示第一次柱条排序动画的时长\n4. `yAxis.animationDurationUpdate` 建议设为 `300`，表示第一次后柱条排序动画的时长\n5. 如果想只显示前 _n_ 名，将 `yAxis.max` [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/cbe82648aedc4f9a120c.js b/docs/_nuxt/js/cbe82648aedc4f9a120c.js
new file mode 100644
index 0000000..ccf4729
--- /dev/null
+++ b/docs/_nuxt/js/cbe82648aedc4f9a120c.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[105],{399:function(n,w,o){"use strict";o.r(w),w.default="# 极坐标系柱状图\n"}}]);
\ No newline at end of file
diff --git a/docs/_nuxt/js/ce166bfe7d2bb2baf841.js b/docs/_nuxt/js/ce166bfe7d2bb2baf841.js
new file mode 100644
index 0000000..cae6b4e
--- /dev/null
+++ b/docs/_nuxt/js/ce166bfe7d2bb2baf841.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[28],{322:function(e,t,o){"use strict";o.r(t),t.default='# Pie Chart\n\nThe pie chart is mainly used to display the proportion of different categories compared with the total. The arc length of each sector in the figure means the proportion of the category. The sum of all categories is 100%.\n\n<iframe max-width="830" width="100%" height="400"\nsrc="https://gallery.echartsjs.com/view-lite.html?cid=xHySlBkIEM&v=1">\n</iframe>\n\nEven the [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/d07a3bda0c106bf5e048.js b/docs/_nuxt/js/d07a3bda0c106bf5e048.js
new file mode 100644
index 0000000..31d0ea4
--- /dev/null
+++ b/docs/_nuxt/js/d07a3bda0c106bf5e048.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[23],{317:function(e,t,n){"use strict";n.r(t),t.default='# Funnel Chart\n\nFunnel chart (inverted triangle chart) present data into several stages, every stage is part of the whole. The overall percentage of all stages is 100%. Similar to the bar chart, the funnel chart shows no specific data but the proportion related to the whole. Therefore, a funnel chart doesn\'t have an axis.\n\nThe funnel chart usually used to provide the simplifi [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/d102d828969a4f67bd92.js b/docs/_nuxt/js/d102d828969a4f67bd92.js
new file mode 100644
index 0000000..c8c4075
--- /dev/null
+++ b/docs/_nuxt/js/d102d828969a4f67bd92.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[66],{360:function(e,n,t){"use strict";t.r(n),n.default='# 寻求帮助\n\n## 技术问题\n\n### 确保现有文档等资料无法解决你的问题\n\nECharts 有非常大量的用户，所以你遇到过的问题，很可能别人在此之前也遇到并解决了。通过查看文档以及使用搜索引擎搜索关键字，可以帮助你自助地在第一时间解决问题，而不需要依赖社区的帮助。\n\n因此，在做其他操作前，请确保现有文档等资料无法解决你的问题。可以尝试查看或搜索的资料包括：\n\n- [API](${mainSitePath}/api.html)\n- [配置项手册](${mainSitePath}/option.html)：可以尝试使用搜索功能\n- 本手册的文章\n- [常见问题](${mainSitePath}/faq.html)\n- 在 [GitHub issue](https://github.com/apache/echarts/issue [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/d1ecca7f648bd2acc4c9.js b/docs/_nuxt/js/d1ecca7f648bd2acc4c9.js
new file mode 100644
index 0000000..2cf05a5
--- /dev/null
+++ b/docs/_nuxt/js/d1ecca7f648bd2acc4c9.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[94],{388:function(n,e,t){"use strict";t.r(e),e.default="# 数据集\n\n`数据集`（`dataset`）是专门用来管理数据的组件。虽然每个系列都可以在 `series.data` 中设置数据，但是从 ECharts4 支持 `数据集` 开始，更推荐使用 `数据集` 来管理数据。因为这样，数据可以被多个组件复用，也方便进行 “数据和其他配置” 分离的配置风格。毕竟，在运行时，数据是最常改变的，而其他配置大多并不会改变。\n\n## 在系列中设置数据\n\n如果数据设置在 `系列`（`series`）中，例如：\n\n```js live\noption = {\n xAxis: {\n type: 'category',\n data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']\n },\n yAxis: {} [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/d60af0f1d93626be040e.js b/docs/_nuxt/js/d60af0f1d93626be040e.js
new file mode 100644
index 0000000..82a1153
--- /dev/null
+++ b/docs/_nuxt/js/d60af0f1d93626be040e.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[113],{407:function(n,e,l){"use strict";l.r(e),e.default="# 基础饼图\n\n饼图主要用于表现不同类目的数据在总和中的占比。每个的弧度表示数据数量的比例。\n\n## 最简单的饼图\n\n饼图的配置和折线图、柱状图略有不同，不再需要配置坐标轴，而是把数据名称和值都写在系列中。以下是一个最简单的饼图的例子。\n\n```js live\noption = {\n series: [\n {\n type: 'pie',\n data: [\n {\n value: 335,\n name: '直接访问'\n },\n {\n value: 234,\n name: '联盟广告'\n },\n {\n value: 1548,\n [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/d8bb474fd0ab5b06b0dd.js b/docs/_nuxt/js/d8bb474fd0ab5b06b0dd.js
new file mode 100644
index 0000000..cd192a8
--- /dev/null
+++ b/docs/_nuxt/js/d8bb474fd0ab5b06b0dd.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[45],{339:function(n,t,e){"use strict";e.r(t),t.default="# Dynamic Sorting Bar Chart\n\n## Related Options\n\nBar race is a chart that shows changes in the ranking of data over time and it is supported by default sinde ECharts 5.\n\n> Bar race charts usually use horizontal bars. If you want to use vertical bars, just take the X axis and Y axis in this tutorial to the opposite.\n\n1. Set `yAxis.realtimeSort` to be `true` to enable bar ra [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/d98f238fcc283f222711.js b/docs/_nuxt/js/d98f238fcc283f222711.js
new file mode 100644
index 0000000..5c18c20
--- /dev/null
+++ b/docs/_nuxt/js/d98f238fcc283f222711.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[74],{368:function(n,e,t){"use strict";t.r(e),e.default="# 使用 Canvas 或者 SVG 渲染\n\n浏览器端图表库大多会选择 SVG 或者 Canvas 进行渲染。对于绘制图表来说，这两种技术往往是可替换的，效果相近。但是在一些场景中，他们的表现和能力又有一定差异。于是，对它们的选择取舍，就成为了一个一直存在的不易有标准答案的话题。\n\nECharts 从初始一直使用 Canvas 绘制图表。而 [ECharts v4.0](https://github.com/apache/echarts/releases) 发布了 SVG 渲染器，从而提供了一种新的选择。只须在初始化一个图表实例时，设置 [renderer 参数](${mainSitePath}/api.html#echarts.init) 为 `'canvas'` 或 `'svg'` 即可指定渲染器，比较方便。\n\n> SVG 和 Canvas [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/d9ae1847003efbc40617.js b/docs/_nuxt/js/d9ae1847003efbc40617.js
new file mode 100644
index 0000000..11491dd
--- /dev/null
+++ b/docs/_nuxt/js/d9ae1847003efbc40617.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[7],{422:function(e,t,r){"use strict";r.r(t);var n="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ_$",o=/[<>\b\f\n\r\t\0\u2028\u2029]/g,c=/^(?:do|if|in|for|int|let|new|try|var|byte|case|char|else|enum|goto|long|this|void|with|await|break|catch|class|const|final|float|short|super|throw|while|yield|delete|double|export|import|native|return|switch|throws|typeof|boolean|default|extends|finally|package|private|abstract|continue|debugge [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/db0e35482386339f1402.js b/docs/_nuxt/js/db0e35482386339f1402.js
new file mode 100644
index 0000000..e63bc2a
--- /dev/null
+++ b/docs/_nuxt/js/db0e35482386339f1402.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[118],{412:function(r,t,o){"use strict";o.r(t),t.default="# 在百度智能小程序中使用 ECharts\n\n[ECharts 图表](http://smartprogram.baidu.com/docs/develop/framework/echarts/) 以小程序动态库的形式提供了在百度智能小程序中使用 ECharts 的方式。\n\n[baidu-smart-app-echarts-demo](https://github.com/baidu-smart-app/baidu-smart-app-echarts-demo) 项目是使用该动态库的一个示例工程，可以作为参考，一般情况下不需要引入自己的项目。\n\n如有使用上的问题，可以在 [baidu-smart-app-echarts-demo/issues](https://github.com/baidu-smart-app/baidu-smart-ap [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/ddea68ea12171940b47d.js b/docs/_nuxt/js/ddea68ea12171940b47d.js
new file mode 100644
index 0000000..53b6d6a
--- /dev/null
+++ b/docs/_nuxt/js/ddea68ea12171940b47d.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[83],{377:function(t,e,h){"use strict";h.r(e),e.default='# 区域面积折线图\n\n\b 面积图又叫区域图，与折线图很相近，都可以用来展示随着连续时间的推移数据的变化趋势。区别在于，面积图在折线与类别数据的水平轴（X 轴）之间填充颜色或者纹理，形成一个面表示数据体积。相对于折线而言，被填充的区域可以更好的引起人们对总值趋势的注意，所以面积图主要用于传达趋势的大小，而不是确切的单个数据值。\n\n<iframe max-width="830" width="100%" height="400"\nsrc="https://gallery.echartsjs.com/view-lite.html?cid=area-simple"></iframe>\n\n## 面积图的使用建议\n\n1、面积图要用填充区域来展示数据，当图表上有多个图层时，要尽量确保数据不要重叠。如果无法避免重叠，可以通过将颜色和透明度设置为适当的值 [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/e07cf56d4536a8ea6683.js b/docs/_nuxt/js/e07cf56d4536a8ea6683.js
new file mode 100644
index 0000000..5163467
--- /dev/null
+++ b/docs/_nuxt/js/e07cf56d4536a8ea6683.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[24],{318:function(e,t,r){"use strict";r.r(t),t.default='# Gauger Chart\n\nThe Gauger Chart was also called a dial graph or speedometer graph. It is a form of a quasi-materialized display. It displays the data similar to the reading on a speedometer. The color of the gauger chart can be used to separate different categories of data. The gauger chart uses scale to mark data, pointers to indicating dimension, the angel of pointer to repre [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/eba07e8d9f5c5213982f.js b/docs/_nuxt/js/eba07e8d9f5c5213982f.js
new file mode 100644
index 0000000..ddf0d43
--- /dev/null
+++ b/docs/_nuxt/js/eba07e8d9f5c5213982f.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[99],{393:function(n,e,t){"use strict";t.r(e),e.default="# ECharts 中的样式简介\n\n本文主要是大略概述，用哪些方法，可以在 Apache ECharts<sup>TM</sup> 中设置样式，改变图形元素或者文字的颜色、明暗、大小等。\n\n> 为了让表述更通俗易懂，我们在这里用了“样式”这种可能不是很符合数据可视化思维的词\n\n本文介绍这几种方式，他们的功能范畴可能会有交叉（即同一种细节的效果可能可以用不同的方式实现），但是他们各有各的场景偏好。\n\n- 颜色主题（Theme）\n- 调色盘\n- 直接样式设置（itemStyle、lineStyle、areaStyle、label、...）\n- 视觉映射（visualMap）\n\n## 颜色主题（Theme）\n\n最简单的更改全局样式的方式，是直接采用颜色主题（theme）。例如，在 [示例集合](${websitePath}/exam [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/ec312af66d0bf5a5805d.js b/docs/_nuxt/js/ec312af66d0bf5a5805d.js
new file mode 100644
index 0000000..a9cce3d
--- /dev/null
+++ b/docs/_nuxt/js/ec312af66d0bf5a5805d.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[64],{358:function(n,e,t){"use strict";t.r(e),e.default="# Document Editing Guidelines\n\n## Adding a Markdown File\n\nAdd a markdown file to the `contents/zh/` (Chinese posts) or `contents/en/` (English posts) directories, up to three levels. Update the path and title information in `contents/zh/posts.yml` or `contents/en/posts.yml`.\n\nLowercase markdown file names.\n\n## Using Prettier to Automatically Format Code\n\nBefore you start [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/ecd372711c508a2f7d89.js b/docs/_nuxt/js/ecd372711c508a2f7d89.js
new file mode 100644
index 0000000..996169d
--- /dev/null
+++ b/docs/_nuxt/js/ecd372711c508a2f7d89.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[88],{382:function(t,n,e){"use strict";e.r(n),n.default='# 气泡图\n\n气泡图是显示变量之间相关性的一种图表。与散点图类似。在直角坐标系中显示数据的两个变量（ X 和 Y 轴）之间的关系，数据显示为点的集合。与散点图不同的是，气泡图是一个多变量图，它增加了第三个数值即气泡大小的变量，在气泡图中，较大的气泡表示较大的值。可以通过气泡的位置分布和大小比例，来分析数据的规律。\n\n<iframe max-width="830" width="100%" height="400"\nsrc="https://gallery.echartsjs.com/view-lite.html?cid=xHkRpZuY4z&v=1">\n</iframe>\n\n## 气泡图的使用建议\n\n1、当数据具有 3 个序列、特征及相关值，使用气泡图是一个不错的选择。如下图气泡的位置显示了代码提交的日期、具体的时间点，气泡的大小说明了 [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/ef74990218d38720625c.js b/docs/_nuxt/js/ef74990218d38720625c.js
new file mode 100644
index 0000000..05da90e
--- /dev/null
+++ b/docs/_nuxt/js/ef74990218d38720625c.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[116],{410:function(n,e,t){"use strict";t.r(e),e.default="# 基础散点图\n\n散点图，也是一种常见的图表类型。散点图由许多“点”组成，有时，这些点用来表示数据在坐标系中的位置（比如在笛卡尔坐标系下，表示数据在 x 轴和 y 轴上的坐标；在地图坐标系下，表示数据在地图上的某个位置等）；有时，这些点的大小、颜色等属性也可以映射到数据值，用以表现高维数据。\n\n## 最简单的散点图\n\n下面是一个横坐标为类目轴、纵坐标为数值轴的最简单的散点图配置：\n\n```js live\noption = {\n xAxis: {\n data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']\n },\n yAxis: {},\n series: [\n {\n type: 'scatter',\n data: [220, 18 [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/f07f18c8fd0d20152f05.js b/docs/_nuxt/js/f07f18c8fd0d20152f05.js
new file mode 100644
index 0000000..03695a3
--- /dev/null
+++ b/docs/_nuxt/js/f07f18c8fd0d20152f05.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[30],{324:function(e,t,h){"use strict";h.r(t),t.default='# Bubble Chart\n\nThe bubble chart shows the relevance between variables. Same as the scatter chart, data in bubble chart are set with points, it shows the relationship of data between two variables. The different part is that the scatter chart has several variables. It included the size of the bubble. A bigger bubble means a larger value. Users can analyze the law of data by the [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/f26ae8b1ac0f1f34e047.js b/docs/_nuxt/js/f26ae8b1ac0f1f34e047.js
new file mode 100644
index 0000000..3d2b10e
--- /dev/null
+++ b/docs/_nuxt/js/f26ae8b1ac0f1f34e047.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[125],{419:function(n,w,o){"use strict";o.r(w),w.default=""}}]);
\ No newline at end of file
diff --git a/docs/_nuxt/js/f79944fc11900e6499b3.js b/docs/_nuxt/js/f79944fc11900e6499b3.js
new file mode 100644
index 0000000..bb8831e
--- /dev/null
+++ b/docs/_nuxt/js/f79944fc11900e6499b3.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[3],{424:function(t,n,e){"use strict";e.r(n);var r=e(0),l=e.n(r).a.extend({mounted:function(){this.$router.push("get-started")}}),o=e(7),component=Object(o.a)(l,(function(){var t=this,n=t.$createElement,e=t._self._c||n;return e("div",{staticClass:"hidden"},[e("nuxt-link",{attrs:{to:"zh/get-started"}},[t._v("中文")]),t._v(" "),e("nuxt-link",{attrs:{to:"en/get-started"}},[t._v("English")])],1)}),[],!1,null,null,null);n.default=component.exp [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/f7a078db5c96656ebd36.js b/docs/_nuxt/js/f7a078db5c96656ebd36.js
new file mode 100644
index 0000000..4489d22
--- /dev/null
+++ b/docs/_nuxt/js/f7a078db5c96656ebd36.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[60],{354:function(n,w,o){"use strict";o.r(w),w.default=""}}]);
\ No newline at end of file
diff --git a/docs/_nuxt/js/f9d64c1e62249634040b.js b/docs/_nuxt/js/f9d64c1e62249634040b.js
new file mode 100644
index 0000000..04a46f6
--- /dev/null
+++ b/docs/_nuxt/js/f9d64c1e62249634040b.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[89],{383:function(n,t,e){"use strict";e.r(t),t.default='# 散点图\n\n散点图在直角坐标系显示数据的两个变量（X 和 Y 轴）之间的关系，数据显示为点的集合，适合用于在不考虑时间的情况下比较大量的数据点。散点图通常用来识别两个变量之间的相关性或用来观察他们的关系，从而发现某种趋势，对于查找异常值或理解数据分布也很有效。如下图某个班级学生身高和体重的分布状况。\n\n<iframe max-width="830" width="100%" height="400"\nsrc="https://gallery.echartsjs.com/view-lite.html?cid=xSkCyUwKNG&v=1">\n</iframe>\n\n散点图会显示不同类型的相关性，相关性即变量之间的关系。通常有正相关、负相关、不相关三种相关性。\n\n- 正相关：数据点从低 x、y 值的点到高 x、y 值，一个变量增加，另一个变 [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/fc3e1f080456fb1efd45.js b/docs/_nuxt/js/fc3e1f080456fb1efd45.js
new file mode 100644
index 0000000..4bdc254
--- /dev/null
+++ b/docs/_nuxt/js/fc3e1f080456fb1efd45.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[34],{328:function(n,w,o){"use strict";o.r(w),w.default=""}}]);
\ No newline at end of file
diff --git a/docs/_nuxt/js/fe78798ce71de8c07853.js b/docs/_nuxt/js/fe78798ce71de8c07853.js
new file mode 100644
index 0000000..c66c769
--- /dev/null
+++ b/docs/_nuxt/js/fe78798ce71de8c07853.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[51],{345:function(e,n,t){"use strict";t.r(n),n.default="# Basic Line Chart\n\n## Simple Example\n\nWe can use the following code to build a line chart which has x-axis as `category`, y-axis as `value`:\n\n```js live\noption = {\n xAxis: {\n type: 'category',\n data: ['A', 'B', 'C']\n },\n yAxis: {\n type: 'value'\n },\n series: [\n {\n data: [120, 200, 150],\n type: 'line'\n }\n ]\n};\n```\n\nIn this case [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/ff31f4f10ce2c0d5f0a3.js b/docs/_nuxt/js/ff31f4f10ce2c0d5f0a3.js
new file mode 100644
index 0000000..0a49339
--- /dev/null
+++ b/docs/_nuxt/js/ff31f4f10ce2c0d5f0a3.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[108],{402:function(n,e,t){"use strict";t.r(e),e.default="# 区域面积图\n\n区域面积图将折线到坐标轴的空间设置背景色，用区域面积表达数据。相比普通的折线图，区域面积图的视觉效果更加饱满丰富，在系列不多的场景下尤其适用。\n\n```js live\noption = {\n xAxis: {\n data: ['A', 'B', 'C', 'D', 'E']\n },\n yAxis: {},\n series: [\n {\n data: [10, 22, 28, 23, 19],\n type: 'line',\n areaStyle: {}\n },\n {\n data: [25, 14, 23, 35, 10],\n type: 'line',\n areaStyle: {\n color: [...]
\ No newline at end of file
diff --git a/docs/_nuxt/js/ff7fc48fdeb7a3abf378.js b/docs/_nuxt/js/ff7fc48fdeb7a3abf378.js
new file mode 100644
index 0000000..e10fba9
--- /dev/null
+++ b/docs/_nuxt/js/ff7fc48fdeb7a3abf378.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[63],{357:function(n,e,t){"use strict";t.r(e),e.default="# Rich Text\n\nRich text can be used in Apache ECharts<sup>TM</sup> labels of series, axis or other components since v3.7. Which supports:\n\n- Box styles (background, border, shadow, etc.), rotation, position of a text block can be specified.\n- Styles (color, font, width/height, background, shadow, etc.) and alignment can be customzied on fragments of text.\n- Image can be used [...]
\ No newline at end of file
diff --git a/docs/en/basics/download/index.html b/docs/en/basics/download/index.html
new file mode 100644
index 0000000..ebf5409
--- /dev/null
+++ b/docs/en/basics/download/index.html
@@ -0,0 +1,17 @@
+<!doctype html>
+<html data-n-head-ssr>
+ <head>
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/ec [...]
+ </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="ht [...]
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
+ <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 type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+ <script>var _hmt=_hmt||[];!function(){var e=document.createElement("script");e.src="https://hm.baidu.com/hm.js?54b918eee37cb8a7045f0fd0f0b24395";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)}()</script>
+ </body>
+</html>
diff --git a/docs/en/basics/help/index.html b/docs/en/basics/help/index.html
new file mode 100644
index 0000000..1c682db
--- /dev/null
+++ b/docs/en/basics/help/index.html
@@ -0,0 +1,17 @@
+<!doctype html>
+<html data-n-head-ssr>
+ <head>
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/ec [...]
+ </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="ht [...]
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
+ <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 type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+ <script>var _hmt=_hmt||[];!function(){var e=document.createElement("script");e.src="https://hm.baidu.com/hm.js?54b918eee37cb8a7045f0fd0f0b24395";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)}()</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..8b34324
--- /dev/null
+++ b/docs/en/basics/import/index.html
@@ -0,0 +1,121 @@
+<!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">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/ec [...]
+ </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="ht [...]
+
+<span class="token comment">// initialize the echarts instance</span>
+<span class="token keyword">var</span> myChart <span class="token operator">=</span> echarts<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'main'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token pun [...]
+<span class="token comment">// Draw the chart</span>
+myChart<span class="token punctuation">.</span><span class="token function">setOption</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+ title<span class="token operator">:</span> <span class="token punctuation">{</span>
+ text<span class="token operator">:</span> <span class="token string">'ECharts Getting Started Example'</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ tooltip<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
+ xAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'shirt'</span><span class="token punctuation">,</span> <span class="token string">'cardigan'</span><span class="token punctuation">,</span> <span class="token string">'chiffon'</span><span class="token punctuation">,</span> <span class="token string">'pants'</span><span class="token punctuation">,</span> <span class="token string">'heels'</span><span class="token punctuation"> [...]
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ yAxis<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
+ series<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ name<span class="token operator">:</span> <span class="token string">'sales'</span><span class="token punctuation">,</span>
+ type<span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">,</span> <span class="token number">36</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token n [...]
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" [...]
+<span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> echarts <span class="token keyword">from</span> <span class="token string">'echarts/core'</span><span class="token punctuation">;</span>
+<span class="token comment">// Import bar charts, all suffixed with Chart</span>
+<span class="token keyword">import</span> <span class="token punctuation">{</span> BarChart <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'echarts/charts'</span><span class="token punctuation">;</span>
+<span class="token comment">// Import the tooltip, title, rectangular coordinate system, dataset and transform components</span>
+<span class="token comment">// all suffixed with Component</span>
+<span class="token keyword">import</span> <span class="token punctuation">{</span>
+ TitleComponent<span class="token punctuation">,</span>
+ TooltipComponent<span class="token punctuation">,</span>
+ GridComponent<span class="token punctuation">,</span>
+ DatasetComponent<span class="token punctuation">,</span>
+ TransformComponent
+<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'echarts/components'</span><span class="token punctuation">;</span>
+<span class="token comment">// Features like Universal Transition and Label Layout</span>
+<span class="token keyword">import</span> <span class="token punctuation">{</span> LabelLayout<span class="token punctuation">,</span> UniversalTransition <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'echarts/features'</span><span class="token punctuation">;</span>
+<span class="token comment">// Import the Canvas renderer</span>
+<span class="token comment">// Note that introducing the CanvasRenderer or SVGRenderer is a required step</span>
+<span class="token keyword">import</span> <span class="token punctuation">{</span> CanvasRenderer <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'echarts/renderers'</span><span class="token punctuation">;</span>
+
+<span class="token comment">// Register the required components</span>
+echarts<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
+ TitleComponent<span class="token punctuation">,</span>
+ TooltipComponent<span class="token punctuation">,</span>
+ GridComponent<span class="token punctuation">,</span>
+ DatasetComponent<span class="token punctuation">,</span>
+ TransformComponent<span class="token punctuation">,</span>
+ BarChart<span class="token punctuation">,</span>
+ LabelLayout<span class="token punctuation">,</span>
+ UniversalTransition<span class="token punctuation">,</span>
+ CanvasRenderer
+<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+
+<span class="token comment">// The next step is the same as before, initialize the chart and set the configuration items</span>
+<span class="token keyword">var</span> myChart <span class="token operator">=</span> echarts<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'main'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token pun [...]
+myChart<span class="token punctuation">.</span><span class="token function">setOption</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+ <span class="token comment">// ...</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" [...]
+<span class="token keyword">import</span> <span class="token punctuation">{</span>
+ BarChart<span class="token punctuation">,</span>
+ <span class="token comment">// The series types are defined with the SeriesOption suffix</span>
+ BarSeriesOption<span class="token punctuation">,</span>
+ LineChart<span class="token punctuation">,</span>
+ LineSeriesOption
+<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'echarts/charts'</span><span class="token punctuation">;</span>
+<span class="token keyword">import</span> <span class="token punctuation">{</span>
+ TitleComponent<span class="token punctuation">,</span>
+ <span class="token comment">// The component types are defined with the suffix ComponentOption</span>
+ TitleComponentOption<span class="token punctuation">,</span>
+ GridComponent<span class="token punctuation">,</span>
+ GridComponentOption<span class="token punctuation">,</span>
+ <span class="token comment">// Dataset</span>
+ DatasetComponent<span class="token punctuation">,</span>
+ DatasetComponentOption<span class="token punctuation">,</span>
+ <span class="token comment">// Built-in transform (filter, sort)</span>
+ TransformComponent
+<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'echarts/components'</span><span class="token punctuation">;</span>
+<span class="token keyword">import</span> <span class="token punctuation">{</span> LabelLayout<span class="token punctuation">,</span> UniversalTransition <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'echarts/features'</span><span class="token punctuation">;</span>
+<span class="token keyword">import</span> <span class="token punctuation">{</span> CanvasRenderer <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'echarts/renderers'</span><span class="token punctuation">;</span>
+
+<span class="token comment">// Combine an Option type with only required components and charts via ComposeOption</span>
+<span class="token keyword">type</span> <span class="token class-name">ECOption</span> <span class="token operator">=</span> echarts<span class="token punctuation">.</span>ComposeOption<span class="token operator"><</span>
+ <span class="token operator">|</span> BarSeriesOption
+ <span class="token operator">|</span> LineSeriesOption
+ <span class="token operator">|</span> TitleComponentOption
+ <span class="token operator">|</span> GridComponentOption
+ <span class="token operator">|</span> DatasetComponentOption
+<span class="token operator">></span><span class="token punctuation">;</span>
+
+<span class="token comment">// Register the required components</span>
+echarts<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
+ TitleComponent<span class="token punctuation">,</span>
+ TooltipComponent<span class="token punctuation">,</span>
+ GridComponent<span class="token punctuation">,</span>
+ DatasetComponent<span class="token punctuation">,</span>
+ TransformComponent<span class="token punctuation">,</span>
+ BarChart<span class="token punctuation">,</span>
+ LabelLayout<span class="token punctuation">,</span>
+ UniversalTransition<span class="token punctuation">,</span>
+ CanvasRenderer
+<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+
+<span class="token keyword">const</span> option<span class="token operator">:</span> ECOption <span class="token operator">=</span> <span class="token punctuation">{</span>
+ <span class="token comment">// ...</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v [...]
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
+ <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 type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+ <script>var _hmt=_hmt||[];!function(){var e=document.createElement("script");e.src="https://hm.baidu.com/hm.js?54b918eee37cb8a7045f0fd0f0b24395";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)}()</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..f1bc02e
--- /dev/null
+++ b/docs/en/basics/inspiration/index.html
@@ -0,0 +1,17 @@
+<!doctype html>
+<html data-n-head-ssr>
+ <head>
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/ec [...]
+ </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="ht [...]
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
+ <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 type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+ <script>var _hmt=_hmt||[];!function(){var e=document.createElement("script");e.src="https://hm.baidu.com/hm.js?54b918eee37cb8a7045f0fd0f0b24395";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)}()</script>
+ </body>
+</html>
diff --git a/docs/en/basics/release-note/5-2-0/index.html b/docs/en/basics/release-note/5-2-0/index.html
new file mode 100644
index 0000000..76b91f1
--- /dev/null
+++ b/docs/en/basics/release-note/5-2-0/index.html
@@ -0,0 +1,606 @@
+<!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">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/ec [...]
+ </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="ht [...]
+ return [
+ {
+ value: Math.random(),
+ name: 'A'
+ },
+ {
+ value: Math.random(),
+ name: 'B'
+ },
+ {
+ value: Math.random(),
+ name: 'C'
+ }
+ ];
+}
+option = {
+ series: [
+ {
+ type: 'pie',
+ radius: [0, '50%'],
+ data: makeRandomData()
+ }
+ ]
+};
+
+setInterval(() => {
+ myChart.setOption({
+ series: {
+ data: makeRandomData()
+ }
+ });
+}, 2000);</textarea><pre data-testid="preview" class="prism-editor__editor"><span class="token keyword">function</span> <span class="token function">makeRandomData</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+ <span class="token keyword">return</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ value<span class="token operator">:</span> Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+ name<span class="token operator">:</span> <span class="token string">'A'</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ value<span class="token operator">:</span> Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+ name<span class="token operator">:</span> <span class="token string">'B'</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ value<span class="token operator">:</span> Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+ name<span class="token operator">:</span> <span class="token string">'C'</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span><span class="token punctuation">;</span>
+<span class="token punctuation">}</span>
+option <span class="token operator">=</span> <span class="token punctuation">{</span>
+ series<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'pie'</span><span class="token punctuation">,</span>
+ radius<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token string">'50%'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ data<span class="token operator">:</span> <span class="token function">makeRandomData</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span>
+
+<span class="token function">setInterval</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
+ myChart<span class="token punctuation">.</span><span class="token function">setOption</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+ series<span class="token operator">:</span> <span class="token punctuation">{</span>
+ data<span class="token operator">:</span> <span class="token function">makeRandomData</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">2000</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 [...]
+ dimensions: ['name', 'score'],
+ source: [
+ ['Hannah Krause', 314],
+ ['Zhao Qian', 351],
+ ['Jasmin Krause ', 287],
+ ['Li Lei', 219],
+ ['Karle Neumann', 253],
+ ['Mia Neumann', 165],
+ ['Böhm Fuchs', 318],
+ ['Han Meimei', 366]
+ ]
+};
+const pieOption = {
+ dataset: [dataset],
+ series: [
+ {
+ type: 'pie',
+ // associate the series to be animated by id
+ id: 'Score',
+ radius: [0, '50%'],
+ universalTransition: true,
+ animationDurationUpdate: 1000
+ }
+ ]
+};
+const barOption = {
+ dataset: [dataset],
+ xAxis: {
+ type: 'category'
+ },
+ yAxis: {},
+ series: [
+ {
+ type: 'bar',
+ // associate the series to be animated by id
+ id: 'Score',
+ // Each data will have a different color
+ colorBy: 'data',
+ encode: { x: 'name', y: 'score' },
+ universalTransition: true,
+ animationDurationUpdate: 1000
+ }
+ ]
+};
+
+option = barOption;
+
+setInterval(() => {
+ option = option === pieOption ? barOption : pieOption;
+ // Use the notMerge form to remove the axes
+ myChart.setOption(option, true);
+}, 2000);</textarea><pre data-testid="preview" class="prism-editor__editor"><span class="token keyword">const</span> dataset <span class="token operator">=</span> <span class="token punctuation">{</span>
+ dimensions<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'name'</span><span class="token punctuation">,</span> <span class="token string">'score'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ source<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">[</span><span class="token string">'Hannah Krause'</span><span class="token punctuation">,</span> <span class="token number">314</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Zhao Qian'</span><span class="token punctuation">,</span> <span class="token number">351</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Jasmin Krause '</span><span class="token punctuation">,</span> <span class="token number">287</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Li Lei'</span><span class="token punctuation">,</span> <span class="token number">219</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Karle Neumann'</span><span class="token punctuation">,</span> <span class="token number">253</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Mia Neumann'</span><span class="token punctuation">,</span> <span class="token number">165</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Böhm Fuchs'</span><span class="token punctuation">,</span> <span class="token number">318</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Han Meimei'</span><span class="token punctuation">,</span> <span class="token number">366</span><span class="token punctuation">]</span>
+ <span class="token punctuation">]</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span>
+<span class="token keyword">const</span> pieOption <span class="token operator">=</span> <span class="token punctuation">{</span>
+ dataset<span class="token operator">:</span> <span class="token punctuation">[</span>dataset<span class="token punctuation">]</span><span class="token punctuation">,</span>
+ series<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'pie'</span><span class="token punctuation">,</span>
+ <span class="token comment">// associate the series to be animated by id</span>
+ id<span class="token operator">:</span> <span class="token string">'Score'</span><span class="token punctuation">,</span>
+ radius<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token string">'50%'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ universalTransition<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
+ animationDurationUpdate<span class="token operator">:</span> <span class="token number">1000</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span>
+<span class="token keyword">const</span> barOption <span class="token operator">=</span> <span class="token punctuation">{</span>
+ dataset<span class="token operator">:</span> <span class="token punctuation">[</span>dataset<span class="token punctuation">]</span><span class="token punctuation">,</span>
+ xAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'category'</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ yAxis<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
+ series<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span>
+ <span class="token comment">// associate the series to be animated by id</span>
+ id<span class="token operator">:</span> <span class="token string">'Score'</span><span class="token punctuation">,</span>
+ <span class="token comment">// Each data will have a different color</span>
+ colorBy<span class="token operator">:</span> <span class="token string">'data'</span><span class="token punctuation">,</span>
+ encode<span class="token operator">:</span> <span class="token punctuation">{</span> x<span class="token operator">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span> y<span class="token operator">:</span> <span class="token string">'score'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ universalTransition<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
+ animationDurationUpdate<span class="token operator">:</span> <span class="token number">1000</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span>
+
+option <span class="token operator">=</span> barOption<span class="token punctuation">;</span>
+
+<span class="token function">setInterval</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
+ option <span class="token operator">=</span> option <span class="token operator">===</span> pieOption <span class="token operator">?</span> barOption <span class="token operator">:</span> pieOption<span class="token punctuation">;</span>
+ <span class="token comment">// Use the notMerge form to remove the axes</span>
+ myChart<span class="token punctuation">.</span><span class="token function">setOption</span><span class="token punctuation">(</span>option<span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">2000</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 [...]
+echarts.use([UniversalTransition]);
+</code></pre></blockquote> <h3 id="data-split-and-merge-animations" tabindex="-1">Data split and merge animations</h3> <p>In addition to the common update of data values, sometimes we also encounter data aggregation, drill-down and other updates after interactions, when we can not directly apply one-to-one transitions, but need to use more animation effects like splitting and merging to express the transformation of data.</p> <p>In order to be able to express the possible many-to-many co [...]
+ xAxis: {
+ data: ['Animals', 'Fruits', 'Cars']
+ },
+ yAxis: {},
+ dataGroupId: '',
+ animationDurationUpdate: 500,
+ series: {
+ type: 'bar',
+ id: 'sales',
+ data: [
+ {
+ value: 5,
+ groupId: 'animals'
+ },
+ {
+ value: 2,
+ groupId: 'fruits'
+ },
+ {
+ value: 4,
+ groupId: 'cars'
+ }
+ ],
+ universalTransition: {
+ enabled: true,
+ divideShape: 'clone'
+ }
+ }
+};
+
+const drilldownData = [
+ {
+ dataGroupId: 'animals',
+ data: [
+ ['Cats', 4],
+ ['Dogs', 2],
+ ['Cows', 1],
+ ['Sheep', 2],
+ ['Pigs', 1],
+ ['Cows', 1],
+ ['Sheep', 2],
+ ['Pigs', 1]
+ ]
+ },
+ {
+ dataGroupId: 'fruits',
+ data: [
+ ['Apples', 4],
+ ['Oranges', 2],
+ ['Oranges', 2]
+ ]
+ },
+ {
+ dataGroupId: 'cars',
+ data: [
+ ['Toyota', 4],
+ ['Opel', 2],
+ ['Volkswagen', 2],
+ ['Volkswagen', 2]
+ ]
+ }
+];
+
+myChart.on('click', event => {
+ if (event.data) {
+ const subData = drilldownData.find(data => {
+ return data.dataGroupId === event.data.groupId;
+ });
+ if (!subData) {
+ return;
+ }
+ myChart.setOption({
+ xAxis: {
+ data: subData.data.map(item => {
+ return item[0];
+ })
+ },
+ series: {
+ type: 'bar',
+ id: 'sales',
+ dataGroupId: subData.dataGroupId,
+ data: subData.data.map(item => {
+ return item[1];
+ }),
+ universalTransition: {
+ enabled: true,
+ divideShape: 'clone'
+ }
+ },
+ graphic: [
+ {
+ type: 'text',
+ left: 50,
+ top: 20,
+ style: {
+ text: 'Back',
+ fontSize: 18
+ },
+ onclick: function() {
+ myChart.setOption(option, true);
+ }
+ }
+ ]
+ });
+ }
+});</textarea><pre data-testid="preview" class="prism-editor__editor">option <span class="token operator">=</span> <span class="token punctuation">{</span>
+ xAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'Animals'</span><span class="token punctuation">,</span> <span class="token string">'Fruits'</span><span class="token punctuation">,</span> <span class="token string">'Cars'</span><span class="token punctuation">]</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ yAxis<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
+ dataGroupId<span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
+ animationDurationUpdate<span class="token operator">:</span> <span class="token number">500</span><span class="token punctuation">,</span>
+ series<span class="token operator">:</span> <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span>
+ id<span class="token operator">:</span> <span class="token string">'sales'</span><span class="token punctuation">,</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ value<span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span>
+ groupId<span class="token operator">:</span> <span class="token string">'animals'</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ value<span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span>
+ groupId<span class="token operator">:</span> <span class="token string">'fruits'</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ value<span class="token operator">:</span> <span class="token number">4</span><span class="token punctuation">,</span>
+ groupId<span class="token operator">:</span> <span class="token string">'cars'</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span><span class="token punctuation">,</span>
+ universalTransition<span class="token operator">:</span> <span class="token punctuation">{</span>
+ enabled<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
+ divideShape<span class="token operator">:</span> <span class="token string">'clone'</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span>
+
+<span class="token keyword">const</span> drilldownData <span class="token operator">=</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ dataGroupId<span class="token operator">:</span> <span class="token string">'animals'</span><span class="token punctuation">,</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">[</span><span class="token string">'Cats'</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Dogs'</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Cows'</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Sheep'</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Pigs'</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Cows'</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Sheep'</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Pigs'</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">]</span>
+ <span class="token punctuation">]</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ dataGroupId<span class="token operator">:</span> <span class="token string">'fruits'</span><span class="token punctuation">,</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">[</span><span class="token string">'Apples'</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Oranges'</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Oranges'</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">]</span>
+ <span class="token punctuation">]</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ dataGroupId<span class="token operator">:</span> <span class="token string">'cars'</span><span class="token punctuation">,</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">[</span><span class="token string">'Toyota'</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Opel'</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Volkswagen'</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Volkswagen'</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">]</span>
+ <span class="token punctuation">]</span>
+ <span class="token punctuation">}</span>
+<span class="token punctuation">]</span><span class="token punctuation">;</span>
+
+myChart<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token parameter">event</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
+ <span class="token keyword">if</span> <span class="token punctuation">(</span>event<span class="token punctuation">.</span>data<span class="token punctuation">)</span> <span class="token punctuation">{</span>
+ <span class="token keyword">const</span> subData <span class="token operator">=</span> drilldownData<span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token parameter">data</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
+ <span class="token keyword">return</span> data<span class="token punctuation">.</span>dataGroupId <span class="token operator">===</span> event<span class="token punctuation">.</span>data<span class="token punctuation">.</span>groupId<span class="token punctuation">;</span>
+ <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+ <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>subData<span class="token punctuation">)</span> <span class="token punctuation">{</span>
+ <span class="token keyword">return</span><span class="token punctuation">;</span>
+ <span class="token punctuation">}</span>
+ myChart<span class="token punctuation">.</span><span class="token function">setOption</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+ xAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
+ data<span class="token operator">:</span> subData<span class="token punctuation">.</span>data<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
+ <span class="token keyword">return</span> item<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
+ <span class="token punctuation">}</span><span class="token punctuation">)</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ series<span class="token operator">:</span> <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span>
+ id<span class="token operator">:</span> <span class="token string">'sales'</span><span class="token punctuation">,</span>
+ dataGroupId<span class="token operator">:</span> subData<span class="token punctuation">.</span>dataGroupId<span class="token punctuation">,</span>
+ data<span class="token operator">:</span> subData<span class="token punctuation">.</span>data<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
+ <span class="token keyword">return</span> item<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
+ <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+ universalTransition<span class="token operator">:</span> <span class="token punctuation">{</span>
+ enabled<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
+ divideShape<span class="token operator">:</span> <span class="token string">'clone'</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ graphic<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'text'</span><span class="token punctuation">,</span>
+ left<span class="token operator">:</span> <span class="token number">50</span><span class="token punctuation">,</span>
+ top<span class="token operator">:</span> <span class="token number">20</span><span class="token punctuation">,</span>
+ style<span class="token operator">:</span> <span class="token punctuation">{</span>
+ text<span class="token operator">:</span> <span class="token string">'Back'</span><span class="token punctuation">,</span>
+ fontSize<span class="token operator">:</span> <span class="token number">18</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token function-variable function">onclick</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+ myChart<span class="token punctuation">.</span><span class="token function">setOption</span><span class="token punctuation">(</span>option<span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span>
+ <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+ <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-lin [...]
+ xAxis: {
+ type: 'category',
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+ },
+ yAxis: {
+ type: 'value'
+ },
+ series: [
+ {
+ data: [120, 200, 150, 80, 70, 110, 130],
+ type: 'bar',
+ colorBy: 'data'
+ }
+ ]
+};</textarea><pre data-testid="preview" class="prism-editor__editor">option <span class="token operator">=</span> <span class="token punctuation">{</span>
+ xAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'category'</span><span class="token punctuation">,</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'Mon'</span><span class="token punctuation">,</span> <span class="token string">'Tue'</span><span class="token punctuation">,</span> <span class="token string">'Wed'</span><span class="token punctuation">,</span> <span class="token string">'Thu'</span><span class="token punctuation">,</span> <span class="token string">'Fri'</span><span class="token punctuation">,</span> <span [...]
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ yAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'value'</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ series<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">120</span><span class="token punctuation">,</span> <span class="token number">200</span><span class="token punctuation">,</span> <span class="token number">150</span><span class="token punctuation">,</span> <span class="token number">80</span><span class="token punctuation">,</span> <span class="token number">70</span><span class="token punctuation">,</span> <span class="tok [...]
+ type<span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span>
+ colorBy<span class="token operator">:</span> <span class="token string">'data'</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" str [...]
+ series: {
+ type: 'pie',
+ colorBy: 'series',
+ radius: [0, '50%'],
+ itemStyle: {
+ borderColor: '#fff',
+ borderWidth: 1
+ },
+ data: [
+ {
+ value: 335,
+ name: 'Direct Visit'
+ },
+ {
+ value: 234,
+ name: 'Union Ad'
+ },
+ {
+ value: 1548,
+ name: 'Search Engine'
+ }
+ ]
+ }
+};</textarea><pre data-testid="preview" class="prism-editor__editor">option <span class="token operator">=</span> <span class="token punctuation">{</span>
+ series<span class="token operator">:</span> <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'pie'</span><span class="token punctuation">,</span>
+ colorBy<span class="token operator">:</span> <span class="token string">'series'</span><span class="token punctuation">,</span>
+ radius<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token string">'50%'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ itemStyle<span class="token operator">:</span> <span class="token punctuation">{</span>
+ borderColor<span class="token operator">:</span> <span class="token string">'#fff'</span><span class="token punctuation">,</span>
+ borderWidth<span class="token operator">:</span> <span class="token number">1</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ value<span class="token operator">:</span> <span class="token number">335</span><span class="token punctuation">,</span>
+ name<span class="token operator">:</span> <span class="token string">'Direct Visit'</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ value<span class="token operator">:</span> <span class="token number">234</span><span class="token punctuation">,</span>
+ name<span class="token operator">:</span> <span class="token string">'Union Ad'</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ value<span class="token operator">:</span> <span class="token number">1548</span><span class="token punctuation">,</span>
+ name<span class="token operator">:</span> <span class="token string">'Search Engine'</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span>
+ <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" str [...]
+ angleAxis: {
+ show: false,
+ max: 10
+ },
+ radiusAxis: {
+ show: false,
+ type: 'category',
+ data: ['AAA', 'BBB', 'CCC', 'DDD']
+ },
+ polar: {},
+ series: [
+ {
+ type: 'bar',
+ data: [3, 4, 5, 6],
+ colorBy: 'data',
+ roundCap: true,
+ label: {
+ show: true,
+ // Try changing it to 'insideStart'
+ position: 'start',
+ formatter: '{b}'
+ },
+ coordinateSystem: 'polar'
+ }
+ ]
+};</textarea><pre data-testid="preview" class="prism-editor__editor">option <span class="token operator">=</span> <span class="token punctuation">{</span>
+ angleAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
+ show<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
+ max<span class="token operator">:</span> <span class="token number">10</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ radiusAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
+ show<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
+ type<span class="token operator">:</span> <span class="token string">'category'</span><span class="token punctuation">,</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'AAA'</span><span class="token punctuation">,</span> <span class="token string">'BBB'</span><span class="token punctuation">,</span> <span class="token string">'CCC'</span><span class="token punctuation">,</span> <span class="token string">'DDD'</span><span class="token punctuation">]</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ polar<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
+ series<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">6</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ colorBy<span class="token operator">:</span> <span class="token string">'data'</span><span class="token punctuation">,</span>
+ roundCap<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
+ label<span class="token operator">:</span> <span class="token punctuation">{</span>
+ show<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
+ <span class="token comment">// Try changing it to 'insideStart'</span>
+ position<span class="token operator">:</span> <span class="token string">'start'</span><span class="token punctuation">,</span>
+ formatter<span class="token operator">:</span> <span class="token string">'{b}'</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ coordinateSystem<span class="token operator">:</span> <span class="token string">'polar'</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" str [...]
+ series: [
+ {
+ type: 'pie',
+ data: [],
+ // showEmptyCircle: false,
+ emptyCircleStyle: {
+ // change the style to empty circle
+ color: 'transparent',
+ borderColor: '#ddd',
+ borderWidth: 1
+ }
+ }
+ ]
+};</textarea><pre data-testid="preview" class="prism-editor__editor">option <span class="token operator">=</span> <span class="token punctuation">{</span>
+ series<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'pie'</span><span class="token punctuation">,</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token comment">// showEmptyCircle: false,</span>
+ emptyCircleStyle<span class="token operator">:</span> <span class="token punctuation">{</span>
+ <span class="token comment">// change the style to empty circle</span>
+ color<span class="token operator">:</span> <span class="token string">'transparent'</span><span class="token punctuation">,</span>
+ borderColor<span class="token operator">:</span> <span class="token string">'#ddd'</span><span class="token punctuation">,</span>
+ borderWidth<span class="token operator">:</span> <span class="token number">1</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" str [...]
+ <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">index</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>i<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+<span class="token keyword">const</span> option <span class="token operator">=</span> <span class="token punctuation">{</span>
+ xAxis<span class="token operator">:</span> <span class="token punctuation">{</span> type<span class="token operator">:</span> <span class="token string">'category'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ yAxis<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
+ dataset<span class="token operator">:</span> <span class="token punctuation">{</span>
+ <span class="token comment">// dimension: ['date', . . indices],</span>
+ source<span class="token operator">:</span> Array<span class="token punctuation">.</span><span class="token function">from</span><span class="token punctuation">(</span><span class="token function">Array</span><span class="token punctuation">(</span><span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">_<span class="token punctuation">,</span> i</span>< [...]
+ <span class="token keyword">return</span> <span class="token punctuation">{</span>
+ date<span class="token operator">:</span> i<span class="token punctuation">,</span>
+ <span class="token operator">...</span> <span class="token punctuation">.</span>indices<span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">item<span class="token punctuation">,</span> next</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
+ item<span class="token punctuation">[</span>next<span class="token punctuation">]</span> <span class="token operator">=</span> Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token number">100</span><span class="token punctuation">;</span>
+ <span class="token keyword">return</span> item<span class="token punctuation">;</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span>
+ <span class="token punctuation">}</span><span class="token punctuation">;</span>
+ <span class="token punctuation">}</span><span class="token punctuation">)</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ series<span class="token operator">:</span> indices<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">index</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
+ <span class="token keyword">return</span> <span class="token punctuation">{</span> type<span class="token operator">:</span> <span class="token string">'line'</span><span class="token punctuation">,</span> name<span class="token operator">:</span> index <span class="token punctuation">}</span><span class="token punctuation">;</span>
+ <span class="token punctuation">}</span><span class="token punctuation">)</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v [...]
+This optimization ensure that memory does not explode as the dataset dimensions and series grow, significantly improving initialization performance in this extreme scenario. The rendering time for the example just described has also been reduced to an acceptable 300 ms or less.</p> <p>It is not just this high-dimensional scenario that benefits from this optimization. When using a dataset with large amount of data, multiple series only process the data once because of data sharing, so it [...]
+ type<span class="token operator">:</span> <span class="token string">'custom'</span><span class="token punctuation">,</span>
+ <span class="token function">renderItem</span><span class="token punctuation">(</span>params<span class="token punctuation">)</span> <span class="token punctuation">{</span>
+ <span class="token keyword">return</span> <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'group'</span><span class="token punctuation">,</span>
+ <span class="token comment">// The group type uses children to store children of other types</span>
+ children<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'circle'</span><span class="token punctuation">,</span>
+ <span class="token comment">// circle has the following configurable shape attributes</span>
+ shape<span class="token operator">:</span> <span class="token punctuation">{</span> r<span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span> cx<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> cy<span class="token operator">:</span> <span class="token number">0</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token comment">// Configurable styles</span>
+ style<span class="token operator">:</span> <span class="token punctuation">{</span> fill<span class="token operator">:</span> <span class="token string">'red'</span> <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'rect'</span><span class="token punctuation">,</span>
+ <span class="token comment">// rect has the following configurable shape properties</span>
+ shape<span class="token operator">:</span> <span class="token punctuation">{</span> x<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> y<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> width<span class="token operator">:</span> <span class="token number">100</span><span class="token punctuation">,</span> height<span class="token operator">:</span> <sp [...]
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'path'</span><span class="token punctuation">,</span>
+ <span class="token comment">// Custom path shapes</span>
+ shape<span class="token operator">:</span> <span class="token punctuation">{</span> d<span class="token operator">:</span> <span class="token string">'...'</span> <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span>
+ <span class="token punctuation">}</span><span class="token punctuation">;</span>
+ <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v [...]
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
+ <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 type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+ <script>var _hmt=_hmt||[];!function(){var e=document.createElement("script");e.src="https://hm.baidu.com/hm.js?54b918eee37cb8a7045f0fd0f0b24395";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)}()</script>
+ </body>
+</html>
diff --git a/docs/en/basics/release-note/v5-feature/index.html b/docs/en/basics/release-note/v5-feature/index.html
new file mode 100644
index 0000000..c5619b6
--- /dev/null
+++ b/docs/en/basics/release-note/v5-feature/index.html
@@ -0,0 +1,21 @@
+<!doctype html>
+<html data-n-head-ssr>
+ <head>
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/ec [...]
+ </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="ht [...]
+echarts<span class="token punctuation">.</span><span class="token function">registerLocale</span><span class="token punctuation">(</span><span class="token string">'DE'</span><span class="token punctuation">,</span> lang<span class="token punctuation">)</span><span class="token punctuation">;</span>
+echarts<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span>DomElement<span class="token punctuation">,</span> <span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
+ locale<span class="token operator">:</span> <span class="token string">'DE'</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" [...]
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
+ <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 type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+ <script>var _hmt=_hmt||[];!function(){var e=document.createElement("script");e.src="https://hm.baidu.com/hm.js?54b918eee37cb8a7045f0fd0f0b24395";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)}()</script>
+ </body>
+</html>
diff --git a/docs/en/basics/release-note/v5-upgrade-guide/index.html b/docs/en/basics/release-note/v5-upgrade-guide/index.html
new file mode 100644
index 0000000..aeceb6d
--- /dev/null
+++ b/docs/en/basics/release-note/v5-upgrade-guide/index.html
@@ -0,0 +1,90 @@
+<!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">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/ec [...]
+ </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="ht [...]
+ color<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token string">'#c23531'</span><span class="token punctuation">,</span>
+ <span class="token string">'#2f4554'</span><span class="token punctuation">,</span>
+ <span class="token string">'#61a0a8'</span><span class="token punctuation">,</span>
+ <span class="token string">'#d48265'</span><span class="token punctuation">,</span>
+ <span class="token string">'#91c7ae'</span><span class="token punctuation">,</span>
+ <span class="token string">'#749f83'</span><span class="token punctuation">,</span>
+ <span class="token string">'#ca8622'</span><span class="token punctuation">,</span>
+ <span class="token string">'#bda29a'</span><span class="token punctuation">,</span>
+ <span class="token string">'#6e7074'</span><span class="token punctuation">,</span>
+ <span class="token string">'#546570'</span><span class="token punctuation">,</span>
+ <span class="token string">'#c4ccd3'</span>
+ <span class="token punctuation">]</span>
+ <span class="token comment">// ...</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" [...]
+ color<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token string">'#c23531'</span><span class="token punctuation">,</span>
+ <span class="token string">'#2f4554'</span><span class="token punctuation">,</span>
+ <span class="token string">'#61a0a8'</span><span class="token punctuation">,</span>
+ <span class="token string">'#d48265'</span><span class="token punctuation">,</span>
+ <span class="token string">'#91c7ae'</span><span class="token punctuation">,</span>
+ <span class="token string">'#749f83'</span><span class="token punctuation">,</span>
+ <span class="token string">'#ca8622'</span><span class="token punctuation">,</span>
+ <span class="token string">'#bda29a'</span><span class="token punctuation">,</span>
+ <span class="token string">'#6e7074'</span><span class="token punctuation">,</span>
+ <span class="token string">'#546570'</span><span class="token punctuation">,</span>
+ <span class="token string">'#c4ccd3'</span>
+ <span class="token punctuation">]</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span>
+<span class="token keyword">var</span> chart <span class="token operator">=</span> echarts<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span>dom<span class="token punctuation">,</span> themeEC4<span class="token punctuation">)</span><span class="token punctuation">;</span>
+chart<span class="token punctuation">.</span><span class="token function">setOption</span><span class="token punctuation">(</span><span class="token comment">/* ... */</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill= [...]
+<span class="token comment">// Or import core module</span>
+<span class="token keyword">import</span> echarts <span class="token keyword">from</span> <span class="token string">'echarts/lib/echarts'</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data [...]
+<span class="token comment">// Or</span>
+<span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> echarts <span class="token keyword">from</span> <span class="token string">'echarts/lib/echarts'</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg [...]
+<span class="token keyword">import</span> <span class="token punctuation">{</span> BarChart <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'echarts/charts'</span><span class="token punctuation">;</span>
+<span class="token keyword">import</span> <span class="token punctuation">{</span> GridComponent <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'echarts/components'</span><span class="token punctuation">;</span>
+<span class="token comment">// Note that the Canvas renderer is no longer included by default and needs to be imported explictly, or import the SVGRenderer if you need to use the SVG rendering mode</span>
+<span class="token keyword">import</span> <span class="token punctuation">{</span> CanvasRenderer <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'echarts/renderers'</span><span class="token punctuation">;</span>
+
+echarts<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span><span class="token punctuation">[</span>BarChart<span class="token punctuation">,</span> GridComponent<span class="token punctuation">,</span> CanvasRenderer<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www [...]
+<span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'echarts/lib/chart/bar'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+<span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'echarts/lib/component/grid'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" st [...]
+<span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'echarts/lib/chart/bar'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+<span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'echarts/lib/chart/line'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke [...]
+echarts<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>AriaComponent<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke=" [...]
+<ul><li>Changes:
+<ul><li><code>position: [number, number]</code> are changed to <code>x: number</code>/<code>y: number</code>.</li> <li><code>scale: [number, number]</code> are changed to <code>scaleX: number</code>/<code>scaleY: number</code>.</li> <li><code>origin: [number, number]</code> are changed to <code>originX: number</code>/<code>originY: number</code>.</li></ul></li> <li>The <code>position</code>, <code>scale</code> and <code>origin</code> are still supported but deprecated.</li> <li>It effect [...]
+<ul><li>In the <code>graphic</code> components: the declarations of each element.</li> <li>In <code>custom series</code>: the declarations of each element in the return of <code>renderItem</code>.</li> <li>Directly use zrender graphic elements.</li></ul></li></ul></li> <li>Text related props on graphic elements are changed:
+<ul><li>Changes:
+<ul><li>The declaration of attached text (or say, rect text) are changed.
+<ul><li>Prop <code>style.text</code> are deprecated in elements except <code>Text</code>. Instead, Prop set <code>textContent</code> and <code>textConfig</code> are provided to support more powerful capabilities.</li> <li>These related props at the left part below are deprecated. Use the right part below instead.
+<ul><li>textPosition => textConfig.position</li> <li>textOffset => textConfig.offset</li> <li>textRotation => textConfig.rotation</li> <li>textDistance => textConfig.distance</li></ul></li></ul></li> <li>The props at the left part below are deprecated in <code>style</code> and <code>style.rich.?</code>. Use the props at the right part below instead.
+<ul><li>textFill => fill</li> <li>textStroke => stroke</li> <li>textFont => font</li> <li>textStrokeWidth => lineWidth</li> <li>textAlign => align</li> <li>textVerticalAlign => verticalAlign);</li> <li>textLineHeight =></li> <li>textWidth => width</li> <li>textHeight => hight</li> <li>textBackgroundColor => backgroundColor</li> <li>textPadding => padding</li> <li>textBorderColor => borderColor</li> <li>textBorderWidth => borderWidth</li> <li>textBorderRadius => borderRadius</li> <li>text [...]
+<ul><li>textShadowColor</li> <li>textShadowBlur</li> <li>textShadowOffsetX</li> <li>textShadowOffsetY</li></ul></li></ul></li> <li>It effects these places:
+<ul><li>In the <code>graphic</code> components: the declarations of each element. [compat, but not accurately the same in some complicated cases.]</li> <li>In <code>custom series</code>: the declarations of each element in the return of <code>renderItem</code>. [compat, but not accurately the same in some complicated cases].</li> <li>Directly use zrender API to create graphic elements. [No compat, breaking change].</li></ul></li></ul></li> <li>API on chart instance:
+<ul><li><code>chart.one(...)</code> is deprecated.</li></ul></li> <li><code>label</code>:
+<ul><li>In props <code>color</code>, <code>textBorderColor</code>, <code>backgroundColor</code> and <code>borderColor</code>, the value <code>'auto'</code> is deprecated. Use the value <code>'inherit'</code> instead.</li></ul></li> <li><code>hoverAnimation</code>:
+<ul><li>option <code>series.hoverAnimation</code> is deprecated. Use <code>series.emphasis.scale</code> instead.</li></ul></li> <li><code>line series</code>:
+<ul><li>option <code>series.clipOverflow</code> is deprecated. Use <code>series.clip</code> instead.</li></ul></li> <li><code>custom series</code>:
+<ul><li>In <code>renderItem</code>, the <code>api.style(...)</code> and <code>api.styleEmphasis(...)</code> are deprecated. Because it is not really necessary and hard to ensure backward compatibility. Users can fetch system designated visual by <code>api.visual(...)</code>.</li></ul></li> <li><code>sunburst series</code>:
+<ul><li>Action type <code>highlight</code> is deprecated. Use <code>sunburstHighlight</code> instead.</li> <li>Action type <code>downplay</code> is deprecated. Use <code>sunburstUnhighlight</code> instead.</li> <li>option <code>series.downplay</code> is deprecated. Use <code>series.blur</code> instead.</li> <li>option <code>series.highlightPolicy</code> is deprecated. Use <code>series.emphasis.focus</code> instead.</li></ul></li> <li><code>pie series</code>:
+<ul><li>The action type at the left part below are deprecated. Use the right part instead:
+<ul><li><code>pieToggleSelect</code> => <code>toggleSelect</code></li> <li><code>pieSelect</code> => <code>select</code></li> <li><code>pieUnSelect</code> => <code>unselect</code></li></ul></li> <li>The event type at the left part below are deprecated. Use the right part instead:
+<ul><li><code>pieselectchanged</code> => <code>selectchanged</code></li> <li><code>pieselected</code> => <code>selected</code></li> <li><code>pieunselected</code> => <code>unselected</code></li></ul></li> <li>option <code>series.label.margin</code> is deprecated. Use <code>series.label.edgeDistance</code> instead.</li> <li>option <code>series.clockWise</code> is deprecated. Use <code>series.clockwise</code> instead.</li> <li>option <code>series.hoverOffset</code> is deprecated. Use <code [...]
+<ul><li>The action type at the left part below are deprecated. Use the right part instead:
+<ul><li><code>mapToggleSelect</code> => <code>toggleSelect</code></li> <li><code>mapSelect</code> => <code>select</code></li> <li><code>mapUnSelect</code> => <code>unselect</code></li></ul></li> <li>The event type at the left part below are deprecated. Use the right part instead:
+<ul><li><code>mapselectchanged</code> => <code>selectchanged</code></li> <li><code>mapselected</code> => <code>selected</code></li> <li><code>mapunselected</code> => <code>unselected</code></li></ul></li> <li>option <code>series.mapType</code> is deprecated. Use <code>series.map</code> instead.</li> <li>option <code>series.mapLocation</code> is deprecated.</li></ul></li> <li><code>graph series</code>:
+<ul><li>option <code>series.focusNodeAdjacency</code> is deprecated. Use <code>series.emphasis: { focus: 'adjacency'}</code> instead.</li></ul></li> <li><code>gauge series</code>:
+<ul><li>option <code>series.clockWise</code> is deprecated. Use <code>series.clockwise</code> instead.</li> <li>option <code>series.hoverOffset</code> is deprecated. Use <code>series.emphasis.scaleSize</code> instead.</li></ul></li> <li><code>dataZoom component</code>:
+<ul><li>option <code>dataZoom.handleIcon</code> need prefix <code>path://</code> if using SVGPath.</li></ul></li> <li><code>radar</code>:
+<ul><li>option <code>radar.name</code> is deprecated. Use <code>radar.axisName</code> instead.</li> <li>option <code>radar.nameGap</code> is deprecated. Use <code>radar.axisNameGap</code> instead.</li></ul></li> <li>Parse and format:
+<ul><li><code>echarts.format.formatTime</code> is deprecated. Use <code>echarts.time.format</code> instead.</li> <li><code>echarts.number.parseDate</code> is deprecated. Use <code>echarts.time.parse</code> instead.</li> <li><code>echarts.format.getTextRect</code> is deprecated.</li></ul></li></ul></article></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/con [...]
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
+ <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 type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+ <script>var _hmt=_hmt||[];!function(){var e=document.createElement("script");e.src="https://hm.baidu.com/hm.js?54b918eee37cb8a7045f0fd0f0b24395";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)}()</script>
+ </body>
+</html>
diff --git a/docs/en/best-practices/aria/index.html b/docs/en/best-practices/aria/index.html
new file mode 100644
index 0000000..31a27c2
--- /dev/null
+++ b/docs/en/best-practices/aria/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">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/ec [...]
+ </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="ht [...]
+ aria<span class="token operator">:</span> <span class="token punctuation">{</span>
+ show<span class="token operator">:</span> <span class="token boolean">true</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ title<span class="token operator">:</span> <span class="token punctuation">{</span>
+ text<span class="token operator">:</span> <span class="token string">'Referrer of a User'</span><span class="token punctuation">,</span>
+ x<span class="token operator">:</span> <span class="token string">'center'</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ series<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ name<span class="token operator">:</span> <span class="token string">'Referrer'</span><span class="token punctuation">,</span>
+ type<span class="token operator">:</span> <span class="token string">'pie'</span><span class="token punctuation">,</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span> value<span class="token operator">:</span> <span class="token number">335</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">'Direct Visit'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span> value<span class="token operator">:</span> <span class="token number">310</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">'Email Marketing'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span> value<span class="token operator">:</span> <span class="token number">234</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">'Union Ad'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span> value<span class="token operator">:</span> <span class="token number">135</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">'Video Ad'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span> value<span class="token operator">:</span> <span class="token number">1548</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">'Search Engine'</span> <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v [...]
+</code></pre> <p>The default language will be used based on the language pack (default Chinese), or you can customize the template using the configuration item.</p> <h3 id="overall-description-modification" tabindex="-1">Overall Description Modification</h3> <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 [...]
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
+ <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 type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+ <script>var _hmt=_hmt||[];!function(){var e=document.createElement("script");e.src="https://hm.baidu.com/hm.js?54b918eee37cb8a7045f0fd0f0b24395";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)}()</script>
+ </body>
+</html>
diff --git a/docs/en/best-practices/canvas-vs-svg/index.html b/docs/en/best-practices/canvas-vs-svg/index.html
new file mode 100644
index 0000000..42d0bfd
--- /dev/null
+++ b/docs/en/best-practices/canvas-vs-svg/index.html
@@ -0,0 +1,28 @@
+<!doctype html>
+<html data-n-head-ssr>
+ <head>
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/ec [...]
+ </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="ht [...]
+<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/">LiquidFill chart</a> [...]
+<span class="token comment">// You can use only the renderers you need</span>
+<span class="token keyword">import</span> <span class="token punctuation">{</span> SVGRenderer<span class="token punctuation">,</span> CanvasRenderer <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'echarts/renderers'</span><span class="token punctuation">;</span>
+
+echarts<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span><span class="token punctuation">[</span>SVGRenderer<span class="token punctuation">,</span> CanvasRenderer<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" s [...]
+<span class="token keyword">var</span> chart <span class="token operator">=</span> echarts<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span>containerDom<span class="token punctuation">,</span> <span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> renderer<span class="token operator">:</span> <span class="token string">'canvas'</span> <span class="token [...]
+<span class="token comment">// Equivalent to.</span>
+<span class="token keyword">var</span> chart <span class="token operator">=</span> echarts<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span>containerDom<span class="token punctuation">)</span><span class="token punctuation">;</span>
+
+<span class="token comment">// using the SVG renderer</span>
+<span class="token keyword">var</span> chart <span class="token operator">=</span> echarts<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span>containerDom<span class="token punctuation">,</span> <span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> renderer<span class="token operator">:</span> <span class="token string">'svg'</span> <span class="token pun [...]
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
+ <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 type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+ <script>var _hmt=_hmt||[];!function(){var e=document.createElement("script");e.src="https://hm.baidu.com/hm.js?54b918eee37cb8a7045f0fd0f0b24395";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)}()</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..906135f
--- /dev/null
+++ b/docs/en/concepts/axis/index.html
@@ -0,0 +1,290 @@
+<!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">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/ec [...]
+ </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="ht [...]
+ xAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
+ <span class="token comment">// ...</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ yAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
+ <span class="token comment">// ...</span>
+ <span class="token punctuation">}</span>
+ <span class="token comment">// ...</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v [...]
+ xAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'time'</span><span class="token punctuation">,</span>
+ name<span class="token operator">:</span> <span class="token string">'Sales Time'</span>
+ <span class="token comment">// ...</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ yAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'value'</span><span class="token punctuation">,</span>
+ name<span class="token operator">:</span> <span class="token string">'Sales Quantity'</span>
+ <span class="token comment">// ...</span>
+ <span class="token punctuation">}</span>
+ <span class="token comment">// ...</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v [...]
+ xAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'time'</span><span class="token punctuation">,</span>
+ name<span class="token operator">:</span> <span class="token string">'Sales Time'</span>
+ <span class="token comment">// ...</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ yAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'value'</span><span class="token punctuation">,</span>
+ name<span class="token operator">:</span> <span class="token string">'Sales Quantity'</span>
+ <span class="token comment">// ...</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ dataZoom<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
+ <span class="token comment">// ...</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v [...]
+ xAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'time'</span><span class="token punctuation">,</span>
+ name<span class="token operator">:</span> <span class="token string">'Sales Time'</span>
+ <span class="token comment">// ...</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ yAxis<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'value'</span><span class="token punctuation">,</span>
+ name<span class="token operator">:</span> <span class="token string">'Sales Quantity'</span>
+ <span class="token comment">// ...</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'value'</span><span class="token punctuation">,</span>
+ name<span class="token operator">:</span> <span class="token string">'Sales Price'</span>
+ <span class="token comment">// ...</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span>
+ <span class="token comment">// ...</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v [...]
+ xAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
+ axisLine<span class="token operator">:</span> <span class="token punctuation">{</span>
+ symbol<span class="token operator">:</span> <span class="token string">'arrow'</span><span class="token punctuation">,</span>
+ lineStyle<span class="token operator">:</span> <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'dashed'</span>
+ <span class="token comment">// ...</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span>
+ <span class="token comment">// ...</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ yAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
+ axisLine<span class="token operator">:</span> <span class="token punctuation">{</span>
+ symbol<span class="token operator">:</span> <span class="token string">'arrow'</span><span class="token punctuation">,</span>
+ lineStyle<span class="token operator">:</span> <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'dashed'</span>
+ <span class="token comment">// ...</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span>
+ <span class="token comment">// ...</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v [...]
+ xAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
+ axisTick<span class="token operator">:</span> <span class="token punctuation">{</span>
+ length<span class="token operator">:</span> <span class="token number">6</span><span class="token punctuation">,</span>
+ lineStyle<span class="token operator">:</span> <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'dashed'</span>
+ <span class="token comment">// ...</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span>
+ <span class="token comment">// ...</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ yAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
+ axisTick<span class="token operator">:</span> <span class="token punctuation">{</span>
+ length<span class="token operator">:</span> <span class="token number">6</span><span class="token punctuation">,</span>
+ lineStyle<span class="token operator">:</span> <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'dashed'</span>
+ <span class="token comment">// ...</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span>
+ <span class="token comment">// ...</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v [...]
+ xAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
+ axisLabel<span class="token operator">:</span> <span class="token punctuation">{</span>
+ formatter<span class="token operator">:</span> <span class="token string">'{value} kg'</span><span class="token punctuation">,</span>
+ align<span class="token operator">:</span> <span class="token string">'center'</span>
+ <span class="token comment">// ...</span>
+ <span class="token punctuation">}</span>
+ <span class="token comment">// ...</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ yAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
+ axisLabel<span class="token operator">:</span> <span class="token punctuation">{</span>
+ formatter<span class="token operator">:</span> <span class="token string">'{value} ¥'</span><span class="token punctuation">,</span>
+ align<span class="token operator">:</span> <span class="token string">'center'</span>
+ <span class="token comment">// ...</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span>
+ <span class="token comment">// ...</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v [...]
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: { type: 'cross' }
+ },
+ legend: {},
+ xAxis: [
+ {
+ type: 'category',
+ axisTick: {
+ alignWithLabel: true
+ },
+ axisLabel: {
+ rotate: 30
+ },
+ data: [
+ 'January',
+ 'February',
+ 'March',
+ 'April',
+ 'May',
+ 'June',
+ 'July',
+ 'August',
+ 'September',
+ 'October',
+ 'November',
+ 'December'
+ ]
+ }
+ ],
+ yAxis: [
+ {
+ type: 'value',
+ name: 'Precipitation',
+ min: 0,
+ max: 250,
+ position: 'right',
+ axisLabel: {
+ formatter: '{value} ml'
+ }
+ },
+ {
+ type: 'value',
+ name: 'Temperature',
+ min: 0,
+ max: 25,
+ position: 'left',
+ axisLabel: {
+ formatter: '{value} °C'
+ }
+ }
+ ],
+ series: [
+ {
+ name: 'Precipitation',
+ type: 'bar',
+ yAxisIndex: 0,
+ data: [6, 32, 70, 86, 68.7, 100.7, 125.6, 112.2, 78.7, 48.8, 36.0, 19.3]
+ },
+ {
+ name: 'Temperature',
+ type: 'line',
+ smooth: true,
+ yAxisIndex: 1,
+ data: [
+ 6.0,
+ 10.2,
+ 10.3,
+ 11.5,
+ 10.3,
+ 13.2,
+ 14.3,
+ 16.4,
+ 18.0,
+ 16.5,
+ 12.0,
+ 5.2
+ ]
+ }
+ ]
+};</textarea><pre data-testid="preview" class="prism-editor__editor">option <span class="token operator">=</span> <span class="token punctuation">{</span>
+ tooltip<span class="token operator">:</span> <span class="token punctuation">{</span>
+ trigger<span class="token operator">:</span> <span class="token string">'axis'</span><span class="token punctuation">,</span>
+ axisPointer<span class="token operator">:</span> <span class="token punctuation">{</span> type<span class="token operator">:</span> <span class="token string">'cross'</span> <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ legend<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
+ xAxis<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'category'</span><span class="token punctuation">,</span>
+ axisTick<span class="token operator">:</span> <span class="token punctuation">{</span>
+ alignWithLabel<span class="token operator">:</span> <span class="token boolean">true</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ axisLabel<span class="token operator">:</span> <span class="token punctuation">{</span>
+ rotate<span class="token operator">:</span> <span class="token number">30</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token string">'January'</span><span class="token punctuation">,</span>
+ <span class="token string">'February'</span><span class="token punctuation">,</span>
+ <span class="token string">'March'</span><span class="token punctuation">,</span>
+ <span class="token string">'April'</span><span class="token punctuation">,</span>
+ <span class="token string">'May'</span><span class="token punctuation">,</span>
+ <span class="token string">'June'</span><span class="token punctuation">,</span>
+ <span class="token string">'July'</span><span class="token punctuation">,</span>
+ <span class="token string">'August'</span><span class="token punctuation">,</span>
+ <span class="token string">'September'</span><span class="token punctuation">,</span>
+ <span class="token string">'October'</span><span class="token punctuation">,</span>
+ <span class="token string">'November'</span><span class="token punctuation">,</span>
+ <span class="token string">'December'</span>
+ <span class="token punctuation">]</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span><span class="token punctuation">,</span>
+ yAxis<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'value'</span><span class="token punctuation">,</span>
+ name<span class="token operator">:</span> <span class="token string">'Precipitation'</span><span class="token punctuation">,</span>
+ min<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
+ max<span class="token operator">:</span> <span class="token number">250</span><span class="token punctuation">,</span>
+ position<span class="token operator">:</span> <span class="token string">'right'</span><span class="token punctuation">,</span>
+ axisLabel<span class="token operator">:</span> <span class="token punctuation">{</span>
+ formatter<span class="token operator">:</span> <span class="token string">'{value} ml'</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'value'</span><span class="token punctuation">,</span>
+ name<span class="token operator">:</span> <span class="token string">'Temperature'</span><span class="token punctuation">,</span>
+ min<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
+ max<span class="token operator">:</span> <span class="token number">25</span><span class="token punctuation">,</span>
+ position<span class="token operator">:</span> <span class="token string">'left'</span><span class="token punctuation">,</span>
+ axisLabel<span class="token operator">:</span> <span class="token punctuation">{</span>
+ formatter<span class="token operator">:</span> <span class="token string">'{value} °C'</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span><span class="token punctuation">,</span>
+ series<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ name<span class="token operator">:</span> <span class="token string">'Precipitation'</span><span class="token punctuation">,</span>
+ type<span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span>
+ yAxisIndex<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">6</span><span class="token punctuation">,</span> <span class="token number">32</span><span class="token punctuation">,</span> <span class="token number">70</span><span class="token punctuation">,</span> <span class="token number">86</span><span class="token punctuation">,</span> <span class="token number">68.7</span><span class="token punctuation">,</span> <span class="token [...]
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ name<span class="token operator">:</span> <span class="token string">'Temperature'</span><span class="token punctuation">,</span>
+ type<span class="token operator">:</span> <span class="token string">'line'</span><span class="token punctuation">,</span>
+ smooth<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
+ yAxisIndex<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token number">6.0</span><span class="token punctuation">,</span>
+ <span class="token number">10.2</span><span class="token punctuation">,</span>
+ <span class="token number">10.3</span><span class="token punctuation">,</span>
+ <span class="token number">11.5</span><span class="token punctuation">,</span>
+ <span class="token number">10.3</span><span class="token punctuation">,</span>
+ <span class="token number">13.2</span><span class="token punctuation">,</span>
+ <span class="token number">14.3</span><span class="token punctuation">,</span>
+ <span class="token number">16.4</span><span class="token punctuation">,</span>
+ <span class="token number">18.0</span><span class="token punctuation">,</span>
+ <span class="token number">16.5</span><span class="token punctuation">,</span>
+ <span class="token number">12.0</span><span class="token punctuation">,</span>
+ <span class="token number">5.2</span>
+ <span class="token punctuation">]</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" str [...]
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
+ <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 type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+ <script>var _hmt=_hmt||[];!function(){var e=document.createElement("script");e.src="https://hm.baidu.com/hm.js?54b918eee37cb8a7045f0fd0f0b24395";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)}()</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..504722a
--- /dev/null
+++ b/docs/en/concepts/chart-size/index.html
@@ -0,0 +1,45 @@
+<!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">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/ec [...]
+ </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="ht [...]
+<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text/javascript<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
+ var myChart = echarts.init(document.getElementById('main'));
+<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap= [...]
+<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text/javascript<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
+ var myChart = echarts.init(document.getElementById('main'), null, {
+ width: 600,
+ height: 400
+ });
+<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap= [...]
+ <span class="token selector">#main,
+ html,
+ body</span> <span class="token punctuation">{</span>
+ <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
+ <span class="token punctuation">}</span>
+ <span class="token selector">#main</span> <span class="token punctuation">{</span>
+ <span class="token property">height</span><span class="token punctuation">:</span> 400px<span class="token punctuation">;</span>
+ <span class="token punctuation">}</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>main<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuati [...]
+<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text/javascript<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
+ var myChart = echarts.init(document.getElementById('main'));
+ window.onresize = function() {
+ myChart.resize();
+ };
+<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap= [...]
+ width<span class="token operator">:</span> <span class="token number">800</span><span class="token punctuation">,</span>
+ height<span class="token operator">:</span> <span class="token number">400</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" [...]
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
+ <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 type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+ <script>var _hmt=_hmt||[];!function(){var e=document.createElement("script");e.src="https://hm.baidu.com/hm.js?54b918eee37cb8a7045f0fd0f0b24395";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)}()</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..735ee12
--- /dev/null
+++ b/docs/en/concepts/data-transform/index.html
@@ -0,0 +1,614 @@
+<!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">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/ec [...]
+ </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="ht [...]
+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" tabindex="-1">Get Started to Data Transform</h2> <p>In echarts, data transform [...]
+ dataset: [
+ {
+ // This dataset is on `datasetIndex: 0`.
+ source: [
+ ['Product', 'Sales', 'Price', 'Year'],
+ ['Cake', 123, 32, 2011],
+ ['Cereal', 231, 14, 2011],
+ ['Tofu', 235, 5, 2011],
+ ['Dumpling', 341, 25, 2011],
+ ['Biscuit', 122, 29, 2011],
+ ['Cake', 143, 30, 2012],
+ ['Cereal', 201, 19, 2012],
+ ['Tofu', 255, 7, 2012],
+ ['Dumpling', 241, 27, 2012],
+ ['Biscuit', 102, 34, 2012],
+ ['Cake', 153, 28, 2013],
+ ['Cereal', 181, 21, 2013],
+ ['Tofu', 395, 4, 2013],
+ ['Dumpling', 281, 31, 2013],
+ ['Biscuit', 92, 39, 2013],
+ ['Cake', 223, 29, 2014],
+ ['Cereal', 211, 17, 2014],
+ ['Tofu', 345, 3, 2014],
+ ['Dumpling', 211, 35, 2014],
+ ['Biscuit', 72, 24, 2014]
+ ]
+ // id: 'a'
+ },
+ {
+ // This dataset is on `datasetIndex: 1`.
+ // A `transform` is configured to indicate that the
+ // final data of this dataset is transformed via this
+ // transform function.
+ transform: {
+ type: 'filter',
+ config: { dimension: 'Year', value: 2011 }
+ }
+ // There can be optional properties `fromDatasetIndex` or `fromDatasetId`
+ // to indicate that where is the input data of the transform from.
+ // For example, `fromDatasetIndex: 0` specify the input data is from
+ // the dataset on `datasetIndex: 0`, or `fromDatasetId: 'a'` specify the
+ // input data is from the dataset having `id: 'a'`.
+ // [DEFAULT_RULE]
+ // If both `fromDatasetIndex` and `fromDatasetId` are omitted,
+ // `fromDatasetIndex: 0` are used by default.
+ },
+ {
+ // This dataset is on `datasetIndex: 2`.
+ // Similarly, if neither `fromDatasetIndex` nor `fromDatasetId` is
+ // specified, `fromDatasetIndex: 0` is used by default
+ transform: {
+ // The "filter" transform filters and gets data items only match
+ // the given condition in property `config`.
+ type: 'filter',
+ // Transforms has a property `config`. In this "filter" transform,
+ // the `config` specify the condition that each result data item
+ // should be satisfied. In this case, this transform get all of
+ // the data items that the value on dimension "Year" equals to 2012.
+ config: { dimension: 'Year', value: 2012 }
+ }
+ },
+ {
+ // This dataset is on `datasetIndex: 3`
+ transform: {
+ type: 'filter',
+ config: { dimension: 'Year', value: 2013 }
+ }
+ }
+ ],
+ series: [
+ {
+ type: 'pie',
+ radius: 50,
+ center: ['25%', '50%'],
+ // In this case, each "pie" series reference to a dataset that has
+ // the result of its "filter" transform.
+ datasetIndex: 1
+ },
+ {
+ type: 'pie',
+ radius: 50,
+ center: ['50%', '50%'],
+ datasetIndex: 2
+ },
+ {
+ type: 'pie',
+ radius: 50,
+ center: ['75%', '50%'],
+ datasetIndex: 3
+ }
+ ]
+};</textarea><pre data-testid="preview" class="prism-editor__editor"><span class="token keyword">var</span> option <span class="token operator">=</span> <span class="token punctuation">{</span>
+ dataset<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ <span class="token comment">// This dataset is on `datasetIndex: 0`.</span>
+ source<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">[</span><span class="token string">'Product'</span><span class="token punctuation">,</span> <span class="token string">'Sales'</span><span class="token punctuation">,</span> <span class="token string">'Price'</span><span class="token punctuation">,</span> <span class="token string">'Year'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Cake'</span><span class="token punctuation">,</span> <span class="token number">123</span><span class="token punctuation">,</span> <span class="token number">32</span><span class="token punctuation">,</span> <span class="token number">2011</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Cereal'</span><span class="token punctuation">,</span> <span class="token number">231</span><span class="token punctuation">,</span> <span class="token number">14</span><span class="token punctuation">,</span> <span class="token number">2011</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Tofu'</span><span class="token punctuation">,</span> <span class="token number">235</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">2011</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Dumpling'</span><span class="token punctuation">,</span> <span class="token number">341</span><span class="token punctuation">,</span> <span class="token number">25</span><span class="token punctuation">,</span> <span class="token number">2011</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Biscuit'</span><span class="token punctuation">,</span> <span class="token number">122</span><span class="token punctuation">,</span> <span class="token number">29</span><span class="token punctuation">,</span> <span class="token number">2011</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Cake'</span><span class="token punctuation">,</span> <span class="token number">143</span><span class="token punctuation">,</span> <span class="token number">30</span><span class="token punctuation">,</span> <span class="token number">2012</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Cereal'</span><span class="token punctuation">,</span> <span class="token number">201</span><span class="token punctuation">,</span> <span class="token number">19</span><span class="token punctuation">,</span> <span class="token number">2012</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Tofu'</span><span class="token punctuation">,</span> <span class="token number">255</span><span class="token punctuation">,</span> <span class="token number">7</span><span class="token punctuation">,</span> <span class="token number">2012</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Dumpling'</span><span class="token punctuation">,</span> <span class="token number">241</span><span class="token punctuation">,</span> <span class="token number">27</span><span class="token punctuation">,</span> <span class="token number">2012</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Biscuit'</span><span class="token punctuation">,</span> <span class="token number">102</span><span class="token punctuation">,</span> <span class="token number">34</span><span class="token punctuation">,</span> <span class="token number">2012</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Cake'</span><span class="token punctuation">,</span> <span class="token number">153</span><span class="token punctuation">,</span> <span class="token number">28</span><span class="token punctuation">,</span> <span class="token number">2013</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Cereal'</span><span class="token punctuation">,</span> <span class="token number">181</span><span class="token punctuation">,</span> <span class="token number">21</span><span class="token punctuation">,</span> <span class="token number">2013</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Tofu'</span><span class="token punctuation">,</span> <span class="token number">395</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">2013</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Dumpling'</span><span class="token punctuation">,</span> <span class="token number">281</span><span class="token punctuation">,</span> <span class="token number">31</span><span class="token punctuation">,</span> <span class="token number">2013</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Biscuit'</span><span class="token punctuation">,</span> <span class="token number">92</span><span class="token punctuation">,</span> <span class="token number">39</span><span class="token punctuation">,</span> <span class="token number">2013</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Cake'</span><span class="token punctuation">,</span> <span class="token number">223</span><span class="token punctuation">,</span> <span class="token number">29</span><span class="token punctuation">,</span> <span class="token number">2014</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Cereal'</span><span class="token punctuation">,</span> <span class="token number">211</span><span class="token punctuation">,</span> <span class="token number">17</span><span class="token punctuation">,</span> <span class="token number">2014</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Tofu'</span><span class="token punctuation">,</span> <span class="token number">345</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">2014</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Dumpling'</span><span class="token punctuation">,</span> <span class="token number">211</span><span class="token punctuation">,</span> <span class="token number">35</span><span class="token punctuation">,</span> <span class="token number">2014</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Biscuit'</span><span class="token punctuation">,</span> <span class="token number">72</span><span class="token punctuation">,</span> <span class="token number">24</span><span class="token punctuation">,</span> <span class="token number">2014</span><span class="token punctuation">]</span>
+ <span class="token punctuation">]</span>
+ <span class="token comment">// id: 'a'</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ <span class="token comment">// This dataset is on `datasetIndex: 1`.</span>
+ <span class="token comment">// A `transform` is configured to indicate that the</span>
+ <span class="token comment">// final data of this dataset is transformed via this</span>
+ <span class="token comment">// transform function.</span>
+ transform<span class="token operator">:</span> <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'filter'</span><span class="token punctuation">,</span>
+ config<span class="token operator">:</span> <span class="token punctuation">{</span> dimension<span class="token operator">:</span> <span class="token string">'Year'</span><span class="token punctuation">,</span> value<span class="token operator">:</span> <span class="token number">2011</span> <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span>
+ <span class="token comment">// There can be optional properties `fromDatasetIndex` or `fromDatasetId`</span>
+ <span class="token comment">// to indicate that where is the input data of the transform from.</span>
+ <span class="token comment">// For example, `fromDatasetIndex: 0` specify the input data is from</span>
+ <span class="token comment">// the dataset on `datasetIndex: 0`, or `fromDatasetId: 'a'` specify the</span>
+ <span class="token comment">// input data is from the dataset having `id: 'a'`.</span>
+ <span class="token comment">// [DEFAULT_RULE]</span>
+ <span class="token comment">// If both `fromDatasetIndex` and `fromDatasetId` are omitted,</span>
+ <span class="token comment">// `fromDatasetIndex: 0` are used by default.</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ <span class="token comment">// This dataset is on `datasetIndex: 2`.</span>
+ <span class="token comment">// Similarly, if neither `fromDatasetIndex` nor `fromDatasetId` is</span>
+ <span class="token comment">// specified, `fromDatasetIndex: 0` is used by default</span>
+ transform<span class="token operator">:</span> <span class="token punctuation">{</span>
+ <span class="token comment">// The "filter" transform filters and gets data items only match</span>
+ <span class="token comment">// the given condition in property `config`.</span>
+ type<span class="token operator">:</span> <span class="token string">'filter'</span><span class="token punctuation">,</span>
+ <span class="token comment">// Transforms has a property `config`. In this "filter" transform,</span>
+ <span class="token comment">// the `config` specify the condition that each result data item</span>
+ <span class="token comment">// should be satisfied. In this case, this transform get all of</span>
+ <span class="token comment">// the data items that the value on dimension "Year" equals to 2012.</span>
+ config<span class="token operator">:</span> <span class="token punctuation">{</span> dimension<span class="token operator">:</span> <span class="token string">'Year'</span><span class="token punctuation">,</span> value<span class="token operator">:</span> <span class="token number">2012</span> <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ <span class="token comment">// This dataset is on `datasetIndex: 3`</span>
+ transform<span class="token operator">:</span> <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'filter'</span><span class="token punctuation">,</span>
+ config<span class="token operator">:</span> <span class="token punctuation">{</span> dimension<span class="token operator">:</span> <span class="token string">'Year'</span><span class="token punctuation">,</span> value<span class="token operator">:</span> <span class="token number">2013</span> <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span><span class="token punctuation">,</span>
+ series<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'pie'</span><span class="token punctuation">,</span>
+ radius<span class="token operator">:</span> <span class="token number">50</span><span class="token punctuation">,</span>
+ center<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'25%'</span><span class="token punctuation">,</span> <span class="token string">'50%'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token comment">// In this case, each "pie" series reference to a dataset that has</span>
+ <span class="token comment">// the result of its "filter" transform.</span>
+ datasetIndex<span class="token operator">:</span> <span class="token number">1</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'pie'</span><span class="token punctuation">,</span>
+ radius<span class="token operator">:</span> <span class="token number">50</span><span class="token punctuation">,</span>
+ center<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'50%'</span><span class="token punctuation">,</span> <span class="token string">'50%'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ datasetIndex<span class="token operator">:</span> <span class="token number">2</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'pie'</span><span class="token punctuation">,</span>
+ radius<span class="token operator">:</span> <span class="token number">50</span><span class="token punctuation">,</span>
+ center<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'75%'</span><span class="token punctuation">,</span> <span class="token string">'50%'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ datasetIndex<span class="token operator">:</span> <span class="token number">3</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" str [...]
+ dataset<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ source<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token comment">// The original data</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ <span class="token comment">// Declare transforms in an array to pipe multiple transforms,</span>
+ <span class="token comment">// which makes them execute one by one and take the output of</span>
+ <span class="token comment">// the previous transform as the input of the next transform.</span>
+ transform<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'filter'</span><span class="token punctuation">,</span>
+ config<span class="token operator">:</span> <span class="token punctuation">{</span> dimension<span class="token operator">:</span> <span class="token string">'Product'</span><span class="token punctuation">,</span> value<span class="token operator">:</span> <span class="token string">'Tofu'</span> <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'sort'</span><span class="token punctuation">,</span>
+ config<span class="token operator">:</span> <span class="token punctuation">{</span> dimension<span class="token operator">:</span> <span class="token string">'Year'</span><span class="token punctuation">,</span> order<span class="token operator">:</span> <span class="token string">'desc'</span> <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span><span class="token punctuation">,</span>
+ series<span class="token operator">:</span> <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'pie'</span><span class="token punctuation">,</span>
+ <span class="token comment">// Display the result of the piped transform.</span>
+ datasetIndex<span class="token operator">:</span> <span class="token number">1</span>
+ <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v [...]
+ dataset<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ <span class="token comment">// Original source data.</span>
+ source<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ transform<span class="token operator">:</span> <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'boxplot'</span>
+ <span class="token punctuation">}</span>
+ <span class="token comment">// After this "boxplot transform" two result data generated:</span>
+ <span class="token comment">// result[0]: The boxplot data</span>
+ <span class="token comment">// result[1]: The outlier data</span>
+ <span class="token comment">// By default, when series or other dataset reference this dataset,</span>
+ <span class="token comment">// only result[0] can be visited.</span>
+ <span class="token comment">// If we need to visit result[1], we have to use another dataset</span>
+ <span class="token comment">// as follows:</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ <span class="token comment">// This extra dataset references the dataset above, and retrieves</span>
+ <span class="token comment">// the result[1] as its own data. Thus series or other dataset can</span>
+ <span class="token comment">// reference this dataset to get the data from result[1].</span>
+ fromDatasetIndex<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
+ fromTransformResult<span class="token operator">:</span> <span class="token number">1</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span><span class="token punctuation">,</span>
+ xAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'category'</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ yAxis<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
+ series<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ name<span class="token operator">:</span> <span class="token string">'boxplot'</span><span class="token punctuation">,</span>
+ type<span class="token operator">:</span> <span class="token string">'boxplot'</span><span class="token punctuation">,</span>
+ <span class="token comment">// Reference the data from result[0].</span>
+ datasetIndex<span class="token operator">:</span> <span class="token number">1</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ name<span class="token operator">:</span> <span class="token string">'outlier'</span><span class="token punctuation">,</span>
+ type<span class="token operator">:</span> <span class="token string">'scatter'</span><span class="token punctuation">,</span>
+ <span class="token comment">// Reference the data from result[1].</span>
+ datasetIndex<span class="token operator">:</span> <span class="token number">2</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v [...]
+ fromDatasetIndex<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
+ fromTransformResult<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
+ transform<span class="token operator">:</span> <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'sort'</span><span class="token punctuation">,</span>
+ config<span class="token operator">:</span> <span class="token punctuation">{</span> dimension<span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> order<span class="token operator">:</span> <span class="token string">'desc'</span> <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span>
+<span class="token punctuation">}</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 [...]
+ dataset<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ source<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ transform<span class="token operator">:</span> <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'filter'</span><span class="token punctuation">,</span>
+ config<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token comment">// The result of this transform will be printed</span>
+ <span class="token comment">// in dev tool via `console.log`.</span>
+ print<span class="token operator">:</span> <span class="token boolean">true</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v [...]
+ dataset: [
+ {
+ source: [
+ ['Product', 'Sales', 'Price', 'Year'],
+ ['Cake', 123, 32, 2011],
+ ['Latte', 231, 14, 2011],
+ ['Tofu', 235, 5, 2011],
+ ['Milk Tee', 341, 25, 2011],
+ ['Porridge', 122, 29, 2011],
+ ['Cake', 143, 30, 2012],
+ ['Latte', 201, 19, 2012],
+ ['Tofu', 255, 7, 2012],
+ ['Milk Tee', 241, 27, 2012],
+ ['Porridge', 102, 34, 2012],
+ ['Cake', 153, 28, 2013],
+ ['Latte', 181, 21, 2013],
+ ['Tofu', 395, 4, 2013],
+ ['Milk Tee', 281, 31, 2013],
+ ['Porridge', 92, 39, 2013],
+ ['Cake', 223, 29, 2014],
+ ['Latte', 211, 17, 2014],
+ ['Tofu', 345, 3, 2014],
+ ['Milk Tee', 211, 35, 2014],
+ ['Porridge', 72, 24, 2014]
+ ]
+ },
+ {
+ transform: {
+ type: 'filter',
+ config: { dimension: 'Year', '=': 2011 }
+ // The config is the "condition" of this filter.
+ // This transform traverse the source data and
+ // and retrieve all the items that the "Year"
+ // is `2011`.
+ }
+ }
+ ],
+ series: {
+ type: 'pie',
+ datasetIndex: 1
+ }
+};</textarea><pre data-testid="preview" class="prism-editor__editor">option <span class="token operator">=</span> <span class="token punctuation">{</span>
+ dataset<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ source<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">[</span><span class="token string">'Product'</span><span class="token punctuation">,</span> <span class="token string">'Sales'</span><span class="token punctuation">,</span> <span class="token string">'Price'</span><span class="token punctuation">,</span> <span class="token string">'Year'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Cake'</span><span class="token punctuation">,</span> <span class="token number">123</span><span class="token punctuation">,</span> <span class="token number">32</span><span class="token punctuation">,</span> <span class="token number">2011</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Latte'</span><span class="token punctuation">,</span> <span class="token number">231</span><span class="token punctuation">,</span> <span class="token number">14</span><span class="token punctuation">,</span> <span class="token number">2011</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Tofu'</span><span class="token punctuation">,</span> <span class="token number">235</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">2011</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Milk Tee'</span><span class="token punctuation">,</span> <span class="token number">341</span><span class="token punctuation">,</span> <span class="token number">25</span><span class="token punctuation">,</span> <span class="token number">2011</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Porridge'</span><span class="token punctuation">,</span> <span class="token number">122</span><span class="token punctuation">,</span> <span class="token number">29</span><span class="token punctuation">,</span> <span class="token number">2011</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Cake'</span><span class="token punctuation">,</span> <span class="token number">143</span><span class="token punctuation">,</span> <span class="token number">30</span><span class="token punctuation">,</span> <span class="token number">2012</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Latte'</span><span class="token punctuation">,</span> <span class="token number">201</span><span class="token punctuation">,</span> <span class="token number">19</span><span class="token punctuation">,</span> <span class="token number">2012</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Tofu'</span><span class="token punctuation">,</span> <span class="token number">255</span><span class="token punctuation">,</span> <span class="token number">7</span><span class="token punctuation">,</span> <span class="token number">2012</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Milk Tee'</span><span class="token punctuation">,</span> <span class="token number">241</span><span class="token punctuation">,</span> <span class="token number">27</span><span class="token punctuation">,</span> <span class="token number">2012</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Porridge'</span><span class="token punctuation">,</span> <span class="token number">102</span><span class="token punctuation">,</span> <span class="token number">34</span><span class="token punctuation">,</span> <span class="token number">2012</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Cake'</span><span class="token punctuation">,</span> <span class="token number">153</span><span class="token punctuation">,</span> <span class="token number">28</span><span class="token punctuation">,</span> <span class="token number">2013</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Latte'</span><span class="token punctuation">,</span> <span class="token number">181</span><span class="token punctuation">,</span> <span class="token number">21</span><span class="token punctuation">,</span> <span class="token number">2013</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Tofu'</span><span class="token punctuation">,</span> <span class="token number">395</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">2013</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Milk Tee'</span><span class="token punctuation">,</span> <span class="token number">281</span><span class="token punctuation">,</span> <span class="token number">31</span><span class="token punctuation">,</span> <span class="token number">2013</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Porridge'</span><span class="token punctuation">,</span> <span class="token number">92</span><span class="token punctuation">,</span> <span class="token number">39</span><span class="token punctuation">,</span> <span class="token number">2013</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Cake'</span><span class="token punctuation">,</span> <span class="token number">223</span><span class="token punctuation">,</span> <span class="token number">29</span><span class="token punctuation">,</span> <span class="token number">2014</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Latte'</span><span class="token punctuation">,</span> <span class="token number">211</span><span class="token punctuation">,</span> <span class="token number">17</span><span class="token punctuation">,</span> <span class="token number">2014</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Tofu'</span><span class="token punctuation">,</span> <span class="token number">345</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">2014</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Milk Tee'</span><span class="token punctuation">,</span> <span class="token number">211</span><span class="token punctuation">,</span> <span class="token number">35</span><span class="token punctuation">,</span> <span class="token number">2014</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Porridge'</span><span class="token punctuation">,</span> <span class="token number">72</span><span class="token punctuation">,</span> <span class="token number">24</span><span class="token punctuation">,</span> <span class="token number">2014</span><span class="token punctuation">]</span>
+ <span class="token punctuation">]</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ transform<span class="token operator">:</span> <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'filter'</span><span class="token punctuation">,</span>
+ config<span class="token operator">:</span> <span class="token punctuation">{</span> dimension<span class="token operator">:</span> <span class="token string">'Year'</span><span class="token punctuation">,</span> <span class="token string">'='</span><span class="token operator">:</span> <span class="token number">2011</span> <span class="token punctuation">}</span>
+ <span class="token comment">// The config is the "condition" of this filter.</span>
+ <span class="token comment">// This transform traverse the source data and</span>
+ <span class="token comment">// and retrieve all the items that the "Year"</span>
+ <span class="token comment">// is `2011`.</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span><span class="token punctuation">,</span>
+ series<span class="token operator">:</span> <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'pie'</span><span class="token punctuation">,</span>
+ datasetIndex<span class="token operator">:</span> <span class="token number">1</span>
+ <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" str [...]
+<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>Dat [...]
+ dataset<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ source<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token comment">// ...</span>
+ <span class="token punctuation">]</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ transform<span class="token operator">:</span> <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'filter'</span><span class="token punctuation">,</span>
+ config<span class="token operator">:</span> <span class="token punctuation">{</span>
+ <span class="token comment">// Use operator "and".</span>
+ <span class="token comment">// Similarly, we can also use "or", "not" in the same place.</span>
+ <span class="token comment">// But "not" should be followed with a {...} rather than `[...]`.</span>
+ and<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span> dimension<span class="token operator">:</span> <span class="token string">'Year'</span><span class="token punctuation">,</span> <span class="token string">'='</span><span class="token operator">:</span> <span class="token number">2011</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span> dimension<span class="token operator">:</span> <span class="token string">'Price'</span><span class="token punctuation">,</span> <span class="token string">'>='</span><span class="token operator">:</span> <span class="token number">20</span><span class="token punctuation">,</span> <span class="token string">'<'</span><span class="token operator">:</span> <span class="token number">30</span> <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span>
+ <span class="token punctuation">}</span>
+ <span class="token comment">// The condition is "Year" is 2011 and "Price" is greater</span>
+ <span class="token comment">// or equal to 20 but less than 30.</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span><span class="token punctuation">,</span>
+ series<span class="token operator">:</span> <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'pie'</span><span class="token punctuation">,</span>
+ datasetIndex<span class="token operator">:</span> <span class="token number">1</span>
+ <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v [...]
+ type<span class="token operator">:</span> <span class="token string">'filter'</span><span class="token punctuation">,</span>
+ config<span class="token operator">:</span> <span class="token punctuation">{</span>
+ or<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
+ and<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
+ dimension<span class="token operator">:</span> <span class="token string">'Price'</span><span class="token punctuation">,</span> <span class="token string">'>='</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token string">'<'</span><span class="token operator">:</span> <span class="token number">20</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
+ dimension<span class="token operator">:</span> <span class="token string">'Sales'</span><span class="token punctuation">,</span> <span class="token string">'<'</span><span class="token operator">:</span> <span class="token number">100</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
+ not<span class="token operator">:</span> <span class="token punctuation">{</span> dimension<span class="token operator">:</span> <span class="token string">'Product'</span><span class="token punctuation">,</span> <span class="token string">'='</span><span class="token operator">:</span> <span class="token string">'Tofu'</span> <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span><span class="token punctuation">]</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
+ and<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
+ dimension<span class="token operator">:</span> <span class="token string">'Price'</span><span class="token punctuation">,</span> <span class="token string">'>='</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token string">'<'</span><span class="token operator">:</span> <span class="token number">20</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
+ dimension<span class="token operator">:</span> <span class="token string">'Sales'</span><span class="token punctuation">,</span> <span class="token string">'<'</span><span class="token operator">:</span> <span class="token number">100</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
+ not<span class="token operator">:</span> <span class="token punctuation">{</span> dimension<span class="token operator">:</span> <span class="token string">'Product'</span><span class="token punctuation">,</span> <span class="token string">'='</span><span class="token operator">:</span> <span class="token string">'Cake'</span> <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span><span class="token punctuation">]</span>
+ <span class="token punctuation">}</span><span class="token punctuation">]</span>
+ <span class="token punctuation">}</span>
+<span class="token punctuation">}</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 [...]
+ dataset<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ source<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">[</span><span class="token string">'Product'</span><span class="token punctuation">,</span> <span class="token string">'Sales'</span><span class="token punctuation">,</span> <span class="token string">'Price'</span><span class="token punctuation">,</span> <span class="token string">'Date'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Milk Tee'</span><span class="token punctuation">,</span> <span class="token number">311</span><span class="token punctuation">,</span> <span class="token number">21</span><span class="token punctuation">,</span> <span class="token string">'2012-05-12'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Cake'</span><span class="token punctuation">,</span> <span class="token number">135</span><span class="token punctuation">,</span> <span class="token number">28</span><span class="token punctuation">,</span> <span class="token string">'2012-05-22'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Latte'</span><span class="token punctuation">,</span> <span class="token number">262</span><span class="token punctuation">,</span> <span class="token number">36</span><span class="token punctuation">,</span> <span class="token string">'2012-06-02'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Milk Tee'</span><span class="token punctuation">,</span> <span class="token number">359</span><span class="token punctuation">,</span> <span class="token number">21</span><span class="token punctuation">,</span> <span class="token string">'2012-06-22'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Cake'</span><span class="token punctuation">,</span> <span class="token number">121</span><span class="token punctuation">,</span> <span class="token number">28</span><span class="token punctuation">,</span> <span class="token string">'2012-07-02'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Latte'</span><span class="token punctuation">,</span> <span class="token number">271</span><span class="token punctuation">,</span> <span class="token number">36</span><span class="token punctuation">,</span> <span class="token string">'2012-06-22'</span><span class="token punctuation">]</span>
+ <span class="token comment">// ...</span>
+ <span class="token punctuation">]</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ transform<span class="token operator">:</span> <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'filter'</span><span class="token punctuation">,</span>
+ config<span class="token operator">:</span> <span class="token punctuation">{</span>
+ dimension<span class="token operator">:</span> <span class="token string">'Date'</span><span class="token punctuation">,</span>
+ <span class="token string">'>='</span><span class="token operator">:</span> <span class="token string">'2012-05'</span><span class="token punctuation">,</span>
+ <span class="token string">'<'</span><span class="token operator">:</span> <span class="token string">'2012-06'</span><span class="token punctuation">,</span>
+ parser<span class="token operator">:</span> <span class="token string">'time'</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v [...]
+ type<span class="token operator">:</span> <span class="token string">'filter'</span><span class="token punctuation">;</span>
+ config<span class="token operator">:</span> ConditionalExpressionOption<span class="token punctuation">;</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span>
+<span class="token keyword">type</span> <span class="token class-name">ConditionalExpressionOption</span> <span class="token operator">=</span>
+ <span class="token operator">|</span> <span class="token boolean">true</span>
+ <span class="token operator">|</span> <span class="token boolean">false</span>
+ <span class="token operator">|</span> RelationalExpressionOption
+ <span class="token operator">|</span> LogicalExpressionOption<span class="token punctuation">;</span>
+<span class="token keyword">type</span> <span class="token class-name">RelationalExpressionOption</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
+ dimension<span class="token operator">:</span> DimensionName <span class="token operator">|</span> DimensionIndex<span class="token punctuation">;</span>
+ parser<span class="token operator">?</span><span class="token operator">:</span> <span class="token string">'time'</span> <span class="token operator">|</span> <span class="token string">'trim'</span> <span class="token operator">|</span> <span class="token string">'number'</span><span class="token punctuation">;</span>
+ lt<span class="token operator">?</span><span class="token operator">:</span> DataValue<span class="token punctuation">;</span> <span class="token comment">// less than</span>
+ lte<span class="token operator">?</span><span class="token operator">:</span> DataValue<span class="token punctuation">;</span> <span class="token comment">// less than or equal</span>
+ gt<span class="token operator">?</span><span class="token operator">:</span> DataValue<span class="token punctuation">;</span> <span class="token comment">// greater than</span>
+ gte<span class="token operator">?</span><span class="token operator">:</span> DataValue<span class="token punctuation">;</span> <span class="token comment">// greater than or equal</span>
+ eq<span class="token operator">?</span><span class="token operator">:</span> DataValue<span class="token punctuation">;</span> <span class="token comment">// equal</span>
+ ne<span class="token operator">?</span><span class="token operator">:</span> DataValue<span class="token punctuation">;</span> <span class="token comment">// not equal</span>
+ <span class="token string">'<'</span><span class="token operator">?</span><span class="token operator">:</span> DataValue<span class="token punctuation">;</span> <span class="token comment">// lt</span>
+ <span class="token string">'<='</span><span class="token operator">?</span><span class="token operator">:</span> DataValue<span class="token punctuation">;</span> <span class="token comment">// lte</span>
+ <span class="token string">'>'</span><span class="token operator">?</span><span class="token operator">:</span> DataValue<span class="token punctuation">;</span> <span class="token comment">// gt</span>
+ <span class="token string">'>='</span><span class="token operator">?</span><span class="token operator">:</span> DataValue<span class="token punctuation">;</span> <span class="token comment">// gte</span>
+ <span class="token string">'='</span><span class="token operator">?</span><span class="token operator">:</span> DataValue<span class="token punctuation">;</span> <span class="token comment">// eq</span>
+ <span class="token string">'!='</span><span class="token operator">?</span><span class="token operator">:</span> DataValue<span class="token punctuation">;</span> <span class="token comment">// ne</span>
+ <span class="token string">'<>'</span><span class="token operator">?</span><span class="token operator">:</span> DataValue<span class="token punctuation">;</span> <span class="token comment">// ne (SQL style)</span>
+ reg<span class="token operator">?</span><span class="token operator">:</span> RegExp <span class="token operator">|</span> <span class="token builtin">string</span><span class="token punctuation">;</span> <span class="token comment">// RegExp</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span>
+<span class="token keyword">type</span> <span class="token class-name">LogicalExpressionOption</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
+ and<span class="token operator">?</span><span class="token operator">:</span> ConditionalExpressionOption<span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
+ or<span class="token operator">?</span><span class="token operator">:</span> ConditionalExpressionOption<span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
+ not<span class="token operator">?</span><span class="token operator">:</span> ConditionalExpressionOption<span class="token punctuation">;</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span>
+<span class="token keyword">type</span> <span class="token class-name">DataValue</span> <span class="token operator">=</span> <span class="token builtin">string</span> <span class="token operator">|</span> <span class="token builtin">number</span> <span class="token operator">|</span> Date<span class="token punctuation">;</span>
+<span class="token keyword">type</span> <span class="token class-name">DimensionName</span> <span class="token operator">=</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
+<span class="token keyword">type</span> <span class="token class-name">DimensionIndex</span> <span class="token operator">=</span> <span class="token builtin">number</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="current [...]
+ DatasetComponent<span class="token punctuation">,</span>
+ TransformComponent
+<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'echarts/components'</span><span class="token punctuation">;</span>
+
+echarts<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
+ DatasetComponent<span class="token punctuation">,</span>
+ TransformComponent
+<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" [...]
+ dataset<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ dimensions<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'name'</span><span class="token punctuation">,</span> <span class="token string">'age'</span><span class="token punctuation">,</span> <span class="token string">'profession'</span><span class="token punctuation">,</span> <span class="token string">'score'</span><span class="token punctuation">,</span> <span class="token string">'date'</span><span class="token punctuati [...]
+ source<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">[</span><span class="token string">' Hannah Krause '</span><span class="token punctuation">,</span> <span class="token number">41</span><span class="token punctuation">,</span> <span class="token string">'Engineer'</span><span class="token punctuation">,</span> <span class="token number">314</span><span class="token punctuation">,</span> <span class="token string">'2011-02-12'</span><span class="token punctuation">]</span><span class="token punctua [...]
+ <span class="token punctuation">[</span><span class="token string">'Zhao Qian '</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">,</span> <span class="token string">'Teacher'</span><span class="token punctuation">,</span> <span class="token number">351</span><span class="token punctuation">,</span> <span class="token string">'2011-03-01'</span><span class="token punctuation">]</span><span class="token punctuation"> [...]
+ <span class="token punctuation">[</span><span class="token string">' Jasmin Krause '</span><span class="token punctuation">,</span> <span class="token number">52</span><span class="token punctuation">,</span> <span class="token string">'Musician'</span><span class="token punctuation">,</span> <span class="token number">287</span><span class="token punctuation">,</span> <span class="token string">'2011-02-14'</span><span class="token punctuation">]</span><span class="token punctua [...]
+ <span class="token punctuation">[</span><span class="token string">'Li Lei'</span><span class="token punctuation">,</span> <span class="token number">37</span><span class="token punctuation">,</span> <span class="token string">'Teacher'</span><span class="token punctuation">,</span> <span class="token number">219</span><span class="token punctuation">,</span> <span class="token string">'2011-02-18'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">' Karle Neumann '</span><span class="token punctuation">,</span> <span class="token number">25</span><span class="token punctuation">,</span> <span class="token string">'Engineer'</span><span class="token punctuation">,</span> <span class="token number">253</span><span class="token punctuation">,</span> <span class="token string">'2011-04-02'</span><span class="token punctuation">]</span><span class="token punctua [...]
+ <span class="token punctuation">[</span><span class="token string">' Adrian Groß'</span><span class="token punctuation">,</span> <span class="token number">19</span><span class="token punctuation">,</span> <span class="token string">'Teacher'</span><span class="token punctuation">,</span> <span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token string">'2011-01-16'</span><span class="token punctuation">]</span><span class="token punctuati [...]
+ <span class="token punctuation">[</span><span class="token string">'Mia Neumann'</span><span class="token punctuation">,</span> <span class="token number">71</span><span class="token punctuation">,</span> <span class="token string">'Engineer'</span><span class="token punctuation">,</span> <span class="token number">165</span><span class="token punctuation">,</span> <span class="token string">'2011-03-19'</span><span class="token punctuation">]</span><span class="token punctuation [...]
+ <span class="token punctuation">[</span><span class="token string">' Böhm Fuchs'</span><span class="token punctuation">,</span> <span class="token number">36</span><span class="token punctuation">,</span> <span class="token string">'Musician'</span><span class="token punctuation">,</span> <span class="token number">318</span><span class="token punctuation">,</span> <span class="token string">'2011-02-24'</span><span class="token punctuation">]</span><span class="token punctuation [...]
+ <span class="token punctuation">[</span><span class="token string">'Han Meimei '</span><span class="token punctuation">,</span> <span class="token number">67</span><span class="token punctuation">,</span> <span class="token string">'Engineer'</span><span class="token punctuation">,</span> <span class="token number">366</span><span class="token punctuation">,</span> <span class="token string">'2011-03-12'</span><span class="token punctuation">]</span>
+ <span class="token punctuation">]</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ transform<span class="token operator">:</span> <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'sort'</span><span class="token punctuation">,</span>
+ <span class="token comment">// Sort by score.</span>
+ config<span class="token operator">:</span> <span class="token punctuation">{</span> dimension<span class="token operator">:</span> <span class="token string">'score'</span><span class="token punctuation">,</span> order<span class="token operator">:</span> <span class="token string">'asc'</span> <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span><span class="token punctuation">,</span>
+ series<span class="token operator">:</span> <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span>
+ datasetIndex<span class="token operator">:</span> <span class="token number">1</span>
+ <span class="token punctuation">}</span>
+ <span class="token comment">// ...</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v [...]
+<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, the [...]
+<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="md-code-block"><d [...]
+ dataset<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ dimensions<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'name'</span><span class="token punctuation">,</span> <span class="token string">'age'</span><span class="token punctuation">,</span> <span class="token string">'profession'</span><span class="token punctuation">,</span> <span class="token string">'score'</span><span class="token punctuation">,</span> <span class="token string">'date'</span><span class="token punctuati [...]
+ source<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">[</span><span class="token string">' Hannah Krause '</span><span class="token punctuation">,</span> <span class="token number">41</span><span class="token punctuation">,</span> <span class="token string">'Engineer'</span><span class="token punctuation">,</span> <span class="token number">314</span><span class="token punctuation">,</span> <span class="token string">'2011-02-12'</span><span class="token punctuation">]</span><span class="token punctua [...]
+ <span class="token punctuation">[</span><span class="token string">'Zhao Qian '</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">,</span> <span class="token string">'Teacher'</span><span class="token punctuation">,</span> <span class="token number">351</span><span class="token punctuation">,</span> <span class="token string">'2011-03-01'</span><span class="token punctuation">]</span><span class="token punctuation"> [...]
+ <span class="token punctuation">[</span><span class="token string">' Jasmin Krause '</span><span class="token punctuation">,</span> <span class="token number">52</span><span class="token punctuation">,</span> <span class="token string">'Musician'</span><span class="token punctuation">,</span> <span class="token number">287</span><span class="token punctuation">,</span> <span class="token string">'2011-02-14'</span><span class="token punctuation">]</span><span class="token punctua [...]
+ <span class="token punctuation">[</span><span class="token string">'Li Lei'</span><span class="token punctuation">,</span> <span class="token number">37</span><span class="token punctuation">,</span> <span class="token string">'Teacher'</span><span class="token punctuation">,</span> <span class="token number">219</span><span class="token punctuation">,</span> <span class="token string">'2011-02-18'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">' Karle Neumann '</span><span class="token punctuation">,</span> <span class="token number">25</span><span class="token punctuation">,</span> <span class="token string">'Engineer'</span><span class="token punctuation">,</span> <span class="token number">253</span><span class="token punctuation">,</span> <span class="token string">'2011-04-02'</span><span class="token punctuation">]</span><span class="token punctua [...]
+ <span class="token punctuation">[</span><span class="token string">' Adrian Groß'</span><span class="token punctuation">,</span> <span class="token number">19</span><span class="token punctuation">,</span> <span class="token string">'Teacher'</span><span class="token punctuation">,</span> <span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token string">'2011-01-16'</span><span class="token punctuation">]</span><span class="token punctuati [...]
+ <span class="token punctuation">[</span><span class="token string">'Mia Neumann'</span><span class="token punctuation">,</span> <span class="token number">71</span><span class="token punctuation">,</span> <span class="token string">'Engineer'</span><span class="token punctuation">,</span> <span class="token number">165</span><span class="token punctuation">,</span> <span class="token string">'2011-03-19'</span><span class="token punctuation">]</span><span class="token punctuation [...]
+ <span class="token punctuation">[</span><span class="token string">' Böhm Fuchs'</span><span class="token punctuation">,</span> <span class="token number">36</span><span class="token punctuation">,</span> <span class="token string">'Musician'</span><span class="token punctuation">,</span> <span class="token number">318</span><span class="token punctuation">,</span> <span class="token string">'2011-02-24'</span><span class="token punctuation">]</span><span class="token punctuation [...]
+ <span class="token punctuation">[</span><span class="token string">'Han Meimei '</span><span class="token punctuation">,</span> <span class="token number">67</span><span class="token punctuation">,</span> <span class="token string">'Engineer'</span><span class="token punctuation">,</span> <span class="token number">366</span><span class="token punctuation">,</span> <span class="token string">'2011-03-12'</span><span class="token punctuation">]</span>
+ <span class="token punctuation">]</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ transform<span class="token operator">:</span> <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'sort'</span><span class="token punctuation">,</span>
+ config<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token comment">// Sort by the two dimensions.</span>
+ <span class="token punctuation">{</span> dimension<span class="token operator">:</span> <span class="token string">'profession'</span><span class="token punctuation">,</span> order<span class="token operator">:</span> <span class="token string">'desc'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span> dimension<span class="token operator">:</span> <span class="token string">'score'</span><span class="token punctuation">,</span> order<span class="token operator">:</span> <span class="token string">'desc'</span> <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span><span class="token punctuation">,</span>
+ series<span class="token operator">:</span> <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span>
+ datasetIndex<span class="token operator">:</span> <span class="token number">1</span>
+ <span class="token punctuation">}</span>
+ <span class="token comment">// ...</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v [...]
+ type<span class="token operator">:</span> <span class="token string">'filter'</span><span class="token punctuation">;</span>
+ config<span class="token operator">:</span> OrderExpression <span class="token operator">|</span> OrderExpression<span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span>
+<span class="token keyword">type</span> <span class="token class-name">OrderExpression</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
+ dimension<span class="token operator">:</span> DimensionName <span class="token operator">|</span> DimensionIndex<span class="token punctuation">;</span>
+ order<span class="token operator">:</span> <span class="token string">'asc'</span> <span class="token operator">|</span> <span class="token string">'desc'</span><span class="token punctuation">;</span>
+ incomparable<span class="token operator">?</span><span class="token operator">:</span> <span class="token string">'min'</span> <span class="token operator">|</span> <span class="token string">'max'</span><span class="token punctuation">;</span>
+ parser<span class="token operator">?</span><span class="token operator">:</span> <span class="token string">'time'</span> <span class="token operator">|</span> <span class="token string">'trim'</span> <span class="token operator">|</span> <span class="token string">'number'</span><span class="token punctuation">;</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span>
+<span class="token keyword">type</span> <span class="token class-name">DimensionName</span> <span class="token operator">=</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
+<span class="token keyword">type</span> <span class="token class-name">DimensionIndex</span> <span class="token operator">=</span> <span class="token builtin">number</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="current [...]
+ DatasetComponent<span class="token punctuation">,</span>
+ TransformComponent
+<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'echarts/components'</span><span class="token punctuation">;</span>
+
+echarts<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
+ DatasetComponent<span class="token punctuation">,</span>
+ TransformComponent
+<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" [...]
+echarts<span class="token punctuation">.</span><span class="token function">registerTransform</span><span class="token punctuation">(</span><span class="token function">ecStatTransform</span><span class="token punctuation">(</span>ecStat<span class="token punctuation">)</span><span class="token punctuation">.</span>regression<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http:/ [...]
+ dataset<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ source<span class="token operator">:</span> rawData
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ transform<span class="token operator">:</span> <span class="token punctuation">{</span>
+ <span class="token comment">// Reference the registered external transform.</span>
+ <span class="token comment">// Note that external transform has a namespace (like 'ecStat:xxx'</span>
+ <span class="token comment">// has namespace 'ecStat').</span>
+ <span class="token comment">// built-in transform (like 'filter', 'sort') does not have a namespace.</span>
+ type<span class="token operator">:</span> <span class="token string">'ecStat:regression'</span><span class="token punctuation">,</span>
+ config<span class="token operator">:</span> <span class="token punctuation">{</span>
+ <span class="token comment">// Parameters needed by the external transform.</span>
+ method<span class="token operator">:</span> <span class="token string">'exponential'</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span><span class="token punctuation">,</span>
+ xAxis<span class="token operator">:</span> <span class="token punctuation">{</span> type<span class="token operator">:</span> <span class="token string">'category'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ yAxis<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
+ series<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ name<span class="token operator">:</span> <span class="token string">'scatter'</span><span class="token punctuation">,</span>
+ type<span class="token operator">:</span> <span class="token string">'scatter'</span><span class="token punctuation">,</span>
+ datasetIndex<span class="token operator">:</span> <span class="token number">0</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ name<span class="token operator">:</span> <span class="token string">'regression'</span><span class="token punctuation">,</span>
+ type<span class="token operator">:</span> <span class="token string">'line'</span><span class="token punctuation">,</span>
+ symbol<span class="token operator">:</span> <span class="token string">'none'</span><span class="token punctuation">,</span>
+ datasetIndex<span class="token operator">:</span> <span class="token number">1</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v [...]
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
+ <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 type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+ <script>var _hmt=_hmt||[];!function(){var e=document.createElement("script");e.src="https://hm.baidu.com/hm.js?54b918eee37cb8a7045f0fd0f0b24395";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)}()</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..cff4f3a
--- /dev/null
+++ b/docs/en/concepts/dataset/index.html
@@ -0,0 +1,485 @@
+<!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">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/ec [...]
+ </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="ht [...]
+ xAxis: {
+ type: 'category',
+ data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']
+ },
+ yAxis: {},
+ series: [
+ {
+ type: 'bar',
+ name: '2015',
+ data: [89.3, 92.1, 94.4, 85.4]
+ },
+ {
+ type: 'bar',
+ name: '2016',
+ data: [95.8, 89.4, 91.2, 76.9]
+ },
+ {
+ type: 'bar',
+ name: '2017',
+ data: [97.7, 83.1, 92.5, 78.1]
+ }
+ ]
+};</textarea><pre data-testid="preview" class="prism-editor__editor">option <span class="token operator">=</span> <span class="token punctuation">{</span>
+ xAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'category'</span><span class="token punctuation">,</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'Matcha Latte'</span><span class="token punctuation">,</span> <span class="token string">'Milk Tea'</span><span class="token punctuation">,</span> <span class="token string">'Cheese Cocoa'</span><span class="token punctuation">,</span> <span class="token string">'Walnut Brownie'</span><span class="token punctuation">]</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ yAxis<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
+ series<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span>
+ name<span class="token operator">:</span> <span class="token string">'2015'</span><span class="token punctuation">,</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">89.3</span><span class="token punctuation">,</span> <span class="token number">92.1</span><span class="token punctuation">,</span> <span class="token number">94.4</span><span class="token punctuation">,</span> <span class="token number">85.4</span><span class="token punctuation">]</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span>
+ name<span class="token operator">:</span> <span class="token string">'2016'</span><span class="token punctuation">,</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">95.8</span><span class="token punctuation">,</span> <span class="token number">89.4</span><span class="token punctuation">,</span> <span class="token number">91.2</span><span class="token punctuation">,</span> <span class="token number">76.9</span><span class="token punctuation">]</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span>
+ name<span class="token operator">:</span> <span class="token string">'2017'</span><span class="token punctuation">,</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">97.7</span><span class="token punctuation">,</span> <span class="token number">83.1</span><span class="token punctuation">,</span> <span class="token number">92.5</span><span class="token punctuation">,</span> <span class="token number">78.1</span><span class="token punctuation">]</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" str [...]
+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" tabindex="-1">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 d [...]
+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="md-live layout-tb"><div class="md-live-editor"><div class="md-live-editor-container"><div class="pr [...]
+ legend: {},
+ tooltip: {},
+ dataset: {
+ // Provide a set of data.
+ source: [
+ ['product', '2015', '2016', '2017'],
+ ['Matcha Latte', 43.3, 85.8, 93.7],
+ ['Milk Tea', 83.1, 73.4, 55.1],
+ ['Cheese Cocoa', 86.4, 65.2, 82.5],
+ ['Walnut Brownie', 72.4, 53.9, 39.1]
+ ]
+ },
+ // Declare an x-axis (category axis).
+ // The category map the first row in the dataset by default.
+ xAxis: { type: 'category' },
+ // Declare a y-axis (value axis).
+ yAxis: {},
+ // Declare several 'bar' series,
+ // every series will auto-map to each rows by default.
+ series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
+};</textarea><pre data-testid="preview" class="prism-editor__editor">option <span class="token operator">=</span> <span class="token punctuation">{</span>
+ legend<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
+ tooltip<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
+ dataset<span class="token operator">:</span> <span class="token punctuation">{</span>
+ <span class="token comment">// Provide a set of data.</span>
+ source<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">[</span><span class="token string">'product'</span><span class="token punctuation">,</span> <span class="token string">'2015'</span><span class="token punctuation">,</span> <span class="token string">'2016'</span><span class="token punctuation">,</span> <span class="token string">'2017'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Matcha Latte'</span><span class="token punctuation">,</span> <span class="token number">43.3</span><span class="token punctuation">,</span> <span class="token number">85.8</span><span class="token punctuation">,</span> <span class="token number">93.7</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Milk Tea'</span><span class="token punctuation">,</span> <span class="token number">83.1</span><span class="token punctuation">,</span> <span class="token number">73.4</span><span class="token punctuation">,</span> <span class="token number">55.1</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Cheese Cocoa'</span><span class="token punctuation">,</span> <span class="token number">86.4</span><span class="token punctuation">,</span> <span class="token number">65.2</span><span class="token punctuation">,</span> <span class="token number">82.5</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Walnut Brownie'</span><span class="token punctuation">,</span> <span class="token number">72.4</span><span class="token punctuation">,</span> <span class="token number">53.9</span><span class="token punctuation">,</span> <span class="token number">39.1</span><span class="token punctuation">]</span>
+ <span class="token punctuation">]</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token comment">// Declare an x-axis (category axis).</span>
+ <span class="token comment">// The category map the first row in the dataset by default.</span>
+ xAxis<span class="token operator">:</span> <span class="token punctuation">{</span> type<span class="token operator">:</span> <span class="token string">'category'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token comment">// Declare a y-axis (value axis).</span>
+ yAxis<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token comment">// Declare several 'bar' series,</span>
+ <span class="token comment">// every series will auto-map to each rows by default.</span>
+ series<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> type<span class="token operator">:</span> <span class="token string">'bar'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> type<span class="token operator">:</span> <span class="token string">'bar'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span [...]
+<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" str [...]
+ legend: {},
+ tooltip: {},
+ dataset: {
+ // Define the dimension of array. In cartesian coordinate system,
+ // if the type of x-axis is category, map the first dimension to
+ // x-axis by default, the second dimension to y-axis.
+ // You can also specify 'series.encode' to complete the map
+ // without specify dimensions. Please see below.
+
+ dimensions: ['product', '2015', '2016', '2017'],
+ source: [
+ { product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7 },
+ { product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1 },
+ { product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5 },
+ { product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1 }
+ ]
+ },
+ xAxis: { type: 'category' },
+ yAxis: {},
+ series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
+};</textarea><pre data-testid="preview" class="prism-editor__editor">option <span class="token operator">=</span> <span class="token punctuation">{</span>
+ legend<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
+ tooltip<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
+ dataset<span class="token operator">:</span> <span class="token punctuation">{</span>
+ <span class="token comment">// Define the dimension of array. In cartesian coordinate system,</span>
+ <span class="token comment">// if the type of x-axis is category, map the first dimension to</span>
+ <span class="token comment">// x-axis by default, the second dimension to y-axis.</span>
+ <span class="token comment">// You can also specify 'series.encode' to complete the map</span>
+ <span class="token comment">// without specify dimensions. Please see below.</span>
+
+ dimensions<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'product'</span><span class="token punctuation">,</span> <span class="token string">'2015'</span><span class="token punctuation">,</span> <span class="token string">'2016'</span><span class="token punctuation">,</span> <span class="token string">'2017'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ source<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span> product<span class="token operator">:</span> <span class="token string">'Matcha Latte'</span><span class="token punctuation">,</span> <span class="token string">'2015'</span><span class="token operator">:</span> <span class="token number">43.3</span><span class="token punctuation">,</span> <span class="token string">'2016'</span><span class="token operator">:</span> <span class="token number">85.8</span><span class="token punctuation">,</spa [...]
+ <span class="token punctuation">{</span> product<span class="token operator">:</span> <span class="token string">'Milk Tea'</span><span class="token punctuation">,</span> <span class="token string">'2015'</span><span class="token operator">:</span> <span class="token number">83.1</span><span class="token punctuation">,</span> <span class="token string">'2016'</span><span class="token operator">:</span> <span class="token number">73.4</span><span class="token punctuation">,</span> < [...]
+ <span class="token punctuation">{</span> product<span class="token operator">:</span> <span class="token string">'Cheese Cocoa'</span><span class="token punctuation">,</span> <span class="token string">'2015'</span><span class="token operator">:</span> <span class="token number">86.4</span><span class="token punctuation">,</span> <span class="token string">'2016'</span><span class="token operator">:</span> <span class="token number">65.2</span><span class="token punctuation">,</spa [...]
+ <span class="token punctuation">{</span> product<span class="token operator">:</span> <span class="token string">'Walnut Brownie'</span><span class="token punctuation">,</span> <span class="token string">'2015'</span><span class="token operator">:</span> <span class="token number">72.4</span><span class="token punctuation">,</span> <span class="token string">'2016'</span><span class="token operator">:</span> <span class="token number">53.9</span><span class="token punctuation">,</s [...]
+ <span class="token punctuation">]</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ xAxis<span class="token operator">:</span> <span class="token punctuation">{</span> type<span class="token operator">:</span> <span class="token string">'category'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ yAxis<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
+ series<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> type<span class="token operator">:</span> <span class="token string">'bar'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> type<span class="token operator">:</span> <span class="token string">'bar'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span [...]
+<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" str [...]
+ legend: {},
+ tooltip: {},
+ dataset: {
+ source: [
+ ['product', '2012', '2013', '2014', '2015'],
+ ['Matcha Latte', 41.1, 30.4, 65.1, 53.3],
+ ['Milk Tea', 86.5, 92.1, 85.7, 83.1],
+ ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4]
+ ]
+ },
+ xAxis: [
+ { type: 'category', gridIndex: 0 },
+ { type: 'category', gridIndex: 1 }
+ ],
+ yAxis: [{ gridIndex: 0 }, { gridIndex: 1 }],
+ grid: [{ bottom: '55%' }, { top: '55%' }],
+ series: [
+ // These series will show in the first coordinate, each series map a row in dataset.
+ { type: 'bar', seriesLayoutBy: 'row' },
+ { type: 'bar', seriesLayoutBy: 'row' },
+ { type: 'bar', seriesLayoutBy: 'row' },
+ // These series will show in the second coordinate, each series map a column in dataset.
+ { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },
+ { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },
+ { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },
+ { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 }
+ ]
+};</textarea><pre data-testid="preview" class="prism-editor__editor">option <span class="token operator">=</span> <span class="token punctuation">{</span>
+ legend<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
+ tooltip<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
+ dataset<span class="token operator">:</span> <span class="token punctuation">{</span>
+ source<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">[</span><span class="token string">'product'</span><span class="token punctuation">,</span> <span class="token string">'2012'</span><span class="token punctuation">,</span> <span class="token string">'2013'</span><span class="token punctuation">,</span> <span class="token string">'2014'</span><span class="token punctuation">,</span> <span class="token string">'2015'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Matcha Latte'</span><span class="token punctuation">,</span> <span class="token number">41.1</span><span class="token punctuation">,</span> <span class="token number">30.4</span><span class="token punctuation">,</span> <span class="token number">65.1</span><span class="token punctuation">,</span> <span class="token number">53.3</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Milk Tea'</span><span class="token punctuation">,</span> <span class="token number">86.5</span><span class="token punctuation">,</span> <span class="token number">92.1</span><span class="token punctuation">,</span> <span class="token number">85.7</span><span class="token punctuation">,</span> <span class="token number">83.1</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Cheese Cocoa'</span><span class="token punctuation">,</span> <span class="token number">24.1</span><span class="token punctuation">,</span> <span class="token number">67.2</span><span class="token punctuation">,</span> <span class="token number">79.5</span><span class="token punctuation">,</span> <span class="token number">86.4</span><span class="token punctuation">]</span>
+ <span class="token punctuation">]</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ xAxis<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span> type<span class="token operator">:</span> <span class="token string">'category'</span><span class="token punctuation">,</span> gridIndex<span class="token operator">:</span> <span class="token number">0</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span> type<span class="token operator">:</span> <span class="token string">'category'</span><span class="token punctuation">,</span> gridIndex<span class="token operator">:</span> <span class="token number">1</span> <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span><span class="token punctuation">,</span>
+ yAxis<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> gridIndex<span class="token operator">:</span> <span class="token number">0</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> gridIndex<span class="token operator">:</span> <span class="token number">1</span> <span class="token punctuation">}</span><span class="token punctuation">]</spa [...]
+ grid<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> bottom<span class="token operator">:</span> <span class="token string">'55%'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> top<span class="token operator">:</span> <span class="token string">'55%'</span> <span class="token punctuation">}</span><span class="token punctuation">]</span> [...]
+ series<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token comment">// These series will show in the first coordinate, each series map a row in dataset.</span>
+ <span class="token punctuation">{</span> type<span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span> seriesLayoutBy<span class="token operator">:</span> <span class="token string">'row'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span> type<span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span> seriesLayoutBy<span class="token operator">:</span> <span class="token string">'row'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span> type<span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span> seriesLayoutBy<span class="token operator">:</span> <span class="token string">'row'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token comment">// These series will show in the second coordinate, each series map a column in dataset.</span>
+ <span class="token punctuation">{</span> type<span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span> xAxisIndex<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> yAxisIndex<span class="token operator">:</span> <span class="token number">1</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span> type<span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span> xAxisIndex<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> yAxisIndex<span class="token operator">:</span> <span class="token number">1</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span> type<span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span> xAxisIndex<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> yAxisIndex<span class="token operator">:</span> <span class="token number">1</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span> type<span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span> xAxisIndex<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> yAxisIndex<span class="token operator">:</span> <span class="token number">1</span> <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" str [...]
+ dataset<span class="token operator">:</span> <span class="token punctuation">{</span>
+ dimensions<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span> name<span class="token operator">:</span> <span class="token string">'score'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token comment">// can be abbreviated as 'string', to indicate dimension name 。</span>
+ <span class="token string">'amount'</span><span class="token punctuation">,</span>
+ <span class="token comment">// Specify dimensions in 'type'.</span>
+ <span class="token punctuation">{</span> name<span class="token operator">:</span> <span class="token string">'product'</span><span class="token punctuation">,</span> type<span class="token operator">:</span> <span class="token string">'ordinal'</span> <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span><span class="token punctuation">,</span>
+ source<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
+ <span class="token punctuation">}</span>
+ <span class="token comment">// ...</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span>
+
+<span class="token keyword">var</span> option2 <span class="token operator">=</span> <span class="token punctuation">{</span>
+ dataset<span class="token operator">:</span> <span class="token punctuation">{</span>
+ source<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ series<span class="token operator">:</span> <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'line'</span><span class="token punctuation">,</span>
+ <span class="token comment">// series.dimensions will cover the config in dataset.dimension</span>
+ dimensions<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token comment">// use null if you do not want dimension name.</span>
+ <span class="token string">'amount'</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span> name<span class="token operator">:</span> <span class="token string">'product'</span><span class="token punctuation">,</span> type<span class="token operator">:</span> <span class="token string">'ordinal'</span> <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span>
+ <span class="token punctuation">}</span>
+ <span class="token comment">// ...</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v [...]
+ dataset: {
+ source: [
+ ['score', 'amount', 'product'],
+ [89.3, 58212, 'Matcha Latte'],
+ [57.1, 78254, 'Milk Tea'],
+ [74.4, 41032, 'Cheese Cocoa'],
+ [50.1, 12755, 'Cheese Brownie'],
+ [89.7, 20145, 'Matcha Cocoa'],
+ [68.1, 79146, 'Tea'],
+ [19.6, 91852, 'Orange Juice'],
+ [10.6, 101852, 'Lemon Juice'],
+ [32.7, 20112, 'Walnut Brownie']
+ ]
+ },
+ xAxis: {},
+ yAxis: { type: 'category' },
+ series: [
+ {
+ type: 'bar',
+ encode: {
+ // Map "amount" column to x-axis.
+ x: 'amount',
+ // Map "product" row to y-axis.
+ y: 'product'
+ }
+ }
+ ]
+};</textarea><pre data-testid="preview" class="prism-editor__editor"><span class="token keyword">var</span> option <span class="token operator">=</span> <span class="token punctuation">{</span>
+ dataset<span class="token operator">:</span> <span class="token punctuation">{</span>
+ source<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">[</span><span class="token string">'score'</span><span class="token punctuation">,</span> <span class="token string">'amount'</span><span class="token punctuation">,</span> <span class="token string">'product'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token number">89.3</span><span class="token punctuation">,</span> <span class="token number">58212</span><span class="token punctuation">,</span> <span class="token string">'Matcha Latte'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token number">57.1</span><span class="token punctuation">,</span> <span class="token number">78254</span><span class="token punctuation">,</span> <span class="token string">'Milk Tea'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token number">74.4</span><span class="token punctuation">,</span> <span class="token number">41032</span><span class="token punctuation">,</span> <span class="token string">'Cheese Cocoa'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token number">50.1</span><span class="token punctuation">,</span> <span class="token number">12755</span><span class="token punctuation">,</span> <span class="token string">'Cheese Brownie'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token number">89.7</span><span class="token punctuation">,</span> <span class="token number">20145</span><span class="token punctuation">,</span> <span class="token string">'Matcha Cocoa'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token number">68.1</span><span class="token punctuation">,</span> <span class="token number">79146</span><span class="token punctuation">,</span> <span class="token string">'Tea'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token number">19.6</span><span class="token punctuation">,</span> <span class="token number">91852</span><span class="token punctuation">,</span> <span class="token string">'Orange Juice'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token number">10.6</span><span class="token punctuation">,</span> <span class="token number">101852</span><span class="token punctuation">,</span> <span class="token string">'Lemon Juice'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token number">32.7</span><span class="token punctuation">,</span> <span class="token number">20112</span><span class="token punctuation">,</span> <span class="token string">'Walnut Brownie'</span><span class="token punctuation">]</span>
+ <span class="token punctuation">]</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ xAxis<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
+ yAxis<span class="token operator">:</span> <span class="token punctuation">{</span> type<span class="token operator">:</span> <span class="token string">'category'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ series<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span>
+ encode<span class="token operator">:</span> <span class="token punctuation">{</span>
+ <span class="token comment">// Map "amount" column to x-axis.</span>
+ x<span class="token operator">:</span> <span class="token string">'amount'</span><span class="token punctuation">,</span>
+ <span class="token comment">// Map "product" row to y-axis.</span>
+ y<span class="token operator">:</span> <span class="token string">'product'</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" str [...]
+encode<span class="token operator">:</span> <span class="token punctuation">{</span>
+ <span class="token comment">// Display the value of dimension named "product" and "score" in tooltip.</span>
+ tooltip<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'product'</span><span class="token punctuation">,</span> <span class="token string">'score'</span><span class="token punctuation">]</span>
+ <span class="token comment">// Connect dimension name of "Dimension 1" and "Dimension 3" as the series name. (Avoid to repeat longer names in series.name)</span>
+ seriesName<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token comment">// Means to use the value in "Dimension 2" as the id. It makes the new and old data correspond by id</span>
+ <span class="token comment">// when using setOption to update data, so that it can show animation properly.</span>
+ itemId<span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span>
+ <span class="token comment">// The itemName will show in the legend of Pie Charts.</span>
+ itemName<span class="token operator">:</span> <span class="token number">3</span>
+<span class="token punctuation">}</span>
+
+<span class="token comment">// Grid/cartesian coordinate unique configs:</span>
+encode<span class="token operator">:</span> <span class="token punctuation">{</span>
+ <span class="token comment">// Map "Dimension 1", "Dimension 5" and "dimension named 'score'" to x-axis:</span>
+ x<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token string">'score'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token comment">// Map "Dimension 0" to y-axis:</span>
+ y<span class="token operator">:</span> <span class="token number">0</span>
+<span class="token punctuation">}</span>
+
+<span class="token comment">// singleAxis unique configs:</span>
+encode<span class="token operator">:</span> <span class="token punctuation">{</span>
+ single<span class="token operator">:</span> <span class="token number">3</span>
+<span class="token punctuation">}</span>
+
+<span class="token comment">// Polar coordinate unique configs:</span>
+encode<span class="token operator">:</span> <span class="token punctuation">{</span>
+ radius<span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span>
+ angle<span class="token operator">:</span> <span class="token number">2</span>
+<span class="token punctuation">}</span>
+
+<span class="token comment">// Geo-coordinate unique configs:</span>
+encode<span class="token operator">:</span> <span class="token punctuation">{</span>
+ lng<span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span>
+ lat<span class="token operator">:</span> <span class="token number">2</span>
+<span class="token punctuation">}</span>
+
+<span class="token comment">// For some charts without coordinate like pie chart, funnel chart:</span>
+encode<span class="token operator">:</span> <span class="token punctuation">{</span>
+ value<span class="token operator">:</span> <span class="token number">3</span>
+<span class="token punctuation">}</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 [...]
+ series<span class="token operator">:</span> <span class="token punctuation">{</span>
+ <span class="token comment">// dimensionIndex count from 0, so the 3rd line is dimensions[2].</span>
+ encode<span class="token operator">:</span> <span class="token punctuation">{</span> x<span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> y<span class="token operator">:</span> <span class="token number">4</span> <span class="token punctuation">}</span>
+ <span class="token comment">// ...</span>
+ <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v [...]
+ series<span class="token operator">:</span> <span class="token punctuation">{</span>
+ encode<span class="token operator">:</span> <span class="token punctuation">{</span> x<span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> y<span class="token operator">:</span> <span class="token number">4</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ seriesLayoutBy<span class="token operator">:</span> <span class="token string">'row'</span>
+ <span class="token comment">// ...</span>
+ <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v [...]
+We now support to trace value from specific dimension for <a href="https://echarts.apache.org/option.html##series.label.formatter">label.formatter</a>:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code>series<span class="token operator">:</span> <span class="token punctuation">{</span>
+ label<span class="token operator">:</span> <span class="token punctuation">{</span>
+ <span class="token comment">// `'{@score}'` means the value in the dimension named "score".</span>
+ <span class="token comment">// `'{@[4]}'` means the value in dimension 4.</span>
+ formatter<span class="token operator">:</span> <span class="token string">'aaa{@product}bbb{@score}ccc{@[4]}ddd'</span><span class="token punctuation">;</span>
+ <span class="token punctuation">}</span>
+<span class="token punctuation">}</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 [...]
+ series<span class="token operator">:</span> <span class="token punctuation">{</span>
+ encode<span class="token operator">:</span> <span class="token punctuation">{</span>
+ tooltip<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">]</span>
+ <span class="token comment">// ...</span>
+ <span class="token punctuation">}</span>
+ <span class="token comment">// ...</span>
+ <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v [...]
+ dataset<span class="token operator">:</span> <span class="token punctuation">{</span>
+ dimensions<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'score'</span><span class="token punctuation">,</span> <span class="token string">'amount'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ source<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">[</span><span class="token number">89.3</span><span class="token punctuation">,</span> <span class="token number">3371</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token number">92.1</span><span class="token punctuation">,</span> <span class="token number">8123</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token number">94.4</span><span class="token punctuation">,</span> <span class="token number">1954</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token number">85.4</span><span class="token punctuation">,</span> <span class="token number">829</span><span class="token punctuation">]</span>
+ <span class="token punctuation">]</span>
+ <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v [...]
+ dataset: {
+ source: [
+ [12, 323, 11.2],
+ [23, 167, 8.3],
+ [81, 284, 12],
+ [91, 413, 4.1],
+ [13, 287, 13.5]
+ ]
+ },
+ visualMap: {
+ show: false,
+ dimension: 2, // means the 3rd column
+ min: 2, // lower bound
+ max: 15, // higher bound
+ inRange: {
+ // Size of the bubble.
+ symbolSize: [5, 60]
+ }
+ },
+ xAxis: {},
+ yAxis: {},
+ series: {
+ type: 'scatter'
+ }
+};</textarea><pre data-testid="preview" class="prism-editor__editor"><span class="token keyword">var</span> option <span class="token operator">=</span> <span class="token punctuation">{</span>
+ dataset<span class="token operator">:</span> <span class="token punctuation">{</span>
+ source<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">[</span><span class="token number">12</span><span class="token punctuation">,</span> <span class="token number">323</span><span class="token punctuation">,</span> <span class="token number">11.2</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token number">23</span><span class="token punctuation">,</span> <span class="token number">167</span><span class="token punctuation">,</span> <span class="token number">8.3</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token number">81</span><span class="token punctuation">,</span> <span class="token number">284</span><span class="token punctuation">,</span> <span class="token number">12</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token number">91</span><span class="token punctuation">,</span> <span class="token number">413</span><span class="token punctuation">,</span> <span class="token number">4.1</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token number">13</span><span class="token punctuation">,</span> <span class="token number">287</span><span class="token punctuation">,</span> <span class="token number">13.5</span><span class="token punctuation">]</span>
+ <span class="token punctuation">]</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ visualMap<span class="token operator">:</span> <span class="token punctuation">{</span>
+ show<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
+ dimension<span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token comment">// means the 3rd column</span>
+ min<span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token comment">// lower bound</span>
+ max<span class="token operator">:</span> <span class="token number">15</span><span class="token punctuation">,</span> <span class="token comment">// higher bound</span>
+ inRange<span class="token operator">:</span> <span class="token punctuation">{</span>
+ <span class="token comment">// Size of the bubble.</span>
+ symbolSize<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">60</span><span class="token punctuation">]</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ xAxis<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
+ yAxis<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
+ series<span class="token operator">:</span> <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'scatter'</span>
+ <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" str [...]
+ <span class="token punctuation">{</span>
+ <span class="token comment">// column by column key-value array is a normal format</span>
+ source<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span> product<span class="token operator">:</span> <span class="token string">'Matcha Latte'</span><span class="token punctuation">,</span> count<span class="token operator">:</span> <span class="token number">823</span><span class="token punctuation">,</span> score<span class="token operator">:</span> <span class="token number">95.8</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span> product<span class="token operator">:</span> <span class="token string">'Milk Tea'</span><span class="token punctuation">,</span> count<span class="token operator">:</span> <span class="token number">235</span><span class="token punctuation">,</span> score<span class="token operator">:</span> <span class="token number">81.4</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span> product<span class="token operator">:</span> <span class="token string">'Cheese Cocoa'</span><span class="token punctuation">,</span> count<span class="token operator">:</span> <span class="token number">1042</span><span class="token punctuation">,</span> score<span class="token operator">:</span> <span class="token number">91.2</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span> product<span class="token operator">:</span> <span class="token string">'Walnut Brownie'</span><span class="token punctuation">,</span> count<span class="token operator">:</span> <span class="token number">988</span><span class="token punctuation">,</span> score<span class="token operator">:</span> <span class="token number">76.9</span> <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ <span class="token comment">// row by row key-value</span>
+ source<span class="token operator">:</span> <span class="token punctuation">{</span>
+ product<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'Matcha Latte'</span><span class="token punctuation">,</span> <span class="token string">'Milk Tea'</span><span class="token punctuation">,</span> <span class="token string">'Cheese Cocoa'</span><span class="token punctuation">,</span> <span class="token string">'Walnut Brownie'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ count<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">823</span><span class="token punctuation">,</span> <span class="token number">235</span><span class="token punctuation">,</span> <span class="token number">1042</span><span class="token punctuation">,</span> <span class="token number">988</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ score<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">95.8</span><span class="token punctuation">,</span> <span class="token number">81.4</span><span class="token punctuation">,</span> <span class="token number">91.2</span><span class="token punctuation">,</span> <span class="token number">76.9</span><span class="token punctuation">]</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span>
+<span class="token punctuation">]</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v [...]
+ dataset<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ <span class="token comment">// 1st Dataset</span>
+ source<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ <span class="token comment">// 2nd Dataset</span>
+ source<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ <span class="token comment">// 3rd Dataset。</span>
+ source<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span><span class="token punctuation">,</span>
+ series<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ <span class="token comment">// Use 2nd dataset</span>
+ datasetIndex<span class="token operator">:</span> <span class="token number">2</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ <span class="token comment">// Use 1st dataset</span>
+ datasetIndex<span class="token operator">:</span> <span class="token number">1</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v [...]
+ xAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'category'</span><span class="token punctuation">,</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'Matcha Latte'</span><span class="token punctuation">,</span> <span class="token string">'Milk Tea'</span><span class="token punctuation">,</span> <span class="token string">'Cheese Cocoa'</span><span class="token punctuation">,</span> <span class="token string">'Walnut Brownie'</span><span class="token punctuation">]</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ yAxis<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
+ series<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span>
+ name<span class="token operator">:</span> <span class="token string">'2015'</span><span class="token punctuation">,</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">89.3</span><span class="token punctuation">,</span> <span class="token number">92.1</span><span class="token punctuation">,</span> <span class="token number">94.4</span><span class="token punctuation">,</span> <span class="token number">85.4</span><span class="token punctuation">]</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span>
+ name<span class="token operator">:</span> <span class="token string">'2016'</span><span class="token punctuation">,</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">95.8</span><span class="token punctuation">,</span> <span class="token number">89.4</span><span class="token punctuation">,</span> <span class="token number">91.2</span><span class="token punctuation">,</span> <span class="token number">76.9</span><span class="token punctuation">]</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span>
+ name<span class="token operator">:</span> <span class="token string">'2017'</span><span class="token punctuation">,</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">97.7</span><span class="token punctuation">,</span> <span class="token number">83.1</span><span class="token punctuation">,</span> <span class="token number">92.5</span><span class="token punctuation">,</span> <span class="token number">78.1</span><span class="token punctuation">]</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v [...]
+<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">example</a> of several charts shared one <code>dataset</code> with linkage interaction.</p></article></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/concepts/dataset.md" title="编辑本文" class="inl [...]
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
+ <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 type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+ <script>var _hmt=_hmt||[];!function(){var e=document.createElement("script");e.src="https://hm.baidu.com/hm.js?54b918eee37cb8a7045f0fd0f0b24395";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)}()</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..7a83af0
--- /dev/null
+++ b/docs/en/concepts/event/index.html
@@ -0,0 +1,325 @@
+<!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">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/ec [...]
+ </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="ht [...]
+ <span class="token comment">// Print name in console</span>
+ console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>params<span class="token punctuation">.</span>name<span class="token punctuation">)</span><span class="token punctuation">;</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" [...]
+<span class="token keyword">var</span> myChart <span class="token operator">=</span> echarts<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'main'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token pun [...]
+
+<span class="token comment">// Config</span>
+<span class="token keyword">var</span> option <span class="token operator">=</span> <span class="token punctuation">{</span>
+ xAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token string">'Shirt'</span><span class="token punctuation">,</span>
+ <span class="token string">'Wool sweater'</span><span class="token punctuation">,</span>
+ <span class="token string">'Chiffon shirt'</span><span class="token punctuation">,</span>
+ <span class="token string">'Pants'</span><span class="token punctuation">,</span>
+ <span class="token string">'High-heeled shoes'</span><span class="token punctuation">,</span>
+ <span class="token string">'socks'</span>
+ <span class="token punctuation">]</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ yAxis<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
+ series<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ name<span class="token operator">:</span> <span class="token string">'Sales'</span><span class="token punctuation">,</span>
+ type<span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">,</span> <span class="token number">36</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token n [...]
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span>
+<span class="token comment">// Use the option and data to display the chart</span>
+myChart<span class="token punctuation">.</span><span class="token function">setOption</span><span class="token punctuation">(</span>option<span class="token punctuation">)</span><span class="token punctuation">;</span>
+<span class="token comment">// Click and jump to Baidu search website</span>
+myChart<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">params</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+ window<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span>
+ <span class="token string">'https://www.google.com/search?q='</span> <span class="token operator">+</span> <span class="token function">encodeURIComponent</span><span class="token punctuation">(</span>params<span class="token punctuation">.</span>name<span class="token punctuation">)</span>
+ <span class="token punctuation">)</span><span class="token punctuation">;</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" [...]
+ <span class="token comment">// The component name clicked,</span>
+ <span class="token comment">// component type, could be 'series'、'markLine'、'markPoint'、'timeLine', etc..</span>
+ componentType<span class="token operator">:</span> string<span class="token punctuation">,</span>
+ <span class="token comment">// series type, could be 'line'、'bar'、'pie', etc.. Works when componentType is 'series'.</span>
+ seriesType<span class="token operator">:</span> string<span class="token punctuation">,</span>
+ <span class="token comment">// the index in option.series. Works when componentType is 'series'.</span>
+ seriesIndex<span class="token operator">:</span> number<span class="token punctuation">,</span>
+ <span class="token comment">// series name, works when componentType is 'series'.</span>
+ seriesName<span class="token operator">:</span> string<span class="token punctuation">,</span>
+ <span class="token comment">// name of data (categories).</span>
+ name<span class="token operator">:</span> string<span class="token punctuation">,</span>
+ <span class="token comment">// the index in 'data' array.</span>
+ dataIndex<span class="token operator">:</span> number<span class="token punctuation">,</span>
+ <span class="token comment">// incoming raw data item</span>
+ data<span class="token operator">:</span> Object<span class="token punctuation">,</span>
+ <span class="token comment">// charts like 'sankey' and 'graph' included nodeData and edgeData as the same time.</span>
+ <span class="token comment">// dataType can be 'node' or 'edge', indicates whether the current click is on node or edge.</span>
+ <span class="token comment">// most of charts have one kind of data, the dataType is meaningless</span>
+ dataType<span class="token operator">:</span> string<span class="token punctuation">,</span>
+ <span class="token comment">// incoming data value</span>
+ value<span class="token operator">:</span> number <span class="token operator">|</span> Array<span class="token punctuation">,</span>
+ <span class="token comment">// color of the shape, works when componentType is 'series'.</span>
+ color<span class="token operator">:</span> string
+<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v [...]
+ <span class="token keyword">if</span> <span class="token punctuation">(</span>params<span class="token punctuation">.</span>componentType <span class="token operator">===</span> <span class="token string">'markPoint'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+ <span class="token comment">// Clicked on the markPoint</span>
+ <span class="token keyword">if</span> <span class="token punctuation">(</span>params<span class="token punctuation">.</span>seriesIndex <span class="token operator">===</span> <span class="token number">5</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+ <span class="token comment">// clicked on the markPoint of the series with index = 5</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>params<span class="token punctuation">.</span>componentType <span class="token operator">===</span> <span class="token string">'series'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+ <span class="token keyword">if</span> <span class="token punctuation">(</span>params<span class="token punctuation">.</span>seriesType <span class="token operator">===</span> <span class="token string">'graph'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+ <span class="token keyword">if</span> <span class="token punctuation">(</span>params<span class="token punctuation">.</span>dataType <span class="token operator">===</span> <span class="token string">'edge'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+ <span class="token comment">// clicked at the edge of graph.</span>
+ <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
+ <span class="token comment">// clicked at the node of graph.</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" [...]
+chart<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token string">'series.line'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token operator">...</ [...]
+chart<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token string">'dataZoom'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token operator">...</spa [...]
+chart<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token string">'xAxis.category'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token operator">.. [...]
+ $<span class="token punctuation">{</span>mainType<span class="token punctuation">}</span>Index<span class="token operator">:</span> number <span class="token comment">// component index</span>
+ $<span class="token punctuation">{</span>mainType<span class="token punctuation">}</span>Name<span class="token operator">:</span> string <span class="token comment">// component name</span>
+ $<span class="token punctuation">{</span>mainType<span class="token punctuation">}</span>Id<span class="token operator">:</span> string <span class="token comment">// component id</span>
+ dataIndex<span class="token operator">:</span> number <span class="token comment">// data item index</span>
+ name<span class="token operator">:</span> string <span class="token comment">// data item name</span>
+ dataType<span class="token operator">:</span> string <span class="token comment">// date item type, such as 'node', 'edge'</span>
+ element<span class="token operator">:</span> string <span class="token comment">// name of element in custom series.</span>
+<span class="token punctuation">}</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 [...]
+ <span class="token comment">// ...</span>
+ series<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ name<span class="token operator">:</span> <span class="token string">'uuu'</span>
+ <span class="token comment">// ...</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+chart<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'mouseover'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> seriesName<span class="token operator">:</span> <span class="token string">'uuu'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation [...]
+ <span class="token comment">// when elements in series named 'uuu' triggered 'mouseover'</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" [...]
+ <span class="token comment">// ...</span>
+ series<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ <span class="token comment">// ...</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ <span class="token comment">// ...</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span> name<span class="token operator">:</span> <span class="token string">'xx'</span><span class="token punctuation">,</span> value<span class="token operator">:</span> <span class="token number">121</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span> name<span class="token operator">:</span> <span class="token string">'yy'</span><span class="token punctuation">,</span> value<span class="token operator">:</span> <span class="token number">33</span> <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+chart<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'mouseover'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> seriesIndex<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">'xx'</span> <span class="token punctuation">}</s [...]
+ <span class="token comment">// when data named 'xx' in series index 1 triggered 'mouseover'.</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" [...]
+ <span class="token comment">// ...</span>
+ series<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'graph'</span><span class="token punctuation">,</span>
+ nodes<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span> name<span class="token operator">:</span> <span class="token string">'a'</span><span class="token punctuation">,</span> value<span class="token operator">:</span> <span class="token number">10</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span> name<span class="token operator">:</span> <span class="token string">'b'</span><span class="token punctuation">,</span> value<span class="token operator">:</span> <span class="token number">20</span> <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span><span class="token punctuation">,</span>
+ edges<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> source<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> target<span class="token operator">:</span> <span class="token number">1</span> <span class="token punctuation">}</span><span class="token punctuation">]</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+chart<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> dataType<span class="token operator">:</span> <span class="token string">'node'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</ [...]
+ <span class="token comment">// call this method while the node of graph was clicked.</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+chart<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> dataType<span class="token operator">:</span> <span class="token string">'edge'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</ [...]
+ <span class="token comment">// call this method while the edge of graph was clicked.</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" [...]
+ <span class="token comment">// ...</span>
+ series<span class="token operator">:</span> <span class="token punctuation">{</span>
+ <span class="token comment">// ...</span>
+ type<span class="token operator">:</span> <span class="token string">'custom'</span><span class="token punctuation">,</span>
+ <span class="token function-variable function">renderItem</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">params<span class="token punctuation">,</span> api</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+ <span class="token keyword">return</span> <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'group'</span><span class="token punctuation">,</span>
+ children<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'circle'</span><span class="token punctuation">,</span>
+ name<span class="token operator">:</span> <span class="token string">'my_el'</span>
+ <span class="token comment">// ...</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ <span class="token comment">// ...</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span>
+ <span class="token punctuation">}</span><span class="token punctuation">;</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">[</span><span class="token number">12</span><span class="token punctuation">,</span> <span class="token number">33</span><span class="token punctuation">]</span><span class="token punctuation">]</span>
+ <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+chart<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'mouseup'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> element<span class="token operator">:</span> <span class="token string">'my_el'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">( [...]
+ <span class="token comment">// when data named 'my_el' triggered 'mouseup'.</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" [...]
+ $<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'detail?q='</span> <span class="token operator">+</span> params<span class="token punctuation">.</span>name<span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">detail</span><span class="token punctuation">)</span> <span class="token punctuati [...]
+ myChart<span class="token punctuation">.</span><span class="token function">setOption</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+ series<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ name<span class="token operator">:</span> <span class="token string">'pie'</span><span class="token punctuation">,</span>
+ <span class="token comment">// using pie chart to show the data distribution in one column.</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span>detail<span class="token punctuation">.</span>data<span class="token punctuation">]</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span>
+ <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+ <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" [...]
+myChart<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'legendselectchanged'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">params</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+ <span class="token comment">// State if legend is selected.</span>
+ <span class="token keyword">var</span> isSelected <span class="token operator">=</span> params<span class="token punctuation">.</span>selected<span class="token punctuation">[</span>params<span class="token punctuation">.</span>name<span class="token punctuation">]</span><span class="token punctuation">;</span>
+ <span class="token comment">// print in the console.</span>
+ console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>
+ <span class="token punctuation">(</span>isSelected <span class="token operator">?</span> <span class="token string">'Selected'</span> <span class="token operator">:</span> <span class="token string">'Not Selected'</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">'legend'</span> <span class="token operator">+</span> params<span class="token punctuation">.</span>name
+ <span class="token punctuation">)</span><span class="token punctuation">;</span>
+ <span class="token comment">// print for all legends.</span>
+ console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>params<span class="token punctuation">.</span>selected<span class="token punctuation">)</span><span class="token punctuation">;</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" [...]
+ tooltip: {
+ trigger: 'item',
+ formatter: '{a} <br/>{b} : {c} ({d}%)'
+ },
+ legend: {
+ orient: 'vertical',
+ left: 'left',
+ data: [
+ 'Direct Access',
+ 'Email Marketing',
+ 'Affiliate Ads',
+ 'Video Ads',
+ 'Search Engines'
+ ]
+ },
+ series: [
+ {
+ name: 'Access Source',
+ type: 'pie',
+ radius: '55%',
+ center: ['50%', '60%'],
+ data: [
+ { value: 335, name: 'Direct Access' },
+ { value: 310, name: 'Email Marketing' },
+ { value: 234, name: 'Affiliate Ads' },
+ { value: 135, name: 'Video Ads' },
+ { value: 1548, name: 'Search Engines' }
+ ],
+ emphasis: {
+ itemStyle: {
+ shadowBlur: 10,
+ shadowOffsetX: 0,
+ shadowColor: 'rgba(0, 0, 0, 0.5)'
+ }
+ }
+ }
+ ]
+};
+
+let currentIndex = -1;
+
+setInterval(function() {
+ var dataLen = option.series[0].data.length;
+ myChart.dispatchAction({
+ type: 'downplay',
+ seriesIndex: 0,
+ dataIndex: currentIndex
+ });
+ currentIndex = (currentIndex + 1) % dataLen;
+ myChart.dispatchAction({
+ type: 'highlight',
+ seriesIndex: 0,
+ dataIndex: currentIndex
+ });
+ myChart.dispatchAction({
+ type: 'showTip',
+ seriesIndex: 0,
+ dataIndex: currentIndex
+ });
+}, 1000);</textarea><pre data-testid="preview" class="prism-editor__editor">option <span class="token operator">=</span> <span class="token punctuation">{</span>
+ tooltip<span class="token operator">:</span> <span class="token punctuation">{</span>
+ trigger<span class="token operator">:</span> <span class="token string">'item'</span><span class="token punctuation">,</span>
+ formatter<span class="token operator">:</span> <span class="token string">'{a} <br/>{b} : {c} ({d}%)'</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ legend<span class="token operator">:</span> <span class="token punctuation">{</span>
+ orient<span class="token operator">:</span> <span class="token string">'vertical'</span><span class="token punctuation">,</span>
+ left<span class="token operator">:</span> <span class="token string">'left'</span><span class="token punctuation">,</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token string">'Direct Access'</span><span class="token punctuation">,</span>
+ <span class="token string">'Email Marketing'</span><span class="token punctuation">,</span>
+ <span class="token string">'Affiliate Ads'</span><span class="token punctuation">,</span>
+ <span class="token string">'Video Ads'</span><span class="token punctuation">,</span>
+ <span class="token string">'Search Engines'</span>
+ <span class="token punctuation">]</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ series<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ name<span class="token operator">:</span> <span class="token string">'Access Source'</span><span class="token punctuation">,</span>
+ type<span class="token operator">:</span> <span class="token string">'pie'</span><span class="token punctuation">,</span>
+ radius<span class="token operator">:</span> <span class="token string">'55%'</span><span class="token punctuation">,</span>
+ center<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'50%'</span><span class="token punctuation">,</span> <span class="token string">'60%'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span> value<span class="token operator">:</span> <span class="token number">335</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">'Direct Access'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span> value<span class="token operator">:</span> <span class="token number">310</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">'Email Marketing'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span> value<span class="token operator">:</span> <span class="token number">234</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">'Affiliate Ads'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span> value<span class="token operator">:</span> <span class="token number">135</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">'Video Ads'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span> value<span class="token operator">:</span> <span class="token number">1548</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">'Search Engines'</span> <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span><span class="token punctuation">,</span>
+ emphasis<span class="token operator">:</span> <span class="token punctuation">{</span>
+ itemStyle<span class="token operator">:</span> <span class="token punctuation">{</span>
+ shadowBlur<span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span>
+ shadowOffsetX<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
+ shadowColor<span class="token operator">:</span> <span class="token string">'rgba(0, 0, 0, 0.5)'</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span>
+
+<span class="token keyword">let</span> currentIndex <span class="token operator">=</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">;</span>
+
+<span class="token function">setInterval</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+ <span class="token keyword">var</span> dataLen <span class="token operator">=</span> option<span class="token punctuation">.</span>series<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>length<span class="token punctuation">;</span>
+ myChart<span class="token punctuation">.</span><span class="token function">dispatchAction</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'downplay'</span><span class="token punctuation">,</span>
+ seriesIndex<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
+ dataIndex<span class="token operator">:</span> currentIndex
+ <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+ currentIndex <span class="token operator">=</span> <span class="token punctuation">(</span>currentIndex <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token operator">%</span> dataLen<span class="token punctuation">;</span>
+ myChart<span class="token punctuation">.</span><span class="token function">dispatchAction</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'highlight'</span><span class="token punctuation">,</span>
+ seriesIndex<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
+ dataIndex<span class="token operator">:</span> currentIndex
+ <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+ myChart<span class="token punctuation">.</span><span class="token function">dispatchAction</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'showTip'</span><span class="token punctuation">,</span>
+ seriesIndex<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
+ dataIndex<span class="token operator">:</span> currentIndex
+ <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 [...]
+ <span class="token comment">// This listener is listening to a `zrender event`.</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+myChart<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+ <span class="token comment">// This listener is listening to a `echarts event`.</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" [...]
+ <span class="token comment">// No "target" means that mouse/pointer is not on</span>
+ <span class="token comment">// any of the graphic elements, which is "blank".</span>
+ <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>event<span class="token punctuation">.</span>target<span class="token punctuation">)</span> <span class="token punctuation">{</span>
+ <span class="token comment">// Click on blank. Do something.</span>
+ <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" [...]
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
+ <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 type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+ <script>var _hmt=_hmt||[];!function(){var e=document.createElement("script");e.src="https://hm.baidu.com/hm.js?54b918eee37cb8a7045f0fd0f0b24395";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)}()</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..17d868f
--- /dev/null
+++ b/docs/en/concepts/legend/index.html
@@ -0,0 +1,128 @@
+<!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">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/ec [...]
+ </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="ht [...]
+ legend: {
+ // Try 'horizontal'
+ orient: 'vertical',
+ right: 10,
+ top: 'center'
+ },
+ dataset: {
+ source: [
+ ['product', '2015', '2016', '2017'],
+ ['Matcha Latte', 43.3, 85.8, 93.7],
+ ['Milk Tea', 83.1, 73.4, 55.1],
+ ['Cheese Cocoa', 86.4, 65.2, 82.5],
+ ['Walnut Brownie', 72.4, 53.9, 39.1]
+ ]
+ },
+ xAxis: { type: 'category' },
+ yAxis: {},
+ series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
+};</textarea><pre data-testid="preview" class="prism-editor__editor">option <span class="token operator">=</span> <span class="token punctuation">{</span>
+ legend<span class="token operator">:</span> <span class="token punctuation">{</span>
+ <span class="token comment">// Try 'horizontal'</span>
+ orient<span class="token operator">:</span> <span class="token string">'vertical'</span><span class="token punctuation">,</span>
+ right<span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span>
+ top<span class="token operator">:</span> <span class="token string">'center'</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ dataset<span class="token operator">:</span> <span class="token punctuation">{</span>
+ source<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">[</span><span class="token string">'product'</span><span class="token punctuation">,</span> <span class="token string">'2015'</span><span class="token punctuation">,</span> <span class="token string">'2016'</span><span class="token punctuation">,</span> <span class="token string">'2017'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Matcha Latte'</span><span class="token punctuation">,</span> <span class="token number">43.3</span><span class="token punctuation">,</span> <span class="token number">85.8</span><span class="token punctuation">,</span> <span class="token number">93.7</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Milk Tea'</span><span class="token punctuation">,</span> <span class="token number">83.1</span><span class="token punctuation">,</span> <span class="token number">73.4</span><span class="token punctuation">,</span> <span class="token number">55.1</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Cheese Cocoa'</span><span class="token punctuation">,</span> <span class="token number">86.4</span><span class="token punctuation">,</span> <span class="token number">65.2</span><span class="token punctuation">,</span> <span class="token number">82.5</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Walnut Brownie'</span><span class="token punctuation">,</span> <span class="token number">72.4</span><span class="token punctuation">,</span> <span class="token number">53.9</span><span class="token punctuation">,</span> <span class="token number">39.1</span><span class="token punctuation">]</span>
+ <span class="token punctuation">]</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ xAxis<span class="token operator">:</span> <span class="token punctuation">{</span> type<span class="token operator">:</span> <span class="token string">'category'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ yAxis<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
+ series<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> type<span class="token operator">:</span> <span class="token string">'bar'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> type<span class="token operator">:</span> <span class="token string">'bar'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span [...]
+<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" str [...]
+ legend<span class="token operator">:</span> <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'scroll'</span><span class="token punctuation">,</span>
+ orient<span class="token operator">:</span> <span class="token string">'vertical'</span><span class="token punctuation">,</span>
+ right<span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span>
+ top<span class="token operator">:</span> <span class="token number">20</span><span class="token punctuation">,</span>
+ bottom<span class="token operator">:</span> <span class="token number">20</span><span class="token punctuation">,</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'Legend A'</span><span class="token punctuation">,</span> <span class="token string">'Legend B'</span><span class="token punctuation">,</span> <span class="token string">'Legend C'</span> <span class="token comment">/* ... */</span><span class="token punctuation">,</span> <span class="token punctuation">,</span> <span class="token string">'Legend x'</span><span class="token pu [...]
+ <span class="token comment">// ...</span>
+ <span class="token punctuation">}</span>
+ <span class="token comment">// ...</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v [...]
+ legend<span class="token operator">:</span> <span class="token punctuation">{</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'Legend A'</span><span class="token punctuation">,</span> <span class="token string">'Legend B'</span><span class="token punctuation">,</span> <span class="token string">'Legend C'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ backgroundColor<span class="token operator">:</span> <span class="token string">'#ccc'</span><span class="token punctuation">,</span>
+ textStyle<span class="token operator">:</span> <span class="token punctuation">{</span>
+ color<span class="token operator">:</span> <span class="token string">'#ccc'</span>
+ <span class="token comment">// ...</span>
+ <span class="token punctuation">}</span>
+ <span class="token comment">// ...</span>
+ <span class="token punctuation">}</span>
+ <span class="token comment">// ...</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v [...]
+ legend<span class="token operator">:</span> <span class="token punctuation">{</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'Legend A'</span><span class="token punctuation">,</span> <span class="token string">'Legend B'</span><span class="token punctuation">,</span> <span class="token string">'Legend C'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ icon<span class="token operator">:</span> <span class="token string">'rect'</span>
+ <span class="token comment">// ...</span>
+ <span class="token punctuation">}</span>
+ <span class="token comment">// ...</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v [...]
+ legend<span class="token operator">:</span> <span class="token punctuation">{</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'Legend A'</span><span class="token punctuation">,</span> <span class="token string">'Legend B'</span><span class="token punctuation">,</span> <span class="token string">'Legend C'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ selected<span class="token operator">:</span> <span class="token punctuation">{</span>
+ <span class="token string">'Legend A'</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
+ <span class="token string">'Legend B'</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
+ <span class="token string">'Legend C'</span><span class="token operator">:</span> <span class="token boolean">false</span>
+ <span class="token punctuation">}</span>
+ <span class="token comment">// ...</span>
+ <span class="token punctuation">}</span>
+ <span class="token comment">// ...</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v [...]
+ legend<span class="token operator">:</span> <span class="token punctuation">{</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ name<span class="token operator">:</span> <span class="token string">'Legend A'</span><span class="token punctuation">,</span>
+ icon<span class="token operator">:</span> <span class="token string">'rect'</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ name<span class="token operator">:</span> <span class="token string">'Legend B'</span><span class="token punctuation">,</span>
+ icon<span class="token operator">:</span> <span class="token string">'circle'</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ name<span class="token operator">:</span> <span class="token string">'Legend C'</span><span class="token punctuation">,</span>
+ icon<span class="token operator">:</span> <span class="token string">'pin'</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span>
+ <span class="token comment">// ...</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ series<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ name<span class="token operator">:</span> <span class="token string">'Legend A'</span>
+ <span class="token comment">// ...</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ name<span class="token operator">:</span> <span class="token string">'Legend B'</span>
+ <span class="token comment">// ...</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ name<span class="token operator">:</span> <span class="token string">'Legend C'</span>
+ <span class="token comment">// ...</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span>
+ <span class="token comment">// ...</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v [...]
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
+ <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 type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+ <script>var _hmt=_hmt||[];!function(){var e=document.createElement("script");e.src="https://hm.baidu.com/hm.js?54b918eee37cb8a7045f0fd0f0b24395";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)}()</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..20833ed
--- /dev/null
+++ b/docs/en/concepts/style/index.html
@@ -0,0 +1,456 @@
+<!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">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/ec [...]
+ </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="ht [...]
+<span class="token comment">// Assume the theme name is "vintage".</span>
+$<span class="token punctuation">.</span><span class="token function">getJSON</span><span class="token punctuation">(</span><span class="token string">'xxx/xxx/vintage.json'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">themeJSON</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+ echarts<span class="token punctuation">.</span><span class="token function">registerTheme</span><span class="token punctuation">(</span><span class="token string">'vintage'</span><span class="token punctuation">,</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span>themeJSON<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token p [...]
+ <span class="token keyword">var</span> chart <span class="token operator">=</span> echarts<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span>dom<span class="token punctuation">,</span> <span class="token string">'vintage'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" [...]
+<span class="token keyword">var</span> chart <span class="token operator">=</span> echarts<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span>dom<span class="token punctuation">,</span> <span class="token string">'vintage'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+<span class="token comment">// ...</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 [...]
+ <span class="token comment">// Global palette:</span>
+ color<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token string">'#c23531'</span><span class="token punctuation">,</span>
+ <span class="token string">'#2f4554'</span><span class="token punctuation">,</span>
+ <span class="token string">'#61a0a8'</span><span class="token punctuation">,</span>
+ <span class="token string">'#d48265'</span><span class="token punctuation">,</span>
+ <span class="token string">'#91c7ae'</span><span class="token punctuation">,</span>
+ <span class="token string">'#749f83'</span><span class="token punctuation">,</span>
+ <span class="token string">'#ca8622'</span><span class="token punctuation">,</span>
+ <span class="token string">'#bda29a'</span><span class="token punctuation">,</span>
+ <span class="token string">'#6e7074'</span><span class="token punctuation">,</span>
+ <span class="token string">'#546570'</span><span class="token punctuation">,</span>
+ <span class="token string">'#c4ccd3'</span>
+ <span class="token punctuation">]</span><span class="token punctuation">,</span>
+
+ series<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span>
+ <span class="token comment">// A palette only work for the series:</span>
+ color<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token string">'#dd6b66'</span><span class="token punctuation">,</span>
+ <span class="token string">'#759aa0'</span><span class="token punctuation">,</span>
+ <span class="token string">'#e69d87'</span><span class="token punctuation">,</span>
+ <span class="token string">'#8dc1a9'</span><span class="token punctuation">,</span>
+ <span class="token string">'#ea7e53'</span><span class="token punctuation">,</span>
+ <span class="token string">'#eedd78'</span><span class="token punctuation">,</span>
+ <span class="token string">'#73a373'</span><span class="token punctuation">,</span>
+ <span class="token string">'#73b9bc'</span><span class="token punctuation">,</span>
+ <span class="token string">'#7289ab'</span><span class="token punctuation">,</span>
+ <span class="token string">'#91ca8c'</span><span class="token punctuation">,</span>
+ <span class="token string">'#f49f42'</span>
+ <span class="token punctuation">]</span>
+ <span class="token comment">// ...</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'pie'</span><span class="token punctuation">,</span>
+ <span class="token comment">// A palette only work for the series:</span>
+ color<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token string">'#37A2DA'</span><span class="token punctuation">,</span>
+ <span class="token string">'#32C5E9'</span><span class="token punctuation">,</span>
+ <span class="token string">'#67E0E3'</span><span class="token punctuation">,</span>
+ <span class="token string">'#9FE6B8'</span><span class="token punctuation">,</span>
+ <span class="token string">'#FFDB5C'</span><span class="token punctuation">,</span>
+ <span class="token string">'#ff9f7f'</span><span class="token punctuation">,</span>
+ <span class="token string">'#fb7293'</span><span class="token punctuation">,</span>
+ <span class="token string">'#E062AE'</span><span class="token punctuation">,</span>
+ <span class="token string">'#E690D1'</span><span class="token punctuation">,</span>
+ <span class="token string">'#e7bcf3'</span><span class="token punctuation">,</span>
+ <span class="token string">'#9d96f5'</span><span class="token punctuation">,</span>
+ <span class="token string">'#8378EA'</span><span class="token punctuation">,</span>
+ <span class="token string">'#96BFFF'</span>
+ <span class="token punctuation">]</span>
+ <span class="token comment">// ...</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v [...]
+ [
+ [28604, 77, 17096869, 'Australia', 1990],
+ [31163, 77.4, 27662440, 'Canada', 1990],
+ [1516, 68, 1154605773, 'China', 1990],
+ [13670, 74.7, 10582082, 'Cuba', 1990],
+ [28599, 75, 4986705, 'Finland', 1990],
+ [29476, 77.1, 56943299, 'France', 1990],
+ [31476, 75.4, 78958237, 'Germany', 1990],
+ [28666, 78.1, 254830, 'Iceland', 1990],
+ [1777, 57.7, 870601776, 'India', 1990],
+ [29550, 79.1, 122249285, 'Japan', 1990],
+ [2076, 67.9, 20194354, 'North Korea', 1990],
+ [12087, 72, 42972254, 'South Korea', 1990],
+ [24021, 75.4, 3397534, 'New Zealand', 1990],
+ [43296, 76.8, 4240375, 'Norway', 1990],
+ [10088, 70.8, 38195258, 'Poland', 1990],
+ [19349, 69.6, 147568552, 'Russia', 1990],
+ [10670, 67.3, 53994605, 'Turkey', 1990],
+ [26424, 75.7, 57110117, 'United Kingdom', 1990],
+ [37062, 75.4, 252847810, 'United States', 1990]
+ ],
+ [
+ [44056, 81.8, 23968973, 'Australia', 2015],
+ [43294, 81.7, 35939927, 'Canada', 2015],
+ [13334, 76.9, 1376048943, 'China', 2015],
+ [21291, 78.5, 11389562, 'Cuba', 2015],
+ [38923, 80.8, 5503457, 'Finland', 2015],
+ [37599, 81.9, 64395345, 'France', 2015],
+ [44053, 81.1, 80688545, 'Germany', 2015],
+ [42182, 82.8, 329425, 'Iceland', 2015],
+ [5903, 66.8, 1311050527, 'India', 2015],
+ [36162, 83.5, 126573481, 'Japan', 2015],
+ [1390, 71.4, 25155317, 'North Korea', 2015],
+ [34644, 80.7, 50293439, 'South Korea', 2015],
+ [34186, 80.6, 4528526, 'New Zealand', 2015],
+ [64304, 81.6, 5210967, 'Norway', 2015],
+ [24787, 77.3, 38611794, 'Poland', 2015],
+ [23038, 73.13, 143456918, 'Russia', 2015],
+ [19360, 76.5, 78665830, 'Turkey', 2015],
+ [38225, 81.4, 64715810, 'United Kingdom', 2015],
+ [53354, 79.1, 321773631, 'United States', 2015]
+ ]
+];
+
+option = {
+ backgroundColor: {
+ type: 'radial',
+ x: 0.3,
+ y: 0.3,
+ r: 0.8,
+ colorStops: [
+ {
+ offset: 0,
+ color: '#f7f8fa'
+ },
+ {
+ offset: 1,
+ color: '#cdd0d5'
+ }
+ ]
+ },
+ grid: {
+ left: 10,
+ containLabel: true,
+ bottom: 10,
+ top: 10,
+ right: 30
+ },
+ xAxis: {
+ splitLine: {
+ show: false
+ }
+ },
+ yAxis: {
+ splitLine: {
+ show: false
+ },
+ scale: true
+ },
+ series: [
+ {
+ name: '1990',
+ data: data[0],
+ type: 'scatter',
+ symbolSize: function(data) {
+ return Math.sqrt(data[2]) / 5e2;
+ },
+ emphasis: {
+ focus: 'series',
+ label: {
+ show: true,
+ formatter: function(param) {
+ return param.data[3];
+ },
+ position: 'top'
+ }
+ },
+ itemStyle: {
+ shadowBlur: 10,
+ shadowColor: 'rgba(120, 36, 50, 0.5)',
+ shadowOffsetY: 5,
+ color: {
+ type: 'radial',
+ x: 0.4,
+ y: 0.3,
+ r: 1,
+ colorStops: [
+ {
+ offset: 0,
+ color: 'rgb(251, 118, 123)'
+ },
+ {
+ offset: 1,
+ color: 'rgb(204, 46, 72)'
+ }
+ ]
+ }
+ }
+ },
+ {
+ name: '2015',
+ data: data[1],
+ type: 'scatter',
+ symbolSize: function(data) {
+ return Math.sqrt(data[2]) / 5e2;
+ },
+ emphasis: {
+ focus: 'series',
+ label: {
+ show: true,
+ formatter: function(param) {
+ return param.data[3];
+ },
+ position: 'top'
+ }
+ },
+ itemStyle: {
+ shadowBlur: 10,
+ shadowColor: 'rgba(25, 100, 150, 0.5)',
+ shadowOffsetY: 5,
+ color: {
+ type: 'radial',
+ x: 0.4,
+ y: 0.3,
+ r: 1,
+ colorStops: [
+ {
+ offset: 0,
+ color: 'rgb(129, 227, 238)'
+ },
+ {
+ offset: 1,
+ color: 'rgb(25, 183, 207)'
+ }
+ ]
+ }
+ }
+ }
+ ]
+};</textarea><pre data-testid="preview" class="prism-editor__editor"><span class="token keyword">var</span> data <span class="token operator">=</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">[</span>
+ <span class="token punctuation">[</span><span class="token number">28604</span><span class="token punctuation">,</span> <span class="token number">77</span><span class="token punctuation">,</span> <span class="token number">17096869</span><span class="token punctuation">,</span> <span class="token string">'Australia'</span><span class="token punctuation">,</span> <span class="token number">1990</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token number">31163</span><span class="token punctuation">,</span> <span class="token number">77.4</span><span class="token punctuation">,</span> <span class="token number">27662440</span><span class="token punctuation">,</span> <span class="token string">'Canada'</span><span class="token punctuation">,</span> <span class="token number">1990</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token number">1516</span><span class="token punctuation">,</span> <span class="token number">68</span><span class="token punctuation">,</span> <span class="token number">1154605773</span><span class="token punctuation">,</span> <span class="token string">'China'</span><span class="token punctuation">,</span> <span class="token number">1990</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token number">13670</span><span class="token punctuation">,</span> <span class="token number">74.7</span><span class="token punctuation">,</span> <span class="token number">10582082</span><span class="token punctuation">,</span> <span class="token string">'Cuba'</span><span class="token punctuation">,</span> <span class="token number">1990</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token number">28599</span><span class="token punctuation">,</span> <span class="token number">75</span><span class="token punctuation">,</span> <span class="token number">4986705</span><span class="token punctuation">,</span> <span class="token string">'Finland'</span><span class="token punctuation">,</span> <span class="token number">1990</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token number">29476</span><span class="token punctuation">,</span> <span class="token number">77.1</span><span class="token punctuation">,</span> <span class="token number">56943299</span><span class="token punctuation">,</span> <span class="token string">'France'</span><span class="token punctuation">,</span> <span class="token number">1990</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token number">31476</span><span class="token punctuation">,</span> <span class="token number">75.4</span><span class="token punctuation">,</span> <span class="token number">78958237</span><span class="token punctuation">,</span> <span class="token string">'Germany'</span><span class="token punctuation">,</span> <span class="token number">1990</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token number">28666</span><span class="token punctuation">,</span> <span class="token number">78.1</span><span class="token punctuation">,</span> <span class="token number">254830</span><span class="token punctuation">,</span> <span class="token string">'Iceland'</span><span class="token punctuation">,</span> <span class="token number">1990</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token number">1777</span><span class="token punctuation">,</span> <span class="token number">57.7</span><span class="token punctuation">,</span> <span class="token number">870601776</span><span class="token punctuation">,</span> <span class="token string">'India'</span><span class="token punctuation">,</span> <span class="token number">1990</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token number">29550</span><span class="token punctuation">,</span> <span class="token number">79.1</span><span class="token punctuation">,</span> <span class="token number">122249285</span><span class="token punctuation">,</span> <span class="token string">'Japan'</span><span class="token punctuation">,</span> <span class="token number">1990</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token number">2076</span><span class="token punctuation">,</span> <span class="token number">67.9</span><span class="token punctuation">,</span> <span class="token number">20194354</span><span class="token punctuation">,</span> <span class="token string">'North Korea'</span><span class="token punctuation">,</span> <span class="token number">1990</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token number">12087</span><span class="token punctuation">,</span> <span class="token number">72</span><span class="token punctuation">,</span> <span class="token number">42972254</span><span class="token punctuation">,</span> <span class="token string">'South Korea'</span><span class="token punctuation">,</span> <span class="token number">1990</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token number">24021</span><span class="token punctuation">,</span> <span class="token number">75.4</span><span class="token punctuation">,</span> <span class="token number">3397534</span><span class="token punctuation">,</span> <span class="token string">'New Zealand'</span><span class="token punctuation">,</span> <span class="token number">1990</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token number">43296</span><span class="token punctuation">,</span> <span class="token number">76.8</span><span class="token punctuation">,</span> <span class="token number">4240375</span><span class="token punctuation">,</span> <span class="token string">'Norway'</span><span class="token punctuation">,</span> <span class="token number">1990</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token number">10088</span><span class="token punctuation">,</span> <span class="token number">70.8</span><span class="token punctuation">,</span> <span class="token number">38195258</span><span class="token punctuation">,</span> <span class="token string">'Poland'</span><span class="token punctuation">,</span> <span class="token number">1990</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token number">19349</span><span class="token punctuation">,</span> <span class="token number">69.6</span><span class="token punctuation">,</span> <span class="token number">147568552</span><span class="token punctuation">,</span> <span class="token string">'Russia'</span><span class="token punctuation">,</span> <span class="token number">1990</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token number">10670</span><span class="token punctuation">,</span> <span class="token number">67.3</span><span class="token punctuation">,</span> <span class="token number">53994605</span><span class="token punctuation">,</span> <span class="token string">'Turkey'</span><span class="token punctuation">,</span> <span class="token number">1990</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token number">26424</span><span class="token punctuation">,</span> <span class="token number">75.7</span><span class="token punctuation">,</span> <span class="token number">57110117</span><span class="token punctuation">,</span> <span class="token string">'United Kingdom'</span><span class="token punctuation">,</span> <span class="token number">1990</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token number">37062</span><span class="token punctuation">,</span> <span class="token number">75.4</span><span class="token punctuation">,</span> <span class="token number">252847810</span><span class="token punctuation">,</span> <span class="token string">'United States'</span><span class="token punctuation">,</span> <span class="token number">1990</span><span class="token punctuation">]</span>
+ <span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span>
+ <span class="token punctuation">[</span><span class="token number">44056</span><span class="token punctuation">,</span> <span class="token number">81.8</span><span class="token punctuation">,</span> <span class="token number">23968973</span><span class="token punctuation">,</span> <span class="token string">'Australia'</span><span class="token punctuation">,</span> <span class="token number">2015</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token number">43294</span><span class="token punctuation">,</span> <span class="token number">81.7</span><span class="token punctuation">,</span> <span class="token number">35939927</span><span class="token punctuation">,</span> <span class="token string">'Canada'</span><span class="token punctuation">,</span> <span class="token number">2015</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token number">13334</span><span class="token punctuation">,</span> <span class="token number">76.9</span><span class="token punctuation">,</span> <span class="token number">1376048943</span><span class="token punctuation">,</span> <span class="token string">'China'</span><span class="token punctuation">,</span> <span class="token number">2015</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token number">21291</span><span class="token punctuation">,</span> <span class="token number">78.5</span><span class="token punctuation">,</span> <span class="token number">11389562</span><span class="token punctuation">,</span> <span class="token string">'Cuba'</span><span class="token punctuation">,</span> <span class="token number">2015</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token number">38923</span><span class="token punctuation">,</span> <span class="token number">80.8</span><span class="token punctuation">,</span> <span class="token number">5503457</span><span class="token punctuation">,</span> <span class="token string">'Finland'</span><span class="token punctuation">,</span> <span class="token number">2015</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token number">37599</span><span class="token punctuation">,</span> <span class="token number">81.9</span><span class="token punctuation">,</span> <span class="token number">64395345</span><span class="token punctuation">,</span> <span class="token string">'France'</span><span class="token punctuation">,</span> <span class="token number">2015</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token number">44053</span><span class="token punctuation">,</span> <span class="token number">81.1</span><span class="token punctuation">,</span> <span class="token number">80688545</span><span class="token punctuation">,</span> <span class="token string">'Germany'</span><span class="token punctuation">,</span> <span class="token number">2015</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token number">42182</span><span class="token punctuation">,</span> <span class="token number">82.8</span><span class="token punctuation">,</span> <span class="token number">329425</span><span class="token punctuation">,</span> <span class="token string">'Iceland'</span><span class="token punctuation">,</span> <span class="token number">2015</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token number">5903</span><span class="token punctuation">,</span> <span class="token number">66.8</span><span class="token punctuation">,</span> <span class="token number">1311050527</span><span class="token punctuation">,</span> <span class="token string">'India'</span><span class="token punctuation">,</span> <span class="token number">2015</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token number">36162</span><span class="token punctuation">,</span> <span class="token number">83.5</span><span class="token punctuation">,</span> <span class="token number">126573481</span><span class="token punctuation">,</span> <span class="token string">'Japan'</span><span class="token punctuation">,</span> <span class="token number">2015</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token number">1390</span><span class="token punctuation">,</span> <span class="token number">71.4</span><span class="token punctuation">,</span> <span class="token number">25155317</span><span class="token punctuation">,</span> <span class="token string">'North Korea'</span><span class="token punctuation">,</span> <span class="token number">2015</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token number">34644</span><span class="token punctuation">,</span> <span class="token number">80.7</span><span class="token punctuation">,</span> <span class="token number">50293439</span><span class="token punctuation">,</span> <span class="token string">'South Korea'</span><span class="token punctuation">,</span> <span class="token number">2015</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token number">34186</span><span class="token punctuation">,</span> <span class="token number">80.6</span><span class="token punctuation">,</span> <span class="token number">4528526</span><span class="token punctuation">,</span> <span class="token string">'New Zealand'</span><span class="token punctuation">,</span> <span class="token number">2015</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token number">64304</span><span class="token punctuation">,</span> <span class="token number">81.6</span><span class="token punctuation">,</span> <span class="token number">5210967</span><span class="token punctuation">,</span> <span class="token string">'Norway'</span><span class="token punctuation">,</span> <span class="token number">2015</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token number">24787</span><span class="token punctuation">,</span> <span class="token number">77.3</span><span class="token punctuation">,</span> <span class="token number">38611794</span><span class="token punctuation">,</span> <span class="token string">'Poland'</span><span class="token punctuation">,</span> <span class="token number">2015</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token number">23038</span><span class="token punctuation">,</span> <span class="token number">73.13</span><span class="token punctuation">,</span> <span class="token number">143456918</span><span class="token punctuation">,</span> <span class="token string">'Russia'</span><span class="token punctuation">,</span> <span class="token number">2015</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token number">19360</span><span class="token punctuation">,</span> <span class="token number">76.5</span><span class="token punctuation">,</span> <span class="token number">78665830</span><span class="token punctuation">,</span> <span class="token string">'Turkey'</span><span class="token punctuation">,</span> <span class="token number">2015</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token number">38225</span><span class="token punctuation">,</span> <span class="token number">81.4</span><span class="token punctuation">,</span> <span class="token number">64715810</span><span class="token punctuation">,</span> <span class="token string">'United Kingdom'</span><span class="token punctuation">,</span> <span class="token number">2015</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token number">53354</span><span class="token punctuation">,</span> <span class="token number">79.1</span><span class="token punctuation">,</span> <span class="token number">321773631</span><span class="token punctuation">,</span> <span class="token string">'United States'</span><span class="token punctuation">,</span> <span class="token number">2015</span><span class="token punctuation">]</span>
+ <span class="token punctuation">]</span>
+<span class="token punctuation">]</span><span class="token punctuation">;</span>
+
+option <span class="token operator">=</span> <span class="token punctuation">{</span>
+ backgroundColor<span class="token operator">:</span> <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'radial'</span><span class="token punctuation">,</span>
+ x<span class="token operator">:</span> <span class="token number">0.3</span><span class="token punctuation">,</span>
+ y<span class="token operator">:</span> <span class="token number">0.3</span><span class="token punctuation">,</span>
+ r<span class="token operator">:</span> <span class="token number">0.8</span><span class="token punctuation">,</span>
+ colorStops<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ offset<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
+ color<span class="token operator">:</span> <span class="token string">'#f7f8fa'</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ offset<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
+ color<span class="token operator">:</span> <span class="token string">'#cdd0d5'</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ grid<span class="token operator">:</span> <span class="token punctuation">{</span>
+ left<span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span>
+ containLabel<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
+ bottom<span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span>
+ top<span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span>
+ right<span class="token operator">:</span> <span class="token number">30</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ xAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
+ splitLine<span class="token operator">:</span> <span class="token punctuation">{</span>
+ show<span class="token operator">:</span> <span class="token boolean">false</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ yAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
+ splitLine<span class="token operator">:</span> <span class="token punctuation">{</span>
+ show<span class="token operator">:</span> <span class="token boolean">false</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ scale<span class="token operator">:</span> <span class="token boolean">true</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ series<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ name<span class="token operator">:</span> <span class="token string">'1990'</span><span class="token punctuation">,</span>
+ data<span class="token operator">:</span> data<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ type<span class="token operator">:</span> <span class="token string">'scatter'</span><span class="token punctuation">,</span>
+ <span class="token function-variable function">symbolSize</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+ <span class="token keyword">return</span> Math<span class="token punctuation">.</span><span class="token function">sqrt</span><span class="token punctuation">(</span>data<span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token operator">/</span> <span class="token number">5e2</span><span class="token punctuation">;</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ emphasis<span class="token operator">:</span> <span class="token punctuation">{</span>
+ focus<span class="token operator">:</span> <span class="token string">'series'</span><span class="token punctuation">,</span>
+ label<span class="token operator">:</span> <span class="token punctuation">{</span>
+ show<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
+ <span class="token function-variable function">formatter</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">param</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+ <span class="token keyword">return</span> param<span class="token punctuation">.</span>data<span class="token punctuation">[</span><span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ position<span class="token operator">:</span> <span class="token string">'top'</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ itemStyle<span class="token operator">:</span> <span class="token punctuation">{</span>
+ shadowBlur<span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span>
+ shadowColor<span class="token operator">:</span> <span class="token string">'rgba(120, 36, 50, 0.5)'</span><span class="token punctuation">,</span>
+ shadowOffsetY<span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span>
+ color<span class="token operator">:</span> <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'radial'</span><span class="token punctuation">,</span>
+ x<span class="token operator">:</span> <span class="token number">0.4</span><span class="token punctuation">,</span>
+ y<span class="token operator">:</span> <span class="token number">0.3</span><span class="token punctuation">,</span>
+ r<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
+ colorStops<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ offset<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
+ color<span class="token operator">:</span> <span class="token string">'rgb(251, 118, 123)'</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ offset<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
+ color<span class="token operator">:</span> <span class="token string">'rgb(204, 46, 72)'</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ name<span class="token operator">:</span> <span class="token string">'2015'</span><span class="token punctuation">,</span>
+ data<span class="token operator">:</span> data<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ type<span class="token operator">:</span> <span class="token string">'scatter'</span><span class="token punctuation">,</span>
+ <span class="token function-variable function">symbolSize</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+ <span class="token keyword">return</span> Math<span class="token punctuation">.</span><span class="token function">sqrt</span><span class="token punctuation">(</span>data<span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token operator">/</span> <span class="token number">5e2</span><span class="token punctuation">;</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ emphasis<span class="token operator">:</span> <span class="token punctuation">{</span>
+ focus<span class="token operator">:</span> <span class="token string">'series'</span><span class="token punctuation">,</span>
+ label<span class="token operator">:</span> <span class="token punctuation">{</span>
+ show<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
+ <span class="token function-variable function">formatter</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">param</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+ <span class="token keyword">return</span> param<span class="token punctuation">.</span>data<span class="token punctuation">[</span><span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ position<span class="token operator">:</span> <span class="token string">'top'</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ itemStyle<span class="token operator">:</span> <span class="token punctuation">{</span>
+ shadowBlur<span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span>
+ shadowColor<span class="token operator">:</span> <span class="token string">'rgba(25, 100, 150, 0.5)'</span><span class="token punctuation">,</span>
+ shadowOffsetY<span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span>
+ color<span class="token operator">:</span> <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'radial'</span><span class="token punctuation">,</span>
+ x<span class="token operator">:</span> <span class="token number">0.4</span><span class="token punctuation">,</span>
+ y<span class="token operator">:</span> <span class="token number">0.3</span><span class="token punctuation">,</span>
+ r<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
+ colorStops<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ offset<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
+ color<span class="token operator">:</span> <span class="token string">'rgb(129, 227, 238)'</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ offset<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
+ color<span class="token operator">:</span> <span class="token string">'rgb(25, 183, 207)'</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" str [...]
+ series<span class="token operator">:</span> <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'scatter'</span><span class="token punctuation">,</span>
+
+ <span class="token comment">// Styles for normal state.</span>
+ itemStyle<span class="token operator">:</span> <span class="token punctuation">{</span>
+ <span class="token comment">// Color of the point.</span>
+ color<span class="token operator">:</span> <span class="token string">'red'</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ label<span class="token operator">:</span> <span class="token punctuation">{</span>
+ show<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
+ <span class="token comment">// Text of labels.</span>
+ formatter<span class="token operator">:</span> <span class="token string">'This is a normal label.'</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+
+ <span class="token comment">// Styles for emphasis state.</span>
+ emphasis<span class="token operator">:</span> <span class="token punctuation">{</span>
+ itemStyle<span class="token operator">:</span> <span class="token punctuation">{</span>
+ <span class="token comment">// Color in emphasis state.</span>
+ color<span class="token operator">:</span> <span class="token string">'blue'</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ label<span class="token operator">:</span> <span class="token punctuation">{</span>
+ show<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
+ <span class="token comment">// Text in emphasis.</span>
+ formatter<span class="token operator">:</span> <span class="token string">'This is a emphasis label.'</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v [...]
+ series<span class="token operator">:</span> <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'scatter'</span><span class="token punctuation">,</span>
+
+ itemStyle<span class="token operator">:</span> <span class="token punctuation">{</span>
+ <span class="token comment">// Styles for normal state.</span>
+ normal<span class="token operator">:</span> <span class="token punctuation">{</span>
+ color<span class="token operator">:</span> <span class="token string">'red'</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token comment">// Styles for emphasis state.</span>
+ emphasis<span class="token operator">:</span> <span class="token punctuation">{</span>
+ color<span class="token operator">:</span> <span class="token string">'blue'</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+
+ label<span class="token operator">:</span> <span class="token punctuation">{</span>
+ <span class="token comment">// Styles for normal state.</span>
+ normal<span class="token operator">:</span> <span class="token punctuation">{</span>
+ show<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
+ formatter<span class="token operator">:</span> <span class="token string">'This is a normal label.'</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token comment">// Styles for emphasis state.</span>
+ emphasis<span class="token operator">:</span> <span class="token punctuation">{</span>
+ show<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
+ formatter<span class="token operator">:</span> <span class="token string">'This is a emphasis label.'</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v [...]
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
+ <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 type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+ <script>var _hmt=_hmt||[];!function(){var e=document.createElement("script");e.src="https://hm.baidu.com/hm.js?54b918eee37cb8a7045f0fd0f0b24395";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)}()</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..86971f1
--- /dev/null
+++ b/docs/en/concepts/visual-map/index.html
@@ -0,0 +1,83 @@
+<!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">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/ec [...]
+ </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="ht [...]
+ data<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ <span class="token comment">// every item here is a dataItem</span>
+ value<span class="token operator">:</span> <span class="token number">2323</span><span class="token punctuation">,</span> <span class="token comment">// this is data value</span>
+ itemStyle<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token number">1212</span><span class="token punctuation">,</span> <span class="token comment">// it can also be a value of dataItem, which is a more common case</span>
+ <span class="token number">2323</span><span class="token punctuation">,</span> <span class="token comment">// every data value here is one dimension</span>
+ <span class="token number">4343</span><span class="token punctuation">,</span>
+ <span class="token number">3434</span>
+ <span class="token punctuation">]</span><span class="token punctuation">;</span>
+<span class="token punctuation">}</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 [...]
+ data<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ <span class="token comment">// every item here is a dataItem</span>
+ value<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">3434</span><span class="token punctuation">,</span> <span class="token number">129</span><span class="token punctuation">,</span> <span class="token string">'San Marino'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token comment">// this is data value</span>
+ itemStyle<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token number">1212</span><span class="token punctuation">,</span> <span class="token number">5454</span><span class="token punctuation">,</span> <span class="token string">'Vatican'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token comment">// it can also be a value of dataItem, which is a more common case</span>
+ <span class="token punctuation">[</span><span class="token number">2323</span><span class="token punctuation">,</span> <span class="token number">3223</span><span class="token punctuation">,</span> <span class="token string">'Nauru'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token comment">// every data value here is three dimension</span>
+ <span class="token punctuation">[</span><span class="token number">4343</span><span class="token punctuation">,</span> <span class="token number">23</span><span class="token punctuation">,</span> <span class="token string">'Tuvalu'</span><span class="token punctuation">]</span> <span class="token comment">// If is scatter chart, usually map the first dimension to x axis,</span>
+ <span class="token comment">// the second dimension to y axis,</span>
+ <span class="token comment">// and the third dimension to symbolSize</span>
+ <span class="token punctuation">]</span><span class="token punctuation">;</span>
+<span class="token punctuation">}</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 [...]
+ visualMap<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token comment">// can define multiple visualMap components at the same time</span>
+ <span class="token punctuation">{</span>
+ <span class="token comment">// the first visualMap component</span>
+ type<span class="token operator">:</span> <span class="token string">'continuous'</span> <span class="token comment">// defined as continuous visualMap</span>
+ <span class="token comment">// ...</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ <span class="token comment">// the second visualMap component</span>
+ type<span class="token operator">:</span> <span class="token string">'piecewise'</span> <span class="token comment">// defined as discrete visualMap</span>
+ <span class="token comment">// ...</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span>
+ <span class="token comment">// ...</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v [...]
+ visualMap<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'piecewise'</span><span class="token punctuation">,</span>
+ min<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
+ max<span class="token operator">:</span> <span class="token number">5000</span><span class="token punctuation">,</span>
+ dimension<span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token comment">// the fourth dimension of series.data (i.e. value[3]) is mapped</span>
+ seriesIndex<span class="token operator">:</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token comment">// The fourth series is mapped.</span>
+ inRange<span class="token operator">:</span> <span class="token punctuation">{</span>
+ <span class="token comment">// The visual configuration in the selected range</span>
+ color<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'blue'</span><span class="token punctuation">,</span> <span class="token string">'#121122'</span><span class="token punctuation">,</span> <span class="token string">'red'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token comment">// A list of colors that defines the graph color mapping</span>
+ <span class="token comment">// the minimum value of the data is mapped to 'blue', and</span>
+ <span class="token comment">// the maximum value is mapped to 'red', // the maximum value is mapped to 'red', // the maximum value is mapped to 'red'.</span>
+ <span class="token comment">// The rest is automatically calculated linearly.</span>
+ symbolSize<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">30</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">]</span> <span class="token comment">// Defines the mapping range for the graphic size.</span>
+ <span class="token comment">// The minimum value of the data is mapped to 30, // and the maximum value is mapped to 100.</span>
+ <span class="token comment">// The maximum value is mapped to 100.</span>
+ <span class="token comment">// The rest is calculated linearly automatically.</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ outOfRange<span class="token operator">:</span> <span class="token punctuation">{</span>
+ <span class="token comment">// Check the out of range visual configuration</span>
+ symbolSize<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">30</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">]</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span>
+ <span class="token comment">// ...</span>
+ <span class="token punctuation">]</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v [...]
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
+ <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 type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+ <script>var _hmt=_hmt||[];!function(){var e=document.createElement("script");e.src="https://hm.baidu.com/hm.js?54b918eee37cb8a7045f0fd0f0b24395";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)}()</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..dc7df73
--- /dev/null
+++ b/docs/en/get-started/index.html
@@ -0,0 +1,68 @@
+<!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">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/ec [...]
+ </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="ht [...]
+<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>utf-8<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
+ <span class="token comment"><!-- Include the ECharts file you just downloaded --></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>echarts.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class [...]
+ <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="r [...]
+ <span class="token comment"><!-- Prepare a DOM with a defined width and height for ECharts --></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>main<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="tok [...]
+<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="r [...]
+<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>utf-8<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>ECharts<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span>
+ <span class="token comment"><!-- Include the ECharts file you just downloaded --></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>echarts.min.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span c [...]
+ <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span>
+ <span class="token comment"><!-- Prepare a DOM with a defined width and height for ECharts --></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>main<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="t [...]
+ <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text/javascript<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
+ // Initialize the echarts instance based on the prepared dom
+ var myChart = echarts.init(document.getElementById('main'));
+
+ // Specify the configuration items and data for the chart
+ var option = {
+ title: {
+ text: 'ECharts Getting Started Example'
+ },
+ tooltip: {},
+ legend: {
+ data: ['sales']
+ },
+ xAxis: {
+ data: ['Shirts', 'Cardigans', 'Chiffons', 'Pants', 'Heels', 'Socks']
+ },
+ yAxis: {},
+ series: [
+ {
+ name: 'sales',
+ type: 'bar',
+ data: [5, 20, 36, 10, 10, 20]
+ }
+ ]
+ };
+
+ // Display the chart using the configuration items and data just specified.
+ myChart.setOption(option);
+ <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
+ <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="r [...]
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
+ <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 type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+ <script>var _hmt=_hmt||[];!function(){var e=document.createElement("script");e.src="https://hm.baidu.com/hm.js?54b918eee37cb8a7045f0fd0f0b24395";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)}()</script>
+ </body>
+</html>
diff --git a/docs/en/how-to/chart-types/bar/bar-race/index.html b/docs/en/how-to/chart-types/bar/bar-race/index.html
new file mode 100644
index 0000000..1043c7a
--- /dev/null
+++ b/docs/en/how-to/chart-types/bar/bar-race/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">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/ec [...]
+ </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="ht [...]
+for (let i = 0; i < 5; ++i) {
+ data.push(Math.round(Math.random() * 200));
+}
+
+option = {
+ xAxis: {
+ max: 'dataMax'
+ },
+ yAxis: {
+ type: 'category',
+ data: ['A', 'B', 'C', 'D', 'E'],
+ inverse: true,
+ animationDuration: 300,
+ animationDurationUpdate: 300,
+ max: 2 // only the largest 3 bars will be displayed
+ },
+ series: [
+ {
+ realtimeSort: true,
+ name: 'X',
+ type: 'bar',
+ data: data,
+ label: {
+ show: true,
+ position: 'right',
+ valueAnimation: true
+ }
+ }
+ ],
+ legend: {
+ show: true
+ },
+ animationDuration: 0,
+ animationDurationUpdate: 3000,
+ animationEasing: 'linear',
+ animationEasingUpdate: 'linear'
+};
+
+function run() {
+ var data = option.series[0].data;
+ for (var i = 0; i < data.length; ++i) {
+ if (Math.random() > 0.9) {
+ data[i] += Math.round(Math.random() * 2000);
+ } else {
+ data[i] += Math.round(Math.random() * 200);
+ }
+ }
+ myChart.setOption(option);
+}
+
+setTimeout(function() {
+ run();
+}, 0);
+setInterval(function() {
+ run();
+}, 3000);</textarea><pre data-testid="preview" class="prism-editor__editor"><span class="token keyword">var</span> data <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
+<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</span> <span class="token number">5</span><span class="token punctuation">;</span> <span class="token operator">++</span>i<span class="token punctuation">)</span> <span class="token punctuation">{</span>
+ data<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token function">round</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token number">200</span [...]
+<span class="token punctuation">}</span>
+
+option <span class="token operator">=</span> <span class="token punctuation">{</span>
+ xAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
+ max<span class="token operator">:</span> <span class="token string">'dataMax'</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ yAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'category'</span><span class="token punctuation">,</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'A'</span><span class="token punctuation">,</span> <span class="token string">'B'</span><span class="token punctuation">,</span> <span class="token string">'C'</span><span class="token punctuation">,</span> <span class="token string">'D'</span><span class="token punctuation">,</span> <span class="token string">'E'</span><span class="token punctuation">]</span><span class="toke [...]
+ inverse<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
+ animationDuration<span class="token operator">:</span> <span class="token number">300</span><span class="token punctuation">,</span>
+ animationDurationUpdate<span class="token operator">:</span> <span class="token number">300</span><span class="token punctuation">,</span>
+ max<span class="token operator">:</span> <span class="token number">2</span> <span class="token comment">// only the largest 3 bars will be displayed</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ series<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ realtimeSort<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
+ name<span class="token operator">:</span> <span class="token string">'X'</span><span class="token punctuation">,</span>
+ type<span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span>
+ data<span class="token operator">:</span> data<span class="token punctuation">,</span>
+ label<span class="token operator">:</span> <span class="token punctuation">{</span>
+ show<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
+ position<span class="token operator">:</span> <span class="token string">'right'</span><span class="token punctuation">,</span>
+ valueAnimation<span class="token operator">:</span> <span class="token boolean">true</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span><span class="token punctuation">,</span>
+ legend<span class="token operator">:</span> <span class="token punctuation">{</span>
+ show<span class="token operator">:</span> <span class="token boolean">true</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ animationDuration<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
+ animationDurationUpdate<span class="token operator">:</span> <span class="token number">3000</span><span class="token punctuation">,</span>
+ animationEasing<span class="token operator">:</span> <span class="token string">'linear'</span><span class="token punctuation">,</span>
+ animationEasingUpdate<span class="token operator">:</span> <span class="token string">'linear'</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span>
+
+<span class="token keyword">function</span> <span class="token function">run</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+ <span class="token keyword">var</span> data <span class="token operator">=</span> option<span class="token punctuation">.</span>series<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>data<span class="token punctuation">;</span>
+ <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</span> data<span class="token punctuation">.</span>length<span class="token punctuation">;</span> <span class="token operator">++</span>i<span class="token punctuation">)</span> <span class="token punctuation">{</span>
+ <span class="token keyword">if</span> <span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">></span> <span class="token number">0.9</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+ data<span class="token punctuation">[</span>i<span class="token punctuation">]</span> <span class="token operator">+=</span> Math<span class="token punctuation">.</span><span class="token function">round</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token number">2000 [...]
+ <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
+ data<span class="token punctuation">[</span>i<span class="token punctuation">]</span> <span class="token operator">+=</span> Math<span class="token punctuation">.</span><span class="token function">round</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token number">200< [...]
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span>
+ myChart<span class="token punctuation">.</span><span class="token function">setOption</span><span class="token punctuation">(</span>option<span class="token punctuation">)</span><span class="token punctuation">;</span>
+<span class="token punctuation">}</span>
+
+<span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+ <span class="token function">run</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+<span class="token function">setInterval</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+ <span class="token function">run</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">3000</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 [...]
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
+ <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 type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+ <script>var _hmt=_hmt||[];!function(){var e=document.createElement("script");e.src="https://hm.baidu.com/hm.js?54b918eee37cb8a7045f0fd0f0b24395";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)}()</script>
+ </body>
+</html>
diff --git a/docs/en/how-to/chart-types/bar/basic-bar/index.html b/docs/en/how-to/chart-types/bar/basic-bar/index.html
new file mode 100644
index 0000000..844a08d
--- /dev/null
+++ b/docs/en/how-to/chart-types/bar/basic-bar/index.html
@@ -0,0 +1,200 @@
+<!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">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/ec [...]
+ </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="ht [...]
+live
+
+*/</span>
+option <span class="token operator">=</span> <span class="token punctuation">{</span>
+ xAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'Mon'</span><span class="token punctuation">,</span> <span class="token string">'Tue'</span><span class="token punctuation">,</span> <span class="token string">'Wed'</span><span class="token punctuation">,</span> <span class="token string">'Thu'</span><span class="token punctuation">,</span> <span class="token string">'Fri'</span><span class="token punctuation">,</span> <span [...]
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ yAxis<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
+ series<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">23</span><span class="token punctuation">,</span> <span class="token number">24</span><span class="token punctuation">,</span> <span class="token number">18</span><span class="token punctuation">,</span> <span class="token number">25</span><span class="token punctuation">,</span> <span class="token number">27</span><span class="token punctuation">,</span> <span class="token [...]
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v [...]
+ xAxis: {
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+ },
+ yAxis: {},
+ series: [
+ {
+ type: 'bar',
+ data: [23, 24, 18, 25, 27, 28, 25]
+ },
+ {
+ type: 'bar',
+ data: [26, 24, 18, 22, 23, 20, 27]
+ }
+ ]
+};</textarea><pre data-testid="preview" class="prism-editor__editor">option <span class="token operator">=</span> <span class="token punctuation">{</span>
+ xAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'Mon'</span><span class="token punctuation">,</span> <span class="token string">'Tue'</span><span class="token punctuation">,</span> <span class="token string">'Wed'</span><span class="token punctuation">,</span> <span class="token string">'Thu'</span><span class="token punctuation">,</span> <span class="token string">'Fri'</span><span class="token punctuation">,</span> <span [...]
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ yAxis<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
+ series<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">23</span><span class="token punctuation">,</span> <span class="token number">24</span><span class="token punctuation">,</span> <span class="token number">18</span><span class="token punctuation">,</span> <span class="token number">25</span><span class="token punctuation">,</span> <span class="token number">27</span><span class="token punctuation">,</span> <span class="token [...]
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">26</span><span class="token punctuation">,</span> <span class="token number">24</span><span class="token punctuation">,</span> <span class="token number">18</span><span class="token punctuation">,</span> <span class="token number">22</span><span class="token punctuation">,</span> <span class="token number">23</span><span class="token punctuation">,</span> <span class="token [...]
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" str [...]
+ xAxis: {
+ data: ['A', 'B', 'C', 'D', 'E']
+ },
+ yAxis: {},
+ series: [
+ {
+ data: [10, 22, 28, 43, 49],
+ type: 'bar',
+ stack: 'x'
+ },
+ {
+ data: [5, 4, 3, 5, 10],
+ type: 'bar',
+ stack: 'x'
+ }
+ ]
+};</textarea><pre data-testid="preview" class="prism-editor__editor">option <span class="token operator">=</span> <span class="token punctuation">{</span>
+ xAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'A'</span><span class="token punctuation">,</span> <span class="token string">'B'</span><span class="token punctuation">,</span> <span class="token string">'C'</span><span class="token punctuation">,</span> <span class="token string">'D'</span><span class="token punctuation">,</span> <span class="token string">'E'</span><span class="token punctuation">]</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ yAxis<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
+ series<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">22</span><span class="token punctuation">,</span> <span class="token number">28</span><span class="token punctuation">,</span> <span class="token number">43</span><span class="token punctuation">,</span> <span class="token number">49</span><span class="token punctuation">]</span><span class="token p [...]
+ type<span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span>
+ stack<span class="token operator">:</span> <span class="token string">'x'</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">]</span><span class="token punct [...]
+ type<span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span>
+ stack<span class="token operator">:</span> <span class="token string">'x'</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" str [...]
+ xAxis: {
+ data: ['A', 'B', 'C', 'D', 'E']
+ },
+ yAxis: {},
+ series: [
+ {
+ data: [10, 22, 28, 43, 49],
+ type: 'bar',
+ stack: 'x'
+ },
+ {
+ data: [5, 4, 3, 5, 10],
+ type: 'bar',
+ stack: 'x'
+ }
+ ]
+};</textarea><pre data-testid="preview" class="prism-editor__editor">option <span class="token operator">=</span> <span class="token punctuation">{</span>
+ xAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'A'</span><span class="token punctuation">,</span> <span class="token string">'B'</span><span class="token punctuation">,</span> <span class="token string">'C'</span><span class="token punctuation">,</span> <span class="token string">'D'</span><span class="token punctuation">,</span> <span class="token string">'E'</span><span class="token punctuation">]</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ yAxis<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
+ series<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">22</span><span class="token punctuation">,</span> <span class="token number">28</span><span class="token punctuation">,</span> <span class="token number">43</span><span class="token punctuation">,</span> <span class="token number">49</span><span class="token punctuation">]</span><span class="token p [...]
+ type<span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span>
+ stack<span class="token operator">:</span> <span class="token string">'x'</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">]</span><span class="token punct [...]
+ type<span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span>
+ stack<span class="token operator">:</span> <span class="token string">'x'</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" str [...]
+ xAxis: {
+ data: ['A', 'B', 'C', 'D', 'E']
+ },
+ yAxis: {},
+ series: [
+ {
+ type: 'bar',
+ data: [23, 24, 18, 25, 18],
+ barGap: '20%',
+ barCategoryGap: '40%'
+ },
+ {
+ type: 'bar',
+ data: [12, 14, 9, 9, 11]
+ }
+ ]
+};</textarea><pre data-testid="preview" class="prism-editor__editor">option <span class="token operator">=</span> <span class="token punctuation">{</span>
+ xAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'A'</span><span class="token punctuation">,</span> <span class="token string">'B'</span><span class="token punctuation">,</span> <span class="token string">'C'</span><span class="token punctuation">,</span> <span class="token string">'D'</span><span class="token punctuation">,</span> <span class="token string">'E'</span><span class="token punctuation">]</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ yAxis<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
+ series<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">23</span><span class="token punctuation">,</span> <span class="token number">24</span><span class="token punctuation">,</span> <span class="token number">18</span><span class="token punctuation">,</span> <span class="token number">25</span><span class="token punctuation">,</span> <span class="token number">18</span><span class="token punctuation">]</span><span class="token p [...]
+ barGap<span class="token operator">:</span> <span class="token string">'20%'</span><span class="token punctuation">,</span>
+ barCategoryGap<span class="token operator">:</span> <span class="token string">'40%'</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">12</span><span class="token punctuation">,</span> <span class="token number">14</span><span class="token punctuation">,</span> <span class="token number">9</span><span class="token punctuation">,</span> <span class="token number">9</span><span class="token punctuation">,</span> <span class="token number">11</span><span class="token punctuation">]</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" str [...]
+ xAxis: {
+ type: 'category',
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+ },
+ yAxis: {
+ type: 'value'
+ },
+ series: [
+ {
+ data: [120, 200, 150, 80, 70, 110, 130],
+ type: 'bar',
+ showBackground: true,
+ backgroundStyle: {
+ color: 'rgba(220, 220, 220, 0.8)'
+ }
+ }
+ ]
+};</textarea><pre data-testid="preview" class="prism-editor__editor">option <span class="token operator">=</span> <span class="token punctuation">{</span>
+ xAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'category'</span><span class="token punctuation">,</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'Mon'</span><span class="token punctuation">,</span> <span class="token string">'Tue'</span><span class="token punctuation">,</span> <span class="token string">'Wed'</span><span class="token punctuation">,</span> <span class="token string">'Thu'</span><span class="token punctuation">,</span> <span class="token string">'Fri'</span><span class="token punctuation">,</span> <span [...]
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ yAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'value'</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ series<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">120</span><span class="token punctuation">,</span> <span class="token number">200</span><span class="token punctuation">,</span> <span class="token number">150</span><span class="token punctuation">,</span> <span class="token number">80</span><span class="token punctuation">,</span> <span class="token number">70</span><span class="token punctuation">,</span> <span class="tok [...]
+ type<span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span>
+ showBackground<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
+ backgroundStyle<span class="token operator">:</span> <span class="token punctuation">{</span>
+ color<span class="token operator">:</span> <span class="token string">'rgba(220, 220, 220, 0.8)'</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" str [...]
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
+ <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 type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+ <script>var _hmt=_hmt||[];!function(){var e=document.createElement("script");e.src="https://hm.baidu.com/hm.js?54b918eee37cb8a7045f0fd0f0b24395";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)}()</script>
+ </body>
+</html>
diff --git a/docs/en/how-to/chart-types/bar/stacked-bar/index.html b/docs/en/how-to/chart-types/bar/stacked-bar/index.html
new file mode 100644
index 0000000..00b1440
--- /dev/null
+++ b/docs/en/how-to/chart-types/bar/stacked-bar/index.html
@@ -0,0 +1,51 @@
+<!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">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/ec [...]
+ </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="ht [...]
+ xAxis: {
+ data: ['A', 'B', 'C', 'D', 'E']
+ },
+ yAxis: {},
+ series: [
+ {
+ data: [10, 22, 28, 43, 49],
+ type: 'bar',
+ stack: 'x'
+ },
+ {
+ data: [5, 4, 3, 5, 10],
+ type: 'bar',
+ stack: 'x'
+ }
+ ]
+};</textarea><pre data-testid="preview" class="prism-editor__editor">option <span class="token operator">=</span> <span class="token punctuation">{</span>
+ xAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'A'</span><span class="token punctuation">,</span> <span class="token string">'B'</span><span class="token punctuation">,</span> <span class="token string">'C'</span><span class="token punctuation">,</span> <span class="token string">'D'</span><span class="token punctuation">,</span> <span class="token string">'E'</span><span class="token punctuation">]</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ yAxis<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
+ series<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">22</span><span class="token punctuation">,</span> <span class="token number">28</span><span class="token punctuation">,</span> <span class="token number">43</span><span class="token punctuation">,</span> <span class="token number">49</span><span class="token punctuation">]</span><span class="token p [...]
+ type<span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span>
+ stack<span class="token operator">:</span> <span class="token string">'x'</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">]</span><span class="token punct [...]
+ type<span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span>
+ stack<span class="token operator">:</span> <span class="token string">'x'</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" str [...]
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
+ <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 type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+ <script>var _hmt=_hmt||[];!function(){var e=document.createElement("script");e.src="https://hm.baidu.com/hm.js?54b918eee37cb8a7045f0fd0f0b24395";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)}()</script>
+ </body>
+</html>
diff --git a/docs/en/how-to/chart-types/bar/waterfall/index.html b/docs/en/how-to/chart-types/bar/waterfall/index.html
new file mode 100644
index 0000000..6c9fad4
--- /dev/null
+++ b/docs/en/how-to/chart-types/bar/waterfall/index.html
@@ -0,0 +1,179 @@
+<!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">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/ec [...]
+ </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="ht [...]
+var help = [];
+var positive = [];
+var negative = [];
+for (var i = 0, sum = 0; i < data.length; ++i) {
+ if (data[i] >= 0) {
+ positive.push(data[i]);
+ negative.push('-');
+ } else {
+ positive.push('-');
+ negative.push(-data[i]);
+ }
+
+ if (i === 0) {
+ help.push(0);
+ } else {
+ sum += data[i - 1];
+ if (data[i] < 0) {
+ help.push(sum + data[i]);
+ } else {
+ help.push(sum);
+ }
+ }
+}
+
+option = {
+ title: {
+ text: 'Waterfall'
+ },
+ grid: {
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
+ containLabel: true
+ },
+ xAxis: {
+ type: 'category',
+ splitLine: { show: false },
+ data: (function() {
+ var list = [];
+ for (var i = 1; i <= 11; i++) {
+ list.push('Oct/' + i);
+ }
+ return list;
+ })()
+ },
+ yAxis: {
+ type: 'value'
+ },
+ series: [
+ {
+ type: 'bar',
+ stack: 'all',
+ itemStyle: {
+ normal: {
+ barBorderColor: 'rgba(0,0,0,0)',
+ color: 'rgba(0,0,0,0)'
+ },
+ emphasis: {
+ barBorderColor: 'rgba(0,0,0,0)',
+ color: 'rgba(0,0,0,0)'
+ }
+ },
+ data: help
+ },
+ {
+ name: 'positive',
+ type: 'bar',
+ stack: 'all',
+ data: positive
+ },
+ {
+ name: 'negative',
+ type: 'bar',
+ stack: 'all',
+ data: negative,
+ itemStyle: {
+ color: '#f33'
+ }
+ }
+ ]
+};</textarea><pre data-testid="preview" class="prism-editor__editor"><span class="token keyword">var</span> data <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">900</span><span class="token punctuation">,</span> <span class="token number">345</span><span class="token punctuation">,</span> <span class="token number">393</span><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">108 [...]
+<span class="token keyword">var</span> help <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
+<span class="token keyword">var</span> positive <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
+<span class="token keyword">var</span> negative <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
+<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">,</span> sum <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</span> data<span class="token punctuation">.</span>length<span class="token punctuation">;</span> <span [...]
+ <span class="token keyword">if</span> <span class="token punctuation">(</span>data<span class="token punctuation">[</span>i<span class="token punctuation">]</span> <span class="token operator">>=</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+ positive<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>data<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+ negative<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token string">'-'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+ <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
+ positive<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token string">'-'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+ negative<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token operator">-</span>data<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+ <span class="token punctuation">}</span>
+
+ <span class="token keyword">if</span> <span class="token punctuation">(</span>i <span class="token operator">===</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+ help<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+ <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
+ sum <span class="token operator">+=</span> data<span class="token punctuation">[</span>i <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
+ <span class="token keyword">if</span> <span class="token punctuation">(</span>data<span class="token punctuation">[</span>i<span class="token punctuation">]</span> <span class="token operator"><</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+ help<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>sum <span class="token operator">+</span> data<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+ <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
+ help<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>sum<span class="token punctuation">)</span><span class="token punctuation">;</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span>
+<span class="token punctuation">}</span>
+
+option <span class="token operator">=</span> <span class="token punctuation">{</span>
+ title<span class="token operator">:</span> <span class="token punctuation">{</span>
+ text<span class="token operator">:</span> <span class="token string">'Waterfall'</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ grid<span class="token operator">:</span> <span class="token punctuation">{</span>
+ left<span class="token operator">:</span> <span class="token string">'3%'</span><span class="token punctuation">,</span>
+ right<span class="token operator">:</span> <span class="token string">'4%'</span><span class="token punctuation">,</span>
+ bottom<span class="token operator">:</span> <span class="token string">'3%'</span><span class="token punctuation">,</span>
+ containLabel<span class="token operator">:</span> <span class="token boolean">true</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ xAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'category'</span><span class="token punctuation">,</span>
+ splitLine<span class="token operator">:</span> <span class="token punctuation">{</span> show<span class="token operator">:</span> <span class="token boolean">false</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ data<span class="token operator">:</span> <span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+ <span class="token keyword">var</span> list <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
+ <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span> i <span class="token operator"><=</span> <span class="token number">11</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+ list<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token string">'Oct/'</span> <span class="token operator">+</span> i<span class="token punctuation">)</span><span class="token punctuation">;</span>
+ <span class="token punctuation">}</span>
+ <span class="token keyword">return</span> list<span class="token punctuation">;</span>
+ <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ yAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'value'</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ series<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span>
+ stack<span class="token operator">:</span> <span class="token string">'all'</span><span class="token punctuation">,</span>
+ itemStyle<span class="token operator">:</span> <span class="token punctuation">{</span>
+ normal<span class="token operator">:</span> <span class="token punctuation">{</span>
+ barBorderColor<span class="token operator">:</span> <span class="token string">'rgba(0,0,0,0)'</span><span class="token punctuation">,</span>
+ color<span class="token operator">:</span> <span class="token string">'rgba(0,0,0,0)'</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ emphasis<span class="token operator">:</span> <span class="token punctuation">{</span>
+ barBorderColor<span class="token operator">:</span> <span class="token string">'rgba(0,0,0,0)'</span><span class="token punctuation">,</span>
+ color<span class="token operator">:</span> <span class="token string">'rgba(0,0,0,0)'</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ data<span class="token operator">:</span> help
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ name<span class="token operator">:</span> <span class="token string">'positive'</span><span class="token punctuation">,</span>
+ type<span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span>
+ stack<span class="token operator">:</span> <span class="token string">'all'</span><span class="token punctuation">,</span>
+ data<span class="token operator">:</span> positive
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ name<span class="token operator">:</span> <span class="token string">'negative'</span><span class="token punctuation">,</span>
+ type<span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span>
+ stack<span class="token operator">:</span> <span class="token string">'all'</span><span class="token punctuation">,</span>
+ data<span class="token operator">:</span> negative<span class="token punctuation">,</span>
+ itemStyle<span class="token operator">:</span> <span class="token punctuation">{</span>
+ color<span class="token operator">:</span> <span class="token string">'#f33'</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" str [...]
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
+ <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 type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+ <script>var _hmt=_hmt||[];!function(){var e=document.createElement("script");e.src="https://hm.baidu.com/hm.js?54b918eee37cb8a7045f0fd0f0b24395";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)}()</script>
+ </body>
+</html>
diff --git a/docs/en/how-to/chart-types/line/area-line/index.html b/docs/en/how-to/chart-types/line/area-line/index.html
new file mode 100644
index 0000000..17e96d7
--- /dev/null
+++ b/docs/en/how-to/chart-types/line/area-line/index.html
@@ -0,0 +1,57 @@
+<!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">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/ec [...]
+ </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="ht [...]
+ xAxis: {
+ data: ['A', 'B', 'C', 'D', 'E']
+ },
+ yAxis: {},
+ series: [
+ {
+ data: [10, 22, 28, 23, 19],
+ type: 'line',
+ areaStyle: {}
+ },
+ {
+ data: [25, 14, 23, 35, 10],
+ type: 'line',
+ areaStyle: {
+ color: '#ff0',
+ opacity: 0.5
+ }
+ }
+ ]
+};</textarea><pre data-testid="preview" class="prism-editor__editor">option <span class="token operator">=</span> <span class="token punctuation">{</span>
+ xAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'A'</span><span class="token punctuation">,</span> <span class="token string">'B'</span><span class="token punctuation">,</span> <span class="token string">'C'</span><span class="token punctuation">,</span> <span class="token string">'D'</span><span class="token punctuation">,</span> <span class="token string">'E'</span><span class="token punctuation">]</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ yAxis<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
+ series<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">22</span><span class="token punctuation">,</span> <span class="token number">28</span><span class="token punctuation">,</span> <span class="token number">23</span><span class="token punctuation">,</span> <span class="token number">19</span><span class="token punctuation">]</span><span class="token p [...]
+ type<span class="token operator">:</span> <span class="token string">'line'</span><span class="token punctuation">,</span>
+ areaStyle<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">25</span><span class="token punctuation">,</span> <span class="token number">14</span><span class="token punctuation">,</span> <span class="token number">23</span><span class="token punctuation">,</span> <span class="token number">35</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">]</span><span class="token p [...]
+ type<span class="token operator">:</span> <span class="token string">'line'</span><span class="token punctuation">,</span>
+ areaStyle<span class="token operator">:</span> <span class="token punctuation">{</span>
+ color<span class="token operator">:</span> <span class="token string">'#ff0'</span><span class="token punctuation">,</span>
+ opacity<span class="token operator">:</span> <span class="token number">0.5</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" str [...]
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
+ <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 type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+ <script>var _hmt=_hmt||[];!function(){var e=document.createElement("script");e.src="https://hm.baidu.com/hm.js?54b918eee37cb8a7045f0fd0f0b24395";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)}()</script>
+ </body>
+</html>
diff --git a/docs/en/how-to/chart-types/line/basic-line/index.html b/docs/en/how-to/chart-types/line/basic-line/index.html
new file mode 100644
index 0000000..8b75a8c
--- /dev/null
+++ b/docs/en/how-to/chart-types/line/basic-line/index.html
@@ -0,0 +1,165 @@
+<!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">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/ec [...]
+ </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="ht [...]
+ xAxis: {
+ type: 'category',
+ data: ['A', 'B', 'C']
+ },
+ yAxis: {
+ type: 'value'
+ },
+ series: [
+ {
+ data: [120, 200, 150],
+ type: 'line'
+ }
+ ]
+};</textarea><pre data-testid="preview" class="prism-editor__editor">option <span class="token operator">=</span> <span class="token punctuation">{</span>
+ xAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'category'</span><span class="token punctuation">,</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'A'</span><span class="token punctuation">,</span> <span class="token string">'B'</span><span class="token punctuation">,</span> <span class="token string">'C'</span><span class="token punctuation">]</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ yAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'value'</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ series<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">120</span><span class="token punctuation">,</span> <span class="token number">200</span><span class="token punctuation">,</span> <span class="token number">150</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ type<span class="token operator">:</span> <span class="token string">'line'</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" str [...]
+ xAxis: {},
+ yAxis: {},
+ series: [
+ {
+ data: [
+ [20, 120],
+ [50, 200],
+ [40, 50]
+ ],
+ type: 'line'
+ }
+ ]
+};</textarea><pre data-testid="preview" class="prism-editor__editor">option <span class="token operator">=</span> <span class="token punctuation">{</span>
+ xAxis<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
+ yAxis<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
+ series<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">[</span><span class="token number">20</span><span class="token punctuation">,</span> <span class="token number">120</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token number">50</span><span class="token punctuation">,</span> <span class="token number">200</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token number">40</span><span class="token punctuation">,</span> <span class="token number">50</span><span class="token punctuation">]</span>
+ <span class="token punctuation">]</span><span class="token punctuation">,</span>
+ type<span class="token operator">:</span> <span class="token string">'line'</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" str [...]
+ xAxis: {
+ data: ['A', 'B', 'C', 'D', 'E']
+ },
+ yAxis: {},
+ series: [
+ {
+ data: [10, 22, 28, 23, 19],
+ type: 'line',
+ lineStyle: {
+ normal: {
+ color: 'green',
+ width: 4,
+ type: 'dashed'
+ }
+ }
+ }
+ ]
+};</textarea><pre data-testid="preview" class="prism-editor__editor">option <span class="token operator">=</span> <span class="token punctuation">{</span>
+ xAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'A'</span><span class="token punctuation">,</span> <span class="token string">'B'</span><span class="token punctuation">,</span> <span class="token string">'C'</span><span class="token punctuation">,</span> <span class="token string">'D'</span><span class="token punctuation">,</span> <span class="token string">'E'</span><span class="token punctuation">]</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ yAxis<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
+ series<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">22</span><span class="token punctuation">,</span> <span class="token number">28</span><span class="token punctuation">,</span> <span class="token number">23</span><span class="token punctuation">,</span> <span class="token number">19</span><span class="token punctuation">]</span><span class="token p [...]
+ type<span class="token operator">:</span> <span class="token string">'line'</span><span class="token punctuation">,</span>
+ lineStyle<span class="token operator">:</span> <span class="token punctuation">{</span>
+ normal<span class="token operator">:</span> <span class="token punctuation">{</span>
+ color<span class="token operator">:</span> <span class="token string">'green'</span><span class="token punctuation">,</span>
+ width<span class="token operator">:</span> <span class="token number">4</span><span class="token punctuation">,</span>
+ type<span class="token operator">:</span> <span class="token string">'dashed'</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" str [...]
+ xAxis: {
+ data: ['A', 'B', 'C', 'D', 'E']
+ },
+ yAxis: {},
+ series: [
+ {
+ data: [10, 22, 28, 23, 19],
+ type: 'line',
+ label: {
+ show: true,
+ position: 'bottom',
+ textStyle: {
+ fontSize: 20
+ }
+ }
+ }
+ ]
+};</textarea><pre data-testid="preview" class="prism-editor__editor">option <span class="token operator">=</span> <span class="token punctuation">{</span>
+ xAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'A'</span><span class="token punctuation">,</span> <span class="token string">'B'</span><span class="token punctuation">,</span> <span class="token string">'C'</span><span class="token punctuation">,</span> <span class="token string">'D'</span><span class="token punctuation">,</span> <span class="token string">'E'</span><span class="token punctuation">]</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ yAxis<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
+ series<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">22</span><span class="token punctuation">,</span> <span class="token number">28</span><span class="token punctuation">,</span> <span class="token number">23</span><span class="token punctuation">,</span> <span class="token number">19</span><span class="token punctuation">]</span><span class="token p [...]
+ type<span class="token operator">:</span> <span class="token string">'line'</span><span class="token punctuation">,</span>
+ label<span class="token operator">:</span> <span class="token punctuation">{</span>
+ show<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
+ position<span class="token operator">:</span> <span class="token string">'bottom'</span><span class="token punctuation">,</span>
+ textStyle<span class="token operator">:</span> <span class="token punctuation">{</span>
+ fontSize<span class="token operator">:</span> <span class="token number">20</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" str [...]
+ xAxis: {
+ data: ['A', 'B', 'C', 'D', 'E']
+ },
+ yAxis: {},
+ series: [
+ {
+ data: [0, 22, '-', 23, 19],
+ type: 'line'
+ }
+ ]
+};</textarea><pre data-testid="preview" class="prism-editor__editor">option <span class="token operator">=</span> <span class="token punctuation">{</span>
+ xAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'A'</span><span class="token punctuation">,</span> <span class="token string">'B'</span><span class="token punctuation">,</span> <span class="token string">'C'</span><span class="token punctuation">,</span> <span class="token string">'D'</span><span class="token punctuation">,</span> <span class="token string">'E'</span><span class="token punctuation">]</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ yAxis<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
+ series<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">22</span><span class="token punctuation">,</span> <span class="token string">'-'</span><span class="token punctuation">,</span> <span class="token number">23</span><span class="token punctuation">,</span> <span class="token number">19</span><span class="token punctuation">]</span><span class="token p [...]
+ type<span class="token operator">:</span> <span class="token string">'line'</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" str [...]
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
+ <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 type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+ <script>var _hmt=_hmt||[];!function(){var e=document.createElement("script");e.src="https://hm.baidu.com/hm.js?54b918eee37cb8a7045f0fd0f0b24395";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)}()</script>
+ </body>
+</html>
diff --git a/docs/en/how-to/chart-types/line/smooth-line/index.html b/docs/en/how-to/chart-types/line/smooth-line/index.html
new file mode 100644
index 0000000..3270fd9
--- /dev/null
+++ b/docs/en/how-to/chart-types/line/smooth-line/index.html
@@ -0,0 +1,41 @@
+<!doctype html>
+<html data-n-head-ssr>
+ <head>
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/ec [...]
+ </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="ht [...]
+ xAxis: {
+ data: ['A', 'B', 'C', 'D', 'E']
+ },
+ yAxis: {},
+ series: [
+ {
+ data: [10, 22, 28, 23, 19],
+ type: 'line',
+ smooth: true
+ }
+ ]
+};</textarea><pre data-testid="preview" class="prism-editor__editor">option <span class="token operator">=</span> <span class="token punctuation">{</span>
+ xAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'A'</span><span class="token punctuation">,</span> <span class="token string">'B'</span><span class="token punctuation">,</span> <span class="token string">'C'</span><span class="token punctuation">,</span> <span class="token string">'D'</span><span class="token punctuation">,</span> <span class="token string">'E'</span><span class="token punctuation">]</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ yAxis<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
+ series<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">22</span><span class="token punctuation">,</span> <span class="token number">28</span><span class="token punctuation">,</span> <span class="token number">23</span><span class="token punctuation">,</span> <span class="token number">19</span><span class="token punctuation">]</span><span class="token p [...]
+ type<span class="token operator">:</span> <span class="token string">'line'</span><span class="token punctuation">,</span>
+ smooth<span class="token operator">:</span> <span class="token boolean">true</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" str [...]
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
+ <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 type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+ <script>var _hmt=_hmt||[];!function(){var e=document.createElement("script");e.src="https://hm.baidu.com/hm.js?54b918eee37cb8a7045f0fd0f0b24395";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)}()</script>
+ </body>
+</html>
diff --git a/docs/en/how-to/chart-types/line/stacked-line/index.html b/docs/en/how-to/chart-types/line/stacked-line/index.html
new file mode 100644
index 0000000..c33eed4
--- /dev/null
+++ b/docs/en/how-to/chart-types/line/stacked-line/index.html
@@ -0,0 +1,89 @@
+<!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">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/ec [...]
+ </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="ht [...]
+ xAxis: {
+ data: ['A', 'B', 'C', 'D', 'E']
+ },
+ yAxis: {},
+ series: [
+ {
+ data: [10, 22, 28, 43, 49],
+ type: 'line',
+ stack: 'x'
+ },
+ {
+ data: [5, 4, 3, 5, 10],
+ type: 'line',
+ stack: 'x'
+ }
+ ]
+};</textarea><pre data-testid="preview" class="prism-editor__editor">option <span class="token operator">=</span> <span class="token punctuation">{</span>
+ xAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'A'</span><span class="token punctuation">,</span> <span class="token string">'B'</span><span class="token punctuation">,</span> <span class="token string">'C'</span><span class="token punctuation">,</span> <span class="token string">'D'</span><span class="token punctuation">,</span> <span class="token string">'E'</span><span class="token punctuation">]</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ yAxis<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
+ series<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">22</span><span class="token punctuation">,</span> <span class="token number">28</span><span class="token punctuation">,</span> <span class="token number">43</span><span class="token punctuation">,</span> <span class="token number">49</span><span class="token punctuation">]</span><span class="token p [...]
+ type<span class="token operator">:</span> <span class="token string">'line'</span><span class="token punctuation">,</span>
+ stack<span class="token operator">:</span> <span class="token string">'x'</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">]</span><span class="token punct [...]
+ type<span class="token operator">:</span> <span class="token string">'line'</span><span class="token punctuation">,</span>
+ stack<span class="token operator">:</span> <span class="token string">'x'</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" str [...]
+ xAxis: {
+ data: ['A', 'B', 'C', 'D', 'E']
+ },
+ yAxis: {},
+ series: [
+ {
+ data: [10, 22, 28, 43, 49],
+ type: 'line',
+ stack: 'x',
+ areaStyle: {}
+ },
+ {
+ data: [5, 4, 3, 5, 10],
+ type: 'line',
+ stack: 'x',
+ areaStyle: {}
+ }
+ ]
+};</textarea><pre data-testid="preview" class="prism-editor__editor">option <span class="token operator">=</span> <span class="token punctuation">{</span>
+ xAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'A'</span><span class="token punctuation">,</span> <span class="token string">'B'</span><span class="token punctuation">,</span> <span class="token string">'C'</span><span class="token punctuation">,</span> <span class="token string">'D'</span><span class="token punctuation">,</span> <span class="token string">'E'</span><span class="token punctuation">]</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ yAxis<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
+ series<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">22</span><span class="token punctuation">,</span> <span class="token number">28</span><span class="token punctuation">,</span> <span class="token number">43</span><span class="token punctuation">,</span> <span class="token number">49</span><span class="token punctuation">]</span><span class="token p [...]
+ type<span class="token operator">:</span> <span class="token string">'line'</span><span class="token punctuation">,</span>
+ stack<span class="token operator">:</span> <span class="token string">'x'</span><span class="token punctuation">,</span>
+ areaStyle<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">]</span><span class="token punct [...]
+ type<span class="token operator">:</span> <span class="token string">'line'</span><span class="token punctuation">,</span>
+ stack<span class="token operator">:</span> <span class="token string">'x'</span><span class="token punctuation">,</span>
+ areaStyle<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" str [...]
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
+ <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 type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+ <script>var _hmt=_hmt||[];!function(){var e=document.createElement("script");e.src="https://hm.baidu.com/hm.js?54b918eee37cb8a7045f0fd0f0b24395";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)}()</script>
+ </body>
+</html>
diff --git a/docs/en/how-to/chart-types/line/step-line/index.html b/docs/en/how-to/chart-types/line/step-line/index.html
new file mode 100644
index 0000000..ec5d9fd
--- /dev/null
+++ b/docs/en/how-to/chart-types/line/step-line/index.html
@@ -0,0 +1,75 @@
+<!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">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/ec [...]
+ </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="ht [...]
+ legend: {},
+ xAxis: {
+ type: 'category',
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+ },
+ yAxis: {
+ type: 'value'
+ },
+ series: [
+ {
+ name: 'Step Start',
+ type: 'line',
+ step: 'start',
+ data: [120, 132, 101, 134, 90, 230, 210]
+ },
+ {
+ name: 'Step Middle',
+ type: 'line',
+ step: 'middle',
+ data: [220, 282, 201, 234, 290, 430, 410]
+ },
+ {
+ name: 'Step End',
+ type: 'line',
+ step: 'end',
+ data: [450, 432, 401, 454, 590, 530, 510]
+ }
+ ]
+};</textarea><pre data-testid="preview" class="prism-editor__editor">option <span class="token operator">=</span> <span class="token punctuation">{</span>
+ legend<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
+ xAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'category'</span><span class="token punctuation">,</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'Mon'</span><span class="token punctuation">,</span> <span class="token string">'Tue'</span><span class="token punctuation">,</span> <span class="token string">'Wed'</span><span class="token punctuation">,</span> <span class="token string">'Thu'</span><span class="token punctuation">,</span> <span class="token string">'Fri'</span><span class="token punctuation">,</span> <span [...]
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ yAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'value'</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ series<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ name<span class="token operator">:</span> <span class="token string">'Step Start'</span><span class="token punctuation">,</span>
+ type<span class="token operator">:</span> <span class="token string">'line'</span><span class="token punctuation">,</span>
+ step<span class="token operator">:</span> <span class="token string">'start'</span><span class="token punctuation">,</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">120</span><span class="token punctuation">,</span> <span class="token number">132</span><span class="token punctuation">,</span> <span class="token number">101</span><span class="token punctuation">,</span> <span class="token number">134</span><span class="token punctuation">,</span> <span class="token number">90</span><span class="token punctuation">,</span> <span class="to [...]
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ name<span class="token operator">:</span> <span class="token string">'Step Middle'</span><span class="token punctuation">,</span>
+ type<span class="token operator">:</span> <span class="token string">'line'</span><span class="token punctuation">,</span>
+ step<span class="token operator">:</span> <span class="token string">'middle'</span><span class="token punctuation">,</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">220</span><span class="token punctuation">,</span> <span class="token number">282</span><span class="token punctuation">,</span> <span class="token number">201</span><span class="token punctuation">,</span> <span class="token number">234</span><span class="token punctuation">,</span> <span class="token number">290</span><span class="token punctuation">,</span> <span class="t [...]
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ name<span class="token operator">:</span> <span class="token string">'Step End'</span><span class="token punctuation">,</span>
+ type<span class="token operator">:</span> <span class="token string">'line'</span><span class="token punctuation">,</span>
+ step<span class="token operator">:</span> <span class="token string">'end'</span><span class="token punctuation">,</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">450</span><span class="token punctuation">,</span> <span class="token number">432</span><span class="token punctuation">,</span> <span class="token number">401</span><span class="token punctuation">,</span> <span class="token number">454</span><span class="token punctuation">,</span> <span class="token number">590</span><span class="token punctuation">,</span> <span class="t [...]
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" str [...]
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
+ <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 type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+ <script>var _hmt=_hmt||[];!function(){var e=document.createElement("script");e.src="https://hm.baidu.com/hm.js?54b918eee37cb8a7045f0fd0f0b24395";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)}()</script>
+ </body>
+</html>
diff --git a/docs/en/how-to/chart-types/pie/basic-pie/index.html b/docs/en/how-to/chart-types/pie/basic-pie/index.html
new file mode 100644
index 0000000..7784838
--- /dev/null
+++ b/docs/en/how-to/chart-types/pie/basic-pie/index.html
@@ -0,0 +1,177 @@
+<!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">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/ec [...]
+ </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="ht [...]
+ series: [
+ {
+ type: 'pie',
+ data: [
+ {
+ value: 335,
+ name: 'Direct Visit'
+ },
+ {
+ value: 234,
+ name: 'Union Ad'
+ },
+ {
+ value: 1548,
+ name: 'Search Engine'
+ }
+ ]
+ }
+ ]
+};</textarea><pre data-testid="preview" class="prism-editor__editor">option <span class="token operator">=</span> <span class="token punctuation">{</span>
+ series<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'pie'</span><span class="token punctuation">,</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ value<span class="token operator">:</span> <span class="token number">335</span><span class="token punctuation">,</span>
+ name<span class="token operator">:</span> <span class="token string">'Direct Visit'</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ value<span class="token operator">:</span> <span class="token number">234</span><span class="token punctuation">,</span>
+ name<span class="token operator">:</span> <span class="token string">'Union Ad'</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ value<span class="token operator">:</span> <span class="token number">1548</span><span class="token punctuation">,</span>
+ name<span class="token operator">:</span> <span class="token string">'Search Engine'</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" str [...]
+ series: [
+ {
+ type: 'pie',
+ data: [
+ {
+ value: 335,
+ name: 'Direct Visit'
+ },
+ {
+ value: 234,
+ name: 'Union Ad'
+ },
+ {
+ value: 1548,
+ name: 'Search Engine'
+ }
+ ],
+ radius: '50%'
+ }
+ ]
+};</textarea><pre data-testid="preview" class="prism-editor__editor">option <span class="token operator">=</span> <span class="token punctuation">{</span>
+ series<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'pie'</span><span class="token punctuation">,</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ value<span class="token operator">:</span> <span class="token number">335</span><span class="token punctuation">,</span>
+ name<span class="token operator">:</span> <span class="token string">'Direct Visit'</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ value<span class="token operator">:</span> <span class="token number">234</span><span class="token punctuation">,</span>
+ name<span class="token operator">:</span> <span class="token string">'Union Ad'</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ value<span class="token operator">:</span> <span class="token number">1548</span><span class="token punctuation">,</span>
+ name<span class="token operator">:</span> <span class="token string">'Search Engine'</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span><span class="token punctuation">,</span>
+ radius<span class="token operator">:</span> <span class="token string">'50%'</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" str [...]
+ series: [
+ {
+ type: 'pie',
+ stillShowZeroSum: false,
+ data: [
+ {
+ value: 0,
+ name: 'Direct Visit'
+ },
+ {
+ value: 0,
+ name: 'Union Ad'
+ },
+ {
+ value: 0,
+ name: 'Search Engine'
+ }
+ ]
+ }
+ ]
+};</textarea><pre data-testid="preview" class="prism-editor__editor">option <span class="token operator">=</span> <span class="token punctuation">{</span>
+ series<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'pie'</span><span class="token punctuation">,</span>
+ stillShowZeroSum<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ value<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
+ name<span class="token operator">:</span> <span class="token string">'Direct Visit'</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ value<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
+ name<span class="token operator">:</span> <span class="token string">'Union Ad'</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ value<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
+ name<span class="token operator">:</span> <span class="token string">'Search Engine'</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" str [...]
+ series: [{
+ type: 'pie',
+ stillShowZeroSum: false,
+ label: {
+ show: false
+ }
+ data: [{
+ value: 0,
+ name: 'Direct Visit'
+ }, {
+ value: 0,
+ name: 'Union Ad'
+ }, {
+ value: 0,
+ name: 'Search Engine'
+ }]
+ }]
+};</textarea><pre data-testid="preview" class="prism-editor__editor">option <span class="token operator">=</span> <span class="token punctuation">{</span>
+ series<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'pie'</span><span class="token punctuation">,</span>
+ stillShowZeroSum<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
+ label<span class="token operator">:</span> <span class="token punctuation">{</span>
+ show<span class="token operator">:</span> <span class="token boolean">false</span>
+ <span class="token punctuation">}</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
+ value<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
+ name<span class="token operator">:</span> <span class="token string">'Direct Visit'</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
+ value<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
+ name<span class="token operator">:</span> <span class="token string">'Union Ad'</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
+ value<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
+ name<span class="token operator">:</span> <span class="token string">'Search Engine'</span>
+ <span class="token punctuation">}</span><span class="token punctuation">]</span>
+ <span class="token punctuation">}</span><span class="token punctuation">]</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" str [...]
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
+ <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 type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+ <script>var _hmt=_hmt||[];!function(){var e=document.createElement("script");e.src="https://hm.baidu.com/hm.js?54b918eee37cb8a7045f0fd0f0b24395";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)}()</script>
+ </body>
+</html>
diff --git a/docs/en/how-to/chart-types/pie/doughnut/index.html b/docs/en/how-to/chart-types/pie/doughnut/index.html
new file mode 100644
index 0000000..7a8dfdf
--- /dev/null
+++ b/docs/en/how-to/chart-types/pie/doughnut/index.html
@@ -0,0 +1,143 @@
+<!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">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/ec [...]
+ </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="ht [...]
+ title: {
+ text: 'A Case of Doughnut Chart',
+ left: 'center',
+ top: 'center'
+ },
+ series: [
+ {
+ type: 'pie',
+ data: [
+ {
+ value: 335,
+ name: 'A'
+ },
+ {
+ value: 234,
+ name: 'B'
+ },
+ {
+ value: 1548,
+ name: 'C'
+ }
+ ],
+ radius: ['40%', '70%']
+ }
+ ]
+};</textarea><pre data-testid="preview" class="prism-editor__editor">option <span class="token operator">=</span> <span class="token punctuation">{</span>
+ title<span class="token operator">:</span> <span class="token punctuation">{</span>
+ text<span class="token operator">:</span> <span class="token string">'A Case of Doughnut Chart'</span><span class="token punctuation">,</span>
+ left<span class="token operator">:</span> <span class="token string">'center'</span><span class="token punctuation">,</span>
+ top<span class="token operator">:</span> <span class="token string">'center'</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ series<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'pie'</span><span class="token punctuation">,</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ value<span class="token operator">:</span> <span class="token number">335</span><span class="token punctuation">,</span>
+ name<span class="token operator">:</span> <span class="token string">'A'</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ value<span class="token operator">:</span> <span class="token number">234</span><span class="token punctuation">,</span>
+ name<span class="token operator">:</span> <span class="token string">'B'</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ value<span class="token operator">:</span> <span class="token number">1548</span><span class="token punctuation">,</span>
+ name<span class="token operator">:</span> <span class="token string">'C'</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span><span class="token punctuation">,</span>
+ radius<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'40%'</span><span class="token punctuation">,</span> <span class="token string">'70%'</span><span class="token punctuation">]</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" str [...]
+ legend: {
+ orient: 'vertical',
+ x: 'left',
+ data: ['A', 'B', 'C', 'D', 'E']
+ },
+ series: [
+ {
+ type: 'pie',
+ radius: ['50%', '70%'],
+ avoidLabelOverlap: false,
+ label: {
+ show: false,
+ position: 'center',
+ emphasis: {
+ show: true
+ }
+ },
+ labelLine: {
+ show: false
+ },
+ emphasis: {
+ label: {
+ show: true,
+ fontSize: '30',
+ fontWeight: 'bold'
+ }
+ },
+ data: [
+ { value: 335, name: 'A' },
+ { value: 310, name: 'B' },
+ { value: 234, name: 'C' },
+ { value: 135, name: 'D' },
+ { value: 1548, name: 'E' }
+ ]
+ }
+ ]
+};</textarea><pre data-testid="preview" class="prism-editor__editor">option <span class="token operator">=</span> <span class="token punctuation">{</span>
+ legend<span class="token operator">:</span> <span class="token punctuation">{</span>
+ orient<span class="token operator">:</span> <span class="token string">'vertical'</span><span class="token punctuation">,</span>
+ x<span class="token operator">:</span> <span class="token string">'left'</span><span class="token punctuation">,</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'A'</span><span class="token punctuation">,</span> <span class="token string">'B'</span><span class="token punctuation">,</span> <span class="token string">'C'</span><span class="token punctuation">,</span> <span class="token string">'D'</span><span class="token punctuation">,</span> <span class="token string">'E'</span><span class="token punctuation">]</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ series<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'pie'</span><span class="token punctuation">,</span>
+ radius<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'50%'</span><span class="token punctuation">,</span> <span class="token string">'70%'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ avoidLabelOverlap<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
+ label<span class="token operator">:</span> <span class="token punctuation">{</span>
+ show<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
+ position<span class="token operator">:</span> <span class="token string">'center'</span><span class="token punctuation">,</span>
+ emphasis<span class="token operator">:</span> <span class="token punctuation">{</span>
+ show<span class="token operator">:</span> <span class="token boolean">true</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ labelLine<span class="token operator">:</span> <span class="token punctuation">{</span>
+ show<span class="token operator">:</span> <span class="token boolean">false</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ emphasis<span class="token operator">:</span> <span class="token punctuation">{</span>
+ label<span class="token operator">:</span> <span class="token punctuation">{</span>
+ show<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
+ fontSize<span class="token operator">:</span> <span class="token string">'30'</span><span class="token punctuation">,</span>
+ fontWeight<span class="token operator">:</span> <span class="token string">'bold'</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span> value<span class="token operator">:</span> <span class="token number">335</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">'A'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span> value<span class="token operator">:</span> <span class="token number">310</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">'B'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span> value<span class="token operator">:</span> <span class="token number">234</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">'C'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span> value<span class="token operator">:</span> <span class="token number">135</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">'D'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span> value<span class="token operator">:</span> <span class="token number">1548</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">'E'</span> <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" str [...]
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
+ <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 type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+ <script>var _hmt=_hmt||[];!function(){var e=document.createElement("script");e.src="https://hm.baidu.com/hm.js?54b918eee37cb8a7045f0fd0f0b24395";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)}()</script>
+ </body>
+</html>
diff --git a/docs/en/how-to/chart-types/pie/rose/index.html b/docs/en/how-to/chart-types/pie/rose/index.html
new file mode 100644
index 0000000..ba09005
--- /dev/null
+++ b/docs/en/how-to/chart-types/pie/rose/index.html
@@ -0,0 +1,75 @@
+<!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">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/ec [...]
+ </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="ht [...]
+ series: [
+ {
+ type: 'pie',
+ data: [
+ {
+ value: 100,
+ name: 'A'
+ },
+ {
+ value: 200,
+ name: 'B'
+ },
+ {
+ value: 300,
+ name: 'C'
+ },
+ {
+ value: 400,
+ name: 'D'
+ },
+ {
+ value: 500,
+ name: 'E'
+ }
+ ],
+ roseType: 'area'
+ }
+ ]
+};</textarea><pre data-testid="preview" class="prism-editor__editor">option <span class="token operator">=</span> <span class="token punctuation">{</span>
+ series<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'pie'</span><span class="token punctuation">,</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ value<span class="token operator">:</span> <span class="token number">100</span><span class="token punctuation">,</span>
+ name<span class="token operator">:</span> <span class="token string">'A'</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ value<span class="token operator">:</span> <span class="token number">200</span><span class="token punctuation">,</span>
+ name<span class="token operator">:</span> <span class="token string">'B'</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ value<span class="token operator">:</span> <span class="token number">300</span><span class="token punctuation">,</span>
+ name<span class="token operator">:</span> <span class="token string">'C'</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ value<span class="token operator">:</span> <span class="token number">400</span><span class="token punctuation">,</span>
+ name<span class="token operator">:</span> <span class="token string">'D'</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ value<span class="token operator">:</span> <span class="token number">500</span><span class="token punctuation">,</span>
+ name<span class="token operator">:</span> <span class="token string">'E'</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span><span class="token punctuation">,</span>
+ roseType<span class="token operator">:</span> <span class="token string">'area'</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" str [...]
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
+ <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 type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+ <script>var _hmt=_hmt||[];!function(){var e=document.createElement("script");e.src="https://hm.baidu.com/hm.js?54b918eee37cb8a7045f0fd0f0b24395";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)}()</script>
+ </body>
+</html>
diff --git a/docs/en/how-to/chart-types/scatter/basic-scatter/index.html b/docs/en/how-to/chart-types/scatter/basic-scatter/index.html
new file mode 100644
index 0000000..e40677d
--- /dev/null
+++ b/docs/en/how-to/chart-types/scatter/basic-scatter/index.html
@@ -0,0 +1,128 @@
+<!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">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/ec [...]
+ </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="ht [...]
+ xAxis: {
+ data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
+ },
+ yAxis: {},
+ series: [
+ {
+ type: 'scatter',
+ data: [220, 182, 191, 234, 290, 330, 310]
+ }
+ ]
+};</textarea><pre data-testid="preview" class="prism-editor__editor">option <span class="token operator">=</span> <span class="token punctuation">{</span>
+ xAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'Sun'</span><span class="token punctuation">,</span> <span class="token string">'Mon'</span><span class="token punctuation">,</span> <span class="token string">'Tue'</span><span class="token punctuation">,</span> <span class="token string">'Wed'</span><span class="token punctuation">,</span> <span class="token string">'Thu'</span><span class="token punctuation">,</span> <span [...]
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ yAxis<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
+ series<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'scatter'</span><span class="token punctuation">,</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">220</span><span class="token punctuation">,</span> <span class="token number">182</span><span class="token punctuation">,</span> <span class="token number">191</span><span class="token punctuation">,</span> <span class="token number">234</span><span class="token punctuation">,</span> <span class="token number">290</span><span class="token punctuation">,</span> <span class="t [...]
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" str [...]
+ xAxis: {},
+ yAxis: {},
+ series: [
+ {
+ type: 'scatter',
+ data: [
+ [10, 5],
+ [0, 8],
+ [6, 10],
+ [2, 12],
+ [8, 9]
+ ]
+ }
+ ]
+};</textarea><pre data-testid="preview" class="prism-editor__editor">option <span class="token operator">=</span> <span class="token punctuation">{</span>
+ xAxis<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
+ yAxis<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
+ series<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'scatter'</span><span class="token punctuation">,</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">[</span><span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">8</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token number">6</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">12</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token number">8</span><span class="token punctuation">,</span> <span class="token number">9</span><span class="token punctuation">]</span>
+ <span class="token punctuation">]</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" str [...]
+<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>svg</span> <span class="token attr-name">version</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1.1<span class="token punctuation">"</span></span> <span class="token attr-name">xmlns</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>http:// [...]
+ <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>path</span> <span class="token attr-name">d</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>M51.911,16.242C51.152,7.888,45.239,1.827,37.839,1.827c-4.93,0-9.444,2.653-11.984,6.905 c-2.517-4.307-6.846-6.906-11.697-6.906c-7.399,0-13.313,6.061-14.071,14.415c-0.06,0.369-0.306,2.311,0.442,5.478 c1.078,4.568,3.568,8.723,7 [...]
+<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>svg</span><span class="token punctuation">></span></span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.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 [...]
+ xAxis: {
+ data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
+ },
+ yAxis: {},
+ series: [
+ {
+ type: 'scatter',
+ data: [220, 182, 191, 234, 290, 330, 310],
+ symbolSize: 20,
+ symbol:
+ 'path://M51.911,16.242C51.152,7.888,45.239,1.827,37.839,1.827c-4.93,0-9.444,2.653-11.984,6.905 c-2.517-4.307-6.846-6.906-11.697-6.906c-7.399,0-13.313,6.061-14.071,14.415c-0.06,0.369-0.306,2.311,0.442,5.478 c1.078,4.568,3.568,8.723,7.199,12.013l18.115,16.439l18.426-16.438c3.631-3.291,6.121-7.445,7.199-12.014 C52.216,18.553,51.97,16.611,51.911,16.242z'
+ }
+ ]
+};</textarea><pre data-testid="preview" class="prism-editor__editor">option <span class="token operator">=</span> <span class="token punctuation">{</span>
+ xAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'Sun'</span><span class="token punctuation">,</span> <span class="token string">'Mon'</span><span class="token punctuation">,</span> <span class="token string">'Tue'</span><span class="token punctuation">,</span> <span class="token string">'Wed'</span><span class="token punctuation">,</span> <span class="token string">'Thu'</span><span class="token punctuation">,</span> <span [...]
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ yAxis<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
+ series<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'scatter'</span><span class="token punctuation">,</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">220</span><span class="token punctuation">,</span> <span class="token number">182</span><span class="token punctuation">,</span> <span class="token number">191</span><span class="token punctuation">,</span> <span class="token number">234</span><span class="token punctuation">,</span> <span class="token number">290</span><span class="token punctuation">,</span> <span class="t [...]
+ symbolSize<span class="token operator">:</span> <span class="token number">20</span><span class="token punctuation">,</span>
+ symbol<span class="token operator">:</span>
+ <span class="token string">'path://M51.911,16.242C51.152,7.888,45.239,1.827,37.839,1.827c-4.93,0-9.444,2.653-11.984,6.905 c-2.517-4.307-6.846-6.906-11.697-6.906c-7.399,0-13.313,6.061-14.071,14.415c-0.06,0.369-0.306,2.311,0.442,5.478 c1.078,4.568,3.568,8.723,7.199,12.013l18.115,16.439l18.426-16.438c3.631-3.291,6.121-7.445,7.199-12.014 C52.216,18.553,51.97,16.611,51.911,16.242z'</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" str [...]
+ xAxis: {
+ data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
+ },
+ yAxis: {},
+ series: [
+ {
+ type: 'scatter',
+ data: [220, 182, 191, 234, 290, 330, 310],
+ symbolSize: function(value) {
+ return value / 10;
+ }
+ }
+ ]
+};</textarea><pre data-testid="preview" class="prism-editor__editor">option <span class="token operator">=</span> <span class="token punctuation">{</span>
+ xAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'Sun'</span><span class="token punctuation">,</span> <span class="token string">'Mon'</span><span class="token punctuation">,</span> <span class="token string">'Tue'</span><span class="token punctuation">,</span> <span class="token string">'Wed'</span><span class="token punctuation">,</span> <span class="token string">'Thu'</span><span class="token punctuation">,</span> <span [...]
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ yAxis<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
+ series<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'scatter'</span><span class="token punctuation">,</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">220</span><span class="token punctuation">,</span> <span class="token number">182</span><span class="token punctuation">,</span> <span class="token number">191</span><span class="token punctuation">,</span> <span class="token number">234</span><span class="token punctuation">,</span> <span class="token number">290</span><span class="token punctuation">,</span> <span class="t [...]
+ <span class="token function-variable function">symbolSize</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+ <span class="token keyword">return</span> value <span class="token operator">/</span> <span class="token number">10</span><span class="token punctuation">;</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" str [...]
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
+ <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 type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+ <script>var _hmt=_hmt||[];!function(){var e=document.createElement("script");e.src="https://hm.baidu.com/hm.js?54b918eee37cb8a7045f0fd0f0b24395";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)}()</script>
+ </body>
+</html>
diff --git a/docs/en/how-to/cross-platform/server/index.html b/docs/en/how-to/cross-platform/server/index.html
new file mode 100644
index 0000000..da37b7c
--- /dev/null
+++ b/docs/en/how-to/cross-platform/server/index.html
@@ -0,0 +1,17 @@
+<!doctype html>
+<html data-n-head-ssr>
+ <head>
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/ec [...]
+ </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="ht [...]
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
+ <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 type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+ <script>var _hmt=_hmt||[];!function(){var e=document.createElement("script");e.src="https://hm.baidu.com/hm.js?54b918eee37cb8a7045f0fd0f0b24395";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)}()</script>
+ </body>
+</html>
diff --git a/docs/en/how-to/data/dynamic-data/index.html b/docs/en/how-to/data/dynamic-data/index.html
new file mode 100644
index 0000000..aa77433
--- /dev/null
+++ b/docs/en/how-to/data/dynamic-data/index.html
@@ -0,0 +1,85 @@
+<!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">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/ec [...]
+ </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="ht [...]
+
+$<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'data.json'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">done</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <s [...]
+ <span class="token comment">// Structure of data:</span>
+ <span class="token comment">// {</span>
+ <span class="token comment">// categories: ["Shirt","Wool sweater","Chiffon shirt","Pants","High-heeled shoes","socks"],</span>
+ <span class="token comment">// values: [5, 20, 36, 10, 10, 20]</span>
+ <span class="token comment">// }</span>
+ myChart<span class="token punctuation">.</span><span class="token function">setOption</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+ title<span class="token operator">:</span> <span class="token punctuation">{</span>
+ text<span class="token operator">:</span> <span class="token string">'Asynchronous Loading Example'</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ tooltip<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
+ legend<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
+ xAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
+ data<span class="token operator">:</span> data<span class="token punctuation">.</span>categories
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ yAxis<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
+ series<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ name<span class="token operator">:</span> <span class="token string">'Sales'</span><span class="token punctuation">,</span>
+ type<span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span>
+ data<span class="token operator">:</span> data<span class="token punctuation">.</span>values
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span>
+ <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" [...]
+<span class="token comment">// Show title, legends and empty axes</span>
+myChart<span class="token punctuation">.</span><span class="token function">setOption</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+ title<span class="token operator">:</span> <span class="token punctuation">{</span>
+ text<span class="token operator">:</span> <span class="token string">'Asynchronous Loading Example'</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ tooltip<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
+ legend<span class="token operator">:</span> <span class="token punctuation">{</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'Sales'</span><span class="token punctuation">]</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ xAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ yAxis<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
+ series<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ name<span class="token operator">:</span> <span class="token string">'Sales'</span><span class="token punctuation">,</span>
+ type<span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+
+<span class="token comment">// Asynchronous Data Loading</span>
+$<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'data.json'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">done</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <s [...]
+ <span class="token comment">// Fill in the data</span>
+ myChart<span class="token punctuation">.</span><span class="token function">setOption</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+ xAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
+ data<span class="token operator">:</span> data<span class="token punctuation">.</span>categories
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ series<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ <span class="token comment">// Find series by name</span>
+ name<span class="token operator">:</span> <span class="token string">'Sales'</span><span class="token punctuation">,</span>
+ data<span class="token operator">:</span> data<span class="token punctuation">.</span>data
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span>
+ <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" [...]
+$<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'data.json'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">done</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> < [...]
+ myChart<span class="token punctuation">.</span><span class="token function">hideLoading</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+ myChart<span class="token punctuation">.</span><span class="token function">setOption</span><span class="token punctuation">(</span><span class="token operator">...</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" [...]
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
+ <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 type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+ <script>var _hmt=_hmt||[];!function(){var e=document.createElement("script");e.src="https://hm.baidu.com/hm.js?54b918eee37cb8a7045f0fd0f0b24395";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)}()</script>
+ </body>
+</html>
diff --git a/docs/en/how-to/interaction/drag/index.html b/docs/en/how-to/interaction/drag/index.html
new file mode 100644
index 0000000..a59d0c5
--- /dev/null
+++ b/docs/en/how-to/interaction/drag/index.html
@@ -0,0 +1,221 @@
+<!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">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/ec [...]
+ </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="ht [...]
+<span class="token keyword">var</span> data <span class="token operator">=</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">[</span><span class="token number">15</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token operator">-</span><span class="token number">50</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token operator">-</span><span class="token number">56.5</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token operator">-</span><span class="token number">46.5</span><span class="token punctuation">,</span> <span class="token number">30</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token operator">-</span><span class="token number">22.1</span><span class="token punctuation">,</span> <span class="token number">40</span><span class="token punctuation">]</span>
+<span class="token punctuation">]</span><span class="token punctuation">;</span>
+
+myChart<span class="token punctuation">.</span><span class="token function">setOption</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+ xAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
+ min<span class="token operator">:</span> <span class="token operator">-</span><span class="token number">100</span><span class="token punctuation">,</span>
+ max<span class="token operator">:</span> <span class="token number">80</span><span class="token punctuation">,</span>
+ type<span class="token operator">:</span> <span class="token string">'value'</span><span class="token punctuation">,</span>
+ axisLine<span class="token operator">:</span> <span class="token punctuation">{</span> onZero<span class="token operator">:</span> <span class="token boolean">false</span> <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ yAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
+ min<span class="token operator">:</span> <span class="token operator">-</span><span class="token number">30</span><span class="token punctuation">,</span>
+ max<span class="token operator">:</span> <span class="token number">60</span><span class="token punctuation">,</span>
+ type<span class="token operator">:</span> <span class="token string">'value'</span><span class="token punctuation">,</span>
+ axisLine<span class="token operator">:</span> <span class="token punctuation">{</span> onZero<span class="token operator">:</span> <span class="token boolean">false</span> <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ series<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ id<span class="token operator">:</span> <span class="token string">'a'</span><span class="token punctuation">,</span>
+ type<span class="token operator">:</span> <span class="token string">'line'</span><span class="token punctuation">,</span>
+ smooth<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
+ <span class="token comment">// Set a big symbolSize for dragging convenience.</span>
+ symbolSize<span class="token operator">:</span> symbolSize<span class="token punctuation">,</span>
+ data<span class="token operator">:</span> data
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" [...]
+ <span class="token comment">// Declare a graphic component, which contains some graphic elements</span>
+ <span class="token comment">// with the type of 'circle'.</span>
+ <span class="token comment">// Here we have used the method `echarts.util.map`, which has the same</span>
+ <span class="token comment">// behavior as Array.prototype.map, and is compatible with ES5-.</span>
+ graphic<span class="token operator">:</span> echarts<span class="token punctuation">.</span>util<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span>data<span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">dataItem<span class="token punctuation">,</span> dataIndex</span><span class="token punctuation">)</span> <span class [...]
+ <span class="token keyword">return</span> <span class="token punctuation">{</span>
+ <span class="token comment">// 'circle' means this graphic element is a shape of circle.</span>
+ type<span class="token operator">:</span> <span class="token string">'circle'</span><span class="token punctuation">,</span>
+
+ shape<span class="token operator">:</span> <span class="token punctuation">{</span>
+ <span class="token comment">// The radius of the circle.</span>
+ r<span class="token operator">:</span> symbolSize <span class="token operator">/</span> <span class="token number">2</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token comment">// Transform is used to located the circle. position:</span>
+ <span class="token comment">// [x, y] means translate the circle to the position [x, y].</span>
+ <span class="token comment">// The API `convertToPixel` is used to get the position of</span>
+ <span class="token comment">// the circle, which will introduced later.</span>
+ position<span class="token operator">:</span> myChart<span class="token punctuation">.</span><span class="token function">convertToPixel</span><span class="token punctuation">(</span><span class="token string">'grid'</span><span class="token punctuation">,</span> dataItem<span class="token punctuation">)</span><span class="token punctuation">,</span>
+
+ <span class="token comment">// Make the circle invisible (but mouse event works as normal).</span>
+ invisible<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
+ <span class="token comment">// Make the circle draggable.</span>
+ draggable<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
+ <span class="token comment">// Give a big z value, which makes the circle cover the symbol</span>
+ <span class="token comment">// in line series.</span>
+ z<span class="token operator">:</span> <span class="token number">100</span><span class="token punctuation">,</span>
+ <span class="token comment">// This is the event handler of dragging, which will be triggered</span>
+ <span class="token comment">// repeatly while dragging. See more details below.</span>
+ <span class="token comment">// A util method `echarts.util.curry` is used here to generate a</span>
+ <span class="token comment">// new function the same as `onPointDragging`, except that the</span>
+ <span class="token comment">// first parameter is fixed to be the `dataIndex` here.</span>
+ ondrag<span class="token operator">:</span> echarts<span class="token punctuation">.</span>util<span class="token punctuation">.</span><span class="token function">curry</span><span class="token punctuation">(</span>onPointDragging<span class="token punctuation">,</span> dataIndex<span class="token punctuation">)</span>
+ <span class="token punctuation">}</span><span class="token punctuation">;</span>
+ <span class="token punctuation">}</span><span class="token punctuation">)</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" [...]
+<span class="token comment">// The mission of this function is to update `series.data` based on</span>
+<span class="token comment">// the new points updated by dragging, and to re-render the line</span>
+<span class="token comment">// series based on the new data, by which the graphic elements of the</span>
+<span class="token comment">// line series can be synchronized with dragging.</span>
+<span class="token keyword">function</span> <span class="token function">onPointDragging</span><span class="token punctuation">(</span><span class="token parameter">dataIndex</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+ <span class="token comment">// Here the `data` is declared in the code block in the beginning</span>
+ <span class="token comment">// of this article. The `this` refers to the dragged circle.</span>
+ <span class="token comment">// `this.position` is the current position of the circle.</span>
+ data<span class="token punctuation">[</span>dataIndex<span class="token punctuation">]</span> <span class="token operator">=</span> myChart<span class="token punctuation">.</span><span class="token function">convertFromPixel</span><span class="token punctuation">(</span><span class="token string">'grid'</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>position<span class="token punctuation">)</span><span class [...]
+ <span class="token comment">// Re-render the chart based on the updated `data`.</span>
+ myChart<span class="token punctuation">.</span><span class="token function">setOption</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+ series<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ id<span class="token operator">:</span> <span class="token string">'a'</span><span class="token punctuation">,</span>
+ data<span class="token operator">:</span> data
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span>
+ <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+<span class="token punctuation">}</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 [...]
+ <span class="token comment">// Re-calculate the position of each circle and update chart using `setOption`.</span>
+ myChart<span class="token punctuation">.</span><span class="token function">setOption</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+ graphic<span class="token operator">:</span> echarts<span class="token punctuation">.</span>util<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span>data<span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">item<span class="token punctuation">,</span> dataIndex</span><span class="token punctuation">)</span> <span class=" [...]
+ <span class="token keyword">return</span> <span class="token punctuation">{</span>
+ position<span class="token operator">:</span> myChart<span class="token punctuation">.</span><span class="token function">convertToPixel</span><span class="token punctuation">(</span><span class="token string">'grid'</span><span class="token punctuation">,</span> item<span class="token punctuation">)</span>
+ <span class="token punctuation">}</span><span class="token punctuation">;</span>
+ <span class="token punctuation">}</span><span class="token punctuation">)</span>
+ <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" [...]
+ <span class="token comment">// ...,</span>
+ tooltip<span class="token operator">:</span> <span class="token punctuation">{</span>
+ <span class="token comment">// Means disable default "show/hide rule".</span>
+ triggerOn<span class="token operator">:</span> <span class="token string">'none'</span><span class="token punctuation">,</span>
+ <span class="token function-variable function">formatter</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">params</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+ <span class="token keyword">return</span> <span class="token punctuation">(</span>
+ <span class="token string">'X: '</span> <span class="token operator">+</span>
+ params<span class="token punctuation">.</span>data<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">toFixed</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span> <span class="token operator">+</span>
+ <span class="token string">'<br>Y: '</span> <span class="token operator">+</span>
+ params<span class="token punctuation">.</span>data<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">toFixed</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span>
+ <span class="token punctuation">)</span><span class="token punctuation">;</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" [...]
+ graphic<span class="token operator">:</span> data<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">item<span class="token punctuation">,</span> dataIndex</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+ <span class="token keyword">return</span> <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'circle'</span><span class="token punctuation">,</span>
+ <span class="token comment">// ...,</span>
+ <span class="token comment">// Customize "show/hide rule", show when mouse over, hide when mouse out.</span>
+ onmousemove<span class="token operator">:</span> echarts<span class="token punctuation">.</span>util<span class="token punctuation">.</span><span class="token function">curry</span><span class="token punctuation">(</span>showTooltip<span class="token punctuation">,</span> dataIndex<span class="token punctuation">)</span><span class="token punctuation">,</span>
+ onmouseout<span class="token operator">:</span> echarts<span class="token punctuation">.</span>util<span class="token punctuation">.</span><span class="token function">curry</span><span class="token punctuation">(</span>hideTooltip<span class="token punctuation">,</span> dataIndex<span class="token punctuation">)</span>
+ <span class="token punctuation">}</span><span class="token punctuation">;</span>
+ <span class="token punctuation">}</span><span class="token punctuation">)</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+
+<span class="token keyword">function</span> <span class="token function">showTooltip</span><span class="token punctuation">(</span><span class="token parameter">dataIndex</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+ myChart<span class="token punctuation">.</span><span class="token function">dispatchAction</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'showTip'</span><span class="token punctuation">,</span>
+ seriesIndex<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
+ dataIndex<span class="token operator">:</span> dataIndex
+ <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+<span class="token punctuation">}</span>
+
+<span class="token keyword">function</span> <span class="token function">hideTooltip</span><span class="token punctuation">(</span><span class="token parameter">dataIndex</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+ myChart<span class="token punctuation">.</span><span class="token function">dispatchAction</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'hideTip'</span>
+ <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+<span class="token punctuation">}</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 [...]
+
+<span class="token keyword">var</span> symbolSize <span class="token operator">=</span> <span class="token number">20</span><span class="token punctuation">;</span>
+<span class="token keyword">var</span> data <span class="token operator">=</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">[</span><span class="token number">15</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token operator">-</span><span class="token number">50</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token operator">-</span><span class="token number">56.5</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token operator">-</span><span class="token number">46.5</span><span class="token punctuation">,</span> <span class="token number">30</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token operator">-</span><span class="token number">22.1</span><span class="token punctuation">,</span> <span class="token number">40</span><span class="token punctuation">]</span>
+<span class="token punctuation">]</span><span class="token punctuation">;</span>
+<span class="token keyword">var</span> myChart <span class="token operator">=</span> echarts<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'main'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token pun [...]
+myChart<span class="token punctuation">.</span><span class="token function">setOption</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+ tooltip<span class="token operator">:</span> <span class="token punctuation">{</span>
+ triggerOn<span class="token operator">:</span> <span class="token string">'none'</span><span class="token punctuation">,</span>
+ <span class="token function-variable function">formatter</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">params</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+ <span class="token keyword">return</span> <span class="token punctuation">(</span>
+ <span class="token string">'X: '</span> <span class="token operator">+</span>
+ params<span class="token punctuation">.</span>data<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">toFixed</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span> <span class="token operator">+</span>
+ <span class="token string">'<br />Y: '</span> <span class="token operator">+</span>
+ params<span class="token punctuation">.</span>data<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">toFixed</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span>
+ <span class="token punctuation">)</span><span class="token punctuation">;</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ xAxis<span class="token operator">:</span> <span class="token punctuation">{</span> min<span class="token operator">:</span> <span class="token operator">-</span><span class="token number">100</span><span class="token punctuation">,</span> max<span class="token operator">:</span> <span class="token number">80</span><span class="token punctuation">,</span> type<span class="token operator">:</span> <span class="token string">'value'</span><span class="token punctuation">,</span> axisLine [...]
+ yAxis<span class="token operator">:</span> <span class="token punctuation">{</span> min<span class="token operator">:</span> <span class="token operator">-</span><span class="token number">30</span><span class="token punctuation">,</span> max<span class="token operator">:</span> <span class="token number">60</span><span class="token punctuation">,</span> type<span class="token operator">:</span> <span class="token string">'value'</span><span class="token punctuation">,</span> axisLine< [...]
+ series<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span> id<span class="token operator">:</span> <span class="token string">'a'</span><span class="token punctuation">,</span> type<span class="token operator">:</span> <span class="token string">'line'</span><span class="token punctuation">,</span> smooth<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> symbolSize<span class="token operator">:</span> symbolSize<span class="token punct [...]
+ <span class="token punctuation">]</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+myChart<span class="token punctuation">.</span><span class="token function">setOption</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+ graphic<span class="token operator">:</span> echarts<span class="token punctuation">.</span>util<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span>data<span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">item<span class="token punctuation">,</span> dataIndex</span><span class="token punctuation">)</span> <span class="to [...]
+ <span class="token keyword">return</span> <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'circle'</span><span class="token punctuation">,</span>
+ position<span class="token operator">:</span> myChart<span class="token punctuation">.</span><span class="token function">convertToPixel</span><span class="token punctuation">(</span><span class="token string">'grid'</span><span class="token punctuation">,</span> item<span class="token punctuation">)</span><span class="token punctuation">,</span>
+ shape<span class="token operator">:</span> <span class="token punctuation">{</span> r<span class="token operator">:</span> symbolSize <span class="token operator">/</span> <span class="token number">2</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ invisible<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
+ draggable<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
+ ondrag<span class="token operator">:</span> echarts<span class="token punctuation">.</span>util<span class="token punctuation">.</span><span class="token function">curry</span><span class="token punctuation">(</span>onPointDragging<span class="token punctuation">,</span> dataIndex<span class="token punctuation">)</span><span class="token punctuation">,</span>
+ onmousemove<span class="token operator">:</span> echarts<span class="token punctuation">.</span>util<span class="token punctuation">.</span><span class="token function">curry</span><span class="token punctuation">(</span>showTooltip<span class="token punctuation">,</span> dataIndex<span class="token punctuation">)</span><span class="token punctuation">,</span>
+ onmouseout<span class="token operator">:</span> echarts<span class="token punctuation">.</span>util<span class="token punctuation">.</span><span class="token function">curry</span><span class="token punctuation">(</span>hideTooltip<span class="token punctuation">,</span> dataIndex<span class="token punctuation">)</span><span class="token punctuation">,</span>
+ z<span class="token operator">:</span> <span class="token number">100</span>
+ <span class="token punctuation">}</span><span class="token punctuation">;</span>
+ <span class="token punctuation">}</span><span class="token punctuation">)</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+window<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'resize'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+ myChart<span class="token punctuation">.</span><span class="token function">setOption</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+ graphic<span class="token operator">:</span> echarts<span class="token punctuation">.</span>util<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span>data<span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">item<span class="token punctuation">,</span> dataIndex</span><span class="token punctuation">)</span> <span class=" [...]
+ <span class="token keyword">return</span> <span class="token punctuation">{</span> position<span class="token operator">:</span> myChart<span class="token punctuation">.</span><span class="token function">convertToPixel</span><span class="token punctuation">(</span><span class="token string">'grid'</span><span class="token punctuation">,</span> item<span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
+ <span class="token punctuation">}</span><span class="token punctuation">)</span>
+ <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+<span class="token keyword">function</span> <span class="token function">showTooltip</span><span class="token punctuation">(</span><span class="token parameter">dataIndex</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+ myChart<span class="token punctuation">.</span><span class="token function">dispatchAction</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'showTip'</span><span class="token punctuation">,</span>
+ seriesIndex<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
+ dataIndex<span class="token operator">:</span> dataIndex
+ <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+<span class="token punctuation">}</span>
+<span class="token keyword">function</span> <span class="token function">hideTooltip</span><span class="token punctuation">(</span><span class="token parameter">dataIndex</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+ myChart<span class="token punctuation">.</span><span class="token function">dispatchAction</span><span class="token punctuation">(</span><span class="token punctuation">{</span> type<span class="token operator">:</span> <span class="token string">'hideTip'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+<span class="token punctuation">}</span>
+<span class="token keyword">function</span> <span class="token function">onPointDragging</span><span class="token punctuation">(</span><span class="token parameter">dataIndex<span class="token punctuation">,</span> dx<span class="token punctuation">,</span> dy</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+ data<span class="token punctuation">[</span>dataIndex<span class="token punctuation">]</span> <span class="token operator">=</span> myChart<span class="token punctuation">.</span><span class="token function">convertFromPixel</span><span class="token punctuation">(</span><span class="token string">'grid'</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>position<span class="token punctuation">)</span><span class [...]
+ myChart<span class="token punctuation">.</span><span class="token function">setOption</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+ series<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ id<span class="token operator">:</span> <span class="token string">'a'</span><span class="token punctuation">,</span>
+ data<span class="token operator">:</span> data
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span>
+ <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+<span class="token punctuation">}</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 [...]
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
+ <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 type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+ <script>var _hmt=_hmt||[];!function(){var e=document.createElement("script");e.src="https://hm.baidu.com/hm.js?54b918eee37cb8a7045f0fd0f0b24395";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)}()</script>
+ </body>
+</html>
diff --git a/docs/en/how-to/label/rich-text/index.html b/docs/en/how-to/label/rich-text/index.html
new file mode 100644
index 0000000..dad5909
--- /dev/null
+++ b/docs/en/how-to/label/rich-text/index.html
@@ -0,0 +1,683 @@
+<!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">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/ec [...]
+ </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="ht [...]
+ <span class="token comment">// Styles defined in 'rich' can be applied to some fragments</span>
+ <span class="token comment">// of text by adding some markers to those fragment, like</span>
+ <span class="token comment">// `{styleName|text content text content}`.</span>
+ <span class="token comment">// `'\n'` is the newline character.</span>
+ formatter<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token string">'{a|Style "a" is applied to this fragment}'</span><span class="token punctuation">,</span>
+ <span class="token string">'{b|Style "b" is applied to this fragment}This fragment use default style{x|use style "x"}'</span>
+ <span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">'\n'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+
+ <span class="token comment">// Styles for the whole text block are defined here:</span>
+ color<span class="token operator">:</span> <span class="token string">'#333'</span><span class="token punctuation">,</span>
+ fontSize<span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span>
+ fontFamily<span class="token operator">:</span> <span class="token string">'Arial'</span><span class="token punctuation">,</span>
+ borderWidth<span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span>
+ backgroundColor<span class="token operator">:</span> <span class="token string">'#984455'</span><span class="token punctuation">,</span>
+ padding<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ lineHeight<span class="token operator">:</span> <span class="token number">20</span><span class="token punctuation">,</span>
+
+ <span class="token comment">// Styles for text fragments are defined here:</span>
+ rich<span class="token operator">:</span> <span class="token punctuation">{</span>
+ a<span class="token operator">:</span> <span class="token punctuation">{</span>
+ color<span class="token operator">:</span> <span class="token string">'red'</span><span class="token punctuation">,</span>
+ lineHeight<span class="token operator">:</span> <span class="token number">10</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ b<span class="token operator">:</span> <span class="token punctuation">{</span>
+ backgroundColor<span class="token operator">:</span> <span class="token punctuation">{</span>
+ image<span class="token operator">:</span> <span class="token string">'xxx/xxx.jpg'</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ height<span class="token operator">:</span> <span class="token number">40</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ x<span class="token operator">:</span> <span class="token punctuation">{</span>
+ fontSize<span class="token operator">:</span> <span class="token number">18</span><span class="token punctuation">,</span>
+ fontFamily<span class="token operator">:</span> <span class="token string">'Microsoft YaHei'</span><span class="token punctuation">,</span>
+ borderColor<span class="token operator">:</span> <span class="token string">'#449933'</span><span class="token punctuation">,</span>
+ borderRadius<span class="token operator">:</span> <span class="token number">4</span>
+ <span class="token punctuation">}</span>
+ <span class="token comment">// ...</span>
+ <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v [...]
+ series: [
+ {
+ type: 'scatter',
+ symbolSize: 1,
+ data: [
+ {
+ value: [0, 0],
+ label: {
+ normal: {
+ show: true,
+ formatter: [
+ 'Plain text',
+ '{textBorder|textBorderColor + textBorderWidth}',
+ '{textShadow|textShadowColor + textShadowBlur + textShadowOffsetX + textShadowOffsetY}',
+ '{bg|backgroundColor + borderRadius + padding}',
+ '{border|borderColor + borderWidth + borderRadius + padding}',
+ '{shadow|shadowColor + shadowBlur + shadowOffsetX + shadowOffsetY}'
+ ].join('\n'),
+ backgroundColor: '#eee',
+ borderColor: '#333',
+ borderWidth: 2,
+ borderRadius: 5,
+ padding: 10,
+ color: '#000',
+ fontSize: 14,
+ shadowBlur: 3,
+ shadowColor: '#888',
+ shadowOffsetX: 0,
+ shadowOffsetY: 3,
+ lineHeight: 30,
+ rich: {
+ textBorder: {
+ fontSize: 20,
+ textBorderColor: '#000',
+ textBorderWidth: 3,
+ color: '#fff'
+ },
+ textShadow: {
+ fontSize: 16,
+ textShadowBlur: 5,
+ textShadowColor: '#000',
+ textShadowOffsetX: 3,
+ textShadowOffsetY: 3,
+ color: '#fff'
+ },
+ bg: {
+ backgroundColor: '#339911',
+ color: '#fff',
+ borderRadius: 15,
+ padding: 5
+ },
+ border: {
+ color: '#000',
+ borderColor: '#449911',
+ borderWidth: 1,
+ borderRadius: 3,
+ padding: 5
+ },
+ shadow: {
+ backgroundColor: '#992233',
+ padding: 5,
+ color: '#fff',
+ shadowBlur: 5,
+ shadowColor: '#336699',
+ shadowOffsetX: 6,
+ shadowOffsetY: 6
+ }
+ }
+ }
+ }
+ }
+ ]
+ }
+ ],
+ xAxis: {
+ show: false,
+ min: -1,
+ max: 1
+ },
+ yAxis: {
+ show: false,
+ min: -1,
+ max: 1
+ }
+};</textarea><pre data-testid="preview" class="prism-editor__editor">option <span class="token operator">=</span> <span class="token punctuation">{</span>
+ series<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'scatter'</span><span class="token punctuation">,</span>
+ symbolSize<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ value<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ label<span class="token operator">:</span> <span class="token punctuation">{</span>
+ normal<span class="token operator">:</span> <span class="token punctuation">{</span>
+ show<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
+ formatter<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token string">'Plain text'</span><span class="token punctuation">,</span>
+ <span class="token string">'{textBorder|textBorderColor + textBorderWidth}'</span><span class="token punctuation">,</span>
+ <span class="token string">'{textShadow|textShadowColor + textShadowBlur + textShadowOffsetX + textShadowOffsetY}'</span><span class="token punctuation">,</span>
+ <span class="token string">'{bg|backgroundColor + borderRadius + padding}'</span><span class="token punctuation">,</span>
+ <span class="token string">'{border|borderColor + borderWidth + borderRadius + padding}'</span><span class="token punctuation">,</span>
+ <span class="token string">'{shadow|shadowColor + shadowBlur + shadowOffsetX + shadowOffsetY}'</span>
+ <span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">'\n'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+ backgroundColor<span class="token operator">:</span> <span class="token string">'#eee'</span><span class="token punctuation">,</span>
+ borderColor<span class="token operator">:</span> <span class="token string">'#333'</span><span class="token punctuation">,</span>
+ borderWidth<span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span>
+ borderRadius<span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span>
+ padding<span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span>
+ color<span class="token operator">:</span> <span class="token string">'#000'</span><span class="token punctuation">,</span>
+ fontSize<span class="token operator">:</span> <span class="token number">14</span><span class="token punctuation">,</span>
+ shadowBlur<span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span>
+ shadowColor<span class="token operator">:</span> <span class="token string">'#888'</span><span class="token punctuation">,</span>
+ shadowOffsetX<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
+ shadowOffsetY<span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span>
+ lineHeight<span class="token operator">:</span> <span class="token number">30</span><span class="token punctuation">,</span>
+ rich<span class="token operator">:</span> <span class="token punctuation">{</span>
+ textBorder<span class="token operator">:</span> <span class="token punctuation">{</span>
+ fontSize<span class="token operator">:</span> <span class="token number">20</span><span class="token punctuation">,</span>
+ textBorderColor<span class="token operator">:</span> <span class="token string">'#000'</span><span class="token punctuation">,</span>
+ textBorderWidth<span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span>
+ color<span class="token operator">:</span> <span class="token string">'#fff'</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ textShadow<span class="token operator">:</span> <span class="token punctuation">{</span>
+ fontSize<span class="token operator">:</span> <span class="token number">16</span><span class="token punctuation">,</span>
+ textShadowBlur<span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span>
+ textShadowColor<span class="token operator">:</span> <span class="token string">'#000'</span><span class="token punctuation">,</span>
+ textShadowOffsetX<span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span>
+ textShadowOffsetY<span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span>
+ color<span class="token operator">:</span> <span class="token string">'#fff'</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ bg<span class="token operator">:</span> <span class="token punctuation">{</span>
+ backgroundColor<span class="token operator">:</span> <span class="token string">'#339911'</span><span class="token punctuation">,</span>
+ color<span class="token operator">:</span> <span class="token string">'#fff'</span><span class="token punctuation">,</span>
+ borderRadius<span class="token operator">:</span> <span class="token number">15</span><span class="token punctuation">,</span>
+ padding<span class="token operator">:</span> <span class="token number">5</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ border<span class="token operator">:</span> <span class="token punctuation">{</span>
+ color<span class="token operator">:</span> <span class="token string">'#000'</span><span class="token punctuation">,</span>
+ borderColor<span class="token operator">:</span> <span class="token string">'#449911'</span><span class="token punctuation">,</span>
+ borderWidth<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
+ borderRadius<span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span>
+ padding<span class="token operator">:</span> <span class="token number">5</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ shadow<span class="token operator">:</span> <span class="token punctuation">{</span>
+ backgroundColor<span class="token operator">:</span> <span class="token string">'#992233'</span><span class="token punctuation">,</span>
+ padding<span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span>
+ color<span class="token operator">:</span> <span class="token string">'#fff'</span><span class="token punctuation">,</span>
+ shadowBlur<span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span>
+ shadowColor<span class="token operator">:</span> <span class="token string">'#336699'</span><span class="token punctuation">,</span>
+ shadowOffsetX<span class="token operator">:</span> <span class="token number">6</span><span class="token punctuation">,</span>
+ shadowOffsetY<span class="token operator">:</span> <span class="token number">6</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span><span class="token punctuation">,</span>
+ xAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
+ show<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
+ min<span class="token operator">:</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">,</span>
+ max<span class="token operator">:</span> <span class="token number">1</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ yAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
+ show<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
+ min<span class="token operator">:</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">,</span>
+ max<span class="token operator">:</span> <span class="token number">1</span>
+ <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" str [...]
+ series: [
+ {
+ type: 'scatter',
+ symbolSize: 160,
+ symbol: 'roundRect',
+ data: [[1, 1]],
+ label: {
+ normal: {
+ // Options: 'left', 'right', 'top', 'bottom', 'inside', 'insideTop', 'insideLeft', 'insideRight', 'insideBottom', 'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'
+ position: 'top',
+ distance: 10,
+
+ show: true,
+ formatter: ['Label Text'].join('\n'),
+ backgroundColor: '#eee',
+ borderColor: '#555',
+ borderWidth: 2,
+ borderRadius: 5,
+ padding: 10,
+ fontSize: 18,
+ shadowBlur: 3,
+ shadowColor: '#888',
+ shadowOffsetX: 0,
+ shadowOffsetY: 3,
+ textBorderColor: '#000',
+ textBorderWidth: 3,
+ color: '#fff'
+ }
+ }
+ }
+ ],
+ xAxis: {
+ max: 2
+ },
+ yAxis: {
+ max: 2
+ }
+};</textarea><pre data-testid="preview" class="prism-editor__editor">option <span class="token operator">=</span> <span class="token punctuation">{</span>
+ series<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'scatter'</span><span class="token punctuation">,</span>
+ symbolSize<span class="token operator">:</span> <span class="token number">160</span><span class="token punctuation">,</span>
+ symbol<span class="token operator">:</span> <span class="token string">'roundRect'</span><span class="token punctuation">,</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ label<span class="token operator">:</span> <span class="token punctuation">{</span>
+ normal<span class="token operator">:</span> <span class="token punctuation">{</span>
+ <span class="token comment">// Options: 'left', 'right', 'top', 'bottom', 'inside', 'insideTop', 'insideLeft', 'insideRight', 'insideBottom', 'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'</span>
+ position<span class="token operator">:</span> <span class="token string">'top'</span><span class="token punctuation">,</span>
+ distance<span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span>
+
+ show<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
+ formatter<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'Label Text'</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">'\n'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+ backgroundColor<span class="token operator">:</span> <span class="token string">'#eee'</span><span class="token punctuation">,</span>
+ borderColor<span class="token operator">:</span> <span class="token string">'#555'</span><span class="token punctuation">,</span>
+ borderWidth<span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span>
+ borderRadius<span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span>
+ padding<span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span>
+ fontSize<span class="token operator">:</span> <span class="token number">18</span><span class="token punctuation">,</span>
+ shadowBlur<span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span>
+ shadowColor<span class="token operator">:</span> <span class="token string">'#888'</span><span class="token punctuation">,</span>
+ shadowOffsetX<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
+ shadowOffsetY<span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span>
+ textBorderColor<span class="token operator">:</span> <span class="token string">'#000'</span><span class="token punctuation">,</span>
+ textBorderWidth<span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span>
+ color<span class="token operator">:</span> <span class="token string">'#fff'</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span><span class="token punctuation">,</span>
+ xAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
+ max<span class="token operator">:</span> <span class="token number">2</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ yAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
+ max<span class="token operator">:</span> <span class="token number">2</span>
+ <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" str [...]
+ show: true,
+ rotate: 90,
+ formatter: '{c} {name|{a}}',
+ fontSize: 16,
+ rich: {
+ name: {}
+ }
+};
+
+option = {
+ xAxis: [
+ {
+ type: 'category',
+ data: ['2012', '2013', '2014', '2015', '2016']
+ }
+ ],
+ yAxis: [
+ {
+ type: 'value'
+ }
+ ],
+ series: [
+ {
+ name: 'Forest',
+ type: 'bar',
+ barGap: 0,
+ label: labelOption,
+ emphasis: {
+ focus: 'series'
+ },
+ data: [320, 332, 301, 334, 390]
+ },
+ {
+ name: 'Steppe',
+ type: 'bar',
+ label: labelOption,
+ emphasis: {
+ focus: 'series'
+ },
+ data: [220, 182, 191, 234, 290]
+ }
+ ]
+};</textarea><pre data-testid="preview" class="prism-editor__editor"><span class="token keyword">const</span> labelOption <span class="token operator">=</span> <span class="token punctuation">{</span>
+ show<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
+ rotate<span class="token operator">:</span> <span class="token number">90</span><span class="token punctuation">,</span>
+ formatter<span class="token operator">:</span> <span class="token string">'{c} {name|{a}}'</span><span class="token punctuation">,</span>
+ fontSize<span class="token operator">:</span> <span class="token number">16</span><span class="token punctuation">,</span>
+ rich<span class="token operator">:</span> <span class="token punctuation">{</span>
+ name<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
+ <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span>
+
+option <span class="token operator">=</span> <span class="token punctuation">{</span>
+ xAxis<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'category'</span><span class="token punctuation">,</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'2012'</span><span class="token punctuation">,</span> <span class="token string">'2013'</span><span class="token punctuation">,</span> <span class="token string">'2014'</span><span class="token punctuation">,</span> <span class="token string">'2015'</span><span class="token punctuation">,</span> <span class="token string">'2016'</span><span class="token punctuation">]</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span><span class="token punctuation">,</span>
+ yAxis<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'value'</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span><span class="token punctuation">,</span>
+ series<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ name<span class="token operator">:</span> <span class="token string">'Forest'</span><span class="token punctuation">,</span>
+ type<span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span>
+ barGap<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
+ label<span class="token operator">:</span> labelOption<span class="token punctuation">,</span>
+ emphasis<span class="token operator">:</span> <span class="token punctuation">{</span>
+ focus<span class="token operator">:</span> <span class="token string">'series'</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">320</span><span class="token punctuation">,</span> <span class="token number">332</span><span class="token punctuation">,</span> <span class="token number">301</span><span class="token punctuation">,</span> <span class="token number">334</span><span class="token punctuation">,</span> <span class="token number">390</span><span class="token punctuation">]</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ name<span class="token operator">:</span> <span class="token string">'Steppe'</span><span class="token punctuation">,</span>
+ type<span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span>
+ label<span class="token operator">:</span> labelOption<span class="token punctuation">,</span>
+ emphasis<span class="token operator">:</span> <span class="token punctuation">{</span>
+ focus<span class="token operator">:</span> <span class="token string">'series'</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">220</span><span class="token punctuation">,</span> <span class="token number">182</span><span class="token punctuation">,</span> <span class="token number">191</span><span class="token punctuation">,</span> <span class="token number">234</span><span class="token punctuation">,</span> <span class="token number">290</span><span class="token punctuation">]</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" str [...]
+ series: [
+ {
+ type: 'scatter',
+ data: [
+ {
+ value: [0, 0],
+ label: {
+ normal: {
+ formatter: [
+ '{tc|Center Title}{titleBg|}',
+ ' Content text xxxxxxxx {sunny|} xxxxxxxx {cloudy|} ',
+ '{hr|}',
+ ' xxxxx {showers|} xxxxxxxx xxxxxxxxx '
+ ].join('\n'),
+ rich: {
+ titleBg: {
+ align: 'right'
+ }
+ }
+ }
+ }
+ },
+ {
+ value: [0, 1],
+ label: {
+ normal: {
+ formatter: [
+ '{titleBg|Left Title}',
+ ' Content text xxxxxxxx {sunny|} xxxxxxxx {cloudy|} ',
+ '{hr|}',
+ ' xxxxx {showers|} xxxxxxxx xxxxxxxxx '
+ ].join('\n')
+ }
+ }
+ },
+ {
+ value: [0, 2],
+ label: {
+ normal: {
+ formatter: [
+ '{titleBg|Right Title}',
+ ' Content text xxxxxxxx {sunny|} xxxxxxxx {cloudy|} ',
+ '{hr|}',
+ ' xxxxx {showers|} xxxxxxxx xxxxxxxxx '
+ ].join('\n'),
+ rich: {
+ titleBg: {
+ align: 'right'
+ }
+ }
+ }
+ }
+ }
+ ],
+ symbolSize: 1,
+ label: {
+ normal: {
+ show: true,
+ backgroundColor: '#ddd',
+ borderColor: '#555',
+ borderWidth: 1,
+ borderRadius: 5,
+ color: '#000',
+ fontSize: 14,
+ rich: {
+ titleBg: {
+ backgroundColor: '#000',
+ height: 30,
+ borderRadius: [5, 5, 0, 0],
+ padding: [0, 10, 0, 10],
+ width: '100%',
+ color: '#eee'
+ },
+ tc: {
+ align: 'center',
+ color: '#eee'
+ },
+ hr: {
+ borderColor: '#777',
+ width: '100%',
+ borderWidth: 0.5,
+ height: 0
+ },
+ sunny: {
+ height: 30,
+ align: 'left',
+ backgroundColor: {
+ image:
+ 'https://echarts.apache.org/examples/data/asset/img/weather/sunny_128.png'
+ }
+ },
+ cloudy: {
+ height: 30,
+ align: 'left',
+ backgroundColor: {
+ image:
+ 'https://echarts.apache.org/examples/data/asset/img/weather/cloudy_128.png'
+ }
+ },
+ showers: {
+ height: 30,
+ align: 'left',
+ backgroundColor: {
+ image:
+ 'https://echarts.apache.org/examples/data/asset/img/weather/showers_128.png'
+ }
+ }
+ }
+ }
+ }
+ }
+ ],
+ xAxis: {
+ show: false,
+ min: -1,
+ max: 1
+ },
+ yAxis: {
+ show: false,
+ min: 0,
+ max: 2,
+ inverse: true
+ }
+};</textarea><pre data-testid="preview" class="prism-editor__editor">option <span class="token operator">=</span> <span class="token punctuation">{</span>
+ series<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'scatter'</span><span class="token punctuation">,</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ value<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ label<span class="token operator">:</span> <span class="token punctuation">{</span>
+ normal<span class="token operator">:</span> <span class="token punctuation">{</span>
+ formatter<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token string">'{tc|Center Title}{titleBg|}'</span><span class="token punctuation">,</span>
+ <span class="token string">' Content text xxxxxxxx {sunny|} xxxxxxxx {cloudy|} '</span><span class="token punctuation">,</span>
+ <span class="token string">'{hr|}'</span><span class="token punctuation">,</span>
+ <span class="token string">' xxxxx {showers|} xxxxxxxx xxxxxxxxx '</span>
+ <span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">'\n'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+ rich<span class="token operator">:</span> <span class="token punctuation">{</span>
+ titleBg<span class="token operator">:</span> <span class="token punctuation">{</span>
+ align<span class="token operator">:</span> <span class="token string">'right'</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ value<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ label<span class="token operator">:</span> <span class="token punctuation">{</span>
+ normal<span class="token operator">:</span> <span class="token punctuation">{</span>
+ formatter<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token string">'{titleBg|Left Title}'</span><span class="token punctuation">,</span>
+ <span class="token string">' Content text xxxxxxxx {sunny|} xxxxxxxx {cloudy|} '</span><span class="token punctuation">,</span>
+ <span class="token string">'{hr|}'</span><span class="token punctuation">,</span>
+ <span class="token string">' xxxxx {showers|} xxxxxxxx xxxxxxxxx '</span>
+ <span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">'\n'</span><span class="token punctuation">)</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ value<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ label<span class="token operator">:</span> <span class="token punctuation">{</span>
+ normal<span class="token operator">:</span> <span class="token punctuation">{</span>
+ formatter<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token string">'{titleBg|Right Title}'</span><span class="token punctuation">,</span>
+ <span class="token string">' Content text xxxxxxxx {sunny|} xxxxxxxx {cloudy|} '</span><span class="token punctuation">,</span>
+ <span class="token string">'{hr|}'</span><span class="token punctuation">,</span>
+ <span class="token string">' xxxxx {showers|} xxxxxxxx xxxxxxxxx '</span>
+ <span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">'\n'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+ rich<span class="token operator">:</span> <span class="token punctuation">{</span>
+ titleBg<span class="token operator">:</span> <span class="token punctuation">{</span>
+ align<span class="token operator">:</span> <span class="token string">'right'</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span><span class="token punctuation">,</span>
+ symbolSize<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
+ label<span class="token operator">:</span> <span class="token punctuation">{</span>
+ normal<span class="token operator">:</span> <span class="token punctuation">{</span>
+ show<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
+ backgroundColor<span class="token operator">:</span> <span class="token string">'#ddd'</span><span class="token punctuation">,</span>
+ borderColor<span class="token operator">:</span> <span class="token string">'#555'</span><span class="token punctuation">,</span>
+ borderWidth<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
+ borderRadius<span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span>
+ color<span class="token operator">:</span> <span class="token string">'#000'</span><span class="token punctuation">,</span>
+ fontSize<span class="token operator">:</span> <span class="token number">14</span><span class="token punctuation">,</span>
+ rich<span class="token operator">:</span> <span class="token punctuation">{</span>
+ titleBg<span class="token operator">:</span> <span class="token punctuation">{</span>
+ backgroundColor<span class="token operator">:</span> <span class="token string">'#000'</span><span class="token punctuation">,</span>
+ height<span class="token operator">:</span> <span class="token number">30</span><span class="token punctuation">,</span>
+ borderRadius<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ padding<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ width<span class="token operator">:</span> <span class="token string">'100%'</span><span class="token punctuation">,</span>
+ color<span class="token operator">:</span> <span class="token string">'#eee'</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ tc<span class="token operator">:</span> <span class="token punctuation">{</span>
+ align<span class="token operator">:</span> <span class="token string">'center'</span><span class="token punctuation">,</span>
+ color<span class="token operator">:</span> <span class="token string">'#eee'</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ hr<span class="token operator">:</span> <span class="token punctuation">{</span>
+ borderColor<span class="token operator">:</span> <span class="token string">'#777'</span><span class="token punctuation">,</span>
+ width<span class="token operator">:</span> <span class="token string">'100%'</span><span class="token punctuation">,</span>
+ borderWidth<span class="token operator">:</span> <span class="token number">0.5</span><span class="token punctuation">,</span>
+ height<span class="token operator">:</span> <span class="token number">0</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ sunny<span class="token operator">:</span> <span class="token punctuation">{</span>
+ height<span class="token operator">:</span> <span class="token number">30</span><span class="token punctuation">,</span>
+ align<span class="token operator">:</span> <span class="token string">'left'</span><span class="token punctuation">,</span>
+ backgroundColor<span class="token operator">:</span> <span class="token punctuation">{</span>
+ image<span class="token operator">:</span>
+ <span class="token string">'https://echarts.apache.org/examples/data/asset/img/weather/sunny_128.png'</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ cloudy<span class="token operator">:</span> <span class="token punctuation">{</span>
+ height<span class="token operator">:</span> <span class="token number">30</span><span class="token punctuation">,</span>
+ align<span class="token operator">:</span> <span class="token string">'left'</span><span class="token punctuation">,</span>
+ backgroundColor<span class="token operator">:</span> <span class="token punctuation">{</span>
+ image<span class="token operator">:</span>
+ <span class="token string">'https://echarts.apache.org/examples/data/asset/img/weather/cloudy_128.png'</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ showers<span class="token operator">:</span> <span class="token punctuation">{</span>
+ height<span class="token operator">:</span> <span class="token number">30</span><span class="token punctuation">,</span>
+ align<span class="token operator">:</span> <span class="token string">'left'</span><span class="token punctuation">,</span>
+ backgroundColor<span class="token operator">:</span> <span class="token punctuation">{</span>
+ image<span class="token operator">:</span>
+ <span class="token string">'https://echarts.apache.org/examples/data/asset/img/weather/showers_128.png'</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span><span class="token punctuation">,</span>
+ xAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
+ show<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
+ min<span class="token operator">:</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">,</span>
+ max<span class="token operator">:</span> <span class="token number">1</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ yAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
+ show<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
+ min<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
+ max<span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span>
+ inverse<span class="token operator">:</span> <span class="token boolean">true</span>
+ <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" str [...]
+ Sunny<span class="token operator">:</span> <span class="token punctuation">{</span>
+ backgroundColor<span class="token operator">:</span> <span class="token punctuation">{</span>
+ image<span class="token operator">:</span> <span class="token string">'./data/asset/img/weather/sunny_128.png'</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token comment">// Can only height specified, but leave width auto obtained</span>
+ <span class="token comment">// from the image, where the aspect ratio kept.</span>
+ height<span class="token operator">:</span> <span class="token number">30</span>
+ <span class="token punctuation">}</span>
+<span class="token punctuation">}</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 [...]
+ hr<span class="token operator">:</span> <span class="token punctuation">{</span>
+ borderColor<span class="token operator">:</span> <span class="token string">'#777'</span><span class="token punctuation">,</span>
+ <span class="token comment">// width is set as '100%' to fullfill the text block.</span>
+ <span class="token comment">// Notice, the percentage is based on the content box, without</span>
+ <span class="token comment">// padding. Although it is a little different from CSS rule,</span>
+ <span class="token comment">// it is convinent in most cases.</span>
+ width<span class="token operator">:</span> <span class="token string">'100%'</span><span class="token punctuation">,</span>
+ borderWidth<span class="token operator">:</span> <span class="token number">0.5</span><span class="token punctuation">,</span>
+ height<span class="token operator">:</span> <span class="token number">0</span>
+ <span class="token punctuation">}</span>
+<span class="token punctuation">}</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 [...]
+formatter<span class="token operator">:</span> <span class="token string">'{titleBg|Left Title}'</span><span class="token punctuation">,</span>
+rich<span class="token operator">:</span> <span class="token punctuation">{</span>
+ titleBg<span class="token operator">:</span> <span class="token punctuation">{</span>
+ backgroundColor<span class="token operator">:</span> <span class="token string">'#000'</span><span class="token punctuation">,</span>
+ height<span class="token operator">:</span> <span class="token number">30</span><span class="token punctuation">,</span>
+ borderRadius<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ padding<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ width<span class="token operator">:</span> <span class="token string">'100%'</span><span class="token punctuation">,</span>
+ color<span class="token operator">:</span> <span class="token string">'#eee'</span>
+ <span class="token punctuation">}</span>
+<span class="token punctuation">}</span>
+
+<span class="token comment">// Title is in the center of the line.</span>
+<span class="token comment">// This implementation is a little tricky, but is works</span>
+<span class="token comment">// without more complicated layout mechanism involved.</span>
+formatter<span class="token operator">:</span> <span class="token string">'{tc|Center Title}{titleBg|}'</span><span class="token punctuation">,</span>
+rich<span class="token operator">:</span> <span class="token punctuation">{</span>
+ titleBg<span class="token operator">:</span> <span class="token punctuation">{</span>
+ align<span class="token operator">:</span> <span class="token string">'right'</span><span class="token punctuation">,</span>
+ backgroundColor<span class="token operator">:</span> <span class="token string">'#000'</span><span class="token punctuation">,</span>
+ height<span class="token operator">:</span> <span class="token number">30</span><span class="token punctuation">,</span>
+ borderRadius<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ padding<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ width<span class="token operator">:</span> <span class="token string">'100%'</span><span class="token punctuation">,</span>
+ color<span class="token operator">:</span> <span class="token string">'#eee'</span>
+ <span class="token punctuation">}</span>
+<span class="token punctuation">}</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 [...]
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
+ <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 type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+ <script>var _hmt=_hmt||[];!function(){var e=document.createElement("script");e.src="https://hm.baidu.com/hm.js?54b918eee37cb8a7045f0fd0f0b24395";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)}()</script>
+ </body>
+</html>
diff --git a/docs/en/index.html b/docs/en/index.html
new file mode 100644
index 0000000..1881b32
--- /dev/null
+++ b/docs/en/index.html
@@ -0,0 +1,17 @@
+<!doctype html>
+<html data-n-head-ssr>
+ <head>
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/echarts-handbook/_nu [...]
+ </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="ht [...]
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
+ <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 type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+ <script>var _hmt=_hmt||[];!function(){var e=document.createElement("script");e.src="https://hm.baidu.com/hm.js?54b918eee37cb8a7045f0fd0f0b24395";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)}()</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..050f0ff
--- /dev/null
+++ b/docs/en/meta/edit-guide/index.html
@@ -0,0 +1,157 @@
+<!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">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/ec [...]
+ </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="ht [...]
+<span class="token comment"><!-- prettier-ignore-end --></span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2 [...]
+</code></pre> <h2 id="link-to-other-articles" tabindex="-1">Link to Other Articles</h2> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code><span class="token url">[<span class="token content">Get Apache ECharts</span>](<span class="token url">${lang}/basics/download</span>)</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="cu [...]
+option = {
+ series: [{
+ type: 'bar',
+ data: [23, 24, 18, 25, 27, 28, 25]
+ }]
+};
+\```</code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012 [...]
+ series<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">23</span><span class="token punctuation">,</span> <span class="token number">24</span><span class="token punctuation">,</span> <span class="token number">18</span><span class="token punctuation">,</span> <span class="token number">25</span><span class="token punctuation">,</span> <span class="token number">27</span><span class="token punctuation">,</span> <span class="token [...]
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v [...]
+ series<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'bar'</span>
+ <span class="token comment">// ...</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v [...]
+option = {
+ xAxis: {
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+ },
+ yAxis: {},
+ series: [
+ {
+ type: 'bar',
+ data: [23, 24, 18, 25, 27, 28, 25]
+ }
+ ]
+};
+\```</code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012 [...]
+ xAxis: {
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+ },
+ yAxis: {},
+ series: [
+ {
+ type: 'bar',
+ data: [23, 24, 18, 25, 27, 28, 25]
+ }
+ ]
+};</textarea><pre data-testid="preview" class="prism-editor__editor">option <span class="token operator">=</span> <span class="token punctuation">{</span>
+ xAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'Mon'</span><span class="token punctuation">,</span> <span class="token string">'Tue'</span><span class="token punctuation">,</span> <span class="token string">'Wed'</span><span class="token punctuation">,</span> <span class="token string">'Thu'</span><span class="token punctuation">,</span> <span class="token string">'Fri'</span><span class="token punctuation">,</span> <span [...]
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ yAxis<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
+ series<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">23</span><span class="token punctuation">,</span> <span class="token number">24</span><span class="token punctuation">,</span> <span class="token number">18</span><span class="token punctuation">,</span> <span class="token number">25</span><span class="token punctuation">,</span> <span class="token number">27</span><span class="token punctuation">,</span> <span class="token [...]
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" str [...]
+
+<span class="token comment"><!-- prettier-ignore-end --></span>
+
+<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>md-live</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>js<span class="token punctuation">"</span></span> <span class="token attr-name">code</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span cl [...]
+
+<span class="token title important"><span class="token punctuation">####</span> Right to left</span>
+
+<span class="token comment"><!-- prettier-ignore-start --></span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 [...]
+<div class="md-live layout-rl"><div class="md-live-editor"><div class="md-live-editor-container"><div class="prism-editor-wrapper"><div class="prism-editor__container"><textarea spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" data-gramm="false" placeholder="" data-testid="textarea" class="prism-editor__textarea">option = {
+ ...
+};
+\```</textarea><pre data-testid="preview" class="prism-editor__editor">option <span class="token operator">=</span> <span class="token punctuation">{</span>
+ <span class="token operator">...</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span>
+\<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token template-punctuation string">`</span></span>`<br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 [...]
+ xAxis: {
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+ },
+ yAxis: {},
+ series: [
+ {
+ type: 'bar',
+ data: [23, 24, 18, 25, 27, 28, 25]
+ }
+ ]
+};</textarea><pre data-testid="preview" class="prism-editor__editor">option <span class="token operator">=</span> <span class="token punctuation">{</span>
+ xAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'Mon'</span><span class="token punctuation">,</span> <span class="token string">'Tue'</span><span class="token punctuation">,</span> <span class="token string">'Wed'</span><span class="token punctuation">,</span> <span class="token string">'Thu'</span><span class="token punctuation">,</span> <span class="token string">'Fri'</span><span class="token punctuation">,</span> <span [...]
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ yAxis<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
+ series<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">23</span><span class="token punctuation">,</span> <span class="token number">24</span><span class="token punctuation">,</span> <span class="token number">18</span><span class="token punctuation">,</span> <span class="token number">25</span><span class="token punctuation">,</span> <span class="token number">27</span><span class="token punctuation">,</span> <span class="token [...]
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" str [...]
+
+<span class="token comment"><!-- prettier-ignore-end --></span>
+
+<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>md-live</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>js<span class="token punctuation">"</span></span> <span class="token attr-name">code</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span cl [...]
+
+<span class="token title important"><span class="token punctuation">###</span> Highlighting Lines of Code and Adding Filenames</span>
+
+Use.
+
+<span class="token comment"><!-- prettier-ignore-start --></span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 [...]
+ series: [
+ {
+ type: 'bar',
+ data: [23, 24, 18, 25, 27, 28, 25]
+ }
+ ]
+};
+\```
+</code></pre> <p>Effects.</p> <pre><code class="language-js{1,3-5}[option.js]">option = {
+ series: [
+ {
+ type: 'bar',
+ data: [23, 24, 18, 25, 27, 28, 25]
+ }
+ ]
+};
+</code></pre> <h2 id="embedding-images" tabindex="-1">Embedding Images</h2> <p>Source images are stored under <code>static/images/</code>.</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code><span class="token url"><span class="token operator">!</span>[<span class="token content">image description</span>](<span class="token url">images/demo.png</span>)</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca [...]
+<iframe width="100%" height="300" src=""></iframe></p> <h2 id="add-link-to-option-item" tabindex="-1">Add Link to Option Item</h2> <p>Use:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>md-option</span> <span class="token attr-name">link</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><spa [...]
+<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" tabindex="-1">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" tabindex="-1">md-alert</h3> <p>Prompt components</p> <div class=" [...]
+This is an info alert.
+<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>md-alert</span><span class="token punctuation">></span></span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-lineca [...]
+This is an info alert.
+</p></blockquote> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>md-alert</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>success<span class="token punctuation">"</span></span><span class="token punctuation">></s [...]
+This is a success alert.
+<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>md-alert</span><span class="token punctuation">></span></span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-lineca [...]
+This is a success alert.
+</p></blockquote> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>md-alert</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>warning<span class="token punctuation">"</span></span><span class="token punctuation">></s [...]
+This is a warning alert.
+<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>md-alert</span><span class="token punctuation">></span></span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-lineca [...]
+This is a warning alert.
+</p></blockquote> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>md-alert</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>warning<span class="token punctuation">"</span></span><span class="token punctuation">></s [...]
+This is a danger alert.
+<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>md-alert</span><span class="token punctuation">></span></span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-lineca [...]
+This is a danger alert.
+</p></blockquote></article></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/meta/edit-guide.md" title="编辑本文" class="inline-block align-middle text-sm"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-8 w-8 inline-block align-middle"><path stroke-linecap="round" stroke-linejoin="round" stroke-w [...]
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
+ <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 type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+ <script>var _hmt=_hmt||[];!function(){var e=document.createElement("script");e.src="https://hm.baidu.com/hm.js?54b918eee37cb8a7045f0fd0f0b24395";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)}()</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/5-2-0/group-transition-2.gif b/docs/images/5-2-0/group-transition-2.gif
new file mode 100644
index 0000000..caf3dd7
Binary files /dev/null and b/docs/images/5-2-0/group-transition-2.gif differ
diff --git a/docs/images/5-2-0/group-transition.gif b/docs/images/5-2-0/group-transition.gif
new file mode 100644
index 0000000..8d13ee9
Binary files /dev/null and b/docs/images/5-2-0/group-transition.gif differ
diff --git a/docs/images/5-2-0/polar-bar-label.jpg b/docs/images/5-2-0/polar-bar-label.jpg
new file mode 100644
index 0000000..ee6853d
Binary files /dev/null and b/docs/images/5-2-0/polar-bar-label.jpg differ
diff --git a/docs/images/5-2-0/universal-transition-2.gif b/docs/images/5-2-0/universal-transition-2.gif
new file mode 100644
index 0000000..9b7db83
Binary files /dev/null and b/docs/images/5-2-0/universal-transition-2.gif differ
diff --git a/docs/images/5-2-0/universal-transition-3.gif b/docs/images/5-2-0/universal-transition-3.gif
new file mode 100644
index 0000000..8a7e212
Binary files /dev/null and b/docs/images/5-2-0/universal-transition-3.gif differ
diff --git a/docs/images/5-2-0/universal-transition.gif b/docs/images/5-2-0/universal-transition.gif
new file mode 100644
index 0000000..bbb46a3
Binary files /dev/null and b/docs/images/5-2-0/universal-transition.gif 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..7c0b8bd
--- /dev/null
+++ b/docs/index.html
@@ -0,0 +1,17 @@
+<!doctype html>
+<html data-n-head-ssr>
+ <head>
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/echarts-handbook/_nu [...]
+ </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="ht [...]
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
+ <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 type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+ <script>var _hmt=_hmt||[];!function(){var e=document.createElement("script");e.src="https://hm.baidu.com/hm.js?54b918eee37cb8a7045f0fd0f0b24395";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)}()</script>
+ </body>
+</html>
diff --git a/docs/zh/basics/download/index.html b/docs/zh/basics/download/index.html
new file mode 100644
index 0000000..6096cbf
--- /dev/null
+++ b/docs/zh/basics/download/index.html
@@ -0,0 +1,17 @@
+<!doctype html>
+<html data-n-head-ssr>
+ <head>
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/ec [...]
+ </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="ht [...]
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
+ <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 type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+ <script>var _hmt=_hmt||[];!function(){var e=document.createElement("script");e.src="https://hm.baidu.com/hm.js?54b918eee37cb8a7045f0fd0f0b24395";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)}()</script>
+ </body>
+</html>
diff --git a/docs/zh/basics/help/index.html b/docs/zh/basics/help/index.html
new file mode 100644
index 0000000..3d2edae
--- /dev/null
+++ b/docs/zh/basics/help/index.html
@@ -0,0 +1,17 @@
+<!doctype html>
+<html data-n-head-ssr>
+ <head>
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/ec [...]
+ </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="ht [...]
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
+ <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 type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+ <script>var _hmt=_hmt||[];!function(){var e=document.createElement("script");e.src="https://hm.baidu.com/hm.js?54b918eee37cb8a7045f0fd0f0b24395";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)}()</script>
+ </body>
+</html>
diff --git a/docs/zh/basics/import/index.html b/docs/zh/basics/import/index.html
new file mode 100644
index 0000000..ad77a41
--- /dev/null
+++ b/docs/zh/basics/import/index.html
@@ -0,0 +1,120 @@
+<!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">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/ec [...]
+ </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="ht [...]
+
+<span class="token comment">// 基于准备好的dom，初始化echarts实例</span>
+<span class="token keyword">var</span> myChart <span class="token operator">=</span> echarts<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'main'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token pun [...]
+<span class="token comment">// 绘制图表</span>
+myChart<span class="token punctuation">.</span><span class="token function">setOption</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+ title<span class="token operator">:</span> <span class="token punctuation">{</span>
+ text<span class="token operator">:</span> <span class="token string">'ECharts 入门示例'</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ tooltip<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
+ xAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'衬衫'</span><span class="token punctuation">,</span> <span class="token string">'羊毛衫'</span><span class="token punctuation">,</span> <span class="token string">'雪纺衫'</span><span class="token punctuation">,</span> <span class="token string">'裤子'</span><span class="token punctuation">,</span> <span class="token string">'高跟鞋'</span><span class="token punctuation">,</span> <span cl [...]
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ yAxis<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
+ series<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ name<span class="token operator">:</span> <span class="token string">'销量'</span><span class="token punctuation">,</span>
+ type<span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">,</span> <span class="token number">36</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token n [...]
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" [...]
+<span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> echarts <span class="token keyword">from</span> <span class="token string">'echarts/core'</span><span class="token punctuation">;</span>
+<span class="token comment">// 引入柱状图图表，图表后缀都为 Chart</span>
+<span class="token keyword">import</span> <span class="token punctuation">{</span> BarChart <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'echarts/charts'</span><span class="token punctuation">;</span>
+<span class="token comment">// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component</span>
+<span class="token keyword">import</span> <span class="token punctuation">{</span>
+ TitleComponent<span class="token punctuation">,</span>
+ TooltipComponent<span class="token punctuation">,</span>
+ GridComponent<span class="token punctuation">,</span>
+ DatasetComponent<span class="token punctuation">,</span>
+ DatasetComponentOption<span class="token punctuation">,</span>
+ TransformComponent
+<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'echarts/components'</span><span class="token punctuation">;</span>
+<span class="token comment">// 标签自动布局，全局过渡动画等特性</span>
+<span class="token keyword">import</span> <span class="token punctuation">{</span> LabelLayout<span class="token punctuation">,</span> UniversalTransition <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'echarts/features'</span><span class="token punctuation">;</span>
+<span class="token comment">// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步</span>
+<span class="token keyword">import</span> <span class="token punctuation">{</span> CanvasRenderer <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'echarts/renderers'</span><span class="token punctuation">;</span>
+
+<span class="token comment">// 注册必须的组件</span>
+echarts<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
+ TitleComponent<span class="token punctuation">,</span>
+ TooltipComponent<span class="token punctuation">,</span>
+ GridComponent<span class="token punctuation">,</span>
+ DatasetComponent<span class="token punctuation">,</span>
+ TransformComponent<span class="token punctuation">,</span>
+ BarChart<span class="token punctuation">,</span>
+ LabelLayout<span class="token punctuation">,</span>
+ UniversalTransition<span class="token punctuation">,</span>
+ CanvasRenderer
+<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+
+<span class="token comment">// 接下来的使用就跟之前一样，初始化图表，设置配置项</span>
+<span class="token keyword">var</span> myChart <span class="token operator">=</span> echarts<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'main'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token pun [...]
+myChart<span class="token punctuation">.</span><span class="token function">setOption</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+ <span class="token comment">// ...</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" [...]
+<span class="token keyword">import</span> <span class="token punctuation">{</span>
+ BarChart<span class="token punctuation">,</span>
+ <span class="token comment">// 系列类型的定义后缀都为 SeriesOption</span>
+ BarSeriesOption<span class="token punctuation">,</span>
+ LineChart<span class="token punctuation">,</span>
+ LineSeriesOption
+<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'echarts/charts'</span><span class="token punctuation">;</span>
+<span class="token keyword">import</span> <span class="token punctuation">{</span>
+ TitleComponent<span class="token punctuation">,</span>
+ <span class="token comment">// 组件类型的定义后缀都为 ComponentOption</span>
+ TitleComponentOption<span class="token punctuation">,</span>
+ GridComponent<span class="token punctuation">,</span>
+ GridComponentOption<span class="token punctuation">,</span>
+ <span class="token comment">// 数据集组件</span>
+ DatasetComponent<span class="token punctuation">,</span>
+ DatasetComponentOption<span class="token punctuation">,</span>
+ <span class="token comment">// 内置数据转换器组件 (filter, sort)</span>
+ TransformComponent
+<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'echarts/components'</span><span class="token punctuation">;</span>
+<span class="token keyword">import</span> <span class="token punctuation">{</span> LabelLayout<span class="token punctuation">,</span> UniversalTransition <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'echarts/features'</span><span class="token punctuation">;</span>
+<span class="token keyword">import</span> <span class="token punctuation">{</span> CanvasRenderer <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'echarts/renderers'</span><span class="token punctuation">;</span>
+
+<span class="token comment">// 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型</span>
+<span class="token keyword">type</span> <span class="token class-name">ECOption</span> <span class="token operator">=</span> echarts<span class="token punctuation">.</span>ComposeOption<span class="token operator"><</span>
+ <span class="token operator">|</span> BarSeriesOption
+ <span class="token operator">|</span> LineSeriesOption
+ <span class="token operator">|</span> TitleComponentOption
+ <span class="token operator">|</span> GridComponentOption
+ <span class="token operator">|</span> DatasetComponentOption
+<span class="token operator">></span><span class="token punctuation">;</span>
+
+<span class="token comment">// 注册必须的组件</span>
+echarts<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
+ TitleComponent<span class="token punctuation">,</span>
+ TooltipComponent<span class="token punctuation">,</span>
+ GridComponent<span class="token punctuation">,</span>
+ DatasetComponent<span class="token punctuation">,</span>
+ TransformComponent<span class="token punctuation">,</span>
+ BarChart<span class="token punctuation">,</span>
+ LabelLayout<span class="token punctuation">,</span>
+ UniversalTransition<span class="token punctuation">,</span>
+ CanvasRenderer
+<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+
+<span class="token keyword">const</span> option<span class="token operator">:</span> ECOption <span class="token operator">=</span> <span class="token punctuation">{</span>
+ <span class="token comment">// ...</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v [...]
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
+ <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 type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+ <script>var _hmt=_hmt||[];!function(){var e=document.createElement("script");e.src="https://hm.baidu.com/hm.js?54b918eee37cb8a7045f0fd0f0b24395";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)}()</script>
+ </body>
+</html>
diff --git a/docs/zh/basics/inspiration/index.html b/docs/zh/basics/inspiration/index.html
new file mode 100644
index 0000000..c3871cd
--- /dev/null
+++ b/docs/zh/basics/inspiration/index.html
@@ -0,0 +1,17 @@
+<!doctype html>
+<html data-n-head-ssr>
+ <head>
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/ec [...]
+ </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="ht [...]
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
+ <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 type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+ <script>var _hmt=_hmt||[];!function(){var e=document.createElement("script");e.src="https://hm.baidu.com/hm.js?54b918eee37cb8a7045f0fd0f0b24395";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)}()</script>
+ </body>
+</html>
diff --git a/docs/zh/basics/release-note/5-2-0/index.html b/docs/zh/basics/release-note/5-2-0/index.html
new file mode 100644
index 0000000..6fed3ea
--- /dev/null
+++ b/docs/zh/basics/release-note/5-2-0/index.html
@@ -0,0 +1,595 @@
+<!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">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/ec [...]
+ </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="ht [...]
+ return [
+ {
+ value: Math.random(),
+ name: 'A'
+ },
+ {
+ value: Math.random(),
+ name: 'B'
+ },
+ {
+ value: Math.random(),
+ name: 'C'
+ }
+ ];
+}
+option = {
+ series: [
+ {
+ type: 'pie',
+ radius: [0, '50%'],
+ data: makeRandomData()
+ }
+ ]
+};
+
+setInterval(() => {
+ myChart.setOption({
+ series: {
+ data: makeRandomData()
+ }
+ });
+}, 2000);</textarea><pre data-testid="preview" class="prism-editor__editor"><span class="token keyword">function</span> <span class="token function">makeRandomData</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+ <span class="token keyword">return</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ value<span class="token operator">:</span> Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+ name<span class="token operator">:</span> <span class="token string">'A'</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ value<span class="token operator">:</span> Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+ name<span class="token operator">:</span> <span class="token string">'B'</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ value<span class="token operator">:</span> Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+ name<span class="token operator">:</span> <span class="token string">'C'</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span><span class="token punctuation">;</span>
+<span class="token punctuation">}</span>
+option <span class="token operator">=</span> <span class="token punctuation">{</span>
+ series<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'pie'</span><span class="token punctuation">,</span>
+ radius<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token string">'50%'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ data<span class="token operator">:</span> <span class="token function">makeRandomData</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span>
+
+<span class="token function">setInterval</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
+ myChart<span class="token punctuation">.</span><span class="token function">setOption</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+ series<span class="token operator">:</span> <span class="token punctuation">{</span>
+ data<span class="token operator">:</span> <span class="token function">makeRandomData</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">2000</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 [...]
+ dimensions: ['name', 'score'],
+ source: [
+ ['Hannah Krause', 314],
+ ['Zhao Qian', 351],
+ ['Jasmin Krause ', 287],
+ ['Li Lei', 219],
+ ['Karle Neumann', 253],
+ ['Mia Neumann', 165],
+ ['Böhm Fuchs', 318],
+ ['Han Meimei', 366]
+ ]
+};
+const pieOption = {
+ dataset: [dataset],
+ series: [
+ {
+ type: 'pie',
+ // 通过 id 关联需要过渡动画的系列
+ id: 'Score',
+ radius: [0, '50%'],
+ universalTransition: true,
+ animationDurationUpdate: 1000
+ }
+ ]
+};
+const barOption = {
+ dataset: [dataset],
+ xAxis: {
+ type: 'category'
+ },
+ yAxis: {},
+ series: [
+ {
+ type: 'bar',
+ // 通过 id 关联需要过渡动画的系列
+ id: 'Score',
+ // 每个数据都是用不同的颜色
+ colorBy: 'data',
+ encode: { x: 'name', y: 'score' },
+ universalTransition: true,
+ animationDurationUpdate: 1000
+ }
+ ]
+};
+
+option = barOption;
+
+setInterval(() => {
+ option = option === pieOption ? barOption : pieOption;
+ // 使用 notMerge 的形式可以移除坐标轴
+ myChart.setOption(option, true);
+}, 2000);</textarea><pre data-testid="preview" class="prism-editor__editor"><span class="token keyword">const</span> dataset <span class="token operator">=</span> <span class="token punctuation">{</span>
+ dimensions<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'name'</span><span class="token punctuation">,</span> <span class="token string">'score'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ source<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">[</span><span class="token string">'Hannah Krause'</span><span class="token punctuation">,</span> <span class="token number">314</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Zhao Qian'</span><span class="token punctuation">,</span> <span class="token number">351</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Jasmin Krause '</span><span class="token punctuation">,</span> <span class="token number">287</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Li Lei'</span><span class="token punctuation">,</span> <span class="token number">219</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Karle Neumann'</span><span class="token punctuation">,</span> <span class="token number">253</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Mia Neumann'</span><span class="token punctuation">,</span> <span class="token number">165</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Böhm Fuchs'</span><span class="token punctuation">,</span> <span class="token number">318</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Han Meimei'</span><span class="token punctuation">,</span> <span class="token number">366</span><span class="token punctuation">]</span>
+ <span class="token punctuation">]</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span>
+<span class="token keyword">const</span> pieOption <span class="token operator">=</span> <span class="token punctuation">{</span>
+ dataset<span class="token operator">:</span> <span class="token punctuation">[</span>dataset<span class="token punctuation">]</span><span class="token punctuation">,</span>
+ series<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'pie'</span><span class="token punctuation">,</span>
+ <span class="token comment">// 通过 id 关联需要过渡动画的系列</span>
+ id<span class="token operator">:</span> <span class="token string">'Score'</span><span class="token punctuation">,</span>
+ radius<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token string">'50%'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ universalTransition<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
+ animationDurationUpdate<span class="token operator">:</span> <span class="token number">1000</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span>
+<span class="token keyword">const</span> barOption <span class="token operator">=</span> <span class="token punctuation">{</span>
+ dataset<span class="token operator">:</span> <span class="token punctuation">[</span>dataset<span class="token punctuation">]</span><span class="token punctuation">,</span>
+ xAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'category'</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ yAxis<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
+ series<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span>
+ <span class="token comment">// 通过 id 关联需要过渡动画的系列</span>
+ id<span class="token operator">:</span> <span class="token string">'Score'</span><span class="token punctuation">,</span>
+ <span class="token comment">// 每个数据都是用不同的颜色</span>
+ colorBy<span class="token operator">:</span> <span class="token string">'data'</span><span class="token punctuation">,</span>
+ encode<span class="token operator">:</span> <span class="token punctuation">{</span> x<span class="token operator">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span> y<span class="token operator">:</span> <span class="token string">'score'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ universalTransition<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
+ animationDurationUpdate<span class="token operator">:</span> <span class="token number">1000</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span>
+
+option <span class="token operator">=</span> barOption<span class="token punctuation">;</span>
+
+<span class="token function">setInterval</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
+ option <span class="token operator">=</span> option <span class="token operator">===</span> pieOption <span class="token operator">?</span> barOption <span class="token operator">:</span> pieOption<span class="token punctuation">;</span>
+ <span class="token comment">// 使用 notMerge 的形式可以移除坐标轴</span>
+ myChart<span class="token punctuation">.</span><span class="token function">setOption</span><span class="token punctuation">(</span>option<span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">2000</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 [...]
+echarts.use([UniversalTransition]);
+</code></pre></blockquote> <h3 id="%E6%95%B0%E6%8D%AE%E7%9A%84%E5%88%86%E8%A3%82%E5%92%8C%E5%90%88%E5%B9%B6%E5%8A%A8%E7%94%BB" tabindex="-1">数据的分裂和合并动画</h3> <p>除了常见的数据值的更新，有时候我们还会碰到数据的聚合、下钻等交互后的更新，这个时候我们就不能直接应用一对一的动画过渡，而需要使用更多像分裂、合并这样的动画效果，来通过正确的图形动画表达出数据的变换。</p> <p>为了能够表达数据之间可能存在的多对多联系，在 5.2.0 中我们新引入了一个数据组<code>groupId</code>的概念，我们可以通过 <a href="https://echarts.apache.org/option.html#series-bar.dataGroupId">series.dataGroupId</a> 设置整个系列所属的组，或者更细粒度的通过 <a href="https://echarts.apache.org/o [...]
+ xAxis: {
+ data: ['Animals', 'Fruits', 'Cars']
+ },
+ yAxis: {},
+ dataGroupId: '',
+ animationDurationUpdate: 500,
+ series: {
+ type: 'bar',
+ id: 'sales',
+ data: [
+ {
+ value: 5,
+ groupId: 'animals'
+ },
+ {
+ value: 2,
+ groupId: 'fruits'
+ },
+ {
+ value: 4,
+ groupId: 'cars'
+ }
+ ],
+ universalTransition: {
+ enabled: true,
+ divideShape: 'clone'
+ }
+ }
+};
+
+const drilldownData = [
+ {
+ dataGroupId: 'animals',
+ data: [
+ ['Cats', 4],
+ ['Dogs', 2],
+ ['Cows', 1],
+ ['Sheep', 2],
+ ['Pigs', 1]
+ ]
+ },
+ {
+ dataGroupId: 'fruits',
+ data: [
+ ['Apples', 4],
+ ['Oranges', 2]
+ ]
+ },
+ {
+ dataGroupId: 'cars',
+ data: [
+ ['Toyota', 4],
+ ['Opel', 2],
+ ['Volkswagen', 2]
+ ]
+ }
+];
+
+myChart.on('click', event => {
+ if (event.data) {
+ const subData = drilldownData.find(data => {
+ return data.dataGroupId === event.data.groupId;
+ });
+ if (!subData) {
+ return;
+ }
+ myChart.setOption({
+ xAxis: {
+ data: subData.data.map(item => {
+ return item[0];
+ })
+ },
+ series: {
+ type: 'bar',
+ id: 'sales',
+ dataGroupId: subData.dataGroupId,
+ data: subData.data.map(item => {
+ return item[1];
+ }),
+ universalTransition: {
+ enabled: true,
+ divideShape: 'clone'
+ }
+ },
+ graphic: [
+ {
+ type: 'text',
+ left: 50,
+ top: 20,
+ style: {
+ text: 'Back',
+ fontSize: 18
+ },
+ onclick: function() {
+ myChart.setOption(option, true);
+ }
+ }
+ ]
+ });
+ }
+});</textarea><pre data-testid="preview" class="prism-editor__editor">option <span class="token operator">=</span> <span class="token punctuation">{</span>
+ xAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'Animals'</span><span class="token punctuation">,</span> <span class="token string">'Fruits'</span><span class="token punctuation">,</span> <span class="token string">'Cars'</span><span class="token punctuation">]</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ yAxis<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
+ dataGroupId<span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
+ animationDurationUpdate<span class="token operator">:</span> <span class="token number">500</span><span class="token punctuation">,</span>
+ series<span class="token operator">:</span> <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span>
+ id<span class="token operator">:</span> <span class="token string">'sales'</span><span class="token punctuation">,</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ value<span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span>
+ groupId<span class="token operator">:</span> <span class="token string">'animals'</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ value<span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span>
+ groupId<span class="token operator">:</span> <span class="token string">'fruits'</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ value<span class="token operator">:</span> <span class="token number">4</span><span class="token punctuation">,</span>
+ groupId<span class="token operator">:</span> <span class="token string">'cars'</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span><span class="token punctuation">,</span>
+ universalTransition<span class="token operator">:</span> <span class="token punctuation">{</span>
+ enabled<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
+ divideShape<span class="token operator">:</span> <span class="token string">'clone'</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span>
+
+<span class="token keyword">const</span> drilldownData <span class="token operator">=</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ dataGroupId<span class="token operator">:</span> <span class="token string">'animals'</span><span class="token punctuation">,</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">[</span><span class="token string">'Cats'</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Dogs'</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Cows'</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Sheep'</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Pigs'</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">]</span>
+ <span class="token punctuation">]</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ dataGroupId<span class="token operator">:</span> <span class="token string">'fruits'</span><span class="token punctuation">,</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">[</span><span class="token string">'Apples'</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Oranges'</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">]</span>
+ <span class="token punctuation">]</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ dataGroupId<span class="token operator">:</span> <span class="token string">'cars'</span><span class="token punctuation">,</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">[</span><span class="token string">'Toyota'</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Opel'</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Volkswagen'</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">]</span>
+ <span class="token punctuation">]</span>
+ <span class="token punctuation">}</span>
+<span class="token punctuation">]</span><span class="token punctuation">;</span>
+
+myChart<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token parameter">event</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
+ <span class="token keyword">if</span> <span class="token punctuation">(</span>event<span class="token punctuation">.</span>data<span class="token punctuation">)</span> <span class="token punctuation">{</span>
+ <span class="token keyword">const</span> subData <span class="token operator">=</span> drilldownData<span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token parameter">data</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
+ <span class="token keyword">return</span> data<span class="token punctuation">.</span>dataGroupId <span class="token operator">===</span> event<span class="token punctuation">.</span>data<span class="token punctuation">.</span>groupId<span class="token punctuation">;</span>
+ <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+ <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>subData<span class="token punctuation">)</span> <span class="token punctuation">{</span>
+ <span class="token keyword">return</span><span class="token punctuation">;</span>
+ <span class="token punctuation">}</span>
+ myChart<span class="token punctuation">.</span><span class="token function">setOption</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+ xAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
+ data<span class="token operator">:</span> subData<span class="token punctuation">.</span>data<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
+ <span class="token keyword">return</span> item<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
+ <span class="token punctuation">}</span><span class="token punctuation">)</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ series<span class="token operator">:</span> <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span>
+ id<span class="token operator">:</span> <span class="token string">'sales'</span><span class="token punctuation">,</span>
+ dataGroupId<span class="token operator">:</span> subData<span class="token punctuation">.</span>dataGroupId<span class="token punctuation">,</span>
+ data<span class="token operator">:</span> subData<span class="token punctuation">.</span>data<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
+ <span class="token keyword">return</span> item<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
+ <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+ universalTransition<span class="token operator">:</span> <span class="token punctuation">{</span>
+ enabled<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
+ divideShape<span class="token operator">:</span> <span class="token string">'clone'</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ graphic<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'text'</span><span class="token punctuation">,</span>
+ left<span class="token operator">:</span> <span class="token number">50</span><span class="token punctuation">,</span>
+ top<span class="token operator">:</span> <span class="token number">20</span><span class="token punctuation">,</span>
+ style<span class="token operator">:</span> <span class="token punctuation">{</span>
+ text<span class="token operator">:</span> <span class="token string">'Back'</span><span class="token punctuation">,</span>
+ fontSize<span class="token operator">:</span> <span class="token number">18</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token function-variable function">onclick</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+ myChart<span class="token punctuation">.</span><span class="token function">setOption</span><span class="token punctuation">(</span>option<span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span>
+ <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+ <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-lin [...]
+ xAxis: {
+ type: 'category',
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+ },
+ yAxis: {
+ type: 'value'
+ },
+ series: [
+ {
+ data: [120, 200, 150, 80, 70, 110, 130],
+ type: 'bar',
+ colorBy: 'data'
+ }
+ ]
+};</textarea><pre data-testid="preview" class="prism-editor__editor">option <span class="token operator">=</span> <span class="token punctuation">{</span>
+ xAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'category'</span><span class="token punctuation">,</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'Mon'</span><span class="token punctuation">,</span> <span class="token string">'Tue'</span><span class="token punctuation">,</span> <span class="token string">'Wed'</span><span class="token punctuation">,</span> <span class="token string">'Thu'</span><span class="token punctuation">,</span> <span class="token string">'Fri'</span><span class="token punctuation">,</span> <span [...]
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ yAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'value'</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ series<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">120</span><span class="token punctuation">,</span> <span class="token number">200</span><span class="token punctuation">,</span> <span class="token number">150</span><span class="token punctuation">,</span> <span class="token number">80</span><span class="token punctuation">,</span> <span class="token number">70</span><span class="token punctuation">,</span> <span class="tok [...]
+ type<span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span>
+ colorBy<span class="token operator">:</span> <span class="token string">'data'</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" str [...]
+ series: {
+ type: 'pie',
+ colorBy: 'series',
+ radius: [0, '50%'],
+ itemStyle: {
+ borderColor: '#fff',
+ borderWidth: 1
+ },
+ data: [
+ {
+ value: 335,
+ name: 'Direct Visit'
+ },
+ {
+ value: 234,
+ name: 'Union Ad'
+ },
+ {
+ value: 1548,
+ name: 'Search Engine'
+ }
+ ]
+ }
+};</textarea><pre data-testid="preview" class="prism-editor__editor">option <span class="token operator">=</span> <span class="token punctuation">{</span>
+ series<span class="token operator">:</span> <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'pie'</span><span class="token punctuation">,</span>
+ colorBy<span class="token operator">:</span> <span class="token string">'series'</span><span class="token punctuation">,</span>
+ radius<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token string">'50%'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ itemStyle<span class="token operator">:</span> <span class="token punctuation">{</span>
+ borderColor<span class="token operator">:</span> <span class="token string">'#fff'</span><span class="token punctuation">,</span>
+ borderWidth<span class="token operator">:</span> <span class="token number">1</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ value<span class="token operator">:</span> <span class="token number">335</span><span class="token punctuation">,</span>
+ name<span class="token operator">:</span> <span class="token string">'Direct Visit'</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ value<span class="token operator">:</span> <span class="token number">234</span><span class="token punctuation">,</span>
+ name<span class="token operator">:</span> <span class="token string">'Union Ad'</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ value<span class="token operator">:</span> <span class="token number">1548</span><span class="token punctuation">,</span>
+ name<span class="token operator">:</span> <span class="token string">'Search Engine'</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span>
+ <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" str [...]
+ angleAxis: {
+ show: false,
+ max: 10
+ },
+ radiusAxis: {
+ show: false,
+ type: 'category',
+ data: ['AAA', 'BBB', 'CCC', 'DDD']
+ },
+ polar: {},
+ series: [
+ {
+ type: 'bar',
+ data: [3, 4, 5, 6],
+ colorBy: 'data',
+ roundCap: true,
+ label: {
+ show: true,
+ // 试试改成 'insideStart'
+ position: 'start',
+ formatter: '{b}'
+ },
+ coordinateSystem: 'polar'
+ }
+ ]
+};</textarea><pre data-testid="preview" class="prism-editor__editor">option <span class="token operator">=</span> <span class="token punctuation">{</span>
+ angleAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
+ show<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
+ max<span class="token operator">:</span> <span class="token number">10</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ radiusAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
+ show<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
+ type<span class="token operator">:</span> <span class="token string">'category'</span><span class="token punctuation">,</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'AAA'</span><span class="token punctuation">,</span> <span class="token string">'BBB'</span><span class="token punctuation">,</span> <span class="token string">'CCC'</span><span class="token punctuation">,</span> <span class="token string">'DDD'</span><span class="token punctuation">]</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ polar<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
+ series<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">6</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ colorBy<span class="token operator">:</span> <span class="token string">'data'</span><span class="token punctuation">,</span>
+ roundCap<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
+ label<span class="token operator">:</span> <span class="token punctuation">{</span>
+ show<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
+ <span class="token comment">// 试试改成 'insideStart'</span>
+ position<span class="token operator">:</span> <span class="token string">'start'</span><span class="token punctuation">,</span>
+ formatter<span class="token operator">:</span> <span class="token string">'{b}'</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ coordinateSystem<span class="token operator">:</span> <span class="token string">'polar'</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" str [...]
+ series: [
+ {
+ type: 'pie',
+ data: [],
+ // showEmptyCircle: false,
+ emptyCircleStyle: {
+ // 将样式改为空心圆
+ color: 'transparent',
+ borderColor: '#ddd',
+ borderWidth: 1
+ }
+ }
+ ]
+};</textarea><pre data-testid="preview" class="prism-editor__editor">option <span class="token operator">=</span> <span class="token punctuation">{</span>
+ series<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'pie'</span><span class="token punctuation">,</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token comment">// showEmptyCircle: false,</span>
+ emptyCircleStyle<span class="token operator">:</span> <span class="token punctuation">{</span>
+ <span class="token comment">// 将样式改为空心圆</span>
+ color<span class="token operator">:</span> <span class="token string">'transparent'</span><span class="token punctuation">,</span>
+ borderColor<span class="token operator">:</span> <span class="token string">'#ddd'</span><span class="token punctuation">,</span>
+ borderWidth<span class="token operator">:</span> <span class="token number">1</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" str [...]
+ <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">index</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>i<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+<span class="token keyword">const</span> option <span class="token operator">=</span> <span class="token punctuation">{</span>
+ xAxis<span class="token operator">:</span> <span class="token punctuation">{</span> type<span class="token operator">:</span> <span class="token string">'category'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ yAxis<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
+ dataset<span class="token operator">:</span> <span class="token punctuation">{</span>
+ <span class="token comment">// dimension: ['date', ...indices],</span>
+ source<span class="token operator">:</span> Array<span class="token punctuation">.</span><span class="token function">from</span><span class="token punctuation">(</span><span class="token function">Array</span><span class="token punctuation">(</span><span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">_<span class="token punctuation">,</span> i</span>< [...]
+ <span class="token keyword">return</span> <span class="token punctuation">{</span>
+ date<span class="token operator">:</span> i<span class="token punctuation">,</span>
+ <span class="token operator">...</span>indices<span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">item<span class="token punctuation">,</span> next</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
+ item<span class="token punctuation">[</span>next<span class="token punctuation">]</span> <span class="token operator">=</span> Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token number">100</span><span class="token punctuation">;</span>
+ <span class="token keyword">return</span> item<span class="token punctuation">;</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span>
+ <span class="token punctuation">}</span><span class="token punctuation">;</span>
+ <span class="token punctuation">}</span><span class="token punctuation">)</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ series<span class="token operator">:</span> indices<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">index</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
+ <span class="token keyword">return</span> <span class="token punctuation">{</span> type<span class="token operator">:</span> <span class="token string">'line'</span><span class="token punctuation">,</span> name<span class="token operator">:</span> index <span class="token punctuation">}</span><span class="token punctuation">;</span>
+ <span class="token punctuation">}</span><span class="token punctuation">)</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v [...]
+ type<span class="token operator">:</span> <span class="token string">'custom'</span><span class="token punctuation">,</span>
+ <span class="token function">renderItem</span><span class="token punctuation">(</span>params<span class="token punctuation">)</span> <span class="token punctuation">{</span>
+ <span class="token keyword">return</span> <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'group'</span><span class="token punctuation">,</span>
+ <span class="token comment">// group 类型使用 children 存储其它类型的子元素</span>
+ children<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'circle'</span><span class="token punctuation">,</span>
+ <span class="token comment">// circle 拥有下面这些可以配置的 shape 属性</span>
+ shape<span class="token operator">:</span> <span class="token punctuation">{</span> r<span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span> cx<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> cy<span class="token operator">:</span> <span class="token number">0</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token comment">// 可以配置的样式</span>
+ style<span class="token operator">:</span> <span class="token punctuation">{</span> fill<span class="token operator">:</span> <span class="token string">'red'</span> <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'rect'</span><span class="token punctuation">,</span>
+ <span class="token comment">// rect 拥有下面这些可以配置的 shape 属性</span>
+ shape<span class="token operator">:</span> <span class="token punctuation">{</span> x<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> y<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> width<span class="token operator">:</span> <span class="token number">100</span><span class="token punctuation">,</span> height<span class="token operator">:</span> <sp [...]
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'path'</span><span class="token punctuation">,</span>
+ <span class="token comment">// 自定义路径图形</span>
+ shape<span class="token operator">:</span> <span class="token punctuation">{</span> d<span class="token operator">:</span> <span class="token string">'...'</span> <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span>
+ <span class="token punctuation">}</span><span class="token punctuation">;</span>
+ <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v [...]
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
+ <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 type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+ <script>var _hmt=_hmt||[];!function(){var e=document.createElement("script");e.src="https://hm.baidu.com/hm.js?54b918eee37cb8a7045f0fd0f0b24395";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)}()</script>
+ </body>
+</html>
diff --git a/docs/zh/basics/release-note/v5-feature/index.html b/docs/zh/basics/release-note/v5-feature/index.html
new file mode 100644
index 0000000..166eb21
--- /dev/null
+++ b/docs/zh/basics/release-note/v5-feature/index.html
@@ -0,0 +1,21 @@
+<!doctype html>
+<html data-n-head-ssr>
+ <head>
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/ec [...]
+ </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="ht [...]
+echarts<span class="token punctuation">.</span><span class="token function">registerLocale</span><span class="token punctuation">(</span><span class="token string">'DE'</span><span class="token punctuation">,</span> lang<span class="token punctuation">)</span><span class="token punctuation">;</span>
+echarts<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span>DomElement<span class="token punctuation">,</span> <span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
+ locale<span class="token operator">:</span> <span class="token string">'DE'</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" [...]
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
+ <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 type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+ <script>var _hmt=_hmt||[];!function(){var e=document.createElement("script");e.src="https://hm.baidu.com/hm.js?54b918eee37cb8a7045f0fd0f0b24395";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)}()</script>
+ </body>
+</html>
diff --git a/docs/zh/basics/release-note/v5-upgrade-guide/index.html b/docs/zh/basics/release-note/v5-upgrade-guide/index.html
new file mode 100644
index 0000000..71de318
--- /dev/null
+++ b/docs/zh/basics/release-note/v5-upgrade-guide/index.html
@@ -0,0 +1,90 @@
+<!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">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/ec [...]
+ </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="ht [...]
+ color<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token string">'#c23531'</span><span class="token punctuation">,</span>
+ <span class="token string">'#2f4554'</span><span class="token punctuation">,</span>
+ <span class="token string">'#61a0a8'</span><span class="token punctuation">,</span>
+ <span class="token string">'#d48265'</span><span class="token punctuation">,</span>
+ <span class="token string">'#91c7ae'</span><span class="token punctuation">,</span>
+ <span class="token string">'#749f83'</span><span class="token punctuation">,</span>
+ <span class="token string">'#ca8622'</span><span class="token punctuation">,</span>
+ <span class="token string">'#bda29a'</span><span class="token punctuation">,</span>
+ <span class="token string">'#6e7074'</span><span class="token punctuation">,</span>
+ <span class="token string">'#546570'</span><span class="token punctuation">,</span>
+ <span class="token string">'#c4ccd3'</span>
+ <span class="token punctuation">]</span>
+ <span class="token comment">// ...</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" [...]
+ color<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token string">'#c23531'</span><span class="token punctuation">,</span>
+ <span class="token string">'#2f4554'</span><span class="token punctuation">,</span>
+ <span class="token string">'#61a0a8'</span><span class="token punctuation">,</span>
+ <span class="token string">'#d48265'</span><span class="token punctuation">,</span>
+ <span class="token string">'#91c7ae'</span><span class="token punctuation">,</span>
+ <span class="token string">'#749f83'</span><span class="token punctuation">,</span>
+ <span class="token string">'#ca8622'</span><span class="token punctuation">,</span>
+ <span class="token string">'#bda29a'</span><span class="token punctuation">,</span>
+ <span class="token string">'#6e7074'</span><span class="token punctuation">,</span>
+ <span class="token string">'#546570'</span><span class="token punctuation">,</span>
+ <span class="token string">'#c4ccd3'</span>
+ <span class="token punctuation">]</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span>
+<span class="token keyword">var</span> chart <span class="token operator">=</span> echarts<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span>dom<span class="token punctuation">,</span> themeEC4<span class="token punctuation">)</span><span class="token punctuation">;</span>
+chart<span class="token punctuation">.</span><span class="token function">setOption</span><span class="token punctuation">(</span><span class="token comment">/* ... */</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill= [...]
+<span class="token comment">// 或者按需引入</span>
+<span class="token keyword">import</span> echarts <span class="token keyword">from</span> <span class="token string">'echarts/lib/echarts'</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data [...]
+<span class="token comment">// 按需引入</span>
+<span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> echarts <span class="token keyword">from</span> <span class="token string">'echarts/lib/echarts'</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg [...]
+<span class="token keyword">import</span> <span class="token punctuation">{</span> BarChart <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'echarts/charts'</span><span class="token punctuation">;</span>
+<span class="token keyword">import</span> <span class="token punctuation">{</span> GridComponent <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'echarts/components'</span><span class="token punctuation">;</span>
+<span class="token comment">// 注意，新的接口中默认不再包含 Canvas 渲染器，需要显示引入，如果需要使用 SVG 渲染模式则使用 SVGRenderer</span>
+<span class="token keyword">import</span> <span class="token punctuation">{</span> CanvasRenderer <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'echarts/renderers'</span><span class="token punctuation">;</span>
+
+echarts<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span><span class="token punctuation">[</span>BarChart<span class="token punctuation">,</span> GridComponent<span class="token punctuation">,</span> CanvasRenderer<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www [...]
+<span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'echarts/lib/chart/bar'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+<span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'echarts/lib/component/grid'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" st [...]
+<span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'echarts/lib/chart/bar'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+<span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'echarts/lib/chart/line'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke [...]
+echarts<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>AriaComponent<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke=" [...]
+<ul><li>变更点：
+<ul><li><code>position: [number, number]</code> 改为 <code>x: number</code> / <code>y: number</code>。</li> <li><code>scale: [number, number]</code> 改为 <code>scaleX: number</code> / <code>scaleY: number</code>。</li> <li><code>origin: [number, number]</code> 改为 <code>originX: number</code> / <code>originY: number</code>。</li></ul></li> <li><code>position</code>、<code>scale</code> 和 <code>origin</code> 仍然支持，但已不推荐使用。</li> <li>它影响到这些地方：
+<ul><li>在<code>graphic</code>组件中：每个元素的声明。</li> <li>在 <code>custom series</code> 中：<code>renderItem</code> 返回的每个元素的声明。</li> <li>直接使用 zrender 图形元素时。</li></ul></li></ul></li> <li>Text 相关的属性被改变：
+<ul><li>变更点：
+<ul><li>图形元素附带的文本的声明方式被改变：
+<ul><li>除了 <code>Text</code> 元素之外，其他元素中的属性 <code>style.text</code> 都不推荐使用了。取而代之的是新属性 <code>textContent</code> 和 <code>textConfig</code>，他们能带来更丰富的功能。</li> <li>其中，下面左边部分的这些属性已不推荐使用或废弃。请使用下面的右边部分的属性：
+<ul><li>textPosition => textConfig.position</li> <li>textOffset => textConfig.offset</li> <li>textRotation => textConfig.rotation</li> <li>textDistance => textConfig.distance</li></ul></li></ul></li> <li>下面左边部分的属性在 <code>style</code> 和 <code>style.rich.?</code> 中已不推荐使用或废弃。请使用下面右边的属性：
+<ul><li>textFill => fill</li> <li>textStroke => stroke</li> <li>textFont => font</li> <li>textStrokeWidth => lineWidth</li> <li>textAlign => align</li> <li>textVerticalAlign => verticalAlign</li> <li>textLineHeight =></li> <li>textWidth => width</li> <li>textHeight => hight</li> <li>textBackgroundColor => backgroundColor</li> <li>textPadding => padding</li> <li>textBorderColor => borderColor</li> <li>textBorderWidth => borderWidth</li> <li>textBorderRadius => borderRadius</li> <li>textBo [...]
+<ul><li>textShadowColor</li> <li>textShadowBlur</li> <li>textShadowOffsetX</li> <li>textShadowOffsetY</li></ul></li></ul></li> <li>它影响到这些地方：
+<ul><li>在 <code>graphic</code> 组件中：每个元素的声明。（原来的写法仍兼容，但在一些很复杂的情况下，可能效果不完全一致。）</li> <li>在自定义系列（<code>custom series</code>）中：<code>renderItem</code> 返回中的每个元素的声明。（原来的写法仍兼容，但在一些很复杂的情况下，可能效果不完全一致。）</li> <li>直接使用 zrender API 创建图形元素。（不再兼容，原写法被废弃。）</li></ul></li></ul></li> <li>图表实例上的 API：
+<ul><li><code>chart.one(...)</code> 已不推荐使用。</li></ul></li> <li><code>label</code>。
+<ul><li>属性 <code>color</code>、<code>textBorderColor</code>、<code>backgroundColor</code>、<code>borderColor</code> 中，值 <code>auto</code> 已不推荐使用，而推荐使用 <code>'inherit'</code> 代替。</li></ul></li> <li><code>hoverAnimation</code>:
+<ul><li>选项 <code>series.hoverAnimation</code> 已不推荐使用，使用 <code>series.emphasis.scale</code> 代替之。</li></ul></li> <li>折线图（<code>line series</code>）：
+<ul><li>选项 <code>series.clipOverflow</code> 已不推荐使用，使用 <code>series.clip</code> 代替之。</li></ul></li> <li>自定义系列（<code>custom series</code>）。
+<ul><li>在 <code>renderItem</code> 中，<code>api.style(...)</code> 和 <code>api.styleEmphasis(...)</code> 已不推荐使用。因为这两个接口其实并不真正必要，也很难保证向后兼容。用户可以通过 <code>api.visual(...)</code> 获取系统自动分配的视觉信息。</li></ul></li> <li>旭日图（<code>sunburst</code>）：
+<ul><li>动作类型 <code>highlight</code> 已被弃用，请使用 <code>sunburstHighlight</code> 代替。</li> <li>动作类型 <code>downplay</code> 已被弃用，请使用 <code>sunburstUnhighlight</code> 代替。</li> <li>选项 <code>series.downplay</code> 已被弃用，请使用 <code>series.blur</code> 代替。</li> <li>选项 <code>series.highlightPolicy</code> 已不适用，请使用 <code>series.emphasis.focus</code> 代替。</li></ul></li> <li>饼图（<code>pie</code>）：
+<ul><li>下面左边部分的 action 名已经不推荐使用。请使用右边的 action 名。
+<ul><li><code>pieToggleSelect</code> => <code>toggleSelect</code>。</li> <li><code>pieSelect</code> => <code>select</code>。</li> <li><code>pieUnSelect</code> => <code>unselect</code>。</li></ul></li> <li>下面左边部分的事件名已经不推荐使用。请使用右边的事件名。
+<ul><li><code>pieselectchanged</code> => <code>selectchanged</code>。</li> <li><code>pieselected</code> => <code>selected</code>。</li> <li><code>pieunselected</code> => <code>unselected</code>。</li></ul></li> <li>选项 <code>series.label.margin</code> 已经不推荐使用。使用 <code>series.label.edgeDistance</code> 代替。</li> <li>选项 <code>series.clockWise</code> 已经不推荐使用。使用 <code>series.clockwise</code> 代替。</li> <li>选项 <code>series.hoverOffset</code> 已经不推荐使用。使用 <code>series.emphasis.scaleSize</code> 代替。</li>< [...]
+<ul><li>下文左边部分的 action 名已经不推荐使用。请使用右边的 action 名。
+<ul><li><code>mapToggleSelect</code> => <code>toggleSelect</code>。</li> <li><code>mapSelect</code> => <code>select</code>。</li> <li><code>mapUnSelect</code> => <code>unselect</code>。</li></ul></li> <li>下面左边部分的事件名已经不推荐使用。请使用右边的事件名。
+<ul><li><code>mapselectchanged</code> => <code>selectchanged</code>。</li> <li><code>mapselected</code> => <code>selected</code>。</li> <li><code>mapunselected</code> => <code>unselected</code>。</li></ul></li> <li>选项 <code>series.mapType</code> 已经不推荐使用。使用 <code>series.map</code> 代替。</li> <li>选项 <code>series.mapLocation</code> 已经不推荐使用。</li></ul></li> <li>关系图（<code>graph series</code>）：
+<ul><li>选项 <code>series.focusNodeAdjacency</code> 已经不推荐使用。使用 <code>series.emphasis: { focus: 'adjacency'}</code> 代替。</li></ul></li> <li>仪表盘（<code>gauge series</code>）：
+<ul><li>选项 <code>series.clockWise</code> 已经不推荐使用。使用 <code>series.clockwise</code> 代替。</li> <li>选项 <code>series.hoverOffset</code> 已经不推荐使用。使用 <code>series.emphasis.scaleSize</code> 代替。</li></ul></li> <li><code>dataZoom</code> 组件：
+<ul><li>选项 <code>dataZoom.handleIcon</code> 如果使用 <code>SVGPath</code>，需要前缀 <code>path://</code>。</li></ul></li> <li>雷达图（<code>radar</code>）：
+<ul><li>选项 <code>radar.name</code> 已经不推荐使用。使用 <code>radar.axisName</code> 代替。</li> <li>选项 <code>radar.nameGap</code> 已经不推荐使用。使用 <code>radar.axisNameGap</code> 代替。</li></ul></li> <li>Parse and format：
+<ul><li><code>echarts.format.formatTime</code> 已经不推荐使用。使用 <code>echarts.time.format</code> 代替。</li> <li><code>echarts.number.parseDate</code> 已经不推荐使用。使用 <code>echarts.time.parse</code> 代替。</li> <li><code>echarts.format.getTextRect</code> 已经不推荐使用。</li></ul></li></ul></article></div></div> <div class="post-contributors"><h3><span class="inline-block align-middle">本文贡献者</span> <a target="_blank" href="https://github.com/apache/echarts-handbook/tree/master/contents/zh/basics/release-note/v5- [...]
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
+ <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 type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+ <script>var _hmt=_hmt||[];!function(){var e=document.createElement("script");e.src="https://hm.baidu.com/hm.js?54b918eee37cb8a7045f0fd0f0b24395";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)}()</script>
+ </body>
+</html>
diff --git a/docs/zh/best-practices/aria/index.html b/docs/zh/best-practices/aria/index.html
new file mode 100644
index 0000000..695e1f0
--- /dev/null
+++ b/docs/zh/best-practices/aria/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">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/ec [...]
+ </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="ht [...]
+ aria<span class="token operator">:</span> <span class="token punctuation">{</span>
+ show<span class="token operator">:</span> <span class="token boolean">true</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ title<span class="token operator">:</span> <span class="token punctuation">{</span>
+ text<span class="token operator">:</span> <span class="token string">'某站点用户访问来源'</span><span class="token punctuation">,</span>
+ x<span class="token operator">:</span> <span class="token string">'center'</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ series<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ name<span class="token operator">:</span> <span class="token string">'访问来源'</span><span class="token punctuation">,</span>
+ type<span class="token operator">:</span> <span class="token string">'pie'</span><span class="token punctuation">,</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span> value<span class="token operator">:</span> <span class="token number">335</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">'直接访问'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span> value<span class="token operator">:</span> <span class="token number">310</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">'邮件营销'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span> value<span class="token operator">:</span> <span class="token number">234</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">'联盟广告'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span> value<span class="token operator">:</span> <span class="token number">135</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">'视频广告'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span> value<span class="token operator">:</span> <span class="token number">1548</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">'搜索引擎'</span> <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v [...]
+</code></pre> <p>默认语言会根据语言包（默认中文）选择，也可以使用配置项自定义模板。</p> <h3 id="%E6%95%B4%E4%BD%93%E4%BF%AE%E6%94%B9%E6%8F%8F%E8%BF%B0" tabindex="-1">整体修改描述</h3> <p>对于有些图表，默认生成的数据点的描述并不足以表现整体的信息。比如下图的散点图，默认生成的描述可以包含数据点的坐标值，但是知道几百几千个点的坐标并不能帮助我们有效地理解图表表达的信息。</p> <p>这时候，用户可以通过 <a href="https://echarts.apache.org/option.html#aria.description">aria.description</a> 配置项指定图表的整体描述。</p> <h3 id="%E5%AE%9A%E5%88%B6%E6%A8%A1%E6%9D%BF%E6%8F%8F%E8%BF%B0" tabindex="-1">定制模板描述</h3> <p>除了整体性修改描述之外，我们还提供了生成描述的模板，可以方便地进行细粒度 [...]
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
+ <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 type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+ <script>var _hmt=_hmt||[];!function(){var e=document.createElement("script");e.src="https://hm.baidu.com/hm.js?54b918eee37cb8a7045f0fd0f0b24395";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)}()</script>
+ </body>
+</html>
diff --git a/docs/zh/best-practices/canvas-vs-svg/index.html b/docs/zh/best-practices/canvas-vs-svg/index.html
new file mode 100644
index 0000000..1ab4b89
--- /dev/null
+++ b/docs/zh/best-practices/canvas-vs-svg/index.html
@@ -0,0 +1,28 @@
+<!doctype html>
+<html data-n-head-ssr>
+ <head>
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/ec [...]
+ </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="ht [...]
+<ul><li>在须要创建很多 ECharts 实例且浏览器易崩溃的情况下（可能是因为 Canvas 数量多导致内存占用超出手机承受能力），可以使用 SVG 渲染器来进行改善。大略得说，如果图表运行在低端安卓机，或者我们在使用一些特定图表如 <a href="https://ecomfe.github.io/echarts-liquidfill/example/">水球图</a> 等，SVG 渲染器可能效果更好。</li> <li>数据量较大（经验判断 > 1k）、较多交互时，建议选择 Canvas 渲染器。</li></ul></li></ul> <p>我们强烈欢迎开发者们<a href="https://github.com/apache/echarts/issues/new">反馈</a>给我们使用的体验和场景，帮助我们更好的做优化。</p> <p>注：当前某些特殊的渲染依然需要依赖 Canvas：如<a href="https://echarts.apache.org/option.html#series-lines.effect">炫光尾迹特效</a>、<a [...]
+<span class="token comment">// 可以根据需要选用只用到的渲染器</span>
+<span class="token keyword">import</span> <span class="token punctuation">{</span> SVGRenderer<span class="token punctuation">,</span> CanvasRenderer <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'echarts/renderers'</span><span class="token punctuation">;</span>
+
+echarts<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span><span class="token punctuation">[</span>SVGRenderer<span class="token punctuation">,</span> CanvasRenderer<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" s [...]
+<span class="token keyword">var</span> chart <span class="token operator">=</span> echarts<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span>containerDom<span class="token punctuation">,</span> <span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> renderer<span class="token operator">:</span> <span class="token string">'canvas'</span> <span class="token [...]
+<span class="token comment">// 等价于：</span>
+<span class="token keyword">var</span> chart <span class="token operator">=</span> echarts<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span>containerDom<span class="token punctuation">)</span><span class="token punctuation">;</span>
+
+<span class="token comment">// 使用 SVG 渲染器</span>
+<span class="token keyword">var</span> chart <span class="token operator">=</span> echarts<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span>containerDom<span class="token punctuation">,</span> <span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> renderer<span class="token operator">:</span> <span class="token string">'svg'</span> <span class="token pun [...]
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
+ <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 type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+ <script>var _hmt=_hmt||[];!function(){var e=document.createElement("script");e.src="https://hm.baidu.com/hm.js?54b918eee37cb8a7045f0fd0f0b24395";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)}()</script>
+ </body>
+</html>
diff --git a/docs/zh/concepts/axis/index.html b/docs/zh/concepts/axis/index.html
new file mode 100644
index 0000000..a3ee9e2
--- /dev/null
+++ b/docs/zh/concepts/axis/index.html
@@ -0,0 +1,285 @@
+<!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">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/ec [...]
+ </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="ht [...]
+ xAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
+ <span class="token comment">// ...</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ yAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
+ <span class="token comment">// ...</span>
+ <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v [...]
+ xAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'time'</span><span class="token punctuation">,</span>
+ name<span class="token operator">:</span> <span class="token string">'销售时间'</span>
+ <span class="token comment">// ...</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ yAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'value'</span><span class="token punctuation">,</span>
+ name<span class="token operator">:</span> <span class="token string">'销售数量'</span>
+ <span class="token comment">// ...</span>
+ <span class="token punctuation">}</span>
+ <span class="token comment">// ...</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v [...]
+ xAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'time'</span><span class="token punctuation">,</span>
+ name<span class="token operator">:</span> <span class="token string">'销售时间'</span>
+ <span class="token comment">// ...</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ yAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'value'</span><span class="token punctuation">,</span>
+ name<span class="token operator">:</span> <span class="token string">'销售数量'</span>
+ <span class="token comment">// ...</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ dataZoom<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token comment">// ...</span>
+ <span class="token punctuation">]</span>
+ <span class="token comment">// ...</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v [...]
+ xAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'time'</span><span class="token punctuation">,</span>
+ name<span class="token operator">:</span> <span class="token string">'销售时间'</span>
+ <span class="token comment">// ...</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ yAxis<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'value'</span><span class="token punctuation">,</span>
+ name<span class="token operator">:</span> <span class="token string">'销售数量'</span>
+ <span class="token comment">// ...</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'value'</span><span class="token punctuation">,</span>
+ name<span class="token operator">:</span> <span class="token string">'销售金额'</span>
+ <span class="token comment">// ...</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span>
+ <span class="token comment">// ...</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v [...]
+ xAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
+ axisLine<span class="token operator">:</span> <span class="token punctuation">{</span>
+ symbol<span class="token operator">:</span> <span class="token string">'arrow'</span><span class="token punctuation">,</span>
+ lineStyle<span class="token operator">:</span> <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'dashed'</span>
+ <span class="token comment">// ...</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span>
+ <span class="token comment">// ...</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ yAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
+ axisLine<span class="token operator">:</span> <span class="token punctuation">{</span>
+ symbol<span class="token operator">:</span> <span class="token string">'arrow'</span><span class="token punctuation">,</span>
+ lineStyle<span class="token operator">:</span> <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'dashed'</span>
+ <span class="token comment">// ...</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span>
+ <span class="token comment">// ...</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v [...]
+ xAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
+ axisTick<span class="token operator">:</span> <span class="token punctuation">{</span>
+ length<span class="token operator">:</span> <span class="token number">6</span><span class="token punctuation">,</span>
+ lineStyle<span class="token operator">:</span> <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'dashed'</span>
+ <span class="token comment">// ...</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span>
+ <span class="token comment">// ...</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ yAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
+ axisTick<span class="token operator">:</span> <span class="token punctuation">{</span>
+ length<span class="token operator">:</span> <span class="token number">6</span><span class="token punctuation">,</span>
+ lineStyle<span class="token operator">:</span> <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'dashed'</span>
+ <span class="token comment">// ...</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span>
+ <span class="token comment">// ...</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v [...]
+ xAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
+ axisLabel<span class="token operator">:</span> <span class="token punctuation">{</span>
+ formatter<span class="token operator">:</span> <span class="token string">'{value} kg'</span><span class="token punctuation">,</span>
+ align<span class="token operator">:</span> <span class="token string">'center'</span>
+ <span class="token comment">// ...</span>
+ <span class="token punctuation">}</span>
+ <span class="token comment">// ...</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ yAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
+ axisLabel<span class="token operator">:</span> <span class="token punctuation">{</span>
+ formatter<span class="token operator">:</span> <span class="token string">'{value} 元'</span><span class="token punctuation">,</span>
+ align<span class="token operator">:</span> <span class="token string">'center'</span>
+ <span class="token comment">// ...</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span>
+ <span class="token comment">// ...</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v [...]
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: { type: 'cross' }
+ },
+ legend: {},
+ xAxis: [
+ {
+ type: 'category',
+ axisTick: {
+ alignWithLabel: true
+ },
+ data: [
+ '1月',
+ '2月',
+ '3月',
+ '4月',
+ '5月',
+ '6月',
+ '7月',
+ '8月',
+ '9月',
+ '10月',
+ '11月',
+ '12月'
+ ]
+ }
+ ],
+ yAxis: [
+ {
+ type: 'value',
+ name: '降水量',
+ min: 0,
+ max: 250,
+ position: 'right',
+ axisLabel: {
+ formatter: '{value} ml'
+ }
+ },
+ {
+ type: 'value',
+ name: '温度',
+ min: 0,
+ max: 25,
+ position: 'left',
+ axisLabel: {
+ formatter: '{value} °C'
+ }
+ }
+ ],
+ series: [
+ {
+ name: '降水量',
+ type: 'bar',
+ yAxisIndex: 0,
+ data: [6, 32, 70, 86, 68.7, 100.7, 125.6, 112.2, 78.7, 48.8, 36.0, 19.3]
+ },
+ {
+ name: '温度',
+ type: 'line',
+ smooth: true,
+ yAxisIndex: 1,
+ data: [
+ 6.0,
+ 10.2,
+ 10.3,
+ 11.5,
+ 10.3,
+ 13.2,
+ 14.3,
+ 16.4,
+ 18.0,
+ 16.5,
+ 12.0,
+ 5.2
+ ]
+ }
+ ]
+};</textarea><pre data-testid="preview" class="prism-editor__editor">option <span class="token operator">=</span> <span class="token punctuation">{</span>
+ tooltip<span class="token operator">:</span> <span class="token punctuation">{</span>
+ trigger<span class="token operator">:</span> <span class="token string">'axis'</span><span class="token punctuation">,</span>
+ axisPointer<span class="token operator">:</span> <span class="token punctuation">{</span> type<span class="token operator">:</span> <span class="token string">'cross'</span> <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ legend<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
+ xAxis<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'category'</span><span class="token punctuation">,</span>
+ axisTick<span class="token operator">:</span> <span class="token punctuation">{</span>
+ alignWithLabel<span class="token operator">:</span> <span class="token boolean">true</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token string">'1月'</span><span class="token punctuation">,</span>
+ <span class="token string">'2月'</span><span class="token punctuation">,</span>
+ <span class="token string">'3月'</span><span class="token punctuation">,</span>
+ <span class="token string">'4月'</span><span class="token punctuation">,</span>
+ <span class="token string">'5月'</span><span class="token punctuation">,</span>
+ <span class="token string">'6月'</span><span class="token punctuation">,</span>
+ <span class="token string">'7月'</span><span class="token punctuation">,</span>
+ <span class="token string">'8月'</span><span class="token punctuation">,</span>
+ <span class="token string">'9月'</span><span class="token punctuation">,</span>
+ <span class="token string">'10月'</span><span class="token punctuation">,</span>
+ <span class="token string">'11月'</span><span class="token punctuation">,</span>
+ <span class="token string">'12月'</span>
+ <span class="token punctuation">]</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span><span class="token punctuation">,</span>
+ yAxis<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'value'</span><span class="token punctuation">,</span>
+ name<span class="token operator">:</span> <span class="token string">'降水量'</span><span class="token punctuation">,</span>
+ min<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
+ max<span class="token operator">:</span> <span class="token number">250</span><span class="token punctuation">,</span>
+ position<span class="token operator">:</span> <span class="token string">'right'</span><span class="token punctuation">,</span>
+ axisLabel<span class="token operator">:</span> <span class="token punctuation">{</span>
+ formatter<span class="token operator">:</span> <span class="token string">'{value} ml'</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'value'</span><span class="token punctuation">,</span>
+ name<span class="token operator">:</span> <span class="token string">'温度'</span><span class="token punctuation">,</span>
+ min<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
+ max<span class="token operator">:</span> <span class="token number">25</span><span class="token punctuation">,</span>
+ position<span class="token operator">:</span> <span class="token string">'left'</span><span class="token punctuation">,</span>
+ axisLabel<span class="token operator">:</span> <span class="token punctuation">{</span>
+ formatter<span class="token operator">:</span> <span class="token string">'{value} °C'</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span><span class="token punctuation">,</span>
+ series<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ name<span class="token operator">:</span> <span class="token string">'降水量'</span><span class="token punctuation">,</span>
+ type<span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span>
+ yAxisIndex<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">6</span><span class="token punctuation">,</span> <span class="token number">32</span><span class="token punctuation">,</span> <span class="token number">70</span><span class="token punctuation">,</span> <span class="token number">86</span><span class="token punctuation">,</span> <span class="token number">68.7</span><span class="token punctuation">,</span> <span class="token [...]
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ name<span class="token operator">:</span> <span class="token string">'温度'</span><span class="token punctuation">,</span>
+ type<span class="token operator">:</span> <span class="token string">'line'</span><span class="token punctuation">,</span>
+ smooth<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
+ yAxisIndex<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token number">6.0</span><span class="token punctuation">,</span>
+ <span class="token number">10.2</span><span class="token punctuation">,</span>
+ <span class="token number">10.3</span><span class="token punctuation">,</span>
+ <span class="token number">11.5</span><span class="token punctuation">,</span>
+ <span class="token number">10.3</span><span class="token punctuation">,</span>
+ <span class="token number">13.2</span><span class="token punctuation">,</span>
+ <span class="token number">14.3</span><span class="token punctuation">,</span>
+ <span class="token number">16.4</span><span class="token punctuation">,</span>
+ <span class="token number">18.0</span><span class="token punctuation">,</span>
+ <span class="token number">16.5</span><span class="token punctuation">,</span>
+ <span class="token number">12.0</span><span class="token punctuation">,</span>
+ <span class="token number">5.2</span>
+ <span class="token punctuation">]</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" str [...]
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
+ <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 type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+ <script>var _hmt=_hmt||[];!function(){var e=document.createElement("script");e.src="https://hm.baidu.com/hm.js?54b918eee37cb8a7045f0fd0f0b24395";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)}()</script>
+ </body>
+</html>
diff --git a/docs/zh/concepts/chart-size/index.html b/docs/zh/concepts/chart-size/index.html
new file mode 100644
index 0000000..27bcda8
--- /dev/null
+++ b/docs/zh/concepts/chart-size/index.html
@@ -0,0 +1,45 @@
+<!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">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/ec [...]
+ </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="ht [...]
+<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text/javascript<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
+ var myChart = echarts.init(document.getElementById('main'));
+<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap= [...]
+<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text/javascript<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
+ var myChart = echarts.init(document.getElementById('main'), null, {
+ width: 600,
+ height: 400
+ });
+<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap= [...]
+ <span class="token selector">#main,
+ html,
+ body</span> <span class="token punctuation">{</span>
+ <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
+ <span class="token punctuation">}</span>
+ <span class="token selector">#main</span> <span class="token punctuation">{</span>
+ <span class="token property">height</span><span class="token punctuation">:</span> 400px<span class="token punctuation">;</span>
+ <span class="token punctuation">}</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>main<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuati [...]
+<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text/javascript<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
+ var myChart = echarts.init(document.getElementById('main'));
+ window.onresize = function() {
+ myChart.resize();
+ };
+<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap= [...]
+ width<span class="token operator">:</span> <span class="token number">800</span><span class="token punctuation">,</span>
+ height<span class="token operator">:</span> <span class="token number">400</span>
+<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" [...]
+ <script type="text/javascript">document.getElementById("nav-doc").className="active"</script>
+ <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 type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+ <script>var _hmt=_hmt||[];!function(){var e=document.createElement("script");e.src="https://hm.baidu.com/hm.js?54b918eee37cb8a7045f0fd0f0b24395";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)}()</script>
+ </body>
+</html>
diff --git a/docs/zh/concepts/data-transform/index.html b/docs/zh/concepts/data-transform/index.html
new file mode 100644
index 0000000..37991c1
--- /dev/null
+++ b/docs/zh/concepts/data-transform/index.html
@@ -0,0 +1,600 @@
+<!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">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/echarts-handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/ec [...]
+ </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="ht [...]
+ dataset: [
+ {
+ // 这个 dataset 的 index 是 `0`。
+ source: [
+ ['Product', 'Sales', 'Price', 'Year'],
+ ['Cake', 123, 32, 2011],
+ ['Cereal', 231, 14, 2011],
+ ['Tofu', 235, 5, 2011],
+ ['Dumpling', 341, 25, 2011],
+ ['Biscuit', 122, 29, 2011],
+ ['Cake', 143, 30, 2012],
+ ['Cereal', 201, 19, 2012],
+ ['Tofu', 255, 7, 2012],
+ ['Dumpling', 241, 27, 2012],
+ ['Biscuit', 102, 34, 2012],
+ ['Cake', 153, 28, 2013],
+ ['Cereal', 181, 21, 2013],
+ ['Tofu', 395, 4, 2013],
+ ['Dumpling', 281, 31, 2013],
+ ['Biscuit', 92, 39, 2013],
+ ['Cake', 223, 29, 2014],
+ ['Cereal', 211, 17, 2014],
+ ['Tofu', 345, 3, 2014],
+ ['Dumpling', 211, 35, 2014],
+ ['Biscuit', 72, 24, 2014]
+ ]
+ // id: 'a'
+ },
+ {
+ // 这个 dataset 的 index 是 `1`。
+ // 这个 `transform` 配置，表示，此 dataset 的数据，来自于此 transform 的结果。
+ transform: {
+ type: 'filter',
+ config: { dimension: 'Year', value: 2011 }
+ }
+ // 我们还可以设置这些可选的属性： `fromDatasetIndex` 或 `fromDatasetId`。
+ // 这些属性，指定了，transform 的输入，来自于哪个 dataset。例如，
+ // `fromDatasetIndex: 0` 表示输入来自于 index 为 `0` 的 dataset 。又例如，
+ // `fromDatasetId: 'a'` 表示输入来自于 `id: 'a'` 的 dataset。
+ // 当这些属性都不指定时，默认认为，输入来自于 index 为 `0` 的 dataset 。
+ },
+ {
+ // 这个 dataset 的 index 是 `2`。
+ // 同样，这里因为 `fromDatasetIndex` 和 `fromDatasetId` 都没有被指定，
+ // 那么输入默认来自于 index 为 `0` 的 dataset 。
+ transform: {
+ // 这个类型为 "filter" 的 transform 能够遍历并筛选出满足条件的数据项。
+ type: 'filter',
+ // 每个 transform 如果需要有配置参数的话，都须配置在 `config` 里。
+ // 在这个 "filter" transform 中，`config` 用于指定筛选条件。
+ // 下面这个筛选条件是：选出维度（ dimension ）'Year' 中值为 2012 的所有
+ // 数据项。
+ config: { dimension: 'Year', value: 2012 }
+ }
+ },
+ {
+ // 这个 dataset 的 index 是 `3`。
+ transform: {
+ type: 'filter',
+ config: { dimension: 'Year', value: 2013 }
+ }
+ }
+ ],
+ series: [
+ {
+ type: 'pie',
+ radius: 50,
+ center: ['25%', '50%'],
+ // 这个饼图系列，引用了 index 为 `1` 的 dataset 。也就是，引用了上述
+ // 2011 年那个 "filter" transform 的结果。
+ datasetIndex: 1
+ },
+ {
+ type: 'pie',
+ radius: 50,
+ center: ['50%', '50%'],
+ datasetIndex: 2
+ },
+ {
+ type: 'pie',
+ radius: 50,
+ center: ['75%', '50%'],
+ datasetIndex: 3
+ }
+ ]
+};</textarea><pre data-testid="preview" class="prism-editor__editor"><span class="token keyword">var</span> option <span class="token operator">=</span> <span class="token punctuation">{</span>
+ dataset<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ <span class="token comment">// 这个 dataset 的 index 是 `0`。</span>
+ source<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">[</span><span class="token string">'Product'</span><span class="token punctuation">,</span> <span class="token string">'Sales'</span><span class="token punctuation">,</span> <span class="token string">'Price'</span><span class="token punctuation">,</span> <span class="token string">'Year'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Cake'</span><span class="token punctuation">,</span> <span class="token number">123</span><span class="token punctuation">,</span> <span class="token number">32</span><span class="token punctuation">,</span> <span class="token number">2011</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Cereal'</span><span class="token punctuation">,</span> <span class="token number">231</span><span class="token punctuation">,</span> <span class="token number">14</span><span class="token punctuation">,</span> <span class="token number">2011</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Tofu'</span><span class="token punctuation">,</span> <span class="token number">235</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">2011</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Dumpling'</span><span class="token punctuation">,</span> <span class="token number">341</span><span class="token punctuation">,</span> <span class="token number">25</span><span class="token punctuation">,</span> <span class="token number">2011</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Biscuit'</span><span class="token punctuation">,</span> <span class="token number">122</span><span class="token punctuation">,</span> <span class="token number">29</span><span class="token punctuation">,</span> <span class="token number">2011</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Cake'</span><span class="token punctuation">,</span> <span class="token number">143</span><span class="token punctuation">,</span> <span class="token number">30</span><span class="token punctuation">,</span> <span class="token number">2012</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Cereal'</span><span class="token punctuation">,</span> <span class="token number">201</span><span class="token punctuation">,</span> <span class="token number">19</span><span class="token punctuation">,</span> <span class="token number">2012</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Tofu'</span><span class="token punctuation">,</span> <span class="token number">255</span><span class="token punctuation">,</span> <span class="token number">7</span><span class="token punctuation">,</span> <span class="token number">2012</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Dumpling'</span><span class="token punctuation">,</span> <span class="token number">241</span><span class="token punctuation">,</span> <span class="token number">27</span><span class="token punctuation">,</span> <span class="token number">2012</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Biscuit'</span><span class="token punctuation">,</span> <span class="token number">102</span><span class="token punctuation">,</span> <span class="token number">34</span><span class="token punctuation">,</span> <span class="token number">2012</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Cake'</span><span class="token punctuation">,</span> <span class="token number">153</span><span class="token punctuation">,</span> <span class="token number">28</span><span class="token punctuation">,</span> <span class="token number">2013</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Cereal'</span><span class="token punctuation">,</span> <span class="token number">181</span><span class="token punctuation">,</span> <span class="token number">21</span><span class="token punctuation">,</span> <span class="token number">2013</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Tofu'</span><span class="token punctuation">,</span> <span class="token number">395</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">2013</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Dumpling'</span><span class="token punctuation">,</span> <span class="token number">281</span><span class="token punctuation">,</span> <span class="token number">31</span><span class="token punctuation">,</span> <span class="token number">2013</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Biscuit'</span><span class="token punctuation">,</span> <span class="token number">92</span><span class="token punctuation">,</span> <span class="token number">39</span><span class="token punctuation">,</span> <span class="token number">2013</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Cake'</span><span class="token punctuation">,</span> <span class="token number">223</span><span class="token punctuation">,</span> <span class="token number">29</span><span class="token punctuation">,</span> <span class="token number">2014</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Cereal'</span><span class="token punctuation">,</span> <span class="token number">211</span><span class="token punctuation">,</span> <span class="token number">17</span><span class="token punctuation">,</span> <span class="token number">2014</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Tofu'</span><span class="token punctuation">,</span> <span class="token number">345</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">2014</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Dumpling'</span><span class="token punctuation">,</span> <span class="token number">211</span><span class="token punctuation">,</span> <span class="token number">35</span><span class="token punctuation">,</span> <span class="token number">2014</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Biscuit'</span><span class="token punctuation">,</span> <span class="token number">72</span><span class="token punctuation">,</span> <span class="token number">24</span><span class="token punctuation">,</span> <span class="token number">2014</span><span class="token punctuation">]</span>
+ <span class="token punctuation">]</span>
+ <span class="token comment">// id: 'a'</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ <span class="token comment">// 这个 dataset 的 index 是 `1`。</span>
+ <span class="token comment">// 这个 `transform` 配置，表示，此 dataset 的数据，来自于此 transform 的结果。</span>
+ transform<span class="token operator">:</span> <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'filter'</span><span class="token punctuation">,</span>
+ config<span class="token operator">:</span> <span class="token punctuation">{</span> dimension<span class="token operator">:</span> <span class="token string">'Year'</span><span class="token punctuation">,</span> value<span class="token operator">:</span> <span class="token number">2011</span> <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span>
+ <span class="token comment">// 我们还可以设置这些可选的属性： `fromDatasetIndex` 或 `fromDatasetId`。</span>
+ <span class="token comment">// 这些属性，指定了，transform 的输入，来自于哪个 dataset。例如，</span>
+ <span class="token comment">// `fromDatasetIndex: 0` 表示输入来自于 index 为 `0` 的 dataset 。又例如，</span>
+ <span class="token comment">// `fromDatasetId: 'a'` 表示输入来自于 `id: 'a'` 的 dataset。</span>
+ <span class="token comment">// 当这些属性都不指定时，默认认为，输入来自于 index 为 `0` 的 dataset 。</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ <span class="token comment">// 这个 dataset 的 index 是 `2`。</span>
+ <span class="token comment">// 同样，这里因为 `fromDatasetIndex` 和 `fromDatasetId` 都没有被指定，</span>
+ <span class="token comment">// 那么输入默认来自于 index 为 `0` 的 dataset 。</span>
+ transform<span class="token operator">:</span> <span class="token punctuation">{</span>
+ <span class="token comment">// 这个类型为 "filter" 的 transform 能够遍历并筛选出满足条件的数据项。</span>
+ type<span class="token operator">:</span> <span class="token string">'filter'</span><span class="token punctuation">,</span>
+ <span class="token comment">// 每个 transform 如果需要有配置参数的话，都须配置在 `config` 里。</span>
+ <span class="token comment">// 在这个 "filter" transform 中，`config` 用于指定筛选条件。</span>
+ <span class="token comment">// 下面这个筛选条件是：选出维度（ dimension ）'Year' 中值为 2012 的所有</span>
+ <span class="token comment">// 数据项。</span>
+ config<span class="token operator">:</span> <span class="token punctuation">{</span> dimension<span class="token operator">:</span> <span class="token string">'Year'</span><span class="token punctuation">,</span> value<span class="token operator">:</span> <span class="token number">2012</span> <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ <span class="token comment">// 这个 dataset 的 index 是 `3`。</span>
+ transform<span class="token operator">:</span> <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'filter'</span><span class="token punctuation">,</span>
+ config<span class="token operator">:</span> <span class="token punctuation">{</span> dimension<span class="token operator">:</span> <span class="token string">'Year'</span><span class="token punctuation">,</span> value<span class="token operator">:</span> <span class="token number">2013</span> <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span><span class="token punctuation">,</span>
+ series<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'pie'</span><span class="token punctuation">,</span>
+ radius<span class="token operator">:</span> <span class="token number">50</span><span class="token punctuation">,</span>
+ center<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'25%'</span><span class="token punctuation">,</span> <span class="token string">'50%'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token comment">// 这个饼图系列，引用了 index 为 `1` 的 dataset 。也就是，引用了上述</span>
+ <span class="token comment">// 2011 年那个 "filter" transform 的结果。</span>
+ datasetIndex<span class="token operator">:</span> <span class="token number">1</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'pie'</span><span class="token punctuation">,</span>
+ radius<span class="token operator">:</span> <span class="token number">50</span><span class="token punctuation">,</span>
+ center<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'50%'</span><span class="token punctuation">,</span> <span class="token string">'50%'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ datasetIndex<span class="token operator">:</span> <span class="token number">2</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'pie'</span><span class="token punctuation">,</span>
+ radius<span class="token operator">:</span> <span class="token number">50</span><span class="token punctuation">,</span>
+ center<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'75%'</span><span class="token punctuation">,</span> <span class="token string">'50%'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ datasetIndex<span class="token operator">:</span> <span class="token number">3</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" str [...]
+ dataset<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ source<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token comment">// 原始数据</span>
+ <span class="token punctuation">]</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ <span class="token comment">// 几个 transform 被声明成 array ，他们构成了一个链，</span>
+ <span class="token comment">// 前一个 transform 的输出是后一个 transform 的输入。</span>
+ transform<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'filter'</span><span class="token punctuation">,</span>
+ config<span class="token operator">:</span> <span class="token punctuation">{</span> dimension<span class="token operator">:</span> <span class="token string">'Product'</span><span class="token punctuation">,</span> value<span class="token operator">:</span> <span class="token string">'Tofu'</span> <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'sort'</span><span class="token punctuation">,</span>
+ config<span class="token operator">:</span> <span class="token punctuation">{</span> dimension<span class="token operator">:</span> <span class="token string">'Year'</span><span class="token punctuation">,</span> order<span class="token operator">:</span> <span class="token string">'desc'</span> <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span><span class="token punctuation">,</span>
+ series<span class="token operator">:</span> <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'pie'</span><span class="token punctuation">,</span>
+ <span class="token comment">// 这个系列引用上述 transform 的结果。</span>
+ datasetIndex<span class="token operator">:</span> <span class="token number">1</span>
+ <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v [...]
+ dataset<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ <span class="token comment">// 这个 dataset 的 index 为 `0`。</span>
+ source<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token comment">// 原始数据</span>
+ <span class="token punctuation">]</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ <span class="token comment">// 这个 dataset 的 index 为 `1`。</span>
+ transform<span class="token operator">:</span> <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'boxplot'</span>
+ <span class="token punctuation">}</span>
+ <span class="token comment">// 这个 "boxplot" transform 生成了两个数据：</span>
+ <span class="token comment">// result[0]: boxplot series 所需的数据。</span>
+ <span class="token comment">// result[1]: 离群点数据。</span>
+ <span class="token comment">// 当其他 series 或者 dataset 引用这个 dataset 时，他们默认只能得到</span>
+ <span class="token comment">// result[0] 。</span>
+ <span class="token comment">// 如果想要他们得到 result[1] ，需要额外声明如下这样一个 dataset ：</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ <span class="token comment">// 这个 dataset 的 index 为 `2`。</span>
+ <span class="token comment">// 这个额外的 dataset 指定了数据来源于 index 为 `1` 的 dataset。</span>
+ fromDatasetIndex<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
+ <span class="token comment">// 并且指定了获取 transform result[1] 。</span>
+ fromTransformResult<span class="token operator">:</span> <span class="token number">1</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span><span class="token punctuation">,</span>
+ xAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'category'</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ yAxis<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
+ series<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ name<span class="token operator">:</span> <span class="token string">'boxplot'</span><span class="token punctuation">,</span>
+ type<span class="token operator">:</span> <span class="token string">'boxplot'</span><span class="token punctuation">,</span>
+ <span class="token comment">// Reference the data from result[0].</span>
+ <span class="token comment">// 这个 series 引用 index 为 `1` 的 dataset 。</span>
+ datasetIndex<span class="token operator">:</span> <span class="token number">1</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ name<span class="token operator">:</span> <span class="token string">'outlier'</span><span class="token punctuation">,</span>
+ type<span class="token operator">:</span> <span class="token string">'scatter'</span><span class="token punctuation">,</span>
+ <span class="token comment">// 这个 series 引用 index 为 `2` 的 dataset 。</span>
+ <span class="token comment">// 从而也就得到了上述的 transform result[1] （即离群点数据）</span>
+ datasetIndex<span class="token operator">:</span> <span class="token number">2</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v [...]
+ fromDatasetIndex<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
+ fromTransformResult<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
+ transform<span class="token operator">:</span> <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'sort'</span><span class="token punctuation">,</span>
+ config<span class="token operator">:</span> <span class="token punctuation">{</span> dimension<span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> order<span class="token operator">:</span> <span class="token string">'desc'</span> <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span>
+<span class="token punctuation">}</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 [...]
+ dataset<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ source<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ transform<span class="token operator">:</span> <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'filter'</span><span class="token punctuation">,</span>
+ config<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token comment">// 配置为 `true` 后， transform 的结果</span>
+ <span class="token comment">// 会被 console.log 打印出来。</span>
+ print<span class="token operator">:</span> <span class="token boolean">true</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span>
+ <span class="token comment">// ...</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v [...]
+ dataset: [
+ {
+ source: [
+ ['Product', 'Sales', 'Price', 'Year'],
+ ['Cake', 123, 32, 2011],
+ ['Latte', 231, 14, 2011],
+ ['Tofu', 235, 5, 2011],
+ ['Milk Tee', 341, 25, 2011],
+ ['Porridge', 122, 29, 2011],
+ ['Cake', 143, 30, 2012],
+ ['Latte', 201, 19, 2012],
+ ['Tofu', 255, 7, 2012],
+ ['Milk Tee', 241, 27, 2012],
+ ['Porridge', 102, 34, 2012],
+ ['Cake', 153, 28, 2013],
+ ['Latte', 181, 21, 2013],
+ ['Tofu', 395, 4, 2013],
+ ['Milk Tee', 281, 31, 2013],
+ ['Porridge', 92, 39, 2013],
+ ['Cake', 223, 29, 2014],
+ ['Latte', 211, 17, 2014],
+ ['Tofu', 345, 3, 2014],
+ ['Milk Tee', 211, 35, 2014],
+ ['Porridge', 72, 24, 2014]
+ ]
+ },
+ {
+ transform: {
+ type: 'filter',
+ config: { dimension: 'Year', '=': 2011 }
+ // 这个筛选条件表示，遍历数据，筛选出维度（ dimension ）
+ // 'Year' 上值为 2011 的所有数据项。
+ }
+ }
+ ],
+ series: {
+ type: 'pie',
+ datasetIndex: 1
+ }
+};</textarea><pre data-testid="preview" class="prism-editor__editor">option <span class="token operator">=</span> <span class="token punctuation">{</span>
+ dataset<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ source<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">[</span><span class="token string">'Product'</span><span class="token punctuation">,</span> <span class="token string">'Sales'</span><span class="token punctuation">,</span> <span class="token string">'Price'</span><span class="token punctuation">,</span> <span class="token string">'Year'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Cake'</span><span class="token punctuation">,</span> <span class="token number">123</span><span class="token punctuation">,</span> <span class="token number">32</span><span class="token punctuation">,</span> <span class="token number">2011</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Latte'</span><span class="token punctuation">,</span> <span class="token number">231</span><span class="token punctuation">,</span> <span class="token number">14</span><span class="token punctuation">,</span> <span class="token number">2011</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Tofu'</span><span class="token punctuation">,</span> <span class="token number">235</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">2011</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Milk Tee'</span><span class="token punctuation">,</span> <span class="token number">341</span><span class="token punctuation">,</span> <span class="token number">25</span><span class="token punctuation">,</span> <span class="token number">2011</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Porridge'</span><span class="token punctuation">,</span> <span class="token number">122</span><span class="token punctuation">,</span> <span class="token number">29</span><span class="token punctuation">,</span> <span class="token number">2011</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Cake'</span><span class="token punctuation">,</span> <span class="token number">143</span><span class="token punctuation">,</span> <span class="token number">30</span><span class="token punctuation">,</span> <span class="token number">2012</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Latte'</span><span class="token punctuation">,</span> <span class="token number">201</span><span class="token punctuation">,</span> <span class="token number">19</span><span class="token punctuation">,</span> <span class="token number">2012</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Tofu'</span><span class="token punctuation">,</span> <span class="token number">255</span><span class="token punctuation">,</span> <span class="token number">7</span><span class="token punctuation">,</span> <span class="token number">2012</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Milk Tee'</span><span class="token punctuation">,</span> <span class="token number">241</span><span class="token punctuation">,</span> <span class="token number">27</span><span class="token punctuation">,</span> <span class="token number">2012</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Porridge'</span><span class="token punctuation">,</span> <span class="token number">102</span><span class="token punctuation">,</span> <span class="token number">34</span><span class="token punctuation">,</span> <span class="token number">2012</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Cake'</span><span class="token punctuation">,</span> <span class="token number">153</span><span class="token punctuation">,</span> <span class="token number">28</span><span class="token punctuation">,</span> <span class="token number">2013</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Latte'</span><span class="token punctuation">,</span> <span class="token number">181</span><span class="token punctuation">,</span> <span class="token number">21</span><span class="token punctuation">,</span> <span class="token number">2013</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Tofu'</span><span class="token punctuation">,</span> <span class="token number">395</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">2013</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Milk Tee'</span><span class="token punctuation">,</span> <span class="token number">281</span><span class="token punctuation">,</span> <span class="token number">31</span><span class="token punctuation">,</span> <span class="token number">2013</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Porridge'</span><span class="token punctuation">,</span> <span class="token number">92</span><span class="token punctuation">,</span> <span class="token number">39</span><span class="token punctuation">,</span> <span class="token number">2013</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Cake'</span><span class="token punctuation">,</span> <span class="token number">223</span><span class="token punctuation">,</span> <span class="token number">29</span><span class="token punctuation">,</span> <span class="token number">2014</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Latte'</span><span class="token punctuation">,</span> <span class="token number">211</span><span class="token punctuation">,</span> <span class="token number">17</span><span class="token punctuation">,</span> <span class="token number">2014</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Tofu'</span><span class="token punctuation">,</span> <span class="token number">345</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">2014</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Milk Tee'</span><span class="token punctuation">,</span> <span class="token number">211</span><span class="token punctuation">,</span> <span class="token number">35</span><span class="token punctuation">,</span> <span class="token number">2014</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Porridge'</span><span class="token punctuation">,</span> <span class="token number">72</span><span class="token punctuation">,</span> <span class="token number">24</span><span class="token punctuation">,</span> <span class="token number">2014</span><span class="token punctuation">]</span>
+ <span class="token punctuation">]</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ transform<span class="token operator">:</span> <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'filter'</span><span class="token punctuation">,</span>
+ config<span class="token operator">:</span> <span class="token punctuation">{</span> dimension<span class="token operator">:</span> <span class="token string">'Year'</span><span class="token punctuation">,</span> <span class="token string">'='</span><span class="token operator">:</span> <span class="token number">2011</span> <span class="token punctuation">}</span>
+ <span class="token comment">// 这个筛选条件表示，遍历数据，筛选出维度（ dimension ）</span>
+ <span class="token comment">// 'Year' 上值为 2011 的所有数据项。</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span><span class="token punctuation">,</span>
+ series<span class="token operator">:</span> <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'pie'</span><span class="token punctuation">,</span>
+ datasetIndex<span class="token operator">:</span> <span class="token number">1</span>
+ <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</div> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" str [...]
+<code>></code>（<code>gt</code>）、<code>>=</code>（<code>gte</code>）、<code><</code>（<code>lt</code>）、<code><=</code>（<code>lte</code>）、<code>=</code>（<code>eq</code>）、<code>!=</code>（<code>ne</code>、<code><></code>）、<code>reg</code>。（小括号中的符号或名字，是别名，设置起来作用相同）。他们首先基本地能基于数值大小进行比较，然后也有些额外的功能特性：</p> <ul><li>多个关系操作符能声明在一个 {} 中，例如 <code>{ dimension: 'Price', '>=': 20, '<': 30 }</code>。这表示“与”的关系，即，筛选出价格大于等于 20 小雨 30 的数据项。</li> <li>data 里的值，不仅可以是数值（ number ），也可以是“类数值的字符串”（“ numeric strin [...]
+ dataset<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ source<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token comment">// ...</span>
+ <span class="token punctuation">]</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ transform<span class="token operator">:</span> <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'filter'</span><span class="token punctuation">,</span>
+ config<span class="token operator">:</span> <span class="token punctuation">{</span>
+ <span class="token comment">// 使用 and 操作符。</span>
+ <span class="token comment">// 类似地，同样的位置也可以使用 “or” 或 “not”。</span>
+ <span class="token comment">// 但是注意 “not” 后应该跟一个 {...} 而非 [...] 。</span>
+ and<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span> dimension<span class="token operator">:</span> <span class="token string">'Year'</span><span class="token punctuation">,</span> <span class="token string">'='</span><span class="token operator">:</span> <span class="token number">2011</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span> dimension<span class="token operator">:</span> <span class="token string">'Price'</span><span class="token punctuation">,</span> <span class="token string">'>='</span><span class="token operator">:</span> <span class="token number">20</span><span class="token punctuation">,</span> <span class="token string">'<'</span><span class="token operator">:</span> <span class="token number">30</span> <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span>
+ <span class="token punctuation">}</span>
+ <span class="token comment">// 这个表达的是，选出 2011 年价格大于等于 20 但小于 30 的数据项。</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span><span class="token punctuation">,</span>
+ series<span class="token operator">:</span> <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'pie'</span><span class="token punctuation">,</span>
+ datasetIndex<span class="token operator">:</span> <span class="token number">1</span>
+ <span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v [...]
+ type<span class="token operator">:</span> <span class="token string">'filter'</span><span class="token punctuation">,</span>
+ config<span class="token operator">:</span> <span class="token punctuation">{</span>
+ or<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
+ and<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
+ dimension<span class="token operator">:</span> <span class="token string">'Price'</span><span class="token punctuation">,</span> <span class="token string">'>='</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token string">'<'</span><span class="token operator">:</span> <span class="token number">20</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
+ dimension<span class="token operator">:</span> <span class="token string">'Sales'</span><span class="token punctuation">,</span> <span class="token string">'<'</span><span class="token operator">:</span> <span class="token number">100</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
+ not<span class="token operator">:</span> <span class="token punctuation">{</span> dimension<span class="token operator">:</span> <span class="token string">'Product'</span><span class="token punctuation">,</span> <span class="token string">'='</span><span class="token operator">:</span> <span class="token string">'Tofu'</span> <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span><span class="token punctuation">]</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
+ and<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
+ dimension<span class="token operator">:</span> <span class="token string">'Price'</span><span class="token punctuation">,</span> <span class="token string">'>='</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token string">'<'</span><span class="token operator">:</span> <span class="token number">20</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
+ dimension<span class="token operator">:</span> <span class="token string">'Sales'</span><span class="token punctuation">,</span> <span class="token string">'<'</span><span class="token operator">:</span> <span class="token number">100</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
+ not<span class="token operator">:</span> <span class="token punctuation">{</span> dimension<span class="token operator">:</span> <span class="token string">'Product'</span><span class="token punctuation">,</span> <span class="token string">'='</span><span class="token operator">:</span> <span class="token string">'Cake'</span> <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span><span class="token punctuation">]</span>
+ <span class="token punctuation">}</span><span class="token punctuation">]</span>
+ <span class="token punctuation">}</span>
+<span class="token punctuation">}</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 [...]
+ dataset<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ source<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">[</span><span class="token string">'Product'</span><span class="token punctuation">,</span> <span class="token string">'Sales'</span><span class="token punctuation">,</span> <span class="token string">'Price'</span><span class="token punctuation">,</span> <span class="token string">'Date'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Milk Tee'</span><span class="token punctuation">,</span> <span class="token number">311</span><span class="token punctuation">,</span> <span class="token number">21</span><span class="token punctuation">,</span> <span class="token string">'2012-05-12'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Cake'</span><span class="token punctuation">,</span> <span class="token number">135</span><span class="token punctuation">,</span> <span class="token number">28</span><span class="token punctuation">,</span> <span class="token string">'2012-05-22'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Latte'</span><span class="token punctuation">,</span> <span class="token number">262</span><span class="token punctuation">,</span> <span class="token number">36</span><span class="token punctuation">,</span> <span class="token string">'2012-06-02'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Milk Tee'</span><span class="token punctuation">,</span> <span class="token number">359</span><span class="token punctuation">,</span> <span class="token number">21</span><span class="token punctuation">,</span> <span class="token string">'2012-06-22'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Cake'</span><span class="token punctuation">,</span> <span class="token number">121</span><span class="token punctuation">,</span> <span class="token number">28</span><span class="token punctuation">,</span> <span class="token string">'2012-07-02'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">'Latte'</span><span class="token punctuation">,</span> <span class="token number">271</span><span class="token punctuation">,</span> <span class="token number">36</span><span class="token punctuation">,</span> <span class="token string">'2012-06-22'</span><span class="token punctuation">]</span>
+ <span class="token comment">// ...</span>
+ <span class="token punctuation">]</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ transform<span class="token operator">:</span> <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'filter'</span><span class="token punctuation">,</span>
+ config<span class="token operator">:</span> <span class="token punctuation">{</span>
+ dimension<span class="token operator">:</span> <span class="token string">'Date'</span><span class="token punctuation">,</span>
+ <span class="token string">'>='</span><span class="token operator">:</span> <span class="token string">'2012-05'</span><span class="token punctuation">,</span>
+ <span class="token string">'<'</span><span class="token operator">:</span> <span class="token string">'2012-06'</span><span class="token punctuation">,</span>
+ parser<span class="token operator">:</span> <span class="token string">'time'</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v [...]
+ type<span class="token operator">:</span> <span class="token string">'filter'</span><span class="token punctuation">;</span>
+ config<span class="token operator">:</span> ConditionalExpressionOption<span class="token punctuation">;</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span>
+<span class="token keyword">type</span> <span class="token class-name">ConditionalExpressionOption</span> <span class="token operator">=</span>
+ <span class="token operator">|</span> <span class="token boolean">true</span>
+ <span class="token operator">|</span> <span class="token boolean">false</span>
+ <span class="token operator">|</span> RelationalExpressionOption
+ <span class="token operator">|</span> LogicalExpressionOption<span class="token punctuation">;</span>
+<span class="token keyword">type</span> <span class="token class-name">RelationalExpressionOption</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
+ dimension<span class="token operator">:</span> DimensionName <span class="token operator">|</span> DimensionIndex<span class="token punctuation">;</span>
+ parser<span class="token operator">?</span><span class="token operator">:</span> <span class="token string">'time'</span> <span class="token operator">|</span> <span class="token string">'trim'</span> <span class="token operator">|</span> <span class="token string">'number'</span><span class="token punctuation">;</span>
+ lt<span class="token operator">?</span><span class="token operator">:</span> DataValue<span class="token punctuation">;</span> <span class="token comment">// less than</span>
+ lte<span class="token operator">?</span><span class="token operator">:</span> DataValue<span class="token punctuation">;</span> <span class="token comment">// less than or equal</span>
+ gt<span class="token operator">?</span><span class="token operator">:</span> DataValue<span class="token punctuation">;</span> <span class="token comment">// greater than</span>
+ gte<span class="token operator">?</span><span class="token operator">:</span> DataValue<span class="token punctuation">;</span> <span class="token comment">// greater than or equal</span>
+ eq<span class="token operator">?</span><span class="token operator">:</span> DataValue<span class="token punctuation">;</span> <span class="token comment">// equal</span>
+ ne<span class="token operator">?</span><span class="token operator">:</span> DataValue<span class="token punctuation">;</span> <span class="token comment">// not equal</span>
+ <span class="token string">'<'</span><span class="token operator">?</span><span class="token operator">:</span> DataValue<span class="token punctuation">;</span> <span class="token comment">// lt</span>
+ <span class="token string">'<='</span><span class="token operator">?</span><span class="token operator">:</span> DataValue<span class="token punctuation">;</span> <span class="token comment">// lte</span>
+ <span class="token string">'>'</span><span class="token operator">?</span><span class="token operator">:</span> DataValue<span class="token punctuation">;</span> <span class="token comment">// gt</span>
+ <span class="token string">'>='</span><span class="token operator">?</span><span class="token operator">:</span> DataValue<span class="token punctuation">;</span> <span class="token comment">// gte</span>
+ <span class="token string">'='</span><span class="token operator">?</span><span class="token operator">:</span> DataValue<span class="token punctuation">;</span> <span class="token comment">// eq</span>
+ <span class="token string">'!='</span><span class="token operator">?</span><span class="token operator">:</span> DataValue<span class="token punctuation">;</span> <span class="token comment">// ne</span>
+ <span class="token string">'<>'</span><span class="token operator">?</span><span class="token operator">:</span> DataValue<span class="token punctuation">;</span> <span class="token comment">// ne (SQL style)</span>
+ reg<span class="token operator">?</span><span class="token operator">:</span> RegExp <span class="token operator">|</span> <span class="token builtin">string</span><span class="token punctuation">;</span> <span class="token comment">// RegExp</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span>
+<span class="token keyword">type</span> <span class="token class-name">LogicalExpressionOption</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
+ and<span class="token operator">?</span><span class="token operator">:</span> ConditionalExpressionOption<span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
+ or<span class="token operator">?</span><span class="token operator">:</span> ConditionalExpressionOption<span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
+ not<span class="token operator">?</span><span class="token operator">:</span> ConditionalExpressionOption<span class="token punctuation">;</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span>
+<span class="token keyword">type</span> <span class="token class-name">DataValue</span> <span class="token operator">=</span> <span class="token builtin">string</span> <span class="token operator">|</span> <span class="token builtin">number</span> <span class="token operator">|</span> Date<span class="token punctuation">;</span>
+<span class="token keyword">type</span> <span class="token class-name">DimensionName</span> <span class="token operator">=</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
+<span class="token keyword">type</span> <span class="token class-name">DimensionIndex</span> <span class="token operator">=</span> <span class="token builtin">number</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="current [...]
+ DatasetComponent<span class="token punctuation">,</span>
+ TransformComponent
+<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'echarts/components'</span><span class="token punctuation">;</span>
+
+echarts<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
+ DatasetComponent<span class="token punctuation">,</span>
+ TransformComponent
+<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" [...]
+ dataset<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ dimensions<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'name'</span><span class="token punctuation">,</span> <span class="token string">'age'</span><span class="token punctuation">,</span> <span class="token string">'profession'</span><span class="token punctuation">,</span> <span class="token string">'score'</span><span class="token punctuation">,</span> <span class="token string">'date'</span><span class="token punctuati [...]
+ source<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">[</span><span class="token string">' Hannah Krause '</span><span class="token punctuation">,</span> <span class="token number">41</span><span class="token punctuation">,</span> <span class="token string">'Engineer'</span><span class="token punctuation">,</span> <span class="token number">314</span><span class="token punctuation">,</span> <span class="token string">'2011-02-12'</span><span class="token punctuation">]</span><span class="token punctua [...]
+ <span class="token punctuation">[</span><span class="token string">'Zhao Qian '</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">,</span> <span class="token string">'Teacher'</span><span class="token punctuation">,</span> <span class="token number">351</span><span class="token punctuation">,</span> <span class="token string">'2011-03-01'</span><span class="token punctuation">]</span><span class="token punctuation"> [...]
+ <span class="token punctuation">[</span><span class="token string">' Jasmin Krause '</span><span class="token punctuation">,</span> <span class="token number">52</span><span class="token punctuation">,</span> <span class="token string">'Musician'</span><span class="token punctuation">,</span> <span class="token number">287</span><span class="token punctuation">,</span> <span class="token string">'2011-02-14'</span><span class="token punctuation">]</span><span class="token punctua [...]
+ <span class="token punctuation">[</span><span class="token string">'Li Lei'</span><span class="token punctuation">,</span> <span class="token number">37</span><span class="token punctuation">,</span> <span class="token string">'Teacher'</span><span class="token punctuation">,</span> <span class="token number">219</span><span class="token punctuation">,</span> <span class="token string">'2011-02-18'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">' Karle Neumann '</span><span class="token punctuation">,</span> <span class="token number">25</span><span class="token punctuation">,</span> <span class="token string">'Engineer'</span><span class="token punctuation">,</span> <span class="token number">253</span><span class="token punctuation">,</span> <span class="token string">'2011-04-02'</span><span class="token punctuation">]</span><span class="token punctua [...]
+ <span class="token punctuation">[</span><span class="token string">' Adrian Groß'</span><span class="token punctuation">,</span> <span class="token number">19</span><span class="token punctuation">,</span> <span class="token string">'Teacher'</span><span class="token punctuation">,</span> <span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token string">'2011-01-16'</span><span class="token punctuation">]</span><span class="token punctuati [...]
+ <span class="token punctuation">[</span><span class="token string">'Mia Neumann'</span><span class="token punctuation">,</span> <span class="token number">71</span><span class="token punctuation">,</span> <span class="token string">'Engineer'</span><span class="token punctuation">,</span> <span class="token number">165</span><span class="token punctuation">,</span> <span class="token string">'2011-03-19'</span><span class="token punctuation">]</span><span class="token punctuation [...]
+ <span class="token punctuation">[</span><span class="token string">' Böhm Fuchs'</span><span class="token punctuation">,</span> <span class="token number">36</span><span class="token punctuation">,</span> <span class="token string">'Musician'</span><span class="token punctuation">,</span> <span class="token number">318</span><span class="token punctuation">,</span> <span class="token string">'2011-02-24'</span><span class="token punctuation">]</span><span class="token punctuation [...]
+ <span class="token punctuation">[</span><span class="token string">'Han Meimei '</span><span class="token punctuation">,</span> <span class="token number">67</span><span class="token punctuation">,</span> <span class="token string">'Engineer'</span><span class="token punctuation">,</span> <span class="token number">366</span><span class="token punctuation">,</span> <span class="token string">'2011-03-12'</span><span class="token punctuation">]</span>
+ <span class="token punctuation">]</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ transform<span class="token operator">:</span> <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'sort'</span><span class="token punctuation">,</span>
+ <span class="token comment">// 按分数排序</span>
+ config<span class="token operator">:</span> <span class="token punctuation">{</span> dimension<span class="token operator">:</span> <span class="token string">'score'</span><span class="token punctuation">,</span> order<span class="token operator">:</span> <span class="token string">'asc'</span> <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span><span class="token punctuation">,</span>
+ series<span class="token operator">:</span> <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span>
+ datasetIndex<span class="token operator">:</span> <span class="token number">1</span>
+ <span class="token punctuation">}</span>
+ <span class="token comment">// ...</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v [...]
+<ul><li>默认按照数值大小排序。其中，“可转为数值的字符串”也被转换成数值，和其他数值一起按大小排序。</li> <li>对于其他“不能转为数值的字符串”，也能在它们之间按字符串进行排序。这个特性有助于这种场景：把相同标签的数据项排到一起，尤其是当多个维度共同排序时。见下面的例子。</li> <li>当“数值及可转为数值的字符串”和“不能转为数值的字符串”进行排序时，或者它们和“其他类型的值”进行比较时，它们本身是不知如何进行比较的。那么我们称呼“后者”为“incomparable”，并且可以设置 <code>incomparable: 'min' | 'max'</code> 来指定一个“incomparable”在这个比较中是最大还是最小，从而能使它们能产生比较结果。这个设定的用途，比如可以是，决定空值（例如 <code>null</code>, <code>undefined</code>, <code>NaN</code>, <code>''</code>, <code>'-'</cod
e>）在排序的头还是尾。</li></ul></li> <li>过滤器 [...]
+<ul><li>如果要对时间进行排序（例如，值为 JS <code>Date</code> 实例或者时间字符串如 <code>'2012-03-12 11:13:54'</code>），我们需要声明 <code>parser: 'time'</code>。</li> <li>如果需要对有后缀的数值进行排序（如 <code>'33%'</code>, <code>'16px'</code>）我们需要声明 <code>parser: 'number'</code>。</li></ul></li></ul> <p>这是一个“多维度排序”的例子。</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code>option <span class="token operator">=</span> <span class="token punctuation">{</span>
+ dataset<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ dimensions<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'name'</span><span class="token punctuation">,</span> <span class="token string">'age'</span><span class="token punctuation">,</span> <span class="token string">'profession'</span><span class="token punctuation">,</span> <span class="token string">'score'</span><span class="token punctuation">,</span> <span class="token string">'date'</span><span class="token punctuati [...]
+ source<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">[</span><span class="token string">' Hannah Krause '</span><span class="token punctuation">,</span> <span class="token number">41</span><span class="token punctuation">,</span> <span class="token string">'Engineer'</span><span class="token punctuation">,</span> <span class="token number">314</span><span class="token punctuation">,</span> <span class="token string">'2011-02-12'</span><span class="token punctuation">]</span><span class="token punctua [...]
+ <span class="token punctuation">[</span><span class="token string">'Zhao Qian '</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">,</span> <span class="token string">'Teacher'</span><span class="token punctuation">,</span> <span class="token number">351</span><span class="token punctuation">,</span> <span class="token string">'2011-03-01'</span><span class="token punctuation">]</span><span class="token punctuation"> [...]
+ <span class="token punctuation">[</span><span class="token string">' Jasmin Krause '</span><span class="token punctuation">,</span> <span class="token number">52</span><span class="token punctuation">,</span> <span class="token string">'Musician'</span><span class="token punctuation">,</span> <span class="token number">287</span><span class="token punctuation">,</span> <span class="token string">'2011-02-14'</span><span class="token punctuation">]</span><span class="token punctua [...]
+ <span class="token punctuation">[</span><span class="token string">'Li Lei'</span><span class="token punctuation">,</span> <span class="token number">37</span><span class="token punctuation">,</span> <span class="token string">'Teacher'</span><span class="token punctuation">,</span> <span class="token number">219</span><span class="token punctuation">,</span> <span class="token string">'2011-02-18'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ <span class="token punctuation">[</span><span class="token string">' Karle Neumann '</span><span class="token punctuation">,</span> <span class="token number">25</span><span class="token punctuation">,</span> <span class="token string">'Engineer'</span><span class="token punctuation">,</span> <span class="token number">253</span><span class="token punctuation">,</span> <span class="token string">'2011-04-02'</span><span class="token punctuation">]</span><span class="token punctua [...]
+ <span class="token punctuation">[</span><span class="token string">' Adrian Groß'</span><span class="token punctuation">,</span> <span class="token number">19</span><span class="token punctuation">,</span> <span class="token string">'Teacher'</span><span class="token punctuation">,</span> <span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token string">'2011-01-16'</span><span class="token punctuation">]</span><span class="token punctuati [...]
+ <span class="token punctuation">[</span><span class="token string">'Mia Neumann'</span><span class="token punctuation">,</span> <span class="token number">71</span><span class="token punctuation">,</span> <span class="token string">'Engineer'</span><span class="token punctuation">,</span> <span class="token number">165</span><span class="token punctuation">,</span> <span class="token string">'2011-03-19'</span><span class="token punctuation">]</span><span class="token punctuation [...]
+ <span class="token punctuation">[</span><span class="token string">' Böhm Fuchs'</span><span class="token punctuation">,</span> <span class="token number">36</span><span class="token punctuation">,</span> <span class="token string">'Musician'</span><span class="token punctuation">,</span> <span class="token number">318</span><span class="token punctuation">,</span> <span class="token string">'2011-02-24'</span><span class="token punctuation">]</span><span class="token punctuation [...]
+ <span class="token punctuation">[</span><span class="token string">'Han Meimei '</span><span class="token punctuation">,</span> <span class="token number">67</span><span class="token punctuation">,</span> <span class="token string">'Engineer'</span><span class="token punctuation">,</span> <span class="token number">366</span><span class="token punctuation">,</span> <span class="token string">'2011-03-12'</span><span class="token punctuation">]</span>
+ <span class="token punctuation">]</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ transform<span class="token operator">:</span> <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'sort'</span><span class="token punctuation">,</span>
+ config<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token comment">// 对两个维度按声明的优先级分别排序。</span>
+ <span class="token punctuation">{</span> dimension<span class="token operator">:</span> <span class="token string">'profession'</span><span class="token punctuation">,</span> order<span class="token operator">:</span> <span class="token string">'desc'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span> dimension<span class="token operator">:</span> <span class="token string">'score'</span><span class="token punctuation">,</span> order<span class="token operator">:</span> <span class="token string">'desc'</span> <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">}</span>
+ <span class="token punctuation">]</span><span class="token punctuation">,</span>
+ series<span class="token operator">:</span> <span class="token punctuation">{</span>
+ type<span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span>
+ datasetIndex<span class="token operator">:</span> <span class="token number">1</span>
+ <span class="token punctuation">}</span>
+ <span class="token comment">//...</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v [...]
+ type<span class="token operator">:</span> <span class="token string">'filter'</span><span class="token punctuation">;</span>
+ config<span class="token operator">:</span> OrderExpression <span class="token operator">|</span> OrderExpression<span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span>
+<span class="token keyword">type</span> <span class="token class-name">OrderExpression</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
+ dimension<span class="token operator">:</span> DimensionName <span class="token operator">|</span> DimensionIndex<span class="token punctuation">;</span>
+ order<span class="token operator">:</span> <span class="token string">'asc'</span> <span class="token operator">|</span> <span class="token string">'desc'</span><span class="token punctuation">;</span>
+ incomparable<span class="token operator">?</span><span class="token operator">:</span> <span class="token string">'min'</span> <span class="token operator">|</span> <span class="token string">'max'</span><span class="token punctuation">;</span>
+ parser<span class="token operator">?</span><span class="token operator">:</span> <span class="token string">'time'</span> <span class="token operator">|</span> <span class="token string">'trim'</span> <span class="token operator">|</span> <span class="token string">'number'</span><span class="token punctuation">;</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span>
+<span class="token keyword">type</span> <span class="token class-name">DimensionName</span> <span class="token operator">=</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
+<span class="token keyword">type</span> <span class="token class-name">DimensionIndex</span> <span class="token operator">=</span> <span class="token builtin">number</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="current [...]
+ DatasetComponent<span class="token punctuation">,</span>
+ TransformComponent
+<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'echarts/components'</span><span class="token punctuation">;</span>
+
+echarts<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
+ DatasetComponent<span class="token punctuation">,</span>
+ TransformComponent
+<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" [...]
+echarts<span class="token punctuation">.</span><span class="token function">registerTransform</span><span class="token punctuation">(</span><span class="token function">ecStatTransform</span><span class="token punctuation">(</span>ecStat<span class="token punctuation">)</span><span class="token punctuation">.</span>regression<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http:/ [...]
+ dataset<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ source<span class="token operator">:</span> rawData
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token punctuation">{</span>
+ transform<span class="token operator">:</span> <span class="token punctuation">{</span>
+ <span class="token comment">// 引用注册的数据转换器。</span>
+ <span class="token comment">// 注意，每个外部的数据转换器，都有名空间（如 'ecStat:xxx'，'ecStat' 是名空间）。</span>
+ <span class="token comment">// 而内置数据转换器（如 'filter', 'sort'）没有名空间。</span>
... 4535 lines suppressed ...
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org